From c1d38e4fdedde38810c4d0e49f36f333bd3955e1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 24 Oct 2026 21:44:00 +0000
Subject: [PATCH 01/10] =?UTF-8?q?=EC=8B=9C=EC=9E=91=20=E2=80=94=20?=
 =?UTF-8?q?=ED=8C=A8=ED=84=B4=20=EC=97=B0=EA=B5=AC=2039=ED=8C=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WSruBmW95rasfF2WmM8DZ7

From 8716206144217fa2419411e07e5d6c420c3e0a4c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 24 Oct 2026 22:33:58 +0000
Subject: [PATCH 02/10] =?UTF-8?q?incoming:=20Brachistochrone,=20Blotting?=
 =?UTF-8?q?=20Paper=20=ED=8C=A8=ED=84=B4=20(39=ED=8C=90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WSruBmW95rasfF2WmM8DZ7
---
 .../pattern-study/patterns/blotting-paper.js  | 257 ++++++++++++
 .../pattern-study/patterns/brachistochrone.js | 396 ++++++++++++++++++
 2 files changed, 653 insertions(+)
 create mode 100644 incoming/pattern-study/patterns/blotting-paper.js
 create mode 100644 incoming/pattern-study/patterns/brachistochrone.js

diff --git a/incoming/pattern-study/patterns/blotting-paper.js b/incoming/pattern-study/patterns/blotting-paper.js
new file mode 100644
index 000000000..f6322a863
--- /dev/null
+++ b/incoming/pattern-study/patterns/blotting-paper.js
@@ -0,0 +1,257 @@
+// ===== Patternflow pattern =====
+// Title:   Blotting Paper
+// Family:  cosmetic
+// Idea:    A thin tinted sheet of oil-blotting paper with its fibres showing hangs in front of a lit wall and, pressed to skin we never see, takes up oil where each pore touches it: translucent spots open with a deeper rim at their wet edge and widen with the square root of time, running a little ahead along the fibres and into one another, and wherever the paper has gone clear the wall shines through brighter and deeper in tint, until most of the sheet glows, holds, and a fresh sheet slides down over it.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 39, after oil-blotting paper pressed to the skin, going translucent where the sebum wicks into its fibres (Lucas-Washburn wicking: Richard Lucas, 1918; Edward Washburn, 1921)
+// Round:   39
+// ===============================
+// @matrix 64x128
+// @knobs Hue=0..1, Speed=0.2..3, Pores=20..80, Grain=0..1
+//
+// Knob 1: Hue. Turns the paper's tint round the whole wheel; the dry paper is a dim pale tint and the clear spots the same hue, deeper. At 0 rose, at 0.05 red, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale yellow, 0.3 lime, 0.4 green, 0.5 aqua, 0.6 sky blue, 0.7 blue, 0.8 violet, 0.9 orchid. From 0.02 to 0.34 the dry paper is lifted up to 1.5 times and paled toward grey and the spots a little paler, so red, orange and yellow paper never reads brown or olive.
+// Knob 2: Speed. At 2 the first pores touch 0.4 s after a sheet is pressed and the last about 6.5 s after; a tenth of the sheet is clear by 2.5 s, half by 6.7 s and nine tenths by 13 s, then it holds 2.5 s and a fresh sheet slides down in 1.4 s, about 16 s a sheet. At 0.2 the wicking is ten times slower, at 3 one and a half times faster; the slide always takes 1.4 s.
+// Knob 3: Pores. How many pores touch the sheet, each later one where the paper is still dry: 20 at the start, whose widest spots reach about 45 LEDs across before they meet, up to 80 at the top, about 24 across. Each spot's radius goes as the square root of its age, and the more pores, the slower each one spreads, so the sheet clears in about the same time.
+// Knob 4: Grain. How far the fibres line up along the panel. Up to 0.06 they lie every which way and the spots stay round; at 1 nearly all run up and down, nearly twice as long, and the oil runs along them two and a half times as fast as across, so the spots stretch into tall ovals and the clear patches join in columns.
+
+const W = 64, H = 128, N = W * H;
+// Opening tint: rose.
+const H0 = 0.94;
+// Fibres in a sheet, the width of the wicking front in LEDs, and how far the
+// oil runs ahead along a fibre.
+const NF = 440, FRONT = 2.6, AHEAD = 1.8;
+// Brightness of the dry and the clear paper over the wall, 0..1.
+const DRY = 0.24, CLEAR = 1;
+// Sheet seconds at Speed 2: the hold, once 90% of the sheet is clear, and the
+// slide of the next sheet in real seconds.
+const HOLD = 2.5, SLIDE = 1.4;
+// Sheet seconds for the paper behind the front to soak to its clearest.
+const SOAK = 2.5;
+// Spreading rate: the area all the spots open together, in LEDs a second.
+const RATE = 1290, LATE = 6.5;
+const { floor, min, max, abs, sqrt, sin, cos, exp, round, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+
+function rng(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = Math.imul(a ^ (a >>> 15), a | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+// A sheet: its fibres, its paper grain and the slow cockle that makes each
+// spot a little uneven. The fibres come from their own generator, so the
+// grain knob changes the fibres and never where the pores touch.
+function sheet(seed, grain) {
+  const F = new Float32Array(N), g = new Float32Array(N), r = rng(seed);
+  const spread = 1 - 0.9 * grain;
+  for (let f = 0; f < NF; f++) {
+    const cx = r() * (W + 8) - 4, cy = r() * (H + 8) - 4, len = (4 + 11 * r()) * (1 + 0.8 * grain), a = PI / 2 + spread * (r() - 0.5) * PI, w = 0.35 + 0.65 * r();
+    const dx = cos(a), dy = sin(a), n = Math.ceil(len / 0.5);
+    for (let j = 0; j <= n; j++) {
+      const s = (j / n - 0.5) * len, x = cx + dx * s, y = cy + dy * s, i = floor(x), k = floor(y), fx = x - i, fy = y - k;
+      for (let b = 0; b < 2; b++)
+        for (let c = 0; c < 2; c++) {
+          const xx = i + c, yy = k + b;
+          if (xx < 0 || yy < 0 || xx >= W || yy >= H) continue;
+          F[yy * W + xx] += 0.5 * w * (c ? fx : 1 - fx) * (b ? fy : 1 - fy);
+        }
+    }
+  }
+  for (let p = 0; p < N; p++) {
+    F[p] = min(1, F[p]);
+    g[p] = r() * 2 - 1;
+  }
+  // The cockle roughens the spots' edges; the flocs, clumps of fibres a few
+  // LEDs across, cloud the paper where it has gone clear.
+  const nz = noise(r, 7, 1), fl = noise(r, 9, 0.5);
+  return { F, g, nz, fl, seed };
+}
+
+// Smooth value noise, -1..1, on a grid of cells `cell` LEDs wide, with a
+// second octave of half the size at weight w2.
+function noise(r, cell, w2) {
+  const out = new Float32Array(N);
+  for (const [c, w] of [[cell, 1], [cell / 2, w2]]) {
+    const gw = Math.ceil(W / c) + 2, gh = Math.ceil(H / c) + 2, G = new Float32Array(gw * gh);
+    for (let i = 0; i < G.length; i++) G[i] = r() * 2 - 1;
+    for (let y = 0; y < H; y++) {
+      const v = y / c, j = floor(v), fy = (v - j) * (v - j) * (3 - 2 * (v - j));
+      for (let x = 0; x < W; x++) {
+        const u = x / c, i = floor(u), fx = (u - i) * (u - i) * (3 - 2 * (u - i)), a = G[j * gw + i], b = G[j * gw + i + 1], e = G[(j + 1) * gw + i], d = G[(j + 1) * gw + i + 1];
+        out[y * W + x] += (w * (a + (b - a) * fx + (e + (d - e) * fx - a - (b - a) * fx) * fy)) / (1 + w2);
+      }
+    }
+  }
+  return out;
+}
+
+// Where the pores touch: each the best of four tries at standing clear of
+// the ones before it, so the first n are spread out for any n.
+function pores(seed) {
+  const r = rng(seed ^ 0x5bd1e995), out = [];
+  for (let i = 0; i < 80; i++) {
+    let best = null, bd = -1;
+    for (let c = 0; c < 12; c++) {
+      const x = r() * (W + 6) - 3, y = r() * (H + 6) - 3;
+      let d = 1e9;
+      for (const o of out) d = min(d, (o.x - x) ** 2 + (o.y - y) ** 2);
+      if (d > bd) {
+        bd = d;
+        best = { x, y };
+      }
+    }
+    // How fast it wicks, and a share of the time it touches.
+    best.k = 0.75 + 0.5 * r();
+    best.r = 0.85 + 0.3 * r();
+    out.push(best);
+  }
+  return out;
+}
+
+// For every LED, the pore whose oil reaches it first: when that spot opened,
+// how fast it spreads and how far the LED is from it. Lucas-Washburn: a spot's
+// radius is k sqrt(t - t0), so the oil reaches distance d at t0 + (d / k)^2.
+// Distance is stretched across the grain, cut short along the fibres and
+// roughened by the cockle.
+function wick(S) {
+  const { F, nz } = S.cur, P = S.pores.slice(0, S.n), al = sqrt(1 + 1.5 * S.grain), T0 = S.T0, K = S.K, D = S.D;
+  // The first pores touch 0.4 s after the press and the rest follow over
+  // LATE seconds, each later one where the sheet is still dry.
+  P.forEach((o, i) => (o.t0 = 0.4 + LATE * (i / S.n) ** 1.4 * o.r));
+  // Each pore's k scaled so that n spots together open RATE LEDs a second.
+  let sk = 0;
+  for (const o of P) sk += o.k * o.k;
+  const kk = sqrt(RATE / (PI * sk)), arr = new Float32Array(N);
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const p = y * W + x, rough = 1 + 0.3 * nz[p], ahead = AHEAD * F[p];
+      let bt = 1e9, bi = 0, bd = 0;
+      for (let i = 0; i < P.length; i++) {
+        const o = P[i], dx = (x - o.x) * al, dy = (y - o.y) / al;
+        const d = max(0, sqrt(dx * dx + dy * dy) * rough - ahead), k = o.k * kk, t = o.t0 + (d / k) * (d / k);
+        if (t < bt) {
+          bt = t;
+          bi = i;
+          bd = d;
+        }
+      }
+      T0[p] = P[bi].t0;
+      K[p] = P[bi].k * kk;
+      D[p] = bd;
+      arr[p] = bt;
+    }
+  // The hold starts when nine tenths of the sheet has been reached.
+  arr.sort();
+  S.full = arr[floor(0.9 * N)];
+}
+
+function lay(S, seed) {
+  S.cur = sheet(seed, S.grain);
+  S.pores = pores(seed);
+  S.next = sheet(seed + 7919, S.grain);
+  wick(S);
+}
+
+export function setup(params) {
+  params.s = {
+    hue: 0, speed: 2, n: 20, grain: 0.06, t: 0, phase: 0, slide: 0, seed: floor(Math.random() * 1e9), begun: false,
+    T0: new Float32Array(N), K: new Float32Array(N), D: new Float32Array(N), V: new Float32Array(N), C: new Float32Array(N),
+  };
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [0, 2, 20, 0.06], d = cl(dt || 0, 0, 0.1);
+  S.hue = k[0];
+  S.speed = cl(k[1], 0.2, 3);
+  const n = round(cl(k[2], 20, 80)), grain = cl(k[3], 0, 1);
+  if (!S.begun) {
+    S.n = n;
+    S.grain = grain;
+    lay(S, S.seed);
+    S.begun = true;
+  } else if (abs(grain - S.grain) > 0.01) {
+    S.grain = grain;
+    S.n = n;
+    S.cur = sheet(S.cur.seed, grain);
+    S.next = sheet(S.cur.seed + 7919, grain);
+    wick(S);
+  } else if (n !== S.n) {
+    S.n = n;
+    wick(S);
+  }
+  if (S.phase === 0) {
+    S.t += (d * S.speed) / 2;
+    if (S.t > S.full + HOLD) S.phase = 1;
+  } else {
+    // A fresh sheet slides down over the old one.
+    S.slide += d / SLIDE;
+    if (S.slide >= 1) {
+      S.phase = 0;
+      S.slide = 0;
+      S.t = 0;
+      S.seed = (S.seed + 7919) >>> 0;
+      S.cur = S.next;
+      S.pores = pores(S.seed);
+      S.next = sheet(S.seed + 7919, S.grain);
+      wick(S);
+    }
+  }
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S || !S.begun) return;
+  const { T0, K, D, V, C } = S, t = S.t, h = S.hue + H0, hh = h - floor(h);
+  const pure = [0, 0, 0];
+  {
+    const x = hh * 6, i = floor(x) % 6, f = x - floor(x);
+    pure[0] = [1, 1 - f, 0, 0, f, 1][i];
+    pure[1] = [f, 1, 1, 1 - f, 0, 0][i];
+    pure[2] = [0, 0, f, 1, 1, 1 - f][i];
+  }
+  // Orange and yellow paper goes brown when dim: there the dry paper is
+  // lifted and paled.
+  const warm = cl(1.6 - abs(hh - 0.12) / 0.1, 0, 1);
+  const dryV = DRY * (1 + 0.5 * warm), dryS = 0.2 - 0.15 * warm, clrS = 0.56 - 0.1 * warm;
+  // Each LED's brightness is its dry level until the oil reaches it and then
+  // rises once, smoothly, to its clear level; nothing else on the sheet moves.
+  const { F, g, fl } = S.cur;
+  for (let y = 0; y < H; y++) {
+    const vy = (y - 63.5) / 92;
+    for (let x = 0; x < W; x++) {
+      const p = y * W + x, vx = (x - 31.5) / 46, wall = 0.84 + 0.16 * (1 - vx * vx - vy * vy);
+      const m = K[p] * sqrt(max(0, t - T0[p])) - D[p], age = t - T0[p] - (D[p] / K[p]) ** 2;
+      let s = cl(m / FRONT + 0.5, 0, 1);
+      s = s * s * (3 - 2 * s);
+      // Behind the front the paper keeps soaking up oil and clears further.
+      const soak = age > 0 ? 1 - exp(-age / SOAK) : 0;
+      const f = F[p], dry = dryV * wall * (1 + 0.5 * (f - 0.25) + 0.05 * g[p] + 0.06 * fl[p]), clr = CLEAR * wall * (1 - 0.17 * f + 0.03 * g[p] + 0.11 * fl[p]);
+      V[p] = dry + (clr - dry) * (0.68 * s + 0.32 * soak);
+      // The wet front carries a deeper rim of tint; it changes the colour,
+      // not the brightness.
+      C[p] = dryS + (clrS - dryS) * s + 1.2 * s * (1 - s);
+    }
+  }
+  const edge = S.phase === 1 ? round(H * (1 - (1 - S.slide) ** 3)) : -1, nf = S.next.F, ng = S.next.g, nl = S.next.fl;
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const p = y * W + x;
+      let v = V[p], c = C[p];
+      if (y < edge) {
+        // The fresh sheet, dry, its fibres sliding down with it.
+        const q = (y - edge + H) * W + x, vx = (x - 31.5) / 46, vy = (y - 63.5) / 92;
+        v = dryV * (0.84 + 0.16 * (1 - vx * vx - vy * vy)) * (1 + 0.5 * (nf[q] - 0.25) + 0.05 * ng[q] + 0.06 * nl[q]);
+        c = dryS;
+        if (y === edge - 1) v *= 1.5;
+      } else if (edge >= 0 && y - edge < 3) v *= 0.45 + 0.18 * (y - edge);
+      v = min(1, v);
+      display.setPixel(x, y, round(255 * v * (1 - c + c * pure[0])), round(255 * v * (1 - c + c * pure[1])), round(255 * v * (1 - c + c * pure[2])));
+    }
+}
diff --git a/incoming/pattern-study/patterns/brachistochrone.js b/incoming/pattern-study/patterns/brachistochrone.js
new file mode 100644
index 000000000..ace057c6e
--- /dev/null
+++ b/incoming/pattern-study/patterns/brachistochrone.js
@@ -0,0 +1,396 @@
+// ===== Patternflow pattern =====
+// Title:   Brachistochrone
+// Family:  physics
+// Idea:    Beads let go together from a point at the top left slide without friction down five tracks to a point on the right, a straight line, Galileo's circle, a parabola, a deep drop to the bottom of the panel and the cycloid, while the curve of all the points a bead could have reached by now spreads from the start down the whole panel and leaves rings behind; the cycloid's bead rides that front all the way and arrives first on a track longer than the line, the tracks light up in the order their beads come in, and every second race six beads let go from different heights on the cycloid all reach its bottom at once.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: the brachistochrone problem (Johann Bernoulli, 1696), solved by the cycloid, and the tautochrone (Christiaan Huygens, 1673), pattern round 39
+// Round:   39
+// ===============================
+// @matrix 64x128
+// @knobs Hue=0..1, Gravity=0.2..3, End=0..1, Tracks=5..13
+//
+// Knob 1: Hue. Turns every colour round the wheel together. At 0 the cycloid gold, Galileo's circle violet, the parabola green, the line cyan, the deep drop rose, and the front and its rings pale blue. From 0.33 to 0.68, where the front would turn red, orange, yellow or lime, it is paled and lifted so it reads cream, never brown.
+// Knob 2: Gravity. At 2 g is 31 LEDs a second squared: the cycloid's bead takes 2.4 s, the line's 2.84 s and the deep drop's 4.27 s, then the finish holds 1.3 s and fades in 0.6 s. Every time goes as one over the square root of g, so at 0.2 the race takes 3.2 times as long and at 3 it is 1.22 times as fast.
+// Knob 3: End. Where the end point sits on the right edge. At 0 at row 39, the bottom of the cycloid's arch, where the cycloid wins by 1.2% over the circle, 4.3% over the parabola and 18.5% over the line. Turned up the end point rises to row 13 and the cycloid dips 10 rows below it and climbs back, now 37.6% ahead of the circle and 74% ahead of the line; the beads of the second race pass the bottom of the arch together and those let go below the end swing back and meet there again.
+// Knob 4: Tracks. How many tracks race. At 5 the cycloid and its four classic rivals; each step adds another smooth track from the start to the end, eight more at 13, some starting shallow and some dipping below the end. None of them beats the cycloid.
+
+const W = 64, H = 128, N = W * H;
+// The start point A, and the column the end point B sits in.
+const AX = 3, AY = 3, BX = 60, DX = BX - AX;
+// B's depth below A: at End 0 the bottom of the arch, 2/pi of the width; at
+// End 1 ten rows. The deep drop always falls to row 124.
+const BY0 = (2 * DX) / Math.PI, BY1 = 10, YDEEP = 121;
+// g at Gravity 2, in LEDs a second squared: the cycloid's race at End 0 then
+// takes 2.4 s.
+const G2 = 31.1;
+// Points in each track's table, and the seconds of the hold, the fade, the
+// wait at the start and the light trail behind a bead.
+const M = 640, HOLD = 1.3, FADE = 0.6, WAIT = 0.5, TRAIL = 0.28;
+// Rings of the front left behind every sixth of the cycloid's time.
+const RINGS = 6;
+// Track colours, hue and saturation: the cycloid, Galileo's circle, the
+// parabola, the line, the deep drop, then the extra tracks.
+const COL = [[0.13, 0.62], [0.79, 0.55], [0.35, 0.6], [0.5, 0.6], [0.96, 0.55]];
+// Extra tracks: the angle they leave A at, degrees from straight down; the
+// angle they come into B at, degrees below level (negative: coming up); and
+// the lengths of their two handles as shares of the chord.
+const EXTRA = [[62, 12, 0.45, 0.3], [14, -35, 0.55, 0.45], [38, 38, 0.4, 0.4], [4, 2, 0.85, 0.3], [74, 55, 0.5, 0.35], [24, -55, 0.8, 0.5], [50, -12, 0.5, 0.35], [9, 22, 0.6, 0.3]];
+const EXH = [0.06, 0.24, 0.43, 0.56, 0.68, 0.88, 0.17, 0.74];
+const { floor, min, max, abs, sqrt, exp, sin, cos, acos, round, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+
+function hsv(h, s, v) {
+  h = (h - floor(h)) * 6;
+  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
+  return [[v, q, p, p, t, v][i], [t, v, v, q, p, p][i], [p, p, t, v, v, q][i]];
+}
+
+// The cycloid from A through a point bx across and by down: the angle the
+// rolling circle has turned at that point, and its radius a.
+function cycloidTo(bx, by) {
+  const r = bx / by;
+  let lo = 1e-9, hi = 2 * PI - 1e-9;
+  for (let i = 0; i < 56; i++) {
+    const m = (lo + hi) / 2, s = sin(m / 2);
+    if ((m - sin(m)) / (2 * s * s) < r) lo = m;
+    else hi = m;
+  }
+  const th = (lo + hi) / 2, s = sin(th / 2);
+  return [th, by / (2 * s * s)];
+}
+
+// A track from a curve f(u), u from 0 at A to 1 at B, sampled densely at both
+// ends. Times are in units where g = 1: each chord is taken at constant
+// slope, so the bead's time on it is exactly its length over the mean of the
+// speeds sqrt(2y) at its two ends, and the sum is the time of the polyline.
+function track(f, hue, sat) {
+  const x = new Float32Array(M), y = new Float32Array(M), t = new Float64Array(M);
+  let px = 0, py = 0;
+  for (let i = 0; i < M; i++) {
+    const u = 0.5 - 0.5 * cos((PI * i) / (M - 1)), p = f(u);
+    x[i] = p[0];
+    y[i] = max(0, p[1]);
+    if (i) t[i] = t[i - 1] + (Math.hypot(x[i] - px, y[i] - py) * Math.SQRT2) / (sqrt(py) + sqrt(y[i]) || 1);
+    px = x[i];
+    py = y[i];
+  }
+  return { x, y, t, T: t[M - 1], hue, sat, pix: null, wt: null, at: -1 };
+}
+
+function bezier(P) {
+  return (u) => {
+    const v = 1 - u, a = v * v * v, b = 3 * v * v * u, c = 3 * v * u * u, d = u * u * u;
+    return [a * P[0] + b * P[2] + c * P[4] + d * P[6], a * P[1] + b * P[3] + c * P[5] + d * P[7]];
+  };
+}
+
+// Lay a track into the panel as a thin core and a soft halo, kept as a list
+// of the pixels it touches.
+function rasterize(S, k) {
+  const R = S.tmp;
+  R.fill(0);
+  const { x, y } = k;
+  for (let i = 1; i < M; i++) {
+    const x0 = x[i - 1] + AX, y0 = y[i - 1] + AY, len = Math.hypot(x[i] + AX - x0, y[i] + AY - y0), n = Math.ceil(len / 0.4);
+    for (let j = 0; j < n; j++) {
+      const f = (j + 0.5) / n, px = x0 + (x[i] + AX - x0) * f, py = y0 + (y[i] + AY - y0) * f, w = len / n;
+      const ix = round(px), iy = round(py);
+      for (let b = -2; b <= 2; b++) {
+        const yy = iy + b;
+        if (yy < 0 || yy >= H) continue;
+        for (let a = -2; a <= 2; a++) {
+          const xx = ix + a;
+          if (xx < 0 || xx >= W) continue;
+          const d2 = (xx - px) ** 2 + (yy - py) ** 2;
+          R[yy * W + xx] += w * (0.75 * exp(-d2 / 0.5) + 0.07 * exp(-d2 / 5));
+        }
+      }
+    }
+  }
+  const pix = [], wt = [];
+  for (let p = 0; p < N; p++)
+    if (R[p] > 0.01) {
+      pix.push(p);
+      wt.push(min(1.2, R[p]));
+    }
+  k.pix = Int32Array.from(pix);
+  k.wt = Float32Array.from(wt);
+}
+
+// Every track for the end point's place, and the cycloid's numbers.
+function build(S) {
+  const bx = DX, by = BY0 * (BY1 / BY0) ** S.end;
+  const [th, a] = cycloidTo(bx, by);
+  S.by = by;
+  S.th = th;
+  S.a = a;
+  const tr = [];
+  // The cycloid, the curve a point on a rolling circle draws.
+  tr.push(track((u) => [a * (th * u - sin(th * u)), 2 * a * sin((th * u) / 2) ** 2], ...COL[0]));
+  // Galileo's circle: the arc down to B whose lowest point is B.
+  const R = (bx * bx + by * by) / (2 * by), cy = by - R, a0 = Math.atan2(-cy, -bx);
+  tr.push(track((u) => [bx + R * cos(a0 + (PI / 2 - a0) * u), cy + R * sin(a0 + (PI / 2 - a0) * u)], ...COL[1]));
+  // The parabola whose lowest point is B.
+  tr.push(track((u) => [bx * u, by * (1 - (1 - u) ** 2)], ...COL[2]));
+  // The straight line, the shortest way.
+  tr.push(track((u) => [bx * u, by * u], ...COL[3]));
+  // The deep drop: straight down the left side to row 124, along the bottom
+  // and up into B. D is found so that its lowest point is there.
+  let lo = by, hi = 4 * YDEEP;
+  for (let i = 0; i < 30; i++) {
+    const D = (lo + hi) / 2;
+    let m = 0;
+    for (let j = 1; j < 64; j++) {
+      const u = j / 64;
+      m = max(m, 3 * u * (1 - u) * D + u * u * u * by);
+    }
+    if (m < YDEEP) lo = D;
+    else hi = D;
+  }
+  tr.push(track(bezier([0, 0, 0, lo, bx, lo, bx, by]), ...COL[4]));
+  const C = Math.hypot(bx, by);
+  for (let j = 0; j < S.ntr - 5; j++) {
+    const [p, q, h1, h2] = EXTRA[j], pa = (p * PI) / 180, qa = (q * PI) / 180;
+    tr.push(track(bezier([0, 0, h1 * C * sin(pa), h1 * C * cos(pa), bx - h2 * C * cos(qa), by - h2 * C * sin(qa), bx, by]), EXH[j], 0.5));
+  }
+  for (const k of tr) rasterize(S, k);
+  // Keep the arrivals already seen in this race.
+  if (S.tracks) for (let i = 0; i < tr.length && i < S.tracks.length; i++) if (S.tracks[i].at >= 0 && S.tau >= tr[i].T) tr[i].at = S.tracks[i].at;
+  S.tracks = tr;
+  S.tauB = th * sqrt(a);
+}
+
+// Where the field of least times is: the time of the cycloid from A through
+// each pixel, the fastest way there, and the bead's speed there. The front at
+// time t is the curve these times equal t on, and all of it moves at the speed
+// a bead would have there, so its distance in LEDs is the time to go times
+// that speed.
+function field(S) {
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const p = y * W + x, dy = y - AY, dx = abs(x - AX);
+      if (dy < 0 || (dy === 0 && dx === 0)) {
+        S.tau0[p] = dy < 0 ? 1e9 : 0;
+        S.q[p] = 0;
+        continue;
+      }
+      if (dy === 0) S.tau0[p] = 2 * PI * sqrt(dx / (2 * PI));
+      else {
+        const [th, a] = cycloidTo(dx, dy);
+        S.tau0[p] = th * sqrt(a);
+      }
+      S.q[p] = sqrt(2 * dy);
+    }
+}
+
+export function setup(params) {
+  params.s = {
+    hue: 0, g: G2, end: -1, ntr: 0, tracks: null, mode: 0, phase: 0, clock: 0, tau: 0, fade: 1, t: 0, meet: [],
+    tau0: new Float32Array(N), q: new Float32Array(N), tmp: new Float32Array(N),
+    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N),
+  };
+  field(params.s);
+}
+
+// The tautochrone: from rest at arc length s0 above the bottom of the arch, a
+// bead's arc length is s0 cos(t sqrt(g / 4a)), whatever s0 is.
+function tautoBeads(S) {
+  const a = S.a, out = [];
+  for (let j = 0; j < 6; j++) out.push(4 * a * (1 - j / 6));
+  return out;
+}
+function onCycloid(S, s) {
+  const th = 2 * acos(cl(s / (4 * S.a), -1, 1));
+  return [S.a * (th - sin(th)), S.a * (1 - cos(th)), th];
+}
+
+// The race's last moment, in g = 1 time.
+function raceEnd(S) {
+  if (S.mode === 0) {
+    let m = 0;
+    for (const k of S.tracks) m = max(m, k.T);
+    return m;
+  }
+  const bot = PI * sqrt(S.a);
+  return S.th <= PI + 1e-6 ? S.tauB : 3 * bot;
+}
+
+function at(k, tau) {
+  const t = k.t;
+  if (tau >= k.T) return [k.x[M - 1], k.y[M - 1]];
+  if (tau <= 0) return [0, 0];
+  let lo = 0, hi = M - 1;
+  while (hi - lo > 1) {
+    const m = (lo + hi) >> 1;
+    if (t[m] <= tau) lo = m;
+    else hi = m;
+  }
+  const f = (tau - t[lo]) / (t[hi] - t[lo] || 1);
+  return [k.x[lo] + (k.x[hi] - k.x[lo]) * f, k.y[lo] + (k.y[hi] - k.y[lo]) * f];
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [0, 2, 0, 5], d = cl(dt || 0, 0, 0.1);
+  S.hue = k[0];
+  S.g = G2 * (cl(k[1], 0.2, 3) / 2);
+  const end = cl(k[2], 0, 1), ntr = round(cl(k[3], 5, 13));
+  if (abs(end - S.end) > 0.002 || ntr !== S.ntr) {
+    S.end = end;
+    S.ntr = ntr;
+    build(S);
+  }
+  const sg = sqrt(S.g);
+  S.t += d;
+  S.clock += d;
+  if (S.phase === 0 && S.clock >= WAIT) {
+    S.phase = 1;
+    S.tau = 0;
+  } else if (S.phase >= 1) {
+    const before = S.tau;
+    S.tau += d * sg;
+    if (S.mode === 0)
+      for (const tk of S.tracks)
+        // The arrival, placed inside the frame where it fell.
+        if (tk.at < 0 && S.tau >= tk.T) tk.at = S.t - (S.tau - tk.T) / sg;
+    if (S.mode === 1 && S.th >= PI - 1e-6) {
+      const bot = PI * sqrt(S.a);
+      for (const m of [bot, 3 * bot]) if (before < m && S.tau >= m) S.meet.push(S.t - (S.tau - m) / sg);
+    }
+    if (S.phase === 1 && S.tau >= raceEnd(S)) {
+      S.phase = 2;
+      S.clock = 0;
+    } else if (S.phase === 2 && S.clock >= HOLD) {
+      S.phase = 3;
+      S.clock = 0;
+    } else if (S.phase === 3) {
+      S.fade = 1 - S.clock / FADE;
+      if (S.clock >= FADE) {
+        S.phase = 0;
+        S.clock = 0;
+        S.fade = 1;
+        S.tau = 0;
+        S.mode ^= 1;
+        S.meet = [];
+        for (const tk of S.tracks) tk.at = -1;
+      }
+    }
+  }
+}
+
+// A soft dot of light into the colour buffers.
+function dot(S, x, y, r, w, c) {
+  const xi = round(x + AX), yi = round(y + AY), k = -1 / (r * r);
+  for (let j = yi - 2; j <= yi + 2; j++) {
+    if (j < 0 || j >= H) continue;
+    for (let i = xi - 2; i <= xi + 2; i++) {
+      if (i < 0 || i >= W) continue;
+      const e = w * exp(((i - x - AX) ** 2 + (j - y - AY) ** 2) * k), p = j * W + i;
+      S.R[p] += e * c[0];
+      S.G[p] += e * c[1];
+      S.B[p] += e * c[2];
+    }
+  }
+}
+
+function ring(S, x, y, age, c) {
+  const r = 1.5 + 16 * age, w = 0.8 * exp(-age / 0.22), n = round(6 * r + 8);
+  if (w < 0.03) return;
+  for (let j = 0; j < n; j++) {
+    const a = (2 * PI * j) / n;
+    dot(S, x + r * cos(a), y + r * sin(a), 0.7, w, c);
+  }
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S || !S.tracks) return;
+  const { R, G, B, tau0, q } = S;
+  const fade = S.phase === 3 ? S.fade : 1, live = S.phase >= 1, tau = live ? S.tau : 0, sg = sqrt(S.g);
+  // The front, the light it leaves behind and its rings, pale blue.
+  const fh = 0.6 + S.hue, dh = abs(fh - floor(fh) - 0.11), warm = cl(1.9 - min(dh, 1 - dh) / 0.09, 0, 1);
+  // Orange and yellow go brown this faint: there the front is paled and lifted.
+  const fc = hsv(fh, 0.5 - 0.3 * warm, 1 + 0.4 * warm), rk = S.tauB / RINGS;
+  const nring = live ? floor(tau / rk) : 0;
+  for (let p = 0; p < N; p++) {
+    let v = 0;
+    if (live && q[p] > 0) {
+      const dd = (tau0[p] - tau) * q[p];
+      if (dd < 2.5) {
+        if (dd > -2.5) v += 0.55 * exp(-dd * dd);
+        if (dd < 0) v += 0.09 + 0.16 * exp(dd / 7);
+        for (let r = 1; r <= nring; r++) {
+          const e = (tau0[p] - r * rk) * q[p];
+          if (e > -2 && e < 2) v += 0.24 * exp(-e * e * 2);
+        }
+      }
+    }
+    v *= fade;
+    R[p] = v * fc[0];
+    G[p] = v * fc[1];
+    B[p] = v * fc[2];
+  }
+  // The tracks, faint, each lit up when its bead arrives and staying lit.
+  const tc = [];
+  for (const k of S.tracks) {
+    const c = hsv(k.hue + S.hue, k.sat, 1);
+    tc.push(c);
+    let f = 0.3;
+    if (S.mode === 1 && k !== S.tracks[0]) f = 0.16;
+    if (k.at >= 0) {
+      const age = S.t - k.at;
+      f += fade * (0.22 + 0.5 * exp(-age / 0.3));
+    }
+    for (let i = 0; i < k.pix.length; i++) {
+      const p = k.pix[i], w = k.wt[i] * f;
+      R[p] += w * c[0];
+      G[p] += w * c[1];
+      B[p] += w * c[2];
+    }
+  }
+  const white = [1, 1, 1], bx = DX, by = S.by;
+  if (live) {
+    const dtr = (TRAIL * sg) / 12;
+    if (S.mode === 0)
+      S.tracks.forEach((k, i) => {
+        const c = tc[i];
+        if (k.at >= 0) {
+          ring(S, bx, by, S.t - k.at, c);
+          if (S.t - k.at > 0.15) return;
+        }
+        for (let j = 12; j >= 1; j--) {
+          const p = at(k, tau - j * dtr);
+          dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);
+        }
+        const p = at(k, tau);
+        dot(S, p[0], p[1], 0.8, fade * 1.1, c);
+        dot(S, p[0], p[1], 0.55, fade * 0.9, white);
+      });
+    else {
+      // The second race: beads from six heights on the cycloid, the one at A
+      // the same bead as in the race.
+      const c = tc[0], w = 1 / (2 * sqrt(S.a)), sB = 4 * S.a * cos(S.th / 2);
+      for (const s0 of tautoBeads(S)) {
+        // A bead let go above the end point's height leaves the track there.
+        const tEnd = s0 >= abs(sB) - 1e-6 ? acos(cl(sB / s0, -1, 1)) / w : 1e9;
+        if (tau > tEnd + 0.15 * sg) continue;
+        for (let j = 12; j >= 0; j--) {
+          const tt = min(max(0, tau - j * dtr), tEnd), p = onCycloid(S, s0 * cos(tt * w));
+          if (j) dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);
+          else {
+            dot(S, p[0], p[1], 0.8, fade * 1.1, c);
+            dot(S, p[0], p[1], 0.55, fade * 0.9, white);
+          }
+        }
+      }
+      for (const m of S.meet) ring(S, PI * S.a, 2 * S.a, S.t - m, c);
+    }
+  }
+  // A and B.
+  dot(S, 0, 0, 0.9, 0.7, white);
+  dot(S, bx, by, 0.9, 0.7, white);
+  for (let p = 0; p < N; p++)
+    display.setPixel(p % W, (p / W) | 0, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));
+}

From 7af7851c1b5a16600f3c25277c56a7f803ee1076 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 24 Oct 2026 22:34:27 +0000
Subject: [PATCH 03/10] =?UTF-8?q?incoming:=20Kingman=20Coalescent,=20Borsu?=
 =?UTF-8?q?k-Ulam=20=ED=8C=A8=ED=84=B4=20(39=ED=8C=90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WSruBmW95rasfF2WmM8DZ7
---
 .../pattern-study/patterns/borsuk-ulam.js     | 348 ++++++++++++++++++
 .../patterns/kingman-coalescent.js            | 238 ++++++++++++
 2 files changed, 586 insertions(+)
 create mode 100644 incoming/pattern-study/patterns/borsuk-ulam.js
 create mode 100644 incoming/pattern-study/patterns/kingman-coalescent.js

diff --git a/incoming/pattern-study/patterns/borsuk-ulam.js b/incoming/pattern-study/patterns/borsuk-ulam.js
new file mode 100644
index 000000000..b6ed4565d
--- /dev/null
+++ b/incoming/pattern-study/patterns/borsuk-ulam.js
@@ -0,0 +1,348 @@
+// ===== Patternflow pattern =====
+// Title:   Borsuk-Ulam
+// Family:  topology
+// Idea:    A turning globe carries a slowly changing temperature and pressure, the top disk showing the side that faces you and the bottom disk the far side laid so that each point sits where its antipode sits above, and the white line where the temperature equals the temperature at the antipode crosses the magenta line where the pressure does at an odd number of gold points, the same in both disks, where two opposite places on the Earth have the same weather.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: the Borsuk-Ulam theorem (Karol Borsuk, 1933, after a question of Stanisław Ulam)
+// Round:   39
+// ===============================
+// @matrix 64x128
+// @knobs Degree=3..6, Speed=0.2..3, Weather=0..1, Hue=0..1
+//
+// Knob 1: Degree. The highest degree of the random spherical harmonics in both fields, the next degree fading in between whole numbers. The two curves hang only on the odd degrees, so at 3 they are cubic curves and meet at 1 to 9 pairs, 2.8 on average: one pair 36% of the time, three 42%, five 19%, seven 3%. 4 adds a finer even layer to the colours and the isobars and leaves the curves cubic; at 5 and 6 the curves are quintic, wind into loops and meet at up to 25 pairs, about 5 on average.
+// Knob 2: Speed. How fast the globe turns: at 2 once in 20 seconds round an axis leaning 24 degrees toward you, at 0.2 once in 200 seconds, at 3 once in 13. The curves and the pairs turn with it; a pair that slips over the rim comes back at once on the opposite rim, where its other point is rising.
+// Knob 3: Weather. How fast the temperature and the pressure change. At 0 each coefficient swings once in 56 to 168 seconds, the curves creep and a pair of pairs is born or dies about 12 times a minute at Degree 3; at 1 eight times faster, 7 to 21 seconds, about 74 times a minute. Pairs come and go two at a time, where the curves touch, so the count stays odd.
+// Knob 4: Hue. Turns the palette: at the start azure for cold and orange for warm with a magenta pressure curve; at 0.25 violet and green with red; at 0.5 red and cyan with green; at 0.75 green and violet with cyan. The temperature curve stays white and the pairs gold. Where cold or warm lands on orange or yellow the pale bands are lifted toward full brightness, so they never go brown or olive.
+
+// Each disk sits in a 64 x 64 square, the near side above the far side.
+const S2 = 64;
+const { floor, min, abs, sqrt, sin, cos, round, random, PI } = Math;
+const TAU = 2 * PI;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+const sm = (a, b, v) => {
+  const t = cl((v - a) / (b - a), 0, 1);
+  return t * t * (3 - 2 * t);
+};
+
+// The disks: radius RAD about the centre of each 64 x 64 square.
+const RAD = 31, CX = 32, CY = 32;
+// Each field is a sum over AX zonal harmonics sqrt(2l+1) P_l(u . x) for every
+// degree l up to LMAX, each axis u wandering on a great circle.
+const AX = 5, LMAX = 6;
+// The globe turns round an axis leaning TILT toward you.
+const TILT = 0.42;
+// Grid seeds for Newton's method each frame, over one hemisphere.
+const SEEDS = 72;
+
+function hsv(h, s, v, out) {
+  h = (h - floor(h)) * 6;
+  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
+  out[0] = [v, q, p, p, t, v][i];
+  out[1] = [t, v, v, q, p, p][i];
+  out[2] = [p, p, t, v, v, q][i];
+}
+
+function unit() {
+  for (;;) {
+    const x = 2 * random() - 1, y = 2 * random() - 1, z = 2 * random() - 1, r = x * x + y * y + z * z;
+    if (r > 0.01 && r < 1) {
+      const k = 1 / sqrt(r);
+      return [x * k, y * k, z * k];
+    }
+  }
+}
+
+// One field: per axis a great circle (two orthonormal vectors and a speed)
+// and per degree a coefficient swinging with its own speed and phase.
+function field() {
+  const F = { e: [], w: [], amp: [], om: [], ph: [], u: new Float64Array(3 * AX), c: new Float64Array(AX * (LMAX + 1)) };
+  for (let j = 0; j < AX; j++) {
+    const a = unit(), b0 = unit();
+    const d = a[0] * b0[0] + a[1] * b0[1] + a[2] * b0[2];
+    const b = [b0[0] - d * a[0], b0[1] - d * a[1], b0[2] - d * a[2]], bl = Math.hypot(b[0], b[1], b[2]);
+    F.e.push([a, [b[0] / bl, b[1] / bl, b[2] / bl], random() * TAU]);
+    F.w.push((0.08 + 0.12 * random()) * (random() < 0.5 ? -1 : 1));
+    for (let l = 0; l <= LMAX; l++) {
+      F.amp.push(l === 0 ? 0 : (random() < 0.5 ? -1 : 1) * (0.6 + 0.4 * random()));
+      F.om.push(0.15 + 0.3 * random());
+      F.ph.push(random() * TAU);
+    }
+  }
+  return F;
+}
+
+// Axes and coefficients at weather time t, with degree l weighted by how far
+// the Degree knob has come past it.
+function place(F, t, deg) {
+  for (let j = 0; j < AX; j++) {
+    const [a, b, p] = F.e[j], th = p + F.w[j] * t, cs = cos(th), sn = sin(th);
+    for (let i = 0; i < 3; i++) F.u[3 * j + i] = a[i] * cs + b[i] * sn;
+    for (let l = 1; l <= LMAX; l++) {
+      const q = j * (LMAX + 1) + l, fade = cl(deg - l + 1, 0, 1);
+      F.c[q] = (fade * F.amp[q] * sqrt(2 * l + 1) * sin(F.om[q] * t + F.ph[q])) / Math.pow(l, 0.3);
+    }
+  }
+}
+
+// Even and odd parts of a field at unit vector x, and the gradient of the odd
+// part when grad is given: f(x) = even + odd, f(-x) = even - odd.
+function evalField(F, x, y, z, L, out, grad) {
+  let ev = 0, od = 0, gx = 0, gy = 0, gz = 0;
+  for (let j = 0; j < AX; j++) {
+    const ux = F.u[3 * j], uy = F.u[3 * j + 1], uz = F.u[3 * j + 2], s = ux * x + uy * y + uz * z, base = j * (LMAX + 1);
+    let p0 = 1, p1 = s, d0 = 0, d1 = 1, o = F.c[base + 1] * p1, e = 0, dd = F.c[base + 1];
+    for (let l = 1; l < L; l++) {
+      const p2 = ((2 * l + 1) * s * p1 - l * p0) / (l + 1), d2 = d0 + (2 * l + 1) * p1, c = F.c[base + l + 1];
+      if ((l + 1) & 1) {
+        o += c * p2;
+        dd += c * d2;
+      } else e += c * p2;
+      p0 = p1;
+      p1 = p2;
+      d0 = d1;
+      d1 = d2;
+    }
+    ev += e;
+    od += o;
+    if (grad) {
+      gx += dd * ux;
+      gy += dd * uy;
+      gz += dd * uz;
+    }
+  }
+  out[0] = ev;
+  out[1] = od;
+  if (grad) {
+    grad[0] = gx;
+    grad[1] = gy;
+    grad[2] = gz;
+  }
+}
+
+export function setup(params) {
+  const P = S2 * S2;
+  // World direction of each pixel of the top square: x right, y up, z
+  // toward you, pulled onto the rim outside the disk.
+  const wx = new Float32Array(P), wy = new Float32Array(P), wz = new Float32Array(P), cov = new Float32Array(P);
+  for (let y = 0; y < S2; y++)
+    for (let x = 0; x < S2; x++) {
+      const p = y * S2 + x, u = (x + 0.5 - CX) / RAD, v = (CY - y - 0.5) / RAD, r = sqrt(u * u + v * v);
+      cov[p] = cl((1 - r) * RAD + 0.5, 0, 1);
+      if (r < 1) {
+        wx[p] = u;
+        wy[p] = v;
+        wz[p] = sqrt(1 - r * r);
+      } else {
+        wx[p] = u / r;
+        wy[p] = v / r;
+        wz[p] = 0;
+      }
+    }
+  // Seeds: a Fibonacci spiral over the upper hemisphere.
+  const seeds = [];
+  for (let i = 0; i < SEEDS; i++) {
+    const z = (i + 0.5) / SEEDS, r = sqrt(1 - z * z), a = i * 2.39996323;
+    seeds.push([r * cos(a), r * sin(a), z]);
+  }
+  params.s = {
+    init: false, t: 0, wt: 0, deg: 3, L: 3, f: field(), g: field(), wx, wy, wz, cov, seeds,
+    fe: new Float32Array(P), fo: new Float32Array(P), ge: new Float32Array(P), go: new Float32Array(P),
+    lf: new Float32Array(P), lg: new Float32Array(P), roots: [], M: [1, 0, 0, 0, 1, 0, 0, 0, 1], hue: 0.06,
+    o1: [0, 0], o2: [0, 0], g1: [0, 0, 0], g2: [0, 0, 0], c: [0, 0, 0], d: [0, 0, 0],
+  };
+}
+
+// Newton's method on the sphere for fodd = godd = 0: the step is the
+// smallest tangent move that zeroes both linearised, taken from x and pulled
+// back onto the sphere.
+function newton(S, x0) {
+  let x = x0[0], y = x0[1], z = x0[2];
+  const { o1, o2, g1, g2 } = S;
+  for (let it = 0; it < 24; it++) {
+    evalField(S.f, x, y, z, S.L, o1, g1);
+    evalField(S.g, x, y, z, S.L, o2, g2);
+    const F1 = o1[1], F2 = o2[1];
+    if (abs(F1) < 1e-13 && abs(F2) < 1e-13) return [x, y, z];
+    const d1 = g1[0] * x + g1[1] * y + g1[2] * z, d2 = g2[0] * x + g2[1] * y + g2[2] * z;
+    const ax = g1[0] - d1 * x, ay = g1[1] - d1 * y, az = g1[2] - d1 * z;
+    const bx = g2[0] - d2 * x, by = g2[1] - d2 * y, bz = g2[2] - d2 * z;
+    const a = ax * ax + ay * ay + az * az, b = ax * bx + ay * by + az * bz, c = bx * bx + by * by + bz * bz, det = a * c - b * b;
+    if (det < 1e-14) return null;
+    const al = (-F1 * c + F2 * b) / det, be = (-F2 * a + F1 * b) / det;
+    let sx = al * ax + be * bx, sy = al * ay + be * by, sz = al * az + be * bz;
+    const sl = sqrt(sx * sx + sy * sy + sz * sz);
+    if (sl > 0.35) {
+      sx *= 0.35 / sl;
+      sy *= 0.35 / sl;
+      sz *= 0.35 / sl;
+    }
+    x += sx;
+    y += sy;
+    z += sz;
+    const n = 1 / sqrt(x * x + y * y + z * z);
+    x *= n;
+    y *= n;
+    z *= n;
+  }
+  evalField(S.f, x, y, z, S.L, o1);
+  evalField(S.g, x, y, z, S.L, o2);
+  return abs(o1[1]) < 1e-10 && abs(o2[1]) < 1e-10 ? [x, y, z] : null;
+}
+
+// All antipodal pairs, by Newton's method from three kinds of start: last
+// frame's pairs, every 2 x 2 block of LEDs on the near side where both odd
+// parts change sign, and a fixed spiral of seeds; each pair kept once.
+function findRoots(S) {
+  const found = [];
+  const add = (r) => {
+    if (!r) return;
+    for (const q of found) {
+      const d = (q[0] - r[0]) ** 2 + (q[1] - r[1]) ** 2 + (q[2] - r[2]) ** 2, e = (q[0] + r[0]) ** 2 + (q[1] + r[1]) ** 2 + (q[2] + r[2]) ** 2;
+      if (d < 1e-8 || e < 1e-8) return;
+    }
+    found.push(r);
+  };
+  for (const r of S.roots) add(newton(S, r));
+  const { fo, go, wx, wy, wz, M } = S;
+  for (let y = 0; y < S2 - 1; y++)
+    for (let x = 0; x < S2 - 1; x++) {
+      const p = y * S2 + x, q = [p, p + 1, p + S2, p + S2 + 1];
+      let fp = 0, fn = 0, gp = 0, gn = 0;
+      for (const i of q) {
+        if (fo[i] > 0) fp = 1;
+        else fn = 1;
+        if (go[i] > 0) gp = 1;
+        else gn = 1;
+      }
+      if (!(fp && fn && gp && gn)) continue;
+      const X = wx[p], Y = wy[p], Z = wz[p];
+      add(newton(S, [M[0] * X + M[1] * Y + M[2] * Z, M[3] * X + M[4] * Y + M[5] * Z, M[6] * X + M[7] * Y + M[8] * Z]));
+    }
+  for (const s of S.seeds) add(newton(S, s));
+  S.roots = found;
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [3, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);
+  S.deg = cl(k[0], 3, 6);
+  S.L = Math.ceil(S.deg - 1e-9);
+  const speed = cl(k[1], 0.2, 3), weather = 0.25 + 1.75 * cl(k[2], 0, 1);
+  S.hue = k[3];
+  S.t += d * speed;
+  S.wt += d * weather;
+  place(S.f, S.wt + 3, S.deg);
+  place(S.g, S.wt + 3, S.deg);
+  // Body from world: undo the lean, then the turn.
+  const ph = S.t * 0.025 * TAU, cp = cos(ph), sp = sin(ph), ct = cos(TILT), st = sin(TILT);
+  // World = Rx(TILT) Ry(ph) body; body = Ry(-ph) Rx(-TILT) world.
+  // Rx(-TILT): (x, y, z) -> (x, ct y + st z, -st y + ct z).
+  // Ry(-ph): (x, y, z) -> (cp x - sp z, y, sp x + cp z).
+  S.M = [cp, sp * st, -sp * ct, 0, ct, st, sp, -cp * st, cp * ct];
+  const { wx, wy, wz, fe, fo, ge, go, o1, o2, M } = S, L = S.L;
+  for (let p = 0; p < S2 * S2; p++) {
+    const X = wx[p], Y = wy[p], Z = wz[p];
+    const x = M[0] * X + M[1] * Y + M[2] * Z, y = M[3] * X + M[4] * Y + M[5] * Z, z = M[6] * X + M[7] * Y + M[8] * Z;
+    evalField(S.f, x, y, z, L, o1);
+    evalField(S.g, x, y, z, L, o2);
+    fe[p] = o1[0];
+    fo[p] = o1[1];
+    ge[p] = o2[0];
+    go[p] = o2[1];
+  }
+  findRoots(S);
+}
+
+// Length of the screen gradient of A + sgn B at LED (x, y), per LED.
+function slope(A, B, sgn, x, y) {
+  const p = y * S2 + x, xl = x > 0 ? p - 1 : p, xr = x < S2 - 1 ? p + 1 : p, yu = y > 0 ? p - S2 : p, yd = y < S2 - 1 ? p + S2 : p;
+  const gx = (A[xr] - A[xl] + sgn * (B[xr] - B[xl])) / (xr - xl), gy = (A[yd] - A[yu] + sgn * (B[yd] - B[yu])) / ((yd - yu) / S2);
+  return sqrt(gx * gx + gy * gy) + 1e-9;
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S) return;
+  const { fe, fo, ge, go, cov, wz, c } = S;
+  const h0 = 0.52 + S.hue, FS = 2.2, ISO = 2, gc = S.d;
+  // Orange and yellow go brown and olive when dim, so near hue 0.12 the
+  // pale bands are lifted toward full brightness.
+  const yl = [0, 0.5].map((o) => {
+    const h = h0 + o - floor(h0 + o);
+    return 0.7 * cl(1 - abs(h - 0.12) / 0.11, 0, 1);
+  });
+  hsv(h0 + 0.25, 0.75, 1, gc);
+  // Screen places of the pairs: the member that faces you.
+  const pts = [];
+  for (const r of S.roots) {
+    const M = S.M;
+    // World from body is the transpose of M.
+    let X = M[0] * r[0] + M[3] * r[1] + M[6] * r[2], Y = M[1] * r[0] + M[4] * r[1] + M[7] * r[2], Z = M[2] * r[0] + M[5] * r[1] + M[8] * r[2];
+    if (Z < 0) {
+      X = -X;
+      Y = -Y;
+      Z = -Z;
+    }
+    pts.push([CX + X * RAD, CY - Y * RAD]);
+  }
+  const pulse = 0.75 + 0.25 * sin(S.t * 3), { lf, lg } = S;
+  // The two odd curves, the same in both disks: fodd(-x) = -fodd(x).
+  for (let y = 0; y < S2; y++)
+    for (let x = 0; x < S2; x++) {
+      const p = y * S2 + x;
+      lf[p] = cl(1.25 - abs(fo[p]) / slope(fo, fo, 0, x, y), 0, 1) * cov[p];
+      lg[p] = cl(1.15 - abs(go[p]) / slope(go, go, 0, x, y), 0, 1) * cov[p];
+    }
+  for (let half = 0; half < 2; half++) {
+    const sg = half ? -1 : 1;
+    for (let y = 0; y < S2; y++)
+      for (let x = 0; x < S2; x++) {
+        const p = y * S2 + x, a = cov[p];
+        if (a <= 0) {
+          display.setPixel(x, y + half * S2, 0, 0, 0);
+          continue;
+        }
+        // Temperature: two tones apart from a pale middle, in soft bands.
+        const tv = cl((fe[p] + sg * fo[p]) / FS, -1, 1), m = abs(tv) * 4, band = (floor(m) + sm(0.35, 0.65, m - floor(m))) / 4;
+        const side = tv < 0 ? 0 : 1, v0 = 0.6 + 0.4 * band;
+        hsv(h0 + 0.5 * side, 0.1 + 0.72 * band, v0 + (1 - v0) * yl[side] * sm(0, 0.4, band), c);
+        let shade = (0.86 + 0.14 * wz[p]) * a;
+        // Pressure: a few contour lines, darker.
+        const gv = (ge[p] + sg * go[p]) / ISO, fr = abs(gv - round(gv)) * ISO;
+        shade *= 1 - 0.55 * cl(0.95 - fr / slope(ge, go, sg, x, y), 0, 1);
+        let R = c[0] * shade, G = c[1] * shade, B = c[2] * shade;
+        // The curve godd = 0, where the pressure is the same at the antipode.
+        const ga = lg[p];
+        R += (gc[0] - R) * ga;
+        G += (gc[1] - G) * ga;
+        B += (gc[2] - B) * ga;
+        // The curve fodd = 0, where the temperature is.
+        const fa = lf[p];
+        R += (1 - R) * fa;
+        G += (1 - G) * fa;
+        B += (1 - B) * fa;
+        // The pairs: a gold core inside a dark ring, and a glow round it.
+        for (const q of pts) {
+          const dd = Math.hypot(x + 0.5 - q[0], y + 0.5 - q[1]);
+          if (dd >= 6.5) continue;
+          if (dd < 2.1) {
+            R = 1;
+            G = 0.86;
+            B = 0.45;
+          } else if (dd < 3.2) {
+            R *= 0.12;
+            G *= 0.12;
+            B *= 0.12;
+          } else {
+            const gw = pulse * 0.9 * (1 - (dd - 3.2) / 3.3) ** 1.5;
+            R += (1 - R) * gw;
+            G += (0.86 - G) * gw;
+            B += (0.45 - B) * gw * 0.5;
+          }
+        }
+        display.setPixel(x, y + half * S2, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));
+      }
+  }
+}
diff --git a/incoming/pattern-study/patterns/kingman-coalescent.js b/incoming/pattern-study/patterns/kingman-coalescent.js
new file mode 100644
index 000000000..b4bbf2d2a
--- /dev/null
+++ b/incoming/pattern-study/patterns/kingman-coalescent.js
@@ -0,0 +1,238 @@
+// ===== Patternflow pattern =====
+// Title:   Kingman Coalescent
+// Family:  data
+// Idea:    A Moran population of 64 runs forward one birth at a time while the panel draws the family tree of the living as a flame chart, now along the bottom row and the past going up, each LED in the colour of the ancestor its column came from at that time, so the narrow blocks at the bottom merge fast into a few wide ones, the last two take about as long to meet as all the others together, and when one of them dies out the common ancestor jumps forward and the panel takes the survivor's colours.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: Kingman's coalescent (John Kingman, 1982), traced back through a Moran population (Patrick Moran, 1958)
+// Round:   39
+// ===============================
+// @matrix 64x128
+// @knobs Span=3..9, Speed=0.2..3, Width=1..4, Mutation=0..1
+//
+// Knob 1: Span. How far back the top row reaches, in units of Kingman time: N(N-1)/2 = 2016 Moran events, about 31 generations of the 64. At 3 a row is 48 events and the common ancestor of all 64 sits on average 1.97 units back, at row 83 of 128; at 6 at row 42; at 9 a row is 143 events, the tree crowds into the bottom 28 rows and above it the one line of ancestors shows its mutations as bands.
+// Knob 2: Speed. At 2 the population runs 0.06 units of Kingman time a second, 121 births, and the panel climbs 2.5 rows a second at Span 3; the common ancestor of all 64 moves forward on average every 17 seconds, by about 43 rows. At 0.2 ten times slower, at 3 one and a half times faster.
+// Knob 3: Width. LEDs for each traced individual. At 1 all 64 are traced, one column each, and a block gets its dark seam from two LEDs wide; at 2 the first 32 of the population's 64 places, at 3 the first 21, at 4 the first 16, each 4 LEDs with a seam. The common ancestor of a sample can also move back, when a newborn's line joins the sample's tree above it: at 4 it moves forward every 0.34 units of Kingman time and back every 0.5.
+// Knob 4: Mutation. The chance that a birth carries a mutation, which steps the child's hue 0.05 to 0.11 round the wheel either way. 0.03 at 0 and 0.066 at the start, about two along each line per unit of Kingman time, so the two families of the last split mostly differ in colour; at 1 0.63, nearly every row of every block steps and the blocks turn to stripes.
+
+const W = 64, H = 128, N = 64;
+// One unit of Kingman time: N(N-1)/2 Moran events, in which a given pair of
+// lineages meets once on average going back.
+const UNIT = (N * (N - 1)) / 2;
+// Every individual ever born gets an id, in order of birth; its parent, the
+// event it was born in and its hue sit in a ring of the last RING births.
+const RING = 1 << 16, MASK = RING - 1;
+// Kingman time run before the first frame, so the history covers the panel.
+const BURN = 16;
+// Kingman time per second at Speed 1.
+const RATE = 0.03;
+const { floor, round, random, sin, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+
+function hsv(h, s, v, out) {
+  h = (h - floor(h)) * 6;
+  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
+  out[0] = [v, q, p, p, t, v][i];
+  out[1] = [t, v, v, q, p, p][i];
+  out[2] = [p, p, t, v, v, q][i];
+}
+
+export function setup(params) {
+  params.s = {
+    init: false, ev: 0, next: 0, acc: 0, n: 0, span: 3, speed: 2, mu: 0.05, shift: 0,
+    par: new Int32Array(RING), born: new Float64Array(RING), hue: new Float32Array(RING),
+    slot: new Int32Array(N), front: new Int32Array(N), tm: 0, order: new Int32Array(N), anc: new Int32Array(W * H),
+    c: [0, 0, 0],
+  };
+}
+
+// The founders: N individuals with no parent, born at event 0.
+function found(S) {
+  for (let i = 0; i < N; i++) {
+    S.par[i] = -1;
+    S.born[i] = 0;
+    S.hue[i] = 0.58;
+    S.slot[i] = i;
+  }
+  S.next = N;
+  S.ev = 0;
+}
+
+// One Moran event: a parent picked at random has a child, which takes the
+// place of another individual picked at random, who dies.
+function event(S) {
+  const p = floor(random() * N);
+  let d = floor(random() * (N - 1));
+  if (d >= p) d++;
+  const id = S.next++, j = id & MASK, pa = S.slot[p];
+  S.ev++;
+  S.par[j] = pa;
+  S.born[j] = S.ev;
+  // A mutation, with chance mu: the hue steps a little either way.
+  let m = 0;
+  if (random() < S.mu) m = (random() < 0.5 ? -1 : 1) * (0.05 + 0.06 * random());
+  S.hue[j] = S.hue[pa & MASK] + m;
+  S.slot[d] = id;
+}
+
+const parent = (S, a) => (a < N || S.next - a > RING - 2 * N ? -1 : S.par[a & MASK]);
+
+// Going back from the first n slots, always stepping the youngest ancestor
+// to its parent, until one is left: returns that common ancestor and, in
+// S.tm, the Moran events back to the merge of the last two lineages.
+function mrca(S, n) {
+  const f = S.front;
+  let k = 0;
+  for (let i = 0; i < n; i++) {
+    const a = S.slot[i];
+    let dup = false;
+    for (let j = 0; j < k; j++) if (f[j] === a) dup = true;
+    if (!dup) f[k++] = a;
+  }
+  S.tm = 0;
+  while (k > 1) {
+    let m = 0;
+    for (let j = 1; j < k; j++) if (f[j] > f[m]) m = j;
+    const a = f[m], q = parent(S, a);
+    if (q < 0) return -1;
+    let dup = false;
+    for (let j = 0; j < k; j++) if (f[j] === q) dup = true;
+    if (dup) {
+      f[m] = f[--k];
+      S.tm = S.ev - S.born[a & MASK] + 1;
+    } else f[m] = q;
+  }
+  return f[0];
+}
+
+// Order of two individuals in the flame chart: follow both lines back to
+// where they meet; the one that is that ancestor itself comes first,
+// otherwise the one whose line left it earlier. The order of two living
+// individuals never changes, so the chart only moves where they are born
+// and die.
+function cmp(S, a, b) {
+  let pa = -1, pb = -1;
+  while (a !== b) {
+    if (a > b) {
+      const q = parent(S, a);
+      if (q < 0) return a - b;
+      pa = a;
+      a = q;
+    } else {
+      const q = parent(S, b);
+      if (q < 0) return a - b;
+      pb = b;
+      b = q;
+    }
+  }
+  if (pa < 0) return -1;
+  if (pb < 0) return 1;
+  return pa - pb;
+}
+
+function sortOrder(S) {
+  const { order, slot } = S, n = S.n;
+  for (let i = 1; i < n; i++) {
+    const v = order[i], id = slot[v];
+    let j = i - 1;
+    while (j >= 0 && cmp(S, slot[order[j]], id) > 0) {
+      order[j + 1] = order[j];
+      j--;
+    }
+    order[j + 1] = v;
+  }
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [3, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);
+  S.span = cl(k[0], 3, 9);
+  S.speed = cl(k[1], 0.2, 3);
+  const w = round(cl(k[2], 1, 4)), n = floor(W / w);
+  S.mu = 0.03 + 0.6 * cl(k[3], 0, 1);
+  if (!S.init) {
+    found(S);
+    for (let e = 0; e < BURN * UNIT; e++) event(S);
+    // Run on until the traced tree is a typical one, its last merge between
+    // 0.8 and 1.3 times Kingman's mean 2(1 - 1/n) back, and turn the colours
+    // so that the common ancestor is azure.
+    const mean = 2 * (1 - 1 / n) * UNIT;
+    for (let tries = 0; tries < 60; tries++) {
+      const a = mrca(S, n);
+      if (a >= 0 && S.tm > 0.8 * mean && S.tm < 1.3 * mean) break;
+      for (let e = 0; e < UNIT / 5; e++) event(S);
+    }
+    const a = mrca(S, n);
+    if (a >= 0) S.shift = 0.58 - S.hue[a & MASK];
+    S.init = true;
+  }
+  if (n !== S.n) {
+    S.n = n;
+    for (let i = 0; i < n; i++) S.order[i] = i;
+  }
+  S.acc += d * S.speed * RATE * UNIT;
+  while (S.acc >= 1) {
+    event(S);
+    S.acc -= 1;
+  }
+  sortOrder(S);
+  // Each lineage's ancestor at each row's time. Rows sit on a grid of
+  // absolute times, so the picture climbs a whole row at a time.
+  const { anc, order, slot, born } = S, step = (S.span * UNIT) / (H - 1), K = floor(S.ev / step);
+  for (let i = 0; i < n; i++) {
+    let a = slot[order[i]];
+    anc[i] = a;
+    for (let r = 1; r < H; r++) {
+      const T = (K - r + 1) * step;
+      for (;;) {
+        if (born[a & MASK] <= T) break;
+        const q = parent(S, a);
+        if (q < 0) break;
+        a = q;
+      }
+      anc[r * W + i] = a;
+    }
+  }
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S || !S.init) return;
+  const { anc, hue, c } = S, n = S.n;
+  const col = new Int32Array(W);
+  for (let x = 0; x < W; x++) col[x] = floor((x * n) / W);
+  let top = -1;
+  for (let r = 0; r < H; r++) {
+    const row = r * W, y = H - 1 - r;
+    if (top < 0 && anc[row] === anc[row + n - 1]) top = r;
+    const val = 1 - 0.12 * (r / (H - 1));
+    // Each block: a run of columns with one ancestor in this row. A dark
+    // seam takes its first column when it is two or more wide, and it is
+    // shaded round like a tube.
+    for (let x0 = 0; x0 < W; ) {
+      const a = anc[row + col[x0]];
+      let x1 = x0 + 1;
+      while (x1 < W && anc[row + col[x1]] === a) x1++;
+      const seam = x0 > 0 && x1 - x0 > 1 ? 1 : 0, l0 = x0 + seam, wd = x1 - l0;
+      hsv(hue[a & MASK] + S.shift, 0.68, val, c);
+      for (let x = x0; x < x1; x++) {
+        if (x < l0) {
+          display.setPixel(x, y, 0, 0, 0);
+          continue;
+        }
+        const sh = 0.66 + 0.34 * sin((PI * (x - l0 + 0.5)) / wd);
+        let R = c[0] * 255 * sh, G = c[1] * 255 * sh, B = c[2] * 255 * sh;
+        // A merge: two blocks of the row below meet here.
+        if (r > 0 && x > x0 && anc[row - W + col[x]] !== anc[row - W + col[x - 1]]) {
+          const g = r === top ? 0.95 : 0.7;
+          R += (255 - R) * g;
+          G += (255 - G) * g;
+          B += (255 - B) * g;
+        }
+        display.setPixel(x, y, round(R), round(G), round(B));
+      }
+      x0 = x1;
+    }
+  }
+}

From 08cbf7ab5cb9a1d16a441f9896869c0828603be7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 24 Oct 2026 22:38:39 +0000
Subject: [PATCH 04/10] =?UTF-8?q?incoming:=20Explicit=20Formula,=20Soap=20?=
 =?UTF-8?q?Film=20=ED=8C=A8=ED=84=B4=20(39=ED=8C=90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WSruBmW95rasfF2WmM8DZ7
---
 .../patterns/explicit-formula.js              | 315 +++++++++++++++++
 incoming/pattern-study/patterns/soap-film.js  | 328 ++++++++++++++++++
 2 files changed, 643 insertions(+)
 create mode 100644 incoming/pattern-study/patterns/explicit-formula.js
 create mode 100644 incoming/pattern-study/patterns/soap-film.js

diff --git a/incoming/pattern-study/patterns/explicit-formula.js b/incoming/pattern-study/patterns/explicit-formula.js
new file mode 100644
index 000000000..6fc82265a
--- /dev/null
+++ b/incoming/pattern-study/patterns/explicit-formula.js
@@ -0,0 +1,315 @@
+// ===== Patternflow pattern =====
+// Title:   Explicit Formula
+// Family:  number
+// Idea:    The prime staircase psi(x), x running down the rows and psi across, is rebuilt from the zeros of the zeta function one pair at a time: the bare line x - log 2 pi grows waves that sharpen into steps, each step snapping onto its prime power and its band lighting up as it does, while the zeros taken so far light up one by one down a strip at the right and a count at the top.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: Riemann's explicit formula (Bernhard Riemann, 1859), in von Mangoldt's form for the Chebyshev function psi (Hans von Mangoldt, 1895), pattern round 39
+// Round:   39
+// ===============================
+// @matrix 64x128
+// @knobs Hue=0..1, Speed=0.2..3, Reach=24..144, Tilt=0..1
+//
+// Knob 1: Hue. Turns the fill round the wheel, the shortfall colour a quarter turn on; gold stays gold. At 0 azure fill, violet where the sum falls short of the staircase and gold where it runs past; at 0.25 violet with orange, at 0.5 pale orange with green, at 0.75 green with azure. Orange and yellow fill is paled and dims less in its shaded bands, so it never reads brown.
+// Knob 2: Speed. How fast the zeros come in, each a little faster than the last: at 2 the first is in after 0.7 s, 10 by 4.2 s, 100 by 10.9 s and all 200 by 13.1 s; the staircase holds for 4 s, the zeros are taken out again in 1.9 s and the bare line rests 1 s, 20 s round. At 0.2 ten times slower, at 3 one and a half times faster.
+// Knob 3: Reach. How far x runs down the 128 rows, from 1 to Reach, with psi = 0 on column 3 and psi = Reach on column 57. At 24, the start, 13 prime powers, 5.6 rows to each unit of x and steps 1.6 to 7 LEDs wide; at 84 33 of them; at 144 47, the steps under 2 LEDs, and the staircase leans on the line x as the prime number theorem says it must. The 200 zeros resolve the staircase less sharply the further x runs.
+// Knob 4: Tilt. Takes Tilt times x away from both curves and widens the scale to match. Up to 0.06 the staircase itself; at 1 only psi(x) - x is left, a sawtooth that slides left one unit for each unit of x and jumps right by log p at each prime power, drawn 5 LEDs to the unit at Reach 24: the part of psi that the zeros alone make, their waves summing to the teeth.
+// Buttons: K1 tap takes every zero out and starts adding them again from the first.
+
+const W = 64, H = 128, SS = 4, NS = H * SS, NZ = 200;
+// The imaginary parts of the first 200 zeros of the zeta function on the
+// critical line, rho = 1/2 + i gamma, to six places. 14.134725 is the first,
+// 396.381854 the 200th.
+const GAM = [
+  14.134725, 21.022040, 25.010858, 30.424876, 32.935062, 37.586178, 40.918719, 43.327073, 48.005151, 49.773832,
+  52.970321, 56.446248, 59.347044, 60.831779, 65.112544, 67.079811, 69.546402, 72.067158, 75.704691, 77.144840,
+  79.337375, 82.910381, 84.735493, 87.425275, 88.809111, 92.491899, 94.651344, 95.870634, 98.831194, 101.317851,
+  103.725538, 105.446623, 107.168611, 111.029536, 111.874659, 114.320221, 116.226680, 118.790783, 121.370125, 122.946829,
+  124.256819, 127.516684, 129.578704, 131.087689, 133.497737, 134.756510, 138.116042, 139.736209, 141.123707, 143.111846,
+  146.000982, 147.422765, 150.053520, 150.925258, 153.024694, 156.112909, 157.597592, 158.849988, 161.188964, 163.030710,
+  165.537069, 167.184440, 169.094515, 169.911976, 173.411537, 174.754192, 176.441434, 178.377408, 179.916484, 182.207078,
+  184.874468, 185.598784, 187.228923, 189.416159, 192.026656, 193.079727, 195.265397, 196.876482, 198.015310, 201.264752,
+  202.493595, 204.189672, 205.394697, 207.906259, 209.576510, 211.690863, 213.347919, 214.547045, 216.169539, 219.067596,
+  220.714919, 221.430706, 224.007000, 224.983325, 227.421444, 229.337413, 231.250189, 231.987235, 233.693404, 236.524230,
+  237.769820, 239.555478, 241.049158, 242.823272, 244.070898, 247.136990, 248.101990, 249.573690, 251.014948, 253.069987,
+  255.306256, 256.380714, 258.610439, 259.874407, 260.805085, 263.573894, 265.557852, 266.614974, 267.921915, 269.970449,
+  271.494056, 273.459609, 275.587493, 276.452050, 278.250744, 279.229251, 282.465115, 283.211186, 284.835964, 286.667445,
+  287.911921, 289.579855, 291.846291, 293.558434, 294.965370, 295.573255, 297.979277, 299.840326, 301.649325, 302.696750,
+  304.864371, 305.728913, 307.219496, 310.109463, 311.165142, 312.427801, 313.985286, 315.475616, 317.734806, 318.853104,
+  321.160134, 322.144559, 323.466970, 324.862866, 327.443901, 329.033072, 329.953240, 331.474468, 333.645379, 334.211355,
+  336.841850, 338.339993, 339.858217, 341.042261, 342.054878, 344.661703, 346.347871, 347.272678, 349.316261, 350.408419,
+  351.878649, 353.488900, 356.017575, 357.151302, 357.952685, 359.743755, 361.289362, 363.331331, 364.736024, 366.212710,
+  367.993575, 368.968438, 370.050919, 373.061928, 373.864874, 375.825913, 376.324092, 378.436680, 379.872975, 381.484469,
+  383.443529, 384.956117, 385.861301, 387.222890, 388.846128, 391.456084, 392.245083, 393.427744, 395.582870, 396.381854,
+];
+// psi = 0 sits on column C0 and psi = Reach on column C0 + CW. The critical
+// line runs down columns ZC..ZC + 2, gamma 0 to GTOP over the 128 rows.
+const C0 = 3, CW = 54, ZC = 61, GTOP = 400;
+// Zeros come in at dz/dt = ZB (ZA + z) a second at Speed 2: the first after
+// 0.7 s, 10 by 4.2 s, 100 by 10.9 s, all 200 by 13.1 s. Then they hold for
+// HOLD seconds, go out BACK times as fast and the bare line rests REST.
+const ZA = 4, ZB = 0.3, HOLD = 4, BACK = 7, REST = 1;
+// Opening hue: azure.
+const H0 = 0.56;
+const LOG2PI = Math.log(2 * Math.PI);
+const { floor, min, max, abs, sqrt, log, exp, sin, cos, round, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+
+// 3 x 5 digits, row by row from the top, three bits a row.
+const FONT = [
+  0b111101101101111, 0b010110010010111, 0b111001111100111, 0b111001111001111, 0b101101111001001,
+  0b111100111001111, 0b111100111101111, 0b111001001001001, 0b111101111101111, 0b111101111001111,
+];
+
+function hsv(h, s, v, out) {
+  h = (h - floor(h)) * 6;
+  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
+  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];
+  out[0] = rgb[0];
+  out[1] = rgb[1];
+  out[2] = rgb[2];
+}
+
+// The prime powers p^k up to X, each with log p and k.
+function primePowers(X) {
+  const out = [];
+  for (let n = 2; n <= X; n++) {
+    let p = 2;
+    while (n % p) p++;
+    let m = n, k = 0;
+    while (m % p === 0) (m /= p), k++;
+    if (m === 1) out.push([n, log(p), k]);
+  }
+  return out;
+}
+
+export function setup(params) {
+  params.s = {
+    hue: 0, speed: 2, reach: 0, tilt: 0, z: 0, stage: 0, clock: 0, nIn: 0,
+    xs: new Float64Array(NS), band: new Uint8Array(NS), base: new Float64Array(NS), tru: new Float64Array(NS), A: new Float64Array(NS),
+    v: new Float64Array(NS), lit: new Float32Array(64), err: new Float64Array(64), cnt: new Float64Array(64), bx: new Float64Array(64), cN: new Float32Array(SS), cT: new Float32Array(SS), pp: [],
+    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),
+    fill0: [0, 0, 0], fill1: [0, 0, 0], bg: [0, 0, 0], rim: [0, 0, 0], dot: [0, 0, 0], over: [0, 0, 0], short: [0, 0, 0],
+  };
+}
+
+// The pair rho, its conjugate at sample j: 2 Re(x^rho / rho)
+// = 2 sqrt(x) (cos(g L) / 2 + g sin(g L)) / (1/4 + g^2), L = log x.
+function term(S, n, j) {
+  const g = GAM[n], x = S.xs[j], L = log(x);
+  return (2 * sqrt(x) * (0.5 * cos(g * L) + g * sin(g * L))) / (0.25 + g * g);
+}
+
+// Zero n fully in (sign 1) or taken out (sign -1).
+function addZero(S, n, sign) {
+  for (let j = 0; j < NS; j++) S.A[j] += sign * term(S, n, j);
+}
+
+function setReach(S, X) {
+  S.reach = X;
+  S.pp = primePowers(X);
+  for (let j = 0; j < NS; j++) {
+    // Row y holds x from 1 + y (X - 1) / 128 to one row further on.
+    const x = 1 + ((j + 0.5) / NS) * (X - 1);
+    S.xs[j] = x;
+    S.base[j] = x - LOG2PI - 0.5 * log(1 - 1 / (x * x));
+    let p = 0, c = 0;
+    for (const q of S.pp) if (q[0] <= x) (p += q[1]), c++;
+    S.tru[j] = p;
+    S.band[j] = c;
+  }
+  S.A.fill(0);
+  S.lit.fill(0);
+  for (let n = 0; n < S.nIn; n++) addZero(S, n, 1);
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [0, 2, 24, 0.06], d = cl(dt || 0, 0, 0.1);
+  S.hue = k[0];
+  S.speed = cl(k[1], 0.2, 3);
+  // Up to 0.06 upright as it is, so the opening shows the staircase itself.
+  S.tilt = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;
+  const X = round(cl(k[2], 24, 144));
+  if (X !== S.reach) setReach(S, X);
+  if (input.btnPressed && input.btnPressed[0]) {
+    S.stage = 0;
+    S.z = 0;
+  }
+  const sp = (d * S.speed) / 2;
+  if (S.stage === 0) {
+    S.z += sp * ZB * (ZA + S.z);
+    if (S.z >= NZ) (S.z = NZ), (S.stage = 1), (S.clock = 0);
+  } else if (S.stage === 1) {
+    S.clock += sp;
+    if (S.clock > HOLD) S.stage = 2;
+  } else if (S.stage === 2) {
+    S.z -= sp * ZB * BACK * (ZA + S.z);
+    if (S.z <= 0) (S.z = 0), (S.stage = 3), (S.clock = 0);
+  } else {
+    S.clock += sp;
+    if (S.clock > REST) S.stage = 0;
+  }
+  const n = min(NZ, floor(S.z));
+  while (S.nIn < n) addZero(S, S.nIn++, 1);
+  while (S.nIn > n) addZero(S, --S.nIn, -1);
+  // The sum at every sample, the fading zero in by its fraction.
+  const { v, xs, base, tru, A, err, cnt, bx, band, lit } = S, f = n < NZ ? S.z - n : 0;
+  for (let j = 0; j < NS; j++) v[j] = base[j] - A[j] - (f > 0 ? f * term(S, n, j) : 0);
+  // A band has snapped onto its step when the sum's mean distance from the
+  // staircase across it is under 0.04 sqrt(x); it starts to light at 0.12.
+  const nb = S.pp.length + 1;
+  err.fill(0, 0, nb);
+  cnt.fill(0, 0, nb);
+  bx.fill(0, 0, nb);
+  for (let j = 0; j < NS; j++) {
+    const q = band[j];
+    err[q] += abs(v[j] - tru[j]);
+    bx[q] += xs[j];
+    cnt[q]++;
+  }
+  const ease = 1 - exp(-d / 0.3);
+  for (let q = 0; q < nb; q++) {
+    const r = cnt[q] ? err[q] / cnt[q] / sqrt(bx[q] / cnt[q]) : 1, u = cl((0.12 - r) / 0.08, 0, 1);
+    lit[q] += (u * u * (3 - 2 * u) - lit[q]) * ease;
+  }
+}
+
+// A colour that would read brown or olive, a dark orange or yellow, is
+// paled toward grey and lifted.
+function tone(h, s, v, out) {
+  const hh = h - floor(h), warm = cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1) * (1 - v);
+  hsv(h, s * (1 - 0.9 * warm), v * (1 + 1.1 * warm), out);
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S) return;
+  const { R, G, B, v, xs, tru, cN, cT, fill0, fill1, bg, rim, dot, over, short } = S;
+  const X = S.reach, n = S.nIn, f = n < NZ ? S.z - n : 0, t = S.tilt;
+  // Columns: psi - t x, so at Tilt 1 only what the zeros add is left, the
+  // scale closing in from the whole of psi to about 2.2 sqrt(Reach).
+  const sc = CW / ((1 - t) * X + t * 2.2 * sqrt(X)), c0 = C0 + 35 * t;
+
+  // Orange and yellow fill dims less, so its shaded bands never read brown.
+  const h = S.hue + H0, hh = h - floor(h), keep = 1 - 0.7 * cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1);
+  tone(h, 0.8, 0.6, fill0);
+  tone(h + 0.05, 0.75, 1, fill1);
+  hsv(0.64, 0.45, 0.15, bg);
+  tone(h + 0.25, 0.65, 0.8, short);
+  hsv(h - 0.03, 0.2, 1, rim);
+  hsv(h, 0.35, 1, dot);
+  over[0] = 1;
+  over[1] = 0.8;
+  over[2] = 0.45;
+  // The newest zero's wave, faintly in the fill while it comes in.
+  const wave = n < NZ ? 0.1 * sin(PI * f) * sqrt(GAM[0] / GAM[n]) : 0, gw = n < NZ ? GAM[n] : 0;
+
+  let prevC = c0 + (v[0] - t * xs[0]) * sc;
+  for (let y = 0; y < H; y++) {
+    const u = y / (H - 1);
+    const fr = fill0[0] + (fill1[0] - fill0[0]) * u, fg = fill0[1] + (fill1[1] - fill0[1]) * u, fb = fill0[2] + (fill1[2] - fill0[2]) * u;
+    const bk = 0.8 + 0.4 * u;
+    // Where the curve runs in this row: the span between the last sample of
+    // the row above and every sample of this one.
+    let lo = prevC, hi = prevC;
+    for (let q = 0; q < SS; q++) {
+      const j = y * SS + q, cc = c0 + (v[j] - t * xs[j]) * sc;
+      cN[q] = cc;
+      cT[q] = c0 + (tru[j] - t * xs[j]) * sc;
+      if (cc < lo) lo = cc;
+      if (cc > hi) hi = cc;
+      prevC = cc;
+    }
+    // Between one prime power and the next the fill is a band, every other
+    // band a little lighter, so the gaps between them show as band heights,
+    // and a band stays dim until the sum has snapped onto its step.
+    const bq = S.band[y * SS + 2];
+    const wv = (1 + wave * sin(gw * log(xs[y * SS + 2]))) * (bq & 1 ? 1.08 : 0.92) * (0.45 + 0.55 * S.lit[bq]);
+    const edge = (cN[0] + cN[1] + cN[2] + cN[3]) / 4;
+    for (let x = 0; x < W; x++) {
+      const p = y * W + x;
+      // Under both the sum and the staircase: the fill. Under the sum alone,
+      // where it runs past the staircase: gold. Under the staircase alone,
+      // where the sum falls short: the second colour. Under neither: dark.
+      let both = 0, ov = 0, sh = 0;
+      for (let q = 0; q < SS; q++) {
+        const a = cl(cN[q] - x, 0, 1), b = cl(cT[q] - x, 0, 1), m = a < b ? a : b;
+        both += m;
+        ov += a - m;
+        sh += b - m;
+      }
+      both /= SS;
+      ov /= SS;
+      sh /= SS;
+      const no = 1 - both - ov - sh, gl = 1 - (1 - wv * (0.55 + 0.45 * exp((x - edge) / 9))) * keep;
+      let r = bg[0] * bk * no + fr * gl * both + over[0] * ov + short[0] * sh;
+      let g = bg[1] * bk * no + fg * gl * both + over[1] * ov + short[1] * sh;
+      let b = bg[2] * bk * no + fb * gl * both + over[2] * ov + short[2] * sh;
+      // The curve itself: every LED its span touches.
+      const rr = cl(1 - max(lo - (x + 1), x - hi), 0, 1) * 0.75;
+      r += (rim[0] - r) * rr;
+      g += (rim[1] - g) * rr;
+      b += (rim[2] - b) * rr;
+      R[p] = r;
+      G[p] = g;
+      B[p] = b;
+    }
+  }
+  // Ticks down the left edge at each prime power: three LEDs for a prime,
+  // two for a square, one for a higher power.
+  for (const q of S.pp) {
+    const y = floor(((q[0] - 1) / (X - 1)) * H);
+    if (y < 0 || y >= H) continue;
+    const len = q[2] === 1 ? 3 : q[2] === 2 ? 2 : 1;
+    for (let x = 0; x < len; x++) {
+      const p = y * W + x;
+      R[p] = over[0];
+      G[p] = over[1];
+      B[p] = over[2];
+    }
+  }
+  // The critical line: every zero a dot at its height, dim until it is in.
+  for (let x = ZC; x < W; x++)
+    for (let y = 0; y < H; y++) {
+      const p = y * W + x;
+      R[p] *= 0.5;
+      G[p] *= 0.5;
+      B[p] *= 0.5;
+    }
+  for (let m = 0; m < NZ; m++) {
+    const yy = (GAM[m] / GTOP) * H - 0.5, y0 = floor(yy), fy = yy - y0;
+    const a = m < n ? 1 : m === n ? 0.15 + 0.85 * f : 0.15, flash = m === n ? 1 : m === n - 1 ? 1 - f : 0;
+    for (let x = ZC; x < W; x++)
+      for (let e = 0; e < 2; e++) {
+        const y = y0 + e, wgt = e ? fy : 1 - fy;
+        if (y < 0 || y >= H) continue;
+        const p = y * W + x;
+        R[p] += wgt * a * (dot[0] + flash);
+        G[p] += wgt * a * (dot[1] + flash);
+        B[p] += wgt * a * (dot[2] + flash);
+      }
+  }
+  // How many zeros are in, at the top right.
+  const digits = String(min(NZ, round(S.z)));
+  let x0 = ZC - 3 - (digits.length * 8 - 2);
+  for (const ch of digits) {
+    const bits = FONT[+ch];
+    for (let r = 0; r < 5; r++)
+      for (let cc = 0; cc < 3; cc++)
+        if ((bits >> (14 - r * 3 - cc)) & 1)
+          for (let a = 0; a < 4; a++) {
+            const p = (3 + r * 2 + (a >> 1)) * W + x0 + cc * 2 + (a & 1);
+            R[p] = dot[0];
+            G[p] = dot[1];
+            B[p] = dot[2];
+          }
+    x0 += 8;
+  }
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const p = y * W + x;
+      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));
+    }
+}
diff --git a/incoming/pattern-study/patterns/soap-film.js b/incoming/pattern-study/patterns/soap-film.js
new file mode 100644
index 000000000..065790d4f
--- /dev/null
+++ b/incoming/pattern-study/patterns/soap-film.js
@@ -0,0 +1,328 @@
+// ===== Patternflow pattern =====
+// Title:   Soap Film
+// Family:  cosmetic
+// Idea:    A soap film fills the panel and drains, thinner toward the top, so Newton's interference colours stack in bands that sink while slow eddies wind them into spirals, thin film pulled from the sides rises in plumes and the black film spreads down from the top, until the film bursts and a new one is drawn up from the bottom.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 39, after the film of a foaming cleanser stretched across a ring, coloured by thin-film interference in Newton's colour series (Isaac Newton, Opticks, 1704) and thinning from the top as it drains
+// Round:   39
+// ===============================
+// @matrix 64x128
+// @knobs Hue=0..1, Speed=0.2..3, Light=0..1, Swirl=0..1
+//
+// Knob 1: Hue. Turns every colour of the film round the grey axis together; the black film stays grey. At 0 Newton's own colours: a gold and cream band of the first order under the black film, then indigo, blue, yellow, orange and magenta, then pastel greens and pinks lower down. At 0.25 the first-order band is green, at 0.5 sky blue, at 0.75 magenta, the rest following. Orange, yellow and lime that come out dark are lifted most of the way to full and paled a little, so they read amber, gold or lime and never brown or olive, and no colour of the film falls below a fifth.
+// Knob 2: Speed. At 2 the film opens 2 s into its drainage; the black film appears at the top within a second and comes down 7.7 LEDs a second, past the middle by 9 s, while the bottom thins from 950 nm when drawn to 550 six seconds later. When the black film is 68% of the way down, 11.8 s in, the film bursts: a hole opens near the top and its rim runs across the panel in 0.9 s throwing spray, the panel stays dark 0.4 s and a new film is drawn up from the bottom in 1.2 s, 15 s round after the first. At 0.2 all of it ten times slower, at 3 one and a half times faster.
+// Knob 3: Light. The wall behind the film, black at 0, so the black film reads black. Turned up, a white wall shows through wherever the film reflects little: the black film and the hole of a burst go grey and then white, and the colours pale toward pastel; at 1 a pearly white sheet with pastel bands.
+// Knob 4: Swirl. How hard the eddies spin. One starts every 1.1 to 2.1 s somewhere in the film, 9 to 17 LEDs across its core, and spins up and down over 4 to 8 s; the film keeps the twist and drainage sorts it back into layers over about 8 s. At 0 an eddy winds the bands most of a turn at its core, at the start about one turn, at 1 two and a half, curling the gold edge of the black film into spirals.
+// Buttons: K1 tap bursts the film now, and a new one is drawn up after it.
+
+const W = 64, H = 128, N = W * H;
+// Film index, and the thickness table in nm.
+const NF = 1.33, HMAX = 1400;
+// Thinner than this the film is black film, nm.
+const BLACK = 30;
+// Seconds of drainage at Speed 2 before the first frame.
+const AGE0 = 2;
+// Gain and gamma of the table.
+const GAIN = 0.95, GAM = 0.8;
+const { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+const sm = (a, b, v) => {
+  const t = cl((v - a) / (b - a), 0, 1);
+  return t * t * (3 - 2 * t);
+};
+
+// CIE 1931 colour matching, the piecewise Gaussian fit of Wyman, Sloan and
+// Shirley (2013).
+const g1 = (l, m, a, b) => {
+  const t = (l - m) / (l < m ? a : b);
+  return exp(-0.5 * t * t);
+};
+const cmf = (l) => [
+  1.056 * g1(l, 599.8, 37.9, 31) + 0.362 * g1(l, 442, 16, 26.7) - 0.065 * g1(l, 501.1, 20.4, 26.2),
+  0.821 * g1(l, 568.8, 46.9, 40.5) + 0.286 * g1(l, 530.9, 16.3, 31.1),
+  1.217 * g1(l, 437, 11.8, 36) + 0.681 * g1(l, 459, 26, 13.8),
+];
+const toRGB = (X, Y, Z) => [3.2406 * X - 1.5372 * Y - 0.4986 * Z, -0.9689 * X + 1.8758 * Y + 0.0415 * Z, 0.0557 * X - 0.204 * Y + 1.057 * Z];
+
+// Reflectance of a film h nm thick, two beams: the front face reflects with
+// r = (1 - n) / (1 + n) and the back with -r, a half wave apart, so
+// R = 4 r^2 sin^2(2 pi n h / lambda), zero as h goes to zero. Summed over
+// 400 to 700 nm in 10 nm steps against an equal-energy light and divided by
+// the full white, so a film reflecting every wavelength fully is 1, 1, 1.
+function baseTable() {
+  const L = [], C = [];
+  for (let l = 400; l <= 700; l += 10) L.push(l), C.push(cmf(l));
+  let wx = 0, wy = 0, wz = 0;
+  for (const c of C) (wx += c[0]), (wy += c[1]), (wz += c[2]);
+  const wr = toRGB(wx, wy, wz);
+  const T = new Float32Array(HMAX * 3);
+  for (let h = 0; h < HMAX; h++) {
+    let X = 0, Y = 0, Z = 0;
+    for (let i = 0; i < L.length; i++) {
+      const s = sin((2 * PI * NF * h) / L[i]), R = s * s;
+      X += R * C[i][0];
+      Y += R * C[i][1];
+      Z += R * C[i][2];
+    }
+    const c = toRGB(X, Y, Z);
+    for (let k = 0; k < 3; k++) T[h * 3 + k] = max(0, c[k] / wr[k]);
+  }
+  return T;
+}
+
+function hsvOf(r, g, b) {
+  const mx = max(r, g, b), mn = min(r, g, b), d = mx - mn;
+  let h = 0;
+  if (d > 1e-6) h = mx === r ? ((g - b) / d + 6) % 6 : mx === g ? (b - r) / d + 2 : (r - g) / d + 4;
+  return [h / 6, mx > 0 ? d / mx : 0, mx];
+}
+function hsv(h, s, v, out, o) {
+  h = (h - floor(h)) * 6;
+  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
+  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];
+  out[o] = rgb[0];
+  out[o + 1] = rgb[1];
+  out[o + 2] = rgb[2];
+}
+
+// The table as the panel shows it: turned round the grey axis by the hue,
+// a light gamma, and paled toward a white wall behind as Light turns up.
+function displayTable(S) {
+  const B = S.base, D = S.lut, a = 2 * PI * S.hue, ca = cos(a), sa = sin(a), k = (1 - ca) / 3, q = sa / sqrt(3);
+  const m = [ca + k, k - q, k + q, k + q, ca + k, k - q, k - q, k + q, ca + k];
+  const lw = S.light, tmp = [0, 0, 0];
+  for (let h = 0; h < HMAX; h++) {
+    const r = B[h * 3], g = B[h * 3 + 1], b = B[h * 3 + 2];
+    const Y = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    let R, G, Bb;
+    if (h < BLACK) {
+      // Black film keeps its cool grey whatever the hue.
+      const v = (GAIN * Y) ** GAM;
+      (R = 0.85 * v), (G = 0.93 * v), (Bb = 1.1 * v);
+    } else {
+      R = min(1, max(0, m[0] * r + m[1] * g + m[2] * b) * GAIN) ** GAM;
+      G = min(1, max(0, m[3] * r + m[4] * g + m[5] * b) * GAIN) ** GAM;
+      Bb = min(1, max(0, m[6] * r + m[7] * g + m[8] * b) * GAIN) ** GAM;
+      // No colour of the film itself falls below a fifth; and orange, yellow
+      // and lime that come out dark, which read brown or olive, are lifted
+      // most of the way to full and paled a little.
+      const [hh, ss, vv] = hsvOf(R, G, Bb), warm = cl(1.4 - abs(hh - 0.15) / 0.12, 0, 1) * sm(0.97, 0.6, vv);
+      const v2 = 0.2 + 0.8 * vv;
+      hsv(hh, ss * (1 - 0.3 * warm), v2 + (0.95 - v2) * warm, tmp, 0);
+      (R = tmp[0]), (G = tmp[1]), (Bb = tmp[2]);
+    }
+    // A white wall behind shows through where the film reflects little.
+    const wl = lw * (0.35 + 0.65 * (1 - min(1, Y)));
+    D[h * 3] = 250 * (R + (1 - R) * wl);
+    D[h * 3 + 1] = 250 * (G + (1 - G) * wl);
+    D[h * 3 + 2] = 250 * (Bb + (1 - Bb) * wl);
+  }
+}
+
+const hash = (n) => {
+  const s = sin(n * 12.9898) * 43758.5453;
+  return s - floor(s);
+};
+
+// Smooth value noise on a 64 x 64 lattice that wraps.
+function noise(L, x, y) {
+  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;
+  const ux = fx * fx * (3 - 2 * fx), uy = fy * fy * (3 - 2 * fy);
+  const x0 = xi & 63, y0 = yi & 63, x1 = (x0 + 1) & 63, y1 = (y0 + 1) & 63;
+  const a = L[y0 * 64 + x0], b = L[y0 * 64 + x1], c = L[y1 * 64 + x0], d = L[y1 * 64 + x1];
+  return a + (b - a) * ux + (c - a + (d - c - b + a) * ux) * uy;
+}
+
+export function setup(params) {
+  const L = new Float32Array(64 * 64);
+  for (let i = 0; i < L.length; i++) L[i] = random() * 2 - 1;
+  params.s = {
+    hue: -1, light: -1, speed: 2, swirl: 0, begun: false, t: 0, age: 0,
+    base: baseTable(), lut: new Float32Array(HMAX * 3), L,
+    MX: new Float32Array(N), MY: new Float32Array(N), T: new Float32Array(N),
+    NX: new Float32Array(N), NY: new Float32Array(N), NT: new Float32Array(N),
+    eddies: [], nextEddy: 0, nextPlume: 0, side: false, hole: null, draw: 0,
+  };
+  reset(params.s);
+}
+
+// A fresh film: every point where it was drawn, nothing thin in it yet.
+function reset(S) {
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      S.MX[y * W + x] = x;
+      S.MY[y * W + x] = y;
+    }
+  S.T.fill(0);
+  S.age = 0;
+}
+
+function spawnEddy(S) {
+  S.eddies.push({
+    x: 8 + random() * 48, y: 16 + random() * 104, R: 9 + random() * 8,
+    w: (random() < 0.5 ? -1 : 1) * (0.7 + 0.6 * random()), age: 0, life: 4 + 4 * random(),
+    vx: (random() - 0.5) * 3, vy: (random() - 0.3) * 3,
+  });
+}
+
+// Thin film pulled out of the border at the sides, which then rises.
+function spawnPlume(S, front) {
+  S.side = !S.side;
+  const x0 = S.side ? 0.5 + random() * 3 : W - 1.5 - random() * 3;
+  const y0 = H * (front + (1 - front) * (0.25 + 0.75 * random())), r = 2 + random() * 1.5, a = 0.7 + 0.3 * random();
+  for (let y = max(0, floor(y0 - 7 * r)); y <= min(H - 1, y0 + 7 * r); y++)
+    for (let x = max(0, floor(x0 - 3 * r)); x <= min(W - 1, x0 + 3 * r); x++) {
+      const d2 = ((x - x0) ** 2 + ((y - y0) * 0.4) ** 2) / (r * r), p = y * W + x;
+      S.T[p] = min(1, S.T[p] + a * exp(-d2));
+    }
+}
+
+function bilerp(A, x, y) {
+  x = cl(x, 0, W - 1.001);
+  y = cl(y, 0, H - 1.001);
+  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;
+  const a = A[p], b = A[p + 1], c = A[p + W], d = A[p + W + 1];
+  return a + (b - a) * fx + (c - a + (d - c - b + a) * fx) * fy;
+}
+
+// Where the black film reaches, 0 at the top and 1 at the bottom, for a
+// film of this age.
+const frontAt = (age) => cl((age - 2.5) * 0.06, 0, 1);
+
+function step(S, d) {
+  S.t += d;
+  S.age += d;
+  const front = frontAt(S.age);
+  // Eddies: each spins up and down over its life; the film keeps the twist.
+  if (S.t > S.nextEddy) {
+    spawnEddy(S);
+    S.nextEddy = S.t + 1.1 + random();
+  }
+  for (const e of S.eddies) {
+    e.age += d;
+    e.x += e.vx * d;
+    e.y += e.vy * d;
+  }
+  S.eddies = S.eddies.filter((e) => e.age < e.life);
+  if (S.t > S.nextPlume && !S.draw && !S.hole) {
+    spawnPlume(S, front);
+    S.nextPlume = S.t + 0.12 + 0.12 * random();
+  }
+  const { MX, MY, T, NX, NY, NT, L } = S, sw = 1.4 + 2.6 * S.swirl, t = S.t;
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const p = y * W + x;
+      // Fine turbulence everywhere, two noise fields as the flow.
+      const n1 = noise(L, x * 0.21 + t * 0.4, y * 0.21 - t * 0.3), n2 = noise(L, x * 0.21 + 17.3 - t * 0.35, y * 0.21 + 9.1 + t * 0.25);
+      let vx = 2.2 * n1, vy = 2.2 * n2;
+      for (const e of S.eddies) {
+        const dx = x - e.x, dy = y - e.y, r2 = dx * dx + dy * dy, R2 = e.R * e.R;
+        if (r2 > 6 * R2) continue;
+        const env = sin((PI * e.age) / e.life), om = sw * e.w * env * exp(-r2 / R2);
+        vx -= om * dy;
+        vy += om * dx;
+      }
+      const qx = x - vx * d, qy = y - vy * d;
+      NX[p] = bilerp(MX, qx, qy);
+      NY[p] = bilerp(MY, qx, qy);
+      // Thin film from the border is lighter and rises through the rest.
+      NT[p] = bilerp(T, qx, qy + 15 * T[p] * d) * (1 - 0.1 * d);
+    }
+  // Drainage sorts the film back into layers: every point eases toward where
+  // it is, over about 8 s.
+  const rx = 1 - exp(-d / 8);
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const p = y * W + x;
+      MX[p] = NX[p] + (x - NX[p]) * rx;
+      MY[p] = NY[p] + (y - NY[p]) * rx;
+      T[p] = NT[p];
+    }
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);
+  S.speed = cl(k[1], 0.2, 3);
+  S.swirl = cl(k[3], 0, 1);
+  const hue = k[0] - floor(k[0]), light = cl(k[2], 0, 1);
+  if (abs(hue - S.hue) > 1e-3 || abs(light - S.light) > 1e-3) {
+    S.hue = hue;
+    S.light = light;
+    displayTable(S);
+  }
+  if (!S.begun) {
+    S.begun = true;
+    for (let i = 0; i < AGE0 * 10; i++) step(S, 0.1);
+  }
+  if (input.btnPressed && input.btnPressed[0] && !S.hole) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };
+  const sd = (d * S.speed) / 2;
+  if (!S.hole && frontAt(S.age) > 0.68) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };
+  if (S.hole) {
+    const o = S.hole;
+    if (o.r < 160) o.r += 180 * sd;
+    else {
+      o.gap += sd;
+      if (o.gap > 0.4) {
+        reset(S);
+        S.hole = null;
+        S.draw = 1;
+      }
+    }
+  }
+  if (S.draw > 0) S.draw = max(0, S.draw - sd / 1.2);
+  step(S, sd);
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S) return;
+  const { MX, MY, T, L, lut } = S, age = S.age, t = S.t;
+  const front = frontAt(age);
+  // Thickness at the bottom and just under the black film, nm.
+  const hb = 950 / sqrt(1 + age / 3), ht = 90 + 260 * exp(-age / 1.2);
+  const o = S.hole, dy = S.draw > 0 ? H * S.draw : -1, bgv = 255 * S.light;
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const p = y * W + x;
+      if (o && (x - o.x) ** 2 + (y - o.y) ** 2 < o.r * o.r) {
+        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));
+        continue;
+      }
+      if (y < dy) {
+        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));
+        continue;
+      }
+      // Where this bit of film sat when the film was layered, and how much
+      // thin film from the border it carries.
+      const mx = MX[p], my = MY[p];
+      let u = my / (H - 1) - 0.2 * T[p];
+      if (dy >= 0) u = (u - S.draw) / (1 - S.draw);
+      const edge = front - 0.02 + 0.025 * noise(L, mx * 0.09 + 31, t * 0.15), e0 = max(0, edge);
+      let h;
+      if (u < edge) {
+        // Black film, 1 to 21 nm, reflecting next to nothing.
+        h = 11 + 6 * noise(L, mx * 0.45 + 5, my * 0.45) + 4 * noise(L, mx * 1.2 + 23, my * 1.2 - t * 0.3);
+      } else {
+        const s = cl((u - e0) / (1 - e0), 0, 1);
+        h = ht + (hb - ht) * s ** 0.8;
+        h += 16 * noise(L, mx * 0.75 + 40, my * 0.75) + 6 * noise(L, x * 0.55 + t * 0.6, y * 0.55);
+      }
+      h = cl(h, 0, HMAX - 2);
+      const hi = floor(h), f = h - hi, a = hi * 3;
+      let r = lut[a] + (lut[a + 3] - lut[a]) * f, g = lut[a + 1] + (lut[a + 4] - lut[a + 1]) * f, b = lut[a + 2] + (lut[a + 5] - lut[a + 2]) * f;
+      if (o) {
+        // The rim the burst gathers, running out ahead of the hole, and the
+        // spray it throws.
+        const dr = Math.hypot(x - o.x, y - o.y) - o.r;
+        let rim = dr < 4 ? exp(-dr * 0.7) : 0;
+        if (dr < 9 && hash(x * 7 + y * 131 + floor(o.r) * 17) > 0.9) rim = max(rim, 1 - dr / 9);
+        r += (250 - r) * rim;
+        g += (250 - g) * rim;
+        b += (255 - b) * rim;
+      }
+      display.setPixel(x, y, round(cl(r, 0, 255)), round(cl(g, 0, 255)), round(cl(b, 0, 255)));
+    }
+}

From 8dc0c935f2a5a470aa3d0194953cdc8462da49ec Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 24 Oct 2026 22:39:26 +0000
Subject: [PATCH 05/10] =?UTF-8?q?incoming:=20Isospectral=20Drums,=20Crackl?=
 =?UTF-8?q?e=20Polish=20=ED=8C=A8=ED=84=B4=20(39=ED=8C=90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WSruBmW95rasfF2WmM8DZ7
---
 .../pattern-study/patterns/crackle-polish.js  | 363 ++++++++++++++++++
 .../patterns/isospectral-drums.js             | 348 +++++++++++++++++
 2 files changed, 711 insertions(+)
 create mode 100644 incoming/pattern-study/patterns/crackle-polish.js
 create mode 100644 incoming/pattern-study/patterns/isospectral-drums.js

diff --git a/incoming/pattern-study/patterns/crackle-polish.js b/incoming/pattern-study/patterns/crackle-polish.js
new file mode 100644
index 000000000..9d989f047
--- /dev/null
+++ b/incoming/pattern-study/patterns/crackle-polish.js
@@ -0,0 +1,363 @@
+// ===== Patternflow pattern =====
+// Title:   Crackle Polish
+// Family:  cosmetic
+// Idea:    A glossy colour fills the panel, a dark top coat is brushed over it from the top down, and as the coat dries it splits, first in long cracks across the panel and then in shorter and shorter cracks that each start on an older one at a right angle, while the gaps widen and the islands of coat shrink into rounded beads with a gloss on their edges and the colour glowing up through the network, until a fresh coat goes on.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 39, after crackle nail polish, a top coat that shrinks as it dries, and the hierarchical crack patterns that form by successive division of domains (Steffen Bohn, Ludovic Pauchard and Yves Couder, 2005)
+// Round:   39
+// ===============================
+// @matrix 64x128
+// @knobs Hue=0..1, Speed=0.2..3, Craze=0..1, Coat=0..1
+//
+// Knob 1: Hue. Turns the base colour round the whole wheel: at 0 hot pink, 0.1 red, 0.15 orange, 0.22 yellow, 0.3 lime, 0.4 green, 0.55 aqua, 0.65 azure, 0.75 blue, 0.85 violet, 0.95 magenta. Orange and yellow bases are paled a little, lit to full and shaded less beside the islands, so no gap turns brown.
+// Knob 2: Speed. At 2 the coat goes on in 1.2 s, the first crack opens 0.6 s later and runs across the panel in about a second, the last starts about 4.5 s after the first, and when the gaps have finished widening the crackle holds until a new coat goes on, about 11 s after the last. At 0.2 all of it ten times slower, at 3 one and a half times faster.
+// Knob 3: Craze. How far the coat keeps splitting. At 0 a domain stops splitting once it is under about 20 LEDs long, which leaves about 50 islands, most of them 9 to 18 LEDs across; at 1 under about 11, about 155 islands of 5 to 10, and the gaps open half as wide.
+// Knob 4: Coat. The colour of the top coat: black lacquer at 0, a deep jewel tone opposite the base on the wheel at 0.5, a pale pearl at 1. On the dark coats the gloss is a white rim on the edges facing the light; on the pearl the edges turned away fall into a cool grey-lilac shade, as a pearl pigment shifts with the angle.
+// Buttons: K1 tap brushes a fresh coat on now.
+
+const W = 64, H = 128, N = W * H;
+const { floor, min, max, abs, sqrt, exp, sin, cos, log, round, random, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+const sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));
+// The cycle, in seconds at Speed 2: the brush crosses the panel in LAY, the
+// first crack opens at T1 and the last near T2, and a new coat comes HOLD
+// after the last. The run opens at START, with the first crack running.
+const LAY = 1.2, T1 = 1.8, T2 = 6, HOLD = 5, START = 2.4;
+// Crack tips run at VTIP LEDs a second; a gap opens with time constant TAU.
+const VTIP = 70, TAU = 1.3;
+// Towards the light, x right and y down: up and to the left.
+const LX = -0.6, LY = -0.8;
+// Opening hue: hot pink.
+const H0 = 0.93;
+
+function hsv(h, s, v, out) {
+  h = (h - floor(h)) * 6;
+  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
+  out[0] = [v, q, p, p, t, v][i];
+  out[1] = [t, v, v, q, p, p][i];
+  out[2] = [p, p, t, v, v, q][i];
+}
+
+// The domains are worked out on a grid of half-LED cells: each cell holds
+// the domain it belongs to, or -1 on a crack.
+const FW = 2 * W, FH = 2 * H;
+// A crack tip moves STEP LEDs at a time, and within BEND LEDs of an older
+// crack it turns to meet it square.
+const STEP = 0.25, BEND = 3;
+// Gap pixels are listed out to REACH LEDs from a crack's line.
+const REACH = 7;
+
+// The whole crackle of one coat, worked out when it goes on. The panel is
+// one domain. A domain splits across its long axis: a crack starts on its
+// rim, square to the older crack it leaves, runs across, and turns to meet
+// the crack on the far side square. Each half splits the same way until it
+// is too short; bigger domains crack sooner.
+function crackle(craze) {
+  const stop = 20 - 9 * craze, span = log((W * H) / (0.45 * stop * stop));
+  const lab = new Int32Array(FW * FH), cracks = [];
+  const wall = (x, y) => {
+    const i = floor(2 * x), j = floor(2 * y);
+    return i < 0 || j < 0 || i >= FW || j >= FH || lab[j * FW + i] < 0;
+  };
+  let ids = 1;
+  const todo = [{ id: 0, b: [0, 0, FW - 1, FH - 1], ready: 0 }];
+  while (todo.length) {
+    const d = todo.pop(), [i0, j0, i1, j1] = d.b;
+    let n = 0, sx = 0, sy = 0, sxx = 0, syy = 0, sxy = 0;
+    const nb = [FW, FH, 0, 0];
+    for (let j = j0; j <= j1; j++)
+      for (let i = i0; i <= i1; i++)
+        if (lab[j * FW + i] === d.id) {
+          const x = (i + 0.5) / 2, y = (j + 0.5) / 2;
+          n++;
+          sx += x;
+          sy += y;
+          sxx += x * x;
+          syy += y * y;
+          sxy += x * y;
+          nb[0] = min(nb[0], i);
+          nb[1] = min(nb[1], j);
+          nb[2] = max(nb[2], i);
+          nb[3] = max(nb[3], j);
+        }
+    if (n < 8) continue;
+    const mx = sx / n, my = sy / n, vxx = sxx / n - mx * mx, vyy = syy / n - my * my, vxy = sxy / n - mx * my;
+    const ang = 0.5 * Math.atan2(2 * vxy, vxx - vyy);
+    // A bar of length L has variance L^2 / 12 along its axis.
+    const long = sqrt(12 * (vxx * cos(ang) ** 2 + 2 * vxy * cos(ang) * sin(ang) + vyy * sin(ang) ** 2));
+    // The cut is turned up to 20 degrees off square; its ends bend square anyway.
+    const tu = ang + (random() - 0.5) * 0.7, ux = cos(tu), uy = sin(tu);
+    if (long < stop * (0.85 + 0.3 * random())) continue;
+    // Where the cut line, across the long axis near the middle, meets the rim.
+    const off = (random() - 0.5) * 0.36 * long, cx = mx + ux * off, cy = my + uy * off;
+    if (wall(cx, cy)) continue;
+    const ends = [-1, 1].map((sg) => {
+      let x = cx, y = cy;
+      while (!wall(x - sg * uy * STEP, y + sg * ux * STEP)) {
+        x -= sg * uy * STEP;
+        y += sg * ux * STEP;
+      }
+      return [x, y, sg];
+    });
+    const [sx0, sy0, sg] = ends[random() < 0.5 ? 0 : 1];
+    // Heading: across, toward the other end; it starts square off its rim.
+    const hx = sg * uy, hy = -sg * ux;
+    let x = sx0, y = sy0, dx = hx, dy = hy, run = 0, ok = false;
+    const pts = [[x, y]], cells = [];
+    for (let k = 0; k < (4 * long) / STEP; k++) {
+      // The nearest older crack (or the panel's edge) within BEND, and the
+      // way square off it, from all its cells nearby.
+      let best = BEND * BEND, gx = 0, gy = 0;
+      const ci = floor(2 * x), cj = floor(2 * y), r = 2 * BEND;
+      for (let j = cj - r; j <= cj + r; j++)
+        for (let i = ci - r; i <= ci + r; i++) {
+          if (i >= 0 && j >= 0 && i < FW && j < FH && lab[j * FW + i] >= 0) continue;
+          const ex = x - (cl(i, -1, FW) + 0.5) / 2, ey = y - (cl(j, -1, FH) + 0.5) / 2, e2 = ex * ex + ey * ey;
+          best = min(best, e2);
+          if (e2 < 4) {
+            const wt = exp(-e2);
+            gx += ex * wt;
+            gy += ey * wt;
+          }
+        }
+      const dist = sqrt(best), gl = sqrt(gx * gx + gy * gy);
+      let calm = 1;
+      if (best < BEND * BEND && gl > 0) {
+        gx /= gl;
+        gy /= gl;
+        // Leaving its own rim: square off it. Coming up on another: turn square into it.
+        const into = run < 1.2 ? -0.5 : dx * gx + dy * gy < 0 ? 0.6 * (1 - dist / BEND) : 0;
+        if (into) {
+          dx -= into * gx;
+          dy -= into * gy;
+          calm = dist / BEND;
+        }
+      }
+      const tw = (random() - 0.5) * 0.22 * calm;
+      dx += 0.05 * hx * calm - tw * dy;
+      dy += 0.05 * hy * calm + tw * dx;
+      const dl = sqrt(dx * dx + dy * dy);
+      dx /= dl;
+      dy /= dl;
+      x += dx * STEP;
+      y += dy * STEP;
+      run += STEP;
+      const ci2 = floor(2 * x), cj2 = floor(2 * y), last = cells[cells.length - 1];
+      // Cells of the crack, joined edge to edge so nothing leaks past it.
+      if (last && last[0] !== ci2 && last[1] !== cj2) cells.push([ci2, last[1]]);
+      if (!last || last[0] !== ci2 || last[1] !== cj2) cells.push([ci2, cj2]);
+      if (wall(x, y)) {
+        pts.push([x, y]);
+        ok = run > 2;
+        break;
+      }
+      if (k % 4 === 3) pts.push([x, y]);
+    }
+    if (!ok) continue;
+    for (const [i, j] of cells) if (i >= 0 && j >= 0 && i < FW && j < FH && lab[j * FW + i] === d.id) lab[j * FW + i] = -1;
+    // Fill one side with a new domain.
+    const m = pts[pts.length >> 1], q = pts[(pts.length >> 1) + 1] || pts[pts.length - 1];
+    const tx = q[0] - m[0], ty = q[1] - m[1], tl = Math.hypot(tx, ty) || 1;
+    const si = floor(2 * (m[0] - (ty / tl) * 0.8)), sj = floor(2 * (m[1] + (tx / tl) * 0.8));
+    if (si < 0 || sj < 0 || si >= FW || sj >= FH || lab[sj * FW + si] !== d.id) continue;
+    const nid = ids++, stack = [sj * FW + si];
+    lab[sj * FW + si] = nid;
+    while (stack.length) {
+      const c = stack.pop(), i = c % FW, j = (c - i) / FW;
+      for (const e of [i > 0 ? c - 1 : -1, i < FW - 1 ? c + 1 : -1, j > 0 ? c - FW : -1, j < FH - 1 ? c + FW : -1])
+        if (e >= 0 && lab[e] === d.id) {
+          lab[e] = nid;
+          stack.push(e);
+        }
+    }
+    let len = 0;
+    for (let k = 1; k < pts.length; k++) len += Math.hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);
+    const age = cl(log((W * H) / (n / 4)) / span, 0, 1), t = max(d.ready + 0.06, T1 + (T2 - T1) * age);
+    // Final half-width: the first cracks open widest.
+    cracks.push({ pts, len, t, w: 1.5 - 0.85 * age });
+    const ready = t + len / VTIP;
+    todo.push({ id: d.id, b: nb, ready }, { id: nid, b: nb, ready });
+  }
+  return gapLists(cracks);
+}
+
+// For each crack, every pixel within REACH of its line: how far from it,
+// and how far along the crack the nearest point lies.
+function gapLists(cracks) {
+  const dist = new Float32Array(N), along = new Float32Array(N), seen = new Int32Array(N).fill(-1);
+  cracks.forEach((c, ci) => {
+    const idx = [];
+    let u0 = 0;
+    for (let k = 1; k < c.pts.length; k++) {
+      const [ax, ay] = c.pts[k - 1], [bx, by] = c.pts[k], ex = bx - ax, ey = by - ay, el = sqrt(ex * ex + ey * ey) || 1e-6;
+      for (let y = max(0, floor(min(ay, by) - REACH)); y <= min(H - 1, floor(max(ay, by) + REACH)); y++)
+        for (let x = max(0, floor(min(ax, bx) - REACH)); x <= min(W - 1, floor(max(ax, bx) + REACH)); x++) {
+          const px = x + 0.5 - ax, py = y + 0.5 - ay, f = cl((px * ex + py * ey) / (el * el), 0, 1);
+          const qx = px - f * ex, qy = py - f * ey, dd = sqrt(qx * qx + qy * qy), p = y * W + x;
+          if (dd > REACH) continue;
+          if (seen[p] !== ci) {
+            seen[p] = ci;
+            idx.push(p);
+            dist[p] = 1e9;
+          }
+          if (dd < dist[p]) {
+            dist[p] = dd;
+            along[p] = u0 + f * el;
+          }
+        }
+      u0 += el;
+    }
+    c.idx = Int32Array.from(idx);
+    c.d = Float32Array.from(idx, (p) => dist[p]);
+    c.u = Float32Array.from(idx, (p) => along[p]);
+    c.pts = null;
+  });
+  return cracks;
+}
+
+export function setup(params) {
+  params.s = {
+    hue: 0, speed: 2, craze: 0, coat: 0.06, begun: false, t: START, end: 0, cracks: [], old: null, brush: new Float32Array(W),
+    G: new Float32Array(N),
+    base: [0, 0, 0], ink: [0, 0, 0], a: [0, 0, 0], b: [0, 0, 0], cool: [0, 0, 0],
+  };
+}
+
+function newCoat(S, t0) {
+  S.old = S.cracks;
+  // The brush's bristles: a mark per column, softened.
+  let m = random();
+  for (let x = 0; x < W; x++) S.brush[x] = 0.07 * (m = 0.55 * m + 0.45 * random());
+  S.cracks = crackle(S.craze);
+  let last = 0;
+  for (const c of S.cracks) last = max(last, c.t);
+  S.end = last + HOLD;
+  S.t = t0;
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];
+  S.hue = k[0];
+  S.speed = cl(k[1], 0.2, 3);
+  S.craze = cl(k[2], 0, 1);
+  S.coat = cl(k[3], 0, 1);
+  if (!S.begun) {
+    newCoat(S, START);
+    S.old = null;
+    S.begun = true;
+  }
+  S.t += (cl(dt || 0, 0, 0.1) * S.speed) / 2;
+  if (S.t > S.end || (input.btnPressed && input.btnPressed[0])) newCoat(S, 0);
+}
+
+// Polynomial smooth minimum: where two gaps come within k of each other
+// they merge in a fillet, which rounds the island's corner between them.
+function smin(a, b, k) {
+  const h = max(k - abs(a - b), 0) / k;
+  return min(a, b) - h * h * k * 0.25;
+}
+
+// G: signed distance to the open gaps, in LEDs, positive on the coat. Each
+// crack is a gap round its line as far as its tip, its half-width growing
+// from a hairline as it opens, and the corners it makes with older cracks
+// rounding as the coat dries.
+function field(S, list, t) {
+  const G = S.G;
+  G.fill(9);
+  const narrow = 1 - 0.5 * S.craze;
+  for (const c of list) {
+    const age = t - c.t;
+    if (age <= 0) continue;
+    const reach = min(c.len, age * VTIP), open = 1 - exp(-age / TAU), run = reach < c.len;
+    const hw = 0.42 + (c.w * narrow - 0.42) * open, k = (0.5 + 2.3 * open) * narrow, { idx, d, u } = c;
+    for (let e = 0; e < idx.length; e++) {
+      const over = u[e] - reach;
+      if (over > REACH) continue;
+      const dd = over > 0 ? sqrt(d[e] * d[e] + over * over) : d[e];
+      // A running tip is sharp.
+      const tip = run ? min(1, 0.35 + max(0, -over) / 5) : 1;
+      G[idx[e]] = smin(G[idx[e]], dd - hw * tip, k);
+    }
+  }
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S) return;
+  const t = S.t, h = S.hue + H0, hh = h - floor(h), cz = S.coat;
+  // While the brush is on its way down, the old crackle shows below it.
+  const laying = t < LAY && S.old, front = -6 + ((H + 12) * t) / LAY;
+  field(S, laying ? S.old : S.cracks, laying ? 1e9 : t);
+  const G = S.G, { base, ink, a, b } = S;
+  // Orange and yellow bases go brown at the dim edge of a gap: paled a
+  // little and lit to full.
+  const warm = cl(1.5 - abs(hh - 0.13) / 0.07, 0, 1);
+  hsv(h, 0.82 - 0.2 * warm, 0.9 + 0.1 * warm, base);
+  // The coat: black lacquer, a jewel tone opposite the base, pearl.
+  const hc = h + 0.5, wc = cl(1.5 - abs(hc - floor(hc) - 0.13) / 0.07, 0, 1);
+  if (cz < 0.5) {
+    hsv(hc, 0.5, 0.05, a);
+    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, b);
+  } else {
+    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, a);
+    hsv(h + 0.04, 0.12, 0.9, b);
+  }
+  const f = sm(0, 1, cz < 0.5 ? cz * 2 : cz * 2 - 1);
+  for (let c = 0; c < 3; c++) ink[c] = a[c] + (b[c] - a[c]) * f;
+  const pearl = sm(0.5, 1, cz), dark = 1 - sm(0, 0.6, cz), cool = S.cool;
+  hsv(h + 0.55, 0.28, 0.72, cool);
+  // A strip light reflected in the gloss, sliding down the panel once a
+  // coat, starting as the brush leaves it.
+  const sheen = (((t - LAY) * 24 + 280) % 280) - 5;
+  // The fresh coat is wet: a stronger reflection, brush marks running down
+  // it and the base colour faintly through it, all gone a second after it is on.
+  const dry = laying ? 0 : exp(-(t - LAY) / 0.9);
+  // Above the brush's front the coat is fresh and whole.
+  const at = (x, y) => {
+    const v = G[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)];
+    return laying ? max(v, (front - y) * 3) : v;
+  };
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const v = at(x, y);
+      const gx = min(at(x + 1, y), 3) - min(at(x - 1, y), 3), gy = min(at(x, y + 1), 3) - min(at(x, y - 1), 3);
+      const gl = sqrt(gx * gx + gy * gy) + 1e-6, face = -(gx * LX + gy * LY) / gl;
+      const band = exp(-(((x * 0.5 + y - sheen) / 13) ** 2));
+      // The base through the gaps, in the shade of the island on its lit side.
+      const shade = 1 - (0.45 - 0.3 * warm) * sm(-0.5, 0.8, at(x - 1, y - 2));
+      const bl = 0.3 * band;
+      let r = (base[0] + (1 - base[0]) * bl) * shade, g = (base[1] + (1 - base[1]) * bl) * shade, bb = (base[2] + (1 - base[2]) * bl) * shade;
+      // The island: how far inside its edge, as the height of a bead. Its
+      // cover falls off as a square root at the edge, so the base glows up
+      // through a hairline crack near full instead of as a dim line.
+      const cov = 1 - (1 - sm(-0.55, 0.55, v)) ** 0.5, hgt = cl(v / 2.5, 0, 1);
+      if (cov > 0) {
+        const edge = 1 - sm(0.15, 0.75, hgt), lit = max(0, face) * edge, away = max(0, -face) * edge;
+        // Dark coats: a white gloss on the lit rim and the strip light on
+        // the top.
+        const wet = laying ? 1 - sm(front - 2, front, y) : dry;
+        const brush = wet * S.brush[x] * (0.8 + 0.2 * sin(y * 0.09 + x));
+        const gloss = (dark * 0.75 + 0.35 * (1 - dark)) * lit * lit + (0.12 + 0.18 * dark + 0.3 * wet) * band * sm(0.3, 0.9, hgt) + brush;
+        const tint = 0.14 * wet * dark;
+        // Pearl shifts toward a cool interference tint on the rim turned away.
+        const dim = 1 - 0.3 * pearl * away - 0.08 * pearl * (1 - hgt), sh = 0.6 * pearl * away;
+        const ir = (ink[0] + (cool[0] - ink[0]) * sh) * dim + (1 - ink[0]) * gloss + base[0] * tint;
+        const ig = (ink[1] + (cool[1] - ink[1]) * sh) * dim + (1 - ink[1]) * gloss + base[1] * tint;
+        const ib = (ink[2] + (cool[2] - ink[2]) * sh) * dim + (1 - ink[2]) * gloss + base[2] * tint;
+        r += (ir - r) * cov;
+        g += (ig - g) * cov;
+        bb += (ib - bb) * cov;
+      }
+      if (laying) {
+        // The wet bead along the brush's edge.
+        const bead = 0.55 * exp(-(((y - front - 0.6 * sin(x * 0.4 + t * 3)) / 1.1) ** 2));
+        r += (1 - r) * bead;
+        g += (1 - g) * bead;
+        bb += (1 - bb) * bead;
+      }
+      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, bb)));
+    }
+}
diff --git a/incoming/pattern-study/patterns/isospectral-drums.js b/incoming/pattern-study/patterns/isospectral-drums.js
new file mode 100644
index 000000000..f2ca9a21f
--- /dev/null
+++ b/incoming/pattern-study/patterns/isospectral-drums.js
@@ -0,0 +1,348 @@
+// ===== Patternflow pattern =====
+// Title:   Isospectral Drums
+// Family:  wave
+// Idea:    Two drums of different shape, each glued from the same seven half-squares, one above the other, ring in the same eigenmode at the same frequency, one tone where the membrane is up and the opposite tone where it is down with dark nodal lines between, while a strip between them marks their one shared spectrum and the mode they play as they climb it.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: isospectral drums (Carolyn Gordon, David Webb and Scott Wolpert, 1992), the answer to Mark Kac's "Can one hear the shape of a drum?" (1966); the drums built from the Fano plane as Peter Buser, John Conway, Peter Doyle and Klaus-Dieter Semmler did (1994), pattern round 39
+// Round:   39
+// ===============================
+// @matrix 64x128
+// @knobs Hue=0..1, Speed=0.2..3, Mode=0..24, Beat=0..1
+//
+// Knob 1: Hue. Turns the two tones round the wheel together, always half a turn apart: at 0 the membrane is rose where it is up and aqua where it is down, at 0.1 coral and sky blue, at 0.25 yellow-lime and indigo, at 0.5 aqua and rose, at 0.75 indigo and yellow-lime. Orange and yellow tones are paled a little and lifted up to 1.5 times, so the dim parts of a swing do not turn brown or olive.
+// Knob 2: Speed. At 2 the fundamental swings once in 2.5 s and the 24th mode, 3.3 times higher, in 0.76 s, and on its climb the pair holds each mode 5 s. At 0.2 all of it ten times slower, at 3 one and a half times faster.
+// Knob 3: Mode. At 0 the drums climb their spectrum on their own from the 6th mode, a step every 5 s at Speed 2, back to the fundamental after the 24th. From 1 to 24 they hold that mode: 1 is a single dome; at 9 the nodal lines are exactly the seams between the seven half-squares, because that mode is the half-square's own lowest mode turned over at every seam; by 24 each drum is cut into eight to ten nodal domains, never laid out the same in the two.
+// Knob 4: Beat. Mixes in the mode three steps up, to half and half at 1. The two frequencies beat and the nodal lines sweep across both drums and come back in the same rhythm, because the two drums share every frequency; the strip lights both modes.
+
+const W = 64, H = 128;
+// Leg of a half-square in LEDs. A drum spans three legs each way, 58 LEDs
+// with its rim; the lower drum's grid starts at row 70.
+const S = 19, NG = 3 * S + 1, X0 = 3, TOP = [0, 70];
+// Modes found at setup, and the Lanczos steps that find them.
+const K = 24, M = 64;
+// The spectrum strip, rows 59 to 68: its axis runs from 0 to 1.05 times the
+// 24th eigenvalue across the drums' width.
+const AX = 1.05, TICK = [0.7, 0.8, 0.85];
+// Fundamental frequency in Hz at Speed 2; seconds a mode is held on the
+// climb, of which the last XF fade into the next; the mode the climb opens on.
+const F1 = 0.4, DWELL = 5, XF = 1.2, FIRST = 6;
+// Membrane level where it is flat, so the drums stay in sight between swings.
+const FLOOR = 0.18;
+// Opening hue: rose up, aqua down.
+const H0 = 0.96;
+const { floor, min, max, abs, sqrt, cos, round, hypot, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+const sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));
+
+function hsv(h, s, v, out) {
+  h = (h - floor(h)) * 6;
+  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
+  out[0] = [v, q, p, p, t, v][i];
+  out[1] = [t, v, v, q, p, p][i];
+  out[2] = [p, p, t, v, v, q][i];
+}
+
+// The Fano plane: its seven points are the nonzero vectors (x, y, z) of
+// F2^3, held as the numbers 1 to 7, and so are its seven lines, a line v
+// holding the points p with p.v = 0. Three involutions of PSL(3,2) act on
+// both: a swaps x and z, b swaps y and z, c adds z to x. On lines an element
+// acts by its inverse transpose, which for a and b is themselves and for c
+// adds x to z.
+const bit = (v, k) => (v >> k) & 1, vec = (x, y, z) => (x << 2) | (y << 1) | z;
+const swapXZ = (v) => vec(bit(v, 0), bit(v, 1), bit(v, 2)), swapYZ = (v) => vec(bit(v, 2), bit(v, 0), bit(v, 1));
+const ON_POINTS = [swapXZ, swapYZ, (v) => vec(bit(v, 2) ^ bit(v, 0), bit(v, 1), bit(v, 0))];
+const ON_LINES = [swapXZ, swapYZ, (v) => vec(bit(v, 2), bit(v, 1), bit(v, 2) ^ bit(v, 0))];
+
+// The base tile is the half-square (0,0), (1,0), (0,1); a and b are its
+// legs, c its hypotenuse. Reflection across each, as (x, y) -> (m0 x + m1 y
+// + m4, m2 x + m3 y + m5). Legs on the LED axes and the hypotenuse at 45
+// degrees, so every reflection maps the LED grid onto itself.
+const REF = [[1, 0, 0, -1, 0, 0], [-1, 0, 0, 1, 0, 0], [0, -1, -1, 0, 1, 1]];
+const comp = (g, h) => [g[0] * h[0] + g[1] * h[2], g[0] * h[1] + g[1] * h[3], g[2] * h[0] + g[3] * h[2], g[2] * h[1] + g[3] * h[3], g[0] * h[4] + g[1] * h[5] + g[4], g[2] * h[4] + g[3] * h[5] + g[5]];
+
+// Copy i of the tile is glued to copy a(i) across side a, and so on; a
+// side an involution fixes is the drum's rim. The gluings make a tree, so
+// unfolding it from copy 1 places every copy in the plane.
+function unfold(inv) {
+  const g = [];
+  g[1] = [1, 0, 0, 1, 0, 0];
+  const q = [1];
+  while (q.length) {
+    const i = q.pop();
+    for (let s = 0; s < 3; s++) {
+      const j = inv[s](i);
+      if (j !== i && !g[j]) {
+        g[j] = comp(g[i], REF[s]);
+        q.push(j);
+      }
+    }
+  }
+  return g.slice(1);
+}
+
+// Each grid point of the drum: 0 outside, 1 on the rim, 2 inside. A point
+// is inside when a step into every one of the eight 45-degree wedges round
+// it stays on the drum; every tile edge runs along a wedge's side.
+function drumMask(tiles, flip) {
+  let mx = 1e9, my = 1e9;
+  for (const g of tiles)
+    for (const [u, v] of [[0, 0], [1, 0], [0, 1]]) {
+      mx = min(mx, g[0] * u + g[1] * v + g[4]);
+      my = min(my, g[2] * u + g[3] * v + g[5]);
+    }
+  const on = (x, y) => {
+    for (const g of tiles) {
+      const px = x / S + mx - g[4], py = y / S + my - g[5];
+      const u = g[0] * px + g[2] * py, v = g[1] * px + g[3] * py;
+      if (u > -1e-9 && v > -1e-9 && u + v < 1 + 1e-9) return true;
+    }
+    return false;
+  };
+  const m = new Uint8Array(NG * NG);
+  for (let y = 0; y < NG; y++)
+    for (let x = 0; x < NG; x++) {
+      const gy = flip ? NG - 1 - y : y;
+      if (!on(x, gy)) continue;
+      let all = true;
+      for (const [dx, dy] of [[2, 1], [1, 2], [-1, 2], [-2, 1], [-2, -1], [-1, -2], [1, -2], [2, -1]]) if (!on(x + 0.05 * dx, gy + 0.05 * dy)) all = false;
+      m[y * NG + x] = all ? 2 : 1;
+    }
+  return m;
+}
+
+// Implicit QL on a symmetric tridiagonal matrix (EISPACK's tql2): d the
+// diagonal, e[1..n-1] below it; z starts as the identity and leaves holding
+// the eigenvectors in its columns.
+function tql2(n, d, e, z) {
+  for (let i = 1; i < n; i++) e[i - 1] = e[i];
+  e[n - 1] = 0;
+  let f = 0, tst = 0;
+  for (let l = 0; l < n; l++) {
+    tst = max(tst, abs(d[l]) + abs(e[l]));
+    let m = l;
+    while (m < n && abs(e[m]) > 2.2e-16 * tst) m++;
+    if (m > l)
+      do {
+        let g = d[l], p = (d[l + 1] - g) / (2 * e[l]), r = hypot(p, 1);
+        if (p < 0) r = -r;
+        d[l] = e[l] / (p + r);
+        d[l + 1] = e[l] * (p + r);
+        const dl1 = d[l + 1];
+        let h = g - d[l];
+        for (let i = l + 2; i < n; i++) d[i] -= h;
+        f += h;
+        p = d[m];
+        let c = 1, c2 = 1, c3 = 1, s = 0, s2 = 0;
+        const el1 = e[l + 1];
+        for (let i = m - 1; i >= l; i--) {
+          c3 = c2;
+          c2 = c;
+          s2 = s;
+          g = c * e[i];
+          h = c * p;
+          r = hypot(p, e[i]);
+          e[i + 1] = s * r;
+          s = e[i] / r;
+          c = p / r;
+          p = c * d[i] - s * g;
+          d[i + 1] = h + s * (c * g + s * d[i]);
+          for (let k = 0; k < n; k++) {
+            const a = z[k * n + i], b = z[k * n + i + 1];
+            z[k * n + i + 1] = s * a + c * b;
+            z[k * n + i] = c * a - s * b;
+          }
+        }
+        p = (-s * s2 * c3 * el1 * e[l]) / dl1;
+        e[l] = s * p;
+        d[l] = c * p;
+      } while (abs(e[l]) > 2.2e-16 * tst);
+    d[l] += f;
+    e[l] = 0;
+  }
+}
+
+// The lowest K eigenpairs of the 5-point Dirichlet Laplacian on the drum's
+// inside points: Lanczos on its inverse, applied by a banded Cholesky
+// factor, with full reorthogonalisation. Eigenvalues in units of one LED.
+// Every reflection of the gluing maps the LED grid onto itself, so the two
+// pixel drums are isospectral exactly, not only in the limit: both have
+// 1179 inside points and the same 1179 eigenvalues, and the lowest 24 found
+// here for each agree to 1e-11.
+function drumModes(mask) {
+  const id = new Int32Array(NG * NG).fill(-1), pos = [];
+  for (let p = 0; p < NG * NG; p++) if (mask[p] === 2) id[p] = pos.push(p) - 1;
+  const n = pos.length;
+  let bw = 1;
+  for (let i = 0; i < n; i++) if (id[pos[i] - NG] >= 0) bw = max(bw, i - id[pos[i] - NG]);
+  const B = bw + 1, L = new Float64Array(n * B);
+  for (let i = 0; i < n; i++)
+    for (let j = max(0, i - bw); j <= i; j++) {
+      const dp = pos[i] - pos[j];
+      let s = i === j ? 4 : dp === 1 || dp === NG ? -1 : 0;
+      for (let k = max(0, i - bw); k < j; k++) s -= L[i * B + i - k] * L[j * B + j - k];
+      L[i * B + i - j] = i === j ? sqrt(s) : s / L[j * B];
+    }
+  const solve = (b, x) => {
+    for (let i = 0; i < n; i++) {
+      let s = b[i];
+      for (let k = max(0, i - bw); k < i; k++) s -= L[i * B + i - k] * x[k];
+      x[i] = s / L[i * B];
+    }
+    for (let i = n - 1; i >= 0; i--) {
+      let s = x[i];
+      for (let k = i + 1; k <= min(n - 1, i + bw); k++) s -= L[k * B + k - i] * x[k];
+      x[i] = s / L[i * B];
+    }
+  };
+  const Q = new Float64Array(M * n), w = new Float64Array(n), d = new Float64Array(M), e = new Float64Array(M);
+  // A fixed start, so both drums and every run find the same modes.
+  let seed = 12345, nn = 0;
+  for (let i = 0; i < n; i++) {
+    seed = (seed * 1103515245 + 12345) >>> 0;
+    Q[i] = seed / 4294967296 - 0.5;
+    nn += Q[i] * Q[i];
+  }
+  for (let i = 0; i < n; i++) Q[i] /= sqrt(nn);
+  for (let j = 0; j < M; j++) {
+    solve(Q.subarray(j * n, j * n + n), w);
+    for (let pass = 0; pass < 2; pass++)
+      for (let i = 0; i <= j; i++) {
+        let dot = 0;
+        for (let k = 0; k < n; k++) dot += w[k] * Q[i * n + k];
+        if (!pass && i === j) d[j] = dot;
+        for (let k = 0; k < n; k++) w[k] -= dot * Q[i * n + k];
+      }
+    let b = 0;
+    for (let k = 0; k < n; k++) b += w[k] * w[k];
+    b = sqrt(b);
+    if (j + 1 < M) {
+      e[j + 1] = b;
+      for (let k = 0; k < n; k++) Q[(j + 1) * n + k] = w[k] / b;
+    }
+  }
+  const z = new Float64Array(M * M);
+  for (let i = 0; i < M; i++) z[i * M + i] = 1;
+  tql2(M, d, e, z);
+  const order = [...d.keys()].sort((a, b) => d[b] - d[a]).slice(0, K);
+  const lam = new Float64Array(K), V = new Float32Array(K * n);
+  order.forEach((col, m) => {
+    lam[m] = 1 / d[col];
+    const v = new Float64Array(n);
+    for (let j = 0; j < M; j++) {
+      const c = z[j * M + col];
+      for (let i = 0; i < n; i++) v[i] += c * Q[j * n + i];
+    }
+    // The sign of a mode is free: its strongest antinode is taken as up.
+    let big = 0;
+    for (let i = 0; i < n; i++) if (abs(v[i]) > abs(big)) big = v[i];
+    for (let i = 0; i < n; i++) V[m * n + i] = v[i] / big;
+  });
+  return { n, pos, lam, V };
+}
+
+export function setup(params) {
+  // Drum A: copies of the tile at the points; drum B: at the lines.
+  const masks = [drumMask(unfold(ON_POINTS), true), drumMask(unfold(ON_LINES), true)];
+  params.s = {
+    hue: 0, speed: 2, mode: 0, beat: 0.06, t: 0, tour: 0,
+    masks, drums: masks.map(drumModes), w: new Float32Array(K), swing: new Float32Array(K), U: new Float32Array(NG * NG), strip: new Float32Array(W * 10 * 3),
+    up: [0, 0, 0], down: [0, 0, 0], rim: [0, 0, 0],
+  };
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);
+  S.hue = k[0];
+  S.mode = round(cl(k[2], 0, K));
+  S.beat = cl(k[3], 0, 1);
+  S.t += d;
+  // The modes playing and their shares: one held mode, or on the climb the
+  // mode of this step fading into the next.
+  const w = S.w, base = [];
+  w.fill(0);
+  if (S.mode > 0) base.push([S.mode - 1, 1]);
+  else {
+    S.tour += d;
+    const step = floor(S.tour / DWELL), x = sm(DWELL - XF, DWELL, S.tour - step * DWELL), m = (FIRST - 1 + step) % K;
+    base.push([m, 1 - x], [(m + 1) % K, x]);
+  }
+  // Beat shares each mode with the one three steps above it (below, for
+  // the top three).
+  for (const [m, s] of base) {
+    w[m] += s * (1 - S.beat / 2);
+    w[m + 3 < K ? m + 3 : m - 3] += (s * S.beat) / 2;
+  }
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S) return;
+  const { up, down, rim, w, U, swing } = S;
+  const lam = S.drums[0].lam, h = S.hue + H0;
+  // Yellow and orange read olive and brown when dim: there the tone is paled
+  // a little and the membrane lifted up to 1.5 times.
+  const warm = (hh) => cl(1.5 - abs(hh - floor(hh) - 0.16) / 0.08, 0, 1), wu = warm(h), wd = warm(h + 0.5);
+  hsv(h, 0.72 - 0.14 * wu, 1, up);
+  hsv(h + 0.5, 0.78 - 0.14 * wd, 1, down);
+  const lift = [1 + 0.5 * wu, 1 + 0.5 * wd];
+  hsv(h + 0.25, 0.12, 0.62, rim);
+  // Each mode swings as cos(omega t), omega in proportion to the square root
+  // of its eigenvalue, and the same omega in both drums.
+  for (let m = 0; m < K; m++) swing[m] = w[m] > 0.002 ? cos(2 * PI * F1 * sqrt(lam[m] / lam[0]) * S.t) : 0;
+  for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) display.setPixel(x, y, 0, 0, 0);
+  S.drums.forEach((D, di) => {
+    const mask = S.masks[di], { n, pos, V } = D, y0 = TOP[di];
+    U.fill(0);
+    let scale = 0;
+    for (let m = 0; m < K; m++) {
+      if (w[m] <= 0.002) continue;
+      const a = w[m] * swing[m];
+      scale += w[m];
+      for (let i = 0; i < n; i++) U[pos[i]] += a * V[m * n + i];
+    }
+    scale = max(scale, 1e-6);
+    for (let gy = 0; gy < NG; gy++)
+      for (let gx = 0; gx < NG; gx++) {
+        const p = gy * NG + gx, kind = mask[p];
+        if (!kind) continue;
+        let r, g, b;
+        if (kind === 1) [r, g, b] = rim;
+        else {
+          // How far the nearest nodal line is, in LEDs: the value over the
+          // slope, the same at every moment of a swing.
+          const u = U[p], sx = (U[p + 1] - U[p - 1]) / 2, sy = (U[p + NG] - U[p - NG]) / 2;
+          const dist = abs(u) / sqrt(sx * sx + sy * sy + 1e-30), node = sm(0.15, 0.85, dist);
+          const a = min(1, abs(u) / scale), tone = u >= 0 ? up : down, wh = 0.35 * a * a * a;
+          const lv = (FLOOR + (1 - FLOOR) * a ** 0.7) * node * lift[u >= 0 ? 0 : 1];
+          r = (tone[0] + (1 - tone[0]) * wh) * lv;
+          g = (tone[1] + (1 - tone[1]) * wh) * lv;
+          b = (tone[2] + (1 - tone[2]) * wh) * lv;
+        }
+        display.setPixel(X0 + gx, y0 + gy, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));
+      }
+  });
+  // The shared spectrum: a dim tick at every eigenvalue, and the modes
+  // playing lit the full height of the strip, brightest at the top of their
+  // swing and in the tone of the side it swings to.
+  const span = (NG - 1) / (AX * lam[K - 1]), st = S.strip;
+  st.fill(0);
+  for (let m = 0; m < K; m++) {
+    const xf = X0 + lam[m] * span, xi = floor(xf), fr = xf - xi;
+    const tone = swing[m] >= 0 ? up : down, on = cl(w[m] * 1.4, 0, 1) * (0.45 + 0.55 * abs(swing[m]));
+    for (let j = 0; j < 10; j++) {
+      const tick = j >= 2 && j <= 7 ? 0.26 : 0, lit = on * (j === 0 || j === 9 ? 0.5 : 1);
+      for (const [xx, f] of [[xi, 1 - fr], [xi + 1, fr]]) {
+        const q = (j * W + xx) * 3;
+        for (let c = 0; c < 3; c++) st[q + c] += (tick * (1 - lit) * TICK[c] + lit * (tone[c] + (1 - tone[c]) * 0.35)) * f;
+      }
+    }
+  }
+  for (let j = 0; j < 10; j++)
+    for (let x = 0; x < W; x++) {
+      const q = (j * W + x) * 3;
+      display.setPixel(x, 59 + j, round(255 * min(1, st[q])), round(255 * min(1, st[q + 1])), round(255 * min(1, st[q + 2])));
+    }
+}

From 6a259610dd4359321329f387c907d07c0054c3bb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 24 Oct 2026 22:42:38 +0000
Subject: [PATCH 06/10] =?UTF-8?q?incoming:=20Steiner=20Chain,=20Serum=20Dr?=
 =?UTF-8?q?ip=20=ED=8C=A8=ED=84=B4=20(39=ED=8C=90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WSruBmW95rasfF2WmM8DZ7
---
 incoming/pattern-study/patterns/serum-drip.js | 464 ++++++++++++++++++
 .../pattern-study/patterns/steiner-chain.js   | 257 ++++++++++
 2 files changed, 721 insertions(+)
 create mode 100644 incoming/pattern-study/patterns/serum-drip.js
 create mode 100644 incoming/pattern-study/patterns/steiner-chain.js

diff --git a/incoming/pattern-study/patterns/serum-drip.js b/incoming/pattern-study/patterns/serum-drip.js
new file mode 100644
index 000000000..7631598f8
--- /dev/null
+++ b/incoming/pattern-study/patterns/serum-drip.js
@@ -0,0 +1,464 @@
+// ===== Patternflow pattern =====
+// Title:   Serum Drip
+// Family:  cosmetic
+// Idea:    A thread of clear tinted serum falls from the top edge the height of the panel, necks and swells into beads on a string, the filaments between them thin and snap, and round drops with now and then a small satellite fall into a shallow pool at the bottom, while the stream keeps coming and the lit wall shows through every bead, magnified.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 39, after a serum stretched from a dropper into a thread that beads up and breaks (the Plateau-Rayleigh instability, Joseph Plateau, 1873, and Lord Rayleigh, 1878)
+// Round:   39
+// ===============================
+// @matrix 64x128
+// @knobs Hue=0..1, Speed=0.2..3, Viscosity=-1..1, Flow=-1..1
+//
+// Knob 1: Hue. Turns the serum round the whole wheel, and the wall behind it takes a faint tint of the same hue. At 0 gold on a grey wall; at 0.04 yellow, 0.1 lime, 0.2 green, 0.36 aqua, 0.46 azure, 0.53 blue, 0.6 violet, 0.7 magenta, 0.78 rose, 0.86 red, 0.92 vermilion and 0.96 orange. From red-orange through gold to lime the wall is greyed and lifted a little and the pool lit from within, so the serum and its pool read amber, gold or lemon, never brown or olive.
+// Knob 2: Speed. At 2 the serum leaves the top edge at 28 LEDs a second, falls the height of the panel in about 3 seconds, and a drop breaks off about every 1.4 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.
+// Knob 3: Viscosity. At 0 the ripples grow down the thread into beads on a string, the filaments between them thin and snap about row 80, and drops 15 LEDs across fall into a pool 14 rows deep, now and then with a satellite. At -1 the serum is nine times thinner and snaps into clean drops about row 45. Turned up, the beads stay joined longer: from about 0.35 the thread reaches the pool unbroken as a string of beads, and at 1, nine times thicker than at 0, the ripples barely grow and the pool, draining slower, stands 21 rows deep.
+// Knob 4: Flow. How fast the serum leaves the top edge, 2.2 times slower at -1 and 2.2 times faster at 1. At -1 it cannot keep a thread going and drips: a drop swells below the top edge to 21 LEDs across and lets go about every 10 seconds; at -0.5 the thread breaks about row 60 into drops 19 across; from 0.5 it runs into the pool before it can break, and the pool rises to 19 rows.
+
+const W = 64, H = 128, NMAX = 800, PMAX = 64;
+const { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+
+// The thread, in LEDs and seconds at Speed 2, is a slender-thread model: a
+// chain of slices of fixed volume between nodes on the vertical axis, each
+// slice a short cylinder. The area of the surface pulls on the nodes
+// (surface tension over density SIG), gravity GR pulls them down, and
+// viscosity resists stretching. A still thread in this model grows ripples
+// at the rates of Rayleigh's theory, fastest at nine radii. The serum leaves
+// an opening of radius A0, ZN above the top edge and never drawn.
+// TS slows the whole film down without changing a shape, Q scales the
+// thread: every rate below is set so the same shapes come at any Q.
+const TS = 0.7, Q = 1.18;
+const ZN = -5, A0 = 3.4 * Q, GR = 12 * Q * TS * TS, SIG = 2200 * Q ** 3 * TS * TS, DZ = 0.9, HCUT = 0.13;
+// A tremor in the flow ripples the thread's radius by about a sixth as it
+// leaves, at 8.8 radii, the wavelength that grows fastest on a thread at
+// rest, wandering a little either side of it. The fall stretches the
+// ripples as they go.
+const LAM = 30 * Q;
+// Viscosity at Viscosity 0, in LEDs squared a second.
+const NU0 = 55 * Q * Q * TS;
+// The pool's rest surface, its depth into the wall, and the ripple speed.
+const POOL = 117, DEPTH = 18, CW = 40;
+// Opening hue: gold.
+const H0 = 0.14;
+
+function hsv(h, s, v, out) {
+  h = (h - floor(h)) * 6;
+  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
+  out[0] = [v, q, p, p, t, v][i];
+  out[1] = [t, v, v, q, p, p][i];
+  out[2] = [p, p, t, v, v, q][i];
+}
+
+export function setup(params) {
+  const F = () => new Float64Array(NMAX);
+  params.s = {
+    hue: 0, rate: 1, nu: 30, v0: 16, begun: false, t: 0,
+    n: 0, z: F(), u: F(), x: F(), V: F(), L: F(), h: F(), G: F(), f: F(), m: F(), lk: new Uint8Array(NMAX),
+    ca: F(), cb: F(), cc: F(), cd: F(),
+    drops: [], noise: 0, sway: random() * 6.28, pour: 0, ph: 0, jit: 0,
+    lvl: POOL, eta: new Float64Array(W), etv: new Float64Array(W),
+    PH: new Float64Array(2 * H), PX: new Float64Array(2 * H), PD: new Float64Array(2 * H), PT: new Float64Array(2 * H),
+    ser: [0, 0, 0], wall: [0, 0, 0],
+  };
+  const S = params.s;
+  // The node at the opening.
+  S.n = 1;
+  S.z[0] = ZN;
+  S.u[0] = S.v0;
+  S.x[0] = 32;
+}
+
+// Where the serum leaves the top edge: the hand above drifts slowly from
+// side to side, and the thread below keeps the curve of where it has been.
+const openX = (S) => 32 + 5 * sin(S.sway + S.t * 0.6 * TS) + 1.5 * sin(S.sway * 2.3 + S.t * 1.4 * TS);
+
+function insert(S, i) {
+  const { z, u, x, V, lk } = S;
+  z.copyWithin(i + 1, i, S.n);
+  u.copyWithin(i + 1, i, S.n);
+  x.copyWithin(i + 1, i, S.n);
+  V.copyWithin(i + 1, i, S.n);
+  lk.copyWithin(i + 1, i, S.n);
+  S.n++;
+}
+
+function remove(S, i) {
+  const { z, u, x, V, lk } = S;
+  z.copyWithin(i, i + 1, S.n);
+  u.copyWithin(i, i + 1, S.n);
+  x.copyWithin(i, i + 1, S.n);
+  V.copyWithin(i, i + 1, S.n);
+  lk.copyWithin(i, i + 1, S.n);
+  S.n--;
+}
+
+// Node i is kinematic: the opening, or a node already in the pool.
+const kin = (S, i) => i === 0 || S.z[i] > S.lvl;
+
+function step(S, dt) {
+  const { z, u, V, L, h, G, f, m, lk, ca, cb, cc, cd } = S, n = S.n;
+  // The node at the opening moves at the speed the serum leaves it.
+  u[0] = S.v0;
+  // Slices: length and radius.
+  for (let i = 0; i < n - 1; i++) {
+    G[i] = 0;
+    if (!lk[i]) continue;
+    L[i] = max(1e-4, z[i + 1] - z[i]);
+    h[i] = sqrt(V[i] / (PI * L[i]));
+  }
+  // dArea / dLength of each slice: half a cylinder at each end (with a flat
+  // cap at a free end), a frustum between the middles of every two slices.
+  for (let i = 0; i < n - 1; i++) {
+    if (!lk[i]) continue;
+    const hi = h[i], Li = L[i], dhi = -hi / (2 * Li);
+    const top = i === 0 || !lk[i - 1], bot = i + 1 === n - 1 || !lk[i + 1];
+    if (top) G[i] += PI * (hi / 2 - (kin(S, i) ? 0 : (hi * hi) / Li));
+    if (bot) G[i] += PI * (hi / 2 - (kin(S, i + 1) ? 0 : (hi * hi) / Li));
+    else {
+      const j = i + 1, hj = h[j], Lj = L[j], dhj = -hj / (2 * Lj), d = (Li + Lj) / 2, dl = hi - hj, Q = sqrt(d * d + dl * dl), hs = hi + hj;
+      G[i] += PI * (dhi * Q + (hs * (d / 2 + dl * dhi)) / Q);
+      G[j] += PI * (dhj * Q + (hs * (d / 2 - dl * dhj)) / Q);
+    }
+  }
+  for (let i = 0; i < n; i++) {
+    f[i] = 0;
+    m[i] = 0;
+  }
+  for (let i = 0; i < n - 1; i++) {
+    if (!lk[i]) continue;
+    f[i] += SIG * G[i];
+    f[i + 1] -= SIG * G[i];
+    m[i] += V[i] / 2;
+    m[i + 1] += V[i] / 2;
+  }
+  for (let i = 0; i < n; i++) if (!kin(S, i) && m[i] > 0) u[i] += dt * (f[i] / m[i] + GR);
+  // Viscosity, implicit: each slice resists stretching with 3 nu V / L^2,
+  // solved along each chain as a tridiagonal system.
+  const nu = S.nu;
+  let a = 0;
+  while (a < n) {
+    let b = a;
+    while (b < n - 1 && lk[b]) b++;
+    if (b > a) {
+      for (let i = a; i <= b; i++) {
+        const cl0 = i > a ? (3 * nu * V[i - 1]) / (L[i - 1] * L[i - 1]) : 0, cr = i < b ? (3 * nu * V[i]) / (L[i] * L[i]) : 0;
+        if (kin(S, i)) {
+          ca[i] = 0;
+          cb[i] = 1;
+          cc[i] = 0;
+          cd[i] = u[i];
+        } else {
+          ca[i] = -dt * cl0;
+          cb[i] = m[i] + dt * (cl0 + cr);
+          cc[i] = -dt * cr;
+          cd[i] = m[i] * u[i];
+        }
+      }
+      for (let i = a + 1; i <= b; i++) {
+        const w = ca[i] / cb[i - 1];
+        cb[i] -= w * cc[i - 1];
+        cd[i] -= w * cd[i - 1];
+      }
+      u[b] = cd[b] / cb[b];
+      for (let i = b - 1; i >= a; i--) u[i] = (cd[i] - cc[i] * u[i + 1]) / cb[i];
+    }
+    a = b + 1;
+  }
+  for (let i = 0; i < n; i++) z[i] += dt * u[i];
+  S.t += dt;
+}
+
+// After a step: feed the opening, split long slices, merge short ones, cut
+// the thread where it has thinned to nothing, roll free pieces up into drops,
+// and pour what reaches the pool into it.
+function tidy(S) {
+  const { z, u, x, V, lk } = S;
+  // The opening: a new slice each time the last one has left it.
+  if (z[0] >= ZN + DZ && S.n < NMAX - 2) {
+    insert(S, 0);
+    z[0] = z[1] - DZ;
+    u[0] = S.v0;
+    x[0] = openX(S);
+    S.noise += 0.35 * (random() - 0.5) - 0.12 * S.noise;
+    S.jit += 0.2 * (random() - 0.5) - 0.05 * S.jit;
+    S.ph += ((2 * PI * DZ) / LAM) * (1 + 0.25 * S.jit);
+    V[0] = PI * A0 * A0 * DZ * (1 + 0.35 * sin(S.ph) + 0.04 * S.noise);
+    lk[0] = 1;
+  }
+  z[0] = max(z[0], ZN);
+  for (let i = 0; i < S.n - 1; i++) {
+    if (!lk[i]) continue;
+    const L = z[i + 1] - z[i], hh = sqrt(V[i] / (PI * max(L, 1e-4))), lo = 0.22 + 0.2 * hh;
+    if (L > max(1, 2.6 * lo) && S.n < NMAX - 2) {
+      insert(S, i + 1);
+      z[i + 1] = (z[i] + z[i + 2]) / 2;
+      u[i + 1] = (u[i] + u[i + 2]) / 2;
+      x[i + 1] = (x[i] + x[i + 2]) / 2;
+      V[i] /= 2;
+      V[i + 1] = V[i];
+      lk[i + 1] = 1;
+    } else if (hh < HCUT) {
+      // Pinch-off.
+      lk[i] = 0;
+      if (i > 0 && lk[i - 1]) V[i - 1] += V[i] / 2;
+      if (i + 1 < S.n - 1 && lk[i + 1]) V[i + 1] += V[i] / 2;
+    } else if (L < lo) {
+      // Merge with a neighbour by dropping the shared node.
+      const left = i > 0 && lk[i - 1] && (!(i + 1 < S.n - 1 && lk[i + 1]) || z[i] - z[i - 1] < z[i + 2] - z[i + 1]);
+      const right = !left && i + 1 < S.n - 1 && lk[i + 1];
+      if (left) {
+        // The dropped node's momentum goes half to each neighbour.
+        const mr = (V[i - 1] + V[i]) / 2, ma = V[i - 1] / 2, mb = V[i] / 2;
+        u[i - 1] = (u[i - 1] * ma + (u[i] * mr) / 2) / (ma + mr / 2);
+        u[i + 1] = (u[i + 1] * mb + (u[i] * mr) / 2) / (mb + mr / 2);
+        V[i - 1] += V[i];
+        remove(S, i);
+        i--;
+      } else if (right) {
+        const j = i + 1, mr = (V[i] + V[j]) / 2;
+        u[i] = (u[i] * V[i] / 2 + (u[j] * mr) / 2) / (V[i] / 2 + mr / 2);
+        u[j + 1] = (u[j + 1] * V[j] / 2 + (u[j] * mr) / 2) / (V[j] / 2 + mr / 2);
+        V[i] += V[j];
+        lk[i] = 1;
+        remove(S, j);
+      }
+    }
+  }
+  // Nodes left with no slice on either side go, but not the one at the opening.
+  for (let i = S.n - 1; i > 0; i--) if (!lk[i - 1] && !(i < S.n - 1 && lk[i])) remove(S, i);
+  // Chains: roll a short free piece into a drop; pour what is in the pool.
+  let a = 0;
+  while (a < S.n) {
+    let b = a;
+    while (b < S.n - 1 && lk[b]) b++;
+    if (b > a) {
+      let vol = 0, mom = 0, zc = 0, xc = 0;
+      for (let i = a; i < b; i++) {
+        vol += V[i];
+        mom += (V[i] * (u[i] + u[i + 1])) / 2;
+        zc += (V[i] * (z[i] + z[i + 1])) / 2;
+        xc += (V[i] * (x[i] + x[i + 1])) / 2;
+      }
+      const R = (0.75 * vol / PI) ** (1 / 3), len = z[b] - z[a];
+      if (a > 0 && (b - a <= 2 || len < 2.3 * R) && z[b] <= S.lvl && S.drops.length < PMAX) {
+        S.drops.push({ y: zc / vol, x: xc / vol, v: mom / vol, R, vol, e: cl(len / (2 * R) - 1, -0.4, 0.6), ph: 0 });
+        for (let i = b; i >= a; i--) remove(S, i);
+        continue;
+      }
+      // Slices wholly under the surface go into the pool.
+      while (b > a && z[b - 1] > S.lvl + 1) {
+        S.pour += V[b - 1];
+        remove(S, b);
+        lk[b - 1] = 0;
+        b--;
+      }
+    }
+    a = b + 1;
+  }
+}
+
+function drops(S, d) {
+  const { eta, etv } = S;
+  for (const p of S.drops) {
+    p.v += GR * d;
+    p.y += p.v * d;
+    // A drop rings at its lowest mode, sqrt(8 SIG / R^3), damped by viscosity.
+    p.ph += sqrt((8 * SIG) / (p.R * p.R * p.R)) * d;
+    p.e *= exp((-d * (5 * S.nu + 4)) / (p.R * p.R));
+  }
+  S.drops = S.drops.filter((p) => {
+    if (p.y - 0.3 * p.R < S.lvl + eta[cl(round(p.x), 0, W - 1)]) return true;
+    S.pour += p.vol;
+    const k = p.vol * p.v * 0.0004;
+    for (let i = -6; i <= 6; i++) {
+      const c = cl(round(p.x) + i, 0, W - 1);
+      etv[c] -= k * exp(-(i * i) / (p.R * p.R + 2));
+    }
+    return false;
+  });
+  // The pool fills with what comes in and drains back toward its rest level.
+  // A thicker serum drains away more slowly, so its pool stands higher.
+  S.lvl += -S.pour / (W * DEPTH) + (POOL - S.lvl) * min(1, d / (3 * (S.nu / NU0) ** 0.45));
+  S.pour = 0;
+  for (let i = 0; i < W; i++) {
+    const l = eta[i > 0 ? i - 1 : i], r = eta[i < W - 1 ? i + 1 : i];
+    etv[i] += d * (CW * CW * (l + r - 2 * eta[i]) - 4 * etv[i]);
+  }
+  for (let i = 0; i < W; i++) eta[i] = cl(eta[i] + d * etv[i], -5, 5);
+}
+
+function advance(S, d) {
+  // Substeps short enough for the stiffest slice: a capillary wave as short
+  // as the slice rings at sqrt(SIG h / 2) (pi / L)^2.
+  let left = d;
+  while (left > 1e-6) {
+    let w = 0;
+    for (let i = 0; i < S.n - 1; i++) {
+      if (!S.lk[i]) continue;
+      const L = max(0.05, S.z[i + 1] - S.z[i]), hh = sqrt(S.V[i] / (PI * L));
+      w = max(w, (sqrt((SIG * hh) / 2) * PI * PI) / (L * L));
+    }
+    const dt = min(left, 0.6 / max(w, 1), 1 / 120);
+    step(S, dt);
+    tidy(S);
+    drops(S, dt);
+    left -= dt;
+  }
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);
+  S.hue = k[0];
+  S.rate = cl(k[1], 0.2, 3) / 2;
+  S.nu = NU0 * 9 ** cl(k[2], -1, 1);
+  S.v0 = 34 * Q * TS * 2.2 ** cl(k[3], -1, 1);
+  if (!S.begun) {
+    S.begun = true;
+    for (let i = 0; i < 90; i++) advance(S, 1 / 30);
+    // The pool opens at the level where it drains as fast as it fills.
+    S.lvl = POOL - (PI * A0 * A0 * S.v0 * 3 * (S.nu / NU0) ** 0.45) / (W * DEPTH);
+  }
+  advance(S, d * S.rate);
+}
+
+// The radius and centre of the liquid at half-row samples.
+function profile(S) {
+  const { PH, PX, PD, z, x, V, lk } = S, n = S.n;
+  PH.fill(0);
+  PD.fill(0);
+  const put = (za, ha, xa, zb, hb, xb) => {
+    const k0 = max(0, Math.ceil(2 * za - 0.5)), k1 = min(2 * H - 1, floor(2 * zb - 0.5));
+    for (let k = k0; k <= k1; k++) {
+      const zz = (k + 0.5) / 2, t = zb > za ? (zz - za) / (zb - za) : 0, hh = ha + (hb - ha) * t;
+      if (hh > PH[k]) {
+        PH[k] = hh;
+        PX[k] = xa + (xb - xa) * t;
+        PD[k] = zb > za ? (hb - ha) / (zb - za) : 0;
+      }
+    }
+  };
+  let a = 0;
+  while (a < n) {
+    let b = a;
+    while (b < n - 1 && lk[b]) b++;
+    if (b > a) {
+      let pz = 0, ph = 0, px = 0;
+      for (let i = a; i < b; i++) {
+        const L = max(1e-3, z[i + 1] - z[i]), hh = sqrt(V[i] / (PI * L)), zm = (z[i] + z[i + 1]) / 2, xm = (x[i] + x[i + 1]) / 2;
+        if (i === a) {
+          // The upper end: the thread runs off the top edge, a free end is capped.
+          if (a === 0) put(z[a] - 2, hh, xm, zm, hh, xm);
+          else
+            for (let c = 0; c < 4; c++) {
+              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);
+              put(zm - cap * sqrt(1 - t0 * t0), hh * t0, xm, zm - cap * sqrt(1 - t1 * t1), hh * t1, xm);
+            }
+        } else put(pz, ph, px, zm, hh, xm);
+        if (i === b - 1) {
+          if (z[b] > S.lvl) put(zm, hh, xm, S.lvl + 2, hh, xm);
+          else
+            for (let c = 0; c < 4; c++) {
+              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);
+              put(zm + cap * sqrt(1 - t1 * t1), hh * t1, xm, zm + cap * sqrt(1 - t0 * t0), hh * t0, xm);
+            }
+        }
+        pz = zm;
+        ph = hh;
+        px = xm;
+      }
+    }
+    a = b + 1;
+  }
+  for (const p of S.drops) {
+    const dd = p.e * cos(p.ph), ry = p.R * (1 + dd), rx = p.R / sqrt(1 + dd);
+    const k0 = max(0, Math.ceil(2 * (p.y - ry) - 0.5)), k1 = min(2 * H - 1, floor(2 * (p.y + ry) - 0.5));
+    for (let k = k0; k <= k1; k++) {
+      const w = ((k + 0.5) / 2 - p.y) / ry, hh = rx * sqrt(max(0, 1 - w * w));
+      if (hh > PH[k]) {
+        PH[k] = hh;
+        PX[k] = p.x;
+        PD[k] = (-rx * w) / ry / max(0.15, sqrt(max(0, 1 - w * w)));
+      }
+    }
+  }
+  // Smooth the radius along the thread so the light runs over it without
+  // steps, and take the slope from the smoothed radius.
+  const { PT } = S;
+  for (let pass = 0; pass < 2; pass++) {
+    for (let k = 0; k < 2 * H; k++) {
+      const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];
+      PT[k] = PH[k] > 0 && a > 0 && b > 0 ? 0.25 * a + 0.5 * PH[k] + 0.25 * b : PH[k];
+    }
+    PH.set(PT);
+  }
+  for (let k = 0; k < 2 * H; k++) {
+    const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];
+    if (PH[k] > 0 && a > 0 && b > 0) PD[k] = cl(b - a, -4, 4);
+  }
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S || !S.begun) return;
+  profile(S);
+  const { PH, PX, PD, ser, wall, eta } = S;
+  const hue = S.hue + H0;
+  hsv(hue, 0.85, 1, ser);
+  // Orange and yellow go brown and olive on a dim wall: there the wall is
+  // greyed and lifted and the pool glows with the serum's own colour.
+  const wu = (hue - floor(hue) - 0.13) / 0.19, wm = wu * wu < 1 ? (1 - wu * wu) ** 2 : 0;
+  hsv(hue, 0.14 - 0.1 * wm, 1 + 0.18 * wm, wall);
+  const [sr, sg, sb] = ser, [wr, wg, wb] = wall;
+  // Absorption per LED of path through the serum, per channel.
+  const ar = 0.3 * (1 - sr), ag = 0.3 * (1 - sg), ab = 0.3 * (1 - sb);
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      let R = 0, G = 0, B = 0;
+      const px = x + 0.5, e0 = eta[max(0, x - 1)], e1 = eta[x], e2 = eta[min(W - 1, x + 1)];
+      const surf = S.lvl + 0.25 * e0 + 0.5 * e1 + 0.25 * e2, slope = (e2 - e0) / 2, pf = cl(y + 1 - surf, 0, 1);
+      if (pf < 1)
+        for (let sub = 0; sub < 2; sub++) {
+          const k = 2 * y + sub, zz = (k + 0.5) / 2, wv = lit(px, zz);
+          let r = wv * wr, g = wv * wg, b = wv * wb;
+          const hh = PH[k], dx = px - PX[k], cov = cl(hh - abs(dx) + 0.5, 0, 1);
+          if (cov > 0 && hh > 0.2) {
+            // Clear serum: the wall behind seen magnified through it and
+            // tinted by the path the light takes, a darker rim, an inner
+            // glow on the far side, a highlight down the near side.
+            const uu = cl(dx / hh, -0.97, 0.97), c = sqrt(1 - uu * uu), hz = PD[k], nn = 1 / sqrt(1 + hz * hz);
+            const nx = uu * nn, ny = c * nn, nz = -hz * nn;
+            const lv = 1.35 * lit(PX[k] + dx * 0.55, zz + 0.45 * hh * hz), path = 2 * hh * c + 0.5;
+            const rim = 1 - 0.5 * exp(-c * 4), glow = 0.7 * max(0, 0.55 * nx + 0.25 * ny + 0.55 * nz) ** 2;
+            const sp = max(0, -0.4 * nx + 0.82 * ny - 0.42 * nz), spec = 0.95 * sp ** 40 + 0.12 * sp ** 6;
+            r += (lv * wr * exp(-ar * path) * rim + sr * glow + spec - r) * cov;
+            g += (lv * wg * exp(-ag * path) * rim + sg * glow + spec - g) * cov;
+            b += (lv * wb * exp(-ab * path) * rim + sb * glow + spec - b) * cov;
+          }
+          R += r / 2;
+          G += g / 2;
+          B += b / 2;
+        }
+      if (pf > 0) {
+        // The pool: the wall seen through it, a little lower and deeper in
+        // colour further down, lit from within, a dark band under the surface.
+        const top = max(0, y + 0.5 - surf), wv = lit(px, surf + top * 0.75) * 1.15, path = 3 + 0.3 * top;
+        const dk = 1 - 0.35 * exp(-((top - 1.4) ** 2)), gl = 0.2 + 0.06 * wm;
+        R += ((wv * wr * exp(-0.4 * ar * path) + gl * sr) * dk - R) * pf;
+        G += ((wv * wg * exp(-0.4 * ag * path) + gl * sg) * dk - G) * pf;
+        B += ((wv * wb * exp(-0.4 * ab * path) + gl * sb) * dk - B) * pf;
+      }
+      // The bright line of the surface, brighter where a ripple tilts it to the light.
+      const ln = exp(-(((y + 0.5 - surf) / 0.55) ** 2)) * (0.5 + cl(-slope * 0.8, -0.35, 0.5));
+      R += ln;
+      G += ln;
+      B += ln;
+      display.setPixel(x, y, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));
+    }
+}
+
+// The lit wall, as a level: pale, light from the upper left, soft vertical
+// flutes 8 LEDs apart for the beads to magnify.
+const lit = (x, z) => (0.4 + 0.24 * (1 - x / 90 - z / 300)) * (1 + 0.07 * cos((2 * PI * x) / 8));
diff --git a/incoming/pattern-study/patterns/steiner-chain.js b/incoming/pattern-study/patterns/steiner-chain.js
new file mode 100644
index 000000000..363302177
--- /dev/null
+++ b/incoming/pattern-study/patterns/steiner-chain.js
@@ -0,0 +1,257 @@
+// ===== Patternflow pattern =====
+// Title:   Steiner Chain
+// Family:  geometry
+// Idea:    A ring of circles each touching its two neighbours and the two circles that hold it turns in the top square, rigid and equal, while the bottom square shows the same ring inverted in a point outside it, the circles swelling as they pass the wide side and shrinking through the narrow one, each in its own colour in both squares and every touch lit, so wherever the chain starts it always closes.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: Steiner's porism (Jakob Steiner, 1826), shown through circle inversion, pattern round 39
+// Round:   39
+// ===============================
+// @matrix 64x128
+// @knobs Circles=6..12, Speed=0.2..3, Turns=1..4, Offset=0..1
+//
+// Knob 1: Circles. How many circles the chain holds, 6 to 12, each in its own colour, hues spaced evenly round the wheel. At 6 the inner circle is a third of the outer one across and the chain circles are 10 LEDs in radius in the top square; at 12 the inner circle is 0.59 of the outer and the circles are beads 6.2 LEDs in radius.
+// Knob 2: Speed. At 2 the chain turns once in 30 seconds, and a fresh start lays it circle by circle in 1.5 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.
+// Knob 3: Turns. How many times the chain winds round before it closes, 1 to 4, at most (Circles - 1) / 2. Neighbours then stand 360 times Turns over Circles degrees apart, sin(180 Turns / Circles) = (1 - inner) / (1 + inner) fixes the inner circle, and the circles overlap in a rosette round it: 7 circles at 2 turns leave it 0.12 of the outer one across, at 3 turns 0.013. Where Turns and Circles share a factor the circles fall into that many chains, each closed: 6 circles at 2 turns are two chains of 3.
+// Knob 4: Offset. How near the chain the point of the inversion sits, and with it how far off-centre the inner circle of the bottom square stands: 12 LEDs above the centre at the start, where a circle passing the wide side at the bottom is 3.4 times as wide as one passing the narrow side; 3 times at 0, and 24 times at 1, where the inner circle stands 25 LEDs up, nearly touching the outer one, and the circles squeezing past it are beads 2 LEDs across.
+// Buttons: K1 tap lays the chain again from where it stands, one circle at a time, and the last one closes the gap with a flash.
+
+const W = 64, H = 128;
+const { floor, min, max, sqrt, sin, cos, exp, round, PI } = Math;
+const TAU = 2 * PI;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+// Each square's centre and the outer circle's radius, in LEDs; pixel centres at x + 0.5.
+const CX = 32, CY = [32, 96], RPX = 30.4;
+// The inversion point lies on this ray from the centre of the concentric
+// picture, above it. A point near the inversion point images far away, so
+// the wide side of the bottom square is at the bottom.
+const PSI = -PI / 2;
+// Seconds per turn of the chain at Speed 2, and to lay it.
+const TURN = 30, LAY = 1.5;
+// Opening hue of circle 0.
+const H0 = 0.55;
+
+function hsv(h, s, v, out) {
+  h = (h - floor(h)) * 6;
+  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
+  out[0] = [v, q, p, p, t, v][i];
+  out[1] = [t, v, v, q, p, p][i];
+  out[2] = [p, p, t, v, v, q][i];
+}
+
+const gcd = (a, b) => (b ? gcd(b, a % b) : a);
+
+export function setup(params) {
+  params.s = {
+    n: 6, m: 1, q: 3.4, phi: 0, lay: 0, flash: [], begun: false,
+    // Per square: circles as x, y, r (the outer, the inner, then the chain in
+    // the order it is laid); the touches as x, y, and which two circles meet.
+    C: [new Float64Array(3 * 14), new Float64Array(3 * 14)],
+    T: [new Float64Array(2 * 40), new Float64Array(2 * 40)], nt: 0, tri: [],
+    A: new Float32Array(3 * W * H), col: [0, 0, 0], fil: [0, 0, 0],
+  };
+}
+
+// The inversion point's distance a > 1 from the centre, in units of the
+// outer radius, at which a chain circle passing the near side images q times
+// as wide as one passing the far side: the gaps between the two circles on
+// the line through the point image to (1 - rho) / ((a - 1)(a - rho)) and
+// (1 - rho) / ((a + 1)(a + rho)), and their ratio is q.
+function dist(q, rho) {
+  const A = q - 1, B = (q + 1) * (1 + rho), C = (q - 1) * rho;
+  return (B + sqrt(B * B - 4 * A * C)) / (2 * A);
+}
+
+// The chain at start angle phi: circle i of sub-chain j, step k, centred on
+// the ring at angle phi + 2 pi (k m + j) / n. Square 0 is the concentric
+// picture; square 1 its image in the unit circle about the point a, scaled
+// so the outer circle's image is RPX across and centred.
+function geometry(S) {
+  const { n, m } = S, s = sin((PI * m) / n), rho = (1 - s) / (1 + s), r = (1 - rho) / 2, d = (1 + rho) / 2;
+  const g = gcd(n, m), len = n / g, a = dist(S.q, rho), ax = a * cos(PSI), ay = a * sin(PSI);
+  const inv = (x, y) => {
+    const u = x - ax, v = y - ay, k = 1 / (u * u + v * v);
+    return [ax + u * k, ay + v * k];
+  };
+  const invC = (x, y, rr) => {
+    const u = x - ax, v = y - ay, D = u * u + v * v - rr * rr;
+    return [ax + u / D, ay + v / D, rr / Math.abs(D)];
+  };
+  // Model circles: 0 the outer, 1 the inner, then the chain.
+  const M = [[0, 0, 1], [0, 0, rho]];
+  for (let j = 0; j < g; j++)
+    for (let k = 0; k < len; k++) {
+      const t = S.phi + (TAU * (k * m + j)) / n;
+      M.push([d * cos(t), d * sin(t), r]);
+    }
+  const O = invC(0, 0, 1), sc = RPX / O[2];
+  const C0 = S.C[0], C1 = S.C[1];
+  for (let i = 0; i < M.length; i++) {
+    const [x, y, rr] = M[i], [X, Y, R] = invC(x, y, rr);
+    C0[3 * i] = CX + RPX * x;
+    C0[3 * i + 1] = CY[0] + RPX * y;
+    C0[3 * i + 2] = RPX * rr;
+    C1[3 * i] = CX + sc * (X - O[0]);
+    C1[3 * i + 1] = CY[1] + sc * (Y - O[1]);
+    C1[3 * i + 2] = sc * R;
+  }
+  // The touches: each circle with the outer and the inner, and each with
+  // the next in its sub-chain, the last with the first.
+  let nt = 0;
+  const T0 = S.T[0], T1 = S.T[1], tri = [];
+  const put = (x, y, a, b) => {
+    const [X, Y] = inv(x, y);
+    T0[2 * nt] = CX + RPX * x;
+    T0[2 * nt + 1] = CY[0] + RPX * y;
+    T1[2 * nt] = CX + sc * (X - O[0]);
+    T1[2 * nt + 1] = CY[1] + sc * (Y - O[1]);
+    tri.push([a, b]);
+    nt++;
+  };
+  for (let j = 0; j < g; j++)
+    for (let k = 0; k < len; k++) {
+      const i = 2 + j * len + k, nx = 2 + j * len + ((k + 1) % len);
+      const [x, y] = M[i], [x2, y2] = M[nx], ux = x / d, uy = y / d;
+      put(ux, uy, i, 0);
+      put(rho * ux, rho * uy, i, 1);
+      put((x + x2) / 2, (y + y2) / 2, i, nx);
+    }
+  S.nt = nt;
+  S.tri = tri;
+  S.model = M;
+  S.rho = rho;
+  S.a = a;
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [6, 2, 1, 0.06], dd = cl(dt || 0, 0, 0.1);
+  const n = round(cl(k[0], 6, 12)), rate = cl(k[1], 0.2, 3) / 2;
+  const m = max(1, min(round(cl(k[2], 1, 4)), floor((n - 1) / 2)));
+  S.q = 3 * 8 ** cl(k[3], 0, 1);
+  if (n !== S.n || m !== S.m) {
+    S.n = n;
+    S.m = m;
+    S.flash = [];
+  }
+  if (!S.begun) {
+    S.begun = true;
+    S.lay = 0;
+  }
+  if (input.btnPressed && input.btnPressed[0]) {
+    S.lay = 0;
+    S.flash = [];
+  }
+  const wasLaid = S.lay >= LAY;
+  S.lay += dd * rate;
+  S.phi += (dd * rate * TAU) / TURN;
+  if (!wasLaid && S.lay >= LAY) S.flash.push(0);
+  for (let i = 0; i < S.flash.length; i++) S.flash[i] += dd * rate;
+  S.flash = S.flash.filter((f) => f < 0.8);
+  geometry(S);
+}
+
+// How far circle i is laid, 0..1: they go down one after another.
+function shown(S, i) {
+  if (i < 2) return 1;
+  return cl(((S.lay / LAY) * S.n - (i - 2)) * 1.5, 0, 1);
+}
+
+// Orange and yellow go brown and olive dimmed, so their discs are lit
+// brighter inside and paler.
+const warm = (h) => {
+  const u = (h - floor(h) - 0.13) / 0.14;
+  return u * u < 1 ? (1 - u * u) ** 2 : 0;
+};
+
+function disc(A, x0, y0, r, w, c, f, lift, lo, hi) {
+  const ext = r + 2, rr = max(r, 0.35);
+  for (let y = max(lo, floor(y0 - ext)); y <= min(hi, floor(y0 + ext)); y++) {
+    const dy = y + 0.5 - y0;
+    for (let x = max(0, floor(x0 - ext)); x <= min(W - 1, floor(x0 + ext)); x++) {
+      const dx = x + 0.5 - x0, D = sqrt(dx * dx + dy * dy);
+      if (D > ext) continue;
+      const u = min(1, D / rr), fill = cl(rr - D + 0.5, 0, 1), e = (D - rr) / 0.7;
+      // A soft lit disc: dim in the middle, rising toward a bright rim, a
+      // glow on the upper left where the light comes from.
+      const hx = dx + 0.42 * rr, hy = dy + 0.42 * rr, glow = exp(-(hx * hx + hy * hy) / (0.22 * rr * rr + 0.6));
+      const vf = w * fill * (0.2 + 0.28 * u * u + 0.32 * glow) * lift;
+      let v = 0.85 * exp(-e * e);
+      if (r < 1.5) v += (1.5 - r) * 0.5 * fill;
+      v *= w;
+      // Screen blend, so where wound chains overlap the lenses show without
+      // washing out to white.
+      const p = 3 * (y * W + x);
+      A[p] = 1 - (1 - A[p]) * (1 - min(1, c[0] * v + f[0] * vf));
+      A[p + 1] = 1 - (1 - A[p + 1]) * (1 - min(1, c[1] * v + f[1] * vf));
+      A[p + 2] = 1 - (1 - A[p + 2]) * (1 - min(1, c[2] * v + f[2] * vf));
+    }
+  }
+}
+
+function ring(A, x0, y0, r, lv, lo, hi) {
+  const ext = r + 2;
+  for (let y = max(lo, floor(y0 - ext)); y <= min(hi, floor(y0 + ext)); y++) {
+    const dy = y + 0.5 - y0;
+    for (let x = max(0, floor(x0 - ext)); x <= min(W - 1, floor(x0 + ext)); x++) {
+      const dx = x + 0.5 - x0, e = (sqrt(dx * dx + dy * dy) - r) / 0.6;
+      if (e > 4 || e < -4) continue;
+      const v = lv * exp(-e * e), p = 3 * (y * W + x);
+      A[p] += v;
+      A[p + 1] += v;
+      A[p + 2] += v;
+    }
+  }
+}
+
+function dot(A, x0, y0, s, lv, lo, hi) {
+  const ext = 3 * s;
+  for (let y = max(lo, floor(y0 - ext)); y <= min(hi, floor(y0 + ext)); y++) {
+    const dy = y + 0.5 - y0;
+    for (let x = max(0, floor(x0 - ext)); x <= min(W - 1, floor(x0 + ext)); x++) {
+      const dx = x + 0.5 - x0, v = lv * exp(-(dx * dx + dy * dy) / (2 * s * s)), p = 3 * (y * W + x);
+      A[p] += v;
+      A[p + 1] += v;
+      A[p + 2] += v;
+    }
+  }
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S || !S.begun) return;
+  const { A, col, fil, n } = S;
+  A.fill(0);
+  for (let sq = 0; sq < 2; sq++) {
+    const C = S.C[sq], T = S.T[sq], lo = sq * 64, hi = lo + 63;
+    ring(A, C[0], C[1], C[2], 0.5, lo, hi);
+    ring(A, C[3], C[4], C[5], 0.5, lo, hi);
+    for (let i = 2; i < n + 2; i++) {
+      const w = shown(S, i);
+      if (w <= 0) continue;
+      const h = H0 + (i - 2) / n, wm = warm(h);
+      hsv(h, 0.8, 1, col);
+      hsv(h, 0.74 - 0.3 * wm, 1, fil);
+      // A wound chain stacks its discs Turns deep, so each is filled fainter.
+      disc(A, C[3 * i], C[3 * i + 1], C[3 * i + 2], w, col, fil, (1 + 0.9 * wm) * S.m ** -0.7, lo, hi);
+    }
+    // Every touch, lit once both its circles are laid; small ones smaller.
+    for (let t = 0; t < S.nt; t++) {
+      const [a, b] = S.tri[t], w = min(shown(S, a), shown(S, b));
+      if (w < 1) continue;
+      const rr = min(C[3 * a + 2], b > 1 ? C[3 * b + 2] : 99);
+      dot(A, T[2 * t], T[2 * t + 1], cl(0.25 * rr, 0.45, 0.8), 0.75 / S.m, lo, hi);
+    }
+    // The closing: the touch between the last circle laid and the first.
+    for (const f of S.flash) {
+      const len = n / gcd(n, S.m), i = 2 + len - 1, t = 3 * (i - 2) + 2, e = 1 - f / 0.8;
+      dot(A, T[2 * t], T[2 * t + 1], 1.4 + 2.5 * f, 1.6 * e * e, lo, hi);
+    }
+  }
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const p = 3 * (y * W + x);
+      display.setPixel(x, y, round(255 * min(1, A[p])), round(255 * min(1, A[p + 1])), round(255 * min(1, A[p + 2])));
+    }
+}

From e7d21e59100af7a2960ea3ffdabe99366adcb72e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 24 Oct 2026 22:48:26 +0000
Subject: [PATCH 07/10] =?UTF-8?q?incoming:=20README=20=EC=97=90=2039?=
 =?UTF-8?q?=ED=8C=90=20=ED=91=9C=EC=99=80=20=EC=A0=88,=20=EB=8B=A4?=
 =?UTF-8?q?=EC=9D=8C=20=ED=8C=90=20=EA=B0=90=EC=9D=84=20=EB=8D=94=ED=95=9C?=
 =?UTF-8?q?=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WSruBmW95rasfF2WmM8DZ7
---
 incoming/pattern-study/README.md | 83 +++++++++++++++++++++++++++++---
 1 file changed, 76 insertions(+), 7 deletions(-)

diff --git a/incoming/pattern-study/README.md b/incoming/pattern-study/README.md
index 917cd6ce3..0df7b2757 100644
--- a/incoming/pattern-study/README.md
+++ b/incoming/pattern-study/README.md
@@ -1,6 +1,6 @@
 # 패턴 연구 2026-10
 
-새 패턴 288개를 쉰다섯 갈래로 나눠 만들었어요. 1판에서 열세 갈래로 23개를 만들고, 2판에서 1판에 없던 아홉 갈래로 16개를, 3판에서 하나를, 4판에서 새 갈래인 직물로 하나를 더했어요. 5판은 새 패턴 없이 1판의 Euclid Pulse 를 다시 짰고, 6판은 세운 패널의 128줄을 위아래로 다 쓰는 패턴 하나를 더했어요. 7판은 또렷한 모양이 멀리 흘러가는 지도 칸에 패턴 하나를 더했어요. 8판은 새 갈래인 기계로 하나를 더했어요. 9판은 새 패턴 없이 1판의 Sprout 을 다시 짰어요. 10판은 세운 패널을 떨어지는 블록의 우물로 쓰는 패턴 하나를 더했어요. 11판은 여러 색이 꽤 멀리 흘러가는 지도 칸에 패턴 하나를 더했어요. 12판은 새 갈래인 천체로 하나를 더했어요. 13판은 새 패턴 없이 1판의 Glyph Rain 을 다시 짰어요. 14판은 절차가 바뀌기 전에 띄운 바퀴라서, 세운 패널의 높이를 다 떨어지는 폭포 하나를 더했어요. 15판은 바뀐 절차의 첫 판이라 열 갈래에 새 패턴을 하나씩, 모두 열 개를 더했어요. 도시와 음악 갈래는 그때 새로 열었어요. 16판도 열 갈래에 하나씩 열 개를 더했고, 바다와 곤충 갈래를 새로 열었어요. 17판도 열 갈래에 하나씩 열 개를 더했고, 전자 회로와 장난감 갈래를 새로 열었어요. 18판도 열 갈래에 하나씩 열 개를 더했고, 유리와 광물·결정, 놀이공원 갈래를 새로 열었어요. 19판도 열 갈래에 하나씩 열 개를 더했고, 부엌과 버섯·균사 갈래를 새로 열었어요. 20판도 열 갈래에 하나씩 열 개를 더했고, 새와 화학·실험 갈래를 새로 열었어요. 21판도 열 갈래에 하나씩 열 개를 더했고, 종이와 운동·경기 갈래를 새로 열었어요. 22판도 열 갈래에 하나씩 열 개를 더했고, 몸과 비행 갈래를 새로 열었어요. 23판도 열 갈래에 하나씩 열 개를 더했고, 무대·공연과 짐승 갈래를 새로 열었어요. 24판도 열 갈래에 하나씩 열 개를 더했고, 공사·건설과 도자기 갈래를 새로 열었어요. 25판도 열 갈래에 하나씩 열 개를 더했고, 농사·밭과 화산 갈래를 새로 열었어요. 26판도 열 갈래에 하나씩 열 개를 더했고, 얼음·극지와 미생물 갈래를 새로 열었어요. 27판도 열 갈래에 하나씩 열 개를 더했고, 철도와 필름·영화 갈래를 새로 열었어요. 28판은 주제 표가 수학 쪽으로 바뀐 첫 판이라 이름 있는 수학 대상 열 개를 열 갈래에 하나씩 더했고, 수론 갈래를 새로 열었어요. 29판은 주제 표가 수학 여섯과 화장품 팝업 넷으로 나뉜 첫 판이라, 이름 있는 수학 대상 여섯과 화장품 매장 벽에 틀 질감 넷을 더했고, 위상·매듭과 화장품 팝업 갈래를 새로 열었어요. 30판도 같은 표로 돌아서 이름 있는 수학 대상 여섯을 여섯 갈래에 하나씩 더하고, 팝업 매장의 LED 벽에 틀 질감 넷을 화장품 팝업 갈래에 더했어요. 31판도 같은 표로 돌아서 이름 있는 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했고, 새 갈래는 열지 않았어요. 32판도 같은 표로 돌아서 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽의 질감 넷을 화장품 팝업 갈래에 더했어요. 33판도 같은 표로 돌아서 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. 34판도 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. 35판도 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. 36판도 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. 37판도 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. 38판도 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. [index.html](index.html) 을 브라우저로 열면 전부 한 장에서 돌아가요. 맨 위 지도에서 점을 누르면 그 패턴으로 가고, 카드의 슬라이더가 노브 넷이에요. 마음에 드는 것은 「코드 복사」로 가져가 Pattern Lab 의 CODE 칸에 붙여 넣으면 같은 그림이 나와요. 페이지는 파일 하나라서 바깥에서 받아 오는 것이 없어요.
+새 패턴 298개를 쉰다섯 갈래로 나눠 만들었어요. 1판에서 열세 갈래로 23개를 만들고, 2판에서 1판에 없던 아홉 갈래로 16개를, 3판에서 하나를, 4판에서 새 갈래인 직물로 하나를 더했어요. 5판은 새 패턴 없이 1판의 Euclid Pulse 를 다시 짰고, 6판은 세운 패널의 128줄을 위아래로 다 쓰는 패턴 하나를 더했어요. 7판은 또렷한 모양이 멀리 흘러가는 지도 칸에 패턴 하나를 더했어요. 8판은 새 갈래인 기계로 하나를 더했어요. 9판은 새 패턴 없이 1판의 Sprout 을 다시 짰어요. 10판은 세운 패널을 떨어지는 블록의 우물로 쓰는 패턴 하나를 더했어요. 11판은 여러 색이 꽤 멀리 흘러가는 지도 칸에 패턴 하나를 더했어요. 12판은 새 갈래인 천체로 하나를 더했어요. 13판은 새 패턴 없이 1판의 Glyph Rain 을 다시 짰어요. 14판은 절차가 바뀌기 전에 띄운 바퀴라서, 세운 패널의 높이를 다 떨어지는 폭포 하나를 더했어요. 15판은 바뀐 절차의 첫 판이라 열 갈래에 새 패턴을 하나씩, 모두 열 개를 더했어요. 도시와 음악 갈래는 그때 새로 열었어요. 16판도 열 갈래에 하나씩 열 개를 더했고, 바다와 곤충 갈래를 새로 열었어요. 17판도 열 갈래에 하나씩 열 개를 더했고, 전자 회로와 장난감 갈래를 새로 열었어요. 18판도 열 갈래에 하나씩 열 개를 더했고, 유리와 광물·결정, 놀이공원 갈래를 새로 열었어요. 19판도 열 갈래에 하나씩 열 개를 더했고, 부엌과 버섯·균사 갈래를 새로 열었어요. 20판도 열 갈래에 하나씩 열 개를 더했고, 새와 화학·실험 갈래를 새로 열었어요. 21판도 열 갈래에 하나씩 열 개를 더했고, 종이와 운동·경기 갈래를 새로 열었어요. 22판도 열 갈래에 하나씩 열 개를 더했고, 몸과 비행 갈래를 새로 열었어요. 23판도 열 갈래에 하나씩 열 개를 더했고, 무대·공연과 짐승 갈래를 새로 열었어요. 24판도 열 갈래에 하나씩 열 개를 더했고, 공사·건설과 도자기 갈래를 새로 열었어요. 25판도 열 갈래에 하나씩 열 개를 더했고, 농사·밭과 화산 갈래를 새로 열었어요. 26판도 열 갈래에 하나씩 열 개를 더했고, 얼음·극지와 미생물 갈래를 새로 열었어요. 27판도 열 갈래에 하나씩 열 개를 더했고, 철도와 필름·영화 갈래를 새로 열었어요. 28판은 주제 표가 수학 쪽으로 바뀐 첫 판이라 이름 있는 수학 대상 열 개를 열 갈래에 하나씩 더했고, 수론 갈래를 새로 열었어요. 29판은 주제 표가 수학 여섯과 화장품 팝업 넷으로 나뉜 첫 판이라, 이름 있는 수학 대상 여섯과 화장품 매장 벽에 틀 질감 넷을 더했고, 위상·매듭과 화장품 팝업 갈래를 새로 열었어요. 30판도 같은 표로 돌아서 이름 있는 수학 대상 여섯을 여섯 갈래에 하나씩 더하고, 팝업 매장의 LED 벽에 틀 질감 넷을 화장품 팝업 갈래에 더했어요. 31판도 같은 표로 돌아서 이름 있는 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했고, 새 갈래는 열지 않았어요. 32판도 같은 표로 돌아서 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽의 질감 넷을 화장품 팝업 갈래에 더했어요. 33판도 같은 표로 돌아서 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. 34판도 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. 35판도 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. 36판도 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. 37판도 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. 38판도 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. 39판도 수학 대상 여섯을 여섯 갈래에 하나씩, 매장 벽 질감 넷을 화장품 팝업 갈래에 더했어요. [index.html](index.html) 을 브라우저로 열면 전부 한 장에서 돌아가요. 맨 위 지도에서 점을 누르면 그 패턴으로 가고, 카드의 슬라이더가 노브 넷이에요. 마음에 드는 것은 「코드 복사」로 가져가 Pattern Lab 의 CODE 칸에 붙여 넣으면 같은 그림이 나와요. 페이지는 파일 하나라서 바깥에서 받아 오는 것이 없어요.
 
 패널은 세로로 서요. 64 LED 너비에 128 LED 높이가 기본이라서 모든 패턴의 머리에 `@matrix 64x128` 이 있어요. 레포의 패널 설정은 그대로예요. `shared/constants.json` 의 `PANEL_GEOM_DEFAULT` 는 `128x64_SINGLE` 이고, 패턴이 가로세로를 바꾼 판을 적으면 펌웨어의 `firmware/patternflow/src/core_canvas.h` 가 90도 돌려 패널을 꽉 채워요. 1판 23개는 처음에 가로 128×64 로 만들었다가 2판에서 세로로 다시 짰어요.
 
@@ -474,6 +474,21 @@
 | [Serum Fingers](patterns/serum-fingers.js) | 화장품 팝업 | 유리판 두 장 사이 진한 크림에 묽은 세럼을 밑에서 밀어 넣으면, 둥근 손가락이 부풀고 갈라지며 위로 다투어 올라가요. LED 는 세럼이 닿을 때 한 번만 바뀌고, 한 손가락이 꼭대기에 닿으면 크림이 가는 손가락부터 다시 덮고 새로 밀어요. K3 은 표면 장력을 낮춰 굵은 손가락 셋을 가는 손가락 열둘로 바꾸고, K1 을 누르면 크림이 바로 다시 덮어요. |
 | [Sperner's Lemma](patterns/sperner-lemma.js) | 위상·매듭 | 세운 삼각형을 작은 방으로 나누고, 꼭짓점마다 연속 사상이 가장 많이 줄이는 좌표의 번호를 붙여 파랑, 빨강, 초록 영토로 칠해요. 흰 걸음이 밑변의 1-2 문으로 들어와 방마다 다른 문으로 나가다가 세 번호를 다 가진 무지개 방에서 멈추고, 그 방은 사상의 고정점 위에 있어요. K3 은 사상을 고정점 둘레로 비틀어 영토 경계를 감고, K4 는 고정점을 늘려 무지개 방을 홀수 개로 늘려요. |
 
+### 39판
+
+| 패턴 | 갈래 | 한 줄 |
+| --- | --- | --- |
+| [Blotting Paper](patterns/blotting-paper.js) | 화장품 팝업 | 결이 비치는 얇은 기름종이가 살에 눌린 자리마다 피지를 빨아들여, 반투명한 점이 결을 따라 √t 로 번지고 합쳐져요. 젖은 자리는 뒤 벽의 빛이 비쳐 밝고 짙은 색이 되고, LED 마다 한 번만 밝아져요. 종이가 거의 다 비치면 새 종이가 내려와 덮어요. |
+| [Borsuk-Ulam](patterns/borsuk-ulam.js) | 위상·매듭 | 기온과 기압이 천천히 바뀌는 지구가 돌아요. 위 원판은 앞 반구, 아래 원판은 뒤 반구라서 −x 가 x 와 같은 자리에 그려지고, 대척점과 기온이 같은 흰 선과 기압이 같은 자홍 선이 두 원판의 같은 자리를 지나요. 두 선이 만나는 금색 점이 보르수크-울람 정리가 늘 있다고 하는 대척점 쌍이에요. |
+| [Brachistochrone](patterns/brachistochrone.js) | 물리·스프링 | 왼쪽 위 한 점에서 구슬 다섯이 직선, 갈릴레이의 원호, 포물선, 깊이 떨어지는 길, 사이클로이드를 타고 함께 미끄러져요. 직선보다 긴 길을 타는 사이클로이드의 구슬이 먼저 닿고, 구슬이 지금까지 닿을 수 있는 점들의 앞면이 고리를 남기며 패널 아래까지 퍼져요. 한 판 걸러 사이클로이드의 여러 높이에서 놓은 구슬이 바닥에 함께 닿아요. |
+| [Crackle Polish](patterns/crackle-polish.js) | 화장품 팝업 | 형광 분홍 바탕 위의 검은 크래클 탑코트가 마르며 갈라져요. 긴 금이 먼저 패널을 가로지르고, 짧은 금이 옛 금에서 직각으로 나와 다른 금에 직각으로 닿고, 틈이 벌어지며 조각이 광택 테를 두른 구슬이 돼요. 다 갈라지면 새 코트를 위에서 칠해 내려와요. |
+| [Explicit Formula](patterns/explicit-formula.js) | 수론 | 소수 거듭제곱마다 log p 씩 뛰는 계단 ψ(x) 를 제타 함수의 영점으로 다시 지어요. x 가 아래로, ψ 가 옆으로 가고, 영점이 한 쌍씩 더해질 때마다 매끈한 선 x 에 물결이 붙다가 계단으로 날카로워지고, 제자리를 찾은 계단 띠부터 켜져요. 오른쪽 끝 세 열이 임계선이라 더해진 영점이 제 높이에서 켜져요. |
+| [Isospectral Drums](patterns/isospectral-drums.js) | 물결·간섭 | 모양이 다른 북 두 개가 위아래에서 같은 높이의 소리로 울려요. 반정사각형 일곱 장으로 지은 고든, 웹, 월퍼트의 북이라 고유값이 하나도 다르지 않고, 가운데 띠의 눈금이 그 고유값이에요. 북마다 제 노드선을 그리며 같은 박자로 떨어요. |
+| [Kingman Coalescent](patterns/kingman-coalescent.js) | 데이터 그림 | 64개체 모런 집단이 앞으로 살고, 패널은 지금 살아 있는 64개체의 가계도예요. 맨 아랫줄이 지금, 위로 갈수록 과거이고, 같은 조상의 자손이 붙어 서도록 열을 줄 세워서 좁은 블록이 위로 갈수록 합쳐지는 불꽃 그림이 돼요. 마지막 두 갈래가 만나는 데 걸리는 시간이 전체의 절반쯤이라 긴 이음매 하나가 위쪽을 가르고, 한 집안이 사라지면 공통 조상이 앞으로 뛰어요. |
+| [Serum Drip](patterns/serum-drip.js) | 화장품 팝업 | 위 끝에서 흘러드는 금빛 세럼 실이 목이 졸리고 부풀어 구슬을 꿴 줄이 되고, 가는 실이 끊기며 큰 방울과 작은 위성 방울이 바닥의 웅덩이로 떨어져요. 세로 홈이 진 벽이 구슬마다 크게 비쳐요. |
+| [Soap Film](patterns/soap-film.js) | 화장품 팝업 | 고리에 건 세안 거품의 막이 세로로 서서 빠져요. 위로 갈수록 얇아서 뉴턴의 색 띠가 가로로 쌓여 가라앉고, 옆에서 얇은 막이 기둥으로 올라오고, 위에서 검은 막이 내려와요. 다 얇아지면 막이 터지고 새 막이 아래에서 올라와요. |
+| [Steiner Chain](patterns/steiner-chain.js) | 기하·대칭 | 위에서는 고리 안의 같은 원 여섯이 통째로 돌고, 아래는 그 사슬을 반전한 그림이라 원이 넓은 쪽을 지나며 부풀고 좁은 쪽에서 줄어요. 원마다 위아래가 같은 색이고, 어디서 시작해도 사슬이 닫히는 슈타이너의 포리즘이 접점의 흰 불꽃으로 보여요. |
+
 ## 1판 갈래마다
 
 노브 넷의 자리는 갈래가 달라도 거의 같아요. K1 은 색이고 K2 는 빠르기예요. K3 은 모양을 바꾸고, K4 는 그 갈래만의 손잡이예요. 그래서 처음 보는 패턴도 K1 과 K2 는 손이 먼저 알아요.
@@ -1844,6 +1859,50 @@ E8 의 근 240개를 고셋의 4₂₁ 다면체 꼭짓점으로 그렸어요. 
 
 주제 1 과 6 으로 사프만-테일러의 손가락을 세웠고, 겨눈 칸은 Day and Night 혼자이던 움직임 × 모양 바뀜 1,3 이에요. 움직임 0.061 아래에 모양 바뀜 0.217~0.331 인 칸이에요. 처음 판은 바닥 가운데 한 점에서 밀어 넣었는데 표면 장력이 세서 둥근 산 하나만 자랐어요(움직임 0.031, 모양 바뀜 0.186). 장력을 줄이자 가는 손가락 하나가 8초 전에 꼭대기에 닿아 지우기가 잰 구간 안에 들어왔어요(모양 바뀜 0.084). 장력을 압력장에 넣는 셈은 퍼져서, 곡률을 성장 속도에 곱하는 꼴로 바꾸고 바닥 전체를 틈으로 바꾸자 둥근 손가락 여럿이 다투며 올라갔어요. LED 마다 한 번 오르기만 하면 모양 바뀜은 침범한 넓이 곱하기 밝기 차이이고, 움직임은 그 6분의 1 이에요. 2초에서 8초 사이에 오른 합이 0.251, 내린 합이 0.0000 이었어요. 그래서 모양은 두고 밀어 넣는 양을 1초에 580 LED 로 정하고, 크림을 밝기 71 의 회색으로 낮춰 세럼과 0.7 쯤 벌려서 움직임 0.042, 모양 바뀜 0.251 로 칸 가운데에 맞췄어요. 씨앗 없이 12번 돌려도 손가락이 꼭대기에 닿는 때는 8.8초에서 11.3초여서 지우기는 늘 10초 뒤에 시작해요.
 
+## 39판
+
+39판도 주제 5 「낯선 수학」 여섯과 주제 6 「화장품 브랜드 팝업」 넷이에요. 같이 돈 37판(#231)은 이 판 도중에 dev 에 머지됐어요. 37판이 쓴 여섯 갈래(알고리즘, 공간·원근, 시뮬레이션, 입자, 보로노이·셀, 노이즈·흐름)를 빼고, 수학 여섯을 물결·간섭, 수론, 물리·스프링, 기하·대칭, 데이터 그림, 위상·매듭에 하나씩 넣었어요. 수학은 Isospectral Drums, Explicit Formula, Brachistochrone, Steiner Chain, Kingman Coalescent, Borsuk-Ulam 이고, 슈타이너 사슬 말고는 「다음 판 감」의 목록 밖에서 찾았어요. 화장품은 Soap Film, Blotting Paper, Serum Drip, Crackle Polish 이고, 기름종이와 스포이트의 실은 「다음에 해 볼 질감」에 적혀 있던 감이에요. 주제 1 은 37판까지의 288개에도 빈 칸이 없어서 패턴이 하나뿐인 칸을 겨눴어요. Blotting Paper 가 움직임 × 모양 바뀜 1,4 에, Soap Film 이 복잡도 × 모양 바뀜 4,4 에 둘째로 섰어요. 주제 4 는 Brachistochrone 과 Serum Drip 이에요.
+
+### Isospectral Drums
+
+주제 5 로 고든, 웹, 월퍼트의 등스펙트럼 북(1992)을 세웠어요. 마크 카츠가 1966년에 물은 「북 소리로 모양을 들을 수 있나」에 「아니요」라고 답한 북 한 쌍이에요. 좌표를 외워 쓰지 않고 지었어요. PSL(3,2) 의 대합 셋이 파노 평면의 일곱 점에 작용하면 북 A 가, 일곱 직선에 작용하면 북 B 가 되도록 반정사각형 일곱 장을 반사로 붙였어요. 대합 셋을 다 뒤져 보니 평면에 겹치지 않게 펴지면서 두 모양이 합동이 아닌 짝은 이 하나뿐이었어요. 반정사각형의 다리를 LED 축에, 빗변을 45도에 두면 LED 격자의 5점 라플라시안도 정리를 그대로 지켜요. 다리 19 LED 에서 두 북의 안쪽 점은 1179개씩이고, 고유값 1179개가 4.9e-14 안에서 같았어요. 9번째 고유값은 4 − 2cos(π/19) − 2cos(2π/19) = 0.135642909793 과 끝자리까지 맞았어요. 반정사각형 한 장의 가장 낮은 모드를 이음매마다 뒤집은 모드라서, 노드선이 타일의 이음매 그대로예요. 정상파는 cos 이 0 을 지날 때마다 화면 전체가 꺼져서 북 바닥에 0.18 의 밝기를 깔았고, 노드선은 값을 기울기로 나눈 거리로 그려 진폭과 상관없이 같은 굵기로 남겼어요. 여는 노브에서 북은 6번 모드부터 5초마다 한 모드씩 올라가요. 잰 값은 움직임 0.295, 채움 0.333, `thirds` 42/19/38 이에요.
+
+### Explicit Formula
+
+주제 5 로 리만의 명시 공식(1859)을 폰 망골트의 꼴(1895)로 세웠어요. 체비쇼프 함수 ψ(x) 의 계단을 x 에서 영점 항을 하나씩 빼며 다시 지어요. 영점은 mpmath 로 200개를 소수 여섯째 자리까지 구해 넣었고, γ₁ = 14.134725, γ₂₀₀ = 396.381854 예요. T 까지 센 영점 수는 리만-폰 망골트 공식과 T = 100 에서 29 와 29.00, T = 300 에서 138 과 137.71 이었어요. 여는 노브는 x 가 1~24 예요. 소수 거듭제곱에서 0.5 넘게 떨어진 점의 가장 큰 어긋남이 영점 0개에서 1.599, 10개에서 0.775, 100개에서 0.163, 200개에서 0.122 로 줄었고, 계단이 뛰는 자리에서는 두 단의 가운데로 가요. ψ₂₀₀(7) 은 5.0746 이고 가운데는 5.0673 이에요. 처음에는 참 계단과 어긋난 넓이만 칠했는데, 어긋남이 1~2 LED 라 테두리 선에 묻혔어요. 소수 거듭제곱 사이를 띠로 나누고 합이 제 계단에 맞아 들어간 띠부터 켜지게 하자 계단이 자리를 찾는 것이 읽혔고, 모양 바뀜도 0.02 에서 0.103 이 됐어요. 36판의 Gibbs Phenomenon 이 부분합을 줄마다 쌓아서, 이 판은 영점 수를 시간에 걸었어요. 2초에 영점이 셋쯤이라 처음에 둔 매끄럽게 하기 노브는 2~3초 창에서 반응이 약해 빼고, 기울기를 빼는 Tilt 를 넣었어요. Tilt 1 에서는 ψ(x) − x 만 남아 영점만으로 지은 톱니가 보여요.
+
+### Brachistochrone
+
+주제 4 와 5 로 요한 베르누이의 최단 강하선(1696)을 세웠어요. 처음에는 출발점을 위에, 도착점을 아래에 두려 했어요. 그러면 옆 거리가 낙차의 0.48배라 사이클로이드가 직선보다 2.7%, 원호보다 0.5% 빠를 뿐이고, 2.4초 경주에서 6~95 ms 차이라 구슬이 한꺼번에 닿아요. 그래서 도착점을 사이클로이드 아치의 바닥, 39번째 줄 오른쪽 끝에 두어 직선이 18.5% 늦게 했어요. 그 자리는 하위헌스의 등시 곡선(1673)도 그대로 줘서, 한 판 걸러 높이가 다른 여섯 구슬을 놓으면 모두 2.39956초에 바닥에 닿아요. 높이는 124번째 줄까지 떨어졌다 올라오는 길과 베르누이의 동시선으로 채웠어요. 동시선은 지금까지 구슬이 닿을 수 있는 점들의 앞면이에요. LED 마다 그 점을 지나는 사이클로이드를 따라 가장 짧은 시간을 셈해서, 사이클로이드의 구슬만 그 앞면을 끝까지 타요. 사이클로이드 시간은 π√(a/g) = 2.399563 초와 상대 오차 4e-7 로 맞았고, 원호는 1.19%, 포물선은 4.29%, 직선은 18.54% 늦었어요. 사이클로이드는 72.6 LED 로 직선의 67.6 보다 긴 길이에요. 잰 값은 `thirds` 46/22/20 이고, 2~8초에 밝기가 24 넘게 바뀐 LED 는 위, 가운데, 아래가 91%, 100%, 100% 예요.
+
+### Steiner Chain
+
+주제 5 로 슈타이너의 포리즘(1826)을 세웠어요. 「다음 판 감」에 적혀 있던 감이에요. 위 정사각형에서는 고리 안의 같은 원 여섯이 통째로 돌고, 아래 정사각형에는 그 사슬을 위쪽 한 점에 대해 반전한 그림이 서요. 아래에서는 안쪽 원이 가운데에서 12 LED 비켜 있고, 사슬의 원이 넓은 쪽을 지날 때 좁은 쪽의 3.4배로 부풀어요. 원마다 제 색을 두 정사각형에서 같게 칠해서, 어느 원이 어느 원의 상인지 눈으로 짝지어요. 64 LED 에서는 테두리를 밝히고 접점마다 흰 불꽃을 찍어야 「닿아 있다」가 읽혔어요. K3 Turns 는 사슬이 m 바퀴 감기게 해요. 고리 너비는 sin(πm/n) = (1 − ρ)/(1 + ρ) 로 정해지고, m 과 n 이 공약수를 가지면 원 여섯이 세 개씩 닫힌 사슬 둘로 갈라져요. 패턴이 그린 원을 LED 단위로 읽어 67,200 가지 배치에서 맞닿은 쌍 363만 개를 봤어요. 중심 거리와 반지름 합의 차가 가장 큰 것이 1.8e-13 LED 였어요. 아래 정사각형의 주어진 두 원만으로 사슬을 처음부터 이분법으로 놓아 본 4,200 개도 닫히는 틈이 가장 커야 6.6e-11 LED 였어요. 잰 값은 움직임 0.344, 채움 0.610, `thirds` 63/55/63 이에요.
+
+### Kingman Coalescent
+
+주제 5 로 킹먼의 합류(1982)를 모런 집단(1958)으로 세웠어요. 64개체가 한 번에 하나씩 태어나고 하나씩 죽는 동안, 지금 살아 있는 64개체의 조상을 위로 거슬러 칠해요. 열을 줄마다의 조상으로 줄 세우면 줄이 어느 때에 걸리느냐에 따라 형제 블록의 차례가 뒤집혀서, 조상 사슬 전체로 줄 세웠어요. 그러면 살아 있는 두 개체 사이의 차례가 바뀌지 않아요. 64개체의 공통 조상까지 평균 시간은 1.9845 로 킹먼의 2(1 − 1/64) = 1.9688 언저리이고, 마지막 합류가 그 시간의 0.510 을 차지해 킹먼의 0.508 과 같았어요. 표본 5,000개로 잰 값이에요. 합류의 93% 가 공통 조상까지 시간의 아래 4분의 1 에 몰려서, 패널 아래는 촘촘하고 위쪽은 긴 이음매 하나가 갈라요. 태어날 때마다 색을 조금씩 바꾸자 블록마다 줄마다 색이 달라 가로 줄무늬로 읽혀서, 색 바뀜을 드물게 했어요. 표본 16개만 따라가면 새로 난 개체의 조상이 더 위에서 합류해 공통 조상이 뒤로도 뛰어서, 64개체를 다 따라가요. study 의 씨앗이 연 첫 나무는 공통 조상이 0.6 단위로 낮아 바닥 25줄에 눌렸어요. 마지막 합류가 평균의 0.8~1.3배가 될 때까지 더 돌린 뒤에 열어서 늘 흔한 나무로 열려요. 잰 값은 움직임 1.252, 채움 0.967, 색 0.410 이에요.
+
+### Borsuk-Ulam
+
+주제 5 로 보르수크-울람 정리(1933)를 위상·매듭 갈래의 일곱째로 세웠어요. 위 원판은 앞 반구이고, 아래 원판은 뒤 반구를 −x 가 x 자리에 오게 그려요. 그래서 대척점과 기온이 같은 흰 선과 기압이 같은 자홍 선이 두 원판의 같은 자리에 서요. 두 선은 마당의 홀수 차수에만 매여요. 대척점 쌍은 픽셀을 맞춰 찾지 않고 구 위의 뉴턴법으로 풀어서, 노브 여섯 자리의 12,000 프레임에서 |f(x) − f(−x)| 와 |g(x) − g(−x)| 가 2.0e-13 안이었어요. 쌍이 없는 프레임은 없었고, 쌍의 수는 늘 홀수였어요. 하나인 프레임이 3,125, 셋이 4,102, 다섯이 3,061 이에요. 시작점 72개만으로는 접점에서 막 생긴 쌍을 9,000 프레임 가운데 12번 놓쳤어요. 두 홀함수의 부호가 함께 바뀌는 2×2 칸을 시작점으로 더하자 한 번도 놓치지 않았어요. 쌍을 흰 점으로 찍었을 때는 흰 선에 묻혀서, 금색 심에 어두운 고리를 둘렀어요. 잰 값은 움직임 0.306, 채움 0.751, 색 0.339 예요.
+
+### Soap Film
+
+주제 1 과 6 으로 세로로 선 비누막을 세웠고, 겨눈 칸은 Bread Mould 혼자이던 복잡도 × 모양 바뀜 4,4 예요. 복잡도가 2.173 을, 모양 바뀜이 0.331 을 넘어야 하는 칸이에요. 색은 두께에서 셈했어요. 앞면과 뒷면에서 반사한 두 빛의 간섭을 400~700 nm 에서 10 nm 마다 더해 sRGB 로 옮겼고, 뒷면 반사의 부호가 바뀌어서 막이 얇아지면 검어져요. 가장 밝은 흰빛이 103 nm 에, 첫째와 둘째 차수 사이의 자주가 200 nm 언저리에 왔어요. 2nh ≈ 550 nm 로 셈한 207 nm 와 가까워요. 첫 판은 채도를 꽉 채워 채널이 0 과 255 에 붙어서 복잡도가 1.461 이었고, 모양 바뀜은 0.516 으로 축 끝을 넘었어요. 채도를 내리고 검은 막에도 1~21 nm 의 결을 주고, 검은 막이 내려오는 빠르기를 1초에 0.060 으로 맞추자 복잡도 2.342, 모양 바뀜 0.378 이 됐어요. deflate 는 바이트 값이 고르게 퍼질수록 덜 눌려요. slug 를 바꿔 씨앗을 바꾸면 모양 바뀜이 0.30~0.36 으로 흔들려서 칸의 가운데를 겨눴어요. 막은 여는 노브에서 11.8초에 터져서 잰 창 밖이에요. K1 은 회색 축을 따라 결과 전체를 돌려서, 첫 차수 띠가 0 에서 금색, 0.25 에서 초록, 0.5 에서 하늘색이에요.
+
+### Blotting Paper
+
+주제 1 과 6 으로 기름종이를 세웠고, 겨눈 칸은 Lunation 혼자이던 움직임 × 모양 바뀜 1,4 예요. 움직임이 0.061 아래, 모양 바뀜이 0.331 위라서 둘의 비가 5.46 을 넘어야 하는 칸이에요. LED 마다 가장 밝은 채널이 한 방향으로만 바뀌면 모양 바뀜은 2~8초에 바뀐 양이고 움직임은 그 5.97분의 1 이라, 비가 6 언저리에 서요. 기름이 닿은 점은 루커스-워시번 식대로 반지름이 √t 로 자라고, 결을 따라 조금 앞서 가요. 젖은 가장자리의 짙은 테는 색만 바꾸고 밝기는 그대로 둬서 잣대에 걸리지 않아요. 첫 판이 움직임 0.0608, 모양 바뀜 0.3648 로 비는 이미 6.00 이었어요. 점을 판에 고르게 깔고 뒤에 오는 점을 아직 마른 자리에 두어 0.0572 와 0.3434 로 칸 안에 들였어요. 무작위로 흩은 점은 마지막 10% 가 오래 남았어요. 판의 10% 가 비치는 데 2.5초, 절반이 6.7초, 90% 가 13초이고, 새 종이는 15.6초에 내려와요. 2~8초에 밝기가 24 넘게 바뀐 LED 는 위, 가운데, 아래가 67%, 73%, 66% 예요. 주황과 노랑 쪽에서는 마른 종이를 1.5배까지 밝히고 회색 쪽으로 옅게 해서 갈색이 나지 않아요.
+
+### Serum Drip
+
+주제 4 와 6 으로 스포이트에서 늘어지다 구슬로 끊기는 세럼을 세웠어요. 「다음에 해 볼 질감」에 적혀 있던 레일리-플라토 불안정이에요. 실은 1차원 가는 실 모형으로 풀었어요. 부피 조각 사이의 마디를 표면 넓이가 당기고 중력과 점성이 더해져서, 조각이 갈라지고 합쳐지고 끊겨요. 패턴의 `step()` 으로 가만히 선 실에 작은 물결을 주고 2.5~4초의 성장률을 맞춰 보니, 점성이 없을 때 가는 실 이론과 0.7~2.4% 안이었어요. 가장 빨리 자라는 파장은 ka = 0.697, 반지름의 9.0배였어요. 노브의 세 점성에서도 1.1~1.5% 안이었어요. 잡음만으로는 실이 패널 안에서 끊기지 않아서, 흘러드는 세럼에 반지름 8.8배 파장의 떨림을 넣어 위쪽 3분의 1부터 구슬이 보여요. 여는 노브에서 8 LED 너비의 금색 실이 80번째 줄 언저리에서 끊기고, 지름 15 LED 의 방울이 1.4초쯤마다 바닥의 웅덩이에 떨어져요. 처음에는 밝은 크림색 벽을 두었더니 금색 세럼과 가장 밝은 채널이 같아서 모양 바뀜이 0.013 으로 축의 아래 끝 0.021 을 넘었어요. 벽을 반쯤 어둡게 하고 세럼이 안에서 빛나게 하자 0.048 이 됐어요. 벽이 다 켜져서 `thirds` 는 100/100/100 이고, 2~8초에 밝기가 24 넘게 바뀐 LED 는 위, 가운데, 아래가 26.6%, 29.4%, 46.5% 예요. K3 Viscosity 는 웅덩이가 빠지는 빠르기도 늦춰서 반응이 0.03 에서 0.04 가 됐어요.
+
+### Crackle Polish
+
+주제 6 으로 크래클 매니큐어를 세웠어요. 새 금이 옛 금에서 직각으로 나오는 것은 16판의 Drying Mud 와 같아요. 이 판은 그 금 사이로 바탕이 빛나는 매장 벽으로 그렸어요. 검은 래커 조각이 광택 테를 두른 구슬이 되고, 그 틈으로 형광 분홍 바탕이 비쳐요. 볼록 다각형을 직선으로 자르면 만나는 각이 54~88도로 벌어졌고, 직각을 억지로 맞추면 벽돌 격자가 됐어요. 반 LED 격자 위에서 금의 끝을 조각의 긴 축을 가로질러 걸어 가게 하고 한쪽을 채우는 Bohn, Pauchard, Couder(2005)의 차례 나눔으로 바꿨어요. 금 끝 3만 개쯤이 다 옛 금이나 패널 끝에 닿았고, 닿는 각의 가운데 값이 87.6도예요. 여는 노브의 8초에는 조각이 53개이고, 긴 변이 9~17.8 LED 예요. 주황 바탕에서 난 갈색은 어두운 그늘이 아니라 1 LED 틈 가장자리에서 반쯤 섞인 LED 에서 왔어요. 틈을 덮는 몫을 제곱근으로 줄이자 사라졌어요. 잰 값은 움직임 0.061, 채움 0.504, 색 0.285 예요.
+
 ## 지도
 
 지도의 자리는 손으로 매긴 점수가 아니라 잰 값이에요. 패턴마다 처음 노브 값으로 Lab 엔진에서 8초를 돌리고, 2초부터 6초 동안의 화면을 재요. LED 하나의 밝기는 세 채널 가운데 가장 밝은 값으로 봐요.
@@ -1886,7 +1945,7 @@ ESP32-S3 로 옮길 때 걸릴 것도 있어요. Reaction Diffusion 은 Node 에
 
 ## 다음 판 감
 
-10월 24일 `dev`(`3f5d8c6`)의 268개에 38판의 열 개를 더한 278개에서 잰 값이에요. 패턴 바퀴는 주제 안에서 무엇을 할지 고를 때 이 절을 읽고, 한 것은 빼고 새로 본 것을 더해요.
+10월 24일 `dev`(`902f5ea`)의 288개에 39판의 열 개를 더한 298개에서 잰 값이에요. 패턴 바퀴는 주제 안에서 무엇을 할지 고를 때 이 절을 읽고, 한 것은 빼고 새로 본 것을 더해요.
 
 ### 지도의 빈 칸
 
@@ -1922,7 +1981,7 @@ ESP32-S3 로 옮길 때 걸릴 것도 있어요. Reaction Diffusion 은 Node 에
 
 ### 아직 없는 갈래
 
-`families.json` 의 쉰다섯 갈래에 없는 것 가운데 세운 패널에 맞을 것을 적어 둬요. 29판이 연 위상·매듭 갈래는 Hopf Fibration 과 31판의 Boy's Surface, 33판의 Borromean Rings, 34판의 Lakes of Wada, 36판의 Heawood Torus, 38판의 Sperner's Lemma 예요. 28판이 열려다 접은 갈래라 28판의 Hairy Ball 은 노이즈·흐름에 그대로 있어요. 세잎 매듭처럼 이름 있는 매듭이 그 갈래의 일곱째로 맞아요. 29판은 화장품 팝업 갈래도 열었어요. 주제 6 의 몫이라 주제 2 로 세지 않았고, Cream Swirl, Serum Gel, Glitter Fall, Loose Powder 넷이 다 들어 있어요. 30판의 Swatch Row, Pearl Sheen, Bi-Phase, Satin Fold 가 그 갈래에 넷을 더했고, 31판의 Lip Gloss, Foam Lather, Setting Mist, Sponge Blend 가 넷을 더 더해 열둘이에요. 32판의 Cushion Mesh, Clay Mask, Sugar Scrub, Chrome Powder 가 넷을 더해 열여섯이고, 33판의 Cleansing Balm, Gold Leaf, Essence Drop, Peel-Off 가 넷을 더해 스물이에요. 34판의 Cat Eye, Velvet Nap, Mood Tint, Hair Gloss 가 넷을 더해 스물넷이고, 35판의 Bath Fizz, Toner Pad, Sheet Mask, Gilded Cream 이 넷을 더해 스물여덟이고, 36판의 Lotion Ribbon, Shimmer Oil, Blooming Gel, Whipped Soap 이 넷을 더해 서른둘이에요. 38판의 Milk Ring, Couette Shimmer, Photochromic, Serum Fingers 가 넷을 더해 서른여섯이에요. 28판이 연 수론 갈래는 Ford Circles 와 30판의 Three Gaps, 31판의 Gaussian Moat, 32판의 Gilbreath Table, 33판의 Goldbach Comet, 35판의 Kolakoski, 36판의 Elliptic Chords 예요. 27판이 연 철도 갈래는 Funicular 하나이고, 필름·영화 갈래는 Horse in Motion 하나예요. 두 갈래는 주제 표가 수학 쪽으로 바뀌기 전에 열었어요. 그 뒤로 ROUND.md 는 사물로 묶는 갈래를 더 열지 않아요. 26판이 연 얼음·극지 갈래는 Iceberg 와 27판의 Sled Dogs 이고, 미생물 갈래는 Dark Field 와 27판의 Mitosis 예요. 25판이 연 농사·밭 갈래는 Rice Terraces 와 26판의 Rice Planting, 27판의 Center Pivot 이고, 화산 갈래는 Eruption 과 26판의 Geyser, 27판의 Lava Lake 예요. 24판이 연 공사·건설 갈래는 Tower Crane 과 25판의 Excavation, 26판의 Implosion 이에요. 24판이 연 도자기 갈래는 Potter's Wheel 과 25판의 Kintsugi, 26판의 Noborigama 예요. 23판이 연 무대·공연 갈래는 Proscenium 과 24판의 Flying Trapeze, 25판의 Marionette, 26판의 Shadow Play 예요. 23판이 연 짐승 갈래는 Giraffe 와 24판의 Emergence, 25판의 Snow Monkeys 예요. 22판이 연 몸 갈래는 Circulation 과 23판의 Axon, 24판의 Breath, 27판의 Fluoroscope 예요. 22판이 연 비행 갈래는 Liftoff 와 23판의 Final Approach, 24판의 Thermal, 25판의 Skydiver 예요. 20판이 연 새 갈래는 Kingfisher 와 21판의 Woodpecker, 22판의 Weaver, 23판의 Skein 이에요. 20판이 연 화학·실험 갈래는 Chromatography 와 21판의 Chemical Garden, 22판의 Flame Test, 23판의 Elephant Toothpaste 예요. 21판이 연 종이 갈래는 Pop-up Book 과 22판의 Senbazuru, 23판의 Hanging Scroll, 26판의 Origami 예요. 21판이 연 운동·경기 갈래는 Lap Pool 과 22판의 Bowling Lane, 23판의 High Dive, 26판의 Pole Vault, 27판의 Climbing Wall 이에요. 위아래로 움직이는 경기는 High Dive 와 Pole Vault 뒤로 27판에 실내 암벽이 섰어요. 19판이 연 부엌 갈래는 Popcorn 과 20판의 Kettle, 21판의 Pancakes 이고, 버섯·균사 갈래는 Foxfire 와 20판의 Veiled Lady, 21판의 Bread Mould 예요. 18판이 연 유리 갈래는 Stained Glass 와 19판의 Smalti, 20판의 Millefiori, 27판의 Glassblower 예요. 광물·결정 갈래는 Bismuth 와 19판의 Dripstone, 20판의 Agate 이고, 놀이공원 갈래는 Drop Tower 와 19판의 Helter Skelter, 20판의 High Striker, 25판의 Ferris Wheel 이에요. 말이 오르내리는 회전목마는 아직 없어요. 17판이 연 전자 회로 갈래는 Circuit Board 와 18판의 Server Rack, 21판의 Nixie 이고, 장난감 갈래는 Marble Run 과 18판의 Peg Light, 21판의 Slinky, 22판의 Pin Art 예요. 16판이 연 바다 갈래는 Abyss 와 17판의 Shoreline, 20판의 Sunglint, 23판의 Bait Ball 이고, 곤충 갈래는 Fireflies 와 17판의 Ant Farm, 20판의 Moth Lamp, 24판의 Waggle Dance 예요. 15판이 연 도시 갈래는 Metro Map 과 16판의 Neon Alley, 17판의 Crossroads, 22판의 Night Flight 예요. 15판이 연 음악 갈래는 Player Piano 와 16판의 Harp, 18판의 Turntables, 24판의 Pipe Organ 이에요. 4판이 연 직물 갈래는 Jacquard Loom 과 15판의 Plait, 19판의 Needlepoint, 23판의 Sequins 이고, 8판이 연 기계 갈래는 Gear Train 과 15판의 Cam Wave, 19판의 Paternoster 예요. 12판이 연 천체 갈래는 Star Trails 와 15판의 Analemma, 16판의 Lunation, 22판의 Galilean Moons 예요. 위성의 궤도는 Galilean Moons 가 그렸고, 해를 도는 행성은 아직 없어요. 리듬·펄스 갈래는 1판의 Euclid Pulse 와 Pulse Bars 뒤로 20판의 Change Ringing, 32판의 Arnold Tongues, 35판의 Chimera State, 38판의 Infinity Series 가 섰어요.
+`families.json` 의 쉰다섯 갈래에 없는 것 가운데 세운 패널에 맞을 것을 적어 둬요. 29판이 연 위상·매듭 갈래는 Hopf Fibration 과 31판의 Boy's Surface, 33판의 Borromean Rings, 34판의 Lakes of Wada, 36판의 Heawood Torus, 38판의 Sperner's Lemma, 39판의 Borsuk-Ulam 이에요. 28판이 열려다 접은 갈래라 28판의 Hairy Ball 은 노이즈·흐름에 그대로 있어요. 세잎 매듭처럼 이름 있는 매듭이 그 갈래의 여덟째로 맞아요. 29판은 화장품 팝업 갈래도 열었어요. 주제 6 의 몫이라 주제 2 로 세지 않았고, Cream Swirl, Serum Gel, Glitter Fall, Loose Powder 넷이 다 들어 있어요. 30판의 Swatch Row, Pearl Sheen, Bi-Phase, Satin Fold 가 그 갈래에 넷을 더했고, 31판의 Lip Gloss, Foam Lather, Setting Mist, Sponge Blend 가 넷을 더 더해 열둘이에요. 32판의 Cushion Mesh, Clay Mask, Sugar Scrub, Chrome Powder 가 넷을 더해 열여섯이고, 33판의 Cleansing Balm, Gold Leaf, Essence Drop, Peel-Off 가 넷을 더해 스물이에요. 34판의 Cat Eye, Velvet Nap, Mood Tint, Hair Gloss 가 넷을 더해 스물넷이고, 35판의 Bath Fizz, Toner Pad, Sheet Mask, Gilded Cream 이 넷을 더해 스물여덟이고, 36판의 Lotion Ribbon, Shimmer Oil, Blooming Gel, Whipped Soap 이 넷을 더해 서른둘이에요. 38판의 Milk Ring, Couette Shimmer, Photochromic, Serum Fingers 가 넷을 더해 서른여섯이에요. 39판의 Soap Film, Blotting Paper, Serum Drip, Crackle Polish 가 넷을 더해, 37판의 넷까지 마흔넷이에요. 28판이 연 수론 갈래는 Ford Circles 와 30판의 Three Gaps, 31판의 Gaussian Moat, 32판의 Gilbreath Table, 33판의 Goldbach Comet, 35판의 Kolakoski, 36판의 Elliptic Chords, 39판의 Explicit Formula 예요. 27판이 연 철도 갈래는 Funicular 하나이고, 필름·영화 갈래는 Horse in Motion 하나예요. 두 갈래는 주제 표가 수학 쪽으로 바뀌기 전에 열었어요. 그 뒤로 ROUND.md 는 사물로 묶는 갈래를 더 열지 않아요. 26판이 연 얼음·극지 갈래는 Iceberg 와 27판의 Sled Dogs 이고, 미생물 갈래는 Dark Field 와 27판의 Mitosis 예요. 25판이 연 농사·밭 갈래는 Rice Terraces 와 26판의 Rice Planting, 27판의 Center Pivot 이고, 화산 갈래는 Eruption 과 26판의 Geyser, 27판의 Lava Lake 예요. 24판이 연 공사·건설 갈래는 Tower Crane 과 25판의 Excavation, 26판의 Implosion 이에요. 24판이 연 도자기 갈래는 Potter's Wheel 과 25판의 Kintsugi, 26판의 Noborigama 예요. 23판이 연 무대·공연 갈래는 Proscenium 과 24판의 Flying Trapeze, 25판의 Marionette, 26판의 Shadow Play 예요. 23판이 연 짐승 갈래는 Giraffe 와 24판의 Emergence, 25판의 Snow Monkeys 예요. 22판이 연 몸 갈래는 Circulation 과 23판의 Axon, 24판의 Breath, 27판의 Fluoroscope 예요. 22판이 연 비행 갈래는 Liftoff 와 23판의 Final Approach, 24판의 Thermal, 25판의 Skydiver 예요. 20판이 연 새 갈래는 Kingfisher 와 21판의 Woodpecker, 22판의 Weaver, 23판의 Skein 이에요. 20판이 연 화학·실험 갈래는 Chromatography 와 21판의 Chemical Garden, 22판의 Flame Test, 23판의 Elephant Toothpaste 예요. 21판이 연 종이 갈래는 Pop-up Book 과 22판의 Senbazuru, 23판의 Hanging Scroll, 26판의 Origami 예요. 21판이 연 운동·경기 갈래는 Lap Pool 과 22판의 Bowling Lane, 23판의 High Dive, 26판의 Pole Vault, 27판의 Climbing Wall 이에요. 위아래로 움직이는 경기는 High Dive 와 Pole Vault 뒤로 27판에 실내 암벽이 섰어요. 19판이 연 부엌 갈래는 Popcorn 과 20판의 Kettle, 21판의 Pancakes 이고, 버섯·균사 갈래는 Foxfire 와 20판의 Veiled Lady, 21판의 Bread Mould 예요. 18판이 연 유리 갈래는 Stained Glass 와 19판의 Smalti, 20판의 Millefiori, 27판의 Glassblower 예요. 광물·결정 갈래는 Bismuth 와 19판의 Dripstone, 20판의 Agate 이고, 놀이공원 갈래는 Drop Tower 와 19판의 Helter Skelter, 20판의 High Striker, 25판의 Ferris Wheel 이에요. 말이 오르내리는 회전목마는 아직 없어요. 17판이 연 전자 회로 갈래는 Circuit Board 와 18판의 Server Rack, 21판의 Nixie 이고, 장난감 갈래는 Marble Run 과 18판의 Peg Light, 21판의 Slinky, 22판의 Pin Art 예요. 16판이 연 바다 갈래는 Abyss 와 17판의 Shoreline, 20판의 Sunglint, 23판의 Bait Ball 이고, 곤충 갈래는 Fireflies 와 17판의 Ant Farm, 20판의 Moth Lamp, 24판의 Waggle Dance 예요. 15판이 연 도시 갈래는 Metro Map 과 16판의 Neon Alley, 17판의 Crossroads, 22판의 Night Flight 예요. 15판이 연 음악 갈래는 Player Piano 와 16판의 Harp, 18판의 Turntables, 24판의 Pipe Organ 이에요. 4판이 연 직물 갈래는 Jacquard Loom 과 15판의 Plait, 19판의 Needlepoint, 23판의 Sequins 이고, 8판이 연 기계 갈래는 Gear Train 과 15판의 Cam Wave, 19판의 Paternoster 예요. 12판이 연 천체 갈래는 Star Trails 와 15판의 Analemma, 16판의 Lunation, 22판의 Galilean Moons 예요. 위성의 궤도는 Galilean Moons 가 그렸고, 해를 도는 행성은 아직 없어요. 리듬·펄스 갈래는 1판의 Euclid Pulse 와 Pulse Bars 뒤로 20판의 Change Ringing, 32판의 Arnold Tongues, 35판의 Chimera State, 38판의 Infinity Series 가 섰어요.
 
 ### 멋진 것 더 멋지게
 
@@ -1942,6 +2001,8 @@ ESP32-S3 로 옮길 때 걸릴 것도 있어요. Reaction Diffusion 은 Node 에
 
 38판의 열 개는 가장 낮은 노브가 Serum Fingers 의 K3 Fingers 로 네 자리로 0.0454 이고, Anderson Localization 의 K3 Disorder 0.0464 와 K4 Samples 0.0484 가 그다음이에요. 둘 다 자라는 그림이라 2~3초 창에는 손가락이 판 아래쪽에만 있고 원뿔도 다 열리기 전이어서, 노브가 바꿀 넓이가 적어요. 한 그림의 얼룩을 평균해 매끈하게만 하는 Samples 는 0.03 언저리였고, 뒤의 줄무늬가 표본 수에 반비례해 옅어지게 하자 0.05 가 됐어요. Figure-Eight Orbit 은 꼬리를 오래된 것부터 칠해 세 색을 살리자 K3 Trail 이 0.04 로 떨어져서, 꼬리 머리를 넓히고 끝을 빨리 가늘게 해 0.06 으로 올렸어요.
 
+39판의 열 개는 가장 낮은 노브가 Serum Drip 의 K3 Viscosity 로 네 자리로 0.0374 이고, Brachistochrone 의 K4 Tracks 0.0380 과 Blotting Paper 의 K3 Pores 0.0394, Brachistochrone 의 K1 Hue 0.0398 이 그다음이에요. Serum Drip 은 점성이 실의 구슬만 바꿀 때 0.03 이었고, 웅덩이가 빠지는 빠르기도 점성에 따라 늦추자 0.04 가 됐어요. Brachistochrone 은 판의 70% 가 어두운 선 그림이라 트랙을 더해도 바뀌는 LED 가 적어요. Isospectral Drums 의 K4 Beat 는 바로 위 모드를 섞으면 맥놀이가 2~3초 창보다 느려서 0.03 이었고, 세 모드 위를 섞자 0.0400 이 됐어요. Explicit Formula 는 처음에 둔 매끄럽게 하기 노브가 영점이 셋쯤뿐인 2~3초 창에서 약해서 기울기를 빼는 노브로 바꿨어요.
+
 Flock, Harmonograph, Big Type 은 처음 화면이 빨강이에요.
 
 ### 세로 64×128
@@ -1966,11 +2027,13 @@ Flock, Harmonograph, Big Type 은 처음 화면이 빨강이에요.
 
 38판에서는 Anderson Localization 이 시간을 128줄 아래로 내려 55/64/52 이에요. 뒤의 위치 에너지 줄무늬를 빼고 재도 29/40/38 이라 파동만으로 세 칸을 다 써요. 로그 밝기의 바닥을 1e-4 에 두었을 때는 꼬리가 판 폭을 다 채워 멈춘 원뿔이 보이지 않았고, 1e-3 으로 올리자 27 LED 너비에서 멈춘 기둥이 섰어요. Milk Ring 은 세럼이 다 켜져 100/100/100 이라 바뀐 LED 로 셌어요. 2초와 8초 두 화면 사이로는 12/18/29 이고, 2~8초 어느 때든 바뀐 것으로는 26/48/51 이에요. 첫 고리가 47줄, 둘째 대가 76줄에서 깨지고 마지막 고리가 117줄에서 녹아서, 패널 높이가 그대로 갈라지는 차례예요. Couette Shimmer 도 99/99/99 이고 바뀐 LED 로는 35/28/32 예요. 띠가 층층이 쌓이는 테일러 소용돌이는 세운 원통을 옆에서 본 그림이라 세운 패널에 맞았어요. Pólya Urn 은 줄이 로그 시계의 뽑기 차례라 100/100/100 이고, Bernoulli Convolutions 는 줄이 λ 라 68/96/77 이에요. Infinity Series 는 네 줄이 위에서 타격선까지 떨어져 33/33/33 이에요. Sperner's Lemma 는 꼭짓점이 위에 선 삼각형이라 12/42/82 로 위가 좁고, Figure-Eight Orbit 은 8자가 패널 높이로 서도 선 그림이라 14/16/14 예요.
 
+39판에서는 Brachistochrone 과 Serum Drip 이 128줄을 써요. Brachistochrone 은 도착점을 위쪽 39번째 줄에 두어서 경주는 위 3분의 1에서 끝나요. 아래는 124번째 줄까지 떨어졌다 올라오는 길과 베르누이의 동시선이 채워서 `thirds` 가 46/22/20 이고, 2~8초에 밝기가 24 넘게 바뀐 LED 는 위, 가운데, 아래가 91%, 100%, 100% 예요. 동시선의 앞면이 패널을 쓸고 내려가서 바뀐 LED 는 아래쪽이 더 많아요. Serum Drip 은 벽이 켜져 100/100/100 이고, 바뀐 LED 는 26.6%, 29.4%, 46.5% 예요. 실은 위에서 구슬이 되고 80번째 줄 언저리에서 끊겨서, 아래 3분의 1에는 떨어지는 방울과 웅덩이의 물결이 있어요. Isospectral Drums 는 북 둘을 위아래에 두어 42/19/38 이에요. 가운데 3분의 1은 두 북의 끝과 고유값 띠라서 가장 낮아요.
+
 ### 낯선 수학
 
-주제 5 로 쓴 수학과 다음에 해 볼 수학이에요. 28판이 처음 열 개를 썼어요. 슈람-뢰브너 진화(Loewner Trace), 포드 원(Ford Circles), 털 난 공 정리(Hairy Ball), 아즈텍 다이아몬드와 북극권(Aztec Diamond), 부니모비치 경기장(Stadium Billiard), 라우지 프랙탈(Rauzy Fractal), 고셋의 4₂₁ 다면체와 E8(Gosset Polytope), 콘웨이의 보고 말하기 수열(Look and Say), 위토프 게임의 그런디 값(Wythoff Nim), 쌍곡 평면의 띠 모형(Hyperbolic Band)이에요. 29판은 여섯을 더했어요. 클라인의 j 불변량(J-Invariant), 호프 올뭉치(Hopf Fibration), 다이슨 브라운 운동(Dyson Gas), 가케야 바늘 문제의 페론 나무(Perron Tree), 임계선 위의 리만 제타 함수(Zeta Loops), 길버트-섀넌-리즈 리플과 베이어-디아코니스의 일곱 번(Seven Shuffles)이에요. 30판도 여섯을 더했어요. 세 간격 정리(Three Gaps), 호프스태터 나비와 TKNN 정수(Hofstadter Butterfly), 노이만의 외부 당구(Outer Billiards), 볼드의 탄도 퇴적과 KPZ 앞면(Ballistic Deposition), 아르놀트의 미앤더(Meander), 브로드벤트와 해머슬리의 스미기(Percolation)예요. 31판도 여섯을 더했어요. 마스킷 조각의 클라인 군 극한 집합(Indra's Pearls), 리틀우드 다항식의 근(Littlewood Roots), 고든의 가우스 해자(Gaussian Moat), 아르놀트의 고양이 사상(Cat Map), 자부스키와 크루스칼의 KdV 솔리톤(KdV Solitons), 보이 곡면(Boy's Surface)이에요. ROUND.md 의 「낯선 수학 예」 여덟 가운데 쓴 것은 슈람-뢰브너 진화와 아즈텍 다이아몬드, 모듈러 형식, 호프 올뭉치, 세 간격 정리, 외부 당구 여섯이었고, 31판이 리틀우드 다항식의 근과 클라인 군의 극한 집합을 써서 여덟을 다 썼어요. 32판도 여섯을 더했어요. 탤벗 효과와 양자 카펫(Talbot Carpet), 길브레스 추측의 표(Gilbreath Table), 원 사상의 아르놀트 혀(Arnold Tongues), 콘웨이와 라딘의 핀휠 타일링(Pinwheel Tiling), 윌킨슨과 윌렘센의 침입 스미기(Invasion Percolation), 울람의 문제와 해머슬리 과정(Hammersley Lines)이에요. 33판도 여섯을 더했어요. 에인절, 홀로이드, 로믹, 비라그의 무작위 정렬 네트워크(Sorting Network), 베르트랑의 역설(Bertrand Paradox), 펜로즈의 비출 수 없는 방(Penrose Room), 당들랭 구(Dandelin Spheres), 테이트의 보로메오 고리(Borromean Rings), 골드바흐 혜성(Goldbach Comet)이에요. 34판도 여섯을 더했어요. 톰슨 문제와 오일러가 남기는 다섯 이웃 열둘(Thomson Problem), 켈빈의 배 물결(Kelvin Wake), 요네야마가 낸 와다의 호수(Lakes of Wada), 샤이데거의 강 그물(Scheidegger Rivers), 모저의 소파 문제와 해머슬리의 소파(Moving Sofa), 크누스의 춤추는 링크로 푼 펜토미노 덮기(Pentomino Cover)예요. 35판도 여섯을 더했어요. 뢸로의 폭이 일정한 곡선(Constant Width), 렌니의 주차 문제(Rényi Parking), 카리의 비주기 왕 타일(Kari-Culik Tiles), 콜라코스키 수열(Kolakoski), 쿠라모토와 바톡토흐의 키메라 상태(Chimera State), 주콥스키 날개(Joukowsky Airfoil)예요. 36판도 여섯을 더했어요. 그레이슨의 정리가 말하는 곡선 단축 흐름(Curve Shortening), 헤우드의 일곱 색 토러스 지도(Heawood Torus), 슈바르츠 랜턴(Schwarz Lantern), 윌브러햄과 깁스의 현상(Gibbs Phenomenon), 타원 곡선의 현과 접선(Elliptic Chords), 지먼의 파국 기계(Catastrophe Machine)예요. 37판도 여섯을 더했어요. 포천의 쓸기 선 알고리즘(Fortune's Sweep), 앙투안의 목걸이(Antoine's Necklace), 카르만 소용돌이 길의 안정성(Kármán Street), 단단한 원판의 헥사틱 상(Hexatic Phase), 존슨-멜 쪽매와 아브라미 법칙(Johnson-Mehl), 쿠라모토-시바신스키 방정식(Kuramoto-Sivashinsky)이에요. 38판도 여섯을 더했어요. 앤더슨 국소화(Anderson Localization), 무어가 찾고 Chenciner 와 Montgomery 가 증명한 세 몸 문제의 8자 해(Figure-Eight Orbit), 예센과 빈트너, 에르되시의 베르누이 합성곱(Bernoulli Convolutions), 브라우어르의 고정점 정리를 증명하는 슈페르너 보조정리(Sperner's Lemma), 에겐베르거와 폴리아의 항아리(Pólya Urn), 뇌르고르의 무한 수열(Infinity Series)이에요.
+주제 5 로 쓴 수학과 다음에 해 볼 수학이에요. 28판이 처음 열 개를 썼어요. 슈람-뢰브너 진화(Loewner Trace), 포드 원(Ford Circles), 털 난 공 정리(Hairy Ball), 아즈텍 다이아몬드와 북극권(Aztec Diamond), 부니모비치 경기장(Stadium Billiard), 라우지 프랙탈(Rauzy Fractal), 고셋의 4₂₁ 다면체와 E8(Gosset Polytope), 콘웨이의 보고 말하기 수열(Look and Say), 위토프 게임의 그런디 값(Wythoff Nim), 쌍곡 평면의 띠 모형(Hyperbolic Band)이에요. 29판은 여섯을 더했어요. 클라인의 j 불변량(J-Invariant), 호프 올뭉치(Hopf Fibration), 다이슨 브라운 운동(Dyson Gas), 가케야 바늘 문제의 페론 나무(Perron Tree), 임계선 위의 리만 제타 함수(Zeta Loops), 길버트-섀넌-리즈 리플과 베이어-디아코니스의 일곱 번(Seven Shuffles)이에요. 30판도 여섯을 더했어요. 세 간격 정리(Three Gaps), 호프스태터 나비와 TKNN 정수(Hofstadter Butterfly), 노이만의 외부 당구(Outer Billiards), 볼드의 탄도 퇴적과 KPZ 앞면(Ballistic Deposition), 아르놀트의 미앤더(Meander), 브로드벤트와 해머슬리의 스미기(Percolation)예요. 31판도 여섯을 더했어요. 마스킷 조각의 클라인 군 극한 집합(Indra's Pearls), 리틀우드 다항식의 근(Littlewood Roots), 고든의 가우스 해자(Gaussian Moat), 아르놀트의 고양이 사상(Cat Map), 자부스키와 크루스칼의 KdV 솔리톤(KdV Solitons), 보이 곡면(Boy's Surface)이에요. ROUND.md 의 「낯선 수학 예」 여덟 가운데 쓴 것은 슈람-뢰브너 진화와 아즈텍 다이아몬드, 모듈러 형식, 호프 올뭉치, 세 간격 정리, 외부 당구 여섯이었고, 31판이 리틀우드 다항식의 근과 클라인 군의 극한 집합을 써서 여덟을 다 썼어요. 32판도 여섯을 더했어요. 탤벗 효과와 양자 카펫(Talbot Carpet), 길브레스 추측의 표(Gilbreath Table), 원 사상의 아르놀트 혀(Arnold Tongues), 콘웨이와 라딘의 핀휠 타일링(Pinwheel Tiling), 윌킨슨과 윌렘센의 침입 스미기(Invasion Percolation), 울람의 문제와 해머슬리 과정(Hammersley Lines)이에요. 33판도 여섯을 더했어요. 에인절, 홀로이드, 로믹, 비라그의 무작위 정렬 네트워크(Sorting Network), 베르트랑의 역설(Bertrand Paradox), 펜로즈의 비출 수 없는 방(Penrose Room), 당들랭 구(Dandelin Spheres), 테이트의 보로메오 고리(Borromean Rings), 골드바흐 혜성(Goldbach Comet)이에요. 34판도 여섯을 더했어요. 톰슨 문제와 오일러가 남기는 다섯 이웃 열둘(Thomson Problem), 켈빈의 배 물결(Kelvin Wake), 요네야마가 낸 와다의 호수(Lakes of Wada), 샤이데거의 강 그물(Scheidegger Rivers), 모저의 소파 문제와 해머슬리의 소파(Moving Sofa), 크누스의 춤추는 링크로 푼 펜토미노 덮기(Pentomino Cover)예요. 35판도 여섯을 더했어요. 뢸로의 폭이 일정한 곡선(Constant Width), 렌니의 주차 문제(Rényi Parking), 카리의 비주기 왕 타일(Kari-Culik Tiles), 콜라코스키 수열(Kolakoski), 쿠라모토와 바톡토흐의 키메라 상태(Chimera State), 주콥스키 날개(Joukowsky Airfoil)예요. 36판도 여섯을 더했어요. 그레이슨의 정리가 말하는 곡선 단축 흐름(Curve Shortening), 헤우드의 일곱 색 토러스 지도(Heawood Torus), 슈바르츠 랜턴(Schwarz Lantern), 윌브러햄과 깁스의 현상(Gibbs Phenomenon), 타원 곡선의 현과 접선(Elliptic Chords), 지먼의 파국 기계(Catastrophe Machine)예요. 37판도 여섯을 더했어요. 포천의 쓸기 선 알고리즘(Fortune's Sweep), 앙투안의 목걸이(Antoine's Necklace), 카르만 소용돌이 길의 안정성(Kármán Street), 단단한 원판의 헥사틱 상(Hexatic Phase), 존슨-멜 쪽매와 아브라미 법칙(Johnson-Mehl), 쿠라모토-시바신스키 방정식(Kuramoto-Sivashinsky)이에요. 38판도 여섯을 더했어요. 앤더슨 국소화(Anderson Localization), 무어가 찾고 Chenciner 와 Montgomery 가 증명한 세 몸 문제의 8자 해(Figure-Eight Orbit), 예센과 빈트너, 에르되시의 베르누이 합성곱(Bernoulli Convolutions), 브라우어르의 고정점 정리를 증명하는 슈페르너 보조정리(Sperner's Lemma), 에겐베르거와 폴리아의 항아리(Pólya Urn), 뇌르고르의 무한 수열(Infinity Series)이에요. 39판도 여섯을 더했어요. 고든, 웹, 월퍼트의 등스펙트럼 북(Isospectral Drums), 폰 망골트의 꼴로 쓴 리만의 명시 공식(Explicit Formula), 요한 베르누이의 최단 강하선(Brachistochrone), 슈타이너의 포리즘(Steiner Chain), 모런 집단으로 그린 킹먼의 합류(Kingman Coalescent), 보르수크-울람 정리(Borsuk-Ulam)예요.
 
-목록 밖에서 다음에 해 볼 것이에요. 영 도형의 플랑셰렐 성장은 상자가 하나씩 붙으며 로건-셰프와 베르시크-케로프의 극한 곡선(1977)으로 다가가요. 아즈텍 다이아몬드의 북극권과 같은 극한 모양이라 같은 판에 두지 않아요. 슈타이너 사슬은 반전 하나로 고리의 원들이 미끄러지는 포리즘이고, 민코프스키의 물음표 함수(1904)는 페리 나무를 이진 나무로 펴는 계단이에요. 수론 갈래는 32판의 Gilbreath Table 까지 넷이에요. 길브레스 표는 소수 말고 다른 수열로도 세울 수 있어요. 오들리코(1993)에 따르면 2 다음에 간격이 작고 고르게 흩어진 홀수가 오는 수열에서는 1 의 열이 서고, 간격이 크면 깨져요. 간격의 크기를 노브로 걸면 1 의 열이 무너지는 자리가 보여요. 해머슬리 과정의 점 대신 격자 칸마다 지수 분포 무게를 두면 마지막 통과 스미기(로스트, 1981)가 되고, 극한 모양이 쌍곡선에서 (√x+√y)² 의 경계로 바뀌어요.
+목록 밖에서 다음에 해 볼 것이에요. 영 도형의 플랑셰렐 성장은 상자가 하나씩 붙으며 로건-셰프와 베르시크-케로프의 극한 곡선(1977)으로 다가가요. 아즈텍 다이아몬드의 북극권과 같은 극한 모양이라 같은 판에 두지 않아요. 민코프스키의 물음표 함수(1904)는 페리 나무를 이진 나무로 펴는 계단이에요. 수론 갈래는 32판의 Gilbreath Table 까지 넷이에요. 길브레스 표는 소수 말고 다른 수열로도 세울 수 있어요. 오들리코(1993)에 따르면 2 다음에 간격이 작고 고르게 흩어진 홀수가 오는 수열에서는 1 의 열이 서고, 간격이 크면 깨져요. 간격의 크기를 노브로 걸면 1 의 열이 무너지는 자리가 보여요. 해머슬리 과정의 점 대신 격자 칸마다 지수 분포 무게를 두면 마지막 통과 스미기(로스트, 1981)가 되고, 극한 모양이 쌍곡선에서 (√x+√y)² 의 경계로 바뀌어요.
 
 28판에서 본 것이에요. 수학 대상은 셈이 정확해서, 끝없는 확대나 흐름이 거의 다 작은 틀 하나로 돌아요. Ford Circles 는 창을 이웃한 두 수렴 분수의 틀로 잡아 1800초 뒤에도 수가 작고, Hyperbolic Band 는 59 LED 마다, Rauzy Fractal 은 세 단계마다, Gosset Polytope 는 36초마다 화면이 정확히 돌아와요. 반대로 무작위가 주인공인 셋은 2~8초 창이 어느 때에 걸리느냐가 값을 정했어요. Stadium Billiard 는 2~5초만 재면 움직임 0.63, 기체만 재면 3.1 이었어요. 차례대로 자라는 Look and Say 는 빈 쪽에서 열리면 2~8초의 `thirds` 가 24/62/64 였고, 처음 스무 줄을 빠르게 쳐 내자 48/68/69 가 됐어요. 수학을 그대로 그린 화면은 그대로 두면 너무 고요하거나 너무 어두웠어요. Ford Circles 의 고른 원판은 채움 0.971 의 회색 판이었고, Gosset Polytope 의 모서리 그물은 LED 하나에 0.012 씩만 쌓였어요. 빛을 테두리나 고리처럼 수학이 정한 자리에 모으면 읽혔어요.
 
@@ -1994,6 +2057,8 @@ Flock, Harmonograph, Big Type 은 처음 화면이 빨강이에요.
 
 38판에서 본 것이에요. 정리가 수를 못 박는 대상은 이번에도 셈으로 지켜봤어요. Sperner's Lemma 는 노브 60 자리의 7,740 프레임에서 무지개 방이 늘 홀수였고, Anderson Localization 의 노름은 1 에서 1.0e-4 안에, Figure-Eight Orbit 의 에너지는 200주기 동안 9.3e-9 안에 머물렀어요. 특이한 측도가 패널에서는 매끈해 보였어요. 황금비의 베르누이 합성곱은 차원이 0.9957 이라 64칸에서 이웃 줄과 같아 보였고, 처음 몇 항의 합이 정확히 겹치는 수를 세서야 피소 줄이 섰어요. 자기 닮음은 같은 크기로 그려야 읽혔어요. Infinity Series 는 네 번째 음마다 읽은 선율을 1행짜리 점으로 두었을 때 원래 선율과 견줄 수 없었고, 한 박 내내 깔아 같은 블록으로 세우자 맞아떨어졌어요. 극한의 분포는 줄을 세워야 보였어요. Pólya Urn 의 64열은 저마다 다른 비율로 굳는데, 그 비율이 고르게 퍼졌다는 것은 열들이 차례로 선 뒤에야 곧은 그러데이션으로 보여요. 증명의 걸음이 그림이 되기도 했어요. 슈페르너의 문 걷기는 방마다 다른 문으로 나가기만 해서, 걸음 하나가 고정점을 찾아가는 길로 읽혀요. 대칭을 지키는 흔들기는 너그러웠어요. 8자 해는 시작 배치의 대칭을 지키며 민 Kick 0.6 에서도 71주기를 버텼지만, 도는 중에 0.05 로 민 것은 90초 안에 깨졌어요.
 
+39판에서 본 것이에요. 정리를 LED 격자 위에서 그대로 지킬 수 있는 대상이 있었어요. Isospectral Drums 는 반정사각형의 다리를 LED 축에 맞추자 5점 라플라시안의 고유값 1179개가 두 북에서 4.9e-14 안으로 같았어요. 연속인 북을 어림한 것이 아니라 이 패널의 북이 그대로 등스펙트럼이에요. 정리가 수를 못 박는 대상은 이번에도 셈으로 지켜봤어요. Borsuk-Ulam 은 12,000 프레임에서 대척점 쌍이 없거나 짝수인 적이 한 번도 없었고, Steiner Chain 은 4,200 사슬이 6.6e-11 LED 안에서 닫혔어요. 패널의 모양이 교과서의 배치를 바꾸기도 했어요. 세운 패널에서 최단 강하선의 끝점을 아래에 두면 사이클로이드가 원호보다 0.5% 빠를 뿐이라, 끝점을 아치의 바닥으로 올리고 높이는 동시선으로 채웠어요. 무작위 과정은 이번에도 study 의 씨앗이 여는 그림을 정했어요. Kingman Coalescent 는 마지막 합류가 평균의 0.8~1.3배가 될 때까지 더 돌린 뒤에 열어서, 어느 씨앗에서나 흔한 나무로 열려요. 다가가는 것을 보이려면 어긋남보다 맞아 들어간 것을 칠해야 했어요. Explicit Formula 는 1~2 LED 의 어긋남만 칠하면 테두리에 묻혔고, 계단 띠가 자리를 찾을 때 켜지자 읽혔어요.
+
 목록 밖에서 31판 뒤에 해 볼 것이에요. 모자 타일(스미스, 마이어스, 캐플런, 굿먼-스트라우스, 2023)은 한 가지 타일로만 평면을 비주기로 덮고, 뒤집어 놓인 타일이 판에 드문드문 흩어져요. 페르미-파스타-울람-칭구의 되돌아옴(1955)은 KdV Solitons 와 같은 뿌리라 같은 판에 두지 않아요.
 
 목록 밖에서 33판 뒤에 해 볼 것이에요. 뷔퐁의 바늘(1777)은 Bertrand Paradox 와 같은 꼴로, 금을 넘는 바늘의 몫이 2/π 로 모이는 막대와 함께 세울 수 있어요. 토카르스키의 방(1995)은 거울로 된 다각형 방에서 한 점의 빛이 다른 한 점에만 닿지 못하는 방이라 Penrose Room 의 광선 추적을 그대로 써요. 프리드먼과 스코라(1987)는 둥근 원 셋으로는 보로메오 고리를 만들 수 없다는 것을 보였는데, 원을 밀어 넣을 때 어디서 부딪히는지가 그림이 돼요. 정렬 네트워크의 시간 t 의 순열을 점으로 찍으면 대각선에서 원판을 지나 반대 대각선으로 도는 점 구름이 돼요. 그 원판이 2007년 논문이 내다본 아르키메데스 법칙이에요. 간격이 2k 인 소수 쌍의 수는 Goldbach Comet 과 같은 FFT 로 세고, k 마다 하디-리틀우드 인수로 갈리는 줄기 그림이 돼요.
@@ -2008,9 +2073,11 @@ Flock, Harmonograph, Big Type 은 처음 화면이 빨강이에요.
 
 목록 밖에서 38판 뒤에 해 볼 것이에요. 오브리-앙드레 모형(세르주 오브리, 길 앙드레, 1980)은 Anderson Localization 의 무작위 에너지를 무리수 주기의 코사인으로 바꾼 사슬이라, 세기 2 에서 모든 상태가 한꺼번에 퍼짐에서 갇힘으로 넘어가요. 같은 시공간 그림에 그 문턱을 노브로 걸 수 있어요. 수바코프와 드미트라시노비치(2013)가 찾은 세 몸의 주기 궤도 열세 갈래는 나비와 나방, 요구르트 같은 이름이 붙은 꼴이라 Figure-Eight Orbit 의 적분을 그대로 써요. 게일(1979)이 보인 헥스 정리는 칸이 다 찬 헥스 판에는 꼭 한쪽이 이기는 길이 있다는 것으로, 슈페르너 보조정리처럼 브라우어르의 고정점 정리와 같은 힘이에요. 마름모 판을 세워 두 색이 차오르며 이긴 길이 켜지는 그림이 돼요. 쉬츠와 트림퍼의 코끼리 걸음(2004)은 지난 걸음 가운데 하나를 골라 따르는 기억 걸음이라, 따르는 확률 3/4 에서 퍼짐이 바뀌어요. Pólya Urn 처럼 64열을 나란히 둘 수 있어요.
 
+목록 밖에서 39판 뒤에 해 볼 것이에요. 퐁슬레의 포리즘(장빅토르 퐁슬레, 1822)은 두 원뿔 곡선 사이에 끼운 다각형이 한 번 닫히면 어디서 시작해도 닫혀서, Steiner Chain 의 「한 번 닫히면 늘 닫힌다」를 원 대신 선으로 그려요. 같은 판에 두지 않아요. 체비쇼프의 편향(파프누티 체비쇼프, 1853)은 4로 나눈 나머지가 3 인 소수가 1 인 소수보다 거의 늘 앞서는 경주이고, 루빈스타인과 사르낙(1994)이 앞서는 몫을 0.9959 로 셌어요. Explicit Formula 의 영점 합에 L 함수의 영점을 넣으면 같은 꼴로 그 경주를 세울 수 있어요. 햄 샌드위치 정리(스톤과 튜키, 1942)는 보르수크-울람에서 바로 나와서, 평면의 두 무리를 한 직선이 늘 반씩 가르는 그림이 Borsuk-Ulam 다음의 위상 그림이 될 만해요. 평면 브라운 경로의 바깥 경계는 차원이 4/3 이라는 만델브로트의 추측(1982)을 롤러, 슈람, 베르너(2001)가 증명했어요. 지나간 자리가 한 번만 켜지는 경로 위에 바깥 경계만 따로 빛나게 할 수 있어요.
+
 ### 화장품 팝업
 
-주제 6 으로 쓴 질감과 다음에 해 볼 질감이에요. 29판이 처음 넷을 썼어요. 팔레트 나이프로 펴 바르는 크림(Cream Swirl), 구슬이 뜬 젤과 빛 그물(Serum Gel), 쏟아져 쌓이는 글리터(Glitter Fall), 퍼프가 눌렀다 든 압축 파우더(Loose Powder)예요. 넷 다 K1 이 색상환 한 바퀴라서, 색을 돌리면 주황과 노랑이 갈색이나 올리브로 보이는 자리가 있었어요. Serum Gel 은 그 둘레에서만 밝기를 0.62 와 0.3 에서 0.92 와 0.68 로 올렸어요. 밝은 바탕은 반짝임을 지웠어요. 200 위에 55 를 더한 반짝임은 거의 안 보여서 Glitter Fall 은 어두운 바탕에 섰고, 흰 바탕과 금색 한 줄은 Loose Powder 의 아래 띠로만 썼어요. 크림과 젤은 가장자리 0.028 과 0.079 로 연구에서 가장 번지는 그림이에요. 그 둘이 가장자리 축의 아래 끝을 옮겨서 지도에 새 빈 칸이 났어요. 크림은 빛만 움직여서는 움직임이 0.019 에 머물렀어요. 결이 깊어야 빛이 돌 때 바뀌는 LED 가 생겨요.
+주제 6 으로 쓴 질감과 다음에 해 볼 질감이에요. 29판이 처음 넷을 썼어요. 팔레트 나이프로 펴 바르는 크림(Cream Swirl), 구슬이 뜬 젤과 빛 그물(Serum Gel), 쏟아져 쌓이는 글리터(Glitter Fall), 퍼프가 눌렀다 든 압축 파우더(Loose Powder)예요. 넷 다 K1 이 색상환 한 바퀴라서, 색을 돌리면 주황과 노랑이 갈색이나 올리브로 보이는 자리가 있었어요. Serum Gel 은 그 둘레에서만 밝기를 0.62 와 0.3 에서 0.92 와 0.68 로 올렸어요. 밝은 바탕은 반짝임을 지웠어요. 200 위에 55 를 더한 반짝임은 거의 안 보여서 Glitter Fall 은 어두운 바탕에 섰고, 흰 바탕과 금색 한 줄은 Loose Powder 의 아래 띠로만 썼어요. 크림과 젤은 가장자리 0.028 과 0.079 로 연구에서 가장 번지는 그림이에요. 그 둘이 가장자리 축의 아래 끝을 옮겨서 지도에 새 빈 칸이 났어요. 크림은 빛만 움직여서는 움직임이 0.019 에 머물렀어요. 결이 깊어야 빛이 돌 때 바뀌는 LED 가 생겨요. 비누막이 터질 때 구멍 가장자리가 테일러와 컬릭의 속도(1959, 1960)로 고르게 벌어지며 물방울 테를 남기는 것은 Soap Film 의 끝을 늘인 그림이에요. 클렌징 오일이 물을 만나 가장자리부터 우윳빛으로 유화되는 것은 Blotting Paper 처럼 LED 마다 한 번만 바뀌는 셈으로 그릴 만해요.
 
 30판이 넷을 더 썼어요. 손가락으로 끈 스와치의 색조표(Swatch Row), 펄 안료의 박막 간섭과 듀오크롬(Pearl Sheen), 이중층 클렌저의 상 분리(Bi-Phase), 흰 새틴과 금색 실 하나(Satin Fold)예요. 29판의 넷과 겹치지 않게 골랐어요. 바탕을 밝게 두면 채움이 1.000 이고 `thirds` 가 100/100/100 이라, 이 넷은 지도에서 채움 축의 위 끝에 모여요. 아이보리 바탕 198/186/164 에서는 밝은 색조가 바탕보다 밝아야 색으로 읽혔고, 180/168/152 는 회갈색이었어요. 연한 색 위의 Hue 노브는 채도가 낮아 반응이 작을 것 같았는데, Satin Fold 는 주름 골의 채도 0.46 이 그 몫을 해서 K1 이 0.11 이에요. 주황과 노랑 쪽 색조는 이번에도 중간 밝기에서 갈색과 올리브로 갔어요. Pearl Sheen 은 색이 노랑에 가까운 만큼 밝기를 올리고 채도를 내려서 샴페인을 밝은 베이지로 남겼어요.
 
@@ -2030,7 +2097,9 @@ Flock, Harmonograph, Big Type 은 처음 화면이 빨강이에요.
 
 38판이 넷을 더 썼어요. 젤에 떨어져 고리로 말리고 작은 고리로 갈라지며 잠기는 크림 방울(Milk Ring), 두 원통 사이 테일러 소용돌이에 든 쉬머 세럼(Couette Shimmer), UV 손전등이 지나간 자리만 짙어지는 포토크로믹 네일(Photochromic), 진한 크림에 밀려 들어가 손가락으로 갈라지는 세럼(Serum Fingers)이에요. 넷 다 「다음에 해 볼 질감」에 적혀 있던 감이에요. 이번에도 물리를 따르자 사물로 읽혔어요. Milk Ring 은 톰슨과 뉴얼(1885)이 본 고리의 갈라짐을 대마다 따르고, Serum Fingers 는 압력장을 풀어 압력 기울기가 가장 큰 앞부터 밀어요. 가장 밝은 채널만 읽는 잣대는 이번에는 칸을 겨누는 손잡이가 됐어요. Photochromic 은 채도만 오르면 모양 바뀜이 그대로라 짙은 상태의 바탕을 0.11 까지 내렸고, Serum Fingers 는 크림을 밝기 71 의 회색으로 두어 세럼과 0.7 쯤 벌렸어요. 주황과 노랑 쪽의 갈색과 올리브는 넷 다에서 다시 왔어요. Milk Ring 은 그 범위에서 유리 아래쪽을 2.1배까지 밝혔고, Couette Shimmer 는 어두운 띠도 밝기 0.85 를 지키고 채도로만 갈랐고, Photochromic 은 짙어지는 대신 크림색에서 밝은 원색으로 바뀌어요. Milk Ring 은 고리 심을 반지름의 4분의 1 로 두꺼이 그렸을 때 하얀 알약으로 보였고, 8분의 1 로 줄이고 가운데로 세럼이 비치게 하자 고리로 읽혔어요.
 
-다음에 해 볼 질감이에요. 세팅 미스트가 유리판에 맺혀 굵어지고 흘러내리는 것은 Lip Gloss 와 Setting Mist 사이라 같은 판에 두지 않아요. 매니큐어 붓이 남긴 줄이 스스로 펴지는 것은 Cream Swirl 과 가까워서 같은 판에 두지 않아요. 젖은 립글로스나 탑코트가 굳는 것은 Clay Mask 처럼 광이 먼저, 색이 나중에 빠지는 두 문턱으로 그릴 만해요. 립밤이 체온에 녹아 번지거나 고체 향수가 문질러 펴지는 것은 Cleansing Balm 의 녹는 경계를 가로로 돌린 그림이에요. 크러시드 벨벳처럼 결이 조각마다 다른 방향으로 눌린 천을 보이지 않는 손이 쓰다듬어 조각이 하나씩 같은 방향으로 눕는 것은 Velvet Nap 의 결 벡터를 그대로 써요. 물 위에 매니큐어 고리를 떨어뜨려 겹치고 바늘로 끄는 워터 마블 네일은 Bath Fizz 의 유체를 그대로 써요. 기름종이가 피지를 빨아들인 자리만 반투명해지는 것은 Toner Pad 의 길이장으로 그릴 만해요. 하이드로겔 마스크처럼 두껍고 맑은 젤 시트가 붙는 것은 Sheet Mask 의 젖는 선을 그대로 써요. 움직이는 판 위로 떨어지는 점성 줄기는 판이 빨라질수록 똬리가 구불거리는 선으로, 다시 8자 매듭으로 바뀌어요. 치우-웹스터와 리스터의 유체 재봉틀(2006)로 컨베이어 위에 깔리는 로션 띠를 그릴 만해요. 위에서 본 비누 거품은 변이 n 개인 방이 (n − 6) 에 비례해 커지거나 줄어드는 폰 노이만의 법칙(1952)으로 굵어져서, Foam Lather 와 다른 질감이 돼요. 크림 하이라이터를 손끝 열로 녹여 펴는 것은 Embossed Glow 의 엠보싱을 Cleansing Balm 의 녹는 경계로 무너뜨리는 그림이에요. 반투명한 젤리 네일을 여러 번 겹쳐 바르면 겹친 곳만 짙어져서, Taffy Cream 의 크림 대신 붓 자국이 남는 얇은 층을 쌓을 만해요. 오일 방울이 머리결 대신 속눈썹처럼 짧고 굽은 털 다발을 타고 끝에 맺히는 것은 Hair Oil 의 방울 셈을 그대로 써요. 세럼이 스포이트에서 실로 늘어지다 구슬로 끊기는 레일리-플라토 불안정(조제프 플라토, 1873; 레일리 경, 1878)은 위에서 아래로 늘어지는 실과 구슬 줄이라 세운 패널에 맞아요. 토너나 향수 잔 벽을 타고 오르내리는 와인의 눈물(제임스 톰슨, 1855; 카를로 마랑고니, 1865)도 기어오르는 막과 흘러내리는 줄기로 128줄을 써요. 두 유리판 사이의 크림을 떼어 낼 때 공기가 가운데로 파고들며 나뭇가지처럼 갈라지는 것은 Serum Fingers 의 성장 법칙을 바깥에서 안으로 돌려 그릴 만해요.
+39판이 넷을 더 썼어요. 세로로 선 비누막의 간섭색(Soap Film), 피지를 빨아들여 비치는 기름종이(Blotting Paper), 스포이트에서 늘어지다 구슬로 끊기는 세럼(Serum Drip), 마르며 갈라지는 크래클 매니큐어(Crackle Polish)예요. 둘째와 셋째는 「다음에 해 볼 질감」에 적혀 있던 감이에요. 넷 다 물리를 셈으로 풀었어요. Soap Film 은 두께에서 간섭색을 파장마다 더해 뉴턴의 색 차례를 냈고, Blotting Paper 는 루커스-워시번의 √t 로 번지고, Serum Drip 은 레일리의 성장률을 1~2% 안에서 따라요. 가장 밝은 채널만 읽는 잣대가 이번에는 그림을 한 번 막고 한 번 도왔어요. Serum Drip 은 크림색 벽 앞의 금색 세럼이 빨강 채널에서 벽과 같아 모양 바뀜이 0.013 이었고, 벽을 반쯤 어둡게 해서 0.048 이 됐어요. Blotting Paper 의 젖은 테는 채도만 바꿔서 잣대에 걸리지 않았고, 테를 그려도 LED 마다 한 번만 밝아지는 셈이 깨지지 않았어요. 주황과 노랑 쪽의 갈색과 올리브는 넷 다에서 다시 왔어요. Blotting Paper 는 그 범위의 마른 종이를 1.5배까지 밝히고 회색 쪽으로 옅게 했고, Serum Drip 은 벽을 회색으로 빼고 웅덩이를 세럼 빛으로 밝혔어요. Crackle Polish 의 갈색은 어두운 그늘이 아니라 1 LED 틈 가장자리에서 반쯤 섞인 LED 에서 왔어요. 복잡도를 겨눌 때는 채도가 거꾸로 갔어요. Soap Film 은 채도를 꽉 채우자 채널이 0 과 255 에 붙어 복잡도가 1.461 로 떨어졌고, 채도를 내리자 2.342 가 됐어요.
+
+다음에 해 볼 질감이에요. 세팅 미스트가 유리판에 맺혀 굵어지고 흘러내리는 것은 Lip Gloss 와 Setting Mist 사이라 같은 판에 두지 않아요. 매니큐어 붓이 남긴 줄이 스스로 펴지는 것은 Cream Swirl 과 가까워서 같은 판에 두지 않아요. 젖은 립글로스나 탑코트가 굳는 것은 Clay Mask 처럼 광이 먼저, 색이 나중에 빠지는 두 문턱으로 그릴 만해요. 립밤이 체온에 녹아 번지거나 고체 향수가 문질러 펴지는 것은 Cleansing Balm 의 녹는 경계를 가로로 돌린 그림이에요. 크러시드 벨벳처럼 결이 조각마다 다른 방향으로 눌린 천을 보이지 않는 손이 쓰다듬어 조각이 하나씩 같은 방향으로 눕는 것은 Velvet Nap 의 결 벡터를 그대로 써요. 물 위에 매니큐어 고리를 떨어뜨려 겹치고 바늘로 끄는 워터 마블 네일은 Bath Fizz 의 유체를 그대로 써요. 하이드로겔 마스크처럼 두껍고 맑은 젤 시트가 붙는 것은 Sheet Mask 의 젖는 선을 그대로 써요. 움직이는 판 위로 떨어지는 점성 줄기는 판이 빨라질수록 똬리가 구불거리는 선으로, 다시 8자 매듭으로 바뀌어요. 치우-웹스터와 리스터의 유체 재봉틀(2006)로 컨베이어 위에 깔리는 로션 띠를 그릴 만해요. 위에서 본 비누 거품은 변이 n 개인 방이 (n − 6) 에 비례해 커지거나 줄어드는 폰 노이만의 법칙(1952)으로 굵어져서, Foam Lather 와 다른 질감이 돼요. 크림 하이라이터를 손끝 열로 녹여 펴는 것은 Embossed Glow 의 엠보싱을 Cleansing Balm 의 녹는 경계로 무너뜨리는 그림이에요. 반투명한 젤리 네일을 여러 번 겹쳐 바르면 겹친 곳만 짙어져서, Taffy Cream 의 크림 대신 붓 자국이 남는 얇은 층을 쌓을 만해요. 오일 방울이 머리결 대신 속눈썹처럼 짧고 굽은 털 다발을 타고 끝에 맺히는 것은 Hair Oil 의 방울 셈을 그대로 써요. 토너나 향수 잔 벽을 타고 오르내리는 와인의 눈물(제임스 톰슨, 1855; 카를로 마랑고니, 1865)도 기어오르는 막과 흘러내리는 줄기로 128줄을 써요. 두 유리판 사이의 크림을 떼어 낼 때 공기가 가운데로 파고들며 나뭇가지처럼 갈라지는 것은 Serum Fingers 의 성장 법칙을 바깥에서 안으로 돌려 그릴 만해요.
 
 ## 다시 돌리기
 

From 42cadfd7dce232b037621b36b9441f52c1819e08 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 24 Oct 2026 22:48:59 +0000
Subject: [PATCH 08/10] =?UTF-8?q?incoming:=20Crackle=20Polish=20=EC=99=80?=
 =?UTF-8?q?=20Steiner=20Chain=20=EC=9D=98=20=EC=A3=BC=EC=84=9D=20=EB=91=90?=
 =?UTF-8?q?=20=EC=A4=84=EC=9D=84=20=EC=85=8B=20=EB=AC=B6=EC=9D=8C=20?=
 =?UTF-8?q?=EC=97=86=EC=9D=B4=20=EA=B3=A0=EC=B9=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WSruBmW95rasfF2WmM8DZ7
---
 incoming/pattern-study/patterns/crackle-polish.js | 6 +++---
 incoming/pattern-study/patterns/steiner-chain.js  | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/incoming/pattern-study/patterns/crackle-polish.js b/incoming/pattern-study/patterns/crackle-polish.js
index 9d989f047..8ff92b45a 100644
--- a/incoming/pattern-study/patterns/crackle-polish.js
+++ b/incoming/pattern-study/patterns/crackle-polish.js
@@ -51,9 +51,9 @@ const REACH = 7;
 
 // The whole crackle of one coat, worked out when it goes on. The panel is
 // one domain. A domain splits across its long axis: a crack starts on its
-// rim, square to the older crack it leaves, runs across, and turns to meet
-// the crack on the far side square. Each half splits the same way until it
-// is too short; bigger domains crack sooner.
+// rim, square to the older crack it leaves, and runs across until it turns
+// to meet the crack on the far side square. Each half splits the same way
+// until it is too short; bigger domains crack sooner.
 function crackle(craze) {
   const stop = 20 - 9 * craze, span = log((W * H) / (0.45 * stop * stop));
   const lab = new Int32Array(FW * FH), cracks = [];
diff --git a/incoming/pattern-study/patterns/steiner-chain.js b/incoming/pattern-study/patterns/steiner-chain.js
index 363302177..e2101af20 100644
--- a/incoming/pattern-study/patterns/steiner-chain.js
+++ b/incoming/pattern-study/patterns/steiner-chain.js
@@ -46,7 +46,8 @@ export function setup(params) {
   params.s = {
     n: 6, m: 1, q: 3.4, phi: 0, lay: 0, flash: [], begun: false,
     // Per square: circles as x, y, r (the outer, the inner, then the chain in
-    // the order it is laid); the touches as x, y, and which two circles meet.
+    // the order it is laid); each touch as its point x, y and the pair of
+    // circles that meet there.
     C: [new Float64Array(3 * 14), new Float64Array(3 * 14)],
     T: [new Float64Array(2 * 40), new Float64Array(2 * 40)], nt: 0, tri: [],
     A: new Float32Array(3 * W * H), col: [0, 0, 0], fil: [0, 0, 0],

From ba49c0ee4b1009dcfd65cefc29e451e39c0646ee Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 24 Oct 2026 23:04:57 +0000
Subject: [PATCH 09/10] =?UTF-8?q?incoming:=2039=ED=8C=90=20=EC=97=B4=20?=
 =?UTF-8?q?=EA=B0=9C=EA=B0=80=20=EB=93=A0=20index.html=20=EA=B3=BC=20READM?=
 =?UTF-8?q?E=20=EC=A7=80=EB=8F=84=EC=9D=98=20=EB=B9=88=20=EC=B9=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WSruBmW95rasfF2WmM8DZ7
---
 incoming/pattern-study/README.md  | 2 ++
 incoming/pattern-study/index.html | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/incoming/pattern-study/README.md b/incoming/pattern-study/README.md
index 0df7b2757..4541543f7 100644
--- a/incoming/pattern-study/README.md
+++ b/incoming/pattern-study/README.md
@@ -1967,6 +1967,8 @@ ESP32-S3 로 옮길 때 걸릴 것도 있어요. Reaction Diffusion 은 Node 에
 
 38판의 열 개도 어느 축의 끝을 넘지 않아서 칸 경계는 30판 그대로이고, 278개에서도 지도 21장이 다 `none` 이에요. 주제 1 은 패턴이 하나뿐인 칸을 겨눠서, 36판까지의 268개에서 16 이던 그런 칸이 14 가 됐어요. 움직임 × 모양 바뀜 1,3 은 1초에 바뀌는 빛이 0.061 아래인데 2~8초에 블록 평균이 0.217 넘게 바뀌어야 하는 칸이에요. 블록 평균이 한쪽으로만 바뀌면 모양 바뀜은 6초 동안 바뀐 양이라 움직임의 여섯 배가 끝이고, 그 끝에 닿으려면 LED 마다 한 번만, 깜박임 없이 바뀌어야 해요. Serum Fingers 는 세럼이 닿는 LED 를 한 번만 밝혀서 2~8초에 오른 합이 0.251, 내린 합이 0.0000 이었고, 움직임 0.042 가 모양 바뀜의 6분의 1 이에요. 그러면 칸은 모양이 아니라 1초에 밀어 넣는 넓이와 밝기 차이로 골라져요. 촘촘함 × 모양 바뀜 3,4 는 한 LED 결이 판의 반 넘게 한꺼번에 어두워져야 하는 칸이에요. Photochromic 은 LED 마다 펄 조각이나 맨 폴리시를 두어 촘촘함 0.210 을 내고, 짙어진 바탕을 0.11 까지 내려 모양 바뀜 0.365 를 냈어요. 가장 밝은 채널로 재서, 채도만 오르는 짙어짐은 모양 바뀜에 잡히지 않았어요. 남은 14칸 가운데 넷은 여전히 모양 바뀜이 높은 촘촘함의 칸이에요. 촘촘함 × 모양 바뀜 2,4, 3,3, 4,3, 4,4 의 Marbling, Flipdot, Sequins, Pin Art 예요. 움직임 × 모양 바뀜 1,4 의 Lunation 곁에 서려면 모양 바뀜이 0.331 을 넘어야 해서, 한 번씩만 바뀌는 그림이라도 움직임 0.055 에서 0.061 사이의 좁은 띠를 써야 해요.
 
+39판의 열 개도 어느 축의 끝을 넘지 않아서 칸 경계는 30판 그대로이고, 298개에서도 지도 21장이 다 `none` 이에요. 주제 1 은 패턴이 하나뿐인 칸을 겨눠서, 37판까지의 288개에서 12 이던 그런 칸이 10 이 됐어요. 움직임 × 모양 바뀜 1,4 는 모양 바뀜이 0.331 을 넘으면서 움직임은 0.061 아래여야 해서, 둘의 비가 5.46 을 넘는 칸이에요. 2~8초의 화면은 프레임 180장이 5.97초에 걸쳐 있어서, LED 마다 가장 밝은 채널이 한 방향으로만 바뀌면 비가 꼭 5.97 이에요. Blotting Paper 는 반투명해지는 자리가 밝아지기만 하고 젖은 테는 채도만 바꿔서 비가 6.00 이고, 움직임 0.057, 모양 바뀜 0.343 으로 Lunation 옆에 섰어요. 복잡도 × 모양 바뀜 4,4 는 화면이 deflate 로 잘 눌리지 않으면서 블록 평균이 0.331 넘게 바뀌어야 하는 칸이에요. Soap Film 은 검은 막이 위에서 내려오며 밝은 간섭색을 지워 모양 바뀜이 0.378 이 됐고, 채도를 내리고 검은 막에도 옅은 결을 남겨 복잡도 2.342 로 Bread Mould 옆에 섰어요. 남은 열 칸은 다 촘촘함 축이 든 지도에 있어요. 넷이 촘촘함 × 모양 바뀜이고, 셋이 가장자리 0.210 아래의 가장자리 × 촘촘함이에요.
+
 23판부터 28판까지는 `*` 가 붙은 칸이 없었어요. 22판까지 남은 두 칸, 촘촘함 × 모양 바뀜 3,4 와 4,3 에 23판의 Bait Ball 과 Sequins 가 섰어요. 하나 남은 빈 칸이던 복잡도 × 채움 4,3 에는 24판의 Waggle Dance 가 섰어요. 복잡도가 2.173 을 넘고 채움이 0.558~0.815 인 자리예요. 복잡도 축 끝의 Contour Map(2.735)을 빼고 세면 차는 칸이라 `*` 가 붙지 않았고, 그 아래 복잡도 2.4~2.6 에 선 Woodpecker, Dripstone, Agate, Guilloché 는 채움이 다 0.93 을 넘었어요. 이제 지도 21장의 칸이 다 차서 `--gaps` 는 모든 줄에 `none` 을 찍어요. 주제 1 은 축 끝의 패턴 하나가 축을 늘려 새 빈 칸이 날 때까지 고를 칸이 없어요. Waggle Dance 에서 어려운 쪽은 채움이었어요. 벌집은 꺼진 LED 가 거의 없는 그림이라, 빈 방 바닥과 봉한 방 사이 이음매를 24 아래로 눌러 채움 0.732 를 냈어요. 복잡도는 켜진 LED 의 세 채널을 따로 흔드는 낟알로 쉽게 올라서, 첫 판은 오히려 2.766 으로 축 끝을 넘었어요. 25판도 기준 148개의 21장이 다 `none` 이라 주제 1 은 겨눌 칸이 없었어요. 그 대신 패턴이 하나만 선 칸을 셌어요. 148개에서 49칸이었고, 남은 자리로 짠 Penrose 가 그 가운데 여섯 칸에 둘째로 서서 158개에서는 43칸이에요. Penrose 가 겨눈 칸은 촘촘함 × 색 3,4 예요. 촘촘함 0.195~0.299 에 색 0.509 위인 자리이고, 4판의 Jacquard Loom 혼자 서 있었어요. Penrose 는 촘촘함 0.264, 색 0.583 으로 거기 섰어요. 같은 값으로 움직임 × 촘촘함 4,3 과 촘촘함 × 채움 3,3 의 Moire Rings, 촘촘함 × 복잡도 3,2 의 Peg Light, 복잡도 × 색 2,4 의 Gear Train, 채움 × 색 3,4 의 Marbling 곁에도 섰어요. 1 LED 어두운 선으로 나눈 작은 타일에 선명한 색을 여럿 두면 촘촘함과 색이 함께 높은 자리에 닿아요. 26판도 기준 158개의 21장이 다 `none` 이었어요. 패턴이 하나뿐인 칸 43 가운데 넷을 겨눴어요. Dark Field 는 검은 바탕 위의 흩은 빛으로 채움 0.263 에 촘촘함 0.222, 복잡도 2.081 이라, Foxfire 혼자이던 복잡도 × 채움 3,1 과 Peg Light 혼자이던 촘촘함 × 채움 3,1 에 씨앗 여덟이 다 들어요. Origami 는 어두운 탁자 위 종이 한 장이라 채움 0.264 이고, 2초의 정사각형이 8초에 좁은 학 기본형이 되어 모양 바뀜 0.255 로 Domino Run 혼자이던 채움 × 모양 바뀜 1,3 에 서요. Lichtenberg 는 Rabbit Ears 혼자이던 복잡도 × 모양 바뀜 4,3 에 씨앗 여덟 가운데 일곱이 들어요. 네 칸 말고는 바뀐 칸이 없어서, 168개에서 패턴이 하나뿐인 칸은 39칸이에요. 27판도 기준 168개의 21장이 다 `none` 이었고, 39칸 가운데 둘을 겨눴어요. Mitosis 는 채움 0.263, 색 0.540 으로 Neon Alley 곁의 채움 × 색 1,4 에 서요. 판의 4분의 1만 켜는 그림에서 색 0.5 를 넘기려면 켜진 LED 가 거의 다 순색 최대 밝기여야 해서, 형광의 번짐은 셈에 들지 않는 21/255 아래로 눌렀어요. Lava Lake 는 복잡도 2.222, 채움 0.271 로 Moth Lamp 곁의 복잡도 × 채움 4,1 에 서요. 복잡도는 프레임 바이트 값의 엔트로피를 거의 그대로 따라서, 어두운 지각의 결을 채널마다 0~24 전부로 넓히자 1.866 이 2.010 이 됐어요. 붉은 용암은 켜진 LED 하나에 24 를 넘는 바이트가 빨강 하나뿐이라, 이음매를 늘리기보다 주황 쪽으로 데우는 편이 채움을 덜 쓰고 복잡도를 벌었어요. 색 축의 아래 끝은 Cloud Chamber 의 0.052, 모양 바뀜 축의 아래 끝은 Climbing Wall 의 0.021 로 옮겨졌지만 혼자 서는 칸은 그대로라서, 178개에서 패턴이 하나뿐인 칸은 37칸이에요. 28판도 기준 178개의 21장이 다 `none` 이었고, 37칸 가운데 둘을 겨눴어요. Aztec Diamond 는 촘촘함 0.350, 색 0.640 으로 Millefiori 곁의 촘촘함 × 색 4,4 에 서요. 촘촘함은 가장 밝은 채널로 재서 네 색 도미노가 맞닿아도 턱이 없었고, LED 에 묶은 체커판이 그 턱을 줬어요. Stadium Billiard 는 움직임 2.362, 채움 0.186 으로 Warp 곁의 움직임 × 채움 4,1 에 서요. 공 이백 개가 1초에 125 LED 를 가면서 짧은 자취만 남겨요. 겨누지 않은 다섯 칸에도 둘째가 들어서 188개에서 패턴이 하나뿐인 칸은 30칸이에요. 29판도 기준 188개의 21장이 다 `none` 이었고, 30칸 가운데 둘을 겨눴어요. 28판이 모듈러 형식의 등고선으로 겨눠 보라던 가장자리 × 움직임 1,4(Mandelbrot 혼자)는 J-Invariant 가 움직임 0.372 로 모자랐고, Hopf Fibration 이 가장자리 0.207, 움직임 1.607 로 섰어요. 원 일흔 개가 저마다 1초에 몇 LED 씩 쓸고 가서 움직임이 높고, 원마다 옅은 빛 번짐을 둬서 가장자리가 낮아요. J-Invariant 는 복잡도 2.693, 색 0.400 으로 Spectrogram 곁의 복잡도 × 색 4,3 에 서요. 같은 판의 Cream Swirl(0.028)과 Serum Gel(0.079)이 가장자리 축의 아래 끝을 Fire 의 0.120 에서 내려서, 가장자리 칸 경계가 0.305, 0.560, 0.815 에서 0.232, 0.514, 0.796 으로 옮겨졌어요. 그래서 198개에서는 가장자리 × 촘촘함 1,2 가 23판 뒤로 처음 `*` 가 붙은 빈 칸이에요. 가장자리 0.232 아래에 촘촘함 0.091~0.195 인 자리라, 번지는 바탕 위에 잔 결이 고르게 깔린 그림이 들어설 수 있어요. 같은 지도의 1,3 과 1,4, 가장자리 × 채움 1,1 도 비었지만 끝의 패턴 하나를 빼면 차서 `*` 가 없어요. 198개에서 패턴이 하나뿐인 칸은 24칸이에요.
 
 촘촘함이 0.299 를 넘는 패턴이 20판에서 셋 늘었고, 셋 다 그 값을 다른 길로 냈어요. Agate 는 1 LED 띠를 벽까지의 거리로 그어서, 축에 나란한 띠는 이웃 쌍의 절반에서만 차이가 나고 대각선 띠는 70% 쯤에서 나요. 방향이 고르게 섞이면 띠 너비 0.85 LED 언저리가 가장 높았어요. Millefiori 는 촘촘함을 가장 밝은 채널로 재서 코발트와 카나리아 노랑이 맞닿아도 턱이 0 이었어요. 고리마다 밝은 유리와 그 유리를 어둡게 뽑은 유리를 번갈아 넣어야 했어요. Sunglint 는 반짝임을 물결 띠마다 체커판의 한쪽 칸에만 둬서 반짝임끼리 닿지 않게 했어요. 셋 다 채움이 0.85 를 넘어서, 촘촘함 × 채움 4,4 는 꺼진 LED 없이도 닿는 칸이었어요. 21판의 Sandpile 이 일곱째예요. 칸 하나가 LED 하나이고 알 셋 옆의 알 둘이 가장 흔한 이웃 쌍이라, 밝기를 0, 2, 1, 3 차례로 올려 더미 안의 촘촘함이 0.40 언저리예요. 판의 75% 는 덮여야 0.3 을 넘어요. 22판의 Pin Art 와 Night Flight 가 여덟째와 아홉째예요. Pin Art 는 핀과 틈의 체커 결이라 이웃 쌍이 모두 핀과 틈의 쌍이고, Night Flight 는 Pancakes 의 체커 결에 1 LED 가로등을 LED 의 12.7% 만큼 얹어서 가장자리 0.258 에 촘촘함 0.328 이에요. 촘촘함과 가장자리는 가장 밝은 채널로 재서, 색을 섞는 자리마다 섞은 뒤 가장 밝은 채널을 다시 맞춰야 했어요. 땅과 강물을 섞은 자리에서 가장 밝은 채널이 0.68 까지 내려가 체커 결의 37 이 41~60 으로 넘어갔고, 그대로 둔 판은 가장자리가 0.05 높았어요. 23판의 Sequins 가 열째예요. 체커 결 없이, 가로 5 LED 와 세로 3 LED 간격으로 엇갈려 단 스팽글의 빛점과 그림자 줄로 0.327 을 냈어요. 촘촘함은 무늬의 모양보다 턱의 크기를 따라가서, 스팽글 몸통을 0.8 에서 0.6 으로 어둡게 하자 은빛 면이 0.339 에서 0.311 로 내려갔어요. 26판의 Lichtenberg 는 0.2 를 넘긴 판을 버렸어요. 판 어디서나 돋는 1 LED 잔가지로 0.248 을 냈더니 검은 직교 그물이 나무판을 덮어 미로로 보였어요. 잔가지를 탄 줄기에만 달아 빈 나무를 42% 남기자 0.130 이었어요. 촘촘함은 판 전체 이웃 쌍의 평균이라, 빈 나무가 넓게 남는 그림은 줄기 둘레가 아무리 잘아도 평균이 낮아요. 같은 판의 Dark Field 는 검은 바탕에 세균 몇백과 밝은 테두리를 판 곳곳에 흩어 0.222 를 냈어요.
diff --git a/incoming/pattern-study/index.html b/incoming/pattern-study/index.html
index 5a75e8563..2accd9f00 100644
--- a/incoming/pattern-study/index.html
+++ b/incoming/pattern-study/index.html
@@ -141,7 +141,7 @@ <h1>패턴 연구</h1>
 
   <div id="cards"></div>
 </main>
-<script id="study-data" type="application/json">{"patterns":[{"slug":"abyss","title":"Abyss","family":"ocean","round":16,"note":"물결 밑 햇빛층에서 심해 바닥까지 바다 한 기둥이 128줄에 서요. 빛내림과 정어리 떼 아래로 관해파리와 샛비늘치, 아귀의 미끼 불빛을 지나 잠수정이 등을 켜고 열수 분출공까지 내려갔다 올라와요. K1 을 누르면 죽은 고래가 기둥을 다 가라앉아 바닥에 뼈로 남아요.","idea":"One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.","buttons":"K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.","code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","layer":{"id":"layer-abyss","type":"code","name":"abyss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Night","min":0,"max":1,"about":"Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace."},{"name":"Current","min":-1,"max":1,"about":"A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream."},{"name":"Bloom","min":0,"max":1,"about":"From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens."}],"start":[0,2,0,0.06],"measures":{"motion":0.1244,"detail":0.039,"edges":0.3461,"complexity":1.1983,"coverage":0.6808,"colour":0.2784,"drift":0.0583},"knobResponse":[0.1135,0.059,0.0565,0.0734]},{"slug":"agate","title":"Agate","family":"mineral","round":20,"note":"라이트박스에 올린 블루 레이스 마노 단면이 패널을 거의 다 채우고, 1 LED 남짓한 하늘색 띠와 젖빛 띠가 갈색 껍질을 따라 겹겹이 들어가 석영 결정이 반짝이는 빈 속에 닿아요. 톱이 천천히 더 깊이 썰어 들어가며 띠가 흐르고, K1 을 누르면 날이 라이트박스를 가로지르며 새 마노 덩어리의 단면이 깔려요.","idea":"A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.","buttons":"K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.","code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-agate","type":"code","name":"agate","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stain","min":0,"max":1,"about":"The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds."},{"name":"Width","min":1,"max":4,"about":"How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands."},{"name":"Light","min":-1,"max":1,"about":"Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own."}],"start":[0,2,1,0.06],"measures":{"motion":0.2044,"detail":0.342,"edges":0.8294,"complexity":2.5192,"coverage":1,"colour":0.128,"drift":0.0573},"knobResponse":[0.1001,0.2798,0.2989,0.0578]},{"slug":"analemma","title":"Analemma","family":"celestial","round":15,"note":"일 년 동안 같은 시각에 찍은 해가 바다 위 하늘에 8자를 그려요. K1 이 시각을 아침에서 저녁까지 돌려 8자를 눕히고, K4 를 올리면 화성의 눈물방울 모양이 돼요.","idea":"A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.","buttons":"K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.","code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-analemma","type":"code","name":"analemma","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":-1,"max":1,"about":"The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings."},{"name":"Speed","min":0.2,"max":3,"about":"Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top."},{"name":"Latitude","min":-1,"max":1,"about":"Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea."},{"name":"Orbit","min":0,"max":1,"about":"The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop."}],"start":[0,2,0,0.06],"measures":{"motion":0.0266,"detail":0.0181,"edges":0.3039,"complexity":1.0442,"coverage":0.9984,"colour":0.1966,"drift":0.0308},"knobResponse":[0.0776,0.085,0.0971,0.0827]},{"slug":"anderson-localization","title":"Anderson Localization","family":"wave","round":38,"note":"위치 에너지가 무작위로 놓인 사슬의 한 자리에 양자 입자를 놓고, 자리를 가로로, 시간을 세로로 그려요. 깨끗한 사슬이라면 점선을 따라 패널 끝까지 벌어졌을 원뿔이 27 LED 너비에서 멈추고, 얼룩진 기둥으로 끝까지 서 있어요. K3 은 무질서를 키워 기둥을 12 LED 까지 좁히고, K1 을 누르면 새 에너지와 새 자리에서 바로 다시 시작해요.","idea":"A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.","buttons":"K1 tap launches now, on a new sample of energies and a new site.","code":"// ===== Patternflow pattern =====\n// Title:   Anderson Localization\n// Family:  wave\n// Idea:    A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Anderson localization (Philip W. Anderson, 1958), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16\n//\n// Knob 1: Hue. Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive.\n// Knob 2: Speed. How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s.\n// Knob 3: Disorder. The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8.\n// Knob 4: Samples. How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over.\n// Buttons: K1 tap launches now, on a new sample of energies and a new site.\n\nconst W = 64, H = 128, NS = 192, OFF = 64, MAXS = 16;\n// Time per row: 0.25 in units of the hopping, so 128 rows hold t = 0 to 32\n// and a clean cone, whose edge runs 2 sites per unit, reaches 32 sites out at\n// row 64. RK4 steps of 0.025, ten to a row.\nconst TROW = 0.25, STEPS = 10, DT = TROW / STEPS;\n// Rows per second at Speed 1.\nconst RATE = 10;\n// Brightness from the probability on a log scale: 1e-3 is dark, 0.4 full.\nconst LMIN = -3, LSPAN = 2.6;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst { floor, min, max, abs, log10, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, dis: 3, ns: 1, begun: false,\n    // u: each sample's site energies over W, uniform in [-1/2, 1/2].\n    u: new Float64Array(MAXS * NS), re: new Float64Array(MAXS * NS), im: new Float64Array(MAXS * NS), done: 0,\n    ya: new Float64Array(NS), yb: new Float64Array(NS), ka: new Float64Array(NS), kb: new Float64Array(NS),\n    sa: new Float64Array(NS), sb: new Float64Array(NS),\n    n0: 96, t: 0, row: 0, prog: 0, hold: 0, norm: 1,\n    rho: new Float32Array(W * H), vt: new Float32Array(W * H), cone: new Uint8Array(W * H), dim: new Float32Array(H),\n    lo: [0, 0, 0], mid: [0, 0, 0], hi: [0, 0, 0], pos: [0, 0, 0], neg: [0, 0, 0],\n  };\n}\n\n// dy/dt for y = re + i im under i dy/dt = H y, H y_n = -(y_n+1 + y_n-1) + V_n y_n,\n// with hard walls past both ends of the chain: d re = H im, d im = -H re.\nfunction deriv(a, b, u, o, Wd, ka, kb) {\n  for (let n = 0; n \u003c NS; n++) {\n    const V = Wd * u[o + n];\n    let ha = V * a[n], hb = V * b[n];\n    if (n > 0) {\n      ha -= a[n - 1];\n      hb -= b[n - 1];\n    }\n    if (n \u003c NS - 1) {\n      ha -= a[n + 1];\n      hb -= b[n + 1];\n    }\n    ka[n] = hb;\n    kb[n] = -ha;\n  }\n}\n\n// One RK4 step of one sample.\nfunction rk4(S, k, h) {\n  const o = k * NS, { re, im, u, ya, yb, ka, kb, sa, sb } = S, Wd = S.dis;\n  for (let n = 0; n \u003c NS; n++) {\n    ya[n] = re[o + n];\n    yb[n] = im[o + n];\n  }\n  // k1\n  const a0 = re.subarray(o, o + NS), b0 = im.subarray(o, o + NS);\n  deriv(a0, b0, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] = ka[n];\n    sb[n] = kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k2\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k3\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + h * ka[n];\n    yb[n] = b0[n] + h * kb[n];\n  }\n  // k4\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    a0[n] += (h / 6) * (sa[n] + ka[n]);\n    b0[n] += (h / 6) * (sb[n] + kb[n]);\n  }\n}\n\n// Put sample k on the launch site and run it up to the time of the run.\nfunction start(S, k) {\n  const o = k * NS;\n  S.re.fill(0, o, o + NS);\n  S.im.fill(0, o, o + NS);\n  S.re[o + S.n0] = 1;\n  const steps = round(S.t / DT);\n  for (let i = 0; i \u003c steps; i++) rk4(S, k, DT);\n}\n\n// A new run: fresh energies for every sample and a new site, picked so the\n// start lies in the middle 40 columns.\nfunction launch(S) {\n  for (let i = 0; i \u003c MAXS * NS; i++) S.u[i] = random() - 0.5;\n  S.n0 = OFF + 12 + floor(random() * 40);\n  S.t = 0;\n  S.row = 0;\n  S.prog = 0;\n  S.hold = 0;\n  for (let k = 0; k \u003c S.ns; k++) start(S, k);\n  S.done = S.ns;\n  // What is left of the run before stays at 40%.\n  S.dim.fill(0.4);\n}\n\n// Write the row for the present time, the samples' probability averaged.\nfunction writeRow(S) {\n  const r = S.row, { re, im, rho, vt, cone, u } = S, ns = S.ns, c0 = S.n0 - OFF, edge = 2 * S.t;\n  let norm = 0;\n  for (let n = 0; n \u003c NS; n++) norm += re[n] * re[n] + im[n] * im[n];\n  S.norm = norm;\n  for (let x = 0; x \u003c W; x++) {\n    const n = OFF + x;\n    let s = 0;\n    for (let k = 0; k \u003c ns; k++) {\n      const i = k * NS + n;\n      s += re[i] * re[i] + im[i] * im[i];\n    }\n    const p = r * W + x;\n    rho[p] = s / ns;\n    // The stripes show the first sample's energies, fainter as more samples\n    // are averaged, since the average has no one landscape.\n    vt[p] = u[n] / ns;\n    // The clean chain's light cone, n0 +- 2t, dotted every other row.\n    const d = abs(abs(x - c0) - edge);\n    cone[p] = r % 2 === 0 && d \u003c 0.5 && r > 0 ? 1 : 0;\n  }\n  S.dim[r] = 1;\n  S.row++;\n}\n\n// Run the present time forward to row r and write each row on the way.\nfunction advanceTo(S, target) {\n  while (S.row \u003c= target && S.row \u003c H) {\n    if (S.row > 0) {\n      for (let i = 0; i \u003c STEPS; i++) for (let k = 0; k \u003c S.ns; k++) rk4(S, k, DT);\n      S.t = S.row * TROW;\n    }\n    writeRow(S);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.dis = cl(k[2], 4, 12);\n  S.ns = round(cl(k[3], 1, MAXS));\n  if (!S.begun) {\n    // Open on a whole run already written, and a new one starting over it.\n    launch(S);\n    advanceTo(S, H - 1);\n    launch(S);\n    S.begun = true;\n  }\n  // Samples turned up in the middle of a run catch up to its time.\n  while (S.done \u003c S.ns) start(S, S.done++);\n  if (S.done > S.ns) S.done = S.ns;\n  if (input.btnPressed && input.btnPressed[0]) launch(S);\n  if (S.row >= H) {\n    S.hold += d * S.speed;\n    // Hold the finished run 1.5 s at Speed 2.\n    if (S.hold > 3) launch(S);\n    return;\n  }\n  S.prog += d * S.speed * RATE;\n  advanceTo(S, floor(S.prog));\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { rho, vt, cone, dim, lo, mid, hi, pos, neg } = S;\n  const h = S.hue + H0;\n  // Orange to yellow on the panel goes brown or olive when dim. Round there\n  // the tails turn toward rose instead of toward yellow, the body is paled\n  // to peach or butter, and everything is lifted.\n  const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.13, 0, 1);\n  hsv(h + 0.09 - 0.19 * warm, 1 - 0.2 * warm, 1, lo);\n  hsv(h, 0.85 - 0.4 * warm, 1, mid);\n  hsv(h - 0.04, 0.18, 1, hi);\n  hsv(h + 0.45, 0.7, 1, pos);\n  hsv(h + 0.3, 0.7, 1, neg);\n  const vlift = 1 + 0.4 * warm, head = S.row, mixOld = 0.5 + 0.4 * warm;\n  for (let y = 0; y \u003c H; y++) {\n    const old = dim[y] \u003c 1, dm = old ? dim[y] + 0.2 * warm : 1;\n    // Two rows of dark under the head, between the new run and the old.\n    const gap = old && y >= head && y \u003c head + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0, g = 0, b = 0;\n      if (!gap) {\n        const L = cl((log10(rho[p] + 1e-12) - LMIN) / LSPAN, 0, 1);\n        if (L > 0) {\n          const v = min(1, (0.1 + 0.9 * L) * vlift);\n          let c0 = lo, c1 = mid, f = L * 2;\n          if (L > 0.5) {\n            c0 = mid;\n            c1 = hi;\n            f = L * 2 - 1;\n          }\n          r = (c0[0] + (c1[0] - c0[0]) * f) * v;\n          g = (c0[1] + (c1[1] - c0[1]) * f) * v;\n          b = (c0[2] + (c1[2] - c0[2]) * f) * v;\n          // The run before is drawn half in the tails' colour, so it sits\n          // back and dims to violet or rose, not to grey or brown.\n          if (old) {\n            r += (lo[0] * v - r) * mixOld;\n            g += (lo[1] * v - g) * mixOld;\n            b += (lo[2] * v - b) * mixOld;\n          }\n        }\n        // The site energies, faint: high sites one tint, low sites another.\n        const e = vt[p], c = e > 0 ? pos : neg, a = 0.16 * abs(e) * 2;\n        r = max(r, c[0] * a);\n        g = max(g, c[1] * a);\n        b = max(b, c[2] * a);\n        if (cone[p]) {\n          r = max(r, 0.32);\n          g = max(g, 0.32);\n          b = max(b, 0.32);\n        }\n        r *= dm;\n        g *= dm;\n        b *= dm;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","layer":{"id":"layer-anderson-localization","type":"code","name":"anderson-localization","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Anderson Localization\n// Family:  wave\n// Idea:    A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Anderson localization (Philip W. Anderson, 1958), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16\n//\n// Knob 1: Hue. Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive.\n// Knob 2: Speed. How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s.\n// Knob 3: Disorder. The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8.\n// Knob 4: Samples. How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over.\n// Buttons: K1 tap launches now, on a new sample of energies and a new site.\n\nconst W = 64, H = 128, NS = 192, OFF = 64, MAXS = 16;\n// Time per row: 0.25 in units of the hopping, so 128 rows hold t = 0 to 32\n// and a clean cone, whose edge runs 2 sites per unit, reaches 32 sites out at\n// row 64. RK4 steps of 0.025, ten to a row.\nconst TROW = 0.25, STEPS = 10, DT = TROW / STEPS;\n// Rows per second at Speed 1.\nconst RATE = 10;\n// Brightness from the probability on a log scale: 1e-3 is dark, 0.4 full.\nconst LMIN = -3, LSPAN = 2.6;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst { floor, min, max, abs, log10, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, dis: 3, ns: 1, begun: false,\n    // u: each sample's site energies over W, uniform in [-1/2, 1/2].\n    u: new Float64Array(MAXS * NS), re: new Float64Array(MAXS * NS), im: new Float64Array(MAXS * NS), done: 0,\n    ya: new Float64Array(NS), yb: new Float64Array(NS), ka: new Float64Array(NS), kb: new Float64Array(NS),\n    sa: new Float64Array(NS), sb: new Float64Array(NS),\n    n0: 96, t: 0, row: 0, prog: 0, hold: 0, norm: 1,\n    rho: new Float32Array(W * H), vt: new Float32Array(W * H), cone: new Uint8Array(W * H), dim: new Float32Array(H),\n    lo: [0, 0, 0], mid: [0, 0, 0], hi: [0, 0, 0], pos: [0, 0, 0], neg: [0, 0, 0],\n  };\n}\n\n// dy/dt for y = re + i im under i dy/dt = H y, H y_n = -(y_n+1 + y_n-1) + V_n y_n,\n// with hard walls past both ends of the chain: d re = H im, d im = -H re.\nfunction deriv(a, b, u, o, Wd, ka, kb) {\n  for (let n = 0; n \u003c NS; n++) {\n    const V = Wd * u[o + n];\n    let ha = V * a[n], hb = V * b[n];\n    if (n > 0) {\n      ha -= a[n - 1];\n      hb -= b[n - 1];\n    }\n    if (n \u003c NS - 1) {\n      ha -= a[n + 1];\n      hb -= b[n + 1];\n    }\n    ka[n] = hb;\n    kb[n] = -ha;\n  }\n}\n\n// One RK4 step of one sample.\nfunction rk4(S, k, h) {\n  const o = k * NS, { re, im, u, ya, yb, ka, kb, sa, sb } = S, Wd = S.dis;\n  for (let n = 0; n \u003c NS; n++) {\n    ya[n] = re[o + n];\n    yb[n] = im[o + n];\n  }\n  // k1\n  const a0 = re.subarray(o, o + NS), b0 = im.subarray(o, o + NS);\n  deriv(a0, b0, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] = ka[n];\n    sb[n] = kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k2\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k3\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + h * ka[n];\n    yb[n] = b0[n] + h * kb[n];\n  }\n  // k4\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    a0[n] += (h / 6) * (sa[n] + ka[n]);\n    b0[n] += (h / 6) * (sb[n] + kb[n]);\n  }\n}\n\n// Put sample k on the launch site and run it up to the time of the run.\nfunction start(S, k) {\n  const o = k * NS;\n  S.re.fill(0, o, o + NS);\n  S.im.fill(0, o, o + NS);\n  S.re[o + S.n0] = 1;\n  const steps = round(S.t / DT);\n  for (let i = 0; i \u003c steps; i++) rk4(S, k, DT);\n}\n\n// A new run: fresh energies for every sample and a new site, picked so the\n// start lies in the middle 40 columns.\nfunction launch(S) {\n  for (let i = 0; i \u003c MAXS * NS; i++) S.u[i] = random() - 0.5;\n  S.n0 = OFF + 12 + floor(random() * 40);\n  S.t = 0;\n  S.row = 0;\n  S.prog = 0;\n  S.hold = 0;\n  for (let k = 0; k \u003c S.ns; k++) start(S, k);\n  S.done = S.ns;\n  // What is left of the run before stays at 40%.\n  S.dim.fill(0.4);\n}\n\n// Write the row for the present time, the samples' probability averaged.\nfunction writeRow(S) {\n  const r = S.row, { re, im, rho, vt, cone, u } = S, ns = S.ns, c0 = S.n0 - OFF, edge = 2 * S.t;\n  let norm = 0;\n  for (let n = 0; n \u003c NS; n++) norm += re[n] * re[n] + im[n] * im[n];\n  S.norm = norm;\n  for (let x = 0; x \u003c W; x++) {\n    const n = OFF + x;\n    let s = 0;\n    for (let k = 0; k \u003c ns; k++) {\n      const i = k * NS + n;\n      s += re[i] * re[i] + im[i] * im[i];\n    }\n    const p = r * W + x;\n    rho[p] = s / ns;\n    // The stripes show the first sample's energies, fainter as more samples\n    // are averaged, since the average has no one landscape.\n    vt[p] = u[n] / ns;\n    // The clean chain's light cone, n0 +- 2t, dotted every other row.\n    const d = abs(abs(x - c0) - edge);\n    cone[p] = r % 2 === 0 && d \u003c 0.5 && r > 0 ? 1 : 0;\n  }\n  S.dim[r] = 1;\n  S.row++;\n}\n\n// Run the present time forward to row r and write each row on the way.\nfunction advanceTo(S, target) {\n  while (S.row \u003c= target && S.row \u003c H) {\n    if (S.row > 0) {\n      for (let i = 0; i \u003c STEPS; i++) for (let k = 0; k \u003c S.ns; k++) rk4(S, k, DT);\n      S.t = S.row * TROW;\n    }\n    writeRow(S);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.dis = cl(k[2], 4, 12);\n  S.ns = round(cl(k[3], 1, MAXS));\n  if (!S.begun) {\n    // Open on a whole run already written, and a new one starting over it.\n    launch(S);\n    advanceTo(S, H - 1);\n    launch(S);\n    S.begun = true;\n  }\n  // Samples turned up in the middle of a run catch up to its time.\n  while (S.done \u003c S.ns) start(S, S.done++);\n  if (S.done > S.ns) S.done = S.ns;\n  if (input.btnPressed && input.btnPressed[0]) launch(S);\n  if (S.row >= H) {\n    S.hold += d * S.speed;\n    // Hold the finished run 1.5 s at Speed 2.\n    if (S.hold > 3) launch(S);\n    return;\n  }\n  S.prog += d * S.speed * RATE;\n  advanceTo(S, floor(S.prog));\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { rho, vt, cone, dim, lo, mid, hi, pos, neg } = S;\n  const h = S.hue + H0;\n  // Orange to yellow on the panel goes brown or olive when dim. Round there\n  // the tails turn toward rose instead of toward yellow, the body is paled\n  // to peach or butter, and everything is lifted.\n  const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.13, 0, 1);\n  hsv(h + 0.09 - 0.19 * warm, 1 - 0.2 * warm, 1, lo);\n  hsv(h, 0.85 - 0.4 * warm, 1, mid);\n  hsv(h - 0.04, 0.18, 1, hi);\n  hsv(h + 0.45, 0.7, 1, pos);\n  hsv(h + 0.3, 0.7, 1, neg);\n  const vlift = 1 + 0.4 * warm, head = S.row, mixOld = 0.5 + 0.4 * warm;\n  for (let y = 0; y \u003c H; y++) {\n    const old = dim[y] \u003c 1, dm = old ? dim[y] + 0.2 * warm : 1;\n    // Two rows of dark under the head, between the new run and the old.\n    const gap = old && y >= head && y \u003c head + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0, g = 0, b = 0;\n      if (!gap) {\n        const L = cl((log10(rho[p] + 1e-12) - LMIN) / LSPAN, 0, 1);\n        if (L > 0) {\n          const v = min(1, (0.1 + 0.9 * L) * vlift);\n          let c0 = lo, c1 = mid, f = L * 2;\n          if (L > 0.5) {\n            c0 = mid;\n            c1 = hi;\n            f = L * 2 - 1;\n          }\n          r = (c0[0] + (c1[0] - c0[0]) * f) * v;\n          g = (c0[1] + (c1[1] - c0[1]) * f) * v;\n          b = (c0[2] + (c1[2] - c0[2]) * f) * v;\n          // The run before is drawn half in the tails' colour, so it sits\n          // back and dims to violet or rose, not to grey or brown.\n          if (old) {\n            r += (lo[0] * v - r) * mixOld;\n            g += (lo[1] * v - g) * mixOld;\n            b += (lo[2] * v - b) * mixOld;\n          }\n        }\n        // The site energies, faint: high sites one tint, low sites another.\n        const e = vt[p], c = e > 0 ? pos : neg, a = 0.16 * abs(e) * 2;\n        r = max(r, c[0] * a);\n        g = max(g, c[1] * a);\n        b = max(b, c[2] * a);\n        if (cone[p]) {\n          r = max(r, 0.32);\n          g = max(g, 0.32);\n          b = max(b, 0.32);\n        }\n        r *= dm;\n        g *= dm;\n        b *= dm;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s."},{"name":"Disorder","min":4,"max":12,"about":"The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8."},{"name":"Samples","min":1,"max":16,"about":"How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over."}],"start":[0,2,4,1],"measures":{"motion":0.0706,"detail":0.0573,"edges":0.2197,"complexity":1.2567,"coverage":0.5738,"colour":0.1923,"drift":0.1291},"knobResponse":[0.0885,0.0786,0.0464,0.0484]},{"slug":"ant-farm","title":"Ant Farm","family":"insect","round":17,"note":"유리 사이에 모래를 채운 개미집에서 수확개미들이 바닥의 여왕 방까지 굴을 파고, 판 모래를 입구 옆 더미에 올리거나 오래된 막다른 굴에 다시 다져 넣어요. K1 을 누르면 뚜껑으로 물을 줘서 젖은 모래 얼룩이 천천히 아래로 번져요.","idea":"Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.","buttons":"K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","layer":{"id":"layer-ant-farm","type":"code","name":"ant-farm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fill","min":0,"max":1,"about":"Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second."},{"name":"Ants","min":40,"max":120,"about":"Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest."},{"name":"Lamp","min":0,"max":1,"about":"From daylight to the red lamp keepers watch by, because ants do not see red."}],"start":[0,2,40,0.06],"measures":{"motion":0.0748,"detail":0.0791,"edges":0.3143,"complexity":0.7035,"coverage":0.9824,"colour":0.2295,"drift":0.0611},"knobResponse":[0.2509,0.0544,0.0511,0.2616]},{"slug":"antoine-necklace","title":"Antoine's Necklace","family":"space","round":37,"note":"경기장 트랙 모양 유리 목걸이 안에 고리 18개가 이웃끼리 한 번씩 걸린 사슬이 들어 있고, 고리마다 목걸이 전체를 0.184배로 줄인 꼴이라 그 안에 또 사슬이 있어요. 카메라가 고리 하나로 9초에 한 세대씩 날아 들어가면 겉은 유리 테두리로 얇아지고 속 사슬이 단단해져서, 9초 뒤에는 색만 한 세대 넘어간 처음 그림이 돼요. K3 은 사슬의 고리를 30개까지 늘리고, 누르면 옆의 고리로 옮겨 들어가요.","idea":"A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.","buttons":"K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.","code":"// ===== Patternflow pattern =====\n// Title:   Antoine's Necklace\n// Family:  space\n// Idea:    A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Antoine's necklace (Louis Antoine, 1921), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90\n//\n// Knob 1: Hue. Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown.\n// Knob 2: Speed. How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s.\n// Knob 3: Links. Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12.\n// Knob 4: Turn. How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2.\n// Buttons: K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.\n\n// The shape. The core of the necklace is a stadium: two straight runs of\n// length 2L joined by two half circles of radius 1. The solid torus round it\n// has tube radius RHO. With L = 1 and RHO = 0.27 the outside is 2.54 wide and\n// 4.54 tall, and at a turn of 45 degrees it stands about twice as tall as it\n// is wide, like the panel.\n//\n// The links. A chain of N links runs round the core, one every P / N of arc\n// (P = 4L + 2 pi = 10.28). Every link is the necklace itself scaled by s, its\n// long axis along the core, and they alternate: even links lie in the\n// necklace's plane, odd links stand across it. The spacing is SPACE = 3.1\n// times a link's own core half width, so s = P / (3.1 N). Measured by\n// sampling every link's core at 96 points: at N = 18 the closest two\n// neighbours come within 0.47 of a link tube radius of touching, a link comes\n// within 0.38 of a tube radius of the parent's wall, and links two apart stay\n// 6 tube radii apart; at N = 30 these are 0.91, 4.1 and 6.1. The Gauss\n// linking integral, at 120 points a link for N = 18, 24 and 30, comes to 1\n// for every pair of neighbours and to 0 for every other pair. Uniform\n// spacing fails below 18: at 16 the bends turn neighbours 37 degrees against\n// each other, the end of one link swings towards the side of the next, and\n// the best scale still leaves them 0.05 of a tube radius into each other.\n//\n// Every link holds a chain built the same way, so the necklace is a fixed\n// set of similarity maps and it is the same at every scale. The dive target\n// is a flat link on a straight run, whose map is a pure shrink and shift,\n// x -> s x + c. The camera slides towards the map's fixed point\n// p = c / (1 - s), a point of the Cantor set, its distance to p shrinking by s\n// each generation, so the view at the end of one generation is the view at\n// its start. What changes is the colour: generations keep theirs as they grow.\n\nconst W = 64, H = 128, NPIX = W * H;\nconst L = 1, RHO = 0.27, SPACE = 3.1, P = 4 * L + 2 * Math.PI;\nconst BX = 1 + RHO, BY = L + 1 + RHO, BZ = RHO;\n// The camera stands 9 units from the necklace's middle with a focal length of\n// 222 LEDs, so the 4.54 units of height take 112 rows and the necklace's\n// neighbours in the chain it belongs to show above and below it.\nconst D0 = 9, F = 222;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Point and tangent of the core at arc length u, starting at the middle of\n// the right run and going up, so anticlockwise.\nfunction core(u, out) {\n  u = ((u % P) + P) % P;\n  let x, y, tx, ty;\n  if (u \u003c L) (x = 1), (y = u), (tx = 0), (ty = 1);\n  else if (u \u003c L + PI) {\n    const a = u - L;\n    (x = cos(a)), (y = L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else if (u \u003c 3 * L + PI) (x = -1), (y = L - (u - L - PI)), (tx = 0), (ty = -1);\n  else if (u \u003c 3 * L + 2 * PI) {\n    const a = PI + (u - 3 * L - PI);\n    (x = cos(a)), (y = -L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else (x = 1), (y = -L + (u - 3 * L - 2 * PI)), (tx = 0), (ty = 1);\n  out[0] = x;\n  out[1] = y;\n  out[2] = tx;\n  out[3] = ty;\n}\n\n// The N maps of one chain: rotation (columns: the link's across, along and\n// out-of-plane axes) and centre, all for a parent of size 1.\nfunction buildChain(N) {\n  const s = P / (SPACE * N), rot = new Float64Array(9 * N), ctr = new Float64Array(3 * N), targets = [], c = [0, 0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    core((i * P) / N, c);\n    const [x, y, tx, ty] = c, nx = ty, ny = -tx, o = 9 * i;\n    if (i % 2 === 0) {\n      // A flat link on a straight run gets no rotation at all, even on the\n      // left run where its axes point the other way: the stadium looks the\n      // same turned half round, and this keeps its map a pure shrink.\n      const flatRun = tx === 0;\n      rot.set(flatRun ? [1, 0, 0, 0, 1, 0, 0, 0, 1] : [nx, ny, 0, tx, ty, 0, 0, 0, 1], o);\n      if (flatRun) targets.push(i);\n    } else rot.set([0, 0, 1, tx, ty, 0, -ty, tx, 0], o);\n    ctr[3 * i] = x;\n    ctr[3 * i + 1] = y;\n  }\n  return { N, s, rot, ctr, targets };\n}\n\n// Ray directions through each LED, in view space (x right, y up, looking\n// down -z).\nconst RDX = new Float32Array(NPIX), RDY = new Float32Array(NPIX), RDZ = new Float32Array(NPIX);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - W / 2) / F, dy = -(y + 0.5 - H / 2) / F, n = 1 / sqrt(dx * dx + dy * dy + 1), p = y * W + x;\n    RDX[p] = dx * n;\n    RDY[p] = dy * n;\n    RDZ[p] = -n;\n  }\n\n// Light from the upper left and in front, and the half vector for the shine.\nconst LV = (() => {\n  const l = [-0.55, 0.6, 0.58], n = 1 / Math.hypot(...l);\n  const lx = l[0] * n, ly = l[1] * n, lz = l[2] * n, hz = lz + 1, hn = 1 / Math.hypot(lx, ly, hz);\n  return [lx, ly, lz, lx * hn, ly * hn, hz * hn];\n})();\n\n// Solidity and glass by apparent generation a = generation - zoom: a link is\n// solid from a = 0.85 up, thins to clear by a = 0.2, and its glass rim fades\n// out between a = 0 and a = -1, where it is the parent of the panel's parent.\nconst solidOf = (a) => sm(0.2, 0.85, a);\nconst glassOf = (a) => sm(-1, -0.25, a) * (1 - solidOf(a));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, links: 18, turn: 45, z: 0, gen: 0, clock: 0,\n    chain: buildChain(18), tgt: 0, ctx: 0, pend: false, from: null, glide: 1, gz0: 0,\n    zb: new Float32Array(NPIX), cr: new Float32Array(NPIX), cg: new Float32Array(NPIX), cb: new Float32Array(NPIX),\n    pal: new Float32Array(18), palHue: NaN, list: [],\n  };\n}\n\n// The camera's aim point for target index ti of a chain: p = c / (1 - s).\nfunction aim(ch, ti) {\n  const i = ch.targets[ti % ch.targets.length], k = 1 / (1 - ch.s);\n  return [ch.ctr[3 * i] * k, ch.ctr[3 * i + 1] * k, 0, i];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 18, 45], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.turn = cl(k[3], 45, 90);\n  const n = 2 * Math.round(cl(k[2], 18, 30) / 2);\n  if (n !== S.chain.N) {\n    S.chain = buildChain(n);\n    S.tgt = 0;\n    S.ctx = S.chain.targets[0];\n    S.glide = 1;\n    S.pend = false;\n  }\n  // The glide takes 1.5 s, which is gz of a generation. It must end before\n  // the wrap, so a tap late in a generation waits for the next one, where\n  // every target's path still starts from the same view.\n  const gz = (1.5 * S.speed) / 18;\n  if (input.btnPressed && input.btnPressed[0]) S.pend = true;\n  if (S.pend && S.glide >= 1 && S.z + gz \u003c 0.95) {\n    S.from = aim(S.chain, S.tgt);\n    S.tgt = (S.tgt + 1) % S.chain.targets.length;\n    S.glide = 0;\n    S.gz0 = S.z;\n    S.pend = false;\n  }\n  // If Speed is turned up during a glide it still ends by z = 0.97.\n  S.glide = min(1, max(S.glide + d / 1.5, (S.z - S.gz0) / (0.97 - S.gz0)));\n  S.clock += (d * S.speed) / 2;\n  S.z += (d * S.speed) / 18;\n  if (S.z >= 1) {\n    // One generation deeper: the target link becomes the necklace, and the\n    // necklace it sat in becomes the one round the panel.\n    S.z -= 1;\n    S.gen++;\n    S.glide = 1;\n    S.ctx = S.chain.targets[S.tgt];\n  }\n}\n\nfunction palette(S) {\n  // Three generation colours a third apart. At Hue 0 they are lime (glass of\n  // the opening), azure (the opening chain) and rose. Body colour and the\n  // floor its shaded side keeps: a red, orange or yellow body keeps more of\n  // its light and less of its saturation, as at half light it reads brown.\n  for (let g = 0; g \u003c 3; g++) {\n    const h = S.hue + 0.227 + g / 3, hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.02, hw) * (1 - sm(0.17, 0.27, hw));\n    hsv(h, 0.78 - 0.3 * warm, 1, S.pal, g * 6);\n    hsv(h, 0.28, 1, S.pal, g * 6 + 3);\n    S.pal[15 + g] = warm;\n  }\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const ch = S.chain, s = ch.s, z = S.z, sz = pow(s, z);\n  // The aim point, gliding after a tap.\n  let p = aim(ch, S.tgt);\n  if (S.glide \u003c 1 && S.from) {\n    const w = sm(0, 1, S.glide);\n    p = [S.from[0] + (p[0] - S.from[0]) * w, S.from[1] + (p[1] - S.from[1]) * w, 0, p[3]];\n  }\n  // View rotation: turn about the upright axis, then lean back 12 degrees.\n  // Halfway through each generation the necklace has swung 22 degrees\n  // further round, so the run the camera dives at turns to face along the\n  // view and the empty middle of the necklace narrows; it swings back by the\n  // end, and the swing starts and stops at rest, so the loop has no seam.\n  const sw = sin(PI * z), psi = ((S.turn + 22 * sw * sw + 8 * sin((2 * PI * S.clock) / 25)) * PI) / 180, tilt = (-12 * PI) / 180;\n  const cy = cos(psi), sy = sin(psi), ct = cos(tilt), st = sin(tilt);\n  // R = Rx(tilt) * Ry(psi), row-major.\n  const R = [cy, 0, sy, st * sy, ct, -st * cy, -ct * sy, st, ct * cy];\n  const k1 = 1 - sz, ox = p[0] * k1, oy = p[1] * k1;\n  // World point x -> view: R (x - (1 - s^z) p) - (0, 0, s^z D0).\n  const list = (S.list = []);\n  const near = 0.05 * sz * D0;\n  const visit = (Sc, M, cx, cy0, cz, gen) => {\n    // Centre in view.\n    const wx = cx - ox, wy = cy0 - oy, wz = cz;\n    const vx = R[0] * wx + R[1] * wy + R[2] * wz, vy = R[3] * wx + R[4] * wy + R[5] * wz, vz = R[6] * wx + R[7] * wy + R[8] * wz - sz * D0;\n    const rad = Sc * (BY + 0.05);\n    if (gen >= 0) {\n      if (vz - rad > -near) return;\n      const dz = -vz, ext = rad;\n      if (dz > ext) {\n        const sx = W / 2 + (F * vx) / dz, syy = H / 2 - (F * vy) / dz, pr = (F * ext) / (dz - ext);\n        if (sx + pr \u003c 0 || sx - pr > W || syy + pr \u003c 0 || syy - pr > H) return;\n        // A tube under a third of an LED thick is not drawn.\n        if ((F * Sc * RHO) / dz \u003c 0.17) return;\n      }\n      const a = gen - z, sol = solidOf(a), gl = glassOf(a);\n      if (sol > 0.004 || gl > 0.03) {\n        const MV = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n        for (let r = 0; r \u003c 3; r++)\n          for (let c = 0; c \u003c 3; c++) MV[r * 3 + c] = R[r * 3] * M[c] + R[r * 3 + 1] * M[3 + c] + R[r * 3 + 2] * M[6 + c];\n        list.push({ S: Sc, MV, vx, vy, vz, sol, gl, col: (((S.gen + gen) % 3) + 3) % 3 });\n      }\n      // Behind a link more than 97% solid its chain does not show.\n      if (sol >= 0.97 || gen >= 2) return;\n    }\n    for (let i = 0; i \u003c ch.N; i++) {\n      const o = 9 * i, Ri = ch.rot, ci = ch.ctr;\n      // Child rotation M * Ri (row-major M; Ri stored by columns).\n      const CM = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n      for (let r = 0; r \u003c 3; r++)\n        for (let c = 0; c \u003c 3; c++) CM[r * 3 + c] = M[r * 3] * Ri[o + c * 3] + M[r * 3 + 1] * Ri[o + c * 3 + 1] + M[r * 3 + 2] * Ri[o + c * 3 + 2];\n      const px = ci[3 * i], py = ci[3 * i + 1];\n      visit(Sc * s, CM, cx + Sc * (M[0] * px + M[1] * py), cy0 + Sc * (M[3] * px + M[4] * py), cz + Sc * (M[6] * px + M[7] * py), gen + 1);\n    }\n  };\n  // Start from the necklace the panel's necklace is a link of: the link the\n  // camera dived into last generation.\n  const ct0 = ch.ctr, ci0 = S.ctx;\n  visit(1 / s, [1, 0, 0, 0, 1, 0, 0, 0, 1], -ct0[3 * ci0] / s, -ct0[3 * ci0 + 1] / s, 0, -1);\n\n  const { zb, cr, cg, cb } = S;\n  zb.fill(Infinity);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  for (const e of list) if (e.sol >= 0.999) raster(S, e, true, sz);\n  const rest = list.filter((e) => e.sol \u003c 0.999).sort((a, b) => a.vz - b.vz);\n  for (const e of rest) raster(S, e, false, sz);\n  for (let i = 0; i \u003c NPIX; i++) display.setPixel(i % W, (i / W) | 0, cr[i] * 255, cg[i] * 255, cb[i] * 255);\n}\n\n// Trace every LED in the link's screen box against the link's own distance\n// field, in the link's frame where it has half width 1.\nfunction raster(S, e, solid, sz) {\n  const { MV, vx, vy, vz } = e, Sc = e.S, inv = 1 / Sc;\n  // Camera in link coordinates: MV^T (0 - centre) / S.\n  const ox = -(MV[0] * vx + MV[3] * vy + MV[6] * vz) * inv, oy = -(MV[1] * vx + MV[4] * vy + MV[7] * vz) * inv, oz = -(MV[2] * vx + MV[5] * vy + MV[8] * vz) * inv;\n  // Screen box from the eight corners of the link's box.\n  let x0 = W, x1 = -1, y0 = H, y1 = -1, full = false;\n  for (let c = 0; c \u003c 8; c++) {\n    const lx = c & 1 ? BX : -BX, ly = c & 2 ? BY : -BY, lz = c & 4 ? BZ : -BZ;\n    const px = vx + Sc * (MV[0] * lx + MV[1] * ly + MV[2] * lz), py = vy + Sc * (MV[3] * lx + MV[4] * ly + MV[5] * lz), pz = vz + Sc * (MV[6] * lx + MV[7] * ly + MV[8] * lz);\n    if (-pz \u003c 1e-3) {\n      full = true;\n      break;\n    }\n    const sx = W / 2 + (F * px) / -pz, sy = H / 2 - (F * py) / -pz;\n    if (sx \u003c x0) x0 = sx;\n    if (sx > x1) x1 = sx;\n    if (sy \u003c y0) y0 = sy;\n    if (sy > y1) y1 = sy;\n  }\n  if (full) (x0 = 0), (x1 = W - 1), (y0 = 0), (y1 = H - 1);\n  const X0 = max(0, floor(x0)), X1 = min(W - 1, floor(x1)), Y0 = max(0, floor(y0)), Y1 = min(H - 1, floor(y1));\n  if (X0 > X1 || Y0 > Y1) return;\n  const { zb, cr, cg, cb, pal } = S, g6 = e.col * 6, warm = pal[15 + e.col];\n  const br = pal[g6], bg = pal[g6 + 1], bb = pal[g6 + 2], gr = pal[g6 + 3], gg = pal[g6 + 4], gbb = pal[g6 + 5];\n  const [lx, ly, lz, hx, hy, hz] = LV;\n  const eps = 0.3 / F, sol = e.sol, gl = e.gl, dref = sz * D0;\n  for (let py = Y0; py \u003c= Y1; py++)\n    for (let px = X0; px \u003c= X1; px++) {\n      const p = py * W + px, rx = RDX[p], ry = RDY[p], rz = RDZ[p];\n      const dx = MV[0] * rx + MV[3] * ry + MV[6] * rz, dy = MV[1] * rx + MV[4] * ry + MV[7] * rz, dz = MV[2] * rx + MV[5] * ry + MV[8] * rz;\n      // Slab test against the box.\n      let t0 = 0, t1 = 1e9;\n      {\n        const ix = 1 / dx, a = (-BX - ox) * ix, b = (BX - ox) * ix;\n        t0 = max(t0, min(a, b));\n        t1 = min(t1, max(a, b));\n        const iy = 1 / dy, c = (-BY - oy) * iy, d = (BY - oy) * iy;\n        t0 = max(t0, min(c, d));\n        t1 = min(t1, max(c, d));\n        const iz = 1 / dz, f = (-BZ - oz) * iz, g = (BZ - oz) * iz;\n        t0 = max(t0, min(f, g));\n        t1 = min(t1, max(f, g));\n      }\n      if (t0 >= t1) continue;\n      const zmax = zb[p] * inv;\n      if (t0 >= zmax) continue;\n      let t = t0, hit = false, qx = 0, qy = 0, qz = 0, q = 0, rr = 0, dyy = 0;\n      for (let it = 0; it \u003c 48; it++) {\n        qx = ox + t * dx;\n        qy = oy + t * dy;\n        qz = oz + t * dz;\n        const ay = abs(qy) - L;\n        dyy = ay > 0 ? ay : 0;\n        rr = sqrt(qx * qx + dyy * dyy);\n        q = rr - 1;\n        const dist = sqrt(q * q + qz * qz) - RHO;\n        if (dist \u003c eps * t) {\n          hit = true;\n          break;\n        }\n        t += dist;\n        if (t > t1 || t > zmax) break;\n      }\n      if (!hit) continue;\n      // Normal in link coordinates, then in view.\n      const rinv = rr > 1e-6 ? 1 / rr : 0, gx = q * qx * rinv, gy = q * (qy \u003c 0 ? -dyy : dyy) * rinv;\n      let nl = sqrt(gx * gx + gy * gy + qz * qz);\n      nl = nl > 1e-9 ? 1 / nl : 0;\n      const nlx = gx * nl, nly = gy * nl, nlz = qz * nl;\n      const nx = MV[0] * nlx + MV[1] * nly + MV[2] * nlz, ny = MV[3] * nlx + MV[4] * nly + MV[5] * nlz, nz = MV[6] * nlx + MV[7] * nly + MV[8] * nlz;\n      const ndv = -(nx * rx + ny * ry + nz * rz), edge = abs(ndv);\n      const lam = max(0, nx * lx + ny * ly + nz * lz), spec = pow(max(0, nx * hx + ny * hy + nz * hz), 36);\n      const tv = t * Sc;\n      // Depth: nearer than the necklace's middle is brighter.\n      const fog = cl(1.25 - 0.55 * (tv / dref), 0.45, 1.2);\n      const amb = 0.2 + 0.25 * warm, body = (amb + (1 - amb) * lam) * sm(0.0, 0.45, edge) * fog;\n      let r = br * body + 0.75 * spec * fog, g = bg * body + 0.75 * spec * fog, b = bb * body + 0.75 * spec * fog;\n      if (solid) {\n        zb[p] = tv;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n        continue;\n      }\n      // Glass: a faint tint over its whole face, bright at the rim, and the\n      // shine. A thinning link blends its body over what lies behind it.\n      const rim = pow(1 - edge, 2.2), gw = gl * (0.05 + 0.85 * rim);\n      const keep = 1 - sol;\n      cr[p] = cr[p] * keep + r * sol + gr * gw + 0.5 * spec * gl;\n      cg[p] = cg[p] * keep + g * sol + gg * gw + 0.5 * spec * gl;\n      cb[p] = cb[p] * keep + b * sol + gbb * gw + 0.5 * spec * gl;\n    }\n}\n","layer":{"id":"layer-antoine-necklace","type":"code","name":"antoine-necklace","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Antoine's Necklace\n// Family:  space\n// Idea:    A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Antoine's necklace (Louis Antoine, 1921), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90\n//\n// Knob 1: Hue. Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown.\n// Knob 2: Speed. How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s.\n// Knob 3: Links. Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12.\n// Knob 4: Turn. How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2.\n// Buttons: K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.\n\n// The shape. The core of the necklace is a stadium: two straight runs of\n// length 2L joined by two half circles of radius 1. The solid torus round it\n// has tube radius RHO. With L = 1 and RHO = 0.27 the outside is 2.54 wide and\n// 4.54 tall, and at a turn of 45 degrees it stands about twice as tall as it\n// is wide, like the panel.\n//\n// The links. A chain of N links runs round the core, one every P / N of arc\n// (P = 4L + 2 pi = 10.28). Every link is the necklace itself scaled by s, its\n// long axis along the core, and they alternate: even links lie in the\n// necklace's plane, odd links stand across it. The spacing is SPACE = 3.1\n// times a link's own core half width, so s = P / (3.1 N). Measured by\n// sampling every link's core at 96 points: at N = 18 the closest two\n// neighbours come within 0.47 of a link tube radius of touching, a link comes\n// within 0.38 of a tube radius of the parent's wall, and links two apart stay\n// 6 tube radii apart; at N = 30 these are 0.91, 4.1 and 6.1. The Gauss\n// linking integral, at 120 points a link for N = 18, 24 and 30, comes to 1\n// for every pair of neighbours and to 0 for every other pair. Uniform\n// spacing fails below 18: at 16 the bends turn neighbours 37 degrees against\n// each other, the end of one link swings towards the side of the next, and\n// the best scale still leaves them 0.05 of a tube radius into each other.\n//\n// Every link holds a chain built the same way, so the necklace is a fixed\n// set of similarity maps and it is the same at every scale. The dive target\n// is a flat link on a straight run, whose map is a pure shrink and shift,\n// x -> s x + c. The camera slides towards the map's fixed point\n// p = c / (1 - s), a point of the Cantor set, its distance to p shrinking by s\n// each generation, so the view at the end of one generation is the view at\n// its start. What changes is the colour: generations keep theirs as they grow.\n\nconst W = 64, H = 128, NPIX = W * H;\nconst L = 1, RHO = 0.27, SPACE = 3.1, P = 4 * L + 2 * Math.PI;\nconst BX = 1 + RHO, BY = L + 1 + RHO, BZ = RHO;\n// The camera stands 9 units from the necklace's middle with a focal length of\n// 222 LEDs, so the 4.54 units of height take 112 rows and the necklace's\n// neighbours in the chain it belongs to show above and below it.\nconst D0 = 9, F = 222;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Point and tangent of the core at arc length u, starting at the middle of\n// the right run and going up, so anticlockwise.\nfunction core(u, out) {\n  u = ((u % P) + P) % P;\n  let x, y, tx, ty;\n  if (u \u003c L) (x = 1), (y = u), (tx = 0), (ty = 1);\n  else if (u \u003c L + PI) {\n    const a = u - L;\n    (x = cos(a)), (y = L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else if (u \u003c 3 * L + PI) (x = -1), (y = L - (u - L - PI)), (tx = 0), (ty = -1);\n  else if (u \u003c 3 * L + 2 * PI) {\n    const a = PI + (u - 3 * L - PI);\n    (x = cos(a)), (y = -L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else (x = 1), (y = -L + (u - 3 * L - 2 * PI)), (tx = 0), (ty = 1);\n  out[0] = x;\n  out[1] = y;\n  out[2] = tx;\n  out[3] = ty;\n}\n\n// The N maps of one chain: rotation (columns: the link's across, along and\n// out-of-plane axes) and centre, all for a parent of size 1.\nfunction buildChain(N) {\n  const s = P / (SPACE * N), rot = new Float64Array(9 * N), ctr = new Float64Array(3 * N), targets = [], c = [0, 0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    core((i * P) / N, c);\n    const [x, y, tx, ty] = c, nx = ty, ny = -tx, o = 9 * i;\n    if (i % 2 === 0) {\n      // A flat link on a straight run gets no rotation at all, even on the\n      // left run where its axes point the other way: the stadium looks the\n      // same turned half round, and this keeps its map a pure shrink.\n      const flatRun = tx === 0;\n      rot.set(flatRun ? [1, 0, 0, 0, 1, 0, 0, 0, 1] : [nx, ny, 0, tx, ty, 0, 0, 0, 1], o);\n      if (flatRun) targets.push(i);\n    } else rot.set([0, 0, 1, tx, ty, 0, -ty, tx, 0], o);\n    ctr[3 * i] = x;\n    ctr[3 * i + 1] = y;\n  }\n  return { N, s, rot, ctr, targets };\n}\n\n// Ray directions through each LED, in view space (x right, y up, looking\n// down -z).\nconst RDX = new Float32Array(NPIX), RDY = new Float32Array(NPIX), RDZ = new Float32Array(NPIX);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - W / 2) / F, dy = -(y + 0.5 - H / 2) / F, n = 1 / sqrt(dx * dx + dy * dy + 1), p = y * W + x;\n    RDX[p] = dx * n;\n    RDY[p] = dy * n;\n    RDZ[p] = -n;\n  }\n\n// Light from the upper left and in front, and the half vector for the shine.\nconst LV = (() => {\n  const l = [-0.55, 0.6, 0.58], n = 1 / Math.hypot(...l);\n  const lx = l[0] * n, ly = l[1] * n, lz = l[2] * n, hz = lz + 1, hn = 1 / Math.hypot(lx, ly, hz);\n  return [lx, ly, lz, lx * hn, ly * hn, hz * hn];\n})();\n\n// Solidity and glass by apparent generation a = generation - zoom: a link is\n// solid from a = 0.85 up, thins to clear by a = 0.2, and its glass rim fades\n// out between a = 0 and a = -1, where it is the parent of the panel's parent.\nconst solidOf = (a) => sm(0.2, 0.85, a);\nconst glassOf = (a) => sm(-1, -0.25, a) * (1 - solidOf(a));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, links: 18, turn: 45, z: 0, gen: 0, clock: 0,\n    chain: buildChain(18), tgt: 0, ctx: 0, pend: false, from: null, glide: 1, gz0: 0,\n    zb: new Float32Array(NPIX), cr: new Float32Array(NPIX), cg: new Float32Array(NPIX), cb: new Float32Array(NPIX),\n    pal: new Float32Array(18), palHue: NaN, list: [],\n  };\n}\n\n// The camera's aim point for target index ti of a chain: p = c / (1 - s).\nfunction aim(ch, ti) {\n  const i = ch.targets[ti % ch.targets.length], k = 1 / (1 - ch.s);\n  return [ch.ctr[3 * i] * k, ch.ctr[3 * i + 1] * k, 0, i];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 18, 45], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.turn = cl(k[3], 45, 90);\n  const n = 2 * Math.round(cl(k[2], 18, 30) / 2);\n  if (n !== S.chain.N) {\n    S.chain = buildChain(n);\n    S.tgt = 0;\n    S.ctx = S.chain.targets[0];\n    S.glide = 1;\n    S.pend = false;\n  }\n  // The glide takes 1.5 s, which is gz of a generation. It must end before\n  // the wrap, so a tap late in a generation waits for the next one, where\n  // every target's path still starts from the same view.\n  const gz = (1.5 * S.speed) / 18;\n  if (input.btnPressed && input.btnPressed[0]) S.pend = true;\n  if (S.pend && S.glide >= 1 && S.z + gz \u003c 0.95) {\n    S.from = aim(S.chain, S.tgt);\n    S.tgt = (S.tgt + 1) % S.chain.targets.length;\n    S.glide = 0;\n    S.gz0 = S.z;\n    S.pend = false;\n  }\n  // If Speed is turned up during a glide it still ends by z = 0.97.\n  S.glide = min(1, max(S.glide + d / 1.5, (S.z - S.gz0) / (0.97 - S.gz0)));\n  S.clock += (d * S.speed) / 2;\n  S.z += (d * S.speed) / 18;\n  if (S.z >= 1) {\n    // One generation deeper: the target link becomes the necklace, and the\n    // necklace it sat in becomes the one round the panel.\n    S.z -= 1;\n    S.gen++;\n    S.glide = 1;\n    S.ctx = S.chain.targets[S.tgt];\n  }\n}\n\nfunction palette(S) {\n  // Three generation colours a third apart. At Hue 0 they are lime (glass of\n  // the opening), azure (the opening chain) and rose. Body colour and the\n  // floor its shaded side keeps: a red, orange or yellow body keeps more of\n  // its light and less of its saturation, as at half light it reads brown.\n  for (let g = 0; g \u003c 3; g++) {\n    const h = S.hue + 0.227 + g / 3, hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.02, hw) * (1 - sm(0.17, 0.27, hw));\n    hsv(h, 0.78 - 0.3 * warm, 1, S.pal, g * 6);\n    hsv(h, 0.28, 1, S.pal, g * 6 + 3);\n    S.pal[15 + g] = warm;\n  }\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const ch = S.chain, s = ch.s, z = S.z, sz = pow(s, z);\n  // The aim point, gliding after a tap.\n  let p = aim(ch, S.tgt);\n  if (S.glide \u003c 1 && S.from) {\n    const w = sm(0, 1, S.glide);\n    p = [S.from[0] + (p[0] - S.from[0]) * w, S.from[1] + (p[1] - S.from[1]) * w, 0, p[3]];\n  }\n  // View rotation: turn about the upright axis, then lean back 12 degrees.\n  // Halfway through each generation the necklace has swung 22 degrees\n  // further round, so the run the camera dives at turns to face along the\n  // view and the empty middle of the necklace narrows; it swings back by the\n  // end, and the swing starts and stops at rest, so the loop has no seam.\n  const sw = sin(PI * z), psi = ((S.turn + 22 * sw * sw + 8 * sin((2 * PI * S.clock) / 25)) * PI) / 180, tilt = (-12 * PI) / 180;\n  const cy = cos(psi), sy = sin(psi), ct = cos(tilt), st = sin(tilt);\n  // R = Rx(tilt) * Ry(psi), row-major.\n  const R = [cy, 0, sy, st * sy, ct, -st * cy, -ct * sy, st, ct * cy];\n  const k1 = 1 - sz, ox = p[0] * k1, oy = p[1] * k1;\n  // World point x -> view: R (x - (1 - s^z) p) - (0, 0, s^z D0).\n  const list = (S.list = []);\n  const near = 0.05 * sz * D0;\n  const visit = (Sc, M, cx, cy0, cz, gen) => {\n    // Centre in view.\n    const wx = cx - ox, wy = cy0 - oy, wz = cz;\n    const vx = R[0] * wx + R[1] * wy + R[2] * wz, vy = R[3] * wx + R[4] * wy + R[5] * wz, vz = R[6] * wx + R[7] * wy + R[8] * wz - sz * D0;\n    const rad = Sc * (BY + 0.05);\n    if (gen >= 0) {\n      if (vz - rad > -near) return;\n      const dz = -vz, ext = rad;\n      if (dz > ext) {\n        const sx = W / 2 + (F * vx) / dz, syy = H / 2 - (F * vy) / dz, pr = (F * ext) / (dz - ext);\n        if (sx + pr \u003c 0 || sx - pr > W || syy + pr \u003c 0 || syy - pr > H) return;\n        // A tube under a third of an LED thick is not drawn.\n        if ((F * Sc * RHO) / dz \u003c 0.17) return;\n      }\n      const a = gen - z, sol = solidOf(a), gl = glassOf(a);\n      if (sol > 0.004 || gl > 0.03) {\n        const MV = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n        for (let r = 0; r \u003c 3; r++)\n          for (let c = 0; c \u003c 3; c++) MV[r * 3 + c] = R[r * 3] * M[c] + R[r * 3 + 1] * M[3 + c] + R[r * 3 + 2] * M[6 + c];\n        list.push({ S: Sc, MV, vx, vy, vz, sol, gl, col: (((S.gen + gen) % 3) + 3) % 3 });\n      }\n      // Behind a link more than 97% solid its chain does not show.\n      if (sol >= 0.97 || gen >= 2) return;\n    }\n    for (let i = 0; i \u003c ch.N; i++) {\n      const o = 9 * i, Ri = ch.rot, ci = ch.ctr;\n      // Child rotation M * Ri (row-major M; Ri stored by columns).\n      const CM = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n      for (let r = 0; r \u003c 3; r++)\n        for (let c = 0; c \u003c 3; c++) CM[r * 3 + c] = M[r * 3] * Ri[o + c * 3] + M[r * 3 + 1] * Ri[o + c * 3 + 1] + M[r * 3 + 2] * Ri[o + c * 3 + 2];\n      const px = ci[3 * i], py = ci[3 * i + 1];\n      visit(Sc * s, CM, cx + Sc * (M[0] * px + M[1] * py), cy0 + Sc * (M[3] * px + M[4] * py), cz + Sc * (M[6] * px + M[7] * py), gen + 1);\n    }\n  };\n  // Start from the necklace the panel's necklace is a link of: the link the\n  // camera dived into last generation.\n  const ct0 = ch.ctr, ci0 = S.ctx;\n  visit(1 / s, [1, 0, 0, 0, 1, 0, 0, 0, 1], -ct0[3 * ci0] / s, -ct0[3 * ci0 + 1] / s, 0, -1);\n\n  const { zb, cr, cg, cb } = S;\n  zb.fill(Infinity);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  for (const e of list) if (e.sol >= 0.999) raster(S, e, true, sz);\n  const rest = list.filter((e) => e.sol \u003c 0.999).sort((a, b) => a.vz - b.vz);\n  for (const e of rest) raster(S, e, false, sz);\n  for (let i = 0; i \u003c NPIX; i++) display.setPixel(i % W, (i / W) | 0, cr[i] * 255, cg[i] * 255, cb[i] * 255);\n}\n\n// Trace every LED in the link's screen box against the link's own distance\n// field, in the link's frame where it has half width 1.\nfunction raster(S, e, solid, sz) {\n  const { MV, vx, vy, vz } = e, Sc = e.S, inv = 1 / Sc;\n  // Camera in link coordinates: MV^T (0 - centre) / S.\n  const ox = -(MV[0] * vx + MV[3] * vy + MV[6] * vz) * inv, oy = -(MV[1] * vx + MV[4] * vy + MV[7] * vz) * inv, oz = -(MV[2] * vx + MV[5] * vy + MV[8] * vz) * inv;\n  // Screen box from the eight corners of the link's box.\n  let x0 = W, x1 = -1, y0 = H, y1 = -1, full = false;\n  for (let c = 0; c \u003c 8; c++) {\n    const lx = c & 1 ? BX : -BX, ly = c & 2 ? BY : -BY, lz = c & 4 ? BZ : -BZ;\n    const px = vx + Sc * (MV[0] * lx + MV[1] * ly + MV[2] * lz), py = vy + Sc * (MV[3] * lx + MV[4] * ly + MV[5] * lz), pz = vz + Sc * (MV[6] * lx + MV[7] * ly + MV[8] * lz);\n    if (-pz \u003c 1e-3) {\n      full = true;\n      break;\n    }\n    const sx = W / 2 + (F * px) / -pz, sy = H / 2 - (F * py) / -pz;\n    if (sx \u003c x0) x0 = sx;\n    if (sx > x1) x1 = sx;\n    if (sy \u003c y0) y0 = sy;\n    if (sy > y1) y1 = sy;\n  }\n  if (full) (x0 = 0), (x1 = W - 1), (y0 = 0), (y1 = H - 1);\n  const X0 = max(0, floor(x0)), X1 = min(W - 1, floor(x1)), Y0 = max(0, floor(y0)), Y1 = min(H - 1, floor(y1));\n  if (X0 > X1 || Y0 > Y1) return;\n  const { zb, cr, cg, cb, pal } = S, g6 = e.col * 6, warm = pal[15 + e.col];\n  const br = pal[g6], bg = pal[g6 + 1], bb = pal[g6 + 2], gr = pal[g6 + 3], gg = pal[g6 + 4], gbb = pal[g6 + 5];\n  const [lx, ly, lz, hx, hy, hz] = LV;\n  const eps = 0.3 / F, sol = e.sol, gl = e.gl, dref = sz * D0;\n  for (let py = Y0; py \u003c= Y1; py++)\n    for (let px = X0; px \u003c= X1; px++) {\n      const p = py * W + px, rx = RDX[p], ry = RDY[p], rz = RDZ[p];\n      const dx = MV[0] * rx + MV[3] * ry + MV[6] * rz, dy = MV[1] * rx + MV[4] * ry + MV[7] * rz, dz = MV[2] * rx + MV[5] * ry + MV[8] * rz;\n      // Slab test against the box.\n      let t0 = 0, t1 = 1e9;\n      {\n        const ix = 1 / dx, a = (-BX - ox) * ix, b = (BX - ox) * ix;\n        t0 = max(t0, min(a, b));\n        t1 = min(t1, max(a, b));\n        const iy = 1 / dy, c = (-BY - oy) * iy, d = (BY - oy) * iy;\n        t0 = max(t0, min(c, d));\n        t1 = min(t1, max(c, d));\n        const iz = 1 / dz, f = (-BZ - oz) * iz, g = (BZ - oz) * iz;\n        t0 = max(t0, min(f, g));\n        t1 = min(t1, max(f, g));\n      }\n      if (t0 >= t1) continue;\n      const zmax = zb[p] * inv;\n      if (t0 >= zmax) continue;\n      let t = t0, hit = false, qx = 0, qy = 0, qz = 0, q = 0, rr = 0, dyy = 0;\n      for (let it = 0; it \u003c 48; it++) {\n        qx = ox + t * dx;\n        qy = oy + t * dy;\n        qz = oz + t * dz;\n        const ay = abs(qy) - L;\n        dyy = ay > 0 ? ay : 0;\n        rr = sqrt(qx * qx + dyy * dyy);\n        q = rr - 1;\n        const dist = sqrt(q * q + qz * qz) - RHO;\n        if (dist \u003c eps * t) {\n          hit = true;\n          break;\n        }\n        t += dist;\n        if (t > t1 || t > zmax) break;\n      }\n      if (!hit) continue;\n      // Normal in link coordinates, then in view.\n      const rinv = rr > 1e-6 ? 1 / rr : 0, gx = q * qx * rinv, gy = q * (qy \u003c 0 ? -dyy : dyy) * rinv;\n      let nl = sqrt(gx * gx + gy * gy + qz * qz);\n      nl = nl > 1e-9 ? 1 / nl : 0;\n      const nlx = gx * nl, nly = gy * nl, nlz = qz * nl;\n      const nx = MV[0] * nlx + MV[1] * nly + MV[2] * nlz, ny = MV[3] * nlx + MV[4] * nly + MV[5] * nlz, nz = MV[6] * nlx + MV[7] * nly + MV[8] * nlz;\n      const ndv = -(nx * rx + ny * ry + nz * rz), edge = abs(ndv);\n      const lam = max(0, nx * lx + ny * ly + nz * lz), spec = pow(max(0, nx * hx + ny * hy + nz * hz), 36);\n      const tv = t * Sc;\n      // Depth: nearer than the necklace's middle is brighter.\n      const fog = cl(1.25 - 0.55 * (tv / dref), 0.45, 1.2);\n      const amb = 0.2 + 0.25 * warm, body = (amb + (1 - amb) * lam) * sm(0.0, 0.45, edge) * fog;\n      let r = br * body + 0.75 * spec * fog, g = bg * body + 0.75 * spec * fog, b = bb * body + 0.75 * spec * fog;\n      if (solid) {\n        zb[p] = tv;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n        continue;\n      }\n      // Glass: a faint tint over its whole face, bright at the rim, and the\n      // shine. A thinning link blends its body over what lies behind it.\n      const rim = pow(1 - edge, 2.2), gw = gl * (0.05 + 0.85 * rim);\n      const keep = 1 - sol;\n      cr[p] = cr[p] * keep + r * sol + gr * gw + 0.5 * spec * gl;\n      cg[p] = cg[p] * keep + g * sol + gg * gw + 0.5 * spec * gl;\n      cb[p] = cb[p] * keep + b * sol + gbb * gw + 0.5 * spec * gl;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s."},{"name":"Links","min":18,"max":30,"about":"Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12."},{"name":"Turn","min":45,"max":90,"about":"How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2."}],"start":[0,2,18,45],"measures":{"motion":0.8976,"detail":0.0847,"edges":0.5082,"complexity":1.4555,"coverage":0.5229,"colour":0.1494,"drift":0.2617},"knobResponse":[0.1332,0.2651,0.185,0.2969]},{"slug":"aquarium","title":"Aquarium","family":"pixel","round":2,"note":"높은 수조에 흰동가리, 블루탱, 엔젤피시, 네온테트라 떼가 꼬리를 흔들며 헤엄쳐요. 모래 위 보물상자가 몇 초마다 뚜껑을 열어 공기 방울을 뱉고, K1 을 누르면 먹이가 떨어져 물고기가 몰려와요.","idea":"A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.","buttons":"K1 tap drops a pinch of food at the surface, and every fish goes for it.","code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","layer":{"id":"layer-aquarium","type":"code","name":"aquarium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet."},{"name":"Swim","min":0.2,"max":4,"about":"How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush."},{"name":"Fish","min":6,"max":18,"about":"How many fish live in the tank; new ones swim in from the side and spare ones swim out."},{"name":"Light","min":-1,"max":1,"about":"Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand."}],"start":[0,2,6,0.06],"measures":{"motion":0.1521,"detail":0.0707,"edges":0.4986,"complexity":0.73,"coverage":0.9459,"colour":0.2752,"drift":0.0492},"knobResponse":[0.1007,0.0662,0.0696,0.1627]},{"slug":"arnold-tongues","title":"Arnold Tongues","family":"rhythm","round":32,"note":"아래 가장자리의 분수 p/q 마다 혀가 하나씩 위로 자라 벌어져요. 양옆은 0/1 과 1/1 혀, 가운데는 분홍 1/2 혀, 그 양쪽은 초록 1/3 과 2/3 혀예요. 혀마다 q박에 한 번 번쩍여서 판 전체가 13박까지의 폴리리듬으로 뛰고, 회색 탐침선이 오르내리며 그 높이의 악마의 계단을 그어요.","idea":"The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.","buttons":"K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.","code":"// ===== Patternflow pattern =====\n// Title:   Arnold Tongues\n// Family:  rhythm\n// Idea:    The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold tongues of the circle map (Vladimir Arnold, 1961), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right.\n// Knob 2: Tempo. 0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2.\n// Knob 3: Zoom. At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second.\n// Knob 4: Depth. The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points.\n// Buttons: K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.\n\nconst W = 64, H = 128, SX = 3, NS = W * SX, QM = 21, T = 320, EPS = 1e-4, RUNS = 4;\nconst { floor, round, abs, exp, cos, min, max, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst GOLD2 = (3 - Math.sqrt(5)) / 2;\n\n// sin(2 pi u) from a table: the map runs 320 steps for each of 24576 points.\nconst LN = 4096, SIN = new Float64Array(LN + 1);\nfor (let i = 0; i \u003c= LN; i++) SIN[i] = Math.sin((TAU * i) / LN);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The lifted circle map th -> th + Om - (K / 2 pi) sin(2 pi th), from th = 0.\n// Row y has K = 1 - (1 - u)^2 with u = (127 - y) / 127: 0 at the bottom, 1 at\n// the top, and twice as many rows near the top, where the tongues spread, as\n// a straight scale would give. After 320 steps the point is locked to p/q\n// when th moved by exactly p over each of its last four runs of q steps; the\n// smallest such q wins. The rotation number rho is the mean step over the\n// last 256.\nconst kOf = (y) => {\n  const u = 1 - (H - 1 - y) / (H - 1);\n  return 1 - u * u;\n};\nconst BUF = new Float64Array(T + 1);\nfunction buildRow(P, y) {\n  const c = kOf(y) / TAU, o = y * NS, o0 = P.om0, dw = (P.om1 - P.om0) / NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const om = o0 + (j + 0.5) * dw;\n    let th = 0;\n    for (let n = 0; n \u003c T; n++) {\n      BUF[n] = th;\n      const u = (th - floor(th)) * LN, i = u | 0;\n      th += om - c * (SIN[i] + (SIN[i + 1] - SIN[i]) * (u - i));\n    }\n    BUF[T] = th;\n    let q = 1;\n    for (; q \u003c= QM; q++) {\n      const p = round(BUF[T] - BUF[T - q]);\n      let r = 0;\n      while (r \u003c RUNS && abs(BUF[T - r * q] - BUF[T - r * q - q] - p) \u003c EPS) r++;\n      if (r === RUNS) break;\n    }\n    P.Q[o + j] = q > QM ? 0 : q;\n    P.R[o + j] = (BUF[T] - BUF[T - 256]) / 256;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    Q: new Uint8Array(H * NS), R: new Float32Array(H * NS), zoom: -1, om0: 0, om1: 1, next: H,\n    beat: 0, hue: NaN, depth: 13, accent: 0,\n    pal: new Float32Array((QM + 1) * 3), dim: new Float32Array(256 * 3), env: new Float32Array(QM + 1),\n    row: new Float32Array(W * 3), lock: new Uint8Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const z = round(cl(k[2], 0, 1) * 200) / 200;\n  const first = P.zoom \u003c 0;\n  if (z !== P.zoom) {\n    // The window narrows to 0.12 wide and slides to the golden section.\n    P.zoom = z;\n    const w = exp(Math.log(0.12) * z), c = 0.5 + (GOLD2 - 0.5) * ((1 - w) / (1 - 0.12));\n    (P.om0 = c - w / 2), (P.om1 = c + w / 2), (P.next = 0);\n  }\n  // The first frame builds all 128 rows; after a turn of Zoom they are built\n  // again from the bottom, four rows a frame.\n  for (let b = first ? H : 4; b > 0 && P.next \u003c H; b--) buildRow(P, H - 1 - P.next++);\n  P.depth = round(2 + 19 * ((cl(k[3], -1, 1) + 1) / 2) ** 0.9);\n  P.beat += d * 0.8 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0]) (P.beat = 0), (P.accent = 1);\n  P.accent = max(0, P.accent - d * 0.9);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    // q = 1, the two wide tongues at the sides, stays dim so the rest show.\n    for (let q = 1; q \u003c= QM; q++) hsv(k[0] + 0.52 + GOLD2 * (q - 1), 0.78, q === 1 ? 0.3 : 0.66 - 0.008 * q, P.pal, q * 3);\n    for (let i = 0; i \u003c 256; i++) hsv(k[0] + 0.62 + (0.3 * i) / 255, 0.7, 0.17, P.dim, i * 3);\n  }\n  // Beat b lights every tongue whose q divides it, and the light dies away\n  // over the beat.\n  const b = floor(P.beat), f = P.beat - b;\n  for (let q = 1; q \u003c= QM; q++) P.env[q] = b % q === 0 ? exp(-3.2 * f) : 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.zoom \u003c 0) return;\n  const { Q, R, pal, dim, env, row, lock } = P, D = P.depth, acc = P.accent;\n  const f = P.beat - floor(P.beat), yb = (H - 1) * (1 - 1.3 * f), rs = 255 / (P.om1 - P.om0), r0 = P.om0;\n  // The scan line: up and down the panel once every 24 beats.\n  const yp = round((H - 1) * (0.5 + 0.5 * cos((TAU * P.beat) / 24)));\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * NS;\n    // On each beat a band of light runs up the tongues that beat lights.\n    const band = exp(-((y - yb) * (y - yb)) / 120);\n    row.fill(0);\n    for (let x = 0; x \u003c W; x++) {\n      // A tongue thinner than an LED still lights the whole LED, so long as\n      // it holds for a row above or below; a lone locked point, a thin\n      // tongue that bends across this column, lights its third.\n      let qs = 99, r = 0, g = 0, b = 0;\n      for (let j = x * SX; j \u003c x * SX + SX; j++) {\n        const q = Q[o + j];\n        if (q && q \u003c= D) {\n          if (q \u003c qs && ((y > 0 && Q[o + j - NS] === q) || (y \u003c H - 1 && Q[o + j + NS] === q))) qs = q;\n          (r += pal[q * 3]), (g += pal[q * 3 + 1]), (b += pal[q * 3 + 2]);\n        } else {\n          // Not locked, or locked past Depth: a dim colour that runs with rho.\n          const i = cl(round((R[o + j] - r0) * rs), 0, 255) * 3;\n          (r += dim[i]), (g += dim[i + 1]), (b += dim[i + 2]);\n        }\n      }\n      if (y === yp) lock[x] = qs \u003c 99 ? qs : 0;\n      if (qs \u003c 99) {\n        const e = min(1, env[qs] * (0.55 + 0.6 * band) + acc), m = 1 + 0.6 * e, wv = 130 * e;\n        display.setPixel(x, y, min(255, pal[qs * 3] * m + wv), min(255, pal[qs * 3 + 1] * m + wv), min(255, pal[qs * 3 + 2] * m + wv));\n      } else display.setPixel(x, y, r / SX, g / SX, b / SX);\n    }\n  }\n  // The devil's staircase at the scan line: rho against Omega, rho scaled so\n  // the bottom row's straight line rho = Omega would run corner to corner.\n  // Its flat steps are the tongues the line crosses, in their colours.\n  const o = yp * NS, sc = (H - 1) / (P.om1 - P.om0);\n  let py = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0;\n    for (let s = 0; s \u003c SX; s++) r += R[o + x * SX + s];\n    const sy = cl(round(H - 1 - (r / SX - r0) * sc), 0, H - 1);\n    const a = py \u003c 0 ? sy : py, y0 = min(a, sy), y1 = max(a, sy), q = lock[x];\n    for (let y = y0; y \u003c= y1; y++) display.setPixel(x, y, 170, 170, 165);\n    if (q) display.setPixel(x, sy, min(255, pal[q * 3] * 1.3 + 100), min(255, pal[q * 3 + 1] * 1.3 + 100), min(255, pal[q * 3 + 2] * 1.3 + 100));\n    py = sy;\n    if (x % 2 === 0 && (yp \u003c y0 || yp > y1)) display.setPixel(x, yp, 150, 150, 150);\n  }\n}\n","layer":{"id":"layer-arnold-tongues","type":"code","name":"arnold-tongues","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Arnold Tongues\n// Family:  rhythm\n// Idea:    The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold tongues of the circle map (Vladimir Arnold, 1961), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right.\n// Knob 2: Tempo. 0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2.\n// Knob 3: Zoom. At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second.\n// Knob 4: Depth. The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points.\n// Buttons: K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.\n\nconst W = 64, H = 128, SX = 3, NS = W * SX, QM = 21, T = 320, EPS = 1e-4, RUNS = 4;\nconst { floor, round, abs, exp, cos, min, max, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst GOLD2 = (3 - Math.sqrt(5)) / 2;\n\n// sin(2 pi u) from a table: the map runs 320 steps for each of 24576 points.\nconst LN = 4096, SIN = new Float64Array(LN + 1);\nfor (let i = 0; i \u003c= LN; i++) SIN[i] = Math.sin((TAU * i) / LN);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The lifted circle map th -> th + Om - (K / 2 pi) sin(2 pi th), from th = 0.\n// Row y has K = 1 - (1 - u)^2 with u = (127 - y) / 127: 0 at the bottom, 1 at\n// the top, and twice as many rows near the top, where the tongues spread, as\n// a straight scale would give. After 320 steps the point is locked to p/q\n// when th moved by exactly p over each of its last four runs of q steps; the\n// smallest such q wins. The rotation number rho is the mean step over the\n// last 256.\nconst kOf = (y) => {\n  const u = 1 - (H - 1 - y) / (H - 1);\n  return 1 - u * u;\n};\nconst BUF = new Float64Array(T + 1);\nfunction buildRow(P, y) {\n  const c = kOf(y) / TAU, o = y * NS, o0 = P.om0, dw = (P.om1 - P.om0) / NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const om = o0 + (j + 0.5) * dw;\n    let th = 0;\n    for (let n = 0; n \u003c T; n++) {\n      BUF[n] = th;\n      const u = (th - floor(th)) * LN, i = u | 0;\n      th += om - c * (SIN[i] + (SIN[i + 1] - SIN[i]) * (u - i));\n    }\n    BUF[T] = th;\n    let q = 1;\n    for (; q \u003c= QM; q++) {\n      const p = round(BUF[T] - BUF[T - q]);\n      let r = 0;\n      while (r \u003c RUNS && abs(BUF[T - r * q] - BUF[T - r * q - q] - p) \u003c EPS) r++;\n      if (r === RUNS) break;\n    }\n    P.Q[o + j] = q > QM ? 0 : q;\n    P.R[o + j] = (BUF[T] - BUF[T - 256]) / 256;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    Q: new Uint8Array(H * NS), R: new Float32Array(H * NS), zoom: -1, om0: 0, om1: 1, next: H,\n    beat: 0, hue: NaN, depth: 13, accent: 0,\n    pal: new Float32Array((QM + 1) * 3), dim: new Float32Array(256 * 3), env: new Float32Array(QM + 1),\n    row: new Float32Array(W * 3), lock: new Uint8Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const z = round(cl(k[2], 0, 1) * 200) / 200;\n  const first = P.zoom \u003c 0;\n  if (z !== P.zoom) {\n    // The window narrows to 0.12 wide and slides to the golden section.\n    P.zoom = z;\n    const w = exp(Math.log(0.12) * z), c = 0.5 + (GOLD2 - 0.5) * ((1 - w) / (1 - 0.12));\n    (P.om0 = c - w / 2), (P.om1 = c + w / 2), (P.next = 0);\n  }\n  // The first frame builds all 128 rows; after a turn of Zoom they are built\n  // again from the bottom, four rows a frame.\n  for (let b = first ? H : 4; b > 0 && P.next \u003c H; b--) buildRow(P, H - 1 - P.next++);\n  P.depth = round(2 + 19 * ((cl(k[3], -1, 1) + 1) / 2) ** 0.9);\n  P.beat += d * 0.8 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0]) (P.beat = 0), (P.accent = 1);\n  P.accent = max(0, P.accent - d * 0.9);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    // q = 1, the two wide tongues at the sides, stays dim so the rest show.\n    for (let q = 1; q \u003c= QM; q++) hsv(k[0] + 0.52 + GOLD2 * (q - 1), 0.78, q === 1 ? 0.3 : 0.66 - 0.008 * q, P.pal, q * 3);\n    for (let i = 0; i \u003c 256; i++) hsv(k[0] + 0.62 + (0.3 * i) / 255, 0.7, 0.17, P.dim, i * 3);\n  }\n  // Beat b lights every tongue whose q divides it, and the light dies away\n  // over the beat.\n  const b = floor(P.beat), f = P.beat - b;\n  for (let q = 1; q \u003c= QM; q++) P.env[q] = b % q === 0 ? exp(-3.2 * f) : 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.zoom \u003c 0) return;\n  const { Q, R, pal, dim, env, row, lock } = P, D = P.depth, acc = P.accent;\n  const f = P.beat - floor(P.beat), yb = (H - 1) * (1 - 1.3 * f), rs = 255 / (P.om1 - P.om0), r0 = P.om0;\n  // The scan line: up and down the panel once every 24 beats.\n  const yp = round((H - 1) * (0.5 + 0.5 * cos((TAU * P.beat) / 24)));\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * NS;\n    // On each beat a band of light runs up the tongues that beat lights.\n    const band = exp(-((y - yb) * (y - yb)) / 120);\n    row.fill(0);\n    for (let x = 0; x \u003c W; x++) {\n      // A tongue thinner than an LED still lights the whole LED, so long as\n      // it holds for a row above or below; a lone locked point, a thin\n      // tongue that bends across this column, lights its third.\n      let qs = 99, r = 0, g = 0, b = 0;\n      for (let j = x * SX; j \u003c x * SX + SX; j++) {\n        const q = Q[o + j];\n        if (q && q \u003c= D) {\n          if (q \u003c qs && ((y > 0 && Q[o + j - NS] === q) || (y \u003c H - 1 && Q[o + j + NS] === q))) qs = q;\n          (r += pal[q * 3]), (g += pal[q * 3 + 1]), (b += pal[q * 3 + 2]);\n        } else {\n          // Not locked, or locked past Depth: a dim colour that runs with rho.\n          const i = cl(round((R[o + j] - r0) * rs), 0, 255) * 3;\n          (r += dim[i]), (g += dim[i + 1]), (b += dim[i + 2]);\n        }\n      }\n      if (y === yp) lock[x] = qs \u003c 99 ? qs : 0;\n      if (qs \u003c 99) {\n        const e = min(1, env[qs] * (0.55 + 0.6 * band) + acc), m = 1 + 0.6 * e, wv = 130 * e;\n        display.setPixel(x, y, min(255, pal[qs * 3] * m + wv), min(255, pal[qs * 3 + 1] * m + wv), min(255, pal[qs * 3 + 2] * m + wv));\n      } else display.setPixel(x, y, r / SX, g / SX, b / SX);\n    }\n  }\n  // The devil's staircase at the scan line: rho against Omega, rho scaled so\n  // the bottom row's straight line rho = Omega would run corner to corner.\n  // Its flat steps are the tongues the line crosses, in their colours.\n  const o = yp * NS, sc = (H - 1) / (P.om1 - P.om0);\n  let py = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0;\n    for (let s = 0; s \u003c SX; s++) r += R[o + x * SX + s];\n    const sy = cl(round(H - 1 - (r / SX - r0) * sc), 0, H - 1);\n    const a = py \u003c 0 ? sy : py, y0 = min(a, sy), y1 = max(a, sy), q = lock[x];\n    for (let y = y0; y \u003c= y1; y++) display.setPixel(x, y, 170, 170, 165);\n    if (q) display.setPixel(x, sy, min(255, pal[q * 3] * 1.3 + 100), min(255, pal[q * 3 + 1] * 1.3 + 100), min(255, pal[q * 3 + 2] * 1.3 + 100));\n    py = sy;\n    if (x % 2 === 0 && (yp \u003c y0 || yp > y1)) display.setPixel(x, yp, 150, 150, 150);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right."},{"name":"Tempo","min":0.2,"max":3,"about":"0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2."},{"name":"Zoom","min":0,"max":1,"about":"At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second."},{"name":"Depth","min":-1,"max":1,"about":"The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points."}],"start":[0,2,0,0.06],"measures":{"motion":0.3954,"detail":0.0597,"edges":0.7533,"complexity":0.3067,"coverage":1,"colour":0.3016,"drift":0.0852},"knobResponse":[0.2048,0.0673,0.163,0.058]},{"slug":"aurora","title":"Aurora","family":"light","round":1,"note":"떠도는 선에 빛 커튼이 걸리고, 빛줄기는 커튼이 흔들리는 것보다 느리게 일렁여요.","idea":"Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n// @ramp oklab 0:#000000 0.18:#04122e 0.45:#0b6b5a 0.72:#3dff9a 0.9:#b8ffd9 1:#f0c8ff\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","layer":{"id":"layer-aurora","type":"code","name":"aurora","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":0.18,"color":"#04122e","alpha":1},{"position":0.45,"color":"#0b6b5a","alpha":1},{"position":0.72,"color":"#3dff9a","alpha":1},{"position":0.9,"color":"#b8ffd9","alpha":1},{"position":1,"color":"#f0c8ff","alpha":1}],"mode":"oklab","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sway","min":0,"max":1,"about":"How far the curtains swing from side to side."},{"name":"Speed","min":0.1,"max":5,"about":"How fast everything drifts."},{"name":"Curtains","min":1,"max":4,"about":"One curtain or a sky of up to four, each its own height."},{"name":"Rays","min":0,"max":1,"about":"From a smooth glow to sharp vertical rays."}],"start":[0,2,1,0.06],"measures":{"motion":0.0423,"detail":0.0219,"edges":0.176,"complexity":1.1219,"coverage":0.4849,"colour":0.2574,"drift":0.0814},"knobResponse":[0.0412,0.0639,0.142,0.0829]},{"slug":"axon","title":"Axon","family":"body","round":23,"note":"어두운 조직 속에서 신경세포 하나가 초록 형광으로 빛나요. 세포체를 떠난 스파이크가 수초 사이의 랑비에 결절을 하나씩 건너뛰며 축삭을 내려가고, 말단 단추가 시냅스 틈 너머로 신호를 넘기면 아래의 자홍색 신경세포가 따라 켜져요. K4 를 올리면 수초가 벗겨져 신호가 기어가다 꺼져요.","idea":"A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.","buttons":"K1 tap fires a burst of four spikes now.","code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","layer":{"id":"layer-axon","type":"code","name":"axon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei."},{"name":"Speed","min":0.2,"max":3,"about":"The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower."},{"name":"Rate","min":1,"max":8,"about":"How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8."},{"name":"Damage","min":0,"max":1,"about":"Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals."}],"start":[0,2,1,0.06],"measures":{"motion":0.2284,"detail":0.0799,"edges":0.4159,"complexity":1.8734,"coverage":0.4953,"colour":0.2394,"drift":0.0867},"knobResponse":[0.1239,0.0564,0.0498,0.061]},{"slug":"aztec-diamond","title":"Aztec Diamond","family":"cells","round":28,"note":"아즈텍 다이아몬드 여덟 개가 패널을 덮고 저마다 도미노 셔플로 자라요. 도미노가 제 방향으로 한 LED 씩 미끄러지고 빈 2×2 칸에 새 쌍이 들어서면, 다 자란 다이아몬드의 네 모서리는 한 색 벽돌로 얼고 북극권 원 안만 뒤섞여요. K3 이 가로와 세로의 몫을 기울여 원을 타원으로 바꾸고, 누르면 처음부터 다시 자라요.","idea":"Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.","buttons":"K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.","code":"// ===== Patternflow pattern =====\n// Title:   Aztec Diamond\n// Family:  cells\n// Idea:    Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino shuffling on the Aztec diamond (Elkies, Kuperberg, Larsen and Propp, 1992) and the arctic circle theorem (Jockusch, Propp and Shor, 1995), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1\n//\n// Knob 1: Hue. Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red.\n// Knob 2: Speed. At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower.\n// Knob 3: Bias. The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way.\n// Knob 4: Checker. How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED.\n// Buttons: K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, floor, abs, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n\n// The four kinds of domino, by orientation and by the colour of the\n// checkerboard square under their first cell: 0 north, 1 east, 2 south,\n// 3 west. At order k a horizontal domino whose left cell is (x, y) goes north\n// when x + y + k is odd and south when it is even; a vertical one goes west\n// when odd and east when even.\nconst kind = (x, y, v, k) => ((x + y + k) & 1 ? (v ? 3 : 0) : v ? 1 : 2);\nconst STEP = [[0, -1], [1, 0], [0, 1], [-1, 0]];\n\n// Aztec diamonds tile the plane. Two of order 32 stand whole on the panel,\n// one above the other; the gaps round them are diamonds of order 31, halved\n// by the sides and quartered by the corners. Those grow only to order 30, so\n// a one-LED diagonal of dark runs between every two diamonds.\n// [centre x, centre y, order, hold in seconds at Speed 2, clock at the start, order at the start]\nconst LAYOUT = [\n  [32, 32, 32, 15, -21, 32],\n  [32, 96, 32, 15, 0, 18],\n  [0, 64, 30, 50, 39, 30],\n  [64, 64, 30, 50, 25, 30],\n  [0, 0, 30, 50, 4, 30],\n  [64, 0, 30, 50, 32, 30],\n  [0, 128, 30, 50, 18, 30],\n  [64, 128, 30, 50, 11, 30],\n];\n\n// A diamond keeps its dominoes as lists (left or top cell, vertical or not,\n// grain) and two pictures of its cells to fade between: per cell 0 for empty\n// or 1 + the kind of the domino on it, and that domino's grain, 204 to 255.\nfunction makeDiamond([cx, cy, N, hold]) {\n  const F = 2 * N, M = N * (N + 1) + 4, C = F * F;\n  return {\n    cx, cy, N, F, hold, k: 0, n: 0, p: 0.5, wait: 0,\n    dx: new Int16Array(M), dy: new Int16Array(M), dv: new Uint8Array(M), dg: new Uint8Array(M),\n    grid: new Int16Array(C).fill(-1),\n    ft: new Uint8Array(C), fg: new Uint8Array(C), tt: new Uint8Array(C), tg: new Uint8Array(C),\n    stage: 0, sub: 1, u: 1, dur: 0.1, clock: 0,\n  };\n}\n\nfunction regrid(D) {\n  const g = D.grid, F = D.F;\n  g.fill(-1);\n  for (let i = 0; i \u003c D.n; i++) {\n    const c = D.dx[i] + D.dy[i] * F;\n    g[c] = i;\n    g[D.dv[i] ? c + F : c + 1] = i;\n  }\n}\n\nfunction add(D, x, y, v) {\n  const i = D.n++;\n  (D.dx[i] = x), (D.dy[i] = y), (D.dv[i] = v), (D.dg[i] = 204 + floor(random() * 52));\n  return i;\n}\n\n// Shuffling, order k to k + 1, in three moves. First the bad blocks go: a\n// south-going domino right above a north-going one, or an east-going one\n// right left of a west-going one, would pass through each other.\nfunction destroy(D) {\n  regrid(D);\n  const { dx, dy, dv, grid: g, k, F } = D;\n  const dead = new Uint8Array(D.n);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F;\n    if (t === 2) {\n      const j = g[c + F];\n      if (j >= 0 && !dv[j] && dx[j] === dx[i] && dy[j] === dy[i] + 1) dead[i] = dead[j] = 1;\n    } else if (t === 1) {\n      const j = g[c + 1];\n      if (j >= 0 && dv[j] && dx[j] === dx[i] + 1 && dy[j] === dy[i]) dead[i] = dead[j] = 1;\n    }\n  }\n  let m = 0;\n  for (let i = 0; i \u003c D.n; i++)\n    if (!dead[i]) (dx[m] = dx[i]), (dy[m] = dy[i]), (dv[m] = dv[i]), (D.dg[m] = D.dg[i]), m++;\n  D.n = m;\n}\n\n// Then every domino slides one cell in its own direction.\nfunction slide(D) {\n  const { dx, dy, dv, k } = D;\n  for (let i = 0; i \u003c D.n; i++) {\n    const s = STEP[kind(dx[i], dy[i], dv[i], k)];\n    (dx[i] += s[0]), (dy[i] += s[1]);\n  }\n  D.k = k + 1;\n  regrid(D);\n}\n\n// And the holes left in the bigger diamond, which always come as 2x2\n// blocks, each take a random pair: two horizontal with probability p,\n// two vertical otherwise.\nfunction create(D) {\n  const { grid: g, k, p, N, F } = D;\n  for (let y = N - k; y \u003c N + k; y++) {\n    const r = k - abs(2 * y + 1 - F) / 2 + 0.5;\n    for (let x = N - r; x \u003c N + r; x++) {\n      const c = x + y * F;\n      if (g[c] >= 0) continue;\n      if (random() \u003c p) {\n        g[c] = g[c + 1] = add(D, x, y, 0);\n        g[c + F] = g[c + F + 1] = add(D, x, y + 1, 0);\n      } else {\n        g[c] = g[c + F] = add(D, x, y, 1);\n        g[c + 1] = g[c + F + 1] = add(D, x + 1, y, 1);\n      }\n    }\n  }\n}\n\n// At full size the tiling keeps moving by flips: a 2x2 block covered by two\n// parallel dominoes turns over to the other pair with the same odds as a\n// fresh block. The weighted uniform measure stays put under it, so the\n// frozen corners hold still and only the arctic circle churns.\nfunction flips(D, tries) {\n  const { dx, dy, dv, grid: g, p, F } = D;\n  for (let t = 0; t \u003c tries; t++) {\n    const x = floor(random() * (F - 1)), y = floor(random() * (F - 1)), c = x + y * F, a = g[c];\n    if (a \u003c 0 || dx[a] !== x || dy[a] !== y) continue;\n    const h = random() \u003c p;\n    if (!dv[a]) {\n      const b = g[c + F];\n      if (b \u003c 0 || dv[b] || dx[b] !== x || dy[b] !== y + 1 || h) continue;\n      (dv[a] = dv[b] = 1), (dx[b] = x + 1), (dy[b] = y);\n      (g[c + F] = a), (g[c + 1] = b);\n    } else {\n      const b = g[c + 1];\n      if (b \u003c 0 || !dv[b] || dx[b] !== x + 1 || dy[b] !== y || !h) continue;\n      (dv[a] = dv[b] = 0), (dx[b] = x), (dy[b] = y + 1);\n      (g[c + 1] = a), (g[c + F] = b);\n    }\n  }\n}\n\n// The picture a diamond fades to.\nfunction paint(D) {\n  const { dx, dy, dv, dg, k, F, tt, tg } = D;\n  tt.fill(0);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F, c2 = dv[i] ? c + F : c + 1;\n    (tt[c] = tt[c2] = t + 1), (tg[c] = tg[c2] = dg[i]);\n  }\n}\n\nfunction retire(D, dur) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  (D.u = 0), (D.stage = 2), (D.dur = dur), (D.n = 0);\n  paint(D);\n}\n\n// One move of a diamond's life. Growing, a step from order k to k + 1 takes\n// two fades: the bad pairs go out while every other domino slides, then the\n// holes fill. Grown, it flips blocks a batch at a time until its hold runs\n// out, fades and grows again from order 1.\nfunction begin(D, P) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  D.u = 0;\n  const s = P.speed, T = 0.9 / s;\n  if (D.stage === 0) {\n    if (D.sub === 0) create(D), (D.sub = 1), (D.dur = 0.4 * T);\n    else if (D.k >= D.N) {\n      (D.stage = 1), (D.clock = -D.wait), (D.wait = 0);\n      return begin(D, P);\n    } else if (D.k === 0) (D.k = 1), regrid(D), create(D), (D.dur = 0.4 * T);\n    else destroy(D), slide(D), (D.sub = 0), (D.dur = 0.6 * T);\n  } else if (D.stage === 1) {\n    if (D.clock > (D.hold * 2) / s) {\n      if (D.N \u003c 32) D.hold = 40 + 20 * random();\n      return retire(D, 0.8);\n    }\n    flips(D, 500), (D.dur = 0.35 / s);\n  } else {\n    (D.stage = 0), (D.sub = 1), (D.k = 0), (D.n = 0);\n    return begin(D, P);\n  }\n  paint(D);\n}\n\n// Which diamond and which of its cells each LED shows; -1 is the dark seam.\nconst OWN = new Int8Array(NP).fill(-1), CELL = new Int32Array(NP);\nLAYOUT.forEach(([cx, cy, N], d) => {\n  for (let y = 0; y \u003c 2 * N; y++)\n    for (let x = 0; x \u003c 2 * N; x++) {\n      const X = cx - N + x, Y = cy - N + y;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H || abs(2 * x + 1 - 2 * N) + abs(2 * y + 1 - 2 * N) > 2 * N) continue;\n      (OWN[X + Y * W] = d), (CELL[X + Y * W] = x + y * 2 * N);\n    }\n});\n\nexport function setup(params) {\n  params.s = { fresh: true, speed: 2, hue: 0, dark: 0.4, D: LAYOUT.map(makeDiamond), col: new Float32Array(12) };\n}\n\n// The top diamond opens grown and churning, the bottom one at order 18 and\n// still growing, the six round them grown and due to regrow one by one,\n// the first after 11 seconds. They grow on the first frame, once Bias is known.\nfunction opening(P) {\n  P.D.forEach((D, i) => {\n    begin(D, P);\n    while (D.k \u003c LAYOUT[i][5] || (D.k >= D.N && D.stage === 0)) begin(D, P);\n    D.clock = LAYOUT[i][4];\n  });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const bias = cl(k[2], -1, 1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.dark = 0.38 * (1 + cl(k[3], -1, 1));\n  P.D.forEach((D, i) => (D.p = 0.5 + (i \u003c 2 ? 0.4 : -0.4) * bias));\n  if (P.fresh) (P.fresh = false), opening(P);\n  // K1: every diamond fades and grows again from order 1, all together; the\n  // bottom one then holds half a cycle longer, so the two take turns again.\n  if (input.btnPressed && input.btnPressed[0])\n    P.D.forEach((D, i) => {\n      D.wait = ((i === 1 ? 15 : i > 1 ? 30 * random() : 0) * 2) / P.speed;\n      retire(D, 0.4);\n    });\n  for (const D of P.D) {\n    D.clock += d;\n    D.u += d / D.dur;\n    if (D.u >= 1) begin(D, P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const col = P.col, sm = 1 - P.dark, E = P.D.map((D) => ease(cl(D.u, 0, 1)));\n  // Orange north, green east, blue south, magenta west at Hue 0.\n  for (let t = 0; t \u003c 4; t++) hsv(P.hue + 0.1 + t * 0.25, 0.94, 1, col, t * 3);\n  for (let p = 0; p \u003c NP; p++) {\n    const d = OWN[p], x = p % W, y = (p / W) | 0;\n    if (d \u003c 0) {\n      display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    // The checkerboard stays put on the LEDs while the dominoes slide over it.\n    const D = P.D[d], c = CELL[p], a = D.ft[c], b = D.tt[c], e = E[d], lv = (x + y) & 1 ? sm : 1;\n    let r = 0, g = 0, bl = 0;\n    if (a) {\n      const w = D.fg[c] * lv * (1 - e), q = (a - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    if (b) {\n      const w = D.tg[c] * lv * e, q = (b - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    display.setPixel(x, y, min(255, r), min(255, g), min(255, bl));\n  }\n}\n","layer":{"id":"layer-aztec-diamond","type":"code","name":"aztec-diamond","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aztec Diamond\n// Family:  cells\n// Idea:    Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino shuffling on the Aztec diamond (Elkies, Kuperberg, Larsen and Propp, 1992) and the arctic circle theorem (Jockusch, Propp and Shor, 1995), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1\n//\n// Knob 1: Hue. Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red.\n// Knob 2: Speed. At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower.\n// Knob 3: Bias. The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way.\n// Knob 4: Checker. How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED.\n// Buttons: K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, floor, abs, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n\n// The four kinds of domino, by orientation and by the colour of the\n// checkerboard square under their first cell: 0 north, 1 east, 2 south,\n// 3 west. At order k a horizontal domino whose left cell is (x, y) goes north\n// when x + y + k is odd and south when it is even; a vertical one goes west\n// when odd and east when even.\nconst kind = (x, y, v, k) => ((x + y + k) & 1 ? (v ? 3 : 0) : v ? 1 : 2);\nconst STEP = [[0, -1], [1, 0], [0, 1], [-1, 0]];\n\n// Aztec diamonds tile the plane. Two of order 32 stand whole on the panel,\n// one above the other; the gaps round them are diamonds of order 31, halved\n// by the sides and quartered by the corners. Those grow only to order 30, so\n// a one-LED diagonal of dark runs between every two diamonds.\n// [centre x, centre y, order, hold in seconds at Speed 2, clock at the start, order at the start]\nconst LAYOUT = [\n  [32, 32, 32, 15, -21, 32],\n  [32, 96, 32, 15, 0, 18],\n  [0, 64, 30, 50, 39, 30],\n  [64, 64, 30, 50, 25, 30],\n  [0, 0, 30, 50, 4, 30],\n  [64, 0, 30, 50, 32, 30],\n  [0, 128, 30, 50, 18, 30],\n  [64, 128, 30, 50, 11, 30],\n];\n\n// A diamond keeps its dominoes as lists (left or top cell, vertical or not,\n// grain) and two pictures of its cells to fade between: per cell 0 for empty\n// or 1 + the kind of the domino on it, and that domino's grain, 204 to 255.\nfunction makeDiamond([cx, cy, N, hold]) {\n  const F = 2 * N, M = N * (N + 1) + 4, C = F * F;\n  return {\n    cx, cy, N, F, hold, k: 0, n: 0, p: 0.5, wait: 0,\n    dx: new Int16Array(M), dy: new Int16Array(M), dv: new Uint8Array(M), dg: new Uint8Array(M),\n    grid: new Int16Array(C).fill(-1),\n    ft: new Uint8Array(C), fg: new Uint8Array(C), tt: new Uint8Array(C), tg: new Uint8Array(C),\n    stage: 0, sub: 1, u: 1, dur: 0.1, clock: 0,\n  };\n}\n\nfunction regrid(D) {\n  const g = D.grid, F = D.F;\n  g.fill(-1);\n  for (let i = 0; i \u003c D.n; i++) {\n    const c = D.dx[i] + D.dy[i] * F;\n    g[c] = i;\n    g[D.dv[i] ? c + F : c + 1] = i;\n  }\n}\n\nfunction add(D, x, y, v) {\n  const i = D.n++;\n  (D.dx[i] = x), (D.dy[i] = y), (D.dv[i] = v), (D.dg[i] = 204 + floor(random() * 52));\n  return i;\n}\n\n// Shuffling, order k to k + 1, in three moves. First the bad blocks go: a\n// south-going domino right above a north-going one, or an east-going one\n// right left of a west-going one, would pass through each other.\nfunction destroy(D) {\n  regrid(D);\n  const { dx, dy, dv, grid: g, k, F } = D;\n  const dead = new Uint8Array(D.n);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F;\n    if (t === 2) {\n      const j = g[c + F];\n      if (j >= 0 && !dv[j] && dx[j] === dx[i] && dy[j] === dy[i] + 1) dead[i] = dead[j] = 1;\n    } else if (t === 1) {\n      const j = g[c + 1];\n      if (j >= 0 && dv[j] && dx[j] === dx[i] + 1 && dy[j] === dy[i]) dead[i] = dead[j] = 1;\n    }\n  }\n  let m = 0;\n  for (let i = 0; i \u003c D.n; i++)\n    if (!dead[i]) (dx[m] = dx[i]), (dy[m] = dy[i]), (dv[m] = dv[i]), (D.dg[m] = D.dg[i]), m++;\n  D.n = m;\n}\n\n// Then every domino slides one cell in its own direction.\nfunction slide(D) {\n  const { dx, dy, dv, k } = D;\n  for (let i = 0; i \u003c D.n; i++) {\n    const s = STEP[kind(dx[i], dy[i], dv[i], k)];\n    (dx[i] += s[0]), (dy[i] += s[1]);\n  }\n  D.k = k + 1;\n  regrid(D);\n}\n\n// And the holes left in the bigger diamond, which always come as 2x2\n// blocks, each take a random pair: two horizontal with probability p,\n// two vertical otherwise.\nfunction create(D) {\n  const { grid: g, k, p, N, F } = D;\n  for (let y = N - k; y \u003c N + k; y++) {\n    const r = k - abs(2 * y + 1 - F) / 2 + 0.5;\n    for (let x = N - r; x \u003c N + r; x++) {\n      const c = x + y * F;\n      if (g[c] >= 0) continue;\n      if (random() \u003c p) {\n        g[c] = g[c + 1] = add(D, x, y, 0);\n        g[c + F] = g[c + F + 1] = add(D, x, y + 1, 0);\n      } else {\n        g[c] = g[c + F] = add(D, x, y, 1);\n        g[c + 1] = g[c + F + 1] = add(D, x + 1, y, 1);\n      }\n    }\n  }\n}\n\n// At full size the tiling keeps moving by flips: a 2x2 block covered by two\n// parallel dominoes turns over to the other pair with the same odds as a\n// fresh block. The weighted uniform measure stays put under it, so the\n// frozen corners hold still and only the arctic circle churns.\nfunction flips(D, tries) {\n  const { dx, dy, dv, grid: g, p, F } = D;\n  for (let t = 0; t \u003c tries; t++) {\n    const x = floor(random() * (F - 1)), y = floor(random() * (F - 1)), c = x + y * F, a = g[c];\n    if (a \u003c 0 || dx[a] !== x || dy[a] !== y) continue;\n    const h = random() \u003c p;\n    if (!dv[a]) {\n      const b = g[c + F];\n      if (b \u003c 0 || dv[b] || dx[b] !== x || dy[b] !== y + 1 || h) continue;\n      (dv[a] = dv[b] = 1), (dx[b] = x + 1), (dy[b] = y);\n      (g[c + F] = a), (g[c + 1] = b);\n    } else {\n      const b = g[c + 1];\n      if (b \u003c 0 || !dv[b] || dx[b] !== x + 1 || dy[b] !== y || !h) continue;\n      (dv[a] = dv[b] = 0), (dx[b] = x), (dy[b] = y + 1);\n      (g[c + 1] = a), (g[c + F] = b);\n    }\n  }\n}\n\n// The picture a diamond fades to.\nfunction paint(D) {\n  const { dx, dy, dv, dg, k, F, tt, tg } = D;\n  tt.fill(0);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F, c2 = dv[i] ? c + F : c + 1;\n    (tt[c] = tt[c2] = t + 1), (tg[c] = tg[c2] = dg[i]);\n  }\n}\n\nfunction retire(D, dur) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  (D.u = 0), (D.stage = 2), (D.dur = dur), (D.n = 0);\n  paint(D);\n}\n\n// One move of a diamond's life. Growing, a step from order k to k + 1 takes\n// two fades: the bad pairs go out while every other domino slides, then the\n// holes fill. Grown, it flips blocks a batch at a time until its hold runs\n// out, fades and grows again from order 1.\nfunction begin(D, P) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  D.u = 0;\n  const s = P.speed, T = 0.9 / s;\n  if (D.stage === 0) {\n    if (D.sub === 0) create(D), (D.sub = 1), (D.dur = 0.4 * T);\n    else if (D.k >= D.N) {\n      (D.stage = 1), (D.clock = -D.wait), (D.wait = 0);\n      return begin(D, P);\n    } else if (D.k === 0) (D.k = 1), regrid(D), create(D), (D.dur = 0.4 * T);\n    else destroy(D), slide(D), (D.sub = 0), (D.dur = 0.6 * T);\n  } else if (D.stage === 1) {\n    if (D.clock > (D.hold * 2) / s) {\n      if (D.N \u003c 32) D.hold = 40 + 20 * random();\n      return retire(D, 0.8);\n    }\n    flips(D, 500), (D.dur = 0.35 / s);\n  } else {\n    (D.stage = 0), (D.sub = 1), (D.k = 0), (D.n = 0);\n    return begin(D, P);\n  }\n  paint(D);\n}\n\n// Which diamond and which of its cells each LED shows; -1 is the dark seam.\nconst OWN = new Int8Array(NP).fill(-1), CELL = new Int32Array(NP);\nLAYOUT.forEach(([cx, cy, N], d) => {\n  for (let y = 0; y \u003c 2 * N; y++)\n    for (let x = 0; x \u003c 2 * N; x++) {\n      const X = cx - N + x, Y = cy - N + y;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H || abs(2 * x + 1 - 2 * N) + abs(2 * y + 1 - 2 * N) > 2 * N) continue;\n      (OWN[X + Y * W] = d), (CELL[X + Y * W] = x + y * 2 * N);\n    }\n});\n\nexport function setup(params) {\n  params.s = { fresh: true, speed: 2, hue: 0, dark: 0.4, D: LAYOUT.map(makeDiamond), col: new Float32Array(12) };\n}\n\n// The top diamond opens grown and churning, the bottom one at order 18 and\n// still growing, the six round them grown and due to regrow one by one,\n// the first after 11 seconds. They grow on the first frame, once Bias is known.\nfunction opening(P) {\n  P.D.forEach((D, i) => {\n    begin(D, P);\n    while (D.k \u003c LAYOUT[i][5] || (D.k >= D.N && D.stage === 0)) begin(D, P);\n    D.clock = LAYOUT[i][4];\n  });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const bias = cl(k[2], -1, 1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.dark = 0.38 * (1 + cl(k[3], -1, 1));\n  P.D.forEach((D, i) => (D.p = 0.5 + (i \u003c 2 ? 0.4 : -0.4) * bias));\n  if (P.fresh) (P.fresh = false), opening(P);\n  // K1: every diamond fades and grows again from order 1, all together; the\n  // bottom one then holds half a cycle longer, so the two take turns again.\n  if (input.btnPressed && input.btnPressed[0])\n    P.D.forEach((D, i) => {\n      D.wait = ((i === 1 ? 15 : i > 1 ? 30 * random() : 0) * 2) / P.speed;\n      retire(D, 0.4);\n    });\n  for (const D of P.D) {\n    D.clock += d;\n    D.u += d / D.dur;\n    if (D.u >= 1) begin(D, P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const col = P.col, sm = 1 - P.dark, E = P.D.map((D) => ease(cl(D.u, 0, 1)));\n  // Orange north, green east, blue south, magenta west at Hue 0.\n  for (let t = 0; t \u003c 4; t++) hsv(P.hue + 0.1 + t * 0.25, 0.94, 1, col, t * 3);\n  for (let p = 0; p \u003c NP; p++) {\n    const d = OWN[p], x = p % W, y = (p / W) | 0;\n    if (d \u003c 0) {\n      display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    // The checkerboard stays put on the LEDs while the dominoes slide over it.\n    const D = P.D[d], c = CELL[p], a = D.ft[c], b = D.tt[c], e = E[d], lv = (x + y) & 1 ? sm : 1;\n    let r = 0, g = 0, bl = 0;\n    if (a) {\n      const w = D.fg[c] * lv * (1 - e), q = (a - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    if (b) {\n      const w = D.tg[c] * lv * e, q = (b - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    display.setPixel(x, y, min(255, r), min(255, g), min(255, bl));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower."},{"name":"Bias","min":-1,"max":1,"about":"The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way."},{"name":"Checker","min":-1,"max":1,"about":"How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED."}],"start":[0,2,0,0.06],"measures":{"motion":0.2173,"detail":0.3498,"edges":0.9816,"complexity":1.6331,"coverage":0.888,"colour":0.6403,"drift":0.1071},"knobResponse":[0.459,0.1665,0.2603,0.1486]},{"slug":"bait-ball","title":"Bait Ball","family":"ocean","round":23,"note":"옆에서 본 푸른 바다를 정어리 떼 공이 거의 다 채워요. 떼가 한꺼번에 몸을 틀면 은빛 물결이 공을 가로지르고, 등을 돌리면 짙은 남색으로 가라앉아요. 상어와 돌고래가 뚫고 지나간 구멍은 뒤에서 다시 닫히고, 가넷이 수면에서 거품 꼬리를 끌며 내리꽂혀요.","idea":"Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.","buttons":"K1 tap sends a hunter charging through the ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-bait-ball","type":"code","name":"bait-ball","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower."},{"name":"Predators","min":1,"max":5,"about":"How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them."},{"name":"Sun","min":0,"max":1,"about":"The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel."}],"start":[0,2,1,0.06],"measures":{"motion":0.8889,"detail":0.2376,"edges":0.5511,"complexity":1.4993,"coverage":0.9518,"colour":0.2846,"drift":0.3724},"knobResponse":[0.0519,0.3412,0.1352,0.1016]},{"slug":"ballistic-deposition","title":"Ballistic Deposition","family":"particle","round":30,"note":"입자가 64열 위로 곧게 떨어져 처음 닿는 자리에 붙어요. 처마 밑이 빈 퇴적물이 내려앉은 차례대로 띠를 이루고, 띠의 경계가 거칠어지는 앞면의 지난 모습이에요.","idea":"Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.","buttons":"K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.","code":"// ===== Patternflow pattern =====\n// Title:   Ballistic Deposition\n// Family:  particle\n// Idea:    Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: ballistic deposition (Marjorie J. Vold, 1959), whose surface is in the Kardar-Parisi-Zhang class (1986), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24\n//\n// Knob 1: Hue. Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green.\n// Knob 2: Speed. Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second.\n// Knob 3: Slip. The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000.\n// Knob 4: Layers. How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows.\n// Buttons: K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.\n\n// On 64 columns that wrap round, the front's width grows from a flat start\n// as t^(1/3), the KPZ exponent, and stops near 4.5 rows once its bumps are\n// as wide as the panel; the bands keep each stage of it as it scrolls by.\nconst W = 64, H = 128, R = 512, RM = R - 1;\nconst { min, max, floor, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst MAXF = 1024, MAXL = 256;\nconst FALL = 70; // rows a second\nconst FRONT = 0.8; // the camera holds the mean front this far up the panel\nconst LID = 0x7fffffff;\n\nexport function setup(params) {\n  params.s = {\n    fresh: true,\n    h: new Int32Array(W), // rows taken in each column, counting the particles still falling to it\n    vh: new Int32Array(W), // the same for the particles that have landed\n    cell: new Int32Array(W * R), // particle number, 0 for a hole\n    row: new Int32Array(R).fill(-1), // the world row each ring row holds\n    n: 0, base: 0, acc: 0, t: 0,\n    fx: new Int16Array(MAXF), fy: new Float32Array(MAXF), fto: new Int32Array(MAXF), fn: new Int32Array(MAXF), nf: 0,\n    lx: new Int16Array(MAXL), ly: new Int32Array(MAXL), lt: new Float32Array(MAXL).fill(-9), li: 0,\n    hue: 0, layers: 6,\n    pal: new Float32Array(256 * 3), palKey: new Int32Array(256).fill(-1),\n  };\n}\n\n// Vold's rule. A particle falling down column x stops on its own column's top\n// or, if it sticks sideways, beside the top particle of a taller neighbour:\n// h_x \u003c- max(h_{x-1}, h_x + 1, h_{x+1}). The columns wrap round.\nfunction deposit(P, x, stick) {\n  const h = P.h;\n  let y = h[x];\n  if (stick) y = max(y, h[(x + 63) & 63] - 1, h[(x + 1) & 63] - 1);\n  h[x] = y + 1;\n  return y;\n}\n\n// The deposit lives in a ring of 512 rows; a row is wiped when a particle\n// first reaches it, and rows far below the camera are written over.\nfunction place(P, x, y, n) {\n  const rr = y & RM;\n  if (P.row[rr] !== y) {\n    if (P.row[rr] > y) return;\n    P.row[rr] = y;\n    P.cell.fill(0, rr * W, rr * W + W);\n  }\n  P.cell[rr * W + x] = n;\n  if (y >= P.vh[x]) P.vh[x] = y + 1;\n}\n\nconst meanH = (h) => {\n  let s = 0;\n  for (let x = 0; x \u003c W; x++) s += h[x];\n  return s / W;\n};\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 6], d = cl(dt || 0, 0, 0.1);\n  const speed = cl(k[1], 0.2, 3), slip = cl(k[2], 0, 1);\n  P.hue = k[0];\n  P.layers = cl(k[3], 6, 24);\n  P.t += d;\n  // The opening deposit is laid on a flat floor before the first frame,\n  // until its mean front stands at the camera's mark.\n  if (P.fresh) {\n    P.fresh = false;\n    while (meanH(P.h) \u003c FRONT * H)\n      for (let i = 0; i \u003c W; i++) {\n        const x = floor(random() * W);\n        place(P, x, deposit(P, x, random() >= slip), ++P.n);\n      }\n  }\n  // K1: a flat lid one row above the highest particle. The front starts\n  // flat again and roughens on top of it.\n  if (input.btnPressed && input.btnPressed[0]) {\n    let y = 0;\n    for (let x = 0; x \u003c W; x++) y = max(y, P.h[x]);\n    for (let x = 0; x \u003c W; x++) place(P, x, y, LID), (P.h[x] = y + 1);\n    for (let i = 0; i \u003c P.nf; i++) P.fto[i] = deposit(P, P.fx[i], random() >= slip);\n  }\n  // Each particle's landing is settled the moment it leaves the top, against\n  // the deposit as all earlier particles left it, so the order is Vold's\n  // one at a time; the fall to that place is only shown.\n  P.acc += 4 * Math.pow(75, (speed - 0.2) / 2.8) * d;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    if (P.nf >= MAXF) continue;\n    const i = P.nf++, x = floor(random() * W);\n    P.fx[i] = x;\n    P.fto[i] = deposit(P, x, random() >= slip);\n    P.fn[i] = ++P.n;\n    P.fy[i] = max(P.base + H + random() * FALL * d, P.fto[i] + 1);\n  }\n  for (let i = 0; i \u003c P.nf; i++) {\n    P.fy[i] -= FALL * d;\n    if (P.fy[i] > P.fto[i]) continue;\n    place(P, P.fx[i], P.fto[i], P.fn[i]);\n    const j = P.li++ & (MAXL - 1);\n    (P.lx[j] = P.fx[i]), (P.ly[j] = P.fto[i]), (P.lt[j] = P.t);\n    P.nf--;\n    (P.fx[i] = P.fx[P.nf]), (P.fy[i] = P.fy[P.nf]), (P.fto[i] = P.fto[P.nf]), (P.fn[i] = P.fn[P.nf]);\n    i--;\n  }\n  const goal = meanH(P.vh) - FRONT * H;\n  if (goal > P.base) P.base += (goal - P.base) * min(1, d * 4);\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const B = round(P.base), per = W * P.layers, pal = P.pal, key = P.palKey;\n  // A band is Layers times 64 particles, counted in landing order. Bands\n  // alternate between two colours 0.3 of the wheel apart, and the pair\n  // wanders 0.125 up the wheel and back over ten bands.\n  const colour = (n) => {\n    const b = floor((n - 1) / per), q = b & 255;\n    if (key[q] !== b) {\n      key[q] = b;\n      const odd = b & 1, u = b % 10, tri = u \u003c 5 ? u : 10 - u;\n      hsv(P.hue + 0.48 + 0.025 * tri + (odd ? 0.3 : 0), odd ? 0.8 : 0.9, odd ? 0.85 : 1, pal, q * 3);\n    }\n    return q * 3;\n  };\n  for (let sy = 0; sy \u003c H; sy++) {\n    // Older deposit dims with depth, to 55% at the bottom edge.\n    const wy = B + H - 1 - sy, rr = wy & RM, ok = wy >= 0 && P.row[rr] === wy, fade = 1 - 0.45 * cl((sy - 30) / 98, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const n = ok ? P.cell[rr * W + x] : 0;\n      if (!n) display.setPixel(x, sy, 0, 0, 0);\n      else if (n === LID) display.setPixel(x, sy, 200, 200, 200);\n      else {\n        const q = colour(n);\n        // The top particle of each column, the front itself, burns pale.\n        if (wy === P.vh[x] - 1) display.setPixel(x, sy, pal[q] * 0.35 + 166, pal[q + 1] * 0.35 + 166, pal[q + 2] * 0.35 + 166);\n        else display.setPixel(x, sy, pal[q] * fade, pal[q + 1] * fade, pal[q + 2] * fade);\n      }\n    }\n  }\n  // Fresh landings flash white and settle into their band's colour.\n  for (let j = 0; j \u003c MAXL; j++) {\n    const age = P.t - P.lt[j];\n    if (age > 0.4) continue;\n    const y = P.ly[j], sy = B + H - 1 - y, rr = y & RM, n = P.row[rr] === y ? P.cell[rr * W + P.lx[j]] : 0;\n    if (sy \u003c 0 || sy >= H || !n || n === LID) continue;\n    const q = colour(n), a = age / 0.4, w = 255 * (1 - a);\n    display.setPixel(P.lx[j], sy, w + pal[q] * a, w + pal[q + 1] * a, w + pal[q + 2] * a);\n  }\n  // Particles in flight: a white head and a short grey tail.\n  for (let i = 0; i \u003c P.nf; i++) {\n    const sy = B + H - 1 - floor(P.fy[i]);\n    for (let t = 0; t \u003c 3; t++) {\n      const y = sy - t, v = t ? 150 - 45 * t : 255;\n      if (y >= 0 && y \u003c H) display.setPixel(P.fx[i], y, v, v, v);\n    }\n  }\n}\n","layer":{"id":"layer-ballistic-deposition","type":"code","name":"ballistic-deposition","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ballistic Deposition\n// Family:  particle\n// Idea:    Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: ballistic deposition (Marjorie J. Vold, 1959), whose surface is in the Kardar-Parisi-Zhang class (1986), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24\n//\n// Knob 1: Hue. Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green.\n// Knob 2: Speed. Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second.\n// Knob 3: Slip. The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000.\n// Knob 4: Layers. How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows.\n// Buttons: K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.\n\n// On 64 columns that wrap round, the front's width grows from a flat start\n// as t^(1/3), the KPZ exponent, and stops near 4.5 rows once its bumps are\n// as wide as the panel; the bands keep each stage of it as it scrolls by.\nconst W = 64, H = 128, R = 512, RM = R - 1;\nconst { min, max, floor, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst MAXF = 1024, MAXL = 256;\nconst FALL = 70; // rows a second\nconst FRONT = 0.8; // the camera holds the mean front this far up the panel\nconst LID = 0x7fffffff;\n\nexport function setup(params) {\n  params.s = {\n    fresh: true,\n    h: new Int32Array(W), // rows taken in each column, counting the particles still falling to it\n    vh: new Int32Array(W), // the same for the particles that have landed\n    cell: new Int32Array(W * R), // particle number, 0 for a hole\n    row: new Int32Array(R).fill(-1), // the world row each ring row holds\n    n: 0, base: 0, acc: 0, t: 0,\n    fx: new Int16Array(MAXF), fy: new Float32Array(MAXF), fto: new Int32Array(MAXF), fn: new Int32Array(MAXF), nf: 0,\n    lx: new Int16Array(MAXL), ly: new Int32Array(MAXL), lt: new Float32Array(MAXL).fill(-9), li: 0,\n    hue: 0, layers: 6,\n    pal: new Float32Array(256 * 3), palKey: new Int32Array(256).fill(-1),\n  };\n}\n\n// Vold's rule. A particle falling down column x stops on its own column's top\n// or, if it sticks sideways, beside the top particle of a taller neighbour:\n// h_x \u003c- max(h_{x-1}, h_x + 1, h_{x+1}). The columns wrap round.\nfunction deposit(P, x, stick) {\n  const h = P.h;\n  let y = h[x];\n  if (stick) y = max(y, h[(x + 63) & 63] - 1, h[(x + 1) & 63] - 1);\n  h[x] = y + 1;\n  return y;\n}\n\n// The deposit lives in a ring of 512 rows; a row is wiped when a particle\n// first reaches it, and rows far below the camera are written over.\nfunction place(P, x, y, n) {\n  const rr = y & RM;\n  if (P.row[rr] !== y) {\n    if (P.row[rr] > y) return;\n    P.row[rr] = y;\n    P.cell.fill(0, rr * W, rr * W + W);\n  }\n  P.cell[rr * W + x] = n;\n  if (y >= P.vh[x]) P.vh[x] = y + 1;\n}\n\nconst meanH = (h) => {\n  let s = 0;\n  for (let x = 0; x \u003c W; x++) s += h[x];\n  return s / W;\n};\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 6], d = cl(dt || 0, 0, 0.1);\n  const speed = cl(k[1], 0.2, 3), slip = cl(k[2], 0, 1);\n  P.hue = k[0];\n  P.layers = cl(k[3], 6, 24);\n  P.t += d;\n  // The opening deposit is laid on a flat floor before the first frame,\n  // until its mean front stands at the camera's mark.\n  if (P.fresh) {\n    P.fresh = false;\n    while (meanH(P.h) \u003c FRONT * H)\n      for (let i = 0; i \u003c W; i++) {\n        const x = floor(random() * W);\n        place(P, x, deposit(P, x, random() >= slip), ++P.n);\n      }\n  }\n  // K1: a flat lid one row above the highest particle. The front starts\n  // flat again and roughens on top of it.\n  if (input.btnPressed && input.btnPressed[0]) {\n    let y = 0;\n    for (let x = 0; x \u003c W; x++) y = max(y, P.h[x]);\n    for (let x = 0; x \u003c W; x++) place(P, x, y, LID), (P.h[x] = y + 1);\n    for (let i = 0; i \u003c P.nf; i++) P.fto[i] = deposit(P, P.fx[i], random() >= slip);\n  }\n  // Each particle's landing is settled the moment it leaves the top, against\n  // the deposit as all earlier particles left it, so the order is Vold's\n  // one at a time; the fall to that place is only shown.\n  P.acc += 4 * Math.pow(75, (speed - 0.2) / 2.8) * d;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    if (P.nf >= MAXF) continue;\n    const i = P.nf++, x = floor(random() * W);\n    P.fx[i] = x;\n    P.fto[i] = deposit(P, x, random() >= slip);\n    P.fn[i] = ++P.n;\n    P.fy[i] = max(P.base + H + random() * FALL * d, P.fto[i] + 1);\n  }\n  for (let i = 0; i \u003c P.nf; i++) {\n    P.fy[i] -= FALL * d;\n    if (P.fy[i] > P.fto[i]) continue;\n    place(P, P.fx[i], P.fto[i], P.fn[i]);\n    const j = P.li++ & (MAXL - 1);\n    (P.lx[j] = P.fx[i]), (P.ly[j] = P.fto[i]), (P.lt[j] = P.t);\n    P.nf--;\n    (P.fx[i] = P.fx[P.nf]), (P.fy[i] = P.fy[P.nf]), (P.fto[i] = P.fto[P.nf]), (P.fn[i] = P.fn[P.nf]);\n    i--;\n  }\n  const goal = meanH(P.vh) - FRONT * H;\n  if (goal > P.base) P.base += (goal - P.base) * min(1, d * 4);\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const B = round(P.base), per = W * P.layers, pal = P.pal, key = P.palKey;\n  // A band is Layers times 64 particles, counted in landing order. Bands\n  // alternate between two colours 0.3 of the wheel apart, and the pair\n  // wanders 0.125 up the wheel and back over ten bands.\n  const colour = (n) => {\n    const b = floor((n - 1) / per), q = b & 255;\n    if (key[q] !== b) {\n      key[q] = b;\n      const odd = b & 1, u = b % 10, tri = u \u003c 5 ? u : 10 - u;\n      hsv(P.hue + 0.48 + 0.025 * tri + (odd ? 0.3 : 0), odd ? 0.8 : 0.9, odd ? 0.85 : 1, pal, q * 3);\n    }\n    return q * 3;\n  };\n  for (let sy = 0; sy \u003c H; sy++) {\n    // Older deposit dims with depth, to 55% at the bottom edge.\n    const wy = B + H - 1 - sy, rr = wy & RM, ok = wy >= 0 && P.row[rr] === wy, fade = 1 - 0.45 * cl((sy - 30) / 98, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const n = ok ? P.cell[rr * W + x] : 0;\n      if (!n) display.setPixel(x, sy, 0, 0, 0);\n      else if (n === LID) display.setPixel(x, sy, 200, 200, 200);\n      else {\n        const q = colour(n);\n        // The top particle of each column, the front itself, burns pale.\n        if (wy === P.vh[x] - 1) display.setPixel(x, sy, pal[q] * 0.35 + 166, pal[q + 1] * 0.35 + 166, pal[q + 2] * 0.35 + 166);\n        else display.setPixel(x, sy, pal[q] * fade, pal[q + 1] * fade, pal[q + 2] * fade);\n      }\n    }\n  }\n  // Fresh landings flash white and settle into their band's colour.\n  for (let j = 0; j \u003c MAXL; j++) {\n    const age = P.t - P.lt[j];\n    if (age > 0.4) continue;\n    const y = P.ly[j], sy = B + H - 1 - y, rr = y & RM, n = P.row[rr] === y ? P.cell[rr * W + P.lx[j]] : 0;\n    if (sy \u003c 0 || sy >= H || !n || n === LID) continue;\n    const q = colour(n), a = age / 0.4, w = 255 * (1 - a);\n    display.setPixel(P.lx[j], sy, w + pal[q] * a, w + pal[q + 1] * a, w + pal[q + 2] * a);\n  }\n  // Particles in flight: a white head and a short grey tail.\n  for (let i = 0; i \u003c P.nf; i++) {\n    const sy = B + H - 1 - floor(P.fy[i]);\n    for (let t = 0; t \u003c 3; t++) {\n      const y = sy - t, v = t ? 150 - 45 * t : 255;\n      if (y >= 0 && y \u003c H) display.setPixel(P.fx[i], y, v, v, v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green."},{"name":"Speed","min":0.2,"max":3,"about":"Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second."},{"name":"Slip","min":0,"max":1,"about":"The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000."},{"name":"Layers","min":6,"max":24,"about":"How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows."}],"start":[0,2,0,6],"measures":{"motion":0.6499,"detail":0.2394,"edges":0.9298,"complexity":0.4248,"coverage":0.4131,"colour":0.4145,"drift":0.0572},"knobResponse":[0.2133,0.2835,0.2999,0.1051]},{"slug":"balloon-box","title":"Balloon Box","family":"weather","round":11,"note":"새벽 골짜기에 바람이 둘이에요. 낮은 바람은 열기구를 왼쪽으로, 높은 바람은 오른쪽으로 데려가고, 조종사가 버너로 높이를 바꾸면 풍선이 멈췄다 되돌아가요. 옆으로 나간 자리에는 새 풍선이 바람을 타고 들어오거나 들판에서 떠올라요. K1 을 누르면 모든 버너가 한꺼번에 켜져요.","idea":"Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.","buttons":"K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.","code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-balloon-box","type":"code","name":"balloon-box","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons."},{"name":"Wind","min":0.2,"max":3,"about":"How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds."},{"name":"Balloons","min":8,"max":16,"about":"How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back."},{"name":"Sunrise","min":0,"max":1,"about":"The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue."}],"start":[0,2,8,0.06],"measures":{"motion":0.167,"detail":0.0307,"edges":0.6336,"complexity":0.5511,"coverage":0.8946,"colour":0.5662,"drift":0.2806},"knobResponse":[0.306,0.2762,0.2316,0.2865]},{"slug":"bath-fizz","title":"Bath Fizz","family":"cosmetic","round":35,"note":"패널 아래에서 녹는 배스 파우더가 깊은 물속으로 안료 구름을 올려 보내요. 분홍에서 색상환을 따라 벌려 놓은 안료 세 가지가 버섯 머리로 말리며 128줄을 채우고 맞닿은 가장자리에서 섞여요. 가는 거품 줄기가 그 사이를 뚫고 올라가며 물을 끌어올려요. K3 은 거품을 1초에 60개에서 360개로 늘려 첫 구름이 위 20줄에 닿는 때를 7.6초에서 2.4초로 당기고, K1 을 누르면 세 색이 바닥에서 한꺼번에 터져요.","idea":"Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.","buttons":"K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.","code":"// ===== Patternflow pattern =====\n// Title:   Bath Fizz\n// Family:  cosmetic\n// Idea:    Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after underwater film of a fizzing bath powder clouding the water\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1\n//\n// Knob 1: Hue. Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo.\n// Knob 2: Speed. How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower.\n// Knob 3: Fizz. How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s.\n// Knob 4: Mix. How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac.\n// Buttons: K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.\n\nconst W = 64, H = 128, N = W * H;\n// The water is worked out on a grid of 2x2 LEDs; the pigment is carried at\n// full resolution through it, so the clouds keep a fine edge.\nconst GW = 32, GH = 64, GN = GW * GH;\nconst MAXB = 1200;\n// Deep indigo, given at full brightness like the water colour it replaces.\nconst INDIGO = [0.34, 0.3, 1];\nconst { min, max, floor, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    U: F(GN), V: F(GN), U0: F(GN), V0: F(GN), P: F(GN), DV: F(GN), L: F(GN), L0: F(GN), CU: F(GN), FB: F(GN),\n    A: [F(N), F(N), F(N)], TA: F(N), PI0: new Int32Array(N), PF: F(2 * N), BB: F(N), BT: F(N), DD: F(N),\n    bx: F(MAXB), by: F(MAXB), bs: F(MAXB), bp: F(MAXB), nb: 0,\n    // Three places along the bottom where the powder fizzes, one per colour.\n    src: [0, 1, 2].map((c) => ({ c, ph: (2 * PI * c) / 3 + rnd(), w: [0.11, 0.07, 0.09][c], next: 0.2 + 0.5 * c, puff: 0, bacc: 0 })),\n    T: 0, RS: F(W), RC: F(W), PW: F(256), pe: 0, hue: 0, speed: 2, fizz: 0, mix: 0.06, started: false, col: F(20), key: NaN,\n  };\n}\n\n// Bilinear read of a grid field at grid coordinates.\nfunction samp(F, x, y) {\n  x = cl(x, 0, GW - 1.001);\n  y = cl(y, 0, GH - 1.001);\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, i = iy * GW + ix;\n  return (F[i] * (1 - fx) + F[i + 1] * fx) * (1 - fy) + (F[i + GW] * (1 - fx) + F[i + GW + 1] * fx) * fy;\n}\n\n// A soft round blob added to a full-resolution field.\nfunction blob(A, cx, cy, r, w) {\n  const x0 = max(0, floor(cx - 2 * r)), x1 = min(W - 1, floor(cx + 2 * r)), y0 = max(0, floor(cy - 2 * r)), y1 = min(H - 1, floor(cy + 2 * r));\n  const k = 1 / (r * r);\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy;\n      A[y * W + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction gblob(G, cx, cy, r, w) {\n  // The same on the water's grid, given in LEDs.\n  const gx = cx / 2, gy = cy / 2, gr = r / 2, k = 1 / (gr * gr);\n  for (let y = max(0, floor(gy - 2 * gr)); y \u003c= min(GH - 1, floor(gy + 2 * gr)); y++)\n    for (let x = max(0, floor(gx - 2 * gr)); x \u003c= min(GW - 1, floor(gx + 2 * gr)); x++) {\n      const dx = x + 0.5 - gx, dy = y + 0.5 - gy;\n      G[y * GW + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction bubbles(S, x, n, spread) {\n  for (let j = 0; j \u003c n && S.nb \u003c MAXB; j++) {\n    const i = S.nb++;\n    S.bx[i] = x + (rnd() + rnd() - 1) * spread;\n    S.by[i] = H + 1 + rnd() * 4;\n    S.bs[i] = rnd();\n    S.bp[i] = rnd() * 2 * PI;\n  }\n}\n\n// A burst from one place: pigment and lift at the bottom, and its bubbles.\nfunction puff(S, s, x, k) {\n  blob(S.A[s.c], x, H - 2, 5 + 2 * k, 5.4 * k);\n  gblob(S.L, x, H - 3, 6 + 2 * k, 2.2 * k);\n}\n\nfunction burst(S) {\n  for (const s of S.src) {\n    const x = 6 + rnd() * 52;\n    puff(S, s, x, 2.2);\n    bubbles(S, x, 70, 5);\n  }\n}\n\nfunction fluid(S, st) {\n  const U = S.U, V = S.V, U0 = S.U0, V0 = S.V0, L = S.L, L0 = S.L0, P = S.P, DV = S.DV, CU = S.CU, FB = S.FB, f = S.fizz;\n  // Forces: the lift the fizz leaves in the water, and the drag of each\n  // rising bubble on the water round it.\n  const buoy = 34 * (1 + 0.9 * f);\n  for (let i = 0; i \u003c GN; i++) {\n    V[i] -= st * (buoy * L[i] + 7 * FB[i]);\n    FB[i] = 0;\n  }\n  // Vorticity confinement keeps the small curls that roll a cloud's edge over.\n  for (let y = 1; y \u003c GH - 1; y++)\n    for (let x = 1; x \u003c GW - 1; x++) {\n      const i = y * GW + x;\n      CU[i] = 0.5 * (V[i + 1] - V[i - 1] - U[i + GW] + U[i - GW]);\n    }\n  const eps = 2.2;\n  for (let y = 2; y \u003c GH - 2; y++)\n    for (let x = 2; x \u003c GW - 2; x++) {\n      const i = y * GW + x;\n      const nx = 0.5 * (abs(CU[i + 1]) - abs(CU[i - 1])), ny = 0.5 * (abs(CU[i + GW]) - abs(CU[i - GW])), nl = sqrt(nx * nx + ny * ny) + 1e-5;\n      U[i] += st * eps * (ny / nl) * CU[i];\n      V[i] -= st * eps * (nx / nl) * CU[i];\n    }\n  // Carry the water along itself.\n  U0.set(U);\n  V0.set(V);\n  L0.set(L);\n  const fade = exp(-st / 2.4);\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const px = x - st * U0[i], py = y - st * V0[i];\n      U[i] = samp(U0, px, py) * 0.995;\n      V[i] = samp(V0, px, py) * 0.995;\n      L[i] = samp(L0, px, py) * fade;\n    }\n  // Walls all round: the sides of the bath, its floor below the panel and the\n  // surface above.\n  for (let y = 0; y \u003c GH; y++) {\n    U[y * GW] = U[y * GW + GW - 1] = 0;\n  }\n  for (let x = 0; x \u003c GW; x++) {\n    V[x] = V[(GH - 1) * GW + x] = 0;\n  }\n  // Make it incompressible: what rises in the middle comes down at the sides.\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const ur = x \u003c GW - 1 ? U[i + 1] : 0, ul = x > 0 ? U[i - 1] : 0, vd = y \u003c GH - 1 ? V[i + GW] : 0, vu = y > 0 ? V[i - GW] : 0;\n      DV[i] = 0.5 * (ur - ul + vd - vu);\n    }\n  for (let it = 0; it \u003c 24; it++)\n    for (let y = 0, i = 0; y \u003c GH; y++)\n      for (let x = 0; x \u003c GW; x++, i++) {\n        const p = P[i];\n        const s = (x > 0 ? P[i - 1] : p) + (x \u003c GW - 1 ? P[i + 1] : p) + (y > 0 ? P[i - GW] : p) + (y \u003c GH - 1 ? P[i + GW] : p);\n        P[i] = p + 1.6 * ((s - DV[i]) / 4 - p);\n      }\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const p = P[i];\n      U[i] -= 0.5 * ((x \u003c GW - 1 ? P[i + 1] : p) - (x > 0 ? P[i - 1] : p));\n      V[i] -= 0.5 * ((y \u003c GH - 1 ? P[i + GW] : p) - (y > 0 ? P[i - GW] : p));\n    }\n}\n\nfunction pigment(S, st) {\n  const U = S.U, V = S.V, TA = S.TA, mix = S.mix, PI0 = S.PI0, PF = S.PF;\n  // The pigment is carried by the water, read at each LED's own place so it\n  // stays half a cell finer than the water. The trace back is worked out once\n  // for all three pigments.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const gx = (x + 0.5) / 2 - 0.5, gy = (y + 0.5) / 2 - 0.5;\n      const px = cl(x - 2 * st * samp(U, gx, gy), 0, W - 1.001), py = cl(y - 2 * st * samp(V, gx, gy), 0, H - 1.001);\n      const ix = floor(px), iy = floor(py);\n      PI0[i] = iy * W + ix;\n      PF[2 * i] = px - ix;\n      PF[2 * i + 1] = py - iy;\n    }\n  // Then it spreads a little, more the higher Mix, and slowly thins into the bath.\n  const kap = cl(st * (0.6 + 5 * mix), 0, 0.24), fade = exp(-st / 5);\n  for (const A of S.A) {\n    TA.set(A);\n    for (let i = 0; i \u003c N; i++) {\n      const j = PI0[i], fx = PF[2 * i], fy = PF[2 * i + 1];\n      A[i] = (TA[j] * (1 - fx) + TA[j + 1] * fx) * (1 - fy) + (TA[j + W] * (1 - fx) + TA[j + W + 1] * fx) * fy;\n    }\n    TA.set(A);\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const c = TA[i];\n        const l = (x > 0 ? TA[i - 1] : c) + (x \u003c W - 1 ? TA[i + 1] : c) + (y > 0 ? TA[i - W] : c) + (y \u003c H - 1 ? TA[i + W] : c) - 4 * c;\n        A[i] = (c + kap * l) * fade;\n      }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const f = S.fizz;\n  for (const s of S.src) {\n    // Each place wanders along the bottom as the powder tumbles, each at its\n    // own pace, so now and then two pass and their clouds go up together.\n    s.ph += st * s.w;\n    const x = 32 + 22 * sin(s.ph) + 4 * sin(2.7 * s.ph + s.c);\n    s.next -= st;\n    if (s.next \u003c= 0) {\n      s.puff = 0.8 + 0.6 * rnd();\n      s.next = (1.6 - 0.8 * f) * (0.6 + 0.8 * rnd());\n    }\n    s.puff *= exp(-st / 0.3);\n    const k = st * (0.5 + 0.4 * f + 4 * s.puff);\n    puff(S, s, x, k);\n    s.bacc += st * (30 + 110 * f) * (0.5 + s.puff);\n    const nb = floor(s.bacc);\n    s.bacc -= nb;\n    bubbles(S, x, nb, 1.5 + 1.5 * s.puff);\n  }\n  // Bubbles: small ones rise slower and zig-zag more, all ride the water\n  // sideways, and each pulls the water up with it.\n  const U = S.U, V = S.V, FB = S.FB;\n  let k = 0;\n  for (let i = 0; i \u003c S.nb; i++) {\n    let x = S.bx[i], y = S.by[i];\n    const s = S.bs[i], gx = x / 2 - 0.5, gy = y / 2 - 0.5;\n    const ph = (S.bp[i] += st * (7 + 5 * (1 - s)));\n    const rise = (24 + 20 * s) * (0.85 + 0.5 * f);\n    x += st * (1.2 * samp(U, gx, gy) + (2 + 3 * (1 - s)) * cos(ph));\n    y += st * (2 * samp(V, gx, gy) * 0.6 - rise);\n    if (y \u003c -1 || x \u003c -1 || x > W + 1) continue;\n    const ci = cl(floor(y / 2), 0, GH - 1) * GW + cl(floor(x / 2), 0, GW - 1);\n    FB[ci] += 0.5 + 0.5 * s;\n    S.bx[k] = x;\n    S.by[k] = y;\n    S.bs[k] = s;\n    S.bp[k] = S.bp[i];\n    k++;\n  }\n  S.nb = k;\n  fluid(S, st);\n  pigment(S, st);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.fizz = cl(kv[2] || 0, 0, 1);\n  S.mix = cl(kv[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the water already clouding: six and a half seconds of fizz,\n    // in coarse steps.\n    for (let i = 0; i \u003c 80; i++) step(S, 1 / 12);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, mix = S.mix, A0 = S.A[0], A1 = S.A[1], A2 = S.A[2], T = S.T;\n  // Palette: three pigments spread round the wheel from the hue, and deep\n  // water. A pigment from orange to lime is paled and its cloud thickens\n  // faster, because those hues at half brightness read brown and olive.\n  const h0 = S.hue + 0.92, key = h0 + 3 * mix;\n  if (S.key !== key) {\n    const hs = [h0, h0 - 0.17, h0 - 0.42];\n    for (let c = 0; c \u003c 3; c++) {\n      const hf = hs[c] - floor(hs[c]), wm = sm((hf - 0.02) / 0.05) * (1 - sm((hf - 0.24) / 0.06));\n      hsv(hs[c], 0.95 - 0.45 * wm, 1, col, c * 3);\n      col[9 + c] = 4.5 * (1 + wm);\n      col[16 + c] = wm;\n    }\n    // Deep water opposite the pigments; where that lands on orange or gold it\n    // would be brown, so there the water turns deep indigo.\n    const hw = h0 - 0.32, hf = hw - floor(hw), wm = sm((hf + 0.02) / 0.06) * (1 - sm((hf - 0.27) / 0.08));\n    hsv(hw, 0.8, 1, col, 12);\n    for (let c = 0; c \u003c 3; c++) col[12 + c] += (INDIGO[c] - col[12 + c]) * wm;\n    S.key = key;\n  }\n  // Bubbles: splatted, then a 3x3 blur so each is a soft bump two or three\n  // LEDs across rather than a hard dot.\n  const BB = S.BB, BT = S.BT;\n  BB.fill(0);\n  for (let i = 0; i \u003c S.nb; i++) {\n    const x = S.bx[i] - 0.5, y = S.by[i] - 0.5, ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, w = 0.7 + 0.5 * S.bs[i];\n    if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) continue;\n    const p = iy * W + ix;\n    BB[p] += w * (1 - fx) * (1 - fy);\n    BB[p + 1] += w * fx * (1 - fy);\n    BB[p + W] += w * (1 - fx) * fy;\n    BB[p + W + 1] += w * fx * fy;\n  }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BT[i] = (x > 0 ? BB[i - 1] : 0) + 2 * BB[i] + (x \u003c W - 1 ? BB[i + 1] : 0);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BB[i] = ((y > 0 ? BT[i - W] : 0) + 2 * BT[i] + (y \u003c H - 1 ? BT[i + W] : 0)) / 16;\n  // How sharply the strongest pigment takes a LED: at Mix 0 it takes it up to\n  // a narrow seam, at 1 the pigments add.\n  const pe = 1 + 7 * (1 - mix) * (1 - mix), PW = S.PW;\n  if (S.pe !== pe) {\n    for (let j = 0; j \u003c 256; j++) PW[j] = pow((j + 0.5) / 255, pe);\n    PW[255] = 1;\n    S.pe = pe;\n  }\n  const DD = S.DD;\n  for (let i = 0; i \u003c N; i++) DD[i] = A0[i] + A1[i] + A2[i];\n  // Slow shafts of light slant down through the water from the surface:\n  // sin(a(x) + 0.08 y), split so each row and column is worked out once.\n  const RS = S.RS, RC = S.RC;\n  for (let x = 0; x \u003c W; x++) {\n    const a = 0.16 * x + 0.5 * T + 1.2 * sin(0.05 * x - 0.3 * T);\n    RS[x] = sin(a);\n    RC[x] = cos(a);\n  }\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    // The water: light from the surface, falling off towards the floor.\n    const wl = 0.1 + 0.08 * exp(-y / 40), wr = 0.25 * wl * exp(-y / 70), sy = sin(0.08 * y), cy = cos(0.08 * y);\n    for (let x = 0; x \u003c W; x++, i++) {\n      const a0 = A0[i], a1 = A1[i], a2 = A2[i], D = DD[i];\n      const lw = wl + wr * (1 + RS[x] * cy + RC[x] * sy);\n      let r = col[12] * lw, g = col[13] * lw, b = col[14] * lw;\n      if (D > 0.002) {\n        // Each pigment's weight is its share of the strongest, to the power pe.\n        const am = a0 > a1 ? (a0 > a2 ? a0 : a2) : a1 > a2 ? a1 : a2, iv = 1 / am;\n        const q0 = a0 * iv, q1 = a1 * iv, q2 = a2 * iv;\n        const w0 = PW[(q0 * 255) | 0], w1 = PW[(q1 * 255) | 0], w2 = PW[(q2 * 255) | 0];\n        const ws = w0 + w1 + w2;\n        let cr = (w0 * col[0] + w1 * col[3] + w2 * col[6]) / ws, cg = (w0 * col[1] + w1 * col[4] + w2 * col[7]) / ws, cb = (w0 * col[2] + w1 * col[5] + w2 * col[8]) / ws;\n        // Opacity goes with the cube of the pigment, e^3 / (e^3 + 1): half at\n        // e = 1, nine tenths at e = 2 and nearly clear below a half, so old\n        // colour thins away and fresh clouds stand out on the water.\n        const e = a0 * col[9] + a1 * col[10] + a2 * col[11], e3 = e * e * e, op = e3 / (e3 + 1);\n        // A thinning cloud of orange, gold or lime would dim through brown and\n        // olive, so as it thins it pales towards a grey haze instead.\n        const wp = ((w0 * col[16] + w1 * col[17] + w2 * col[18]) / ws) * (1 - op * op);\n        cr += (0.8 - cr) * wp;\n        cg += (0.8 - cg) * wp;\n        cb += (0.8 - cb) * wp;\n        // Light from above catches the top of each billow and the cloud is\n        // brighter where it is thick.\n        const up = y > 1 ? D - DD[i - 2 * W] : 0;\n        const lv = cl(0.76 + 0.25 * (1 - exp(-2 * D)) + 0.35 * up, 0.5, 1);\n        r += (cr * lv - r) * op;\n        g += (cg * lv - g) * op;\n        b += (cb * lv - b) * op;\n      }\n      const bb = min(0.55, BB[i]);\n      r += bb * (1 - 0.4 * r);\n      g += bb * (1 - 0.4 * g);\n      b += bb * (1 - 0.4 * b);\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","layer":{"id":"layer-bath-fizz","type":"code","name":"bath-fizz","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bath Fizz\n// Family:  cosmetic\n// Idea:    Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after underwater film of a fizzing bath powder clouding the water\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1\n//\n// Knob 1: Hue. Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo.\n// Knob 2: Speed. How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower.\n// Knob 3: Fizz. How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s.\n// Knob 4: Mix. How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac.\n// Buttons: K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.\n\nconst W = 64, H = 128, N = W * H;\n// The water is worked out on a grid of 2x2 LEDs; the pigment is carried at\n// full resolution through it, so the clouds keep a fine edge.\nconst GW = 32, GH = 64, GN = GW * GH;\nconst MAXB = 1200;\n// Deep indigo, given at full brightness like the water colour it replaces.\nconst INDIGO = [0.34, 0.3, 1];\nconst { min, max, floor, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    U: F(GN), V: F(GN), U0: F(GN), V0: F(GN), P: F(GN), DV: F(GN), L: F(GN), L0: F(GN), CU: F(GN), FB: F(GN),\n    A: [F(N), F(N), F(N)], TA: F(N), PI0: new Int32Array(N), PF: F(2 * N), BB: F(N), BT: F(N), DD: F(N),\n    bx: F(MAXB), by: F(MAXB), bs: F(MAXB), bp: F(MAXB), nb: 0,\n    // Three places along the bottom where the powder fizzes, one per colour.\n    src: [0, 1, 2].map((c) => ({ c, ph: (2 * PI * c) / 3 + rnd(), w: [0.11, 0.07, 0.09][c], next: 0.2 + 0.5 * c, puff: 0, bacc: 0 })),\n    T: 0, RS: F(W), RC: F(W), PW: F(256), pe: 0, hue: 0, speed: 2, fizz: 0, mix: 0.06, started: false, col: F(20), key: NaN,\n  };\n}\n\n// Bilinear read of a grid field at grid coordinates.\nfunction samp(F, x, y) {\n  x = cl(x, 0, GW - 1.001);\n  y = cl(y, 0, GH - 1.001);\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, i = iy * GW + ix;\n  return (F[i] * (1 - fx) + F[i + 1] * fx) * (1 - fy) + (F[i + GW] * (1 - fx) + F[i + GW + 1] * fx) * fy;\n}\n\n// A soft round blob added to a full-resolution field.\nfunction blob(A, cx, cy, r, w) {\n  const x0 = max(0, floor(cx - 2 * r)), x1 = min(W - 1, floor(cx + 2 * r)), y0 = max(0, floor(cy - 2 * r)), y1 = min(H - 1, floor(cy + 2 * r));\n  const k = 1 / (r * r);\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy;\n      A[y * W + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction gblob(G, cx, cy, r, w) {\n  // The same on the water's grid, given in LEDs.\n  const gx = cx / 2, gy = cy / 2, gr = r / 2, k = 1 / (gr * gr);\n  for (let y = max(0, floor(gy - 2 * gr)); y \u003c= min(GH - 1, floor(gy + 2 * gr)); y++)\n    for (let x = max(0, floor(gx - 2 * gr)); x \u003c= min(GW - 1, floor(gx + 2 * gr)); x++) {\n      const dx = x + 0.5 - gx, dy = y + 0.5 - gy;\n      G[y * GW + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction bubbles(S, x, n, spread) {\n  for (let j = 0; j \u003c n && S.nb \u003c MAXB; j++) {\n    const i = S.nb++;\n    S.bx[i] = x + (rnd() + rnd() - 1) * spread;\n    S.by[i] = H + 1 + rnd() * 4;\n    S.bs[i] = rnd();\n    S.bp[i] = rnd() * 2 * PI;\n  }\n}\n\n// A burst from one place: pigment and lift at the bottom, and its bubbles.\nfunction puff(S, s, x, k) {\n  blob(S.A[s.c], x, H - 2, 5 + 2 * k, 5.4 * k);\n  gblob(S.L, x, H - 3, 6 + 2 * k, 2.2 * k);\n}\n\nfunction burst(S) {\n  for (const s of S.src) {\n    const x = 6 + rnd() * 52;\n    puff(S, s, x, 2.2);\n    bubbles(S, x, 70, 5);\n  }\n}\n\nfunction fluid(S, st) {\n  const U = S.U, V = S.V, U0 = S.U0, V0 = S.V0, L = S.L, L0 = S.L0, P = S.P, DV = S.DV, CU = S.CU, FB = S.FB, f = S.fizz;\n  // Forces: the lift the fizz leaves in the water, and the drag of each\n  // rising bubble on the water round it.\n  const buoy = 34 * (1 + 0.9 * f);\n  for (let i = 0; i \u003c GN; i++) {\n    V[i] -= st * (buoy * L[i] + 7 * FB[i]);\n    FB[i] = 0;\n  }\n  // Vorticity confinement keeps the small curls that roll a cloud's edge over.\n  for (let y = 1; y \u003c GH - 1; y++)\n    for (let x = 1; x \u003c GW - 1; x++) {\n      const i = y * GW + x;\n      CU[i] = 0.5 * (V[i + 1] - V[i - 1] - U[i + GW] + U[i - GW]);\n    }\n  const eps = 2.2;\n  for (let y = 2; y \u003c GH - 2; y++)\n    for (let x = 2; x \u003c GW - 2; x++) {\n      const i = y * GW + x;\n      const nx = 0.5 * (abs(CU[i + 1]) - abs(CU[i - 1])), ny = 0.5 * (abs(CU[i + GW]) - abs(CU[i - GW])), nl = sqrt(nx * nx + ny * ny) + 1e-5;\n      U[i] += st * eps * (ny / nl) * CU[i];\n      V[i] -= st * eps * (nx / nl) * CU[i];\n    }\n  // Carry the water along itself.\n  U0.set(U);\n  V0.set(V);\n  L0.set(L);\n  const fade = exp(-st / 2.4);\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const px = x - st * U0[i], py = y - st * V0[i];\n      U[i] = samp(U0, px, py) * 0.995;\n      V[i] = samp(V0, px, py) * 0.995;\n      L[i] = samp(L0, px, py) * fade;\n    }\n  // Walls all round: the sides of the bath, its floor below the panel and the\n  // surface above.\n  for (let y = 0; y \u003c GH; y++) {\n    U[y * GW] = U[y * GW + GW - 1] = 0;\n  }\n  for (let x = 0; x \u003c GW; x++) {\n    V[x] = V[(GH - 1) * GW + x] = 0;\n  }\n  // Make it incompressible: what rises in the middle comes down at the sides.\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const ur = x \u003c GW - 1 ? U[i + 1] : 0, ul = x > 0 ? U[i - 1] : 0, vd = y \u003c GH - 1 ? V[i + GW] : 0, vu = y > 0 ? V[i - GW] : 0;\n      DV[i] = 0.5 * (ur - ul + vd - vu);\n    }\n  for (let it = 0; it \u003c 24; it++)\n    for (let y = 0, i = 0; y \u003c GH; y++)\n      for (let x = 0; x \u003c GW; x++, i++) {\n        const p = P[i];\n        const s = (x > 0 ? P[i - 1] : p) + (x \u003c GW - 1 ? P[i + 1] : p) + (y > 0 ? P[i - GW] : p) + (y \u003c GH - 1 ? P[i + GW] : p);\n        P[i] = p + 1.6 * ((s - DV[i]) / 4 - p);\n      }\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const p = P[i];\n      U[i] -= 0.5 * ((x \u003c GW - 1 ? P[i + 1] : p) - (x > 0 ? P[i - 1] : p));\n      V[i] -= 0.5 * ((y \u003c GH - 1 ? P[i + GW] : p) - (y > 0 ? P[i - GW] : p));\n    }\n}\n\nfunction pigment(S, st) {\n  const U = S.U, V = S.V, TA = S.TA, mix = S.mix, PI0 = S.PI0, PF = S.PF;\n  // The pigment is carried by the water, read at each LED's own place so it\n  // stays half a cell finer than the water. The trace back is worked out once\n  // for all three pigments.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const gx = (x + 0.5) / 2 - 0.5, gy = (y + 0.5) / 2 - 0.5;\n      const px = cl(x - 2 * st * samp(U, gx, gy), 0, W - 1.001), py = cl(y - 2 * st * samp(V, gx, gy), 0, H - 1.001);\n      const ix = floor(px), iy = floor(py);\n      PI0[i] = iy * W + ix;\n      PF[2 * i] = px - ix;\n      PF[2 * i + 1] = py - iy;\n    }\n  // Then it spreads a little, more the higher Mix, and slowly thins into the bath.\n  const kap = cl(st * (0.6 + 5 * mix), 0, 0.24), fade = exp(-st / 5);\n  for (const A of S.A) {\n    TA.set(A);\n    for (let i = 0; i \u003c N; i++) {\n      const j = PI0[i], fx = PF[2 * i], fy = PF[2 * i + 1];\n      A[i] = (TA[j] * (1 - fx) + TA[j + 1] * fx) * (1 - fy) + (TA[j + W] * (1 - fx) + TA[j + W + 1] * fx) * fy;\n    }\n    TA.set(A);\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const c = TA[i];\n        const l = (x > 0 ? TA[i - 1] : c) + (x \u003c W - 1 ? TA[i + 1] : c) + (y > 0 ? TA[i - W] : c) + (y \u003c H - 1 ? TA[i + W] : c) - 4 * c;\n        A[i] = (c + kap * l) * fade;\n      }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const f = S.fizz;\n  for (const s of S.src) {\n    // Each place wanders along the bottom as the powder tumbles, each at its\n    // own pace, so now and then two pass and their clouds go up together.\n    s.ph += st * s.w;\n    const x = 32 + 22 * sin(s.ph) + 4 * sin(2.7 * s.ph + s.c);\n    s.next -= st;\n    if (s.next \u003c= 0) {\n      s.puff = 0.8 + 0.6 * rnd();\n      s.next = (1.6 - 0.8 * f) * (0.6 + 0.8 * rnd());\n    }\n    s.puff *= exp(-st / 0.3);\n    const k = st * (0.5 + 0.4 * f + 4 * s.puff);\n    puff(S, s, x, k);\n    s.bacc += st * (30 + 110 * f) * (0.5 + s.puff);\n    const nb = floor(s.bacc);\n    s.bacc -= nb;\n    bubbles(S, x, nb, 1.5 + 1.5 * s.puff);\n  }\n  // Bubbles: small ones rise slower and zig-zag more, all ride the water\n  // sideways, and each pulls the water up with it.\n  const U = S.U, V = S.V, FB = S.FB;\n  let k = 0;\n  for (let i = 0; i \u003c S.nb; i++) {\n    let x = S.bx[i], y = S.by[i];\n    const s = S.bs[i], gx = x / 2 - 0.5, gy = y / 2 - 0.5;\n    const ph = (S.bp[i] += st * (7 + 5 * (1 - s)));\n    const rise = (24 + 20 * s) * (0.85 + 0.5 * f);\n    x += st * (1.2 * samp(U, gx, gy) + (2 + 3 * (1 - s)) * cos(ph));\n    y += st * (2 * samp(V, gx, gy) * 0.6 - rise);\n    if (y \u003c -1 || x \u003c -1 || x > W + 1) continue;\n    const ci = cl(floor(y / 2), 0, GH - 1) * GW + cl(floor(x / 2), 0, GW - 1);\n    FB[ci] += 0.5 + 0.5 * s;\n    S.bx[k] = x;\n    S.by[k] = y;\n    S.bs[k] = s;\n    S.bp[k] = S.bp[i];\n    k++;\n  }\n  S.nb = k;\n  fluid(S, st);\n  pigment(S, st);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.fizz = cl(kv[2] || 0, 0, 1);\n  S.mix = cl(kv[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the water already clouding: six and a half seconds of fizz,\n    // in coarse steps.\n    for (let i = 0; i \u003c 80; i++) step(S, 1 / 12);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, mix = S.mix, A0 = S.A[0], A1 = S.A[1], A2 = S.A[2], T = S.T;\n  // Palette: three pigments spread round the wheel from the hue, and deep\n  // water. A pigment from orange to lime is paled and its cloud thickens\n  // faster, because those hues at half brightness read brown and olive.\n  const h0 = S.hue + 0.92, key = h0 + 3 * mix;\n  if (S.key !== key) {\n    const hs = [h0, h0 - 0.17, h0 - 0.42];\n    for (let c = 0; c \u003c 3; c++) {\n      const hf = hs[c] - floor(hs[c]), wm = sm((hf - 0.02) / 0.05) * (1 - sm((hf - 0.24) / 0.06));\n      hsv(hs[c], 0.95 - 0.45 * wm, 1, col, c * 3);\n      col[9 + c] = 4.5 * (1 + wm);\n      col[16 + c] = wm;\n    }\n    // Deep water opposite the pigments; where that lands on orange or gold it\n    // would be brown, so there the water turns deep indigo.\n    const hw = h0 - 0.32, hf = hw - floor(hw), wm = sm((hf + 0.02) / 0.06) * (1 - sm((hf - 0.27) / 0.08));\n    hsv(hw, 0.8, 1, col, 12);\n    for (let c = 0; c \u003c 3; c++) col[12 + c] += (INDIGO[c] - col[12 + c]) * wm;\n    S.key = key;\n  }\n  // Bubbles: splatted, then a 3x3 blur so each is a soft bump two or three\n  // LEDs across rather than a hard dot.\n  const BB = S.BB, BT = S.BT;\n  BB.fill(0);\n  for (let i = 0; i \u003c S.nb; i++) {\n    const x = S.bx[i] - 0.5, y = S.by[i] - 0.5, ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, w = 0.7 + 0.5 * S.bs[i];\n    if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) continue;\n    const p = iy * W + ix;\n    BB[p] += w * (1 - fx) * (1 - fy);\n    BB[p + 1] += w * fx * (1 - fy);\n    BB[p + W] += w * (1 - fx) * fy;\n    BB[p + W + 1] += w * fx * fy;\n  }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BT[i] = (x > 0 ? BB[i - 1] : 0) + 2 * BB[i] + (x \u003c W - 1 ? BB[i + 1] : 0);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BB[i] = ((y > 0 ? BT[i - W] : 0) + 2 * BT[i] + (y \u003c H - 1 ? BT[i + W] : 0)) / 16;\n  // How sharply the strongest pigment takes a LED: at Mix 0 it takes it up to\n  // a narrow seam, at 1 the pigments add.\n  const pe = 1 + 7 * (1 - mix) * (1 - mix), PW = S.PW;\n  if (S.pe !== pe) {\n    for (let j = 0; j \u003c 256; j++) PW[j] = pow((j + 0.5) / 255, pe);\n    PW[255] = 1;\n    S.pe = pe;\n  }\n  const DD = S.DD;\n  for (let i = 0; i \u003c N; i++) DD[i] = A0[i] + A1[i] + A2[i];\n  // Slow shafts of light slant down through the water from the surface:\n  // sin(a(x) + 0.08 y), split so each row and column is worked out once.\n  const RS = S.RS, RC = S.RC;\n  for (let x = 0; x \u003c W; x++) {\n    const a = 0.16 * x + 0.5 * T + 1.2 * sin(0.05 * x - 0.3 * T);\n    RS[x] = sin(a);\n    RC[x] = cos(a);\n  }\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    // The water: light from the surface, falling off towards the floor.\n    const wl = 0.1 + 0.08 * exp(-y / 40), wr = 0.25 * wl * exp(-y / 70), sy = sin(0.08 * y), cy = cos(0.08 * y);\n    for (let x = 0; x \u003c W; x++, i++) {\n      const a0 = A0[i], a1 = A1[i], a2 = A2[i], D = DD[i];\n      const lw = wl + wr * (1 + RS[x] * cy + RC[x] * sy);\n      let r = col[12] * lw, g = col[13] * lw, b = col[14] * lw;\n      if (D > 0.002) {\n        // Each pigment's weight is its share of the strongest, to the power pe.\n        const am = a0 > a1 ? (a0 > a2 ? a0 : a2) : a1 > a2 ? a1 : a2, iv = 1 / am;\n        const q0 = a0 * iv, q1 = a1 * iv, q2 = a2 * iv;\n        const w0 = PW[(q0 * 255) | 0], w1 = PW[(q1 * 255) | 0], w2 = PW[(q2 * 255) | 0];\n        const ws = w0 + w1 + w2;\n        let cr = (w0 * col[0] + w1 * col[3] + w2 * col[6]) / ws, cg = (w0 * col[1] + w1 * col[4] + w2 * col[7]) / ws, cb = (w0 * col[2] + w1 * col[5] + w2 * col[8]) / ws;\n        // Opacity goes with the cube of the pigment, e^3 / (e^3 + 1): half at\n        // e = 1, nine tenths at e = 2 and nearly clear below a half, so old\n        // colour thins away and fresh clouds stand out on the water.\n        const e = a0 * col[9] + a1 * col[10] + a2 * col[11], e3 = e * e * e, op = e3 / (e3 + 1);\n        // A thinning cloud of orange, gold or lime would dim through brown and\n        // olive, so as it thins it pales towards a grey haze instead.\n        const wp = ((w0 * col[16] + w1 * col[17] + w2 * col[18]) / ws) * (1 - op * op);\n        cr += (0.8 - cr) * wp;\n        cg += (0.8 - cg) * wp;\n        cb += (0.8 - cb) * wp;\n        // Light from above catches the top of each billow and the cloud is\n        // brighter where it is thick.\n        const up = y > 1 ? D - DD[i - 2 * W] : 0;\n        const lv = cl(0.76 + 0.25 * (1 - exp(-2 * D)) + 0.35 * up, 0.5, 1);\n        r += (cr * lv - r) * op;\n        g += (cg * lv - g) * op;\n        b += (cb * lv - b) * op;\n      }\n      const bb = min(0.55, BB[i]);\n      r += bb * (1 - 0.4 * r);\n      g += bb * (1 - 0.4 * g);\n      b += bb * (1 - 0.4 * b);\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower."},{"name":"Fizz","min":0,"max":1,"about":"How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s."},{"name":"Mix","min":0,"max":1,"about":"How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac."}],"start":[0,2,0,0.06],"measures":{"motion":0.7842,"detail":0.0381,"edges":0.0956,"complexity":2.4963,"coverage":1,"colour":0.5925,"drift":0.2882},"knobResponse":[0.3666,0.2615,0.3734,0.0989]},{"slug":"bauhaus","title":"Bauhaus","family":"geometry","round":1,"note":"바우하우스 포스터처럼 납작한 원반과 막대가 2×4 칸에 놓이고, 한 칸씩 천천히 다른 모양이나 색으로 바뀌어요.","idea":"A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.","buttons":"K1 tap deals the whole sheet again, a diagonal of cells at a time.","code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-bauhaus","type":"code","name":"bauhaus","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the red, yellow and blue together around the wheel; the cream stays cream."},{"name":"Pace","min":0.25,"max":6,"about":"How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once."},{"name":"Grid","min":4,"max":12,"about":"Cells down the long side, from four big squares to twelve small ones."},{"name":"Line","min":0,"max":1,"about":"How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing."}],"start":[0,2,4,0.06],"measures":{"motion":0.0436,"detail":0.04,"edges":0.8787,"complexity":0.0601,"coverage":0.5555,"colour":0.5847,"drift":0.0591},"knobResponse":[0.3486,0.141,0.3458,0.2172]},{"slug":"bernoulli-convolutions","title":"Bernoulli Convolutions","family":"fractal","round":38,"note":"128줄 하나하나가 λ 하나에 대한 ±1 ±λ ±λ² … 의 분포예요. 위의 칸토어 먼지에서 아래의 매끈한 종까지 항이 하나 더해질 때마다 모든 점이 둘로 쪼개지고, λ 가 피소 수의 역수인 열네 줄에서는 합이 같은 점에 거듭 내려앉아 흰 금빛으로 타요. K3 은 동전을 한쪽으로 기울여 종을 오른쪽 벽으로 밀고, K1 을 누르면 항을 다 걷었다가 첫 항부터 다시 쌓아요.","idea":"Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.","buttons":"K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.","code":"// ===== Patternflow pattern =====\n// Title:   Bernoulli Convolutions\n// Family:  fractal\n// Idea:    Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bernoulli convolutions (Børge Jessen and Aurel Wintner, 1935; Paul Erdős, 1939; Boris Solomyak, 1995), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1\n//\n// Knob 1: Hue. Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive.\n// Knob 2: Speed. At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed.\n// Knob 3: Bias. The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95.\n// Knob 4: Zoom. The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart.\n// Buttons: K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.\n\nconst W = 64, H = 128, M = 512, F = M / W;\n// Terms: the cycle falls to NLO and climbs to NHI; stages 0..NHI are kept.\nconst NLO = 6, NHI = 13;\n// Seconds at Speed 2: hold at NHI, per term falling, rest at NLO, per term\n// climbing. The first hold, the picture the pattern opens on, lasts OPEN\n// seconds at any speed.\nconst HOLD = 2.5, TF = 0.33, REST = 0.6, TC = 1.0, OPEN = 1.2;\n// Opening hue: violet and azure, not red.\nconst H0 = 0.62;\n// Pisot numbers in (1, 2), each the largest root of its polynomial (highest\n// power first). Their reciprocals are the lambdas where Erdos (1939) showed\n// the measure singular: the sums land on each other again and again.\nconst PISOT = [\n  [1, 0, -1, -1], // 1.3247, the plastic number\n  [1, -1, 0, 0, -1], // 1.3803\n  [1, -1, -1, 1, 0, -1], // 1.4433\n  [1, -1, 0, -1], // 1.4656\n  [1, -1, -1, 0, 1, 0, -1], // 1.5016\n  [1, 0, -1, -1, -1, -1], // 1.5342\n  [1, -1, -1, 0, 0, 1, 0, -1], // 1.5452\n  [1, -1, 0, -1, 0, -1], // 1.5701\n  [1, -1, -1], // 1.6180, the golden ratio\n  [1, -1, -1, 0, 0, -1], // 1.7049\n  [1, -2, 1, -1], // 1.7549\n  [1, -1, -1, -1], // 1.8393, the tribonacci constant\n  [1, -2, 0, 1, -1], // 1.8668\n  [1, -1, -1, -1, -1], // 1.9276\n];\nconst { floor, min, abs, exp, log2, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = [v, q, p, p, t, v][i];\n  out[o + 1] = [t, v, v, q, p, p][i];\n  out[o + 2] = [p, p, t, v, v, q][i];\n}\n\n// Newton from 2 down to the largest real root.\nfunction rootOf(c) {\n  let x = 2;\n  for (let it = 0; it \u003c 60; it++) {\n    let f = 0, d = 0;\n    for (let k = 0; k \u003c c.length; k++) {\n      d = d * x + f;\n      f = f * x + c[k];\n    }\n    x -= f / d;\n  }\n  return x;\n}\nconst LAMP = PISOT.map((c) => 1 / rootOf(c));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0.5, zoom: 0.06, built: false, bBias: -1, bZoom: -1, since: 0,\n    lam: new Float64Array(H), pis: new Int8Array(H).fill(-1),\n    h: new Float64Array(M), h2: new Float64Array(M + 1),\n    // Per stage, row and column: the mass of the row in the column, and\n    // the log2 of how many sign choices share a point there on average.\n    I: new Float32Array((NHI + 1) * H * W), G: new Float32Array((NHI + 1) * H * W),\n    phase: 0, pt: 0, lo: NLO, x: NHI, open: OPEN,\n    lut: new Float32Array(256 * 3), row: new Float32Array(W), gold: [1, 0.86, 0.56],\n  };\n}\n\n// The lambdas of the rows, the nearest row to each Pisot reciprocal moved\n// onto it exactly. Every other row's lambda is a binary fraction, and for\n// those no two sign choices ever give the same sum: the highest power that\n// differs leaves an odd numerator no lower power can cancel.\nfunction rows(S) {\n  const lo = 0.3 + 0.26 * S.zoom, hi = 0.9 - 0.12 * S.zoom, dl = (hi - lo) / (H - 1);\n  S.lo0 = lo;\n  S.hi0 = hi;\n  S.pis.fill(-1);\n  for (let r = 0; r \u003c H; r++) S.lam[r] = lo + dl * r;\n  LAMP.forEach((l, k) => {\n    const r = round((l - lo) / dl);\n    if (r >= 0 && r \u003c H && abs(S.lam[r] - l) \u003c= dl / 2 + 1e-12) {\n      S.lam[r] = l;\n      S.pis[r] = k;\n    }\n  });\n}\n\n// Every stage of every row. The fine histogram (M bins over the row's\n// range, u = x (1 - lambda) in [-1, 1]) starts as a point at 0 and is\n// pushed through nu -> p S+ nu + (1 - p) S- nu, S+- u = lambda u +- (1 - lambda),\n// once per term. On a Pisot row the sums are also kept exactly, as sorted\n// points with their mass, and points closer than 1e-9 are one point.\nfunction build(S) {\n  rows(S);\n  const p = S.bias, q = 1 - p, { h, h2, I, G } = S, c0 = M / 2 - 0.5;\n  G.fill(0);\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], sh = (1 - lam) * (M / 2);\n    h.fill(0);\n    h[M / 2 - 1] = 0.5;\n    h[M / 2] = 0.5;\n    for (let n = 0; n \u003c= NHI; n++) {\n      const o = (n * H + r) * W;\n      for (let c = 0; c \u003c W; c++) {\n        let m = 0;\n        for (let i = c * F; i \u003c c * F + F; i++) m += h[i];\n        I[o + c] = m;\n      }\n      if (n === NHI) break;\n      h2.fill(0);\n      for (let i = 0; i \u003c M; i++) {\n        const v = h[i];\n        if (v === 0) continue;\n        const base = c0 + lam * (i - c0);\n        for (let sgn = 0; sgn \u003c 2; sgn++) {\n          const f = base + (sgn ? sh : -sh), w = v * (sgn ? p : q), j = floor(f), fr = f - j;\n          if (j >= 0 && j \u003c M) h2[j] += w * (1 - fr);\n          if (j + 1 >= 0 && j + 1 \u003c M) h2[j + 1] += w * fr;\n        }\n      }\n      for (let i = 0; i \u003c M; i++) h[i] = h2[i];\n    }\n    if (S.pis[r] >= 0) exact(S, r, p);\n  }\n  S.built = true;\n  S.bBias = S.bias;\n  S.bZoom = S.zoom;\n  S.since = 0;\n}\n\n// The exact sums on a Pisot row, term by term in the order they shrink:\n// each point x splits into x + lambda^n (mass p) and x - lambda^n (mass 1 - p).\n// m is a point's mass; w the sum of its sign choices' squared masses, so\n// m^2 / w is how many choices it holds, weighted, and 1 when it holds one.\nfunction exact(S, r, p) {\n  const lam = S.lam[r], q = 1 - p, G = S.G, k1 = 1 - lam;\n  let X = new Float64Array([0]), Mm = new Float64Array([1]), Q = new Float64Array([1]);\n  const sm2 = new Float64Array(W), sq = new Float64Array(W);\n  for (let n = 1; n \u003c= NHI; n++) {\n    const a = lam ** (n - 1), L = X.length;\n    const X2 = new Float64Array(2 * L), M2 = new Float64Array(2 * L), Q2 = new Float64Array(2 * L);\n    let i = 0, j = 0, k = -1;\n    while (i \u003c L || j \u003c L) {\n      // Merge the two shifted copies, both already sorted.\n      let x, m, w;\n      if (j >= L || (i \u003c L && X[i] - a \u003c= X[j] + a)) {\n        x = X[i] - a;\n        m = Mm[i] * q;\n        w = Q[i] * q * q;\n        i++;\n      } else {\n        x = X[j] + a;\n        m = Mm[j] * p;\n        w = Q[j] * p * p;\n        j++;\n      }\n      if (k >= 0 && x - X2[k] \u003c 1e-9) {\n        M2[k] += m;\n        Q2[k] += w;\n      } else {\n        k++;\n        X2[k] = x;\n        M2[k] = m;\n        Q2[k] = w;\n      }\n    }\n    X = X2.subarray(0, k + 1);\n    Mm = M2.subarray(0, k + 1);\n    Q = Q2.subarray(0, k + 1);\n    sm2.fill(0);\n    sq.fill(0);\n    for (let t = 0; t \u003c= k; t++) {\n      const c = cl(floor((X[t] * k1 + 1) * (W / 2)), 0, W - 1);\n      sm2[c] += Mm[t] * Mm[t];\n      sq[c] += Q[t];\n    }\n    const o = (n * H + r) * W;\n    for (let c = 0; c \u003c W; c++) G[o + c] = sq[c] > 0 ? log2(sm2[c] / sq[c]) : 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], 0.5, 0.95);\n  S.zoom = cl(k[3], 0, 1);\n  S.since += d;\n  // Rebuilding takes a few milliseconds: at most ten times a second while a knob turns.\n  if (!S.built || ((abs(S.bias - S.bBias) > 1e-4 || abs(S.zoom - S.bZoom) > 1e-4) && S.since > 0.1)) build(S);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lo = 0;\n    if (S.phase !== 1) {\n      S.phase = 1;\n      S.pt = (NHI - S.x) * TF;\n    }\n  }\n  // The term count x runs hold, fall, rest, climb.\n  if (S.open > 0) {\n    // The opening hold, in plain seconds; it ends straight into the fall.\n    S.open -= d;\n    if (S.open \u003c= 0) S.pt = HOLD;\n  } else S.pt += (d * S.speed) / 2;\n  const span = NHI - S.lo;\n  if (S.phase === 0 && S.pt >= HOLD) {\n    S.phase = 1;\n    S.pt -= HOLD;\n  }\n  if (S.phase === 1 && S.pt >= span * TF) {\n    S.phase = 2;\n    S.pt -= span * TF;\n  }\n  if (S.phase === 2 && S.pt >= REST) {\n    S.phase = 3;\n    S.pt -= REST;\n  }\n  if (S.phase === 3 && S.pt >= span * TC) {\n    S.phase = 0;\n    S.pt -= span * TC;\n    S.lo = NLO;\n  }\n  if (S.phase === 0) S.x = NHI;\n  else if (S.phase === 1) {\n    const u = S.pt / TF, j = floor(u);\n    S.x = NHI - j - sm(0, 1, u - j);\n  } else if (S.phase === 2) S.x = S.lo;\n  else {\n    const u = S.pt / TC, j = floor(u);\n    S.x = S.lo + j + sm(0, 0.65, u - j);\n  }\n  S.x = cl(S.x, 0, NHI);\n}\n\n// Density levels: violet where a row is thin, azure where it is thick. A\n// hue that comes round to orange or yellow is paled and lifted, so thin\n// parts read peach or butter and not brown or olive.\nfunction palette(S) {\n  const lut = S.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const L = i / 255, h = S.hue + H0 + 0.16 * (1 - L) - 0.06, hh = h - floor(h);\n    const warm = cl(1 - abs(hh - 0.13) / 0.13, 0, 1);\n    hsv(h, 0.9 - 0.45 * L - 0.3 * warm, min(1, 0.92 * L ** (0.7 - 0.2 * warm) * (1 + 0.35 * warm)), lut, i * 3);\n  }\n  // The seams: white-gold, nearly white where the rows themselves are warm.\n  const hh = S.hue + H0 - 0.06 - floor(S.hue + H0 - 0.06), warm = cl(1 - abs(hh - 0.13) / 0.2, 0, 1);\n  S.gold[0] = 1;\n  S.gold[1] = 0.86 + 0.12 * warm;\n  S.gold[2] = 0.56 + 0.36 * warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.built) return;\n  palette(S);\n  const { I, G, lut, row } = S, p = S.bias, q = 1 - p;\n  const n = min(NHI - 1, floor(S.x)), s = S.x - n;\n  // The new term splits every point by +- (1 - lambda) lambda^n of the range,\n  // and in the last third of the split the exact next stage takes over.\n  const wNext = sm(0.55, 1, s);\n  const gold = S.gold;\n  // The entropy bound p^p (1 - p)^(1 - p), as a row.\n  const lstar = p ** p * q ** q, rstar = round(((lstar - S.lo0) / (S.hi0 - S.lo0)) * (H - 1));\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], dsh = s * (1 - lam) * lam ** n * (W / 2);\n    const o0 = (n * H + r) * W, o1 = o0 + H * W;\n    for (let c = 0; c \u003c W; c++) {\n      // p of the row moved right by dsh, 1 - p moved left.\n      const a = c - dsh, b = c + dsh, ia = floor(a), ib = floor(b), fa = a - ia, fb = b - ib;\n      const va = (ia >= 0 && ia \u003c W ? I[o0 + ia] * (1 - fa) : 0) + (ia + 1 >= 0 && ia + 1 \u003c W ? I[o0 + ia + 1] * fa : 0);\n      const vb = (ib >= 0 && ib \u003c W ? I[o0 + ib] * (1 - fb) : 0) + (ib + 1 >= 0 && ib + 1 \u003c W ? I[o0 + ib + 1] * fb : 0);\n      row[c] = (p * va + q * vb) * (1 - wNext) + I[o1 + c] * wNext;\n    }\n    const seam = S.pis[r] >= 0;\n    for (let c = 0; c \u003c W; c++) {\n      // 64 times the mass is 1 where the row is flat; 1 - e^(-rho / 1.2)\n      // keeps thin rows readable and the dust and the bells from burning out.\n      const L = 1 - exp((-W * row[c]) / 1.2), li = round(L * 255) * 3;\n      let R = lut[li], Gc = lut[li + 1], B = lut[li + 2];\n      if (seam) {\n        const g = G[o0 + c] * (1 - s) + G[o1 + c] * s, k = sm(0.2, 5.5, g) * (0.35 + 0.65 * sm(0, 0.5, L));\n        R += (gold[0] - R) * k;\n        Gc += (gold[1] - Gc) * k;\n        B += (gold[2] - B) * k;\n      }\n      if (r === rstar && (c \u003c 2 || c > W - 3)) R = Gc = B = 0.85;\n      display.setPixel(c, r, round(255 * min(1, R)), round(255 * min(1, Gc)), round(255 * min(1, B)));\n    }\n  }\n}\n","layer":{"id":"layer-bernoulli-convolutions","type":"code","name":"bernoulli-convolutions","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bernoulli Convolutions\n// Family:  fractal\n// Idea:    Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bernoulli convolutions (Børge Jessen and Aurel Wintner, 1935; Paul Erdős, 1939; Boris Solomyak, 1995), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1\n//\n// Knob 1: Hue. Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive.\n// Knob 2: Speed. At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed.\n// Knob 3: Bias. The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95.\n// Knob 4: Zoom. The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart.\n// Buttons: K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.\n\nconst W = 64, H = 128, M = 512, F = M / W;\n// Terms: the cycle falls to NLO and climbs to NHI; stages 0..NHI are kept.\nconst NLO = 6, NHI = 13;\n// Seconds at Speed 2: hold at NHI, per term falling, rest at NLO, per term\n// climbing. The first hold, the picture the pattern opens on, lasts OPEN\n// seconds at any speed.\nconst HOLD = 2.5, TF = 0.33, REST = 0.6, TC = 1.0, OPEN = 1.2;\n// Opening hue: violet and azure, not red.\nconst H0 = 0.62;\n// Pisot numbers in (1, 2), each the largest root of its polynomial (highest\n// power first). Their reciprocals are the lambdas where Erdos (1939) showed\n// the measure singular: the sums land on each other again and again.\nconst PISOT = [\n  [1, 0, -1, -1], // 1.3247, the plastic number\n  [1, -1, 0, 0, -1], // 1.3803\n  [1, -1, -1, 1, 0, -1], // 1.4433\n  [1, -1, 0, -1], // 1.4656\n  [1, -1, -1, 0, 1, 0, -1], // 1.5016\n  [1, 0, -1, -1, -1, -1], // 1.5342\n  [1, -1, -1, 0, 0, 1, 0, -1], // 1.5452\n  [1, -1, 0, -1, 0, -1], // 1.5701\n  [1, -1, -1], // 1.6180, the golden ratio\n  [1, -1, -1, 0, 0, -1], // 1.7049\n  [1, -2, 1, -1], // 1.7549\n  [1, -1, -1, -1], // 1.8393, the tribonacci constant\n  [1, -2, 0, 1, -1], // 1.8668\n  [1, -1, -1, -1, -1], // 1.9276\n];\nconst { floor, min, abs, exp, log2, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = [v, q, p, p, t, v][i];\n  out[o + 1] = [t, v, v, q, p, p][i];\n  out[o + 2] = [p, p, t, v, v, q][i];\n}\n\n// Newton from 2 down to the largest real root.\nfunction rootOf(c) {\n  let x = 2;\n  for (let it = 0; it \u003c 60; it++) {\n    let f = 0, d = 0;\n    for (let k = 0; k \u003c c.length; k++) {\n      d = d * x + f;\n      f = f * x + c[k];\n    }\n    x -= f / d;\n  }\n  return x;\n}\nconst LAMP = PISOT.map((c) => 1 / rootOf(c));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0.5, zoom: 0.06, built: false, bBias: -1, bZoom: -1, since: 0,\n    lam: new Float64Array(H), pis: new Int8Array(H).fill(-1),\n    h: new Float64Array(M), h2: new Float64Array(M + 1),\n    // Per stage, row and column: the mass of the row in the column, and\n    // the log2 of how many sign choices share a point there on average.\n    I: new Float32Array((NHI + 1) * H * W), G: new Float32Array((NHI + 1) * H * W),\n    phase: 0, pt: 0, lo: NLO, x: NHI, open: OPEN,\n    lut: new Float32Array(256 * 3), row: new Float32Array(W), gold: [1, 0.86, 0.56],\n  };\n}\n\n// The lambdas of the rows, the nearest row to each Pisot reciprocal moved\n// onto it exactly. Every other row's lambda is a binary fraction, and for\n// those no two sign choices ever give the same sum: the highest power that\n// differs leaves an odd numerator no lower power can cancel.\nfunction rows(S) {\n  const lo = 0.3 + 0.26 * S.zoom, hi = 0.9 - 0.12 * S.zoom, dl = (hi - lo) / (H - 1);\n  S.lo0 = lo;\n  S.hi0 = hi;\n  S.pis.fill(-1);\n  for (let r = 0; r \u003c H; r++) S.lam[r] = lo + dl * r;\n  LAMP.forEach((l, k) => {\n    const r = round((l - lo) / dl);\n    if (r >= 0 && r \u003c H && abs(S.lam[r] - l) \u003c= dl / 2 + 1e-12) {\n      S.lam[r] = l;\n      S.pis[r] = k;\n    }\n  });\n}\n\n// Every stage of every row. The fine histogram (M bins over the row's\n// range, u = x (1 - lambda) in [-1, 1]) starts as a point at 0 and is\n// pushed through nu -> p S+ nu + (1 - p) S- nu, S+- u = lambda u +- (1 - lambda),\n// once per term. On a Pisot row the sums are also kept exactly, as sorted\n// points with their mass, and points closer than 1e-9 are one point.\nfunction build(S) {\n  rows(S);\n  const p = S.bias, q = 1 - p, { h, h2, I, G } = S, c0 = M / 2 - 0.5;\n  G.fill(0);\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], sh = (1 - lam) * (M / 2);\n    h.fill(0);\n    h[M / 2 - 1] = 0.5;\n    h[M / 2] = 0.5;\n    for (let n = 0; n \u003c= NHI; n++) {\n      const o = (n * H + r) * W;\n      for (let c = 0; c \u003c W; c++) {\n        let m = 0;\n        for (let i = c * F; i \u003c c * F + F; i++) m += h[i];\n        I[o + c] = m;\n      }\n      if (n === NHI) break;\n      h2.fill(0);\n      for (let i = 0; i \u003c M; i++) {\n        const v = h[i];\n        if (v === 0) continue;\n        const base = c0 + lam * (i - c0);\n        for (let sgn = 0; sgn \u003c 2; sgn++) {\n          const f = base + (sgn ? sh : -sh), w = v * (sgn ? p : q), j = floor(f), fr = f - j;\n          if (j >= 0 && j \u003c M) h2[j] += w * (1 - fr);\n          if (j + 1 >= 0 && j + 1 \u003c M) h2[j + 1] += w * fr;\n        }\n      }\n      for (let i = 0; i \u003c M; i++) h[i] = h2[i];\n    }\n    if (S.pis[r] >= 0) exact(S, r, p);\n  }\n  S.built = true;\n  S.bBias = S.bias;\n  S.bZoom = S.zoom;\n  S.since = 0;\n}\n\n// The exact sums on a Pisot row, term by term in the order they shrink:\n// each point x splits into x + lambda^n (mass p) and x - lambda^n (mass 1 - p).\n// m is a point's mass; w the sum of its sign choices' squared masses, so\n// m^2 / w is how many choices it holds, weighted, and 1 when it holds one.\nfunction exact(S, r, p) {\n  const lam = S.lam[r], q = 1 - p, G = S.G, k1 = 1 - lam;\n  let X = new Float64Array([0]), Mm = new Float64Array([1]), Q = new Float64Array([1]);\n  const sm2 = new Float64Array(W), sq = new Float64Array(W);\n  for (let n = 1; n \u003c= NHI; n++) {\n    const a = lam ** (n - 1), L = X.length;\n    const X2 = new Float64Array(2 * L), M2 = new Float64Array(2 * L), Q2 = new Float64Array(2 * L);\n    let i = 0, j = 0, k = -1;\n    while (i \u003c L || j \u003c L) {\n      // Merge the two shifted copies, both already sorted.\n      let x, m, w;\n      if (j >= L || (i \u003c L && X[i] - a \u003c= X[j] + a)) {\n        x = X[i] - a;\n        m = Mm[i] * q;\n        w = Q[i] * q * q;\n        i++;\n      } else {\n        x = X[j] + a;\n        m = Mm[j] * p;\n        w = Q[j] * p * p;\n        j++;\n      }\n      if (k >= 0 && x - X2[k] \u003c 1e-9) {\n        M2[k] += m;\n        Q2[k] += w;\n      } else {\n        k++;\n        X2[k] = x;\n        M2[k] = m;\n        Q2[k] = w;\n      }\n    }\n    X = X2.subarray(0, k + 1);\n    Mm = M2.subarray(0, k + 1);\n    Q = Q2.subarray(0, k + 1);\n    sm2.fill(0);\n    sq.fill(0);\n    for (let t = 0; t \u003c= k; t++) {\n      const c = cl(floor((X[t] * k1 + 1) * (W / 2)), 0, W - 1);\n      sm2[c] += Mm[t] * Mm[t];\n      sq[c] += Q[t];\n    }\n    const o = (n * H + r) * W;\n    for (let c = 0; c \u003c W; c++) G[o + c] = sq[c] > 0 ? log2(sm2[c] / sq[c]) : 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], 0.5, 0.95);\n  S.zoom = cl(k[3], 0, 1);\n  S.since += d;\n  // Rebuilding takes a few milliseconds: at most ten times a second while a knob turns.\n  if (!S.built || ((abs(S.bias - S.bBias) > 1e-4 || abs(S.zoom - S.bZoom) > 1e-4) && S.since > 0.1)) build(S);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lo = 0;\n    if (S.phase !== 1) {\n      S.phase = 1;\n      S.pt = (NHI - S.x) * TF;\n    }\n  }\n  // The term count x runs hold, fall, rest, climb.\n  if (S.open > 0) {\n    // The opening hold, in plain seconds; it ends straight into the fall.\n    S.open -= d;\n    if (S.open \u003c= 0) S.pt = HOLD;\n  } else S.pt += (d * S.speed) / 2;\n  const span = NHI - S.lo;\n  if (S.phase === 0 && S.pt >= HOLD) {\n    S.phase = 1;\n    S.pt -= HOLD;\n  }\n  if (S.phase === 1 && S.pt >= span * TF) {\n    S.phase = 2;\n    S.pt -= span * TF;\n  }\n  if (S.phase === 2 && S.pt >= REST) {\n    S.phase = 3;\n    S.pt -= REST;\n  }\n  if (S.phase === 3 && S.pt >= span * TC) {\n    S.phase = 0;\n    S.pt -= span * TC;\n    S.lo = NLO;\n  }\n  if (S.phase === 0) S.x = NHI;\n  else if (S.phase === 1) {\n    const u = S.pt / TF, j = floor(u);\n    S.x = NHI - j - sm(0, 1, u - j);\n  } else if (S.phase === 2) S.x = S.lo;\n  else {\n    const u = S.pt / TC, j = floor(u);\n    S.x = S.lo + j + sm(0, 0.65, u - j);\n  }\n  S.x = cl(S.x, 0, NHI);\n}\n\n// Density levels: violet where a row is thin, azure where it is thick. A\n// hue that comes round to orange or yellow is paled and lifted, so thin\n// parts read peach or butter and not brown or olive.\nfunction palette(S) {\n  const lut = S.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const L = i / 255, h = S.hue + H0 + 0.16 * (1 - L) - 0.06, hh = h - floor(h);\n    const warm = cl(1 - abs(hh - 0.13) / 0.13, 0, 1);\n    hsv(h, 0.9 - 0.45 * L - 0.3 * warm, min(1, 0.92 * L ** (0.7 - 0.2 * warm) * (1 + 0.35 * warm)), lut, i * 3);\n  }\n  // The seams: white-gold, nearly white where the rows themselves are warm.\n  const hh = S.hue + H0 - 0.06 - floor(S.hue + H0 - 0.06), warm = cl(1 - abs(hh - 0.13) / 0.2, 0, 1);\n  S.gold[0] = 1;\n  S.gold[1] = 0.86 + 0.12 * warm;\n  S.gold[2] = 0.56 + 0.36 * warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.built) return;\n  palette(S);\n  const { I, G, lut, row } = S, p = S.bias, q = 1 - p;\n  const n = min(NHI - 1, floor(S.x)), s = S.x - n;\n  // The new term splits every point by +- (1 - lambda) lambda^n of the range,\n  // and in the last third of the split the exact next stage takes over.\n  const wNext = sm(0.55, 1, s);\n  const gold = S.gold;\n  // The entropy bound p^p (1 - p)^(1 - p), as a row.\n  const lstar = p ** p * q ** q, rstar = round(((lstar - S.lo0) / (S.hi0 - S.lo0)) * (H - 1));\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], dsh = s * (1 - lam) * lam ** n * (W / 2);\n    const o0 = (n * H + r) * W, o1 = o0 + H * W;\n    for (let c = 0; c \u003c W; c++) {\n      // p of the row moved right by dsh, 1 - p moved left.\n      const a = c - dsh, b = c + dsh, ia = floor(a), ib = floor(b), fa = a - ia, fb = b - ib;\n      const va = (ia >= 0 && ia \u003c W ? I[o0 + ia] * (1 - fa) : 0) + (ia + 1 >= 0 && ia + 1 \u003c W ? I[o0 + ia + 1] * fa : 0);\n      const vb = (ib >= 0 && ib \u003c W ? I[o0 + ib] * (1 - fb) : 0) + (ib + 1 >= 0 && ib + 1 \u003c W ? I[o0 + ib + 1] * fb : 0);\n      row[c] = (p * va + q * vb) * (1 - wNext) + I[o1 + c] * wNext;\n    }\n    const seam = S.pis[r] >= 0;\n    for (let c = 0; c \u003c W; c++) {\n      // 64 times the mass is 1 where the row is flat; 1 - e^(-rho / 1.2)\n      // keeps thin rows readable and the dust and the bells from burning out.\n      const L = 1 - exp((-W * row[c]) / 1.2), li = round(L * 255) * 3;\n      let R = lut[li], Gc = lut[li + 1], B = lut[li + 2];\n      if (seam) {\n        const g = G[o0 + c] * (1 - s) + G[o1 + c] * s, k = sm(0.2, 5.5, g) * (0.35 + 0.65 * sm(0, 0.5, L));\n        R += (gold[0] - R) * k;\n        Gc += (gold[1] - Gc) * k;\n        B += (gold[2] - B) * k;\n      }\n      if (r === rstar && (c \u003c 2 || c > W - 3)) R = Gc = B = 0.85;\n      display.setPixel(c, r, round(255 * min(1, R)), round(255 * min(1, Gc)), round(255 * min(1, B)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed."},{"name":"Bias","min":0.5,"max":0.95,"about":"The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95."},{"name":"Zoom","min":0,"max":1,"about":"The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart."}],"start":[0,2,0.5,0.06],"measures":{"motion":0.1052,"detail":0.0778,"edges":0.2761,"complexity":1.7226,"coverage":0.81,"colour":0.2382,"drift":0.0505},"knobResponse":[0.3122,0.0507,0.314,0.1288]},{"slug":"bertrand-paradox","title":"Bertrand Paradox","family":"data","round":33,"note":"지름 40 LED 의 원 셋이 세 칸에 하나씩 서서, 원마다 다른 뜻의 무작위로 현을 1초에 24개씩 긋고 현은 LED 하나씩 부서져 사라져요. 삼각형 변보다 긴 현은 자홍, 짧은 현은 초록이고, 옆 막대와 숫자가 긴 현의 몫을 세어 위 원은 1/3 로, 가운데는 1/2 로, 아래는 1/4 로 모여요. K3 을 올리면 선이 원마다 다른 밀도의 점묘가 되고, K1 을 누르면 원과 셈을 비우고 처음부터 다시 그어요.","idea":"Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.","buttons":"K1 tap clears the three discs and their counts, and the gauges start again from nothing.","code":"// ===== Patternflow pattern =====\n// Title:   Bertrand Paradox\n// Family:  data\n// Idea:    Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bertrand paradox (Joseph Bertrand, 1889), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1\n//\n// Knob 1: Hue. Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap.\n// Knob 2: Speed. The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep.\n// Knob 3: Chords. How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross.\n// Knob 4: Persist. How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple.\n// Buttons: K1 tap clears the three discs and their counts, and the gauges start again from nothing.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, round, sqrt, sin, cos, abs, exp, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// One disc in each third of the 128 rows, 40 LEDs across, set left, right,\n// left so each has 22 columns beside it for its gauge.\nconst R = 19.5;\nconst DISCS = [\n  { cx: 20.5, cy: 21.5, side: 1, num: 1, den: 3 },\n  { cx: 43.5, cy: 64, side: -1, num: 1, den: 2 },\n  { cx: 20.5, cy: 106.5, side: 1, num: 1, den: 4 },\n];\nconst BAR = 40;\n// The points each method picked for its newest chords, shown white for a\n// quarter of a second: the rim pair, the point on the radius, the midpoint.\nconst SEEDS = 16, SEED_LIFE = 0.25;\n// Chords a second times the fade time at the opening knobs.\nconst OPEN = 24 * 1.1 * 7 ** 0.06;\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = {\n  0: 0b111101101101111, 1: 0b010110010010111, 2: 0b111001111100111, 3: 0b111001111001111,\n  4: 0b101101111001001, 5: 0b111100111001111, 6: 0b111100111101111, 7: 0b111001001001001,\n  8: 0b111101111101111, 9: 0b111101111001111, \"/\": 0b001001010100100, \"-\": 0b000000111000000,\n};\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i].map((c) => c * 255);\n}\n\n// The faint frame: each disc's rim and its inscribed triangle, point up.\n// They sit at 24 of 255, just visible on the panel and still dark to the\n// study's count of lit LEDs, which starts above 24.\nfunction buildFrame() {\n  const f = new Uint8Array(N);\n  for (const d of DISCS) {\n    for (let a = 0; a \u003c 720; a++) {\n      const t = (a / 720) * 2 * PI, x = floor(d.cx + R * cos(t)), y = floor(d.cy + R * sin(t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) f[y * W + x] = 1;\n    }\n    for (let k = 0; k \u003c 3; k++) {\n      const a0 = -PI / 2 + (k * 2 * PI) / 3, a1 = a0 + (2 * PI) / 3;\n      const x0 = d.cx + R * cos(a0), y0 = d.cy + R * sin(a0), x1 = d.cx + R * cos(a1), y1 = d.cy + R * sin(a1);\n      const n = 80;\n      for (let j = 0; j \u003c= n; j++) f[floor(y0 + ((y1 - y0) * j) / n) * W + floor(x0 + ((x1 - x0) * j) / n)] = 2;\n    }\n  }\n  return f;\n}\n\nexport function setup(params) {\n  const thr = new Float32Array(N);\n  // Each LED lets go of a fading chord at its own level, so a chord crumbles\n  // LED by LED instead of dimming, and every lit LED is at full brightness.\n  // Half-lit lines would turn the saturated pair towards grey.\n  for (let i = 0; i \u003c N; i++) thr[i] = 0.1 + 0.9 * Math.random();\n  params.s = {\n    accL: new Float32Array(N), accS: new Float32Array(N), thr, frame: buildFrame(),\n    long: [0, 0, 0], total: [0, 0, 0], carry: 0, hue: 0, clock: 0, scale: 1, cap: 2.5,\n    seeds: new Int32Array(3 * SEEDS).fill(-1), born: new Float32Array(3 * SEEDS), next: [0, 0, 0],\n  };\n}\n\n// A chord of the unit circle by method m, as its two ends and its distance\n// p from the centre. It is longer than the triangle's side, sqrt 3, exactly\n// when p \u003c 1/2, when it cuts the triangle's incircle.\nfunction chord(m) {\n  const rnd = Math.random;\n  if (m === 0) {\n    // Two uniform points on the rim: long with probability 1/3.\n    const a = 2 * PI * rnd(), b = 2 * PI * rnd();\n    return [cos(a), sin(a), cos(b), sin(b), abs(cos((a - b) / 2))];\n  }\n  // A uniform point on a random radius (m = 1, long with probability 1/2)\n  // or a uniform point in the disc (m = 2, 1/4) as the chord's midpoint.\n  const f = 2 * PI * rnd(), p = m === 1 ? rnd() : sqrt(rnd()), h = sqrt(1 - p * p), c = cos(f), s = sin(f);\n  return [p * c - h * s, p * s + h * c, p * c + h * s, p * s - h * c, p];\n}\n\nfunction seed(P, d, x, y) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const j = d * SEEDS + P.next[d];\n  P.next[d] = (P.next[d] + 1) % SEEDS;\n  P.seeds[j] = y * W + x;\n  P.born[j] = P.clock;\n}\n\n// Disc d draws its chords by method d.\nfunction lay(P, d) {\n  const D = DISCS[d], [ax, ay, bx, by, p] = chord(d), isLong = p \u003c 0.5;\n  if (d === 0) {\n    seed(P, d, D.cx + R * ax, D.cy + R * ay);\n    seed(P, d, D.cx + R * bx, D.cy + R * by);\n  } else seed(P, d, D.cx + (R * (ax + bx)) / 2, D.cy + (R * (ay + by)) / 2);\n  const acc = isLong ? P.accL : P.accS;\n  const x0 = D.cx + R * ax, y0 = D.cy + R * ay, dx = R * (bx - ax), dy = R * (by - ay);\n  const n = Math.ceil(max(abs(dx), abs(dy)));\n  let last = -1;\n  for (let j = 0; j \u003c= n; j++) {\n    const x = floor(x0 + (dx * j) / max(1, n)), y = floor(y0 + (dy * j) / max(1, n));\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const i = y * W + x;\n    if (i === last) continue;\n    last = i;\n    acc[i] = min(acc[i] + 1, P.cap);\n  }\n  P.total[d]++;\n  if (isLong) P.long[d]++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const clock = d * (cl(k[1], 0.2, 3) / 2);\n  const rate = 24 * 10 ** cl(k[2], 0, 1), tau = 1.1 * 7 ** cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.accL.fill(0);\n    P.accS.fill(0);\n    P.long = [0, 0, 0];\n    P.total = [0, 0, 0];\n    P.seeds.fill(-1);\n  }\n  P.clock += clock;\n  // With more chords alive than at the opening, the level an LED needs to\n  // light rises with them (to the 0.85th power), so the discs turn from a\n  // few lines into a stipple of each method's own density instead of\n  // filling solid: even in the middle disc, heavy at the rim in the top one,\n  // hollow in the bottom one.\n  P.scale = max(1, (rate * tau) / OPEN) ** 0.85;\n  P.cap = 2.5 * P.scale;\n  const fade = exp(-clock / tau), aL = P.accL, aS = P.accS;\n  for (let i = 0; i \u003c N; i++) {\n    aL[i] *= fade;\n    aS[i] *= fade;\n  }\n  P.carry += rate * clock;\n  const n = floor(P.carry);\n  P.carry -= n;\n  for (let j = 0; j \u003c n; j++) for (let m = 0; m \u003c 3; m++) lay(P, m);\n}\n\nfunction glyph(display, ch, x0, y0, sc, c) {\n  const bits = FONT[ch];\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((bits >> (14 - r * 3 - q)) & 1)\n        for (let u = 0; u \u003c sc; u++) for (let v = 0; v \u003c sc; v++) display.setPixel(x0 + q * sc + u, y0 + r * sc + v, c[0], c[1], c[2]);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  // Magenta for the long chords, green for the short: at full saturation\n  // the pair sits as far apart as two colours can on the panel's red-green\n  // and yellow-blue axes, and neither opens on red.\n  const cL = hsv(P.hue + 5 / 6, 1, 1), cS = hsv(P.hue + 1 / 3, 1, 1);\n  const { accL, accS, thr, frame } = P, sc = P.scale;\n  for (let i = 0; i \u003c N; i++) {\n    const a = accL[i], b = accS[i], t = a + b, x = i % W, y = (i / W) | 0;\n    if (t > thr[i] * sc) {\n      // A lit LED is at full brightness: the fade shows as crumbling.\n      const c = a >= b ? cL : cS;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    } else if (frame[i]) display.setPixel(x, y, 24, 24, 24);\n    else display.setPixel(x, y, 0, 0, 0);\n  }\n  for (let j = 0; j \u003c P.seeds.length; j++) {\n    const i = P.seeds[j];\n    if (i >= 0 && P.clock - P.born[j] \u003c SEED_LIFE) display.setPixel(i % W, (i / W) | 0, 255, 255, 255);\n  }\n  for (let d = 0; d \u003c 3; d++) {\n    const D = DISCS[d], yb = round(D.cy + R) - 1, top = yb - BAR + 1;\n    const bx = D.side > 0 ? 43 : 18, tx = D.side > 0 ? 49 : 1;\n    const tot = P.total[d], f = tot ? P.long[d] / tot : 0, hgt = round(f * BAR);\n    // The bar: the share of long chords so far, out of 40 rows.\n    for (let j = 0; j \u003c hgt; j++) for (let q = 0; q \u003c 3; q++) display.setPixel(bx + q, yb - j, cL[0], cL[1], cL[2]);\n    // The answer this method gives, as a white tick and its fraction.\n    const ty = yb - round((D.num / D.den) * BAR);\n    for (let q = -1; q \u003c= 3; q++) display.setPixel(bx + q, ty, 255, 255, 255);\n    const lx = D.side > 0 ? tx : tx + 3;\n    glyph(display, D.num, lx, ty - 2, 1, cS);\n    glyph(display, \"/\", lx + 4, ty - 2, 1, cS);\n    glyph(display, D.den, lx + 8, ty - 2, 1, cS);\n    // The running share in percent, two digits, in the long colour.\n    const pct = min(99, round(f * 100));\n    const s = tot ? [floor(pct / 10), pct % 10] : [\"-\", \"-\"];\n    glyph(display, s[0], tx, top + 1, 2, cL);\n    glyph(display, s[1], tx + 8, top + 1, 2, cL);\n  }\n}\n","layer":{"id":"layer-bertrand-paradox","type":"code","name":"bertrand-paradox","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bertrand Paradox\n// Family:  data\n// Idea:    Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bertrand paradox (Joseph Bertrand, 1889), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1\n//\n// Knob 1: Hue. Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap.\n// Knob 2: Speed. The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep.\n// Knob 3: Chords. How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross.\n// Knob 4: Persist. How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple.\n// Buttons: K1 tap clears the three discs and their counts, and the gauges start again from nothing.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, round, sqrt, sin, cos, abs, exp, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// One disc in each third of the 128 rows, 40 LEDs across, set left, right,\n// left so each has 22 columns beside it for its gauge.\nconst R = 19.5;\nconst DISCS = [\n  { cx: 20.5, cy: 21.5, side: 1, num: 1, den: 3 },\n  { cx: 43.5, cy: 64, side: -1, num: 1, den: 2 },\n  { cx: 20.5, cy: 106.5, side: 1, num: 1, den: 4 },\n];\nconst BAR = 40;\n// The points each method picked for its newest chords, shown white for a\n// quarter of a second: the rim pair, the point on the radius, the midpoint.\nconst SEEDS = 16, SEED_LIFE = 0.25;\n// Chords a second times the fade time at the opening knobs.\nconst OPEN = 24 * 1.1 * 7 ** 0.06;\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = {\n  0: 0b111101101101111, 1: 0b010110010010111, 2: 0b111001111100111, 3: 0b111001111001111,\n  4: 0b101101111001001, 5: 0b111100111001111, 6: 0b111100111101111, 7: 0b111001001001001,\n  8: 0b111101111101111, 9: 0b111101111001111, \"/\": 0b001001010100100, \"-\": 0b000000111000000,\n};\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i].map((c) => c * 255);\n}\n\n// The faint frame: each disc's rim and its inscribed triangle, point up.\n// They sit at 24 of 255, just visible on the panel and still dark to the\n// study's count of lit LEDs, which starts above 24.\nfunction buildFrame() {\n  const f = new Uint8Array(N);\n  for (const d of DISCS) {\n    for (let a = 0; a \u003c 720; a++) {\n      const t = (a / 720) * 2 * PI, x = floor(d.cx + R * cos(t)), y = floor(d.cy + R * sin(t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) f[y * W + x] = 1;\n    }\n    for (let k = 0; k \u003c 3; k++) {\n      const a0 = -PI / 2 + (k * 2 * PI) / 3, a1 = a0 + (2 * PI) / 3;\n      const x0 = d.cx + R * cos(a0), y0 = d.cy + R * sin(a0), x1 = d.cx + R * cos(a1), y1 = d.cy + R * sin(a1);\n      const n = 80;\n      for (let j = 0; j \u003c= n; j++) f[floor(y0 + ((y1 - y0) * j) / n) * W + floor(x0 + ((x1 - x0) * j) / n)] = 2;\n    }\n  }\n  return f;\n}\n\nexport function setup(params) {\n  const thr = new Float32Array(N);\n  // Each LED lets go of a fading chord at its own level, so a chord crumbles\n  // LED by LED instead of dimming, and every lit LED is at full brightness.\n  // Half-lit lines would turn the saturated pair towards grey.\n  for (let i = 0; i \u003c N; i++) thr[i] = 0.1 + 0.9 * Math.random();\n  params.s = {\n    accL: new Float32Array(N), accS: new Float32Array(N), thr, frame: buildFrame(),\n    long: [0, 0, 0], total: [0, 0, 0], carry: 0, hue: 0, clock: 0, scale: 1, cap: 2.5,\n    seeds: new Int32Array(3 * SEEDS).fill(-1), born: new Float32Array(3 * SEEDS), next: [0, 0, 0],\n  };\n}\n\n// A chord of the unit circle by method m, as its two ends and its distance\n// p from the centre. It is longer than the triangle's side, sqrt 3, exactly\n// when p \u003c 1/2, when it cuts the triangle's incircle.\nfunction chord(m) {\n  const rnd = Math.random;\n  if (m === 0) {\n    // Two uniform points on the rim: long with probability 1/3.\n    const a = 2 * PI * rnd(), b = 2 * PI * rnd();\n    return [cos(a), sin(a), cos(b), sin(b), abs(cos((a - b) / 2))];\n  }\n  // A uniform point on a random radius (m = 1, long with probability 1/2)\n  // or a uniform point in the disc (m = 2, 1/4) as the chord's midpoint.\n  const f = 2 * PI * rnd(), p = m === 1 ? rnd() : sqrt(rnd()), h = sqrt(1 - p * p), c = cos(f), s = sin(f);\n  return [p * c - h * s, p * s + h * c, p * c + h * s, p * s - h * c, p];\n}\n\nfunction seed(P, d, x, y) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const j = d * SEEDS + P.next[d];\n  P.next[d] = (P.next[d] + 1) % SEEDS;\n  P.seeds[j] = y * W + x;\n  P.born[j] = P.clock;\n}\n\n// Disc d draws its chords by method d.\nfunction lay(P, d) {\n  const D = DISCS[d], [ax, ay, bx, by, p] = chord(d), isLong = p \u003c 0.5;\n  if (d === 0) {\n    seed(P, d, D.cx + R * ax, D.cy + R * ay);\n    seed(P, d, D.cx + R * bx, D.cy + R * by);\n  } else seed(P, d, D.cx + (R * (ax + bx)) / 2, D.cy + (R * (ay + by)) / 2);\n  const acc = isLong ? P.accL : P.accS;\n  const x0 = D.cx + R * ax, y0 = D.cy + R * ay, dx = R * (bx - ax), dy = R * (by - ay);\n  const n = Math.ceil(max(abs(dx), abs(dy)));\n  let last = -1;\n  for (let j = 0; j \u003c= n; j++) {\n    const x = floor(x0 + (dx * j) / max(1, n)), y = floor(y0 + (dy * j) / max(1, n));\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const i = y * W + x;\n    if (i === last) continue;\n    last = i;\n    acc[i] = min(acc[i] + 1, P.cap);\n  }\n  P.total[d]++;\n  if (isLong) P.long[d]++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const clock = d * (cl(k[1], 0.2, 3) / 2);\n  const rate = 24 * 10 ** cl(k[2], 0, 1), tau = 1.1 * 7 ** cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.accL.fill(0);\n    P.accS.fill(0);\n    P.long = [0, 0, 0];\n    P.total = [0, 0, 0];\n    P.seeds.fill(-1);\n  }\n  P.clock += clock;\n  // With more chords alive than at the opening, the level an LED needs to\n  // light rises with them (to the 0.85th power), so the discs turn from a\n  // few lines into a stipple of each method's own density instead of\n  // filling solid: even in the middle disc, heavy at the rim in the top one,\n  // hollow in the bottom one.\n  P.scale = max(1, (rate * tau) / OPEN) ** 0.85;\n  P.cap = 2.5 * P.scale;\n  const fade = exp(-clock / tau), aL = P.accL, aS = P.accS;\n  for (let i = 0; i \u003c N; i++) {\n    aL[i] *= fade;\n    aS[i] *= fade;\n  }\n  P.carry += rate * clock;\n  const n = floor(P.carry);\n  P.carry -= n;\n  for (let j = 0; j \u003c n; j++) for (let m = 0; m \u003c 3; m++) lay(P, m);\n}\n\nfunction glyph(display, ch, x0, y0, sc, c) {\n  const bits = FONT[ch];\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((bits >> (14 - r * 3 - q)) & 1)\n        for (let u = 0; u \u003c sc; u++) for (let v = 0; v \u003c sc; v++) display.setPixel(x0 + q * sc + u, y0 + r * sc + v, c[0], c[1], c[2]);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  // Magenta for the long chords, green for the short: at full saturation\n  // the pair sits as far apart as two colours can on the panel's red-green\n  // and yellow-blue axes, and neither opens on red.\n  const cL = hsv(P.hue + 5 / 6, 1, 1), cS = hsv(P.hue + 1 / 3, 1, 1);\n  const { accL, accS, thr, frame } = P, sc = P.scale;\n  for (let i = 0; i \u003c N; i++) {\n    const a = accL[i], b = accS[i], t = a + b, x = i % W, y = (i / W) | 0;\n    if (t > thr[i] * sc) {\n      // A lit LED is at full brightness: the fade shows as crumbling.\n      const c = a >= b ? cL : cS;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    } else if (frame[i]) display.setPixel(x, y, 24, 24, 24);\n    else display.setPixel(x, y, 0, 0, 0);\n  }\n  for (let j = 0; j \u003c P.seeds.length; j++) {\n    const i = P.seeds[j];\n    if (i >= 0 && P.clock - P.born[j] \u003c SEED_LIFE) display.setPixel(i % W, (i / W) | 0, 255, 255, 255);\n  }\n  for (let d = 0; d \u003c 3; d++) {\n    const D = DISCS[d], yb = round(D.cy + R) - 1, top = yb - BAR + 1;\n    const bx = D.side > 0 ? 43 : 18, tx = D.side > 0 ? 49 : 1;\n    const tot = P.total[d], f = tot ? P.long[d] / tot : 0, hgt = round(f * BAR);\n    // The bar: the share of long chords so far, out of 40 rows.\n    for (let j = 0; j \u003c hgt; j++) for (let q = 0; q \u003c 3; q++) display.setPixel(bx + q, yb - j, cL[0], cL[1], cL[2]);\n    // The answer this method gives, as a white tick and its fraction.\n    const ty = yb - round((D.num / D.den) * BAR);\n    for (let q = -1; q \u003c= 3; q++) display.setPixel(bx + q, ty, 255, 255, 255);\n    const lx = D.side > 0 ? tx : tx + 3;\n    glyph(display, D.num, lx, ty - 2, 1, cS);\n    glyph(display, \"/\", lx + 4, ty - 2, 1, cS);\n    glyph(display, D.den, lx + 8, ty - 2, 1, cS);\n    // The running share in percent, two digits, in the long colour.\n    const pct = min(99, round(f * 100));\n    const s = tot ? [floor(pct / 10), pct % 10] : [\"-\", \"-\"];\n    glyph(display, s[0], tx, top + 1, 2, cL);\n    glyph(display, s[1], tx + 8, top + 1, 2, cL);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap."},{"name":"Speed","min":0.2,"max":3,"about":"The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep."},{"name":"Chords","min":0,"max":1,"about":"How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross."},{"name":"Persist","min":0,"max":1,"about":"How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple."}],"start":[0,2,0,0.06],"measures":{"motion":0.3006,"detail":0.2269,"edges":0.8503,"complexity":0.2324,"coverage":0.2638,"colour":0.5757,"drift":0.0802},"knobResponse":[0.24,0.1255,0.1353,0.0538]},{"slug":"bi-phase","title":"Bi-Phase","family":"cosmetic","round":30,"note":"흔들어 섞은 이중층 클렌저가 패널 가득 기름 방울로 흩어졌다가, 방울끼리 합쳐 떠올라 위에 한 층으로 모이고 경계선이 맑게 서요. 그러고 나면 다시 흔들려요.","idea":"The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.","buttons":"K1 tap shakes the bottle now.","code":"// ===== Patternflow pattern =====\n// Title:   Bi-Phase\n// Family:  cosmetic\n// Idea:    The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after two-phase cleansers and phase-field separation of two liquids (Cahn-Hilliard, John W. Cahn and John E. Hilliard, 1958; Allen-Cahn, Samuel M. Allen and John W. Cahn, 1979)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1\n//\n// Knob 1: Hue. Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose.\n// Knob 2: Speed. How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long.\n// Knob 3: Oil. The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down.\n// Knob 4: Shake. How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles.\n// Buttons: K1 tap shakes the bottle now.\n\nconst W = 64, H = 128, N = W * H;\n// The flow is solved on a coarse grid of 4x4 LED cells.\nconst CW = 16, CH = 32, CN = CW * CH;\nconst { min, max, floor, sqrt, sin, cos, exp, log, tanh, abs, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// Allen-Cahn: phi_t = M (K lap phi + phi - phi^3) + lambda, phi = +1 oil and\n// -1 water, lambda the multiplier that holds the amount of oil to K3. The\n// interface is tanh(d / sqrt(2K)) across, about 2 LEDs, and moves at M K\n// times its curvature. h M (8K + 2) \u003c 2 keeps the step stable: 4 a frame at\n// Speed 2.\nconst KAP = 0.5, MOB = 1.5, HMAX = 0.21;\n// Gravity in the free energy, on the interfaces only: a rim higher up gains\n// oil from one lower down in the same patch.\nconst GRAV = 2.5;\n// Time units a second at Speed 1; a shake lasts TS of them, 1.1 s at Speed 2.\nconst RATE = 12, TS = 26;\n// The push of the oil, and the screening of the flat bottle's walls.\nconst BUOY = 0.5, AL2 = 0.16;\n// Drops under AMAX LEDs move as one piece; ROUND and DRIFT below.\nconst AMAX = 700, ROUND = 0.06, DRIFT = 0.08;\n\n// Sine transforms of the coarse grid (DST-II forward, DST-III back), and the\n// screened Stokes operator (lap - a^2)^2 psi = d(f_y)/dx of a flat cell,\n// diagonal in that basis, with free-slip walls.\nconst SX = new Float32Array(CW * CW), SY = new Float32Array(CH * CH), KI = new Float32Array(CN);\nfor (let m = 0; m \u003c CW; m++) for (let i = 0; i \u003c CW; i++) SX[m * CW + i] = sin((PI * (m + 1) * (i + 0.5)) / CW);\nfor (let n = 0; n \u003c CH; n++) for (let j = 0; j \u003c CH; j++) SY[n * CH + j] = sin((PI * (n + 1) * (j + 0.5)) / CH);\nfor (let n = 0; n \u003c CH; n++)\n  for (let m = 0; m \u003c CW; m++) {\n    const kx = 4 * sin((PI * (m + 1)) / (2 * CW)) ** 2, ky = 4 * sin((PI * (n + 1)) / (2 * CH)) ** 2;\n    KI[n * CW + m] = ((m === CW - 1 ? 1 : 2) * (n === CH - 1 ? 1 : 2)) / (CN * (kx + ky + AL2) ** 2);\n  }\n\nfunction hsv(h, s, v, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  (o[0] = c[0]), (o[1] = c[1]), (o[2] = c[2]);\n}\n\nexport function setup(params) {\n  params.s = null;\n}\n\nfunction init(k) {\n  const f = () => new Float32Array(N), g = () => new Float32Array(CN);\n  const P = {\n    phi: f(), nxt: f(), S: f(), tmp: f(), blur: f(), u: f(), v: f(), b1: f(), b2: f(),\n    lab: new Int32Array(N), stk: new Int32Array(N), cu: f(), cv: f(), ca: f(), px: f(), py: f(), rad: f(),\n    F: g(), A: g(), G: g(), psi: g(), U: g(), V: g(),\n    hue: k[0], speed: 2, oil: cl(k[2], 0.3, 0.6), shake: cl(k[3], 0, 1),\n    mT: 0, c: 0.85 * TS, time: 0, rt: 0, deep: [0, 0, 0], pale: [0, 0, 0],\n  };\n  // Open at the end of a shake, the new drops just formed.\n  P.mT = 2 * P.oil - 1;\n  shake(P);\n  P.phi.set(P.S);\n  for (let s = 0; s \u003c 8; s++) relax(P, HMAX);\n  return P;\n}\n\n// A shake's emulsion: round drops of the lesser liquid dropped at random until\n// they make up its share, radius 2.2 to 5 LEDs after a gentle shake and 1.5\n// to 2.4 after a hard one, small ones the most common. Most land a LED clear\n// of the others; one in twenty may touch.\nfunction shake(P) {\n  const S = P.S, inv = P.mT > 0, f = inv ? (1 - P.mT) / 2 : (1 + P.mT) / 2;\n  const r0 = 2.2 - 0.7 * P.shake, r1 = 5 - 2.6 * P.shake;\n  S.fill(-1);\n  let area = 0;\n  for (let k = 0; k \u003c 5000 && area \u003c f * N; k++) {\n    const r = r0 * (r1 / r0) ** (random() ** 1.6), cx = random() * W, cy = random() * H;\n    const xa = max(0, floor(cx - r - 2)), xb = min(W - 1, floor(cx + r + 2)), ya = max(0, floor(cy - r - 2)), yb = min(H - 1, floor(cy + r + 2));\n    if (k \u003c 4500 && random() \u003c 0.95) {\n      let hit = false;\n      const rr = (r + 1.2) * (r + 1.2);\n      for (let y = ya; y \u003c= yb && !hit; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const ex = x + 0.5 - cx, ey = y + 0.5 - cy;\n          if (ex * ex + ey * ey \u003c rr && S[y * W + x] > -0.9) hit = true;\n        }\n      if (hit) continue;\n    }\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const ex = x + 0.5 - cx, ey = y + 0.5 - cy, i = y * W + x, v = tanh((r - sqrt(ex * ex + ey * ey)) / 0.8);\n        if (v > S[i]) (area += (v - S[i]) / 2), (S[i] = v);\n      }\n  }\n  if (inv) for (let i = 0; i \u003c N; i++) S[i] = -S[i];\n}\n\n// Box blur of radius r, along x and then y, by running sums.\nfunction box(src, dst, tmp, r) {\n  const n = 2 * r + 1;\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = src[o] * (r + 1);\n    for (let x = 1; x \u003c= r; x++) s += src[o + x];\n    for (let x = 0; x \u003c W; x++) (tmp[o + x] = s / n), (s += src[o + min(x + r + 1, W - 1)] - src[o + max(x - r, 0)]);\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = tmp[x] * (r + 1);\n    for (let y = 1; y \u003c= r; y++) s += tmp[y * W + x];\n    for (let y = 0; y \u003c H; y++) (dst[y * W + x] = s / n), (s += tmp[min(y + r + 1, H - 1) * W + x] - tmp[max(y - r, 0) * W + x]);\n  }\n}\n\n// One Allen-Cahn step. The multiplier acts on the interfaces only, weighted\n// by g = (1 - phi^2)^2, and is worked out over each 11x11 patch rather than\n// the whole panel, so what a drop's rim loses to its curvature comes back on\n// the same rim: a drop pulls round without shrinking, oil cannot go into\n// solution in the water, and a drop only feeds a neighbour it nearly touches,\n// as with Cahn-Hilliard. What the patches miss goes back over all the rims.\nfunction relax(P, h) {\n  const phi = P.phi, r = P.nxt, g = P.b1, rb = P.b2, gb = P.blur, a = h * MOB;\n  for (let y = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0, gr = (GRAV * (H - 2 * y)) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], q = 1 - p * p, w = q * q;\n      const lap = phi[x > 0 ? i - 1 : i] + phi[x \u003c W - 1 ? i + 1 : i] + phi[i + up] + phi[i + dn] - 4 * p;\n      r[i] = a * (KAP * lap + p - p * p * p + gr * w);\n      g[i] = w;\n    }\n  }\n  box(r, rb, P.tmp, 5);\n  box(g, gb, P.tmp, 5);\n  let sum = 0, gs = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const q = (phi[i] += r[i] - (g[i] * rb[i]) / (gb[i] + 1e-9));\n    sum += q;\n    gs += g[i];\n  }\n  const d = (P.mT * N - sum) / (gs + 1e-6);\n  for (let i = 0; i \u003c N; i++) phi[i] += d * g[i];\n}\n\n// The flow. Oil is lighter, so each coarse cell pushes up by how much oil it\n// holds; screened Stokes flow carries the drops, big ones faster, and water\n// comes down round them. A shake adds a swirl of the two lowest modes.\nfunction flow(P, swirl, phase) {\n  const { phi, F, A, G, psi, U, V } = P;\n  F.fill(0);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[(y >> 2) * CW + (x >> 2)] += phi[y * W + x];\n  // The curl of the push, -B dF/dx, then along x, along y, scaled, and back.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) G[j * CW + i] = (-BUOY / 32) * (F[j * CW + min(i + 1, CW - 1)] - F[j * CW + max(i - 1, 0)]);\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let i = 0; i \u003c CW; i++) s += G[j * CW + i] * SX[m * CW + i];\n      A[j * CW + m] = s;\n    }\n  for (let n = 0; n \u003c CH; n++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let j = 0; j \u003c CH; j++) s += A[j * CW + m] * SY[n * CH + j];\n      G[n * CW + m] = s * KI[n * CW + m];\n    }\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let n = 0; n \u003c CH; n++) s += G[n * CW + m] * SY[n * CH + j];\n      A[j * CW + m] = s;\n    }\n  const c1 = cos(phase), s1 = sin(phase);\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      let s = 0;\n      for (let m = 0; m \u003c CW; m++) s += A[j * CW + m] * SX[m * CW + i];\n      const X = (PI * (i + 0.5)) / CW, Y = (PI * (j + 0.5)) / CH;\n      psi[j * CW + i] = s + swirl * (sin(X) * sin(2 * Y) * c1 + 0.8 * sin(2 * X) * sin(Y) * s1);\n    }\n  // u = dpsi/dy, v = -dpsi/dx, in LEDs per time unit; psi is 0 past the walls.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      const k = j * CW + i, p = psi[k];\n      U[k] = 2 * ((j \u003c CH - 1 ? psi[k + CW] : -p) - (j > 0 ? psi[k - CW] : -p));\n      V[k] = -2 * ((i \u003c CW - 1 ? psi[k + 1] : -p) - (i > 0 ? psi[k - 1] : -p));\n    }\n}\n\n// The flow at every LED. A drop of either liquid under AMAX LEDs moves as one\n// piece at the mean of the flow over it, as surface tension holds a small\n// drop together, and so do the two rings of LEDs round it, which it is about\n// to take the place of. On top of that each drop is drawn towards the circle\n// of its own area: every LED of it moves along the radius at ROUND times its\n// distance from that circle, which curvature alone would take seconds over\n// for a big drop. A drop on a side wall slides up it and is drawn to a half\n// circle standing on the wall. Every drop rises, or sinks if it is water, at\n// least DRIFT LEDs a time unit faster than the coarse flow says, so the last\n// small ones still get there. The layers and the liquid between the drops\n// follow the flow smoothed over 5 LEDs; during a shake the swirl takes over.\nfunction velocity(P, rigid) {\n  const { U, V, u, v, b1, b2, phi, lab, stk, cu, cv, ca, px, py, rad } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const gy = cl((y - 1.5) / 4, 0, CH - 1), j0 = gy | 0, fy = gy - j0, a = j0 * CW, b = min(j0 + 1, CH - 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const gx = cl((x - 1.5) / 4, 0, CW - 1), i0 = gx | 0, i1 = min(i0 + 1, CW - 1), fx = gx - i0, i = y * W + x;\n      u[i] = (U[a + i0] * (1 - fx) + U[a + i1] * fx) * (1 - fy) + (U[b + i0] * (1 - fx) + U[b + i1] * fx) * fy;\n      v[i] = (V[a + i0] * (1 - fx) + V[a + i1] * fx) * (1 - fy) + (V[b + i0] * (1 - fx) + V[b + i1] * fx) * fy;\n    }\n  }\n  box(u, b1, P.tmp, 2);\n  box(v, b2, P.tmp, 2);\n  if (rigid \u003c= 0) return u.set(b1), v.set(b2);\n  // Label the pieces of each liquid, 4-connected.\n  lab.fill(-1);\n  let nc = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (lab[s] >= 0) continue;\n    const ph = phi[s] > 0;\n    let top = 0, area = 0, su = 0, sv = 0, mx = 0, my = 0, wall = false;\n    stk[top++] = s;\n    lab[s] = nc;\n    while (top > 0) {\n      const i = stk[--top], x = i % W;\n      area++;\n      if (x === 0 || x === W - 1) wall = true;\n      (su += u[i]), (sv += v[i]), (mx += x), (my += (i - x) / W);\n      if (x > 0 && lab[i - 1] \u003c 0 && phi[i - 1] > 0 === ph) (lab[i - 1] = nc), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0 && phi[i + 1] > 0 === ph) (lab[i + 1] = nc), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0 && phi[i - W] > 0 === ph) (lab[i - W] = nc), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0 && phi[i + W] > 0 === ph) (lab[i + W] = nc), (stk[top++] = i + W);\n    }\n    (ca[nc] = area), (cu[nc] = wall ? 0 : su / area), (cv[nc] = sv / area + (ph ? -DRIFT : DRIFT));\n    (px[nc] = wall ? (mx / area \u003c W / 2 ? -0.5 : W - 0.5) : mx / area), (py[nc] = my / area);\n    rad[nc] = sqrt(((wall ? 2 : 1) * area) / PI);\n    nc++;\n  }\n  const put = (i, k) => {\n    const dx = (i % W) - px[k], dy = ((i / W) | 0) - py[k], w = ROUND * (rad[k] / (sqrt(dx * dx + dy * dy) + 0.5) - 1);\n    (u[i] = cu[k] + w * dx), (v[i] = cv[k] + w * dy), (lab[i] = k);\n  };\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    if (ca[lab[i]] \u003c AMAX) put(i, lab[i]), (stk[top++] = i);\n    else (u[i] = b1[i]), (v[i] = b2[i]), (lab[i] = -1);\n  }\n  // Two rings round each drop, nearest drop first.\n  for (let ring = 0, from = 0; ring \u003c 2; ring++) {\n    const end = top;\n    for (let t = from; t \u003c end; t++) {\n      const i = stk[t], x = i % W, k = lab[i];\n      if (x > 0 && lab[i - 1] \u003c 0) put(i - 1, k), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0) put(i + 1, k), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0) put(i - W, k), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0) put(i + W, k), (stk[top++] = i + W);\n    }\n    from = end;\n  }\n  if (rigid \u003c 1) for (let i = 0; i \u003c N; i++) (u[i] = b1[i] + (u[i] - b1[i]) * rigid), (v[i] = b2[i] + (v[i] - b2[i]) * rigid);\n}\n\n// Semi-Lagrangian advection of a field over T time units, from src into dst.\n// Past the top the bottle holds oil (top) and past the bottom water (bot), so\n// a drop leaving the floor does not draw a streak of itself up behind it.\nfunction advect(P, src, dst, T, top, bot) {\n  const { u, v } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, sx = cl(x - u[i] * T, 0, W - 1), sy = y - v[i] * T;\n      const x0 = sx | 0, x1 = min(x0 + 1, W - 1), ex = sx - x0, y0 = floor(sy), ey = sy - y0;\n      const a = y0 \u003c 0 ? top : y0 > H - 1 ? bot : src[y0 * W + x0] * (1 - ex) + src[y0 * W + x1] * ex;\n      const b = y0 \u003c -1 ? top : y0 > H - 2 ? bot : src[(y0 + 1) * W + x0] * (1 - ex) + src[(y0 + 1) * W + x1] * ex;\n      dst[i] = a * (1 - ey) + b * ey;\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.3, 0.06];\n  if (!params.s) params.s = init(k);\n  const P = params.s, d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.oil = cl(k[2], 0.3, 0.6);\n  P.shake = cl(k[3], 0, 1);\n  // The amount of oil follows K3 at a fifth of the bottle a second, so the\n  // layer grows or thins instead of the water clouding over.\n  P.mT += cl(2 * P.oil - 1 - P.mT, -0.4 * d, 0.4 * d);\n  const T = d * P.speed * RATE;\n  P.rt += d;\n  P.time += T;\n  P.c += T;\n  // A shake every 560 time units (23 s at Speed 2) at K4 0, down to 120 at 1.\n  if ((input.btnPressed && input.btnPressed[0] && P.c > TS) || P.c > 560 - 440 * sqrt(P.shake)) (P.c = 0), shake(P);\n  // The swirl winds the liquid round for the first two thirds of a shake, and\n  // as it dies the liquid breaks up into the new drops.\n  const shaking = P.c \u003c TS, u = P.c / TS, e = shaking ? sin(PI * min(1, u / 0.65)) ** 2 : 0;\n  flow(P, 10 * e, P.time * 0.3);\n  velocity(P, 1 - e);\n  // phi is carried as atanh(phi), which runs nearly straight through an\n  // interface, so the linear interpolation does not smear the drops' edges.\n  const phi = P.phi, q = P.nxt;\n  for (let i = 0; i \u003c N; i++) {\n    const p = cl(phi[i], -0.99999, 0.99999);\n    q[i] = 0.5 * log((1 + p) / (1 - p));\n  }\n  advect(P, q, phi, T, 6, -6);\n  for (let i = 0; i \u003c N; i++) phi[i] = 1 - 2 / (exp(2 * phi[i]) + 1);\n  if (shaking) {\n    const w = 1 - exp(-0.5 * sm(0.4, 0.8, u) * T), S = P.S;\n    for (let i = 0; i \u003c N; i++) phi[i] += w * (S[i] - phi[i]);\n  }\n  const steps = Math.ceil(T / HMAX - 1e-6);\n  for (let s = 0; s \u003c steps; s++) relax(P, T / steps);\n  // A drop shrunk to one LED inside the other liquid cannot go anywhere under\n  // the local multiplier and would stay as a dimple: fill it in.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i];\n      if (p > 0.97 || p \u003c -0.97) continue;\n      const a = phi[x > 0 ? i - 1 : i + 1], b = phi[x \u003c W - 1 ? i + 1 : i - 1], c = phi[y > 0 ? i - W : i + W], e = phi[y \u003c H - 1 ? i + W : i - W];\n      const lo = min(a, b, c, e), hi = max(a, b, c, e);\n      if ((lo > 0.5 && p \u003c lo - 0.1) || (hi \u003c -0.5 && p > hi + 0.1)) phi[i] = (a + b + c + e) / 4;\n    }\n}\n\n// Light from the upper left and in front, and the half vector for the glint.\nconst LX = -0.42, LY = -0.56, LZ = 0.71, HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const phi = P.phi, bl = P.blur, deep = P.deep, pale = P.pale;\n  // phi blurred over 5x5 is read as the height of the oil: a drop is a dome\n  // and the layer a plateau, lit from the upper left.\n  box(phi, bl, P.tmp, 2);\n  hsv(P.hue + 0.07, 0.62, 1, deep);\n  hsv(P.hue + 0.07, 0.26, 1, pale);\n  // A soft band of shop light drifts across the glass every 14 s.\n  const band = W / 2 + 46 * sin((2 * PI * P.rt) / 14);\n  for (let y = 0; y \u003c H; y++) {\n    const shop = 0.86 + 0.14 * (1 - y / H);\n    // Water: a pale cool white, a shade bluer low down.\n    const wr = 0.76 - 0.06 * (y / H), wg = 0.82 - 0.03 * (y / H), wb = 0.93;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], o = sm(-0.6, 0.6, p);\n      const gx = phi[x \u003c W - 1 ? i + 1 : i] - phi[x > 0 ? i - 1 : i], gy = phi[y \u003c H - 1 ? i + W : i] - phi[y > 0 ? i - W : i];\n      const nx = -2.4 * (bl[x \u003c W - 1 ? i + 1 : i] - bl[x > 0 ? i - 1 : i]), ny = -2.4 * (bl[y \u003c H - 1 ? i + W : i] - bl[y > 0 ? i - W : i]);\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1), c1 = max(0, (nx * HX + ny * HY + HZ) * nn), c4 = c1 * c1 * c1 * c1, c16 = c4 * c4 * c4 * c4;\n      // Oil: pale at a drop's rim and deep in its middle and in the layer,\n      // shaded as a dome, never below 80% so it does not go brown.\n      const dpt = sm(-0.2, 0.9, bl[i]), sh = max(0.8, 1 + 0.6 * ((nx * LX + ny * LY + LZ) * nn - LZ));\n      const r = wr + ((pale[0] + (deep[0] - pale[0]) * dpt) * sh - wr) * o;\n      const g = wg + ((pale[1] + (deep[1] - pale[1]) * dpt) * sh - wg) * o;\n      const b = wb + ((pale[2] + (deep[2] - pale[2]) * dpt) * sh - wb) * o;\n      // The rim catches the light from above, a dome its glint, and a long\n      // flat interface, the meniscus, shows as a bright line.\n      const q = 1 - p * p, rim = q * q, lit = cl(gy * 0.6 + gx * 0.25, 0, 1), flat = (gy * gy) / (gx * gx + gy * gy + 1e-6);\n      const men = rim * flat * flat * sm(0.45, 0.75, abs(ny / 2.4));\n      const bx = (x - band + 0.4 * (y - H / 2)) / 11, sheen = bx * bx \u003c 9 ? exp(-bx * bx) * (0.05 + 0.1 * o) : 0;\n      const hl = cl(0.1 * rim + 0.45 * rim * lit + 0.7 * c16 * c16 * o + 0.8 * men + sheen, 0, 1);\n      display.setPixel(x, y, (r + (1 - r) * hl) * shop * 255, (g + (1 - g) * hl) * shop * 255, (b + (1 - b) * hl) * shop * 255);\n    }\n  }\n}\n","layer":{"id":"layer-bi-phase","type":"code","name":"bi-phase","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bi-Phase\n// Family:  cosmetic\n// Idea:    The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after two-phase cleansers and phase-field separation of two liquids (Cahn-Hilliard, John W. Cahn and John E. Hilliard, 1958; Allen-Cahn, Samuel M. Allen and John W. Cahn, 1979)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1\n//\n// Knob 1: Hue. Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose.\n// Knob 2: Speed. How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long.\n// Knob 3: Oil. The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down.\n// Knob 4: Shake. How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles.\n// Buttons: K1 tap shakes the bottle now.\n\nconst W = 64, H = 128, N = W * H;\n// The flow is solved on a coarse grid of 4x4 LED cells.\nconst CW = 16, CH = 32, CN = CW * CH;\nconst { min, max, floor, sqrt, sin, cos, exp, log, tanh, abs, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// Allen-Cahn: phi_t = M (K lap phi + phi - phi^3) + lambda, phi = +1 oil and\n// -1 water, lambda the multiplier that holds the amount of oil to K3. The\n// interface is tanh(d / sqrt(2K)) across, about 2 LEDs, and moves at M K\n// times its curvature. h M (8K + 2) \u003c 2 keeps the step stable: 4 a frame at\n// Speed 2.\nconst KAP = 0.5, MOB = 1.5, HMAX = 0.21;\n// Gravity in the free energy, on the interfaces only: a rim higher up gains\n// oil from one lower down in the same patch.\nconst GRAV = 2.5;\n// Time units a second at Speed 1; a shake lasts TS of them, 1.1 s at Speed 2.\nconst RATE = 12, TS = 26;\n// The push of the oil, and the screening of the flat bottle's walls.\nconst BUOY = 0.5, AL2 = 0.16;\n// Drops under AMAX LEDs move as one piece; ROUND and DRIFT below.\nconst AMAX = 700, ROUND = 0.06, DRIFT = 0.08;\n\n// Sine transforms of the coarse grid (DST-II forward, DST-III back), and the\n// screened Stokes operator (lap - a^2)^2 psi = d(f_y)/dx of a flat cell,\n// diagonal in that basis, with free-slip walls.\nconst SX = new Float32Array(CW * CW), SY = new Float32Array(CH * CH), KI = new Float32Array(CN);\nfor (let m = 0; m \u003c CW; m++) for (let i = 0; i \u003c CW; i++) SX[m * CW + i] = sin((PI * (m + 1) * (i + 0.5)) / CW);\nfor (let n = 0; n \u003c CH; n++) for (let j = 0; j \u003c CH; j++) SY[n * CH + j] = sin((PI * (n + 1) * (j + 0.5)) / CH);\nfor (let n = 0; n \u003c CH; n++)\n  for (let m = 0; m \u003c CW; m++) {\n    const kx = 4 * sin((PI * (m + 1)) / (2 * CW)) ** 2, ky = 4 * sin((PI * (n + 1)) / (2 * CH)) ** 2;\n    KI[n * CW + m] = ((m === CW - 1 ? 1 : 2) * (n === CH - 1 ? 1 : 2)) / (CN * (kx + ky + AL2) ** 2);\n  }\n\nfunction hsv(h, s, v, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  (o[0] = c[0]), (o[1] = c[1]), (o[2] = c[2]);\n}\n\nexport function setup(params) {\n  params.s = null;\n}\n\nfunction init(k) {\n  const f = () => new Float32Array(N), g = () => new Float32Array(CN);\n  const P = {\n    phi: f(), nxt: f(), S: f(), tmp: f(), blur: f(), u: f(), v: f(), b1: f(), b2: f(),\n    lab: new Int32Array(N), stk: new Int32Array(N), cu: f(), cv: f(), ca: f(), px: f(), py: f(), rad: f(),\n    F: g(), A: g(), G: g(), psi: g(), U: g(), V: g(),\n    hue: k[0], speed: 2, oil: cl(k[2], 0.3, 0.6), shake: cl(k[3], 0, 1),\n    mT: 0, c: 0.85 * TS, time: 0, rt: 0, deep: [0, 0, 0], pale: [0, 0, 0],\n  };\n  // Open at the end of a shake, the new drops just formed.\n  P.mT = 2 * P.oil - 1;\n  shake(P);\n  P.phi.set(P.S);\n  for (let s = 0; s \u003c 8; s++) relax(P, HMAX);\n  return P;\n}\n\n// A shake's emulsion: round drops of the lesser liquid dropped at random until\n// they make up its share, radius 2.2 to 5 LEDs after a gentle shake and 1.5\n// to 2.4 after a hard one, small ones the most common. Most land a LED clear\n// of the others; one in twenty may touch.\nfunction shake(P) {\n  const S = P.S, inv = P.mT > 0, f = inv ? (1 - P.mT) / 2 : (1 + P.mT) / 2;\n  const r0 = 2.2 - 0.7 * P.shake, r1 = 5 - 2.6 * P.shake;\n  S.fill(-1);\n  let area = 0;\n  for (let k = 0; k \u003c 5000 && area \u003c f * N; k++) {\n    const r = r0 * (r1 / r0) ** (random() ** 1.6), cx = random() * W, cy = random() * H;\n    const xa = max(0, floor(cx - r - 2)), xb = min(W - 1, floor(cx + r + 2)), ya = max(0, floor(cy - r - 2)), yb = min(H - 1, floor(cy + r + 2));\n    if (k \u003c 4500 && random() \u003c 0.95) {\n      let hit = false;\n      const rr = (r + 1.2) * (r + 1.2);\n      for (let y = ya; y \u003c= yb && !hit; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const ex = x + 0.5 - cx, ey = y + 0.5 - cy;\n          if (ex * ex + ey * ey \u003c rr && S[y * W + x] > -0.9) hit = true;\n        }\n      if (hit) continue;\n    }\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const ex = x + 0.5 - cx, ey = y + 0.5 - cy, i = y * W + x, v = tanh((r - sqrt(ex * ex + ey * ey)) / 0.8);\n        if (v > S[i]) (area += (v - S[i]) / 2), (S[i] = v);\n      }\n  }\n  if (inv) for (let i = 0; i \u003c N; i++) S[i] = -S[i];\n}\n\n// Box blur of radius r, along x and then y, by running sums.\nfunction box(src, dst, tmp, r) {\n  const n = 2 * r + 1;\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = src[o] * (r + 1);\n    for (let x = 1; x \u003c= r; x++) s += src[o + x];\n    for (let x = 0; x \u003c W; x++) (tmp[o + x] = s / n), (s += src[o + min(x + r + 1, W - 1)] - src[o + max(x - r, 0)]);\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = tmp[x] * (r + 1);\n    for (let y = 1; y \u003c= r; y++) s += tmp[y * W + x];\n    for (let y = 0; y \u003c H; y++) (dst[y * W + x] = s / n), (s += tmp[min(y + r + 1, H - 1) * W + x] - tmp[max(y - r, 0) * W + x]);\n  }\n}\n\n// One Allen-Cahn step. The multiplier acts on the interfaces only, weighted\n// by g = (1 - phi^2)^2, and is worked out over each 11x11 patch rather than\n// the whole panel, so what a drop's rim loses to its curvature comes back on\n// the same rim: a drop pulls round without shrinking, oil cannot go into\n// solution in the water, and a drop only feeds a neighbour it nearly touches,\n// as with Cahn-Hilliard. What the patches miss goes back over all the rims.\nfunction relax(P, h) {\n  const phi = P.phi, r = P.nxt, g = P.b1, rb = P.b2, gb = P.blur, a = h * MOB;\n  for (let y = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0, gr = (GRAV * (H - 2 * y)) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], q = 1 - p * p, w = q * q;\n      const lap = phi[x > 0 ? i - 1 : i] + phi[x \u003c W - 1 ? i + 1 : i] + phi[i + up] + phi[i + dn] - 4 * p;\n      r[i] = a * (KAP * lap + p - p * p * p + gr * w);\n      g[i] = w;\n    }\n  }\n  box(r, rb, P.tmp, 5);\n  box(g, gb, P.tmp, 5);\n  let sum = 0, gs = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const q = (phi[i] += r[i] - (g[i] * rb[i]) / (gb[i] + 1e-9));\n    sum += q;\n    gs += g[i];\n  }\n  const d = (P.mT * N - sum) / (gs + 1e-6);\n  for (let i = 0; i \u003c N; i++) phi[i] += d * g[i];\n}\n\n// The flow. Oil is lighter, so each coarse cell pushes up by how much oil it\n// holds; screened Stokes flow carries the drops, big ones faster, and water\n// comes down round them. A shake adds a swirl of the two lowest modes.\nfunction flow(P, swirl, phase) {\n  const { phi, F, A, G, psi, U, V } = P;\n  F.fill(0);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[(y >> 2) * CW + (x >> 2)] += phi[y * W + x];\n  // The curl of the push, -B dF/dx, then along x, along y, scaled, and back.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) G[j * CW + i] = (-BUOY / 32) * (F[j * CW + min(i + 1, CW - 1)] - F[j * CW + max(i - 1, 0)]);\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let i = 0; i \u003c CW; i++) s += G[j * CW + i] * SX[m * CW + i];\n      A[j * CW + m] = s;\n    }\n  for (let n = 0; n \u003c CH; n++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let j = 0; j \u003c CH; j++) s += A[j * CW + m] * SY[n * CH + j];\n      G[n * CW + m] = s * KI[n * CW + m];\n    }\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let n = 0; n \u003c CH; n++) s += G[n * CW + m] * SY[n * CH + j];\n      A[j * CW + m] = s;\n    }\n  const c1 = cos(phase), s1 = sin(phase);\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      let s = 0;\n      for (let m = 0; m \u003c CW; m++) s += A[j * CW + m] * SX[m * CW + i];\n      const X = (PI * (i + 0.5)) / CW, Y = (PI * (j + 0.5)) / CH;\n      psi[j * CW + i] = s + swirl * (sin(X) * sin(2 * Y) * c1 + 0.8 * sin(2 * X) * sin(Y) * s1);\n    }\n  // u = dpsi/dy, v = -dpsi/dx, in LEDs per time unit; psi is 0 past the walls.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      const k = j * CW + i, p = psi[k];\n      U[k] = 2 * ((j \u003c CH - 1 ? psi[k + CW] : -p) - (j > 0 ? psi[k - CW] : -p));\n      V[k] = -2 * ((i \u003c CW - 1 ? psi[k + 1] : -p) - (i > 0 ? psi[k - 1] : -p));\n    }\n}\n\n// The flow at every LED. A drop of either liquid under AMAX LEDs moves as one\n// piece at the mean of the flow over it, as surface tension holds a small\n// drop together, and so do the two rings of LEDs round it, which it is about\n// to take the place of. On top of that each drop is drawn towards the circle\n// of its own area: every LED of it moves along the radius at ROUND times its\n// distance from that circle, which curvature alone would take seconds over\n// for a big drop. A drop on a side wall slides up it and is drawn to a half\n// circle standing on the wall. Every drop rises, or sinks if it is water, at\n// least DRIFT LEDs a time unit faster than the coarse flow says, so the last\n// small ones still get there. The layers and the liquid between the drops\n// follow the flow smoothed over 5 LEDs; during a shake the swirl takes over.\nfunction velocity(P, rigid) {\n  const { U, V, u, v, b1, b2, phi, lab, stk, cu, cv, ca, px, py, rad } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const gy = cl((y - 1.5) / 4, 0, CH - 1), j0 = gy | 0, fy = gy - j0, a = j0 * CW, b = min(j0 + 1, CH - 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const gx = cl((x - 1.5) / 4, 0, CW - 1), i0 = gx | 0, i1 = min(i0 + 1, CW - 1), fx = gx - i0, i = y * W + x;\n      u[i] = (U[a + i0] * (1 - fx) + U[a + i1] * fx) * (1 - fy) + (U[b + i0] * (1 - fx) + U[b + i1] * fx) * fy;\n      v[i] = (V[a + i0] * (1 - fx) + V[a + i1] * fx) * (1 - fy) + (V[b + i0] * (1 - fx) + V[b + i1] * fx) * fy;\n    }\n  }\n  box(u, b1, P.tmp, 2);\n  box(v, b2, P.tmp, 2);\n  if (rigid \u003c= 0) return u.set(b1), v.set(b2);\n  // Label the pieces of each liquid, 4-connected.\n  lab.fill(-1);\n  let nc = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (lab[s] >= 0) continue;\n    const ph = phi[s] > 0;\n    let top = 0, area = 0, su = 0, sv = 0, mx = 0, my = 0, wall = false;\n    stk[top++] = s;\n    lab[s] = nc;\n    while (top > 0) {\n      const i = stk[--top], x = i % W;\n      area++;\n      if (x === 0 || x === W - 1) wall = true;\n      (su += u[i]), (sv += v[i]), (mx += x), (my += (i - x) / W);\n      if (x > 0 && lab[i - 1] \u003c 0 && phi[i - 1] > 0 === ph) (lab[i - 1] = nc), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0 && phi[i + 1] > 0 === ph) (lab[i + 1] = nc), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0 && phi[i - W] > 0 === ph) (lab[i - W] = nc), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0 && phi[i + W] > 0 === ph) (lab[i + W] = nc), (stk[top++] = i + W);\n    }\n    (ca[nc] = area), (cu[nc] = wall ? 0 : su / area), (cv[nc] = sv / area + (ph ? -DRIFT : DRIFT));\n    (px[nc] = wall ? (mx / area \u003c W / 2 ? -0.5 : W - 0.5) : mx / area), (py[nc] = my / area);\n    rad[nc] = sqrt(((wall ? 2 : 1) * area) / PI);\n    nc++;\n  }\n  const put = (i, k) => {\n    const dx = (i % W) - px[k], dy = ((i / W) | 0) - py[k], w = ROUND * (rad[k] / (sqrt(dx * dx + dy * dy) + 0.5) - 1);\n    (u[i] = cu[k] + w * dx), (v[i] = cv[k] + w * dy), (lab[i] = k);\n  };\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    if (ca[lab[i]] \u003c AMAX) put(i, lab[i]), (stk[top++] = i);\n    else (u[i] = b1[i]), (v[i] = b2[i]), (lab[i] = -1);\n  }\n  // Two rings round each drop, nearest drop first.\n  for (let ring = 0, from = 0; ring \u003c 2; ring++) {\n    const end = top;\n    for (let t = from; t \u003c end; t++) {\n      const i = stk[t], x = i % W, k = lab[i];\n      if (x > 0 && lab[i - 1] \u003c 0) put(i - 1, k), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0) put(i + 1, k), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0) put(i - W, k), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0) put(i + W, k), (stk[top++] = i + W);\n    }\n    from = end;\n  }\n  if (rigid \u003c 1) for (let i = 0; i \u003c N; i++) (u[i] = b1[i] + (u[i] - b1[i]) * rigid), (v[i] = b2[i] + (v[i] - b2[i]) * rigid);\n}\n\n// Semi-Lagrangian advection of a field over T time units, from src into dst.\n// Past the top the bottle holds oil (top) and past the bottom water (bot), so\n// a drop leaving the floor does not draw a streak of itself up behind it.\nfunction advect(P, src, dst, T, top, bot) {\n  const { u, v } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, sx = cl(x - u[i] * T, 0, W - 1), sy = y - v[i] * T;\n      const x0 = sx | 0, x1 = min(x0 + 1, W - 1), ex = sx - x0, y0 = floor(sy), ey = sy - y0;\n      const a = y0 \u003c 0 ? top : y0 > H - 1 ? bot : src[y0 * W + x0] * (1 - ex) + src[y0 * W + x1] * ex;\n      const b = y0 \u003c -1 ? top : y0 > H - 2 ? bot : src[(y0 + 1) * W + x0] * (1 - ex) + src[(y0 + 1) * W + x1] * ex;\n      dst[i] = a * (1 - ey) + b * ey;\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.3, 0.06];\n  if (!params.s) params.s = init(k);\n  const P = params.s, d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.oil = cl(k[2], 0.3, 0.6);\n  P.shake = cl(k[3], 0, 1);\n  // The amount of oil follows K3 at a fifth of the bottle a second, so the\n  // layer grows or thins instead of the water clouding over.\n  P.mT += cl(2 * P.oil - 1 - P.mT, -0.4 * d, 0.4 * d);\n  const T = d * P.speed * RATE;\n  P.rt += d;\n  P.time += T;\n  P.c += T;\n  // A shake every 560 time units (23 s at Speed 2) at K4 0, down to 120 at 1.\n  if ((input.btnPressed && input.btnPressed[0] && P.c > TS) || P.c > 560 - 440 * sqrt(P.shake)) (P.c = 0), shake(P);\n  // The swirl winds the liquid round for the first two thirds of a shake, and\n  // as it dies the liquid breaks up into the new drops.\n  const shaking = P.c \u003c TS, u = P.c / TS, e = shaking ? sin(PI * min(1, u / 0.65)) ** 2 : 0;\n  flow(P, 10 * e, P.time * 0.3);\n  velocity(P, 1 - e);\n  // phi is carried as atanh(phi), which runs nearly straight through an\n  // interface, so the linear interpolation does not smear the drops' edges.\n  const phi = P.phi, q = P.nxt;\n  for (let i = 0; i \u003c N; i++) {\n    const p = cl(phi[i], -0.99999, 0.99999);\n    q[i] = 0.5 * log((1 + p) / (1 - p));\n  }\n  advect(P, q, phi, T, 6, -6);\n  for (let i = 0; i \u003c N; i++) phi[i] = 1 - 2 / (exp(2 * phi[i]) + 1);\n  if (shaking) {\n    const w = 1 - exp(-0.5 * sm(0.4, 0.8, u) * T), S = P.S;\n    for (let i = 0; i \u003c N; i++) phi[i] += w * (S[i] - phi[i]);\n  }\n  const steps = Math.ceil(T / HMAX - 1e-6);\n  for (let s = 0; s \u003c steps; s++) relax(P, T / steps);\n  // A drop shrunk to one LED inside the other liquid cannot go anywhere under\n  // the local multiplier and would stay as a dimple: fill it in.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i];\n      if (p > 0.97 || p \u003c -0.97) continue;\n      const a = phi[x > 0 ? i - 1 : i + 1], b = phi[x \u003c W - 1 ? i + 1 : i - 1], c = phi[y > 0 ? i - W : i + W], e = phi[y \u003c H - 1 ? i + W : i - W];\n      const lo = min(a, b, c, e), hi = max(a, b, c, e);\n      if ((lo > 0.5 && p \u003c lo - 0.1) || (hi \u003c -0.5 && p > hi + 0.1)) phi[i] = (a + b + c + e) / 4;\n    }\n}\n\n// Light from the upper left and in front, and the half vector for the glint.\nconst LX = -0.42, LY = -0.56, LZ = 0.71, HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const phi = P.phi, bl = P.blur, deep = P.deep, pale = P.pale;\n  // phi blurred over 5x5 is read as the height of the oil: a drop is a dome\n  // and the layer a plateau, lit from the upper left.\n  box(phi, bl, P.tmp, 2);\n  hsv(P.hue + 0.07, 0.62, 1, deep);\n  hsv(P.hue + 0.07, 0.26, 1, pale);\n  // A soft band of shop light drifts across the glass every 14 s.\n  const band = W / 2 + 46 * sin((2 * PI * P.rt) / 14);\n  for (let y = 0; y \u003c H; y++) {\n    const shop = 0.86 + 0.14 * (1 - y / H);\n    // Water: a pale cool white, a shade bluer low down.\n    const wr = 0.76 - 0.06 * (y / H), wg = 0.82 - 0.03 * (y / H), wb = 0.93;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], o = sm(-0.6, 0.6, p);\n      const gx = phi[x \u003c W - 1 ? i + 1 : i] - phi[x > 0 ? i - 1 : i], gy = phi[y \u003c H - 1 ? i + W : i] - phi[y > 0 ? i - W : i];\n      const nx = -2.4 * (bl[x \u003c W - 1 ? i + 1 : i] - bl[x > 0 ? i - 1 : i]), ny = -2.4 * (bl[y \u003c H - 1 ? i + W : i] - bl[y > 0 ? i - W : i]);\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1), c1 = max(0, (nx * HX + ny * HY + HZ) * nn), c4 = c1 * c1 * c1 * c1, c16 = c4 * c4 * c4 * c4;\n      // Oil: pale at a drop's rim and deep in its middle and in the layer,\n      // shaded as a dome, never below 80% so it does not go brown.\n      const dpt = sm(-0.2, 0.9, bl[i]), sh = max(0.8, 1 + 0.6 * ((nx * LX + ny * LY + LZ) * nn - LZ));\n      const r = wr + ((pale[0] + (deep[0] - pale[0]) * dpt) * sh - wr) * o;\n      const g = wg + ((pale[1] + (deep[1] - pale[1]) * dpt) * sh - wg) * o;\n      const b = wb + ((pale[2] + (deep[2] - pale[2]) * dpt) * sh - wb) * o;\n      // The rim catches the light from above, a dome its glint, and a long\n      // flat interface, the meniscus, shows as a bright line.\n      const q = 1 - p * p, rim = q * q, lit = cl(gy * 0.6 + gx * 0.25, 0, 1), flat = (gy * gy) / (gx * gx + gy * gy + 1e-6);\n      const men = rim * flat * flat * sm(0.45, 0.75, abs(ny / 2.4));\n      const bx = (x - band + 0.4 * (y - H / 2)) / 11, sheen = bx * bx \u003c 9 ? exp(-bx * bx) * (0.05 + 0.1 * o) : 0;\n      const hl = cl(0.1 * rim + 0.45 * rim * lit + 0.7 * c16 * c16 * o + 0.8 * men + sheen, 0, 1);\n      display.setPixel(x, y, (r + (1 - r) * hl) * shop * 255, (g + (1 - g) * hl) * shop * 255, (b + (1 - b) * hl) * shop * 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long."},{"name":"Oil","min":0.3,"max":0.6,"about":"The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down."},{"name":"Shake","min":0,"max":1,"about":"How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles."}],"start":[0,2,0.3,0.06],"measures":{"motion":0.0579,"detail":0.0044,"edges":0.0095,"complexity":0.6088,"coverage":1,"colour":0.3088,"drift":0.0284},"knobResponse":[0.1292,0.1228,0.1399,0.1113]},{"slug":"big-type","title":"Big Type","family":"type","round":1,"note":"화면을 꽉 채운 낱말 하나가 자석을 댄 옛 텔레비전 화면처럼 휘어요.","idea":"One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-big-type","type":"code","name":"big-type","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the outline colour; the fill and the shadow follow it."},{"name":"Speed","min":0.2,"max":5,"about":"How fast the wave runs down the word and the bright scan bar rolls."},{"name":"Word","min":0,"max":6,"about":"Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB."},{"name":"Warp","min":0,"max":1,"about":"How hard the picture bends, from a slow sway to a set losing its hold."}],"start":[0,2,0,0.06],"measures":{"motion":0.4681,"detail":0.0954,"edges":0.9989,"complexity":0.0628,"coverage":0.2402,"colour":0.253,"drift":0.0745},"knobResponse":[0.0865,0.0522,0.1361,0.0808]},{"slug":"bismuth","title":"Bismuth","family":"mineral","round":18,"note":"녹은 비스무트 웅덩이에서 계단 진 네모 호퍼 결정이 가지를 치며 패널 꼭대기까지 자라요. 테라스마다 산화막이 은색에서 금색, 자홍, 파랑, 청록을 지나 두 번째 금색과 분홍으로 바뀌어서 색이 그 단이 생긴 때를 말해요. K1 을 누르면 웅덩이가 패널을 타고 올라 결정을 녹였다가 빠지고, 결정이 다시 자라요.","idea":"Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.","buttons":"K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.","code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-bismuth","type":"code","name":"bismuth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves."},{"name":"Steps","min":3,"max":8,"about":"How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows."},{"name":"Heat","min":0,"max":1,"about":"How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back."}],"start":[0,2,3,0.06],"measures":{"motion":0.0634,"detail":0.155,"edges":0.6769,"complexity":1.8463,"coverage":0.7656,"colour":0.3505,"drift":0.1056},"knobResponse":[0.1563,0.1868,0.0876,0.1811]},{"slug":"blooming-gel","title":"Blooming Gel","family":"cosmetic","round":36,"note":"젖은 블루밍 베이스에 코발트와 라일락, 흰 젤 방울이 하나씩 떨어져 가장자리가 해진 꽃처럼 번지고, 안료는 번지는 앞선으로 밀려 테두리가 짙어져요. 6.2초를 그리고 나면 경화 램프 띠가 위에서 아래로 지나며 무늬를 굳히고, 닦아 낸 새 베이스에서 다시 시작해요. K3 은 방울 크기와 번지는 거리를 정하고, K1 을 누르면 방울 하나가 바로 떨어져요.","idea":"Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.","buttons":"K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.","code":"// ===== Patternflow pattern =====\n// Title:   Blooming Gel\n// Family:  cosmetic\n// Idea:    Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after blooming gel nail art, with the drop's gel spreading by the porous medium equation and its Barenblatt fronts (G. I. Barenblatt, 1952) and its pigment run ahead to the front like a watercolour back-run\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1\n//\n// Knob 1: Hue. Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream.\n// Knob 2: Speed. The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Bloom. How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other.\n// Knob 4: Rim. How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring.\n// Buttons: K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, exp, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The gel lives on a coarse grid of CW x CH cells, 2 LEDs each; its\n// pigment on the LEDs themselves.\nconst CW = W / 2, CH = H / 2, CN = CW * CH;\n// Tiles of 8 x 8 LEDs: only the wet ones and their neighbours are worked.\nconst TS = 8, TW = W / TS, TH = H / TS;\n// Pigments: two tints and white.\nconst NK = 3;\n// The drop's gel spreads as w_t = div(D w grad w), the porous medium\n// equation, whose fronts move at a finite speed; D in LED^2 a second at\n// Speed 2. The gel soaks into the base, losing SOAK of itself a second, and\n// pigment moves only where the gel is thicker than WET.\nconst SOAK = 0.06, WET = 0.006;\n// One painting round in seconds of nail time: drops land until PAINT, the\n// cure lamp passes from CURE to HOLD, the design rests, and the wipe runs\n// from WIPE to ROUND.\nconst PAINT = 6.2, CURE = 6.5, HOLD = 7.9, WIPE = 9.1, ROUND = 10.3;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, bloom: 0, rim: 0.06, t: 0, next: 0, first: true, gmob: 1,\n    g: new Float32Array(CN), dg: new Float32Array(CN), Gx: new Float32Array(CN), Gy: new Float32Array(CN), set: 0, lamp: -99,\n    w: new Float32Array(N), wt: new Float32Array(N), Mx: new Float32Array(N), My: new Float32Array(N),\n    p: [new Float32Array(N), new Float32Array(N), new Float32Array(N)], dp: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    tile: new Uint8Array(TW * TH), act: new Uint8Array(TW * TH),\n    c: [0, 0, 0], col: [new Float32Array(3), new Float32Array(3)], base: [0, 0, 0],\n    lastKind: 0, lastX: 32, lastY: 64,\n  };\n  freshBase(S);\n  params.s = S;\n}\n\n// Smooth value noise on a grid of cells LEDs, in -1..1, for a w x h field.\nfunction noise(cells, w, h) {\n  const gw = Math.ceil(w / cells) + 2, gh = Math.ceil(h / cells) + 2, g = new Float32Array(gw * gh), out = new Float32Array(w * h);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  for (let y = 0; y \u003c h; y++)\n    for (let x = 0; x \u003c w; x++) {\n      const u = x / cells, v = y / cells, i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n      const su = fu * fu * (3 - 2 * fu), sv = fv * fv * (3 - 2 * fv);\n      const a = g[j * gw + i], b = g[j * gw + i + 1], c = g[(j + 1) * gw + i], d = g[(j + 1) * gw + i + 1];\n      out[y * w + x] = (a + (b - a) * su) * (1 - sv) + (c + (d - c) * su) * sv;\n    }\n  return out;\n}\n\n// A fresh blooming base: clear, and unevenly wet, which is what feathers\n// the blooms. The gel's mobility varies up to sixfold over 6 to 12 LEDs,\n// which bends the fronts into lobes; the pigment's more over 2 to 5 LEDs,\n// which mottles the colour inside a bloom.\nfunction freshBase(S) {\n  const a = noise(3, CW, CH), b = noise(1.5, CW, CH), m = new Float32Array(CN);\n  let mm = 0;\n  for (let i = 0; i \u003c CN; i++) mm = max(mm, (m[i] = exp(0.6 * a[i] + 0.3 * b[i])));\n  S.gmob = mm;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x;\n      S.Gx[i] = x \u003c CW - 1 ? 0.5 * (m[i] + m[i + 1]) : 0;\n      S.Gy[i] = y \u003c CH - 1 ? 0.5 * (m[i] + m[i + CW]) : 0;\n    }\n  const c = noise(2.5, W, H), d = noise(1.2, W, H), f = new Float32Array(N), e = noise(4, W, H);\n  // And how thick the gel must be before pigment can enter, which varies\n  // fourfold or more from LED to LED: that frays the edges.\n  for (let i = 0; i \u003c N; i++) S.wt[i] = WET * exp(1.2 * d[i] + 0.8 * e[i]);\n  for (let i = 0; i \u003c N; i++) f[i] = exp(0.9 * c[i] + 0.5 * d[i]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      S.Mx[i] = x \u003c W - 1 ? 0.5 * (f[i] + f[i + 1]) : 0;\n      S.My[i] = y \u003c H - 1 ? 0.5 * (f[i] + f[i + W]) : 0;\n    }\n  S.g.fill(0);\n  S.w.fill(0);\n  for (let k = 0; k \u003c NK; k++) S.p[k].fill(0);\n  S.set = 0;\n}\n\n// A drop of gel lands: a small dome of gel carrying one pigment.\n// Its outline is a little wavy, four to seven soft lobes.\nfunction drop(S, x0, y0, kind) {\n  const r = 6 + 3 * S.bloom, h0 = 0.5 + 0.25 * S.bloom, R = r * 1.25 + 1;\n  const lobes = 4 + floor(random() * 4), ph = random() * 2 * PI, amp = 0.1 + 0.1 * random();\n  const shape = (dx, dy) => (dx * dx + dy * dy) / (r * r * (1 + amp * sin(lobes * Math.atan2(dy, dx) + ph)) ** 2);\n  for (let y = max(0, floor((y0 - R) / 2)); y \u003c= min(CH - 1, (y0 + R) / 2); y++)\n    for (let x = max(0, floor((x0 - R) / 2)); x \u003c= min(CW - 1, (x0 + R) / 2); x++) {\n      const d2 = shape(2 * x + 1 - x0, 2 * y + 1 - y0);\n      if (d2 \u003c 1) S.g[y * CW + x] += h0 * (1 - d2);\n    }\n  const P = S.p[kind];\n  for (let y = max(0, floor(y0 - R)); y \u003c= min(H - 1, y0 + R); y++)\n    for (let x = max(0, floor(x0 - R)); x \u003c= min(W - 1, x0 + R); x++) {\n      const d2 = shape(x + 0.5 - x0, y + 0.5 - y0);\n      if (d2 \u003c 1) P[y * W + x] += 0.8 * h0 * (1 - d2);\n    }\n  S.lastKind = kind;\n  S.lastX = x0;\n  S.lastY = y0;\n}\n\n// The next drop: near the last one as often as not, so blooms meet, and\n// never the same pigment twice running.\nfunction nextDrop(S) {\n  let x, y;\n  if (random() \u003c 0.5) {\n    const a = random() * 2 * PI, d = 14 + random() * 14;\n    x = S.lastX + d * cos(a);\n    y = S.lastY + d * sin(a) * 1.4;\n  } else {\n    x = 8 + random() * (W - 16);\n    y = 8 + random() * (H - 16);\n  }\n  x = cl(x, 6, W - 6);\n  y = cl(y, 6, H - 6);\n  // After a tint, white one time in three; never white twice.\n  const kind = S.lastKind === 2 ? (random() \u003c 0.5 ? 0 : 1) : random() \u003c 0.67 ? 1 - S.lastKind : 2;\n  drop(S, x, y, kind);\n}\n\n// One explicit step of the gel on its coarse grid: finite volumes, the flux\n// across a face D w (w_j - w_i) / h^2 with w the mean of the two cells.\nfunction gelStep(S, dt, D) {\n  const { g, dg, Gx, Gy } = S, k = (D * dt) / 4;\n  dg.fill(0);\n  for (let y = Math.ceil(S.set / 2); y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x, gi = g[i];\n      if (x \u003c CW - 1) {\n        const gj = g[i + 1];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gx[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + 1] -= q;\n        }\n      }\n      if (y \u003c CH - 1) {\n        const gj = g[i + CW];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gy[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + CW] -= q;\n        }\n      }\n    }\n  const soak = exp(-SOAK * dt), dry = 0.004 * dt;\n  for (let i = 0; i \u003c CN; i++) {\n    const v = (g[i] + dg[i]) * soak - dry;\n    g[i] = v > 0 ? v : 0;\n  }\n}\n\n// The gel's thickness on the LEDs, bilinear from the coarse grid, and which\n// tiles have any.\nfunction upsample(S) {\n  const { g, w, tile } = S;\n  tile.fill(0);\n  for (let y = 0; y \u003c H; y++) {\n    const v = cl(y / 2 - 0.25, 0, CH - 1.0001), j = v | 0, fy = v - j;\n    for (let x = 0; x \u003c W; x++) {\n      const u = cl(x / 2 - 0.25, 0, CW - 1.0001), i = u | 0, fx = u - i, q = j * CW + i;\n      const val = (g[q] * (1 - fx) + g[q + 1] * fx) * (1 - fy) + (g[q + CW] * (1 - fx) + g[q + CW + 1] * fx) * fy;\n      w[y * W + x] = val;\n      if (val > WET) tile[((y / TS) | 0) * TW + ((x / TS) | 0)] = 1;\n    }\n  }\n}\n\n// One explicit step of the pigment over the wet tiles. In the body of a\n// bloom it goes with the gel, at the gel's mean velocity -D grad w; where the\n// gel thins toward its front it rides the surface, up to beta = 3.5 + 5.5 Rim\n// times as fast, so it runs ahead to the front and piles up there, since it\n// can only go where there is gel. Within the gel it spreads a little.\nfunction pigmentStep(S, dt, D, beta) {\n  const { w, wt, Mx, My, p, dp, tile, act } = S;\n  act.fill(0);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0; tx \u003c TW; tx++)\n      if (tile[ty * TW + tx])\n        for (let j = max(0, ty - 1); j \u003c= min(TH - 1, ty + 1); j++) for (let i = max(0, tx - 1); i \u003c= min(TW - 1, tx + 1); i++) act[j * TW + i] = 1;\n  const p0 = p[0], p1 = p[1], p2 = p[2], d0 = dp[0], d1 = dp[1], d2 = dp[2];\n  const kap = 1.2 * dt, edge = 0.03 + 0.05 * S.rim;\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++) {\n      const r = y * W;\n      d0.fill(0, r + x0, r + x0 + TS);\n      d1.fill(0, r + x0, r + x0 + TS);\n      d2.fill(0, r + x0, r + x0 + TS);\n    }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = max(y0, Math.ceil(S.set)); y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x, wi = w[i];\n        for (let f = 0; f \u003c 2; f++) {\n          if (f === 0 ? x === W - 1 : y === H - 1) continue;\n          const j = f === 0 ? i + 1 : i + W, wj = w[j];\n          if (wi \u003c WET && wj \u003c WET) continue;\n          if (p0[i] + p1[i] + p2[i] + p0[j] + p1[j] + p2[j] \u003c 1e-4) continue;\n          const m = f === 0 ? Mx[i] : My[i];\n          // Upwind: the pigment of the LED the gel leaves. The surface's lead\n          // fades in below a gel thickness of about edge.\n          const wf = 0.5 * (wi + wj);\n          let v = -dt * D * (1 + (beta - 1) * (edge / (wf + edge))) * m * (wj - wi);\n          v = v > 0.2 ? 0.2 : v \u003c -0.2 ? -0.2 : v;\n          let a0 = 0, a1 = 0, a2 = 0;\n          if (v > 0 && wj > wt[j]) (a0 = v * p0[i]), (a1 = v * p1[i]), (a2 = v * p2[i]);\n          else if (v \u003c 0 && wi > wt[i]) (a0 = v * p0[j]), (a1 = v * p1[j]), (a2 = v * p2[j]);\n          if (wi > wt[i] && wj > wt[j]) {\n            const k = kap * m \u003c 0.04 ? kap * m : 0.04;\n            a0 -= k * (p0[j] - p0[i]);\n            a1 -= k * (p1[j] - p1[i]);\n            a2 -= k * (p2[j] - p2[i]);\n          }\n          d0[i] -= a0;\n          d0[j] += a0;\n          d1[i] -= a1;\n          d1[j] += a1;\n          d2[i] -= a2;\n          d2[j] += a2;\n        }\n      }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x;\n        p0[i] += d0[i];\n        p1[i] += d1[i];\n        p2[i] += d2[i];\n      }\n  }\n}\n\nfunction advance(S, dt) {\n  const t0 = S.t % ROUND;\n  S.t += dt;\n  const t1 = S.t % ROUND;\n  const D = 150 + 150 * S.bloom, beta = 3.5 + 5.5 * S.rim;\n  if (t1 \u003c t0) {\n    freshBase(S);\n    S.next = 0.2;\n  }\n  // Drops while painting.\n  if (t1 \u003c PAINT) {\n    S.next -= dt;\n    if (S.next \u003c= 0) {\n      S.next = 0.35 + 0.45 * random();\n      nextDrop(S);\n    }\n  }\n  // The cure lamp passes down the panel and sets each row it has passed: the\n  // gel and its pigment stop moving there.\n  S.lamp = t1 >= CURE && t1 \u003c HOLD + 0.2 ? ((t1 - CURE) / (HOLD - CURE)) * (H + 20) - 10 : -99;\n  if (S.lamp > -99) S.set = max(S.set, cl(S.lamp, 0, H));\n  // The wipe pushes the colour down ahead of it and lifts it off.\n  if (t1 >= WIPE) {\n    const row = ((t1 - WIPE) / (ROUND - WIPE)) * (H + 24) - 12;\n    for (let y = H - 1; y >= 0; y--) {\n      const f = cl((row - y) / 10, 0, 1);\n      if (f \u003c= 0) continue;\n      for (let k = 0; k \u003c NK; k++) {\n        const P = S.p[k];\n        for (let x = 0; x \u003c W; x++) {\n          const i = y * W + x, v = P[i] * f * 0.3;\n          P[i] -= v + 0.25 * f * P[i];\n          if (y \u003c H - 1) P[i + W] += v;\n        }\n      }\n    }\n  }\n  // The gel in explicit steps short enough to hold steady, at most twelve\n  // a frame: for the moment a fresh drop is thickest, nail time runs a\n  // little slow rather than the sums running away.\n  let gm = 0;\n  for (let i = 0; i \u003c CN; i++) if (S.g[i] > gm) gm = S.g[i];\n  if (gm \u003c= 0) {\n    S.w.fill(0);\n    return;\n  }\n  const lim = 0.8 / (D * S.gmob * gm), n = min(12, Math.ceil(dt / lim)), h = min(dt / n, lim);\n  for (let s = 0; s \u003c n; s++) gelStep(S, h, D);\n  upsample(S);\n  // The pigment in one or two steps. No face passes on more than 0.24 of a\n  // LED's pigment in one, so even a LED emptying through all four faces\n  // keeps a little and none goes below zero.\n  const m = dt > 0.04 ? 2 : 1;\n  for (let s = 0; s \u003c m; s++) pigmentStep(S, (n * h) / m, D, beta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bloom = cl(k[2], 0, 1);\n  S.rim = cl(k[3], 0, 1);\n  if (S.first) {\n    // Open with three drops already landing, spread down the panel.\n    for (let n = 0; n \u003c 3; n++) drop(S, 18 + 28 * random(), 22 + 40 * n + 12 * random(), n);\n    S.first = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Once the lamp has started, a new drop needs a fresh base first.\n    if (S.t % ROUND >= CURE) {\n      S.t = (floor(S.t / ROUND) + 1) * ROUND;\n      freshBase(S);\n      S.next = 0.6;\n    }\n    nextDrop(S);\n  }\n  advance(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { w, p, col, base, c } = S;\n  // Colours: a milky base, two tints round the hue, white. Each tint is a\n  // pigment that takes light away as exp(-a p) (Beer-Lambert), its strength\n  // a set so a full drop shows the tint.\n  // From orange to lime a pale base reads khaki, so there it is paler still.\n  const h = S.hue + 0.66, hb = h + 0.04 - floor(h + 0.04), warm = sm(0.02, 0.07, hb) * (1 - sm(0.3, 0.38, hb));\n  hsv(h + 0.04, 0.2 - 0.08 * warm, 0.85 + 0.08 * warm, base);\n  // The tints: a deep one on the hue and a lighter one 0.1 round from it.\n  // Round orange and yellow both are lifted to near full, so a thick rim\n  // deepens toward red or orange instead of going brown or olive.\n  for (let k = 0; k \u003c 2; k++) {\n    const ht = h + 0.1 * k, hk = ht - floor(ht), wk = sm(0.0, 0.05, hk) * (1 - sm(0.28, 0.36, hk));\n    hsv(ht, k ? 0.7 : 0.88, (k ? 0.76 : 0.58) + (k ? 0.18 : 0.34) * wk, c);\n    for (let ch = 0; ch \u003c 3; ch++) col[k][ch] = max(0, -Math.log(max(c[ch], 0.03) / base[ch]) / 0.15);\n  }\n  const p0 = p[0], p1 = p[1], p2 = p[2], lb = S.lamp > -99 ? 1 : 0, sh = ((S.t % ROUND) - CURE) * 40 - 30;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, a = p0[i], b = p1[i], wh = 1 - exp(-8 * p2[i]);\n      let r = base[0] * exp(-col[0][0] * a - col[1][0] * b);\n      let g = base[1] * exp(-col[0][1] * a - col[1][1] * b);\n      let bl = base[2] * exp(-col[0][2] * a - col[1][2] * b);\n      r += (0.97 - r) * wh;\n      g += (0.97 - g) * wh;\n      bl += (0.97 - bl) * wh;\n      // Wet gel shines: a highlight from the slope of its surface.\n      const wi = w[i];\n      if (wi > 0) {\n        const gx = (x \u003c W - 1 ? w[i + 1] : wi) - (x > 0 ? w[i - 1] : wi), gy = (y \u003c H - 1 ? w[i + W] : wi) - (y > 0 ? w[i - W] : wi);\n        const nx = -gx * 14, ny = -gy * 14, nn = 1 / sqrt(1 + nx * nx + ny * ny);\n        const sp = (nx * -0.3 + ny * -0.45 + 0.84) * nn, s4 = sp * sp, s8 = s4 * s4, s16 = s8 * s8;\n        const gl = 0.45 * s16 * min(1, wi * 12);\n        r += gl;\n        g += gl;\n        bl += gl;\n      }\n      // The cure lamp's band, and the set coat's sheen behind it.\n      if (lb > 0) {\n        const q = (y - S.lamp) / 4, b2 = exp(-q * q) * lb;\n        r += 0.42 * b2;\n        g += 0.36 * b2;\n        bl += 0.5 * b2;\n      }\n      if (y \u003c S.set) {\n        const q = (x * 0.5 + y - sh) / 9, b3 = 0.1 * exp(-q * q);\n        r += b3;\n        g += b3;\n        bl += b3;\n      }\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","layer":{"id":"layer-blooming-gel","type":"code","name":"blooming-gel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Blooming Gel\n// Family:  cosmetic\n// Idea:    Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after blooming gel nail art, with the drop's gel spreading by the porous medium equation and its Barenblatt fronts (G. I. Barenblatt, 1952) and its pigment run ahead to the front like a watercolour back-run\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1\n//\n// Knob 1: Hue. Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream.\n// Knob 2: Speed. The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Bloom. How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other.\n// Knob 4: Rim. How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring.\n// Buttons: K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, exp, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The gel lives on a coarse grid of CW x CH cells, 2 LEDs each; its\n// pigment on the LEDs themselves.\nconst CW = W / 2, CH = H / 2, CN = CW * CH;\n// Tiles of 8 x 8 LEDs: only the wet ones and their neighbours are worked.\nconst TS = 8, TW = W / TS, TH = H / TS;\n// Pigments: two tints and white.\nconst NK = 3;\n// The drop's gel spreads as w_t = div(D w grad w), the porous medium\n// equation, whose fronts move at a finite speed; D in LED^2 a second at\n// Speed 2. The gel soaks into the base, losing SOAK of itself a second, and\n// pigment moves only where the gel is thicker than WET.\nconst SOAK = 0.06, WET = 0.006;\n// One painting round in seconds of nail time: drops land until PAINT, the\n// cure lamp passes from CURE to HOLD, the design rests, and the wipe runs\n// from WIPE to ROUND.\nconst PAINT = 6.2, CURE = 6.5, HOLD = 7.9, WIPE = 9.1, ROUND = 10.3;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, bloom: 0, rim: 0.06, t: 0, next: 0, first: true, gmob: 1,\n    g: new Float32Array(CN), dg: new Float32Array(CN), Gx: new Float32Array(CN), Gy: new Float32Array(CN), set: 0, lamp: -99,\n    w: new Float32Array(N), wt: new Float32Array(N), Mx: new Float32Array(N), My: new Float32Array(N),\n    p: [new Float32Array(N), new Float32Array(N), new Float32Array(N)], dp: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    tile: new Uint8Array(TW * TH), act: new Uint8Array(TW * TH),\n    c: [0, 0, 0], col: [new Float32Array(3), new Float32Array(3)], base: [0, 0, 0],\n    lastKind: 0, lastX: 32, lastY: 64,\n  };\n  freshBase(S);\n  params.s = S;\n}\n\n// Smooth value noise on a grid of cells LEDs, in -1..1, for a w x h field.\nfunction noise(cells, w, h) {\n  const gw = Math.ceil(w / cells) + 2, gh = Math.ceil(h / cells) + 2, g = new Float32Array(gw * gh), out = new Float32Array(w * h);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  for (let y = 0; y \u003c h; y++)\n    for (let x = 0; x \u003c w; x++) {\n      const u = x / cells, v = y / cells, i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n      const su = fu * fu * (3 - 2 * fu), sv = fv * fv * (3 - 2 * fv);\n      const a = g[j * gw + i], b = g[j * gw + i + 1], c = g[(j + 1) * gw + i], d = g[(j + 1) * gw + i + 1];\n      out[y * w + x] = (a + (b - a) * su) * (1 - sv) + (c + (d - c) * su) * sv;\n    }\n  return out;\n}\n\n// A fresh blooming base: clear, and unevenly wet, which is what feathers\n// the blooms. The gel's mobility varies up to sixfold over 6 to 12 LEDs,\n// which bends the fronts into lobes; the pigment's more over 2 to 5 LEDs,\n// which mottles the colour inside a bloom.\nfunction freshBase(S) {\n  const a = noise(3, CW, CH), b = noise(1.5, CW, CH), m = new Float32Array(CN);\n  let mm = 0;\n  for (let i = 0; i \u003c CN; i++) mm = max(mm, (m[i] = exp(0.6 * a[i] + 0.3 * b[i])));\n  S.gmob = mm;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x;\n      S.Gx[i] = x \u003c CW - 1 ? 0.5 * (m[i] + m[i + 1]) : 0;\n      S.Gy[i] = y \u003c CH - 1 ? 0.5 * (m[i] + m[i + CW]) : 0;\n    }\n  const c = noise(2.5, W, H), d = noise(1.2, W, H), f = new Float32Array(N), e = noise(4, W, H);\n  // And how thick the gel must be before pigment can enter, which varies\n  // fourfold or more from LED to LED: that frays the edges.\n  for (let i = 0; i \u003c N; i++) S.wt[i] = WET * exp(1.2 * d[i] + 0.8 * e[i]);\n  for (let i = 0; i \u003c N; i++) f[i] = exp(0.9 * c[i] + 0.5 * d[i]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      S.Mx[i] = x \u003c W - 1 ? 0.5 * (f[i] + f[i + 1]) : 0;\n      S.My[i] = y \u003c H - 1 ? 0.5 * (f[i] + f[i + W]) : 0;\n    }\n  S.g.fill(0);\n  S.w.fill(0);\n  for (let k = 0; k \u003c NK; k++) S.p[k].fill(0);\n  S.set = 0;\n}\n\n// A drop of gel lands: a small dome of gel carrying one pigment.\n// Its outline is a little wavy, four to seven soft lobes.\nfunction drop(S, x0, y0, kind) {\n  const r = 6 + 3 * S.bloom, h0 = 0.5 + 0.25 * S.bloom, R = r * 1.25 + 1;\n  const lobes = 4 + floor(random() * 4), ph = random() * 2 * PI, amp = 0.1 + 0.1 * random();\n  const shape = (dx, dy) => (dx * dx + dy * dy) / (r * r * (1 + amp * sin(lobes * Math.atan2(dy, dx) + ph)) ** 2);\n  for (let y = max(0, floor((y0 - R) / 2)); y \u003c= min(CH - 1, (y0 + R) / 2); y++)\n    for (let x = max(0, floor((x0 - R) / 2)); x \u003c= min(CW - 1, (x0 + R) / 2); x++) {\n      const d2 = shape(2 * x + 1 - x0, 2 * y + 1 - y0);\n      if (d2 \u003c 1) S.g[y * CW + x] += h0 * (1 - d2);\n    }\n  const P = S.p[kind];\n  for (let y = max(0, floor(y0 - R)); y \u003c= min(H - 1, y0 + R); y++)\n    for (let x = max(0, floor(x0 - R)); x \u003c= min(W - 1, x0 + R); x++) {\n      const d2 = shape(x + 0.5 - x0, y + 0.5 - y0);\n      if (d2 \u003c 1) P[y * W + x] += 0.8 * h0 * (1 - d2);\n    }\n  S.lastKind = kind;\n  S.lastX = x0;\n  S.lastY = y0;\n}\n\n// The next drop: near the last one as often as not, so blooms meet, and\n// never the same pigment twice running.\nfunction nextDrop(S) {\n  let x, y;\n  if (random() \u003c 0.5) {\n    const a = random() * 2 * PI, d = 14 + random() * 14;\n    x = S.lastX + d * cos(a);\n    y = S.lastY + d * sin(a) * 1.4;\n  } else {\n    x = 8 + random() * (W - 16);\n    y = 8 + random() * (H - 16);\n  }\n  x = cl(x, 6, W - 6);\n  y = cl(y, 6, H - 6);\n  // After a tint, white one time in three; never white twice.\n  const kind = S.lastKind === 2 ? (random() \u003c 0.5 ? 0 : 1) : random() \u003c 0.67 ? 1 - S.lastKind : 2;\n  drop(S, x, y, kind);\n}\n\n// One explicit step of the gel on its coarse grid: finite volumes, the flux\n// across a face D w (w_j - w_i) / h^2 with w the mean of the two cells.\nfunction gelStep(S, dt, D) {\n  const { g, dg, Gx, Gy } = S, k = (D * dt) / 4;\n  dg.fill(0);\n  for (let y = Math.ceil(S.set / 2); y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x, gi = g[i];\n      if (x \u003c CW - 1) {\n        const gj = g[i + 1];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gx[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + 1] -= q;\n        }\n      }\n      if (y \u003c CH - 1) {\n        const gj = g[i + CW];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gy[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + CW] -= q;\n        }\n      }\n    }\n  const soak = exp(-SOAK * dt), dry = 0.004 * dt;\n  for (let i = 0; i \u003c CN; i++) {\n    const v = (g[i] + dg[i]) * soak - dry;\n    g[i] = v > 0 ? v : 0;\n  }\n}\n\n// The gel's thickness on the LEDs, bilinear from the coarse grid, and which\n// tiles have any.\nfunction upsample(S) {\n  const { g, w, tile } = S;\n  tile.fill(0);\n  for (let y = 0; y \u003c H; y++) {\n    const v = cl(y / 2 - 0.25, 0, CH - 1.0001), j = v | 0, fy = v - j;\n    for (let x = 0; x \u003c W; x++) {\n      const u = cl(x / 2 - 0.25, 0, CW - 1.0001), i = u | 0, fx = u - i, q = j * CW + i;\n      const val = (g[q] * (1 - fx) + g[q + 1] * fx) * (1 - fy) + (g[q + CW] * (1 - fx) + g[q + CW + 1] * fx) * fy;\n      w[y * W + x] = val;\n      if (val > WET) tile[((y / TS) | 0) * TW + ((x / TS) | 0)] = 1;\n    }\n  }\n}\n\n// One explicit step of the pigment over the wet tiles. In the body of a\n// bloom it goes with the gel, at the gel's mean velocity -D grad w; where the\n// gel thins toward its front it rides the surface, up to beta = 3.5 + 5.5 Rim\n// times as fast, so it runs ahead to the front and piles up there, since it\n// can only go where there is gel. Within the gel it spreads a little.\nfunction pigmentStep(S, dt, D, beta) {\n  const { w, wt, Mx, My, p, dp, tile, act } = S;\n  act.fill(0);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0; tx \u003c TW; tx++)\n      if (tile[ty * TW + tx])\n        for (let j = max(0, ty - 1); j \u003c= min(TH - 1, ty + 1); j++) for (let i = max(0, tx - 1); i \u003c= min(TW - 1, tx + 1); i++) act[j * TW + i] = 1;\n  const p0 = p[0], p1 = p[1], p2 = p[2], d0 = dp[0], d1 = dp[1], d2 = dp[2];\n  const kap = 1.2 * dt, edge = 0.03 + 0.05 * S.rim;\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++) {\n      const r = y * W;\n      d0.fill(0, r + x0, r + x0 + TS);\n      d1.fill(0, r + x0, r + x0 + TS);\n      d2.fill(0, r + x0, r + x0 + TS);\n    }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = max(y0, Math.ceil(S.set)); y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x, wi = w[i];\n        for (let f = 0; f \u003c 2; f++) {\n          if (f === 0 ? x === W - 1 : y === H - 1) continue;\n          const j = f === 0 ? i + 1 : i + W, wj = w[j];\n          if (wi \u003c WET && wj \u003c WET) continue;\n          if (p0[i] + p1[i] + p2[i] + p0[j] + p1[j] + p2[j] \u003c 1e-4) continue;\n          const m = f === 0 ? Mx[i] : My[i];\n          // Upwind: the pigment of the LED the gel leaves. The surface's lead\n          // fades in below a gel thickness of about edge.\n          const wf = 0.5 * (wi + wj);\n          let v = -dt * D * (1 + (beta - 1) * (edge / (wf + edge))) * m * (wj - wi);\n          v = v > 0.2 ? 0.2 : v \u003c -0.2 ? -0.2 : v;\n          let a0 = 0, a1 = 0, a2 = 0;\n          if (v > 0 && wj > wt[j]) (a0 = v * p0[i]), (a1 = v * p1[i]), (a2 = v * p2[i]);\n          else if (v \u003c 0 && wi > wt[i]) (a0 = v * p0[j]), (a1 = v * p1[j]), (a2 = v * p2[j]);\n          if (wi > wt[i] && wj > wt[j]) {\n            const k = kap * m \u003c 0.04 ? kap * m : 0.04;\n            a0 -= k * (p0[j] - p0[i]);\n            a1 -= k * (p1[j] - p1[i]);\n            a2 -= k * (p2[j] - p2[i]);\n          }\n          d0[i] -= a0;\n          d0[j] += a0;\n          d1[i] -= a1;\n          d1[j] += a1;\n          d2[i] -= a2;\n          d2[j] += a2;\n        }\n      }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x;\n        p0[i] += d0[i];\n        p1[i] += d1[i];\n        p2[i] += d2[i];\n      }\n  }\n}\n\nfunction advance(S, dt) {\n  const t0 = S.t % ROUND;\n  S.t += dt;\n  const t1 = S.t % ROUND;\n  const D = 150 + 150 * S.bloom, beta = 3.5 + 5.5 * S.rim;\n  if (t1 \u003c t0) {\n    freshBase(S);\n    S.next = 0.2;\n  }\n  // Drops while painting.\n  if (t1 \u003c PAINT) {\n    S.next -= dt;\n    if (S.next \u003c= 0) {\n      S.next = 0.35 + 0.45 * random();\n      nextDrop(S);\n    }\n  }\n  // The cure lamp passes down the panel and sets each row it has passed: the\n  // gel and its pigment stop moving there.\n  S.lamp = t1 >= CURE && t1 \u003c HOLD + 0.2 ? ((t1 - CURE) / (HOLD - CURE)) * (H + 20) - 10 : -99;\n  if (S.lamp > -99) S.set = max(S.set, cl(S.lamp, 0, H));\n  // The wipe pushes the colour down ahead of it and lifts it off.\n  if (t1 >= WIPE) {\n    const row = ((t1 - WIPE) / (ROUND - WIPE)) * (H + 24) - 12;\n    for (let y = H - 1; y >= 0; y--) {\n      const f = cl((row - y) / 10, 0, 1);\n      if (f \u003c= 0) continue;\n      for (let k = 0; k \u003c NK; k++) {\n        const P = S.p[k];\n        for (let x = 0; x \u003c W; x++) {\n          const i = y * W + x, v = P[i] * f * 0.3;\n          P[i] -= v + 0.25 * f * P[i];\n          if (y \u003c H - 1) P[i + W] += v;\n        }\n      }\n    }\n  }\n  // The gel in explicit steps short enough to hold steady, at most twelve\n  // a frame: for the moment a fresh drop is thickest, nail time runs a\n  // little slow rather than the sums running away.\n  let gm = 0;\n  for (let i = 0; i \u003c CN; i++) if (S.g[i] > gm) gm = S.g[i];\n  if (gm \u003c= 0) {\n    S.w.fill(0);\n    return;\n  }\n  const lim = 0.8 / (D * S.gmob * gm), n = min(12, Math.ceil(dt / lim)), h = min(dt / n, lim);\n  for (let s = 0; s \u003c n; s++) gelStep(S, h, D);\n  upsample(S);\n  // The pigment in one or two steps. No face passes on more than 0.24 of a\n  // LED's pigment in one, so even a LED emptying through all four faces\n  // keeps a little and none goes below zero.\n  const m = dt > 0.04 ? 2 : 1;\n  for (let s = 0; s \u003c m; s++) pigmentStep(S, (n * h) / m, D, beta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bloom = cl(k[2], 0, 1);\n  S.rim = cl(k[3], 0, 1);\n  if (S.first) {\n    // Open with three drops already landing, spread down the panel.\n    for (let n = 0; n \u003c 3; n++) drop(S, 18 + 28 * random(), 22 + 40 * n + 12 * random(), n);\n    S.first = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Once the lamp has started, a new drop needs a fresh base first.\n    if (S.t % ROUND >= CURE) {\n      S.t = (floor(S.t / ROUND) + 1) * ROUND;\n      freshBase(S);\n      S.next = 0.6;\n    }\n    nextDrop(S);\n  }\n  advance(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { w, p, col, base, c } = S;\n  // Colours: a milky base, two tints round the hue, white. Each tint is a\n  // pigment that takes light away as exp(-a p) (Beer-Lambert), its strength\n  // a set so a full drop shows the tint.\n  // From orange to lime a pale base reads khaki, so there it is paler still.\n  const h = S.hue + 0.66, hb = h + 0.04 - floor(h + 0.04), warm = sm(0.02, 0.07, hb) * (1 - sm(0.3, 0.38, hb));\n  hsv(h + 0.04, 0.2 - 0.08 * warm, 0.85 + 0.08 * warm, base);\n  // The tints: a deep one on the hue and a lighter one 0.1 round from it.\n  // Round orange and yellow both are lifted to near full, so a thick rim\n  // deepens toward red or orange instead of going brown or olive.\n  for (let k = 0; k \u003c 2; k++) {\n    const ht = h + 0.1 * k, hk = ht - floor(ht), wk = sm(0.0, 0.05, hk) * (1 - sm(0.28, 0.36, hk));\n    hsv(ht, k ? 0.7 : 0.88, (k ? 0.76 : 0.58) + (k ? 0.18 : 0.34) * wk, c);\n    for (let ch = 0; ch \u003c 3; ch++) col[k][ch] = max(0, -Math.log(max(c[ch], 0.03) / base[ch]) / 0.15);\n  }\n  const p0 = p[0], p1 = p[1], p2 = p[2], lb = S.lamp > -99 ? 1 : 0, sh = ((S.t % ROUND) - CURE) * 40 - 30;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, a = p0[i], b = p1[i], wh = 1 - exp(-8 * p2[i]);\n      let r = base[0] * exp(-col[0][0] * a - col[1][0] * b);\n      let g = base[1] * exp(-col[0][1] * a - col[1][1] * b);\n      let bl = base[2] * exp(-col[0][2] * a - col[1][2] * b);\n      r += (0.97 - r) * wh;\n      g += (0.97 - g) * wh;\n      bl += (0.97 - bl) * wh;\n      // Wet gel shines: a highlight from the slope of its surface.\n      const wi = w[i];\n      if (wi > 0) {\n        const gx = (x \u003c W - 1 ? w[i + 1] : wi) - (x > 0 ? w[i - 1] : wi), gy = (y \u003c H - 1 ? w[i + W] : wi) - (y > 0 ? w[i - W] : wi);\n        const nx = -gx * 14, ny = -gy * 14, nn = 1 / sqrt(1 + nx * nx + ny * ny);\n        const sp = (nx * -0.3 + ny * -0.45 + 0.84) * nn, s4 = sp * sp, s8 = s4 * s4, s16 = s8 * s8;\n        const gl = 0.45 * s16 * min(1, wi * 12);\n        r += gl;\n        g += gl;\n        bl += gl;\n      }\n      // The cure lamp's band, and the set coat's sheen behind it.\n      if (lb > 0) {\n        const q = (y - S.lamp) / 4, b2 = exp(-q * q) * lb;\n        r += 0.42 * b2;\n        g += 0.36 * b2;\n        bl += 0.5 * b2;\n      }\n      if (y \u003c S.set) {\n        const q = (x * 0.5 + y - sh) / 9, b3 = 0.1 * exp(-q * q);\n        r += b3;\n        g += b3;\n        bl += b3;\n      }\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Bloom","min":0,"max":1,"about":"How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other."},{"name":"Rim","min":0,"max":1,"about":"How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring."}],"start":[0,2,0,0.06],"measures":{"motion":0.0712,"detail":0.0141,"edges":0.1484,"complexity":1.601,"coverage":1,"colour":0.1697,"drift":0.0438},"knobResponse":[0.2098,0.0709,0.1051,0.0332]},{"slug":"bokeh","title":"Bokeh","family":"light","round":1,"note":"초점이 나간 밤거리 불빛이에요. 여섯 모 진 빛 원반이 피었다 흘러가며 겹친 자리만 부드럽게 밝아져요.","idea":"A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.","buttons":"K1 tap racks the focus through, so every disc closes to a point and opens out again.","code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","layer":{"id":"layer-bokeh","type":"code","name":"bokeh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them."},{"name":"Pace","min":0.2,"max":4,"about":"How fast the lights drift past and how quickly each one blooms and goes out."},{"name":"Size","min":-1,"max":1,"about":"How far out of focus they are, from small bright points to wide soft discs."},{"name":"Lights","min":40,"max":90,"about":"How many are lit at once; big discs come in fewer."}],"start":[0,2,0,40],"measures":{"motion":0.9868,"detail":0.0384,"edges":0.1836,"complexity":1.7001,"coverage":0.5358,"colour":0.318,"drift":0.3822},"knobResponse":[0.2498,0.2782,0.2491,0.2757]},{"slug":"borromean-rings","title":"Borromean Rings","family":"topology","round":33,"note":"테이트의 보로메오 고리를 황금 직사각형 세 장으로 만들고 세로로 2.3배 늘여 세웠어요. 하늘색 고리가 키 크게 서고 분홍 고리가 그것을 가로지르며 연두 고리가 허리를 둘러 20초에 한 바퀴 돌고, 앞 관이 뒤 관을 지나는 자리마다 LED 한 줄이 어두워져 위아래가 읽혀요. K3 은 직사각형의 긴 변 비를 1.618 에서 2.4 까지 바꾸고, K1 을 누르면 분홍 고리가 사라진 동안 연두 고리가 긴 고리 아래 끝으로 빠져나갔다 돌아와요.","idea":"Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.","buttons":"K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.","code":"// ===== Patternflow pattern =====\n// Title:   Borromean Rings\n// Family:  topology\n// Idea:    Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Borromean rings (Peter Guthrie Tait, 1876), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown.\n// Knob 2: Speed. How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower.\n// Knob 3: Aspect. Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side.\n// Knob 4: Tube. How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching.\n// Buttons: K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The model, short side a = 1. Each ring lies in one coordinate plane:\n//   R1 in x = 0, half sides z1 = r and y1 = SIG,\n//   R2 in z = 0, half sides x2 = 1 and y2 = SIG r (the tall one),\n//   R3 in y = 0, half sides x3 = r and z3 = 1 (the flat one round the waist).\n// Unstretched (SIG = 1, r = phi) these are Tait's three golden rectangles.\n// The link only asks y1 \u003c y2, x2 \u003c x3 and z3 \u003c z1: along each axis one ring\n// passes through the next. Stretching along y keeps all three, so the model\n// can be drawn 2.3 times as tall, which the 64 x 128 panel needs: unstretched\n// it fits a cube and would light a band about 50 rows high.\nconst SIG = 2.3;\n// Corners rounded to 0.4 of the short side, the camera 12 units away.\nconst RC = 0.4, CAM = 12;\n// Light from the upper left and in front, and the half vector for the shine.\nconst LX = -0.48, LY = -0.62, LZ = -0.62, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst lx = LX * LN, ly = LY * LN, lz = LZ * LN;\nconst HX = lx, HY = ly, HZ = lz - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\nconst hx = HX * HN, hy = HY * HN, hz = HZ * HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points round a rounded rectangle with half sides A (along u) and B (along\n// v), about one every `step`, as (u, v) pairs. Four sides and four arcs.\nfunction loop(A, B, c, step, out) {\n  let n = 0;\n  const side = (u0, v0, u1, v1) => {\n    const len = sqrt((u1 - u0) ** 2 + (v1 - v0) ** 2), k = max(1, ceil(len / step));\n    for (let i = 0; i \u003c k; i++) (out[n++] = u0 + ((u1 - u0) * i) / k), (out[n++] = v0 + ((v1 - v0) * i) / k);\n  };\n  const arc = (cu, cv, a0) => {\n    const k = max(2, ceil((c * PI) / 2 / step));\n    for (let i = 0; i \u003c k; i++) {\n      const a = a0 + ((PI / 2) * i) / k;\n      out[n++] = cu + c * cos(a);\n      out[n++] = cv + c * sin(a);\n    }\n  };\n  const a = A - c, b = B - c;\n  side(A, -b, A, b);\n  arc(a, b, 0);\n  side(a, B, -a, B);\n  arc(-a, b, PI / 2);\n  side(-A, b, -A, -b);\n  arc(-a, -b, PI);\n  side(-a, -B, a, -B);\n  arc(a, -b, 1.5 * PI);\n  return n >> 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    turn: 0.6, nod: 0, hue: 0, speed: 2, r: 1.618, tube: 0.06, cut: -1,\n    z: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    c: [new Float32Array(N * 3), new Float32Array(N * 3), new Float32Array(N * 3)],\n    fid: new Int8Array(N), fz: new Float32Array(N), uv: new Float32Array(8192), pts: new Float32Array(16384), col: new Float32Array(9),\n  };\n}\n\n// K1 tap, seconds: R1 fades 0 to 0.8, the other two slide apart to 3.0,\n// hold to 4.4, slide back to 6.6, R1 returns by 7.4.\nconst T_END = 7.4;\nfunction cutState(t) {\n  if (t \u003c 0) return [1, 0, 0];\n  const fade = t \u003c 0.8 ? 1 - sm(t / 0.8) : t \u003c 6.6 ? 0 : sm((t - 6.6) / 0.8);\n  const sep = t \u003c 0.8 ? 0 : t \u003c 3 ? sm((t - 0.8) / 2.2) : t \u003c 4.4 ? 1 : t \u003c 6.6 ? 1 - sm((t - 4.4) / 2.2) : 0;\n  return [fade, sep, sm(t / 1.2) * (1 - sm((t - 6.2) / 1.2))];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1.618, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.r = cl(k[2], 1.618, 2.4);\n  P.tube = cl(k[3], 0, 1);\n  P.turn += d * P.speed * 0.157;\n  P.nod += d * P.speed * 0.116;\n  if (P.cut >= 0) {\n    P.cut += d;\n    if (P.cut > T_END) P.cut = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.cut \u003c 0) P.cut = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const r = P.r, ZB = P.z, CB = P.c, uv = P.uv, pts = P.pts, col = P.col, fid = P.fid, fz = P.fz;\n  // The room where a ring passes through the next: one short side, or r - 1\n  // of it where the long side is shorter than two.\n  const room = min(1, r - 1), tr = (0.29 + 0.16 * P.tube) * room;\n  // LEDs to a unit: the flat ring's corners swing out to rxz from the axis,\n  // and the panel is 64 across; the tall ring is SIG r high each side of the\n  // middle, and the panel is 128 tall.\n  const rxz = sqrt((r - RC) ** 2 + (1 - RC) ** 2) + RC + tr;\n  const S = min(27 / rxz, 55 / (SIG * r + tr));\n  const [fade, sep, low] = cutState(P.cut);\n  // With R1 gone the flat ring drops down the tall ring until it\n  // clears the bottom end with 0.6 of a unit of air between the tubes, and\n  // the tall ring rises a little to meet it.\n  const drop = sep * (SIG * r + 2 * tr + 0.6);\n  const up2 = drop * 0.2, down3 = drop * 0.8;\n\n  // The rings turn round the tall ring's axis and the view looks down on them\n  // from 14 to 30 degrees, so the flat ring always shows its hole. While the\n  // rings come apart the eye sinks to 7 degrees below the middle, near the\n  // height the flat ring drops to, so the air between it and the bottom of\n  // the tall ring shows.\n  const th = P.turn, ct = cos(th), st = sin(th);\n  const el = (0.38 + 0.14 * sin(P.nod)) * (1 - low) - 0.12 * low, ce = cos(el), se = sin(el);\n\n  for (let i = 0; i \u003c 9; i += 3) hsv(P.hue + 0.58 + (i / 9), 0.8, 1, col, i);\n  // Round orange and yellow the colour goes brown in the shade, so there it\n  // keeps less saturation and more light.\n  const warm = [0, 0, 0];\n  for (let i = 0; i \u003c 3; i++) {\n    let h = P.hue + 0.58 + i / 3;\n    h -= floor(h);\n    let dh = h - 0.12;\n    if (dh > 0.5) dh -= 1;\n    warm[i] = sm(1 - abs(dh) / 0.17);\n    for (let c = 0; c \u003c 3; c++) col[i * 3 + c] += (1 - col[i * 3 + c]) * 0.45 * warm[i];\n  }\n\n  // Ring order in the buffers: 0 the tall ring (R2), 1 the one across it (R1), 2 the flat one (R3).\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const zb = ZB[ring], cb = CB[ring];\n    zb.fill(1e9);\n    let A, B;\n    if (ring === 0) (A = 1), (B = SIG * r);\n    else if (ring === 1) (A = r), (B = SIG);\n    else (A = r), (B = 1);\n    const n = loop(A, B, RC * min(A, B), tr * 0.3, uv);\n    const cr = col[ring * 3], cg = col[ring * 3 + 1], cbl = col[ring * 3 + 2], wl = warm[ring];\n    // Every point on screen first, so each can see its neighbours for the\n    // tube's direction.\n    for (let i = 0; i \u003c n; i++) {\n      const u = uv[i * 2], v = uv[i * 2 + 1];\n      let X, Y, Z;\n      if (ring === 0) (X = u), (Y = v + up2), (Z = 0);\n      else if (ring === 1) (X = 0), (Y = v), (Z = u);\n      else (X = u), (Y = -down3), (Z = v);\n      // Turn about y, then tip the view down by el.\n      const xr = X * ct + Z * st, zr = -X * st + Z * ct;\n      const up = Y * ce + zr * se, dep = zr * ce - Y * se;\n      const sc = (S * CAM) / (CAM + dep);\n      pts[i * 4] = 31.5 + xr * sc;\n      pts[i * 4 + 1] = 63.5 - up * sc;\n      pts[i * 4 + 2] = dep * S;\n      pts[i * 4 + 3] = tr * sc;\n    }\n    for (let i = 0; i \u003c n; i++) {\n      const o = i * 4, sx = pts[o], sy = pts[o + 1], dz = pts[o + 2], rp = pts[o + 3];\n      const a = ((i + 1) % n) * 4, b = ((i + n - 1) % n) * 4;\n      let tx = pts[a] - pts[b], ty = pts[a + 1] - pts[b + 1], tz = pts[a + 2] - pts[b + 2];\n      const tl = 1 / (sqrt(tx * tx + ty * ty + tz * tz) + 1e-9);\n      (tx *= tl), (ty *= tl), (tz *= tl);\n      // Nearer is brighter: a quarter darker at the back of the rings.\n      const fog = 1 - 0.25 * cl((dz / S + 2) / 4, 0, 1);\n      const x0 = max(0, floor(sx - rp)), x1 = min(W - 1, ceil(sx + rp)), y0 = max(0, floor(sy - rp)), y1 = min(H - 1, ceil(sy + rp));\n      const r2 = rp * rp;\n      for (let y = y0; y \u003c= y1; y++) {\n        const ny = y - sy, ny2 = ny * ny;\n        for (let x = x0; x \u003c= x1; x++) {\n          const nx = x - sx, d2 = nx * nx + ny2;\n          if (d2 >= r2) continue;\n          const nzp = sqrt(r2 - d2), z = dz - nzp, p = y * W + x;\n          if (z >= zb[p]) continue;\n          zb[p] = z;\n          // The tube is drawn as a chain of spheres, but the normal is the\n          // tube's: the sphere's, less its part along the tube.\n          const dt = nx * tx + ny * ty - nzp * tz;\n          let Nx = nx - dt * tx, Ny = ny - dt * ty, Nz = -nzp - dt * tz;\n          const nl = 1 / (sqrt(Nx * Nx + Ny * Ny + Nz * Nz) + 1e-9);\n          (Nx *= nl), (Ny *= nl), (Nz *= nl);\n          const dif = max(0, Nx * lx + Ny * ly + Nz * lz);\n          const hv = max(0, Nx * hx + Ny * hy + Nz * hz), sp = hv ** 24 * 0.85;\n          const lit = (0.2 + 0.3 * wl + 0.8 * dif) * fog;\n          cb[p * 3] = cr * lit + sp;\n          cb[p * 3 + 1] = cg * lit + sp;\n          cb[p * 3 + 2] = cbl * lit + sp;\n        }\n      }\n    }\n  }\n\n  // The nearest solid ring at each LED, for the gaps.\n  const al = [1, fade, 1];\n  for (let p = 0; p \u003c N; p++) {\n    let best = -1, bz = 1e9;\n    for (let ring = 0; ring \u003c 3; ring++) if (al[ring] > 0.5 && ZB[ring][p] \u003c bz) (bz = ZB[ring][p]), (best = ring);\n    fid[p] = best;\n    fz[p] = bz;\n  }\n  const gapDepth = tr * S * 1.1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Layers front to back: R1 fades by its alpha.\n      const z0 = ZB[0][p], z1 = ZB[1][p], z2 = ZB[2][p];\n      let R = 0, G = 0, Bc = 0;\n      if (z0 \u003c 1e8 || z1 \u003c 1e8 || z2 \u003c 1e8) {\n        const ord = z0 \u003c= z1 ? (z1 \u003c= z2 ? [0, 1, 2] : z0 \u003c= z2 ? [0, 2, 1] : [2, 0, 1]) : z0 \u003c= z2 ? [1, 0, 2] : z1 \u003c= z2 ? [1, 2, 0] : [2, 1, 0];\n        let keep = 1;\n        for (let j = 0; j \u003c 3 && keep > 0.001; j++) {\n          const ring = ord[j];\n          if (ZB[ring][p] > 1e8) break;\n          const a = al[ring] * keep, cb = CB[ring];\n          R += cb[p * 3] * a;\n          G += cb[p * 3 + 1] * a;\n          Bc += cb[p * 3 + 2] * a;\n          keep -= a;\n        }\n        // A dark LED where a nearer tube of another ring passes over this\n        // one, so the crossing reads as over and under.\n        const me = fid[p];\n        if (me >= 0) {\n          const zme = fz[p];\n          let dark = 0;\n          for (let dy = -1; dy \u003c= 1; dy++) {\n            const yy = y + dy;\n            if (yy \u003c 0 || yy >= H) continue;\n            for (let dx = -1; dx \u003c= 1; dx++) {\n              const xx = x + dx;\n              if (xx \u003c 0 || xx >= W || (dx === 0 && dy === 0)) continue;\n              const q = yy * W + xx, o = fid[q];\n              if (o >= 0 && o !== me && fz[q] \u003c zme - gapDepth) dark = 1;\n            }\n          }\n          if (dark) (R *= 0.12), (G *= 0.12), (Bc *= 0.12);\n        }\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(Bc * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-borromean-rings","type":"code","name":"borromean-rings","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Borromean Rings\n// Family:  topology\n// Idea:    Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Borromean rings (Peter Guthrie Tait, 1876), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown.\n// Knob 2: Speed. How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower.\n// Knob 3: Aspect. Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side.\n// Knob 4: Tube. How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching.\n// Buttons: K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The model, short side a = 1. Each ring lies in one coordinate plane:\n//   R1 in x = 0, half sides z1 = r and y1 = SIG,\n//   R2 in z = 0, half sides x2 = 1 and y2 = SIG r (the tall one),\n//   R3 in y = 0, half sides x3 = r and z3 = 1 (the flat one round the waist).\n// Unstretched (SIG = 1, r = phi) these are Tait's three golden rectangles.\n// The link only asks y1 \u003c y2, x2 \u003c x3 and z3 \u003c z1: along each axis one ring\n// passes through the next. Stretching along y keeps all three, so the model\n// can be drawn 2.3 times as tall, which the 64 x 128 panel needs: unstretched\n// it fits a cube and would light a band about 50 rows high.\nconst SIG = 2.3;\n// Corners rounded to 0.4 of the short side, the camera 12 units away.\nconst RC = 0.4, CAM = 12;\n// Light from the upper left and in front, and the half vector for the shine.\nconst LX = -0.48, LY = -0.62, LZ = -0.62, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst lx = LX * LN, ly = LY * LN, lz = LZ * LN;\nconst HX = lx, HY = ly, HZ = lz - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\nconst hx = HX * HN, hy = HY * HN, hz = HZ * HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points round a rounded rectangle with half sides A (along u) and B (along\n// v), about one every `step`, as (u, v) pairs. Four sides and four arcs.\nfunction loop(A, B, c, step, out) {\n  let n = 0;\n  const side = (u0, v0, u1, v1) => {\n    const len = sqrt((u1 - u0) ** 2 + (v1 - v0) ** 2), k = max(1, ceil(len / step));\n    for (let i = 0; i \u003c k; i++) (out[n++] = u0 + ((u1 - u0) * i) / k), (out[n++] = v0 + ((v1 - v0) * i) / k);\n  };\n  const arc = (cu, cv, a0) => {\n    const k = max(2, ceil((c * PI) / 2 / step));\n    for (let i = 0; i \u003c k; i++) {\n      const a = a0 + ((PI / 2) * i) / k;\n      out[n++] = cu + c * cos(a);\n      out[n++] = cv + c * sin(a);\n    }\n  };\n  const a = A - c, b = B - c;\n  side(A, -b, A, b);\n  arc(a, b, 0);\n  side(a, B, -a, B);\n  arc(-a, b, PI / 2);\n  side(-A, b, -A, -b);\n  arc(-a, -b, PI);\n  side(-a, -B, a, -B);\n  arc(a, -b, 1.5 * PI);\n  return n >> 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    turn: 0.6, nod: 0, hue: 0, speed: 2, r: 1.618, tube: 0.06, cut: -1,\n    z: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    c: [new Float32Array(N * 3), new Float32Array(N * 3), new Float32Array(N * 3)],\n    fid: new Int8Array(N), fz: new Float32Array(N), uv: new Float32Array(8192), pts: new Float32Array(16384), col: new Float32Array(9),\n  };\n}\n\n// K1 tap, seconds: R1 fades 0 to 0.8, the other two slide apart to 3.0,\n// hold to 4.4, slide back to 6.6, R1 returns by 7.4.\nconst T_END = 7.4;\nfunction cutState(t) {\n  if (t \u003c 0) return [1, 0, 0];\n  const fade = t \u003c 0.8 ? 1 - sm(t / 0.8) : t \u003c 6.6 ? 0 : sm((t - 6.6) / 0.8);\n  const sep = t \u003c 0.8 ? 0 : t \u003c 3 ? sm((t - 0.8) / 2.2) : t \u003c 4.4 ? 1 : t \u003c 6.6 ? 1 - sm((t - 4.4) / 2.2) : 0;\n  return [fade, sep, sm(t / 1.2) * (1 - sm((t - 6.2) / 1.2))];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1.618, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.r = cl(k[2], 1.618, 2.4);\n  P.tube = cl(k[3], 0, 1);\n  P.turn += d * P.speed * 0.157;\n  P.nod += d * P.speed * 0.116;\n  if (P.cut >= 0) {\n    P.cut += d;\n    if (P.cut > T_END) P.cut = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.cut \u003c 0) P.cut = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const r = P.r, ZB = P.z, CB = P.c, uv = P.uv, pts = P.pts, col = P.col, fid = P.fid, fz = P.fz;\n  // The room where a ring passes through the next: one short side, or r - 1\n  // of it where the long side is shorter than two.\n  const room = min(1, r - 1), tr = (0.29 + 0.16 * P.tube) * room;\n  // LEDs to a unit: the flat ring's corners swing out to rxz from the axis,\n  // and the panel is 64 across; the tall ring is SIG r high each side of the\n  // middle, and the panel is 128 tall.\n  const rxz = sqrt((r - RC) ** 2 + (1 - RC) ** 2) + RC + tr;\n  const S = min(27 / rxz, 55 / (SIG * r + tr));\n  const [fade, sep, low] = cutState(P.cut);\n  // With R1 gone the flat ring drops down the tall ring until it\n  // clears the bottom end with 0.6 of a unit of air between the tubes, and\n  // the tall ring rises a little to meet it.\n  const drop = sep * (SIG * r + 2 * tr + 0.6);\n  const up2 = drop * 0.2, down3 = drop * 0.8;\n\n  // The rings turn round the tall ring's axis and the view looks down on them\n  // from 14 to 30 degrees, so the flat ring always shows its hole. While the\n  // rings come apart the eye sinks to 7 degrees below the middle, near the\n  // height the flat ring drops to, so the air between it and the bottom of\n  // the tall ring shows.\n  const th = P.turn, ct = cos(th), st = sin(th);\n  const el = (0.38 + 0.14 * sin(P.nod)) * (1 - low) - 0.12 * low, ce = cos(el), se = sin(el);\n\n  for (let i = 0; i \u003c 9; i += 3) hsv(P.hue + 0.58 + (i / 9), 0.8, 1, col, i);\n  // Round orange and yellow the colour goes brown in the shade, so there it\n  // keeps less saturation and more light.\n  const warm = [0, 0, 0];\n  for (let i = 0; i \u003c 3; i++) {\n    let h = P.hue + 0.58 + i / 3;\n    h -= floor(h);\n    let dh = h - 0.12;\n    if (dh > 0.5) dh -= 1;\n    warm[i] = sm(1 - abs(dh) / 0.17);\n    for (let c = 0; c \u003c 3; c++) col[i * 3 + c] += (1 - col[i * 3 + c]) * 0.45 * warm[i];\n  }\n\n  // Ring order in the buffers: 0 the tall ring (R2), 1 the one across it (R1), 2 the flat one (R3).\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const zb = ZB[ring], cb = CB[ring];\n    zb.fill(1e9);\n    let A, B;\n    if (ring === 0) (A = 1), (B = SIG * r);\n    else if (ring === 1) (A = r), (B = SIG);\n    else (A = r), (B = 1);\n    const n = loop(A, B, RC * min(A, B), tr * 0.3, uv);\n    const cr = col[ring * 3], cg = col[ring * 3 + 1], cbl = col[ring * 3 + 2], wl = warm[ring];\n    // Every point on screen first, so each can see its neighbours for the\n    // tube's direction.\n    for (let i = 0; i \u003c n; i++) {\n      const u = uv[i * 2], v = uv[i * 2 + 1];\n      let X, Y, Z;\n      if (ring === 0) (X = u), (Y = v + up2), (Z = 0);\n      else if (ring === 1) (X = 0), (Y = v), (Z = u);\n      else (X = u), (Y = -down3), (Z = v);\n      // Turn about y, then tip the view down by el.\n      const xr = X * ct + Z * st, zr = -X * st + Z * ct;\n      const up = Y * ce + zr * se, dep = zr * ce - Y * se;\n      const sc = (S * CAM) / (CAM + dep);\n      pts[i * 4] = 31.5 + xr * sc;\n      pts[i * 4 + 1] = 63.5 - up * sc;\n      pts[i * 4 + 2] = dep * S;\n      pts[i * 4 + 3] = tr * sc;\n    }\n    for (let i = 0; i \u003c n; i++) {\n      const o = i * 4, sx = pts[o], sy = pts[o + 1], dz = pts[o + 2], rp = pts[o + 3];\n      const a = ((i + 1) % n) * 4, b = ((i + n - 1) % n) * 4;\n      let tx = pts[a] - pts[b], ty = pts[a + 1] - pts[b + 1], tz = pts[a + 2] - pts[b + 2];\n      const tl = 1 / (sqrt(tx * tx + ty * ty + tz * tz) + 1e-9);\n      (tx *= tl), (ty *= tl), (tz *= tl);\n      // Nearer is brighter: a quarter darker at the back of the rings.\n      const fog = 1 - 0.25 * cl((dz / S + 2) / 4, 0, 1);\n      const x0 = max(0, floor(sx - rp)), x1 = min(W - 1, ceil(sx + rp)), y0 = max(0, floor(sy - rp)), y1 = min(H - 1, ceil(sy + rp));\n      const r2 = rp * rp;\n      for (let y = y0; y \u003c= y1; y++) {\n        const ny = y - sy, ny2 = ny * ny;\n        for (let x = x0; x \u003c= x1; x++) {\n          const nx = x - sx, d2 = nx * nx + ny2;\n          if (d2 >= r2) continue;\n          const nzp = sqrt(r2 - d2), z = dz - nzp, p = y * W + x;\n          if (z >= zb[p]) continue;\n          zb[p] = z;\n          // The tube is drawn as a chain of spheres, but the normal is the\n          // tube's: the sphere's, less its part along the tube.\n          const dt = nx * tx + ny * ty - nzp * tz;\n          let Nx = nx - dt * tx, Ny = ny - dt * ty, Nz = -nzp - dt * tz;\n          const nl = 1 / (sqrt(Nx * Nx + Ny * Ny + Nz * Nz) + 1e-9);\n          (Nx *= nl), (Ny *= nl), (Nz *= nl);\n          const dif = max(0, Nx * lx + Ny * ly + Nz * lz);\n          const hv = max(0, Nx * hx + Ny * hy + Nz * hz), sp = hv ** 24 * 0.85;\n          const lit = (0.2 + 0.3 * wl + 0.8 * dif) * fog;\n          cb[p * 3] = cr * lit + sp;\n          cb[p * 3 + 1] = cg * lit + sp;\n          cb[p * 3 + 2] = cbl * lit + sp;\n        }\n      }\n    }\n  }\n\n  // The nearest solid ring at each LED, for the gaps.\n  const al = [1, fade, 1];\n  for (let p = 0; p \u003c N; p++) {\n    let best = -1, bz = 1e9;\n    for (let ring = 0; ring \u003c 3; ring++) if (al[ring] > 0.5 && ZB[ring][p] \u003c bz) (bz = ZB[ring][p]), (best = ring);\n    fid[p] = best;\n    fz[p] = bz;\n  }\n  const gapDepth = tr * S * 1.1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Layers front to back: R1 fades by its alpha.\n      const z0 = ZB[0][p], z1 = ZB[1][p], z2 = ZB[2][p];\n      let R = 0, G = 0, Bc = 0;\n      if (z0 \u003c 1e8 || z1 \u003c 1e8 || z2 \u003c 1e8) {\n        const ord = z0 \u003c= z1 ? (z1 \u003c= z2 ? [0, 1, 2] : z0 \u003c= z2 ? [0, 2, 1] : [2, 0, 1]) : z0 \u003c= z2 ? [1, 0, 2] : z1 \u003c= z2 ? [1, 2, 0] : [2, 1, 0];\n        let keep = 1;\n        for (let j = 0; j \u003c 3 && keep > 0.001; j++) {\n          const ring = ord[j];\n          if (ZB[ring][p] > 1e8) break;\n          const a = al[ring] * keep, cb = CB[ring];\n          R += cb[p * 3] * a;\n          G += cb[p * 3 + 1] * a;\n          Bc += cb[p * 3 + 2] * a;\n          keep -= a;\n        }\n        // A dark LED where a nearer tube of another ring passes over this\n        // one, so the crossing reads as over and under.\n        const me = fid[p];\n        if (me >= 0) {\n          const zme = fz[p];\n          let dark = 0;\n          for (let dy = -1; dy \u003c= 1; dy++) {\n            const yy = y + dy;\n            if (yy \u003c 0 || yy >= H) continue;\n            for (let dx = -1; dx \u003c= 1; dx++) {\n              const xx = x + dx;\n              if (xx \u003c 0 || xx >= W || (dx === 0 && dy === 0)) continue;\n              const q = yy * W + xx, o = fid[q];\n              if (o >= 0 && o !== me && fz[q] \u003c zme - gapDepth) dark = 1;\n            }\n          }\n          if (dark) (R *= 0.12), (G *= 0.12), (Bc *= 0.12);\n        }\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(Bc * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower."},{"name":"Aspect","min":1.618,"max":2.4,"about":"Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side."},{"name":"Tube","min":0,"max":1,"about":"How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching."}],"start":[0,2,1.618,0.06],"measures":{"motion":0.1873,"detail":0.0417,"edges":0.4546,"complexity":0.6755,"coverage":0.2581,"colour":0.1929,"drift":0.1053},"knobResponse":[0.1012,0.1249,0.077,0.0449]},{"slug":"bowling-lane","title":"Bowling Lane","family":"sport","round":22,"note":"볼러 뒤에서 본 10핀 레인이에요. 공이 오일 위로 제 반사를 끌며 휘어 올라가 핀을 흩고, 스위프 바가 데드우드를 쓸어 낸 뒤 핀이 다시 서요. 처음에는 블랙라이트 아래 핀과 화살표, 오일이 빛나고, K4 를 올리면 나무 레인에 하우스 조명이 켜져요.","idea":"A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.","buttons":"K1 tap throws the next ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-bowling-lane","type":"code","name":"bowling-lane","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Ball","min":0,"max":1,"about":"The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins."},{"name":"Hook","min":0,"max":1,"about":"How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side."},{"name":"Lights","min":0,"max":1,"about":"Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.1625,"detail":0.0689,"edges":0.5323,"complexity":1.7471,"coverage":0.9404,"colour":0.2104,"drift":0.042},"knobResponse":[0.0566,0.0281,0.0252,0.2377]},{"slug":"boys-surface","title":"Boy's Surface","family":"topology","round":31,"note":"사영 평면을 3차원에 담은 보이 곡면이 위 칸에서 세 겹 대칭축으로 돌고, 수평면이 오르내리며 자른 곡선이 아래 칸에 위에서 본 그림으로 떠요. 평면 아래는 단단하고 위는 옅은 유리라 안쪽에서 앞면과 뒷면이 만나는 이음매가 보여요. K1 을 누르면 평면이 삼중점에 멈춰 세 고리가 한 점을 지나요.","idea":"Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.","buttons":"K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.","code":"// ===== Patternflow pattern =====\n// Title:   Boy's Surface\n// Family:  topology\n// Idea:    Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Boy's surface (Werner Boy, 1901), in the parametrisation of Robert Bryant and Rob Kusner, pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan.\n// Knob 2: Speed. At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut.\n// Knob 4: Bands. Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light.\n// Buttons: K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.\n\nconst W = 64, S = 64, N = W * 128;\nconst { min, max, floor, sqrt, sin, cos, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The disk is sampled on NR rings of NA points; ring 0 is the centre.\nconst NR = 64, NA = 192, NP = (NR + 1) * NA, NC = NR * NA;\n// The surface lies within 1.571 of (0, 0, ZC), so 19.4 LEDs a unit keeps\n// it inside its square at every turn and tilt. The triple point is at the\n// origin, the top of the lobes at z = 0.443 and the pole at z = -2.\nconst ZC = -0.779, SC = 19.4, CX = 31.5, CY = 31.5, PY = 64 + 31.5;\nconst Z0 = -1.45, Z1 = 0.3;\n\n// Bryant and Kusner's formula for one point w = re + i im of the closed\n// unit disk, written out in real arithmetic.\nconst S5 = sqrt(5);\nfunction boy(re, im, out, o) {\n  const r2 = re * re - im * im, i2 = 2 * re * im;\n  const r3 = r2 * re - i2 * im, i3 = r2 * im + i2 * re;\n  const r4 = r2 * r2 - i2 * i2, i4 = 2 * r2 * i2;\n  const r6 = r3 * r3 - i3 * i3, i6 = 2 * r3 * i3;\n  const dr = r6 + S5 * r3 - 1, di = i6 + S5 * i3, dd = dr * dr + di * di;\n  // w (1 - w^4), w (1 + w^4) and 1 + w^6, each over the denominator.\n  const ar = re * (1 - r4) + im * i4, ai = im * (1 - r4) - re * i4;\n  const br = re * (1 + r4) - im * i4, bi = im * (1 + r4) + re * i4;\n  const g1 = (-1.5 * (ai * dr - ar * di)) / dd;\n  const g2 = (-1.5 * (br * dr + bi * di)) / dd;\n  const g3 = (i6 * dr - (1 + r6) * di) / dd - 0.5;\n  const g = g1 * g1 + g2 * g2 + g3 * g3;\n  out[o] = g1 / g;\n  out[o + 1] = g2 / g;\n  out[o + 2] = g3 / g;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points, normals and cells, once. The normal is\n// d/dRe x d/dIm of the map, the orientation of the disk: across the seam,\n// where antipodal points of the boundary circle meet, it points the other\n// way, and the colours follow it.\nfunction build(G) {\n  const P = G.p, Nn = G.n, T = new Float64Array(12);\n  for (let i = 0; i \u003c= NR; i++) {\n    const r = i / NR;\n    for (let j = 0; j \u003c NA; j++) {\n      const a = (TAU * j) / NA, re = r * cos(a), im = r * sin(a), k = i * NA + j, h = 1e-4;\n      boy(re, im, P, k * 3);\n      boy(re + h, im, T, 0);\n      boy(re - h, im, T, 3);\n      boy(re, im + h, T, 6);\n      boy(re, im - h, T, 9);\n      const ux = T[0] - T[3], uy = T[1] - T[4], uz = T[2] - T[5], vx = T[6] - T[9], vy = T[7] - T[10], vz = T[8] - T[11];\n      let nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;\n      const l = 1 / (sqrt(nx * nx + ny * ny + nz * nz) + 1e-30);\n      Nn[k * 3] = nx * l;\n      Nn[k * 3 + 1] = ny * l;\n      Nn[k * 3 + 2] = nz * l;\n    }\n  }\n  // The corners of each grid cell, and its mean height, which decides\n  // whether it is under the plane.\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j, o = c * 4, q = [c, c + NA, (i + 1) * NA + ((j + 1) % NA), i * NA + ((j + 1) % NA)];\n      for (let e = 0; e \u003c 4; e++) G.cc[o + e] = q[e];\n      G.cz[c] = (P[q[0] * 3 + 2] + P[q[1] * 3 + 2] + P[q[2] * 3 + 2] + P[q[3] * 3 + 2]) / 4;\n    }\n  // Cells of the grid by height: bin b lists every cell whose corners span\n  // a height in it, so the cut only looks at the cells near the plane.\n  const cnt = new Int32Array(NB + 1), lo = new Int32Array(NR * NA), hi = new Int32Array(NR * NA);\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j;\n      let a = 9, b = -9;\n      for (let e = 0; e \u003c 4; e++) (a = min(a, P[G.cc[c * 4 + e] * 3 + 2])), (b = max(b, P[G.cc[c * 4 + e] * 3 + 2]));\n      lo[c] = bin(a);\n      hi[c] = bin(b);\n      for (let k = lo[c]; k \u003c= hi[c]; k++) cnt[k + 1]++;\n    }\n  for (let k = 0; k \u003c NB; k++) cnt[k + 1] += cnt[k];\n  G.binAt = cnt.slice();\n  G.cells = new Int32Array(cnt[NB]);\n  for (let c = 0; c \u003c NR * NA; c++) for (let k = lo[c]; k \u003c= hi[c]; k++) G.cells[cnt[k]++] = c;\n}\n\n// Height bins for the cut, from the pole at -2 to the top at 0.45.\nconst NB = 96;\nconst bin = (z) => cl(floor(((z + 2.01) / 2.47) * NB), 0, NB - 1);\n\nexport function setup(params) {\n  const A = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    p: A(NP * 3), n: A(NP * 3), cc: I(NC * 4), cz: A(NC), binAt: null, cells: null,\n    // Each point's place in the side view, its depth there, and its row in the plan.\n    vx: A(NP), vy: A(NP), vd: A(NP), vp: A(NP),\n    // Depth and point per LED: the side view under the plane and over it,\n    // and the plan, which looks straight down on what is under it.\n    za: A(W * S), ia: I(W * S), zo: A(W * S), io: I(W * S), zp: A(W * S), ip: I(W * S),\n    line: A(N), col: A(N * 3), pal: A(12), c3: A(3), seg: A(4096 * 2), band: A(NR + 1),\n    L: [0, 1, 2].map(() => ({ a: A(W * S), b: A(W * S), c: A(W * S), f: new Int8Array(W * S), g: new Int8Array(W * S) })),\n    az: 0.4, sw: PI / 2, hold: 0, hw: 0, hue: 0, tilt: 0, bands: 0.06, zc: -0.5, palHue: -1, built: false,\n  };\n}\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const G = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  if (!G.built) build(G), (G.built = true);\n  G.hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3);\n  G.tilt = cl(k[2], 0, 1);\n  G.bands = cl(k[3], 0, 1);\n  // A third of a turn in 8.7 s and one sweep of the plane in 20 s at Speed 2.\n  G.az += d * sp * 0.12;\n  G.sw += (d * sp * TAU) / 40;\n  const b = input.btnPressed || [];\n  if (b[0]) G.hold = 6.6;\n  G.hold = max(0, G.hold - d);\n  // The plane eases over to the triple point, at z = 0, in 0.8 s, and back\n  // to its sweep in 0.8 s once the hold is over.\n  G.hw = cl(G.hw + (G.hold > 0.8 ? d : -d) / 0.8, 0, 1);\n  const zs = Z0 + (Z1 - Z0) * (0.5 - 0.5 * cos(G.sw));\n  G.zc = zs * (1 - sm(G.hw));\n}\n\n// Two colours for each face of the disk, one in the light and one in\n// shadow. A dim orange or yellow reads brown, so a face whose hue lies\n// between red and yellow turns crimson in shadow, and one between yellow\n// and green turns green; other faces lean a little toward violet.\nfunction palette(G) {\n  const t = G.pal;\n  for (let f = 0; f \u003c 2; f++) {\n    let h = G.hue + (f ? 0.52 : 0.92);\n    h -= floor(h);\n    const sh = h \u003c 0.17 ? 0.94 : h \u003c 0.33 ? 0.33 : h + cl(0.7 - h, -0.04, 0.04);\n    hsv(h, f ? 0.8 : 0.7, 1, t, f * 3);\n    hsv(sh, 0.85, 1, t, 6 + f * 3);\n  }\n  G.palHue = G.hue;\n}\n\n// A soft line one LED wide into the light buffer: points every half LED,\n// each shared between its four nearest LEDs.\nfunction soft(buf, x0, y0, x1, y1, w, ylo, yhi) {\n  const n = max(1, Math.ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) * 2)), ww = (w * sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2)) / n;\n  for (let i = 0; i \u003c n; i++) {\n    const t = (i + 0.5) / n, x = x0 + (x1 - x0) * t - 0.5, y = y0 + (y1 - y0) * t - 0.5;\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy;\n    for (let c = 0; c \u003c 4; c++) {\n      const xx = ix + (c & 1), yy = iy + (c >> 1);\n      if (xx \u003c 0 || xx >= W || yy \u003c ylo || yy >= yhi) continue;\n      buf[yy * W + xx] += ww * (c & 1 ? fx : 1 - fx) * (c >> 1 ? fy : 1 - fy);\n    }\n  }\n}\n\n// The colour of point k on face f in a view whose right, up and\n// toward-the-eye axes carry the normal to (a, b, c), into G.c3. The light is\n// two-sided Lambert from upper left in front, with a highlight, and the\n// disk's circles stripe it.\nfunction shade(G, k, a, b, c, gain, f) {\n  const pal = G.pal, sg = f ? -1 : 1, o = f * 3, so = 6 + o;\n  const ld = max(0, sg * (a * LX + b * LY + c * LZ)), h2 = max(0, sg * (a * HX + b * HY + c * HZ)) ** 2, h8 = (h2 * h2) ** 2;\n  // The shadow colour gives way to the lit one with the square of the light,\n  // and later still in the dimmed glass and plan.\n  const lit = (0.24 + 0.76 * ld) * G.band[(k / NA) | 0] * gain, sp = h8 * h8 * h8 * 0.55 * gain, m = ld * ld * gain;\n  G.c3[0] = ((pal[so] + (pal[o] - pal[so]) * m) * lit + sp) * 255;\n  G.c3[1] = ((pal[so + 1] + (pal[o + 1] - pal[so + 1]) * m) * lit + sp) * 255;\n  G.c3[2] = ((pal[so + 2] + (pal[o + 2] - pal[so + 2]) * m) * lit + sp) * 255;\n}\nconst LX = -0.45, LY = 0.62, LZ = 0.64, HL = 1 / sqrt(LX * LX + LY * LY + (LZ + 1) ** 2), HX = LX * HL, HY = LY * HL, HZ = (LZ + 1) * HL;\n\n// One grid cell into a depth buffer: every LED whose centre lies in the\n// box round its four corners. The boxes of neighbouring cells overlap, so\n// the turning surface has no holes.\nfunction fill(zb, ib, X, Y, cc, o, D, k) {\n  const a = cc[o], b = cc[o + 1], c = cc[o + 2], d = cc[o + 3];\n  let xa = X[a], xb = X[b], ya = Y[a], yb = Y[b];\n  if (xa > xb) (xb = xa), (xa = X[b]);\n  if (ya > yb) (yb = ya), (ya = Y[b]);\n  let t = X[c];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = X[d];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = Y[c];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  t = Y[d];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  // LED centres sit at whole numbers plus a half.\n  let x0 = (xa - 0.5) | 0, y0 = (ya - 0.5) | 0, x1 = (xb + 0.5) | 0, y1 = (yb + 0.5) | 0;\n  if (xa - 0.5 > x0) x0++;\n  if (ya - 0.5 > y0) y0++;\n  if (x0 \u003c 0) x0 = 0;\n  if (y0 \u003c 0) y0 = 0;\n  if (x1 > W) x1 = W;\n  if (y1 > S) y1 = S;\n  for (let yy = y0; yy \u003c y1; yy++) for (let q = yy * W + x0, qe = yy * W + x1; q \u003c qe; q++) if (D > zb[q]) (zb[q] = D), (ib[q] = k);\n}\n\n// Every cell into the side view's solid or glass layer by its mean height,\n// at the mean depth of its corners, and the solid ones into the plan too.\nfunction cellsIn(G, zc) {\n  const { cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip } = G;\n  for (let c = 0, o = 0; c \u003c NC; c++, o += 4) {\n    const k = cc[o], D = (vd[k] + vd[cc[o + 1]] + vd[cc[o + 2]] + vd[cc[o + 3]]) * 0.25;\n    if (cz[c] \u003c= zc) fill(za, ia, vx, vy, cc, o, D, k), fill(zp, ip, vx, vp, cc, o, cz[c], k);\n    else fill(zo, io, vx, vy, cc, o, D, k);\n  }\n}\n\n// The normal of each LED's point in the eye's frame (right, up, toward the\n// eye; the plan looks down the axis) and the face of the disk it shows. A\n// lone LED showing the other face from every lit neighbour is a cell's box\n// poking past a fold, and takes their face.\nfunction normals(G, ids, ca, sa, ce, se, plan, L) {\n  const n = G.n, { a, b, c, f, g } = L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const k = ids[q];\n    if (k \u003c 0) {\n      f[q] = -1;\n      continue;\n    }\n    const nx = n[k * 3], ny = n[k * 3 + 1], nz = n[k * 3 + 2], nyr = nx * sa + ny * ca;\n    a[q] = nx * ca - ny * sa;\n    b[q] = plan ? nyr : nyr * se + nz * ce;\n    c[q] = plan ? nz : nz * se - nyr * ce;\n    f[q] = c[q] >= 0 ? 0 : 1;\n  }\n  for (let q = 0; q \u003c W * S; q++) {\n    const fq = (g[q] = f[q]);\n    if (fq \u003c 0) continue;\n    const x = q & (W - 1), l = x > 0 ? f[q - 1] : -1, r = x \u003c W - 1 ? f[q + 1] : -1, u = q >= W ? f[q - W] : -1, d = q \u003c W * S - W ? f[q + W] : -1;\n    if (l !== fq && r !== fq && u !== fq && d !== fq && (l >= 0) + (r >= 0) + (u >= 0) + (d >= 0) >= 2) g[q] = 1 - fq;\n  }\n}\n\nexport function draw(display, params) {\n  const G = params.s;\n  if (!G || !G.built) return;\n  if (G.palHue !== G.hue) palette(G);\n  const { p, n, cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip, line, col, seg, c3 } = G;\n  const ca = cos(G.az), sa = sin(G.az), el = (22 + 68 * G.tilt) * (PI / 180), ce = cos(el), se = sin(el), zc = G.zc;\n  // The disk's circles: each ring of the grid is lit by its band, from 1.2\n  // on the light stripes to 0.35 in the middle of the dark ones.\n  const nb = 2 + 7 * G.bands;\n  for (let i = 0; i \u003c= NR; i++) G.band[i] = 1.2 - 0.85 * (0.5 - 0.5 * cos((TAU * nb * (NR - i)) / NR));\n  za.fill(-1e9);\n  zo.fill(-1e9);\n  zp.fill(-1e9);\n  ia.fill(-1);\n  io.fill(-1);\n  ip.fill(-1);\n  // The side view in two layers: what is under the plane is solid, what is\n  // over it is glass. The plan takes what is under the plane, nearest the\n  // eye above first.\n  for (let k = 0, o = 0; k \u003c NP; k++, o += 3) {\n    const x = p[o], y = p[o + 1], z = p[o + 2], xr = x * ca - y * sa, yr = x * sa + y * ca;\n    vx[k] = CX + SC * xr;\n    vy[k] = CY - SC * (yr * se + (z - ZC) * ce);\n    vd[k] = z * se - yr * ce;\n    vp[k] = CY - SC * yr;\n  }\n  cellsIn(G, zc);\n  normals(G, ia, ca, sa, ce, se, false, G.L[0]);\n  normals(G, io, ca, sa, ce, se, false, G.L[1]);\n  normals(G, ip, ca, sa, ce, se, true, G.L[2]);\n  const [A, O, Pl] = G.L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const o = q * 3, oo = (W * S + q) * 3;\n    let r = 0, g = 0, b = 0, k = ia[q];\n    if (k >= 0) shade(G, k, A.a[q], A.b[q], A.c[q], 1, A.g[q]), (r = c3[0]), (g = c3[1]), (b = c3[2]);\n    k = io[q];\n    if (k >= 0 && zo[q] > za[q]) {\n      // Glass: 60 percent of its own light over 55 of what is behind.\n      shade(G, k, O.a[q], O.b[q], O.c[q], 0.6, O.g[q]);\n      (r = r * 0.55 + c3[0]), (g = g * 0.55 + c3[1]), (b = b * 0.55 + c3[2]);\n    }\n    (col[o] = r), (col[o + 1] = g), (col[o + 2] = b);\n    k = ip[q];\n    if (k >= 0) shade(G, k, Pl.a[q], Pl.b[q], Pl.c[q], 0.5, Pl.g[q]), (col[oo] = c3[0]), (col[oo + 1] = c3[1]), (col[oo + 2] = c3[2]);\n    else col[oo] = col[oo + 1] = col[oo + 2] = 0;\n  }\n  // The cut: in each grid cell the plane crosses, the points where it\n  // crosses the cell's edges, two to a piece of the curve (four in a\n  // saddle, paired in order round the cell).\n  line.fill(0);\n  let ns = 0;\n  const bz = bin(zc), cells = G.cells, zs = [0, 0, 0, 0], cs = [0, 0, 0, 0];\n  for (let m = G.binAt[bz]; m \u003c G.binAt[bz + 1] && ns \u003c 2040; m++) {\n    const c = cells[m];\n    for (let e = 0; e \u003c 4; e++) cs[e] = cc[c * 4 + e];\n    let up = 0;\n    for (let e = 0; e \u003c 4; e++) up += (zs[e] = p[cs[e] * 3 + 2] - zc) > 0;\n    if (up === 0 || up === 4) continue;\n    for (let e = 0; e \u003c 4; e++) {\n      const z0 = zs[e], z1 = zs[(e + 1) & 3];\n      if (z0 > 0 === z1 > 0) continue;\n      const t = z0 / (z0 - z1), A = cs[e] * 3, B = cs[(e + 1) & 3] * 3;\n      seg[ns * 2] = p[A] + (p[B] - p[A]) * t;\n      seg[ns * 2 + 1] = p[A + 1] + (p[B + 1] - p[A + 1]) * t;\n      ns++;\n    }\n  }\n  // Each piece soft in both views; in the side view a piece behind the\n  // solid is faint.\n  for (let s = 0; s + 1 \u003c ns; s += 2) {\n    const ax = seg[s * 2], ay = seg[s * 2 + 1], bx = seg[s * 2 + 2], by = seg[s * 2 + 3];\n    const axr = ax * ca - ay * sa, ayr = ax * sa + ay * ca, bxr = bx * ca - by * sa, byr = bx * sa + by * ca;\n    const X0 = CX + SC * axr, X1 = CX + SC * bxr, Y0 = CY - SC * (ayr * se + (zc - ZC) * ce), Y1 = CY - SC * (byr * se + (zc - ZC) * ce);\n    const D = zc * se - ((ayr + byr) / 2) * ce, qx = Math.round((X0 + X1) / 2 - 0.5), qy = Math.round((Y0 + Y1) / 2 - 0.5);\n    const zq = qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c S ? za[qy * W + qx] : -1e9;\n    soft(line, X0, Y0, X1, Y1, D > zq - 0.1 ? 1 : 0.22, 0, S);\n    soft(line, X0, PY - SC * ayr, X1, PY - SC * byr, 1, S, 128);\n  }\n  // Ticks at the two edges of the side view mark the plane's height on the\n  // axis.\n  const ty = CY - SC * (zc - ZC) * ce, ty0 = floor(ty - 0.5), fy = ty - 0.5 - ty0;\n  for (const x of [0, 1, 62, 63])\n    for (let c = 0; c \u003c 2; c++) {\n      const yy = ty0 + c;\n      if (yy >= 0 && yy \u003c S) line[yy * W + x] += (c ? fy : 1 - fy) * (x === 0 || x === 63 ? 1 : 0.45);\n    }\n  for (let q = 0, o = 0; q \u003c N; q++, o += 3) {\n    const l = min(1, line[q] * 1.1);\n    const r = min(255, col[o]), g = min(255, col[o + 1]), b = min(255, col[o + 2]);\n    display.setPixel(q % W, (q / W) | 0, r + (255 - r) * l, g + (244 - g) * l, b + (205 - b) * l);\n  }\n}\n","layer":{"id":"layer-boys-surface","type":"code","name":"boys-surface","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Boy's Surface\n// Family:  topology\n// Idea:    Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Boy's surface (Werner Boy, 1901), in the parametrisation of Robert Bryant and Rob Kusner, pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan.\n// Knob 2: Speed. At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut.\n// Knob 4: Bands. Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light.\n// Buttons: K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.\n\nconst W = 64, S = 64, N = W * 128;\nconst { min, max, floor, sqrt, sin, cos, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The disk is sampled on NR rings of NA points; ring 0 is the centre.\nconst NR = 64, NA = 192, NP = (NR + 1) * NA, NC = NR * NA;\n// The surface lies within 1.571 of (0, 0, ZC), so 19.4 LEDs a unit keeps\n// it inside its square at every turn and tilt. The triple point is at the\n// origin, the top of the lobes at z = 0.443 and the pole at z = -2.\nconst ZC = -0.779, SC = 19.4, CX = 31.5, CY = 31.5, PY = 64 + 31.5;\nconst Z0 = -1.45, Z1 = 0.3;\n\n// Bryant and Kusner's formula for one point w = re + i im of the closed\n// unit disk, written out in real arithmetic.\nconst S5 = sqrt(5);\nfunction boy(re, im, out, o) {\n  const r2 = re * re - im * im, i2 = 2 * re * im;\n  const r3 = r2 * re - i2 * im, i3 = r2 * im + i2 * re;\n  const r4 = r2 * r2 - i2 * i2, i4 = 2 * r2 * i2;\n  const r6 = r3 * r3 - i3 * i3, i6 = 2 * r3 * i3;\n  const dr = r6 + S5 * r3 - 1, di = i6 + S5 * i3, dd = dr * dr + di * di;\n  // w (1 - w^4), w (1 + w^4) and 1 + w^6, each over the denominator.\n  const ar = re * (1 - r4) + im * i4, ai = im * (1 - r4) - re * i4;\n  const br = re * (1 + r4) - im * i4, bi = im * (1 + r4) + re * i4;\n  const g1 = (-1.5 * (ai * dr - ar * di)) / dd;\n  const g2 = (-1.5 * (br * dr + bi * di)) / dd;\n  const g3 = (i6 * dr - (1 + r6) * di) / dd - 0.5;\n  const g = g1 * g1 + g2 * g2 + g3 * g3;\n  out[o] = g1 / g;\n  out[o + 1] = g2 / g;\n  out[o + 2] = g3 / g;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points, normals and cells, once. The normal is\n// d/dRe x d/dIm of the map, the orientation of the disk: across the seam,\n// where antipodal points of the boundary circle meet, it points the other\n// way, and the colours follow it.\nfunction build(G) {\n  const P = G.p, Nn = G.n, T = new Float64Array(12);\n  for (let i = 0; i \u003c= NR; i++) {\n    const r = i / NR;\n    for (let j = 0; j \u003c NA; j++) {\n      const a = (TAU * j) / NA, re = r * cos(a), im = r * sin(a), k = i * NA + j, h = 1e-4;\n      boy(re, im, P, k * 3);\n      boy(re + h, im, T, 0);\n      boy(re - h, im, T, 3);\n      boy(re, im + h, T, 6);\n      boy(re, im - h, T, 9);\n      const ux = T[0] - T[3], uy = T[1] - T[4], uz = T[2] - T[5], vx = T[6] - T[9], vy = T[7] - T[10], vz = T[8] - T[11];\n      let nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;\n      const l = 1 / (sqrt(nx * nx + ny * ny + nz * nz) + 1e-30);\n      Nn[k * 3] = nx * l;\n      Nn[k * 3 + 1] = ny * l;\n      Nn[k * 3 + 2] = nz * l;\n    }\n  }\n  // The corners of each grid cell, and its mean height, which decides\n  // whether it is under the plane.\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j, o = c * 4, q = [c, c + NA, (i + 1) * NA + ((j + 1) % NA), i * NA + ((j + 1) % NA)];\n      for (let e = 0; e \u003c 4; e++) G.cc[o + e] = q[e];\n      G.cz[c] = (P[q[0] * 3 + 2] + P[q[1] * 3 + 2] + P[q[2] * 3 + 2] + P[q[3] * 3 + 2]) / 4;\n    }\n  // Cells of the grid by height: bin b lists every cell whose corners span\n  // a height in it, so the cut only looks at the cells near the plane.\n  const cnt = new Int32Array(NB + 1), lo = new Int32Array(NR * NA), hi = new Int32Array(NR * NA);\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j;\n      let a = 9, b = -9;\n      for (let e = 0; e \u003c 4; e++) (a = min(a, P[G.cc[c * 4 + e] * 3 + 2])), (b = max(b, P[G.cc[c * 4 + e] * 3 + 2]));\n      lo[c] = bin(a);\n      hi[c] = bin(b);\n      for (let k = lo[c]; k \u003c= hi[c]; k++) cnt[k + 1]++;\n    }\n  for (let k = 0; k \u003c NB; k++) cnt[k + 1] += cnt[k];\n  G.binAt = cnt.slice();\n  G.cells = new Int32Array(cnt[NB]);\n  for (let c = 0; c \u003c NR * NA; c++) for (let k = lo[c]; k \u003c= hi[c]; k++) G.cells[cnt[k]++] = c;\n}\n\n// Height bins for the cut, from the pole at -2 to the top at 0.45.\nconst NB = 96;\nconst bin = (z) => cl(floor(((z + 2.01) / 2.47) * NB), 0, NB - 1);\n\nexport function setup(params) {\n  const A = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    p: A(NP * 3), n: A(NP * 3), cc: I(NC * 4), cz: A(NC), binAt: null, cells: null,\n    // Each point's place in the side view, its depth there, and its row in the plan.\n    vx: A(NP), vy: A(NP), vd: A(NP), vp: A(NP),\n    // Depth and point per LED: the side view under the plane and over it,\n    // and the plan, which looks straight down on what is under it.\n    za: A(W * S), ia: I(W * S), zo: A(W * S), io: I(W * S), zp: A(W * S), ip: I(W * S),\n    line: A(N), col: A(N * 3), pal: A(12), c3: A(3), seg: A(4096 * 2), band: A(NR + 1),\n    L: [0, 1, 2].map(() => ({ a: A(W * S), b: A(W * S), c: A(W * S), f: new Int8Array(W * S), g: new Int8Array(W * S) })),\n    az: 0.4, sw: PI / 2, hold: 0, hw: 0, hue: 0, tilt: 0, bands: 0.06, zc: -0.5, palHue: -1, built: false,\n  };\n}\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const G = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  if (!G.built) build(G), (G.built = true);\n  G.hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3);\n  G.tilt = cl(k[2], 0, 1);\n  G.bands = cl(k[3], 0, 1);\n  // A third of a turn in 8.7 s and one sweep of the plane in 20 s at Speed 2.\n  G.az += d * sp * 0.12;\n  G.sw += (d * sp * TAU) / 40;\n  const b = input.btnPressed || [];\n  if (b[0]) G.hold = 6.6;\n  G.hold = max(0, G.hold - d);\n  // The plane eases over to the triple point, at z = 0, in 0.8 s, and back\n  // to its sweep in 0.8 s once the hold is over.\n  G.hw = cl(G.hw + (G.hold > 0.8 ? d : -d) / 0.8, 0, 1);\n  const zs = Z0 + (Z1 - Z0) * (0.5 - 0.5 * cos(G.sw));\n  G.zc = zs * (1 - sm(G.hw));\n}\n\n// Two colours for each face of the disk, one in the light and one in\n// shadow. A dim orange or yellow reads brown, so a face whose hue lies\n// between red and yellow turns crimson in shadow, and one between yellow\n// and green turns green; other faces lean a little toward violet.\nfunction palette(G) {\n  const t = G.pal;\n  for (let f = 0; f \u003c 2; f++) {\n    let h = G.hue + (f ? 0.52 : 0.92);\n    h -= floor(h);\n    const sh = h \u003c 0.17 ? 0.94 : h \u003c 0.33 ? 0.33 : h + cl(0.7 - h, -0.04, 0.04);\n    hsv(h, f ? 0.8 : 0.7, 1, t, f * 3);\n    hsv(sh, 0.85, 1, t, 6 + f * 3);\n  }\n  G.palHue = G.hue;\n}\n\n// A soft line one LED wide into the light buffer: points every half LED,\n// each shared between its four nearest LEDs.\nfunction soft(buf, x0, y0, x1, y1, w, ylo, yhi) {\n  const n = max(1, Math.ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) * 2)), ww = (w * sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2)) / n;\n  for (let i = 0; i \u003c n; i++) {\n    const t = (i + 0.5) / n, x = x0 + (x1 - x0) * t - 0.5, y = y0 + (y1 - y0) * t - 0.5;\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy;\n    for (let c = 0; c \u003c 4; c++) {\n      const xx = ix + (c & 1), yy = iy + (c >> 1);\n      if (xx \u003c 0 || xx >= W || yy \u003c ylo || yy >= yhi) continue;\n      buf[yy * W + xx] += ww * (c & 1 ? fx : 1 - fx) * (c >> 1 ? fy : 1 - fy);\n    }\n  }\n}\n\n// The colour of point k on face f in a view whose right, up and\n// toward-the-eye axes carry the normal to (a, b, c), into G.c3. The light is\n// two-sided Lambert from upper left in front, with a highlight, and the\n// disk's circles stripe it.\nfunction shade(G, k, a, b, c, gain, f) {\n  const pal = G.pal, sg = f ? -1 : 1, o = f * 3, so = 6 + o;\n  const ld = max(0, sg * (a * LX + b * LY + c * LZ)), h2 = max(0, sg * (a * HX + b * HY + c * HZ)) ** 2, h8 = (h2 * h2) ** 2;\n  // The shadow colour gives way to the lit one with the square of the light,\n  // and later still in the dimmed glass and plan.\n  const lit = (0.24 + 0.76 * ld) * G.band[(k / NA) | 0] * gain, sp = h8 * h8 * h8 * 0.55 * gain, m = ld * ld * gain;\n  G.c3[0] = ((pal[so] + (pal[o] - pal[so]) * m) * lit + sp) * 255;\n  G.c3[1] = ((pal[so + 1] + (pal[o + 1] - pal[so + 1]) * m) * lit + sp) * 255;\n  G.c3[2] = ((pal[so + 2] + (pal[o + 2] - pal[so + 2]) * m) * lit + sp) * 255;\n}\nconst LX = -0.45, LY = 0.62, LZ = 0.64, HL = 1 / sqrt(LX * LX + LY * LY + (LZ + 1) ** 2), HX = LX * HL, HY = LY * HL, HZ = (LZ + 1) * HL;\n\n// One grid cell into a depth buffer: every LED whose centre lies in the\n// box round its four corners. The boxes of neighbouring cells overlap, so\n// the turning surface has no holes.\nfunction fill(zb, ib, X, Y, cc, o, D, k) {\n  const a = cc[o], b = cc[o + 1], c = cc[o + 2], d = cc[o + 3];\n  let xa = X[a], xb = X[b], ya = Y[a], yb = Y[b];\n  if (xa > xb) (xb = xa), (xa = X[b]);\n  if (ya > yb) (yb = ya), (ya = Y[b]);\n  let t = X[c];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = X[d];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = Y[c];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  t = Y[d];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  // LED centres sit at whole numbers plus a half.\n  let x0 = (xa - 0.5) | 0, y0 = (ya - 0.5) | 0, x1 = (xb + 0.5) | 0, y1 = (yb + 0.5) | 0;\n  if (xa - 0.5 > x0) x0++;\n  if (ya - 0.5 > y0) y0++;\n  if (x0 \u003c 0) x0 = 0;\n  if (y0 \u003c 0) y0 = 0;\n  if (x1 > W) x1 = W;\n  if (y1 > S) y1 = S;\n  for (let yy = y0; yy \u003c y1; yy++) for (let q = yy * W + x0, qe = yy * W + x1; q \u003c qe; q++) if (D > zb[q]) (zb[q] = D), (ib[q] = k);\n}\n\n// Every cell into the side view's solid or glass layer by its mean height,\n// at the mean depth of its corners, and the solid ones into the plan too.\nfunction cellsIn(G, zc) {\n  const { cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip } = G;\n  for (let c = 0, o = 0; c \u003c NC; c++, o += 4) {\n    const k = cc[o], D = (vd[k] + vd[cc[o + 1]] + vd[cc[o + 2]] + vd[cc[o + 3]]) * 0.25;\n    if (cz[c] \u003c= zc) fill(za, ia, vx, vy, cc, o, D, k), fill(zp, ip, vx, vp, cc, o, cz[c], k);\n    else fill(zo, io, vx, vy, cc, o, D, k);\n  }\n}\n\n// The normal of each LED's point in the eye's frame (right, up, toward the\n// eye; the plan looks down the axis) and the face of the disk it shows. A\n// lone LED showing the other face from every lit neighbour is a cell's box\n// poking past a fold, and takes their face.\nfunction normals(G, ids, ca, sa, ce, se, plan, L) {\n  const n = G.n, { a, b, c, f, g } = L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const k = ids[q];\n    if (k \u003c 0) {\n      f[q] = -1;\n      continue;\n    }\n    const nx = n[k * 3], ny = n[k * 3 + 1], nz = n[k * 3 + 2], nyr = nx * sa + ny * ca;\n    a[q] = nx * ca - ny * sa;\n    b[q] = plan ? nyr : nyr * se + nz * ce;\n    c[q] = plan ? nz : nz * se - nyr * ce;\n    f[q] = c[q] >= 0 ? 0 : 1;\n  }\n  for (let q = 0; q \u003c W * S; q++) {\n    const fq = (g[q] = f[q]);\n    if (fq \u003c 0) continue;\n    const x = q & (W - 1), l = x > 0 ? f[q - 1] : -1, r = x \u003c W - 1 ? f[q + 1] : -1, u = q >= W ? f[q - W] : -1, d = q \u003c W * S - W ? f[q + W] : -1;\n    if (l !== fq && r !== fq && u !== fq && d !== fq && (l >= 0) + (r >= 0) + (u >= 0) + (d >= 0) >= 2) g[q] = 1 - fq;\n  }\n}\n\nexport function draw(display, params) {\n  const G = params.s;\n  if (!G || !G.built) return;\n  if (G.palHue !== G.hue) palette(G);\n  const { p, n, cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip, line, col, seg, c3 } = G;\n  const ca = cos(G.az), sa = sin(G.az), el = (22 + 68 * G.tilt) * (PI / 180), ce = cos(el), se = sin(el), zc = G.zc;\n  // The disk's circles: each ring of the grid is lit by its band, from 1.2\n  // on the light stripes to 0.35 in the middle of the dark ones.\n  const nb = 2 + 7 * G.bands;\n  for (let i = 0; i \u003c= NR; i++) G.band[i] = 1.2 - 0.85 * (0.5 - 0.5 * cos((TAU * nb * (NR - i)) / NR));\n  za.fill(-1e9);\n  zo.fill(-1e9);\n  zp.fill(-1e9);\n  ia.fill(-1);\n  io.fill(-1);\n  ip.fill(-1);\n  // The side view in two layers: what is under the plane is solid, what is\n  // over it is glass. The plan takes what is under the plane, nearest the\n  // eye above first.\n  for (let k = 0, o = 0; k \u003c NP; k++, o += 3) {\n    const x = p[o], y = p[o + 1], z = p[o + 2], xr = x * ca - y * sa, yr = x * sa + y * ca;\n    vx[k] = CX + SC * xr;\n    vy[k] = CY - SC * (yr * se + (z - ZC) * ce);\n    vd[k] = z * se - yr * ce;\n    vp[k] = CY - SC * yr;\n  }\n  cellsIn(G, zc);\n  normals(G, ia, ca, sa, ce, se, false, G.L[0]);\n  normals(G, io, ca, sa, ce, se, false, G.L[1]);\n  normals(G, ip, ca, sa, ce, se, true, G.L[2]);\n  const [A, O, Pl] = G.L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const o = q * 3, oo = (W * S + q) * 3;\n    let r = 0, g = 0, b = 0, k = ia[q];\n    if (k >= 0) shade(G, k, A.a[q], A.b[q], A.c[q], 1, A.g[q]), (r = c3[0]), (g = c3[1]), (b = c3[2]);\n    k = io[q];\n    if (k >= 0 && zo[q] > za[q]) {\n      // Glass: 60 percent of its own light over 55 of what is behind.\n      shade(G, k, O.a[q], O.b[q], O.c[q], 0.6, O.g[q]);\n      (r = r * 0.55 + c3[0]), (g = g * 0.55 + c3[1]), (b = b * 0.55 + c3[2]);\n    }\n    (col[o] = r), (col[o + 1] = g), (col[o + 2] = b);\n    k = ip[q];\n    if (k >= 0) shade(G, k, Pl.a[q], Pl.b[q], Pl.c[q], 0.5, Pl.g[q]), (col[oo] = c3[0]), (col[oo + 1] = c3[1]), (col[oo + 2] = c3[2]);\n    else col[oo] = col[oo + 1] = col[oo + 2] = 0;\n  }\n  // The cut: in each grid cell the plane crosses, the points where it\n  // crosses the cell's edges, two to a piece of the curve (four in a\n  // saddle, paired in order round the cell).\n  line.fill(0);\n  let ns = 0;\n  const bz = bin(zc), cells = G.cells, zs = [0, 0, 0, 0], cs = [0, 0, 0, 0];\n  for (let m = G.binAt[bz]; m \u003c G.binAt[bz + 1] && ns \u003c 2040; m++) {\n    const c = cells[m];\n    for (let e = 0; e \u003c 4; e++) cs[e] = cc[c * 4 + e];\n    let up = 0;\n    for (let e = 0; e \u003c 4; e++) up += (zs[e] = p[cs[e] * 3 + 2] - zc) > 0;\n    if (up === 0 || up === 4) continue;\n    for (let e = 0; e \u003c 4; e++) {\n      const z0 = zs[e], z1 = zs[(e + 1) & 3];\n      if (z0 > 0 === z1 > 0) continue;\n      const t = z0 / (z0 - z1), A = cs[e] * 3, B = cs[(e + 1) & 3] * 3;\n      seg[ns * 2] = p[A] + (p[B] - p[A]) * t;\n      seg[ns * 2 + 1] = p[A + 1] + (p[B + 1] - p[A + 1]) * t;\n      ns++;\n    }\n  }\n  // Each piece soft in both views; in the side view a piece behind the\n  // solid is faint.\n  for (let s = 0; s + 1 \u003c ns; s += 2) {\n    const ax = seg[s * 2], ay = seg[s * 2 + 1], bx = seg[s * 2 + 2], by = seg[s * 2 + 3];\n    const axr = ax * ca - ay * sa, ayr = ax * sa + ay * ca, bxr = bx * ca - by * sa, byr = bx * sa + by * ca;\n    const X0 = CX + SC * axr, X1 = CX + SC * bxr, Y0 = CY - SC * (ayr * se + (zc - ZC) * ce), Y1 = CY - SC * (byr * se + (zc - ZC) * ce);\n    const D = zc * se - ((ayr + byr) / 2) * ce, qx = Math.round((X0 + X1) / 2 - 0.5), qy = Math.round((Y0 + Y1) / 2 - 0.5);\n    const zq = qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c S ? za[qy * W + qx] : -1e9;\n    soft(line, X0, Y0, X1, Y1, D > zq - 0.1 ? 1 : 0.22, 0, S);\n    soft(line, X0, PY - SC * ayr, X1, PY - SC * byr, 1, S, 128);\n  }\n  // Ticks at the two edges of the side view mark the plane's height on the\n  // axis.\n  const ty = CY - SC * (zc - ZC) * ce, ty0 = floor(ty - 0.5), fy = ty - 0.5 - ty0;\n  for (const x of [0, 1, 62, 63])\n    for (let c = 0; c \u003c 2; c++) {\n      const yy = ty0 + c;\n      if (yy >= 0 && yy \u003c S) line[yy * W + x] += (c ? fy : 1 - fy) * (x === 0 || x === 63 ? 1 : 0.45);\n    }\n  for (let q = 0, o = 0; q \u003c N; q++, o += 3) {\n    const l = min(1, line[q] * 1.1);\n    const r = min(255, col[o]), g = min(255, col[o + 1]), b = min(255, col[o + 2]);\n    display.setPixel(q % W, (q / W) | 0, r + (255 - r) * l, g + (244 - g) * l, b + (205 - b) * l);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower."},{"name":"Tilt","min":0,"max":1,"about":"The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut."},{"name":"Bands","min":0,"max":1,"about":"Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light."}],"start":[0,2,0,0.06],"measures":{"motion":0.2388,"detail":0.0514,"edges":0.351,"complexity":1.1851,"coverage":0.4559,"colour":0.1933,"drift":0.0801},"knobResponse":[0.0711,0.1334,0.081,0.0395]},{"slug":"bread-mould","title":"Bread Mould","family":"fungi","round":21,"note":"도마 위 식빵 두 쪽이 곰팡이로 덮여 가는 저속 촬영이에요. 내려앉은 포자에서 흰 테를 두른 푸른곰팡이와 검은 털곰팡이가 고리를 그리며 번지고, 다 덮이면 새 두 쪽이 옆에서 밀려 들어와요.","idea":"A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.","buttons":"K1 tap slides a fresh pair of slices in now.","code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","layer":{"id":"layer-bread-mould","type":"code","name":"bread-mould","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mould","min":0,"max":3,"about":"What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep."},{"name":"Spores","min":4,"max":40,"about":"How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40."},{"name":"Damp","min":0,"max":1,"about":"A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies."}],"start":[0,2,4,0.06],"measures":{"motion":0.3259,"detail":0.0597,"edges":0.2499,"complexity":2.3664,"coverage":0.9889,"colour":0.1543,"drift":0.3583},"knobResponse":[0.188,0.3046,0.062,0.1018]},{"slug":"breath","title":"Breath","family":"body","round":24,"note":"후두에서 횡격막까지 해부도처럼 그린 폐가 숨을 쉬어요. 들이쉬면 횡격막이 내려가고 갈비뼈가 들리며, 푸르스름한 공기가 일곱 번 더 갈라지는 기관지를 타고 내려가 보랏빛 허파꽈리를 빨갛게 물들여요. K1 이 맑은 공기에서 입김이 하얗게 서리는 겨울과 매연 낀 도시까지 공기를 바꾸고, K1 을 누르면 기침을 해요.","idea":"A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.","buttons":"K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.","code":"// ===== Patternflow pattern =====\n// Title:   Breath\n// Family:  body\n// Idea:    A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after anatomical plates of the lungs, with the bronchial tree grown by volume-filling branching (Tawhai, Pullan and Hunter, 2000)\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1\n//\n// Knob 1: Air. What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli.\n// Knob 2: Rate. Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3.\n// Knob 3: Depth. A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far.\n// Knob 4: Altitude. Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own.\n// Buttons: K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.\n\nconst W = 64, H = 128, N = W * H, A0 = 2;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, ceil, round, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The diaphragm under the lungs breathed out, x then y: the right dome higher\n// over the liver, the heart sitting in the dip between the domes.\nconst DK = [-1, 118.5, 5, 113.8, 9, 108.4, 13, 103.8, 17, 101.6, 21, 101, 25, 101.8, 29, 104.2, 33, 106, 37, 106.6, 41, 106.6, 45, 105.8, 49, 106.8, 53, 110.2, 57, 115, 60, 117.8, 65, 122.5];\nconst D0T = F32(68);\nfor (let i = 0, k = 0; i \u003c 68; i++) {\n  while (k \u003c DK.length - 4 && i - 1 > DK[k + 2]) k += 2;\n  D0T[i] = mix(DK[k + 1], DK[k + 3], (i - 1 - DK[k]) / (DK[k + 2] - DK[k]));\n}\nfor (let n = 0; n \u003c 4; n++) for (let i = 1; i \u003c 67; i++) D0T[i] = (D0T[i - 1] + 2 * D0T[i] + D0T[i + 1]) / 4;\nconst d0 = (x) => ((x = cl(x + 1, 0, 66.99)), D0T[floor(x)] + (D0T[floor(x) + 1] - D0T[floor(x)]) * (x - floor(x)));\n// How far the diaphragm drops at each column: most under the two domes, so\n// they flatten.\nconst GX = Float32Array.from({ length: W }, (_, x) => 0.32 + 0.68 * (exp(-(((x - 17) / 10) ** 2)) + exp(-(((x - 46) / 10) ** 2))));\n// The outlines of the right lung (on the viewer's left) and the smaller left\n// lung with the heart's notch, breathed out. The diaphragm cuts their bases.\nconst LUNGS = [\n  [19, 21, 15, 22.5, 11.5, 26, 8.5, 32, 6.3, 40, 4.8, 50, 4, 60, 3.6, 72, 3.6, 84, 4, 96, 4.6, 106, 5.6, 126, 28.8, 126, 28.6, 104, 28.2, 98, 27.6, 90, 27.2, 82, 27.6, 74, 28.6, 66, 29, 58, 28.6, 50, 27.8, 42, 26.6, 34, 24.8, 27, 22.5, 22.5],\n  [44.5, 22, 48.5, 23.5, 52, 27, 55, 33, 57.2, 41, 58.8, 51, 59.6, 62, 60, 74, 60.2, 86, 60.2, 98, 59.9, 108, 59.2, 126, 41.5, 126, 41.5, 106, 41, 103, 42.4, 98, 44.5, 92, 45.4, 86, 44.4, 80, 41.8, 75, 38.6, 71, 36.6, 66, 36, 58, 36.4, 50, 37.2, 42, 38.4, 34, 40, 28, 42, 23.5],\n];\n// Airway walls by generation (9 is the channel through the larynx), and how\n// strongly each shows over the lung.\nconst WC = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? [226, 216, 204] : [232 - 2 * g, 208 - 4 * g, 206]));\nconst AG = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? 1 : g > 8 ? 0 : 1.1 - 0.08 * g));\n// The cough: seconds and lung volume, and the moments of the three jolts.\nconst CK = [0, 0, 0.32, 0.97, 0.44, 0.97, 0.54, 0.66, 0.84, 0.66, 0.94, 0.38, 1.24, 0.38, 1.34, 0.12, 1.9, 0];\nconst CT = [0.44, 0.84, 1.24];\n\nfunction sdPoly(v, px, py) {\n  let d = 1e9, s = 1;\n  for (let i = 0, j = v.length - 2; i \u003c v.length; j = i, i += 2) {\n    const ex = v[j] - v[i], ey = v[j + 1] - v[i + 1], wx = px - v[i], wy = py - v[i + 1];\n    const t = cl((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1), bx = wx - ex * t, by = wy - ey * t;\n    d = min(d, bx * bx + by * by);\n    const c1 = py >= v[i + 1], c2 = py \u003c v[j + 1], c3 = ex * wy > ey * wx;\n    if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s = -s;\n  }\n  return s * sqrt(d);\n}\n// The colour being built for one LED, and mixing toward another by k.\nconst C = F32(3);\nconst DA = [74, 58, 156];\nconst bl = (r, g, b, k) => ((C[0] += (r - C[0]) * k), (C[1] += (g - C[1]) * k), (C[2] += (b - C[2]) * k));\nfunction samp(A, x, y) {\n  x = cl(x, 0, 62.999);\n  y = cl(y, 0, 126.999);\n  const xi = x | 0, yi = y | 0, fx = x - xi, p = yi * W + xi, a = A[p] + (A[p + 1] - A[p]) * fx;\n  return a + (A[p + W] + (A[p + W + 1] - A[p + W]) * fx - a) * (y - yi);\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ph: 0.68, lp: 0.68, vol: 0.6, D: 0.5, air: 0, ct: -1, jolt: 0, hp: 0, hb: 0, envIn: 0, envOut: 0, Fin: -1, Fx: 2, bf: [], puffs: [],\n    sd: F32(N), own: new Int16Array(N).fill(-1), und: F32(N * 3), ua: F32(N), GL: F32(N),\n    SX: F32(H), KY: F32(W), alvA: F32(N), alvS: F32(N), alvK: new Int16Array(N), trA: F32(N), trV: F32(N), trS: F32(N), trG: new Int8Array(N), rib: F32(N), O: F32(N * 3),\n    seg: [], ax: [], ay: [], as: [], soot: [], cd: [], cb: [], trH: F32(N),\n  });\n  build(P);\n}\n\nfunction addSeg(P, x0, y0, x1, y1, r, g, d) {\n  const e = d + hypot(x1 - x0, y1 - y0);\n  P.seg.push(x0, y0, x1, y1, r, g, d, e);\n  return e;\n}\n\n// Volume-filling branching: a branch's alveoli are split by the line from its\n// end through their centroid, and each half gets a child that runs 40% of the\n// way to its own centroid, until a handful is left: one grape cluster.\nfunction grow(P, x0, y0, dx, dy, pts, g, r, d) {\n  const { ax, ay } = P, n = pts.length;\n  let cx = 0, cy = 0;\n  for (const i of pts) (cx += ax[i]), (cy += ay[i]);\n  (cx /= n), (cy /= n);\n  if (n \u003c= 7 || g > 8) {\n    for (const i of pts) (P.ak[i] = P.cd.length), (ax[i] += (cx - ax[i]) * 0.3), (ay[i] += (cy - ay[i]) * 0.3);\n    P.cd.push(d + hypot(cx - x0, cy - y0));\n    P.cb.push(0.84 + 0.32 * rnd());\n    return;\n  }\n  // The lobes split along the line from the branch to their centroid; past\n  // them each set is cut across its long axis, a near half and a far one.\n  let ux = cx - x0, uy = cy - y0, ul = hypot(ux, uy), ox = x0, oy = y0;\n  if (g > 2) {\n    let sxx = 0, syy = 0, sxy = 0;\n    for (const i of pts) (sxx += (ax[i] - cx) ** 2), (syy += (ay[i] - cy) ** 2), (sxy += (ax[i] - cx) * (ay[i] - cy));\n    const th = 0.5 * atan2(2 * sxy, sxx - syy) + PI / 2;\n    (ux = cos(th)), (uy = sin(th)), (ul = 1), (ox = cx), (oy = cy);\n  }\n  if (ul \u003c 0.5) (ux = dx), (uy = dy), (ul = hypot(dx, dy));\n  (ux /= ul), (uy /= ul);\n  const side = (i) => (ax[i] - ox) * uy - (ay[i] - oy) * ux;\n  let A = pts.filter((i) => side(i) > 0), B = pts.filter((i) => side(i) \u003c= 0);\n  if (A.length \u003c 2 || B.length \u003c 2) {\n    const s = pts.slice().sort((i, j) => side(i) - side(j));\n    (A = s.slice(0, n >> 1)), (B = s.slice(n >> 1));\n  }\n  const pa = atan2(dy, dx), lim = g === 2 ? 1.75 : 1.1;\n  for (const Q of [A, B]) {\n    let qx = 0, qy = 0;\n    for (const i of Q) (qx += ax[i]), (qy += ay[i]);\n    (qx = qx / Q.length - x0), (qy = qy / Q.length - y0);\n    let a = atan2(qy, qx), da = a - pa;\n    da = atan2(sin(da), cos(da));\n    if (abs(da) > lim) a = pa + Math.sign(da) * lim;\n    let len = max(1.2, hypot(qx, qy) * (Q.length \u003c= 7 ? 0.55 : 0.4)), x1, y1;\n    for (;;) {\n      (x1 = x0 + cos(a) * len), (y1 = y0 + sin(a) * len);\n      if (len \u003c= 1.2 || samp(P.sd, x1, y1) \u003c -0.6) break;\n      len *= 0.8;\n    }\n    const rr = max(0.5, r * Math.cbrt(Q.length / n));\n    grow(P, x1, y1, x1 - x0, y1 - y0, Q, g + 1, rr, addSeg(P, x0, y0, x1, y1, rr, g, d));\n  }\n}\n\nfunction build(P) {\n  const { sd, own, GL } = P;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, sl = d0(x + 0.5) - d0(x - 0.5), cut = (y - d0(x) + 0.6) / sqrt(1 + sl * sl);\n    const a = y \u003c 15 ? 6 : max(sdPoly(LUNGS[0], x, y), cut), b = y \u003c 15 ? 6 : max(sdPoly(LUNGS[1], x, y), cut);\n    sd[p] = min(a, b) + 0.9 * (vn(x * 0.32, y * 0.32) - 0.5);\n    GL[p] = exp(-(((x - 32) / 26) ** 2) - (((y - 66) / 50) ** 2));\n  }\n  // Alveoli on a jittered honeycomb inside the lungs.\n  const pts = [[], []];\n  for (let j = 0; j \u003c 56; j++)\n    for (let i = 0; i \u003c 29; i++) {\n      const x = 1 + i * 2.25 + (j & 1) * 1.125 + (rnd() - 0.5) * 0.7, y = 19 + j * 1.95 + (rnd() - 0.5) * 0.7;\n      if (x > 62.5 || y > 125 || samp(sd, x, y) > -1) continue;\n      pts[x \u003c 32 ? 0 : 1].push(P.ax.length);\n      P.ax.push(x), P.ay.push(y), P.as.push(0.86 + 0.28 * rnd()), P.soot.push(rnd());\n    }\n  P.ak = new Int16Array(P.ax.length);\n  // The larynx and trachea, the short steep right bronchus and the longer\n  // left one, then the trees.\n  let d = addSeg(P, 32, 3, 32, 16.5, 1, 9, 0);\n  d = addSeg(P, 32, 16.5, 32, 48.5, 3, 0, d);\n  grow(P, 26.6, 57, -4.8, 8.5, pts[0], 2, 2.3, addSeg(P, 31.3, 48.5, 26.6, 57, 2.3, 1, d));\n  grow(P, 40.4, 56.6, 7.8, 8.1, pts[1], 2, 2.05, addSeg(P, 32.7, 48.5, 40.4, 56.6, 2.05, 1, d));\n  P.dmax = max(...P.cd);\n  P.cd = Float32Array.from(P.cd, (v) => v / P.dmax);\n  P.cox = F32(P.cd.length).fill(0.55);\n  P.airK = F32(P.cd.length);\n  // Each lung pixel takes the cluster of its nearest alveolus.\n  const best = F32(N).fill(9);\n  P.ax.forEach((cx, i) => {\n    const cy = P.ay[i];\n    for (let y = max(0, round(cy) - 3); y \u003c= min(H - 1, round(cy) + 3); y++)\n      for (let x = max(0, round(cx) - 3); x \u003c= min(W - 1, round(cx) + 3); x++) {\n        const e = hypot(x - cx, y - cy), p = y * W + x;\n        if (e \u003c best[p]) (best[p] = e), (own[p] = P.ak[i]);\n      }\n  });\n  under(P);\n}\n\n// What lies behind the lungs, breathed out, as colour times cover: the\n// larynx, the diaphragm and, dim under it, the liver and the stomach.\nfunction under(P) {\n  const { und, ua } = P;\n  const lay = (p, r, g, b, a) => {\n    if (a \u003c= 0) return;\n    const o = p * 3;\n    (und[o] += (r - und[o]) * a), (und[o + 1] += (g - und[o + 1]) * a), (und[o + 2] += (b - und[o + 2]) * a), (ua[p] += (1 - ua[p]) * a);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, t = y - d0(x), ax = abs(x - 32);\n    if (t > 3) {\n      const xb = 37 + 3 * sin(y * 0.21), f = (1 - 0.55 * sm(3, 20, t)) * (0.7 + 0.5 * vn(x * 0.17, y * 0.17)) * (0.4 + 0.6 * sm(0.3, 2, abs(x - xb)));\n      x \u003c xb ? lay(p, 60 * f, 20 * f, 22 * f, cl(t - 3, 0, 1)) : lay(p, 50 * f, 30 * f, 44 * f, cl(t - 3, 0, 1));\n    }\n    // The diaphragm: a band of muscle with a lit upper face, its tendon pale\n    // in the middle under the heart.\n    if (t > -0.5 && t \u003c 4) {\n      const ten = sm(24, 29, x) * sm(43, 38, x), st = 0.8 + 0.2 * sin(x * 1.9 + t * 0.9), lit = 1 + 0.45 * sm(1.6, 0, t);\n      lay(p, mix(232 * st, 214, ten) * 0.72 * lit, mix(82 * st, 198, ten) * 0.66 * lit, mix(96, 188, ten) * 0.66 * lit, cl(min(t + 0.5, 4 - t), 0, 1));\n    }\n    if (y \u003c 19) {\n      const hy = 3.4 + 0.03 * ax * ax;\n      if (ax \u003c 9.5) lay(p, 200, 192, 176, 0.5 * cl(1 - abs(y - hy) / 0.9, 0, 1));\n      const top = 6 + 2.2 * max(0, 1 - ax / 2.4), hw = 7.4 - 0.42 * (y - 6), e = min(y - top, 14.6 - y, hw - ax);\n      // The thyroid cartilage, its left plate lit and the right in shade.\n      if (e > -0.5) lay(p, 206, 196, 184, cl(e + 0.5, 0, 1) * (0.42 + 0.2 * exp(-((ax / 1.8) ** 2)) + 0.25 * sm(1.2, 0.2, e)) * (x \u003c 32 ? 1.05 : 0.78));\n      if (y > 15 && y \u003c 17.6 && ax \u003c 4.9) lay(p, 214, 204, 192, 0.55 * cl(4.9 - ax, 0, 1));\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.t += dt;\n  P.air = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3), dep = cl(k[2], 0, 1), alt = cl(k[3], 0, 1);\n  const bpm = (8 + 4.5 * rate + 12 * max(0, rate - 2) ** 2) * (1 + 0.45 * alt);\n  P.D = (0.5 + 0.5 * dep) * (1 - 0.4 * sm(2, 3, rate)) * (1 + 0.22 * alt);\n  if (input.btnPressed && input.btnPressed[0] && P.ct \u003c 0) (P.ct = 0), (P.cv = P.vol), (P.cn = 0);\n  let vol = 0, envIn = 0, envOut = 0, Fin = -1, Fx = 2;\n  P.bf = [];\n  P.jolt = 0;\n  if (P.ct >= 0) {\n    // A gasp, then three coughs, each a jolt and a burst of warm air up the tree.\n    const c = (P.ct += dt);\n    let j = 0;\n    while (j \u003c CK.length - 4 && c > CK[j + 2]) j += 2;\n    vol = mix(j ? CK[j + 1] : P.cv, CK[j + 3], sm(CK[j], CK[j + 2], c));\n    if (c \u003c 0.4) (envIn = sin((PI * c) / 0.4) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(c / 0.3, 0, 1)) ** 2));\n    for (const tc of CT) {\n      const u = c - tc;\n      if (u > 0 && u \u003c 0.7) P.bf.push(1 - u * 3.2), (P.jolt = max(P.jolt, 2.4 * exp(-u / 0.08)));\n    }\n    if (P.cn \u003c 3 && c > CT[P.cn] + 0.28) P.puffs.push([0, 2, rnd()]), P.cn++;\n    if (c > 1.9) (P.ct = -1), (P.ph = 0.9);\n  } else {\n    // In for 38% of a breath, out for half, then a short rest.\n    const p = (P.ph = (P.ph + (dt * bpm) / 60) % 1);\n    if (p \u003c 0.38) (vol = 0.5 - 0.5 * cos((PI * p) / 0.38)), (envIn = sin((PI * p) / 0.38) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(p / 0.3, 0, 1)) ** 2));\n    else if (p \u003c 0.88) {\n      const u = (p - 0.38) / 0.5;\n      (vol = 0.5 + 0.5 * cos(PI * u)), (envOut = sin(PI * u) ** 0.5), (Fx = 1.06 - 1.2 * sm(0.02, 0.8, u));\n    }\n    if (P.lp \u003c 0.64 && p >= 0.64) P.puffs.push([0, 1, rnd()]);\n    P.lp = p;\n  }\n  Object.assign(P, { vol, envIn, envOut, Fin, Fx });\n  // The alveoli the cold air has reached take up oxygen fast; the rest give it\n  // up slowly to the blood that carries it away.\n  const wS = max(0, 2 * P.air - 1), hi = 1 - 0.66 * alt - 0.14 * wS, { cd, cox, airK } = P;\n  for (let i = 0; i \u003c cd.length; i++) {\n    cox[i] += Fin > cd[i] ? (hi - cox[i]) * (1 - exp(-dt * 7)) : (0.05 - cox[i]) * (1 - exp(-dt * 0.85));\n    airK[i] = envIn * exp(-(((Fin - cd[i]) / 0.07) ** 2));\n  }\n  P.hp = (P.hp + (dt * (62 + 10 * rate + 40 * alt)) / 60) % 1;\n  P.hb = exp(-(((P.hp - 0.06) / 0.05) ** 2)) + 0.6 * exp(-(((P.hp - 0.3) / 0.05) ** 2));\n  P.puffs = P.puffs.filter((f) => (f[0] += dt) \u003c 5);\n}\n\n// Rest coordinates to the panel, breathed in by the per-row and per-column\n// scales: out to the sides, down with the diaphragm.\nlet FX = 0, FY = 0;\nfunction fw(P, xr, yr) {\n  const { SX, KY } = P, kx = cl(32 + (xr - 32) * SX[cl(round(yr), 0, H - 1)], 0, 62.99), ki = floor(kx);\n  FY = A0 + (yr - A0) * (KY[ki] + (KY[ki + 1] - KY[ki]) * (kx - ki));\n  FX = 32 + (xr - 32) * SX[cl(round(FY), 0, H - 1)];\n}\n\nfunction alveoli(P) {\n  const { alvA, alvS, alvK, ax, ay, as } = P, rA = 1.02 + 0.52 * P.vol * P.D;\n  alvA.fill(0);\n  for (let i = 0; i \u003c ax.length; i++) {\n    fw(P, ax[i], ay[i]);\n    const cx = FX, cy = FY, r = rA * as[i], lim = (r + 0.5) ** 2;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n        const dx = x - cx, dy = y - cy, e2 = dx * dx + dy * dy;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x;\n        const q = e / r, hx = dx + 0.4 * r, hy = dy + 0.45 * r, hl = max(0, 1 - sqrt(hx * hx + hy * hy) / (0.75 * r));\n        const s = 0.72 + 0.28 * sqrt(max(0, 1 - q * q)) + 0.38 * hl * hl;\n        if (a * s > alvA[p] * alvS[p]) (alvA[p] = a), (alvS[p] = s), (alvK[p] = i);\n      }\n  }\n}\n\nfunction tree(P) {\n  const { seg: S, trA, trV, trS, trG, trH } = P, dil = 1 + 0.1 * P.vol * P.D;\n  trA.fill(0);\n  trH.fill(0);\n  for (let j = 0; j \u003c S.length; j += 8) {\n    fw(P, S[j], S[j + 1]);\n    const x0 = FX, y0 = FY;\n    fw(P, S[j + 2], S[j + 3]);\n    const ex = FX - x0, ey = FY - y0, l2 = ex * ex + ey * ey || 1e-6, r = S[j + 4] * dil, g = S[j + 5], da = S[j + 6], db = S[j + 7], lim = (r + 1.7) ** 2, hr = min(1, r);\n    for (let y = max(0, floor(min(y0, FY) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, FY) + r + 1)); y++)\n      for (let x = max(0, floor(min(x0, FX) - r - 1)); x \u003c= min(W - 1, ceil(max(x0, FX) + r + 1)); x++) {\n        const t = cl(((x - x0) * ex + (y - y0) * ey) / l2, 0, 1), px = x - x0 - ex * t, py = y - y0 - ey * t, e2 = px * px + py * py;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x, h = cl(r + 1.7 - e, 0, 1) * hr;\n        if (h > trH[p]) trH[p] = h;\n        if (a > trA[p]) (trA[p] = a), (trS[p] = da + (db - da) * t), (trV[p] = e / r), (trG[p] = g);\n      }\n  }\n}\n\n// The collarbones and ten ribs, faint arcs that lift and spread on a breath.\nfunction ribs(P) {\n  const { rib, SX } = P, v = P.vol * P.D;\n  rib.fill(0);\n  const dot = (fx, fy, rad, k) => {\n    for (let y = max(0, round(fy) - 1); y \u003c= min(H - 1, round(fy) + 1); y++)\n      for (let x = max(0, round(fx) - 1); x \u003c= min(W - 1, round(fx) + 1); x++) {\n        const a = cl(rad + 0.5 - sqrt((x - fx) ** 2 + (y - fy) ** 2), 0, 1) * k, p = y * W + x;\n        if (a > rib[p]) rib[p] = a;\n      }\n  };\n  for (let i = 0; i \u003c= 10; i++)\n    for (const s of [-1, 1]) {\n      if (i === 0) {\n        for (let n = 0; n \u003c= 50; n++) {\n          const u = n / 50;\n          dot(32 + s * (4.5 + 21 * u), 18.6 - 4.2 * u + 1.4 * sin(PI * u) - 1.2 * v, 0.5 + 0.4 * (2 * u - 1) ** 2, 0.85);\n        }\n        continue;\n      }\n      const yr = 23 + (i - 1) * 8.4, y0 = yr - v * (1 + 0.42 * i), hw = (1.5 + 28.4 * (1 - exp(-(yr - 15) / 14))) * SX[round(yr)];\n      const rx = hw - 3, ry = (5.5 + 0.55 * i) * (1 - 0.25 * v), n = ceil((rx + ry) * 2.2);\n      for (let m = 0; m \u003c= n; m++) {\n        const th = (1.62 * m) / n;\n        dot(32 + s * (3 + rx * sin(th)), y0 + ry * (1 - cos(th)), 0.7, sm(0.2, 0.6, th));\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cox) return;\n  const { SX, KY, sd, own, cox, cb, airK, und, ua, alvA, alvS, alvK, trA, trV, trS, trG, trH, rib, O, ak, soot, GL } = P, dm = 1 / P.dmax;\n  const t = P.t, v = P.vol * P.D, air = P.air, hb = P.hb, { envIn, envOut, Fin, Fx, bf } = P;\n  const wC = max(0, 1 - 2 * air), wW = 1 - abs(2 * air - 1), wS = max(0, 2 * air - 1);\n  const pal = (c, w, s) => [0, 1, 2].map((i) => c[i] * wC + w[i] * wW + s[i] * wS);\n  const bgT = pal([3, 7, 18], [16, 26, 48], [62, 50, 32]), bgB = pal([2, 4, 12], [8, 14, 30], [36, 28, 20]), glo = pal([8, 18, 40], [22, 38, 64], [40, 30, 18]);\n  const cold = pal([150, 205, 255], [215, 238, 255], [196, 178, 128]), warm = pal([255, 196, 160], [255, 224, 206], [190, 160, 130]);\n  const puffC = pal([255, 214, 196], [236, 242, 255], [168, 158, 144]), puffK = 0.6 * wC + 1.5 * wW + 0.7 * wS;\n  const oxA = [240 - 64 * wS, 46 + 26 * wS, 58 + 20 * wS];\n  for (let y = 0; y \u003c H; y++) SX[y] = 1 + 0.085 * v * (0.25 + 0.75 * sm(15, 115, y));\n  for (let x = 0; x \u003c W; x++) KY[x] = 1 + 0.14 * v * GX[x];\n  alveoli(P);\n  tree(P);\n  ribs(P);\n  // The breath leaving at the top: each puff rises, spreads and thins.\n  const pf = [];\n  for (const [age, str, sd0] of P.puffs) {\n    const R = 3 + (5 + 8 * wW) * age;\n    pf.push(32 + (sd0 - 0.5) * 8, 6 - 3.2 * age, R, str * sm(0, 0.25, age) * exp(-age / (0.9 + 1.6 * wW)), sd0 * 40);\n  }\n  const hs = 1 / (1 - 0.035 * hb);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const fy = y / 127, gl = GL[p];\n      let hz = 1;\n      if (wS > 0) hz = 1 + wS * (0.18 * sin(x * 0.2 + y * 0.05 + t * 0.6) + 0.18 * sin(y * 0.13 - x * 0.06 - t * 0.35));\n      for (let c = 0; c \u003c 3; c++) C[c] = (bgT[c] + (bgB[c] - bgT[c]) * fy + glo[c] * gl) * hz;\n      const xr = cl(32 + (x - 32) / SX[y], 0, 62.999), yr = cl(A0 + (y - A0) / KY[x], 0, 126.999);\n      const xi = xr | 0, yi = yr | 0, fx = xr - xi, fz = yr - yi, q = yi * W + xi;\n      if (ua[q] + ua[q + 1] + ua[q + W] + ua[q + W + 1] > 0) {\n        const w0 = (1 - fx) * (1 - fz) * ua[q], w1 = fx * (1 - fz) * ua[q + 1], w2 = (1 - fx) * fz * ua[q + W], w3 = fx * fz * ua[q + W + 1], a = 1 - w0 - w1 - w2 - w3;\n        const o0 = q * 3, o2 = o0 + W * 3;\n        for (let c = 0; c \u003c 3; c++) C[c] = C[c] * a + und[o0 + c] * w0 + und[o0 + 3 + c] * w1 + und[o2 + c] * w2 + und[o2 + 3 + c] * w3;\n      }\n      // The heart, dim behind the lungs, its apex down to the left.\n      if (xr > 20 && xr \u003c 56 && yr > 60 && yr \u003c 110) {\n        const dx = xr - 36.6, dy = yr - 86, hv = (dx * 0.6 + dy * 0.8) * hs, hu = (dx * 0.8 - dy * 0.6) * hs, eu = hu / (12.5 * (1 - 0.36 * sm(-6, 19, hv))), ev = hv / 19;\n        const a = cl((1 - sqrt(eu * eu + ev * ev)) * 9, 0, 1);\n        if (a > 0) {\n          const k = (0.4 + 0.32 * hb) * (0.65 + 0.45 * sm(9, -9, hu));\n          bl(150 * k, 26 * k, 44 * k, a);\n        }\n      }\n      // The lung: a dusky body, the grape clusters of alveoli, the capillary\n      // net shimmering on them, the pleura at the edge.\n      const s = samp(sd, xr, yr), qn = round(yr) * W + round(xr);\n      let m = 0;\n      if (s \u003c 1.2) {\n        const c = own[qn], ox = c >= 0 ? cox[c] : 0.3;\n        m = cl(0.5 - s, 0, 1);\n        if (m > 0) bl(24 + 56 * ox, 14 - 4 * ox, 50 - 20 * ox, 0.92 * m);\n        const aa = alvA[p];\n        if (aa > 0) {\n          const i = alvK[p], cc = ak[i], o = cox[cc], sh = alvS[p] * cb[cc] * (soot[i] \u003c wS * 0.4 ? 0.3 : 1), af = 0.4 * airK[cc];\n          for (let c = 0; c \u003c 3; c++) C[c] += ((DA[c] + (oxA[c] - DA[c]) * o) * sh + cold[c] * af - C[c]) * aa;\n        }\n        const cv = hash(qn, 5);\n        if (m > 0 && cv > 0.6) {\n          const k = (cv - 0.35) * (0.75 + 0.75 * sin(t * 6 + cv * 90 + 2 * hb)) * (0.12 + 0.34 * ox) * m;\n          (C[0] += 230 * k), (C[1] += 30 * k), (C[2] += 50 * k);\n        }\n        const rm = cl(1 - abs(s + 0.45) / 0.75, 0, 1) * 0.5;\n        if (rm > 0) bl(126 + 129 * ox, 100 + 24 * ox, 214 - 70 * ox, rm);\n        // A shadow along each airway lifts the tree off the alveoli.\n        bl(0, 0, 0, trH[p] * 0.5 * m);\n      }\n      // The airways, and the air in them.\n      const ta = trA[p];\n      if (ta > 0) {\n        const gg = trG[p], vv = trV[p], d = trS[p] * dm, wc = WC[gg], al = AG[gg] * ta;\n        let wb = 0.85;\n        if (gg \u003c= 1) {\n          const ring = 0.5 + 0.5 * cos(trS[p] * 2.73);\n          wb = (0.5 + 0.5 * sm(0.35, 0.95, vv)) * (0.66 + 0.44 * ring * ring);\n        } else if (gg \u003c= 3) wb = 0.65 + 0.35 * sm(0.3, 1, vv);\n        bl(wc[0] * wb, wc[1] * wb, wc[2] * wb, al);\n        let ca = 0, wa = 0;\n        if (envIn > 0 && d \u003c Fin) ca = envIn * (0.3 + 0.7 * exp(-(((Fin - d) / 0.05) ** 2)));\n        if (envOut > 0 && d > Fx) wa = envOut * (0.24 + 0.76 * exp(-(((d - Fx) / 0.05) ** 2)));\n        for (const f of bf) wa += 1.3 * exp(-(((d - f) / 0.06) ** 2)) + (d > f ? 0.25 : 0);\n        const lf = (gg \u003c= 1 ? 1 - 0.5 * sm(0.55, 1, vv) : 1) * ta * (gg === 9 ? 0.8 : 0.9);\n        for (let c = 0; c \u003c 3; c++) C[c] += (cold[c] * ca + warm[c] * wa) * lf;\n      }\n      const rb = rib[p];\n      if (rb > 0) bl(220, 210, 196, rb * (0.42 + 0.1 * m));\n      if (y \u003c 48 && pf.length) {\n        let pa = 0;\n        for (let j = 0; j \u003c pf.length; j += 5) {\n          const dx = (x - pf[j]) / (pf[j + 2] * 1.4), dy = (y - pf[j + 1]) / pf[j + 2], e = dx * dx + dy * dy;\n          if (e \u003c 4) pa += pf[j + 3] * exp(-e * 1.4) * cl(0.4 + 1.4 * (vn(x * 0.2 + pf[j + 4], y * 0.2 + t * 0.9) - 0.5) + 0.5 * exp(-e * 3), 0, 1.4);\n        }\n        if (pa > 0) bl(puffC[0], puffC[1], puffC[2], min(1, pa * puffK));\n      }\n      if (wS > 0) bl(120, 96, 62, 0.14 * wS * hz);\n      O.set(C, p * 3);\n    }\n  // A cough jolts the whole chest up.\n  const jl = round(P.jolt);\n  for (let y = 0; y \u003c H; y++) {\n    const o = min(H - 1, y + jl) * W * 3;\n    for (let x = 0; x \u003c W; x++) display.setPixel(x, y, min(255, O[o + x * 3]) | 0, min(255, O[o + x * 3 + 1]) | 0, min(255, O[o + x * 3 + 2]) | 0);\n  }\n}\n","layer":{"id":"layer-breath","type":"code","name":"breath","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Breath\n// Family:  body\n// Idea:    A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after anatomical plates of the lungs, with the bronchial tree grown by volume-filling branching (Tawhai, Pullan and Hunter, 2000)\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1\n//\n// Knob 1: Air. What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli.\n// Knob 2: Rate. Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3.\n// Knob 3: Depth. A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far.\n// Knob 4: Altitude. Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own.\n// Buttons: K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.\n\nconst W = 64, H = 128, N = W * H, A0 = 2;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, ceil, round, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The diaphragm under the lungs breathed out, x then y: the right dome higher\n// over the liver, the heart sitting in the dip between the domes.\nconst DK = [-1, 118.5, 5, 113.8, 9, 108.4, 13, 103.8, 17, 101.6, 21, 101, 25, 101.8, 29, 104.2, 33, 106, 37, 106.6, 41, 106.6, 45, 105.8, 49, 106.8, 53, 110.2, 57, 115, 60, 117.8, 65, 122.5];\nconst D0T = F32(68);\nfor (let i = 0, k = 0; i \u003c 68; i++) {\n  while (k \u003c DK.length - 4 && i - 1 > DK[k + 2]) k += 2;\n  D0T[i] = mix(DK[k + 1], DK[k + 3], (i - 1 - DK[k]) / (DK[k + 2] - DK[k]));\n}\nfor (let n = 0; n \u003c 4; n++) for (let i = 1; i \u003c 67; i++) D0T[i] = (D0T[i - 1] + 2 * D0T[i] + D0T[i + 1]) / 4;\nconst d0 = (x) => ((x = cl(x + 1, 0, 66.99)), D0T[floor(x)] + (D0T[floor(x) + 1] - D0T[floor(x)]) * (x - floor(x)));\n// How far the diaphragm drops at each column: most under the two domes, so\n// they flatten.\nconst GX = Float32Array.from({ length: W }, (_, x) => 0.32 + 0.68 * (exp(-(((x - 17) / 10) ** 2)) + exp(-(((x - 46) / 10) ** 2))));\n// The outlines of the right lung (on the viewer's left) and the smaller left\n// lung with the heart's notch, breathed out. The diaphragm cuts their bases.\nconst LUNGS = [\n  [19, 21, 15, 22.5, 11.5, 26, 8.5, 32, 6.3, 40, 4.8, 50, 4, 60, 3.6, 72, 3.6, 84, 4, 96, 4.6, 106, 5.6, 126, 28.8, 126, 28.6, 104, 28.2, 98, 27.6, 90, 27.2, 82, 27.6, 74, 28.6, 66, 29, 58, 28.6, 50, 27.8, 42, 26.6, 34, 24.8, 27, 22.5, 22.5],\n  [44.5, 22, 48.5, 23.5, 52, 27, 55, 33, 57.2, 41, 58.8, 51, 59.6, 62, 60, 74, 60.2, 86, 60.2, 98, 59.9, 108, 59.2, 126, 41.5, 126, 41.5, 106, 41, 103, 42.4, 98, 44.5, 92, 45.4, 86, 44.4, 80, 41.8, 75, 38.6, 71, 36.6, 66, 36, 58, 36.4, 50, 37.2, 42, 38.4, 34, 40, 28, 42, 23.5],\n];\n// Airway walls by generation (9 is the channel through the larynx), and how\n// strongly each shows over the lung.\nconst WC = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? [226, 216, 204] : [232 - 2 * g, 208 - 4 * g, 206]));\nconst AG = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? 1 : g > 8 ? 0 : 1.1 - 0.08 * g));\n// The cough: seconds and lung volume, and the moments of the three jolts.\nconst CK = [0, 0, 0.32, 0.97, 0.44, 0.97, 0.54, 0.66, 0.84, 0.66, 0.94, 0.38, 1.24, 0.38, 1.34, 0.12, 1.9, 0];\nconst CT = [0.44, 0.84, 1.24];\n\nfunction sdPoly(v, px, py) {\n  let d = 1e9, s = 1;\n  for (let i = 0, j = v.length - 2; i \u003c v.length; j = i, i += 2) {\n    const ex = v[j] - v[i], ey = v[j + 1] - v[i + 1], wx = px - v[i], wy = py - v[i + 1];\n    const t = cl((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1), bx = wx - ex * t, by = wy - ey * t;\n    d = min(d, bx * bx + by * by);\n    const c1 = py >= v[i + 1], c2 = py \u003c v[j + 1], c3 = ex * wy > ey * wx;\n    if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s = -s;\n  }\n  return s * sqrt(d);\n}\n// The colour being built for one LED, and mixing toward another by k.\nconst C = F32(3);\nconst DA = [74, 58, 156];\nconst bl = (r, g, b, k) => ((C[0] += (r - C[0]) * k), (C[1] += (g - C[1]) * k), (C[2] += (b - C[2]) * k));\nfunction samp(A, x, y) {\n  x = cl(x, 0, 62.999);\n  y = cl(y, 0, 126.999);\n  const xi = x | 0, yi = y | 0, fx = x - xi, p = yi * W + xi, a = A[p] + (A[p + 1] - A[p]) * fx;\n  return a + (A[p + W] + (A[p + W + 1] - A[p + W]) * fx - a) * (y - yi);\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ph: 0.68, lp: 0.68, vol: 0.6, D: 0.5, air: 0, ct: -1, jolt: 0, hp: 0, hb: 0, envIn: 0, envOut: 0, Fin: -1, Fx: 2, bf: [], puffs: [],\n    sd: F32(N), own: new Int16Array(N).fill(-1), und: F32(N * 3), ua: F32(N), GL: F32(N),\n    SX: F32(H), KY: F32(W), alvA: F32(N), alvS: F32(N), alvK: new Int16Array(N), trA: F32(N), trV: F32(N), trS: F32(N), trG: new Int8Array(N), rib: F32(N), O: F32(N * 3),\n    seg: [], ax: [], ay: [], as: [], soot: [], cd: [], cb: [], trH: F32(N),\n  });\n  build(P);\n}\n\nfunction addSeg(P, x0, y0, x1, y1, r, g, d) {\n  const e = d + hypot(x1 - x0, y1 - y0);\n  P.seg.push(x0, y0, x1, y1, r, g, d, e);\n  return e;\n}\n\n// Volume-filling branching: a branch's alveoli are split by the line from its\n// end through their centroid, and each half gets a child that runs 40% of the\n// way to its own centroid, until a handful is left: one grape cluster.\nfunction grow(P, x0, y0, dx, dy, pts, g, r, d) {\n  const { ax, ay } = P, n = pts.length;\n  let cx = 0, cy = 0;\n  for (const i of pts) (cx += ax[i]), (cy += ay[i]);\n  (cx /= n), (cy /= n);\n  if (n \u003c= 7 || g > 8) {\n    for (const i of pts) (P.ak[i] = P.cd.length), (ax[i] += (cx - ax[i]) * 0.3), (ay[i] += (cy - ay[i]) * 0.3);\n    P.cd.push(d + hypot(cx - x0, cy - y0));\n    P.cb.push(0.84 + 0.32 * rnd());\n    return;\n  }\n  // The lobes split along the line from the branch to their centroid; past\n  // them each set is cut across its long axis, a near half and a far one.\n  let ux = cx - x0, uy = cy - y0, ul = hypot(ux, uy), ox = x0, oy = y0;\n  if (g > 2) {\n    let sxx = 0, syy = 0, sxy = 0;\n    for (const i of pts) (sxx += (ax[i] - cx) ** 2), (syy += (ay[i] - cy) ** 2), (sxy += (ax[i] - cx) * (ay[i] - cy));\n    const th = 0.5 * atan2(2 * sxy, sxx - syy) + PI / 2;\n    (ux = cos(th)), (uy = sin(th)), (ul = 1), (ox = cx), (oy = cy);\n  }\n  if (ul \u003c 0.5) (ux = dx), (uy = dy), (ul = hypot(dx, dy));\n  (ux /= ul), (uy /= ul);\n  const side = (i) => (ax[i] - ox) * uy - (ay[i] - oy) * ux;\n  let A = pts.filter((i) => side(i) > 0), B = pts.filter((i) => side(i) \u003c= 0);\n  if (A.length \u003c 2 || B.length \u003c 2) {\n    const s = pts.slice().sort((i, j) => side(i) - side(j));\n    (A = s.slice(0, n >> 1)), (B = s.slice(n >> 1));\n  }\n  const pa = atan2(dy, dx), lim = g === 2 ? 1.75 : 1.1;\n  for (const Q of [A, B]) {\n    let qx = 0, qy = 0;\n    for (const i of Q) (qx += ax[i]), (qy += ay[i]);\n    (qx = qx / Q.length - x0), (qy = qy / Q.length - y0);\n    let a = atan2(qy, qx), da = a - pa;\n    da = atan2(sin(da), cos(da));\n    if (abs(da) > lim) a = pa + Math.sign(da) * lim;\n    let len = max(1.2, hypot(qx, qy) * (Q.length \u003c= 7 ? 0.55 : 0.4)), x1, y1;\n    for (;;) {\n      (x1 = x0 + cos(a) * len), (y1 = y0 + sin(a) * len);\n      if (len \u003c= 1.2 || samp(P.sd, x1, y1) \u003c -0.6) break;\n      len *= 0.8;\n    }\n    const rr = max(0.5, r * Math.cbrt(Q.length / n));\n    grow(P, x1, y1, x1 - x0, y1 - y0, Q, g + 1, rr, addSeg(P, x0, y0, x1, y1, rr, g, d));\n  }\n}\n\nfunction build(P) {\n  const { sd, own, GL } = P;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, sl = d0(x + 0.5) - d0(x - 0.5), cut = (y - d0(x) + 0.6) / sqrt(1 + sl * sl);\n    const a = y \u003c 15 ? 6 : max(sdPoly(LUNGS[0], x, y), cut), b = y \u003c 15 ? 6 : max(sdPoly(LUNGS[1], x, y), cut);\n    sd[p] = min(a, b) + 0.9 * (vn(x * 0.32, y * 0.32) - 0.5);\n    GL[p] = exp(-(((x - 32) / 26) ** 2) - (((y - 66) / 50) ** 2));\n  }\n  // Alveoli on a jittered honeycomb inside the lungs.\n  const pts = [[], []];\n  for (let j = 0; j \u003c 56; j++)\n    for (let i = 0; i \u003c 29; i++) {\n      const x = 1 + i * 2.25 + (j & 1) * 1.125 + (rnd() - 0.5) * 0.7, y = 19 + j * 1.95 + (rnd() - 0.5) * 0.7;\n      if (x > 62.5 || y > 125 || samp(sd, x, y) > -1) continue;\n      pts[x \u003c 32 ? 0 : 1].push(P.ax.length);\n      P.ax.push(x), P.ay.push(y), P.as.push(0.86 + 0.28 * rnd()), P.soot.push(rnd());\n    }\n  P.ak = new Int16Array(P.ax.length);\n  // The larynx and trachea, the short steep right bronchus and the longer\n  // left one, then the trees.\n  let d = addSeg(P, 32, 3, 32, 16.5, 1, 9, 0);\n  d = addSeg(P, 32, 16.5, 32, 48.5, 3, 0, d);\n  grow(P, 26.6, 57, -4.8, 8.5, pts[0], 2, 2.3, addSeg(P, 31.3, 48.5, 26.6, 57, 2.3, 1, d));\n  grow(P, 40.4, 56.6, 7.8, 8.1, pts[1], 2, 2.05, addSeg(P, 32.7, 48.5, 40.4, 56.6, 2.05, 1, d));\n  P.dmax = max(...P.cd);\n  P.cd = Float32Array.from(P.cd, (v) => v / P.dmax);\n  P.cox = F32(P.cd.length).fill(0.55);\n  P.airK = F32(P.cd.length);\n  // Each lung pixel takes the cluster of its nearest alveolus.\n  const best = F32(N).fill(9);\n  P.ax.forEach((cx, i) => {\n    const cy = P.ay[i];\n    for (let y = max(0, round(cy) - 3); y \u003c= min(H - 1, round(cy) + 3); y++)\n      for (let x = max(0, round(cx) - 3); x \u003c= min(W - 1, round(cx) + 3); x++) {\n        const e = hypot(x - cx, y - cy), p = y * W + x;\n        if (e \u003c best[p]) (best[p] = e), (own[p] = P.ak[i]);\n      }\n  });\n  under(P);\n}\n\n// What lies behind the lungs, breathed out, as colour times cover: the\n// larynx, the diaphragm and, dim under it, the liver and the stomach.\nfunction under(P) {\n  const { und, ua } = P;\n  const lay = (p, r, g, b, a) => {\n    if (a \u003c= 0) return;\n    const o = p * 3;\n    (und[o] += (r - und[o]) * a), (und[o + 1] += (g - und[o + 1]) * a), (und[o + 2] += (b - und[o + 2]) * a), (ua[p] += (1 - ua[p]) * a);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, t = y - d0(x), ax = abs(x - 32);\n    if (t > 3) {\n      const xb = 37 + 3 * sin(y * 0.21), f = (1 - 0.55 * sm(3, 20, t)) * (0.7 + 0.5 * vn(x * 0.17, y * 0.17)) * (0.4 + 0.6 * sm(0.3, 2, abs(x - xb)));\n      x \u003c xb ? lay(p, 60 * f, 20 * f, 22 * f, cl(t - 3, 0, 1)) : lay(p, 50 * f, 30 * f, 44 * f, cl(t - 3, 0, 1));\n    }\n    // The diaphragm: a band of muscle with a lit upper face, its tendon pale\n    // in the middle under the heart.\n    if (t > -0.5 && t \u003c 4) {\n      const ten = sm(24, 29, x) * sm(43, 38, x), st = 0.8 + 0.2 * sin(x * 1.9 + t * 0.9), lit = 1 + 0.45 * sm(1.6, 0, t);\n      lay(p, mix(232 * st, 214, ten) * 0.72 * lit, mix(82 * st, 198, ten) * 0.66 * lit, mix(96, 188, ten) * 0.66 * lit, cl(min(t + 0.5, 4 - t), 0, 1));\n    }\n    if (y \u003c 19) {\n      const hy = 3.4 + 0.03 * ax * ax;\n      if (ax \u003c 9.5) lay(p, 200, 192, 176, 0.5 * cl(1 - abs(y - hy) / 0.9, 0, 1));\n      const top = 6 + 2.2 * max(0, 1 - ax / 2.4), hw = 7.4 - 0.42 * (y - 6), e = min(y - top, 14.6 - y, hw - ax);\n      // The thyroid cartilage, its left plate lit and the right in shade.\n      if (e > -0.5) lay(p, 206, 196, 184, cl(e + 0.5, 0, 1) * (0.42 + 0.2 * exp(-((ax / 1.8) ** 2)) + 0.25 * sm(1.2, 0.2, e)) * (x \u003c 32 ? 1.05 : 0.78));\n      if (y > 15 && y \u003c 17.6 && ax \u003c 4.9) lay(p, 214, 204, 192, 0.55 * cl(4.9 - ax, 0, 1));\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.t += dt;\n  P.air = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3), dep = cl(k[2], 0, 1), alt = cl(k[3], 0, 1);\n  const bpm = (8 + 4.5 * rate + 12 * max(0, rate - 2) ** 2) * (1 + 0.45 * alt);\n  P.D = (0.5 + 0.5 * dep) * (1 - 0.4 * sm(2, 3, rate)) * (1 + 0.22 * alt);\n  if (input.btnPressed && input.btnPressed[0] && P.ct \u003c 0) (P.ct = 0), (P.cv = P.vol), (P.cn = 0);\n  let vol = 0, envIn = 0, envOut = 0, Fin = -1, Fx = 2;\n  P.bf = [];\n  P.jolt = 0;\n  if (P.ct >= 0) {\n    // A gasp, then three coughs, each a jolt and a burst of warm air up the tree.\n    const c = (P.ct += dt);\n    let j = 0;\n    while (j \u003c CK.length - 4 && c > CK[j + 2]) j += 2;\n    vol = mix(j ? CK[j + 1] : P.cv, CK[j + 3], sm(CK[j], CK[j + 2], c));\n    if (c \u003c 0.4) (envIn = sin((PI * c) / 0.4) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(c / 0.3, 0, 1)) ** 2));\n    for (const tc of CT) {\n      const u = c - tc;\n      if (u > 0 && u \u003c 0.7) P.bf.push(1 - u * 3.2), (P.jolt = max(P.jolt, 2.4 * exp(-u / 0.08)));\n    }\n    if (P.cn \u003c 3 && c > CT[P.cn] + 0.28) P.puffs.push([0, 2, rnd()]), P.cn++;\n    if (c > 1.9) (P.ct = -1), (P.ph = 0.9);\n  } else {\n    // In for 38% of a breath, out for half, then a short rest.\n    const p = (P.ph = (P.ph + (dt * bpm) / 60) % 1);\n    if (p \u003c 0.38) (vol = 0.5 - 0.5 * cos((PI * p) / 0.38)), (envIn = sin((PI * p) / 0.38) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(p / 0.3, 0, 1)) ** 2));\n    else if (p \u003c 0.88) {\n      const u = (p - 0.38) / 0.5;\n      (vol = 0.5 + 0.5 * cos(PI * u)), (envOut = sin(PI * u) ** 0.5), (Fx = 1.06 - 1.2 * sm(0.02, 0.8, u));\n    }\n    if (P.lp \u003c 0.64 && p >= 0.64) P.puffs.push([0, 1, rnd()]);\n    P.lp = p;\n  }\n  Object.assign(P, { vol, envIn, envOut, Fin, Fx });\n  // The alveoli the cold air has reached take up oxygen fast; the rest give it\n  // up slowly to the blood that carries it away.\n  const wS = max(0, 2 * P.air - 1), hi = 1 - 0.66 * alt - 0.14 * wS, { cd, cox, airK } = P;\n  for (let i = 0; i \u003c cd.length; i++) {\n    cox[i] += Fin > cd[i] ? (hi - cox[i]) * (1 - exp(-dt * 7)) : (0.05 - cox[i]) * (1 - exp(-dt * 0.85));\n    airK[i] = envIn * exp(-(((Fin - cd[i]) / 0.07) ** 2));\n  }\n  P.hp = (P.hp + (dt * (62 + 10 * rate + 40 * alt)) / 60) % 1;\n  P.hb = exp(-(((P.hp - 0.06) / 0.05) ** 2)) + 0.6 * exp(-(((P.hp - 0.3) / 0.05) ** 2));\n  P.puffs = P.puffs.filter((f) => (f[0] += dt) \u003c 5);\n}\n\n// Rest coordinates to the panel, breathed in by the per-row and per-column\n// scales: out to the sides, down with the diaphragm.\nlet FX = 0, FY = 0;\nfunction fw(P, xr, yr) {\n  const { SX, KY } = P, kx = cl(32 + (xr - 32) * SX[cl(round(yr), 0, H - 1)], 0, 62.99), ki = floor(kx);\n  FY = A0 + (yr - A0) * (KY[ki] + (KY[ki + 1] - KY[ki]) * (kx - ki));\n  FX = 32 + (xr - 32) * SX[cl(round(FY), 0, H - 1)];\n}\n\nfunction alveoli(P) {\n  const { alvA, alvS, alvK, ax, ay, as } = P, rA = 1.02 + 0.52 * P.vol * P.D;\n  alvA.fill(0);\n  for (let i = 0; i \u003c ax.length; i++) {\n    fw(P, ax[i], ay[i]);\n    const cx = FX, cy = FY, r = rA * as[i], lim = (r + 0.5) ** 2;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n        const dx = x - cx, dy = y - cy, e2 = dx * dx + dy * dy;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x;\n        const q = e / r, hx = dx + 0.4 * r, hy = dy + 0.45 * r, hl = max(0, 1 - sqrt(hx * hx + hy * hy) / (0.75 * r));\n        const s = 0.72 + 0.28 * sqrt(max(0, 1 - q * q)) + 0.38 * hl * hl;\n        if (a * s > alvA[p] * alvS[p]) (alvA[p] = a), (alvS[p] = s), (alvK[p] = i);\n      }\n  }\n}\n\nfunction tree(P) {\n  const { seg: S, trA, trV, trS, trG, trH } = P, dil = 1 + 0.1 * P.vol * P.D;\n  trA.fill(0);\n  trH.fill(0);\n  for (let j = 0; j \u003c S.length; j += 8) {\n    fw(P, S[j], S[j + 1]);\n    const x0 = FX, y0 = FY;\n    fw(P, S[j + 2], S[j + 3]);\n    const ex = FX - x0, ey = FY - y0, l2 = ex * ex + ey * ey || 1e-6, r = S[j + 4] * dil, g = S[j + 5], da = S[j + 6], db = S[j + 7], lim = (r + 1.7) ** 2, hr = min(1, r);\n    for (let y = max(0, floor(min(y0, FY) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, FY) + r + 1)); y++)\n      for (let x = max(0, floor(min(x0, FX) - r - 1)); x \u003c= min(W - 1, ceil(max(x0, FX) + r + 1)); x++) {\n        const t = cl(((x - x0) * ex + (y - y0) * ey) / l2, 0, 1), px = x - x0 - ex * t, py = y - y0 - ey * t, e2 = px * px + py * py;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x, h = cl(r + 1.7 - e, 0, 1) * hr;\n        if (h > trH[p]) trH[p] = h;\n        if (a > trA[p]) (trA[p] = a), (trS[p] = da + (db - da) * t), (trV[p] = e / r), (trG[p] = g);\n      }\n  }\n}\n\n// The collarbones and ten ribs, faint arcs that lift and spread on a breath.\nfunction ribs(P) {\n  const { rib, SX } = P, v = P.vol * P.D;\n  rib.fill(0);\n  const dot = (fx, fy, rad, k) => {\n    for (let y = max(0, round(fy) - 1); y \u003c= min(H - 1, round(fy) + 1); y++)\n      for (let x = max(0, round(fx) - 1); x \u003c= min(W - 1, round(fx) + 1); x++) {\n        const a = cl(rad + 0.5 - sqrt((x - fx) ** 2 + (y - fy) ** 2), 0, 1) * k, p = y * W + x;\n        if (a > rib[p]) rib[p] = a;\n      }\n  };\n  for (let i = 0; i \u003c= 10; i++)\n    for (const s of [-1, 1]) {\n      if (i === 0) {\n        for (let n = 0; n \u003c= 50; n++) {\n          const u = n / 50;\n          dot(32 + s * (4.5 + 21 * u), 18.6 - 4.2 * u + 1.4 * sin(PI * u) - 1.2 * v, 0.5 + 0.4 * (2 * u - 1) ** 2, 0.85);\n        }\n        continue;\n      }\n      const yr = 23 + (i - 1) * 8.4, y0 = yr - v * (1 + 0.42 * i), hw = (1.5 + 28.4 * (1 - exp(-(yr - 15) / 14))) * SX[round(yr)];\n      const rx = hw - 3, ry = (5.5 + 0.55 * i) * (1 - 0.25 * v), n = ceil((rx + ry) * 2.2);\n      for (let m = 0; m \u003c= n; m++) {\n        const th = (1.62 * m) / n;\n        dot(32 + s * (3 + rx * sin(th)), y0 + ry * (1 - cos(th)), 0.7, sm(0.2, 0.6, th));\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cox) return;\n  const { SX, KY, sd, own, cox, cb, airK, und, ua, alvA, alvS, alvK, trA, trV, trS, trG, trH, rib, O, ak, soot, GL } = P, dm = 1 / P.dmax;\n  const t = P.t, v = P.vol * P.D, air = P.air, hb = P.hb, { envIn, envOut, Fin, Fx, bf } = P;\n  const wC = max(0, 1 - 2 * air), wW = 1 - abs(2 * air - 1), wS = max(0, 2 * air - 1);\n  const pal = (c, w, s) => [0, 1, 2].map((i) => c[i] * wC + w[i] * wW + s[i] * wS);\n  const bgT = pal([3, 7, 18], [16, 26, 48], [62, 50, 32]), bgB = pal([2, 4, 12], [8, 14, 30], [36, 28, 20]), glo = pal([8, 18, 40], [22, 38, 64], [40, 30, 18]);\n  const cold = pal([150, 205, 255], [215, 238, 255], [196, 178, 128]), warm = pal([255, 196, 160], [255, 224, 206], [190, 160, 130]);\n  const puffC = pal([255, 214, 196], [236, 242, 255], [168, 158, 144]), puffK = 0.6 * wC + 1.5 * wW + 0.7 * wS;\n  const oxA = [240 - 64 * wS, 46 + 26 * wS, 58 + 20 * wS];\n  for (let y = 0; y \u003c H; y++) SX[y] = 1 + 0.085 * v * (0.25 + 0.75 * sm(15, 115, y));\n  for (let x = 0; x \u003c W; x++) KY[x] = 1 + 0.14 * v * GX[x];\n  alveoli(P);\n  tree(P);\n  ribs(P);\n  // The breath leaving at the top: each puff rises, spreads and thins.\n  const pf = [];\n  for (const [age, str, sd0] of P.puffs) {\n    const R = 3 + (5 + 8 * wW) * age;\n    pf.push(32 + (sd0 - 0.5) * 8, 6 - 3.2 * age, R, str * sm(0, 0.25, age) * exp(-age / (0.9 + 1.6 * wW)), sd0 * 40);\n  }\n  const hs = 1 / (1 - 0.035 * hb);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const fy = y / 127, gl = GL[p];\n      let hz = 1;\n      if (wS > 0) hz = 1 + wS * (0.18 * sin(x * 0.2 + y * 0.05 + t * 0.6) + 0.18 * sin(y * 0.13 - x * 0.06 - t * 0.35));\n      for (let c = 0; c \u003c 3; c++) C[c] = (bgT[c] + (bgB[c] - bgT[c]) * fy + glo[c] * gl) * hz;\n      const xr = cl(32 + (x - 32) / SX[y], 0, 62.999), yr = cl(A0 + (y - A0) / KY[x], 0, 126.999);\n      const xi = xr | 0, yi = yr | 0, fx = xr - xi, fz = yr - yi, q = yi * W + xi;\n      if (ua[q] + ua[q + 1] + ua[q + W] + ua[q + W + 1] > 0) {\n        const w0 = (1 - fx) * (1 - fz) * ua[q], w1 = fx * (1 - fz) * ua[q + 1], w2 = (1 - fx) * fz * ua[q + W], w3 = fx * fz * ua[q + W + 1], a = 1 - w0 - w1 - w2 - w3;\n        const o0 = q * 3, o2 = o0 + W * 3;\n        for (let c = 0; c \u003c 3; c++) C[c] = C[c] * a + und[o0 + c] * w0 + und[o0 + 3 + c] * w1 + und[o2 + c] * w2 + und[o2 + 3 + c] * w3;\n      }\n      // The heart, dim behind the lungs, its apex down to the left.\n      if (xr > 20 && xr \u003c 56 && yr > 60 && yr \u003c 110) {\n        const dx = xr - 36.6, dy = yr - 86, hv = (dx * 0.6 + dy * 0.8) * hs, hu = (dx * 0.8 - dy * 0.6) * hs, eu = hu / (12.5 * (1 - 0.36 * sm(-6, 19, hv))), ev = hv / 19;\n        const a = cl((1 - sqrt(eu * eu + ev * ev)) * 9, 0, 1);\n        if (a > 0) {\n          const k = (0.4 + 0.32 * hb) * (0.65 + 0.45 * sm(9, -9, hu));\n          bl(150 * k, 26 * k, 44 * k, a);\n        }\n      }\n      // The lung: a dusky body, the grape clusters of alveoli, the capillary\n      // net shimmering on them, the pleura at the edge.\n      const s = samp(sd, xr, yr), qn = round(yr) * W + round(xr);\n      let m = 0;\n      if (s \u003c 1.2) {\n        const c = own[qn], ox = c >= 0 ? cox[c] : 0.3;\n        m = cl(0.5 - s, 0, 1);\n        if (m > 0) bl(24 + 56 * ox, 14 - 4 * ox, 50 - 20 * ox, 0.92 * m);\n        const aa = alvA[p];\n        if (aa > 0) {\n          const i = alvK[p], cc = ak[i], o = cox[cc], sh = alvS[p] * cb[cc] * (soot[i] \u003c wS * 0.4 ? 0.3 : 1), af = 0.4 * airK[cc];\n          for (let c = 0; c \u003c 3; c++) C[c] += ((DA[c] + (oxA[c] - DA[c]) * o) * sh + cold[c] * af - C[c]) * aa;\n        }\n        const cv = hash(qn, 5);\n        if (m > 0 && cv > 0.6) {\n          const k = (cv - 0.35) * (0.75 + 0.75 * sin(t * 6 + cv * 90 + 2 * hb)) * (0.12 + 0.34 * ox) * m;\n          (C[0] += 230 * k), (C[1] += 30 * k), (C[2] += 50 * k);\n        }\n        const rm = cl(1 - abs(s + 0.45) / 0.75, 0, 1) * 0.5;\n        if (rm > 0) bl(126 + 129 * ox, 100 + 24 * ox, 214 - 70 * ox, rm);\n        // A shadow along each airway lifts the tree off the alveoli.\n        bl(0, 0, 0, trH[p] * 0.5 * m);\n      }\n      // The airways, and the air in them.\n      const ta = trA[p];\n      if (ta > 0) {\n        const gg = trG[p], vv = trV[p], d = trS[p] * dm, wc = WC[gg], al = AG[gg] * ta;\n        let wb = 0.85;\n        if (gg \u003c= 1) {\n          const ring = 0.5 + 0.5 * cos(trS[p] * 2.73);\n          wb = (0.5 + 0.5 * sm(0.35, 0.95, vv)) * (0.66 + 0.44 * ring * ring);\n        } else if (gg \u003c= 3) wb = 0.65 + 0.35 * sm(0.3, 1, vv);\n        bl(wc[0] * wb, wc[1] * wb, wc[2] * wb, al);\n        let ca = 0, wa = 0;\n        if (envIn > 0 && d \u003c Fin) ca = envIn * (0.3 + 0.7 * exp(-(((Fin - d) / 0.05) ** 2)));\n        if (envOut > 0 && d > Fx) wa = envOut * (0.24 + 0.76 * exp(-(((d - Fx) / 0.05) ** 2)));\n        for (const f of bf) wa += 1.3 * exp(-(((d - f) / 0.06) ** 2)) + (d > f ? 0.25 : 0);\n        const lf = (gg \u003c= 1 ? 1 - 0.5 * sm(0.55, 1, vv) : 1) * ta * (gg === 9 ? 0.8 : 0.9);\n        for (let c = 0; c \u003c 3; c++) C[c] += (cold[c] * ca + warm[c] * wa) * lf;\n      }\n      const rb = rib[p];\n      if (rb > 0) bl(220, 210, 196, rb * (0.42 + 0.1 * m));\n      if (y \u003c 48 && pf.length) {\n        let pa = 0;\n        for (let j = 0; j \u003c pf.length; j += 5) {\n          const dx = (x - pf[j]) / (pf[j + 2] * 1.4), dy = (y - pf[j + 1]) / pf[j + 2], e = dx * dx + dy * dy;\n          if (e \u003c 4) pa += pf[j + 3] * exp(-e * 1.4) * cl(0.4 + 1.4 * (vn(x * 0.2 + pf[j + 4], y * 0.2 + t * 0.9) - 0.5) + 0.5 * exp(-e * 3), 0, 1.4);\n        }\n        if (pa > 0) bl(puffC[0], puffC[1], puffC[2], min(1, pa * puffK));\n      }\n      if (wS > 0) bl(120, 96, 62, 0.14 * wS * hz);\n      O.set(C, p * 3);\n    }\n  // A cough jolts the whole chest up.\n  const jl = round(P.jolt);\n  for (let y = 0; y \u003c H; y++) {\n    const o = min(H - 1, y + jl) * W * 3;\n    for (let x = 0; x \u003c W; x++) display.setPixel(x, y, min(255, O[o + x * 3]) | 0, min(255, O[o + x * 3 + 1]) | 0, min(255, O[o + x * 3 + 2]) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Air","min":0,"max":1,"about":"What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli."},{"name":"Rate","min":0.2,"max":3,"about":"Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3."},{"name":"Depth","min":0,"max":1,"about":"A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far."},{"name":"Altitude","min":0,"max":1,"about":"Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own."}],"start":[0,2,0,0.06],"measures":{"motion":0.3669,"detail":0.0863,"edges":0.4238,"complexity":2.0569,"coverage":0.8446,"colour":0.207,"drift":0.1347},"knobResponse":[0.0972,0.1294,0.1076,0.1068]},{"slug":"brushstrokes","title":"Brushstrokes","family":"noise","round":17,"note":"반 고흐의 「별이 빛나는 밤」을 짧고 두꺼운 붓질로 칠하고 또 칠해요. 흐름을 따라 놓인 군청과 코발트 붓질이 노란 별무리와 초승달을 감아 돌고, 불꽃처럼 솟은 사이프러스 옆 마을에 창이 켜져요.","idea":"A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","layer":{"id":"layer-brushstrokes","type":"code","name":"brushstrokes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow."},{"name":"Flow","min":0.2,"max":3,"about":"How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower."},{"name":"Length","min":4,"max":12,"about":"How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones."},{"name":"Swirl","min":0,"max":1,"about":"How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies."}],"start":[0,2,4,0.06],"measures":{"motion":0.0383,"detail":0.0951,"edges":0.2993,"complexity":2.3542,"coverage":0.998,"colour":0.5763,"drift":0.0278},"knobResponse":[0.4036,0.1538,0.1578,0.1518]},{"slug":"cam-wave","title":"Cam Wave","family":"machine","round":15,"note":"발치의 캠축이 돌면 캠마다 막대를 밀어 올리고, 막대 끝에 걸린 구슬 띠가 물결이 되어 옆으로 흘러가요. K1 을 누르면 캠이 둥근 편심에서 달걀꼴, 달팽이꼴로 바뀌어요.","idea":"A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.","buttons":"K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.","code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-cam-wave","type":"code","name":"cam-wave","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20."},{"name":"Cams","min":6,"max":12,"about":"How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12."},{"name":"Phase","min":-1,"max":1,"about":"How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second."}],"start":[0,2,6,0.06],"measures":{"motion":0.4062,"detail":0.0758,"edges":0.6341,"complexity":0.5068,"coverage":0.4175,"colour":0.2693,"drift":0.1185},"knobResponse":[0.0838,0.0978,0.1488,0.0628]},{"slug":"cat-eye","title":"Cat Eye","family":"cosmetic","round":34,"note":"보랏빛 젤리 폴리시 밑으로 보이지 않는 막대 자석이 미끄러지면, 자성 반짝이가 자기장을 따라 돌아 자기장이 표면과 나란한 자리에 날카로운 빛줄기 하나가 서고 그 양옆은 곧추선 반짝이로 짙어져요. 자석이 지나간 자리의 반짝이는 1.8초에 걸쳐 흩어진 은하 같은 반짝임으로 돌아가요. K3 은 막대를 둘로 늘려 줄 두 개나 별 모양을 세우고, K1 을 누르면 자석이 멀어졌다 돌아와요.","idea":"A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.","buttons":"K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.","code":"// ===== Patternflow pattern =====\n// Title:   Cat Eye\n// Family:  cosmetic\n// Idea:    A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after magnetic cat-eye gel nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1\n//\n// Knob 1: Hue. The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne.\n// Knob 2: Speed. At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Magnet. At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star.\n// Knob 4: Depth. How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide.\n// Buttons: K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.\n\nconst W = 64, H = 128, N = W * H;\n// The magnet is a flat bar 76 LEDs long, magnetised across its width, lying\n// along the panel under the polish: nine dipoles in a row.\nconst BAR = 76, PTS = 9;\nconst { floor, min, max, sqrt, sin, cos, exp, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * Math.log(u)) * cos(2 * PI * v);\n}\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, mag: 0, depth: 0.06, t: 0, warm: false, pull: 0, pullT: -1,\n    A: new Float32Array(N), TH: new Float32Array(N), JIT: new Float32Array(N), TEX: new Float32Array(N), SZ: new Float32Array(N),\n    R0: new Float32Array(N), RW: new Float32Array(N), RP: new Float32Array(N),\n    dip: new Float64Array(6 * 2 * PTS), nd: 0, ref: 1,\n  };\n  for (let p = 0; p \u003c N; p++) {\n    S.JIT[p] = 0.1 * gauss();\n    S.TEX[p] = 0.8 + 0.4 * random();\n    S.SZ[p] = 0.3 + 1.2 * random() ** 2;\n    S.R0[p] = (random() - 0.5) * PI;\n    S.RW[p] = 0.3 + 0.9 * random();\n    S.RP[p] = 2 * PI * random();\n  }\n  params.s = S;\n}\n\n// A second bar has strength |Magnet|. Below 0 it lies beside the first, 0.9\n// of the depth away and poles reversed, for a double line; above 0 it lies\n// across the first, for a star.\n\nfunction magnets(S) {\n  const sp = S.t, d = 10 + 30 * S.depth;\n  const cx = 32 + 15 * sin((2 * PI * sp) / 7), cy = 64 + 16 * sin((2 * PI * sp) / 11 + 1);\n  const ang = 0.3 * sin((2 * PI * sp) / 17);\n  // Along the bar (down the panel) and across it.\n  const lx = -sin(ang), ly = cos(ang), mx = cos(ang), my = sin(ang);\n  const k = S.mag, away = 1 + 3 * S.pull, dip = S.dip;\n  S.nd = 0;\n  const bar = (x, y, ax, ay, ex, ey, st) => {\n    for (let i = 0; i \u003c PTS; i++) {\n      const u = (i / (PTS - 1) - 0.5) * BAR, o = 6 * S.nd++;\n      dip[o] = x + u * ax;\n      dip[o + 1] = y + u * ay;\n      dip[o + 2] = d * away;\n      dip[o + 3] = ex;\n      dip[o + 4] = ey;\n      dip[o + 5] = st / PTS;\n    }\n  };\n  if (k \u003c 0) {\n    const s = 0.9 * d * -k;\n    bar(cx - s * mx, cy - s * my, lx, ly, mx, my, 1);\n    bar(cx + s * mx, cy + s * my, lx, ly, -mx, -my, -k);\n  } else {\n    bar(cx, cy, lx, ly, mx, my, 1);\n    if (k > 0) bar(cx, cy, mx, my, -lx, -ly, k);\n  }\n  // The field at the surface right over the middle of one bar at this depth\n  // is the scale the flakes answer to.\n  let ref = 0;\n  for (let i = 0; i \u003c PTS; i++) {\n    const u = (i / (PTS - 1) - 0.5) * BAR, r2 = u * u + d * d, ir = 1 / sqrt(r2);\n    ref += (ir * ir * ir) / PTS;\n  }\n  S.ref = ref;\n}\n\nfunction step(S, dt) {\n  const sp = S.speed / 2, ds = dt * sp;\n  S.t += ds;\n  if (S.pullT >= 0) {\n    // Away in 0.3 s, held 2.5 s, back in 0.5 s.\n    S.pullT += ds;\n    const u = S.pullT;\n    S.pull = u \u003c 0.3 ? u / 0.3 : u \u003c 2.8 ? 1 : u \u003c 3.3 ? 1 - (u - 2.8) / 0.5 : 0;\n    if (u >= 3.3) S.pullT = -1;\n  }\n  magnets(S);\n  const { A, TH, dip } = S, iref = 1 / S.ref, nd = S.nd;\n  const kOn = 1 - exp(-ds / 0.15), kOff = 1 - exp(-ds / 1.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let bx = 0, by = 0, bz = 0;\n      for (let o = 0; o \u003c 6 * nd; o += 6) {\n        const ex = dip[o + 3], ey = dip[o + 4], st = dip[o + 5];\n        const rx = x + 0.5 - dip[o], ry = y + 0.5 - dip[o + 1], rz = dip[o + 2];\n        const r2 = rx * rx + ry * ry + rz * rz, ir = 1 / sqrt(r2), i3 = st * ir * ir * ir, md = 3 * (ex * rx + ey * ry) * ir * ir;\n        bx += i3 * (md * rx - ex);\n        by += i3 * (md * ry - ey);\n        bz += i3 * md * rz;\n      }\n      const bh = sqrt(bx * bx + by * by), b = sqrt(bh * bh + bz * bz) * iref;\n      const p = y * W + x, at = 1 - exp(-b / 0.25);\n      A[p] += (at - A[p]) * (at > A[p] ? kOn : kOff);\n      // Tilt of the field from the surface, -pi/2..pi/2; a flake's axis is a\n      // line, so tilts half a turn apart are the same.\n      const tt = atan2(bz, bh);\n      let dlt = tt - TH[p];\n      if (dlt > PI / 2) dlt -= PI;\n      else if (dlt \u003c -PI / 2) dlt += PI;\n      TH[p] += dlt * (1 - exp(-ds * (1 + 10 * at) / 0.6));\n      if (TH[p] > PI / 2) TH[p] -= PI;\n      else if (TH[p] \u003c -PI / 2) TH[p] += PI;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.mag = cl(k[2], -1, 1);\n  S.depth = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on flakes that have followed the magnet for two seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 60; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.pullT \u003c 0) S.pullT = 0;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { A, TH, JIT, TEX, SZ, R0, RW, RP } = S, h = S.hue + 0.74, t = S.t;\n  // Orange and yellow jelly at level 40 reads brown on the panel. Round\n  // there (hue 0.0 to 0.22) the base sinks toward black, as a gold cat eye\n  // over a black base coat, and the band's glow turns paler and brighter.\n  const hh = h - floor(h), wy = max(0, 1 - ((hh - 0.11) / 0.12) ** 2);\n  const body = [0, 0, 0], glint = [0, 0, 0], vel = [0, 0, 0];\n  hsv(h, 0.95 - 0.2 * wy, 1 - 0.7 * wy, body);\n  hsv(h + 0.02, 0.25 - 0.1 * wy, 1, glint);\n  hsv(h + 0.01, 0.6 - 0.25 * wy, 1 + 0.4 * wy, vel);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, a = A[p], th = TH[p], s2 = sin(th) * sin(th);\n      // Where the flake points: along the field as far as it is aligned,\n      // otherwise its own slow tumble.\n      const free = 6 * (R0[p] + 0.7 * sin(RW[p] * t + RP[p]));\n      const phi = a * (th + JIT[p]) + (1 - a) * free;\n      const g = exp(-(phi * phi) / (2 * 0.12 * 0.12));\n      const v = a * a * exp(-(th * th) / (2 * 0.5 * 0.5));\n      const lb = 40 * TEX[p] * (1 - 0.5 * a * s2), lg = 255 * g * (a + 0.3 * (1 - a) * SZ[p]), lv = 150 * v;\n      const r = body[0] * lb + glint[0] * lg + vel[0] * lv;\n      const gg = body[1] * lb + glint[1] * lg + vel[1] * lv;\n      const bb = body[2] * lb + glint[2] * lg + vel[2] * lv;\n      display.setPixel(x, y, round(min(255, r)), round(min(255, gg)), round(min(255, bb)));\n    }\n}\n","layer":{"id":"layer-cat-eye","type":"code","name":"cat-eye","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cat Eye\n// Family:  cosmetic\n// Idea:    A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after magnetic cat-eye gel nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1\n//\n// Knob 1: Hue. The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne.\n// Knob 2: Speed. At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Magnet. At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star.\n// Knob 4: Depth. How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide.\n// Buttons: K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.\n\nconst W = 64, H = 128, N = W * H;\n// The magnet is a flat bar 76 LEDs long, magnetised across its width, lying\n// along the panel under the polish: nine dipoles in a row.\nconst BAR = 76, PTS = 9;\nconst { floor, min, max, sqrt, sin, cos, exp, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * Math.log(u)) * cos(2 * PI * v);\n}\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, mag: 0, depth: 0.06, t: 0, warm: false, pull: 0, pullT: -1,\n    A: new Float32Array(N), TH: new Float32Array(N), JIT: new Float32Array(N), TEX: new Float32Array(N), SZ: new Float32Array(N),\n    R0: new Float32Array(N), RW: new Float32Array(N), RP: new Float32Array(N),\n    dip: new Float64Array(6 * 2 * PTS), nd: 0, ref: 1,\n  };\n  for (let p = 0; p \u003c N; p++) {\n    S.JIT[p] = 0.1 * gauss();\n    S.TEX[p] = 0.8 + 0.4 * random();\n    S.SZ[p] = 0.3 + 1.2 * random() ** 2;\n    S.R0[p] = (random() - 0.5) * PI;\n    S.RW[p] = 0.3 + 0.9 * random();\n    S.RP[p] = 2 * PI * random();\n  }\n  params.s = S;\n}\n\n// A second bar has strength |Magnet|. Below 0 it lies beside the first, 0.9\n// of the depth away and poles reversed, for a double line; above 0 it lies\n// across the first, for a star.\n\nfunction magnets(S) {\n  const sp = S.t, d = 10 + 30 * S.depth;\n  const cx = 32 + 15 * sin((2 * PI * sp) / 7), cy = 64 + 16 * sin((2 * PI * sp) / 11 + 1);\n  const ang = 0.3 * sin((2 * PI * sp) / 17);\n  // Along the bar (down the panel) and across it.\n  const lx = -sin(ang), ly = cos(ang), mx = cos(ang), my = sin(ang);\n  const k = S.mag, away = 1 + 3 * S.pull, dip = S.dip;\n  S.nd = 0;\n  const bar = (x, y, ax, ay, ex, ey, st) => {\n    for (let i = 0; i \u003c PTS; i++) {\n      const u = (i / (PTS - 1) - 0.5) * BAR, o = 6 * S.nd++;\n      dip[o] = x + u * ax;\n      dip[o + 1] = y + u * ay;\n      dip[o + 2] = d * away;\n      dip[o + 3] = ex;\n      dip[o + 4] = ey;\n      dip[o + 5] = st / PTS;\n    }\n  };\n  if (k \u003c 0) {\n    const s = 0.9 * d * -k;\n    bar(cx - s * mx, cy - s * my, lx, ly, mx, my, 1);\n    bar(cx + s * mx, cy + s * my, lx, ly, -mx, -my, -k);\n  } else {\n    bar(cx, cy, lx, ly, mx, my, 1);\n    if (k > 0) bar(cx, cy, mx, my, -lx, -ly, k);\n  }\n  // The field at the surface right over the middle of one bar at this depth\n  // is the scale the flakes answer to.\n  let ref = 0;\n  for (let i = 0; i \u003c PTS; i++) {\n    const u = (i / (PTS - 1) - 0.5) * BAR, r2 = u * u + d * d, ir = 1 / sqrt(r2);\n    ref += (ir * ir * ir) / PTS;\n  }\n  S.ref = ref;\n}\n\nfunction step(S, dt) {\n  const sp = S.speed / 2, ds = dt * sp;\n  S.t += ds;\n  if (S.pullT >= 0) {\n    // Away in 0.3 s, held 2.5 s, back in 0.5 s.\n    S.pullT += ds;\n    const u = S.pullT;\n    S.pull = u \u003c 0.3 ? u / 0.3 : u \u003c 2.8 ? 1 : u \u003c 3.3 ? 1 - (u - 2.8) / 0.5 : 0;\n    if (u >= 3.3) S.pullT = -1;\n  }\n  magnets(S);\n  const { A, TH, dip } = S, iref = 1 / S.ref, nd = S.nd;\n  const kOn = 1 - exp(-ds / 0.15), kOff = 1 - exp(-ds / 1.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let bx = 0, by = 0, bz = 0;\n      for (let o = 0; o \u003c 6 * nd; o += 6) {\n        const ex = dip[o + 3], ey = dip[o + 4], st = dip[o + 5];\n        const rx = x + 0.5 - dip[o], ry = y + 0.5 - dip[o + 1], rz = dip[o + 2];\n        const r2 = rx * rx + ry * ry + rz * rz, ir = 1 / sqrt(r2), i3 = st * ir * ir * ir, md = 3 * (ex * rx + ey * ry) * ir * ir;\n        bx += i3 * (md * rx - ex);\n        by += i3 * (md * ry - ey);\n        bz += i3 * md * rz;\n      }\n      const bh = sqrt(bx * bx + by * by), b = sqrt(bh * bh + bz * bz) * iref;\n      const p = y * W + x, at = 1 - exp(-b / 0.25);\n      A[p] += (at - A[p]) * (at > A[p] ? kOn : kOff);\n      // Tilt of the field from the surface, -pi/2..pi/2; a flake's axis is a\n      // line, so tilts half a turn apart are the same.\n      const tt = atan2(bz, bh);\n      let dlt = tt - TH[p];\n      if (dlt > PI / 2) dlt -= PI;\n      else if (dlt \u003c -PI / 2) dlt += PI;\n      TH[p] += dlt * (1 - exp(-ds * (1 + 10 * at) / 0.6));\n      if (TH[p] > PI / 2) TH[p] -= PI;\n      else if (TH[p] \u003c -PI / 2) TH[p] += PI;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.mag = cl(k[2], -1, 1);\n  S.depth = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on flakes that have followed the magnet for two seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 60; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.pullT \u003c 0) S.pullT = 0;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { A, TH, JIT, TEX, SZ, R0, RW, RP } = S, h = S.hue + 0.74, t = S.t;\n  // Orange and yellow jelly at level 40 reads brown on the panel. Round\n  // there (hue 0.0 to 0.22) the base sinks toward black, as a gold cat eye\n  // over a black base coat, and the band's glow turns paler and brighter.\n  const hh = h - floor(h), wy = max(0, 1 - ((hh - 0.11) / 0.12) ** 2);\n  const body = [0, 0, 0], glint = [0, 0, 0], vel = [0, 0, 0];\n  hsv(h, 0.95 - 0.2 * wy, 1 - 0.7 * wy, body);\n  hsv(h + 0.02, 0.25 - 0.1 * wy, 1, glint);\n  hsv(h + 0.01, 0.6 - 0.25 * wy, 1 + 0.4 * wy, vel);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, a = A[p], th = TH[p], s2 = sin(th) * sin(th);\n      // Where the flake points: along the field as far as it is aligned,\n      // otherwise its own slow tumble.\n      const free = 6 * (R0[p] + 0.7 * sin(RW[p] * t + RP[p]));\n      const phi = a * (th + JIT[p]) + (1 - a) * free;\n      const g = exp(-(phi * phi) / (2 * 0.12 * 0.12));\n      const v = a * a * exp(-(th * th) / (2 * 0.5 * 0.5));\n      const lb = 40 * TEX[p] * (1 - 0.5 * a * s2), lg = 255 * g * (a + 0.3 * (1 - a) * SZ[p]), lv = 150 * v;\n      const r = body[0] * lb + glint[0] * lg + vel[0] * lv;\n      const gg = body[1] * lb + glint[1] * lg + vel[1] * lv;\n      const bb = body[2] * lb + glint[2] * lg + vel[2] * lv;\n      display.setPixel(x, y, round(min(255, r)), round(min(255, gg)), round(min(255, bb)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Magnet","min":-1,"max":1,"about":"At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star."},{"name":"Depth","min":0,"max":1,"about":"How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide."}],"start":[0,2,0,0.06],"measures":{"motion":0.3686,"detail":0.0762,"edges":0.2839,"complexity":2.114,"coverage":0.9599,"colour":0.1236,"drift":0.1602},"knobResponse":[0.1875,0.1414,0.1895,0.1794]},{"slug":"cat-map","title":"Cat Map","family":"noise","round":31,"note":"패널을 토러스로 보고 아르놀트의 고양이 사상을 두 번의 밀기로 나눠 움직여요. 과녁 무늬가 사선 줄무늬로 늘어나다 잡음이 되고, 한 바퀴의 절반쯤에 줄이 엇갈린 유령이 지나간 뒤 30초에 처음 그림으로 정확히 돌아와요. K1 을 누르면 돌아오기 네 걸음 앞으로 건너뛰어요.","idea":"The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.","buttons":"K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.","code":"// ===== Patternflow pattern =====\n// Title:   Cat Map\n// Family:  noise\n// Idea:    The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold's cat map (Vladimir Arnold, 1967), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3\n//\n// Knob 1: Hue. Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc.\n// Knob 2: Speed. At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long.\n// Knob 3: Twist. The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps.\n// Knob 4: Picture. The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays.\n// Buttons: K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, abs, sqrt, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mod = (v, m) => ((v % m) + m) % m;\n\n// One full step of the map on a permutation: perm[p] is the source LED whose\n// colour now sits at p. The first shear moves what sits at (x, y) to\n// (x + a y, y), the second moves (x, y) to (x, y + 2b x), so together\n// (x, y) -> (x + a y, 2b x + (1 + 2ab) y), determinant 1, exact on Z64 x Z128.\nfunction shearRows(a, from, to) {\n  for (let y = 0; y \u003c H; y++) {\n    const s = mod(a * y, W), o = y * W;\n    for (let x = 0; x \u003c W; x++) to[o + x] = from[o + ((x - s + W) & 63)];\n  }\n}\nfunction shearCols(b, from, to) {\n  for (let x = 0; x \u003c W; x++) {\n    const s = mod(2 * b * x, H);\n    for (let y = 0; y \u003c H; y++) to[y * W + x] = from[((y - s + H) & 127) * W + x];\n  }\n}\n\n// The four pictures as region numbers: 0 and 1 are the two main colours, 2\n// the light one. Each fills the whole panel.\nconst REG = [];\n{\n  for (let k = 0; k \u003c 4; k++) REG.push(new Uint8Array(N));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = x - 31.5, dy = y - 63.5, r = sqrt(dx * dx + dy * dy);\n      // Rings 7 LEDs wide round a disc, and a band corner to corner where\n      // the two ring colours trade places.\n      let g = r \u003c 9 ? 2 : floor((r - 9) / 7) & 1;\n      if (g \u003c 2 && abs(2 * dx + dy) / sqrt(5) \u003c 6) g = 1 - g;\n      REG[0][p] = g;\n      // Nested diamonds, 8 LEDs a band down the long axis, a light core.\n      const dd = abs(dx) + abs(dy) / 2;\n      REG[1][p] = dd \u003c 7 ? 2 : floor((dd - 7) / 6) & 1;\n      // Four quarters round a disc that swaps them, with a light rim.\n      const q = (dx \u003c 0) !== (dy \u003c 0) ? 1 : 0;\n      REG[2][p] = r \u003c 21 ? 1 - q : r \u003c 25 ? 2 : q;\n      // Twelve rays round a light disc and a light ring.\n      const ray = floor(((atan2(dy, dx) + PI) / (2 * PI)) * 12) & 1;\n      REG[3][p] = r \u003c 8 || (r > 30 && r \u003c 34) ? 2 : ray;\n    }\n}\n\n// How much of the picture survives after n steps of each twist, from the\n// rings picture: 0 for the whole picture, about 0.5 for static. It slows the\n// steps and holds the frames where something can be seen.\nfunction survey(t) {\n  let perm = new Int32Array(N), mid = new Int32Array(N), nxt = new Int32Array(N);\n  for (let i = 0; i \u003c N; i++) perm[i] = i;\n  const g = REG[0], out = [0];\n  for (let n = 1; n \u003c= 200; n++) {\n    shearRows(t, perm, mid);\n    shearCols(t, mid, nxt);\n    [perm, nxt] = [nxt, perm];\n    let d = 0, id = true;\n    for (let p = 0; p \u003c N; p++) {\n      const v = g[perm[p]] & 1;\n      if ((p & 63) \u003c 63) d += v !== (g[perm[p + 1]] & 1) ? 1 : 0;\n      if (p \u003c N - W) d += v !== (g[perm[p + W]] & 1) ? 1 : 0;\n      if (perm[p] !== p) id = false;\n    }\n    if (id) break;\n    out.push(d / (2 * N));\n  }\n  // out has one entry per state 0..P-1.\n  return out.map((v) => 1 - cl((v - 0.1) / 0.3, 0, 1));\n}\nconst SURVEY = [null, null, null, null, null];\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N);\n  params.s = {\n    perm: I(), mid: I(), nxt: I(), twist: 0, P: 64, st: null, n: 0, mode: 0, t: 0, first: true,\n    hue: -1, pic: -1, pal: new Float32Array(9), src: new Float32Array(N * 3), sh1: new Int32Array(H), sh2: new Int32Array(W), sp: 2,\n  };\n}\n\nfunction reset(S) {\n  for (let i = 0; i \u003c N; i++) S.perm[i] = i;\n  S.n = 0;\n  S.mode = 0;\n  S.t = 0;\n}\n\n// Seconds for the step out of state n, and for the hold at state n.\nfunction stepTime(S, n) {\n  const st = S.st, P = S.P, base = 1.2 / S.sp;\n  const s = max(st[n], st[(n + 1) % P]);\n  return base * (0.45 + 1.6 * s) * (1 + 1.5 * Math.exp(-(P - 1 - n) / 1.5));\n}\nfunction holdTime(S, n) {\n  const base = 1.2 / S.sp, s = S.st[n];\n  if (n === 0) return base * (S.first ? 2.3 : 4);\n  // The stretched stripes after one step and the ghost halfway hold for\n  // about half a second at Speed 2; frames of static do not hold at all.\n  return base * 3 * s * sqrt(s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.sp = cl(k[1], 0.2, 3);\n  S.hueK = k[0] || 0;\n  S.picK = cl(round(k[3]), 0, 3);\n  const tw = cl(round(k[2]), 1, 4);\n  if (tw !== S.twist) {\n    // A new twist is a new map: the picture comes back whole and starts over.\n    S.twist = tw;\n    S.st = SURVEY[tw] || (SURVEY[tw] = survey(tw));\n    S.P = S.st.length;\n    for (let y = 0; y \u003c H; y++) S.sh1[y] = tw * (y - 64);\n    for (let x = 0; x \u003c W; x++) S.sh2[x] = mod(2 * tw * x + 64, H) - 64;\n    reset(S);\n  }\n  const b = input.btnPressed || [];\n  if (b[0]) {\n    // Four steps short of the return, by running the map from the picture.\n    reset(S);\n    for (let n = 0; n \u003c S.P - 4; n++) {\n      shearRows(tw, S.perm, S.mid);\n      shearCols(tw, S.mid, S.perm);\n    }\n    S.n = S.P - 4;\n    S.first = false;\n  }\n  S.t += d;\n  if (S.mode === 0) {\n    if (S.t >= holdTime(S, S.n)) {\n      S.t = 0;\n      S.mode = 1;\n      shearRows(tw, S.perm, S.mid);\n    }\n  } else if (S.t >= stepTime(S, S.n)) {\n    shearCols(tw, S.mid, S.nxt);\n    [S.perm, S.nxt] = [S.nxt, S.perm];\n    S.n = (S.n + 1) % S.P;\n    if (S.n === 0) {\n      reset(S);\n      S.first = false;\n    }\n    S.t = 0;\n    S.mode = 0;\n  }\n}\n\n// Three colours: two strong ones half a turn apart and a light cream, the\n// strong pair kept close in brightness so the static stays soft.\nfunction paint(S) {\n  const h = S.hueK + 0.5, pal = S.pal;\n  hsv(h, 0.66, 1, pal, 0);\n  // A dark orange or yellow reads brown or olive, so the second colour\n  // lifts its light where its hue passes through them.\n  let h2 = h + 0.4;\n  h2 -= floor(h2);\n  hsv(h2, 0.6, 0.72 + 0.26 * max(0, 1 - abs(h2 - 0.13) / 0.11), pal, 3);\n  hsv(h + 0.62, 0.2, 1, pal, 6);\n  const g = REG[S.picK], src = S.src;\n  for (let p = 0; p \u003c N; p++) {\n    const c = g[p] * 3;\n    src[p * 3] = pal[c];\n    src[p * 3 + 1] = pal[c + 1];\n    src[p * 3 + 2] = pal[c + 2];\n  }\n  S.hue = S.hueK;\n  S.pic = S.picK;\n}\n\nconst ease = (u) => u * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.st) return;\n  if (S.hue !== S.hueK || S.pic !== S.picK) paint(S);\n  const src = S.src;\n  if (S.mode === 0) {\n    const perm = S.perm;\n    for (let y = 0, p = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, p++) {\n        const o = perm[p] * 3;\n        display.setPixel(x, y, src[o], src[o + 1], src[o + 2]);\n      }\n    return;\n  }\n  const u = S.t / stepTime(S, S.n);\n  if (u \u003c 0.5) {\n    // The rows slide: row y by a (y - 64), pivoting on the middle row, so the\n    // picture leans; each LED reads between the two it lies between.\n    const s = ease(u * 2), perm = S.perm;\n    for (let y = 0; y \u003c H; y++) {\n      const sh = s * S.sh1[y], o = y * W;\n      for (let x = 0; x \u003c W; x++) {\n        const pos = x - sh, i0 = floor(pos), f = pos - i0;\n        const A = perm[o + (i0 & 63)] * 3, B = perm[o + ((i0 + 1) & 63)] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  } else {\n    // The columns slide: column x by 2b x, wrapped to the nearer way round.\n    const s = ease(u * 2 - 1), mid = S.mid;\n    for (let x = 0; x \u003c W; x++) {\n      const sh = s * S.sh2[x];\n      for (let y = 0; y \u003c H; y++) {\n        const pos = y - sh, i0 = floor(pos), f = pos - i0;\n        const A = mid[(i0 & 127) * W + x] * 3, B = mid[((i0 + 1) & 127) * W + x] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-cat-map","type":"code","name":"cat-map","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cat Map\n// Family:  noise\n// Idea:    The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold's cat map (Vladimir Arnold, 1967), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3\n//\n// Knob 1: Hue. Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc.\n// Knob 2: Speed. At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long.\n// Knob 3: Twist. The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps.\n// Knob 4: Picture. The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays.\n// Buttons: K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, abs, sqrt, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mod = (v, m) => ((v % m) + m) % m;\n\n// One full step of the map on a permutation: perm[p] is the source LED whose\n// colour now sits at p. The first shear moves what sits at (x, y) to\n// (x + a y, y), the second moves (x, y) to (x, y + 2b x), so together\n// (x, y) -> (x + a y, 2b x + (1 + 2ab) y), determinant 1, exact on Z64 x Z128.\nfunction shearRows(a, from, to) {\n  for (let y = 0; y \u003c H; y++) {\n    const s = mod(a * y, W), o = y * W;\n    for (let x = 0; x \u003c W; x++) to[o + x] = from[o + ((x - s + W) & 63)];\n  }\n}\nfunction shearCols(b, from, to) {\n  for (let x = 0; x \u003c W; x++) {\n    const s = mod(2 * b * x, H);\n    for (let y = 0; y \u003c H; y++) to[y * W + x] = from[((y - s + H) & 127) * W + x];\n  }\n}\n\n// The four pictures as region numbers: 0 and 1 are the two main colours, 2\n// the light one. Each fills the whole panel.\nconst REG = [];\n{\n  for (let k = 0; k \u003c 4; k++) REG.push(new Uint8Array(N));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = x - 31.5, dy = y - 63.5, r = sqrt(dx * dx + dy * dy);\n      // Rings 7 LEDs wide round a disc, and a band corner to corner where\n      // the two ring colours trade places.\n      let g = r \u003c 9 ? 2 : floor((r - 9) / 7) & 1;\n      if (g \u003c 2 && abs(2 * dx + dy) / sqrt(5) \u003c 6) g = 1 - g;\n      REG[0][p] = g;\n      // Nested diamonds, 8 LEDs a band down the long axis, a light core.\n      const dd = abs(dx) + abs(dy) / 2;\n      REG[1][p] = dd \u003c 7 ? 2 : floor((dd - 7) / 6) & 1;\n      // Four quarters round a disc that swaps them, with a light rim.\n      const q = (dx \u003c 0) !== (dy \u003c 0) ? 1 : 0;\n      REG[2][p] = r \u003c 21 ? 1 - q : r \u003c 25 ? 2 : q;\n      // Twelve rays round a light disc and a light ring.\n      const ray = floor(((atan2(dy, dx) + PI) / (2 * PI)) * 12) & 1;\n      REG[3][p] = r \u003c 8 || (r > 30 && r \u003c 34) ? 2 : ray;\n    }\n}\n\n// How much of the picture survives after n steps of each twist, from the\n// rings picture: 0 for the whole picture, about 0.5 for static. It slows the\n// steps and holds the frames where something can be seen.\nfunction survey(t) {\n  let perm = new Int32Array(N), mid = new Int32Array(N), nxt = new Int32Array(N);\n  for (let i = 0; i \u003c N; i++) perm[i] = i;\n  const g = REG[0], out = [0];\n  for (let n = 1; n \u003c= 200; n++) {\n    shearRows(t, perm, mid);\n    shearCols(t, mid, nxt);\n    [perm, nxt] = [nxt, perm];\n    let d = 0, id = true;\n    for (let p = 0; p \u003c N; p++) {\n      const v = g[perm[p]] & 1;\n      if ((p & 63) \u003c 63) d += v !== (g[perm[p + 1]] & 1) ? 1 : 0;\n      if (p \u003c N - W) d += v !== (g[perm[p + W]] & 1) ? 1 : 0;\n      if (perm[p] !== p) id = false;\n    }\n    if (id) break;\n    out.push(d / (2 * N));\n  }\n  // out has one entry per state 0..P-1.\n  return out.map((v) => 1 - cl((v - 0.1) / 0.3, 0, 1));\n}\nconst SURVEY = [null, null, null, null, null];\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N);\n  params.s = {\n    perm: I(), mid: I(), nxt: I(), twist: 0, P: 64, st: null, n: 0, mode: 0, t: 0, first: true,\n    hue: -1, pic: -1, pal: new Float32Array(9), src: new Float32Array(N * 3), sh1: new Int32Array(H), sh2: new Int32Array(W), sp: 2,\n  };\n}\n\nfunction reset(S) {\n  for (let i = 0; i \u003c N; i++) S.perm[i] = i;\n  S.n = 0;\n  S.mode = 0;\n  S.t = 0;\n}\n\n// Seconds for the step out of state n, and for the hold at state n.\nfunction stepTime(S, n) {\n  const st = S.st, P = S.P, base = 1.2 / S.sp;\n  const s = max(st[n], st[(n + 1) % P]);\n  return base * (0.45 + 1.6 * s) * (1 + 1.5 * Math.exp(-(P - 1 - n) / 1.5));\n}\nfunction holdTime(S, n) {\n  const base = 1.2 / S.sp, s = S.st[n];\n  if (n === 0) return base * (S.first ? 2.3 : 4);\n  // The stretched stripes after one step and the ghost halfway hold for\n  // about half a second at Speed 2; frames of static do not hold at all.\n  return base * 3 * s * sqrt(s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.sp = cl(k[1], 0.2, 3);\n  S.hueK = k[0] || 0;\n  S.picK = cl(round(k[3]), 0, 3);\n  const tw = cl(round(k[2]), 1, 4);\n  if (tw !== S.twist) {\n    // A new twist is a new map: the picture comes back whole and starts over.\n    S.twist = tw;\n    S.st = SURVEY[tw] || (SURVEY[tw] = survey(tw));\n    S.P = S.st.length;\n    for (let y = 0; y \u003c H; y++) S.sh1[y] = tw * (y - 64);\n    for (let x = 0; x \u003c W; x++) S.sh2[x] = mod(2 * tw * x + 64, H) - 64;\n    reset(S);\n  }\n  const b = input.btnPressed || [];\n  if (b[0]) {\n    // Four steps short of the return, by running the map from the picture.\n    reset(S);\n    for (let n = 0; n \u003c S.P - 4; n++) {\n      shearRows(tw, S.perm, S.mid);\n      shearCols(tw, S.mid, S.perm);\n    }\n    S.n = S.P - 4;\n    S.first = false;\n  }\n  S.t += d;\n  if (S.mode === 0) {\n    if (S.t >= holdTime(S, S.n)) {\n      S.t = 0;\n      S.mode = 1;\n      shearRows(tw, S.perm, S.mid);\n    }\n  } else if (S.t >= stepTime(S, S.n)) {\n    shearCols(tw, S.mid, S.nxt);\n    [S.perm, S.nxt] = [S.nxt, S.perm];\n    S.n = (S.n + 1) % S.P;\n    if (S.n === 0) {\n      reset(S);\n      S.first = false;\n    }\n    S.t = 0;\n    S.mode = 0;\n  }\n}\n\n// Three colours: two strong ones half a turn apart and a light cream, the\n// strong pair kept close in brightness so the static stays soft.\nfunction paint(S) {\n  const h = S.hueK + 0.5, pal = S.pal;\n  hsv(h, 0.66, 1, pal, 0);\n  // A dark orange or yellow reads brown or olive, so the second colour\n  // lifts its light where its hue passes through them.\n  let h2 = h + 0.4;\n  h2 -= floor(h2);\n  hsv(h2, 0.6, 0.72 + 0.26 * max(0, 1 - abs(h2 - 0.13) / 0.11), pal, 3);\n  hsv(h + 0.62, 0.2, 1, pal, 6);\n  const g = REG[S.picK], src = S.src;\n  for (let p = 0; p \u003c N; p++) {\n    const c = g[p] * 3;\n    src[p * 3] = pal[c];\n    src[p * 3 + 1] = pal[c + 1];\n    src[p * 3 + 2] = pal[c + 2];\n  }\n  S.hue = S.hueK;\n  S.pic = S.picK;\n}\n\nconst ease = (u) => u * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.st) return;\n  if (S.hue !== S.hueK || S.pic !== S.picK) paint(S);\n  const src = S.src;\n  if (S.mode === 0) {\n    const perm = S.perm;\n    for (let y = 0, p = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, p++) {\n        const o = perm[p] * 3;\n        display.setPixel(x, y, src[o], src[o + 1], src[o + 2]);\n      }\n    return;\n  }\n  const u = S.t / stepTime(S, S.n);\n  if (u \u003c 0.5) {\n    // The rows slide: row y by a (y - 64), pivoting on the middle row, so the\n    // picture leans; each LED reads between the two it lies between.\n    const s = ease(u * 2), perm = S.perm;\n    for (let y = 0; y \u003c H; y++) {\n      const sh = s * S.sh1[y], o = y * W;\n      for (let x = 0; x \u003c W; x++) {\n        const pos = x - sh, i0 = floor(pos), f = pos - i0;\n        const A = perm[o + (i0 & 63)] * 3, B = perm[o + ((i0 + 1) & 63)] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  } else {\n    // The columns slide: column x by 2b x, wrapped to the nearer way round.\n    const s = ease(u * 2 - 1), mid = S.mid;\n    for (let x = 0; x \u003c W; x++) {\n      const sh = s * S.sh2[x];\n      for (let y = 0; y \u003c H; y++) {\n        const pos = y - sh, i0 = floor(pos), f = pos - i0;\n        const A = mid[(i0 & 127) * W + x] * 3, B = mid[((i0 + 1) & 127) * W + x] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long."},{"name":"Twist","min":1,"max":4,"about":"The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps."},{"name":"Picture","min":0,"max":3,"about":"The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays."}],"start":[0,2,1,0.06],"measures":{"motion":2.7145,"detail":0.107,"edges":0.6749,"complexity":0.5255,"coverage":1,"colour":0.5686,"drift":0.058},"knobResponse":[0.4614,0.2648,0.264,0.2979]},{"slug":"catastrophe-machine","title":"Catastrophe Machine","family":"physics","round":36,"note":"원판 테두리의 한 점에 고무줄 둘을 묶어 하나는 위의 고정점에, 하나는 아래를 좌우로 오가는 점 B 에 걸었어요. B 가 뾰족점 넷인 마름모, 곧 원판이 설 자리가 둘인 곳을 빠져나가는 순간 원판이 120도쯤 반대로 튀어서, B 의 자취가 가는 길과 오는 길에서 다른 색으로 남아요. K3 은 고무줄의 자연 길이를 줄여 마름모를 작게 하다가 1 에서 없애고, K1 을 누르면 B 가 축 건너편으로 건너뛰어요.","idea":"Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.","buttons":"K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.","code":"// ===== Patternflow pattern =====\n// Title:   Catastrophe Machine\n// Family:  physics\n// Idea:    Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Zeeman's catastrophe machine (Christopher Zeeman, 1972), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1\n//\n// Knob 1: Hue. Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown.\n// Knob 2: Speed. At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Tension. The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B.\n// Knob 4: Depth. The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all.\n// Buttons: K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.\n\nconst W = 64, H = 128, N = W * H;\n// The machine in disc radii: pivot O at the origin, anchor A at (0, AD),\n// bands of rest length L. On the panel one radius is SC LEDs, O sits at row\n// OY, and the anchor 5 rows from the top.\nconst AD = 2.5, L0 = 1, SC = 18.6, OX = 32, OY = 5 + SC * AD, NF = 360, NT = 180, TRAIL = 180, SNAPS = 24;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst toX = (x) => OX + SC * x, toY = (y) => OY - SC * y;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The energy V(t) = (|P-A| - L)+^2 / 2 + (|P-B| - L)+^2 / 2, P = (cos t, sin t),\n// a band pulling only while it is stretched, and its derivative in t: each\n// band adds its tension times the component of its direction along the rim.\nfunction energy(t, L, bx, by) {\n  const px = cos(t), py = sin(t);\n  const ea = max(0, sqrt(px * px + (py - AD) * (py - AD)) - L), eb = max(0, sqrt((px - bx) ** 2 + (py - by) ** 2) - L);\n  return 0.5 * (ea * ea + eb * eb);\n}\nfunction torque(t, L, bx, by) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), ux = px - bx, uy = py - by, db = sqrt(ux * ux + uy * uy);\n  return (max(0, da - L) * (ax * tx + ay * ty)) / da + (max(0, db - L) * (ux * tx + uy * ty)) / (db || 1e-9);\n}\n\n// The bifurcation set. At a fold the disc angle t is an equilibrium (V' = 0)\n// that is about to stop being a minimum (V'' = 0). For each t the band to B\n// leaves P along some direction u; V' = 0 fixes how far B must be, and the\n// direction is found where V'' changes sign. One point per t, so the 360\n// points run round the diamond in order, through its four cusps.\nfunction foldAt(t, L, be) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), uax = ax / da, uay = ay / da;\n  const ca = uax * tx + uay * ty, sa = uax * px + uay * py, ea = max(0, da - L);\n  const M = ea * ca, K = (da > L ? ca * ca : 0) + ea * ((1 - ca * ca) / da - sa);\n  const ux = cos(be), uy = sin(be), c = ux * tx + uy * ty, s = ux * px + uy * py;\n  if (abs(c) \u003c 1e-9) return null;\n  const e = -M / c;\n  if (e \u003c= 0) return null;\n  const d = L + e;\n  return [K + c * c + e * ((1 - c * c) / d - s), px - d * ux, py - d * uy, d];\n}\nfunction fold(S, L) {\n  S.L = L;\n  S.nf = 0;\n  if (L \u003c 0.02) return;\n  let guess = -1;\n  for (let i = 0; i \u003c NF; i++) {\n    const t = (2 * PI * i) / NF;\n    let found = null;\n    // Look near the last direction first, then all the way round.\n    const tries = guess \u003c 0 ? [[0, 2 * PI, 1440]] : [[guess - 0.25, guess + 0.25, 50], [0, 2 * PI, 1440]];\n    for (const [b0, b1, k] of tries) {\n      let prev = foldAt(t, L, b0), pb = b0;\n      for (let j = 1; j \u003c= k && !found; j++) {\n        const be = b0 + ((b1 - b0) * j) / k, cur = foldAt(t, L, be);\n        if (prev && cur && prev[0] * cur[0] \u003c= 0 && abs(cur[3] - prev[3]) \u003c 0.3 && cur[3] \u003c 8) {\n          let lo = pb, hi = be, flo = prev[0];\n          for (let q = 0; q \u003c 40; q++) {\n            const mid = (lo + hi) / 2, m = foldAt(t, L, mid);\n            if (!m) break;\n            if (m[0] * flo > 0) (lo = mid), (flo = m[0]);\n            else hi = mid;\n          }\n          found = foldAt(t, L, (lo + hi) / 2);\n          guess = (lo + hi) / 2;\n        }\n        prev = cur;\n        pb = be;\n      }\n      if (found) break;\n    }\n    if (found) {\n      S.FX[S.nf] = found[1];\n      S.FY[S.nf] = found[2];\n      S.nf++;\n    }\n  }\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c S.nf; i++) {\n    x0 = min(x0, S.FX[i]);\n    x1 = max(x1, S.FX[i]);\n    y0 = min(y0, S.FY[i]);\n    y1 = max(y1, S.FY[i]);\n  }\n  S.fx0 = x0;\n  S.fx1 = x1;\n  S.fy0 = y0;\n  S.fy1 = y1;\n  // The side cusps are the leftmost and rightmost points.\n  let iL = 0;\n  for (let i = 0; i \u003c S.nf; i++) if (S.FX[i] \u003c S.FX[iL]) iL = i;\n  S.ySide = S.nf ? S.FY[iL] : -2.5;\n}\n\n// Local minima of V over the rim, from 180 samples, each polished by a few\n// steps of descent. Returns how many; their angles land in S.mins.\nfunction minima(S, bx, by) {\n  const L = S.L, E = S.E;\n  for (let i = 0; i \u003c NT; i++) E[i] = energy((2 * PI * i) / NT, L, bx, by);\n  let n = 0;\n  for (let i = 0; i \u003c NT && n \u003c 4; i++) {\n    const a = E[(i + NT - 1) % NT], b = E[(i + 1) % NT];\n    if (E[i] \u003c a && E[i] \u003c= b) {\n      let t = (2 * PI * i) / NT;\n      for (let k = 0; k \u003c 30; k++) t -= 0.5 * torque(t, L, bx, by);\n      S.mins[n++] = t;\n    }\n  }\n  return n;\n}\n\n// Follow the local minimum the disc sits in: the nearest place within half a\n// radian where V' turns from negative to positive, refined by bisection.\n// When there is none, that minimum has gone, which is the snap.\nfunction track(S, t) {\n  const L = S.L, bx = S.bx, by = S.by;\n  let best = NaN, bd = 1e9, prev = torque(t - 0.5, L, bx, by);\n  for (let i = 1; i \u003c= 96; i++) {\n    const a = t - 0.5 + i / 96, cur = torque(a, L, bx, by);\n    if (prev \u003c 0 && cur >= 0) {\n      let lo = a - 1 / 96, hi = a;\n      for (let q = 0; q \u003c 30; q++) {\n        const m = (lo + hi) / 2;\n        if (torque(m, L, bx, by) \u003c 0) lo = m;\n        else hi = m;\n      }\n      const r = (lo + hi) / 2;\n      if (abs(r - t) \u003c bd) (bd = abs(r - t)), (best = r);\n    }\n    prev = cur;\n  }\n  return best;\n}\n\nfunction setup(params) {\n  params.s = {\n    t: 0, w: 0, L: -1, nf: 0, FX: new Float64Array(NF), FY: new Float64Array(NF), fx0: 0, fx1: 0, fy0: 0, fy1: 0, ySide: -2.4,\n    E: new Float64Array(NT), mins: new Float64Array(4), nm: 1, ghost: 0, ghostA: 0,\n    ph: -PI / 2, wph: 0, bx: -1.35, by: -2.4, depth: 0.06, hue: 0, speed: 2,\n    TX: new Float32Array(TRAIL), TY: new Float32Array(TRAIL), TB: new Float32Array(TRAIL), tn: 0, th: 0, tacc: 0,\n    SX: new Float32Array(SNAPS), SY: new Float32Array(SNAPS), SA: new Float32Array(SNAPS).fill(99), sh: 0,\n    tm: 0, flash: 0, fbx: 0, fby: 0, warm: false,\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N), cov: new Float32Array(N),\n    xs: new Float32Array(4 * H * 16), xn: new Int32Array(4 * H), col: new Float32Array(24),\n  };\n}\n\n// B's path: across the panel and back, 1.35 radii either side of the axis,\n// at the height Depth picks between the side cusps and the bottom cusp,\n// wandering up and down a quarter of that height. From Depth 0.8 on it\n// never enters the diamond.\nfunction place(S) {\n  const ys = S.nf ? S.ySide : -2.5, yb = S.nf ? S.fy0 : -2.6;\n  S.bx = 1.35 * sin(S.ph);\n  S.by = ys + (0.3 + 1.2 * S.depth + 0.25 * sin(S.wph)) * (yb - ys);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.depth = cl(k[3], 0, 1);\n  const L = L0 * (1 - cl(k[2], 0, 1));\n  if (abs(L - S.L) > 0.002) fold(S, L);\n  const beat = (d * S.speed) / 2;\n  const jump = !!(input.btnPressed && input.btnPressed[0]);\n  if (jump) S.ph = -S.ph;\n  // A crossing of the panel every 4 beats; the wander is slower.\n  S.ph += (beat * PI) / 4;\n  S.wph += beat * 0.53;\n  place(S);\n  S.nm = minima(S, S.bx, S.by);\n  if (!S.warm) {\n    // Start in the deepest minimum.\n    let best = 0;\n    for (let i = 1; i \u003c S.nm; i++) if (energy(S.mins[i], S.L, S.bx, S.by) \u003c energy(S.mins[best], S.L, S.bx, S.by)) best = i;\n    S.t = S.tm = S.mins[best];\n    S.warm = true;\n  }\n  // The snap: the minimum the disc was in is gone. B is then at most one\n  // frame's travel past the edge of the diamond, and the mark goes there,\n  // unless K1 threw B across.\n  const tm = track(S, S.tm);\n  if (tm === tm) S.tm = tm;\n  else {\n    let far = 0, fd = -1;\n    for (let i = 0; i \u003c S.nm; i++) {\n      const dd = abs(atan2(sin(S.mins[i] - S.tm), cos(S.mins[i] - S.tm)));\n      if (dd > fd) (fd = dd), (far = i);\n    }\n    S.tm = S.mins[far];\n    S.flash = 1;\n    S.fbx = S.bx;\n    S.fby = S.by;\n    if (!jump) {\n      S.SX[S.sh] = S.bx;\n      S.SY[S.sh] = S.by;\n      S.SA[S.sh] = 0;\n      S.sh = (S.sh + 1) % SNAPS;\n    }\n  }\n  // Overdamped: the disc turns at 30 times the torque per beat, in eight\n  // small steps a frame.\n  const h = beat / 8, t0 = S.t;\n  for (let i = 0; i \u003c 8; i++) S.t -= 30 * h * torque(S.t, S.L, S.bx, S.by);\n  S.w = beat > 0 ? abs(S.t - t0) / beat : S.w;\n  S.flash = max(0, S.flash - beat / 0.5);\n  for (let i = 0; i \u003c SNAPS; i++) S.SA[i] += beat;\n  // The other minimum, when there is one, shows as a ghost on the rim.\n  let gi = -1, gd = 0;\n  for (let i = 0; i \u003c S.nm; i++) {\n    const dd = abs(atan2(sin(S.mins[i] - S.t), cos(S.mins[i] - S.t)));\n    if (dd > 0.3 && dd > gd) (gd = dd), (gi = i);\n  }\n  if (gi >= 0) S.ghost = S.mins[gi];\n  S.ghostA += ((gi >= 0 ? 1 : 0) - S.ghostA) * min(1, beat * 8);\n  // The trail: 15 samples a beat, 12 beats long, each with the side of the\n  // disc P was on.\n  S.tacc += beat * 15;\n  while (S.tacc >= 1) {\n    S.tacc -= 1;\n    S.TX[S.th] = S.bx;\n    S.TY[S.th] = S.by;\n    S.TB[S.th] = cos(S.t);\n    S.th = (S.th + 1) % TRAIL;\n    S.tn = min(TRAIL, S.tn + 1);\n  }\n}\n\n// ---- Drawing ----\n\nfunction plot(S, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  S.R[p] = max(S.R[p], r);\n  S.G[p] = max(S.G[p], g);\n  S.B[p] = max(S.B[p], b);\n}\n\n// A line in panel coordinates, about 1.4 LEDs wide, kept at the brighter.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, v = cl((wide - sqrt(qx * qx + qy * qy)) / 0.55, 0, 1);\n      if (v > 0) plot(S, x, y, cr * v, cg * v, cb * v);\n    }\n}\n\nfunction disc(S, cx, cy, r, cr, cg, cb, add) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c= min(H - 1, floor(cy + r + 1)); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c= min(W - 1, floor(cx + r + 1)); x++) {\n      const v = cl(r + 0.5 - sqrt((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2), 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      if (add) (S.R[p] += cr * v), (S.G[p] += cg * v), (S.B[p] += cb * v);\n      else (S.R[p] = S.R[p] * (1 - v) + cr * v), (S.G[p] = S.G[p] * (1 - v) + cg * v), (S.B[p] = S.B[p] * (1 - v) + cb * v);\n    }\n}\n\n// Coverage of the inside of the diamond: four scanlines a row.\nfunction fill(S) {\n  const { xs, xn, cov, FX, FY } = S, n = S.nf, SUB = 4, CAP = 16;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = (i + 1) % n;\n    let x0 = toX(FX[i]), y0 = toY(FY[i]), x1 = toX(FX[j]), y1 = toY(FY[j]);\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const c = xn[s];\n      if (c \u003c CAP) (xs[s * CAP + c] = x0 + (((s + 0.5) / SUB - y0) * (x1 - x0)) / (y1 - y0)), (xn[s] = c + 1);\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h = S.hue + 0.78, fl = S.flash;\n  // Round yellow the diamond's shading would go olive, so there it is paler\n  // and brighter.\n  const hh = h - floor(h), warm = sm(1 - abs(hh - 0.16) / 0.12);\n  hsv(h, 0.75 - 0.5 * warm, 1, col, 0); // accent: the diamond and the anchor\n  hsv(h + 0.35, 0.85, 1, col, 3); // the trail while P is on the left\n  hsv(h + 0.72, 0.8, 1, col, 6); // the trail while P is on the right\n  const hd = h + 0.8 - floor(h + 0.8), warmD = sm(1 - abs(hd - 0.12) / 0.13);\n  hsv(h + 0.8, 0.6 - 0.3 * warmD, 1 + 0.6 * warmD, col, 9); // the disc, never brown\n  const shade = 66 + 74 * warm;\n  // The bistable region, softly lit, and its cusped edge.\n  if (S.nf > 2) {\n    fill(S);\n    for (let p = 0; p \u003c N; p++) {\n      const c = min(1, cov[p]) * shade;\n      if (c > 0) (R[p] += col[0] * c), (G[p] += col[1] * c), (B[p] += col[2] * c);\n    }\n  }\n  // The trail, oldest first, in the colour of P's side.\n  for (let k = S.tn - 1; k >= 2; k--) {\n    const i = (S.th - k + TRAIL) % TRAIL, j = (i + 1) % TRAIL, age = k / TRAIL;\n    const u = (1 + cl(S.TB[i] * 2, -1, 1)) / 2, v = 230 * (1 - age) * (1 - age) + 25;\n    line(S, toX(S.TX[i]), toY(S.TY[i]), toX(S.TX[j]), toY(S.TY[j]), v * (col[3] * (1 - u) + col[6] * u), v * (col[4] * (1 - u) + col[7] * u), v * (col[5] * (1 - u) + col[8] * u), 0.75);\n  }\n  if (S.nf > 2) {\n    const e = 200 + 55 * fl;\n    for (let i = 0; i \u003c S.nf; i++) {\n      const j = (i + 1) % S.nf;\n      line(S, toX(S.FX[i]), toY(S.FY[i]), toX(S.FX[j]), toY(S.FY[j]), col[0] * e, col[1] * e, col[2] * e, 0.7);\n    }\n  }\n  // Where the snaps happened: white marks that fade over 25 beats.\n  for (let i = 0; i \u003c SNAPS; i++) {\n    if (S.SA[i] > 25) continue;\n    const v = 255 * (1 - S.SA[i] / 25);\n    disc(S, toX(S.SX[i]), toY(S.SY[i]), 0.9, v, v, v, false);\n  }\n  // The disc: a face of six soft sectors that turns with it, so a snap shows\n  // as the whole wheel whirling round; a rim that flashes white; the pivot.\n  const ox = toX(0), oy = toY(0), px = cos(S.t), py = sin(S.t), spin = 1 + 1.6 * cl(S.w / 8, 0, 1);\n  for (let y = max(0, floor(oy - SC - 1)); y \u003c= min(H - 1, floor(oy + SC + 1)); y++)\n    for (let x = max(0, floor(ox - SC - 1)); x \u003c= min(W - 1, floor(ox + SC + 1)); x++) {\n      const dx = x + 0.5 - ox, dy = oy - y - 0.5, r = sqrt(dx * dx + dy * dy), e = cl(SC + 0.5 - r, 0, 1);\n      if (e \u003c= 0) continue;\n      const a = atan2(dy, dx) - S.t, v = e * spin * (48 + 30 * cos(6 * a) * cl(r / 4, 0, 1)), p = y * W + x;\n      R[p] = col[9] * v;\n      G[p] = col[10] * v;\n      B[p] = col[11] * v;\n    }\n  for (let i = 0; i \u003c 96; i++) {\n    const a0 = (2 * PI * i) / 96, a1 = (2 * PI * (i + 1)) / 96, e = 120 + 135 * fl;\n    line(S, ox + SC * cos(a0), oy - SC * sin(a0), ox + SC * cos(a1), oy - SC * sin(a1), col[9] * e + 255 * fl * 0.5, col[10] * e + 255 * fl * 0.5, col[11] * e + 255 * fl * 0.5, 0.7);\n  }\n  line(S, ox, oy, toX(px), toY(py), col[9] * 110, col[10] * 110, col[11] * 110, 0.6);\n  disc(S, ox, oy, 1.3, 200, 200, 200, false);\n  // The other stable angle, while B is inside the diamond.\n  if (S.ghostA > 0.02) {\n    const g = 150 * S.ghostA, u = cos(S.ghost) > 0 ? 1 : 0;\n    disc(S, toX(cos(S.ghost)), toY(sin(S.ghost)), 1.4, g * (col[3] * (1 - u) + col[6] * u), g * (col[4] * (1 - u) + col[7] * u), g * (col[5] * (1 - u) + col[8] * u), false);\n  }\n  // The bands, brighter the harder they pull.\n  const ta = max(0, sqrt(px * px + (py - AD) ** 2) - S.L), tb = max(0, sqrt((px - S.bx) ** 2 + (py - S.by) ** 2) - S.L);\n  const va = 70 + 185 * cl(ta / 2.6, 0, 1), vb = 70 + 185 * cl(tb / 2.6, 0, 1) + 60 * fl;\n  line(S, toX(0), toY(AD), toX(px), toY(py), va, va * 0.93, va * 0.82, 0.75);\n  line(S, toX(px), toY(py), toX(S.bx), toY(S.by), vb, vb * 0.93, vb * 0.82, 0.75);\n  // The anchor, P on the rim, and B.\n  disc(S, toX(0), toY(AD), 1.6, col[0] * 255, col[1] * 255, col[2] * 255, false);\n  const u = (1 + cl(px * 2, -1, 1)) / 2;\n  disc(S, toX(px), toY(py), 2.3, 255 * (col[3] * (1 - u) + col[6] * u), 255 * (col[4] * (1 - u) + col[7] * u), 255 * (col[5] * (1 - u) + col[8] * u), false);\n  disc(S, toX(px), toY(py), 1, 255, 255, 255, false);\n  disc(S, toX(S.bx), toY(S.by), 1.5, 255, 255, 255, false);\n  // A ring opening round B at each snap.\n  if (fl > 0) {\n    const r = 2 + 9 * (1 - fl * fl), v = 255 * sm(fl * 1.6);\n    for (let i = 0; i \u003c 40; i++) {\n      const a0 = (2 * PI * i) / 40, a1 = (2 * PI * (i + 1)) / 40;\n      line(S, toX(S.fbx) + r * cos(a0), toY(S.fby) + r * sin(a0), toX(S.fbx) + r * cos(a1), toY(S.fby) + r * sin(a1), v, v, v, 0.95);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-catastrophe-machine","type":"code","name":"catastrophe-machine","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Catastrophe Machine\n// Family:  physics\n// Idea:    Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Zeeman's catastrophe machine (Christopher Zeeman, 1972), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1\n//\n// Knob 1: Hue. Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown.\n// Knob 2: Speed. At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Tension. The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B.\n// Knob 4: Depth. The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all.\n// Buttons: K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.\n\nconst W = 64, H = 128, N = W * H;\n// The machine in disc radii: pivot O at the origin, anchor A at (0, AD),\n// bands of rest length L. On the panel one radius is SC LEDs, O sits at row\n// OY, and the anchor 5 rows from the top.\nconst AD = 2.5, L0 = 1, SC = 18.6, OX = 32, OY = 5 + SC * AD, NF = 360, NT = 180, TRAIL = 180, SNAPS = 24;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst toX = (x) => OX + SC * x, toY = (y) => OY - SC * y;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The energy V(t) = (|P-A| - L)+^2 / 2 + (|P-B| - L)+^2 / 2, P = (cos t, sin t),\n// a band pulling only while it is stretched, and its derivative in t: each\n// band adds its tension times the component of its direction along the rim.\nfunction energy(t, L, bx, by) {\n  const px = cos(t), py = sin(t);\n  const ea = max(0, sqrt(px * px + (py - AD) * (py - AD)) - L), eb = max(0, sqrt((px - bx) ** 2 + (py - by) ** 2) - L);\n  return 0.5 * (ea * ea + eb * eb);\n}\nfunction torque(t, L, bx, by) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), ux = px - bx, uy = py - by, db = sqrt(ux * ux + uy * uy);\n  return (max(0, da - L) * (ax * tx + ay * ty)) / da + (max(0, db - L) * (ux * tx + uy * ty)) / (db || 1e-9);\n}\n\n// The bifurcation set. At a fold the disc angle t is an equilibrium (V' = 0)\n// that is about to stop being a minimum (V'' = 0). For each t the band to B\n// leaves P along some direction u; V' = 0 fixes how far B must be, and the\n// direction is found where V'' changes sign. One point per t, so the 360\n// points run round the diamond in order, through its four cusps.\nfunction foldAt(t, L, be) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), uax = ax / da, uay = ay / da;\n  const ca = uax * tx + uay * ty, sa = uax * px + uay * py, ea = max(0, da - L);\n  const M = ea * ca, K = (da > L ? ca * ca : 0) + ea * ((1 - ca * ca) / da - sa);\n  const ux = cos(be), uy = sin(be), c = ux * tx + uy * ty, s = ux * px + uy * py;\n  if (abs(c) \u003c 1e-9) return null;\n  const e = -M / c;\n  if (e \u003c= 0) return null;\n  const d = L + e;\n  return [K + c * c + e * ((1 - c * c) / d - s), px - d * ux, py - d * uy, d];\n}\nfunction fold(S, L) {\n  S.L = L;\n  S.nf = 0;\n  if (L \u003c 0.02) return;\n  let guess = -1;\n  for (let i = 0; i \u003c NF; i++) {\n    const t = (2 * PI * i) / NF;\n    let found = null;\n    // Look near the last direction first, then all the way round.\n    const tries = guess \u003c 0 ? [[0, 2 * PI, 1440]] : [[guess - 0.25, guess + 0.25, 50], [0, 2 * PI, 1440]];\n    for (const [b0, b1, k] of tries) {\n      let prev = foldAt(t, L, b0), pb = b0;\n      for (let j = 1; j \u003c= k && !found; j++) {\n        const be = b0 + ((b1 - b0) * j) / k, cur = foldAt(t, L, be);\n        if (prev && cur && prev[0] * cur[0] \u003c= 0 && abs(cur[3] - prev[3]) \u003c 0.3 && cur[3] \u003c 8) {\n          let lo = pb, hi = be, flo = prev[0];\n          for (let q = 0; q \u003c 40; q++) {\n            const mid = (lo + hi) / 2, m = foldAt(t, L, mid);\n            if (!m) break;\n            if (m[0] * flo > 0) (lo = mid), (flo = m[0]);\n            else hi = mid;\n          }\n          found = foldAt(t, L, (lo + hi) / 2);\n          guess = (lo + hi) / 2;\n        }\n        prev = cur;\n        pb = be;\n      }\n      if (found) break;\n    }\n    if (found) {\n      S.FX[S.nf] = found[1];\n      S.FY[S.nf] = found[2];\n      S.nf++;\n    }\n  }\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c S.nf; i++) {\n    x0 = min(x0, S.FX[i]);\n    x1 = max(x1, S.FX[i]);\n    y0 = min(y0, S.FY[i]);\n    y1 = max(y1, S.FY[i]);\n  }\n  S.fx0 = x0;\n  S.fx1 = x1;\n  S.fy0 = y0;\n  S.fy1 = y1;\n  // The side cusps are the leftmost and rightmost points.\n  let iL = 0;\n  for (let i = 0; i \u003c S.nf; i++) if (S.FX[i] \u003c S.FX[iL]) iL = i;\n  S.ySide = S.nf ? S.FY[iL] : -2.5;\n}\n\n// Local minima of V over the rim, from 180 samples, each polished by a few\n// steps of descent. Returns how many; their angles land in S.mins.\nfunction minima(S, bx, by) {\n  const L = S.L, E = S.E;\n  for (let i = 0; i \u003c NT; i++) E[i] = energy((2 * PI * i) / NT, L, bx, by);\n  let n = 0;\n  for (let i = 0; i \u003c NT && n \u003c 4; i++) {\n    const a = E[(i + NT - 1) % NT], b = E[(i + 1) % NT];\n    if (E[i] \u003c a && E[i] \u003c= b) {\n      let t = (2 * PI * i) / NT;\n      for (let k = 0; k \u003c 30; k++) t -= 0.5 * torque(t, L, bx, by);\n      S.mins[n++] = t;\n    }\n  }\n  return n;\n}\n\n// Follow the local minimum the disc sits in: the nearest place within half a\n// radian where V' turns from negative to positive, refined by bisection.\n// When there is none, that minimum has gone, which is the snap.\nfunction track(S, t) {\n  const L = S.L, bx = S.bx, by = S.by;\n  let best = NaN, bd = 1e9, prev = torque(t - 0.5, L, bx, by);\n  for (let i = 1; i \u003c= 96; i++) {\n    const a = t - 0.5 + i / 96, cur = torque(a, L, bx, by);\n    if (prev \u003c 0 && cur >= 0) {\n      let lo = a - 1 / 96, hi = a;\n      for (let q = 0; q \u003c 30; q++) {\n        const m = (lo + hi) / 2;\n        if (torque(m, L, bx, by) \u003c 0) lo = m;\n        else hi = m;\n      }\n      const r = (lo + hi) / 2;\n      if (abs(r - t) \u003c bd) (bd = abs(r - t)), (best = r);\n    }\n    prev = cur;\n  }\n  return best;\n}\n\nfunction setup(params) {\n  params.s = {\n    t: 0, w: 0, L: -1, nf: 0, FX: new Float64Array(NF), FY: new Float64Array(NF), fx0: 0, fx1: 0, fy0: 0, fy1: 0, ySide: -2.4,\n    E: new Float64Array(NT), mins: new Float64Array(4), nm: 1, ghost: 0, ghostA: 0,\n    ph: -PI / 2, wph: 0, bx: -1.35, by: -2.4, depth: 0.06, hue: 0, speed: 2,\n    TX: new Float32Array(TRAIL), TY: new Float32Array(TRAIL), TB: new Float32Array(TRAIL), tn: 0, th: 0, tacc: 0,\n    SX: new Float32Array(SNAPS), SY: new Float32Array(SNAPS), SA: new Float32Array(SNAPS).fill(99), sh: 0,\n    tm: 0, flash: 0, fbx: 0, fby: 0, warm: false,\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N), cov: new Float32Array(N),\n    xs: new Float32Array(4 * H * 16), xn: new Int32Array(4 * H), col: new Float32Array(24),\n  };\n}\n\n// B's path: across the panel and back, 1.35 radii either side of the axis,\n// at the height Depth picks between the side cusps and the bottom cusp,\n// wandering up and down a quarter of that height. From Depth 0.8 on it\n// never enters the diamond.\nfunction place(S) {\n  const ys = S.nf ? S.ySide : -2.5, yb = S.nf ? S.fy0 : -2.6;\n  S.bx = 1.35 * sin(S.ph);\n  S.by = ys + (0.3 + 1.2 * S.depth + 0.25 * sin(S.wph)) * (yb - ys);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.depth = cl(k[3], 0, 1);\n  const L = L0 * (1 - cl(k[2], 0, 1));\n  if (abs(L - S.L) > 0.002) fold(S, L);\n  const beat = (d * S.speed) / 2;\n  const jump = !!(input.btnPressed && input.btnPressed[0]);\n  if (jump) S.ph = -S.ph;\n  // A crossing of the panel every 4 beats; the wander is slower.\n  S.ph += (beat * PI) / 4;\n  S.wph += beat * 0.53;\n  place(S);\n  S.nm = minima(S, S.bx, S.by);\n  if (!S.warm) {\n    // Start in the deepest minimum.\n    let best = 0;\n    for (let i = 1; i \u003c S.nm; i++) if (energy(S.mins[i], S.L, S.bx, S.by) \u003c energy(S.mins[best], S.L, S.bx, S.by)) best = i;\n    S.t = S.tm = S.mins[best];\n    S.warm = true;\n  }\n  // The snap: the minimum the disc was in is gone. B is then at most one\n  // frame's travel past the edge of the diamond, and the mark goes there,\n  // unless K1 threw B across.\n  const tm = track(S, S.tm);\n  if (tm === tm) S.tm = tm;\n  else {\n    let far = 0, fd = -1;\n    for (let i = 0; i \u003c S.nm; i++) {\n      const dd = abs(atan2(sin(S.mins[i] - S.tm), cos(S.mins[i] - S.tm)));\n      if (dd > fd) (fd = dd), (far = i);\n    }\n    S.tm = S.mins[far];\n    S.flash = 1;\n    S.fbx = S.bx;\n    S.fby = S.by;\n    if (!jump) {\n      S.SX[S.sh] = S.bx;\n      S.SY[S.sh] = S.by;\n      S.SA[S.sh] = 0;\n      S.sh = (S.sh + 1) % SNAPS;\n    }\n  }\n  // Overdamped: the disc turns at 30 times the torque per beat, in eight\n  // small steps a frame.\n  const h = beat / 8, t0 = S.t;\n  for (let i = 0; i \u003c 8; i++) S.t -= 30 * h * torque(S.t, S.L, S.bx, S.by);\n  S.w = beat > 0 ? abs(S.t - t0) / beat : S.w;\n  S.flash = max(0, S.flash - beat / 0.5);\n  for (let i = 0; i \u003c SNAPS; i++) S.SA[i] += beat;\n  // The other minimum, when there is one, shows as a ghost on the rim.\n  let gi = -1, gd = 0;\n  for (let i = 0; i \u003c S.nm; i++) {\n    const dd = abs(atan2(sin(S.mins[i] - S.t), cos(S.mins[i] - S.t)));\n    if (dd > 0.3 && dd > gd) (gd = dd), (gi = i);\n  }\n  if (gi >= 0) S.ghost = S.mins[gi];\n  S.ghostA += ((gi >= 0 ? 1 : 0) - S.ghostA) * min(1, beat * 8);\n  // The trail: 15 samples a beat, 12 beats long, each with the side of the\n  // disc P was on.\n  S.tacc += beat * 15;\n  while (S.tacc >= 1) {\n    S.tacc -= 1;\n    S.TX[S.th] = S.bx;\n    S.TY[S.th] = S.by;\n    S.TB[S.th] = cos(S.t);\n    S.th = (S.th + 1) % TRAIL;\n    S.tn = min(TRAIL, S.tn + 1);\n  }\n}\n\n// ---- Drawing ----\n\nfunction plot(S, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  S.R[p] = max(S.R[p], r);\n  S.G[p] = max(S.G[p], g);\n  S.B[p] = max(S.B[p], b);\n}\n\n// A line in panel coordinates, about 1.4 LEDs wide, kept at the brighter.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, v = cl((wide - sqrt(qx * qx + qy * qy)) / 0.55, 0, 1);\n      if (v > 0) plot(S, x, y, cr * v, cg * v, cb * v);\n    }\n}\n\nfunction disc(S, cx, cy, r, cr, cg, cb, add) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c= min(H - 1, floor(cy + r + 1)); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c= min(W - 1, floor(cx + r + 1)); x++) {\n      const v = cl(r + 0.5 - sqrt((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2), 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      if (add) (S.R[p] += cr * v), (S.G[p] += cg * v), (S.B[p] += cb * v);\n      else (S.R[p] = S.R[p] * (1 - v) + cr * v), (S.G[p] = S.G[p] * (1 - v) + cg * v), (S.B[p] = S.B[p] * (1 - v) + cb * v);\n    }\n}\n\n// Coverage of the inside of the diamond: four scanlines a row.\nfunction fill(S) {\n  const { xs, xn, cov, FX, FY } = S, n = S.nf, SUB = 4, CAP = 16;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = (i + 1) % n;\n    let x0 = toX(FX[i]), y0 = toY(FY[i]), x1 = toX(FX[j]), y1 = toY(FY[j]);\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const c = xn[s];\n      if (c \u003c CAP) (xs[s * CAP + c] = x0 + (((s + 0.5) / SUB - y0) * (x1 - x0)) / (y1 - y0)), (xn[s] = c + 1);\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h = S.hue + 0.78, fl = S.flash;\n  // Round yellow the diamond's shading would go olive, so there it is paler\n  // and brighter.\n  const hh = h - floor(h), warm = sm(1 - abs(hh - 0.16) / 0.12);\n  hsv(h, 0.75 - 0.5 * warm, 1, col, 0); // accent: the diamond and the anchor\n  hsv(h + 0.35, 0.85, 1, col, 3); // the trail while P is on the left\n  hsv(h + 0.72, 0.8, 1, col, 6); // the trail while P is on the right\n  const hd = h + 0.8 - floor(h + 0.8), warmD = sm(1 - abs(hd - 0.12) / 0.13);\n  hsv(h + 0.8, 0.6 - 0.3 * warmD, 1 + 0.6 * warmD, col, 9); // the disc, never brown\n  const shade = 66 + 74 * warm;\n  // The bistable region, softly lit, and its cusped edge.\n  if (S.nf > 2) {\n    fill(S);\n    for (let p = 0; p \u003c N; p++) {\n      const c = min(1, cov[p]) * shade;\n      if (c > 0) (R[p] += col[0] * c), (G[p] += col[1] * c), (B[p] += col[2] * c);\n    }\n  }\n  // The trail, oldest first, in the colour of P's side.\n  for (let k = S.tn - 1; k >= 2; k--) {\n    const i = (S.th - k + TRAIL) % TRAIL, j = (i + 1) % TRAIL, age = k / TRAIL;\n    const u = (1 + cl(S.TB[i] * 2, -1, 1)) / 2, v = 230 * (1 - age) * (1 - age) + 25;\n    line(S, toX(S.TX[i]), toY(S.TY[i]), toX(S.TX[j]), toY(S.TY[j]), v * (col[3] * (1 - u) + col[6] * u), v * (col[4] * (1 - u) + col[7] * u), v * (col[5] * (1 - u) + col[8] * u), 0.75);\n  }\n  if (S.nf > 2) {\n    const e = 200 + 55 * fl;\n    for (let i = 0; i \u003c S.nf; i++) {\n      const j = (i + 1) % S.nf;\n      line(S, toX(S.FX[i]), toY(S.FY[i]), toX(S.FX[j]), toY(S.FY[j]), col[0] * e, col[1] * e, col[2] * e, 0.7);\n    }\n  }\n  // Where the snaps happened: white marks that fade over 25 beats.\n  for (let i = 0; i \u003c SNAPS; i++) {\n    if (S.SA[i] > 25) continue;\n    const v = 255 * (1 - S.SA[i] / 25);\n    disc(S, toX(S.SX[i]), toY(S.SY[i]), 0.9, v, v, v, false);\n  }\n  // The disc: a face of six soft sectors that turns with it, so a snap shows\n  // as the whole wheel whirling round; a rim that flashes white; the pivot.\n  const ox = toX(0), oy = toY(0), px = cos(S.t), py = sin(S.t), spin = 1 + 1.6 * cl(S.w / 8, 0, 1);\n  for (let y = max(0, floor(oy - SC - 1)); y \u003c= min(H - 1, floor(oy + SC + 1)); y++)\n    for (let x = max(0, floor(ox - SC - 1)); x \u003c= min(W - 1, floor(ox + SC + 1)); x++) {\n      const dx = x + 0.5 - ox, dy = oy - y - 0.5, r = sqrt(dx * dx + dy * dy), e = cl(SC + 0.5 - r, 0, 1);\n      if (e \u003c= 0) continue;\n      const a = atan2(dy, dx) - S.t, v = e * spin * (48 + 30 * cos(6 * a) * cl(r / 4, 0, 1)), p = y * W + x;\n      R[p] = col[9] * v;\n      G[p] = col[10] * v;\n      B[p] = col[11] * v;\n    }\n  for (let i = 0; i \u003c 96; i++) {\n    const a0 = (2 * PI * i) / 96, a1 = (2 * PI * (i + 1)) / 96, e = 120 + 135 * fl;\n    line(S, ox + SC * cos(a0), oy - SC * sin(a0), ox + SC * cos(a1), oy - SC * sin(a1), col[9] * e + 255 * fl * 0.5, col[10] * e + 255 * fl * 0.5, col[11] * e + 255 * fl * 0.5, 0.7);\n  }\n  line(S, ox, oy, toX(px), toY(py), col[9] * 110, col[10] * 110, col[11] * 110, 0.6);\n  disc(S, ox, oy, 1.3, 200, 200, 200, false);\n  // The other stable angle, while B is inside the diamond.\n  if (S.ghostA > 0.02) {\n    const g = 150 * S.ghostA, u = cos(S.ghost) > 0 ? 1 : 0;\n    disc(S, toX(cos(S.ghost)), toY(sin(S.ghost)), 1.4, g * (col[3] * (1 - u) + col[6] * u), g * (col[4] * (1 - u) + col[7] * u), g * (col[5] * (1 - u) + col[8] * u), false);\n  }\n  // The bands, brighter the harder they pull.\n  const ta = max(0, sqrt(px * px + (py - AD) ** 2) - S.L), tb = max(0, sqrt((px - S.bx) ** 2 + (py - S.by) ** 2) - S.L);\n  const va = 70 + 185 * cl(ta / 2.6, 0, 1), vb = 70 + 185 * cl(tb / 2.6, 0, 1) + 60 * fl;\n  line(S, toX(0), toY(AD), toX(px), toY(py), va, va * 0.93, va * 0.82, 0.75);\n  line(S, toX(px), toY(py), toX(S.bx), toY(S.by), vb, vb * 0.93, vb * 0.82, 0.75);\n  // The anchor, P on the rim, and B.\n  disc(S, toX(0), toY(AD), 1.6, col[0] * 255, col[1] * 255, col[2] * 255, false);\n  const u = (1 + cl(px * 2, -1, 1)) / 2;\n  disc(S, toX(px), toY(py), 2.3, 255 * (col[3] * (1 - u) + col[6] * u), 255 * (col[4] * (1 - u) + col[7] * u), 255 * (col[5] * (1 - u) + col[8] * u), false);\n  disc(S, toX(px), toY(py), 1, 255, 255, 255, false);\n  disc(S, toX(S.bx), toY(S.by), 1.5, 255, 255, 255, false);\n  // A ring opening round B at each snap.\n  if (fl > 0) {\n    const r = 2 + 9 * (1 - fl * fl), v = 255 * sm(fl * 1.6);\n    for (let i = 0; i \u003c 40; i++) {\n      const a0 = (2 * PI * i) / 40, a1 = (2 * PI * (i + 1)) / 40;\n      line(S, toX(S.fbx) + r * cos(a0), toY(S.fby) + r * sin(a0), toX(S.fbx) + r * cos(a1), toY(S.fby) + r * sin(a1), v, v, v, 0.95);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again."},{"name":"Tension","min":0,"max":1,"about":"The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B."},{"name":"Depth","min":0,"max":1,"about":"The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all."}],"start":[0,2,0,0.06],"measures":{"motion":0.213,"detail":0.0332,"edges":0.4458,"complexity":0.4561,"coverage":0.1952,"colour":0.1001,"drift":0.0525},"knobResponse":[0.0365,0.0378,0.0477,0.0428]},{"slug":"center-pivot","title":"Center Pivot","family":"farm","round":27,"note":"비행기 창으로 내려다본 들판이에요. 흙길로 나뉜 황토색 땅에 원형 밭이 두 줄로 넷씩 놓이고, 은빛 스프링클러 팔이 돌며 지나간 부채꼴을 짙게 적셨다가 말려요. 금빛 밀밭은 콤바인이 바깥부터 베어 들어가요. K1 이 봄에서 늦가을까지 철을 돌리고, 누르면 모든 팔이 한 바퀴 돌아요.","idea":"The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.","buttons":"K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.","code":"// ===== Patternflow pattern =====\n// Title:   Center Pivot\n// Family:  farm\n// Idea:    The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after center-pivot irrigation seen from the air over Kansas and the Saudi desert\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1\n//\n// Knob 1: Season. Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown.\n// Knob 2: Speed. At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster.\n// Knob 3: Fields. How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it.\n// Knob 4: Clouds. A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun.\n// Buttons: K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.\n\nconst W = 64, H = 128, N = W * H, SEC = 32, RW = 14, BAND = 3.2, TD = 4.5;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nconst md = (v) => v - floor(v / TAU) * TAU;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n\n// A crop's year in stages. The last number of each is how strongly the planted rings show.\nconst KEY = [\n  0, 84, 66, 50, 0.14, 0.1, 92, 76, 52, 0.18, 0.22, 116, 150, 64, 0.2, 0.36, 66, 136, 54, 0.12,\n  0.48, 34, 104, 48, 0.08, 0.56, 126, 132, 54, 0.08, 0.63, 222, 186, 64, 0.05, 0.7, 234, 200, 98, 0.05,\n  0.78, 224, 210, 158, 0.08, 0.89, 180, 168, 136, 0.08, 0.96, 116, 92, 68, 0.14, 1.01, 84, 66, 50, 0.14,\n];\nfunction stageCol(v, o) {\n  let a = 0;\n  while (KEY[a + 5] \u003c v) a += 5;\n  const u = sm(KEY[a], KEY[a + 5], v);\n  for (let j = 1; j \u003c 4; j++) o[j - 1] = mix(KEY[a + j], KEY[a + 5 + j], u);\n  return mix(KEY[a + 4], KEY[a + 9], u);\n}\n// Corn and soybeans run from ploughing to stubble, alfalfa stays green. Winter wheat is gold by June and sown again in autumn.\nfunction stageOf(crop, k, off) {\n  if (crop === 2) return fr(0.6 + 0.72 * k + off);\n  if (crop === 3) return 0.38 + 0.06 * sin(k * 9 + off * 20) + 0.14 * sm(0.75, 1, k);\n  return cl(0.86 * k + off - (crop ? 0.06 : 0), 0, 0.985);\n}\n\n// The river, in section units (an LED each at Fields 2), and the signed distance across it.\nconst rx = (y) => -39 + 13 * exp(-(((y - 16) / 24) ** 2)) + 2.5 * sin(y * 0.09 + 1) + 0.06 * y;\nfunction rd(wx, wy) {\n  const s = rx(wy + 0.5) - rx(wy - 0.5);\n  return (wx - rx(wy)) / sqrt(1 + s * s);\n}\n// The eight sections in view at the start, left then right, top down. Each is a crop, how far ahead it is,\n// a second crop on the other half and how far ahead that is, and the corner of the farmstead (-1 for none).\nconst OPEN = [\n  [0, 0.2, -1, 0, -1], [3, 0, -1, 0, 2], [2, 0.02, -1, 0, -1], [0, 0.19, 1, 0, -1],\n  [0, 0.32, -1, 0, -1], [1, 0, -1, 0, 1], [3, 0.3, 2, 0.06, 2], [1, 0.18, -1, 0, -1],\n];\nfunction spec(ci, cj) {\n  if (ci >= -1 && ci \u003c= 0 && cj >= -2 && cj \u003c= 1) {\n    const o = OPEN[(cj + 2) * 2 + ci + 1];\n    return { strips: 0, crop: o[0], off: o[1], crop2: o[2], off2: o[3], farm: o[4] };\n  }\n  const h = (k) => hash(ci * 31 + k, cj * 17 + 5);\n  return { strips: h(1) \u003c 0.14, crop: floor(h(2) * 4), off: h(3) * 0.3, crop2: h(4) \u003c 0.25 ? floor(h(5) * 4) : -1, off2: h(6) * 0.3, farm: h(7) \u003c 0.45 ? floor(h(8) * 4) : -1 };\n}\n\n// Per LED: its field, angle and distance from that pivot, how much of it is field; field LEDs grouped by field.\nconst FID = new Int16Array(N), ANG = new Float32Array(N), RAD = new Float32Array(N), COV = new Float32Array(N), FP = new Int32Array(N);\nconst BASE = new Float32Array(N * 3), ALT = new Float32Array(N * 3), WET = new Float32Array(N), F = new Float32Array(N * 3), C3 = new Float64Array(3);\n// Cloud noise that tiles every 64.\nconst CN = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = k & 63, y = k >> 6;\n  CN[k] = 0.55 * vn(x / 8, y / 8, 8) + 0.3 * vn(x / 4 + 9, y / 4, 16) + 0.15 * vn(x / 2, y / 2 + 7, 32);\n}\nfunction cloud(u, v) {\n  const x0 = floor(u), y0 = floor(v), fx = u - x0, fy = v - y0, a = x0 & 63, a1 = (x0 + 1) & 63, b = (y0 & 63) \u003c\u003c 6, b1 = ((y0 + 1) & 63) \u003c\u003c 6;\n  return mix(mix(CN[b + a], CN[b + a1], fx), mix(CN[b1 + a], CN[b1 + a1], fx), fy);\n}\n\nexport function setup(params) {\n  params.s = { z: -1, k1: -1, t: 0, rt: 0, ox: 20, oy: 30, mist: 0, fields: [], sec: new Map(), tr: [], dust: [], duster: null, spray: [] };\n}\n\nfunction sectionAt(S, wx, wy) {\n  const ci = floor(wx / SEC), cj = floor(wy / SEC), key = ci * 1000 + cj;\n  let s = S.sec.get(key);\n  if (!s) {\n    const sp = spec(ci, cj), cx = ci * SEC + 16, cy = cj * SEC + 16, sd = rd(cx, cy);\n    s = { ci, cj, sp, f: -1, cx, cy, sd };\n    S.sec.set(key, s);\n  }\n  return s;\n}\n\n// The fields for this height, and each LED's place in them.\nfunction layout(S, k3) {\n  const z = (S.z = k3 / 2), fs = (S.fields = []);\n  S.sec.clear();\n  for (let cj = floor(-2 * z) - 1; cj \u003c= ceil(2 * z); cj++)\n    for (let ci = floor(-z) - 1; ci \u003c= ceil(z); ci++) {\n      const s = sectionAt(S, ci * SEC + 1, cj * SEC + 1), sp = s.sp;\n      if (sp.strips || abs(s.sd) \u003c 6.5) continue;\n      const id = fs.length, sg = s.sd > 0 ? 1 : -1, h = (k) => hash(ci * 13 + k, cj * 7 + 3);\n      // Where the river and its trees cut the circle, the arm swings to and fro over what is left.\n      let run = 0, best = 0, start = 0, first = -1;\n      const ok = (k) => rd(s.cx + RW * 0.97 * cos((k * TAU) / 96), s.cy + RW * 0.97 * sin((k * TAU) / 96)) * sg > 4.8;\n      for (let k = 0; k \u003c 192; k++) {\n        if (ok(k % 96)) {\n          if (!run) start = k;\n          if (++run > best && run \u003c= 96) (best = run), (first = start);\n        } else run = 0;\n      }\n      if (best \u003c 16) continue;\n      const f = { id, s, sg, cx: 32.5 + s.cx / z, cy: 64.5 + s.cy / z, R: RW / z, crop: sp.crop, off: sp.off, crop2: sp.crop2, off2: sp.off2, sa: h(1) * TAU };\n      Object.assign(f, { sd: h(2) \u003c 0.5 ? 1 : -1, om: TAU / (16 + 10 * h(3)), a: h(4) * TAU, tint: 0.93 + 0.12 * h(5), boost: 0, wipe: 0, a0: 0, span: TAU, rel: 0 });\n      Object.assign(f, { harv: 0, h: 0, h0: 0.3 + 0.4 * h(6), hs: h(7) * TAU, hd: h(8) \u003c 0.5 ? 1 : -1, hst: 0, ht: 0, g: 1, n0: 0, n1: 0, grow: 0 });\n      if (best \u003c 96) Object.assign(f, { wipe: 1, a0: ((first + 1) * TAU) / 96, span: ((best - 2) * TAU) / 96, rel: h(4) * ((best - 2) * TAU) / 96 }), (f.a = f.a0 + f.rel);\n      s.f = id;\n      fs.push(f);\n    }\n  for (let i = 0; i \u003c N; i++) {\n    const wx = ((i & 63) - 32) * z, wy = ((i >> 6) - 64) * z, s = sectionAt(S, wx, wy);\n    FID[i] = -1;\n    COV[i] = 0;\n    if (s.f \u003c 0) continue;\n    const f = fs[s.f], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy);\n    const c = cl((RW - dr) / z + 0.5, 0, 1) * cl((rd(wx, wy) * f.sg - 4.6) / z + 0.5, 0, 1);\n    if (c \u003c= 0) continue;\n    (FID[i] = f.id), (COV[i] = c), (ANG[i] = md(atan2(dy, dx))), (RAD[i] = dr / z);\n  }\n  for (const f of fs) f.n1 = 0;\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) fs[FID[i]].n1++;\n  let n = 0;\n  for (const f of fs) (f.n0 = n), (n += f.n1), (f.n1 = f.n0);\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) FP[fs[FID[i]].n1++] = i;\n  const vr = [], hr = [];\n  for (let m = -4; m \u003c= 4; m++) {\n    const x = 32.5 + (m * SEC) / z, y = 64.5 + (m * SEC) / z;\n    if (x > 2 && x \u003c 62) vr.push(x);\n    if (y > 2 && y \u003c 126) hr.push(y);\n  }\n  S.tr = [0, 1].map((k) => ({ v: k === 0, c: k ? hr[min(hr.length - 1, 2)] : vr[floor(vr.length / 2)], p: k ? 20 : 100, d: k ? 1 : -1, acc: 0 }));\n  S.dust = [];\n}\n\n// What stands on the land: trees along the river and in the farmsteads' windbreaks (1), or a farmhouse roof (2)\n// with its grain bins (3). 0 is open ground.\nfunction objAt(S, wx, wy) {\n  const r = abs(rd(wx, wy));\n  if (r > 1.1 && r \u003c 4.4 && vn(wx * 0.55 + 5, wy * 0.55) > 0.22 + 0.11 * r) return 1;\n  const s = sectionAt(S, wx, wy), c = s.sp.farm;\n  if (c \u003c 0 || s.sp.strips) return 0;\n  const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, u = c & 1 ? SEC - lx : lx, v = c & 2 ? SEC - ly : ly;\n  if (u \u003c 1 || v \u003c 1) return 0;\n  if ((u \u003c 8.6 && v \u003c 2.7) || (u \u003c 2.7 && v \u003c 8.6)) return hash(floor(u * 1.4), floor(v * 1.4) + c) \u003c 0.85 ? 1 : 0;\n  if (u > 3.4 && u \u003c 5.3 && v > 3.4 && v \u003c 5.1) return 2;\n  if ((u - 6.4) ** 2 + (v - 3.7) ** 2 \u003c 0.7 || (u - 3.7) ** 2 + (v - 6.4) ** 2 \u003c 0.7) return 3;\n  return 0;\n}\n\n// Round bales lying on the windrows of a stubble field.\nfunction bale(f, wx, wy) {\n  const dx = wx - f.s.cx, dy = wy - f.s.cy, dr = sqrt(dx * dx + dy * dy);\n  if (dr > RW - 1 || dr \u003c 2) return 0;\n  const q = dr / 3.5, k = floor(q), arc = md(atan2(dy, dx) - f.sa) * dr, c = floor(arc / 4.5);\n  return abs(q - k - 0.5) * 3.5 \u003c 0.55 && abs(arc / 4.5 - c - 0.5) * 4.5 \u003c 0.6 && arc \u003c 4.2 * dr && hash(k, c + f.id * 50) \u003c 0.75 ? 1 : 0;\n}\n\n// The picture that stays put between knob turns: land, roads, river, farmsteads and each field at its point in the season.\nfunction paint(S, k1) {\n  const z = S.z, fs = S.fields, C = C3, L = [mix(156, 172, sm(0, 0.4, k1)), mix(146, 148, k1), mix(100, 106, k1)];\n  const leaf = [mix(34, 132, sm(0.72, 0.92, k1)), mix(66, 102, sm(0.72, 0.92, k1)), 38];\n  for (const f of fs) {\n    f.v = stageOf(f.crop, k1, f.off);\n    f.v2 = f.crop2 \u003c 0 ? f.v : stageOf(f.crop2, k1, f.off2);\n    f.c1 = [0, 0, 0];\n    f.c2 = [0, 0, 0];\n    f.a1 = stageCol(f.v, f.c1);\n    f.a2 = stageCol(f.v2, f.c2);\n    f.grow = (f.v > 0.1 && f.v \u003c 0.57) || (f.v2 > 0.1 && f.v2 \u003c 0.57) ? 1 : 0;\n    const hv = f.crop2 \u003c 0 && f.v > 0.6 && f.v \u003c 0.77 ? 1 : 0;\n    if (hv !== f.harv) Object.assign(f, { harv: hv, h: f.h0, hst: 0, g: 1 });\n  }\n  const ringA = sm(1.9, 2.6, 3 / z);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, wx = (x - 32) * z, wy = (y - 64) * z, s = sectionAt(S, wx, wy), sp = s.sp, r = rd(wx, wy), gr = 0.93 + 0.1 * vn(wx * 0.4, wy * 0.4) + 0.04 * hash(x, y);\n    for (let j = 0; j \u003c 3; j++) C[j] = L[j] * gr;\n    if (abs(r) \u003c 11) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], PASTURE[j] * gr, sm(11, 5, abs(r)) * 0.7);\n    if (sp.strips) {\n      const q = hash(s.ci, s.cj + 3) \u003c 0.5 ? wx : wy, st = floor(q / 4.5) & 1;\n      stageCol(st ? stageOf(2, k1, sp.off) : 0.86, C3);\n      for (let j = 0; j \u003c 3; j++) C[j] *= gr;\n    }\n    const fi = FID[i];\n    if (fi >= 0) {\n      const f = fs[fi], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy), cv = COV[i];\n      const side = f.crop2 \u003c 0 ? 0 : cl((dx * sin(f.sa) - dy * cos(f.sa)) / z + 0.5, 0, 1);\n      const amp = mix(f.a1, f.a2, side) * ringA, tk = abs(fr((dr * 5) / RW + 0.5) - 0.5) * (RW / 5 / z);\n      let m = f.tint * (1 + amp * cos((dr * TAU) / 3)) * (0.95 + 0.1 * vn(wx * 0.3 + f.id * 7, wy * 0.3));\n      if (dr > RW * 0.12) m *= 1 - 0.2 * cl(1 - tk * 1.6, 0, 1);\n      m *= 1 - 0.15 * cl(1 - abs(dr - RW + 0.5) / z, 0, 1);\n      const v = side > 0.5 ? f.v2 : f.v, wr = v > 0.76 && v \u003c 0.92 ? cl(1 - abs(fr(dr / 3.5) - 0.5) * (3.5 / z) * 1.8, 0, 1) : 0;\n      for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], mix(f.c1[j], f.c2[j], side) * m * (1 - 0.14 * wr), cv);\n      if (v > 0.76 && v \u003c 0.92) {\n        if (bale(f, wx, wy)) (C[0] = 196), (C[1] = 158), (C[2] = 76);\n        else if (bale(f, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.55;\n      }\n      if (dr \u003c 0.9) (C[0] = 170), (C[1] = 172), (C[2] = 164);\n      // Cut stubble, for a field the combine is in: paler, with a windrow down the middle of each pass.\n      if (f.harv) {\n        const kb = (RW - dr) / BAND, w2 = cl(1 - abs(fr(kb) - 0.5) * (BAND / z) * 1.6, 0, 1), m2 = f.tint * (0.96 + 0.08 * vn(wx * 0.5, wy * 0.5)) * (1 - 0.18 * w2) * (dr > RW * 0.12 ? 1 - 0.15 * cl(1 - tk * 1.6, 0, 1) : 1);\n        ALT[o] = 230 * m2;\n        ALT[o + 1] = 216 * m2;\n        ALT[o + 2] = 166 * m2;\n      }\n    }\n    const ob = objAt(S, wx, wy);\n    if (!ob && objAt(S, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.6;\n    if (ob === 1) for (let j = 0; j \u003c 3; j++) C[j] = leaf[j] * (0.8 + 0.4 * vn(wx * 1.3, wy * 1.3));\n    else if (ob === 2) (C[0] = 214), (C[1] = 208), (C[2] = 198);\n    else if (ob === 3) (C[0] = 196), (C[1] = 202), (C[2] = 206);\n    const aw = cl(1.25 - abs(r) / z, 0, 1);\n    if (aw > 0) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], WATER[j], aw);\n    const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, dp = min(lx, SEC - lx, ly, SEC - ly) / z, rc = x && y ? cl(0.6 / z + 0.5 - dp, 0, 1) : 0;\n    for (let j = 0; j \u003c 3; j++) BASE[o + j] = mix(C[j], GRAVEL[j], rc);\n  }\n}\n\nfunction startWet(S) {\n  for (const f of S.fields)\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let age = 99;\n      if (f.grow) {\n        if (!f.wipe) age = md((f.a - ANG[i]) * f.sd) / f.om;\n        else {\n          const r = md(ANG[i] - f.a0), p = f.rel;\n          if (r \u003c= f.span) age = (f.sd > 0 ? (r \u003c= p ? p - r : p + r) : r >= p ? r - p : 2 * f.span - r - p) / f.om;\n        }\n      }\n      WET[i] = exp(-age / TD);\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 2, 4), ts = cl(k[1], 0.2, 3) / 2, rt = cl(dt || 0, 0, 0.1), d = rt * ts;\n  let fresh = 0;\n  if (abs(k3 / 2 - S.z) > 0.004) layout(S, k3), (fresh = 1);\n  if (fresh || abs(k1 - S.k1) > 0.002) paint(S, k1), (S.k1 = k1);\n  if (fresh) startWet(S);\n  (S.k4 = cl(k[3], 0, 1)), (S.t += d), (S.rt += rt);\n  const bp = input.btnPressed || [];\n  if (bp[0]) {\n    for (const f of S.fields) f.boost = f.wipe ? 2 * f.span : TAU;\n    S.mist = 3;\n  }\n  if (bp[1] && !S.duster) {\n    const xs = S.fields.map((f) => f.cx).filter((x) => x > 4 && x \u003c 60), x = xs.length ? xs[floor(rnd() * xs.length)] + (rnd() - 0.5) * 6 : 32, dn = rnd() \u003c 0.5;\n    S.duster = { x, y: dn ? -8 : H + 8, vy: dn ? 30 : -30, acc: 0 };\n  }\n  S.mist = max(0, S.mist - rt);\n  (S.ox += 2 * d), (S.oy += 1.4 * d);\n  const dec = exp(-d / TD);\n  for (const f of S.fields) {\n    const on = f.grow || f.boost > 0, D = f.om * d;\n    if (on) f.boost -= D;\n    let lo = 1, hi = 0;\n    if (on && !f.wipe) (lo = f.a), (f.a = md(f.a + f.sd * D));\n    else if (on) {\n      const p = f.rel;\n      let q = p + f.sd * D;\n      (lo = min(p, q)), (hi = max(p, q));\n      if (q > f.span) (q = 2 * f.span - q), (f.sd = -1), (lo = min(p, q)), (hi = f.span);\n      if (q \u003c 0) (q = -q), (f.sd = 1), (lo = 0), (hi = max(p, q));\n      (f.rel = q), (f.a = f.a0 + q);\n    }\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let w = WET[i] * dec;\n      if (on) {\n        if (!f.wipe) {\n          if (md((ANG[i] - lo) * f.sd) \u003c= D) w = 1;\n        } else {\n          const r = md(ANG[i] - f.a0);\n          if (r >= lo && r \u003c= hi) w = 1;\n        }\n      }\n      WET[i] = w;\n    }\n    // The combine goes round at a steady walk, so the inner rings take less time.\n    if (f.harv) {\n      if (f.hst === 0) {\n        const rh = max(1.5, f.R - (BAND / S.z) * (floor(f.h) + 0.5));\n        f.h += (d * 5) / (TAU * rh * S.z);\n        if (f.h >= ceil(RW / BAND)) (f.hst = 1), (f.ht = 14);\n      } else if (f.hst === 1) {\n        if ((f.ht -= d) \u003c= 0) f.hst = 2;\n      } else if ((f.g -= d / 3) \u003c= 0) Object.assign(f, { hst: 0, h: 0, g: 1 });\n    }\n  }\n  // Trucks on the gravel roads and the dust they leave hanging.\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    tr.p += tr.d * 6 * d;\n    const lim = tr.v ? H : W;\n    if (tr.p > lim + 30) tr.p = -30;\n    if (tr.p \u003c -30) tr.p = lim + 30;\n    if ((tr.acc += d) > 0.1) {\n      tr.acc = 0;\n      S.dust.push({ x: tr.v ? tr.c : tr.p, y: tr.v ? tr.p : tr.c, t: S.t });\n    }\n  }\n  S.dust = S.dust.filter((p) => S.t - p.t \u003c 3.5);\n  const du = S.duster;\n  if (du) {\n    du.y += du.vy * rt;\n    if ((du.acc += rt) > 0.04) (du.acc = 0), S.spray.push({ x: du.x, y: du.y - Math.sign(du.vy) * 3, t: S.rt });\n    if (du.y \u003c -20 || du.y > H + 20) S.duster = null;\n  }\n  S.spray = S.spray.filter((p) => S.rt - p.t \u003c 4);\n}\n\nfunction blend(x, y, c, a) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], min(1, a));\n}\nfunction shade(x, y, k) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] *= k;\n}\n// A soft dot spread over the four LEDs around it.\nfunction puff(x, y, c, a) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  blend(x0, y0, c, a * (1 - fx) * (1 - fy)), blend(x0 + 1, y0, c, a * fx * (1 - fy)), blend(x0, y0 + 1, c, a * (1 - fx) * fy), blend(x0 + 1, y0 + 1, c, a * fx * fy);\n}\n\nconst SILVER = [214, 220, 226], MIST = [236, 242, 248], DUST = [246, 238, 216], RED = [204, 52, 36], YEL = [244, 212, 46], WHITE = [246, 248, 250], TANK = [236, 224, 196], TRUCK = [56, 64, 84];\nconst PLANE = [0, 1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, 0, -1, 0, -2, -1, -2, 1, -2], BODY = [250, 226, 80];\nconst PASTURE = [96, 118, 70], WATER = [84, 120, 146], GRAVEL = [206, 196, 168], CLOUD = [250, 250, 248], CLOUD_SH = [150, 160, 182];\n// How close a point along an arm of length R is to one of its towers.\nconst tw = (u, R) => cl(1 - abs(fr((u * 5) / R + 0.5) - 0.5) * (R / 5) * 1.5, 0, 1) * (u > R * 0.12 ? 1 : 0);\n// The arm and its shadow, its towers, the mist trailing it and the end gun's spray.\nfunction arm(S, f) {\n  const R = f.R, ca = cos(f.a), sa = sin(f.a), on = f.grow || f.boost > 0, ms = (on ? 1 : 0) * (1 + (S.mist > 0 ? 1.2 : 0)), tf = floor(S.rt * 7);\n  const x0 = max(0, floor(min(f.cx, f.cx + R * ca) - 3)), x1 = min(W - 1, ceil(max(f.cx, f.cx + R * ca) + 3));\n  const y0 = max(0, floor(min(f.cy, f.cy + R * sa) - 3)), y1 = min(H - 1, ceil(max(f.cy, f.cy + R * sa) + 3));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const qx = x + 0.5 - f.cx, qy = y + 0.5 - f.cy, t = qx * ca + qy * sa, c = qy * ca - qx * sa, ts = t - ca - sa, cs = c - ca + sa;\n      const o = (y * W + x) * 3, as = ts > -0.5 && ts \u003c R + 0.5 ? cl(1 - abs(cs), 0, 1) : 0, aa = t > -0.5 && t \u003c R + 0.3 ? cl(1.1 - abs(c), 0, 1) : 0;\n      if (as > 0) for (let j = 0; j \u003c 3; j++) F[o + j] *= 1 - 0.4 * as * (1 + 0.5 * tw(ts, R));\n      if (ms > 0 && t > R * 0.15 && t \u003c R + 2.5 && c * f.sd \u003c -0.3 && c * f.sd > (t > R ? -2.2 : -1.8)) {\n        const sp = hash(x * 31 + y, tf + f.id * 977);\n        blend(x, y, MIST, ms * (0.13 + (sp > 0.74 ? 0.5 : 0)) * (t > R ? 1.3 : 1));\n      }\n      if (aa > 0) {\n        const e = 0.6 * tw(t, R);\n        for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(SILVER[j], 250, e), 0.9 * aa);\n      }\n    }\n  // The wheeled towers, each with its short shadow.\n  for (let k = 1; k \u003c= 5; k++) {\n    const x = f.cx + ((R * k) / 5 - 0.3) * ca, y = f.cy + ((R * k) / 5 - 0.3) * sa;\n    shade(x + 1, y + 1, 0.55), blend(x, y, WHITE, 0.85);\n  }\n  blend(f.cx, f.cy, WHITE, 1);\n  shade(f.cx + 1, f.cy + 1, 0.55);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.z \u003c 0) return;\n  const fs = S.fields;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const fi = FID[i];\n    let g = 0;\n    if (fi >= 0) {\n      const f = fs[fi];\n      if (f.harv && f.hst) g = f.g;\n      else if (f.harv) {\n        const rel = md((ANG[i] - f.hs) * f.hd) / TAU;\n        if (floor((f.R - RAD[i]) / (BAND / S.z)) + rel \u003c f.h) g = 1;\n      }\n    }\n    const w = WET[i] > 0.004 ? WET[i] ** 0.8 * (fi >= 0 ? COV[i] : 0) : 0, k = 1 - 0.5 * w;\n    for (let j = 0; j \u003c 3; j++) {\n      let c = BASE[o + j];\n      if (g > 0) c = mix(c, ALT[o + j], g * COV[i]);\n      F[o + j] = c * k * (1 + (j - 1) * 0.08 * w);\n    }\n  }\n  for (const f of fs) {\n    if (f.harv && f.hst === 0) {\n      const z = S.z, rh = max(1.5, f.R - (BAND / z) * (floor(f.h) + 0.5)), th = f.hs + f.hd * fr(f.h) * TAU, x = f.cx + rh * cos(th), y = f.cy + rh * sin(th);\n      for (let j = 1; j \u003c 9; j++) {\n        const b = th - f.hd * (j * 0.7) / rh;\n        puff(f.cx + rh * cos(b) + 0.3 * j, f.cy + rh * sin(b) + 0.4 * j, DUST, 0.32 * (1 - j / 9));\n      }\n      shade(x + 1, y + 1, 0.5), shade(x + 2, y + 1, 0.6);\n      blend(x, y, RED, 1), blend(x + 1, y, TANK, 1);\n    }\n  }\n  for (const f of fs) arm(S, f);\n  for (const p of S.dust) {\n    const a = S.t - p.t;\n    const e = 0.8 * exp(-a / 1.7), sp = 0.4 + 0.6 * a, x = p.x + a * 1.7, y = p.y + a * 1.2;\n    puff(x, y, DUST, e), puff(x + sp, y + sp * 0.5, DUST, e * 0.6), puff(x - sp * 0.5, y + sp, DUST, e * 0.6);\n  }\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    const x = tr.v ? tr.c : tr.p, y = tr.v ? tr.p : tr.c;\n    shade(x + 1, y + 1, 0.55);\n    blend(x, y, TRUCK, 1);\n  }\n  for (const p of S.spray) {\n    const a = S.rt - p.t;\n    const e = 0.6 * exp(-a / 1.5), sp = 1.2 + 0.9 * a, x = p.x + a * 1.2, y = p.y + a * 0.8;\n    puff(x, y, MIST, e * 0.7), puff(x - sp, y, MIST, e), puff(x + sp, y, MIST, e);\n  }\n  const du = S.duster;\n  if (du) {\n    // A biplane seen from above: nose, wings, body and tail, with its shadow close by.\n    const sy = Math.sign(du.vy), X = floor(du.x), Y = floor(du.y);\n    for (let k = 0; k \u003c 20; k += 2) shade(X + PLANE[k] + 3, Y + PLANE[k + 1] * sy + 4, 0.55);\n    for (let k = 0; k \u003c 20; k += 2) blend(X + PLANE[k], Y + PLANE[k + 1] * sy, PLANE[k + 1] === 0 && PLANE[k] ? YEL : BODY, 1);\n  }\n  // Clouds and their shadows, lit from the upper left.\n  const thr = 0.69 - 0.2 * S.k4, ox = S.ox, oy = S.oy;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, u = (x - ox) * 0.3, v = (y - oy) * 0.27;\n    const sh = sm(thr, thr + 0.06, cloud(u - 1.8, v - 2.4)), n = cloud(u, v), ca = sm(thr, thr + 0.05, n);\n    let k = 1 - 0.45 * sh;\n    for (let j = 0; j \u003c 3; j++) F[o + j] *= k * (j === 2 ? 1 + 0.05 * sh : 1);\n    if (ca > 0) {\n      const lit = cl(0.7 - (n - cloud(u + 0.5, v + 0.5)) * 12 + 2 * (n - thr), 0, 1);\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(CLOUD_SH[j], CLOUD[j], lit), 0.92 * ca);\n    }\n    const lt = 1.02 - 0.09 * (x / W) - 0.07 * (y / H);\n    display.setPixel(x, y, min(255, F[o] * lt + 8) | 0, min(255, F[o + 1] * lt * 0.98 + 8) | 0, min(255, F[o + 2] * lt * 0.95 + 10) | 0);\n  }\n}\n","layer":{"id":"layer-center-pivot","type":"code","name":"center-pivot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Center Pivot\n// Family:  farm\n// Idea:    The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after center-pivot irrigation seen from the air over Kansas and the Saudi desert\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1\n//\n// Knob 1: Season. Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown.\n// Knob 2: Speed. At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster.\n// Knob 3: Fields. How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it.\n// Knob 4: Clouds. A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun.\n// Buttons: K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.\n\nconst W = 64, H = 128, N = W * H, SEC = 32, RW = 14, BAND = 3.2, TD = 4.5;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nconst md = (v) => v - floor(v / TAU) * TAU;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n\n// A crop's year in stages. The last number of each is how strongly the planted rings show.\nconst KEY = [\n  0, 84, 66, 50, 0.14, 0.1, 92, 76, 52, 0.18, 0.22, 116, 150, 64, 0.2, 0.36, 66, 136, 54, 0.12,\n  0.48, 34, 104, 48, 0.08, 0.56, 126, 132, 54, 0.08, 0.63, 222, 186, 64, 0.05, 0.7, 234, 200, 98, 0.05,\n  0.78, 224, 210, 158, 0.08, 0.89, 180, 168, 136, 0.08, 0.96, 116, 92, 68, 0.14, 1.01, 84, 66, 50, 0.14,\n];\nfunction stageCol(v, o) {\n  let a = 0;\n  while (KEY[a + 5] \u003c v) a += 5;\n  const u = sm(KEY[a], KEY[a + 5], v);\n  for (let j = 1; j \u003c 4; j++) o[j - 1] = mix(KEY[a + j], KEY[a + 5 + j], u);\n  return mix(KEY[a + 4], KEY[a + 9], u);\n}\n// Corn and soybeans run from ploughing to stubble, alfalfa stays green. Winter wheat is gold by June and sown again in autumn.\nfunction stageOf(crop, k, off) {\n  if (crop === 2) return fr(0.6 + 0.72 * k + off);\n  if (crop === 3) return 0.38 + 0.06 * sin(k * 9 + off * 20) + 0.14 * sm(0.75, 1, k);\n  return cl(0.86 * k + off - (crop ? 0.06 : 0), 0, 0.985);\n}\n\n// The river, in section units (an LED each at Fields 2), and the signed distance across it.\nconst rx = (y) => -39 + 13 * exp(-(((y - 16) / 24) ** 2)) + 2.5 * sin(y * 0.09 + 1) + 0.06 * y;\nfunction rd(wx, wy) {\n  const s = rx(wy + 0.5) - rx(wy - 0.5);\n  return (wx - rx(wy)) / sqrt(1 + s * s);\n}\n// The eight sections in view at the start, left then right, top down. Each is a crop, how far ahead it is,\n// a second crop on the other half and how far ahead that is, and the corner of the farmstead (-1 for none).\nconst OPEN = [\n  [0, 0.2, -1, 0, -1], [3, 0, -1, 0, 2], [2, 0.02, -1, 0, -1], [0, 0.19, 1, 0, -1],\n  [0, 0.32, -1, 0, -1], [1, 0, -1, 0, 1], [3, 0.3, 2, 0.06, 2], [1, 0.18, -1, 0, -1],\n];\nfunction spec(ci, cj) {\n  if (ci >= -1 && ci \u003c= 0 && cj >= -2 && cj \u003c= 1) {\n    const o = OPEN[(cj + 2) * 2 + ci + 1];\n    return { strips: 0, crop: o[0], off: o[1], crop2: o[2], off2: o[3], farm: o[4] };\n  }\n  const h = (k) => hash(ci * 31 + k, cj * 17 + 5);\n  return { strips: h(1) \u003c 0.14, crop: floor(h(2) * 4), off: h(3) * 0.3, crop2: h(4) \u003c 0.25 ? floor(h(5) * 4) : -1, off2: h(6) * 0.3, farm: h(7) \u003c 0.45 ? floor(h(8) * 4) : -1 };\n}\n\n// Per LED: its field, angle and distance from that pivot, how much of it is field; field LEDs grouped by field.\nconst FID = new Int16Array(N), ANG = new Float32Array(N), RAD = new Float32Array(N), COV = new Float32Array(N), FP = new Int32Array(N);\nconst BASE = new Float32Array(N * 3), ALT = new Float32Array(N * 3), WET = new Float32Array(N), F = new Float32Array(N * 3), C3 = new Float64Array(3);\n// Cloud noise that tiles every 64.\nconst CN = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = k & 63, y = k >> 6;\n  CN[k] = 0.55 * vn(x / 8, y / 8, 8) + 0.3 * vn(x / 4 + 9, y / 4, 16) + 0.15 * vn(x / 2, y / 2 + 7, 32);\n}\nfunction cloud(u, v) {\n  const x0 = floor(u), y0 = floor(v), fx = u - x0, fy = v - y0, a = x0 & 63, a1 = (x0 + 1) & 63, b = (y0 & 63) \u003c\u003c 6, b1 = ((y0 + 1) & 63) \u003c\u003c 6;\n  return mix(mix(CN[b + a], CN[b + a1], fx), mix(CN[b1 + a], CN[b1 + a1], fx), fy);\n}\n\nexport function setup(params) {\n  params.s = { z: -1, k1: -1, t: 0, rt: 0, ox: 20, oy: 30, mist: 0, fields: [], sec: new Map(), tr: [], dust: [], duster: null, spray: [] };\n}\n\nfunction sectionAt(S, wx, wy) {\n  const ci = floor(wx / SEC), cj = floor(wy / SEC), key = ci * 1000 + cj;\n  let s = S.sec.get(key);\n  if (!s) {\n    const sp = spec(ci, cj), cx = ci * SEC + 16, cy = cj * SEC + 16, sd = rd(cx, cy);\n    s = { ci, cj, sp, f: -1, cx, cy, sd };\n    S.sec.set(key, s);\n  }\n  return s;\n}\n\n// The fields for this height, and each LED's place in them.\nfunction layout(S, k3) {\n  const z = (S.z = k3 / 2), fs = (S.fields = []);\n  S.sec.clear();\n  for (let cj = floor(-2 * z) - 1; cj \u003c= ceil(2 * z); cj++)\n    for (let ci = floor(-z) - 1; ci \u003c= ceil(z); ci++) {\n      const s = sectionAt(S, ci * SEC + 1, cj * SEC + 1), sp = s.sp;\n      if (sp.strips || abs(s.sd) \u003c 6.5) continue;\n      const id = fs.length, sg = s.sd > 0 ? 1 : -1, h = (k) => hash(ci * 13 + k, cj * 7 + 3);\n      // Where the river and its trees cut the circle, the arm swings to and fro over what is left.\n      let run = 0, best = 0, start = 0, first = -1;\n      const ok = (k) => rd(s.cx + RW * 0.97 * cos((k * TAU) / 96), s.cy + RW * 0.97 * sin((k * TAU) / 96)) * sg > 4.8;\n      for (let k = 0; k \u003c 192; k++) {\n        if (ok(k % 96)) {\n          if (!run) start = k;\n          if (++run > best && run \u003c= 96) (best = run), (first = start);\n        } else run = 0;\n      }\n      if (best \u003c 16) continue;\n      const f = { id, s, sg, cx: 32.5 + s.cx / z, cy: 64.5 + s.cy / z, R: RW / z, crop: sp.crop, off: sp.off, crop2: sp.crop2, off2: sp.off2, sa: h(1) * TAU };\n      Object.assign(f, { sd: h(2) \u003c 0.5 ? 1 : -1, om: TAU / (16 + 10 * h(3)), a: h(4) * TAU, tint: 0.93 + 0.12 * h(5), boost: 0, wipe: 0, a0: 0, span: TAU, rel: 0 });\n      Object.assign(f, { harv: 0, h: 0, h0: 0.3 + 0.4 * h(6), hs: h(7) * TAU, hd: h(8) \u003c 0.5 ? 1 : -1, hst: 0, ht: 0, g: 1, n0: 0, n1: 0, grow: 0 });\n      if (best \u003c 96) Object.assign(f, { wipe: 1, a0: ((first + 1) * TAU) / 96, span: ((best - 2) * TAU) / 96, rel: h(4) * ((best - 2) * TAU) / 96 }), (f.a = f.a0 + f.rel);\n      s.f = id;\n      fs.push(f);\n    }\n  for (let i = 0; i \u003c N; i++) {\n    const wx = ((i & 63) - 32) * z, wy = ((i >> 6) - 64) * z, s = sectionAt(S, wx, wy);\n    FID[i] = -1;\n    COV[i] = 0;\n    if (s.f \u003c 0) continue;\n    const f = fs[s.f], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy);\n    const c = cl((RW - dr) / z + 0.5, 0, 1) * cl((rd(wx, wy) * f.sg - 4.6) / z + 0.5, 0, 1);\n    if (c \u003c= 0) continue;\n    (FID[i] = f.id), (COV[i] = c), (ANG[i] = md(atan2(dy, dx))), (RAD[i] = dr / z);\n  }\n  for (const f of fs) f.n1 = 0;\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) fs[FID[i]].n1++;\n  let n = 0;\n  for (const f of fs) (f.n0 = n), (n += f.n1), (f.n1 = f.n0);\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) FP[fs[FID[i]].n1++] = i;\n  const vr = [], hr = [];\n  for (let m = -4; m \u003c= 4; m++) {\n    const x = 32.5 + (m * SEC) / z, y = 64.5 + (m * SEC) / z;\n    if (x > 2 && x \u003c 62) vr.push(x);\n    if (y > 2 && y \u003c 126) hr.push(y);\n  }\n  S.tr = [0, 1].map((k) => ({ v: k === 0, c: k ? hr[min(hr.length - 1, 2)] : vr[floor(vr.length / 2)], p: k ? 20 : 100, d: k ? 1 : -1, acc: 0 }));\n  S.dust = [];\n}\n\n// What stands on the land: trees along the river and in the farmsteads' windbreaks (1), or a farmhouse roof (2)\n// with its grain bins (3). 0 is open ground.\nfunction objAt(S, wx, wy) {\n  const r = abs(rd(wx, wy));\n  if (r > 1.1 && r \u003c 4.4 && vn(wx * 0.55 + 5, wy * 0.55) > 0.22 + 0.11 * r) return 1;\n  const s = sectionAt(S, wx, wy), c = s.sp.farm;\n  if (c \u003c 0 || s.sp.strips) return 0;\n  const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, u = c & 1 ? SEC - lx : lx, v = c & 2 ? SEC - ly : ly;\n  if (u \u003c 1 || v \u003c 1) return 0;\n  if ((u \u003c 8.6 && v \u003c 2.7) || (u \u003c 2.7 && v \u003c 8.6)) return hash(floor(u * 1.4), floor(v * 1.4) + c) \u003c 0.85 ? 1 : 0;\n  if (u > 3.4 && u \u003c 5.3 && v > 3.4 && v \u003c 5.1) return 2;\n  if ((u - 6.4) ** 2 + (v - 3.7) ** 2 \u003c 0.7 || (u - 3.7) ** 2 + (v - 6.4) ** 2 \u003c 0.7) return 3;\n  return 0;\n}\n\n// Round bales lying on the windrows of a stubble field.\nfunction bale(f, wx, wy) {\n  const dx = wx - f.s.cx, dy = wy - f.s.cy, dr = sqrt(dx * dx + dy * dy);\n  if (dr > RW - 1 || dr \u003c 2) return 0;\n  const q = dr / 3.5, k = floor(q), arc = md(atan2(dy, dx) - f.sa) * dr, c = floor(arc / 4.5);\n  return abs(q - k - 0.5) * 3.5 \u003c 0.55 && abs(arc / 4.5 - c - 0.5) * 4.5 \u003c 0.6 && arc \u003c 4.2 * dr && hash(k, c + f.id * 50) \u003c 0.75 ? 1 : 0;\n}\n\n// The picture that stays put between knob turns: land, roads, river, farmsteads and each field at its point in the season.\nfunction paint(S, k1) {\n  const z = S.z, fs = S.fields, C = C3, L = [mix(156, 172, sm(0, 0.4, k1)), mix(146, 148, k1), mix(100, 106, k1)];\n  const leaf = [mix(34, 132, sm(0.72, 0.92, k1)), mix(66, 102, sm(0.72, 0.92, k1)), 38];\n  for (const f of fs) {\n    f.v = stageOf(f.crop, k1, f.off);\n    f.v2 = f.crop2 \u003c 0 ? f.v : stageOf(f.crop2, k1, f.off2);\n    f.c1 = [0, 0, 0];\n    f.c2 = [0, 0, 0];\n    f.a1 = stageCol(f.v, f.c1);\n    f.a2 = stageCol(f.v2, f.c2);\n    f.grow = (f.v > 0.1 && f.v \u003c 0.57) || (f.v2 > 0.1 && f.v2 \u003c 0.57) ? 1 : 0;\n    const hv = f.crop2 \u003c 0 && f.v > 0.6 && f.v \u003c 0.77 ? 1 : 0;\n    if (hv !== f.harv) Object.assign(f, { harv: hv, h: f.h0, hst: 0, g: 1 });\n  }\n  const ringA = sm(1.9, 2.6, 3 / z);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, wx = (x - 32) * z, wy = (y - 64) * z, s = sectionAt(S, wx, wy), sp = s.sp, r = rd(wx, wy), gr = 0.93 + 0.1 * vn(wx * 0.4, wy * 0.4) + 0.04 * hash(x, y);\n    for (let j = 0; j \u003c 3; j++) C[j] = L[j] * gr;\n    if (abs(r) \u003c 11) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], PASTURE[j] * gr, sm(11, 5, abs(r)) * 0.7);\n    if (sp.strips) {\n      const q = hash(s.ci, s.cj + 3) \u003c 0.5 ? wx : wy, st = floor(q / 4.5) & 1;\n      stageCol(st ? stageOf(2, k1, sp.off) : 0.86, C3);\n      for (let j = 0; j \u003c 3; j++) C[j] *= gr;\n    }\n    const fi = FID[i];\n    if (fi >= 0) {\n      const f = fs[fi], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy), cv = COV[i];\n      const side = f.crop2 \u003c 0 ? 0 : cl((dx * sin(f.sa) - dy * cos(f.sa)) / z + 0.5, 0, 1);\n      const amp = mix(f.a1, f.a2, side) * ringA, tk = abs(fr((dr * 5) / RW + 0.5) - 0.5) * (RW / 5 / z);\n      let m = f.tint * (1 + amp * cos((dr * TAU) / 3)) * (0.95 + 0.1 * vn(wx * 0.3 + f.id * 7, wy * 0.3));\n      if (dr > RW * 0.12) m *= 1 - 0.2 * cl(1 - tk * 1.6, 0, 1);\n      m *= 1 - 0.15 * cl(1 - abs(dr - RW + 0.5) / z, 0, 1);\n      const v = side > 0.5 ? f.v2 : f.v, wr = v > 0.76 && v \u003c 0.92 ? cl(1 - abs(fr(dr / 3.5) - 0.5) * (3.5 / z) * 1.8, 0, 1) : 0;\n      for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], mix(f.c1[j], f.c2[j], side) * m * (1 - 0.14 * wr), cv);\n      if (v > 0.76 && v \u003c 0.92) {\n        if (bale(f, wx, wy)) (C[0] = 196), (C[1] = 158), (C[2] = 76);\n        else if (bale(f, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.55;\n      }\n      if (dr \u003c 0.9) (C[0] = 170), (C[1] = 172), (C[2] = 164);\n      // Cut stubble, for a field the combine is in: paler, with a windrow down the middle of each pass.\n      if (f.harv) {\n        const kb = (RW - dr) / BAND, w2 = cl(1 - abs(fr(kb) - 0.5) * (BAND / z) * 1.6, 0, 1), m2 = f.tint * (0.96 + 0.08 * vn(wx * 0.5, wy * 0.5)) * (1 - 0.18 * w2) * (dr > RW * 0.12 ? 1 - 0.15 * cl(1 - tk * 1.6, 0, 1) : 1);\n        ALT[o] = 230 * m2;\n        ALT[o + 1] = 216 * m2;\n        ALT[o + 2] = 166 * m2;\n      }\n    }\n    const ob = objAt(S, wx, wy);\n    if (!ob && objAt(S, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.6;\n    if (ob === 1) for (let j = 0; j \u003c 3; j++) C[j] = leaf[j] * (0.8 + 0.4 * vn(wx * 1.3, wy * 1.3));\n    else if (ob === 2) (C[0] = 214), (C[1] = 208), (C[2] = 198);\n    else if (ob === 3) (C[0] = 196), (C[1] = 202), (C[2] = 206);\n    const aw = cl(1.25 - abs(r) / z, 0, 1);\n    if (aw > 0) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], WATER[j], aw);\n    const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, dp = min(lx, SEC - lx, ly, SEC - ly) / z, rc = x && y ? cl(0.6 / z + 0.5 - dp, 0, 1) : 0;\n    for (let j = 0; j \u003c 3; j++) BASE[o + j] = mix(C[j], GRAVEL[j], rc);\n  }\n}\n\nfunction startWet(S) {\n  for (const f of S.fields)\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let age = 99;\n      if (f.grow) {\n        if (!f.wipe) age = md((f.a - ANG[i]) * f.sd) / f.om;\n        else {\n          const r = md(ANG[i] - f.a0), p = f.rel;\n          if (r \u003c= f.span) age = (f.sd > 0 ? (r \u003c= p ? p - r : p + r) : r >= p ? r - p : 2 * f.span - r - p) / f.om;\n        }\n      }\n      WET[i] = exp(-age / TD);\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 2, 4), ts = cl(k[1], 0.2, 3) / 2, rt = cl(dt || 0, 0, 0.1), d = rt * ts;\n  let fresh = 0;\n  if (abs(k3 / 2 - S.z) > 0.004) layout(S, k3), (fresh = 1);\n  if (fresh || abs(k1 - S.k1) > 0.002) paint(S, k1), (S.k1 = k1);\n  if (fresh) startWet(S);\n  (S.k4 = cl(k[3], 0, 1)), (S.t += d), (S.rt += rt);\n  const bp = input.btnPressed || [];\n  if (bp[0]) {\n    for (const f of S.fields) f.boost = f.wipe ? 2 * f.span : TAU;\n    S.mist = 3;\n  }\n  if (bp[1] && !S.duster) {\n    const xs = S.fields.map((f) => f.cx).filter((x) => x > 4 && x \u003c 60), x = xs.length ? xs[floor(rnd() * xs.length)] + (rnd() - 0.5) * 6 : 32, dn = rnd() \u003c 0.5;\n    S.duster = { x, y: dn ? -8 : H + 8, vy: dn ? 30 : -30, acc: 0 };\n  }\n  S.mist = max(0, S.mist - rt);\n  (S.ox += 2 * d), (S.oy += 1.4 * d);\n  const dec = exp(-d / TD);\n  for (const f of S.fields) {\n    const on = f.grow || f.boost > 0, D = f.om * d;\n    if (on) f.boost -= D;\n    let lo = 1, hi = 0;\n    if (on && !f.wipe) (lo = f.a), (f.a = md(f.a + f.sd * D));\n    else if (on) {\n      const p = f.rel;\n      let q = p + f.sd * D;\n      (lo = min(p, q)), (hi = max(p, q));\n      if (q > f.span) (q = 2 * f.span - q), (f.sd = -1), (lo = min(p, q)), (hi = f.span);\n      if (q \u003c 0) (q = -q), (f.sd = 1), (lo = 0), (hi = max(p, q));\n      (f.rel = q), (f.a = f.a0 + q);\n    }\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let w = WET[i] * dec;\n      if (on) {\n        if (!f.wipe) {\n          if (md((ANG[i] - lo) * f.sd) \u003c= D) w = 1;\n        } else {\n          const r = md(ANG[i] - f.a0);\n          if (r >= lo && r \u003c= hi) w = 1;\n        }\n      }\n      WET[i] = w;\n    }\n    // The combine goes round at a steady walk, so the inner rings take less time.\n    if (f.harv) {\n      if (f.hst === 0) {\n        const rh = max(1.5, f.R - (BAND / S.z) * (floor(f.h) + 0.5));\n        f.h += (d * 5) / (TAU * rh * S.z);\n        if (f.h >= ceil(RW / BAND)) (f.hst = 1), (f.ht = 14);\n      } else if (f.hst === 1) {\n        if ((f.ht -= d) \u003c= 0) f.hst = 2;\n      } else if ((f.g -= d / 3) \u003c= 0) Object.assign(f, { hst: 0, h: 0, g: 1 });\n    }\n  }\n  // Trucks on the gravel roads and the dust they leave hanging.\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    tr.p += tr.d * 6 * d;\n    const lim = tr.v ? H : W;\n    if (tr.p > lim + 30) tr.p = -30;\n    if (tr.p \u003c -30) tr.p = lim + 30;\n    if ((tr.acc += d) > 0.1) {\n      tr.acc = 0;\n      S.dust.push({ x: tr.v ? tr.c : tr.p, y: tr.v ? tr.p : tr.c, t: S.t });\n    }\n  }\n  S.dust = S.dust.filter((p) => S.t - p.t \u003c 3.5);\n  const du = S.duster;\n  if (du) {\n    du.y += du.vy * rt;\n    if ((du.acc += rt) > 0.04) (du.acc = 0), S.spray.push({ x: du.x, y: du.y - Math.sign(du.vy) * 3, t: S.rt });\n    if (du.y \u003c -20 || du.y > H + 20) S.duster = null;\n  }\n  S.spray = S.spray.filter((p) => S.rt - p.t \u003c 4);\n}\n\nfunction blend(x, y, c, a) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], min(1, a));\n}\nfunction shade(x, y, k) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] *= k;\n}\n// A soft dot spread over the four LEDs around it.\nfunction puff(x, y, c, a) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  blend(x0, y0, c, a * (1 - fx) * (1 - fy)), blend(x0 + 1, y0, c, a * fx * (1 - fy)), blend(x0, y0 + 1, c, a * (1 - fx) * fy), blend(x0 + 1, y0 + 1, c, a * fx * fy);\n}\n\nconst SILVER = [214, 220, 226], MIST = [236, 242, 248], DUST = [246, 238, 216], RED = [204, 52, 36], YEL = [244, 212, 46], WHITE = [246, 248, 250], TANK = [236, 224, 196], TRUCK = [56, 64, 84];\nconst PLANE = [0, 1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, 0, -1, 0, -2, -1, -2, 1, -2], BODY = [250, 226, 80];\nconst PASTURE = [96, 118, 70], WATER = [84, 120, 146], GRAVEL = [206, 196, 168], CLOUD = [250, 250, 248], CLOUD_SH = [150, 160, 182];\n// How close a point along an arm of length R is to one of its towers.\nconst tw = (u, R) => cl(1 - abs(fr((u * 5) / R + 0.5) - 0.5) * (R / 5) * 1.5, 0, 1) * (u > R * 0.12 ? 1 : 0);\n// The arm and its shadow, its towers, the mist trailing it and the end gun's spray.\nfunction arm(S, f) {\n  const R = f.R, ca = cos(f.a), sa = sin(f.a), on = f.grow || f.boost > 0, ms = (on ? 1 : 0) * (1 + (S.mist > 0 ? 1.2 : 0)), tf = floor(S.rt * 7);\n  const x0 = max(0, floor(min(f.cx, f.cx + R * ca) - 3)), x1 = min(W - 1, ceil(max(f.cx, f.cx + R * ca) + 3));\n  const y0 = max(0, floor(min(f.cy, f.cy + R * sa) - 3)), y1 = min(H - 1, ceil(max(f.cy, f.cy + R * sa) + 3));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const qx = x + 0.5 - f.cx, qy = y + 0.5 - f.cy, t = qx * ca + qy * sa, c = qy * ca - qx * sa, ts = t - ca - sa, cs = c - ca + sa;\n      const o = (y * W + x) * 3, as = ts > -0.5 && ts \u003c R + 0.5 ? cl(1 - abs(cs), 0, 1) : 0, aa = t > -0.5 && t \u003c R + 0.3 ? cl(1.1 - abs(c), 0, 1) : 0;\n      if (as > 0) for (let j = 0; j \u003c 3; j++) F[o + j] *= 1 - 0.4 * as * (1 + 0.5 * tw(ts, R));\n      if (ms > 0 && t > R * 0.15 && t \u003c R + 2.5 && c * f.sd \u003c -0.3 && c * f.sd > (t > R ? -2.2 : -1.8)) {\n        const sp = hash(x * 31 + y, tf + f.id * 977);\n        blend(x, y, MIST, ms * (0.13 + (sp > 0.74 ? 0.5 : 0)) * (t > R ? 1.3 : 1));\n      }\n      if (aa > 0) {\n        const e = 0.6 * tw(t, R);\n        for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(SILVER[j], 250, e), 0.9 * aa);\n      }\n    }\n  // The wheeled towers, each with its short shadow.\n  for (let k = 1; k \u003c= 5; k++) {\n    const x = f.cx + ((R * k) / 5 - 0.3) * ca, y = f.cy + ((R * k) / 5 - 0.3) * sa;\n    shade(x + 1, y + 1, 0.55), blend(x, y, WHITE, 0.85);\n  }\n  blend(f.cx, f.cy, WHITE, 1);\n  shade(f.cx + 1, f.cy + 1, 0.55);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.z \u003c 0) return;\n  const fs = S.fields;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const fi = FID[i];\n    let g = 0;\n    if (fi >= 0) {\n      const f = fs[fi];\n      if (f.harv && f.hst) g = f.g;\n      else if (f.harv) {\n        const rel = md((ANG[i] - f.hs) * f.hd) / TAU;\n        if (floor((f.R - RAD[i]) / (BAND / S.z)) + rel \u003c f.h) g = 1;\n      }\n    }\n    const w = WET[i] > 0.004 ? WET[i] ** 0.8 * (fi >= 0 ? COV[i] : 0) : 0, k = 1 - 0.5 * w;\n    for (let j = 0; j \u003c 3; j++) {\n      let c = BASE[o + j];\n      if (g > 0) c = mix(c, ALT[o + j], g * COV[i]);\n      F[o + j] = c * k * (1 + (j - 1) * 0.08 * w);\n    }\n  }\n  for (const f of fs) {\n    if (f.harv && f.hst === 0) {\n      const z = S.z, rh = max(1.5, f.R - (BAND / z) * (floor(f.h) + 0.5)), th = f.hs + f.hd * fr(f.h) * TAU, x = f.cx + rh * cos(th), y = f.cy + rh * sin(th);\n      for (let j = 1; j \u003c 9; j++) {\n        const b = th - f.hd * (j * 0.7) / rh;\n        puff(f.cx + rh * cos(b) + 0.3 * j, f.cy + rh * sin(b) + 0.4 * j, DUST, 0.32 * (1 - j / 9));\n      }\n      shade(x + 1, y + 1, 0.5), shade(x + 2, y + 1, 0.6);\n      blend(x, y, RED, 1), blend(x + 1, y, TANK, 1);\n    }\n  }\n  for (const f of fs) arm(S, f);\n  for (const p of S.dust) {\n    const a = S.t - p.t;\n    const e = 0.8 * exp(-a / 1.7), sp = 0.4 + 0.6 * a, x = p.x + a * 1.7, y = p.y + a * 1.2;\n    puff(x, y, DUST, e), puff(x + sp, y + sp * 0.5, DUST, e * 0.6), puff(x - sp * 0.5, y + sp, DUST, e * 0.6);\n  }\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    const x = tr.v ? tr.c : tr.p, y = tr.v ? tr.p : tr.c;\n    shade(x + 1, y + 1, 0.55);\n    blend(x, y, TRUCK, 1);\n  }\n  for (const p of S.spray) {\n    const a = S.rt - p.t;\n    const e = 0.6 * exp(-a / 1.5), sp = 1.2 + 0.9 * a, x = p.x + a * 1.2, y = p.y + a * 0.8;\n    puff(x, y, MIST, e * 0.7), puff(x - sp, y, MIST, e), puff(x + sp, y, MIST, e);\n  }\n  const du = S.duster;\n  if (du) {\n    // A biplane seen from above: nose, wings, body and tail, with its shadow close by.\n    const sy = Math.sign(du.vy), X = floor(du.x), Y = floor(du.y);\n    for (let k = 0; k \u003c 20; k += 2) shade(X + PLANE[k] + 3, Y + PLANE[k + 1] * sy + 4, 0.55);\n    for (let k = 0; k \u003c 20; k += 2) blend(X + PLANE[k], Y + PLANE[k + 1] * sy, PLANE[k + 1] === 0 && PLANE[k] ? YEL : BODY, 1);\n  }\n  // Clouds and their shadows, lit from the upper left.\n  const thr = 0.69 - 0.2 * S.k4, ox = S.ox, oy = S.oy;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, u = (x - ox) * 0.3, v = (y - oy) * 0.27;\n    const sh = sm(thr, thr + 0.06, cloud(u - 1.8, v - 2.4)), n = cloud(u, v), ca = sm(thr, thr + 0.05, n);\n    let k = 1 - 0.45 * sh;\n    for (let j = 0; j \u003c 3; j++) F[o + j] *= k * (j === 2 ? 1 + 0.05 * sh : 1);\n    if (ca > 0) {\n      const lit = cl(0.7 - (n - cloud(u + 0.5, v + 0.5)) * 12 + 2 * (n - thr), 0, 1);\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(CLOUD_SH[j], CLOUD[j], lit), 0.92 * ca);\n    }\n    const lt = 1.02 - 0.09 * (x / W) - 0.07 * (y / H);\n    display.setPixel(x, y, min(255, F[o] * lt + 8) | 0, min(255, F[o + 1] * lt * 0.98 + 8) | 0, min(255, F[o + 2] * lt * 0.95 + 10) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster."},{"name":"Fields","min":2,"max":4,"about":"How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it."},{"name":"Clouds","min":0,"max":1,"about":"A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun."}],"start":[0,2,2,0.06],"measures":{"motion":0.0527,"detail":0.0683,"edges":0.2287,"complexity":2.4956,"coverage":1,"colour":0.1929,"drift":0.0389},"knobResponse":[0.1272,0.0462,0.1999,0.1865]},{"slug":"change-ringing","title":"Change Ringing","family":"rhythm","round":20,"note":"종탑 종실에서 종들이 바퀴째 한 바퀴씩 돌며 칠 때마다 번쩍이고, 그 아래로 종마다 제 색의 선이 체인지 한 줄에 한 칸씩 Plain Bob 을 따라 지그재그로 흘러내려요. 트레블의 선만 빨강이고, K1 을 누르면 「Bob!」을 불러 다음 리드 엔드에서 2번 자리 대신 4번 자리를 만들어요.","idea":"In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.","buttons":"K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.","code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-change-ringing","type":"code","name":"change-ringing","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lines","min":0,"max":1,"about":"Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one."},{"name":"Speed","min":0.25,"max":3,"about":"The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row."},{"name":"Bells","min":4,"max":8,"about":"How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds."},{"name":"Method","min":-1,"max":1,"about":"-1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice."}],"start":[0,2,4,0.06],"measures":{"motion":0.4844,"detail":0.08,"edges":0.458,"complexity":1.2457,"coverage":0.5293,"colour":0.2305,"drift":0.0504},"knobResponse":[0.0499,0.1129,0.1732,0.0613]},{"slug":"chemical-garden","title":"Chemical Garden","family":"chemistry","round":21,"note":"물유리 용액을 채운 키 큰 유리컵 모래 위에 금속염 결정을 떨어뜨리면 코발트의 청보라나 철의 녹슨 주황 같은 속 빈 광물 관이 흔들리며 수면까지 자라요. 컵이 차면 빈 컵이 밀려 들어와 다시 자라요.","idea":"Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.","buttons":"K1 tap slides the glass away and brings in a fresh one.","code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","layer":{"id":"layer-chemical-garden","type":"code","name":"chemical-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salts","min":0,"max":4,"about":"What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps."},{"name":"Crystals","min":5,"max":20,"about":"How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once."},{"name":"Strength","min":-1,"max":1,"about":"How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches."}],"start":[0,2,5,0.06],"measures":{"motion":0.044,"detail":0.0682,"edges":0.4036,"complexity":2.0411,"coverage":0.7726,"colour":0.152,"drift":0.0448},"knobResponse":[0.0762,0.0506,0.0924,0.0773]},{"slug":"chimera-state","title":"Chimera State","family":"rhythm","round":35,"note":"똑같은 위상 진동자 256개가 고리에 앉아 서로 당기는데, 고리가 발맞춰 도는 30% 와 위상이 흩어진 나머지로 갈라져요. 위 20줄은 진동자마다 위상을 제자리에 점으로 찍어 매끈한 호 옆에 흩뿌린 점을 보이고, 그 아래로 한 줄이 한 순간이라 가운데로 하늘색 띠가 곧게 흐르고 양옆은 한 바퀴씩 뒤처지는 진동자의 어두운 획으로 채워져요. K3 은 위상 지연을 80도에서 88도로 돌려 발맞춘 띠를 19열에서 9열로 좁히고, K1 을 누르면 새 무작위 출발에서 키메라가 다시 자라요.","idea":"256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.","buttons":"K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.","code":"// ===== Patternflow pattern =====\n// Title:   Chimera State\n// Family:  rhythm\n// Idea:    256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Chimera states (Yoshiki Kuramoto and Dorjsuren Battogtokh, 2002)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4\n//\n// Knob 1: Hue. Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green.\n// Knob 2: Speed. Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second.\n// Knob 3: Lag. The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls.\n// Knob 4: Stride. Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle.\n// Buttons: K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.\n\n// The ring form is Daniel Abrams and Steven Strogatz's (2004): N identical\n// phase oscillators at x_j = -pi + 2 pi j / N, each pulled by all the others\n// through the kernel G(x) = (1 + A cos x) / 2 pi and a phase lag alpha,\n//   dθ_j/dt = ω - (2 pi / N) Σ_k G(x_j - x_k) sin(θ_j - θ_k + α),\n// their A = 0.995 and their start θ_j = 6 r_j exp(-0.76 x_j²), r_j uniform\n// in [-1/2, 1/2]. Every oscillator obeys the same law, yet the ring splits\n// into a stretch that moves in step and a stretch whose phases scatter.\nconst W = 64, H = 128, N = 256, PER = N / W, TOP = 20, Y0 = TOP + 1, ROWS = H - Y0;\nconst A = 0.995, STEP = 0.1, MAXSTEPS = 30, RATE = 4, HUE0 = 0.55;\nconst { min, floor, round, sqrt, sin, cos, exp, atan2, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (v, m) => v - m * round(v / m);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A new random draw of the Abrams-Strogatz start, its scattered hump at x0.\n// The part in step forms on the calm side, opposite x0; on the first draw\n// the columns are set to put it in the middle of the panel.\nfunction seed(P, x0, place) {\n  for (let j = 0; j \u003c N; j++) {\n    const d = wrap(-PI + (TAU * j) / N - x0, TAU);\n    P.th[j] = 6 * (Math.random() - 0.5) * exp(-0.76 * d * d);\n  }\n  if (place) {\n    P.xs = ((x0 + 2 * PI) / TAU) * W;\n    P.xs -= W * floor(P.xs / W);\n    P.col = round(P.xs) % W;\n  }\n  P.dead = 0;\n  P.age = 0;\n  P.lag = 84;\n}\n\n// The sum over k is the local field R_j e^{iΘ_j} = (1/N) Σ_k (1 + A cos(x_j\n// - x_k)) e^{iθ_k}, and with cos(x_j - x_k) = cos x_j cos x_k + sin x_j sin\n// x_k it is three sums over the ring, Σ e^{iθ}, Σ cos x e^{iθ} and\n// Σ sin x e^{iθ}, read off at each x_j: O(N) a step instead of O(N²). Then\n// dθ_j/dt = ω - R_j sin(θ_j - Θ_j + α).\nfunction deriv(P, t, d, frame) {\n  const { cx, sx, c: C, s: S } = P;\n  let p0r = 0, p0i = 0, pcr = 0, pci = 0, psr = 0, psi = 0;\n  for (let k = 0; k \u003c N; k++) {\n    const c = cos(t[k]), s = sin(t[k]);\n    C[k] = c;\n    S[k] = s;\n    p0r += c;\n    p0i += s;\n    pcr += cx[k] * c;\n    pci += cx[k] * s;\n    psr += sx[k] * c;\n    psi += sx[k] * s;\n  }\n  const ca = P.ca, sa = P.sa;\n  let wx = 0, wy = 0;\n  for (let j = 0; j \u003c N; j++) {\n    const rr = (p0r + A * (cx[j] * pcr + sx[j] * psr)) / N, ri = (p0i + A * (cx[j] * pci + sx[j] * psi)) / N;\n    const c = C[j], s = S[j];\n    d[j] = -((s * ca + c * sa) * rr - (c * ca - s * sa) * ri);\n    if (frame) {\n      const r2 = rr * rr + ri * ri;\n      wx += r2 * cx[j];\n      wy += r2 * sx[j];\n    }\n  }\n  if (frame) {\n    // The field is strongest over the part in step. Its centre xc, and the\n    // field's phase there, give the frame that turns with that part.\n    const xc = atan2(wy, wx), cc = cos(xc), sc = sin(xc);\n    P.xc = xc;\n    P.phi = atan2(p0i + A * (cc * pci + sc * psi), p0r + A * (cc * pcr + sc * psr));\n    P.z = sqrt(p0r * p0r + p0i * p0i) / N;\n  }\n}\n\n// One RK4 step of 0.1. The right side is never more than 1 + A in size, so\n// the step is far inside RK4's reach at every Lag. Before it the whole ring\n// is turned back by the phase of the part in step, which the equation does\n// not see (every oscillator is the same, so ω is free): that part's phases\n// stand still and only the scattered ones move.\nfunction step(P) {\n  const { th, k1, k2, k3, k4, tmp } = P, h = STEP;\n  // Each draw grows at 84 degrees for 100 time units, and only then does\n  // the lag move to the knob, a tenth of a degree per time unit. From the\n  // Abrams-Strogatz start right at 80 degrees, 6 draws in 30 fell into step\n  // everywhere within 65 time units; grown at 84 and brought down to 80 (or\n  // up to 88) after, none of 30 did in 1000. A sudden jump from 88 to 80 on\n  // a grown chimera ended 1 of 20, hence the slow turn.\n  P.age += h;\n  const want = P.age \u003c 100 ? 84 : P.lagKnob;\n  P.lag += cl(want - P.lag, -0.01, 0.01);\n  P.ca = cos((P.lag * PI) / 180);\n  P.sa = sin((P.lag * PI) / 180);\n  deriv(P, th, k1, true);\n  const phi = P.phi;\n  for (let j = 0; j \u003c N; j++) th[j] -= phi;\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k1[j];\n  deriv(P, tmp, k2, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k2[j];\n  deriv(P, tmp, k3, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + h * k3[j];\n  deriv(P, tmp, k4, false);\n  for (let j = 0; j \u003c N; j++) th[j] = wrap(th[j] + (h / 6) * (k1[j] + 2 * k2[j] + 2 * k3[j] + k4[j]), TAU);\n  // With 256 oscillators the chimera wanders round the ring, a few columns\n  // in a thousand time units. The history keeps the ring's own columns, so\n  // the wandering shows as a lean in the band; the panel as a whole slides\n  // a column after it once the part in step is three columns off the middle.\n  P.xs = wrap(P.xs + 0.002 * wrap(((P.xc + PI) / TAU) * W - P.xs, W), W);\n  if (abs(wrap(P.xs - P.col, W)) > 3) P.col = ((round(P.xs) % W) + W) % W;\n  // A draw can still fall into step everywhere, the other state this ring\n  // can rest in. After 30 time units of that, a new draw.\n  P.dead = P.z > 0.99 ? P.dead + h : 0;\n  if (P.dead > 30) seed(P, (TAU * P.col) / W, false);\n}\n\nconst osc = (P, c, k) => ((((P.col - W / 2 + c) * PER + k) % N) + N) % N;\n\n// A row of the history keeps one oscillator of every four, in the ring's\n// own columns.\nfunction record(P) {\n  P.head = (P.head + ROWS - 1) % ROWS;\n  const o = P.head * W;\n  for (let c = 0; c \u003c W; c++) P.hist[o + c] = P.th[c * PER + 1];\n}\n\nexport function setup(params) {\n  const cx = new Float64Array(N), sx = new Float64Array(N);\n  for (let j = 0; j \u003c N; j++) (cx[j] = cos(-PI + (TAU * j) / N)), (sx[j] = sin(-PI + (TAU * j) / N));\n  const f = () => new Float64Array(N);\n  params.s = {\n    cx, sx, th: f(), k1: f(), k2: f(), k3: f(), k4: f(), tmp: f(), c: f(), s: f(),\n    ca: 0, sa: 1, lag: 84, lagKnob: 80, age: 0, xc: PI, phi: 0, z: 0, xs: 0, col: 0, dead: 0,\n    hist: new Float32Array(ROWS * W), head: 0, clock: 0, since: 0, fresh: true,\n    hue: 0, speed: 2, stride: 1, pal: new Float32Array(256 * 3), dot: new Float32Array(256 * 3), palHue: NaN,\n    acc: new Float32Array(W * TOP * 3),\n  };\n  seed(params.s, 0, true);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 80, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.lagKnob = cl(k[2], 80, 88);\n  P.stride = cl(k[3], 0.8, 4);\n  if (P.fresh) {\n    // 150 time units to grow and reach the knob's lag; a draw that still\n    // falls into step is drawn again. Then the whole history is run once so\n    // the panel opens full: 5,780 steps at Stride 4, about 0.3 s once.\n    for (let tries = 0; tries \u003c 8; tries++) {\n      if (tries) seed(P, 0, true);\n      for (let i = 0; i \u003c 1500; i++) step(P);\n      if (P.z \u003c 0.9) break;\n    }\n    for (let r = 0; r \u003c ROWS; r++) {\n      for (let t = 0; t \u003c P.stride - 1e-9; t += STEP) step(P);\n      record(P);\n    }\n    P.fresh = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) seed(P, (TAU * P.col) / W, false);\n  P.clock += d * RATE * P.speed;\n  let n = 0;\n  for (; P.clock >= STEP && n \u003c MAXSTEPS; n++) {\n    step(P);\n    P.clock -= STEP;\n    P.since += STEP;\n    if (P.since >= P.stride - 1e-9) {\n      record(P);\n      P.since -= P.stride;\n    }\n  }\n  if (n === MAXSTEPS) P.clock = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pal, dot, hist, th, acc } = P;\n  if (P.palHue !== P.hue) {\n    // Phase round the colour wheel. In the history the brightness also\n    // follows the phase, full at the phase of the part in step and dark\n    // half a turn away, so each slip of a scattered oscillator is a dark\n    // stroke through its column.\n    for (let i = 0; i \u003c 256; i++) {\n      const t = (i / 256) * TAU;\n      hsv(P.hue + HUE0 + i / 256, 0.85, 0.5 + 0.5 * cos(t), pal, i * 3);\n      hsv(P.hue + HUE0 + i / 256, 0.75, 1, dot, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The present, in the top 20 rows: every oscillator a dot, its phase up\n  // and down against its place on the ring.\n  acc.fill(0);\n  for (let c = 0; c \u003c W; c++)\n    for (let k = 0; k \u003c PER; k++) {\n      const t = th[osc(P, c, k)], y = TOP / 2 - 0.5 + (t / PI) * (TOP / 2 - 0.5), y0 = floor(y), f = y - y0;\n      const q = (floor((t / TAU + 1) * 256) & 255) * 3;\n      if (y0 >= 0) {\n        const o = (y0 * W + c) * 3, a = 0.7 * (1 - f);\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n      if (y0 + 1 \u003c TOP) {\n        const o = ((y0 + 1) * W + c) * 3, a = 0.7 * f;\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n    }\n  for (let y = 0, o = 0; y \u003c TOP; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, acc[o] * 255), min(255, acc[o + 1] * 255), min(255, acc[o + 2] * 255));\n  for (let x = 0; x \u003c W; x++) display.setPixel(x, TOP, 0, 0, 0);\n  // The past: one row per moment, the newest at the top.\n  for (let r = 0; r \u003c ROWS; r++) {\n    const o = ((P.head + r) % ROWS) * W, c0 = P.col + W / 2;\n    for (let x = 0; x \u003c W; x++) {\n      const q = (floor((hist[o + ((c0 + x) % W)] / TAU + 1) * 256) & 255) * 3;\n      display.setPixel(x, Y0 + r, pal[q] * 255, pal[q + 1] * 255, pal[q + 2] * 255);\n    }\n  }\n}\n","layer":{"id":"layer-chimera-state","type":"code","name":"chimera-state","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chimera State\n// Family:  rhythm\n// Idea:    256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Chimera states (Yoshiki Kuramoto and Dorjsuren Battogtokh, 2002)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4\n//\n// Knob 1: Hue. Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green.\n// Knob 2: Speed. Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second.\n// Knob 3: Lag. The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls.\n// Knob 4: Stride. Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle.\n// Buttons: K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.\n\n// The ring form is Daniel Abrams and Steven Strogatz's (2004): N identical\n// phase oscillators at x_j = -pi + 2 pi j / N, each pulled by all the others\n// through the kernel G(x) = (1 + A cos x) / 2 pi and a phase lag alpha,\n//   dθ_j/dt = ω - (2 pi / N) Σ_k G(x_j - x_k) sin(θ_j - θ_k + α),\n// their A = 0.995 and their start θ_j = 6 r_j exp(-0.76 x_j²), r_j uniform\n// in [-1/2, 1/2]. Every oscillator obeys the same law, yet the ring splits\n// into a stretch that moves in step and a stretch whose phases scatter.\nconst W = 64, H = 128, N = 256, PER = N / W, TOP = 20, Y0 = TOP + 1, ROWS = H - Y0;\nconst A = 0.995, STEP = 0.1, MAXSTEPS = 30, RATE = 4, HUE0 = 0.55;\nconst { min, floor, round, sqrt, sin, cos, exp, atan2, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (v, m) => v - m * round(v / m);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A new random draw of the Abrams-Strogatz start, its scattered hump at x0.\n// The part in step forms on the calm side, opposite x0; on the first draw\n// the columns are set to put it in the middle of the panel.\nfunction seed(P, x0, place) {\n  for (let j = 0; j \u003c N; j++) {\n    const d = wrap(-PI + (TAU * j) / N - x0, TAU);\n    P.th[j] = 6 * (Math.random() - 0.5) * exp(-0.76 * d * d);\n  }\n  if (place) {\n    P.xs = ((x0 + 2 * PI) / TAU) * W;\n    P.xs -= W * floor(P.xs / W);\n    P.col = round(P.xs) % W;\n  }\n  P.dead = 0;\n  P.age = 0;\n  P.lag = 84;\n}\n\n// The sum over k is the local field R_j e^{iΘ_j} = (1/N) Σ_k (1 + A cos(x_j\n// - x_k)) e^{iθ_k}, and with cos(x_j - x_k) = cos x_j cos x_k + sin x_j sin\n// x_k it is three sums over the ring, Σ e^{iθ}, Σ cos x e^{iθ} and\n// Σ sin x e^{iθ}, read off at each x_j: O(N) a step instead of O(N²). Then\n// dθ_j/dt = ω - R_j sin(θ_j - Θ_j + α).\nfunction deriv(P, t, d, frame) {\n  const { cx, sx, c: C, s: S } = P;\n  let p0r = 0, p0i = 0, pcr = 0, pci = 0, psr = 0, psi = 0;\n  for (let k = 0; k \u003c N; k++) {\n    const c = cos(t[k]), s = sin(t[k]);\n    C[k] = c;\n    S[k] = s;\n    p0r += c;\n    p0i += s;\n    pcr += cx[k] * c;\n    pci += cx[k] * s;\n    psr += sx[k] * c;\n    psi += sx[k] * s;\n  }\n  const ca = P.ca, sa = P.sa;\n  let wx = 0, wy = 0;\n  for (let j = 0; j \u003c N; j++) {\n    const rr = (p0r + A * (cx[j] * pcr + sx[j] * psr)) / N, ri = (p0i + A * (cx[j] * pci + sx[j] * psi)) / N;\n    const c = C[j], s = S[j];\n    d[j] = -((s * ca + c * sa) * rr - (c * ca - s * sa) * ri);\n    if (frame) {\n      const r2 = rr * rr + ri * ri;\n      wx += r2 * cx[j];\n      wy += r2 * sx[j];\n    }\n  }\n  if (frame) {\n    // The field is strongest over the part in step. Its centre xc, and the\n    // field's phase there, give the frame that turns with that part.\n    const xc = atan2(wy, wx), cc = cos(xc), sc = sin(xc);\n    P.xc = xc;\n    P.phi = atan2(p0i + A * (cc * pci + sc * psi), p0r + A * (cc * pcr + sc * psr));\n    P.z = sqrt(p0r * p0r + p0i * p0i) / N;\n  }\n}\n\n// One RK4 step of 0.1. The right side is never more than 1 + A in size, so\n// the step is far inside RK4's reach at every Lag. Before it the whole ring\n// is turned back by the phase of the part in step, which the equation does\n// not see (every oscillator is the same, so ω is free): that part's phases\n// stand still and only the scattered ones move.\nfunction step(P) {\n  const { th, k1, k2, k3, k4, tmp } = P, h = STEP;\n  // Each draw grows at 84 degrees for 100 time units, and only then does\n  // the lag move to the knob, a tenth of a degree per time unit. From the\n  // Abrams-Strogatz start right at 80 degrees, 6 draws in 30 fell into step\n  // everywhere within 65 time units; grown at 84 and brought down to 80 (or\n  // up to 88) after, none of 30 did in 1000. A sudden jump from 88 to 80 on\n  // a grown chimera ended 1 of 20, hence the slow turn.\n  P.age += h;\n  const want = P.age \u003c 100 ? 84 : P.lagKnob;\n  P.lag += cl(want - P.lag, -0.01, 0.01);\n  P.ca = cos((P.lag * PI) / 180);\n  P.sa = sin((P.lag * PI) / 180);\n  deriv(P, th, k1, true);\n  const phi = P.phi;\n  for (let j = 0; j \u003c N; j++) th[j] -= phi;\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k1[j];\n  deriv(P, tmp, k2, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k2[j];\n  deriv(P, tmp, k3, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + h * k3[j];\n  deriv(P, tmp, k4, false);\n  for (let j = 0; j \u003c N; j++) th[j] = wrap(th[j] + (h / 6) * (k1[j] + 2 * k2[j] + 2 * k3[j] + k4[j]), TAU);\n  // With 256 oscillators the chimera wanders round the ring, a few columns\n  // in a thousand time units. The history keeps the ring's own columns, so\n  // the wandering shows as a lean in the band; the panel as a whole slides\n  // a column after it once the part in step is three columns off the middle.\n  P.xs = wrap(P.xs + 0.002 * wrap(((P.xc + PI) / TAU) * W - P.xs, W), W);\n  if (abs(wrap(P.xs - P.col, W)) > 3) P.col = ((round(P.xs) % W) + W) % W;\n  // A draw can still fall into step everywhere, the other state this ring\n  // can rest in. After 30 time units of that, a new draw.\n  P.dead = P.z > 0.99 ? P.dead + h : 0;\n  if (P.dead > 30) seed(P, (TAU * P.col) / W, false);\n}\n\nconst osc = (P, c, k) => ((((P.col - W / 2 + c) * PER + k) % N) + N) % N;\n\n// A row of the history keeps one oscillator of every four, in the ring's\n// own columns.\nfunction record(P) {\n  P.head = (P.head + ROWS - 1) % ROWS;\n  const o = P.head * W;\n  for (let c = 0; c \u003c W; c++) P.hist[o + c] = P.th[c * PER + 1];\n}\n\nexport function setup(params) {\n  const cx = new Float64Array(N), sx = new Float64Array(N);\n  for (let j = 0; j \u003c N; j++) (cx[j] = cos(-PI + (TAU * j) / N)), (sx[j] = sin(-PI + (TAU * j) / N));\n  const f = () => new Float64Array(N);\n  params.s = {\n    cx, sx, th: f(), k1: f(), k2: f(), k3: f(), k4: f(), tmp: f(), c: f(), s: f(),\n    ca: 0, sa: 1, lag: 84, lagKnob: 80, age: 0, xc: PI, phi: 0, z: 0, xs: 0, col: 0, dead: 0,\n    hist: new Float32Array(ROWS * W), head: 0, clock: 0, since: 0, fresh: true,\n    hue: 0, speed: 2, stride: 1, pal: new Float32Array(256 * 3), dot: new Float32Array(256 * 3), palHue: NaN,\n    acc: new Float32Array(W * TOP * 3),\n  };\n  seed(params.s, 0, true);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 80, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.lagKnob = cl(k[2], 80, 88);\n  P.stride = cl(k[3], 0.8, 4);\n  if (P.fresh) {\n    // 150 time units to grow and reach the knob's lag; a draw that still\n    // falls into step is drawn again. Then the whole history is run once so\n    // the panel opens full: 5,780 steps at Stride 4, about 0.3 s once.\n    for (let tries = 0; tries \u003c 8; tries++) {\n      if (tries) seed(P, 0, true);\n      for (let i = 0; i \u003c 1500; i++) step(P);\n      if (P.z \u003c 0.9) break;\n    }\n    for (let r = 0; r \u003c ROWS; r++) {\n      for (let t = 0; t \u003c P.stride - 1e-9; t += STEP) step(P);\n      record(P);\n    }\n    P.fresh = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) seed(P, (TAU * P.col) / W, false);\n  P.clock += d * RATE * P.speed;\n  let n = 0;\n  for (; P.clock >= STEP && n \u003c MAXSTEPS; n++) {\n    step(P);\n    P.clock -= STEP;\n    P.since += STEP;\n    if (P.since >= P.stride - 1e-9) {\n      record(P);\n      P.since -= P.stride;\n    }\n  }\n  if (n === MAXSTEPS) P.clock = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pal, dot, hist, th, acc } = P;\n  if (P.palHue !== P.hue) {\n    // Phase round the colour wheel. In the history the brightness also\n    // follows the phase, full at the phase of the part in step and dark\n    // half a turn away, so each slip of a scattered oscillator is a dark\n    // stroke through its column.\n    for (let i = 0; i \u003c 256; i++) {\n      const t = (i / 256) * TAU;\n      hsv(P.hue + HUE0 + i / 256, 0.85, 0.5 + 0.5 * cos(t), pal, i * 3);\n      hsv(P.hue + HUE0 + i / 256, 0.75, 1, dot, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The present, in the top 20 rows: every oscillator a dot, its phase up\n  // and down against its place on the ring.\n  acc.fill(0);\n  for (let c = 0; c \u003c W; c++)\n    for (let k = 0; k \u003c PER; k++) {\n      const t = th[osc(P, c, k)], y = TOP / 2 - 0.5 + (t / PI) * (TOP / 2 - 0.5), y0 = floor(y), f = y - y0;\n      const q = (floor((t / TAU + 1) * 256) & 255) * 3;\n      if (y0 >= 0) {\n        const o = (y0 * W + c) * 3, a = 0.7 * (1 - f);\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n      if (y0 + 1 \u003c TOP) {\n        const o = ((y0 + 1) * W + c) * 3, a = 0.7 * f;\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n    }\n  for (let y = 0, o = 0; y \u003c TOP; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, acc[o] * 255), min(255, acc[o + 1] * 255), min(255, acc[o + 2] * 255));\n  for (let x = 0; x \u003c W; x++) display.setPixel(x, TOP, 0, 0, 0);\n  // The past: one row per moment, the newest at the top.\n  for (let r = 0; r \u003c ROWS; r++) {\n    const o = ((P.head + r) % ROWS) * W, c0 = P.col + W / 2;\n    for (let x = 0; x \u003c W; x++) {\n      const q = (floor((hist[o + ((c0 + x) % W)] / TAU + 1) * 256) & 255) * 3;\n      display.setPixel(x, Y0 + r, pal[q] * 255, pal[q + 1] * 255, pal[q + 2] * 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green."},{"name":"Speed","min":0.2,"max":3,"about":"Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second."},{"name":"Lag","min":80,"max":88,"about":"The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls."},{"name":"Stride","min":0.8,"max":4,"about":"Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle."}],"start":[0,2,80,0.8],"measures":{"motion":0.871,"detail":0.1412,"edges":0.5685,"complexity":1.5664,"coverage":0.8292,"colour":0.6214,"drift":0.032},"knobResponse":[0.5105,0.2386,0.2458,0.1784]},{"slug":"chladni","title":"Chladni","family":"wave","round":16,"note":"세운 놋쇠 판에 뿌린 모래가 떨리는 자리에서 튀어 나가 가만히 있는 마디선에 모여 클라드니 도형을 그려요. 5초마다 활을 다시 그으면 모래가 흩어졌다가 새 모드의 도형을 찾아가고, K4 를 올리면 석송 가루가 배 자리마다 둥근 노란 더미로 모여요.","idea":"Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.","buttons":"K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.","code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","layer":{"id":"layer-chladni","type":"code","name":"chladni","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plate","min":0,"max":1,"about":"What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel."},{"name":"Drive","min":0.8,"max":3,"about":"How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard."},{"name":"Pitch","min":-1,"max":1,"about":"Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells."},{"name":"Powder","min":0,"max":1,"about":"How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found."}],"start":[0,2,0,0.06],"measures":{"motion":0.4769,"detail":0.0916,"edges":0.6144,"complexity":1.6152,"coverage":0.9904,"colour":0.0973,"drift":0.0566},"knobResponse":[0.0837,0.1502,0.16,0.131]},{"slug":"chromatography","title":"Chromatography","family":"chemistry","round":20,"note":"실험대 위 유리 수조에 거름종이 띠가 매달려 발끝을 용매에 담그고, 젖은 앞선이 올라가는 동안 연필 출발선의 잉크 점이 색 띠로 갈라져 저마다 다른 빠르기로 올라가요. K1 을 누르면 띠를 들어 올리고 새 띠를 걸어요.","idea":"Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.","buttons":"K1 tap lifts the strips out of the tank now and hangs fresh ones.","code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","layer":{"id":"layer-chromatography","type":"code","name":"chromatography","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps."},{"name":"Strips","min":3,"max":6,"about":"How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6."},{"name":"Solvent","min":-1,"max":1,"about":"How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker."}],"start":[0,2,3,0.06],"measures":{"motion":0.0352,"detail":0.0646,"edges":0.3051,"complexity":1.2207,"coverage":0.7347,"colour":0.2232,"drift":0.0399},"knobResponse":[0.0454,0.0548,0.2236,0.048]},{"slug":"chrome-powder","title":"Chrome Powder","family":"cosmetic","round":32,"note":"판 전체가 크롬 파우더를 얹은 젤 한 면이에요. 보이지 않는 어플리케이터가 작은 원을 그리며 위에서 아래로 문지르면 무광 회색 가루가 로즈골드 거울로 바뀌고, 거울에는 소프트박스의 흰 띠와 검은 반사판 띠가 물결지며 비쳐요. 다 덮이면 빛이 비스듬히 한 번 쓸고, 새 가루가 위에서부터 다시 덮여요.","idea":"The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.","buttons":"K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.","code":"// ===== Patternflow pattern =====\n// Title:   Chrome Powder\n// Family:  cosmetic\n// Idea:    The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after chrome powder buffed onto a gel top coat and the softbox reflections of product photography\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1\n//\n// Knob 1: Hue. The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac.\n// Knob 2: Speed. At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast.\n// Knob 3: Holo. At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own.\n// Knob 4: Grain. The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1.\n// Buttons: K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, exp, abs, min, max, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// Smooth value noise on a coarse grid of random numbers, sampled per LED.\nfunction field(cell, amp) {\n  const gw = floor(W / cell) + 3, gh = floor(H / cell) + 3, g = new Float32Array(gw * gh);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      tx = tx * tx * (3 - 2 * tx);\n      ty = ty * ty * (3 - 2 * ty);\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = amp * (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty);\n    }\n  return out;\n}\n\n// The coat's surface: bowed across the panel and a little down it, with a\n// low waviness of the gel, so the horizon is one wavy line across. Stored as the reflected direction a level eye\n// sees in it, rx across and ry down, and a soft light term for the powder.\nfunction surface(P) {\n  const w1 = field(22, 1), w2 = field(9, 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const u = (x - 31.5) / 32, v = (y - 63.5) / 64;\n      let sx = 0.44 * u + 0.03 * sin(y * 0.07);\n      let sy = 0.2 * v + 0.008 * sin(x * 0.24 + y * 0.05);\n      const xr = min(x + 1, W - 1), yr = min(y + 1, H - 1);\n      sx += 0.09 * (w1[y * W + xr] - w1[i]) * 22 / 4 + 0.05 * (w2[y * W + xr] - w2[i]) * 9 / 4;\n      // Down the panel the waviness is kept small so the horizon stays one line.\n      sy += 0.015 * (w1[yr * W + x] - w1[i]) * 22 / 4 + 0.01 * (w2[yr * W + x] - w2[i]) * 9 / 4;\n      P.rx[i] = 2 * sx;\n      P.ry[i] = 2 * sy;\n      P.lam[i] = cl(0.78 - 0.5 * sx + 0.35 * sy, 0.35, 1);\n    }\n}\n\nconst edge = (t) => cl(t / 0.025 + 0.5, 0, 1);\nconst box = (u, a, b, v, c, d) => edge(u - a) * edge(b - u) * edge(v - c) * edge(d - v);\n\n// The studio the mirror sees, the way chrome is shot: a pale sweep of wall,\n// lighter towards the horizon, with a tall softbox, black flags beside it\n// and two strip lights, all sharp at their edges; below the horizon a dark\n// floor with faint copies of the lights. u wraps every 2.4 as the lights\n// slide.\nconst HZ = 0.22;\nfunction env(u, v) {\n  u -= 2.4 * floor(u / 2.4 + 0.5);\n  if (v > HZ) return 0.1 + 0.05 * (1 - sm(HZ, 0.7, v)) + 0.14 * box(u, -0.18, 0.12, v, HZ, 1) + 0.1 * box(u, 0.45, 0.5, v, HZ, 1);\n  let I = (0.56 + 0.22 * sm(-0.8, HZ, v)) * (0.88 + 0.12 * cos(u * 2.6));\n  // Black flags: one wide beside the softbox, two narrow further out.\n  I *= 1 - 0.94 * box(u, 0.12, 0.3, v, -2, 2);\n  I *= 1 - 0.94 * box(u, -0.5, -0.42, v, -2, 2);\n  I *= 1 - 0.9 * box(u, 0.7, 0.76, v, -2, 2);\n  I += 0.7 * box(u, -0.18, 0.12, v, -2, HZ - 0.06) * (0.85 + 0.15 * cos((u + 0.03) * 10));\n  I += 0.6 * box(u, 0.45, 0.5, v, -2, HZ - 0.03);\n  I += 0.6 * box(u, -0.66, -0.62, v, -2, HZ - 0.03);\n  I += 0.55 * box(u, 0.92, 1.12, v, -0.75, HZ - 0.08);\n  I += 0.4 * box(u, -2, 2, v, -0.62, -0.55);\n  return I;\n}\n\nexport function setup(params) {\n  const P = {\n    T: 0, phase: 0, pt: 0, hue: NaN, holo: 0, grain: 0.06, speed: 2, drift: 0,\n    rx: new Float32Array(N), ry: new Float32Array(N), lam: new Float32Array(N),\n    B: new Float32Array(N), g1: new Float32Array(N), g2: null, g3: null, clump: null, soft: null, ih: new Float32Array(N), spk: new Float32Array(N), res: new Float32Array(N),\n    ax: 32, ay: -8, tint: new Float32Array(3), dust: new Float32Array(3), sweep: -1, recoat: -1,\n  };\n  surface(P);\n  for (let i = 0; i \u003c N; i++) (P.g1[i] = random() * 2 - 1), (P.spk[i] = random()), (P.res[i] = random());\n  P.g2 = field(2, 1.3);\n  P.g3 = field(3.5, 1.5);\n  P.clump = field(2.5, 1);\n  P.soft = field(16, 1);\n  for (let i = 0; i \u003c N; i++) P.ih[i] = random() * 2 - 1;\n  params.s = P;\n}\n\n// The applicator: a sponge tip 10 LEDs in radius that rubs circles 5 LEDs\n// in radius, a little under four to a crossing so they never line up, while\n// it crosses the panel and back and works down it, 12 LEDs a crossing. A\n// crossing buffs an LED about two thirds of the way; the next one finishes\n// it.\nconst COAT = 17, SWEEP = 6, RECOAT = 3, R = 10, CROSS = 1.4;\nfunction rub(P, dT) {\n  const steps = 6;\n  for (let s = 0; s \u003c steps; s++) {\n    P.pt += dT / steps;\n    const t = P.pt, ph = t / CROSS, tri = 1 - abs(1 - 2 * (ph / 2 - floor(ph / 2))) * 2;\n    const a = t * 2 * PI * 2.37;\n    const cx = 32 - 38 * tri + 5 * cos(a), cy = -12 + (172 * t) / COAT + 5 * sin(a);\n    P.ax = cx;\n    P.ay = cy;\n    const x0 = max(0, floor(cx - R)), x1 = min(W - 1, floor(cx + R) + 1), y0 = max(0, floor(cy - R)), y1 = min(H - 1, floor(cy + R) + 1);\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - cx, dy = y - cy, d2 = (dx * dx + dy * dy) / (R * R);\n        if (d2 >= 1) continue;\n        const i = y * W + x;\n        P.B[i] = min(1, P.B[i] + 2.4 * (1 - d2 * d2) * (dT / steps) * (0.7 + 0.6 * P.res[i]));\n      }\n  }\n  // It goes back over what it missed: from 18 rows above the tip up, the\n  // last patches of powder turn too.\n  const yb = min(H, floor(P.ay - 18));\n  for (let y = max(0, yb - 24); y \u003c yb; y++) {\n    const m = sm(yb, yb - 24, y) * dT * 1.5;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) P.B[i] = min(1, P.B[i] + m);\n  }\n  for (let i = 0, e = max(0, yb - 24) * W; i \u003c e; i++) P.B[i] = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  P.holo = cl(k[2], 0, 1);\n  P.grain = cl(k[3], 0, 1);\n  const dT = d * P.speed;\n  P.T += dT;\n  P.drift += dT * 0.035;\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== 2) (P.phase = 2), (P.recoat = 0);\n  if (P.phase === 0) {\n    rub(P, dT);\n    if (P.pt >= COAT) {\n      P.phase = 1;\n      P.sweep = 0;\n      P.B.fill(1);\n    }\n  } else if (P.phase === 1) {\n    P.sweep += dT / SWEEP;\n    if (P.sweep >= 1) (P.phase = 2), (P.recoat = 0), (P.sweep = -1);\n  } else {\n    // The new coat is dusted on from the top down.\n    P.recoat += dT / RECOAT;\n    const fy = -10 + 150 * P.recoat;\n    for (let y = 0; y \u003c H; y++) {\n      if (y > fy + 6) break;\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x, e = fy + 5 * P.res[i] - y;\n        if (e > 0) P.B[i] = min(P.B[i], max(0, 1 - e / 4));\n      }\n    }\n    if (P.recoat >= 1) {\n      P.B.fill(0);\n      P.phase = 0;\n      P.pt = 0;\n      P.recoat = -1;\n    }\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hsv(k[0] + 0.025, 0.4, 1, P.tint, 0);\n    hsv(k[0] + 0.025, 0.16, 1, P.dust, 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { rx, ry, lam, B, g1, g2, g3, spk, tint, dust } = P;\n  const gr = P.grain, holo = P.holo, hue = P.hue, du = P.drift;\n  const gA = 0.05 + 0.21 * gr, gm2 = sm(0.15, 0.6, gr), gm3 = sm(0.55, 1, gr);\n  const sw = P.sweep, c = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, b = B[i];\n      // The matte powder: a pale tint of the metal, lit softly, with grain.\n      let pr = 0, pg = 0, pb = 0;\n      // Each grain turns to mirror at its own point in the buffing, so the\n      // edge of the mirror is speckled, and powder that has been pressed but\n      // not yet turned takes a satin sheen.\n      // Turning Grain up also leaves clumps of powder on the finished mirror.\n      const th = 0.3 + 0.5 * P.res[i], left = gr * sm(0.35, 0.6, P.clump[i]);\n      const mir = sm(th - 0.1, th + 0.1, b) * (1 - 0.75 * left);\n      if (mir \u003c 1) {\n        const g = g1[i] * (1 - gm2) + g2[i] * gm2 * (1 - gm3) + g3[i] * gm3;\n        let v = (0.56 + 0.05 * P.soft[i] + 0.1 * sm(0.03, 0.4, b)) * lam[i] * (1 + gA * g * (1 - 0.6 * sm(0.03, 0.4, b)));\n        if (spk[i] > 0.985 - 0.02 * gr) v += 0.12 * (0.5 + 0.5 * sin(P.T * 3 + spk[i] * 400));\n        (pr = dust[0] * v), (pg = dust[1] * v), (pb = dust[2] * v);\n        if (holo > 0) {\n          // Holographic powder: every grain carries its own colour.\n          hsv(hue + 0.665 + 0.25 * P.ih[i], 0.55, v * 1.15, c, 0);\n          const hm = holo * 0.8;\n          (pr += (c[0] - pr) * hm), (pg += (c[1] - pg) * hm), (pb += (c[2] - pb) * hm);\n        }\n      }\n      let mr = 0, mg = 0, mb = 0;\n      if (mir > 0) {\n        const u = rx[i] + du, v = ry[i];\n        let I = env(u, v);\n        if (sw >= 0) {\n          const p = x * 0.6 + y - (-50 + 230 * sw);\n          I += 0.9 * exp(-(p * p) / 60);\n        }\n        // Silver-bright where the light is strong, the tint in the mids,\n        // nearly black in the floor.\n        let tr = tint[0], tg = tint[1], tb = tint[2];\n        if (holo > 0) {\n          // Aurora chrome: the tint gives way to a colour that turns with\n          // the angle of the surface, over the cool side of the wheel from\n          // the tint, so it runs violet, blue and aqua and never through the\n          // olive a dim yellow-green would be.\n          const s = sin(2.6 * rx[i] + 5 * ry[i] + 0.7 * sin(y * 0.05) + du * 4);\n          hsv(hue + 0.025 + 0.64 + 0.2 * s, 0.5, 1, c, 0);\n          (tr += (c[0] - tr) * holo), (tg += (c[1] - tg) * holo), (tb += (c[2] - tb) * holo);\n        }\n        const hi = sm(0.85, 1.3, I), L = min(1.2, I);\n        mr = L * (tr + (1 - tr) * hi);\n        mg = L * (tg + (1 - tg) * hi);\n        mb = L * (tb + (1 - tb) * hi);\n      }\n      const r = pr * (1 - mir) + mr * mir, g = pg * (1 - mir) + mg * mir, bl = pb * (1 - mir) + mb * mir;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","layer":{"id":"layer-chrome-powder","type":"code","name":"chrome-powder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chrome Powder\n// Family:  cosmetic\n// Idea:    The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after chrome powder buffed onto a gel top coat and the softbox reflections of product photography\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1\n//\n// Knob 1: Hue. The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac.\n// Knob 2: Speed. At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast.\n// Knob 3: Holo. At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own.\n// Knob 4: Grain. The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1.\n// Buttons: K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, exp, abs, min, max, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// Smooth value noise on a coarse grid of random numbers, sampled per LED.\nfunction field(cell, amp) {\n  const gw = floor(W / cell) + 3, gh = floor(H / cell) + 3, g = new Float32Array(gw * gh);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      tx = tx * tx * (3 - 2 * tx);\n      ty = ty * ty * (3 - 2 * ty);\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = amp * (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty);\n    }\n  return out;\n}\n\n// The coat's surface: bowed across the panel and a little down it, with a\n// low waviness of the gel, so the horizon is one wavy line across. Stored as the reflected direction a level eye\n// sees in it, rx across and ry down, and a soft light term for the powder.\nfunction surface(P) {\n  const w1 = field(22, 1), w2 = field(9, 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const u = (x - 31.5) / 32, v = (y - 63.5) / 64;\n      let sx = 0.44 * u + 0.03 * sin(y * 0.07);\n      let sy = 0.2 * v + 0.008 * sin(x * 0.24 + y * 0.05);\n      const xr = min(x + 1, W - 1), yr = min(y + 1, H - 1);\n      sx += 0.09 * (w1[y * W + xr] - w1[i]) * 22 / 4 + 0.05 * (w2[y * W + xr] - w2[i]) * 9 / 4;\n      // Down the panel the waviness is kept small so the horizon stays one line.\n      sy += 0.015 * (w1[yr * W + x] - w1[i]) * 22 / 4 + 0.01 * (w2[yr * W + x] - w2[i]) * 9 / 4;\n      P.rx[i] = 2 * sx;\n      P.ry[i] = 2 * sy;\n      P.lam[i] = cl(0.78 - 0.5 * sx + 0.35 * sy, 0.35, 1);\n    }\n}\n\nconst edge = (t) => cl(t / 0.025 + 0.5, 0, 1);\nconst box = (u, a, b, v, c, d) => edge(u - a) * edge(b - u) * edge(v - c) * edge(d - v);\n\n// The studio the mirror sees, the way chrome is shot: a pale sweep of wall,\n// lighter towards the horizon, with a tall softbox, black flags beside it\n// and two strip lights, all sharp at their edges; below the horizon a dark\n// floor with faint copies of the lights. u wraps every 2.4 as the lights\n// slide.\nconst HZ = 0.22;\nfunction env(u, v) {\n  u -= 2.4 * floor(u / 2.4 + 0.5);\n  if (v > HZ) return 0.1 + 0.05 * (1 - sm(HZ, 0.7, v)) + 0.14 * box(u, -0.18, 0.12, v, HZ, 1) + 0.1 * box(u, 0.45, 0.5, v, HZ, 1);\n  let I = (0.56 + 0.22 * sm(-0.8, HZ, v)) * (0.88 + 0.12 * cos(u * 2.6));\n  // Black flags: one wide beside the softbox, two narrow further out.\n  I *= 1 - 0.94 * box(u, 0.12, 0.3, v, -2, 2);\n  I *= 1 - 0.94 * box(u, -0.5, -0.42, v, -2, 2);\n  I *= 1 - 0.9 * box(u, 0.7, 0.76, v, -2, 2);\n  I += 0.7 * box(u, -0.18, 0.12, v, -2, HZ - 0.06) * (0.85 + 0.15 * cos((u + 0.03) * 10));\n  I += 0.6 * box(u, 0.45, 0.5, v, -2, HZ - 0.03);\n  I += 0.6 * box(u, -0.66, -0.62, v, -2, HZ - 0.03);\n  I += 0.55 * box(u, 0.92, 1.12, v, -0.75, HZ - 0.08);\n  I += 0.4 * box(u, -2, 2, v, -0.62, -0.55);\n  return I;\n}\n\nexport function setup(params) {\n  const P = {\n    T: 0, phase: 0, pt: 0, hue: NaN, holo: 0, grain: 0.06, speed: 2, drift: 0,\n    rx: new Float32Array(N), ry: new Float32Array(N), lam: new Float32Array(N),\n    B: new Float32Array(N), g1: new Float32Array(N), g2: null, g3: null, clump: null, soft: null, ih: new Float32Array(N), spk: new Float32Array(N), res: new Float32Array(N),\n    ax: 32, ay: -8, tint: new Float32Array(3), dust: new Float32Array(3), sweep: -1, recoat: -1,\n  };\n  surface(P);\n  for (let i = 0; i \u003c N; i++) (P.g1[i] = random() * 2 - 1), (P.spk[i] = random()), (P.res[i] = random());\n  P.g2 = field(2, 1.3);\n  P.g3 = field(3.5, 1.5);\n  P.clump = field(2.5, 1);\n  P.soft = field(16, 1);\n  for (let i = 0; i \u003c N; i++) P.ih[i] = random() * 2 - 1;\n  params.s = P;\n}\n\n// The applicator: a sponge tip 10 LEDs in radius that rubs circles 5 LEDs\n// in radius, a little under four to a crossing so they never line up, while\n// it crosses the panel and back and works down it, 12 LEDs a crossing. A\n// crossing buffs an LED about two thirds of the way; the next one finishes\n// it.\nconst COAT = 17, SWEEP = 6, RECOAT = 3, R = 10, CROSS = 1.4;\nfunction rub(P, dT) {\n  const steps = 6;\n  for (let s = 0; s \u003c steps; s++) {\n    P.pt += dT / steps;\n    const t = P.pt, ph = t / CROSS, tri = 1 - abs(1 - 2 * (ph / 2 - floor(ph / 2))) * 2;\n    const a = t * 2 * PI * 2.37;\n    const cx = 32 - 38 * tri + 5 * cos(a), cy = -12 + (172 * t) / COAT + 5 * sin(a);\n    P.ax = cx;\n    P.ay = cy;\n    const x0 = max(0, floor(cx - R)), x1 = min(W - 1, floor(cx + R) + 1), y0 = max(0, floor(cy - R)), y1 = min(H - 1, floor(cy + R) + 1);\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - cx, dy = y - cy, d2 = (dx * dx + dy * dy) / (R * R);\n        if (d2 >= 1) continue;\n        const i = y * W + x;\n        P.B[i] = min(1, P.B[i] + 2.4 * (1 - d2 * d2) * (dT / steps) * (0.7 + 0.6 * P.res[i]));\n      }\n  }\n  // It goes back over what it missed: from 18 rows above the tip up, the\n  // last patches of powder turn too.\n  const yb = min(H, floor(P.ay - 18));\n  for (let y = max(0, yb - 24); y \u003c yb; y++) {\n    const m = sm(yb, yb - 24, y) * dT * 1.5;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) P.B[i] = min(1, P.B[i] + m);\n  }\n  for (let i = 0, e = max(0, yb - 24) * W; i \u003c e; i++) P.B[i] = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  P.holo = cl(k[2], 0, 1);\n  P.grain = cl(k[3], 0, 1);\n  const dT = d * P.speed;\n  P.T += dT;\n  P.drift += dT * 0.035;\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== 2) (P.phase = 2), (P.recoat = 0);\n  if (P.phase === 0) {\n    rub(P, dT);\n    if (P.pt >= COAT) {\n      P.phase = 1;\n      P.sweep = 0;\n      P.B.fill(1);\n    }\n  } else if (P.phase === 1) {\n    P.sweep += dT / SWEEP;\n    if (P.sweep >= 1) (P.phase = 2), (P.recoat = 0), (P.sweep = -1);\n  } else {\n    // The new coat is dusted on from the top down.\n    P.recoat += dT / RECOAT;\n    const fy = -10 + 150 * P.recoat;\n    for (let y = 0; y \u003c H; y++) {\n      if (y > fy + 6) break;\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x, e = fy + 5 * P.res[i] - y;\n        if (e > 0) P.B[i] = min(P.B[i], max(0, 1 - e / 4));\n      }\n    }\n    if (P.recoat >= 1) {\n      P.B.fill(0);\n      P.phase = 0;\n      P.pt = 0;\n      P.recoat = -1;\n    }\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hsv(k[0] + 0.025, 0.4, 1, P.tint, 0);\n    hsv(k[0] + 0.025, 0.16, 1, P.dust, 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { rx, ry, lam, B, g1, g2, g3, spk, tint, dust } = P;\n  const gr = P.grain, holo = P.holo, hue = P.hue, du = P.drift;\n  const gA = 0.05 + 0.21 * gr, gm2 = sm(0.15, 0.6, gr), gm3 = sm(0.55, 1, gr);\n  const sw = P.sweep, c = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, b = B[i];\n      // The matte powder: a pale tint of the metal, lit softly, with grain.\n      let pr = 0, pg = 0, pb = 0;\n      // Each grain turns to mirror at its own point in the buffing, so the\n      // edge of the mirror is speckled, and powder that has been pressed but\n      // not yet turned takes a satin sheen.\n      // Turning Grain up also leaves clumps of powder on the finished mirror.\n      const th = 0.3 + 0.5 * P.res[i], left = gr * sm(0.35, 0.6, P.clump[i]);\n      const mir = sm(th - 0.1, th + 0.1, b) * (1 - 0.75 * left);\n      if (mir \u003c 1) {\n        const g = g1[i] * (1 - gm2) + g2[i] * gm2 * (1 - gm3) + g3[i] * gm3;\n        let v = (0.56 + 0.05 * P.soft[i] + 0.1 * sm(0.03, 0.4, b)) * lam[i] * (1 + gA * g * (1 - 0.6 * sm(0.03, 0.4, b)));\n        if (spk[i] > 0.985 - 0.02 * gr) v += 0.12 * (0.5 + 0.5 * sin(P.T * 3 + spk[i] * 400));\n        (pr = dust[0] * v), (pg = dust[1] * v), (pb = dust[2] * v);\n        if (holo > 0) {\n          // Holographic powder: every grain carries its own colour.\n          hsv(hue + 0.665 + 0.25 * P.ih[i], 0.55, v * 1.15, c, 0);\n          const hm = holo * 0.8;\n          (pr += (c[0] - pr) * hm), (pg += (c[1] - pg) * hm), (pb += (c[2] - pb) * hm);\n        }\n      }\n      let mr = 0, mg = 0, mb = 0;\n      if (mir > 0) {\n        const u = rx[i] + du, v = ry[i];\n        let I = env(u, v);\n        if (sw >= 0) {\n          const p = x * 0.6 + y - (-50 + 230 * sw);\n          I += 0.9 * exp(-(p * p) / 60);\n        }\n        // Silver-bright where the light is strong, the tint in the mids,\n        // nearly black in the floor.\n        let tr = tint[0], tg = tint[1], tb = tint[2];\n        if (holo > 0) {\n          // Aurora chrome: the tint gives way to a colour that turns with\n          // the angle of the surface, over the cool side of the wheel from\n          // the tint, so it runs violet, blue and aqua and never through the\n          // olive a dim yellow-green would be.\n          const s = sin(2.6 * rx[i] + 5 * ry[i] + 0.7 * sin(y * 0.05) + du * 4);\n          hsv(hue + 0.025 + 0.64 + 0.2 * s, 0.5, 1, c, 0);\n          (tr += (c[0] - tr) * holo), (tg += (c[1] - tg) * holo), (tb += (c[2] - tb) * holo);\n        }\n        const hi = sm(0.85, 1.3, I), L = min(1.2, I);\n        mr = L * (tr + (1 - tr) * hi);\n        mg = L * (tg + (1 - tg) * hi);\n        mb = L * (tb + (1 - tb) * hi);\n      }\n      const r = pr * (1 - mir) + mr * mir, g = pg * (1 - mir) + mg * mir, bl = pb * (1 - mir) + mb * mir;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast."},{"name":"Holo","min":0,"max":1,"about":"At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own."},{"name":"Grain","min":0,"max":1,"about":"The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.1725,"detail":0.0415,"edges":0.2939,"complexity":1.5841,"coverage":0.922,"colour":0.1297,"drift":0.2833},"knobResponse":[0.0785,0.1385,0.1031,0.0512]},{"slug":"circuit-board","title":"Circuit Board","family":"circuit","round":17,"note":"회로 기판이 패널을 다 채우고, Lee 의 미로 라우터가 프로세서와 메모리 둘, 플래시, 크리스털, 금도금 단자 사이에 구리 선 47개를 곧게, 또 45도로 깔아요. 버스에는 펄스 열이 나란히 달리고 바쁜 선은 신호 색으로 데워지며, K1 을 누르면 기판이 꺼졌다가 부팅해요.","idea":"A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.","buttons":"K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.","code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","layer":{"id":"layer-circuit-board","type":"code","name":"circuit-board","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mask","min":0,"max":1,"about":"The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1."},{"name":"Clock","min":0.5,"max":4,"about":"How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice."},{"name":"Traffic","min":0,"max":1,"about":"At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back."},{"name":"Glow","min":0,"max":1,"about":"How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three."}],"start":[0,2,0,0.06],"measures":{"motion":0.2002,"detail":0.119,"edges":0.678,"complexity":0.7577,"coverage":0.9814,"colour":0.2535,"drift":0.0471},"knobResponse":[0.2116,0.0618,0.0696,0.0621]},{"slug":"circulation","title":"Circulation","family":"body","round":22,"note":"해부도처럼 머리부터 발끝까지 선 사람이에요. 심장이 뛸 때마다 붉은 피의 맥이 동맥을 타고 머리와 손발 끝까지 번져 가고, 푸른 정맥혈은 심장 쪽으로 거슬러 올라오며 폐가 박동과 숨에 분홍빛으로 물들어요. 발치의 모니터에는 심전도와 맥박 수가 떠요.","idea":"A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.","buttons":"K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","layer":{"id":"layer-circulation","type":"code","name":"circulation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Chart","min":0,"max":1,"about":"The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1."},{"name":"Rate","min":1,"max":5,"about":"The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other."},{"name":"Detail","min":1,"max":4,"about":"How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4."},{"name":"Effort","min":0,"max":1,"about":"From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood."}],"start":[0,2,1,0.06],"measures":{"motion":0.3125,"detail":0.0474,"edges":0.3512,"complexity":1.0533,"coverage":0.3719,"colour":0.2033,"drift":0.0315},"knobResponse":[0.1504,0.046,0.0247,0.0525]},{"slug":"clay-mask","title":"Clay Mask","family":"cosmetic","round":32,"note":"판 전체에 스패출러로 바른 로즈 클레이가 얇은 곳부터 말라 들어가요. 짙은 라즈베리색 윤이 먼저 빠지고 옅은 블러시색 무광이 섬처럼 번지다가, 두꺼운 결만 마지막까지 짙은 줄로 남아요. 8초쯤 다 마르면 물 띠가 위에서 아래로 2초 동안 지나가며 다시 적셔요.","idea":"A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.","buttons":"K1 tap sends the band of water down the panel now, unless one is already on its way.","code":"// ===== Patternflow pattern =====\n// Title:   Clay Mask\n// Family:  cosmetic\n// Idea:    A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the clay face mask that pales as it dries\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet.\n// Knob 2: Speed. At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower.\n// Knob 3: Thickness. At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds.\n// Knob 4: Gloss. Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch.\n// Buttons: K1 tap sends the band of water down the panel now, unless one is already on its way.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, 0..1.\nfunction vn(x, y, s) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  const u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(i, j, s), b = hash(i + 1, j, s), c = hash(i, j + 1, s), d = hash(i + 1, j + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The clay as it was laid on: a base coat and spatula strokes across it,\n// each piling a ridge at its edges and scraping fine lines along its length.\n// Baked once: thickness, its slope, the order the LEDs dry in, the delay of\n// the rewetting sweep and the dry grain.\nfunction lay(P) {\n  const R = Math.random;\n  const h = new Float32Array(N), hb = new Float32Array(N), key = new Float32Array(N);\n  const strokes = [];\n  for (let k = 0; k \u003c 7; k++) {\n    const th = 1.05 + (R() - 0.5) * 0.5;\n    strokes.push({\n      tx: cos(th), ty: sin(th), nx: -sin(th), ny: cos(th),\n      c: -62 + k * 20 + (R() - 0.5) * 8, w: 24 + R() * 10, t: 0.45 + R() * 0.2, tilt: (R() - 0.5) * 0.3,\n      f1: 0.9 + R() * 0.6, f2: 2.1 + R() * 0.9, p1: R() * 6.3, p2: R() * 6.3, e1: R() * 6.3, e2: R() * 6.3, run: 0.0025 + R() * 0.002,\n    });\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5, py = y - 63.5;\n      let v = 0.42 + 0.12 * vn(x / 9, y / 9, 3), sc = 0;\n      for (const s of strokes) {\n        const a = px * s.tx + py * s.ty, n = px * s.nx + py * s.ny;\n        const edge = s.w / 2 + 2.2 * sin(a * 0.08 + s.e1) + 1.2 * sin(a * 0.21 + s.e2);\n        const off = abs(n - s.c);\n        if (off > edge) continue;\n        const u = (n - s.c) / edge, rim = edge - off;\n        v = s.t + s.tilt * u - s.run * a + 0.32 * exp(-(rim * rim) / 3.2);\n        sc = 0.027 * sin(n * s.f1 + s.p1) * (0.6 + 0.4 * sin(a * 0.05 + s.p2)) + 0.014 * sin(n * s.f2 + s.p2);\n      }\n      hb[y * W + x] = v;\n      h[y * W + x] = v + sc + 0.05 * (vn(x / 4, y / 4, 5) - 0.5);\n    }\n  // The order of drying follows the thickness blurred over a few LEDs, so the\n  // front creeps round the ridges instead of fraying along every scrape.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sum = 0, n = 0;\n      for (let j = -2; j \u003c= 2; j++)\n        for (let i = -2; i \u003c= 2; i++) {\n          const xx = x + i, yy = y + j;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          sum += hb[yy * W + xx];\n          n++;\n        }\n      key[y * W + x] = 0.5 * sum / n + 0.5 * hb[y * W + x] + 0.16 * (vn(x / 7, y / 7, 9) - 0.5) + 0.06 * (vn(x / 2.5, y / 2.5, 10) - 0.5);\n    }\n  const gx = new Float32Array(N), gy = new Float32Array(N), rank = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (h[y * W + min(W - 1, x + 1)] - h[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (h[min(H - 1, y + 1) * W + x] - h[max(0, y - 1) * W + x]) / 2;\n    }\n  // Thin clay dries first: the LEDs in order of thickness, as a rank 0..1.\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => key[a] - key[b]);\n  order.forEach((i, r) => (rank[i] = r / (N - 1)));\n  const delay = new Float32Array(N), grain = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      delay[i] = (y + 4 + 3 * sin(x * 0.13 + 1.1) + 3 * vn(x / 5, y / 5, 11)) / (H + 10);\n      grain[i] = 0.6 * (R() - 0.5) + 0.4 * (vn(x / 1.7, y / 1.7, 13) - 0.5);\n    }\n  // Three hairline cracks, each a short wandering line from a thick spot,\n  // numbered 0..1 along its length so it opens from one end.\n  const crack = new Float32Array(N);\n  for (let n = 0; n \u003c 3; n++) {\n    let best = 0, bi = 0;\n    for (let t = 0; t \u003c 60; t++) {\n      const i = floor(R() * N);\n      if (h[i] > best && !crack[i]) (best = h[i]), (bi = i);\n    }\n    let x = bi % W, y = floor(bi / W), a = R() * 2 * PI;\n    const len = 14 + floor(R() * 12);\n    for (let s = 0; s \u003c len; s++) {\n      const i = floor(y) * W + floor(x);\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) break;\n      crack[i] = max(crack[i], 0.02 + s / len);\n      a += (R() - 0.5) * 0.9;\n      x += cos(a) * 0.9;\n      y += sin(a) * 0.9;\n    }\n  }\n  Object.assign(P, { h, gx, gy, rank, delay, grain, crack });\n}\n\nexport function setup(params) {\n  params.s = {\n    c: 0, hue: 0, speed: 2, thick: 0, gloss: 0.06, ts: -0.5, tk: 0, ps: -0.5, pk: 0,\n  };\n  lay(params.s);\n}\n\n// Drying times in clock seconds (one a second at Speed 2): an LED of rank r\n// starts to dry at age A0 + r * span and is dry after band more.\nconst A0 = 1.0, SWEEP = 2.2, HOLD = 1.2;\nconst spanOf = (t) => 6 + (t \u003c 0 ? 3.5 * t : 5 * t);\nconst bandOf = (t) => 1.6 + (t \u003c 0 ? -1.2 * t : -0.6 * t);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], -1, 1);\n  P.gloss = cl(k[3], -1, 1);\n  P.c += d * P.speed * 0.5;\n  const span = spanOf(P.thick), band = bandOf(P.thick);\n  const sweeping = P.c \u003c P.ts + P.tk * SWEEP;\n  const allDry = P.c - (P.ts + P.tk * SWEEP) > A0 + span + band + HOLD;\n  if (!sweeping && (allDry || (input.btnPressed && input.btnPressed[0]))) {\n    (P.ps = P.ts), (P.pk = P.tk), (P.ts = P.c), (P.tk = 1);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { h, gx, gy, rank, delay, grain, crack } = P;\n  const span = spanOf(P.thick), band = bandOf(P.thick), c = P.c;\n  const relief = 2.4 + 1.6 * P.thick, g = P.gloss;\n  // A lamp above the panel drifts slowly, and the wet clay mirrors it as a\n  // soft spot that the ridges and scrapes break into streaks.\n  const la = 0.3 * c;\n  const Lx = 32 + 46 * sin(la), Ly = 60 + 70 * sin(0.63 * la + 1.2), Lz = 150;\n  const Ex = 32, Ey = 70, Ez = 260;\n  const shin = 14 + 30 * (g + 1), specK = 0.25 + 0.5 * (g + 1) / 2;\n  const hue = P.hue + 0.935;\n  const wet = [0, 0, 0], dry = [0, 0, 0], deep = [0, 0, 0];\n  hsv(hue, 0.64 + 0.08 * g, 0.56 - 0.05 * g, wet, 0);\n  hsv(hue + 0.01, 0.12, 0.92, dry, 0);\n  hsv(hue + 0.005, 0.3, 0.84, deep, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const tNew = P.ts + P.tk * SWEEP * delay[i];\n      const fresh = c >= tNew;\n      const tw = fresh ? tNew : P.ps + P.pk * SWEEP * delay[i];\n      const age = c - tw;\n      const D = cl((age - A0 - rank[i] * span) / band, 0, 1);\n      const nx = -gx[i] * relief, ny = -gy[i] * relief, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n      let lx = Lx - x, ly = Ly - y, lz = Lz;\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const dif = (nx * lx + ny * ly + lz) * nl;\n      const nh = max(0, (nx * hx + ny * hy + hz) * hi * nl);\n      // Wet: deep colour shaded by the relief, with the sheen. The sheen\n      // goes first as the surface turns matte, then the colour lifts.\n      const shiny = 1 - sm(0, 0.3, D), lift = sm(0.12, 1, D);\n      // Behind the rewetting band the clay carries a film of water, with a\n      // bright line where the band's edge is.\n      const water = fresh && P.tk ? sm(1.1, 0, age) : 0, rim = fresh && P.tk ? sm(0.06, 0, age) : 0;\n      const spec = (specK * shiny * nh ** shin + water * (0.35 * nh ** 90 + 0.05) + 0.3 * rim) * 255;\n      const shade = (0.62 + 0.45 * dif) * (1 - 0.18 * water);\n      // Dry: pale and chalky, the thick ridges keeping a little more colour.\n      const th = sm(0.45, 0.85, h[i]), gr = 1 + 0.13 * grain[i], ds = (0.84 + 0.2 * dif) * gr;\n      let dr = (dry[0] + (deep[0] - dry[0]) * th) * ds, dg = (dry[1] + (deep[1] - dry[1]) * th) * ds, db = (dry[2] + (deep[2] - dry[2]) * th) * ds;\n      // A hairline crack opens where a crack runs, once that spot is dry.\n      const ck = crack[i];\n      if (ck > 0) {\n        const k = sm(0.6 + 1.4 * ck, 0.9 + 1.4 * ck, age - A0 - rank[i] * span - band);\n        const f = 0.55 * k;\n        (dr += (deep[0] * 0.7 - dr) * f), (dg += (deep[1] * 0.7 - dg) * f), (db += (deep[2] * 0.7 - db) * f);\n      }\n      const wr = wet[0] * shade, wg = wet[1] * shade, wb = wet[2] * shade;\n      const r = wr + (dr - wr) * lift + spec;\n      const gg = wg + (dg - wg) * lift + spec;\n      const b = wb + (db - wb) * lift + spec * 0.96;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","layer":{"id":"layer-clay-mask","type":"code","name":"clay-mask","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Clay Mask\n// Family:  cosmetic\n// Idea:    A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the clay face mask that pales as it dries\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet.\n// Knob 2: Speed. At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower.\n// Knob 3: Thickness. At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds.\n// Knob 4: Gloss. Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch.\n// Buttons: K1 tap sends the band of water down the panel now, unless one is already on its way.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, 0..1.\nfunction vn(x, y, s) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  const u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(i, j, s), b = hash(i + 1, j, s), c = hash(i, j + 1, s), d = hash(i + 1, j + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The clay as it was laid on: a base coat and spatula strokes across it,\n// each piling a ridge at its edges and scraping fine lines along its length.\n// Baked once: thickness, its slope, the order the LEDs dry in, the delay of\n// the rewetting sweep and the dry grain.\nfunction lay(P) {\n  const R = Math.random;\n  const h = new Float32Array(N), hb = new Float32Array(N), key = new Float32Array(N);\n  const strokes = [];\n  for (let k = 0; k \u003c 7; k++) {\n    const th = 1.05 + (R() - 0.5) * 0.5;\n    strokes.push({\n      tx: cos(th), ty: sin(th), nx: -sin(th), ny: cos(th),\n      c: -62 + k * 20 + (R() - 0.5) * 8, w: 24 + R() * 10, t: 0.45 + R() * 0.2, tilt: (R() - 0.5) * 0.3,\n      f1: 0.9 + R() * 0.6, f2: 2.1 + R() * 0.9, p1: R() * 6.3, p2: R() * 6.3, e1: R() * 6.3, e2: R() * 6.3, run: 0.0025 + R() * 0.002,\n    });\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5, py = y - 63.5;\n      let v = 0.42 + 0.12 * vn(x / 9, y / 9, 3), sc = 0;\n      for (const s of strokes) {\n        const a = px * s.tx + py * s.ty, n = px * s.nx + py * s.ny;\n        const edge = s.w / 2 + 2.2 * sin(a * 0.08 + s.e1) + 1.2 * sin(a * 0.21 + s.e2);\n        const off = abs(n - s.c);\n        if (off > edge) continue;\n        const u = (n - s.c) / edge, rim = edge - off;\n        v = s.t + s.tilt * u - s.run * a + 0.32 * exp(-(rim * rim) / 3.2);\n        sc = 0.027 * sin(n * s.f1 + s.p1) * (0.6 + 0.4 * sin(a * 0.05 + s.p2)) + 0.014 * sin(n * s.f2 + s.p2);\n      }\n      hb[y * W + x] = v;\n      h[y * W + x] = v + sc + 0.05 * (vn(x / 4, y / 4, 5) - 0.5);\n    }\n  // The order of drying follows the thickness blurred over a few LEDs, so the\n  // front creeps round the ridges instead of fraying along every scrape.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sum = 0, n = 0;\n      for (let j = -2; j \u003c= 2; j++)\n        for (let i = -2; i \u003c= 2; i++) {\n          const xx = x + i, yy = y + j;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          sum += hb[yy * W + xx];\n          n++;\n        }\n      key[y * W + x] = 0.5 * sum / n + 0.5 * hb[y * W + x] + 0.16 * (vn(x / 7, y / 7, 9) - 0.5) + 0.06 * (vn(x / 2.5, y / 2.5, 10) - 0.5);\n    }\n  const gx = new Float32Array(N), gy = new Float32Array(N), rank = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (h[y * W + min(W - 1, x + 1)] - h[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (h[min(H - 1, y + 1) * W + x] - h[max(0, y - 1) * W + x]) / 2;\n    }\n  // Thin clay dries first: the LEDs in order of thickness, as a rank 0..1.\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => key[a] - key[b]);\n  order.forEach((i, r) => (rank[i] = r / (N - 1)));\n  const delay = new Float32Array(N), grain = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      delay[i] = (y + 4 + 3 * sin(x * 0.13 + 1.1) + 3 * vn(x / 5, y / 5, 11)) / (H + 10);\n      grain[i] = 0.6 * (R() - 0.5) + 0.4 * (vn(x / 1.7, y / 1.7, 13) - 0.5);\n    }\n  // Three hairline cracks, each a short wandering line from a thick spot,\n  // numbered 0..1 along its length so it opens from one end.\n  const crack = new Float32Array(N);\n  for (let n = 0; n \u003c 3; n++) {\n    let best = 0, bi = 0;\n    for (let t = 0; t \u003c 60; t++) {\n      const i = floor(R() * N);\n      if (h[i] > best && !crack[i]) (best = h[i]), (bi = i);\n    }\n    let x = bi % W, y = floor(bi / W), a = R() * 2 * PI;\n    const len = 14 + floor(R() * 12);\n    for (let s = 0; s \u003c len; s++) {\n      const i = floor(y) * W + floor(x);\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) break;\n      crack[i] = max(crack[i], 0.02 + s / len);\n      a += (R() - 0.5) * 0.9;\n      x += cos(a) * 0.9;\n      y += sin(a) * 0.9;\n    }\n  }\n  Object.assign(P, { h, gx, gy, rank, delay, grain, crack });\n}\n\nexport function setup(params) {\n  params.s = {\n    c: 0, hue: 0, speed: 2, thick: 0, gloss: 0.06, ts: -0.5, tk: 0, ps: -0.5, pk: 0,\n  };\n  lay(params.s);\n}\n\n// Drying times in clock seconds (one a second at Speed 2): an LED of rank r\n// starts to dry at age A0 + r * span and is dry after band more.\nconst A0 = 1.0, SWEEP = 2.2, HOLD = 1.2;\nconst spanOf = (t) => 6 + (t \u003c 0 ? 3.5 * t : 5 * t);\nconst bandOf = (t) => 1.6 + (t \u003c 0 ? -1.2 * t : -0.6 * t);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], -1, 1);\n  P.gloss = cl(k[3], -1, 1);\n  P.c += d * P.speed * 0.5;\n  const span = spanOf(P.thick), band = bandOf(P.thick);\n  const sweeping = P.c \u003c P.ts + P.tk * SWEEP;\n  const allDry = P.c - (P.ts + P.tk * SWEEP) > A0 + span + band + HOLD;\n  if (!sweeping && (allDry || (input.btnPressed && input.btnPressed[0]))) {\n    (P.ps = P.ts), (P.pk = P.tk), (P.ts = P.c), (P.tk = 1);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { h, gx, gy, rank, delay, grain, crack } = P;\n  const span = spanOf(P.thick), band = bandOf(P.thick), c = P.c;\n  const relief = 2.4 + 1.6 * P.thick, g = P.gloss;\n  // A lamp above the panel drifts slowly, and the wet clay mirrors it as a\n  // soft spot that the ridges and scrapes break into streaks.\n  const la = 0.3 * c;\n  const Lx = 32 + 46 * sin(la), Ly = 60 + 70 * sin(0.63 * la + 1.2), Lz = 150;\n  const Ex = 32, Ey = 70, Ez = 260;\n  const shin = 14 + 30 * (g + 1), specK = 0.25 + 0.5 * (g + 1) / 2;\n  const hue = P.hue + 0.935;\n  const wet = [0, 0, 0], dry = [0, 0, 0], deep = [0, 0, 0];\n  hsv(hue, 0.64 + 0.08 * g, 0.56 - 0.05 * g, wet, 0);\n  hsv(hue + 0.01, 0.12, 0.92, dry, 0);\n  hsv(hue + 0.005, 0.3, 0.84, deep, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const tNew = P.ts + P.tk * SWEEP * delay[i];\n      const fresh = c >= tNew;\n      const tw = fresh ? tNew : P.ps + P.pk * SWEEP * delay[i];\n      const age = c - tw;\n      const D = cl((age - A0 - rank[i] * span) / band, 0, 1);\n      const nx = -gx[i] * relief, ny = -gy[i] * relief, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n      let lx = Lx - x, ly = Ly - y, lz = Lz;\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const dif = (nx * lx + ny * ly + lz) * nl;\n      const nh = max(0, (nx * hx + ny * hy + hz) * hi * nl);\n      // Wet: deep colour shaded by the relief, with the sheen. The sheen\n      // goes first as the surface turns matte, then the colour lifts.\n      const shiny = 1 - sm(0, 0.3, D), lift = sm(0.12, 1, D);\n      // Behind the rewetting band the clay carries a film of water, with a\n      // bright line where the band's edge is.\n      const water = fresh && P.tk ? sm(1.1, 0, age) : 0, rim = fresh && P.tk ? sm(0.06, 0, age) : 0;\n      const spec = (specK * shiny * nh ** shin + water * (0.35 * nh ** 90 + 0.05) + 0.3 * rim) * 255;\n      const shade = (0.62 + 0.45 * dif) * (1 - 0.18 * water);\n      // Dry: pale and chalky, the thick ridges keeping a little more colour.\n      const th = sm(0.45, 0.85, h[i]), gr = 1 + 0.13 * grain[i], ds = (0.84 + 0.2 * dif) * gr;\n      let dr = (dry[0] + (deep[0] - dry[0]) * th) * ds, dg = (dry[1] + (deep[1] - dry[1]) * th) * ds, db = (dry[2] + (deep[2] - dry[2]) * th) * ds;\n      // A hairline crack opens where a crack runs, once that spot is dry.\n      const ck = crack[i];\n      if (ck > 0) {\n        const k = sm(0.6 + 1.4 * ck, 0.9 + 1.4 * ck, age - A0 - rank[i] * span - band);\n        const f = 0.55 * k;\n        (dr += (deep[0] * 0.7 - dr) * f), (dg += (deep[1] * 0.7 - dg) * f), (db += (deep[2] * 0.7 - db) * f);\n      }\n      const wr = wet[0] * shade, wg = wet[1] * shade, wb = wet[2] * shade;\n      const r = wr + (dr - wr) * lift + spec;\n      const gg = wg + (dg - wg) * lift + spec;\n      const b = wb + (db - wb) * lift + spec * 0.96;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower."},{"name":"Thickness","min":-1,"max":1,"about":"At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds."},{"name":"Gloss","min":-1,"max":1,"about":"Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch."}],"start":[0,2,0,0.06],"measures":{"motion":0.0642,"detail":0.0418,"edges":0.1071,"complexity":2.3182,"coverage":1,"colour":0.1574,"drift":0.2242},"knobResponse":[0.2918,0.1358,0.0941,0.1324]},{"slug":"cleansing-balm","title":"Cleansing Balm","family":"cosmetic","round":33,"note":"서리 낀 셔벗 밤이 무광으로 판을 채우고, 아래에서 올라오는 온기와 보이지 않는 손끝이 닿은 곳마다 밤이 녹아 맑은 광택 오일이 돼요. 오일은 흘러내려 바닥에 고이고, 다 녹으면 위에서 새 밤이 다시 휘핑돼요. K3 은 녹는 빠르기와 높이를 정하고, K1 을 누르면 손끝 하나가 지름 20 LED 를 한 번에 녹여요.","idea":"A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.","buttons":"K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.","code":"// ===== Patternflow pattern =====\n// Title:   Cleansing Balm\n// Family:  cosmetic\n// Idea:    A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a sherbet cleansing balm melting into oil\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1\n//\n// Knob 1: Hue. The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown.\n// Knob 2: Speed. At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower.\n// Knob 3: Warmth. How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s.\n// Knob 4: Grain. The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting.\n// Buttons: K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Pink sherbet at Hue 0.\nconst H0 = 0.95;\n// A melted LED gives REL of oil. A film FILM thick clings where it is; above\n// that the oil runs down, faster the thicker it is, and a cell holds at most\n// CAP, so the pool fills up from the bottom row.\nconst REL = 0.42, FILM = 0.07, CAP = 1, KFLOW = 9;\n\n// Smooth noise in a 128 x 128 tile, three octaves of 4, 8 and 16 cells.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = rnd() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The frost: a fine grain, one value per LED, and a coarse one, the same\n// values blurred over 3 x 3 LEDs and scaled back up, so its crystals are two\n// or three LEDs across. SPK picks the sparkling specks.\nconst GF = Float32Array.from({ length: N }, (_, i) => hash(i + 77) * 2 - 1);\nconst GC = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) s += GF[((y + dy + H) % H) * W + ((x + dx + W) % W)];\n    GC[y * W + x] = s / 3;\n  }\nconst SPK = Float32Array.from({ length: N }, (_, i) => hash(i + 991));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  buildTex();\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    Hb: F(N), mb: F(N), nz: F(N), Hn: F(N), mbN: F(N), nzN: F(N),\n    m: F(N), F: F(N), age: F(N), Ho: F(N), Hs: F(N), wo: F(N),\n    phase: 0, Yf: H + 10, Yl: -10, row: 0, hold: 0, T: 0, next: 1, fingers: [], dir: 1,\n    hue: 0, speed: 2, warm: 0, grain: 0.06, wm: 0, started: false, col: F(7 * 3), colHue: NaN,\n  };\n}\n\n// A fresh layer of balm. A soft whip of lumps, then fifteen spoon scoops, each\n// an oval hollow 15 to 25 LEDs long with faint rings where the spoon's edge\n// dragged and a lip of balm piled up at the end the spoon left by. nz is how\n// long each LED holds out against warmth, and mk is the sherbet's marbling.\nfunction lay(Hh, mk, nz) {\n  const ox = rnd() * T, oy = rnd() * T;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      Hh[i] = 0.3 * tap(x * 1.7 + ox, y * 1.7 + oy);\n      mk[i] = tap(x * 0.55 + oy, y * 0.38 + ox + 40);\n      nz[i] = 0.9 * tap(x * 2.6 + ox + 60, y * 2.6 + oy);\n    }\n  for (let k = 0; k \u003c 15; k++) {\n    const L = 15 + rnd() * 10, Wd = L * (0.5 + 0.15 * rnd()), a = rnd() * 2 * PI, ca = cos(a), sa = sin(a);\n    const cx = rnd() * W, cy = -6 + rnd() * (H + 12), E = L * 1.4;\n    for (let y = max(0, floor(cy - E)); y \u003c= min(H - 1, floor(cy + E)); y++)\n      for (let x = max(0, floor(cx - E)); x \u003c= min(W - 1, floor(cx + E)); x++) {\n        const dx = x + 0.5 - cx, dy = y + 0.5 - cy, u = (dx * ca + dy * sa) / L, v = (-dx * sa + dy * ca) / Wd;\n        const rho = sqrt(u * u + v * v);\n        if (rho > 1.4) continue;\n        const i = y * W + x, wgt = 1 - sm((rho - 0.82) / 0.3);\n        const dish = rho \u003c 1 ? -0.75 * (1 - rho * rho) + 0.025 * sin(rho * 19) : 0;\n        const lip = 0.55 * exp(-(((rho - 1.02) / 0.14) ** 2)) * (0.4 + 0.6 * sm((u + 1) / 2));\n        Hh[i] = Hh[i] * (1 - wgt) + dish * wgt + lip;\n      }\n  }\n}\n\n// A fingertip: it comes down at (x, y) and its warm print spreads to radius R\n// over `grow` seconds, melting what it covers.\nfunction finger(S, big) {\n  let x = 8 + rnd() * (W - 16), y = 0;\n  // Into the balm, above the front.\n  const hiY = min(H - 10, S.Yf - 14);\n  if (hiY > 12) y = 8 + rnd() * (hiY - 8);\n  else y = 10 + rnd() * (H - 20);\n  if (big) x = 14 + rnd() * (W - 28);\n  S.fingers.push({ x, y, R: big ? 10 : 6 + rnd() * 4 + 3 * S.warm, grow: big ? 0.25 : 0.8, t: 0, r: 0 });\n}\n\nfunction step(S, st) {\n  const { m, F, age, Hb, nz } = S;\n  S.T += st;\n  if (S.phase === 0) {\n    S.Yf -= st * (5 + 7 * S.warm);\n    S.next -= st;\n    if (S.next \u003c= 0) {\n      S.next = (3.2 - 1.8 * S.warm) * (0.7 + 0.6 * rnd());\n      finger(S, false);\n    }\n    if (S.Yf \u003c H - (0.57 + 0.5 * S.warm) * (H + 12)) {\n      S.phase = 1;\n      S.hold = 0;\n    }\n  } else if (S.phase === 1) {\n    S.hold += st;\n    if (S.hold > 1.5) {\n      // Whip a fresh layer on from the top.\n      S.phase = 2;\n      S.Yl = -6;\n      S.row = 0;\n      S.Yf = H + 1000;\n      lay(S.Hn, S.mbN, S.nzN);\n    }\n  } else {\n    S.Yl += st * 46;\n    const to = min(H, floor(S.Yl));\n    for (; S.row \u003c to; S.row++)\n      for (let x = 0, i = S.row * W; x \u003c W; x++, i++) {\n        Hb[i] = S.Hn[i];\n        S.mb[i] = S.mbN[i];\n        nz[i] = S.nzN[i];\n        m[i] = 0;\n        F[i] = 0;\n        age[i] = 0;\n      }\n    if (S.Yl > H + 8) {\n      S.phase = 0;\n      S.Yf = H + 10;\n      S.next = 0.6;\n      S.fingers.length = 0;\n    }\n  }\n  // The front: LEDs below it melt, ridges and the lumps of nz holding out a\n  // few rows longer, so it climbs ragged. Once an LED starts it melts through\n  // in about 0.4 s, and that band is the wet rim.\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const wf = (y - S.Yf) / 4;\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (m[i] >= 1) {\n        age[i] += st;\n        continue;\n      }\n      if (m[i] > 0 || wf > 0.9 * Hb[i] + nz[i]) {\n        const dm = min(1 - m[i], st * 2.4);\n        m[i] += dm;\n        F[i] += dm * REL;\n      }\n    }\n  }\n  const fs = S.fingers;\n  for (let k = fs.length - 1; k >= 0; k--) {\n    const f = fs[k];\n    f.t += st;\n    f.r = f.R * sm(f.t / f.grow);\n    const E = f.R + 3;\n    for (let y = max(0, floor(f.y - E)); y \u003c= min(H - 1, floor(f.y + E)); y++)\n      for (let x = max(0, floor(f.x - E)); x \u003c= min(W - 1, floor(f.x + E)); x++) {\n        const i = y * W + x;\n        if (m[i] > 0) continue;\n        const d = Math.hypot(x + 0.5 - f.x, y + 0.5 - f.y);\n        if (d \u003c f.r - 1.5 * (0.9 * Hb[i] + nz[i])) m[i] = 0.01;\n      }\n    if (f.t > f.grow + 0.5) fs.splice(k, 1);\n  }\n  // The oil runs down a row at a time, bottom row first so nothing moves two\n  // rows in one step.\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      // Unmelted balm soaks up a little, so oil only trickles over it.\n      const mob = F[i] - (m[i] > 0 ? FILM : 0.22);\n      if (mob \u003c= 0) continue;\n      const j = i + W;\n      let fl = min(mob, st * KFLOW * mob * (0.25 + F[i]));\n      fl = min(fl, CAP - F[j]);\n      if (fl \u003c= 0) continue;\n      F[i] -= fl;\n      F[j] += fl;\n    }\n  // The oil levels out sideways, quickly where it is deep, so the pool's top\n  // is flat and a film does not keep the stripes it ran down in.\n  S.dir = -S.dir;\n  for (let y = 0; y \u003c H; y++) {\n    const r0 = y * W;\n    for (let n = 0; n \u003c W - 1; n++) {\n      const x = S.dir > 0 ? n : W - 2 - n, i = r0 + x, d = F[i] - F[i + 1];\n      if (F[i] \u003c FILM && F[i + 1] \u003c FILM) continue;\n      const mv = d * (F[i] > 0.3 || F[i + 1] > 0.3 ? 0.35 : 0.15);\n      F[i] -= mv;\n      F[i + 1] += mv;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.warm = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    lay(S.Hb, S.mb, S.nz);\n    // Open with the bottom fifth already melted and a fingertip or two in.\n    S.Yf = H - 12;\n    S.next = 0.3;\n    for (let i = 0; i \u003c 70; i++) step(S, 1 / 20);\n  }\n  if (input.btnPressed && input.btnPressed[0]) finger(S, true);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours: the sherbet, its creamy marbling, the glow under the oil, the\n// oil's own tint, the wet rim and the frost's specks.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0, hf = h - floor(h);\n  // Orange and gold go brown at middle light on the LEDs, so round them\n  // everything is lifted and paled: apricot, peach and butter.\n  const dw = abs(hf - 0.13), wm = sm(1.5 - min(dw, 1 - dw) / 0.12);\n  hsv(h, 0.44 - 0.14 * wm, 0.98, c, 0);\n  hsv(h - 0.015, 0.22 - 0.06 * wm, 1, c, 3);\n  hsv(h - 0.02, 0.32 - 0.1 * wm, 1, c, 6);\n  hsv(h + 0.015, 0.78 - 0.38 * wm, 0.62 + 0.36 * wm, c, 9);\n  hsv(h, 0.22, 1, c, 12);\n  hsv(h + 0.05, 0.08, 1, c, 15);\n  S.wm = wm;\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.colHue !== S.hue) palette(S);\n  const { Hb, mb, m, F, age, Ho, Hs, col } = S, t = S.T;\n  // How much of each LED is oil: all of it once melted, and a wet film\n  // where oil runs down over balm that has not melted yet.\n  const wo = S.wo;\n  for (let i = 0; i \u003c N; i++) wo[i] = max(m[i], 0.7 * sm((F[i] - 0.12) / 0.3));\n  // The oil's surface: what is left of the balm's shape as it slumps flat in\n  // the two seconds after melting, the oil's own depth, and slow ripples\n  // carried down the panel at about 6 LEDs a second, then softened over\n  // 3 x 3 LEDs so the oil has no grain at all.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (wo[i] \u003c= 0) {\n        Ho[i] = Hb[i] * 0.7;\n        continue;\n      }\n      const sl = m[i] > 0 ? max(0, 1 - age[i] / 2) : 1, f = min(F[i], 1.2);\n      Ho[i] = 0.7 * Hb[i] * sl + 1.2 * f + 0.35 * tap(x * 1.1 + 20, y * 0.7 - t * 5) * (0.4 + f);\n    }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Hs[i] = (Ho[i - (x > 0 ? 1 : 0)] + 2 * Ho[i] + Ho[i + (x \u003c W - 1 ? 1 : 0)]) * 0.25;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Ho[i] = (Hs[i - (y > 0 ? W : 0)] + 2 * Hs[i] + Hs[i + (y \u003c H - 1 ? W : 0)]) * 0.25;\n  const g = S.grain, gA = 0.04 + 0.17 * g, spD = 0.03 + 0.09 * g, spV = 0.09 + 0.08 * g, lumps = 1 + 0.35 * g;\n  // A small light 60 degrees off the face of the panel wanders round the top\n  // left, so flat oil never catches it and only the slopes of ripples,\n  // slumping lumps and the pool's edge glint. Two long reflections of strip\n  // lights sweep across the oil and back every 18 s at Speed 2.\n  const az = -2.2 + 0.7 * sin(t * 0.37), lx = 0.866 * cos(az), ly = 0.866 * sin(az), lz = 0.5;\n  const hx0 = lx, hy0 = ly, hz0 = lz + 1, hl = Math.hypot(hx0, hy0, hz0);\n  const hx = hx0 / hl, hy = hy0 / hl, hz = hz0 / hl;\n  const band = 1.1 * sin(t * 0.35), band2 = band + (band > 0 ? -1.4 : 1.4);\n  // Warm oil at middle light is brown, so round orange and gold the oil\n  // glows brighter and turns to honey.\n  const lift = 1 + 0.32 * S.wm, tk = 0.85 + 0.25 * S.wm;\n  // The edge of a fresh layer being whipped on stands up as a rolled ridge.\n  const whip = S.phase === 2, Yl = S.Yl;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0;\n    const roll = whip ? 0.9 * exp(-(((y - Yl + 2.5) / 2.6) ** 2)) : 0, rollU = whip ? 0.9 * exp(-(((y - 1 - Yl + 2.5) / 2.6) ** 2)) : 0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const lf = x > 0 ? -1 : 0, rt = x \u003c W - 1 ? 1 : 0;\n      const mm = m[i], w = wo[i];\n      let r = 0, gg = 0, b = 0;\n      if (mm \u003c 1) {\n        // Matte balm: soft light from the top left, a little darker deep in\n        // the hollows, the marbling between sherbet and cream, and frost.\n        const ddx = (Hb[i + rt] - Hb[i + lf]) * 2.2 * lumps, ddy = (Hb[i + dn] - Hb[i + up]) * 2.2 * lumps + (roll - rollU) * 3;\n        const dif = (0.45 * ddx + 0.62 * ddy + 0.64) / sqrt(ddx * ddx + ddy * ddy + 1);\n        const sh = 0.8 + 0.22 * dif + 0.05 * cl(Hb[i] + roll, -0.8, 0.6);\n        const mk = sm(0.5 + 1.2 * sin(mb[i] * 11 + 0.8));\n        const f = sh * (1 + gA * (GF[i] * (1 - g) + GC[i] * g));\n        const sp = SPK[i] > 1 - spD ? spV : 0;\n        r = (col[0] + (col[3] - col[0]) * mk) * f + sp;\n        gg = (col[1] + (col[4] - col[1]) * mk) * f + sp;\n        b = (col[2] + (col[5] - col[2]) * mk) * f + sp;\n      }\n      if (w > 0) {\n        // Oil: the glow under it seen through a tint that deepens with the\n        // oil's depth, a sharp highlight from the small light, and the strip\n        // light's long reflection.\n        const nx = -(Ho[i + rt] - Ho[i + lf]) * 3.5, ny = -(Ho[i + dn] - Ho[i + up]) * 3.5, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        const nd = (nx * hx + ny * hy + hz) * nl;\n        const spec = nd > 0.9 ? ((nd - 0.9) / 0.1) ** 2 : 0;\n        const e = 2 * nl * (nx * 0.5 + ny * 0.85) * nl + (x - 32) / 90 + (y - 64) / 70, q = (e - band) / 0.14, q2 = (e - band2) / 0.1;\n        const s = min(1, spec) + 0.42 * exp(-q * q) + 0.28 * exp(-q2 * q2);\n        const dep = 0.3 + F[i], a = 1 - exp(-1.1 * dep);\n        const glow = (0.55 + 0.3 * tap(x * 0.6 + 70, y * 0.4 - t * 1.5)) * lift;\n        const orr = col[6] * glow * (1 - a) + col[9] * a * tk + s;\n        const og = col[7] * glow * (1 - a) + col[10] * a * tk + s;\n        const ob = col[8] * glow * (1 - a) + col[11] * a * tk + s;\n        r = r * (1 - w) + orr * w;\n        gg = gg * (1 - w) + og * w;\n        b = b * (1 - w) + ob * w;\n        // The wet rim: the band where the balm is turning, and the oil's\n        // edge against balm, a pale glassy line with a glint.\n        let rim = mm > 0 && mm \u003c 1 ? 4 * mm * (1 - mm) : 0;\n        if (mm >= 1 && (m[i + lf] \u003c 0.5 || m[i + rt] \u003c 0.5 || m[i + up] \u003c 0.5 || m[i + dn] \u003c 0.5)) rim = 0.8;\n        if (rim > 0) {\n          const k = 0.45 * rim;\n          r += (col[12] - r) * k + 0.1 * rim;\n          gg += (col[13] - gg) * k + 0.1 * rim;\n          b += (col[14] - b) * k + 0.1 * rim;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-cleansing-balm","type":"code","name":"cleansing-balm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cleansing Balm\n// Family:  cosmetic\n// Idea:    A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a sherbet cleansing balm melting into oil\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1\n//\n// Knob 1: Hue. The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown.\n// Knob 2: Speed. At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower.\n// Knob 3: Warmth. How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s.\n// Knob 4: Grain. The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting.\n// Buttons: K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Pink sherbet at Hue 0.\nconst H0 = 0.95;\n// A melted LED gives REL of oil. A film FILM thick clings where it is; above\n// that the oil runs down, faster the thicker it is, and a cell holds at most\n// CAP, so the pool fills up from the bottom row.\nconst REL = 0.42, FILM = 0.07, CAP = 1, KFLOW = 9;\n\n// Smooth noise in a 128 x 128 tile, three octaves of 4, 8 and 16 cells.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = rnd() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The frost: a fine grain, one value per LED, and a coarse one, the same\n// values blurred over 3 x 3 LEDs and scaled back up, so its crystals are two\n// or three LEDs across. SPK picks the sparkling specks.\nconst GF = Float32Array.from({ length: N }, (_, i) => hash(i + 77) * 2 - 1);\nconst GC = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) s += GF[((y + dy + H) % H) * W + ((x + dx + W) % W)];\n    GC[y * W + x] = s / 3;\n  }\nconst SPK = Float32Array.from({ length: N }, (_, i) => hash(i + 991));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  buildTex();\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    Hb: F(N), mb: F(N), nz: F(N), Hn: F(N), mbN: F(N), nzN: F(N),\n    m: F(N), F: F(N), age: F(N), Ho: F(N), Hs: F(N), wo: F(N),\n    phase: 0, Yf: H + 10, Yl: -10, row: 0, hold: 0, T: 0, next: 1, fingers: [], dir: 1,\n    hue: 0, speed: 2, warm: 0, grain: 0.06, wm: 0, started: false, col: F(7 * 3), colHue: NaN,\n  };\n}\n\n// A fresh layer of balm. A soft whip of lumps, then fifteen spoon scoops, each\n// an oval hollow 15 to 25 LEDs long with faint rings where the spoon's edge\n// dragged and a lip of balm piled up at the end the spoon left by. nz is how\n// long each LED holds out against warmth, and mk is the sherbet's marbling.\nfunction lay(Hh, mk, nz) {\n  const ox = rnd() * T, oy = rnd() * T;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      Hh[i] = 0.3 * tap(x * 1.7 + ox, y * 1.7 + oy);\n      mk[i] = tap(x * 0.55 + oy, y * 0.38 + ox + 40);\n      nz[i] = 0.9 * tap(x * 2.6 + ox + 60, y * 2.6 + oy);\n    }\n  for (let k = 0; k \u003c 15; k++) {\n    const L = 15 + rnd() * 10, Wd = L * (0.5 + 0.15 * rnd()), a = rnd() * 2 * PI, ca = cos(a), sa = sin(a);\n    const cx = rnd() * W, cy = -6 + rnd() * (H + 12), E = L * 1.4;\n    for (let y = max(0, floor(cy - E)); y \u003c= min(H - 1, floor(cy + E)); y++)\n      for (let x = max(0, floor(cx - E)); x \u003c= min(W - 1, floor(cx + E)); x++) {\n        const dx = x + 0.5 - cx, dy = y + 0.5 - cy, u = (dx * ca + dy * sa) / L, v = (-dx * sa + dy * ca) / Wd;\n        const rho = sqrt(u * u + v * v);\n        if (rho > 1.4) continue;\n        const i = y * W + x, wgt = 1 - sm((rho - 0.82) / 0.3);\n        const dish = rho \u003c 1 ? -0.75 * (1 - rho * rho) + 0.025 * sin(rho * 19) : 0;\n        const lip = 0.55 * exp(-(((rho - 1.02) / 0.14) ** 2)) * (0.4 + 0.6 * sm((u + 1) / 2));\n        Hh[i] = Hh[i] * (1 - wgt) + dish * wgt + lip;\n      }\n  }\n}\n\n// A fingertip: it comes down at (x, y) and its warm print spreads to radius R\n// over `grow` seconds, melting what it covers.\nfunction finger(S, big) {\n  let x = 8 + rnd() * (W - 16), y = 0;\n  // Into the balm, above the front.\n  const hiY = min(H - 10, S.Yf - 14);\n  if (hiY > 12) y = 8 + rnd() * (hiY - 8);\n  else y = 10 + rnd() * (H - 20);\n  if (big) x = 14 + rnd() * (W - 28);\n  S.fingers.push({ x, y, R: big ? 10 : 6 + rnd() * 4 + 3 * S.warm, grow: big ? 0.25 : 0.8, t: 0, r: 0 });\n}\n\nfunction step(S, st) {\n  const { m, F, age, Hb, nz } = S;\n  S.T += st;\n  if (S.phase === 0) {\n    S.Yf -= st * (5 + 7 * S.warm);\n    S.next -= st;\n    if (S.next \u003c= 0) {\n      S.next = (3.2 - 1.8 * S.warm) * (0.7 + 0.6 * rnd());\n      finger(S, false);\n    }\n    if (S.Yf \u003c H - (0.57 + 0.5 * S.warm) * (H + 12)) {\n      S.phase = 1;\n      S.hold = 0;\n    }\n  } else if (S.phase === 1) {\n    S.hold += st;\n    if (S.hold > 1.5) {\n      // Whip a fresh layer on from the top.\n      S.phase = 2;\n      S.Yl = -6;\n      S.row = 0;\n      S.Yf = H + 1000;\n      lay(S.Hn, S.mbN, S.nzN);\n    }\n  } else {\n    S.Yl += st * 46;\n    const to = min(H, floor(S.Yl));\n    for (; S.row \u003c to; S.row++)\n      for (let x = 0, i = S.row * W; x \u003c W; x++, i++) {\n        Hb[i] = S.Hn[i];\n        S.mb[i] = S.mbN[i];\n        nz[i] = S.nzN[i];\n        m[i] = 0;\n        F[i] = 0;\n        age[i] = 0;\n      }\n    if (S.Yl > H + 8) {\n      S.phase = 0;\n      S.Yf = H + 10;\n      S.next = 0.6;\n      S.fingers.length = 0;\n    }\n  }\n  // The front: LEDs below it melt, ridges and the lumps of nz holding out a\n  // few rows longer, so it climbs ragged. Once an LED starts it melts through\n  // in about 0.4 s, and that band is the wet rim.\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const wf = (y - S.Yf) / 4;\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (m[i] >= 1) {\n        age[i] += st;\n        continue;\n      }\n      if (m[i] > 0 || wf > 0.9 * Hb[i] + nz[i]) {\n        const dm = min(1 - m[i], st * 2.4);\n        m[i] += dm;\n        F[i] += dm * REL;\n      }\n    }\n  }\n  const fs = S.fingers;\n  for (let k = fs.length - 1; k >= 0; k--) {\n    const f = fs[k];\n    f.t += st;\n    f.r = f.R * sm(f.t / f.grow);\n    const E = f.R + 3;\n    for (let y = max(0, floor(f.y - E)); y \u003c= min(H - 1, floor(f.y + E)); y++)\n      for (let x = max(0, floor(f.x - E)); x \u003c= min(W - 1, floor(f.x + E)); x++) {\n        const i = y * W + x;\n        if (m[i] > 0) continue;\n        const d = Math.hypot(x + 0.5 - f.x, y + 0.5 - f.y);\n        if (d \u003c f.r - 1.5 * (0.9 * Hb[i] + nz[i])) m[i] = 0.01;\n      }\n    if (f.t > f.grow + 0.5) fs.splice(k, 1);\n  }\n  // The oil runs down a row at a time, bottom row first so nothing moves two\n  // rows in one step.\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      // Unmelted balm soaks up a little, so oil only trickles over it.\n      const mob = F[i] - (m[i] > 0 ? FILM : 0.22);\n      if (mob \u003c= 0) continue;\n      const j = i + W;\n      let fl = min(mob, st * KFLOW * mob * (0.25 + F[i]));\n      fl = min(fl, CAP - F[j]);\n      if (fl \u003c= 0) continue;\n      F[i] -= fl;\n      F[j] += fl;\n    }\n  // The oil levels out sideways, quickly where it is deep, so the pool's top\n  // is flat and a film does not keep the stripes it ran down in.\n  S.dir = -S.dir;\n  for (let y = 0; y \u003c H; y++) {\n    const r0 = y * W;\n    for (let n = 0; n \u003c W - 1; n++) {\n      const x = S.dir > 0 ? n : W - 2 - n, i = r0 + x, d = F[i] - F[i + 1];\n      if (F[i] \u003c FILM && F[i + 1] \u003c FILM) continue;\n      const mv = d * (F[i] > 0.3 || F[i + 1] > 0.3 ? 0.35 : 0.15);\n      F[i] -= mv;\n      F[i + 1] += mv;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.warm = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    lay(S.Hb, S.mb, S.nz);\n    // Open with the bottom fifth already melted and a fingertip or two in.\n    S.Yf = H - 12;\n    S.next = 0.3;\n    for (let i = 0; i \u003c 70; i++) step(S, 1 / 20);\n  }\n  if (input.btnPressed && input.btnPressed[0]) finger(S, true);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours: the sherbet, its creamy marbling, the glow under the oil, the\n// oil's own tint, the wet rim and the frost's specks.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0, hf = h - floor(h);\n  // Orange and gold go brown at middle light on the LEDs, so round them\n  // everything is lifted and paled: apricot, peach and butter.\n  const dw = abs(hf - 0.13), wm = sm(1.5 - min(dw, 1 - dw) / 0.12);\n  hsv(h, 0.44 - 0.14 * wm, 0.98, c, 0);\n  hsv(h - 0.015, 0.22 - 0.06 * wm, 1, c, 3);\n  hsv(h - 0.02, 0.32 - 0.1 * wm, 1, c, 6);\n  hsv(h + 0.015, 0.78 - 0.38 * wm, 0.62 + 0.36 * wm, c, 9);\n  hsv(h, 0.22, 1, c, 12);\n  hsv(h + 0.05, 0.08, 1, c, 15);\n  S.wm = wm;\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.colHue !== S.hue) palette(S);\n  const { Hb, mb, m, F, age, Ho, Hs, col } = S, t = S.T;\n  // How much of each LED is oil: all of it once melted, and a wet film\n  // where oil runs down over balm that has not melted yet.\n  const wo = S.wo;\n  for (let i = 0; i \u003c N; i++) wo[i] = max(m[i], 0.7 * sm((F[i] - 0.12) / 0.3));\n  // The oil's surface: what is left of the balm's shape as it slumps flat in\n  // the two seconds after melting, the oil's own depth, and slow ripples\n  // carried down the panel at about 6 LEDs a second, then softened over\n  // 3 x 3 LEDs so the oil has no grain at all.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (wo[i] \u003c= 0) {\n        Ho[i] = Hb[i] * 0.7;\n        continue;\n      }\n      const sl = m[i] > 0 ? max(0, 1 - age[i] / 2) : 1, f = min(F[i], 1.2);\n      Ho[i] = 0.7 * Hb[i] * sl + 1.2 * f + 0.35 * tap(x * 1.1 + 20, y * 0.7 - t * 5) * (0.4 + f);\n    }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Hs[i] = (Ho[i - (x > 0 ? 1 : 0)] + 2 * Ho[i] + Ho[i + (x \u003c W - 1 ? 1 : 0)]) * 0.25;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Ho[i] = (Hs[i - (y > 0 ? W : 0)] + 2 * Hs[i] + Hs[i + (y \u003c H - 1 ? W : 0)]) * 0.25;\n  const g = S.grain, gA = 0.04 + 0.17 * g, spD = 0.03 + 0.09 * g, spV = 0.09 + 0.08 * g, lumps = 1 + 0.35 * g;\n  // A small light 60 degrees off the face of the panel wanders round the top\n  // left, so flat oil never catches it and only the slopes of ripples,\n  // slumping lumps and the pool's edge glint. Two long reflections of strip\n  // lights sweep across the oil and back every 18 s at Speed 2.\n  const az = -2.2 + 0.7 * sin(t * 0.37), lx = 0.866 * cos(az), ly = 0.866 * sin(az), lz = 0.5;\n  const hx0 = lx, hy0 = ly, hz0 = lz + 1, hl = Math.hypot(hx0, hy0, hz0);\n  const hx = hx0 / hl, hy = hy0 / hl, hz = hz0 / hl;\n  const band = 1.1 * sin(t * 0.35), band2 = band + (band > 0 ? -1.4 : 1.4);\n  // Warm oil at middle light is brown, so round orange and gold the oil\n  // glows brighter and turns to honey.\n  const lift = 1 + 0.32 * S.wm, tk = 0.85 + 0.25 * S.wm;\n  // The edge of a fresh layer being whipped on stands up as a rolled ridge.\n  const whip = S.phase === 2, Yl = S.Yl;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0;\n    const roll = whip ? 0.9 * exp(-(((y - Yl + 2.5) / 2.6) ** 2)) : 0, rollU = whip ? 0.9 * exp(-(((y - 1 - Yl + 2.5) / 2.6) ** 2)) : 0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const lf = x > 0 ? -1 : 0, rt = x \u003c W - 1 ? 1 : 0;\n      const mm = m[i], w = wo[i];\n      let r = 0, gg = 0, b = 0;\n      if (mm \u003c 1) {\n        // Matte balm: soft light from the top left, a little darker deep in\n        // the hollows, the marbling between sherbet and cream, and frost.\n        const ddx = (Hb[i + rt] - Hb[i + lf]) * 2.2 * lumps, ddy = (Hb[i + dn] - Hb[i + up]) * 2.2 * lumps + (roll - rollU) * 3;\n        const dif = (0.45 * ddx + 0.62 * ddy + 0.64) / sqrt(ddx * ddx + ddy * ddy + 1);\n        const sh = 0.8 + 0.22 * dif + 0.05 * cl(Hb[i] + roll, -0.8, 0.6);\n        const mk = sm(0.5 + 1.2 * sin(mb[i] * 11 + 0.8));\n        const f = sh * (1 + gA * (GF[i] * (1 - g) + GC[i] * g));\n        const sp = SPK[i] > 1 - spD ? spV : 0;\n        r = (col[0] + (col[3] - col[0]) * mk) * f + sp;\n        gg = (col[1] + (col[4] - col[1]) * mk) * f + sp;\n        b = (col[2] + (col[5] - col[2]) * mk) * f + sp;\n      }\n      if (w > 0) {\n        // Oil: the glow under it seen through a tint that deepens with the\n        // oil's depth, a sharp highlight from the small light, and the strip\n        // light's long reflection.\n        const nx = -(Ho[i + rt] - Ho[i + lf]) * 3.5, ny = -(Ho[i + dn] - Ho[i + up]) * 3.5, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        const nd = (nx * hx + ny * hy + hz) * nl;\n        const spec = nd > 0.9 ? ((nd - 0.9) / 0.1) ** 2 : 0;\n        const e = 2 * nl * (nx * 0.5 + ny * 0.85) * nl + (x - 32) / 90 + (y - 64) / 70, q = (e - band) / 0.14, q2 = (e - band2) / 0.1;\n        const s = min(1, spec) + 0.42 * exp(-q * q) + 0.28 * exp(-q2 * q2);\n        const dep = 0.3 + F[i], a = 1 - exp(-1.1 * dep);\n        const glow = (0.55 + 0.3 * tap(x * 0.6 + 70, y * 0.4 - t * 1.5)) * lift;\n        const orr = col[6] * glow * (1 - a) + col[9] * a * tk + s;\n        const og = col[7] * glow * (1 - a) + col[10] * a * tk + s;\n        const ob = col[8] * glow * (1 - a) + col[11] * a * tk + s;\n        r = r * (1 - w) + orr * w;\n        gg = gg * (1 - w) + og * w;\n        b = b * (1 - w) + ob * w;\n        // The wet rim: the band where the balm is turning, and the oil's\n        // edge against balm, a pale glassy line with a glint.\n        let rim = mm > 0 && mm \u003c 1 ? 4 * mm * (1 - mm) : 0;\n        if (mm >= 1 && (m[i + lf] \u003c 0.5 || m[i + rt] \u003c 0.5 || m[i + up] \u003c 0.5 || m[i + dn] \u003c 0.5)) rim = 0.8;\n        if (rim > 0) {\n          const k = 0.45 * rim;\n          r += (col[12] - r) * k + 0.1 * rim;\n          gg += (col[13] - gg) * k + 0.1 * rim;\n          b += (col[14] - b) * k + 0.1 * rim;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower."},{"name":"Warmth","min":0,"max":1,"about":"How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s."},{"name":"Grain","min":0,"max":1,"about":"The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting."}],"start":[0,2,0,0.06],"measures":{"motion":0.1343,"detail":0.0375,"edges":0.1005,"complexity":2.1868,"coverage":1,"colour":0.1701,"drift":0.1197},"knobResponse":[0.2675,0.0873,0.1368,0.0422]},{"slug":"climber","title":"Climber","family":"pixel","round":2,"note":"빨간 목도리를 맨 꼬마가 혼자서 끝없는 탑의 턱을 뛰어올라요. K4 를 돌리면 한낮에서 노을을 지나 횃불 켜진 밤이 돼요.","idea":"A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.","buttons":"K1 tap makes the climber jump now, and again in the air.","code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","layer":{"id":"layer-climber","type":"code","name":"climber","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The stone of the tower and its ledges; the climber keeps its own colours."},{"name":"Speed","min":0.3,"max":3.5,"about":"How fast the climber runs and jumps, and with it how fast the tower goes by."},{"name":"Gap","min":16,"max":34,"about":"How far apart the ledges are, from quick hops to long leaps with the climber high in the air."},{"name":"Sky","min":0,"max":1,"about":"The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit."}],"start":[0,2,16,0.06],"measures":{"motion":1.5193,"detail":0.0867,"edges":0.9308,"complexity":0.2662,"coverage":0.7278,"colour":0.1488,"drift":0.118},"knobResponse":[0.0827,0.1542,0.146,0.1338]},{"slug":"climbing-wall","title":"Climbing Wall","family":"sport","round":27,"note":"체육관의 리드 벽을 정면에서 봐요. 합판에 색깔별 루트가 박혀 있고, 클라이머가 스폿 빛을 받으며 손발을 하나씩 옮겨 오르다 퀵드로마다 로프를 걸어요. 꼭대기 앵커를 걸면 빌레이어가 내려 주고 둘이 자리를 바꿔요. K3 은 셋까지 나란히 오르게 하고, 누르면 클라이머가 떨어져 로프에 걸려요.","idea":"A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.","buttons":"K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.","code":"// ===== Patternflow pattern =====\n// Title:   Climbing Wall\n// Family:  sport\n// Idea:    A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after an indoor lead-climbing wall\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1\n//\n// Knob 1: Route. The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour.\n// Knob 2: Speed. At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall.\n// Knob 3: Climbers. One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour.\n// Knob 4: Light. House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes.\n// Buttons: K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.\n\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (u) => ((u = cl(u, 0, 1)), u * u * (3 - 2 * u));\nconst hyp = (x, y) => sqrt(x * x + y * y), F32 = (n) => new Float32Array(n);\nconst hex = (h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));\nconst blend = (o, c, k, a) => {\n  for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] * k - F[o + j]) * a;\n};\nconst hash = (i, j) => ((Math.imul(i * 7919 + j * 104729 + 17, 2654435761) >>> 8) & 1023) / 1024;\n\n// Rows of the mat and the kickboard. Each lane's bolt line LX: eight quickdraws\n// (the rope runs CLP under the bolt) and a lower-off ring.\nconst FL = 121, FT = FL - 0.5, KICK = 117, LX = [11, 32, 53], BOLT = [95, 84, 73, 62, 51, 40, 29, 18], CLP = 3.5, RING = 11;\n// A route: NH hand holds HS rows apart, left and right in turn, a foot chip\n// CHIP rows under each. A lane has two routes, one each side of its bolts.\nconst NH = 20, HY0 = 105, HS = 5, CHIP = 15;\n// The body in LEDs: arm, forearm, thigh, shin, hip to shoulders; hips standing.\nconst UA = 4.1, FA = 4.1, TH = 4.8, SN = 4.8, TOR = 6, STAND = FL - 10.05;\n// Route colours in Route's order with the lane and side each is set on.\nconst RC = \"3ceb6e ffd41e 288cff ff46aa ff7614 af5fff\".split(\" \").map(hex);\nconst RL = [1, 2, 0, 1, 2, 0], RS = [-1, -1, -1, 1, 1, 1], ROUTE = [[2, 5], [0, 3], [1, 4]];\nconst rcx = (r) => LX[RL[r]] + 0.5 + RS[r] * 5;\nconst lane = (P) => LX[P.l] + 0.5, bxOf = (P) => lane(P) - RS[P.r] * 3.5;\n// A rope a lane, two people a party: skin, hair, top, tights, harness, shoes,\n// chalk bag, 1 for a ponytail.\nconst ROPE = \"46d7ff ff7828 beff46\".split(\" \").map(hex);\nconst OUT = [\n  \"ecac84 c86032 ff6054 968cc4 ffc81e 8246d2 e6283c 1\", \"c88c64 ebc878 f5f5f0 3c60b4 96e628 f05a28 2878e6 0\",\n  \"ecb088 60301a 1ec8cd acb2c4 ff4696 464650 fad228 1\", \"a06e50 bebec4 facd32 466ed2 e63278 3c8cf0 3cb450 0\",\n  \"ecac84 f0dcaa 965ff0 c8c8ce ffc81e 288cf0 f0f0f0 1\", \"be825f 281e1a 46c864 a03c54 ff5a28 ebebeb c83cc8 0\",\n].map((s) => s.split(\" \").map((h, i) => (i \u003c 7 ? hex(h) : +h)));\n\n// The wall is built once, with the house light on it in L0.\nconst AL = F32(N * 3), EM = F32(N * 3), L0 = F32(N), MK = new Uint8Array(N);\nconst HX = F32(6 * NH), HY = F32(6 * NH), CX = F32(6 * NH), CY = F32(6 * NH);\n// Jug, crimp, sloper, pinch, big jug: LEDs as digit pairs, column + 2, row + 1.\nconst SHAPES = [\"112131122232\", \"112131\", \"2011213122\", \"203021312232\", \"1020300111213141122232\"];\n// Volumes, pyramids on a diamond: middle, half width, half height, colour.\nconst VOL = [[21.5, 46, 4.5, 7, \"9698a2\"], [43, 84, 4.5, 6.5, \"3c969c\"], [21.5, 100, 4, 5, \"c49664\"], [43, 26, 4, 6, \"d6d6dc\"], [1, 70, 3.5, 8, \"785496\"], [63, 52, 3.5, 7, \"9698a2\"]];\nconst STEEL = \"bebec8 ece8de dcd8d0 aab0bc\".split(\" \").map(hex);\n// Colour c times k on the wall, e of it glowing under UV.\nfunction px(x, y, c, k, e) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) (AL[o + j] = min(255, c[j] * k)), (EM[o + j] = AL[o + j] * e);\n  MK[y * W + x] = 1;\n}\nfunction shade(x, y, k) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL || MK[y * W + x]) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) AL[o + c] *= k;\n}\n// A hold, lit from above, and its shadow.\nfunction hold(x, y, t, c) {\n  const S = SHAPES[t];\n  for (let j = 0; j \u003c S.length; j += 2) shade(x + +S[j] - 2, y + +S[j + 1], 0.5), shade(x + +S[j] - 1, y + +S[j + 1], 0.72);\n  for (let j = 0; j \u003c S.length; j += 2) px(x + +S[j] - 2, y + +S[j + 1] - 1, c, [1.22, 1.08, 0.78][S[j + 1]] - 0.06 * (S[j] - 2), 0.55);\n}\n(function build() {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3;\n      let r, g, b, L = 0.85, e = 0;\n      if (y \u003c 4) {\n        // The ceiling: a truss, a lamp over each lane that is also a UV tube.\n        r = g = b = y === 1 ? ((x + 1) % 6 \u003c 2 ? 56 : 32) : y ? 9 : 14;\n        for (const l of LX) if ((y === 2 && abs(x - l) \u003c 2) || (y === 3 && x === l)) (e = x === l ? 1 : 0.6), (r = 255 * e), (g = 238 * e), (b = 210 * e);\n        (L = 1.47), (EM[o] = 175 * e), (EM[o + 1] = 100 * e), (EM[o + 2] = 255 * e);\n      } else if (y \u003c FL) {\n        // Plywood sheets 12 by 23, grain running up them. Seams and T-nuts darken it.\n        const qx = floor((x + 6) / 12), qy = floor((y - 4) / 23);\n        let k = (0.86 + 0.18 * hash(qx + 3, qy + 7)) * (0.9 + 0.14 * hash(x, qy) * (0.6 + 0.4 * sin(y * 0.2 + x)));\n        if ((x + 6) % 12 === 0 || (y - 4) % 23 === 22) k *= 0.62;\n        if (y % 4 === 1 && (x + (y >> 2) * 2) % 4 === 0) k *= 0.84;\n        if (y >= KICK) (k = y === KICK ? 0.7 : 1), (r = 50 * k), (g = 50 * k), (b = 56 * k);\n        else (r = 132 * k), (g = 101 * k), (b = 70 * k);\n        // Lamp light fanning down from the top, a wash over the floor.\n        L = 0.62 + 0.4 * ease((y - 86) / 34);\n        for (const l of LX) L += 0.95 * exp(-(((x - l) / (1.5 + 0.28 * y)) ** 2) - (y - 4) / 34) * ease((y - 3) / 6);\n      } else {\n        // Blue foam mats with seams; the front lip catches the light.\n        const k = (x % 16 === 7 ? 0.6 : 1) * (y === FL ? 1.35 : 0.88 + 0.03 * (y - FL));\n        (r = 34 * k), (g = 62 * k), (b = 140 * k);\n      }\n      (AL[o] = r), (AL[o + 1] = g), (AL[o + 2] = b), (L0[i] = L);\n    }\n  for (const [cx, cy, w, h, c] of VOL)\n    for (let y = floor(cy - h); y \u003c= cy + h; y++)\n      for (let x = floor(cx - w); x \u003c= cx + w; x++) {\n        const dx = (x + 0.5 - cx) / w, dy = (y + 0.5 - cy) / h;\n        if (abs(dx) + abs(dy) \u003c= 1) px(x, y, hex(c), (dy \u003c 0 ? 1.1 : 0.62) + (dx \u003c 0 ? 0.08 : -0.12), 0.08);\n      }\n  for (let y = FL - 1; y > 4; y--) for (let x = 0; x \u003c W; x++) if (MK[(y - 1) * W + x] && !MK[y * W + x]) shade(x, y, 0.55);\n  MK.fill(0);\n  for (let k = 0; k \u003c 6 * NH; k++) {\n    const r = floor(k / NH), i = k % NH, s = i & 1 ? 1 : -1, c = RC[r];\n    HX[k] = round(rcx(r) - 0.5 + s * (s === RS[r] ? 3.4 + 1.2 * hash(r, i) : 3 + 0.5 * hash(r, i)));\n    HY[k] = round(HY0 - HS * i + (hash(r + 5, i) - 0.5) * 1.6);\n    (CX[k] = round(HX[k] + s * 0.6 - 0.5)), (CY[k] = HY[k] + CHIP);\n    // The two start holds are taped.\n    hold(HX[k], HY[k], i \u003c 2 ? 0 : i === NH - 1 ? 4 : floor(hash(k, 11) * 5), c);\n    if (i \u003c 2) for (let j = 2; j \u003c 4; j++) px(HX[k] + s * j, HY[k] + j - 1, c, 0.8, 0.5);\n  }\n  // Quickdraws, a white sling between hanger and carabiner, and the anchors.\n  for (const l of LX) {\n    for (const b of BOLT) for (let j = 0; j \u003c 4; j++) px(l, b + j, STEEL[j], 1, j % 3 ? 0.7 : 0.1);\n    px(l - 1, 8, STEEL[0], 1, 0.1), px(l + 1, 8, STEEL[0], 1, 0.1), px(l, 9, STEEL[3], 1, 0.1), px(l, 10, STEEL[1], 1, 0.4);\n  }\n})();\n\n// A plan step: limb (hands 0 1, feet 2 3, 4 waits), target, which, seconds,\n// then what; LOOP brings the rope up with the hand.\nconst HOLD = 0, CHIPT = 1, BAG = 2, HARN = 3, DRAW = 4, ANCHOR = 5;\nconst PUFF = 1, CLIP = 2, ANCH = 3, GRAB = 4, LOOP = 5;\nconst START = 0, CLIMB = 1, LOWER = 2, LAND = 3, PULL = 4, SWAP = 5, FALL = 6;\nconst PC = 96, PRE = [17, 31, 4.5], SRX = 17, SRY = 28, TG = F32(2);\n\nconst party = (l) => ({ l, r: ROUTE[l][0], on: 0, c: 0, pt: 0, lhx: 0, lvx: 0, E: F32(8), plan: [], bl: 0, feed: 0, len: 0, pa: 0, pv: 0 });\n\nexport function setup(params) {\n  params.s = { P: [0, 1, 2].map(party), F: F32(N * 3), LB: F32(N * 3), pc: F32(PC * 5), init: 0, k4: 0.06, r0: 0, t: 0 };\n}\n\nfunction target(P, kind, k) {\n  const R = P.r * NH + k;\n  if (kind === HOLD) (TG[0] = HX[R] + 0.5), (TG[1] = HY[R] + 0.2);\n  else if (kind === CHIPT) (TG[0] = CX[R] + 1), (TG[1] = CY[R] + 0.1);\n  else if (kind \u003c DRAW) (TG[0] = P.hx + (kind === BAG ? 0.4 : 0)), (TG[1] = P.hy - (kind === BAG ? 0.6 : 1.2));\n  else (TG[0] = lane(P)), (TG[1] = kind === DRAW ? BOLT[k] + CLP : RING);\n}\nfunction aim(E, k, ...T) {\n  for (let j = 0; j \u003c 8; j++) E[j] += (T[j] - E[j]) * k;\n}\n\nfunction enter(P, ph) {\n  (P.ph = ph), (P.pt = 0), (P.plan.length = 0), (P.mv = -1);\n  if (ph !== START) return;\n  // Chalk each hand and set it on a taped start hold, then step on.\n  Object.assign(P, { hx: rcx(P.r), hy: STAND, iL: 0, iR: 1, seq: 0, nc: 0, anc: 0, loop: 0, hm: 0, vx: 0, vy: 0 });\n  P.E.set([P.hx - 2.5, STAND + 1, P.hx + 2.5, STAND + 1, P.hx - 1.15, FT, P.hx + 1.15, FT]);\n  for (const h of [0, 1]) P.plan.push([h, BAG, 0, 0.3], [4, 0, 0, 0.22, PUFF], [h, HOLD, h, 0.42, GRAB]);\n  P.plan.push([2, CHIPT, 0, 0.32], [3, CHIPT, 1, 0.32], [4, 0, 0, 0.2]);\n}\n\nfunction puff(S, x, y, n, sp) {\n  const p = S.pc, R = Math.random;\n  for (let k = 0; k \u003c PC * 5 && n > 0; k += 5) if (p[k + 4] \u003c= 0) (p[k] = x), (p[k + 1] = y), (p[k + 2] = (R() - 0.5) * 8 * sp), (p[k + 3] = (R() - 0.75) * 5 * sp), (p[k + 4] = 0.6 + 0.6 * R()), n--;\n}\n\nfunction advance(S, P, d) {\n  const E = P.E, m = P.mv, te = P.te;\n  P.u += d / P.dur;\n  if (m \u003c 4) {\n    target(P, P.mk, P.mi);\n    const e = ease(P.u), a = sin(PI * min(1, P.u));\n    E[m * 2] = mix(P.m0x, TG[0], e) + (m & 1 ? a : -a) * (m \u003c 2 ? 0.9 : 1.4);\n    E[m * 2 + 1] = mix(P.m0y, TG[1], e) - a * 0.7;\n  }\n  if (P.u \u003c 1) return;\n  P.mv = -1;\n  if (te === PUFF) puff(S, P.hx + 0.4, P.hy - 0.8, 8, 1);\n  else if (te === GRAB && Math.random() \u003c 0.4) puff(S, E[m * 2], E[m * 2 + 1], 2, 0.4);\n  else if (te === CLIP) P.nc++, (P.loop = 0);\n  else if (te === ANCH) (P.anc = 1), (P.loop = 0), enter(P, LOWER);\n}\n\n// Clip a draw level with her chest or the anchor at the top; else step a foot\n// up, then reach with that side's hand.\nfunction decide(P) {\n  const R = P.r * NH, pl = P.plan;\n  if (P.nc \u003c 8 && BOLT[P.nc] + CLP > P.hy - TOR - 1.5) {\n    const h = HY[R + P.iL] > HY[R + P.iR] ? 0 : 1;\n    pl.push([h, HARN, 0, 0.22], [h, DRAW, P.nc, 0.3, 0, LOOP], [4, 0, 0, 0.16, CLIP], [h, HOLD, h ? P.iR : P.iL, 0.24, GRAB]);\n  } else if (P.iL + 2 >= NH && P.iR + 2 >= NH) pl.push([1, HARN, 0, 0.22], [1, ANCHOR, 0, 0.36, 0, LOOP], [4, 0, 0, 0.3, ANCH]);\n  else {\n    const q = P.seq, h = q \u003c 2 ? 0 : 1, k = (h ? P.iR : P.iL) + 2;\n    P.seq = (q + 1) & 3;\n    if (k >= NH) return;\n    if (!(q & 1)) return pl.push([2 + h, CHIPT, k, 0.28], [4, 0, 0, 0.06]);\n    if (P.hm++ % 3 === 2) pl.push([h, BAG, 0, 0.24], [4, 0, 0, 0.22, PUFF]);\n    pl.push([h, HOLD, k, 0.34, GRAB], [4, 0, 0, 0.08]);\n    h ? (P.iR = k) : (P.iL = k);\n  }\n}\n\n// Back on after a fall or a change of route: the holds nearest her hips.\nfunction rejoin(P) {\n  const R = P.r * NH;\n  let i = 0;\n  for (let j = 2; j + 1 \u003c NH; j += 2) if (abs(CY[R + j] + CY[R + j + 1] - 12 - 2 * P.hy) \u003c abs(CY[R + i] + CY[R + i + 1] - 12 - 2 * P.hy)) i = j;\n  enter(P, CLIMB);\n  Object.assign(P, { iL: i, iR: i + 1, seq: 0, loop: 0, vx: 0, vy: 0 });\n  P.plan.push([1, HOLD, i + 1, 0.45, GRAB], [0, HOLD, i, 0.45, GRAB], [3, CHIPT, i + 1, 0.35], [2, CHIPT, i, 0.35], [4, 0, 0, 0.3]);\n}\nfunction fall(P) {\n  if (P.ph !== CLIMB) return;\n  P.R = P.nc ? hyp(P.hx - LX[P.l] - 0.5, P.hy - 1 - BOLT[P.nc - 1] - CLP) + 3 + (P.loop ? 4 : 0) : 0;\n  enter(P, FALL);\n  (P.vy = -8), (P.vx = 0), (P.loop = 0);\n}\n\n// The rope from the guide hand through the clipped draws to the climber.\nconst RP = F32(48);\nlet RLEN = 0;\nfunction path(P, gx, gy) {\n  let n = 0;\n  RLEN = 0;\n  const put = (x, y) => ((RP[n++] = x), (RP[n++] = y));\n  put(gx, gy);\n  for (let j = 0; j \u003c P.nc; j++) put(lane(P), BOLT[j] + CLP);\n  if (P.anc) put(lane(P), RING);\n  if (P.ph === PULL) put(P.ex, P.ey);\n  else {\n    if (P.loop) put(P.E[P.loop * 2 - 2], P.E[P.loop * 2 - 1]);\n    put(P.hx, P.hy - 1);\n  }\n  for (let j = 2; j \u003c n; j += 2) RLEN += hyp(RP[j] - RP[j - 2], RP[j + 1] - RP[j - 1]);\n  return n >> 1;\n}\n\nfunction stepParty(S, P, d) {\n  P.pt += d;\n  const E = P.E, ph = P.ph, x = P.hx, y = P.hy, k = 1 - exp(-d * 9);\n  if (ph \u003c= CLIMB) {\n    if (P.mv >= 0) advance(S, P, d);\n    if (P.mv \u003c 0 && P.ph === ph) {\n      const it = P.plan.shift();\n      if (it) {\n        (P.mv = it[0]), (P.mk = it[1]), (P.mi = it[2]), (P.dur = it[3]), (P.te = it[4] || 0), (P.u = 0);\n        if (P.mv \u003c 4) (P.m0x = E[P.mv * 2]), (P.m0y = E[P.mv * 2 + 1]);\n        if (it[5] === LOOP) P.loop = P.mv + 1;\n      } else if (ph === START) P.ph = CLIMB;\n      else decide(P);\n    }\n    // Hips where all four limbs reach, hanging on the arms and off the moving one.\n    const lo = max(E[5], E[7]) - 9.3, hi = min(E[1], E[3]) + 8 + TOR;\n    let ty = ((E[5] + E[7]) / 2 - 7 + hi) / 2, tx = 0.55 * ((E[4] + E[6]) / 2) + 0.45 * ((E[0] + E[2]) / 2);\n    ty = lo \u003c= hi ? cl(ty, lo, hi) : (lo + hi) / 2;\n    if (P.mv >= 0 && P.mv \u003c 4) tx -= (P.mv & 1 ? 1 : -1) * 0.7;\n    if (P.ph === ph) (P.hx += (tx - x) * k), (P.hy += (ty - y) * k);\n  } else if (ph === LOWER) {\n    // Sat in her harness and walking her feet down the wall.\n    P.hy = min(STAND, y + 12 * d * ease(P.pt * 1.5));\n    P.hx += (rcx(P.r) - x) * (1 - exp(-d * 1.5));\n    const f = P.hy * 0.45;\n    aim(E, k, x - 0.4, y - TOR - 1.8, x + 0.6, y - TOR - 3.6, x - 3.2, y + 5.3 - 1.6 * max(0, sin(f)), x + 3.2, y + 5.3 - 1.6 * max(0, -sin(f)));\n    if (P.hy >= STAND - 0.01) enter(P, LAND);\n  } else if (ph === LAND || ph === PULL) {\n    // Down, she unties and the belayer pulls the rope through.\n    P.hy += (STAND - y) * k;\n    const u = ph === LAND && P.pt > 0.5 && P.pt \u003c 1.3;\n    aim(E, k, x + (u ? -0.8 : -2.5), y + (u ? -1 : 1), x + (u ? 0.8 : 2.5), y + (u ? -1.3 : 1), x - 1.15, FT, x + 1.15, FT);\n    if (ph === LAND && P.pt > 1.4) enter(P, PULL), (P.ex = x), (P.ey = y - 1), (P.pull = 0);\n    if (ph === PULL && (P.pull += 110 * d) > P.len + 2) enter(P, SWAP);\n  } else if (ph === SWAP) {\n    if (P.pt > 1.6) (P.c ^= 1), enter(P, START);\n  } else {\n    // Falling until the rope from the last draw comes tight, a stretchy catch.\n    P.vy += 150 * d;\n    if (P.nc) {\n      const dx = x - LX[P.l] - 0.5, dy = y - 1 - BOLT[P.nc - 1] - CLP, L = hyp(dx, dy) + 1e-6, e = L - P.R;\n      if (e > 0) {\n        const ux = dx / L, uy = dy / L, f = (80 * e + 8 * (P.vx * ux + P.vy * uy)) * d;\n        (P.vx -= f * ux), (P.vy -= f * uy), (P.bl = max(P.bl, min(3, e)));\n      }\n    }\n    (P.hx += P.vx * d), (P.hy += P.vy * d);\n    if (P.hy >= STAND) {\n      (P.hy = STAND), (P.vy = P.vx = 0);\n      if (!P.nc) return enter(P, START);\n    }\n    const fl = P.pt \u003c 0.45, X = P.hx, Y = P.hy - TOR;\n    aim(E, 1 - exp(-d * (fl ? 6 : 4)), X - (fl ? 3.2 : 0.4), Y - (fl ? 4.5 : 2.5), X + (fl ? 3.2 : 0.5), Y - (fl ? 4.5 : 4.2), X - 2.7, P.hy + (fl ? 7.5 : 4.4), X + 2.7, P.hy + (fl ? 7 : 4.4));\n    if (P.pt > 2.4) rejoin(P);\n  }\n  P.bl *= exp(-d * 1.8);\n  // Rope paid out moves the belayer's guide hand; the ponytail swings.\n  const L = (path(P, bxOf(P), STAND - 4), RLEN), vx = (P.hx - P.lhx) / max(d, 1e-4);\n  if (P.ph \u003c= CLIMB) P.feed += abs(L - P.len);\n  if (P.ph !== PULL) P.len = L;\n  P.pv += (-28 * P.pa - 2.6 * P.pv) * d - cl(vx - P.lvx, -20, 20) * 0.04;\n  (P.pa = cl(P.pa + P.pv * d, -1, 1)), (P.lhx = P.hx), (P.lvx = vx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const r0 = min(5, floor(cl(k[0], 0, 1) * 6)), np = round(cl(k[2], 1, 3)), l0 = RL[r0], sp = cl(k[1], 0.2, 3);\n  (S.k4 = cl(k[3], -1, 1)), (S.r0 = r0);\n  for (const P of S.P) {\n    const r = P.l === l0 ? r0 : ROUTE[P.l][RS[r0] > 0 ? 1 : 0], j = (P.l - l0 + 3) % 3;\n    if (j >= np) P.on = 0;\n    else if (!P.on) {\n      (P.on = 1), (P.r = r), enter(P, START);\n      // Each party opens some way into its climb, further at a faster Speed.\n      if (!S.init) for (let n = PRE[j] * 30; n > 0; n--) stepParty(S, P, (sp / 2) ** 1.6 / 30);\n    } else if (P.r !== r) (P.r = r), P.ph === CLIMB ? rejoin(P) : P.ph === START && enter(P, START);\n  }\n  if (!S.init) S.pc.fill(0), (S.init = 1);\n  if (input.btnPressed && input.btnPressed[0]) fall(S.P[l0]);\n  const d = (cl(dt || 0, 0, 0.1) * sp) / 2, p = S.pc;\n  S.t += d;\n  for (const P of S.P) if (P.on) stepParty(S, P, d);\n  for (let j = 0, e = exp(-2 * d); j \u003c PC * 5; j += 5) if (p[j + 4] > 0) (p[j] += p[j + 2] * d), (p[j + 1] += p[j + 3] * d), (p[j + 2] *= e), (p[j + 3] = p[j + 3] * e + 2 * d), (p[j + 4] -= 0.6 * d);\n}\n\nlet F = null, LB = null;\nfunction splat(x, y, c, k, a) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1);\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) blend((yy * W + xx) * 3, c, k, (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy) * a);\n  }\n}\nconst lightAt = (x, y) => {\n  const o = (cl(floor(y), 0, H - 1) * W + cl(floor(x), 0, W - 1)) * 3;\n  return cl(0.3 + 0.35 * (LB[o] + LB[o + 1]), 0.62, 1.2);\n};\n// A rope span, slack spans sagging; the weave's flecks ride with the rope.\nfunction span(x0, y0, x1, y1, sag, s0, lim, rc, lf) {\n  const L = hyp(x1 - x0, y1 - y0), n = ceil(L * 2.2) + 1, mx = (x0 + x1) / 2 + sag * 0.3, my = (y0 + y1) / 2 + sag * 2;\n  for (let i = 0; i \u003c= n; i++) {\n    const u = i / n, s = s0 + u * L, q = s - lim + 1000, a = (1 - u) * (1 - u), b = 2 * u * (1 - u), c = u * u;\n    if (s > lim) break;\n    const w = q * 0.2 - floor(q * 0.2) \u003c 0.16;\n    splat(a * x0 + b * mx + c * x1, a * y0 + b * my + c * y1, w ? STEEL[1] : rc, w ? lf : (0.74 + 0.26 * cos(q * 2.3)) * lf, 0.9);\n  }\n  return s0 + L;\n}\n\n// A person from behind, facing the wall: hips at hx, hy, hands and feet in E.\nconst PT = F32(30 * 6), BE = F32(8);\nlet NP = 0, KX = 0, KY = 0, EX = 0, EY = 0;\nconst cap = (...a) => (PT.set(a, NP * 6), NP++);\n// Two-bone reach; elbows bend out and down, knees out and up.\nfunction ik(ax, ay, bx, by, l1, l2, sg, up) {\n  let dx = bx - ax, dy = by - ay, L = hyp(dx, dy) + 1e-6;\n  const Lm = l1 + l2 - 0.05;\n  if (L > Lm) (bx = ax + (dx / L) * Lm), (by = ay + (dy / L) * Lm), (dx = bx - ax), (dy = by - ay), (L = Lm);\n  const a = (l1 * l1 - l2 * l2 + L * L) / (2 * L), h = sqrt(max(0, l1 * l1 - a * a)), ux = dx / L, uy = dy / L, f = -uy * sg + up * 0.3 * ux \u003c 0 ? -h : h;\n  (KX = ax + ux * a - uy * f), (KY = ay + uy * a + ux * f), (EX = bx), (EY = by);\n}\nfunction person(hx, hy, E, o, lf, pa) {\n  NP = 0;\n  const sx = hx + 0.2 * ((E[0] + E[2]) / 2 - hx), sy = hy - TOR;\n  for (let s = -1; s \u003c 2; s += 2) {\n    const j = s + 1;\n    ik(hx + s * 1.15, hy + 0.4, E[4 + j], E[5 + j], TH, SN, s, -1);\n    cap(hx + s * 1.15, hy + 0.4, KX, KY, 1.1, 3), cap(KX, KY, EX, EY, 0.83, 3), cap(EX, EY, EX + s * 0.9, EY + 0.3, 0.7, 5);\n  }\n  cap(hx - 1.1, hy, hx + 1.1, hy, 1.25, 3), cap(hx, hy - 1, sx, sy + 1, 1.95, 2), cap(sx - 2.2, sy + 0.7, sx + 2.2, sy + 0.7, 1.15, 2);\n  cap(hx - 1.8, hy - 1.1, hx + 1.8, hy - 1.1, 0.55, 4), cap(hx + 0.3, hy - 1.2, hx + 0.3, hy - 0.1, 0.8, 6);\n  for (let s = -1; s \u003c 2; s += 2) {\n    ik(sx + s * 2.3, sy + 0.8, E[s + 1], E[s + 2], UA, FA, s, 1);\n    cap(sx + s * 2.3, sy + 0.8, KX, KY, 0.76, 0), cap(KX, KY, EX, EY, 0.64, 0), cap(EX, EY, EX, EY - 0.2, 0.75, 0);\n  }\n  cap(sx, sy + 0.2, sx, sy - 1.2, 0.7, 0), cap(sx, sy - 3, sx, sy - 3.1, 1.95, 1);\n  if (o[7]) cap(sx, sy - 3, sx + 3.7 * sin(pa), sy - 3 + 4.1 * cos(pa), 0.63, 1);\n  // A dark rim round her, holds near her greyed, then her.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let y = max(0, floor(hy - 21)); y \u003c min(H, hy + 16); y++)\n      for (let x = max(0, floor(hx - 13)); x \u003c min(W, hx + 14); x++) {\n        const qx = x + 0.5, qy = y + 0.5, i = (y * W + x) * 3;\n        let dm = 9;\n        for (let j = 0; j \u003c NP * 6; j += 6) {\n          const ax = PT[j], ay = PT[j + 1], dx = PT[j + 2] - ax, dy = PT[j + 3] - ay, r = PT[j + 4];\n          if (abs(qx - ax - dx / 2) > abs(dx) / 2 + r + 3 || abs(qy - ay - dy / 2) > abs(dy) / 2 + r + 3) continue;\n          const tt = cl(((qx - ax) * dx + (qy - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1), e = hyp(qx - ax - dx * tt, qy - ay - dy * tt) - r;\n          if (pass && e \u003c 0.5) blend(i, o[PT[j + 5]], lf, min(1, 0.5 - e));\n          dm = min(dm, e);\n        }\n        const g = ease((dm - 1.3) / 1.4), m = ((F[i] + F[i + 1] + F[i + 2]) / 3) * 0.6;\n        if (!pass && g \u003c 1) for (let c = 0; c \u003c 3; c++) F[i + c] = mix(m, F[i + c], g) * (0.25 + 0.75 * g);\n      }\n}\nfunction walk(x, ph, o, lf) {\n  const y = STAND - 0.3 * abs(sin(ph)), s = sin(ph), s2 = sin(ph + 1.6);\n  BE.set([x - 2.5 - 0.6 * s, y + 0.8, x + 2.5 - 0.6 * s, y + 0.8, x - 1.3 + 0.8 * s, FT - 1.2 * max(0, cos(ph)), x + 1.3 + 0.8 * s2, FT - 1.2 * max(0, cos(ph + 1.6))]);\n  person(x, y, BE, o, lf, 0);\n}\n\n// A party: rope pile, rope, climber, then the belayer in front.\nfunction scene(S, P, t) {\n  const gs = RS[P.r], bx = bxOf(P), cx = rcx(P.r), A = OUT[P.l * 2 + P.c], B = OUT[P.l * 2 + 1 - P.c], rc = ROPE[P.l];\n  const lfB = lightAt(bx, FL - 10), px0 = bx - gs * 2.6;\n  for (let j = 0; j \u003c 22; j++) splat(px0 + 2.4 * cos(j * 0.6) * (1 - j * 0.02), FL + 3.2 + 0.9 * sin(j * 0.6), rc, 0.8 * lfB, 0.8);\n  if (P.ph === SWAP) {\n    const e = ease(P.pt / 1.6), ph = P.pt * 9;\n    return walk(mix(cx, bx, e), ph, A, lfB), walk(mix(bx, cx, e), ph + PI, B, lfB);\n  }\n  // The belayer: guide hand up the rope feeding it out, brake hand low.\n  const hy = STAND - P.bl, hx = bx + gs * P.bl * 0.4, gi = gs > 0 ? 2 : 0, bi = 2 - gi;\n  let gy = hy - 3.4 - 1.8 * abs(sin(P.feed * 0.35)), by = hy + 0.8;\n  if (P.ph === PULL) (gy = hy - 3 - 2.6 * abs(sin(t * 6))), (by = hy - 3 - 2.6 * abs(cos(t * 6)));\n  else if (P.ph === LOWER) by = hy + 0.6 + 0.8 * sin(t * 5);\n  (BE[gi] = hx + gs * 0.7), (BE[gi + 1] = gy), (BE[bi] = hx - gs * 2.2), (BE[bi + 1] = by);\n  (BE[4] = hx - 1.15), (BE[6] = hx + 1.15), (BE[5] = BE[7] = min(FT, hy + 9.5));\n  span(BE[bi], by, px0, FL + 2.5, 1.2, 0, 1e9, rc, lightAt(BE[bi], by + 2));\n  const n = path(P, BE[gi], gy), lim = RLEN - (P.ph === PULL ? P.pull : 0), taut = P.ph === FALL || P.ph === LOWER || P.ph === PULL;\n  for (let j = 1, s = 0; j \u003c n; j++) {\n    const sag = j === 1 ? (n === 2 && !taut ? 2.5 : 1.5) : j === n - 1 && !taut ? 1 : 0;\n    s = span(RP[j * 2 - 2], RP[j * 2 - 1], RP[j * 2], RP[j * 2 + 1], sag, s, lim, rc, lightAt(RP[j * 2], RP[j * 2 + 1]));\n  }\n  person(P.hx, P.hy, P.E, A, lightAt(P.hx, P.hy - 4), P.pa);\n  person(hx, hy, BE, B, lfB, 0.2);\n}\n\n// House light tinted by the route, a follow spot with a gel on each climber.\nfunction light(S) {\n  const k = S.k4, hs = k \u003c 0 ? mix(0.68, 1.12, -k) : mix(0.68, 0.06, k), lv = k \u003c 0 ? mix(1, 0.35, -k) : mix(1, 1.2, k), u = max(0, k);\n  const T = [1, 0.95, 0.86].map((w, j) => mix(w, RC[S.r0][j] / 255, 0.14) * hs), V = [0.1 * u, 0.04 * u, 0.24 * u];\n  for (let o = 0; o \u003c N * 3; o++) LB[o] = L0[(o / 3) | 0] * T[o % 3];\n  for (const P of S.P) {\n    if (!P.on) continue;\n    const sx = P.hx, sy = P.hy - 4, G = [1, 0.96, 0.9].map((w, j) => lv * mix(w, RC[P.r][j] / 255, 0.35));\n    for (let y = max(4, floor(sy - SRY)); y \u003c min(FL, sy + SRY); y++)\n      for (let x = max(0, floor(sx - SRX)); x \u003c min(W, sx + SRX); x++) {\n        const q = ((y + 0.5 - sy) / SRY) ** 2 + ((x + 0.5 - sx) / SRX) ** 2, o = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3 && q \u003c 1; c++) LB[o + c] += (1 - q) * (1 - q) * G[c];\n      }\n  }\n  for (let o = 0; o \u003c N * 3; o++) F[o] = AL[o] * (LB[o] + V[o % 3]) + EM[o] * u;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  (F = S.F), (LB = S.LB);\n  light(S);\n  for (const P of S.P) if (P.on) scene(S, P, S.t);\n  const p = S.pc, u = max(0, S.k4);\n  for (let j = 0, C = [240, 240 - 40 * u, 236 + 19 * u]; j \u003c PC * 5; j += 5) if (p[j + 4] > 0) splat(p[j], p[j + 1], C, 1, min(1, p[j + 4]) * 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-climbing-wall","type":"code","name":"climbing-wall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Climbing Wall\n// Family:  sport\n// Idea:    A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after an indoor lead-climbing wall\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1\n//\n// Knob 1: Route. The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour.\n// Knob 2: Speed. At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall.\n// Knob 3: Climbers. One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour.\n// Knob 4: Light. House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes.\n// Buttons: K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.\n\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (u) => ((u = cl(u, 0, 1)), u * u * (3 - 2 * u));\nconst hyp = (x, y) => sqrt(x * x + y * y), F32 = (n) => new Float32Array(n);\nconst hex = (h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));\nconst blend = (o, c, k, a) => {\n  for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] * k - F[o + j]) * a;\n};\nconst hash = (i, j) => ((Math.imul(i * 7919 + j * 104729 + 17, 2654435761) >>> 8) & 1023) / 1024;\n\n// Rows of the mat and the kickboard. Each lane's bolt line LX: eight quickdraws\n// (the rope runs CLP under the bolt) and a lower-off ring.\nconst FL = 121, FT = FL - 0.5, KICK = 117, LX = [11, 32, 53], BOLT = [95, 84, 73, 62, 51, 40, 29, 18], CLP = 3.5, RING = 11;\n// A route: NH hand holds HS rows apart, left and right in turn, a foot chip\n// CHIP rows under each. A lane has two routes, one each side of its bolts.\nconst NH = 20, HY0 = 105, HS = 5, CHIP = 15;\n// The body in LEDs: arm, forearm, thigh, shin, hip to shoulders; hips standing.\nconst UA = 4.1, FA = 4.1, TH = 4.8, SN = 4.8, TOR = 6, STAND = FL - 10.05;\n// Route colours in Route's order with the lane and side each is set on.\nconst RC = \"3ceb6e ffd41e 288cff ff46aa ff7614 af5fff\".split(\" \").map(hex);\nconst RL = [1, 2, 0, 1, 2, 0], RS = [-1, -1, -1, 1, 1, 1], ROUTE = [[2, 5], [0, 3], [1, 4]];\nconst rcx = (r) => LX[RL[r]] + 0.5 + RS[r] * 5;\nconst lane = (P) => LX[P.l] + 0.5, bxOf = (P) => lane(P) - RS[P.r] * 3.5;\n// A rope a lane, two people a party: skin, hair, top, tights, harness, shoes,\n// chalk bag, 1 for a ponytail.\nconst ROPE = \"46d7ff ff7828 beff46\".split(\" \").map(hex);\nconst OUT = [\n  \"ecac84 c86032 ff6054 968cc4 ffc81e 8246d2 e6283c 1\", \"c88c64 ebc878 f5f5f0 3c60b4 96e628 f05a28 2878e6 0\",\n  \"ecb088 60301a 1ec8cd acb2c4 ff4696 464650 fad228 1\", \"a06e50 bebec4 facd32 466ed2 e63278 3c8cf0 3cb450 0\",\n  \"ecac84 f0dcaa 965ff0 c8c8ce ffc81e 288cf0 f0f0f0 1\", \"be825f 281e1a 46c864 a03c54 ff5a28 ebebeb c83cc8 0\",\n].map((s) => s.split(\" \").map((h, i) => (i \u003c 7 ? hex(h) : +h)));\n\n// The wall is built once, with the house light on it in L0.\nconst AL = F32(N * 3), EM = F32(N * 3), L0 = F32(N), MK = new Uint8Array(N);\nconst HX = F32(6 * NH), HY = F32(6 * NH), CX = F32(6 * NH), CY = F32(6 * NH);\n// Jug, crimp, sloper, pinch, big jug: LEDs as digit pairs, column + 2, row + 1.\nconst SHAPES = [\"112131122232\", \"112131\", \"2011213122\", \"203021312232\", \"1020300111213141122232\"];\n// Volumes, pyramids on a diamond: middle, half width, half height, colour.\nconst VOL = [[21.5, 46, 4.5, 7, \"9698a2\"], [43, 84, 4.5, 6.5, \"3c969c\"], [21.5, 100, 4, 5, \"c49664\"], [43, 26, 4, 6, \"d6d6dc\"], [1, 70, 3.5, 8, \"785496\"], [63, 52, 3.5, 7, \"9698a2\"]];\nconst STEEL = \"bebec8 ece8de dcd8d0 aab0bc\".split(\" \").map(hex);\n// Colour c times k on the wall, e of it glowing under UV.\nfunction px(x, y, c, k, e) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) (AL[o + j] = min(255, c[j] * k)), (EM[o + j] = AL[o + j] * e);\n  MK[y * W + x] = 1;\n}\nfunction shade(x, y, k) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL || MK[y * W + x]) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) AL[o + c] *= k;\n}\n// A hold, lit from above, and its shadow.\nfunction hold(x, y, t, c) {\n  const S = SHAPES[t];\n  for (let j = 0; j \u003c S.length; j += 2) shade(x + +S[j] - 2, y + +S[j + 1], 0.5), shade(x + +S[j] - 1, y + +S[j + 1], 0.72);\n  for (let j = 0; j \u003c S.length; j += 2) px(x + +S[j] - 2, y + +S[j + 1] - 1, c, [1.22, 1.08, 0.78][S[j + 1]] - 0.06 * (S[j] - 2), 0.55);\n}\n(function build() {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3;\n      let r, g, b, L = 0.85, e = 0;\n      if (y \u003c 4) {\n        // The ceiling: a truss, a lamp over each lane that is also a UV tube.\n        r = g = b = y === 1 ? ((x + 1) % 6 \u003c 2 ? 56 : 32) : y ? 9 : 14;\n        for (const l of LX) if ((y === 2 && abs(x - l) \u003c 2) || (y === 3 && x === l)) (e = x === l ? 1 : 0.6), (r = 255 * e), (g = 238 * e), (b = 210 * e);\n        (L = 1.47), (EM[o] = 175 * e), (EM[o + 1] = 100 * e), (EM[o + 2] = 255 * e);\n      } else if (y \u003c FL) {\n        // Plywood sheets 12 by 23, grain running up them. Seams and T-nuts darken it.\n        const qx = floor((x + 6) / 12), qy = floor((y - 4) / 23);\n        let k = (0.86 + 0.18 * hash(qx + 3, qy + 7)) * (0.9 + 0.14 * hash(x, qy) * (0.6 + 0.4 * sin(y * 0.2 + x)));\n        if ((x + 6) % 12 === 0 || (y - 4) % 23 === 22) k *= 0.62;\n        if (y % 4 === 1 && (x + (y >> 2) * 2) % 4 === 0) k *= 0.84;\n        if (y >= KICK) (k = y === KICK ? 0.7 : 1), (r = 50 * k), (g = 50 * k), (b = 56 * k);\n        else (r = 132 * k), (g = 101 * k), (b = 70 * k);\n        // Lamp light fanning down from the top, a wash over the floor.\n        L = 0.62 + 0.4 * ease((y - 86) / 34);\n        for (const l of LX) L += 0.95 * exp(-(((x - l) / (1.5 + 0.28 * y)) ** 2) - (y - 4) / 34) * ease((y - 3) / 6);\n      } else {\n        // Blue foam mats with seams; the front lip catches the light.\n        const k = (x % 16 === 7 ? 0.6 : 1) * (y === FL ? 1.35 : 0.88 + 0.03 * (y - FL));\n        (r = 34 * k), (g = 62 * k), (b = 140 * k);\n      }\n      (AL[o] = r), (AL[o + 1] = g), (AL[o + 2] = b), (L0[i] = L);\n    }\n  for (const [cx, cy, w, h, c] of VOL)\n    for (let y = floor(cy - h); y \u003c= cy + h; y++)\n      for (let x = floor(cx - w); x \u003c= cx + w; x++) {\n        const dx = (x + 0.5 - cx) / w, dy = (y + 0.5 - cy) / h;\n        if (abs(dx) + abs(dy) \u003c= 1) px(x, y, hex(c), (dy \u003c 0 ? 1.1 : 0.62) + (dx \u003c 0 ? 0.08 : -0.12), 0.08);\n      }\n  for (let y = FL - 1; y > 4; y--) for (let x = 0; x \u003c W; x++) if (MK[(y - 1) * W + x] && !MK[y * W + x]) shade(x, y, 0.55);\n  MK.fill(0);\n  for (let k = 0; k \u003c 6 * NH; k++) {\n    const r = floor(k / NH), i = k % NH, s = i & 1 ? 1 : -1, c = RC[r];\n    HX[k] = round(rcx(r) - 0.5 + s * (s === RS[r] ? 3.4 + 1.2 * hash(r, i) : 3 + 0.5 * hash(r, i)));\n    HY[k] = round(HY0 - HS * i + (hash(r + 5, i) - 0.5) * 1.6);\n    (CX[k] = round(HX[k] + s * 0.6 - 0.5)), (CY[k] = HY[k] + CHIP);\n    // The two start holds are taped.\n    hold(HX[k], HY[k], i \u003c 2 ? 0 : i === NH - 1 ? 4 : floor(hash(k, 11) * 5), c);\n    if (i \u003c 2) for (let j = 2; j \u003c 4; j++) px(HX[k] + s * j, HY[k] + j - 1, c, 0.8, 0.5);\n  }\n  // Quickdraws, a white sling between hanger and carabiner, and the anchors.\n  for (const l of LX) {\n    for (const b of BOLT) for (let j = 0; j \u003c 4; j++) px(l, b + j, STEEL[j], 1, j % 3 ? 0.7 : 0.1);\n    px(l - 1, 8, STEEL[0], 1, 0.1), px(l + 1, 8, STEEL[0], 1, 0.1), px(l, 9, STEEL[3], 1, 0.1), px(l, 10, STEEL[1], 1, 0.4);\n  }\n})();\n\n// A plan step: limb (hands 0 1, feet 2 3, 4 waits), target, which, seconds,\n// then what; LOOP brings the rope up with the hand.\nconst HOLD = 0, CHIPT = 1, BAG = 2, HARN = 3, DRAW = 4, ANCHOR = 5;\nconst PUFF = 1, CLIP = 2, ANCH = 3, GRAB = 4, LOOP = 5;\nconst START = 0, CLIMB = 1, LOWER = 2, LAND = 3, PULL = 4, SWAP = 5, FALL = 6;\nconst PC = 96, PRE = [17, 31, 4.5], SRX = 17, SRY = 28, TG = F32(2);\n\nconst party = (l) => ({ l, r: ROUTE[l][0], on: 0, c: 0, pt: 0, lhx: 0, lvx: 0, E: F32(8), plan: [], bl: 0, feed: 0, len: 0, pa: 0, pv: 0 });\n\nexport function setup(params) {\n  params.s = { P: [0, 1, 2].map(party), F: F32(N * 3), LB: F32(N * 3), pc: F32(PC * 5), init: 0, k4: 0.06, r0: 0, t: 0 };\n}\n\nfunction target(P, kind, k) {\n  const R = P.r * NH + k;\n  if (kind === HOLD) (TG[0] = HX[R] + 0.5), (TG[1] = HY[R] + 0.2);\n  else if (kind === CHIPT) (TG[0] = CX[R] + 1), (TG[1] = CY[R] + 0.1);\n  else if (kind \u003c DRAW) (TG[0] = P.hx + (kind === BAG ? 0.4 : 0)), (TG[1] = P.hy - (kind === BAG ? 0.6 : 1.2));\n  else (TG[0] = lane(P)), (TG[1] = kind === DRAW ? BOLT[k] + CLP : RING);\n}\nfunction aim(E, k, ...T) {\n  for (let j = 0; j \u003c 8; j++) E[j] += (T[j] - E[j]) * k;\n}\n\nfunction enter(P, ph) {\n  (P.ph = ph), (P.pt = 0), (P.plan.length = 0), (P.mv = -1);\n  if (ph !== START) return;\n  // Chalk each hand and set it on a taped start hold, then step on.\n  Object.assign(P, { hx: rcx(P.r), hy: STAND, iL: 0, iR: 1, seq: 0, nc: 0, anc: 0, loop: 0, hm: 0, vx: 0, vy: 0 });\n  P.E.set([P.hx - 2.5, STAND + 1, P.hx + 2.5, STAND + 1, P.hx - 1.15, FT, P.hx + 1.15, FT]);\n  for (const h of [0, 1]) P.plan.push([h, BAG, 0, 0.3], [4, 0, 0, 0.22, PUFF], [h, HOLD, h, 0.42, GRAB]);\n  P.plan.push([2, CHIPT, 0, 0.32], [3, CHIPT, 1, 0.32], [4, 0, 0, 0.2]);\n}\n\nfunction puff(S, x, y, n, sp) {\n  const p = S.pc, R = Math.random;\n  for (let k = 0; k \u003c PC * 5 && n > 0; k += 5) if (p[k + 4] \u003c= 0) (p[k] = x), (p[k + 1] = y), (p[k + 2] = (R() - 0.5) * 8 * sp), (p[k + 3] = (R() - 0.75) * 5 * sp), (p[k + 4] = 0.6 + 0.6 * R()), n--;\n}\n\nfunction advance(S, P, d) {\n  const E = P.E, m = P.mv, te = P.te;\n  P.u += d / P.dur;\n  if (m \u003c 4) {\n    target(P, P.mk, P.mi);\n    const e = ease(P.u), a = sin(PI * min(1, P.u));\n    E[m * 2] = mix(P.m0x, TG[0], e) + (m & 1 ? a : -a) * (m \u003c 2 ? 0.9 : 1.4);\n    E[m * 2 + 1] = mix(P.m0y, TG[1], e) - a * 0.7;\n  }\n  if (P.u \u003c 1) return;\n  P.mv = -1;\n  if (te === PUFF) puff(S, P.hx + 0.4, P.hy - 0.8, 8, 1);\n  else if (te === GRAB && Math.random() \u003c 0.4) puff(S, E[m * 2], E[m * 2 + 1], 2, 0.4);\n  else if (te === CLIP) P.nc++, (P.loop = 0);\n  else if (te === ANCH) (P.anc = 1), (P.loop = 0), enter(P, LOWER);\n}\n\n// Clip a draw level with her chest or the anchor at the top; else step a foot\n// up, then reach with that side's hand.\nfunction decide(P) {\n  const R = P.r * NH, pl = P.plan;\n  if (P.nc \u003c 8 && BOLT[P.nc] + CLP > P.hy - TOR - 1.5) {\n    const h = HY[R + P.iL] > HY[R + P.iR] ? 0 : 1;\n    pl.push([h, HARN, 0, 0.22], [h, DRAW, P.nc, 0.3, 0, LOOP], [4, 0, 0, 0.16, CLIP], [h, HOLD, h ? P.iR : P.iL, 0.24, GRAB]);\n  } else if (P.iL + 2 >= NH && P.iR + 2 >= NH) pl.push([1, HARN, 0, 0.22], [1, ANCHOR, 0, 0.36, 0, LOOP], [4, 0, 0, 0.3, ANCH]);\n  else {\n    const q = P.seq, h = q \u003c 2 ? 0 : 1, k = (h ? P.iR : P.iL) + 2;\n    P.seq = (q + 1) & 3;\n    if (k >= NH) return;\n    if (!(q & 1)) return pl.push([2 + h, CHIPT, k, 0.28], [4, 0, 0, 0.06]);\n    if (P.hm++ % 3 === 2) pl.push([h, BAG, 0, 0.24], [4, 0, 0, 0.22, PUFF]);\n    pl.push([h, HOLD, k, 0.34, GRAB], [4, 0, 0, 0.08]);\n    h ? (P.iR = k) : (P.iL = k);\n  }\n}\n\n// Back on after a fall or a change of route: the holds nearest her hips.\nfunction rejoin(P) {\n  const R = P.r * NH;\n  let i = 0;\n  for (let j = 2; j + 1 \u003c NH; j += 2) if (abs(CY[R + j] + CY[R + j + 1] - 12 - 2 * P.hy) \u003c abs(CY[R + i] + CY[R + i + 1] - 12 - 2 * P.hy)) i = j;\n  enter(P, CLIMB);\n  Object.assign(P, { iL: i, iR: i + 1, seq: 0, loop: 0, vx: 0, vy: 0 });\n  P.plan.push([1, HOLD, i + 1, 0.45, GRAB], [0, HOLD, i, 0.45, GRAB], [3, CHIPT, i + 1, 0.35], [2, CHIPT, i, 0.35], [4, 0, 0, 0.3]);\n}\nfunction fall(P) {\n  if (P.ph !== CLIMB) return;\n  P.R = P.nc ? hyp(P.hx - LX[P.l] - 0.5, P.hy - 1 - BOLT[P.nc - 1] - CLP) + 3 + (P.loop ? 4 : 0) : 0;\n  enter(P, FALL);\n  (P.vy = -8), (P.vx = 0), (P.loop = 0);\n}\n\n// The rope from the guide hand through the clipped draws to the climber.\nconst RP = F32(48);\nlet RLEN = 0;\nfunction path(P, gx, gy) {\n  let n = 0;\n  RLEN = 0;\n  const put = (x, y) => ((RP[n++] = x), (RP[n++] = y));\n  put(gx, gy);\n  for (let j = 0; j \u003c P.nc; j++) put(lane(P), BOLT[j] + CLP);\n  if (P.anc) put(lane(P), RING);\n  if (P.ph === PULL) put(P.ex, P.ey);\n  else {\n    if (P.loop) put(P.E[P.loop * 2 - 2], P.E[P.loop * 2 - 1]);\n    put(P.hx, P.hy - 1);\n  }\n  for (let j = 2; j \u003c n; j += 2) RLEN += hyp(RP[j] - RP[j - 2], RP[j + 1] - RP[j - 1]);\n  return n >> 1;\n}\n\nfunction stepParty(S, P, d) {\n  P.pt += d;\n  const E = P.E, ph = P.ph, x = P.hx, y = P.hy, k = 1 - exp(-d * 9);\n  if (ph \u003c= CLIMB) {\n    if (P.mv >= 0) advance(S, P, d);\n    if (P.mv \u003c 0 && P.ph === ph) {\n      const it = P.plan.shift();\n      if (it) {\n        (P.mv = it[0]), (P.mk = it[1]), (P.mi = it[2]), (P.dur = it[3]), (P.te = it[4] || 0), (P.u = 0);\n        if (P.mv \u003c 4) (P.m0x = E[P.mv * 2]), (P.m0y = E[P.mv * 2 + 1]);\n        if (it[5] === LOOP) P.loop = P.mv + 1;\n      } else if (ph === START) P.ph = CLIMB;\n      else decide(P);\n    }\n    // Hips where all four limbs reach, hanging on the arms and off the moving one.\n    const lo = max(E[5], E[7]) - 9.3, hi = min(E[1], E[3]) + 8 + TOR;\n    let ty = ((E[5] + E[7]) / 2 - 7 + hi) / 2, tx = 0.55 * ((E[4] + E[6]) / 2) + 0.45 * ((E[0] + E[2]) / 2);\n    ty = lo \u003c= hi ? cl(ty, lo, hi) : (lo + hi) / 2;\n    if (P.mv >= 0 && P.mv \u003c 4) tx -= (P.mv & 1 ? 1 : -1) * 0.7;\n    if (P.ph === ph) (P.hx += (tx - x) * k), (P.hy += (ty - y) * k);\n  } else if (ph === LOWER) {\n    // Sat in her harness and walking her feet down the wall.\n    P.hy = min(STAND, y + 12 * d * ease(P.pt * 1.5));\n    P.hx += (rcx(P.r) - x) * (1 - exp(-d * 1.5));\n    const f = P.hy * 0.45;\n    aim(E, k, x - 0.4, y - TOR - 1.8, x + 0.6, y - TOR - 3.6, x - 3.2, y + 5.3 - 1.6 * max(0, sin(f)), x + 3.2, y + 5.3 - 1.6 * max(0, -sin(f)));\n    if (P.hy >= STAND - 0.01) enter(P, LAND);\n  } else if (ph === LAND || ph === PULL) {\n    // Down, she unties and the belayer pulls the rope through.\n    P.hy += (STAND - y) * k;\n    const u = ph === LAND && P.pt > 0.5 && P.pt \u003c 1.3;\n    aim(E, k, x + (u ? -0.8 : -2.5), y + (u ? -1 : 1), x + (u ? 0.8 : 2.5), y + (u ? -1.3 : 1), x - 1.15, FT, x + 1.15, FT);\n    if (ph === LAND && P.pt > 1.4) enter(P, PULL), (P.ex = x), (P.ey = y - 1), (P.pull = 0);\n    if (ph === PULL && (P.pull += 110 * d) > P.len + 2) enter(P, SWAP);\n  } else if (ph === SWAP) {\n    if (P.pt > 1.6) (P.c ^= 1), enter(P, START);\n  } else {\n    // Falling until the rope from the last draw comes tight, a stretchy catch.\n    P.vy += 150 * d;\n    if (P.nc) {\n      const dx = x - LX[P.l] - 0.5, dy = y - 1 - BOLT[P.nc - 1] - CLP, L = hyp(dx, dy) + 1e-6, e = L - P.R;\n      if (e > 0) {\n        const ux = dx / L, uy = dy / L, f = (80 * e + 8 * (P.vx * ux + P.vy * uy)) * d;\n        (P.vx -= f * ux), (P.vy -= f * uy), (P.bl = max(P.bl, min(3, e)));\n      }\n    }\n    (P.hx += P.vx * d), (P.hy += P.vy * d);\n    if (P.hy >= STAND) {\n      (P.hy = STAND), (P.vy = P.vx = 0);\n      if (!P.nc) return enter(P, START);\n    }\n    const fl = P.pt \u003c 0.45, X = P.hx, Y = P.hy - TOR;\n    aim(E, 1 - exp(-d * (fl ? 6 : 4)), X - (fl ? 3.2 : 0.4), Y - (fl ? 4.5 : 2.5), X + (fl ? 3.2 : 0.5), Y - (fl ? 4.5 : 4.2), X - 2.7, P.hy + (fl ? 7.5 : 4.4), X + 2.7, P.hy + (fl ? 7 : 4.4));\n    if (P.pt > 2.4) rejoin(P);\n  }\n  P.bl *= exp(-d * 1.8);\n  // Rope paid out moves the belayer's guide hand; the ponytail swings.\n  const L = (path(P, bxOf(P), STAND - 4), RLEN), vx = (P.hx - P.lhx) / max(d, 1e-4);\n  if (P.ph \u003c= CLIMB) P.feed += abs(L - P.len);\n  if (P.ph !== PULL) P.len = L;\n  P.pv += (-28 * P.pa - 2.6 * P.pv) * d - cl(vx - P.lvx, -20, 20) * 0.04;\n  (P.pa = cl(P.pa + P.pv * d, -1, 1)), (P.lhx = P.hx), (P.lvx = vx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const r0 = min(5, floor(cl(k[0], 0, 1) * 6)), np = round(cl(k[2], 1, 3)), l0 = RL[r0], sp = cl(k[1], 0.2, 3);\n  (S.k4 = cl(k[3], -1, 1)), (S.r0 = r0);\n  for (const P of S.P) {\n    const r = P.l === l0 ? r0 : ROUTE[P.l][RS[r0] > 0 ? 1 : 0], j = (P.l - l0 + 3) % 3;\n    if (j >= np) P.on = 0;\n    else if (!P.on) {\n      (P.on = 1), (P.r = r), enter(P, START);\n      // Each party opens some way into its climb, further at a faster Speed.\n      if (!S.init) for (let n = PRE[j] * 30; n > 0; n--) stepParty(S, P, (sp / 2) ** 1.6 / 30);\n    } else if (P.r !== r) (P.r = r), P.ph === CLIMB ? rejoin(P) : P.ph === START && enter(P, START);\n  }\n  if (!S.init) S.pc.fill(0), (S.init = 1);\n  if (input.btnPressed && input.btnPressed[0]) fall(S.P[l0]);\n  const d = (cl(dt || 0, 0, 0.1) * sp) / 2, p = S.pc;\n  S.t += d;\n  for (const P of S.P) if (P.on) stepParty(S, P, d);\n  for (let j = 0, e = exp(-2 * d); j \u003c PC * 5; j += 5) if (p[j + 4] > 0) (p[j] += p[j + 2] * d), (p[j + 1] += p[j + 3] * d), (p[j + 2] *= e), (p[j + 3] = p[j + 3] * e + 2 * d), (p[j + 4] -= 0.6 * d);\n}\n\nlet F = null, LB = null;\nfunction splat(x, y, c, k, a) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1);\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) blend((yy * W + xx) * 3, c, k, (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy) * a);\n  }\n}\nconst lightAt = (x, y) => {\n  const o = (cl(floor(y), 0, H - 1) * W + cl(floor(x), 0, W - 1)) * 3;\n  return cl(0.3 + 0.35 * (LB[o] + LB[o + 1]), 0.62, 1.2);\n};\n// A rope span, slack spans sagging; the weave's flecks ride with the rope.\nfunction span(x0, y0, x1, y1, sag, s0, lim, rc, lf) {\n  const L = hyp(x1 - x0, y1 - y0), n = ceil(L * 2.2) + 1, mx = (x0 + x1) / 2 + sag * 0.3, my = (y0 + y1) / 2 + sag * 2;\n  for (let i = 0; i \u003c= n; i++) {\n    const u = i / n, s = s0 + u * L, q = s - lim + 1000, a = (1 - u) * (1 - u), b = 2 * u * (1 - u), c = u * u;\n    if (s > lim) break;\n    const w = q * 0.2 - floor(q * 0.2) \u003c 0.16;\n    splat(a * x0 + b * mx + c * x1, a * y0 + b * my + c * y1, w ? STEEL[1] : rc, w ? lf : (0.74 + 0.26 * cos(q * 2.3)) * lf, 0.9);\n  }\n  return s0 + L;\n}\n\n// A person from behind, facing the wall: hips at hx, hy, hands and feet in E.\nconst PT = F32(30 * 6), BE = F32(8);\nlet NP = 0, KX = 0, KY = 0, EX = 0, EY = 0;\nconst cap = (...a) => (PT.set(a, NP * 6), NP++);\n// Two-bone reach; elbows bend out and down, knees out and up.\nfunction ik(ax, ay, bx, by, l1, l2, sg, up) {\n  let dx = bx - ax, dy = by - ay, L = hyp(dx, dy) + 1e-6;\n  const Lm = l1 + l2 - 0.05;\n  if (L > Lm) (bx = ax + (dx / L) * Lm), (by = ay + (dy / L) * Lm), (dx = bx - ax), (dy = by - ay), (L = Lm);\n  const a = (l1 * l1 - l2 * l2 + L * L) / (2 * L), h = sqrt(max(0, l1 * l1 - a * a)), ux = dx / L, uy = dy / L, f = -uy * sg + up * 0.3 * ux \u003c 0 ? -h : h;\n  (KX = ax + ux * a - uy * f), (KY = ay + uy * a + ux * f), (EX = bx), (EY = by);\n}\nfunction person(hx, hy, E, o, lf, pa) {\n  NP = 0;\n  const sx = hx + 0.2 * ((E[0] + E[2]) / 2 - hx), sy = hy - TOR;\n  for (let s = -1; s \u003c 2; s += 2) {\n    const j = s + 1;\n    ik(hx + s * 1.15, hy + 0.4, E[4 + j], E[5 + j], TH, SN, s, -1);\n    cap(hx + s * 1.15, hy + 0.4, KX, KY, 1.1, 3), cap(KX, KY, EX, EY, 0.83, 3), cap(EX, EY, EX + s * 0.9, EY + 0.3, 0.7, 5);\n  }\n  cap(hx - 1.1, hy, hx + 1.1, hy, 1.25, 3), cap(hx, hy - 1, sx, sy + 1, 1.95, 2), cap(sx - 2.2, sy + 0.7, sx + 2.2, sy + 0.7, 1.15, 2);\n  cap(hx - 1.8, hy - 1.1, hx + 1.8, hy - 1.1, 0.55, 4), cap(hx + 0.3, hy - 1.2, hx + 0.3, hy - 0.1, 0.8, 6);\n  for (let s = -1; s \u003c 2; s += 2) {\n    ik(sx + s * 2.3, sy + 0.8, E[s + 1], E[s + 2], UA, FA, s, 1);\n    cap(sx + s * 2.3, sy + 0.8, KX, KY, 0.76, 0), cap(KX, KY, EX, EY, 0.64, 0), cap(EX, EY, EX, EY - 0.2, 0.75, 0);\n  }\n  cap(sx, sy + 0.2, sx, sy - 1.2, 0.7, 0), cap(sx, sy - 3, sx, sy - 3.1, 1.95, 1);\n  if (o[7]) cap(sx, sy - 3, sx + 3.7 * sin(pa), sy - 3 + 4.1 * cos(pa), 0.63, 1);\n  // A dark rim round her, holds near her greyed, then her.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let y = max(0, floor(hy - 21)); y \u003c min(H, hy + 16); y++)\n      for (let x = max(0, floor(hx - 13)); x \u003c min(W, hx + 14); x++) {\n        const qx = x + 0.5, qy = y + 0.5, i = (y * W + x) * 3;\n        let dm = 9;\n        for (let j = 0; j \u003c NP * 6; j += 6) {\n          const ax = PT[j], ay = PT[j + 1], dx = PT[j + 2] - ax, dy = PT[j + 3] - ay, r = PT[j + 4];\n          if (abs(qx - ax - dx / 2) > abs(dx) / 2 + r + 3 || abs(qy - ay - dy / 2) > abs(dy) / 2 + r + 3) continue;\n          const tt = cl(((qx - ax) * dx + (qy - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1), e = hyp(qx - ax - dx * tt, qy - ay - dy * tt) - r;\n          if (pass && e \u003c 0.5) blend(i, o[PT[j + 5]], lf, min(1, 0.5 - e));\n          dm = min(dm, e);\n        }\n        const g = ease((dm - 1.3) / 1.4), m = ((F[i] + F[i + 1] + F[i + 2]) / 3) * 0.6;\n        if (!pass && g \u003c 1) for (let c = 0; c \u003c 3; c++) F[i + c] = mix(m, F[i + c], g) * (0.25 + 0.75 * g);\n      }\n}\nfunction walk(x, ph, o, lf) {\n  const y = STAND - 0.3 * abs(sin(ph)), s = sin(ph), s2 = sin(ph + 1.6);\n  BE.set([x - 2.5 - 0.6 * s, y + 0.8, x + 2.5 - 0.6 * s, y + 0.8, x - 1.3 + 0.8 * s, FT - 1.2 * max(0, cos(ph)), x + 1.3 + 0.8 * s2, FT - 1.2 * max(0, cos(ph + 1.6))]);\n  person(x, y, BE, o, lf, 0);\n}\n\n// A party: rope pile, rope, climber, then the belayer in front.\nfunction scene(S, P, t) {\n  const gs = RS[P.r], bx = bxOf(P), cx = rcx(P.r), A = OUT[P.l * 2 + P.c], B = OUT[P.l * 2 + 1 - P.c], rc = ROPE[P.l];\n  const lfB = lightAt(bx, FL - 10), px0 = bx - gs * 2.6;\n  for (let j = 0; j \u003c 22; j++) splat(px0 + 2.4 * cos(j * 0.6) * (1 - j * 0.02), FL + 3.2 + 0.9 * sin(j * 0.6), rc, 0.8 * lfB, 0.8);\n  if (P.ph === SWAP) {\n    const e = ease(P.pt / 1.6), ph = P.pt * 9;\n    return walk(mix(cx, bx, e), ph, A, lfB), walk(mix(bx, cx, e), ph + PI, B, lfB);\n  }\n  // The belayer: guide hand up the rope feeding it out, brake hand low.\n  const hy = STAND - P.bl, hx = bx + gs * P.bl * 0.4, gi = gs > 0 ? 2 : 0, bi = 2 - gi;\n  let gy = hy - 3.4 - 1.8 * abs(sin(P.feed * 0.35)), by = hy + 0.8;\n  if (P.ph === PULL) (gy = hy - 3 - 2.6 * abs(sin(t * 6))), (by = hy - 3 - 2.6 * abs(cos(t * 6)));\n  else if (P.ph === LOWER) by = hy + 0.6 + 0.8 * sin(t * 5);\n  (BE[gi] = hx + gs * 0.7), (BE[gi + 1] = gy), (BE[bi] = hx - gs * 2.2), (BE[bi + 1] = by);\n  (BE[4] = hx - 1.15), (BE[6] = hx + 1.15), (BE[5] = BE[7] = min(FT, hy + 9.5));\n  span(BE[bi], by, px0, FL + 2.5, 1.2, 0, 1e9, rc, lightAt(BE[bi], by + 2));\n  const n = path(P, BE[gi], gy), lim = RLEN - (P.ph === PULL ? P.pull : 0), taut = P.ph === FALL || P.ph === LOWER || P.ph === PULL;\n  for (let j = 1, s = 0; j \u003c n; j++) {\n    const sag = j === 1 ? (n === 2 && !taut ? 2.5 : 1.5) : j === n - 1 && !taut ? 1 : 0;\n    s = span(RP[j * 2 - 2], RP[j * 2 - 1], RP[j * 2], RP[j * 2 + 1], sag, s, lim, rc, lightAt(RP[j * 2], RP[j * 2 + 1]));\n  }\n  person(P.hx, P.hy, P.E, A, lightAt(P.hx, P.hy - 4), P.pa);\n  person(hx, hy, BE, B, lfB, 0.2);\n}\n\n// House light tinted by the route, a follow spot with a gel on each climber.\nfunction light(S) {\n  const k = S.k4, hs = k \u003c 0 ? mix(0.68, 1.12, -k) : mix(0.68, 0.06, k), lv = k \u003c 0 ? mix(1, 0.35, -k) : mix(1, 1.2, k), u = max(0, k);\n  const T = [1, 0.95, 0.86].map((w, j) => mix(w, RC[S.r0][j] / 255, 0.14) * hs), V = [0.1 * u, 0.04 * u, 0.24 * u];\n  for (let o = 0; o \u003c N * 3; o++) LB[o] = L0[(o / 3) | 0] * T[o % 3];\n  for (const P of S.P) {\n    if (!P.on) continue;\n    const sx = P.hx, sy = P.hy - 4, G = [1, 0.96, 0.9].map((w, j) => lv * mix(w, RC[P.r][j] / 255, 0.35));\n    for (let y = max(4, floor(sy - SRY)); y \u003c min(FL, sy + SRY); y++)\n      for (let x = max(0, floor(sx - SRX)); x \u003c min(W, sx + SRX); x++) {\n        const q = ((y + 0.5 - sy) / SRY) ** 2 + ((x + 0.5 - sx) / SRX) ** 2, o = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3 && q \u003c 1; c++) LB[o + c] += (1 - q) * (1 - q) * G[c];\n      }\n  }\n  for (let o = 0; o \u003c N * 3; o++) F[o] = AL[o] * (LB[o] + V[o % 3]) + EM[o] * u;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  (F = S.F), (LB = S.LB);\n  light(S);\n  for (const P of S.P) if (P.on) scene(S, P, S.t);\n  const p = S.pc, u = max(0, S.k4);\n  for (let j = 0, C = [240, 240 - 40 * u, 236 + 19 * u]; j \u003c PC * 5; j += 5) if (p[j + 4] > 0) splat(p[j], p[j + 1], C, 1, min(1, p[j + 4]) * 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Route","min":0,"max":1,"about":"The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall."},{"name":"Climbers","min":1,"max":3,"about":"One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour."},{"name":"Light","min":-1,"max":1,"about":"House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes."}],"start":[0,2,1,0.06],"measures":{"motion":0.067,"detail":0.0707,"edges":0.3416,"complexity":1.7869,"coverage":0.9212,"colour":0.1755,"drift":0.0209},"knobResponse":[0.0608,0.0368,0.048,0.1959]},{"slug":"cloth","title":"Cloth","family":"physics","round":2,"note":"12×22 매듭 천이 나무 봉의 집게에 걸려 있고, 뒤에서 부는 돌풍이 천을 앞으로 들어 올려요. LED 마다 그 자리 천이 빛에서 기운 만큼 밝아서 주름이 등고선처럼 읽혀요.","idea":"A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.","buttons":"K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.","code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","layer":{"id":"layer-cloth","type":"code","name":"cloth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the cloth; its stripes and its paler wrong side follow."},{"name":"Wind","min":0,"max":3,"about":"From still air, where it only sways, to gusts that throw the hem up past the rod."},{"name":"Stiffness","min":0,"max":1,"about":"Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones."},{"name":"Pins","min":2,"max":12,"about":"How many clips hold it to the rod, from two corners with a swag between them to every knot along the top."}],"start":[0,2,0,2],"measures":{"motion":0.5789,"detail":0.0244,"edges":0.3966,"complexity":0.9079,"coverage":0.5904,"colour":0.3319,"drift":0.4132},"knobResponse":[0.2963,0.322,0.2371,0.2837]},{"slug":"cloud-chamber","title":"Cloud Chamber","family":"particle","round":27,"note":"과학관의 확산 안개상자를 유리 뚜껑 위에서 내려다봐요. 등줄 빛을 받은 검은 펠트 위로 우주선 뮤온이 가는 직선을 패널 끝까지 긋고, 알파 입자는 짧고 굵은 막대를, 전자는 흐린 실을 남겨요. 자취는 한순간에 맺혔다가 대류를 따라 흘러가며 몇 초 만에 번져 사라져요. K3 은 토륨 막대를 세워 알파 부채를 뿜게 하고, K4 는 자기장으로 전자를 나선으로 감아요.","idea":"A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.","buttons":"K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.","code":"// ===== Patternflow pattern =====\n// Title:   Cloud Chamber\n// Family:  particle\n// Idea:    A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the continuously sensitive diffusion cloud chamber Alexander Langsdorf described in 1939, a descendant of C. T. R. Wilson's expansion cloud chamber\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1\n//\n// Knob 1: Light. The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white.\n// Knob 2: Speed. How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often.\n// Knob 3: Source. A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point.\n// Knob 4: Field. A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way.\n// Buttons: K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.\n\nconst W = 64, H = 128, N = W * H, CAP = 16384, ND = 170, DS = 0.6, SQ = Math.sqrt(DS);\nconst { min, max, floor, ceil, sqrt, exp, sin, cos, log, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst gauss = () => (rnd() + rnd() + rnd() - 1.5) * 2;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p, a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// The mist's sheen: a 64 by 64 tile of soft noise that wraps both ways.\nconst NZ = new Float32Array(4096).map((_, k) => 0.65 * vn((k & 63) / 8, (k >> 6) / 8, 8) + 0.35 * vn((k & 63) / 4, (k >> 6) / 4, 16));\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, x0 = xi & 63, y0 = (yi & 63) \u003c\u003c 6, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) \u003c\u003c 6;\n  return mix(mix(NZ[y0 + x0], NZ[y0 + x1], u), mix(NZ[y1 + x0], NZ[y1 + x1], u), v);\n}\n// A droplet is a round Gaussian; GL holds exp(-q / 32) out to where it is under 3%.\nconst GN = 112, GL = new Float32Array(GN).map((_, q) => exp(-q / 32));\n// The lamp lights the wall side best; a trail across the chamber is about 0.55 as bright.\nconst LIT = new Float32Array(W).map((_, x) => 0.48 + 0.52 * exp(-x / 30));\nconst STRIP = new Float32Array(H).map((_, y) => 0.86 + 0.14 * hash(y >> 2, 3));\n\n// Lamps: colour, near glow, its width in LEDs, far glow, drizzle, trails.\n// The laser sheet lights only the sensitive layer, so its trails stand out hardest.\nconst LAMPS = [\n  [0.6, 0.8, 1, 0.28, 6, 0.035, 1, 1],\n  [1, 0.9, 0.72, 0.3, 13, 0.1, 0.9, 0.9],\n  [0.4, 1, 0.6, 0.15, 3.5, 0.03, 1.3, 1.25],\n  [0.7, 0.46, 1, 0.3, 8, 0.08, 1.15, 0.9],\n];\n\n// Trail kinds: droplet radius, line brightness, life in seconds, how fast the\n// trail spreads (LED squared a second), bending radius in a full field,\n// scatter, bead spread, missing droplets, brightening toward the end, whether\n// it slows to a stop (curling tighter), delta rays per LED.\nconst kind = (sig, I, life, D, R, sc, bead, gap, br, slow, dl) => ({ sig, I, life, D, R, sc, bead, gap, br, slow, dl });\nconst MU = kind(0.5, 0.85, 3.4, 0.16, 380, 0.004, 0.55, 0.08, 0, 0, 1 / 170);\nconst BE = kind(0.46, 0.7, 2.9, 0.2, 16, 0.085, 0.7, 0.28, 0.9, 1, 0);\nconst DE = kind(0.44, 0.65, 2.6, 0.2, 5, 0.12, 0.6, 0.2, 0.7, 1, 0);\nconst AL = kind(0.7, 1.9, 4, 0.14, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\n// Source alphas are a touch thinner and go sooner, so the fan reads ray by ray.\nconst AS = kind(0.6, 1.6, 2.6, 0.12, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\nconst PR = kind(0.6, 1.3, 3.8, 0.18, 900, 0.01, 0.3, 0.02, 0.35, 0, 1 / 90);\n// The thoriated rod's tip.\nconst SX = 40.5, SY = 117.5;\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  params.s = {\n    T: F(N), U: F(153), V: F(153), PX: F(CAP), PY: F(CAP), PU: F(CAP), PV: F(CAP), PB: D(CAP), PL: F(CAP), PS: F(CAP), PK: F(CAP), PD: F(CAP),\n    DX: F(ND), DY: F(ND), DB: D(ND), DL: F(ND), DA: F(ND), head: 0, tail: 0, tf: 0, td: 0, wr: 99, tw: -99, ox: 0, oy: 0,\n    tsf: 1, tsd: 1, field: 0.06, src: 0, lamp: [...LAMPS[0]], k1: -1, live: 0, pend: [], cnt: [0, 0, 0, 0, 0, 0, 0].map(() => -log(1 - rnd())),\n  };\n  const S = params.s;\n  for (let j = 0; j \u003c ND; j++) drop(S, j, -rnd() * 1.4);\n}\n\nfunction puff(S, x, y, sig, I, life, D) {\n  const i = S.head++ & (CAP - 1), a = rnd() * 6.283, v = 0.1 + 0.35 * rnd();\n  if (S.head - S.tail > CAP) S.tail = S.head - CAP;\n  S.PX[i] = x;\n  S.PY[i] = y;\n  // Each droplet wanders a little on its own, so an old trail frays.\n  S.PU[i] = v * cos(a);\n  S.PV[i] = v * sin(a);\n  S.PB[i] = S.tf;\n  S.PL[i] = life * (0.85 + 0.3 * rnd());\n  S.PS[i] = 2 * sig * sig;\n  // Scaled so a line of droplets DS apart peaks at I.\n  S.PK[i] = I * sig * DS * 0.798;\n  S.PD[i] = D;\n}\n\n// Lays a trail of droplets from x, y heading th. A charge q bends it in the\n// field; a slowing particle bends tighter and scatters more toward its end.\n// With clip set it starts outside and stops once it has crossed the panel.\nfunction trail(S, x, y, th, len, k, q, R0, clip, I = k.I) {\n  const n = max(1, ceil(len / DS)), f = S.field, life = k.life * (0.85 + 0.3 * rnd());\n  let inside = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const rem = 1 - j / n, inn = x > -2 && x \u003c W + 2 && y > -2 && y \u003c H + 2;\n    if (clip) {\n      if (inn) inside = 1;\n      else if (inside) break;\n    }\n    if (inn && rnd() >= k.gap) puff(S, x, y, k.sig * (1 + 0.3 * k.br * (1 - rem) ** 2), I * (1 + k.bead * (rnd() * 2 - 1)) * (1 + k.br * (1 - rem) ** 2), life, k.D);\n    // A knock-on electron kicked sideways out of the trail.\n    if (k.dl && inn && rnd() \u003c k.dl * DS) {\n      const s = rnd() \u003c 0.5 ? -1 : 1;\n      trail(S, x, y, th + s * (0.9 + 0.6 * rnd()), 3 + 11 * rnd(), DE, -1, 2 + 5 * rnd(), 0);\n    }\n    const R = R0 * (k.slow ? sqrt(rem + 0.03) : 1);\n    th += q * min(0.5, (f * DS) / R) + (k.sc * gauss() * SQ) / (k.slow ? sqrt(rem + 0.12) : 1);\n    x += cos(th) * DS;\n    y += sin(th) * DS;\n  }\n  return [x, y, th];\n}\n\nconst beta = (S, x, y, th, len) => trail(S, x, y, th, len, BE, rnd() \u003c 0.9 ? -1 : 1, 8 + 22 * rnd(), 0);\n\n// A muon through a point of the chamber; most cross it the long way.\nfunction muon(S, px, py, th) {\n  const stop = rnd() \u003c 0.1, len = stop ? 170 + 60 * rnd() : 400;\n  const e = trail(S, px - cos(th) * 170, py - sin(th) * 170, th, len, MU, rnd() \u003c 0.55 ? 1 : -1, 220 + 380 * rnd(), 1);\n  // One that stops in the chamber decays: an electron leaves its end at an angle.\n  if (stop && e[0] > 0 && e[0] \u003c W && e[1] > 0 && e[1] \u003c H) beta(S, e[0], e[1], e[2] + (rnd() \u003c 0.5 ? -1 : 1) * (0.6 + 1.8 * rnd()), 30 + 30 * rnd());\n}\nconst steep = () => (rnd() \u003c 0.62 ? PI / 2 + 0.45 * gauss() + (rnd() \u003c 0.5 ? PI : 0) : rnd() * 2 * PI);\n\n// An alpha: short, thick, dead straight, thickest at its end. Now and then it\n// glances off a nucleus near its end and the recoil leaves a stub: a fork.\nfunction alpha(S, x, y, th, len) {\n  if (rnd() \u003c 0.14 && len > 7) {\n    const e = trail(S, x, y, th, len * 0.75, AL, 1, 6000, 0, AL.I * 0.9), s = rnd() \u003c 0.5 ? -1 : 1;\n    trail(S, e[0], e[1], e[2] + s * (0.4 + 0.6 * rnd()), len * 0.3, AL, 1, 6000, 0);\n    trail(S, e[0], e[1], e[2] - s * (0.9 + 0.6 * rnd()), 1.5 + 2 * rnd(), AL, 1, 6000, 0, AL.I * 1.3);\n  } else trail(S, x, y, th, len, AL, 1, 6000, 0);\n}\n\n// A cosmic proton breaks up a nucleus: a thin track in and a star of thick prongs.\nfunction star(S) {\n  const x = 10 + 44 * rnd(), y = 16 + 96 * rnd(), th = steep();\n  trail(S, x - cos(th) * 90, y - sin(th) * 90, th, 90, MU, 1, 600, 0);\n  for (let j = 0, n = 2 + floor(rnd() * 3); j \u003c n; j++) trail(S, x, y, rnd() * 2 * PI, 5 + 16 * rnd(), PR, 1, 900, 0);\n  if (rnd() \u003c 0.5) trail(S, x, y, th + gauss() * 0.6, 40 + 40 * rnd(), MU, rnd() \u003c 0.5 ? 1 : -1, 300, 1);\n}\n\n// A shower: one direction for all, muons in parallel and electrons beside them.\nfunction shower(S) {\n  const th = steep(), c = cos(th), s = sin(th), n = 7 + floor(rnd() * 5);\n  for (let j = 0; j \u003c n; j++) {\n    const o = (rnd() * 2 - 1) * 34;\n    muon(S, 32 - s * o + c * gauss() * 20, 64 + c * o + s * gauss() * 20, th + 0.012 * gauss());\n  }\n  for (let j = 0, m = 3 + floor(rnd() * 4); j \u003c m; j++) {\n    const o = (rnd() * 2 - 1) * 30, a = (rnd() * 2 - 1) * 50;\n    beta(S, 32 - s * o + c * a, 64 + c * o + s * a, th + 0.2 * gauss(), 25 + 40 * rnd());\n  }\n}\n\nfunction spawn(S, k) {\n  const src = S.src;\n  if (k === 0) muon(S, rnd() * W, rnd() * H, steep());\n  // A steep muon crosses the thin sensitive layer in a few LEDs.\n  else if (k === 1) trail(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd(), MU, 1, 400, 0);\n  else if (k === 2) beta(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 18 + 55 * rnd());\n  // Radon in the air: an alpha anywhere, foreshortened when it leaves the layer.\n  else if (k === 3) alpha(S, 3 + rnd() * (W - 3), rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd() ** 0.7);\n  else if (k === 4) star(S);\n  else if (k === 5) {\n    const t = -PI / 2 + (rnd() * 2 - 1) * 1.35;\n    trail(S, SX + cos(t) * 1.5, SY + 1 + sin(t) * 1.5, t, 11 + 18 * rnd(), AS, 1, 6000, 0);\n  } else if (k === 6 && src > 0.02) {\n    // Thoron off the rod; its daughter decays a fraction of a second later from the same point.\n    const x = cl(SX + gauss() * 13, 4, W - 2), y = SY - 6 - 40 * rnd() ** 1.5;\n    alpha(S, x, y, rnd() * 2 * PI, 6 + 10 * rnd());\n    S.pend.push([S.tf + 0.1 + 0.3 * rnd(), x, y]);\n  }\n}\n\n// The vapour's slow convection on a grid of 9 by 17 nodes, 8 LEDs apart: the\n// curl of a few drifting waves, so it neither piles up nor thins out, and a\n// gentle drift that turns round over a minute or two.\nconst MODES = [[0.09, 0.05, 0.11, 0, 9], [-0.06, 0.08, -0.09, 2, 8], [0.13, -0.11, 0.13, 4, 4], [0.03, 0.12, 0.07, 1.3, 6]];\nfunction flow(S) {\n  const t = S.td, mu = 0.45 * cos(t * 0.05), mv = 0.45 * sin(t * 0.07 + 1);\n  for (let j = 0; j \u003c 17; j++)\n    for (let i = 0; i \u003c 9; i++) {\n      let u = mu, v = mv;\n      for (const [kx, ky, w, p, a] of MODES) {\n        const c = a * cos(kx * i * 8 + ky * j * 8 + w * t + p);\n        u += ky * c;\n        v -= kx * c;\n      }\n      S.U[j * 9 + i] = u;\n      S.V[j * 9 + i] = v;\n    }\n  return [mu, mv];\n}\nfunction vel(S, x, y, out) {\n  const gx = cl(x / 8, 0, 7.999), gy = cl(y / 8, 0, 15.999), i = floor(gx), j = floor(gy), u = gx - i, v = gy - j, k = j * 9 + i;\n  out[0] = mix(mix(S.U[k], S.U[k + 1], u), mix(S.U[k + 9], S.U[k + 10], u), v);\n  out[1] = mix(mix(S.V[k], S.V[k + 1], u), mix(S.V[k + 9], S.V[k + 10], u), v);\n}\n\n// The drizzle: droplets raining out of the mist, seen as they cross the light.\nfunction drop(S, j, b) {\n  S.DX[j] = rnd() * W;\n  S.DY[j] = rnd() * H;\n  S.DB[j] = S.tf + b;\n  S.DL[j] = 0.45 + 1.1 * rnd();\n  S.DA[j] = 0.08 + 0.28 * rnd();\n}\n\nconst UV = new Float32Array(2);\nfunction step(S, d) {\n  const df = d * S.tsf, dd = d * S.tsd;\n  (S.tf += df), (S.td += dd), (S.wr += d);\n  const [mu, mv] = flow(S);\n  (S.ox += mu * dd), (S.oy += mv * dd);\n  // Births run on the fade clock, so the chamber holds as many trails at any speed.\n  if (S.wr > 1.2) {\n    const rate = [0.75, 1.1, 2.4, 0.9, 0.05, 5 * S.src ** 1.5, 0.6 * S.src];\n    for (let k = 0; k \u003c 7; k++) for (S.cnt[k] -= rate[k] * df; S.cnt[k] \u003c= 0; S.cnt[k] -= log(1 - rnd())) spawn(S, k);\n  }\n  for (const p of S.pend) if (p[0] \u003c= S.tf) alpha(S, p[1], p[2], rnd() * 2 * PI, 6 + 10 * rnd()), (p[0] = -1);\n  S.pend = S.pend.filter((p) => p[0] > 0);\n  const { PX, PY, PU, PV, PB, PL } = S;\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1);\n    if (S.tf - PB[i] > PL[i]) continue;\n    vel(S, PX[i], PY[i], UV);\n    PX[i] += (UV[0] + PU[i]) * dd;\n    PY[i] += (UV[1] + PV[i]) * dd;\n  }\n  while (S.tail \u003c S.head && S.tf - PB[S.tail & (CAP - 1)] > PL[S.tail & (CAP - 1)]) S.tail++;\n  for (let j = 0; j \u003c ND; j++) {\n    if (S.tf - S.DB[j] > S.DL[j]) drop(S, j, 0);\n    vel(S, S.DX[j], S.DY[j], UV);\n    S.DX[j] += UV[0] * dd;\n    S.DY[j] += UV[1] * dd;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2, k1 = cl(k[0], 0, 1);\n  (S.field = cl(k[3], 0, 1)), (S.src = cl(k[2], 0, 1)), (S.tsd = sp), (S.tsf = sp ** 0.6);\n  if (k1 !== S.k1) {\n    const f = k1 * 3, a = min(2, floor(f)), u = sm(0, 1, f - a);\n    for (let j = 0; j \u003c 8; j++) S.lamp[j] = mix(LAMPS[a][j], LAMPS[a + 1][j], u);\n    S.k1 = k1;\n  }\n  // Start with the chamber already running.\n  for (; !S.live; S.live = 1) while (S.tf \u003c 4.5) step(S, 1 / 30);\n  const b = input.btnPressed || [];\n  if (b[0]) shower(S);\n  if (b[1] && S.wr > 0.3) (S.tw = S.tf), (S.wr = 0);\n  step(S, cl(dt || 0, 0, 0.1));\n}\n\nfunction splat(T, x, y, s2, a) {\n  const r = sqrt(3.5 * s2), k = 32 / s2, x0 = max(0, ceil(x - 0.5 - r)), x1 = min(W - 1, floor(x - 0.5 + r)), y0 = max(0, ceil(y - 0.5 - r)), y1 = min(H - 1, floor(y - 0.5 + r));\n  for (let py = y0; py \u003c= y1; py++) {\n    const dy = py + 0.5 - y, d2 = dy * dy, o = py * W;\n    for (let px = x0; px \u003c= x1; px++) {\n      const dx = px + 0.5 - x, q = ((dx * dx + d2) * k) | 0;\n      if (q \u003c GN) T[o + px] += a * GL[q];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.live) return;\n  const { T, PX, PY, PB, PL, PS, PK, PD, lamp } = S, tf = S.tf, tin = 0.07 * S.tsf;\n  // After a clear the old trails blur and fade within a second; the mist dims and comes back.\n  const wq = exp(-S.wr / 0.3), wipe = S.wr \u003c 2.5 ? sm(0, 0.25, S.wr) * exp(-S.wr / 1.1) : 0;\n  T.fill(0);\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1), a = tf - PB[i], L = PL[i];\n    if (a > L) continue;\n    const old = PB[i] \u003c S.tw;\n    if (old && S.wr > 2) continue;\n    // Fresh droplets catch the light hardest for the first half second.\n    let s2 = PS[i] + 2 * PD[i] * a, e = min(1, a / tin) * (1 - sm(0.12, 1, a / L)) * (1 + 0.6 * exp(-a / 0.4));\n    if (old) (s2 += 3 * (1 - wq)), (e *= wq);\n    // Once a trail has spread wider than the droplet spacing, every second\n    // or fourth droplet stands for its neighbours.\n    let m = 1;\n    if (s2 > 5) {\n      if (n & 3) continue;\n      m = 4;\n    } else if (s2 > 2.2) {\n      if (n & 1) continue;\n      m = 2;\n    }\n    if (e > 0.004) splat(T, PX[i], PY[i], s2, (m * PK[i] * e) / s2);\n  }\n  // Drizzle, brightest in the light near the wall, heavier just after a clear.\n  const dz = lamp[6] * (1 + 2.5 * wipe);\n  for (let j = 0; j \u003c ND; j++) {\n    const u = (tf - S.DB[j]) / S.DL[j];\n    if (u \u003c= 0 || u >= 1) continue;\n    const x = S.DX[j] - 0.5, y = S.DY[j] - 0.5, xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n    const a = dz * S.DA[j] * sin(u * PI) ** 2 * (0.3 + 0.7 * exp(-S.DX[j] / 16));\n    if (xi \u003c 0 || yi \u003c 0 || xi >= W - 1 || yi >= H - 1) continue;\n    const o = yi * W + xi;\n    T[o] += a * (1 - fx) * (1 - fy);\n    T[o + 1] += a * fx * (1 - fy);\n    T[o + W] += a * (1 - fx) * fy;\n    T[o + W + 1] += a * fx * fy;\n  }\n  const [cr, cg, cb, g1, w1, g2, , tg] = lamp, rod = sm(0.01, 0.06, S.src), mist = 1 - 0.7 * wipe, ox = S.ox, oy = S.oy;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (x === 0) {\n        // The lamp strip itself, through the glass at the chamber's rim.\n        const v = 0.92 * STRIP[y] * (1 - 0.3 * wipe);\n        display.setPixel(0, y, 255 * v * mix(cr, 1, 0.4), 255 * v * mix(cg, 1, 0.4), 255 * v * mix(cb, 1, 0.4));\n        continue;\n      }\n      const n = 0.6 * nz(x * 0.9 - ox * 0.9, y * 0.55 - oy * 0.55) + 0.4 * nz(x * 1.7 - ox * 1.6 + 17, y * 1.1 - oy * 1.4 + 29);\n      const h = (g1 * exp(-(x - 1) / w1) + g2 * exp(-x / 40)) * (1.7 * n * n) * mist;\n      let t = T[i] * LIT[x] * tg, g = 0;\n      // The rod: dull metal lit from the lamp side.\n      if (rod > 0 && y > SY - 0.5 && x > SX - 2 && x \u003c SX + 1) g = rod * (x \u003c SX - 0.5 ? 0.42 : 0.24) * (y \u003c SY + 0.5 ? 1.25 : 1);\n      const v = min(1, (1 - exp(-1.6 * (t + h + g))) * 1.25), wf = 0.8 * sm(0.1, 0.8, t) + 0.6 * g;\n      display.setPixel(x, y, 255 * v * mix(cr, 1, wf), 255 * v * mix(cg, 1, wf), 255 * v * mix(cb, 1, wf));\n    }\n  }\n}\n","layer":{"id":"layer-cloud-chamber","type":"code","name":"cloud-chamber","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cloud Chamber\n// Family:  particle\n// Idea:    A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the continuously sensitive diffusion cloud chamber Alexander Langsdorf described in 1939, a descendant of C. T. R. Wilson's expansion cloud chamber\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1\n//\n// Knob 1: Light. The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white.\n// Knob 2: Speed. How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often.\n// Knob 3: Source. A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point.\n// Knob 4: Field. A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way.\n// Buttons: K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.\n\nconst W = 64, H = 128, N = W * H, CAP = 16384, ND = 170, DS = 0.6, SQ = Math.sqrt(DS);\nconst { min, max, floor, ceil, sqrt, exp, sin, cos, log, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst gauss = () => (rnd() + rnd() + rnd() - 1.5) * 2;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p, a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// The mist's sheen: a 64 by 64 tile of soft noise that wraps both ways.\nconst NZ = new Float32Array(4096).map((_, k) => 0.65 * vn((k & 63) / 8, (k >> 6) / 8, 8) + 0.35 * vn((k & 63) / 4, (k >> 6) / 4, 16));\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, x0 = xi & 63, y0 = (yi & 63) \u003c\u003c 6, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) \u003c\u003c 6;\n  return mix(mix(NZ[y0 + x0], NZ[y0 + x1], u), mix(NZ[y1 + x0], NZ[y1 + x1], u), v);\n}\n// A droplet is a round Gaussian; GL holds exp(-q / 32) out to where it is under 3%.\nconst GN = 112, GL = new Float32Array(GN).map((_, q) => exp(-q / 32));\n// The lamp lights the wall side best; a trail across the chamber is about 0.55 as bright.\nconst LIT = new Float32Array(W).map((_, x) => 0.48 + 0.52 * exp(-x / 30));\nconst STRIP = new Float32Array(H).map((_, y) => 0.86 + 0.14 * hash(y >> 2, 3));\n\n// Lamps: colour, near glow, its width in LEDs, far glow, drizzle, trails.\n// The laser sheet lights only the sensitive layer, so its trails stand out hardest.\nconst LAMPS = [\n  [0.6, 0.8, 1, 0.28, 6, 0.035, 1, 1],\n  [1, 0.9, 0.72, 0.3, 13, 0.1, 0.9, 0.9],\n  [0.4, 1, 0.6, 0.15, 3.5, 0.03, 1.3, 1.25],\n  [0.7, 0.46, 1, 0.3, 8, 0.08, 1.15, 0.9],\n];\n\n// Trail kinds: droplet radius, line brightness, life in seconds, how fast the\n// trail spreads (LED squared a second), bending radius in a full field,\n// scatter, bead spread, missing droplets, brightening toward the end, whether\n// it slows to a stop (curling tighter), delta rays per LED.\nconst kind = (sig, I, life, D, R, sc, bead, gap, br, slow, dl) => ({ sig, I, life, D, R, sc, bead, gap, br, slow, dl });\nconst MU = kind(0.5, 0.85, 3.4, 0.16, 380, 0.004, 0.55, 0.08, 0, 0, 1 / 170);\nconst BE = kind(0.46, 0.7, 2.9, 0.2, 16, 0.085, 0.7, 0.28, 0.9, 1, 0);\nconst DE = kind(0.44, 0.65, 2.6, 0.2, 5, 0.12, 0.6, 0.2, 0.7, 1, 0);\nconst AL = kind(0.7, 1.9, 4, 0.14, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\n// Source alphas are a touch thinner and go sooner, so the fan reads ray by ray.\nconst AS = kind(0.6, 1.6, 2.6, 0.12, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\nconst PR = kind(0.6, 1.3, 3.8, 0.18, 900, 0.01, 0.3, 0.02, 0.35, 0, 1 / 90);\n// The thoriated rod's tip.\nconst SX = 40.5, SY = 117.5;\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  params.s = {\n    T: F(N), U: F(153), V: F(153), PX: F(CAP), PY: F(CAP), PU: F(CAP), PV: F(CAP), PB: D(CAP), PL: F(CAP), PS: F(CAP), PK: F(CAP), PD: F(CAP),\n    DX: F(ND), DY: F(ND), DB: D(ND), DL: F(ND), DA: F(ND), head: 0, tail: 0, tf: 0, td: 0, wr: 99, tw: -99, ox: 0, oy: 0,\n    tsf: 1, tsd: 1, field: 0.06, src: 0, lamp: [...LAMPS[0]], k1: -1, live: 0, pend: [], cnt: [0, 0, 0, 0, 0, 0, 0].map(() => -log(1 - rnd())),\n  };\n  const S = params.s;\n  for (let j = 0; j \u003c ND; j++) drop(S, j, -rnd() * 1.4);\n}\n\nfunction puff(S, x, y, sig, I, life, D) {\n  const i = S.head++ & (CAP - 1), a = rnd() * 6.283, v = 0.1 + 0.35 * rnd();\n  if (S.head - S.tail > CAP) S.tail = S.head - CAP;\n  S.PX[i] = x;\n  S.PY[i] = y;\n  // Each droplet wanders a little on its own, so an old trail frays.\n  S.PU[i] = v * cos(a);\n  S.PV[i] = v * sin(a);\n  S.PB[i] = S.tf;\n  S.PL[i] = life * (0.85 + 0.3 * rnd());\n  S.PS[i] = 2 * sig * sig;\n  // Scaled so a line of droplets DS apart peaks at I.\n  S.PK[i] = I * sig * DS * 0.798;\n  S.PD[i] = D;\n}\n\n// Lays a trail of droplets from x, y heading th. A charge q bends it in the\n// field; a slowing particle bends tighter and scatters more toward its end.\n// With clip set it starts outside and stops once it has crossed the panel.\nfunction trail(S, x, y, th, len, k, q, R0, clip, I = k.I) {\n  const n = max(1, ceil(len / DS)), f = S.field, life = k.life * (0.85 + 0.3 * rnd());\n  let inside = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const rem = 1 - j / n, inn = x > -2 && x \u003c W + 2 && y > -2 && y \u003c H + 2;\n    if (clip) {\n      if (inn) inside = 1;\n      else if (inside) break;\n    }\n    if (inn && rnd() >= k.gap) puff(S, x, y, k.sig * (1 + 0.3 * k.br * (1 - rem) ** 2), I * (1 + k.bead * (rnd() * 2 - 1)) * (1 + k.br * (1 - rem) ** 2), life, k.D);\n    // A knock-on electron kicked sideways out of the trail.\n    if (k.dl && inn && rnd() \u003c k.dl * DS) {\n      const s = rnd() \u003c 0.5 ? -1 : 1;\n      trail(S, x, y, th + s * (0.9 + 0.6 * rnd()), 3 + 11 * rnd(), DE, -1, 2 + 5 * rnd(), 0);\n    }\n    const R = R0 * (k.slow ? sqrt(rem + 0.03) : 1);\n    th += q * min(0.5, (f * DS) / R) + (k.sc * gauss() * SQ) / (k.slow ? sqrt(rem + 0.12) : 1);\n    x += cos(th) * DS;\n    y += sin(th) * DS;\n  }\n  return [x, y, th];\n}\n\nconst beta = (S, x, y, th, len) => trail(S, x, y, th, len, BE, rnd() \u003c 0.9 ? -1 : 1, 8 + 22 * rnd(), 0);\n\n// A muon through a point of the chamber; most cross it the long way.\nfunction muon(S, px, py, th) {\n  const stop = rnd() \u003c 0.1, len = stop ? 170 + 60 * rnd() : 400;\n  const e = trail(S, px - cos(th) * 170, py - sin(th) * 170, th, len, MU, rnd() \u003c 0.55 ? 1 : -1, 220 + 380 * rnd(), 1);\n  // One that stops in the chamber decays: an electron leaves its end at an angle.\n  if (stop && e[0] > 0 && e[0] \u003c W && e[1] > 0 && e[1] \u003c H) beta(S, e[0], e[1], e[2] + (rnd() \u003c 0.5 ? -1 : 1) * (0.6 + 1.8 * rnd()), 30 + 30 * rnd());\n}\nconst steep = () => (rnd() \u003c 0.62 ? PI / 2 + 0.45 * gauss() + (rnd() \u003c 0.5 ? PI : 0) : rnd() * 2 * PI);\n\n// An alpha: short, thick, dead straight, thickest at its end. Now and then it\n// glances off a nucleus near its end and the recoil leaves a stub: a fork.\nfunction alpha(S, x, y, th, len) {\n  if (rnd() \u003c 0.14 && len > 7) {\n    const e = trail(S, x, y, th, len * 0.75, AL, 1, 6000, 0, AL.I * 0.9), s = rnd() \u003c 0.5 ? -1 : 1;\n    trail(S, e[0], e[1], e[2] + s * (0.4 + 0.6 * rnd()), len * 0.3, AL, 1, 6000, 0);\n    trail(S, e[0], e[1], e[2] - s * (0.9 + 0.6 * rnd()), 1.5 + 2 * rnd(), AL, 1, 6000, 0, AL.I * 1.3);\n  } else trail(S, x, y, th, len, AL, 1, 6000, 0);\n}\n\n// A cosmic proton breaks up a nucleus: a thin track in and a star of thick prongs.\nfunction star(S) {\n  const x = 10 + 44 * rnd(), y = 16 + 96 * rnd(), th = steep();\n  trail(S, x - cos(th) * 90, y - sin(th) * 90, th, 90, MU, 1, 600, 0);\n  for (let j = 0, n = 2 + floor(rnd() * 3); j \u003c n; j++) trail(S, x, y, rnd() * 2 * PI, 5 + 16 * rnd(), PR, 1, 900, 0);\n  if (rnd() \u003c 0.5) trail(S, x, y, th + gauss() * 0.6, 40 + 40 * rnd(), MU, rnd() \u003c 0.5 ? 1 : -1, 300, 1);\n}\n\n// A shower: one direction for all, muons in parallel and electrons beside them.\nfunction shower(S) {\n  const th = steep(), c = cos(th), s = sin(th), n = 7 + floor(rnd() * 5);\n  for (let j = 0; j \u003c n; j++) {\n    const o = (rnd() * 2 - 1) * 34;\n    muon(S, 32 - s * o + c * gauss() * 20, 64 + c * o + s * gauss() * 20, th + 0.012 * gauss());\n  }\n  for (let j = 0, m = 3 + floor(rnd() * 4); j \u003c m; j++) {\n    const o = (rnd() * 2 - 1) * 30, a = (rnd() * 2 - 1) * 50;\n    beta(S, 32 - s * o + c * a, 64 + c * o + s * a, th + 0.2 * gauss(), 25 + 40 * rnd());\n  }\n}\n\nfunction spawn(S, k) {\n  const src = S.src;\n  if (k === 0) muon(S, rnd() * W, rnd() * H, steep());\n  // A steep muon crosses the thin sensitive layer in a few LEDs.\n  else if (k === 1) trail(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd(), MU, 1, 400, 0);\n  else if (k === 2) beta(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 18 + 55 * rnd());\n  // Radon in the air: an alpha anywhere, foreshortened when it leaves the layer.\n  else if (k === 3) alpha(S, 3 + rnd() * (W - 3), rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd() ** 0.7);\n  else if (k === 4) star(S);\n  else if (k === 5) {\n    const t = -PI / 2 + (rnd() * 2 - 1) * 1.35;\n    trail(S, SX + cos(t) * 1.5, SY + 1 + sin(t) * 1.5, t, 11 + 18 * rnd(), AS, 1, 6000, 0);\n  } else if (k === 6 && src > 0.02) {\n    // Thoron off the rod; its daughter decays a fraction of a second later from the same point.\n    const x = cl(SX + gauss() * 13, 4, W - 2), y = SY - 6 - 40 * rnd() ** 1.5;\n    alpha(S, x, y, rnd() * 2 * PI, 6 + 10 * rnd());\n    S.pend.push([S.tf + 0.1 + 0.3 * rnd(), x, y]);\n  }\n}\n\n// The vapour's slow convection on a grid of 9 by 17 nodes, 8 LEDs apart: the\n// curl of a few drifting waves, so it neither piles up nor thins out, and a\n// gentle drift that turns round over a minute or two.\nconst MODES = [[0.09, 0.05, 0.11, 0, 9], [-0.06, 0.08, -0.09, 2, 8], [0.13, -0.11, 0.13, 4, 4], [0.03, 0.12, 0.07, 1.3, 6]];\nfunction flow(S) {\n  const t = S.td, mu = 0.45 * cos(t * 0.05), mv = 0.45 * sin(t * 0.07 + 1);\n  for (let j = 0; j \u003c 17; j++)\n    for (let i = 0; i \u003c 9; i++) {\n      let u = mu, v = mv;\n      for (const [kx, ky, w, p, a] of MODES) {\n        const c = a * cos(kx * i * 8 + ky * j * 8 + w * t + p);\n        u += ky * c;\n        v -= kx * c;\n      }\n      S.U[j * 9 + i] = u;\n      S.V[j * 9 + i] = v;\n    }\n  return [mu, mv];\n}\nfunction vel(S, x, y, out) {\n  const gx = cl(x / 8, 0, 7.999), gy = cl(y / 8, 0, 15.999), i = floor(gx), j = floor(gy), u = gx - i, v = gy - j, k = j * 9 + i;\n  out[0] = mix(mix(S.U[k], S.U[k + 1], u), mix(S.U[k + 9], S.U[k + 10], u), v);\n  out[1] = mix(mix(S.V[k], S.V[k + 1], u), mix(S.V[k + 9], S.V[k + 10], u), v);\n}\n\n// The drizzle: droplets raining out of the mist, seen as they cross the light.\nfunction drop(S, j, b) {\n  S.DX[j] = rnd() * W;\n  S.DY[j] = rnd() * H;\n  S.DB[j] = S.tf + b;\n  S.DL[j] = 0.45 + 1.1 * rnd();\n  S.DA[j] = 0.08 + 0.28 * rnd();\n}\n\nconst UV = new Float32Array(2);\nfunction step(S, d) {\n  const df = d * S.tsf, dd = d * S.tsd;\n  (S.tf += df), (S.td += dd), (S.wr += d);\n  const [mu, mv] = flow(S);\n  (S.ox += mu * dd), (S.oy += mv * dd);\n  // Births run on the fade clock, so the chamber holds as many trails at any speed.\n  if (S.wr > 1.2) {\n    const rate = [0.75, 1.1, 2.4, 0.9, 0.05, 5 * S.src ** 1.5, 0.6 * S.src];\n    for (let k = 0; k \u003c 7; k++) for (S.cnt[k] -= rate[k] * df; S.cnt[k] \u003c= 0; S.cnt[k] -= log(1 - rnd())) spawn(S, k);\n  }\n  for (const p of S.pend) if (p[0] \u003c= S.tf) alpha(S, p[1], p[2], rnd() * 2 * PI, 6 + 10 * rnd()), (p[0] = -1);\n  S.pend = S.pend.filter((p) => p[0] > 0);\n  const { PX, PY, PU, PV, PB, PL } = S;\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1);\n    if (S.tf - PB[i] > PL[i]) continue;\n    vel(S, PX[i], PY[i], UV);\n    PX[i] += (UV[0] + PU[i]) * dd;\n    PY[i] += (UV[1] + PV[i]) * dd;\n  }\n  while (S.tail \u003c S.head && S.tf - PB[S.tail & (CAP - 1)] > PL[S.tail & (CAP - 1)]) S.tail++;\n  for (let j = 0; j \u003c ND; j++) {\n    if (S.tf - S.DB[j] > S.DL[j]) drop(S, j, 0);\n    vel(S, S.DX[j], S.DY[j], UV);\n    S.DX[j] += UV[0] * dd;\n    S.DY[j] += UV[1] * dd;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2, k1 = cl(k[0], 0, 1);\n  (S.field = cl(k[3], 0, 1)), (S.src = cl(k[2], 0, 1)), (S.tsd = sp), (S.tsf = sp ** 0.6);\n  if (k1 !== S.k1) {\n    const f = k1 * 3, a = min(2, floor(f)), u = sm(0, 1, f - a);\n    for (let j = 0; j \u003c 8; j++) S.lamp[j] = mix(LAMPS[a][j], LAMPS[a + 1][j], u);\n    S.k1 = k1;\n  }\n  // Start with the chamber already running.\n  for (; !S.live; S.live = 1) while (S.tf \u003c 4.5) step(S, 1 / 30);\n  const b = input.btnPressed || [];\n  if (b[0]) shower(S);\n  if (b[1] && S.wr > 0.3) (S.tw = S.tf), (S.wr = 0);\n  step(S, cl(dt || 0, 0, 0.1));\n}\n\nfunction splat(T, x, y, s2, a) {\n  const r = sqrt(3.5 * s2), k = 32 / s2, x0 = max(0, ceil(x - 0.5 - r)), x1 = min(W - 1, floor(x - 0.5 + r)), y0 = max(0, ceil(y - 0.5 - r)), y1 = min(H - 1, floor(y - 0.5 + r));\n  for (let py = y0; py \u003c= y1; py++) {\n    const dy = py + 0.5 - y, d2 = dy * dy, o = py * W;\n    for (let px = x0; px \u003c= x1; px++) {\n      const dx = px + 0.5 - x, q = ((dx * dx + d2) * k) | 0;\n      if (q \u003c GN) T[o + px] += a * GL[q];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.live) return;\n  const { T, PX, PY, PB, PL, PS, PK, PD, lamp } = S, tf = S.tf, tin = 0.07 * S.tsf;\n  // After a clear the old trails blur and fade within a second; the mist dims and comes back.\n  const wq = exp(-S.wr / 0.3), wipe = S.wr \u003c 2.5 ? sm(0, 0.25, S.wr) * exp(-S.wr / 1.1) : 0;\n  T.fill(0);\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1), a = tf - PB[i], L = PL[i];\n    if (a > L) continue;\n    const old = PB[i] \u003c S.tw;\n    if (old && S.wr > 2) continue;\n    // Fresh droplets catch the light hardest for the first half second.\n    let s2 = PS[i] + 2 * PD[i] * a, e = min(1, a / tin) * (1 - sm(0.12, 1, a / L)) * (1 + 0.6 * exp(-a / 0.4));\n    if (old) (s2 += 3 * (1 - wq)), (e *= wq);\n    // Once a trail has spread wider than the droplet spacing, every second\n    // or fourth droplet stands for its neighbours.\n    let m = 1;\n    if (s2 > 5) {\n      if (n & 3) continue;\n      m = 4;\n    } else if (s2 > 2.2) {\n      if (n & 1) continue;\n      m = 2;\n    }\n    if (e > 0.004) splat(T, PX[i], PY[i], s2, (m * PK[i] * e) / s2);\n  }\n  // Drizzle, brightest in the light near the wall, heavier just after a clear.\n  const dz = lamp[6] * (1 + 2.5 * wipe);\n  for (let j = 0; j \u003c ND; j++) {\n    const u = (tf - S.DB[j]) / S.DL[j];\n    if (u \u003c= 0 || u >= 1) continue;\n    const x = S.DX[j] - 0.5, y = S.DY[j] - 0.5, xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n    const a = dz * S.DA[j] * sin(u * PI) ** 2 * (0.3 + 0.7 * exp(-S.DX[j] / 16));\n    if (xi \u003c 0 || yi \u003c 0 || xi >= W - 1 || yi >= H - 1) continue;\n    const o = yi * W + xi;\n    T[o] += a * (1 - fx) * (1 - fy);\n    T[o + 1] += a * fx * (1 - fy);\n    T[o + W] += a * (1 - fx) * fy;\n    T[o + W + 1] += a * fx * fy;\n  }\n  const [cr, cg, cb, g1, w1, g2, , tg] = lamp, rod = sm(0.01, 0.06, S.src), mist = 1 - 0.7 * wipe, ox = S.ox, oy = S.oy;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (x === 0) {\n        // The lamp strip itself, through the glass at the chamber's rim.\n        const v = 0.92 * STRIP[y] * (1 - 0.3 * wipe);\n        display.setPixel(0, y, 255 * v * mix(cr, 1, 0.4), 255 * v * mix(cg, 1, 0.4), 255 * v * mix(cb, 1, 0.4));\n        continue;\n      }\n      const n = 0.6 * nz(x * 0.9 - ox * 0.9, y * 0.55 - oy * 0.55) + 0.4 * nz(x * 1.7 - ox * 1.6 + 17, y * 1.1 - oy * 1.4 + 29);\n      const h = (g1 * exp(-(x - 1) / w1) + g2 * exp(-x / 40)) * (1.7 * n * n) * mist;\n      let t = T[i] * LIT[x] * tg, g = 0;\n      // The rod: dull metal lit from the lamp side.\n      if (rod > 0 && y > SY - 0.5 && x > SX - 2 && x \u003c SX + 1) g = rod * (x \u003c SX - 0.5 ? 0.42 : 0.24) * (y \u003c SY + 0.5 ? 1.25 : 1);\n      const v = min(1, (1 - exp(-1.6 * (t + h + g))) * 1.25), wf = 0.8 * sm(0.1, 0.8, t) + 0.6 * g;\n      display.setPixel(x, y, 255 * v * mix(cr, 1, wf), 255 * v * mix(cg, 1, wf), 255 * v * mix(cb, 1, wf));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often."},{"name":"Source","min":0,"max":1,"about":"A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point."},{"name":"Field","min":0,"max":1,"about":"A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way."}],"start":[0,2,0,0.06],"measures":{"motion":0.104,"detail":0.0456,"edges":0.3473,"complexity":1.374,"coverage":0.2504,"colour":0.0521,"drift":0.0923},"knobResponse":[0.046,0.1102,0.1287,0.0714]},{"slug":"constant-width","title":"Constant Width","family":"geometry","round":35,"note":"너비 62 LED 의 통로를 폭이 일정한 곡선이 위아래로 맞닿아 쌓인 채 내려가요. 뢸로 삼각형과 오각형, 칠각형, 홀수 배음으로 지은 매끈한 곡선과 원이 저마다 다른 빠르기로 도는데도 늘 두 벽과 위아래 경계선에 닿고, 닿은 자리마다 흰 점이 서요. K3 은 곡선마다 같은 너비의 원을 섞어 둘레 194.8 은 그대로 두고 삼각형의 넓이 2709 LED 를 원의 3019 까지 부풀리고, K1 을 누르면 꼭짓점이 지나간 길이 금색으로 남아 삼각형이 귀만 둥근 정사각형을 그려요.","idea":"A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.","buttons":"K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.","code":"// ===== Patternflow pattern =====\n// Title:   Constant Width\n// Family:  geometry\n// Idea:    A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Curves of constant width, the Reuleaux polygons (Franz Reuleaux, 1876), and Barbier's theorem that they all have perimeter pi times their width (Joseph-Émile Barbier, 1860)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1\n//\n// Knob 1: Hue. Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive.\n// Knob 2: Speed. How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100.\n// Knob 3: Round. Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way.\n// Knob 4: Spin. How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that.\n// Buttons: K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.\n\nconst W = 64, H = 128, WD = 62, N = 256, CYCLE = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The eight curves of the cycle, all of width WD. A Reuleaux n-gon is the\n// intersection of the n disks of radius WD centred on the corners of a\n// regular n-gon whose corner-to-far-corner distance is WD. A harmonic curve\n// has support function h = WD/2 + sum a cos(k t + c) over odd k from 3 up:\n// odd k is what makes h(t) + h(t + pi) = WD, the width in every direction,\n// and the radius of curvature h + h'' = WD/2 - sum a (k^2 - 1) cos(k t + c)\n// stays above 0, so it is convex. The amplitudes below keep that radius at\n// least 2 LEDs.\nconst SHAPES = [\n  { n: 3 },\n  { harm: [[3, 3.6, 0]] },\n  { n: 5 },\n  { harm: [[3, 2.2, 0], [5, 0.5, 1.1]] },\n  { n: 7 },\n  { disc: true },\n  { n: 3 },\n  { harm: [[3, 2.6, 0], [7, 0.16, 2.0]] },\n];\n// Base hue and brightness for each place in the cycle. The sharp curves are\n// lit brighter than the smooth ones, so the column reads as light and deep\n// shapes taking turns as it slides. The map's drift comes mostly from the\n// dark corners of each square, which swing round as the curves turn: with\n// all eight at one brightness it reads 0.263, with these 0.277.\nconst BASE = [[0.13, 0.86], [0.76, 0.55], [0.95, 0.86], [0.6, 0.55], [0.48, 0.86], [0.68, 0.55], [0.3, 0.86], [0.54, 0.55]];\n// The body angles each curve's trace follows: the n corners of a Reuleaux\n// polygon and the k peaks of a curve with one harmonic, which all run round\n// the same path, and for a curve of two harmonics the one point where its\n// support function peaks, since its corners are not alike and each would\n// draw a path of its own.\nfor (const s of SHAPES) {\n  if (s.n) s.tr = Array.from({ length: s.n }, (_, c) => (TAU * c) / s.n);\n  else if (s.harm && s.harm.length === 1) {\n    const [k, , c0] = s.harm[0];\n    s.tr = Array.from({ length: k }, (_, m) => (TAU * m - c0) / k);\n  } else if (s.harm) {\n    let best = -1e9, at = 0;\n    for (let i = 0; i \u003c 3600; i++) {\n      const b = (TAU * i) / 3600;\n      let h = 0;\n      for (const [k, a, c] of s.harm) h += a * cos(k * b + c);\n      if (h > best) (best = h), (at = b);\n    }\n    s.tr = [at];\n  } else s.tr = [0];\n}\n\n// Support function h and its derivative at body angle b, for a curve mixed\n// a share t of the way to the disc.\nfunction support(s, b, t, out) {\n  let h, d;\n  if (s.n) {\n    const n = s.n, R = WD / (2 * cos(PI / (2 * n))), step = TAU / n, half = PI / (2 * n);\n    let del = b - round(b / step) * step;\n    if (abs(del) \u003c= half) (h = R * cos(del)), (d = -R * sin(del));\n    else {\n      // The opposite direction falls in a corner's cone, so here the curve\n      // is the arc of radius WD round that corner.\n      const b2 = b + PI;\n      del = b2 - round(b2 / step) * step;\n      (h = WD - R * cos(del)), (d = R * sin(del));\n    }\n  } else if (s.harm) {\n    (h = WD / 2), (d = 0);\n    for (const [k, a, c] of s.harm) (h += a * cos(k * b + c)), (d -= a * k * sin(k * b + c));\n  } else (h = WD / 2), (d = 0);\n  out[0] = (1 - t) * h + (t * WD) / 2;\n  out[1] = (1 - t) * d;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, round: 0, spin: 0.06,\n    // The column's slide in rows and the spin clock in radians.\n    slide: 15, clock: 0,\n    trace: false, traces: new Map(),\n    px: new Float32Array(N), py: new Float32Array(N),\n    xl: new Float32Array(H), xr: new Float32Array(H),\n    lab: new Int8Array(W * H), rgb: new Float32Array(W * H * 3),\n    col: new Float32Array(CYCLE * 6), colHue: NaN, sup: new Float32Array(2),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.round = cl(k[2], 0, 1);\n  P.spin = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.trace = !P.trace;\n    P.traces.clear();\n  }\n  P.slide += d * P.speed * 3;\n  P.clock += d * (0.4 + 2.6 * P.spin);\n}\n\n// The angle a curve in slot j has turned to: neighbours turn opposite ways,\n// each at a rate between 0.7 and 1.3 times the clock, from a start of its own.\nconst angle = (j, clock) => hash(j * 3 + 1) * TAU + (j & 1 ? -1 : 1) * (0.7 + 0.6 * hash(j * 3 + 2)) * clock;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { px, py, xl, xr, lab, rgb, col, sup, traces } = P;\n  if (P.colHue !== P.hue) {\n    // Fill and rim colours for each place in the cycle. The rim is the fill\n    // pushed to full brightness and halfway to white, at least 40 levels\n    // above every fill so it reads as a hard line.\n    // A deep fill from orange round to lime reads as brown or olive, so in\n    // that band the deep curves are lifted toward the light ones' level and\n    // paled a little.\n    for (let c = 0; c \u003c CYCLE; c++) {\n      const h = P.hue + BASE[c][0], hf = h - floor(h), band = BASE[c][1] \u003c 0.7 ? max(0, 1 - abs(hf - 0.14) / 0.15) : 0;\n      hsv(h, 0.8 - 0.22 * band, (BASE[c][1] + 0.3 * band) * 0.94, col, c * 6);\n      hsv(h, 0.45, 1, col, c * 6 + 3);\n    }\n    P.colHue = P.hue;\n  }\n  lab.fill(0);\n  rgb.fill(0);\n  // Slot j's top line sits at row slide - j * WD: the slots stack upward\n  // with j and the column slides down as slide grows.\n  const jLo = floor((P.slide - H) / WD), jHi = ceil(P.slide / WD);\n  const vis = [];\n  for (let j = jLo; j \u003c= jHi; j++) {\n    const top = P.slide - j * WD;\n    if (top >= H || top + WD \u003c= 0) continue;\n    const shape = SHAPES[((j % CYCLE) + CYCLE) % CYCLE], phi = angle(j, P.clock);\n    // Boundary points from the support function, panel direction a = 2 pi i\n    // / N: the point is h u(a) + h' u'(a) with the body angle a - phi. The\n    // panel's y runs down, so i = N/2 faces the left wall and 3N/4 faces up.\n    for (let i = 0; i \u003c N; i++) {\n      const a = (TAU * i) / N, ca = cos(a), sa = sin(a);\n      support(shape, a - phi, P.round, sup);\n      px[i] = sup[0] * ca - sup[1] * sa;\n      py[i] = sup[0] * sa + sup[1] * ca;\n    }\n    // The left support line on the inner face of the left wall, x = 1, and\n    // the top one on the slot's top line. The width is WD in every\n    // direction, so the right one lands on x = 63 and the bottom one on the\n    // next slot's top line without being placed there.\n    const ox = 1 - px[N / 2], oy = top - py[(3 * N) / 4];\n    const label = vis.length + 1;\n    xl.fill(1e9);\n    xr.fill(-1e9);\n    for (let i = 0; i \u003c N; i++) {\n      const xa = px[i] + ox, ya = py[i] + oy, i2 = (i + 1) % N, xb = px[i2] + ox, yb = py[i2] + oy;\n      if (ya === yb) continue;\n      const r0 = max(0, ceil(min(ya, yb) - 0.5)), r1 = min(H - 1, floor(max(ya, yb) - 0.5));\n      for (let r = r0; r \u003c= r1; r++) {\n        const x = xa + ((r + 0.5 - ya) * (xb - xa)) / (yb - ya);\n        if (x \u003c xl[r]) xl[r] = x;\n        if (x > xr[r]) xr[r] = x;\n      }\n    }\n    for (let r = max(0, floor(top)); r \u003c= min(H - 1, ceil(top + WD)); r++) {\n      if (xr[r] \u003c xl[r]) continue;\n      const x0 = max(1, ceil(xl[r] - 0.5)), x1 = min(W - 2, floor(xr[r] - 0.5));\n      for (let x = x0; x \u003c= x1; x++) lab[r * W + x] = label;\n    }\n    vis.push({\n      j, top, c: ((j % CYCLE) + CYCLE) % CYCLE, shape, phi, ox, oy,\n      left: py[N / 2] + oy, right: py[0] + oy, upX: px[(3 * N) / 4] + ox, downX: px[N / 4] + ox,\n    });\n  }\n  // Fill, with a rim wherever a 4-neighbour belongs to something else.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, l = lab[p];\n      if (!l) continue;\n      const rim = lab[p - 1] !== l || lab[p + 1] !== l || (y > 0 && lab[p - W] !== l) || (y \u003c H - 1 && lab[p + W] !== l);\n      const o = vis[l - 1].c * 6 + (rim ? 3 : 0), q = p * 3;\n      (rgb[q] = col[o]), (rgb[q + 1] = col[o + 1]), (rgb[q + 2] = col[o + 2]);\n    }\n  // The walls: dim slate, brighter where a slot's line meets them, and white\n  // over five rows where a curve touches them.\n  for (let y = 0; y \u003c H; y++)\n    for (const x of [0, W - 1]) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = 0.14), (rgb[q + 1] = 0.18), (rgb[q + 2] = 0.24);\n    }\n  const dot = (x, y, r, g, b) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    (rgb[q] = r), (rgb[q + 1] = g), (rgb[q + 2] = b);\n  };\n  for (const v of vis) {\n    const ty = floor(v.top);\n    for (const x of [0, W - 1]) dot(x, ty, 0.55, 0.6, 0.7);\n    for (let e = -2; e \u003c= 2; e++) dot(0, floor(v.left) + e, 1, 1, 1), dot(W - 1, floor(v.right) + e, 1, 1, 1);\n    // Above and below: a small white cross where the curve meets the line.\n    for (const [cx, cy] of [[v.upX, v.top], [v.downX, v.top + WD]]) {\n      const x = floor(cx), y = floor(cy - (cy === v.top ? 0 : 1e-3));\n      dot(x, y, 1, 1, 1), dot(x - 1, y, 1, 1, 1), dot(x + 1, y, 1, 1, 1), dot(x, y - 1, 1, 1, 1), dot(x, y + 1, 1, 1, 1);\n    }\n  }\n  // The corner trace, kept in each slot's own square so it slides with it.\n  if (P.trace) {\n    const seen = new Set();\n    for (const v of vis) {\n      seen.add(v.j);\n      let t = traces.get(v.j);\n      if (!t) traces.set(v.j, (t = { xs: [], ys: [], last: null }));\n      const tr = v.shape.tr, m = tr.length, now = [];\n      for (let c = 0; c \u003c m; c++) {\n        // At a peak of the support function h' is 0, so the point is h times\n        // the unit vector there.\n        const a = tr[c] + v.phi;\n        support(v.shape, tr[c], P.round, sup);\n        const ca = cos(a), sa = sin(a);\n        now.push([sup[0] * ca - sup[1] * sa + v.ox, sup[0] * sa + sup[1] * ca + v.oy - v.top]);\n      }\n      if (t.xs.length \u003c 12000)\n        for (let c = 0; c \u003c m; c++) {\n          const [x1, y1] = now[c], [x0, y0] = t.last ? t.last[c] : now[c];\n          const steps = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.7));\n          for (let s = 1; s \u003c= steps; s++) t.xs.push(x0 + ((x1 - x0) * s) / steps), t.ys.push(y0 + ((y1 - y0) * s) / steps);\n        }\n      t.last = now;\n      for (let i = 0; i \u003c t.xs.length; i++) dot(floor(t.xs[i]), floor(t.ys[i] + v.top), 1, 0.78, 0.25);\n    }\n    for (const j of traces.keys()) if (!seen.has(j)) traces.delete(j);\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-constant-width","type":"code","name":"constant-width","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Constant Width\n// Family:  geometry\n// Idea:    A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Curves of constant width, the Reuleaux polygons (Franz Reuleaux, 1876), and Barbier's theorem that they all have perimeter pi times their width (Joseph-Émile Barbier, 1860)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1\n//\n// Knob 1: Hue. Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive.\n// Knob 2: Speed. How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100.\n// Knob 3: Round. Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way.\n// Knob 4: Spin. How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that.\n// Buttons: K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.\n\nconst W = 64, H = 128, WD = 62, N = 256, CYCLE = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The eight curves of the cycle, all of width WD. A Reuleaux n-gon is the\n// intersection of the n disks of radius WD centred on the corners of a\n// regular n-gon whose corner-to-far-corner distance is WD. A harmonic curve\n// has support function h = WD/2 + sum a cos(k t + c) over odd k from 3 up:\n// odd k is what makes h(t) + h(t + pi) = WD, the width in every direction,\n// and the radius of curvature h + h'' = WD/2 - sum a (k^2 - 1) cos(k t + c)\n// stays above 0, so it is convex. The amplitudes below keep that radius at\n// least 2 LEDs.\nconst SHAPES = [\n  { n: 3 },\n  { harm: [[3, 3.6, 0]] },\n  { n: 5 },\n  { harm: [[3, 2.2, 0], [5, 0.5, 1.1]] },\n  { n: 7 },\n  { disc: true },\n  { n: 3 },\n  { harm: [[3, 2.6, 0], [7, 0.16, 2.0]] },\n];\n// Base hue and brightness for each place in the cycle. The sharp curves are\n// lit brighter than the smooth ones, so the column reads as light and deep\n// shapes taking turns as it slides. The map's drift comes mostly from the\n// dark corners of each square, which swing round as the curves turn: with\n// all eight at one brightness it reads 0.263, with these 0.277.\nconst BASE = [[0.13, 0.86], [0.76, 0.55], [0.95, 0.86], [0.6, 0.55], [0.48, 0.86], [0.68, 0.55], [0.3, 0.86], [0.54, 0.55]];\n// The body angles each curve's trace follows: the n corners of a Reuleaux\n// polygon and the k peaks of a curve with one harmonic, which all run round\n// the same path, and for a curve of two harmonics the one point where its\n// support function peaks, since its corners are not alike and each would\n// draw a path of its own.\nfor (const s of SHAPES) {\n  if (s.n) s.tr = Array.from({ length: s.n }, (_, c) => (TAU * c) / s.n);\n  else if (s.harm && s.harm.length === 1) {\n    const [k, , c0] = s.harm[0];\n    s.tr = Array.from({ length: k }, (_, m) => (TAU * m - c0) / k);\n  } else if (s.harm) {\n    let best = -1e9, at = 0;\n    for (let i = 0; i \u003c 3600; i++) {\n      const b = (TAU * i) / 3600;\n      let h = 0;\n      for (const [k, a, c] of s.harm) h += a * cos(k * b + c);\n      if (h > best) (best = h), (at = b);\n    }\n    s.tr = [at];\n  } else s.tr = [0];\n}\n\n// Support function h and its derivative at body angle b, for a curve mixed\n// a share t of the way to the disc.\nfunction support(s, b, t, out) {\n  let h, d;\n  if (s.n) {\n    const n = s.n, R = WD / (2 * cos(PI / (2 * n))), step = TAU / n, half = PI / (2 * n);\n    let del = b - round(b / step) * step;\n    if (abs(del) \u003c= half) (h = R * cos(del)), (d = -R * sin(del));\n    else {\n      // The opposite direction falls in a corner's cone, so here the curve\n      // is the arc of radius WD round that corner.\n      const b2 = b + PI;\n      del = b2 - round(b2 / step) * step;\n      (h = WD - R * cos(del)), (d = R * sin(del));\n    }\n  } else if (s.harm) {\n    (h = WD / 2), (d = 0);\n    for (const [k, a, c] of s.harm) (h += a * cos(k * b + c)), (d -= a * k * sin(k * b + c));\n  } else (h = WD / 2), (d = 0);\n  out[0] = (1 - t) * h + (t * WD) / 2;\n  out[1] = (1 - t) * d;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, round: 0, spin: 0.06,\n    // The column's slide in rows and the spin clock in radians.\n    slide: 15, clock: 0,\n    trace: false, traces: new Map(),\n    px: new Float32Array(N), py: new Float32Array(N),\n    xl: new Float32Array(H), xr: new Float32Array(H),\n    lab: new Int8Array(W * H), rgb: new Float32Array(W * H * 3),\n    col: new Float32Array(CYCLE * 6), colHue: NaN, sup: new Float32Array(2),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.round = cl(k[2], 0, 1);\n  P.spin = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.trace = !P.trace;\n    P.traces.clear();\n  }\n  P.slide += d * P.speed * 3;\n  P.clock += d * (0.4 + 2.6 * P.spin);\n}\n\n// The angle a curve in slot j has turned to: neighbours turn opposite ways,\n// each at a rate between 0.7 and 1.3 times the clock, from a start of its own.\nconst angle = (j, clock) => hash(j * 3 + 1) * TAU + (j & 1 ? -1 : 1) * (0.7 + 0.6 * hash(j * 3 + 2)) * clock;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { px, py, xl, xr, lab, rgb, col, sup, traces } = P;\n  if (P.colHue !== P.hue) {\n    // Fill and rim colours for each place in the cycle. The rim is the fill\n    // pushed to full brightness and halfway to white, at least 40 levels\n    // above every fill so it reads as a hard line.\n    // A deep fill from orange round to lime reads as brown or olive, so in\n    // that band the deep curves are lifted toward the light ones' level and\n    // paled a little.\n    for (let c = 0; c \u003c CYCLE; c++) {\n      const h = P.hue + BASE[c][0], hf = h - floor(h), band = BASE[c][1] \u003c 0.7 ? max(0, 1 - abs(hf - 0.14) / 0.15) : 0;\n      hsv(h, 0.8 - 0.22 * band, (BASE[c][1] + 0.3 * band) * 0.94, col, c * 6);\n      hsv(h, 0.45, 1, col, c * 6 + 3);\n    }\n    P.colHue = P.hue;\n  }\n  lab.fill(0);\n  rgb.fill(0);\n  // Slot j's top line sits at row slide - j * WD: the slots stack upward\n  // with j and the column slides down as slide grows.\n  const jLo = floor((P.slide - H) / WD), jHi = ceil(P.slide / WD);\n  const vis = [];\n  for (let j = jLo; j \u003c= jHi; j++) {\n    const top = P.slide - j * WD;\n    if (top >= H || top + WD \u003c= 0) continue;\n    const shape = SHAPES[((j % CYCLE) + CYCLE) % CYCLE], phi = angle(j, P.clock);\n    // Boundary points from the support function, panel direction a = 2 pi i\n    // / N: the point is h u(a) + h' u'(a) with the body angle a - phi. The\n    // panel's y runs down, so i = N/2 faces the left wall and 3N/4 faces up.\n    for (let i = 0; i \u003c N; i++) {\n      const a = (TAU * i) / N, ca = cos(a), sa = sin(a);\n      support(shape, a - phi, P.round, sup);\n      px[i] = sup[0] * ca - sup[1] * sa;\n      py[i] = sup[0] * sa + sup[1] * ca;\n    }\n    // The left support line on the inner face of the left wall, x = 1, and\n    // the top one on the slot's top line. The width is WD in every\n    // direction, so the right one lands on x = 63 and the bottom one on the\n    // next slot's top line without being placed there.\n    const ox = 1 - px[N / 2], oy = top - py[(3 * N) / 4];\n    const label = vis.length + 1;\n    xl.fill(1e9);\n    xr.fill(-1e9);\n    for (let i = 0; i \u003c N; i++) {\n      const xa = px[i] + ox, ya = py[i] + oy, i2 = (i + 1) % N, xb = px[i2] + ox, yb = py[i2] + oy;\n      if (ya === yb) continue;\n      const r0 = max(0, ceil(min(ya, yb) - 0.5)), r1 = min(H - 1, floor(max(ya, yb) - 0.5));\n      for (let r = r0; r \u003c= r1; r++) {\n        const x = xa + ((r + 0.5 - ya) * (xb - xa)) / (yb - ya);\n        if (x \u003c xl[r]) xl[r] = x;\n        if (x > xr[r]) xr[r] = x;\n      }\n    }\n    for (let r = max(0, floor(top)); r \u003c= min(H - 1, ceil(top + WD)); r++) {\n      if (xr[r] \u003c xl[r]) continue;\n      const x0 = max(1, ceil(xl[r] - 0.5)), x1 = min(W - 2, floor(xr[r] - 0.5));\n      for (let x = x0; x \u003c= x1; x++) lab[r * W + x] = label;\n    }\n    vis.push({\n      j, top, c: ((j % CYCLE) + CYCLE) % CYCLE, shape, phi, ox, oy,\n      left: py[N / 2] + oy, right: py[0] + oy, upX: px[(3 * N) / 4] + ox, downX: px[N / 4] + ox,\n    });\n  }\n  // Fill, with a rim wherever a 4-neighbour belongs to something else.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, l = lab[p];\n      if (!l) continue;\n      const rim = lab[p - 1] !== l || lab[p + 1] !== l || (y > 0 && lab[p - W] !== l) || (y \u003c H - 1 && lab[p + W] !== l);\n      const o = vis[l - 1].c * 6 + (rim ? 3 : 0), q = p * 3;\n      (rgb[q] = col[o]), (rgb[q + 1] = col[o + 1]), (rgb[q + 2] = col[o + 2]);\n    }\n  // The walls: dim slate, brighter where a slot's line meets them, and white\n  // over five rows where a curve touches them.\n  for (let y = 0; y \u003c H; y++)\n    for (const x of [0, W - 1]) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = 0.14), (rgb[q + 1] = 0.18), (rgb[q + 2] = 0.24);\n    }\n  const dot = (x, y, r, g, b) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    (rgb[q] = r), (rgb[q + 1] = g), (rgb[q + 2] = b);\n  };\n  for (const v of vis) {\n    const ty = floor(v.top);\n    for (const x of [0, W - 1]) dot(x, ty, 0.55, 0.6, 0.7);\n    for (let e = -2; e \u003c= 2; e++) dot(0, floor(v.left) + e, 1, 1, 1), dot(W - 1, floor(v.right) + e, 1, 1, 1);\n    // Above and below: a small white cross where the curve meets the line.\n    for (const [cx, cy] of [[v.upX, v.top], [v.downX, v.top + WD]]) {\n      const x = floor(cx), y = floor(cy - (cy === v.top ? 0 : 1e-3));\n      dot(x, y, 1, 1, 1), dot(x - 1, y, 1, 1, 1), dot(x + 1, y, 1, 1, 1), dot(x, y - 1, 1, 1, 1), dot(x, y + 1, 1, 1, 1);\n    }\n  }\n  // The corner trace, kept in each slot's own square so it slides with it.\n  if (P.trace) {\n    const seen = new Set();\n    for (const v of vis) {\n      seen.add(v.j);\n      let t = traces.get(v.j);\n      if (!t) traces.set(v.j, (t = { xs: [], ys: [], last: null }));\n      const tr = v.shape.tr, m = tr.length, now = [];\n      for (let c = 0; c \u003c m; c++) {\n        // At a peak of the support function h' is 0, so the point is h times\n        // the unit vector there.\n        const a = tr[c] + v.phi;\n        support(v.shape, tr[c], P.round, sup);\n        const ca = cos(a), sa = sin(a);\n        now.push([sup[0] * ca - sup[1] * sa + v.ox, sup[0] * sa + sup[1] * ca + v.oy - v.top]);\n      }\n      if (t.xs.length \u003c 12000)\n        for (let c = 0; c \u003c m; c++) {\n          const [x1, y1] = now[c], [x0, y0] = t.last ? t.last[c] : now[c];\n          const steps = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.7));\n          for (let s = 1; s \u003c= steps; s++) t.xs.push(x0 + ((x1 - x0) * s) / steps), t.ys.push(y0 + ((y1 - y0) * s) / steps);\n        }\n      t.last = now;\n      for (let i = 0; i \u003c t.xs.length; i++) dot(floor(t.xs[i]), floor(t.ys[i] + v.top), 1, 0.78, 0.25);\n    }\n    for (const j of traces.keys()) if (!seen.has(j)) traces.delete(j);\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100."},{"name":"Round","min":0,"max":1,"about":"Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way."},{"name":"Spin","min":0,"max":1,"about":"How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that."}],"start":[0,2,0,0.06],"measures":{"motion":0.4094,"detail":0.0438,"edges":1,"complexity":0.0838,"coverage":0.7349,"colour":0.4286,"drift":0.2768},"knobResponse":[0.306,0.2393,0.1029,0.1377]},{"slug":"contour","title":"Contour Map","family":"data","round":2,"note":"천천히 솟고 가라앉는 땅의 지형도예요. 다섯째 등고선마다 밝고, 바닷물이 차오르면 선은 땅에 그대로 남은 채 물 밑으로 들어가요.","idea":"A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","layer":{"id":"layer-contour","type":"code","name":"contour","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink."},{"name":"Morph","min":0,"max":6,"about":"How fast the land rises and sinks; 0 holds the map still."},{"name":"Interval","min":50,"max":200,"about":"Metres between contour lines, from a dense survey at 50 to a few wide rings at 200."},{"name":"Sea level","min":-300,"max":600,"about":"Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water."}],"start":[0,2,50,0.06],"measures":{"motion":0.059,"detail":0.1124,"edges":0.4216,"complexity":2.7352,"coverage":1,"colour":0.2347,"drift":0.0329},"knobResponse":[0.3087,0.1314,0.1058,0.2222]},{"slug":"couette-shimmer","title":"Couette Shimmer","family":"cosmetic","round":38,"note":"두 원통 사이에 든 펄 세럼을 옆에서 봐요. 안쪽 원통이 빨라지면 옆으로 흐르던 결이 테일러 소용돌이의 밝고 어두운 띠로 128줄을 쌓고, 더 빨라지면 띠가 물결치며 원통을 돌아요. K3 은 띠를 다섯 쌍에서 열네 쌍으로 늘려 가는 골로 만들고, K4 는 바깥 원통을 거꾸로 돌려 띠를 나선으로 기울여요.","idea":"A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Couette Shimmer\n// Family:  cosmetic\n// Idea:    A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after shimmer serum stirred between two cylinders as rheoscopic fluid shows it (Paul Matisse's Kalliroscope), with the Taylor vortices of Taylor-Couette flow (G. I. Taylor, 1923)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive.\n// Knob 2: Spin. How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in.\n// Knob 3: Rolls. How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing.\n// Knob 4: Counter. How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986).\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, asin, exp, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The cylinder seen from the side: column x looks at angle TH[x] round it,\n// the front half from -1.29 to 1.29 radians, so a thing going round slows\n// and narrows toward the panel's edges. ARC is the distance round the\n// surface in LEDs, the cylinder 32 LEDs in radius.\nconst TH = new Float32Array(W), ARC = new Float32Array(W), SHADE = new Float32Array(W), SPEC = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const xn = (x + 0.5) / 32 - 1, th = asin(0.96 * xn);\n  TH[x] = th;\n  ARC[x] = th * 32;\n  // Light from the front and a little to the left: the serum dims toward\n  // the cylinder's edges, and a soft upright highlight sits left of centre.\n  SHADE[x] = 0.62 + 0.38 * cos(th + 0.2);\n  SPEC[x] = exp(-(((th + 0.42) / 0.32) ** 2));\n}\n\n// What the aligned mica reflects across one pair of rolls, phase 0 to 2 pi:\n// the outflow boundary at 0, where the serum leaves the inner cylinder and\n// spreads against the outer one; the inflow boundary at pi. In one roll\n// the serum at the outer wall runs up, in the next down, so the flakes there\n// lean one way and then the other and the light catches one roll and not\n// the next. A thin dark line marks the outflow, where the flakes stand on\n// edge, and a thin bright one the inflow.\nconst NR = 512, REFL = new Float32Array(NR);\nfor (let i = 0; i \u003c NR; i++) {\n  const ph = (i / NR) * TAU, s = sin(ph);\n  const d0 = min(ph, TAU - ph), dp = abs(ph - PI);\n  REFL[i] = cl(0.5 + 0.34 * (s >= 0 ? s ** 0.6 : -((-s) ** 0.6)) - 0.42 * exp(-((d0 / 0.3) ** 2)) + 0.3 * exp(-((dp / 0.22) ** 2)), 0, 1);\n}\nconst refl = (ph) => {\n  const u = (ph / TAU) % 1;\n  return REFL[((u \u003c 0 ? u + 1 : u) * NR) | 0];\n};\n\n// Streak texture: random values on a 64 by 128 grid, read stretched 6 times\n// sideways, so the flakes the flow has lined up show as long streaks.\nconst NU = 64, NV = 128;\n\nexport function setup(params) {\n  const noise = new Float32Array(NU * NV);\n  for (let i = 0; i \u003c noise.length; i++) noise[i] = random();\n  const rate = new Float32Array(H);\n  for (let y = 0; y \u003c H; y++) rate[y] = 0.85 + 0.3 * random();\n  const glints = [];\n  for (let i = 0; i \u003c 220; i++) glints.push({ a: random() * 2.6 - 1.3, y: random() * H, ph: random() * TAU, w: 0.6 + 0.8 * random() });\n  params.s = {\n    hue: 0, spin: 2, rolls: 5, counter: 0, warm: 0, t: 0, ang: 0, wave: 0, spiral: 0, su: 0, begun: false,\n    noise, rate, glints, glow: new Float32Array(N), CA: new Float32Array(W), CB: new Float32Array(W), RA: new Float32Array(H), RB: new Float32Array(H), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n}\n\nfunction nz(S, u, v) {\n  const n = S.noise, fu = floor(u), fv = floor(v), au = u - fu, av = v - fv;\n  const i0 = ((fu % NU) + NU) % NU, i1 = (i0 + 1) % NU, j0 = ((fv % NV) + NV) % NV, j1 = (j0 + 1) % NV;\n  const a = n[j0 * NU + i0] + (n[j0 * NU + i1] - n[j0 * NU + i0]) * au;\n  const b = n[j1 * NU + i0] + (n[j1 * NU + i1] - n[j1 * NU + i0]) * au;\n  return a + (b - a) * av;\n}\n\n// The regimes Spin walks through, as weights 0..1.\nfunction regimes(s) {\n  return {\n    // Taylor vortices from the critical speed 1, full by 1.25.\n    rolls: sqrt(sm(1, 1.25, s)),\n    // Waves on the rolls from 1.2, full by 1.8; quieter again toward 4.\n    waves: sqrt(sm(1.2, 1.8, s)) * (1 - 0.6 * sm(3, 4, s)),\n    // A second, slower wave that modulates the first, from 2.6.\n    modulate: sm(2.6, 3.4, s),\n    // Turbulence inside the rolls from 3.\n    turb: sm(3, 4, s),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.spin = cl(k[1], 0.5, 4);\n  S.rolls = cl(k[2], 5, 14);\n  S.counter = cl(k[3], 0, 1);\n  step(S, d);\n  if (!S.begun) {\n    // Open as if the serum had been turning a while.\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n}\n\nfunction step(S, d) {\n  const s = S.spin;\n  S.t += d;\n  // The streaks run round at 5 LEDs a second per unit of Spin; the inner\n  // cylinder turns at twice that, 0.31 radians a second per unit; the\n  // waves go round at 0.34 of the inner cylinder's rate, as Coles measured.\n  S.su += d * 5 * s;\n  S.ang += d * 0.3125 * s;\n  S.wave += d * 0.34 * 0.3125 * s;\n  S.spiral += d * 0.3125 * s * 0.5;\n  // Glints ride the flow: round with the streaks, and up or down the roll\n  // they are in toward its inflow boundary, where they dive and come back.\n  const R = regimes(s), kk = (TAU * S.rolls) / H;\n  for (const g of S.glints) {\n    g.a += (d * 5 * s) / 32;\n    if (g.a > 1.3) g.a -= 2.6;\n    const ph = kk * (g.y - 63.5);\n    g.y += d * R.rolls * 1.2 * s * sin(ph);\n    if (g.y \u003c 0) g.y += H;\n    if (g.y >= H) g.y -= H;\n    // At the inflow boundary the serum turns in toward the inner cylinder\n    // and the flake goes with it; another comes out somewhere else.\n    if (R.rolls > 0.3 && cos(ph) \u003c -0.93) {\n      g.y = random() * H;\n      g.a = random() * 2.6 - 1.3;\n    }\n    // Tumbling: a flake turns over faster in faster shear.\n    g.ph += d * g.w * (1.2 + 1.6 * s);\n  }\n}\n\nfunction palette(S) {\n  const h = S.hue + 0.74, hh = h - floor(h);\n  // From red through orange and yellow to lime a deep tone reads brown or\n  // olive on the panel, so there the rolls keep their brightness and differ\n  // by saturation instead: full from 0.03 to 0.23 round the wheel, none\n  // beyond 0.96 and 0.3.\n  const dw = abs(((hh - 0.13 + 1.5) % 1) - 0.5), warm = 1 - sm(0.1, 0.17, dw);\n  const c = S.col;\n  // Deep, body, pearl and the highlight that leans round the wheel.\n  hsv(h - 0.02 * warm, 0.82 + 0.06 * warm, 0.3 + 0.55 * warm, c[0]);\n  hsv(h + 0.01, 0.6 - 0.15 * warm, 0.72 + 0.26 * warm, c[1]);\n  hsv(h + 0.12, 0.26 - 0.08 * warm, 1, c[2]);\n  hsv(h - 0.1, 0.12, 1, c[3]);\n  S.warm = warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const R = regimes(S.spin), kk = (TAU * S.rolls) / H, lam = H / S.rolls;\n  // Counter-rotating outer cylinder: from 0.15 the rolls lean into a spiral\n  // that runs down the panel as it turns; from 0.6 a second spiral of the\n  // other hand, turning the same way and so running up, comes in across it.\n  const cr = S.counter, sp1 = 3 * sm(0.15, 0.6, cr), sp2 = sm(0.6, 1, cr);\n  const wv = R.waves * (1 - sm(0.15, 0.45, cr));\n  const m = 6, aw = 0.13 * lam * kk;\n  const c = S.col, glow = S.glow, { CA, CB, RA, RB } = S;\n  // The rolls are not all equally strong: two slow waves of strength, one\n  // drifting round with the serum, cross each other over the panel.\n  for (let x = 0; x \u003c W; x++) {\n    CA[x] = sin(0.09 * ARC[x] - 0.8 * S.ang);\n    CB[x] = cos(0.21 * ARC[x] + 0.5 * S.ang);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    RA[y] = cos(0.045 * y + 0.13 * S.t);\n    RB[y] = sin(0.083 * y - 0.21 * S.t);\n  }\n  glow.fill(0);\n  // Glints: a flake flashes as it turns face on to the light.\n  for (const g of S.glints) {\n    const cw = cos(g.ph);\n    if (cw \u003c 0.85) continue;\n    const xs = (sin(g.a) / 0.96 + 1) * 32 - 0.5, xi = round(xs), yi = round(g.y) % H;\n    if (xi \u003c 0 || xi >= W) continue;\n    const b = ((cw - 0.85) / 0.15) ** 2 * 1.3;\n    glow[yi * W + xi] += b;\n    if (xi > 0) glow[yi * W + xi - 1] += b * 0.3;\n    if (xi \u003c W - 1) glow[yi * W + xi + 1] += b * 0.3;\n    if (yi > 0) glow[(yi - 1) * W + xi] += b * 0.3;\n    if (yi \u003c H - 1) glow[(yi + 1) * W + xi] += b * 0.3;\n  }\n  // The streak texture flows along each roll toward its inflow boundary;\n  // two copies, three seconds apart, take turns so it never smears.\n  const TL = 3, t0 = S.t % TL, t1 = (S.t + TL / 2) % TL, w0 = 1 - abs((2 * t0) / TL - 1);\n  const vz = R.rolls * 1.2 * S.spin;\n  const turbU = 1 + 2 * R.turb;\n  for (let x = 0; x \u003c W; x++) {\n    const th = TH[x], arc = ARC[x];\n    // Axial displacement of the rolls here: the travelling wave, and in the\n    // modulated regime a slower second wave riding on it.\n    const wph = m * (th - S.wave);\n    const wave = aw * wv * sin(wph) * (1 + 0.5 * R.modulate * sin(2 * th - 0.4 * S.wave * m));\n    const spiral1 = sp1 * (th - S.spiral), spiral2 = 3 * sp2 * (th - S.spiral);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let ph = kk * (y - 63.5) + wave;\n      if (R.turb > 0) ph += R.turb * 1.4 * (nz(S, arc / 5 - S.su * 0.4, y * 0.35 + S.t * 0.7) - 0.5);\n      let rf = refl(ph + spiral1);\n      if (sp2 > 0) rf = rf * (1 - 0.5 * sp2) + refl(ph - spiral2) * 0.5 * sp2;\n      const rb = 0.5 + R.rolls * (rf - 0.5) * (1 + 0.16 * CA[x] * RA[y] + 0.1 * CB[x] * RB[y]);\n      // Streaks: the texture moved round with the serum and along the roll.\n      const az = sin(ph + spiral1) * vz, su = S.su * S.rate[y];\n      const a0 = nz(S, ((arc - su) / 10) * turbU, (y - az * t0) * 0.75), a1 = nz(S, ((arc - su) / 10) * turbU + 17, (y - az * t1) * 0.75);\n      const tex = a0 * w0 + a1 * (1 - w0) - 0.5;\n      const sh = SHADE[x], spc = SPEC[x];\n      // Light: the serum's body by the cylinder's shading and the rolls,\n      // the streaks over it, the highlight strongest on the rolls that\n      // catch the light, and the glints.\n      const L = sh * (0.18 + 0.72 * rb) + (0.4 - 0.1 * R.rolls) * tex * sh;\n      const hi = spc * (0.15 + 0.85 * rb * rb) * 0.75 + glow[p];\n      // Deep to body to pearl by L; the highlight toward white.\n      let r, g, b;\n      if (L \u003c 0.5) {\n        const f = cl(L / 0.5, 0, 1);\n        r = c[0][0] + (c[1][0] - c[0][0]) * f;\n        g = c[0][1] + (c[1][1] - c[0][1]) * f;\n        b = c[0][2] + (c[1][2] - c[0][2]) * f;\n      } else {\n        const f = cl((L - 0.5) / 0.45, 0, 1);\n        r = c[1][0] + (c[2][0] - c[1][0]) * f;\n        g = c[1][1] + (c[2][1] - c[1][1]) * f;\n        b = c[1][2] + (c[2][2] - c[1][2]) * f;\n      }\n      const lo = 1 - (1 - cl(L / 0.2, 0, 1)) * (1 - 0.7 * S.warm), hm = min(1, hi);\n      r *= lo;\n      g *= lo;\n      b *= lo;\n      r += (c[3][0] - r) * hm;\n      g += (c[3][1] - g) * hm;\n      b += (c[3][2] - b) * hm;\n      display.setPixel(x, y, round(255 * cl(r, 0, 1)), round(255 * cl(g, 0, 1)), round(255 * cl(b, 0, 1)));\n    }\n  }\n}\n","layer":{"id":"layer-couette-shimmer","type":"code","name":"couette-shimmer","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Couette Shimmer\n// Family:  cosmetic\n// Idea:    A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after shimmer serum stirred between two cylinders as rheoscopic fluid shows it (Paul Matisse's Kalliroscope), with the Taylor vortices of Taylor-Couette flow (G. I. Taylor, 1923)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive.\n// Knob 2: Spin. How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in.\n// Knob 3: Rolls. How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing.\n// Knob 4: Counter. How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986).\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, asin, exp, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The cylinder seen from the side: column x looks at angle TH[x] round it,\n// the front half from -1.29 to 1.29 radians, so a thing going round slows\n// and narrows toward the panel's edges. ARC is the distance round the\n// surface in LEDs, the cylinder 32 LEDs in radius.\nconst TH = new Float32Array(W), ARC = new Float32Array(W), SHADE = new Float32Array(W), SPEC = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const xn = (x + 0.5) / 32 - 1, th = asin(0.96 * xn);\n  TH[x] = th;\n  ARC[x] = th * 32;\n  // Light from the front and a little to the left: the serum dims toward\n  // the cylinder's edges, and a soft upright highlight sits left of centre.\n  SHADE[x] = 0.62 + 0.38 * cos(th + 0.2);\n  SPEC[x] = exp(-(((th + 0.42) / 0.32) ** 2));\n}\n\n// What the aligned mica reflects across one pair of rolls, phase 0 to 2 pi:\n// the outflow boundary at 0, where the serum leaves the inner cylinder and\n// spreads against the outer one; the inflow boundary at pi. In one roll\n// the serum at the outer wall runs up, in the next down, so the flakes there\n// lean one way and then the other and the light catches one roll and not\n// the next. A thin dark line marks the outflow, where the flakes stand on\n// edge, and a thin bright one the inflow.\nconst NR = 512, REFL = new Float32Array(NR);\nfor (let i = 0; i \u003c NR; i++) {\n  const ph = (i / NR) * TAU, s = sin(ph);\n  const d0 = min(ph, TAU - ph), dp = abs(ph - PI);\n  REFL[i] = cl(0.5 + 0.34 * (s >= 0 ? s ** 0.6 : -((-s) ** 0.6)) - 0.42 * exp(-((d0 / 0.3) ** 2)) + 0.3 * exp(-((dp / 0.22) ** 2)), 0, 1);\n}\nconst refl = (ph) => {\n  const u = (ph / TAU) % 1;\n  return REFL[((u \u003c 0 ? u + 1 : u) * NR) | 0];\n};\n\n// Streak texture: random values on a 64 by 128 grid, read stretched 6 times\n// sideways, so the flakes the flow has lined up show as long streaks.\nconst NU = 64, NV = 128;\n\nexport function setup(params) {\n  const noise = new Float32Array(NU * NV);\n  for (let i = 0; i \u003c noise.length; i++) noise[i] = random();\n  const rate = new Float32Array(H);\n  for (let y = 0; y \u003c H; y++) rate[y] = 0.85 + 0.3 * random();\n  const glints = [];\n  for (let i = 0; i \u003c 220; i++) glints.push({ a: random() * 2.6 - 1.3, y: random() * H, ph: random() * TAU, w: 0.6 + 0.8 * random() });\n  params.s = {\n    hue: 0, spin: 2, rolls: 5, counter: 0, warm: 0, t: 0, ang: 0, wave: 0, spiral: 0, su: 0, begun: false,\n    noise, rate, glints, glow: new Float32Array(N), CA: new Float32Array(W), CB: new Float32Array(W), RA: new Float32Array(H), RB: new Float32Array(H), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n}\n\nfunction nz(S, u, v) {\n  const n = S.noise, fu = floor(u), fv = floor(v), au = u - fu, av = v - fv;\n  const i0 = ((fu % NU) + NU) % NU, i1 = (i0 + 1) % NU, j0 = ((fv % NV) + NV) % NV, j1 = (j0 + 1) % NV;\n  const a = n[j0 * NU + i0] + (n[j0 * NU + i1] - n[j0 * NU + i0]) * au;\n  const b = n[j1 * NU + i0] + (n[j1 * NU + i1] - n[j1 * NU + i0]) * au;\n  return a + (b - a) * av;\n}\n\n// The regimes Spin walks through, as weights 0..1.\nfunction regimes(s) {\n  return {\n    // Taylor vortices from the critical speed 1, full by 1.25.\n    rolls: sqrt(sm(1, 1.25, s)),\n    // Waves on the rolls from 1.2, full by 1.8; quieter again toward 4.\n    waves: sqrt(sm(1.2, 1.8, s)) * (1 - 0.6 * sm(3, 4, s)),\n    // A second, slower wave that modulates the first, from 2.6.\n    modulate: sm(2.6, 3.4, s),\n    // Turbulence inside the rolls from 3.\n    turb: sm(3, 4, s),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.spin = cl(k[1], 0.5, 4);\n  S.rolls = cl(k[2], 5, 14);\n  S.counter = cl(k[3], 0, 1);\n  step(S, d);\n  if (!S.begun) {\n    // Open as if the serum had been turning a while.\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n}\n\nfunction step(S, d) {\n  const s = S.spin;\n  S.t += d;\n  // The streaks run round at 5 LEDs a second per unit of Spin; the inner\n  // cylinder turns at twice that, 0.31 radians a second per unit; the\n  // waves go round at 0.34 of the inner cylinder's rate, as Coles measured.\n  S.su += d * 5 * s;\n  S.ang += d * 0.3125 * s;\n  S.wave += d * 0.34 * 0.3125 * s;\n  S.spiral += d * 0.3125 * s * 0.5;\n  // Glints ride the flow: round with the streaks, and up or down the roll\n  // they are in toward its inflow boundary, where they dive and come back.\n  const R = regimes(s), kk = (TAU * S.rolls) / H;\n  for (const g of S.glints) {\n    g.a += (d * 5 * s) / 32;\n    if (g.a > 1.3) g.a -= 2.6;\n    const ph = kk * (g.y - 63.5);\n    g.y += d * R.rolls * 1.2 * s * sin(ph);\n    if (g.y \u003c 0) g.y += H;\n    if (g.y >= H) g.y -= H;\n    // At the inflow boundary the serum turns in toward the inner cylinder\n    // and the flake goes with it; another comes out somewhere else.\n    if (R.rolls > 0.3 && cos(ph) \u003c -0.93) {\n      g.y = random() * H;\n      g.a = random() * 2.6 - 1.3;\n    }\n    // Tumbling: a flake turns over faster in faster shear.\n    g.ph += d * g.w * (1.2 + 1.6 * s);\n  }\n}\n\nfunction palette(S) {\n  const h = S.hue + 0.74, hh = h - floor(h);\n  // From red through orange and yellow to lime a deep tone reads brown or\n  // olive on the panel, so there the rolls keep their brightness and differ\n  // by saturation instead: full from 0.03 to 0.23 round the wheel, none\n  // beyond 0.96 and 0.3.\n  const dw = abs(((hh - 0.13 + 1.5) % 1) - 0.5), warm = 1 - sm(0.1, 0.17, dw);\n  const c = S.col;\n  // Deep, body, pearl and the highlight that leans round the wheel.\n  hsv(h - 0.02 * warm, 0.82 + 0.06 * warm, 0.3 + 0.55 * warm, c[0]);\n  hsv(h + 0.01, 0.6 - 0.15 * warm, 0.72 + 0.26 * warm, c[1]);\n  hsv(h + 0.12, 0.26 - 0.08 * warm, 1, c[2]);\n  hsv(h - 0.1, 0.12, 1, c[3]);\n  S.warm = warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const R = regimes(S.spin), kk = (TAU * S.rolls) / H, lam = H / S.rolls;\n  // Counter-rotating outer cylinder: from 0.15 the rolls lean into a spiral\n  // that runs down the panel as it turns; from 0.6 a second spiral of the\n  // other hand, turning the same way and so running up, comes in across it.\n  const cr = S.counter, sp1 = 3 * sm(0.15, 0.6, cr), sp2 = sm(0.6, 1, cr);\n  const wv = R.waves * (1 - sm(0.15, 0.45, cr));\n  const m = 6, aw = 0.13 * lam * kk;\n  const c = S.col, glow = S.glow, { CA, CB, RA, RB } = S;\n  // The rolls are not all equally strong: two slow waves of strength, one\n  // drifting round with the serum, cross each other over the panel.\n  for (let x = 0; x \u003c W; x++) {\n    CA[x] = sin(0.09 * ARC[x] - 0.8 * S.ang);\n    CB[x] = cos(0.21 * ARC[x] + 0.5 * S.ang);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    RA[y] = cos(0.045 * y + 0.13 * S.t);\n    RB[y] = sin(0.083 * y - 0.21 * S.t);\n  }\n  glow.fill(0);\n  // Glints: a flake flashes as it turns face on to the light.\n  for (const g of S.glints) {\n    const cw = cos(g.ph);\n    if (cw \u003c 0.85) continue;\n    const xs = (sin(g.a) / 0.96 + 1) * 32 - 0.5, xi = round(xs), yi = round(g.y) % H;\n    if (xi \u003c 0 || xi >= W) continue;\n    const b = ((cw - 0.85) / 0.15) ** 2 * 1.3;\n    glow[yi * W + xi] += b;\n    if (xi > 0) glow[yi * W + xi - 1] += b * 0.3;\n    if (xi \u003c W - 1) glow[yi * W + xi + 1] += b * 0.3;\n    if (yi > 0) glow[(yi - 1) * W + xi] += b * 0.3;\n    if (yi \u003c H - 1) glow[(yi + 1) * W + xi] += b * 0.3;\n  }\n  // The streak texture flows along each roll toward its inflow boundary;\n  // two copies, three seconds apart, take turns so it never smears.\n  const TL = 3, t0 = S.t % TL, t1 = (S.t + TL / 2) % TL, w0 = 1 - abs((2 * t0) / TL - 1);\n  const vz = R.rolls * 1.2 * S.spin;\n  const turbU = 1 + 2 * R.turb;\n  for (let x = 0; x \u003c W; x++) {\n    const th = TH[x], arc = ARC[x];\n    // Axial displacement of the rolls here: the travelling wave, and in the\n    // modulated regime a slower second wave riding on it.\n    const wph = m * (th - S.wave);\n    const wave = aw * wv * sin(wph) * (1 + 0.5 * R.modulate * sin(2 * th - 0.4 * S.wave * m));\n    const spiral1 = sp1 * (th - S.spiral), spiral2 = 3 * sp2 * (th - S.spiral);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let ph = kk * (y - 63.5) + wave;\n      if (R.turb > 0) ph += R.turb * 1.4 * (nz(S, arc / 5 - S.su * 0.4, y * 0.35 + S.t * 0.7) - 0.5);\n      let rf = refl(ph + spiral1);\n      if (sp2 > 0) rf = rf * (1 - 0.5 * sp2) + refl(ph - spiral2) * 0.5 * sp2;\n      const rb = 0.5 + R.rolls * (rf - 0.5) * (1 + 0.16 * CA[x] * RA[y] + 0.1 * CB[x] * RB[y]);\n      // Streaks: the texture moved round with the serum and along the roll.\n      const az = sin(ph + spiral1) * vz, su = S.su * S.rate[y];\n      const a0 = nz(S, ((arc - su) / 10) * turbU, (y - az * t0) * 0.75), a1 = nz(S, ((arc - su) / 10) * turbU + 17, (y - az * t1) * 0.75);\n      const tex = a0 * w0 + a1 * (1 - w0) - 0.5;\n      const sh = SHADE[x], spc = SPEC[x];\n      // Light: the serum's body by the cylinder's shading and the rolls,\n      // the streaks over it, the highlight strongest on the rolls that\n      // catch the light, and the glints.\n      const L = sh * (0.18 + 0.72 * rb) + (0.4 - 0.1 * R.rolls) * tex * sh;\n      const hi = spc * (0.15 + 0.85 * rb * rb) * 0.75 + glow[p];\n      // Deep to body to pearl by L; the highlight toward white.\n      let r, g, b;\n      if (L \u003c 0.5) {\n        const f = cl(L / 0.5, 0, 1);\n        r = c[0][0] + (c[1][0] - c[0][0]) * f;\n        g = c[0][1] + (c[1][1] - c[0][1]) * f;\n        b = c[0][2] + (c[1][2] - c[0][2]) * f;\n      } else {\n        const f = cl((L - 0.5) / 0.45, 0, 1);\n        r = c[1][0] + (c[2][0] - c[1][0]) * f;\n        g = c[1][1] + (c[2][1] - c[1][1]) * f;\n        b = c[1][2] + (c[2][2] - c[1][2]) * f;\n      }\n      const lo = 1 - (1 - cl(L / 0.2, 0, 1)) * (1 - 0.7 * S.warm), hm = min(1, hi);\n      r *= lo;\n      g *= lo;\n      b *= lo;\n      r += (c[3][0] - r) * hm;\n      g += (c[3][1] - g) * hm;\n      b += (c[3][2] - b) * hm;\n      display.setPixel(x, y, round(255 * cl(r, 0, 1)), round(255 * cl(g, 0, 1)), round(255 * cl(b, 0, 1)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive."},{"name":"Spin","min":0.5,"max":4,"about":"How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in."},{"name":"Rolls","min":5,"max":14,"about":"How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing."},{"name":"Counter","min":0,"max":1,"about":"How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986)."}],"start":[0,2,5,0.06],"measures":{"motion":0.2097,"detail":0.0404,"edges":0.1149,"complexity":2.5766,"coverage":0.9999,"colour":0.1504,"drift":0.059},"knobResponse":[0.3171,0.1536,0.1747,0.1924]},{"slug":"cream-swirl","title":"Cream Swirl","family":"cosmetic","round":29,"note":"보이지 않는 팔레트 나이프가 크림을 S자와 소용돌이로 펴 바르며 매끈한 띠와 윤기 나는 둔덕을 남기고, 떨어진 색 크림 덩이를 길쭉한 리본으로 끌고 가요. 부드러운 빛이 7초에 한 번 좌우로 오가며 결 위로 윤이 미끄러져요. K3 을 올리면 섞이는 색조가 셋까지 늘고, 누르면 가장 진한 색 덩이가 칼 앞에 떨어져요.","idea":"An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.","buttons":"K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.","code":"// ===== Patternflow pattern =====\n// Title:   Cream Swirl\n// Family:  cosmetic\n// Idea:    An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the swatch of face cream spread with a spatula in a macro product film\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1\n//\n// Knob 1: Hue. Turns the cream and its tints round the whole colour wheel together, opening on rose.\n// Knob 2: Speed. How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges.\n// Knob 3: Tones. How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path.\n// Knob 4: Gloss. At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight.\n// Buttons: K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The knife's edge is cut into NB bins. Each bin carries the cream it has\n// scraped up and that cream's tint, so a dollop picked up at one end of the\n// blade is laid down as a ribbon behind that end, not across the whole band.\nconst NB = 16;\n// Path points are half an LED apart.\nconst STEP = 0.5, PMAX = 1200;\n// How fast a bin's tint turns to the cream it scrapes, per unit of height\n// scraped; how much of the band's skin is the cream the blade carries; what\n// share of each bin's load slides on to the next bin along the angled blade\n// for each LED travelled.\nconst PICK = 0.3, FILM = 0.45, SLIP = 1.05;\n// The share of the dragged skin left behind for each LED travelled.\nconst DRAG = 0.03;\n// The ridge the spill builds stands at RS height per LED on its flanks, and\n// is never taller than RMAX.\nconst RS = 0.4, RMAX = 3.6;\n// How deep the roll of cream in front of the blade is, in LEDs.\nconst ROLL = 6;\n// How deep the visible skin is: scraping this much off shows the bed.\nconst SKIN = 0.8;\n// The opening hue: rose, not red.\nconst H0 = 0.93;\n\n// A soft light low over the top left, its height LZ and where it sits round\n// the panel, LA radians; it glides LS either way of that and back over SWING\n// seconds at Speed 2, so the sheen slides along the ridges between strokes.\nconst LZ = 0.5, LA = -2.34, LS = 0.9, SWING = 7;\n// How tall the height field looks: a slope of 1 tilts the surface 56 degrees.\nconst KZ = 1.8;\n// The light is a big soft box: it wraps a little way round the cream, so a\n// slope turned from it shades off gently instead of dropping into shadow.\nconst WRAP = 0.3;\n// How much a fold darkens and a crest brightens, per unit of height.\nconst CAV = 0.5;\n// Cream the knife has just laid down holds a wet film that lifts it by this\n// much, fading as it dulls.\nconst GLINT = 26;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The tint concentrations a dollop can come in, for one, two and three tints.\nconst DOSE = [[0.55], [0.4, 0.88], [0.3, 0.62, 1]];\n// Where the colour ramp steps between tints, so folded cream shows distinct\n// bands rather than one blurred pink: thresholds and the level each band shows.\nconst STEPS = [\n  [[0.22], [0, 0.55]],\n  [[0.18, 0.6], [0, 0.42, 0.88]],\n  [[0.14, 0.44, 0.78], [0, 0.3, 0.62, 1]],\n];\nfunction band(c, n) {\n  const [th, lv] = STEPS[n];\n  let v = lv[0];\n  for (let i = 0; i \u003c th.length; i++) v += (lv[i + 1] - lv[i]) * sm((c - th[i]) / 0.1 + 0.5);\n  return v;\n}\n\nexport function setup(params) {\n  params.s = {\n    // Height, the tint of the skin, the tint of the bed under it.\n    hf: new Float32Array(N), tn: new Float32Array(N), ut: new Float32Array(N),\n    dh: new Float32Array(N), dt: new Float32Array(N), bl: new Float32Array(N), av: new Float32Array(N),\n    stamp: new Int32Array(N).fill(-999), sub: 0, fr: new Float32Array(N),\n    path: new Float32Array(PMAX * 2), plen: 0, pos: 0, type: 0, done: 0,\n    m: new Float32Array(NB), c: new Float32Array(NB), ft: new Float32Array(NB), fm: new Float32Array(NB), bm: 0, bc: 0,\n    L: 24, ca: 1, sa: 0, B: 0, tilt: 0, gPh: 0, cc: 0, cA: 0, cP: 8, cB: 0, slip: 1, rh: 0,\n    sp: new Float32Array(8), pause: 0, live: false, force: 1, lt: 0,\n    dol: [], hue: 0, tones: 1, gloss: 0.06, ready: false,\n    lut: new Float32Array(64 * 3), lus: new Float32Array(64 * 3),\n    kx: 0, ky: 0, dx: 0, dy: 1, tx: 1, ty: 0,\n  };\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\n// A round dollop: a soft mound of tint c with a peak where it left the spoon. It is all skin, so a knife that\n// scrapes it away finds the cream it was dropped on.\n// Its colour goes on with the first of it, as deep as the whole dollop will\n// be thick: its thin rim only half covers what it landed on, so a knife that\n// scrapes it off leaves no ring.\nfunction dollop(P, x0, y0, r, ht, c, f, first) {\n  const x1 = max(0, floor(x0 - r)), x2 = min(W - 1, floor(x0 + r) + 1);\n  const y1 = max(0, floor(y0 - r)), y2 = min(H - 1, floor(y0 + r) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const d = ((x - x0) ** 2 + (y - y0) ** 2) / (r * r);\n      if (d >= 1) continue;\n      const p = y * W + x, a = ht * (1 - sqrt(d)) * (1 - d * 0.5);\n      P.hf[p] += a * f;\n      if (first) P.tn[p] += (c - P.tn[p]) * min(1, a / 1.2);\n    }\n}\n\n// The stroke's path as a function of u from 0 to 1, from the parameters\n// startStroke puts in P.sp.\nfunction pathAt(P, u, o) {\n  const s = P.sp;\n  if (P.type === 0) {\n    // An S down (or up) the panel.\n    o[0] = s[0] + s[1] * sin(2 * PI * s[2] * u + s[3]);\n    o[1] = s[4] + (s[5] - s[4]) * u;\n  } else if (P.type === 1) {\n    // A spiral in to a point: the swirl on top of a jar.\n    const a = s[3] + s[4] * u * 2 * PI, r = s[5] + (s[6] - s[5]) * (1 - (1 - u) * (1 - u));\n    o[0] = s[0] + r * cos(a);\n    o[1] = s[1] + r * sin(a) * 1.15;\n  } else {\n    // A bowed smear from off one side to the middle, or right across.\n    const v = 1 - u, mx = (s[0] + s[2]) / 2 + s[4], my = (s[1] + s[3]) / 2 + s[5];\n    o[0] = v * v * s[0] + 2 * v * u * mx + u * u * s[2];\n    o[1] = v * v * s[1] + 2 * v * u * my + u * u * s[3];\n  }\n}\n\nconst TMP = [0, 0];\nfunction startStroke(P, k3) {\n  const s = P.sp, r = rnd(), hf = P.hf;\n  // Heights only matter against each other: keep the cream's mean level at\n  // 0, and cut every band below it, so each stroke has cream to push.\n  let mean = 0;\n  for (let p = 0; p \u003c N; p++) mean += hf[p];\n  mean /= N;\n  for (let p = 0; p \u003c N; p++) hf[p] -= mean;\n  P.type = r \u003c 0.5 ? 0 : r \u003c 0.8 ? 1 : 2;\n  if (P.type === 0) {\n    const down = rnd() \u003c 0.5;\n    s[0] = 22 + rnd() * 20;\n    s[1] = 10 + rnd() * 10;\n    s[2] = 0.6 + rnd() * 0.5;\n    s[3] = rnd() * 2 * PI;\n    s[4] = down ? -14 : H + 14;\n    s[5] = down ? H + 14 : -14;\n    P.L = 34 + rnd() * 10;\n    P.B = -0.9 + rnd() * 0.5;\n  } else if (P.type === 1) {\n    s[0] = 26 + rnd() * 12;\n    s[1] = 36 + rnd() * 56;\n    s[3] = rnd() * 2 * PI;\n    s[4] = (rnd() \u003c 0.5 ? -1 : 1) * (1.3 + rnd() * 0.5);\n    s[5] = 25 + rnd() * 6;\n    s[6] = 3;\n    P.L = 18 + rnd() * 5;\n    P.B = -0.6 + rnd() * 0.4;\n  } else {\n    const across = rnd() \u003c 0.4, side = rnd() \u003c 0.5 ? -1 : 1;\n    if (across) {\n      s[0] = side \u003c 0 ? -14 : W + 14;\n      s[2] = side \u003c 0 ? W + 14 : -14;\n      s[1] = 14 + rnd() * 100;\n      s[3] = cl(s[1] + (rnd() - 0.5) * 40, 10, H - 10);\n    } else {\n      s[0] = 32 + side * (34 + rnd() * 6);\n      s[1] = 10 + rnd() * 108;\n      s[2] = 32 - side * (rnd() * 10);\n      s[3] = cl(s[1] + (rnd() - 0.5) * 70, 18, H - 18);\n    }\n    s[4] = 0;\n    s[5] = (rnd() - 0.5) * 36;\n    P.L = 28 + rnd() * 8;\n    P.B = -0.8 + rnd() * 0.5;\n  }\n  // Lay the path down half an LED a point.\n  const path = P.path;\n  pathAt(P, 0, TMP);\n  let px = TMP[0], py = TMP[1], n = 1;\n  path[0] = px;\n  path[1] = py;\n  for (let i = 1; i \u003c= 4000 && n \u003c PMAX; i++) {\n    pathAt(P, i / 4000, TMP);\n    const d = sqrt((TMP[0] - px) ** 2 + (TMP[1] - py) ** 2);\n    if (d >= STEP) {\n      px += ((TMP[0] - px) * STEP) / d;\n      py += ((TMP[1] - py) * STEP) / d;\n      path[n * 2] = px;\n      path[n * 2 + 1] = py;\n      n++;\n    }\n  }\n  P.plen = (n - 1) * STEP;\n  P.pos = 0;\n  // The blade sits at an angle to its track, tilted a little and bowed, so\n  // the band is a shallow trough, and it chatters as it goes, leaving soft\n  // folds across the band. A slow knife glides and cuts shallow; a fast one\n  // chatters harder and digs deeper, so it throws a taller ridge.\n  const al = (rnd() - 0.5) * 0.6;\n  P.ca = cos(al);\n  P.sa = sin(al);\n  P.tilt = (rnd() - 0.5) * 0.6;\n  P.cc = 0.2 + rnd() * 0.4;\n  P.cA = (0.13 + rnd() * 0.1) * (0.35 + 0.65 * P.force);\n  P.B -= 0.35 * (P.force - 1);\n  P.cP = 11 + rnd() * 5;\n  P.cB = (rnd() \u003c 0.5 ? -1 : 1) * (3 + rnd() * 4);\n  P.gPh = rnd() * 2 * PI;\n  P.slip = rnd() \u003c 0.5 ? -1 : 1;\n  if (P.type === 1) {\n    // A swirl throws its cream outwards.\n    locate(P, 6);\n    P.slip = P.tx * (P.kx - s[0]) + P.ty * (P.ky - s[1]) > 0 ? 1 : -1;\n  }\n  P.m.fill(0);\n  P.c.fill(0);\n  P.ft.fill(0);\n  P.fm.fill(0);\n  P.rh = 0;\n  P.live = true;\n  // Every stroke goes through fresh dollops dropped a little way along: one\n  // for one tint, two or three when three tints are folded in.\n  const nd = k3 === 1 ? 1 : k3 === 2 ? (rnd() \u003c 0.5 ? 2 : 1) : rnd() \u003c 0.4 ? 3 : 2;\n  for (let i = 0; i \u003c nd; i++) plan(P, 0.1 + rnd() * 0.45, rnd() \u003c 0.4 ? 0 : DOSE[k3 - 1][floor(rnd() * k3)], (10 + rnd() * 3) / sqrt(nd));\n}\n\n// A dollop waiting to fall at a point on the path ahead of the knife.\nfunction plan(P, u, c, r) {\n  if (P.dol.length > 3) return;\n  const i = floor((P.pos + (P.plen - P.pos) * u) / STEP);\n  const x = P.path[i * 2], y = P.path[i * 2 + 1];\n  P.dol.push({ x: cl(x + (rnd() - 0.5) * 6, 6, W - 7), y: cl(y + (rnd() - 0.5) * 6, 8, H - 9), r, h: 2.6 + rnd() * 0.6, c, f: 0 });\n}\n\n// The knife's point, its direction of travel and the blade's direction.\nfunction locate(P, pos) {\n  const path = P.path, last = floor(P.plen / STEP);\n  const i = cl(floor(pos / STEP), 0, last - 1), f = cl(pos / STEP - i, 0, 1);\n  P.kx = path[i * 2] + (path[i * 2 + 2] - path[i * 2]) * f;\n  P.ky = path[i * 2 + 1] + (path[i * 2 + 3] - path[i * 2 + 1]) * f;\n  const a = max(0, i - 3), b = min(last, i + 4);\n  let dx = path[b * 2] - path[a * 2], dy = path[b * 2 + 1] - path[a * 2 + 1];\n  const d = sqrt(dx * dx + dy * dy) || 1;\n  dx /= d;\n  dy /= d;\n  P.dx = dx;\n  P.dy = dy;\n  P.tx = -dy * P.ca - dx * P.sa;\n  P.ty = dx * P.ca - dy * P.sa;\n}\n\n// The load of the blade at a point a along it and the tint it drags there,\n// read between the bins so what it lays down has no seams.\nfunction load(P, a) {\n  const fb = cl(((a + P.L / 2) / P.L) * NB - 0.5, 0, NB - 1), j = min(NB - 2, floor(fb)), f = fb - j;\n  P.bm = P.m[j] + (P.m[j + 1] - P.m[j]) * f;\n  P.bc = P.ft[j] + (P.ft[j + 1] - P.ft[j]) * f;\n}\n\n// The ridge across its width r (0 at the band's edge, 1 at its foot): a\n// steep inner face where the blade cut it, a long outer slope.\nconst ridge = (r) => (r \u003c 0.3 ? sm(r / 0.3) : 1 - sm((r - 0.3) / 0.7));\n\n// One move of the knife by ds LEDs. Each LED is worked once a pass, as the\n// back of the blade leaves it: what stood above the blade goes into the\n// bin over it, and the band, the ridge beside it and their tints are laid\n// down.\nfunction knife(P, ds) {\n  P.pos += ds;\n  P.sub++;\n  if (P.pos >= P.plen) return lift(P);\n  locate(P, P.pos);\n  const { hf, tn, ut, m, c, ft, fm, stamp, L } = P, hl = L / 2, sl = P.slip;\n  for (let j = 0; j \u003c NB; j++) fm[j] *= 1 - DRAG * ds;\n  const kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  // Pressure comes on over the first 8 LEDs and goes off over the last 6.\n  const pr = sm(P.pos / 8) * sm((P.plen - P.pos) / 6);\n  const rw = max(3, (2 * P.rh) / RS), end = sl > 0 ? NB - 1 : 0, lvEnd = P.B + P.tilt * sl + P.cc;\n  const rx = abs(tx) * (hl + rw) + 3, ry = abs(ty) * (hl + rw) + 3;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, s = (tx * oy - ty * ox) / det;\n      // On a curve the LEDs on the outside move further than ds, so the\n      // strip is wider than a step and the stamp keeps it to once a pass.\n      if (s \u003c -3 - ds || s >= -0.3) continue;\n      const a = (ox * dy - oy * dx) / det, as = a * sl, p = y * W + x;\n      if (as \u003c= -hl - 1.5 || as >= hl + rw || P.sub - stamp[p] \u003c 40) continue;\n      stamp[p] = P.sub;\n      const ho = hf[p], to = tn[p];\n      if (as \u003c hl && as > -hl) {\n        // The chatter marks bow back towards the blade's ends, as a flexible\n        // blade leaves them, and come and go along it.\n        const u = a / hl, w = (2 * PI * (P.pos + P.cB * u * u)) / P.cP;\n        const lv = P.B + P.tilt * u + P.cc * u * u + P.cA * (0.65 + 0.35 * sin(a * 0.31 + P.gPh)) * (sin(w) + 0.5 * sin(w * 1.63 + 1.3)), e = ho - lv;\n        const j = cl(floor(((a + hl) / L) * NB), 0, NB - 1);\n        if (e > 0) {\n          m[j] += e * pr;\n          c[j] += (to - c[j]) * min(1, e * PICK * pr);\n          // The skin of tint the blade drags stays in its own lane and is\n          // mixed by how much of each colour it gathered, so a dollop\n          // becomes a long ribbon that pales as white cream dilutes it.\n          fm[j] += e * pr;\n          ft[j] += ((to - ft[j]) * e * pr) / fm[j];\n        }\n        // Under what was scraped off lies the bed; over it the blade leaves a\n        // film of the cream it carries.\n        const ex = e > 0 ? to + (ut[p] - to) * min(1, e / SKIN) : to;\n        load(P, a);\n        const tw = ex + (P.bc - ex) * FILM * min(1, P.bm);\n        hf[p] = ho + (lv - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (tw - to) * pr;\n        ut[p] += (tw - ut[p]) * pr * 0.4;\n      } else {\n        // Beside the band: the ridge on the spill side, a thin lip of\n        // squeezed cream on the other.\n        const hr = as > 0 ? lvEnd + P.rh * ridge((as - hl) / rw) : P.B - P.tilt * sl + 0.2 * P.rh * ridge((-as - hl) / 1.5);\n        if (hr \u003c= ho) continue;\n        const k = pr * min(1, (hr - ho) / SKIN), ce = as > 0 ? c[end] : to;\n        hf[p] = ho + (hr - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (ce - to) * k;\n        ut[p] += (ce - ut[p]) * k;\n      }\n    }\n  // The load slides along the angled blade and spills off its end, and the\n  // ridge stands as tall as the cream spilling into it.\n  const f = min(0.9, SLIP * ds);\n  for (let k = 1; k \u003c NB; k++) {\n    const j = sl > 0 ? NB - 1 - k : k, to = j + sl, a = m[j] * f;\n    if (a \u003c= 0) continue;\n    c[to] = (c[to] * m[to] + c[j] * a) / (m[to] + a);\n    m[to] += a;\n    m[j] -= a;\n  }\n  const spill = m[end] * f;\n  m[end] -= spill;\n  const target = min(RMAX, sqrt(0.75 * (spill / ds) * RS));\n  P.rh += (target - P.rh) * min(1, ds * 0.25);\n}\n\n// The knife lifts: what it still carries stays where it stopped, a raised\n// lip across the end of the band.\nfunction lift(P) {\n  locate(P, P.plen);\n  roll(P, P.hf, P.tn, P.ut);\n  P.live = false;\n  P.done++;\n  P.pause = 0.15 + rnd() * 0.2;\n}\n\n// The cream on the blade's face as a rounded roll in front of it, laid into\n// (h, t): for the picture while the knife moves, for good when it lifts.\nfunction roll(P, h, t, u) {\n  const hl = P.L / 2, kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  const rx = abs(tx) * hl + ROLL + 2, ry = abs(ty) * hl + ROLL + 2;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, a = (ox * dy - oy * dx) / det, s = (tx * oy - ty * ox) / det;\n      if (s \u003c= -0.3 || s >= ROLL || a \u003c= -hl || a >= hl) continue;\n      load(P, a);\n      // A bin's load spread as a mound ROLL deep, rounded off at the blade's\n      // ends: as tall as that much cream stands, and never a wall.\n      const ht = min(2.4, sqrt((P.bm * NB) / P.L) * 0.7) * sin((PI * (s + 0.3)) / (ROLL + 0.3)) * sqrt(sin((PI * (a + hl)) / P.L));\n      const p = y * W + x;\n      if (P.B + ht \u003c= h[p]) continue;\n      const k = min(1, (P.B + ht - h[p]) / SKIN);\n      h[p] = P.B + ht;\n      t[p] += (P.bc - t[p]) * k;\n      if (u) u[p] += (P.bc - u[p]) * k;\n    }\n}\n\n// One frame of the studio: the pause between strokes, dollops falling, the knife.\nfunction tick(P, dt, speed, k3) {\n  for (const d of P.dol) {\n    if (d.f >= 1) continue;\n    const g = min(1 - d.f, dt * 2.5 * max(0.6, speed / 2));\n    dollop(P, d.x, d.y, d.r, d.h, d.c, g, d.f === 0);\n    d.f += g;\n  }\n  // Freshly worked cream glistens; left alone it dulls to a satin over\n  // about ten seconds at Speed 2.\n  P.lt += dt * speed * 0.5;\n  const fr = P.fr, k = 1 - dt * 0.07 * max(0.5, speed);\n  for (let p = 0; p \u003c N; p++) fr[p] *= k;\n  if (!P.live) {\n    P.pause -= dt * max(0.5, speed / 2);\n    if (P.pause \u003c= 0) startStroke(P, k3);\n  } else {\n    let ds = dt * speed * 10;\n    while (ds > 1e-6) {\n      const st = min(ds, 0.5);\n      knife(P, st);\n      ds -= st;\n      if (!P.live) break;\n    }\n  }\n  // A dollop is forgotten once it has fallen and the knife has gone on.\n  if (P.dol.length && P.dol[0].f >= 1 && (!P.live || P.dol.length > 2)) P.dol.shift();\n}\n\n// The first frame already shows cream that has been worked: a level layer\n// and three strokes through dollops of tint.\nfunction prime(P, k3) {\n  const { hf } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hf[y * W + x] = 0.3 * sin(x * 0.11 + y * 0.05) * sin(y * 0.07 - x * 0.04);\n  P.pause = 0;\n  while (P.done \u003c 3) tick(P, 1 / 30, 2, k3);\n  while (!P.live) tick(P, 1 / 30, 2, k3);\n  // Start the live stroke a fifth of the way along, its dollops down.\n  for (const d of P.dol) if (d.f \u003c 1) (dollop(P, d.x, d.y, d.r, d.h, d.c, 1 - d.f, d.f === 0), (d.f = 1));\n  while (P.live && P.pos \u003c P.plen * 0.2) tick(P, 1 / 30, 2, k3);\n  P.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.tones = cl(k[2], 1, 3);\n  P.gloss = cl(k[3], 0, 1);\n  const k3 = cl(Math.round(P.tones), 1, 3);\n  P.force = cl(k[1], 0.2, 3) / 2;\n  if (!P.ready) prime(P, k3);\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fresh dollop in the deepest tint, where the knife will reach it.\n    if (P.live && P.plen - P.pos > 40) plan(P, 0.25 + rnd() * 0.2, DOSE[k3 - 1][k3 - 1], 9);\n    else P.dol.push({ x: 14 + rnd() * 36, y: 20 + rnd() * 88, r: 12, h: 3.2, c: DOSE[k3 - 1][k3 - 1], f: 0 });\n  }\n  tick(P, d, cl(k[1], 0.2, 3), k3);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  const { dh, dt, lut, lus } = P;\n  dh.set(P.hf);\n  dt.set(P.tn);\n  // The cream riding on the blade's face shows where the unseen knife is.\n  if (P.live) roll(P, dh, dt, null);\n  // The light reads the surface and its colour through a small blur, so the\n  // LED steps of the height field do not show as grain.\n  blur(dh, P.bl);\n  // A wide blur of the surface: cream that stands above it is a crest and\n  // catches more light, cream below it lies in a fold and gets less.\n  const av = P.av;\n  av.set(dh);\n  for (let i = 0; i \u003c 4; i++) blur(av, P.bl);\n  blur(dt, P.bl);\n  // The colour of each tint concentration: white cream at 0, the deepest\n  // tint at 1, stepped into the bands Tones asks for. Light goes a little\n  // way into cream, so its shadows are a deeper tint rather than grey.\n  // Wet cream (Gloss up) is a little deeper in colour, as anything wet is.\n  // The deeper tints also darken, so three of them stay apart, except round\n  // orange and yellow, where darker reads as brown and olive on LEDs.\n  const t = P.tones, n0 = floor(t) - 1, ft = t - floor(t), n1 = min(2, n0 + 1), hue = H0 + P.hue, g = P.gloss;\n  const hw = (hue - floor(hue) + 0.38) % 1, dk = 0.3 * min(1, abs(hw - 0.5) / 0.11);\n  for (let i = 0; i \u003c 64; i++) {\n    const c = i / 63, v = band(c, n0) + (band(c, n1) - band(c, n0)) * ft;\n    hsv(hue, 0.22 + 0.72 * v + 0.06 * g, (1 - 0.06 * v - dk * v * v) * (1 - 0.1 * g), lut, i * 3);\n    hsv(hue, min(1, 0.4 + 0.6 * v + 0.1 * g), 0.58 - 0.08 * v - 0.14 * g, lus, i * 3);\n  }\n  // The sheen is measured from what a level surface would show, so level\n  // cream stays its colour and only the slopes turned to the light shine.\n  const la = LA + LS * sin((2 * PI * P.lt) / SWING), lr = sqrt(1 - LZ * LZ), LX = lr * cos(la), LY = lr * sin(la);\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  // A broad satin sheen is always there; Gloss adds a narrow wet one on top.\n  const shin = 10 + 70 * g * g, ks = 0.95 * g * 255, s0 = pow(HZ, shin), sk = ks / (1 - s0), fr = P.fr;\n  const b0 = pow(HZ, 6), bk = (0.4 * 255) / (1 - b0);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = y > 0 ? -W : 0, yd = y \u003c H - 1 ? W : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (dh[x \u003c W - 1 ? p + 1 : p] - dh[x > 0 ? p - 1 : p]) * 0.5 * KZ;\n      const gy = (dh[p + yd] - dh[p + yu]) * 0.5 * KZ;\n      const il = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * il, ny = -gy * il, nz = il;\n      const df = nx * LX + ny * LY + nz * LZ, nh = nx * HX + ny * HY + nz * HZ;\n      const f = (df > -WRAP ? (0.85 * (df + WRAP)) / (LZ + WRAP) : 0) * (1 + cl((dh[p] - av[p]) * CAV, -0.45, 0.25)), n2 = nh * nh, sp = (nh > HZ ? ((g > 0.01 ? (pow(nh, shin) - s0) * sk : 0) + (n2 * n2 * n2 - b0) * bk) * (0.5 + 0.5 * fr[p]) : 0) + fr[p] * GLINT;\n      const o = cl(floor(dt[p] * 63 + 0.5), 0, 63) * 3, r = lus[o], gg = lus[o + 1], b = lus[o + 2];\n      display.setPixel(x, y, min(255, r + (lut[o] - r) * f + sp), min(255, gg + (lut[o + 1] - gg) * f + sp * 0.97), min(255, b + (lut[o + 2] - b) * f + sp * 0.92));\n    }\n  }\n}\n","layer":{"id":"layer-cream-swirl","type":"code","name":"cream-swirl","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cream Swirl\n// Family:  cosmetic\n// Idea:    An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the swatch of face cream spread with a spatula in a macro product film\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1\n//\n// Knob 1: Hue. Turns the cream and its tints round the whole colour wheel together, opening on rose.\n// Knob 2: Speed. How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges.\n// Knob 3: Tones. How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path.\n// Knob 4: Gloss. At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight.\n// Buttons: K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The knife's edge is cut into NB bins. Each bin carries the cream it has\n// scraped up and that cream's tint, so a dollop picked up at one end of the\n// blade is laid down as a ribbon behind that end, not across the whole band.\nconst NB = 16;\n// Path points are half an LED apart.\nconst STEP = 0.5, PMAX = 1200;\n// How fast a bin's tint turns to the cream it scrapes, per unit of height\n// scraped; how much of the band's skin is the cream the blade carries; what\n// share of each bin's load slides on to the next bin along the angled blade\n// for each LED travelled.\nconst PICK = 0.3, FILM = 0.45, SLIP = 1.05;\n// The share of the dragged skin left behind for each LED travelled.\nconst DRAG = 0.03;\n// The ridge the spill builds stands at RS height per LED on its flanks, and\n// is never taller than RMAX.\nconst RS = 0.4, RMAX = 3.6;\n// How deep the roll of cream in front of the blade is, in LEDs.\nconst ROLL = 6;\n// How deep the visible skin is: scraping this much off shows the bed.\nconst SKIN = 0.8;\n// The opening hue: rose, not red.\nconst H0 = 0.93;\n\n// A soft light low over the top left, its height LZ and where it sits round\n// the panel, LA radians; it glides LS either way of that and back over SWING\n// seconds at Speed 2, so the sheen slides along the ridges between strokes.\nconst LZ = 0.5, LA = -2.34, LS = 0.9, SWING = 7;\n// How tall the height field looks: a slope of 1 tilts the surface 56 degrees.\nconst KZ = 1.8;\n// The light is a big soft box: it wraps a little way round the cream, so a\n// slope turned from it shades off gently instead of dropping into shadow.\nconst WRAP = 0.3;\n// How much a fold darkens and a crest brightens, per unit of height.\nconst CAV = 0.5;\n// Cream the knife has just laid down holds a wet film that lifts it by this\n// much, fading as it dulls.\nconst GLINT = 26;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The tint concentrations a dollop can come in, for one, two and three tints.\nconst DOSE = [[0.55], [0.4, 0.88], [0.3, 0.62, 1]];\n// Where the colour ramp steps between tints, so folded cream shows distinct\n// bands rather than one blurred pink: thresholds and the level each band shows.\nconst STEPS = [\n  [[0.22], [0, 0.55]],\n  [[0.18, 0.6], [0, 0.42, 0.88]],\n  [[0.14, 0.44, 0.78], [0, 0.3, 0.62, 1]],\n];\nfunction band(c, n) {\n  const [th, lv] = STEPS[n];\n  let v = lv[0];\n  for (let i = 0; i \u003c th.length; i++) v += (lv[i + 1] - lv[i]) * sm((c - th[i]) / 0.1 + 0.5);\n  return v;\n}\n\nexport function setup(params) {\n  params.s = {\n    // Height, the tint of the skin, the tint of the bed under it.\n    hf: new Float32Array(N), tn: new Float32Array(N), ut: new Float32Array(N),\n    dh: new Float32Array(N), dt: new Float32Array(N), bl: new Float32Array(N), av: new Float32Array(N),\n    stamp: new Int32Array(N).fill(-999), sub: 0, fr: new Float32Array(N),\n    path: new Float32Array(PMAX * 2), plen: 0, pos: 0, type: 0, done: 0,\n    m: new Float32Array(NB), c: new Float32Array(NB), ft: new Float32Array(NB), fm: new Float32Array(NB), bm: 0, bc: 0,\n    L: 24, ca: 1, sa: 0, B: 0, tilt: 0, gPh: 0, cc: 0, cA: 0, cP: 8, cB: 0, slip: 1, rh: 0,\n    sp: new Float32Array(8), pause: 0, live: false, force: 1, lt: 0,\n    dol: [], hue: 0, tones: 1, gloss: 0.06, ready: false,\n    lut: new Float32Array(64 * 3), lus: new Float32Array(64 * 3),\n    kx: 0, ky: 0, dx: 0, dy: 1, tx: 1, ty: 0,\n  };\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\n// A round dollop: a soft mound of tint c with a peak where it left the spoon. It is all skin, so a knife that\n// scrapes it away finds the cream it was dropped on.\n// Its colour goes on with the first of it, as deep as the whole dollop will\n// be thick: its thin rim only half covers what it landed on, so a knife that\n// scrapes it off leaves no ring.\nfunction dollop(P, x0, y0, r, ht, c, f, first) {\n  const x1 = max(0, floor(x0 - r)), x2 = min(W - 1, floor(x0 + r) + 1);\n  const y1 = max(0, floor(y0 - r)), y2 = min(H - 1, floor(y0 + r) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const d = ((x - x0) ** 2 + (y - y0) ** 2) / (r * r);\n      if (d >= 1) continue;\n      const p = y * W + x, a = ht * (1 - sqrt(d)) * (1 - d * 0.5);\n      P.hf[p] += a * f;\n      if (first) P.tn[p] += (c - P.tn[p]) * min(1, a / 1.2);\n    }\n}\n\n// The stroke's path as a function of u from 0 to 1, from the parameters\n// startStroke puts in P.sp.\nfunction pathAt(P, u, o) {\n  const s = P.sp;\n  if (P.type === 0) {\n    // An S down (or up) the panel.\n    o[0] = s[0] + s[1] * sin(2 * PI * s[2] * u + s[3]);\n    o[1] = s[4] + (s[5] - s[4]) * u;\n  } else if (P.type === 1) {\n    // A spiral in to a point: the swirl on top of a jar.\n    const a = s[3] + s[4] * u * 2 * PI, r = s[5] + (s[6] - s[5]) * (1 - (1 - u) * (1 - u));\n    o[0] = s[0] + r * cos(a);\n    o[1] = s[1] + r * sin(a) * 1.15;\n  } else {\n    // A bowed smear from off one side to the middle, or right across.\n    const v = 1 - u, mx = (s[0] + s[2]) / 2 + s[4], my = (s[1] + s[3]) / 2 + s[5];\n    o[0] = v * v * s[0] + 2 * v * u * mx + u * u * s[2];\n    o[1] = v * v * s[1] + 2 * v * u * my + u * u * s[3];\n  }\n}\n\nconst TMP = [0, 0];\nfunction startStroke(P, k3) {\n  const s = P.sp, r = rnd(), hf = P.hf;\n  // Heights only matter against each other: keep the cream's mean level at\n  // 0, and cut every band below it, so each stroke has cream to push.\n  let mean = 0;\n  for (let p = 0; p \u003c N; p++) mean += hf[p];\n  mean /= N;\n  for (let p = 0; p \u003c N; p++) hf[p] -= mean;\n  P.type = r \u003c 0.5 ? 0 : r \u003c 0.8 ? 1 : 2;\n  if (P.type === 0) {\n    const down = rnd() \u003c 0.5;\n    s[0] = 22 + rnd() * 20;\n    s[1] = 10 + rnd() * 10;\n    s[2] = 0.6 + rnd() * 0.5;\n    s[3] = rnd() * 2 * PI;\n    s[4] = down ? -14 : H + 14;\n    s[5] = down ? H + 14 : -14;\n    P.L = 34 + rnd() * 10;\n    P.B = -0.9 + rnd() * 0.5;\n  } else if (P.type === 1) {\n    s[0] = 26 + rnd() * 12;\n    s[1] = 36 + rnd() * 56;\n    s[3] = rnd() * 2 * PI;\n    s[4] = (rnd() \u003c 0.5 ? -1 : 1) * (1.3 + rnd() * 0.5);\n    s[5] = 25 + rnd() * 6;\n    s[6] = 3;\n    P.L = 18 + rnd() * 5;\n    P.B = -0.6 + rnd() * 0.4;\n  } else {\n    const across = rnd() \u003c 0.4, side = rnd() \u003c 0.5 ? -1 : 1;\n    if (across) {\n      s[0] = side \u003c 0 ? -14 : W + 14;\n      s[2] = side \u003c 0 ? W + 14 : -14;\n      s[1] = 14 + rnd() * 100;\n      s[3] = cl(s[1] + (rnd() - 0.5) * 40, 10, H - 10);\n    } else {\n      s[0] = 32 + side * (34 + rnd() * 6);\n      s[1] = 10 + rnd() * 108;\n      s[2] = 32 - side * (rnd() * 10);\n      s[3] = cl(s[1] + (rnd() - 0.5) * 70, 18, H - 18);\n    }\n    s[4] = 0;\n    s[5] = (rnd() - 0.5) * 36;\n    P.L = 28 + rnd() * 8;\n    P.B = -0.8 + rnd() * 0.5;\n  }\n  // Lay the path down half an LED a point.\n  const path = P.path;\n  pathAt(P, 0, TMP);\n  let px = TMP[0], py = TMP[1], n = 1;\n  path[0] = px;\n  path[1] = py;\n  for (let i = 1; i \u003c= 4000 && n \u003c PMAX; i++) {\n    pathAt(P, i / 4000, TMP);\n    const d = sqrt((TMP[0] - px) ** 2 + (TMP[1] - py) ** 2);\n    if (d >= STEP) {\n      px += ((TMP[0] - px) * STEP) / d;\n      py += ((TMP[1] - py) * STEP) / d;\n      path[n * 2] = px;\n      path[n * 2 + 1] = py;\n      n++;\n    }\n  }\n  P.plen = (n - 1) * STEP;\n  P.pos = 0;\n  // The blade sits at an angle to its track, tilted a little and bowed, so\n  // the band is a shallow trough, and it chatters as it goes, leaving soft\n  // folds across the band. A slow knife glides and cuts shallow; a fast one\n  // chatters harder and digs deeper, so it throws a taller ridge.\n  const al = (rnd() - 0.5) * 0.6;\n  P.ca = cos(al);\n  P.sa = sin(al);\n  P.tilt = (rnd() - 0.5) * 0.6;\n  P.cc = 0.2 + rnd() * 0.4;\n  P.cA = (0.13 + rnd() * 0.1) * (0.35 + 0.65 * P.force);\n  P.B -= 0.35 * (P.force - 1);\n  P.cP = 11 + rnd() * 5;\n  P.cB = (rnd() \u003c 0.5 ? -1 : 1) * (3 + rnd() * 4);\n  P.gPh = rnd() * 2 * PI;\n  P.slip = rnd() \u003c 0.5 ? -1 : 1;\n  if (P.type === 1) {\n    // A swirl throws its cream outwards.\n    locate(P, 6);\n    P.slip = P.tx * (P.kx - s[0]) + P.ty * (P.ky - s[1]) > 0 ? 1 : -1;\n  }\n  P.m.fill(0);\n  P.c.fill(0);\n  P.ft.fill(0);\n  P.fm.fill(0);\n  P.rh = 0;\n  P.live = true;\n  // Every stroke goes through fresh dollops dropped a little way along: one\n  // for one tint, two or three when three tints are folded in.\n  const nd = k3 === 1 ? 1 : k3 === 2 ? (rnd() \u003c 0.5 ? 2 : 1) : rnd() \u003c 0.4 ? 3 : 2;\n  for (let i = 0; i \u003c nd; i++) plan(P, 0.1 + rnd() * 0.45, rnd() \u003c 0.4 ? 0 : DOSE[k3 - 1][floor(rnd() * k3)], (10 + rnd() * 3) / sqrt(nd));\n}\n\n// A dollop waiting to fall at a point on the path ahead of the knife.\nfunction plan(P, u, c, r) {\n  if (P.dol.length > 3) return;\n  const i = floor((P.pos + (P.plen - P.pos) * u) / STEP);\n  const x = P.path[i * 2], y = P.path[i * 2 + 1];\n  P.dol.push({ x: cl(x + (rnd() - 0.5) * 6, 6, W - 7), y: cl(y + (rnd() - 0.5) * 6, 8, H - 9), r, h: 2.6 + rnd() * 0.6, c, f: 0 });\n}\n\n// The knife's point, its direction of travel and the blade's direction.\nfunction locate(P, pos) {\n  const path = P.path, last = floor(P.plen / STEP);\n  const i = cl(floor(pos / STEP), 0, last - 1), f = cl(pos / STEP - i, 0, 1);\n  P.kx = path[i * 2] + (path[i * 2 + 2] - path[i * 2]) * f;\n  P.ky = path[i * 2 + 1] + (path[i * 2 + 3] - path[i * 2 + 1]) * f;\n  const a = max(0, i - 3), b = min(last, i + 4);\n  let dx = path[b * 2] - path[a * 2], dy = path[b * 2 + 1] - path[a * 2 + 1];\n  const d = sqrt(dx * dx + dy * dy) || 1;\n  dx /= d;\n  dy /= d;\n  P.dx = dx;\n  P.dy = dy;\n  P.tx = -dy * P.ca - dx * P.sa;\n  P.ty = dx * P.ca - dy * P.sa;\n}\n\n// The load of the blade at a point a along it and the tint it drags there,\n// read between the bins so what it lays down has no seams.\nfunction load(P, a) {\n  const fb = cl(((a + P.L / 2) / P.L) * NB - 0.5, 0, NB - 1), j = min(NB - 2, floor(fb)), f = fb - j;\n  P.bm = P.m[j] + (P.m[j + 1] - P.m[j]) * f;\n  P.bc = P.ft[j] + (P.ft[j + 1] - P.ft[j]) * f;\n}\n\n// The ridge across its width r (0 at the band's edge, 1 at its foot): a\n// steep inner face where the blade cut it, a long outer slope.\nconst ridge = (r) => (r \u003c 0.3 ? sm(r / 0.3) : 1 - sm((r - 0.3) / 0.7));\n\n// One move of the knife by ds LEDs. Each LED is worked once a pass, as the\n// back of the blade leaves it: what stood above the blade goes into the\n// bin over it, and the band, the ridge beside it and their tints are laid\n// down.\nfunction knife(P, ds) {\n  P.pos += ds;\n  P.sub++;\n  if (P.pos >= P.plen) return lift(P);\n  locate(P, P.pos);\n  const { hf, tn, ut, m, c, ft, fm, stamp, L } = P, hl = L / 2, sl = P.slip;\n  for (let j = 0; j \u003c NB; j++) fm[j] *= 1 - DRAG * ds;\n  const kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  // Pressure comes on over the first 8 LEDs and goes off over the last 6.\n  const pr = sm(P.pos / 8) * sm((P.plen - P.pos) / 6);\n  const rw = max(3, (2 * P.rh) / RS), end = sl > 0 ? NB - 1 : 0, lvEnd = P.B + P.tilt * sl + P.cc;\n  const rx = abs(tx) * (hl + rw) + 3, ry = abs(ty) * (hl + rw) + 3;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, s = (tx * oy - ty * ox) / det;\n      // On a curve the LEDs on the outside move further than ds, so the\n      // strip is wider than a step and the stamp keeps it to once a pass.\n      if (s \u003c -3 - ds || s >= -0.3) continue;\n      const a = (ox * dy - oy * dx) / det, as = a * sl, p = y * W + x;\n      if (as \u003c= -hl - 1.5 || as >= hl + rw || P.sub - stamp[p] \u003c 40) continue;\n      stamp[p] = P.sub;\n      const ho = hf[p], to = tn[p];\n      if (as \u003c hl && as > -hl) {\n        // The chatter marks bow back towards the blade's ends, as a flexible\n        // blade leaves them, and come and go along it.\n        const u = a / hl, w = (2 * PI * (P.pos + P.cB * u * u)) / P.cP;\n        const lv = P.B + P.tilt * u + P.cc * u * u + P.cA * (0.65 + 0.35 * sin(a * 0.31 + P.gPh)) * (sin(w) + 0.5 * sin(w * 1.63 + 1.3)), e = ho - lv;\n        const j = cl(floor(((a + hl) / L) * NB), 0, NB - 1);\n        if (e > 0) {\n          m[j] += e * pr;\n          c[j] += (to - c[j]) * min(1, e * PICK * pr);\n          // The skin of tint the blade drags stays in its own lane and is\n          // mixed by how much of each colour it gathered, so a dollop\n          // becomes a long ribbon that pales as white cream dilutes it.\n          fm[j] += e * pr;\n          ft[j] += ((to - ft[j]) * e * pr) / fm[j];\n        }\n        // Under what was scraped off lies the bed; over it the blade leaves a\n        // film of the cream it carries.\n        const ex = e > 0 ? to + (ut[p] - to) * min(1, e / SKIN) : to;\n        load(P, a);\n        const tw = ex + (P.bc - ex) * FILM * min(1, P.bm);\n        hf[p] = ho + (lv - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (tw - to) * pr;\n        ut[p] += (tw - ut[p]) * pr * 0.4;\n      } else {\n        // Beside the band: the ridge on the spill side, a thin lip of\n        // squeezed cream on the other.\n        const hr = as > 0 ? lvEnd + P.rh * ridge((as - hl) / rw) : P.B - P.tilt * sl + 0.2 * P.rh * ridge((-as - hl) / 1.5);\n        if (hr \u003c= ho) continue;\n        const k = pr * min(1, (hr - ho) / SKIN), ce = as > 0 ? c[end] : to;\n        hf[p] = ho + (hr - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (ce - to) * k;\n        ut[p] += (ce - ut[p]) * k;\n      }\n    }\n  // The load slides along the angled blade and spills off its end, and the\n  // ridge stands as tall as the cream spilling into it.\n  const f = min(0.9, SLIP * ds);\n  for (let k = 1; k \u003c NB; k++) {\n    const j = sl > 0 ? NB - 1 - k : k, to = j + sl, a = m[j] * f;\n    if (a \u003c= 0) continue;\n    c[to] = (c[to] * m[to] + c[j] * a) / (m[to] + a);\n    m[to] += a;\n    m[j] -= a;\n  }\n  const spill = m[end] * f;\n  m[end] -= spill;\n  const target = min(RMAX, sqrt(0.75 * (spill / ds) * RS));\n  P.rh += (target - P.rh) * min(1, ds * 0.25);\n}\n\n// The knife lifts: what it still carries stays where it stopped, a raised\n// lip across the end of the band.\nfunction lift(P) {\n  locate(P, P.plen);\n  roll(P, P.hf, P.tn, P.ut);\n  P.live = false;\n  P.done++;\n  P.pause = 0.15 + rnd() * 0.2;\n}\n\n// The cream on the blade's face as a rounded roll in front of it, laid into\n// (h, t): for the picture while the knife moves, for good when it lifts.\nfunction roll(P, h, t, u) {\n  const hl = P.L / 2, kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  const rx = abs(tx) * hl + ROLL + 2, ry = abs(ty) * hl + ROLL + 2;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, a = (ox * dy - oy * dx) / det, s = (tx * oy - ty * ox) / det;\n      if (s \u003c= -0.3 || s >= ROLL || a \u003c= -hl || a >= hl) continue;\n      load(P, a);\n      // A bin's load spread as a mound ROLL deep, rounded off at the blade's\n      // ends: as tall as that much cream stands, and never a wall.\n      const ht = min(2.4, sqrt((P.bm * NB) / P.L) * 0.7) * sin((PI * (s + 0.3)) / (ROLL + 0.3)) * sqrt(sin((PI * (a + hl)) / P.L));\n      const p = y * W + x;\n      if (P.B + ht \u003c= h[p]) continue;\n      const k = min(1, (P.B + ht - h[p]) / SKIN);\n      h[p] = P.B + ht;\n      t[p] += (P.bc - t[p]) * k;\n      if (u) u[p] += (P.bc - u[p]) * k;\n    }\n}\n\n// One frame of the studio: the pause between strokes, dollops falling, the knife.\nfunction tick(P, dt, speed, k3) {\n  for (const d of P.dol) {\n    if (d.f >= 1) continue;\n    const g = min(1 - d.f, dt * 2.5 * max(0.6, speed / 2));\n    dollop(P, d.x, d.y, d.r, d.h, d.c, g, d.f === 0);\n    d.f += g;\n  }\n  // Freshly worked cream glistens; left alone it dulls to a satin over\n  // about ten seconds at Speed 2.\n  P.lt += dt * speed * 0.5;\n  const fr = P.fr, k = 1 - dt * 0.07 * max(0.5, speed);\n  for (let p = 0; p \u003c N; p++) fr[p] *= k;\n  if (!P.live) {\n    P.pause -= dt * max(0.5, speed / 2);\n    if (P.pause \u003c= 0) startStroke(P, k3);\n  } else {\n    let ds = dt * speed * 10;\n    while (ds > 1e-6) {\n      const st = min(ds, 0.5);\n      knife(P, st);\n      ds -= st;\n      if (!P.live) break;\n    }\n  }\n  // A dollop is forgotten once it has fallen and the knife has gone on.\n  if (P.dol.length && P.dol[0].f >= 1 && (!P.live || P.dol.length > 2)) P.dol.shift();\n}\n\n// The first frame already shows cream that has been worked: a level layer\n// and three strokes through dollops of tint.\nfunction prime(P, k3) {\n  const { hf } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hf[y * W + x] = 0.3 * sin(x * 0.11 + y * 0.05) * sin(y * 0.07 - x * 0.04);\n  P.pause = 0;\n  while (P.done \u003c 3) tick(P, 1 / 30, 2, k3);\n  while (!P.live) tick(P, 1 / 30, 2, k3);\n  // Start the live stroke a fifth of the way along, its dollops down.\n  for (const d of P.dol) if (d.f \u003c 1) (dollop(P, d.x, d.y, d.r, d.h, d.c, 1 - d.f, d.f === 0), (d.f = 1));\n  while (P.live && P.pos \u003c P.plen * 0.2) tick(P, 1 / 30, 2, k3);\n  P.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.tones = cl(k[2], 1, 3);\n  P.gloss = cl(k[3], 0, 1);\n  const k3 = cl(Math.round(P.tones), 1, 3);\n  P.force = cl(k[1], 0.2, 3) / 2;\n  if (!P.ready) prime(P, k3);\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fresh dollop in the deepest tint, where the knife will reach it.\n    if (P.live && P.plen - P.pos > 40) plan(P, 0.25 + rnd() * 0.2, DOSE[k3 - 1][k3 - 1], 9);\n    else P.dol.push({ x: 14 + rnd() * 36, y: 20 + rnd() * 88, r: 12, h: 3.2, c: DOSE[k3 - 1][k3 - 1], f: 0 });\n  }\n  tick(P, d, cl(k[1], 0.2, 3), k3);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  const { dh, dt, lut, lus } = P;\n  dh.set(P.hf);\n  dt.set(P.tn);\n  // The cream riding on the blade's face shows where the unseen knife is.\n  if (P.live) roll(P, dh, dt, null);\n  // The light reads the surface and its colour through a small blur, so the\n  // LED steps of the height field do not show as grain.\n  blur(dh, P.bl);\n  // A wide blur of the surface: cream that stands above it is a crest and\n  // catches more light, cream below it lies in a fold and gets less.\n  const av = P.av;\n  av.set(dh);\n  for (let i = 0; i \u003c 4; i++) blur(av, P.bl);\n  blur(dt, P.bl);\n  // The colour of each tint concentration: white cream at 0, the deepest\n  // tint at 1, stepped into the bands Tones asks for. Light goes a little\n  // way into cream, so its shadows are a deeper tint rather than grey.\n  // Wet cream (Gloss up) is a little deeper in colour, as anything wet is.\n  // The deeper tints also darken, so three of them stay apart, except round\n  // orange and yellow, where darker reads as brown and olive on LEDs.\n  const t = P.tones, n0 = floor(t) - 1, ft = t - floor(t), n1 = min(2, n0 + 1), hue = H0 + P.hue, g = P.gloss;\n  const hw = (hue - floor(hue) + 0.38) % 1, dk = 0.3 * min(1, abs(hw - 0.5) / 0.11);\n  for (let i = 0; i \u003c 64; i++) {\n    const c = i / 63, v = band(c, n0) + (band(c, n1) - band(c, n0)) * ft;\n    hsv(hue, 0.22 + 0.72 * v + 0.06 * g, (1 - 0.06 * v - dk * v * v) * (1 - 0.1 * g), lut, i * 3);\n    hsv(hue, min(1, 0.4 + 0.6 * v + 0.1 * g), 0.58 - 0.08 * v - 0.14 * g, lus, i * 3);\n  }\n  // The sheen is measured from what a level surface would show, so level\n  // cream stays its colour and only the slopes turned to the light shine.\n  const la = LA + LS * sin((2 * PI * P.lt) / SWING), lr = sqrt(1 - LZ * LZ), LX = lr * cos(la), LY = lr * sin(la);\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  // A broad satin sheen is always there; Gloss adds a narrow wet one on top.\n  const shin = 10 + 70 * g * g, ks = 0.95 * g * 255, s0 = pow(HZ, shin), sk = ks / (1 - s0), fr = P.fr;\n  const b0 = pow(HZ, 6), bk = (0.4 * 255) / (1 - b0);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = y > 0 ? -W : 0, yd = y \u003c H - 1 ? W : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (dh[x \u003c W - 1 ? p + 1 : p] - dh[x > 0 ? p - 1 : p]) * 0.5 * KZ;\n      const gy = (dh[p + yd] - dh[p + yu]) * 0.5 * KZ;\n      const il = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * il, ny = -gy * il, nz = il;\n      const df = nx * LX + ny * LY + nz * LZ, nh = nx * HX + ny * HY + nz * HZ;\n      const f = (df > -WRAP ? (0.85 * (df + WRAP)) / (LZ + WRAP) : 0) * (1 + cl((dh[p] - av[p]) * CAV, -0.45, 0.25)), n2 = nh * nh, sp = (nh > HZ ? ((g > 0.01 ? (pow(nh, shin) - s0) * sk : 0) + (n2 * n2 * n2 - b0) * bk) * (0.5 + 0.5 * fr[p]) : 0) + fr[p] * GLINT;\n      const o = cl(floor(dt[p] * 63 + 0.5), 0, 63) * 3, r = lus[o], gg = lus[o + 1], b = lus[o + 2];\n      display.setPixel(x, y, min(255, r + (lut[o] - r) * f + sp), min(255, gg + (lut[o + 1] - gg) * f + sp * 0.97), min(255, b + (lut[o + 2] - b) * f + sp * 0.92));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the cream and its tints round the whole colour wheel together, opening on rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges."},{"name":"Tones","min":1,"max":3,"about":"How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path."},{"name":"Gloss","min":0,"max":1,"about":"At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight."}],"start":[0,2,1,0.06],"measures":{"motion":0.0374,"detail":0.0161,"edges":0.0277,"complexity":1.8116,"coverage":1,"colour":0.1658,"drift":0.0429},"knobResponse":[0.2103,0.0689,0.1027,0.1086]},{"slug":"crossroads","title":"Crossroads","family":"city","round":17,"note":"드론으로 곧장 내려다본 밤 네거리예요. 차는 전조등과 미등으로만 보이고, 나트륨등 웅덩이 사이에서 신호가 줄을 세웠다 풀며, 모든 차가 서면 사람들이 건널목 넷을 한꺼번에 건너요.","idea":"A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","layer":{"id":"layer-crossroads","type":"code","name":"crossroads","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads."},{"name":"Pace","min":0.2,"max":3,"about":"The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps."},{"name":"Hour","min":0,"max":1,"about":"At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets."},{"name":"Rain","min":0,"max":1,"about":"Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas."}],"start":[0,2,0,0.06],"measures":{"motion":0.2133,"detail":0.0621,"edges":0.4808,"complexity":0.9935,"coverage":0.2564,"colour":0.385,"drift":0.0485},"knobResponse":[0.05,0.0417,0.0482,0.062]},{"slug":"curve-shortening","title":"Curve Shortening","family":"line","round":36,"note":"굵은 나선이나 접힌 지렁이, 팔 여럿인 별 같은 닫힌 곡선 하나가 점마다 곡률만큼의 빠르기로 법선을 따라 움직여요. 곡선은 제 몸에 한 번도 닿지 않고 풀려 둥글어진 뒤 한 점으로 사라지고, 넓이는 모양과 상관없이 흐름 시간 1 에 2π 씩 줄며, 흰 점으로 찍힌 변곡점은 둘씩 만나 함께 없어져요. K3 은 나선을 2바퀴에서 3.5바퀴까지 감고, K1 을 누르면 남은 흐름이 0.6초 만에 끝나요.","idea":"One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.","buttons":"K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.","code":"// ===== Patternflow pattern =====\n// Title:   Curve Shortening\n// Family:  line\n// Idea:    One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: curve-shortening flow, Grayson's theorem (Matthew Grayson, 1987), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1\n//\n// Knob 1: Hue. The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it.\n// Knob 2: Speed. At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long.\n// Knob 3: Wind. How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve.\n// Knob 4: Trace. At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline.\n// Buttons: K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.\n\nconst W = 64, H = 128, NMAX = 1500, NMIN = 28, SNAPS = 10, SNAPN = 180;\n// Flow time is in LEDs squared: the area falls 2 pi of them per unit. A curve\n// lives LIFE beats of the clock; a beat is a second at Speed 2.\nconst LIFE = 5.6, DRAW0 = 1.9, DRAW = 0.95, FLASH = 0.6, DS = 1.3;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, random, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// ---- Shapes. Each is a centre line with a band width, or a polygon. ----\n\nfunction seg(out, x0, y0, x1, y1) {\n  const k = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.5));\n  for (let i = 0; i \u003c k; i++) out.push(x0 + ((x1 - x0) * i) / k, y0 + ((y1 - y0) * i) / k);\n}\n\n// A spiral on a stadium: half turns over the top and under the bottom, 2h\n// apart, joined by straight runs. Each half turn is a true semicircle, the\n// top ones centred on cx with radius r0 + k p, the bottom ones half a pitch\n// to the right with radius r0 + (k + 1/2) p, so the arcs meet the runs with\n// no corner and the band gains p every turn. It uses the tall panel the way\n// a round spiral cannot.\nfunction spiral(T) {\n  const p = 57 / (2 * T + 0.2), w = 0.45 * p, r0 = w / 2 + 1.5, h = 30, cx = 32, cy = 64, C = [];\n  const halves = 2 * T;\n  seg(C, cx + r0, cy + h, cx + r0, cy - h);\n  for (let k = 0; k \u003c halves; k++) {\n    const top = k % 2 === 0, R = r0 + (k * p) / 2, xc = top ? cx : cx + p / 2, yc = top ? cy - h : cy + h;\n    const f1 = min(PI, (halves - k) * PI);\n    for (let f = 0; f \u003c f1; f += 0.6 / R) C.push(xc + (top ? 1 : -1) * R * cos(f), yc + (top ? -1 : 1) * R * sin(f));\n    const x = xc + (top ? 1 : -1) * R * cos(f1);\n    if (f1 \u003c PI) C.push(x, yc + (top ? -1 : 1) * R * sin(f1));\n    else seg(C, x, yc, x, top ? cy + h : cy - h);\n  }\n  return { C, w };\n}\n\n// Two round spirals, one over the other, joined through the middle of the\n// panel as an S: the outer end of the upper one meets its mirror image there.\nfunction coils(T) {\n  const k = T \u003c 2.5 ? 2 : 3, p = 28.5 / (k + 0.55), w = 0.62 * p, r0 = 0.3 * p + 1.5, F = 2 * PI * k + PI / 2;\n  const Rm = r0 + (p * F) / (2 * PI), cyA = 64 - Rm, A = [];\n  for (let f = 0; f \u003c F; f += 0.03) {\n    const r = r0 + (p * f) / (2 * PI);\n    A.push(32 + r * cos(f), cyA + r * sin(f));\n  }\n  const C = A.slice();\n  C.push(32, 64);\n  for (let i = A.length - 2; i >= 0; i -= 2) C.push(64 - A[i], 128 - A[i + 1]);\n  return { C, w };\n}\n\n// A worm folded into m runs across the panel, joined by hairpin bends.\nfunction worm(T) {\n  const m = 2 + round(2 * T), p = 118 / m, w = 0.6 * p, xl = 3 + p / 2 + w / 2, xr = 61 - p / 2 - w / 2, C = [];\n  for (let j = 0; j \u003c m; j++) {\n    const y = 5 + p / 2 + j * p, right = j % 2 === 0;\n    seg(C, right ? xl : xr, y, right ? xr : xl, y);\n    if (j === m - 1) {\n      C.push(right ? xr : xl, y);\n      break;\n    }\n    const xc = right ? xr : xl, yc = y + p / 2;\n    for (let a = 0; a \u003c PI; a += 0.06) C.push(xc + (right ? 1 : -1) * (p / 2) * sin(a), yc - (p / 2) * cos(a));\n  }\n  return { C, w };\n}\n\n// A star: r(t) = R (0.34 + 0.66 g(k t)), one arm per lobe of g, stretched\n// 1.45 times up the panel. Being a graph over the angle, before and after the\n// stretch, it cannot cross itself.\nfunction star(T) {\n  const k = 2 + round(2 * T), R = 29.5, P = [];\n  for (let i = 0; i \u003c 2400; i++) {\n    const t = (2 * PI * i) / 2400, g = ((1 + cos(k * t)) / 2) ** 1.7, r = R * (0.34 + 0.66 * g);\n    P.push(32 + r * sin(t), 64 - 1.45 * r * cos(t));\n  }\n  return P;\n}\n\n// The outline of a band of width w round a centre line, with round ends.\nfunction band(C, w) {\n  const m = C.length >> 1, L = [], Rt = [], hw = w / 2;\n  const nrm = (i) => {\n    const a = max(0, i - 1), b = min(m - 1, i + 1);\n    let tx = C[2 * b] - C[2 * a], ty = C[2 * b + 1] - C[2 * a + 1];\n    const l = sqrt(tx * tx + ty * ty) || 1;\n    return [tx / l, ty / l];\n  };\n  for (let i = 0; i \u003c m; i++) {\n    const [tx, ty] = nrm(i);\n    L.push(C[2 * i] - ty * hw, C[2 * i + 1] + tx * hw);\n    Rt.push(C[2 * i] + ty * hw, C[2 * i + 1] - tx * hw);\n  }\n  const P = L.slice();\n  const cap = (i, s) => {\n    const [tx, ty] = nrm(i), nx = -ty, ny = tx;\n    for (let a = 0.12; a \u003c PI; a += 0.12) {\n      const c = cos(a), d = sin(a);\n      P.push(C[2 * i] + s * hw * (c * nx + d * tx), C[2 * i + 1] + s * hw * (c * ny + d * ty));\n    }\n  };\n  cap(m - 1, 1);\n  for (let i = m - 1; i >= 0; i--) P.push(Rt[2 * i], Rt[2 * i + 1]);\n  cap(0, -1);\n  return P;\n}\n\nfunction area(X, Y, n) {\n  let a = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) a += X[j] * Y[i] - X[i] * Y[j];\n  return a / 2;\n}\n\n// Put n points round the closed polygon P at equal steps of arc length,\n// wound so that the area comes out positive.\nfunction resample(P, np, X, Y, n) {\n  const m = np, len = new Float64Array(m + 1);\n  for (let i = 0; i \u003c m; i++) {\n    const j = (i + 1) % m;\n    len[i + 1] = len[i] + sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  const L = len[m];\n  let s = 0;\n  for (let k = 0; k \u003c n; k++) {\n    const target = (L * k) / n;\n    while (s \u003c m - 1 && len[s + 1] \u003c target) s++;\n    const j = (s + 1) % m, u = (target - len[s]) / (len[s + 1] - len[s] || 1);\n    X[k] = P[2 * s] + u * (P[2 * j] - P[2 * s]);\n    Y[k] = P[2 * s + 1] + u * (P[2 * j + 1] - P[2 * s + 1]);\n  }\n  if (area(X, Y, n) \u003c 0)\n    for (let a = 0, b = n - 1; a \u003c b; a++, b--) {\n      let t = X[a];\n      X[a] = X[b];\n      X[b] = t;\n      t = Y[a];\n      Y[a] = Y[b];\n      Y[b] = t;\n    }\n  return L;\n}\n\nfunction perimeter(X, Y, n) {\n  let L = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) L += sqrt((X[i] - X[j]) ** 2 + (Y[i] - Y[j]) ** 2);\n  return L;\n}\n\n// A new curve: the spiral first, then any of the four but the one just\n// shown, at 70 to 100% size somewhere on the panel, mirrored at random.\nfunction build(S, wind, first) {\n  let kind = 0;\n  if (!first) {\n    kind = floor(random() * 4);\n    if (kind === S.kind) kind = (kind + 1 + floor(random() * 3)) % 4;\n  }\n  S.kind = kind;\n  S.wind = wind;\n  let P;\n  if (kind === 1) P = star(wind);\n  else {\n    const { C, w } = kind === 0 ? spiral(wind) : kind === 2 ? worm(wind) : coils(wind);\n    P = band(C, w);\n  }\n  const sc = first ? 1 : 0.7 + 0.3 * random(), fx = random() \u003c 0.5 ? -1 : 1, fy = random() \u003c 0.5 ? -1 : 1;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c P.length; i += 2) {\n    P[i] = 32 + fx * sc * (P[i] - 32);\n    P[i + 1] = 64 + fy * sc * (P[i + 1] - 64);\n    x0 = min(x0, P[i]);\n    x1 = max(x1, P[i]);\n    y0 = min(y0, P[i + 1]);\n    y1 = max(y1, P[i + 1]);\n  }\n  // The first curve stands in the middle; later ones slide anywhere they\n  // still fit between 1.5 and 62.5 across, 1.5 and 126.5 down.\n  const dx = first ? 32 - (x0 + x1) / 2 : 1.5 - x0 + random() * max(0, 61 - (x1 - x0));\n  const dy = first ? 64 - (y0 + y1) / 2 : 1.5 - y0 + random() * max(0, 125 - (y1 - y0));\n  for (let i = 0; i \u003c P.length; i += 2) (P[i] += dx), (P[i + 1] += dy);\n  const np = P.length >> 1;\n  let L = 0;\n  for (let i = 0; i \u003c np; i++) {\n    const j = (i + 1) % np;\n    L += sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  S.n = min(NMAX, max(NMIN, round(L / DS)));\n  resample(P, np, S.X, S.Y, S.n);\n  S.A0 = area(S.X, S.Y, S.n);\n  S.flowT = 0;\n  S.phase = 0;\n  S.pt = 0;\n  S.dur = first ? DRAW0 : DRAW;\n  S.ns = 0;\n  S.rush = 0;\n  curvature(S);\n}\n\n// One explicit step of the flow. Vertex i moves along the normal of the\n// chord from i-1 to i+1 by 2 phi / |chord| per unit time, phi the turning\n// angle at i: that is the curvature, and it makes the area fall by exactly\n// phi, so the whole polygon loses sum(phi) = 2 pi per unit time. A small\n// slide along the same chord evens out the spacing and leaves the area alone.\n// The step is at most 0.3 of the square of the shortest half chord, under the\n// 0.5 where the explicit scheme starts to ring. Returns the time it took.\nfunction step(S, todo) {\n  const { X, Y, VX, VY, TX, TY } = S, n = S.n;\n  let mc = 1e9, ml = 1e9, Ml = 0, L = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    const phi = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n    const cx = X[b] - X[a], cy = Y[b] - Y[a], c2 = cx * cx + cy * cy || 1e-12;\n    const l1 = sqrt(ex * ex + ey * ey), l2 = sqrt(fx * fx + fy * fy), g = (0.3 * (l2 - l1)) / sqrt(c2);\n    VX[i] = (-2 * phi * cy) / c2;\n    VY[i] = (2 * phi * cx) / c2;\n    TX[i] = g * cx;\n    TY[i] = g * cy;\n    if (c2 \u003c mc) mc = c2;\n    if (l2 \u003c ml) ml = l2;\n    if (l2 > Ml) Ml = l2;\n    L += l2;\n  }\n  const h = min(todo, 0.075 * mc);\n  for (let i = 0; i \u003c n; i++) {\n    X[i] += h * VX[i] + TX[i];\n    Y[i] += h * VY[i] + TY[i];\n  }\n  S.ml = ml;\n  S.Ml = Ml;\n  S.L = L;\n  return h;\n}\n\n// Fresh points at even spacing. Points laid on the old edges cut the corners\n// and lose a little area, so every point then steps out along its normal by\n// the area lost over half the sum of the chords, which puts it back to first\n// order: a remesh must not move the area clock. When the curve has shrunk\n// there are fewer points, the spacing near DS until the curve is down to NMIN\n// points; edges squeezed under 0.45 of the spacing at a retracting tip, or\n// stretched past 1.8 along an arc pushing outward, force one.\nfunction remesh(S, force) {\n  const { X, Y } = S, L = perimeter(X, Y, S.n), want = max(NMIN, min(NMAX, round(L / DS)));\n  if (!force && want >= 0.8 * S.n && want \u003c= 1.25 * S.n) return;\n  const A = area(X, Y, S.n), P = S.P, np = S.n;\n  for (let i = 0; i \u003c np; i++) (P[2 * i] = X[i]), (P[2 * i + 1] = Y[i]);\n  S.n = want;\n  resample(P, np, X, Y, want);\n  const n = want, VX = S.VX, VY = S.VY;\n  let half = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0, cx = X[b] - X[a], cy = Y[b] - Y[a], c = sqrt(cx * cx + cy * cy) || 1e-9;\n    VX[i] = cy / c;\n    VY[i] = -cx / c;\n    half += c / 2;\n  }\n  const off = (A - area(X, Y, n)) / half;\n  for (let i = 0; i \u003c n; i++) (X[i] += off * VX[i]), (Y[i] += off * VY[i]);\n  S.ml = S.Ml = L / n;\n}\n\n// Signed curvature, summed over seven neighbours so that straight runs read\n// as zero, and the inflection points: where a run of clearly convex points\n// meets a run of clearly concave ones. Runs that never pass 0.06 radians of\n// turning do not count, so a nearly straight stretch does not flicker.\nfunction curvature(S) {\n  const { X, Y, K, PH } = S, n = S.n;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    PH[i] = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n  }\n  let s = 0;\n  for (let j = -3; j \u003c= 3; j++) s += PH[(j + n) % n];\n  for (let i = 0; i \u003c n; i++) {\n    K[i] = s;\n    s += PH[(i + 4) % n] - PH[(i - 3 + n) % n];\n  }\n  // Runs of one sign, starting where the sign changes.\n  const sg = (v) => (v > 0.025 ? 1 : v \u003c -0.025 ? -1 : 0);\n  let start = -1;\n  for (let i = 0; i \u003c n; i++)\n    if (sg(K[i]) && sg(K[i]) !== sg(K[(i - 1 + n) % n])) {\n      start = i;\n      break;\n    }\n  S.ni = 0;\n  if (start \u003c 0) return;\n  const runs = [];\n  let i = 0;\n  while (i \u003c n) {\n    const p = (start + i) % n, v = sg(K[p]);\n    if (!v) {\n      i++;\n      continue;\n    }\n    let j = i, peak = 0;\n    while (j \u003c n && sg(K[(start + j) % n]) === v) (peak = max(peak, abs(K[(start + j) % n]))), j++;\n    if (peak > 0.06) {\n      const last = runs[runs.length - 1];\n      if (last && last.v === v) last.e = j - 1;\n      else runs.push({ v, b: i, e: j - 1 });\n    }\n    i = j;\n  }\n  if (runs.length > 1 && runs[0].v === runs[runs.length - 1].v) {\n    runs[0].b = runs[runs.length - 1].b - n;\n    runs.pop();\n  }\n  if (runs.length \u003c 2) return;\n  for (let r = 0; r \u003c runs.length && S.ni \u003c 64; r++) {\n    const A = runs[r], B = runs[(r + 1) % runs.length];\n    let e = A.e, b = B.b;\n    if (b \u003c= e) b += n;\n    // The zero crossing between the end of one run and the start of the next.\n    let q = e;\n    for (let t = e; t \u003c b; t++) if (K[(start + t) % n] * A.v > 0 && K[(start + t + 1) % n] * A.v \u003c= 0) q = t;\n    const p0 = (start + q + n) % n, p1 = (p0 + 1) % n, k0 = K[p0], k1 = K[p1];\n    const u = k0 !== k1 ? cl(k0 / (k0 - k1), 0, 1) : 0.5;\n    S.IX[S.ni] = X[p0] + u * (X[p1] - X[p0]);\n    S.IY[S.ni] = Y[p0] + u * (Y[p1] - Y[p0]);\n    S.IQ[S.ni++] = p0;\n  }\n}\n\nfunction snapshot(S) {\n  if (S.ns >= SNAPS) return;\n  const k = max(1, ceil(S.n / SNAPN)), o = S.ns * SNAPN * 2;\n  let m = 0;\n  for (let i = 0; i \u003c S.n && m \u003c SNAPN; i += k, m++) (S.SN[o + 2 * m] = S.X[i]), (S.SN[o + 2 * m + 1] = S.Y[i]);\n  S.SM[S.ns++] = m;\n}\n\nfunction setup(params) {\n  params.s = {\n    X: new Float64Array(NMAX), Y: new Float64Array(NMAX), VX: new Float64Array(NMAX), VY: new Float64Array(NMAX),\n    TX: new Float64Array(NMAX), TY: new Float64Array(NMAX), P: new Float64Array(2 * NMAX), ml: 1, Ml: 1, L: 1,\n    K: new Float64Array(NMAX), PH: new Float64Array(NMAX), IX: new Float64Array(64), IY: new Float64Array(64), IQ: new Int32Array(64), ni: 0,\n    SN: new Float64Array(SNAPS * SNAPN * 2), SM: new Int32Array(SNAPS), ns: 0, rush: 0,\n    n: 0, A0: 1, flowT: 0, phase: 0, pt: 0, dur: DRAW0, kind: -1, wind: 1.5, fx: 32, fy: 64, warm: false,\n    hue: 0, trace: 0.06, speed: 2,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), cov: new Float32Array(W * H),\n    xs: new Float32Array(4 * H * 48), xn: new Int32Array(4 * H), col: new Float32Array(12),\n  };\n}\n\nfunction finish(S) {\n  let cx = 0, cy = 0;\n  for (let i = 0; i \u003c S.n; i++) (cx += S.X[i]), (cy += S.Y[i]);\n  S.fx = cx / S.n;\n  S.fy = cy / S.n;\n  S.phase = 2;\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trace = cl(k[3], 0, 1);\n  const wind = cl(k[2], 2, 3.5);\n  if (!S.warm) {\n    build(S, wind, true);\n    S.warm = true;\n  } else if (abs(wind - S.wind) > 0.2 && S.phase !== 2) build(S, wind, false);\n  // K1: the rest of the flow in 0.6 beats, at a rate fixed when pressed.\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== 2) {\n    if (S.phase === 0) (S.phase = 1), (S.pt = 0), snapshot(S);\n    S.rush = area(S.X, S.Y, S.n) / (2 * PI * 0.6);\n  }\n  const beat = (d * S.speed) / 2;\n  S.pt += beat;\n  if (S.phase === 0 && S.pt >= S.dur) {\n    S.phase = 1;\n    S.pt = 0;\n    snapshot(S);\n  }\n  if (S.phase === 1) {\n    // The area clock: A0 / 2 pi units of flow time spread over LIFE beats.\n    let todo = beat * max(S.A0 / (2 * PI * LIFE), S.rush), guard = 0;\n    while (todo > 1e-9 && guard++ \u003c 400) {\n      const h = step(S, todo), ds = S.L / S.n;\n      todo -= h;\n      S.flowT += h;\n      if (S.ml \u003c 0.45 * ds || S.Ml > 1.8 * ds) remesh(S, true);\n      else if (guard % 10 === 0) remesh(S, false);\n      if (guard % 4 === 0 && area(S.X, S.Y, S.n) \u003c 1.5) break;\n    }\n    remesh(S, false);\n    while (S.ns \u003c SNAPS && S.flowT >= (S.ns * S.A0) / (2 * PI * SNAPS)) snapshot(S);\n    if (area(S.X, S.Y, S.n) \u003c 1.5) finish(S);\n  }\n  if (S.phase !== 2) curvature(S);\n  else if (S.pt >= FLASH) build(S, wind, false);\n}\n\n// Coverage of the inside, anti-aliased: four scanlines per row, each\n// crossing interval added to the LEDs it spans in exact fractions.\nfunction fill(S) {\n  const { X, Y, xs, xn, cov } = S, n = S.n, SUB = 4, CAP = 48;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = i + 1 \u003c n ? i + 1 : 0;\n    let x0 = X[i], y0 = Y[i], x1 = X[j], y1 = Y[j];\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const ys = (s + 0.5) / SUB, c = xn[s];\n      if (c \u003c CAP) {\n        xs[s * CAP + c] = x0 + ((ys - y0) * (x1 - x0)) / (y1 - y0);\n        xn[s] = c + 1;\n      }\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\n// A line from (ax, ay) to (bx, by), about 1.6 LEDs wide, kept at the brighter\n// of its colour and what is already there.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const { R, G, B } = S, dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, dd = sqrt(qx * qx + qy * qy);\n      const v = cl((wide - dd) / 0.55, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      R[p] = max(R[p], cr * v);\n      G[p] = max(G[p], cg * v);\n      B[p] = max(B[p], cb * v);\n    }\n}\n\nfunction dot(S, x, y, r, cr, cg, cb) {\n  const { R, G, B } = S;\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, floor(y + r + 1)); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, floor(x + r + 1)); xx++) {\n      const dd = sqrt((xx + 0.5 - x) ** 2 + (yy + 0.5 - y) ** 2), v = cl((r + 0.5 - dd) / 0.7, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = yy * W + xx;\n      R[p] = R[p] * (1 - v) + cr * v;\n      G[p] = G[p] * (1 - v) + cg * v;\n      B[p] = B[p] * (1 - v) + cb * v;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col, X, Y, K } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // Fill, convex rim, concave rim. Orange to lime fills are kept bright so\n  // they read as colour and not brown or olive.\n  const h = S.hue + 0.58;\n  hsv(h, 0.88, 0.9, col, 0);\n  hsv(h - 0.03, 0.3, 1, col, 3);\n  hsv(h + 0.55, 0.85, 1, col, 6);\n  const tr = S.trace, fillLv = 255 * (1 - 0.82 * tr);\n  if (S.phase === 2) {\n    // The round point: a white ring that opens and fades.\n    const u = S.pt / FLASH, r = 1 + 9 * sm(u), a = 255 * (1 - u) * (1 - u);\n    for (let i = 0; i \u003c 48; i++) {\n      const t0 = (2 * PI * i) / 48, t1 = (2 * PI * (i + 1)) / 48;\n      line(S, S.fx + r * cos(t0), S.fy + r * sin(t0), S.fx + r * cos(t1), S.fy + r * sin(t1), a, a, a * 0.95, 0.9);\n    }\n    if (u \u003c 0.3) dot(S, S.fx, S.fy, 1.2, 255, 255, 255);\n  } else {\n    const drawing = S.phase === 0, u = drawing ? S.pt / S.dur : 1;\n    const shown = drawing ? floor(n * sm(u / 0.72)) : n, fa = drawing ? sm((u - 0.55) / 0.4) : 1;\n    // Earlier outlines, the chronophotograph that Trace keeps.\n    if (tr > 0.1 && S.phase === 1) {\n      const lv = 255 * 0.75 * sm((tr - 0.1) / 0.5);\n      for (let s = 0; s \u003c S.ns; s++) {\n        const m = S.SM[s], o = s * SNAPN * 2, f = 0.3 + (0.7 * (s + 1)) / S.ns;\n        for (let i = 0; i \u003c m; i++) {\n          const j = (i + 1) % m;\n          line(S, S.SN[o + 2 * i], S.SN[o + 2 * i + 1], S.SN[o + 2 * j], S.SN[o + 2 * j + 1], col[3] * lv * f * 0.75, col[4] * lv * f * 0.75, col[5] * lv * f * 0.75, 0.75);\n        }\n      }\n    }\n    if (fa > 0) {\n      fill(S);\n      for (let p = 0; p \u003c W * H; p++) {\n        const c = min(1, cov[p]) * fa * fillLv;\n        if (c \u003c= 0) continue;\n        R[p] += col[0] * c;\n        G[p] += col[1] * c;\n        B[p] += col[2] * c;\n      }\n    }\n    // The rim: pale where the curve bends outward, the second colour where\n    // it bends inward. The inflection points sit where the two meet.\n    for (let i = 0; i \u003c shown; i++) {\n      const j = i + 1 \u003c n ? i + 1 : 0, t = cl((K[i] + K[j]) * 6, -1, 1), a = (1 + t) / 2;\n      const cr = 255 * (col[3] * a + col[6] * (1 - a)), cg = 255 * (col[4] * a + col[7] * (1 - a)), cb = 255 * (col[5] * a + col[8] * (1 - a));\n      line(S, X[i], Y[i], X[j], Y[j], cr, cg, cb, drawing && i > shown - 6 ? 1.2 : 0.9);\n    }\n    // White marks at the inflection points: a dark ring round a white core.\n    for (let q = 0; q \u003c S.ni; q++) {\n      if (S.IQ[q] >= shown) continue;\n      dot(S, S.IX[q], S.IY[q], 1.6, 0, 0, 0);\n      dot(S, S.IX[q], S.IY[q], 0.8, 255, 255, 255);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-curve-shortening","type":"code","name":"curve-shortening","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Curve Shortening\n// Family:  line\n// Idea:    One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: curve-shortening flow, Grayson's theorem (Matthew Grayson, 1987), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1\n//\n// Knob 1: Hue. The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it.\n// Knob 2: Speed. At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long.\n// Knob 3: Wind. How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve.\n// Knob 4: Trace. At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline.\n// Buttons: K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.\n\nconst W = 64, H = 128, NMAX = 1500, NMIN = 28, SNAPS = 10, SNAPN = 180;\n// Flow time is in LEDs squared: the area falls 2 pi of them per unit. A curve\n// lives LIFE beats of the clock; a beat is a second at Speed 2.\nconst LIFE = 5.6, DRAW0 = 1.9, DRAW = 0.95, FLASH = 0.6, DS = 1.3;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, random, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// ---- Shapes. Each is a centre line with a band width, or a polygon. ----\n\nfunction seg(out, x0, y0, x1, y1) {\n  const k = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.5));\n  for (let i = 0; i \u003c k; i++) out.push(x0 + ((x1 - x0) * i) / k, y0 + ((y1 - y0) * i) / k);\n}\n\n// A spiral on a stadium: half turns over the top and under the bottom, 2h\n// apart, joined by straight runs. Each half turn is a true semicircle, the\n// top ones centred on cx with radius r0 + k p, the bottom ones half a pitch\n// to the right with radius r0 + (k + 1/2) p, so the arcs meet the runs with\n// no corner and the band gains p every turn. It uses the tall panel the way\n// a round spiral cannot.\nfunction spiral(T) {\n  const p = 57 / (2 * T + 0.2), w = 0.45 * p, r0 = w / 2 + 1.5, h = 30, cx = 32, cy = 64, C = [];\n  const halves = 2 * T;\n  seg(C, cx + r0, cy + h, cx + r0, cy - h);\n  for (let k = 0; k \u003c halves; k++) {\n    const top = k % 2 === 0, R = r0 + (k * p) / 2, xc = top ? cx : cx + p / 2, yc = top ? cy - h : cy + h;\n    const f1 = min(PI, (halves - k) * PI);\n    for (let f = 0; f \u003c f1; f += 0.6 / R) C.push(xc + (top ? 1 : -1) * R * cos(f), yc + (top ? -1 : 1) * R * sin(f));\n    const x = xc + (top ? 1 : -1) * R * cos(f1);\n    if (f1 \u003c PI) C.push(x, yc + (top ? -1 : 1) * R * sin(f1));\n    else seg(C, x, yc, x, top ? cy + h : cy - h);\n  }\n  return { C, w };\n}\n\n// Two round spirals, one over the other, joined through the middle of the\n// panel as an S: the outer end of the upper one meets its mirror image there.\nfunction coils(T) {\n  const k = T \u003c 2.5 ? 2 : 3, p = 28.5 / (k + 0.55), w = 0.62 * p, r0 = 0.3 * p + 1.5, F = 2 * PI * k + PI / 2;\n  const Rm = r0 + (p * F) / (2 * PI), cyA = 64 - Rm, A = [];\n  for (let f = 0; f \u003c F; f += 0.03) {\n    const r = r0 + (p * f) / (2 * PI);\n    A.push(32 + r * cos(f), cyA + r * sin(f));\n  }\n  const C = A.slice();\n  C.push(32, 64);\n  for (let i = A.length - 2; i >= 0; i -= 2) C.push(64 - A[i], 128 - A[i + 1]);\n  return { C, w };\n}\n\n// A worm folded into m runs across the panel, joined by hairpin bends.\nfunction worm(T) {\n  const m = 2 + round(2 * T), p = 118 / m, w = 0.6 * p, xl = 3 + p / 2 + w / 2, xr = 61 - p / 2 - w / 2, C = [];\n  for (let j = 0; j \u003c m; j++) {\n    const y = 5 + p / 2 + j * p, right = j % 2 === 0;\n    seg(C, right ? xl : xr, y, right ? xr : xl, y);\n    if (j === m - 1) {\n      C.push(right ? xr : xl, y);\n      break;\n    }\n    const xc = right ? xr : xl, yc = y + p / 2;\n    for (let a = 0; a \u003c PI; a += 0.06) C.push(xc + (right ? 1 : -1) * (p / 2) * sin(a), yc - (p / 2) * cos(a));\n  }\n  return { C, w };\n}\n\n// A star: r(t) = R (0.34 + 0.66 g(k t)), one arm per lobe of g, stretched\n// 1.45 times up the panel. Being a graph over the angle, before and after the\n// stretch, it cannot cross itself.\nfunction star(T) {\n  const k = 2 + round(2 * T), R = 29.5, P = [];\n  for (let i = 0; i \u003c 2400; i++) {\n    const t = (2 * PI * i) / 2400, g = ((1 + cos(k * t)) / 2) ** 1.7, r = R * (0.34 + 0.66 * g);\n    P.push(32 + r * sin(t), 64 - 1.45 * r * cos(t));\n  }\n  return P;\n}\n\n// The outline of a band of width w round a centre line, with round ends.\nfunction band(C, w) {\n  const m = C.length >> 1, L = [], Rt = [], hw = w / 2;\n  const nrm = (i) => {\n    const a = max(0, i - 1), b = min(m - 1, i + 1);\n    let tx = C[2 * b] - C[2 * a], ty = C[2 * b + 1] - C[2 * a + 1];\n    const l = sqrt(tx * tx + ty * ty) || 1;\n    return [tx / l, ty / l];\n  };\n  for (let i = 0; i \u003c m; i++) {\n    const [tx, ty] = nrm(i);\n    L.push(C[2 * i] - ty * hw, C[2 * i + 1] + tx * hw);\n    Rt.push(C[2 * i] + ty * hw, C[2 * i + 1] - tx * hw);\n  }\n  const P = L.slice();\n  const cap = (i, s) => {\n    const [tx, ty] = nrm(i), nx = -ty, ny = tx;\n    for (let a = 0.12; a \u003c PI; a += 0.12) {\n      const c = cos(a), d = sin(a);\n      P.push(C[2 * i] + s * hw * (c * nx + d * tx), C[2 * i + 1] + s * hw * (c * ny + d * ty));\n    }\n  };\n  cap(m - 1, 1);\n  for (let i = m - 1; i >= 0; i--) P.push(Rt[2 * i], Rt[2 * i + 1]);\n  cap(0, -1);\n  return P;\n}\n\nfunction area(X, Y, n) {\n  let a = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) a += X[j] * Y[i] - X[i] * Y[j];\n  return a / 2;\n}\n\n// Put n points round the closed polygon P at equal steps of arc length,\n// wound so that the area comes out positive.\nfunction resample(P, np, X, Y, n) {\n  const m = np, len = new Float64Array(m + 1);\n  for (let i = 0; i \u003c m; i++) {\n    const j = (i + 1) % m;\n    len[i + 1] = len[i] + sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  const L = len[m];\n  let s = 0;\n  for (let k = 0; k \u003c n; k++) {\n    const target = (L * k) / n;\n    while (s \u003c m - 1 && len[s + 1] \u003c target) s++;\n    const j = (s + 1) % m, u = (target - len[s]) / (len[s + 1] - len[s] || 1);\n    X[k] = P[2 * s] + u * (P[2 * j] - P[2 * s]);\n    Y[k] = P[2 * s + 1] + u * (P[2 * j + 1] - P[2 * s + 1]);\n  }\n  if (area(X, Y, n) \u003c 0)\n    for (let a = 0, b = n - 1; a \u003c b; a++, b--) {\n      let t = X[a];\n      X[a] = X[b];\n      X[b] = t;\n      t = Y[a];\n      Y[a] = Y[b];\n      Y[b] = t;\n    }\n  return L;\n}\n\nfunction perimeter(X, Y, n) {\n  let L = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) L += sqrt((X[i] - X[j]) ** 2 + (Y[i] - Y[j]) ** 2);\n  return L;\n}\n\n// A new curve: the spiral first, then any of the four but the one just\n// shown, at 70 to 100% size somewhere on the panel, mirrored at random.\nfunction build(S, wind, first) {\n  let kind = 0;\n  if (!first) {\n    kind = floor(random() * 4);\n    if (kind === S.kind) kind = (kind + 1 + floor(random() * 3)) % 4;\n  }\n  S.kind = kind;\n  S.wind = wind;\n  let P;\n  if (kind === 1) P = star(wind);\n  else {\n    const { C, w } = kind === 0 ? spiral(wind) : kind === 2 ? worm(wind) : coils(wind);\n    P = band(C, w);\n  }\n  const sc = first ? 1 : 0.7 + 0.3 * random(), fx = random() \u003c 0.5 ? -1 : 1, fy = random() \u003c 0.5 ? -1 : 1;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c P.length; i += 2) {\n    P[i] = 32 + fx * sc * (P[i] - 32);\n    P[i + 1] = 64 + fy * sc * (P[i + 1] - 64);\n    x0 = min(x0, P[i]);\n    x1 = max(x1, P[i]);\n    y0 = min(y0, P[i + 1]);\n    y1 = max(y1, P[i + 1]);\n  }\n  // The first curve stands in the middle; later ones slide anywhere they\n  // still fit between 1.5 and 62.5 across, 1.5 and 126.5 down.\n  const dx = first ? 32 - (x0 + x1) / 2 : 1.5 - x0 + random() * max(0, 61 - (x1 - x0));\n  const dy = first ? 64 - (y0 + y1) / 2 : 1.5 - y0 + random() * max(0, 125 - (y1 - y0));\n  for (let i = 0; i \u003c P.length; i += 2) (P[i] += dx), (P[i + 1] += dy);\n  const np = P.length >> 1;\n  let L = 0;\n  for (let i = 0; i \u003c np; i++) {\n    const j = (i + 1) % np;\n    L += sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  S.n = min(NMAX, max(NMIN, round(L / DS)));\n  resample(P, np, S.X, S.Y, S.n);\n  S.A0 = area(S.X, S.Y, S.n);\n  S.flowT = 0;\n  S.phase = 0;\n  S.pt = 0;\n  S.dur = first ? DRAW0 : DRAW;\n  S.ns = 0;\n  S.rush = 0;\n  curvature(S);\n}\n\n// One explicit step of the flow. Vertex i moves along the normal of the\n// chord from i-1 to i+1 by 2 phi / |chord| per unit time, phi the turning\n// angle at i: that is the curvature, and it makes the area fall by exactly\n// phi, so the whole polygon loses sum(phi) = 2 pi per unit time. A small\n// slide along the same chord evens out the spacing and leaves the area alone.\n// The step is at most 0.3 of the square of the shortest half chord, under the\n// 0.5 where the explicit scheme starts to ring. Returns the time it took.\nfunction step(S, todo) {\n  const { X, Y, VX, VY, TX, TY } = S, n = S.n;\n  let mc = 1e9, ml = 1e9, Ml = 0, L = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    const phi = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n    const cx = X[b] - X[a], cy = Y[b] - Y[a], c2 = cx * cx + cy * cy || 1e-12;\n    const l1 = sqrt(ex * ex + ey * ey), l2 = sqrt(fx * fx + fy * fy), g = (0.3 * (l2 - l1)) / sqrt(c2);\n    VX[i] = (-2 * phi * cy) / c2;\n    VY[i] = (2 * phi * cx) / c2;\n    TX[i] = g * cx;\n    TY[i] = g * cy;\n    if (c2 \u003c mc) mc = c2;\n    if (l2 \u003c ml) ml = l2;\n    if (l2 > Ml) Ml = l2;\n    L += l2;\n  }\n  const h = min(todo, 0.075 * mc);\n  for (let i = 0; i \u003c n; i++) {\n    X[i] += h * VX[i] + TX[i];\n    Y[i] += h * VY[i] + TY[i];\n  }\n  S.ml = ml;\n  S.Ml = Ml;\n  S.L = L;\n  return h;\n}\n\n// Fresh points at even spacing. Points laid on the old edges cut the corners\n// and lose a little area, so every point then steps out along its normal by\n// the area lost over half the sum of the chords, which puts it back to first\n// order: a remesh must not move the area clock. When the curve has shrunk\n// there are fewer points, the spacing near DS until the curve is down to NMIN\n// points; edges squeezed under 0.45 of the spacing at a retracting tip, or\n// stretched past 1.8 along an arc pushing outward, force one.\nfunction remesh(S, force) {\n  const { X, Y } = S, L = perimeter(X, Y, S.n), want = max(NMIN, min(NMAX, round(L / DS)));\n  if (!force && want >= 0.8 * S.n && want \u003c= 1.25 * S.n) return;\n  const A = area(X, Y, S.n), P = S.P, np = S.n;\n  for (let i = 0; i \u003c np; i++) (P[2 * i] = X[i]), (P[2 * i + 1] = Y[i]);\n  S.n = want;\n  resample(P, np, X, Y, want);\n  const n = want, VX = S.VX, VY = S.VY;\n  let half = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0, cx = X[b] - X[a], cy = Y[b] - Y[a], c = sqrt(cx * cx + cy * cy) || 1e-9;\n    VX[i] = cy / c;\n    VY[i] = -cx / c;\n    half += c / 2;\n  }\n  const off = (A - area(X, Y, n)) / half;\n  for (let i = 0; i \u003c n; i++) (X[i] += off * VX[i]), (Y[i] += off * VY[i]);\n  S.ml = S.Ml = L / n;\n}\n\n// Signed curvature, summed over seven neighbours so that straight runs read\n// as zero, and the inflection points: where a run of clearly convex points\n// meets a run of clearly concave ones. Runs that never pass 0.06 radians of\n// turning do not count, so a nearly straight stretch does not flicker.\nfunction curvature(S) {\n  const { X, Y, K, PH } = S, n = S.n;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    PH[i] = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n  }\n  let s = 0;\n  for (let j = -3; j \u003c= 3; j++) s += PH[(j + n) % n];\n  for (let i = 0; i \u003c n; i++) {\n    K[i] = s;\n    s += PH[(i + 4) % n] - PH[(i - 3 + n) % n];\n  }\n  // Runs of one sign, starting where the sign changes.\n  const sg = (v) => (v > 0.025 ? 1 : v \u003c -0.025 ? -1 : 0);\n  let start = -1;\n  for (let i = 0; i \u003c n; i++)\n    if (sg(K[i]) && sg(K[i]) !== sg(K[(i - 1 + n) % n])) {\n      start = i;\n      break;\n    }\n  S.ni = 0;\n  if (start \u003c 0) return;\n  const runs = [];\n  let i = 0;\n  while (i \u003c n) {\n    const p = (start + i) % n, v = sg(K[p]);\n    if (!v) {\n      i++;\n      continue;\n    }\n    let j = i, peak = 0;\n    while (j \u003c n && sg(K[(start + j) % n]) === v) (peak = max(peak, abs(K[(start + j) % n]))), j++;\n    if (peak > 0.06) {\n      const last = runs[runs.length - 1];\n      if (last && last.v === v) last.e = j - 1;\n      else runs.push({ v, b: i, e: j - 1 });\n    }\n    i = j;\n  }\n  if (runs.length > 1 && runs[0].v === runs[runs.length - 1].v) {\n    runs[0].b = runs[runs.length - 1].b - n;\n    runs.pop();\n  }\n  if (runs.length \u003c 2) return;\n  for (let r = 0; r \u003c runs.length && S.ni \u003c 64; r++) {\n    const A = runs[r], B = runs[(r + 1) % runs.length];\n    let e = A.e, b = B.b;\n    if (b \u003c= e) b += n;\n    // The zero crossing between the end of one run and the start of the next.\n    let q = e;\n    for (let t = e; t \u003c b; t++) if (K[(start + t) % n] * A.v > 0 && K[(start + t + 1) % n] * A.v \u003c= 0) q = t;\n    const p0 = (start + q + n) % n, p1 = (p0 + 1) % n, k0 = K[p0], k1 = K[p1];\n    const u = k0 !== k1 ? cl(k0 / (k0 - k1), 0, 1) : 0.5;\n    S.IX[S.ni] = X[p0] + u * (X[p1] - X[p0]);\n    S.IY[S.ni] = Y[p0] + u * (Y[p1] - Y[p0]);\n    S.IQ[S.ni++] = p0;\n  }\n}\n\nfunction snapshot(S) {\n  if (S.ns >= SNAPS) return;\n  const k = max(1, ceil(S.n / SNAPN)), o = S.ns * SNAPN * 2;\n  let m = 0;\n  for (let i = 0; i \u003c S.n && m \u003c SNAPN; i += k, m++) (S.SN[o + 2 * m] = S.X[i]), (S.SN[o + 2 * m + 1] = S.Y[i]);\n  S.SM[S.ns++] = m;\n}\n\nfunction setup(params) {\n  params.s = {\n    X: new Float64Array(NMAX), Y: new Float64Array(NMAX), VX: new Float64Array(NMAX), VY: new Float64Array(NMAX),\n    TX: new Float64Array(NMAX), TY: new Float64Array(NMAX), P: new Float64Array(2 * NMAX), ml: 1, Ml: 1, L: 1,\n    K: new Float64Array(NMAX), PH: new Float64Array(NMAX), IX: new Float64Array(64), IY: new Float64Array(64), IQ: new Int32Array(64), ni: 0,\n    SN: new Float64Array(SNAPS * SNAPN * 2), SM: new Int32Array(SNAPS), ns: 0, rush: 0,\n    n: 0, A0: 1, flowT: 0, phase: 0, pt: 0, dur: DRAW0, kind: -1, wind: 1.5, fx: 32, fy: 64, warm: false,\n    hue: 0, trace: 0.06, speed: 2,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), cov: new Float32Array(W * H),\n    xs: new Float32Array(4 * H * 48), xn: new Int32Array(4 * H), col: new Float32Array(12),\n  };\n}\n\nfunction finish(S) {\n  let cx = 0, cy = 0;\n  for (let i = 0; i \u003c S.n; i++) (cx += S.X[i]), (cy += S.Y[i]);\n  S.fx = cx / S.n;\n  S.fy = cy / S.n;\n  S.phase = 2;\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trace = cl(k[3], 0, 1);\n  const wind = cl(k[2], 2, 3.5);\n  if (!S.warm) {\n    build(S, wind, true);\n    S.warm = true;\n  } else if (abs(wind - S.wind) > 0.2 && S.phase !== 2) build(S, wind, false);\n  // K1: the rest of the flow in 0.6 beats, at a rate fixed when pressed.\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== 2) {\n    if (S.phase === 0) (S.phase = 1), (S.pt = 0), snapshot(S);\n    S.rush = area(S.X, S.Y, S.n) / (2 * PI * 0.6);\n  }\n  const beat = (d * S.speed) / 2;\n  S.pt += beat;\n  if (S.phase === 0 && S.pt >= S.dur) {\n    S.phase = 1;\n    S.pt = 0;\n    snapshot(S);\n  }\n  if (S.phase === 1) {\n    // The area clock: A0 / 2 pi units of flow time spread over LIFE beats.\n    let todo = beat * max(S.A0 / (2 * PI * LIFE), S.rush), guard = 0;\n    while (todo > 1e-9 && guard++ \u003c 400) {\n      const h = step(S, todo), ds = S.L / S.n;\n      todo -= h;\n      S.flowT += h;\n      if (S.ml \u003c 0.45 * ds || S.Ml > 1.8 * ds) remesh(S, true);\n      else if (guard % 10 === 0) remesh(S, false);\n      if (guard % 4 === 0 && area(S.X, S.Y, S.n) \u003c 1.5) break;\n    }\n    remesh(S, false);\n    while (S.ns \u003c SNAPS && S.flowT >= (S.ns * S.A0) / (2 * PI * SNAPS)) snapshot(S);\n    if (area(S.X, S.Y, S.n) \u003c 1.5) finish(S);\n  }\n  if (S.phase !== 2) curvature(S);\n  else if (S.pt >= FLASH) build(S, wind, false);\n}\n\n// Coverage of the inside, anti-aliased: four scanlines per row, each\n// crossing interval added to the LEDs it spans in exact fractions.\nfunction fill(S) {\n  const { X, Y, xs, xn, cov } = S, n = S.n, SUB = 4, CAP = 48;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = i + 1 \u003c n ? i + 1 : 0;\n    let x0 = X[i], y0 = Y[i], x1 = X[j], y1 = Y[j];\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const ys = (s + 0.5) / SUB, c = xn[s];\n      if (c \u003c CAP) {\n        xs[s * CAP + c] = x0 + ((ys - y0) * (x1 - x0)) / (y1 - y0);\n        xn[s] = c + 1;\n      }\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\n// A line from (ax, ay) to (bx, by), about 1.6 LEDs wide, kept at the brighter\n// of its colour and what is already there.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const { R, G, B } = S, dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, dd = sqrt(qx * qx + qy * qy);\n      const v = cl((wide - dd) / 0.55, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      R[p] = max(R[p], cr * v);\n      G[p] = max(G[p], cg * v);\n      B[p] = max(B[p], cb * v);\n    }\n}\n\nfunction dot(S, x, y, r, cr, cg, cb) {\n  const { R, G, B } = S;\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, floor(y + r + 1)); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, floor(x + r + 1)); xx++) {\n      const dd = sqrt((xx + 0.5 - x) ** 2 + (yy + 0.5 - y) ** 2), v = cl((r + 0.5 - dd) / 0.7, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = yy * W + xx;\n      R[p] = R[p] * (1 - v) + cr * v;\n      G[p] = G[p] * (1 - v) + cg * v;\n      B[p] = B[p] * (1 - v) + cb * v;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col, X, Y, K } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // Fill, convex rim, concave rim. Orange to lime fills are kept bright so\n  // they read as colour and not brown or olive.\n  const h = S.hue + 0.58;\n  hsv(h, 0.88, 0.9, col, 0);\n  hsv(h - 0.03, 0.3, 1, col, 3);\n  hsv(h + 0.55, 0.85, 1, col, 6);\n  const tr = S.trace, fillLv = 255 * (1 - 0.82 * tr);\n  if (S.phase === 2) {\n    // The round point: a white ring that opens and fades.\n    const u = S.pt / FLASH, r = 1 + 9 * sm(u), a = 255 * (1 - u) * (1 - u);\n    for (let i = 0; i \u003c 48; i++) {\n      const t0 = (2 * PI * i) / 48, t1 = (2 * PI * (i + 1)) / 48;\n      line(S, S.fx + r * cos(t0), S.fy + r * sin(t0), S.fx + r * cos(t1), S.fy + r * sin(t1), a, a, a * 0.95, 0.9);\n    }\n    if (u \u003c 0.3) dot(S, S.fx, S.fy, 1.2, 255, 255, 255);\n  } else {\n    const drawing = S.phase === 0, u = drawing ? S.pt / S.dur : 1;\n    const shown = drawing ? floor(n * sm(u / 0.72)) : n, fa = drawing ? sm((u - 0.55) / 0.4) : 1;\n    // Earlier outlines, the chronophotograph that Trace keeps.\n    if (tr > 0.1 && S.phase === 1) {\n      const lv = 255 * 0.75 * sm((tr - 0.1) / 0.5);\n      for (let s = 0; s \u003c S.ns; s++) {\n        const m = S.SM[s], o = s * SNAPN * 2, f = 0.3 + (0.7 * (s + 1)) / S.ns;\n        for (let i = 0; i \u003c m; i++) {\n          const j = (i + 1) % m;\n          line(S, S.SN[o + 2 * i], S.SN[o + 2 * i + 1], S.SN[o + 2 * j], S.SN[o + 2 * j + 1], col[3] * lv * f * 0.75, col[4] * lv * f * 0.75, col[5] * lv * f * 0.75, 0.75);\n        }\n      }\n    }\n    if (fa > 0) {\n      fill(S);\n      for (let p = 0; p \u003c W * H; p++) {\n        const c = min(1, cov[p]) * fa * fillLv;\n        if (c \u003c= 0) continue;\n        R[p] += col[0] * c;\n        G[p] += col[1] * c;\n        B[p] += col[2] * c;\n      }\n    }\n    // The rim: pale where the curve bends outward, the second colour where\n    // it bends inward. The inflection points sit where the two meet.\n    for (let i = 0; i \u003c shown; i++) {\n      const j = i + 1 \u003c n ? i + 1 : 0, t = cl((K[i] + K[j]) * 6, -1, 1), a = (1 + t) / 2;\n      const cr = 255 * (col[3] * a + col[6] * (1 - a)), cg = 255 * (col[4] * a + col[7] * (1 - a)), cb = 255 * (col[5] * a + col[8] * (1 - a));\n      line(S, X[i], Y[i], X[j], Y[j], cr, cg, cb, drawing && i > shown - 6 ? 1.2 : 0.9);\n    }\n    // White marks at the inflection points: a dark ring round a white core.\n    for (let q = 0; q \u003c S.ni; q++) {\n      if (S.IQ[q] >= shown) continue;\n      dot(S, S.IX[q], S.IY[q], 1.6, 0, 0, 0);\n      dot(S, S.IX[q], S.IY[q], 0.8, 255, 255, 255);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long."},{"name":"Wind","min":2,"max":3.5,"about":"How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve."},{"name":"Trace","min":0,"max":1,"about":"At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline."}],"start":[0,2,2,0.06],"measures":{"motion":0.2037,"detail":0.0249,"edges":0.5796,"complexity":0.2104,"coverage":0.1942,"colour":0.2439,"drift":0.3752},"knobResponse":[0.229,0.2408,0.2872,0.1241]},{"slug":"cushion-mesh","title":"Cushion Mesh","family":"cosmetic","round":32,"note":"쿠션 팩트의 망사를 몇 밀리미터 앞에서 봐요. 1 LED 마다 검은 실과 장밋빛 구멍이 번갈아 서고, 보이지 않는 퍼프가 0.5초마다 지름 28 LED 쯤의 자국을 찍으면 그 안의 구멍 78% 에 흰 파운데이션 방울이 맺혀요. 방울은 연어색으로 물들었다가 자국 가장자리부터 빨려 들어가고, 판에는 늘 769개가 남아요.","idea":"The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.","buttons":"K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Cushion Mesh\n// Family:  cosmetic\n// Idea:    The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the mesh net of a cushion compact\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1\n//\n// Knob 1: Hue. The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac.\n// Knob 2: Speed. At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s.\n// Knob 3: Press. How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel.\n// Knob 4: Puff. The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width.\n// Buttons: K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, exp, atan2, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The mesh is a one-LED checker: the threads (x + y odd) are black, the\n// holes show the soaked sponge at level 40, and a bead is a hole at 255. So\n// every pair of neighbours is a thread and a hole, 40 apart or 255 apart, and\n// the share of beads alone sets the measured edges: 769 beads give 0.190.\n// Beads only form off the panel's edge, where each has four threads round it.\nconst HOLES = [];\nfor (let y = 1; y \u003c H - 1; y++) for (let x = 2 - (y & 1); x \u003c W - 1; x += 2) HOLES.push(y * W + x);\nconst BEADS = 769;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, press: 0, puff: 0.06, warm: false, flood: 0, extra: 0, clock: 0,\n    dabT: 99, dab: null,\n    thr: new Float32Array(N), life: new Float32Array(N), life0: new Float32Array(N), wet: new Float32Array(N),\n    P: new Float32Array(N), bead: new Uint8Array(N), list: [], c: [0, 0, 0],\n  };\n  const S = params.s;\n  // How readily each hole lets the foundation through.\n  for (const p of HOLES) S.thr[p] = random();\n}\n\nfunction newDab(S) {\n  // The puff goes where the mesh is driest: the best of ten tries, scored by\n  // the beads and wet holes under it.\n  const r = 13 + 14 * S.puff;\n  let bx = 32, by = 64, best = 1e9;\n  for (let k = 0; k \u003c 10; k++) {\n    const x = r * 0.5 + random() * (W - r), y = r * 0.5 + random() * (H - r);\n    let score = 0;\n    for (let v = -r; v \u003c= r; v += 3)\n      for (let u = -r; u \u003c= r; u += 3) {\n        const px = round(x + u), py = round(y + v);\n        if (u * u + v * v > r * r || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n        const q = py * W + px - ((px + py) & 1);\n        score += S.bead[q] + 0.3 * S.wet[q];\n      }\n    if (score \u003c best) (best = score), (bx = x), (by = y);\n  }\n  S.dab = { x: bx, y: by, r, w1: random() * 6.28, w2: random() * 6.28 };\n  S.dabT = 0;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.dabT += ds;\n  if (S.dabT >= 0.5) newDab(S);\n  const t = S.dabT, a = t \u003c 0.12 ? sm(0, 0.12, t) : t \u003c 0.34 ? 1 : 1 - sm(0.34, 0.46, t);\n  const P = S.P;\n  P.fill(0);\n  if (S.dab && a > 0) {\n    // The mark spreads from three quarters of its size as the puff lands,\n    // with a soft rim that wobbles round the edge.\n    const { x: cx, y: cy, r: r0, w1, w2 } = S.dab, r = r0 * (0.75 + 0.25 * a);\n    for (let y = max(1, floor(cy - r - 2)); y \u003c= min(H - 2, cy + r + 2); y++)\n      for (let x = max(1, floor(cx - r - 2)); x \u003c= min(W - 2, cx + r + 2); x++) {\n        const dx = x - cx, dy = y - cy, th = atan2(dy, dx);\n        const e = r * (1 + 0.08 * sin(3 * th + w1) + 0.05 * sin(5 * th + w2));\n        const v = a * (1 - sm(0.7 * e, e, sqrt(dx * dx + dy * dy)));\n        if (v > 0) P[y * W + x] = v;\n      }\n  }\n  if (S.flood > 0) {\n    S.flood = max(0, S.flood - ds);\n    const v = 0.9 * sm(0.5, 0.42, S.flood) * sm(0, 0.08, S.flood);\n    for (const p of HOLES) P[p] = max(P[p], v);\n    if (S.flood === 0) S.extra = 1;\n  } else S.extra = max(0, S.extra - ds / 2.5);\n  const rho = 0.78 * 1.25 ** S.press, L = 4.5 * 1.4 ** S.press, list = S.list;\n  list.length = 0;\n  for (const p of HOLES) {\n    const pv = P[p];\n    if (pv > 0) S.wet[p] = max(S.wet[p], pv);\n    S.wet[p] = max(0, S.wet[p] - ds / 1.5);\n    if (S.bead[p]) {\n      // A bead under the puff is fed; once the puff lifts it waits its turn.\n      if (pv \u003c 0.05) S.life[p] -= ds;\n      if (S.life[p] \u003c= 0) {\n        S.bead[p] = 0;\n        S.wet[p] = 1;\n        continue;\n      }\n      list.push(p);\n    } else if (pv * rho > S.thr[p]) {\n      let q = 1;\n      if (S.dab) {\n        const dx = (p % W) - S.dab.x, dy = floor(p / W) - S.dab.y;\n        q = cl(sqrt(dx * dx + dy * dy) / S.dab.r, 0, 1);\n      }\n      S.bead[p] = 1;\n      S.life[p] = S.life0[p] = L * (0.35 + 0.65 * (1 - q) + 0.25 * random());\n      list.push(p);\n    }\n  }\n  // The mesh holds only so much liquid at the surface. Past that, the beads\n  // nearest their time go back in first, so a mark drains from its rim.\n  const flood = S.flood > 0 ? sm(0.5, 0.42, S.flood) : S.extra;\n  const target = round(BEADS * 2.2 ** S.press * (1 + 2.6 * flood));\n  if (list.length > target) {\n    list.sort((u, v) => S.life[u] - S.life[v]);\n    for (let i = 0; i \u003c list.length - target; i++) {\n      S.bead[list[i]] = 0;\n      S.wet[list[i]] = 1;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.press = cl(k[2], -1, 1);\n  S.puff = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a compact that has been dabbed for three seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.flood === 0) S.flood = 0.5;\n  S.clock += d * S.speed;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, h = S.hue + 0.03;\n  // A band of light slides down across the mesh every 7 s at Speed 2 and\n  // turns the beads in it white; it changes colour only, never level.\n  const u0 = -24 + 196 * ((S.clock / 14) % 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if ((x + y) & 1) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const p = y * W + x, du = (x * 0.8 + y * 0.6 - u0) / 7, g = exp(-du * du);\n      if (S.bead[p]) {\n        const age = cl(1 - S.life[p] / S.life0[p], 0, 1);\n        hsv(h, (0.16 + 0.48 * age) * (1 - 0.85 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n      } else {\n        const w = S.wet[p];\n        hsv(h - 0.02 * w, (0.45 + 0.45 * w) * (1 - 0.6 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 40), round(c[1] * 40), round(c[2] * 40));\n      }\n    }\n}\n","layer":{"id":"layer-cushion-mesh","type":"code","name":"cushion-mesh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cushion Mesh\n// Family:  cosmetic\n// Idea:    The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the mesh net of a cushion compact\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1\n//\n// Knob 1: Hue. The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac.\n// Knob 2: Speed. At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s.\n// Knob 3: Press. How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel.\n// Knob 4: Puff. The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width.\n// Buttons: K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, exp, atan2, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The mesh is a one-LED checker: the threads (x + y odd) are black, the\n// holes show the soaked sponge at level 40, and a bead is a hole at 255. So\n// every pair of neighbours is a thread and a hole, 40 apart or 255 apart, and\n// the share of beads alone sets the measured edges: 769 beads give 0.190.\n// Beads only form off the panel's edge, where each has four threads round it.\nconst HOLES = [];\nfor (let y = 1; y \u003c H - 1; y++) for (let x = 2 - (y & 1); x \u003c W - 1; x += 2) HOLES.push(y * W + x);\nconst BEADS = 769;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, press: 0, puff: 0.06, warm: false, flood: 0, extra: 0, clock: 0,\n    dabT: 99, dab: null,\n    thr: new Float32Array(N), life: new Float32Array(N), life0: new Float32Array(N), wet: new Float32Array(N),\n    P: new Float32Array(N), bead: new Uint8Array(N), list: [], c: [0, 0, 0],\n  };\n  const S = params.s;\n  // How readily each hole lets the foundation through.\n  for (const p of HOLES) S.thr[p] = random();\n}\n\nfunction newDab(S) {\n  // The puff goes where the mesh is driest: the best of ten tries, scored by\n  // the beads and wet holes under it.\n  const r = 13 + 14 * S.puff;\n  let bx = 32, by = 64, best = 1e9;\n  for (let k = 0; k \u003c 10; k++) {\n    const x = r * 0.5 + random() * (W - r), y = r * 0.5 + random() * (H - r);\n    let score = 0;\n    for (let v = -r; v \u003c= r; v += 3)\n      for (let u = -r; u \u003c= r; u += 3) {\n        const px = round(x + u), py = round(y + v);\n        if (u * u + v * v > r * r || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n        const q = py * W + px - ((px + py) & 1);\n        score += S.bead[q] + 0.3 * S.wet[q];\n      }\n    if (score \u003c best) (best = score), (bx = x), (by = y);\n  }\n  S.dab = { x: bx, y: by, r, w1: random() * 6.28, w2: random() * 6.28 };\n  S.dabT = 0;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.dabT += ds;\n  if (S.dabT >= 0.5) newDab(S);\n  const t = S.dabT, a = t \u003c 0.12 ? sm(0, 0.12, t) : t \u003c 0.34 ? 1 : 1 - sm(0.34, 0.46, t);\n  const P = S.P;\n  P.fill(0);\n  if (S.dab && a > 0) {\n    // The mark spreads from three quarters of its size as the puff lands,\n    // with a soft rim that wobbles round the edge.\n    const { x: cx, y: cy, r: r0, w1, w2 } = S.dab, r = r0 * (0.75 + 0.25 * a);\n    for (let y = max(1, floor(cy - r - 2)); y \u003c= min(H - 2, cy + r + 2); y++)\n      for (let x = max(1, floor(cx - r - 2)); x \u003c= min(W - 2, cx + r + 2); x++) {\n        const dx = x - cx, dy = y - cy, th = atan2(dy, dx);\n        const e = r * (1 + 0.08 * sin(3 * th + w1) + 0.05 * sin(5 * th + w2));\n        const v = a * (1 - sm(0.7 * e, e, sqrt(dx * dx + dy * dy)));\n        if (v > 0) P[y * W + x] = v;\n      }\n  }\n  if (S.flood > 0) {\n    S.flood = max(0, S.flood - ds);\n    const v = 0.9 * sm(0.5, 0.42, S.flood) * sm(0, 0.08, S.flood);\n    for (const p of HOLES) P[p] = max(P[p], v);\n    if (S.flood === 0) S.extra = 1;\n  } else S.extra = max(0, S.extra - ds / 2.5);\n  const rho = 0.78 * 1.25 ** S.press, L = 4.5 * 1.4 ** S.press, list = S.list;\n  list.length = 0;\n  for (const p of HOLES) {\n    const pv = P[p];\n    if (pv > 0) S.wet[p] = max(S.wet[p], pv);\n    S.wet[p] = max(0, S.wet[p] - ds / 1.5);\n    if (S.bead[p]) {\n      // A bead under the puff is fed; once the puff lifts it waits its turn.\n      if (pv \u003c 0.05) S.life[p] -= ds;\n      if (S.life[p] \u003c= 0) {\n        S.bead[p] = 0;\n        S.wet[p] = 1;\n        continue;\n      }\n      list.push(p);\n    } else if (pv * rho > S.thr[p]) {\n      let q = 1;\n      if (S.dab) {\n        const dx = (p % W) - S.dab.x, dy = floor(p / W) - S.dab.y;\n        q = cl(sqrt(dx * dx + dy * dy) / S.dab.r, 0, 1);\n      }\n      S.bead[p] = 1;\n      S.life[p] = S.life0[p] = L * (0.35 + 0.65 * (1 - q) + 0.25 * random());\n      list.push(p);\n    }\n  }\n  // The mesh holds only so much liquid at the surface. Past that, the beads\n  // nearest their time go back in first, so a mark drains from its rim.\n  const flood = S.flood > 0 ? sm(0.5, 0.42, S.flood) : S.extra;\n  const target = round(BEADS * 2.2 ** S.press * (1 + 2.6 * flood));\n  if (list.length > target) {\n    list.sort((u, v) => S.life[u] - S.life[v]);\n    for (let i = 0; i \u003c list.length - target; i++) {\n      S.bead[list[i]] = 0;\n      S.wet[list[i]] = 1;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.press = cl(k[2], -1, 1);\n  S.puff = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a compact that has been dabbed for three seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.flood === 0) S.flood = 0.5;\n  S.clock += d * S.speed;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, h = S.hue + 0.03;\n  // A band of light slides down across the mesh every 7 s at Speed 2 and\n  // turns the beads in it white; it changes colour only, never level.\n  const u0 = -24 + 196 * ((S.clock / 14) % 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if ((x + y) & 1) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const p = y * W + x, du = (x * 0.8 + y * 0.6 - u0) / 7, g = exp(-du * du);\n      if (S.bead[p]) {\n        const age = cl(1 - S.life[p] / S.life0[p], 0, 1);\n        hsv(h, (0.16 + 0.48 * age) * (1 - 0.85 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n      } else {\n        const w = S.wet[p];\n        hsv(h - 0.02 * w, (0.45 + 0.45 * w) * (1 - 0.6 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 40), round(c[1] * 40), round(c[2] * 40));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s."},{"name":"Press","min":-1,"max":1,"about":"How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel."},{"name":"Puff","min":0,"max":1,"about":"The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width."}],"start":[0,2,0,0.06],"measures":{"motion":0.0612,"detail":0.3133,"edges":0.19,"complexity":0.3734,"coverage":0.5,"colour":0.1055,"drift":0.1322},"knobResponse":[0.0477,0.1254,0.1656,0.1397]},{"slug":"cyanotype","title":"Cyanotype","family":"print","round":19,"note":"철염을 바른 종이에 고사리와 깃털, 민들레 씨앗, 레이스를 놓고 햇빛에 구운 뒤 물로 씻어 내리면 프러시안 블루 인화가 드러나요. 마르며 짙어진 인화가 옆으로 밀려 나가면 다음 장이 깔려요.","idea":"A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","layer":{"id":"layer-cyanotype","type":"code","name":"cyanotype","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tone","min":0,"max":1,"about":"The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes."},{"name":"Specimen","min":0,"max":4,"about":"What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order."},{"name":"Exposure","min":-1,"max":1,"about":"How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through."}],"start":[0,2,0,0.06],"measures":{"motion":0.2407,"detail":0.0234,"edges":0.2171,"complexity":1.3748,"coverage":1,"colour":0.239,"drift":0.1842},"knobResponse":[0.1554,0.128,0.0957,0.1334]},{"slug":"dandelin-spheres","title":"Dandelin Spheres","family":"geometry","round":33,"note":"유리 원뿔을 평면이 자른 원뿔곡선 위아래로 당들랭 구 둘이 원뿔에 끼어 평면에 닿아 있어요. 곡선을 도는 점에서 두 초점까지의 거리와 원뿔 모선 위 두 토막이 금색과 분홍으로 짝지어 같은 길이로 보여요. K3 은 평면 기울기로 30도의 타원에서 74도의 포물선을 지나 쌍곡선까지 가고, K1 을 누르면 평면이 11초 동안 똑바로 섰다가 돌아와요.","idea":"A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.","buttons":"K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Dandelin Spheres\n// Family:  geometry\n// Idea:    A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dandelin spheres (Germinal Pierre Dandelin, 1822), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34\n//\n// Knob 1: Hue. Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink.\n// Knob 2: Speed. At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50.\n// Knob 4: Cone. The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34.\n// Buttons: K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, tan, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst RAD = PI / 180;\n\n// World units: the apex at the origin, y up the axis. The plane turns about\n// the horizontal line through (XP, YP) along z, so at 90 degrees it stands\n// 0.3 off the axis and still cuts a hyperbola instead of two crossing lines.\nconst XP = -0.3, YP = 0.95;\n// The cone is cut off at these heights.\nconst YTOP = 2.25, YBOT = -2.4;\n// The plane is drawn where |x| and |z| are under this.\nconst PX = 1.05;\n// Camera: this far from the point it looks at, this many degrees above it.\nconst DIST = 9, ELEV = 28 * RAD;\n// Five lines of the cone, round its axis.\nconst GEN = 5;\n// The opening hue sits here on the wheel: teal.\nconst H0 = 0.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n// How far a hue sits in the orange and yellow that turn brown when shaded.\nconst warm = (h) => {\n  h -= floor(h);\n  return max(0, 1 - abs(h - 0.11) / 0.1);\n};\n\nexport function setup(params) {\n  params.s = {\n    th: 0.6, ph: 0, sw: -1, hue: 0, tilt: 30, cone: 16, speed: 2, lo: -0.25,\n    base: new Float32Array(N * 3), lin: new Float32Array(N * 3),\n    zO: new Float32Array(N), zC: new Float32Array(N), zP: new Float32Array(N),\n    col: new Float32Array(8 * 3), colHue: NaN, sc: {},\n  };\n}\n\n// The scene for a tilt and half-angle in radians: the plane n.p = h with\n// n = (-sin b, cos b, 0), and the two spheres on the axis at heights s with\n// radius |s| sin a. A sphere at s is tangent to the cone, and tangent to the\n// plane when |cos b s - h| = |s| sin a, so s = h / (cos b + sin a), the one\n// between the apex and the plane, and s = h / (cos b - sin a), past the plane\n// while cos b > sin a (an ellipse), at infinity when they are equal (a\n// parabola), and below the apex in the other nappe once sin a is the larger\n// (a hyperbola).\nfunction scene(S, b, a) {\n  const sa = sin(a), ca = cos(a), sb = sin(b), cb = cos(b), h = cb * YP - sb * XP;\n  const sc = S.sc;\n  sc.sa = sa;\n  sc.ca = ca;\n  sc.k = sa / ca;\n  sc.nx = -sb;\n  sc.ny = cb;\n  sc.h = h;\n  sc.s1 = h / (cb + sa);\n  const den = cb - sa;\n  sc.s2 = abs(den) > 1e-4 ? h / den : 1e9;\n  sc.r1 = abs(sc.s1) * sa;\n  sc.r2 = abs(sc.s2) * sa;\n  // A focus is the foot of the perpendicular from a sphere's centre to the\n  // plane; a contact circle is where the sphere meets the cone, at height\n  // s cos^2 a. Along a line of the cone it sits s cos a from the apex.\n  for (const [s, k] of [[sc.s1, 1], [sc.s2, 2]]) {\n    const d = cb * s - h;\n    sc[\"fx\" + k] = -d * sc.nx;\n    sc[\"fy\" + k] = s - d * sc.ny;\n    sc[\"g\" + k] = s * ca;\n  }\n  sc.e = sb / ca;\n}\n\n// The conic as a curve over the cone's azimuth phi: the line of the cone at\n// phi, t (sin a cos phi, cos a, sin a sin phi), meets the plane at\n// t = h / (cos b cos a - sin b sin a cos phi). On a hyperbola t changes sign\n// where that denominator does, and the point crosses to the other nappe.\nfunction conicT(sc, phi) {\n  const den = sc.ny * sc.ca + sc.nx * sc.sa * cos(phi);\n  return abs(den) \u003c 1e-6 ? 1e9 : sc.h / den;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[2], 30, 90);\n  S.cone = cl(k[3], 16, 34);\n  const sp = S.speed / 2;\n  if (input.btnPressed && input.btnPressed[0]) S.sw = 0;\n  let tilt = S.tilt;\n  if (S.sw >= 0) {\n    // Up to upright in 4.5 s, a 2 s rest, and back in 4.5 s, at Speed 2.\n    S.sw += (d * sp) / 11;\n    const u = S.sw, up = u \u003c 0.41 ? sm(u / 0.41) : u \u003c 0.59 ? 1 : 1 - sm((u - 0.59) / 0.41);\n    tilt += (90 - tilt) * up;\n    if (S.sw >= 1) S.sw = -1;\n  }\n  scene(S, tilt * RAD, S.cone * RAD);\n  const sc = S.sc;\n  // The view: level with the ellipse case's spheres while the cut is an\n  // ellipse, widening downwards to take in the other nappe as the eccentricity\n  // passes 0.8 on its way to the hyperbola.\n  const lo = -0.25 - 1.95 * sm((sc.e - 0.8) / 0.3);\n  S.lo += (lo - S.lo) * min(1, d * 3);\n  // The turn hurries past the azimuths where the camera sees the plane edge\n  // on and the conic flattens to a line, and lingers where it lies open.\n  const edgeOn = abs(sc.nx * cos(ELEV) * sin(S.th) + sc.ny * sin(ELEV));\n  S.th += d * sp * ((2 * PI) / 36) * (0.6 + 1.8 * exp(-((edgeOn / 0.18) ** 2)));\n  // The point moves at about 0.55 units a second along the conic. Off the\n  // drawn part of a hyperbola or parabola it skips ahead to where it comes\n  // back in.\n  let left = d * sp * 0.55, guard = 0;\n  while (left > 0 && guard++ \u003c 40) {\n    const t0 = conicT(sc, S.ph), t1 = conicT(sc, S.ph + 0.01);\n    const y0 = t0 * sc.ca;\n    if (y0 > YTOP || y0 \u003c YBOT + 0.1) {\n      S.ph += 0.05;\n      continue;\n    }\n    const x0 = t0 * sc.sa * cos(S.ph), z0 = t0 * sc.sa * sin(S.ph);\n    const x1 = t1 * sc.sa * cos(S.ph + 0.01), z1 = t1 * sc.sa * sin(S.ph + 0.01), y1 = t1 * sc.ca;\n    const ds = Math.hypot(x1 - x0, y1 - y0, z1 - z0) / 0.01;\n    const step = min(left / max(ds, 1e-3), 0.3);\n    S.ph += step;\n    left -= step * ds;\n  }\n  S.ph %= 2 * PI;\n}\n\n// Colours: lower sphere, upper sphere, cone, plane, conic, the two\n// segment colours, white.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0;\n  // The cone and the plane are seen faint, where a warm hue reads olive, so\n  // they lose more of their colour there than the bright parts do.\n  const set = (i, hh, s, v) => {\n    const w = warm(hh);\n    hsv(hh, s * (1 - (i === 2 || i === 3 ? 0.7 : 0.35) * w), v, c, i * 3);\n  };\n  set(0, h, 0.72, 1);\n  set(1, h + 0.2, 0.62, 1);\n  set(2, h + 0.1, 0.55, 1);\n  set(3, h + 0.04, 0.5, 1);\n  set(4, h + 0.62, 0.14, 1);\n  set(5, h + 0.62, 0.6, 1);\n  set(6, h + 0.42, 0.55, 1);\n  set(7, 0, 0, 1);\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.sc.h === undefined) return;\n  if (S.colHue !== S.hue) palette(S);\n  const sc = S.sc, col = S.col, base = S.base, lin = S.lin, zO = S.zO, zC = S.zC, zP = S.zP;\n  const hi = YTOP, lo = S.lo, ty = (hi + lo) / 2;\n  // A wider cone pulls the camera back, by the square root of how much\n  // wider it is than the 16 degree one, so a wide ellipse still fits.\n  const f = (128 * DIST) / ((hi - lo) * cos(ELEV) * sqrt(sc.k / tan(16 * RAD)));\n  // Camera basis. fwd looks at (0, ty, 0) from DIST away, ELEV above.\n  const ce = cos(ELEV), se = sin(ELEV), st = sin(S.th), ct = cos(S.th);\n  const ox = DIST * ce * st, oy = ty + DIST * se, oz = DIST * ce * ct;\n  const fx = -ce * st, fy = -se, fz = -ce * ct;\n  const rx = ct, rz = -st; // right = fwd x up, level\n  const ux = -fy * rz, uy = rz * fx - rx * fz, uz = fy * rx;\n  // The light hangs above and to the left of the camera.\n  let lx = -0.55 * rx + 0.75 * ux - 0.5 * fx, ly = 0.75 * uy - 0.5 * fy, lz = -0.55 * rz + 0.75 * uz - 0.5 * fz;\n  const ll = Math.hypot(lx, ly, lz);\n  lx /= ll;\n  ly /= ll;\n  lz /= ll;\n  const k2 = sc.k * sc.k, nx = sc.nx, ny = sc.ny, h = sc.h;\n  // Each sphere: height, radius, palette slot, and how warm its hue is.\n  const sph = [\n    [sc.s1, sc.r1, 0, warm(S.hue + H0)],\n    [sc.s2, sc.r2, 3, warm(S.hue + H0 + 0.2)],\n  ];\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const v = (63.5 - py) / f, bg = 0.025 + 0.02 * (py / H);\n    for (let px = 0; px \u003c W; px++, p++) {\n      const u = (px - 31.5) / f;\n      const dx = fx + u * rx + v * ux, dy = fy + v * uy, dz = fz + u * rz + v * uz;\n      const dd = dx * dx + dy * dy + dz * dz, il = 1 / sqrt(dd);\n      let r = bg * 0.6, g = bg * 0.75, b = bg * 1.5, tO = 1e9;\n      // The spheres, opaque and lit. They are drawn whole even where they\n      // rise past the cut cone, a ball sitting in a cup.\n      for (let q = 0; q \u003c 2; q++) {\n        const s = sph[q][0], rad = sph[q][1];\n        if (rad \u003c= 0 || abs(s) > 60) continue;\n        const ocy = oy - s, bb = ox * dx + ocy * dy + oz * dz, cc = ox * ox + ocy * ocy + oz * oz - rad * rad, disc = bb * bb - dd * cc;\n        if (disc \u003c= 0) continue;\n        const t = (-bb - sqrt(disc)) / dd;\n        if (t \u003c= 0 || t >= tO) continue;\n        tO = t;\n        const o = sph[q][2];\n        const hx = (ox + t * dx) / rad, hy = (oy + t * dy - s) / rad, hz = (oz + t * dz) / rad;\n        const di = max(0, hx * lx + hy * ly + hz * lz);\n        // Blinn highlight on the half vector between the light and the eye.\n        const vx = lx - dx * il, vy = ly - dy * il, vz = lz - dz * il;\n        const vl = Math.hypot(vx, vy, vz);\n        const hs = max(0, (hx * vx + hy * vy + hz * vz) / vl), spec = hs ** 28 * 0.75;\n        const rim = -(hx * dx + hy * dy + hz * dz) * il;\n        // Orange and yellow go brown in shade, so a warm sphere gets more\n        // fill light and stays gold.\n        const wq = sph[q][3], lit = 0.12 + 0.3 * wq + (0.8 - 0.2 * wq) * di * (0.55 + 0.45 * rim);\n        r = col[o] * lit + spec;\n        g = col[o + 1] * lit + spec;\n        b = col[o + 2] * lit + spec;\n      }\n      zO[p] = tO;\n      // The cone: x^2 + z^2 = k^2 y^2, both nappes. Glass, so each crossing\n      // adds a little light, more where the surface is seen edge on.\n      const A = dx * dx + dz * dz - k2 * dy * dy, B = 2 * (ox * dx + oz * dz - k2 * oy * dy), C = ox * ox + oz * oz - k2 * oy * oy;\n      let tc1 = 1e9, tc2 = 1e9;\n      const disc = B * B - 4 * A * C;\n      if (disc > 0 && abs(A) > 1e-9) {\n        const sq = sqrt(disc);\n        let ta = (-B - sq) / (2 * A), tb = (-B + sq) / (2 * A);\n        if (ta > tb) [ta, tb] = [tb, ta];\n        for (const t of [ta, tb]) {\n          const y = oy + t * dy;\n          if (t > 0 && y \u003c YTOP && y > YBOT) {\n            if (tc1 > 1e8) tc1 = t;\n            else tc2 = t;\n          }\n        }\n      }\n      zC[p] = tc1;\n      // The plane, clipped to a square in x and z and to the cone's height.\n      // It is brighter inside the cone, where it is the conic's own disc, and\n      // lit along its edges.\n      let tp = 1e9, pin = false, pm = 0;\n      const nd = nx * dx + ny * dy;\n      if (abs(nd) > 1e-6) {\n        const t = (h - nx * ox - ny * oy) / nd;\n        if (t > 0 && t \u003c tO) {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz;\n          const m = min(PX - abs(x), PX - abs(z), y - YBOT, YTOP - y);\n          if (m > 0) {\n            tp = t;\n            pin = x * x + z * z \u003c k2 * y * y;\n            pm = (m * f) / t;\n          }\n        }\n      }\n      zP[p] = tp;\n      // The glass layers in front of the opaque hit, far to near: the far\n      // wall of the cone, then the near wall, with the plane wherever it falls.\n      const pa = pin ? 0.2 : 0.12, pe = (pin ? 0.3 : 0.08) + 0.5 * exp(-pm * pm * 0.8);\n      const pos = tp > tc2 ? 0 : tp > tc1 ? 1 : 2;\n      for (let L = 0; L \u003c 3; L++) {\n        const isP = L === pos, t = isP ? tp : (L \u003c pos ? L : L - 1) === 0 ? tc2 : tc1;\n        if (t >= tO || t > 1e8) continue;\n        let a, e, o;\n        if (isP) {\n          a = pa;\n          e = pe;\n          o = 9;\n        } else {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz, gy = -k2 * y, gl = Math.hypot(x, gy, z) || 1;\n          const ci = abs((x * dx + gy * dy + z * dz) / gl) * il, fr = (1 - ci) * (1 - ci);\n          a = 0.06 + 0.2 * fr;\n          e = 0.07 + 0.42 * fr;\n          o = 6;\n        }\n        r = r * (1 - a) + col[o] * e;\n        g = g * (1 - a) + col[o + 1] * e;\n        b = b * (1 - a) + col[o + 2] * e;\n      }\n      base[p * 3] = r;\n      base[p * 3 + 1] = g;\n      base[p * 3 + 2] = b;\n    }\n  }\n\n  // Lines and points, splatted over the shading. Behind a sphere they show\n  // through dimmed, behind the cone's near wall or the plane a little dimmer.\n  lin.fill(0);\n  const ssa = sc.sa, sca = sc.ca;\n  let cr = 0, cg = 0, cb = 0, cw = 0;\n  // A thick line is laid as two strands half an LED either side of its\n  // path on the screen, (tox, toy) apart.\n  let thick = false, tox = 0, toy = 0;\n  const put = (sx, sy, k) => {\n    const ix = floor(sx), iy = floor(sy), ax = sx - ix, ay = sy - iy;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = ix + (j & 1), Y = iy + (j >> 1);\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const wt = k * (j & 1 ? ax : 1 - ax) * (j >> 1 ? ay : 1 - ay), o = (Y * W + X) * 3;\n      lin[o] += cr * wt;\n      lin[o + 1] += cg * wt;\n      lin[o + 2] += cb * wt;\n    }\n  };\n  const splat = (x, y, z, w) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = qx * fx + qy * fy + qz * fz;\n    if (zz \u003c 0.1) return;\n    const sx = 31.5 + (f * (qx * rx + qz * rz)) / zz, sy = 63.5 - (f * (qx * ux + qy * uy + qz * uz)) / zz;\n    if (sx \u003c -2 || sx > W + 1 || sy \u003c -2 || sy > H + 1) return;\n    const ni = cl(Math.round(sy), 0, H - 1) * W + cl(Math.round(sx), 0, W - 1);\n    let k = w;\n    if (zz > zO[ni] + 0.04) k *= 0.38;\n    if (zz > zC[ni] + 0.04) k *= 0.62;\n    if (zz > zP[ni] + 0.03) k *= 0.75;\n    if (!thick) put(sx, sy, k);\n    else {\n      put(sx + tox, sy + toy, k * 0.62);\n      put(sx - tox, sy - toy, k * 0.62);\n    }\n  };\n  const proj = (x, y, z) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = max(0.1, qx * fx + qy * fy + qz * fz);\n    return [(f * (qx * rx + qz * rz)) / zz, (f * (qx * ux + qy * uy + qz * uz)) / zz];\n  };\n  const seg = (ax, ay, az, bx, by, bz) => {\n    const [sx0, sy0] = proj(ax, ay, az), [sx1, sy1] = proj(bx, by, bz);\n    const L = Math.hypot(sx1 - sx0, sy1 - sy0), n = max(1, Math.ceil(L / 0.6)), w = (L / n) * cw;\n    tox = L > 0 ? (-(sy1 - sy0) / L) * 0.55 : 0;\n    toy = L > 0 ? ((sx1 - sx0) / L) * 0.55 : 0;\n    for (let i = 0; i \u003c= n; i++) {\n      const t = i / n;\n      splat(ax + (bx - ax) * t, ay + (by - ay) * t, az + (bz - az) * t, i === 0 || i === n ? w / 2 : w);\n    }\n  };\n  const use = (o, w) => {\n    cr = col[o * 3];\n    cg = col[o * 3 + 1];\n    cb = col[o * 3 + 2];\n    cw = w;\n  };\n  // A point on the line of the cone at azimuth phi, t along it.\n  const gp = (phi, t) => [t * ssa * cos(phi), t * sca, t * ssa * sin(phi)];\n  // The cone's lines through the apex and its two rims.\n  use(2, 0.3);\n  const tTop = YTOP / sca, tBot = YBOT / sca;\n  for (let i = 0; i \u003c GEN; i++) {\n    const phi = (i * 2 * PI) / GEN + 0.3;\n    seg(...gp(phi, tTop), 0, 0, 0);\n    seg(0, 0, 0, ...gp(phi, tBot));\n  }\n  const ring = (y, rad, n) => {\n    let px = rad, pz = 0;\n    for (let i = 1; i \u003c= n; i++) {\n      const a = (i * 2 * PI) / n, qx = rad * cos(a), qz = rad * sin(a);\n      seg(px, y, pz, qx, y, qz);\n      px = qx;\n      pz = qz;\n    }\n  };\n  use(2, 0.5);\n  ring(YTOP, YTOP * sc.k, 72);\n  ring(YBOT, -YBOT * sc.k, 72);\n  // The contact circles, in each sphere's colour, brighter.\n  const okS = (s, r) => r > 0 && abs(s) \u003c 60;\n  use(0, 0.95);\n  if (okS(sc.s1, sc.r1)) ring(sc.g1 * sca, abs(sc.g1 * ssa), 64);\n  use(1, 0.95);\n  if (okS(sc.s2, sc.r2) && sc.g2 * sca \u003c YTOP && sc.g2 * sca > YBOT) ring(sc.g2 * sca, abs(sc.g2 * ssa), 64);\n  // The conic, drawn in pieces wherever it lies inside the cut cone.\n  use(4, 1.35);\n  const NPH = 240;\n  let prev = null;\n  for (let i = 0; i \u003c= NPH; i++) {\n    const phi = (i * 2 * PI) / NPH, t = conicT(sc, phi), y = t * sca;\n    const okp = y \u003c YTOP && y > YBOT;\n    const cur = okp ? gp(phi, t) : null;\n    if (cur && prev && abs(cur[1] - prev[1]) \u003c 1.2) seg(...prev, ...cur);\n    prev = cur;\n  }\n  // The point, its two distances to the foci and the line of the cone\n  // through it, cut where it meets the two contact circles. Each pair in one\n  // colour: PF1 equals the stretch to circle 1, PF2 the stretch to circle 2.\n  const tP = conicT(sc, S.ph), yP = tP * sca;\n  if (yP \u003c YTOP && yP > YBOT) {\n    const [Px, Py, Pz] = gp(S.ph, tP);\n    const clipT = (t) => cl(t, tBot, tTop);\n    thick = true;\n    use(5, 1.5);\n    if (okS(sc.s1, sc.r1)) {\n      seg(Px, Py, Pz, sc.fx1, sc.fy1, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g1)));\n    }\n    use(6, 1.5);\n    if (okS(sc.s2, sc.r2)) {\n      seg(Px, Py, Pz, sc.fx2, sc.fy2, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g2)));\n    } else seg(Px, Py, Pz, ...gp(S.ph, sc.g2 > 0 ? tTop : tBot));\n    thick = false;\n    use(7, 2.2);\n    for (const [ddx, ddy] of [[0, 0], [0.012, 0], [-0.012, 0], [0, 0.012], [0, -0.012]]) splat(Px + ddx, Py + ddy, Pz, 1);\n  }\n  // The foci, white points where the spheres touch the plane.\n  use(7, 1.6);\n  for (const [s, r, fxx, fyy] of [[sc.s1, sc.r1, sc.fx1, sc.fy1], [sc.s2, sc.r2, sc.fx2, sc.fy2]]) {\n    if (!okS(s, r) || fyy > YTOP || fyy \u003c YBOT) continue;\n    for (const [ddx, ddy] of [[0, 0], [0.014, 0], [-0.014, 0], [0, 0.014], [0, -0.014]]) splat(fxx + ddx, fyy + ddy, 0, 1);\n  }\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3;\n      display.setPixel(x, y, cl((base[o] + lin[o]) * 255, 0, 255), cl((base[o + 1] + lin[o + 1]) * 255, 0, 255), cl((base[o + 2] + lin[o + 2]) * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-dandelin-spheres","type":"code","name":"dandelin-spheres","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dandelin Spheres\n// Family:  geometry\n// Idea:    A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dandelin spheres (Germinal Pierre Dandelin, 1822), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34\n//\n// Knob 1: Hue. Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink.\n// Knob 2: Speed. At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50.\n// Knob 4: Cone. The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34.\n// Buttons: K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, tan, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst RAD = PI / 180;\n\n// World units: the apex at the origin, y up the axis. The plane turns about\n// the horizontal line through (XP, YP) along z, so at 90 degrees it stands\n// 0.3 off the axis and still cuts a hyperbola instead of two crossing lines.\nconst XP = -0.3, YP = 0.95;\n// The cone is cut off at these heights.\nconst YTOP = 2.25, YBOT = -2.4;\n// The plane is drawn where |x| and |z| are under this.\nconst PX = 1.05;\n// Camera: this far from the point it looks at, this many degrees above it.\nconst DIST = 9, ELEV = 28 * RAD;\n// Five lines of the cone, round its axis.\nconst GEN = 5;\n// The opening hue sits here on the wheel: teal.\nconst H0 = 0.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n// How far a hue sits in the orange and yellow that turn brown when shaded.\nconst warm = (h) => {\n  h -= floor(h);\n  return max(0, 1 - abs(h - 0.11) / 0.1);\n};\n\nexport function setup(params) {\n  params.s = {\n    th: 0.6, ph: 0, sw: -1, hue: 0, tilt: 30, cone: 16, speed: 2, lo: -0.25,\n    base: new Float32Array(N * 3), lin: new Float32Array(N * 3),\n    zO: new Float32Array(N), zC: new Float32Array(N), zP: new Float32Array(N),\n    col: new Float32Array(8 * 3), colHue: NaN, sc: {},\n  };\n}\n\n// The scene for a tilt and half-angle in radians: the plane n.p = h with\n// n = (-sin b, cos b, 0), and the two spheres on the axis at heights s with\n// radius |s| sin a. A sphere at s is tangent to the cone, and tangent to the\n// plane when |cos b s - h| = |s| sin a, so s = h / (cos b + sin a), the one\n// between the apex and the plane, and s = h / (cos b - sin a), past the plane\n// while cos b > sin a (an ellipse), at infinity when they are equal (a\n// parabola), and below the apex in the other nappe once sin a is the larger\n// (a hyperbola).\nfunction scene(S, b, a) {\n  const sa = sin(a), ca = cos(a), sb = sin(b), cb = cos(b), h = cb * YP - sb * XP;\n  const sc = S.sc;\n  sc.sa = sa;\n  sc.ca = ca;\n  sc.k = sa / ca;\n  sc.nx = -sb;\n  sc.ny = cb;\n  sc.h = h;\n  sc.s1 = h / (cb + sa);\n  const den = cb - sa;\n  sc.s2 = abs(den) > 1e-4 ? h / den : 1e9;\n  sc.r1 = abs(sc.s1) * sa;\n  sc.r2 = abs(sc.s2) * sa;\n  // A focus is the foot of the perpendicular from a sphere's centre to the\n  // plane; a contact circle is where the sphere meets the cone, at height\n  // s cos^2 a. Along a line of the cone it sits s cos a from the apex.\n  for (const [s, k] of [[sc.s1, 1], [sc.s2, 2]]) {\n    const d = cb * s - h;\n    sc[\"fx\" + k] = -d * sc.nx;\n    sc[\"fy\" + k] = s - d * sc.ny;\n    sc[\"g\" + k] = s * ca;\n  }\n  sc.e = sb / ca;\n}\n\n// The conic as a curve over the cone's azimuth phi: the line of the cone at\n// phi, t (sin a cos phi, cos a, sin a sin phi), meets the plane at\n// t = h / (cos b cos a - sin b sin a cos phi). On a hyperbola t changes sign\n// where that denominator does, and the point crosses to the other nappe.\nfunction conicT(sc, phi) {\n  const den = sc.ny * sc.ca + sc.nx * sc.sa * cos(phi);\n  return abs(den) \u003c 1e-6 ? 1e9 : sc.h / den;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[2], 30, 90);\n  S.cone = cl(k[3], 16, 34);\n  const sp = S.speed / 2;\n  if (input.btnPressed && input.btnPressed[0]) S.sw = 0;\n  let tilt = S.tilt;\n  if (S.sw >= 0) {\n    // Up to upright in 4.5 s, a 2 s rest, and back in 4.5 s, at Speed 2.\n    S.sw += (d * sp) / 11;\n    const u = S.sw, up = u \u003c 0.41 ? sm(u / 0.41) : u \u003c 0.59 ? 1 : 1 - sm((u - 0.59) / 0.41);\n    tilt += (90 - tilt) * up;\n    if (S.sw >= 1) S.sw = -1;\n  }\n  scene(S, tilt * RAD, S.cone * RAD);\n  const sc = S.sc;\n  // The view: level with the ellipse case's spheres while the cut is an\n  // ellipse, widening downwards to take in the other nappe as the eccentricity\n  // passes 0.8 on its way to the hyperbola.\n  const lo = -0.25 - 1.95 * sm((sc.e - 0.8) / 0.3);\n  S.lo += (lo - S.lo) * min(1, d * 3);\n  // The turn hurries past the azimuths where the camera sees the plane edge\n  // on and the conic flattens to a line, and lingers where it lies open.\n  const edgeOn = abs(sc.nx * cos(ELEV) * sin(S.th) + sc.ny * sin(ELEV));\n  S.th += d * sp * ((2 * PI) / 36) * (0.6 + 1.8 * exp(-((edgeOn / 0.18) ** 2)));\n  // The point moves at about 0.55 units a second along the conic. Off the\n  // drawn part of a hyperbola or parabola it skips ahead to where it comes\n  // back in.\n  let left = d * sp * 0.55, guard = 0;\n  while (left > 0 && guard++ \u003c 40) {\n    const t0 = conicT(sc, S.ph), t1 = conicT(sc, S.ph + 0.01);\n    const y0 = t0 * sc.ca;\n    if (y0 > YTOP || y0 \u003c YBOT + 0.1) {\n      S.ph += 0.05;\n      continue;\n    }\n    const x0 = t0 * sc.sa * cos(S.ph), z0 = t0 * sc.sa * sin(S.ph);\n    const x1 = t1 * sc.sa * cos(S.ph + 0.01), z1 = t1 * sc.sa * sin(S.ph + 0.01), y1 = t1 * sc.ca;\n    const ds = Math.hypot(x1 - x0, y1 - y0, z1 - z0) / 0.01;\n    const step = min(left / max(ds, 1e-3), 0.3);\n    S.ph += step;\n    left -= step * ds;\n  }\n  S.ph %= 2 * PI;\n}\n\n// Colours: lower sphere, upper sphere, cone, plane, conic, the two\n// segment colours, white.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0;\n  // The cone and the plane are seen faint, where a warm hue reads olive, so\n  // they lose more of their colour there than the bright parts do.\n  const set = (i, hh, s, v) => {\n    const w = warm(hh);\n    hsv(hh, s * (1 - (i === 2 || i === 3 ? 0.7 : 0.35) * w), v, c, i * 3);\n  };\n  set(0, h, 0.72, 1);\n  set(1, h + 0.2, 0.62, 1);\n  set(2, h + 0.1, 0.55, 1);\n  set(3, h + 0.04, 0.5, 1);\n  set(4, h + 0.62, 0.14, 1);\n  set(5, h + 0.62, 0.6, 1);\n  set(6, h + 0.42, 0.55, 1);\n  set(7, 0, 0, 1);\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.sc.h === undefined) return;\n  if (S.colHue !== S.hue) palette(S);\n  const sc = S.sc, col = S.col, base = S.base, lin = S.lin, zO = S.zO, zC = S.zC, zP = S.zP;\n  const hi = YTOP, lo = S.lo, ty = (hi + lo) / 2;\n  // A wider cone pulls the camera back, by the square root of how much\n  // wider it is than the 16 degree one, so a wide ellipse still fits.\n  const f = (128 * DIST) / ((hi - lo) * cos(ELEV) * sqrt(sc.k / tan(16 * RAD)));\n  // Camera basis. fwd looks at (0, ty, 0) from DIST away, ELEV above.\n  const ce = cos(ELEV), se = sin(ELEV), st = sin(S.th), ct = cos(S.th);\n  const ox = DIST * ce * st, oy = ty + DIST * se, oz = DIST * ce * ct;\n  const fx = -ce * st, fy = -se, fz = -ce * ct;\n  const rx = ct, rz = -st; // right = fwd x up, level\n  const ux = -fy * rz, uy = rz * fx - rx * fz, uz = fy * rx;\n  // The light hangs above and to the left of the camera.\n  let lx = -0.55 * rx + 0.75 * ux - 0.5 * fx, ly = 0.75 * uy - 0.5 * fy, lz = -0.55 * rz + 0.75 * uz - 0.5 * fz;\n  const ll = Math.hypot(lx, ly, lz);\n  lx /= ll;\n  ly /= ll;\n  lz /= ll;\n  const k2 = sc.k * sc.k, nx = sc.nx, ny = sc.ny, h = sc.h;\n  // Each sphere: height, radius, palette slot, and how warm its hue is.\n  const sph = [\n    [sc.s1, sc.r1, 0, warm(S.hue + H0)],\n    [sc.s2, sc.r2, 3, warm(S.hue + H0 + 0.2)],\n  ];\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const v = (63.5 - py) / f, bg = 0.025 + 0.02 * (py / H);\n    for (let px = 0; px \u003c W; px++, p++) {\n      const u = (px - 31.5) / f;\n      const dx = fx + u * rx + v * ux, dy = fy + v * uy, dz = fz + u * rz + v * uz;\n      const dd = dx * dx + dy * dy + dz * dz, il = 1 / sqrt(dd);\n      let r = bg * 0.6, g = bg * 0.75, b = bg * 1.5, tO = 1e9;\n      // The spheres, opaque and lit. They are drawn whole even where they\n      // rise past the cut cone, a ball sitting in a cup.\n      for (let q = 0; q \u003c 2; q++) {\n        const s = sph[q][0], rad = sph[q][1];\n        if (rad \u003c= 0 || abs(s) > 60) continue;\n        const ocy = oy - s, bb = ox * dx + ocy * dy + oz * dz, cc = ox * ox + ocy * ocy + oz * oz - rad * rad, disc = bb * bb - dd * cc;\n        if (disc \u003c= 0) continue;\n        const t = (-bb - sqrt(disc)) / dd;\n        if (t \u003c= 0 || t >= tO) continue;\n        tO = t;\n        const o = sph[q][2];\n        const hx = (ox + t * dx) / rad, hy = (oy + t * dy - s) / rad, hz = (oz + t * dz) / rad;\n        const di = max(0, hx * lx + hy * ly + hz * lz);\n        // Blinn highlight on the half vector between the light and the eye.\n        const vx = lx - dx * il, vy = ly - dy * il, vz = lz - dz * il;\n        const vl = Math.hypot(vx, vy, vz);\n        const hs = max(0, (hx * vx + hy * vy + hz * vz) / vl), spec = hs ** 28 * 0.75;\n        const rim = -(hx * dx + hy * dy + hz * dz) * il;\n        // Orange and yellow go brown in shade, so a warm sphere gets more\n        // fill light and stays gold.\n        const wq = sph[q][3], lit = 0.12 + 0.3 * wq + (0.8 - 0.2 * wq) * di * (0.55 + 0.45 * rim);\n        r = col[o] * lit + spec;\n        g = col[o + 1] * lit + spec;\n        b = col[o + 2] * lit + spec;\n      }\n      zO[p] = tO;\n      // The cone: x^2 + z^2 = k^2 y^2, both nappes. Glass, so each crossing\n      // adds a little light, more where the surface is seen edge on.\n      const A = dx * dx + dz * dz - k2 * dy * dy, B = 2 * (ox * dx + oz * dz - k2 * oy * dy), C = ox * ox + oz * oz - k2 * oy * oy;\n      let tc1 = 1e9, tc2 = 1e9;\n      const disc = B * B - 4 * A * C;\n      if (disc > 0 && abs(A) > 1e-9) {\n        const sq = sqrt(disc);\n        let ta = (-B - sq) / (2 * A), tb = (-B + sq) / (2 * A);\n        if (ta > tb) [ta, tb] = [tb, ta];\n        for (const t of [ta, tb]) {\n          const y = oy + t * dy;\n          if (t > 0 && y \u003c YTOP && y > YBOT) {\n            if (tc1 > 1e8) tc1 = t;\n            else tc2 = t;\n          }\n        }\n      }\n      zC[p] = tc1;\n      // The plane, clipped to a square in x and z and to the cone's height.\n      // It is brighter inside the cone, where it is the conic's own disc, and\n      // lit along its edges.\n      let tp = 1e9, pin = false, pm = 0;\n      const nd = nx * dx + ny * dy;\n      if (abs(nd) > 1e-6) {\n        const t = (h - nx * ox - ny * oy) / nd;\n        if (t > 0 && t \u003c tO) {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz;\n          const m = min(PX - abs(x), PX - abs(z), y - YBOT, YTOP - y);\n          if (m > 0) {\n            tp = t;\n            pin = x * x + z * z \u003c k2 * y * y;\n            pm = (m * f) / t;\n          }\n        }\n      }\n      zP[p] = tp;\n      // The glass layers in front of the opaque hit, far to near: the far\n      // wall of the cone, then the near wall, with the plane wherever it falls.\n      const pa = pin ? 0.2 : 0.12, pe = (pin ? 0.3 : 0.08) + 0.5 * exp(-pm * pm * 0.8);\n      const pos = tp > tc2 ? 0 : tp > tc1 ? 1 : 2;\n      for (let L = 0; L \u003c 3; L++) {\n        const isP = L === pos, t = isP ? tp : (L \u003c pos ? L : L - 1) === 0 ? tc2 : tc1;\n        if (t >= tO || t > 1e8) continue;\n        let a, e, o;\n        if (isP) {\n          a = pa;\n          e = pe;\n          o = 9;\n        } else {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz, gy = -k2 * y, gl = Math.hypot(x, gy, z) || 1;\n          const ci = abs((x * dx + gy * dy + z * dz) / gl) * il, fr = (1 - ci) * (1 - ci);\n          a = 0.06 + 0.2 * fr;\n          e = 0.07 + 0.42 * fr;\n          o = 6;\n        }\n        r = r * (1 - a) + col[o] * e;\n        g = g * (1 - a) + col[o + 1] * e;\n        b = b * (1 - a) + col[o + 2] * e;\n      }\n      base[p * 3] = r;\n      base[p * 3 + 1] = g;\n      base[p * 3 + 2] = b;\n    }\n  }\n\n  // Lines and points, splatted over the shading. Behind a sphere they show\n  // through dimmed, behind the cone's near wall or the plane a little dimmer.\n  lin.fill(0);\n  const ssa = sc.sa, sca = sc.ca;\n  let cr = 0, cg = 0, cb = 0, cw = 0;\n  // A thick line is laid as two strands half an LED either side of its\n  // path on the screen, (tox, toy) apart.\n  let thick = false, tox = 0, toy = 0;\n  const put = (sx, sy, k) => {\n    const ix = floor(sx), iy = floor(sy), ax = sx - ix, ay = sy - iy;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = ix + (j & 1), Y = iy + (j >> 1);\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const wt = k * (j & 1 ? ax : 1 - ax) * (j >> 1 ? ay : 1 - ay), o = (Y * W + X) * 3;\n      lin[o] += cr * wt;\n      lin[o + 1] += cg * wt;\n      lin[o + 2] += cb * wt;\n    }\n  };\n  const splat = (x, y, z, w) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = qx * fx + qy * fy + qz * fz;\n    if (zz \u003c 0.1) return;\n    const sx = 31.5 + (f * (qx * rx + qz * rz)) / zz, sy = 63.5 - (f * (qx * ux + qy * uy + qz * uz)) / zz;\n    if (sx \u003c -2 || sx > W + 1 || sy \u003c -2 || sy > H + 1) return;\n    const ni = cl(Math.round(sy), 0, H - 1) * W + cl(Math.round(sx), 0, W - 1);\n    let k = w;\n    if (zz > zO[ni] + 0.04) k *= 0.38;\n    if (zz > zC[ni] + 0.04) k *= 0.62;\n    if (zz > zP[ni] + 0.03) k *= 0.75;\n    if (!thick) put(sx, sy, k);\n    else {\n      put(sx + tox, sy + toy, k * 0.62);\n      put(sx - tox, sy - toy, k * 0.62);\n    }\n  };\n  const proj = (x, y, z) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = max(0.1, qx * fx + qy * fy + qz * fz);\n    return [(f * (qx * rx + qz * rz)) / zz, (f * (qx * ux + qy * uy + qz * uz)) / zz];\n  };\n  const seg = (ax, ay, az, bx, by, bz) => {\n    const [sx0, sy0] = proj(ax, ay, az), [sx1, sy1] = proj(bx, by, bz);\n    const L = Math.hypot(sx1 - sx0, sy1 - sy0), n = max(1, Math.ceil(L / 0.6)), w = (L / n) * cw;\n    tox = L > 0 ? (-(sy1 - sy0) / L) * 0.55 : 0;\n    toy = L > 0 ? ((sx1 - sx0) / L) * 0.55 : 0;\n    for (let i = 0; i \u003c= n; i++) {\n      const t = i / n;\n      splat(ax + (bx - ax) * t, ay + (by - ay) * t, az + (bz - az) * t, i === 0 || i === n ? w / 2 : w);\n    }\n  };\n  const use = (o, w) => {\n    cr = col[o * 3];\n    cg = col[o * 3 + 1];\n    cb = col[o * 3 + 2];\n    cw = w;\n  };\n  // A point on the line of the cone at azimuth phi, t along it.\n  const gp = (phi, t) => [t * ssa * cos(phi), t * sca, t * ssa * sin(phi)];\n  // The cone's lines through the apex and its two rims.\n  use(2, 0.3);\n  const tTop = YTOP / sca, tBot = YBOT / sca;\n  for (let i = 0; i \u003c GEN; i++) {\n    const phi = (i * 2 * PI) / GEN + 0.3;\n    seg(...gp(phi, tTop), 0, 0, 0);\n    seg(0, 0, 0, ...gp(phi, tBot));\n  }\n  const ring = (y, rad, n) => {\n    let px = rad, pz = 0;\n    for (let i = 1; i \u003c= n; i++) {\n      const a = (i * 2 * PI) / n, qx = rad * cos(a), qz = rad * sin(a);\n      seg(px, y, pz, qx, y, qz);\n      px = qx;\n      pz = qz;\n    }\n  };\n  use(2, 0.5);\n  ring(YTOP, YTOP * sc.k, 72);\n  ring(YBOT, -YBOT * sc.k, 72);\n  // The contact circles, in each sphere's colour, brighter.\n  const okS = (s, r) => r > 0 && abs(s) \u003c 60;\n  use(0, 0.95);\n  if (okS(sc.s1, sc.r1)) ring(sc.g1 * sca, abs(sc.g1 * ssa), 64);\n  use(1, 0.95);\n  if (okS(sc.s2, sc.r2) && sc.g2 * sca \u003c YTOP && sc.g2 * sca > YBOT) ring(sc.g2 * sca, abs(sc.g2 * ssa), 64);\n  // The conic, drawn in pieces wherever it lies inside the cut cone.\n  use(4, 1.35);\n  const NPH = 240;\n  let prev = null;\n  for (let i = 0; i \u003c= NPH; i++) {\n    const phi = (i * 2 * PI) / NPH, t = conicT(sc, phi), y = t * sca;\n    const okp = y \u003c YTOP && y > YBOT;\n    const cur = okp ? gp(phi, t) : null;\n    if (cur && prev && abs(cur[1] - prev[1]) \u003c 1.2) seg(...prev, ...cur);\n    prev = cur;\n  }\n  // The point, its two distances to the foci and the line of the cone\n  // through it, cut where it meets the two contact circles. Each pair in one\n  // colour: PF1 equals the stretch to circle 1, PF2 the stretch to circle 2.\n  const tP = conicT(sc, S.ph), yP = tP * sca;\n  if (yP \u003c YTOP && yP > YBOT) {\n    const [Px, Py, Pz] = gp(S.ph, tP);\n    const clipT = (t) => cl(t, tBot, tTop);\n    thick = true;\n    use(5, 1.5);\n    if (okS(sc.s1, sc.r1)) {\n      seg(Px, Py, Pz, sc.fx1, sc.fy1, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g1)));\n    }\n    use(6, 1.5);\n    if (okS(sc.s2, sc.r2)) {\n      seg(Px, Py, Pz, sc.fx2, sc.fy2, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g2)));\n    } else seg(Px, Py, Pz, ...gp(S.ph, sc.g2 > 0 ? tTop : tBot));\n    thick = false;\n    use(7, 2.2);\n    for (const [ddx, ddy] of [[0, 0], [0.012, 0], [-0.012, 0], [0, 0.012], [0, -0.012]]) splat(Px + ddx, Py + ddy, Pz, 1);\n  }\n  // The foci, white points where the spheres touch the plane.\n  use(7, 1.6);\n  for (const [s, r, fxx, fyy] of [[sc.s1, sc.r1, sc.fx1, sc.fy1], [sc.s2, sc.r2, sc.fx2, sc.fy2]]) {\n    if (!okS(s, r) || fyy > YTOP || fyy \u003c YBOT) continue;\n    for (const [ddx, ddy] of [[0, 0], [0.014, 0], [-0.014, 0], [0, 0.014], [0, -0.014]]) splat(fxx + ddx, fyy + ddy, 0, 1);\n  }\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3;\n      display.setPixel(x, y, cl((base[o] + lin[o]) * 255, 0, 255), cl((base[o + 1] + lin[o + 1]) * 255, 0, 255), cl((base[o + 2] + lin[o + 2]) * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower."},{"name":"Tilt","min":30,"max":90,"about":"The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50."},{"name":"Cone","min":16,"max":34,"about":"The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34."}],"start":[0,2,30,16],"measures":{"motion":0.1793,"detail":0.0495,"edges":0.3572,"complexity":1.3922,"coverage":0.6125,"colour":0.1958,"drift":0.0301},"knobResponse":[0.1111,0.0383,0.2036,0.1906]},{"slug":"dark-field","title":"Dark Field","family":"microbe","round":26,"note":"암시야 현미경 속 연못물 한 방울이에요. 볼복스와 짚신벌레, 돌말, 해캄 실 위의 종벌레가 검은 바탕에 흩은 빛으로만 빛나요. K1 이 라인베르크와 위상차로 조명을 바꾸고, 누르면 종벌레 자루가 용수철처럼 감겨요.","idea":"A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.","buttons":"K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.","code":"// ===== Patternflow pattern =====\n// Title:   Dark Field\n// Family:  microbe\n// Idea:    A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after dark-field and Rheinberg illumination in the light microscope\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1\n//\n// Knob 1: Light. At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos.\n// Knob 2: Speed. At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower.\n// Knob 3: Crowd. At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in.\n// Knob 4: Focus. Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit.\n// Buttons: K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.\n\nconst W = 64, H = 128, N = W * H, HW = 32, HH = 64;\nconst { min, max, floor, round, ceil, sin, cos, sqrt, exp, abs, PI, atan2 } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rr = (a, b) => a + (b - a) * rnd();\nfunction h32(a, b) {\n  let h = Math.imul(a ^ Math.imul(b, 0x27d4eb2d), 0x9e3779b1);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca77);\n  h ^= h >>> 13;\n  return (h ^ (h >>> 16)) >>> 0;\n}\n\n// Small things live on a torus a little larger than the view, so what leaves\n// one side comes back at the other out of sight. Big swimmers turn back\n// toward the middle near an edge.\nconst wrap = (o, m = 12) => ((o.x -= (W + 2 * m) * floor((o.x + m) / (W + 2 * m))), (o.y -= (H + 2 * m) * floor((o.y + m) / (H + 2 * m))));\nconst go = (o, v) => ((o.x += cos(o.h) * v), (o.y += sin(o.h) * v));\nfunction swim(o, d) {\n  if ((o.z += o.vz * d) > 1 || o.z \u003c -1) o.vz = -o.vz;\n  if (o.x > 8 && o.x \u003c 56 && o.y > 12 && o.y \u003c 116) return;\n  let e = atan2(64 - o.y, 32 - o.x) - o.h;\n  o.h += cl(e - TAU * round(e / TAU), -1, 1) * 1.2 * d;\n}\n// Colours each thing scatters in dark field.\nconst C = {\n  cell: [110, 255, 118], vrim: [175, 255, 165], dau: [64, 255, 92], par: [200, 222, 255], gran: [255, 236, 196], dia: [255, 194, 72],\n  vor: [222, 236, 255], rot: [255, 226, 186], eug: [132, 255, 140], amb: [255, 184, 100], gry: [212, 206, 198], wall: [205, 242, 182],\n  chl: [84, 236, 90], osc: [120, 250, 222],\n};\n// Rheinberg: an annular filter yellow at its sides and red top and bottom, so\n// an edge's colour follows the way it faces (q = nx² - ny²), on a blue field.\nconst RA = [255, 220, 46], RB = [255, 44, 40];\nconst RM = RA.map((v, i) => (v + RB[i]) / 2), RH = RA.map((v, i) => (v - RB[i]) / 2);\nconst FIELD = [4, 16, 60], PHASE = [74, 82, 72];\n\n// The algal thread, a Spirogyra filament across the lower third: its centre\n// at arc length s and its unit tangent.\nconst FL = 136;\nlet fx = 0, fy = 0, ftx = 1, fty = 0;\nfunction fil(s) {\n  const dy = -0.2 + 0.225 * cos(s * 0.045 + 0.3), l = sqrt(1 + dy * dy);\n  (fx = s - 30), (fy = 109 - 0.2 * s + 5 * sin(s * 0.045 + 0.3)), (ftx = 1 / l), (fty = dy / l);\n}\n\n// Light goes into a sharp buffer and, by how far the thing lies from the\n// focal plane, into a halo buffer at half resolution that is blurred and\n// spread back over the LEDs.\nlet S, Q, ox = 0, oy = 0, foc = 0, m1 = 0, wS = 1, wQ = 0, lastP = -1;\nconst K0 = [0, 0, 0], K1 = [0, 0, 0];\nfunction col(c, g = 1) {\n  for (let i = 0; i \u003c 3; i++) (K0[i] = (g * (c[i] + m1 * (RM[i] - c[i]))) / 255), (K1[i] = (g * m1 * RH[i]) / 255);\n}\nfunction dep(z) {\n  const b = max(0, abs(z - foc) - 0.15) * 2.4;\n  wS = max(0, 1 - b);\n  wQ = min(1, b) / (1 + 0.5 * max(0, b - 1));\n}\nfunction put(x, y, s, q = 0) {\n  const xi = round(x - ox), yi = round(y - oy), o = (yi * W + xi) * 3;\n  if (xi \u003c 0 || yi \u003c 0 || xi >= W || yi >= H || o === lastP) return;\n  lastP = o;\n  const r = s * (K0[0] + q * K1[0]), g = s * (K0[1] + q * K1[1]), b = s * (K0[2] + q * K1[2]), h = ((yi >> 1) * HW + (xi >> 1)) * 3;\n  if (wS) (S[o] += r * wS), (S[o + 1] += g * wS), (S[o + 2] += b * wS);\n  if (wQ) (Q[h] += r * wQ), (Q[h + 1] += g * wQ), (Q[h + 2] += b * wQ);\n}\n// A point: small things lose themselves out of focus, so less goes to the halo.\nfunction dot(x, y, s, q = 0) {\n  const k = wQ;\n  (lastP = -1), (wQ *= 0.4);\n  put(x, y, s, q);\n  wQ = k;\n}\nfunction line(x0, y0, x1, y1, s) {\n  const dx = x1 - x0, dy = y1 - y0, n = max(1, ceil(max(abs(dx), abs(dy)))), q = (dy * dy - dx * dx) / (dx * dx + dy * dy + 1e-6);\n  for (let k = 0; k \u003c n; k++) put(x0 + (dx * k) / n, y0 + (dy * k) / n, s, q);\n}\nfunction ring(cx, cy, r, s) {\n  lastP = -1;\n  for (let k = 0, n = max(8, ceil(TAU * r * 1.4)); k \u003c n; k++) {\n    const c = cos((k / n) * TAU), sn = sin((k / n) * TAU);\n    put(cx + r * c, cy + r * sn, s, c * c - sn * sn);\n  }\n}\n// A body's own frame: at(u, v) is u along its axis and v across it.\nlet FX = 0, FY = 0, FC = 1, FS = 0;\nconst frame = (x, y, a) => ((FX = x), (FY = y), (FC = cos(a)), (FS = sin(a)));\nconst at = (u, v, s, f = put, q = FS * FS - FC * FC) => f(FX + u * FC - v * FS, FY + u * FS + v * FC, s, q);\n// A three-wide box blur run twice, on the half-resolution grid.\nfunction blur(A, T) {\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [a, b, s, n] = pass & 1 ? [T, A, HW * 3, HH] : [A, T, 3, HW];\n    for (let y = 0, o = 0; y \u003c HH; y++)\n      for (let x = 0; x \u003c HW; x++)\n        for (let c = 0, i = pass & 1 ? y : x; c \u003c 3; c++, o++) b[o] = (a[o - (i > 0 ? s : 0)] + a[o] + a[o + (i \u003c n - 1 ? s : 0)]) / 3;\n  }\n}\n// Light to LED level: black below 0.1, a gain of 3, a soft shoulder above 0.8.\nconst LUT = Float32Array.from({ length: 1024 }, (_, i) => {\n  const v = max(0, i / 256 - 0.1) * 3;\n  return 255 * (v \u003c 0.8 ? v : 1 - 0.2 * exp(-(v - 0.8) / 0.2));\n});\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), side = () => (rnd() \u003c 0.5 ? -1 : 1), A = (n, f) => Array.from({ length: n }, (_, i) => ({ x: rr(-12, 76), y: rr(-12, 140), h: rnd() * TAU, ...f(i) }));\n  const P = (params.s = { t: 0, S: F(N * 3), Q: F(HW * HH * 3), T: F(HW * HH * 3), QS: F(HW * HH), L: F(N), V: F(N), OP: F(140), nx: 0, ny: 0, ex: 0, ey: 0, nt: 3.2, ja: 0, jt: 9, jx: 0, jy: 0, s1: rnd() * 7, s2: rnd() * 7 });\n  // The round field stop of the eyepiece clips the panel's two ends.\n  for (let p = 0; p \u003c N; p++) P.V[p] = sm(67.5, 62, sqrt(((p & 63) - 31.5) ** 2 + (((p >> 6) - 63.5) * 1.02) ** 2));\n  // Volvox: cells on a sphere (a Fibonacci spiral) and daughter colonies inside.\n  P.vol = [[0.18, 12, 21], [-0.8, 9, 57], [0.2, 9.5, 112], [0.62, 11, 80]].map(([z, R, y]) => {\n    const n = round(0.7 * R * R), pts = F(n * 3), d = [];\n    for (let k = 0; k \u003c n; k++) {\n      const yv = 1 - (2 * k + 1) / n, q = sqrt(1 - yv * yv);\n      pts.set([cos(k * 2.4) * q, yv, sin(k * 2.4) * q], k * 3);\n    }\n    for (let k = 0, m = 3 + rnd() * 3; k \u003c m; k++) {\n      const a = rnd() * TAU, b = rr(-1, 1), r = rr(0.2, 0.52), q = sqrt(1 - b * b) * r;\n      d.push([cos(a) * q, b * r, sin(a) * q, rr(0.17, 0.25) * R]);\n    }\n    return { x: rr(16, 48), y: y + rr(-9, 9), z, vz: rr(-0.025, 0.025), R, h: rnd() * TAU, v: rr(1.6, 2.8), ph: 0, w: rr(0.4, 0.7) * side(), pts, d };\n  });\n  // Paramecia: slippers with an oral groove that swaps sides as they spin.\n  P.par = [[0.05, 42], [0.14, 115], [-0.12, 70], [0.75, 20], [-0.85, 92]].map(([z, y]) => ({\n    x: rr(14, 50), y: y + rr(-10, 10), z, vz: rr(-0.05, 0.05), h: rnd() * TAU, v: rr(8, 11), a: rr(11.5, 13.5), B: rr(4.4, 5.2), spin: 0, ws: rr(1.6, 2.4),\n    rev: 0, tt: rr(3, 8), cy: 0, cv: [rnd(), rnd()],\n  }));\n  // Diatoms: two glide along the thread, two on floating debris, the rest on\n  // the slide's glass, deeper down.\n  P.dia = A(9, (i) => ({ z: i \u003c 2 ? 0 : i \u003c 4 ? rr(-0.05, 0.2) : rr(0.75, 0.92), a: rr(6, 9), B: rr(2.1, 2.6), go: rnd() \u003c 0.6, tt: rr(0.5, 3), dir: side(), v: rr(3.5, 6), f: i \u003c 2 ? 44 + 34 * i + rr(-6, 6) : -1 }));\n  // Oscillatoria: blue-green threads that glide along their length and wave both ends.\n  P.osc = [[18, 17, -0.04], [46, 40, 0.1], [30, 117, 0.3]].map(([x, y, z], i) => ({ x: x + rr(-9, 9), y: y + rr(-9, 9), z, h: rr(-0.6, 0.6) + (i & 1) * PI, L: 2 * round(rr(17, 24)), k: rr(-0.015, 0.015), ph: rnd() * 7, v: rr(1.2, 2.2) }));\n  // Vorticella bells on the thread: anchor, lean, stalk length. Bell 0 snaps first.\n  P.vor = [[46, -0.22, 46], [50, 0.16, 36], [41, -0.55, 30], [56, 0.45, 42], [36, -0.05, 52], [62, 0.1, 28], [30, -0.4, 40]].map(([s, a, L], i) => ({ s, a: a - PI / 2, L, ext: 1, st: 0, tt: i ? rr(9, 18) : 4.1, cp: 0 }));\n  P.rot = [[84, -2.05], [16, -1.15]].map(([s, a]) => ({ s, a, L: 21, ext: 1, st: 0, tt: rr(7, 12), cp: 0, sw: rnd() * 7 }));\n  P.fla = A(44, (i) => ({ z: rr(-0.9, 0.9), v: rr(6, 18), tt: 0, k: i % 3, ph: rnd() * 7 }));\n  // Detritus: grains and glittering flakes, amber plant matter or grey grit,\n  // a third of it settled on the slide. Bacteria: points crowding near the\n  // thread they feed on, most jiggling, some swimming.\n  P.det = A(48, (i) => {\n    const pts = [], m = 1 + floor(rnd() * rnd() * 9), e = m > 3 ? 2 : 1;\n    for (let k = 0; k \u003c m; k++) pts.push([e * round(rr(-1.5, 1.5)), e * round(rr(-1.5, 1.5)), rr(0.35, 0.8)]);\n    return { z: i % 3 ? rr(-1, 1) * rnd() : rr(0.8, 1), pts, k: rnd() \u003c 0.55 };\n  });\n  P.bac = A(580, () => ({ z: rr(-1, 1) * rnd(), s: rr(0.4, 0.8), m: rnd() \u003c 0.3 }));\n}\n\n// Knocking the slide.\nfunction knock(P) {\n  const a = rnd() * TAU;\n  (P.ja = 3.5), (P.jt = 0), (P.jx = cos(a)), (P.jy = sin(a));\n  for (const o of [...P.vor, ...P.rot]) if (o.st !== 1) o.st = 1;\n  for (const o of P.par) (o.rev = 0.6), (o.tr = rr(-3, 3));\n  for (const o of [...P.vol, ...P.fla, ...P.det]) (o.x += P.jx * rr(1, 4)), (o.y += P.jy * rr(1, 4));\n}\n\n// A stalk or body that waits and snaps in to lo. It holds there, then stretches out again.\nfunction cycle(o, d, down, lo, up, hold, wait) {\n  if (o.st === 0 && (o.tt -= d) \u003c 0) o.st = 1;\n  else if (o.st === 1 && (o.ext -= d * down) \u003c= lo) (o.ext = lo), (o.st = 2), (o.tt = hold * rr(1, 2));\n  else if (o.st === 2 && (o.tt -= d) \u003c 0) o.st = 3;\n  else if (o.st === 3 && (o.ext += d * up * (1.12 - o.ext)) >= 1) (o.ext = 1), (o.st = 0), (o.tt = wait * rr(1, 2.2));\n}\n\nfunction life(P, d, crowd, first) {\n  // Each kind fades its members in and out by the Crowd knob.\n  const each = (L, k, f) =>\n    L.forEach((o, i) => {\n      const tg = i \u003c k ? 1 : 0;\n      o.p = first ? tg : o.p + (tg - o.p) * min(1, d * 2.5);\n      f(o, i);\n    });\n  const t = P.t;\n  each(P.vol, 3 + round(crowd), (o, i) => {\n    o.h += sin(t * 0.21 + i * 2) * 0.15 * d;\n    go(o, o.v * d);\n    o.ph += o.w * d;\n    swim(o, d);\n  });\n  each(P.par, 3 + round(2 * crowd), (o, i) => {\n    o.spin += o.ws * d;\n    if (o.rev > 0) (o.rev -= d), (o.h += o.tr * d), go(o, -o.v * 0.5 * d);\n    else {\n      o.h += sin(t * 0.5 + i * 2.3) * 0.25 * d;\n      if ((o.tt -= d) \u003c 0) (o.rev = 0.7), (o.tr = rr(-3, 3)), (o.tt = rr(4, 9));\n      go(o, o.v * d);\n    }\n    o.cy += d * 0.7;\n    (o.cv[0] = (o.cv[0] + d * 0.24) % 1), (o.cv[1] = (o.cv[1] + d * 0.21) % 1);\n    swim(o, d);\n  });\n  // Diatoms glide on their raphe and stop. Then they set off again, often backwards.\n  each(P.dia, 5 + round(4 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.go = !o.go), (o.tt = o.go ? rr(2, 4) : rr(0.8, 2.2)), o.go && rnd() \u003c 0.4 && (o.dir = -o.dir);\n    const v = o.go ? o.v * o.dir * d * sm(0, 0.4, o.tt) : 0;\n    if (o.f \u003c 0) go(o, v), wrap(o);\n    else if ((o.f += v) \u003c 8 || o.f > FL - 8) (o.dir = -o.dir), (o.f = cl(o.f, 8, FL - 8));\n  });\n  // Oscillatoria reverse when their front end runs out toward an edge.\n  each(P.osc, 2 + round(crowd), (o) => {\n    o.ph += d * 1.4;\n    go(o, o.v * d);\n    if ((o.x \u003c 6 || o.x > 58 || o.y \u003c 8 || o.y > 120) && cos(o.h) * (32 - o.x) + sin(o.h) * (64 - o.y) \u003c 0) o.h += PI;\n  });\n  each(P.vor, 5 + round(2 * crowd), (b) => ((b.cp += d * 7), cycle(b, d, 14, 0.13, 0.38, 0.5, 8)));\n  each(P.rot, 1 + round(crowd), (r) => ((r.cp += d * 9), cycle(r, d, 4, 0.5, 1.3, 1, 6)));\n  each(P.fla, 20 + round(24 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.h += rr(-2, 2)), (o.v = rr(5, 20)), (o.tt = rr(0.25, 1.4));\n    o.h += sin(o.ph + t * 3) * d * 1.2;\n    go(o, o.v * d);\n    wrap(o);\n  });\n  // The slow current carries grit and bacteria up and to the right, fastest\n  // midway between the coverslip (z -1) and the slide (z 1).\n  const j = sqrt(d * 30);\n  for (const [L, k, jj] of [[P.det, 28 + round(20 * crowd), 0.06], [P.bac, 460 + round(120 * crowd), 0.5]])\n    each(L, k, (o) => {\n      const f = 1 - o.z * o.z;\n      o.x += 1.7 * f * d + (rnd() - 0.5) * jj * j;\n      o.y -= f * d + (rnd() - 0.5) * jj * j;\n      if (o.m) rnd() \u003c d * 0.8 && (o.h += rr(-2.5, 2.5)), go(o, 9 * d);\n      wrap(o);\n    });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = (rd * cl(k[1], 0.2, 3)) / 2, l = cl(k[0], 0, 1);\n  (P.m1 = cl(l * 2, 0, 1)), (P.m2 = cl(l * 2 - 1, 0, 1)), (P.foc = cl(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) knock(P);\n  const t = (P.t += d);\n  // The stage is never quite still: a slow creep, a nudge now and then, and\n  // the shake of a knock.\n  if ((P.nt -= d) \u003c 0) (P.nt = rr(6, 11)), (P.nx = cl(P.nx + rr(-6, 6), -5, 5)), (P.ny = cl(P.ny + rr(-8, 8), -7, 7));\n  const e = min(1, d * 3), sh = P.ja * exp(-(P.jt += rd) * 5) * sin(P.jt * 40);\n  (P.ex += (P.nx - P.ex) * e), (P.ey += (P.ny - P.ey) * e);\n  P.ox = 2.5 * sin(t * 0.13 + P.s1) + 1.2 * sin(t * 0.31 + 2) + P.ex + sh * P.jx;\n  P.oy = 3.5 * sin(t * 0.09 + P.s2) + 1.5 * sin(t * 0.23) + P.ey + sh * P.jy;\n  life(P, d, cl(k[2], 0, 1), !P.init);\n  P.init = true;\n}\n\nfunction thread() {\n  dep(0);\n  col(C.wall);\n  for (const sd of [-2.6, 2.6]) {\n    lastP = -1;\n    for (let s = 0; s \u003c= FL; s += 0.7) fil(s), put(fx - fty * sd, fy + ftx * sd, 0.62, fty * fty - ftx * ftx);\n  }\n  for (let s = 5; s \u003c FL; s += 9) fil(s), line(fx - fty * 1.6, fy + ftx * 1.6, fx + fty * 1.6, fy - ftx * 1.6, 0.3);\n  // The chloroplast, a green ribbon winding round inside the cell wall.\n  col(C.chl);\n  for (let s = 0; s \u003c= FL; s += 1.3) fil(s), dot(fx - fty * 1.7 * sin(s * 0.5), fy + ftx * 1.7 * sin(s * 0.5), 0.5 + 0.25 * cos(s * 0.5));\n}\n\n// Frames a thing standing on the thread at arc length s, leaning by a.\nfunction foot(s, a) {\n  fil(s);\n  frame(fx + fty * 2.6, fy - ftx * 2.6, a);\n}\n\nfunction vorticella(b, i, t) {\n  foot(b.s, b.a + 0.07 * sin(t * 0.6 + i * 1.7));\n  const L = b.L * b.ext, amp = 2 * (1 - b.ext) ** 0.6, bend = 3 * sin(t * 0.45 + i) * b.ext, m = ceil(L * 1.5) + 4;\n  dep(0);\n  col(C.par, b.p);\n  // The stalk, straight while it feeds and a tight coil when it has snapped.\n  let x = FX, y = FY;\n  for (let j = 1; j \u003c= m; j++) {\n    const u = (j / m) * L, v = bend * sin((PI * j) / m) + amp * sin((j / m) * 6 * TAU), X = FX + u * FC - v * FS, Y = FY + u * FS + v * FC;\n    line(x, y, X, Y, 0.5);\n    (x = X), (y = Y);\n  }\n  // The bell, a cup that closes to a ball when the stalk snaps; the cilia\n  // whirl round its lip while it feeds.\n  frame(x, y, atan2(FS, FC));\n  const open = sm(0.55, 0.95, b.ext), lb = 6 + 2 * open;\n  const hwOf = (u) => {\n    const ball = 3.1 * sqrt(max(0, 1 - ((2 * u) / lb - 1) ** 2));\n    return ball + (0.8 + 4 * (u / lb) ** 0.9 - ball) * open;\n  };\n  col(C.vor, b.p);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= lb; u += 0.5) at(u, hwOf(u) * sd, 0.75);\n  }\n  for (let k = -1; k \u003c 2; k++) at(4.1 + k * 1.6, k * 1.2, 0.4, dot);\n  const hw = hwOf(lb);\n  if (open \u003c 0.1) return;\n  lastP = -1;\n  for (let k = 0; k \u003c 24; k++) at(lb + 1.3 * sin((k / 24) * TAU), hw * cos((k / 24) * TAU), 0.55 * open);\n  for (let k = 0; k \u003c 9; k++) {\n    const th = (k / 9) * TAU + b.cp, s = sin(th);\n    at(lb + 2.3 + 0.9 * s, (hw + 0.9) * cos(th), (s > 0 ? 0.85 : 0.35) * open, dot);\n  }\n}\n\nfunction rotifer(r, i, t) {\n  foot(r.s, r.a + 0.22 * sin(t * 0.4 + r.sw));\n  const L = r.L * r.ext, g = r.p, cr = sm(0.82, 0.97, r.ext);\n  dep(0);\n  col(C.rot, g);\n  // A foot of three telescoping joints, a swollen trunk, a neck, the head,\n  // and inside it the jaws of the mastax, chewing.\n  const hwOf = (u) => (u \u003c 0.36 ? 0.9 + 0.4 * floor(u / 0.12) : u \u003c 0.8 ? 2.1 + 2.5 * sin((PI * (u - 0.36)) / 0.44) : u \u003c 0.88 ? 2 : 2.9);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= L; u += 0.5) at(u, hwOf(u / L) * sd, 0.75);\n    at(-1.2, sd * 1.3, 0.7, dot);\n    at(0.72 * L, sd * (0.6 + 0.5 * sin(r.cp * 0.45)), 0.85, dot);\n  }\n  for (let k = 0; k \u003c 7; k++) at(L * (0.42 + 0.05 * k), 1.8 * sin(k * 2.4 + t * 0.6), 0.38 + 0.2 * sin(k * 1.7 + t * 2), dot);\n  // The crown: two discs of cilia whirling the opposite way to each other.\n  lastP = -1;\n  if (cr \u003c 0.02) for (let v = -2.8; v \u003c= 2.8; v += 0.7) at(L, v, 0.6);\n  else\n    for (const sd of [-1, 1]) {\n      const cx = FX + FC * (L + 1.8) - FS * sd * 2.9, cy = FY + FS * (L + 1.8) + FC * sd * 2.9;\n      ring(cx, cy, 2.4 * cr, 0.3 * cr);\n      for (let k = 0; k \u003c 10; k++) {\n        const th = (k / 10) * TAU + sd * r.cp;\n        dot(cx + cos(th) * 3.2 * cr, cy + sin(th) * 3.2 * cr, (0.55 + 0.45 * sin(th * 3 + t * 5)) * cr * g);\n      }\n    }\n}\n\nfunction volvox(o) {\n  const { x, y, R, pts } = o, g = o.p, ax = cos(o.h), ay = sin(o.h), c = cos(o.ph), s = sin(o.ph), c1 = 1 - c;\n  // Rolling about its swimming axis, which lies in the view plane (Rodrigues).\n  const rot = (px, py, pz, k) => {\n    const kd = (ax * px + ay * py) * c1, u = px * c + ay * pz * s + ax * kd, v = py * c - ax * pz * s + ay * kd;\n    return k ? dot(x + R * u, y + R * v, pz * c + (ax * py - ay * px) * s > 0 ? 0.85 : 0.5, u * u - v * v) : frame(x + R * u, y + R * v, 0);\n  };\n  dep(o.z);\n  col(C.cell, g);\n  for (let k = 0; k \u003c pts.length; k += 3) rot(pts[k], pts[k + 1], pts[k + 2], 1);\n  col(C.vrim, g);\n  ring(x, y, R + 0.4, 0.55);\n  // The faint diffraction fringe outside the rim.\n  ring(x, y, R + 2.6, 0.3);\n  col(C.dau, g);\n  for (const [px, py, pz, r] of o.d) rot(px, py, pz, 0), ring(FX, FY, r, 0.95), dot(FX, FY, 0.7);\n}\n\nfunction paramecium(o, i, t) {\n  const { a, B } = o, gs = cos(o.spin), n = ceil(TAU * sqrt((a * a + B * B) / 2) * 1.3);\n  frame(o.x, o.y, o.h);\n  dep(o.z);\n  col(C.par, o.p);\n  // Outline and cilia: a metachronal wave runs back along the body.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const th = (k / n) * TAU, ct = cos(th), st = sin(th), bw = B * (1 + 0.16 * ct - 0.08 * ct * ct), wv = sin(th * 9 - t * 10);\n      let nu = ct / a, nv = st / bw, nl = sqrt(nu * nu + nv * nv);\n      const nx = nu * FC - nv * FS, ny = nu * FS + nv * FC, q = (nx * nx - ny * ny) / (nl * nl);\n      (nu = (1.5 * nu) / nl), (nv = (1.5 * nv) / nl);\n      if (!pass) at(a * ct, bw * st, 0.62 + 0.25 * wv, put, q);\n      else if (wv > 0.2) at(a * ct + nu, bw * st + nv, 0.6 * wv, dot, q);\n    }\n  }\n  // The oral groove, a bright furrow from the front to the middle that swaps\n  // sides as the cell spins on its long axis.\n  lastP = -1;\n  for (let u = 0.05; u \u003c 0.62; u += 0.06) at(u * a, gs * B * (0.3 + 0.75 * u) * (u \u003c 0.5 ? 1 : 1 - (u - 0.5) * 6), 0.5 * abs(gs) + 0.12, put, 0);\n  // Granules and food vacuoles carried round by cyclosis, and the two\n  // contractile vacuoles filling and emptying.\n  col(C.gran, o.p);\n  for (let k = 0; k \u003c 23; k++) {\n    const th = k * 2.4 + o.cy * (k % 3 ? 0.6 : 1), r = 0.25 + 0.6 * ((k * 0.618) % 1);\n    at(0.8 * a * r * cos(th), 0.62 * B * r * sin(th), k % 3 ? 0.36 + 0.16 * sin(t * 3 + k) : 0.6, dot, 0);\n  }\n  col(C.par, o.p);\n  o.cv.forEach((c, j) => c > 0.31 && c \u003c 0.85 && ring(FX + (j ? -0.55 : 0.55) * a * FC, FY + (j ? -0.55 : 0.55) * a * FS, 1.6 * c, 0.55));\n}\n\nfunction diatom(o) {\n  const { a, B } = o;\n  if (o.f \u003c 0) frame(o.x, o.y, o.h);\n  else fil(o.f), frame(fx + fty * (3.4 + B), fy - ftx * (3.4 + B), atan2(fty, ftx));\n  dep(o.z);\n  col(C.dia, o.p);\n  // The rim glints at each stria; the raphe runs down the middle, broken at\n  // the central nodule.\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = -a; u \u003c= a; u += 0.6) at(u, sd * B * (1 - (u / a) ** 2) ** 0.75, 0.62 + 0.3 * cos(u * PI));\n  }\n  for (let u = -0.8 * a; u \u003c= 0.8 * a; u += 1.6) if (abs(u) > 1) at(u, 0, 0.6, dot);\n  at(0, 0, 0.8, dot);\n}\n\nfunction oscillatoria(o, i, t, OP) {\n  const n = o.L, hl = n / 2;\n  // The centre line, from the middle out to each end, bending as the ends wave.\n  for (const sd of [-1, 1]) {\n    let x = o.x, y = o.y;\n    for (let s = 1; s \u003c= hl; s++) {\n      const a = o.h + o.k * s * sd + 0.6 * sin(o.ph + sd) * (s / hl) ** 3;\n      (x += cos(a) * sd), (y += sin(a) * sd), (OP[(hl + s * sd) * 2] = x), (OP[(hl + s * sd) * 2 + 1] = y);\n    }\n  }\n  (OP[n] = o.x), (OP[n + 1] = o.y);\n  dep(o.z);\n  col(C.osc, o.p);\n  for (const e of [-1.2, 1.2]) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const x = OP[k * 2], y = OP[k * 2 + 1], dx = OP[k * 2 + 2] - x, dy = OP[k * 2 + 3] - y;\n      put(x - dy * e, y + dx * e, 0.6, dy * dy - dx * dx);\n    }\n  }\n  // Cross walls between the cells.\n  for (let k = 1; k \u003c n; k += 2) dot(OP[k * 2], OP[k * 2 + 1], 0.4);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  (S = P.S), (Q = P.Q), (ox = P.ox), (oy = P.oy), (foc = P.foc), (m1 = P.m1);\n  S.fill(0);\n  Q.fill(0);\n  const t = P.t, show = (L, f) => L.forEach((o, i) => o.p > 0.02 && f(o, i, t, P.OP));\n  thread();\n  show(P.vor, vorticella);\n  show(P.rot, rotifer);\n  show(P.dia, diatom);\n  show(P.osc, oscillatoria);\n  show(P.vol, volvox);\n  show(P.par, paramecium);\n  show(P.fla, (o) => {\n    const c = cos(o.h), s = sin(o.h);\n    dep(o.z);\n    col(o.k ? C.par : C.eug, o.p);\n    dot(o.x, o.y, 0.9);\n    dot(o.x - c * 1.2, o.y - s * 1.2, 0.55);\n    for (let k = 1; k \u003c= 3; k++) dot(o.x + c * (1 + k) - s * sin(t * 20 + k * 1.3) * 0.7, o.y + s * (1 + k) + c * sin(t * 20 + k * 1.3) * 0.7, 0.3);\n  });\n  show(P.det, (o) => {\n    dep(o.z);\n    col(o.k ? C.amb : C.gry, o.p);\n    for (const [dx, dy, s] of o.pts) dot(o.x + dx, o.y + dy, s);\n  });\n  col(C.par);\n  show(P.bac, (o) => (dep(o.z), dot(o.x, o.y, o.s * o.p)));\n  blur(Q, P.T);\n  // Light into LEDs, toned by the brightest channel so a green stays green,\n  // each lit LED with a grain of its own, and under it all the still grain\n  // of particles too small to resolve, below 24/255. The grain stays put:\n  // drawn anew every frame it was static, and it took the motion from 1.38\n  // to 2.31.\n  const m2 = P.m2, { V, L, QS } = P, c3 = K0;\n  for (let i = 0; i \u003c HW * HH; i++) QS[i] = Q[i * 3] + Q[i * 3 + 1] + Q[i * 3 + 2];\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      // The halo cell under the LED and its neighbours toward it, bilinear.\n      const o = p * 3, i = x >> 1, j = (y >> 1) * HW, i2 = cl(i + (x & 1) * 2 - 1, 0, HW - 1), j2 = cl((y >> 1) + (y & 1) * 2 - 1, 0, HH - 1) * HW;\n      const A = j + i, B = j + i2, c = j2 + i, e = j2 + i2, hl = QS[A] + QS[B] + QS[c] + QS[e] > 0, hh = h32(p, 7), sh = hh >>> 24;\n      for (let n = 0; n \u003c 3; n++) c3[n] = S[o + n] + (hl ? 0.17 * Q[A * 3 + n] + 0.056 * (Q[B * 3 + n] + Q[c * 3 + n]) + 0.019 * Q[e * 3 + n] : 0);\n      const mx = max(c3[0], c3[1], c3[2]), k = mx > 0.001 ? (LUT[min(1023, (mx * 256) | 0)] / mx) * (0.8 + sh / 640) : 0, l = (mx * k) / 255;\n      for (let n = 0, hb; n \u003c 3; n++) (hb = (hh >>> (n * 8)) & 255), (c3[n] = V[p] * (c3[n] * k * (1 + hb / 2200) + sh * (0.062 + (hb & 15) / 500) + m1 * FIELD[n]));\n      // Phase contrast: the field grey, each body darker than it, and a\n      // bright halo on the LEDs beside it.\n      if (m2) {\n        const dk = 1 - 0.8 * cl(l * 1.6, 0, 1), ha = max(0, max(L[p - (x > 0)], L[p + (x \u003c 63)], L[p - (y > 0) * W], L[p + (y \u003c 127) * W]) - l) * 160;\n        for (let n = 0; n \u003c 3; n++) c3[n] += m2 * (V[p] * (PHASE[n] * dk + ha + ((hh >>> (n * 8 + 3)) & 15)) - c3[n]);\n      }\n      L[p] = l;\n      display.setPixel(x, y, min(255, c3[0]) | 0, min(255, c3[1]) | 0, min(255, c3[2]) | 0);\n    }\n}\n","layer":{"id":"layer-dark-field","type":"code","name":"dark-field","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dark Field\n// Family:  microbe\n// Idea:    A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after dark-field and Rheinberg illumination in the light microscope\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1\n//\n// Knob 1: Light. At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos.\n// Knob 2: Speed. At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower.\n// Knob 3: Crowd. At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in.\n// Knob 4: Focus. Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit.\n// Buttons: K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.\n\nconst W = 64, H = 128, N = W * H, HW = 32, HH = 64;\nconst { min, max, floor, round, ceil, sin, cos, sqrt, exp, abs, PI, atan2 } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rr = (a, b) => a + (b - a) * rnd();\nfunction h32(a, b) {\n  let h = Math.imul(a ^ Math.imul(b, 0x27d4eb2d), 0x9e3779b1);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca77);\n  h ^= h >>> 13;\n  return (h ^ (h >>> 16)) >>> 0;\n}\n\n// Small things live on a torus a little larger than the view, so what leaves\n// one side comes back at the other out of sight. Big swimmers turn back\n// toward the middle near an edge.\nconst wrap = (o, m = 12) => ((o.x -= (W + 2 * m) * floor((o.x + m) / (W + 2 * m))), (o.y -= (H + 2 * m) * floor((o.y + m) / (H + 2 * m))));\nconst go = (o, v) => ((o.x += cos(o.h) * v), (o.y += sin(o.h) * v));\nfunction swim(o, d) {\n  if ((o.z += o.vz * d) > 1 || o.z \u003c -1) o.vz = -o.vz;\n  if (o.x > 8 && o.x \u003c 56 && o.y > 12 && o.y \u003c 116) return;\n  let e = atan2(64 - o.y, 32 - o.x) - o.h;\n  o.h += cl(e - TAU * round(e / TAU), -1, 1) * 1.2 * d;\n}\n// Colours each thing scatters in dark field.\nconst C = {\n  cell: [110, 255, 118], vrim: [175, 255, 165], dau: [64, 255, 92], par: [200, 222, 255], gran: [255, 236, 196], dia: [255, 194, 72],\n  vor: [222, 236, 255], rot: [255, 226, 186], eug: [132, 255, 140], amb: [255, 184, 100], gry: [212, 206, 198], wall: [205, 242, 182],\n  chl: [84, 236, 90], osc: [120, 250, 222],\n};\n// Rheinberg: an annular filter yellow at its sides and red top and bottom, so\n// an edge's colour follows the way it faces (q = nx² - ny²), on a blue field.\nconst RA = [255, 220, 46], RB = [255, 44, 40];\nconst RM = RA.map((v, i) => (v + RB[i]) / 2), RH = RA.map((v, i) => (v - RB[i]) / 2);\nconst FIELD = [4, 16, 60], PHASE = [74, 82, 72];\n\n// The algal thread, a Spirogyra filament across the lower third: its centre\n// at arc length s and its unit tangent.\nconst FL = 136;\nlet fx = 0, fy = 0, ftx = 1, fty = 0;\nfunction fil(s) {\n  const dy = -0.2 + 0.225 * cos(s * 0.045 + 0.3), l = sqrt(1 + dy * dy);\n  (fx = s - 30), (fy = 109 - 0.2 * s + 5 * sin(s * 0.045 + 0.3)), (ftx = 1 / l), (fty = dy / l);\n}\n\n// Light goes into a sharp buffer and, by how far the thing lies from the\n// focal plane, into a halo buffer at half resolution that is blurred and\n// spread back over the LEDs.\nlet S, Q, ox = 0, oy = 0, foc = 0, m1 = 0, wS = 1, wQ = 0, lastP = -1;\nconst K0 = [0, 0, 0], K1 = [0, 0, 0];\nfunction col(c, g = 1) {\n  for (let i = 0; i \u003c 3; i++) (K0[i] = (g * (c[i] + m1 * (RM[i] - c[i]))) / 255), (K1[i] = (g * m1 * RH[i]) / 255);\n}\nfunction dep(z) {\n  const b = max(0, abs(z - foc) - 0.15) * 2.4;\n  wS = max(0, 1 - b);\n  wQ = min(1, b) / (1 + 0.5 * max(0, b - 1));\n}\nfunction put(x, y, s, q = 0) {\n  const xi = round(x - ox), yi = round(y - oy), o = (yi * W + xi) * 3;\n  if (xi \u003c 0 || yi \u003c 0 || xi >= W || yi >= H || o === lastP) return;\n  lastP = o;\n  const r = s * (K0[0] + q * K1[0]), g = s * (K0[1] + q * K1[1]), b = s * (K0[2] + q * K1[2]), h = ((yi >> 1) * HW + (xi >> 1)) * 3;\n  if (wS) (S[o] += r * wS), (S[o + 1] += g * wS), (S[o + 2] += b * wS);\n  if (wQ) (Q[h] += r * wQ), (Q[h + 1] += g * wQ), (Q[h + 2] += b * wQ);\n}\n// A point: small things lose themselves out of focus, so less goes to the halo.\nfunction dot(x, y, s, q = 0) {\n  const k = wQ;\n  (lastP = -1), (wQ *= 0.4);\n  put(x, y, s, q);\n  wQ = k;\n}\nfunction line(x0, y0, x1, y1, s) {\n  const dx = x1 - x0, dy = y1 - y0, n = max(1, ceil(max(abs(dx), abs(dy)))), q = (dy * dy - dx * dx) / (dx * dx + dy * dy + 1e-6);\n  for (let k = 0; k \u003c n; k++) put(x0 + (dx * k) / n, y0 + (dy * k) / n, s, q);\n}\nfunction ring(cx, cy, r, s) {\n  lastP = -1;\n  for (let k = 0, n = max(8, ceil(TAU * r * 1.4)); k \u003c n; k++) {\n    const c = cos((k / n) * TAU), sn = sin((k / n) * TAU);\n    put(cx + r * c, cy + r * sn, s, c * c - sn * sn);\n  }\n}\n// A body's own frame: at(u, v) is u along its axis and v across it.\nlet FX = 0, FY = 0, FC = 1, FS = 0;\nconst frame = (x, y, a) => ((FX = x), (FY = y), (FC = cos(a)), (FS = sin(a)));\nconst at = (u, v, s, f = put, q = FS * FS - FC * FC) => f(FX + u * FC - v * FS, FY + u * FS + v * FC, s, q);\n// A three-wide box blur run twice, on the half-resolution grid.\nfunction blur(A, T) {\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [a, b, s, n] = pass & 1 ? [T, A, HW * 3, HH] : [A, T, 3, HW];\n    for (let y = 0, o = 0; y \u003c HH; y++)\n      for (let x = 0; x \u003c HW; x++)\n        for (let c = 0, i = pass & 1 ? y : x; c \u003c 3; c++, o++) b[o] = (a[o - (i > 0 ? s : 0)] + a[o] + a[o + (i \u003c n - 1 ? s : 0)]) / 3;\n  }\n}\n// Light to LED level: black below 0.1, a gain of 3, a soft shoulder above 0.8.\nconst LUT = Float32Array.from({ length: 1024 }, (_, i) => {\n  const v = max(0, i / 256 - 0.1) * 3;\n  return 255 * (v \u003c 0.8 ? v : 1 - 0.2 * exp(-(v - 0.8) / 0.2));\n});\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), side = () => (rnd() \u003c 0.5 ? -1 : 1), A = (n, f) => Array.from({ length: n }, (_, i) => ({ x: rr(-12, 76), y: rr(-12, 140), h: rnd() * TAU, ...f(i) }));\n  const P = (params.s = { t: 0, S: F(N * 3), Q: F(HW * HH * 3), T: F(HW * HH * 3), QS: F(HW * HH), L: F(N), V: F(N), OP: F(140), nx: 0, ny: 0, ex: 0, ey: 0, nt: 3.2, ja: 0, jt: 9, jx: 0, jy: 0, s1: rnd() * 7, s2: rnd() * 7 });\n  // The round field stop of the eyepiece clips the panel's two ends.\n  for (let p = 0; p \u003c N; p++) P.V[p] = sm(67.5, 62, sqrt(((p & 63) - 31.5) ** 2 + (((p >> 6) - 63.5) * 1.02) ** 2));\n  // Volvox: cells on a sphere (a Fibonacci spiral) and daughter colonies inside.\n  P.vol = [[0.18, 12, 21], [-0.8, 9, 57], [0.2, 9.5, 112], [0.62, 11, 80]].map(([z, R, y]) => {\n    const n = round(0.7 * R * R), pts = F(n * 3), d = [];\n    for (let k = 0; k \u003c n; k++) {\n      const yv = 1 - (2 * k + 1) / n, q = sqrt(1 - yv * yv);\n      pts.set([cos(k * 2.4) * q, yv, sin(k * 2.4) * q], k * 3);\n    }\n    for (let k = 0, m = 3 + rnd() * 3; k \u003c m; k++) {\n      const a = rnd() * TAU, b = rr(-1, 1), r = rr(0.2, 0.52), q = sqrt(1 - b * b) * r;\n      d.push([cos(a) * q, b * r, sin(a) * q, rr(0.17, 0.25) * R]);\n    }\n    return { x: rr(16, 48), y: y + rr(-9, 9), z, vz: rr(-0.025, 0.025), R, h: rnd() * TAU, v: rr(1.6, 2.8), ph: 0, w: rr(0.4, 0.7) * side(), pts, d };\n  });\n  // Paramecia: slippers with an oral groove that swaps sides as they spin.\n  P.par = [[0.05, 42], [0.14, 115], [-0.12, 70], [0.75, 20], [-0.85, 92]].map(([z, y]) => ({\n    x: rr(14, 50), y: y + rr(-10, 10), z, vz: rr(-0.05, 0.05), h: rnd() * TAU, v: rr(8, 11), a: rr(11.5, 13.5), B: rr(4.4, 5.2), spin: 0, ws: rr(1.6, 2.4),\n    rev: 0, tt: rr(3, 8), cy: 0, cv: [rnd(), rnd()],\n  }));\n  // Diatoms: two glide along the thread, two on floating debris, the rest on\n  // the slide's glass, deeper down.\n  P.dia = A(9, (i) => ({ z: i \u003c 2 ? 0 : i \u003c 4 ? rr(-0.05, 0.2) : rr(0.75, 0.92), a: rr(6, 9), B: rr(2.1, 2.6), go: rnd() \u003c 0.6, tt: rr(0.5, 3), dir: side(), v: rr(3.5, 6), f: i \u003c 2 ? 44 + 34 * i + rr(-6, 6) : -1 }));\n  // Oscillatoria: blue-green threads that glide along their length and wave both ends.\n  P.osc = [[18, 17, -0.04], [46, 40, 0.1], [30, 117, 0.3]].map(([x, y, z], i) => ({ x: x + rr(-9, 9), y: y + rr(-9, 9), z, h: rr(-0.6, 0.6) + (i & 1) * PI, L: 2 * round(rr(17, 24)), k: rr(-0.015, 0.015), ph: rnd() * 7, v: rr(1.2, 2.2) }));\n  // Vorticella bells on the thread: anchor, lean, stalk length. Bell 0 snaps first.\n  P.vor = [[46, -0.22, 46], [50, 0.16, 36], [41, -0.55, 30], [56, 0.45, 42], [36, -0.05, 52], [62, 0.1, 28], [30, -0.4, 40]].map(([s, a, L], i) => ({ s, a: a - PI / 2, L, ext: 1, st: 0, tt: i ? rr(9, 18) : 4.1, cp: 0 }));\n  P.rot = [[84, -2.05], [16, -1.15]].map(([s, a]) => ({ s, a, L: 21, ext: 1, st: 0, tt: rr(7, 12), cp: 0, sw: rnd() * 7 }));\n  P.fla = A(44, (i) => ({ z: rr(-0.9, 0.9), v: rr(6, 18), tt: 0, k: i % 3, ph: rnd() * 7 }));\n  // Detritus: grains and glittering flakes, amber plant matter or grey grit,\n  // a third of it settled on the slide. Bacteria: points crowding near the\n  // thread they feed on, most jiggling, some swimming.\n  P.det = A(48, (i) => {\n    const pts = [], m = 1 + floor(rnd() * rnd() * 9), e = m > 3 ? 2 : 1;\n    for (let k = 0; k \u003c m; k++) pts.push([e * round(rr(-1.5, 1.5)), e * round(rr(-1.5, 1.5)), rr(0.35, 0.8)]);\n    return { z: i % 3 ? rr(-1, 1) * rnd() : rr(0.8, 1), pts, k: rnd() \u003c 0.55 };\n  });\n  P.bac = A(580, () => ({ z: rr(-1, 1) * rnd(), s: rr(0.4, 0.8), m: rnd() \u003c 0.3 }));\n}\n\n// Knocking the slide.\nfunction knock(P) {\n  const a = rnd() * TAU;\n  (P.ja = 3.5), (P.jt = 0), (P.jx = cos(a)), (P.jy = sin(a));\n  for (const o of [...P.vor, ...P.rot]) if (o.st !== 1) o.st = 1;\n  for (const o of P.par) (o.rev = 0.6), (o.tr = rr(-3, 3));\n  for (const o of [...P.vol, ...P.fla, ...P.det]) (o.x += P.jx * rr(1, 4)), (o.y += P.jy * rr(1, 4));\n}\n\n// A stalk or body that waits and snaps in to lo. It holds there, then stretches out again.\nfunction cycle(o, d, down, lo, up, hold, wait) {\n  if (o.st === 0 && (o.tt -= d) \u003c 0) o.st = 1;\n  else if (o.st === 1 && (o.ext -= d * down) \u003c= lo) (o.ext = lo), (o.st = 2), (o.tt = hold * rr(1, 2));\n  else if (o.st === 2 && (o.tt -= d) \u003c 0) o.st = 3;\n  else if (o.st === 3 && (o.ext += d * up * (1.12 - o.ext)) >= 1) (o.ext = 1), (o.st = 0), (o.tt = wait * rr(1, 2.2));\n}\n\nfunction life(P, d, crowd, first) {\n  // Each kind fades its members in and out by the Crowd knob.\n  const each = (L, k, f) =>\n    L.forEach((o, i) => {\n      const tg = i \u003c k ? 1 : 0;\n      o.p = first ? tg : o.p + (tg - o.p) * min(1, d * 2.5);\n      f(o, i);\n    });\n  const t = P.t;\n  each(P.vol, 3 + round(crowd), (o, i) => {\n    o.h += sin(t * 0.21 + i * 2) * 0.15 * d;\n    go(o, o.v * d);\n    o.ph += o.w * d;\n    swim(o, d);\n  });\n  each(P.par, 3 + round(2 * crowd), (o, i) => {\n    o.spin += o.ws * d;\n    if (o.rev > 0) (o.rev -= d), (o.h += o.tr * d), go(o, -o.v * 0.5 * d);\n    else {\n      o.h += sin(t * 0.5 + i * 2.3) * 0.25 * d;\n      if ((o.tt -= d) \u003c 0) (o.rev = 0.7), (o.tr = rr(-3, 3)), (o.tt = rr(4, 9));\n      go(o, o.v * d);\n    }\n    o.cy += d * 0.7;\n    (o.cv[0] = (o.cv[0] + d * 0.24) % 1), (o.cv[1] = (o.cv[1] + d * 0.21) % 1);\n    swim(o, d);\n  });\n  // Diatoms glide on their raphe and stop. Then they set off again, often backwards.\n  each(P.dia, 5 + round(4 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.go = !o.go), (o.tt = o.go ? rr(2, 4) : rr(0.8, 2.2)), o.go && rnd() \u003c 0.4 && (o.dir = -o.dir);\n    const v = o.go ? o.v * o.dir * d * sm(0, 0.4, o.tt) : 0;\n    if (o.f \u003c 0) go(o, v), wrap(o);\n    else if ((o.f += v) \u003c 8 || o.f > FL - 8) (o.dir = -o.dir), (o.f = cl(o.f, 8, FL - 8));\n  });\n  // Oscillatoria reverse when their front end runs out toward an edge.\n  each(P.osc, 2 + round(crowd), (o) => {\n    o.ph += d * 1.4;\n    go(o, o.v * d);\n    if ((o.x \u003c 6 || o.x > 58 || o.y \u003c 8 || o.y > 120) && cos(o.h) * (32 - o.x) + sin(o.h) * (64 - o.y) \u003c 0) o.h += PI;\n  });\n  each(P.vor, 5 + round(2 * crowd), (b) => ((b.cp += d * 7), cycle(b, d, 14, 0.13, 0.38, 0.5, 8)));\n  each(P.rot, 1 + round(crowd), (r) => ((r.cp += d * 9), cycle(r, d, 4, 0.5, 1.3, 1, 6)));\n  each(P.fla, 20 + round(24 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.h += rr(-2, 2)), (o.v = rr(5, 20)), (o.tt = rr(0.25, 1.4));\n    o.h += sin(o.ph + t * 3) * d * 1.2;\n    go(o, o.v * d);\n    wrap(o);\n  });\n  // The slow current carries grit and bacteria up and to the right, fastest\n  // midway between the coverslip (z -1) and the slide (z 1).\n  const j = sqrt(d * 30);\n  for (const [L, k, jj] of [[P.det, 28 + round(20 * crowd), 0.06], [P.bac, 460 + round(120 * crowd), 0.5]])\n    each(L, k, (o) => {\n      const f = 1 - o.z * o.z;\n      o.x += 1.7 * f * d + (rnd() - 0.5) * jj * j;\n      o.y -= f * d + (rnd() - 0.5) * jj * j;\n      if (o.m) rnd() \u003c d * 0.8 && (o.h += rr(-2.5, 2.5)), go(o, 9 * d);\n      wrap(o);\n    });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = (rd * cl(k[1], 0.2, 3)) / 2, l = cl(k[0], 0, 1);\n  (P.m1 = cl(l * 2, 0, 1)), (P.m2 = cl(l * 2 - 1, 0, 1)), (P.foc = cl(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) knock(P);\n  const t = (P.t += d);\n  // The stage is never quite still: a slow creep, a nudge now and then, and\n  // the shake of a knock.\n  if ((P.nt -= d) \u003c 0) (P.nt = rr(6, 11)), (P.nx = cl(P.nx + rr(-6, 6), -5, 5)), (P.ny = cl(P.ny + rr(-8, 8), -7, 7));\n  const e = min(1, d * 3), sh = P.ja * exp(-(P.jt += rd) * 5) * sin(P.jt * 40);\n  (P.ex += (P.nx - P.ex) * e), (P.ey += (P.ny - P.ey) * e);\n  P.ox = 2.5 * sin(t * 0.13 + P.s1) + 1.2 * sin(t * 0.31 + 2) + P.ex + sh * P.jx;\n  P.oy = 3.5 * sin(t * 0.09 + P.s2) + 1.5 * sin(t * 0.23) + P.ey + sh * P.jy;\n  life(P, d, cl(k[2], 0, 1), !P.init);\n  P.init = true;\n}\n\nfunction thread() {\n  dep(0);\n  col(C.wall);\n  for (const sd of [-2.6, 2.6]) {\n    lastP = -1;\n    for (let s = 0; s \u003c= FL; s += 0.7) fil(s), put(fx - fty * sd, fy + ftx * sd, 0.62, fty * fty - ftx * ftx);\n  }\n  for (let s = 5; s \u003c FL; s += 9) fil(s), line(fx - fty * 1.6, fy + ftx * 1.6, fx + fty * 1.6, fy - ftx * 1.6, 0.3);\n  // The chloroplast, a green ribbon winding round inside the cell wall.\n  col(C.chl);\n  for (let s = 0; s \u003c= FL; s += 1.3) fil(s), dot(fx - fty * 1.7 * sin(s * 0.5), fy + ftx * 1.7 * sin(s * 0.5), 0.5 + 0.25 * cos(s * 0.5));\n}\n\n// Frames a thing standing on the thread at arc length s, leaning by a.\nfunction foot(s, a) {\n  fil(s);\n  frame(fx + fty * 2.6, fy - ftx * 2.6, a);\n}\n\nfunction vorticella(b, i, t) {\n  foot(b.s, b.a + 0.07 * sin(t * 0.6 + i * 1.7));\n  const L = b.L * b.ext, amp = 2 * (1 - b.ext) ** 0.6, bend = 3 * sin(t * 0.45 + i) * b.ext, m = ceil(L * 1.5) + 4;\n  dep(0);\n  col(C.par, b.p);\n  // The stalk, straight while it feeds and a tight coil when it has snapped.\n  let x = FX, y = FY;\n  for (let j = 1; j \u003c= m; j++) {\n    const u = (j / m) * L, v = bend * sin((PI * j) / m) + amp * sin((j / m) * 6 * TAU), X = FX + u * FC - v * FS, Y = FY + u * FS + v * FC;\n    line(x, y, X, Y, 0.5);\n    (x = X), (y = Y);\n  }\n  // The bell, a cup that closes to a ball when the stalk snaps; the cilia\n  // whirl round its lip while it feeds.\n  frame(x, y, atan2(FS, FC));\n  const open = sm(0.55, 0.95, b.ext), lb = 6 + 2 * open;\n  const hwOf = (u) => {\n    const ball = 3.1 * sqrt(max(0, 1 - ((2 * u) / lb - 1) ** 2));\n    return ball + (0.8 + 4 * (u / lb) ** 0.9 - ball) * open;\n  };\n  col(C.vor, b.p);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= lb; u += 0.5) at(u, hwOf(u) * sd, 0.75);\n  }\n  for (let k = -1; k \u003c 2; k++) at(4.1 + k * 1.6, k * 1.2, 0.4, dot);\n  const hw = hwOf(lb);\n  if (open \u003c 0.1) return;\n  lastP = -1;\n  for (let k = 0; k \u003c 24; k++) at(lb + 1.3 * sin((k / 24) * TAU), hw * cos((k / 24) * TAU), 0.55 * open);\n  for (let k = 0; k \u003c 9; k++) {\n    const th = (k / 9) * TAU + b.cp, s = sin(th);\n    at(lb + 2.3 + 0.9 * s, (hw + 0.9) * cos(th), (s > 0 ? 0.85 : 0.35) * open, dot);\n  }\n}\n\nfunction rotifer(r, i, t) {\n  foot(r.s, r.a + 0.22 * sin(t * 0.4 + r.sw));\n  const L = r.L * r.ext, g = r.p, cr = sm(0.82, 0.97, r.ext);\n  dep(0);\n  col(C.rot, g);\n  // A foot of three telescoping joints, a swollen trunk, a neck, the head,\n  // and inside it the jaws of the mastax, chewing.\n  const hwOf = (u) => (u \u003c 0.36 ? 0.9 + 0.4 * floor(u / 0.12) : u \u003c 0.8 ? 2.1 + 2.5 * sin((PI * (u - 0.36)) / 0.44) : u \u003c 0.88 ? 2 : 2.9);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= L; u += 0.5) at(u, hwOf(u / L) * sd, 0.75);\n    at(-1.2, sd * 1.3, 0.7, dot);\n    at(0.72 * L, sd * (0.6 + 0.5 * sin(r.cp * 0.45)), 0.85, dot);\n  }\n  for (let k = 0; k \u003c 7; k++) at(L * (0.42 + 0.05 * k), 1.8 * sin(k * 2.4 + t * 0.6), 0.38 + 0.2 * sin(k * 1.7 + t * 2), dot);\n  // The crown: two discs of cilia whirling the opposite way to each other.\n  lastP = -1;\n  if (cr \u003c 0.02) for (let v = -2.8; v \u003c= 2.8; v += 0.7) at(L, v, 0.6);\n  else\n    for (const sd of [-1, 1]) {\n      const cx = FX + FC * (L + 1.8) - FS * sd * 2.9, cy = FY + FS * (L + 1.8) + FC * sd * 2.9;\n      ring(cx, cy, 2.4 * cr, 0.3 * cr);\n      for (let k = 0; k \u003c 10; k++) {\n        const th = (k / 10) * TAU + sd * r.cp;\n        dot(cx + cos(th) * 3.2 * cr, cy + sin(th) * 3.2 * cr, (0.55 + 0.45 * sin(th * 3 + t * 5)) * cr * g);\n      }\n    }\n}\n\nfunction volvox(o) {\n  const { x, y, R, pts } = o, g = o.p, ax = cos(o.h), ay = sin(o.h), c = cos(o.ph), s = sin(o.ph), c1 = 1 - c;\n  // Rolling about its swimming axis, which lies in the view plane (Rodrigues).\n  const rot = (px, py, pz, k) => {\n    const kd = (ax * px + ay * py) * c1, u = px * c + ay * pz * s + ax * kd, v = py * c - ax * pz * s + ay * kd;\n    return k ? dot(x + R * u, y + R * v, pz * c + (ax * py - ay * px) * s > 0 ? 0.85 : 0.5, u * u - v * v) : frame(x + R * u, y + R * v, 0);\n  };\n  dep(o.z);\n  col(C.cell, g);\n  for (let k = 0; k \u003c pts.length; k += 3) rot(pts[k], pts[k + 1], pts[k + 2], 1);\n  col(C.vrim, g);\n  ring(x, y, R + 0.4, 0.55);\n  // The faint diffraction fringe outside the rim.\n  ring(x, y, R + 2.6, 0.3);\n  col(C.dau, g);\n  for (const [px, py, pz, r] of o.d) rot(px, py, pz, 0), ring(FX, FY, r, 0.95), dot(FX, FY, 0.7);\n}\n\nfunction paramecium(o, i, t) {\n  const { a, B } = o, gs = cos(o.spin), n = ceil(TAU * sqrt((a * a + B * B) / 2) * 1.3);\n  frame(o.x, o.y, o.h);\n  dep(o.z);\n  col(C.par, o.p);\n  // Outline and cilia: a metachronal wave runs back along the body.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const th = (k / n) * TAU, ct = cos(th), st = sin(th), bw = B * (1 + 0.16 * ct - 0.08 * ct * ct), wv = sin(th * 9 - t * 10);\n      let nu = ct / a, nv = st / bw, nl = sqrt(nu * nu + nv * nv);\n      const nx = nu * FC - nv * FS, ny = nu * FS + nv * FC, q = (nx * nx - ny * ny) / (nl * nl);\n      (nu = (1.5 * nu) / nl), (nv = (1.5 * nv) / nl);\n      if (!pass) at(a * ct, bw * st, 0.62 + 0.25 * wv, put, q);\n      else if (wv > 0.2) at(a * ct + nu, bw * st + nv, 0.6 * wv, dot, q);\n    }\n  }\n  // The oral groove, a bright furrow from the front to the middle that swaps\n  // sides as the cell spins on its long axis.\n  lastP = -1;\n  for (let u = 0.05; u \u003c 0.62; u += 0.06) at(u * a, gs * B * (0.3 + 0.75 * u) * (u \u003c 0.5 ? 1 : 1 - (u - 0.5) * 6), 0.5 * abs(gs) + 0.12, put, 0);\n  // Granules and food vacuoles carried round by cyclosis, and the two\n  // contractile vacuoles filling and emptying.\n  col(C.gran, o.p);\n  for (let k = 0; k \u003c 23; k++) {\n    const th = k * 2.4 + o.cy * (k % 3 ? 0.6 : 1), r = 0.25 + 0.6 * ((k * 0.618) % 1);\n    at(0.8 * a * r * cos(th), 0.62 * B * r * sin(th), k % 3 ? 0.36 + 0.16 * sin(t * 3 + k) : 0.6, dot, 0);\n  }\n  col(C.par, o.p);\n  o.cv.forEach((c, j) => c > 0.31 && c \u003c 0.85 && ring(FX + (j ? -0.55 : 0.55) * a * FC, FY + (j ? -0.55 : 0.55) * a * FS, 1.6 * c, 0.55));\n}\n\nfunction diatom(o) {\n  const { a, B } = o;\n  if (o.f \u003c 0) frame(o.x, o.y, o.h);\n  else fil(o.f), frame(fx + fty * (3.4 + B), fy - ftx * (3.4 + B), atan2(fty, ftx));\n  dep(o.z);\n  col(C.dia, o.p);\n  // The rim glints at each stria; the raphe runs down the middle, broken at\n  // the central nodule.\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = -a; u \u003c= a; u += 0.6) at(u, sd * B * (1 - (u / a) ** 2) ** 0.75, 0.62 + 0.3 * cos(u * PI));\n  }\n  for (let u = -0.8 * a; u \u003c= 0.8 * a; u += 1.6) if (abs(u) > 1) at(u, 0, 0.6, dot);\n  at(0, 0, 0.8, dot);\n}\n\nfunction oscillatoria(o, i, t, OP) {\n  const n = o.L, hl = n / 2;\n  // The centre line, from the middle out to each end, bending as the ends wave.\n  for (const sd of [-1, 1]) {\n    let x = o.x, y = o.y;\n    for (let s = 1; s \u003c= hl; s++) {\n      const a = o.h + o.k * s * sd + 0.6 * sin(o.ph + sd) * (s / hl) ** 3;\n      (x += cos(a) * sd), (y += sin(a) * sd), (OP[(hl + s * sd) * 2] = x), (OP[(hl + s * sd) * 2 + 1] = y);\n    }\n  }\n  (OP[n] = o.x), (OP[n + 1] = o.y);\n  dep(o.z);\n  col(C.osc, o.p);\n  for (const e of [-1.2, 1.2]) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const x = OP[k * 2], y = OP[k * 2 + 1], dx = OP[k * 2 + 2] - x, dy = OP[k * 2 + 3] - y;\n      put(x - dy * e, y + dx * e, 0.6, dy * dy - dx * dx);\n    }\n  }\n  // Cross walls between the cells.\n  for (let k = 1; k \u003c n; k += 2) dot(OP[k * 2], OP[k * 2 + 1], 0.4);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  (S = P.S), (Q = P.Q), (ox = P.ox), (oy = P.oy), (foc = P.foc), (m1 = P.m1);\n  S.fill(0);\n  Q.fill(0);\n  const t = P.t, show = (L, f) => L.forEach((o, i) => o.p > 0.02 && f(o, i, t, P.OP));\n  thread();\n  show(P.vor, vorticella);\n  show(P.rot, rotifer);\n  show(P.dia, diatom);\n  show(P.osc, oscillatoria);\n  show(P.vol, volvox);\n  show(P.par, paramecium);\n  show(P.fla, (o) => {\n    const c = cos(o.h), s = sin(o.h);\n    dep(o.z);\n    col(o.k ? C.par : C.eug, o.p);\n    dot(o.x, o.y, 0.9);\n    dot(o.x - c * 1.2, o.y - s * 1.2, 0.55);\n    for (let k = 1; k \u003c= 3; k++) dot(o.x + c * (1 + k) - s * sin(t * 20 + k * 1.3) * 0.7, o.y + s * (1 + k) + c * sin(t * 20 + k * 1.3) * 0.7, 0.3);\n  });\n  show(P.det, (o) => {\n    dep(o.z);\n    col(o.k ? C.amb : C.gry, o.p);\n    for (const [dx, dy, s] of o.pts) dot(o.x + dx, o.y + dy, s);\n  });\n  col(C.par);\n  show(P.bac, (o) => (dep(o.z), dot(o.x, o.y, o.s * o.p)));\n  blur(Q, P.T);\n  // Light into LEDs, toned by the brightest channel so a green stays green,\n  // each lit LED with a grain of its own, and under it all the still grain\n  // of particles too small to resolve, below 24/255. The grain stays put:\n  // drawn anew every frame it was static, and it took the motion from 1.38\n  // to 2.31.\n  const m2 = P.m2, { V, L, QS } = P, c3 = K0;\n  for (let i = 0; i \u003c HW * HH; i++) QS[i] = Q[i * 3] + Q[i * 3 + 1] + Q[i * 3 + 2];\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      // The halo cell under the LED and its neighbours toward it, bilinear.\n      const o = p * 3, i = x >> 1, j = (y >> 1) * HW, i2 = cl(i + (x & 1) * 2 - 1, 0, HW - 1), j2 = cl((y >> 1) + (y & 1) * 2 - 1, 0, HH - 1) * HW;\n      const A = j + i, B = j + i2, c = j2 + i, e = j2 + i2, hl = QS[A] + QS[B] + QS[c] + QS[e] > 0, hh = h32(p, 7), sh = hh >>> 24;\n      for (let n = 0; n \u003c 3; n++) c3[n] = S[o + n] + (hl ? 0.17 * Q[A * 3 + n] + 0.056 * (Q[B * 3 + n] + Q[c * 3 + n]) + 0.019 * Q[e * 3 + n] : 0);\n      const mx = max(c3[0], c3[1], c3[2]), k = mx > 0.001 ? (LUT[min(1023, (mx * 256) | 0)] / mx) * (0.8 + sh / 640) : 0, l = (mx * k) / 255;\n      for (let n = 0, hb; n \u003c 3; n++) (hb = (hh >>> (n * 8)) & 255), (c3[n] = V[p] * (c3[n] * k * (1 + hb / 2200) + sh * (0.062 + (hb & 15) / 500) + m1 * FIELD[n]));\n      // Phase contrast: the field grey, each body darker than it, and a\n      // bright halo on the LEDs beside it.\n      if (m2) {\n        const dk = 1 - 0.8 * cl(l * 1.6, 0, 1), ha = max(0, max(L[p - (x > 0)], L[p + (x \u003c 63)], L[p - (y > 0) * W], L[p + (y \u003c 127) * W]) - l) * 160;\n        for (let n = 0; n \u003c 3; n++) c3[n] += m2 * (V[p] * (PHASE[n] * dk + ha + ((hh >>> (n * 8 + 3)) & 15)) - c3[n]);\n      }\n      L[p] = l;\n      display.setPixel(x, y, min(255, c3[0]) | 0, min(255, c3[1]) | 0, min(255, c3[2]) | 0);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower."},{"name":"Crowd","min":0,"max":1,"about":"At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in."},{"name":"Focus","min":-1,"max":1,"about":"Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit."}],"start":[0,2,0,0.06],"measures":{"motion":1.3814,"detail":0.2217,"edges":0.4142,"complexity":2.0815,"coverage":0.2631,"colour":0.1726,"drift":0.1456},"knobResponse":[0.5278,0.261,0.0556,0.1832]},{"slug":"datamosh","title":"Datamosh","family":"glitch","round":15,"note":"키프레임을 잃은 영상이에요. 노을과 격자 바닥이 제 움직임대로 블록째 밀려 녹아 흐르고, 장면이 바뀌면 새 그림이 옛 움직임을 따라 부서져요.","idea":"A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.","buttons":"K1 tap drops a whole clean keyframe, which then melts.","code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","layer":{"id":"layer-datamosh","type":"code","name":"datamosh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second."},{"name":"Block","min":8,"max":16,"about":"The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame."},{"name":"Mosh","min":0,"max":1,"about":"How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1."}],"start":[0,2,8,0.06],"measures":{"motion":0.3661,"detail":0.0404,"edges":0.6611,"complexity":0.3641,"coverage":1,"colour":0.4625,"drift":0.1386},"knobResponse":[0.3092,0.1339,0.1128,0.1158]},{"slug":"day-cycle","title":"Day and Night","family":"weather","round":2,"note":"호수 위 작은 집이 하루를 지켜봐요. 해가 언덕 뒤로 지면 하늘이 노을을 지나 별과 달로 넘어가고 창에 하나씩 불이 켜져요.","idea":"A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","layer":{"id":"layer-day-cycle","type":"code","name":"day-cycle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof."},{"name":"Time","min":0.2,"max":8,"about":"How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts."},{"name":"Clouds","min":0.15,"max":1,"about":"From a few small clouds to a sky that is nearly overcast."},{"name":"Sun path","min":-1,"max":1,"about":"How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.0549,"detail":0.0184,"edges":0.5425,"complexity":0.6376,"coverage":1,"colour":0.3226,"drift":0.2553},"knobResponse":[0.2229,0.2763,0.1419,0.1052]},{"slug":"domain-warp","title":"Domain Warp","family":"noise","round":1,"note":"노이즈가 제 자신을 비틀어서 어두운 쪽빛 돌에 금빛 결이 흘러요. 대리석을 붓는 것처럼 천천히 뒤섞여요.","idea":"Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n// @ramp oklab wrap 0:#05030f 0.16:#0e1450 0.22:#2a7ac0 0.27:#100c44 0.5:#2c1478 0.62:#c83888 0.68:#ffd890 0.74:#ff6a3a 0.84:#4a0a3a 1:#05030f\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","layer":{"id":"layer-domain-warp","type":"code","name":"domain-warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#05030f","alpha":1},{"position":0.16,"color":"#0e1450","alpha":1},{"position":0.22,"color":"#2a7ac0","alpha":1},{"position":0.27,"color":"#100c44","alpha":1},{"position":0.5,"color":"#2c1478","alpha":1},{"position":0.62,"color":"#c83888","alpha":1},{"position":0.68,"color":"#ffd890","alpha":1},{"position":0.74,"color":"#ff6a3a","alpha":1},{"position":0.84,"color":"#4a0a3a","alpha":1},{"position":1,"color":"#05030f","alpha":1}],"mode":"oklab","wrap":true},"recolor":false,"knobsAnnotationRaw":"// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Cycle","min":0,"max":1,"about":"Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back."},{"name":"Speed","min":0,"max":5,"about":"How fast the marble pours; 0 holds it still."},{"name":"Warp","min":1,"max":6,"about":"How hard the noise is folded into itself, from loose marble to tight swirls."},{"name":"Zoom","min":0.035,"max":0.095,"about":"Size of the stone; low is a few big swirls, high is fine grain."}],"start":[0,2,1,0.06],"measures":{"motion":0.2428,"detail":0.0806,"edges":0.2816,"complexity":1.8069,"coverage":0.9604,"colour":0.3247,"drift":0.15},"knobResponse":[0.3352,0.1929,0.1917,0.2107]},{"slug":"domino-run","title":"Domino Run","family":"physics","round":16,"note":"여섯 선반과 나선 계단 다섯을 잇는 도미노 마흔 개를 손끝이 밀면, 물결이 제 물리 빠르기로 내려가고 낮은 램프 빛을 받던 상아색 면이 쓰러지는 대로 어두워져요. 다 쓰러지면 필름이 거꾸로 돌아 줄을 다시 세워요. 줄이 달리는 동안 K1 을 누르면 아직 서 있는 선반 머리에서 두 번째 물결이 떠나요.","idea":"A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.","buttons":"K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.","code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","layer":{"id":"layer-domino-run","type":"code","name":"domino-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed."},{"name":"Spacing","min":-1,"max":1,"about":"The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall."},{"name":"Angle","min":-1,"max":1,"about":"Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves."}],"start":[0,2,0,0.06],"measures":{"motion":0.1541,"detail":0.079,"edges":0.5891,"complexity":0.4474,"coverage":0.2699,"colour":0.0868,"drift":0.2609},"knobResponse":[0.2214,0.1713,0.2211,0.2694]},{"slug":"dragon","title":"Dragon Fold","family":"fractal","round":2,"note":"종이띠를 반으로 접기를 열 번 되풀이하면 헤이웨이 드래곤이 돼요. 세대마다 선 전체의 복사본이 끝점을 축으로 90도 돌아 나오고, 다 접히면 거꾸로 닫혀요.","idea":"A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.","buttons":"K1 tap turns the folding round, so it closes up or opens out from where it is.","code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-dragon","type":"code","name":"dragon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour that runs along the line starts."},{"name":"Fold Speed","min":0.5,"max":6,"about":"How quickly one generation swings out of the last."},{"name":"Generations","min":8,"max":10,"about":"How many folds before it holds, from 256 segments to 1024."},{"name":"Dragons","min":1,"max":4,"about":"One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point."}],"start":[0,2,8,1],"measures":{"motion":0.7649,"detail":0.0834,"edges":0.9552,"complexity":0.1947,"coverage":0.1168,"colour":0.2214,"drift":0.0797},"knobResponse":[0.0573,0.0725,0.0977,0.1563]},{"slug":"dripstone","title":"Dripstone","family":"mineral","round":19,"note":"석회동굴 단면이 128줄을 다 써요. 종유석 끝에서 물방울이 부풀다 떨어져 석순을 한 방울씩 키우고 웅덩이에 동심원을 그리는 사이, 쇼케이브 조명이 청록과 보라, 흰빛으로 번갈아 바뀌고 동굴 탐험가의 헤드램프가 옆으로 훑고 지나가요.","idea":"A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","layer":{"id":"layer-dripstone","type":"code","name":"dripstone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row."},{"name":"Age","min":0,"max":1,"about":"How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool."},{"name":"Damp","min":0,"max":1,"about":"How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall."}],"start":[0,2,0,0.06],"measures":{"motion":0.113,"detail":0.0548,"edges":0.2063,"complexity":2.555,"coverage":0.9702,"colour":0.163,"drift":0.1125},"knobResponse":[0.0618,0.1355,0.0996,0.0869]},{"slug":"drop-tower","title":"Drop Tower","family":"fair","round":18,"note":"밤 놀이공원의 드롭 타워가 128줄을 다 써요. 링에 탄 여덟 사람을 꼭대기까지 끌어올려 매달아 두었다가 탑 높이에 맞춘 중력으로 떨어뜨리고, 자석 브레이크에서 번쩍이며 세워요. K1 을 누르면 오르는 중에도 바로 떨어뜨려요.","idea":"A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.","buttons":"K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.","code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","layer":{"id":"layer-drop-tower","type":"code","name":"drop-tower","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Height","min":50,"max":110,"about":"The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m."},{"name":"Thrill","min":0,"max":1,"about":"How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g."}],"start":[0,2,50,0.06],"measures":{"motion":0.437,"detail":0.0668,"edges":0.5494,"complexity":1.5352,"coverage":0.8276,"colour":0.1705,"drift":0.1633},"knobResponse":[0.0483,0.0875,0.0709,0.0567]},{"slug":"drying-mud","title":"Drying Mud","family":"cells","round":16,"note":"젖은 흙이 마르며 금이 직각으로 갈라져 T 자로 만나고, 오래된 금은 넓고 깊어지며 조각 테두리가 밝게 말려 올라가요. K1 을 누르면 소나기가 와서 금이 물에 잠겨 닫히고 흙이 다시 말라요.","idea":"Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.","buttons":"K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.","code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","layer":{"id":"layer-drying-mud","type":"code","name":"drying-mud","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Clay","min":0,"max":1,"about":"What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay."},{"name":"Sun","min":0.3,"max":3,"about":"How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider."},{"name":"Cracks","min":0,"max":1,"about":"How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across."},{"name":"Curl","min":0,"max":1,"about":"How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip."}],"start":[0,2,0,0.06],"measures":{"motion":0.0652,"detail":0.0775,"edges":0.2652,"complexity":2.4007,"coverage":0.991,"colour":0.1598,"drift":0.1523},"knobResponse":[0.1914,0.2254,0.1497,0.0607]},{"slug":"dust-motes","title":"Dust Motes","family":"particle","round":19,"note":"어두운 방, 높은 창에서 내려온 햇살 한 줄기 안에서만 먼지가 반짝이며 떠돌고, 커튼이 흔들리면 빛줄기가 좁아졌다 넓어져요. K1 을 누르면 사람이 방을 가로질러 빛줄기에 그림자를 내고, 발치에서 먼지가 빛 속으로 피어올라요.","idea":"A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.","buttons":"K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.","code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","layer":{"id":"layer-dust-motes","type":"code","name":"dust-motes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten."},{"name":"Dust","min":1,"max":4,"about":"How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself."},{"name":"Draft","min":-1,"max":1,"about":"Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade."}],"start":[0,2,1,0.06],"measures":{"motion":0.0301,"detail":0.0213,"edges":0.2348,"complexity":0.703,"coverage":0.3211,"colour":0.0688,"drift":0.0337},"knobResponse":[0.0562,0.0401,0.0354,0.0362]},{"slug":"dyson-gas","title":"Dyson Gas","family":"particle","round":29,"note":"고유값 열 개가 맨 위 줄에 구슬로 떨며 서로 밀어내고, 그 지나온 길이 실이 되어 아래로 흘러요. 실은 가운데에 빽빽하고 가장자리로 갈수록 성기며 서로 건너지 않아요. K3 은 행렬 크기(10~28)이고, K1 을 누르면 밀어내는 힘이 3초쯤 꺼져 실이 엉키며 건너요.","idea":"The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.","buttons":"K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.","code":"// ===== Patternflow pattern =====\n// Title:   Dyson Gas\n// Family:  particle\n// Idea:    The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dyson Brownian motion (Freeman Dyson, 1962), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9\n//\n// Knob 1: Hue. Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it.\n// Knob 2: Speed. How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder.\n// Knob 3: Count. The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28.\n// Knob 4: Beta. The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal.\n// Buttons: K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.\n\nconst W = 64, H = 128, N = W * H, NMAX = 28, CX = 31.5;\nconst { min, max, floor, round, sqrt, abs, asin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\n// A normal sample from four uniforms: bounded, which keeps a substep small.\nconst gauss = () => (rnd() + rnd() + rnd() + rnd() - 2) * 1.7320508;\n\n// The process, in Dyson's units with an Ornstein-Uhlenbeck pull:\n//   d lambda_i = sum_j 1 / (lambda_i - lambda_j) dt - lambda_i / 2 dt + sqrt(2 / beta) dB_i\n// Its resting state is the Gaussian beta ensemble, whose eigenvalues fill\n// Wigner's semicircle on [-2 sqrt(n), 2 sqrt(n)] whatever beta is; beta only\n// sets how hard the noise shakes them. The semicircle's edge sits RPX LEDs\n// either side of the middle.\nconst RPX = 29.5;\n// The longest substep. Near a close pair the step shrinks with the square of\n// the gap, so the pair is pushed apart before the noise can carry it across.\n// A frame takes at most SUBMAX substeps; right after a pinch, when the gaps\n// are tiny, the rest of that frame's time is let go and the fan opens a\n// little slower for a few frames.\nconst DTMAX = 0.004, SUBMAX = 500;\n// History rows kept, one more than the panel so the scroll can interpolate.\nconst HB = H + 2;\n// Where the rainbow starts at Hue 0 (sea green) and how much of the wheel it\n// spans, so the highest eigenvalue is pink.\nconst H0 = 0.42, SPAN = 0.52;\n// The beads ride on this row; the threads hang from it.\nconst TOP = 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Where the k-th of n eigenvalues sits in the semicircle, as a fraction of\n// its radius: the inverse of F(u) = 1/2 + (u sqrt(1 - u^2) + asin u) / pi.\nfunction quantile(q) {\n  let a = -1, b = 1;\n  for (let it = 0; it \u003c 40; it++) {\n    const u = (a + b) / 2;\n    if (0.5 + (u * sqrt(1 - u * u) + asin(u)) / PI \u003c q) a = u;\n    else b = u;\n  }\n  return (a + b) / 2;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    n: 10, beta: 1, sp: 2, hue: -1, started: false,\n    lam: new Float64Array(NMAX), sm: new Float64Array(NMAX), f: new Float64Array(NMAX), ord: new Int8Array(NMAX), hc: new Float32Array(NMAX),\n    hx: new Float32Array(HB * NMAX), hh: new Float32Array(HB * NMAX), hn: new Uint8Array(HB), he: new Uint16Array(HB),\n    head: 0, acc: 0, ep: 0, free: 0, pinch: -1, snap: new Float64Array(NMAX),\n    X: new Float32Array((H + 1) * NMAX), XH: new Float32Array((H + 1) * NMAX), Xn: new Uint8Array(H + 1), Xe: new Uint16Array(H + 1),\n    buf: new Float32Array(N * 3), lut: new Float32Array(256 * 3),\n  });\n  paint(P, 0);\n  fill(P);\n}\n\n// The rainbow for this Hue, 256 steps from the lowest eigenvalue's colour to\n// the highest's.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let j = 0; j \u003c 256; j++) hsv(hue + H0 + (SPAN * j) / 255, 0.82, 255, P.lut, j * 3);\n}\n\n// A fresh matrix of the current size, already at rest, with a full panel of\n// history behind it so the first frame shows the threads.\nfunction fill(P) {\n  const n = P.n, R = 2 * sqrt(n);\n  P.ep++;\n  for (let i = 0; i \u003c n; i++) (P.lam[i] = R * quantile((i + 0.5) / n)), (P.ord[i] = i), (P.hc[i] = n > 1 ? i / (n - 1) : 0.5);\n  P.free = 0, P.pinch = -1, P.acc = 0;\n  step(P, 2);\n  P.sm.set(P.lam);\n  const tr = rowTau(P.sp);\n  for (let k = 0; k \u003c HB; k++) step(P, tr), look(P, 1), push(P);\n}\n\n// The threads are drawn through a short exposure: each one follows its\n// eigenvalue with a lag of SMOOTH rows. An average of ordered positions is\n// still ordered, so the drawn threads cannot cross where the eigenvalues\n// do not.\nconst SMOOTH = 3;\nfunction look(P, rows) {\n  const a = 1 - Math.exp(-rows / SMOOTH);\n  for (let i = 0; i \u003c P.n; i++) P.sm[i] += (P.lam[i] - P.sm[i]) * a;\n}\n\n// Rows a second and stretch of the process per row, both from Speed.\nconst rowRate = (s) => 5 + 7.5 * s;\nconst rowTau = (s) => 0.01 + 0.01 * s;\n\nfunction push(P) {\n  const n = P.n, sc = RPX / (2 * sqrt(n));\n  P.head = (P.head + 1) % HB;\n  const o = P.head * NMAX;\n  for (let i = 0; i \u003c n; i++) (P.hx[o + i] = CX + P.sm[i] * sc), (P.hh[o + i] = P.hc[i]);\n  P.hn[P.head] = n, P.he[P.head] = P.ep;\n}\n\n// Advance the process by T. With the repulsion on, the eigenvalues keep the\n// order they had when it came on: ord lists them left to right, and if a\n// substep ever lets a pair overtake, the two swap places rather than cross.\nfunction step(P, T) {\n  const n = P.n, lam = P.lam, f = P.f, ord = P.ord, rep = P.free \u003c= 0, sd0 = sqrt(2 / P.beta);\n  let left = T;\n  for (let it = 0; it \u003c SUBMAX && left > 1e-9; it++) {\n    for (let i = 0; i \u003c n; i++) f[i] = -0.5 * lam[i];\n    let dt = DTMAX;\n    if (rep) {\n      for (let i = 0; i \u003c n; i++)\n        for (let j = i + 1; j \u003c n; j++) {\n          let d = lam[i] - lam[j];\n          if (abs(d) \u003c 1e-6) d = d \u003c 0 ? -1e-6 : 1e-6;\n          const q = 1 / d;\n          (f[i] += q), (f[j] -= q);\n        }\n      // No eigenvalue may move more than a fifth of the closest gap in one\n      // substep, by the push or by the noise.\n      let g = 1e9, fm = 1e-9;\n      for (let r = 0; r + 1 \u003c n; r++) g = min(g, lam[ord[r + 1]] - lam[ord[r]]);\n      for (let i = 0; i \u003c n; i++) fm = max(fm, abs(f[i]));\n      g = max(g, 1e-6);\n      dt = min(DTMAX, 0.2 * g * g, (0.2 * g) / fm);\n    }\n    if (dt > left) dt = left;\n    const sd = sd0 * sqrt(dt);\n    for (let i = 0; i \u003c n; i++) lam[i] += f[i] * dt + sd * gauss();\n    if (rep)\n      for (let r = 0; r + 1 \u003c n; r++) {\n        const a = ord[r], b = ord[r + 1];\n        if (lam[b] \u003c lam[a]) {\n          const t = lam[a];\n          (lam[a] = lam[b]), (lam[b] = t);\n        }\n      }\n    left -= dt;\n  }\n}\n\n// When the repulsion comes back, the eigenvalues are ranked where they\n// stand and each colour starts drifting back to its rank's place in the\n// rainbow.\nfunction rank(P) {\n  const n = P.n, ord = P.ord, lam = P.lam;\n  for (let i = 0; i \u003c n; i++) ord[i] = i;\n  for (let i = 1; i \u003c n; i++) {\n    const v = ord[i];\n    let j = i - 1;\n    while (j >= 0 && lam[ord[j]] > lam[v]) (ord[j + 1] = ord[j]), j--;\n    ord[j + 1] = v;\n  }\n}\n\n// A new size keeps the picture: the new eigenvalues take the old ones'\n// quantiles, scaled to the new semicircle.\nfunction resize(P, n) {\n  const m = P.n, ord = P.ord, lam = P.lam, u = new Float64Array(m);\n  rank(P);\n  for (let r = 0; r \u003c m; r++) u[r] = lam[ord[r]] / (2 * sqrt(m));\n  P.n = n, P.ep++, P.free = 0, P.pinch = -1;\n  for (let i = 0; i \u003c n; i++) {\n    const q = n > 1 ? (i / (n - 1)) * (m - 1) : (m - 1) / 2, a = floor(q), b = min(m - 1, a + 1);\n    lam[i] = (u[a] + (u[b] - u[a]) * (q - a)) * 2 * sqrt(n);\n    ord[i] = i, P.hc[i] = n > 1 ? i / (n - 1) : 0.5;\n  }\n  P.sm.set(lam);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 1], d = cl(dt || 0, 0, 0.1);\n  const pr = input.btnPressed || [];\n  if (k[0] !== P.hue) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  P.beta = cl(k[3], 1, 9);\n  const n = round(cl(k[2], 10, NMAX));\n  // The first frame's history is made again with the knobs as they stand.\n  if (!P.started) (P.started = true), (P.n = n), fill(P);\n  else if (n !== P.n) resize(P, n);\n\n  if (pr[0] && P.pinch \u003c 0) P.free = 2;\n  if (pr[1] && P.pinch \u003c 0) {\n    P.pinch = 0, P.free = 0;\n    for (let i = 0; i \u003c P.n; i++) P.snap[i] = P.lam[i];\n  }\n\n  const tau = d * rowRate(P.sp) * rowTau(P.sp);\n  if (P.pinch >= 0) {\n    // The matrix scaled down to nothing: every eigenvalue scales with it, so\n    // the threads run straight into the middle. At a thirtieth of its size it\n    // is let go and the repulsion fans it out again.\n    P.pinch += d;\n    const t = cl(P.pinch / 0.55, 0, 1), s = 0.03 + 0.97 * (1 - t * t * (3 - 2 * t));\n    for (let i = 0; i \u003c P.n; i++) P.lam[i] = P.snap[i] * s;\n    if (t >= 1) (P.pinch = -1), rank(P);\n  } else if (P.free > 0) {\n    step(P, tau);\n    P.free -= tau;\n    if (P.free \u003c= 0) rank(P);\n  } else step(P, tau);\n\n  // Colours ease back to their rank's place once the order is settled again.\n  if (P.free \u003c= 0) {\n    const n1 = max(1, P.n - 1), e = min(1, d * 1.2);\n    for (let r = 0; r \u003c P.n; r++) P.hc[P.ord[r]] += (r / n1 - P.hc[P.ord[r]]) * e;\n  }\n  look(P, d * rowRate(P.sp));\n  P.acc += d * rowRate(P.sp);\n  while (P.acc >= 1) (P.acc -= 1), push(P);\n}\n\n// One thread's light on one row: a 1-LED core across the span it moves\n// through between this row and the next, and a soft halo either side.\nfunction span(buf, y, a, b, r, g, bl) {\n  const x0 = max(0, floor(a - 2.5)), x1 = min(W - 1, floor(b + 2.5)), o = y * W;\n  for (let x = x0; x \u003c= x1; x++) {\n    const c = x + 0.5, dd = c \u003c a ? a - c : c > b ? c - b : 0;\n    let w = 1 - dd;\n    const h = 0.3 / (1 + dd * dd * 1.6);\n    if (w \u003c h) w = h;\n    const q = (o + x) * 3;\n    buf[q] += r * w, buf[q + 1] += g * w, buf[q + 2] += bl * w;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, sc = RPX / (2 * sqrt(n)), X = P.X, XH = P.XH, Xn = P.Xn, Xe = P.Xe, buf = P.buf, lut = P.lut, L = H - TOP;\n  // History row 0 is now, on the beads; the newest stored row is acc rows\n  // down, the next one a row further. Each drawn row interpolates between\n  // the two stored rows it falls between, so the scroll glides.\n  for (let y = 0; y \u003c= L; y++) {\n    const o = y * NMAX;\n    let ia, ib, t;\n    if (y \u003c P.acc) (ia = -1), (ib = P.head), (t = y / P.acc);\n    else {\n      const u = y - P.acc, kk = floor(u);\n      (ia = (P.head - kk + HB * 2) % HB), (ib = (ia - 1 + HB) % HB), (t = u - kk);\n    }\n    const ea = ia \u003c 0 ? P.ep : P.he[ia], eb = P.he[ib], na = ia \u003c 0 ? n : P.hn[ia], nb = P.hn[ib];\n    if (ea === eb && na === nb) {\n      for (let i = 0; i \u003c na; i++) {\n        const xa = ia \u003c 0 ? CX + P.sm[i] * sc : P.hx[ia * NMAX + i], ha = ia \u003c 0 ? P.hc[i] : P.hh[ia * NMAX + i];\n        X[o + i] = xa + (P.hx[ib * NMAX + i] - xa) * t;\n        XH[o + i] = ha + (P.hh[ib * NMAX + i] - ha) * t;\n      }\n      (Xn[y] = na), (Xe[y] = ea);\n    } else {\n      // A row from before Count was turned: no thread joins across it.\n      const s = t \u003c 0.5 && ia >= 0 ? ia : ib;\n      for (let i = 0; i \u003c P.hn[s]; i++) (X[o + i] = P.hx[s * NMAX + i]), (XH[o + i] = P.hh[s * NMAX + i]);\n      (Xn[y] = P.hn[s]), (Xe[y] = P.he[s]);\n    }\n  }\n  buf.fill(0);\n  for (let y = 0; y \u003c L; y++) {\n    const o = y * NMAX, m = Xn[y];\n    const okU = y > 0 && Xe[y - 1] === Xe[y] && Xn[y - 1] === m, okD = Xe[y + 1] === Xe[y] && Xn[y + 1] === m;\n    // The past dims a little toward the bottom; the newest rows burn\n    // brighter and whiter.\n    const fade = 1 - 0.42 * (y / L), hot = y \u003c 5 ? 0.35 * (1 - y / 5) : 0, f1 = fade * (1 + hot), wh = 90 * hot;\n    for (let i = 0; i \u003c m; i++) {\n      const x = X[o + i], xu = okU ? (X[o - NMAX + i] + x) / 2 : x, xd = okD ? (X[o + NMAX + i] + x) / 2 : x;\n      const q = round(cl(XH[o + i], 0, 1) * 255) * 3;\n      span(buf, y + TOP, min(x, xu, xd), max(x, xu, xd), lut[q] * f1 + wh, lut[q + 1] * f1 + wh, lut[q + 2] * f1 + wh);\n    }\n  }\n  // The eigenvalues themselves: a bead on the top of each thread, white at\n  // the heart and its own colour round the rim.\n  for (let i = 0; i \u003c n; i++) {\n    const x = X[i], q = round(cl(P.hc[i], 0, 1) * 255) * 3;\n    const r = lut[q] * 0.7 + 76, g = lut[q + 1] * 0.7 + 76, b = lut[q + 2] * 0.7 + 76;\n    for (let yy = 0; yy \u003c TOP + 4; yy++)\n      for (let xx = max(0, floor(x - 2.5)); xx \u003c= min(W - 1, floor(x + 2.5)); xx++) {\n        const dx = xx + 0.5 - x, dy = yy - TOP, r2 = dx * dx + dy * dy * 1.2, w = 1.35 / (1 + r2 * 0.9) - 0.14, p = (yy * W + xx) * 3;\n        if (w \u003c= 0) continue;\n        const wc = 140 * w * w;\n        (buf[p] += r * w + wc), (buf[p + 1] += g * w + wc), (buf[p + 2] += b * w + wc);\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-dyson-gas","type":"code","name":"dyson-gas","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dyson Gas\n// Family:  particle\n// Idea:    The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dyson Brownian motion (Freeman Dyson, 1962), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9\n//\n// Knob 1: Hue. Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it.\n// Knob 2: Speed. How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder.\n// Knob 3: Count. The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28.\n// Knob 4: Beta. The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal.\n// Buttons: K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.\n\nconst W = 64, H = 128, N = W * H, NMAX = 28, CX = 31.5;\nconst { min, max, floor, round, sqrt, abs, asin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\n// A normal sample from four uniforms: bounded, which keeps a substep small.\nconst gauss = () => (rnd() + rnd() + rnd() + rnd() - 2) * 1.7320508;\n\n// The process, in Dyson's units with an Ornstein-Uhlenbeck pull:\n//   d lambda_i = sum_j 1 / (lambda_i - lambda_j) dt - lambda_i / 2 dt + sqrt(2 / beta) dB_i\n// Its resting state is the Gaussian beta ensemble, whose eigenvalues fill\n// Wigner's semicircle on [-2 sqrt(n), 2 sqrt(n)] whatever beta is; beta only\n// sets how hard the noise shakes them. The semicircle's edge sits RPX LEDs\n// either side of the middle.\nconst RPX = 29.5;\n// The longest substep. Near a close pair the step shrinks with the square of\n// the gap, so the pair is pushed apart before the noise can carry it across.\n// A frame takes at most SUBMAX substeps; right after a pinch, when the gaps\n// are tiny, the rest of that frame's time is let go and the fan opens a\n// little slower for a few frames.\nconst DTMAX = 0.004, SUBMAX = 500;\n// History rows kept, one more than the panel so the scroll can interpolate.\nconst HB = H + 2;\n// Where the rainbow starts at Hue 0 (sea green) and how much of the wheel it\n// spans, so the highest eigenvalue is pink.\nconst H0 = 0.42, SPAN = 0.52;\n// The beads ride on this row; the threads hang from it.\nconst TOP = 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Where the k-th of n eigenvalues sits in the semicircle, as a fraction of\n// its radius: the inverse of F(u) = 1/2 + (u sqrt(1 - u^2) + asin u) / pi.\nfunction quantile(q) {\n  let a = -1, b = 1;\n  for (let it = 0; it \u003c 40; it++) {\n    const u = (a + b) / 2;\n    if (0.5 + (u * sqrt(1 - u * u) + asin(u)) / PI \u003c q) a = u;\n    else b = u;\n  }\n  return (a + b) / 2;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    n: 10, beta: 1, sp: 2, hue: -1, started: false,\n    lam: new Float64Array(NMAX), sm: new Float64Array(NMAX), f: new Float64Array(NMAX), ord: new Int8Array(NMAX), hc: new Float32Array(NMAX),\n    hx: new Float32Array(HB * NMAX), hh: new Float32Array(HB * NMAX), hn: new Uint8Array(HB), he: new Uint16Array(HB),\n    head: 0, acc: 0, ep: 0, free: 0, pinch: -1, snap: new Float64Array(NMAX),\n    X: new Float32Array((H + 1) * NMAX), XH: new Float32Array((H + 1) * NMAX), Xn: new Uint8Array(H + 1), Xe: new Uint16Array(H + 1),\n    buf: new Float32Array(N * 3), lut: new Float32Array(256 * 3),\n  });\n  paint(P, 0);\n  fill(P);\n}\n\n// The rainbow for this Hue, 256 steps from the lowest eigenvalue's colour to\n// the highest's.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let j = 0; j \u003c 256; j++) hsv(hue + H0 + (SPAN * j) / 255, 0.82, 255, P.lut, j * 3);\n}\n\n// A fresh matrix of the current size, already at rest, with a full panel of\n// history behind it so the first frame shows the threads.\nfunction fill(P) {\n  const n = P.n, R = 2 * sqrt(n);\n  P.ep++;\n  for (let i = 0; i \u003c n; i++) (P.lam[i] = R * quantile((i + 0.5) / n)), (P.ord[i] = i), (P.hc[i] = n > 1 ? i / (n - 1) : 0.5);\n  P.free = 0, P.pinch = -1, P.acc = 0;\n  step(P, 2);\n  P.sm.set(P.lam);\n  const tr = rowTau(P.sp);\n  for (let k = 0; k \u003c HB; k++) step(P, tr), look(P, 1), push(P);\n}\n\n// The threads are drawn through a short exposure: each one follows its\n// eigenvalue with a lag of SMOOTH rows. An average of ordered positions is\n// still ordered, so the drawn threads cannot cross where the eigenvalues\n// do not.\nconst SMOOTH = 3;\nfunction look(P, rows) {\n  const a = 1 - Math.exp(-rows / SMOOTH);\n  for (let i = 0; i \u003c P.n; i++) P.sm[i] += (P.lam[i] - P.sm[i]) * a;\n}\n\n// Rows a second and stretch of the process per row, both from Speed.\nconst rowRate = (s) => 5 + 7.5 * s;\nconst rowTau = (s) => 0.01 + 0.01 * s;\n\nfunction push(P) {\n  const n = P.n, sc = RPX / (2 * sqrt(n));\n  P.head = (P.head + 1) % HB;\n  const o = P.head * NMAX;\n  for (let i = 0; i \u003c n; i++) (P.hx[o + i] = CX + P.sm[i] * sc), (P.hh[o + i] = P.hc[i]);\n  P.hn[P.head] = n, P.he[P.head] = P.ep;\n}\n\n// Advance the process by T. With the repulsion on, the eigenvalues keep the\n// order they had when it came on: ord lists them left to right, and if a\n// substep ever lets a pair overtake, the two swap places rather than cross.\nfunction step(P, T) {\n  const n = P.n, lam = P.lam, f = P.f, ord = P.ord, rep = P.free \u003c= 0, sd0 = sqrt(2 / P.beta);\n  let left = T;\n  for (let it = 0; it \u003c SUBMAX && left > 1e-9; it++) {\n    for (let i = 0; i \u003c n; i++) f[i] = -0.5 * lam[i];\n    let dt = DTMAX;\n    if (rep) {\n      for (let i = 0; i \u003c n; i++)\n        for (let j = i + 1; j \u003c n; j++) {\n          let d = lam[i] - lam[j];\n          if (abs(d) \u003c 1e-6) d = d \u003c 0 ? -1e-6 : 1e-6;\n          const q = 1 / d;\n          (f[i] += q), (f[j] -= q);\n        }\n      // No eigenvalue may move more than a fifth of the closest gap in one\n      // substep, by the push or by the noise.\n      let g = 1e9, fm = 1e-9;\n      for (let r = 0; r + 1 \u003c n; r++) g = min(g, lam[ord[r + 1]] - lam[ord[r]]);\n      for (let i = 0; i \u003c n; i++) fm = max(fm, abs(f[i]));\n      g = max(g, 1e-6);\n      dt = min(DTMAX, 0.2 * g * g, (0.2 * g) / fm);\n    }\n    if (dt > left) dt = left;\n    const sd = sd0 * sqrt(dt);\n    for (let i = 0; i \u003c n; i++) lam[i] += f[i] * dt + sd * gauss();\n    if (rep)\n      for (let r = 0; r + 1 \u003c n; r++) {\n        const a = ord[r], b = ord[r + 1];\n        if (lam[b] \u003c lam[a]) {\n          const t = lam[a];\n          (lam[a] = lam[b]), (lam[b] = t);\n        }\n      }\n    left -= dt;\n  }\n}\n\n// When the repulsion comes back, the eigenvalues are ranked where they\n// stand and each colour starts drifting back to its rank's place in the\n// rainbow.\nfunction rank(P) {\n  const n = P.n, ord = P.ord, lam = P.lam;\n  for (let i = 0; i \u003c n; i++) ord[i] = i;\n  for (let i = 1; i \u003c n; i++) {\n    const v = ord[i];\n    let j = i - 1;\n    while (j >= 0 && lam[ord[j]] > lam[v]) (ord[j + 1] = ord[j]), j--;\n    ord[j + 1] = v;\n  }\n}\n\n// A new size keeps the picture: the new eigenvalues take the old ones'\n// quantiles, scaled to the new semicircle.\nfunction resize(P, n) {\n  const m = P.n, ord = P.ord, lam = P.lam, u = new Float64Array(m);\n  rank(P);\n  for (let r = 0; r \u003c m; r++) u[r] = lam[ord[r]] / (2 * sqrt(m));\n  P.n = n, P.ep++, P.free = 0, P.pinch = -1;\n  for (let i = 0; i \u003c n; i++) {\n    const q = n > 1 ? (i / (n - 1)) * (m - 1) : (m - 1) / 2, a = floor(q), b = min(m - 1, a + 1);\n    lam[i] = (u[a] + (u[b] - u[a]) * (q - a)) * 2 * sqrt(n);\n    ord[i] = i, P.hc[i] = n > 1 ? i / (n - 1) : 0.5;\n  }\n  P.sm.set(lam);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 1], d = cl(dt || 0, 0, 0.1);\n  const pr = input.btnPressed || [];\n  if (k[0] !== P.hue) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  P.beta = cl(k[3], 1, 9);\n  const n = round(cl(k[2], 10, NMAX));\n  // The first frame's history is made again with the knobs as they stand.\n  if (!P.started) (P.started = true), (P.n = n), fill(P);\n  else if (n !== P.n) resize(P, n);\n\n  if (pr[0] && P.pinch \u003c 0) P.free = 2;\n  if (pr[1] && P.pinch \u003c 0) {\n    P.pinch = 0, P.free = 0;\n    for (let i = 0; i \u003c P.n; i++) P.snap[i] = P.lam[i];\n  }\n\n  const tau = d * rowRate(P.sp) * rowTau(P.sp);\n  if (P.pinch >= 0) {\n    // The matrix scaled down to nothing: every eigenvalue scales with it, so\n    // the threads run straight into the middle. At a thirtieth of its size it\n    // is let go and the repulsion fans it out again.\n    P.pinch += d;\n    const t = cl(P.pinch / 0.55, 0, 1), s = 0.03 + 0.97 * (1 - t * t * (3 - 2 * t));\n    for (let i = 0; i \u003c P.n; i++) P.lam[i] = P.snap[i] * s;\n    if (t >= 1) (P.pinch = -1), rank(P);\n  } else if (P.free > 0) {\n    step(P, tau);\n    P.free -= tau;\n    if (P.free \u003c= 0) rank(P);\n  } else step(P, tau);\n\n  // Colours ease back to their rank's place once the order is settled again.\n  if (P.free \u003c= 0) {\n    const n1 = max(1, P.n - 1), e = min(1, d * 1.2);\n    for (let r = 0; r \u003c P.n; r++) P.hc[P.ord[r]] += (r / n1 - P.hc[P.ord[r]]) * e;\n  }\n  look(P, d * rowRate(P.sp));\n  P.acc += d * rowRate(P.sp);\n  while (P.acc >= 1) (P.acc -= 1), push(P);\n}\n\n// One thread's light on one row: a 1-LED core across the span it moves\n// through between this row and the next, and a soft halo either side.\nfunction span(buf, y, a, b, r, g, bl) {\n  const x0 = max(0, floor(a - 2.5)), x1 = min(W - 1, floor(b + 2.5)), o = y * W;\n  for (let x = x0; x \u003c= x1; x++) {\n    const c = x + 0.5, dd = c \u003c a ? a - c : c > b ? c - b : 0;\n    let w = 1 - dd;\n    const h = 0.3 / (1 + dd * dd * 1.6);\n    if (w \u003c h) w = h;\n    const q = (o + x) * 3;\n    buf[q] += r * w, buf[q + 1] += g * w, buf[q + 2] += bl * w;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, sc = RPX / (2 * sqrt(n)), X = P.X, XH = P.XH, Xn = P.Xn, Xe = P.Xe, buf = P.buf, lut = P.lut, L = H - TOP;\n  // History row 0 is now, on the beads; the newest stored row is acc rows\n  // down, the next one a row further. Each drawn row interpolates between\n  // the two stored rows it falls between, so the scroll glides.\n  for (let y = 0; y \u003c= L; y++) {\n    const o = y * NMAX;\n    let ia, ib, t;\n    if (y \u003c P.acc) (ia = -1), (ib = P.head), (t = y / P.acc);\n    else {\n      const u = y - P.acc, kk = floor(u);\n      (ia = (P.head - kk + HB * 2) % HB), (ib = (ia - 1 + HB) % HB), (t = u - kk);\n    }\n    const ea = ia \u003c 0 ? P.ep : P.he[ia], eb = P.he[ib], na = ia \u003c 0 ? n : P.hn[ia], nb = P.hn[ib];\n    if (ea === eb && na === nb) {\n      for (let i = 0; i \u003c na; i++) {\n        const xa = ia \u003c 0 ? CX + P.sm[i] * sc : P.hx[ia * NMAX + i], ha = ia \u003c 0 ? P.hc[i] : P.hh[ia * NMAX + i];\n        X[o + i] = xa + (P.hx[ib * NMAX + i] - xa) * t;\n        XH[o + i] = ha + (P.hh[ib * NMAX + i] - ha) * t;\n      }\n      (Xn[y] = na), (Xe[y] = ea);\n    } else {\n      // A row from before Count was turned: no thread joins across it.\n      const s = t \u003c 0.5 && ia >= 0 ? ia : ib;\n      for (let i = 0; i \u003c P.hn[s]; i++) (X[o + i] = P.hx[s * NMAX + i]), (XH[o + i] = P.hh[s * NMAX + i]);\n      (Xn[y] = P.hn[s]), (Xe[y] = P.he[s]);\n    }\n  }\n  buf.fill(0);\n  for (let y = 0; y \u003c L; y++) {\n    const o = y * NMAX, m = Xn[y];\n    const okU = y > 0 && Xe[y - 1] === Xe[y] && Xn[y - 1] === m, okD = Xe[y + 1] === Xe[y] && Xn[y + 1] === m;\n    // The past dims a little toward the bottom; the newest rows burn\n    // brighter and whiter.\n    const fade = 1 - 0.42 * (y / L), hot = y \u003c 5 ? 0.35 * (1 - y / 5) : 0, f1 = fade * (1 + hot), wh = 90 * hot;\n    for (let i = 0; i \u003c m; i++) {\n      const x = X[o + i], xu = okU ? (X[o - NMAX + i] + x) / 2 : x, xd = okD ? (X[o + NMAX + i] + x) / 2 : x;\n      const q = round(cl(XH[o + i], 0, 1) * 255) * 3;\n      span(buf, y + TOP, min(x, xu, xd), max(x, xu, xd), lut[q] * f1 + wh, lut[q + 1] * f1 + wh, lut[q + 2] * f1 + wh);\n    }\n  }\n  // The eigenvalues themselves: a bead on the top of each thread, white at\n  // the heart and its own colour round the rim.\n  for (let i = 0; i \u003c n; i++) {\n    const x = X[i], q = round(cl(P.hc[i], 0, 1) * 255) * 3;\n    const r = lut[q] * 0.7 + 76, g = lut[q + 1] * 0.7 + 76, b = lut[q + 2] * 0.7 + 76;\n    for (let yy = 0; yy \u003c TOP + 4; yy++)\n      for (let xx = max(0, floor(x - 2.5)); xx \u003c= min(W - 1, floor(x + 2.5)); xx++) {\n        const dx = xx + 0.5 - x, dy = yy - TOP, r2 = dx * dx + dy * dy * 1.2, w = 1.35 / (1 + r2 * 0.9) - 0.14, p = (yy * W + xx) * 3;\n        if (w \u003c= 0) continue;\n        const wc = 140 * w * w;\n        (buf[p] += r * w + wc), (buf[p + 1] += g * w + wc), (buf[p + 2] += b * w + wc);\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder."},{"name":"Count","min":10,"max":28,"about":"The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28."},{"name":"Beta","min":1,"max":9,"about":"The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal."}],"start":[0,2,10,1],"measures":{"motion":1.3286,"detail":0.1297,"edges":0.5413,"complexity":1.7541,"coverage":0.3748,"colour":0.2639,"drift":0.1193},"knobResponse":[0.1261,0.1507,0.2251,0.1306]},{"slug":"elephant-toothpaste","title":"Elephant Toothpaste","family":"chemistry","round":23,"note":"보라색 장갑을 낀 손이 실험대 위 눈금실린더에 아이오딘화 칼륨을 부으면, 유리 안쪽에 그어 둔 식용 색소 줄무늬를 두른 거품 기둥이 입구에서 솟아 패널 꼭대기까지 올라요. 기둥은 한쪽으로 꺾여 실린더 옆을 타고 흘러내려 김 나는 더미로 쌓이고, 더미가 굳어 바래면 손이 닦아 내고 새 실린더를 내려놓아요.","idea":"A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.","buttons":"K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.","code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","layer":{"id":"layer-elephant-toothpaste","type":"code","name":"elephant-toothpaste","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower."},{"name":"Stripes","min":1,"max":4,"about":"How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4."},{"name":"Strength","min":0,"max":1,"about":"How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap."}],"start":[0,2,1,0.06],"measures":{"motion":0.1815,"detail":0.029,"edges":0.1765,"complexity":0.9251,"coverage":0.367,"colour":0.1801,"drift":0.102},"knobResponse":[0.0441,0.1137,0.0453,0.0773]},{"slug":"elliptic-chords","title":"Elliptic Chords","family":"number","round":36,"note":"위에는 실수 곡선 y² = x³ − 6x 가, 아래에는 같은 곡선을 61 로 나눈 나머지로 푼 61×61 판이 있어요. G 와 kG 를 지나는 직선이 곡선과 세 번째로 만나는 점을 x축에 뒤집으면 (k+1)G 이고, 아래에서는 그 직선이 판을 감아 도는 점 61개가 되어 곡선의 점 셋에서만 하얗게 빛나며 배수들이 방문 순서대로 무지개색으로 켜져요. K3 은 상수 b 를 바꿔 알 모양 고리를 키우다 긴 가지에 붙이고, K1 을 누르면 새 생성원 G 로 O 에서 다시 세요.","idea":"The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.","buttons":"K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Elliptic Chords\n// Family:  number\n// Idea:    The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: elliptic curve group law, chord and tangent (Henri Poincaré, 1901), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1\n//\n// Knob 1: Hue. Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky.\n// Knob 2: Speed. Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44.\n// Knob 3: Curve. The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points.\n// Knob 4: Trail. Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below.\n// Buttons: K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.\n\nconst W = 64, H = 128, P = 61, A = -6, CMIN = -4, CMAX = 8;\n// The real window: x from -3.15 to 4.45 over the 64 columns, y from -7.75 to\n// 7.75 over rows 0..62, with y = 0 on row 31. Lines stay lines under this\n// stretch, and the mirror in the x-axis stays a vertical move.\nconst TOPH = 63, X0 = -3.15, X1 = 4.45, SX = W / (X1 - X0), YM = 7.75, SY = TOPH / (2 * YM), YC = 31;\n// The F_61 board: element (x, y) is column BX + x, row BY - y; O sits on row OROW above it.\nconst BX = 1, BY = 126, OROW = 64;\n// Phases of one group step: the line, the mirror, the landing.\nconst T_LINE = 0.5, T_MIR0 = 0.55, T_MIR1 = 0.78;\nconst NT = 1024;\n// Group steps a second for each unit of Speed.\nconst RATE = 0.75;\nconst { floor, min, max, abs, sqrt, sin, cos, tan, acos, cbrt, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (v) => ((v % P) + P) % P;\nconst NB = [[1, 0], [-1, 0], [0, 1], [0, -1]];\nconst NB2 = [[2, 0], [-2, 0], [0, 2], [0, -2], [1, 1], [1, -1], [-1, 1], [-1, -1]];\n\n// Inverses mod 61, by Fermat.\nconst INV = new Int32Array(P);\nfor (let i = 1; i \u003c P; i++) {\n  let r = 1, e = P - 2, q = i;\n  while (e) {\n    if (e & 1) r = (r * q) % P;\n    q = (q * q) % P;\n    e >>= 1;\n  }\n  INV[i] = r;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// ---- F_61 -------------------------------------------------------------------\n// A point is [x, y] with entries 0..60, or null for O.\nfunction fpAdd(p, q, b) {\n  if (!p) return q;\n  if (!q) return p;\n  if (p[0] === q[0] && md(p[1] + q[1]) === 0) return null;\n  const m = p[0] === q[0] ? md((3 * p[0] * p[0] + A) * INV[md(2 * p[1])]) : md((q[1] - p[1]) * INV[md(q[0] - p[0])]);\n  const x = md(m * m - p[0] - q[0]);\n  return [x, md(m * (p[0] - x) - p[1])];\n}\n\nfunction fpOrder(g, b) {\n  let q = g, n = 1;\n  while (q && n \u003c 200) {\n    q = fpAdd(q, g, b);\n    n++;\n  }\n  return n;\n}\n\n// ---- the real curve -----------------------------------------------------------\n// The roots of x^3 - 6x + b, largest first: three when 27 b^2 \u003c 864, so\n// when |b| \u003c 5.66, and then the curve has an egg over [e3, e2].\nfunction roots(b) {\n  if (4 * A * A * A + 27 * b * b \u003c 0) {\n    const r = 2 * sqrt(-A / 3), th = acos(((3 * b) / (2 * A)) * sqrt(-3 / A)) / 3;\n    return [0, 1, 2].map((k) => r * cos(th - (2 * PI * k) / 3)).sort((p, q) => q - p);\n  }\n  const s = sqrt((b * b) / 4 + (A * A * A) / 27);\n  let x = cbrt(-b / 2 + s) + cbrt(-b / 2 - s);\n  for (let i = 0; i \u003c 6; i++) x -= (x * x * x + A * x + b) / (3 * x * x + A);\n  return [x];\n}\n\n// The real points of the curve as a group are a circle, R/wZ, times {0, 1}\n// when the egg is there. The circle is measured by the invariant\n// differential dx/y: on the long branch u(x) = int_x^inf dt/sqrt(f), with\n// t = e1 + tan^2(phi), and on the egg v(x) = int_e3^x dt/sqrt(f), with\n// t = e3 + (e2 - e3) sin^2(theta), both free of the square-root ends. Both\n// halves of the circle come to the same w/2. Checked against the chord rule\n// in a scratch script: main(u1) + main(u2) = main(u1 + u2), main(u) + egg(v)\n// = egg(u + v) and egg(v1) + egg(v2) = main(v1 + v2), to 2e-6 in the window.\nfunction realCurve(b) {\n  const R = roots(b), e1 = R[0], c = e1 * e1 + A;\n  const U = new Float64Array(NT + 1), h = PI / 2 / NT;\n  const gm = (ph) => {\n    if (ph >= PI / 2 - 1e-12) return 2;\n    const s = tan(ph), t = e1 + s * s, co = cos(ph);\n    return 2 / sqrt(t * t + e1 * t + c) / (co * co);\n  };\n  for (let i = NT - 1; i >= 0; i--) U[i] = U[i + 1] + (h / 6) * (gm(i * h) + 4 * gm((i + 0.5) * h) + gm((i + 1) * h));\n  const C = { b, R, U, w: 2 * U[0], egg: null };\n  if (R.length === 3) {\n    const e2 = R[1], e3 = R[2], V = new Float64Array(NT + 1);\n    const ge = (th) => 2 / sqrt(e1 - e3 - (e2 - e3) * sin(th) ** 2);\n    for (let i = 0; i \u003c NT; i++) V[i + 1] = V[i] + (h / 6) * (ge(i * h) + 4 * ge((i + 0.5) * h) + ge((i + 1) * h));\n    C.egg = { V, e2, e3 };\n  }\n  return C;\n}\n\nconst f = (x, b) => x * x * x + A * x + b;\n\n// Fractional index where the monotone table T meets the value t.\nfunction seek(T, t, rising) {\n  let lo = 0, hi = NT;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (T[m] \u003c t === rising) lo = m;\n    else hi = m;\n  }\n  return lo + (t - T[lo]) / (T[hi] - T[lo] || 1);\n}\n\n// The real point at parameter u on the branch (s = 0) or the egg (s = 1);\n// null for O.\nfunction realPoint(C, u, s) {\n  const w = C.w;\n  u -= floor(u / w) * w;\n  if (s === 0 && (u \u003c 1e-9 || w - u \u003c 1e-9)) return null;\n  const up = u \u003c= w / 2, q = up ? u : w - u;\n  let x;\n  if (s === 0) {\n    const ph = (seek(C.U, q, false) * PI) / 2 / NT;\n    x = C.R[0] + tan(ph) ** 2;\n  } else {\n    const { V, e2, e3 } = C.egg, th = (seek(V, q, true) * PI) / 2 / NT;\n    x = e3 + (e2 - e3) * sin(th) ** 2;\n  }\n  const y = sqrt(max(0, f(x, C.b)));\n  // The egg runs the other way round, so that main(u) + egg(v) = egg(u + v).\n  return [x, (up ? 1 : -1) * (s === 0 ? 1 : -1) * y];\n}\n\n// ---- one curve: both halves ---------------------------------------------------\nfunction buildCurve(b) {\n  const pts = [];\n  for (let x = 0; x \u003c P; x++) for (let y = 0; y \u003c P; y++) if (md(y * y - f(x, b)) === 0) pts.push([x, y]);\n  let N = 0, gens = [];\n  for (const p of pts) {\n    const o = fpOrder(p, b);\n    if (o > N) (N = o), (gens = []);\n    if (o === N) gens.push(p);\n  }\n  const C = realCurve(b);\n  const onBoard = new Uint8Array(P * P);\n  for (const [x, y] of pts) onBoard[x * P + y] = 1;\n  // The static picture of the real curve: a 1.4-LED line where y^2 = f(x),\n  // found by the distance |y^2 - f| / |gradient| in LEDs, and a soft fill on\n  // the side where f(x) > y^2, the inside of the egg and of the branch.\n  const line = new Float32Array(W * TOPH), fill = new Float32Array(W * TOPH);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      let acc = 0, inside = 0;\n      for (let sy = 0; sy \u003c 3; sy++)\n        for (let sx = 0; sx \u003c 3; sx++) {\n          const x = X0 + (col + (sx + 0.5) / 3) / SX, y = (YC + 0.5 - (r + (sy + 0.5) / 3)) / SY;\n          const F = y * y - f(x, b), gx = (3 * x * x + A) / SX, gy = (2 * y) / SY;\n          const d = abs(F) / (sqrt(gx * gx + gy * gy) + 1e-9);\n          acc += cl(1.15 - d, 0, 1);\n          if (F \u003c 0) inside++;\n        }\n      line[r * W + col] = acc / 9;\n      fill[r * W + col] = inside / 9;\n    }\n  return { b, pts, N, gens, C, onBoard, line, fill };\n}\n\n// ---- the cycle ----------------------------------------------------------------\n// Q_k = kG. Step k goes from Q_k to Q_k+1 = Q_k + G: the line through G and\n// Q_k (the tangent at G when k = 1, the vertical through G when Q_k is O or\n// -G), its third point R, and R mirrored. The real generator is a point of\n// the same order N: on the egg at parameter jw/N when there is an egg and N\n// is even, so the odd multiples land on the egg and the even ones on the\n// branch, otherwise on the branch.\nfunction startCycle(S, fresh) {\n  const K = S.curve, N = K.N, C = K.C;\n  S.g = K.gens[floor(random() * K.gens.length)];\n  S.side = C.egg && N % 2 === 0 ? 1 : 0;\n  const js = [];\n  for (let j = 1; j \u003c N; j++) {\n    let a = j, bb = N;\n    while (bb) [a, bb] = [bb, a % bb];\n    if (a !== 1) continue;\n    const g = realPoint(C, (j * C.w) / N, S.side);\n    if (g && g[0] > X0 + 0.3 && g[0] \u003c X1 - 0.3 && abs(g[1]) \u003c YM - 0.4) js.push(j);\n  }\n  S.j = js.length ? js[floor(random() * js.length)] : 1;\n  S.gr = realPoint(C, (S.j * C.w) / N, S.side);\n  for (const t of S.trail) t.ghost = t.ghost || 1e-6;\n  if (fresh) {\n    // The opening shows the cycle already under way: 80% of it lit.\n    const k0 = round(0.8 * N);\n    let q = null;\n    for (let k = 1; k \u003c= k0; k++) {\n      q = fpAdd(q, S.g, K.b);\n      S.trail.push({ k, gs: S.gs - (k0 - k), fp: q, re: realK(S, k), ghost: 0 });\n    }\n    S.k = k0;\n    S.q = q;\n  } else {\n    S.k = 0;\n    S.q = null;\n  }\n  planStep(S);\n}\n\nconst realK = (S, k) => realPoint(S.curve.C, (k * S.j * S.curve.C.w) / S.curve.N, (k * S.side) & 1);\n\n// The F_61 line y = mx + c is the lattice of points (t, mt) mod 61 shifted\n// to one of them. Its shortest vector, found by Lagrange's reduction of the\n// basis (1, m), (0, 61), is never more than 8.4 long, and stepping by it still\n// visits all 61 points, so the walk runs along short streaks that wrap round\n// the square instead of jumping m rows at a time.\nfunction shortStep(m) {\n  let ax = 1, ay = m > P / 2 ? m - P : m, bx = 0, by = P;\n  const n2 = (x, y) => x * x + y * y;\n  for (let i = 0; i \u003c 20; i++) {\n    if (n2(bx, by) \u003c n2(ax, ay)) [ax, ay, bx, by] = [bx, by, ax, ay];\n    const mu = round((ax * bx + ay * by) / n2(ax, ay));\n    if (mu === 0) break;\n    bx -= mu * ax;\n    by -= mu * ay;\n  }\n  return [md(ax), md(ay)];\n}\n\nfunction planStep(S) {\n  const K = S.curve, N = K.N, k = S.k, g = S.g, q = S.q;\n  const st = { k, vert: false, m: 0, start: q || g, third: null, next: null, rm: 0, rx: 0, ry: 0, rv: false, r3: null, rn: null, tR: -1 };\n  // F_61: the line's slope, its 61 dots from Q_k (from G when Q_k is O), and\n  // how many steps along it the third point falls.\n  if (!q || (q[0] === g[0] && md(q[1] + g[1]) === 0)) st.vert = true;\n  else st.m = q[0] === g[0] ? md((3 * g[0] * g[0] + A) * INV[md(2 * g[1])]) : md((q[1] - g[1]) * INV[md(q[0] - g[0])]);\n  st.next = fpAdd(q, g, K.b);\n  st.third = st.next ? [st.next[0], md(-st.next[1])] : null;\n  [st.dx, st.dy] = st.vert ? [0, 1] : shortStep(st.m);\n  const s0 = st.start, stepT = (pt) => (st.vert ? md(pt[1] - s0[1]) : md((pt[0] - s0[0]) * INV[st.dx]));\n  st.tR = st.third ? stepT(st.third) : P - 1;\n  // The real line, through G_r with slope rm or vertical.\n  const G = S.gr, Q = k === 0 ? null : realK(S, k);\n  if (k === 0 || k === N - 1) st.rv = true;\n  else if (k === 1) st.rm = (3 * G[0] * G[0] + A) / (2 * G[1]);\n  else if (Q) st.rm = (Q[1] - G[1]) / (Q[0] - G[0]);\n  else st.rm = 0;\n  st.rx = G[0];\n  st.ry = G[1];\n  if (k === N - 1) st.r3 = null;\n  else if (k === 0) st.r3 = [G[0], -G[1]];\n  else {\n    const x3 = st.rm * st.rm - G[0] - (Q ? Q[0] : G[0]);\n    st.r3 = [x3, G[1] + st.rm * (x3 - G[0])];\n  }\n  st.rn = st.r3 ? [st.r3[0], -st.r3[1]] : null;\n  S.step = st;\n}\n\nfunction finishStep(S) {\n  const st = S.step, N = S.curve.N;\n  S.past.push({ st, gs: S.gs + 1 });\n  S.gs++;\n  S.k = (S.k + 1) % N;\n  S.q = st.next;\n  if (st.next) S.trail.push({ k: S.k, gs: S.gs, fp: st.next, re: st.rn, ghost: 0 });\n  planStep(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trailK: 0.06, b: null, curve: null, curves: {}, g: null, gr: null, j: 1, side: 0,\n    k: 0, q: null, gs: 0, tau: 0, step: null, trail: [], past: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0];\n  S.speed = cl(kv[1], 0.2, 3);\n  S.trailK = cl(kv[3], 0, 1);\n  const b = round(cl(kv[2], CMIN, CMAX));\n  if (b !== S.b) {\n    S.b = b;\n    S.curve = S.curves[b] || (S.curves[b] = buildCurve(b));\n    S.trail.length = 0;\n    S.past.length = 0;\n    S.tau = 0;\n    startCycle(S, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.tau = 0;\n    startCycle(S, false);\n  }\n  S.tau += d * S.speed * RATE;\n  while (S.tau >= 1) {\n    S.tau -= 1;\n    finishStep(S);\n  }\n  // Ghosts of an old cycle fade out over 1.5 seconds.\n  for (const t of S.trail) if (t.ghost) t.ghost += d / 1.5;\n  const L = trailLen(S);\n  S.trail = S.trail.filter((t) => (t.ghost ? t.ghost \u003c 1 : S.gs + S.tau - t.gs \u003c L + 1));\n  S.past = S.past.filter((q) => S.gs + S.tau - q.gs \u003c linger(S));\n}\n\n// Past lines linger, fading: 1.6 steps at Trail 0, 8 steps at 1. They all\n// pass through G.\nconst linger = (S) => 1.6 + 6.4 * S.trailK ** 1.2;\n\nconst trailLen = (S) => 2 + (S.curve.N - 2) * (1 - S.trailK) ** 1.5;\n\n// ---- drawing ------------------------------------------------------------------\nfunction add(S, x, y, col, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0) return;\n  const p = y * W + x;\n  S.R[p] += col[0] * v;\n  S.G[p] += col[1] * v;\n  S.B[p] += col[2] * v;\n}\n\n// Real coordinates to LED coordinates (LED centres at whole numbers).\nconst px = (x) => (x - X0) * SX - 0.5;\nconst py = (y) => YC - y * SY;\n\nfunction disc(S, x, y, rad, col, v) {\n  const cx = px(x), cy = py(y);\n  for (let r = floor(cy - rad - 1); r \u003c= cy + rad + 1; r++)\n    for (let c = floor(cx - rad - 1); c \u003c= cx + rad + 1; c++) {\n      if (r \u003c 0 || r >= TOPH) continue;\n      const dd = sqrt((c - cx) ** 2 + (r - cy) ** 2);\n      add(S, c, r, col, v * cl(rad + 0.5 - dd, 0, 1));\n    }\n}\n\n// The real line through (x0, y0) with slope m, or the vertical through x0,\n// clipped to the window: one LED wide with a soft LED of glow either side.\nfunction realLine(S, x0, y0, m, vert, col, v) {\n  const k = vert ? 0 : (-m * SY) / SX, ax = px(x0), ay = py(y0);\n  if (!vert && abs(k) \u003c= 1) {\n    // Shallow: walk the columns, spread across rows.\n    for (let c = 0; c \u003c W; c++) {\n      const r = ay + k * (c - ax), r0 = floor(r);\n      for (let q = r0 - 1; q \u003c= r0 + 2; q++) if (q >= 0 && q \u003c TOPH) add(S, c, q, col, v * glow(abs(q - r)));\n    }\n  } else {\n    for (let r = 0; r \u003c TOPH; r++) {\n      const c = vert ? ax : ax + (r - ay) / k, c0 = floor(c);\n      for (let q = c0 - 1; q \u003c= c0 + 2; q++) add(S, q, r, col, v * glow(abs(q - c)));\n    }\n  }\n}\nconst glow = (d) => (d \u003c 1 ? 1 - 0.7 * d : d \u003c 2 ? 0.3 * (2 - d) : 0);\n\nconst inWin = (p) => p && p[0] > X0 - 0.2 && p[0] \u003c X1 + 0.2 && abs(p[1]) \u003c YM + 0.3;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.curve) return;\n  const { R, G, B, c } = S, K = S.curve, N = K.N, st = S.step, tau = S.tau;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h0 = S.hue + 0.6;\n  // The plane inside the real curve and the board are dim tints.\n  const plane = [0, 0, 0], ink = [0, 0, 0], board = [0, 0, 0], chord = [0, 0, 0], white = [1, 1, 1], base = [0, 0, 0];\n  // Round orange and yellow the dim tints lose most of their colour, or\n  // they would read brown and olive.\n  const hw = h0 + 0.03 - floor(h0 + 0.03), warm = cl(1 - abs(hw - 0.12) / 0.1, 0, 1);\n  hsv(h0, 0.75 - 0.5 * warm, 0.16, plane);\n  hsv(h0 - 0.02, 0.32, 0.92, ink);\n  hsv(h0 + 0.03, 0.6 - 0.4 * warm, 0.115, board);\n  hsv(h0 + 0.5, 0.42, 1, chord);\n  hsv(h0, 0.2, 0.34, base);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      const p = r * W + col, ln = K.line[p], fl = K.fill[p];\n      R[p] = (plane[0] * fl + ink[0] * ln) * 255;\n      G[p] = (plane[1] * fl + ink[1] * ln) * 255;\n      B[p] = (plane[2] * fl + ink[2] * ln) * 255;\n    }\n  for (let y = 0; y \u003c P; y++)\n    for (let x = 0; x \u003c P; x++) {\n      const p = (BY - y) * W + BX + x;\n      R[p] = board[0] * 255;\n      G[p] = board[1] * 255;\n      B[p] = board[2] * 255;\n    }\n  for (const [x, y] of K.pts) add(S, BX + x, BY - y, base, 255);\n\n  // The lines of the last few steps, fading: a pencil of lines through G.\n  for (const q of S.past) {\n    const w = 1 - (S.gs + tau - q.gs) / linger(S);\n    if (w \u003c= 0) continue;\n    const ps = q.st, s0 = ps.start;\n    realLine(S, ps.rx, ps.ry, ps.rm, ps.rv, chord, 130 * w);\n    for (let t = 0; t \u003c P; t++) {\n      const x = md(s0[0] + ps.dx * t), y = md(s0[1] + ps.dy * t);\n      add(S, BX + x, BY - y, chord, 55 * w);\n    }\n  }\n\n  // The trail: each multiple in its order's hue, the whole cycle once round\n  // the wheel, held for most of the trail and then let go.\n  const L = trailLen(S), now = S.gs + tau;\n  for (const t of S.trail) {\n    const age = now - t.gs;\n    let v = age \u003c 0.6 * L ? 1 : cl((L - age) / (0.4 * L), 0, 1);\n    if (t.ghost) v *= cl(1 - t.ghost, 0, 1);\n    if (v \u003c= 0.01) continue;\n    hsv(h0 + 0.42 + t.k / N, 0.88, 1, c);\n    add(S, BX + t.fp[0], BY - t.fp[1], c, 255 * v);\n    if (inWin(t.re)) disc(S, t.re[0], t.re[1], 1.5, c, 235 * v);\n    for (const [dx, dy] of NB) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 95 * v);\n    // A fresh landing blooms for a step and a half.\n    const bl = 1 - age / 1.5;\n    if (bl > 0 && !t.ghost) {\n      for (const [dx, dy] of NB2) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 110 * bl);\n      if (inWin(t.re)) disc(S, t.re[0], t.re[1], 2.6, c, 90 * bl);\n    }\n  }\n\n  // The step under way.\n  const lineV = tau \u003c 0.08 ? tau / 0.08 : tau > 0.88 ? (1 - tau) / 0.12 : 1;\n  // Real: the line, the third point, the mirror, the new point.\n  realLine(S, st.rx, st.ry, st.rm, st.rv, chord, 190 * lineV);\n  const mir = cl((tau - T_MIR0) / (T_MIR1 - T_MIR0), 0, 1);\n  if (tau > T_LINE * 0.9) {\n    if (st.r3 && inWin(st.r3)) disc(S, st.r3[0], st.r3[1], 1.3, white, 200 * lineV);\n    if (!st.r3) for (let r = 0; r \u003c 2; r++) add(S, round(px(st.rx)), r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.r3) {\n    const ya = py(st.r3[1]), yb = py(st.rn[1]), cc = round(px(st.r3[0]));\n    const yt = ya + (yb - ya) * mir;\n    for (let r = max(0, round(min(ya, yt))); r \u003c= min(TOPH - 1, round(max(ya, yt))); r++) if (r % 2 === 0) add(S, cc, r, white, 150 * lineV);\n  }\n  if (tau > T_MIR1 && st.rn && inWin(st.rn)) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.6, 1, c);\n    disc(S, st.rn[0], st.rn[1], 1.5, c, 255);\n  }\n  // F_61: the line's dots from Q_k, the head brightest, then the mirror.\n  const head = (min(tau, T_LINE) / T_LINE) * (P - 1), s0 = st.start;\n  for (let t = 0; t \u003c= head; t++) {\n    const x = md(s0[0] + st.dx * t), y = md(s0[1] + st.dy * t);\n    const on = K.onBoard[x * P + y];\n    const v = head - t \u003c 1 ? 1 : 0.85 + (on ? 0.15 : 0);\n    add(S, BX + x, BY - y, on ? white : chord, 230 * v * lineV);\n  }\n  if (head >= st.tR) {\n    if (st.third) {\n      const x = BX + st.third[0], y = BY - st.third[1];\n      for (const [dx, dy] of NB) add(S, x + dx, y + dy, white, 150 * lineV);\n    } else for (let r = OROW - 1; r \u003c= OROW; r++) add(S, BX + st.start[0], r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.third) {\n    const x = BX + st.third[0], ya = BY - st.third[1], yb = BY - st.next[1], yt = ya + (yb - ya) * mir;\n    for (let r = round(min(ya, yt)); r \u003c= round(max(ya, yt)); r++) if (r % 2 === 0) add(S, x, r, white, 120 * lineV);\n  }\n  if (tau > T_MIR1 && st.next) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.5, 1, c);\n    const x = BX + st.next[0], y = BY - st.next[1];\n    add(S, x, y, c, 255);\n    for (const [dx, dy] of NB) add(S, x + dx, y + dy, c, 140);\n  }\n  // G on both halves: white, with a dark ring round it on the real curve.\n  const gx = BX + S.g[0], gy = BY - S.g[1];\n  add(S, gx, gy, white, 255);\n  for (const [dx, dy] of NB) add(S, gx + dx, gy + dy, white, 120);\n  if (inWin(S.gr)) {\n    const cx = px(S.gr[0]), cy = py(S.gr[1]);\n    for (let r = floor(cy - 3); r \u003c= cy + 3; r++)\n      for (let q = floor(cx - 3); q \u003c= cx + 3; q++) {\n        if (r \u003c 0 || r >= TOPH || q \u003c 0 || q >= W) continue;\n        const dd = sqrt((q - cx) ** 2 + (r - cy) ** 2), p = r * W + q;\n        if (dd \u003c 2.6) {\n          const k = dd \u003c 1.4 ? 1 : 0.15;\n          R[p] = 255 * k;\n          G[p] = 255 * k;\n          B[p] = 255 * k;\n        }\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-elliptic-chords","type":"code","name":"elliptic-chords","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Elliptic Chords\n// Family:  number\n// Idea:    The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: elliptic curve group law, chord and tangent (Henri Poincaré, 1901), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1\n//\n// Knob 1: Hue. Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky.\n// Knob 2: Speed. Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44.\n// Knob 3: Curve. The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points.\n// Knob 4: Trail. Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below.\n// Buttons: K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.\n\nconst W = 64, H = 128, P = 61, A = -6, CMIN = -4, CMAX = 8;\n// The real window: x from -3.15 to 4.45 over the 64 columns, y from -7.75 to\n// 7.75 over rows 0..62, with y = 0 on row 31. Lines stay lines under this\n// stretch, and the mirror in the x-axis stays a vertical move.\nconst TOPH = 63, X0 = -3.15, X1 = 4.45, SX = W / (X1 - X0), YM = 7.75, SY = TOPH / (2 * YM), YC = 31;\n// The F_61 board: element (x, y) is column BX + x, row BY - y; O sits on row OROW above it.\nconst BX = 1, BY = 126, OROW = 64;\n// Phases of one group step: the line, the mirror, the landing.\nconst T_LINE = 0.5, T_MIR0 = 0.55, T_MIR1 = 0.78;\nconst NT = 1024;\n// Group steps a second for each unit of Speed.\nconst RATE = 0.75;\nconst { floor, min, max, abs, sqrt, sin, cos, tan, acos, cbrt, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (v) => ((v % P) + P) % P;\nconst NB = [[1, 0], [-1, 0], [0, 1], [0, -1]];\nconst NB2 = [[2, 0], [-2, 0], [0, 2], [0, -2], [1, 1], [1, -1], [-1, 1], [-1, -1]];\n\n// Inverses mod 61, by Fermat.\nconst INV = new Int32Array(P);\nfor (let i = 1; i \u003c P; i++) {\n  let r = 1, e = P - 2, q = i;\n  while (e) {\n    if (e & 1) r = (r * q) % P;\n    q = (q * q) % P;\n    e >>= 1;\n  }\n  INV[i] = r;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// ---- F_61 -------------------------------------------------------------------\n// A point is [x, y] with entries 0..60, or null for O.\nfunction fpAdd(p, q, b) {\n  if (!p) return q;\n  if (!q) return p;\n  if (p[0] === q[0] && md(p[1] + q[1]) === 0) return null;\n  const m = p[0] === q[0] ? md((3 * p[0] * p[0] + A) * INV[md(2 * p[1])]) : md((q[1] - p[1]) * INV[md(q[0] - p[0])]);\n  const x = md(m * m - p[0] - q[0]);\n  return [x, md(m * (p[0] - x) - p[1])];\n}\n\nfunction fpOrder(g, b) {\n  let q = g, n = 1;\n  while (q && n \u003c 200) {\n    q = fpAdd(q, g, b);\n    n++;\n  }\n  return n;\n}\n\n// ---- the real curve -----------------------------------------------------------\n// The roots of x^3 - 6x + b, largest first: three when 27 b^2 \u003c 864, so\n// when |b| \u003c 5.66, and then the curve has an egg over [e3, e2].\nfunction roots(b) {\n  if (4 * A * A * A + 27 * b * b \u003c 0) {\n    const r = 2 * sqrt(-A / 3), th = acos(((3 * b) / (2 * A)) * sqrt(-3 / A)) / 3;\n    return [0, 1, 2].map((k) => r * cos(th - (2 * PI * k) / 3)).sort((p, q) => q - p);\n  }\n  const s = sqrt((b * b) / 4 + (A * A * A) / 27);\n  let x = cbrt(-b / 2 + s) + cbrt(-b / 2 - s);\n  for (let i = 0; i \u003c 6; i++) x -= (x * x * x + A * x + b) / (3 * x * x + A);\n  return [x];\n}\n\n// The real points of the curve as a group are a circle, R/wZ, times {0, 1}\n// when the egg is there. The circle is measured by the invariant\n// differential dx/y: on the long branch u(x) = int_x^inf dt/sqrt(f), with\n// t = e1 + tan^2(phi), and on the egg v(x) = int_e3^x dt/sqrt(f), with\n// t = e3 + (e2 - e3) sin^2(theta), both free of the square-root ends. Both\n// halves of the circle come to the same w/2. Checked against the chord rule\n// in a scratch script: main(u1) + main(u2) = main(u1 + u2), main(u) + egg(v)\n// = egg(u + v) and egg(v1) + egg(v2) = main(v1 + v2), to 2e-6 in the window.\nfunction realCurve(b) {\n  const R = roots(b), e1 = R[0], c = e1 * e1 + A;\n  const U = new Float64Array(NT + 1), h = PI / 2 / NT;\n  const gm = (ph) => {\n    if (ph >= PI / 2 - 1e-12) return 2;\n    const s = tan(ph), t = e1 + s * s, co = cos(ph);\n    return 2 / sqrt(t * t + e1 * t + c) / (co * co);\n  };\n  for (let i = NT - 1; i >= 0; i--) U[i] = U[i + 1] + (h / 6) * (gm(i * h) + 4 * gm((i + 0.5) * h) + gm((i + 1) * h));\n  const C = { b, R, U, w: 2 * U[0], egg: null };\n  if (R.length === 3) {\n    const e2 = R[1], e3 = R[2], V = new Float64Array(NT + 1);\n    const ge = (th) => 2 / sqrt(e1 - e3 - (e2 - e3) * sin(th) ** 2);\n    for (let i = 0; i \u003c NT; i++) V[i + 1] = V[i] + (h / 6) * (ge(i * h) + 4 * ge((i + 0.5) * h) + ge((i + 1) * h));\n    C.egg = { V, e2, e3 };\n  }\n  return C;\n}\n\nconst f = (x, b) => x * x * x + A * x + b;\n\n// Fractional index where the monotone table T meets the value t.\nfunction seek(T, t, rising) {\n  let lo = 0, hi = NT;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (T[m] \u003c t === rising) lo = m;\n    else hi = m;\n  }\n  return lo + (t - T[lo]) / (T[hi] - T[lo] || 1);\n}\n\n// The real point at parameter u on the branch (s = 0) or the egg (s = 1);\n// null for O.\nfunction realPoint(C, u, s) {\n  const w = C.w;\n  u -= floor(u / w) * w;\n  if (s === 0 && (u \u003c 1e-9 || w - u \u003c 1e-9)) return null;\n  const up = u \u003c= w / 2, q = up ? u : w - u;\n  let x;\n  if (s === 0) {\n    const ph = (seek(C.U, q, false) * PI) / 2 / NT;\n    x = C.R[0] + tan(ph) ** 2;\n  } else {\n    const { V, e2, e3 } = C.egg, th = (seek(V, q, true) * PI) / 2 / NT;\n    x = e3 + (e2 - e3) * sin(th) ** 2;\n  }\n  const y = sqrt(max(0, f(x, C.b)));\n  // The egg runs the other way round, so that main(u) + egg(v) = egg(u + v).\n  return [x, (up ? 1 : -1) * (s === 0 ? 1 : -1) * y];\n}\n\n// ---- one curve: both halves ---------------------------------------------------\nfunction buildCurve(b) {\n  const pts = [];\n  for (let x = 0; x \u003c P; x++) for (let y = 0; y \u003c P; y++) if (md(y * y - f(x, b)) === 0) pts.push([x, y]);\n  let N = 0, gens = [];\n  for (const p of pts) {\n    const o = fpOrder(p, b);\n    if (o > N) (N = o), (gens = []);\n    if (o === N) gens.push(p);\n  }\n  const C = realCurve(b);\n  const onBoard = new Uint8Array(P * P);\n  for (const [x, y] of pts) onBoard[x * P + y] = 1;\n  // The static picture of the real curve: a 1.4-LED line where y^2 = f(x),\n  // found by the distance |y^2 - f| / |gradient| in LEDs, and a soft fill on\n  // the side where f(x) > y^2, the inside of the egg and of the branch.\n  const line = new Float32Array(W * TOPH), fill = new Float32Array(W * TOPH);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      let acc = 0, inside = 0;\n      for (let sy = 0; sy \u003c 3; sy++)\n        for (let sx = 0; sx \u003c 3; sx++) {\n          const x = X0 + (col + (sx + 0.5) / 3) / SX, y = (YC + 0.5 - (r + (sy + 0.5) / 3)) / SY;\n          const F = y * y - f(x, b), gx = (3 * x * x + A) / SX, gy = (2 * y) / SY;\n          const d = abs(F) / (sqrt(gx * gx + gy * gy) + 1e-9);\n          acc += cl(1.15 - d, 0, 1);\n          if (F \u003c 0) inside++;\n        }\n      line[r * W + col] = acc / 9;\n      fill[r * W + col] = inside / 9;\n    }\n  return { b, pts, N, gens, C, onBoard, line, fill };\n}\n\n// ---- the cycle ----------------------------------------------------------------\n// Q_k = kG. Step k goes from Q_k to Q_k+1 = Q_k + G: the line through G and\n// Q_k (the tangent at G when k = 1, the vertical through G when Q_k is O or\n// -G), its third point R, and R mirrored. The real generator is a point of\n// the same order N: on the egg at parameter jw/N when there is an egg and N\n// is even, so the odd multiples land on the egg and the even ones on the\n// branch, otherwise on the branch.\nfunction startCycle(S, fresh) {\n  const K = S.curve, N = K.N, C = K.C;\n  S.g = K.gens[floor(random() * K.gens.length)];\n  S.side = C.egg && N % 2 === 0 ? 1 : 0;\n  const js = [];\n  for (let j = 1; j \u003c N; j++) {\n    let a = j, bb = N;\n    while (bb) [a, bb] = [bb, a % bb];\n    if (a !== 1) continue;\n    const g = realPoint(C, (j * C.w) / N, S.side);\n    if (g && g[0] > X0 + 0.3 && g[0] \u003c X1 - 0.3 && abs(g[1]) \u003c YM - 0.4) js.push(j);\n  }\n  S.j = js.length ? js[floor(random() * js.length)] : 1;\n  S.gr = realPoint(C, (S.j * C.w) / N, S.side);\n  for (const t of S.trail) t.ghost = t.ghost || 1e-6;\n  if (fresh) {\n    // The opening shows the cycle already under way: 80% of it lit.\n    const k0 = round(0.8 * N);\n    let q = null;\n    for (let k = 1; k \u003c= k0; k++) {\n      q = fpAdd(q, S.g, K.b);\n      S.trail.push({ k, gs: S.gs - (k0 - k), fp: q, re: realK(S, k), ghost: 0 });\n    }\n    S.k = k0;\n    S.q = q;\n  } else {\n    S.k = 0;\n    S.q = null;\n  }\n  planStep(S);\n}\n\nconst realK = (S, k) => realPoint(S.curve.C, (k * S.j * S.curve.C.w) / S.curve.N, (k * S.side) & 1);\n\n// The F_61 line y = mx + c is the lattice of points (t, mt) mod 61 shifted\n// to one of them. Its shortest vector, found by Lagrange's reduction of the\n// basis (1, m), (0, 61), is never more than 8.4 long, and stepping by it still\n// visits all 61 points, so the walk runs along short streaks that wrap round\n// the square instead of jumping m rows at a time.\nfunction shortStep(m) {\n  let ax = 1, ay = m > P / 2 ? m - P : m, bx = 0, by = P;\n  const n2 = (x, y) => x * x + y * y;\n  for (let i = 0; i \u003c 20; i++) {\n    if (n2(bx, by) \u003c n2(ax, ay)) [ax, ay, bx, by] = [bx, by, ax, ay];\n    const mu = round((ax * bx + ay * by) / n2(ax, ay));\n    if (mu === 0) break;\n    bx -= mu * ax;\n    by -= mu * ay;\n  }\n  return [md(ax), md(ay)];\n}\n\nfunction planStep(S) {\n  const K = S.curve, N = K.N, k = S.k, g = S.g, q = S.q;\n  const st = { k, vert: false, m: 0, start: q || g, third: null, next: null, rm: 0, rx: 0, ry: 0, rv: false, r3: null, rn: null, tR: -1 };\n  // F_61: the line's slope, its 61 dots from Q_k (from G when Q_k is O), and\n  // how many steps along it the third point falls.\n  if (!q || (q[0] === g[0] && md(q[1] + g[1]) === 0)) st.vert = true;\n  else st.m = q[0] === g[0] ? md((3 * g[0] * g[0] + A) * INV[md(2 * g[1])]) : md((q[1] - g[1]) * INV[md(q[0] - g[0])]);\n  st.next = fpAdd(q, g, K.b);\n  st.third = st.next ? [st.next[0], md(-st.next[1])] : null;\n  [st.dx, st.dy] = st.vert ? [0, 1] : shortStep(st.m);\n  const s0 = st.start, stepT = (pt) => (st.vert ? md(pt[1] - s0[1]) : md((pt[0] - s0[0]) * INV[st.dx]));\n  st.tR = st.third ? stepT(st.third) : P - 1;\n  // The real line, through G_r with slope rm or vertical.\n  const G = S.gr, Q = k === 0 ? null : realK(S, k);\n  if (k === 0 || k === N - 1) st.rv = true;\n  else if (k === 1) st.rm = (3 * G[0] * G[0] + A) / (2 * G[1]);\n  else if (Q) st.rm = (Q[1] - G[1]) / (Q[0] - G[0]);\n  else st.rm = 0;\n  st.rx = G[0];\n  st.ry = G[1];\n  if (k === N - 1) st.r3 = null;\n  else if (k === 0) st.r3 = [G[0], -G[1]];\n  else {\n    const x3 = st.rm * st.rm - G[0] - (Q ? Q[0] : G[0]);\n    st.r3 = [x3, G[1] + st.rm * (x3 - G[0])];\n  }\n  st.rn = st.r3 ? [st.r3[0], -st.r3[1]] : null;\n  S.step = st;\n}\n\nfunction finishStep(S) {\n  const st = S.step, N = S.curve.N;\n  S.past.push({ st, gs: S.gs + 1 });\n  S.gs++;\n  S.k = (S.k + 1) % N;\n  S.q = st.next;\n  if (st.next) S.trail.push({ k: S.k, gs: S.gs, fp: st.next, re: st.rn, ghost: 0 });\n  planStep(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trailK: 0.06, b: null, curve: null, curves: {}, g: null, gr: null, j: 1, side: 0,\n    k: 0, q: null, gs: 0, tau: 0, step: null, trail: [], past: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0];\n  S.speed = cl(kv[1], 0.2, 3);\n  S.trailK = cl(kv[3], 0, 1);\n  const b = round(cl(kv[2], CMIN, CMAX));\n  if (b !== S.b) {\n    S.b = b;\n    S.curve = S.curves[b] || (S.curves[b] = buildCurve(b));\n    S.trail.length = 0;\n    S.past.length = 0;\n    S.tau = 0;\n    startCycle(S, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.tau = 0;\n    startCycle(S, false);\n  }\n  S.tau += d * S.speed * RATE;\n  while (S.tau >= 1) {\n    S.tau -= 1;\n    finishStep(S);\n  }\n  // Ghosts of an old cycle fade out over 1.5 seconds.\n  for (const t of S.trail) if (t.ghost) t.ghost += d / 1.5;\n  const L = trailLen(S);\n  S.trail = S.trail.filter((t) => (t.ghost ? t.ghost \u003c 1 : S.gs + S.tau - t.gs \u003c L + 1));\n  S.past = S.past.filter((q) => S.gs + S.tau - q.gs \u003c linger(S));\n}\n\n// Past lines linger, fading: 1.6 steps at Trail 0, 8 steps at 1. They all\n// pass through G.\nconst linger = (S) => 1.6 + 6.4 * S.trailK ** 1.2;\n\nconst trailLen = (S) => 2 + (S.curve.N - 2) * (1 - S.trailK) ** 1.5;\n\n// ---- drawing ------------------------------------------------------------------\nfunction add(S, x, y, col, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0) return;\n  const p = y * W + x;\n  S.R[p] += col[0] * v;\n  S.G[p] += col[1] * v;\n  S.B[p] += col[2] * v;\n}\n\n// Real coordinates to LED coordinates (LED centres at whole numbers).\nconst px = (x) => (x - X0) * SX - 0.5;\nconst py = (y) => YC - y * SY;\n\nfunction disc(S, x, y, rad, col, v) {\n  const cx = px(x), cy = py(y);\n  for (let r = floor(cy - rad - 1); r \u003c= cy + rad + 1; r++)\n    for (let c = floor(cx - rad - 1); c \u003c= cx + rad + 1; c++) {\n      if (r \u003c 0 || r >= TOPH) continue;\n      const dd = sqrt((c - cx) ** 2 + (r - cy) ** 2);\n      add(S, c, r, col, v * cl(rad + 0.5 - dd, 0, 1));\n    }\n}\n\n// The real line through (x0, y0) with slope m, or the vertical through x0,\n// clipped to the window: one LED wide with a soft LED of glow either side.\nfunction realLine(S, x0, y0, m, vert, col, v) {\n  const k = vert ? 0 : (-m * SY) / SX, ax = px(x0), ay = py(y0);\n  if (!vert && abs(k) \u003c= 1) {\n    // Shallow: walk the columns, spread across rows.\n    for (let c = 0; c \u003c W; c++) {\n      const r = ay + k * (c - ax), r0 = floor(r);\n      for (let q = r0 - 1; q \u003c= r0 + 2; q++) if (q >= 0 && q \u003c TOPH) add(S, c, q, col, v * glow(abs(q - r)));\n    }\n  } else {\n    for (let r = 0; r \u003c TOPH; r++) {\n      const c = vert ? ax : ax + (r - ay) / k, c0 = floor(c);\n      for (let q = c0 - 1; q \u003c= c0 + 2; q++) add(S, q, r, col, v * glow(abs(q - c)));\n    }\n  }\n}\nconst glow = (d) => (d \u003c 1 ? 1 - 0.7 * d : d \u003c 2 ? 0.3 * (2 - d) : 0);\n\nconst inWin = (p) => p && p[0] > X0 - 0.2 && p[0] \u003c X1 + 0.2 && abs(p[1]) \u003c YM + 0.3;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.curve) return;\n  const { R, G, B, c } = S, K = S.curve, N = K.N, st = S.step, tau = S.tau;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h0 = S.hue + 0.6;\n  // The plane inside the real curve and the board are dim tints.\n  const plane = [0, 0, 0], ink = [0, 0, 0], board = [0, 0, 0], chord = [0, 0, 0], white = [1, 1, 1], base = [0, 0, 0];\n  // Round orange and yellow the dim tints lose most of their colour, or\n  // they would read brown and olive.\n  const hw = h0 + 0.03 - floor(h0 + 0.03), warm = cl(1 - abs(hw - 0.12) / 0.1, 0, 1);\n  hsv(h0, 0.75 - 0.5 * warm, 0.16, plane);\n  hsv(h0 - 0.02, 0.32, 0.92, ink);\n  hsv(h0 + 0.03, 0.6 - 0.4 * warm, 0.115, board);\n  hsv(h0 + 0.5, 0.42, 1, chord);\n  hsv(h0, 0.2, 0.34, base);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      const p = r * W + col, ln = K.line[p], fl = K.fill[p];\n      R[p] = (plane[0] * fl + ink[0] * ln) * 255;\n      G[p] = (plane[1] * fl + ink[1] * ln) * 255;\n      B[p] = (plane[2] * fl + ink[2] * ln) * 255;\n    }\n  for (let y = 0; y \u003c P; y++)\n    for (let x = 0; x \u003c P; x++) {\n      const p = (BY - y) * W + BX + x;\n      R[p] = board[0] * 255;\n      G[p] = board[1] * 255;\n      B[p] = board[2] * 255;\n    }\n  for (const [x, y] of K.pts) add(S, BX + x, BY - y, base, 255);\n\n  // The lines of the last few steps, fading: a pencil of lines through G.\n  for (const q of S.past) {\n    const w = 1 - (S.gs + tau - q.gs) / linger(S);\n    if (w \u003c= 0) continue;\n    const ps = q.st, s0 = ps.start;\n    realLine(S, ps.rx, ps.ry, ps.rm, ps.rv, chord, 130 * w);\n    for (let t = 0; t \u003c P; t++) {\n      const x = md(s0[0] + ps.dx * t), y = md(s0[1] + ps.dy * t);\n      add(S, BX + x, BY - y, chord, 55 * w);\n    }\n  }\n\n  // The trail: each multiple in its order's hue, the whole cycle once round\n  // the wheel, held for most of the trail and then let go.\n  const L = trailLen(S), now = S.gs + tau;\n  for (const t of S.trail) {\n    const age = now - t.gs;\n    let v = age \u003c 0.6 * L ? 1 : cl((L - age) / (0.4 * L), 0, 1);\n    if (t.ghost) v *= cl(1 - t.ghost, 0, 1);\n    if (v \u003c= 0.01) continue;\n    hsv(h0 + 0.42 + t.k / N, 0.88, 1, c);\n    add(S, BX + t.fp[0], BY - t.fp[1], c, 255 * v);\n    if (inWin(t.re)) disc(S, t.re[0], t.re[1], 1.5, c, 235 * v);\n    for (const [dx, dy] of NB) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 95 * v);\n    // A fresh landing blooms for a step and a half.\n    const bl = 1 - age / 1.5;\n    if (bl > 0 && !t.ghost) {\n      for (const [dx, dy] of NB2) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 110 * bl);\n      if (inWin(t.re)) disc(S, t.re[0], t.re[1], 2.6, c, 90 * bl);\n    }\n  }\n\n  // The step under way.\n  const lineV = tau \u003c 0.08 ? tau / 0.08 : tau > 0.88 ? (1 - tau) / 0.12 : 1;\n  // Real: the line, the third point, the mirror, the new point.\n  realLine(S, st.rx, st.ry, st.rm, st.rv, chord, 190 * lineV);\n  const mir = cl((tau - T_MIR0) / (T_MIR1 - T_MIR0), 0, 1);\n  if (tau > T_LINE * 0.9) {\n    if (st.r3 && inWin(st.r3)) disc(S, st.r3[0], st.r3[1], 1.3, white, 200 * lineV);\n    if (!st.r3) for (let r = 0; r \u003c 2; r++) add(S, round(px(st.rx)), r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.r3) {\n    const ya = py(st.r3[1]), yb = py(st.rn[1]), cc = round(px(st.r3[0]));\n    const yt = ya + (yb - ya) * mir;\n    for (let r = max(0, round(min(ya, yt))); r \u003c= min(TOPH - 1, round(max(ya, yt))); r++) if (r % 2 === 0) add(S, cc, r, white, 150 * lineV);\n  }\n  if (tau > T_MIR1 && st.rn && inWin(st.rn)) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.6, 1, c);\n    disc(S, st.rn[0], st.rn[1], 1.5, c, 255);\n  }\n  // F_61: the line's dots from Q_k, the head brightest, then the mirror.\n  const head = (min(tau, T_LINE) / T_LINE) * (P - 1), s0 = st.start;\n  for (let t = 0; t \u003c= head; t++) {\n    const x = md(s0[0] + st.dx * t), y = md(s0[1] + st.dy * t);\n    const on = K.onBoard[x * P + y];\n    const v = head - t \u003c 1 ? 1 : 0.85 + (on ? 0.15 : 0);\n    add(S, BX + x, BY - y, on ? white : chord, 230 * v * lineV);\n  }\n  if (head >= st.tR) {\n    if (st.third) {\n      const x = BX + st.third[0], y = BY - st.third[1];\n      for (const [dx, dy] of NB) add(S, x + dx, y + dy, white, 150 * lineV);\n    } else for (let r = OROW - 1; r \u003c= OROW; r++) add(S, BX + st.start[0], r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.third) {\n    const x = BX + st.third[0], ya = BY - st.third[1], yb = BY - st.next[1], yt = ya + (yb - ya) * mir;\n    for (let r = round(min(ya, yt)); r \u003c= round(max(ya, yt)); r++) if (r % 2 === 0) add(S, x, r, white, 120 * lineV);\n  }\n  if (tau > T_MIR1 && st.next) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.5, 1, c);\n    const x = BX + st.next[0], y = BY - st.next[1];\n    add(S, x, y, c, 255);\n    for (const [dx, dy] of NB) add(S, x + dx, y + dy, c, 140);\n  }\n  // G on both halves: white, with a dark ring round it on the real curve.\n  const gx = BX + S.g[0], gy = BY - S.g[1];\n  add(S, gx, gy, white, 255);\n  for (const [dx, dy] of NB) add(S, gx + dx, gy + dy, white, 120);\n  if (inWin(S.gr)) {\n    const cx = px(S.gr[0]), cy = py(S.gr[1]);\n    for (let r = floor(cy - 3); r \u003c= cy + 3; r++)\n      for (let q = floor(cx - 3); q \u003c= cx + 3; q++) {\n        if (r \u003c 0 || r >= TOPH || q \u003c 0 || q >= W) continue;\n        const dd = sqrt((q - cx) ** 2 + (r - cy) ** 2), p = r * W + q;\n        if (dd \u003c 2.6) {\n          const k = dd \u003c 1.4 ? 1 : 0.15;\n          R[p] = 255 * k;\n          G[p] = 255 * k;\n          B[p] = 255 * k;\n        }\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky."},{"name":"Speed","min":0.2,"max":3,"about":"Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44."},{"name":"Curve","min":-4,"max":8,"about":"The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points."},{"name":"Trail","min":0,"max":1,"about":"Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below."}],"start":[0,2,0,0.06],"measures":{"motion":0.0496,"detail":0.0598,"edges":0.5832,"complexity":0.5264,"coverage":0.6226,"colour":0.1255,"drift":0.0238},"knobResponse":[0.0592,0.0309,0.1041,0.0281]},{"slug":"embossed-glow","title":"Embossed Glow","family":"cosmetic","round":37,"note":"엠보싱한 하이라이터의 눌린 면이 패널을 채우고, 떠도는 작은 램프를 향한 비탈이 부드러운 띠로 빛나요. 반짝이 알갱이는 면이 램프 쪽으로 7도 안에 설 때만 빛나서 반짝임이 능선을 타고 옮겨 가요. 6.5초마다 보이지 않는 손끝이 홈을 쓸어 엠보싱을 새틴 띠로 눌러 펴고, 네 번 쓸면 판이 다시 눌려요. K3 은 물결과 퀼팅 마름모, 갈매기, 비늘 무늬를 고르고, 누르면 판을 바로 다시 눌러요.","idea":"The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.","buttons":"K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.","code":"// ===== Patternflow pattern =====\n// Title:   Embossed Glow\n// Family:  cosmetic\n// Idea:    The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after embossed baked highlighters and pressed powder compacts\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1\n//\n// Knob 1: Hue. The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive.\n// Knob 2: Speed. At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again.\n// Knob 3: Relief. The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3.\n// Knob 4: Lamp. How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin.\n// Buttons: K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, abs, min, max, pow, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst fr = (v) => v - floor(v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The four reliefs as heights from 0 (the floor of a groove) to 1 (a crest),\n// in LEDs from the top left. Each repeats every 9 to 24 LEDs, wide enough\n// that a slope spans three or more LEDs and its band reads.\nfunction relief(kind, x, y) {\n  if (kind === 0) {\n    // Ripples round the middle, 9 LEDs apart, crests a little sharper than\n    // the troughs.\n    const r = hypot(x - 31.5, y - 63.5), c = 0.5 + 0.5 * cos((2 * PI * r) / 9);\n    return pow(c, 0.8) * sm(0, 4, r) + (1 - sm(0, 4, r)) * 0.8;\n  }\n  if (kind === 1) {\n    // Quilted diamonds 16 wide and 24 tall: each a pillow, stitched down\n    // along its edges.\n    const u = x / 16 + y / 24, v = x / 16 - y / 24, fu = fr(u) - 0.5, fv = fr(v) - 0.5;\n    return pow(cos(PI * fu) * cos(PI * fv), 0.55);\n  }\n  if (kind === 2) {\n    // Chevrons 16 LEDs a V, stacked every 10 rows, with a sharp crest and a\n    // long back slope like a pressed rib.\n    const yv = y + 8 * abs(2 * fr(x / 16 + 0.5) - 1), t = fr(yv / 10);\n    return t \u003c 0.3 ? sm(0, 0.3, t) : 1 - sm(0.3, 1, t);\n  }\n  // Scales 14 wide in rows 9 apart, each row overlapping the one above,\n  // every scale rising to a rounded lip at its lower edge.\n  const j = floor(y / 9 + 0.5);\n  let best = -1, hh = 0;\n  for (let jj = j + 1; jj >= j - 1; jj--) {\n    const off = jj & 1 ? 7 : 0, i = round((x - off) / 14), cx = i * 14 + off, cy = jj * 9 - 4;\n    const d = hypot(x - cx, (y - cy) * 1.05) / 9;\n    if (d \u003c 1 && y >= cy) {\n      best = jj;\n      hh = 0.2 + 0.8 * sm(0.1, 0.85, d) * (1 - sm(0.9, 1, d));\n      break;\n    }\n  }\n  return best \u003c 0 ? 0 : hh;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, kind: -1, lamp: 0.06, clock: 0, started: false,\n    rel: new Float32Array(N), wipe: new Float32Array(N), hgt: new Float32Array(N),\n    gx: new Float32Array(N), gy: new Float32Array(N), gw: new Float32Array(N), gt: new Uint8Array(N),\n    swipe: null, nextSwipe: 2.2, swipes: 0, press: -1, pal: new Float32Array(16), palHue: NaN,\n  });\n  // A shimmer grain under every LED: its facet leans up to 13 degrees off\n  // the surface, every way, so the glints gather where the surface itself\n  // nearly faces the half vector, along the lit flank of each ridge. Half the\n  // grains are bright enough to glint and one in three of those flips to the\n  // second tint.\n  for (let p = 0; p \u003c N; p++) {\n    const a = random() * 2 * PI, t = 0.23 * sqrt(random());\n    S.gx[p] = t * cos(a);\n    S.gy[p] = t * sin(a);\n    const g = random();\n    S.gw[p] = g \u003c 0.5 ? 0.5 + 0.5 * random() : 0.1 * random();\n    S.gt[p] = random() \u003c 0.33 ? 1 : 0;\n  }\n}\n\nfunction setRelief(S, kind) {\n  S.kind = kind;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) S.rel[y * W + x] = relief(kind, x, y);\n}\n\n// A swipe: a slightly bent stroke 9 to 13 LEDs wide, mostly up or down the\n// panel, entering and leaving near the edges.\nfunction newSwipe() {\n  const down = random() \u003c 0.5, x0 = 8 + random() * 48, x1 = 8 + random() * 48;\n  const y0 = down ? -6 : H + 6, y1 = down ? 30 + random() * 80 : 98 - random() * 80;\n  return {\n    x0, y0, x1, y1, bx: (x0 + x1) / 2 + (random() - 0.5) * 40, by: (y0 + y1) / 2,\n    r: 4.5 + random() * 2, t: 0, last: 0,\n  };\n}\n\nfunction stamp(S, x, y, r) {\n  for (let yy = max(0, floor(y - r - 2)); yy \u003c= min(H - 1, y + r + 2); yy++)\n    for (let xx = max(0, floor(x - r - 2)); xx \u003c= min(W - 1, x + r + 2); xx++) {\n      const d = hypot(xx - x, yy - y), w = 1 - sm(r - 1.5, r + 1.5, d), p = yy * W + xx;\n      if (w > S.wipe[p]) S.wipe[p] = w;\n    }\n}\n\nfunction stepSwipe(S, ds) {\n  const sw = S.swipe;\n  sw.t = min(1, sw.t + ds / 0.7);\n  // Ease in and out: the fingertip lands, drags and lifts.\n  const e = sm(0, 1, sw.t);\n  const n = max(1, Math.ceil((e - sw.last) * 120));\n  for (let i = 1; i \u003c= n; i++) {\n    const u = sw.last + ((e - sw.last) * i) / n, v = 1 - u;\n    stamp(S, v * v * sw.x0 + 2 * u * v * sw.bx + u * u * sw.x1, v * v * sw.y0 + 2 * u * v * sw.by + u * u * sw.y1, sw.r * (0.75 + 0.25 * sin(PI * min(1, u * 1.4))));\n  }\n  sw.last = e;\n  if (sw.t >= 1) S.swipe = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.lamp = cl(k[3], -1, 1);\n  const kind = cl(round(k[2]), 0, 3);\n  if (kind !== S.kind) setRelief(S, kind);\n  if (!S.started) {\n    // Open on a pan that has had one swipe already.\n    S.swipe = newSwipe();\n    S.swipe.x0 = 14;\n    S.swipe.x1 = 50;\n    S.swipe.y0 = -6;\n    S.swipe.y1 = 92;\n    S.swipe.bx = 6;\n    while (S.swipe) stepSwipe(S, 0.05);\n    S.started = true;\n  }\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  if (input.btnPressed && input.btnPressed[0] && S.press \u003c 0) S.press = 0;\n  if (S.press >= 0) {\n    // The pressing edge runs down from the top in 2.4 s, or 4.8 s at Speed\n    // 1 and below, so a tap is never a long wait. Above it every trough is\n    // gone; the last 12 rows over it are part way.\n    S.press += d * max(0.5, S.speed / 2);\n    const y1 = (S.press / 2.4) * (H + 24) - 12;\n    for (let y = 0; y \u003c min(H, y1); y++) {\n      const keep = sm(y1 - 12, y1, y);\n      for (let x = 0; x \u003c W; x++) if (S.wipe[y * W + x] > keep) S.wipe[y * W + x] = keep;\n    }\n    if (y1 > H + 12) S.press = -1;\n  }\n  if (S.swipe) stepSwipe(S, ds);\n  else if (S.clock >= S.nextSwipe) {\n    S.nextSwipe = S.clock + 6.5;\n    S.swipes++;\n    if (S.swipes % 5 === 0 && S.press \u003c 0) S.press = 0;\n    else S.swipe = newSwipe();\n  }\n}\n\nfunction palette(S) {\n  // At Hue 0 a pink pearl. Where the hue comes round to orange, gold and\n  // lime the body is laid paler and brighter and its shaded side leans to\n  // rose, as at half light those hues read brown or olive. Elsewhere the\n  // shaded side is the same hue a little deeper. The sheen is a pale tint a\n  // fourteenth of the wheel on, and the glints come in two tints, the\n  // shade's own and one a tenth on, as pearl pigment flips.\n  const h = S.hue + 0.9, hh = fr(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.03, hw) * (1 - sm(0.26, 0.38, hw));\n  hsv(h, 0.42 - 0.14 * warm, 0.94 + 0.05 * warm, S.pal, 0);\n  hsv(h - 0.12 * warm, 0.56 - 0.04 * warm, 1, S.pal, 3);\n  hsv(h + 0.07, 0.3, 1, S.pal, 6);\n  hsv(h, 0.22, 1, S.pal, 9);\n  hsv(h + 0.1, 0.3, 1, S.pal, 12);\n  S.pal[15] = warm;\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const { rel, wipe, hgt, gx, gy, gw, gt, pal } = S;\n  // The lamp wanders on a slow Lissajous path over the whole panel, 9 LEDs\n  // above it at Lamp -1, 32 at 0.06 and 64 at 1.\n  const t = S.clock, lx = 32 + 24 * sin(t * 0.37 + 1.1), ly = 64 + 44 * sin(t * 0.23 + 0.4);\n  const lh = 32 + (S.lamp >= 0.06 ? ((S.lamp - 0.06) / 0.94) * 32 : ((S.lamp - 0.06) / 1.06) * 23);\n  // Above 0.06 the room light comes up too: a light straight overhead, 2.4\n  // times the lamp at Lamp 1, which lights every flank alike and evens out\n  // the pool.\n  const up = S.lamp > 0.06 ? (S.lamp - 0.06) / 0.94 : 0, over = 2.4 * up, poolLift = 0.4 * up;\n  // The eye sways 1.5 degrees, as a shopper's would, so the glints twinkle\n  // even while the lamp holds still.\n  let ex = 0.026 * sin(t * 2.1), ey = 0.026 * sin(t * 1.7 + 2);\n  const en = 1 / sqrt(ex * ex + ey * ey + 1);\n  ex *= en;\n  ey *= en;\n  const ez = en;\n  // Height in LEDs: crests stand 2 above the grooves. Under a swipe the\n  // emboss is flattened to a trough 0.2 below the grooves, with a low lip of\n  // pushed powder at its edge. Under the pressing edge the emboss is pushed\n  // down to a sixth over a band 20 rows tall and springs back behind it.\n  const py1 = S.press >= 0 ? (S.press / 2.4) * (H + 24) - 12 : -1e9;\n  for (let y = 0; y \u003c H; y++) {\n    const rise = 1 - 0.85 * (1 - sm(0, 10, abs(y - py1 + 4)));\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, w = wipe[p];\n      hgt[p] = 2 * (rel[p] * rise * (1 - w) - 0.11 * w + 0.5 * w * (1 - w));\n    }\n  }\n  const warm = pal[15], amb = 0.22 + 0.36 * warm, COSG = cos((7 * PI) / 180);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, h = hgt[p];\n      const hx = (x \u003c W - 1 ? hgt[p + 1] : h) - (x > 0 ? hgt[p - 1] : h), hy = (y \u003c H - 1 ? hgt[p + W] : h) - (y > 0 ? hgt[p - W] : h);\n      let nx = -hx * 0.5, ny = -hy * 0.5, nz = 1;\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1);\n      nx *= nn;\n      ny *= nn;\n      nz *= nn;\n      let ldx = lx - x, ldy = ly - y, ldz = lh - h;\n      const flat2 = ldx * ldx + ldy * ldy;\n      let li = 1 / sqrt(flat2 + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz = ldz * li + over;\n      li = 1 / sqrt(ldx * ldx + ldy * ldy + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz *= li;\n      let hvx = ldx + ex, hvy = ldy + ey, hvz = ldz + ez;\n      const hn = 1 / sqrt(hvx * hvx + hvy * hvy + hvz * hvz);\n      hvx *= hn;\n      hvy *= hn;\n      hvz *= hn;\n      // The lamp's pool: full under it, half 40 LEDs out, never under 0.3.\n      const pool = 0.3 + 0.7 / (1 + flat2 / 1600) + poolLift, w = wipe[p];\n      // A slope lights by how much more it faces the lamp than the flat\n      // powder does (Lambert over the flat's own Lambert), so a low lamp\n      // rakes the whole pan, up to 1.7 times the flat on a facing flank and\n      // down to a fifth on the far one, while light from overhead lights\n      // every flank nearly alike. Rose, orange and yellow keep only 55% of\n      // that range, so their dark side never browns.\n      const fl = cl((0.7 * (nx * ldx + ny * ldy + nz * ldz)) / max(ldz, 0.12), 0.14, 1.2);\n      const lit = pool * (fl + (0.75 - fl) * 0.45 * warm);\n      // Satin sheen: broad on the grainy powder and broader still in a\n      // trough, where the finger has pressed it smooth and it glows as one.\n      const nh = max(0, nx * hvx + ny * hvy + nz * hvz), sheen = pow(nh, 12 - 6 * w) * (0.55 + 0.08 * w) * pool;\n      // A grain glints when its facet is within 7 degrees of the half vector.\n      const mx = nx + gx[p], my = ny + gy[p], mz = nz, md = (mx * hvx + my * hvy + mz * hvz) / sqrt(mx * mx + my * my + mz * mz);\n      let gl = 0;\n      if (md > COSG) {\n        const q = (md - COSG) / (1 - COSG);\n        gl = gw[p] * q * q * (1 - w) * (1 - w) * (0.5 + 0.7 * pool) * 1.6;\n      }\n      const body = (amb + (1 - amb) * lit) * (0.94 + 0.12 * gw[p]), o = gt[p] ? 12 : 9;\n      // Lit faces take the body colour, shaded ones the shade colour, and a\n      // trough leans a third of the way to the shade colour.\n      const u = cl(lit, 0, 1) * (1 - 0.35 * w), v = 1 - u;\n      let r = (pal[0] * u + pal[3] * v) * body + pal[6] * sheen + pal[o] * gl;\n      let g = (pal[1] * u + pal[4] * v) * body + pal[7] * sheen + pal[o + 1] * gl;\n      let b = (pal[2] * u + pal[5] * v) * body + pal[8] * sheen + pal[o + 2] * gl;\n      // Past full brightness the colour is scaled down whole rather than\n      // clipped channel by channel, so a glint stays a tint and not white.\n      const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (m > 1) (r /= m), (g /= m), (b /= m);\n      display.setPixel(x, y, 255 * r, 255 * g, 255 * b);\n    }\n}\n","layer":{"id":"layer-embossed-glow","type":"code","name":"embossed-glow","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Embossed Glow\n// Family:  cosmetic\n// Idea:    The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after embossed baked highlighters and pressed powder compacts\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1\n//\n// Knob 1: Hue. The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive.\n// Knob 2: Speed. At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again.\n// Knob 3: Relief. The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3.\n// Knob 4: Lamp. How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin.\n// Buttons: K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, abs, min, max, pow, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst fr = (v) => v - floor(v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The four reliefs as heights from 0 (the floor of a groove) to 1 (a crest),\n// in LEDs from the top left. Each repeats every 9 to 24 LEDs, wide enough\n// that a slope spans three or more LEDs and its band reads.\nfunction relief(kind, x, y) {\n  if (kind === 0) {\n    // Ripples round the middle, 9 LEDs apart, crests a little sharper than\n    // the troughs.\n    const r = hypot(x - 31.5, y - 63.5), c = 0.5 + 0.5 * cos((2 * PI * r) / 9);\n    return pow(c, 0.8) * sm(0, 4, r) + (1 - sm(0, 4, r)) * 0.8;\n  }\n  if (kind === 1) {\n    // Quilted diamonds 16 wide and 24 tall: each a pillow, stitched down\n    // along its edges.\n    const u = x / 16 + y / 24, v = x / 16 - y / 24, fu = fr(u) - 0.5, fv = fr(v) - 0.5;\n    return pow(cos(PI * fu) * cos(PI * fv), 0.55);\n  }\n  if (kind === 2) {\n    // Chevrons 16 LEDs a V, stacked every 10 rows, with a sharp crest and a\n    // long back slope like a pressed rib.\n    const yv = y + 8 * abs(2 * fr(x / 16 + 0.5) - 1), t = fr(yv / 10);\n    return t \u003c 0.3 ? sm(0, 0.3, t) : 1 - sm(0.3, 1, t);\n  }\n  // Scales 14 wide in rows 9 apart, each row overlapping the one above,\n  // every scale rising to a rounded lip at its lower edge.\n  const j = floor(y / 9 + 0.5);\n  let best = -1, hh = 0;\n  for (let jj = j + 1; jj >= j - 1; jj--) {\n    const off = jj & 1 ? 7 : 0, i = round((x - off) / 14), cx = i * 14 + off, cy = jj * 9 - 4;\n    const d = hypot(x - cx, (y - cy) * 1.05) / 9;\n    if (d \u003c 1 && y >= cy) {\n      best = jj;\n      hh = 0.2 + 0.8 * sm(0.1, 0.85, d) * (1 - sm(0.9, 1, d));\n      break;\n    }\n  }\n  return best \u003c 0 ? 0 : hh;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, kind: -1, lamp: 0.06, clock: 0, started: false,\n    rel: new Float32Array(N), wipe: new Float32Array(N), hgt: new Float32Array(N),\n    gx: new Float32Array(N), gy: new Float32Array(N), gw: new Float32Array(N), gt: new Uint8Array(N),\n    swipe: null, nextSwipe: 2.2, swipes: 0, press: -1, pal: new Float32Array(16), palHue: NaN,\n  });\n  // A shimmer grain under every LED: its facet leans up to 13 degrees off\n  // the surface, every way, so the glints gather where the surface itself\n  // nearly faces the half vector, along the lit flank of each ridge. Half the\n  // grains are bright enough to glint and one in three of those flips to the\n  // second tint.\n  for (let p = 0; p \u003c N; p++) {\n    const a = random() * 2 * PI, t = 0.23 * sqrt(random());\n    S.gx[p] = t * cos(a);\n    S.gy[p] = t * sin(a);\n    const g = random();\n    S.gw[p] = g \u003c 0.5 ? 0.5 + 0.5 * random() : 0.1 * random();\n    S.gt[p] = random() \u003c 0.33 ? 1 : 0;\n  }\n}\n\nfunction setRelief(S, kind) {\n  S.kind = kind;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) S.rel[y * W + x] = relief(kind, x, y);\n}\n\n// A swipe: a slightly bent stroke 9 to 13 LEDs wide, mostly up or down the\n// panel, entering and leaving near the edges.\nfunction newSwipe() {\n  const down = random() \u003c 0.5, x0 = 8 + random() * 48, x1 = 8 + random() * 48;\n  const y0 = down ? -6 : H + 6, y1 = down ? 30 + random() * 80 : 98 - random() * 80;\n  return {\n    x0, y0, x1, y1, bx: (x0 + x1) / 2 + (random() - 0.5) * 40, by: (y0 + y1) / 2,\n    r: 4.5 + random() * 2, t: 0, last: 0,\n  };\n}\n\nfunction stamp(S, x, y, r) {\n  for (let yy = max(0, floor(y - r - 2)); yy \u003c= min(H - 1, y + r + 2); yy++)\n    for (let xx = max(0, floor(x - r - 2)); xx \u003c= min(W - 1, x + r + 2); xx++) {\n      const d = hypot(xx - x, yy - y), w = 1 - sm(r - 1.5, r + 1.5, d), p = yy * W + xx;\n      if (w > S.wipe[p]) S.wipe[p] = w;\n    }\n}\n\nfunction stepSwipe(S, ds) {\n  const sw = S.swipe;\n  sw.t = min(1, sw.t + ds / 0.7);\n  // Ease in and out: the fingertip lands, drags and lifts.\n  const e = sm(0, 1, sw.t);\n  const n = max(1, Math.ceil((e - sw.last) * 120));\n  for (let i = 1; i \u003c= n; i++) {\n    const u = sw.last + ((e - sw.last) * i) / n, v = 1 - u;\n    stamp(S, v * v * sw.x0 + 2 * u * v * sw.bx + u * u * sw.x1, v * v * sw.y0 + 2 * u * v * sw.by + u * u * sw.y1, sw.r * (0.75 + 0.25 * sin(PI * min(1, u * 1.4))));\n  }\n  sw.last = e;\n  if (sw.t >= 1) S.swipe = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.lamp = cl(k[3], -1, 1);\n  const kind = cl(round(k[2]), 0, 3);\n  if (kind !== S.kind) setRelief(S, kind);\n  if (!S.started) {\n    // Open on a pan that has had one swipe already.\n    S.swipe = newSwipe();\n    S.swipe.x0 = 14;\n    S.swipe.x1 = 50;\n    S.swipe.y0 = -6;\n    S.swipe.y1 = 92;\n    S.swipe.bx = 6;\n    while (S.swipe) stepSwipe(S, 0.05);\n    S.started = true;\n  }\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  if (input.btnPressed && input.btnPressed[0] && S.press \u003c 0) S.press = 0;\n  if (S.press >= 0) {\n    // The pressing edge runs down from the top in 2.4 s, or 4.8 s at Speed\n    // 1 and below, so a tap is never a long wait. Above it every trough is\n    // gone; the last 12 rows over it are part way.\n    S.press += d * max(0.5, S.speed / 2);\n    const y1 = (S.press / 2.4) * (H + 24) - 12;\n    for (let y = 0; y \u003c min(H, y1); y++) {\n      const keep = sm(y1 - 12, y1, y);\n      for (let x = 0; x \u003c W; x++) if (S.wipe[y * W + x] > keep) S.wipe[y * W + x] = keep;\n    }\n    if (y1 > H + 12) S.press = -1;\n  }\n  if (S.swipe) stepSwipe(S, ds);\n  else if (S.clock >= S.nextSwipe) {\n    S.nextSwipe = S.clock + 6.5;\n    S.swipes++;\n    if (S.swipes % 5 === 0 && S.press \u003c 0) S.press = 0;\n    else S.swipe = newSwipe();\n  }\n}\n\nfunction palette(S) {\n  // At Hue 0 a pink pearl. Where the hue comes round to orange, gold and\n  // lime the body is laid paler and brighter and its shaded side leans to\n  // rose, as at half light those hues read brown or olive. Elsewhere the\n  // shaded side is the same hue a little deeper. The sheen is a pale tint a\n  // fourteenth of the wheel on, and the glints come in two tints, the\n  // shade's own and one a tenth on, as pearl pigment flips.\n  const h = S.hue + 0.9, hh = fr(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.03, hw) * (1 - sm(0.26, 0.38, hw));\n  hsv(h, 0.42 - 0.14 * warm, 0.94 + 0.05 * warm, S.pal, 0);\n  hsv(h - 0.12 * warm, 0.56 - 0.04 * warm, 1, S.pal, 3);\n  hsv(h + 0.07, 0.3, 1, S.pal, 6);\n  hsv(h, 0.22, 1, S.pal, 9);\n  hsv(h + 0.1, 0.3, 1, S.pal, 12);\n  S.pal[15] = warm;\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const { rel, wipe, hgt, gx, gy, gw, gt, pal } = S;\n  // The lamp wanders on a slow Lissajous path over the whole panel, 9 LEDs\n  // above it at Lamp -1, 32 at 0.06 and 64 at 1.\n  const t = S.clock, lx = 32 + 24 * sin(t * 0.37 + 1.1), ly = 64 + 44 * sin(t * 0.23 + 0.4);\n  const lh = 32 + (S.lamp >= 0.06 ? ((S.lamp - 0.06) / 0.94) * 32 : ((S.lamp - 0.06) / 1.06) * 23);\n  // Above 0.06 the room light comes up too: a light straight overhead, 2.4\n  // times the lamp at Lamp 1, which lights every flank alike and evens out\n  // the pool.\n  const up = S.lamp > 0.06 ? (S.lamp - 0.06) / 0.94 : 0, over = 2.4 * up, poolLift = 0.4 * up;\n  // The eye sways 1.5 degrees, as a shopper's would, so the glints twinkle\n  // even while the lamp holds still.\n  let ex = 0.026 * sin(t * 2.1), ey = 0.026 * sin(t * 1.7 + 2);\n  const en = 1 / sqrt(ex * ex + ey * ey + 1);\n  ex *= en;\n  ey *= en;\n  const ez = en;\n  // Height in LEDs: crests stand 2 above the grooves. Under a swipe the\n  // emboss is flattened to a trough 0.2 below the grooves, with a low lip of\n  // pushed powder at its edge. Under the pressing edge the emboss is pushed\n  // down to a sixth over a band 20 rows tall and springs back behind it.\n  const py1 = S.press >= 0 ? (S.press / 2.4) * (H + 24) - 12 : -1e9;\n  for (let y = 0; y \u003c H; y++) {\n    const rise = 1 - 0.85 * (1 - sm(0, 10, abs(y - py1 + 4)));\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, w = wipe[p];\n      hgt[p] = 2 * (rel[p] * rise * (1 - w) - 0.11 * w + 0.5 * w * (1 - w));\n    }\n  }\n  const warm = pal[15], amb = 0.22 + 0.36 * warm, COSG = cos((7 * PI) / 180);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, h = hgt[p];\n      const hx = (x \u003c W - 1 ? hgt[p + 1] : h) - (x > 0 ? hgt[p - 1] : h), hy = (y \u003c H - 1 ? hgt[p + W] : h) - (y > 0 ? hgt[p - W] : h);\n      let nx = -hx * 0.5, ny = -hy * 0.5, nz = 1;\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1);\n      nx *= nn;\n      ny *= nn;\n      nz *= nn;\n      let ldx = lx - x, ldy = ly - y, ldz = lh - h;\n      const flat2 = ldx * ldx + ldy * ldy;\n      let li = 1 / sqrt(flat2 + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz = ldz * li + over;\n      li = 1 / sqrt(ldx * ldx + ldy * ldy + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz *= li;\n      let hvx = ldx + ex, hvy = ldy + ey, hvz = ldz + ez;\n      const hn = 1 / sqrt(hvx * hvx + hvy * hvy + hvz * hvz);\n      hvx *= hn;\n      hvy *= hn;\n      hvz *= hn;\n      // The lamp's pool: full under it, half 40 LEDs out, never under 0.3.\n      const pool = 0.3 + 0.7 / (1 + flat2 / 1600) + poolLift, w = wipe[p];\n      // A slope lights by how much more it faces the lamp than the flat\n      // powder does (Lambert over the flat's own Lambert), so a low lamp\n      // rakes the whole pan, up to 1.7 times the flat on a facing flank and\n      // down to a fifth on the far one, while light from overhead lights\n      // every flank nearly alike. Rose, orange and yellow keep only 55% of\n      // that range, so their dark side never browns.\n      const fl = cl((0.7 * (nx * ldx + ny * ldy + nz * ldz)) / max(ldz, 0.12), 0.14, 1.2);\n      const lit = pool * (fl + (0.75 - fl) * 0.45 * warm);\n      // Satin sheen: broad on the grainy powder and broader still in a\n      // trough, where the finger has pressed it smooth and it glows as one.\n      const nh = max(0, nx * hvx + ny * hvy + nz * hvz), sheen = pow(nh, 12 - 6 * w) * (0.55 + 0.08 * w) * pool;\n      // A grain glints when its facet is within 7 degrees of the half vector.\n      const mx = nx + gx[p], my = ny + gy[p], mz = nz, md = (mx * hvx + my * hvy + mz * hvz) / sqrt(mx * mx + my * my + mz * mz);\n      let gl = 0;\n      if (md > COSG) {\n        const q = (md - COSG) / (1 - COSG);\n        gl = gw[p] * q * q * (1 - w) * (1 - w) * (0.5 + 0.7 * pool) * 1.6;\n      }\n      const body = (amb + (1 - amb) * lit) * (0.94 + 0.12 * gw[p]), o = gt[p] ? 12 : 9;\n      // Lit faces take the body colour, shaded ones the shade colour, and a\n      // trough leans a third of the way to the shade colour.\n      const u = cl(lit, 0, 1) * (1 - 0.35 * w), v = 1 - u;\n      let r = (pal[0] * u + pal[3] * v) * body + pal[6] * sheen + pal[o] * gl;\n      let g = (pal[1] * u + pal[4] * v) * body + pal[7] * sheen + pal[o + 1] * gl;\n      let b = (pal[2] * u + pal[5] * v) * body + pal[8] * sheen + pal[o + 2] * gl;\n      // Past full brightness the colour is scaled down whole rather than\n      // clipped channel by channel, so a glint stays a tint and not white.\n      const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (m > 1) (r /= m), (g /= m), (b /= m);\n      display.setPixel(x, y, 255 * r, 255 * g, 255 * b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again."},{"name":"Relief","min":0,"max":3,"about":"The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3."},{"name":"Lamp","min":-1,"max":1,"about":"How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin."}],"start":[0,2,0,0.06],"measures":{"motion":0.0374,"detail":0.0733,"edges":0.2266,"complexity":2.4899,"coverage":1,"colour":0.1712,"drift":0.1081},"knobResponse":[0.3063,0.0963,0.1554,0.2659]},{"slug":"emergence","title":"Emergence","family":"mammal","round":24,"note":"해 질 녘 메마른 언덕의 동굴 입구에서 박쥐 떼가 검은 리본처럼 쏟아져 나와, 노을 하늘을 비틀며 패널 꼭대기까지 기둥으로 올라가요. 기둥은 두 가닥으로 갈라졌다 다시 붙고, 매가 내리꽂히면 박쥐들이 고리처럼 물러났다가 구멍이 닫혀요. K1 을 끝까지 돌리면 밤이 되어 박쥐가 보름달 앞을 지나가요.","idea":"At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.","buttons":"K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Emergence\n// Family:  mammal\n// Idea:    At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the summer evening emergence of Mexican free-tailed bats (Tadarida brasiliensis) from the caves of the Texas Hill Country\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes.\n// Knob 2: Speed. The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Bats. How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave.\n// Knob 4: Wind. A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right.\n// Buttons: K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The cave mouth: its middle column, floor row, half width and height.\nconst [CX, CB, CW, CH] = [27, 121, 9, 9.5];\n// The row where the bats come out, the most bats the knob asks for, the\n// spine's length in rows, and a bat's climb at Speed 2 in LEDs a second.\nconst [CY, MAXB, HM, V0] = [115, 1400, 118, 28];\n// The column's front at the start, and the length of one trip.\nconst [F0, LT] = [90, 150];\n\n// The sky from the top (0) to the horizon (1): afterglow, late dusk, night.\nconst SKIES = [\n  [[0, 30, 26, 98], [0.2, 66, 46, 138], [0.42, 160, 70, 134], [0.62, 236, 104, 100], [0.8, 255, 146, 72], [1, 255, 196, 112]],\n  [[0, 12, 14, 62], [0.3, 30, 30, 100], [0.6, 94, 52, 116], [0.84, 190, 84, 78], [1, 228, 126, 66]],\n  [[0, 5, 9, 32], [0.45, 10, 18, 56], [0.8, 22, 30, 74], [1, 44, 42, 84]],\n];\n// Rock, far hills, scrub and the lit undersides of the clouds at each hour.\nconst LAND = [\n  [92, 64, 54, 116, 72, 96, 34, 36, 24, 255, 178, 150],\n  [56, 40, 46, 64, 44, 80, 24, 26, 22, 140, 66, 96],\n  [28, 28, 40, 30, 30, 60, 14, 18, 22, 18, 20, 38],\n];\n// A bat against the light, and the hawk.\nconst BAT = [14, 10, 12];\n\nfunction ramp(S, g, c) {\n  let j = 0;\n  while (j \u003c S.length - 2 && g > S[j + 1][0]) j++;\n  const a = S[j], b = S[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, bg: F(N * 3), f: F(N * 3), D: F(N), key: -1, co: 0, hk: null, ring: null, nh: 3.4,\n    S: F(MAXB), V: F(MAXB), A: F(MAXB), B: F(MAXB), TU: F(MAXB), RH: F(MAXB), DR: F(MAXB), JF: F(MAXB), JP: F(MAXB),\n    FR: F(MAXB), FP: F(MAXB), OX: F(MAXB), OY: F(MAXB), VX: F(MAXB), VY: F(MAXB), BX: F(MAXB), BY: F(MAXB), Z: F(MAXB),\n    SX: F(HM), SR: F(HM), SP: F(HM), SS: F(HM), RID: F(W), FAR: F(W), CT: F(128 * 72),\n  });\n  // The near hill climbs over the cave; a flat mesa stands far off on the right.\n  for (let x = 0; x \u003c W; x++) {\n    P.RID[x] = 99 + 0.07 * x - 10 * exp(-(((x - 23) / 15) ** 2)) + 2 * vn(x * 0.13, 3) + 1.2 * vn(x * 0.4, 9) - 1.6;\n    P.FAR[x] = 90 + 2.5 * vn(x * 0.09, 1) + 1.5 * vn(x * 0.3, 2) - 7 * sm(38, 43, x) * (1 - sm(57, 61, x)) - 2 * exp(-(((x - 8) / 9) ** 2));\n  }\n  // Scrub: juniper and mesquite clumps on the slope and along the skyline.\n  P.bush = [];\n  for (let n = 0; n \u003c 34; n++) {\n    const x = rnd() * W, top = n \u003c 10, r = top ? 1 + rnd() * 1.2 : 0.8 + rnd() * 1.3;\n    const y = top ? P.RID[floor(x)] - r * 0.4 : P.RID[floor(x)] + 2 + rnd() * (H - P.RID[floor(x)] - 2);\n    if (((x - CX) / (CW + 3)) ** 2 + ((CB - y) / (CH + 3)) ** 2 > 1 || y > CB + 2) P.bush.push([x, y, r]);\n  }\n  P.stars = Array.from({ length: 80 }, () => [floor(rnd() * W), floor(rnd() * 86), 0.4 + rnd() * 0.6, rnd() * 7, 1 + rnd() * 3]);\n  // Thin streaks of high cloud, wrapping every 128 columns.\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const f = (X) => 0.6 * vn(X * 0.035, y * 0.3) + 0.4 * vn(X * 0.11, y * 0.5 + 7);\n      const band = sm(0, 10, y) * (1 - sm(56, 72, y)) * (0.5 + 0.5 * sin(y * 0.21 + 1));\n      P.CT[y * 128 + x] = sm(0.5, 0.75, mix(f(x), f(x + 128), x / 128)) * band;\n    }\n}\n\n// Where a bat turns off the column, how wide it swings and which way.\nfunction route(P, i) {\n  const top = rnd() \u003c 0.16;\n  P.TU[i] = top ? 98 + 14 * rnd() : P.tu + 13 * rnd();\n  P.RH[i] = top ? 30 : 15 + 7 * rnd();\n  P.DR[i] = rnd() \u003c cl(0.72 + 0.6 * P.w, 0.04, 0.96) ? 1 : -1;\n}\n\nfunction place(P, M) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    const a = rnd() * 2 - 1;\n    P.A[i] = (a \u003c 0 ? -1 : 1) * abs(a) ** 0.8;\n    P.B[i] = (rnd() - 0.5) * 1.2;\n    P.V[i] = V0 * (0.8 + 0.4 * rnd());\n    P.JF[i] = 1.4 + rnd() * 2.4;\n    P.JP[i] = rnd() * 7;\n    P.FR[i] = 4 + rnd() * 2.6;\n    P.FP[i] = rnd();\n    route(P, i);\n    P.S[i] = i \u003c M ? F0 - rnd() * LT : -1 - rnd() * LT;\n  }\n  P.init = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), M = round(cl(k[2], 400, 1400));\n  P.k1 = cl(k[0], 0, 1);\n  P.w = cl(k[3], -1, 1);\n  const T = (P.t += d);\n  // The height where the stream peels off wanders slowly.\n  P.tu = 80 + 8 * sin(T * 0.23 + 1);\n  if (!P.init) place(P, M);\n  const w = P.w, { SX, SR, SP, SS } = P;\n  P.co += d * (1.2 + 4 * w);\n\n  // The spine of the column: it leans downwind, corkscrews and breathes, and\n  // now and then tears in two along its middle and closes again higher up.\n  const Rk = 5 + (5 * (M - 400)) / 1000, ph = (T - 2.4) % 12, split = T \u003c 2.4 ? 0 : sm(0, 1.4, ph) * (1 - sm(4.6, 6.2, ph));\n  for (let h = 0; h \u003c HM; h++) {\n    const A = 1 + 7.5 * sm(4, 92, h);\n    SX[h] = CX + w * (0.17 * h + 0.0009 * h * h) + A * (sin(0.052 * h - 1.3 * T) + 0.4 * sin(0.12 * h + 0.75 * T + 2));\n    SR[h] = Rk * (1.25 - 0.55 * sm(0, 26, h) + 0.3 * sm(20, 50, h)) * (1 + 0.005 * h) * (1 + 0.3 * sin(0.075 * h - 2.1 * T));\n    SP[h] = 0.055 * h - 1.7 * T;\n    SS[h] = h > 18 && h \u003c 96 ? split * 9 * sin((PI * (h - 18)) / 78) : 0;\n  }\n\n  // The hawk: a stoop through the column on a curve, out the other side.\n  if (input.btnPressed && input.btnPressed[0] && !P.hk) P.nh = 0;\n  if (!P.hk && (P.nh -= d) \u003c= 0) {\n    const s = rnd() \u003c 0.5 ? 1 : -1, ht = floor(46 + rnd() * 26), tx = SX[ht], ty = CY - ht, x0 = 32 + s * 46, y0 = -12, x2 = 32 - s * 52, y2 = ty - 34;\n    P.hk = { t: 0, x0, y0, x2, y2, cx: 2 * tx - (x0 + x2) / 2, cy: 2 * ty - (y0 + y2) / 2, hit: false };\n  }\n  const hk = P.hk;\n  if (hk) {\n    const u = (hk.t += d) / 2.3, v = 1 - u;\n    if (u >= 1) (P.hk = null), (P.nh = 12 + rnd() * 6);\n    else {\n      hk.x = v * v * hk.x0 + 2 * u * v * hk.cx + u * u * hk.x2;\n      hk.y = v * v * hk.y0 + 2 * u * v * hk.cy + u * u * hk.y2;\n      const dx = v * (hk.cx - hk.x0) + u * (hk.x2 - hk.cx), dy = v * (hk.cy - hk.y0) + u * (hk.y2 - hk.cy), l = hyp(dx, dy) || 1;\n      (hk.ux = dx / l), (hk.uy = dy / l), (hk.u = u);\n      if (!hk.hit && u >= 0.5) (hk.hit = true), (P.ring = { x: hk.x, y: hk.y, t: 0 });\n    }\n  }\n  const rg = P.ring;\n  if (rg && (rg.t += d) > 1.4) P.ring = null;\n  const hx = P.hk ? P.hk.x : -999, hy = P.hk ? P.hk.y : -999, rr = rg ? 4 + 26 * rg.t : 0, ra = rg ? 1 - rg.t / 1.4 : 0;\n\n  const { S, V, A, B, TU, RH, DR, JF, JP, OX, OY, VX, VY, BX, BY, Z } = P;\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (S[i] \u003c 0 && i >= M) continue;\n    // Fast out of the mouth, then the steady climb.\n    const s = (S[i] += V[i] * d * (S[i] \u003c 40 ? 1.6 - 0.015 * S[i] : 1));\n    if (s \u003c 0) continue;\n    const hh = min(s, TU[i]), j = min(HM - 2, floor(hh)), f = hh - j;\n    const r = mix(SR[j], SR[j + 1], f), p = mix(SP[j], SP[j + 1], f), ca = cos(p), sa = sin(p), a = A[i], b = B[i] * (1.9 - 0.9 * sm(0, 30, hh));\n    let x = mix(SX[j], SX[j + 1], f) + r * (a * ca - b * sa) + (a \u003c 0 ? -1 : 1) * mix(SS[j], SS[j + 1], f) + 1.1 * sin(T * JF[i] + JP[i]);\n    let y = CY - hh + 0.8 * sin(T * JF[i] * 1.3 + JP[i] * 2);\n    Z[i] = a * sa + b * ca;\n    if (s > TU[i]) {\n      // Off the top of the column in a curve, then straight out sideways.\n      const u = s - TU[i], rho = RH[i], al = min(u / rho, 1.25), st = max(0, u - rho * 1.25);\n      x += DR[i] * (rho * (1 - cos(al)) + st * 0.949);\n      y -= rho * sin(al) + st * 0.315;\n    }\n    // Away from the hawk and the ring it sends out, then back into the stream.\n    let ax = -18 * OX[i] - 6 * VX[i], ay = -18 * OY[i] - 6 * VY[i], dx = x + OX[i] - hx, dy = y + OY[i] - hy, q = dx * dx + dy * dy;\n    if (q \u003c 196) {\n      const e = sqrt(q) + 0.3, g = (1700 * (1 - e / 14) ** 2) / e;\n      (ax += g * dx), (ay += g * dy);\n    }\n    if (rg) {\n      (dx = x + OX[i] - rg.x), (dy = y + OY[i] - rg.y);\n      const e = hyp(dx, dy) + 0.5, wv = e - rr;\n      if (wv * wv \u003c 30) {\n        const g = (480 * ra * exp((-wv * wv) / 6)) / e;\n        (ax += g * dx), (ay += g * dy);\n      }\n    }\n    VX[i] += ax * d;\n    VY[i] += ay * d;\n    OX[i] = cl(OX[i] + VX[i] * d, -16, 16);\n    OY[i] = cl(OY[i] + VY[i] * d, -16, 16);\n    x += OX[i];\n    y += OY[i];\n    if (x \u003c -3 || x > W + 2 || y \u003c -3) {\n      // Out of sight: back to the cave mouth for another trip.\n      S[i] = i \u003c M ? -rnd() * 4 : -1 - rnd() * LT;\n      OX[i] = OY[i] = VX[i] = VY[i] = 0;\n      route(P, i);\n      continue;\n    }\n    BX[i] = x;\n    BY[i] = y;\n  }\n}\n\n// The sky, the moon, the hills and the cave, kept until the hour moves.\nfunction backdrop(P, k) {\n  const B = P.bg, i0 = k \u003c 0.5 ? 0 : 1, f = k \u003c 0.5 ? k * 2 : k * 2 - 1;\n  const L = LAND[i0].map((v, c) => mix(v, LAND[i0 + 1][c], f));\n  const glow = 1 - sm(0.2, 0.9, k), mx = 37, my = 134 - 88 * sm(0.12, 1, k), mr = 8.5, mc = [mix(250, 246, sm(100, 60, my)), mix(184, 240, sm(100, 60, my)), mix(124, 220, sm(100, 60, my))];\n  P.cc = L.slice(9, 12);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / 100, sky = [0, 1, 2].map((c) => mix(ramp(SKIES[i0], g, c), ramp(SKIES[i0 + 1], g, c), f));\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, rid = P.RID[x];\n      let col;\n      if (y \u003c rid) {\n        // Brighter where the sun went down, behind the far mesa.\n        const wg = 1 + 0.2 * glow * exp(-(((x - 50) / 20) ** 2)) * sm(0.3, 1, g);\n        col = sky.map((v) => v * wg);\n        const md = hyp(x + 0.5 - mx, y + 0.5 - my);\n        if (md \u003c mr) {\n          const ma = 0.82 + 0.18 * sm(0.35, 0.65, vn(x * 0.4 + 3, y * 0.4)) - 0.12 * (md / mr) ** 4;\n          col = mc.map((v) => v * ma);\n        } else col = col.map((v, c) => v + mc[c] * sm(0.25, 0.8, k) * (0.22 * exp(-(md - mr) / 4) + 0.1 * exp(-(md - mr) / 14)));\n        if (y >= P.FAR[x]) {\n          const fv = 0.86 + 0.14 * vn(x * 0.3, y * 0.3);\n          col = col.map((v, c) => mix(v, L[3 + c] * fv, 0.8));\n        }\n      } else {\n        // Limestone with darker strata, catching light along the skyline.\n        const n = vn(x * 0.22, y * 0.45), n2 = vn(x * 0.07 + 5, y * 0.16);\n        let v = (0.6 + 0.4 * n + 0.25 * sm(0.55, 0.7, n2)) * (1 + 0.3 * exp(-(y - rid) / 2.5)) * (1 - (0.28 * (y - 92)) / 36);\n        if (((y + 4 * vn(x * 0.05, 7)) % 6) \u003c 1) v *= 0.72;\n        const e = (abs((x + 0.5 - CX) / CW) ** 2.4 + abs((CB - y - 0.5) / CH) ** 2.4) ** (1 / 2.4) * (0.96 + 0.09 * vn(x * 0.7, y * 0.7));\n        // The pale outcrop the cave opens in, cracked, with a ledge on top.\n        const ot = CB - CH - 6 + 2.5 * vn(x * 0.2, 4), ow = 16 + 4 * vn(y * 0.2, 6) - 6 * sm(CB - 3, CB - CH - 6, y);\n        if (y >= ot && y \u003c CB + 1 && abs(x + 0.5 - CX) \u003c ow) {\n          v = (1.05 + 0.3 * n) * (y \u003c ot + 1 ? 1.3 : 1) * (vn(x * 0.9, y * 0.1) \u003c 0.28 ? 0.66 : 1) * (1 - 0.25 * sm(ow - 3, ow, abs(x + 0.5 - CX)));\n          if (e \u003c 1.35) v *= 0.75 + 0.25 * sm(1, 1.35, e);\n        }\n        if (y \u003c CB && e \u003c 1) {\n          // The mouth, black inside and a little lit at the lip.\n          const lip = sm(0.75, 1, e);\n          col = [3 + 12 * lip, 2 + 8 * lip, 3 + 8 * lip];\n        } else {\n          if (y >= CB) v *= (1.1 + 0.25 * hash(x, y)) * (1 - 0.45 * exp(-(((x - CX) / CW) ** 2)) * sm(CB + 5, CB, y));\n          col = L.slice(0, 3).map((c) => c * v);\n        }\n      }\n      (B[o] = col[0]), (B[o + 1] = col[1]), (B[o + 2] = col[2]);\n    }\n  }\n  for (const [bx, by, br] of P.bush)\n    for (let y = floor(by - br); y \u003c= by + br; y++)\n      for (let x = floor(bx - br); x \u003c= bx + br; x++) {\n        const e = hyp(x + 0.5 - bx, (y + 0.5 - by) * 1.2) / br;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || e > 1) continue;\n        const o = (y * W + x) * 3, v = (0.8 + 0.4 * hash(x, y + 50)) * (y + 0.5 \u003c by - br * 0.3 ? 1.45 : 1);\n        for (let c = 0; c \u003c 3; c++) B[o + c] = L[6 + c] * v;\n      }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const k = P.k1, key = round(k * 400);\n  if (key !== P.key) backdrop(P, k), (P.key = key);\n  const F = P.f, D = P.D, T = P.t;\n  F.set(P.bg);\n  // Stars come out as the glow goes, behind the cloud streaks.\n  const sk = sm(0.4, 0.95, k);\n  if (sk > 0)\n    for (const [x, y, b, ph, fq] of P.stars) {\n      if (y >= P.FAR[x] - 1) continue;\n      const o = (y * W + x) * 3, v = sk * b * (0.75 + 0.25 * sin(T * fq + ph));\n      (F[o] += 190 * v), (F[o + 1] += 190 * v), (F[o + 2] += 210 * v);\n    }\n  // High cloud drifts with the wind, lit from below by the sun that has set.\n  const cc = P.cc, sh = floor(P.co);\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = P.CT[y * 128 + ((x - sh) & 127)];\n      if (a \u003c 0.02 || y >= P.FAR[x]) continue;\n      const o = (y * W + x) * 3, g = 0.55 + y / 110, al = 0.55 * a;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], cc[c] * g, al);\n    }\n\n  // Bats and the hawk as darkness laid over the light.\n  D.fill(0);\n  const put = (x, y, a) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) D[y * W + x] += a;\n  };\n  const M = P.S.length;\n  for (let i = 0; i \u003c M; i++) {\n    if (P.S[i] \u003c 0) continue;\n    const x = round(P.BX[i]), y = round(P.BY[i]), near = P.Z[i] > -0.3, q = floor(((T * P.FR[i] + P.FP[i]) % 1) * 3) - 1;\n    if (near) put(x, y, 0.95), put(x - 1, y + q, 0.8), put(x + 1, y + q, 0.8);\n    else put(x, y, 0.6), put(x + (q ? 1 : -1), y + q, 0.35);\n  }\n  const hk = P.hk;\n  if (hk && hk.x !== undefined) {\n    const { x, y, ux, uy, u } = hk, nx = -uy, ny = ux;\n    const seg = (x0, y0, x1, y1, r) => {\n      const n = 2 * hyp(x1 - x0, y1 - y0) + 1;\n      for (let s = 0; s \u003c= n; s++) {\n        const px = mix(x0, x1, s / n), py = mix(y0, y1, s / n);\n        for (let yy = floor(py - r); yy \u003c= py + r; yy++) for (let xx = floor(px - r); xx \u003c= px + r; xx++) if (hyp(xx + 0.5 - px, yy + 0.5 - py) \u003c= r + 0.25) put(xx, yy, 0.6);\n      }\n    };\n    seg(x + 2.2 * ux, y + 2.2 * uy, x - 3 * ux, y - 3 * uy, 1);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux + 0.9 * nx, y - 4.6 * uy + 0.9 * ny, 0.6);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux - 0.9 * nx, y - 4.6 * uy - 0.9 * ny, 0.6);\n    if (u > 0.14 && u \u003c 0.5) {\n      // Wings folded back in the stoop.\n      for (const sg of [1, -1]) seg(x + 0.8 * ux + sg * nx, y + 0.8 * uy + sg * ny, x - 4 * ux + sg * 2.4 * nx, y - 4 * uy + sg * 2.4 * ny, 0.6);\n    } else {\n      // Spread and beating as it climbs away.\n      const fl = 1.6 * sin(hk.t * 15);\n      for (const sg of [1, -1]) {\n        const wx = x + sg * 3.2 * nx + 1.1 * ux, wy = y + sg * 3.2 * ny + 1.1 * uy;\n        seg(x + 0.5 * ux, y + 0.5 * uy, wx, wy, 0.9);\n        seg(wx, wy, x + sg * 6.2 * nx - (0.6 + fl) * ux, y + sg * 6.2 * ny - (0.6 + fl) * uy, 0.55);\n      }\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = min(1, D[i]), b = 1 - a;\n    display.setPixel(i & 63, i >> 6, min(255, F[o] * b + BAT[0] * a) | 0, min(255, F[o + 1] * b + BAT[1] * a) | 0, min(255, F[o + 2] * b + BAT[2] * a) | 0);\n  }\n}\n","layer":{"id":"layer-emergence","type":"code","name":"emergence","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Emergence\n// Family:  mammal\n// Idea:    At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the summer evening emergence of Mexican free-tailed bats (Tadarida brasiliensis) from the caves of the Texas Hill Country\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes.\n// Knob 2: Speed. The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Bats. How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave.\n// Knob 4: Wind. A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right.\n// Buttons: K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The cave mouth: its middle column, floor row, half width and height.\nconst [CX, CB, CW, CH] = [27, 121, 9, 9.5];\n// The row where the bats come out, the most bats the knob asks for, the\n// spine's length in rows, and a bat's climb at Speed 2 in LEDs a second.\nconst [CY, MAXB, HM, V0] = [115, 1400, 118, 28];\n// The column's front at the start, and the length of one trip.\nconst [F0, LT] = [90, 150];\n\n// The sky from the top (0) to the horizon (1): afterglow, late dusk, night.\nconst SKIES = [\n  [[0, 30, 26, 98], [0.2, 66, 46, 138], [0.42, 160, 70, 134], [0.62, 236, 104, 100], [0.8, 255, 146, 72], [1, 255, 196, 112]],\n  [[0, 12, 14, 62], [0.3, 30, 30, 100], [0.6, 94, 52, 116], [0.84, 190, 84, 78], [1, 228, 126, 66]],\n  [[0, 5, 9, 32], [0.45, 10, 18, 56], [0.8, 22, 30, 74], [1, 44, 42, 84]],\n];\n// Rock, far hills, scrub and the lit undersides of the clouds at each hour.\nconst LAND = [\n  [92, 64, 54, 116, 72, 96, 34, 36, 24, 255, 178, 150],\n  [56, 40, 46, 64, 44, 80, 24, 26, 22, 140, 66, 96],\n  [28, 28, 40, 30, 30, 60, 14, 18, 22, 18, 20, 38],\n];\n// A bat against the light, and the hawk.\nconst BAT = [14, 10, 12];\n\nfunction ramp(S, g, c) {\n  let j = 0;\n  while (j \u003c S.length - 2 && g > S[j + 1][0]) j++;\n  const a = S[j], b = S[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, bg: F(N * 3), f: F(N * 3), D: F(N), key: -1, co: 0, hk: null, ring: null, nh: 3.4,\n    S: F(MAXB), V: F(MAXB), A: F(MAXB), B: F(MAXB), TU: F(MAXB), RH: F(MAXB), DR: F(MAXB), JF: F(MAXB), JP: F(MAXB),\n    FR: F(MAXB), FP: F(MAXB), OX: F(MAXB), OY: F(MAXB), VX: F(MAXB), VY: F(MAXB), BX: F(MAXB), BY: F(MAXB), Z: F(MAXB),\n    SX: F(HM), SR: F(HM), SP: F(HM), SS: F(HM), RID: F(W), FAR: F(W), CT: F(128 * 72),\n  });\n  // The near hill climbs over the cave; a flat mesa stands far off on the right.\n  for (let x = 0; x \u003c W; x++) {\n    P.RID[x] = 99 + 0.07 * x - 10 * exp(-(((x - 23) / 15) ** 2)) + 2 * vn(x * 0.13, 3) + 1.2 * vn(x * 0.4, 9) - 1.6;\n    P.FAR[x] = 90 + 2.5 * vn(x * 0.09, 1) + 1.5 * vn(x * 0.3, 2) - 7 * sm(38, 43, x) * (1 - sm(57, 61, x)) - 2 * exp(-(((x - 8) / 9) ** 2));\n  }\n  // Scrub: juniper and mesquite clumps on the slope and along the skyline.\n  P.bush = [];\n  for (let n = 0; n \u003c 34; n++) {\n    const x = rnd() * W, top = n \u003c 10, r = top ? 1 + rnd() * 1.2 : 0.8 + rnd() * 1.3;\n    const y = top ? P.RID[floor(x)] - r * 0.4 : P.RID[floor(x)] + 2 + rnd() * (H - P.RID[floor(x)] - 2);\n    if (((x - CX) / (CW + 3)) ** 2 + ((CB - y) / (CH + 3)) ** 2 > 1 || y > CB + 2) P.bush.push([x, y, r]);\n  }\n  P.stars = Array.from({ length: 80 }, () => [floor(rnd() * W), floor(rnd() * 86), 0.4 + rnd() * 0.6, rnd() * 7, 1 + rnd() * 3]);\n  // Thin streaks of high cloud, wrapping every 128 columns.\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const f = (X) => 0.6 * vn(X * 0.035, y * 0.3) + 0.4 * vn(X * 0.11, y * 0.5 + 7);\n      const band = sm(0, 10, y) * (1 - sm(56, 72, y)) * (0.5 + 0.5 * sin(y * 0.21 + 1));\n      P.CT[y * 128 + x] = sm(0.5, 0.75, mix(f(x), f(x + 128), x / 128)) * band;\n    }\n}\n\n// Where a bat turns off the column, how wide it swings and which way.\nfunction route(P, i) {\n  const top = rnd() \u003c 0.16;\n  P.TU[i] = top ? 98 + 14 * rnd() : P.tu + 13 * rnd();\n  P.RH[i] = top ? 30 : 15 + 7 * rnd();\n  P.DR[i] = rnd() \u003c cl(0.72 + 0.6 * P.w, 0.04, 0.96) ? 1 : -1;\n}\n\nfunction place(P, M) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    const a = rnd() * 2 - 1;\n    P.A[i] = (a \u003c 0 ? -1 : 1) * abs(a) ** 0.8;\n    P.B[i] = (rnd() - 0.5) * 1.2;\n    P.V[i] = V0 * (0.8 + 0.4 * rnd());\n    P.JF[i] = 1.4 + rnd() * 2.4;\n    P.JP[i] = rnd() * 7;\n    P.FR[i] = 4 + rnd() * 2.6;\n    P.FP[i] = rnd();\n    route(P, i);\n    P.S[i] = i \u003c M ? F0 - rnd() * LT : -1 - rnd() * LT;\n  }\n  P.init = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), M = round(cl(k[2], 400, 1400));\n  P.k1 = cl(k[0], 0, 1);\n  P.w = cl(k[3], -1, 1);\n  const T = (P.t += d);\n  // The height where the stream peels off wanders slowly.\n  P.tu = 80 + 8 * sin(T * 0.23 + 1);\n  if (!P.init) place(P, M);\n  const w = P.w, { SX, SR, SP, SS } = P;\n  P.co += d * (1.2 + 4 * w);\n\n  // The spine of the column: it leans downwind, corkscrews and breathes, and\n  // now and then tears in two along its middle and closes again higher up.\n  const Rk = 5 + (5 * (M - 400)) / 1000, ph = (T - 2.4) % 12, split = T \u003c 2.4 ? 0 : sm(0, 1.4, ph) * (1 - sm(4.6, 6.2, ph));\n  for (let h = 0; h \u003c HM; h++) {\n    const A = 1 + 7.5 * sm(4, 92, h);\n    SX[h] = CX + w * (0.17 * h + 0.0009 * h * h) + A * (sin(0.052 * h - 1.3 * T) + 0.4 * sin(0.12 * h + 0.75 * T + 2));\n    SR[h] = Rk * (1.25 - 0.55 * sm(0, 26, h) + 0.3 * sm(20, 50, h)) * (1 + 0.005 * h) * (1 + 0.3 * sin(0.075 * h - 2.1 * T));\n    SP[h] = 0.055 * h - 1.7 * T;\n    SS[h] = h > 18 && h \u003c 96 ? split * 9 * sin((PI * (h - 18)) / 78) : 0;\n  }\n\n  // The hawk: a stoop through the column on a curve, out the other side.\n  if (input.btnPressed && input.btnPressed[0] && !P.hk) P.nh = 0;\n  if (!P.hk && (P.nh -= d) \u003c= 0) {\n    const s = rnd() \u003c 0.5 ? 1 : -1, ht = floor(46 + rnd() * 26), tx = SX[ht], ty = CY - ht, x0 = 32 + s * 46, y0 = -12, x2 = 32 - s * 52, y2 = ty - 34;\n    P.hk = { t: 0, x0, y0, x2, y2, cx: 2 * tx - (x0 + x2) / 2, cy: 2 * ty - (y0 + y2) / 2, hit: false };\n  }\n  const hk = P.hk;\n  if (hk) {\n    const u = (hk.t += d) / 2.3, v = 1 - u;\n    if (u >= 1) (P.hk = null), (P.nh = 12 + rnd() * 6);\n    else {\n      hk.x = v * v * hk.x0 + 2 * u * v * hk.cx + u * u * hk.x2;\n      hk.y = v * v * hk.y0 + 2 * u * v * hk.cy + u * u * hk.y2;\n      const dx = v * (hk.cx - hk.x0) + u * (hk.x2 - hk.cx), dy = v * (hk.cy - hk.y0) + u * (hk.y2 - hk.cy), l = hyp(dx, dy) || 1;\n      (hk.ux = dx / l), (hk.uy = dy / l), (hk.u = u);\n      if (!hk.hit && u >= 0.5) (hk.hit = true), (P.ring = { x: hk.x, y: hk.y, t: 0 });\n    }\n  }\n  const rg = P.ring;\n  if (rg && (rg.t += d) > 1.4) P.ring = null;\n  const hx = P.hk ? P.hk.x : -999, hy = P.hk ? P.hk.y : -999, rr = rg ? 4 + 26 * rg.t : 0, ra = rg ? 1 - rg.t / 1.4 : 0;\n\n  const { S, V, A, B, TU, RH, DR, JF, JP, OX, OY, VX, VY, BX, BY, Z } = P;\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (S[i] \u003c 0 && i >= M) continue;\n    // Fast out of the mouth, then the steady climb.\n    const s = (S[i] += V[i] * d * (S[i] \u003c 40 ? 1.6 - 0.015 * S[i] : 1));\n    if (s \u003c 0) continue;\n    const hh = min(s, TU[i]), j = min(HM - 2, floor(hh)), f = hh - j;\n    const r = mix(SR[j], SR[j + 1], f), p = mix(SP[j], SP[j + 1], f), ca = cos(p), sa = sin(p), a = A[i], b = B[i] * (1.9 - 0.9 * sm(0, 30, hh));\n    let x = mix(SX[j], SX[j + 1], f) + r * (a * ca - b * sa) + (a \u003c 0 ? -1 : 1) * mix(SS[j], SS[j + 1], f) + 1.1 * sin(T * JF[i] + JP[i]);\n    let y = CY - hh + 0.8 * sin(T * JF[i] * 1.3 + JP[i] * 2);\n    Z[i] = a * sa + b * ca;\n    if (s > TU[i]) {\n      // Off the top of the column in a curve, then straight out sideways.\n      const u = s - TU[i], rho = RH[i], al = min(u / rho, 1.25), st = max(0, u - rho * 1.25);\n      x += DR[i] * (rho * (1 - cos(al)) + st * 0.949);\n      y -= rho * sin(al) + st * 0.315;\n    }\n    // Away from the hawk and the ring it sends out, then back into the stream.\n    let ax = -18 * OX[i] - 6 * VX[i], ay = -18 * OY[i] - 6 * VY[i], dx = x + OX[i] - hx, dy = y + OY[i] - hy, q = dx * dx + dy * dy;\n    if (q \u003c 196) {\n      const e = sqrt(q) + 0.3, g = (1700 * (1 - e / 14) ** 2) / e;\n      (ax += g * dx), (ay += g * dy);\n    }\n    if (rg) {\n      (dx = x + OX[i] - rg.x), (dy = y + OY[i] - rg.y);\n      const e = hyp(dx, dy) + 0.5, wv = e - rr;\n      if (wv * wv \u003c 30) {\n        const g = (480 * ra * exp((-wv * wv) / 6)) / e;\n        (ax += g * dx), (ay += g * dy);\n      }\n    }\n    VX[i] += ax * d;\n    VY[i] += ay * d;\n    OX[i] = cl(OX[i] + VX[i] * d, -16, 16);\n    OY[i] = cl(OY[i] + VY[i] * d, -16, 16);\n    x += OX[i];\n    y += OY[i];\n    if (x \u003c -3 || x > W + 2 || y \u003c -3) {\n      // Out of sight: back to the cave mouth for another trip.\n      S[i] = i \u003c M ? -rnd() * 4 : -1 - rnd() * LT;\n      OX[i] = OY[i] = VX[i] = VY[i] = 0;\n      route(P, i);\n      continue;\n    }\n    BX[i] = x;\n    BY[i] = y;\n  }\n}\n\n// The sky, the moon, the hills and the cave, kept until the hour moves.\nfunction backdrop(P, k) {\n  const B = P.bg, i0 = k \u003c 0.5 ? 0 : 1, f = k \u003c 0.5 ? k * 2 : k * 2 - 1;\n  const L = LAND[i0].map((v, c) => mix(v, LAND[i0 + 1][c], f));\n  const glow = 1 - sm(0.2, 0.9, k), mx = 37, my = 134 - 88 * sm(0.12, 1, k), mr = 8.5, mc = [mix(250, 246, sm(100, 60, my)), mix(184, 240, sm(100, 60, my)), mix(124, 220, sm(100, 60, my))];\n  P.cc = L.slice(9, 12);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / 100, sky = [0, 1, 2].map((c) => mix(ramp(SKIES[i0], g, c), ramp(SKIES[i0 + 1], g, c), f));\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, rid = P.RID[x];\n      let col;\n      if (y \u003c rid) {\n        // Brighter where the sun went down, behind the far mesa.\n        const wg = 1 + 0.2 * glow * exp(-(((x - 50) / 20) ** 2)) * sm(0.3, 1, g);\n        col = sky.map((v) => v * wg);\n        const md = hyp(x + 0.5 - mx, y + 0.5 - my);\n        if (md \u003c mr) {\n          const ma = 0.82 + 0.18 * sm(0.35, 0.65, vn(x * 0.4 + 3, y * 0.4)) - 0.12 * (md / mr) ** 4;\n          col = mc.map((v) => v * ma);\n        } else col = col.map((v, c) => v + mc[c] * sm(0.25, 0.8, k) * (0.22 * exp(-(md - mr) / 4) + 0.1 * exp(-(md - mr) / 14)));\n        if (y >= P.FAR[x]) {\n          const fv = 0.86 + 0.14 * vn(x * 0.3, y * 0.3);\n          col = col.map((v, c) => mix(v, L[3 + c] * fv, 0.8));\n        }\n      } else {\n        // Limestone with darker strata, catching light along the skyline.\n        const n = vn(x * 0.22, y * 0.45), n2 = vn(x * 0.07 + 5, y * 0.16);\n        let v = (0.6 + 0.4 * n + 0.25 * sm(0.55, 0.7, n2)) * (1 + 0.3 * exp(-(y - rid) / 2.5)) * (1 - (0.28 * (y - 92)) / 36);\n        if (((y + 4 * vn(x * 0.05, 7)) % 6) \u003c 1) v *= 0.72;\n        const e = (abs((x + 0.5 - CX) / CW) ** 2.4 + abs((CB - y - 0.5) / CH) ** 2.4) ** (1 / 2.4) * (0.96 + 0.09 * vn(x * 0.7, y * 0.7));\n        // The pale outcrop the cave opens in, cracked, with a ledge on top.\n        const ot = CB - CH - 6 + 2.5 * vn(x * 0.2, 4), ow = 16 + 4 * vn(y * 0.2, 6) - 6 * sm(CB - 3, CB - CH - 6, y);\n        if (y >= ot && y \u003c CB + 1 && abs(x + 0.5 - CX) \u003c ow) {\n          v = (1.05 + 0.3 * n) * (y \u003c ot + 1 ? 1.3 : 1) * (vn(x * 0.9, y * 0.1) \u003c 0.28 ? 0.66 : 1) * (1 - 0.25 * sm(ow - 3, ow, abs(x + 0.5 - CX)));\n          if (e \u003c 1.35) v *= 0.75 + 0.25 * sm(1, 1.35, e);\n        }\n        if (y \u003c CB && e \u003c 1) {\n          // The mouth, black inside and a little lit at the lip.\n          const lip = sm(0.75, 1, e);\n          col = [3 + 12 * lip, 2 + 8 * lip, 3 + 8 * lip];\n        } else {\n          if (y >= CB) v *= (1.1 + 0.25 * hash(x, y)) * (1 - 0.45 * exp(-(((x - CX) / CW) ** 2)) * sm(CB + 5, CB, y));\n          col = L.slice(0, 3).map((c) => c * v);\n        }\n      }\n      (B[o] = col[0]), (B[o + 1] = col[1]), (B[o + 2] = col[2]);\n    }\n  }\n  for (const [bx, by, br] of P.bush)\n    for (let y = floor(by - br); y \u003c= by + br; y++)\n      for (let x = floor(bx - br); x \u003c= bx + br; x++) {\n        const e = hyp(x + 0.5 - bx, (y + 0.5 - by) * 1.2) / br;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || e > 1) continue;\n        const o = (y * W + x) * 3, v = (0.8 + 0.4 * hash(x, y + 50)) * (y + 0.5 \u003c by - br * 0.3 ? 1.45 : 1);\n        for (let c = 0; c \u003c 3; c++) B[o + c] = L[6 + c] * v;\n      }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const k = P.k1, key = round(k * 400);\n  if (key !== P.key) backdrop(P, k), (P.key = key);\n  const F = P.f, D = P.D, T = P.t;\n  F.set(P.bg);\n  // Stars come out as the glow goes, behind the cloud streaks.\n  const sk = sm(0.4, 0.95, k);\n  if (sk > 0)\n    for (const [x, y, b, ph, fq] of P.stars) {\n      if (y >= P.FAR[x] - 1) continue;\n      const o = (y * W + x) * 3, v = sk * b * (0.75 + 0.25 * sin(T * fq + ph));\n      (F[o] += 190 * v), (F[o + 1] += 190 * v), (F[o + 2] += 210 * v);\n    }\n  // High cloud drifts with the wind, lit from below by the sun that has set.\n  const cc = P.cc, sh = floor(P.co);\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = P.CT[y * 128 + ((x - sh) & 127)];\n      if (a \u003c 0.02 || y >= P.FAR[x]) continue;\n      const o = (y * W + x) * 3, g = 0.55 + y / 110, al = 0.55 * a;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], cc[c] * g, al);\n    }\n\n  // Bats and the hawk as darkness laid over the light.\n  D.fill(0);\n  const put = (x, y, a) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) D[y * W + x] += a;\n  };\n  const M = P.S.length;\n  for (let i = 0; i \u003c M; i++) {\n    if (P.S[i] \u003c 0) continue;\n    const x = round(P.BX[i]), y = round(P.BY[i]), near = P.Z[i] > -0.3, q = floor(((T * P.FR[i] + P.FP[i]) % 1) * 3) - 1;\n    if (near) put(x, y, 0.95), put(x - 1, y + q, 0.8), put(x + 1, y + q, 0.8);\n    else put(x, y, 0.6), put(x + (q ? 1 : -1), y + q, 0.35);\n  }\n  const hk = P.hk;\n  if (hk && hk.x !== undefined) {\n    const { x, y, ux, uy, u } = hk, nx = -uy, ny = ux;\n    const seg = (x0, y0, x1, y1, r) => {\n      const n = 2 * hyp(x1 - x0, y1 - y0) + 1;\n      for (let s = 0; s \u003c= n; s++) {\n        const px = mix(x0, x1, s / n), py = mix(y0, y1, s / n);\n        for (let yy = floor(py - r); yy \u003c= py + r; yy++) for (let xx = floor(px - r); xx \u003c= px + r; xx++) if (hyp(xx + 0.5 - px, yy + 0.5 - py) \u003c= r + 0.25) put(xx, yy, 0.6);\n      }\n    };\n    seg(x + 2.2 * ux, y + 2.2 * uy, x - 3 * ux, y - 3 * uy, 1);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux + 0.9 * nx, y - 4.6 * uy + 0.9 * ny, 0.6);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux - 0.9 * nx, y - 4.6 * uy - 0.9 * ny, 0.6);\n    if (u > 0.14 && u \u003c 0.5) {\n      // Wings folded back in the stoop.\n      for (const sg of [1, -1]) seg(x + 0.8 * ux + sg * nx, y + 0.8 * uy + sg * ny, x - 4 * ux + sg * 2.4 * nx, y - 4 * uy + sg * 2.4 * ny, 0.6);\n    } else {\n      // Spread and beating as it climbs away.\n      const fl = 1.6 * sin(hk.t * 15);\n      for (const sg of [1, -1]) {\n        const wx = x + sg * 3.2 * nx + 1.1 * ux, wy = y + sg * 3.2 * ny + 1.1 * uy;\n        seg(x + 0.5 * ux, y + 0.5 * uy, wx, wy, 0.9);\n        seg(wx, wy, x + sg * 6.2 * nx - (0.6 + fl) * ux, y + sg * 6.2 * ny - (0.6 + fl) * uy, 0.55);\n      }\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = min(1, D[i]), b = 1 - a;\n    display.setPixel(i & 63, i >> 6, min(255, F[o] * b + BAT[0] * a) | 0, min(255, F[o + 1] * b + BAT[1] * a) | 0, min(255, F[o + 2] * b + BAT[2] * a) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower."},{"name":"Bats","min":400,"max":1400,"about":"How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave."},{"name":"Wind","min":-1,"max":1,"about":"A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right."}],"start":[0,2,400,0.06],"measures":{"motion":1.359,"detail":0.0665,"edges":0.4877,"complexity":1.5604,"coverage":0.9427,"colour":0.3555,"drift":0.0712},"knobResponse":[0.2525,0.0481,0.0669,0.0629]},{"slug":"eruption","title":"Eruption","family":"volcano","round":25,"note":"해 질 녘 성층화산을 세로로 잘라 봐요. 아래 마그마 방에서 떠난 가스 덩어리가 황토와 잿빛 지층 사이 화도를 타고 올라 분화구에서 터지면, 화산탄이 포물선을 그리며 떨어지고 재 기둥은 패널 꼭대기까지 올라 번개를 품어요. K1 이 스트롬볼리식에서 하와이식 용암 분수를 지나 플리니식 재 기둥까지 분출을 바꾸고, K1 을 누르면 큰 폭발이 나요.","idea":"A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.","buttons":"K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.","code":"// ===== Patternflow pattern =====\n// Title:   Eruption\n// Family:  volcano\n// Idea:    A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the cutaway drawing of a stratovolcano in a geology textbook\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1\n//\n// Knob 1: Style. Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks.\n// Knob 2: Speed. At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower.\n// Knob 3: Pressure. How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own.\n// Knob 4: Wind. Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it.\n// Buttons: K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The axis, the crater rim's half width and crest row, the crater floor, the\n// old ground the cone was built on, the chamber's centre row, gravity in rows\n// per second squared, and the cells of lava down each flank.\nconst [C, RIM, RIMY, FLOOR, BASE, CHY, G, NL] = [32, 6, 53, 58, 86, 113, 34, 26];\n// The flank below the rim: steep at the summit, flattening to the panel's edge at row 84.\nconst flank = (dx) => RIMY + 31 * cl((dx - RIM) / 26, 0, 2) ** 0.8;\nconst SURF = new Float32Array(W + 1);\nfor (let x = 0; x \u003c= W; x++) {\n  const dx = abs(x - C);\n  SURF[x] = dx \u003c RIM ? FLOOR - (FLOOR - RIMY) * (dx / RIM) ** 2 : flank(dx) + 1.1 * (vn(x * 0.3, 7.5) - 0.5) * sm(RIM, RIM + 4, dx);\n}\nconst sAt = (X) => ((X = cl(X, 0, W - 0.001)), mix(SURF[floor(X)], SURF[floor(X) + 1], X - floor(X)));\n// The conduit's centre on each row, wandering a little on its way up.\nconst CXA = new Float32Array(H).map((_, y) => C + 1.3 * sin((y - FLOOR) * 0.11));\n// The dike leaves the conduit at row 99 and reaches the right flank here.\nconst VX = CXA[99] + 20;\n// How the older beds arch up over the chamber, column by column.\nconst BEND = new Float32Array(W).map((_, x) => exp(-(((x + 0.5 - C) / 15) ** 2)));\n\n// The cone's beds (lava, ochre tephra, ash, red scoria, pale pumice) and the\n// older rock under it (soil, sandstone, shale, red beds, limestone, dark\n// shale), each as colour index and thickness from the top down.\nconst CC = [[56, 50, 68], [134, 92, 40], [100, 96, 94], [112, 48, 32], [150, 130, 94]];\nconst BC = [[72, 48, 32], [142, 104, 50], [74, 74, 88], [118, 54, 36], [140, 130, 108], [46, 46, 62]];\nconst beds = (seq) => {\n  const out = [];\n  while (out.length \u003c 96) for (let i = 0; i \u003c seq.length; i += 2) for (let j = 0; j \u003c seq[i + 1]; j++) out.push(seq[i]);\n  return out;\n};\nconst CB = beds([0, 2, 1, 2, 2, 1, 0, 3, 3, 2, 1, 3, 4, 1, 0, 2, 2, 2, 3, 2, 0, 3, 1, 2, 2, 2, 4, 2, 0, 2, 3, 3, 1, 2]);\nconst BB = beds([0, 2, 1, 4, 2, 3, 3, 4, 4, 3, 5, 3, 1, 5, 3, 3, 2, 4, 4, 4, 5, 3, 1, 4, 3, 4, 2, 5]);\n\n// Magma from crust-dark red to white heat, as 256 steps over 0..1.25.\nconst LUT = new Float32Array(256 * 3);\n{\n  const K = [[0, 40, 6, 4], [0.2, 120, 14, 4], [0.4, 205, 46, 6], [0.6, 255, 110, 16], [0.78, 255, 182, 48], [0.95, 255, 236, 140], [1.15, 255, 255, 230]];\n  for (let i = 0; i \u003c 256; i++) {\n    const T = (i / 255) * 1.25;\n    let k = 0;\n    while (k \u003c K.length - 2 && T > K[k + 1][0]) k++;\n    const u = cl((T - K[k][0]) / (K[k + 1][0] - K[k][0]), 0, 1);\n    for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(K[k][c + 1], K[k + 1][c + 1], u);\n  }\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n\n// Sky rows: navy overhead, violet, and the last of the dusk low behind the flanks.\nconst SKY = [[0, 6, 9, 38], [40, 18, 20, 64], [64, 48, 26, 80], [86, 150, 64, 70]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), st: new Uint8ClampedArray(N * 3), kind: new Uint8Array(N), off: F32(N), gr: F32(N), vg: F32(N), sd: F32(N), A: F32(N), hot: F32(N),\n    t: 0, warm: 0, next: 0.5, slugs: [], parts: [], puffs: [], bolts: [], bub: [], glow: 0, fl: 0, flx: C, fly: 30, pr: 0.5, boost: 0, nf: 0, nv: 0, ndg: 0, npd: 1.5, lake: 0.5, pend: 0,\n    lv: [0, 1].map(() => ({ v: F32(NL), T: F32(NL), ph: 0 })),\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, dx = abs(X - C), s = sAt(X);\n    S.vg[i] = exp(-hypot(X - C, (Y - FLOOR + 1) * 0.8) / 15);\n    S.gr[i] = [0.86, 0.95, 1, 1.08][floor(hash(x, y + 77) * 4)];\n    S.sd[i] = Y - s;\n    if (Y \u003c s) {\n      // Sky, with a few stars high up.\n      let k = 0;\n      while (k \u003c SKY.length - 2 && Y > SKY[k + 1][0]) k++;\n      const u = sm(SKY[k][0], SKY[k + 1][0], Y), st = y \u003c 48 && hash(x, y) \u003c 0.014 ? 50 + 110 * hash(y, x) : 0;\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = mix(SKY[k][c + 1], SKY[k + 1][c + 1], u) + st * (c ? 1 : 0.9);\n    } else if (Y \u003c BASE - 3 * exp(-(((X - C) / 15) ** 2))) {\n      // The cone: beds laid parallel to the flanks, peaked over the old summit the crater blew away.\n      S.kind[i] = 1;\n      const ls = dx >= RIM ? flank(dx) : RIMY - (RIM - sqrt(dx * dx + 0.6)) * 0.8;\n      const d = cl(floor(Y - ls + 1.6 * (vn(x * 0.16, y * 0.09 + 30) - 0.5)), 0, 95), c0 = Y - s \u003c 1.4 ? [52, 44, 50] : CC[CB[d]];\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = c0[c] * S.gr[i];\n    } else {\n      S.kind[i] = 2;\n      S.off[i] = 1.6 * (vn(x * 0.11, y * 0.07 + 60) - 0.5);\n    }\n  }\n  for (let k = 0; k \u003c 14; k++) S.bub.push(bubble(0));\n}\n\n// A gas bubble somewhere low in the chamber.\nfunction bubble(P) {\n  return { x: C + (rnd() - 0.5) * (16 + 7 * P) * 1.4, y: CHY + rnd() * (7.5 + 2.5 * P) * 0.6 };\n}\n\nfunction puff(S, x, y, vy, r, a, tv, ny, fade, hot = 0.6, g = 0) {\n  // The oldest puff gives way when there are too many.\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vx: 0, vy, rx: r, ry: r, a, tv, ny, fade, hot, g, u: 22 });\n}\n\nfunction bolt(S) {\n  const c = S.puffs.filter((p) => !p.g && p.y \u003c 50 && p.rx > 3.5 && p.a > 0.25);\n  if (!c.length) return;\n  const p = c[floor(rnd() * c.length)], pts = [];\n  let x = p.x + (rnd() - 0.5) * p.rx, y = p.y - p.ry * 0.4;\n  const n = 5 + floor(rnd() * 8);\n  for (let j = 0; j \u003c n; j++) pts.push([x, y]), (x += (rnd() - 0.5) * 4), (y += 1.5 + rnd() * 1.5);\n  const m = pts[floor(n / 2)], br = [m];\n  for (let j = 0, bx = m[0], by = m[1], s = rnd() \u003c 0.5 ? -1 : 1; j \u003c 3; j++) br.push([(bx += s * (1 + rnd() * 2)), (by += 1 + rnd())]);\n  S.bolts.push({ pts, br, life: 0.24 });\n  [S.flx, S.fly] = pts[floor(n / 2)];\n}\n\n// A burst in the crater, its bombs, its ash and its light.\nfunction burst(S, str, haw) {\n  S.glow = min(2.2, S.glow + 0.9 * str);\n  S.boost += haw * 1.5;\n  // Bombs fly wide; a fan of finer spatter goes up steeper and falls back round the crater.\n  const nb = round((14 + 20 * str) * (1 - 0.6 * haw));\n  for (let n = 0; n \u003c nb; n++) {\n    const b = n % 3 ? 0 : 1, v = (b ? 24 + 22 * rnd() : 20 + 20 * rnd()) * sqrt(str) * (1 + 0.25 * S.P), a = (rnd() - 0.5) * (b ? 1.15 : 0.6);\n    fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, v, a, b);\n  }\n  for (let n = 0; n \u003c 2 + (str > 0.8 ? 1 : 0); n++) puff(S, C + (rnd() - 0.5) * 3, FLOOR - 3 - n * 3, -(14 + 10 * str), 3.5 + rnd(), 1 + 0.3 * str, -8, 2 + rnd() * 12, 0.04);\n  // Most bursts charge the fresh ash enough for a bolt a moment later.\n  if (rnd() \u003c 0.25 + 0.5 * str) S.pend = 0.5 + 0.4 * rnd();\n}\n\n// One bomb (b 1) or blob of spatter thrown from x, y at speed v, a radians off vertical.\nconst fling = (S, x, y, v, a, b = 0, vx = 0) => S.parts.push({ x, y, vx: v * sin(a) + vx, vy: -v * cos(a), T: 1, m: 0, b });\n\n// Lava poured into one flank's cell k: volume v at temperature T.\nfunction pour(L, k, v, T = 1) {\n  k = cl(k, 0, NL - 1);\n  L.T[k] = (L.T[k] * L.v[k] + T * v) / (L.v[k] + v + 1e-6);\n  L.v[k] += v;\n}\n\nfunction step(S, d) {\n  const s1 = S.k1, P = S.P, w = S.wind;\n  const strom = 1 - sm(0.2, 0.5, s1), haw = sm(0.15, 0.45, s1) * (1 - sm(0.6, 0.85, s1)), plin = sm(0.55, 0.9, s1);\n  Object.assign(S, { strom, haw, plin });\n  S.t += d;\n  const ax = 16 + 7 * P, ay = 7.5 + 2.5 * P, top = CHY - ay;\n  // Pressure builds in the chamber, and a slug of gas leaves for the conduit when it is ready.\n  S.pr = min(1, S.pr + d * (0.3 + 0.4 * P));\n  // A Plinian column draws on the chamber in long surges instead.\n  if (plin > 0) S.pr = mix(S.pr, 0.5 + 0.5 * sin(S.t * 1.6), min(1, plin * d * 3));\n  if ((S.next -= d) \u003c= 0 && plin \u003c 0.8) {\n    S.slugs.push({ y: top + 1, str: 0.6 + 0.4 * rnd() + 0.3 * P });\n    S.pr = max(0, S.pr - 0.6);\n    S.next = mix((1.3 + 1.7 * rnd()) / (1 + 0.7 * P), 0.5 + 0.5 * rnd(), max(haw, plin));\n  }\n  for (const g of S.slugs) {\n    // It speeds up as it expands near the top.\n    const u = cl((g.y - FLOOR) / (top - FLOOR), 0, 1);\n    g.y -= (16 + 30 * (1 - u)) * (1 + 0.5 * P) * d;\n    if (g.y \u003c= FLOOR + 1) (g.done = 1), burst(S, g.str * (strom + 0.35 * haw + 0.25 * plin), haw);\n  }\n  S.slugs = S.slugs.filter((g) => !g.done);\n  // Bubbles rise through the chamber and gather under its roof by the conduit's mouth.\n  for (const b of S.bub) {\n    const ex = C - b.x, v = (3 + 4 * P + 3 * S.pr) * d;\n    b.x += cl(ex, -1, 1) * v * 0.5 + sin(S.t * 2.3 + b.y) * 0.3 * v;\n    b.y -= v;\n    if (((b.x - C) / ax) ** 2 + ((b.y - CHY) / ay) ** 2 > 0.8) Object.assign(b, bubble(P));\n  }\n  // The fountain: a steady jet of spatter in Hawaiian style, surging after each slug,\n  // and a smaller one from the flank vent once the dike has broken out.\n  S.nf += d * haw * (60 + 50 * min(1, S.boost)) * (1 + 0.5 * P);\n  for (; S.nf >= 1; S.nf--) fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, (24 + 16 * rnd()) * (0.85 + 0.3 * P) * (1 + 0.3 * min(1, S.boost)), (rnd() - 0.5) * 0.45);\n  S.nv += d * 14 * sm(0.88, 1, P);\n  for (; S.nv >= 1; S.nv--) fling(S, VX + (rnd() - 0.5) * 2, sAt(VX) - 1, 10 + 8 * rnd(), (rnd() - 0.5) * 0.6, 0, 3);\n  S.boost = max(0, S.boost - d * 1.2);\n  // Gas and ash: a thin plume always, a roaring column in Plinian style.\n  S.ndg += d * (2.2 + 1.5 * haw + 11 * plin * (0.4 + S.pr));\n  for (; S.ndg >= 1; S.ndg--)\n    if (rnd() \u003c plin) puff(S, C + (rnd() - 0.5) * 5, FLOOR - 3, -(30 + 14 * rnd()), 5.5, 1, -20, 3 + 7 * rnd(), 0.04, 0.4);\n    else puff(S, C + (rnd() - 0.5) * 3, FLOOR - 2, -7, 3, 0.45 + 0.2 * haw, -6, 4 + 14 * rnd(), 0.045, 0.3);\n  // Plinian: part of the column collapses and pours down a flank.\n  if (plin > 0.3 && (S.npd -= d * plin) \u003c= 0) {\n    S.npd = 2 + 2 * rnd();\n    const g = rnd() \u003c 0.5 ? -1 : 1;\n    for (let n = 0; n \u003c 4; n++) puff(S, C + g * (RIM + 2 * n), RIMY + 2 * n, 0, 4, 1, 0, 0, 0.05, 1.2, g), (S.puffs[S.puffs.length - 1].u = 24 - 3 * n);\n  }\n  for (const p of S.puffs) {\n    if (p.g) {\n      // An avalanche of hot ash hugging the flank, slowing as it spreads, then lifting off.\n      p.x += p.g * p.u * d;\n      p.u = max(3, p.u - 3 * d);\n      p.rx += d * 2.5;\n      p.ry = min(8, p.ry + d * 1.5);\n      p.y = sAt(p.x) - p.ry * 0.35;\n      if (p.u \u003c 5 || p.x \u003c 1 || p.x > W - 1) Object.assign(p, { g: 0, vy: -3, tv: -5, ny: 14 + 10 * rnd(), fade: 0.06 });\n    } else {\n      const rise = sm(p.ny - 2, p.ny + 14, p.y);\n      p.vy += (p.tv * rise - p.vy) * 1.6 * d;\n      p.y += p.vy * d;\n      p.rx = min(30, p.rx + d * (0.8 + 0.12 * abs(p.vy) + 3.5 * (1 - rise) * p.a));\n      p.ry = min(12, p.ry + d * (0.6 + 0.05 * abs(p.vy)));\n    }\n    p.x += (p.vx + w * (4 + 18 * cl(1 - p.y / 60, 0, 1))) * d;\n    p.a -= d * p.fade;\n    p.hot = max(0, p.hot - d * 0.7);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.04 && p.x + p.rx > -4 && p.x - p.rx \u003c W + 4 && p.y + p.ry > -8);\n  // Bombs and spatter fly, land, roll and cool.\n  for (const q of S.parts) {\n    if (!q.m) {\n      q.vy += G * d;\n      q.vx += w * 7 * d;\n      q.x += q.vx * d;\n      q.y += q.vy * d;\n      q.T -= d * (q.b ? 0.16 : 0.35);\n      if (q.vy > 0 && q.y >= sAt(q.x)) {\n        const dx = abs(q.x - C);\n        if (dx \u003c RIM - 0.5) q.dead = 1;\n        else if (!q.b) (q.dead = 1), pour(S.lv[q.x > C ? 1 : 0], floor(dx - RIM), 0.05, max(0.5, q.T));\n        else Object.assign(q, { m: 1, u: 5 + abs(q.vx) * 0.3, s: q.x > C ? 1 : -1 });\n      }\n    } else {\n      q.x += q.s * q.u * d;\n      q.u = max(0, q.u - 6 * d);\n      q.y = sAt(q.x) - 0.5;\n      q.T -= d * 0.3;\n    }\n    if (q.T \u003c= 0 || q.x \u003c -2 || q.x > W + 2) q.dead = 1;\n  }\n  S.parts = S.parts.filter((q) => !q.dead);\n  if (S.parts.length > 400) S.parts.splice(0, S.parts.length - 400);\n  // Lava over the rim and down the flanks, slower as it cools and crusts.\n  const eff = (0.45 + 0.6 * P + 1.2 * haw) * (1 - 0.6 * plin);\n  for (let s = 0; s \u003c 2; s++) {\n    const L = S.lv[s], v = L.v, T = L.T;\n    pour(L, 0, eff * (s ? 0.55 : 1) * d);\n    if (s && P > 0.88) pour(L, floor(VX - C - RIM), 1.4 * sm(0.88, 1, P) * d);\n    L.ph += d * (1 + 2 * T[2]);\n    for (let k = NL - 1; k >= 0; k--) {\n      const f = min(v[k], v[k] * (0.2 + 2.2 * T[k] * T[k]) * (k \u003c 6 ? 1.6 : 0.9) * d);\n      v[k] -= f;\n      if (k \u003c NL - 1) pour(L, k + 1, f, T[k]);\n      T[k] = max(0, T[k] - d * (0.03 + 0.015 / (v[k] + 0.2)));\n      if (T[k] \u003c 0.1) v[k] = max(0, v[k] - d * 0.03);\n    }\n  }\n  S.lake = mix(S.lake, (1.2 + 1.2 * P + 4 * haw) * (1 - plin), min(1, d * 2));\n  // Lightning in the ash.\n  if (rnd() \u003c d * (0.2 + 1.3 * plin + 0.4 * S.glow)) bolt(S);\n  if (S.pend > 0 && (S.pend -= d) \u003c= 0) bolt(S);\n  for (const b of S.bolts) b.life -= d;\n  S.bolts = S.bolts.filter((b) => b.life > 0);\n  S.fl = S.bolts.reduce((m, b) => max(m, floor(b.life * 40) % 3 === 1 ? 0.35 : 1), 0);\n  S.glow *= exp(-d * 2.5);\n}\n\n// K1 tap: the big one.\nfunction blast(S) {\n  S.slugs.length = 0;\n  S.pr = 0;\n  burst(S, 2.4, 0);\n  S.glow = 2.2;\n  for (let n = 0; n \u003c 5; n++) puff(S, C + (rnd() - 0.5) * 6, FLOOR - 4, -(26 + 12 * rnd()), 4 + rnd() * 2, 1, -10, 2 + 8 * rnd(), 0.04, 1);\n  for (let s = 0; s \u003c 2; s++) pour(S.lv[s], 0, 1.6);\n  S.pend = 0.15;\n  S.next = 1.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2;\n  S.k1 = cl(k[0], 0, 1);\n  S.P = cl(k[2], 0, 1);\n  S.wind = cl(k[3], -1, 1);\n  // The volcano has been going for a while before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    for (let n = round(60 + 120 * sp); n-- > 0; ) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) blast(S);\n  step(S, cl(dt || 0, 0, 0.1) * sp);\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst lc = (T) => ((T = lut(T)), [LUT[T], LUT[T + 1], LUT[T + 2]]);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 === undefined) return;\n  F = S.f;\n  const { P, t, haw, plin, kind, st, A, hot, vg, wind } = S;\n  const ax = 16 + 7 * P + 0.8 * S.pr, ay = 7.5 + 2.5 * P + 0.5 * S.pr, top = CHY - ay, bamp = 3 + 6 * P + 1.4 * S.pr, bend = BEND.map((v) => v * bamp);\n  const L = 0.3 + 0.7 * S.glow + 0.6 * haw + 0.5 * plin, fl = S.fl;\n\n  // Sky, cone and the older beds bent up over the chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * 3, kd = kind[i];\n    if (kd === 0) {\n      const g = L * vg[i];\n      (F[o] = st[o] + 150 * g + 7 * fl), (F[o + 1] = st[o + 1] + 48 * g + 8 * fl), (F[o + 2] = st[o + 2] + 16 * g + 18 * fl);\n    } else if (kd === 1) {\n      const g = L * vg[i] * (S.sd[i] \u003c 2.5 ? 1 : 0.2);\n      (F[o] = st[o] + 120 * g), (F[o + 1] = st[o + 1] + 40 * g), (F[o + 2] = st[o + 2] + 10 * g);\n    } else {\n      const d = cl((i >> 6) + 0.5 - BASE + bend[i & 63] + S.off[i], 0, 94), d0 = floor(d), u = d - d0;\n      const a = BC[BB[d0]], b = BC[BB[d0 + 1]], gr = S.gr[i];\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(a[c], b[c], u) * gr;\n    }\n  }\n\n  // The magma: chamber, the feeder below it, the conduit, the dike and the sill, with the rock round them glowing.\n  const glowRock = (o, g) => {\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [210, 50, 16][c], min(0.85, g));\n  };\n  const melt = (o, T) => {\n    const k = lut(T);\n    (F[o] = LUT[k]), (F[o + 1] = LUT[k + 1]), (F[o + 2] = LUT[k + 2]);\n  };\n  for (let y = max(BASE, floor(top - 6)); y \u003c H; y++)\n    for (let x = max(0, floor(C - ax - 7)); x \u003c min(W, C + ax + 7); x++) {\n      const X = x + 0.5, Y = y + 0.5, e = hypot((X - C) / ax, (Y - CHY) / ay), o = (y * W + x) * 3;\n      if (e \u003c 1) {\n        const T = 0.28 + 0.38 * vn(X * 0.17 + 0.7 * sin(Y * 0.17 + t * 0.5), Y * 0.3 + t * 1.2) + 0.2 * (1 - e * e) - 0.25 * sm(0.72, 1, e) + 0.16 * S.pr + 0.1 * P + 0.35 * exp(-((X - C) ** 2) / 9 - ((Y - top) ** 2) / 6) * S.pr;\n        melt(o, T);\n      } else if (Y > CHY && abs(X - C - 1.5 * sin(y * 0.2)) \u003c 1.3) melt(o, 0.38 + 0.08 * sin(y * 0.5 - t * 3));\n      else glowRock(o, exp(-((e - 1) * ay) / 2.4) * (0.5 + 0.4 * S.pr + 0.2 * P));\n    }\n  for (const b of S.bub) put(b.x, b.y, lc(1.05));\n  const slug = (y) => S.slugs.reduce((m, g) => max(m, exp(-(((y - g.y) / 2.6) ** 2))), 0);\n  for (let y = FLOOR; y \u003c= top + 1; y++) {\n    const cx = CXA[y], sg = slug(y), hw = 1.35 + 1.3 * sg + 0.6 * plin;\n    for (let x = max(0, floor(cx - hw - 5)); x \u003c min(W, cx + hw + 5); x++) {\n      const o = (y * W + x) * 3, q = abs(x + 0.5 - cx);\n      if (q \u003c hw) {\n        const ves = hash(x, floor(y + t * 14)) \u003c 0.12 ? 0.25 : 0;\n        melt(o, mix(0.58 + 0.12 * sin(y * 0.45 + t * 7) + ves + 0.5 * sg, 0.5 + 0.6 * vn(x * 0.6, (y + t * 45) * 0.25), plin));\n      } else if (kind[y * W + x]) glowRock(o, exp(-(q - hw) / 1.5) * (0.4 + 0.5 * sg + 0.3 * plin));\n    }\n  }\n  // The dike towards the right flank, and the sill along the beds on the left.\n  const dk = sm(0.2, 0.9, P), sl = sm(0.45, 1, P);\n  for (let j = 0; j \u003c 46 * dk; j++) {\n    const u = j / 46, x = CXA[99] + (VX - CXA[99]) * u, y = 99 - (99 - sAt(VX)) * u;\n    put(x, y, lc(0.55 + 0.1 * sin(j * 0.6 - t * 5)));\n    put(x + 1, y, [210, 50, 16], 0.45);\n  }\n  for (let j = 0; j \u003c 20 * sl; j++) {\n    const x = CXA[93] - 2 - j, y = 93 + 0.006 * j * j + 2 * sin(j * 0.15);\n    put(x, y, lc(0.5 + 0.08 * sin(j * 0.7 + t * 4)));\n    if (j \u003c 14 * sl) put(x, y + 1, lc(0.42));\n  }\n\n  // The ash: every puff summed, then shaded over the sky.\n  A.fill(0);\n  hot.fill(0);\n  for (const p of S.puffs) {\n    const x0 = max(0, floor(p.x - p.rx)), x1 = min(W - 1, floor(p.x + p.rx)), y0 = max(0, floor(p.y - p.ry)), y1 = min(H - 1, floor(p.y + p.ry));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = (y + 0.5 - p.y) / p.ry;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = (x + 0.5 - p.x) / p.rx, q = 1 - dx * dx - dy * dy;\n        if (q > 0) (A[y * W + x] += p.a * q * q), (hot[y * W + x] += p.hot * q * q);\n      }\n    }\n  }\n  // Ash falling out of the plume aloft, slanting downwind as it falls.\n  const col = new Float32Array(W);\n  for (const p of S.puffs)\n    if (!p.g && p.y \u003c 45 && p.rx > 4) for (let x = max(0, floor(p.x - p.rx)); x \u003c min(W, p.x + p.rx); x++) col[x] += p.a * max(0, 1 - ((x + 0.5 - p.x) / p.rx) ** 2);\n  for (let y = 14; y \u003c 84; y++) {\n    const f = 0.11 * sm(12, 30, y) * (1 - sm(56, 84, y)), sh = wind * (y - 14) * 0.55;\n    for (let x = 0; x \u003c W; x++) {\n      const c = col[cl(round(x - sh), 0, W - 1)];\n      if (c > 0.05) A[y * W + x] += f * min(1.5, c) * (0.3 + vn(x * 0.9, y * 0.12 - t * 3));\n    }\n  }\n  const { flx, fly } = S;\n  for (let i = 0; i \u003c N; i++) {\n    if (A[i] \u003c 0.01 || kind[i]) continue;\n    const x = i & 63, y = i >> 6, o = i * 3, tex = vn(x * 0.22 - t * wind * 0.5, y * 0.2 + t * 0.7);\n    const al = min(0.94, 1 - exp(-A[i] * (1.3 + 1.7 * tex))), sh = 0.55 + 0.6 * tex, vl = 0.8 * L * vg[i] + 0.6 * hot[i], fy = fl * exp(-hypot(x - flx, (y - fly) * 0.7) / 16);\n    F[o] = mix(F[o], 104 * sh + 255 * vl + 130 * fy, al);\n    F[o + 1] = mix(F[o + 1], 98 * sh + 100 * vl + 140 * fy, al);\n    F[o + 2] = mix(F[o + 2], 100 * sh + 34 * vl + 210 * fy, al);\n  }\n\n  // The crater: the vent, the lava lake, and the flash of a burst.\n  const ll = FLOOR + 0.6 - S.lake;\n  for (let y = RIMY - 1; y \u003c= FLOOR + 1; y++)\n    for (let x = C - RIM; x \u003c C + RIM; x++) {\n      const i = y * W + x;\n      if (!kind[i] && y + 0.5 > ll) melt(i * 3, 0.55 + 0.3 * vn(x * 0.6 + t, y * 0.8) + 0.2 * S.glow - 0.12 * (y + 0.5 - ll \u003c 1 ? 1 : 0));\n    }\n  if (S.glow > 0.02)\n    for (let y = FLOOR - 14; y \u003c= FLOOR + 3; y++)\n      for (let x = C - 12; x \u003c C + 12; x++) {\n        const o = (y * W + x) * 3, g = S.glow * exp(-hypot(x + 0.5 - C, y + 0.5 - FLOOR + 1) / 3.2);\n        (F[o] += 255 * g), (F[o + 1] += 190 * g), (F[o + 2] += 90 * g);\n      }\n\n  // Lava down the flanks: hot and bright near the rim, crusting dark as it cools.\n  for (let s = 0; s \u003c 2; s++) {\n    const { v, T, ph } = S.lv[s];\n    for (let k = 0; k \u003c NL; k++) {\n      if (v[k] \u003c 0.01) continue;\n      const x = s ? C + RIM + k : C - RIM - 1 - k, y0 = min(SURF[x], SURF[x + 1]), y1 = max(SURF[x], SURF[x + 1]), th = min(4, v[k] * 3.2), al = min(1, v[k] * 8);\n      // Its glow on the air just above it.\n      for (let j = 1; j \u003c= 3; j++) put(x, y0 - th - j, [255, 90, 20], (0.35 * al * T[k]) / j);\n      for (let y = floor(y0 - th); y \u003c= floor(y1); y++) {\n        const n = vn(k * 0.7 - ph * 2, y * 0.6), tt = T[k], c = lc(0.22 + 0.62 * tt + 0.18 * n);\n        const cr = max(sm(0.75, 0.25, tt) * sm(0.3, 0.6, vn(k * 1.3 - ph * 2, y * 1.1 + 9)), sm(0.12, 0.02, tt)), g = S.gr[(y * W + x) & 8191];\n        put(x, y, [mix(c[0], 64 * g, cr), mix(c[1], 52 * g, cr), mix(c[2], 54 * g, cr)], al);\n      }\n    }\n  }\n\n  // Bombs and spatter, with a short trail while they fly.\n  for (const q of S.parts) {\n    const c = lc(0.25 + 0.85 * q.T);\n    if (!q.m) for (let j = 1; j \u003c= 3; j++) put(q.x - q.vx * 0.022 * j, q.y - q.vy * 0.022 * j, c, 0.5 / j);\n    put(q.x, q.y, c);\n    if (q.b && q.T > 0.3) put(q.x + 1, q.y, c, 0.6);\n  }\n\n  // Lightning.\n  for (const b of S.bolts) {\n    if (floor(b.life * 40) % 3 === 1) continue;\n    for (const pts of [b.pts, b.br])\n      for (let j = 1; j \u003c pts.length; j++) {\n        const [x0, y0] = pts[j - 1], [x1, y1] = pts[j], m = max(abs(x1 - x0), abs(y1 - y0)) * 1.5 + 1;\n        for (let u = 0; u \u003c= m; u++) {\n          const x = mix(x0, x1, u / m), y = mix(y0, y1, u / m);\n          put(x - 1, y, [120, 110, 255], 0.35), put(x + 1, y, [120, 110, 255], 0.35), put(x, y, [240, 240, 255]);\n        }\n      }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-eruption","type":"code","name":"eruption","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Eruption\n// Family:  volcano\n// Idea:    A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the cutaway drawing of a stratovolcano in a geology textbook\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1\n//\n// Knob 1: Style. Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks.\n// Knob 2: Speed. At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower.\n// Knob 3: Pressure. How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own.\n// Knob 4: Wind. Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it.\n// Buttons: K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The axis, the crater rim's half width and crest row, the crater floor, the\n// old ground the cone was built on, the chamber's centre row, gravity in rows\n// per second squared, and the cells of lava down each flank.\nconst [C, RIM, RIMY, FLOOR, BASE, CHY, G, NL] = [32, 6, 53, 58, 86, 113, 34, 26];\n// The flank below the rim: steep at the summit, flattening to the panel's edge at row 84.\nconst flank = (dx) => RIMY + 31 * cl((dx - RIM) / 26, 0, 2) ** 0.8;\nconst SURF = new Float32Array(W + 1);\nfor (let x = 0; x \u003c= W; x++) {\n  const dx = abs(x - C);\n  SURF[x] = dx \u003c RIM ? FLOOR - (FLOOR - RIMY) * (dx / RIM) ** 2 : flank(dx) + 1.1 * (vn(x * 0.3, 7.5) - 0.5) * sm(RIM, RIM + 4, dx);\n}\nconst sAt = (X) => ((X = cl(X, 0, W - 0.001)), mix(SURF[floor(X)], SURF[floor(X) + 1], X - floor(X)));\n// The conduit's centre on each row, wandering a little on its way up.\nconst CXA = new Float32Array(H).map((_, y) => C + 1.3 * sin((y - FLOOR) * 0.11));\n// The dike leaves the conduit at row 99 and reaches the right flank here.\nconst VX = CXA[99] + 20;\n// How the older beds arch up over the chamber, column by column.\nconst BEND = new Float32Array(W).map((_, x) => exp(-(((x + 0.5 - C) / 15) ** 2)));\n\n// The cone's beds (lava, ochre tephra, ash, red scoria, pale pumice) and the\n// older rock under it (soil, sandstone, shale, red beds, limestone, dark\n// shale), each as colour index and thickness from the top down.\nconst CC = [[56, 50, 68], [134, 92, 40], [100, 96, 94], [112, 48, 32], [150, 130, 94]];\nconst BC = [[72, 48, 32], [142, 104, 50], [74, 74, 88], [118, 54, 36], [140, 130, 108], [46, 46, 62]];\nconst beds = (seq) => {\n  const out = [];\n  while (out.length \u003c 96) for (let i = 0; i \u003c seq.length; i += 2) for (let j = 0; j \u003c seq[i + 1]; j++) out.push(seq[i]);\n  return out;\n};\nconst CB = beds([0, 2, 1, 2, 2, 1, 0, 3, 3, 2, 1, 3, 4, 1, 0, 2, 2, 2, 3, 2, 0, 3, 1, 2, 2, 2, 4, 2, 0, 2, 3, 3, 1, 2]);\nconst BB = beds([0, 2, 1, 4, 2, 3, 3, 4, 4, 3, 5, 3, 1, 5, 3, 3, 2, 4, 4, 4, 5, 3, 1, 4, 3, 4, 2, 5]);\n\n// Magma from crust-dark red to white heat, as 256 steps over 0..1.25.\nconst LUT = new Float32Array(256 * 3);\n{\n  const K = [[0, 40, 6, 4], [0.2, 120, 14, 4], [0.4, 205, 46, 6], [0.6, 255, 110, 16], [0.78, 255, 182, 48], [0.95, 255, 236, 140], [1.15, 255, 255, 230]];\n  for (let i = 0; i \u003c 256; i++) {\n    const T = (i / 255) * 1.25;\n    let k = 0;\n    while (k \u003c K.length - 2 && T > K[k + 1][0]) k++;\n    const u = cl((T - K[k][0]) / (K[k + 1][0] - K[k][0]), 0, 1);\n    for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(K[k][c + 1], K[k + 1][c + 1], u);\n  }\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n\n// Sky rows: navy overhead, violet, and the last of the dusk low behind the flanks.\nconst SKY = [[0, 6, 9, 38], [40, 18, 20, 64], [64, 48, 26, 80], [86, 150, 64, 70]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), st: new Uint8ClampedArray(N * 3), kind: new Uint8Array(N), off: F32(N), gr: F32(N), vg: F32(N), sd: F32(N), A: F32(N), hot: F32(N),\n    t: 0, warm: 0, next: 0.5, slugs: [], parts: [], puffs: [], bolts: [], bub: [], glow: 0, fl: 0, flx: C, fly: 30, pr: 0.5, boost: 0, nf: 0, nv: 0, ndg: 0, npd: 1.5, lake: 0.5, pend: 0,\n    lv: [0, 1].map(() => ({ v: F32(NL), T: F32(NL), ph: 0 })),\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, dx = abs(X - C), s = sAt(X);\n    S.vg[i] = exp(-hypot(X - C, (Y - FLOOR + 1) * 0.8) / 15);\n    S.gr[i] = [0.86, 0.95, 1, 1.08][floor(hash(x, y + 77) * 4)];\n    S.sd[i] = Y - s;\n    if (Y \u003c s) {\n      // Sky, with a few stars high up.\n      let k = 0;\n      while (k \u003c SKY.length - 2 && Y > SKY[k + 1][0]) k++;\n      const u = sm(SKY[k][0], SKY[k + 1][0], Y), st = y \u003c 48 && hash(x, y) \u003c 0.014 ? 50 + 110 * hash(y, x) : 0;\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = mix(SKY[k][c + 1], SKY[k + 1][c + 1], u) + st * (c ? 1 : 0.9);\n    } else if (Y \u003c BASE - 3 * exp(-(((X - C) / 15) ** 2))) {\n      // The cone: beds laid parallel to the flanks, peaked over the old summit the crater blew away.\n      S.kind[i] = 1;\n      const ls = dx >= RIM ? flank(dx) : RIMY - (RIM - sqrt(dx * dx + 0.6)) * 0.8;\n      const d = cl(floor(Y - ls + 1.6 * (vn(x * 0.16, y * 0.09 + 30) - 0.5)), 0, 95), c0 = Y - s \u003c 1.4 ? [52, 44, 50] : CC[CB[d]];\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = c0[c] * S.gr[i];\n    } else {\n      S.kind[i] = 2;\n      S.off[i] = 1.6 * (vn(x * 0.11, y * 0.07 + 60) - 0.5);\n    }\n  }\n  for (let k = 0; k \u003c 14; k++) S.bub.push(bubble(0));\n}\n\n// A gas bubble somewhere low in the chamber.\nfunction bubble(P) {\n  return { x: C + (rnd() - 0.5) * (16 + 7 * P) * 1.4, y: CHY + rnd() * (7.5 + 2.5 * P) * 0.6 };\n}\n\nfunction puff(S, x, y, vy, r, a, tv, ny, fade, hot = 0.6, g = 0) {\n  // The oldest puff gives way when there are too many.\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vx: 0, vy, rx: r, ry: r, a, tv, ny, fade, hot, g, u: 22 });\n}\n\nfunction bolt(S) {\n  const c = S.puffs.filter((p) => !p.g && p.y \u003c 50 && p.rx > 3.5 && p.a > 0.25);\n  if (!c.length) return;\n  const p = c[floor(rnd() * c.length)], pts = [];\n  let x = p.x + (rnd() - 0.5) * p.rx, y = p.y - p.ry * 0.4;\n  const n = 5 + floor(rnd() * 8);\n  for (let j = 0; j \u003c n; j++) pts.push([x, y]), (x += (rnd() - 0.5) * 4), (y += 1.5 + rnd() * 1.5);\n  const m = pts[floor(n / 2)], br = [m];\n  for (let j = 0, bx = m[0], by = m[1], s = rnd() \u003c 0.5 ? -1 : 1; j \u003c 3; j++) br.push([(bx += s * (1 + rnd() * 2)), (by += 1 + rnd())]);\n  S.bolts.push({ pts, br, life: 0.24 });\n  [S.flx, S.fly] = pts[floor(n / 2)];\n}\n\n// A burst in the crater, its bombs, its ash and its light.\nfunction burst(S, str, haw) {\n  S.glow = min(2.2, S.glow + 0.9 * str);\n  S.boost += haw * 1.5;\n  // Bombs fly wide; a fan of finer spatter goes up steeper and falls back round the crater.\n  const nb = round((14 + 20 * str) * (1 - 0.6 * haw));\n  for (let n = 0; n \u003c nb; n++) {\n    const b = n % 3 ? 0 : 1, v = (b ? 24 + 22 * rnd() : 20 + 20 * rnd()) * sqrt(str) * (1 + 0.25 * S.P), a = (rnd() - 0.5) * (b ? 1.15 : 0.6);\n    fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, v, a, b);\n  }\n  for (let n = 0; n \u003c 2 + (str > 0.8 ? 1 : 0); n++) puff(S, C + (rnd() - 0.5) * 3, FLOOR - 3 - n * 3, -(14 + 10 * str), 3.5 + rnd(), 1 + 0.3 * str, -8, 2 + rnd() * 12, 0.04);\n  // Most bursts charge the fresh ash enough for a bolt a moment later.\n  if (rnd() \u003c 0.25 + 0.5 * str) S.pend = 0.5 + 0.4 * rnd();\n}\n\n// One bomb (b 1) or blob of spatter thrown from x, y at speed v, a radians off vertical.\nconst fling = (S, x, y, v, a, b = 0, vx = 0) => S.parts.push({ x, y, vx: v * sin(a) + vx, vy: -v * cos(a), T: 1, m: 0, b });\n\n// Lava poured into one flank's cell k: volume v at temperature T.\nfunction pour(L, k, v, T = 1) {\n  k = cl(k, 0, NL - 1);\n  L.T[k] = (L.T[k] * L.v[k] + T * v) / (L.v[k] + v + 1e-6);\n  L.v[k] += v;\n}\n\nfunction step(S, d) {\n  const s1 = S.k1, P = S.P, w = S.wind;\n  const strom = 1 - sm(0.2, 0.5, s1), haw = sm(0.15, 0.45, s1) * (1 - sm(0.6, 0.85, s1)), plin = sm(0.55, 0.9, s1);\n  Object.assign(S, { strom, haw, plin });\n  S.t += d;\n  const ax = 16 + 7 * P, ay = 7.5 + 2.5 * P, top = CHY - ay;\n  // Pressure builds in the chamber, and a slug of gas leaves for the conduit when it is ready.\n  S.pr = min(1, S.pr + d * (0.3 + 0.4 * P));\n  // A Plinian column draws on the chamber in long surges instead.\n  if (plin > 0) S.pr = mix(S.pr, 0.5 + 0.5 * sin(S.t * 1.6), min(1, plin * d * 3));\n  if ((S.next -= d) \u003c= 0 && plin \u003c 0.8) {\n    S.slugs.push({ y: top + 1, str: 0.6 + 0.4 * rnd() + 0.3 * P });\n    S.pr = max(0, S.pr - 0.6);\n    S.next = mix((1.3 + 1.7 * rnd()) / (1 + 0.7 * P), 0.5 + 0.5 * rnd(), max(haw, plin));\n  }\n  for (const g of S.slugs) {\n    // It speeds up as it expands near the top.\n    const u = cl((g.y - FLOOR) / (top - FLOOR), 0, 1);\n    g.y -= (16 + 30 * (1 - u)) * (1 + 0.5 * P) * d;\n    if (g.y \u003c= FLOOR + 1) (g.done = 1), burst(S, g.str * (strom + 0.35 * haw + 0.25 * plin), haw);\n  }\n  S.slugs = S.slugs.filter((g) => !g.done);\n  // Bubbles rise through the chamber and gather under its roof by the conduit's mouth.\n  for (const b of S.bub) {\n    const ex = C - b.x, v = (3 + 4 * P + 3 * S.pr) * d;\n    b.x += cl(ex, -1, 1) * v * 0.5 + sin(S.t * 2.3 + b.y) * 0.3 * v;\n    b.y -= v;\n    if (((b.x - C) / ax) ** 2 + ((b.y - CHY) / ay) ** 2 > 0.8) Object.assign(b, bubble(P));\n  }\n  // The fountain: a steady jet of spatter in Hawaiian style, surging after each slug,\n  // and a smaller one from the flank vent once the dike has broken out.\n  S.nf += d * haw * (60 + 50 * min(1, S.boost)) * (1 + 0.5 * P);\n  for (; S.nf >= 1; S.nf--) fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, (24 + 16 * rnd()) * (0.85 + 0.3 * P) * (1 + 0.3 * min(1, S.boost)), (rnd() - 0.5) * 0.45);\n  S.nv += d * 14 * sm(0.88, 1, P);\n  for (; S.nv >= 1; S.nv--) fling(S, VX + (rnd() - 0.5) * 2, sAt(VX) - 1, 10 + 8 * rnd(), (rnd() - 0.5) * 0.6, 0, 3);\n  S.boost = max(0, S.boost - d * 1.2);\n  // Gas and ash: a thin plume always, a roaring column in Plinian style.\n  S.ndg += d * (2.2 + 1.5 * haw + 11 * plin * (0.4 + S.pr));\n  for (; S.ndg >= 1; S.ndg--)\n    if (rnd() \u003c plin) puff(S, C + (rnd() - 0.5) * 5, FLOOR - 3, -(30 + 14 * rnd()), 5.5, 1, -20, 3 + 7 * rnd(), 0.04, 0.4);\n    else puff(S, C + (rnd() - 0.5) * 3, FLOOR - 2, -7, 3, 0.45 + 0.2 * haw, -6, 4 + 14 * rnd(), 0.045, 0.3);\n  // Plinian: part of the column collapses and pours down a flank.\n  if (plin > 0.3 && (S.npd -= d * plin) \u003c= 0) {\n    S.npd = 2 + 2 * rnd();\n    const g = rnd() \u003c 0.5 ? -1 : 1;\n    for (let n = 0; n \u003c 4; n++) puff(S, C + g * (RIM + 2 * n), RIMY + 2 * n, 0, 4, 1, 0, 0, 0.05, 1.2, g), (S.puffs[S.puffs.length - 1].u = 24 - 3 * n);\n  }\n  for (const p of S.puffs) {\n    if (p.g) {\n      // An avalanche of hot ash hugging the flank, slowing as it spreads, then lifting off.\n      p.x += p.g * p.u * d;\n      p.u = max(3, p.u - 3 * d);\n      p.rx += d * 2.5;\n      p.ry = min(8, p.ry + d * 1.5);\n      p.y = sAt(p.x) - p.ry * 0.35;\n      if (p.u \u003c 5 || p.x \u003c 1 || p.x > W - 1) Object.assign(p, { g: 0, vy: -3, tv: -5, ny: 14 + 10 * rnd(), fade: 0.06 });\n    } else {\n      const rise = sm(p.ny - 2, p.ny + 14, p.y);\n      p.vy += (p.tv * rise - p.vy) * 1.6 * d;\n      p.y += p.vy * d;\n      p.rx = min(30, p.rx + d * (0.8 + 0.12 * abs(p.vy) + 3.5 * (1 - rise) * p.a));\n      p.ry = min(12, p.ry + d * (0.6 + 0.05 * abs(p.vy)));\n    }\n    p.x += (p.vx + w * (4 + 18 * cl(1 - p.y / 60, 0, 1))) * d;\n    p.a -= d * p.fade;\n    p.hot = max(0, p.hot - d * 0.7);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.04 && p.x + p.rx > -4 && p.x - p.rx \u003c W + 4 && p.y + p.ry > -8);\n  // Bombs and spatter fly, land, roll and cool.\n  for (const q of S.parts) {\n    if (!q.m) {\n      q.vy += G * d;\n      q.vx += w * 7 * d;\n      q.x += q.vx * d;\n      q.y += q.vy * d;\n      q.T -= d * (q.b ? 0.16 : 0.35);\n      if (q.vy > 0 && q.y >= sAt(q.x)) {\n        const dx = abs(q.x - C);\n        if (dx \u003c RIM - 0.5) q.dead = 1;\n        else if (!q.b) (q.dead = 1), pour(S.lv[q.x > C ? 1 : 0], floor(dx - RIM), 0.05, max(0.5, q.T));\n        else Object.assign(q, { m: 1, u: 5 + abs(q.vx) * 0.3, s: q.x > C ? 1 : -1 });\n      }\n    } else {\n      q.x += q.s * q.u * d;\n      q.u = max(0, q.u - 6 * d);\n      q.y = sAt(q.x) - 0.5;\n      q.T -= d * 0.3;\n    }\n    if (q.T \u003c= 0 || q.x \u003c -2 || q.x > W + 2) q.dead = 1;\n  }\n  S.parts = S.parts.filter((q) => !q.dead);\n  if (S.parts.length > 400) S.parts.splice(0, S.parts.length - 400);\n  // Lava over the rim and down the flanks, slower as it cools and crusts.\n  const eff = (0.45 + 0.6 * P + 1.2 * haw) * (1 - 0.6 * plin);\n  for (let s = 0; s \u003c 2; s++) {\n    const L = S.lv[s], v = L.v, T = L.T;\n    pour(L, 0, eff * (s ? 0.55 : 1) * d);\n    if (s && P > 0.88) pour(L, floor(VX - C - RIM), 1.4 * sm(0.88, 1, P) * d);\n    L.ph += d * (1 + 2 * T[2]);\n    for (let k = NL - 1; k >= 0; k--) {\n      const f = min(v[k], v[k] * (0.2 + 2.2 * T[k] * T[k]) * (k \u003c 6 ? 1.6 : 0.9) * d);\n      v[k] -= f;\n      if (k \u003c NL - 1) pour(L, k + 1, f, T[k]);\n      T[k] = max(0, T[k] - d * (0.03 + 0.015 / (v[k] + 0.2)));\n      if (T[k] \u003c 0.1) v[k] = max(0, v[k] - d * 0.03);\n    }\n  }\n  S.lake = mix(S.lake, (1.2 + 1.2 * P + 4 * haw) * (1 - plin), min(1, d * 2));\n  // Lightning in the ash.\n  if (rnd() \u003c d * (0.2 + 1.3 * plin + 0.4 * S.glow)) bolt(S);\n  if (S.pend > 0 && (S.pend -= d) \u003c= 0) bolt(S);\n  for (const b of S.bolts) b.life -= d;\n  S.bolts = S.bolts.filter((b) => b.life > 0);\n  S.fl = S.bolts.reduce((m, b) => max(m, floor(b.life * 40) % 3 === 1 ? 0.35 : 1), 0);\n  S.glow *= exp(-d * 2.5);\n}\n\n// K1 tap: the big one.\nfunction blast(S) {\n  S.slugs.length = 0;\n  S.pr = 0;\n  burst(S, 2.4, 0);\n  S.glow = 2.2;\n  for (let n = 0; n \u003c 5; n++) puff(S, C + (rnd() - 0.5) * 6, FLOOR - 4, -(26 + 12 * rnd()), 4 + rnd() * 2, 1, -10, 2 + 8 * rnd(), 0.04, 1);\n  for (let s = 0; s \u003c 2; s++) pour(S.lv[s], 0, 1.6);\n  S.pend = 0.15;\n  S.next = 1.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2;\n  S.k1 = cl(k[0], 0, 1);\n  S.P = cl(k[2], 0, 1);\n  S.wind = cl(k[3], -1, 1);\n  // The volcano has been going for a while before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    for (let n = round(60 + 120 * sp); n-- > 0; ) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) blast(S);\n  step(S, cl(dt || 0, 0, 0.1) * sp);\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst lc = (T) => ((T = lut(T)), [LUT[T], LUT[T + 1], LUT[T + 2]]);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 === undefined) return;\n  F = S.f;\n  const { P, t, haw, plin, kind, st, A, hot, vg, wind } = S;\n  const ax = 16 + 7 * P + 0.8 * S.pr, ay = 7.5 + 2.5 * P + 0.5 * S.pr, top = CHY - ay, bamp = 3 + 6 * P + 1.4 * S.pr, bend = BEND.map((v) => v * bamp);\n  const L = 0.3 + 0.7 * S.glow + 0.6 * haw + 0.5 * plin, fl = S.fl;\n\n  // Sky, cone and the older beds bent up over the chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * 3, kd = kind[i];\n    if (kd === 0) {\n      const g = L * vg[i];\n      (F[o] = st[o] + 150 * g + 7 * fl), (F[o + 1] = st[o + 1] + 48 * g + 8 * fl), (F[o + 2] = st[o + 2] + 16 * g + 18 * fl);\n    } else if (kd === 1) {\n      const g = L * vg[i] * (S.sd[i] \u003c 2.5 ? 1 : 0.2);\n      (F[o] = st[o] + 120 * g), (F[o + 1] = st[o + 1] + 40 * g), (F[o + 2] = st[o + 2] + 10 * g);\n    } else {\n      const d = cl((i >> 6) + 0.5 - BASE + bend[i & 63] + S.off[i], 0, 94), d0 = floor(d), u = d - d0;\n      const a = BC[BB[d0]], b = BC[BB[d0 + 1]], gr = S.gr[i];\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(a[c], b[c], u) * gr;\n    }\n  }\n\n  // The magma: chamber, the feeder below it, the conduit, the dike and the sill, with the rock round them glowing.\n  const glowRock = (o, g) => {\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [210, 50, 16][c], min(0.85, g));\n  };\n  const melt = (o, T) => {\n    const k = lut(T);\n    (F[o] = LUT[k]), (F[o + 1] = LUT[k + 1]), (F[o + 2] = LUT[k + 2]);\n  };\n  for (let y = max(BASE, floor(top - 6)); y \u003c H; y++)\n    for (let x = max(0, floor(C - ax - 7)); x \u003c min(W, C + ax + 7); x++) {\n      const X = x + 0.5, Y = y + 0.5, e = hypot((X - C) / ax, (Y - CHY) / ay), o = (y * W + x) * 3;\n      if (e \u003c 1) {\n        const T = 0.28 + 0.38 * vn(X * 0.17 + 0.7 * sin(Y * 0.17 + t * 0.5), Y * 0.3 + t * 1.2) + 0.2 * (1 - e * e) - 0.25 * sm(0.72, 1, e) + 0.16 * S.pr + 0.1 * P + 0.35 * exp(-((X - C) ** 2) / 9 - ((Y - top) ** 2) / 6) * S.pr;\n        melt(o, T);\n      } else if (Y > CHY && abs(X - C - 1.5 * sin(y * 0.2)) \u003c 1.3) melt(o, 0.38 + 0.08 * sin(y * 0.5 - t * 3));\n      else glowRock(o, exp(-((e - 1) * ay) / 2.4) * (0.5 + 0.4 * S.pr + 0.2 * P));\n    }\n  for (const b of S.bub) put(b.x, b.y, lc(1.05));\n  const slug = (y) => S.slugs.reduce((m, g) => max(m, exp(-(((y - g.y) / 2.6) ** 2))), 0);\n  for (let y = FLOOR; y \u003c= top + 1; y++) {\n    const cx = CXA[y], sg = slug(y), hw = 1.35 + 1.3 * sg + 0.6 * plin;\n    for (let x = max(0, floor(cx - hw - 5)); x \u003c min(W, cx + hw + 5); x++) {\n      const o = (y * W + x) * 3, q = abs(x + 0.5 - cx);\n      if (q \u003c hw) {\n        const ves = hash(x, floor(y + t * 14)) \u003c 0.12 ? 0.25 : 0;\n        melt(o, mix(0.58 + 0.12 * sin(y * 0.45 + t * 7) + ves + 0.5 * sg, 0.5 + 0.6 * vn(x * 0.6, (y + t * 45) * 0.25), plin));\n      } else if (kind[y * W + x]) glowRock(o, exp(-(q - hw) / 1.5) * (0.4 + 0.5 * sg + 0.3 * plin));\n    }\n  }\n  // The dike towards the right flank, and the sill along the beds on the left.\n  const dk = sm(0.2, 0.9, P), sl = sm(0.45, 1, P);\n  for (let j = 0; j \u003c 46 * dk; j++) {\n    const u = j / 46, x = CXA[99] + (VX - CXA[99]) * u, y = 99 - (99 - sAt(VX)) * u;\n    put(x, y, lc(0.55 + 0.1 * sin(j * 0.6 - t * 5)));\n    put(x + 1, y, [210, 50, 16], 0.45);\n  }\n  for (let j = 0; j \u003c 20 * sl; j++) {\n    const x = CXA[93] - 2 - j, y = 93 + 0.006 * j * j + 2 * sin(j * 0.15);\n    put(x, y, lc(0.5 + 0.08 * sin(j * 0.7 + t * 4)));\n    if (j \u003c 14 * sl) put(x, y + 1, lc(0.42));\n  }\n\n  // The ash: every puff summed, then shaded over the sky.\n  A.fill(0);\n  hot.fill(0);\n  for (const p of S.puffs) {\n    const x0 = max(0, floor(p.x - p.rx)), x1 = min(W - 1, floor(p.x + p.rx)), y0 = max(0, floor(p.y - p.ry)), y1 = min(H - 1, floor(p.y + p.ry));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = (y + 0.5 - p.y) / p.ry;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = (x + 0.5 - p.x) / p.rx, q = 1 - dx * dx - dy * dy;\n        if (q > 0) (A[y * W + x] += p.a * q * q), (hot[y * W + x] += p.hot * q * q);\n      }\n    }\n  }\n  // Ash falling out of the plume aloft, slanting downwind as it falls.\n  const col = new Float32Array(W);\n  for (const p of S.puffs)\n    if (!p.g && p.y \u003c 45 && p.rx > 4) for (let x = max(0, floor(p.x - p.rx)); x \u003c min(W, p.x + p.rx); x++) col[x] += p.a * max(0, 1 - ((x + 0.5 - p.x) / p.rx) ** 2);\n  for (let y = 14; y \u003c 84; y++) {\n    const f = 0.11 * sm(12, 30, y) * (1 - sm(56, 84, y)), sh = wind * (y - 14) * 0.55;\n    for (let x = 0; x \u003c W; x++) {\n      const c = col[cl(round(x - sh), 0, W - 1)];\n      if (c > 0.05) A[y * W + x] += f * min(1.5, c) * (0.3 + vn(x * 0.9, y * 0.12 - t * 3));\n    }\n  }\n  const { flx, fly } = S;\n  for (let i = 0; i \u003c N; i++) {\n    if (A[i] \u003c 0.01 || kind[i]) continue;\n    const x = i & 63, y = i >> 6, o = i * 3, tex = vn(x * 0.22 - t * wind * 0.5, y * 0.2 + t * 0.7);\n    const al = min(0.94, 1 - exp(-A[i] * (1.3 + 1.7 * tex))), sh = 0.55 + 0.6 * tex, vl = 0.8 * L * vg[i] + 0.6 * hot[i], fy = fl * exp(-hypot(x - flx, (y - fly) * 0.7) / 16);\n    F[o] = mix(F[o], 104 * sh + 255 * vl + 130 * fy, al);\n    F[o + 1] = mix(F[o + 1], 98 * sh + 100 * vl + 140 * fy, al);\n    F[o + 2] = mix(F[o + 2], 100 * sh + 34 * vl + 210 * fy, al);\n  }\n\n  // The crater: the vent, the lava lake, and the flash of a burst.\n  const ll = FLOOR + 0.6 - S.lake;\n  for (let y = RIMY - 1; y \u003c= FLOOR + 1; y++)\n    for (let x = C - RIM; x \u003c C + RIM; x++) {\n      const i = y * W + x;\n      if (!kind[i] && y + 0.5 > ll) melt(i * 3, 0.55 + 0.3 * vn(x * 0.6 + t, y * 0.8) + 0.2 * S.glow - 0.12 * (y + 0.5 - ll \u003c 1 ? 1 : 0));\n    }\n  if (S.glow > 0.02)\n    for (let y = FLOOR - 14; y \u003c= FLOOR + 3; y++)\n      for (let x = C - 12; x \u003c C + 12; x++) {\n        const o = (y * W + x) * 3, g = S.glow * exp(-hypot(x + 0.5 - C, y + 0.5 - FLOOR + 1) / 3.2);\n        (F[o] += 255 * g), (F[o + 1] += 190 * g), (F[o + 2] += 90 * g);\n      }\n\n  // Lava down the flanks: hot and bright near the rim, crusting dark as it cools.\n  for (let s = 0; s \u003c 2; s++) {\n    const { v, T, ph } = S.lv[s];\n    for (let k = 0; k \u003c NL; k++) {\n      if (v[k] \u003c 0.01) continue;\n      const x = s ? C + RIM + k : C - RIM - 1 - k, y0 = min(SURF[x], SURF[x + 1]), y1 = max(SURF[x], SURF[x + 1]), th = min(4, v[k] * 3.2), al = min(1, v[k] * 8);\n      // Its glow on the air just above it.\n      for (let j = 1; j \u003c= 3; j++) put(x, y0 - th - j, [255, 90, 20], (0.35 * al * T[k]) / j);\n      for (let y = floor(y0 - th); y \u003c= floor(y1); y++) {\n        const n = vn(k * 0.7 - ph * 2, y * 0.6), tt = T[k], c = lc(0.22 + 0.62 * tt + 0.18 * n);\n        const cr = max(sm(0.75, 0.25, tt) * sm(0.3, 0.6, vn(k * 1.3 - ph * 2, y * 1.1 + 9)), sm(0.12, 0.02, tt)), g = S.gr[(y * W + x) & 8191];\n        put(x, y, [mix(c[0], 64 * g, cr), mix(c[1], 52 * g, cr), mix(c[2], 54 * g, cr)], al);\n      }\n    }\n  }\n\n  // Bombs and spatter, with a short trail while they fly.\n  for (const q of S.parts) {\n    const c = lc(0.25 + 0.85 * q.T);\n    if (!q.m) for (let j = 1; j \u003c= 3; j++) put(q.x - q.vx * 0.022 * j, q.y - q.vy * 0.022 * j, c, 0.5 / j);\n    put(q.x, q.y, c);\n    if (q.b && q.T > 0.3) put(q.x + 1, q.y, c, 0.6);\n  }\n\n  // Lightning.\n  for (const b of S.bolts) {\n    if (floor(b.life * 40) % 3 === 1) continue;\n    for (const pts of [b.pts, b.br])\n      for (let j = 1; j \u003c pts.length; j++) {\n        const [x0, y0] = pts[j - 1], [x1, y1] = pts[j], m = max(abs(x1 - x0), abs(y1 - y0)) * 1.5 + 1;\n        for (let u = 0; u \u003c= m; u++) {\n          const x = mix(x0, x1, u / m), y = mix(y0, y1, u / m);\n          put(x - 1, y, [120, 110, 255], 0.35), put(x + 1, y, [120, 110, 255], 0.35), put(x, y, [240, 240, 255]);\n        }\n      }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Style","min":0,"max":1,"about":"Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower."},{"name":"Pressure","min":0,"max":1,"about":"How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own."},{"name":"Wind","min":-1,"max":1,"about":"Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.3557,"detail":0.0525,"edges":0.231,"complexity":2.1856,"coverage":1,"colour":0.2971,"drift":0.0844},"knobResponse":[0.082,0.0543,0.0923,0.0549]},{"slug":"essence-drop","title":"Essence Drop","family":"cosmetic","round":33,"note":"맑은 물빛 에센스에 짙은 색 방울이 느린 화면으로 떨어져 손가락 아홉 개의 왕관을 세우고, 파인 자리가 닫히며 솟은 기둥 끝에서 구슬이 떨어져 나가요. 방울의 짙은 색은 소용돌이 고리로 말려 가라앉으며 웅덩이에 풀려요. K3 을 올리면 왕관과 구슬이 사라지고 젤처럼 무겁게 잠기며, K1 은 색상환을 다 돌고 누르면 방울이 바로 떨어져요.","idea":"In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.","buttons":"K1 tap lets a drop fall now.","code":"// ===== Patternflow pattern =====\n// Title:   Essence Drop\n// Family:  cosmetic\n// Idea:    In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after slow-motion film of a drop falling into clear essence\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1\n//\n// Knob 1: Hue. The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker.\n// Knob 2: Speed. How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower.\n// Knob 3: Viscosity. Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume.\n// Knob 4: Size. The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs.\n// Buttons: K1 tap lets a drop fall now.\n\nconst W = 64, H = 128, N = W * H, Y0 = 66;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k) => {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n};\n// Light comes from the upper left.\nconst LX = -0.55, LY = -0.835;\nconst MAXP = 2000;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, visc: 0, size: 0.06, next: 0.4, T: 0,\n    ev: [], dye: new Float32Array(N), deep: new Float32Array(N), dt2: new Float32Array(N), sdf: new Float32Array(N), rip: new Float32Array(W),\n    px: new Float32Array(MAXP), py: new Float32Array(MAXP), pa: new Float32Array(MAXP), pe: new Int32Array(MAXP), np: 0,\n    circ: [], caps: [], pal: new Float32Array(13), palKey: NaN,\n  };\n}\n\nfunction spawn(S) {\n  const r = 3.4 + 4.2 * S.size, R = Math.random;\n  const x = 32 + (R() - 0.5) * 10;\n  // Nine fingers round the front of the crown, each its own length, and the\n  // beads they throw each their own speed, so the spray fans out.\n  const fing = [];\n  for (let j = 0; j \u003c 9; j++) fing.push([PI * (j + 0.5 + 0.35 * (R() - 0.5)) / 9, 0.6 + 0.65 * R(), 7 + 6 * R(), 4 + 5 * R()]);\n  S.ev.push({ id: (S.idn = (S.idn || 0) + 1), x, r, te: 0, Tf: 1.4 * (1 + 0.5 * S.visc), dyed: false, ga: 0, a: 0, yv: 0, fing });\n  if (S.ev.length > 4) S.ev.shift();\n}\n\n// The phases of one splash, as functions of tau, the seconds since impact on\n// the film's own clock: the cavity opens and shuts by 0.9, the crown stands\n// by 0.35 and falls by 1.1, the jet rises from 0.85 and is gone by 2.35.\nconst TC = 0.9, TCR = 1.1, TJ0 = 0.85, TJ = 1.5, TPINCH = 0.42;\nfunction slowOf(v) {\n  return 1 + 1.3 * v;\n}\n\n// The dye: when the drop goes under, a blob of particles is set in the\n// velocity field of a vortex pair, the cross-section of a vortex ring. The\n// pair moves down at U = G / (4 pi a), slowing as G decays and widening as it\n// slows, and the particles wind into its two curls and trail a stem.\nfunction stepDye(S, dts) {\n  const v = S.visc;\n  for (const e of S.ev) {\n    const tau = (e.te - e.Tf) / slowOf(v);\n    if (tau \u003c 0.08) continue;\n    if (!e.dyed) {\n      e.dyed = true;\n      e.a = 1.7 * e.r;\n      e.yv = Y0 + 2 * e.r;\n      e.ga = 4 * PI * e.a * (13 + 1.4 * e.r) * (1 - 0.55 * v);\n      const n = floor(160 + 40 * e.r);\n      for (let i = 0; i \u003c n; i++) {\n        if (S.np >= MAXP) break;\n        const ang = Math.random() * 2 * PI, rad = sqrt(Math.random()) * 1.9 * e.r;\n        S.px[S.np] = e.x + cos(ang) * rad;\n        S.py[S.np] = Y0 + 1.6 * e.r + sin(ang) * rad * 0.8;\n        S.pa[S.np] = 0;\n        S.pe[S.np] = e.id;\n        S.np++;\n      }\n    }\n    // Viscosity eats the ring: its spin decays over 2.8 s in water, 1.5 s in gel.\n    e.ga *= exp(-dts / (2.8 - 1.3 * v));\n    const U = e.ga / (4 * PI * e.a);\n    e.yv += U * dts;\n    e.a += 0.3 * e.r * dts * (1 - 0.6 * v);\n  }\n  const dye = S.dye;\n  let k = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    let e = null;\n    for (const f of S.ev) if (f.id === S.pe[i]) e = f;\n    let x = S.px[i], y = S.py[i];\n    const age = (S.pa[i] += dts);\n    if (!e || age > 12) continue;\n    // Two Lamb-Oseen cores, opposite spins, the fluid between them going down.\n    let ux = 0, uy = 0;\n    const d2 = (0.85 * e.a) ** 2;\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const dx = x - (e.x + s * e.a), dy = y - e.yv, g = (-s * e.ga) / (2 * PI * (dx * dx + dy * dy + d2));\n      ux += -g * dy;\n      uy += g * dx;\n    }\n    x += (ux + (Math.random() - 0.5) * 7) * dts;\n    y += (uy + (Math.random() - 0.5) * 7) * dts;\n    x = cl(x, 0.5, W - 1.5);\n    y = cl(y, Y0 + 1, H - 1.5);\n    // Each particle leaves colour where it passes, less as it ages, so the\n    // curls show where it went and the old colour spreads out.\n    const w = dts * 1.4 * exp(-age / 5), ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix;\n    dye[o] += w * (1 - fx) * (1 - fy);\n    dye[o + 1] += w * fx * (1 - fy);\n    dye[o + W] += w * (1 - fx) * fy;\n    dye[o + W + 1] += w * fx * fy;\n    S.px[k] = x;\n    S.py[k] = y;\n    S.pa[k] = age;\n    S.pe[k] = S.pe[i];\n    k++;\n  }\n  S.np = k;\n  // Diffusion and a slow fade into the pool: a gel holds the colour longer.\n  const t2 = S.dt2, kap = cl(dts * (1.6 - 1.1 * v), 0, 0.24), fade = exp(-dts / (7 + 5 * v));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, c = dye[i];\n      const l = (x > 0 ? dye[i - 1] : c) + (x \u003c W - 1 ? dye[i + 1] : c) + (y > 0 ? dye[i - W] : c) + (y \u003c H - 1 ? dye[i + W] : c) - 4 * c;\n      t2[i] = (c + kap * l) * fade;\n    }\n  dye.set(t2);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.visc = cl(k[2] || 0, 0, 1);\n  S.size = cl(k[3], 0, 1);\n  const dts = (d * S.speed) / 2;\n  S.T += dts;\n  if (input.btnPressed && input.btnPressed[0]) spawn(S);\n  S.next -= dts;\n  if (S.next \u003c= 0) {\n    spawn(S);\n    S.next += 5.5 * (1 + 0.4 * S.visc);\n  }\n  for (const e of S.ev) e.te += dts;\n  S.ev = S.ev.filter((e) => e.te - e.Tf \u003c 16 * slowOf(S.visc));\n  stepDye(S, dts);\n}\n\n// Shapes for the frame: circles and tapered capsules, each smooth-joined to\n// the pool so a bead touching the surface melts into it.\nfunction build(S) {\n  const C = (S.circ = []), K = (S.caps = []), v = S.visc, rip = S.rip;\n  rip.fill(0);\n  S.cav = [];\n  S.crowns = [];\n  for (const e of S.ev) {\n    const r = e.r, x0 = e.x;\n    if (e.te \u003c e.Tf) {\n      // Falling, faster and faster. The drop hangs from a thread out of the\n      // top; the thread stretches, breaks (later the thicker the essence) and\n      // its lower end balls up into a small bead that trails the drop.\n      const u = e.te / e.Tf, yb = -2 * r - 4 + (Y0 + 2 * r + 4) * (0.3 * u + 0.7 * u * u), cy = yb - r;\n      C.push([x0, cy, r, 1.4, 1]);\n      const tb = 0.45 + 0.42 * v;\n      if (u \u003c tb) K.push([x0, cy - 0.5 * r, x0, -6, 0.42 * r, 0.12 * r * (1 + v), 1.6, 1]);\n      else {\n        const f = (u - tb) / (1 - tb), sy = cy - r - 2 - (6 + 14 * v) * sqrt(f);\n        C.push([x0, sy, 0.32 * r, 1, 1]);\n        K.push([x0, -6, x0, -6 + (cy - 12 + 6) * max(0, 1 - 3 * f), 0.15 * r, 0.12 * r, 1, 1]);\n      }\n      continue;\n    }\n    const tau = (e.te - e.Tf) / slowOf(v);\n    // The drop sinks into the surface instead of vanishing at the touch: in a\n    // gel it takes 0.75 s and a thick neck joins it to the pool.\n    const ts = 0.15 + 0.6 * v;\n    if (tau \u003c ts) C.push([x0, Y0 - r + 2.2 * r * (tau / ts), r * (1 - 0.3 * (tau / ts)), 1.4 + 3 * v, 1]);\n    // Ripples: a packet from the impact and a smaller one when the jet falls,\n    // running out along the surface at 9 LEDs a second, 4 in a gel, about\n    // nine LEDs from crest to crest.\n    for (const [t0, a0] of [[0, 0.9 * (1 - 0.6 * v)], [TJ0 + TJ * 0.8, 0.45 * (1 - 0.7 * v)]]) {\n      const tt = tau - t0;\n      if (tt \u003c= 0) continue;\n      const c = 9 - 5 * v, A = (a0 * r * exp(-tt / 1.8)) / 3.6;\n      for (let x = 0; x \u003c W; x++) {\n        const s = abs(x + 0.5 - x0) - c * tt - 2, en = exp(-(s * s) / 60);\n        if (en > 0.01) rip[x] += A * en * sin(s * 0.7);\n      }\n    }\n    // The cavity: an air pocket pushed down under the surface.\n    if (tau \u003c TC) {\n      const Rc = r * (1.2 + 1.3 * (1 - exp(-tau / 0.18))) * (1 - 0.3 * v), Dc = r * 2.5 * (1 - 0.55 * v) * sin((PI * tau) / TC);\n      if (Dc > 0.3) S.cav.push([x0, Rc, Dc]);\n    }\n    // The crown: two thin walls leaning out, a translucent sheet between\n    // them, and fingers round the rim whose beads fly off at 0.42.\n    const hc = r * 3.1 * max(0, 1 - v / 0.7), R = r * (1.4 + 1.5 * (1 - exp(-min(tau, TCR) / 0.25)));\n    if (hc > 0.2 && tau \u003c TCR) {\n      const Hc = hc * Math.pow(sin((PI * tau) / TCR), 0.6), fl = 0.35 * Hc;\n      if (Hc > 0.5) {\n        for (let s = -1; s \u003c= 1; s += 2) K.push([x0 + s * R, Y0 + 1, x0 + s * (R + fl), Y0 - Hc, 0.75, 0.5, 1.2]);\n        S.crowns.push([x0, R, fl, Hc]);\n        if (tau \u003c 0.42 && v \u003c 0.5) {\n          const g = sm(tau / 0.3) * (1 - v / 0.5);\n          for (const [ph, lk] of e.fing) {\n            const cs = cos(ph), bx = x0 + (R + fl) * cs, lf = lk * 0.55 * hc * g, tx = bx + 0.35 * lf * cs, ty = Y0 - Hc - lf;\n            K.push([bx, Y0 - Hc + 0.5, tx, ty, 0.5, 0.3, 0.9]);\n            C.push([tx, ty, 0.26 * r, 0.9]);\n          }\n        }\n      }\n    }\n    if (tau >= 0.42 && v \u003c 0.5) {\n      // The beads thrown from the fingers fly out and up, then slow and drop back.\n      const t = tau - 0.42, Hp = hc * Math.pow(sin((PI * 0.42) / TCR), 0.6), Rp = r * (1.4 + 1.5 * (1 - exp(-0.42 / 0.25))) + 0.35 * Hp;\n      for (const [ph, lk, vy, vx] of e.fing) {\n        const cs = cos(ph), lf = lk * 0.55 * hc * (1 - v / 0.5);\n        const y = Y0 - Hp - lf - vy * t + 16 * t * t, x = x0 + (Rp + 0.35 * lf) * cs + vx * cs * t;\n        if (y \u003c Y0 + 2) C.push([x, y, 0.26 * r * (1 - v / 0.5), 0.9]);\n      }\n    }\n    // The jet: when the cavity snaps shut a column climbs out of the middle;\n    // in water its tip pinches off into a bead that flies on and falls back.\n    if (tau > TJ0) {\n      const s = (tau - TJ0) / TJ, hj = min(48, r * 8.5) * (1 - 0.8 * v), rb = 0.85 * r * (1 + 0.8 * v), pinch = v \u003c 0.55;\n      if (s \u003c 1) {\n        const Hj = hj * sin(PI * s);\n        const top = Y0 - Hj;\n        K.push([x0, Y0 + 3, x0, top, rb, (0.5 + 0.5 * v) * r, 2.5 + 2.5 * v]);\n        if (!pinch || s \u003c TPINCH) C.push([x0, top - 0.3 * r, (0.7 + 0.3 * v) * r, 1.3 + 2 * v]);\n      }\n      if (pinch && s >= TPINCH) {\n        const t = (s - TPINCH) * TJ, Hp = hj * sin(PI * TPINCH), y = Y0 - Hp - 0.9 * r - 7 * t + 18 * t * t;\n        if (y \u003c Y0 + 2) C.push([x0, y, 0.68 * r, 1.3]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  build(S);\n  const sdf = S.sdf, rip = S.rip, v = S.visc, deep = S.deep;\n  // The liquid's signed distance: negative inside. The pool's surface,\n  // minus the cavities, then every shape joined on smoothly. The falling drop\n  // is the concentrated essence, so where it is the colour is deep.\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i++) sdf[i] = Y0 + rip[x] - (y + 0.5);\n  deep.fill(0);\n  for (const [cx, R, D] of S.cav)\n    for (let y = Y0 - 2; y \u003c min(H, Y0 + D + 3); y++)\n      for (let x = max(0, floor(cx - R - 3)); x \u003c min(W, cx + R + 3); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - Y0) / D, da = (sqrt(dx * dx + dy * dy) - 1) * min(R, D), i = y * W + x;\n        sdf[i] = -smin(-sdf[i], da, 1.5);\n      }\n  for (const [ax, ay, bx, by, ra, rb, k, dp] of S.caps) {\n    const x0 = max(0, floor(min(ax, bx) - ra - k - 1)), x1 = min(W - 1, floor(max(ax, bx) + ra + k + 1));\n    const y0 = max(0, floor(min(ay, by) - ra - k - 1)), y1 = min(H - 1, floor(max(ay, by) + ra + k + 1));\n    const ex = bx - ax, ey = by - ay, ll = ex * ex + ey * ey || 1;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * ex + qy * ey) / ll, 0, 1);\n        const dd = Math.hypot(qx - ex * t, qy - ey * t) - (ra + (rb - ra) * t), i = y * W + x;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  for (const [cx, cy, r, k, dp] of S.circ) {\n    const x0 = max(0, floor(cx - r - k - 1)), x1 = min(W - 1, floor(cx + r + k + 1)), y0 = max(0, floor(cy - r - k - 1)), y1 = min(H - 1, floor(cy + r + k + 1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const i = y * W + x, dd = Math.hypot(x + 0.5 - cx, y + 0.5 - cy) - r;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  // Palette: backdrop, essence, and the deep colour the drop carries. A\n  // thicker essence holds more colour. From rose through orange and gold to\n  // lime, hue -0.12 to 0.35, any of these at half brightness reads brown,\n  // khaki or olive on the LEDs, so there everything is lifted towards cream\n  // and paled: the backdrop to 200 of 255 or more with a shallow vignette, the\n  // pool to about 215, and the deep colour goes brighter than the pool\n  // instead of darker.\n  const pal = S.pal, h = S.hue + 0.52, hf = h - floor(h), key = hf + 7 * v;\n  if (S.palKey !== key) {\n    const hw = hf > 0.5 ? hf - 1 : hf, wm = sm((hw + 0.12) / 0.06) * (1 - sm((hw - 0.28) / 0.07));\n    hsv(h + 0.02, 0.14 - 0.06 * wm, 1, pal, 0);\n    hsv(h + 0.06 * (1 - wm), 0.4 - 0.3 * wm, 1, pal, 10);\n    hsv(h, (0.38 + 0.22 * v) * (1 - 0.5 * wm), 1, pal, 3);\n    hsv(h + 0.015, 0.92 - 0.3 * wm, 1, pal, 6);\n    pal[9] = wm;\n    S.palKey = key;\n  }\n  const wm = pal[9], dv = 0.46 + 0.5 * wm, dye = S.dye, T = S.T;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const below = y + 0.5 - Y0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const d = sdf[i];\n      // The backdrop: a soft key light high in the middle, deepening towards\n      // the surface.\n      const gx = (x + 0.5 - 32) / 32, gy = (y - 14) / 46;\n      const gl = exp(-(gx * gx + gy * gy)), bv = min(1, 0.4 + 0.46 * gl + wm * (0.36 - 0.26 * gl));\n      let r = (pal[10] + (pal[0] - pal[10]) * gl) * bv, g = (pal[11] + (pal[1] - pal[11]) * gl) * bv, b = (pal[12] + (pal[2] - pal[12]) * gl) * bv;\n      // The crown's sheet: thin film between its walls, brighter at the two\n      // sides where the eye looks along it, and along the lip.\n      for (const [cx, R, fl, Hc] of S.crowns) {\n        const hgt = -below;\n        if (hgt \u003c -0.5 || hgt > Hc) continue;\n        const Rh = R + (fl * hgt) / Hc, u = abs(x + 0.5 - cx) / Rh;\n        if (u >= 1) continue;\n        const a = 0.16 + 0.3 * min(1, 1 / sqrt(1 - u * u) - 1) + 0.4 * exp(-((hgt - Hc + 0.6) ** 2));\n        r += (pal[3] * 0.92 - r) * a;\n        g += (pal[4] * 0.92 - g) * a;\n        b += (pal[5] * 0.92 - b) * a;\n      }\n      // The open surface, seen edge on: a gloss line along it, glinting white\n      // where a ripple tilts it towards the light. It is drawn across the\n      // boundary, so it does not flicker as the surface moves by a fraction.\n      const pd = Y0 + rip[x] - (y + 0.5), open = abs(d - pd) \u003c 0.02;\n      let spec = 0;\n      if (open && abs(pd) \u003c 2.5) {\n        const sl = ((x \u003c W - 1 ? rip[x + 1] : rip[x]) - (x > 0 ? rip[x - 1] : rip[x])) / 2, nd = (sl * LX - LY) / sqrt(1 + sl * sl);\n        spec = exp(-((pd + 0.3) ** 2) / 0.45) * (0.16 + 0.85 * Math.pow(max(0, nd), 12));\n      }\n      if (d \u003c 0.5) {\n        const cov = cl(0.5 - d, 0, 1);\n        // Inside the liquid: the essence, brighter just under the surface and\n        // deeper towards the bottom, slow shafts of light from the surface\n        // swaying through it, and the deep colour where the drop has gone.\n        const depth = cl(below / (H - Y0), 0, 1);\n        let lv = below \u003c 0 ? 0.88 + 0.09 * wm : 0.8 - 0.36 * depth + wm * (0.15 + 0.16 * depth);\n        if (below >= 0) {\n          const sx = x + 0.4 * below;\n          lv += 0.16 * (1 - depth) * (0.5 + 0.5 * sin(0.3 * sx - 0.7 * T + 1.3 * sin(0.11 * sx + 0.23 * T)));\n        }\n        lv = min(1, lv);\n        let lr = pal[3] * lv, lg = pal[4] * lv, lb = pal[5] * lv;\n        const da = max(deep[i] * 0.9, 1 - exp(-dye[i] * 0.9));\n        if (da > 0.003) {\n          lr += (pal[6] * dv - lr) * da;\n          lg += (pal[7] * dv - lg) * da;\n          lb += (pal[8] * dv - lb) * da;\n        }\n        let rim = 0, inner = 0;\n        if (!open) {\n          // Everything but the open surface: the normal from the distance\n          // field, a white highlight where it faces the light, a gloss on what\n          // faces up, a darker rim on the far side and light gathered inside\n          // the bottom of a bead.\n          const xm = x > 0 ? sdf[i - 1] : d, xp = x \u003c W - 1 ? sdf[i + 1] : d, ym = y > 0 ? sdf[i - W] : d, yp = y \u003c H - 1 ? sdf[i + W] : d;\n          let nx = xp - xm, ny = yp - ym;\n          const nl = Math.hypot(nx, ny) || 1;\n          nx /= nl;\n          ny /= nl;\n          const edge = cl(1 + d / 1.6, 0, 1), nd = nx * LX + ny * LY;\n          spec += edge * (0.9 * Math.pow(max(0, nd), 7) + 0.22 * max(0, -ny));\n          rim = edge * 0.35 * (1 - max(0, nd));\n          inner = cl((-d - 0.6) / 1.2, 0, 1) * cl((3 + d) / 1.5, 0, 1) * Math.pow(max(0, -nd), 2) * (below \u003c 1 ? 0.6 : 0);\n        }\n        lr = lr * (1 - rim) + inner * pal[3];\n        lg = lg * (1 - rim) + inner * pal[4];\n        lb = lb * (1 - rim) + inner * pal[5];\n        r += (lr - r) * cov;\n        g += (lg - g) * cov;\n        b += (lb - b) * cov;\n      }\n      r += spec;\n      g += spec;\n      b += spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","layer":{"id":"layer-essence-drop","type":"code","name":"essence-drop","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Essence Drop\n// Family:  cosmetic\n// Idea:    In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after slow-motion film of a drop falling into clear essence\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1\n//\n// Knob 1: Hue. The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker.\n// Knob 2: Speed. How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower.\n// Knob 3: Viscosity. Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume.\n// Knob 4: Size. The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs.\n// Buttons: K1 tap lets a drop fall now.\n\nconst W = 64, H = 128, N = W * H, Y0 = 66;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k) => {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n};\n// Light comes from the upper left.\nconst LX = -0.55, LY = -0.835;\nconst MAXP = 2000;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, visc: 0, size: 0.06, next: 0.4, T: 0,\n    ev: [], dye: new Float32Array(N), deep: new Float32Array(N), dt2: new Float32Array(N), sdf: new Float32Array(N), rip: new Float32Array(W),\n    px: new Float32Array(MAXP), py: new Float32Array(MAXP), pa: new Float32Array(MAXP), pe: new Int32Array(MAXP), np: 0,\n    circ: [], caps: [], pal: new Float32Array(13), palKey: NaN,\n  };\n}\n\nfunction spawn(S) {\n  const r = 3.4 + 4.2 * S.size, R = Math.random;\n  const x = 32 + (R() - 0.5) * 10;\n  // Nine fingers round the front of the crown, each its own length, and the\n  // beads they throw each their own speed, so the spray fans out.\n  const fing = [];\n  for (let j = 0; j \u003c 9; j++) fing.push([PI * (j + 0.5 + 0.35 * (R() - 0.5)) / 9, 0.6 + 0.65 * R(), 7 + 6 * R(), 4 + 5 * R()]);\n  S.ev.push({ id: (S.idn = (S.idn || 0) + 1), x, r, te: 0, Tf: 1.4 * (1 + 0.5 * S.visc), dyed: false, ga: 0, a: 0, yv: 0, fing });\n  if (S.ev.length > 4) S.ev.shift();\n}\n\n// The phases of one splash, as functions of tau, the seconds since impact on\n// the film's own clock: the cavity opens and shuts by 0.9, the crown stands\n// by 0.35 and falls by 1.1, the jet rises from 0.85 and is gone by 2.35.\nconst TC = 0.9, TCR = 1.1, TJ0 = 0.85, TJ = 1.5, TPINCH = 0.42;\nfunction slowOf(v) {\n  return 1 + 1.3 * v;\n}\n\n// The dye: when the drop goes under, a blob of particles is set in the\n// velocity field of a vortex pair, the cross-section of a vortex ring. The\n// pair moves down at U = G / (4 pi a), slowing as G decays and widening as it\n// slows, and the particles wind into its two curls and trail a stem.\nfunction stepDye(S, dts) {\n  const v = S.visc;\n  for (const e of S.ev) {\n    const tau = (e.te - e.Tf) / slowOf(v);\n    if (tau \u003c 0.08) continue;\n    if (!e.dyed) {\n      e.dyed = true;\n      e.a = 1.7 * e.r;\n      e.yv = Y0 + 2 * e.r;\n      e.ga = 4 * PI * e.a * (13 + 1.4 * e.r) * (1 - 0.55 * v);\n      const n = floor(160 + 40 * e.r);\n      for (let i = 0; i \u003c n; i++) {\n        if (S.np >= MAXP) break;\n        const ang = Math.random() * 2 * PI, rad = sqrt(Math.random()) * 1.9 * e.r;\n        S.px[S.np] = e.x + cos(ang) * rad;\n        S.py[S.np] = Y0 + 1.6 * e.r + sin(ang) * rad * 0.8;\n        S.pa[S.np] = 0;\n        S.pe[S.np] = e.id;\n        S.np++;\n      }\n    }\n    // Viscosity eats the ring: its spin decays over 2.8 s in water, 1.5 s in gel.\n    e.ga *= exp(-dts / (2.8 - 1.3 * v));\n    const U = e.ga / (4 * PI * e.a);\n    e.yv += U * dts;\n    e.a += 0.3 * e.r * dts * (1 - 0.6 * v);\n  }\n  const dye = S.dye;\n  let k = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    let e = null;\n    for (const f of S.ev) if (f.id === S.pe[i]) e = f;\n    let x = S.px[i], y = S.py[i];\n    const age = (S.pa[i] += dts);\n    if (!e || age > 12) continue;\n    // Two Lamb-Oseen cores, opposite spins, the fluid between them going down.\n    let ux = 0, uy = 0;\n    const d2 = (0.85 * e.a) ** 2;\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const dx = x - (e.x + s * e.a), dy = y - e.yv, g = (-s * e.ga) / (2 * PI * (dx * dx + dy * dy + d2));\n      ux += -g * dy;\n      uy += g * dx;\n    }\n    x += (ux + (Math.random() - 0.5) * 7) * dts;\n    y += (uy + (Math.random() - 0.5) * 7) * dts;\n    x = cl(x, 0.5, W - 1.5);\n    y = cl(y, Y0 + 1, H - 1.5);\n    // Each particle leaves colour where it passes, less as it ages, so the\n    // curls show where it went and the old colour spreads out.\n    const w = dts * 1.4 * exp(-age / 5), ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix;\n    dye[o] += w * (1 - fx) * (1 - fy);\n    dye[o + 1] += w * fx * (1 - fy);\n    dye[o + W] += w * (1 - fx) * fy;\n    dye[o + W + 1] += w * fx * fy;\n    S.px[k] = x;\n    S.py[k] = y;\n    S.pa[k] = age;\n    S.pe[k] = S.pe[i];\n    k++;\n  }\n  S.np = k;\n  // Diffusion and a slow fade into the pool: a gel holds the colour longer.\n  const t2 = S.dt2, kap = cl(dts * (1.6 - 1.1 * v), 0, 0.24), fade = exp(-dts / (7 + 5 * v));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, c = dye[i];\n      const l = (x > 0 ? dye[i - 1] : c) + (x \u003c W - 1 ? dye[i + 1] : c) + (y > 0 ? dye[i - W] : c) + (y \u003c H - 1 ? dye[i + W] : c) - 4 * c;\n      t2[i] = (c + kap * l) * fade;\n    }\n  dye.set(t2);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.visc = cl(k[2] || 0, 0, 1);\n  S.size = cl(k[3], 0, 1);\n  const dts = (d * S.speed) / 2;\n  S.T += dts;\n  if (input.btnPressed && input.btnPressed[0]) spawn(S);\n  S.next -= dts;\n  if (S.next \u003c= 0) {\n    spawn(S);\n    S.next += 5.5 * (1 + 0.4 * S.visc);\n  }\n  for (const e of S.ev) e.te += dts;\n  S.ev = S.ev.filter((e) => e.te - e.Tf \u003c 16 * slowOf(S.visc));\n  stepDye(S, dts);\n}\n\n// Shapes for the frame: circles and tapered capsules, each smooth-joined to\n// the pool so a bead touching the surface melts into it.\nfunction build(S) {\n  const C = (S.circ = []), K = (S.caps = []), v = S.visc, rip = S.rip;\n  rip.fill(0);\n  S.cav = [];\n  S.crowns = [];\n  for (const e of S.ev) {\n    const r = e.r, x0 = e.x;\n    if (e.te \u003c e.Tf) {\n      // Falling, faster and faster. The drop hangs from a thread out of the\n      // top; the thread stretches, breaks (later the thicker the essence) and\n      // its lower end balls up into a small bead that trails the drop.\n      const u = e.te / e.Tf, yb = -2 * r - 4 + (Y0 + 2 * r + 4) * (0.3 * u + 0.7 * u * u), cy = yb - r;\n      C.push([x0, cy, r, 1.4, 1]);\n      const tb = 0.45 + 0.42 * v;\n      if (u \u003c tb) K.push([x0, cy - 0.5 * r, x0, -6, 0.42 * r, 0.12 * r * (1 + v), 1.6, 1]);\n      else {\n        const f = (u - tb) / (1 - tb), sy = cy - r - 2 - (6 + 14 * v) * sqrt(f);\n        C.push([x0, sy, 0.32 * r, 1, 1]);\n        K.push([x0, -6, x0, -6 + (cy - 12 + 6) * max(0, 1 - 3 * f), 0.15 * r, 0.12 * r, 1, 1]);\n      }\n      continue;\n    }\n    const tau = (e.te - e.Tf) / slowOf(v);\n    // The drop sinks into the surface instead of vanishing at the touch: in a\n    // gel it takes 0.75 s and a thick neck joins it to the pool.\n    const ts = 0.15 + 0.6 * v;\n    if (tau \u003c ts) C.push([x0, Y0 - r + 2.2 * r * (tau / ts), r * (1 - 0.3 * (tau / ts)), 1.4 + 3 * v, 1]);\n    // Ripples: a packet from the impact and a smaller one when the jet falls,\n    // running out along the surface at 9 LEDs a second, 4 in a gel, about\n    // nine LEDs from crest to crest.\n    for (const [t0, a0] of [[0, 0.9 * (1 - 0.6 * v)], [TJ0 + TJ * 0.8, 0.45 * (1 - 0.7 * v)]]) {\n      const tt = tau - t0;\n      if (tt \u003c= 0) continue;\n      const c = 9 - 5 * v, A = (a0 * r * exp(-tt / 1.8)) / 3.6;\n      for (let x = 0; x \u003c W; x++) {\n        const s = abs(x + 0.5 - x0) - c * tt - 2, en = exp(-(s * s) / 60);\n        if (en > 0.01) rip[x] += A * en * sin(s * 0.7);\n      }\n    }\n    // The cavity: an air pocket pushed down under the surface.\n    if (tau \u003c TC) {\n      const Rc = r * (1.2 + 1.3 * (1 - exp(-tau / 0.18))) * (1 - 0.3 * v), Dc = r * 2.5 * (1 - 0.55 * v) * sin((PI * tau) / TC);\n      if (Dc > 0.3) S.cav.push([x0, Rc, Dc]);\n    }\n    // The crown: two thin walls leaning out, a translucent sheet between\n    // them, and fingers round the rim whose beads fly off at 0.42.\n    const hc = r * 3.1 * max(0, 1 - v / 0.7), R = r * (1.4 + 1.5 * (1 - exp(-min(tau, TCR) / 0.25)));\n    if (hc > 0.2 && tau \u003c TCR) {\n      const Hc = hc * Math.pow(sin((PI * tau) / TCR), 0.6), fl = 0.35 * Hc;\n      if (Hc > 0.5) {\n        for (let s = -1; s \u003c= 1; s += 2) K.push([x0 + s * R, Y0 + 1, x0 + s * (R + fl), Y0 - Hc, 0.75, 0.5, 1.2]);\n        S.crowns.push([x0, R, fl, Hc]);\n        if (tau \u003c 0.42 && v \u003c 0.5) {\n          const g = sm(tau / 0.3) * (1 - v / 0.5);\n          for (const [ph, lk] of e.fing) {\n            const cs = cos(ph), bx = x0 + (R + fl) * cs, lf = lk * 0.55 * hc * g, tx = bx + 0.35 * lf * cs, ty = Y0 - Hc - lf;\n            K.push([bx, Y0 - Hc + 0.5, tx, ty, 0.5, 0.3, 0.9]);\n            C.push([tx, ty, 0.26 * r, 0.9]);\n          }\n        }\n      }\n    }\n    if (tau >= 0.42 && v \u003c 0.5) {\n      // The beads thrown from the fingers fly out and up, then slow and drop back.\n      const t = tau - 0.42, Hp = hc * Math.pow(sin((PI * 0.42) / TCR), 0.6), Rp = r * (1.4 + 1.5 * (1 - exp(-0.42 / 0.25))) + 0.35 * Hp;\n      for (const [ph, lk, vy, vx] of e.fing) {\n        const cs = cos(ph), lf = lk * 0.55 * hc * (1 - v / 0.5);\n        const y = Y0 - Hp - lf - vy * t + 16 * t * t, x = x0 + (Rp + 0.35 * lf) * cs + vx * cs * t;\n        if (y \u003c Y0 + 2) C.push([x, y, 0.26 * r * (1 - v / 0.5), 0.9]);\n      }\n    }\n    // The jet: when the cavity snaps shut a column climbs out of the middle;\n    // in water its tip pinches off into a bead that flies on and falls back.\n    if (tau > TJ0) {\n      const s = (tau - TJ0) / TJ, hj = min(48, r * 8.5) * (1 - 0.8 * v), rb = 0.85 * r * (1 + 0.8 * v), pinch = v \u003c 0.55;\n      if (s \u003c 1) {\n        const Hj = hj * sin(PI * s);\n        const top = Y0 - Hj;\n        K.push([x0, Y0 + 3, x0, top, rb, (0.5 + 0.5 * v) * r, 2.5 + 2.5 * v]);\n        if (!pinch || s \u003c TPINCH) C.push([x0, top - 0.3 * r, (0.7 + 0.3 * v) * r, 1.3 + 2 * v]);\n      }\n      if (pinch && s >= TPINCH) {\n        const t = (s - TPINCH) * TJ, Hp = hj * sin(PI * TPINCH), y = Y0 - Hp - 0.9 * r - 7 * t + 18 * t * t;\n        if (y \u003c Y0 + 2) C.push([x0, y, 0.68 * r, 1.3]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  build(S);\n  const sdf = S.sdf, rip = S.rip, v = S.visc, deep = S.deep;\n  // The liquid's signed distance: negative inside. The pool's surface,\n  // minus the cavities, then every shape joined on smoothly. The falling drop\n  // is the concentrated essence, so where it is the colour is deep.\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i++) sdf[i] = Y0 + rip[x] - (y + 0.5);\n  deep.fill(0);\n  for (const [cx, R, D] of S.cav)\n    for (let y = Y0 - 2; y \u003c min(H, Y0 + D + 3); y++)\n      for (let x = max(0, floor(cx - R - 3)); x \u003c min(W, cx + R + 3); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - Y0) / D, da = (sqrt(dx * dx + dy * dy) - 1) * min(R, D), i = y * W + x;\n        sdf[i] = -smin(-sdf[i], da, 1.5);\n      }\n  for (const [ax, ay, bx, by, ra, rb, k, dp] of S.caps) {\n    const x0 = max(0, floor(min(ax, bx) - ra - k - 1)), x1 = min(W - 1, floor(max(ax, bx) + ra + k + 1));\n    const y0 = max(0, floor(min(ay, by) - ra - k - 1)), y1 = min(H - 1, floor(max(ay, by) + ra + k + 1));\n    const ex = bx - ax, ey = by - ay, ll = ex * ex + ey * ey || 1;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * ex + qy * ey) / ll, 0, 1);\n        const dd = Math.hypot(qx - ex * t, qy - ey * t) - (ra + (rb - ra) * t), i = y * W + x;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  for (const [cx, cy, r, k, dp] of S.circ) {\n    const x0 = max(0, floor(cx - r - k - 1)), x1 = min(W - 1, floor(cx + r + k + 1)), y0 = max(0, floor(cy - r - k - 1)), y1 = min(H - 1, floor(cy + r + k + 1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const i = y * W + x, dd = Math.hypot(x + 0.5 - cx, y + 0.5 - cy) - r;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  // Palette: backdrop, essence, and the deep colour the drop carries. A\n  // thicker essence holds more colour. From rose through orange and gold to\n  // lime, hue -0.12 to 0.35, any of these at half brightness reads brown,\n  // khaki or olive on the LEDs, so there everything is lifted towards cream\n  // and paled: the backdrop to 200 of 255 or more with a shallow vignette, the\n  // pool to about 215, and the deep colour goes brighter than the pool\n  // instead of darker.\n  const pal = S.pal, h = S.hue + 0.52, hf = h - floor(h), key = hf + 7 * v;\n  if (S.palKey !== key) {\n    const hw = hf > 0.5 ? hf - 1 : hf, wm = sm((hw + 0.12) / 0.06) * (1 - sm((hw - 0.28) / 0.07));\n    hsv(h + 0.02, 0.14 - 0.06 * wm, 1, pal, 0);\n    hsv(h + 0.06 * (1 - wm), 0.4 - 0.3 * wm, 1, pal, 10);\n    hsv(h, (0.38 + 0.22 * v) * (1 - 0.5 * wm), 1, pal, 3);\n    hsv(h + 0.015, 0.92 - 0.3 * wm, 1, pal, 6);\n    pal[9] = wm;\n    S.palKey = key;\n  }\n  const wm = pal[9], dv = 0.46 + 0.5 * wm, dye = S.dye, T = S.T;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const below = y + 0.5 - Y0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const d = sdf[i];\n      // The backdrop: a soft key light high in the middle, deepening towards\n      // the surface.\n      const gx = (x + 0.5 - 32) / 32, gy = (y - 14) / 46;\n      const gl = exp(-(gx * gx + gy * gy)), bv = min(1, 0.4 + 0.46 * gl + wm * (0.36 - 0.26 * gl));\n      let r = (pal[10] + (pal[0] - pal[10]) * gl) * bv, g = (pal[11] + (pal[1] - pal[11]) * gl) * bv, b = (pal[12] + (pal[2] - pal[12]) * gl) * bv;\n      // The crown's sheet: thin film between its walls, brighter at the two\n      // sides where the eye looks along it, and along the lip.\n      for (const [cx, R, fl, Hc] of S.crowns) {\n        const hgt = -below;\n        if (hgt \u003c -0.5 || hgt > Hc) continue;\n        const Rh = R + (fl * hgt) / Hc, u = abs(x + 0.5 - cx) / Rh;\n        if (u >= 1) continue;\n        const a = 0.16 + 0.3 * min(1, 1 / sqrt(1 - u * u) - 1) + 0.4 * exp(-((hgt - Hc + 0.6) ** 2));\n        r += (pal[3] * 0.92 - r) * a;\n        g += (pal[4] * 0.92 - g) * a;\n        b += (pal[5] * 0.92 - b) * a;\n      }\n      // The open surface, seen edge on: a gloss line along it, glinting white\n      // where a ripple tilts it towards the light. It is drawn across the\n      // boundary, so it does not flicker as the surface moves by a fraction.\n      const pd = Y0 + rip[x] - (y + 0.5), open = abs(d - pd) \u003c 0.02;\n      let spec = 0;\n      if (open && abs(pd) \u003c 2.5) {\n        const sl = ((x \u003c W - 1 ? rip[x + 1] : rip[x]) - (x > 0 ? rip[x - 1] : rip[x])) / 2, nd = (sl * LX - LY) / sqrt(1 + sl * sl);\n        spec = exp(-((pd + 0.3) ** 2) / 0.45) * (0.16 + 0.85 * Math.pow(max(0, nd), 12));\n      }\n      if (d \u003c 0.5) {\n        const cov = cl(0.5 - d, 0, 1);\n        // Inside the liquid: the essence, brighter just under the surface and\n        // deeper towards the bottom, slow shafts of light from the surface\n        // swaying through it, and the deep colour where the drop has gone.\n        const depth = cl(below / (H - Y0), 0, 1);\n        let lv = below \u003c 0 ? 0.88 + 0.09 * wm : 0.8 - 0.36 * depth + wm * (0.15 + 0.16 * depth);\n        if (below >= 0) {\n          const sx = x + 0.4 * below;\n          lv += 0.16 * (1 - depth) * (0.5 + 0.5 * sin(0.3 * sx - 0.7 * T + 1.3 * sin(0.11 * sx + 0.23 * T)));\n        }\n        lv = min(1, lv);\n        let lr = pal[3] * lv, lg = pal[4] * lv, lb = pal[5] * lv;\n        const da = max(deep[i] * 0.9, 1 - exp(-dye[i] * 0.9));\n        if (da > 0.003) {\n          lr += (pal[6] * dv - lr) * da;\n          lg += (pal[7] * dv - lg) * da;\n          lb += (pal[8] * dv - lb) * da;\n        }\n        let rim = 0, inner = 0;\n        if (!open) {\n          // Everything but the open surface: the normal from the distance\n          // field, a white highlight where it faces the light, a gloss on what\n          // faces up, a darker rim on the far side and light gathered inside\n          // the bottom of a bead.\n          const xm = x > 0 ? sdf[i - 1] : d, xp = x \u003c W - 1 ? sdf[i + 1] : d, ym = y > 0 ? sdf[i - W] : d, yp = y \u003c H - 1 ? sdf[i + W] : d;\n          let nx = xp - xm, ny = yp - ym;\n          const nl = Math.hypot(nx, ny) || 1;\n          nx /= nl;\n          ny /= nl;\n          const edge = cl(1 + d / 1.6, 0, 1), nd = nx * LX + ny * LY;\n          spec += edge * (0.9 * Math.pow(max(0, nd), 7) + 0.22 * max(0, -ny));\n          rim = edge * 0.35 * (1 - max(0, nd));\n          inner = cl((-d - 0.6) / 1.2, 0, 1) * cl((3 + d) / 1.5, 0, 1) * Math.pow(max(0, -nd), 2) * (below \u003c 1 ? 0.6 : 0);\n        }\n        lr = lr * (1 - rim) + inner * pal[3];\n        lg = lg * (1 - rim) + inner * pal[4];\n        lb = lb * (1 - rim) + inner * pal[5];\n        r += (lr - r) * cov;\n        g += (lg - g) * cov;\n        b += (lb - b) * cov;\n      }\n      r += spec;\n      g += spec;\n      b += spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker."},{"name":"Speed","min":0.2,"max":3,"about":"How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower."},{"name":"Viscosity","min":0,"max":1,"about":"Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume."},{"name":"Size","min":0,"max":1,"about":"The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs."}],"start":[0,2,0,0.06],"measures":{"motion":0.0508,"detail":0.0106,"edges":0.2549,"complexity":1.4637,"coverage":1,"colour":0.1457,"drift":0.0297},"knobResponse":[0.2403,0.0329,0.0375,0.0322]},{"slug":"euclid-pulse","title":"Euclid Pulse","family":"rhythm","round":1,"note":"유클리드 리듬 셋이 고리 셋에서 함께 돌아요. 바깥 두 고리의 박은 고리 밖 제 조각을 따라 빛으로 퍼져서 세운 패널의 위아래 끝까지 닿아요. 처음은 E(3,8) 이에요.","idea":"Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.","buttons":"K3 tap turns the outer rhythm one step later.","code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","layer":{"id":"layer-euclid-pulse","type":"code","name":"euclid-pulse","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three rings around the colour wheel together."},{"name":"Tempo","min":80,"max":180,"about":"Beats per minute; the hand goes round once every four beats."},{"name":"Pulses","min":3,"max":13,"about":"Hits on the outer ring; the middle ring takes about half as many."},{"name":"Steps","min":8,"max":16,"about":"Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams."}],"start":[0,80,3,8],"measures":{"motion":0.5845,"detail":0.0325,"edges":0.366,"complexity":0.4817,"coverage":0.4069,"colour":0.1498,"drift":0.1272},"knobResponse":[0.0702,0.0945,0.0699,0.0495]},{"slug":"excavation","title":"Excavation","family":"construction","round":25,"note":"도심 빌딩 사이의 깊은 터파기를 세로로 잘라 봐요. 굴착기가 바닥에 쌓은 흙을 갠트리의 클램셸이 100줄 위 덤프트럭까지 끌어올리고, 바닥이 한 단 깊어지면 흙막이 벽 사이에 강철 버팀보가 한 단 더 용접돼 걸려요. K1 을 돌리면 데크 틈으로 떨어지던 햇빛 기둥이 기울다가 밤의 나트륨등으로 바뀌고, 누르면 경고등 뒤에 발파가 일어나 바닥에 먼지가 차요.","idea":"A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.","buttons":"K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.","code":"// ===== Patternflow pattern =====\n// Title:   Excavation\n// Family:  construction\n// Idea:    A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the strutted basement excavations dug between city buildings\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1\n//\n// Knob 1: Hour. Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit.\n// Knob 2: Speed. At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too.\n// Knob 3: Depth. How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot.\n// Knob 4: Water. Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades.\n// Buttons: K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, acos, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street, the pit's inside, the opening's edge, the heap, the truck bed, the last stage.\nconst [GL, PL, PR, OR, HX, TT, FIN] = [20, 10, 53, 33, 21, 43, 11];\nconst strutY = (k) => 18 + 9 * k, floorY = (k) => 23 + 9 * k;\nconst KP = [29, 41], EXP = [37, 41, 44, 41];\n// Fill, clay, sand and gravel, weathered rock, rock, and the rows they end at.\nconst STRATA = [[96, 84, 78], [186, 106, 58], [206, 186, 142], [154, 138, 94], [118, 126, 146]];\nconst BOT = [27, 45, 64, 101, 999];\nconst layer = (x, y) => {\n  let i = 0;\n  while (i \u003c 4 && y >= BOT[i] + 5 * (vn(x * 0.09, i * 5.3) - 0.5)) i++;\n  return i;\n};\n// Noon, afternoon, dusk, night: sky top, horizon, sun, ambient, buildings.\nconst KEYS = [\n  [50, 116, 222, 168, 206, 240, 1, 0.95, 0.84, 0.92, 0.95, 1, 150, 158, 176],\n  [56, 100, 196, 232, 200, 160, 1, 0.82, 0.56, 0.8, 0.75, 0.72, 140, 128, 132],\n  [34, 32, 90, 236, 110, 70, 0.9, 0.5, 0.26, 0.5, 0.42, 0.5, 80, 66, 90],\n  [5, 7, 26, 22, 26, 60, 0, 0, 0, 0.13, 0.14, 0.22, 30, 32, 48],\n];\nconst WIN = [255, 196, 120], CAP = [176, 172, 166], DECK = [124, 118, 110], ROAD = [74, 74, 80], RAIN = [190, 210, 240], FLOOD = [1, 0.97, 0.9];\nconst WALLS = [[8, [120, 86, 54]], [9, [96, 104, 118]], [54, [96, 104, 118]], [55, [120, 86, 54]]];\nconst YEL = [250, 178, 26], GAN = [244, 204, 50], GRAB = [246, 142, 30], STEEL = [150, 160, 178], HOSE = [50, 80, 170];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F32(N * 3), lm: F32(N * 3), so: F32(N * 3), bw: F32(N * 3), sn: F32(N * 3), st: F32(N), shf: F32(N), sh: F32(200), rs: F32(H), srf: F32(W), dig: F32(W),\n    t: 0, rt: 0, nk: -1, cx: 42, du: [], pa: [], sl: -1, bl: -1, dust: 0.3, arc: 0, tx: 0, tv: 0, tph: 0, load: 2, tgo: 0,\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, L = layer(x, y), hh = hash(x, y), pd = hypot(x - 3, y - 24.5), px = (x - PL) % 7;\n    // The ground in section, each layer with its grain; a water main and ducts.\n    let k = 0.86 + 0.22 * hh, c = STRATA[L];\n    if (L === 0 && hh > 0.88) c = [150, 146, 140];\n    else if (L === 1) k = 0.9 + 0.14 * vn(x * 0.4, y * 0.7);\n    else if (L === 2 && hash(x >> 1, y >> 1) \u003c 0.2) c = [136, 132, 128];\n    else if (L === 3 && abs(vn(x * 0.3, y * 0.3) - 0.5) \u003c 0.04) k = 0.55;\n    else if (L === 4 && (x + y * 0.7 + 5 * vn(x * 0.2, y * 0.1)) % 13 \u003c 0.9) k = 0.6;\n    if (pd \u003c 2.2) (c = pd > 1.2 ? [96, 120, 150] : [26, 30, 36]), (k = 1);\n    if (x > 57 && x \u003c 63 && (y === 23 || y === 24) && x & 1) (c = [230, 120, 40]), (k = 1);\n    // The far wall: H-piles and lagging, shotcrete and rock bolts lower down.\n    const q = 0.8 + 0.35 * hash(floor((y - GL) / 3), floor((x - PL) / 7)), r = 0.84 + 0.22 * vn(x * 0.3, y * 0.3);\n    const b = y \u003c GL + 2 ? CAP : !px ? [86, 92, 104] : y > 65 ? (px === 3 && y % 8 === 4 ? [60, 60, 66] : [136 * r, 132 * r, 126 * r]) : (y - GL) % 3 > 1 ? [44, 34, 28] : [132 * q, 94 * q, 60 * q];\n    for (let j = 0; j \u003c 3; j++) (P.so[o + j] = c[j] * k), (P.bw[o + j] = b[j]);\n    P.st[i] = sm(0.42, 0.72, vn(x * 0.8, y * 0.06));\n  }\n  skyline(P);\n}\n\nfunction skyline(P) {\n  P.bd = [];\n  for (let x = 0, w, s; x \u003c W; x += w) (s = !x || x > 50), (w = !x ? 8 : s ? W - x : min(4 + floor(rnd() * 5), 56 - x)), P.bd.push([x, x + w - 1, s ? floor(rnd() * 3) : 6 + floor(rnd() * 8), rnd(), s]);\n}\n\n// A new lot, dug to stage k, with the grab already on its way down.\nfunction lot(P, k) {\n  Object.assign(P, { k, fy: floorY(k) + 2.5, hv: 64, wx: -1, mat: -1, ex: 41, ei: 1, sc: 1, ec: 0, full: 0, E: { p: [7, -9, 0] }, C: { p: [HX, 30, 1] } });\n  P.dig.fill(0);\n  go(P.E, 0, 0.7, [12, -3, 0]), go(P.C, 1, (P.fy - 43) / 46, [HX, P.fy - 13, 1]);\n}\n// A move eases a pose to b; the step functions chain moves.\nconst go = (m, ph, dur, b) => Object.assign(m, { ph, t: 0, dur: max(0.15, dur), a: m.p.slice(), b });\nfunction tick(m, d) {\n  const u = sm(0, 1, (m.t += d) / m.dur);\n  for (let i = 0; i \u003c 3; i++) m.p[i] = mix(m.a[i], m.b[i], u);\n  return u;\n}\nconst heapH = (P) => min(13, sqrt(1.1 * P.hv));\nconst heapTop = (P) => P.fy - heapH(P);\nconst matCol = (P) => STRATA[layer(30, P.fy + 2)];\nfunction puff(P, x, y, n, a, s = 1) {\n  for (let i = 0; i \u003c n; i++) P.du.push([x + (rnd() - 0.5) * 6 * s, y - rnd() * 2 * s, (1.5 + rnd() * 2) * s, a, (rnd() - 0.5) * 3 * s, -(2 + rnd() * 3) * s]);\n  P.dust = min(1, P.dust + 0.05 * n * a);\n}\n\n// Excavator: dig, lift, swing, drop it on the heap, swing back.\nfunction eStep(P, E) {\n  const ph = E.ph, up = [7, -9, 0];\n  if (ph === 0) go(E, 1, 1, [8, 1.5, 0]);\n  else if (ph === 1) {\n    const bx = round(P.ex + 8);\n    for (let i = -3; i \u003c= 3; i++) if (bx + i \u003c= PR) P.dig[bx + i] = max(P.dig[bx + i], 2.2 * cos(i * 0.39));\n    (P.fy += 32 / 44), (P.ec = 1), puff(P, bx, P.fy, 1, 0.3);\n    if (P.fy >= floorY(P.k + 1)) (P.fy = floorY(++P.k)), P.k \u003c FIN ? (P.wx = PL) : (P.mat = 0);\n    go(E, 2, 0.6, up);\n  } else if (ph === 2) go(E, 3, 1, [7, -9, PI]);\n  else if (ph === 3) go(E, 4, 0.6, [cl(P.ex - HX - 3, 6, 15), -heapH(P) * 0.7 - 3, PI]);\n  else if (ph === 4) (P.hv += 32), (P.ec = 0), puff(P, P.ex - E.p[0], heapTop(P), 2, 0.3), go(E, 5, 1.1, up);\n  else if (P.wx >= 0 || P.k >= FIN || P.hv > 150) go(E, 7, 0.5, up);\n  else if (ph === 5 && ++P.sc % 3 === 0) (P.ex0 = P.ex), (P.exT = EXP[(P.ei = (P.ei + 1) % 4)]), go(E, 6, 1.4, up);\n  else go(E, 0, 0.7, [12, -3, 0]);\n}\n\n// Grab: down open, close, haul up, over the truck, open.\nfunction cStep(P, C) {\n  const ph = C.ph, top = heapTop(P), up = [HX, 7, 0];\n  if (ph === 0) P.hv > 14 ? go(C, 1, 0.3 + (top - 12 - C.p[1]) / 46, [HX, top - 5, 1]) : go(C, 0, 0.3, up);\n  else if (ph === 1) go(C, 2, 0.7, [HX, top - 4, 0]);\n  else if (ph === 2) {\n    const g = min(P.hv, 60);\n    (P.hv -= g), (P.full = g > 4), puff(P, HX, top, 2, 0.3), go(C, 3, 0.4 + (C.p[1] - 7) / 36, up);\n  } else if (ph \u003c 5) P.tph === 0 && P.load \u003c 3 ? go(C, 5, 1.2, [TT, 7, 0]) : go(C, 4, 0.3, up);\n  else if (ph === 5) {\n    if (P.full) {\n      (P.load++), (P.full = 0), puff(P, TT, 11, 3, 0.5), P.load > 2 && (P.tgo = 0.6);\n      for (let i = 0; i \u003c 10; i++) P.pa.push([TT + (rnd() - 0.5) * 6, 13, 0, 4, 0.3, 2]);\n    }\n    go(C, 6, 0.6, [TT, 7, 1]);\n  } else go(C, ph === 6 ? 7 : 0, ph === 6 ? 1.1 : 0.2, up);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nk = round(cl(k[2], 8, 10)), h = (P.h = cl(k[0], 0, 1)), wt = (P.wt = cl(k[3], 0, 1));\n  if (nk !== P.nk) lot(P, (P.nk = nk));\n  (P.t += d), (P.rt += rd), (P.cx += 3.6 * d);\n  Object.assign(P, { dayF: 1 - sm(0.55, 0.92, h), sunI: (1 - sm(0.6, 0.85, h)) * (1 - 0.9 * sm(0.3, 0.85, wt)), slope: 0.12 + 0.95 * sm(0, 0.8, h), lampK: sm(0.45, 0.8, h) });\n  // K1 tap: the warning lamp, then the blast at the face.\n  if (input.btnPressed && input.btnPressed[0] && P.bl \u003c 0) P.bl = 0;\n  if (P.bl >= 0 && (P.bl += rd) >= 0.8 && !P.fired) {\n    P.fired = 1;\n    for (let i = 0; i \u003c 26; i++) P.pa.push([40 + (rnd() - 0.5) * 10, P.fy - 1, (rnd() - 0.5) * 30, -10 - rnd() * 22, 1.6, 2]);\n    for (let i = PL; i \u003c= PR; i++) P.dig[i] += 1.4 * exp(-(((i - 40) / 9) ** 2));\n    puff(P, 40, P.fy, 9, 1.2, 2), (P.fy += 0.8), (P.hv += 30), (P.dust = 1);\n  }\n  if (P.bl > 1.5) (P.bl = -1), (P.fired = 0);\n  const { E, C } = P, u = tick(E, d);\n  if (E.ph === 6) {\n    const nx = mix(P.ex0, P.exT, u);\n    (P.trk += nx - P.ex), (P.ex = nx);\n  }\n  if (u >= 1) eStep(P, E);\n  if (tick(C, d) >= 1) cStep(P, C);\n  if (P.full && C.ph === 3 && rnd() \u003c 4 * d) P.pa.push([C.p[0] + (rnd() - 0.5) * 5, C.p[1] + 7, 0, 2, 2, 2]);\n  // A truck leaves with three grabs and an empty one backs in.\n  if (P.tph === 0 && P.load > 2 && (P.tgo -= d) \u003c= 0) (P.tph = 1), (P.tv = 0);\n  if (P.tph === 1 && (P.tx += (P.tv = min(18, P.tv + 10 * d)) * d) > 30) (P.tph = 2), (P.load = 0);\n  if (P.tph === 2 && (P.tx -= (1.5 + 0.8 * P.tx) * d) \u003c= 0) (P.tx = 0), (P.tph = 0);\n  // The new strut is welded in from wall to wall.\n  if (P.wx >= 0) {\n    P.arc = rnd() \u003c 0.85 ? 0.5 + 0.5 * rnd() : 0;\n    if (rnd() \u003c 14 * d) P.pa.push([P.wx, strutY(P.k) + 2, (rnd() - 0.5) * 10, -2 - rnd() * 4, 0.6 + rnd() * 0.5, 0]);\n    if ((P.wx += 7 * d) > PR + 1) (P.wx = -1), (P.arc = 0);\n  }\n  // At the bottom: the blinding concrete, then on to the next lot.\n  if (P.k >= FIN && P.hv \u003c 15 && (P.mat += d / 6) > 1.4 && P.sl \u003c 0) (P.snap = 1), (P.sl = 0), lot(P, P.nk), skyline(P);\n  if (P.sl >= 0 && (P.sl += rd / 2.2) >= 1) P.sl = -1;\n  // Seepage drips below the water table.\n  const wtY = 78 - 34 * wt, e = exp(-0.25 * d);\n  if (P.fy > wtY + 6 && rnd() \u003c 6 * wt * d) P.pa.push([PL + 1 + rnd() * 42, wtY + rnd() * (P.fy - wtY - 5), 0, 0, 3, 1]);\n  for (let i = PL; i \u003c= PR; i++) P.dig[i] *= e;\n  P.dust = max(0.1, P.dust * e);\n  P.du = P.du.filter((p) => ((p[0] += p[4] * d), (p[1] += p[5] * d), (p[2] += 2.2 * d), (p[3] -= 0.22 * d) > 0));\n  P.pa = P.pa.filter((p) => ((p[3] += 40 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), (p[4] -= d) > 0 && p[1] \u003c (p[0] >= PL && p[0] \u003c= PR ? P.fy : H)));\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.3 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\nconst cloudA = (P, x, y) => cl((0.6 * vn((x + P.cx) * 0.07, y * 0.18) + 0.4 * vn((x + P.cx) * 0.19, y * 0.4 + 5) - 0.6 + 0.3 * P.wt) * 5, 0, 1);\n\nfunction lamp(x0, y0, r2, k, c) {\n  const R = Math.ceil(sqrt(r2 * 4.6)), gx = [];\n  for (let x = max(0, x0 - R); x \u003c= min(W - 1, x0 + R); x++) gx.push(x, k * exp(-((x - x0) ** 2) / r2));\n  for (let y = max(0, y0 - R); y \u003c= min(H - 1, y0 + R); y++)\n    for (let i = 0, g = exp(-((y - y0) ** 2) / r2); i \u003c gx.length; i += 2) for (let j = 0, o = (y * W + gx[i]) * 3; j \u003c 3; j++) LM[o + j] += c[j] * gx[i + 1] * g;\n}\n\n// Daylight with cloud shadows, the shaft of sun, the lamps.\nfunction light(P, K) {\n  const { sunI: sI, slope: s, rs, sh, shf, k: pk, lampK: nl } = P, ks = min(pk, FIN - 1);\n  for (let i = 0; i \u003c 200; i++) sh[i] = 1 - 0.85 * cloudA(P, i - 96, 7);\n  rs.fill(1);\n  for (let j = 1, y; j \u003c= ks; j++) (y = strutY(j)), (rs[y + 2] = rs[y + 4] = 0.6), (rs[y + 3] = 0.4);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, x0 = x - s * (y - GL), out = y \u003c GL + 2;\n    const a = out ? 1 : (0.62 - 0.003 * (y - GL)) * (x > OR ? 0.75 : 1);\n    const l = out ? 0.5 * sI * sh[x + 80] : sI > 0 && x0 > PL - 1.5 && x0 \u003c OR + 1.5 ? sI * sm(PL - 1.5, PL + 1, x0) * (1 - sm(OR - 1, OR + 1.5, x0)) * sh[floor(x0) + 80] * rs[y] * (1 - 0.0025 * (y - GL)) : 0;\n    shf[i] = out ? 0 : l;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[9 + c] * a + K[6 + c] * l * 0.95;\n  }\n  // Floods on the lowest strut; sodium lamps after dark.\n  lamp(17, strutY(ks) + 2, 260, 0.7, FLOOD), lamp(47, strutY(ks) + 2, 260, 0.7, FLOOD);\n  if (nl > 0) for (let j = 1; j \u003c= ks; j++) lamp(j & 1 ? 12 : 51, strutY(j) + 2, 60, 1.3 * nl, [1, 0.62, 0.24]);\n  if (P.arc > 0) lamp(round(P.wx), strutY(pk) + 1, 70, 1.4 * P.arc, [0.7, 0.85, 1]);\n  if (P.bl > 0.8) lamp(40, round(P.fy) - 3, 260, 1.8 * (1 - sm(0.8, 1.2, P.bl)), [1, 0.8, 0.5]);\n  const tx = P.C.p[0];\n  if (nl > 0)\n    for (let y = 8; y \u003c min(H, P.fy + 2); y++)\n      for (let hw = 1.5 + 0.16 * (y - 7), x = max(0, floor(tx - hw)); x \u003c= min(W - 1, tx + hw); x++)\n        for (let c = 0, e = ((0.9 * nl) / (1 + (y - 7) / 70)) * (1 - abs(x - tx) / hw); c \u003c 3; c++) LM[(y * W + x) * 3 + c] += e * (c > 1 ? 0.92 : 1);\n}\n\nfunction sky(P, K) {\n  const ov = 0.75 * sm(0.2, 1, P.wt), day = P.dayF, dk = 0.3 + 0.7 * day, cc = [0, 1, 2].map((c) => mix(mix(K[3 + c], 255, 0.55) * dk, 130 * dk, ov));\n  for (let i = 0; i \u003c GL * W; i++) {\n    const x = i & 63, y = i >> 6, u = y / (GL - 1), a = cloudA(P, x, y) * (0.9 - 0.4 * u);\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = mix(mix(mix(K[c], K[3 + c], u * u), 120 * (0.25 + 0.75 * day), ov), cc[c], a);\n  }\n  // The street's buildings, the two beside the pit tall.\n  for (const [x0, x1, top, v, side] of P.bd)\n    for (let y = top; y \u003c GL; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const win = (x - x0) % 3 === 1 && (y - top) % 3 === 1 && x \u003c x1, lit = hash(x * 7, y + floor(v * 99)) \u003c 0.45 && day \u003c 0.7;\n        for (let c = 0, b; c \u003c 3; c++) (b = K[12 + c] * (0.78 + 0.3 * v) * (x === x0 ? 0.8 : 1)), (b = win ? (lit ? WIN[c] * (1 - day) : b * 0.55 + 18 * c * day) : b), (F[(y * W + x) * 3 + c] = side ? b : mix(b, K[3 + c], 0.3));\n      }\n}\n\nfunction ground(P) {\n  const { so, bw, srf, wt, st, fy } = P, wtY = 78 - 34 * wt, sec = 0.42 + 0.52 * P.dayF, mc = matCol(P), hh = heapH(P), kc = STEEL.map((v) => v * 0.5 * sec);\n  for (let x = PL; x \u003c= PR; x++) srf[x] = fy + P.dig[x] + 0.6 * (hash(x, 7) - 0.5);\n  for (let i = GL * W; i \u003c N; i++) {\n    // Pavement, deck and caps; far wall and heap; the ground in section.\n    const x = i & 63, y = i >> 6, o = i * 3, pit = x >= PL && x \u003c= PR;\n    let A = so, a = o, L = 0, k = sec;\n    if (y \u003c GL + 2 && !(pit && x \u003c= OR)) (A = (x > 6 && x \u003c PL) || (x > PR && x \u003c 57) ? CAP : x > OR && x \u003c 56 ? DECK : ROAD), (a = 0), (L = 1), (k = y === GL ? 1.18 : A === DECK && (x + y) & 1 ? 0.86 : 1);\n    else if (pit && y \u003c srf[x]) (L = 1), y >= srf[x] - max(0, hh - abs(x - HX) * 1.1) ? ((A = mc), (a = 0), (k = 0.85 + 0.3 * hash(x, y))) : ((A = bw), (k = y > wtY ? 1 - 0.5 * wt * st[i] : 1));\n    else if (pit && y \u003c srf[x] + 1) (L = 1), (k = 1.15);\n    else if (!pit && y > wtY + 4) k *= 1 - 0.12 * wt;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = A[a + c] * k * (L ? LM[o + c] : 1);\n  }\n  // Walls and king posts down to their toes; the deck's beams.\n  for (let y = GL + 2; y \u003c 126; y++) {\n    for (const [x, c] of WALLS) for (let i = 0; i \u003c 3; i++) F[(y * W + x) * 3 + i] = c[i] * sec;\n    for (const x of KP) for (let i = 0; i \u003c 2; i++) y \u003c srf[x] ? sur(x + i, y, ...STEEL, 0.62 + 0.23 * i) : put(x + i, y, kc);\n  }\n  for (let x = OR + 1; x \u003c= PR; x++) sur(x, GL + 2, 70, 74, 84), sur(x, GL + 3, 90, 94, 104, x % 6 ? 0.7 : 1.2);\n  // Struts with wales and jacks.\n  for (let j = 1; j \u003c= min(P.k, FIN - 1); j++) {\n    const y = strutY(j), end = j === P.k && P.wx >= 0 ? P.wx : PR;\n    for (let x = PL; x \u003c= end; x++) sur(x, y, ...STEEL, x % 11 === 3 ? 0.8 : 1.25), sur(x, y + 1, ...STEEL, 0.75);\n    for (let i = -1; i \u003c= 2; i++) {\n      for (const x of [PL, PL + 1, PR - 1, PR]) sur(x, y + i, 80, 84, 96);\n      if (end >= PR) for (let x = 46; x \u003c= 48; x++) surc(x, y + i, YEL, i \u003c 0 || i > 1 ? 0.7 : 1);\n    }\n  }\n  // Blinding concrete on the last floor.\n  const me = PL + min(1, P.mat) * (P.ex - PL - 8);\n  if (P.mat > 0) for (let x = PL; x \u003c= me; x++) for (let j = 0, o; j \u003c 3; j++) (o = at(x, srf[x] - j)), put(x, srf[x] - j, [0, 1, 2].map((c) => 200 * max(0.55, LM[o + c]) * (j ? 0.9 : 1.1)));\n  if (P.mat > 0 && P.mat \u003c 1) line(30, GL + 1, me, fy - 3, [96, 96, 104]);\n  // The pump's pool, and its hose up the wall to the tank.\n  for (let x = 45; x \u003c= PR; x++)\n    for (let y = round(fy - 0.4 - 2.6 * wt), g; y \u003c srf[x]; y++) (g = 0.5 + 0.5 * sin(x * 1.3 + P.t * 5 + y * 2)), sur(x, y, 60 + 60 * g, 96 + 60 * g, 132 + 50 * g);\n  for (let j = 1; j \u003c= 2; j++) sur(51, fy - j, ...HOSE), sur(52, fy - j, ...HOSE);\n  for (let y = fy - 2; y > GL - 2; y--) surc(PR, y, HOSE);\n  for (let x = PR; x \u003c 60; x++) surc(x, GL - 2, HOSE);\n  for (let x = 59; x \u003c= 62; x++) for (let y = 16; y \u003c GL; y++) sur(x, y, 120, 140, 160, y === 16 ? 1.2 : 0.8);\n  if (wt > 0.03) for (let j = 0; j \u003c 2; j++) put(59 + j, GL - 2 + j, RAIN, min(1, wt * 6) * (0.5 + 0.5 * sin(P.t * 20 + j)));\n}\n\nfunction excavator(P) {\n  const ex = P.ex, gy = round(P.fy), [bu, bv, ph] = P.E.p, f = cos(ph), X = (u) => ex + u * f, hw = 4.5 * abs(f) + 3.2 * abs(sin(ph)), nl = P.lampK;\n  for (let i = -6; i \u003c= 6; i++) for (let j = 1; j \u003c= 3; j++) (abs(i) \u003c 6 || j === 2) && sur(ex + i, gy - j, ...(j !== 2 && (i + floor(P.trk)) & 1 ? [92, 92, 96] : [46, 46, 50]));\n  for (let i = -3; i \u003c= 3; i++) sur(ex + i, gy - 4, 52, 50, 48);\n  for (let j = 5; j \u003c= 7; j++) for (let x = round(ex - hw); x \u003c= round(ex + hw); x++) surc(x, gy - j, YEL, j === 5 ? 0.7 : (x - ex) * f \u003c -2.5 ? 0.82 : 1);\n  const ca = round(min(X(0.5), X(3.5))), cb = max(ca + 1, round(max(X(0.5), X(3.5))));\n  for (let j = 8; j \u003c= 11; j++) for (let x = ca; x \u003c= cb; x++) j === 11 || x === (f >= 0 ? ca : cb) ? surc(x, gy - j, YEL) : (sur(x, gy - j, 110, 150, 180, 0.9), add(x, gy - j, WIN, 0.5 * nl));\n  // Boom and arm reach the bucket by two-link IK.\n  const [pu, pv, L1, L2] = [3, -6, 9, 8.5];\n  let tu = bu - pu, tv = bv - pv;\n  const dd = hypot(tu, tv) || 1, dc = cl(dd, 2, L1 + L2 - 0.05);\n  (tu *= dc / dd), (tv *= dc / dd);\n  const t1 = atan2(tv, tu) - acos(cl((L1 * L1 + dc * dc - L2 * L2) / (2 * L1 * dc), -1, 1)), eu = pu + L1 * cos(t1), ev = pv + L1 * sin(t1), bx = X(pu + tu), by = gy + pv + tv;\n  line(X(pu), gy + pv, X(eu), gy + ev, YEL), line(X(pu), gy + pv + 1, X(eu), gy + ev + 1, YEL, 0.75);\n  line(X(4), gy - 5, X(pu + (eu - pu) * 0.55), gy + pv + (ev - pv) * 0.55 + 1, [150, 150, 156]);\n  line(X(eu), gy + ev, bx, by, YEL, 0.9);\n  for (let i = 0; i \u003c= 2; i++) sur(bx - i * f, by, 74, 74, 80), sur(bx - i * f, by + 1, 74, 74, 80, 0.8), P.ec && surc(bx - i * f, by - 1, matCol(P), 1.1);\n  add(X(4.5), gy - 9, FLOOD, 255 * nl);\n}\n\n// A worker in hi-vis, feet on row y; a headlamp after dusk.\nfunction man(P, x, y, arm) {\n  sur(x, y, 40, 48, 90), sur(x, y - 1, 255, 128, 20), sur(x, y - 2, 255, 255, 240), arm && sur(x + 1, y - 2 - (arm > 0.5), 255, 128, 20);\n  add(x, y - 2, FLOOD, 200 * P.lampK);\n}\n\nfunction grab(P) {\n  const [tx, by, op] = P.C.p, X = round(tx), Y = round(by), HW = [3, 3.4, 3.4, 3, 2];\n  for (let y = 7; y \u003c Y; y++) sur(X - 1, y, 200, 200, 210), sur(X + 1, y, 200, 200, 210);\n  for (let i = -1; i \u003c= 1; i++) surc(X + i, Y, GAN, 1.2), surc(X + i, Y + 1, GAN, 0.85);\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = -6, a; i \u003c= 6; i++) (a = abs(i)) >= op * (0.4 + 0.9 * j) - 0.01 && a \u003c= HW[j] + op * 0.9 * j && (j === 4 || (op \u003c 0.3 && !i) ? sur(X + i, Y + 2 + j, 96, 100, 110) : surc(X + i, Y + 2 + j, GRAB, j ? 1 : 1.2));\n  if (P.full && op \u003c 0.5) for (let i = -2; i \u003c= 2; i++) surc(X + i, Y + 2, matCol(P), 1.2);\n  for (let i = -3; i \u003c= 3; i++) sur(X + i, 5, 70, 74, 84), surc(X + i, 6, GAN, abs(i) \u003c 2 ? 0.6 : 1);\n}\n\nfunction gantry(P) {\n  for (let y = 2; y \u003c GL; y++) for (const x of [4, 58]) surc(x, y, GAN), (y + (x >> 2)) % 3 && surc(x + 1, y, GAN, 0.7);\n  for (let x = 3; x \u003c= 60; x++) surc(x, 2, GAN, 1.1), surc(x, 4, GAN), (x + 1) % 3 || surc(x, 3, GAN, 0.8);\n  put(32, 1, P.rt % 1.4 \u003c 0.7 ? [255, 40, 30] : [90, 16, 14]);\n  // The railing, and the signalman at the edge.\n  for (let x = 8; x \u003c= OR; x++) sur(x, 17, ...((x >> 1) & 1 ? [230, 60, 50] : [236, 236, 236])), x % 6 === 2 && (sur(x, 18, 200, 200, 200), sur(x, 19, 200, 200, 200));\n  man(P, 35, GL - 1, P.C.ph \u003c 3 ? (P.rt * 2) % 1 : 0);\n}\n\nfunction truck(P) {\n  const o = round(P.tx), mc = matCol(P), hL = [0, 1.6, 2.7, 3.7][min(3, P.load)];\n  if (o > 30) return;\n  for (let x = 37; x \u003c= 50; x++)\n    for (let y = 9; y \u003c= 16; y++)\n      y > 12 ? sur(x + o, y, 196, 56, 44, y === 13 ? 1.25 : (x - 37) % 4 ? 1 : 0.75) : y > 12 - hL * (1 - ((x - 43.5) / 7) ** 2) && surc(x + o, y, mc, 0.85 + 0.3 * hash(x, y));\n  for (let x = 51; x \u003c= 56; x++) for (let y = 10; y \u003c= 16; y++) (y > 10 || x > 51) && (y \u003c 14 && y > 10 && x > 52 ? sur(x + o, y, 60, 90, 120) : sur(x + o, y, 50, 96, 200));\n  for (let x = 37; x \u003c= 56; x++) sur(x + o, 17, 50, 50, 54);\n  for (const x of [39, 43, 53]) sur(x + o, 18, 30, 30, 34), sur(x + o + 1, 18, 30, 30, 34), sur(x + o, 19, 120, 120, 126), sur(x + o + 1, 19, 30, 30, 34);\n  add(57 + o, 15, FLOOD, 255 * P.lampK), add(36 + o, 16, [255, 30, 20], P.lampK);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  if (P.snap) P.sn.set(F), (P.snap = 0);\n  const hh = P.h * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0)), mc = matCol(P), fy = round(P.fy);\n  light(P, K), sky(P, K), gantry(P), ground(P), excavator(P);\n  man(P, 12, round(P.srf[12] - max(0, heapH(P) - 9.9)) - 1, 0);\n  if (P.wx >= 0) man(P, round(P.wx) - 1, fy - 1, 1);\n  truck(P), grab(P);\n  // Sparks, drips, spoil and dust.\n  for (const [x, y, , , l, k] of P.pa) k ? (k > 1 ? surc(x, y, mc, 1.3) : put(x, y, [170, 210, 255], 0.8)) : put(x, y, [255, 200, 90], min(1, l * 2));\n  for (const [px, py, r, a] of P.du) {\n    const o0 = at(cl(px, 0, 63), cl(py, 0, 127)), R = Math.ceil(r), pc = mc.map((v, c) => mix(v, 210, 0.5) * min(1.3, 0.3 + LM[o0 + c]));\n    for (let y = round(py) - R; y \u003c= py + R; y++)\n      for (let x = round(px) - R, q; x \u003c= px + R; x++) (q = 1 - ((x - px) ** 2 + (y - py) ** 2) / (r * r)) > 0 && put(x, y, pc, min(1, a * q * q * 0.9));\n  }\n  // Haze in the shaft, thicker with dust.\n  for (let i = 0, hz = 8 + 30 * P.dust; i \u003c N; i++) if (P.shf[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += K[6 + c] * P.shf[i] * hz;\n  if (P.arc > 0) add(round(P.wx), strutY(P.k) + 1, FLOOD, 500);\n  if (P.bl >= 0 && P.bl \u003c 0.8 && P.bl % 0.3 \u003c 0.15) put(34, GL - 4, [255, 170, 30]), add(34, GL - 3, [255, 140, 20], 0.6);\n  // Rain past halfway, not under the deck.\n  for (let i = 0, rain = sm(0.45, 1, P.wt); i \u003c 160 * rain; i++) {\n    const y = ((hash(i, 2) * 150 + P.t * 70) % 150) - 10, x = (hash(i, 1) * 80 + y * 0.25) % 64;\n    if (x \u003c= OR + 0.5 || x >= PR + 1 || y \u003c= GL + 1) for (let j = 0; j \u003c 3; j++) put(x - j * 0.25, y - j, RAIN, 0.6 * (1 - j / 3) * (0.4 + 0.6 * P.dayF));\n  }\n  const off = P.sl >= 0 ? round(64 * sm(0, 1, P.sl)) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const xs = x + off, B = xs \u003c W && off ? P.sn : F, o = (y * W + (xs % W)) * 3;\n      display.setPixel(x, y, min(255, B[o]) | 0, min(255, B[o + 1]) | 0, min(255, B[o + 2]) | 0);\n    }\n}\n","layer":{"id":"layer-excavation","type":"code","name":"excavation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Excavation\n// Family:  construction\n// Idea:    A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the strutted basement excavations dug between city buildings\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1\n//\n// Knob 1: Hour. Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit.\n// Knob 2: Speed. At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too.\n// Knob 3: Depth. How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot.\n// Knob 4: Water. Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades.\n// Buttons: K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, acos, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street, the pit's inside, the opening's edge, the heap, the truck bed, the last stage.\nconst [GL, PL, PR, OR, HX, TT, FIN] = [20, 10, 53, 33, 21, 43, 11];\nconst strutY = (k) => 18 + 9 * k, floorY = (k) => 23 + 9 * k;\nconst KP = [29, 41], EXP = [37, 41, 44, 41];\n// Fill, clay, sand and gravel, weathered rock, rock, and the rows they end at.\nconst STRATA = [[96, 84, 78], [186, 106, 58], [206, 186, 142], [154, 138, 94], [118, 126, 146]];\nconst BOT = [27, 45, 64, 101, 999];\nconst layer = (x, y) => {\n  let i = 0;\n  while (i \u003c 4 && y >= BOT[i] + 5 * (vn(x * 0.09, i * 5.3) - 0.5)) i++;\n  return i;\n};\n// Noon, afternoon, dusk, night: sky top, horizon, sun, ambient, buildings.\nconst KEYS = [\n  [50, 116, 222, 168, 206, 240, 1, 0.95, 0.84, 0.92, 0.95, 1, 150, 158, 176],\n  [56, 100, 196, 232, 200, 160, 1, 0.82, 0.56, 0.8, 0.75, 0.72, 140, 128, 132],\n  [34, 32, 90, 236, 110, 70, 0.9, 0.5, 0.26, 0.5, 0.42, 0.5, 80, 66, 90],\n  [5, 7, 26, 22, 26, 60, 0, 0, 0, 0.13, 0.14, 0.22, 30, 32, 48],\n];\nconst WIN = [255, 196, 120], CAP = [176, 172, 166], DECK = [124, 118, 110], ROAD = [74, 74, 80], RAIN = [190, 210, 240], FLOOD = [1, 0.97, 0.9];\nconst WALLS = [[8, [120, 86, 54]], [9, [96, 104, 118]], [54, [96, 104, 118]], [55, [120, 86, 54]]];\nconst YEL = [250, 178, 26], GAN = [244, 204, 50], GRAB = [246, 142, 30], STEEL = [150, 160, 178], HOSE = [50, 80, 170];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F32(N * 3), lm: F32(N * 3), so: F32(N * 3), bw: F32(N * 3), sn: F32(N * 3), st: F32(N), shf: F32(N), sh: F32(200), rs: F32(H), srf: F32(W), dig: F32(W),\n    t: 0, rt: 0, nk: -1, cx: 42, du: [], pa: [], sl: -1, bl: -1, dust: 0.3, arc: 0, tx: 0, tv: 0, tph: 0, load: 2, tgo: 0,\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, L = layer(x, y), hh = hash(x, y), pd = hypot(x - 3, y - 24.5), px = (x - PL) % 7;\n    // The ground in section, each layer with its grain; a water main and ducts.\n    let k = 0.86 + 0.22 * hh, c = STRATA[L];\n    if (L === 0 && hh > 0.88) c = [150, 146, 140];\n    else if (L === 1) k = 0.9 + 0.14 * vn(x * 0.4, y * 0.7);\n    else if (L === 2 && hash(x >> 1, y >> 1) \u003c 0.2) c = [136, 132, 128];\n    else if (L === 3 && abs(vn(x * 0.3, y * 0.3) - 0.5) \u003c 0.04) k = 0.55;\n    else if (L === 4 && (x + y * 0.7 + 5 * vn(x * 0.2, y * 0.1)) % 13 \u003c 0.9) k = 0.6;\n    if (pd \u003c 2.2) (c = pd > 1.2 ? [96, 120, 150] : [26, 30, 36]), (k = 1);\n    if (x > 57 && x \u003c 63 && (y === 23 || y === 24) && x & 1) (c = [230, 120, 40]), (k = 1);\n    // The far wall: H-piles and lagging, shotcrete and rock bolts lower down.\n    const q = 0.8 + 0.35 * hash(floor((y - GL) / 3), floor((x - PL) / 7)), r = 0.84 + 0.22 * vn(x * 0.3, y * 0.3);\n    const b = y \u003c GL + 2 ? CAP : !px ? [86, 92, 104] : y > 65 ? (px === 3 && y % 8 === 4 ? [60, 60, 66] : [136 * r, 132 * r, 126 * r]) : (y - GL) % 3 > 1 ? [44, 34, 28] : [132 * q, 94 * q, 60 * q];\n    for (let j = 0; j \u003c 3; j++) (P.so[o + j] = c[j] * k), (P.bw[o + j] = b[j]);\n    P.st[i] = sm(0.42, 0.72, vn(x * 0.8, y * 0.06));\n  }\n  skyline(P);\n}\n\nfunction skyline(P) {\n  P.bd = [];\n  for (let x = 0, w, s; x \u003c W; x += w) (s = !x || x > 50), (w = !x ? 8 : s ? W - x : min(4 + floor(rnd() * 5), 56 - x)), P.bd.push([x, x + w - 1, s ? floor(rnd() * 3) : 6 + floor(rnd() * 8), rnd(), s]);\n}\n\n// A new lot, dug to stage k, with the grab already on its way down.\nfunction lot(P, k) {\n  Object.assign(P, { k, fy: floorY(k) + 2.5, hv: 64, wx: -1, mat: -1, ex: 41, ei: 1, sc: 1, ec: 0, full: 0, E: { p: [7, -9, 0] }, C: { p: [HX, 30, 1] } });\n  P.dig.fill(0);\n  go(P.E, 0, 0.7, [12, -3, 0]), go(P.C, 1, (P.fy - 43) / 46, [HX, P.fy - 13, 1]);\n}\n// A move eases a pose to b; the step functions chain moves.\nconst go = (m, ph, dur, b) => Object.assign(m, { ph, t: 0, dur: max(0.15, dur), a: m.p.slice(), b });\nfunction tick(m, d) {\n  const u = sm(0, 1, (m.t += d) / m.dur);\n  for (let i = 0; i \u003c 3; i++) m.p[i] = mix(m.a[i], m.b[i], u);\n  return u;\n}\nconst heapH = (P) => min(13, sqrt(1.1 * P.hv));\nconst heapTop = (P) => P.fy - heapH(P);\nconst matCol = (P) => STRATA[layer(30, P.fy + 2)];\nfunction puff(P, x, y, n, a, s = 1) {\n  for (let i = 0; i \u003c n; i++) P.du.push([x + (rnd() - 0.5) * 6 * s, y - rnd() * 2 * s, (1.5 + rnd() * 2) * s, a, (rnd() - 0.5) * 3 * s, -(2 + rnd() * 3) * s]);\n  P.dust = min(1, P.dust + 0.05 * n * a);\n}\n\n// Excavator: dig, lift, swing, drop it on the heap, swing back.\nfunction eStep(P, E) {\n  const ph = E.ph, up = [7, -9, 0];\n  if (ph === 0) go(E, 1, 1, [8, 1.5, 0]);\n  else if (ph === 1) {\n    const bx = round(P.ex + 8);\n    for (let i = -3; i \u003c= 3; i++) if (bx + i \u003c= PR) P.dig[bx + i] = max(P.dig[bx + i], 2.2 * cos(i * 0.39));\n    (P.fy += 32 / 44), (P.ec = 1), puff(P, bx, P.fy, 1, 0.3);\n    if (P.fy >= floorY(P.k + 1)) (P.fy = floorY(++P.k)), P.k \u003c FIN ? (P.wx = PL) : (P.mat = 0);\n    go(E, 2, 0.6, up);\n  } else if (ph === 2) go(E, 3, 1, [7, -9, PI]);\n  else if (ph === 3) go(E, 4, 0.6, [cl(P.ex - HX - 3, 6, 15), -heapH(P) * 0.7 - 3, PI]);\n  else if (ph === 4) (P.hv += 32), (P.ec = 0), puff(P, P.ex - E.p[0], heapTop(P), 2, 0.3), go(E, 5, 1.1, up);\n  else if (P.wx >= 0 || P.k >= FIN || P.hv > 150) go(E, 7, 0.5, up);\n  else if (ph === 5 && ++P.sc % 3 === 0) (P.ex0 = P.ex), (P.exT = EXP[(P.ei = (P.ei + 1) % 4)]), go(E, 6, 1.4, up);\n  else go(E, 0, 0.7, [12, -3, 0]);\n}\n\n// Grab: down open, close, haul up, over the truck, open.\nfunction cStep(P, C) {\n  const ph = C.ph, top = heapTop(P), up = [HX, 7, 0];\n  if (ph === 0) P.hv > 14 ? go(C, 1, 0.3 + (top - 12 - C.p[1]) / 46, [HX, top - 5, 1]) : go(C, 0, 0.3, up);\n  else if (ph === 1) go(C, 2, 0.7, [HX, top - 4, 0]);\n  else if (ph === 2) {\n    const g = min(P.hv, 60);\n    (P.hv -= g), (P.full = g > 4), puff(P, HX, top, 2, 0.3), go(C, 3, 0.4 + (C.p[1] - 7) / 36, up);\n  } else if (ph \u003c 5) P.tph === 0 && P.load \u003c 3 ? go(C, 5, 1.2, [TT, 7, 0]) : go(C, 4, 0.3, up);\n  else if (ph === 5) {\n    if (P.full) {\n      (P.load++), (P.full = 0), puff(P, TT, 11, 3, 0.5), P.load > 2 && (P.tgo = 0.6);\n      for (let i = 0; i \u003c 10; i++) P.pa.push([TT + (rnd() - 0.5) * 6, 13, 0, 4, 0.3, 2]);\n    }\n    go(C, 6, 0.6, [TT, 7, 1]);\n  } else go(C, ph === 6 ? 7 : 0, ph === 6 ? 1.1 : 0.2, up);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nk = round(cl(k[2], 8, 10)), h = (P.h = cl(k[0], 0, 1)), wt = (P.wt = cl(k[3], 0, 1));\n  if (nk !== P.nk) lot(P, (P.nk = nk));\n  (P.t += d), (P.rt += rd), (P.cx += 3.6 * d);\n  Object.assign(P, { dayF: 1 - sm(0.55, 0.92, h), sunI: (1 - sm(0.6, 0.85, h)) * (1 - 0.9 * sm(0.3, 0.85, wt)), slope: 0.12 + 0.95 * sm(0, 0.8, h), lampK: sm(0.45, 0.8, h) });\n  // K1 tap: the warning lamp, then the blast at the face.\n  if (input.btnPressed && input.btnPressed[0] && P.bl \u003c 0) P.bl = 0;\n  if (P.bl >= 0 && (P.bl += rd) >= 0.8 && !P.fired) {\n    P.fired = 1;\n    for (let i = 0; i \u003c 26; i++) P.pa.push([40 + (rnd() - 0.5) * 10, P.fy - 1, (rnd() - 0.5) * 30, -10 - rnd() * 22, 1.6, 2]);\n    for (let i = PL; i \u003c= PR; i++) P.dig[i] += 1.4 * exp(-(((i - 40) / 9) ** 2));\n    puff(P, 40, P.fy, 9, 1.2, 2), (P.fy += 0.8), (P.hv += 30), (P.dust = 1);\n  }\n  if (P.bl > 1.5) (P.bl = -1), (P.fired = 0);\n  const { E, C } = P, u = tick(E, d);\n  if (E.ph === 6) {\n    const nx = mix(P.ex0, P.exT, u);\n    (P.trk += nx - P.ex), (P.ex = nx);\n  }\n  if (u >= 1) eStep(P, E);\n  if (tick(C, d) >= 1) cStep(P, C);\n  if (P.full && C.ph === 3 && rnd() \u003c 4 * d) P.pa.push([C.p[0] + (rnd() - 0.5) * 5, C.p[1] + 7, 0, 2, 2, 2]);\n  // A truck leaves with three grabs and an empty one backs in.\n  if (P.tph === 0 && P.load > 2 && (P.tgo -= d) \u003c= 0) (P.tph = 1), (P.tv = 0);\n  if (P.tph === 1 && (P.tx += (P.tv = min(18, P.tv + 10 * d)) * d) > 30) (P.tph = 2), (P.load = 0);\n  if (P.tph === 2 && (P.tx -= (1.5 + 0.8 * P.tx) * d) \u003c= 0) (P.tx = 0), (P.tph = 0);\n  // The new strut is welded in from wall to wall.\n  if (P.wx >= 0) {\n    P.arc = rnd() \u003c 0.85 ? 0.5 + 0.5 * rnd() : 0;\n    if (rnd() \u003c 14 * d) P.pa.push([P.wx, strutY(P.k) + 2, (rnd() - 0.5) * 10, -2 - rnd() * 4, 0.6 + rnd() * 0.5, 0]);\n    if ((P.wx += 7 * d) > PR + 1) (P.wx = -1), (P.arc = 0);\n  }\n  // At the bottom: the blinding concrete, then on to the next lot.\n  if (P.k >= FIN && P.hv \u003c 15 && (P.mat += d / 6) > 1.4 && P.sl \u003c 0) (P.snap = 1), (P.sl = 0), lot(P, P.nk), skyline(P);\n  if (P.sl >= 0 && (P.sl += rd / 2.2) >= 1) P.sl = -1;\n  // Seepage drips below the water table.\n  const wtY = 78 - 34 * wt, e = exp(-0.25 * d);\n  if (P.fy > wtY + 6 && rnd() \u003c 6 * wt * d) P.pa.push([PL + 1 + rnd() * 42, wtY + rnd() * (P.fy - wtY - 5), 0, 0, 3, 1]);\n  for (let i = PL; i \u003c= PR; i++) P.dig[i] *= e;\n  P.dust = max(0.1, P.dust * e);\n  P.du = P.du.filter((p) => ((p[0] += p[4] * d), (p[1] += p[5] * d), (p[2] += 2.2 * d), (p[3] -= 0.22 * d) > 0));\n  P.pa = P.pa.filter((p) => ((p[3] += 40 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), (p[4] -= d) > 0 && p[1] \u003c (p[0] >= PL && p[0] \u003c= PR ? P.fy : H)));\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.3 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\nconst cloudA = (P, x, y) => cl((0.6 * vn((x + P.cx) * 0.07, y * 0.18) + 0.4 * vn((x + P.cx) * 0.19, y * 0.4 + 5) - 0.6 + 0.3 * P.wt) * 5, 0, 1);\n\nfunction lamp(x0, y0, r2, k, c) {\n  const R = Math.ceil(sqrt(r2 * 4.6)), gx = [];\n  for (let x = max(0, x0 - R); x \u003c= min(W - 1, x0 + R); x++) gx.push(x, k * exp(-((x - x0) ** 2) / r2));\n  for (let y = max(0, y0 - R); y \u003c= min(H - 1, y0 + R); y++)\n    for (let i = 0, g = exp(-((y - y0) ** 2) / r2); i \u003c gx.length; i += 2) for (let j = 0, o = (y * W + gx[i]) * 3; j \u003c 3; j++) LM[o + j] += c[j] * gx[i + 1] * g;\n}\n\n// Daylight with cloud shadows, the shaft of sun, the lamps.\nfunction light(P, K) {\n  const { sunI: sI, slope: s, rs, sh, shf, k: pk, lampK: nl } = P, ks = min(pk, FIN - 1);\n  for (let i = 0; i \u003c 200; i++) sh[i] = 1 - 0.85 * cloudA(P, i - 96, 7);\n  rs.fill(1);\n  for (let j = 1, y; j \u003c= ks; j++) (y = strutY(j)), (rs[y + 2] = rs[y + 4] = 0.6), (rs[y + 3] = 0.4);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, x0 = x - s * (y - GL), out = y \u003c GL + 2;\n    const a = out ? 1 : (0.62 - 0.003 * (y - GL)) * (x > OR ? 0.75 : 1);\n    const l = out ? 0.5 * sI * sh[x + 80] : sI > 0 && x0 > PL - 1.5 && x0 \u003c OR + 1.5 ? sI * sm(PL - 1.5, PL + 1, x0) * (1 - sm(OR - 1, OR + 1.5, x0)) * sh[floor(x0) + 80] * rs[y] * (1 - 0.0025 * (y - GL)) : 0;\n    shf[i] = out ? 0 : l;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[9 + c] * a + K[6 + c] * l * 0.95;\n  }\n  // Floods on the lowest strut; sodium lamps after dark.\n  lamp(17, strutY(ks) + 2, 260, 0.7, FLOOD), lamp(47, strutY(ks) + 2, 260, 0.7, FLOOD);\n  if (nl > 0) for (let j = 1; j \u003c= ks; j++) lamp(j & 1 ? 12 : 51, strutY(j) + 2, 60, 1.3 * nl, [1, 0.62, 0.24]);\n  if (P.arc > 0) lamp(round(P.wx), strutY(pk) + 1, 70, 1.4 * P.arc, [0.7, 0.85, 1]);\n  if (P.bl > 0.8) lamp(40, round(P.fy) - 3, 260, 1.8 * (1 - sm(0.8, 1.2, P.bl)), [1, 0.8, 0.5]);\n  const tx = P.C.p[0];\n  if (nl > 0)\n    for (let y = 8; y \u003c min(H, P.fy + 2); y++)\n      for (let hw = 1.5 + 0.16 * (y - 7), x = max(0, floor(tx - hw)); x \u003c= min(W - 1, tx + hw); x++)\n        for (let c = 0, e = ((0.9 * nl) / (1 + (y - 7) / 70)) * (1 - abs(x - tx) / hw); c \u003c 3; c++) LM[(y * W + x) * 3 + c] += e * (c > 1 ? 0.92 : 1);\n}\n\nfunction sky(P, K) {\n  const ov = 0.75 * sm(0.2, 1, P.wt), day = P.dayF, dk = 0.3 + 0.7 * day, cc = [0, 1, 2].map((c) => mix(mix(K[3 + c], 255, 0.55) * dk, 130 * dk, ov));\n  for (let i = 0; i \u003c GL * W; i++) {\n    const x = i & 63, y = i >> 6, u = y / (GL - 1), a = cloudA(P, x, y) * (0.9 - 0.4 * u);\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = mix(mix(mix(K[c], K[3 + c], u * u), 120 * (0.25 + 0.75 * day), ov), cc[c], a);\n  }\n  // The street's buildings, the two beside the pit tall.\n  for (const [x0, x1, top, v, side] of P.bd)\n    for (let y = top; y \u003c GL; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const win = (x - x0) % 3 === 1 && (y - top) % 3 === 1 && x \u003c x1, lit = hash(x * 7, y + floor(v * 99)) \u003c 0.45 && day \u003c 0.7;\n        for (let c = 0, b; c \u003c 3; c++) (b = K[12 + c] * (0.78 + 0.3 * v) * (x === x0 ? 0.8 : 1)), (b = win ? (lit ? WIN[c] * (1 - day) : b * 0.55 + 18 * c * day) : b), (F[(y * W + x) * 3 + c] = side ? b : mix(b, K[3 + c], 0.3));\n      }\n}\n\nfunction ground(P) {\n  const { so, bw, srf, wt, st, fy } = P, wtY = 78 - 34 * wt, sec = 0.42 + 0.52 * P.dayF, mc = matCol(P), hh = heapH(P), kc = STEEL.map((v) => v * 0.5 * sec);\n  for (let x = PL; x \u003c= PR; x++) srf[x] = fy + P.dig[x] + 0.6 * (hash(x, 7) - 0.5);\n  for (let i = GL * W; i \u003c N; i++) {\n    // Pavement, deck and caps; far wall and heap; the ground in section.\n    const x = i & 63, y = i >> 6, o = i * 3, pit = x >= PL && x \u003c= PR;\n    let A = so, a = o, L = 0, k = sec;\n    if (y \u003c GL + 2 && !(pit && x \u003c= OR)) (A = (x > 6 && x \u003c PL) || (x > PR && x \u003c 57) ? CAP : x > OR && x \u003c 56 ? DECK : ROAD), (a = 0), (L = 1), (k = y === GL ? 1.18 : A === DECK && (x + y) & 1 ? 0.86 : 1);\n    else if (pit && y \u003c srf[x]) (L = 1), y >= srf[x] - max(0, hh - abs(x - HX) * 1.1) ? ((A = mc), (a = 0), (k = 0.85 + 0.3 * hash(x, y))) : ((A = bw), (k = y > wtY ? 1 - 0.5 * wt * st[i] : 1));\n    else if (pit && y \u003c srf[x] + 1) (L = 1), (k = 1.15);\n    else if (!pit && y > wtY + 4) k *= 1 - 0.12 * wt;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = A[a + c] * k * (L ? LM[o + c] : 1);\n  }\n  // Walls and king posts down to their toes; the deck's beams.\n  for (let y = GL + 2; y \u003c 126; y++) {\n    for (const [x, c] of WALLS) for (let i = 0; i \u003c 3; i++) F[(y * W + x) * 3 + i] = c[i] * sec;\n    for (const x of KP) for (let i = 0; i \u003c 2; i++) y \u003c srf[x] ? sur(x + i, y, ...STEEL, 0.62 + 0.23 * i) : put(x + i, y, kc);\n  }\n  for (let x = OR + 1; x \u003c= PR; x++) sur(x, GL + 2, 70, 74, 84), sur(x, GL + 3, 90, 94, 104, x % 6 ? 0.7 : 1.2);\n  // Struts with wales and jacks.\n  for (let j = 1; j \u003c= min(P.k, FIN - 1); j++) {\n    const y = strutY(j), end = j === P.k && P.wx >= 0 ? P.wx : PR;\n    for (let x = PL; x \u003c= end; x++) sur(x, y, ...STEEL, x % 11 === 3 ? 0.8 : 1.25), sur(x, y + 1, ...STEEL, 0.75);\n    for (let i = -1; i \u003c= 2; i++) {\n      for (const x of [PL, PL + 1, PR - 1, PR]) sur(x, y + i, 80, 84, 96);\n      if (end >= PR) for (let x = 46; x \u003c= 48; x++) surc(x, y + i, YEL, i \u003c 0 || i > 1 ? 0.7 : 1);\n    }\n  }\n  // Blinding concrete on the last floor.\n  const me = PL + min(1, P.mat) * (P.ex - PL - 8);\n  if (P.mat > 0) for (let x = PL; x \u003c= me; x++) for (let j = 0, o; j \u003c 3; j++) (o = at(x, srf[x] - j)), put(x, srf[x] - j, [0, 1, 2].map((c) => 200 * max(0.55, LM[o + c]) * (j ? 0.9 : 1.1)));\n  if (P.mat > 0 && P.mat \u003c 1) line(30, GL + 1, me, fy - 3, [96, 96, 104]);\n  // The pump's pool, and its hose up the wall to the tank.\n  for (let x = 45; x \u003c= PR; x++)\n    for (let y = round(fy - 0.4 - 2.6 * wt), g; y \u003c srf[x]; y++) (g = 0.5 + 0.5 * sin(x * 1.3 + P.t * 5 + y * 2)), sur(x, y, 60 + 60 * g, 96 + 60 * g, 132 + 50 * g);\n  for (let j = 1; j \u003c= 2; j++) sur(51, fy - j, ...HOSE), sur(52, fy - j, ...HOSE);\n  for (let y = fy - 2; y > GL - 2; y--) surc(PR, y, HOSE);\n  for (let x = PR; x \u003c 60; x++) surc(x, GL - 2, HOSE);\n  for (let x = 59; x \u003c= 62; x++) for (let y = 16; y \u003c GL; y++) sur(x, y, 120, 140, 160, y === 16 ? 1.2 : 0.8);\n  if (wt > 0.03) for (let j = 0; j \u003c 2; j++) put(59 + j, GL - 2 + j, RAIN, min(1, wt * 6) * (0.5 + 0.5 * sin(P.t * 20 + j)));\n}\n\nfunction excavator(P) {\n  const ex = P.ex, gy = round(P.fy), [bu, bv, ph] = P.E.p, f = cos(ph), X = (u) => ex + u * f, hw = 4.5 * abs(f) + 3.2 * abs(sin(ph)), nl = P.lampK;\n  for (let i = -6; i \u003c= 6; i++) for (let j = 1; j \u003c= 3; j++) (abs(i) \u003c 6 || j === 2) && sur(ex + i, gy - j, ...(j !== 2 && (i + floor(P.trk)) & 1 ? [92, 92, 96] : [46, 46, 50]));\n  for (let i = -3; i \u003c= 3; i++) sur(ex + i, gy - 4, 52, 50, 48);\n  for (let j = 5; j \u003c= 7; j++) for (let x = round(ex - hw); x \u003c= round(ex + hw); x++) surc(x, gy - j, YEL, j === 5 ? 0.7 : (x - ex) * f \u003c -2.5 ? 0.82 : 1);\n  const ca = round(min(X(0.5), X(3.5))), cb = max(ca + 1, round(max(X(0.5), X(3.5))));\n  for (let j = 8; j \u003c= 11; j++) for (let x = ca; x \u003c= cb; x++) j === 11 || x === (f >= 0 ? ca : cb) ? surc(x, gy - j, YEL) : (sur(x, gy - j, 110, 150, 180, 0.9), add(x, gy - j, WIN, 0.5 * nl));\n  // Boom and arm reach the bucket by two-link IK.\n  const [pu, pv, L1, L2] = [3, -6, 9, 8.5];\n  let tu = bu - pu, tv = bv - pv;\n  const dd = hypot(tu, tv) || 1, dc = cl(dd, 2, L1 + L2 - 0.05);\n  (tu *= dc / dd), (tv *= dc / dd);\n  const t1 = atan2(tv, tu) - acos(cl((L1 * L1 + dc * dc - L2 * L2) / (2 * L1 * dc), -1, 1)), eu = pu + L1 * cos(t1), ev = pv + L1 * sin(t1), bx = X(pu + tu), by = gy + pv + tv;\n  line(X(pu), gy + pv, X(eu), gy + ev, YEL), line(X(pu), gy + pv + 1, X(eu), gy + ev + 1, YEL, 0.75);\n  line(X(4), gy - 5, X(pu + (eu - pu) * 0.55), gy + pv + (ev - pv) * 0.55 + 1, [150, 150, 156]);\n  line(X(eu), gy + ev, bx, by, YEL, 0.9);\n  for (let i = 0; i \u003c= 2; i++) sur(bx - i * f, by, 74, 74, 80), sur(bx - i * f, by + 1, 74, 74, 80, 0.8), P.ec && surc(bx - i * f, by - 1, matCol(P), 1.1);\n  add(X(4.5), gy - 9, FLOOD, 255 * nl);\n}\n\n// A worker in hi-vis, feet on row y; a headlamp after dusk.\nfunction man(P, x, y, arm) {\n  sur(x, y, 40, 48, 90), sur(x, y - 1, 255, 128, 20), sur(x, y - 2, 255, 255, 240), arm && sur(x + 1, y - 2 - (arm > 0.5), 255, 128, 20);\n  add(x, y - 2, FLOOD, 200 * P.lampK);\n}\n\nfunction grab(P) {\n  const [tx, by, op] = P.C.p, X = round(tx), Y = round(by), HW = [3, 3.4, 3.4, 3, 2];\n  for (let y = 7; y \u003c Y; y++) sur(X - 1, y, 200, 200, 210), sur(X + 1, y, 200, 200, 210);\n  for (let i = -1; i \u003c= 1; i++) surc(X + i, Y, GAN, 1.2), surc(X + i, Y + 1, GAN, 0.85);\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = -6, a; i \u003c= 6; i++) (a = abs(i)) >= op * (0.4 + 0.9 * j) - 0.01 && a \u003c= HW[j] + op * 0.9 * j && (j === 4 || (op \u003c 0.3 && !i) ? sur(X + i, Y + 2 + j, 96, 100, 110) : surc(X + i, Y + 2 + j, GRAB, j ? 1 : 1.2));\n  if (P.full && op \u003c 0.5) for (let i = -2; i \u003c= 2; i++) surc(X + i, Y + 2, matCol(P), 1.2);\n  for (let i = -3; i \u003c= 3; i++) sur(X + i, 5, 70, 74, 84), surc(X + i, 6, GAN, abs(i) \u003c 2 ? 0.6 : 1);\n}\n\nfunction gantry(P) {\n  for (let y = 2; y \u003c GL; y++) for (const x of [4, 58]) surc(x, y, GAN), (y + (x >> 2)) % 3 && surc(x + 1, y, GAN, 0.7);\n  for (let x = 3; x \u003c= 60; x++) surc(x, 2, GAN, 1.1), surc(x, 4, GAN), (x + 1) % 3 || surc(x, 3, GAN, 0.8);\n  put(32, 1, P.rt % 1.4 \u003c 0.7 ? [255, 40, 30] : [90, 16, 14]);\n  // The railing, and the signalman at the edge.\n  for (let x = 8; x \u003c= OR; x++) sur(x, 17, ...((x >> 1) & 1 ? [230, 60, 50] : [236, 236, 236])), x % 6 === 2 && (sur(x, 18, 200, 200, 200), sur(x, 19, 200, 200, 200));\n  man(P, 35, GL - 1, P.C.ph \u003c 3 ? (P.rt * 2) % 1 : 0);\n}\n\nfunction truck(P) {\n  const o = round(P.tx), mc = matCol(P), hL = [0, 1.6, 2.7, 3.7][min(3, P.load)];\n  if (o > 30) return;\n  for (let x = 37; x \u003c= 50; x++)\n    for (let y = 9; y \u003c= 16; y++)\n      y > 12 ? sur(x + o, y, 196, 56, 44, y === 13 ? 1.25 : (x - 37) % 4 ? 1 : 0.75) : y > 12 - hL * (1 - ((x - 43.5) / 7) ** 2) && surc(x + o, y, mc, 0.85 + 0.3 * hash(x, y));\n  for (let x = 51; x \u003c= 56; x++) for (let y = 10; y \u003c= 16; y++) (y > 10 || x > 51) && (y \u003c 14 && y > 10 && x > 52 ? sur(x + o, y, 60, 90, 120) : sur(x + o, y, 50, 96, 200));\n  for (let x = 37; x \u003c= 56; x++) sur(x + o, 17, 50, 50, 54);\n  for (const x of [39, 43, 53]) sur(x + o, 18, 30, 30, 34), sur(x + o + 1, 18, 30, 30, 34), sur(x + o, 19, 120, 120, 126), sur(x + o + 1, 19, 30, 30, 34);\n  add(57 + o, 15, FLOOD, 255 * P.lampK), add(36 + o, 16, [255, 30, 20], P.lampK);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  if (P.snap) P.sn.set(F), (P.snap = 0);\n  const hh = P.h * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0)), mc = matCol(P), fy = round(P.fy);\n  light(P, K), sky(P, K), gantry(P), ground(P), excavator(P);\n  man(P, 12, round(P.srf[12] - max(0, heapH(P) - 9.9)) - 1, 0);\n  if (P.wx >= 0) man(P, round(P.wx) - 1, fy - 1, 1);\n  truck(P), grab(P);\n  // Sparks, drips, spoil and dust.\n  for (const [x, y, , , l, k] of P.pa) k ? (k > 1 ? surc(x, y, mc, 1.3) : put(x, y, [170, 210, 255], 0.8)) : put(x, y, [255, 200, 90], min(1, l * 2));\n  for (const [px, py, r, a] of P.du) {\n    const o0 = at(cl(px, 0, 63), cl(py, 0, 127)), R = Math.ceil(r), pc = mc.map((v, c) => mix(v, 210, 0.5) * min(1.3, 0.3 + LM[o0 + c]));\n    for (let y = round(py) - R; y \u003c= py + R; y++)\n      for (let x = round(px) - R, q; x \u003c= px + R; x++) (q = 1 - ((x - px) ** 2 + (y - py) ** 2) / (r * r)) > 0 && put(x, y, pc, min(1, a * q * q * 0.9));\n  }\n  // Haze in the shaft, thicker with dust.\n  for (let i = 0, hz = 8 + 30 * P.dust; i \u003c N; i++) if (P.shf[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += K[6 + c] * P.shf[i] * hz;\n  if (P.arc > 0) add(round(P.wx), strutY(P.k) + 1, FLOOD, 500);\n  if (P.bl >= 0 && P.bl \u003c 0.8 && P.bl % 0.3 \u003c 0.15) put(34, GL - 4, [255, 170, 30]), add(34, GL - 3, [255, 140, 20], 0.6);\n  // Rain past halfway, not under the deck.\n  for (let i = 0, rain = sm(0.45, 1, P.wt); i \u003c 160 * rain; i++) {\n    const y = ((hash(i, 2) * 150 + P.t * 70) % 150) - 10, x = (hash(i, 1) * 80 + y * 0.25) % 64;\n    if (x \u003c= OR + 0.5 || x >= PR + 1 || y \u003c= GL + 1) for (let j = 0; j \u003c 3; j++) put(x - j * 0.25, y - j, RAIN, 0.6 * (1 - j / 3) * (0.4 + 0.6 * P.dayF));\n  }\n  const off = P.sl >= 0 ? round(64 * sm(0, 1, P.sl)) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const xs = x + off, B = xs \u003c W && off ? P.sn : F, o = (y * W + (xs % W)) * 3;\n      display.setPixel(x, y, min(255, B[o]) | 0, min(255, B[o + 1]) | 0, min(255, B[o + 2]) | 0);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too."},{"name":"Depth","min":8,"max":10,"about":"How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot."},{"name":"Water","min":0,"max":1,"about":"Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades."}],"start":[0,2,8,0.06],"measures":{"motion":0.0546,"detail":0.0796,"edges":0.3258,"complexity":1.9604,"coverage":0.986,"colour":0.2478,"drift":0.0543},"knobResponse":[0.2505,0.0522,0.0454,0.0762]},{"slug":"ferris-wheel","title":"Ferris Wheel","family":"fair","round":25,"note":"밤 호숫가에서 지름 59 LED 의 관람차가 돌고, 곤돌라는 바퀴가 돌아도 늘 똑바로 매달려 있어요. 살과 테두리의 불빛이 쇼 여섯 가지를 6.5초씩 이어 가고, 호수가 바퀴와 불빛을 일렁이며 비춰요. K4 Wind 를 올리면 구름이 몰려오고 물그림자가 긴 빛줄기로 부서지며, 버튼은 다음 쇼로 넘겨요.","idea":"A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.","buttons":"K1 tap starts the next show at once.","code":"// ===== Patternflow pattern =====\n// Title:   Ferris Wheel\n// Family:  fair\n// Idea:    A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the light shows of the observation wheels on lake and river fronts\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1\n//\n// Knob 1: Lights. Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet.\n// Knob 2: Speed. How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower.\n// Knob 3: Spokes. How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one.\n// Knob 4: Wind. Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light.\n// Buttons: K1 tap starts the next show at once.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst fr = (v) => v - floor(v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The wheel: hub, outer rim with the lights, inner rim, and the truss between.\nconst CX = 32, CY = 38.5, R = 29.5, RI = 26.3, HUB = 3.6;\n// The first row of the lake, which is the line the scene mirrors in, the\n// promenade the legs stand on, and how much the reflection is squeezed.\nconst SEA = 87, FOOT = 84, SQ = 0.72;\n// Light bins along each spoke and round the rim; the shows paint these.\nconst NB = 24, NR = 120;\nconst SHOWS = 6, DUR = 6.5, FADE = 0.35;\nconst CLOUD = [12, 14, 28], LAKE = [3, 7, 22], TINT = [0.85, 0.92, 1];\n// A sine table for the ripples, which take five sines an LED.\nconst SN = F32(1024).map((_, i) => sin((i * TAU) / 1024));\nconst sn = (v) => SN[(v * 162.97) & 1023];\nconst STEEL = [26, 28, 42], LEG = [22, 24, 38], WARM = [255, 214, 150], WHITE = [255, 250, 240];\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, wt: 0, co: 0, rot: 0.2, st: 0, sh: 0, prev: -1, ps: 0, ns: 12, ng: 12, wind: 0.06, h: 0.53,\n    f: F32(N * 3), cn: F32(256 * 76), sky: F32(SEA * W * 3), gm: F32(SEA * W), fg: F32(N * 3), fm: F32(N), ga: F32(N * 3),\n    sp: F32(32 * NB * 3), rm: F32(NR * 3), hb: [0, 0, 0], sp2: F32(32 * NB * 3), rm2: F32(NR * 3), hb2: [0, 0, 0],\n    stars: [], people: [], cab: [],\n  });\n  // Night sky, paler towards the horizon, and the hills behind the far shore\n  // with a few houses lit.\n  for (let y = 0; y \u003c SEA; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y / SEA, o = (y * W + x) * 3, hy = 77 + 2.4 * sin(x * 0.11 + 0.7) + 1.4 * sin(x * 0.29 + 2);\n      let c = [3 + 14 * v * v, 5 + 18 * v * v, 22 + 46 * v * v];\n      if (y > hy) c = [7, 8, 18];\n      if (y > hy + 1 && hash(x, y) \u003c 0.025) c = [120, 96, 60];\n      P.sky.set(c, o);\n      // Where the wheel's light lands on the haze: round the wheel and low over the shore.\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2);\n      P.gm[y * W + x] = 0.75 * exp(-(max(0, r - 18) ** 2) / 420) + 0.45 * exp(-(SEA - y) / 22);\n    }\n  // Cloud: three octaves of value noise 256 wide, so it can scroll round.\n  const seed = floor(rnd() * 999);\n  const vn = (x, y, cx, cy, s) => {\n    const nx = 256 / cx, gx = x / cx, gy = y / cy, ix = floor(gx), iy = floor(gy), u = sm(0, 1, gx - ix), v = sm(0, 1, gy - iy);\n    const h = (i, j) => hash(((ix + i) % nx) + s, iy + j);\n    return mix(mix(h(0, 0), h(1, 0), u), mix(h(0, 1), h(1, 1), u), v);\n  };\n  for (let y = 0; y \u003c 76; y++) for (let x = 0; x \u003c 256; x++) P.cn[y * 256 + x] = 0.55 * vn(x, y, 32, 9, seed) + 0.3 * vn(x, y, 16, 5, seed + 7) + 0.15 * vn(x, y, 8, 3, seed + 13);\n  for (let i = 0; i \u003c 36; i++) P.stars.push([floor(rnd() * W), floor(rnd() * 46), 40 + rnd() * 70, rnd() * TAU, 0.6 + rnd()]);\n  // The promenade, the boarding platform with its stairs, two lamps and the\n  // ticket booth, kept as one layer with its own coverage.\n  const fg = (x, y, c, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    P.fg.set(c, (y * W + x) * 3);\n    P.fm[y * W + x] = a;\n  };\n  const glow = (gx, gy, c, k, s) => {\n    for (let y = max(0, gy - 12); y \u003c min(SEA, gy + 12); y++)\n      for (let x = max(0, gx - 12); x \u003c min(W, gx + 12); x++) {\n        const g = k * exp(-((x - gx) ** 2 + (y - gy) ** 2) / s);\n        for (let n = 0; n \u003c 3; n++) P.ga[(y * W + x) * 3 + n] += c[n] * g;\n      }\n  };\n  for (let x = 0; x \u003c W; x++) {\n    fg(x, 84, [34, 28, 32]);\n    fg(x, 85, [28, 24, 30]);\n    fg(x, 86, [64, 60, 70]);\n  }\n  for (let x = 22; x \u003c= 42; x++) fg(x, 77, [78, 74, 92]), fg(x, 78, [30, 30, 42]);\n  for (const x of [24, 32, 40]) for (let y = 79; y \u003c 84; y++) fg(x, y, [22, 22, 32]);\n  for (let i = 0; i \u003c 6; i++) fg(21 - i, 78 + i, [60, 56, 70]), fg(21 - i, 79 + i, [26, 24, 34]);\n  for (const lx of [5, 46]) {\n    for (let y = 76; y \u003c 84; y++) fg(lx, y, [36, 36, 48]);\n    fg(lx, 75, [255, 230, 180]);\n    fg(lx - 1, 75, [120, 100, 70]);\n    fg(lx + 1, 75, [120, 100, 70]);\n    glow(lx, 76, WARM, 0.32, 14);\n  }\n  for (let x = 53; x \u003c= 62; x++) {\n    const st = ((x - 53) >> 1) & 1 ? [226, 218, 206] : [200, 36, 56];\n    fg(x, 72, st);\n    if (!(x & 1)) fg(x, 73, st);\n    for (let y = 74; y \u003c 84; y++) fg(x, y, x === 53 || x === 62 ? [40, 22, 30] : [70, 34, 46]);\n  }\n  for (let y = 75; y \u003c= 78; y++) for (let x = 55; x \u003c= 60; x++) fg(x, y, [255, 196, 120].map((v) => v * (0.85 - 0.08 * (y - 75))));\n  for (const [x, y] of [[58, 76], [57, 78], [58, 78], [59, 78]]) fg(x, y, [40, 24, 24]);\n  fg(58, 77, [56, 32, 30]);\n  for (let x = 54; x \u003c= 61; x++) fg(x, 79, [160, 116, 70]), fg(x, 81, (x & 1) ? [240, 200, 90] : [110, 70, 40]);\n  glow(58, 80, [255, 180, 100], 0.28, 18);\n  // People on the promenade, a queue at the foot of the stairs and two who walk.\n  for (const [x, w] of [[9, 0], [14, 0], [17, 0], [49, 0], [27, 2.2], [40, -1.6]])\n    P.people.push({ x: x + 0.5, w, c: hsv(rnd(), 0.5, 0.25 + 0.15 * rnd()), sk: rnd() \u003c 0.5 });\n  for (let i = 0; i \u003c 32; i++) P.cab.push([0.55 + 0.45 * rnd(), rnd() \u003c 0.4]);\n}\n\nfunction next(P) {\n  P.prev = P.sh;\n  P.ps = P.st;\n  P.sh = (P.sh + 1) % SHOWS;\n  P.st = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  const v = cl(k[1], 0.2, 3) / 2;\n  let ns = round(cl(k[2], 12, 32));\n  if (ns > 18) ns += ns & 1;\n  Object.assign(P, { h: fr(0.53 + cl(k[0], 0, 1)), ns, ng: ns > 18 ? ns / 2 : ns, wind: cl(k[3], 0, 1) });\n  P.t += dt;\n  P.wt += dt * v * (0.7 + 1.5 * P.wind);\n  P.co += dt * v * (1 + 10 * P.wind);\n  P.rot += (dt * v * TAU) / 40;\n  P.st += dt * v;\n  if ((input.btnPressed && input.btnPressed[0]) || P.st >= DUR) next(P);\n  for (const q of P.people)\n    if (q.w) {\n      q.x += q.w * dt * v;\n      if (q.x > W + 3) q.x = -3;\n      if (q.x \u003c -3) q.x = W + 3;\n    }\n}\n\n// One show at its time s paints the spoke bins, the rim bins and the hub.\nfunction paint(P, sh, s, SP, RM, HB) {\n  const ns = P.ns, [A, B, C] = P.pal, rot = P.rot;\n  const spk = (k, b, c, I) => {\n    const o = (k * NB + b) * 3;\n    (SP[o] = c[0] * I), (SP[o + 1] = c[1] * I), (SP[o + 2] = c[2] * I);\n  };\n  const rim = (j, c, I) => ((RM[j * 3] = c[0] * I), (RM[j * 3 + 1] = c[1] * I), (RM[j * 3 + 2] = c[2] * I));\n  const lerp = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n  const hub = (c, I) => ((HB[0] = c[0] * I), (HB[1] = c[1] * I), (HB[2] = c[2] * I));\n  const uB = (b) => (b + 0.5) / NB;\n  if (sh === 0) {\n    // Light runs out along the spokes, brightest where a beam sweeps round\n    // against the turn; marquee bulbs chase round the rim and three white\n    // comets run through them.\n    const sw = fr(-s * 0.3), mq = floor(s * 9);\n    for (let k = 0; k \u003c ns; k++) {\n      const dl = fr(k / ns - sw), bm = exp(-dl / 0.22), wt = 0.5 * exp(-dl * ns * 1.5);\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), ds = exp(-(((fr(u * 2 - s * 1.1) - 0.5) / 0.17) ** 2));\n        spk(k, b, lerp(lerp(C, A, u), WHITE, wt), 0.14 + 0.25 * bm + 0.61 * ds * (0.45 + 0.55 * bm));\n      }\n    }\n    for (let j = 0; j \u003c NR; j++) {\n      let I = 0;\n      for (let m = 0; m \u003c 3; m++) I = max(I, exp(-fr(fr(s * 0.42 + m / 3) - j / NR) / 0.04));\n      rim(j, lerp(B, WHITE, I), max(I, (floor(j / 2) + mq) % 3 ? 0.22 : 0.9));\n    }\n    hub(A, 0.8);\n  } else if (sh === 1) {\n    // A colour wipe across the whole wheel, lit full, with a white front.\n    const X = CX + 35 * cos((PI * s) / 3.25), f0 = 0.88 * sm(0, 0.5, s);\n    const col = (x) => lerp(lerp(A, B, sm(X - 2.5, X + 2.5, x)), WHITE, 0.7 * exp(-(((x - X) / 2.2) ** 2)));\n    for (let k = 0; k \u003c ns; k++) {\n      const c = cos(rot + (TAU * k) / ns);\n      for (let b = 0; b \u003c NB; b++) spk(k, b, col(CX + (HUB + uB(b) * (R - HUB)) * c), f0);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, col(CX + R * cos(rot + (TAU * (j + 0.5)) / NR)), f0);\n    hub(col(CX), f0);\n  } else if (sh === 2) {\n    // A spiral arm winds out from the hub and round the wheel.\n    for (let k = 0; k \u003c ns; k++)\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), v = fr(u * 0.9 + k / ns - s * 0.45);\n        spk(k, b, lerp(B, C, u), 0.07 + 0.93 * exp(-(((v - 0.5) / 0.2) ** 2)));\n      }\n    for (let j = 0; j \u003c NR; j++) rim(j, A, fr((j / NR) * ns * 0.5 - s * 0.9) \u003c 0.5 ? 0.95 : 0.12);\n    hub(B, 0.9);\n  } else if (sh === 3) {\n    // Spoke after spoke lights up round the wheel and holds before it blinks out.\n    const n = (s / 3.6) * ns, blink = s > 4.8 && fr((s - 4.8) * 2.6) > 0.5;\n    for (let k = 0; k \u003c ns; k++) {\n      const I = blink ? 0.04 : k \u003c floor(n) ? 0.9 : k === floor(n) ? fr(n) : 0.05;\n      for (let b = 0; b \u003c NB; b++) spk(k, b, k === floor(n) ? WHITE : k & 1 ? B : A, I);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, C, blink ? 0.04 : j / NR \u003c n / ns ? 0.95 : 0.08);\n    hub(WHITE, blink ? 0.1 : 0.85);\n  } else if (sh === 4) {\n    // Rings run out from the hub, each a colour, and flash the rim on arriving.\n    SP.fill(0, 0, ns * NB * 3);\n    let Ir = 0.08, Ih = 0.2, cr = A;\n    for (let m = 0; m \u003c 3; m++) {\n      // Rings are born in the order A, C, B, so each takes the next colour.\n      const f = fr(s * 0.4 + m / 3), c = P.pal[m], e = exp(-(((1 - f) / 0.06) ** 2));\n      for (let k = 0; k \u003c ns; k++)\n        for (let b = 0; b \u003c NB; b++) {\n          const I = exp(-(((uB(b) - f) / 0.07) ** 2)), o = (k * NB + b) * 3;\n          for (let n = 0; n \u003c 3; n++) SP[o + n] += c[n] * I;\n        }\n      if (e > Ir) (Ir = e), (cr = c);\n      Ih = max(Ih, exp(-((f / 0.08) ** 2)));\n    }\n    for (let k = 0; k \u003c ns * NB * 3; k++) SP[k] += 14;\n    for (let j = 0; j \u003c NR; j++) rim(j, cr, max(0.1, Ir));\n    hub(WHITE, Ih);\n  } else {\n    // Every spoke its own colour, the rainbow turning round, with sparkles.\n    const tw = floor(s * 7);\n    for (let k = 0; k \u003c ns; k++) {\n      const c = hsv(P.h + fr(k / ns + s * 0.12), 0.85, 1);\n      for (let b = 0; b \u003c NB; b++) hash(k * NB + b, tw) \u003c 0.07 ? spk(k, b, WHITE, 1) : spk(k, b, c, 0.72);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, hsv(P.h + fr(j / NR - s * 0.25), 0.8, 1), 0.75);\n    hub(WHITE, 0.8);\n  }\n}\n\nlet F;\nconst add = (x, y, c, k) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] += c[n] * k;\n};\nconst put = (x, y, c, k = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// A leg of the A-frame from the hub to the promenade, a dark girder.\nfunction leg(ax, ay, bx, by, hw, edge) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy;\n  for (let y = floor(ay); y \u003c= by; y++)\n    for (let x = max(0, floor(min(ax, bx) - 2)); x \u003c= min(W - 1, max(ax, bx) + 2); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, d = sqrt(ex * ex + ey * ey);\n      const w = cl(hw + 0.5 - d, 0, 1);\n      if (w \u003c= 0) continue;\n      const o = (y * W + x) * 3, lit = 0.5 + 0.5 * cl((d - hw + 0.6) * 1.5, 0, 1);\n      const fl = 0.32 * exp(-(FOOT - y) / 9);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], LEG[n] + edge[n] * lit + WARM[n] * fl, w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.f) return;\n  F = P.f;\n  const ns = P.ns, rot = P.rot, t = P.t;\n  P.pal = [hsv(P.h, 0.85, 1), hsv(P.h + 0.42, 0.8, 1), hsv(P.h + 0.2, 0.75, 1)];\n  const SP = P.sp, RM = P.rm, HB = P.hb;\n  paint(P, P.sh, P.st, SP, RM, HB);\n  if (P.prev >= 0 && P.st \u003c FADE) {\n    const q = P.st / FADE;\n    paint(P, P.prev, P.ps + P.st, P.sp2, P.rm2, P.hb2);\n    for (let i = 0; i \u003c ns * NB * 3; i++) SP[i] = mix(P.sp2[i], SP[i], q);\n    for (let i = 0; i \u003c NR * 3; i++) RM[i] = mix(P.rm2[i], RM[i], q);\n    for (let n = 0; n \u003c 3; n++) HB[n] = mix(P.hb2[n], HB[n], q);\n  }\n  // The wheel's light in the haze: the mean colour of every bin.\n  const gc = [0, 0, 0], ws = ((R - HUB) / NB) * ns, wr = (TAU * R) / NR;\n  for (let i = 0; i \u003c ns * NB; i++) for (let n = 0; n \u003c 3; n++) gc[n] += SP[i * 3 + n] * ws;\n  for (let j = 0; j \u003c NR; j++) for (let n = 0; n \u003c 3; n++) gc[n] += RM[j * 3 + n] * wr * ns;\n  for (let n = 0; n \u003c 3; n++) gc[n] /= ns * NB * ws + NR * wr * ns;\n  // The haze takes a dim show nearly whole and a bright one by less.\n  const gk = 0.62 / (1 + (1.6 * max(...gc)) / 255);\n  for (let n = 0; n \u003c 3; n++) gc[n] *= gk;\n\n  // Sky, haze, stars and a thin moon.\n  for (let i = 0, o = 0; i \u003c SEA * W; i++, o += 3) {\n    const g = P.gm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = P.sky[o + n] + gc[n] * g;\n  }\n  for (const [x, y, b, ph, sp] of P.stars) add(x, y, [1, 1, 1.15], b * (0.65 + 0.35 * sin(t * sp + ph)));\n  for (let y = 3; y \u003c 11; y++)\n    for (let x = 51; x \u003c 60; x++) {\n      const a = (x + 0.5 - 55) ** 2 + (y + 0.5 - 7) ** 2, b = (x + 0.5 - 56.6) ** 2 + (y + 0.5 - 6) ** 2;\n      const k = cl(3.4 - sqrt(a), 0, 1) * cl(sqrt(b) - 2.9, 0, 1);\n      if (k > 0) add(x, y, [236, 228, 196], k);\n    }\n  // Clouds come in on the wind, lit from below by the wheel.\n  const wd = P.wind, th = 0.68 - 0.4 * wd, co = floor(P.co), cf = P.co - co;\n  for (let y = 0; y \u003c 76; y++) {\n    const hf = sm(76, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const c0 = y * 256, n = mix(P.cn[c0 + ((x + co) & 255)], P.cn[c0 + ((x + co + 1) & 255)], cf), dn = sm(th - 0.04, th + 0.22, n) * hf * 0.7;\n      if (dn \u003c= 0) continue;\n      const i = y * W + x, o = i * 3, g = 3 * (P.gm[i] + 0.2);\n      for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], CLOUD[k] + gc[k] * g, dn);\n    }\n  }\n\n  // Spokes, truss and rims, lit from the show's bins.\n  const st = STEEL.map((v, n) => v + gc[n] * 0.5);\n  for (let y = 7; y \u003c= 70; y++) {\n    const dy = y + 0.5 - CY;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - CX, r2 = dx * dx + dy * dy;\n      if (r2 > (R + 1.4) ** 2) continue;\n      const r = sqrt(r2), o = (y * W + x) * 3;\n      let a = (atan2(dy, dx) - rot) / TAU;\n      a -= floor(a);\n      const q = a * ns, kk = round(q), d = (abs(q - kk) * TAU * r) / ns;\n      const wsp = r > HUB && r \u003c R ? cl(1.25 - 1.5 * d, 0, 1) : 0;\n      const wrm = cl(1.25 - 1.5 * abs(r - R), 0, 1);\n      let wst = cl(1 - 1.6 * abs(r - RI), 0, 1) * 0.8;\n      if (r > RI && r \u003c R) {\n        const z = abs(fr(a * ns * 2) - 0.5) * 2, tt = (r - RI) / (R - RI);\n        wst = max(wst, cl(1 - 2.2 * abs(z - tt), 0, 1) * 0.7);\n      }\n      const occ = max(wsp, wrm, wst);\n      if (occ \u003c= 0) continue;\n      const so = ((kk % ns) * NB + min(NB - 1, floor(((r - HUB) / (R - HUB)) * NB))) * 3, ro = (floor(a * NR) % NR) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = F[o + n] * (1 - 0.85 * occ) + st[n] * occ + SP[so + n] * wsp + RM[ro + n] * wrm;\n    }\n  }\n\n  // The gondolas hang level from the rim, swinging in the wind.\n  const [A, B, C] = P.pal, step = ns / P.ng;\n  for (let i = 0; i \u003c P.ng; i++) {\n    const ang = rot + (TAU * i * step) / ns, px = CX + R * cos(ang), py = CY + R * sin(ang);\n    const sw = wd * (0.45 * sin(t * 1.8 + i * 1.1) + 0.25 * sin(t * 3.1 + i * 2.3)) + 0.05 * sin(t * 1.4 + i);\n    const gx = round(px - 0.5), gy = round(py - 0.5), cx = round(px - 0.5 + 3.2 * sin(sw)), [wk, empty] = P.cab[i];\n    const body = [A, B, C][i % 3].map((v, n) => v * 0.62 + gc[n]);\n    put(gx, gy, [150, 150, 170]);\n    put(round(px - 0.5 + 1.2 * sin(sw)), gy + 1, [60, 60, 76]);\n    for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + 2, body), put(cx + dx, gy + 5, body, 0.75);\n    for (let dy = 3; dy \u003c= 4; dy++) {\n      put(cx - 2, gy + dy, body, 0.85);\n      put(cx + 2, gy + dy, body, 0.85);\n      for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + dy, WARM, (empty || dx || dy > 3 ? 0.78 : 0.2) * wk);\n    }\n  }\n\n  // The A-frame in front of the wheel, and the hub on it.\n  const edge = gc.map((v) => v * 1.4);\n  leg(CX, CY, 12, FOOT, 0.85, edge);\n  leg(CX, CY, 52, FOOT, 0.85, edge);\n  for (let y = 33; y \u003c= 44; y++)\n    for (let x = 26; x \u003c= 38; x++) {\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2), k = cl(HUB + 0.5 - r, 0, 1);\n      if (k \u003c= 0) continue;\n      const o = (y * W + x) * 3, core = exp(-(r * r) / 2.5);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], 30 + HB[n] * (1 - r / 6) + WHITE[n] * core * 0.6, k);\n    }\n\n  // The shore: promenade, platform, lamps, booth, the warm light they throw.\n  for (let i = 70 * W, o = i * 3; i \u003c SEA * W; i++, o += 3) {\n    const m = P.fm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], P.fg[o + n], m) + P.ga[o + n];\n  }\n  for (let x = 23; x \u003c= 41; x += 2) put(x, 76, B, floor(t * 4 - x / 2) % 3 ? 0.35 : 0.85);\n  for (let x = 53; x \u003c= 62; x += 2) put(x, 71, WARM, floor(t * 5 + x / 2) % 2 ? 0.3 : 1);\n  for (const q of P.people) {\n    const x = floor(q.x), gait = q.w ? floor(q.x * 1.5) & 1 : 0;\n    put(x, 79, q.sk ? [150, 110, 86] : [70, 52, 44]);\n    for (let y = 80; y \u003c= 82; y++) put(x, y, q.c), put(x + 1, y, q.c, 0.8);\n    put(x + gait, 83, [16, 16, 24]);\n    put(x + 1 - gait, 83, [16, 16, 24], 0.7);\n  }\n\n  // The lake: the scene above, mirrored, squeezed and broken by the ripples.\n  const wt = P.wt, gw = 0.55 + 0.35 * wd, pw = 3 - 1.2 * wd, sp = 0.5 + 6 * wd;\n  const row = (ys, sx) => (cl(round(ys), 0, SEA - 1) * W + sx) * 3;\n  for (let y = SEA; y \u003c H; y++) {\n    const d = y + 0.5 - SEA, dn = d / (H - SEA), amp = (0.35 + 1.9 * wd) * (0.45 + dn), rf = 0.7 - 0.3 * dn;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = amp * (0.6 * sn(d * 0.75 - wt * 1.9 + x * 0.04) + 0.4 * sn(d * 2.3 + x * 0.37 - wt * 3.3));\n      const ys = SEA - 0.5 - d / SQ + amp * 0.45 * sn(x * 0.45 + d * 1.1 - wt * 2.6), sx = cl(round(x + ox), 0, W - 1);\n      const hl = (0.5 + 0.5 * sn(d * 1.7 - wt * 1.4 + 1.6 * sn(x * 0.15 + d * 0.3 + wt * 0.5))) ** pw, o = (y * W + x) * 3;\n      // Choppy water stretches each light into a streak: the brightest of the\n      // rows a wave face can show here, above the mirror point and below it.\n      const s1 = row(ys, sx), s0 = row(ys - sp, sx), s2 = row(ys + sp, sx), s3 = row(ys - sp / 2, sx), s4 = row(ys + sp / 2, sx);\n      for (let n = 0; n \u003c 3; n++)\n        F[o + n] = LAKE[n] * (1 + dn * 0.5) + gc[n] * gw * hl + (0.55 * F[s1 + n] + 0.5 * max(F[s0 + n], F[s2 + n], F[s3 + n], F[s4 + n])) * rf * TINT[n];\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-ferris-wheel","type":"code","name":"ferris-wheel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ferris Wheel\n// Family:  fair\n// Idea:    A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the light shows of the observation wheels on lake and river fronts\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1\n//\n// Knob 1: Lights. Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet.\n// Knob 2: Speed. How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower.\n// Knob 3: Spokes. How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one.\n// Knob 4: Wind. Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light.\n// Buttons: K1 tap starts the next show at once.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst fr = (v) => v - floor(v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The wheel: hub, outer rim with the lights, inner rim, and the truss between.\nconst CX = 32, CY = 38.5, R = 29.5, RI = 26.3, HUB = 3.6;\n// The first row of the lake, which is the line the scene mirrors in, the\n// promenade the legs stand on, and how much the reflection is squeezed.\nconst SEA = 87, FOOT = 84, SQ = 0.72;\n// Light bins along each spoke and round the rim; the shows paint these.\nconst NB = 24, NR = 120;\nconst SHOWS = 6, DUR = 6.5, FADE = 0.35;\nconst CLOUD = [12, 14, 28], LAKE = [3, 7, 22], TINT = [0.85, 0.92, 1];\n// A sine table for the ripples, which take five sines an LED.\nconst SN = F32(1024).map((_, i) => sin((i * TAU) / 1024));\nconst sn = (v) => SN[(v * 162.97) & 1023];\nconst STEEL = [26, 28, 42], LEG = [22, 24, 38], WARM = [255, 214, 150], WHITE = [255, 250, 240];\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, wt: 0, co: 0, rot: 0.2, st: 0, sh: 0, prev: -1, ps: 0, ns: 12, ng: 12, wind: 0.06, h: 0.53,\n    f: F32(N * 3), cn: F32(256 * 76), sky: F32(SEA * W * 3), gm: F32(SEA * W), fg: F32(N * 3), fm: F32(N), ga: F32(N * 3),\n    sp: F32(32 * NB * 3), rm: F32(NR * 3), hb: [0, 0, 0], sp2: F32(32 * NB * 3), rm2: F32(NR * 3), hb2: [0, 0, 0],\n    stars: [], people: [], cab: [],\n  });\n  // Night sky, paler towards the horizon, and the hills behind the far shore\n  // with a few houses lit.\n  for (let y = 0; y \u003c SEA; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y / SEA, o = (y * W + x) * 3, hy = 77 + 2.4 * sin(x * 0.11 + 0.7) + 1.4 * sin(x * 0.29 + 2);\n      let c = [3 + 14 * v * v, 5 + 18 * v * v, 22 + 46 * v * v];\n      if (y > hy) c = [7, 8, 18];\n      if (y > hy + 1 && hash(x, y) \u003c 0.025) c = [120, 96, 60];\n      P.sky.set(c, o);\n      // Where the wheel's light lands on the haze: round the wheel and low over the shore.\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2);\n      P.gm[y * W + x] = 0.75 * exp(-(max(0, r - 18) ** 2) / 420) + 0.45 * exp(-(SEA - y) / 22);\n    }\n  // Cloud: three octaves of value noise 256 wide, so it can scroll round.\n  const seed = floor(rnd() * 999);\n  const vn = (x, y, cx, cy, s) => {\n    const nx = 256 / cx, gx = x / cx, gy = y / cy, ix = floor(gx), iy = floor(gy), u = sm(0, 1, gx - ix), v = sm(0, 1, gy - iy);\n    const h = (i, j) => hash(((ix + i) % nx) + s, iy + j);\n    return mix(mix(h(0, 0), h(1, 0), u), mix(h(0, 1), h(1, 1), u), v);\n  };\n  for (let y = 0; y \u003c 76; y++) for (let x = 0; x \u003c 256; x++) P.cn[y * 256 + x] = 0.55 * vn(x, y, 32, 9, seed) + 0.3 * vn(x, y, 16, 5, seed + 7) + 0.15 * vn(x, y, 8, 3, seed + 13);\n  for (let i = 0; i \u003c 36; i++) P.stars.push([floor(rnd() * W), floor(rnd() * 46), 40 + rnd() * 70, rnd() * TAU, 0.6 + rnd()]);\n  // The promenade, the boarding platform with its stairs, two lamps and the\n  // ticket booth, kept as one layer with its own coverage.\n  const fg = (x, y, c, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    P.fg.set(c, (y * W + x) * 3);\n    P.fm[y * W + x] = a;\n  };\n  const glow = (gx, gy, c, k, s) => {\n    for (let y = max(0, gy - 12); y \u003c min(SEA, gy + 12); y++)\n      for (let x = max(0, gx - 12); x \u003c min(W, gx + 12); x++) {\n        const g = k * exp(-((x - gx) ** 2 + (y - gy) ** 2) / s);\n        for (let n = 0; n \u003c 3; n++) P.ga[(y * W + x) * 3 + n] += c[n] * g;\n      }\n  };\n  for (let x = 0; x \u003c W; x++) {\n    fg(x, 84, [34, 28, 32]);\n    fg(x, 85, [28, 24, 30]);\n    fg(x, 86, [64, 60, 70]);\n  }\n  for (let x = 22; x \u003c= 42; x++) fg(x, 77, [78, 74, 92]), fg(x, 78, [30, 30, 42]);\n  for (const x of [24, 32, 40]) for (let y = 79; y \u003c 84; y++) fg(x, y, [22, 22, 32]);\n  for (let i = 0; i \u003c 6; i++) fg(21 - i, 78 + i, [60, 56, 70]), fg(21 - i, 79 + i, [26, 24, 34]);\n  for (const lx of [5, 46]) {\n    for (let y = 76; y \u003c 84; y++) fg(lx, y, [36, 36, 48]);\n    fg(lx, 75, [255, 230, 180]);\n    fg(lx - 1, 75, [120, 100, 70]);\n    fg(lx + 1, 75, [120, 100, 70]);\n    glow(lx, 76, WARM, 0.32, 14);\n  }\n  for (let x = 53; x \u003c= 62; x++) {\n    const st = ((x - 53) >> 1) & 1 ? [226, 218, 206] : [200, 36, 56];\n    fg(x, 72, st);\n    if (!(x & 1)) fg(x, 73, st);\n    for (let y = 74; y \u003c 84; y++) fg(x, y, x === 53 || x === 62 ? [40, 22, 30] : [70, 34, 46]);\n  }\n  for (let y = 75; y \u003c= 78; y++) for (let x = 55; x \u003c= 60; x++) fg(x, y, [255, 196, 120].map((v) => v * (0.85 - 0.08 * (y - 75))));\n  for (const [x, y] of [[58, 76], [57, 78], [58, 78], [59, 78]]) fg(x, y, [40, 24, 24]);\n  fg(58, 77, [56, 32, 30]);\n  for (let x = 54; x \u003c= 61; x++) fg(x, 79, [160, 116, 70]), fg(x, 81, (x & 1) ? [240, 200, 90] : [110, 70, 40]);\n  glow(58, 80, [255, 180, 100], 0.28, 18);\n  // People on the promenade, a queue at the foot of the stairs and two who walk.\n  for (const [x, w] of [[9, 0], [14, 0], [17, 0], [49, 0], [27, 2.2], [40, -1.6]])\n    P.people.push({ x: x + 0.5, w, c: hsv(rnd(), 0.5, 0.25 + 0.15 * rnd()), sk: rnd() \u003c 0.5 });\n  for (let i = 0; i \u003c 32; i++) P.cab.push([0.55 + 0.45 * rnd(), rnd() \u003c 0.4]);\n}\n\nfunction next(P) {\n  P.prev = P.sh;\n  P.ps = P.st;\n  P.sh = (P.sh + 1) % SHOWS;\n  P.st = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  const v = cl(k[1], 0.2, 3) / 2;\n  let ns = round(cl(k[2], 12, 32));\n  if (ns > 18) ns += ns & 1;\n  Object.assign(P, { h: fr(0.53 + cl(k[0], 0, 1)), ns, ng: ns > 18 ? ns / 2 : ns, wind: cl(k[3], 0, 1) });\n  P.t += dt;\n  P.wt += dt * v * (0.7 + 1.5 * P.wind);\n  P.co += dt * v * (1 + 10 * P.wind);\n  P.rot += (dt * v * TAU) / 40;\n  P.st += dt * v;\n  if ((input.btnPressed && input.btnPressed[0]) || P.st >= DUR) next(P);\n  for (const q of P.people)\n    if (q.w) {\n      q.x += q.w * dt * v;\n      if (q.x > W + 3) q.x = -3;\n      if (q.x \u003c -3) q.x = W + 3;\n    }\n}\n\n// One show at its time s paints the spoke bins, the rim bins and the hub.\nfunction paint(P, sh, s, SP, RM, HB) {\n  const ns = P.ns, [A, B, C] = P.pal, rot = P.rot;\n  const spk = (k, b, c, I) => {\n    const o = (k * NB + b) * 3;\n    (SP[o] = c[0] * I), (SP[o + 1] = c[1] * I), (SP[o + 2] = c[2] * I);\n  };\n  const rim = (j, c, I) => ((RM[j * 3] = c[0] * I), (RM[j * 3 + 1] = c[1] * I), (RM[j * 3 + 2] = c[2] * I));\n  const lerp = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n  const hub = (c, I) => ((HB[0] = c[0] * I), (HB[1] = c[1] * I), (HB[2] = c[2] * I));\n  const uB = (b) => (b + 0.5) / NB;\n  if (sh === 0) {\n    // Light runs out along the spokes, brightest where a beam sweeps round\n    // against the turn; marquee bulbs chase round the rim and three white\n    // comets run through them.\n    const sw = fr(-s * 0.3), mq = floor(s * 9);\n    for (let k = 0; k \u003c ns; k++) {\n      const dl = fr(k / ns - sw), bm = exp(-dl / 0.22), wt = 0.5 * exp(-dl * ns * 1.5);\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), ds = exp(-(((fr(u * 2 - s * 1.1) - 0.5) / 0.17) ** 2));\n        spk(k, b, lerp(lerp(C, A, u), WHITE, wt), 0.14 + 0.25 * bm + 0.61 * ds * (0.45 + 0.55 * bm));\n      }\n    }\n    for (let j = 0; j \u003c NR; j++) {\n      let I = 0;\n      for (let m = 0; m \u003c 3; m++) I = max(I, exp(-fr(fr(s * 0.42 + m / 3) - j / NR) / 0.04));\n      rim(j, lerp(B, WHITE, I), max(I, (floor(j / 2) + mq) % 3 ? 0.22 : 0.9));\n    }\n    hub(A, 0.8);\n  } else if (sh === 1) {\n    // A colour wipe across the whole wheel, lit full, with a white front.\n    const X = CX + 35 * cos((PI * s) / 3.25), f0 = 0.88 * sm(0, 0.5, s);\n    const col = (x) => lerp(lerp(A, B, sm(X - 2.5, X + 2.5, x)), WHITE, 0.7 * exp(-(((x - X) / 2.2) ** 2)));\n    for (let k = 0; k \u003c ns; k++) {\n      const c = cos(rot + (TAU * k) / ns);\n      for (let b = 0; b \u003c NB; b++) spk(k, b, col(CX + (HUB + uB(b) * (R - HUB)) * c), f0);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, col(CX + R * cos(rot + (TAU * (j + 0.5)) / NR)), f0);\n    hub(col(CX), f0);\n  } else if (sh === 2) {\n    // A spiral arm winds out from the hub and round the wheel.\n    for (let k = 0; k \u003c ns; k++)\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), v = fr(u * 0.9 + k / ns - s * 0.45);\n        spk(k, b, lerp(B, C, u), 0.07 + 0.93 * exp(-(((v - 0.5) / 0.2) ** 2)));\n      }\n    for (let j = 0; j \u003c NR; j++) rim(j, A, fr((j / NR) * ns * 0.5 - s * 0.9) \u003c 0.5 ? 0.95 : 0.12);\n    hub(B, 0.9);\n  } else if (sh === 3) {\n    // Spoke after spoke lights up round the wheel and holds before it blinks out.\n    const n = (s / 3.6) * ns, blink = s > 4.8 && fr((s - 4.8) * 2.6) > 0.5;\n    for (let k = 0; k \u003c ns; k++) {\n      const I = blink ? 0.04 : k \u003c floor(n) ? 0.9 : k === floor(n) ? fr(n) : 0.05;\n      for (let b = 0; b \u003c NB; b++) spk(k, b, k === floor(n) ? WHITE : k & 1 ? B : A, I);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, C, blink ? 0.04 : j / NR \u003c n / ns ? 0.95 : 0.08);\n    hub(WHITE, blink ? 0.1 : 0.85);\n  } else if (sh === 4) {\n    // Rings run out from the hub, each a colour, and flash the rim on arriving.\n    SP.fill(0, 0, ns * NB * 3);\n    let Ir = 0.08, Ih = 0.2, cr = A;\n    for (let m = 0; m \u003c 3; m++) {\n      // Rings are born in the order A, C, B, so each takes the next colour.\n      const f = fr(s * 0.4 + m / 3), c = P.pal[m], e = exp(-(((1 - f) / 0.06) ** 2));\n      for (let k = 0; k \u003c ns; k++)\n        for (let b = 0; b \u003c NB; b++) {\n          const I = exp(-(((uB(b) - f) / 0.07) ** 2)), o = (k * NB + b) * 3;\n          for (let n = 0; n \u003c 3; n++) SP[o + n] += c[n] * I;\n        }\n      if (e > Ir) (Ir = e), (cr = c);\n      Ih = max(Ih, exp(-((f / 0.08) ** 2)));\n    }\n    for (let k = 0; k \u003c ns * NB * 3; k++) SP[k] += 14;\n    for (let j = 0; j \u003c NR; j++) rim(j, cr, max(0.1, Ir));\n    hub(WHITE, Ih);\n  } else {\n    // Every spoke its own colour, the rainbow turning round, with sparkles.\n    const tw = floor(s * 7);\n    for (let k = 0; k \u003c ns; k++) {\n      const c = hsv(P.h + fr(k / ns + s * 0.12), 0.85, 1);\n      for (let b = 0; b \u003c NB; b++) hash(k * NB + b, tw) \u003c 0.07 ? spk(k, b, WHITE, 1) : spk(k, b, c, 0.72);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, hsv(P.h + fr(j / NR - s * 0.25), 0.8, 1), 0.75);\n    hub(WHITE, 0.8);\n  }\n}\n\nlet F;\nconst add = (x, y, c, k) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] += c[n] * k;\n};\nconst put = (x, y, c, k = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// A leg of the A-frame from the hub to the promenade, a dark girder.\nfunction leg(ax, ay, bx, by, hw, edge) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy;\n  for (let y = floor(ay); y \u003c= by; y++)\n    for (let x = max(0, floor(min(ax, bx) - 2)); x \u003c= min(W - 1, max(ax, bx) + 2); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, d = sqrt(ex * ex + ey * ey);\n      const w = cl(hw + 0.5 - d, 0, 1);\n      if (w \u003c= 0) continue;\n      const o = (y * W + x) * 3, lit = 0.5 + 0.5 * cl((d - hw + 0.6) * 1.5, 0, 1);\n      const fl = 0.32 * exp(-(FOOT - y) / 9);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], LEG[n] + edge[n] * lit + WARM[n] * fl, w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.f) return;\n  F = P.f;\n  const ns = P.ns, rot = P.rot, t = P.t;\n  P.pal = [hsv(P.h, 0.85, 1), hsv(P.h + 0.42, 0.8, 1), hsv(P.h + 0.2, 0.75, 1)];\n  const SP = P.sp, RM = P.rm, HB = P.hb;\n  paint(P, P.sh, P.st, SP, RM, HB);\n  if (P.prev >= 0 && P.st \u003c FADE) {\n    const q = P.st / FADE;\n    paint(P, P.prev, P.ps + P.st, P.sp2, P.rm2, P.hb2);\n    for (let i = 0; i \u003c ns * NB * 3; i++) SP[i] = mix(P.sp2[i], SP[i], q);\n    for (let i = 0; i \u003c NR * 3; i++) RM[i] = mix(P.rm2[i], RM[i], q);\n    for (let n = 0; n \u003c 3; n++) HB[n] = mix(P.hb2[n], HB[n], q);\n  }\n  // The wheel's light in the haze: the mean colour of every bin.\n  const gc = [0, 0, 0], ws = ((R - HUB) / NB) * ns, wr = (TAU * R) / NR;\n  for (let i = 0; i \u003c ns * NB; i++) for (let n = 0; n \u003c 3; n++) gc[n] += SP[i * 3 + n] * ws;\n  for (let j = 0; j \u003c NR; j++) for (let n = 0; n \u003c 3; n++) gc[n] += RM[j * 3 + n] * wr * ns;\n  for (let n = 0; n \u003c 3; n++) gc[n] /= ns * NB * ws + NR * wr * ns;\n  // The haze takes a dim show nearly whole and a bright one by less.\n  const gk = 0.62 / (1 + (1.6 * max(...gc)) / 255);\n  for (let n = 0; n \u003c 3; n++) gc[n] *= gk;\n\n  // Sky, haze, stars and a thin moon.\n  for (let i = 0, o = 0; i \u003c SEA * W; i++, o += 3) {\n    const g = P.gm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = P.sky[o + n] + gc[n] * g;\n  }\n  for (const [x, y, b, ph, sp] of P.stars) add(x, y, [1, 1, 1.15], b * (0.65 + 0.35 * sin(t * sp + ph)));\n  for (let y = 3; y \u003c 11; y++)\n    for (let x = 51; x \u003c 60; x++) {\n      const a = (x + 0.5 - 55) ** 2 + (y + 0.5 - 7) ** 2, b = (x + 0.5 - 56.6) ** 2 + (y + 0.5 - 6) ** 2;\n      const k = cl(3.4 - sqrt(a), 0, 1) * cl(sqrt(b) - 2.9, 0, 1);\n      if (k > 0) add(x, y, [236, 228, 196], k);\n    }\n  // Clouds come in on the wind, lit from below by the wheel.\n  const wd = P.wind, th = 0.68 - 0.4 * wd, co = floor(P.co), cf = P.co - co;\n  for (let y = 0; y \u003c 76; y++) {\n    const hf = sm(76, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const c0 = y * 256, n = mix(P.cn[c0 + ((x + co) & 255)], P.cn[c0 + ((x + co + 1) & 255)], cf), dn = sm(th - 0.04, th + 0.22, n) * hf * 0.7;\n      if (dn \u003c= 0) continue;\n      const i = y * W + x, o = i * 3, g = 3 * (P.gm[i] + 0.2);\n      for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], CLOUD[k] + gc[k] * g, dn);\n    }\n  }\n\n  // Spokes, truss and rims, lit from the show's bins.\n  const st = STEEL.map((v, n) => v + gc[n] * 0.5);\n  for (let y = 7; y \u003c= 70; y++) {\n    const dy = y + 0.5 - CY;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - CX, r2 = dx * dx + dy * dy;\n      if (r2 > (R + 1.4) ** 2) continue;\n      const r = sqrt(r2), o = (y * W + x) * 3;\n      let a = (atan2(dy, dx) - rot) / TAU;\n      a -= floor(a);\n      const q = a * ns, kk = round(q), d = (abs(q - kk) * TAU * r) / ns;\n      const wsp = r > HUB && r \u003c R ? cl(1.25 - 1.5 * d, 0, 1) : 0;\n      const wrm = cl(1.25 - 1.5 * abs(r - R), 0, 1);\n      let wst = cl(1 - 1.6 * abs(r - RI), 0, 1) * 0.8;\n      if (r > RI && r \u003c R) {\n        const z = abs(fr(a * ns * 2) - 0.5) * 2, tt = (r - RI) / (R - RI);\n        wst = max(wst, cl(1 - 2.2 * abs(z - tt), 0, 1) * 0.7);\n      }\n      const occ = max(wsp, wrm, wst);\n      if (occ \u003c= 0) continue;\n      const so = ((kk % ns) * NB + min(NB - 1, floor(((r - HUB) / (R - HUB)) * NB))) * 3, ro = (floor(a * NR) % NR) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = F[o + n] * (1 - 0.85 * occ) + st[n] * occ + SP[so + n] * wsp + RM[ro + n] * wrm;\n    }\n  }\n\n  // The gondolas hang level from the rim, swinging in the wind.\n  const [A, B, C] = P.pal, step = ns / P.ng;\n  for (let i = 0; i \u003c P.ng; i++) {\n    const ang = rot + (TAU * i * step) / ns, px = CX + R * cos(ang), py = CY + R * sin(ang);\n    const sw = wd * (0.45 * sin(t * 1.8 + i * 1.1) + 0.25 * sin(t * 3.1 + i * 2.3)) + 0.05 * sin(t * 1.4 + i);\n    const gx = round(px - 0.5), gy = round(py - 0.5), cx = round(px - 0.5 + 3.2 * sin(sw)), [wk, empty] = P.cab[i];\n    const body = [A, B, C][i % 3].map((v, n) => v * 0.62 + gc[n]);\n    put(gx, gy, [150, 150, 170]);\n    put(round(px - 0.5 + 1.2 * sin(sw)), gy + 1, [60, 60, 76]);\n    for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + 2, body), put(cx + dx, gy + 5, body, 0.75);\n    for (let dy = 3; dy \u003c= 4; dy++) {\n      put(cx - 2, gy + dy, body, 0.85);\n      put(cx + 2, gy + dy, body, 0.85);\n      for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + dy, WARM, (empty || dx || dy > 3 ? 0.78 : 0.2) * wk);\n    }\n  }\n\n  // The A-frame in front of the wheel, and the hub on it.\n  const edge = gc.map((v) => v * 1.4);\n  leg(CX, CY, 12, FOOT, 0.85, edge);\n  leg(CX, CY, 52, FOOT, 0.85, edge);\n  for (let y = 33; y \u003c= 44; y++)\n    for (let x = 26; x \u003c= 38; x++) {\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2), k = cl(HUB + 0.5 - r, 0, 1);\n      if (k \u003c= 0) continue;\n      const o = (y * W + x) * 3, core = exp(-(r * r) / 2.5);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], 30 + HB[n] * (1 - r / 6) + WHITE[n] * core * 0.6, k);\n    }\n\n  // The shore: promenade, platform, lamps, booth, the warm light they throw.\n  for (let i = 70 * W, o = i * 3; i \u003c SEA * W; i++, o += 3) {\n    const m = P.fm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], P.fg[o + n], m) + P.ga[o + n];\n  }\n  for (let x = 23; x \u003c= 41; x += 2) put(x, 76, B, floor(t * 4 - x / 2) % 3 ? 0.35 : 0.85);\n  for (let x = 53; x \u003c= 62; x += 2) put(x, 71, WARM, floor(t * 5 + x / 2) % 2 ? 0.3 : 1);\n  for (const q of P.people) {\n    const x = floor(q.x), gait = q.w ? floor(q.x * 1.5) & 1 : 0;\n    put(x, 79, q.sk ? [150, 110, 86] : [70, 52, 44]);\n    for (let y = 80; y \u003c= 82; y++) put(x, y, q.c), put(x + 1, y, q.c, 0.8);\n    put(x + gait, 83, [16, 16, 24]);\n    put(x + 1 - gait, 83, [16, 16, 24], 0.7);\n  }\n\n  // The lake: the scene above, mirrored, squeezed and broken by the ripples.\n  const wt = P.wt, gw = 0.55 + 0.35 * wd, pw = 3 - 1.2 * wd, sp = 0.5 + 6 * wd;\n  const row = (ys, sx) => (cl(round(ys), 0, SEA - 1) * W + sx) * 3;\n  for (let y = SEA; y \u003c H; y++) {\n    const d = y + 0.5 - SEA, dn = d / (H - SEA), amp = (0.35 + 1.9 * wd) * (0.45 + dn), rf = 0.7 - 0.3 * dn;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = amp * (0.6 * sn(d * 0.75 - wt * 1.9 + x * 0.04) + 0.4 * sn(d * 2.3 + x * 0.37 - wt * 3.3));\n      const ys = SEA - 0.5 - d / SQ + amp * 0.45 * sn(x * 0.45 + d * 1.1 - wt * 2.6), sx = cl(round(x + ox), 0, W - 1);\n      const hl = (0.5 + 0.5 * sn(d * 1.7 - wt * 1.4 + 1.6 * sn(x * 0.15 + d * 0.3 + wt * 0.5))) ** pw, o = (y * W + x) * 3;\n      // Choppy water stretches each light into a streak: the brightest of the\n      // rows a wave face can show here, above the mirror point and below it.\n      const s1 = row(ys, sx), s0 = row(ys - sp, sx), s2 = row(ys + sp, sx), s3 = row(ys - sp / 2, sx), s4 = row(ys + sp / 2, sx);\n      for (let n = 0; n \u003c 3; n++)\n        F[o + n] = LAKE[n] * (1 + dn * 0.5) + gc[n] * gw * hl + (0.55 * F[s1 + n] + 0.5 * max(F[s0 + n], F[s2 + n], F[s3 + n], F[s4 + n])) * rf * TINT[n];\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower."},{"name":"Spokes","min":12,"max":32,"about":"How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one."},{"name":"Wind","min":0,"max":1,"about":"Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light."}],"start":[0,2,12,0.06],"measures":{"motion":0.2782,"detail":0.0637,"edges":0.3285,"complexity":1.8086,"coverage":0.9981,"colour":0.1705,"drift":0.1001},"knobResponse":[0.0444,0.0524,0.0479,0.0788]},{"slug":"fiddlehead","title":"Fiddlehead","family":"growth","round":21,"note":"봄 숲 바닥의 타임랩스예요. 털 덮인 고사리 순이 지난해 낙엽을 뚫고 올라와 아래부터 풀리며 패널 꼭대기에서 휘는 잎이 되고, 그사이 늙은 잎은 누렇게 시들어 쓰러지고 숲 지붕 틈으로 든 빛살이 그 위를 미끄러져요.","idea":"A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-fiddlehead","type":"code","name":"fiddlehead","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fern","min":0,"max":3,"about":"Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps."},{"name":"Fronds","min":6,"max":18,"about":"How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18."},{"name":"Breeze","min":-1,"max":1,"about":"Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster."}],"start":[0,2,6,0.06],"measures":{"motion":0.2772,"detail":0.0937,"edges":0.4428,"complexity":2.2973,"coverage":0.9858,"colour":0.1938,"drift":0.0784},"knobResponse":[0.0694,0.0969,0.0478,0.0882]},{"slug":"figure-eight-orbit","title":"Figure-Eight Orbit","family":"physics","round":38,"note":"같은 질량 셋이 뉴턴 중력으로 패널 높이만 한 8자 하나를 3분의 1주기씩 떨어져 돌아요. 식으로 그린 곡선이 아니라 한 걸음씩 푼 궤도라서, K4 로 처음 속도를 밀면 8자가 흔들리다가 더 밀면 둘이 짝을 짓고 하나가 패널 밖으로 튕겨 나가요. K3 은 꼬리를 늘려 세 혜성을 겹친 8자 띠로 바꾸고, K1 을 누르면 도는 궤도를 살짝 밀어요.","idea":"Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.","buttons":"K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Figure-Eight Orbit\n// Family:  physics\n// Idea:    Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: figure-eight solution of the three-body problem (Cris Moore, 1993; Alain Chenciner and Richard Montgomery, 2000), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1\n//\n// Knob 1: Hue. Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive.\n// Knob 2: Speed. At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2.\n// Knob 3: Trail. How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2.\n// Knob 4: Kick. Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest.\n// Buttons: K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, abs, hypot, round, cbrt, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Chenciner and Montgomery's starting values, G = m = 1: body 3 at the\n// crossing, bodies 1 and 2 opposite each other, both moving at half body 3's\n// velocity the other way. The period is 6.32591398.\nconst X1 = 0.97000436, Y1 = -0.24308753, VX3 = -0.93240737, VY3 = -0.86473146, PERIOD = 6.32591398;\n// Orbit to panel: the eight's long axis down the panel, SC LEDs to the unit.\n// It reaches 1.081 along that axis and 0.358 across, so 115 by 38 LEDs.\nconst SC = 53, CX = 31.5, CY = 63.5;\n// Under RS the pull is that of a uniform ball, so a close pass of a binary\n// stays finite. The eight never comes closer than 0.69, so it never feels it.\nconst RS = 0.05;\n// Step in orbit time: Yoshida's fourth-order leapfrog at H0, shortened by\n// (r / 0.5)^1.5 when two bodies are closer than 0.5.\nconst H0 = 1 / 128;\nconst YW1 = 1 / (2 - cbrt(2)), YW0 = -cbrt(2) * YW1;\nconst YC = [YW1 / 2, (YW0 + YW1) / 2, (YW0 + YW1) / 2, YW1 / 2], YD = [YW1, YW0, YW1];\n// Tail half-width at the head, in LEDs, and how far a body glows.\nconst HW = 3.6, GLOW = 6;\n// Opening hues: azure, rose, lime.\nconst HUE0 = 0.58;\n// Longest tail, in periods, and so the history the pattern keeps.\nconst LMAX = 2;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trail: 0.33, kick: 0, kickSet: -1, kickWait: 0, begun: false,\n    p: new Float64Array(6), v: new Float64Array(6), a: new Float64Array(6),\n    clock: 0, carry: 0, out: 0, fade: 1, phase: 0, nudges: 0,\n    // Per body and LED: when the body last passed (orbit time) and how close.\n    tv: new Float32Array(3 * N).fill(-1e9), td: new Float32Array(3 * N).fill(99),\n    lx: new Float32Array(3), ly: new Float32Array(3), warm: [0, 0, 0],\n    ref: new Float32Array(N), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n  drawReference(params.s);\n}\n\n// Pull on each body; under RS the force grows linearly from the centre.\nfunction accel(p, a) {\n  a.fill(0);\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) {\n      const dx = p[2 * j] - p[2 * i], dy = p[2 * j + 1] - p[2 * i + 1], r = sqrt(dx * dx + dy * dy), q = max(r, RS);\n      const f = 1 / (q * q * q);\n      a[2 * i] += dx * f;\n      a[2 * i + 1] += dy * f;\n      a[2 * j] -= dx * f;\n      a[2 * j + 1] -= dy * f;\n    }\n}\n\nfunction closest(p) {\n  let m = 1e9;\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) m = min(m, hypot(p[2 * j] - p[2 * i], p[2 * j + 1] - p[2 * i + 1]));\n  return m;\n}\n\n// One step of Yoshida's fourth-order symplectic integrator: three leapfrogs\n// of h w1, h w0, h w1, with w0 negative.\nfunction step(p, v, a, h) {\n  for (let s = 0; s \u003c 3; s++) {\n    for (let i = 0; i \u003c 6; i++) p[i] += YC[s] * h * v[i];\n    accel(p, a);\n    for (let i = 0; i \u003c 6; i++) v[i] += YD[s] * h * a[i];\n  }\n  for (let i = 0; i \u003c 6; i++) p[i] += YC[3] * h * v[i];\n}\n\nconst stepLength = (p) => H0 * min(1, (max(closest(p), RS) / 0.5) ** 1.5);\n\n// The kick: bodies i and j pushed apart along the line between them, each\n// by eps, and then every velocity scaled back to the kinetic energy before\n// the push. Positions do not move, so the energy stays what it was; the\n// momentum stays zero and the angular momentum stays zero too, as for the\n// eight itself, so only the shape of the motion changes.\nfunction push(S, i, j, eps) {\n  const { p, v } = S, dx = p[2 * i] - p[2 * j], dy = p[2 * i + 1] - p[2 * j + 1], r = hypot(dx, dy) || 1;\n  let k0 = 0, k1 = 0;\n  for (let n = 0; n \u003c 6; n++) k0 += v[n] * v[n];\n  v[2 * i] += (eps * dx) / r;\n  v[2 * i + 1] += (eps * dy) / r;\n  v[2 * j] -= (eps * dx) / r;\n  v[2 * j + 1] -= (eps * dy) / r;\n  for (let n = 0; n \u003c 6; n++) k1 += v[n] * v[n];\n  const f = sqrt(k0 / k1);\n  for (let n = 0; n \u003c 6; n++) v[n] *= f;\n}\n\n// Kick 0..1 to eps: nothing up to 0.06, then up to 0.45.\nconst epsOf = (k) => 0.45 * (max(0, k - 0.06) / 0.94) ** 1.2;\n\nfunction initial(S) {\n  const { p, v } = S;\n  p.set([X1, Y1, -X1, -Y1, 0, 0]);\n  v.set([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]);\n  push(S, 0, 1, epsOf(S.kick));\n  S.kickSet = S.kick;\n}\n\nconst toCol = (y) => CX + y * SC, toRow = (x) => CY - x * SC;\n\n// A tail at an LED: age a in orbit time, distance d in LEDs, tail length L.\n// It narrows from HW at the head to nothing at its end, and dims from full\n// at the head to 0.6 a third of a period behind it and 0.55 after that.\nfunction tailCover(a, d, L) {\n  if (a \u003c 0 || a >= L) return 0;\n  return cl((HW + 0.5) * (1 - a / L) ** 1.5 - d + 0.5, 0, 1);\n}\nconst tailBright = (a) => 0.55 + 0.45 * exp(-a / (0.15 * PERIOD));\nconst tailValue = (a, d, L) => tailCover(a, d, L) * tailBright(a);\n\n// Mark the LEDs round body k at orbit time t. Within one pass the closest\n// approach is kept; a later pass takes the LED when it would light it more.\nfunction deposit(S, k, t) {\n  const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]), R = HW + 1.5, L = LMAX * PERIOD;\n  if (bx \u003c -R || bx > W + R || by \u003c -R || by > H + R) return;\n  const o = k * N, tv = S.tv, td = S.td;\n  for (let y = max(0, floor(by - R)); y \u003c= min(H - 1, floor(by + R)); y++)\n    for (let x = max(0, floor(bx - R)); x \u003c= min(W - 1, floor(bx + R)); x++) {\n      const d = hypot(x + 0.5 - bx, y + 0.5 - by);\n      if (d > R) continue;\n      const q = o + y * W + x, t0 = tv[q];\n      if (abs(t - t0) \u003c 0.3) {\n        if (d \u003c td[q]) {\n          tv[q] = t;\n          td[q] = d;\n        }\n        continue;\n      }\n      const ref = max(t, t0), vNew = tailValue(ref - t, d, L), vOld = tailValue(ref - t0, td[q], L);\n      if (vNew > vOld || (vNew === vOld && t > t0)) {\n        tv[q] = t;\n        td[q] = d;\n      }\n    }\n}\n\n// Deposit body k if it has moved half an LED since it last did.\nfunction trace(S, t) {\n  for (let k = 0; k \u003c 3; k++) {\n    const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]);\n    if (hypot(bx - S.lx[k], by - S.ly[k]) \u003c 0.5) continue;\n    S.lx[k] = bx;\n    S.ly[k] = by;\n    deposit(S, k, t);\n  }\n}\n\nconst farthest = (p) => max(hypot(p[0], p[1]), hypot(p[2], p[3]), hypot(p[4], p[5]));\n\n// Start (or start again): the starting line-up with the current kick, and\n// its own past drawn behind it by running the orbit backward for up to LMAX\n// periods, or until a body would come in from off the panel.\nfunction restart(S) {\n  S.tv.fill(-1e9);\n  S.td.fill(99);\n  S.clock = 0;\n  S.carry = 0;\n  S.out = 0;\n  initial(S);\n  const { p, v, a } = S;\n  const p0 = Float64Array.from(p), v0 = Float64Array.from(v);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  let t = 0;\n  while (t > -LMAX * PERIOD && farthest(p) \u003c 1.4) {\n    trace(S, t);\n    const h = stepLength(p);\n    step(p, v, a, -h);\n    t -= h;\n  }\n  p.set(p0);\n  v.set(v0);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  trace(S, 0);\n}\n\n// Whole steps only, the remainder carried to the next frame, so at the\n// opening the step never changes and the integrator stays symplectic.\nfunction advance(S, dt) {\n  const { p, v, a } = S;\n  S.carry += dt;\n  for (let h = stepLength(p); S.carry >= h; h = stepLength(p)) {\n    step(p, v, a, h);\n    S.carry -= h;\n    S.clock += h;\n    trace(S, S.clock);\n  }\n}\n\n// The exact eight, sampled over one period, as a faint line under the tails.\nfunction drawReference(S) {\n  const p = Float64Array.from([X1, Y1, -X1, -Y1, 0, 0]);\n  const v = Float64Array.from([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]), a = new Float64Array(6);\n  const n = 1600, h = PERIOD / n, ref = S.ref;\n  for (let s = 0; s \u003c n; s++) {\n    const bx = toCol(p[1]), by = toRow(p[0]);\n    for (let y = max(0, floor(by - 1)); y \u003c= min(H - 1, floor(by + 1)); y++)\n      for (let x = max(0, floor(bx - 1)); x \u003c= min(W - 1, floor(bx + 1)); x++) {\n        const c = cl(1.1 - hypot(x + 0.5 - bx, y + 0.5 - by), 0, 1);\n        if (c > ref[y * W + x]) ref[y * W + x] = c;\n      }\n    step(p, v, a, h);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.33, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trail = cl(k[2], 0.33, 2);\n  S.kick = cl(k[3], 0, 1);\n  if (!S.begun) {\n    restart(S);\n    S.begun = true;\n  }\n  // A turned Kick starts the three again once the knob has rested 0.4 s,\n  // fading the old orbit out over 0.5 s and the new one in.\n  if (abs(S.kick - S.kickSet) > 0.004) {\n    S.kickWait += d;\n    if (S.kickWait > 0.4 && S.phase === 0) S.phase = -1;\n  } else S.kickWait = 0;\n  if (input.btnPressed && input.btnPressed[0] && S.phase === 0) {\n    const pair = S.nudges++ % 3;\n    push(S, pair, (pair + 1) % 3, max(0.05, epsOf(S.kick)));\n  }\n  // At Speed 2 the orbit's clock runs 1 unit a second.\n  advance(S, d * S.speed * 0.5);\n  // Off the panel: a body more than 1.35 from the centre.\n  if (farthest(S.p) > 1.35) S.out += d;\n  else S.out = max(0, S.out - d);\n  if ((S.out > 3 || farthest(S.p) > 8) && S.phase === 0) S.phase = -1;\n  if (S.phase \u003c 0) {\n    S.fade -= d / 0.5;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      restart(S);\n      S.kickWait = 0;\n      S.phase = 1;\n    }\n  } else if (S.phase > 0) {\n    S.fade += d / 0.5;\n    if (S.fade >= 1) {\n      S.fade = 1;\n      S.phase = 0;\n    }\n  }\n}\n\nfunction palette(S) {\n  for (let k = 0; k \u003c 3; k++) {\n    const h = S.hue + HUE0 + k / 3, hh = h - floor(h);\n    // Orange to yellow-green: paler and kept at full value, so a tail never\n    // reads brown or olive.\n    const warm = sm(0.02, 0.08, hh) * (1 - sm(0.2, 0.27, hh));\n    hsv(h, 0.85 - 0.3 * warm, 1, S.col[k]);\n    S.warm[k] = warm;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { tv, td, ref, col, clock, fade } = S, L = S.trail * PERIOD;\n  const bx = [0, 0, 0], by = [0, 0, 0];\n  for (let k = 0; k \u003c 3; k++) {\n    bx[k] = toCol(S.p[2 * k + 1]);\n    by[k] = toRow(S.p[2 * k]);\n  }\n  const ord = [0, 1, 2], ag = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The faint reference eight, then the tails painted oldest first, so\n      // the newest pass lies on top.\n      let r = 0.13 * ref[p], g = 0.13 * ref[p], b = 0.16 * ref[p];\n      for (let k = 0; k \u003c 3; k++) ag[k] = clock - tv[k * N + p];\n      ord[0] = 0;\n      ord[1] = 1;\n      ord[2] = 2;\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      if (ag[ord[1]] \u003c ag[ord[2]]) [ord[1], ord[2]] = [ord[2], ord[1]];\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      for (let n = 0; n \u003c 3; n++) {\n        const k = ord[n], age = ag[k], d = td[k * N + p], al = tailCover(age, d, L) * fade;\n        if (al \u003c= 0) continue;\n        const c = col[k], lv = 1 - (1 - tailBright(age)) * (1 - 0.8 * S.warm[k]), wh = 0.5 * (1 - age / L) ** 8 * cl(1 - d / HW, 0, 1);\n        r += ((c[0] + (1 - c[0]) * wh) * lv - r) * al;\n        g += ((c[1] + (1 - c[1]) * wh) * lv - g) * al;\n        b += ((c[2] + (1 - c[2]) * wh) * lv - b) * al;\n      }\n      // The bodies: a white core in a glow of the body's colour.\n      for (let k = 0; k \u003c 3; k++) {\n        const dx = x + 0.5 - bx[k], dy = y + 0.5 - by[k], d2 = dx * dx + dy * dy;\n        if (d2 >= GLOW * GLOW) continue;\n        const dd = sqrt(d2), halo = 0.7 * fade * (1 - dd / GLOW) ** 1.5, core = sm(2.8, 1.4, dd) * fade, c = col[k];\n        r = 1 - (1 - r) * (1 - c[0] * halo);\n        g = 1 - (1 - g) * (1 - c[1] * halo);\n        b = 1 - (1 - b) * (1 - c[2] * halo);\n        r += (1 - r) * core;\n        g += (1 - g) * core;\n        b += (1 - b) * core;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n\n","layer":{"id":"layer-figure-eight-orbit","type":"code","name":"figure-eight-orbit","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Figure-Eight Orbit\n// Family:  physics\n// Idea:    Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: figure-eight solution of the three-body problem (Cris Moore, 1993; Alain Chenciner and Richard Montgomery, 2000), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1\n//\n// Knob 1: Hue. Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive.\n// Knob 2: Speed. At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2.\n// Knob 3: Trail. How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2.\n// Knob 4: Kick. Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest.\n// Buttons: K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, abs, hypot, round, cbrt, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Chenciner and Montgomery's starting values, G = m = 1: body 3 at the\n// crossing, bodies 1 and 2 opposite each other, both moving at half body 3's\n// velocity the other way. The period is 6.32591398.\nconst X1 = 0.97000436, Y1 = -0.24308753, VX3 = -0.93240737, VY3 = -0.86473146, PERIOD = 6.32591398;\n// Orbit to panel: the eight's long axis down the panel, SC LEDs to the unit.\n// It reaches 1.081 along that axis and 0.358 across, so 115 by 38 LEDs.\nconst SC = 53, CX = 31.5, CY = 63.5;\n// Under RS the pull is that of a uniform ball, so a close pass of a binary\n// stays finite. The eight never comes closer than 0.69, so it never feels it.\nconst RS = 0.05;\n// Step in orbit time: Yoshida's fourth-order leapfrog at H0, shortened by\n// (r / 0.5)^1.5 when two bodies are closer than 0.5.\nconst H0 = 1 / 128;\nconst YW1 = 1 / (2 - cbrt(2)), YW0 = -cbrt(2) * YW1;\nconst YC = [YW1 / 2, (YW0 + YW1) / 2, (YW0 + YW1) / 2, YW1 / 2], YD = [YW1, YW0, YW1];\n// Tail half-width at the head, in LEDs, and how far a body glows.\nconst HW = 3.6, GLOW = 6;\n// Opening hues: azure, rose, lime.\nconst HUE0 = 0.58;\n// Longest tail, in periods, and so the history the pattern keeps.\nconst LMAX = 2;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trail: 0.33, kick: 0, kickSet: -1, kickWait: 0, begun: false,\n    p: new Float64Array(6), v: new Float64Array(6), a: new Float64Array(6),\n    clock: 0, carry: 0, out: 0, fade: 1, phase: 0, nudges: 0,\n    // Per body and LED: when the body last passed (orbit time) and how close.\n    tv: new Float32Array(3 * N).fill(-1e9), td: new Float32Array(3 * N).fill(99),\n    lx: new Float32Array(3), ly: new Float32Array(3), warm: [0, 0, 0],\n    ref: new Float32Array(N), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n  drawReference(params.s);\n}\n\n// Pull on each body; under RS the force grows linearly from the centre.\nfunction accel(p, a) {\n  a.fill(0);\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) {\n      const dx = p[2 * j] - p[2 * i], dy = p[2 * j + 1] - p[2 * i + 1], r = sqrt(dx * dx + dy * dy), q = max(r, RS);\n      const f = 1 / (q * q * q);\n      a[2 * i] += dx * f;\n      a[2 * i + 1] += dy * f;\n      a[2 * j] -= dx * f;\n      a[2 * j + 1] -= dy * f;\n    }\n}\n\nfunction closest(p) {\n  let m = 1e9;\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) m = min(m, hypot(p[2 * j] - p[2 * i], p[2 * j + 1] - p[2 * i + 1]));\n  return m;\n}\n\n// One step of Yoshida's fourth-order symplectic integrator: three leapfrogs\n// of h w1, h w0, h w1, with w0 negative.\nfunction step(p, v, a, h) {\n  for (let s = 0; s \u003c 3; s++) {\n    for (let i = 0; i \u003c 6; i++) p[i] += YC[s] * h * v[i];\n    accel(p, a);\n    for (let i = 0; i \u003c 6; i++) v[i] += YD[s] * h * a[i];\n  }\n  for (let i = 0; i \u003c 6; i++) p[i] += YC[3] * h * v[i];\n}\n\nconst stepLength = (p) => H0 * min(1, (max(closest(p), RS) / 0.5) ** 1.5);\n\n// The kick: bodies i and j pushed apart along the line between them, each\n// by eps, and then every velocity scaled back to the kinetic energy before\n// the push. Positions do not move, so the energy stays what it was; the\n// momentum stays zero and the angular momentum stays zero too, as for the\n// eight itself, so only the shape of the motion changes.\nfunction push(S, i, j, eps) {\n  const { p, v } = S, dx = p[2 * i] - p[2 * j], dy = p[2 * i + 1] - p[2 * j + 1], r = hypot(dx, dy) || 1;\n  let k0 = 0, k1 = 0;\n  for (let n = 0; n \u003c 6; n++) k0 += v[n] * v[n];\n  v[2 * i] += (eps * dx) / r;\n  v[2 * i + 1] += (eps * dy) / r;\n  v[2 * j] -= (eps * dx) / r;\n  v[2 * j + 1] -= (eps * dy) / r;\n  for (let n = 0; n \u003c 6; n++) k1 += v[n] * v[n];\n  const f = sqrt(k0 / k1);\n  for (let n = 0; n \u003c 6; n++) v[n] *= f;\n}\n\n// Kick 0..1 to eps: nothing up to 0.06, then up to 0.45.\nconst epsOf = (k) => 0.45 * (max(0, k - 0.06) / 0.94) ** 1.2;\n\nfunction initial(S) {\n  const { p, v } = S;\n  p.set([X1, Y1, -X1, -Y1, 0, 0]);\n  v.set([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]);\n  push(S, 0, 1, epsOf(S.kick));\n  S.kickSet = S.kick;\n}\n\nconst toCol = (y) => CX + y * SC, toRow = (x) => CY - x * SC;\n\n// A tail at an LED: age a in orbit time, distance d in LEDs, tail length L.\n// It narrows from HW at the head to nothing at its end, and dims from full\n// at the head to 0.6 a third of a period behind it and 0.55 after that.\nfunction tailCover(a, d, L) {\n  if (a \u003c 0 || a >= L) return 0;\n  return cl((HW + 0.5) * (1 - a / L) ** 1.5 - d + 0.5, 0, 1);\n}\nconst tailBright = (a) => 0.55 + 0.45 * exp(-a / (0.15 * PERIOD));\nconst tailValue = (a, d, L) => tailCover(a, d, L) * tailBright(a);\n\n// Mark the LEDs round body k at orbit time t. Within one pass the closest\n// approach is kept; a later pass takes the LED when it would light it more.\nfunction deposit(S, k, t) {\n  const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]), R = HW + 1.5, L = LMAX * PERIOD;\n  if (bx \u003c -R || bx > W + R || by \u003c -R || by > H + R) return;\n  const o = k * N, tv = S.tv, td = S.td;\n  for (let y = max(0, floor(by - R)); y \u003c= min(H - 1, floor(by + R)); y++)\n    for (let x = max(0, floor(bx - R)); x \u003c= min(W - 1, floor(bx + R)); x++) {\n      const d = hypot(x + 0.5 - bx, y + 0.5 - by);\n      if (d > R) continue;\n      const q = o + y * W + x, t0 = tv[q];\n      if (abs(t - t0) \u003c 0.3) {\n        if (d \u003c td[q]) {\n          tv[q] = t;\n          td[q] = d;\n        }\n        continue;\n      }\n      const ref = max(t, t0), vNew = tailValue(ref - t, d, L), vOld = tailValue(ref - t0, td[q], L);\n      if (vNew > vOld || (vNew === vOld && t > t0)) {\n        tv[q] = t;\n        td[q] = d;\n      }\n    }\n}\n\n// Deposit body k if it has moved half an LED since it last did.\nfunction trace(S, t) {\n  for (let k = 0; k \u003c 3; k++) {\n    const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]);\n    if (hypot(bx - S.lx[k], by - S.ly[k]) \u003c 0.5) continue;\n    S.lx[k] = bx;\n    S.ly[k] = by;\n    deposit(S, k, t);\n  }\n}\n\nconst farthest = (p) => max(hypot(p[0], p[1]), hypot(p[2], p[3]), hypot(p[4], p[5]));\n\n// Start (or start again): the starting line-up with the current kick, and\n// its own past drawn behind it by running the orbit backward for up to LMAX\n// periods, or until a body would come in from off the panel.\nfunction restart(S) {\n  S.tv.fill(-1e9);\n  S.td.fill(99);\n  S.clock = 0;\n  S.carry = 0;\n  S.out = 0;\n  initial(S);\n  const { p, v, a } = S;\n  const p0 = Float64Array.from(p), v0 = Float64Array.from(v);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  let t = 0;\n  while (t > -LMAX * PERIOD && farthest(p) \u003c 1.4) {\n    trace(S, t);\n    const h = stepLength(p);\n    step(p, v, a, -h);\n    t -= h;\n  }\n  p.set(p0);\n  v.set(v0);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  trace(S, 0);\n}\n\n// Whole steps only, the remainder carried to the next frame, so at the\n// opening the step never changes and the integrator stays symplectic.\nfunction advance(S, dt) {\n  const { p, v, a } = S;\n  S.carry += dt;\n  for (let h = stepLength(p); S.carry >= h; h = stepLength(p)) {\n    step(p, v, a, h);\n    S.carry -= h;\n    S.clock += h;\n    trace(S, S.clock);\n  }\n}\n\n// The exact eight, sampled over one period, as a faint line under the tails.\nfunction drawReference(S) {\n  const p = Float64Array.from([X1, Y1, -X1, -Y1, 0, 0]);\n  const v = Float64Array.from([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]), a = new Float64Array(6);\n  const n = 1600, h = PERIOD / n, ref = S.ref;\n  for (let s = 0; s \u003c n; s++) {\n    const bx = toCol(p[1]), by = toRow(p[0]);\n    for (let y = max(0, floor(by - 1)); y \u003c= min(H - 1, floor(by + 1)); y++)\n      for (let x = max(0, floor(bx - 1)); x \u003c= min(W - 1, floor(bx + 1)); x++) {\n        const c = cl(1.1 - hypot(x + 0.5 - bx, y + 0.5 - by), 0, 1);\n        if (c > ref[y * W + x]) ref[y * W + x] = c;\n      }\n    step(p, v, a, h);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.33, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trail = cl(k[2], 0.33, 2);\n  S.kick = cl(k[3], 0, 1);\n  if (!S.begun) {\n    restart(S);\n    S.begun = true;\n  }\n  // A turned Kick starts the three again once the knob has rested 0.4 s,\n  // fading the old orbit out over 0.5 s and the new one in.\n  if (abs(S.kick - S.kickSet) > 0.004) {\n    S.kickWait += d;\n    if (S.kickWait > 0.4 && S.phase === 0) S.phase = -1;\n  } else S.kickWait = 0;\n  if (input.btnPressed && input.btnPressed[0] && S.phase === 0) {\n    const pair = S.nudges++ % 3;\n    push(S, pair, (pair + 1) % 3, max(0.05, epsOf(S.kick)));\n  }\n  // At Speed 2 the orbit's clock runs 1 unit a second.\n  advance(S, d * S.speed * 0.5);\n  // Off the panel: a body more than 1.35 from the centre.\n  if (farthest(S.p) > 1.35) S.out += d;\n  else S.out = max(0, S.out - d);\n  if ((S.out > 3 || farthest(S.p) > 8) && S.phase === 0) S.phase = -1;\n  if (S.phase \u003c 0) {\n    S.fade -= d / 0.5;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      restart(S);\n      S.kickWait = 0;\n      S.phase = 1;\n    }\n  } else if (S.phase > 0) {\n    S.fade += d / 0.5;\n    if (S.fade >= 1) {\n      S.fade = 1;\n      S.phase = 0;\n    }\n  }\n}\n\nfunction palette(S) {\n  for (let k = 0; k \u003c 3; k++) {\n    const h = S.hue + HUE0 + k / 3, hh = h - floor(h);\n    // Orange to yellow-green: paler and kept at full value, so a tail never\n    // reads brown or olive.\n    const warm = sm(0.02, 0.08, hh) * (1 - sm(0.2, 0.27, hh));\n    hsv(h, 0.85 - 0.3 * warm, 1, S.col[k]);\n    S.warm[k] = warm;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { tv, td, ref, col, clock, fade } = S, L = S.trail * PERIOD;\n  const bx = [0, 0, 0], by = [0, 0, 0];\n  for (let k = 0; k \u003c 3; k++) {\n    bx[k] = toCol(S.p[2 * k + 1]);\n    by[k] = toRow(S.p[2 * k]);\n  }\n  const ord = [0, 1, 2], ag = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The faint reference eight, then the tails painted oldest first, so\n      // the newest pass lies on top.\n      let r = 0.13 * ref[p], g = 0.13 * ref[p], b = 0.16 * ref[p];\n      for (let k = 0; k \u003c 3; k++) ag[k] = clock - tv[k * N + p];\n      ord[0] = 0;\n      ord[1] = 1;\n      ord[2] = 2;\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      if (ag[ord[1]] \u003c ag[ord[2]]) [ord[1], ord[2]] = [ord[2], ord[1]];\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      for (let n = 0; n \u003c 3; n++) {\n        const k = ord[n], age = ag[k], d = td[k * N + p], al = tailCover(age, d, L) * fade;\n        if (al \u003c= 0) continue;\n        const c = col[k], lv = 1 - (1 - tailBright(age)) * (1 - 0.8 * S.warm[k]), wh = 0.5 * (1 - age / L) ** 8 * cl(1 - d / HW, 0, 1);\n        r += ((c[0] + (1 - c[0]) * wh) * lv - r) * al;\n        g += ((c[1] + (1 - c[1]) * wh) * lv - g) * al;\n        b += ((c[2] + (1 - c[2]) * wh) * lv - b) * al;\n      }\n      // The bodies: a white core in a glow of the body's colour.\n      for (let k = 0; k \u003c 3; k++) {\n        const dx = x + 0.5 - bx[k], dy = y + 0.5 - by[k], d2 = dx * dx + dy * dy;\n        if (d2 >= GLOW * GLOW) continue;\n        const dd = sqrt(d2), halo = 0.7 * fade * (1 - dd / GLOW) ** 1.5, core = sm(2.8, 1.4, dd) * fade, c = col[k];\n        r = 1 - (1 - r) * (1 - c[0] * halo);\n        g = 1 - (1 - g) * (1 - c[1] * halo);\n        b = 1 - (1 - b) * (1 - c[2] * halo);\n        r += (1 - r) * core;\n        g += (1 - g) * core;\n        b += (1 - b) * core;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2."},{"name":"Trail","min":0.33,"max":2,"about":"How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2."},{"name":"Kick","min":0,"max":1,"about":"Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest."}],"start":[0,2,0.33,0.06],"measures":{"motion":0.2677,"detail":0.0329,"edges":0.6811,"complexity":0.5694,"coverage":0.1522,"colour":0.2009,"drift":0.1349},"knobResponse":[0.0772,0.0891,0.0607,0.1032]},{"slug":"final-approach","title":"Final Approach","family":"flight","round":23,"note":"밤에 내려앉는 여객기 조종석에서 앞을 봐요. 활주로 등과 진입등이 도시 불빛이 깔린 지평선 아래로 모이고, 래빗 섬광등이 1초에 두 번 활주로 쪽으로 달려가요. 왼쪽 PAPI 가 흰 둘 빨강 둘을 보이다가, 플레어와 접지 뒤에는 중심선 등이 발밑으로 쏟아져 지나가요. K1 을 누르면 복행해요.","idea":"From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.","buttons":"K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.","code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","layer":{"id":"layer-final-approach","type":"code","name":"final-approach","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower."},{"name":"Weather","min":0,"max":3,"about":"A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late."},{"name":"Crosswind","min":-1,"max":1,"about":"The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare."}],"start":[0,2,0,0.06],"measures":{"motion":1.2895,"detail":0.0365,"edges":0.3949,"complexity":1.2312,"coverage":0.4908,"colour":0.0984,"drift":0.1085},"knobResponse":[0.0373,0.0632,0.3041,0.0884]},{"slug":"fire","title":"Fire","family":"sim","round":1,"note":"데모신의 불이에요. 바닥의 열이 올라가며 식고, K1 을 돌리면 나무 불에서 가스 불, 붕소 불까지 색이 바뀌어요.","idea":"The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.","buttons":"K1 tap drops a log on, and the fire flares and throws sparks.","code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-fire","type":"code","name":"fire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"What is burning: wood, then potassium lilac, gas blue, copper teal and boron green."},{"name":"Height","min":0.6,"max":4,"about":"How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the flames stand up; either way they lean and the gusts come with it."},{"name":"Crackle","min":0,"max":1,"about":"Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower."}],"start":[0,2,0,0.06],"measures":{"motion":0.9647,"detail":0.0218,"edges":0.1201,"complexity":0.8283,"coverage":0.5059,"colour":0.4964,"drift":0.2161},"knobResponse":[0.3207,0.2786,0.0846,0.0537]},{"slug":"fireflies","title":"Fireflies","family":"insect","round":16,"note":"풀밭 위 반딧불이 200마리가 따로 깜박이다가 서로의 깜박임을 보고 박자를 맞춰, 한꺼번에 깜박이는 무리와 어두운 쉼이 번갈아 와요. K4 가 결합의 세기이고, K1 을 누르면 손전등이 지나가며 박자를 흩어요.","idea":"Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.","buttons":"K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.","code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","layer":{"id":"layer-fireflies","type":"code","name":"fireflies","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Moon","min":0,"max":1,"about":"At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon."},{"name":"Pace","min":0.5,"max":4,"about":"At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it."},{"name":"Fireflies","min":200,"max":480,"about":"How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge."},{"name":"Coupling","min":0,"max":0.25,"about":"How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst."}],"start":[0,2,200,0.06],"measures":{"motion":0.3823,"detail":0.021,"edges":0.1814,"complexity":0.404,"coverage":0.3382,"colour":0.0994,"drift":0.0945},"knobResponse":[0.0808,0.0516,0.0623,0.0425]},{"slug":"flame-test","title":"Flame Test","family":"chemistry","round":22,"note":"분젠 버너의 파란 불꽃에 손이 니크롬 고리를 넣으면 불꽃이 그 염의 색으로 터져요. 구리는 청록, 나트륨은 짙은 노랑으로 타고 알갱이가 튀다가 파랗게 돌아오면, 고리를 염산에 씻어 이름표 붙은 다음 시계접시로 가요.","idea":"On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.","buttons":"K1 tap sends the loop to the next salt now.","code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-flame-test","type":"code","name":"flame-test","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salt","min":0,"max":8,"about":"Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker."},{"name":"Room","min":0,"max":1,"about":"The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand."},{"name":"Air","min":-1,"max":1,"about":"The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0593,"detail":0.0588,"edges":0.4458,"complexity":1.5027,"coverage":0.9519,"colour":0.1298,"drift":0.0434},"knobResponse":[0.0735,0.0457,0.2666,0.1163]},{"slug":"flip-clock","title":"Flip Clock","family":"time","round":2,"note":"세워 둔 넘김 시계예요. 위에 시, 아래에 분 카드가 있고, 바뀔 때마다 옛 카드의 윗장이 앞으로 넘어가 그 뒷면이 새 카드의 아랫장으로 내려앉아요.","idea":"A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.","buttons":"K1 tap sets the clock back to 09:58, and the flaps spin round to get there.","code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","layer":{"id":"layer-flip-clock","type":"code","name":"flip-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"The colour of the digits; the dark cards take a little of it."},{"name":"Rate","min":0,"max":3,"about":"From real time at 0 to a minute every second at 3, a minute every four seconds where it starts."},{"name":"Seconds","min":0,"max":1,"about":"Turn it up and a seconds card joins below, growing until all three are one size."},{"name":"Light","min":0,"max":1,"about":"How hard the light falls on the cards, from flat to a deep shadow under each falling flap."}],"start":[0,2,0,0.06],"measures":{"motion":0.0975,"detail":0.0443,"edges":0.7774,"complexity":0.213,"coverage":0.7633,"colour":0.1458,"drift":0.128},"knobResponse":[0.0983,0.1045,0.1894,0.032]},{"slug":"flipdot","title":"Flipdot","family":"type","round":22,"note":"버스 앞에 다는 형광 노랑 플립 디스크 행선판을 세워 놓았어요. 위 칸에 노선 번호, 아래 칸에 행선지가 7줄 점 글꼴로 서고, 쪽이 바뀔 때마다 디스크가 한 줄씩 넘어가며 판 전체를 노랗게 뒤집었다가 반전된 경유지 쪽을 써요. 넘어가는 동안의 디스크는 가는 모서리로 보여요.","idea":"A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.","buttons":"K1 tap ends the page now and the next wave starts.","code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","layer":{"id":"layer-flipdot","type":"code","name":"flipdot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Disc","min":0,"max":1,"about":"The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second."},{"name":"Route","min":0,"max":3,"about":"Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall."},{"name":"Wipe","min":0,"max":3,"about":"How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3."}],"start":[0,2,0,0.06],"measures":{"motion":0.1111,"detail":0.2452,"edges":0.47,"complexity":0.3774,"coverage":0.3252,"colour":0.3924,"drift":0.2652},"knobResponse":[0.0968,0.1699,0.0516,0.048]},{"slug":"flock","title":"Flock","family":"particle","round":1,"note":"새 90마리가 가까운 이웃만 보고 날아요. 보이지 않는 매가 무리를 쫓아 자꾸 갈라놓아요.","idea":"Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.","buttons":"K1 tap sends the unseen hawk diving into the flock.","code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","layer":{"id":"layer-flock","type":"code","name":"flock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flock's colours around the wheel; birds flying up and down sit either side of it."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the birds fly, and so how long their streaks are."},{"name":"Scatter","min":-1,"max":1,"about":"Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats."},{"name":"Trail","min":0.3,"max":2.5,"about":"How long a streak lasts; long trails leave the flock's recent path woven across the panel."}],"start":[0,2,0,0.3],"measures":{"motion":0.7954,"detail":0.0794,"edges":0.4039,"complexity":1.2562,"coverage":0.2957,"colour":0.1808,"drift":0.1151},"knobResponse":[0.0754,0.1076,0.0932,0.1053]},{"slug":"fluoroscope","title":"Fluoroscope","family":"body","round":27,"note":"형광 투시 화면의 어두운 판 위에서 해골이 러닝머신을 옆모습으로 걸어요. 정수리에서 발가락까지 128줄을 다 쓰고, 먼 쪽 다리와 팔은 흐리며 움직이는 뼈 뒤에 인광이 잠깐 남아요. K3 은 걸음을 두 발이 뜨는 달리기로 바꾸고, 누르면 돌아서서 앞모습으로 손을 흔들어요.","idea":"On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.","buttons":"K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.","code":"// ===== Patternflow pattern =====\n// Title:   Fluoroscope\n// Family:  body\n// Idea:    On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after cineradiography, the X-ray motion pictures of the 1950s\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1\n//\n// Knob 1: Screen. The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour.\n// Knob 2: Speed. The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower.\n// Knob 3: Gait. A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps.\n// Knob 4: Dose. The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body.\n// Buttons: K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, sqrt, exp, floor, ceil, atan2, hypot, PI } = Math;\nconst D = PI / 180;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// A figure 114 LEDs tall: limb lengths and half spans of hips and shoulders.\n// FLOOR is the top of the belt. Bones are drawn half again as thick as life.\nconst LT = 27.5, LS = 27.5, LU = 20.5, LF = 16, HZ = 5.2, SZ = 12.4, FLOOR = 122.5;\n\n// For the walk (toe-off at 60%) and then the run (toe-off at 40%), the thigh's\n// angle from vertical and the flexion of knee and ankle, in degrees every 10%\n// of a stride from heel strike, after clinical gait curves.\nconst GT = [\n  [24, 20, 12, 3, -6, -14, -10, 6, 19, 25],\n  [4, 16, 18, 10, 5, 14, 38, 60, 45, 15],\n  [0, -5, 3, 6, 8, 0, -16, -10, -2, 1],\n  [30, 18, 5, -5, -12, -6, 12, 30, 42, 40],\n  [20, 38, 40, 28, 18, 50, 90, 104, 76, 36],\n  [6, 16, 20, 10, -18, -14, -2, 6, 8, 6],\n];\n// A periodic Catmull-Rom spline through a row.\nfunction curve(r, p) {\n  const f = (p - floor(p)) * 10, i = floor(f) % 10, u = f - floor(f);\n  const a = r[(i + 9) % 10], b = r[i], c = r[(i + 1) % 10], d = r[(i + 2) % 10];\n  return b + 0.5 * u * (c - a + u * (2 * a - 5 * b + 4 * c - d + u * (3 * (b - c) + d - a)));\n}\nconst ang = (k, q, g) => mix(curve(GT[k], q), curve(GT[k + 3], q), g);\n// The jump, keyed in seconds: thigh, knee, ankle, shoulder, elbow, lean.\nconst JT = [0, 0.3, 0.46, 0.7, 0.9, 1.1, 1.5];\nconst JK = [\n  [0, 50, 2, 30, 10, 42, 0],\n  [0, 95, 4, 58, 16, 76, 0],\n  [0, 24, -34, -18, -6, 20, 0],\n  [0, -40, 58, 50, 25, 10, 0],\n  [10, 15, 45, 50, 35, 30, 10],\n  [0, 24, 2, 4, 8, 20, 0],\n];\nfunction key(r, u) {\n  let i = 0;\n  while (i \u003c 5 && u > JT[i + 1]) i++;\n  return mix(r[i], r[i + 1], sm(JT[i], JT[i + 1], u));\n}\n\n// The spine's curve in the trunk's frame (x forward, y down from the hips).\nconst CY = [-41, -36.5, -32.5, -28, -23.5, -19, -15.5, -11.5, -7.5, -4.5];\nconst CX = [-2.2, -1.9, -3, -4.6, -5.3, -4.8, -3.8, -2.4, -2, -2.8];\nfunction spx(y) {\n  let i = 0;\n  while (i \u003c 8 && y > CY[i + 1]) i++;\n  return mix(CX[i], CX[i + 1], (y - CY[i]) / (CY[i + 1] - CY[i]));\n}\n// 24 vertebral bodies from the neck down: x, y, half sizes, tilt.\nconst VT = new Float64Array(144);\nfor (let v = 0, y = -40.8; v \u003c 24; v++) {\n  const k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2, h = [1.25, 1.3, 2.3][k], c = y + h / 2;\n  VT.set([spx(c), c, [1.3, 1.6, 2.2][k], h * 0.4, [1.6, 1.9, 2.6][k], -atan2(spx(c + 0.5) - spx(c - 0.5), 1)], v * 6);\n  y += h;\n}\n// Seven ribs stand for twelve. Each row gives the half depth and width of the\n// cage, the drop of the front end and its sag. The last number is how far\n// round the bone goes before the cartilage, which the beam passes through.\nconst RIB = [\n  [4, 5.5, 4, 0.6, 0.95], [5.4, 8.2, 6.2, 0.9, 0.92], [6.1, 10, 7.6, 1.1, 0.88], [6.6, 11.2, 8.4, 1.2, 0.82],\n  [6.7, 11.6, 8.6, 1.2, 0.75], [6.5, 11.4, 8.2, 1.1, 0.64], [6, 10.6, 7, 1, 0.5],\n];\n// The hip bone as lines split by NaN: the iliac crest, the front border down\n// to the socket, the back border, the brim from sacrum to pubis.\nconst IL = [\n  -6.6, -5.5, 4, -5.6, -9.4, 6.2, -3.6, -11.6, 7.8, -1, -11.8, 8.8, 1.8, -10.4, 9.2, 3.8, -8, 9, 4.2, -7.4, 9, 3, -3.6, 7.5, 1.8, -2.6, 6,\n  NaN, 0, 0, -6.6, -5.5, 4, -5.4, -2.6, 4.6, -4.6, -1.2, 4.8, -3.2, 1.2, 4.2, -2.8, 4, 4.2, -2.4, 6.4, 4.2,\n  NaN, 0, 0, -4.2, -3.4, 3.6, -1.6, -1.6, 4.4, 0.5, -1, 4.6, 2.6, 0.6, 3.6, 4.4, 3, 1.2,\n];\n// Gas pockets in the gut: x, y, z, size.\nconst GAS = [2.6, -13.6, -5, 1.4, 3.2, -7, 3, 1, -0.4, -5, -2.4, 0.9, 4.4, -3.6, -4.4, 0.85];\n// Fingers: offset across the palm and length; the share of each phalanx.\nconst FO = [1.25, 0.42, -0.42, -1.2], FLN = [5.4, 6, 5.6, 4.6], PHL = [0.45, 0.32, 0.23];\n// Phosphors: the glow and its afterglow.\nconst PAL = [\n  [0.45, 0.7, 1, 0.35, 1, 0.55],\n  [0.3, 1, 0.4, 0.15, 0.7, 0.25],\n  [1, 0.62, 0.18, 0.9, 0.3, 0.05],\n  [0.72, 0.38, 1, 0.35, 0.3, 1],\n];\n\n// Bone and flesh add up apart as path length along the beam; G is afterglow.\nconst B = new Float32Array(N), T = new Float32Array(N), G = new Float32Array(N), GB = new Float32Array(N);\nconst LA = new Float64Array(6), AR = new Float64Array(4), PC = new Float64Array(6), MO = new Float64Array(6), MI = new Float64Array(6);\nconst FR = new Float64Array(13), AV = new Float64Array(9);\nlet TG = B;\nlet PSI = 0, CP = 1, SP = 0, OX = 25, OY = 63, LAM = 0, LC = 1, LSN = 0;\nlet HX = 0, HY = 0, ETA = 0, HC = 1, HS = 0, JA = 0, JC = 1, JS = 0;\nlet gx = 0, gy = 0, gz = 0, qx = 0, qy = 0, qz = 0, FROT = 0;\nlet e1x = 1, e1y = 0, e1z = 0, e2x = 0, e2y = 1, e2z = 0, e3x = 0, e3z = 1;\n\n// Frames: body, with x forward and y down, trunk, head, jaw, and a limb's\n// own, whose first axis runs along the bone.\nconst FB = (x, y, z) => ((gx = x), (gy = y), (gz = z), (FROT = 0));\nconst FT = (x, y, z) => ((gx = x * LC - y * LSN), (gy = x * LSN + y * LC), (gz = z), (FROT = LAM));\nconst FH = (x, y, z) => ((gx = HX + x * HC - y * HS), (gy = HY + x * HS + y * HC), (gz = z), (FROT = ETA));\nconst FL = (u, v, w) => (\n  (gx = FR[0] + FR[3] * u + FR[6] * v + FR[9] * w), (gy = FR[1] + FR[4] * u + FR[7] * v + FR[10] * w), (gz = FR[2] + FR[5] * u + FR[8] * v + FR[11] * w), (FROT = FR[12])\n);\nfunction FJ(x, y, z) {\n  const dx = x - 1.3, dy = y + 2.6;\n  FH(1.3 + dx * JC - dy * JS, -2.6 + dx * JS + dy * JC, z);\n  FROT += JA;\n}\nfunction P() {\n  qx = OX + gx * CP - gz * SP;\n  qy = OY + gy;\n  qz = gx * SP + gz * CP;\n}\n\n// A tapered rod, hollow when sh > 0: the chord through a tube of cortex.\nfunction tube(ax, ay, bx, by, ra, rb, w, sh) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6, m = max(ra, rb) + 0.8;\n  const x0 = max(0, ceil(min(ax, bx) - m)), x1 = min(W - 1, floor(max(ax, bx) + m));\n  const y0 = max(0, ceil(min(ay, by) - m)), y1 = min(H - 1, floor(max(ay, by) + m));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const ux = x - ax, uy = y - ay, t = cl((ux * dx + uy * dy) / l2, 0, 1);\n      const ex = ux - t * dx, ey = uy - t * dy, d2 = ex * ex + ey * ey, R = ra + (rb - ra) * t + 0.3, o = R * R - d2;\n      if (o \u003c= 0) continue;\n      const ri = R - 0.85, i = ri * ri - d2;\n      TG[y * W + x] += 2 * w * (sqrt(o) - (sh && ri > 0 && i > 0 ? sh * sqrt(i) : 0));\n    }\n}\n// An ellipsoid seen along the beam: its quadric, and the chord through it.\nfunction quad(M, a, b, c) {\n  const A = 1 / (a * a), Bq = 1 / (b * b), C = 1 / (c * c);\n  M[0] = e1x * e1x * A + e2x * e2x * Bq + e3x * e3x * C;\n  M[1] = e1x * e1y * A + e2x * e2y * Bq;\n  M[2] = e1y * e1y * A + e2y * e2y * Bq;\n  M[3] = e1x * e1z * A + e2x * e2z * Bq + e3x * e3z * C;\n  M[4] = e1y * e1z * A + e2y * e2z * Bq;\n  M[5] = e1z * e1z * A + e2z * e2z * Bq + e3z * e3z * C;\n}\nfunction chord(M, u, v) {\n  const b = M[3] * u + M[4] * v, d = b * b - M[5] * (M[0] * u * u + 2 * M[1] * u * v + M[2] * v * v - 1);\n  return d > 0 ? (2 * sqrt(d)) / M[5] : 0;\n}\n// Tilted th in the side plane, turned yaw about the vertical. With a shell t\n// the inside counts k less, so a skull's edge glows brighter than its face.\nfunction ell(cx, cy, a, b, c, th, yaw, w, t, k) {\n  (a += 0.3), (b += 0.3), (c += 0.3);\n  const ph = PSI + yaw, cp = cos(ph), sp = sin(ph), ct = cos(th), st = sin(th);\n  (e1x = ct * cp), (e1y = st), (e1z = ct * sp), (e2x = -st * cp), (e2y = ct), (e2z = -st * sp), (e3x = -sp), (e3z = cp);\n  quad(MO, a, b, c);\n  if (t) quad(MI, a - t, b - t, c - t);\n  const rx = hypot(e1x * a, e2x * b, e3x * c) + 0.5, ry = hypot(e1y * a, e2y * b) + 0.5;\n  const x0 = max(0, ceil(cx - rx)), x1 = min(W - 1, floor(cx + rx)), y0 = max(0, ceil(cy - ry)), y1 = min(H - 1, floor(cy + ry));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      let s = chord(MO, x - cx, y - cy);\n      if (s > 0 && t) s -= k * chord(MI, x - cx, y - cy);\n      if (s > 0) TG[y * W + x] += s * w;\n    }\n}\n// The far side of the body glows dimmer than the near side.\nconst wz = () => (TG === B ? cl(1 + 0.09 * qz, 0.45, 1.15) : 1);\nfunction E(F, x, y, z, a, b, c, th, yaw, w, t = 0, k = 0) {\n  F(x, y, z);\n  P();\n  ell(qx, qy, a, b, c, th + FROT, yaw, w * wz(), t, k);\n}\nfunction Tb(F, x1, y1, z1, x2, y2, z2, ra, rb, w, sh = 0) {\n  F(x1, y1, z1);\n  P();\n  const ax = qx, ay = qy, az = qz;\n  F(x2, y2, z2);\n  P();\n  qz = (qz + az) / 2;\n  tube(ax, ay, qx, qy, ra, rb, w * wz(), sh);\n}\n\nexport function setup(params) {\n  const bg = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x - 31.5) / 36, v = (y - 63.5) / 72;\n      bg[y * W + x] = (0.03 + 0.025 * Math.random()) * max(0, 1 - 0.8 * (u * u + v * v) ** 2);\n    }\n  params.s = { ph: 0.05, br: 0, belt: 0, turn: -1, jump: -1, dt: 1 / 30, scr: 0, spd: 2, gait: 0, dose: 0.06, amp: 1, bg };\n  G.fill(0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], b = input.btnPressed || [];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dt = dt || 1 / 30;\n  S.scr = cl(k[0], 0, 1);\n  S.spd = cl(k[1], 0.2, 3);\n  const g = (S.gait = cl(k[2], 0, 1));\n  S.dose = cl(k[3], 0, 1);\n  if (b[0] && S.turn \u003c 0) S.turn = 0;\n  if (b[1] && S.jump \u003c 0) S.jump = 0;\n  if (S.turn >= 0 && (S.turn += dt) > 5) S.turn = -1;\n  if (S.jump >= 0 && (S.jump += dt) > 1.5) S.jump = -1;\n  const a = (S.amp = S.turn \u003c 0 ? 1 : 1 - sm(0, 0.7, S.turn) * (1 - sm(4.3, 5, S.turn)));\n  const f = (mix(0.93, 1.4, g) * S.spd) / 2, to = mix(0.6, 0.4, g);\n  S.ph = (S.ph + dt * f * a) % 1;\n  // The belt runs as fast as the foot on it goes back, from strike to toe-off.\n  const ax = (q) => LT * sin(ang(0, q, g) * D) + LS * sin((ang(0, q, g) - ang(1, q, g)) * D);\n  S.belt += (dt * a * a * f * (ax(0) - ax(to))) / to;\n  S.br = (S.br + dt * mix(0.25, 0.5, g)) % 1;\n}\n\nfunction treadmill(belt) {\n  const y = FLOOR + 1.7, an = -belt / 2.3, c = 1.8 * cos(an), s = 1.8 * sin(an);\n  tube(4.5, y, 59.5, y, 0.8, 0.8, 0.45, 0.5);\n  tube(4.5, FLOOR + 0.1, 59.5, FLOOR + 0.1, 0.2, 0.2, 0.3, 0);\n  for (let x = 4.5; x \u003c 60; x += 55) {\n    ell(x, y, 2.1, 2.1, 2.1, 0, 0, 0.45, 0.6, 1);\n    tube(x - c, y - s, x + c, y + s, 0.35, 0.35, 0.5, 0);\n  }\n  for (let j = 0; j \u003c 8; j++) {\n    const x = 5 + ((((j * 7 - belt) % 56) + 56) % 56);\n    tube(x, FLOOR - 0.2, x + 1, FLOOR - 0.2, 0.3, 0.3, 0.5, 0);\n  }\n}\n\nfunction skull() {\n  // The vault, upper jaw, chin and hollow eye sockets; then the dense bone of\n  // the ear, the cheekbone, the teeth and the jaw.\n  E(FH, 1.8, -7.2, 0, 7, 6.1, 5.8, -0.12, 0, 0.7, 0.5, 1);\n  E(FH, 6.4, -1.6, 0, 2.6, 1.6, 3.4, 0.1, 0, 0.4, 0.5, 0.5);\n  E(FJ, 7.9, 3.2, 0, 1.4, 1.3, 2, 0, 0, 0.7, 0.5, 0.5);\n  Tb(FH, 7.6, -5.6, 0, 8.7, -3, 0, 0.45, 0.4, 0.9);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    E(FH, 6.2, -4.6, s * 2.7, 1.9, 2, 1.4, 0, s * 0.5, 0.7, 0.55, 1);\n    E(FH, 6, -4.6, s * 2.4, 1.6, 1.7, 1.6, 0, 0, -0.35);\n    E(FH, 6.2, -1.9, s * 2, 1.5, 1.1, 1.4, 0, 0, -0.3);\n    E(FH, 0.3, -3.4, s * 3.4, 1.7, 1.3, 1.4, 0.3, 0, 0.8);\n    Tb(FH, 2.2, -2.4, s * 5, 6.2, -2.9, s * 4.2, 0.55, 0.65, 0.8);\n    Tb(FH, 8.6, 0.1, 0, 7.4, 0.1, s * 2.3, 0.75, 0.7, 1);\n    Tb(FH, 7.4, 0.1, s * 2.3, 4.6, 0.2, s * 3.2, 0.7, 0.75, 1);\n    Tb(FJ, 8.2, 1.3, 0, 7.2, 1.3, s * 2.3, 0.7, 0.65, 1);\n    Tb(FJ, 7.2, 1.3, s * 2.3, 4.6, 1.2, s * 3.1, 0.65, 0.7, 1);\n    Tb(FJ, 8.3, 3.7, 0, 6.6, 3.5, s * 2.8, 1, 0.9, 0.9, 0.5);\n    Tb(FJ, 6.6, 3.5, s * 2.8, 2, 3.1, s * 4.7, 0.9, 0.85, 0.9, 0.5);\n    Tb(FJ, 2, 3.1, s * 4.7, 1.3, -2.2, s * 4.7, 0.85, 0.7, 0.9, 0.4);\n    Tb(FJ, 2.7, 0.8, s * 4.5, 3.5, -1.8, s * 4.3, 0.55, 0.35, 0.8);\n  }\n}\n\nfunction trunk(b) {\n  // Vertebrae, sacrum, tailbone, and the breastbone moving out on the breath.\n  for (let v = 0; v \u003c 24; v++) {\n    const o = v * 6, x = VT[o], y = VT[o + 1], a = VT[o + 2], k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2;\n    E(FT, x, y, 0, a, VT[o + 3], VT[o + 4], VT[o + 5], 0, 0.55, 0.45, 0.7);\n    Tb(FT, x - a + 0.2, y, 0, x - a - (v === 6 ? 3.6 : [2.2, 3, 3.4][k]), y + [0.5, 1.6, 0.4][k], 0, 0.45, 0.3, k === 1 ? 0.4 : 0.7);\n  }\n  Tb(FT, -3.6, -4.8, 0, -6.6, 2.6, 0, 2.5, 1, 0.8, 0.5);\n  Tb(FT, -6.6, 2.6, 0, -5.2, 5.6, 0, 0.8, 0.45, 0.8);\n  const sb = 0.5 * b;\n  Tb(FT, 5 + sb, -31, 0, 6.6 + sb, -23.5, 0, 1.2, 0.9, 0.9, 0.5);\n  Tb(FT, 6.6 + sb, -23.5, 0, 7 + sb, -19.5, 0, 0.9, 0.45, 0.8);\n  E(FT, 5.2 + sb, -29.8, 0, 1.3, 1.9, 2.4, -0.2, 0, 0.7, 0.5, 0.6);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    // Hip bone: faint wing, its lines, socket, obturator ring.\n    E(FT, -1.5, -6.5, s * 6, 5.4, 4.8, 2.6, -0.35, s * 0.55, 0.2, 0.5, 1);\n    for (let i = 3; i \u003c IL.length; i += 3)\n      if (IL[i] === IL[i] && IL[i - 3] === IL[i - 3]) Tb(FT, IL[i - 3], IL[i - 2], s * IL[i - 1], IL[i], IL[i + 1], s * IL[i + 2], 0.45, 0.45, 0.85);\n    E(FT, 0, 0, s * HZ, 3.2, 3.2, 3, 0, 0, 0.4, 0.6, 1);\n    E(FT, 1, 4.6, s * 3.8, 3.2, 2.2, 1.6, 0.3, s * 0.3, 0.4, 0.5, 1);\n    // Collarbone, shoulder blade, the spine of the blade and the coracoid.\n    Tb(FT, 4.6, -32.2, s * 1.6, 2.2, -33.3, s * 7.4, 0.85, 0.8, 0.9, 0.4);\n    Tb(FT, 2.2, -33.3, s * 7.4, -1, -34.6, s * 12, 0.8, 0.9, 0.9, 0.4);\n    E(FT, -5.6, -27.5, s * 8.3, 2, 6.2, 4.6, 0.1, s * 0.6, 0.2, 0.4, 1);\n    Tb(FT, -7.4, -30.6, s * 5.4, -1.4, -35, s * 11.6, 0.6, 0.75, 0.9);\n    Tb(FT, 0.4, -32.4, s * 10, 2.4, -31.6, s * 9, 0.5, 0.45, 0.8);\n    // The ribs swing up and out on the breath.\n    for (let i = 0; i \u003c 7; i++) {\n      const r = RIB[i], ya = -31.5 + 2.4 * i, xa = spx(ya) - 1.3, rx = r[0] * (1 + 0.06 * b), rz = r[1] * (1 + 0.04 * b), dr = r[2] - 1.3 * b;\n      let px = xa, py = ya, pz = s * 1.6;\n      for (let j = 1; j \u003c= 5; j++) {\n        const al = (r[4] * PI * j) / 5, ca = 1 - cos(al), x = xa + rx * ca, y = ya + (dr * ca) / 2 + r[3] * sin(al), z = s * (1.6 + rz * sin(al));\n        Tb(FT, px, py, pz, x, y, z, 0.3, 0.25, 0.9);\n        (px = x), (py = y), (pz = z);\n      }\n    }\n  }\n}\n\nfunction flesh(b) {\n  E(FH, 2.4, -6, 0, 8, 8.4, 6.8, -0.1, 0, 1);\n  Tb(FT, -1.6, -31, 0, -0.6, -41, 0, 4.6, 4.2, 1);\n  E(FT, -0.2 + 0.3 * b, -23.5, 0, 9.4 + 0.4 * b, 11.5, 12.6, 0.05, 0, 1);\n  E(FT, 1.4, -9.5, 0, 8.8, 8.6, 11.4, 0, 0, 1);\n  E(FT, -1.6, -0.8, 0, 8.8, 8, 12.4, 0, 0, 1);\n  // Air in the lungs and windpipe and in the gut; heart and liver a little denser.\n  for (let s = -1; s \u003c= 1; s += 2) E(FT, -0.3, -24.4 + 0.6 * b, s * 5.8, 5.6 + 0.3 * b, 8 + 0.5 * b, 5.4, 0.1, s * 0.15, -1);\n  Tb(FT, 2.4, -40.5, 0, 0.8, -28.6, 0, 1, 1, -1);\n  E(FT, 3.6, -19.4, -1.6, 4, 4.6, 4.2, 0.6, 0, 0.55);\n  E(FT, 1.4, -12.6, 3.2, 6, 4.2, 6.8, 0.3, 0, 0.3);\n  for (let i = 0; i \u003c 16; i += 4) E(FT, GAS[i], GAS[i + 1], GAS[i + 2], 1.8 * GAS[i + 3], 1.4 * GAS[i + 3], 1.8 * GAS[i + 3], 0, 0, -0.8);\n}\n\nfunction leg(i, s) {\n  const t1 = LA[i * 3], t2 = LA[i * 3 + 1], t3 = LA[i * 3 + 2], z = s * HZ, bone = TG === B;\n  const dx = sin(t1), dy = cos(t1), kx = LT * dx, ky = LT * dy, ex = sin(t2), ey = cos(t2), ax = kx + LS * ex, ay = ky + LS * ey, fx = cos(t3), fy = -sin(t3);\n  // Femur: head in its socket, neck, greater trochanter, shaft, condyles.\n  FR.set([0, 0, z, dx, dy, 0, dy, -dx, 0, 0, 0, s, -t1]);\n  if (!bone) Tb(FL, -1, 0, 0, LT, 0, 0, 6.4, 4.4, 1);\n  else {\n    E(FL, 0, 0, 0, 2.3, 2.3, 2.3, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 0, 0, 0, 2.6, 0, 2.6, 1.3, 1.4, 0.6);\n    E(FL, 1.6, -1.5, 3.2, 1.7, 2.1, 1.5, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 2.8, 0, 2.6, LT - 2.4, 0, 0.4, 1.75, 1.6, 1, 0.85);\n    E(FL, LT - 1.2, -0.3, 0, 2.5, 2.4, 3.4, 0, 0, 0.7, 0.6, 0.6);\n    // The kneecap rides over the joint, halfway between thigh and shank.\n    const h = (t1 + t2) / 2;\n    E(FB, kx + cos(h) * 3.2, ky - sin(h) * 3.2, z, 1, 1.8, 1.5, -h, 0, 0.85, 0.45, 0.5);\n  }\n  // Tibia and the thinner fibula behind it.\n  FR.set([kx, ky, z, ex, ey, 0, ey, -ex, 0, 0, 0, s, -t2]);\n  if (!bone) Tb(FL, 0, 0, 0, LS, 0, 0, 4.2, 2.4, 1), E(FL, 8, -1.6, 0, 3, 6.5, 3.2, 0, 0, 1);\n  else {\n    E(FL, 1.9, 0, 0, 2.8, 1.4, 3.3, 0, 0, 0.7, 0.5, 0.5);\n    Tb(FL, 3, 0.3, 0, LS - 1.8, 0, 0, 1.75, 1.2, 1, 0.85);\n    E(FL, LS - 1, 0, -0.4, 1.6, 1.7, 2.2, 0, 0, 0.75, 0.5, 0.4);\n    E(FL, 3.6, -1.9, 2, 1, 1, 1, 0, 0, 0.8);\n    Tb(FL, 4, -1.9, 2, LS - 0.8, -1, 2.4, 0.7, 0.6, 0.95, 0.3);\n    E(FL, LS + 0.3, -1, 2.6, 1, 1.5, 1, 0, 0, 0.8);\n  }\n  // Foot: talus, heel, arch, two metatarsals for five, and toes that stay flat\n  // on the belt as the heel lifts.\n  FR.set([ax, ay, z, fx, fy, 0, -fy, fx, 0, 0, 0, s, -t3]);\n  if (!bone) return Tb(FL, -3, 2.6, 0, 10, 3, 0, 2.3, 1.6, 1);\n  E(FL, 0.6, 1, 0, 2.2, 1.5, 1.6, 0, 0, 0.8, 0.5, 0.5);\n  E(FL, -2.4, 2.9, 0, 3.3, 1.8, 1.6, -0.3, 0, 0.8, 0.6, 0.55);\n  E(FL, 3.3, 1.7, 0, 1.5, 1.3, 1.8, 0, 0, 0.85);\n  E(FL, 2.6, 3.1, 0, 1.2, 1, 1.2, 0, 0, 0.8);\n  Tb(FL, 4.4, 1.9, 0, 9.2, 3.5, 0, 0.65, 0.6, 1, 0.3);\n  Tb(FL, 3.6, 3.4, 1, 8.4, 3.9, 1, 0.55, 0.5, 0.9);\n  FL(9.2, 3.5, 0);\n  const d = t3 \u003c 0 ? -t3 * (1 - sm(0.4, 3, FLOOR - OY - gy - 1.1)) : 0, c = cos(d), n = -sin(d);\n  Tb(FL, 9.2, 3.5, 0, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 0.5, 0.45, 0.95);\n  Tb(FL, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 9.2 + c * 4.2, 3.5 + n * 4.2, 0, 0.45, 0.4, 0.9);\n}\n\nfunction arm(s, sig, eps, k, wv) {\n  FT(-1, -33, s * SZ);\n  const sx = gx, sy = gy, sz = gz, au = sig + LAM, af = au + eps, V = AV;\n  // Axes of the upper arm and forearm, and the thumb side of the hand. In the\n  // wave the elbow goes out to the side and the forearm up, palm to you.\n  V.set([sin(au), cos(au), s * 0.1, sin(af), cos(af), s * 0.04, cos(af), -sin(af), 0]);\n  if (k > 0) {\n    const A = [0.2, 0.62, s * 0.76, 0.15, -cos(wv), s * (sin(wv) - 0.1), 0, 0, -s];\n    for (let j = 0; j \u003c 9; j++) V[j] = mix(V[j], A[j], k);\n  }\n  for (let j = 0; j \u003c 9; j += 3) {\n    const d = j === 6 ? V[6] * V[3] + V[7] * V[4] + V[8] * V[5] : 0;\n    for (let c = 0; c \u003c 3; c++) V[j + c] -= d * V[3 + c];\n    const l = hypot(V[j], V[j + 1], V[j + 2]) || 1;\n    for (let c = 0; c \u003c 3; c++) V[j + c] /= l;\n  }\n  const [ux, uy, uz, fx, fy, fz, px, py, pz] = V, ex = sx + LU * ux, ey = sy + LU * uy, ez = sz + LU * uz;\n  // The forearm's frame from the elbow, its third axis toward the palm.\n  FR.set([ex, ey, ez, fx, fy, fz, px, py, pz, s * (fy * pz - fz * py), s * (fz * px - fx * pz), s * (fx * py - fy * px), -af]);\n  if (TG === T) {\n    Tb(FB, sx, sy, sz, ex, ey, ez, 2.8, 2.2, 1);\n    Tb(FL, 0, 0, 0, LF, 0, 0, 2.2, 1.6, 1);\n    return Tb(FL, LF, 0, 0, LF + 7, 0, 0, 1.5, 1.1, 1);\n  }\n  // Humerus, ulna with the point of the elbow, radius, wrist, four fingers\n  // curled a little toward the palm, thumb.\n  E(FB, sx, sy, sz, 2.2, 2.2, 2.2, 0, 0, 0.8, 0.7, 0.5);\n  Tb(FB, sx + ux * 1.8, sy + uy * 1.8, sz + uz * 1.8, ex - ux * 1.3, ey - uy * 1.3, ez - uz * 1.3, 1.35, 1.15, 1, 0.85);\n  E(FB, ex - ux * 0.8, ey - uy * 0.8, ez - uz * 0.8, 1.3, 1.5, 2.5, -au, 0, 0.8, 0.5, 0.5);\n  E(FL, 0.3, -1, 0, 1, 1, 1, 0, 0, 0.9);\n  Tb(FL, 0.8, -0.5, 0, LF, -0.5, 0, 0.75, 0.55, 1, 0.5);\n  Tb(FL, 1.2, 0.5, 0, LF, 0.55, 0, 0.6, 0.95, 1, 0.5);\n  E(FL, LF + 1.4, 0, 0, 1.5, 1.3, 1.5, 0, 0, 0.9, 0.5, 0.4);\n  const c0 = mix(0.3, 0.06, k);\n  for (let j = 0; j \u003c 5; j++) {\n    const th = j > 3, o = th ? 2.2 : FO[j];\n    let x = LF + (th ? 3.2 : 5.8), y = o, z = 0, c = 0;\n    Tb(FL, LF + (th ? 1 : 2.2), th ? 0.9 : o / 2, 0, x, y, z, 0.5, 0.45, 0.95);\n    for (let m = 0; m \u003c (th ? 2 : 3); m++) {\n      c += c0;\n      const L = th ? 2 - 0.4 * m : FLN[j] * PHL[m], X = x + cos(c) * L, Y = y + (th ? 0.7 * L : 0), Z = z + sin(c) * L;\n      Tb(FL, x, y, z, X, Y, Z, 0.42, 0.36, 0.9);\n      (x = X), (y = Y), (z = Z);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const g = S.gait, a = S.amp, p = S.ph, u = S.jump, tt = S.turn, b = sin(2 * PI * S.br);\n  const wj = u \u003c 0 ? 0 : sm(0, 0.2, u) * (1 - sm(1.15, 1.5, u));\n  const tf = tt \u003c 0 ? 0 : sm(0.5, 1.4, tt) * (1 - sm(3.8, 4.7, tt));\n  const wave = tt \u003c 0 ? 0 : sm(1.4, 1.9, tt) * (1 - sm(3.3, 3.8, tt));\n  PSI = (PI / 2) * tf;\n  (CP = cos(PSI)), (SP = sin(PSI));\n  LAM = (mix(4, 11, g) * a + (wj ? key(JK[5], u) * wj : 0)) * D;\n  (LC = cos(LAM)), (LSN = sin(LAM));\n  // Legs half a stride apart, arms swinging against them; the lowest heel or\n  // ball stands on the belt.\n  let low = 0;\n  for (let i = 0; i \u003c 2; i++) {\n    const q = p + 0.5 * i, c = cos(2 * PI * q);\n    let th = ang(0, q, g) * a, kn = ang(1, q, g) * a + 3, an = ang(2, q, g) * a;\n    let sg = mix(-5 - 17 * c, -12 - 28 * c, g) * a, ep = mix(8, mix(14 + 8 * (1 - c), 80 + 9 * (1 - c), g), a);\n    if (wj) {\n      (th = mix(th, key(JK[0], u), wj)), (kn = mix(kn, key(JK[1], u), wj)), (an = mix(an, key(JK[2], u), wj));\n      (sg = mix(sg, key(JK[3], u), wj)), (ep = mix(ep, key(JK[4], u), wj));\n    }\n    const t1 = (LA[i * 3] = th * D), t2 = (LA[i * 3 + 1] = (th - kn) * D), t3 = (LA[i * 3 + 2] = (th - kn + an) * D);\n    const ay = LT * cos(t1) + LS * cos(t2);\n    low = max(low, ay + 4 * sin(t3) + 4.9 * cos(t3), ay - 9.2 * sin(t3) + 4.6 * cos(t3));\n    (AR[i * 2] = sg * D), (AR[i * 2 + 1] = ep * D);\n  }\n  // A run leaves the belt between steps; a jump leaves it higher.\n  const fl = g * g * a * 3.2 * max(0, (cos(4 * PI * (p - 0.45)) - 0.75) * 4) ** 1.5;\n  const v = (u - 0.46) / 0.44;\n  OY = FLOOR - low - fl - (v > 0 && v \u003c 1 ? 32 * v * (1 - v) : 0);\n  OX = mix(26.5 + 2.5 * g, 35, tf);\n  FT(-2.1, -41.4, 0);\n  (HX = gx), (HY = gy);\n  ETA = -LAM * 0.85 + 0.035 * sin(4 * PI * p) * a;\n  (HC = cos(ETA)), (HS = sin(ETA));\n  JA = 0.2 * wave * (0.6 + 0.4 * sin(tt * 9));\n  (JC = cos(JA)), (JS = sin(JA));\n  const wv = 0.3 * sin((tt - 1.9) * 2 * PI * 1.7) * sm(1.6, 2, tt);\n\n  B.fill(0);\n  T.fill(0);\n  TG = B;\n  treadmill(S.belt);\n  skull();\n  trunk(b);\n  for (let r = 0; r \u003c 2; r++) {\n    TG = r ? T : B;\n    leg(0, 1);\n    leg(1, -1);\n    arm(1, AR[0], AR[1], wave, wv);\n    arm(-1, AR[2], AR[3], 0, 0);\n  }\n  if (S.dose > 0.001) flesh(b);\n\n  // The screen turns bone and flesh to light. An afterglow fades behind what\n  // moves, and bright bone blooms a little.\n  const x3 = S.scr * 3, pi = min(2, floor(x3));\n  for (let j = 0; j \u003c 6; j++) PC[j] = mix(PAL[pi][j], PAL[pi + 1][j], x3 - pi);\n  const dec = exp(-S.dt / 0.07), gd = 0.62 * sqrt(S.dose), bg = S.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) GB[r + x] = 0.5 * G[r + x] + 0.25 * (G[r + (x ? x - 1 : x)] + G[r + (x \u003c W - 1 ? x + 1 : x)]);\n  for (let q = 0; q \u003c N; q++) {\n    const e = B[q] > 0 ? (1 - exp(-0.3 * B[q])) ** 1.35 : 0, t = T[q] > 0 ? gd * (1 - exp(-T[q] / 12)) : 0;\n    B[q] = e + t * (1 - e);\n    G[q] = max(B[q], GB[q] * dec);\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += B[r + cl(x + d, 0, W - 1)];\n      T[r + x] = a / 5;\n    }\n  const ch = (j, lv, w, ag) => min(255, 255 * (lv * (PC[j] + (1 - PC[j]) * w) + ag * PC[j + 3]));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += T[cl(y + d, 0, H - 1) * W + x];\n      const q = y * W + x, L = B[q], ag = (G[q] - L) * 0.3, lv = L + bg[q] + 0.045 * a, w = L * L * L * 0.75;\n      display.setPixel(x, y, ch(0, lv, w, ag), ch(1, lv, w, ag), ch(2, lv, w, ag));\n    }\n}\n","layer":{"id":"layer-fluoroscope","type":"code","name":"fluoroscope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fluoroscope\n// Family:  body\n// Idea:    On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after cineradiography, the X-ray motion pictures of the 1950s\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1\n//\n// Knob 1: Screen. The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour.\n// Knob 2: Speed. The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower.\n// Knob 3: Gait. A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps.\n// Knob 4: Dose. The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body.\n// Buttons: K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, sqrt, exp, floor, ceil, atan2, hypot, PI } = Math;\nconst D = PI / 180;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// A figure 114 LEDs tall: limb lengths and half spans of hips and shoulders.\n// FLOOR is the top of the belt. Bones are drawn half again as thick as life.\nconst LT = 27.5, LS = 27.5, LU = 20.5, LF = 16, HZ = 5.2, SZ = 12.4, FLOOR = 122.5;\n\n// For the walk (toe-off at 60%) and then the run (toe-off at 40%), the thigh's\n// angle from vertical and the flexion of knee and ankle, in degrees every 10%\n// of a stride from heel strike, after clinical gait curves.\nconst GT = [\n  [24, 20, 12, 3, -6, -14, -10, 6, 19, 25],\n  [4, 16, 18, 10, 5, 14, 38, 60, 45, 15],\n  [0, -5, 3, 6, 8, 0, -16, -10, -2, 1],\n  [30, 18, 5, -5, -12, -6, 12, 30, 42, 40],\n  [20, 38, 40, 28, 18, 50, 90, 104, 76, 36],\n  [6, 16, 20, 10, -18, -14, -2, 6, 8, 6],\n];\n// A periodic Catmull-Rom spline through a row.\nfunction curve(r, p) {\n  const f = (p - floor(p)) * 10, i = floor(f) % 10, u = f - floor(f);\n  const a = r[(i + 9) % 10], b = r[i], c = r[(i + 1) % 10], d = r[(i + 2) % 10];\n  return b + 0.5 * u * (c - a + u * (2 * a - 5 * b + 4 * c - d + u * (3 * (b - c) + d - a)));\n}\nconst ang = (k, q, g) => mix(curve(GT[k], q), curve(GT[k + 3], q), g);\n// The jump, keyed in seconds: thigh, knee, ankle, shoulder, elbow, lean.\nconst JT = [0, 0.3, 0.46, 0.7, 0.9, 1.1, 1.5];\nconst JK = [\n  [0, 50, 2, 30, 10, 42, 0],\n  [0, 95, 4, 58, 16, 76, 0],\n  [0, 24, -34, -18, -6, 20, 0],\n  [0, -40, 58, 50, 25, 10, 0],\n  [10, 15, 45, 50, 35, 30, 10],\n  [0, 24, 2, 4, 8, 20, 0],\n];\nfunction key(r, u) {\n  let i = 0;\n  while (i \u003c 5 && u > JT[i + 1]) i++;\n  return mix(r[i], r[i + 1], sm(JT[i], JT[i + 1], u));\n}\n\n// The spine's curve in the trunk's frame (x forward, y down from the hips).\nconst CY = [-41, -36.5, -32.5, -28, -23.5, -19, -15.5, -11.5, -7.5, -4.5];\nconst CX = [-2.2, -1.9, -3, -4.6, -5.3, -4.8, -3.8, -2.4, -2, -2.8];\nfunction spx(y) {\n  let i = 0;\n  while (i \u003c 8 && y > CY[i + 1]) i++;\n  return mix(CX[i], CX[i + 1], (y - CY[i]) / (CY[i + 1] - CY[i]));\n}\n// 24 vertebral bodies from the neck down: x, y, half sizes, tilt.\nconst VT = new Float64Array(144);\nfor (let v = 0, y = -40.8; v \u003c 24; v++) {\n  const k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2, h = [1.25, 1.3, 2.3][k], c = y + h / 2;\n  VT.set([spx(c), c, [1.3, 1.6, 2.2][k], h * 0.4, [1.6, 1.9, 2.6][k], -atan2(spx(c + 0.5) - spx(c - 0.5), 1)], v * 6);\n  y += h;\n}\n// Seven ribs stand for twelve. Each row gives the half depth and width of the\n// cage, the drop of the front end and its sag. The last number is how far\n// round the bone goes before the cartilage, which the beam passes through.\nconst RIB = [\n  [4, 5.5, 4, 0.6, 0.95], [5.4, 8.2, 6.2, 0.9, 0.92], [6.1, 10, 7.6, 1.1, 0.88], [6.6, 11.2, 8.4, 1.2, 0.82],\n  [6.7, 11.6, 8.6, 1.2, 0.75], [6.5, 11.4, 8.2, 1.1, 0.64], [6, 10.6, 7, 1, 0.5],\n];\n// The hip bone as lines split by NaN: the iliac crest, the front border down\n// to the socket, the back border, the brim from sacrum to pubis.\nconst IL = [\n  -6.6, -5.5, 4, -5.6, -9.4, 6.2, -3.6, -11.6, 7.8, -1, -11.8, 8.8, 1.8, -10.4, 9.2, 3.8, -8, 9, 4.2, -7.4, 9, 3, -3.6, 7.5, 1.8, -2.6, 6,\n  NaN, 0, 0, -6.6, -5.5, 4, -5.4, -2.6, 4.6, -4.6, -1.2, 4.8, -3.2, 1.2, 4.2, -2.8, 4, 4.2, -2.4, 6.4, 4.2,\n  NaN, 0, 0, -4.2, -3.4, 3.6, -1.6, -1.6, 4.4, 0.5, -1, 4.6, 2.6, 0.6, 3.6, 4.4, 3, 1.2,\n];\n// Gas pockets in the gut: x, y, z, size.\nconst GAS = [2.6, -13.6, -5, 1.4, 3.2, -7, 3, 1, -0.4, -5, -2.4, 0.9, 4.4, -3.6, -4.4, 0.85];\n// Fingers: offset across the palm and length; the share of each phalanx.\nconst FO = [1.25, 0.42, -0.42, -1.2], FLN = [5.4, 6, 5.6, 4.6], PHL = [0.45, 0.32, 0.23];\n// Phosphors: the glow and its afterglow.\nconst PAL = [\n  [0.45, 0.7, 1, 0.35, 1, 0.55],\n  [0.3, 1, 0.4, 0.15, 0.7, 0.25],\n  [1, 0.62, 0.18, 0.9, 0.3, 0.05],\n  [0.72, 0.38, 1, 0.35, 0.3, 1],\n];\n\n// Bone and flesh add up apart as path length along the beam; G is afterglow.\nconst B = new Float32Array(N), T = new Float32Array(N), G = new Float32Array(N), GB = new Float32Array(N);\nconst LA = new Float64Array(6), AR = new Float64Array(4), PC = new Float64Array(6), MO = new Float64Array(6), MI = new Float64Array(6);\nconst FR = new Float64Array(13), AV = new Float64Array(9);\nlet TG = B;\nlet PSI = 0, CP = 1, SP = 0, OX = 25, OY = 63, LAM = 0, LC = 1, LSN = 0;\nlet HX = 0, HY = 0, ETA = 0, HC = 1, HS = 0, JA = 0, JC = 1, JS = 0;\nlet gx = 0, gy = 0, gz = 0, qx = 0, qy = 0, qz = 0, FROT = 0;\nlet e1x = 1, e1y = 0, e1z = 0, e2x = 0, e2y = 1, e2z = 0, e3x = 0, e3z = 1;\n\n// Frames: body, with x forward and y down, trunk, head, jaw, and a limb's\n// own, whose first axis runs along the bone.\nconst FB = (x, y, z) => ((gx = x), (gy = y), (gz = z), (FROT = 0));\nconst FT = (x, y, z) => ((gx = x * LC - y * LSN), (gy = x * LSN + y * LC), (gz = z), (FROT = LAM));\nconst FH = (x, y, z) => ((gx = HX + x * HC - y * HS), (gy = HY + x * HS + y * HC), (gz = z), (FROT = ETA));\nconst FL = (u, v, w) => (\n  (gx = FR[0] + FR[3] * u + FR[6] * v + FR[9] * w), (gy = FR[1] + FR[4] * u + FR[7] * v + FR[10] * w), (gz = FR[2] + FR[5] * u + FR[8] * v + FR[11] * w), (FROT = FR[12])\n);\nfunction FJ(x, y, z) {\n  const dx = x - 1.3, dy = y + 2.6;\n  FH(1.3 + dx * JC - dy * JS, -2.6 + dx * JS + dy * JC, z);\n  FROT += JA;\n}\nfunction P() {\n  qx = OX + gx * CP - gz * SP;\n  qy = OY + gy;\n  qz = gx * SP + gz * CP;\n}\n\n// A tapered rod, hollow when sh > 0: the chord through a tube of cortex.\nfunction tube(ax, ay, bx, by, ra, rb, w, sh) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6, m = max(ra, rb) + 0.8;\n  const x0 = max(0, ceil(min(ax, bx) - m)), x1 = min(W - 1, floor(max(ax, bx) + m));\n  const y0 = max(0, ceil(min(ay, by) - m)), y1 = min(H - 1, floor(max(ay, by) + m));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const ux = x - ax, uy = y - ay, t = cl((ux * dx + uy * dy) / l2, 0, 1);\n      const ex = ux - t * dx, ey = uy - t * dy, d2 = ex * ex + ey * ey, R = ra + (rb - ra) * t + 0.3, o = R * R - d2;\n      if (o \u003c= 0) continue;\n      const ri = R - 0.85, i = ri * ri - d2;\n      TG[y * W + x] += 2 * w * (sqrt(o) - (sh && ri > 0 && i > 0 ? sh * sqrt(i) : 0));\n    }\n}\n// An ellipsoid seen along the beam: its quadric, and the chord through it.\nfunction quad(M, a, b, c) {\n  const A = 1 / (a * a), Bq = 1 / (b * b), C = 1 / (c * c);\n  M[0] = e1x * e1x * A + e2x * e2x * Bq + e3x * e3x * C;\n  M[1] = e1x * e1y * A + e2x * e2y * Bq;\n  M[2] = e1y * e1y * A + e2y * e2y * Bq;\n  M[3] = e1x * e1z * A + e2x * e2z * Bq + e3x * e3z * C;\n  M[4] = e1y * e1z * A + e2y * e2z * Bq;\n  M[5] = e1z * e1z * A + e2z * e2z * Bq + e3z * e3z * C;\n}\nfunction chord(M, u, v) {\n  const b = M[3] * u + M[4] * v, d = b * b - M[5] * (M[0] * u * u + 2 * M[1] * u * v + M[2] * v * v - 1);\n  return d > 0 ? (2 * sqrt(d)) / M[5] : 0;\n}\n// Tilted th in the side plane, turned yaw about the vertical. With a shell t\n// the inside counts k less, so a skull's edge glows brighter than its face.\nfunction ell(cx, cy, a, b, c, th, yaw, w, t, k) {\n  (a += 0.3), (b += 0.3), (c += 0.3);\n  const ph = PSI + yaw, cp = cos(ph), sp = sin(ph), ct = cos(th), st = sin(th);\n  (e1x = ct * cp), (e1y = st), (e1z = ct * sp), (e2x = -st * cp), (e2y = ct), (e2z = -st * sp), (e3x = -sp), (e3z = cp);\n  quad(MO, a, b, c);\n  if (t) quad(MI, a - t, b - t, c - t);\n  const rx = hypot(e1x * a, e2x * b, e3x * c) + 0.5, ry = hypot(e1y * a, e2y * b) + 0.5;\n  const x0 = max(0, ceil(cx - rx)), x1 = min(W - 1, floor(cx + rx)), y0 = max(0, ceil(cy - ry)), y1 = min(H - 1, floor(cy + ry));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      let s = chord(MO, x - cx, y - cy);\n      if (s > 0 && t) s -= k * chord(MI, x - cx, y - cy);\n      if (s > 0) TG[y * W + x] += s * w;\n    }\n}\n// The far side of the body glows dimmer than the near side.\nconst wz = () => (TG === B ? cl(1 + 0.09 * qz, 0.45, 1.15) : 1);\nfunction E(F, x, y, z, a, b, c, th, yaw, w, t = 0, k = 0) {\n  F(x, y, z);\n  P();\n  ell(qx, qy, a, b, c, th + FROT, yaw, w * wz(), t, k);\n}\nfunction Tb(F, x1, y1, z1, x2, y2, z2, ra, rb, w, sh = 0) {\n  F(x1, y1, z1);\n  P();\n  const ax = qx, ay = qy, az = qz;\n  F(x2, y2, z2);\n  P();\n  qz = (qz + az) / 2;\n  tube(ax, ay, qx, qy, ra, rb, w * wz(), sh);\n}\n\nexport function setup(params) {\n  const bg = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x - 31.5) / 36, v = (y - 63.5) / 72;\n      bg[y * W + x] = (0.03 + 0.025 * Math.random()) * max(0, 1 - 0.8 * (u * u + v * v) ** 2);\n    }\n  params.s = { ph: 0.05, br: 0, belt: 0, turn: -1, jump: -1, dt: 1 / 30, scr: 0, spd: 2, gait: 0, dose: 0.06, amp: 1, bg };\n  G.fill(0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], b = input.btnPressed || [];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dt = dt || 1 / 30;\n  S.scr = cl(k[0], 0, 1);\n  S.spd = cl(k[1], 0.2, 3);\n  const g = (S.gait = cl(k[2], 0, 1));\n  S.dose = cl(k[3], 0, 1);\n  if (b[0] && S.turn \u003c 0) S.turn = 0;\n  if (b[1] && S.jump \u003c 0) S.jump = 0;\n  if (S.turn >= 0 && (S.turn += dt) > 5) S.turn = -1;\n  if (S.jump >= 0 && (S.jump += dt) > 1.5) S.jump = -1;\n  const a = (S.amp = S.turn \u003c 0 ? 1 : 1 - sm(0, 0.7, S.turn) * (1 - sm(4.3, 5, S.turn)));\n  const f = (mix(0.93, 1.4, g) * S.spd) / 2, to = mix(0.6, 0.4, g);\n  S.ph = (S.ph + dt * f * a) % 1;\n  // The belt runs as fast as the foot on it goes back, from strike to toe-off.\n  const ax = (q) => LT * sin(ang(0, q, g) * D) + LS * sin((ang(0, q, g) - ang(1, q, g)) * D);\n  S.belt += (dt * a * a * f * (ax(0) - ax(to))) / to;\n  S.br = (S.br + dt * mix(0.25, 0.5, g)) % 1;\n}\n\nfunction treadmill(belt) {\n  const y = FLOOR + 1.7, an = -belt / 2.3, c = 1.8 * cos(an), s = 1.8 * sin(an);\n  tube(4.5, y, 59.5, y, 0.8, 0.8, 0.45, 0.5);\n  tube(4.5, FLOOR + 0.1, 59.5, FLOOR + 0.1, 0.2, 0.2, 0.3, 0);\n  for (let x = 4.5; x \u003c 60; x += 55) {\n    ell(x, y, 2.1, 2.1, 2.1, 0, 0, 0.45, 0.6, 1);\n    tube(x - c, y - s, x + c, y + s, 0.35, 0.35, 0.5, 0);\n  }\n  for (let j = 0; j \u003c 8; j++) {\n    const x = 5 + ((((j * 7 - belt) % 56) + 56) % 56);\n    tube(x, FLOOR - 0.2, x + 1, FLOOR - 0.2, 0.3, 0.3, 0.5, 0);\n  }\n}\n\nfunction skull() {\n  // The vault, upper jaw, chin and hollow eye sockets; then the dense bone of\n  // the ear, the cheekbone, the teeth and the jaw.\n  E(FH, 1.8, -7.2, 0, 7, 6.1, 5.8, -0.12, 0, 0.7, 0.5, 1);\n  E(FH, 6.4, -1.6, 0, 2.6, 1.6, 3.4, 0.1, 0, 0.4, 0.5, 0.5);\n  E(FJ, 7.9, 3.2, 0, 1.4, 1.3, 2, 0, 0, 0.7, 0.5, 0.5);\n  Tb(FH, 7.6, -5.6, 0, 8.7, -3, 0, 0.45, 0.4, 0.9);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    E(FH, 6.2, -4.6, s * 2.7, 1.9, 2, 1.4, 0, s * 0.5, 0.7, 0.55, 1);\n    E(FH, 6, -4.6, s * 2.4, 1.6, 1.7, 1.6, 0, 0, -0.35);\n    E(FH, 6.2, -1.9, s * 2, 1.5, 1.1, 1.4, 0, 0, -0.3);\n    E(FH, 0.3, -3.4, s * 3.4, 1.7, 1.3, 1.4, 0.3, 0, 0.8);\n    Tb(FH, 2.2, -2.4, s * 5, 6.2, -2.9, s * 4.2, 0.55, 0.65, 0.8);\n    Tb(FH, 8.6, 0.1, 0, 7.4, 0.1, s * 2.3, 0.75, 0.7, 1);\n    Tb(FH, 7.4, 0.1, s * 2.3, 4.6, 0.2, s * 3.2, 0.7, 0.75, 1);\n    Tb(FJ, 8.2, 1.3, 0, 7.2, 1.3, s * 2.3, 0.7, 0.65, 1);\n    Tb(FJ, 7.2, 1.3, s * 2.3, 4.6, 1.2, s * 3.1, 0.65, 0.7, 1);\n    Tb(FJ, 8.3, 3.7, 0, 6.6, 3.5, s * 2.8, 1, 0.9, 0.9, 0.5);\n    Tb(FJ, 6.6, 3.5, s * 2.8, 2, 3.1, s * 4.7, 0.9, 0.85, 0.9, 0.5);\n    Tb(FJ, 2, 3.1, s * 4.7, 1.3, -2.2, s * 4.7, 0.85, 0.7, 0.9, 0.4);\n    Tb(FJ, 2.7, 0.8, s * 4.5, 3.5, -1.8, s * 4.3, 0.55, 0.35, 0.8);\n  }\n}\n\nfunction trunk(b) {\n  // Vertebrae, sacrum, tailbone, and the breastbone moving out on the breath.\n  for (let v = 0; v \u003c 24; v++) {\n    const o = v * 6, x = VT[o], y = VT[o + 1], a = VT[o + 2], k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2;\n    E(FT, x, y, 0, a, VT[o + 3], VT[o + 4], VT[o + 5], 0, 0.55, 0.45, 0.7);\n    Tb(FT, x - a + 0.2, y, 0, x - a - (v === 6 ? 3.6 : [2.2, 3, 3.4][k]), y + [0.5, 1.6, 0.4][k], 0, 0.45, 0.3, k === 1 ? 0.4 : 0.7);\n  }\n  Tb(FT, -3.6, -4.8, 0, -6.6, 2.6, 0, 2.5, 1, 0.8, 0.5);\n  Tb(FT, -6.6, 2.6, 0, -5.2, 5.6, 0, 0.8, 0.45, 0.8);\n  const sb = 0.5 * b;\n  Tb(FT, 5 + sb, -31, 0, 6.6 + sb, -23.5, 0, 1.2, 0.9, 0.9, 0.5);\n  Tb(FT, 6.6 + sb, -23.5, 0, 7 + sb, -19.5, 0, 0.9, 0.45, 0.8);\n  E(FT, 5.2 + sb, -29.8, 0, 1.3, 1.9, 2.4, -0.2, 0, 0.7, 0.5, 0.6);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    // Hip bone: faint wing, its lines, socket, obturator ring.\n    E(FT, -1.5, -6.5, s * 6, 5.4, 4.8, 2.6, -0.35, s * 0.55, 0.2, 0.5, 1);\n    for (let i = 3; i \u003c IL.length; i += 3)\n      if (IL[i] === IL[i] && IL[i - 3] === IL[i - 3]) Tb(FT, IL[i - 3], IL[i - 2], s * IL[i - 1], IL[i], IL[i + 1], s * IL[i + 2], 0.45, 0.45, 0.85);\n    E(FT, 0, 0, s * HZ, 3.2, 3.2, 3, 0, 0, 0.4, 0.6, 1);\n    E(FT, 1, 4.6, s * 3.8, 3.2, 2.2, 1.6, 0.3, s * 0.3, 0.4, 0.5, 1);\n    // Collarbone, shoulder blade, the spine of the blade and the coracoid.\n    Tb(FT, 4.6, -32.2, s * 1.6, 2.2, -33.3, s * 7.4, 0.85, 0.8, 0.9, 0.4);\n    Tb(FT, 2.2, -33.3, s * 7.4, -1, -34.6, s * 12, 0.8, 0.9, 0.9, 0.4);\n    E(FT, -5.6, -27.5, s * 8.3, 2, 6.2, 4.6, 0.1, s * 0.6, 0.2, 0.4, 1);\n    Tb(FT, -7.4, -30.6, s * 5.4, -1.4, -35, s * 11.6, 0.6, 0.75, 0.9);\n    Tb(FT, 0.4, -32.4, s * 10, 2.4, -31.6, s * 9, 0.5, 0.45, 0.8);\n    // The ribs swing up and out on the breath.\n    for (let i = 0; i \u003c 7; i++) {\n      const r = RIB[i], ya = -31.5 + 2.4 * i, xa = spx(ya) - 1.3, rx = r[0] * (1 + 0.06 * b), rz = r[1] * (1 + 0.04 * b), dr = r[2] - 1.3 * b;\n      let px = xa, py = ya, pz = s * 1.6;\n      for (let j = 1; j \u003c= 5; j++) {\n        const al = (r[4] * PI * j) / 5, ca = 1 - cos(al), x = xa + rx * ca, y = ya + (dr * ca) / 2 + r[3] * sin(al), z = s * (1.6 + rz * sin(al));\n        Tb(FT, px, py, pz, x, y, z, 0.3, 0.25, 0.9);\n        (px = x), (py = y), (pz = z);\n      }\n    }\n  }\n}\n\nfunction flesh(b) {\n  E(FH, 2.4, -6, 0, 8, 8.4, 6.8, -0.1, 0, 1);\n  Tb(FT, -1.6, -31, 0, -0.6, -41, 0, 4.6, 4.2, 1);\n  E(FT, -0.2 + 0.3 * b, -23.5, 0, 9.4 + 0.4 * b, 11.5, 12.6, 0.05, 0, 1);\n  E(FT, 1.4, -9.5, 0, 8.8, 8.6, 11.4, 0, 0, 1);\n  E(FT, -1.6, -0.8, 0, 8.8, 8, 12.4, 0, 0, 1);\n  // Air in the lungs and windpipe and in the gut; heart and liver a little denser.\n  for (let s = -1; s \u003c= 1; s += 2) E(FT, -0.3, -24.4 + 0.6 * b, s * 5.8, 5.6 + 0.3 * b, 8 + 0.5 * b, 5.4, 0.1, s * 0.15, -1);\n  Tb(FT, 2.4, -40.5, 0, 0.8, -28.6, 0, 1, 1, -1);\n  E(FT, 3.6, -19.4, -1.6, 4, 4.6, 4.2, 0.6, 0, 0.55);\n  E(FT, 1.4, -12.6, 3.2, 6, 4.2, 6.8, 0.3, 0, 0.3);\n  for (let i = 0; i \u003c 16; i += 4) E(FT, GAS[i], GAS[i + 1], GAS[i + 2], 1.8 * GAS[i + 3], 1.4 * GAS[i + 3], 1.8 * GAS[i + 3], 0, 0, -0.8);\n}\n\nfunction leg(i, s) {\n  const t1 = LA[i * 3], t2 = LA[i * 3 + 1], t3 = LA[i * 3 + 2], z = s * HZ, bone = TG === B;\n  const dx = sin(t1), dy = cos(t1), kx = LT * dx, ky = LT * dy, ex = sin(t2), ey = cos(t2), ax = kx + LS * ex, ay = ky + LS * ey, fx = cos(t3), fy = -sin(t3);\n  // Femur: head in its socket, neck, greater trochanter, shaft, condyles.\n  FR.set([0, 0, z, dx, dy, 0, dy, -dx, 0, 0, 0, s, -t1]);\n  if (!bone) Tb(FL, -1, 0, 0, LT, 0, 0, 6.4, 4.4, 1);\n  else {\n    E(FL, 0, 0, 0, 2.3, 2.3, 2.3, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 0, 0, 0, 2.6, 0, 2.6, 1.3, 1.4, 0.6);\n    E(FL, 1.6, -1.5, 3.2, 1.7, 2.1, 1.5, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 2.8, 0, 2.6, LT - 2.4, 0, 0.4, 1.75, 1.6, 1, 0.85);\n    E(FL, LT - 1.2, -0.3, 0, 2.5, 2.4, 3.4, 0, 0, 0.7, 0.6, 0.6);\n    // The kneecap rides over the joint, halfway between thigh and shank.\n    const h = (t1 + t2) / 2;\n    E(FB, kx + cos(h) * 3.2, ky - sin(h) * 3.2, z, 1, 1.8, 1.5, -h, 0, 0.85, 0.45, 0.5);\n  }\n  // Tibia and the thinner fibula behind it.\n  FR.set([kx, ky, z, ex, ey, 0, ey, -ex, 0, 0, 0, s, -t2]);\n  if (!bone) Tb(FL, 0, 0, 0, LS, 0, 0, 4.2, 2.4, 1), E(FL, 8, -1.6, 0, 3, 6.5, 3.2, 0, 0, 1);\n  else {\n    E(FL, 1.9, 0, 0, 2.8, 1.4, 3.3, 0, 0, 0.7, 0.5, 0.5);\n    Tb(FL, 3, 0.3, 0, LS - 1.8, 0, 0, 1.75, 1.2, 1, 0.85);\n    E(FL, LS - 1, 0, -0.4, 1.6, 1.7, 2.2, 0, 0, 0.75, 0.5, 0.4);\n    E(FL, 3.6, -1.9, 2, 1, 1, 1, 0, 0, 0.8);\n    Tb(FL, 4, -1.9, 2, LS - 0.8, -1, 2.4, 0.7, 0.6, 0.95, 0.3);\n    E(FL, LS + 0.3, -1, 2.6, 1, 1.5, 1, 0, 0, 0.8);\n  }\n  // Foot: talus, heel, arch, two metatarsals for five, and toes that stay flat\n  // on the belt as the heel lifts.\n  FR.set([ax, ay, z, fx, fy, 0, -fy, fx, 0, 0, 0, s, -t3]);\n  if (!bone) return Tb(FL, -3, 2.6, 0, 10, 3, 0, 2.3, 1.6, 1);\n  E(FL, 0.6, 1, 0, 2.2, 1.5, 1.6, 0, 0, 0.8, 0.5, 0.5);\n  E(FL, -2.4, 2.9, 0, 3.3, 1.8, 1.6, -0.3, 0, 0.8, 0.6, 0.55);\n  E(FL, 3.3, 1.7, 0, 1.5, 1.3, 1.8, 0, 0, 0.85);\n  E(FL, 2.6, 3.1, 0, 1.2, 1, 1.2, 0, 0, 0.8);\n  Tb(FL, 4.4, 1.9, 0, 9.2, 3.5, 0, 0.65, 0.6, 1, 0.3);\n  Tb(FL, 3.6, 3.4, 1, 8.4, 3.9, 1, 0.55, 0.5, 0.9);\n  FL(9.2, 3.5, 0);\n  const d = t3 \u003c 0 ? -t3 * (1 - sm(0.4, 3, FLOOR - OY - gy - 1.1)) : 0, c = cos(d), n = -sin(d);\n  Tb(FL, 9.2, 3.5, 0, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 0.5, 0.45, 0.95);\n  Tb(FL, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 9.2 + c * 4.2, 3.5 + n * 4.2, 0, 0.45, 0.4, 0.9);\n}\n\nfunction arm(s, sig, eps, k, wv) {\n  FT(-1, -33, s * SZ);\n  const sx = gx, sy = gy, sz = gz, au = sig + LAM, af = au + eps, V = AV;\n  // Axes of the upper arm and forearm, and the thumb side of the hand. In the\n  // wave the elbow goes out to the side and the forearm up, palm to you.\n  V.set([sin(au), cos(au), s * 0.1, sin(af), cos(af), s * 0.04, cos(af), -sin(af), 0]);\n  if (k > 0) {\n    const A = [0.2, 0.62, s * 0.76, 0.15, -cos(wv), s * (sin(wv) - 0.1), 0, 0, -s];\n    for (let j = 0; j \u003c 9; j++) V[j] = mix(V[j], A[j], k);\n  }\n  for (let j = 0; j \u003c 9; j += 3) {\n    const d = j === 6 ? V[6] * V[3] + V[7] * V[4] + V[8] * V[5] : 0;\n    for (let c = 0; c \u003c 3; c++) V[j + c] -= d * V[3 + c];\n    const l = hypot(V[j], V[j + 1], V[j + 2]) || 1;\n    for (let c = 0; c \u003c 3; c++) V[j + c] /= l;\n  }\n  const [ux, uy, uz, fx, fy, fz, px, py, pz] = V, ex = sx + LU * ux, ey = sy + LU * uy, ez = sz + LU * uz;\n  // The forearm's frame from the elbow, its third axis toward the palm.\n  FR.set([ex, ey, ez, fx, fy, fz, px, py, pz, s * (fy * pz - fz * py), s * (fz * px - fx * pz), s * (fx * py - fy * px), -af]);\n  if (TG === T) {\n    Tb(FB, sx, sy, sz, ex, ey, ez, 2.8, 2.2, 1);\n    Tb(FL, 0, 0, 0, LF, 0, 0, 2.2, 1.6, 1);\n    return Tb(FL, LF, 0, 0, LF + 7, 0, 0, 1.5, 1.1, 1);\n  }\n  // Humerus, ulna with the point of the elbow, radius, wrist, four fingers\n  // curled a little toward the palm, thumb.\n  E(FB, sx, sy, sz, 2.2, 2.2, 2.2, 0, 0, 0.8, 0.7, 0.5);\n  Tb(FB, sx + ux * 1.8, sy + uy * 1.8, sz + uz * 1.8, ex - ux * 1.3, ey - uy * 1.3, ez - uz * 1.3, 1.35, 1.15, 1, 0.85);\n  E(FB, ex - ux * 0.8, ey - uy * 0.8, ez - uz * 0.8, 1.3, 1.5, 2.5, -au, 0, 0.8, 0.5, 0.5);\n  E(FL, 0.3, -1, 0, 1, 1, 1, 0, 0, 0.9);\n  Tb(FL, 0.8, -0.5, 0, LF, -0.5, 0, 0.75, 0.55, 1, 0.5);\n  Tb(FL, 1.2, 0.5, 0, LF, 0.55, 0, 0.6, 0.95, 1, 0.5);\n  E(FL, LF + 1.4, 0, 0, 1.5, 1.3, 1.5, 0, 0, 0.9, 0.5, 0.4);\n  const c0 = mix(0.3, 0.06, k);\n  for (let j = 0; j \u003c 5; j++) {\n    const th = j > 3, o = th ? 2.2 : FO[j];\n    let x = LF + (th ? 3.2 : 5.8), y = o, z = 0, c = 0;\n    Tb(FL, LF + (th ? 1 : 2.2), th ? 0.9 : o / 2, 0, x, y, z, 0.5, 0.45, 0.95);\n    for (let m = 0; m \u003c (th ? 2 : 3); m++) {\n      c += c0;\n      const L = th ? 2 - 0.4 * m : FLN[j] * PHL[m], X = x + cos(c) * L, Y = y + (th ? 0.7 * L : 0), Z = z + sin(c) * L;\n      Tb(FL, x, y, z, X, Y, Z, 0.42, 0.36, 0.9);\n      (x = X), (y = Y), (z = Z);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const g = S.gait, a = S.amp, p = S.ph, u = S.jump, tt = S.turn, b = sin(2 * PI * S.br);\n  const wj = u \u003c 0 ? 0 : sm(0, 0.2, u) * (1 - sm(1.15, 1.5, u));\n  const tf = tt \u003c 0 ? 0 : sm(0.5, 1.4, tt) * (1 - sm(3.8, 4.7, tt));\n  const wave = tt \u003c 0 ? 0 : sm(1.4, 1.9, tt) * (1 - sm(3.3, 3.8, tt));\n  PSI = (PI / 2) * tf;\n  (CP = cos(PSI)), (SP = sin(PSI));\n  LAM = (mix(4, 11, g) * a + (wj ? key(JK[5], u) * wj : 0)) * D;\n  (LC = cos(LAM)), (LSN = sin(LAM));\n  // Legs half a stride apart, arms swinging against them; the lowest heel or\n  // ball stands on the belt.\n  let low = 0;\n  for (let i = 0; i \u003c 2; i++) {\n    const q = p + 0.5 * i, c = cos(2 * PI * q);\n    let th = ang(0, q, g) * a, kn = ang(1, q, g) * a + 3, an = ang(2, q, g) * a;\n    let sg = mix(-5 - 17 * c, -12 - 28 * c, g) * a, ep = mix(8, mix(14 + 8 * (1 - c), 80 + 9 * (1 - c), g), a);\n    if (wj) {\n      (th = mix(th, key(JK[0], u), wj)), (kn = mix(kn, key(JK[1], u), wj)), (an = mix(an, key(JK[2], u), wj));\n      (sg = mix(sg, key(JK[3], u), wj)), (ep = mix(ep, key(JK[4], u), wj));\n    }\n    const t1 = (LA[i * 3] = th * D), t2 = (LA[i * 3 + 1] = (th - kn) * D), t3 = (LA[i * 3 + 2] = (th - kn + an) * D);\n    const ay = LT * cos(t1) + LS * cos(t2);\n    low = max(low, ay + 4 * sin(t3) + 4.9 * cos(t3), ay - 9.2 * sin(t3) + 4.6 * cos(t3));\n    (AR[i * 2] = sg * D), (AR[i * 2 + 1] = ep * D);\n  }\n  // A run leaves the belt between steps; a jump leaves it higher.\n  const fl = g * g * a * 3.2 * max(0, (cos(4 * PI * (p - 0.45)) - 0.75) * 4) ** 1.5;\n  const v = (u - 0.46) / 0.44;\n  OY = FLOOR - low - fl - (v > 0 && v \u003c 1 ? 32 * v * (1 - v) : 0);\n  OX = mix(26.5 + 2.5 * g, 35, tf);\n  FT(-2.1, -41.4, 0);\n  (HX = gx), (HY = gy);\n  ETA = -LAM * 0.85 + 0.035 * sin(4 * PI * p) * a;\n  (HC = cos(ETA)), (HS = sin(ETA));\n  JA = 0.2 * wave * (0.6 + 0.4 * sin(tt * 9));\n  (JC = cos(JA)), (JS = sin(JA));\n  const wv = 0.3 * sin((tt - 1.9) * 2 * PI * 1.7) * sm(1.6, 2, tt);\n\n  B.fill(0);\n  T.fill(0);\n  TG = B;\n  treadmill(S.belt);\n  skull();\n  trunk(b);\n  for (let r = 0; r \u003c 2; r++) {\n    TG = r ? T : B;\n    leg(0, 1);\n    leg(1, -1);\n    arm(1, AR[0], AR[1], wave, wv);\n    arm(-1, AR[2], AR[3], 0, 0);\n  }\n  if (S.dose > 0.001) flesh(b);\n\n  // The screen turns bone and flesh to light. An afterglow fades behind what\n  // moves, and bright bone blooms a little.\n  const x3 = S.scr * 3, pi = min(2, floor(x3));\n  for (let j = 0; j \u003c 6; j++) PC[j] = mix(PAL[pi][j], PAL[pi + 1][j], x3 - pi);\n  const dec = exp(-S.dt / 0.07), gd = 0.62 * sqrt(S.dose), bg = S.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) GB[r + x] = 0.5 * G[r + x] + 0.25 * (G[r + (x ? x - 1 : x)] + G[r + (x \u003c W - 1 ? x + 1 : x)]);\n  for (let q = 0; q \u003c N; q++) {\n    const e = B[q] > 0 ? (1 - exp(-0.3 * B[q])) ** 1.35 : 0, t = T[q] > 0 ? gd * (1 - exp(-T[q] / 12)) : 0;\n    B[q] = e + t * (1 - e);\n    G[q] = max(B[q], GB[q] * dec);\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += B[r + cl(x + d, 0, W - 1)];\n      T[r + x] = a / 5;\n    }\n  const ch = (j, lv, w, ag) => min(255, 255 * (lv * (PC[j] + (1 - PC[j]) * w) + ag * PC[j + 3]));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += T[cl(y + d, 0, H - 1) * W + x];\n      const q = y * W + x, L = B[q], ag = (G[q] - L) * 0.3, lv = L + bg[q] + 0.045 * a, w = L * L * L * 0.75;\n      display.setPixel(x, y, ch(0, lv, w, ag), ch(1, lv, w, ag), ch(2, lv, w, ag));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Screen","min":0,"max":1,"about":"The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour."},{"name":"Speed","min":0.2,"max":3,"about":"The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower."},{"name":"Gait","min":0,"max":1,"about":"A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps."},{"name":"Dose","min":0,"max":1,"about":"The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body."}],"start":[0,2,0,0.06],"measures":{"motion":0.988,"detail":0.0374,"edges":0.3589,"complexity":1.506,"coverage":0.2562,"colour":0.1011,"drift":0.06},"knobResponse":[0.0534,0.0544,0.0908,0.0578]},{"slug":"flying-trapeze","title":"Flying Trapeze","family":"stage","round":24,"note":"밤의 서커스 천막 꼭대기를 올려다봐요. 빨강과 크림 줄무늬 천 아래에서 플라이어가 공중그네를 타고 나가 공중제비를 돌고, 무릎으로 매달린 캐처가 손을 잡아요. 팔로 스폿 셋이 연무 속에 빛줄기를 그으며 따라가고, 차례가 끝나면 그물로 떨어져 튀어 올라요. K1 을 누르면 북이 울리고 세 바퀴 공중제비가 나와요.","idea":"Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.","buttons":"K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.","code":"// ===== Patternflow pattern =====\n// Title:   Flying Trapeze\n// Family:  stage\n// Idea:    Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the flying trapeze act Jules Léotard first flew at the Cirque Napoléon in 1859\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1\n//\n// Knob 1: Lights. The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them.\n// Knob 2: Speed. How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Turns. The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer.\n// Knob 4: Haze. How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels.\n// Buttons: K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, ceil, round, atan2, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (s) => s - sin(TAU * s) * (0.8 / TAU);\nconst rnd = () => Math.random();\n// A swing of the fly bar out and back, in seconds at Speed 2.\nconst PB = 2.4;\nconst OM = TAU / PB;\n// The fly bar's crane and rope; the catcher's cradle, rope and swing.\nconst [PFX, PFY, LF] = [24, 30, 34];\nconst [PCX, PCY, LC, B] = [57, 30, 20, 0.18];\n// The board's top, where the next flyer waits on it, and the rope ladder.\nconst [BY, WX, LX] = [68, 1.2, 2.6];\n// Hips above feet, hands above hips, gravity, and the time of the flight back to the bar.\nconst [LEG, HL, G, TR] = [3.8, 5.7, 90, 0.45];\n// Follow spots below the panel behind the crowd, and how fast their cones open.\nconst SPOT = [[-14, 166], [78, 166], [32, 186]];\nconst TA = 0.046;\n// Gels by the Lights knob: house wash (0..1), three spots, two flyers and the catcher.\nconst PAL = [\n  [[1, 0.8, 0.52], [255, 226, 170], [255, 244, 222], [255, 206, 120], [255, 182, 36], [205, 222, 255], [70, 120, 255]],\n  [[1, 0.64, 0.5], [255, 182, 120], [255, 150, 150], [255, 208, 150], [255, 96, 112], [255, 206, 60], [250, 240, 230]],\n  [[0.82, 0.52, 0.86], [255, 122, 196], [186, 142, 255], [255, 166, 214], [255, 62, 196], [160, 104, 255], [110, 236, 214]],\n  [[0.46, 0.44, 1], [255, 76, 170], [66, 128, 255], [172, 96, 255], [255, 44, 156], [36, 150, 255], [245, 245, 255]],\n];\nconst [SKIN, STEEL, ROPE, BAR] = [[255, 196, 156], [170, 176, 190], [150, 138, 116], [215, 215, 225]];\nconst ONNET = { drop: 1, net: 1, up: 1, tada: 1 };\n\nconst mkF = (c) => ({ m: 'wait', x: WX, y: BY - LEG, ph: 0, fs: 1, a1: 2.9, a2: 2.9, l1: 0, l2: 0, k1: 0, k2: 0, hx: null, T: 0, sx: 0, sy: 0, c });\n// Thighs, knees and arms of a figure, both sides.\nconst lim = (f, l1, l2, k1, k2, a1, a2) => Object.assign(f, { l1, l2, k1, k2, a1, a2 });\nconst rest = (f) => ((f.hx = null), lim(f, 0, 0, 0, 0, 2.9, 2.9));\nconst barAt = (th) => [PFX + LF * sin(th), PFY + LF * cos(th)];\nconst netY = (x) => 98.5 + 1.6 * sin((PI * cl(x, 0, 63)) / 63);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = {\n    t: 0, started: false, F: F32(N * 3), LT: F32(N * 3), CA: F32(N * 3), CI: F32(N), AUD: F32(N), ROW: new Int8Array(N).fill(-1), POOL: F32(H),\n    bar: 'free', A: 0.55, phc: 0, fl: [mkF(4), mkF(5)], star: 0,\n    sp: SPOT.map(([sx, sy]) => ({ sx, sy, ax: 30, ay: 50, ux: 0, uy: -1, D: 110 })),\n    drum: 0, drumB: 0, pop: 0, wash: 1, trip: false, nextFin: true, turns: 1, net: { s: 0, v: 0, x: 32 }, fx: [], phones: [], P: PAL[0].map((c) => c.slice()), hz: 0.3,\n  };\n  // The canvas: red and cream panels running down from the peak, each billowing between its seams.\n  for (let y = 0; y \u003c H; y++) {\n    S.POOL[y] = exp(-(((y - 17) / 15) ** 2));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, dx = x - 32, dy = y - 5, a = atan2(dx, dy);\n      const red = 0.5 + 0.5 * cl(sin(a * 7) * 4, -1, 1);\n      const k = (0.84 - 0.16 * cos(a * 14)) * sm(2.5, 6, sqrt(dx * dx + dy * dy));\n      S.CA[i * 3] = mix(0.95, 0.88, red) * k;\n      S.CA[i * 3 + 1] = mix(0.86, 0.12, red) * k;\n      S.CA[i * 3 + 2] = mix(0.68, 0.12, red) * k;\n      S.CI[i] = (0.3 + 0.7 * exp(-((dx * dx) / 900 + (dy * dy) / 300))) * sm(40, 20, y);\n    }\n  }\n  // The crowd: rows of heads and shoulders, bigger towards the front, each row a solid band below.\n  [[108.5, 1.9, 4.6], [114, 2.3, 5.4], [120.5, 2.8, 6.4], [127.5, 3.4, 7.6]].forEach(([base, r, gap], k) => {\n    for (let cx = -2 + rnd() * gap; cx \u003c W + 3; cx += gap * (0.8 + 0.4 * rnd())) {\n      const hy = base - r * 1.15 + (rnd() - 0.5) * 1.2, hx = cx + rnd() - 0.5;\n      for (let y = max(0, floor(hy - r - 1)); y \u003c H; y++)\n        for (let x = max(0, floor(hx - r * 2.4)); x \u003c= min(W - 1, ceil(hx + r * 2.4)); x++) {\n          const hd = r + 0.5 - sqrt((x - hx) ** 2 + (y - hy) ** 2);\n          const sh = 1 - sqrt(((x - hx) / (r * 2.2)) ** 2 + ((y - base) / (r * 0.9)) ** 2);\n          const c = y >= base ? 1 : cl(max(hd, sh * r * 2), 0, 1), i = y * W + x;\n          if (c > S.AUD[i]) S.AUD[i] = c;\n          if (c > 0.5) S.ROW[i] = k;\n        }\n      if (rnd() \u003c 0.09) S.phones.push([round(hx + 1), round(hy - r - 1)]);\n    }\n  });\n  params.s = S;\n}\n\n// The catcher at swing angle psi: knees over the bar, body hanging, arms reaching for the flyer.\nfunction cpose(psi) {\n  const ps = psi * 1.2, bx = PCX + LC * sin(psi), by = PCY + LC * cos(psi), sx = sin(ps), sy = cos(ps);\n  const hx = bx + 1.9 * sx, hy = by + 1.9 * sy;\n  const ax = sx * cos(0.2) - sy * sin(0.2), ay = sy * cos(0.2) + sx * sin(0.2);\n  return { bx, by, x: hx, y: hy, ph: PI - ps, fs: 1, l1: 0, l2: 0, k1: 1.5, k2: 1.3, hx: hx + 3 * sx + 2.7 * ax, hy: hy + 3 * sy + 2.7 * ay };\n}\n\nfunction newRound(S, go, who) {\n  const trip = S.trip, turns = trip ? 3 : S.turns, fin = trip || S.nextFin, tf = 0.75 + 0.25 * turns, tr = go + 1.5 * PB;\n  S.trip = false;\n  S.nextFin = !fin;\n  S.rd = { turns, fin, tf, h: 8 + 3 * turns, tg: go, tr, tc: tr + tf, rel: false, A0: S.A, A: 0.55 + 0.03 * (turns - 1), t0: S.t, over: false };\n  S.star = who;\n  // The catcher times his swing to be out at the front of it when she arrives.\n  const dt = max(0.3, S.rd.tc - S.t);\n  let k = round((S.phc + OM * dt) / TAU);\n  if ((TAU * k - S.phc) / dt \u003c 0.6 * OM) k++;\n  S.ct = { ph: TAU * k, t: S.rd.tc, ev: 0 };\n}\n\nconst burst = (S, n) => {\n  for (let i = 0; i \u003c n; i++) S.fx.push({ x: 2 + rnd() * 60, y: 106 + rnd() * 20, a: 1, w: rnd() * 0.25 });\n};\n\nfunction catcherEvent(S, ev) {\n  const rd = S.rd, f = S.fl[S.star];\n  f.T = 0;\n  f.ph0 = f.ph;\n  if (ev === 0) {\n    // The catch: the house comes up and the crowd's cameras go off.\n    if (f.m === 'fly') f.m = 'caught';\n    burst(S, 7, (S.pop = 1));\n    S.ct = rd.fin ? { ph: S.phc + 1.5 * PI, t: S.t + 2.4, ev: 2 } : { ph: S.phc + TAU, t: rd.tg + 3.5 * PB - TR, ev: 1 };\n  } else if (ev === 1) [f.m, f.sx, f.sy] = ['ret', f.x, f.y];\n  else {\n    // He lets her go on the swing back, and she falls turning over into the net.\n    [f.m, f.vx, f.vy] = ['drop', f.vx0, f.vy0];\n    const dy = netY(f.x + f.vx * 0.9) - 1 - f.y;\n    f.TF = (-f.vy + sqrt(f.vy * f.vy + 2 * G * max(1, dy))) / G;\n    rd.over = true;\n  }\n}\n\nfunction stepFlyer(S, f, d, i) {\n  const rd = S.rd, t = S.t, th = S.th, [hbx, hby] = barAt(-S.A), [bx, by] = barAt(th), nt = S.net;\n  f.T += d;\n  switch (f.m) {\n    case 'wait':\n    case 'hold': {\n      // Standing on the board; the one whose turn it is steps up and takes the bar.\n      const h = f.m === 'hold', gx = h ? hbx - 1 : WX;\n      rest(f);\n      f.x += cl(gx - f.x, -7 * d, 7 * d);\n      [f.fs, f.y, f.ph] = [1, BY - LEG, h ? 0.12 * sm(3, 0.5, abs(gx - f.x)) : 0.04 * sin(t * 1.3 + i)];\n      if (!h) break;\n      if (abs(gx - f.x) \u003c 1.5) [f.hx, f.hy] = [hbx, hby];\n      if (t >= rd.tg) [S.bar, f.m, f.T, f.sx, f.sy] = ['free', 'swing', 0, f.x, f.y];\n      break;\n    }\n    case 'swing':\n    case 'ride': {\n      f.fs = f.m === 'ride' ? -1 : 1;\n      const k = f.m === 'swing' ? sm(0, 0.3, f.T) : 1, u = (f.fs * th) / S.A;\n      [f.x, f.y, f.ph] = [mix(f.sx, bx + HL * sin(th), k), mix(f.sy, by + HL * cos(th), k), -th * k];\n      // Legs lead at the front of each swing and trail at the back.\n      const l = (0.95 * max(0, u) + 0.35 * min(0, u)) * k;\n      lim(f, l, l, 0.25 * max(0, -u) * k, 0.25 * max(0, -u) * k, f.a1, f.a2);\n      [f.hx, f.hy] = [bx, by];\n      if (f.m === 'swing' && !rd.rel && t >= rd.tr) {\n        // Let go at the top of the swing, aimed at where the catcher's hands will be.\n        const c = cpose(-B);\n        rd.rel = true;\n        Object.assign(f, { m: 'fly', Rx: f.x, Ry: f.y, Cx: c.hx + HL * sin(-0.8 * B), Cy: c.hy + HL * cos(-0.8 * B), phR: f.ph, pkR: f.l1, hx: null });\n      }\n      if (f.m === 'ride' && t >= rd.tg + 4 * PB) {\n        // Home on the board. The flyer who was waiting takes the bar next.\n        S.bar = 'hook';\n        rd.over = true;\n        [f.m, f.T, f.sx, f.sy] = ['land', 0, f.x, f.y];\n        const o = S.fl[1 - i];\n        if (o.m === 'wait') o.m = 'hold';\n        f.next = o.m === 'hold' ? 'wait' : 'hold';\n        newRound(S, t + 1.1, o.m === 'hold' ? 1 - i : i);\n      }\n      break;\n    }\n    case 'fly': {\n      const s = cl((t - rd.tr) / rd.tf, 0, 1), u = sm(0.04, 0.22, s) * (1 - sm(0.7, 0.9, s));\n      [f.x, f.y, f.ph] = [mix(f.Rx, f.Cx, s), mix(f.Ry, f.Cy, s) - 4 * rd.h * s * (1 - s), mix(f.phR, 0.8 * B - TAU * rd.turns, ease(s))];\n      const l = max(f.pkR * (1 - sm(0, 0.12, s)), 2.2 * u);\n      lim(f, l, l, 2.4 * u, 2.4 * u, 2 * u, 2 * u);\n      break;\n    }\n    case 'caught': {\n      const c = S.cp, tp = S.psi * 0.8;\n      [f.x, f.y, f.ph, f.fs, f.hx, f.hy] = [c.hx + HL * sin(tp), c.hy + HL * cos(tp), -tp, 1, c.hx, c.hy];\n      lim(f, 0.4 * sin(S.phc + 0.6), 0.4 * sin(S.phc + 0.6), 0, 0, 0, 0);\n      break;\n    }\n    case 'ret': {\n      // A half turn in the air and back to the fly bar, which comes out to meet her.\n      const s = cl(f.T / TR, 0, 1), [ex, ey] = barAt(rd.A);\n      [f.x, f.y, f.ph, f.fs] = [mix(f.sx, ex + HL * sin(rd.A), s), mix(f.sy, ey + HL * cos(rd.A), s) - 18 * s * (1 - s), mix(f.ph0, -rd.A, s), s \u003c 0.5 ? 1 : -1];\n      const a = sin(PI * s);\n      f.hx = null;\n      lim(f, 0.3 * a, 0.3 * a, 0, 0, 1.3 * a, -1.3 * a);\n      if (s >= 1) f.m = 'ride';\n      break;\n    }\n    case 'land': {\n      const k = sm(0, 0.35, f.T);\n      rest(f);\n      [f.x, f.y, f.ph, f.hx, f.hy] = [mix(f.sx, hbx - 1, k), mix(f.sy, BY - LEG, k), mix(f.ph, 0, k), hbx, hby];\n      if (f.T > 0.4) f.m = f.next;\n      break;\n    }\n    case 'drop': {\n      f.vy += G * d;\n      [f.x, f.y] = [f.x + f.vx * d, f.y + f.vy * d];\n      const s = cl(f.T / f.TF, 0, 1), u = sm(0.1, 0.3, s) * (1 - sm(0.62, 0.85, s));\n      f.ph = mix(f.ph0, -PI / 2 - TAU, ease(s));\n      lim(f, 2.2 * u, 2.2 * u, 2.4 * u, 2.4 * u, 0.6 + 1.4 * u, 0.6 + 1.4 * u).hx = null;\n      if (f.y >= netY(f.x) - 1) {\n        [f.m, f.T, nt.x] = ['net', 0, f.x];\n        S.pop = max(S.pop, 0.8);\n        burst(S, 6);\n      }\n      break;\n    }\n    case 'net': {\n      // Bouncing on her back: a stiff spring while she is in the net, a fall while she is out.\n      const n = max(1, ceil(d / 0.006)), h = d / n;\n      for (let j = 0; j \u003c n; j++) {\n        const pen = f.y - (netY(f.x) - 1);\n        f.vy += (G - (pen > 0 ? 420 * pen + 7 * f.vy : 0)) * h;\n        [f.y, f.x, f.vx] = [f.y + f.vy * h, f.x + f.vx * h, f.vx * (1 - 2.5 * h)];\n        if (pen > 0) [nt.s, nt.v] = [pen, f.vy];\n        else (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s += nt.v * h);\n      }\n      [nt.x, nt.hold, f.ph] = [f.x, true, -PI / 2];\n      lim(f, 0.6, 0.6, 0.4, 0.4, 1.6 + 0.5 * sin(f.T * 9), 1.6 - 0.5 * sin(f.T * 9));\n      if (f.T > 2.6) [f.m, f.T, f.sy] = ['up', 0, f.y];\n      break;\n    }\n    case 'up':\n    case 'tada':\n    case 'walk': {\n      nt.s += (1.5 - nt.s) * min(1, d * 8);\n      [nt.v, nt.x, nt.hold] = [0, f.x, true];\n      const top = netY(f.x) + nt.s - LEG - 0.6;\n      if (f.m === 'up') {\n        const k = sm(0, 0.5, f.T);\n        rest(f);\n        [f.ph, f.y] = [mix(-PI / 2, 0, k), mix(f.sy, top, k)];\n        if (f.T > 0.55) [f.m, f.T] = ['tada', 0];\n      } else if (f.m === 'tada') {\n        // Arms up for the crowd.\n        [f.ph, f.y] = [0, top];\n        lim(f, 0, 0, 0, 0, 0.55, -0.55);\n        if (f.T > 0.8) [f.m, f.T] = ['walk', 0];\n      } else {\n        // Bouncing along the net to the ladder.\n        const w = sin(f.T * 8);\n        [f.fs, f.x, f.y, f.ph] = [-1, f.x - 13 * d, top - 1.1 * abs(w), 0];\n        lim(f, 0.5 * w, -0.5 * w, 0, 0, PI - 0.5 * w, PI + 0.5 * w);\n        if (f.x \u003c= LX) [f.m, f.T] = ['climb', 0];\n      }\n      break;\n    }\n    case 'climb': {\n      // Up the rope ladder to the board.\n      const w = sin(f.T * 9);\n      [f.x, f.y, f.fs, f.ph, f.hx] = [LX, f.y - 12 * d, -1, 0, null];\n      const p = max(0, w), q = max(0, -w);\n      lim(f, 0.9 * p, 0.9 * q, 1.5 * p, 1.5 * q, 0.35 + 0.45 * w, 0.35 - 0.45 * w);\n      if (f.y \u003c= BY - LEG) [f.y, f.m] = [BY - LEG, 'wait'];\n      break;\n    }\n  }\n  if (d > 0) [f.vx0, f.vy0] = [(f.x - f.px) / d, (f.y - f.py) / d];\n  [f.px, f.py] = [f.x, f.y];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], rdt = cl(dt || 0, 0, 0.1), d = rdt * (cl(kv[1], 0.2, 3) / 2);\n  const u = cl(kv[0], 0, 1) * 3, pi = min(2, floor(u));\n  for (let j = 0; j \u003c 7; j++) for (let c = 0; c \u003c 3; c++) S.P[j][c] = mix(PAL[pi][j][c], PAL[pi + 1][j][c], u - pi);\n  [S.turns, S.hz] = [cl(round(kv[2]), 1, 3), 0.26 + 0.74 * cl(kv[3], 0, 1)];\n  if (!S.started) {\n    // Open mid-act: the first flyer is already out on her first swing.\n    [S.started, S.fl[0].m, S.fl[0].T] = [true, 'swing', 1];\n    newRound(S, -0.9, 0);\n    [S.A, S.phc] = [S.rd.A, S.ct.ph - OM * S.rd.tc];\n  }\n  const tp = S.t, t = (S.t += d), rd = S.rd;\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drum roll: this trick becomes the triple if she has not let go yet, else the next one.\n    S.drumB = 1;\n    if (!rd.rel && !rd.over) {\n      Object.assign(rd, { turns: 3, fin: true, tf: 1.5, h: 17, tc: rd.tr + 1.5 });\n      S.nextFin = false;\n      if (S.ct && S.ct.ev === 0) S.ct.t = rd.tc;\n    } else S.trip = true;\n  }\n  S.A = S.bar === 'hook' && !rd.over ? mix(rd.A0, rd.A, sm(rd.t0, rd.tg, t)) : rd.A;\n  S.th = S.bar === 'hook' ? -S.A : -S.A * cos(OM * (t - rd.tg));\n  // The catcher, phase-locked to the next thing he has to be on time for.\n  const ct = S.ct, rem = ct ? ct.t - tp : 0;\n  S.phc = ct ? (rem \u003c= d ? ct.ph : S.phc + ((ct.ph - S.phc) * d) / rem) : S.phc + OM * d;\n  S.cp = cpose((S.psi = -B * cos(S.phc)));\n  if (ct && rem \u003c= d) (S.ct = null), catcherEvent(S, ct.ev);\n  const nt = S.net, h = min(d, 0.02);\n  nt.hold = false;\n  S.fl.forEach((f, i) => stepFlyer(S, f, d, i));\n  // An empty net rings and settles.\n  if (!nt.hold) (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s = (nt.s + nt.v * h) * exp(-d * 3));\n  // After a drop the bar swings empty until it comes back to the board and the next flyer hooks it.\n  const R = S.rd;\n  const w = S.fl.findIndex((f) => f.m === 'wait');\n  if (R.over && S.bar === 'free' && w >= 0 && floor((t - R.tg) / PB) > floor((tp - R.tg) / PB)) [S.bar, S.fl[w].m] = ['hook', 'hold'], newRound(S, t + 0.7, w);\n  // Light cues: the house dims for the drum roll, more for a bigger trick, and comes up on the catch.\n  const r = S.rd, star = S.fl[S.star];\n  const roll = (!r.rel && t > r.tg + 0.5 * PB) || star.m === 'fly' || S.drumB > 0 ? 1 : 0;\n  S.drum += (roll - S.drum) * (1 - exp(-d * 4));\n  S.drumB = max(0, S.drumB - rdt * 0.4);\n  S.pop *= exp(-d * 0.9);\n  S.wash = (1 - S.drum * (0.3 + 0.22 * (r.turns - 1))) * (1 + 0.8 * S.pop);\n  // The follow spots: two on the flyer, the third on the catcher unless the trick is big.\n  const fin = S.fl.find((f) => ONNET[f.m]);\n  const tg = [fin || star, fin && t \u003c r.tg + 0.4 ? fin : star, S.drum > 0.5 && r.turns >= 2 ? star : { x: S.cp.x, y: S.cp.y + 3 }];\n  const k = 1 - exp(-d * 8);\n  S.sp.forEach((s, j) => {\n    const vx = (s.ax += (tg[j].x - s.ax) * k) - s.sx, vy = (s.ay += (tg[j].y - 1 - s.ay) * k) - s.sy, D = (s.D = sqrt(vx * vx + vy * vy));\n    [s.ux, s.uy] = [vx / D, vy / D];\n  });\n  // Camera flashes in the crowd.\n  if (rnd() \u003c rdt * 0.9) burst(S, 1);\n  for (const e of S.fx) e.a -= rdt * 9;\n  S.fx = S.fx.filter((e) => e.a > 0);\n}\n\n// A stroke lit by the light field, with optional sequin sparkle.\nfunction seg(S, ax, ay, bx, by, r, c, sp) {\n  const { F, LT } = S, dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6;\n  const x1 = min(W - 1, ceil(max(ax, bx) + r + 1)), y1 = min(H - 1, ceil(max(ay, by) + r + 1));\n  for (let y = max(0, floor(min(ay, by) - r - 1)); y \u003c= y1; y++)\n    for (let x = max(0, floor(min(ax, bx) - r - 1)); x \u003c= x1; x++) {\n      const t = cl(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1), ex = x - ax - dx * t, ey = y - ay - dy * t;\n      const a = cl(r + 0.5 - sqrt(ex * ex + ey * ey), 0, 1);\n      if (a \u003c= 0) continue;\n      const q = (y * W + x) * 3, s = sp ? 0.72 + 0.56 * rnd() : 1;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += (c[j] * LT[q + j] * s - F[q + j]) * a;\n    }\n}\n\nfunction glow(F, x, y, r, c, k) {\n  for (let yy = max(0, floor(y - r)); yy \u003c= min(H - 1, ceil(y + r)); yy++)\n    for (let xx = max(0, floor(x - r)); xx \u003c= min(W - 1, ceil(x + r)); xx++) {\n      const g = k * exp(-((xx - x) ** 2 + (yy - y) ** 2) / (0.25 * r * r)), q = (yy * W + xx) * 3;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += c[j] * g;\n    }\n}\n\n// A stick figure: hips at (x, y), body angle ph (0 is head up), facing fs.\nfunction fig(S, f, col) {\n  const bx = sin(f.ph), by = -cos(f.ph), nx = cos(f.ph) * f.fs, ny = sin(f.ph) * f.fs;\n  const dv = (a, l) => [(bx * cos(a) + nx * sin(a)) * l, (by * cos(a) + ny * sin(a)) * l];\n  const shx = f.x + bx * 3, shy = f.y + by * 3;\n  for (const [l, k] of [[f.l1, f.k1], [f.l2, f.k2]]) {\n    const [kx, ky] = dv(PI - l, 1.9), [fx, fy] = dv(PI - l + k, 1.9);\n    seg(S, f.x, f.y, f.x + kx, f.y + ky, 0.6, col, 1);\n    seg(S, f.x + kx, f.y + ky, f.x + kx + fx, f.y + ky + fy, 0.5, col, 1);\n  }\n  seg(S, f.x, f.y, shx, shy, 0.8, col, 1);\n  for (const a of [f.a1, f.a2]) {\n    const [ax, ay] = dv(a, 2.7);\n    seg(S, shx, shy, f.hx === null ? shx + ax : f.hx, f.hx === null ? shy + ay : f.hy, 0.42, SKIN, 0);\n  }\n  seg(S, shx + bx * 1.45, shy + by * 1.45, shx + bx * 1.55, shy + by * 1.55, 0.75, SKIN, 0);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { F, LT, CA, CI, AUD, ROW, POOL, P, wash, hz } = S, wc = P[0];\n  const hzA = hz * (0.7 - 0.22 * hz), halo = hz * hz * 0.18, hl = log(max(1, halo * 400));\n  const am = wc.map((v) => v * (0.12 + 0.12 * wash)), kc = 0.48 * 255 * wash, air = 9 * hz * wash;\n  const sp = S.sp.map((s, j) => [s.sx, s.sy, s.ux, s.uy, s.D, ...P[1 + j].map((v) => v / 255)]);\n  for (let y = 0; y \u003c H; y++) {\n    // The ring below the net glows in the house light behind the crowd.\n    const pb = POOL[y], ring = 50 * sm(117, 104, y) * sm(100, 104, y) * wash + air;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3, ci = CI[i] * kc;\n      let r = 4 + wc[0] * ring + CA[q] * wc[0] * ci, g = 4 + wc[1] * ring + CA[q + 1] * wc[1] * ci, b = 9 + wc[2] * ring + CA[q + 2] * wc[2] * ci;\n      let lr = 0, lg = 0, lb = 0;\n      const cv = CI[i] > 0.02 ? 0.9 * pb * sm(0, 0.3, CI[i]) * 255 : 0;\n      for (const s of sp) {\n        const vx = x - s[0], vy = y - s[1], al = vx * s[2] + vy * s[3], pp = abs(vx * s[3] - vy * s[2]), R = 0.8 + al * TA;\n        if (pp \u003c R) {\n          // Lit air along the beam, and past the flyer a pool where it lands on the canvas.\n          const p = sm(R, R * 0.45, pp), k = ((p * (al > s[4] ? 0.8 : 1) * 1.3) / (1 + (al / 110) ** 2)) * hzA * 255, c = cv > 0 && al > s[4] ? cv * p : 0;\n          (lr += s[5] * p), (lg += s[6] * p), (lb += s[7] * p);\n          (r += s[5] * (k + CA[q] * c)), (g += s[6] * (k + CA[q + 1] * c)), (b += s[7] * (k + CA[q + 2] * c));\n        }\n        // Haze scatters a wide glow round each beam.\n        if (pp \u003c (R + 9) * hl) {\n          const h = halo * exp(-pp / (R + 9)) * 255;\n          (r += s[5] * h), (g += s[6] * h), (b += s[7] * h);\n        }\n      }\n      (F[q] = r), (F[q + 1] = g), (F[q + 2] = b);\n      (LT[q] = min(1.25, lr * 1.2 + am[0])), (LT[q + 1] = min(1.25, lg * 1.2 + am[1])), (LT[q + 2] = min(1.25, lb * 1.2 + am[2]));\n    }\n  }\n  const t = S.t;\n  // The king pole, the ring of bulbs round the peak, which chase in a drum roll, and the bale ring.\n  seg(S, 32, 7, 32, 29, 0.7, STEEL, 0);\n  for (let j = 0; j \u003c 22; j++) {\n    const a = (TAU * j) / 22, x = 32 + 20 * sin(a), y = 6.5 + 5 * cos(a), ch = (((j / 22 - t * 0.9) % 1) + 1) % 1 \u003c 0.22 ? 1 : 0;\n    const v = (mix(0.75 + 0.15 * sin(t * 3 + j * 2.1), 0.3 + 0.9 * ch, S.drum) + 0.5 * S.pop) * (0.85 + 0.15 * cos(a));\n    glow(F, x, y, 3.2, [255, 196, 110], 0.42 * v);\n    const q = (round(y) * W + round(x)) * 3;\n    for (let k = 0; k \u003c 3; k++) F[q + k] += [200, 160, 90][k] * v;\n  }\n  seg(S, 30, 5, 34, 5, 1.1, [60, 62, 70], 0);\n  // The rig: a truss under the peak, guy lines, the uprights, the board and the ladder.\n  seg(S, 3, PFY - 2, 61, PFY - 2, 0.4, STEEL, 0);\n  seg(S, 3, PFY, 61, PFY, 0.35, STEEL, 0);\n  for (let x = 5; x \u003c 61; x += 4) seg(S, x, PFY - 2, x + 2, PFY, 0.25, STEEL, 0);\n  seg(S, 4, PFY - 2, 24, 7, 0.25, ROPE, 0);\n  seg(S, 60, PFY - 2, 40, 7, 0.25, ROPE, 0);\n  seg(S, 62, PFY - 2, 62, 103, 0.35, ROPE, 0);\n  seg(S, 0, PFY - 2, 0, BY, 0.35, ROPE, 0);\n  seg(S, 0, BY + 0.6, barAt(-S.rd.A)[0] + 0.4, BY + 0.6, 0.55, [190, 160, 120], 0);\n  seg(S, 1, BY + 1, 1, 97, 0.3, ROPE, 0);\n  seg(S, 4.2, BY + 1, 4.2, 97, 0.3, ROPE, 0);\n  for (let y = BY + 3; y \u003c 97; y += 3) seg(S, 1, y, 4.2, y, 0.25, ROPE, 0);\n  // The safety net, a sagging diamond mesh, dented where a flyer is in it.\n  const nt = S.net;\n  for (let x = 0; x \u003c W; x++) {\n    const dn = nt.s * exp(-(((x - nt.x) / 8) ** 2)), far = 94.5 + 1.2 * sin((PI * x) / 63) + 0.6 * dn, near = 103 + 2 * sin((PI * x) / 63) + dn;\n    for (let y = max(0, floor(far - 1)); y \u003c= min(H - 1, ceil(near + 1)); y++) {\n      const v = (y - far) / (near - far), fa = x * 0.34 + v * 3, fb = x * 0.34 - v * 3;\n      let ln = v > -0.06 && v \u003c 1.06 ? max(sm(0.3, 0.48, abs((fa % 1) - 0.5)), sm(0.3, 0.48, abs((((fb % 1) + 1) % 1) - 0.5))) : 0;\n      ln = max(ln, sm(0.9, 0.2, abs(y - far)), sm(0.9, 0.2, abs(y - near))) * 0.8;\n      const q = (y * W + x) * 3;\n      if (ln > 0) for (let j = 0; j \u003c 3; j++) F[q + j] += ([205, 196, 176][j] * LT[q + j] - F[q + j]) * ln;\n    }\n  }\n  // The fly bar on its ropes, the catcher's cradle, the catcher and the flyers.\n  const [bx, by] = barAt(S.th), c = S.cp;\n  for (const [px, py, x, y] of [[PFX, PFY, bx, by], [PCX, PCY, c.bx, c.by]]) {\n    seg(S, px - 1.2, py, x - 1.2, y, 0.28, ROPE, 0);\n    seg(S, px + 1.2, py, x + 1.2, y, 0.28, ROPE, 0);\n    seg(S, x - 1.8, y, x + 1.8, y, 0.45, BAR, 0);\n  }\n  fig(S, c, P[6]);\n  for (const f of S.fl) fig(S, f, P[f.c]);\n  // The crowd in front of it all, a dark sea, each head rimmed by the light behind it.\n  for (let i = W; i \u003c N; i++) {\n    const a = AUD[i];\n    if (a \u003c= 0) continue;\n    const q = i * 3, k = ROW[i], rim = k > ROW[i - W] ? (1 - 0.2 * k) * a : 0;\n    for (let j = 0; j \u003c 3; j++) F[q + j] += ((12 - 2.5 * k) * wc[j] - F[q + j]) * a + rim * (16 * wash * wc[j] + 60 * max(0, LT[q + j] - 0.3));\n  }\n  // Phones held up to film, and camera flashes.\n  for (const [x, y] of S.phones) if (x >= 0 && x \u003c W - 1) for (let j = 0; j \u003c 6; j++) F[(y * W + x) * 3 + j] += [70, 92, 130][j % 3];\n  for (const e of S.fx) glow(F, e.x, e.y, 2.2, [255, 250, 240], e.a * e.a * (1 - e.w));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-flying-trapeze","type":"code","name":"flying-trapeze","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flying Trapeze\n// Family:  stage\n// Idea:    Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the flying trapeze act Jules Léotard first flew at the Cirque Napoléon in 1859\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1\n//\n// Knob 1: Lights. The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them.\n// Knob 2: Speed. How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Turns. The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer.\n// Knob 4: Haze. How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels.\n// Buttons: K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, ceil, round, atan2, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (s) => s - sin(TAU * s) * (0.8 / TAU);\nconst rnd = () => Math.random();\n// A swing of the fly bar out and back, in seconds at Speed 2.\nconst PB = 2.4;\nconst OM = TAU / PB;\n// The fly bar's crane and rope; the catcher's cradle, rope and swing.\nconst [PFX, PFY, LF] = [24, 30, 34];\nconst [PCX, PCY, LC, B] = [57, 30, 20, 0.18];\n// The board's top, where the next flyer waits on it, and the rope ladder.\nconst [BY, WX, LX] = [68, 1.2, 2.6];\n// Hips above feet, hands above hips, gravity, and the time of the flight back to the bar.\nconst [LEG, HL, G, TR] = [3.8, 5.7, 90, 0.45];\n// Follow spots below the panel behind the crowd, and how fast their cones open.\nconst SPOT = [[-14, 166], [78, 166], [32, 186]];\nconst TA = 0.046;\n// Gels by the Lights knob: house wash (0..1), three spots, two flyers and the catcher.\nconst PAL = [\n  [[1, 0.8, 0.52], [255, 226, 170], [255, 244, 222], [255, 206, 120], [255, 182, 36], [205, 222, 255], [70, 120, 255]],\n  [[1, 0.64, 0.5], [255, 182, 120], [255, 150, 150], [255, 208, 150], [255, 96, 112], [255, 206, 60], [250, 240, 230]],\n  [[0.82, 0.52, 0.86], [255, 122, 196], [186, 142, 255], [255, 166, 214], [255, 62, 196], [160, 104, 255], [110, 236, 214]],\n  [[0.46, 0.44, 1], [255, 76, 170], [66, 128, 255], [172, 96, 255], [255, 44, 156], [36, 150, 255], [245, 245, 255]],\n];\nconst [SKIN, STEEL, ROPE, BAR] = [[255, 196, 156], [170, 176, 190], [150, 138, 116], [215, 215, 225]];\nconst ONNET = { drop: 1, net: 1, up: 1, tada: 1 };\n\nconst mkF = (c) => ({ m: 'wait', x: WX, y: BY - LEG, ph: 0, fs: 1, a1: 2.9, a2: 2.9, l1: 0, l2: 0, k1: 0, k2: 0, hx: null, T: 0, sx: 0, sy: 0, c });\n// Thighs, knees and arms of a figure, both sides.\nconst lim = (f, l1, l2, k1, k2, a1, a2) => Object.assign(f, { l1, l2, k1, k2, a1, a2 });\nconst rest = (f) => ((f.hx = null), lim(f, 0, 0, 0, 0, 2.9, 2.9));\nconst barAt = (th) => [PFX + LF * sin(th), PFY + LF * cos(th)];\nconst netY = (x) => 98.5 + 1.6 * sin((PI * cl(x, 0, 63)) / 63);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = {\n    t: 0, started: false, F: F32(N * 3), LT: F32(N * 3), CA: F32(N * 3), CI: F32(N), AUD: F32(N), ROW: new Int8Array(N).fill(-1), POOL: F32(H),\n    bar: 'free', A: 0.55, phc: 0, fl: [mkF(4), mkF(5)], star: 0,\n    sp: SPOT.map(([sx, sy]) => ({ sx, sy, ax: 30, ay: 50, ux: 0, uy: -1, D: 110 })),\n    drum: 0, drumB: 0, pop: 0, wash: 1, trip: false, nextFin: true, turns: 1, net: { s: 0, v: 0, x: 32 }, fx: [], phones: [], P: PAL[0].map((c) => c.slice()), hz: 0.3,\n  };\n  // The canvas: red and cream panels running down from the peak, each billowing between its seams.\n  for (let y = 0; y \u003c H; y++) {\n    S.POOL[y] = exp(-(((y - 17) / 15) ** 2));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, dx = x - 32, dy = y - 5, a = atan2(dx, dy);\n      const red = 0.5 + 0.5 * cl(sin(a * 7) * 4, -1, 1);\n      const k = (0.84 - 0.16 * cos(a * 14)) * sm(2.5, 6, sqrt(dx * dx + dy * dy));\n      S.CA[i * 3] = mix(0.95, 0.88, red) * k;\n      S.CA[i * 3 + 1] = mix(0.86, 0.12, red) * k;\n      S.CA[i * 3 + 2] = mix(0.68, 0.12, red) * k;\n      S.CI[i] = (0.3 + 0.7 * exp(-((dx * dx) / 900 + (dy * dy) / 300))) * sm(40, 20, y);\n    }\n  }\n  // The crowd: rows of heads and shoulders, bigger towards the front, each row a solid band below.\n  [[108.5, 1.9, 4.6], [114, 2.3, 5.4], [120.5, 2.8, 6.4], [127.5, 3.4, 7.6]].forEach(([base, r, gap], k) => {\n    for (let cx = -2 + rnd() * gap; cx \u003c W + 3; cx += gap * (0.8 + 0.4 * rnd())) {\n      const hy = base - r * 1.15 + (rnd() - 0.5) * 1.2, hx = cx + rnd() - 0.5;\n      for (let y = max(0, floor(hy - r - 1)); y \u003c H; y++)\n        for (let x = max(0, floor(hx - r * 2.4)); x \u003c= min(W - 1, ceil(hx + r * 2.4)); x++) {\n          const hd = r + 0.5 - sqrt((x - hx) ** 2 + (y - hy) ** 2);\n          const sh = 1 - sqrt(((x - hx) / (r * 2.2)) ** 2 + ((y - base) / (r * 0.9)) ** 2);\n          const c = y >= base ? 1 : cl(max(hd, sh * r * 2), 0, 1), i = y * W + x;\n          if (c > S.AUD[i]) S.AUD[i] = c;\n          if (c > 0.5) S.ROW[i] = k;\n        }\n      if (rnd() \u003c 0.09) S.phones.push([round(hx + 1), round(hy - r - 1)]);\n    }\n  });\n  params.s = S;\n}\n\n// The catcher at swing angle psi: knees over the bar, body hanging, arms reaching for the flyer.\nfunction cpose(psi) {\n  const ps = psi * 1.2, bx = PCX + LC * sin(psi), by = PCY + LC * cos(psi), sx = sin(ps), sy = cos(ps);\n  const hx = bx + 1.9 * sx, hy = by + 1.9 * sy;\n  const ax = sx * cos(0.2) - sy * sin(0.2), ay = sy * cos(0.2) + sx * sin(0.2);\n  return { bx, by, x: hx, y: hy, ph: PI - ps, fs: 1, l1: 0, l2: 0, k1: 1.5, k2: 1.3, hx: hx + 3 * sx + 2.7 * ax, hy: hy + 3 * sy + 2.7 * ay };\n}\n\nfunction newRound(S, go, who) {\n  const trip = S.trip, turns = trip ? 3 : S.turns, fin = trip || S.nextFin, tf = 0.75 + 0.25 * turns, tr = go + 1.5 * PB;\n  S.trip = false;\n  S.nextFin = !fin;\n  S.rd = { turns, fin, tf, h: 8 + 3 * turns, tg: go, tr, tc: tr + tf, rel: false, A0: S.A, A: 0.55 + 0.03 * (turns - 1), t0: S.t, over: false };\n  S.star = who;\n  // The catcher times his swing to be out at the front of it when she arrives.\n  const dt = max(0.3, S.rd.tc - S.t);\n  let k = round((S.phc + OM * dt) / TAU);\n  if ((TAU * k - S.phc) / dt \u003c 0.6 * OM) k++;\n  S.ct = { ph: TAU * k, t: S.rd.tc, ev: 0 };\n}\n\nconst burst = (S, n) => {\n  for (let i = 0; i \u003c n; i++) S.fx.push({ x: 2 + rnd() * 60, y: 106 + rnd() * 20, a: 1, w: rnd() * 0.25 });\n};\n\nfunction catcherEvent(S, ev) {\n  const rd = S.rd, f = S.fl[S.star];\n  f.T = 0;\n  f.ph0 = f.ph;\n  if (ev === 0) {\n    // The catch: the house comes up and the crowd's cameras go off.\n    if (f.m === 'fly') f.m = 'caught';\n    burst(S, 7, (S.pop = 1));\n    S.ct = rd.fin ? { ph: S.phc + 1.5 * PI, t: S.t + 2.4, ev: 2 } : { ph: S.phc + TAU, t: rd.tg + 3.5 * PB - TR, ev: 1 };\n  } else if (ev === 1) [f.m, f.sx, f.sy] = ['ret', f.x, f.y];\n  else {\n    // He lets her go on the swing back, and she falls turning over into the net.\n    [f.m, f.vx, f.vy] = ['drop', f.vx0, f.vy0];\n    const dy = netY(f.x + f.vx * 0.9) - 1 - f.y;\n    f.TF = (-f.vy + sqrt(f.vy * f.vy + 2 * G * max(1, dy))) / G;\n    rd.over = true;\n  }\n}\n\nfunction stepFlyer(S, f, d, i) {\n  const rd = S.rd, t = S.t, th = S.th, [hbx, hby] = barAt(-S.A), [bx, by] = barAt(th), nt = S.net;\n  f.T += d;\n  switch (f.m) {\n    case 'wait':\n    case 'hold': {\n      // Standing on the board; the one whose turn it is steps up and takes the bar.\n      const h = f.m === 'hold', gx = h ? hbx - 1 : WX;\n      rest(f);\n      f.x += cl(gx - f.x, -7 * d, 7 * d);\n      [f.fs, f.y, f.ph] = [1, BY - LEG, h ? 0.12 * sm(3, 0.5, abs(gx - f.x)) : 0.04 * sin(t * 1.3 + i)];\n      if (!h) break;\n      if (abs(gx - f.x) \u003c 1.5) [f.hx, f.hy] = [hbx, hby];\n      if (t >= rd.tg) [S.bar, f.m, f.T, f.sx, f.sy] = ['free', 'swing', 0, f.x, f.y];\n      break;\n    }\n    case 'swing':\n    case 'ride': {\n      f.fs = f.m === 'ride' ? -1 : 1;\n      const k = f.m === 'swing' ? sm(0, 0.3, f.T) : 1, u = (f.fs * th) / S.A;\n      [f.x, f.y, f.ph] = [mix(f.sx, bx + HL * sin(th), k), mix(f.sy, by + HL * cos(th), k), -th * k];\n      // Legs lead at the front of each swing and trail at the back.\n      const l = (0.95 * max(0, u) + 0.35 * min(0, u)) * k;\n      lim(f, l, l, 0.25 * max(0, -u) * k, 0.25 * max(0, -u) * k, f.a1, f.a2);\n      [f.hx, f.hy] = [bx, by];\n      if (f.m === 'swing' && !rd.rel && t >= rd.tr) {\n        // Let go at the top of the swing, aimed at where the catcher's hands will be.\n        const c = cpose(-B);\n        rd.rel = true;\n        Object.assign(f, { m: 'fly', Rx: f.x, Ry: f.y, Cx: c.hx + HL * sin(-0.8 * B), Cy: c.hy + HL * cos(-0.8 * B), phR: f.ph, pkR: f.l1, hx: null });\n      }\n      if (f.m === 'ride' && t >= rd.tg + 4 * PB) {\n        // Home on the board. The flyer who was waiting takes the bar next.\n        S.bar = 'hook';\n        rd.over = true;\n        [f.m, f.T, f.sx, f.sy] = ['land', 0, f.x, f.y];\n        const o = S.fl[1 - i];\n        if (o.m === 'wait') o.m = 'hold';\n        f.next = o.m === 'hold' ? 'wait' : 'hold';\n        newRound(S, t + 1.1, o.m === 'hold' ? 1 - i : i);\n      }\n      break;\n    }\n    case 'fly': {\n      const s = cl((t - rd.tr) / rd.tf, 0, 1), u = sm(0.04, 0.22, s) * (1 - sm(0.7, 0.9, s));\n      [f.x, f.y, f.ph] = [mix(f.Rx, f.Cx, s), mix(f.Ry, f.Cy, s) - 4 * rd.h * s * (1 - s), mix(f.phR, 0.8 * B - TAU * rd.turns, ease(s))];\n      const l = max(f.pkR * (1 - sm(0, 0.12, s)), 2.2 * u);\n      lim(f, l, l, 2.4 * u, 2.4 * u, 2 * u, 2 * u);\n      break;\n    }\n    case 'caught': {\n      const c = S.cp, tp = S.psi * 0.8;\n      [f.x, f.y, f.ph, f.fs, f.hx, f.hy] = [c.hx + HL * sin(tp), c.hy + HL * cos(tp), -tp, 1, c.hx, c.hy];\n      lim(f, 0.4 * sin(S.phc + 0.6), 0.4 * sin(S.phc + 0.6), 0, 0, 0, 0);\n      break;\n    }\n    case 'ret': {\n      // A half turn in the air and back to the fly bar, which comes out to meet her.\n      const s = cl(f.T / TR, 0, 1), [ex, ey] = barAt(rd.A);\n      [f.x, f.y, f.ph, f.fs] = [mix(f.sx, ex + HL * sin(rd.A), s), mix(f.sy, ey + HL * cos(rd.A), s) - 18 * s * (1 - s), mix(f.ph0, -rd.A, s), s \u003c 0.5 ? 1 : -1];\n      const a = sin(PI * s);\n      f.hx = null;\n      lim(f, 0.3 * a, 0.3 * a, 0, 0, 1.3 * a, -1.3 * a);\n      if (s >= 1) f.m = 'ride';\n      break;\n    }\n    case 'land': {\n      const k = sm(0, 0.35, f.T);\n      rest(f);\n      [f.x, f.y, f.ph, f.hx, f.hy] = [mix(f.sx, hbx - 1, k), mix(f.sy, BY - LEG, k), mix(f.ph, 0, k), hbx, hby];\n      if (f.T > 0.4) f.m = f.next;\n      break;\n    }\n    case 'drop': {\n      f.vy += G * d;\n      [f.x, f.y] = [f.x + f.vx * d, f.y + f.vy * d];\n      const s = cl(f.T / f.TF, 0, 1), u = sm(0.1, 0.3, s) * (1 - sm(0.62, 0.85, s));\n      f.ph = mix(f.ph0, -PI / 2 - TAU, ease(s));\n      lim(f, 2.2 * u, 2.2 * u, 2.4 * u, 2.4 * u, 0.6 + 1.4 * u, 0.6 + 1.4 * u).hx = null;\n      if (f.y >= netY(f.x) - 1) {\n        [f.m, f.T, nt.x] = ['net', 0, f.x];\n        S.pop = max(S.pop, 0.8);\n        burst(S, 6);\n      }\n      break;\n    }\n    case 'net': {\n      // Bouncing on her back: a stiff spring while she is in the net, a fall while she is out.\n      const n = max(1, ceil(d / 0.006)), h = d / n;\n      for (let j = 0; j \u003c n; j++) {\n        const pen = f.y - (netY(f.x) - 1);\n        f.vy += (G - (pen > 0 ? 420 * pen + 7 * f.vy : 0)) * h;\n        [f.y, f.x, f.vx] = [f.y + f.vy * h, f.x + f.vx * h, f.vx * (1 - 2.5 * h)];\n        if (pen > 0) [nt.s, nt.v] = [pen, f.vy];\n        else (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s += nt.v * h);\n      }\n      [nt.x, nt.hold, f.ph] = [f.x, true, -PI / 2];\n      lim(f, 0.6, 0.6, 0.4, 0.4, 1.6 + 0.5 * sin(f.T * 9), 1.6 - 0.5 * sin(f.T * 9));\n      if (f.T > 2.6) [f.m, f.T, f.sy] = ['up', 0, f.y];\n      break;\n    }\n    case 'up':\n    case 'tada':\n    case 'walk': {\n      nt.s += (1.5 - nt.s) * min(1, d * 8);\n      [nt.v, nt.x, nt.hold] = [0, f.x, true];\n      const top = netY(f.x) + nt.s - LEG - 0.6;\n      if (f.m === 'up') {\n        const k = sm(0, 0.5, f.T);\n        rest(f);\n        [f.ph, f.y] = [mix(-PI / 2, 0, k), mix(f.sy, top, k)];\n        if (f.T > 0.55) [f.m, f.T] = ['tada', 0];\n      } else if (f.m === 'tada') {\n        // Arms up for the crowd.\n        [f.ph, f.y] = [0, top];\n        lim(f, 0, 0, 0, 0, 0.55, -0.55);\n        if (f.T > 0.8) [f.m, f.T] = ['walk', 0];\n      } else {\n        // Bouncing along the net to the ladder.\n        const w = sin(f.T * 8);\n        [f.fs, f.x, f.y, f.ph] = [-1, f.x - 13 * d, top - 1.1 * abs(w), 0];\n        lim(f, 0.5 * w, -0.5 * w, 0, 0, PI - 0.5 * w, PI + 0.5 * w);\n        if (f.x \u003c= LX) [f.m, f.T] = ['climb', 0];\n      }\n      break;\n    }\n    case 'climb': {\n      // Up the rope ladder to the board.\n      const w = sin(f.T * 9);\n      [f.x, f.y, f.fs, f.ph, f.hx] = [LX, f.y - 12 * d, -1, 0, null];\n      const p = max(0, w), q = max(0, -w);\n      lim(f, 0.9 * p, 0.9 * q, 1.5 * p, 1.5 * q, 0.35 + 0.45 * w, 0.35 - 0.45 * w);\n      if (f.y \u003c= BY - LEG) [f.y, f.m] = [BY - LEG, 'wait'];\n      break;\n    }\n  }\n  if (d > 0) [f.vx0, f.vy0] = [(f.x - f.px) / d, (f.y - f.py) / d];\n  [f.px, f.py] = [f.x, f.y];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], rdt = cl(dt || 0, 0, 0.1), d = rdt * (cl(kv[1], 0.2, 3) / 2);\n  const u = cl(kv[0], 0, 1) * 3, pi = min(2, floor(u));\n  for (let j = 0; j \u003c 7; j++) for (let c = 0; c \u003c 3; c++) S.P[j][c] = mix(PAL[pi][j][c], PAL[pi + 1][j][c], u - pi);\n  [S.turns, S.hz] = [cl(round(kv[2]), 1, 3), 0.26 + 0.74 * cl(kv[3], 0, 1)];\n  if (!S.started) {\n    // Open mid-act: the first flyer is already out on her first swing.\n    [S.started, S.fl[0].m, S.fl[0].T] = [true, 'swing', 1];\n    newRound(S, -0.9, 0);\n    [S.A, S.phc] = [S.rd.A, S.ct.ph - OM * S.rd.tc];\n  }\n  const tp = S.t, t = (S.t += d), rd = S.rd;\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drum roll: this trick becomes the triple if she has not let go yet, else the next one.\n    S.drumB = 1;\n    if (!rd.rel && !rd.over) {\n      Object.assign(rd, { turns: 3, fin: true, tf: 1.5, h: 17, tc: rd.tr + 1.5 });\n      S.nextFin = false;\n      if (S.ct && S.ct.ev === 0) S.ct.t = rd.tc;\n    } else S.trip = true;\n  }\n  S.A = S.bar === 'hook' && !rd.over ? mix(rd.A0, rd.A, sm(rd.t0, rd.tg, t)) : rd.A;\n  S.th = S.bar === 'hook' ? -S.A : -S.A * cos(OM * (t - rd.tg));\n  // The catcher, phase-locked to the next thing he has to be on time for.\n  const ct = S.ct, rem = ct ? ct.t - tp : 0;\n  S.phc = ct ? (rem \u003c= d ? ct.ph : S.phc + ((ct.ph - S.phc) * d) / rem) : S.phc + OM * d;\n  S.cp = cpose((S.psi = -B * cos(S.phc)));\n  if (ct && rem \u003c= d) (S.ct = null), catcherEvent(S, ct.ev);\n  const nt = S.net, h = min(d, 0.02);\n  nt.hold = false;\n  S.fl.forEach((f, i) => stepFlyer(S, f, d, i));\n  // An empty net rings and settles.\n  if (!nt.hold) (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s = (nt.s + nt.v * h) * exp(-d * 3));\n  // After a drop the bar swings empty until it comes back to the board and the next flyer hooks it.\n  const R = S.rd;\n  const w = S.fl.findIndex((f) => f.m === 'wait');\n  if (R.over && S.bar === 'free' && w >= 0 && floor((t - R.tg) / PB) > floor((tp - R.tg) / PB)) [S.bar, S.fl[w].m] = ['hook', 'hold'], newRound(S, t + 0.7, w);\n  // Light cues: the house dims for the drum roll, more for a bigger trick, and comes up on the catch.\n  const r = S.rd, star = S.fl[S.star];\n  const roll = (!r.rel && t > r.tg + 0.5 * PB) || star.m === 'fly' || S.drumB > 0 ? 1 : 0;\n  S.drum += (roll - S.drum) * (1 - exp(-d * 4));\n  S.drumB = max(0, S.drumB - rdt * 0.4);\n  S.pop *= exp(-d * 0.9);\n  S.wash = (1 - S.drum * (0.3 + 0.22 * (r.turns - 1))) * (1 + 0.8 * S.pop);\n  // The follow spots: two on the flyer, the third on the catcher unless the trick is big.\n  const fin = S.fl.find((f) => ONNET[f.m]);\n  const tg = [fin || star, fin && t \u003c r.tg + 0.4 ? fin : star, S.drum > 0.5 && r.turns >= 2 ? star : { x: S.cp.x, y: S.cp.y + 3 }];\n  const k = 1 - exp(-d * 8);\n  S.sp.forEach((s, j) => {\n    const vx = (s.ax += (tg[j].x - s.ax) * k) - s.sx, vy = (s.ay += (tg[j].y - 1 - s.ay) * k) - s.sy, D = (s.D = sqrt(vx * vx + vy * vy));\n    [s.ux, s.uy] = [vx / D, vy / D];\n  });\n  // Camera flashes in the crowd.\n  if (rnd() \u003c rdt * 0.9) burst(S, 1);\n  for (const e of S.fx) e.a -= rdt * 9;\n  S.fx = S.fx.filter((e) => e.a > 0);\n}\n\n// A stroke lit by the light field, with optional sequin sparkle.\nfunction seg(S, ax, ay, bx, by, r, c, sp) {\n  const { F, LT } = S, dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6;\n  const x1 = min(W - 1, ceil(max(ax, bx) + r + 1)), y1 = min(H - 1, ceil(max(ay, by) + r + 1));\n  for (let y = max(0, floor(min(ay, by) - r - 1)); y \u003c= y1; y++)\n    for (let x = max(0, floor(min(ax, bx) - r - 1)); x \u003c= x1; x++) {\n      const t = cl(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1), ex = x - ax - dx * t, ey = y - ay - dy * t;\n      const a = cl(r + 0.5 - sqrt(ex * ex + ey * ey), 0, 1);\n      if (a \u003c= 0) continue;\n      const q = (y * W + x) * 3, s = sp ? 0.72 + 0.56 * rnd() : 1;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += (c[j] * LT[q + j] * s - F[q + j]) * a;\n    }\n}\n\nfunction glow(F, x, y, r, c, k) {\n  for (let yy = max(0, floor(y - r)); yy \u003c= min(H - 1, ceil(y + r)); yy++)\n    for (let xx = max(0, floor(x - r)); xx \u003c= min(W - 1, ceil(x + r)); xx++) {\n      const g = k * exp(-((xx - x) ** 2 + (yy - y) ** 2) / (0.25 * r * r)), q = (yy * W + xx) * 3;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += c[j] * g;\n    }\n}\n\n// A stick figure: hips at (x, y), body angle ph (0 is head up), facing fs.\nfunction fig(S, f, col) {\n  const bx = sin(f.ph), by = -cos(f.ph), nx = cos(f.ph) * f.fs, ny = sin(f.ph) * f.fs;\n  const dv = (a, l) => [(bx * cos(a) + nx * sin(a)) * l, (by * cos(a) + ny * sin(a)) * l];\n  const shx = f.x + bx * 3, shy = f.y + by * 3;\n  for (const [l, k] of [[f.l1, f.k1], [f.l2, f.k2]]) {\n    const [kx, ky] = dv(PI - l, 1.9), [fx, fy] = dv(PI - l + k, 1.9);\n    seg(S, f.x, f.y, f.x + kx, f.y + ky, 0.6, col, 1);\n    seg(S, f.x + kx, f.y + ky, f.x + kx + fx, f.y + ky + fy, 0.5, col, 1);\n  }\n  seg(S, f.x, f.y, shx, shy, 0.8, col, 1);\n  for (const a of [f.a1, f.a2]) {\n    const [ax, ay] = dv(a, 2.7);\n    seg(S, shx, shy, f.hx === null ? shx + ax : f.hx, f.hx === null ? shy + ay : f.hy, 0.42, SKIN, 0);\n  }\n  seg(S, shx + bx * 1.45, shy + by * 1.45, shx + bx * 1.55, shy + by * 1.55, 0.75, SKIN, 0);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { F, LT, CA, CI, AUD, ROW, POOL, P, wash, hz } = S, wc = P[0];\n  const hzA = hz * (0.7 - 0.22 * hz), halo = hz * hz * 0.18, hl = log(max(1, halo * 400));\n  const am = wc.map((v) => v * (0.12 + 0.12 * wash)), kc = 0.48 * 255 * wash, air = 9 * hz * wash;\n  const sp = S.sp.map((s, j) => [s.sx, s.sy, s.ux, s.uy, s.D, ...P[1 + j].map((v) => v / 255)]);\n  for (let y = 0; y \u003c H; y++) {\n    // The ring below the net glows in the house light behind the crowd.\n    const pb = POOL[y], ring = 50 * sm(117, 104, y) * sm(100, 104, y) * wash + air;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3, ci = CI[i] * kc;\n      let r = 4 + wc[0] * ring + CA[q] * wc[0] * ci, g = 4 + wc[1] * ring + CA[q + 1] * wc[1] * ci, b = 9 + wc[2] * ring + CA[q + 2] * wc[2] * ci;\n      let lr = 0, lg = 0, lb = 0;\n      const cv = CI[i] > 0.02 ? 0.9 * pb * sm(0, 0.3, CI[i]) * 255 : 0;\n      for (const s of sp) {\n        const vx = x - s[0], vy = y - s[1], al = vx * s[2] + vy * s[3], pp = abs(vx * s[3] - vy * s[2]), R = 0.8 + al * TA;\n        if (pp \u003c R) {\n          // Lit air along the beam, and past the flyer a pool where it lands on the canvas.\n          const p = sm(R, R * 0.45, pp), k = ((p * (al > s[4] ? 0.8 : 1) * 1.3) / (1 + (al / 110) ** 2)) * hzA * 255, c = cv > 0 && al > s[4] ? cv * p : 0;\n          (lr += s[5] * p), (lg += s[6] * p), (lb += s[7] * p);\n          (r += s[5] * (k + CA[q] * c)), (g += s[6] * (k + CA[q + 1] * c)), (b += s[7] * (k + CA[q + 2] * c));\n        }\n        // Haze scatters a wide glow round each beam.\n        if (pp \u003c (R + 9) * hl) {\n          const h = halo * exp(-pp / (R + 9)) * 255;\n          (r += s[5] * h), (g += s[6] * h), (b += s[7] * h);\n        }\n      }\n      (F[q] = r), (F[q + 1] = g), (F[q + 2] = b);\n      (LT[q] = min(1.25, lr * 1.2 + am[0])), (LT[q + 1] = min(1.25, lg * 1.2 + am[1])), (LT[q + 2] = min(1.25, lb * 1.2 + am[2]));\n    }\n  }\n  const t = S.t;\n  // The king pole, the ring of bulbs round the peak, which chase in a drum roll, and the bale ring.\n  seg(S, 32, 7, 32, 29, 0.7, STEEL, 0);\n  for (let j = 0; j \u003c 22; j++) {\n    const a = (TAU * j) / 22, x = 32 + 20 * sin(a), y = 6.5 + 5 * cos(a), ch = (((j / 22 - t * 0.9) % 1) + 1) % 1 \u003c 0.22 ? 1 : 0;\n    const v = (mix(0.75 + 0.15 * sin(t * 3 + j * 2.1), 0.3 + 0.9 * ch, S.drum) + 0.5 * S.pop) * (0.85 + 0.15 * cos(a));\n    glow(F, x, y, 3.2, [255, 196, 110], 0.42 * v);\n    const q = (round(y) * W + round(x)) * 3;\n    for (let k = 0; k \u003c 3; k++) F[q + k] += [200, 160, 90][k] * v;\n  }\n  seg(S, 30, 5, 34, 5, 1.1, [60, 62, 70], 0);\n  // The rig: a truss under the peak, guy lines, the uprights, the board and the ladder.\n  seg(S, 3, PFY - 2, 61, PFY - 2, 0.4, STEEL, 0);\n  seg(S, 3, PFY, 61, PFY, 0.35, STEEL, 0);\n  for (let x = 5; x \u003c 61; x += 4) seg(S, x, PFY - 2, x + 2, PFY, 0.25, STEEL, 0);\n  seg(S, 4, PFY - 2, 24, 7, 0.25, ROPE, 0);\n  seg(S, 60, PFY - 2, 40, 7, 0.25, ROPE, 0);\n  seg(S, 62, PFY - 2, 62, 103, 0.35, ROPE, 0);\n  seg(S, 0, PFY - 2, 0, BY, 0.35, ROPE, 0);\n  seg(S, 0, BY + 0.6, barAt(-S.rd.A)[0] + 0.4, BY + 0.6, 0.55, [190, 160, 120], 0);\n  seg(S, 1, BY + 1, 1, 97, 0.3, ROPE, 0);\n  seg(S, 4.2, BY + 1, 4.2, 97, 0.3, ROPE, 0);\n  for (let y = BY + 3; y \u003c 97; y += 3) seg(S, 1, y, 4.2, y, 0.25, ROPE, 0);\n  // The safety net, a sagging diamond mesh, dented where a flyer is in it.\n  const nt = S.net;\n  for (let x = 0; x \u003c W; x++) {\n    const dn = nt.s * exp(-(((x - nt.x) / 8) ** 2)), far = 94.5 + 1.2 * sin((PI * x) / 63) + 0.6 * dn, near = 103 + 2 * sin((PI * x) / 63) + dn;\n    for (let y = max(0, floor(far - 1)); y \u003c= min(H - 1, ceil(near + 1)); y++) {\n      const v = (y - far) / (near - far), fa = x * 0.34 + v * 3, fb = x * 0.34 - v * 3;\n      let ln = v > -0.06 && v \u003c 1.06 ? max(sm(0.3, 0.48, abs((fa % 1) - 0.5)), sm(0.3, 0.48, abs((((fb % 1) + 1) % 1) - 0.5))) : 0;\n      ln = max(ln, sm(0.9, 0.2, abs(y - far)), sm(0.9, 0.2, abs(y - near))) * 0.8;\n      const q = (y * W + x) * 3;\n      if (ln > 0) for (let j = 0; j \u003c 3; j++) F[q + j] += ([205, 196, 176][j] * LT[q + j] - F[q + j]) * ln;\n    }\n  }\n  // The fly bar on its ropes, the catcher's cradle, the catcher and the flyers.\n  const [bx, by] = barAt(S.th), c = S.cp;\n  for (const [px, py, x, y] of [[PFX, PFY, bx, by], [PCX, PCY, c.bx, c.by]]) {\n    seg(S, px - 1.2, py, x - 1.2, y, 0.28, ROPE, 0);\n    seg(S, px + 1.2, py, x + 1.2, y, 0.28, ROPE, 0);\n    seg(S, x - 1.8, y, x + 1.8, y, 0.45, BAR, 0);\n  }\n  fig(S, c, P[6]);\n  for (const f of S.fl) fig(S, f, P[f.c]);\n  // The crowd in front of it all, a dark sea, each head rimmed by the light behind it.\n  for (let i = W; i \u003c N; i++) {\n    const a = AUD[i];\n    if (a \u003c= 0) continue;\n    const q = i * 3, k = ROW[i], rim = k > ROW[i - W] ? (1 - 0.2 * k) * a : 0;\n    for (let j = 0; j \u003c 3; j++) F[q + j] += ((12 - 2.5 * k) * wc[j] - F[q + j]) * a + rim * (16 * wash * wc[j] + 60 * max(0, LT[q + j] - 0.3));\n  }\n  // Phones held up to film, and camera flashes.\n  for (const [x, y] of S.phones) if (x >= 0 && x \u003c W - 1) for (let j = 0; j \u003c 6; j++) F[(y * W + x) * 3 + j] += [70, 92, 130][j % 3];\n  for (const e of S.fx) glow(F, e.x, e.y, 2.2, [255, 250, 240], e.a * e.a * (1 - e.w));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower."},{"name":"Turns","min":1,"max":3,"about":"The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer."},{"name":"Haze","min":0,"max":1,"about":"How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels."}],"start":[0,2,1,0.06],"measures":{"motion":0.3174,"detail":0.0396,"edges":0.2107,"complexity":1.4663,"coverage":0.506,"colour":0.1821,"drift":0.1332},"knobResponse":[0.0514,0.1017,0.0609,0.161]},{"slug":"foam-lather","title":"Foam Lather","family":"cosmetic","round":31,"note":"거품 클렌저를 낸 거품 사백 개가 패널을 채우고, 작은 거품은 줄어 사라지고 벽이 터지며 둘이 합쳐져요. 위로 갈수록 마른 벌집이 되고 아래는 물기 머금은 둥근 거품이에요. K1 은 색상환을 다 돌고, 누르면 아래에서 고운 거품을 새로 쳐 올려요.","idea":"Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.","buttons":"K1 tap whips a fresh batch of fine lather in from the bottom.","code":"// ===== Patternflow pattern =====\n// Title:   Foam Lather\n// Family:  cosmetic\n// Idea:    Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after cleansing foam whipped into lather\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1\n//\n// Knob 1: Hue. The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white.\n// Knob 2: Speed. How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower.\n// Knob 3: Size. The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up.\n// Knob 4: Wetness. How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid.\n// Buttons: K1 tap whips a fresh batch of fine lather in from the bottom.\n\nconst W = 64, H = 128;\nconst { min, max, floor, sqrt, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: sky blue.\nconst H0 = 0.57;\n// The foam is worked out over a margin M past every edge of the panel, so\n// bubbles at the edge have all their neighbours and the edge is no wall.\nconst M = 6, EW = W + 2 * M, EH = H + 2 * M, EN = EW * EH;\n// At most NB bubbles, each with up to NN neighbours on record.\nconst NB = 1100, NN = 16;\n// Gas through the walls: a bubble's area changes by K*(n - 6) LED^2 a second\n// at Speed 2, n its number of neighbours (von Neumann's law for 2D foam). The\n// 6 is the mean count of the bubbles on the panel, which comes out at 5.9 to\n// 6.1, and the dry foam at the top runs 1.2 times as fast.\nconst K = 1.6;\n// The foam rises RISE rows a second; a batch of lather comes every BATCH\n// seconds and pushes it up BOOST rows a second faster for two seconds.\nconst RISE = 1.2, BATCH = 15, BOOST = 14;\n// Packing grid for the bubbles, CS LEDs a cell.\nconst CS = 6, GX = Math.ceil(EW / CS) + 1, GY = Math.ceil(EH / CS) + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(NB), y: F(NB), r: F(NB), a: F(NB), tone: F(NB), n: 0, dead: new Uint8Array(NB),\n    nb: new Int16Array(NB * NN), nc: new Uint8Array(NB), edge: new Uint8Array(NB), fresh: true,\n    l1: new Int16Array(EN), l2: new Int16Array(EN), p1: F(EN), p2: F(EN),\n    head: new Int16Array(GX * GY), next: new Int16Array(NB),\n    fl: F(32 * 8), nfl: 0, dr: F(96 * 5), ndr: 0,\n    T: 0, since: 0, boost: 0, acc: 0, rate: 1, size: 0, wet: 0.06, hue: 0, started: false,\n    col: F(18), buf: F(W * H * 3),\n  };\n}\n\n// The radius of fresh lather.\nconst fresh = (S) => 2.1 + 3.2 * S.size;\n\nfunction add(S, x, y, r) {\n  if (S.n >= NB) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.r[i] = r;\n  S.a[i] = PI * r * r;\n  S.tone[i] = rnd();\n  S.dead[i] = 0;\n  S.nc[i] = 0;\n  S.edge[i] = 1;\n}\n\n// Liquid fraction at height y: it drains, so the foam is wettest at the\n// bottom; Wetness raises it everywhere.\nfunction liquid(S, y) {\n  const b = cl(y / H, 0, 1), dr = b ** 4;\n  return cl(0.02 + 0.3 * S.wet + (0.2 + 0.1 * S.wet) * dr, 0, 0.4);\n}\n\n// The panel filled with lather that has already risen and coarsened: fine\n// bubbles at the bottom, two and a half times as big at the top.\nfunction fill(S) {\n  S.n = 0;\n  const f = fresh(S);\n  let y = EH - M - f;\n  while (y > -M - 2) {\n    const rr = f * (1 + 1.5 * cl((H - y) / H, 0, 1) ** 1.2);\n    for (let x = -M + rnd() * rr; x \u003c W + M; ) {\n      const r = rr * (0.65 + 0.7 * rnd());\n      add(S, x, y + (rnd() - 0.5) * rr * 0.6, r);\n      x += r * 1.75 + rr * 0.15;\n    }\n    y -= rr * 1.6;\n  }\n  for (let k = 0; k \u003c 60; k++) pack(S, 0.6);\n}\n\n// Bubbles push apart wherever their discs overlap, the small ones giving\n// way more, so the foam stays packed and its cells polygonal.\nfunction pack(S, k) {\n  const { x, y, r, a, head, next } = S;\n  head.fill(-1);\n  let rmax = 0;\n  for (let i = 0; i \u003c S.n; i++) {\n    const gx = cl(floor((x[i] + M) / CS), 0, GX - 1), gy = cl(floor((y[i] + M) / CS), 0, GY - 1), c = gy * GX + gx;\n    next[i] = head[c];\n    head[c] = i;\n    if (r[i] > rmax) rmax = r[i];\n  }\n  for (let i = 0; i \u003c S.n; i++) {\n    const xi = x[i], yi = y[i], ri = r[i], reach = Math.ceil((ri + rmax) / CS);\n    const gx = cl(floor((xi + M) / CS), 0, GX - 1), gy = cl(floor((yi + M) / CS), 0, GY - 1);\n    for (let cy = max(0, gy - reach); cy \u003c= min(GY - 1, gy + reach); cy++)\n      for (let cx = max(0, gx - reach); cx \u003c= min(GX - 1, gx + reach); cx++)\n        for (let j = head[cy * GX + cx]; j >= 0; j = next[j]) {\n          if (j \u003c= i) continue;\n          const dx = x[j] - xi, dy = y[j] - yi, want = (ri + r[j]) * 0.96, d2 = dx * dx + dy * dy;\n          if (d2 >= want * want) continue;\n          const d = sqrt(d2) + 1e-4, push = ((want - d) / d) * k, wi = a[j] / (a[i] + a[j]);\n          x[i] -= dx * push * wi;\n          y[i] -= dy * push * wi;\n          x[j] += dx * push * (1 - wi);\n          y[j] += dy * push * (1 - wi);\n        }\n  }\n  // Soft walls just past the margin at the sides and the bottom.\n  for (let i = 0; i \u003c S.n; i++) {\n    const lo = -M + r[i] * 0.4, hi = W + M - r[i] * 0.4, bot = H + M - r[i] * 0.6;\n    if (x[i] \u003c lo) x[i] += (lo - x[i]) * 0.5;\n    if (x[i] > hi) x[i] += (hi - x[i]) * 0.5;\n    if (y[i] > bot) y[i] += (bot - y[i]) * 0.5;\n  }\n}\n\n// Every LED of the margined grid takes the bubble whose power distance\n// d^2 - r^2 is least (a Laguerre cell, which is how a 2D foam of mixed\n// sizes divides the plane), and remembers the runner-up for the wall.\nfunction label(S) {\n  const { x, y, r, l1, l2, p1, p2 } = S;\n  l1.fill(-1);\n  l2.fill(-1);\n  p1.fill(1e9);\n  p2.fill(1e9);\n  for (let i = 0; i \u003c S.n; i++) {\n    const R = max(r[i] * 1.4 + 1.3, r[i] * 1.8), w = r[i] * r[i], cx = x[i] + M, cy = y[i] + M;\n    const x0 = max(0, floor(cx - R)), x1 = min(EW - 1, floor(cx + R)), y0 = max(0, floor(cy - R)), y1 = min(EH - 1, floor(cy + R));\n    for (let Y = y0; Y \u003c= y1; Y++) {\n      const dy = Y + 0.5 - cy, dy2 = dy * dy - w;\n      for (let X = x0, p = Y * EW + x0; X \u003c= x1; X++, p++) {\n        const dx = X + 0.5 - cx, pd = dx * dx + dy2;\n        if (pd \u003c p1[p]) {\n          p2[p] = p1[p];\n          l2[p] = l1[p];\n          p1[p] = pd;\n          l1[p] = i;\n        } else if (pd \u003c p2[p]) {\n          p2[p] = pd;\n          l2[p] = i;\n        }\n      }\n    }\n  }\n  // Who touches whom: two cells are neighbours where their LEDs meet.\n  const { nb, nc, edge } = S;\n  nc.fill(0, 0, S.n);\n  for (let i = 0; i \u003c S.n; i++) edge[i] = x[i] - r[i] * 1.6 \u003c -M + 1 || x[i] + r[i] * 1.6 > W + M - 1 || y[i] - r[i] * 1.6 \u003c -M + 1 || y[i] + r[i] * 1.6 > H + M - 1 ? 1 : 0;\n  for (let Y = 0; Y \u003c EH - 1; Y++)\n    for (let X = 0, p = Y * EW; X \u003c EW - 1; X++, p++) {\n      const a = l1[p];\n      if (a \u003c 0) continue;\n      const b = l1[p + 1], c = l1[p + EW];\n      if (b >= 0 && b !== a) link(nb, nc, a, b);\n      if (c >= 0 && c !== a && c !== b) link(nb, nc, a, c);\n    }\n  S.fresh = true;\n}\n\nfunction link(nb, nc, a, b) {\n  const oa = a * NN;\n  for (let k = 0; k \u003c nc[a]; k++) if (nb[oa + k] === b) return;\n  if (nc[a] \u003c NN) nb[oa + nc[a]++] = b;\n  const ob = b * NN;\n  for (let k = 0; k \u003c nc[b]; k++) if (nb[ob + k] === a) return;\n  if (nc[b] \u003c NN) nb[ob + nc[b]++] = a;\n}\n\n// A wall bursts: a flash along it and a few droplets thrown off, and the\n// two bubbles become one with both their areas.\nfunction burst(S, i, j) {\n  const { x, y, r, a } = S;\n  const dx = x[j] - x[i], dy = y[j] - y[i], d = sqrt(dx * dx + dy * dy) + 1e-4;\n  const t = (d * d + r[i] * r[i] - r[j] * r[j]) / (2 * d * d), mx = x[i] + dx * t, my = y[i] + dy * t;\n  const half = min(r[i], r[j]) * 0.75, ux = -dy / d, uy = dx / d;\n  for (let k = 0; k \u003c 3 && S.ndr \u003c 96; k++) {\n    const o = S.ndr++ * 5, s = (rnd() - 0.5) * 2, sp = 10 + 14 * rnd(), side = rnd() \u003c 0.5 ? -1 : 1;\n    S.dr[o] = mx + ux * half * s;\n    S.dr[o + 1] = my + uy * half * s;\n    S.dr[o + 2] = (dx / d) * sp * side + ux * 4 * s;\n    S.dr[o + 3] = (dy / d) * sp * side + uy * 4 * s - 6;\n    S.dr[o + 4] = 1;\n  }\n  const A = a[i] + a[j];\n  x[i] = (x[i] * a[i] + x[j] * a[j]) / A;\n  y[i] = (y[i] * a[i] + y[j] * a[j]) / A;\n  a[i] = A;\n  r[i] = sqrt(A / PI);\n  S.dead[j] = 1;\n  if (S.nfl \u003c 32) {\n    const o = S.nfl++ * 8, f = S.fl;\n    f[o] = mx - ux * half;\n    f[o + 1] = my - uy * half;\n    f[o + 2] = mx + ux * half;\n    f[o + 3] = my + uy * half;\n    f[o + 4] = 1;\n    f[o + 5] = r[i];\n    f[o + 6] = x[i];\n    f[o + 7] = y[i];\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= BATCH) (S.since = 0), (S.boost = 2);\n  const { x, y, r, a, nb, nc, edge, dead } = S;\n  const n = S.n;\n  if (S.fresh) {\n    S.fresh = false;\n    // Gas runs from bubbles with fewer than six sides to those with more.\n    // The mean is taken over the bubbles away from the margin's edge, and\n    // those at the edge keep their size.\n    let sum = 0, cnt = 0;\n    for (let i = 0; i \u003c n; i++) if (!edge[i]) (sum += nc[i]), cnt++;\n    const mean = cnt ? sum / cnt : 6;\n    for (let i = 0; i \u003c n; i++) {\n      if (edge[i] || dead[i]) continue;\n      // A dry foam coarsens faster: its walls are thinner.\n      const dry = 1.3 - 2.5 * liquid(S, y[i]);\n      a[i] += K * (nc[i] - mean) * dry * st;\n      if (a[i] \u003c 2.5) {\n        dead[i] = 1;\n        continue;\n      }\n      r[i] = sqrt(a[i] / PI);\n    }\n    // Walls burst more often the drier and bigger the bubbles.\n    for (let i = 0; i \u003c n; i++) {\n      if (dead[i] || edge[i] || !nc[i]) continue;\n      const dry = cl(1 - liquid(S, y[i]) / 0.2, 0, 1);\n      if (rnd() > st * 0.014 * dry * (r[i] / 3) ** 2) continue;\n      const j = nb[i * NN + floor(rnd() * nc[i])];\n      if (j >= 0 && j \u003c n && !dead[j] && !edge[j]) burst(S, i, j);\n    }\n  }\n  // The foam rises; whatever leaves the top is gone.\n  const up = (RISE + (S.boost > 0 ? BOOST * sm(0, 0.4, S.boost) : 0)) * st;\n  S.boost = max(0, S.boost - st);\n  for (let i = 0; i \u003c n; i++) {\n    y[i] -= up;\n    if (y[i] + r[i] \u003c -M) dead[i] = 1;\n  }\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    if (dead[i]) continue;\n    if (k !== i) {\n      x[k] = x[i];\n      y[k] = y[i];\n      r[k] = r[i];\n      a[k] = a[i];\n      S.tone[k] = S.tone[i];\n    }\n    dead[k] = 0;\n    k++;\n  }\n  S.n = k;\n  // New lather comes in under the bottom edge as fast as the foam rises, a\n  // fresh batch finer still.\n  const f = fresh(S) * (S.boost > 0 ? 0.85 : 1);\n  S.acc += up * EW;\n  while (S.acc > 0 && S.n \u003c NB) {\n    const rr = f * (0.7 + 0.6 * rnd());\n    S.acc -= PI * rr * rr * 0.95;\n    add(S, -M + rnd() * EW, H + M - rr * (0.6 + rnd()), rr);\n  }\n  pack(S, 0.7);\n  // Flashes fade in a third of a second; droplets fly and fall.\n  for (let i = S.nfl - 1; i >= 0; i--) {\n    const o = i * 8;\n    S.fl[o + 4] -= st * 3;\n    if (S.fl[o + 4] \u003c= 0) {\n      const l = --S.nfl * 8;\n      for (let c = 0; c \u003c 8; c++) S.fl[o + c] = S.fl[l + c];\n    }\n  }\n  for (let i = S.ndr - 1; i >= 0; i--) {\n    const o = i * 5;\n    S.dr[o] += S.dr[o + 2] * st;\n    S.dr[o + 1] += S.dr[o + 3] * st;\n    S.dr[o + 3] += 60 * st;\n    S.dr[o + 4] -= st * 3;\n    if (S.dr[o + 4] \u003c= 0) {\n      const l = --S.ndr * 5;\n      for (let c = 0; c \u003c 5; c++) S.dr[o + c] = S.dr[l + c];\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.size = cl(k[2], 0, 1);\n  S.wet = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    fill(S);\n    for (let i = 0; i \u003c 30; i++) {\n      label(S);\n      step(S, 1 / 30);\n    }\n    S.since = 6;\n  }\n  if (input.btnPressed && input.btnPressed[0]) (S.boost = 2), (S.since = 0);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  label(S);\n  const { x, y, r, l1, l2, p1, p2, col, buf, tone } = S;\n  const hue = H0 + S.hue;\n  // Inside a bubble, its rim, the wall, the liquid between bubbles. Orange\n  // and yellow kept dim read brown and olive on LEDs, so near those hues\n  // the inside of a bubble is lit brighter.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.17) / 0.17);\n  hsv(hue, 0.5 - 0.12 * am, 0.52 + 0.34 * am, col, 0);\n  hsv(hue - 0.02, 0.4 - 0.05 * am, 0.85 + 0.13 * am, col, 3);\n  hsv(hue + 0.03, 0.12, 0.98, col, 6);\n  hsv(hue, 0.3, 0.72 + 0.16 * am, col, 9);\n  for (let Y = 0; Y \u003c H; Y++) {\n    const phi = liquid(S, Y), sd = 0.88 + 0.9 * (1 - min(1, phi / 0.36)) ** 2;\n    for (let X = 0; X \u003c W; X++) {\n      const p = (Y + M) * EW + X + M, i = l1[p], q = (Y * W + X) * 3;\n      if (i \u003c 0) {\n        buf[q] = col[9];\n        buf[q + 1] = col[10];\n        buf[q + 2] = col[11];\n        continue;\n      }\n      const px = X + 0.5, py = Y + 0.5, dx = px - x[i], dy = py - y[i], d = sqrt(dx * dx + dy * dy);\n      const j = l2[p];\n      let dw = 9;\n      if (j >= 0) {\n        const ex = x[j] - x[i], ey = y[j] - y[i];\n        dw = (p2[p] - p1[p]) / (2 * sqrt(ex * ex + ey * ey) + 1e-4);\n      }\n      // A bubble is its cell clipped to a disc: in a dry foam the disc\n      // covers the cell and the bubble is a polygon; in a wet one it is\n      // round, sitting in liquid that fills the corners between bubbles.\n      const ed = r[i] * sd - d, e = min(dw, ed);\n      let R, G, B;\n      if (e \u003c 0) {\n        // Liquid: milky, brightest against the bubbles it wets.\n        const k = exp(e * 0.9) * 0.35;\n        R = col[9] + (col[6] - col[9]) * k;\n        G = col[10] + (col[7] - col[10]) * k;\n        B = col[11] + (col[8] - col[11]) * k;\n      } else {\n        // The dome: dim through its middle, brighter round its rim as the\n        // film turns edge on and low on the right where the light that came\n        // in through it gathers, a thin bright wall, and a point of light up\n        // and to the left.\n        const u = d / (d + e + 1e-4), rr = r[i], gx = dx - rr * 0.3, gy = dy - rr * 0.34;\n        const g2 = 1 - (gx * gx + gy * gy) / (1.6 * rr * rr), lens = g2 > 0 ? g2 * g2 * 0.45 : 0, rim = max(u * u * u, lens);\n        const v = 0.85 + 0.3 * tone[i];\n        R = (col[0] * (1 - rim) + col[3] * rim) * v;\n        G = (col[1] * (1 - rim) + col[4] * rim) * v;\n        B = (col[2] * (1 - rim) + col[5] * rim) * v;\n        const s = 0.32 + 0.1 * rr, hx = dx + rr * 0.36, hy = dy + rr * 0.4, h2 = (hx * hx + hy * hy) / (2 * s * s);\n        const h5 = 1 - h2 * 0.2, hl = h5 > 0 ? h5 * h5 * h5 * h5 * h5 * 255 : 0;\n        // The wall, about 1.3 LEDs across: (1 - (e/1.3)^2)^2.\n        const w2 = 1 - e * e * 0.6, wl = w2 > 0 ? w2 * w2 * (ed \u003c dw ? 0.75 : 1) : 0;\n        R += (col[6] - R) * wl + hl;\n        G += (col[7] - G) * wl + hl;\n        B += (col[8] - B) * wl + hl;\n      }\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  }\n  // A burst wall flashes white along its length, and for a moment the new\n  // bubble it leaves is lit through.\n  for (let f = 0; f \u003c S.nfl; f++) {\n    const o = f * 8, fl = S.fl, life = fl[o + 4], len = Math.hypot(fl[o + 2] - fl[o], fl[o + 3] - fl[o + 1]);\n    const steps = max(2, Math.ceil(len * 2)), lf = life * life;\n    for (let k = 0; k \u003c= steps; k++) {\n      const t = k / steps;\n      spot(buf, fl[o] + (fl[o + 2] - fl[o]) * t, fl[o + 1] + (fl[o + 3] - fl[o + 1]) * t, lf * 200 * (1 - 0.6 * abs(t - 0.5)));\n    }\n    const rm = fl[o + 5] * 0.85, cx = fl[o + 6], cy = fl[o + 7];\n    for (let Y = max(0, floor(cy - rm)); Y \u003c= min(H - 1, floor(cy + rm)); Y++)\n      for (let X = max(0, floor(cx - rm)); X \u003c= min(W - 1, floor(cx + rm)); X++) {\n        const d2 = ((X + 0.5 - cx) ** 2 + (Y + 0.5 - cy) ** 2) / (rm * rm);\n        if (d2 >= 1) continue;\n        const w = (1 - d2) * lf * 0.7, q = (Y * W + X) * 3;\n        buf[q] += (col[6] - buf[q] * 0.5) * w;\n        buf[q + 1] += (col[7] - buf[q + 1] * 0.5) * w;\n        buf[q + 2] += (col[8] - buf[q + 2] * 0.5) * w;\n      }\n  }\n  for (let k = 0; k \u003c S.ndr; k++) {\n    const o = k * 5;\n    spot(buf, S.dr[o], S.dr[o + 1], S.dr[o + 4] * 200);\n  }\n  for (let p = 0, Y = 0; Y \u003c H; Y++) for (let X = 0; X \u003c W; X++, p += 3) display.setPixel(X, Y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// White light v shared over the four LEDs round x, y.\nfunction spot(buf, x, y, v) {\n  const X = floor(x - 0.5), Y = floor(y - 0.5), fx = x - 0.5 - X, fy = y - 0.5 - Y;\n  for (let k = 0; k \u003c 4; k++) {\n    const xx = X + (k & 1), yy = Y + (k >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const w = (k & 1 ? fx : 1 - fx) * (k >> 1 ? fy : 1 - fy) * v, q = (yy * W + xx) * 3;\n    buf[q] += w;\n    buf[q + 1] += w;\n    buf[q + 2] += w;\n  }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-foam-lather","type":"code","name":"foam-lather","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Foam Lather\n// Family:  cosmetic\n// Idea:    Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after cleansing foam whipped into lather\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1\n//\n// Knob 1: Hue. The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white.\n// Knob 2: Speed. How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower.\n// Knob 3: Size. The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up.\n// Knob 4: Wetness. How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid.\n// Buttons: K1 tap whips a fresh batch of fine lather in from the bottom.\n\nconst W = 64, H = 128;\nconst { min, max, floor, sqrt, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: sky blue.\nconst H0 = 0.57;\n// The foam is worked out over a margin M past every edge of the panel, so\n// bubbles at the edge have all their neighbours and the edge is no wall.\nconst M = 6, EW = W + 2 * M, EH = H + 2 * M, EN = EW * EH;\n// At most NB bubbles, each with up to NN neighbours on record.\nconst NB = 1100, NN = 16;\n// Gas through the walls: a bubble's area changes by K*(n - 6) LED^2 a second\n// at Speed 2, n its number of neighbours (von Neumann's law for 2D foam). The\n// 6 is the mean count of the bubbles on the panel, which comes out at 5.9 to\n// 6.1, and the dry foam at the top runs 1.2 times as fast.\nconst K = 1.6;\n// The foam rises RISE rows a second; a batch of lather comes every BATCH\n// seconds and pushes it up BOOST rows a second faster for two seconds.\nconst RISE = 1.2, BATCH = 15, BOOST = 14;\n// Packing grid for the bubbles, CS LEDs a cell.\nconst CS = 6, GX = Math.ceil(EW / CS) + 1, GY = Math.ceil(EH / CS) + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(NB), y: F(NB), r: F(NB), a: F(NB), tone: F(NB), n: 0, dead: new Uint8Array(NB),\n    nb: new Int16Array(NB * NN), nc: new Uint8Array(NB), edge: new Uint8Array(NB), fresh: true,\n    l1: new Int16Array(EN), l2: new Int16Array(EN), p1: F(EN), p2: F(EN),\n    head: new Int16Array(GX * GY), next: new Int16Array(NB),\n    fl: F(32 * 8), nfl: 0, dr: F(96 * 5), ndr: 0,\n    T: 0, since: 0, boost: 0, acc: 0, rate: 1, size: 0, wet: 0.06, hue: 0, started: false,\n    col: F(18), buf: F(W * H * 3),\n  };\n}\n\n// The radius of fresh lather.\nconst fresh = (S) => 2.1 + 3.2 * S.size;\n\nfunction add(S, x, y, r) {\n  if (S.n >= NB) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.r[i] = r;\n  S.a[i] = PI * r * r;\n  S.tone[i] = rnd();\n  S.dead[i] = 0;\n  S.nc[i] = 0;\n  S.edge[i] = 1;\n}\n\n// Liquid fraction at height y: it drains, so the foam is wettest at the\n// bottom; Wetness raises it everywhere.\nfunction liquid(S, y) {\n  const b = cl(y / H, 0, 1), dr = b ** 4;\n  return cl(0.02 + 0.3 * S.wet + (0.2 + 0.1 * S.wet) * dr, 0, 0.4);\n}\n\n// The panel filled with lather that has already risen and coarsened: fine\n// bubbles at the bottom, two and a half times as big at the top.\nfunction fill(S) {\n  S.n = 0;\n  const f = fresh(S);\n  let y = EH - M - f;\n  while (y > -M - 2) {\n    const rr = f * (1 + 1.5 * cl((H - y) / H, 0, 1) ** 1.2);\n    for (let x = -M + rnd() * rr; x \u003c W + M; ) {\n      const r = rr * (0.65 + 0.7 * rnd());\n      add(S, x, y + (rnd() - 0.5) * rr * 0.6, r);\n      x += r * 1.75 + rr * 0.15;\n    }\n    y -= rr * 1.6;\n  }\n  for (let k = 0; k \u003c 60; k++) pack(S, 0.6);\n}\n\n// Bubbles push apart wherever their discs overlap, the small ones giving\n// way more, so the foam stays packed and its cells polygonal.\nfunction pack(S, k) {\n  const { x, y, r, a, head, next } = S;\n  head.fill(-1);\n  let rmax = 0;\n  for (let i = 0; i \u003c S.n; i++) {\n    const gx = cl(floor((x[i] + M) / CS), 0, GX - 1), gy = cl(floor((y[i] + M) / CS), 0, GY - 1), c = gy * GX + gx;\n    next[i] = head[c];\n    head[c] = i;\n    if (r[i] > rmax) rmax = r[i];\n  }\n  for (let i = 0; i \u003c S.n; i++) {\n    const xi = x[i], yi = y[i], ri = r[i], reach = Math.ceil((ri + rmax) / CS);\n    const gx = cl(floor((xi + M) / CS), 0, GX - 1), gy = cl(floor((yi + M) / CS), 0, GY - 1);\n    for (let cy = max(0, gy - reach); cy \u003c= min(GY - 1, gy + reach); cy++)\n      for (let cx = max(0, gx - reach); cx \u003c= min(GX - 1, gx + reach); cx++)\n        for (let j = head[cy * GX + cx]; j >= 0; j = next[j]) {\n          if (j \u003c= i) continue;\n          const dx = x[j] - xi, dy = y[j] - yi, want = (ri + r[j]) * 0.96, d2 = dx * dx + dy * dy;\n          if (d2 >= want * want) continue;\n          const d = sqrt(d2) + 1e-4, push = ((want - d) / d) * k, wi = a[j] / (a[i] + a[j]);\n          x[i] -= dx * push * wi;\n          y[i] -= dy * push * wi;\n          x[j] += dx * push * (1 - wi);\n          y[j] += dy * push * (1 - wi);\n        }\n  }\n  // Soft walls just past the margin at the sides and the bottom.\n  for (let i = 0; i \u003c S.n; i++) {\n    const lo = -M + r[i] * 0.4, hi = W + M - r[i] * 0.4, bot = H + M - r[i] * 0.6;\n    if (x[i] \u003c lo) x[i] += (lo - x[i]) * 0.5;\n    if (x[i] > hi) x[i] += (hi - x[i]) * 0.5;\n    if (y[i] > bot) y[i] += (bot - y[i]) * 0.5;\n  }\n}\n\n// Every LED of the margined grid takes the bubble whose power distance\n// d^2 - r^2 is least (a Laguerre cell, which is how a 2D foam of mixed\n// sizes divides the plane), and remembers the runner-up for the wall.\nfunction label(S) {\n  const { x, y, r, l1, l2, p1, p2 } = S;\n  l1.fill(-1);\n  l2.fill(-1);\n  p1.fill(1e9);\n  p2.fill(1e9);\n  for (let i = 0; i \u003c S.n; i++) {\n    const R = max(r[i] * 1.4 + 1.3, r[i] * 1.8), w = r[i] * r[i], cx = x[i] + M, cy = y[i] + M;\n    const x0 = max(0, floor(cx - R)), x1 = min(EW - 1, floor(cx + R)), y0 = max(0, floor(cy - R)), y1 = min(EH - 1, floor(cy + R));\n    for (let Y = y0; Y \u003c= y1; Y++) {\n      const dy = Y + 0.5 - cy, dy2 = dy * dy - w;\n      for (let X = x0, p = Y * EW + x0; X \u003c= x1; X++, p++) {\n        const dx = X + 0.5 - cx, pd = dx * dx + dy2;\n        if (pd \u003c p1[p]) {\n          p2[p] = p1[p];\n          l2[p] = l1[p];\n          p1[p] = pd;\n          l1[p] = i;\n        } else if (pd \u003c p2[p]) {\n          p2[p] = pd;\n          l2[p] = i;\n        }\n      }\n    }\n  }\n  // Who touches whom: two cells are neighbours where their LEDs meet.\n  const { nb, nc, edge } = S;\n  nc.fill(0, 0, S.n);\n  for (let i = 0; i \u003c S.n; i++) edge[i] = x[i] - r[i] * 1.6 \u003c -M + 1 || x[i] + r[i] * 1.6 > W + M - 1 || y[i] - r[i] * 1.6 \u003c -M + 1 || y[i] + r[i] * 1.6 > H + M - 1 ? 1 : 0;\n  for (let Y = 0; Y \u003c EH - 1; Y++)\n    for (let X = 0, p = Y * EW; X \u003c EW - 1; X++, p++) {\n      const a = l1[p];\n      if (a \u003c 0) continue;\n      const b = l1[p + 1], c = l1[p + EW];\n      if (b >= 0 && b !== a) link(nb, nc, a, b);\n      if (c >= 0 && c !== a && c !== b) link(nb, nc, a, c);\n    }\n  S.fresh = true;\n}\n\nfunction link(nb, nc, a, b) {\n  const oa = a * NN;\n  for (let k = 0; k \u003c nc[a]; k++) if (nb[oa + k] === b) return;\n  if (nc[a] \u003c NN) nb[oa + nc[a]++] = b;\n  const ob = b * NN;\n  for (let k = 0; k \u003c nc[b]; k++) if (nb[ob + k] === a) return;\n  if (nc[b] \u003c NN) nb[ob + nc[b]++] = a;\n}\n\n// A wall bursts: a flash along it and a few droplets thrown off, and the\n// two bubbles become one with both their areas.\nfunction burst(S, i, j) {\n  const { x, y, r, a } = S;\n  const dx = x[j] - x[i], dy = y[j] - y[i], d = sqrt(dx * dx + dy * dy) + 1e-4;\n  const t = (d * d + r[i] * r[i] - r[j] * r[j]) / (2 * d * d), mx = x[i] + dx * t, my = y[i] + dy * t;\n  const half = min(r[i], r[j]) * 0.75, ux = -dy / d, uy = dx / d;\n  for (let k = 0; k \u003c 3 && S.ndr \u003c 96; k++) {\n    const o = S.ndr++ * 5, s = (rnd() - 0.5) * 2, sp = 10 + 14 * rnd(), side = rnd() \u003c 0.5 ? -1 : 1;\n    S.dr[o] = mx + ux * half * s;\n    S.dr[o + 1] = my + uy * half * s;\n    S.dr[o + 2] = (dx / d) * sp * side + ux * 4 * s;\n    S.dr[o + 3] = (dy / d) * sp * side + uy * 4 * s - 6;\n    S.dr[o + 4] = 1;\n  }\n  const A = a[i] + a[j];\n  x[i] = (x[i] * a[i] + x[j] * a[j]) / A;\n  y[i] = (y[i] * a[i] + y[j] * a[j]) / A;\n  a[i] = A;\n  r[i] = sqrt(A / PI);\n  S.dead[j] = 1;\n  if (S.nfl \u003c 32) {\n    const o = S.nfl++ * 8, f = S.fl;\n    f[o] = mx - ux * half;\n    f[o + 1] = my - uy * half;\n    f[o + 2] = mx + ux * half;\n    f[o + 3] = my + uy * half;\n    f[o + 4] = 1;\n    f[o + 5] = r[i];\n    f[o + 6] = x[i];\n    f[o + 7] = y[i];\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= BATCH) (S.since = 0), (S.boost = 2);\n  const { x, y, r, a, nb, nc, edge, dead } = S;\n  const n = S.n;\n  if (S.fresh) {\n    S.fresh = false;\n    // Gas runs from bubbles with fewer than six sides to those with more.\n    // The mean is taken over the bubbles away from the margin's edge, and\n    // those at the edge keep their size.\n    let sum = 0, cnt = 0;\n    for (let i = 0; i \u003c n; i++) if (!edge[i]) (sum += nc[i]), cnt++;\n    const mean = cnt ? sum / cnt : 6;\n    for (let i = 0; i \u003c n; i++) {\n      if (edge[i] || dead[i]) continue;\n      // A dry foam coarsens faster: its walls are thinner.\n      const dry = 1.3 - 2.5 * liquid(S, y[i]);\n      a[i] += K * (nc[i] - mean) * dry * st;\n      if (a[i] \u003c 2.5) {\n        dead[i] = 1;\n        continue;\n      }\n      r[i] = sqrt(a[i] / PI);\n    }\n    // Walls burst more often the drier and bigger the bubbles.\n    for (let i = 0; i \u003c n; i++) {\n      if (dead[i] || edge[i] || !nc[i]) continue;\n      const dry = cl(1 - liquid(S, y[i]) / 0.2, 0, 1);\n      if (rnd() > st * 0.014 * dry * (r[i] / 3) ** 2) continue;\n      const j = nb[i * NN + floor(rnd() * nc[i])];\n      if (j >= 0 && j \u003c n && !dead[j] && !edge[j]) burst(S, i, j);\n    }\n  }\n  // The foam rises; whatever leaves the top is gone.\n  const up = (RISE + (S.boost > 0 ? BOOST * sm(0, 0.4, S.boost) : 0)) * st;\n  S.boost = max(0, S.boost - st);\n  for (let i = 0; i \u003c n; i++) {\n    y[i] -= up;\n    if (y[i] + r[i] \u003c -M) dead[i] = 1;\n  }\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    if (dead[i]) continue;\n    if (k !== i) {\n      x[k] = x[i];\n      y[k] = y[i];\n      r[k] = r[i];\n      a[k] = a[i];\n      S.tone[k] = S.tone[i];\n    }\n    dead[k] = 0;\n    k++;\n  }\n  S.n = k;\n  // New lather comes in under the bottom edge as fast as the foam rises, a\n  // fresh batch finer still.\n  const f = fresh(S) * (S.boost > 0 ? 0.85 : 1);\n  S.acc += up * EW;\n  while (S.acc > 0 && S.n \u003c NB) {\n    const rr = f * (0.7 + 0.6 * rnd());\n    S.acc -= PI * rr * rr * 0.95;\n    add(S, -M + rnd() * EW, H + M - rr * (0.6 + rnd()), rr);\n  }\n  pack(S, 0.7);\n  // Flashes fade in a third of a second; droplets fly and fall.\n  for (let i = S.nfl - 1; i >= 0; i--) {\n    const o = i * 8;\n    S.fl[o + 4] -= st * 3;\n    if (S.fl[o + 4] \u003c= 0) {\n      const l = --S.nfl * 8;\n      for (let c = 0; c \u003c 8; c++) S.fl[o + c] = S.fl[l + c];\n    }\n  }\n  for (let i = S.ndr - 1; i >= 0; i--) {\n    const o = i * 5;\n    S.dr[o] += S.dr[o + 2] * st;\n    S.dr[o + 1] += S.dr[o + 3] * st;\n    S.dr[o + 3] += 60 * st;\n    S.dr[o + 4] -= st * 3;\n    if (S.dr[o + 4] \u003c= 0) {\n      const l = --S.ndr * 5;\n      for (let c = 0; c \u003c 5; c++) S.dr[o + c] = S.dr[l + c];\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.size = cl(k[2], 0, 1);\n  S.wet = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    fill(S);\n    for (let i = 0; i \u003c 30; i++) {\n      label(S);\n      step(S, 1 / 30);\n    }\n    S.since = 6;\n  }\n  if (input.btnPressed && input.btnPressed[0]) (S.boost = 2), (S.since = 0);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  label(S);\n  const { x, y, r, l1, l2, p1, p2, col, buf, tone } = S;\n  const hue = H0 + S.hue;\n  // Inside a bubble, its rim, the wall, the liquid between bubbles. Orange\n  // and yellow kept dim read brown and olive on LEDs, so near those hues\n  // the inside of a bubble is lit brighter.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.17) / 0.17);\n  hsv(hue, 0.5 - 0.12 * am, 0.52 + 0.34 * am, col, 0);\n  hsv(hue - 0.02, 0.4 - 0.05 * am, 0.85 + 0.13 * am, col, 3);\n  hsv(hue + 0.03, 0.12, 0.98, col, 6);\n  hsv(hue, 0.3, 0.72 + 0.16 * am, col, 9);\n  for (let Y = 0; Y \u003c H; Y++) {\n    const phi = liquid(S, Y), sd = 0.88 + 0.9 * (1 - min(1, phi / 0.36)) ** 2;\n    for (let X = 0; X \u003c W; X++) {\n      const p = (Y + M) * EW + X + M, i = l1[p], q = (Y * W + X) * 3;\n      if (i \u003c 0) {\n        buf[q] = col[9];\n        buf[q + 1] = col[10];\n        buf[q + 2] = col[11];\n        continue;\n      }\n      const px = X + 0.5, py = Y + 0.5, dx = px - x[i], dy = py - y[i], d = sqrt(dx * dx + dy * dy);\n      const j = l2[p];\n      let dw = 9;\n      if (j >= 0) {\n        const ex = x[j] - x[i], ey = y[j] - y[i];\n        dw = (p2[p] - p1[p]) / (2 * sqrt(ex * ex + ey * ey) + 1e-4);\n      }\n      // A bubble is its cell clipped to a disc: in a dry foam the disc\n      // covers the cell and the bubble is a polygon; in a wet one it is\n      // round, sitting in liquid that fills the corners between bubbles.\n      const ed = r[i] * sd - d, e = min(dw, ed);\n      let R, G, B;\n      if (e \u003c 0) {\n        // Liquid: milky, brightest against the bubbles it wets.\n        const k = exp(e * 0.9) * 0.35;\n        R = col[9] + (col[6] - col[9]) * k;\n        G = col[10] + (col[7] - col[10]) * k;\n        B = col[11] + (col[8] - col[11]) * k;\n      } else {\n        // The dome: dim through its middle, brighter round its rim as the\n        // film turns edge on and low on the right where the light that came\n        // in through it gathers, a thin bright wall, and a point of light up\n        // and to the left.\n        const u = d / (d + e + 1e-4), rr = r[i], gx = dx - rr * 0.3, gy = dy - rr * 0.34;\n        const g2 = 1 - (gx * gx + gy * gy) / (1.6 * rr * rr), lens = g2 > 0 ? g2 * g2 * 0.45 : 0, rim = max(u * u * u, lens);\n        const v = 0.85 + 0.3 * tone[i];\n        R = (col[0] * (1 - rim) + col[3] * rim) * v;\n        G = (col[1] * (1 - rim) + col[4] * rim) * v;\n        B = (col[2] * (1 - rim) + col[5] * rim) * v;\n        const s = 0.32 + 0.1 * rr, hx = dx + rr * 0.36, hy = dy + rr * 0.4, h2 = (hx * hx + hy * hy) / (2 * s * s);\n        const h5 = 1 - h2 * 0.2, hl = h5 > 0 ? h5 * h5 * h5 * h5 * h5 * 255 : 0;\n        // The wall, about 1.3 LEDs across: (1 - (e/1.3)^2)^2.\n        const w2 = 1 - e * e * 0.6, wl = w2 > 0 ? w2 * w2 * (ed \u003c dw ? 0.75 : 1) : 0;\n        R += (col[6] - R) * wl + hl;\n        G += (col[7] - G) * wl + hl;\n        B += (col[8] - B) * wl + hl;\n      }\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  }\n  // A burst wall flashes white along its length, and for a moment the new\n  // bubble it leaves is lit through.\n  for (let f = 0; f \u003c S.nfl; f++) {\n    const o = f * 8, fl = S.fl, life = fl[o + 4], len = Math.hypot(fl[o + 2] - fl[o], fl[o + 3] - fl[o + 1]);\n    const steps = max(2, Math.ceil(len * 2)), lf = life * life;\n    for (let k = 0; k \u003c= steps; k++) {\n      const t = k / steps;\n      spot(buf, fl[o] + (fl[o + 2] - fl[o]) * t, fl[o + 1] + (fl[o + 3] - fl[o + 1]) * t, lf * 200 * (1 - 0.6 * abs(t - 0.5)));\n    }\n    const rm = fl[o + 5] * 0.85, cx = fl[o + 6], cy = fl[o + 7];\n    for (let Y = max(0, floor(cy - rm)); Y \u003c= min(H - 1, floor(cy + rm)); Y++)\n      for (let X = max(0, floor(cx - rm)); X \u003c= min(W - 1, floor(cx + rm)); X++) {\n        const d2 = ((X + 0.5 - cx) ** 2 + (Y + 0.5 - cy) ** 2) / (rm * rm);\n        if (d2 >= 1) continue;\n        const w = (1 - d2) * lf * 0.7, q = (Y * W + X) * 3;\n        buf[q] += (col[6] - buf[q] * 0.5) * w;\n        buf[q + 1] += (col[7] - buf[q + 1] * 0.5) * w;\n        buf[q + 2] += (col[8] - buf[q + 2] * 0.5) * w;\n      }\n  }\n  for (let k = 0; k \u003c S.ndr; k++) {\n    const o = k * 5;\n    spot(buf, S.dr[o], S.dr[o + 1], S.dr[o + 4] * 200);\n  }\n  for (let p = 0, Y = 0; Y \u003c H; Y++) for (let X = 0; X \u003c W; X++, p += 3) display.setPixel(X, Y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// White light v shared over the four LEDs round x, y.\nfunction spot(buf, x, y, v) {\n  const X = floor(x - 0.5), Y = floor(y - 0.5), fx = x - 0.5 - X, fy = y - 0.5 - Y;\n  for (let k = 0; k \u003c 4; k++) {\n    const xx = X + (k & 1), yy = Y + (k >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const w = (k & 1 ? fx : 1 - fx) * (k >> 1 ? fy : 1 - fy) * v, q = (yy * W + xx) * 3;\n    buf[q] += w;\n    buf[q + 1] += w;\n    buf[q + 2] += w;\n  }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower."},{"name":"Size","min":0,"max":1,"about":"The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up."},{"name":"Wetness","min":0,"max":1,"about":"How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid."}],"start":[0,2,0,0.06],"measures":{"motion":0.1524,"detail":0.0833,"edges":0.3017,"complexity":2.5679,"coverage":1,"colour":0.1471,"drift":0.0328},"knobResponse":[0.1783,0.2037,0.1967,0.1202]},{"slug":"ford-circles","title":"Ford Circles","family":"number","round":28,"note":"세운 왼쪽 가장자리가 실수선이고, 분수 p/q 마다 반지름 1/(2q²) 인 원이 그 자리에 기대 서요. 화면은 황금비로 끝없이 들어가고, 맞닿은 두 원 사이의 중간수 자리에 더 작은 원이 자꾸 나와요. K3 이 과녁을 √2, √3, e, π 로 바꾸고, 누르면 스턴-브로코 나무를 따라 과녁까지 내려가는 길이 켜져요.","idea":"The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.","buttons":"K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.","code":"// ===== Patternflow pattern =====\n// Title:   Ford Circles\n// Family:  number\n// Idea:    The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ford circles (Lester R. Ford, 1938) and the Farey sequence (John Farey, 1816), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long.\n// Knob 3: Target. The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one.\n// Knob 4: Fill. Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid.\n// Buttons: K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, log, sin, abs, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Screen rows run down the real line with larger numbers at the top; the\n// target sits in the middle of row 64. Circles narrower than RMIN LEDs are\n// left out, and the window jumps to the next convergent with MARG to spare.\nconst CY = 64.5, TROW = 64, RMIN = 0.28, MARG = 1.08, MAXC = 1200, S0 = 132;\n\n// The continued fractions of the targets, a(i) for i = 0, 1, 2, ... The\n// golden ratio is [1; 1, 1, ...], the square roots of 2 and 3 repeat, e runs\n// [2; 1, 2, 1, 1, 4, 1, 1, 6, ...] and pi is written out to 50 terms. After\n// term 39 for e and 49 for pi the terms start over, so the number the zoom\n// falls into agrees with e and pi to more than 30 decimal places.\nconst PIC = [3, 7, 15, 1, 292, 1, 1, 1, 2, 1, 3, 1, 14, 2, 1, 1, 2, 2, 2, 2, 1, 84, 2, 1, 1, 15, 3, 13, 1, 4, 2, 6, 6, 99, 1, 2, 2, 6, 3, 5, 1, 1, 6, 8, 1, 7, 1, 2, 3, 7];\nconst TG = [\n  () => 1,\n  (i) => (i ? 2 : 1),\n  (i) => (i ? 2 - (i & 1) : 1),\n  (i) => {\n    if (!i) return 2;\n    i = 1 + ((i - 1) % 39);\n    return i % 3 === 2 ? (2 * (i + 1)) / 3 : 1;\n  },\n  (i) => PIC[i \u003c 50 ? i : 1 + ((i - 1) % 49)],\n];\n// [a(i); a(i+1), a(i+2), ...] to double precision.\nfunction tail(a, i) {\n  let v = a(i + 26);\n  for (let j = i + 25; j >= i; j--) v = a(j) + 1 / v;\n  return v;\n}\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\nconst smooth = (a, b, v) => {\n  const u = cl((v - a) / (b - a), 0, 1);\n  return u * u * (3 - 2 * u);\n};\n\n// The window is kept in the frame of the convergents p/q (index n) and\n// p'/q' (index n-1) of the target alpha. The map X -> (pX + p')/(qX + q')\n// sends the Ford circles onto themselves, sends 1/0 and 0/1 to p/q and p'/q',\n// and sends the tail t = [a(n+1); a(n+2), ...] to alpha. A fraction P/Q in\n// that frame lands on the LEDs at s(p/q - alpha) = sig D (P - tQ) / ((P + kQ)(t + k))\n// with radius sig / (2 (P + kQ)^2), where k = q'/q, D = pq' - p'q = +-1 and\n// sig = s/q^2. All of these stay small however deep the zoom goes, so it\n// can run for ever in double precision.\nfunction start(S, tgt) {\n  const a = TG[tgt];\n  S.tgt = tgt;\n  S.a = a;\n  S.n = 0;\n  S.k = 0;\n  S.D = -1;\n  S.lnq = 0;\n  S.t = tail(a, 1);\n  S.sig = max(S0, 64 * MARG * S.t + 1);\n  // p, q, p' and q' modulo 2^32, for each circle's own twinkle.\n  S.pn = a(0);\n  S.pm = 1;\n  S.qn = 1;\n  S.qm = 0;\n  S.fade = 0;\n}\n// The next convergent's frame is used as soon as the window sits wholly\n// between it and the one before: both tangent points off the panel, and the\n// two circles touching beyond the right edge.\nfunction advance(S) {\n  for (let g = 0; g \u003c 8; g++) {\n    const an = S.a(S.n + 1), k2 = 1 / (an + S.k), t2 = tail(S.a, S.n + 2);\n    if (S.sig * k2 * k2 \u003c= 64 * MARG * (t2 + k2)) return;\n    S.sig *= k2 * k2;\n    S.lnq -= log(k2);\n    S.k = k2;\n    S.t = t2;\n    S.D = -S.D;\n    S.n++;\n    const pn = (Math.imul(an, S.pn) + S.pm) | 0, qn = (Math.imul(an, S.qn) + S.qm) | 0;\n    S.pm = S.pn;\n    S.qm = S.qn;\n    S.pn = pn;\n    S.qn = qn;\n  }\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    time: 0, wave: -1, hue: 0, glow: 0.55, depth: 1.8, flat: 0.05,\n    Y: new Float64Array(MAXC), R: new Float64Array(MAXC), Wt: new Float64Array(MAXC),\n    PP: new Int32Array(MAXC), QQ: new Int32Array(MAXC), PA: new Int32Array(MAXC), PB: new Int32Array(MAXC),\n    CV: new Uint8Array(MAXC), PH: new Uint8Array(MAXC), stack: new Int32Array(MAXC * 4), conv: new Float64Array(96),\n    buf: new Float32Array(N * 3), col: [0, 0, 0],\n  });\n  start(S, 0);\n  S.tgt = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.time += d;\n  S.hue = k[0];\n  // Fill lights the inside of each circle in from its rim: a glow a few\n  // LEDs deep at first, then a flat fill under it up to a solid disc.\n  const u = cl(k[3], 0, 1), fk = sqrt(u);\n  S.glow = min(0.55, 2.4 * fk);\n  S.depth = 0.8 + 4 * fk;\n  S.flat = 0.85 * u;\n  const tgt = cl(round(k[2]), 0, 4);\n  if (tgt !== S.tgt) {\n    const first = S.tgt \u003c 0;\n    start(S, tgt);\n    if (first) S.fade = 1;\n  }\n  S.fade = min(1, S.fade + d * 2.5);\n  S.sig *= exp(d * cl(k[1], 0.2, 3) * 0.165);\n  advance(S);\n  if (S.wave >= 0) {\n    S.wave += d;\n    if (S.wave > WT) S.wave = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.wave = 0;\n}\n\n// Every circle that reaches the panel: the two convergents framing the\n// window, then the Stern-Brocot tree between them, each new fraction the\n// mediant of two that touch. A gap whose two tangent points both lie off one\n// end of the panel holds nothing on it, and a mediant too small to see has\n// only smaller ones below it.\nfunction circles(S) {\n  const { Y, R, Wt, PP, QQ, PA, PB, CV, PH, stack, conv } = S;\n  const sig = S.sig, k = S.k, t = S.t, D = S.D, tk = t + k, wmax = sqrt(sig / (2 * RMIN));\n  // The convergents of the tail are the convergents of the target.\n  let nc = 0;\n  for (let j = 0, h1 = 1, k1 = 0, h0 = S.a(S.n + 1), k0 = 1; j \u003c 40 && h0 + k * k0 \u003c= wmax; j++) {\n    conv[nc++] = h0;\n    conv[nc++] = k0;\n    const a = S.a(S.n + 2 + j), h2 = a * h0 + h1, k2 = a * k0 + k1;\n    (h1 = h0), (k1 = k0), (h0 = h2), (k0 = k2);\n  }\n  PP[0] = 0, QQ[0] = 1, Wt[0] = k, CV[0] = 1, PH[0] = 1;\n  if (k > 0) (R[0] = sig / (2 * k * k)), (Y[0] = CY + (D * sig * t) / (k * tk));\n  else (R[0] = 0), (Y[0] = CY + D * 1e30);\n  PP[1] = 1, QQ[1] = 0, Wt[1] = 1, CV[1] = 1, PH[1] = 1, R[1] = sig / 2, Y[1] = CY - (D * sig) / tk;\n  let n = 2, sp = 0;\n  stack[sp++] = 0;\n  stack[sp++] = 1;\n  while (sp > 0 && n \u003c MAXC) {\n    const b = stack[--sp], a = stack[--sp], ya = Y[a], yb = Y[b];\n    if ((ya \u003c -1 && yb \u003c -1) || (ya > H + 1 && yb > H + 1)) continue;\n    const P = PP[a] + PP[b], Q = QQ[a] + QQ[b], w = P + k * Q;\n    if (w > wmax) continue;\n    PP[n] = P, QQ[n] = Q, Wt[n] = w, PA[n] = a, PB[n] = b;\n    R[n] = sig / (2 * w * w);\n    Y[n] = CY - (D * sig * (P - t * Q)) / (w * tk);\n    let c = 0;\n    for (let j = 0; j \u003c nc; j += 2) if (conv[j] === P && conv[j + 1] === Q) c = 1;\n    CV[n] = c;\n    // On the descent to the target: the target lies between the parents.\n    PH[n] = (PP[a] - t * QQ[a]) * (PP[b] - t * QQ[b]) \u003c 0 ? 1 : 0;\n    stack[sp++] = a;\n    stack[sp++] = n;\n    stack[sp++] = n;\n    stack[sp++] = b;\n    n++;\n  }\n  return n;\n}\n\n// The rim is RW LEDs either side of the circle's edge.\nconst RW = 0.85;\n// Colour by denominator: the hue walks HA round the wheel and back as ln q\n// climbs by HL and HL again, so the circles stay on the cool side of the\n// wheel (teal, blue, violet, pink at the start) however deep the zoom goes.\nconst HA = 0.36, HL = 4;\n// The descent's front runs WV units of ln(size) a second; a tap lasts WT s.\nconst WV = 1.8, WT = 5;\nfunction disc(buf, r, yc, cr, cg, cb, ra, ga, gl, fa, cw) {\n  const y0 = max(0, floor(yc - r - 1)), y1 = min(H - 1, floor(yc + r + 1)), x1 = min(W - 1, floor(2 * r + 1)), rw = RW * cw;\n  for (let y = y0; y \u003c= y1; y++) {\n    const dy = y + 0.5 - yc, dy2 = dy * dy;\n    const ady = abs(dy), xs = ady \u003c= r ? dy2 / (r + sqrt(r * r - dy2)) : r;\n    for (let x = max(0, floor(xs - 2)); x \u003c= x1; x++) {\n      const X = x + 0.5, dist = sqrt((X - r) * (X - r) + dy2), d = (X * X - 2 * X * r + dy2) / (dist + r);\n      if (d > rw) {\n        if (X > r) break;\n        continue;\n      }\n      let v = ra * (d > -rw ? 1 - abs(d) / rw : 0);\n      if (d \u003c 0.5) v += cl(0.5 - d, 0, 1) * (fa + ga * exp(d / gl) + (y === TROW ? 0.32 : 0));\n      const p = (y * W + x) * 3;\n      buf[p] += cr * v;\n      buf[p + 1] += cg * v;\n      buf[p + 2] += cb * v;\n    }\n  }\n}\nfunction dot(buf, x, y, v, cr, cg, cb) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = xi + i, py = yi + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = v * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), p = (py * W + px) * 3;\n      buf[p] += cr * w;\n      buf[p + 1] += cg * w;\n      buf[p + 2] += cb * w;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const buf = S.buf, col = S.col, n = circles(S), { Y, R, Wt, PP, QQ, PA, PB, CV, PH } = S;\n  buf.fill(0);\n  // The target's ray. A circle the row through alpha crosses has\n  // |alpha - p/q| \u003c 1/(2q^2), and by Legendre's theorem that makes p/q a\n  // convergent of alpha: the zoom passes through convergents and nothing\n  // else. Convergents get whiter, wider rims; the row lights inside them.\n  for (let x = 0; x \u003c W; x++) {\n    const p = (TROW * W + x) * 3, v = 0.13 * (1 - x / 90);\n    buf[p] += 255 * v;\n    buf[p + 1] += 240 * v;\n    buf[p + 2] += 200 * v;\n  }\n  // After a K1 tap the Stern-Brocot descent into the target lights up: a\n  // front runs from the biggest circles to the smallest and lights each\n  // fraction whose two parents hold the target between them, so the light\n  // hops mediant by mediant, each circle touching the last, down to the\n  // spark on the line. The rest of the window dims while it runs.\n  const on = S.wave >= 0, wf = S.wave * WV - 1.2, wd = on ? smooth(0, 0.3, S.wave) * min(1, (WT - S.wave) / 0.9) : 0;\n  for (let i = 0; i \u003c n; i++) {\n    const r = R[i];\n    if (r \u003c RMIN || (i === 0 && S.k === 0)) continue;\n    const lq = (S.lnq + log(Wt[i])) / HL;\n    hsv(S.hue + 0.5 + HA * abs(lq - 2 * floor(lq / 2 + 0.5)), 0.82, 1, col);\n    let cr = col[0], cg = col[1], cb = col[2], ra = 0.9, cw = 1, ga = S.glow, fa = S.flat;\n    let vis = smooth(RMIN, 1.6, r);\n    if (CV[i]) (cr = cr * 0.65 + 89), (cg = cg * 0.65 + 84), (cb = cb * 0.65 + 70), (ra = 1), (cw = 1.3);\n    if (on && PH[i]) {\n      const lv = log(64 / r), fr = exp(-(((wf - lv) / 0.35) ** 2)), lit = smooth(-0.25, 0.25, wf - lv) * wd;\n      (cr += (255 - cr) * (0.25 * lit + 0.5 * fr)), (cg += (255 - cg) * (0.25 * lit + 0.5 * fr)), (cb += (255 - cb) * (0.25 * lit + 0.5 * fr));\n      (ra += 0.4 * lit + fr), (ga += 0.4 * lit), (fa += 0.12 * lit + 0.35 * fr), (cw += 0.4 * lit);\n    } else vis *= 1 - 0.55 * wd;\n    disc(buf, r, Y[i], cr, cg, cb, ra * vis, ga * vis, S.depth * (1 + 0.1 * min(r, 90)), fa * vis, cw);\n  }\n  // The points where circles touch glint, each at its own pace. Every\n  // tangency on the panel is a mediant touching one of its two parents.\n  const { pn, pm, qn, qm } = S;\n  for (let i = 2; i \u003c n; i++) {\n    const rm = R[i];\n    if (rm \u003c 1.2) continue;\n    const pa = Math.imul(pn, PP[i]) + Math.imul(pm, QQ[i]), qa = Math.imul(qn, PP[i]) + Math.imul(qm, QQ[i]);\n    const fr = on && PH[i] ? 2 * exp(-(((wf - log(64 / rm)) / 0.35) ** 2)) : 0;\n    for (let e = 0; e \u003c 2; e++) {\n      const j = e ? PB[i] : PA[i], rp = R[j];\n      if (j === 0 && S.k === 0) continue;\n      const tx = (2 * rp * rm) / (rp + rm), ty = Y[i] + (Y[j] > Y[i] ? 1 : -1) * ((2 * rm * sqrt(rp * rm)) / (rp + rm));\n      if (tx > W || ty \u003c -1 || ty > H) continue;\n      const h = hash(pa ^ (Math.imul(pn, PP[j]) + Math.imul(pm, QQ[j])), qa ^ (Math.imul(qn, PP[j]) + Math.imul(qm, QQ[j])));\n      const sn = sin(S.time * (1.1 + h * 1.7) + h * 40), g = (0.3 + 0.9 * sn ** 6 + fr) * smooth(1.2, 4, rm);\n      dot(buf, tx - 0.5, ty - 0.5, g * 1.6, 255, 245, 225);\n    }\n  }\n  // The target itself, a spark on the line.\n  dot(buf, 0.25, TROW, 1.4, 255, 250, 235);\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p] * f), min(255, buf[p + 1] * f), min(255, buf[p + 2] * f));\n}\n","layer":{"id":"layer-ford-circles","type":"code","name":"ford-circles","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ford Circles\n// Family:  number\n// Idea:    The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ford circles (Lester R. Ford, 1938) and the Farey sequence (John Farey, 1816), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long.\n// Knob 3: Target. The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one.\n// Knob 4: Fill. Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid.\n// Buttons: K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, log, sin, abs, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Screen rows run down the real line with larger numbers at the top; the\n// target sits in the middle of row 64. Circles narrower than RMIN LEDs are\n// left out, and the window jumps to the next convergent with MARG to spare.\nconst CY = 64.5, TROW = 64, RMIN = 0.28, MARG = 1.08, MAXC = 1200, S0 = 132;\n\n// The continued fractions of the targets, a(i) for i = 0, 1, 2, ... The\n// golden ratio is [1; 1, 1, ...], the square roots of 2 and 3 repeat, e runs\n// [2; 1, 2, 1, 1, 4, 1, 1, 6, ...] and pi is written out to 50 terms. After\n// term 39 for e and 49 for pi the terms start over, so the number the zoom\n// falls into agrees with e and pi to more than 30 decimal places.\nconst PIC = [3, 7, 15, 1, 292, 1, 1, 1, 2, 1, 3, 1, 14, 2, 1, 1, 2, 2, 2, 2, 1, 84, 2, 1, 1, 15, 3, 13, 1, 4, 2, 6, 6, 99, 1, 2, 2, 6, 3, 5, 1, 1, 6, 8, 1, 7, 1, 2, 3, 7];\nconst TG = [\n  () => 1,\n  (i) => (i ? 2 : 1),\n  (i) => (i ? 2 - (i & 1) : 1),\n  (i) => {\n    if (!i) return 2;\n    i = 1 + ((i - 1) % 39);\n    return i % 3 === 2 ? (2 * (i + 1)) / 3 : 1;\n  },\n  (i) => PIC[i \u003c 50 ? i : 1 + ((i - 1) % 49)],\n];\n// [a(i); a(i+1), a(i+2), ...] to double precision.\nfunction tail(a, i) {\n  let v = a(i + 26);\n  for (let j = i + 25; j >= i; j--) v = a(j) + 1 / v;\n  return v;\n}\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\nconst smooth = (a, b, v) => {\n  const u = cl((v - a) / (b - a), 0, 1);\n  return u * u * (3 - 2 * u);\n};\n\n// The window is kept in the frame of the convergents p/q (index n) and\n// p'/q' (index n-1) of the target alpha. The map X -> (pX + p')/(qX + q')\n// sends the Ford circles onto themselves, sends 1/0 and 0/1 to p/q and p'/q',\n// and sends the tail t = [a(n+1); a(n+2), ...] to alpha. A fraction P/Q in\n// that frame lands on the LEDs at s(p/q - alpha) = sig D (P - tQ) / ((P + kQ)(t + k))\n// with radius sig / (2 (P + kQ)^2), where k = q'/q, D = pq' - p'q = +-1 and\n// sig = s/q^2. All of these stay small however deep the zoom goes, so it\n// can run for ever in double precision.\nfunction start(S, tgt) {\n  const a = TG[tgt];\n  S.tgt = tgt;\n  S.a = a;\n  S.n = 0;\n  S.k = 0;\n  S.D = -1;\n  S.lnq = 0;\n  S.t = tail(a, 1);\n  S.sig = max(S0, 64 * MARG * S.t + 1);\n  // p, q, p' and q' modulo 2^32, for each circle's own twinkle.\n  S.pn = a(0);\n  S.pm = 1;\n  S.qn = 1;\n  S.qm = 0;\n  S.fade = 0;\n}\n// The next convergent's frame is used as soon as the window sits wholly\n// between it and the one before: both tangent points off the panel, and the\n// two circles touching beyond the right edge.\nfunction advance(S) {\n  for (let g = 0; g \u003c 8; g++) {\n    const an = S.a(S.n + 1), k2 = 1 / (an + S.k), t2 = tail(S.a, S.n + 2);\n    if (S.sig * k2 * k2 \u003c= 64 * MARG * (t2 + k2)) return;\n    S.sig *= k2 * k2;\n    S.lnq -= log(k2);\n    S.k = k2;\n    S.t = t2;\n    S.D = -S.D;\n    S.n++;\n    const pn = (Math.imul(an, S.pn) + S.pm) | 0, qn = (Math.imul(an, S.qn) + S.qm) | 0;\n    S.pm = S.pn;\n    S.qm = S.qn;\n    S.pn = pn;\n    S.qn = qn;\n  }\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    time: 0, wave: -1, hue: 0, glow: 0.55, depth: 1.8, flat: 0.05,\n    Y: new Float64Array(MAXC), R: new Float64Array(MAXC), Wt: new Float64Array(MAXC),\n    PP: new Int32Array(MAXC), QQ: new Int32Array(MAXC), PA: new Int32Array(MAXC), PB: new Int32Array(MAXC),\n    CV: new Uint8Array(MAXC), PH: new Uint8Array(MAXC), stack: new Int32Array(MAXC * 4), conv: new Float64Array(96),\n    buf: new Float32Array(N * 3), col: [0, 0, 0],\n  });\n  start(S, 0);\n  S.tgt = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.time += d;\n  S.hue = k[0];\n  // Fill lights the inside of each circle in from its rim: a glow a few\n  // LEDs deep at first, then a flat fill under it up to a solid disc.\n  const u = cl(k[3], 0, 1), fk = sqrt(u);\n  S.glow = min(0.55, 2.4 * fk);\n  S.depth = 0.8 + 4 * fk;\n  S.flat = 0.85 * u;\n  const tgt = cl(round(k[2]), 0, 4);\n  if (tgt !== S.tgt) {\n    const first = S.tgt \u003c 0;\n    start(S, tgt);\n    if (first) S.fade = 1;\n  }\n  S.fade = min(1, S.fade + d * 2.5);\n  S.sig *= exp(d * cl(k[1], 0.2, 3) * 0.165);\n  advance(S);\n  if (S.wave >= 0) {\n    S.wave += d;\n    if (S.wave > WT) S.wave = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.wave = 0;\n}\n\n// Every circle that reaches the panel: the two convergents framing the\n// window, then the Stern-Brocot tree between them, each new fraction the\n// mediant of two that touch. A gap whose two tangent points both lie off one\n// end of the panel holds nothing on it, and a mediant too small to see has\n// only smaller ones below it.\nfunction circles(S) {\n  const { Y, R, Wt, PP, QQ, PA, PB, CV, PH, stack, conv } = S;\n  const sig = S.sig, k = S.k, t = S.t, D = S.D, tk = t + k, wmax = sqrt(sig / (2 * RMIN));\n  // The convergents of the tail are the convergents of the target.\n  let nc = 0;\n  for (let j = 0, h1 = 1, k1 = 0, h0 = S.a(S.n + 1), k0 = 1; j \u003c 40 && h0 + k * k0 \u003c= wmax; j++) {\n    conv[nc++] = h0;\n    conv[nc++] = k0;\n    const a = S.a(S.n + 2 + j), h2 = a * h0 + h1, k2 = a * k0 + k1;\n    (h1 = h0), (k1 = k0), (h0 = h2), (k0 = k2);\n  }\n  PP[0] = 0, QQ[0] = 1, Wt[0] = k, CV[0] = 1, PH[0] = 1;\n  if (k > 0) (R[0] = sig / (2 * k * k)), (Y[0] = CY + (D * sig * t) / (k * tk));\n  else (R[0] = 0), (Y[0] = CY + D * 1e30);\n  PP[1] = 1, QQ[1] = 0, Wt[1] = 1, CV[1] = 1, PH[1] = 1, R[1] = sig / 2, Y[1] = CY - (D * sig) / tk;\n  let n = 2, sp = 0;\n  stack[sp++] = 0;\n  stack[sp++] = 1;\n  while (sp > 0 && n \u003c MAXC) {\n    const b = stack[--sp], a = stack[--sp], ya = Y[a], yb = Y[b];\n    if ((ya \u003c -1 && yb \u003c -1) || (ya > H + 1 && yb > H + 1)) continue;\n    const P = PP[a] + PP[b], Q = QQ[a] + QQ[b], w = P + k * Q;\n    if (w > wmax) continue;\n    PP[n] = P, QQ[n] = Q, Wt[n] = w, PA[n] = a, PB[n] = b;\n    R[n] = sig / (2 * w * w);\n    Y[n] = CY - (D * sig * (P - t * Q)) / (w * tk);\n    let c = 0;\n    for (let j = 0; j \u003c nc; j += 2) if (conv[j] === P && conv[j + 1] === Q) c = 1;\n    CV[n] = c;\n    // On the descent to the target: the target lies between the parents.\n    PH[n] = (PP[a] - t * QQ[a]) * (PP[b] - t * QQ[b]) \u003c 0 ? 1 : 0;\n    stack[sp++] = a;\n    stack[sp++] = n;\n    stack[sp++] = n;\n    stack[sp++] = b;\n    n++;\n  }\n  return n;\n}\n\n// The rim is RW LEDs either side of the circle's edge.\nconst RW = 0.85;\n// Colour by denominator: the hue walks HA round the wheel and back as ln q\n// climbs by HL and HL again, so the circles stay on the cool side of the\n// wheel (teal, blue, violet, pink at the start) however deep the zoom goes.\nconst HA = 0.36, HL = 4;\n// The descent's front runs WV units of ln(size) a second; a tap lasts WT s.\nconst WV = 1.8, WT = 5;\nfunction disc(buf, r, yc, cr, cg, cb, ra, ga, gl, fa, cw) {\n  const y0 = max(0, floor(yc - r - 1)), y1 = min(H - 1, floor(yc + r + 1)), x1 = min(W - 1, floor(2 * r + 1)), rw = RW * cw;\n  for (let y = y0; y \u003c= y1; y++) {\n    const dy = y + 0.5 - yc, dy2 = dy * dy;\n    const ady = abs(dy), xs = ady \u003c= r ? dy2 / (r + sqrt(r * r - dy2)) : r;\n    for (let x = max(0, floor(xs - 2)); x \u003c= x1; x++) {\n      const X = x + 0.5, dist = sqrt((X - r) * (X - r) + dy2), d = (X * X - 2 * X * r + dy2) / (dist + r);\n      if (d > rw) {\n        if (X > r) break;\n        continue;\n      }\n      let v = ra * (d > -rw ? 1 - abs(d) / rw : 0);\n      if (d \u003c 0.5) v += cl(0.5 - d, 0, 1) * (fa + ga * exp(d / gl) + (y === TROW ? 0.32 : 0));\n      const p = (y * W + x) * 3;\n      buf[p] += cr * v;\n      buf[p + 1] += cg * v;\n      buf[p + 2] += cb * v;\n    }\n  }\n}\nfunction dot(buf, x, y, v, cr, cg, cb) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = xi + i, py = yi + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = v * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), p = (py * W + px) * 3;\n      buf[p] += cr * w;\n      buf[p + 1] += cg * w;\n      buf[p + 2] += cb * w;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const buf = S.buf, col = S.col, n = circles(S), { Y, R, Wt, PP, QQ, PA, PB, CV, PH } = S;\n  buf.fill(0);\n  // The target's ray. A circle the row through alpha crosses has\n  // |alpha - p/q| \u003c 1/(2q^2), and by Legendre's theorem that makes p/q a\n  // convergent of alpha: the zoom passes through convergents and nothing\n  // else. Convergents get whiter, wider rims; the row lights inside them.\n  for (let x = 0; x \u003c W; x++) {\n    const p = (TROW * W + x) * 3, v = 0.13 * (1 - x / 90);\n    buf[p] += 255 * v;\n    buf[p + 1] += 240 * v;\n    buf[p + 2] += 200 * v;\n  }\n  // After a K1 tap the Stern-Brocot descent into the target lights up: a\n  // front runs from the biggest circles to the smallest and lights each\n  // fraction whose two parents hold the target between them, so the light\n  // hops mediant by mediant, each circle touching the last, down to the\n  // spark on the line. The rest of the window dims while it runs.\n  const on = S.wave >= 0, wf = S.wave * WV - 1.2, wd = on ? smooth(0, 0.3, S.wave) * min(1, (WT - S.wave) / 0.9) : 0;\n  for (let i = 0; i \u003c n; i++) {\n    const r = R[i];\n    if (r \u003c RMIN || (i === 0 && S.k === 0)) continue;\n    const lq = (S.lnq + log(Wt[i])) / HL;\n    hsv(S.hue + 0.5 + HA * abs(lq - 2 * floor(lq / 2 + 0.5)), 0.82, 1, col);\n    let cr = col[0], cg = col[1], cb = col[2], ra = 0.9, cw = 1, ga = S.glow, fa = S.flat;\n    let vis = smooth(RMIN, 1.6, r);\n    if (CV[i]) (cr = cr * 0.65 + 89), (cg = cg * 0.65 + 84), (cb = cb * 0.65 + 70), (ra = 1), (cw = 1.3);\n    if (on && PH[i]) {\n      const lv = log(64 / r), fr = exp(-(((wf - lv) / 0.35) ** 2)), lit = smooth(-0.25, 0.25, wf - lv) * wd;\n      (cr += (255 - cr) * (0.25 * lit + 0.5 * fr)), (cg += (255 - cg) * (0.25 * lit + 0.5 * fr)), (cb += (255 - cb) * (0.25 * lit + 0.5 * fr));\n      (ra += 0.4 * lit + fr), (ga += 0.4 * lit), (fa += 0.12 * lit + 0.35 * fr), (cw += 0.4 * lit);\n    } else vis *= 1 - 0.55 * wd;\n    disc(buf, r, Y[i], cr, cg, cb, ra * vis, ga * vis, S.depth * (1 + 0.1 * min(r, 90)), fa * vis, cw);\n  }\n  // The points where circles touch glint, each at its own pace. Every\n  // tangency on the panel is a mediant touching one of its two parents.\n  const { pn, pm, qn, qm } = S;\n  for (let i = 2; i \u003c n; i++) {\n    const rm = R[i];\n    if (rm \u003c 1.2) continue;\n    const pa = Math.imul(pn, PP[i]) + Math.imul(pm, QQ[i]), qa = Math.imul(qn, PP[i]) + Math.imul(qm, QQ[i]);\n    const fr = on && PH[i] ? 2 * exp(-(((wf - log(64 / rm)) / 0.35) ** 2)) : 0;\n    for (let e = 0; e \u003c 2; e++) {\n      const j = e ? PB[i] : PA[i], rp = R[j];\n      if (j === 0 && S.k === 0) continue;\n      const tx = (2 * rp * rm) / (rp + rm), ty = Y[i] + (Y[j] > Y[i] ? 1 : -1) * ((2 * rm * sqrt(rp * rm)) / (rp + rm));\n      if (tx > W || ty \u003c -1 || ty > H) continue;\n      const h = hash(pa ^ (Math.imul(pn, PP[j]) + Math.imul(pm, QQ[j])), qa ^ (Math.imul(qn, PP[j]) + Math.imul(qm, QQ[j])));\n      const sn = sin(S.time * (1.1 + h * 1.7) + h * 40), g = (0.3 + 0.9 * sn ** 6 + fr) * smooth(1.2, 4, rm);\n      dot(buf, tx - 0.5, ty - 0.5, g * 1.6, 255, 245, 225);\n    }\n  }\n  // The target itself, a spark on the line.\n  dot(buf, 0.25, TROW, 1.4, 255, 250, 235);\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p] * f), min(255, buf[p + 1] * f), min(255, buf[p + 2] * f));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long."},{"name":"Target","min":0,"max":4,"about":"The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one."},{"name":"Fill","min":0,"max":1,"about":"Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid."}],"start":[0,2,0,0.06],"measures":{"motion":0.6649,"detail":0.0489,"edges":0.4057,"complexity":1.3917,"coverage":0.8005,"colour":0.1799,"drift":0.1998},"knobResponse":[0.1431,0.2105,0.195,0.7368]},{"slug":"fortune-sweep","title":"Fortune's Sweep","family":"algo","round":37,"note":"금색 쓸기 선이 1초에 22줄씩 내려가고, 선 위로 포천의 해변선이 지나간 자리부터 보로노이 그림이 확정돼요. 해변선은 사이트 하나에 포물선 호 하나씩 이어진 목걸이라서, 선이 사이트를 지나면 호가 가시처럼 돋고 세 사이트를 지나는 빈 원이 선에 닿으면 가운데 호가 사라지며 꼭짓점이 금색 점으로 남아요. 지난 그림은 40% 밝기로 아래에서 기다려요. K4 는 가중치를 걸어 모서리를 쌍곡선으로 휘고, 누르면 새 사이트로 바로 다시 쓸어요.","idea":"A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.","buttons":"K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.","code":"// ===== Patternflow pattern =====\n// Title:   Fortune's Sweep\n// Family:  algo\n// Idea:    A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Fortune's sweep-line algorithm for Voronoi diagrams (Steven Fortune, 1986), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1\n//\n// Knob 1: Hue. Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green.\n// Knob 2: Speed. Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s.\n// Knob 3: Sites. How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77.\n// Knob 4: Weights. Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle.\n// Buttons: K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.\n\n// The picture is drawn per LED with no event queue. For a point p above the\n// sweep line at height L (y grows down), let D1(p) be the distance to its\n// nearest site, weighted when Weights is up. p is certain when D1(p) \u003c= L - p.y: no site the line has\n// not reached yet can come closer to p than the line itself. The beach line\n// is D1(p) = L - p.y, and on it the nearest site is always one the line has\n// passed, so the global nearest site is the right one and the diagram's\n// tables are built once a sweep. Only L changes from frame to frame.\n//\n// The circle events come from the diagram's vertices: a point v at weighted\n// distance r from three sites and no nearer to any other. Its event falls\n// at L = v.y + r, when the circle round v touches the sweep line from above.\n// Checked in a scratch script against the beach line worked out from the\n// parabolas themselves, each site's arc being the parabola with the site\n// for focus and y = L + w for directrix: 24 diagrams, four each of 16, 32\n// and 48 sites, unweighted and at full weight, 1,176 events. 26 fell within\n// 0.002 rows of the third site's own arrival or of a neighbouring event and\n// were left out. At each of the other 1,150, just before the event the\n// three sites' arcs lie side by side on the beach line, and just after it\n// the middle one is gone and the other two meet. Half a row before, the\n// arc about to vanish is at most 3 LEDs wide.\n\nconst W = 64, H = 128, N = W * H, MAXS = 48;\nconst { floor, min, max, sqrt, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Rows a second per unit of Speed.\nconst ROWS = 11;\n// The finished diagram holds this long before the next sweep, in seconds.\nconst HOLD = 0.6;\n// A circle event flashes this long, in seconds.\nconst FLASH = 0.6;\n// The last diagram fades to this share of its brightness as the next sweep starts.\nconst DIM = 0.4;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction newSet() {\n  return {\n    sx: new Float32Array(MAXS), sy: new Float32Array(MAXS), sr: new Float32Array(MAXS), sw: new Float32Array(MAXS),\n    pref: new Uint8Array(MAXS), tone: new Uint8Array(MAXS), gh: new Float32Array(MAXS * 3),\n    d1: new Float32Array(N), own: new Uint8Array(N), ed: new Float32Array(N), g1: new Float32Array(N),\n    adj: new Uint8Array(MAXS * MAXS), col: new Float32Array(MAXS * 3), tint: new Float32Array(MAXS * 3),\n    n: 0, wk: -1, hue: NaN, ev: [], evi: 0, lStart: -3, lEnd: 150,\n  };\n}\n\n// Best-candidate sampling, twelve tries a site: every prefix of the 48 is\n// spread about evenly, so Sites can take the first n.\nfunction scatter(S) {\n  for (let i = 0; i \u003c MAXS; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let t = 0, tries = i === 0 ? 1 : 12; t \u003c tries; t++) {\n      const x = 2 + random() * 60, y = 2 + random() * 124;\n      let d = 1e9;\n      for (let j = 0; j \u003c i; j++) {\n        const dx = x - S.sx[j], dy = y - S.sy[j];\n        d = min(d, dx * dx + dy * dy);\n      }\n      if (d > bd) (bd = d), (bx = x), (by = y);\n    }\n    S.sx[i] = bx;\n    S.sy[i] = by;\n    S.sr[i] = random();\n    S.pref[i] = floor(random() * 4);\n  }\n  S.n = 0;\n  S.hue = NaN;\n}\n\n// The vertices of the additively weighted diagram: |v - s| = r + w for the\n// three sites. Subtracting the squared equations pairwise leaves v linear in\n// r, and the first one then gives a quadratic in r. With no weights it is\n// the circumcircle.\nfunction vertices(S, a, b, c, out) {\n  const { sx, sy, sw } = S;\n  const ax = sx[a], ay = sy[a], wa = sw[a];\n  const m11 = 2 * (ax - sx[b]), m12 = 2 * (ay - sy[b]), m21 = 2 * (ax - sx[c]), m22 = 2 * (ay - sy[c]);\n  const det = m11 * m22 - m12 * m21;\n  if (abs(det) \u003c 1e-6) return 0;\n  const aa = ax * ax + ay * ay;\n  const k1 = sw[b] * sw[b] - wa * wa - sx[b] * sx[b] - sy[b] * sy[b] + aa, q1 = 2 * (sw[b] - wa);\n  const k2 = sw[c] * sw[c] - wa * wa - sx[c] * sx[c] - sy[c] * sy[c] + aa, q2 = 2 * (sw[c] - wa);\n  // v = P + Q r\n  const px = (k1 * m22 - m12 * k2) / det, py = (m11 * k2 - k1 * m21) / det;\n  const qx = (q1 * m22 - m12 * q2) / det, qy = (m11 * q2 - q1 * m21) / det;\n  const dx = px - ax, dy = py - ay;\n  const A = qx * qx + qy * qy - 1, B = 2 * (dx * qx + dy * qy - wa), C = dx * dx + dy * dy - wa * wa;\n  let k = 0;\n  const rs = [];\n  if (abs(A) \u003c 1e-9) {\n    if (abs(B) > 1e-9) rs.push(-C / B);\n  } else {\n    const disc = B * B - 4 * A * C;\n    if (disc \u003c 0) return 0;\n    const sq = sqrt(disc);\n    rs.push((-B - sq) / (2 * A), (-B + sq) / (2 * A));\n  }\n  const wmin = min(wa, sw[b], sw[c]);\n  for (const r of rs) {\n    if (r + wmin \u003c -1e-6) continue;\n    const vx = px + qx * r, vy = py + qy * r;\n    let empty = true;\n    for (let l = 0; l \u003c S.n && empty; l++) {\n      if (l === a || l === b || l === c) continue;\n      const ex = vx - sx[l], ey = vy - sy[l];\n      if (sqrt(ex * ex + ey * ey) - sw[l] \u003c r - 1e-4) empty = false;\n    }\n    if (!empty) continue;\n    // Only circles that reach the panel.\n    if (vx + r \u003c 0 || vx - r > W - 1 || vy + r \u003c 0 || vy - r > H - 1) continue;\n    out.push({ t: vy + r, x: vx, y: vy, r, fired: -1e9 });\n    k++;\n  }\n  return k;\n}\n\n// The tables of one diagram: nearest weighted distance, its site, the\n// distance in LEDs to the nearest edge and the slope of D1(p) - (L - p.y),\n// which turns the beach line's level into a distance in LEDs too.\nfunction build(S, n, wk) {\n  S.n = n;\n  S.wk = wk;\n  const wmax = 0.5 * sqrt(N / n) * wk;\n  const { sx, sy, sw, d1, own, ed, g1, adj } = S;\n  for (let i = 0; i \u003c n; i++) sw[i] = wmax * S.sr[i];\n  adj.fill(0);\n  let lEnd = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p - x) / W;\n    let b1 = 1e9, b2 = 1e9, i1 = 0, i2 = 0, r1 = 1, r2 = 1;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = x - sx[i], dy = y - sy[i], r = sqrt(dx * dx + dy * dy), d = r - sw[i];\n      if (d \u003c b1) (b2 = b1), (i2 = i1), (r2 = r1), (b1 = d), (i1 = i), (r1 = r);\n      else if (d \u003c b2) (b2 = d), (i2 = i), (r2 = r);\n    }\n    d1[p] = b1;\n    own[p] = i1;\n    r1 = max(r1, 1e-3);\n    r2 = max(r2, 1e-3);\n    const ux = (x - sx[i1]) / r1, uy = (y - sy[i1]) / r1, vx = (x - sx[i2]) / r2, vy = (y - sy[i2]) / r2;\n    const ge = sqrt((ux - vx) * (ux - vx) + (uy - vy) * (uy - vy));\n    ed[p] = (b2 - b1) / max(0.3, ge);\n    g1[p] = sqrt(ux * ux + (uy + 1) * (uy + 1));\n    if (ed[p] \u003c 1.5) adj[i1 * MAXS + i2] = adj[i2 * MAXS + i1] = 1;\n    if (y + b1 > lEnd) lEnd = y + b1;\n  }\n  S.lEnd = lEnd + 1.5;\n  let ls = -3;\n  for (let i = 0; i \u003c n; i++) ls = min(ls, sy[i] - sw[i] - 1);\n  S.lStart = ls;\n  // Four tones, neighbours apart where the greedy pass manages it.\n  for (let i = 0; i \u003c n; i++) {\n    let used = 0;\n    for (let j = 0; j \u003c i; j++) if (adj[i * MAXS + j]) used |= 1 \u003c\u003c S.tone[j];\n    let t = S.pref[i];\n    for (let k = 0; k \u003c 4; k++) if (!(used & (1 \u003c\u003c ((S.pref[i] + k) & 3)))) {\n      t = (S.pref[i] + k) & 3;\n      break;\n    }\n    S.tone[i] = t;\n  }\n  const ev = [];\n  for (let a = 0; a \u003c n; a++) for (let b = a + 1; b \u003c n; b++) for (let c = b + 1; c \u003c n; c++) vertices(S, a, b, c, ev);\n  // Off-panel vertices whose circle would only touch the line after the\n  // last LED is certain never fire: about one in twelve.\n  S.ev = ev.filter((e) => e.t \u003c= S.lEnd).sort((u, v) => u.t - v.t);\n  S.evi = 0;\n  S.hue = NaN;\n}\n\n// Calm tones round the base hue. Where a tone lands on red, orange or\n// yellow it is paled and lifted, as a dark orange cell reads brown and a\n// dark yellow one olive on the panel; yellow is lifted most.\nconst TONES = [[0, 0.72, 0.52], [0.075, 0.6, 0.46], [-0.085, 0.62, 0.5], [0.025, 0.42, 0.6]];\nconst band = (v, a, b, e) => cl((v - a) / e, 0, 1) * cl((b - v) / e, 0, 1);\nfunction paint(S, hue) {\n  for (let i = 0; i \u003c S.n; i++) {\n    const tn = TONES[S.tone[i]], h = hue + 0.56 + tn[0], hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh;\n    const warm = band(hw, -0.06, 0.3, 0.05), yel = band(hw, 0.08, 0.32, 0.05);\n    hsv(h, tn[1] * (1 - 0.3 * warm - 0.15 * yel), tn[2] + 0.28 * warm + 0.14 * yel, S.col, i * 3);\n    hsv(h, 0.32, 1, S.tint, i * 3);\n    // The waiting diagram is the same tone at 40%, except that a dim\n    // orange or yellow is brown and a dim lime is olive whatever is done to\n    // it, so those ghosts lean to wine below the yellow and to green above.\n    // The turn is a jump: a blend of the two goes through olive again.\n    const gw = band(hw, -0.07, 0.33, 0.04);\n    hsv(h + gw * ((hw \u003c 0.11 ? -0.03 : 0.36) - hw), tn[1] * 0.85, tn[2] * DIM * 1.05, S.gh, i * 3);\n  }\n  S.hue = hue;\n}\n\nfunction startSweep(st) {\n  const t = st.old;\n  st.old = st.cur;\n  st.cur = t;\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  st.L = st.cur.lStart;\n  st.fade = 1;\n  st.hold = 0;\n}\n\nexport function setup(params) {\n  const st = (params.s = {\n    cur: newSet(), old: newSet(), n: 16, wk: 0.06, hue: 0, speed: 2, L: 0, fade: 0, hold: 0, clock: 0,\n    buf: new Float32Array(N * 3), acc: new Float32Array(3), edge: new Float32Array(3), pale: new Float32Array(3),\n  });\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  startSweep(st);\n  // Open a third of the way down a sweep, with the first diagram waiting below.\n  st.L = 36;\n  st.fade = 0;\n  for (const e of st.cur.ev) if (e.t \u003c= st.L) e.fired = -1e9;\n  while (st.cur.evi \u003c st.cur.ev.length && st.cur.ev[st.cur.evi].t \u003c= st.L) st.cur.evi++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const st = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  st.hue = k[0];\n  st.speed = cl(k[1], 0.2, 3);\n  st.clock += d;\n  const n = round(cl(k[2], 16, 48)), wk = cl(k[3], 0, 1);\n  if (n !== st.n || abs(wk - st.wk) > 0.002) {\n    st.n = n;\n    st.wk = wk;\n    // The diagram changes under the sweep: rebuild both, and treat the\n    // events the line has already passed as fixed, without a flash.\n    for (const S of [st.cur, st.old]) build(S, n, wk);\n    const C = st.cur;\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.evi++;\n    st.L = max(st.L, C.lStart);\n  }\n  if (input.btnPressed && input.btnPressed[0]) startSweep(st);\n  const C = st.cur;\n  if (st.fade > 0) st.fade = max(0, st.fade - d / 0.9);\n  if (st.L \u003c C.lEnd) {\n    st.L = min(C.lEnd, st.L + d * st.speed * ROWS);\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.ev[C.evi++].fired = st.clock;\n  } else if ((st.hold += d) >= HOLD) startSweep(st);\n}\n\nexport function draw(display, params) {\n  const st = params.s;\n  if (!st) return;\n  const C = st.cur, O = st.old, L = st.L, buf = st.buf, acc = st.acc, edge = st.edge, pale = st.pale;\n  if (C.hue !== st.hue) paint(C, st.hue);\n  if (O.hue !== st.hue) paint(O, st.hue);\n  // Gold for the line and the circles at Hue 0, opposite the cells.\n  const ah = st.hue + 0.125, ahh = ah - floor(ah);\n  hsv(ah, 0.62 - 0.2 * cl((ahh - 0.2) / 0.1, 0, 1) * cl((0.4 - ahh) / 0.1, 0, 1), 1, acc, 0);\n  hsv(st.hue + 0.56, 0.18, 1, edge, 0);\n  hsv(st.hue + 0.56, 0.1, 1, pale, 0);\n  const fd = st.fade, ok = DIM + (1 - DIM) * fd;\n  const Cc = C.col, Ct = C.tint, Oc = O.col, Og = O.gh;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    // Between the beach line and the sweep line nothing is known yet: the\n    // old diagram shows there at two thirds of its waiting level.\n    const zone = y \u003c L ? 0.62 : 1;\n    // The line is a full row at any L, with a soft second row as it moves.\n    const sw = cl(1 - (abs(y - L) - 0.5) / 0.6, 0, 1);\n    for (let x = 0; x \u003c W; x++, p++) {\n      const oo = O.own[p] * 3, oe = cl(1 - O.ed[p] / 0.9, 0, 1) * 0.75;\n      let r = ((Og[oo] + (Oc[oo] - Og[oo]) * fd) * (1 - oe) + edge[0] * oe * ok) * zone;\n      let g = ((Og[oo + 1] + (Oc[oo + 1] - Og[oo + 1]) * fd) * (1 - oe) + edge[1] * oe * ok) * zone;\n      let b = ((Og[oo + 2] + (Oc[oo + 2] - Og[oo + 2]) * fd) * (1 - oe) + edge[2] * oe * ok) * zone;\n      const f = C.d1[p] - (L - y), dist = f / max(0.5, C.g1[p]);\n      if (dist \u003c 1.2) {\n        const co = C.own[p] * 3, m = cl(0.5 - dist, 0, 1);\n        // Fresh ground just behind the beach line glows and settles over\n        // about four rows.\n        const glow = 0.5 * exp(-max(0, -dist) / 3.5);\n        let nr = Cc[co] + (Ct[co] - Cc[co]) * glow, ng = Cc[co + 1] + (Ct[co + 1] - Cc[co + 1]) * glow, nb = Cc[co + 2] + (Ct[co + 2] - Cc[co + 2]) * glow;\n        const e = cl(1 - C.ed[p] / 0.9, 0, 1) * 0.92;\n        nr += (edge[0] - nr) * e;\n        ng += (edge[1] - ng) * e;\n        nb += (edge[2] - nb) * e;\n        r += (nr - r) * m;\n        g += (ng - g) * m;\n        b += (nb - b) * m;\n        // The arc itself, a pale bright tint of its own site, whitening where\n        // an edge meets it: those meeting points are the breakpoints that\n        // trace the edges down.\n        const a = cl(1 - abs(dist) / 0.8, 0, 1);\n        if (a > 0) {\n          const wh = e * 0.8;\n          r += (Ct[co] + (pale[0] - Ct[co]) * wh - r) * a;\n          g += (Ct[co + 1] + (pale[1] - Ct[co + 1]) * wh - g) * a;\n          b += (Ct[co + 2] + (pale[2] - Ct[co + 2]) * wh - b) * a;\n        }\n      }\n      if (sw > 0) {\n        r += (acc[0] - r) * sw;\n        g += (acc[1] - g) * sw;\n        b += (acc[2] - b) * sw;\n      }\n      buf[p * 3] = r;\n      buf[p * 3 + 1] = g;\n      buf[p * 3 + 2] = b;\n    }\n  }\n  const put = (x, y, r, g, b, a) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    buf[o] += (r - buf[o]) * a;\n    buf[o + 1] += (g - buf[o + 1]) * a;\n    buf[o + 2] += (b - buf[o + 2]) * a;\n  };\n  // Weight circles, faint, for sites that carry more than 1.5 LEDs.\n  for (let i = 0; i \u003c C.n; i++) {\n    const w = C.sw[i];\n    if (w \u003c 1.5) continue;\n    const seen = C.sy[i] - w \u003c= L, a = seen ? 0.3 : 0.22;\n    for (let y = max(0, floor(C.sy[i] - w - 1)); y \u003c= min(H - 1, C.sy[i] + w + 1); y++)\n      for (let x = max(0, floor(C.sx[i] - w - 1)); x \u003c= min(W - 1, C.sx[i] + w + 1); x++) {\n        const dx = x - C.sx[i], dy = y - C.sy[i], q = 1 - abs(sqrt(dx * dx + dy * dy) - w) / 0.6;\n        if (q > 0) put(x, y, pale[0], pale[1], pale[2], a * q);\n      }\n  }\n  // Circle events: the empty circle flashes in the line's colour, touching\n  // the line at its foot, and the vertex it fixes keeps a gold point.\n  for (let j = 0; j \u003c C.evi; j++) {\n    const e = C.ev[j], age = st.clock - e.fired;\n    put(round(e.x), round(e.y), acc[0], acc[1], acc[2], 0.85);\n    if (age >= FLASH) continue;\n    const fa = (1 - age / FLASH) * (1 - age / FLASH), R = e.r;\n    put(round(e.x), round(e.y), 1, 1, 1, fa);\n    for (let y = max(0, floor(e.y - R - 1)); y \u003c= min(H - 1, e.y + R + 1); y++)\n      for (let x = max(0, floor(e.x - R - 1)); x \u003c= min(W - 1, e.x + R + 1); x++) {\n        const dx = x - e.x, dy = y - e.y, q = 1 - abs(sqrt(dx * dx + dy * dy) - R) / 0.65;\n        if (q > 0) put(x, y, acc[0], acc[1], acc[2], q * fa * 0.9);\n      }\n  }\n  // Sites: white once the line has reached them, a dim grey point before.\n  for (let i = 0; i \u003c C.n; i++) {\n    const x = round(C.sx[i]), y = round(C.sy[i]);\n    if (C.sy[i] - C.sw[i] \u003c= L) {\n      put(x, y, 1, 1, 1, 1);\n      put(x - 1, y, 1, 1, 1, 0.35);\n      put(x + 1, y, 1, 1, 1, 0.35);\n      put(x, y - 1, 1, 1, 1, 0.35);\n      put(x, y + 1, 1, 1, 1, 0.35);\n    } else put(x, y, 0.5, 0.5, 0.5, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, round(255 * min(1, buf[p * 3])), round(255 * min(1, buf[p * 3 + 1])), round(255 * min(1, buf[p * 3 + 2])));\n}\n","layer":{"id":"layer-fortune-sweep","type":"code","name":"fortune-sweep","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fortune's Sweep\n// Family:  algo\n// Idea:    A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Fortune's sweep-line algorithm for Voronoi diagrams (Steven Fortune, 1986), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1\n//\n// Knob 1: Hue. Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green.\n// Knob 2: Speed. Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s.\n// Knob 3: Sites. How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77.\n// Knob 4: Weights. Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle.\n// Buttons: K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.\n\n// The picture is drawn per LED with no event queue. For a point p above the\n// sweep line at height L (y grows down), let D1(p) be the distance to its\n// nearest site, weighted when Weights is up. p is certain when D1(p) \u003c= L - p.y: no site the line has\n// not reached yet can come closer to p than the line itself. The beach line\n// is D1(p) = L - p.y, and on it the nearest site is always one the line has\n// passed, so the global nearest site is the right one and the diagram's\n// tables are built once a sweep. Only L changes from frame to frame.\n//\n// The circle events come from the diagram's vertices: a point v at weighted\n// distance r from three sites and no nearer to any other. Its event falls\n// at L = v.y + r, when the circle round v touches the sweep line from above.\n// Checked in a scratch script against the beach line worked out from the\n// parabolas themselves, each site's arc being the parabola with the site\n// for focus and y = L + w for directrix: 24 diagrams, four each of 16, 32\n// and 48 sites, unweighted and at full weight, 1,176 events. 26 fell within\n// 0.002 rows of the third site's own arrival or of a neighbouring event and\n// were left out. At each of the other 1,150, just before the event the\n// three sites' arcs lie side by side on the beach line, and just after it\n// the middle one is gone and the other two meet. Half a row before, the\n// arc about to vanish is at most 3 LEDs wide.\n\nconst W = 64, H = 128, N = W * H, MAXS = 48;\nconst { floor, min, max, sqrt, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Rows a second per unit of Speed.\nconst ROWS = 11;\n// The finished diagram holds this long before the next sweep, in seconds.\nconst HOLD = 0.6;\n// A circle event flashes this long, in seconds.\nconst FLASH = 0.6;\n// The last diagram fades to this share of its brightness as the next sweep starts.\nconst DIM = 0.4;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction newSet() {\n  return {\n    sx: new Float32Array(MAXS), sy: new Float32Array(MAXS), sr: new Float32Array(MAXS), sw: new Float32Array(MAXS),\n    pref: new Uint8Array(MAXS), tone: new Uint8Array(MAXS), gh: new Float32Array(MAXS * 3),\n    d1: new Float32Array(N), own: new Uint8Array(N), ed: new Float32Array(N), g1: new Float32Array(N),\n    adj: new Uint8Array(MAXS * MAXS), col: new Float32Array(MAXS * 3), tint: new Float32Array(MAXS * 3),\n    n: 0, wk: -1, hue: NaN, ev: [], evi: 0, lStart: -3, lEnd: 150,\n  };\n}\n\n// Best-candidate sampling, twelve tries a site: every prefix of the 48 is\n// spread about evenly, so Sites can take the first n.\nfunction scatter(S) {\n  for (let i = 0; i \u003c MAXS; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let t = 0, tries = i === 0 ? 1 : 12; t \u003c tries; t++) {\n      const x = 2 + random() * 60, y = 2 + random() * 124;\n      let d = 1e9;\n      for (let j = 0; j \u003c i; j++) {\n        const dx = x - S.sx[j], dy = y - S.sy[j];\n        d = min(d, dx * dx + dy * dy);\n      }\n      if (d > bd) (bd = d), (bx = x), (by = y);\n    }\n    S.sx[i] = bx;\n    S.sy[i] = by;\n    S.sr[i] = random();\n    S.pref[i] = floor(random() * 4);\n  }\n  S.n = 0;\n  S.hue = NaN;\n}\n\n// The vertices of the additively weighted diagram: |v - s| = r + w for the\n// three sites. Subtracting the squared equations pairwise leaves v linear in\n// r, and the first one then gives a quadratic in r. With no weights it is\n// the circumcircle.\nfunction vertices(S, a, b, c, out) {\n  const { sx, sy, sw } = S;\n  const ax = sx[a], ay = sy[a], wa = sw[a];\n  const m11 = 2 * (ax - sx[b]), m12 = 2 * (ay - sy[b]), m21 = 2 * (ax - sx[c]), m22 = 2 * (ay - sy[c]);\n  const det = m11 * m22 - m12 * m21;\n  if (abs(det) \u003c 1e-6) return 0;\n  const aa = ax * ax + ay * ay;\n  const k1 = sw[b] * sw[b] - wa * wa - sx[b] * sx[b] - sy[b] * sy[b] + aa, q1 = 2 * (sw[b] - wa);\n  const k2 = sw[c] * sw[c] - wa * wa - sx[c] * sx[c] - sy[c] * sy[c] + aa, q2 = 2 * (sw[c] - wa);\n  // v = P + Q r\n  const px = (k1 * m22 - m12 * k2) / det, py = (m11 * k2 - k1 * m21) / det;\n  const qx = (q1 * m22 - m12 * q2) / det, qy = (m11 * q2 - q1 * m21) / det;\n  const dx = px - ax, dy = py - ay;\n  const A = qx * qx + qy * qy - 1, B = 2 * (dx * qx + dy * qy - wa), C = dx * dx + dy * dy - wa * wa;\n  let k = 0;\n  const rs = [];\n  if (abs(A) \u003c 1e-9) {\n    if (abs(B) > 1e-9) rs.push(-C / B);\n  } else {\n    const disc = B * B - 4 * A * C;\n    if (disc \u003c 0) return 0;\n    const sq = sqrt(disc);\n    rs.push((-B - sq) / (2 * A), (-B + sq) / (2 * A));\n  }\n  const wmin = min(wa, sw[b], sw[c]);\n  for (const r of rs) {\n    if (r + wmin \u003c -1e-6) continue;\n    const vx = px + qx * r, vy = py + qy * r;\n    let empty = true;\n    for (let l = 0; l \u003c S.n && empty; l++) {\n      if (l === a || l === b || l === c) continue;\n      const ex = vx - sx[l], ey = vy - sy[l];\n      if (sqrt(ex * ex + ey * ey) - sw[l] \u003c r - 1e-4) empty = false;\n    }\n    if (!empty) continue;\n    // Only circles that reach the panel.\n    if (vx + r \u003c 0 || vx - r > W - 1 || vy + r \u003c 0 || vy - r > H - 1) continue;\n    out.push({ t: vy + r, x: vx, y: vy, r, fired: -1e9 });\n    k++;\n  }\n  return k;\n}\n\n// The tables of one diagram: nearest weighted distance, its site, the\n// distance in LEDs to the nearest edge and the slope of D1(p) - (L - p.y),\n// which turns the beach line's level into a distance in LEDs too.\nfunction build(S, n, wk) {\n  S.n = n;\n  S.wk = wk;\n  const wmax = 0.5 * sqrt(N / n) * wk;\n  const { sx, sy, sw, d1, own, ed, g1, adj } = S;\n  for (let i = 0; i \u003c n; i++) sw[i] = wmax * S.sr[i];\n  adj.fill(0);\n  let lEnd = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p - x) / W;\n    let b1 = 1e9, b2 = 1e9, i1 = 0, i2 = 0, r1 = 1, r2 = 1;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = x - sx[i], dy = y - sy[i], r = sqrt(dx * dx + dy * dy), d = r - sw[i];\n      if (d \u003c b1) (b2 = b1), (i2 = i1), (r2 = r1), (b1 = d), (i1 = i), (r1 = r);\n      else if (d \u003c b2) (b2 = d), (i2 = i), (r2 = r);\n    }\n    d1[p] = b1;\n    own[p] = i1;\n    r1 = max(r1, 1e-3);\n    r2 = max(r2, 1e-3);\n    const ux = (x - sx[i1]) / r1, uy = (y - sy[i1]) / r1, vx = (x - sx[i2]) / r2, vy = (y - sy[i2]) / r2;\n    const ge = sqrt((ux - vx) * (ux - vx) + (uy - vy) * (uy - vy));\n    ed[p] = (b2 - b1) / max(0.3, ge);\n    g1[p] = sqrt(ux * ux + (uy + 1) * (uy + 1));\n    if (ed[p] \u003c 1.5) adj[i1 * MAXS + i2] = adj[i2 * MAXS + i1] = 1;\n    if (y + b1 > lEnd) lEnd = y + b1;\n  }\n  S.lEnd = lEnd + 1.5;\n  let ls = -3;\n  for (let i = 0; i \u003c n; i++) ls = min(ls, sy[i] - sw[i] - 1);\n  S.lStart = ls;\n  // Four tones, neighbours apart where the greedy pass manages it.\n  for (let i = 0; i \u003c n; i++) {\n    let used = 0;\n    for (let j = 0; j \u003c i; j++) if (adj[i * MAXS + j]) used |= 1 \u003c\u003c S.tone[j];\n    let t = S.pref[i];\n    for (let k = 0; k \u003c 4; k++) if (!(used & (1 \u003c\u003c ((S.pref[i] + k) & 3)))) {\n      t = (S.pref[i] + k) & 3;\n      break;\n    }\n    S.tone[i] = t;\n  }\n  const ev = [];\n  for (let a = 0; a \u003c n; a++) for (let b = a + 1; b \u003c n; b++) for (let c = b + 1; c \u003c n; c++) vertices(S, a, b, c, ev);\n  // Off-panel vertices whose circle would only touch the line after the\n  // last LED is certain never fire: about one in twelve.\n  S.ev = ev.filter((e) => e.t \u003c= S.lEnd).sort((u, v) => u.t - v.t);\n  S.evi = 0;\n  S.hue = NaN;\n}\n\n// Calm tones round the base hue. Where a tone lands on red, orange or\n// yellow it is paled and lifted, as a dark orange cell reads brown and a\n// dark yellow one olive on the panel; yellow is lifted most.\nconst TONES = [[0, 0.72, 0.52], [0.075, 0.6, 0.46], [-0.085, 0.62, 0.5], [0.025, 0.42, 0.6]];\nconst band = (v, a, b, e) => cl((v - a) / e, 0, 1) * cl((b - v) / e, 0, 1);\nfunction paint(S, hue) {\n  for (let i = 0; i \u003c S.n; i++) {\n    const tn = TONES[S.tone[i]], h = hue + 0.56 + tn[0], hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh;\n    const warm = band(hw, -0.06, 0.3, 0.05), yel = band(hw, 0.08, 0.32, 0.05);\n    hsv(h, tn[1] * (1 - 0.3 * warm - 0.15 * yel), tn[2] + 0.28 * warm + 0.14 * yel, S.col, i * 3);\n    hsv(h, 0.32, 1, S.tint, i * 3);\n    // The waiting diagram is the same tone at 40%, except that a dim\n    // orange or yellow is brown and a dim lime is olive whatever is done to\n    // it, so those ghosts lean to wine below the yellow and to green above.\n    // The turn is a jump: a blend of the two goes through olive again.\n    const gw = band(hw, -0.07, 0.33, 0.04);\n    hsv(h + gw * ((hw \u003c 0.11 ? -0.03 : 0.36) - hw), tn[1] * 0.85, tn[2] * DIM * 1.05, S.gh, i * 3);\n  }\n  S.hue = hue;\n}\n\nfunction startSweep(st) {\n  const t = st.old;\n  st.old = st.cur;\n  st.cur = t;\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  st.L = st.cur.lStart;\n  st.fade = 1;\n  st.hold = 0;\n}\n\nexport function setup(params) {\n  const st = (params.s = {\n    cur: newSet(), old: newSet(), n: 16, wk: 0.06, hue: 0, speed: 2, L: 0, fade: 0, hold: 0, clock: 0,\n    buf: new Float32Array(N * 3), acc: new Float32Array(3), edge: new Float32Array(3), pale: new Float32Array(3),\n  });\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  startSweep(st);\n  // Open a third of the way down a sweep, with the first diagram waiting below.\n  st.L = 36;\n  st.fade = 0;\n  for (const e of st.cur.ev) if (e.t \u003c= st.L) e.fired = -1e9;\n  while (st.cur.evi \u003c st.cur.ev.length && st.cur.ev[st.cur.evi].t \u003c= st.L) st.cur.evi++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const st = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  st.hue = k[0];\n  st.speed = cl(k[1], 0.2, 3);\n  st.clock += d;\n  const n = round(cl(k[2], 16, 48)), wk = cl(k[3], 0, 1);\n  if (n !== st.n || abs(wk - st.wk) > 0.002) {\n    st.n = n;\n    st.wk = wk;\n    // The diagram changes under the sweep: rebuild both, and treat the\n    // events the line has already passed as fixed, without a flash.\n    for (const S of [st.cur, st.old]) build(S, n, wk);\n    const C = st.cur;\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.evi++;\n    st.L = max(st.L, C.lStart);\n  }\n  if (input.btnPressed && input.btnPressed[0]) startSweep(st);\n  const C = st.cur;\n  if (st.fade > 0) st.fade = max(0, st.fade - d / 0.9);\n  if (st.L \u003c C.lEnd) {\n    st.L = min(C.lEnd, st.L + d * st.speed * ROWS);\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.ev[C.evi++].fired = st.clock;\n  } else if ((st.hold += d) >= HOLD) startSweep(st);\n}\n\nexport function draw(display, params) {\n  const st = params.s;\n  if (!st) return;\n  const C = st.cur, O = st.old, L = st.L, buf = st.buf, acc = st.acc, edge = st.edge, pale = st.pale;\n  if (C.hue !== st.hue) paint(C, st.hue);\n  if (O.hue !== st.hue) paint(O, st.hue);\n  // Gold for the line and the circles at Hue 0, opposite the cells.\n  const ah = st.hue + 0.125, ahh = ah - floor(ah);\n  hsv(ah, 0.62 - 0.2 * cl((ahh - 0.2) / 0.1, 0, 1) * cl((0.4 - ahh) / 0.1, 0, 1), 1, acc, 0);\n  hsv(st.hue + 0.56, 0.18, 1, edge, 0);\n  hsv(st.hue + 0.56, 0.1, 1, pale, 0);\n  const fd = st.fade, ok = DIM + (1 - DIM) * fd;\n  const Cc = C.col, Ct = C.tint, Oc = O.col, Og = O.gh;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    // Between the beach line and the sweep line nothing is known yet: the\n    // old diagram shows there at two thirds of its waiting level.\n    const zone = y \u003c L ? 0.62 : 1;\n    // The line is a full row at any L, with a soft second row as it moves.\n    const sw = cl(1 - (abs(y - L) - 0.5) / 0.6, 0, 1);\n    for (let x = 0; x \u003c W; x++, p++) {\n      const oo = O.own[p] * 3, oe = cl(1 - O.ed[p] / 0.9, 0, 1) * 0.75;\n      let r = ((Og[oo] + (Oc[oo] - Og[oo]) * fd) * (1 - oe) + edge[0] * oe * ok) * zone;\n      let g = ((Og[oo + 1] + (Oc[oo + 1] - Og[oo + 1]) * fd) * (1 - oe) + edge[1] * oe * ok) * zone;\n      let b = ((Og[oo + 2] + (Oc[oo + 2] - Og[oo + 2]) * fd) * (1 - oe) + edge[2] * oe * ok) * zone;\n      const f = C.d1[p] - (L - y), dist = f / max(0.5, C.g1[p]);\n      if (dist \u003c 1.2) {\n        const co = C.own[p] * 3, m = cl(0.5 - dist, 0, 1);\n        // Fresh ground just behind the beach line glows and settles over\n        // about four rows.\n        const glow = 0.5 * exp(-max(0, -dist) / 3.5);\n        let nr = Cc[co] + (Ct[co] - Cc[co]) * glow, ng = Cc[co + 1] + (Ct[co + 1] - Cc[co + 1]) * glow, nb = Cc[co + 2] + (Ct[co + 2] - Cc[co + 2]) * glow;\n        const e = cl(1 - C.ed[p] / 0.9, 0, 1) * 0.92;\n        nr += (edge[0] - nr) * e;\n        ng += (edge[1] - ng) * e;\n        nb += (edge[2] - nb) * e;\n        r += (nr - r) * m;\n        g += (ng - g) * m;\n        b += (nb - b) * m;\n        // The arc itself, a pale bright tint of its own site, whitening where\n        // an edge meets it: those meeting points are the breakpoints that\n        // trace the edges down.\n        const a = cl(1 - abs(dist) / 0.8, 0, 1);\n        if (a > 0) {\n          const wh = e * 0.8;\n          r += (Ct[co] + (pale[0] - Ct[co]) * wh - r) * a;\n          g += (Ct[co + 1] + (pale[1] - Ct[co + 1]) * wh - g) * a;\n          b += (Ct[co + 2] + (pale[2] - Ct[co + 2]) * wh - b) * a;\n        }\n      }\n      if (sw > 0) {\n        r += (acc[0] - r) * sw;\n        g += (acc[1] - g) * sw;\n        b += (acc[2] - b) * sw;\n      }\n      buf[p * 3] = r;\n      buf[p * 3 + 1] = g;\n      buf[p * 3 + 2] = b;\n    }\n  }\n  const put = (x, y, r, g, b, a) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    buf[o] += (r - buf[o]) * a;\n    buf[o + 1] += (g - buf[o + 1]) * a;\n    buf[o + 2] += (b - buf[o + 2]) * a;\n  };\n  // Weight circles, faint, for sites that carry more than 1.5 LEDs.\n  for (let i = 0; i \u003c C.n; i++) {\n    const w = C.sw[i];\n    if (w \u003c 1.5) continue;\n    const seen = C.sy[i] - w \u003c= L, a = seen ? 0.3 : 0.22;\n    for (let y = max(0, floor(C.sy[i] - w - 1)); y \u003c= min(H - 1, C.sy[i] + w + 1); y++)\n      for (let x = max(0, floor(C.sx[i] - w - 1)); x \u003c= min(W - 1, C.sx[i] + w + 1); x++) {\n        const dx = x - C.sx[i], dy = y - C.sy[i], q = 1 - abs(sqrt(dx * dx + dy * dy) - w) / 0.6;\n        if (q > 0) put(x, y, pale[0], pale[1], pale[2], a * q);\n      }\n  }\n  // Circle events: the empty circle flashes in the line's colour, touching\n  // the line at its foot, and the vertex it fixes keeps a gold point.\n  for (let j = 0; j \u003c C.evi; j++) {\n    const e = C.ev[j], age = st.clock - e.fired;\n    put(round(e.x), round(e.y), acc[0], acc[1], acc[2], 0.85);\n    if (age >= FLASH) continue;\n    const fa = (1 - age / FLASH) * (1 - age / FLASH), R = e.r;\n    put(round(e.x), round(e.y), 1, 1, 1, fa);\n    for (let y = max(0, floor(e.y - R - 1)); y \u003c= min(H - 1, e.y + R + 1); y++)\n      for (let x = max(0, floor(e.x - R - 1)); x \u003c= min(W - 1, e.x + R + 1); x++) {\n        const dx = x - e.x, dy = y - e.y, q = 1 - abs(sqrt(dx * dx + dy * dy) - R) / 0.65;\n        if (q > 0) put(x, y, acc[0], acc[1], acc[2], q * fa * 0.9);\n      }\n  }\n  // Sites: white once the line has reached them, a dim grey point before.\n  for (let i = 0; i \u003c C.n; i++) {\n    const x = round(C.sx[i]), y = round(C.sy[i]);\n    if (C.sy[i] - C.sw[i] \u003c= L) {\n      put(x, y, 1, 1, 1, 1);\n      put(x - 1, y, 1, 1, 1, 0.35);\n      put(x + 1, y, 1, 1, 1, 0.35);\n      put(x, y - 1, 1, 1, 1, 0.35);\n      put(x, y + 1, 1, 1, 1, 0.35);\n    } else put(x, y, 0.5, 0.5, 0.5, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, round(255 * min(1, buf[p * 3])), round(255 * min(1, buf[p * 3 + 1])), round(255 * min(1, buf[p * 3 + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green."},{"name":"Speed","min":0.2,"max":3,"about":"Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s."},{"name":"Sites","min":16,"max":48,"about":"How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77."},{"name":"Weights","min":0,"max":1,"about":"Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle."}],"start":[0,2,16,0.06],"measures":{"motion":0.3617,"detail":0.032,"edges":0.4248,"complexity":0.6651,"coverage":1,"colour":0.1845,"drift":0.1987},"knobResponse":[0.2392,0.1674,0.1095,0.0757]},{"slug":"foxfire","title":"Foxfire","family":"fungi","round":19,"note":"밤 숲 바닥 단면에서 뽕나무버섯 균사가 그루터기와 통나무, 흙 속을 기어가며 갈라지고 실을 따라 연둣빛 펄스가 흘러요. 버섯 무리가 돋았다 시들며 숨 쉬듯 빛나고 포자가 위로 떠올라요. K1 을 누르면 피어 있는 갓이 한꺼번에 포자를 뿜어요.","idea":"A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.","buttons":"K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.","code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","layer":{"id":"layer-foxfire","type":"code","name":"foxfire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower."},{"name":"Spores","min":0,"max":1,"about":"How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel."},{"name":"Damp","min":0,"max":1,"about":"How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them."}],"start":[0,2,0,0.06],"measures":{"motion":0.0552,"detail":0.062,"edges":0.4422,"complexity":2.0011,"coverage":0.1963,"colour":0.1249,"drift":0.0326},"knobResponse":[0.0328,0.0383,0.0467,0.0368]},{"slug":"frost","title":"Frost","family":"fractal","round":17,"note":"밤 유리창에 서리 고사리가 아래 틀과 창틀에서 자라 들어와요. 가지는 대각선으로 곧게 뻗어 깃털처럼 곁가지를 내며 반짝이고, 유리 너머로 가로등과 눈발이 흐리게 비치다가 방이 데워지면 가운데부터 녹아 다시 자라요. K1 을 누르면 입김이 가운데를 닦아요.","idea":"Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.","buttons":"K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.","code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","layer":{"id":"layer-frost","type":"code","name":"frost","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun."},{"name":"Rime","min":0,"max":1,"about":"How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame."},{"name":"Glitter","min":0,"max":1,"about":"How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling."}],"start":[0,2,0,0.06],"measures":{"motion":0.0377,"detail":0.1373,"edges":0.4636,"complexity":2.383,"coverage":0.4303,"colour":0.1004,"drift":0.0382},"knobResponse":[0.0509,0.1276,0.1564,0.0602]},{"slug":"funicular","title":"Funicular","family":"rail","round":27,"note":"해 질 녘 산비탈에서 계단꼴 객차 둘이 케이블 하나에 매달려 오르내려요. 호숫가 마을의 역을 떠난 빨간 객차가 오르는 동안 꼭대기 기관실의 큰 바퀴가 돌며 파란 객차가 내려오고, 둘은 중턱의 압트 교행 구간에서 갈라진 선로로 비켜 지나가요. K1 을 끝까지 돌리면 창이 켜진 밤이 되고, 누르면 객차가 바로 떠나요.","idea":"Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.","buttons":"K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.","code":"// ===== Patternflow pattern =====\n// Title:   Funicular\n// Family:  rail\n// Idea:    Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the two-car funicular with an Abt passing loop\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1\n//\n// Knob 1: Dusk. Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit.\n// Knob 2: Speed. At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower.\n// Knob 3: Grade. How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher.\n// Knob 4: Snow. A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel.\n// Buttons: K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i | 0, 374761393) + Math.imul(j | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nconst ridge = (t, s) => 1 - abs(2 * vn(t, s) - 1);\n// True draws only the line: track, cable, cars and stations.\nconst BARE = false;\n\n// Rows of the valley end and the summit end of the track and of the quay. The bullwheel's radius.\nconst YA = 112, YB = 30, QY = 121, R = 5.5;\n// Seconds a run and a stop take at Speed 1.\nconst RUN = 16, DWELL = 6;\n\n// Each colour from blue hour, its first three numbers, to night, its last three.\nconst PAL = {\n  s0:[12,26,82,5,11,42,1,3,12], s1:[44,70,150,14,28,80,3,8,26], s2:[134,118,180,46,52,112,8,16,40],\n  s3:[240,164,124,116,76,100,20,26,52], far:[62,68,122,26,30,70,8,11,28], haze:[112,100,152,46,44,86,12,15,34],\n  fsn:[240,184,198,120,112,160,40,46,76], fsd:[140,144,196,66,70,122,24,30,56], far2:[36,48,90,14,20,50,4,7,18],\n  trL:[44,84,70,22,42,46,9,18,22], trD:[20,44,48,10,22,30,5,10,16], und:[9,22,26,5,11,16,2,5,9],\n  rock:[100,96,126,48,50,80,17,19,30], rockD:[46,46,76,22,24,46,7,9,17], snow:[236,206,222,140,140,180,54,60,88],\n  snowD:[146,156,206,76,84,136,28,34,60], bed:[56,52,54,30,28,32,12,12,15], rail:[190,188,200,120,120,140,70,70,84],\n  slp:[38,32,32,20,17,19,8,7,9], roof:[70,62,66,34,30,36,14,12,16], conc:[120,116,120,60,58,64,26,26,30],\n  stone:[130,122,116,64,60,62,26,24,28], lake:[26,38,92,10,14,40,2,4,12], cLo:[236,150,140,104,72,104,18,20,34],\n  cHi:[98,90,146,34,36,74,8,10,22],\n};\n// Town walls: cream, ochre, pink, blue-grey, white.\nconst HOUSE = [[178, 152, 112], [192, 132, 62], [184, 106, 112], [84, 132, 140], [184, 180, 188]];\nconst WARM = [255, 196, 108], LAMP = [255, 226, 168], STEEL = [224, 220, 206];\nconst LIV = [[206, 34, 30], [34, 84, 196]], DK = [40, 40, 44], TILE = [128, 60, 46];\nconst lerp3 = (p, k, i = k \u003c 0.5 ? 0 : 3, f = k * 2 - i / 3) => [0, 1, 2].map((c) => mix(p[i + c], p[i + 3 + c], f));\n\n// The line for a grade: its ends, its direction u, the normal n to its lower\n// right, the passing loop, and the shape of a car column by column.\nfunction geom(g) {\n  const xA = mix(8, 17, g), xB = mix(50, 43, g), L = hypot(xB - xA, YB - YA);\n  const ux = (xB - xA) / L, uy = (YB - YA) / L, tp = -uy / ux, hb = round(3 * tp + 3.2);\n  const Lca = 10 / ux, aLo = Lca / 2 + 1.5, aHi = L - Lca / 2 - 1.5;\n  const G = { xA, L, ux, uy, nx: -uy, ny: ux, tp, hb, Lca, aLo, aHi, aM: (aLo + aHi) / 2, hs: Lca / 2 + 2, lt: 13, WL: 4.6 };\n  // Columns 0..9: three compartments of three and the end wall, each floor level, so the car climbs in steps.\n  for (const k of [\"ct\", \"cf\", \"cr\"]) G[k] = new Int8Array(10);\n  let vr = 0;\n  for (let c = 0; c \u003c 10; c++) {\n    const fl = floor(-((c > 8 ? 2 : floor(c / 3)) * 3 - 2) * tp) - 2;\n    G.cf[c] = fl; G.ct[c] = fl - hb + 1; G.cr[c] = round(-(c - 4.5) * tp - 0.5);\n    vr = max(vr, -(c - 4.5) * tp - G.ct[c]);\n  }\n  G.VR = vr + 2;\n  // The bullwheel: the cable runs off the top of the track onto its left side.\n  G.wx = xB + 3 * ux + R * G.nx; G.wy = YB + 3 * uy + R * G.ny; G.px = xB - 5;\n  return G;\n}\nconst bump = (G, a) => sm(G.aM - G.hs - G.lt, G.aM - G.hs, a) * (1 - sm(G.aM + G.hs, G.aM + G.hs + G.lt, a));\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F(N * 3), bg: F(N * 3), A: F(N), D: F(N), SK: new Uint8Array(N), tk: new Int32Array(N), ntk: 0,\n    win: new Int32Array(900), wth: F(900), nw: 0, lamp: [], k1: -1, g: -1, k4: -1, G: null, c: {},\n    run: 0, tm: 1, dir: 1, pa: 0, wh: 0, flash: 0, lampsOn: 1, lampF: 300, t: 0, stars: [], fl: [], cx: 40, cl: F(128 * 64), houses: [],\n  });\n  // Clouds: streaks of soft noise in a strip that wraps every 128 columns.\n  const n = (X, y) => 0.6 * vn(X * 0.045, y * 0.22) + 0.4 * vn(X * 0.12 + 5, y * 0.45);\n  for (let i = 0; i \u003c 8192; i++) S.cl[i] = mix(n(i & 127, i >> 7), n((i & 127) + 128, i >> 7), (i & 127) / 128);\n  for (let i = 0; i \u003c 110; i++) S.stars.push({ x: floor(rnd() * W), y: floor(rnd() * 100), b: 0.25 + 0.75 * rnd() ** 2, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 260; i++) S.fl.push({ x: rnd() * W, y: rnd() * H, v: 0.6 + 0.8 * rnd(), ph: rnd() * TAU, z: rnd() });\n  // The town: a row of taller houses up the bank with a church, and a lower row on the quay.\n  for (const [b, i0, h0, hr] of [[QY - 6, 0, 7, 7], [QY - 1, 50, 4, 4]])\n    for (let x = i0 ? -2 : 0, i = i0; x \u003c W; i++) {\n      const ch = !i0 && x > 38 && !S.ch, w = ch ? 5 : 4 + floor(hash(i, 1) * 4);\n      if (ch) S.ch = 1;\n      S.houses.push({ x, b, w, h: ch ? 16 : h0 + floor(hash(i, 2) * hr), c: floor(hash(i, 3) * 5), ch, gab: hash(i, 4) \u003c 0.75 });\n      x += w + (i0 ? 1 + floor(hash(i, 5) * 3) : hash(i, 5) \u003c 0.2 ? 1 : 0);\n    }\n}\n\nfunction build(S, k1, g, k4) {\n  S.k1 = k1; S.g = g; S.k4 = k4; S.nw = 0; S.lamp.length = 0;\n  const G = (S.G = geom(g)), C = S.c, bg = S.bg, o = [0, 0, 0];\n  for (const key in PAL) C[key] = lerp3(PAL[key], k1);\n  const amb = mix(1, 0.3, k1), snl = 30 + 112 * k4 ** 0.75;\n  let ntk = 0;\n  const setc = (c, m = 1) => ((o[0] = c[0] * m), (o[1] = c[1] * m), (o[2] = c[2] * m));\n  const blend = (c, t) => ((o[0] = mix(o[0], c[0], t)), (o[1] = mix(o[1], c[1], t)), (o[2] = mix(o[2], c[2], t)));\n  const ad = (px, py) => [(px - G.xA) * G.ux + (py - YA) * G.uy, (px - G.xA) * G.nx + (py - YA) * G.ny];\n  const dg = (a) => 7 + 6 * bump(G, a) + 1.6 * vn(a * 0.2, 4);\n  const inBed = (a, d, of = G.WL * bump(G, a)) => a >= -1.5 && a \u003c= G.L + 1 && (abs(d + of) \u003c 2.7 || abs(d - of) \u003c 2.7);\n  const f1 = (x) => 46 + 22 * (1 - ridge(x * 0.07 + 3.3, 1.7)) + 3 * vn(x * 0.4, 5);\n  const f2 = (x) => 74 + 12 * (1 - ridge(x * 0.1 + 11, 2.3)) + 2 * vn(x * 0.5, 8);\n  const pk = (x) => 2 + (x \u003c G.px ? (G.px - x) * 2.6 : (x - G.px) * 1.7) + 4 * (vn(x * 0.3, 9) - 0.5);\n  const tl = (x) => 50 + 8 * (vn(x * 0.12, 2) - 0.5);\n  const face = (a, d) => d > -dg(a);\n  // Rock with strata and snow lying in the gullies.\n  const rock = (px, py, side) => {\n    const fa = vn(px * 0.16 + 3, py * 0.07), lit = side > 0 ? fa > 0.32 : fa > 0.72;\n    setc(lit ? C.rock : C.rockD, 0.82 + 0.3 * vn(px * 0.4, py * 0.2));\n    const st = ((py * 0.8 - px * 0.5 + 4 * vn(px * 0.08, py * 0.08)) / 5) % 1;\n    if (st \u003c 0.16) blend(C.rockD, 0.7);\n    const sn = sm(0.56, 0.66, 0.6 * vn(px * 0.3 + 5, py * 0.12) + 0.4 * vn(px * 0.8, py * 0.35) + (snl - py) / 160 + k4 * 0.5 - (st \u003c 0.3 ? 0.1 : 0));\n    if (sn > 0) blend(lit ? C.snow : C.snowD, sn);\n  };\n  // Firs on a jittered grid of cells three wide and four tall, the nearest in front.\n  const tree = (px, py) => {\n    const cx = floor(px / 3), cy = floor(py / 4);\n    let best = -1, tx = 0, ty = 0, th = 0;\n    for (let j = 0; j \u003c 3; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const X = cx + i, Y = cy - j, ax = (X + 0.2 + 0.6 * hash(X, Y)) * 3, ay = (Y + hash(Y, X + 7)) * 4, hh = 4 + 3 * hash(X + 3, Y);\n        if (py \u003c ay || py > ay + hh || abs(px - ax) > (py - ay) * 0.45 + 0.35 || ay + hh \u003c= best) continue;\n        const [ra, rd] = ad(ax, ay + hh);\n        if (!face(ra, rd) || inBed(ra, rd) || ay + hh \u003c tl(ax) || ay + hh > QY - 6) continue;\n        (best = ay + hh), (tx = ax), (ty = ay), (th = hh);\n      }\n    if (best \u003c 0) return 0;\n    setc(px \u003c tx ? C.trL : C.trD, 0.85 + 0.3 * hash(floor(tx), floor(ty)));\n    if (ty + th \u003c snl + 6 * (hash(floor(tx), 3) - 0.5) && py - ty \u003c th * 0.55) blend(C.snow, 0.75);\n    return 1;\n  };\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = y * W + x, px = x + 0.5, py = y + 0.5, [a, d] = ad(px, py);\n      S.A[k] = a; S.D[k] = d; S.SK[k] = 0;\n      // Sky: blue overhead going lavender lower down, with a peach glow behind the far peaks in the west.\n      const t = py / 104, s = t \u003c 0.4 ? 0 : t \u003c 0.76 ? 1 : 2, ft = s ? (t - [0, 0.4, 0.76][s]) / (s > 1 ? 0.24 : 0.36) : t / 0.4;\n      const sa = [C.s0, C.s1, C.s2][s], sb = [C.s1, C.s2, C.s3][s];\n      for (let c = 0; c \u003c 3; c++) o[c] = mix(sa[c], sb[c], sm(0, 1, ft));\n      blend(C.s3, 0.35 * exp(-max(0, 100 - py) / 18) * (1 - px / 90));\n      let sky = 1;\n      if (py >= f1(px)) {\n        // The far range in haze, snow on the peaks that stand highest.\n        const top = f1(px), lit = f1(px + 1) >= f1(px - 1);\n        setc(C.far); blend(C.haze, cl((py - top) / 28, 0, 0.8));\n        const sd = sm(0.5, 0.62, 0.55 * vn(px * 0.7, py * 0.3) + 0.45 * vn(px * 1.6, py * 0.8) + (54 - py) / 14 + k4 * 0.5);\n        if (sd > 0) blend(lit ? C.fsn : C.fsd, sd);\n        sky = 0;\n      }\n      if (py >= f2(px)) {\n        setc(C.far2, 0.85 + 0.25 * vn(px * 0.6, py * 0.6));\n        blend(C.haze, cl((py - f2(px)) / 30, 0, 0.35));\n        if (k4 > 0.3 && py \u003c f2(px) + 3 * k4 + 1) blend(C.snowD, 0.6 * k4);\n        sky = 0;\n      }\n      if (py >= pk(px)) (sky = 0), rock(px, py, px \u003c G.px ? 1 : -1);\n      if (face(a, d) && py \u003c QY) {\n        sky = 0;\n        if (py \u003c tl(px)) rock(px, py, d \u003c 2 || vn(px * 0.2, py * 0.2) > 0.5 ? 1 : -1);\n        else if (!tree(px, py)) setc(C.und, 0.8 + 0.4 * hash(x, y)), blend(C.snowD, 0.75 * sm(4, -4, py - snl + 6 * vn(px * 0.3, py * 0.1)));\n      } else if (py \u003c QY && py > 30 && d > -dg(a) - 8 && tree(px, py)) sky = 0;\n      S.SK[k] = sky;\n      if (BARE) setc(o, 0);\n      // The track bed: gravel, sleepers, two rails a track, rollers between them.\n      if (inBed(a, d)) {\n        const of = G.WL * bump(G, a), best = min(abs(d - of), abs(d + of));\n        setc(C.bed, 0.94 + 0.12 * hash(x * 7, y * 3));\n        if (best \u003c 2.2 && (a / 2.4) % 1 \u003c 0.4) blend(C.slp, 0.4);\n        if (best \u003c 0.6 && (a / 6) % 1 \u003c 0.2) setc(C.rail, 0.35);\n        if (abs(abs(d - of) - 1.8) \u003c 0.56 || abs(abs(d + of) - 1.8) \u003c 0.56) setc(C.rail, 0.9 + 0.1 * hash(x, y));\n        S.tk[ntk++] = k;\n      }\n      bg[k * 3] = o[0]; bg[k * 3 + 1] = o[1]; bg[k * 3 + 2] = o[2];\n    }\n  S.ntk = ntk;\n  const put = (x, y, c, t = 1, m = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    for (let i = 0, k = (y * W + x) * 3; i \u003c 3; i++) bg[k + i] = mix(bg[k + i], c[i] * m, t);\n  };\n  const glow = (x, y, s) => {\n    for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) put(x + i, y + j, LAMP, s * exp(-(i * i + j * j) / 1.44));\n    put(x, y, LAMP);\n  };\n  // A crescent moon once it is dark.\n  const mo = sm(0.45, 0.85, k1);\n  if (mo > 0 && !BARE)\n    for (let y = 6; y \u003c 22; y++)\n      for (let x = 6; x \u003c 22; x++) {\n        const r1 = hypot(x + 0.5 - 14, y + 0.5 - 13), m = cl(4.3 - r1, 0, 1) * cl(hypot(x + 0.5 - 16.2, y + 0.5 - 11.8) - 3.6, 0, 1);\n        if (!S.SK[y * W + x]) continue;\n        if (m > 0) put(x, y, [236, 230, 196], m * mo);\n        else if (r1 \u003c 10) put(x, y, [70, 76, 110], 0.5 * mo * exp(-(r1 - 4) / 2.5));\n      }\n\n  // The town, the back row stopping short of the valley station.\n  const town = (front) => {\n    if (BARE) return;\n    for (const h of S.houses) {\n      if ((h.b === QY - 1) !== front || (h.x + h.w > G.xA - 9 && h.x \u003c (front ? G.xA - 1 : G.xA + (G.Lca + 6) * G.ux))) continue;\n      const base = h.b, top = base - h.h, m = amb * (front ? 0.88 : 0.7), sn = snl > base - 3;\n      for (let x = h.x; x \u003c min(W, h.x + h.w); x++) {\n        for (let y = top; y \u003c= base; y++) put(x, y, HOUSE[h.c], 1, m * (x === h.x + h.w - 1 ? 0.72 : 1));\n        const rr = h.gab ? h.w / 2 + 0.5 - abs(x + 0.5 - (h.x + h.w / 2)) : 1;\n        for (let y = floor(top - rr); y \u003c top; y++) put(x, y, sn ? C.snow : h.c & 1 ? TILE : [64, 68, 88], 1, sn ? 1 : m);\n      }\n      if (h.ch) {\n        for (let y = top - 9; y \u003c top - 2; y++) for (let i = -1; i \u003c 2; i++) (!i || y > top - 6) && put(h.x + 2 + i, y, C.roof, 1, 1.4);\n        put(h.x + 2, top + 2, [250, 236, 190], 1, 0.9);\n      }\n      for (let wy = base - 2; wy > top + 1 + (h.ch ? 3 : 0); wy -= 3)\n        for (let wx = h.x + 1; wx \u003c h.x + h.w - 1; wx += 2) if (S.nw \u003c 900) (S.win[S.nw] = wy * W + wx), (S.wth[S.nw++] = hash(wx, wy)), put(wx, wy, [30, 24, 30], 1, amb + 0.3);\n    }\n  };\n  town(false);\n  // Stations: a tiled roof on pillars over the platform where a car stands, lit underneath.\n  const yT = (px) => YA - (px - G.xA) * G.tp;\n  const shed = (a0, a1) => {\n    const x0 = floor(G.xA + a0 * G.ux), x1 = ceil(G.xA + a1 * G.ux);\n    for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n      const px = x + 0.5, ac = (px - G.xA) / G.ux, ty = yT(px), end = x === x0 || x === x1 || x === round((x0 + x1) / 2);\n      if (ac \u003c a0 || ac > a1) continue;\n      for (let y = floor(ty - G.VR - 4); y \u003c= ceil(ty + 6); y++) {\n        const v = ty - (y + 0.5);\n        if (v > G.VR && v \u003c= G.VR + 3.4) v > G.VR + 2.3 ? put(x, y, y \u003c snl ? C.snow : [150, 76, 58], 1, y \u003c snl ? 1.1 : amb) : put(x, y, [118, 54, 42], 1, amb * (v > G.VR + 1.2 ? 1 : 0.55));\n        else if (v > 0.6 && v \u003c= G.VR) end ? put(x, y, [46, 42, 46]) : put(x, y, LAMP, 0.06 + 0.3 * exp(-(G.VR - v) / 4));\n        else if (v \u003c= 0.6 && v > -5.5 && !inBed(...ad(px, y + 0.5))) put(x, y, y % 3 ? C.conc : C.roof), put(x, y, LAMP, 0.18 + 0.12 * k1);\n      }\n    }\n    for (const f of [0.3, 0.72]) {\n      const px = G.xA + mix(a0, a1, f) * G.ux;\n      glow(floor(px), floor(yT(px) - G.VR + 1), 0.3 + 0.3 * k1);\n    }\n  };\n  shed(-2.5, G.Lca + 4.5);\n  shed(G.L - G.Lca - 4.5, G.L + 1.5);\n  // The valley station hall left of the track, an arched window over a lit door on the quay.\n  const vx0 = max(0, floor(G.xA - 9)), vx1 = floor(G.xA) - 1, vy0 = YA - 12, vc = (vx1 + 1 + max(vx0, G.xA - 9)) / 2;\n  for (let x = vx0; x \u003c= vx1; x++) {\n    for (let y = vy0; y \u003c QY; y++) put(x, y, HOUSE[0], 1, amb * (x === vx1 ? 0.7 : 0.95));\n    for (let y = floor(vy0 - 5.5 + abs(x + 0.5 - vc) * 1.2); y \u003c vy0; y++) put(x, y, y \u003c snl ? C.snow : TILE, 1, y \u003c snl ? 1 : amb);\n  }\n  for (let y = vy0 + 2; y \u003c QY; y++)\n    for (let x = floor(vc - 1.5); x \u003c vc + 1.5; x++)\n      if (y \u003c vy0 + 9 ? y > vy0 + 2 || abs(x + 0.5 - vc) \u003c 1 : y >= QY - 4 && abs(x + 0.5 - vc) \u003c 1) put(x, y, WARM, 0.92, mix(0.85, 1, k1));\n  town(true);\n\n  // The engine house on the summit, with the bullwheel behind its lit round window.\n  const ex0 = floor(G.wx - 8), ey0 = floor(G.wy - 8);\n  for (let y = ey0 - 6; y \u003c= G.wy + 8; y++)\n    for (let x = ex0; x \u003c W; x++) {\n      const rh = y - (ey0 - 6 + abs(x + 0.5 - G.wx) * 0.62), r = hypot(x + 0.5 - G.wx, y + 0.5 - G.wy);\n      if (r \u003c R + 1.2) put(x, y, [255, 200, 120], 1, mix(0.9, 1, k1) * (1 - 0.15 * r / R));\n      else if (y \u003c ey0) rh >= 0 && put(x, y, k4 > 0.05 && rh \u003c 1.2 ? C.snow : C.roof, 1, 1.2);\n      else put(x, y, C.stone, 1, (0.85 + 0.15 * (((y >> 1) + (x >> 2)) & 1)) * (x === ex0 ? 0.6 : 1));\n    }\n  // Lamps on posts beside the line, every nine steps.\n  for (let a = 7; a \u003c G.L - 6; a += 9) {\n    const of = G.WL * bump(G, a) + 5.6, lx = floor(G.xA + a * G.ux + of * G.nx), ly = floor(YA + a * G.uy + of * G.ny);\n    put(lx, ly + 1, DK), put(lx, ly + 2, DK), S.lamp.push(lx, ly, a);\n  }\n  if (!BARE)\n    for (let x = 0; x \u003c W; x++) {\n      put(x, QY, C.stone, 1, 0.8);\n      if (x % 8 === 4) put(x, QY - 1, DK), put(x, QY - 2, DK), glow(x, QY - 3, 0.12 + 0.25 * k1);\n    }\n}\n\n// Along a run the cars speed up for the first seventh and slow down for the last.\nfunction prof(t) {\n  const ta = 0.14, v = 1 / (1 - ta);\n  return t \u003c ta ? (v * t * t) / (2 * ta) : t \u003c 1 - ta ? v * (t - ta / 2) : 1 - (v * (1 - t) * (1 - t)) / (2 * ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues, h = min(dt, 0.1), sp = cl(kv[1], 0.2, 3) / 2, bp = input.btnPressed;\n  const k1 = cl(kv[0], 0, 1), g = cl(kv[2], 0, 1), k4 = cl(kv[3], 0, 1);\n  if (abs(k1 - S.k1) > 0.003 || abs(g - S.g) > 0.003 || abs(k4 - S.k4) > 0.003) build(S, k1, g, k4);\n  if (bp[0]) S.run ? (S.flash = 1) : (S.tm = min(S.tm, 0.8));\n  if (bp[1]) (S.lampsOn = 1 - S.lampsOn), (S.lampF = -10);\n  S.lampF += h * 40;\n  S.cx += h * sp * 3.6;\n  S.flash = max(0, S.flash - h);\n  S.t += h * sp;\n  const was = S.pa;\n  if (!S.run) {\n    S.tm -= h * sp * 2;\n    if (S.tm \u003c= 0) (S.run = 1), (S.tm = 0);\n  } else {\n    S.tm = min(1, S.tm + (h * sp * 2) / RUN);\n    S.pa = S.dir > 0 ? prof(S.tm) : 1 - prof(S.tm);\n    if (S.tm >= 1) (S.run = 0), (S.tm = DWELL), (S.dir = -S.dir);\n  }\n  S.wh += ((S.pa - was) * (S.G.aHi - S.G.aLo)) / R;\n  for (const q of S.fl) {\n    q.y += h * (6 + 12 * q.z) * q.v;\n    q.x = (q.x + h * (2.5 * sin(S.t * 0.7 + q.ph) - 1.5) + W) % W;\n    if (q.y > H) (q.y -= H + 2), (q.x = rnd() * W);\n  }\n}\n\nfunction drawCar(S, f, ac, side, liv, up, k1) {\n  const G = S.G, o = side * G.WL * bump(G, ac), Px = G.xA + ac * G.ux + o * G.nx, Py = YA + ac * G.uy + o * G.ny;\n  const x0 = round(Px - 5), ay = round(Py - (x0 + 5 - Px) * G.tp), hb = G.hb, lm = mix(1, 0.5, k1), fl = S.flash > 0 && (S.flash * 6) % 1 \u003c 0.5;\n  for (let c = 0; c \u003c 10; c++) {\n    const x = x0 + c, glass = c % 3 && c \u003c 9, b = c > 8 ? 2 : floor(c / 3);\n    if (x \u003c 0 || x >= W) continue;\n    for (let r = G.ct[c]; r \u003c= G.cr[c]; r++) {\n      const y = ay + r, rr = r - G.ct[c], q = (y * W + x) * 3;\n      if (y \u003c 0 || y >= H) continue;\n      let [cr, cg, cb] = liv, m = lm;\n      if (r === G.cr[c]) (cr = cg = cb = c === 1 || c === 8 ? 20 : 68);\n      else if (r > G.cf[c]) m *= 0.62;\n      else if (rr === 0) (cr = 210), (cg = 206), (cb = 196);\n      else if (rr === hb - 3) {\n        (cr = 228), (cg = 214), (cb = 180);\n        if (c === (up ? 9 : 0)) (cr = 255), (cg = 250), (cb = fl ? 120 : 220), (m = 1);\n        if (c === (up ? 0 : 9)) (cr = 255), (cg = 30), (cb = 20), (m = 1);\n      } else if (glass && rr >= 2 && rr \u003c= hb - 4) {\n        // Lit windows, a passenger's head and shoulders in some.\n        const head = rr >= hb - 5 && c % 3 === 1 + (hash(b, liv[2]) \u003c 0.5) && hash(b * 3, liv[2]) \u003c 0.7;\n        (cr = head ? 60 : 255), (cg = head ? 40 : 214), (cb = head ? 36 : 150), (m = 1);\n      }\n      f[q] = cr * m; f[q + 1] = cg * m; f[q + 2] = cb * m;\n    }\n  }\n  // The headlamp's beam on the track ahead.\n  const dr = up ? 1 : -1, ae = ac + (dr * G.Lca) / 2, bs = mix(0.16, 0.36, k1) * (fl ? 2.5 : 1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], s = (S.A[k] - ae) * dr, w = abs(S.D[k] - side * G.WL * bump(G, S.A[k])) - 0.8 - s * 0.08, e = bs * (1 - s / 15) ** 2 * cl(1 - w, 0, 1);\n    if (s >= 0 && s \u003c 15) (f[k * 3] += 255 * e), (f[k * 3 + 1] += 236 * e), (f[k * 3 + 2] += 190 * e);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S.G) build(S, 0, 0, 0.06);\n  const G = S.G, f = S.f, k1 = S.k1, k4 = S.k4, t = S.t, C = S.c;\n  f.set(S.bg);\n  if (!BARE) {\n    // Stars come out as it gets dark; the evening star is there from the start.\n    const sv = sm(0.1, 0.7, k1);\n    for (const s of S.stars) {\n      const k = s.y * W + s.x, e = sv * s.b * (0.7 + 0.3 * sin(time * (2 + s.ph / 3) + s.ph)) * (1 - s.y / 130);\n      if (S.SK[k]) (f[k * 3] += 220 * e), (f[k * 3 + 1] += 224 * e), (f[k * 3 + 2] += 240 * e);\n    }\n    // Two bands of cloud drifting east, lit underneath while the glow lasts.\n    const ox = floor(S.cx), fx = S.cx - ox;\n    for (let y = 2; y \u003c 62; y++) {\n      const band = exp(-(((y - 12) / 7) ** 2)) + 0.9 * exp(-(((y - 38) / 8) ** 2)), i0 = y * 128;\n      for (let x = 0; x \u003c W; x++) {\n        if (!S.SK[y * W + x] || band \u003c 0.05) continue;\n        const d0 = mix(S.cl[i0 + ((x - ox) & 127)], S.cl[i0 + ((x - ox - 1) & 127)], fx), d1 = S.cl[min(63, y + 2) * 128 + ((x - ox) & 127)];\n        const e = sm(0.44, 0.68, d0 * 0.8 + band * 0.44 - 0.1) * 0.9, lit = cl(0.45 + (d0 - d1) * 3 + (y - 30) / 60, 0, 1), q = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) f[q + c] = mix(f[q + c], mix(C.cHi[c], C.cLo[c], lit), e);\n      }\n    }\n    const vk = (52 * W + 11) * 3;\n    if (S.SK[vk / 3]) (f[vk] += 255), (f[vk + 1] += 246), (f[vk + 2] += 220);\n    // Windows in town: more lit as night comes, now and then one going on or off.\n    const pl = mix(0.42, 0.86, k1);\n    for (let i = 0; i \u003c S.nw; i++) {\n      const th = S.wth[i], k = S.win[i] * 3, m = 0.8 + 0.2 * hash(i, 9);\n      if (th \u003c pl + 0.05 * sin(t * 0.4 + th * 60)) (f[k] = WARM[0] * m), (f[k + 1] = WARM[1] * m), (f[k + 2] = WARM[2] * m);\n    }\n  }\n  // Lamps along the line.\n  for (let i = 0; i \u003c S.lamp.length; i += 3) {\n    const [x, y, a] = S.lamp.slice(i, i + 3), e = mix(0.55, 1, k1) * (S.lampsOn ? cl((S.lampF - a) / 4, 0, 1) : 1 - cl((S.lampF - G.L + a) / 4, 0, 1));\n    for (let j = -2; j \u003c= 2; j++)\n      for (let ii = -2, q = ((y + j) * W + x - 2) * 3; ii \u003c= 2; ii++, q += 3) {\n        const g = j || ii ? e * 0.35 * mix(0.3, 1, k1) * exp(-(ii * ii + j * j) / 2) : e;\n        if (x + ii >= 0 && x + ii \u003c W) for (let c = 0; c \u003c 3; c++) f[q + c] += LAMP[c] * g;\n      }\n  }\n  // The cable: a strand from each car up to the bullwheel, its lay sliding with it.\n  const aA = mix(G.aLo, G.aHi, S.pa), aB = G.aLo + G.aHi - aA, lm = mix(1, 0.55, k1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], a = S.A[k], d = S.D[k], of = G.WL * bump(G, a);\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const ac = s \u003c 0 ? aA : aB;\n      if (a \u003c ac + G.Lca / 2 - 0.5 || a > G.L + 2 || abs(d - s * of - s * 0.25) >= 0.55) continue;\n      const tx = (0.5 + 0.5 * cos((TAU * (a - ac)) / 3)) ** 2;\n      for (let c = 0; c \u003c 3; c++) f[k * 3 + c] = mix([78, 72, 70][c], STEEL[c], tx) * lm;\n      break;\n    }\n  }\n  // The cars: red on the upper track of the loop, blue on the lower.\n  const upA = S.run ? S.dir > 0 : S.dir \u003c 0;\n  drawCar(S, f, aA, -1, LIV[0], upA, k1);\n  drawCar(S, f, aB, 1, LIV[1], !upA, k1);\n  // The bullwheel turning behind the round window, six spokes on a hub.\n  for (let y = floor(G.wy - R - 1); y \u003c= G.wy + R + 1; y++)\n    for (let x = floor(G.wx - R - 1); x \u003c= min(W - 1, G.wx + R + 1); x++) {\n      const dx = x + 0.5 - G.wx, dy = y + 0.5 - G.wy, r = hypot(dx, dy), an = atan2(dy, dx) - S.wh;\n      const m = ((an % (PI / 3)) + PI / 3) % (PI / 3), sd = r * sin(min(m, PI / 3 - m));\n      if (r \u003c= R + 0.6 && (abs(r - R + 0.7) \u003c 0.75 || (r \u003c R - 1 && sd \u003c 0.5) || r \u003c 1.4)) f.set([34, 28, 30], (y * W + x) * 3);\n    }\n  // The lake: the quay and the town upside down, rippling.\n  if (!BARE)\n    for (let y = QY + 1; y \u003c H; y++) {\n      const dy = y - QY, sh = round(0.8 * sin(t * 0.9 + y * 1.3)), m = (0.95 - dy * 0.08) / 255;\n      for (let x = 0; x \u003c W; x++) for (let c = 0, q = (y * W + x) * 3, p = ((QY - dy) * W + cl(x + sh, 0, W - 1)) * 3; c \u003c 3; c++) f[q + c] = C.lake[c] * (1 + (y & 1) * 0.2) + f[p + c] ** 2 * m;\n    }\n  // Falling snow.\n  const nf = floor(cl((k4 - 0.1) / 0.9, 0, 1) * 260), sc = mix(235, 120, k1);\n  for (let i = 0; i \u003c nf; i++) {\n    const q0 = S.fl[i], q = (floor(q0.y) * W + floor(q0.x)) * 3, e = 0.45 + 0.55 * q0.z;\n    if (q0.y >= 0 && q0.y \u003c H) (f[q] = mix(f[q], sc, e)), (f[q + 1] = mix(f[q + 1], sc, e)), (f[q + 2] = mix(f[q + 2], sc * 1.06, e));\n  }\n  for (let k = 0, j = 0; k \u003c N; k++, j += 3) display.setPixel(k & 63, k >> 6, cl(f[j], 0, 255) | 0, cl(f[j + 1], 0, 255) | 0, cl(f[j + 2], 0, 255) | 0);\n}\n","layer":{"id":"layer-funicular","type":"code","name":"funicular","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Funicular\n// Family:  rail\n// Idea:    Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the two-car funicular with an Abt passing loop\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1\n//\n// Knob 1: Dusk. Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit.\n// Knob 2: Speed. At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower.\n// Knob 3: Grade. How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher.\n// Knob 4: Snow. A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel.\n// Buttons: K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i | 0, 374761393) + Math.imul(j | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nconst ridge = (t, s) => 1 - abs(2 * vn(t, s) - 1);\n// True draws only the line: track, cable, cars and stations.\nconst BARE = false;\n\n// Rows of the valley end and the summit end of the track and of the quay. The bullwheel's radius.\nconst YA = 112, YB = 30, QY = 121, R = 5.5;\n// Seconds a run and a stop take at Speed 1.\nconst RUN = 16, DWELL = 6;\n\n// Each colour from blue hour, its first three numbers, to night, its last three.\nconst PAL = {\n  s0:[12,26,82,5,11,42,1,3,12], s1:[44,70,150,14,28,80,3,8,26], s2:[134,118,180,46,52,112,8,16,40],\n  s3:[240,164,124,116,76,100,20,26,52], far:[62,68,122,26,30,70,8,11,28], haze:[112,100,152,46,44,86,12,15,34],\n  fsn:[240,184,198,120,112,160,40,46,76], fsd:[140,144,196,66,70,122,24,30,56], far2:[36,48,90,14,20,50,4,7,18],\n  trL:[44,84,70,22,42,46,9,18,22], trD:[20,44,48,10,22,30,5,10,16], und:[9,22,26,5,11,16,2,5,9],\n  rock:[100,96,126,48,50,80,17,19,30], rockD:[46,46,76,22,24,46,7,9,17], snow:[236,206,222,140,140,180,54,60,88],\n  snowD:[146,156,206,76,84,136,28,34,60], bed:[56,52,54,30,28,32,12,12,15], rail:[190,188,200,120,120,140,70,70,84],\n  slp:[38,32,32,20,17,19,8,7,9], roof:[70,62,66,34,30,36,14,12,16], conc:[120,116,120,60,58,64,26,26,30],\n  stone:[130,122,116,64,60,62,26,24,28], lake:[26,38,92,10,14,40,2,4,12], cLo:[236,150,140,104,72,104,18,20,34],\n  cHi:[98,90,146,34,36,74,8,10,22],\n};\n// Town walls: cream, ochre, pink, blue-grey, white.\nconst HOUSE = [[178, 152, 112], [192, 132, 62], [184, 106, 112], [84, 132, 140], [184, 180, 188]];\nconst WARM = [255, 196, 108], LAMP = [255, 226, 168], STEEL = [224, 220, 206];\nconst LIV = [[206, 34, 30], [34, 84, 196]], DK = [40, 40, 44], TILE = [128, 60, 46];\nconst lerp3 = (p, k, i = k \u003c 0.5 ? 0 : 3, f = k * 2 - i / 3) => [0, 1, 2].map((c) => mix(p[i + c], p[i + 3 + c], f));\n\n// The line for a grade: its ends, its direction u, the normal n to its lower\n// right, the passing loop, and the shape of a car column by column.\nfunction geom(g) {\n  const xA = mix(8, 17, g), xB = mix(50, 43, g), L = hypot(xB - xA, YB - YA);\n  const ux = (xB - xA) / L, uy = (YB - YA) / L, tp = -uy / ux, hb = round(3 * tp + 3.2);\n  const Lca = 10 / ux, aLo = Lca / 2 + 1.5, aHi = L - Lca / 2 - 1.5;\n  const G = { xA, L, ux, uy, nx: -uy, ny: ux, tp, hb, Lca, aLo, aHi, aM: (aLo + aHi) / 2, hs: Lca / 2 + 2, lt: 13, WL: 4.6 };\n  // Columns 0..9: three compartments of three and the end wall, each floor level, so the car climbs in steps.\n  for (const k of [\"ct\", \"cf\", \"cr\"]) G[k] = new Int8Array(10);\n  let vr = 0;\n  for (let c = 0; c \u003c 10; c++) {\n    const fl = floor(-((c > 8 ? 2 : floor(c / 3)) * 3 - 2) * tp) - 2;\n    G.cf[c] = fl; G.ct[c] = fl - hb + 1; G.cr[c] = round(-(c - 4.5) * tp - 0.5);\n    vr = max(vr, -(c - 4.5) * tp - G.ct[c]);\n  }\n  G.VR = vr + 2;\n  // The bullwheel: the cable runs off the top of the track onto its left side.\n  G.wx = xB + 3 * ux + R * G.nx; G.wy = YB + 3 * uy + R * G.ny; G.px = xB - 5;\n  return G;\n}\nconst bump = (G, a) => sm(G.aM - G.hs - G.lt, G.aM - G.hs, a) * (1 - sm(G.aM + G.hs, G.aM + G.hs + G.lt, a));\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F(N * 3), bg: F(N * 3), A: F(N), D: F(N), SK: new Uint8Array(N), tk: new Int32Array(N), ntk: 0,\n    win: new Int32Array(900), wth: F(900), nw: 0, lamp: [], k1: -1, g: -1, k4: -1, G: null, c: {},\n    run: 0, tm: 1, dir: 1, pa: 0, wh: 0, flash: 0, lampsOn: 1, lampF: 300, t: 0, stars: [], fl: [], cx: 40, cl: F(128 * 64), houses: [],\n  });\n  // Clouds: streaks of soft noise in a strip that wraps every 128 columns.\n  const n = (X, y) => 0.6 * vn(X * 0.045, y * 0.22) + 0.4 * vn(X * 0.12 + 5, y * 0.45);\n  for (let i = 0; i \u003c 8192; i++) S.cl[i] = mix(n(i & 127, i >> 7), n((i & 127) + 128, i >> 7), (i & 127) / 128);\n  for (let i = 0; i \u003c 110; i++) S.stars.push({ x: floor(rnd() * W), y: floor(rnd() * 100), b: 0.25 + 0.75 * rnd() ** 2, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 260; i++) S.fl.push({ x: rnd() * W, y: rnd() * H, v: 0.6 + 0.8 * rnd(), ph: rnd() * TAU, z: rnd() });\n  // The town: a row of taller houses up the bank with a church, and a lower row on the quay.\n  for (const [b, i0, h0, hr] of [[QY - 6, 0, 7, 7], [QY - 1, 50, 4, 4]])\n    for (let x = i0 ? -2 : 0, i = i0; x \u003c W; i++) {\n      const ch = !i0 && x > 38 && !S.ch, w = ch ? 5 : 4 + floor(hash(i, 1) * 4);\n      if (ch) S.ch = 1;\n      S.houses.push({ x, b, w, h: ch ? 16 : h0 + floor(hash(i, 2) * hr), c: floor(hash(i, 3) * 5), ch, gab: hash(i, 4) \u003c 0.75 });\n      x += w + (i0 ? 1 + floor(hash(i, 5) * 3) : hash(i, 5) \u003c 0.2 ? 1 : 0);\n    }\n}\n\nfunction build(S, k1, g, k4) {\n  S.k1 = k1; S.g = g; S.k4 = k4; S.nw = 0; S.lamp.length = 0;\n  const G = (S.G = geom(g)), C = S.c, bg = S.bg, o = [0, 0, 0];\n  for (const key in PAL) C[key] = lerp3(PAL[key], k1);\n  const amb = mix(1, 0.3, k1), snl = 30 + 112 * k4 ** 0.75;\n  let ntk = 0;\n  const setc = (c, m = 1) => ((o[0] = c[0] * m), (o[1] = c[1] * m), (o[2] = c[2] * m));\n  const blend = (c, t) => ((o[0] = mix(o[0], c[0], t)), (o[1] = mix(o[1], c[1], t)), (o[2] = mix(o[2], c[2], t)));\n  const ad = (px, py) => [(px - G.xA) * G.ux + (py - YA) * G.uy, (px - G.xA) * G.nx + (py - YA) * G.ny];\n  const dg = (a) => 7 + 6 * bump(G, a) + 1.6 * vn(a * 0.2, 4);\n  const inBed = (a, d, of = G.WL * bump(G, a)) => a >= -1.5 && a \u003c= G.L + 1 && (abs(d + of) \u003c 2.7 || abs(d - of) \u003c 2.7);\n  const f1 = (x) => 46 + 22 * (1 - ridge(x * 0.07 + 3.3, 1.7)) + 3 * vn(x * 0.4, 5);\n  const f2 = (x) => 74 + 12 * (1 - ridge(x * 0.1 + 11, 2.3)) + 2 * vn(x * 0.5, 8);\n  const pk = (x) => 2 + (x \u003c G.px ? (G.px - x) * 2.6 : (x - G.px) * 1.7) + 4 * (vn(x * 0.3, 9) - 0.5);\n  const tl = (x) => 50 + 8 * (vn(x * 0.12, 2) - 0.5);\n  const face = (a, d) => d > -dg(a);\n  // Rock with strata and snow lying in the gullies.\n  const rock = (px, py, side) => {\n    const fa = vn(px * 0.16 + 3, py * 0.07), lit = side > 0 ? fa > 0.32 : fa > 0.72;\n    setc(lit ? C.rock : C.rockD, 0.82 + 0.3 * vn(px * 0.4, py * 0.2));\n    const st = ((py * 0.8 - px * 0.5 + 4 * vn(px * 0.08, py * 0.08)) / 5) % 1;\n    if (st \u003c 0.16) blend(C.rockD, 0.7);\n    const sn = sm(0.56, 0.66, 0.6 * vn(px * 0.3 + 5, py * 0.12) + 0.4 * vn(px * 0.8, py * 0.35) + (snl - py) / 160 + k4 * 0.5 - (st \u003c 0.3 ? 0.1 : 0));\n    if (sn > 0) blend(lit ? C.snow : C.snowD, sn);\n  };\n  // Firs on a jittered grid of cells three wide and four tall, the nearest in front.\n  const tree = (px, py) => {\n    const cx = floor(px / 3), cy = floor(py / 4);\n    let best = -1, tx = 0, ty = 0, th = 0;\n    for (let j = 0; j \u003c 3; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const X = cx + i, Y = cy - j, ax = (X + 0.2 + 0.6 * hash(X, Y)) * 3, ay = (Y + hash(Y, X + 7)) * 4, hh = 4 + 3 * hash(X + 3, Y);\n        if (py \u003c ay || py > ay + hh || abs(px - ax) > (py - ay) * 0.45 + 0.35 || ay + hh \u003c= best) continue;\n        const [ra, rd] = ad(ax, ay + hh);\n        if (!face(ra, rd) || inBed(ra, rd) || ay + hh \u003c tl(ax) || ay + hh > QY - 6) continue;\n        (best = ay + hh), (tx = ax), (ty = ay), (th = hh);\n      }\n    if (best \u003c 0) return 0;\n    setc(px \u003c tx ? C.trL : C.trD, 0.85 + 0.3 * hash(floor(tx), floor(ty)));\n    if (ty + th \u003c snl + 6 * (hash(floor(tx), 3) - 0.5) && py - ty \u003c th * 0.55) blend(C.snow, 0.75);\n    return 1;\n  };\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = y * W + x, px = x + 0.5, py = y + 0.5, [a, d] = ad(px, py);\n      S.A[k] = a; S.D[k] = d; S.SK[k] = 0;\n      // Sky: blue overhead going lavender lower down, with a peach glow behind the far peaks in the west.\n      const t = py / 104, s = t \u003c 0.4 ? 0 : t \u003c 0.76 ? 1 : 2, ft = s ? (t - [0, 0.4, 0.76][s]) / (s > 1 ? 0.24 : 0.36) : t / 0.4;\n      const sa = [C.s0, C.s1, C.s2][s], sb = [C.s1, C.s2, C.s3][s];\n      for (let c = 0; c \u003c 3; c++) o[c] = mix(sa[c], sb[c], sm(0, 1, ft));\n      blend(C.s3, 0.35 * exp(-max(0, 100 - py) / 18) * (1 - px / 90));\n      let sky = 1;\n      if (py >= f1(px)) {\n        // The far range in haze, snow on the peaks that stand highest.\n        const top = f1(px), lit = f1(px + 1) >= f1(px - 1);\n        setc(C.far); blend(C.haze, cl((py - top) / 28, 0, 0.8));\n        const sd = sm(0.5, 0.62, 0.55 * vn(px * 0.7, py * 0.3) + 0.45 * vn(px * 1.6, py * 0.8) + (54 - py) / 14 + k4 * 0.5);\n        if (sd > 0) blend(lit ? C.fsn : C.fsd, sd);\n        sky = 0;\n      }\n      if (py >= f2(px)) {\n        setc(C.far2, 0.85 + 0.25 * vn(px * 0.6, py * 0.6));\n        blend(C.haze, cl((py - f2(px)) / 30, 0, 0.35));\n        if (k4 > 0.3 && py \u003c f2(px) + 3 * k4 + 1) blend(C.snowD, 0.6 * k4);\n        sky = 0;\n      }\n      if (py >= pk(px)) (sky = 0), rock(px, py, px \u003c G.px ? 1 : -1);\n      if (face(a, d) && py \u003c QY) {\n        sky = 0;\n        if (py \u003c tl(px)) rock(px, py, d \u003c 2 || vn(px * 0.2, py * 0.2) > 0.5 ? 1 : -1);\n        else if (!tree(px, py)) setc(C.und, 0.8 + 0.4 * hash(x, y)), blend(C.snowD, 0.75 * sm(4, -4, py - snl + 6 * vn(px * 0.3, py * 0.1)));\n      } else if (py \u003c QY && py > 30 && d > -dg(a) - 8 && tree(px, py)) sky = 0;\n      S.SK[k] = sky;\n      if (BARE) setc(o, 0);\n      // The track bed: gravel, sleepers, two rails a track, rollers between them.\n      if (inBed(a, d)) {\n        const of = G.WL * bump(G, a), best = min(abs(d - of), abs(d + of));\n        setc(C.bed, 0.94 + 0.12 * hash(x * 7, y * 3));\n        if (best \u003c 2.2 && (a / 2.4) % 1 \u003c 0.4) blend(C.slp, 0.4);\n        if (best \u003c 0.6 && (a / 6) % 1 \u003c 0.2) setc(C.rail, 0.35);\n        if (abs(abs(d - of) - 1.8) \u003c 0.56 || abs(abs(d + of) - 1.8) \u003c 0.56) setc(C.rail, 0.9 + 0.1 * hash(x, y));\n        S.tk[ntk++] = k;\n      }\n      bg[k * 3] = o[0]; bg[k * 3 + 1] = o[1]; bg[k * 3 + 2] = o[2];\n    }\n  S.ntk = ntk;\n  const put = (x, y, c, t = 1, m = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    for (let i = 0, k = (y * W + x) * 3; i \u003c 3; i++) bg[k + i] = mix(bg[k + i], c[i] * m, t);\n  };\n  const glow = (x, y, s) => {\n    for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) put(x + i, y + j, LAMP, s * exp(-(i * i + j * j) / 1.44));\n    put(x, y, LAMP);\n  };\n  // A crescent moon once it is dark.\n  const mo = sm(0.45, 0.85, k1);\n  if (mo > 0 && !BARE)\n    for (let y = 6; y \u003c 22; y++)\n      for (let x = 6; x \u003c 22; x++) {\n        const r1 = hypot(x + 0.5 - 14, y + 0.5 - 13), m = cl(4.3 - r1, 0, 1) * cl(hypot(x + 0.5 - 16.2, y + 0.5 - 11.8) - 3.6, 0, 1);\n        if (!S.SK[y * W + x]) continue;\n        if (m > 0) put(x, y, [236, 230, 196], m * mo);\n        else if (r1 \u003c 10) put(x, y, [70, 76, 110], 0.5 * mo * exp(-(r1 - 4) / 2.5));\n      }\n\n  // The town, the back row stopping short of the valley station.\n  const town = (front) => {\n    if (BARE) return;\n    for (const h of S.houses) {\n      if ((h.b === QY - 1) !== front || (h.x + h.w > G.xA - 9 && h.x \u003c (front ? G.xA - 1 : G.xA + (G.Lca + 6) * G.ux))) continue;\n      const base = h.b, top = base - h.h, m = amb * (front ? 0.88 : 0.7), sn = snl > base - 3;\n      for (let x = h.x; x \u003c min(W, h.x + h.w); x++) {\n        for (let y = top; y \u003c= base; y++) put(x, y, HOUSE[h.c], 1, m * (x === h.x + h.w - 1 ? 0.72 : 1));\n        const rr = h.gab ? h.w / 2 + 0.5 - abs(x + 0.5 - (h.x + h.w / 2)) : 1;\n        for (let y = floor(top - rr); y \u003c top; y++) put(x, y, sn ? C.snow : h.c & 1 ? TILE : [64, 68, 88], 1, sn ? 1 : m);\n      }\n      if (h.ch) {\n        for (let y = top - 9; y \u003c top - 2; y++) for (let i = -1; i \u003c 2; i++) (!i || y > top - 6) && put(h.x + 2 + i, y, C.roof, 1, 1.4);\n        put(h.x + 2, top + 2, [250, 236, 190], 1, 0.9);\n      }\n      for (let wy = base - 2; wy > top + 1 + (h.ch ? 3 : 0); wy -= 3)\n        for (let wx = h.x + 1; wx \u003c h.x + h.w - 1; wx += 2) if (S.nw \u003c 900) (S.win[S.nw] = wy * W + wx), (S.wth[S.nw++] = hash(wx, wy)), put(wx, wy, [30, 24, 30], 1, amb + 0.3);\n    }\n  };\n  town(false);\n  // Stations: a tiled roof on pillars over the platform where a car stands, lit underneath.\n  const yT = (px) => YA - (px - G.xA) * G.tp;\n  const shed = (a0, a1) => {\n    const x0 = floor(G.xA + a0 * G.ux), x1 = ceil(G.xA + a1 * G.ux);\n    for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n      const px = x + 0.5, ac = (px - G.xA) / G.ux, ty = yT(px), end = x === x0 || x === x1 || x === round((x0 + x1) / 2);\n      if (ac \u003c a0 || ac > a1) continue;\n      for (let y = floor(ty - G.VR - 4); y \u003c= ceil(ty + 6); y++) {\n        const v = ty - (y + 0.5);\n        if (v > G.VR && v \u003c= G.VR + 3.4) v > G.VR + 2.3 ? put(x, y, y \u003c snl ? C.snow : [150, 76, 58], 1, y \u003c snl ? 1.1 : amb) : put(x, y, [118, 54, 42], 1, amb * (v > G.VR + 1.2 ? 1 : 0.55));\n        else if (v > 0.6 && v \u003c= G.VR) end ? put(x, y, [46, 42, 46]) : put(x, y, LAMP, 0.06 + 0.3 * exp(-(G.VR - v) / 4));\n        else if (v \u003c= 0.6 && v > -5.5 && !inBed(...ad(px, y + 0.5))) put(x, y, y % 3 ? C.conc : C.roof), put(x, y, LAMP, 0.18 + 0.12 * k1);\n      }\n    }\n    for (const f of [0.3, 0.72]) {\n      const px = G.xA + mix(a0, a1, f) * G.ux;\n      glow(floor(px), floor(yT(px) - G.VR + 1), 0.3 + 0.3 * k1);\n    }\n  };\n  shed(-2.5, G.Lca + 4.5);\n  shed(G.L - G.Lca - 4.5, G.L + 1.5);\n  // The valley station hall left of the track, an arched window over a lit door on the quay.\n  const vx0 = max(0, floor(G.xA - 9)), vx1 = floor(G.xA) - 1, vy0 = YA - 12, vc = (vx1 + 1 + max(vx0, G.xA - 9)) / 2;\n  for (let x = vx0; x \u003c= vx1; x++) {\n    for (let y = vy0; y \u003c QY; y++) put(x, y, HOUSE[0], 1, amb * (x === vx1 ? 0.7 : 0.95));\n    for (let y = floor(vy0 - 5.5 + abs(x + 0.5 - vc) * 1.2); y \u003c vy0; y++) put(x, y, y \u003c snl ? C.snow : TILE, 1, y \u003c snl ? 1 : amb);\n  }\n  for (let y = vy0 + 2; y \u003c QY; y++)\n    for (let x = floor(vc - 1.5); x \u003c vc + 1.5; x++)\n      if (y \u003c vy0 + 9 ? y > vy0 + 2 || abs(x + 0.5 - vc) \u003c 1 : y >= QY - 4 && abs(x + 0.5 - vc) \u003c 1) put(x, y, WARM, 0.92, mix(0.85, 1, k1));\n  town(true);\n\n  // The engine house on the summit, with the bullwheel behind its lit round window.\n  const ex0 = floor(G.wx - 8), ey0 = floor(G.wy - 8);\n  for (let y = ey0 - 6; y \u003c= G.wy + 8; y++)\n    for (let x = ex0; x \u003c W; x++) {\n      const rh = y - (ey0 - 6 + abs(x + 0.5 - G.wx) * 0.62), r = hypot(x + 0.5 - G.wx, y + 0.5 - G.wy);\n      if (r \u003c R + 1.2) put(x, y, [255, 200, 120], 1, mix(0.9, 1, k1) * (1 - 0.15 * r / R));\n      else if (y \u003c ey0) rh >= 0 && put(x, y, k4 > 0.05 && rh \u003c 1.2 ? C.snow : C.roof, 1, 1.2);\n      else put(x, y, C.stone, 1, (0.85 + 0.15 * (((y >> 1) + (x >> 2)) & 1)) * (x === ex0 ? 0.6 : 1));\n    }\n  // Lamps on posts beside the line, every nine steps.\n  for (let a = 7; a \u003c G.L - 6; a += 9) {\n    const of = G.WL * bump(G, a) + 5.6, lx = floor(G.xA + a * G.ux + of * G.nx), ly = floor(YA + a * G.uy + of * G.ny);\n    put(lx, ly + 1, DK), put(lx, ly + 2, DK), S.lamp.push(lx, ly, a);\n  }\n  if (!BARE)\n    for (let x = 0; x \u003c W; x++) {\n      put(x, QY, C.stone, 1, 0.8);\n      if (x % 8 === 4) put(x, QY - 1, DK), put(x, QY - 2, DK), glow(x, QY - 3, 0.12 + 0.25 * k1);\n    }\n}\n\n// Along a run the cars speed up for the first seventh and slow down for the last.\nfunction prof(t) {\n  const ta = 0.14, v = 1 / (1 - ta);\n  return t \u003c ta ? (v * t * t) / (2 * ta) : t \u003c 1 - ta ? v * (t - ta / 2) : 1 - (v * (1 - t) * (1 - t)) / (2 * ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues, h = min(dt, 0.1), sp = cl(kv[1], 0.2, 3) / 2, bp = input.btnPressed;\n  const k1 = cl(kv[0], 0, 1), g = cl(kv[2], 0, 1), k4 = cl(kv[3], 0, 1);\n  if (abs(k1 - S.k1) > 0.003 || abs(g - S.g) > 0.003 || abs(k4 - S.k4) > 0.003) build(S, k1, g, k4);\n  if (bp[0]) S.run ? (S.flash = 1) : (S.tm = min(S.tm, 0.8));\n  if (bp[1]) (S.lampsOn = 1 - S.lampsOn), (S.lampF = -10);\n  S.lampF += h * 40;\n  S.cx += h * sp * 3.6;\n  S.flash = max(0, S.flash - h);\n  S.t += h * sp;\n  const was = S.pa;\n  if (!S.run) {\n    S.tm -= h * sp * 2;\n    if (S.tm \u003c= 0) (S.run = 1), (S.tm = 0);\n  } else {\n    S.tm = min(1, S.tm + (h * sp * 2) / RUN);\n    S.pa = S.dir > 0 ? prof(S.tm) : 1 - prof(S.tm);\n    if (S.tm >= 1) (S.run = 0), (S.tm = DWELL), (S.dir = -S.dir);\n  }\n  S.wh += ((S.pa - was) * (S.G.aHi - S.G.aLo)) / R;\n  for (const q of S.fl) {\n    q.y += h * (6 + 12 * q.z) * q.v;\n    q.x = (q.x + h * (2.5 * sin(S.t * 0.7 + q.ph) - 1.5) + W) % W;\n    if (q.y > H) (q.y -= H + 2), (q.x = rnd() * W);\n  }\n}\n\nfunction drawCar(S, f, ac, side, liv, up, k1) {\n  const G = S.G, o = side * G.WL * bump(G, ac), Px = G.xA + ac * G.ux + o * G.nx, Py = YA + ac * G.uy + o * G.ny;\n  const x0 = round(Px - 5), ay = round(Py - (x0 + 5 - Px) * G.tp), hb = G.hb, lm = mix(1, 0.5, k1), fl = S.flash > 0 && (S.flash * 6) % 1 \u003c 0.5;\n  for (let c = 0; c \u003c 10; c++) {\n    const x = x0 + c, glass = c % 3 && c \u003c 9, b = c > 8 ? 2 : floor(c / 3);\n    if (x \u003c 0 || x >= W) continue;\n    for (let r = G.ct[c]; r \u003c= G.cr[c]; r++) {\n      const y = ay + r, rr = r - G.ct[c], q = (y * W + x) * 3;\n      if (y \u003c 0 || y >= H) continue;\n      let [cr, cg, cb] = liv, m = lm;\n      if (r === G.cr[c]) (cr = cg = cb = c === 1 || c === 8 ? 20 : 68);\n      else if (r > G.cf[c]) m *= 0.62;\n      else if (rr === 0) (cr = 210), (cg = 206), (cb = 196);\n      else if (rr === hb - 3) {\n        (cr = 228), (cg = 214), (cb = 180);\n        if (c === (up ? 9 : 0)) (cr = 255), (cg = 250), (cb = fl ? 120 : 220), (m = 1);\n        if (c === (up ? 0 : 9)) (cr = 255), (cg = 30), (cb = 20), (m = 1);\n      } else if (glass && rr >= 2 && rr \u003c= hb - 4) {\n        // Lit windows, a passenger's head and shoulders in some.\n        const head = rr >= hb - 5 && c % 3 === 1 + (hash(b, liv[2]) \u003c 0.5) && hash(b * 3, liv[2]) \u003c 0.7;\n        (cr = head ? 60 : 255), (cg = head ? 40 : 214), (cb = head ? 36 : 150), (m = 1);\n      }\n      f[q] = cr * m; f[q + 1] = cg * m; f[q + 2] = cb * m;\n    }\n  }\n  // The headlamp's beam on the track ahead.\n  const dr = up ? 1 : -1, ae = ac + (dr * G.Lca) / 2, bs = mix(0.16, 0.36, k1) * (fl ? 2.5 : 1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], s = (S.A[k] - ae) * dr, w = abs(S.D[k] - side * G.WL * bump(G, S.A[k])) - 0.8 - s * 0.08, e = bs * (1 - s / 15) ** 2 * cl(1 - w, 0, 1);\n    if (s >= 0 && s \u003c 15) (f[k * 3] += 255 * e), (f[k * 3 + 1] += 236 * e), (f[k * 3 + 2] += 190 * e);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S.G) build(S, 0, 0, 0.06);\n  const G = S.G, f = S.f, k1 = S.k1, k4 = S.k4, t = S.t, C = S.c;\n  f.set(S.bg);\n  if (!BARE) {\n    // Stars come out as it gets dark; the evening star is there from the start.\n    const sv = sm(0.1, 0.7, k1);\n    for (const s of S.stars) {\n      const k = s.y * W + s.x, e = sv * s.b * (0.7 + 0.3 * sin(time * (2 + s.ph / 3) + s.ph)) * (1 - s.y / 130);\n      if (S.SK[k]) (f[k * 3] += 220 * e), (f[k * 3 + 1] += 224 * e), (f[k * 3 + 2] += 240 * e);\n    }\n    // Two bands of cloud drifting east, lit underneath while the glow lasts.\n    const ox = floor(S.cx), fx = S.cx - ox;\n    for (let y = 2; y \u003c 62; y++) {\n      const band = exp(-(((y - 12) / 7) ** 2)) + 0.9 * exp(-(((y - 38) / 8) ** 2)), i0 = y * 128;\n      for (let x = 0; x \u003c W; x++) {\n        if (!S.SK[y * W + x] || band \u003c 0.05) continue;\n        const d0 = mix(S.cl[i0 + ((x - ox) & 127)], S.cl[i0 + ((x - ox - 1) & 127)], fx), d1 = S.cl[min(63, y + 2) * 128 + ((x - ox) & 127)];\n        const e = sm(0.44, 0.68, d0 * 0.8 + band * 0.44 - 0.1) * 0.9, lit = cl(0.45 + (d0 - d1) * 3 + (y - 30) / 60, 0, 1), q = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) f[q + c] = mix(f[q + c], mix(C.cHi[c], C.cLo[c], lit), e);\n      }\n    }\n    const vk = (52 * W + 11) * 3;\n    if (S.SK[vk / 3]) (f[vk] += 255), (f[vk + 1] += 246), (f[vk + 2] += 220);\n    // Windows in town: more lit as night comes, now and then one going on or off.\n    const pl = mix(0.42, 0.86, k1);\n    for (let i = 0; i \u003c S.nw; i++) {\n      const th = S.wth[i], k = S.win[i] * 3, m = 0.8 + 0.2 * hash(i, 9);\n      if (th \u003c pl + 0.05 * sin(t * 0.4 + th * 60)) (f[k] = WARM[0] * m), (f[k + 1] = WARM[1] * m), (f[k + 2] = WARM[2] * m);\n    }\n  }\n  // Lamps along the line.\n  for (let i = 0; i \u003c S.lamp.length; i += 3) {\n    const [x, y, a] = S.lamp.slice(i, i + 3), e = mix(0.55, 1, k1) * (S.lampsOn ? cl((S.lampF - a) / 4, 0, 1) : 1 - cl((S.lampF - G.L + a) / 4, 0, 1));\n    for (let j = -2; j \u003c= 2; j++)\n      for (let ii = -2, q = ((y + j) * W + x - 2) * 3; ii \u003c= 2; ii++, q += 3) {\n        const g = j || ii ? e * 0.35 * mix(0.3, 1, k1) * exp(-(ii * ii + j * j) / 2) : e;\n        if (x + ii >= 0 && x + ii \u003c W) for (let c = 0; c \u003c 3; c++) f[q + c] += LAMP[c] * g;\n      }\n  }\n  // The cable: a strand from each car up to the bullwheel, its lay sliding with it.\n  const aA = mix(G.aLo, G.aHi, S.pa), aB = G.aLo + G.aHi - aA, lm = mix(1, 0.55, k1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], a = S.A[k], d = S.D[k], of = G.WL * bump(G, a);\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const ac = s \u003c 0 ? aA : aB;\n      if (a \u003c ac + G.Lca / 2 - 0.5 || a > G.L + 2 || abs(d - s * of - s * 0.25) >= 0.55) continue;\n      const tx = (0.5 + 0.5 * cos((TAU * (a - ac)) / 3)) ** 2;\n      for (let c = 0; c \u003c 3; c++) f[k * 3 + c] = mix([78, 72, 70][c], STEEL[c], tx) * lm;\n      break;\n    }\n  }\n  // The cars: red on the upper track of the loop, blue on the lower.\n  const upA = S.run ? S.dir > 0 : S.dir \u003c 0;\n  drawCar(S, f, aA, -1, LIV[0], upA, k1);\n  drawCar(S, f, aB, 1, LIV[1], !upA, k1);\n  // The bullwheel turning behind the round window, six spokes on a hub.\n  for (let y = floor(G.wy - R - 1); y \u003c= G.wy + R + 1; y++)\n    for (let x = floor(G.wx - R - 1); x \u003c= min(W - 1, G.wx + R + 1); x++) {\n      const dx = x + 0.5 - G.wx, dy = y + 0.5 - G.wy, r = hypot(dx, dy), an = atan2(dy, dx) - S.wh;\n      const m = ((an % (PI / 3)) + PI / 3) % (PI / 3), sd = r * sin(min(m, PI / 3 - m));\n      if (r \u003c= R + 0.6 && (abs(r - R + 0.7) \u003c 0.75 || (r \u003c R - 1 && sd \u003c 0.5) || r \u003c 1.4)) f.set([34, 28, 30], (y * W + x) * 3);\n    }\n  // The lake: the quay and the town upside down, rippling.\n  if (!BARE)\n    for (let y = QY + 1; y \u003c H; y++) {\n      const dy = y - QY, sh = round(0.8 * sin(t * 0.9 + y * 1.3)), m = (0.95 - dy * 0.08) / 255;\n      for (let x = 0; x \u003c W; x++) for (let c = 0, q = (y * W + x) * 3, p = ((QY - dy) * W + cl(x + sh, 0, W - 1)) * 3; c \u003c 3; c++) f[q + c] = C.lake[c] * (1 + (y & 1) * 0.2) + f[p + c] ** 2 * m;\n    }\n  // Falling snow.\n  const nf = floor(cl((k4 - 0.1) / 0.9, 0, 1) * 260), sc = mix(235, 120, k1);\n  for (let i = 0; i \u003c nf; i++) {\n    const q0 = S.fl[i], q = (floor(q0.y) * W + floor(q0.x)) * 3, e = 0.45 + 0.55 * q0.z;\n    if (q0.y >= 0 && q0.y \u003c H) (f[q] = mix(f[q], sc, e)), (f[q + 1] = mix(f[q + 1], sc, e)), (f[q + 2] = mix(f[q + 2], sc * 1.06, e));\n  }\n  for (let k = 0, j = 0; k \u003c N; k++, j += 3) display.setPixel(k & 63, k >> 6, cl(f[j], 0, 255) | 0, cl(f[j + 1], 0, 255) | 0, cl(f[j + 2], 0, 255) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower."},{"name":"Grade","min":0,"max":1,"about":"How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher."},{"name":"Snow","min":0,"max":1,"about":"A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel."}],"start":[0,2,0,0.06],"measures":{"motion":0.0963,"detail":0.0901,"edges":0.4693,"complexity":1.617,"coverage":0.9811,"colour":0.2158,"drift":0.0259},"knobResponse":[0.2342,0.0427,0.0962,0.1569]},{"slug":"galilean-moons","title":"Galilean Moons","family":"celestial","round":22,"note":"목성의 네 위성을 관측 도표로 그려요. 위쪽 접안렌즈에서는 줄무늬 목성이 돌고 이오의 그림자가 원반을 지나가며, 아래 도표에서는 위성마다 제 사인 곡선을 그리며 날짜가 위로 올라와요.","idea":"Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.","buttons":"K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.","code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","layer":{"id":"layer-galilean-moons","type":"code","name":"galilean-moons","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sky","min":0,"max":1,"about":"The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1."},{"name":"Speed","min":0.5,"max":24,"about":"Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second."},{"name":"Power","min":0,"max":1,"about":"The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits."},{"name":"Seeing","min":0,"max":1,"about":"Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0779,"detail":0.0747,"edges":0.5632,"complexity":0.743,"coverage":0.7778,"colour":0.1926,"drift":0.0306},"knobResponse":[0.5122,0.1178,0.1493,0.0539]},{"slug":"galton","title":"Galton Board","family":"data","round":2,"note":"깔때기에서 떨어진 공이 못마다 동전 던지듯 왼쪽이나 오른쪽으로 튀어 칸에 쌓이고, 종 모양이 서요. 칸 색은 가운데에서 표준편차 몇 개만큼 떨어졌는지를 보여 줘요.","idea":"Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.","buttons":"K1 tap opens the floor, the bins drain and the hopper fills again.","code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-galton","type":"code","name":"galton","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart."},{"name":"Rate","min":30,"max":240,"about":"Balls let through the neck each second, from a trickle to a pour."},{"name":"Bias","min":-0.3,"max":0.3,"about":"The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight."},{"name":"Rows","min":8,"max":15,"about":"Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins."}],"start":[0,30,0,8],"measures":{"motion":0.2909,"detail":0.0577,"edges":0.7232,"complexity":0.5234,"coverage":0.2361,"colour":0.1843,"drift":0.0246},"knobResponse":[0.0536,0.0477,0.0979,0.0715]},{"slug":"gaussian-moat","title":"Gaussian Moat","family":"number","round":31,"note":"LED 하나가 가우스 정수 하나라 가우스 소수가 옅은 점으로 깔리고, 1 + i 에서 걸음 √k 안의 소수로만 번지는 물길이 산호처럼 가지를 쳐요. 물길이 해자에 막히면 기슭이 깜박이고 k 가 커져 건너가요. K1 을 누르면 k 를 바로 한 칸 올려요.","idea":"Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.","buttons":"K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.","code":"// ===== Patternflow pattern =====\n// Title:   Gaussian Moat\n// Family:  number\n// Idea:    Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Gaussian moat problem (Basil Gordon, 1962), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1\n//\n// Knob 1: Hue. Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots.\n// Knob 2: Speed. At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower.\n// Knob 3: Step. The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go.\n// Knob 4: Reach. Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back.\n// Buttons: K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, abs, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The squared lengths a step between two Gaussian integers can have: the\n// sums of two squares, 1 left out since no two odd primes sit 1 apart.\nconst KS = [];\nfor (let n = 2; n \u003c= 50; n++) {\n  let ok = false;\n  for (let a = 0; a * a \u003c= n && !ok; a++) {\n    const b = Math.round(sqrt(n - a * a));\n    if (a * a + b * b === n) ok = true;\n  }\n  if (ok) KS.push(n);\n}\nconst KMAX = 50;\n\n// Every offset with dx^2 + dy^2 \u003c= 50, nearest first. A flood with step k\n// scans the first NK[k] of them; the moat line reads the first R49.\nconst OD = [];\nfor (let dy = -7; dy \u003c= 7; dy++)\n  for (let dx = -7; dx \u003c= 7; dx++) {\n    const d = dx * dx + dy * dy;\n    if (d \u003c= KMAX) OD.push([d, dx, dy]);\n  }\nOD.sort((p, q) => p[0] - q[0] || p[2] - q[2] || p[1] - q[1]);\nconst ODX = new Int8Array(OD.length), ODY = new Int8Array(OD.length), ODD = new Uint8Array(OD.length);\nOD.forEach((o, i) => {\n  ODD[i] = o[0];\n  ODX[i] = o[1];\n  ODY[i] = o[2];\n});\nconst NK = new Uint16Array(KMAX + 1);\nfor (let k = 0; k \u003c= KMAX; k++) {\n  let n = 0;\n  while (n \u003c OD.length && ODD[n] \u003c= k) n++;\n  NK[k] = n;\n}\nlet R49 = 0;\nwhile (R49 \u003c OD.length && ODD[R49] \u003c= 49) R49++;\n\n// Rational primes up to 7300 by a sieve, enough to test norms up to\n// 2 * 5072^2 by trial division, the far corner at Reach 1 plus the cycle.\nconst SP = [];\n{\n  const M = 7300, c = new Uint8Array(M + 1);\n  for (let i = 2; i \u003c= M; i++) {\n    if (c[i]) continue;\n    SP.push(i);\n    for (let j = i * i; j \u003c= M; j += i) c[j] = 1;\n  }\n}\nfunction isPrime(n) {\n  if (n \u003c 2) return false;\n  for (let i = 0; i \u003c SP.length; i++) {\n    const p = SP[i];\n    if (p * p > n) return true;\n    if (n % p === 0) return n === p;\n  }\n  return true;\n}\n// a + bi with a, b >= 0 is a Gaussian prime when its norm is a prime, or when\n// it lies on an axis and is a prime of the form 4n + 3.\nfunction gaussPrime(a, b) {\n  if (a === 0) return b % 4 === 3 && isPrime(b);\n  if (b === 0) return a % 4 === 3 && isPrime(a);\n  return isPrime(a * a + b * b);\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\n// Reach: the corner stays at the origin up to 0.1, then moves out along the\n// diagonal from 8 + 8i to 4800 + 4800i on a log scale. Each restart adds the\n// next of CYCLE, so the window wanders out where primes thin and comes back.\nconst reachOf = (u) => (u \u003c= 0.1 ? 0 : Math.round(8 * 600 ** ((u - 0.1) / 0.9)));\nconst CYCLE = [0, 24, 140];\n// The first k for a Step: the largest step length squared that fits.\nfunction firstK(step) {\n  let k = KS[0];\n  for (const q of KS) if (q \u003c= step * step + 1e-9) k = q;\n  return k;\n}\nconst nextK = (k) => {\n  for (const q of KS) if (q > k) return q;\n  return KMAX + 1;\n};\n\nconst DMAX = 1024;\n\nexport function setup(params) {\n  params.s = {\n    pr: new Uint8Array(N), dep: new Int16Array(N), par: new Int32Array(N), q: new Int32Array(N), born: new Float32Array(N),\n    ea: new Float32Array(N), ed: new Uint16Array(N), wa: new Float32Array(N), wash: new Float32Array(3), moat: new Float32Array(N), shore: [], grow: [], tg: 0.3, sp: 2, hueK: 0, startT: -1,\n    nPrime: 0, qlen: 0, lastQ: 0, plen: 1, head: 0, scan: 0, k: 2, k0: 2, off: -1, base: -1, stage: 0,\n    mode: 0, timer: 0, acc: 0, T: 0, fade: 1, moatA: 0,\n    hue: -1, pal: new Float32Array(DMAX * 3), dot: new Float32Array(3), buf: new Float32Array(N * 3),\n  };\n}\n\n// Lays out the window with its corner at off + off*i and seeds the flood at\n// the prime nearest the corner: 1 + i when the corner is the origin.\nfunction build(S, off) {\n  S.off = off;\n  S.nPrime = 0;\n  let seed = -1, best = 1e9;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, b = H - 1 - y, g = gaussPrime(x + off, b + off) ? 1 : 0;\n      S.pr[p] = g;\n      if (g) {\n        S.nPrime++;\n        const d = x * x + b * b;\n        if (d \u003c best) (best = d), (seed = p);\n      }\n    }\n  S.dep.fill(-1);\n  S.born.fill(-10);\n  S.ea.fill(0);\n  S.wa.fill(0);\n  S.moat.fill(0);\n  S.grow.length = 0;\n  S.shore = [];\n  S.qlen = 0;\n  S.head = 0;\n  S.scan = 0;\n  S.k = S.k0;\n  S.mode = 0;\n  S.timer = 0;\n  S.acc = 0;\n  S.moatA = 0;\n  S.lastQ = 0;\n  // A restart fades in over 0.6 s; the first window is there at once.\n  S.startT = S.T > 0 ? S.T : -1;\n  if (seed >= 0) {\n    S.dep[seed] = 0;\n    S.par[seed] = seed;\n    S.born[seed] = S.T;\n    S.q[S.qlen++] = seed;\n    soak(S, seed);\n  }\n}\n\n// The next prime the flood reaches: breadth first over the cluster, each\n// prime scanning its neighbours nearest first out to distance sqrt(k).\n// Only primes inside the window count, so a moat here is a moat of the\n// window: a prime just outside it could bridge one.\nfunction pull(S) {\n  const n = NK[min(S.k, KMAX)], pr = S.pr, dep = S.dep;\n  while (S.head \u003c S.qlen) {\n    const p = S.q[S.head], x = p & 63, y = p >> 6;\n    while (S.scan \u003c n) {\n      const i = S.scan++, X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        dep[c] = min(DMAX - 1, dep[p] + 1);\n        S.par[c] = p;\n        S.born[c] = S.T;\n        S.q[S.qlen++] = c;\n        return c;\n      }\n    }\n    S.head++;\n    S.scan = 0;\n  }\n  return -1;\n}\n\n// A segment a LED wide, soft at its sides, into the edge layer: each LED keeps\n// the strongest cover and the depth of the edge that gave it.\nfunction stamp(S, x0, y0, x1, y1, d, ea, ed) {\n  const vx = x1 - x0, vy = y1 - y0, L2 = vx * vx + vy * vy || 1;\n  const xa = max(0, floor(min(x0, x1)) - 1), xb = min(W - 1, Math.ceil(max(x0, x1)) + 1);\n  const ya = max(0, floor(min(y0, y1)) - 1), yb = min(H - 1, Math.ceil(max(y0, y1)) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const t = cl(((x - x0) * vx + (y - y0) * vy) / L2, 0, 1), ex = x0 + vx * t - x, ey = y0 + vy * t - y;\n      const a = 1 - sqrt(ex * ex + ey * ey) * 1.1;\n      if (a \u003c= 0) continue;\n      const p = y * W + x;\n      if (a > ea[p]) {\n        ea[p] = a;\n        if (ed) ed[p] = d;\n      }\n    }\n}\n\n// The ground the flood holds: a faint wash out to 2 LEDs round each reached\n// prime, so a moat shows as the dark band between the wash and the dots.\nfunction soak(S, p) {\n  const x0 = p & 63, y0 = p >> 6, wa = S.wa;\n  for (let dy = -2; dy \u003c= 2; dy++)\n    for (let dx = -2; dx \u003c= 2; dx++) {\n      const x = x0 + dx, y = y0 + dy;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const a = cl(1.15 - sqrt(dx * dx + dy * dy) * 0.38, 0, 1), q = y * W + x;\n      if (a > wa[q]) wa[q] = a;\n    }\n}\n\n// The flood has run out. The shore is every reached prime with an unreached\n// one within the next step; the moat line runs where the nearest reached\n// prime and the nearest unreached one are equally far.\nfunction meetMoat(S) {\n  const kn = min(nextK(S.k), KMAX), nk = NK[kn], pr = S.pr, dep = S.dep;\n  S.shore = [];\n  for (let h = 0; h \u003c S.qlen; h++) {\n    const p = S.q[h], x = p & 63, y = p >> 6;\n    for (let i = 1; i \u003c nk; i++) {\n      const X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        S.shore.push(p);\n        break;\n      }\n    }\n  }\n  const m = S.moat;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let dr = -1, du = -1;\n      for (let i = 0; i \u003c R49 && (dr \u003c 0 || du \u003c 0); i++) {\n        const X = x + ODX[i], Y = y + ODY[i];\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const c = Y * W + X;\n        if (!pr[c]) continue;\n        if (dep[c] >= 0) {\n          if (dr \u003c 0) dr = ODD[i];\n        } else if (du \u003c 0) du = ODD[i];\n      }\n      m[y * W + x] = dr > 0 && du > 0 ? max(0, 1 - abs(sqrt(dr) - sqrt(du)) * 0.8) : 0;\n    }\n  // A step that crossed nothing pulses for a third as long, so a prime\n  // trapped in a corner runs through its empty steps quickly.\n  S.plen = S.qlen > S.lastQ ? 1 : 0.35;\n  S.lastQ = S.qlen;\n}\n\nfunction raise(S) {\n  S.k = nextK(S.k);\n  S.head = 0;\n  S.scan = 0;\n  S.mode = S.k > KMAX ? 2 : 0;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 1.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(kv[1], 0.2, 3), k0 = firstK(cl(kv[2], 1.5, 4.5)), base = reachOf(cl(kv[3], 0, 1));\n  S.T += d;\n  S.hueK = kv[0] || 0;\n  if (base !== S.base) {\n    S.base = base;\n    S.stage = 0;\n    S.k0 = k0;\n    build(S, base);\n  } else if (k0 !== S.k0) {\n    // A longer first step carries on from here; a shorter one starts over.\n    const up = k0 > S.k0;\n    S.k0 = k0;\n    if (!up) build(S, S.off);\n    else if (S.mode \u003c 2 && k0 > S.k) {\n      S.k = k0;\n      S.head = 0;\n      S.scan = 0;\n      S.mode = 0;\n    }\n  }\n  const b = input.btnPressed || [];\n  if (b[0] && S.mode \u003c 2) raise(S);\n\n  // Each new edge grows from its parent for 0.3 s at Speed 2.\n  const tg = 0.6 / sp;\n  for (let i = S.grow.length - 1; i >= 0; i--) {\n    const c = S.grow[i];\n    if (S.T - S.born[c] >= tg) {\n      const p = S.par[c];\n      stamp(S, p & 63, p >> 6, c & 63, c >> 6, S.dep[c], S.ea, S.ed);\n      soak(S, c);\n      S.grow[i] = S.grow[S.grow.length - 1];\n      S.grow.pop();\n    }\n  }\n  S.tg = tg;\n\n  if (S.mode === 0) {\n    // A few dozen primes a second, more as the frontier (the primes queued\n    // but not yet scanned) widens: 56 a second at Speed 2 near 1 + i.\n    S.acc += d * sp * min(90, 28 + (S.qlen - S.head));\n    while (S.acc >= 1) {\n      S.acc -= 1;\n      const c = pull(S);\n      if (c >= 0) {\n        S.grow.push(c);\n        continue;\n      }\n      S.acc = 0;\n      if (S.qlen >= S.nPrime) {\n        S.mode = 2;\n        S.timer = 0;\n      } else {\n        meetMoat(S);\n        S.mode = 1;\n        S.timer = 0;\n      }\n      break;\n    }\n  } else if (S.mode === 1) {\n    // The moat: 0.7 s at Speed 2 of the shore pulsing, then k goes up.\n    S.timer += (d * sp * 0.72) / S.plen;\n    if (S.timer >= 1) raise(S);\n  } else {\n    // Filled: the coral holds for 3 s, fades for 1.5 s, and the next window\n    // in the cycle starts.\n    S.timer += d * sp * 0.5;\n    if (S.timer >= 4.5) {\n      S.stage = (S.stage + 1) % CYCLE.length;\n      build(S, S.base + CYCLE[S.stage]);\n    }\n  }\n  S.fade = S.mode === 2 ? cl((4.5 - S.timer) / 1.5, 0, 1) : cl((S.T - S.startT) / 0.6, 0, 1);\n  S.moatA = S.mode === 1 ? sin(PI * S.timer) : max(0, S.moatA - d * sp * 1.2);\n  S.sp = sp;\n}\n\n// Colours by depth: the hue runs out and back along a band of the wheel\n// every 72 steps of depth, so each breadth-first layer reads as a ring.\nfunction palette(S) {\n  const h0 = S.hueK + 0.13;\n  for (let i = 0; i \u003c DMAX; i++) {\n    let u = (i % 72) / 36;\n    if (u > 1) u = 2 - u;\n    hsv(h0 + 0.42 * u * u * (3 - 2 * u), 0.78, 1, S.pal, i * 3);\n  }\n  hsv(h0 + 0.5, 0.6, 0.3, S.dot, 0);\n  hsv(h0 + 0.47, 0.9, 0.26, S.wash, 0);\n  S.hue = S.hueK;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.hue !== S.hueK) palette(S);\n  const buf = S.buf, pal = S.pal, dot = S.dot, pr = S.pr, dep = S.dep, ea = S.ea, ed = S.ed, wa = S.wa, wash = S.wash, born = S.born, T = S.T;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const w = wa[p];\n    let r = wash[0] * w, g = wash[1] * w, b = wash[2] * w;\n    const a = ea[p];\n    if (a > 0) {\n      const c = ed[p] * 3, v = a * 0.62;\n      r = max(r, pal[c] * v);\n      g = max(g, pal[c + 1] * v);\n      b = max(b, pal[c + 2] * v);\n    }\n    if (pr[p]) {\n      const dd = dep[p];\n      if (dd \u003c 0) {\n        r = max(r, dot[0]);\n        g = max(g, dot[1]);\n        b = max(b, dot[2]);\n      } else {\n        // A new node flashes white and settles into its colour.\n        const c = dd * 3, fl = cl(1 - (T - born[p]) * 2.5, 0, 1);\n        r = pal[c] + (255 - pal[c]) * fl;\n        g = pal[c + 1] + (255 - pal[c + 1]) * fl;\n        b = pal[c + 2] + (255 - pal[c + 2]) * fl;\n      }\n    }\n    buf[o] = r;\n    buf[o + 1] = g;\n    buf[o + 2] = b;\n  }\n  // Edges still growing, from the parent toward the new prime.\n  if (S.grow.length) {\n    const tmp = S.tmp || (S.tmp = new Float32Array(N));\n    for (const c of S.grow) {\n      const p = S.par[c], t = cl((T - born[c]) / S.tg, 0, 1), x0 = p & 63, y0 = p >> 6, x1 = c & 63, y1 = c >> 6;\n      const xe = x0 + (x1 - x0) * t, ye = y0 + (y1 - y0) * t;\n      stamp(S, x0, y0, xe, ye, 0, tmp, null);\n      const xa = max(0, min(x0, x1) - 1), xb = min(W - 1, max(x0, x1) + 1), ya = max(0, min(y0, y1) - 1), yb = min(H - 1, max(y0, y1) + 1);\n      const cc = dep[c] * 3;\n      for (let y = ya; y \u003c= yb; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const q = y * W + x, v = tmp[q] * 0.8;\n          if (v \u003c= 0) continue;\n          tmp[q] = 0;\n          const o = q * 3;\n          buf[o] = max(buf[o], pal[cc] * v + 60 * v);\n          buf[o + 1] = max(buf[o + 1], pal[cc + 1] * v + 60 * v);\n          buf[o + 2] = max(buf[o + 2], pal[cc + 2] * v + 60 * v);\n        }\n    }\n  }\n  // The moat: its middle line glows pale and the shore primes pulse white.\n  if (S.moatA > 0.01) {\n    const m = S.moat, A = S.moatA;\n    for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n      const v = m[p] * A * 0.9;\n      if (v \u003c= 0) continue;\n      buf[o] += (170 - buf[o]) * v;\n      buf[o + 1] += (215 - buf[o + 1]) * v;\n      buf[o + 2] += (255 - buf[o + 2]) * v;\n    }\n    const pulse = 0.5 + 0.5 * sin(T * S.sp * 9);\n    for (const p of S.shore) {\n      const x = p & 63, y = p >> 6;\n      for (let dy = -1; dy \u003c= 1; dy++)\n        for (let dx = -1; dx \u003c= 1; dx++) {\n          const X = x + dx, Y = y + dy;\n          if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n          const o = (Y * W + X) * 3, v = A * (dx || dy ? 0.35 * pulse : 0.5 + 0.5 * pulse);\n          buf[o] += (255 - buf[o]) * v;\n          buf[o + 1] += (255 - buf[o + 1]) * v;\n          buf[o + 2] += (255 - buf[o + 2]) * v;\n        }\n    }\n  }\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * f, buf[p + 1] * f, buf[p + 2] * f);\n}\n","layer":{"id":"layer-gaussian-moat","type":"code","name":"gaussian-moat","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gaussian Moat\n// Family:  number\n// Idea:    Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Gaussian moat problem (Basil Gordon, 1962), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1\n//\n// Knob 1: Hue. Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots.\n// Knob 2: Speed. At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower.\n// Knob 3: Step. The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go.\n// Knob 4: Reach. Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back.\n// Buttons: K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, abs, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The squared lengths a step between two Gaussian integers can have: the\n// sums of two squares, 1 left out since no two odd primes sit 1 apart.\nconst KS = [];\nfor (let n = 2; n \u003c= 50; n++) {\n  let ok = false;\n  for (let a = 0; a * a \u003c= n && !ok; a++) {\n    const b = Math.round(sqrt(n - a * a));\n    if (a * a + b * b === n) ok = true;\n  }\n  if (ok) KS.push(n);\n}\nconst KMAX = 50;\n\n// Every offset with dx^2 + dy^2 \u003c= 50, nearest first. A flood with step k\n// scans the first NK[k] of them; the moat line reads the first R49.\nconst OD = [];\nfor (let dy = -7; dy \u003c= 7; dy++)\n  for (let dx = -7; dx \u003c= 7; dx++) {\n    const d = dx * dx + dy * dy;\n    if (d \u003c= KMAX) OD.push([d, dx, dy]);\n  }\nOD.sort((p, q) => p[0] - q[0] || p[2] - q[2] || p[1] - q[1]);\nconst ODX = new Int8Array(OD.length), ODY = new Int8Array(OD.length), ODD = new Uint8Array(OD.length);\nOD.forEach((o, i) => {\n  ODD[i] = o[0];\n  ODX[i] = o[1];\n  ODY[i] = o[2];\n});\nconst NK = new Uint16Array(KMAX + 1);\nfor (let k = 0; k \u003c= KMAX; k++) {\n  let n = 0;\n  while (n \u003c OD.length && ODD[n] \u003c= k) n++;\n  NK[k] = n;\n}\nlet R49 = 0;\nwhile (R49 \u003c OD.length && ODD[R49] \u003c= 49) R49++;\n\n// Rational primes up to 7300 by a sieve, enough to test norms up to\n// 2 * 5072^2 by trial division, the far corner at Reach 1 plus the cycle.\nconst SP = [];\n{\n  const M = 7300, c = new Uint8Array(M + 1);\n  for (let i = 2; i \u003c= M; i++) {\n    if (c[i]) continue;\n    SP.push(i);\n    for (let j = i * i; j \u003c= M; j += i) c[j] = 1;\n  }\n}\nfunction isPrime(n) {\n  if (n \u003c 2) return false;\n  for (let i = 0; i \u003c SP.length; i++) {\n    const p = SP[i];\n    if (p * p > n) return true;\n    if (n % p === 0) return n === p;\n  }\n  return true;\n}\n// a + bi with a, b >= 0 is a Gaussian prime when its norm is a prime, or when\n// it lies on an axis and is a prime of the form 4n + 3.\nfunction gaussPrime(a, b) {\n  if (a === 0) return b % 4 === 3 && isPrime(b);\n  if (b === 0) return a % 4 === 3 && isPrime(a);\n  return isPrime(a * a + b * b);\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\n// Reach: the corner stays at the origin up to 0.1, then moves out along the\n// diagonal from 8 + 8i to 4800 + 4800i on a log scale. Each restart adds the\n// next of CYCLE, so the window wanders out where primes thin and comes back.\nconst reachOf = (u) => (u \u003c= 0.1 ? 0 : Math.round(8 * 600 ** ((u - 0.1) / 0.9)));\nconst CYCLE = [0, 24, 140];\n// The first k for a Step: the largest step length squared that fits.\nfunction firstK(step) {\n  let k = KS[0];\n  for (const q of KS) if (q \u003c= step * step + 1e-9) k = q;\n  return k;\n}\nconst nextK = (k) => {\n  for (const q of KS) if (q > k) return q;\n  return KMAX + 1;\n};\n\nconst DMAX = 1024;\n\nexport function setup(params) {\n  params.s = {\n    pr: new Uint8Array(N), dep: new Int16Array(N), par: new Int32Array(N), q: new Int32Array(N), born: new Float32Array(N),\n    ea: new Float32Array(N), ed: new Uint16Array(N), wa: new Float32Array(N), wash: new Float32Array(3), moat: new Float32Array(N), shore: [], grow: [], tg: 0.3, sp: 2, hueK: 0, startT: -1,\n    nPrime: 0, qlen: 0, lastQ: 0, plen: 1, head: 0, scan: 0, k: 2, k0: 2, off: -1, base: -1, stage: 0,\n    mode: 0, timer: 0, acc: 0, T: 0, fade: 1, moatA: 0,\n    hue: -1, pal: new Float32Array(DMAX * 3), dot: new Float32Array(3), buf: new Float32Array(N * 3),\n  };\n}\n\n// Lays out the window with its corner at off + off*i and seeds the flood at\n// the prime nearest the corner: 1 + i when the corner is the origin.\nfunction build(S, off) {\n  S.off = off;\n  S.nPrime = 0;\n  let seed = -1, best = 1e9;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, b = H - 1 - y, g = gaussPrime(x + off, b + off) ? 1 : 0;\n      S.pr[p] = g;\n      if (g) {\n        S.nPrime++;\n        const d = x * x + b * b;\n        if (d \u003c best) (best = d), (seed = p);\n      }\n    }\n  S.dep.fill(-1);\n  S.born.fill(-10);\n  S.ea.fill(0);\n  S.wa.fill(0);\n  S.moat.fill(0);\n  S.grow.length = 0;\n  S.shore = [];\n  S.qlen = 0;\n  S.head = 0;\n  S.scan = 0;\n  S.k = S.k0;\n  S.mode = 0;\n  S.timer = 0;\n  S.acc = 0;\n  S.moatA = 0;\n  S.lastQ = 0;\n  // A restart fades in over 0.6 s; the first window is there at once.\n  S.startT = S.T > 0 ? S.T : -1;\n  if (seed >= 0) {\n    S.dep[seed] = 0;\n    S.par[seed] = seed;\n    S.born[seed] = S.T;\n    S.q[S.qlen++] = seed;\n    soak(S, seed);\n  }\n}\n\n// The next prime the flood reaches: breadth first over the cluster, each\n// prime scanning its neighbours nearest first out to distance sqrt(k).\n// Only primes inside the window count, so a moat here is a moat of the\n// window: a prime just outside it could bridge one.\nfunction pull(S) {\n  const n = NK[min(S.k, KMAX)], pr = S.pr, dep = S.dep;\n  while (S.head \u003c S.qlen) {\n    const p = S.q[S.head], x = p & 63, y = p >> 6;\n    while (S.scan \u003c n) {\n      const i = S.scan++, X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        dep[c] = min(DMAX - 1, dep[p] + 1);\n        S.par[c] = p;\n        S.born[c] = S.T;\n        S.q[S.qlen++] = c;\n        return c;\n      }\n    }\n    S.head++;\n    S.scan = 0;\n  }\n  return -1;\n}\n\n// A segment a LED wide, soft at its sides, into the edge layer: each LED keeps\n// the strongest cover and the depth of the edge that gave it.\nfunction stamp(S, x0, y0, x1, y1, d, ea, ed) {\n  const vx = x1 - x0, vy = y1 - y0, L2 = vx * vx + vy * vy || 1;\n  const xa = max(0, floor(min(x0, x1)) - 1), xb = min(W - 1, Math.ceil(max(x0, x1)) + 1);\n  const ya = max(0, floor(min(y0, y1)) - 1), yb = min(H - 1, Math.ceil(max(y0, y1)) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const t = cl(((x - x0) * vx + (y - y0) * vy) / L2, 0, 1), ex = x0 + vx * t - x, ey = y0 + vy * t - y;\n      const a = 1 - sqrt(ex * ex + ey * ey) * 1.1;\n      if (a \u003c= 0) continue;\n      const p = y * W + x;\n      if (a > ea[p]) {\n        ea[p] = a;\n        if (ed) ed[p] = d;\n      }\n    }\n}\n\n// The ground the flood holds: a faint wash out to 2 LEDs round each reached\n// prime, so a moat shows as the dark band between the wash and the dots.\nfunction soak(S, p) {\n  const x0 = p & 63, y0 = p >> 6, wa = S.wa;\n  for (let dy = -2; dy \u003c= 2; dy++)\n    for (let dx = -2; dx \u003c= 2; dx++) {\n      const x = x0 + dx, y = y0 + dy;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const a = cl(1.15 - sqrt(dx * dx + dy * dy) * 0.38, 0, 1), q = y * W + x;\n      if (a > wa[q]) wa[q] = a;\n    }\n}\n\n// The flood has run out. The shore is every reached prime with an unreached\n// one within the next step; the moat line runs where the nearest reached\n// prime and the nearest unreached one are equally far.\nfunction meetMoat(S) {\n  const kn = min(nextK(S.k), KMAX), nk = NK[kn], pr = S.pr, dep = S.dep;\n  S.shore = [];\n  for (let h = 0; h \u003c S.qlen; h++) {\n    const p = S.q[h], x = p & 63, y = p >> 6;\n    for (let i = 1; i \u003c nk; i++) {\n      const X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        S.shore.push(p);\n        break;\n      }\n    }\n  }\n  const m = S.moat;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let dr = -1, du = -1;\n      for (let i = 0; i \u003c R49 && (dr \u003c 0 || du \u003c 0); i++) {\n        const X = x + ODX[i], Y = y + ODY[i];\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const c = Y * W + X;\n        if (!pr[c]) continue;\n        if (dep[c] >= 0) {\n          if (dr \u003c 0) dr = ODD[i];\n        } else if (du \u003c 0) du = ODD[i];\n      }\n      m[y * W + x] = dr > 0 && du > 0 ? max(0, 1 - abs(sqrt(dr) - sqrt(du)) * 0.8) : 0;\n    }\n  // A step that crossed nothing pulses for a third as long, so a prime\n  // trapped in a corner runs through its empty steps quickly.\n  S.plen = S.qlen > S.lastQ ? 1 : 0.35;\n  S.lastQ = S.qlen;\n}\n\nfunction raise(S) {\n  S.k = nextK(S.k);\n  S.head = 0;\n  S.scan = 0;\n  S.mode = S.k > KMAX ? 2 : 0;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 1.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(kv[1], 0.2, 3), k0 = firstK(cl(kv[2], 1.5, 4.5)), base = reachOf(cl(kv[3], 0, 1));\n  S.T += d;\n  S.hueK = kv[0] || 0;\n  if (base !== S.base) {\n    S.base = base;\n    S.stage = 0;\n    S.k0 = k0;\n    build(S, base);\n  } else if (k0 !== S.k0) {\n    // A longer first step carries on from here; a shorter one starts over.\n    const up = k0 > S.k0;\n    S.k0 = k0;\n    if (!up) build(S, S.off);\n    else if (S.mode \u003c 2 && k0 > S.k) {\n      S.k = k0;\n      S.head = 0;\n      S.scan = 0;\n      S.mode = 0;\n    }\n  }\n  const b = input.btnPressed || [];\n  if (b[0] && S.mode \u003c 2) raise(S);\n\n  // Each new edge grows from its parent for 0.3 s at Speed 2.\n  const tg = 0.6 / sp;\n  for (let i = S.grow.length - 1; i >= 0; i--) {\n    const c = S.grow[i];\n    if (S.T - S.born[c] >= tg) {\n      const p = S.par[c];\n      stamp(S, p & 63, p >> 6, c & 63, c >> 6, S.dep[c], S.ea, S.ed);\n      soak(S, c);\n      S.grow[i] = S.grow[S.grow.length - 1];\n      S.grow.pop();\n    }\n  }\n  S.tg = tg;\n\n  if (S.mode === 0) {\n    // A few dozen primes a second, more as the frontier (the primes queued\n    // but not yet scanned) widens: 56 a second at Speed 2 near 1 + i.\n    S.acc += d * sp * min(90, 28 + (S.qlen - S.head));\n    while (S.acc >= 1) {\n      S.acc -= 1;\n      const c = pull(S);\n      if (c >= 0) {\n        S.grow.push(c);\n        continue;\n      }\n      S.acc = 0;\n      if (S.qlen >= S.nPrime) {\n        S.mode = 2;\n        S.timer = 0;\n      } else {\n        meetMoat(S);\n        S.mode = 1;\n        S.timer = 0;\n      }\n      break;\n    }\n  } else if (S.mode === 1) {\n    // The moat: 0.7 s at Speed 2 of the shore pulsing, then k goes up.\n    S.timer += (d * sp * 0.72) / S.plen;\n    if (S.timer >= 1) raise(S);\n  } else {\n    // Filled: the coral holds for 3 s, fades for 1.5 s, and the next window\n    // in the cycle starts.\n    S.timer += d * sp * 0.5;\n    if (S.timer >= 4.5) {\n      S.stage = (S.stage + 1) % CYCLE.length;\n      build(S, S.base + CYCLE[S.stage]);\n    }\n  }\n  S.fade = S.mode === 2 ? cl((4.5 - S.timer) / 1.5, 0, 1) : cl((S.T - S.startT) / 0.6, 0, 1);\n  S.moatA = S.mode === 1 ? sin(PI * S.timer) : max(0, S.moatA - d * sp * 1.2);\n  S.sp = sp;\n}\n\n// Colours by depth: the hue runs out and back along a band of the wheel\n// every 72 steps of depth, so each breadth-first layer reads as a ring.\nfunction palette(S) {\n  const h0 = S.hueK + 0.13;\n  for (let i = 0; i \u003c DMAX; i++) {\n    let u = (i % 72) / 36;\n    if (u > 1) u = 2 - u;\n    hsv(h0 + 0.42 * u * u * (3 - 2 * u), 0.78, 1, S.pal, i * 3);\n  }\n  hsv(h0 + 0.5, 0.6, 0.3, S.dot, 0);\n  hsv(h0 + 0.47, 0.9, 0.26, S.wash, 0);\n  S.hue = S.hueK;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.hue !== S.hueK) palette(S);\n  const buf = S.buf, pal = S.pal, dot = S.dot, pr = S.pr, dep = S.dep, ea = S.ea, ed = S.ed, wa = S.wa, wash = S.wash, born = S.born, T = S.T;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const w = wa[p];\n    let r = wash[0] * w, g = wash[1] * w, b = wash[2] * w;\n    const a = ea[p];\n    if (a > 0) {\n      const c = ed[p] * 3, v = a * 0.62;\n      r = max(r, pal[c] * v);\n      g = max(g, pal[c + 1] * v);\n      b = max(b, pal[c + 2] * v);\n    }\n    if (pr[p]) {\n      const dd = dep[p];\n      if (dd \u003c 0) {\n        r = max(r, dot[0]);\n        g = max(g, dot[1]);\n        b = max(b, dot[2]);\n      } else {\n        // A new node flashes white and settles into its colour.\n        const c = dd * 3, fl = cl(1 - (T - born[p]) * 2.5, 0, 1);\n        r = pal[c] + (255 - pal[c]) * fl;\n        g = pal[c + 1] + (255 - pal[c + 1]) * fl;\n        b = pal[c + 2] + (255 - pal[c + 2]) * fl;\n      }\n    }\n    buf[o] = r;\n    buf[o + 1] = g;\n    buf[o + 2] = b;\n  }\n  // Edges still growing, from the parent toward the new prime.\n  if (S.grow.length) {\n    const tmp = S.tmp || (S.tmp = new Float32Array(N));\n    for (const c of S.grow) {\n      const p = S.par[c], t = cl((T - born[c]) / S.tg, 0, 1), x0 = p & 63, y0 = p >> 6, x1 = c & 63, y1 = c >> 6;\n      const xe = x0 + (x1 - x0) * t, ye = y0 + (y1 - y0) * t;\n      stamp(S, x0, y0, xe, ye, 0, tmp, null);\n      const xa = max(0, min(x0, x1) - 1), xb = min(W - 1, max(x0, x1) + 1), ya = max(0, min(y0, y1) - 1), yb = min(H - 1, max(y0, y1) + 1);\n      const cc = dep[c] * 3;\n      for (let y = ya; y \u003c= yb; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const q = y * W + x, v = tmp[q] * 0.8;\n          if (v \u003c= 0) continue;\n          tmp[q] = 0;\n          const o = q * 3;\n          buf[o] = max(buf[o], pal[cc] * v + 60 * v);\n          buf[o + 1] = max(buf[o + 1], pal[cc + 1] * v + 60 * v);\n          buf[o + 2] = max(buf[o + 2], pal[cc + 2] * v + 60 * v);\n        }\n    }\n  }\n  // The moat: its middle line glows pale and the shore primes pulse white.\n  if (S.moatA > 0.01) {\n    const m = S.moat, A = S.moatA;\n    for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n      const v = m[p] * A * 0.9;\n      if (v \u003c= 0) continue;\n      buf[o] += (170 - buf[o]) * v;\n      buf[o + 1] += (215 - buf[o + 1]) * v;\n      buf[o + 2] += (255 - buf[o + 2]) * v;\n    }\n    const pulse = 0.5 + 0.5 * sin(T * S.sp * 9);\n    for (const p of S.shore) {\n      const x = p & 63, y = p >> 6;\n      for (let dy = -1; dy \u003c= 1; dy++)\n        for (let dx = -1; dx \u003c= 1; dx++) {\n          const X = x + dx, Y = y + dy;\n          if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n          const o = (Y * W + X) * 3, v = A * (dx || dy ? 0.35 * pulse : 0.5 + 0.5 * pulse);\n          buf[o] += (255 - buf[o]) * v;\n          buf[o + 1] += (255 - buf[o + 1]) * v;\n          buf[o + 2] += (255 - buf[o + 2]) * v;\n        }\n    }\n  }\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * f, buf[p + 1] * f, buf[p + 2] * f);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower."},{"name":"Step","min":1.5,"max":4.5,"about":"The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go."},{"name":"Reach","min":0,"max":1,"about":"Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back."}],"start":[0,2,1.5,0.06],"measures":{"motion":0.0332,"detail":0.138,"edges":0.7904,"complexity":0.3035,"coverage":0.2952,"colour":0.1811,"drift":0.1107},"knobResponse":[0.0371,0.0267,0.0437,0.056]},{"slug":"gear-train","title":"Gear Train","family":"machine","round":8,"note":"패널 발치의 크랭크가 색 톱니바퀴를 돌려요. 바퀴마다 아래 바퀴와 톱니를 맞물려 꼭대기까지 이어지고, 작은 바퀴일수록 빨리 돌아요. K4 를 올리면 모든 바퀴가 톱니 하나씩 딸깍 걸려 나가요.","idea":"A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.","buttons":"K1 tap reverses the crank; the train slows, stops and runs the other way.","code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-gear-train","type":"code","name":"gear-train","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second."},{"name":"Gears","min":4,"max":9,"about":"How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel."},{"name":"Tick","min":0,"max":1,"about":"Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet."}],"start":[0,2,4,0.06],"measures":{"motion":0.8362,"detail":0.0922,"edges":0.4218,"complexity":1.1517,"coverage":0.8876,"colour":0.5762,"drift":0.1048},"knobResponse":[0.3786,0.1249,0.2931,0.0655]},{"slug":"geyser","title":"Geyser","family":"volcano","round":26,"note":"눈 덮인 지열 지대의 간헐천을 땅속까지 잘라 봐요. 화도에 기포가 차면 청록 웅덩이가 유리 돔으로 부풀다 흰 물기둥으로 터지고, 김 구름이 바람에 흘러가요. K1 은 정오에서 오로라 밤까지 빛을 바꾸고, 누르면 바로 분출해요.","idea":"A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.","buttons":"K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.","code":"// ===== Patternflow pattern =====\n// Title:   Geyser\n// Family:  volcano\n// Idea:    A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after Strokkur in the Haukadalur geothermal field, Iceland\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1\n//\n// Knob 1: Light. A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing.\n// Knob 2: Speed. At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer.\n// Knob 3: Power. At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows.\n// Knob 4: Wind. At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it.\n// Buttons: K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst sc = (c, k) => c.map((v, n) => v * (k.length ? k[n] : k));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the pool's brim, the bowl's floor, the snow on the flat, the horizon,\n// the drained water level; the vent's column; the chamber's centre and radii.\nconst [BRIM, BOWL, GY, HZ, LOW, C] = [71, 80, 75, 61, 103, 32];\nconst [KX, KY, KRX, KRY] = [30.5, 116, 10, 6.5];\n// Gravity in rows per second squared.\nconst G = 150;\n// Seconds at Speed 2: refill, the big bubble's climb, the dome, the drain.\nconst [HEAT, RISE, DOME, FALL] = [7.5, 0.7, 0.45, 3.5];\n\n// The ground: the bowl, the sinter mound with a lip at the brim, the flat.\nconst SURF = new Float32Array(W).map((_, x) => {\n  const dx = abs(x + 0.5 - C);\n  if (dx \u003c 12) return BRIM + (BOWL - BRIM) * (1 - (dx / 12) ** 2) ** 0.7;\n  if (dx \u003c 27) return BRIM - 0.8 * (1 - sm(12, 16, dx)) + (GY - BRIM) * sm(14, 27, dx);\n  return GY + 0.8 * (vn(x * 0.2, 3) - 0.5);\n});\n// The conduit wanders a little and narrows at row 95.\nconst CXA = new Float32Array(H).map((_, y) => C - 0.5 + 0.8 * sin(y * 0.23) + 0.4 * sin(y * 0.61 + 1));\nconst CHW = new Float32Array(H).map((_, y) => 2 + 0.4 * sin(y * 0.37) - 0.6 * exp(-(((y - 95) / 3) ** 2)));\n// The hill behind the field on the right, the ice cap on the horizon at the left.\nconst HILL = new Float32Array(W).map((_, x) => HZ - 20 * sm(30, 66, x) ** 0.9 - 1.2 * vn(x * 0.35, 4));\nconst CAP = new Float32Array(W).map((_, x) => HZ - 1.5 - 2.6 * sqrt(max(0, 1 - ((x + 0.5 - 13) / 17) ** 2)));\n// Cracks feeding ground water to the chamber.\nconst FIS = [[[0, 94], [7, 98], [15, 104], [22, 112]], [[63, 103], [55, 108], [47, 113], [40, 117]]];\n// The beds, top down, colour and rows: sinter, geyserite, ochre, sinter, rust,\n// sulphur, grey clay, ochre, dark rust, tuff, sulphur, dark clay, basalt.\nconst LAY = [[206, 200, 186, 3], [176, 172, 166, 2], [172, 122, 54, 2], [196, 188, 172, 2], [150, 70, 40, 3], [206, 182, 62, 1], [126, 116, 108, 4], [162, 112, 52, 2], [120, 56, 36, 2], [104, 92, 84, 4], [200, 176, 64, 1], [84, 74, 72, 5], [58, 58, 68, 99]];\nconst SULF = [214, 190, 70], RUST = [158, 76, 42], LINE = [214, 210, 196], SNOW = [214, 222, 236];\nconst MAT = [[96, 116, 52], [214, 112, 38], [212, 186, 70]];\nconst COOL = [24, 62, 150], HOT = [44, 176, 204], FOAM = [212, 232, 236];\nconst JACK = [[200, 46, 40], [232, 192, 44], [40, 92, 200], [44, 44, 52], [58, 140, 92], [222, 112, 34], [150, 60, 150]];\n\n// Noon, blue hour, night: sky overhead and at the horizon, daylight, steam lit\n// and in shade, the cut rock, the water.\nconst LIGHT = [\n  [0, [20, 62, 152], [122, 156, 198], [0.95, 0.93, 0.88], [236, 234, 226], [118, 134, 168], 1, 1],\n  [0.5, [10, 24, 74], [66, 88, 148], [0.42, 0.48, 0.7], [158, 168, 212], [50, 60, 108], 0.85, 0.78],\n  [1, [3, 7, 24], [12, 26, 54], [0.24, 0.3, 0.42], [132, 154, 168], [30, 42, 70], 0.62, 0.6],\n];\nfunction lightAt(g) {\n  const a = LIGHT[g > 0.5 ? 1 : 0], b = LIGHT[g > 0.5 ? 2 : 1], u = (g - a[0]) / (b[0] - a[0]);\n  const m = (k) => (a[k].length ? a[k].map((v, c) => mix(v, b[k][c], u)) : mix(a[k], b[k], u));\n  return { top: m(1), low: m(2), amb: m(3), lit: m(4), dark: m(5), rock: m(6), water: m(7), sun: 1 - sm(0, 0.4, g), ag: sm(0.15, 0.45, g) * (1 - sm(0.55, 0.85, g)), moon: sm(0.6, 0.95, g), stars: sm(0.4, 0.85, g), aur: sm(0.6, 0.95, g) };\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), bg: F32(N * 3), rock: F32(N * 3), kind: new Uint8Array(N), sky: new Uint8Array(N), fu: F32(N), D: F32(N), CB: F32(N),\n    t: 0, ph: 0, pt: HEAT - 1.25, wl: BRIM, wl0: LOW, T: 0.9, T0: 0.25, hv: 0, dh: 0, bw: 6, key: -1, ca: 99, ja: 99,\n    bub: [], par: [], spr: [], puffs: [], pop: 0, nb: 0, np: 0, ns: 0, nv: 0, ox: 0, oy: 0, big: -1,\n  });\n  const { kind, fu, rock } = S;\n  // Kinds: 0 the view, 1 the bowl, 2 rock, 3 conduit, 4 crack, 5 chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5;\n    let k = Y >= SURF[x] ? 2 : abs(X - C) \u003c 12 && Y >= BRIM ? 1 : 0;\n    if (k === 2 && ((X - KX) / KRX) ** 2 + ((Y - KY) / KRY) ** 2 \u003c 1 + 0.5 * (vn(X * 0.35, Y * 0.35) - 0.5)) k = 5;\n    else if (k === 2 && y \u003c KY && abs(X - CXA[y]) \u003c CHW[y]) k = 3;\n    kind[i] = k;\n    if (!k && Y \u003c min(HILL[x], CAP[x])) S.sky[i] = 1;\n  }\n  for (const p of FIS)\n    for (let j = 1, len = 0; j \u003c p.length; j++) {\n      const [x0, y0] = p[j - 1], [x1, y1] = p[j], n = hypot(x1 - x0, y1 - y0) * 3;\n      for (let u = 0; u \u003c= n; u++) {\n        const i = floor(mix(y0, y1, u / n)) * W + floor(mix(x0, x1, u / n));\n        if (kind[i] === 2) (kind[i] = 4), (fu[i] = len + u / 3);\n      }\n      len += n / 3;\n    }\n  // The cut rock: beds bend with the ground, a silica lining and sulphur and\n  // rust stains round every water way, columnar basalt below, bacterial mats\n  // on the mound and snow on the flat.\n  const cav = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, dx = abs(X - C), s = SURF[x];\n    if (kind[i] >= 3) cav.push(i);\n    if (kind[i] !== 2) continue;\n    let d = Y - s + 2.4 * (vn(x * 0.08, y * 0.06 + 9) - 0.5) + 0.05 * (X - C), j = 0, dist = 9, gr = 0.9 + 0.18 * hash(x, y + 77);\n    while (d > LAY[j][3] && j \u003c LAY.length - 1) (d -= LAY[j][3]), j++;\n    let c = LAY[j];\n    if (j === LAY.length - 1) {\n      const jx = (X + 3 * vn(1.7, Y * 0.12)) / 6;\n      gr *= (jx - floor(jx) \u003c 0.17 ? 0.6 : 1) * (0.85 + 0.3 * hash(floor(jx), 5));\n    }\n    for (let v = -5; v \u003c= 5; v++)\n      for (let u = -5; u \u003c= 5; u++) {\n        const xx = x + u, yy = y + v, k = xx >= 0 && xx \u003c W && yy \u003c H ? kind[yy * W + xx] : 2;\n        if (k !== 2 && k) dist = min(dist, hypot(u, v) * (k === 4 ? 2.5 : 1));\n      }\n    if (dist \u003c 1.5) c = LINE;\n    else if (dist \u003c 5) c = c.map((v, n) => mix(v, (dist \u003c 3 ? SULF : RUST)[n], (5 - dist) * 0.17));\n    if (dx > 13 && dx \u003c 26 && Y - s \u003c 1.4) c = MAT[floor(cl(vn(X * 0.45, 2) * 2.2 - 0.3, 0, 2.99))];\n    if (dx >= 26 && Y - s \u003c 1.5) c = SNOW;\n    for (let n = 0; n \u003c 3; n++) rock[i * 3 + n] = c[n] * gr;\n  }\n  S.cav = Int32Array.from(cav);\n  // Visitors behind the rope on both sides, in their parkas.\n  S.ppl = [];\n  for (const [x0, x1] of [[2, 18], [46, 62]])\n    for (let x = x0 + rnd() * 2; x \u003c x1; x += 2.2 + rnd() * 2.4)\n      S.ppl.push({ x: floor(x), h: rnd() \u003c 0.3 ? 5 : 4, c: JACK[floor(rnd() * 7)], hat: rnd() \u003c 0.5, dl: rnd() * 0.9, up: rnd() \u003c 0.7 });\n}\n\n// The breeze in columns per second at row y, stronger aloft.\nconst wind = (S, y) => (6 + 16 * S.w) * (0.35 + 0.65 * sm(80, 8, y));\nfunction puff(S, x, y, r, a, vy, life, gr, rmax) {\n  if (S.puffs.length > 210) S.puffs.shift();\n  S.puffs.push({ x, y, r, a, vy, rise: -(1 + 2.5 * rnd()), life, gr, rmax, age: 0, ph: rnd() * 7 });\n}\nconst spray = (S, x, y, vx, vy) => S.spr.length \u003c 700 && S.spr.push({ x, y, vx, vy, life: 2.5 });\n\nfunction enter(S, ph) {\n  Object.assign(S, { ph, pt: 0, wl0: S.wl, T0: S.T });\n  if (ph === 2) S.ca = 0;\n  if (ph === 3) {\n    // The dome tears open in a ring of spray.\n    S.ja = 0;\n    for (let n = 0; n \u003c 40; n++) spray(S, C + (rnd() - 0.5) * S.bw * 1.6, BRIM - S.dh * rnd(), (rnd() - 0.5) * 70, -(40 + 90 * rnd()));\n    for (let n = 0; n \u003c 6; n++) puff(S, C + (rnd() - 0.5) * 12, BRIM - 3 - 4 * rnd(), 3 + rnd() * 2, 0.6, -(10 + 10 * rnd()), 8 + 3 * rnd(), 1.5, 12 + 6 * S.P);\n  }\n}\n\nfunction step(S, d, hold) {\n  const P = S.P, Dj = 1.1 + 1.1 * P, Rl = RISE - 0.35 * P, Dl = DOME - 0.2 * P, t = (S.t += d);\n  if (!hold) (S.pt += d), (S.ca += d), (S.ja += d);\n  if (S.pt >= [HEAT, Rl, Dl, Dj, FALL][S.ph]) enter(S, (S.ph + 1) % 5);\n  const { ph, pt } = S;\n  // The water level and how hot the water is.\n  if (ph === 0) (S.wl = mix(S.wl0, BRIM, sm(0, 6, pt))), (S.T = mix(S.T0, 1, sm(0, HEAT, pt)));\n  else if (ph === 1) (S.wl = mix(S.wl0, BRIM, sm(0, 0.5, pt))), (S.T = mix(S.T0, 1, sm(0, 0.4, pt)));\n  else if (ph === 2) S.wl = BRIM;\n  else if (ph === 3) (S.wl = BRIM), (S.T = 1 - 0.65 * sm(0, Dj, pt));\n  else (S.wl = mix(S.wl0, LOW, sm(0.2, 2.6, pt)) + 1.6 * exp(-pt * 1.1) * sin(pt * 10) * sm(0.3, 0.8, pt)), (S.T = mix(S.T0, 0.25, sm(0, FALL, pt)));\n  // The pool heaves before it goes, the big bubble climbs, the dome swells.\n  S.hv = ph === 0 ? (1.1 + P) * sm(4.5, 7.5, pt) * sin(t * 4.2) ** 2 : ph === 1 ? 1 + (2.2 + P) * sm(0, Rl, pt) : 0;\n  S.big = ph === 1 ? mix(KY - KRY + 1, BOWL - 2, sm(0, Rl, pt) ** 1.4) : -1;\n  S.bw = 7.5 + 4 * P;\n  S.dh = ph === 2 ? (9 + 7 * P) * sm(0, Dl, pt) ** 0.8 + 0.5 * sin(pt * 30) : 0;\n\n  // Steam bubbles grow as they climb from the chamber's floor. They collapse\n  // in cooler water; once it is hot through they reach the pool and pop.\n  for (S.nb += d * (1.5 + 18 * S.T * S.T) * (ph === 3 ? 3 : ph === 4 ? 0.3 : 1) * (1 + 0.8 * P); S.nb >= 1; S.nb--)\n    if (S.bub.length \u003c 160) S.bub.push({ x: KX + (rnd() - 0.5) * KRX * 1.3, y: KY + KRY * (0.25 + 0.5 * rnd()), r: 0.4, v: 3 + 4 * rnd() });\n  const cr = ph > 0 && ph \u003c 4 ? -9 : mix(106, BOWL - 4, sm(0.35, 0.92, S.T));\n  for (const b of S.bub) {\n    const yi = cl(floor(b.y), 0, H - 1), inC = b.y \u003c KY - KRY + 1.5;\n    if (inC) (b.x += (CXA[yi] + 0.5 - b.x) * min(1, d * 8)), (b.v = min(32, b.v + 26 * d));\n    else (b.x += (KX - b.x) * d * 0.4 * sm(KY, KY - KRY, b.y) + sin(t * 3 + b.y) * d), (b.v = min(14, b.v + 8 * d));\n    b.y -= b.v * d * (ph === 3 ? 1.8 : 1);\n    b.r = min(inC ? (b.y \u003c BOWL ? 1.2 : CHW[yi] - 0.3) : 2.3, b.r + d * (0.3 + 0.7 * S.T));\n    if (b.y \u003c cr || (S.big > 0 && b.y > S.big && b.y \u003c S.big + 10)) b.dead = 1;\n    else if (b.y \u003c= S.wl + 0.5) {\n      b.dead = 1;\n      if (S.wl \u003c BOWL) {\n        S.pop = min(1.5, S.pop + 0.15 * b.r);\n        if (rnd() \u003c 0.5) puff(S, b.x + (rnd() - 0.5) * 8, S.wl - 2, 1.8, 0.3, -6, 3 + 2 * rnd(), 1, 5);\n      }\n    }\n  }\n  S.bub = S.bub.filter((b) => !b.dead);\n  S.pop *= exp(-3 * d);\n\n  // The jet: slabs of water fly up and spread; past the top they break up.\n  if (ph === 3) {\n    const u = pt / Dj, v = sqrt(2 * G * (64 + 46 * P)) * (1 - 0.25 * sm(0.7, 1, u)) * (1 - 0.6 * sm(0.45, 0.8, P) * exp(-(((u - 0.48) / 0.09) ** 2)));\n    for (S.np += d * v * 0.6; S.np >= 1; S.np--) S.par.push({ x: C + (rnd() - 0.5) * 1.2, y: BRIM - 1 - v * d * rnd(), vy: -v * (0.95 + 0.1 * rnd()), w: (3.5 + 3.5 * P) * (0.85 + 0.3 * rnd()), a: 1, ap: 0 });\n  }\n  for (const q of S.par) {\n    q.vy += G * d;\n    q.y += q.vy * d;\n    q.x += wind(S, q.y) * 0.35 * d;\n    q.w += d * (4.5 + 4.5 * P) * (q.ap ? 2 : 1);\n    if (!q.ap && q.vy > -25) {\n      q.ap = 1;\n      for (let n = 0; n \u003c 2; n++) spray(S, q.x + (rnd() - 0.5) * q.w * 2, q.y, (rnd() - 0.5) * 64, q.vy + (rnd() - 0.6) * 30);\n    }\n    if (rnd() \u003c d * 3) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      spray(S, q.x + sd * q.w, q.y, sd * (8 + 26 * rnd()), q.vy * 0.75);\n    }\n    if (q.ap) q.a -= d * 1.6;\n    if (q.y > BRIM || q.a \u003c= 0) q.dead = 1;\n  }\n  S.par = S.par.filter((q) => !q.dead);\n  // Steam boils off the column while it stands and a little after.\n  if (S.ja \u003c Dj + 0.8 && S.par.length)\n    for (S.ns += d * (40 + 40 * P); S.ns >= 1; S.ns--) {\n      const q = S.par[floor(rnd() * S.par.length)];\n      puff(S, q.x + (rnd() - 0.5) * q.w * 1.8, q.y, 2.5 + q.w * 0.6, 0.55 + 0.25 * rnd(), max(-30, q.vy * 0.3), 10 + 4 * rnd() + 3 * P, 2 + 1.5 * rnd(), 17 + 7 * P);\n    }\n  for (const s of S.spr) {\n    s.vy = min(90, s.vy + G * 0.85 * d);\n    s.vx *= 1 - 0.5 * d;\n    s.x += (s.vx + wind(S, s.y) * 0.5) * d;\n    s.y += s.vy * d;\n    s.life -= d;\n    const x = floor(s.x), y = floor(s.y);\n    if (s.life \u003c 0 || x \u003c 0 || x >= W || y >= H || (y >= 0 && S.kind[y * W + x] && s.vy > 0)) s.dead = 1;\n  }\n  S.spr = S.spr.filter((s) => !s.dead);\n\n  // Gentle steam off the pool, and from small vents out on the field.\n  const wet = S.wl \u003c BOWL - 1;\n  for (S.nv += d * (2 + (wet ? 4 + 5 * S.T : 1) * (1 + P)); S.nv >= 1; S.nv--)\n    if (rnd() \u003c 0.7) puff(S, C + (rnd() - 0.5) * (wet ? 20 : 6), (wet ? S.wl : BOWL) - 1, 1.6 + rnd(), 0.22 + 0.2 * rnd(), -(5 + 3 * rnd()), 4 + 2 * rnd(), 1, 6);\n    else {\n      const v = [[7, 67], [52, 64], [21, 63], [60, 70]][floor(rnd() * 4)];\n      puff(S, v[0] + rnd() - 0.5, v[1], 1.1, 0.3, -(4 + 2 * rnd()), 3.5 + 2 * rnd(), 0.8, 4);\n    }\n  for (const q of S.puffs) {\n    q.age += d;\n    q.vy += (q.rise - q.vy) * 1.2 * d;\n    q.y += q.vy * d;\n    q.x += (wind(S, q.y) + 1.2 * sin(q.age * 1.1 + q.ph)) * d;\n    q.r = min(q.rmax, q.r + q.gr * d);\n  }\n  S.puffs = S.puffs.filter((q) => q.age \u003c q.life && q.y + q.r > -6 && q.x > -26 && q.x \u003c W + 26);\n  S.ox += wind(S, 25) * 0.2 * d;\n  S.oy -= 0.6 * d;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.g, S.P, S.w] = [cl(k[0], 0, 1), cl(k[2], 0, 1), cl(k[3], -1, 1)];\n  if (!S.init) {\n    // Open on a steaming field with the last cloud still high up; the pool holds its phase.\n    for (let n = 0; n \u003c 18; n++) puff(S, -10 + n * 4 + rnd() * 4, 8 + 24 * rnd(), 6 + 4 * rnd(), 0.4 + 0.15 * rnd(), -2, 15 + 4 * rnd(), 0.8, 16), (S.puffs[n].age = 2 + 4 * rnd());\n    for (let n = 0; n \u003c 150; n++) step(S, 1 / 30, 1);\n    S.bub.length = S.pop = S.t = 0;\n    S.init = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === 0 || S.ph === 4)) enter(S, 1);\n  step(S, (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2);\n}\n\n// The view and the cut rock, kept until the light changes.\nfunction backdrop(S) {\n  const L = (S.L = lightAt(S.g)), BG = S.bg, R = S.rock, { amb, top, low } = L;\n  S.key = round(S.g * 60);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, k = S.kind[i];\n    let c;\n    if (k >= 2) c = k === 2 ? [R[o], R[o + 1], R[o + 2]] : [26, 28, 36];\n    else if (k === 1) {\n      // The far wall of the bowl, wet sinter.\n      const v = (0.75 + 0.3 * hash(x, y)) * (0.8 + 0.25 * vn(X * 0.5, Y * 0.9));\n      c = [62 * v, 86 * v, 90 * v];\n    }\n    if (c) c = sc(c, L.rock);\n    else if (S.sky[i]) {\n      const sd = hypot(X - 9, Y - 53), md = hypot(X - 13, Y - 15), v = (Y / HZ) ** 1.3;\n      const sg = L.sun * (0.6 * exp(-sd / 9) + (sd \u003c 1.7 ? 1.1 : 0)), ag = L.ag * exp(-(((Y - 58) / 9) ** 2)) * (1 - X / 80);\n      const mg = L.moon * ((md \u003c 2.4 ? 0.9 : 0) + 0.12 * exp(-md / 5)), st = hash(x, y) \u003c 0.013 && Y \u003c 52 ? L.stars * (90 + 140 * hash(y, x)) : 0;\n      c = top.map((a, n) => mix(a, low[n], v) + sg * [255, 206, 130][n] + ag * [110, 92, 168][n] + mg * [228, 230, 238][n] + st * [0.85, 0.9, 1][n]);\n    } else if (Y \u003c HZ) {\n      // The ice cap; snow and scree on the hill.\n      const sn = vn(x * 0.16, y * 0.3) + 0.35 * vn(x * 0.5, y * 0.8) - 0.01 * (Y - HILL[x]) > 0.55;\n      c = Y \u003c HILL[x] ? [222, 232, 246].map((a, n) => a * amb[n] * 0.92 + low[n] * 0.1) : sc(sn ? sc(SNOW, 0.74 + 0.004 * x) : [64, 60, 62], amb);\n    } else if (Y \u003c HZ + 1.5) c = sc([92, 100, 118], amb);\n    else {\n      // The flat field: snow, and bare warm ground near the springs.\n      const f = (Y - HZ) / (GY - HZ), b = 0.7 * sm(0.6, 0.66, vn((X * 0.1) / (0.35 + f), y * 0.6)) * sm(27, 10, abs(X - C));\n      c = SNOW.map((a, n) => mix(a * (0.8 + 0.2 * f), [112, 92, 70][n], b) * amb[n]);\n    }\n    for (let n = 0; n \u003c 3; n++) BG[o + n] = c[n];\n  }\n}\n\n// Add an elliptical blob to a density field.\nfunction splat(A, cx, cy, rx, ry, a) {\n  const y1 = min(H - 1, cy + ry), x0 = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx);\n  for (let y = max(0, floor(cy - ry)); y \u003c= y1; y++) {\n    const dy = (y + 0.5 - cy) / ry, dd = 1 - dy * dy;\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = (x + 0.5 - cx) / rx, e = dd - dx * dx;\n      if (e > 0) A[y * W + x] += a * e;\n    }\n  }\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], c[n], a);\n}\n\n// Shade a density field over the frame, lit on the side facing the light.\nfunction shade(S, A, k0, lit, dark, tint, jet) {\n  for (let i = 0; i \u003c N; i++) {\n    const v = A[i];\n    if (v \u003c 0.015) continue;\n    const x = i & 63, y = i >> 6, o = i * 3;\n    const tex = jet ? vn(x * 0.5, (y + S.t * 10) * 0.25) : vn(x * 0.18 - S.ox, y * 0.18 - S.oy);\n    const al = min(0.95, 1 - exp(-v * (k0 + 1.6 * tex))), gx = v - A[x > 1 && y > 1 ? i - (jet ? 2 : 2 * W + 2) : i];\n    const sh = cl(0.52 + (jet ? 0.9 : 0.5) * gx + 0.45 * (tex - 0.5), 0.12, 1.02), tt = jet ? sm(BRIM - 16, BRIM, y) * 0.6 : 0;\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], mix(mix(dark[n], lit[n], sh), jet ? tint[n] : 0, tt), al);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  if (S.key !== round(S.g * 60)) backdrop(S);\n  F = S.f;\n  F.set(S.bg);\n  const L = S.L, { t, kind, D, CB, ph, wl, T, P } = S, amb = L.amb, Lw = L.water, Lr = L.rock;\n\n  // Aurora: a green hem, rays rising into violet.\n  if (L.aur > 0.01)\n    for (let k = 0; k \u003c 2; k++)\n      for (let x = 0; x \u003c W; x++) {\n        const yb = 30 + 8 * k + 5 * sin(x * 0.08 + t * 0.22 + k * 2.1) + 8 * (vn(x * 0.07 + t * 0.12, k * 7) - 0.5);\n        const I = L.aur * sm(0.3, 0.75, vn(x * 0.09 - t * 0.1 + k * 3, t * 0.04 + k)) * (0.5 + 0.5 * vn(x * 0.7 + t * 0.5, k * 11 + t * 0.3));\n        if (I \u003c 0.02) continue;\n        for (let y = max(0, floor(yb - 26)); y \u003c= yb; y++) {\n          const i = y * W + x, u = (yb - y) / 26, e = I * (u \u003c 0.08 ? u / 0.08 : exp(-u * 2.2)) * 0.9, v = sm(0.35, 1, u);\n          if (S.sky[i]) (F[i * 3] += mix(40, 96, v) * e), (F[i * 3 + 1] += mix(214, 60, v) * e), (F[i * 3 + 2] += mix(120, 176, v) * e);\n        }\n      }\n\n  // The visitors behind the rope; once the dome rises most hold up a phone.\n  for (const p of S.ppl) {\n    const hy = GY - p.h, jc = sc(p.c, amb);\n    put(p.x, GY - 1, sc([30, 30, 36], amb));\n    for (let y = hy + 1; y \u003c GY - 1; y++) put(p.x, y, jc);\n    put(p.x, hy, p.hat ? jc : sc([226, 186, 160], amb));\n    if (p.up && S.ca > p.dl && S.ca \u003c 6 + p.dl) put(p.x + 1, hy, jc), put(p.x + 1, hy - 1, L.stars > 0.3 ? [180, 210, 255] : [40, 40, 50]);\n  }\n  for (const x of [1, 8, 15, 49, 56, 63]) for (let y = GY - 3; y \u003c GY; y++) put(x, y, sc([70, 56, 40], amb));\n  for (let x = 1; x \u003c 64; x++) if (x \u003c 16 || x > 48) put(x, GY - 3 + (sin(((x - 1) / 7) * Math.PI) > 0.2 ? 1 : 0), sc([214, 184, 64], amb), 0.8);\n\n  // All the steam, summed and shaded.\n  D.fill(0);\n  for (const q of S.puffs) {\n    const a = q.a * sm(0, 0.4, q.age) * (1 - sm(q.life * 0.45, q.life, q.age));\n    if (a > 0.01) splat(D, q.x, q.y, q.r, q.r, a);\n  }\n  shade(S, D, 1.1, L.lit, L.dark);\n\n  // The pool in section, its heave, ripples and dome.\n  const foam = ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1.2, S.pt) : 0;\n  for (let x = 20; x \u003c 44; x++) {\n    const dx = x + 0.5 - C;\n    let top = wl - S.hv * max(0, 1 - (dx / 10) ** 2) + S.pop * sin(x * 1.3 - t * 14) * 0.6 + foam * 1.5 * (hash(x, floor(t * 20)) - 0.5);\n    const dome = S.dh > 0 && abs(dx) \u003c S.bw ? S.dh * (1 - (dx / S.bw) ** 2) ** 0.75 : 0;\n    if (dome) top = min(top, BRIM - dome);\n    for (let y = max(0, floor(top)); y \u003c SURF[x]; y++) {\n      const z = y + 0.5 - top;\n      if (z \u003c 0 || (kind[y * W + x] !== 1 && y >= BRIM)) continue;\n      let c;\n      if (dome && y \u003c BRIM) {\n        const nx = dx / S.bw, ny = (BRIM - y) / (S.dh + 0.1), sp = exp(-((nx + 0.42) ** 2) / 0.03 - (ny - 0.6) ** 2 / 0.08);\n        c = [40, 150, 176].map((v, n) => (mix(v, [110, 226, 230][n], ny * 0.8 + 0.3 * abs(nx)) * (0.85 + 0.25 * vn(x * 0.5, y * 0.5 - t * 6)) + 150 * sp + (z \u003c 1 ? 70 : 0)) * Lw);\n      } else if (z \u003c 1) c = sc([150, 224, 226], Lw);\n      else c = [60, 190, 200].map((v, n) => mix(v, [18, 70, 140][n], sm(0, 10, z)) * Lw * (0.88 + 0.24 * vn(x * 0.45 + t * 0.6, y * 0.7 - t * 0.4)));\n      if (foam && z \u003c 3 && hash(x, y + floor(t * 25)) \u003c 0.6 * foam) c = sc(FOAM, Lw);\n      put(x, y, c);\n    }\n  }\n\n  // The column and its spray.\n  CB.fill(0);\n  for (const q of S.par) splat(CB, q.x, q.y, q.w, 2.8, q.a);\n  if (S.par.length) shade(S, CB, 1.8, L.lit.map((v) => min(240, v * 1.04)), L.dark, [70 * Lw, 200 * Lw, 212 * Lw], 1);\n  for (const s of S.spr) {\n    const a = min(1, s.life * 1.5) * 0.85;\n    put(s.x - s.vx * 0.02, s.y - s.vy * 0.02, L.lit, a * 0.35);\n    put(s.x, s.y, L.lit, a);\n  }\n\n  // Under the ground: the conduit, the chamber and the cracks feeding it.\n  const froth = ph === 3 ? 1 - 0.5 * sm(0.6, 1, S.pt / (1.1 + 1.1 * P)) : ph === 2 ? 0.3 : ph === 1 ? 0.12 : 0;\n  const inflow = ph === 0 ? 1 - sm(4, 6.5, S.pt) * 0.8 : ph === 4 ? sm(1, 3, S.pt) : 0.2;\n  for (const i of S.cav) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = kind[i];\n    let r, g, b;\n    if (k === 4) {\n      const p = inflow * sm(0.55, 1, sin(S.fu[i] * 0.7 - t * 7));\n      (r = 20 + 80 * p), (g = 46 + 130 * p), (b = 104 + 110 * p);\n    } else if (k === 3 && y + 0.5 \u003c wl) {\n      // Drained: wet walls with a film running down.\n      const f = ph === 4 && hash(x, floor(y - t * 26)) \u003c 0.12;\n      (r = f ? 70 : 30), (g = f ? 104 : 33), (b = f ? 124 : 42);\n    } else if (froth && hash(x, floor(y + t * 80)) \u003c froth * (k === 5 ? 0.4 : 0.55)) [r, g, b] = FOAM;\n    else {\n      // Cool water blue, hot water turquoise.\n      const Tl = cl(T * (0.7 + 0.3 * sm(BOWL, KY + KRY, y)) + (k === 5 ? 0.08 : 0), 0, 1), sh = (0.86 + 0.28 * vn(x * 0.6, y * 0.3 + t * 2)) * (k === 3 && y === floor(wl) ? 1.3 : 1);\n      (r = mix(COOL[0], HOT[0], Tl) * sh), (g = mix(COOL[1], HOT[1], Tl) * sh), (b = mix(COOL[2], HOT[2], Tl) * sh);\n    }\n    (F[o] = r * Lr), (F[o + 1] = g * Lr), (F[o + 2] = b * Lr);\n  }\n  for (const { x, y, r } of S.bub)\n    if (r \u003c 0.9) put(x, y, FOAM, 0.85);\n    else\n      for (let v = floor(y - r); v \u003c= y + r; v++)\n        for (let u = floor(x - r); u \u003c= x + r; u++) {\n          const e = hypot(u + 0.5 - x, v + 0.5 - y) / r;\n          if (e \u003c 1) put(u, v, e > 0.6 ? [150, 220, 230] : FOAM, 0.9);\n        }\n  if (S.big > 0)\n    for (let y = floor(S.big); y \u003c S.big + 10; y++) {\n      const cx = CXA[y] + 0.5, hw = CHW[y] * min(1, 0.5 + 0.5 * (y + 1 - S.big)) - 0.3;\n      for (let x = floor(cx - hw); x \u003c cx + hw; x++) put(x, y, abs(x + 0.5 - cx) > hw - 1 ? [160, 236, 240] : [236, 246, 248], 0.97);\n    }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-geyser","type":"code","name":"geyser","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Geyser\n// Family:  volcano\n// Idea:    A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after Strokkur in the Haukadalur geothermal field, Iceland\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1\n//\n// Knob 1: Light. A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing.\n// Knob 2: Speed. At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer.\n// Knob 3: Power. At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows.\n// Knob 4: Wind. At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it.\n// Buttons: K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst sc = (c, k) => c.map((v, n) => v * (k.length ? k[n] : k));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the pool's brim, the bowl's floor, the snow on the flat, the horizon,\n// the drained water level; the vent's column; the chamber's centre and radii.\nconst [BRIM, BOWL, GY, HZ, LOW, C] = [71, 80, 75, 61, 103, 32];\nconst [KX, KY, KRX, KRY] = [30.5, 116, 10, 6.5];\n// Gravity in rows per second squared.\nconst G = 150;\n// Seconds at Speed 2: refill, the big bubble's climb, the dome, the drain.\nconst [HEAT, RISE, DOME, FALL] = [7.5, 0.7, 0.45, 3.5];\n\n// The ground: the bowl, the sinter mound with a lip at the brim, the flat.\nconst SURF = new Float32Array(W).map((_, x) => {\n  const dx = abs(x + 0.5 - C);\n  if (dx \u003c 12) return BRIM + (BOWL - BRIM) * (1 - (dx / 12) ** 2) ** 0.7;\n  if (dx \u003c 27) return BRIM - 0.8 * (1 - sm(12, 16, dx)) + (GY - BRIM) * sm(14, 27, dx);\n  return GY + 0.8 * (vn(x * 0.2, 3) - 0.5);\n});\n// The conduit wanders a little and narrows at row 95.\nconst CXA = new Float32Array(H).map((_, y) => C - 0.5 + 0.8 * sin(y * 0.23) + 0.4 * sin(y * 0.61 + 1));\nconst CHW = new Float32Array(H).map((_, y) => 2 + 0.4 * sin(y * 0.37) - 0.6 * exp(-(((y - 95) / 3) ** 2)));\n// The hill behind the field on the right, the ice cap on the horizon at the left.\nconst HILL = new Float32Array(W).map((_, x) => HZ - 20 * sm(30, 66, x) ** 0.9 - 1.2 * vn(x * 0.35, 4));\nconst CAP = new Float32Array(W).map((_, x) => HZ - 1.5 - 2.6 * sqrt(max(0, 1 - ((x + 0.5 - 13) / 17) ** 2)));\n// Cracks feeding ground water to the chamber.\nconst FIS = [[[0, 94], [7, 98], [15, 104], [22, 112]], [[63, 103], [55, 108], [47, 113], [40, 117]]];\n// The beds, top down, colour and rows: sinter, geyserite, ochre, sinter, rust,\n// sulphur, grey clay, ochre, dark rust, tuff, sulphur, dark clay, basalt.\nconst LAY = [[206, 200, 186, 3], [176, 172, 166, 2], [172, 122, 54, 2], [196, 188, 172, 2], [150, 70, 40, 3], [206, 182, 62, 1], [126, 116, 108, 4], [162, 112, 52, 2], [120, 56, 36, 2], [104, 92, 84, 4], [200, 176, 64, 1], [84, 74, 72, 5], [58, 58, 68, 99]];\nconst SULF = [214, 190, 70], RUST = [158, 76, 42], LINE = [214, 210, 196], SNOW = [214, 222, 236];\nconst MAT = [[96, 116, 52], [214, 112, 38], [212, 186, 70]];\nconst COOL = [24, 62, 150], HOT = [44, 176, 204], FOAM = [212, 232, 236];\nconst JACK = [[200, 46, 40], [232, 192, 44], [40, 92, 200], [44, 44, 52], [58, 140, 92], [222, 112, 34], [150, 60, 150]];\n\n// Noon, blue hour, night: sky overhead and at the horizon, daylight, steam lit\n// and in shade, the cut rock, the water.\nconst LIGHT = [\n  [0, [20, 62, 152], [122, 156, 198], [0.95, 0.93, 0.88], [236, 234, 226], [118, 134, 168], 1, 1],\n  [0.5, [10, 24, 74], [66, 88, 148], [0.42, 0.48, 0.7], [158, 168, 212], [50, 60, 108], 0.85, 0.78],\n  [1, [3, 7, 24], [12, 26, 54], [0.24, 0.3, 0.42], [132, 154, 168], [30, 42, 70], 0.62, 0.6],\n];\nfunction lightAt(g) {\n  const a = LIGHT[g > 0.5 ? 1 : 0], b = LIGHT[g > 0.5 ? 2 : 1], u = (g - a[0]) / (b[0] - a[0]);\n  const m = (k) => (a[k].length ? a[k].map((v, c) => mix(v, b[k][c], u)) : mix(a[k], b[k], u));\n  return { top: m(1), low: m(2), amb: m(3), lit: m(4), dark: m(5), rock: m(6), water: m(7), sun: 1 - sm(0, 0.4, g), ag: sm(0.15, 0.45, g) * (1 - sm(0.55, 0.85, g)), moon: sm(0.6, 0.95, g), stars: sm(0.4, 0.85, g), aur: sm(0.6, 0.95, g) };\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), bg: F32(N * 3), rock: F32(N * 3), kind: new Uint8Array(N), sky: new Uint8Array(N), fu: F32(N), D: F32(N), CB: F32(N),\n    t: 0, ph: 0, pt: HEAT - 1.25, wl: BRIM, wl0: LOW, T: 0.9, T0: 0.25, hv: 0, dh: 0, bw: 6, key: -1, ca: 99, ja: 99,\n    bub: [], par: [], spr: [], puffs: [], pop: 0, nb: 0, np: 0, ns: 0, nv: 0, ox: 0, oy: 0, big: -1,\n  });\n  const { kind, fu, rock } = S;\n  // Kinds: 0 the view, 1 the bowl, 2 rock, 3 conduit, 4 crack, 5 chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5;\n    let k = Y >= SURF[x] ? 2 : abs(X - C) \u003c 12 && Y >= BRIM ? 1 : 0;\n    if (k === 2 && ((X - KX) / KRX) ** 2 + ((Y - KY) / KRY) ** 2 \u003c 1 + 0.5 * (vn(X * 0.35, Y * 0.35) - 0.5)) k = 5;\n    else if (k === 2 && y \u003c KY && abs(X - CXA[y]) \u003c CHW[y]) k = 3;\n    kind[i] = k;\n    if (!k && Y \u003c min(HILL[x], CAP[x])) S.sky[i] = 1;\n  }\n  for (const p of FIS)\n    for (let j = 1, len = 0; j \u003c p.length; j++) {\n      const [x0, y0] = p[j - 1], [x1, y1] = p[j], n = hypot(x1 - x0, y1 - y0) * 3;\n      for (let u = 0; u \u003c= n; u++) {\n        const i = floor(mix(y0, y1, u / n)) * W + floor(mix(x0, x1, u / n));\n        if (kind[i] === 2) (kind[i] = 4), (fu[i] = len + u / 3);\n      }\n      len += n / 3;\n    }\n  // The cut rock: beds bend with the ground, a silica lining and sulphur and\n  // rust stains round every water way, columnar basalt below, bacterial mats\n  // on the mound and snow on the flat.\n  const cav = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, dx = abs(X - C), s = SURF[x];\n    if (kind[i] >= 3) cav.push(i);\n    if (kind[i] !== 2) continue;\n    let d = Y - s + 2.4 * (vn(x * 0.08, y * 0.06 + 9) - 0.5) + 0.05 * (X - C), j = 0, dist = 9, gr = 0.9 + 0.18 * hash(x, y + 77);\n    while (d > LAY[j][3] && j \u003c LAY.length - 1) (d -= LAY[j][3]), j++;\n    let c = LAY[j];\n    if (j === LAY.length - 1) {\n      const jx = (X + 3 * vn(1.7, Y * 0.12)) / 6;\n      gr *= (jx - floor(jx) \u003c 0.17 ? 0.6 : 1) * (0.85 + 0.3 * hash(floor(jx), 5));\n    }\n    for (let v = -5; v \u003c= 5; v++)\n      for (let u = -5; u \u003c= 5; u++) {\n        const xx = x + u, yy = y + v, k = xx >= 0 && xx \u003c W && yy \u003c H ? kind[yy * W + xx] : 2;\n        if (k !== 2 && k) dist = min(dist, hypot(u, v) * (k === 4 ? 2.5 : 1));\n      }\n    if (dist \u003c 1.5) c = LINE;\n    else if (dist \u003c 5) c = c.map((v, n) => mix(v, (dist \u003c 3 ? SULF : RUST)[n], (5 - dist) * 0.17));\n    if (dx > 13 && dx \u003c 26 && Y - s \u003c 1.4) c = MAT[floor(cl(vn(X * 0.45, 2) * 2.2 - 0.3, 0, 2.99))];\n    if (dx >= 26 && Y - s \u003c 1.5) c = SNOW;\n    for (let n = 0; n \u003c 3; n++) rock[i * 3 + n] = c[n] * gr;\n  }\n  S.cav = Int32Array.from(cav);\n  // Visitors behind the rope on both sides, in their parkas.\n  S.ppl = [];\n  for (const [x0, x1] of [[2, 18], [46, 62]])\n    for (let x = x0 + rnd() * 2; x \u003c x1; x += 2.2 + rnd() * 2.4)\n      S.ppl.push({ x: floor(x), h: rnd() \u003c 0.3 ? 5 : 4, c: JACK[floor(rnd() * 7)], hat: rnd() \u003c 0.5, dl: rnd() * 0.9, up: rnd() \u003c 0.7 });\n}\n\n// The breeze in columns per second at row y, stronger aloft.\nconst wind = (S, y) => (6 + 16 * S.w) * (0.35 + 0.65 * sm(80, 8, y));\nfunction puff(S, x, y, r, a, vy, life, gr, rmax) {\n  if (S.puffs.length > 210) S.puffs.shift();\n  S.puffs.push({ x, y, r, a, vy, rise: -(1 + 2.5 * rnd()), life, gr, rmax, age: 0, ph: rnd() * 7 });\n}\nconst spray = (S, x, y, vx, vy) => S.spr.length \u003c 700 && S.spr.push({ x, y, vx, vy, life: 2.5 });\n\nfunction enter(S, ph) {\n  Object.assign(S, { ph, pt: 0, wl0: S.wl, T0: S.T });\n  if (ph === 2) S.ca = 0;\n  if (ph === 3) {\n    // The dome tears open in a ring of spray.\n    S.ja = 0;\n    for (let n = 0; n \u003c 40; n++) spray(S, C + (rnd() - 0.5) * S.bw * 1.6, BRIM - S.dh * rnd(), (rnd() - 0.5) * 70, -(40 + 90 * rnd()));\n    for (let n = 0; n \u003c 6; n++) puff(S, C + (rnd() - 0.5) * 12, BRIM - 3 - 4 * rnd(), 3 + rnd() * 2, 0.6, -(10 + 10 * rnd()), 8 + 3 * rnd(), 1.5, 12 + 6 * S.P);\n  }\n}\n\nfunction step(S, d, hold) {\n  const P = S.P, Dj = 1.1 + 1.1 * P, Rl = RISE - 0.35 * P, Dl = DOME - 0.2 * P, t = (S.t += d);\n  if (!hold) (S.pt += d), (S.ca += d), (S.ja += d);\n  if (S.pt >= [HEAT, Rl, Dl, Dj, FALL][S.ph]) enter(S, (S.ph + 1) % 5);\n  const { ph, pt } = S;\n  // The water level and how hot the water is.\n  if (ph === 0) (S.wl = mix(S.wl0, BRIM, sm(0, 6, pt))), (S.T = mix(S.T0, 1, sm(0, HEAT, pt)));\n  else if (ph === 1) (S.wl = mix(S.wl0, BRIM, sm(0, 0.5, pt))), (S.T = mix(S.T0, 1, sm(0, 0.4, pt)));\n  else if (ph === 2) S.wl = BRIM;\n  else if (ph === 3) (S.wl = BRIM), (S.T = 1 - 0.65 * sm(0, Dj, pt));\n  else (S.wl = mix(S.wl0, LOW, sm(0.2, 2.6, pt)) + 1.6 * exp(-pt * 1.1) * sin(pt * 10) * sm(0.3, 0.8, pt)), (S.T = mix(S.T0, 0.25, sm(0, FALL, pt)));\n  // The pool heaves before it goes, the big bubble climbs, the dome swells.\n  S.hv = ph === 0 ? (1.1 + P) * sm(4.5, 7.5, pt) * sin(t * 4.2) ** 2 : ph === 1 ? 1 + (2.2 + P) * sm(0, Rl, pt) : 0;\n  S.big = ph === 1 ? mix(KY - KRY + 1, BOWL - 2, sm(0, Rl, pt) ** 1.4) : -1;\n  S.bw = 7.5 + 4 * P;\n  S.dh = ph === 2 ? (9 + 7 * P) * sm(0, Dl, pt) ** 0.8 + 0.5 * sin(pt * 30) : 0;\n\n  // Steam bubbles grow as they climb from the chamber's floor. They collapse\n  // in cooler water; once it is hot through they reach the pool and pop.\n  for (S.nb += d * (1.5 + 18 * S.T * S.T) * (ph === 3 ? 3 : ph === 4 ? 0.3 : 1) * (1 + 0.8 * P); S.nb >= 1; S.nb--)\n    if (S.bub.length \u003c 160) S.bub.push({ x: KX + (rnd() - 0.5) * KRX * 1.3, y: KY + KRY * (0.25 + 0.5 * rnd()), r: 0.4, v: 3 + 4 * rnd() });\n  const cr = ph > 0 && ph \u003c 4 ? -9 : mix(106, BOWL - 4, sm(0.35, 0.92, S.T));\n  for (const b of S.bub) {\n    const yi = cl(floor(b.y), 0, H - 1), inC = b.y \u003c KY - KRY + 1.5;\n    if (inC) (b.x += (CXA[yi] + 0.5 - b.x) * min(1, d * 8)), (b.v = min(32, b.v + 26 * d));\n    else (b.x += (KX - b.x) * d * 0.4 * sm(KY, KY - KRY, b.y) + sin(t * 3 + b.y) * d), (b.v = min(14, b.v + 8 * d));\n    b.y -= b.v * d * (ph === 3 ? 1.8 : 1);\n    b.r = min(inC ? (b.y \u003c BOWL ? 1.2 : CHW[yi] - 0.3) : 2.3, b.r + d * (0.3 + 0.7 * S.T));\n    if (b.y \u003c cr || (S.big > 0 && b.y > S.big && b.y \u003c S.big + 10)) b.dead = 1;\n    else if (b.y \u003c= S.wl + 0.5) {\n      b.dead = 1;\n      if (S.wl \u003c BOWL) {\n        S.pop = min(1.5, S.pop + 0.15 * b.r);\n        if (rnd() \u003c 0.5) puff(S, b.x + (rnd() - 0.5) * 8, S.wl - 2, 1.8, 0.3, -6, 3 + 2 * rnd(), 1, 5);\n      }\n    }\n  }\n  S.bub = S.bub.filter((b) => !b.dead);\n  S.pop *= exp(-3 * d);\n\n  // The jet: slabs of water fly up and spread; past the top they break up.\n  if (ph === 3) {\n    const u = pt / Dj, v = sqrt(2 * G * (64 + 46 * P)) * (1 - 0.25 * sm(0.7, 1, u)) * (1 - 0.6 * sm(0.45, 0.8, P) * exp(-(((u - 0.48) / 0.09) ** 2)));\n    for (S.np += d * v * 0.6; S.np >= 1; S.np--) S.par.push({ x: C + (rnd() - 0.5) * 1.2, y: BRIM - 1 - v * d * rnd(), vy: -v * (0.95 + 0.1 * rnd()), w: (3.5 + 3.5 * P) * (0.85 + 0.3 * rnd()), a: 1, ap: 0 });\n  }\n  for (const q of S.par) {\n    q.vy += G * d;\n    q.y += q.vy * d;\n    q.x += wind(S, q.y) * 0.35 * d;\n    q.w += d * (4.5 + 4.5 * P) * (q.ap ? 2 : 1);\n    if (!q.ap && q.vy > -25) {\n      q.ap = 1;\n      for (let n = 0; n \u003c 2; n++) spray(S, q.x + (rnd() - 0.5) * q.w * 2, q.y, (rnd() - 0.5) * 64, q.vy + (rnd() - 0.6) * 30);\n    }\n    if (rnd() \u003c d * 3) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      spray(S, q.x + sd * q.w, q.y, sd * (8 + 26 * rnd()), q.vy * 0.75);\n    }\n    if (q.ap) q.a -= d * 1.6;\n    if (q.y > BRIM || q.a \u003c= 0) q.dead = 1;\n  }\n  S.par = S.par.filter((q) => !q.dead);\n  // Steam boils off the column while it stands and a little after.\n  if (S.ja \u003c Dj + 0.8 && S.par.length)\n    for (S.ns += d * (40 + 40 * P); S.ns >= 1; S.ns--) {\n      const q = S.par[floor(rnd() * S.par.length)];\n      puff(S, q.x + (rnd() - 0.5) * q.w * 1.8, q.y, 2.5 + q.w * 0.6, 0.55 + 0.25 * rnd(), max(-30, q.vy * 0.3), 10 + 4 * rnd() + 3 * P, 2 + 1.5 * rnd(), 17 + 7 * P);\n    }\n  for (const s of S.spr) {\n    s.vy = min(90, s.vy + G * 0.85 * d);\n    s.vx *= 1 - 0.5 * d;\n    s.x += (s.vx + wind(S, s.y) * 0.5) * d;\n    s.y += s.vy * d;\n    s.life -= d;\n    const x = floor(s.x), y = floor(s.y);\n    if (s.life \u003c 0 || x \u003c 0 || x >= W || y >= H || (y >= 0 && S.kind[y * W + x] && s.vy > 0)) s.dead = 1;\n  }\n  S.spr = S.spr.filter((s) => !s.dead);\n\n  // Gentle steam off the pool, and from small vents out on the field.\n  const wet = S.wl \u003c BOWL - 1;\n  for (S.nv += d * (2 + (wet ? 4 + 5 * S.T : 1) * (1 + P)); S.nv >= 1; S.nv--)\n    if (rnd() \u003c 0.7) puff(S, C + (rnd() - 0.5) * (wet ? 20 : 6), (wet ? S.wl : BOWL) - 1, 1.6 + rnd(), 0.22 + 0.2 * rnd(), -(5 + 3 * rnd()), 4 + 2 * rnd(), 1, 6);\n    else {\n      const v = [[7, 67], [52, 64], [21, 63], [60, 70]][floor(rnd() * 4)];\n      puff(S, v[0] + rnd() - 0.5, v[1], 1.1, 0.3, -(4 + 2 * rnd()), 3.5 + 2 * rnd(), 0.8, 4);\n    }\n  for (const q of S.puffs) {\n    q.age += d;\n    q.vy += (q.rise - q.vy) * 1.2 * d;\n    q.y += q.vy * d;\n    q.x += (wind(S, q.y) + 1.2 * sin(q.age * 1.1 + q.ph)) * d;\n    q.r = min(q.rmax, q.r + q.gr * d);\n  }\n  S.puffs = S.puffs.filter((q) => q.age \u003c q.life && q.y + q.r > -6 && q.x > -26 && q.x \u003c W + 26);\n  S.ox += wind(S, 25) * 0.2 * d;\n  S.oy -= 0.6 * d;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.g, S.P, S.w] = [cl(k[0], 0, 1), cl(k[2], 0, 1), cl(k[3], -1, 1)];\n  if (!S.init) {\n    // Open on a steaming field with the last cloud still high up; the pool holds its phase.\n    for (let n = 0; n \u003c 18; n++) puff(S, -10 + n * 4 + rnd() * 4, 8 + 24 * rnd(), 6 + 4 * rnd(), 0.4 + 0.15 * rnd(), -2, 15 + 4 * rnd(), 0.8, 16), (S.puffs[n].age = 2 + 4 * rnd());\n    for (let n = 0; n \u003c 150; n++) step(S, 1 / 30, 1);\n    S.bub.length = S.pop = S.t = 0;\n    S.init = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === 0 || S.ph === 4)) enter(S, 1);\n  step(S, (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2);\n}\n\n// The view and the cut rock, kept until the light changes.\nfunction backdrop(S) {\n  const L = (S.L = lightAt(S.g)), BG = S.bg, R = S.rock, { amb, top, low } = L;\n  S.key = round(S.g * 60);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, k = S.kind[i];\n    let c;\n    if (k >= 2) c = k === 2 ? [R[o], R[o + 1], R[o + 2]] : [26, 28, 36];\n    else if (k === 1) {\n      // The far wall of the bowl, wet sinter.\n      const v = (0.75 + 0.3 * hash(x, y)) * (0.8 + 0.25 * vn(X * 0.5, Y * 0.9));\n      c = [62 * v, 86 * v, 90 * v];\n    }\n    if (c) c = sc(c, L.rock);\n    else if (S.sky[i]) {\n      const sd = hypot(X - 9, Y - 53), md = hypot(X - 13, Y - 15), v = (Y / HZ) ** 1.3;\n      const sg = L.sun * (0.6 * exp(-sd / 9) + (sd \u003c 1.7 ? 1.1 : 0)), ag = L.ag * exp(-(((Y - 58) / 9) ** 2)) * (1 - X / 80);\n      const mg = L.moon * ((md \u003c 2.4 ? 0.9 : 0) + 0.12 * exp(-md / 5)), st = hash(x, y) \u003c 0.013 && Y \u003c 52 ? L.stars * (90 + 140 * hash(y, x)) : 0;\n      c = top.map((a, n) => mix(a, low[n], v) + sg * [255, 206, 130][n] + ag * [110, 92, 168][n] + mg * [228, 230, 238][n] + st * [0.85, 0.9, 1][n]);\n    } else if (Y \u003c HZ) {\n      // The ice cap; snow and scree on the hill.\n      const sn = vn(x * 0.16, y * 0.3) + 0.35 * vn(x * 0.5, y * 0.8) - 0.01 * (Y - HILL[x]) > 0.55;\n      c = Y \u003c HILL[x] ? [222, 232, 246].map((a, n) => a * amb[n] * 0.92 + low[n] * 0.1) : sc(sn ? sc(SNOW, 0.74 + 0.004 * x) : [64, 60, 62], amb);\n    } else if (Y \u003c HZ + 1.5) c = sc([92, 100, 118], amb);\n    else {\n      // The flat field: snow, and bare warm ground near the springs.\n      const f = (Y - HZ) / (GY - HZ), b = 0.7 * sm(0.6, 0.66, vn((X * 0.1) / (0.35 + f), y * 0.6)) * sm(27, 10, abs(X - C));\n      c = SNOW.map((a, n) => mix(a * (0.8 + 0.2 * f), [112, 92, 70][n], b) * amb[n]);\n    }\n    for (let n = 0; n \u003c 3; n++) BG[o + n] = c[n];\n  }\n}\n\n// Add an elliptical blob to a density field.\nfunction splat(A, cx, cy, rx, ry, a) {\n  const y1 = min(H - 1, cy + ry), x0 = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx);\n  for (let y = max(0, floor(cy - ry)); y \u003c= y1; y++) {\n    const dy = (y + 0.5 - cy) / ry, dd = 1 - dy * dy;\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = (x + 0.5 - cx) / rx, e = dd - dx * dx;\n      if (e > 0) A[y * W + x] += a * e;\n    }\n  }\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], c[n], a);\n}\n\n// Shade a density field over the frame, lit on the side facing the light.\nfunction shade(S, A, k0, lit, dark, tint, jet) {\n  for (let i = 0; i \u003c N; i++) {\n    const v = A[i];\n    if (v \u003c 0.015) continue;\n    const x = i & 63, y = i >> 6, o = i * 3;\n    const tex = jet ? vn(x * 0.5, (y + S.t * 10) * 0.25) : vn(x * 0.18 - S.ox, y * 0.18 - S.oy);\n    const al = min(0.95, 1 - exp(-v * (k0 + 1.6 * tex))), gx = v - A[x > 1 && y > 1 ? i - (jet ? 2 : 2 * W + 2) : i];\n    const sh = cl(0.52 + (jet ? 0.9 : 0.5) * gx + 0.45 * (tex - 0.5), 0.12, 1.02), tt = jet ? sm(BRIM - 16, BRIM, y) * 0.6 : 0;\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], mix(mix(dark[n], lit[n], sh), jet ? tint[n] : 0, tt), al);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  if (S.key !== round(S.g * 60)) backdrop(S);\n  F = S.f;\n  F.set(S.bg);\n  const L = S.L, { t, kind, D, CB, ph, wl, T, P } = S, amb = L.amb, Lw = L.water, Lr = L.rock;\n\n  // Aurora: a green hem, rays rising into violet.\n  if (L.aur > 0.01)\n    for (let k = 0; k \u003c 2; k++)\n      for (let x = 0; x \u003c W; x++) {\n        const yb = 30 + 8 * k + 5 * sin(x * 0.08 + t * 0.22 + k * 2.1) + 8 * (vn(x * 0.07 + t * 0.12, k * 7) - 0.5);\n        const I = L.aur * sm(0.3, 0.75, vn(x * 0.09 - t * 0.1 + k * 3, t * 0.04 + k)) * (0.5 + 0.5 * vn(x * 0.7 + t * 0.5, k * 11 + t * 0.3));\n        if (I \u003c 0.02) continue;\n        for (let y = max(0, floor(yb - 26)); y \u003c= yb; y++) {\n          const i = y * W + x, u = (yb - y) / 26, e = I * (u \u003c 0.08 ? u / 0.08 : exp(-u * 2.2)) * 0.9, v = sm(0.35, 1, u);\n          if (S.sky[i]) (F[i * 3] += mix(40, 96, v) * e), (F[i * 3 + 1] += mix(214, 60, v) * e), (F[i * 3 + 2] += mix(120, 176, v) * e);\n        }\n      }\n\n  // The visitors behind the rope; once the dome rises most hold up a phone.\n  for (const p of S.ppl) {\n    const hy = GY - p.h, jc = sc(p.c, amb);\n    put(p.x, GY - 1, sc([30, 30, 36], amb));\n    for (let y = hy + 1; y \u003c GY - 1; y++) put(p.x, y, jc);\n    put(p.x, hy, p.hat ? jc : sc([226, 186, 160], amb));\n    if (p.up && S.ca > p.dl && S.ca \u003c 6 + p.dl) put(p.x + 1, hy, jc), put(p.x + 1, hy - 1, L.stars > 0.3 ? [180, 210, 255] : [40, 40, 50]);\n  }\n  for (const x of [1, 8, 15, 49, 56, 63]) for (let y = GY - 3; y \u003c GY; y++) put(x, y, sc([70, 56, 40], amb));\n  for (let x = 1; x \u003c 64; x++) if (x \u003c 16 || x > 48) put(x, GY - 3 + (sin(((x - 1) / 7) * Math.PI) > 0.2 ? 1 : 0), sc([214, 184, 64], amb), 0.8);\n\n  // All the steam, summed and shaded.\n  D.fill(0);\n  for (const q of S.puffs) {\n    const a = q.a * sm(0, 0.4, q.age) * (1 - sm(q.life * 0.45, q.life, q.age));\n    if (a > 0.01) splat(D, q.x, q.y, q.r, q.r, a);\n  }\n  shade(S, D, 1.1, L.lit, L.dark);\n\n  // The pool in section, its heave, ripples and dome.\n  const foam = ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1.2, S.pt) : 0;\n  for (let x = 20; x \u003c 44; x++) {\n    const dx = x + 0.5 - C;\n    let top = wl - S.hv * max(0, 1 - (dx / 10) ** 2) + S.pop * sin(x * 1.3 - t * 14) * 0.6 + foam * 1.5 * (hash(x, floor(t * 20)) - 0.5);\n    const dome = S.dh > 0 && abs(dx) \u003c S.bw ? S.dh * (1 - (dx / S.bw) ** 2) ** 0.75 : 0;\n    if (dome) top = min(top, BRIM - dome);\n    for (let y = max(0, floor(top)); y \u003c SURF[x]; y++) {\n      const z = y + 0.5 - top;\n      if (z \u003c 0 || (kind[y * W + x] !== 1 && y >= BRIM)) continue;\n      let c;\n      if (dome && y \u003c BRIM) {\n        const nx = dx / S.bw, ny = (BRIM - y) / (S.dh + 0.1), sp = exp(-((nx + 0.42) ** 2) / 0.03 - (ny - 0.6) ** 2 / 0.08);\n        c = [40, 150, 176].map((v, n) => (mix(v, [110, 226, 230][n], ny * 0.8 + 0.3 * abs(nx)) * (0.85 + 0.25 * vn(x * 0.5, y * 0.5 - t * 6)) + 150 * sp + (z \u003c 1 ? 70 : 0)) * Lw);\n      } else if (z \u003c 1) c = sc([150, 224, 226], Lw);\n      else c = [60, 190, 200].map((v, n) => mix(v, [18, 70, 140][n], sm(0, 10, z)) * Lw * (0.88 + 0.24 * vn(x * 0.45 + t * 0.6, y * 0.7 - t * 0.4)));\n      if (foam && z \u003c 3 && hash(x, y + floor(t * 25)) \u003c 0.6 * foam) c = sc(FOAM, Lw);\n      put(x, y, c);\n    }\n  }\n\n  // The column and its spray.\n  CB.fill(0);\n  for (const q of S.par) splat(CB, q.x, q.y, q.w, 2.8, q.a);\n  if (S.par.length) shade(S, CB, 1.8, L.lit.map((v) => min(240, v * 1.04)), L.dark, [70 * Lw, 200 * Lw, 212 * Lw], 1);\n  for (const s of S.spr) {\n    const a = min(1, s.life * 1.5) * 0.85;\n    put(s.x - s.vx * 0.02, s.y - s.vy * 0.02, L.lit, a * 0.35);\n    put(s.x, s.y, L.lit, a);\n  }\n\n  // Under the ground: the conduit, the chamber and the cracks feeding it.\n  const froth = ph === 3 ? 1 - 0.5 * sm(0.6, 1, S.pt / (1.1 + 1.1 * P)) : ph === 2 ? 0.3 : ph === 1 ? 0.12 : 0;\n  const inflow = ph === 0 ? 1 - sm(4, 6.5, S.pt) * 0.8 : ph === 4 ? sm(1, 3, S.pt) : 0.2;\n  for (const i of S.cav) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = kind[i];\n    let r, g, b;\n    if (k === 4) {\n      const p = inflow * sm(0.55, 1, sin(S.fu[i] * 0.7 - t * 7));\n      (r = 20 + 80 * p), (g = 46 + 130 * p), (b = 104 + 110 * p);\n    } else if (k === 3 && y + 0.5 \u003c wl) {\n      // Drained: wet walls with a film running down.\n      const f = ph === 4 && hash(x, floor(y - t * 26)) \u003c 0.12;\n      (r = f ? 70 : 30), (g = f ? 104 : 33), (b = f ? 124 : 42);\n    } else if (froth && hash(x, floor(y + t * 80)) \u003c froth * (k === 5 ? 0.4 : 0.55)) [r, g, b] = FOAM;\n    else {\n      // Cool water blue, hot water turquoise.\n      const Tl = cl(T * (0.7 + 0.3 * sm(BOWL, KY + KRY, y)) + (k === 5 ? 0.08 : 0), 0, 1), sh = (0.86 + 0.28 * vn(x * 0.6, y * 0.3 + t * 2)) * (k === 3 && y === floor(wl) ? 1.3 : 1);\n      (r = mix(COOL[0], HOT[0], Tl) * sh), (g = mix(COOL[1], HOT[1], Tl) * sh), (b = mix(COOL[2], HOT[2], Tl) * sh);\n    }\n    (F[o] = r * Lr), (F[o + 1] = g * Lr), (F[o + 2] = b * Lr);\n  }\n  for (const { x, y, r } of S.bub)\n    if (r \u003c 0.9) put(x, y, FOAM, 0.85);\n    else\n      for (let v = floor(y - r); v \u003c= y + r; v++)\n        for (let u = floor(x - r); u \u003c= x + r; u++) {\n          const e = hypot(u + 0.5 - x, v + 0.5 - y) / r;\n          if (e \u003c 1) put(u, v, e > 0.6 ? [150, 220, 230] : FOAM, 0.9);\n        }\n  if (S.big > 0)\n    for (let y = floor(S.big); y \u003c S.big + 10; y++) {\n      const cx = CXA[y] + 0.5, hw = CHW[y] * min(1, 0.5 + 0.5 * (y + 1 - S.big)) - 0.3;\n      for (let x = floor(cx - hw); x \u003c cx + hw; x++) put(x, y, abs(x + 0.5 - cx) > hw - 1 ? [160, 236, 240] : [236, 246, 248], 0.97);\n    }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer."},{"name":"Power","min":0,"max":1,"about":"At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows."},{"name":"Wind","min":-1,"max":1,"about":"At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.1931,"detail":0.0478,"edges":0.2475,"complexity":2.0465,"coverage":1,"colour":0.26,"drift":0.0438},"knobResponse":[0.2681,0.0644,0.048,0.0484]},{"slug":"gibbs-phenomenon","title":"Gibbs Phenomenon","family":"wave","round":36,"note":"사각파 한 주기가 가로로 놓이고, 아래로 내려갈수록 푸리에 부분합의 항이 늘어 맨 위 1항에서 맨 아래 32항까지 25줄마다 두 배가 돼요. 합이 파형을 넘어선 곳은 흰 금색으로 타서 점프마다 양옆에 뿔이 서고, 뿔은 아래로 갈수록 점프에 붙지만 높이는 언제나 점프의 8.95% 예요. K3 은 사각파를 톱니파를 거쳐 삼각파로 바꿔 점프와 함께 뿔을 지우고, K1 을 누르면 맨 아래 줄이 256항까지 달리며 그 합의 그래프가 금색 눈금에 닿아요.","idea":"One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.","buttons":"K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.","code":"// ===== Patternflow pattern =====\n// Title:   Gibbs Phenomenon\n// Family:  wave\n// Idea:    One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gibbs phenomenon (Henry Wilbraham, 1848; J. Willard Gibbs, 1899), with Fejér's means (Lipót Fejér, 1900), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1\n//\n// Knob 1: Hue. Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive.\n// Knob 2: Speed. How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows.\n// Knob 3: Shape. Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn.\n// Knob 4: Fejer. Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too.\n// Buttons: K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.\n\nconst W = 64, H = 128, NMAX = 32, RACE = 8;\n// Subsamples per column: four, and 24 in a column within one LED of a jump.\nconst SS = 4, SSJ = 24;\n// How far either side of a point the wave's own range is read, in radians:\n// a sum is past the wave where it leaves [min, max] of the wave over x +- DEL.\nconst DEL = 0.12;\n// The limit of the overshoot: (1/pi) int_0^pi sin t / t dt - 1/2 of the jump.\nconst GIBBS = 0.0894899;\n// The graph the button draws: value v at row GY - GS v.\nconst GY = 24, GS = 16;\nconst { floor, min, max, abs, sin, cos, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The three waves on [0, 2 pi), all between -1 and 1. The square is 1 on\n// (0, pi) and -1 on (pi, 2 pi); the sawtooth rises as x / pi from -1 just past\n// pi to 1 just before it; the triangle peaks at 1 at pi/2.\nconst sq = (x) => (x \u003c PI ? 1 : -1);\nconst saw = (x) => (x \u003c PI ? x / PI : x / PI - 2);\nconst tri = (x) => (x \u003c PI / 2 ? (2 * x) / PI : x \u003c (3 * PI) / 2 ? 2 - (2 * x) / PI : (2 * x) / PI - 4);\n// Their sine coefficients: 4 / (pi k) on odd k; 2 (-1)^(k+1) / (pi k);\n// 8 (-1)^((k-1)/2) / (pi k)^2 on odd k.\nconst bSq = (k) => (k & 1 ? 4 / (PI * k) : 0);\nconst bSaw = (k) => ((k & 1 ? 2 : -2) / (PI * k));\nconst bTri = (k) => (k & 1 ? ((k & 2 ? -8 : 8) / (PI * PI * k * k)) : 0);\n\n// Shape 0..1 as weights on square, sawtooth and triangle.\nfunction weights(s) {\n  return s \u003c 0.5 ? [1 - 2 * s, 2 * s, 0] : [0, 2 - 2 * s, 2 * s - 1];\n}\n\nconst wave = (x, w) => w[0] * sq(x) + w[1] * saw(x) + w[2] * tri(x);\n\n// The wave's range over [x - DEL, x + DEL]: the ends, and both sides of any\n// jump or corner inside.\nconst SPECIAL = [0, PI / 2, PI, (3 * PI) / 2, TAU];\nconst waveAt = (t, w) => wave(t - floor(t / TAU) * TAU, w);\nfunction localRange(x, w, out) {\n  let lo = waveAt(x - DEL, w), hi = lo, v = waveAt(x + DEL, w);\n  if (v \u003c lo) lo = v;\n  if (v > hi) hi = v;\n  for (let n = -1; n \u003c= 1; n++)\n    for (let j = 0; j \u003c SPECIAL.length; j++) {\n      const t = SPECIAL[j] + n * TAU;\n      if (t \u003c= x - DEL || t >= x + DEL) continue;\n      for (const u of [t - 1e-9, t + 1e-9]) {\n        v = waveAt(u, w);\n        if (v \u003c lo) lo = v;\n        if (v > hi) hi = v;\n      }\n    }\n  out[0] = lo;\n  out[1] = hi;\n}\n\nexport function setup(params) {\n  const NS = W * SSJ;\n  params.s = {\n    hue: 0, speed: 2, shape: 0, fejer: 0, phase: 0, race: -1, bo: new Float64Array(RACE * NMAX + 2), bs: new Float64Array(RACE * NMAX + 2),\n    sx: new Float64Array(NS), sl: new Float64Array(NS), sh: new Float64Array(NS),\n    sum: new Float32Array(H), ex: new Float32Array(H), gmin: new Float32Array(W), gmax: new Float32Array(W), rk: new Float64Array(H),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), rr: [0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.shape = cl(k[2], 0, 1);\n  // Up to 0.06 the plain sums, so the opening shows the full 8.95%.\n  S.fejer = (max(0, cl(k[3], 0, 1) - 0.06) / 0.94) ** 2;\n  // At Speed 2 the wave slides 0.4 radians a second.\n  S.phase = (S.phase + d * S.speed * 0.2) % TAU;\n  if (input.btnPressed && input.btnPressed[0] && S.race \u003c 0) S.race = 0;\n  if (S.race >= 0) {\n    S.race += d;\n    if (S.race > 6) S.race = -1;\n  }\n}\n\n// The race: the bottom row's count of terms is multiplied by up to 8, rising\n// over 2.5 seconds, holding for 2 and coming back in 1.5.\nfunction raceFactor(t) {\n  if (t \u003c 0) return 1;\n  const u = t \u003c 2.5 ? t / 2.5 : t \u003c 4.5 ? 1 : max(0, (6 - t) / 1.5);\n  const e = u * u * (3 - 2 * u);\n  return RACE ** e;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, sx, sl, sh, sum, ex, rk, rr } = S;\n  const w = weights(S.shape), lam = S.fejer, nTop = NMAX * raceFactor(S.race);\n  const NN = Math.ceil(nTop);\n  // Row r sums the first n = 32^(r / 127) terms of each series, so the count\n  // doubles every 25 rows, continuous in n: between n and n + 1 the next\n  // term comes in by the fraction. The square and the triangle have only odd\n  // harmonics, so their n-th term is harmonic 2n - 1; the sawtooth's is n.\n  for (let r = 0; r \u003c H; r++) rk[r] = nTop ** (r / (H - 1));\n  const { bo, bs } = S;\n  for (let n = 1; n \u003c= NN; n++) {\n    bo[n] = w[0] * bSq(2 * n - 1) + w[2] * bTri(2 * n - 1);\n    bs[n] = w[1] * bSaw(n);\n  }\n  // The jumps of the wave, where it has any, set where the columns go fine.\n  const jumpAt = [];\n  if (w[0] > 0.001) jumpAt.push(0);\n  if (w[0] + w[1] > 0.001) jumpAt.push(PI);\n  // The overshoot the rulers stand at: the larger jump, the one at pi, is\n  // 2 (w0 + w1) tall, from -(w0 + w1) to w0 + w1.\n  const top = w[0] + w[1], ruler = top * (1 + 2 * GIBBS);\n\n  const cp = [0, 0, 0], cn = [0, 0, 0], gold = [1, 0.85, 0.52];\n  // Round orange and yellow a half is lifted, up to 1.8 times, and paled a\n  // little, so it reads amber or butter and not brown or olive.\n  for (const [h, out] of [[S.hue + 0.56, cp], [S.hue + 0.8, cn]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.1, 0, 1);\n    hsv(h, 0.85 - 0.25 * warm, 1 + 0.8 * warm, out);\n  }\n  const graph = S.race >= 0;\n  for (let col = 0; col \u003c W; col++) {\n    // Wave coordinate of the column's left edge.\n    const x0 = (col / W) * TAU - S.phase;\n    let near = false;\n    for (const j of jumpAt) {\n      const dj = ((((x0 + PI / W - j) % TAU) + TAU + PI) % TAU) - PI;\n      if (abs(dj) \u003c (1.6 * TAU) / W) near = true;\n    }\n    const ns = near ? SSJ : SS;\n    let fbar = 0;\n    for (let i = 0; i \u003c ns; i++) {\n      let x = x0 + ((i + 0.5) / ns) * (TAU / W);\n      x -= floor(x / TAU) * TAU;\n      sx[i] = x;\n      fbar += wave(x, w) / ns;\n      localRange(x, w, rr);\n      sl[i] = rr[0];\n      sh[i] = rr[1];\n    }\n    sum.fill(0);\n    ex.fill(0);\n    let gmin = Infinity, gmax = -Infinity;\n    for (let i = 0; i \u003c ns; i++) {\n      const x = sx[i], c1 = 2 * cos(x), c2 = 2 * cos(2 * x), lo = sl[i], hi = sh[i];\n      // sin(nx) and sin((2n - 1)x) by the Chebyshev recurrence.\n      let a0 = 0, a1 = sin(x), o0 = -sin(x), o1 = sin(x);\n      // Plain sums and Fejer means of the odd series and of the sawtooth.\n      // Fejer averages the partial sums over the harmonic index: S_0..S_K\n      // over K + 1, so the odd series adds its unchanged even-index sum too.\n      let So = 0, To = 0, fo = 0, Ss = 0, Ts = 0, fs = 0, r = 0, last = 0;\n      for (let n = 1; n \u003c= NN && r \u003c H; n++) {\n        const So0 = So, fo0 = fo, Ss0 = Ss, fs0 = fs;\n        To += So;\n        So += bo[n] * o1;\n        To += So;\n        fo = To / (2 * n);\n        Ss += bs[n] * a1;\n        Ts += Ss;\n        fs = Ts / (n + 1);\n        while (r \u003c H && rk[r] \u003c= n + 1e-9) {\n          const q = rk[r] - (n - 1);\n          const plain = So0 + q * (So - So0) + Ss0 + q * (Ss - Ss0), mean = fo0 + q * (fo - fo0) + fs0 + q * (fs - fs0);\n          // Past the wave: above its local top where the sum is positive, below\n          // its local bottom where negative. Falling short is not overshoot.\n          const v = (1 - lam) * plain + lam * mean, e = v > 0 ? v - hi : lo - v;\n          sum[r] += v;\n          if (e > ex[r]) ex[r] = e;\n          if (r === H - 1) last = v;\n          r++;\n        }\n        const a2 = c1 * a1 - a0;\n        a0 = a1;\n        a1 = a2;\n        const o2 = c2 * o1 - o0;\n        o0 = o1;\n        o1 = o2;\n      }\n      // The bottom row's sum, for the graph.\n      if (last \u003c gmin) gmin = last;\n      if (last > gmax) gmax = last;\n    }\n    S.gmin[col] = gmin;\n    S.gmax[col] = gmax;\n    for (let r = 0; r \u003c H; r++) {\n      const v = sum[r] / ns, c = v >= 0 ? cp : cn;\n      // The wave's own halves: 0.1 plus 0.32 times the size of the sum, and\n      // 1.8 times how far the sum is past the wave (outward) or short of it,\n      // so the fringes beside each jump show as light and dark bands.\n      const lv = cl(0.1 + 0.32 * min(1, abs(v)) + 1.8 * (v >= 0 ? v - fbar : fbar - v), 0, 0.8);\n      // Past the wave: white-gold, full from about 80% of the overshoot's\n      // limit, so the horns burn and the ripples of the first rows glow.\n      const g = sm(0.25, 0.85, ex[r] / (2 * GIBBS)), p = r * W + col;\n      R[p] = 255 * (c[0] * lv * (1 - g) + gold[0] * g);\n      G[p] = 255 * (c[1] * lv * (1 - g) + gold[1] * g);\n      B[p] = 255 * (c[2] * lv * (1 - g) + gold[2] * g);\n    }\n  }\n\n  if (graph) {\n    // The bottom row's sum as a graph over the top of the panel, with dim\n    // rulers at the wave's top and bottom and gold ones 8.95% of the jump\n    // past them.\n    const t = S.race, fade = min(1, t / 0.3, (6 - t) / 0.5);\n    const rows = GY + GS * 1.45;\n    for (let r = 0; r \u003c= rows; r++)\n      for (let col = 0; col \u003c W; col++) {\n        const p = r * W + col, k = 1 - 0.8 * fade;\n        R[p] *= k;\n        G[p] *= k;\n        B[p] *= k;\n      }\n    const rule = (v, col3, lv) => {\n      const r = round(GY - GS * v);\n      for (let x = 0; x \u003c W; x += 2) {\n        const p = r * W + x;\n        R[p] += col3[0] * lv * fade;\n        G[p] += col3[1] * lv * fade;\n        B[p] += col3[2] * lv * fade;\n      }\n    };\n    rule(top, [1, 1, 1], 70);\n    rule(-top, [1, 1, 1], 70);\n    rule(ruler, gold, 220);\n    rule(-ruler, gold, 220);\n    for (let col = 0; col \u003c W; col++) {\n      const ra = round(GY - GS * S.gmax[col]), rb = round(GY - GS * S.gmin[col]);\n      for (let r = max(0, ra); r \u003c= min(H - 1, rb); r++) {\n        const p = r * W + col;\n        R[p] = 255 * fade + R[p] * (1 - fade);\n        G[p] = 255 * fade + G[p] * (1 - fade);\n        B[p] = 255 * fade + B[p] * (1 - fade);\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-gibbs-phenomenon","type":"code","name":"gibbs-phenomenon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gibbs Phenomenon\n// Family:  wave\n// Idea:    One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gibbs phenomenon (Henry Wilbraham, 1848; J. Willard Gibbs, 1899), with Fejér's means (Lipót Fejér, 1900), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1\n//\n// Knob 1: Hue. Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive.\n// Knob 2: Speed. How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows.\n// Knob 3: Shape. Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn.\n// Knob 4: Fejer. Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too.\n// Buttons: K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.\n\nconst W = 64, H = 128, NMAX = 32, RACE = 8;\n// Subsamples per column: four, and 24 in a column within one LED of a jump.\nconst SS = 4, SSJ = 24;\n// How far either side of a point the wave's own range is read, in radians:\n// a sum is past the wave where it leaves [min, max] of the wave over x +- DEL.\nconst DEL = 0.12;\n// The limit of the overshoot: (1/pi) int_0^pi sin t / t dt - 1/2 of the jump.\nconst GIBBS = 0.0894899;\n// The graph the button draws: value v at row GY - GS v.\nconst GY = 24, GS = 16;\nconst { floor, min, max, abs, sin, cos, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The three waves on [0, 2 pi), all between -1 and 1. The square is 1 on\n// (0, pi) and -1 on (pi, 2 pi); the sawtooth rises as x / pi from -1 just past\n// pi to 1 just before it; the triangle peaks at 1 at pi/2.\nconst sq = (x) => (x \u003c PI ? 1 : -1);\nconst saw = (x) => (x \u003c PI ? x / PI : x / PI - 2);\nconst tri = (x) => (x \u003c PI / 2 ? (2 * x) / PI : x \u003c (3 * PI) / 2 ? 2 - (2 * x) / PI : (2 * x) / PI - 4);\n// Their sine coefficients: 4 / (pi k) on odd k; 2 (-1)^(k+1) / (pi k);\n// 8 (-1)^((k-1)/2) / (pi k)^2 on odd k.\nconst bSq = (k) => (k & 1 ? 4 / (PI * k) : 0);\nconst bSaw = (k) => ((k & 1 ? 2 : -2) / (PI * k));\nconst bTri = (k) => (k & 1 ? ((k & 2 ? -8 : 8) / (PI * PI * k * k)) : 0);\n\n// Shape 0..1 as weights on square, sawtooth and triangle.\nfunction weights(s) {\n  return s \u003c 0.5 ? [1 - 2 * s, 2 * s, 0] : [0, 2 - 2 * s, 2 * s - 1];\n}\n\nconst wave = (x, w) => w[0] * sq(x) + w[1] * saw(x) + w[2] * tri(x);\n\n// The wave's range over [x - DEL, x + DEL]: the ends, and both sides of any\n// jump or corner inside.\nconst SPECIAL = [0, PI / 2, PI, (3 * PI) / 2, TAU];\nconst waveAt = (t, w) => wave(t - floor(t / TAU) * TAU, w);\nfunction localRange(x, w, out) {\n  let lo = waveAt(x - DEL, w), hi = lo, v = waveAt(x + DEL, w);\n  if (v \u003c lo) lo = v;\n  if (v > hi) hi = v;\n  for (let n = -1; n \u003c= 1; n++)\n    for (let j = 0; j \u003c SPECIAL.length; j++) {\n      const t = SPECIAL[j] + n * TAU;\n      if (t \u003c= x - DEL || t >= x + DEL) continue;\n      for (const u of [t - 1e-9, t + 1e-9]) {\n        v = waveAt(u, w);\n        if (v \u003c lo) lo = v;\n        if (v > hi) hi = v;\n      }\n    }\n  out[0] = lo;\n  out[1] = hi;\n}\n\nexport function setup(params) {\n  const NS = W * SSJ;\n  params.s = {\n    hue: 0, speed: 2, shape: 0, fejer: 0, phase: 0, race: -1, bo: new Float64Array(RACE * NMAX + 2), bs: new Float64Array(RACE * NMAX + 2),\n    sx: new Float64Array(NS), sl: new Float64Array(NS), sh: new Float64Array(NS),\n    sum: new Float32Array(H), ex: new Float32Array(H), gmin: new Float32Array(W), gmax: new Float32Array(W), rk: new Float64Array(H),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), rr: [0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.shape = cl(k[2], 0, 1);\n  // Up to 0.06 the plain sums, so the opening shows the full 8.95%.\n  S.fejer = (max(0, cl(k[3], 0, 1) - 0.06) / 0.94) ** 2;\n  // At Speed 2 the wave slides 0.4 radians a second.\n  S.phase = (S.phase + d * S.speed * 0.2) % TAU;\n  if (input.btnPressed && input.btnPressed[0] && S.race \u003c 0) S.race = 0;\n  if (S.race >= 0) {\n    S.race += d;\n    if (S.race > 6) S.race = -1;\n  }\n}\n\n// The race: the bottom row's count of terms is multiplied by up to 8, rising\n// over 2.5 seconds, holding for 2 and coming back in 1.5.\nfunction raceFactor(t) {\n  if (t \u003c 0) return 1;\n  const u = t \u003c 2.5 ? t / 2.5 : t \u003c 4.5 ? 1 : max(0, (6 - t) / 1.5);\n  const e = u * u * (3 - 2 * u);\n  return RACE ** e;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, sx, sl, sh, sum, ex, rk, rr } = S;\n  const w = weights(S.shape), lam = S.fejer, nTop = NMAX * raceFactor(S.race);\n  const NN = Math.ceil(nTop);\n  // Row r sums the first n = 32^(r / 127) terms of each series, so the count\n  // doubles every 25 rows, continuous in n: between n and n + 1 the next\n  // term comes in by the fraction. The square and the triangle have only odd\n  // harmonics, so their n-th term is harmonic 2n - 1; the sawtooth's is n.\n  for (let r = 0; r \u003c H; r++) rk[r] = nTop ** (r / (H - 1));\n  const { bo, bs } = S;\n  for (let n = 1; n \u003c= NN; n++) {\n    bo[n] = w[0] * bSq(2 * n - 1) + w[2] * bTri(2 * n - 1);\n    bs[n] = w[1] * bSaw(n);\n  }\n  // The jumps of the wave, where it has any, set where the columns go fine.\n  const jumpAt = [];\n  if (w[0] > 0.001) jumpAt.push(0);\n  if (w[0] + w[1] > 0.001) jumpAt.push(PI);\n  // The overshoot the rulers stand at: the larger jump, the one at pi, is\n  // 2 (w0 + w1) tall, from -(w0 + w1) to w0 + w1.\n  const top = w[0] + w[1], ruler = top * (1 + 2 * GIBBS);\n\n  const cp = [0, 0, 0], cn = [0, 0, 0], gold = [1, 0.85, 0.52];\n  // Round orange and yellow a half is lifted, up to 1.8 times, and paled a\n  // little, so it reads amber or butter and not brown or olive.\n  for (const [h, out] of [[S.hue + 0.56, cp], [S.hue + 0.8, cn]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.1, 0, 1);\n    hsv(h, 0.85 - 0.25 * warm, 1 + 0.8 * warm, out);\n  }\n  const graph = S.race >= 0;\n  for (let col = 0; col \u003c W; col++) {\n    // Wave coordinate of the column's left edge.\n    const x0 = (col / W) * TAU - S.phase;\n    let near = false;\n    for (const j of jumpAt) {\n      const dj = ((((x0 + PI / W - j) % TAU) + TAU + PI) % TAU) - PI;\n      if (abs(dj) \u003c (1.6 * TAU) / W) near = true;\n    }\n    const ns = near ? SSJ : SS;\n    let fbar = 0;\n    for (let i = 0; i \u003c ns; i++) {\n      let x = x0 + ((i + 0.5) / ns) * (TAU / W);\n      x -= floor(x / TAU) * TAU;\n      sx[i] = x;\n      fbar += wave(x, w) / ns;\n      localRange(x, w, rr);\n      sl[i] = rr[0];\n      sh[i] = rr[1];\n    }\n    sum.fill(0);\n    ex.fill(0);\n    let gmin = Infinity, gmax = -Infinity;\n    for (let i = 0; i \u003c ns; i++) {\n      const x = sx[i], c1 = 2 * cos(x), c2 = 2 * cos(2 * x), lo = sl[i], hi = sh[i];\n      // sin(nx) and sin((2n - 1)x) by the Chebyshev recurrence.\n      let a0 = 0, a1 = sin(x), o0 = -sin(x), o1 = sin(x);\n      // Plain sums and Fejer means of the odd series and of the sawtooth.\n      // Fejer averages the partial sums over the harmonic index: S_0..S_K\n      // over K + 1, so the odd series adds its unchanged even-index sum too.\n      let So = 0, To = 0, fo = 0, Ss = 0, Ts = 0, fs = 0, r = 0, last = 0;\n      for (let n = 1; n \u003c= NN && r \u003c H; n++) {\n        const So0 = So, fo0 = fo, Ss0 = Ss, fs0 = fs;\n        To += So;\n        So += bo[n] * o1;\n        To += So;\n        fo = To / (2 * n);\n        Ss += bs[n] * a1;\n        Ts += Ss;\n        fs = Ts / (n + 1);\n        while (r \u003c H && rk[r] \u003c= n + 1e-9) {\n          const q = rk[r] - (n - 1);\n          const plain = So0 + q * (So - So0) + Ss0 + q * (Ss - Ss0), mean = fo0 + q * (fo - fo0) + fs0 + q * (fs - fs0);\n          // Past the wave: above its local top where the sum is positive, below\n          // its local bottom where negative. Falling short is not overshoot.\n          const v = (1 - lam) * plain + lam * mean, e = v > 0 ? v - hi : lo - v;\n          sum[r] += v;\n          if (e > ex[r]) ex[r] = e;\n          if (r === H - 1) last = v;\n          r++;\n        }\n        const a2 = c1 * a1 - a0;\n        a0 = a1;\n        a1 = a2;\n        const o2 = c2 * o1 - o0;\n        o0 = o1;\n        o1 = o2;\n      }\n      // The bottom row's sum, for the graph.\n      if (last \u003c gmin) gmin = last;\n      if (last > gmax) gmax = last;\n    }\n    S.gmin[col] = gmin;\n    S.gmax[col] = gmax;\n    for (let r = 0; r \u003c H; r++) {\n      const v = sum[r] / ns, c = v >= 0 ? cp : cn;\n      // The wave's own halves: 0.1 plus 0.32 times the size of the sum, and\n      // 1.8 times how far the sum is past the wave (outward) or short of it,\n      // so the fringes beside each jump show as light and dark bands.\n      const lv = cl(0.1 + 0.32 * min(1, abs(v)) + 1.8 * (v >= 0 ? v - fbar : fbar - v), 0, 0.8);\n      // Past the wave: white-gold, full from about 80% of the overshoot's\n      // limit, so the horns burn and the ripples of the first rows glow.\n      const g = sm(0.25, 0.85, ex[r] / (2 * GIBBS)), p = r * W + col;\n      R[p] = 255 * (c[0] * lv * (1 - g) + gold[0] * g);\n      G[p] = 255 * (c[1] * lv * (1 - g) + gold[1] * g);\n      B[p] = 255 * (c[2] * lv * (1 - g) + gold[2] * g);\n    }\n  }\n\n  if (graph) {\n    // The bottom row's sum as a graph over the top of the panel, with dim\n    // rulers at the wave's top and bottom and gold ones 8.95% of the jump\n    // past them.\n    const t = S.race, fade = min(1, t / 0.3, (6 - t) / 0.5);\n    const rows = GY + GS * 1.45;\n    for (let r = 0; r \u003c= rows; r++)\n      for (let col = 0; col \u003c W; col++) {\n        const p = r * W + col, k = 1 - 0.8 * fade;\n        R[p] *= k;\n        G[p] *= k;\n        B[p] *= k;\n      }\n    const rule = (v, col3, lv) => {\n      const r = round(GY - GS * v);\n      for (let x = 0; x \u003c W; x += 2) {\n        const p = r * W + x;\n        R[p] += col3[0] * lv * fade;\n        G[p] += col3[1] * lv * fade;\n        B[p] += col3[2] * lv * fade;\n      }\n    };\n    rule(top, [1, 1, 1], 70);\n    rule(-top, [1, 1, 1], 70);\n    rule(ruler, gold, 220);\n    rule(-ruler, gold, 220);\n    for (let col = 0; col \u003c W; col++) {\n      const ra = round(GY - GS * S.gmax[col]), rb = round(GY - GS * S.gmin[col]);\n      for (let r = max(0, ra); r \u003c= min(H - 1, rb); r++) {\n        const p = r * W + col;\n        R[p] = 255 * fade + R[p] * (1 - fade);\n        G[p] = 255 * fade + G[p] * (1 - fade);\n        B[p] = 255 * fade + B[p] * (1 - fade);\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows."},{"name":"Shape","min":0,"max":1,"about":"Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn."},{"name":"Fejer","min":0,"max":1,"about":"Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too."}],"start":[0,2,0,0.06],"measures":{"motion":0.5169,"detail":0.0632,"edges":0.2237,"complexity":1.7176,"coverage":0.871,"colour":0.3287,"drift":0.2332},"knobResponse":[0.1974,0.2792,0.2184,0.2064]},{"slug":"gilbreath-table","title":"Gilbreath Table","family":"number","round":32,"note":"맨 윗줄은 소수 2, 3, 5, 7, …이고, 그 아래 줄마다 윗줄 이웃끼리 뺀 차의 절댓값이 내려와요. 소수 간격이 분홍과 흰빛으로 남은 위 열 줄은 붙박혀 있고, 그 아래는 0 과 2 가 만드는 삼각형 무늬로 표를 따라 내려가요. 왼쪽 끝 금빛 1 의 열은 1만 줄 아래에서도 끊기지 않아요.","idea":"The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.","buttons":"K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.","code":"// ===== Patternflow pattern =====\n// Title:   Gilbreath Table\n// Family:  number\n// Idea:    The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbreath's conjecture (Norman Gilbreath, 1958; first noted by François Proth, 1878), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white.\n// Knob 2: Speed. At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times.\n// Knob 3: Depth. Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2.\n// Knob 4: Zoom. LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells.\n// Buttons: K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.\n\nconst W = 64, H = 128, LIM = 200000, K0 = 96, RW = 128, LOOK = 16, DMAX = 10000, PRIME = 255;\nconst { floor, log, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The same, lifted and paled around orange and yellow, which go brown or\n// olive on the panel when they are dim.\nfunction hsvL(h, s, v, out, o) {\n  const a = h - floor(h), u = cl(1 - Math.abs(a - 0.12) / 0.11, 0, 1);\n  hsv(h, s * (1 - 0.25 * u), min(1, v * (1 + 0.45 * u)), out, o);\n}\n\n// Row 0: the 17984 primes below 200000, by a sieve.\nfunction primes() {\n  const comp = new Uint8Array(LIM + 1), out = [];\n  for (let i = 2; i \u003c= LIM; i++) {\n    if (comp[i]) continue;\n    out.push(i);\n    for (let j = i * i; j \u003c= LIM; j += i) comp[j] = 1;\n  }\n  return Int32Array.from(out);\n}\n\n// One row down: each cell becomes |next - this|, and the row loses a cell.\nfunction step(P) {\n  const a = P.work, n = --P.len;\n  for (let i = 0; i \u003c n; i++) {\n    const d = a[i + 1] - a[i];\n    a[i] = d \u003c 0 ? -d : d;\n  }\n  P.k++;\n}\n\n// Put the working row at row k >= 1. Down to row K0 by plain steps. By row\n// K0 every cell but the first is 0 or 2 (setup checks), so |a - b| is a XOR,\n// and by Lucas's theorem 2^s rows down cell n is cell n XOR cell n + 2^s: a\n// jump of thousands of rows is one pass a bit. The first cell stays\n// |cell 1 - 1| = 1 at each of those rows, which is the conjecture holding.\nfunction seek(P, k) {\n  if (k \u003c= K0) {\n    const g = P.work, p = P.pr;\n    for (let i = 0; i \u003c P.N - 1; i++) g[i] = p[i + 1] - p[i];\n    P.len = P.N - 1;\n    P.k = 1;\n    while (P.k \u003c k) step(P);\n    return;\n  }\n  P.work.set(P.base);\n  P.len = P.N - K0;\n  const m = k - K0;\n  for (let s = 14; s >= 0; s--) {\n    const j = 1 \u003c\u003c s;\n    if (!(m & j)) continue;\n    const a = P.work, n = P.len - j;\n    for (let i = 1; i \u003c n; i++) a[i] ^= a[i + j];\n    P.len = n;\n  }\n  P.k = k;\n}\n\n// Copy a row into a table at slot o, with a number for each cell: for a 0,\n// how many cells there are to the end of its run of 0s, which is how many\n// more rows it stays 0, since a run of 0s loses its last cell every row\n// down; for a 2, the length of its run of 2s. A run of 2s is the lid of a\n// triangle of 0s one shorter, so a long run is the top of a big triangle.\nfunction keep(src, ring, run, o) {\n  ring.set(src.subarray(0, RW), o);\n  for (let i = RW - 1, d = LOOK; i >= 0; i--) {\n    d = ring[o + i] === 0 ? min(LOOK, d + 1) : 0;\n    run[o + i] = d;\n  }\n  for (let i = 0; i \u003c RW; ) {\n    if (ring[o + i] !== 2) {\n      i++;\n      continue;\n    }\n    let j = i;\n    while (j \u003c RW && ring[o + j] === 2) j++;\n    run.fill(min(LOOK, j - i), o + i, o + j);\n    i = j;\n  }\n}\n\nconst keepBody = (P) => keep(P.work, P.ring, P.run, (P.k % H) * RW);\n\nfunction fill(P, r) {\n  r = cl(floor(r), 1, P.N - RW - H - 2);\n  P.top = r;\n  seek(P, r);\n  keepBody(P);\n  while (P.k \u003c r + H - 1) {\n    step(P);\n    keepBody(P);\n  }\n}\n\nexport function setup(params) {\n  const pr = primes(), N = pr.length;\n  const P = {\n    pr, N, work: new Uint8Array(N), base: null, len: 0, k: 0, top: 0, pos: 0, start: 0, pin: 11,\n    ring: new Uint8Array(H * RW), run: new Uint8Array(H * RW),\n    head: new Uint8Array((K0 + 1) * RW), hrun: new Uint8Array((K0 + 1) * RW),\n    hue: NaN, speed: 2, cell: -1, depth: -1, front: -1, rows: H,\n    lut: new Float32Array(256 * 3), zlut: new Float32Array((LOOK + 1) * 3), tlut: new Float32Array((LOOK + 1) * 3),\n  };\n  // The first K0 + 1 rows, kept for the pinned top; row 0 is drawn as primes.\n  P.head.fill(PRIME, 0, RW);\n  seek(P, 1);\n  for (;;) {\n    keep(P.work, P.head, P.hrun, P.k * RW);\n    if (P.k === K0) break;\n    step(P);\n  }\n  for (let i = 1; i \u003c P.len; i++) if (P.work[i] > 2) throw new Error(\"row \" + K0 + \" still holds \" + P.work[i]);\n  P.base = P.work.slice();\n  params.s = P;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  const cell = round(2 ** (cl(k[3], -1, 1) + 1)), depth = cl(k[2], 0, 1);\n  let refill = false;\n  if (cell !== P.cell) {\n    // Pin every row down to the last one that still holds a value above 2\n    // in the columns on show: 0 to 10 for 64 columns, 0 to 4 for 16.\n    P.cell = cell;\n    const cols = Math.ceil(W / cell);\n    let last = 1;\n    for (let r = 1; r \u003c= K0; r++)\n      for (let n = 1; n \u003c cols; n++) if (P.head[r * RW + n] > 2) last = r;\n    P.pin = last + 1;\n    P.rows = P.pin + Math.ceil((H - P.pin * cell - 1) / cell);\n    refill = true;\n  }\n  if (depth !== P.depth) (P.depth = depth), (refill = true);\n  if (refill || (input.btnPressed && input.btnPressed[0])) {\n    P.start = P.pin + floor(DMAX * P.depth * P.depth * P.depth);\n    P.pos = P.start;\n    fill(P, P.pos);\n    P.front = P.front \u003c 0 ? 0 : min(P.front, P.pin);\n  }\n  // The front works out 12 rows a second at Speed 1 until it reaches the\n  // bottom; from then on the lower part goes down the table 1.5 a second.\n  if (P.front \u003c P.rows) P.front += d * P.speed * 12;\n  else {\n    P.front = P.rows + 1;\n    P.pos += d * P.speed * 1.5;\n  }\n  // At the far end of the computed table the lower part starts over at Depth.\n  if (P.pos > P.N - RW - H - 2) (P.pos = P.start), fill(P, P.pos);\n  while (P.top \u003c floor(P.pos)) {\n    P.top++;\n    step(P);\n    keepBody(P);\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    const h = k[0], lut = P.lut, zl = P.zlut, tl = P.tlut;\n    hsv(h + 0.12, 0.8, 1, lut, 3);\n    for (let v = 3; v \u003c 256; v++) {\n      // 4 pink, 6 coral, then warmer and whiter up to the widest gaps.\n      const u = cl((log(v) - log(4)) / (log(40) - log(4)), 0, 1);\n      hsv(h + 0.9 + 0.1 * u, 0.7 * (1 - u) + 0.08, 0.84 + 0.16 * u, lut, v * 3);\n    }\n    hsv(h + 0.1, 0.06, 1, lut, PRIME * 3);\n    for (let z = 0; z \u003c= LOOK; z++) {\n      // A 0 is brighter near the slanted side of its triangle and deeper\n      // inside; a 2 is brighter the longer its run, so big triangles have a\n      // bright lid.\n      const u = cl((z - 1) / 7, 0, 1), w = cl((z - 1) / 6, 0, 1);\n      hsvL(h + 0.62 + 0.08 * u, 0.8, 0.32 - 0.18 * u, zl, z * 3);\n      hsvL(h + 0.5 - 0.04 * w, 0.8 - 0.3 * w, 0.54 + 0.4 * w, tl, z * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.depth \u003c 0) return;\n  const lut = P.lut, zl = P.zlut, tl = P.tlut, c = P.cell, split = P.pin * c, f = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    // The pinned rows, one dark LED row with the column of 1s going through\n    // it, then the moving part. Rows past the front are not worked out yet;\n    // the newest ones glow.\n    let r, z, o, j;\n    if (y \u003c split) (j = floor(y / c)), (r = P.head), (z = P.hrun), (o = j * RW);\n    else if (y === split) {\n      for (let x = 0; x \u003c W; x++) {\n        const g = x \u003c (c > 2 ? c - 1 : c) && f > P.pin ? 0.8 : 0;\n        display.setPixel(x, y, lut[3] * g, lut[4] * g, lut[5] * g);\n      }\n      continue;\n    } else {\n      const b = floor((y - split - 1) / c);\n      (j = P.pin + b), (r = P.ring), (z = P.run), (o = ((P.top + b) % H) * RW);\n    }\n    if (j >= f) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const glow = 0.75 * Math.exp(-(f - j) / 2.5);\n    const edgeY = c > 2 && (y \u003c split ? y % c : (y - split - 1) % c) === c - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const n = floor(x / c), v = r[o + n];\n      let R, G, B;\n      if (v === 0 || v === 2) {\n        const q = z[o + n] * 3, t = v ? tl : zl;\n        (R = t[q]), (G = t[q + 1]), (B = t[q + 2]);\n      } else {\n        const q = v * 3;\n        (R = lut[q]), (G = lut[q + 1]), (B = lut[q + 2]);\n      }\n      if (glow > 0.01) (R += (255 - R) * glow), (G += (255 - G) * glow), (B += (255 - B) * glow);\n      if (edgeY || (c > 2 && x % c === c - 1)) (R *= 0.45), (G *= 0.45), (B *= 0.45);\n      display.setPixel(x, y, R, G, B);\n    }\n  }\n}\n","layer":{"id":"layer-gilbreath-table","type":"code","name":"gilbreath-table","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gilbreath Table\n// Family:  number\n// Idea:    The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbreath's conjecture (Norman Gilbreath, 1958; first noted by François Proth, 1878), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white.\n// Knob 2: Speed. At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times.\n// Knob 3: Depth. Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2.\n// Knob 4: Zoom. LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells.\n// Buttons: K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.\n\nconst W = 64, H = 128, LIM = 200000, K0 = 96, RW = 128, LOOK = 16, DMAX = 10000, PRIME = 255;\nconst { floor, log, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The same, lifted and paled around orange and yellow, which go brown or\n// olive on the panel when they are dim.\nfunction hsvL(h, s, v, out, o) {\n  const a = h - floor(h), u = cl(1 - Math.abs(a - 0.12) / 0.11, 0, 1);\n  hsv(h, s * (1 - 0.25 * u), min(1, v * (1 + 0.45 * u)), out, o);\n}\n\n// Row 0: the 17984 primes below 200000, by a sieve.\nfunction primes() {\n  const comp = new Uint8Array(LIM + 1), out = [];\n  for (let i = 2; i \u003c= LIM; i++) {\n    if (comp[i]) continue;\n    out.push(i);\n    for (let j = i * i; j \u003c= LIM; j += i) comp[j] = 1;\n  }\n  return Int32Array.from(out);\n}\n\n// One row down: each cell becomes |next - this|, and the row loses a cell.\nfunction step(P) {\n  const a = P.work, n = --P.len;\n  for (let i = 0; i \u003c n; i++) {\n    const d = a[i + 1] - a[i];\n    a[i] = d \u003c 0 ? -d : d;\n  }\n  P.k++;\n}\n\n// Put the working row at row k >= 1. Down to row K0 by plain steps. By row\n// K0 every cell but the first is 0 or 2 (setup checks), so |a - b| is a XOR,\n// and by Lucas's theorem 2^s rows down cell n is cell n XOR cell n + 2^s: a\n// jump of thousands of rows is one pass a bit. The first cell stays\n// |cell 1 - 1| = 1 at each of those rows, which is the conjecture holding.\nfunction seek(P, k) {\n  if (k \u003c= K0) {\n    const g = P.work, p = P.pr;\n    for (let i = 0; i \u003c P.N - 1; i++) g[i] = p[i + 1] - p[i];\n    P.len = P.N - 1;\n    P.k = 1;\n    while (P.k \u003c k) step(P);\n    return;\n  }\n  P.work.set(P.base);\n  P.len = P.N - K0;\n  const m = k - K0;\n  for (let s = 14; s >= 0; s--) {\n    const j = 1 \u003c\u003c s;\n    if (!(m & j)) continue;\n    const a = P.work, n = P.len - j;\n    for (let i = 1; i \u003c n; i++) a[i] ^= a[i + j];\n    P.len = n;\n  }\n  P.k = k;\n}\n\n// Copy a row into a table at slot o, with a number for each cell: for a 0,\n// how many cells there are to the end of its run of 0s, which is how many\n// more rows it stays 0, since a run of 0s loses its last cell every row\n// down; for a 2, the length of its run of 2s. A run of 2s is the lid of a\n// triangle of 0s one shorter, so a long run is the top of a big triangle.\nfunction keep(src, ring, run, o) {\n  ring.set(src.subarray(0, RW), o);\n  for (let i = RW - 1, d = LOOK; i >= 0; i--) {\n    d = ring[o + i] === 0 ? min(LOOK, d + 1) : 0;\n    run[o + i] = d;\n  }\n  for (let i = 0; i \u003c RW; ) {\n    if (ring[o + i] !== 2) {\n      i++;\n      continue;\n    }\n    let j = i;\n    while (j \u003c RW && ring[o + j] === 2) j++;\n    run.fill(min(LOOK, j - i), o + i, o + j);\n    i = j;\n  }\n}\n\nconst keepBody = (P) => keep(P.work, P.ring, P.run, (P.k % H) * RW);\n\nfunction fill(P, r) {\n  r = cl(floor(r), 1, P.N - RW - H - 2);\n  P.top = r;\n  seek(P, r);\n  keepBody(P);\n  while (P.k \u003c r + H - 1) {\n    step(P);\n    keepBody(P);\n  }\n}\n\nexport function setup(params) {\n  const pr = primes(), N = pr.length;\n  const P = {\n    pr, N, work: new Uint8Array(N), base: null, len: 0, k: 0, top: 0, pos: 0, start: 0, pin: 11,\n    ring: new Uint8Array(H * RW), run: new Uint8Array(H * RW),\n    head: new Uint8Array((K0 + 1) * RW), hrun: new Uint8Array((K0 + 1) * RW),\n    hue: NaN, speed: 2, cell: -1, depth: -1, front: -1, rows: H,\n    lut: new Float32Array(256 * 3), zlut: new Float32Array((LOOK + 1) * 3), tlut: new Float32Array((LOOK + 1) * 3),\n  };\n  // The first K0 + 1 rows, kept for the pinned top; row 0 is drawn as primes.\n  P.head.fill(PRIME, 0, RW);\n  seek(P, 1);\n  for (;;) {\n    keep(P.work, P.head, P.hrun, P.k * RW);\n    if (P.k === K0) break;\n    step(P);\n  }\n  for (let i = 1; i \u003c P.len; i++) if (P.work[i] > 2) throw new Error(\"row \" + K0 + \" still holds \" + P.work[i]);\n  P.base = P.work.slice();\n  params.s = P;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  const cell = round(2 ** (cl(k[3], -1, 1) + 1)), depth = cl(k[2], 0, 1);\n  let refill = false;\n  if (cell !== P.cell) {\n    // Pin every row down to the last one that still holds a value above 2\n    // in the columns on show: 0 to 10 for 64 columns, 0 to 4 for 16.\n    P.cell = cell;\n    const cols = Math.ceil(W / cell);\n    let last = 1;\n    for (let r = 1; r \u003c= K0; r++)\n      for (let n = 1; n \u003c cols; n++) if (P.head[r * RW + n] > 2) last = r;\n    P.pin = last + 1;\n    P.rows = P.pin + Math.ceil((H - P.pin * cell - 1) / cell);\n    refill = true;\n  }\n  if (depth !== P.depth) (P.depth = depth), (refill = true);\n  if (refill || (input.btnPressed && input.btnPressed[0])) {\n    P.start = P.pin + floor(DMAX * P.depth * P.depth * P.depth);\n    P.pos = P.start;\n    fill(P, P.pos);\n    P.front = P.front \u003c 0 ? 0 : min(P.front, P.pin);\n  }\n  // The front works out 12 rows a second at Speed 1 until it reaches the\n  // bottom; from then on the lower part goes down the table 1.5 a second.\n  if (P.front \u003c P.rows) P.front += d * P.speed * 12;\n  else {\n    P.front = P.rows + 1;\n    P.pos += d * P.speed * 1.5;\n  }\n  // At the far end of the computed table the lower part starts over at Depth.\n  if (P.pos > P.N - RW - H - 2) (P.pos = P.start), fill(P, P.pos);\n  while (P.top \u003c floor(P.pos)) {\n    P.top++;\n    step(P);\n    keepBody(P);\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    const h = k[0], lut = P.lut, zl = P.zlut, tl = P.tlut;\n    hsv(h + 0.12, 0.8, 1, lut, 3);\n    for (let v = 3; v \u003c 256; v++) {\n      // 4 pink, 6 coral, then warmer and whiter up to the widest gaps.\n      const u = cl((log(v) - log(4)) / (log(40) - log(4)), 0, 1);\n      hsv(h + 0.9 + 0.1 * u, 0.7 * (1 - u) + 0.08, 0.84 + 0.16 * u, lut, v * 3);\n    }\n    hsv(h + 0.1, 0.06, 1, lut, PRIME * 3);\n    for (let z = 0; z \u003c= LOOK; z++) {\n      // A 0 is brighter near the slanted side of its triangle and deeper\n      // inside; a 2 is brighter the longer its run, so big triangles have a\n      // bright lid.\n      const u = cl((z - 1) / 7, 0, 1), w = cl((z - 1) / 6, 0, 1);\n      hsvL(h + 0.62 + 0.08 * u, 0.8, 0.32 - 0.18 * u, zl, z * 3);\n      hsvL(h + 0.5 - 0.04 * w, 0.8 - 0.3 * w, 0.54 + 0.4 * w, tl, z * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.depth \u003c 0) return;\n  const lut = P.lut, zl = P.zlut, tl = P.tlut, c = P.cell, split = P.pin * c, f = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    // The pinned rows, one dark LED row with the column of 1s going through\n    // it, then the moving part. Rows past the front are not worked out yet;\n    // the newest ones glow.\n    let r, z, o, j;\n    if (y \u003c split) (j = floor(y / c)), (r = P.head), (z = P.hrun), (o = j * RW);\n    else if (y === split) {\n      for (let x = 0; x \u003c W; x++) {\n        const g = x \u003c (c > 2 ? c - 1 : c) && f > P.pin ? 0.8 : 0;\n        display.setPixel(x, y, lut[3] * g, lut[4] * g, lut[5] * g);\n      }\n      continue;\n    } else {\n      const b = floor((y - split - 1) / c);\n      (j = P.pin + b), (r = P.ring), (z = P.run), (o = ((P.top + b) % H) * RW);\n    }\n    if (j >= f) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const glow = 0.75 * Math.exp(-(f - j) / 2.5);\n    const edgeY = c > 2 && (y \u003c split ? y % c : (y - split - 1) % c) === c - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const n = floor(x / c), v = r[o + n];\n      let R, G, B;\n      if (v === 0 || v === 2) {\n        const q = z[o + n] * 3, t = v ? tl : zl;\n        (R = t[q]), (G = t[q + 1]), (B = t[q + 2]);\n      } else {\n        const q = v * 3;\n        (R = lut[q]), (G = lut[q + 1]), (B = lut[q + 2]);\n      }\n      if (glow > 0.01) (R += (255 - R) * glow), (G += (255 - G) * glow), (B += (255 - B) * glow);\n      if (edgeY || (c > 2 && x % c === c - 1)) (R *= 0.45), (G *= 0.45), (B *= 0.45);\n      display.setPixel(x, y, R, G, B);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times."},{"name":"Depth","min":0,"max":1,"about":"Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2."},{"name":"Zoom","min":-1,"max":1,"about":"LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells."}],"start":[0,2,0,0.06],"measures":{"motion":0.5182,"detail":0.0975,"edges":0.6797,"complexity":0.1987,"coverage":0.9794,"colour":0.3745,"drift":0.1585},"knobResponse":[0.3124,0.3276,0.151,0.2734]},{"slug":"gilded-cream","title":"Gilded Cream","family":"cosmetic","round":35,"note":"금박 조각 여섯 개가 든 아이보리 크림을 옆에서 본 단면이 제빵사의 반죽처럼 두 배로 늘어나 제 위로 접혀요. 접을 때마다 조각이 길게 늘어 금빛 결이 되고, 다섯 번 접으면 서른두 겹의 가는 금선이 반짝임만 남기고 크림에 녹아든 뒤 새 조각이 떨어져요. K3 은 한 번에 세 겹이나 네 겹으로 접게 하고, K1 은 크림을 색상환 한 바퀴로 물들이며 누르면 한 번을 네 배 빠르게 접어요.","idea":"A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.","buttons":"K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Gilded Cream\n// Family:  cosmetic\n// Idea:    A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after the folded baker's map of ergodic theory and gold-leaf cream in white and gold packaging\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1\n//\n// Knob 1: Hue. Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold.\n// Knob 2: Speed. At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower.\n// Knob 3: Fold. How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer.\n// Knob 4: Gold. How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1.\n// Buttons: K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x5bd1e995, 0x27d4eb2d);\n  h = Math.imul(h ^ (h >>> 15), 0x165667b1);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the cream's own soft relief.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 17 + o * 6007) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\n// The cream as it was before any fold, in its own coordinates: u along the\n// slab, 0 to 1 across the panel, and v up through it, 0 at the bottom to 1\n// at the top. A raster of RU x RV holds where the gold is, which flake it\n// belongs to and how each crumpled facet of the leaf is tilted.\nconst RU = 256, RV = 256;\nconst MAXF = 17;\n\nfunction scatter(P) {\n  const { GC, GI, GX, GY } = P;\n  GC.fill(0);\n  GI.fill(-1);\n  const n = 6 + floor(11 * P.gold + 0.5), sf = 1 + 0.5 * P.gold, R = P.round * 977;\n  const vx = new Float32Array(10), vy = new Float32Array(10), va = new Float32Array(11);\n  for (let i = 0; i \u003c n; i++) {\n    const s = R + i * 53;\n    // Half sizes in LEDs: across the slab and up through it.\n    const a = (2.8 + 2.2 * hash(s)) * sf, b = (4 + 3.4 * hash(s + 1)) * sf;\n    const cu = 0.1 + 0.8 * hash(s + 2), cv = 0.08 + 0.84 * hash(s + 3), rot = (hash(s + 4) - 0.5) * 1.2;\n    // A torn flake: 6 to 9 corners at their own distances round the middle.\n    const k = 6 + floor(4 * hash(s + 5));\n    for (let m = 0; m \u003c k; m++) {\n      const an = (2 * PI * (m + 0.35 * (hash(s + 11 + m) - 0.5))) / k, r = 0.6 + 0.45 * hash(s + 23 + m);\n      va[m] = an;\n      vx[m] = r * cos(an);\n      vy[m] = r * sin(an);\n    }\n    va[k] = va[0] + 2 * PI;\n    const cr = cos(rot), sr = sin(rot), ext = max(a, b) * 1.1;\n    const i0 = max(0, floor((cu - ext / W) * RU)), i1 = min(RU - 1, floor((cu + ext / W) * RU));\n    const j0 = max(0, floor((cv - ext / H) * RV)), j1 = min(RV - 1, floor((cv + ext / H) * RV));\n    for (let j = j0; j \u003c= j1; j++)\n      for (let q0 = i0; q0 \u003c= i1; q0++) {\n        const dx = ((q0 + 0.5) / RU - cu) * W, dy = ((j + 0.5) / RV - cv) * H;\n        const lx = dx * cr + dy * sr, ly = -dx * sr + dy * cr, ex = lx / a, ey = ly / b, d = sqrt(ex * ex + ey * ey);\n        let th = Math.atan2(ey, ex);\n        if (th \u003c va[0]) th += 2 * PI;\n        let m = 0;\n        while (m \u003c k - 1 && th > va[m + 1]) m++;\n        // Where the ray from the middle meets the outline between corners m\n        // and m + 1.\n        const m1 = (m + 1) % k, ax = vx[m], ay = vy[m], bx = vx[m1] - ax, by = vy[m1] - ay;\n        const dc = cos(th) * by - sin(th) * bx, re = abs(dc) > 1e-6 ? (ax * by - ay * bx) / dc : 1;\n        const cov = cl((re - d) * min(a, b) * 2, 0, 1);\n        const q = j * RU + q0;\n        if (cov \u003c= GC[q]) continue;\n        GC[q] = cov;\n        GI[q] = i;\n        // Crumple facets about 2.5 LEDs across, each tilted its own way.\n        const fx = floor(lx / 2.5 + 50), fy = floor(ly / 2.5 + 50);\n        GX[q] = hash(s * 31 + fx * 7 + fy * 131) - 0.5;\n        GY[q] = hash(s * 37 + fx * 11 + fy * 173) - 0.5;\n      }\n    P.land[i] = 0.08 + 0.55 * hash(s + 9);\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    c: 0, hue: 0, speed: 2, k3: 2, gold: 0.06, goldBuilt: -1,\n    round: 0, folds: [], fk: 2, p: 0, ph: 0, pt: 0, fast: false,\n    GC: new Float32Array(RU * RV), GI: new Int8Array(RU * RV), GX: new Float32Array(RU * RV), GY: new Float32Array(RU * RV),\n    land: new Float32Array(MAXF),\n    hgt: new Float32Array(N), surf: new Float32Array(N), gcov: new Float32Array(N), gfx: new Float32Array(N), gfy: new Float32Array(N), gfl: new Float32Array(N),\n    hole: new Float32Array(N), lipd: new Float32Array(N), ob: new Float32Array(N), pal: new Float32Array(12), lastHue: NaN,\n  };\n}\n\n// The round, in seconds at Speed 2: the flakes land, then folds one after\n// another with a rest between, then the cream settles smooth.\nconst LAND = 0, FOLD = 1, REST = 2, SETTLE = 3;\nconst LAND_T = 0.7, FOLD_T = 2.0, REST_T = 0.7, SETTLE_T = 1.8;\n// Folds a round: until the leaf has been stretched past twenty times.\nconst foldsFor = (k) => (k === 2 ? 5 : 3);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.k3 = floor(cl(k[2], 2, 4) + 0.5);\n  P.gold = cl(k[3], 0, 1);\n  if (abs(P.gold - P.goldBuilt) > 0.004) (scatter(P), (P.goldBuilt = P.gold));\n  P.c += d;\n  // A tap waits for the next fold if none is under way.\n  if (input.btnPressed && input.btnPressed[0]) P.fast = true;\n  P.pt += P.ph === FOLD && P.fast ? d * 4 : d;\n  if (P.ph === LAND && P.pt >= LAND_T) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === REST && (P.pt >= REST_T || P.fast)) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === FOLD && P.pt >= FOLD_T) {\n    P.folds.push(P.fk);\n    P.pt = 0;\n    P.fast = false;\n    P.ph = P.folds.length >= foldsFor(P.fk) ? SETTLE : REST;\n  } else if (P.ph === SETTLE && P.pt >= SETTLE_T) {\n    // Fresh cream: the folds are forgotten and new flakes fall in.\n    P.round++;\n    P.folds = [];\n    P.ph = LAND;\n    P.pt = 0;\n    scatter(P);\n  }\n  P.p = P.ph === FOLD ? sm(P.pt / FOLD_T) : 0;\n}\n\n// Sub-samples down each LED: the folds pack the layers thinner than an LED.\nconst SUB = 4;\n// The sliding layer's end is rounded like a rolled lip, LIP LEDs deep.\nconst LIP = 4.5;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { GC, GI, GX, GY, hgt, surf, gcov, gfx, gfy, gfl, hole, lipd, ob, pal, folds, land } = P;\n  if (P.lastHue !== P.hue) {\n    // The cream's tint. Round blush, peach, ivory and pistachio it stays\n    // pale and light, where a deeper cream reads beige or khaki beside the\n    // gold.\n    let h = P.hue + 0.11;\n    h -= floor(h);\n    const warm = sm((h + 0.03) / 0.07) * (1 - sm((h - 0.22) / 0.08));\n    hsv(h, 0.27 - 0.13 * warm, 0.93 + 0.03 * warm, pal, 0);\n    // The same cream in its folds' shade: a little deeper, never grey.\n    hsv(h - 0.01, 0.36 - 0.14 * warm, 0.74 + 0.1 * warm, pal, 3);\n    // The cream down in the gap under a layer still sliding over.\n    hsv(h - 0.01, 0.31 - 0.15 * warm, 0.82 + 0.07 * warm, pal, 6);\n    P.lastHue = P.hue;\n  }\n  const c = P.c, L = 1 + (P.fk - 1) * P.p, nF = folds.length, folding = P.ph === FOLD;\n  // Mid-fold the slab's far end stands inside the panel.\n  const open = folding && L - floor(L) > 0.001;\n  // Settling: the layers' relief and the leaf fade away and the cream lies\n  // smooth; then the new flakes land one by one and the relief comes back.\n  const settle = P.ph === SETTLE ? sm(P.pt / (SETTLE_T * 0.8)) : 0;\n  const keep = P.ph === LAND ? sm(P.pt / LAND_T) : 1 - settle;\n  // How deep the groove between layers is for each fold, newest first: the\n  // newest folds show, the older ones knit together.\n  const amp = [];\n  let th = H / L;\n  amp.push(folding ? 2 * min(1.6, 0.1 * th) * sm(P.p * 3) : 0);\n  for (let i = nF - 1; i >= 0; i--) {\n    th /= folds[i];\n    amp.push(2 * min(1.6, 0.1 * th) * 0.62 ** (nF - 1 - i + P.p));\n  }\n  const landT = P.ph === LAND ? P.pt : 99;\n\n  for (let x = 0; x \u003c W; x++) {\n    const ux = (x + 0.5) / W;\n    // Under the lip the top of the layer below swells a little, unevenly.\n    const bul = (2 + 1.3 * sin(ux * 7.5 + 0.6 * c) + 0.7 * sin(ux * 17 - c)) / H;\n    for (let y = 0; y \u003c H; y++) {\n      let g = 0, gx = 0, gy = 0, fl = 0, hh = 0, emp = 0, nS = 0, dl = 99;\n      for (let sI = 0; sI \u003c SUB; sI++) {\n        let u = ux, v = (H - y - (sI + 0.5) / SUB) / H;\n        let rel = 0;\n        // The fold under way: the slab stretched to L times its length and\n        // as much thinner, laid back and forth across the panel from the\n        // bottom up, each layer the other way up from the one below.\n        {\n          let j = floor(v * L), w = v * L - j, s = j + (j & 1 ? 1 - u : u);\n          if (open && j + 1 > L) {\n            const send = L - ((1 - 2 * sqrt(w * (1 - w))) * LIP) / W;\n            let cv = cl((send - s) * W + 0.5, 0, 1);\n            if (cv \u003c 1 && j > 0 && v - j / L \u003c bul) {\n              cv = 1;\n              j -= 1;\n              w = 0.999;\n              s = j + (j & 1 ? 1 - u : u);\n            }\n            emp += (1 - cv) / SUB;\n            if (cv \u003c= 0) {\n              dl = min(dl, (s - send) * W);\n              continue;\n            }\n          }\n          // Each layer is rounded across its thickness, so a groove runs\n          // between it and the next.\n          if (amp[0] > 0) rel += amp[0] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / L;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The folds already made, newest first, back to the cream as it was.\n        for (let i = nF - 1, lv = 1; i >= 0; i--, lv++) {\n          const k = folds[i], j = min(k - 1, floor(v * k)), w = v * k - j, s = j + (j & 1 ? 1 - u : u);\n          rel += amp[lv] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / k;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The cream's own soft relief, drawn out with it, read once an LED.\n        if (nS === 0) hh += 0.55 * SUB * tap(u * 40, v * 64 + 17);\n        hh += rel;\n        nS++;\n        // The leaf.\n        const fu = cl(u * RU - 0.5, 0, RU - 1.001), fv = cl(v * RV - 0.5, 0, RV - 1.001);\n        const i0 = floor(fu), j0 = floor(fv), q = j0 * RU + i0;\n        const c00 = GC[q], c10 = GC[q + 1], c01 = GC[q + RU], c11 = GC[q + RU + 1];\n        if (c00 + c10 + c01 + c11 > 0) {\n          const tx = fu - i0, ty = fv - j0;\n          let cc = c00 + (c10 - c00) * tx + (c01 - c00) * ty + (c00 - c10 - c01 + c11) * tx * ty;\n          const qq = ty \u003c 0.5 ? (tx \u003c 0.5 ? q : q + 1) : tx \u003c 0.5 ? q + RU : q + RU + 1, id = GI[qq];\n          if (id >= 0 && landT \u003c 99) {\n            // A flake that is landing grows in with a flash.\n            const t = (landT - land[id]) / 0.18;\n            cc *= sm(t);\n            fl = max(fl, t > 0 ? exp(-((t - 1) ** 2) * 1.5) : 0);\n          }\n          g += cc;\n          gx += GX[qq] * cc;\n          gy += GY[qq] * cc;\n        }\n      }\n      const p = y * W + x;\n      hgt[p] = nS ? (hh / nS) * keep : 0;\n      gcov[p] = nS ? g / nS : 0;\n      gfx[p] = g > 0 ? gx / g : 0;\n      gfy[p] = g > 0 ? gy / g : 0;\n      gfl[p] = fl;\n      hole[p] = emp;\n      lipd[p] = dl;\n    }\n  }\n  // The gap, softened over a few LEDs: the cream rounds down into it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += hole[y * W + cl(x + d, 0, W - 1)] * (3 - abs(d));\n      surf[y * W + x] = a / 9;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += surf[cl(y + d, 0, H - 1) * W + x] * (3 - abs(d));\n      ob[y * W + x] = a / 9;\n    }\n  for (let p = 0; p \u003c N; p++) surf[p] = hgt[p] * (1 - hole[p]) - 2.6 * ob[p];\n\n  // A small lamp drifts over the cream; the cream answers with a soft satin\n  // sheen and the leaf with a sharp glint off whichever facets face it.\n  const Lx = 32 + 38 * sin(0.29 * c + 0.4), Ly = 64 + 58 * sin(0.21 * c + 1.1), Lz = 55;\n  const Ex = 32, Ey = 64, Ez = 220;\n  const cr = pal[0], cg = pal[1], cb = pal[2], dr = pal[3], dg = pal[4], db = pal[5], pr = pal[6], pg = pal[7], pb = pal[8];\n  // The leaf fades into the cream as it settles.\n  const gk = 1 - settle;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, ow = hole[p];\n      const zx = (surf[y * W + min(W - 1, x + 1)] - surf[y * W + max(0, x - 1)]) / 2;\n      const zy = (surf[min(H - 1, y + 1) * W + x] - surf[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - surf[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      (hx *= hi), (hy *= hi), (hz *= hi);\n      const dif = nx * lx + ny * ly + nz * lz;\n      // The cream: lit against a level surface, its folds a deeper tint and\n      // a little shade where it rounds down into the gap.\n      const sh = cl(1 + 1.1 * (dif - lz) - 0.25 * ob[p], 0, 1.3);\n      const dk = 1 - sm(sh), lift = max(0, sh - 1);\n      let r = cr + (dr - cr) * dk + lift * 0.25, gg = cg + (dg - cg) * dk + lift * 0.25, b = cb + (db - cb) * dk + lift * 0.25;\n      const nh = max(0, nx * hx + ny * hy + nz * hz);\n      const n2 = nh * nh, n4 = n2 * n2, n8 = n4 * n4, n16 = n8 * n8;\n      const sat = 0.1 * n8 * n4 * n2 + 0.12 * n16 * n16 * n16 * n8 * n4;\n      r += sat;\n      gg += sat;\n      b += sat;\n      // The leaf: deep gold turned from the lamp, bright gold towards it,\n      // and a white-gold glint where a facet mirrors it.\n      const gc = gcov[p] * gk;\n      if (gc > 0.002) {\n        const tx = gfx[p] * 0.9, ty = gfy[p] * 0.9;\n        const fnx = nx + tx, fny = ny + ty, fnz = nz, fn = 1 / sqrt(fnx * fnx + fny * fny + fnz * fnz);\n        const fd = max(0, (fnx * lx + fny * ly + fnz * lz) * fn), fh = max(0, (fnx * hx + fny * hy + fnz * hz) * fn);\n        const f2 = fh * fh, f8 = f2 * f2 * f2 * f2, f32 = f8 * f8 * f8 * f8;\n        const lit = 0.5 + 0.62 * fd, gl = 1.3 * f32 * f8 + 0.6 * gfl[p];\n        // A vein thinner than an LED still reads as a line of gold.\n        const a = min(1, gc * (1.25 + 0.3 * nF));\n        r += (0.9 * lit + gl - r) * a;\n        gg += (0.62 * lit + gl * 0.92 - gg) * a;\n        b += (0.16 * lit + gl * 0.7 - b) * a;\n      }\n      // Down in the gap: the cream below in its own shade.\n      if (ow > 0) {\n        // The sliding layer's lip shades the cream just past it.\n        const gs = cl(0.92 + 0.5 * (dif - lz), 0.76, 1.05) * (0.84 + 0.16 * sm(lipd[p] / 9));\n        r += (pr * gs - r) * ow;\n        gg += (pg * gs - gg) * ow;\n        b += (pb * gs - b) * ow;\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-gilded-cream","type":"code","name":"gilded-cream","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gilded Cream\n// Family:  cosmetic\n// Idea:    A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after the folded baker's map of ergodic theory and gold-leaf cream in white and gold packaging\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1\n//\n// Knob 1: Hue. Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold.\n// Knob 2: Speed. At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower.\n// Knob 3: Fold. How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer.\n// Knob 4: Gold. How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1.\n// Buttons: K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x5bd1e995, 0x27d4eb2d);\n  h = Math.imul(h ^ (h >>> 15), 0x165667b1);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the cream's own soft relief.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 17 + o * 6007) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\n// The cream as it was before any fold, in its own coordinates: u along the\n// slab, 0 to 1 across the panel, and v up through it, 0 at the bottom to 1\n// at the top. A raster of RU x RV holds where the gold is, which flake it\n// belongs to and how each crumpled facet of the leaf is tilted.\nconst RU = 256, RV = 256;\nconst MAXF = 17;\n\nfunction scatter(P) {\n  const { GC, GI, GX, GY } = P;\n  GC.fill(0);\n  GI.fill(-1);\n  const n = 6 + floor(11 * P.gold + 0.5), sf = 1 + 0.5 * P.gold, R = P.round * 977;\n  const vx = new Float32Array(10), vy = new Float32Array(10), va = new Float32Array(11);\n  for (let i = 0; i \u003c n; i++) {\n    const s = R + i * 53;\n    // Half sizes in LEDs: across the slab and up through it.\n    const a = (2.8 + 2.2 * hash(s)) * sf, b = (4 + 3.4 * hash(s + 1)) * sf;\n    const cu = 0.1 + 0.8 * hash(s + 2), cv = 0.08 + 0.84 * hash(s + 3), rot = (hash(s + 4) - 0.5) * 1.2;\n    // A torn flake: 6 to 9 corners at their own distances round the middle.\n    const k = 6 + floor(4 * hash(s + 5));\n    for (let m = 0; m \u003c k; m++) {\n      const an = (2 * PI * (m + 0.35 * (hash(s + 11 + m) - 0.5))) / k, r = 0.6 + 0.45 * hash(s + 23 + m);\n      va[m] = an;\n      vx[m] = r * cos(an);\n      vy[m] = r * sin(an);\n    }\n    va[k] = va[0] + 2 * PI;\n    const cr = cos(rot), sr = sin(rot), ext = max(a, b) * 1.1;\n    const i0 = max(0, floor((cu - ext / W) * RU)), i1 = min(RU - 1, floor((cu + ext / W) * RU));\n    const j0 = max(0, floor((cv - ext / H) * RV)), j1 = min(RV - 1, floor((cv + ext / H) * RV));\n    for (let j = j0; j \u003c= j1; j++)\n      for (let q0 = i0; q0 \u003c= i1; q0++) {\n        const dx = ((q0 + 0.5) / RU - cu) * W, dy = ((j + 0.5) / RV - cv) * H;\n        const lx = dx * cr + dy * sr, ly = -dx * sr + dy * cr, ex = lx / a, ey = ly / b, d = sqrt(ex * ex + ey * ey);\n        let th = Math.atan2(ey, ex);\n        if (th \u003c va[0]) th += 2 * PI;\n        let m = 0;\n        while (m \u003c k - 1 && th > va[m + 1]) m++;\n        // Where the ray from the middle meets the outline between corners m\n        // and m + 1.\n        const m1 = (m + 1) % k, ax = vx[m], ay = vy[m], bx = vx[m1] - ax, by = vy[m1] - ay;\n        const dc = cos(th) * by - sin(th) * bx, re = abs(dc) > 1e-6 ? (ax * by - ay * bx) / dc : 1;\n        const cov = cl((re - d) * min(a, b) * 2, 0, 1);\n        const q = j * RU + q0;\n        if (cov \u003c= GC[q]) continue;\n        GC[q] = cov;\n        GI[q] = i;\n        // Crumple facets about 2.5 LEDs across, each tilted its own way.\n        const fx = floor(lx / 2.5 + 50), fy = floor(ly / 2.5 + 50);\n        GX[q] = hash(s * 31 + fx * 7 + fy * 131) - 0.5;\n        GY[q] = hash(s * 37 + fx * 11 + fy * 173) - 0.5;\n      }\n    P.land[i] = 0.08 + 0.55 * hash(s + 9);\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    c: 0, hue: 0, speed: 2, k3: 2, gold: 0.06, goldBuilt: -1,\n    round: 0, folds: [], fk: 2, p: 0, ph: 0, pt: 0, fast: false,\n    GC: new Float32Array(RU * RV), GI: new Int8Array(RU * RV), GX: new Float32Array(RU * RV), GY: new Float32Array(RU * RV),\n    land: new Float32Array(MAXF),\n    hgt: new Float32Array(N), surf: new Float32Array(N), gcov: new Float32Array(N), gfx: new Float32Array(N), gfy: new Float32Array(N), gfl: new Float32Array(N),\n    hole: new Float32Array(N), lipd: new Float32Array(N), ob: new Float32Array(N), pal: new Float32Array(12), lastHue: NaN,\n  };\n}\n\n// The round, in seconds at Speed 2: the flakes land, then folds one after\n// another with a rest between, then the cream settles smooth.\nconst LAND = 0, FOLD = 1, REST = 2, SETTLE = 3;\nconst LAND_T = 0.7, FOLD_T = 2.0, REST_T = 0.7, SETTLE_T = 1.8;\n// Folds a round: until the leaf has been stretched past twenty times.\nconst foldsFor = (k) => (k === 2 ? 5 : 3);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.k3 = floor(cl(k[2], 2, 4) + 0.5);\n  P.gold = cl(k[3], 0, 1);\n  if (abs(P.gold - P.goldBuilt) > 0.004) (scatter(P), (P.goldBuilt = P.gold));\n  P.c += d;\n  // A tap waits for the next fold if none is under way.\n  if (input.btnPressed && input.btnPressed[0]) P.fast = true;\n  P.pt += P.ph === FOLD && P.fast ? d * 4 : d;\n  if (P.ph === LAND && P.pt >= LAND_T) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === REST && (P.pt >= REST_T || P.fast)) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === FOLD && P.pt >= FOLD_T) {\n    P.folds.push(P.fk);\n    P.pt = 0;\n    P.fast = false;\n    P.ph = P.folds.length >= foldsFor(P.fk) ? SETTLE : REST;\n  } else if (P.ph === SETTLE && P.pt >= SETTLE_T) {\n    // Fresh cream: the folds are forgotten and new flakes fall in.\n    P.round++;\n    P.folds = [];\n    P.ph = LAND;\n    P.pt = 0;\n    scatter(P);\n  }\n  P.p = P.ph === FOLD ? sm(P.pt / FOLD_T) : 0;\n}\n\n// Sub-samples down each LED: the folds pack the layers thinner than an LED.\nconst SUB = 4;\n// The sliding layer's end is rounded like a rolled lip, LIP LEDs deep.\nconst LIP = 4.5;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { GC, GI, GX, GY, hgt, surf, gcov, gfx, gfy, gfl, hole, lipd, ob, pal, folds, land } = P;\n  if (P.lastHue !== P.hue) {\n    // The cream's tint. Round blush, peach, ivory and pistachio it stays\n    // pale and light, where a deeper cream reads beige or khaki beside the\n    // gold.\n    let h = P.hue + 0.11;\n    h -= floor(h);\n    const warm = sm((h + 0.03) / 0.07) * (1 - sm((h - 0.22) / 0.08));\n    hsv(h, 0.27 - 0.13 * warm, 0.93 + 0.03 * warm, pal, 0);\n    // The same cream in its folds' shade: a little deeper, never grey.\n    hsv(h - 0.01, 0.36 - 0.14 * warm, 0.74 + 0.1 * warm, pal, 3);\n    // The cream down in the gap under a layer still sliding over.\n    hsv(h - 0.01, 0.31 - 0.15 * warm, 0.82 + 0.07 * warm, pal, 6);\n    P.lastHue = P.hue;\n  }\n  const c = P.c, L = 1 + (P.fk - 1) * P.p, nF = folds.length, folding = P.ph === FOLD;\n  // Mid-fold the slab's far end stands inside the panel.\n  const open = folding && L - floor(L) > 0.001;\n  // Settling: the layers' relief and the leaf fade away and the cream lies\n  // smooth; then the new flakes land one by one and the relief comes back.\n  const settle = P.ph === SETTLE ? sm(P.pt / (SETTLE_T * 0.8)) : 0;\n  const keep = P.ph === LAND ? sm(P.pt / LAND_T) : 1 - settle;\n  // How deep the groove between layers is for each fold, newest first: the\n  // newest folds show, the older ones knit together.\n  const amp = [];\n  let th = H / L;\n  amp.push(folding ? 2 * min(1.6, 0.1 * th) * sm(P.p * 3) : 0);\n  for (let i = nF - 1; i >= 0; i--) {\n    th /= folds[i];\n    amp.push(2 * min(1.6, 0.1 * th) * 0.62 ** (nF - 1 - i + P.p));\n  }\n  const landT = P.ph === LAND ? P.pt : 99;\n\n  for (let x = 0; x \u003c W; x++) {\n    const ux = (x + 0.5) / W;\n    // Under the lip the top of the layer below swells a little, unevenly.\n    const bul = (2 + 1.3 * sin(ux * 7.5 + 0.6 * c) + 0.7 * sin(ux * 17 - c)) / H;\n    for (let y = 0; y \u003c H; y++) {\n      let g = 0, gx = 0, gy = 0, fl = 0, hh = 0, emp = 0, nS = 0, dl = 99;\n      for (let sI = 0; sI \u003c SUB; sI++) {\n        let u = ux, v = (H - y - (sI + 0.5) / SUB) / H;\n        let rel = 0;\n        // The fold under way: the slab stretched to L times its length and\n        // as much thinner, laid back and forth across the panel from the\n        // bottom up, each layer the other way up from the one below.\n        {\n          let j = floor(v * L), w = v * L - j, s = j + (j & 1 ? 1 - u : u);\n          if (open && j + 1 > L) {\n            const send = L - ((1 - 2 * sqrt(w * (1 - w))) * LIP) / W;\n            let cv = cl((send - s) * W + 0.5, 0, 1);\n            if (cv \u003c 1 && j > 0 && v - j / L \u003c bul) {\n              cv = 1;\n              j -= 1;\n              w = 0.999;\n              s = j + (j & 1 ? 1 - u : u);\n            }\n            emp += (1 - cv) / SUB;\n            if (cv \u003c= 0) {\n              dl = min(dl, (s - send) * W);\n              continue;\n            }\n          }\n          // Each layer is rounded across its thickness, so a groove runs\n          // between it and the next.\n          if (amp[0] > 0) rel += amp[0] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / L;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The folds already made, newest first, back to the cream as it was.\n        for (let i = nF - 1, lv = 1; i >= 0; i--, lv++) {\n          const k = folds[i], j = min(k - 1, floor(v * k)), w = v * k - j, s = j + (j & 1 ? 1 - u : u);\n          rel += amp[lv] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / k;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The cream's own soft relief, drawn out with it, read once an LED.\n        if (nS === 0) hh += 0.55 * SUB * tap(u * 40, v * 64 + 17);\n        hh += rel;\n        nS++;\n        // The leaf.\n        const fu = cl(u * RU - 0.5, 0, RU - 1.001), fv = cl(v * RV - 0.5, 0, RV - 1.001);\n        const i0 = floor(fu), j0 = floor(fv), q = j0 * RU + i0;\n        const c00 = GC[q], c10 = GC[q + 1], c01 = GC[q + RU], c11 = GC[q + RU + 1];\n        if (c00 + c10 + c01 + c11 > 0) {\n          const tx = fu - i0, ty = fv - j0;\n          let cc = c00 + (c10 - c00) * tx + (c01 - c00) * ty + (c00 - c10 - c01 + c11) * tx * ty;\n          const qq = ty \u003c 0.5 ? (tx \u003c 0.5 ? q : q + 1) : tx \u003c 0.5 ? q + RU : q + RU + 1, id = GI[qq];\n          if (id >= 0 && landT \u003c 99) {\n            // A flake that is landing grows in with a flash.\n            const t = (landT - land[id]) / 0.18;\n            cc *= sm(t);\n            fl = max(fl, t > 0 ? exp(-((t - 1) ** 2) * 1.5) : 0);\n          }\n          g += cc;\n          gx += GX[qq] * cc;\n          gy += GY[qq] * cc;\n        }\n      }\n      const p = y * W + x;\n      hgt[p] = nS ? (hh / nS) * keep : 0;\n      gcov[p] = nS ? g / nS : 0;\n      gfx[p] = g > 0 ? gx / g : 0;\n      gfy[p] = g > 0 ? gy / g : 0;\n      gfl[p] = fl;\n      hole[p] = emp;\n      lipd[p] = dl;\n    }\n  }\n  // The gap, softened over a few LEDs: the cream rounds down into it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += hole[y * W + cl(x + d, 0, W - 1)] * (3 - abs(d));\n      surf[y * W + x] = a / 9;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += surf[cl(y + d, 0, H - 1) * W + x] * (3 - abs(d));\n      ob[y * W + x] = a / 9;\n    }\n  for (let p = 0; p \u003c N; p++) surf[p] = hgt[p] * (1 - hole[p]) - 2.6 * ob[p];\n\n  // A small lamp drifts over the cream; the cream answers with a soft satin\n  // sheen and the leaf with a sharp glint off whichever facets face it.\n  const Lx = 32 + 38 * sin(0.29 * c + 0.4), Ly = 64 + 58 * sin(0.21 * c + 1.1), Lz = 55;\n  const Ex = 32, Ey = 64, Ez = 220;\n  const cr = pal[0], cg = pal[1], cb = pal[2], dr = pal[3], dg = pal[4], db = pal[5], pr = pal[6], pg = pal[7], pb = pal[8];\n  // The leaf fades into the cream as it settles.\n  const gk = 1 - settle;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, ow = hole[p];\n      const zx = (surf[y * W + min(W - 1, x + 1)] - surf[y * W + max(0, x - 1)]) / 2;\n      const zy = (surf[min(H - 1, y + 1) * W + x] - surf[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - surf[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      (hx *= hi), (hy *= hi), (hz *= hi);\n      const dif = nx * lx + ny * ly + nz * lz;\n      // The cream: lit against a level surface, its folds a deeper tint and\n      // a little shade where it rounds down into the gap.\n      const sh = cl(1 + 1.1 * (dif - lz) - 0.25 * ob[p], 0, 1.3);\n      const dk = 1 - sm(sh), lift = max(0, sh - 1);\n      let r = cr + (dr - cr) * dk + lift * 0.25, gg = cg + (dg - cg) * dk + lift * 0.25, b = cb + (db - cb) * dk + lift * 0.25;\n      const nh = max(0, nx * hx + ny * hy + nz * hz);\n      const n2 = nh * nh, n4 = n2 * n2, n8 = n4 * n4, n16 = n8 * n8;\n      const sat = 0.1 * n8 * n4 * n2 + 0.12 * n16 * n16 * n16 * n8 * n4;\n      r += sat;\n      gg += sat;\n      b += sat;\n      // The leaf: deep gold turned from the lamp, bright gold towards it,\n      // and a white-gold glint where a facet mirrors it.\n      const gc = gcov[p] * gk;\n      if (gc > 0.002) {\n        const tx = gfx[p] * 0.9, ty = gfy[p] * 0.9;\n        const fnx = nx + tx, fny = ny + ty, fnz = nz, fn = 1 / sqrt(fnx * fnx + fny * fny + fnz * fnz);\n        const fd = max(0, (fnx * lx + fny * ly + fnz * lz) * fn), fh = max(0, (fnx * hx + fny * hy + fnz * hz) * fn);\n        const f2 = fh * fh, f8 = f2 * f2 * f2 * f2, f32 = f8 * f8 * f8 * f8;\n        const lit = 0.5 + 0.62 * fd, gl = 1.3 * f32 * f8 + 0.6 * gfl[p];\n        // A vein thinner than an LED still reads as a line of gold.\n        const a = min(1, gc * (1.25 + 0.3 * nF));\n        r += (0.9 * lit + gl - r) * a;\n        gg += (0.62 * lit + gl * 0.92 - gg) * a;\n        b += (0.16 * lit + gl * 0.7 - b) * a;\n      }\n      // Down in the gap: the cream below in its own shade.\n      if (ow > 0) {\n        // The sliding layer's lip shades the cream just past it.\n        const gs = cl(0.92 + 0.5 * (dif - lz), 0.76, 1.05) * (0.84 + 0.16 * sm(lipd[p] / 9));\n        r += (pr * gs - r) * ow;\n        gg += (pg * gs - gg) * ow;\n        b += (pb * gs - b) * ow;\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower."},{"name":"Fold","min":2,"max":4,"about":"How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer."},{"name":"Gold","min":0,"max":1,"about":"How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1."}],"start":[0,2,2,0.06],"measures":{"motion":0.2739,"detail":0.0073,"edges":0.2093,"complexity":0.5765,"coverage":1,"colour":0.1255,"drift":0.0414},"knobResponse":[0.2092,0.0648,0.051,0.0463]},{"slug":"giraffe","title":"Giraffe","family":"mammal","round":23,"note":"우산 아카시아의 납작한 수관 밑에서 그물무늬기린이 보라색 혀로 잔가지를 감아 잎을 훑고, 소등쪼기새가 목을 타고 뛰어다녀요. 가끔 앞다리를 A 자로 벌리고 목을 내려 웅덩이 물을 마시면 물에 동그란 물결이 퍼져요. K3 을 돌리면 무늬가 마사이기린이나 로스차일드기린의 것으로 바뀌고, 끝에는 흰 기린이 서요.","idea":"Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.","buttons":"K1 tap sends the giraffe down to drink now.","code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-giraffe","type":"code","name":"giraffe","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare."},{"name":"Coat","min":0,"max":3,"about":"Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand."},{"name":"Wind","min":0,"max":1,"about":"Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy."}],"start":[0,2,0,0.06],"measures":{"motion":0.123,"detail":0.074,"edges":0.4044,"complexity":1.9181,"coverage":0.9853,"colour":0.3367,"drift":0.0426},"knobResponse":[0.2454,0.0494,0.078,0.0609]},{"slug":"glassblower","title":"Glassblower","family":"glass","round":27,"note":"어두운 스윙 피트 위 발판에서 가퍼가 블로파이프 끝의 유리 덩어리를 진자처럼 흔들면, 덩어리가 아래로 늘어나 긴 화병이 되며 노랑에서 주황을 지나 진홍으로 식어요. 글로리 홀에서 다시 달궈 불고 또 흔든 뒤 잘라 내면 바닥의 컬릿 더미에 떨어져 부서져요. K1 이 코발트나 호박 같은 유리 색을 고르고, 버튼은 다시 달구기와 불기예요.","idea":"A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.","buttons":"K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.","code":"// ===== Patternflow pattern =====\n// Title:   Glassblower\n// Family:  glass\n// Idea:    A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the swing pit of a glass studio, where a gather is stretched long\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1\n//\n// Knob 1: Glass. The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same.\n// Knob 2: Speed. At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower.\n// Knob 3: Length. How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1.\n// Knob 4: Heat. How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter.\n// Buttons: K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.\n\nconst W = 64, H = 128, N = W * H, NN = 40;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, cbrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// Distance to a segment; TT is how far along it.\nlet TT = 0, QX = 0, QY = 0;\nfunction seg(px, py, ex, ey) {\n  TT = cl((px * ex + py * ey) / (ex * ex + ey * ey + 1e-6), 0, 1);\n  (QX = px - TT * ex), (QY = py - TT * ey);\n  return sqrt(QX * QX + QY * QY);\n}\n\n// Black body, 0..1: dark red, red, orange, yellow, near white.\nconst BBK = [0, 0, 0, 0, 0.12, 46, 3, 0, 0.25, 118, 10, 0, 0.38, 196, 34, 0, 0.5, 245, 80, 6, 0.62, 255, 132, 22, 0.75, 255, 180, 62, 0.87, 255, 222, 132, 1, 255, 246, 216];\nconst BB = new Float32Array(513 * 3);\nfor (let q = 0, k = 0; q \u003c= 512; q++) {\n  const T = q / 512;\n  while (k \u003c 28 && T > BBK[k + 4]) k += 4;\n  for (let c = 0; c \u003c 3; c++) BB[q * 3 + c] = mix(BBK[k + 1 + c], BBK[k + 5 + c], (T - BBK[k]) / (BBK[k + 4] - BBK[k]));\n}\nconst bq = (T) => (((T \u003c 0 ? 0 : T > 1 ? 1 : T) * 512 + 0.5) | 0) * 3;\n// Clear, cobalt, amber, green, ruby: colour and body when cold, then what passes of the glow.\nconst GLASS = [\n  [150, 212, 204, 0.3, 1, 0.97, 0.9], [34, 72, 238, 1, 0.3, 0.38, 1], [238, 138, 24, 1, 1, 0.62, 0.2],\n  [40, 208, 88, 1, 0.42, 1, 0.5], [228, 18, 70, 1, 1, 0.18, 0.4],\n];\n// As the glow fades the glass filters it, and the colour comes through.\nconst flt = (T) => 0.95 * (1 - sm(0.45, 0.85, T));\n\n// Deck, floor, the pit's opening, the glory hole (a drum seen end on at a slant), hands and pipe.\nconst DK = 26, FL = 31, PT = 35, OX0 = 19, OX1 = 47;\nconst MX = 49, MY = 15, MRX = 3.6, MRY = 7, FRX = 6.5, FRY = 11;\nconst PIPE = 27, BACK = 8, TH0 = 0.34, HX = 24.5, HY = 19.5, HX2 = 25.5, HY2 = 17.5;\nconst THF = atan2(MX - HX2, MY - HY2);\nconst GATHER = 0, OUT = 1, BLOW = 2, SWING = 3, LIFT = 4, REHEAT = 5, CUT = 6, EMPTY = 7;\nconst DUR = [1.3, 1, 0.8, 5, 0.9, 1.8, 1.4, 0.9];\nconst V0 = 1300, OM = (2 * PI) / 2.3, START = 13.6, FS = new Float32Array(NN), CP = new Float32Array(80);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), piece = () => ({ X: F(NN), Y: F(NN), R: F(NN), B: F(NN), T: F(NN), on: 0, dy: 0, vy: 0 });\n  const S = (params.s = {\n    t: 0, th: THF, rho: 1, sw: 0, be: 0, bv: 0, vx: 0, tx: 0, ty: 0, l: 4, R0: 3, bl: 9, rot: 0, pT: 0, boom: 0, tmax: 0.8, live: 0, k1: -1, gl: [0, 0, 0, 1, 1, 1, 1], pc: piece(), fall: piece(), sp: [], lt: F(84),\n    fa: F(N), se: F(N), ci: new Uint8Array(N), hc: F(256), cx: F(256), cn: F(256), top: F(W),\n    f: F(N * 3), lr: F(N), lg: F(N), lb: F(N), mat: new Uint8Array(N), al: F(N * 3), gm: F(N),\n    gd: F(N).fill(99), gs: F(N), gr: F(N), gu: F(N), gb: F(N), gt: F(N),\n  });\n  maps(S);\n  go(S, GATHER);\n}\n\nfunction maps(S) {\n  const M = S.mat, A = S.al, HG = S.top;\n  for (let x = 0; x \u003c W; x++) HG[x] = 122 - 10 * ((x + 0.5 - 33) / 31) ** 2 + 2 * (vn(x * 0.3, 5) - 0.5);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, gr = 0.85 + 0.3 * hash(x, y);\n    let m = 0, a = 0, c = [1, 0.9, 0.8];\n    if (((px - MX) / MRX) ** 2 + ((py - MY) / MRY) ** 2 \u003c 1) m = 3;\n    else if (((px - MX) / FRX) ** 2 + ((py - MY) / FRY) ** 2 \u003c 1) (m = 2), (a = 0.5 * (0.8 + 0.3 * hash(x, y + 7))), (c = [1, 0.84, 0.7]);\n    else if (x > MX && y \u003c FL && y > MY - FRY - 1) {\n      // The drum with a rim on top and two bands, a dark stand below.\n      m = 1;\n      a = y \u003c MY + FRY ? (y === MY - FRY ? 0.9 : 0.3 * (0.35 + 0.65 * cos(((py - MY) / FRY) * 1.45))) * (x === 56 || x === 61 ? 1.8 : 1) : y === MY + FRY ? 0.7 : 0.12;\n      c = [0.9, 0.93, 1];\n    } else if (y >= FL && y \u003c PT && (x \u003c OX0 || x > OX1)) (m = 4), (a = y === FL ? 0.8 : 0.3 * gr * (0.8 + 0.4 * hash(x >> 1, y))), (c = [1, 0.95, 0.88]);\n    else if ((y >= DK && y \u003c DK + 2 && x \u003c 23) || ((x === 3 || x === 19) && y >= DK && y \u003c FL)) (m = 5), (a = y === DK ? 0.9 : 0.35), (c = [0.9, 0.93, 1]);\n    else if (py >= HG[x]) {\n      // Broken glass: facets on a jittered grid, dark seams between them.\n      m = 7;\n      let d1 = 9, d2 = 9, id = 0, ci = 0;\n      for (let j = 0; j \u003c 9; j++) {\n        const cx = floor(x / 3) + (j % 3) - 1, cy = floor(y / 2.5) + floor(j / 3) - 1, d = (px - (cx + hash(cx, cy)) * 3) ** 2 + (py - (cy + hash(cy, cx + 9)) * 2.5) ** 2;\n        if (d \u003c d1) (d2 = d1), (d1 = d), (id = hash(cx + 31, cy)), (ci = cl((cy - 42) * 24 + cx + 1, 0, 254));\n        else if (d \u003c d2) d2 = d;\n      }\n      (S.ci[i] = ci), (S.cx[ci] += px), S.cn[ci]++;\n      (S.fa[i] = id), (S.se[i] = sm(0.9, 0.2, sqrt(d2) - sqrt(d1)) * 0.7 + (py - HG[x] \u003c 1 ? -0.3 : 0));\n    } else if (y >= FL) {\n      // Firebrick courses, sooted in clouds.\n      m = 6;\n      const r = floor(y / 3), sx = x + (r & 1) * 3;\n      a = y % 3 === 2 || sx % 7 === 6 ? 0.1 : 0.5 * (0.7 + 0.6 * hash(floor(sx / 7), r)) * (0.45 + 0.7 * vn(x * 0.11, y * 0.045)) * gr * (x \u003c 2 || x > 61 ? 0.45 : 1);\n      c = [1, 0.76, 0.58];\n    } else {\n      // Corrugated sheeting behind the shop.\n      a = 0.5 * (0.88 + 0.12 * cos(px * PI * 0.5)) * (x % 16 === 15 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 0.07, y * 0.15));\n      c = [0.95, 0.9, 0.85];\n    }\n    M[i] = m;\n    for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = a * c[j];\n  }\n}\n// Heat left in the heap where hot glass lands, shard by shard.\nfunction heat(S, x, y, T, r) {\n  for (let j = floor(y - r); j \u003c= y + r; j++)\n    for (let i = floor(x - r); i \u003c= x + r; i++) {\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || S.mat[j * W + i] !== 7) continue;\n      const c = S.ci[j * W + i];\n      S.hc[c] = max(S.hc[c], T * sm(r + 0.5, r * 0.3, sqrt((i + 0.5 - x) ** 2 + (j + 0.5 - y) ** 2)));\n    }\n}\n\nfunction go(S, ph) {\n  (S.ph = ph), (S.pt = 0), (S.th1 = S.th);\n  if (ph === GATHER) (S.pc.on = 1), (S.V = 60), (S.b = S.bt = 0), (S.sb = S.sbt = 0.3), (S.pass = 1), S.pc.T.fill(S.tmax);\n  else if (ph === BLOW) blow(S, S.pass > 1 ? 0.1 : 0.4);\n  else if (ph === SWING) S.sw = 0;\n}\nfunction next(S) {\n  const p = S.ph;\n  go(S, p === SWING ? (S.pass > 1 ? CUT : LIFT) : p === REHEAT ? OUT : p === EMPTY ? GATHER : p + 1);\n  if (p === REHEAT) S.pass++;\n}\nfunction blow(S, db) {\n  (S.bt = min(0.74, S.b + db)), (S.sbt = min(0.84, S.pass > 1 ? S.sb + 0.12 : 0.55)), (S.bl = 0);\n}\nconst live = (S) => S.pc.on && (S.ph === BLOW || S.ph === SWING || (S.ph === CUT && S.pt \u003c 0.4));\n\n// Radius from volume and length: a neck, a body narrowing down, a round end.\nfunction shape(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1);\n  let R = max(1, S.R0);\n  for (let it = 0; it \u003c 3; it++) {\n    let sum = 0;\n    for (let i = 0; i \u003c NN; i++) {\n      const s = i / (NN - 1), a = s * l, ct = 1 - min(1, (a + 0.25 * R) / (1.1 * R)), cb = 1 - min(1, (l - a) / (0.62 * R));\n      FS[i] = (1 - 0.38 * s) * sqrt(1 - ct * ct) * sqrt(max(0, 1 - cb * cb));\n      sum += FS[i] * FS[i];\n    }\n    R = max(1, sqrt(S.V / (PI * dl * max(1e-3, sum))));\n  }\n  S.R0 = R;\n  for (let i = 0; i \u003c NN; i++) {\n    const q = (i / (NN - 1) - 0.05) / (S.sb - 0.05), B = q > 0 && q \u003c 1 ? S.b * sqrt(1 - (2 * q - 1) ** 2) : 0;\n    (P.B[i] = B), (P.R[i] = (R * FS[i]) / sqrt(1 - B * B));\n  }\n}\n// Off the pipe along its axis, then hanging and trailing the swing; straight when lifted.\nfunction line(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1), th = S.th, w0 = 0.8 * S.R0 + 1.5;\n  let x = S.tx - sin(th) * 1.2, y = S.ty - cos(th) * 1.2;\n  for (let i = 0; i \u003c NN; i++) {\n    (P.X[i] = x), (P.Y[i] = y);\n    const s = i / (NN - 1), w = exp((-s * l) / w0), a = mix(th * w + (1 - w) * S.be * s ** 0.8, th, S.rho);\n    (x += sin(a) * dl), (y += cos(a) * dl);\n  }\n}\n// Radiative cooling, faster where the glass is thin.\nconst cool = (T, R, d) => T - ((0.22 * (T + 0.1)) / max(2.2, R) ** 0.7) * d;\n\nfunction step(S, d) {\n  (S.t += d), (S.pt += d);\n  const dur = () => (S.ph === SWING ? (S.pass > 1 ? 6.5 : 5) : DUR[S.ph]);\n  if (S.pt >= dur()) next(S);\n  const ph = S.ph, pt = S.pt, D = dur(), u = sm(0, 1, pt / D), P = S.pc, F = S.fall, HG = S.top;\n  let th = S.th, rho = S.rho, inH = 0;\n  S.env = 0;\n  if (ph === GATHER || ph === REHEAT) (th = THF + 0.015 * sin(S.t * 3)), (rho = inH = 1);\n  else if (ph === OUT) (th = mix(S.th1, TH0, u)), (rho = 1 - sm(0.3, 0.9, pt / D)), (inH = 1 - sm(0, 0.25, pt / D));\n  else if (ph === BLOW) (th = TH0 + 0.03 * sin(pt * 4)), (rho = 0);\n  else if (ph === SWING) {\n    S.env = sm(0, 1.4, pt) * (1 - sm(D - 1.1, D, pt));\n    S.sw += d * OM * sqrt(62 / S.L) * (1 - 0.15 * (S.l / S.L));\n    (th = TH0 + S.A * S.env * sin(S.sw)), (rho = 0);\n  } else if (ph === LIFT || ph === EMPTY) (th = mix(S.th1, THF, u)), (rho = sm(0, 0.3, pt / D)), (inH = sm(0.75, 1, pt / D));\n  else {\n    (th = mix(S.th1, TH0, sm(0, 0.4, pt))), (rho = 0);\n    if (P.on && pt >= 0.4) cut(S);\n  }\n  const q = cl((th - TH0) / (THF - TH0), 0, 1);\n  (S.th = th), (S.rho = rho), (S.hx = mix(HX, HX2, q)), (S.hy = mix(HY, HY2, q));\n  const tx = S.hx + PIPE * sin(th), ty = S.hy + PIPE * cos(th), vx = (tx - S.tx) / d, ax = cl((vx - S.vx) / d, -400, 400), Le = max(10, 0.55 * S.l);\n  (S.tx = tx), (S.ty = ty), (S.vx = vx);\n  // The hanging part is a pendulum on a moving pivot.\n  if (rho > 0.5) S.be = S.bv = 0;\n  else (S.bv += ((-190 / Le) * sin(S.be) - 1.3 * S.bv - (ax / Le) * cos(S.be)) * d), (S.be = cl(S.be + S.bv * d, -0.7, 0.7));\n  (S.b += (S.bt - S.b) * min(1, d * 4)), (S.sb += (S.sbt - S.sb) * min(1, d * 4)), (S.bl += d), (S.rot += d * (3 + 5 * inH));\n  if (P.on) {\n    if (ph === GATHER) (S.V = max(60, V0 * (S.L / 62) * sm(0, 1.1, pt))), (S.l = 1.9 * cbrt((3 * S.V) / (4 * PI)));\n    let tm = 0;\n    for (let i = 0; i \u003c NN; i++) tm += P.T[i] / NN;\n    if (rho \u003c 0.5) S.l += 0.42 * sm(0.15, 0.55, tm) * max(0, (S.pass > 1 ? S.L : 0.64 * S.L) - S.l) * (0.3 + 0.7 * S.env) * d;\n    shape(S), line(S);\n    // The glory hole brings it all back up.\n    for (let i = 0; i \u003c NN; i++) {\n      const T = P.T[i] + (S.tmax - P.T[i]) * (1 - exp(-1.9 * d)) * inH;\n      P.T[i] = mix(T, cool(T, P.R[i], d), 1 - inH);\n    }\n    (S.pT = mix(S.pT, P.T[0] * 0.7, min(1, d * 2))), (S.gx = P.X[NN >> 1]), (S.gy = P.Y[NN >> 1]);\n  } else S.pT *= exp(-d * 0.5);\n  if (F.on) {\n    (F.vy += 300 * d), (F.dy += F.vy * d), (S.gx = F.X[NN >> 1]), (S.gy = F.Y[NN >> 1] + F.dy);\n    for (let i = 0; i \u003c NN; i++) F.T[i] = cool(F.T[i], F.R[i], d);\n    // It hits the heap and goes to pieces.\n    const bx = F.X[NN - 1], hy = HG[cl(bx | 0, 0, W - 1)];\n    if (F.Y[NN - 1] + F.dy > hy - 1) {\n      heat(S, bx, hy + 1, F.T[NN - 1] + 0.1, 3.5);\n      for (let i = 0; i \u003c NN * 2; i++) {\n        const j = i >> 1;\n        S.sp.push({ x: F.X[j] + (rnd() - 0.5) * F.R[j], y: F.Y[j] + F.dy, vx: (rnd() - 0.5) * 60, vy: F.vy * (0.5 + 0.4 * rnd()) - 30 * rnd(), l: 9, T: F.T[j] });\n      }\n      (F.on = 0), (S.boom = 1), (S.bx = bx);\n    }\n  }\n  for (let c = 0; c \u003c 255; c++) if (S.hc[c] > 0) S.hc[c] -= 0.03 * (S.hc[c] + 0.08) * d;\n  S.boom = max(0, S.boom - d * 2.5);\n  for (const p of S.sp) {\n    (p.vy += 200 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 1.2);\n    if (p.x \u003c 0.5 || p.x > W - 0.5) (p.vx *= -0.5), (p.x = cl(p.x, 0.5, W - 0.5));\n    // A shard bounces, then settles into the heap and leaves its heat there.\n    if (p.l > 5 && p.y > HG[p.x | 0]) p.vy > 70 ? ((p.vy *= -0.35), (p.vx *= 0.6), (p.y = HG[p.x | 0])) : (heat(S, p.x, p.y + 1, p.T, 1.3 + rnd()), (p.l = 0));\n  }\n  S.sp = S.sp.filter((p) => p.l > 0 && p.y \u003c H + 2);\n}\n\n// The jacks score the neck and the piece drops away into the pit.\nfunction cut(S) {\n  const P = S.pc, F = S.fall;\n  for (const k of \"XYRBT\") F[k].set(P[k]);\n  (F.on = 1), (F.dy = F.vy = P.on = 0), (S.pT = 0.75), (S.l = 4), (S.V = 60);\n  for (let k = 0; k \u003c 14; k++) S.sp.push({ x: S.tx, y: S.ty + 1, vx: (rnd() - 0.5) * 34, vy: -10 - 28 * rnd(), l: 0.6 + 0.4 * rnd(), T: 0.8 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], -1, 1), k4 = cl(k[3], 0, 1);\n  if (k1 !== S.k1) {\n    const u = k1 * 4, i = min(3, floor(u)), f = sm(0.25, 0.75, u - i);\n    for (let c = 0; c \u003c 7; c++) S.gl[c] = mix(GLASS[i][c], GLASS[i + 1][c], f);\n    S.k1 = k1;\n  }\n  (S.L = 62 + 18 * k3), (S.A = 0.29 + 0.15 * k3), (S.hot = 0.84 + 0.16 * k4), (S.tmax = 0.86 + 0.18 * k4), (S.fI = 1 + 0.55 * k4);\n  if (!S.live) {\n    while (!S.live) step(S, 1 / 30), (S.live = S.t >= START ? 1 : 0);\n    // The last piece lies broken in the heap, still red.\n    heat(S, 31 + 6 * rnd(), 125, 0.44, 5);\n    for (let k = 0; k \u003c 7; k++) heat(S, 2 + 60 * rnd(), 112 + 16 * rnd(), 0.18 + 0.14 * rnd(), 1.5 + 2 * rnd());\n  }\n  const bp = input.btnPressed || [];\n  if (bp[0] && live(S)) go(S, LIFT);\n  if (bp[1] && live(S)) blow(S, 0.14);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\n// Lights: the glory hole, seven points along the gather, the heap's embers, the crash.\nfunction lights(S) {\n  const LT = S.lt, M = S.mat, HC = S.hc, GL = S.gl;\n  let n = 0;\n  const add = (x, y, T, w, sg, g = 0) => {\n    const o = n++ * 6, b = bq(T), f = g * flt(T);\n    (LT[o] = x), (LT[o + 1] = y), (LT[o + 5] = 1 / (sg * sg));\n    for (let c = 0; c \u003c 3; c++) LT[o + 2 + c] = (BB[b + c] / 255) * w * (1 - f + f * GL[4 + c]);\n  };\n  add(MX - 2.5, MY + 0.5, S.hot, S.fI * (0.92 + 0.12 * vn(S.t * 4, 3)), 13);\n  for (const P of [S.pc, S.fall]) {\n    if (!P.on) continue;\n    for (let i = 3; i \u003c NN; i += 6) {\n      const x = P.X[i], y = P.Y[i] + P.dy, m = x >= 0 && x \u003c W && y >= 0 && y \u003c H ? M[(y | 0) * W + (x | 0)] : 0;\n      if (y \u003c H + 12) add(x, y, P.T[i], 0.32 * min(2, P.R[i] / 3) * (m === 1 || m === 2 ? 0.15 : 1), 10 + 1.4 * P.R[i], 1);\n    }\n  }\n  for (let h = 0; h \u003c 2; h++) {\n    let w = 0, T = 0, sx = 0;\n    for (let c = 0; c \u003c 255; c++) {\n      const e = (HC[c] - 0.15) * S.cn[c], x = S.cx[c] / S.cn[c];\n      if (e > 0 && x \u003c 32 === !h) (w += e), (sx += e * x), (T = max(T, HC[c]));\n    }\n    if (w > 0) add(sx / w, 118, T, min(3, w * 0.12), 20, 0.7);\n  }\n  if (S.boom > 0) add(S.bx, 112, 0.75, S.boom * 1.6, 18);\n  return n;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  const F = S.f, M = S.mat, A = S.al, LR = S.lr, LG = S.lg, LB = S.lb, LT = S.lt, GM = S.gm, t = S.t, hot = S.hot, n = lights(S);\n  const lx = LT[0], ly = LT[1], fw = LT[2] / (BB[bq(hot)] / 255), gc = bq(hot * 0.6);\n  figure(S);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, o = i * 3, m = M[i], ds = (px - lx) ** 2 + (py - ly) ** 2, qa = 1 / (1 + ds * LT[5]);\n    // The glory hole's near pool and long reach; below the floor, only through the opening.\n    let fq = qa * qa + 0.62 / (1 + ds / 500);\n    if (y > FL + 1) {\n      const xc = lx + ((px - lx) * (FL - ly)) / (py - ly);\n      fq *= 0.06 + 0.94 * sm(OX0 - 3, OX0 + 3, xc) * sm(OX1 + 3, OX1 - 3, xc) * exp(-(py - FL) / 40);\n    }\n    let r = 0.004 + LT[2] * fq, g = 0.003 + LT[3] * fq, b = 0.003 + LT[4] * fq;\n    for (let j = 6; j \u003c n * 6; j += 6) {\n      const dx = px - LT[j], dy = py - LT[j + 1];\n      let q = 1 / (1 + (dx * dx + dy * dy) * LT[j + 5]);\n      q *= q;\n      (r += LT[j + 2] * q), (g += LT[j + 3] * q), (b += LT[j + 4] * q);\n    }\n    (LR[i] = r), (LG[i] = g), (LB[i] = b);\n    const ex = (px - MX) / MRX, ey = (py - MY) / MRY, e2 = ex * ex + ey * ey;\n    if (m === 3) {\n      // The mouth, hottest in the middle, the fire churning.\n      const c = bq(hot * (1 - 0.2 * e2) + 0.07 * (vn(x * 0.6, y * 0.5 - t * 5) - 0.5));\n      for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j];\n      continue;\n    }\n    // The refractory round the mouth glows from the heat.\n    const gw = m === 2 ? exp(-(sqrt(e2) - 1) * 2.4) * 0.9 * fw : 0;\n    (F[o] = A[o] * r * 255 + BB[gc] * gw), (F[o + 1] = A[o + 1] * g * 255 + BB[gc + 1] * gw), (F[o + 2] = A[o + 2] * b * 255 + BB[gc + 2] * gw);\n    // The gaffer, a silhouette with a rim of light.\n    const c = GM[i];\n    if (c > 0) {\n      const rim = max(1 - GM[i + 1], 0.6 * (1 - GM[i + W]), 0.4 * (1 - GM[i - W])) * 330;\n      (F[o] = mix(F[o], 5 + r * rim, c)), (F[o + 1] = mix(F[o + 1], 4 + g * rim, c)), (F[o + 2] = mix(F[o + 2], 4 + b * rim, c));\n    }\n  }\n  heap(S);\n  if (S.pc.on) glass(S, S.pc);\n  if (S.fall.on) glass(S, S.fall);\n  flames(S);\n  pipe(S);\n  for (const p of S.sp) {\n    const c = bq(p.l > 5 ? p.T + 0.1 : 0.55 + 0.4 * p.l), a = p.l > 5 ? 1 : min(1, p.l * 1.5);\n    put(F, p.x, p.y, c, a), put(F, p.x - p.vx * 0.025, p.y - p.vy * 0.025, c, a * 0.5);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction put(F, x, y, c, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j], a);\n}\n\n// The cullet heap: hot shards glow, cool ones show their colour and glint.\nfunction heap(S) {\n  const { f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL, hc: HC, ci: CI, fa: FA, se: SE } = S;\n  for (let i = 108 * W; i \u003c N; i++) {\n    if (M[i] !== 7) continue;\n    const o = i * 3, fa = FA[i], se = SE[i], T = HC[CI[i]] * (0.94 + 0.12 * fa), v = 1 - sm(0.1, 0.34, T), lum = (LR[i] + LG[i] + LB[i]) / 3;\n    const gl = max(0, cos(fa * 12.6 - 2 * atan2(S.gy - (i >> 6), S.gx - (i & 63)))) ** 10 * lum * 2.4 * v * (1 - se);\n    const b = (0.3 + 3 * lum) * (0.35 + 0.8 * fa) * (1 - se) * v * GL[3], c = bq(T), f = 0.7 * flt(T);\n    for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j] * (0.95 - 0.4 * se) * (1 - f + f * GL[4 + j]) + GL[j] * b + gl * (100 + GL[j]);\n  }\n}\n\n// The glass as capsules between nodes, the nearest one winning each LED.\nfunction glass(S, P) {\n  const { gd: GD, gs: GS, gr: GR, gu: GU, gb: GB, gt: GT, f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL } = S, oy = P.dy;\n  let X0 = W, X1 = -1, Y0 = H, Y1 = -1;\n  for (let i = 0; i \u003c NN - 1; i++) {\n    const ax = P.X[i], ay = P.Y[i] + oy, bx = P.X[i + 1], by = P.Y[i + 1] + oy, ra = P.R[i], rb = P.R[i + 1], rr = max(ra, rb) + 1;\n    const x0 = max(0, floor(min(ax, bx) - rr)), x1 = min(W - 1, ceil(max(ax, bx) + rr)), y0 = max(0, floor(min(ay, by) - rr)), y1 = min(H - 1, ceil(max(ay, by) + rr));\n    (X0 = min(X0, x0)), (X1 = max(X1, x1)), (Y0 = min(Y0, y0)), (Y1 = max(Y1, y1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const k = y * W + x, dd = seg(x + 0.5 - ax, y + 0.5 - ay, bx - ax, by - ay), r = ra + (rb - ra) * TT;\n        if (dd - r \u003c GD[k]) (GD[k] = dd - r), (GS[k] = (i + TT) / (NN - 1)), (GR[k] = r), (GU[k] = QX * (by - ay) - QY * (bx - ax) >= 0 ? dd : -dd), (GB[k] = mix(P.B[i], P.B[i + 1], TT)), (GT[k] = mix(P.T[i], P.T[i + 1], TT));\n      }\n  }\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const k = y * W + x, sd = GD[k], m = M[k];\n      if (sd >= 0.5) continue;\n      GD[k] = 99;\n      if (m === 1 || m === 2) continue;\n      const a = cl(0.5 - sd, 0, 1), r = max(0.5, GR[k]), d = GU[k], u = cl(d / r, -1, 1), ad = abs(d), rb = GB[k] * r, o = k * 3;\n      const ib = rb > 0.6 ? sm(0, 0.8, rb - ad) : 0, ch = 2 * r * sqrt(1 - u * u) * (1 - 0.5 * ib);\n      // More glow through more glass, less through the bubble; the skin cools first.\n      const e = 1 - exp(-0.3 * ch), T = GT[k] - 0.16 * u * u, st = sin(GS[k] * S.l * 0.55 - S.rot + u * 2.4);\n      const c = bq(T * (0.62 + 0.38 * e) * (1 + 0.05 * st) + 0.06 * (1 - u * u) - 0.08 * ib), dim = 1 - 0.28 * ib, v = 1 - sm(0.14, 0.42, T), f = flt(T);\n      // Cool glass shows its colour and a highlight.\n      const lum = (LR[k] + LG[k] + LB[k]) / 3, bod = (0.25 + 1.2 * lum) * (0.55 + 0.45 * (1 - u * u)) * (0.85 + 0.15 * st) * (1 - 0.35 * ib) * GL[3];\n      const sp = exp(-(((u - 0.45) / 0.2) ** 2)) * (0.25 + 1.3 * lum) * 160 * v;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j] * dim * (1 - f + f * GL[4 + j]) + v * (GL[j] * bod + sp), a);\n    }\n}\n\n// Fire licks out over the top lip of the glory hole.\nfunction flames(S) {\n  const F = S.f, t = S.t, amt = 1.5 + 3 * (S.hot - 0.84), top = MY - MRY + 2;\n  for (let y = max(0, top - 15); y \u003c top; y++) {\n    const h = (top - y) / 15;\n    for (let x = MX - 7; x \u003c MX + 6; x++) {\n      const dx = (x + 0.5 - (MX - 0.8 + 2.5 * h + sin(t * 3 + y * 0.4) * h)) / (4.4 * (1 - 0.35 * h));\n      const dens = sm(0.2, 0.55, vn(x * 0.3, y * 0.25 + t * 7) * (1.2 - h) * exp(-dx * dx) * amt), c = bq(0.48 + 0.36 * dens);\n      for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += BB[c + j] * dens;\n    }\n  }\n}\n\n// The gaffer: capsules for head, cap, body and limbs, posed by the pipe.\nfunction figure(S) {\n  const GM = S.gm, q = cl((S.th - TH0) / (THF - TH0), 0, 1), lean = (1 - q) * (0.9 + 1.4 * (S.th - TH0)), bob = 0.8 * sin(PI * cl(S.bl / 0.8, 0, 1));\n  const hpx = 14.5 + 0.5 * lean, hpy = 16.6, shx = 16 + lean, shy = 9.8 + 0.4 * lean, hx = S.hx, hy = S.hy;\n  const hdx = mix(16.8 + 1.2 * lean, hx - BACK * sin(S.th) - 2, bob), hdy = mix(5.4 + 0.3 * lean, hy - BACK * cos(S.th) - 2.4, bob);\n  const ebx = shx + 0.4 * (hx - shx) - 0.5, eby = shy + 0.62 * (hy - shy) + 1.8;\n  let n = 0;\n  const cap = (a, b, c, d, r) => ((CP[n] = a), (CP[n + 1] = b), (CP[n + 2] = c - a), (CP[n + 3] = d - b), (CP[n + 4] = r), (n += 5));\n  // Body, apron, neck, capped head, arm, legs, feet.\n  cap(hpx, hpy, shx, shy, 2.9), cap(hpx - 0.3, hpy + 1.5, hpx + 1.2, hpy + 3.2, 2.4), cap(shx, shy, hdx, hdy, 1.2), cap(hdx, hdy, hdx, hdy, 2.5), cap(hdx - 1.2, hdy - 1.7, hdx + 3.4, hdy - 1.3, 0.9);\n  cap(shx, shy, ebx, eby, 1.4), cap(ebx, eby, hx, hy, 1.2);\n  cap(hpx, hpy + 2, 12.2, 21.6, 1.7), cap(12.2, 21.6, 10.6, 25.4, 1.4), cap(hpx + 0.6, hpy + 2, 17.6, 21.2, 1.7), cap(17.6, 21.2, 18.4, 25.4, 1.4);\n  cap(10.2, 25.6, 12.4, 25.6, 0.9), cap(18.2, 25.6, 20.4, 25.6, 0.9);\n  for (let y = 0; y \u003c DK + 1; y++)\n    for (let x = 5; x \u003c 32; x++) {\n      let c = 0;\n      for (let j = 0; j \u003c n; j += 5) c = max(c, cl(CP[j + 4] + 0.5 - seg(x + 0.5 - CP[j], y + 0.5 - CP[j + 1], CP[j + 2], CP[j + 3]), 0, 1));\n      GM[y * W + x] = c;\n    }\n}\n\n// The blowpipe, steel, its far end hot from the glass.\nfunction pipe(S) {\n  const F = S.f, M = S.mat, st = sin(S.th), ct = cos(S.th), L = PIPE + BACK, ax = S.hx - BACK * st, ay = S.hy - BACK * ct, ex = L * st, ey = L * ct;\n  for (let y = max(0, floor(min(ay, ay + ey) - 1)); y \u003c= min(H - 1, max(ay, ay + ey) + 1); y++)\n    for (let x = max(0, floor(min(ax, ax + ex) - 1)); x \u003c= min(W - 1, max(ax, ax + ex) + 1); x++) {\n      const k = y * W + x, c = cl(1.1 - seg(x + 0.5 - ax, y + 0.5 - ay, ex, ey), 0, 1), hb = bq(S.pT * sm(PIPE - 7, PIPE + 1, TT * L - BACK)), o = k * 3;\n      if (c \u003c= 0 || M[k] === 1) continue;\n      (F[o] = mix(F[o], 26 + S.lr[k] * 190 + BB[hb], c)), (F[o + 1] = mix(F[o + 1], 26 + S.lg[k] * 190 + BB[hb + 1], c)), (F[o + 2] = mix(F[o + 2], 30 + S.lb[k] * 200 + BB[hb + 2], c));\n    }\n}\n","layer":{"id":"layer-glassblower","type":"code","name":"glassblower","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glassblower\n// Family:  glass\n// Idea:    A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the swing pit of a glass studio, where a gather is stretched long\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1\n//\n// Knob 1: Glass. The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same.\n// Knob 2: Speed. At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower.\n// Knob 3: Length. How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1.\n// Knob 4: Heat. How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter.\n// Buttons: K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.\n\nconst W = 64, H = 128, N = W * H, NN = 40;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, cbrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// Distance to a segment; TT is how far along it.\nlet TT = 0, QX = 0, QY = 0;\nfunction seg(px, py, ex, ey) {\n  TT = cl((px * ex + py * ey) / (ex * ex + ey * ey + 1e-6), 0, 1);\n  (QX = px - TT * ex), (QY = py - TT * ey);\n  return sqrt(QX * QX + QY * QY);\n}\n\n// Black body, 0..1: dark red, red, orange, yellow, near white.\nconst BBK = [0, 0, 0, 0, 0.12, 46, 3, 0, 0.25, 118, 10, 0, 0.38, 196, 34, 0, 0.5, 245, 80, 6, 0.62, 255, 132, 22, 0.75, 255, 180, 62, 0.87, 255, 222, 132, 1, 255, 246, 216];\nconst BB = new Float32Array(513 * 3);\nfor (let q = 0, k = 0; q \u003c= 512; q++) {\n  const T = q / 512;\n  while (k \u003c 28 && T > BBK[k + 4]) k += 4;\n  for (let c = 0; c \u003c 3; c++) BB[q * 3 + c] = mix(BBK[k + 1 + c], BBK[k + 5 + c], (T - BBK[k]) / (BBK[k + 4] - BBK[k]));\n}\nconst bq = (T) => (((T \u003c 0 ? 0 : T > 1 ? 1 : T) * 512 + 0.5) | 0) * 3;\n// Clear, cobalt, amber, green, ruby: colour and body when cold, then what passes of the glow.\nconst GLASS = [\n  [150, 212, 204, 0.3, 1, 0.97, 0.9], [34, 72, 238, 1, 0.3, 0.38, 1], [238, 138, 24, 1, 1, 0.62, 0.2],\n  [40, 208, 88, 1, 0.42, 1, 0.5], [228, 18, 70, 1, 1, 0.18, 0.4],\n];\n// As the glow fades the glass filters it, and the colour comes through.\nconst flt = (T) => 0.95 * (1 - sm(0.45, 0.85, T));\n\n// Deck, floor, the pit's opening, the glory hole (a drum seen end on at a slant), hands and pipe.\nconst DK = 26, FL = 31, PT = 35, OX0 = 19, OX1 = 47;\nconst MX = 49, MY = 15, MRX = 3.6, MRY = 7, FRX = 6.5, FRY = 11;\nconst PIPE = 27, BACK = 8, TH0 = 0.34, HX = 24.5, HY = 19.5, HX2 = 25.5, HY2 = 17.5;\nconst THF = atan2(MX - HX2, MY - HY2);\nconst GATHER = 0, OUT = 1, BLOW = 2, SWING = 3, LIFT = 4, REHEAT = 5, CUT = 6, EMPTY = 7;\nconst DUR = [1.3, 1, 0.8, 5, 0.9, 1.8, 1.4, 0.9];\nconst V0 = 1300, OM = (2 * PI) / 2.3, START = 13.6, FS = new Float32Array(NN), CP = new Float32Array(80);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), piece = () => ({ X: F(NN), Y: F(NN), R: F(NN), B: F(NN), T: F(NN), on: 0, dy: 0, vy: 0 });\n  const S = (params.s = {\n    t: 0, th: THF, rho: 1, sw: 0, be: 0, bv: 0, vx: 0, tx: 0, ty: 0, l: 4, R0: 3, bl: 9, rot: 0, pT: 0, boom: 0, tmax: 0.8, live: 0, k1: -1, gl: [0, 0, 0, 1, 1, 1, 1], pc: piece(), fall: piece(), sp: [], lt: F(84),\n    fa: F(N), se: F(N), ci: new Uint8Array(N), hc: F(256), cx: F(256), cn: F(256), top: F(W),\n    f: F(N * 3), lr: F(N), lg: F(N), lb: F(N), mat: new Uint8Array(N), al: F(N * 3), gm: F(N),\n    gd: F(N).fill(99), gs: F(N), gr: F(N), gu: F(N), gb: F(N), gt: F(N),\n  });\n  maps(S);\n  go(S, GATHER);\n}\n\nfunction maps(S) {\n  const M = S.mat, A = S.al, HG = S.top;\n  for (let x = 0; x \u003c W; x++) HG[x] = 122 - 10 * ((x + 0.5 - 33) / 31) ** 2 + 2 * (vn(x * 0.3, 5) - 0.5);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, gr = 0.85 + 0.3 * hash(x, y);\n    let m = 0, a = 0, c = [1, 0.9, 0.8];\n    if (((px - MX) / MRX) ** 2 + ((py - MY) / MRY) ** 2 \u003c 1) m = 3;\n    else if (((px - MX) / FRX) ** 2 + ((py - MY) / FRY) ** 2 \u003c 1) (m = 2), (a = 0.5 * (0.8 + 0.3 * hash(x, y + 7))), (c = [1, 0.84, 0.7]);\n    else if (x > MX && y \u003c FL && y > MY - FRY - 1) {\n      // The drum with a rim on top and two bands, a dark stand below.\n      m = 1;\n      a = y \u003c MY + FRY ? (y === MY - FRY ? 0.9 : 0.3 * (0.35 + 0.65 * cos(((py - MY) / FRY) * 1.45))) * (x === 56 || x === 61 ? 1.8 : 1) : y === MY + FRY ? 0.7 : 0.12;\n      c = [0.9, 0.93, 1];\n    } else if (y >= FL && y \u003c PT && (x \u003c OX0 || x > OX1)) (m = 4), (a = y === FL ? 0.8 : 0.3 * gr * (0.8 + 0.4 * hash(x >> 1, y))), (c = [1, 0.95, 0.88]);\n    else if ((y >= DK && y \u003c DK + 2 && x \u003c 23) || ((x === 3 || x === 19) && y >= DK && y \u003c FL)) (m = 5), (a = y === DK ? 0.9 : 0.35), (c = [0.9, 0.93, 1]);\n    else if (py >= HG[x]) {\n      // Broken glass: facets on a jittered grid, dark seams between them.\n      m = 7;\n      let d1 = 9, d2 = 9, id = 0, ci = 0;\n      for (let j = 0; j \u003c 9; j++) {\n        const cx = floor(x / 3) + (j % 3) - 1, cy = floor(y / 2.5) + floor(j / 3) - 1, d = (px - (cx + hash(cx, cy)) * 3) ** 2 + (py - (cy + hash(cy, cx + 9)) * 2.5) ** 2;\n        if (d \u003c d1) (d2 = d1), (d1 = d), (id = hash(cx + 31, cy)), (ci = cl((cy - 42) * 24 + cx + 1, 0, 254));\n        else if (d \u003c d2) d2 = d;\n      }\n      (S.ci[i] = ci), (S.cx[ci] += px), S.cn[ci]++;\n      (S.fa[i] = id), (S.se[i] = sm(0.9, 0.2, sqrt(d2) - sqrt(d1)) * 0.7 + (py - HG[x] \u003c 1 ? -0.3 : 0));\n    } else if (y >= FL) {\n      // Firebrick courses, sooted in clouds.\n      m = 6;\n      const r = floor(y / 3), sx = x + (r & 1) * 3;\n      a = y % 3 === 2 || sx % 7 === 6 ? 0.1 : 0.5 * (0.7 + 0.6 * hash(floor(sx / 7), r)) * (0.45 + 0.7 * vn(x * 0.11, y * 0.045)) * gr * (x \u003c 2 || x > 61 ? 0.45 : 1);\n      c = [1, 0.76, 0.58];\n    } else {\n      // Corrugated sheeting behind the shop.\n      a = 0.5 * (0.88 + 0.12 * cos(px * PI * 0.5)) * (x % 16 === 15 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 0.07, y * 0.15));\n      c = [0.95, 0.9, 0.85];\n    }\n    M[i] = m;\n    for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = a * c[j];\n  }\n}\n// Heat left in the heap where hot glass lands, shard by shard.\nfunction heat(S, x, y, T, r) {\n  for (let j = floor(y - r); j \u003c= y + r; j++)\n    for (let i = floor(x - r); i \u003c= x + r; i++) {\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || S.mat[j * W + i] !== 7) continue;\n      const c = S.ci[j * W + i];\n      S.hc[c] = max(S.hc[c], T * sm(r + 0.5, r * 0.3, sqrt((i + 0.5 - x) ** 2 + (j + 0.5 - y) ** 2)));\n    }\n}\n\nfunction go(S, ph) {\n  (S.ph = ph), (S.pt = 0), (S.th1 = S.th);\n  if (ph === GATHER) (S.pc.on = 1), (S.V = 60), (S.b = S.bt = 0), (S.sb = S.sbt = 0.3), (S.pass = 1), S.pc.T.fill(S.tmax);\n  else if (ph === BLOW) blow(S, S.pass > 1 ? 0.1 : 0.4);\n  else if (ph === SWING) S.sw = 0;\n}\nfunction next(S) {\n  const p = S.ph;\n  go(S, p === SWING ? (S.pass > 1 ? CUT : LIFT) : p === REHEAT ? OUT : p === EMPTY ? GATHER : p + 1);\n  if (p === REHEAT) S.pass++;\n}\nfunction blow(S, db) {\n  (S.bt = min(0.74, S.b + db)), (S.sbt = min(0.84, S.pass > 1 ? S.sb + 0.12 : 0.55)), (S.bl = 0);\n}\nconst live = (S) => S.pc.on && (S.ph === BLOW || S.ph === SWING || (S.ph === CUT && S.pt \u003c 0.4));\n\n// Radius from volume and length: a neck, a body narrowing down, a round end.\nfunction shape(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1);\n  let R = max(1, S.R0);\n  for (let it = 0; it \u003c 3; it++) {\n    let sum = 0;\n    for (let i = 0; i \u003c NN; i++) {\n      const s = i / (NN - 1), a = s * l, ct = 1 - min(1, (a + 0.25 * R) / (1.1 * R)), cb = 1 - min(1, (l - a) / (0.62 * R));\n      FS[i] = (1 - 0.38 * s) * sqrt(1 - ct * ct) * sqrt(max(0, 1 - cb * cb));\n      sum += FS[i] * FS[i];\n    }\n    R = max(1, sqrt(S.V / (PI * dl * max(1e-3, sum))));\n  }\n  S.R0 = R;\n  for (let i = 0; i \u003c NN; i++) {\n    const q = (i / (NN - 1) - 0.05) / (S.sb - 0.05), B = q > 0 && q \u003c 1 ? S.b * sqrt(1 - (2 * q - 1) ** 2) : 0;\n    (P.B[i] = B), (P.R[i] = (R * FS[i]) / sqrt(1 - B * B));\n  }\n}\n// Off the pipe along its axis, then hanging and trailing the swing; straight when lifted.\nfunction line(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1), th = S.th, w0 = 0.8 * S.R0 + 1.5;\n  let x = S.tx - sin(th) * 1.2, y = S.ty - cos(th) * 1.2;\n  for (let i = 0; i \u003c NN; i++) {\n    (P.X[i] = x), (P.Y[i] = y);\n    const s = i / (NN - 1), w = exp((-s * l) / w0), a = mix(th * w + (1 - w) * S.be * s ** 0.8, th, S.rho);\n    (x += sin(a) * dl), (y += cos(a) * dl);\n  }\n}\n// Radiative cooling, faster where the glass is thin.\nconst cool = (T, R, d) => T - ((0.22 * (T + 0.1)) / max(2.2, R) ** 0.7) * d;\n\nfunction step(S, d) {\n  (S.t += d), (S.pt += d);\n  const dur = () => (S.ph === SWING ? (S.pass > 1 ? 6.5 : 5) : DUR[S.ph]);\n  if (S.pt >= dur()) next(S);\n  const ph = S.ph, pt = S.pt, D = dur(), u = sm(0, 1, pt / D), P = S.pc, F = S.fall, HG = S.top;\n  let th = S.th, rho = S.rho, inH = 0;\n  S.env = 0;\n  if (ph === GATHER || ph === REHEAT) (th = THF + 0.015 * sin(S.t * 3)), (rho = inH = 1);\n  else if (ph === OUT) (th = mix(S.th1, TH0, u)), (rho = 1 - sm(0.3, 0.9, pt / D)), (inH = 1 - sm(0, 0.25, pt / D));\n  else if (ph === BLOW) (th = TH0 + 0.03 * sin(pt * 4)), (rho = 0);\n  else if (ph === SWING) {\n    S.env = sm(0, 1.4, pt) * (1 - sm(D - 1.1, D, pt));\n    S.sw += d * OM * sqrt(62 / S.L) * (1 - 0.15 * (S.l / S.L));\n    (th = TH0 + S.A * S.env * sin(S.sw)), (rho = 0);\n  } else if (ph === LIFT || ph === EMPTY) (th = mix(S.th1, THF, u)), (rho = sm(0, 0.3, pt / D)), (inH = sm(0.75, 1, pt / D));\n  else {\n    (th = mix(S.th1, TH0, sm(0, 0.4, pt))), (rho = 0);\n    if (P.on && pt >= 0.4) cut(S);\n  }\n  const q = cl((th - TH0) / (THF - TH0), 0, 1);\n  (S.th = th), (S.rho = rho), (S.hx = mix(HX, HX2, q)), (S.hy = mix(HY, HY2, q));\n  const tx = S.hx + PIPE * sin(th), ty = S.hy + PIPE * cos(th), vx = (tx - S.tx) / d, ax = cl((vx - S.vx) / d, -400, 400), Le = max(10, 0.55 * S.l);\n  (S.tx = tx), (S.ty = ty), (S.vx = vx);\n  // The hanging part is a pendulum on a moving pivot.\n  if (rho > 0.5) S.be = S.bv = 0;\n  else (S.bv += ((-190 / Le) * sin(S.be) - 1.3 * S.bv - (ax / Le) * cos(S.be)) * d), (S.be = cl(S.be + S.bv * d, -0.7, 0.7));\n  (S.b += (S.bt - S.b) * min(1, d * 4)), (S.sb += (S.sbt - S.sb) * min(1, d * 4)), (S.bl += d), (S.rot += d * (3 + 5 * inH));\n  if (P.on) {\n    if (ph === GATHER) (S.V = max(60, V0 * (S.L / 62) * sm(0, 1.1, pt))), (S.l = 1.9 * cbrt((3 * S.V) / (4 * PI)));\n    let tm = 0;\n    for (let i = 0; i \u003c NN; i++) tm += P.T[i] / NN;\n    if (rho \u003c 0.5) S.l += 0.42 * sm(0.15, 0.55, tm) * max(0, (S.pass > 1 ? S.L : 0.64 * S.L) - S.l) * (0.3 + 0.7 * S.env) * d;\n    shape(S), line(S);\n    // The glory hole brings it all back up.\n    for (let i = 0; i \u003c NN; i++) {\n      const T = P.T[i] + (S.tmax - P.T[i]) * (1 - exp(-1.9 * d)) * inH;\n      P.T[i] = mix(T, cool(T, P.R[i], d), 1 - inH);\n    }\n    (S.pT = mix(S.pT, P.T[0] * 0.7, min(1, d * 2))), (S.gx = P.X[NN >> 1]), (S.gy = P.Y[NN >> 1]);\n  } else S.pT *= exp(-d * 0.5);\n  if (F.on) {\n    (F.vy += 300 * d), (F.dy += F.vy * d), (S.gx = F.X[NN >> 1]), (S.gy = F.Y[NN >> 1] + F.dy);\n    for (let i = 0; i \u003c NN; i++) F.T[i] = cool(F.T[i], F.R[i], d);\n    // It hits the heap and goes to pieces.\n    const bx = F.X[NN - 1], hy = HG[cl(bx | 0, 0, W - 1)];\n    if (F.Y[NN - 1] + F.dy > hy - 1) {\n      heat(S, bx, hy + 1, F.T[NN - 1] + 0.1, 3.5);\n      for (let i = 0; i \u003c NN * 2; i++) {\n        const j = i >> 1;\n        S.sp.push({ x: F.X[j] + (rnd() - 0.5) * F.R[j], y: F.Y[j] + F.dy, vx: (rnd() - 0.5) * 60, vy: F.vy * (0.5 + 0.4 * rnd()) - 30 * rnd(), l: 9, T: F.T[j] });\n      }\n      (F.on = 0), (S.boom = 1), (S.bx = bx);\n    }\n  }\n  for (let c = 0; c \u003c 255; c++) if (S.hc[c] > 0) S.hc[c] -= 0.03 * (S.hc[c] + 0.08) * d;\n  S.boom = max(0, S.boom - d * 2.5);\n  for (const p of S.sp) {\n    (p.vy += 200 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 1.2);\n    if (p.x \u003c 0.5 || p.x > W - 0.5) (p.vx *= -0.5), (p.x = cl(p.x, 0.5, W - 0.5));\n    // A shard bounces, then settles into the heap and leaves its heat there.\n    if (p.l > 5 && p.y > HG[p.x | 0]) p.vy > 70 ? ((p.vy *= -0.35), (p.vx *= 0.6), (p.y = HG[p.x | 0])) : (heat(S, p.x, p.y + 1, p.T, 1.3 + rnd()), (p.l = 0));\n  }\n  S.sp = S.sp.filter((p) => p.l > 0 && p.y \u003c H + 2);\n}\n\n// The jacks score the neck and the piece drops away into the pit.\nfunction cut(S) {\n  const P = S.pc, F = S.fall;\n  for (const k of \"XYRBT\") F[k].set(P[k]);\n  (F.on = 1), (F.dy = F.vy = P.on = 0), (S.pT = 0.75), (S.l = 4), (S.V = 60);\n  for (let k = 0; k \u003c 14; k++) S.sp.push({ x: S.tx, y: S.ty + 1, vx: (rnd() - 0.5) * 34, vy: -10 - 28 * rnd(), l: 0.6 + 0.4 * rnd(), T: 0.8 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], -1, 1), k4 = cl(k[3], 0, 1);\n  if (k1 !== S.k1) {\n    const u = k1 * 4, i = min(3, floor(u)), f = sm(0.25, 0.75, u - i);\n    for (let c = 0; c \u003c 7; c++) S.gl[c] = mix(GLASS[i][c], GLASS[i + 1][c], f);\n    S.k1 = k1;\n  }\n  (S.L = 62 + 18 * k3), (S.A = 0.29 + 0.15 * k3), (S.hot = 0.84 + 0.16 * k4), (S.tmax = 0.86 + 0.18 * k4), (S.fI = 1 + 0.55 * k4);\n  if (!S.live) {\n    while (!S.live) step(S, 1 / 30), (S.live = S.t >= START ? 1 : 0);\n    // The last piece lies broken in the heap, still red.\n    heat(S, 31 + 6 * rnd(), 125, 0.44, 5);\n    for (let k = 0; k \u003c 7; k++) heat(S, 2 + 60 * rnd(), 112 + 16 * rnd(), 0.18 + 0.14 * rnd(), 1.5 + 2 * rnd());\n  }\n  const bp = input.btnPressed || [];\n  if (bp[0] && live(S)) go(S, LIFT);\n  if (bp[1] && live(S)) blow(S, 0.14);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\n// Lights: the glory hole, seven points along the gather, the heap's embers, the crash.\nfunction lights(S) {\n  const LT = S.lt, M = S.mat, HC = S.hc, GL = S.gl;\n  let n = 0;\n  const add = (x, y, T, w, sg, g = 0) => {\n    const o = n++ * 6, b = bq(T), f = g * flt(T);\n    (LT[o] = x), (LT[o + 1] = y), (LT[o + 5] = 1 / (sg * sg));\n    for (let c = 0; c \u003c 3; c++) LT[o + 2 + c] = (BB[b + c] / 255) * w * (1 - f + f * GL[4 + c]);\n  };\n  add(MX - 2.5, MY + 0.5, S.hot, S.fI * (0.92 + 0.12 * vn(S.t * 4, 3)), 13);\n  for (const P of [S.pc, S.fall]) {\n    if (!P.on) continue;\n    for (let i = 3; i \u003c NN; i += 6) {\n      const x = P.X[i], y = P.Y[i] + P.dy, m = x >= 0 && x \u003c W && y >= 0 && y \u003c H ? M[(y | 0) * W + (x | 0)] : 0;\n      if (y \u003c H + 12) add(x, y, P.T[i], 0.32 * min(2, P.R[i] / 3) * (m === 1 || m === 2 ? 0.15 : 1), 10 + 1.4 * P.R[i], 1);\n    }\n  }\n  for (let h = 0; h \u003c 2; h++) {\n    let w = 0, T = 0, sx = 0;\n    for (let c = 0; c \u003c 255; c++) {\n      const e = (HC[c] - 0.15) * S.cn[c], x = S.cx[c] / S.cn[c];\n      if (e > 0 && x \u003c 32 === !h) (w += e), (sx += e * x), (T = max(T, HC[c]));\n    }\n    if (w > 0) add(sx / w, 118, T, min(3, w * 0.12), 20, 0.7);\n  }\n  if (S.boom > 0) add(S.bx, 112, 0.75, S.boom * 1.6, 18);\n  return n;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  const F = S.f, M = S.mat, A = S.al, LR = S.lr, LG = S.lg, LB = S.lb, LT = S.lt, GM = S.gm, t = S.t, hot = S.hot, n = lights(S);\n  const lx = LT[0], ly = LT[1], fw = LT[2] / (BB[bq(hot)] / 255), gc = bq(hot * 0.6);\n  figure(S);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, o = i * 3, m = M[i], ds = (px - lx) ** 2 + (py - ly) ** 2, qa = 1 / (1 + ds * LT[5]);\n    // The glory hole's near pool and long reach; below the floor, only through the opening.\n    let fq = qa * qa + 0.62 / (1 + ds / 500);\n    if (y > FL + 1) {\n      const xc = lx + ((px - lx) * (FL - ly)) / (py - ly);\n      fq *= 0.06 + 0.94 * sm(OX0 - 3, OX0 + 3, xc) * sm(OX1 + 3, OX1 - 3, xc) * exp(-(py - FL) / 40);\n    }\n    let r = 0.004 + LT[2] * fq, g = 0.003 + LT[3] * fq, b = 0.003 + LT[4] * fq;\n    for (let j = 6; j \u003c n * 6; j += 6) {\n      const dx = px - LT[j], dy = py - LT[j + 1];\n      let q = 1 / (1 + (dx * dx + dy * dy) * LT[j + 5]);\n      q *= q;\n      (r += LT[j + 2] * q), (g += LT[j + 3] * q), (b += LT[j + 4] * q);\n    }\n    (LR[i] = r), (LG[i] = g), (LB[i] = b);\n    const ex = (px - MX) / MRX, ey = (py - MY) / MRY, e2 = ex * ex + ey * ey;\n    if (m === 3) {\n      // The mouth, hottest in the middle, the fire churning.\n      const c = bq(hot * (1 - 0.2 * e2) + 0.07 * (vn(x * 0.6, y * 0.5 - t * 5) - 0.5));\n      for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j];\n      continue;\n    }\n    // The refractory round the mouth glows from the heat.\n    const gw = m === 2 ? exp(-(sqrt(e2) - 1) * 2.4) * 0.9 * fw : 0;\n    (F[o] = A[o] * r * 255 + BB[gc] * gw), (F[o + 1] = A[o + 1] * g * 255 + BB[gc + 1] * gw), (F[o + 2] = A[o + 2] * b * 255 + BB[gc + 2] * gw);\n    // The gaffer, a silhouette with a rim of light.\n    const c = GM[i];\n    if (c > 0) {\n      const rim = max(1 - GM[i + 1], 0.6 * (1 - GM[i + W]), 0.4 * (1 - GM[i - W])) * 330;\n      (F[o] = mix(F[o], 5 + r * rim, c)), (F[o + 1] = mix(F[o + 1], 4 + g * rim, c)), (F[o + 2] = mix(F[o + 2], 4 + b * rim, c));\n    }\n  }\n  heap(S);\n  if (S.pc.on) glass(S, S.pc);\n  if (S.fall.on) glass(S, S.fall);\n  flames(S);\n  pipe(S);\n  for (const p of S.sp) {\n    const c = bq(p.l > 5 ? p.T + 0.1 : 0.55 + 0.4 * p.l), a = p.l > 5 ? 1 : min(1, p.l * 1.5);\n    put(F, p.x, p.y, c, a), put(F, p.x - p.vx * 0.025, p.y - p.vy * 0.025, c, a * 0.5);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction put(F, x, y, c, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j], a);\n}\n\n// The cullet heap: hot shards glow, cool ones show their colour and glint.\nfunction heap(S) {\n  const { f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL, hc: HC, ci: CI, fa: FA, se: SE } = S;\n  for (let i = 108 * W; i \u003c N; i++) {\n    if (M[i] !== 7) continue;\n    const o = i * 3, fa = FA[i], se = SE[i], T = HC[CI[i]] * (0.94 + 0.12 * fa), v = 1 - sm(0.1, 0.34, T), lum = (LR[i] + LG[i] + LB[i]) / 3;\n    const gl = max(0, cos(fa * 12.6 - 2 * atan2(S.gy - (i >> 6), S.gx - (i & 63)))) ** 10 * lum * 2.4 * v * (1 - se);\n    const b = (0.3 + 3 * lum) * (0.35 + 0.8 * fa) * (1 - se) * v * GL[3], c = bq(T), f = 0.7 * flt(T);\n    for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j] * (0.95 - 0.4 * se) * (1 - f + f * GL[4 + j]) + GL[j] * b + gl * (100 + GL[j]);\n  }\n}\n\n// The glass as capsules between nodes, the nearest one winning each LED.\nfunction glass(S, P) {\n  const { gd: GD, gs: GS, gr: GR, gu: GU, gb: GB, gt: GT, f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL } = S, oy = P.dy;\n  let X0 = W, X1 = -1, Y0 = H, Y1 = -1;\n  for (let i = 0; i \u003c NN - 1; i++) {\n    const ax = P.X[i], ay = P.Y[i] + oy, bx = P.X[i + 1], by = P.Y[i + 1] + oy, ra = P.R[i], rb = P.R[i + 1], rr = max(ra, rb) + 1;\n    const x0 = max(0, floor(min(ax, bx) - rr)), x1 = min(W - 1, ceil(max(ax, bx) + rr)), y0 = max(0, floor(min(ay, by) - rr)), y1 = min(H - 1, ceil(max(ay, by) + rr));\n    (X0 = min(X0, x0)), (X1 = max(X1, x1)), (Y0 = min(Y0, y0)), (Y1 = max(Y1, y1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const k = y * W + x, dd = seg(x + 0.5 - ax, y + 0.5 - ay, bx - ax, by - ay), r = ra + (rb - ra) * TT;\n        if (dd - r \u003c GD[k]) (GD[k] = dd - r), (GS[k] = (i + TT) / (NN - 1)), (GR[k] = r), (GU[k] = QX * (by - ay) - QY * (bx - ax) >= 0 ? dd : -dd), (GB[k] = mix(P.B[i], P.B[i + 1], TT)), (GT[k] = mix(P.T[i], P.T[i + 1], TT));\n      }\n  }\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const k = y * W + x, sd = GD[k], m = M[k];\n      if (sd >= 0.5) continue;\n      GD[k] = 99;\n      if (m === 1 || m === 2) continue;\n      const a = cl(0.5 - sd, 0, 1), r = max(0.5, GR[k]), d = GU[k], u = cl(d / r, -1, 1), ad = abs(d), rb = GB[k] * r, o = k * 3;\n      const ib = rb > 0.6 ? sm(0, 0.8, rb - ad) : 0, ch = 2 * r * sqrt(1 - u * u) * (1 - 0.5 * ib);\n      // More glow through more glass, less through the bubble; the skin cools first.\n      const e = 1 - exp(-0.3 * ch), T = GT[k] - 0.16 * u * u, st = sin(GS[k] * S.l * 0.55 - S.rot + u * 2.4);\n      const c = bq(T * (0.62 + 0.38 * e) * (1 + 0.05 * st) + 0.06 * (1 - u * u) - 0.08 * ib), dim = 1 - 0.28 * ib, v = 1 - sm(0.14, 0.42, T), f = flt(T);\n      // Cool glass shows its colour and a highlight.\n      const lum = (LR[k] + LG[k] + LB[k]) / 3, bod = (0.25 + 1.2 * lum) * (0.55 + 0.45 * (1 - u * u)) * (0.85 + 0.15 * st) * (1 - 0.35 * ib) * GL[3];\n      const sp = exp(-(((u - 0.45) / 0.2) ** 2)) * (0.25 + 1.3 * lum) * 160 * v;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j] * dim * (1 - f + f * GL[4 + j]) + v * (GL[j] * bod + sp), a);\n    }\n}\n\n// Fire licks out over the top lip of the glory hole.\nfunction flames(S) {\n  const F = S.f, t = S.t, amt = 1.5 + 3 * (S.hot - 0.84), top = MY - MRY + 2;\n  for (let y = max(0, top - 15); y \u003c top; y++) {\n    const h = (top - y) / 15;\n    for (let x = MX - 7; x \u003c MX + 6; x++) {\n      const dx = (x + 0.5 - (MX - 0.8 + 2.5 * h + sin(t * 3 + y * 0.4) * h)) / (4.4 * (1 - 0.35 * h));\n      const dens = sm(0.2, 0.55, vn(x * 0.3, y * 0.25 + t * 7) * (1.2 - h) * exp(-dx * dx) * amt), c = bq(0.48 + 0.36 * dens);\n      for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += BB[c + j] * dens;\n    }\n  }\n}\n\n// The gaffer: capsules for head, cap, body and limbs, posed by the pipe.\nfunction figure(S) {\n  const GM = S.gm, q = cl((S.th - TH0) / (THF - TH0), 0, 1), lean = (1 - q) * (0.9 + 1.4 * (S.th - TH0)), bob = 0.8 * sin(PI * cl(S.bl / 0.8, 0, 1));\n  const hpx = 14.5 + 0.5 * lean, hpy = 16.6, shx = 16 + lean, shy = 9.8 + 0.4 * lean, hx = S.hx, hy = S.hy;\n  const hdx = mix(16.8 + 1.2 * lean, hx - BACK * sin(S.th) - 2, bob), hdy = mix(5.4 + 0.3 * lean, hy - BACK * cos(S.th) - 2.4, bob);\n  const ebx = shx + 0.4 * (hx - shx) - 0.5, eby = shy + 0.62 * (hy - shy) + 1.8;\n  let n = 0;\n  const cap = (a, b, c, d, r) => ((CP[n] = a), (CP[n + 1] = b), (CP[n + 2] = c - a), (CP[n + 3] = d - b), (CP[n + 4] = r), (n += 5));\n  // Body, apron, neck, capped head, arm, legs, feet.\n  cap(hpx, hpy, shx, shy, 2.9), cap(hpx - 0.3, hpy + 1.5, hpx + 1.2, hpy + 3.2, 2.4), cap(shx, shy, hdx, hdy, 1.2), cap(hdx, hdy, hdx, hdy, 2.5), cap(hdx - 1.2, hdy - 1.7, hdx + 3.4, hdy - 1.3, 0.9);\n  cap(shx, shy, ebx, eby, 1.4), cap(ebx, eby, hx, hy, 1.2);\n  cap(hpx, hpy + 2, 12.2, 21.6, 1.7), cap(12.2, 21.6, 10.6, 25.4, 1.4), cap(hpx + 0.6, hpy + 2, 17.6, 21.2, 1.7), cap(17.6, 21.2, 18.4, 25.4, 1.4);\n  cap(10.2, 25.6, 12.4, 25.6, 0.9), cap(18.2, 25.6, 20.4, 25.6, 0.9);\n  for (let y = 0; y \u003c DK + 1; y++)\n    for (let x = 5; x \u003c 32; x++) {\n      let c = 0;\n      for (let j = 0; j \u003c n; j += 5) c = max(c, cl(CP[j + 4] + 0.5 - seg(x + 0.5 - CP[j], y + 0.5 - CP[j + 1], CP[j + 2], CP[j + 3]), 0, 1));\n      GM[y * W + x] = c;\n    }\n}\n\n// The blowpipe, steel, its far end hot from the glass.\nfunction pipe(S) {\n  const F = S.f, M = S.mat, st = sin(S.th), ct = cos(S.th), L = PIPE + BACK, ax = S.hx - BACK * st, ay = S.hy - BACK * ct, ex = L * st, ey = L * ct;\n  for (let y = max(0, floor(min(ay, ay + ey) - 1)); y \u003c= min(H - 1, max(ay, ay + ey) + 1); y++)\n    for (let x = max(0, floor(min(ax, ax + ex) - 1)); x \u003c= min(W - 1, max(ax, ax + ex) + 1); x++) {\n      const k = y * W + x, c = cl(1.1 - seg(x + 0.5 - ax, y + 0.5 - ay, ex, ey), 0, 1), hb = bq(S.pT * sm(PIPE - 7, PIPE + 1, TT * L - BACK)), o = k * 3;\n      if (c \u003c= 0 || M[k] === 1) continue;\n      (F[o] = mix(F[o], 26 + S.lr[k] * 190 + BB[hb], c)), (F[o + 1] = mix(F[o + 1], 26 + S.lg[k] * 190 + BB[hb + 1], c)), (F[o + 2] = mix(F[o + 2], 30 + S.lb[k] * 200 + BB[hb + 2], c));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glass","min":0,"max":1,"about":"The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower."},{"name":"Length","min":-1,"max":1,"about":"How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1."},{"name":"Heat","min":0,"max":1,"about":"How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter."}],"start":[0,2,0,0.06],"measures":{"motion":0.2176,"detail":0.046,"edges":0.1956,"complexity":1.533,"coverage":0.4076,"colour":0.1924,"drift":0.0806},"knobResponse":[0.0366,0.0488,0.0315,0.0412]},{"slug":"glitter-fall","title":"Glitter Fall","family":"cosmetic","round":29,"note":"검은 화면 위로 분홍 글리터가 흔들리는 줄기로 쏟아지고, 육각 조각 하나하나가 제 박자로 돌다가 면이 빛을 향할 때 반짝여요. 바닥에 쌓인 더미는 바닥 틈으로 모래시계처럼 빠져요. K1 은 색상환을 다 돌고, 누르면 더미 윗층이 공중으로 튀어 올라요.","idea":"Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.","buttons":"K1 tap throws the top of the heap up into the air, and it flashes all the way back down.","code":"// ===== Patternflow pattern =====\n// Title:   Glitter Fall\n// Family:  cosmetic\n// Idea:    Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after loose cosmetic glitter poured under a display lamp\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1\n//\n// Knob 1: Hue. The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall.\n// Knob 2: Speed. How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower.\n// Knob 3: Amount. How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast.\n// Knob 4: Size. The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble.\n// Buttons: K1 tap throws the top of the heap up into the air, and it flashes all the way back down.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, abs, sqrt, log, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Every flake carries one of NS seeds, which fix its colour class, how it lies\n// once it has landed and how bright it is. A grain in the heap keeps its seed,\n// so the heap's texture and glints stay put while the lamp moves.\nconst NS = 1024;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst TX = new Float32Array(NS), TY = new Float32Array(NS), JIT = new Float32Array(NS), CLS = new Uint8Array(NS);\nfor (let i = 0; i \u003c NS; i++) {\n  // A landed flake lies roughly flat: its tilt is a small Gaussian.\n  const r = sqrt(-2 * log(hash(i * 4) + 1e-6)) * 0.3, a = 2 * PI * hash(i * 4 + 1);\n  TX[i] = r * cos(a);\n  TY[i] = r * sin(a);\n  JIT[i] = hash(i * 4 + 2);\n  const c = hash(i * 4 + 3);\n  // Main colour, a lighter tint, a deeper shade, and silver.\n  CLS[i] = c \u003c 0.5 ? 0 : c \u003c 0.7 ? 1 : c \u003c 0.85 ? 2 : 3;\n}\n// Hue offset, saturation and value of each class, and how much of the hue a\n// flash keeps. Silver keeps a breath of the hue so it sits in the same mix.\nconst PAL = [\n  [0, 0.85, 0.8, 0.45],\n  [-0.03, 0.55, 0.95, 0.35],\n  [0.03, 1, 0.65, 0.55],\n  [0, 0.1, 0.5, 0.08],\n];\n\n// The heap's grains sit one to an LED, stacked in columns from the floor up.\n// HEAP is how many grains make the floor open, LOW how many it keeps.\nconst HEAP = 2600, LOW = 1150;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), ph: F(MAXP), om: F(MAXP), al: F(MAXP), sw: F(MAXP), vt: F(MAXP), sd: new Uint16Array(MAXP),\n    n: 0, G: new Int16Array(N).fill(-1), h: new Int16Array(W), grains: 0, T: 0, acc: 0, ca: 0, dir: 1,\n    drain: 0, dx0: 0, dx1: 0, dtime: 0, started: false,\n    buf: F(N * 3), base: F(12), fl: F(12), hue: 0, amount: 1, size: 0.06, lx: 32, ly: 80,\n  };\n}\n\n// One flake into the air at x, y.\nfunction spawn(S, x, y, vx, vy, seed) {\n  if (S.n >= MAXP) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  // Its own spin: phase and rate, so each flash is a smooth function of time.\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.6 + 3 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n  S.al[i] = Math.random() * PI;\n  S.sw[i] = Math.random() * 2 * PI;\n  S.vt[i] = 12 + 6 * Math.random();\n  S.sd[i] = seed;\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.al[i] = S.al[j];\n  S.sw[i] = S.sw[j];\n  S.vt[i] = S.vt[j];\n  S.sd[i] = S.sd[j];\n}\n\n// Where the stream comes down: a centre that wanders the width of the panel.\nconst pour = (T) => 32 + 20 * sin(T * 0.19) + 7 * sin(T * 0.47 + 1.3);\n\n// Moves the top grain of column a onto the top of column b.\nfunction slide(S, a, b) {\n  const h = S.h, G = S.G, from = (H - h[a]) * W + a;\n  h[b]++;\n  G[(H - h[b]) * W + b] = G[from];\n  G[from] = -1;\n  h[a]--;\n}\n\n// The heap settles like sand: wherever a column stands two or more grains\n// above its neighbour, grains slip from its top down onto the neighbour's, at\n// most three a step, so a wall slumps to the angle of repose within a few\n// frames and the slope can be seen running.\nfunction settle(S) {\n  const h = S.h, G = S.G;\n  S.dir = -S.dir;\n  for (let k = 0; k \u003c W - 1; k++) {\n    const x = S.dir > 0 ? k : W - 2 - k;\n    let d = h[x] - h[x + 1];\n    // Some steps hold at 45 degrees and some do not, which roughens the slopes.\n    const lim = Math.random() \u003c 0.5 ? 2 : 3;\n    if (d >= lim) for (let n = min(3, d >> 1); n > 0; n--) slide(S, x, x + 1);\n    else if (-d >= lim) for (let n = min(3, -d >> 1); n > 0; n--) slide(S, x + 1, x);\n  }\n  // An open floor lets the grains over the slot fall out of the bottom: the\n  // whole column sinks by one, so its glitter is seen running down.\n  if (S.drain)\n    for (let x = S.dx0; x \u003c= S.dx1; x++) {\n      if (h[x] \u003c= 0 || Math.random() > 0.8) continue;\n      for (let y = H - 1; y > H - h[x]; y--) G[y * W + x] = G[(y - 1) * W + x];\n      G[(H - h[x]) * W + x] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\n// Lands a falling flake on top of column cx.\nfunction land(S, cx, seed) {\n  if (S.h[cx] >= H - 1) return;\n  S.h[cx]++;\n  S.G[(H - S.h[cx]) * W + cx] = seed;\n  S.grains++;\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const T = S.T;\n  // The lamp drifts round the lower two thirds of the panel.\n  S.lx = 32 + 34 * sin(T * 0.29);\n  S.ly = 84 + 34 * sin(T * 0.21 + 0.7);\n  // Pouring: a little over half the glitter comes down in the stream, the\n  // rest is sprinkled across the whole width.\n  S.acc += st * 80 * S.amount;\n  const c = pour(T);\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    const x = Math.random() \u003c 0.55 ? c + (Math.random() + Math.random() - 1) * 9 : Math.random() * W;\n    spawn(S, cl(x, 0, W - 0.01), -2 * Math.random(), 0, 12, floor(Math.random() * NS));\n  }\n  // Glitter falls slowly, rocking from side to side on its way down.\n  const k = min(1, 1.5 * st), air = 3 * sin(T * 0.37);\n  for (let i = S.n - 1; i >= 0; i--) {\n    S.sw[i] += st * 2;\n    S.vy[i] += (S.vt[i] - S.vy[i]) * k;\n    S.vx[i] += (air + 5 * sin(S.sw[i]) - S.vx[i]) * k;\n    S.ph[i] += S.om[i] * st;\n    const oy = S.y[i];\n    let x = S.x[i] + S.vx[i] * st;\n    const y = oy + S.vy[i] * st;\n    if (x \u003c 0) (x = -x), (S.vx[i] = abs(S.vx[i]));\n    if (x >= W) (x = 2 * W - 0.01 - x), (S.vx[i] = -abs(S.vx[i]));\n    S.x[i] = x;\n    S.y[i] = y;\n    if (S.vy[i] \u003c= 0 || y \u003c 0) continue;\n    // It lands once it reaches the top of the heap in its column.\n    const cx = floor(x);\n    if (y >= H - S.h[cx] - 0.5) {\n      land(S, cx, S.sd[i]);\n      kill(S, i);\n    }\n  }\n  S.ca += st * 30;\n  while (S.ca >= 1) {\n    S.ca -= 1;\n    settle(S);\n  }\n  // A deep heap opens the floor under where the stream has been piling it;\n  // the floor closes once about half of it has run out or after twelve seconds.\n  // The slot widens with the pour so it always drains faster than it fills.\n  if (!S.drain && S.grains > HEAP) {\n    const m = round(cl(c, 12, W - 13)), w = round(4 + 2 * S.amount);\n    S.drain = 1;\n    S.dx0 = m - w;\n    S.dx1 = m + w;\n    S.dtime = 0;\n  } else if (S.drain) {\n    S.dtime += st;\n    if (S.grains \u003c LOW || S.dtime > 12) S.drain = 0;\n  }\n}\n\n// K1: the top layer of the heap leaps into the air.\nfunction burst(S) {\n  const G = S.G, h = S.h;\n  for (let x = 0; x \u003c W; x++)\n    for (let got = 0; got \u003c 6 && h[x] > 2; got++) {\n      const i = (H - h[x]) * W + x;\n      spawn(S, x + Math.random(), H - h[x] + Math.random(), (x - 32) * 0.4 + (Math.random() - 0.5) * 30, -75 - 95 * Math.random(), G[i]);\n      G[i] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.amount = cl(k[2], 1, 3);\n  S.size = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open on a heap already lying in dunes and the stream already falling.\n    for (let x = 0; x \u003c W; x++) {\n      const h = round(17 + 6 * sin(x * 0.09 + 1) + 4 * sin(x * 0.23));\n      for (let y = H - h; y \u003c H; y++) S.G[y * W + x] = floor(Math.random() * NS);\n      S.h[x] = h;\n      S.grains += h;\n    }\n    for (let i = 0; i \u003c 300; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, d * rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, base = S.base, fl = S.fl, G = S.G, lx = S.lx, ly = S.ly;\n  const hue = S.hue + 0.92;\n  for (let c = 0; c \u003c 4; c++) {\n    const p = PAL[c];\n    hsv(hue + p[0], p[1], p[2] * 255, base, c * 3);\n    hsv(hue + p[0], p[3], 255, fl, c * 3);\n  }\n  // A deep field, warmed a little round the lamp but kept under what an LED\n  // shows as lit, so every flake reads against black.\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) {\n      const g = 9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 1800);\n      buf[q] = (4 + g) * (0.4 + base[0] / 425);\n      buf[q + 1] = (3 + g) * (0.4 + base[1] / 425);\n      buf[q + 2] = (6 + g) * (0.4 + base[2] / 425);\n    }\n  // The heap: each grain its seed's colour, lit by the lamp and shaded with\n  // depth. A grain glints when its tilt sends the lamp to the eye: the tilt\n  // needed changes across the heap and the lamp moves, so the glints travel.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = H - S.h[x]; y \u003c H; y++) {\n      const i = y * W + x, g = G[i];\n      if (g \u003c 0) continue;\n      // Silver grains in the heap take the light tint: grey ones read as grit.\n      const dep = y - H + S.h[x], ex = x - lx, ey = y - ly, c = CLS[g] * 3, cb = c === 9 ? 3 : c;\n      const lamp = 0.6 + 0.5 * exp(-(ex * ex + ey * ey) / 900);\n      const v = (0.6 + 0.25 * JIT[g]) * lamp * (dep \u003c 1 ? 1.25 : max(0.6, 1 - 0.01 * dep));\n      const hx = TX[g] - ex * 0.0105, hy = TY[g] - ey * 0.0105;\n      const gl = exp(-(hx * hx + hy * hy) / 0.016) * (dep \u003c 6 ? 1 : 0.6);\n      const q = i * 3;\n      buf[q] += base[cb] * v + fl[c] * gl * 1.4;\n      buf[q + 1] += base[cb + 1] * v + fl[c + 1] * gl * 1.4;\n      buf[q + 2] += base[cb + 2] * v + fl[c + 2] * gl * 1.4;\n      if (gl > 0.35) star(buf, x + 0.5, y + 0.5, fl, c, gl * 0.8, 1 + S.size * 2);\n    }\n  // The falling flakes: a hexagon turned in the plane and thinned as it\n  // tumbles, flashing when its face swings through the angle that sends the\n  // lamp's light to the eye: once a turn, the back being matt.\n  const r0 = 0.55 + 1.05 * S.size;\n  for (let i = 0; i \u003c S.n; i++) {\n    const x = S.x[i], y = S.y[i];\n    if (y \u003c -3 || y > H + 3) continue;\n    const g = S.sd[i], c = CLS[g] * 3, a = S.ph[i];\n    const sq = max(0.22, abs(cos(a))), f = exp((cos(a - (x - lx) * 0.006 - (y - ly) * 0.003) - 1) / 0.035);\n    // A big flake is dimmer per LED, so a heavy stream of them does not burn white.\n    const r = r0 * (0.8 + 0.4 * JIT[g]), v = ((0.5 + 0.35 * JIT[g]) * (0.55 + 0.45 * sq)) / (0.7 + 0.3 * r0);\n    const ca = cos(S.al[i]), sa = sin(S.al[i]), e = r + 1.2;\n    // Small flakes keep their light when they land between LEDs.\n    const norm = r \u003c 1 ? 1.15 / (0.35 + r) : 1;\n    for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n      for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n        const px = X + 0.5 - x, py = Y + 0.5 - y;\n        const u = abs(px * ca + py * sa) / sq, w = abs(py * ca - px * sa);\n        const dh = max(w, w * 0.5 + u * 0.866) - r;\n        const cov = cl(0.5 - dh, 0, 1) * norm;\n        if (cov \u003c= 0) continue;\n        const q = (Y * W + X) * 3, b = cov * v, h = (cov * f * 1.5) / (0.6 + 0.4 * r0);\n        buf[q] += base[c] * b + fl[c] * h;\n        buf[q + 1] += base[c + 1] * b + fl[c + 1] * h;\n        buf[q + 2] += base[c + 2] * b + fl[c + 2] * h;\n      }\n    if (f > 0.3) star(buf, x, y, fl, c, f, 1.5 + r0 * 1.5);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// A flash spills its light into a four-pointed star round the flake, the arms\n// fading out over len LEDs, with a breath on the diagonals.\nfunction star(buf, x, y, fl, c, f, len) {\n  const cx = floor(x), cy = floor(y), n = Math.ceil(len);\n  for (let k = 1; k \u003c= n; k++) {\n    const w = f * 0.75 * (1 - (k - 1) / (len + 0.5)) ** 2;\n    if (w \u003c= 0.01) break;\n    add(buf, cx + k, cy, fl, c, w);\n    add(buf, cx - k, cy, fl, c, w);\n    add(buf, cx, cy + k, fl, c, w);\n    add(buf, cx, cy - k, fl, c, w);\n  }\n  const dw = f * 0.22;\n  add(buf, cx + 1, cy + 1, fl, c, dw);\n  add(buf, cx - 1, cy + 1, fl, c, dw);\n  add(buf, cx + 1, cy - 1, fl, c, dw);\n  add(buf, cx - 1, cy - 1, fl, c, dw);\n}\nfunction add(buf, x, y, fl, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const q = (y * W + x) * 3;\n  buf[q] += fl[c] * w;\n  buf[q + 1] += fl[c + 1] * w;\n  buf[q + 2] += fl[c + 2] * w;\n}\n\n// Bright pile-ups roll off toward white instead of clipping flat.\nfunction knee(v) {\n  return v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65);\n}\n","layer":{"id":"layer-glitter-fall","type":"code","name":"glitter-fall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glitter Fall\n// Family:  cosmetic\n// Idea:    Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after loose cosmetic glitter poured under a display lamp\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1\n//\n// Knob 1: Hue. The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall.\n// Knob 2: Speed. How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower.\n// Knob 3: Amount. How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast.\n// Knob 4: Size. The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble.\n// Buttons: K1 tap throws the top of the heap up into the air, and it flashes all the way back down.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, abs, sqrt, log, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Every flake carries one of NS seeds, which fix its colour class, how it lies\n// once it has landed and how bright it is. A grain in the heap keeps its seed,\n// so the heap's texture and glints stay put while the lamp moves.\nconst NS = 1024;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst TX = new Float32Array(NS), TY = new Float32Array(NS), JIT = new Float32Array(NS), CLS = new Uint8Array(NS);\nfor (let i = 0; i \u003c NS; i++) {\n  // A landed flake lies roughly flat: its tilt is a small Gaussian.\n  const r = sqrt(-2 * log(hash(i * 4) + 1e-6)) * 0.3, a = 2 * PI * hash(i * 4 + 1);\n  TX[i] = r * cos(a);\n  TY[i] = r * sin(a);\n  JIT[i] = hash(i * 4 + 2);\n  const c = hash(i * 4 + 3);\n  // Main colour, a lighter tint, a deeper shade, and silver.\n  CLS[i] = c \u003c 0.5 ? 0 : c \u003c 0.7 ? 1 : c \u003c 0.85 ? 2 : 3;\n}\n// Hue offset, saturation and value of each class, and how much of the hue a\n// flash keeps. Silver keeps a breath of the hue so it sits in the same mix.\nconst PAL = [\n  [0, 0.85, 0.8, 0.45],\n  [-0.03, 0.55, 0.95, 0.35],\n  [0.03, 1, 0.65, 0.55],\n  [0, 0.1, 0.5, 0.08],\n];\n\n// The heap's grains sit one to an LED, stacked in columns from the floor up.\n// HEAP is how many grains make the floor open, LOW how many it keeps.\nconst HEAP = 2600, LOW = 1150;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), ph: F(MAXP), om: F(MAXP), al: F(MAXP), sw: F(MAXP), vt: F(MAXP), sd: new Uint16Array(MAXP),\n    n: 0, G: new Int16Array(N).fill(-1), h: new Int16Array(W), grains: 0, T: 0, acc: 0, ca: 0, dir: 1,\n    drain: 0, dx0: 0, dx1: 0, dtime: 0, started: false,\n    buf: F(N * 3), base: F(12), fl: F(12), hue: 0, amount: 1, size: 0.06, lx: 32, ly: 80,\n  };\n}\n\n// One flake into the air at x, y.\nfunction spawn(S, x, y, vx, vy, seed) {\n  if (S.n >= MAXP) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  // Its own spin: phase and rate, so each flash is a smooth function of time.\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.6 + 3 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n  S.al[i] = Math.random() * PI;\n  S.sw[i] = Math.random() * 2 * PI;\n  S.vt[i] = 12 + 6 * Math.random();\n  S.sd[i] = seed;\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.al[i] = S.al[j];\n  S.sw[i] = S.sw[j];\n  S.vt[i] = S.vt[j];\n  S.sd[i] = S.sd[j];\n}\n\n// Where the stream comes down: a centre that wanders the width of the panel.\nconst pour = (T) => 32 + 20 * sin(T * 0.19) + 7 * sin(T * 0.47 + 1.3);\n\n// Moves the top grain of column a onto the top of column b.\nfunction slide(S, a, b) {\n  const h = S.h, G = S.G, from = (H - h[a]) * W + a;\n  h[b]++;\n  G[(H - h[b]) * W + b] = G[from];\n  G[from] = -1;\n  h[a]--;\n}\n\n// The heap settles like sand: wherever a column stands two or more grains\n// above its neighbour, grains slip from its top down onto the neighbour's, at\n// most three a step, so a wall slumps to the angle of repose within a few\n// frames and the slope can be seen running.\nfunction settle(S) {\n  const h = S.h, G = S.G;\n  S.dir = -S.dir;\n  for (let k = 0; k \u003c W - 1; k++) {\n    const x = S.dir > 0 ? k : W - 2 - k;\n    let d = h[x] - h[x + 1];\n    // Some steps hold at 45 degrees and some do not, which roughens the slopes.\n    const lim = Math.random() \u003c 0.5 ? 2 : 3;\n    if (d >= lim) for (let n = min(3, d >> 1); n > 0; n--) slide(S, x, x + 1);\n    else if (-d >= lim) for (let n = min(3, -d >> 1); n > 0; n--) slide(S, x + 1, x);\n  }\n  // An open floor lets the grains over the slot fall out of the bottom: the\n  // whole column sinks by one, so its glitter is seen running down.\n  if (S.drain)\n    for (let x = S.dx0; x \u003c= S.dx1; x++) {\n      if (h[x] \u003c= 0 || Math.random() > 0.8) continue;\n      for (let y = H - 1; y > H - h[x]; y--) G[y * W + x] = G[(y - 1) * W + x];\n      G[(H - h[x]) * W + x] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\n// Lands a falling flake on top of column cx.\nfunction land(S, cx, seed) {\n  if (S.h[cx] >= H - 1) return;\n  S.h[cx]++;\n  S.G[(H - S.h[cx]) * W + cx] = seed;\n  S.grains++;\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const T = S.T;\n  // The lamp drifts round the lower two thirds of the panel.\n  S.lx = 32 + 34 * sin(T * 0.29);\n  S.ly = 84 + 34 * sin(T * 0.21 + 0.7);\n  // Pouring: a little over half the glitter comes down in the stream, the\n  // rest is sprinkled across the whole width.\n  S.acc += st * 80 * S.amount;\n  const c = pour(T);\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    const x = Math.random() \u003c 0.55 ? c + (Math.random() + Math.random() - 1) * 9 : Math.random() * W;\n    spawn(S, cl(x, 0, W - 0.01), -2 * Math.random(), 0, 12, floor(Math.random() * NS));\n  }\n  // Glitter falls slowly, rocking from side to side on its way down.\n  const k = min(1, 1.5 * st), air = 3 * sin(T * 0.37);\n  for (let i = S.n - 1; i >= 0; i--) {\n    S.sw[i] += st * 2;\n    S.vy[i] += (S.vt[i] - S.vy[i]) * k;\n    S.vx[i] += (air + 5 * sin(S.sw[i]) - S.vx[i]) * k;\n    S.ph[i] += S.om[i] * st;\n    const oy = S.y[i];\n    let x = S.x[i] + S.vx[i] * st;\n    const y = oy + S.vy[i] * st;\n    if (x \u003c 0) (x = -x), (S.vx[i] = abs(S.vx[i]));\n    if (x >= W) (x = 2 * W - 0.01 - x), (S.vx[i] = -abs(S.vx[i]));\n    S.x[i] = x;\n    S.y[i] = y;\n    if (S.vy[i] \u003c= 0 || y \u003c 0) continue;\n    // It lands once it reaches the top of the heap in its column.\n    const cx = floor(x);\n    if (y >= H - S.h[cx] - 0.5) {\n      land(S, cx, S.sd[i]);\n      kill(S, i);\n    }\n  }\n  S.ca += st * 30;\n  while (S.ca >= 1) {\n    S.ca -= 1;\n    settle(S);\n  }\n  // A deep heap opens the floor under where the stream has been piling it;\n  // the floor closes once about half of it has run out or after twelve seconds.\n  // The slot widens with the pour so it always drains faster than it fills.\n  if (!S.drain && S.grains > HEAP) {\n    const m = round(cl(c, 12, W - 13)), w = round(4 + 2 * S.amount);\n    S.drain = 1;\n    S.dx0 = m - w;\n    S.dx1 = m + w;\n    S.dtime = 0;\n  } else if (S.drain) {\n    S.dtime += st;\n    if (S.grains \u003c LOW || S.dtime > 12) S.drain = 0;\n  }\n}\n\n// K1: the top layer of the heap leaps into the air.\nfunction burst(S) {\n  const G = S.G, h = S.h;\n  for (let x = 0; x \u003c W; x++)\n    for (let got = 0; got \u003c 6 && h[x] > 2; got++) {\n      const i = (H - h[x]) * W + x;\n      spawn(S, x + Math.random(), H - h[x] + Math.random(), (x - 32) * 0.4 + (Math.random() - 0.5) * 30, -75 - 95 * Math.random(), G[i]);\n      G[i] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.amount = cl(k[2], 1, 3);\n  S.size = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open on a heap already lying in dunes and the stream already falling.\n    for (let x = 0; x \u003c W; x++) {\n      const h = round(17 + 6 * sin(x * 0.09 + 1) + 4 * sin(x * 0.23));\n      for (let y = H - h; y \u003c H; y++) S.G[y * W + x] = floor(Math.random() * NS);\n      S.h[x] = h;\n      S.grains += h;\n    }\n    for (let i = 0; i \u003c 300; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, d * rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, base = S.base, fl = S.fl, G = S.G, lx = S.lx, ly = S.ly;\n  const hue = S.hue + 0.92;\n  for (let c = 0; c \u003c 4; c++) {\n    const p = PAL[c];\n    hsv(hue + p[0], p[1], p[2] * 255, base, c * 3);\n    hsv(hue + p[0], p[3], 255, fl, c * 3);\n  }\n  // A deep field, warmed a little round the lamp but kept under what an LED\n  // shows as lit, so every flake reads against black.\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) {\n      const g = 9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 1800);\n      buf[q] = (4 + g) * (0.4 + base[0] / 425);\n      buf[q + 1] = (3 + g) * (0.4 + base[1] / 425);\n      buf[q + 2] = (6 + g) * (0.4 + base[2] / 425);\n    }\n  // The heap: each grain its seed's colour, lit by the lamp and shaded with\n  // depth. A grain glints when its tilt sends the lamp to the eye: the tilt\n  // needed changes across the heap and the lamp moves, so the glints travel.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = H - S.h[x]; y \u003c H; y++) {\n      const i = y * W + x, g = G[i];\n      if (g \u003c 0) continue;\n      // Silver grains in the heap take the light tint: grey ones read as grit.\n      const dep = y - H + S.h[x], ex = x - lx, ey = y - ly, c = CLS[g] * 3, cb = c === 9 ? 3 : c;\n      const lamp = 0.6 + 0.5 * exp(-(ex * ex + ey * ey) / 900);\n      const v = (0.6 + 0.25 * JIT[g]) * lamp * (dep \u003c 1 ? 1.25 : max(0.6, 1 - 0.01 * dep));\n      const hx = TX[g] - ex * 0.0105, hy = TY[g] - ey * 0.0105;\n      const gl = exp(-(hx * hx + hy * hy) / 0.016) * (dep \u003c 6 ? 1 : 0.6);\n      const q = i * 3;\n      buf[q] += base[cb] * v + fl[c] * gl * 1.4;\n      buf[q + 1] += base[cb + 1] * v + fl[c + 1] * gl * 1.4;\n      buf[q + 2] += base[cb + 2] * v + fl[c + 2] * gl * 1.4;\n      if (gl > 0.35) star(buf, x + 0.5, y + 0.5, fl, c, gl * 0.8, 1 + S.size * 2);\n    }\n  // The falling flakes: a hexagon turned in the plane and thinned as it\n  // tumbles, flashing when its face swings through the angle that sends the\n  // lamp's light to the eye: once a turn, the back being matt.\n  const r0 = 0.55 + 1.05 * S.size;\n  for (let i = 0; i \u003c S.n; i++) {\n    const x = S.x[i], y = S.y[i];\n    if (y \u003c -3 || y > H + 3) continue;\n    const g = S.sd[i], c = CLS[g] * 3, a = S.ph[i];\n    const sq = max(0.22, abs(cos(a))), f = exp((cos(a - (x - lx) * 0.006 - (y - ly) * 0.003) - 1) / 0.035);\n    // A big flake is dimmer per LED, so a heavy stream of them does not burn white.\n    const r = r0 * (0.8 + 0.4 * JIT[g]), v = ((0.5 + 0.35 * JIT[g]) * (0.55 + 0.45 * sq)) / (0.7 + 0.3 * r0);\n    const ca = cos(S.al[i]), sa = sin(S.al[i]), e = r + 1.2;\n    // Small flakes keep their light when they land between LEDs.\n    const norm = r \u003c 1 ? 1.15 / (0.35 + r) : 1;\n    for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n      for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n        const px = X + 0.5 - x, py = Y + 0.5 - y;\n        const u = abs(px * ca + py * sa) / sq, w = abs(py * ca - px * sa);\n        const dh = max(w, w * 0.5 + u * 0.866) - r;\n        const cov = cl(0.5 - dh, 0, 1) * norm;\n        if (cov \u003c= 0) continue;\n        const q = (Y * W + X) * 3, b = cov * v, h = (cov * f * 1.5) / (0.6 + 0.4 * r0);\n        buf[q] += base[c] * b + fl[c] * h;\n        buf[q + 1] += base[c + 1] * b + fl[c + 1] * h;\n        buf[q + 2] += base[c + 2] * b + fl[c + 2] * h;\n      }\n    if (f > 0.3) star(buf, x, y, fl, c, f, 1.5 + r0 * 1.5);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// A flash spills its light into a four-pointed star round the flake, the arms\n// fading out over len LEDs, with a breath on the diagonals.\nfunction star(buf, x, y, fl, c, f, len) {\n  const cx = floor(x), cy = floor(y), n = Math.ceil(len);\n  for (let k = 1; k \u003c= n; k++) {\n    const w = f * 0.75 * (1 - (k - 1) / (len + 0.5)) ** 2;\n    if (w \u003c= 0.01) break;\n    add(buf, cx + k, cy, fl, c, w);\n    add(buf, cx - k, cy, fl, c, w);\n    add(buf, cx, cy + k, fl, c, w);\n    add(buf, cx, cy - k, fl, c, w);\n  }\n  const dw = f * 0.22;\n  add(buf, cx + 1, cy + 1, fl, c, dw);\n  add(buf, cx - 1, cy + 1, fl, c, dw);\n  add(buf, cx + 1, cy - 1, fl, c, dw);\n  add(buf, cx - 1, cy - 1, fl, c, dw);\n}\nfunction add(buf, x, y, fl, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const q = (y * W + x) * 3;\n  buf[q] += fl[c] * w;\n  buf[q + 1] += fl[c + 1] * w;\n  buf[q + 2] += fl[c + 2] * w;\n}\n\n// Bright pile-ups roll off toward white instead of clipping flat.\nfunction knee(v) {\n  return v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower."},{"name":"Amount","min":1,"max":3,"about":"How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast."},{"name":"Size","min":0,"max":1,"about":"The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble."}],"start":[0,2,1,0.06],"measures":{"motion":1.3817,"detail":0.0894,"edges":0.4622,"complexity":1.3664,"coverage":0.3835,"colour":0.1675,"drift":0.0908},"knobResponse":[0.0974,0.131,0.1719,0.0961]},{"slug":"glyph-rain","title":"Glyph Rain","family":"type","round":1,"note":"3×5 글자가 줄마다 떨어지며 바뀌어요. 비가 지나간 글자는 옛 단말기의 초록 형광처럼 몇 초 남아 흐려져서, 아무 말도 하지 않는 글이 화면을 채워요.","idea":"Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.","buttons":"K4 tap switches between small glyphs and double-size ones.","code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-glyph-rain","type":"code","name":"glyph-rain","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rain around the colour wheel from phosphor green; the heads stay close to white."},{"name":"Fall","min":0.3,"max":6,"about":"How fast the columns fall, each at its own pace around this one."},{"name":"Density","min":0,"max":1,"about":"How many columns run and how long their tails hang, up to a full wall of text."},{"name":"Mutate","min":0,"max":1,"about":"How often a glyph already written turns into another; turned all the way, the whole wall boils."}],"start":[0,2,0,0.06],"measures":{"motion":0.2257,"detail":0.0998,"edges":0.7469,"complexity":0.2343,"coverage":0.2152,"colour":0.1998,"drift":0.0956},"knobResponse":[0.0655,0.0718,0.1045,0.0664]},{"slug":"gold-leaf","title":"Gold Leaf","family":"cosmetic","round":33,"note":"맑은 세럼에 구겨진 금박 조각 마흔 개가 떠서 위아래 두 대류 칸을 따라 천천히 돌 뿐 가라앉지 않아요. 조각이 뒤집힐 때마다 빛을 향한 면이 흰 금빛으로 번쩍이고 돌아선 면은 짙은 금으로 내려가며, 먼 조각은 작고 흐려요. K1 은 색상환을 다 돌아 금박을 장밋빛 금이나 푸른 박으로 바꾸고, 누르면 세럼을 저어 조각이 느린 소용돌이로 돌며 다섯 배 빨리 뒤집혀요.","idea":"Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.","buttons":"K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.","code":"// ===== Patternflow pattern =====\n// Title:   Gold Leaf\n// Family:  cosmetic\n// Idea:    Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a serum with flakes of gold leaf floating in it\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1\n//\n// Knob 1: Hue. Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown.\n// Knob 2: Speed. How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Flakes. How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil.\n// Knob 4: Size. How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one.\n// Buttons: K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXF = 120, SS = 3;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// The light: from the upper left and in front. Y runs down the panel, the\n// viewer looks along -z.\nconst LX = -0.4, LY = -0.7, LZ = 0.6, LN = sqrt(LX * LX + LY * LY + LZ * LZ);\nconst L = [LX / LN, LY / LN, LZ / LN];\nconst HV = [L[0], L[1], L[2] + 1], HN = sqrt(HV[0] ** 2 + HV[1] ** 2 + HV[2] ** 2);\nconst HH = [HV[0] / HN, HV[1] / HN, HV[2] / HN];\n\n// A torn flake: 6 to 9 points round a ragged outline, each pushed up or down\n// a little, fanned from an off-centre middle point into facets. The heights\n// are the crumple: every facet tilts its own way.\nfunction makeFlake() {\n  const rnd = Math.random, k = 6 + floor(rnd() * 4), e = 0.6 + 0.4 * rnd(), ea = rnd() * PI;\n  const v = [(rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3];\n  for (let i = 0; i \u003c k; i++) {\n    const a = (2 * PI * (i + 0.7 * (rnd() - 0.5))) / k, r = 0.55 + 0.45 * rnd();\n    const x = r * cos(a), y = r * sin(a) * e;\n    v.push(x * cos(ea) - y * sin(ea), x * sin(ea) + y * cos(ea), (rnd() - 0.5) * 0.8);\n  }\n  const nrm = [];\n  for (let i = 0; i \u003c k; i++) {\n    const a = 1 + i, b = 1 + ((i + 1) % k);\n    const ux = v[a * 3] - v[0], uy = v[a * 3 + 1] - v[1], uz = v[a * 3 + 2] - v[2];\n    const wx = v[b * 3] - v[0], wy = v[b * 3 + 1] - v[1], wz = v[b * 3 + 2] - v[2];\n    let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n    const l = sqrt(nx * nx + ny * ny + nz * nz) || 1;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    nrm.push(nx / l, ny / l, nz / l);\n  }\n  const ax = rnd() - 0.5, ay = rnd() - 0.5, az = rnd() - 0.5, al = sqrt(ax * ax + ay * ay + az * az) || 1;\n  const q0 = [rnd() - 0.5, rnd() - 0.5, rnd() - 0.5, rnd() - 0.5], ql = sqrt(q0.reduce((s, c) => s + c * c, 0)) || 1;\n  return {\n    k, v: new Float32Array(v), n: new Float32Array(nrm),\n    x: 3 + rnd() * (W - 6), y: 3 + rnd() * (H - 6), z: rnd(), sz: 0.75 + 0.5 * rnd(),\n    q: q0.map((c) => c / ql), axis: [ax / al, ay / al, az / al], spin: (0.5 + rnd()) * (rnd() \u003c 0.5 ? -1 : 1), ph: rnd() * 2 * PI,\n  };\n}\n\nexport function setup(params) {\n  const flakes = [];\n  for (let i = 0; i \u003c MAXF; i++) flakes.push(makeFlake());\n  params.s = {\n    flakes, t: 0, stir: 0, stirT: -1, hue: 0, count: 40, size: 0.06,\n    far: new Float32Array(N * 4), tmp: new Float32Array(N * 4), frame: new Float32Array(N * 3),\n    sub: new Int16Array(64 * 64 * SS * SS), lut: new Float32Array(256 * 3), lutHue: NaN, serum: [],\n  };\n}\n\n// The current: two slow convection cells stacked in the panel, from the\n// stream function sin(pi x/W) sin(2 pi y/H), which is zero on all four walls,\n// so the flakes go round and never leave. A weaker mode of smaller cells\n// swells and fades over a minute, so no flake runs the same loop twice.\n// Nothing pulls them down: the flakes float, they never settle.\nfunction flow(x, y, t, out) {\n  const X = (PI * x) / W, Y = (2 * PI * y) / H, s = 0.35 * sin(t * 0.11);\n  out[0] = sin(X) * cos(Y) + s * sin(2 * X) * 1.5 * cos(1.5 * Y) * 0.5;\n  out[1] = -cos(X) * sin(Y) - s * 2 * cos(2 * X) * sin(1.5 * Y) * 0.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 40, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.hue = k[0];\n  P.count = floor(cl(k[2], 40, 120));\n  P.size = cl(k[3], 0, 1);\n  P.t += d;\n  if (input.btnPressed && input.btnPressed[0]) P.stirT = 0;\n  // The stir: a second to wind up, then it dies away over about eight.\n  if (P.stirT >= 0) {\n    P.stirT += d;\n    P.stir = P.stirT \u003c 1 ? sm(0, 1, P.stirT) : exp(-(P.stirT - 1) / 3.5);\n    if (P.stirT > 20) (P.stirT = -1), (P.stir = 0);\n  }\n  const v = [0, 0], S = P.stir;\n  for (let i = 0; i \u003c MAXF; i++) {\n    const f = P.flakes[i];\n    flow(f.x, f.y, P.t, v);\n    // Near flakes move faster across the panel than far ones.\n    const par = 0.6 + 0.6 * f.z, sp = 2.6 * par;\n    let vx = v[0] * sp + 0.4 * sin(P.t * 0.5 + f.ph), vy = v[1] * sp + 0.4 * cos(P.t * 0.37 + f.ph * 1.3);\n    if (S > 0) {\n      // The vortex runs round ellipses the shape of the panel, fastest\n      // half way out, so the flakes swing round without piling on a wall.\n      const ex = (f.x - W / 2) / (W / 2), ey = (f.y - H / 2) / (H / 2), r = sqrt(ex * ex + ey * ey);\n      const g = S * 1.6 * cl(1.15 - r, 0, 1) * par;\n      vx += g * -0.5 * (f.y - H / 2);\n      vy += g * 2 * (f.x - W / 2);\n    }\n    f.x = cl(f.x + vx * d, 1, W - 2);\n    f.y = cl(f.y + vy * d, 1, H - 2);\n    // Tumble: turn about the flake's own axis, which wanders slowly.\n    const ang = f.spin * (1 + 4 * S) * d, a = f.axis;\n    a[0] += 0.3 * sin(P.t * 0.23 + f.ph) * d;\n    a[1] += 0.3 * cos(P.t * 0.19 + f.ph * 2) * d;\n    const al = sqrt(a[0] * a[0] + a[1] * a[1] + a[2] * a[2]);\n    a[0] /= al;\n    a[1] /= al;\n    a[2] /= al;\n    const sh = sin(ang / 2), ch = cos(ang / 2), dq = [ch, a[0] * sh, a[1] * sh, a[2] * sh], q = f.q;\n    const n0 = dq[0] * q[0] - dq[1] * q[1] - dq[2] * q[2] - dq[3] * q[3];\n    const n1 = dq[0] * q[1] + dq[1] * q[0] + dq[2] * q[3] - dq[3] * q[2];\n    const n2 = dq[0] * q[2] - dq[1] * q[3] + dq[2] * q[0] + dq[3] * q[1];\n    const n3 = dq[0] * q[3] + dq[1] * q[2] - dq[2] * q[1] + dq[3] * q[0];\n    const ql = sqrt(n0 * n0 + n1 * n1 + n2 * n2 + n3 * n3);\n    q[0] = n0 / ql;\n    q[1] = n1 / ql;\n    q[2] = n2 / ql;\n    q[3] = n3 / ql;\n  }\n}\n\n// The foil's colour against its light, 0 to 1.3 over 256 steps: deep, gold,\n// pale gold, white-gold.\nfunction buildLut(P) {\n  const h = P.hue + 0.115 - floor(P.hue + 0.115);\n  // Round orange and yellow the deep end stays bright and saturated so it\n  // reads as dark gold, not brown; round red and pink the foil is paler, rose\n  // gold rather than red.\n  const warm = sm(0.0, 0.05, h) * (1 - sm(0.17, 0.24, h)), rose = 1 - sm(0.02, 0.07, abs(h - 0.995 + (h \u003c 0.5 ? 1 : 0)));\n  const sat = 1 - 0.4 * rose, lift = max(warm, rose);\n  const stops = [\n    [0, hsv(h - 0.025, 0.95 * sat, 0.4 + 0.18 * lift)],\n    [0.35, hsv(h - 0.01, 0.88 * sat, 0.72 + 0.12 * lift)],\n    [0.7, hsv(h + 0.005, 0.68 * sat, 1)],\n    [1.0, hsv(h + 0.01, 0.34 * sat, 1)],\n    [1.3, hsv(h + 0.01, 0.06, 1)],\n  ];\n  for (let i = 0; i \u003c 256; i++) {\n    const b = (i / 255) * 1.3;\n    let j = 0;\n    while (j \u003c stops.length - 2 && b > stops[j + 1][0]) j++;\n    const [b0, c0] = stops[j], [b1, c1] = stops[j + 1], f = cl((b - b0) / (b1 - b0), 0, 1);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = (c0[c] + (c1[c] - c0[c]) * f) * 255;\n  }\n  // The serum: the foil's hue, faint and greyed, lighter at the top.\n  const top = hsv(h - 0.02, (0.5 - 0.2 * warm) * sat, 0.11), bot = hsv(h - 0.02, (0.6 - 0.2 * warm) * sat, 0.025);\n  const lit = hsv(h + 0.01, 0.3 * sat, 1);\n  P.serum = [top[0] * 255, top[1] * 255, top[2] * 255, bot[0] * 255, bot[1] * 255, bot[2] * 255, lit[0] * 255, lit[1] * 255, lit[2] * 255];\n  P.lutHue = P.hue;\n}\n\nconst rot = new Float32Array(9);\nfunction quatMat(q) {\n  const [w, x, y, z] = q;\n  rot[0] = 1 - 2 * (y * y + z * z); rot[1] = 2 * (x * y - w * z); rot[2] = 2 * (x * z + w * y);\n  rot[3] = 2 * (x * y + w * z); rot[4] = 1 - 2 * (x * x + z * z); rot[5] = 2 * (y * z - w * x);\n  rot[6] = 2 * (x * z - w * y); rot[7] = 2 * (y * z + w * x); rot[8] = 1 - 2 * (x * x + y * y);\n}\n\nconst PX = new Float32Array(10 * 3), FC = new Float32Array(9 * 4), ORD = [];\n\n// One flake into buffer buf (RGB, or RGBA premultiplied when far), over what\n// is there. Each LED takes 3 x 3 samples, 2 x 2 on a big flake; a facet\n// nearer the viewer covers the ones behind it, and the share of samples a\n// flake covers is how much of the LED it takes.\nfunction drawFlake(P, f, buf, rgba, dim, glints) {\n  quatMat(f.q);\n  const s = (6.5 + 6 * P.size) * f.sz * (0.5 + 0.7 * f.z), k = f.k, v = f.v, n = f.n, lut = P.lut;\n  let x0 = W, x1 = 0, y0 = H, y1 = 0;\n  for (let i = 0; i \u003c= k; i++) {\n    const a = v[i * 3], b = v[i * 3 + 1], c = v[i * 3 + 2];\n    const X = f.x + s * (rot[0] * a + rot[1] * b + rot[2] * c), Y = f.y + s * (rot[3] * a + rot[4] * b + rot[5] * c);\n    PX[i * 3] = X;\n    PX[i * 3 + 1] = Y;\n    PX[i * 3 + 2] = rot[6] * a + rot[7] * b + rot[8] * c;\n    x0 = min(x0, X);\n    x1 = max(x1, X);\n    y0 = min(y0, Y);\n    y1 = max(y1, Y);\n  }\n  // Big flakes need fewer samples to an LED for the same smooth edge.\n  const ss = s > 7 ? 2 : SS;\n  const bx = max(0, floor(x0)), by = max(0, floor(y0)), bw = min(W, floor(x1) + 1) - bx, bh = min(H, floor(y1) + 1) - by;\n  if (bw \u003c= 0 || bh \u003c= 0 || bw > 64 || bh > 64) return;\n  const sw = bw * ss, sub = P.sub;\n  sub.fill(-1, 0, sw * bh * ss);\n  ORD.length = 0;\n  for (let i = 0; i \u003c k; i++) {\n    // The facet's normal turned with the flake, towards the viewer: foil\n    // shines from both faces.\n    const a = n[i * 3], b = n[i * 3 + 1], c = n[i * 3 + 2];\n    let nx = rot[0] * a + rot[1] * b + rot[2] * c, ny = rot[3] * a + rot[4] * b + rot[5] * c, nz = rot[6] * a + rot[7] * b + rot[8] * c;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    const spec = max(0, nx * HH[0] + ny * HH[1] + nz * HH[2]) ** 18, diff = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n    // A little base light, the lamp's diffuse share, the glow of the serum\n    // above for facets tipped up, and a narrow highlight, cos^18, half\n    // strength 16 degrees off the mirror angle: a facet flashes as it\n    // sweeps through and its neighbours, tilted their own ways, stay deep.\n    const env = 0.5 - 0.5 * ny;\n    const br = (0.1 + 0.45 * diff + 0.25 * env + 0.95 * spec) * dim;\n    FC[i * 4] = cl(floor((br / 1.3) * 255), 0, 255);\n    FC[i * 4 + 1] = spec;\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    FC[i * 4 + 2] = (PX[2] + PX[j1 * 3 + 2] + PX[j2 * 3 + 2]) / 3;\n    ORD.push(i);\n  }\n  ORD.sort((a, b) => FC[a * 4 + 2] - FC[b * 4 + 2]);\n  for (const i of ORD) {\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    const ax = PX[0], ay = PX[1], bxx = PX[j1 * 3], byy = PX[j1 * 3 + 1], cx = PX[j2 * 3], cy = PX[j2 * 3 + 1];\n    const area = (bxx - ax) * (cy - ay) - (byy - ay) * (cx - ax);\n    if (abs(area) \u003c 1e-4) continue;\n    const sg = area > 0 ? 1 : -1;\n    const sx0 = max(0, floor((min(ax, bxx, cx) - bx) * ss)), sx1 = min(sw - 1, floor((max(ax, bxx, cx) - bx) * ss));\n    const sy0 = max(0, floor((min(ay, byy, cy) - by) * ss)), sy1 = min(bh * ss - 1, floor((max(ay, byy, cy) - by) * ss));\n    for (let sy = sy0; sy \u003c= sy1; sy++) {\n      const py = by + (sy + 0.5) / ss;\n      for (let sx = sx0; sx \u003c= sx1; sx++) {\n        const px = bx + (sx + 0.5) / ss;\n        const e0 = ((bxx - ax) * (py - ay) - (byy - ay) * (px - ax)) * sg;\n        const e1 = ((cx - bxx) * (py - byy) - (cy - byy) * (px - bxx)) * sg;\n        const e2 = ((ax - cx) * (py - cy) - (ay - cy) * (px - cx)) * sg;\n        if (e0 >= 0 && e1 >= 0 && e2 >= 0) sub[sy * sw + sx] = i;\n      }\n    }\n    if (glints && FC[i * 4 + 1] > 0.6) glints.push((ax + bxx + cx) / 3, (ay + byy + cy) / 3, FC[i * 4 + 1]);\n  }\n  for (let y = 0; y \u003c bh; y++)\n    for (let x = 0; x \u003c bw; x++) {\n      let r = 0, g = 0, b = 0, c = 0;\n      for (let u = 0; u \u003c ss; u++)\n        for (let w = 0; w \u003c ss; w++) {\n          const i = sub[(y * ss + u) * sw + x * ss + w];\n          if (i \u003c 0) continue;\n          const li = FC[i * 4] * 3;\n          r += lut[li];\n          g += lut[li + 1];\n          b += lut[li + 2];\n          c++;\n        }\n      if (!c) continue;\n      const al = c / (ss * ss), p = (by + y) * W + bx + x;\n      if (rgba) {\n        const o = p * 4;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n        buf[o + 3] = buf[o + 3] * (1 - al) + al;\n      } else {\n        const o = p * 3;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const fr = P.frame, far = P.far, tmp = P.tmp, t = P.t, sv = P.serum;\n  // The serum: a soft gradient and a slow caustic shimmer that fades with\n  // depth, light let in from the top.\n  const colw = P.colw || (P.colw = new Float32Array(W));\n  for (let x = 0; x \u003c W; x++) colw[x] = 1.5 * sin(x * 0.17 - t * 0.31);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / (H - 1), dep = exp(-y / 70), roww = 1.7 * sin(y * 0.11 + t * 0.4) + t * 0.23;\n    for (let x = 0; x \u003c W; x++) {\n      const a = sin(x * 0.19 + roww), b = sin(y * 0.13 + colw[x] - t * 0.17);\n      const c = a + b, caus = exp(-c * c * 6) * 0.9 * dep, o = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) fr[o + ch] = sv[ch] * (1 - g) + sv[3 + ch] * g + caus * 0.07 * sv[6 + ch];\n    }\n  }\n  const fl = P.flakes.slice(0, P.count).sort((a, b) => a.z - b.z);\n  far.fill(0);\n  let i = 0;\n  // Far flakes, dimmer, into their own layer, softened by a 1-2-1 blur.\n  for (; i \u003c fl.length && fl[i].z \u003c 0.35; i++) drawFlake(P, fl[i], far, true, 0.6 + 0.6 * fl[i].z, null);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) tmp[o + c] = (far[l + c] + 2 * far[o + c] + far[r + c]) / 4;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, u = y > 0 ? o - W * 4 : o, dn = y \u003c H - 1 ? o + W * 4 : o, f3 = (y * W + x) * 3;\n      const a = (tmp[u + 3] + 2 * tmp[o + 3] + tmp[dn + 3]) / 4;\n      for (let c = 0; c \u003c 3; c++) fr[f3 + c] = fr[f3 + c] * (1 - a) + (tmp[u + c] + 2 * tmp[o + c] + tmp[dn + c]) / 4;\n    }\n  // Near flakes, sharp, over the top; their brightest facets throw a glint.\n  const glints = [];\n  for (; i \u003c fl.length; i++) drawFlake(P, fl[i], fr, false, 1, fl[i].z > 0.6 ? glints : null);\n  for (let g = 0; g \u003c glints.length; g += 3) {\n    const gx = floor(glints[g]), gy = floor(glints[g + 1]), s = (glints[g + 2] - 0.6) / 0.4;\n    for (let r = -2; r \u003c= 2; r++) {\n      const a = s * (r === 0 ? 1 : abs(r) === 1 ? 0.55 : 0.22);\n      for (const [x, y] of r === 0 ? [[gx, gy]] : [[gx + r, gy], [gx, gy + r]]) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const o = (y * W + x) * 3;\n        fr[o] += 255 * a;\n        fr[o + 1] += 250 * a;\n        fr[o + 2] += 225 * a;\n      }\n    }\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, fr[o]), min(255, fr[o + 1]), min(255, fr[o + 2]));\n}\n","layer":{"id":"layer-gold-leaf","type":"code","name":"gold-leaf","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gold Leaf\n// Family:  cosmetic\n// Idea:    Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a serum with flakes of gold leaf floating in it\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1\n//\n// Knob 1: Hue. Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown.\n// Knob 2: Speed. How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Flakes. How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil.\n// Knob 4: Size. How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one.\n// Buttons: K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXF = 120, SS = 3;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// The light: from the upper left and in front. Y runs down the panel, the\n// viewer looks along -z.\nconst LX = -0.4, LY = -0.7, LZ = 0.6, LN = sqrt(LX * LX + LY * LY + LZ * LZ);\nconst L = [LX / LN, LY / LN, LZ / LN];\nconst HV = [L[0], L[1], L[2] + 1], HN = sqrt(HV[0] ** 2 + HV[1] ** 2 + HV[2] ** 2);\nconst HH = [HV[0] / HN, HV[1] / HN, HV[2] / HN];\n\n// A torn flake: 6 to 9 points round a ragged outline, each pushed up or down\n// a little, fanned from an off-centre middle point into facets. The heights\n// are the crumple: every facet tilts its own way.\nfunction makeFlake() {\n  const rnd = Math.random, k = 6 + floor(rnd() * 4), e = 0.6 + 0.4 * rnd(), ea = rnd() * PI;\n  const v = [(rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3];\n  for (let i = 0; i \u003c k; i++) {\n    const a = (2 * PI * (i + 0.7 * (rnd() - 0.5))) / k, r = 0.55 + 0.45 * rnd();\n    const x = r * cos(a), y = r * sin(a) * e;\n    v.push(x * cos(ea) - y * sin(ea), x * sin(ea) + y * cos(ea), (rnd() - 0.5) * 0.8);\n  }\n  const nrm = [];\n  for (let i = 0; i \u003c k; i++) {\n    const a = 1 + i, b = 1 + ((i + 1) % k);\n    const ux = v[a * 3] - v[0], uy = v[a * 3 + 1] - v[1], uz = v[a * 3 + 2] - v[2];\n    const wx = v[b * 3] - v[0], wy = v[b * 3 + 1] - v[1], wz = v[b * 3 + 2] - v[2];\n    let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n    const l = sqrt(nx * nx + ny * ny + nz * nz) || 1;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    nrm.push(nx / l, ny / l, nz / l);\n  }\n  const ax = rnd() - 0.5, ay = rnd() - 0.5, az = rnd() - 0.5, al = sqrt(ax * ax + ay * ay + az * az) || 1;\n  const q0 = [rnd() - 0.5, rnd() - 0.5, rnd() - 0.5, rnd() - 0.5], ql = sqrt(q0.reduce((s, c) => s + c * c, 0)) || 1;\n  return {\n    k, v: new Float32Array(v), n: new Float32Array(nrm),\n    x: 3 + rnd() * (W - 6), y: 3 + rnd() * (H - 6), z: rnd(), sz: 0.75 + 0.5 * rnd(),\n    q: q0.map((c) => c / ql), axis: [ax / al, ay / al, az / al], spin: (0.5 + rnd()) * (rnd() \u003c 0.5 ? -1 : 1), ph: rnd() * 2 * PI,\n  };\n}\n\nexport function setup(params) {\n  const flakes = [];\n  for (let i = 0; i \u003c MAXF; i++) flakes.push(makeFlake());\n  params.s = {\n    flakes, t: 0, stir: 0, stirT: -1, hue: 0, count: 40, size: 0.06,\n    far: new Float32Array(N * 4), tmp: new Float32Array(N * 4), frame: new Float32Array(N * 3),\n    sub: new Int16Array(64 * 64 * SS * SS), lut: new Float32Array(256 * 3), lutHue: NaN, serum: [],\n  };\n}\n\n// The current: two slow convection cells stacked in the panel, from the\n// stream function sin(pi x/W) sin(2 pi y/H), which is zero on all four walls,\n// so the flakes go round and never leave. A weaker mode of smaller cells\n// swells and fades over a minute, so no flake runs the same loop twice.\n// Nothing pulls them down: the flakes float, they never settle.\nfunction flow(x, y, t, out) {\n  const X = (PI * x) / W, Y = (2 * PI * y) / H, s = 0.35 * sin(t * 0.11);\n  out[0] = sin(X) * cos(Y) + s * sin(2 * X) * 1.5 * cos(1.5 * Y) * 0.5;\n  out[1] = -cos(X) * sin(Y) - s * 2 * cos(2 * X) * sin(1.5 * Y) * 0.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 40, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.hue = k[0];\n  P.count = floor(cl(k[2], 40, 120));\n  P.size = cl(k[3], 0, 1);\n  P.t += d;\n  if (input.btnPressed && input.btnPressed[0]) P.stirT = 0;\n  // The stir: a second to wind up, then it dies away over about eight.\n  if (P.stirT >= 0) {\n    P.stirT += d;\n    P.stir = P.stirT \u003c 1 ? sm(0, 1, P.stirT) : exp(-(P.stirT - 1) / 3.5);\n    if (P.stirT > 20) (P.stirT = -1), (P.stir = 0);\n  }\n  const v = [0, 0], S = P.stir;\n  for (let i = 0; i \u003c MAXF; i++) {\n    const f = P.flakes[i];\n    flow(f.x, f.y, P.t, v);\n    // Near flakes move faster across the panel than far ones.\n    const par = 0.6 + 0.6 * f.z, sp = 2.6 * par;\n    let vx = v[0] * sp + 0.4 * sin(P.t * 0.5 + f.ph), vy = v[1] * sp + 0.4 * cos(P.t * 0.37 + f.ph * 1.3);\n    if (S > 0) {\n      // The vortex runs round ellipses the shape of the panel, fastest\n      // half way out, so the flakes swing round without piling on a wall.\n      const ex = (f.x - W / 2) / (W / 2), ey = (f.y - H / 2) / (H / 2), r = sqrt(ex * ex + ey * ey);\n      const g = S * 1.6 * cl(1.15 - r, 0, 1) * par;\n      vx += g * -0.5 * (f.y - H / 2);\n      vy += g * 2 * (f.x - W / 2);\n    }\n    f.x = cl(f.x + vx * d, 1, W - 2);\n    f.y = cl(f.y + vy * d, 1, H - 2);\n    // Tumble: turn about the flake's own axis, which wanders slowly.\n    const ang = f.spin * (1 + 4 * S) * d, a = f.axis;\n    a[0] += 0.3 * sin(P.t * 0.23 + f.ph) * d;\n    a[1] += 0.3 * cos(P.t * 0.19 + f.ph * 2) * d;\n    const al = sqrt(a[0] * a[0] + a[1] * a[1] + a[2] * a[2]);\n    a[0] /= al;\n    a[1] /= al;\n    a[2] /= al;\n    const sh = sin(ang / 2), ch = cos(ang / 2), dq = [ch, a[0] * sh, a[1] * sh, a[2] * sh], q = f.q;\n    const n0 = dq[0] * q[0] - dq[1] * q[1] - dq[2] * q[2] - dq[3] * q[3];\n    const n1 = dq[0] * q[1] + dq[1] * q[0] + dq[2] * q[3] - dq[3] * q[2];\n    const n2 = dq[0] * q[2] - dq[1] * q[3] + dq[2] * q[0] + dq[3] * q[1];\n    const n3 = dq[0] * q[3] + dq[1] * q[2] - dq[2] * q[1] + dq[3] * q[0];\n    const ql = sqrt(n0 * n0 + n1 * n1 + n2 * n2 + n3 * n3);\n    q[0] = n0 / ql;\n    q[1] = n1 / ql;\n    q[2] = n2 / ql;\n    q[3] = n3 / ql;\n  }\n}\n\n// The foil's colour against its light, 0 to 1.3 over 256 steps: deep, gold,\n// pale gold, white-gold.\nfunction buildLut(P) {\n  const h = P.hue + 0.115 - floor(P.hue + 0.115);\n  // Round orange and yellow the deep end stays bright and saturated so it\n  // reads as dark gold, not brown; round red and pink the foil is paler, rose\n  // gold rather than red.\n  const warm = sm(0.0, 0.05, h) * (1 - sm(0.17, 0.24, h)), rose = 1 - sm(0.02, 0.07, abs(h - 0.995 + (h \u003c 0.5 ? 1 : 0)));\n  const sat = 1 - 0.4 * rose, lift = max(warm, rose);\n  const stops = [\n    [0, hsv(h - 0.025, 0.95 * sat, 0.4 + 0.18 * lift)],\n    [0.35, hsv(h - 0.01, 0.88 * sat, 0.72 + 0.12 * lift)],\n    [0.7, hsv(h + 0.005, 0.68 * sat, 1)],\n    [1.0, hsv(h + 0.01, 0.34 * sat, 1)],\n    [1.3, hsv(h + 0.01, 0.06, 1)],\n  ];\n  for (let i = 0; i \u003c 256; i++) {\n    const b = (i / 255) * 1.3;\n    let j = 0;\n    while (j \u003c stops.length - 2 && b > stops[j + 1][0]) j++;\n    const [b0, c0] = stops[j], [b1, c1] = stops[j + 1], f = cl((b - b0) / (b1 - b0), 0, 1);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = (c0[c] + (c1[c] - c0[c]) * f) * 255;\n  }\n  // The serum: the foil's hue, faint and greyed, lighter at the top.\n  const top = hsv(h - 0.02, (0.5 - 0.2 * warm) * sat, 0.11), bot = hsv(h - 0.02, (0.6 - 0.2 * warm) * sat, 0.025);\n  const lit = hsv(h + 0.01, 0.3 * sat, 1);\n  P.serum = [top[0] * 255, top[1] * 255, top[2] * 255, bot[0] * 255, bot[1] * 255, bot[2] * 255, lit[0] * 255, lit[1] * 255, lit[2] * 255];\n  P.lutHue = P.hue;\n}\n\nconst rot = new Float32Array(9);\nfunction quatMat(q) {\n  const [w, x, y, z] = q;\n  rot[0] = 1 - 2 * (y * y + z * z); rot[1] = 2 * (x * y - w * z); rot[2] = 2 * (x * z + w * y);\n  rot[3] = 2 * (x * y + w * z); rot[4] = 1 - 2 * (x * x + z * z); rot[5] = 2 * (y * z - w * x);\n  rot[6] = 2 * (x * z - w * y); rot[7] = 2 * (y * z + w * x); rot[8] = 1 - 2 * (x * x + y * y);\n}\n\nconst PX = new Float32Array(10 * 3), FC = new Float32Array(9 * 4), ORD = [];\n\n// One flake into buffer buf (RGB, or RGBA premultiplied when far), over what\n// is there. Each LED takes 3 x 3 samples, 2 x 2 on a big flake; a facet\n// nearer the viewer covers the ones behind it, and the share of samples a\n// flake covers is how much of the LED it takes.\nfunction drawFlake(P, f, buf, rgba, dim, glints) {\n  quatMat(f.q);\n  const s = (6.5 + 6 * P.size) * f.sz * (0.5 + 0.7 * f.z), k = f.k, v = f.v, n = f.n, lut = P.lut;\n  let x0 = W, x1 = 0, y0 = H, y1 = 0;\n  for (let i = 0; i \u003c= k; i++) {\n    const a = v[i * 3], b = v[i * 3 + 1], c = v[i * 3 + 2];\n    const X = f.x + s * (rot[0] * a + rot[1] * b + rot[2] * c), Y = f.y + s * (rot[3] * a + rot[4] * b + rot[5] * c);\n    PX[i * 3] = X;\n    PX[i * 3 + 1] = Y;\n    PX[i * 3 + 2] = rot[6] * a + rot[7] * b + rot[8] * c;\n    x0 = min(x0, X);\n    x1 = max(x1, X);\n    y0 = min(y0, Y);\n    y1 = max(y1, Y);\n  }\n  // Big flakes need fewer samples to an LED for the same smooth edge.\n  const ss = s > 7 ? 2 : SS;\n  const bx = max(0, floor(x0)), by = max(0, floor(y0)), bw = min(W, floor(x1) + 1) - bx, bh = min(H, floor(y1) + 1) - by;\n  if (bw \u003c= 0 || bh \u003c= 0 || bw > 64 || bh > 64) return;\n  const sw = bw * ss, sub = P.sub;\n  sub.fill(-1, 0, sw * bh * ss);\n  ORD.length = 0;\n  for (let i = 0; i \u003c k; i++) {\n    // The facet's normal turned with the flake, towards the viewer: foil\n    // shines from both faces.\n    const a = n[i * 3], b = n[i * 3 + 1], c = n[i * 3 + 2];\n    let nx = rot[0] * a + rot[1] * b + rot[2] * c, ny = rot[3] * a + rot[4] * b + rot[5] * c, nz = rot[6] * a + rot[7] * b + rot[8] * c;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    const spec = max(0, nx * HH[0] + ny * HH[1] + nz * HH[2]) ** 18, diff = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n    // A little base light, the lamp's diffuse share, the glow of the serum\n    // above for facets tipped up, and a narrow highlight, cos^18, half\n    // strength 16 degrees off the mirror angle: a facet flashes as it\n    // sweeps through and its neighbours, tilted their own ways, stay deep.\n    const env = 0.5 - 0.5 * ny;\n    const br = (0.1 + 0.45 * diff + 0.25 * env + 0.95 * spec) * dim;\n    FC[i * 4] = cl(floor((br / 1.3) * 255), 0, 255);\n    FC[i * 4 + 1] = spec;\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    FC[i * 4 + 2] = (PX[2] + PX[j1 * 3 + 2] + PX[j2 * 3 + 2]) / 3;\n    ORD.push(i);\n  }\n  ORD.sort((a, b) => FC[a * 4 + 2] - FC[b * 4 + 2]);\n  for (const i of ORD) {\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    const ax = PX[0], ay = PX[1], bxx = PX[j1 * 3], byy = PX[j1 * 3 + 1], cx = PX[j2 * 3], cy = PX[j2 * 3 + 1];\n    const area = (bxx - ax) * (cy - ay) - (byy - ay) * (cx - ax);\n    if (abs(area) \u003c 1e-4) continue;\n    const sg = area > 0 ? 1 : -1;\n    const sx0 = max(0, floor((min(ax, bxx, cx) - bx) * ss)), sx1 = min(sw - 1, floor((max(ax, bxx, cx) - bx) * ss));\n    const sy0 = max(0, floor((min(ay, byy, cy) - by) * ss)), sy1 = min(bh * ss - 1, floor((max(ay, byy, cy) - by) * ss));\n    for (let sy = sy0; sy \u003c= sy1; sy++) {\n      const py = by + (sy + 0.5) / ss;\n      for (let sx = sx0; sx \u003c= sx1; sx++) {\n        const px = bx + (sx + 0.5) / ss;\n        const e0 = ((bxx - ax) * (py - ay) - (byy - ay) * (px - ax)) * sg;\n        const e1 = ((cx - bxx) * (py - byy) - (cy - byy) * (px - bxx)) * sg;\n        const e2 = ((ax - cx) * (py - cy) - (ay - cy) * (px - cx)) * sg;\n        if (e0 >= 0 && e1 >= 0 && e2 >= 0) sub[sy * sw + sx] = i;\n      }\n    }\n    if (glints && FC[i * 4 + 1] > 0.6) glints.push((ax + bxx + cx) / 3, (ay + byy + cy) / 3, FC[i * 4 + 1]);\n  }\n  for (let y = 0; y \u003c bh; y++)\n    for (let x = 0; x \u003c bw; x++) {\n      let r = 0, g = 0, b = 0, c = 0;\n      for (let u = 0; u \u003c ss; u++)\n        for (let w = 0; w \u003c ss; w++) {\n          const i = sub[(y * ss + u) * sw + x * ss + w];\n          if (i \u003c 0) continue;\n          const li = FC[i * 4] * 3;\n          r += lut[li];\n          g += lut[li + 1];\n          b += lut[li + 2];\n          c++;\n        }\n      if (!c) continue;\n      const al = c / (ss * ss), p = (by + y) * W + bx + x;\n      if (rgba) {\n        const o = p * 4;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n        buf[o + 3] = buf[o + 3] * (1 - al) + al;\n      } else {\n        const o = p * 3;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const fr = P.frame, far = P.far, tmp = P.tmp, t = P.t, sv = P.serum;\n  // The serum: a soft gradient and a slow caustic shimmer that fades with\n  // depth, light let in from the top.\n  const colw = P.colw || (P.colw = new Float32Array(W));\n  for (let x = 0; x \u003c W; x++) colw[x] = 1.5 * sin(x * 0.17 - t * 0.31);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / (H - 1), dep = exp(-y / 70), roww = 1.7 * sin(y * 0.11 + t * 0.4) + t * 0.23;\n    for (let x = 0; x \u003c W; x++) {\n      const a = sin(x * 0.19 + roww), b = sin(y * 0.13 + colw[x] - t * 0.17);\n      const c = a + b, caus = exp(-c * c * 6) * 0.9 * dep, o = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) fr[o + ch] = sv[ch] * (1 - g) + sv[3 + ch] * g + caus * 0.07 * sv[6 + ch];\n    }\n  }\n  const fl = P.flakes.slice(0, P.count).sort((a, b) => a.z - b.z);\n  far.fill(0);\n  let i = 0;\n  // Far flakes, dimmer, into their own layer, softened by a 1-2-1 blur.\n  for (; i \u003c fl.length && fl[i].z \u003c 0.35; i++) drawFlake(P, fl[i], far, true, 0.6 + 0.6 * fl[i].z, null);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) tmp[o + c] = (far[l + c] + 2 * far[o + c] + far[r + c]) / 4;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, u = y > 0 ? o - W * 4 : o, dn = y \u003c H - 1 ? o + W * 4 : o, f3 = (y * W + x) * 3;\n      const a = (tmp[u + 3] + 2 * tmp[o + 3] + tmp[dn + 3]) / 4;\n      for (let c = 0; c \u003c 3; c++) fr[f3 + c] = fr[f3 + c] * (1 - a) + (tmp[u + c] + 2 * tmp[o + c] + tmp[dn + c]) / 4;\n    }\n  // Near flakes, sharp, over the top; their brightest facets throw a glint.\n  const glints = [];\n  for (; i \u003c fl.length; i++) drawFlake(P, fl[i], fr, false, 1, fl[i].z > 0.6 ? glints : null);\n  for (let g = 0; g \u003c glints.length; g += 3) {\n    const gx = floor(glints[g]), gy = floor(glints[g + 1]), s = (glints[g + 2] - 0.6) / 0.4;\n    for (let r = -2; r \u003c= 2; r++) {\n      const a = s * (r === 0 ? 1 : abs(r) === 1 ? 0.55 : 0.22);\n      for (const [x, y] of r === 0 ? [[gx, gy]] : [[gx + r, gy], [gx, gy + r]]) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const o = (y * W + x) * 3;\n        fr[o] += 255 * a;\n        fr[o + 1] += 250 * a;\n        fr[o + 2] += 225 * a;\n      }\n    }\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, fr[o]), min(255, fr[o + 1]), min(255, fr[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower."},{"name":"Flakes","min":40,"max":120,"about":"How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil."},{"name":"Size","min":0,"max":1,"about":"How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one."}],"start":[0,2,40,0.06],"measures":{"motion":0.1468,"detail":0.0417,"edges":0.5435,"complexity":1.0218,"coverage":0.4003,"colour":0.1903,"drift":0.1193},"knobResponse":[0.0888,0.0967,0.0947,0.1201]},{"slug":"goldbach-comet","title":"Goldbach Comet","family":"number","round":33,"note":"짝수 n 을 두 소수의 합으로 쓰는 가짓수를 매끈한 예측값으로 나눠 가로로 찍고, n 은 아래로 커져요. n 이 3 이나 5 나 7 로 나뉘는지에 따라 여덟 줄기가 색으로 갈라지고, 아래로 갈수록 줄기가 가늘어지며 52만까지 가면 처음부터 다시 흘러요. K3 은 7 부터 소수 하나씩 줄기를 접어 한 줄로 모으고, K1 을 누르면 8초 동안 다 접었다 펴요.","idea":"Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.","buttons":"K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.","code":"// ===== Patternflow pattern =====\n// Title:   Goldbach Comet\n// Family:  number\n// Idea:    Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Goldbach's comet, the partition counts of Goldbach's conjecture (Christian Goldbach, 1742), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1\n//\n// Knob 1: Hue. Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue.\n// Knob 2: Speed. How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes.\n// Knob 3: Correction. Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel.\n// Knob 4: Smear. How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count.\n// Buttons: K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.\n\nconst W = 64, H = 128, LOGM = 19, M = 1 \u003c\u003c LOGM, HN = M >> 1;\nconst U0 = 9, U1 = LOGM, SPAN = 4, CAP = 160, XS = 40, X0 = 8, MID = 0.6;\nconst L3 = Math.log(2), L5 = Math.log(4 / 3), L7 = Math.log(6 / 5);\nconst C2 = 0.6601618158468696;\nconst { min, max, floor, ceil, log, exp, cos, sin, PI, LN2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Complex FFT of size n in place. tc/ts hold e^(-i pi k / half) at\n// half + k for every stage, so each stage reads its twiddles in a row.\nfunction fft(re, im, n, tc, ts, sign) {\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      (re[i] = re[j]), (re[j] = t);\n      (t = im[i]), (im[i] = im[j]), (im[j] = t);\n    }\n  }\n  for (let half = 1; half \u003c n; half \u003c\u003c= 1)\n    for (let i = 0, len = half \u003c\u003c 1; i \u003c n; i += len)\n      for (let k = 0; k \u003c half; k++) {\n        const cr = tc[half + k], ci = sign * ts[half + k], a = i + k, b = a + half;\n        const br = re[b], bi = im[b], xr = br * cr - bi * ci, xi = br * ci + bi * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n      }\n}\n\n// g(n) for every even n up to 2^19, the number of ways n = p + q with\n// primes p \u003c= q. Odd primes 2a + 1 make a 0/1 string over a \u003c 2^18, and\n// its square under convolution counts the ordered pairs with\n// a + b = n/2 - 1. The string is real, so it rides as one complex string\n// of half the length (even a in the real part, odd a in the imaginary)\n// and is pulled apart after the transform. Pairing up the 43,390 primes\n// below 2^19 one by one would be 512 million steps; this is 55 to 110 ms.\n// Checked against counting pairs one by one for every even n below 20,000\n// and every 997th one above, up to g(2^19) = 2367: no misses. Run to 2^20\n// it gave g(10^6) = 5402 with rounding errors under 2e-11, but took twice\n// as long.\nfunction goldbach(comp) {\n  const n = HN, tc = new Float64Array(M), ts = new Float64Array(M);\n  // The top stage by rotation, started afresh from cos and sin every 64\n  // steps: 4096 calls to them instead of 262,144.\n  const sr = cos(-PI / n), si = sin(-PI / n);\n  for (let k = 0; k \u003c n; k++) {\n    if ((k & 63) === 0) (tc[n + k] = cos((-PI * k) / n)), (ts[n + k] = sin((-PI * k) / n));\n    else {\n      const a = tc[n + k - 1], b = ts[n + k - 1];\n      (tc[n + k] = a * sr - b * si), (ts[n + k] = a * si + b * sr);\n    }\n  }\n  for (let half = n >> 1; half >= 1; half >>= 1)\n    for (let k = 0, st = n / half; k \u003c half; k++) (tc[half + k] = tc[n + k * st]), (ts[half + k] = ts[n + k * st]);\n  const zr = new Float64Array(n), zi = new Float64Array(n);\n  for (let a = 1; a \u003c n; a++) if (!comp[2 * a + 1]) (a & 1 ? zi : zr)[a >> 1] = 1;\n  fft(zr, zi, n, tc, ts, 1);\n  // X[k] and X[k + n] of the full string from Z[k] and Z[n - k]; square\n  // them; fold the squares back into one half-length string, pairs k and\n  // n - k together so it can be done in place.\n  const out = new Float64Array(4);\n  const fold = (k, j, o) => {\n    const ar = zr[k], ai = zi[k], br = zr[j], bi = -zi[j];\n    const er = (ar + br) / 2, ei = (ai + bi) / 2, odr = (ai - bi) / 2, odi = -(ar - br) / 2;\n    const wr = tc[n + k], wi = ts[n + k], tr = odr * wr - odi * wi, ti = odr * wi + odi * wr;\n    const x1r = er + tr, x1i = ei + ti, x2r = er - tr, x2i = ei - ti;\n    const y1r = x1r * x1r - x1i * x1i, y1i = 2 * x1r * x1i, y2r = x2r * x2r - x2i * x2i, y2i = 2 * x2r * x2i;\n    const sr = (y1r + y2r) / 2, si = (y1i + y2i) / 2, dr = (y1r - y2r) / 2, di = (y1i - y2i) / 2;\n    out[o] = sr - (di * wr - dr * wi);\n    out[o + 1] = si + (dr * wr + di * wi);\n  };\n  for (let k = 0; k \u003c= n >> 1; k++) {\n    const j = (n - k) & (n - 1);\n    fold(k, j, 0);\n    fold(j, k, 2);\n    (zr[k] = out[0]), (zi[k] = out[1]), (zr[j] = out[2]), (zi[j] = out[3]);\n  }\n  fft(zr, zi, n, tc, ts, -1);\n  const g = new Int32Array(HN + 1);\n  for (let k = 0; k + 1 \u003c= HN; k++) {\n    const h = k + 1, c = Math.round((k & 1 ? zi[k >> 1] : zr[k >> 1]) / n) + (h & 1 && h > 2 && !comp[h] ? 1 : 0);\n    g[h] = c >> 1;\n  }\n  g[2] = 1;\n  return g;\n}\n\n// The Hardy-Littlewood count without its singular series: C2 times the\n// integral of dt / (ln t ln(n - t)) from 2 to n - 2, on a table of 97\n// points from n = 2^8 to 2^20 and read between them in ln n. C2 n / ln^2 n\n// alone falls 23% short at n = 2000 and 15% at 500,000, and that drift\n// would tip the streaks four LEDs across the tape. With the integral, g(n)\n// over the whole prediction averages 0.953 at n = 2000, 0.982 at 20,000\n// and 0.997 at 500,000, spread 5.7%, 2.9% and 0.9% about it, so a streak\n// narrows from a spread of about two LEDs to a third of one.\nfunction hlTable() {\n  const t = new Float64Array(97);\n  for (let j = 0; j \u003c 97; j++) {\n    const n = 2 ** (8 + j / 8), a = log(2), b = log(n / 2), K = 200, h = (b - a) / K;\n    let s = 0;\n    for (let i = 0; i \u003c= K; i++) {\n      const u = a + i * h, x = exp(u);\n      s += ((i === 0 || i === K ? 1 : i & 1 ? 4 : 2) * x) / (u * log(n - x));\n    }\n    t[j] = log((2 * C2 * s * h) / 3);\n  }\n  return t;\n}\n\nexport function setup(params) {\n  const comp = new Uint8Array(M + 1);\n  for (let i = 3; i * i \u003c= M; i += 2) if (!comp[i]) for (let j = i * i; j \u003c= M; j += 2 * i) comp[j] = 1;\n  const g = goldbach(comp), hl = hlTable();\n  // For each even n = 2h: which of 3, 5, 7 and 11 divide it (bits 1, 2, 4\n  // and 8), and the log of the rest of its singular series, the product of\n  // (p - 1)/(p - 2) over the odd primes p from 11 up that divide it.\n  const bits = new Uint8Array(HN + 1), lr = new Float32Array(HN + 1), res = new Float32Array(HN + 1);\n  for (let p = 3; p \u003c= HN; p += 2) {\n    if (comp[p]) continue;\n    if (p > 7) {\n      const f = log((p - 1) / (p - 2));\n      for (let h = p; h \u003c= HN; h += p) lr[h] += f;\n    } else for (let h = p, b = p === 3 ? 1 : p === 5 ? 2 : 4; h \u003c= HN; h += p) bits[h] |= b;\n  }\n  for (let h = 11; h \u003c= HN; h += 11) bits[h] |= 8;\n  // res is how far g(n) sits from the whole prediction, in ln: 0 would be\n  // exactly Hardy-Littlewood. The prediction is read off the table once\n  // every 16 numbers and drawn straight between.\n  let hA = 0, hB = 0;\n  const hlAt = (h) => {\n    const z = cl((log(2 * h) / LN2 - 8) * 8, 0, 96), j = min(95, floor(z));\n    return hl[j] + (hl[j + 1] - hl[j]) * (z - j);\n  };\n  for (let h = 4; h \u003c= HN; h++) {\n    if (((h - 4) & 15) === 0) (hA = hlAt(h)), (hB = hlAt(h + 16));\n    const b = bits[h], small = (b & 1 ? L3 : 0) + (b & 2 ? L5 : 0) + (b & 4 ? L7 : 0);\n    res[h] = log(g[h]) - lr[h] - small - (hA + ((hB - hA) * ((h - 4) & 15)) / 16);\n  }\n  params.s = {\n    bits, lr, res, u: 10.6, hue: 0, speed: 2, kap: 0, smear: 0.06, bump: -1,\n    acc: new Float32Array(W * 4), pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(W * H * 3),\n    off: new Float32Array(16), cls: new Uint8Array(16),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.smear = cl(k[3], 0, 1);\n  const k3 = cl(k[2], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.bump = 0;\n  // The tap sends the correction to the far end from the knob and back:\n  // in for three seconds, held for two, out for three.\n  let kap = k3;\n  if (P.bump >= 0) {\n    P.bump += d / 8;\n    const b = P.bump \u003c 3 / 8 ? sm((P.bump * 8) / 3) : P.bump \u003c 5 / 8 ? 1 : sm(((1 - P.bump) * 8) / 3);\n    kap = k3 + ((k3 \u003c 0.5 ? 1 : 0) - k3) * b;\n    if (P.bump >= 1) P.bump = -1;\n  }\n  P.kap = kap;\n  P.u += d * P.speed * 0.12;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { bits, lr, res, acc, pal, rgb, off, cls } = P;\n  if (P.palHue !== P.hue) {\n    // Gold, green, pink, sky blue and pale blue at Hue 0. The gold is kept\n    // light so a thin streak of it does not read brown.\n    const base = [[0.13, 0.62], [0.36, 0.75], [0.9, 0.55], [0.55, 0.7], [0.62, 0.35]];\n    for (let c = 0; c \u003c 5; c++) hsv(P.hue + base[c][0], base[c][1], 1, pal, c * 3);\n    P.palHue = P.hue;\n  }\n  // The correction comes in a prime at a time: the first third of the knob\n  // folds the 7s onto the streaks beside them, the second the 5s, the last\n  // the 3s, while everything glides to meet in the middle.\n  const kap = P.kap * 3, w7 = sm(kap), w5 = sm(kap - 1), w3 = sm(kap - 2);\n  for (let b = 0; b \u003c 16; b++) {\n    off[b] = (b & 1 ? L3 * (1 - w3) : 0) + (b & 2 ? L5 * (1 - w5) : 0) + (b & 4 ? L7 * (1 - w7) : 0);\n    cls[b] = (b & 1 ? 0 : b & 2 ? 1 : b & 4 ? 2 : b & 8 ? 3 : 4) * 3;\n  }\n  // Smear leaves in the primes from 11 up. Each of them moves its\n  // multiples right by ln((p - 1)/(p - 2)), 0.105 for 11, 0.087 for 13,\n  // 0.065 for 17, so left in they fan every streak out four LEDs wide.\n  const shift = X0 + XS * MID * w3 - 0.5, keep = P.smear;\n  // The view is four octaves of n, a strip of ln2 n: row y holds\n  // [u + y du, u + (y + 1) du). The tape runs from 2^9 to 2^19 and starts\n  // over after ten dark rows.\n  const du = SPAN / H, u0 = U0, tape = U1 - u0 + 10 * du;\n  for (let y = 0; y \u003c H; y++) {\n    acc.fill(0);\n    let uu = u0 + ((((P.u - u0 + y * du) % tape) + tape) % tape);\n    if (uu + du \u003c= U1) {\n      const hlo = max(4, ceil(2 ** uu / 2)), hhi = min(HN + 1, ceil(2 ** (uu + du) / 2));\n      const count = hhi - hlo;\n      // Every n in the row while there are few, every s-th when there are\n      // more than CAP. s is a power of 2: a stride of 17 would keep only\n      // multiples of 17 and move every streak 2.3 LEDs right by its 16/15.\n      const s = count > CAP ? 2 ** ceil(Math.log2(count / CAP)) : 1;\n      for (let h = ceil(hlo / s) * s; h \u003c hhi; h += s) {\n        const b = bits[h], x = shift + XS * (res[h] + keep * lr[h] + off[b]), x0 = floor(x), f = x - x0, c = cls[b];\n        if (x0 >= 0 && x0 \u003c W) {\n          const o = x0 * 4, w = 1 - f;\n          (acc[o] += w), (acc[o + 1] += w * pal[c]), (acc[o + 2] += w * pal[c + 1]), (acc[o + 3] += w * pal[c + 2]);\n        }\n        if (x0 + 1 >= 0 && x0 + 1 \u003c W) {\n          const o = x0 * 4 + 4;\n          (acc[o] += f), (acc[o + 1] += f * pal[c]), (acc[o + 2] += f * pal[c + 1]), (acc[o + 3] += f * pal[c + 2]);\n        }\n      }\n    }\n    // Dots in one LED add up, on a log scale against the busiest LED of the\n    // row: full at 40% of it, and one dot lights an LED to about a third in\n    // a crowded row and to half in a sparse one, so a lone dot in a far\n    // tail stays faint and the core of a streak stands out. The colour is\n    // the mix of the classes that landed there.\n    let top = 0;\n    for (let x = 0; x \u003c W; x++) top = max(top, acc[x * 4]);\n    const norm = 1 / log(1 + 2 * max(4, 0.4 * top));\n    for (let x = 0; x \u003c W; x++) {\n      const o = x * 4, a = acc[o], q = (y * W + x) * 3;\n      if (a \u003c= 0) {\n        rgb[q] = rgb[q + 1] = rgb[q + 2] = 0;\n        continue;\n      }\n      const lev = min(1, log(1 + 2 * a) * norm) / a;\n      rgb[q] = acc[o + 1] * lev;\n      rgb[q + 1] = acc[o + 2] * lev;\n      rgb[q + 2] = acc[o + 3] * lev;\n    }\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-goldbach-comet","type":"code","name":"goldbach-comet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Goldbach Comet\n// Family:  number\n// Idea:    Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Goldbach's comet, the partition counts of Goldbach's conjecture (Christian Goldbach, 1742), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1\n//\n// Knob 1: Hue. Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue.\n// Knob 2: Speed. How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes.\n// Knob 3: Correction. Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel.\n// Knob 4: Smear. How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count.\n// Buttons: K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.\n\nconst W = 64, H = 128, LOGM = 19, M = 1 \u003c\u003c LOGM, HN = M >> 1;\nconst U0 = 9, U1 = LOGM, SPAN = 4, CAP = 160, XS = 40, X0 = 8, MID = 0.6;\nconst L3 = Math.log(2), L5 = Math.log(4 / 3), L7 = Math.log(6 / 5);\nconst C2 = 0.6601618158468696;\nconst { min, max, floor, ceil, log, exp, cos, sin, PI, LN2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Complex FFT of size n in place. tc/ts hold e^(-i pi k / half) at\n// half + k for every stage, so each stage reads its twiddles in a row.\nfunction fft(re, im, n, tc, ts, sign) {\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      (re[i] = re[j]), (re[j] = t);\n      (t = im[i]), (im[i] = im[j]), (im[j] = t);\n    }\n  }\n  for (let half = 1; half \u003c n; half \u003c\u003c= 1)\n    for (let i = 0, len = half \u003c\u003c 1; i \u003c n; i += len)\n      for (let k = 0; k \u003c half; k++) {\n        const cr = tc[half + k], ci = sign * ts[half + k], a = i + k, b = a + half;\n        const br = re[b], bi = im[b], xr = br * cr - bi * ci, xi = br * ci + bi * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n      }\n}\n\n// g(n) for every even n up to 2^19, the number of ways n = p + q with\n// primes p \u003c= q. Odd primes 2a + 1 make a 0/1 string over a \u003c 2^18, and\n// its square under convolution counts the ordered pairs with\n// a + b = n/2 - 1. The string is real, so it rides as one complex string\n// of half the length (even a in the real part, odd a in the imaginary)\n// and is pulled apart after the transform. Pairing up the 43,390 primes\n// below 2^19 one by one would be 512 million steps; this is 55 to 110 ms.\n// Checked against counting pairs one by one for every even n below 20,000\n// and every 997th one above, up to g(2^19) = 2367: no misses. Run to 2^20\n// it gave g(10^6) = 5402 with rounding errors under 2e-11, but took twice\n// as long.\nfunction goldbach(comp) {\n  const n = HN, tc = new Float64Array(M), ts = new Float64Array(M);\n  // The top stage by rotation, started afresh from cos and sin every 64\n  // steps: 4096 calls to them instead of 262,144.\n  const sr = cos(-PI / n), si = sin(-PI / n);\n  for (let k = 0; k \u003c n; k++) {\n    if ((k & 63) === 0) (tc[n + k] = cos((-PI * k) / n)), (ts[n + k] = sin((-PI * k) / n));\n    else {\n      const a = tc[n + k - 1], b = ts[n + k - 1];\n      (tc[n + k] = a * sr - b * si), (ts[n + k] = a * si + b * sr);\n    }\n  }\n  for (let half = n >> 1; half >= 1; half >>= 1)\n    for (let k = 0, st = n / half; k \u003c half; k++) (tc[half + k] = tc[n + k * st]), (ts[half + k] = ts[n + k * st]);\n  const zr = new Float64Array(n), zi = new Float64Array(n);\n  for (let a = 1; a \u003c n; a++) if (!comp[2 * a + 1]) (a & 1 ? zi : zr)[a >> 1] = 1;\n  fft(zr, zi, n, tc, ts, 1);\n  // X[k] and X[k + n] of the full string from Z[k] and Z[n - k]; square\n  // them; fold the squares back into one half-length string, pairs k and\n  // n - k together so it can be done in place.\n  const out = new Float64Array(4);\n  const fold = (k, j, o) => {\n    const ar = zr[k], ai = zi[k], br = zr[j], bi = -zi[j];\n    const er = (ar + br) / 2, ei = (ai + bi) / 2, odr = (ai - bi) / 2, odi = -(ar - br) / 2;\n    const wr = tc[n + k], wi = ts[n + k], tr = odr * wr - odi * wi, ti = odr * wi + odi * wr;\n    const x1r = er + tr, x1i = ei + ti, x2r = er - tr, x2i = ei - ti;\n    const y1r = x1r * x1r - x1i * x1i, y1i = 2 * x1r * x1i, y2r = x2r * x2r - x2i * x2i, y2i = 2 * x2r * x2i;\n    const sr = (y1r + y2r) / 2, si = (y1i + y2i) / 2, dr = (y1r - y2r) / 2, di = (y1i - y2i) / 2;\n    out[o] = sr - (di * wr - dr * wi);\n    out[o + 1] = si + (dr * wr + di * wi);\n  };\n  for (let k = 0; k \u003c= n >> 1; k++) {\n    const j = (n - k) & (n - 1);\n    fold(k, j, 0);\n    fold(j, k, 2);\n    (zr[k] = out[0]), (zi[k] = out[1]), (zr[j] = out[2]), (zi[j] = out[3]);\n  }\n  fft(zr, zi, n, tc, ts, -1);\n  const g = new Int32Array(HN + 1);\n  for (let k = 0; k + 1 \u003c= HN; k++) {\n    const h = k + 1, c = Math.round((k & 1 ? zi[k >> 1] : zr[k >> 1]) / n) + (h & 1 && h > 2 && !comp[h] ? 1 : 0);\n    g[h] = c >> 1;\n  }\n  g[2] = 1;\n  return g;\n}\n\n// The Hardy-Littlewood count without its singular series: C2 times the\n// integral of dt / (ln t ln(n - t)) from 2 to n - 2, on a table of 97\n// points from n = 2^8 to 2^20 and read between them in ln n. C2 n / ln^2 n\n// alone falls 23% short at n = 2000 and 15% at 500,000, and that drift\n// would tip the streaks four LEDs across the tape. With the integral, g(n)\n// over the whole prediction averages 0.953 at n = 2000, 0.982 at 20,000\n// and 0.997 at 500,000, spread 5.7%, 2.9% and 0.9% about it, so a streak\n// narrows from a spread of about two LEDs to a third of one.\nfunction hlTable() {\n  const t = new Float64Array(97);\n  for (let j = 0; j \u003c 97; j++) {\n    const n = 2 ** (8 + j / 8), a = log(2), b = log(n / 2), K = 200, h = (b - a) / K;\n    let s = 0;\n    for (let i = 0; i \u003c= K; i++) {\n      const u = a + i * h, x = exp(u);\n      s += ((i === 0 || i === K ? 1 : i & 1 ? 4 : 2) * x) / (u * log(n - x));\n    }\n    t[j] = log((2 * C2 * s * h) / 3);\n  }\n  return t;\n}\n\nexport function setup(params) {\n  const comp = new Uint8Array(M + 1);\n  for (let i = 3; i * i \u003c= M; i += 2) if (!comp[i]) for (let j = i * i; j \u003c= M; j += 2 * i) comp[j] = 1;\n  const g = goldbach(comp), hl = hlTable();\n  // For each even n = 2h: which of 3, 5, 7 and 11 divide it (bits 1, 2, 4\n  // and 8), and the log of the rest of its singular series, the product of\n  // (p - 1)/(p - 2) over the odd primes p from 11 up that divide it.\n  const bits = new Uint8Array(HN + 1), lr = new Float32Array(HN + 1), res = new Float32Array(HN + 1);\n  for (let p = 3; p \u003c= HN; p += 2) {\n    if (comp[p]) continue;\n    if (p > 7) {\n      const f = log((p - 1) / (p - 2));\n      for (let h = p; h \u003c= HN; h += p) lr[h] += f;\n    } else for (let h = p, b = p === 3 ? 1 : p === 5 ? 2 : 4; h \u003c= HN; h += p) bits[h] |= b;\n  }\n  for (let h = 11; h \u003c= HN; h += 11) bits[h] |= 8;\n  // res is how far g(n) sits from the whole prediction, in ln: 0 would be\n  // exactly Hardy-Littlewood. The prediction is read off the table once\n  // every 16 numbers and drawn straight between.\n  let hA = 0, hB = 0;\n  const hlAt = (h) => {\n    const z = cl((log(2 * h) / LN2 - 8) * 8, 0, 96), j = min(95, floor(z));\n    return hl[j] + (hl[j + 1] - hl[j]) * (z - j);\n  };\n  for (let h = 4; h \u003c= HN; h++) {\n    if (((h - 4) & 15) === 0) (hA = hlAt(h)), (hB = hlAt(h + 16));\n    const b = bits[h], small = (b & 1 ? L3 : 0) + (b & 2 ? L5 : 0) + (b & 4 ? L7 : 0);\n    res[h] = log(g[h]) - lr[h] - small - (hA + ((hB - hA) * ((h - 4) & 15)) / 16);\n  }\n  params.s = {\n    bits, lr, res, u: 10.6, hue: 0, speed: 2, kap: 0, smear: 0.06, bump: -1,\n    acc: new Float32Array(W * 4), pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(W * H * 3),\n    off: new Float32Array(16), cls: new Uint8Array(16),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.smear = cl(k[3], 0, 1);\n  const k3 = cl(k[2], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.bump = 0;\n  // The tap sends the correction to the far end from the knob and back:\n  // in for three seconds, held for two, out for three.\n  let kap = k3;\n  if (P.bump >= 0) {\n    P.bump += d / 8;\n    const b = P.bump \u003c 3 / 8 ? sm((P.bump * 8) / 3) : P.bump \u003c 5 / 8 ? 1 : sm(((1 - P.bump) * 8) / 3);\n    kap = k3 + ((k3 \u003c 0.5 ? 1 : 0) - k3) * b;\n    if (P.bump >= 1) P.bump = -1;\n  }\n  P.kap = kap;\n  P.u += d * P.speed * 0.12;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { bits, lr, res, acc, pal, rgb, off, cls } = P;\n  if (P.palHue !== P.hue) {\n    // Gold, green, pink, sky blue and pale blue at Hue 0. The gold is kept\n    // light so a thin streak of it does not read brown.\n    const base = [[0.13, 0.62], [0.36, 0.75], [0.9, 0.55], [0.55, 0.7], [0.62, 0.35]];\n    for (let c = 0; c \u003c 5; c++) hsv(P.hue + base[c][0], base[c][1], 1, pal, c * 3);\n    P.palHue = P.hue;\n  }\n  // The correction comes in a prime at a time: the first third of the knob\n  // folds the 7s onto the streaks beside them, the second the 5s, the last\n  // the 3s, while everything glides to meet in the middle.\n  const kap = P.kap * 3, w7 = sm(kap), w5 = sm(kap - 1), w3 = sm(kap - 2);\n  for (let b = 0; b \u003c 16; b++) {\n    off[b] = (b & 1 ? L3 * (1 - w3) : 0) + (b & 2 ? L5 * (1 - w5) : 0) + (b & 4 ? L7 * (1 - w7) : 0);\n    cls[b] = (b & 1 ? 0 : b & 2 ? 1 : b & 4 ? 2 : b & 8 ? 3 : 4) * 3;\n  }\n  // Smear leaves in the primes from 11 up. Each of them moves its\n  // multiples right by ln((p - 1)/(p - 2)), 0.105 for 11, 0.087 for 13,\n  // 0.065 for 17, so left in they fan every streak out four LEDs wide.\n  const shift = X0 + XS * MID * w3 - 0.5, keep = P.smear;\n  // The view is four octaves of n, a strip of ln2 n: row y holds\n  // [u + y du, u + (y + 1) du). The tape runs from 2^9 to 2^19 and starts\n  // over after ten dark rows.\n  const du = SPAN / H, u0 = U0, tape = U1 - u0 + 10 * du;\n  for (let y = 0; y \u003c H; y++) {\n    acc.fill(0);\n    let uu = u0 + ((((P.u - u0 + y * du) % tape) + tape) % tape);\n    if (uu + du \u003c= U1) {\n      const hlo = max(4, ceil(2 ** uu / 2)), hhi = min(HN + 1, ceil(2 ** (uu + du) / 2));\n      const count = hhi - hlo;\n      // Every n in the row while there are few, every s-th when there are\n      // more than CAP. s is a power of 2: a stride of 17 would keep only\n      // multiples of 17 and move every streak 2.3 LEDs right by its 16/15.\n      const s = count > CAP ? 2 ** ceil(Math.log2(count / CAP)) : 1;\n      for (let h = ceil(hlo / s) * s; h \u003c hhi; h += s) {\n        const b = bits[h], x = shift + XS * (res[h] + keep * lr[h] + off[b]), x0 = floor(x), f = x - x0, c = cls[b];\n        if (x0 >= 0 && x0 \u003c W) {\n          const o = x0 * 4, w = 1 - f;\n          (acc[o] += w), (acc[o + 1] += w * pal[c]), (acc[o + 2] += w * pal[c + 1]), (acc[o + 3] += w * pal[c + 2]);\n        }\n        if (x0 + 1 >= 0 && x0 + 1 \u003c W) {\n          const o = x0 * 4 + 4;\n          (acc[o] += f), (acc[o + 1] += f * pal[c]), (acc[o + 2] += f * pal[c + 1]), (acc[o + 3] += f * pal[c + 2]);\n        }\n      }\n    }\n    // Dots in one LED add up, on a log scale against the busiest LED of the\n    // row: full at 40% of it, and one dot lights an LED to about a third in\n    // a crowded row and to half in a sparse one, so a lone dot in a far\n    // tail stays faint and the core of a streak stands out. The colour is\n    // the mix of the classes that landed there.\n    let top = 0;\n    for (let x = 0; x \u003c W; x++) top = max(top, acc[x * 4]);\n    const norm = 1 / log(1 + 2 * max(4, 0.4 * top));\n    for (let x = 0; x \u003c W; x++) {\n      const o = x * 4, a = acc[o], q = (y * W + x) * 3;\n      if (a \u003c= 0) {\n        rgb[q] = rgb[q + 1] = rgb[q + 2] = 0;\n        continue;\n      }\n      const lev = min(1, log(1 + 2 * a) * norm) / a;\n      rgb[q] = acc[o + 1] * lev;\n      rgb[q + 1] = acc[o + 2] * lev;\n      rgb[q + 2] = acc[o + 3] * lev;\n    }\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes."},{"name":"Correction","min":0,"max":1,"about":"Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel."},{"name":"Smear","min":0,"max":1,"about":"How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count."}],"start":[0,2,0,0.06],"measures":{"motion":1.5227,"detail":0.1448,"edges":0.6539,"complexity":1.6402,"coverage":0.5247,"colour":0.2628,"drift":0.0876},"knobResponse":[0.139,0.1117,0.2621,0.1127]},{"slug":"gosset-polytope","title":"Gosset Polytope","family":"geometry","round":28,"note":"E8 의 근 240개와 그 사이 모서리 6720개, 고셋의 4₂₁ 다면체를 8차원에서 두 창에 비춰요. 위 창은 30개씩 고리 여덟이 서는 콕서터 평면에서 열려 E7, E6, D5, D4, D6 의 평면을 지나 돌아오고, 아래 창은 몇 평면 앞서가요. 누르면 둘 다 콕서터 평면으로 돌아가요.","idea":"The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.","buttons":"K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.","code":"// ===== Patternflow pattern =====\n// Title:   Gosset Polytope\n// Family:  geometry\n// Idea:    The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gosset's 4₂₁ polytope (Thorold Gosset, 1900) and the E8 root system (Wilhelm Killing 1888, Élie Cartan 1894), in Peter McMullen's Petrie projection, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5\n//\n// Knob 1: Hue. Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan.\n// Knob 2: Speed. At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes.\n// Knob 3: Edges. How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white.\n// Knob 4: Plane. How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind.\n// Buttons: K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.\n\n// Each window is 64 LEDs square; the polytope fills a circle of radius 29.5\n// in it, so the outer ring of the Coxeter plane picture has 30 vertices about\n// six LEDs apart and the inner one 30 on a circle of radius six.\nconst W = 64, HV = 64, CX = 31.5, RAD = 29.5;\nconst { max, floor, ceil, round, sqrt, cos, sin, abs, exp, atan2, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst dot = (a, b) => a.reduce((s, x, i) => s + x * b[i], 0);\n\n// The roots: every (±1, ±1, 0, 0, 0, 0, 0, 0) in any order, 112 of them,\n// and every (±1/2)^8 with an even number of minus signs, 128 more.\nconst ROOTS = [];\nfor (let i = 0; i \u003c 8; i++)\n  for (let j = i + 1; j \u003c 8; j++)\n    for (let s = 0; s \u003c 4; s++) {\n      const v = new Array(8).fill(0);\n      v[i] = s & 1 ? -1 : 1;\n      v[j] = s & 2 ? -1 : 1;\n      ROOTS.push(v);\n    }\nfor (let m = 0; m \u003c 256; m++) {\n  let neg = 0;\n  for (let k = 0; k \u003c 8; k++) neg += (m >> k) & 1;\n  if (neg % 2 === 0) ROOTS.push([...Array(8)].map((_, k) => ((m >> k) & 1 ? -0.5 : 0.5)));\n}\nconst NV = ROOTS.length;\nconst RF = new Float64Array(NV * 8);\nROOTS.forEach((r, i) => r.forEach((x, k) => (RF[i * 8 + k] = x)));\n\n// Two roots are joined when they stand sqrt 2 apart, when their dot product\n// is 1: 56 edges at each vertex, 6720 in all.\nconst EDGE = [];\nfor (let i = 0; i \u003c NV; i++) for (let j = i + 1; j \u003c NV; j++) if (dot(ROOTS[i], ROOTS[j]) === 1) EDGE.push(i, j);\nconst NE = EDGE.length / 2;\nconst EI = Uint16Array.from(EDGE);\n\n// The simple roots of E8 (Bourbaki's numbering): a1 is the spinor root, a2\n// hangs off a4, and a1 a3 a4 a5 a6 a7 a8 is the long arm.\nconst e = (i, s = 1, j = -1, t = 0) => [...Array(8)].map((_, k) => (k === i ? s : k === j ? t : 0));\nconst SIMPLE = [[0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5], e(0, 1, 1, 1), e(1, 1, 0, -1), e(2, 1, 1, -1), e(3, 1, 2, -1), e(4, 1, 3, -1), e(5, 1, 4, -1), e(6, 1, 5, -1)];\n\n// The Coxeter plane of a simply laced root system from its simple roots\n// (Steinberg): colour the Dynkin diagram black and white, take the\n// Perron-Frobenius vector x of the diagram, and the plane is spanned by the\n// sum of x_i a_i over the black roots and the same sum over the white ones.\n// The product of all the reflections turns it by one h-th of a turn.\nfunction coxeterPlane(S) {\n  const k = S.length, adj = S.map((a) => S.map((b) => (dot(a, b) === -1 ? 1 : 0)));\n  const col = new Array(k).fill(-1), stack = [0];\n  col[0] = 0;\n  while (stack.length) {\n    const i = stack.pop();\n    for (let j = 0; j \u003c k; j++) if (adj[i][j] && col[j] \u003c 0) (col[j] = 1 - col[i]), stack.push(j);\n  }\n  let x = new Array(k).fill(1), lam = 0;\n  for (let it = 0; it \u003c 600; it++) {\n    const y = x.map((xi, i) => 2 * xi + adj[i].reduce((s, a, j) => s + a * x[j], 0));\n    lam = sqrt(dot(y, y)) - 2;\n    x = y.map((v) => v / (lam + 2));\n  }\n  const u = new Array(8).fill(0), w = new Array(8).fill(0);\n  S.forEach((a, i) => a.forEach((ai, d) => ((col[i] ? w : u)[d] += x[i] * ai)));\n  const nu = sqrt(dot(u, u));\n  for (let d = 0; d \u003c 8; d++) u[d] /= nu;\n  const pr = dot(w, u);\n  for (let d = 0; d \u003c 8; d++) w[d] -= pr * u[d];\n  const nw = sqrt(dot(w, w));\n  // The diagram's largest eigenvalue is 2 cos(pi / h), h the Coxeter number.\n  return [u, w.map((v) => v / nw), round(PI / Math.acos(lam / 2))];\n}\n\n// The round: E8 (30-fold), then down the chain E8 > E7 > E6 > D5 > D4 one\n// node of the diagram at a time (18, 12, 8 and 6-fold), up through D6\n// (10-fold) and back.\nconst STOPS = [SIMPLE, SIMPLE.slice(0, 7), SIMPLE.slice(0, 6), SIMPLE.slice(1, 6), SIMPLE.slice(1, 5), SIMPLE.slice(1, 7)].map(coxeterPlane);\nconst NS = STOPS.length;\n\n// Each swing is the shortest way from one plane to the next (a geodesic in\n// the Grassmannian): the two principal angles between the planes, turned\n// through together. The frame carries its own turn within the plane from\n// one swing to the next, so the windows never jump.\nfunction svd2(a, b, c, d) {\n  const E = (a + d) / 2, F = (a - d) / 2, G = (c + b) / 2, H = (c - b) / 2;\n  const Q = hypot(E, H), R = hypot(F, G), a1 = atan2(G, F), a2 = atan2(H, E);\n  // C = rot(phi) diag(Q + R, Q - R) rot(theta)\n  return { s1: Q + R, s2: Q - R, phi: (a2 + a1) / 2, th: (a2 - a1) / 2 };\n}\nconst comb = (p, q, cp, cq) => p.map((x, i) => cp * x + cq * q[i]);\n// Each stop is shown turned so a vertex of its outer polygon points straight\n// up; the turn is picked among the h equal ones to be the nearest to the\n// last, and the swing eases from one to the next.\nfunction upright(u, v, h, near) {\n  let best = 0, a = 0;\n  for (const r of ROOTS) {\n    const x = dot(r, u), y = dot(r, v), q = hypot(x, y);\n    if (q > best + 1e-9) (best = q), (a = atan2(y, x));\n  }\n  const t = -PI / 2 - a, step = (2 * PI) / h;\n  return t + round((near - t) / step) * step;\n}\nconst SEG = [];\nlet F = STOPS[0], turn = upright(F[0], F[1], 30, 0);\nfor (let k = 0; k \u003c NS; k++) {\n  let [v1, v2, h] = STOPS[(k + 1) % NS];\n  const [f1, f2] = F;\n  if (dot(f1, v1) * dot(f2, v2) - dot(f1, v2) * dot(f2, v1) \u003c 0) v2 = v2.map((x) => -x);\n  const { s1, s2, phi, th } = svd2(dot(f1, v1), dot(f1, v2), dot(f2, v1), dot(f2, v2));\n  const ca = cos(phi), sa = sin(phi), cb = cos(-th), sb = sin(-th);\n  // Principal vectors: P = F rot(phi), Q = V rot(theta)^T.\n  const p = [comb(f1, f2, ca, sa), comb(f1, f2, -sa, ca)];\n  const q = [comb(v1, v2, cb, sb), comb(v1, v2, -sb, cb)];\n  const ang = [], n = [];\n  [s1, s2].forEach((s, i) => {\n    const t = comb(q[i], p[i], 1, -cl(s, -1, 1)), nt = sqrt(dot(t, t));\n    ang.push(Math.acos(cl(s, -1, 1)));\n    n.push(nt > 1e-9 ? t.map((x) => x / nt) : new Array(8).fill(0));\n  });\n  F = [comb(q[0], q[1], cos(phi), -sin(phi)), comb(q[0], q[1], sin(phi), cos(phi))];\n  // Back on the Coxeter plane the frame may come round mirrored; the\n  // picture there is symmetric under the mirror, so turning a vertex up\n  // closes the loop all the same.\n  const next = upright(F[0], F[1], h, turn);\n  SEG.push({ p, n, ang, phi, t0: turn, t1: next });\n  turn = next;\n}\n\n// Where the frame stands at phase s (in stops): hold 5/12 of each stop, then\n// swing to the next with a smooth start and end. Returns the turn.\nconst HOLD = 5 / 12;\nfunction frameAt(s, out) {\n  const n = ((s % NS) + NS) % NS, k = floor(n), f = n - k, G = SEG[k];\n  let m = cl((f - HOLD) / (1 - HOLD), 0, 1);\n  m = m * m * m * (m * (m * 6 - 15) + 10);\n  const c1 = cos(m * G.ang[0]), s1 = sin(m * G.ang[0]), c2 = cos(m * G.ang[1]), s2 = sin(m * G.ang[1]);\n  const cp = cos(G.phi), sp = sin(G.phi);\n  for (let d = 0; d \u003c 8; d++) {\n    const g1 = c1 * G.p[0][d] + s1 * G.n[0][d], g2 = c2 * G.p[1][d] + s2 * G.n[1][d];\n    out[d] = g1 * cp - g2 * sp;\n    out[8 + d] = g1 * sp + g2 * cp;\n  }\n  return G.t0 + (G.t1 - G.t0) * m;\n}\n\n// Eight rings of 30 on the Coxeter plane; each vertex keeps the colour of\n// its ring wherever the swings carry it.\nconst RING = new Uint8Array(NV);\n{\n  const [u, v] = STOPS[0], rr = ROOTS.map((r) => hypot(dot(r, u), dot(r, v)));\n  const sorted = [...rr].sort((a, b) => a - b), levels = sorted.filter((x, i) => i === 0 || x - sorted[i - 1] > 1e-3);\n  rr.forEach((x, i) => (RING[i] = levels.filter((l) => l \u003c x + 1e-3).length - 1));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = {\n    ph: 0, lead: 1, hue: -1, ew: 1, snap: null,\n    buf: new Float32Array(W * HV * 2 * 3), fr: new Float64Array(16),\n    px: new Float32Array(NV), py: new Float32Array(NV),\n    vc: new Float32Array(NV * 3), ec: new Float32Array(NE * 3), rc: new Float32Array(8 * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.lead = cl(k[3], 1, 5);\n  P.ew = cl(k[2], -1, 1);\n  const hue = k[0] || 0;\n  if (hue !== P.hue) {\n    P.hue = hue;\n    for (let r = 0; r \u003c 8; r++) hsv(0.15 + hue - r * 0.095, 0.95 - 0.02 * r, 1, P.rc, r * 3);\n    for (let i = 0; i \u003c NV; i++) for (let c = 0; c \u003c 3; c++) P.vc[i * 3 + c] = P.rc[RING[i] * 3 + c];\n    for (let j = 0; j \u003c NE; j++) for (let c = 0; c \u003c 3; c++) P.ec[j * 3 + c] = (P.vc[EI[2 * j] * 3 + c] + P.vc[EI[2 * j + 1] * 3 + c]) / 2;\n  }\n  if (P.snap) {\n    P.snap.t += d;\n    const u = cl(P.snap.t / P.snap.T, 0, 1), m = u * u * (3 - 2 * u);\n    P.ph = P.snap.a + (P.snap.b - P.snap.a) * m;\n    if (u >= 1) P.snap = null;\n  } else {\n    P.ph = (P.ph + (d * sp) / 12) % NS;\n    // K1: run back or on to the nearer Coxeter plane, 0.4 s a stop.\n    if (input.btnPressed && input.btnPressed[0]) {\n      const b = round(P.ph / NS) * NS;\n      P.snap = { a: P.ph, b, t: 0, T: max(0.8, abs(b - P.ph) * 0.4) };\n    }\n  }\n}\n\n// One window: project the 240 roots onto the plane, draw the 6720 edges as\n// additive light, then the vertices on top.\nfunction view(P, ph, y0) {\n  const fr = P.fr, buf = P.buf, px = P.px, py = P.py;\n  const a = frameAt(ph, fr), ca = cos(a), sa = sin(a);\n  let rmax = 0;\n  for (let i = 0; i \u003c NV; i++) {\n    let x = 0, y = 0;\n    for (let d = 0, o = i * 8; d \u003c 8; d++) (x += RF[o + d] * fr[d]), (y += RF[o + d] * fr[8 + d]);\n    px[i] = ca * x - sa * y;\n    py[i] = sa * x + ca * y;\n    rmax = max(rmax, px[i] * px[i] + py[i] * py[i]);\n  }\n  const sc = RAD / sqrt(rmax), cy = y0 + 31.5;\n  for (let i = 0; i \u003c NV; i++) (px[i] = CX + px[i] * sc - 0.5), (py[i] = cy + py[i] * sc - 0.5);\n  const ew = P.ew \u003c= -1 ? 0 : 0.012 * (P.ew + 1) * (P.ew + 1), ec = P.ec, W3 = W * 3;\n  // RAD keeps every point a pixel inside the window, so no line needs clipping.\n  if (ew > 0)\n    for (let j = 0; j \u003c NE; j++) {\n      const i0 = EI[2 * j], i1 = EI[2 * j + 1];\n      let x = px[i0], y = py[i0];\n      const dx = px[i1] - x, dy = py[i1] - y, adx = dx \u003c 0 ? -dx : dx, ady = dy \u003c 0 ? -dy : dy;\n      const n = ceil(adx > ady ? adx : ady) || 1, w = (ew * sqrt(dx * dx + dy * dy)) / n;\n      const r = ec[j * 3] * w, g = ec[j * 3 + 1] * w, b = ec[j * 3 + 2] * w, sx = dx / n, sy = dy / n;\n      for (let s = 0; s \u003c= n; s++, x += sx, y += sy) {\n        const xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n        const w11 = fx * fy, w10 = fx - w11, w01 = fy - w11, w00 = 1 - fx - w01;\n        buf[q] += r * w00;\n        buf[q + 1] += g * w00;\n        buf[q + 2] += b * w00;\n        buf[q + 3] += r * w10;\n        buf[q + 4] += g * w10;\n        buf[q + 5] += b * w10;\n        buf[q + W3] += r * w01;\n        buf[q + W3 + 1] += g * w01;\n        buf[q + W3 + 2] += b * w01;\n        buf[q + W3 + 3] += r * w11;\n        buf[q + W3 + 4] += g * w11;\n        buf[q + W3 + 5] += b * w11;\n      }\n    }\n  // With the web turned off the vertices burn brighter.\n  const vc = P.vc, vw = 0.6 + 0.5 * max(0, -P.ew);\n  for (let i = 0; i \u003c NV; i++) {\n    const x = px[i], y = py[i], xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n    const w11 = fx * fy * vw, w10 = fx * vw - w11, w01 = fy * vw - w11, w00 = vw - fx * vw - w01;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = vc[i * 3 + c];\n      buf[q + c] += v * w00;\n      buf[q + 3 + c] += v * w10;\n      buf[q + W3 + c] += v * w01;\n      buf[q + W3 + 3 + c] += v * w11;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf;\n  buf.fill(0);\n  view(P, P.ph, 0);\n  view(P, P.ph + P.lead, HV);\n  for (let p = 0, y = 0; y \u003c 2 * HV; y++)\n    for (let x = 0; x \u003c W; x++, p += 3)\n      display.setPixel(x, y, 255 * (1 - exp(-1.6 * buf[p])), 255 * (1 - exp(-1.6 * buf[p + 1])), 255 * (1 - exp(-1.6 * buf[p + 2])));\n}\n","layer":{"id":"layer-gosset-polytope","type":"code","name":"gosset-polytope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gosset Polytope\n// Family:  geometry\n// Idea:    The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gosset's 4₂₁ polytope (Thorold Gosset, 1900) and the E8 root system (Wilhelm Killing 1888, Élie Cartan 1894), in Peter McMullen's Petrie projection, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5\n//\n// Knob 1: Hue. Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan.\n// Knob 2: Speed. At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes.\n// Knob 3: Edges. How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white.\n// Knob 4: Plane. How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind.\n// Buttons: K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.\n\n// Each window is 64 LEDs square; the polytope fills a circle of radius 29.5\n// in it, so the outer ring of the Coxeter plane picture has 30 vertices about\n// six LEDs apart and the inner one 30 on a circle of radius six.\nconst W = 64, HV = 64, CX = 31.5, RAD = 29.5;\nconst { max, floor, ceil, round, sqrt, cos, sin, abs, exp, atan2, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst dot = (a, b) => a.reduce((s, x, i) => s + x * b[i], 0);\n\n// The roots: every (±1, ±1, 0, 0, 0, 0, 0, 0) in any order, 112 of them,\n// and every (±1/2)^8 with an even number of minus signs, 128 more.\nconst ROOTS = [];\nfor (let i = 0; i \u003c 8; i++)\n  for (let j = i + 1; j \u003c 8; j++)\n    for (let s = 0; s \u003c 4; s++) {\n      const v = new Array(8).fill(0);\n      v[i] = s & 1 ? -1 : 1;\n      v[j] = s & 2 ? -1 : 1;\n      ROOTS.push(v);\n    }\nfor (let m = 0; m \u003c 256; m++) {\n  let neg = 0;\n  for (let k = 0; k \u003c 8; k++) neg += (m >> k) & 1;\n  if (neg % 2 === 0) ROOTS.push([...Array(8)].map((_, k) => ((m >> k) & 1 ? -0.5 : 0.5)));\n}\nconst NV = ROOTS.length;\nconst RF = new Float64Array(NV * 8);\nROOTS.forEach((r, i) => r.forEach((x, k) => (RF[i * 8 + k] = x)));\n\n// Two roots are joined when they stand sqrt 2 apart, when their dot product\n// is 1: 56 edges at each vertex, 6720 in all.\nconst EDGE = [];\nfor (let i = 0; i \u003c NV; i++) for (let j = i + 1; j \u003c NV; j++) if (dot(ROOTS[i], ROOTS[j]) === 1) EDGE.push(i, j);\nconst NE = EDGE.length / 2;\nconst EI = Uint16Array.from(EDGE);\n\n// The simple roots of E8 (Bourbaki's numbering): a1 is the spinor root, a2\n// hangs off a4, and a1 a3 a4 a5 a6 a7 a8 is the long arm.\nconst e = (i, s = 1, j = -1, t = 0) => [...Array(8)].map((_, k) => (k === i ? s : k === j ? t : 0));\nconst SIMPLE = [[0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5], e(0, 1, 1, 1), e(1, 1, 0, -1), e(2, 1, 1, -1), e(3, 1, 2, -1), e(4, 1, 3, -1), e(5, 1, 4, -1), e(6, 1, 5, -1)];\n\n// The Coxeter plane of a simply laced root system from its simple roots\n// (Steinberg): colour the Dynkin diagram black and white, take the\n// Perron-Frobenius vector x of the diagram, and the plane is spanned by the\n// sum of x_i a_i over the black roots and the same sum over the white ones.\n// The product of all the reflections turns it by one h-th of a turn.\nfunction coxeterPlane(S) {\n  const k = S.length, adj = S.map((a) => S.map((b) => (dot(a, b) === -1 ? 1 : 0)));\n  const col = new Array(k).fill(-1), stack = [0];\n  col[0] = 0;\n  while (stack.length) {\n    const i = stack.pop();\n    for (let j = 0; j \u003c k; j++) if (adj[i][j] && col[j] \u003c 0) (col[j] = 1 - col[i]), stack.push(j);\n  }\n  let x = new Array(k).fill(1), lam = 0;\n  for (let it = 0; it \u003c 600; it++) {\n    const y = x.map((xi, i) => 2 * xi + adj[i].reduce((s, a, j) => s + a * x[j], 0));\n    lam = sqrt(dot(y, y)) - 2;\n    x = y.map((v) => v / (lam + 2));\n  }\n  const u = new Array(8).fill(0), w = new Array(8).fill(0);\n  S.forEach((a, i) => a.forEach((ai, d) => ((col[i] ? w : u)[d] += x[i] * ai)));\n  const nu = sqrt(dot(u, u));\n  for (let d = 0; d \u003c 8; d++) u[d] /= nu;\n  const pr = dot(w, u);\n  for (let d = 0; d \u003c 8; d++) w[d] -= pr * u[d];\n  const nw = sqrt(dot(w, w));\n  // The diagram's largest eigenvalue is 2 cos(pi / h), h the Coxeter number.\n  return [u, w.map((v) => v / nw), round(PI / Math.acos(lam / 2))];\n}\n\n// The round: E8 (30-fold), then down the chain E8 > E7 > E6 > D5 > D4 one\n// node of the diagram at a time (18, 12, 8 and 6-fold), up through D6\n// (10-fold) and back.\nconst STOPS = [SIMPLE, SIMPLE.slice(0, 7), SIMPLE.slice(0, 6), SIMPLE.slice(1, 6), SIMPLE.slice(1, 5), SIMPLE.slice(1, 7)].map(coxeterPlane);\nconst NS = STOPS.length;\n\n// Each swing is the shortest way from one plane to the next (a geodesic in\n// the Grassmannian): the two principal angles between the planes, turned\n// through together. The frame carries its own turn within the plane from\n// one swing to the next, so the windows never jump.\nfunction svd2(a, b, c, d) {\n  const E = (a + d) / 2, F = (a - d) / 2, G = (c + b) / 2, H = (c - b) / 2;\n  const Q = hypot(E, H), R = hypot(F, G), a1 = atan2(G, F), a2 = atan2(H, E);\n  // C = rot(phi) diag(Q + R, Q - R) rot(theta)\n  return { s1: Q + R, s2: Q - R, phi: (a2 + a1) / 2, th: (a2 - a1) / 2 };\n}\nconst comb = (p, q, cp, cq) => p.map((x, i) => cp * x + cq * q[i]);\n// Each stop is shown turned so a vertex of its outer polygon points straight\n// up; the turn is picked among the h equal ones to be the nearest to the\n// last, and the swing eases from one to the next.\nfunction upright(u, v, h, near) {\n  let best = 0, a = 0;\n  for (const r of ROOTS) {\n    const x = dot(r, u), y = dot(r, v), q = hypot(x, y);\n    if (q > best + 1e-9) (best = q), (a = atan2(y, x));\n  }\n  const t = -PI / 2 - a, step = (2 * PI) / h;\n  return t + round((near - t) / step) * step;\n}\nconst SEG = [];\nlet F = STOPS[0], turn = upright(F[0], F[1], 30, 0);\nfor (let k = 0; k \u003c NS; k++) {\n  let [v1, v2, h] = STOPS[(k + 1) % NS];\n  const [f1, f2] = F;\n  if (dot(f1, v1) * dot(f2, v2) - dot(f1, v2) * dot(f2, v1) \u003c 0) v2 = v2.map((x) => -x);\n  const { s1, s2, phi, th } = svd2(dot(f1, v1), dot(f1, v2), dot(f2, v1), dot(f2, v2));\n  const ca = cos(phi), sa = sin(phi), cb = cos(-th), sb = sin(-th);\n  // Principal vectors: P = F rot(phi), Q = V rot(theta)^T.\n  const p = [comb(f1, f2, ca, sa), comb(f1, f2, -sa, ca)];\n  const q = [comb(v1, v2, cb, sb), comb(v1, v2, -sb, cb)];\n  const ang = [], n = [];\n  [s1, s2].forEach((s, i) => {\n    const t = comb(q[i], p[i], 1, -cl(s, -1, 1)), nt = sqrt(dot(t, t));\n    ang.push(Math.acos(cl(s, -1, 1)));\n    n.push(nt > 1e-9 ? t.map((x) => x / nt) : new Array(8).fill(0));\n  });\n  F = [comb(q[0], q[1], cos(phi), -sin(phi)), comb(q[0], q[1], sin(phi), cos(phi))];\n  // Back on the Coxeter plane the frame may come round mirrored; the\n  // picture there is symmetric under the mirror, so turning a vertex up\n  // closes the loop all the same.\n  const next = upright(F[0], F[1], h, turn);\n  SEG.push({ p, n, ang, phi, t0: turn, t1: next });\n  turn = next;\n}\n\n// Where the frame stands at phase s (in stops): hold 5/12 of each stop, then\n// swing to the next with a smooth start and end. Returns the turn.\nconst HOLD = 5 / 12;\nfunction frameAt(s, out) {\n  const n = ((s % NS) + NS) % NS, k = floor(n), f = n - k, G = SEG[k];\n  let m = cl((f - HOLD) / (1 - HOLD), 0, 1);\n  m = m * m * m * (m * (m * 6 - 15) + 10);\n  const c1 = cos(m * G.ang[0]), s1 = sin(m * G.ang[0]), c2 = cos(m * G.ang[1]), s2 = sin(m * G.ang[1]);\n  const cp = cos(G.phi), sp = sin(G.phi);\n  for (let d = 0; d \u003c 8; d++) {\n    const g1 = c1 * G.p[0][d] + s1 * G.n[0][d], g2 = c2 * G.p[1][d] + s2 * G.n[1][d];\n    out[d] = g1 * cp - g2 * sp;\n    out[8 + d] = g1 * sp + g2 * cp;\n  }\n  return G.t0 + (G.t1 - G.t0) * m;\n}\n\n// Eight rings of 30 on the Coxeter plane; each vertex keeps the colour of\n// its ring wherever the swings carry it.\nconst RING = new Uint8Array(NV);\n{\n  const [u, v] = STOPS[0], rr = ROOTS.map((r) => hypot(dot(r, u), dot(r, v)));\n  const sorted = [...rr].sort((a, b) => a - b), levels = sorted.filter((x, i) => i === 0 || x - sorted[i - 1] > 1e-3);\n  rr.forEach((x, i) => (RING[i] = levels.filter((l) => l \u003c x + 1e-3).length - 1));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = {\n    ph: 0, lead: 1, hue: -1, ew: 1, snap: null,\n    buf: new Float32Array(W * HV * 2 * 3), fr: new Float64Array(16),\n    px: new Float32Array(NV), py: new Float32Array(NV),\n    vc: new Float32Array(NV * 3), ec: new Float32Array(NE * 3), rc: new Float32Array(8 * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.lead = cl(k[3], 1, 5);\n  P.ew = cl(k[2], -1, 1);\n  const hue = k[0] || 0;\n  if (hue !== P.hue) {\n    P.hue = hue;\n    for (let r = 0; r \u003c 8; r++) hsv(0.15 + hue - r * 0.095, 0.95 - 0.02 * r, 1, P.rc, r * 3);\n    for (let i = 0; i \u003c NV; i++) for (let c = 0; c \u003c 3; c++) P.vc[i * 3 + c] = P.rc[RING[i] * 3 + c];\n    for (let j = 0; j \u003c NE; j++) for (let c = 0; c \u003c 3; c++) P.ec[j * 3 + c] = (P.vc[EI[2 * j] * 3 + c] + P.vc[EI[2 * j + 1] * 3 + c]) / 2;\n  }\n  if (P.snap) {\n    P.snap.t += d;\n    const u = cl(P.snap.t / P.snap.T, 0, 1), m = u * u * (3 - 2 * u);\n    P.ph = P.snap.a + (P.snap.b - P.snap.a) * m;\n    if (u >= 1) P.snap = null;\n  } else {\n    P.ph = (P.ph + (d * sp) / 12) % NS;\n    // K1: run back or on to the nearer Coxeter plane, 0.4 s a stop.\n    if (input.btnPressed && input.btnPressed[0]) {\n      const b = round(P.ph / NS) * NS;\n      P.snap = { a: P.ph, b, t: 0, T: max(0.8, abs(b - P.ph) * 0.4) };\n    }\n  }\n}\n\n// One window: project the 240 roots onto the plane, draw the 6720 edges as\n// additive light, then the vertices on top.\nfunction view(P, ph, y0) {\n  const fr = P.fr, buf = P.buf, px = P.px, py = P.py;\n  const a = frameAt(ph, fr), ca = cos(a), sa = sin(a);\n  let rmax = 0;\n  for (let i = 0; i \u003c NV; i++) {\n    let x = 0, y = 0;\n    for (let d = 0, o = i * 8; d \u003c 8; d++) (x += RF[o + d] * fr[d]), (y += RF[o + d] * fr[8 + d]);\n    px[i] = ca * x - sa * y;\n    py[i] = sa * x + ca * y;\n    rmax = max(rmax, px[i] * px[i] + py[i] * py[i]);\n  }\n  const sc = RAD / sqrt(rmax), cy = y0 + 31.5;\n  for (let i = 0; i \u003c NV; i++) (px[i] = CX + px[i] * sc - 0.5), (py[i] = cy + py[i] * sc - 0.5);\n  const ew = P.ew \u003c= -1 ? 0 : 0.012 * (P.ew + 1) * (P.ew + 1), ec = P.ec, W3 = W * 3;\n  // RAD keeps every point a pixel inside the window, so no line needs clipping.\n  if (ew > 0)\n    for (let j = 0; j \u003c NE; j++) {\n      const i0 = EI[2 * j], i1 = EI[2 * j + 1];\n      let x = px[i0], y = py[i0];\n      const dx = px[i1] - x, dy = py[i1] - y, adx = dx \u003c 0 ? -dx : dx, ady = dy \u003c 0 ? -dy : dy;\n      const n = ceil(adx > ady ? adx : ady) || 1, w = (ew * sqrt(dx * dx + dy * dy)) / n;\n      const r = ec[j * 3] * w, g = ec[j * 3 + 1] * w, b = ec[j * 3 + 2] * w, sx = dx / n, sy = dy / n;\n      for (let s = 0; s \u003c= n; s++, x += sx, y += sy) {\n        const xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n        const w11 = fx * fy, w10 = fx - w11, w01 = fy - w11, w00 = 1 - fx - w01;\n        buf[q] += r * w00;\n        buf[q + 1] += g * w00;\n        buf[q + 2] += b * w00;\n        buf[q + 3] += r * w10;\n        buf[q + 4] += g * w10;\n        buf[q + 5] += b * w10;\n        buf[q + W3] += r * w01;\n        buf[q + W3 + 1] += g * w01;\n        buf[q + W3 + 2] += b * w01;\n        buf[q + W3 + 3] += r * w11;\n        buf[q + W3 + 4] += g * w11;\n        buf[q + W3 + 5] += b * w11;\n      }\n    }\n  // With the web turned off the vertices burn brighter.\n  const vc = P.vc, vw = 0.6 + 0.5 * max(0, -P.ew);\n  for (let i = 0; i \u003c NV; i++) {\n    const x = px[i], y = py[i], xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n    const w11 = fx * fy * vw, w10 = fx * vw - w11, w01 = fy * vw - w11, w00 = vw - fx * vw - w01;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = vc[i * 3 + c];\n      buf[q + c] += v * w00;\n      buf[q + 3 + c] += v * w10;\n      buf[q + W3 + c] += v * w01;\n      buf[q + W3 + 3 + c] += v * w11;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf;\n  buf.fill(0);\n  view(P, P.ph, 0);\n  view(P, P.ph + P.lead, HV);\n  for (let p = 0, y = 0; y \u003c 2 * HV; y++)\n    for (let x = 0; x \u003c W; x++, p += 3)\n      display.setPixel(x, y, 255 * (1 - exp(-1.6 * buf[p])), 255 * (1 - exp(-1.6 * buf[p + 1])), 255 * (1 - exp(-1.6 * buf[p + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes."},{"name":"Edges","min":-1,"max":1,"about":"How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white."},{"name":"Plane","min":1,"max":5,"about":"How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind."}],"start":[0,2,0,1],"measures":{"motion":0.1027,"detail":0.0626,"edges":0.2381,"complexity":1.7381,"coverage":0.5762,"colour":0.1523,"drift":0.0443},"knobResponse":[0.101,0.0579,0.4228,0.087]},{"slug":"guilloche","title":"Guilloché","family":"line","round":16,"note":"장미 기관으로 깎은 은판의 보리알 띠와 물결 띠가 패널 높이의 타원으로 서고, 등불이 돌면 그 쪽을 향한 홈만 금빛으로 번쩍여요. K1 을 누르면 칼끝이 귀퉁이에서 가운데로 들어오며 판을 새 무늬로 다시 깎아요.","idea":"An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.","buttons":"K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.","code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","layer":{"id":"layer-guilloche","type":"code","name":"guilloche","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"Silver at 0, then champagne, yellow gold and rose gold at the far end."},{"name":"Light","min":0,"max":4,"about":"How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift."},{"name":"Lobes","min":12,"max":36,"about":"Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer."},{"name":"Phasing","min":0,"max":0.5,"about":"How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn."}],"start":[0,2,12,0.06],"measures":{"motion":0.3271,"detail":0.2382,"edges":0.6848,"complexity":2.494,"coverage":1,"colour":0.0828,"drift":0.1447},"knobResponse":[0.1324,0.1841,0.2378,0.2082]},{"slug":"hair-gloss","title":"Hair Gloss","family":"cosmetic","round":34,"note":"판 전체에 윤기 나는 긴 머리카락 230가닥이 위에서 끝까지 늘어져 산들바람에 흔들려요. 가닥이 빛과 눈의 반벡터에 직각인 줄에 흰 광택 띠가 서고 그 아래로 머리색의 둘째 띠가 따라와 머리가 흔들릴 때마다 오르내리며, 9초마다 보이지 않는 빗이 내려가 빗살 자리를 가르고 지나간 자리를 더 매끄럽고 반짝이게 해요.","idea":"Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.","buttons":"K1 tap sends the comb through now.","code":"// ===== Patternflow pattern =====\n// Title:   Hair Gloss\n// Family:  cosmetic\n// Idea:    Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the shine band of glossy hair in haircare displays; the highlights are a fibre highlight (James Kajiya and Timothy Kay, 1989), the white one shifted toward the root and a tinted one toward the tip (Stephen Marschner and others, 2003)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1\n//\n// Knob 1: Hue. The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue.\n// Knob 2: Speed. At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Wave. At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1.\n// Knob 4: Shine. How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it.\n// Buttons: K1 tap sends the comb through now.\n\nconst W = 64, H = 128, N = 230, Y0 = -2, ROWS = 160;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The sheet of hair leans toward the eye by tz per row. The primary highlight\n// sits where a strand's tangent is square to the half vector, tz about 0.3.\nconst TZ0 = -HY / HZ;\n\n// A smooth wobble along one strand: three sines at random pitch.\nfunction wobble(out, o) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c ROWS; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, wave: 0, shine: 0, begun: false, t: 0,\n    comb: -10, combing: false, combWait: 1.2, teeth: 0,\n    X0: new Float32Array(N), B: new Float32Array(N), SL: new Float32Array(N), D: new Float32Array(N), END: new Float32Array(N), TO: new Float32Array(N),\n    NX: new Float32Array(N * ROWS), NT: new Float32Array(N * ROWS),\n    fz: new Float32Array(ROWS).fill(1), part: new Float32Array(ROWS),\n    sx: new Float32Array(ROWS), tz: new Float32Array(ROWS), ws: new Float32Array(ROWS), wc: new Float32Array(ROWS),\n    acc: new Float32Array(W * H * 3), wt: new Float32Array(W * H), c: [0, 0, 0], body: [0, 0, 0], tint: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let i = 0; i \u003c N; i++) {\n    S.X0[i] = -7 + (78 * (i + random())) / N;\n    S.B[i] = 0.28 + 0.72 * random() ** 0.6;\n    S.TO[i] = (random() - 0.5) * 0.12;\n    S.SL[i] = (random() - 0.5) * 0.025;\n    S.D[i] = (random() - 0.5) * 0.6;\n    S.END[i] = 112 + 40 * random();\n    wobble(S.NX, i * ROWS);\n    wobble(S.NT, i * ROWS);\n  }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.t += ds;\n  // The comb: every 9 s at Speed 2 it runs down from above the panel to past\n  // the ends in 2.4 s. Hair it has passed lies smooth and loosens again over\n  // about 6 s; the partings behind its teeth close over about 1.2 s.\n  const was = S.comb;\n  if (!S.combing) {\n    S.combWait -= ds;\n    if (S.combWait \u003c= 0) startComb(S);\n  } else {\n    S.comb += (ds * 170) / 2.4;\n    if (S.comb > 160) {\n      S.combing = false;\n      S.combWait = 6.6;\n    }\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0;\n    S.fz[r] += (1 - S.fz[r]) * (1 - exp(-ds / 6));\n    S.part[r] *= exp(-ds / 1.2);\n    // The teeth bite over the 8 rows behind the comb's edge.\n    if (S.combing && y \u003c S.comb) {\n      const a = sm(0, 8, S.comb - y);\n      S.fz[r] = min(S.fz[r], 1 - 0.55 * a);\n      S.part[r] = max(S.part[r], a * (y >= was - 9 ? 1 : 0));\n    }\n  }\n}\n\nfunction startComb(S) {\n  S.combing = true;\n  S.comb = -10;\n  S.teeth = random() * 7;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wave = cl(k[2], 0, 1);\n  S.shine = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open with the band a third of the way down and rising.\n    S.t = 1.5;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.combing) startComb(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { acc, wt, sx, tz, ws, wc, fz, part, NX, NT, X0, B, SL, D, END, c, body, tint } = S;\n  acc.fill(0);\n  wt.fill(0);\n  const t = S.t, wv = S.wave;\n  // Per row: the breeze, a wave running down the hair that grows toward the\n  // ends; the lean of the sheet, which puts the shine band where tz meets\n  // TZ0 and slides it up and down as the hair sways; and the waves of wavy\n  // hair, sideways and in depth a quarter turn apart.\n  const yb = 46 + 13 * sin(2 * PI * (t / 6.5)) + 4 * sin(2 * PI * (t / 2.9) + 1);\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0, reach = ((y + 30) / 160) ** 1.6;\n    sx[r] = 3.2 * reach * sin(2 * PI * (y / 120 - t / 4.6)) + 1.1 * reach * sin(2 * PI * (y / 45 - t / 2.3) + 2);\n    const a = (2 * PI * y) / 44;\n    tz[r] = TZ0 + 0.016 * (1 - 0.6 * wv) * (yb - y) + 0.3 * wv * sin(a + 0.6 * sin(2 * PI * (t / 7.3)));\n    ws[r] = 3 * wv * cos(a);\n    wc[r] = 3 * wv * -sin(a);\n  }\n  const sh = S.shine, p1 = 0.5 * 320 * 4 ** sh, k1 = 0.9 + 0.4 * sh, p2 = 0.4 * p1, k2 = 0.45 + 0.15 * sh, k0 = 0.24 * (1 - sh);\n  const teeth = S.teeth;\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * ROWS, cd = cos(D[i]), sd = sin(D[i]), end = END[i], b = B[i], to = S.TO[i], x0 = X0[i], sl = SL[i];\n    let px = 0;\n    const last = min(H - 1, floor(end));\n    for (let r = 0; r \u003c= last - Y0; r++) {\n      const y = r + Y0, f = fz[r];\n      let x = x0 + sl * y + sx[r] + ws[r] * cd + wc[r] * sd + 0.4 * f * NX[o + r];\n      // Behind the comb the strands part round its teeth, 7 LEDs apart: each\n      // gap of 7 closes to 5.7, leaving a dark parting 1.3 LEDs wide.\n      const m = part[r];\n      if (m > 0.01) {\n        const u = (x - teeth) / 7, e = u - floor(u) - 0.5;\n        x -= m * 1.3 * e;\n      }\n      const tx = x - px;\n      px = x;\n      if (y \u003c 0) continue;\n      const z = tz[r] + to * f + 0.06 * f * NT[o + r];\n      const inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv;\n      // The primary highlight is shifted toward the root, the secondary,\n      // tinted by the hair, toward the tip.\n      const t1 = th - 0.05, t2 = th + 0.11;\n      const smooth = 1 + 0.45 * (1 - f);\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      // A sharp band and, wider and weaker, the sheen round it that a duller\n      // finish spreads out.\n      const s1 = smooth * (k1 * exp(p1 * l1) + k0 * exp(5 * l1)), s2 = smooth * k2 * exp(p2 * log(max(1e-6, 1 - t2 * t2)));\n      const lam = (0.55 * z + 0.82) / sqrt(1 + z * z), dif = b * (0.3 + 0.7 * max(0, lam));\n      const tip = cl((end - y) / 7, 0, 1), w0 = tip * (0.4 + 0.6 * tip);\n      const xi = floor(x), fr = x - xi, q = y * W + xi;\n      if (xi >= 0 && xi \u003c W) {\n        const w = (1 - fr) * w0;\n        acc[q * 3] += dif * w;\n        acc[q * 3 + 1] += s2 * b * w;\n        acc[q * 3 + 2] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q] += w;\n      }\n      if (xi + 1 >= 0 && xi + 1 \u003c W) {\n        const w = fr * w0;\n        acc[q * 3 + 3] += dif * w;\n        acc[q * 3 + 4] += s2 * b * w;\n        acc[q * 3 + 5] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q + 1] += w;\n      }\n    }\n  }\n  // Each LED: the mean of the strands over it, darker where they are fewer\n  // than 2.4. Channel 0 holds the body, 1 the tinted secondary, 2 the white\n  // primary.\n  // Orange and yellow read brown and olive at mid level on the panel, so\n  // round hue 0.12 the hair is lifted toward copper and honey blonde.\n  const h = S.hue + 0.76, hh = h - floor(h), warm = max(0, 1 - Math.abs(hh - 0.12) / 0.11);\n  hsv(h, 0.78 - 0.18 * warm, 1 + 0.6 * warm, body);\n  hsv(h, 0.8 - 0.2 * warm, 1, tint);\n  const RHO = (N / 78) * 0.8;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO);\n      const dv = acc[q * 3] / n, s2 = acc[q * 3 + 1] / n, s1 = acc[q * 3 + 2] / n;\n      for (let ch = 0; ch \u003c 3; ch++) c[ch] = 0.52 * dv * body[ch] + 0.9 * s2 * tint[ch] + s1 * (0.8 + 0.2 * tint[ch]);\n      display.setPixel(x, y, round(255 * (1 - exp(-1.4 * c[0]))), round(255 * (1 - exp(-1.4 * c[1]))), round(255 * (1 - exp(-1.4 * c[2]))));\n    }\n}\n","layer":{"id":"layer-hair-gloss","type":"code","name":"hair-gloss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hair Gloss\n// Family:  cosmetic\n// Idea:    Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the shine band of glossy hair in haircare displays; the highlights are a fibre highlight (James Kajiya and Timothy Kay, 1989), the white one shifted toward the root and a tinted one toward the tip (Stephen Marschner and others, 2003)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1\n//\n// Knob 1: Hue. The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue.\n// Knob 2: Speed. At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Wave. At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1.\n// Knob 4: Shine. How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it.\n// Buttons: K1 tap sends the comb through now.\n\nconst W = 64, H = 128, N = 230, Y0 = -2, ROWS = 160;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The sheet of hair leans toward the eye by tz per row. The primary highlight\n// sits where a strand's tangent is square to the half vector, tz about 0.3.\nconst TZ0 = -HY / HZ;\n\n// A smooth wobble along one strand: three sines at random pitch.\nfunction wobble(out, o) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c ROWS; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, wave: 0, shine: 0, begun: false, t: 0,\n    comb: -10, combing: false, combWait: 1.2, teeth: 0,\n    X0: new Float32Array(N), B: new Float32Array(N), SL: new Float32Array(N), D: new Float32Array(N), END: new Float32Array(N), TO: new Float32Array(N),\n    NX: new Float32Array(N * ROWS), NT: new Float32Array(N * ROWS),\n    fz: new Float32Array(ROWS).fill(1), part: new Float32Array(ROWS),\n    sx: new Float32Array(ROWS), tz: new Float32Array(ROWS), ws: new Float32Array(ROWS), wc: new Float32Array(ROWS),\n    acc: new Float32Array(W * H * 3), wt: new Float32Array(W * H), c: [0, 0, 0], body: [0, 0, 0], tint: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let i = 0; i \u003c N; i++) {\n    S.X0[i] = -7 + (78 * (i + random())) / N;\n    S.B[i] = 0.28 + 0.72 * random() ** 0.6;\n    S.TO[i] = (random() - 0.5) * 0.12;\n    S.SL[i] = (random() - 0.5) * 0.025;\n    S.D[i] = (random() - 0.5) * 0.6;\n    S.END[i] = 112 + 40 * random();\n    wobble(S.NX, i * ROWS);\n    wobble(S.NT, i * ROWS);\n  }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.t += ds;\n  // The comb: every 9 s at Speed 2 it runs down from above the panel to past\n  // the ends in 2.4 s. Hair it has passed lies smooth and loosens again over\n  // about 6 s; the partings behind its teeth close over about 1.2 s.\n  const was = S.comb;\n  if (!S.combing) {\n    S.combWait -= ds;\n    if (S.combWait \u003c= 0) startComb(S);\n  } else {\n    S.comb += (ds * 170) / 2.4;\n    if (S.comb > 160) {\n      S.combing = false;\n      S.combWait = 6.6;\n    }\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0;\n    S.fz[r] += (1 - S.fz[r]) * (1 - exp(-ds / 6));\n    S.part[r] *= exp(-ds / 1.2);\n    // The teeth bite over the 8 rows behind the comb's edge.\n    if (S.combing && y \u003c S.comb) {\n      const a = sm(0, 8, S.comb - y);\n      S.fz[r] = min(S.fz[r], 1 - 0.55 * a);\n      S.part[r] = max(S.part[r], a * (y >= was - 9 ? 1 : 0));\n    }\n  }\n}\n\nfunction startComb(S) {\n  S.combing = true;\n  S.comb = -10;\n  S.teeth = random() * 7;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wave = cl(k[2], 0, 1);\n  S.shine = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open with the band a third of the way down and rising.\n    S.t = 1.5;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.combing) startComb(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { acc, wt, sx, tz, ws, wc, fz, part, NX, NT, X0, B, SL, D, END, c, body, tint } = S;\n  acc.fill(0);\n  wt.fill(0);\n  const t = S.t, wv = S.wave;\n  // Per row: the breeze, a wave running down the hair that grows toward the\n  // ends; the lean of the sheet, which puts the shine band where tz meets\n  // TZ0 and slides it up and down as the hair sways; and the waves of wavy\n  // hair, sideways and in depth a quarter turn apart.\n  const yb = 46 + 13 * sin(2 * PI * (t / 6.5)) + 4 * sin(2 * PI * (t / 2.9) + 1);\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0, reach = ((y + 30) / 160) ** 1.6;\n    sx[r] = 3.2 * reach * sin(2 * PI * (y / 120 - t / 4.6)) + 1.1 * reach * sin(2 * PI * (y / 45 - t / 2.3) + 2);\n    const a = (2 * PI * y) / 44;\n    tz[r] = TZ0 + 0.016 * (1 - 0.6 * wv) * (yb - y) + 0.3 * wv * sin(a + 0.6 * sin(2 * PI * (t / 7.3)));\n    ws[r] = 3 * wv * cos(a);\n    wc[r] = 3 * wv * -sin(a);\n  }\n  const sh = S.shine, p1 = 0.5 * 320 * 4 ** sh, k1 = 0.9 + 0.4 * sh, p2 = 0.4 * p1, k2 = 0.45 + 0.15 * sh, k0 = 0.24 * (1 - sh);\n  const teeth = S.teeth;\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * ROWS, cd = cos(D[i]), sd = sin(D[i]), end = END[i], b = B[i], to = S.TO[i], x0 = X0[i], sl = SL[i];\n    let px = 0;\n    const last = min(H - 1, floor(end));\n    for (let r = 0; r \u003c= last - Y0; r++) {\n      const y = r + Y0, f = fz[r];\n      let x = x0 + sl * y + sx[r] + ws[r] * cd + wc[r] * sd + 0.4 * f * NX[o + r];\n      // Behind the comb the strands part round its teeth, 7 LEDs apart: each\n      // gap of 7 closes to 5.7, leaving a dark parting 1.3 LEDs wide.\n      const m = part[r];\n      if (m > 0.01) {\n        const u = (x - teeth) / 7, e = u - floor(u) - 0.5;\n        x -= m * 1.3 * e;\n      }\n      const tx = x - px;\n      px = x;\n      if (y \u003c 0) continue;\n      const z = tz[r] + to * f + 0.06 * f * NT[o + r];\n      const inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv;\n      // The primary highlight is shifted toward the root, the secondary,\n      // tinted by the hair, toward the tip.\n      const t1 = th - 0.05, t2 = th + 0.11;\n      const smooth = 1 + 0.45 * (1 - f);\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      // A sharp band and, wider and weaker, the sheen round it that a duller\n      // finish spreads out.\n      const s1 = smooth * (k1 * exp(p1 * l1) + k0 * exp(5 * l1)), s2 = smooth * k2 * exp(p2 * log(max(1e-6, 1 - t2 * t2)));\n      const lam = (0.55 * z + 0.82) / sqrt(1 + z * z), dif = b * (0.3 + 0.7 * max(0, lam));\n      const tip = cl((end - y) / 7, 0, 1), w0 = tip * (0.4 + 0.6 * tip);\n      const xi = floor(x), fr = x - xi, q = y * W + xi;\n      if (xi >= 0 && xi \u003c W) {\n        const w = (1 - fr) * w0;\n        acc[q * 3] += dif * w;\n        acc[q * 3 + 1] += s2 * b * w;\n        acc[q * 3 + 2] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q] += w;\n      }\n      if (xi + 1 >= 0 && xi + 1 \u003c W) {\n        const w = fr * w0;\n        acc[q * 3 + 3] += dif * w;\n        acc[q * 3 + 4] += s2 * b * w;\n        acc[q * 3 + 5] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q + 1] += w;\n      }\n    }\n  }\n  // Each LED: the mean of the strands over it, darker where they are fewer\n  // than 2.4. Channel 0 holds the body, 1 the tinted secondary, 2 the white\n  // primary.\n  // Orange and yellow read brown and olive at mid level on the panel, so\n  // round hue 0.12 the hair is lifted toward copper and honey blonde.\n  const h = S.hue + 0.76, hh = h - floor(h), warm = max(0, 1 - Math.abs(hh - 0.12) / 0.11);\n  hsv(h, 0.78 - 0.18 * warm, 1 + 0.6 * warm, body);\n  hsv(h, 0.8 - 0.2 * warm, 1, tint);\n  const RHO = (N / 78) * 0.8;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO);\n      const dv = acc[q * 3] / n, s2 = acc[q * 3 + 1] / n, s1 = acc[q * 3 + 2] / n;\n      for (let ch = 0; ch \u003c 3; ch++) c[ch] = 0.52 * dv * body[ch] + 0.9 * s2 * tint[ch] + s1 * (0.8 + 0.2 * tint[ch]);\n      display.setPixel(x, y, round(255 * (1 - exp(-1.4 * c[0]))), round(255 * (1 - exp(-1.4 * c[1]))), round(255 * (1 - exp(-1.4 * c[2]))));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Wave","min":0,"max":1,"about":"At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1."},{"name":"Shine","min":-1,"max":1,"about":"How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it."}],"start":[0,2,0,0.06],"measures":{"motion":0.1831,"detail":0.0305,"edges":0.0431,"complexity":2.5214,"coverage":0.9825,"colour":0.1258,"drift":0.1122},"knobResponse":[0.2098,0.1537,0.1722,0.1466]},{"slug":"hair-oil","title":"Hair Oil","family":"cosmetic","round":37,"note":"청록 머리결이 위에서 아래까지 흘러내리며 두 번 갈라져 끝에서는 스무 묶음이 되고, 그 위를 카지야-케이 광택 띠가 오르내려요. 금색 오일 방울이 위쪽에 떨어져 가닥을 따라 미끄러지다 갈림길에서 둘로 나뉘고, 방울이 지나간 가닥은 한 톤 짙어지며 광택이 여섯 배 날카로워진 채 13초에 반쯤 흐려져요. K3 은 1초에 떨어지는 방울을 4개까지 늘리고, 누르면 방울 12개가 위에서 한꺼번에 흘러내려요.","idea":"A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.","buttons":"K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.","code":"// ===== Patternflow pattern =====\n// Title:   Hair Oil\n// Family:  cosmetic\n// Idea:    A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after hair oil serums, with the strands lit by the Kajiya-Kay model (James Kajiya and Timothy Kay, 1989)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1\n//\n// Knob 1: Hue. The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness.\n// Knob 2: Speed. At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Drops. Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in.\n// Knob 4: Wave. At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28.\n// Buttons: K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.\n\nconst W = 64, H = 128, NB = 110, NF = 150;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\nconst TZ0 = -HY / HZ;\n\n// Locks: five across the panel near the top, each parting in two at about\n// row 53 and again at about row 92, so 20 fine locks at the ends.\nconst F1 = [45, 62], F2 = [84, 100];\n// Oil: a drop's slide speed in rows a second at Speed 2 on a strand hanging\n// straight down, the oil it leaves per row, the volume below which it soaks\n// in, and how long the gloss takes to fall to 1/e.\nconst V0 = 40, LOSS = 0.0045, VMIN = 0.08, TAU = 12, PULL = 0.55;\n\nfunction wobble(out, o, n) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c n; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, rate: 0.5, wave: 0.06, t: 0, warm: false, acc: 0,\n    // Front strands, sorted by root position, with their locks at three levels.\n    fx0: new Float32Array(NF), k0: new Int32Array(NF), k1: new Int32Array(NF), k2: new Int32Array(NF),\n    fbr: new Float32Array(NF), fto: new Float32Array(NF), bp: new Int32Array(NF), bs: new Int32Array(NF),\n    c0: new Float32Array(5), c1: new Float32Array(10), c2: new Float32Array(20), lph: new Float32Array(5),\n    bx0: new Float32Array(NB), bb: new Float32Array(NB), bto: new Float32Array(NB),\n    NX: new Float32Array((NF + NB) * H), NT: new Float32Array((NF + NB) * H),\n    xs: new Float32Array(NF * H), zs: new Float32Array(NF * H), ty: new Float32Array(NF * H), G: new Float32Array(NF * H),\n    f1: new Float32Array(H), f2: new Float32Array(H), lph1: new Float32Array(10), lph2: new Float32Array(20),\n    sa: new Float32Array(20 * H), ca: new Float32Array(20 * H), reach: new Float32Array(H), pullr: new Float32Array(H),\n    sx: new Float32Array(H), tz: new Float32Array(H), ws: new Float32Array(H), wz: new Float32Array(H),\n    drops: [], born: [],\n    ab: new Float32Array(W * H * 5), wt: new Float32Array(W * H), gl: new Float32Array(W * H), fb: new Float32Array(W * H * 3),\n    body: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], oil: [0, 0, 0],\n  });\n  for (let i = 0; i \u003c NF; i++) S.fx0[i] = -4 + (72 * (i + random())) / NF;\n  for (let i = 0; i \u003c NF; i++) {\n    S.k0[i] = min(4, floor(((S.fx0[i] + 4) / 72) * 5));\n    S.fbr[i] = 0.35 + 0.65 * random() ** 0.6;\n    S.fto[i] = (random() - 0.5) * 0.1;\n    S.bs[i] = 8 + floor(random() * 4);\n    S.bp[i] = floor(random() * 11);\n  }\n  // Each lock parts into the halves of its strands, so a fork is a real fork.\n  const split = (kin, kout, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      const mem = [];\n      for (let i = 0; i \u003c NF; i++) if (kin[i] === k) mem.push(i);\n      const half = mem.length >> 1;\n      mem.forEach((i, m) => (kout[i] = 2 * k + (m \u003c half ? 0 : 1)));\n    }\n  };\n  split(S.k0, S.k1, 5);\n  split(S.k1, S.k2, 10);\n  const centre = (kk, c, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      let s = 0, m = 0;\n      for (let i = 0; i \u003c NF; i++) if (kk[i] === k) (s += S.fx0[i]), m++;\n      c[k] = m ? s / m : 0;\n    }\n  };\n  centre(S.k0, S.c0, 5);\n  centre(S.k1, S.c1, 10);\n  centre(S.k2, S.c2, 20);\n  for (let k = 0; k \u003c 5; k++) S.lph[k] = random() * 2 * PI;\n  for (let k = 0; k \u003c 10; k++) S.lph1[k] = S.lph[k >> 1] + (k & 1 ? 1 : -1) * (0.7 + 0.5 * random());\n  for (let k = 0; k \u003c 20; k++) S.lph2[k] = S.lph1[k >> 1] + (k & 1 ? 1 : -1) * (0.5 + 0.5 * random());\n  for (let i = 0; i \u003c NB; i++) {\n    S.bx0[i] = -5 + (74 * (i + random())) / NB;\n    S.bb[i] = 0.3 + 0.7 * random();\n    S.bto[i] = (random() - 0.5) * 0.14;\n  }\n  for (let i = 0; i \u003c NF + NB; i++) {\n    wobble(S.NX, i * H, H);\n    wobble(S.NT, i * H, H);\n  }\n}\n\n// Rows: the breeze running down the hair, the waves, and the lean of the\n// sheet toward the eye, which puts the shine band where tz meets TZ0.\nfunction rows(S) {\n  const t = S.t, wv = (S.wave + 1) / 2;\n  const yb = 44 + 12 * sin(2 * PI * (t / 7)) + 3 * sin(2 * PI * (t / 3.1) + 1);\n  for (let r = 0; r \u003c H; r++) {\n    const reach = ((r + 30) / 158) ** 1.6, a = (2 * PI * r) / 40;\n    S.sx[r] = 3 * reach * sin(2 * PI * (r / 120 - t / 4.6)) + reach * sin(2 * PI * (r / 45 - t / 2.3) + 2);\n    S.ws[r] = 4 * wv * sin(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.wz[r] = 0.32 * wv * cos(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.f1[r] = sm(F1[0], F1[1], r);\n    S.f2[r] = sm(F2[0], F2[1], r);\n    S.tz[r] = TZ0 + 0.015 * (1 - 0.5 * wv) * (yb - r);\n  }\n}\n\n// Where each front strand runs this frame, and how steeply.\n// Each lock waves in its own phase, and the two halves of a lock drift a\n// third of a turn apart past its fork, so the fork opens as a Y. The phase\n// of a strand depends only on its fine lock, so the sines are taken once a\n// row for each of the 20 fine locks.\nfunction geometry(S) {\n  const { xs, zs, ty, sx, tz, f1, f2, NX, NT, G, sa, ca, reach, pullr } = S, t = S.t, wv = (S.wave + 1) / 2, sway = 0.5 * sin(2 * PI * (t / 6.1));\n  for (let r = 0; r \u003c H; r++) {\n    reach[r] = ((r + 30) / 158) ** 1.6;\n    pullr[r] = PULL * sm(3, 32, r);\n  }\n  for (let k = 0; k \u003c 20; k++) {\n    const p0 = S.lph[k >> 2], p1 = S.lph1[k >> 1], p2 = S.lph2[k];\n    for (let r = 0; r \u003c H; r++) {\n      const a = (2 * PI * r) / 40 + sway + p0 + (p1 - p0) * f1[r] + (p2 - p1) * f2[r];\n      sa[k * H + r] = 4 * wv * sin(a);\n      ca[k * H + r] = 0.32 * wv * cos(a);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const x0 = S.fx0[i], c0 = S.c0[S.k0[i]], c1 = S.c1[S.k1[i]], c2 = S.c2[S.k2[i]], o = i * H, ko = S.k2[i] * H;\n    const lock = 1.2 * sin(2 * PI * (t / 3.7) + S.lph[S.k0[i]]), to = S.fto[i];\n    let px = 0;\n    for (let r = 0; r \u003c H; r++) {\n      const c = c0 + (c1 - c0) * f1[r] + (c2 - c1) * f2[r];\n      // Oil lays a strand smoother: its own wiggle shrinks by half.\n      const g = G[o + r], calm = g \u003c 0.06 ? 1 : 1 - 0.5 * sm(0.06, 0.6, g);\n      const x = x0 + pullr[r] * (c - x0) + sx[r] + sa[ko + r] + lock * reach[r] + 0.45 * calm * NX[o + r];\n      xs[o + r] = x;\n      const tx = r ? x - px : 0, z = tz[r] + ca[ko + r] + to + 0.07 * calm * NT[o + r];\n      zs[o + r] = z;\n      ty[o + r] = 1 / sqrt(tx * tx + 1 + z * z);\n      px = x;\n    }\n  }\n}\n\nfunction spawn(S, i, y, vol) {\n  if (S.drops.length \u003c 48) S.drops.push({ i, y, vol, v: 0, age: 0, soak: 0 });\n}\n\n// The front strand whose root lies nearest x.\nfunction strandAt(S, x) {\n  let best = 0, bd = 1e9;\n  for (let i = 0; i \u003c NF; i++) {\n    const d = abs(S.fx0[i] - x);\n    if (d \u003c bd) (bd = d), (best = i);\n  }\n  return best;\n}\n\n// A drop moves down its strand, wetting the strands within its radius on\n// every row it crosses; at a fork a drop with oil enough splits, half going\n// down the sibling lock.\nfunction slide(S, dp, ds) {\n  const { xs, ty, G } = S;\n  if (dp.soak > 0) {\n    dp.soak += ds;\n    return dp.soak \u003c 0.5;\n  }\n  dp.age += ds;\n  const r0 = cl(floor(dp.y), 0, H - 1);\n  const steep = ty[dp.i * H + r0] ** 4;\n  const vt = V0 * (0.45 + 0.55 * sqrt(dp.vol)) * steep * (dp.age \u003c 0.2 ? dp.age / 0.2 : 1);\n  dp.v += (vt - dp.v) * min(1, ds * 6);\n  const y1 = dp.y + dp.v * ds;\n  for (let r = floor(dp.y) + 1; r \u003c= floor(y1); r++) {\n    if (r >= H) break;\n    if (r \u003c 0) continue;\n    const xc = xs[dp.i * H + r], rad = 0.7 + 1.3 * dp.vol, wet = 0.55 + 0.45 * min(1, dp.vol);\n    const lo = max(0, dp.i - 12), hi = min(NF - 1, dp.i + 12);\n    for (let j = lo; j \u003c= hi; j++) {\n      const q = j * H + r;\n      if (abs(xs[q] - xc) \u003c rad && G[q] \u003c wet) G[q] = wet;\n    }\n    dp.vol -= LOSS;\n    // Forks: the first at row 50, the second at row 88.\n    if ((r === 50 || r === 88) && dp.vol > 0.3) {\n      const kk = r === 50 ? S.k1 : S.k2, sib = kk[dp.i] ^ 1;\n      let best = -1, bd = 1e9;\n      for (let j = max(0, dp.i - 20); j \u003c= min(NF - 1, dp.i + 20); j++)\n        if (kk[j] === sib && abs(j - dp.i) \u003c bd) (bd = abs(j - dp.i)), (best = j);\n      if (best >= 0) {\n        dp.vol *= 0.5;\n        S.born.push({ i: best, y: r, vol: dp.vol, v: dp.v, age: 1, soak: 0 });\n      }\n    }\n  }\n  dp.y = y1;\n  if (dp.vol \u003c VMIN) dp.soak = 0.001;\n  return dp.y \u003c H + 3;\n}\n\nfunction step(S, d) {\n  const ds = d * (S.speed / 2);\n  S.t += ds;\n  rows(S);\n  geometry(S);\n  const fade = exp(-ds / TAU), G = S.G;\n  for (let q = 0; q \u003c G.length; q++) G[q] *= fade;\n  S.acc += S.rate * ds;\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    spawn(S, floor(random() * NF), 2 + random() * 22, 0.6 + 0.6 * random());\n  }\n  // A drop born at a fork waits for the end of the pass: filter would drop it.\n  S.born.length = 0;\n  S.drops = S.drops.filter((dp) => slide(S, dp, ds)).concat(S.born);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 0.5, 4);\n  S.wave = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on hair that has had oil for 20 seconds at Speed 2.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 200; i++) step(S, 0.1);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c 12; c++) spawn(S, strandAt(S, 2.6 + c * 5.3 + (random() - 0.5) * 2), 2 + random() * 4, 0.9 + 0.3 * random());\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ab, wt, gl, fb, xs, zs, G, NX, NT, sx, ws, wz, tz, body, deep, tint, oil } = S;\n  ab.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  const t = S.t;\n  // Kajiya-Kay: the band where the tangent lies square to the half vector,\n  // the white one shifted toward the root and a tinted one toward the tip.\n  // Dry hair has a soft band; oil makes it six times sharper and twice as\n  // bright, and darkens the body a shade.\n  const splat = (x, r, w0, dif, s1, s2, oilw, s3) => {\n    const xi = floor(x), fr = x - xi, q = r * W + xi;\n    for (let e = 0; e \u003c 2; e++) {\n      const xx = xi + e;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = (e ? fr : 1 - fr) * w0, p = (q + e) * 5;\n      ab[p] += dif * (1 - oilw) * w;\n      ab[p + 1] += dif * oilw * w;\n      ab[p + 2] += s1 * w;\n      ab[p + 3] += s2 * w;\n      ab[p + 4] += s3 * w;\n      wt[q + e] += w;\n    }\n  };\n  // Back layer: a dim, even curtain behind the locks.\n  for (let i = 0; i \u003c NB; i++) {\n    const o = (NF + i) * H, x0 = S.bx0[i], b = S.bb[i];\n    let px = x0;\n    for (let r = 0; r \u003c H; r++) {\n      const x = x0 + 0.8 * sx[r] + ws[r] + 0.5 * NX[o + r], tx = r ? x - px : 0;\n      px = x;\n      const z = tz[r] + wz[r] + S.bto[i] + 0.08 * NT[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const s1 = 0.35 * exp(40 * log(max(1e-6, 1 - (th - 0.05) ** 2)));\n      splat(x, r, 0.8, 0.4 * b * (0.4 + 0.6 * dif), 0.6 * s1 * b, 0, 0, 0);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const o = i * H, b = S.fbr[i], bs = S.bs[i], bp = S.bp[i];\n    for (let r = 0; r \u003c H; r++) {\n      const x = xs[o + r], tx = r ? x - xs[o + r - 1] : 0, ge = sm(0.06, 0.6, G[o + r]);\n      const z = zs[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const p1 = 70 * (1 + 5 * ge), t1 = th - 0.05, t2 = th + 0.11;\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      const s1 = (0.8 + 1.0 * ge) * exp(0.5 * p1 * l1);\n      // The oil film also gives a broad sheen of its own colour along the\n      // whole strand, which is what draws the streak down the fall.\n      const s3 = ge * (0.2 + 0.4 * exp(5 * l1));\n      const s2 = 0.45 * exp(0.5 * 0.4 * p1 * log(max(1e-6, 1 - t2 * t2)));\n      splat(x, r, 1.5, b * (0.4 + 0.6 * dif), s1 * (0.4 + 0.6 * b), s2 * b, ge, s3);\n      // The oil film on a fibre breaks into a string of tiny beads (Plateau\n      // and Rayleigh), one every 8 to 11 rows here; each holds a point of\n      // light that twinkles as the strand sways.\n      if (ge > 0.02 && (r + bp) % bs === 0) {\n        const xi = round(x);\n        if (xi >= 0 && xi \u003c W) {\n          const tw = 0.5 + 0.5 * sin(2 * PI * (t / 1.7) + i * 2.3 + r * 0.7);\n          gl[r * W + xi] += 0.9 * ge * tw * tw * tw;\n        }\n      }\n    }\n  }\n  // Colours. Orange, yellow and yellow-green read brown and olive at mid\n  // level, so from hue 0 to 0.26 the hair is lifted and paled toward rose\n  // gold, champagne and sage; deep blue reads nearly black, so round hue\n  // 0.66 it is paled a little toward cornflower.\n  const h = S.hue + 0.47, hh = h - floor(h), warm = sm(-0.03, 0.03, hh) * (1 - sm(0.22, 0.3, hh)), blue = sm(0.56, 0.62, hh) * (1 - sm(0.7, 0.77, hh));\n  hsv(h, 0.82 - 0.25 * warm - 0.22 * blue, 1 + 0.35 * warm + 0.1 * blue, body);\n  hsv(h + 0.015, 1 - 0.2 * warm - 0.1 * blue, 0.8 + 0.3 * warm + 0.1 * blue, deep);\n  hsv(h, 0.7 - 0.25 * warm - 0.15 * blue, 1, tint);\n  // The oil is the accent: two thirds of the way round from the hair, gold\n  // on teal at 0, and always at full brightness so it never goes muddy.\n  const ho = h + 0.66, oo = ho - floor(ho), ow = max(0, 1 - abs(oo - 0.1) / 0.12);\n  hsv(ho, 0.62 - 0.17 * ow, 1, oil);\n  const RHO = ((NF * 1.5 + NB * 0.8) / 72) * 0.85;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO), p = q * 5;\n      const d0 = ab[p] / n, d1 = ab[p + 1] / n, s1 = ab[p + 2] / n, s2 = ab[p + 3] / n, s3 = ab[p + 4] / n, gv = gl[q];\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const v = 0.6 * d0 * body[ch] + 0.6 * d1 * deep[ch] + 0.8 * s2 * tint[ch] + s1 * (0.82 + 0.18 * tint[ch]) + s3 * (0.5 * oil[ch] + 0.5) + gv * (0.6 * oil[ch] + 0.4);\n        fb[q * 3 + ch] = 1 - exp(-1.4 * v);\n      }\n    }\n  // The drops: a clear bead in the oil's colour, brighter toward its foot\n  // where it gathers the light, with a dark rim and a white point of light\n  // up and to the left.\n  for (const dp of S.drops) {\n    const grow = min(1, dp.age / 0.15), shrink = dp.soak > 0 ? 1 - dp.soak / 0.5 : 1;\n    const rb = (1.5 + 1.2 * sqrt(dp.vol)) * grow * shrink, r0 = cl(round(dp.y), 0, H - 1), xc = xs[dp.i * H + r0] + 0.5, yc = dp.y;\n    if (rb \u003c 0.3) continue;\n    for (let yy = floor(yc - rb - 1); yy \u003c= yc + rb + 1; yy++)\n      for (let xx = floor(xc - rb - 1); xx \u003c= xc + rb + 1; xx++) {\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const ex = xx + 0.5 - xc, ey = yy + 0.5 - yc, e = sqrt(ex * ex + ey * ey), cov = cl(rb + 0.5 - e, 0, 1);\n        if (cov \u003c= 0) continue;\n        const rim = 0.8 * sm(rb - 1.1, rb - 0.1, e), lit = 0.7 + 0.35 * cl(ey / rb, -1, 1);\n        const hot = cl(1.3 - 1.6 * sqrt((ex + 0.4 * rb) ** 2 + (ey + 0.45 * rb) ** 2), 0, 1), q = (yy * W + xx) * 3;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          const v = oil[ch] * lit * (1 - rim) + 0.15 * oil[ch] * rim + hot;\n          fb[q + ch] += (cl(v, 0, 1) - fb[q + ch]) * cov;\n        }\n      }\n  }\n  for (let q = 0; q \u003c W * H; q++) display.setPixel(q % W, (q / W) | 0, round(255 * fb[q * 3]), round(255 * fb[q * 3 + 1]), round(255 * fb[q * 3 + 2]));\n}\n","layer":{"id":"layer-hair-oil","type":"code","name":"hair-oil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hair Oil\n// Family:  cosmetic\n// Idea:    A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after hair oil serums, with the strands lit by the Kajiya-Kay model (James Kajiya and Timothy Kay, 1989)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1\n//\n// Knob 1: Hue. The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness.\n// Knob 2: Speed. At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Drops. Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in.\n// Knob 4: Wave. At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28.\n// Buttons: K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.\n\nconst W = 64, H = 128, NB = 110, NF = 150;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\nconst TZ0 = -HY / HZ;\n\n// Locks: five across the panel near the top, each parting in two at about\n// row 53 and again at about row 92, so 20 fine locks at the ends.\nconst F1 = [45, 62], F2 = [84, 100];\n// Oil: a drop's slide speed in rows a second at Speed 2 on a strand hanging\n// straight down, the oil it leaves per row, the volume below which it soaks\n// in, and how long the gloss takes to fall to 1/e.\nconst V0 = 40, LOSS = 0.0045, VMIN = 0.08, TAU = 12, PULL = 0.55;\n\nfunction wobble(out, o, n) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c n; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, rate: 0.5, wave: 0.06, t: 0, warm: false, acc: 0,\n    // Front strands, sorted by root position, with their locks at three levels.\n    fx0: new Float32Array(NF), k0: new Int32Array(NF), k1: new Int32Array(NF), k2: new Int32Array(NF),\n    fbr: new Float32Array(NF), fto: new Float32Array(NF), bp: new Int32Array(NF), bs: new Int32Array(NF),\n    c0: new Float32Array(5), c1: new Float32Array(10), c2: new Float32Array(20), lph: new Float32Array(5),\n    bx0: new Float32Array(NB), bb: new Float32Array(NB), bto: new Float32Array(NB),\n    NX: new Float32Array((NF + NB) * H), NT: new Float32Array((NF + NB) * H),\n    xs: new Float32Array(NF * H), zs: new Float32Array(NF * H), ty: new Float32Array(NF * H), G: new Float32Array(NF * H),\n    f1: new Float32Array(H), f2: new Float32Array(H), lph1: new Float32Array(10), lph2: new Float32Array(20),\n    sa: new Float32Array(20 * H), ca: new Float32Array(20 * H), reach: new Float32Array(H), pullr: new Float32Array(H),\n    sx: new Float32Array(H), tz: new Float32Array(H), ws: new Float32Array(H), wz: new Float32Array(H),\n    drops: [], born: [],\n    ab: new Float32Array(W * H * 5), wt: new Float32Array(W * H), gl: new Float32Array(W * H), fb: new Float32Array(W * H * 3),\n    body: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], oil: [0, 0, 0],\n  });\n  for (let i = 0; i \u003c NF; i++) S.fx0[i] = -4 + (72 * (i + random())) / NF;\n  for (let i = 0; i \u003c NF; i++) {\n    S.k0[i] = min(4, floor(((S.fx0[i] + 4) / 72) * 5));\n    S.fbr[i] = 0.35 + 0.65 * random() ** 0.6;\n    S.fto[i] = (random() - 0.5) * 0.1;\n    S.bs[i] = 8 + floor(random() * 4);\n    S.bp[i] = floor(random() * 11);\n  }\n  // Each lock parts into the halves of its strands, so a fork is a real fork.\n  const split = (kin, kout, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      const mem = [];\n      for (let i = 0; i \u003c NF; i++) if (kin[i] === k) mem.push(i);\n      const half = mem.length >> 1;\n      mem.forEach((i, m) => (kout[i] = 2 * k + (m \u003c half ? 0 : 1)));\n    }\n  };\n  split(S.k0, S.k1, 5);\n  split(S.k1, S.k2, 10);\n  const centre = (kk, c, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      let s = 0, m = 0;\n      for (let i = 0; i \u003c NF; i++) if (kk[i] === k) (s += S.fx0[i]), m++;\n      c[k] = m ? s / m : 0;\n    }\n  };\n  centre(S.k0, S.c0, 5);\n  centre(S.k1, S.c1, 10);\n  centre(S.k2, S.c2, 20);\n  for (let k = 0; k \u003c 5; k++) S.lph[k] = random() * 2 * PI;\n  for (let k = 0; k \u003c 10; k++) S.lph1[k] = S.lph[k >> 1] + (k & 1 ? 1 : -1) * (0.7 + 0.5 * random());\n  for (let k = 0; k \u003c 20; k++) S.lph2[k] = S.lph1[k >> 1] + (k & 1 ? 1 : -1) * (0.5 + 0.5 * random());\n  for (let i = 0; i \u003c NB; i++) {\n    S.bx0[i] = -5 + (74 * (i + random())) / NB;\n    S.bb[i] = 0.3 + 0.7 * random();\n    S.bto[i] = (random() - 0.5) * 0.14;\n  }\n  for (let i = 0; i \u003c NF + NB; i++) {\n    wobble(S.NX, i * H, H);\n    wobble(S.NT, i * H, H);\n  }\n}\n\n// Rows: the breeze running down the hair, the waves, and the lean of the\n// sheet toward the eye, which puts the shine band where tz meets TZ0.\nfunction rows(S) {\n  const t = S.t, wv = (S.wave + 1) / 2;\n  const yb = 44 + 12 * sin(2 * PI * (t / 7)) + 3 * sin(2 * PI * (t / 3.1) + 1);\n  for (let r = 0; r \u003c H; r++) {\n    const reach = ((r + 30) / 158) ** 1.6, a = (2 * PI * r) / 40;\n    S.sx[r] = 3 * reach * sin(2 * PI * (r / 120 - t / 4.6)) + reach * sin(2 * PI * (r / 45 - t / 2.3) + 2);\n    S.ws[r] = 4 * wv * sin(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.wz[r] = 0.32 * wv * cos(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.f1[r] = sm(F1[0], F1[1], r);\n    S.f2[r] = sm(F2[0], F2[1], r);\n    S.tz[r] = TZ0 + 0.015 * (1 - 0.5 * wv) * (yb - r);\n  }\n}\n\n// Where each front strand runs this frame, and how steeply.\n// Each lock waves in its own phase, and the two halves of a lock drift a\n// third of a turn apart past its fork, so the fork opens as a Y. The phase\n// of a strand depends only on its fine lock, so the sines are taken once a\n// row for each of the 20 fine locks.\nfunction geometry(S) {\n  const { xs, zs, ty, sx, tz, f1, f2, NX, NT, G, sa, ca, reach, pullr } = S, t = S.t, wv = (S.wave + 1) / 2, sway = 0.5 * sin(2 * PI * (t / 6.1));\n  for (let r = 0; r \u003c H; r++) {\n    reach[r] = ((r + 30) / 158) ** 1.6;\n    pullr[r] = PULL * sm(3, 32, r);\n  }\n  for (let k = 0; k \u003c 20; k++) {\n    const p0 = S.lph[k >> 2], p1 = S.lph1[k >> 1], p2 = S.lph2[k];\n    for (let r = 0; r \u003c H; r++) {\n      const a = (2 * PI * r) / 40 + sway + p0 + (p1 - p0) * f1[r] + (p2 - p1) * f2[r];\n      sa[k * H + r] = 4 * wv * sin(a);\n      ca[k * H + r] = 0.32 * wv * cos(a);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const x0 = S.fx0[i], c0 = S.c0[S.k0[i]], c1 = S.c1[S.k1[i]], c2 = S.c2[S.k2[i]], o = i * H, ko = S.k2[i] * H;\n    const lock = 1.2 * sin(2 * PI * (t / 3.7) + S.lph[S.k0[i]]), to = S.fto[i];\n    let px = 0;\n    for (let r = 0; r \u003c H; r++) {\n      const c = c0 + (c1 - c0) * f1[r] + (c2 - c1) * f2[r];\n      // Oil lays a strand smoother: its own wiggle shrinks by half.\n      const g = G[o + r], calm = g \u003c 0.06 ? 1 : 1 - 0.5 * sm(0.06, 0.6, g);\n      const x = x0 + pullr[r] * (c - x0) + sx[r] + sa[ko + r] + lock * reach[r] + 0.45 * calm * NX[o + r];\n      xs[o + r] = x;\n      const tx = r ? x - px : 0, z = tz[r] + ca[ko + r] + to + 0.07 * calm * NT[o + r];\n      zs[o + r] = z;\n      ty[o + r] = 1 / sqrt(tx * tx + 1 + z * z);\n      px = x;\n    }\n  }\n}\n\nfunction spawn(S, i, y, vol) {\n  if (S.drops.length \u003c 48) S.drops.push({ i, y, vol, v: 0, age: 0, soak: 0 });\n}\n\n// The front strand whose root lies nearest x.\nfunction strandAt(S, x) {\n  let best = 0, bd = 1e9;\n  for (let i = 0; i \u003c NF; i++) {\n    const d = abs(S.fx0[i] - x);\n    if (d \u003c bd) (bd = d), (best = i);\n  }\n  return best;\n}\n\n// A drop moves down its strand, wetting the strands within its radius on\n// every row it crosses; at a fork a drop with oil enough splits, half going\n// down the sibling lock.\nfunction slide(S, dp, ds) {\n  const { xs, ty, G } = S;\n  if (dp.soak > 0) {\n    dp.soak += ds;\n    return dp.soak \u003c 0.5;\n  }\n  dp.age += ds;\n  const r0 = cl(floor(dp.y), 0, H - 1);\n  const steep = ty[dp.i * H + r0] ** 4;\n  const vt = V0 * (0.45 + 0.55 * sqrt(dp.vol)) * steep * (dp.age \u003c 0.2 ? dp.age / 0.2 : 1);\n  dp.v += (vt - dp.v) * min(1, ds * 6);\n  const y1 = dp.y + dp.v * ds;\n  for (let r = floor(dp.y) + 1; r \u003c= floor(y1); r++) {\n    if (r >= H) break;\n    if (r \u003c 0) continue;\n    const xc = xs[dp.i * H + r], rad = 0.7 + 1.3 * dp.vol, wet = 0.55 + 0.45 * min(1, dp.vol);\n    const lo = max(0, dp.i - 12), hi = min(NF - 1, dp.i + 12);\n    for (let j = lo; j \u003c= hi; j++) {\n      const q = j * H + r;\n      if (abs(xs[q] - xc) \u003c rad && G[q] \u003c wet) G[q] = wet;\n    }\n    dp.vol -= LOSS;\n    // Forks: the first at row 50, the second at row 88.\n    if ((r === 50 || r === 88) && dp.vol > 0.3) {\n      const kk = r === 50 ? S.k1 : S.k2, sib = kk[dp.i] ^ 1;\n      let best = -1, bd = 1e9;\n      for (let j = max(0, dp.i - 20); j \u003c= min(NF - 1, dp.i + 20); j++)\n        if (kk[j] === sib && abs(j - dp.i) \u003c bd) (bd = abs(j - dp.i)), (best = j);\n      if (best >= 0) {\n        dp.vol *= 0.5;\n        S.born.push({ i: best, y: r, vol: dp.vol, v: dp.v, age: 1, soak: 0 });\n      }\n    }\n  }\n  dp.y = y1;\n  if (dp.vol \u003c VMIN) dp.soak = 0.001;\n  return dp.y \u003c H + 3;\n}\n\nfunction step(S, d) {\n  const ds = d * (S.speed / 2);\n  S.t += ds;\n  rows(S);\n  geometry(S);\n  const fade = exp(-ds / TAU), G = S.G;\n  for (let q = 0; q \u003c G.length; q++) G[q] *= fade;\n  S.acc += S.rate * ds;\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    spawn(S, floor(random() * NF), 2 + random() * 22, 0.6 + 0.6 * random());\n  }\n  // A drop born at a fork waits for the end of the pass: filter would drop it.\n  S.born.length = 0;\n  S.drops = S.drops.filter((dp) => slide(S, dp, ds)).concat(S.born);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 0.5, 4);\n  S.wave = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on hair that has had oil for 20 seconds at Speed 2.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 200; i++) step(S, 0.1);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c 12; c++) spawn(S, strandAt(S, 2.6 + c * 5.3 + (random() - 0.5) * 2), 2 + random() * 4, 0.9 + 0.3 * random());\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ab, wt, gl, fb, xs, zs, G, NX, NT, sx, ws, wz, tz, body, deep, tint, oil } = S;\n  ab.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  const t = S.t;\n  // Kajiya-Kay: the band where the tangent lies square to the half vector,\n  // the white one shifted toward the root and a tinted one toward the tip.\n  // Dry hair has a soft band; oil makes it six times sharper and twice as\n  // bright, and darkens the body a shade.\n  const splat = (x, r, w0, dif, s1, s2, oilw, s3) => {\n    const xi = floor(x), fr = x - xi, q = r * W + xi;\n    for (let e = 0; e \u003c 2; e++) {\n      const xx = xi + e;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = (e ? fr : 1 - fr) * w0, p = (q + e) * 5;\n      ab[p] += dif * (1 - oilw) * w;\n      ab[p + 1] += dif * oilw * w;\n      ab[p + 2] += s1 * w;\n      ab[p + 3] += s2 * w;\n      ab[p + 4] += s3 * w;\n      wt[q + e] += w;\n    }\n  };\n  // Back layer: a dim, even curtain behind the locks.\n  for (let i = 0; i \u003c NB; i++) {\n    const o = (NF + i) * H, x0 = S.bx0[i], b = S.bb[i];\n    let px = x0;\n    for (let r = 0; r \u003c H; r++) {\n      const x = x0 + 0.8 * sx[r] + ws[r] + 0.5 * NX[o + r], tx = r ? x - px : 0;\n      px = x;\n      const z = tz[r] + wz[r] + S.bto[i] + 0.08 * NT[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const s1 = 0.35 * exp(40 * log(max(1e-6, 1 - (th - 0.05) ** 2)));\n      splat(x, r, 0.8, 0.4 * b * (0.4 + 0.6 * dif), 0.6 * s1 * b, 0, 0, 0);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const o = i * H, b = S.fbr[i], bs = S.bs[i], bp = S.bp[i];\n    for (let r = 0; r \u003c H; r++) {\n      const x = xs[o + r], tx = r ? x - xs[o + r - 1] : 0, ge = sm(0.06, 0.6, G[o + r]);\n      const z = zs[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const p1 = 70 * (1 + 5 * ge), t1 = th - 0.05, t2 = th + 0.11;\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      const s1 = (0.8 + 1.0 * ge) * exp(0.5 * p1 * l1);\n      // The oil film also gives a broad sheen of its own colour along the\n      // whole strand, which is what draws the streak down the fall.\n      const s3 = ge * (0.2 + 0.4 * exp(5 * l1));\n      const s2 = 0.45 * exp(0.5 * 0.4 * p1 * log(max(1e-6, 1 - t2 * t2)));\n      splat(x, r, 1.5, b * (0.4 + 0.6 * dif), s1 * (0.4 + 0.6 * b), s2 * b, ge, s3);\n      // The oil film on a fibre breaks into a string of tiny beads (Plateau\n      // and Rayleigh), one every 8 to 11 rows here; each holds a point of\n      // light that twinkles as the strand sways.\n      if (ge > 0.02 && (r + bp) % bs === 0) {\n        const xi = round(x);\n        if (xi >= 0 && xi \u003c W) {\n          const tw = 0.5 + 0.5 * sin(2 * PI * (t / 1.7) + i * 2.3 + r * 0.7);\n          gl[r * W + xi] += 0.9 * ge * tw * tw * tw;\n        }\n      }\n    }\n  }\n  // Colours. Orange, yellow and yellow-green read brown and olive at mid\n  // level, so from hue 0 to 0.26 the hair is lifted and paled toward rose\n  // gold, champagne and sage; deep blue reads nearly black, so round hue\n  // 0.66 it is paled a little toward cornflower.\n  const h = S.hue + 0.47, hh = h - floor(h), warm = sm(-0.03, 0.03, hh) * (1 - sm(0.22, 0.3, hh)), blue = sm(0.56, 0.62, hh) * (1 - sm(0.7, 0.77, hh));\n  hsv(h, 0.82 - 0.25 * warm - 0.22 * blue, 1 + 0.35 * warm + 0.1 * blue, body);\n  hsv(h + 0.015, 1 - 0.2 * warm - 0.1 * blue, 0.8 + 0.3 * warm + 0.1 * blue, deep);\n  hsv(h, 0.7 - 0.25 * warm - 0.15 * blue, 1, tint);\n  // The oil is the accent: two thirds of the way round from the hair, gold\n  // on teal at 0, and always at full brightness so it never goes muddy.\n  const ho = h + 0.66, oo = ho - floor(ho), ow = max(0, 1 - abs(oo - 0.1) / 0.12);\n  hsv(ho, 0.62 - 0.17 * ow, 1, oil);\n  const RHO = ((NF * 1.5 + NB * 0.8) / 72) * 0.85;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO), p = q * 5;\n      const d0 = ab[p] / n, d1 = ab[p + 1] / n, s1 = ab[p + 2] / n, s2 = ab[p + 3] / n, s3 = ab[p + 4] / n, gv = gl[q];\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const v = 0.6 * d0 * body[ch] + 0.6 * d1 * deep[ch] + 0.8 * s2 * tint[ch] + s1 * (0.82 + 0.18 * tint[ch]) + s3 * (0.5 * oil[ch] + 0.5) + gv * (0.6 * oil[ch] + 0.4);\n        fb[q * 3 + ch] = 1 - exp(-1.4 * v);\n      }\n    }\n  // The drops: a clear bead in the oil's colour, brighter toward its foot\n  // where it gathers the light, with a dark rim and a white point of light\n  // up and to the left.\n  for (const dp of S.drops) {\n    const grow = min(1, dp.age / 0.15), shrink = dp.soak > 0 ? 1 - dp.soak / 0.5 : 1;\n    const rb = (1.5 + 1.2 * sqrt(dp.vol)) * grow * shrink, r0 = cl(round(dp.y), 0, H - 1), xc = xs[dp.i * H + r0] + 0.5, yc = dp.y;\n    if (rb \u003c 0.3) continue;\n    for (let yy = floor(yc - rb - 1); yy \u003c= yc + rb + 1; yy++)\n      for (let xx = floor(xc - rb - 1); xx \u003c= xc + rb + 1; xx++) {\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const ex = xx + 0.5 - xc, ey = yy + 0.5 - yc, e = sqrt(ex * ex + ey * ey), cov = cl(rb + 0.5 - e, 0, 1);\n        if (cov \u003c= 0) continue;\n        const rim = 0.8 * sm(rb - 1.1, rb - 0.1, e), lit = 0.7 + 0.35 * cl(ey / rb, -1, 1);\n        const hot = cl(1.3 - 1.6 * sqrt((ex + 0.4 * rb) ** 2 + (ey + 0.45 * rb) ** 2), 0, 1), q = (yy * W + xx) * 3;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          const v = oil[ch] * lit * (1 - rim) + 0.15 * oil[ch] * rim + hot;\n          fb[q + ch] += (cl(v, 0, 1) - fb[q + ch]) * cov;\n        }\n      }\n  }\n  for (let q = 0; q \u003c W * H; q++) display.setPixel(q % W, (q / W) | 0, round(255 * fb[q * 3]), round(255 * fb[q * 3 + 1]), round(255 * fb[q * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Drops","min":0.5,"max":4,"about":"Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in."},{"name":"Wave","min":-1,"max":1,"about":"At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28."}],"start":[0,2,0.5,0.06],"measures":{"motion":0.3092,"detail":0.0865,"edges":0.3007,"complexity":2.6843,"coverage":0.7924,"colour":0.1708,"drift":0.1096},"knobResponse":[0.1623,0.2029,0.0681,0.2493]},{"slug":"hairy-ball","title":"Hairy Ball","family":"noise","round":28,"note":"위에는 털 난 공, 아래에는 털 난 도넛이 빛을 받으며 돌아요. 공은 어떻게 빗어도 털이 갈 데 없는 가마가 하나나 둘 금빛으로 남고, 도넛은 한 바퀴 매끈하게 빗겨요. 귀퉁이의 2 와 0 은 둘의 오일러 지표예요. 누르면 둘 다 다시 빗어서 가마가 다른 자리로 뛰어요.","idea":"A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.","buttons":"K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.","code":"// ===== Patternflow pattern =====\n// Title:   Hairy Ball\n// Family:  noise\n// Idea:    A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the hairy ball theorem (Henri Poincaré 1885, L. E. J. Brouwer 1912) and the Poincaré–Hopf index theorem (Heinz Hopf, 1926), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1\n//\n// Knob 1: Hue. Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together.\n// Knob 2: Speed. At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower.\n// Knob 3: Length. The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter.\n// Knob 4: Comb. How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them.\n// Buttons: K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The sphere sits in the top half, the doughnut in the bottom half.\nconst SX = 32, SY = 31, RS = 24.5;\nconst TX = 32, TY = 97, TR = 18, TQ = 8.2;\n// Roots spread evenly at the same density on both: the doughnut's area\n// 4 pi^2 R r against the sphere's 4 pi R^2.\nconst NS = 1100, NT = round((NS * PI * TR * TQ) / (RS * RS));\n\n// Fixed grain: a seeded generator used once, so the roots never move on the skin.\nlet seed = 0x9e3779b9;\nfunction rnd() {\n  seed = (seed + 0x6d2b79f5) | 0;\n  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\n// Sphere roots on a jittered Fibonacci spiral, unit vectors.\nconst SP = new Float32Array(NS * 3), SJ = new Float32Array(NS * 2);\nfor (let i = 0; i \u003c NS; i++) {\n  const y = 1 - (2 * (i + 0.2 + 0.6 * rnd())) / NS, r = sqrt(max(0, 1 - y * y)), a = i * 2.39996323 + (rnd() - 0.5) * 0.9 * (2 / sqrt(NS)) / max(r, 0.05);\n  SP[i * 3] = r * cos(a);\n  SP[i * 3 + 1] = y;\n  SP[i * 3 + 2] = r * sin(a);\n  SJ[i * 2] = 0.8 + 0.35 * rnd();\n  SJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// Doughnut roots: u round the ring, v round the tube, v drawn with density\n// R + r cos v so the hair is as thick inside the hole as outside.\nconst TP = new Float32Array(NT * 3), TN = new Float32Array(NT * 3), TU = new Float32Array(NT * 3), TV = new Float32Array(NT * 3), TJ = new Float32Array(NT * 2);\nfor (let i = 0; i \u003c NT; i++) {\n  const u = 2 * PI * ((i * 0.7548776662 + 0.3 * rnd() / NT * 40) % 1), F = (i * 0.5698402910 + 0.5 + (rnd() - 0.5) * 0.02) % 1;\n  let v = 2 * PI * F;\n  for (let k = 0; k \u003c 8; k++) v -= (TR * v + TQ * sin(v) - 2 * PI * TR * F) / (TR + TQ * cos(v));\n  const cu = cos(u), su = sin(u), cv = cos(v), sv = sin(v), rr = TR + TQ * cv, o = i * 3;\n  TP[o] = rr * cu, TP[o + 1] = rr * su, TP[o + 2] = TQ * sv;\n  TN[o] = cv * cu, TN[o + 1] = cv * su, TN[o + 2] = sv;\n  TU[o] = -su, TU[o + 1] = cu, TU[o + 2] = 0;\n  TV[o] = -sv * cu, TV[o + 1] = -sv * su, TV[o + 2] = cv;\n  TJ[i * 2] = 0.8 + 0.35 * rnd();\n  TJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// 3x3 rotations, row major.\nconst mul = (A, B) => {\n  const C = new Array(9);\n  for (let r = 0; r \u003c 3; r++) for (let c = 0; c \u003c 3; c++) C[r * 3 + c] = A[r * 3] * B[c] + A[r * 3 + 1] * B[3 + c] + A[r * 3 + 2] * B[6 + c];\n  return C;\n};\nconst rx = (a) => [1, 0, 0, 0, cos(a), -sin(a), 0, sin(a), cos(a)];\nconst ry = (a) => [cos(a), 0, sin(a), 0, 1, 0, -sin(a), 0, cos(a)];\nconst rz = (a) => [cos(a), -sin(a), 0, sin(a), cos(a), 0, 0, 0, 1];\n\n// Light from the upper left, in front; H halfway to the eye.\nconst LX = -0.45 / 0.996, LY = -0.55 / 0.996, LZ = 0.7 / 0.996;\nconst HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The combs the sphere goes through: how far apart its two cowlicks stand\n// (1 opposite each other, 0 merged into one zero of index 2) and the angle\n// of the doughnut's hair (0 along the ring, pi/2 along the tube).\nconst PROG = [[0.55, 0.12], [0, 0.85], [1, -0.55], [0.3, 0.4], [0, -0.9], [1, 0.25]];\n\n// The sphere's body turns about its own vertical axis, tipped toward the\n// eye; the field turns inside it on its own, from the angles a.\nconst bodyM = (T) => mul(rx(-0.42 + 0.12 * sin(T * 0.21)), ry(T * 0.6));\nconst fieldM = (a, T) => mul(rz(a[0] + T * 0.09), mul(rx(a[1] + 0.5 * sin(T * 0.05 + 1)), rz(a[2])));\n// The two zeros in field coordinates sit at w = +-t on the stereographic\n// plane, symmetric about the south pole; t = 1 puts them opposite. Out\n// come both as unit vectors in M's frame.\nfunction zeros(M, t) {\n  const t2 = t * t, Z = [];\n  for (const sg of [1, -1]) {\n    const fx = (2 * sg * t) / (1 + t2), fz = (t2 - 1) / (1 + t2);\n    Z.push(M[0] * fx + M[2] * fz, M[3] * fx + M[5] * fz, M[6] * fx + M[8] * fz);\n  }\n  return Z;\n}\n// A new comb is turned so that a cowlick faces the eye for most of the\n// seven units it lasts, both of them when they stand close enough.\nfunction aim(T, sep, from) {\n  let best = -9, pick = from;\n  for (let c = 0; c \u003c 40; c++) {\n    const a = from.map((v) => v + (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.3 * Math.random()));\n    let lo = 9, sum = 0;\n    for (let j = 0; j \u003c 5; j++) {\n      const Tj = T + 0.8 + j * 1.5, Z = zeros(mul(bodyM(Tj), fieldM(a, Tj)), sep), v = max(Z[2], Z[5]) + 0.5 * min(Z[2], Z[5]);\n      (lo = min(lo, v)), (sum += v);\n    }\n    const score = lo + sum / 5;\n    if (score > best) (best = score), (pick = a);\n  }\n  return pick;\n}\n\n// 3x5 digits, one row of three bits per line, top first.\nconst DIG2 = [7, 1, 7, 4, 7], DIG0 = [7, 5, 5, 5, 7];\nfunction digit(buf, rows, x0, y0, c) {\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++)\n      if ((rows[j] >> (2 - i)) & 1) {\n        const q = ((y0 + j) * W + x0 + i) * 3;\n        for (let k = 0; k \u003c 3; k++) buf[q + k] = 40 + 120 * c[k];\n      }\n}\n\nexport function setup(params) {\n  const a = aim(-0.8, PROG[0][0], [0, 0, 0]);\n  params.s = {\n    T: 0, clock: 0, step: 0, a: a.slice(), ta: a,\n    sep: PROG[0][0], al: PROG[0][1],\n    hue: 0, len: 8, th: PI / 4,\n    buf: new Float32Array(N * 3), zb: new Float32Array(N), zh: new Float32Array(N),\n    cs: new Float32Array(3), ct: new Float32Array(3), cg: new Float32Array(3),\n  };\n}\n\nfunction recomb(P) {\n  P.step = (P.step + 1) % PROG.length;\n  P.clock = 0;\n  P.ta = aim(P.T, PROG[P.step][0], P.ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.len = cl(k[2], 8, 13);\n  P.th = (PI / 4) * (1 + cl(k[3], -1, 1));\n  const dT = d * cl(k[1], 0.2, 3) * 0.5;\n  P.T += dT;\n  P.clock += dT;\n  if (input.btnPressed && input.btnPressed[0]) recomb(P);\n  else if (P.clock > 7) recomb(P);\n  const e = 1 - exp(-max(dT, d * 0.5) * 2.4), g = PROG[P.step];\n  for (let i = 0; i \u003c 3; i++) P.a[i] += (P.ta[i] - P.a[i]) * e;\n  P.sep += (g[0] - P.sep) * e;\n  P.al += (g[1] - P.al) * e;\n}\n\n// One hair: root (x, y, z) on screen, direction (hx, hy, hz) times its\n// length, colour (r, g, b) at the tip; the root end is darker.\nfunction hair(P, x, y, z, hx, hy, hz, r, g, b) {\n  const n = max(2, ceil(Math.hypot(hx, hy) * 1.4) + 1), buf = P.buf, zb = P.zb, zh = P.zh;\n  for (let j = 0; j \u003c n; j++) {\n    const s = j / (n - 1), X = floor(x + hx * s), Y = floor(y + hy * s);\n    if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n    const p = Y * W + X, Z = z + hz * s;\n    if (Z \u003c zb[p] - 1.2 || Z \u003c= zh[p]) continue;\n    zh[p] = Z;\n    const m = 0.22 + 0.78 * s * s, q = p * 3;\n    buf[q] = r * m, buf[q + 1] = g * m, buf[q + 2] = b * m;\n  }\n}\n\n// Hair light after Kajiya and Kay: a fibre is lit by how square it lies to\n// the light and shines where it lies square to the half vector.\nfunction shade(tx, ty, tz, nx, ny, nz) {\n  const tl = tx * LX + ty * LY + tz * LZ, th = tx * HX + ty * HY + tz * HZ, nl = nx * LX + ny * LY + nz * LZ;\n  const lam = 0.22 + 0.78 * max(0, nl), dif = sqrt(max(0, 1 - tl * tl)), sp = (1 - th * th) ** 12;\n  return [lam * (0.35 + 0.65 * dif), 0.75 * sp * max(0, nl + 0.2)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf, zb = P.zb, zh = P.zh, cs = P.cs, ct = P.ct, cg = P.cg, T = P.T;\n  buf.fill(0);\n  zb.fill(-1e9);\n  zh.fill(-1e9);\n  hsv(P.hue + 0.6, 0.75, 1, cs, 0);\n  hsv(P.hue + 0.47, 0.8, 1, ct, 0);\n  hsv(P.hue + 0.12, 0.6, 1, cg, 0);\n  const pulse = 0.85 + 0.15 * sin(T * 3.1);\n\n  // The sphere.\n  const Mb = bodyM(T), Rf = fieldM(P.a, T), M = mul(Mb, Rf), t = P.sep, t2 = t * t, Z = zeros(M, t);\n  // Skin: dark, with the cowlicks glowing through.\n  const R2 = RS * RS;\n  for (let y = max(0, floor(SY - RS)); y \u003c= min(H - 1, ceil(SY + RS)); y++)\n    for (let x = max(0, floor(SX - RS)); x \u003c= min(W - 1, ceil(SX + RS)); x++) {\n      const dx = x + 0.5 - SX, dy = y + 0.5 - SY, rr = dx * dx + dy * dy;\n      if (rr >= R2) continue;\n      const dz = sqrt(R2 - rr), nx = dx / RS, ny = dy / RS, nz = dz / RS, p = y * W + x, q = p * 3;\n      zb[p] = dz;\n      const lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      const gl = exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.05) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.05);\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * (cs[c] * lam + cg[c] * min(1, gl) * 0.9 * pulse);\n    }\n  // The field: v(w) = e^{i theta} (w^2 - t^2) on the plane, carried back to\n  // the sphere. Its only zeros are w = t and w = -t, each of index 1; at\n  // t = 0 they merge into one zero of index 2. There is always one.\n  const kc = cos(P.th), ks = sin(P.th), L = P.len, lb = 0.35 - 0.02 * (L - 8);\n  for (let i = 0; i \u003c NS; i++) {\n    const o = i * 3, bx = SP[o], by = SP[o + 1], bz = SP[o + 2];\n    const nx = Mb[0] * bx + Mb[1] * by + Mb[2] * bz, ny = Mb[3] * bx + Mb[4] * by + Mb[5] * bz, nz = Mb[6] * bx + Mb[7] * by + Mb[8] * bz;\n    if (nz \u003c -0.3) continue;\n    // Into field coordinates: f = Rf^T b.\n    const fx = Rf[0] * bx + Rf[3] * by + Rf[6] * bz, fy = Rf[1] * bx + Rf[4] * by + Rf[7] * bz, fz = Rf[2] * bx + Rf[5] * by + Rf[8] * bz;\n    const den = max(1e-7, 1 - fz), a = fx / den, b = fy / den, re = a * a - b * b - t2, im = 2 * a * b;\n    const va = kc * re - ks * im, vb = ks * re + kc * im, s = 1 + a * a + b * b, qq = (a * va + b * vb) / s;\n    let gx = va - 2 * a * qq, gy = vb - 2 * b * qq, gz = 2 * qq;\n    const gn = Math.hypot(gx, gy, gz) || 1;\n    gx /= gn, gy /= gn, gz /= gn;\n    // Field direction on screen.\n    const dx = M[0] * gx + M[1] * gy + M[2] * gz, dy = M[3] * gx + M[4] * gy + M[5] * gz, dz = M[6] * gx + M[7] * gy + M[8] * gz;\n    // Near a zero the hair stands up and glows.\n    const gl = min(1, exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.07) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.07));\n    const lift = lb + 0.8 * gl, cL = cos(lift), sL = sin(lift);\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * SJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * SJ[i * 2] * li, w = 255 * sp, gg = 255 * gl * pulse;\n    hair(P, SX + RS * nx, SY + RS * ny, RS * nz, hx * len, hy * len, hz * len,\n      cs[0] * br + w + cg[0] * gg, cs[1] * br + w + cg[1] * gg, cs[2] * br + w + cg[2] * gg);\n  }\n\n  // The doughnut, seen from about 40 degrees above, spinning on its\n  // own axis and swaying. Its hair lies along cos(al) e_u + sin(al) e_v: no\n  // zero anywhere, which the torus allows because its Euler characteristic is 0.\n  const Mt = mul(ry(0.3 * sin(T * 0.13)), mul(rx(0.84 + 0.08 * sin(T * 0.17)), rz(T * 0.5)));\n  const RO = TR + TQ, ox = Mt[6], oy = Mt[7], oz = Mt[8];\n  for (let y = max(0, floor(TY - RO)); y \u003c= min(H - 1, ceil(TY + RO)); y++)\n    for (let x = max(0, floor(TX - RO)); x \u003c= min(W - 1, ceil(TX + RO)); x++) {\n      const dx = x + 0.5 - TX, dy = y + 0.5 - TY;\n      if (dx * dx + dy * dy >= RO * RO) continue;\n      // March a ray into the doughnut's own coordinates.\n      const z0 = RO + 1;\n      const px0 = Mt[0] * dx + Mt[3] * dy + Mt[6] * z0, py0 = Mt[1] * dx + Mt[4] * dy + Mt[7] * z0, pz0 = Mt[2] * dx + Mt[5] * dy + Mt[8] * z0;\n      let tt = 0, hit = false, px = 0, py = 0, pz = 0;\n      for (let it = 0; it \u003c 40 && tt \u003c 2 * z0; it++) {\n        px = px0 - ox * tt, py = py0 - oy * tt, pz = pz0 - oz * tt;\n        const qd = sqrt(px * px + py * py) - TR, dd = sqrt(qd * qd + pz * pz) - TQ;\n        if (dd \u003c 0.03) {\n          hit = true;\n          break;\n        }\n        tt += dd;\n      }\n      if (!hit) continue;\n      const rl = sqrt(px * px + py * py) || 1, bx = (px - (TR * px) / rl) / TQ, by = (py - (TR * py) / rl) / TQ, bz = pz / TQ;\n      const nx = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, ny = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, nz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n      const p = y * W + x, q = p * 3, lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      zb[p] = z0 - tt;\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * ct[c] * lam;\n    }\n  const ca = cos(P.al), sa = sin(P.al), cL = cos(lb), sL = sin(lb);\n  for (let i = 0; i \u003c NT; i++) {\n    const o = i * 3, bnx = TN[o], bny = TN[o + 1], bnz = TN[o + 2];\n    const nx = Mt[0] * bnx + Mt[1] * bny + Mt[2] * bnz, ny = Mt[3] * bnx + Mt[4] * bny + Mt[5] * bnz, nz = Mt[6] * bnx + Mt[7] * bny + Mt[8] * bnz;\n    const gx = ca * TU[o] + sa * TV[o], gy = ca * TU[o + 1] + sa * TV[o + 1], gz = ca * TU[o + 2] + sa * TV[o + 2];\n    const dx = Mt[0] * gx + Mt[1] * gy + Mt[2] * gz, dy = Mt[3] * gx + Mt[4] * gy + Mt[5] * gz, dz = Mt[6] * gx + Mt[7] * gy + Mt[8] * gz;\n    const bx = TP[o], by = TP[o + 1], bz = TP[o + 2];\n    const X = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, Y = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, Zz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * TJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * TJ[i * 2] * li, w = 255 * sp;\n    hair(P, TX + X, TY + Y, Zz, hx * len, hy * len, hz * len, ct[0] * br + w, ct[1] * br + w, ct[2] * br + w);\n  }\n\n  // The Euler characteristic beside each: 2 for the sphere, 0 for the torus.\n  digit(buf, DIG2, 59, 2, cs);\n  digit(buf, DIG0, 59, 121, ct);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-hairy-ball","type":"code","name":"hairy-ball","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hairy Ball\n// Family:  noise\n// Idea:    A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the hairy ball theorem (Henri Poincaré 1885, L. E. J. Brouwer 1912) and the Poincaré–Hopf index theorem (Heinz Hopf, 1926), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1\n//\n// Knob 1: Hue. Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together.\n// Knob 2: Speed. At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower.\n// Knob 3: Length. The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter.\n// Knob 4: Comb. How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them.\n// Buttons: K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The sphere sits in the top half, the doughnut in the bottom half.\nconst SX = 32, SY = 31, RS = 24.5;\nconst TX = 32, TY = 97, TR = 18, TQ = 8.2;\n// Roots spread evenly at the same density on both: the doughnut's area\n// 4 pi^2 R r against the sphere's 4 pi R^2.\nconst NS = 1100, NT = round((NS * PI * TR * TQ) / (RS * RS));\n\n// Fixed grain: a seeded generator used once, so the roots never move on the skin.\nlet seed = 0x9e3779b9;\nfunction rnd() {\n  seed = (seed + 0x6d2b79f5) | 0;\n  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\n// Sphere roots on a jittered Fibonacci spiral, unit vectors.\nconst SP = new Float32Array(NS * 3), SJ = new Float32Array(NS * 2);\nfor (let i = 0; i \u003c NS; i++) {\n  const y = 1 - (2 * (i + 0.2 + 0.6 * rnd())) / NS, r = sqrt(max(0, 1 - y * y)), a = i * 2.39996323 + (rnd() - 0.5) * 0.9 * (2 / sqrt(NS)) / max(r, 0.05);\n  SP[i * 3] = r * cos(a);\n  SP[i * 3 + 1] = y;\n  SP[i * 3 + 2] = r * sin(a);\n  SJ[i * 2] = 0.8 + 0.35 * rnd();\n  SJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// Doughnut roots: u round the ring, v round the tube, v drawn with density\n// R + r cos v so the hair is as thick inside the hole as outside.\nconst TP = new Float32Array(NT * 3), TN = new Float32Array(NT * 3), TU = new Float32Array(NT * 3), TV = new Float32Array(NT * 3), TJ = new Float32Array(NT * 2);\nfor (let i = 0; i \u003c NT; i++) {\n  const u = 2 * PI * ((i * 0.7548776662 + 0.3 * rnd() / NT * 40) % 1), F = (i * 0.5698402910 + 0.5 + (rnd() - 0.5) * 0.02) % 1;\n  let v = 2 * PI * F;\n  for (let k = 0; k \u003c 8; k++) v -= (TR * v + TQ * sin(v) - 2 * PI * TR * F) / (TR + TQ * cos(v));\n  const cu = cos(u), su = sin(u), cv = cos(v), sv = sin(v), rr = TR + TQ * cv, o = i * 3;\n  TP[o] = rr * cu, TP[o + 1] = rr * su, TP[o + 2] = TQ * sv;\n  TN[o] = cv * cu, TN[o + 1] = cv * su, TN[o + 2] = sv;\n  TU[o] = -su, TU[o + 1] = cu, TU[o + 2] = 0;\n  TV[o] = -sv * cu, TV[o + 1] = -sv * su, TV[o + 2] = cv;\n  TJ[i * 2] = 0.8 + 0.35 * rnd();\n  TJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// 3x3 rotations, row major.\nconst mul = (A, B) => {\n  const C = new Array(9);\n  for (let r = 0; r \u003c 3; r++) for (let c = 0; c \u003c 3; c++) C[r * 3 + c] = A[r * 3] * B[c] + A[r * 3 + 1] * B[3 + c] + A[r * 3 + 2] * B[6 + c];\n  return C;\n};\nconst rx = (a) => [1, 0, 0, 0, cos(a), -sin(a), 0, sin(a), cos(a)];\nconst ry = (a) => [cos(a), 0, sin(a), 0, 1, 0, -sin(a), 0, cos(a)];\nconst rz = (a) => [cos(a), -sin(a), 0, sin(a), cos(a), 0, 0, 0, 1];\n\n// Light from the upper left, in front; H halfway to the eye.\nconst LX = -0.45 / 0.996, LY = -0.55 / 0.996, LZ = 0.7 / 0.996;\nconst HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The combs the sphere goes through: how far apart its two cowlicks stand\n// (1 opposite each other, 0 merged into one zero of index 2) and the angle\n// of the doughnut's hair (0 along the ring, pi/2 along the tube).\nconst PROG = [[0.55, 0.12], [0, 0.85], [1, -0.55], [0.3, 0.4], [0, -0.9], [1, 0.25]];\n\n// The sphere's body turns about its own vertical axis, tipped toward the\n// eye; the field turns inside it on its own, from the angles a.\nconst bodyM = (T) => mul(rx(-0.42 + 0.12 * sin(T * 0.21)), ry(T * 0.6));\nconst fieldM = (a, T) => mul(rz(a[0] + T * 0.09), mul(rx(a[1] + 0.5 * sin(T * 0.05 + 1)), rz(a[2])));\n// The two zeros in field coordinates sit at w = +-t on the stereographic\n// plane, symmetric about the south pole; t = 1 puts them opposite. Out\n// come both as unit vectors in M's frame.\nfunction zeros(M, t) {\n  const t2 = t * t, Z = [];\n  for (const sg of [1, -1]) {\n    const fx = (2 * sg * t) / (1 + t2), fz = (t2 - 1) / (1 + t2);\n    Z.push(M[0] * fx + M[2] * fz, M[3] * fx + M[5] * fz, M[6] * fx + M[8] * fz);\n  }\n  return Z;\n}\n// A new comb is turned so that a cowlick faces the eye for most of the\n// seven units it lasts, both of them when they stand close enough.\nfunction aim(T, sep, from) {\n  let best = -9, pick = from;\n  for (let c = 0; c \u003c 40; c++) {\n    const a = from.map((v) => v + (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.3 * Math.random()));\n    let lo = 9, sum = 0;\n    for (let j = 0; j \u003c 5; j++) {\n      const Tj = T + 0.8 + j * 1.5, Z = zeros(mul(bodyM(Tj), fieldM(a, Tj)), sep), v = max(Z[2], Z[5]) + 0.5 * min(Z[2], Z[5]);\n      (lo = min(lo, v)), (sum += v);\n    }\n    const score = lo + sum / 5;\n    if (score > best) (best = score), (pick = a);\n  }\n  return pick;\n}\n\n// 3x5 digits, one row of three bits per line, top first.\nconst DIG2 = [7, 1, 7, 4, 7], DIG0 = [7, 5, 5, 5, 7];\nfunction digit(buf, rows, x0, y0, c) {\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++)\n      if ((rows[j] >> (2 - i)) & 1) {\n        const q = ((y0 + j) * W + x0 + i) * 3;\n        for (let k = 0; k \u003c 3; k++) buf[q + k] = 40 + 120 * c[k];\n      }\n}\n\nexport function setup(params) {\n  const a = aim(-0.8, PROG[0][0], [0, 0, 0]);\n  params.s = {\n    T: 0, clock: 0, step: 0, a: a.slice(), ta: a,\n    sep: PROG[0][0], al: PROG[0][1],\n    hue: 0, len: 8, th: PI / 4,\n    buf: new Float32Array(N * 3), zb: new Float32Array(N), zh: new Float32Array(N),\n    cs: new Float32Array(3), ct: new Float32Array(3), cg: new Float32Array(3),\n  };\n}\n\nfunction recomb(P) {\n  P.step = (P.step + 1) % PROG.length;\n  P.clock = 0;\n  P.ta = aim(P.T, PROG[P.step][0], P.ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.len = cl(k[2], 8, 13);\n  P.th = (PI / 4) * (1 + cl(k[3], -1, 1));\n  const dT = d * cl(k[1], 0.2, 3) * 0.5;\n  P.T += dT;\n  P.clock += dT;\n  if (input.btnPressed && input.btnPressed[0]) recomb(P);\n  else if (P.clock > 7) recomb(P);\n  const e = 1 - exp(-max(dT, d * 0.5) * 2.4), g = PROG[P.step];\n  for (let i = 0; i \u003c 3; i++) P.a[i] += (P.ta[i] - P.a[i]) * e;\n  P.sep += (g[0] - P.sep) * e;\n  P.al += (g[1] - P.al) * e;\n}\n\n// One hair: root (x, y, z) on screen, direction (hx, hy, hz) times its\n// length, colour (r, g, b) at the tip; the root end is darker.\nfunction hair(P, x, y, z, hx, hy, hz, r, g, b) {\n  const n = max(2, ceil(Math.hypot(hx, hy) * 1.4) + 1), buf = P.buf, zb = P.zb, zh = P.zh;\n  for (let j = 0; j \u003c n; j++) {\n    const s = j / (n - 1), X = floor(x + hx * s), Y = floor(y + hy * s);\n    if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n    const p = Y * W + X, Z = z + hz * s;\n    if (Z \u003c zb[p] - 1.2 || Z \u003c= zh[p]) continue;\n    zh[p] = Z;\n    const m = 0.22 + 0.78 * s * s, q = p * 3;\n    buf[q] = r * m, buf[q + 1] = g * m, buf[q + 2] = b * m;\n  }\n}\n\n// Hair light after Kajiya and Kay: a fibre is lit by how square it lies to\n// the light and shines where it lies square to the half vector.\nfunction shade(tx, ty, tz, nx, ny, nz) {\n  const tl = tx * LX + ty * LY + tz * LZ, th = tx * HX + ty * HY + tz * HZ, nl = nx * LX + ny * LY + nz * LZ;\n  const lam = 0.22 + 0.78 * max(0, nl), dif = sqrt(max(0, 1 - tl * tl)), sp = (1 - th * th) ** 12;\n  return [lam * (0.35 + 0.65 * dif), 0.75 * sp * max(0, nl + 0.2)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf, zb = P.zb, zh = P.zh, cs = P.cs, ct = P.ct, cg = P.cg, T = P.T;\n  buf.fill(0);\n  zb.fill(-1e9);\n  zh.fill(-1e9);\n  hsv(P.hue + 0.6, 0.75, 1, cs, 0);\n  hsv(P.hue + 0.47, 0.8, 1, ct, 0);\n  hsv(P.hue + 0.12, 0.6, 1, cg, 0);\n  const pulse = 0.85 + 0.15 * sin(T * 3.1);\n\n  // The sphere.\n  const Mb = bodyM(T), Rf = fieldM(P.a, T), M = mul(Mb, Rf), t = P.sep, t2 = t * t, Z = zeros(M, t);\n  // Skin: dark, with the cowlicks glowing through.\n  const R2 = RS * RS;\n  for (let y = max(0, floor(SY - RS)); y \u003c= min(H - 1, ceil(SY + RS)); y++)\n    for (let x = max(0, floor(SX - RS)); x \u003c= min(W - 1, ceil(SX + RS)); x++) {\n      const dx = x + 0.5 - SX, dy = y + 0.5 - SY, rr = dx * dx + dy * dy;\n      if (rr >= R2) continue;\n      const dz = sqrt(R2 - rr), nx = dx / RS, ny = dy / RS, nz = dz / RS, p = y * W + x, q = p * 3;\n      zb[p] = dz;\n      const lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      const gl = exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.05) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.05);\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * (cs[c] * lam + cg[c] * min(1, gl) * 0.9 * pulse);\n    }\n  // The field: v(w) = e^{i theta} (w^2 - t^2) on the plane, carried back to\n  // the sphere. Its only zeros are w = t and w = -t, each of index 1; at\n  // t = 0 they merge into one zero of index 2. There is always one.\n  const kc = cos(P.th), ks = sin(P.th), L = P.len, lb = 0.35 - 0.02 * (L - 8);\n  for (let i = 0; i \u003c NS; i++) {\n    const o = i * 3, bx = SP[o], by = SP[o + 1], bz = SP[o + 2];\n    const nx = Mb[0] * bx + Mb[1] * by + Mb[2] * bz, ny = Mb[3] * bx + Mb[4] * by + Mb[5] * bz, nz = Mb[6] * bx + Mb[7] * by + Mb[8] * bz;\n    if (nz \u003c -0.3) continue;\n    // Into field coordinates: f = Rf^T b.\n    const fx = Rf[0] * bx + Rf[3] * by + Rf[6] * bz, fy = Rf[1] * bx + Rf[4] * by + Rf[7] * bz, fz = Rf[2] * bx + Rf[5] * by + Rf[8] * bz;\n    const den = max(1e-7, 1 - fz), a = fx / den, b = fy / den, re = a * a - b * b - t2, im = 2 * a * b;\n    const va = kc * re - ks * im, vb = ks * re + kc * im, s = 1 + a * a + b * b, qq = (a * va + b * vb) / s;\n    let gx = va - 2 * a * qq, gy = vb - 2 * b * qq, gz = 2 * qq;\n    const gn = Math.hypot(gx, gy, gz) || 1;\n    gx /= gn, gy /= gn, gz /= gn;\n    // Field direction on screen.\n    const dx = M[0] * gx + M[1] * gy + M[2] * gz, dy = M[3] * gx + M[4] * gy + M[5] * gz, dz = M[6] * gx + M[7] * gy + M[8] * gz;\n    // Near a zero the hair stands up and glows.\n    const gl = min(1, exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.07) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.07));\n    const lift = lb + 0.8 * gl, cL = cos(lift), sL = sin(lift);\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * SJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * SJ[i * 2] * li, w = 255 * sp, gg = 255 * gl * pulse;\n    hair(P, SX + RS * nx, SY + RS * ny, RS * nz, hx * len, hy * len, hz * len,\n      cs[0] * br + w + cg[0] * gg, cs[1] * br + w + cg[1] * gg, cs[2] * br + w + cg[2] * gg);\n  }\n\n  // The doughnut, seen from about 40 degrees above, spinning on its\n  // own axis and swaying. Its hair lies along cos(al) e_u + sin(al) e_v: no\n  // zero anywhere, which the torus allows because its Euler characteristic is 0.\n  const Mt = mul(ry(0.3 * sin(T * 0.13)), mul(rx(0.84 + 0.08 * sin(T * 0.17)), rz(T * 0.5)));\n  const RO = TR + TQ, ox = Mt[6], oy = Mt[7], oz = Mt[8];\n  for (let y = max(0, floor(TY - RO)); y \u003c= min(H - 1, ceil(TY + RO)); y++)\n    for (let x = max(0, floor(TX - RO)); x \u003c= min(W - 1, ceil(TX + RO)); x++) {\n      const dx = x + 0.5 - TX, dy = y + 0.5 - TY;\n      if (dx * dx + dy * dy >= RO * RO) continue;\n      // March a ray into the doughnut's own coordinates.\n      const z0 = RO + 1;\n      const px0 = Mt[0] * dx + Mt[3] * dy + Mt[6] * z0, py0 = Mt[1] * dx + Mt[4] * dy + Mt[7] * z0, pz0 = Mt[2] * dx + Mt[5] * dy + Mt[8] * z0;\n      let tt = 0, hit = false, px = 0, py = 0, pz = 0;\n      for (let it = 0; it \u003c 40 && tt \u003c 2 * z0; it++) {\n        px = px0 - ox * tt, py = py0 - oy * tt, pz = pz0 - oz * tt;\n        const qd = sqrt(px * px + py * py) - TR, dd = sqrt(qd * qd + pz * pz) - TQ;\n        if (dd \u003c 0.03) {\n          hit = true;\n          break;\n        }\n        tt += dd;\n      }\n      if (!hit) continue;\n      const rl = sqrt(px * px + py * py) || 1, bx = (px - (TR * px) / rl) / TQ, by = (py - (TR * py) / rl) / TQ, bz = pz / TQ;\n      const nx = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, ny = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, nz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n      const p = y * W + x, q = p * 3, lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      zb[p] = z0 - tt;\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * ct[c] * lam;\n    }\n  const ca = cos(P.al), sa = sin(P.al), cL = cos(lb), sL = sin(lb);\n  for (let i = 0; i \u003c NT; i++) {\n    const o = i * 3, bnx = TN[o], bny = TN[o + 1], bnz = TN[o + 2];\n    const nx = Mt[0] * bnx + Mt[1] * bny + Mt[2] * bnz, ny = Mt[3] * bnx + Mt[4] * bny + Mt[5] * bnz, nz = Mt[6] * bnx + Mt[7] * bny + Mt[8] * bnz;\n    const gx = ca * TU[o] + sa * TV[o], gy = ca * TU[o + 1] + sa * TV[o + 1], gz = ca * TU[o + 2] + sa * TV[o + 2];\n    const dx = Mt[0] * gx + Mt[1] * gy + Mt[2] * gz, dy = Mt[3] * gx + Mt[4] * gy + Mt[5] * gz, dz = Mt[6] * gx + Mt[7] * gy + Mt[8] * gz;\n    const bx = TP[o], by = TP[o + 1], bz = TP[o + 2];\n    const X = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, Y = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, Zz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * TJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * TJ[i * 2] * li, w = 255 * sp;\n    hair(P, TX + X, TY + Y, Zz, hx * len, hy * len, hz * len, ct[0] * br + w, ct[1] * br + w, ct[2] * br + w);\n  }\n\n  // The Euler characteristic beside each: 2 for the sphere, 0 for the torus.\n  digit(buf, DIG2, 59, 2, cs);\n  digit(buf, DIG0, 59, 121, ct);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower."},{"name":"Length","min":8,"max":13,"about":"The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter."},{"name":"Comb","min":-1,"max":1,"about":"How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them."}],"start":[0,2,8,0.06],"measures":{"motion":1.5705,"detail":0.1196,"edges":0.4915,"complexity":1.6126,"coverage":0.5237,"colour":0.1866,"drift":0.0881},"knobResponse":[0.0995,0.1196,0.1223,0.076]},{"slug":"halftone","title":"Halftone","family":"print","round":2,"note":"떠도는 등불 넷이 비추는 저녁 하늘을 잉크마다 각도가 다른 망점으로 찍어요. 점은 농도만큼 자라고 줄며, K1 이 CMY, 리소, 벤데이, 신문 잉크를 골라요.","idea":"A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.","buttons":"K1 tap knocks the plates out of register, and they settle back.","code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-halftone","type":"code","name":"halftone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint."},{"name":"Speed","min":0.1,"max":5,"about":"How fast the lights drift under the screens."},{"name":"Screen","min":8,"max":13,"about":"How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones."},{"name":"Turn","min":0,"max":30,"about":"Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot."}],"start":[0,2,8,0.06],"measures":{"motion":0.0294,"detail":0.0277,"edges":0.6406,"complexity":0.1753,"coverage":0.9983,"colour":0.4355,"drift":0.0403},"knobResponse":[0.2427,0.1303,0.1431,0.1473]},{"slug":"hammersley-lines","title":"Hammersley Lines","family":"algo","round":32,"note":"왼쪽 아래를 원점으로 점이 빗방울처럼 하나씩 떨어져 쌓여요. 원점에서 그 칸까지의 상자 안에서 오른쪽 위로 이어지는 가장 긴 점 사슬의 길이로 띠를 칠해서, 점마다 꺾이는 계단 등고선이 쌍곡선 xy = 일정 꼴로 모여요. 오른쪽 위 모서리까지 가장 긴 사슬은 금빛 길이에요.","idea":"Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.","buttons":"K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.","code":"// ===== Patternflow pattern =====\n// Title:   Hammersley Lines\n// Family:  algo\n// Idea:    Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ulam's problem and Hammersley's process (John Hammersley, 1972), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1\n//\n// Knob 1: Hue. Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white.\n// Knob 2: Speed. How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins.\n// Knob 3: Points. How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000.\n// Knob 4: Bands. How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler.\n// Buttons: K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.\n\nconst W = 64, H = 128, N = W * H, MAXN = 1100;\nconst { floor, exp, log, max, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Drops fall this many rows a second at Speed 2.\nconst FALL = 320;\nconst HOLD = 1.2;\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nfunction clear(P) {\n  P.n = 0;\n  P.nd = 0;\n  P.made = 0;\n  P.next = 0;\n  P.hold = -1;\n  P.top = 0;\n  P.M.fill(0);\n  P.prevM.fill(0);\n  P.glow.fill(0);\n  P.dirty = true;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    px: F(MAXN), py: F(MAXN), pt: F(MAXN), ell: I(MAXN), pred: I(MAXN), byX: I(MAXN), byY: I(MAXN), rank: I(MAXN), chain: I(MAXN),\n    dx: F(MAXN), dy: F(MAXN), dt0: F(MAXN),\n    fen: I(MAXN + 1), fenI: I(MAXN + 1), cell: I(N), M: I(N), prevM: I(N), glow: F(N),\n    gold: new Uint8Array(N), oldR: F(N), oldG: F(N), oldB: F(N), cr: F(N), cg: F(N), cb: F(N),\n    n: 0, nd: 0, made: 0, next: 0, hold: -1, clock: 0, oldA: 0, target: 200, hue: 0, speed: 2, fill: 0.3, top: 0, dirty: true,\n  };\n  clear(params.s);\n}\n\n// Puts point k into a list kept sorted by one coordinate.\nfunction insert(list, key, k) {\n  let lo = 0, hi = k;\n  while (lo \u003c hi) {\n    const m = (lo + hi) >> 1;\n    if (key[list[m]] \u003c key[k]) lo = m + 1;\n    else hi = m;\n  }\n  for (let j = k; j > lo; j--) list[j] = list[j - 1];\n  list[lo] = k;\n}\n\n// A drop lands and becomes a point.\nfunction land(P, x, y) {\n  const k = P.n++;\n  (P.px[k] = x), (P.py[k] = y), (P.pt[k] = P.clock);\n  insert(P.byX, P.px, k);\n  insert(P.byY, P.py, k);\n  P.dirty = true;\n}\n\n// Longest chains. Taking the points left to right, the longest chain ending at\n// a point is one more than the longest ending at any earlier point below it;\n// a Fenwick tree over the points' height ranks keeps the best so far below\n// every height.\n// Then L on the pixel grid: L(x, y) is the longest chain among the points in\n// the box from the origin to the pixel's top right corner.\nfunction chains(P) {\n  const { px, py, ell, pred, byX, byY, rank, fen, fenI, cell, M, chain } = P, n = P.n;\n  for (let a = 0; a \u003c n; a++) rank[byY[a]] = a;\n  fen.fill(0);\n  fenI.fill(-1);\n  let best = 0, bestI = -1;\n  for (let a = 0; a \u003c n; a++) {\n    const p = byX[a], b = rank[p];\n    let l = 0, li = -1;\n    for (let i = b; i > 0; i -= i & -i) if (fen[i] > l) (l = fen[i]), (li = fenI[i]);\n    ell[p] = l + 1;\n    pred[p] = li;\n    for (let i = b + 1; i \u003c= n; i += i & -i) if (fen[i] \u003c l + 1) (fen[i] = l + 1), (fenI[i] = p);\n    if (l + 1 > best) (best = l + 1), (bestI = p);\n  }\n  P.top = best;\n  let c = 0;\n  for (let p = bestI; p >= 0; p = pred[p]) chain[c++] = p;\n  cell.fill(0);\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]);\n    if (ell[p] > cell[i]) cell[i] = ell[p];\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let v = cell[i];\n      if (x > 0 && M[i - 1] > v) v = M[i - 1];\n      if (j > 0 && M[i - W] > v) v = M[i - W];\n      M[i] = v;\n    }\n  // The longest chain as a gold path from the origin through its points to\n  // the far corner.\n  const { gold } = P;\n  gold.fill(0);\n  if (!c) return;\n  let x0 = 0, y0 = 0;\n  for (let k = c - 1; k >= -1; k--) {\n    const x1 = k >= 0 ? px[chain[k]] : W - 0.5, y1 = k >= 0 ? py[chain[k]] : H - 0.5;\n    const steps = max(1, Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 2));\n    for (let s = 0; s \u003c= steps; s++) {\n      const u = s / steps, xx = floor(x0 + (x1 - x0) * u), yy = floor(y0 + (y1 - y0) * u);\n      gold[yy * W + xx] = 1;\n    }\n    (x0 = x1), (y0 = y1);\n  }\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  clear(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 200, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  P.target = floor(cl(kv[2], 200, 1000));\n  P.fill = 0.9 * cl(kv[3], 0, 1) ** 0.4;\n  P.clock += d;\n  P.oldA *= exp(-d / 0.4);\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  // Poisson arrivals at the top of the panel: target points in 12 / Speed\n  // seconds. Each falls straight down to its place and lands there.\n  const rate = (P.target * P.speed) / 12;\n  if (P.hold \u003c 0) {\n    P.next -= d;\n    while (P.next \u003c= 0 && P.made \u003c P.target) {\n      const k = P.nd++;\n      (P.dx[k] = Math.random() * W), (P.dy[k] = Math.random() * H), (P.dt0[k] = P.clock + P.next);\n      P.made++;\n      P.next += -log(1 - Math.random()) / rate;\n    }\n  }\n  // Drops: dy is the landing height from the bottom; a drop starts at the top.\n  let w = 0;\n  for (let k = 0; k \u003c P.nd; k++) {\n    const fallen = (P.clock - P.dt0[k]) * FALL * (0.6 + 0.2 * P.speed);\n    if (fallen >= H - P.dy[k]) land(P, P.dx[k], P.dy[k]);\n    else (P.dx[w] = P.dx[k]), (P.dy[w] = P.dy[k]), (P.dt0[w] = P.dt0[k]), w++;\n  }\n  P.nd = w;\n  if (P.dirty) {\n    P.prevM.set(P.M);\n    chains(P);\n    // A landing lifts L by one wherever the new point lengthens the best\n    // chain; the level lines there flash white as they move.\n    const { M, prevM, glow } = P;\n    for (let i = 0; i \u003c N; i++) if (M[i] !== prevM[i]) glow[i] = 1;\n    P.dirty = false;\n  }\n  const g = exp(-d / 0.35), { glow } = P;\n  for (let i = 0; i \u003c N; i++) glow[i] *= g;\n  if (P.hold \u003c 0 && P.made >= P.target && P.nd === 0) P.hold = 0;\n  else if (P.hold >= 0 && (P.hold += d) > HOLD) restart(P);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { M, glow, gold, px, py, pt, cr, cg, cb, oldR, oldG, oldB } = P;\n  const h0 = P.hue, fill = P.fill, oa = P.oldA, now = P.clock;\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, L = M[i];\n      let R = 0, G = 0, B = 0;\n      const line = (x > 0 && M[i - 1] !== L) || (j > 0 && M[i - W] !== L);\n      // Band colour swings between cyan and magenta and back every 24 levels.\n      const ph = (L / 24) % 1, hue = h0 + 0.5 + 0.38 * (ph \u003c 0.5 ? 2 * ph : 2 - 2 * ph);\n      if (L > 0) {\n        hsv(hue, 0.85, fill * (0.55 + 0.45 * (L & 1)));\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      if (line) {\n        const gw = glow[i];\n        hsv(hue, 0.5 - 0.2 * gw, 0.5 + 0.45 * gw);\n        (R = max(R, C[0])), (G = max(G, C[1])), (B = max(B, C[2]));\n      }\n      if (gold[i]) {\n        hsv(h0 + 0.12, 0.7, 1);\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      cr[i] = R * 255;\n      cg[i] = G * 255;\n      cb[i] = B * 255;\n    }\n  // Points: white, brightest on landing.\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]), v = 190 + 65 * exp(-(now - pt[p]) / 0.4);\n    (cr[i] = max(cr[i], v)), (cg[i] = max(cg[i], v)), (cb[i] = max(cb[i], v));\n  }\n  // Falling drops: a short streak above the head.\n  const sp = FALL * (0.6 + 0.2 * P.speed);\n  for (let k = 0; k \u003c P.nd; k++) {\n    const head = H - (now - P.dt0[k]) * sp, x = floor(P.dx[k]);\n    for (let s = 0; s \u003c 4; s++) {\n      const y = floor(head) + s;\n      if (y \u003c 0 || y >= H || y \u003c P.dy[k]) continue;\n      const i = y * W + x, v = 200 - 45 * s;\n      (cr[i] = max(cr[i], v * 0.8)), (cg[i] = max(cg[i], v * 0.9)), (cb[i] = max(cb[i], v));\n    }\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let R = cr[i], G = cg[i], B = cb[i];\n      if (oa > 0.01) (R = max(R, oldR[i] * oa)), (G = max(G, oldG[i] * oa)), (B = max(B, oldB[i] * oa));\n      display.setPixel(x, H - 1 - j, R, G, B);\n    }\n}\n","layer":{"id":"layer-hammersley-lines","type":"code","name":"hammersley-lines","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hammersley Lines\n// Family:  algo\n// Idea:    Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ulam's problem and Hammersley's process (John Hammersley, 1972), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1\n//\n// Knob 1: Hue. Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white.\n// Knob 2: Speed. How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins.\n// Knob 3: Points. How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000.\n// Knob 4: Bands. How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler.\n// Buttons: K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.\n\nconst W = 64, H = 128, N = W * H, MAXN = 1100;\nconst { floor, exp, log, max, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Drops fall this many rows a second at Speed 2.\nconst FALL = 320;\nconst HOLD = 1.2;\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nfunction clear(P) {\n  P.n = 0;\n  P.nd = 0;\n  P.made = 0;\n  P.next = 0;\n  P.hold = -1;\n  P.top = 0;\n  P.M.fill(0);\n  P.prevM.fill(0);\n  P.glow.fill(0);\n  P.dirty = true;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    px: F(MAXN), py: F(MAXN), pt: F(MAXN), ell: I(MAXN), pred: I(MAXN), byX: I(MAXN), byY: I(MAXN), rank: I(MAXN), chain: I(MAXN),\n    dx: F(MAXN), dy: F(MAXN), dt0: F(MAXN),\n    fen: I(MAXN + 1), fenI: I(MAXN + 1), cell: I(N), M: I(N), prevM: I(N), glow: F(N),\n    gold: new Uint8Array(N), oldR: F(N), oldG: F(N), oldB: F(N), cr: F(N), cg: F(N), cb: F(N),\n    n: 0, nd: 0, made: 0, next: 0, hold: -1, clock: 0, oldA: 0, target: 200, hue: 0, speed: 2, fill: 0.3, top: 0, dirty: true,\n  };\n  clear(params.s);\n}\n\n// Puts point k into a list kept sorted by one coordinate.\nfunction insert(list, key, k) {\n  let lo = 0, hi = k;\n  while (lo \u003c hi) {\n    const m = (lo + hi) >> 1;\n    if (key[list[m]] \u003c key[k]) lo = m + 1;\n    else hi = m;\n  }\n  for (let j = k; j > lo; j--) list[j] = list[j - 1];\n  list[lo] = k;\n}\n\n// A drop lands and becomes a point.\nfunction land(P, x, y) {\n  const k = P.n++;\n  (P.px[k] = x), (P.py[k] = y), (P.pt[k] = P.clock);\n  insert(P.byX, P.px, k);\n  insert(P.byY, P.py, k);\n  P.dirty = true;\n}\n\n// Longest chains. Taking the points left to right, the longest chain ending at\n// a point is one more than the longest ending at any earlier point below it;\n// a Fenwick tree over the points' height ranks keeps the best so far below\n// every height.\n// Then L on the pixel grid: L(x, y) is the longest chain among the points in\n// the box from the origin to the pixel's top right corner.\nfunction chains(P) {\n  const { px, py, ell, pred, byX, byY, rank, fen, fenI, cell, M, chain } = P, n = P.n;\n  for (let a = 0; a \u003c n; a++) rank[byY[a]] = a;\n  fen.fill(0);\n  fenI.fill(-1);\n  let best = 0, bestI = -1;\n  for (let a = 0; a \u003c n; a++) {\n    const p = byX[a], b = rank[p];\n    let l = 0, li = -1;\n    for (let i = b; i > 0; i -= i & -i) if (fen[i] > l) (l = fen[i]), (li = fenI[i]);\n    ell[p] = l + 1;\n    pred[p] = li;\n    for (let i = b + 1; i \u003c= n; i += i & -i) if (fen[i] \u003c l + 1) (fen[i] = l + 1), (fenI[i] = p);\n    if (l + 1 > best) (best = l + 1), (bestI = p);\n  }\n  P.top = best;\n  let c = 0;\n  for (let p = bestI; p >= 0; p = pred[p]) chain[c++] = p;\n  cell.fill(0);\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]);\n    if (ell[p] > cell[i]) cell[i] = ell[p];\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let v = cell[i];\n      if (x > 0 && M[i - 1] > v) v = M[i - 1];\n      if (j > 0 && M[i - W] > v) v = M[i - W];\n      M[i] = v;\n    }\n  // The longest chain as a gold path from the origin through its points to\n  // the far corner.\n  const { gold } = P;\n  gold.fill(0);\n  if (!c) return;\n  let x0 = 0, y0 = 0;\n  for (let k = c - 1; k >= -1; k--) {\n    const x1 = k >= 0 ? px[chain[k]] : W - 0.5, y1 = k >= 0 ? py[chain[k]] : H - 0.5;\n    const steps = max(1, Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 2));\n    for (let s = 0; s \u003c= steps; s++) {\n      const u = s / steps, xx = floor(x0 + (x1 - x0) * u), yy = floor(y0 + (y1 - y0) * u);\n      gold[yy * W + xx] = 1;\n    }\n    (x0 = x1), (y0 = y1);\n  }\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  clear(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 200, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  P.target = floor(cl(kv[2], 200, 1000));\n  P.fill = 0.9 * cl(kv[3], 0, 1) ** 0.4;\n  P.clock += d;\n  P.oldA *= exp(-d / 0.4);\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  // Poisson arrivals at the top of the panel: target points in 12 / Speed\n  // seconds. Each falls straight down to its place and lands there.\n  const rate = (P.target * P.speed) / 12;\n  if (P.hold \u003c 0) {\n    P.next -= d;\n    while (P.next \u003c= 0 && P.made \u003c P.target) {\n      const k = P.nd++;\n      (P.dx[k] = Math.random() * W), (P.dy[k] = Math.random() * H), (P.dt0[k] = P.clock + P.next);\n      P.made++;\n      P.next += -log(1 - Math.random()) / rate;\n    }\n  }\n  // Drops: dy is the landing height from the bottom; a drop starts at the top.\n  let w = 0;\n  for (let k = 0; k \u003c P.nd; k++) {\n    const fallen = (P.clock - P.dt0[k]) * FALL * (0.6 + 0.2 * P.speed);\n    if (fallen >= H - P.dy[k]) land(P, P.dx[k], P.dy[k]);\n    else (P.dx[w] = P.dx[k]), (P.dy[w] = P.dy[k]), (P.dt0[w] = P.dt0[k]), w++;\n  }\n  P.nd = w;\n  if (P.dirty) {\n    P.prevM.set(P.M);\n    chains(P);\n    // A landing lifts L by one wherever the new point lengthens the best\n    // chain; the level lines there flash white as they move.\n    const { M, prevM, glow } = P;\n    for (let i = 0; i \u003c N; i++) if (M[i] !== prevM[i]) glow[i] = 1;\n    P.dirty = false;\n  }\n  const g = exp(-d / 0.35), { glow } = P;\n  for (let i = 0; i \u003c N; i++) glow[i] *= g;\n  if (P.hold \u003c 0 && P.made >= P.target && P.nd === 0) P.hold = 0;\n  else if (P.hold >= 0 && (P.hold += d) > HOLD) restart(P);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { M, glow, gold, px, py, pt, cr, cg, cb, oldR, oldG, oldB } = P;\n  const h0 = P.hue, fill = P.fill, oa = P.oldA, now = P.clock;\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, L = M[i];\n      let R = 0, G = 0, B = 0;\n      const line = (x > 0 && M[i - 1] !== L) || (j > 0 && M[i - W] !== L);\n      // Band colour swings between cyan and magenta and back every 24 levels.\n      const ph = (L / 24) % 1, hue = h0 + 0.5 + 0.38 * (ph \u003c 0.5 ? 2 * ph : 2 - 2 * ph);\n      if (L > 0) {\n        hsv(hue, 0.85, fill * (0.55 + 0.45 * (L & 1)));\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      if (line) {\n        const gw = glow[i];\n        hsv(hue, 0.5 - 0.2 * gw, 0.5 + 0.45 * gw);\n        (R = max(R, C[0])), (G = max(G, C[1])), (B = max(B, C[2]));\n      }\n      if (gold[i]) {\n        hsv(h0 + 0.12, 0.7, 1);\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      cr[i] = R * 255;\n      cg[i] = G * 255;\n      cb[i] = B * 255;\n    }\n  // Points: white, brightest on landing.\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]), v = 190 + 65 * exp(-(now - pt[p]) / 0.4);\n    (cr[i] = max(cr[i], v)), (cg[i] = max(cg[i], v)), (cb[i] = max(cb[i], v));\n  }\n  // Falling drops: a short streak above the head.\n  const sp = FALL * (0.6 + 0.2 * P.speed);\n  for (let k = 0; k \u003c P.nd; k++) {\n    const head = H - (now - P.dt0[k]) * sp, x = floor(P.dx[k]);\n    for (let s = 0; s \u003c 4; s++) {\n      const y = floor(head) + s;\n      if (y \u003c 0 || y >= H || y \u003c P.dy[k]) continue;\n      const i = y * W + x, v = 200 - 45 * s;\n      (cr[i] = max(cr[i], v * 0.8)), (cg[i] = max(cg[i], v * 0.9)), (cb[i] = max(cb[i], v));\n    }\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let R = cr[i], G = cg[i], B = cb[i];\n      if (oa > 0.01) (R = max(R, oldR[i] * oa)), (G = max(G, oldG[i] * oa)), (B = max(B, oldB[i] * oa));\n      display.setPixel(x, H - 1 - j, R, G, B);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins."},{"name":"Points","min":200,"max":1000,"about":"How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000."},{"name":"Bands","min":0,"max":1,"about":"How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler."}],"start":[0,2,200,0.06],"measures":{"motion":0.4589,"detail":0.1005,"edges":0.9193,"complexity":0.242,"coverage":0.9226,"colour":0.2106,"drift":0.1453},"knobResponse":[0.1723,0.2043,0.2559,0.3087]},{"slug":"hanging-scroll","title":"Hanging Scroll","family":"paper","round":23,"note":"어두운 도코노마 벽의 못에 족자가 걸리고, 아래 굴대가 내려가며 비단 표구 속 상아빛 종이에 그린 먹 산수를 한 줄씩 드러내요. 안개 낀 봉우리 아래 소나무와 폭포, 초가와 쪽배가 있고 붉은 낙관이 찍혀 있어요. 외풍에 조금 흔들리다 아래부터 말려 올라가면 바람 맞는 대나무가 내려오고, 달 아래 홍매와 파도 위 학이 뒤를 이어요.","idea":"A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.","buttons":"K1 tap rolls the scroll up now and unrolls the next painting.","code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","layer":{"id":"layer-hanging-scroll","type":"code","name":"hanging-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half."},{"name":"Painting","min":0,"max":3,"about":"Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down."},{"name":"Ink","min":0,"max":1,"about":"How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.177,"detail":0.0295,"edges":0.2326,"complexity":1.3758,"coverage":0.4677,"colour":0.1211,"drift":0.2049},"knobResponse":[0.0845,0.2,0.0646,0.0324]},{"slug":"harmonograph","title":"Harmonograph","family":"line","round":1,"note":"단순한 비에서 조금씩 어긋난 진자 셋이 닫히지 않는 그림을 그리고, 멎어 가며 가운데로 감겨 들어가요.","idea":"Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.","buttons":"K1 tap gives the pendulums a fresh push.","code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","layer":{"id":"layer-harmonograph","type":"code","name":"harmonograph","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the fresh line; older line turns a little round the wheel as it fades."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the pen travels; a slow pen's line lasts longer."},{"name":"Ratio","min":0,"max":7,"about":"Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune."},{"name":"Damping","min":0.02,"max":0.4,"about":"How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds."}],"start":[0,2,0,0.06],"measures":{"motion":0.0325,"detail":0.0469,"edges":0.3334,"complexity":0.8432,"coverage":0.2444,"colour":0.1802,"drift":0.053},"knobResponse":[0.0712,0.0419,0.0758,0.0561]},{"slug":"harp","title":"Harp","family":"music","round":16,"note":"무대에 선 페달 하프가 패널 높이를 다 채우고, 보이지 않는 하프 주자가 뜯은 줄이 렌즈 꼴로 번졌다가 잦아들어요. K3 은 펼친화음, 굴린 화음, 하모닉스, 글리산도 가운데 하나를 고르고, K1 을 누르면 29줄을 다 훑는 글리산도가 올라갔다 내려와요.","idea":"A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.","buttons":"K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.","code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","layer":{"id":"layer-harp","type":"code","name":"harp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210."},{"name":"Figure","min":0,"max":3,"about":"What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass."},{"name":"Damp","min":0,"max":1,"about":"At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds."}],"start":[0,2,0,0.06],"measures":{"motion":0.151,"detail":0.0758,"edges":0.4257,"complexity":1.512,"coverage":0.8852,"colour":0.2261,"drift":0.0747},"knobResponse":[0.0708,0.0671,0.0617,0.0595]},{"slug":"heawood-torus","title":"Heawood Torus","family":"topology","round":36,"note":"세로로 긴 토러스가 천천히 돌며 헤우드의 지도를 보여 줘요. 일곱 나라가 저마다 나머지 여섯과 모두 맞닿아서, 구 위의 지도와 달리 이 지도는 일곱 색이 있어야 칠해져요. K3 은 구멍을 넓혀 굵은 관을 가는 고리로 만들고, K1 을 누르면 여섯 초 동안 일곱 수도와 그 사이 길 21개가 흰 선으로 그려져요.","idea":"A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.","buttons":"K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.","code":"// ===== Patternflow pattern =====\n// Title:   Heawood Torus\n// Family:  topology\n// Idea:    A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Heawood's seven-colour map on the torus (Percy Heawood, 1890), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1\n//\n// Knob 1: Hue. Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red.\n// Knob 2: Speed. How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s.\n// Knob 3: Hole. The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall.\n// Knob 4: Tilt. How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above.\n// Buttons: K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sin, cos, abs, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The plane tiled by hexagons, the hexagon at axial (a, b) coloured\n// (a + 3b) mod 7. Its six neighbours sit at (+-1, 0), (0, +-1) and\n// +-(1, -1), so their colours differ from its own by +-1, +-3 and +-2: all\n// six other colours, once each. The colouring repeats on the lattice L of\n// (a, b) with a + 3b = 0 mod 7, which has index 7, so the torus plane / L\n// holds exactly one hexagon of each colour, and each touches the other six.\n// L is spanned by E1 = (2, -3) and E2 = (1, 2) (determinant 7); of all the\n// bases of L these two shear the hexagons least on the long, thin parameter\n// square of this torus.\nconst E1A = 2, E1B = -3, E2A = 1, E2B = 2;\n\n// Samples round the core curve and round the tube; samples along each road.\nconst NU = 600, NV = 120, NS = NU * NV, NR = 200;\n// The outer half width of the torus in LEDs, and its half height before it leans.\nconst RO = 31, HALF = 63;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The country at fractional axial coordinates (qa, qb): round to the nearest\n// hexagon centre in cube coordinates, then colour it.\nfunction country(qa, qb) {\n  const x = qa, z = qb, y = -x - z;\n  let rx = round(x), ry = round(y), rz = round(z);\n  const dx = abs(rx - x), dy = abs(ry - y), dz = abs(rz - z);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  return (((rx + 3 * rz) % 7) + 7) % 7;\n}\n\n// The surface: a tube of radius r round a stadium, two half circles of\n// radius rc joined by straights 2 ly long, standing up in the x-y plane.\n// (U, V) in the unit square is the fraction of the way round the stadium and\n// round the tube. core() writes the point of the stadium at U and its\n// outward normal in the plane, (cx, cy, ox, oy), at out[o..o+3]; the surface\n// point is (cx + r cos v ox, cy + r cos v oy, r sin v) with v = 2 pi V, and\n// its normal (cos v ox, cos v oy, sin v).\nfunction core(S, U, out, o) {\n  const rc = S.rc, ly = S.ly;\n  let s = (U - floor(U)) * S.per, cx, cy, ox, oy;\n  if (s \u003c 2 * ly) (cx = rc), (cy = -ly + s), (ox = 1), (oy = 0);\n  else if ((s -= 2 * ly) \u003c PI * rc) {\n    const a = s / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = ly + rc * oy);\n  } else if ((s -= PI * rc) \u003c 2 * ly) (cx = -rc), (cy = ly - s), (ox = -1), (oy = 0);\n  else {\n    const a = PI + (s - 2 * ly) / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = -ly + rc * oy);\n  }\n  out[o] = cx;\n  out[o + 1] = cy;\n  out[o + 2] = ox;\n  out[o + 3] = oy;\n}\n\n// The plane point U E1 + V E2 is the one painted at (U, V), so the square's\n// sides go to E1 and E2 and the map closes up on the torus. Back the other\n// way, (qa, qb) lands at U = (2 qa - qb) / 7, V = (3 qa + 2 qb) / 7.\nfunction build(S) {\n  S.rc = RO / (1 + S.ratio);\n  S.r = S.rc * S.ratio;\n  S.ly = HALF - RO;\n  S.per = 4 * S.ly + TAU * S.rc;\n  const { cc, tc, ts, cid, road } = S;\n  for (let j = 0; j \u003c NV; j++) {\n    tc[j] = cos((TAU * (j + 0.5)) / NV);\n    ts[j] = sin((TAU * (j + 0.5)) / NV);\n  }\n  for (let i = 0; i \u003c NU; i++) {\n    const U = (i + 0.5) / NU;\n    core(S, U, cc, 4 * i);\n    for (let j = 0; j \u003c NV; j++) cid[i * NV + j] = country(U * E1A + (j + 0.5) / NV * E2A, U * E1B + (j + 0.5) / NV * E2B);\n  }\n  // The dual graph: the capital of country a sits at the hexagon (a, 0), and\n  // three roads leave it toward (a + 1, 0), (a, 1) and (a + 1, -1). Seven\n  // capitals times three is all 21 roads of K7, each crossing one border.\n  const q4 = [0, 0, 0, 0];\n  let n = 0;\n  for (let a = 0; a \u003c 7; a++)\n    for (const [da, db] of [[1, 0], [0, 1], [1, -1]])\n      for (let t = 0; t \u003c NR; t++, n++) {\n        const qa = a + (da * t) / (NR - 1), qb = (db * t) / (NR - 1), v = (TAU * (3 * qa + 2 * qb)) / 7, o = 3 * n;\n        core(S, (2 * qa - qb) / 7, q4, 0);\n        road[o] = q4[0] + S.r * cos(v) * q4[2];\n        road[o + 1] = q4[1] + S.r * cos(v) * q4[3];\n        road[o + 2] = S.r * sin(v);\n      }\n}\n\nexport function setup(params) {\n  // The turn starts 0.4 short of face-on, so at Speed 2 the torus faces you\n  // squarely one second in and stands edge-on five seconds in.\n  params.s = {\n    hue: 0, speed: 2, ratio: -1, tilt: 0.06, spin: -0.4, nod: 0, roads: -1, rc: 0, r: 0, ly: 0, per: 0,\n    cc: new Float32Array(4 * NU), tc: new Float32Array(NV), ts: new Float32Array(NV), cid: new Uint8Array(NS), road: new Float32Array(3 * 21 * NR),\n    zb: new Float32Array(N), ib: new Int32Array(N), ib2: new Int32Array(N), cb: new Uint8Array(N), rb: new Uint8Array(N), pal: new Float32Array(21),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[3], 0, 1);\n  const ratio = 0.85 - 0.45 * cl(k[2], 0, 1);\n  if (abs(ratio - S.ratio) > 1e-4) {\n    S.ratio = ratio;\n    build(S);\n  }\n  S.spin += d * S.speed * 0.2;\n  S.nod += d * S.speed * 0.11;\n  if (S.roads >= 0) {\n    S.roads += d;\n    if (S.roads > 7) S.roads = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.roads = S.roads \u003c 0 ? 0 : min(S.roads, 0.5);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { cc, tc, ts, cid, zb, ib, ib2, cb, rb, road, pal } = S, r = S.r;\n  // Spin about the torus's long axis, then lean the top of that axis toward\n  // the viewer, who looks along +z.\n  const ph = S.spin, cp = cos(ph), sp = sin(ph);\n  const la = -(0.1 + 0.6 * S.tilt + 0.05 * sin(S.nod)), cla = cos(la), sla = sin(la);\n  const m0 = cp, m2 = sp;\n  const m3 = sla * sp, m4 = cla, m5 = -sla * cp;\n  const m6 = -cla * sp, m7 = sla, m8 = cla * cp;\n  // Fit the leaning torus to the panel height.\n  const sc = min(1, 63.5 / (HALF * cla - RO * sla));\n  zb.fill(1e9);\n  ib.fill(-1);\n  // Each sample's screen x, y and depth are a column part plus cos v and\n  // sin v times a part, so the loop over the tube is a few multiplies.\n  const Xb = sc * m2 * r, Yb = -sc * m5 * r, Zb = m8 * r;\n  for (let i = 0; i \u003c NU; i++) {\n    const cx = cc[4 * i], cy = cc[4 * i + 1], ox = cc[4 * i + 2], oy = cc[4 * i + 3], A = m6 * ox + m7 * oy;\n    const X0 = 32 + sc * m0 * cx, Xa = sc * m0 * r * ox, Y0 = 64 - sc * (m3 * cx + m4 * cy), Ya = -sc * r * (m3 * ox + m4 * oy);\n    const Z0 = m6 * cx + m7 * cy, Za = r * A;\n    for (let j = 0, k = i * NV; j \u003c NV; j++, k++) {\n      const cv = tc[j], sv = ts[j];\n      // Facing away from the eye.\n      if (cv * A + sv * m8 > 0.05) continue;\n      const px = floor(X0 + cv * Xa + sv * Xb), py = floor(Y0 + cv * Ya + sv * Yb);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px, Z = Z0 + cv * Za + sv * Zb;\n      if (Z \u003c zb[p]) (zb[p] = Z), (ib[p] = k);\n    }\n  }\n  // Fill LEDs that no front sample reached, or where the back of the tube\n  // shows through between two front samples.\n  ib2.set(ib);\n  for (let y = 1; y \u003c H - 1; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, z = zb[p];\n      for (let q = 1; q \u003c= W; q += W - 1) {\n        const a = zb[p - q], b = zb[p + q];\n        if (a \u003c 1e8 && b \u003c 1e8 && abs(a - b) \u003c 4 && z > max(a, b) + 3) {\n          ib2[p] = a \u003c b ? ib[p - q] : ib[p + q];\n          break;\n        }\n      }\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const k = ib2[p];\n    cb[p] = k \u003c 0 ? 255 : cid[k];\n    if (k >= 0 && k !== ib[p]) {\n      const i = (k / NV) | 0, j = k - i * NV, o = 4 * i;\n      zb[p] = m6 * (cc[o] + r * tc[j] * cc[o + 2]) + m7 * (cc[o + 1] + r * tc[j] * cc[o + 3]) + m8 * r * ts[j];\n    }\n  }\n\n  // The roads, where they lie on the visible surface, and the capitals at\n  // their ends as 2 x 2 dots.\n  const e = S.roads \u003c 0 ? 0 : sm(S.roads / 0.5) * (1 - sm(S.roads - 6));\n  if (e > 0) {\n    rb.fill(0);\n    for (let i = 0, o = 0; i \u003c 21 * NR; i++, o += 3) {\n      const x = road[o], y = road[o + 1], z = road[o + 2];\n      const px = floor(32 + sc * (m0 * x + m2 * z)), py = floor(64 - sc * (m3 * x + m4 * y + m5 * z));\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      if (m6 * x + m7 * y + m8 * z > zb[p] + 1.5) continue;\n      rb[p] = 1;\n      if (i % NR === 0 && px \u003c W - 1 && py \u003c H - 1) rb[p + 1] = rb[p + W] = rb[p + W + 1] = 1;\n    }\n  }\n\n  // The seven colours, a seventh apart, opening off red.\n  const h0 = S.hue + 1 / 14;\n  for (let c = 0; c \u003c 7; c++) hsv(h0 + c / 7, 1, 1, pal, 3 * c);\n  // Light from the upper left, in front.\n  const lx = -0.45, ly = 0.6, lz = -0.66;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, c = cb[p];\n      if (c === 255) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const k = ib2[p], i = (k / NV) | 0, j = k - i * NV, nx = tc[j] * cc[4 * i + 2], ny = tc[j] * cc[4 * i + 3], nz = ts[j];\n      const vx = m0 * nx + m2 * nz, vy = m3 * nx + m4 * ny + m5 * nz, vz = m6 * nx + m7 * ny + m8 * nz;\n      const dif = max(0, vx * lx + vy * ly + vz * lz);\n      // Half vector of the light and the eye at -z, for a small shine.\n      let hv = max(0, (vx * lx + vy * ly + vz * (lz - 1)) / 1.82);\n      (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv);\n      const spec = hv * 0.5;\n      const lit = (0.6 + 0.55 * dif) * (1 - 0.2 * e);\n      let R = pal[3 * c] * lit + spec, G = pal[3 * c + 1] * lit + spec, B = pal[3 * c + 2] * lit + spec;\n      // A dark LED where the country changes to the right or below, and\n      // where the surface folds behind a nearer part of the tube.\n      const r = x \u003c W - 1 ? cb[p + 1] : 255, b = y \u003c H - 1 ? cb[p + W] : 255, zf = zb[p] - 6;\n      if ((r !== 255 && r !== c) || (b !== 255 && b !== c) ||\n        (x > 0 && cb[p - 1] !== 255 && zb[p - 1] \u003c zf) || (r !== 255 && zb[p + 1] \u003c zf) ||\n        (y > 0 && cb[p - W] !== 255 && zb[p - W] \u003c zf) || (b !== 255 && zb[p + W] \u003c zf)) (R *= 0.08), (G *= 0.08), (B *= 0.08);\n      if (e > 0 && rb[p]) {\n        R += (1 - R) * e;\n        G += (1 - G) * e;\n        B += (1 - B) * e;\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(B * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-heawood-torus","type":"code","name":"heawood-torus","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Heawood Torus\n// Family:  topology\n// Idea:    A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Heawood's seven-colour map on the torus (Percy Heawood, 1890), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1\n//\n// Knob 1: Hue. Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red.\n// Knob 2: Speed. How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s.\n// Knob 3: Hole. The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall.\n// Knob 4: Tilt. How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above.\n// Buttons: K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sin, cos, abs, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The plane tiled by hexagons, the hexagon at axial (a, b) coloured\n// (a + 3b) mod 7. Its six neighbours sit at (+-1, 0), (0, +-1) and\n// +-(1, -1), so their colours differ from its own by +-1, +-3 and +-2: all\n// six other colours, once each. The colouring repeats on the lattice L of\n// (a, b) with a + 3b = 0 mod 7, which has index 7, so the torus plane / L\n// holds exactly one hexagon of each colour, and each touches the other six.\n// L is spanned by E1 = (2, -3) and E2 = (1, 2) (determinant 7); of all the\n// bases of L these two shear the hexagons least on the long, thin parameter\n// square of this torus.\nconst E1A = 2, E1B = -3, E2A = 1, E2B = 2;\n\n// Samples round the core curve and round the tube; samples along each road.\nconst NU = 600, NV = 120, NS = NU * NV, NR = 200;\n// The outer half width of the torus in LEDs, and its half height before it leans.\nconst RO = 31, HALF = 63;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The country at fractional axial coordinates (qa, qb): round to the nearest\n// hexagon centre in cube coordinates, then colour it.\nfunction country(qa, qb) {\n  const x = qa, z = qb, y = -x - z;\n  let rx = round(x), ry = round(y), rz = round(z);\n  const dx = abs(rx - x), dy = abs(ry - y), dz = abs(rz - z);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  return (((rx + 3 * rz) % 7) + 7) % 7;\n}\n\n// The surface: a tube of radius r round a stadium, two half circles of\n// radius rc joined by straights 2 ly long, standing up in the x-y plane.\n// (U, V) in the unit square is the fraction of the way round the stadium and\n// round the tube. core() writes the point of the stadium at U and its\n// outward normal in the plane, (cx, cy, ox, oy), at out[o..o+3]; the surface\n// point is (cx + r cos v ox, cy + r cos v oy, r sin v) with v = 2 pi V, and\n// its normal (cos v ox, cos v oy, sin v).\nfunction core(S, U, out, o) {\n  const rc = S.rc, ly = S.ly;\n  let s = (U - floor(U)) * S.per, cx, cy, ox, oy;\n  if (s \u003c 2 * ly) (cx = rc), (cy = -ly + s), (ox = 1), (oy = 0);\n  else if ((s -= 2 * ly) \u003c PI * rc) {\n    const a = s / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = ly + rc * oy);\n  } else if ((s -= PI * rc) \u003c 2 * ly) (cx = -rc), (cy = ly - s), (ox = -1), (oy = 0);\n  else {\n    const a = PI + (s - 2 * ly) / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = -ly + rc * oy);\n  }\n  out[o] = cx;\n  out[o + 1] = cy;\n  out[o + 2] = ox;\n  out[o + 3] = oy;\n}\n\n// The plane point U E1 + V E2 is the one painted at (U, V), so the square's\n// sides go to E1 and E2 and the map closes up on the torus. Back the other\n// way, (qa, qb) lands at U = (2 qa - qb) / 7, V = (3 qa + 2 qb) / 7.\nfunction build(S) {\n  S.rc = RO / (1 + S.ratio);\n  S.r = S.rc * S.ratio;\n  S.ly = HALF - RO;\n  S.per = 4 * S.ly + TAU * S.rc;\n  const { cc, tc, ts, cid, road } = S;\n  for (let j = 0; j \u003c NV; j++) {\n    tc[j] = cos((TAU * (j + 0.5)) / NV);\n    ts[j] = sin((TAU * (j + 0.5)) / NV);\n  }\n  for (let i = 0; i \u003c NU; i++) {\n    const U = (i + 0.5) / NU;\n    core(S, U, cc, 4 * i);\n    for (let j = 0; j \u003c NV; j++) cid[i * NV + j] = country(U * E1A + (j + 0.5) / NV * E2A, U * E1B + (j + 0.5) / NV * E2B);\n  }\n  // The dual graph: the capital of country a sits at the hexagon (a, 0), and\n  // three roads leave it toward (a + 1, 0), (a, 1) and (a + 1, -1). Seven\n  // capitals times three is all 21 roads of K7, each crossing one border.\n  const q4 = [0, 0, 0, 0];\n  let n = 0;\n  for (let a = 0; a \u003c 7; a++)\n    for (const [da, db] of [[1, 0], [0, 1], [1, -1]])\n      for (let t = 0; t \u003c NR; t++, n++) {\n        const qa = a + (da * t) / (NR - 1), qb = (db * t) / (NR - 1), v = (TAU * (3 * qa + 2 * qb)) / 7, o = 3 * n;\n        core(S, (2 * qa - qb) / 7, q4, 0);\n        road[o] = q4[0] + S.r * cos(v) * q4[2];\n        road[o + 1] = q4[1] + S.r * cos(v) * q4[3];\n        road[o + 2] = S.r * sin(v);\n      }\n}\n\nexport function setup(params) {\n  // The turn starts 0.4 short of face-on, so at Speed 2 the torus faces you\n  // squarely one second in and stands edge-on five seconds in.\n  params.s = {\n    hue: 0, speed: 2, ratio: -1, tilt: 0.06, spin: -0.4, nod: 0, roads: -1, rc: 0, r: 0, ly: 0, per: 0,\n    cc: new Float32Array(4 * NU), tc: new Float32Array(NV), ts: new Float32Array(NV), cid: new Uint8Array(NS), road: new Float32Array(3 * 21 * NR),\n    zb: new Float32Array(N), ib: new Int32Array(N), ib2: new Int32Array(N), cb: new Uint8Array(N), rb: new Uint8Array(N), pal: new Float32Array(21),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[3], 0, 1);\n  const ratio = 0.85 - 0.45 * cl(k[2], 0, 1);\n  if (abs(ratio - S.ratio) > 1e-4) {\n    S.ratio = ratio;\n    build(S);\n  }\n  S.spin += d * S.speed * 0.2;\n  S.nod += d * S.speed * 0.11;\n  if (S.roads >= 0) {\n    S.roads += d;\n    if (S.roads > 7) S.roads = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.roads = S.roads \u003c 0 ? 0 : min(S.roads, 0.5);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { cc, tc, ts, cid, zb, ib, ib2, cb, rb, road, pal } = S, r = S.r;\n  // Spin about the torus's long axis, then lean the top of that axis toward\n  // the viewer, who looks along +z.\n  const ph = S.spin, cp = cos(ph), sp = sin(ph);\n  const la = -(0.1 + 0.6 * S.tilt + 0.05 * sin(S.nod)), cla = cos(la), sla = sin(la);\n  const m0 = cp, m2 = sp;\n  const m3 = sla * sp, m4 = cla, m5 = -sla * cp;\n  const m6 = -cla * sp, m7 = sla, m8 = cla * cp;\n  // Fit the leaning torus to the panel height.\n  const sc = min(1, 63.5 / (HALF * cla - RO * sla));\n  zb.fill(1e9);\n  ib.fill(-1);\n  // Each sample's screen x, y and depth are a column part plus cos v and\n  // sin v times a part, so the loop over the tube is a few multiplies.\n  const Xb = sc * m2 * r, Yb = -sc * m5 * r, Zb = m8 * r;\n  for (let i = 0; i \u003c NU; i++) {\n    const cx = cc[4 * i], cy = cc[4 * i + 1], ox = cc[4 * i + 2], oy = cc[4 * i + 3], A = m6 * ox + m7 * oy;\n    const X0 = 32 + sc * m0 * cx, Xa = sc * m0 * r * ox, Y0 = 64 - sc * (m3 * cx + m4 * cy), Ya = -sc * r * (m3 * ox + m4 * oy);\n    const Z0 = m6 * cx + m7 * cy, Za = r * A;\n    for (let j = 0, k = i * NV; j \u003c NV; j++, k++) {\n      const cv = tc[j], sv = ts[j];\n      // Facing away from the eye.\n      if (cv * A + sv * m8 > 0.05) continue;\n      const px = floor(X0 + cv * Xa + sv * Xb), py = floor(Y0 + cv * Ya + sv * Yb);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px, Z = Z0 + cv * Za + sv * Zb;\n      if (Z \u003c zb[p]) (zb[p] = Z), (ib[p] = k);\n    }\n  }\n  // Fill LEDs that no front sample reached, or where the back of the tube\n  // shows through between two front samples.\n  ib2.set(ib);\n  for (let y = 1; y \u003c H - 1; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, z = zb[p];\n      for (let q = 1; q \u003c= W; q += W - 1) {\n        const a = zb[p - q], b = zb[p + q];\n        if (a \u003c 1e8 && b \u003c 1e8 && abs(a - b) \u003c 4 && z > max(a, b) + 3) {\n          ib2[p] = a \u003c b ? ib[p - q] : ib[p + q];\n          break;\n        }\n      }\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const k = ib2[p];\n    cb[p] = k \u003c 0 ? 255 : cid[k];\n    if (k >= 0 && k !== ib[p]) {\n      const i = (k / NV) | 0, j = k - i * NV, o = 4 * i;\n      zb[p] = m6 * (cc[o] + r * tc[j] * cc[o + 2]) + m7 * (cc[o + 1] + r * tc[j] * cc[o + 3]) + m8 * r * ts[j];\n    }\n  }\n\n  // The roads, where they lie on the visible surface, and the capitals at\n  // their ends as 2 x 2 dots.\n  const e = S.roads \u003c 0 ? 0 : sm(S.roads / 0.5) * (1 - sm(S.roads - 6));\n  if (e > 0) {\n    rb.fill(0);\n    for (let i = 0, o = 0; i \u003c 21 * NR; i++, o += 3) {\n      const x = road[o], y = road[o + 1], z = road[o + 2];\n      const px = floor(32 + sc * (m0 * x + m2 * z)), py = floor(64 - sc * (m3 * x + m4 * y + m5 * z));\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      if (m6 * x + m7 * y + m8 * z > zb[p] + 1.5) continue;\n      rb[p] = 1;\n      if (i % NR === 0 && px \u003c W - 1 && py \u003c H - 1) rb[p + 1] = rb[p + W] = rb[p + W + 1] = 1;\n    }\n  }\n\n  // The seven colours, a seventh apart, opening off red.\n  const h0 = S.hue + 1 / 14;\n  for (let c = 0; c \u003c 7; c++) hsv(h0 + c / 7, 1, 1, pal, 3 * c);\n  // Light from the upper left, in front.\n  const lx = -0.45, ly = 0.6, lz = -0.66;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, c = cb[p];\n      if (c === 255) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const k = ib2[p], i = (k / NV) | 0, j = k - i * NV, nx = tc[j] * cc[4 * i + 2], ny = tc[j] * cc[4 * i + 3], nz = ts[j];\n      const vx = m0 * nx + m2 * nz, vy = m3 * nx + m4 * ny + m5 * nz, vz = m6 * nx + m7 * ny + m8 * nz;\n      const dif = max(0, vx * lx + vy * ly + vz * lz);\n      // Half vector of the light and the eye at -z, for a small shine.\n      let hv = max(0, (vx * lx + vy * ly + vz * (lz - 1)) / 1.82);\n      (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv);\n      const spec = hv * 0.5;\n      const lit = (0.6 + 0.55 * dif) * (1 - 0.2 * e);\n      let R = pal[3 * c] * lit + spec, G = pal[3 * c + 1] * lit + spec, B = pal[3 * c + 2] * lit + spec;\n      // A dark LED where the country changes to the right or below, and\n      // where the surface folds behind a nearer part of the tube.\n      const r = x \u003c W - 1 ? cb[p + 1] : 255, b = y \u003c H - 1 ? cb[p + W] : 255, zf = zb[p] - 6;\n      if ((r !== 255 && r !== c) || (b !== 255 && b !== c) ||\n        (x > 0 && cb[p - 1] !== 255 && zb[p - 1] \u003c zf) || (r !== 255 && zb[p + 1] \u003c zf) ||\n        (y > 0 && cb[p - W] !== 255 && zb[p - W] \u003c zf) || (b !== 255 && zb[p + W] \u003c zf)) (R *= 0.08), (G *= 0.08), (B *= 0.08);\n      if (e > 0 && rb[p]) {\n        R += (1 - R) * e;\n        G += (1 - G) * e;\n        B += (1 - B) * e;\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(B * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s."},{"name":"Hole","min":0,"max":1,"about":"The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall."},{"name":"Tilt","min":0,"max":1,"about":"How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above."}],"start":[0,2,0,0.06],"measures":{"motion":0.4823,"detail":0.0527,"edges":0.4488,"complexity":0.5038,"coverage":0.538,"colour":0.6204,"drift":0.3781},"knobResponse":[0.4775,0.281,0.1318,0.1492]},{"slug":"helter-skelter","title":"Helter Skelter","family":"fair","round":19,"note":"밤 장터의 헬터 스켈터가 128줄을 다 써요. 사람들이 탑 안 계단을 올라 작은 창에 비치고, 꼭대기에서 매트에 앉아 전구 체이스와 함께 탑을 돌아 미끄러져 내려온 뒤 매트를 들고 아래 문으로 돌아가요.","idea":"A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","layer":{"id":"layer-helter-skelter","type":"code","name":"helter-skelter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower."},{"name":"Turns","min":3,"max":6,"about":"How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside."},{"name":"Stripes","min":-1,"max":1,"about":"The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them."}],"start":[0,2,3,0.06],"measures":{"motion":0.1978,"detail":0.0529,"edges":0.4142,"complexity":1.5797,"coverage":0.8591,"colour":0.2542,"drift":0.0688},"knobResponse":[0.0829,0.0365,0.0808,0.0347]},{"slug":"hexatic-phase","title":"Hexatic Phase","family":"particle","round":37,"note":"단단한 원판 440개가 주기 경계 상자 안에서 사건 사슬 몬테카를로로 밀치고, 원판마다 둘레의 육각 격자가 가리키는 쪽에 따라 색을 입어요. 색상환 한 바퀴가 격자 회전 60도라서 결정 조각이 한 색 덩어리로 헤엄치고 합쳐지며 돌고, 이웃이 다섯인 원판은 흰 점, 일곱인 원판은 흰 고리로 결정 경계를 따라 줄지어요. K3 은 채움 몫을 0.68 의 액체에서 0.76 의 고체까지 올리고, 누르면 상자가 녹았다가 다시 굳어요.","idea":"440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.","buttons":"K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.","code":"// ===== Patternflow pattern =====\n// Title:   Hexatic Phase\n// Family:  particle\n// Idea:    440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: hexatic phase of two-dimensional melting (Bertrand Halperin and David Nelson, 1978), hard disks (Berni Alder and Thomas Wainwright, 1962), event-chain Monte Carlo (Etienne Bernard, Werner Krauth and David Wilson, 2009), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1\n//\n// Knob 1: Hue. Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together.\n// Knob 2: Speed. Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it.\n// Knob 3: Density. The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs.\n// Knob 4: Cells. From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring.\n// Buttons: K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.\n\nconst W = 64, H = 128, N = 440, CX = 14, CY = 28, C = W / CX, NC = CX * CY, CAP = 12;\nconst { floor, min, max, sqrt, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wx = (v) => (v \u003c -32 ? v + W : v >= 32 ? v - W : v);\nconst wy = (v) => (v \u003c -64 ? v + H : v >= 64 ? v - H : v);\n// Disk diameter for a packing fraction: eta = N pi d^2 / 4 / (W H).\nconst diam = (eta) => sqrt((4 * eta * W * H) / (N * PI));\n\n// Hard disks have no energy, only the packing fraction. Halperin and Nelson\n// (after Kosterlitz and Thouless) said a 2D crystal melts in two steps: bound\n// pairs of dislocations unbind into a hexatic phase that keeps the lattice's\n// orientation over long distances but not its rows, and then the hexatic\n// melts into a liquid when the dislocations split into free 5s and 7s.\n// Bernard and Krauth (2011) found that for hard disks the liquid to hexatic\n// step is first order: the two coexist from 0.700 to 0.716, the hexatic\n// holds to 0.720, and the solid starts there.\n//\n// Measured here, mean over seconds 10 to 40, of the edge-weighted psi6 of\n// single disks, and the share of disks without six Voronoi neighbours:\n//   0.68  |psi6| 0.60  off six 27%    0.70  |psi6| 0.69  off six 15%\n//   0.72  |psi6| 0.75  off six  9%    0.74  |psi6| 0.84  off six  2%\n// The whole box's |psi6| goes 0.16, 0.50, 0.63, 0.79: with 440 disks the\n// patches reach the box long before the solid does.\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction cellAt(x, y) {\n  let cx = floor(x / C), cy = floor(y / C);\n  if (cx >= CX) cx -= CX;\n  if (cy >= CY) cy -= CY;\n  return cy * CX + cx;\n}\nfunction put(S, i) {\n  const c = cellAt(S.x[i], S.y[i]), k = S.cnt[c]++;\n  S.slot[c * CAP + k] = i;\n  S.cell[i] = c;\n  S.pos[i] = k;\n}\nfunction take(S, i) {\n  const c = S.cell[i], k = S.pos[i], last = --S.cnt[c], j = S.slot[c * CAP + last];\n  S.slot[c * CAP + k] = j;\n  S.pos[j] = k;\n}\n\n// One straight event chain: disk i moves along direction dir until it\n// touches another disk, which takes over the rest of the length, and so on\n// until the length is spent. Each chain leaves the uniform distribution of\n// valid configurations as it was, so a random mix of the four directions\n// does too, and the mix keeps the whole box from drifting one way.\nfunction chain(S, i, dir, len) {\n  const d = S.d, d2 = d * d, ex = dir === 0 ? 1 : dir === 2 ? -1 : 0, ey = dir === 1 ? 1 : dir === 3 ? -1 : 0;\n  const X = S.x, Y = S.y, cnt = S.cnt, slot = S.slot;\n  let lifts = 0;\n  while (len > 1e-9 && lifts \u003c 200) {\n    const xi = X[i], yi = Y[i], look = len \u003c 2 * C ? len : 2 * C, kf = 1 + floor((look + d) / C);\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n    let best = look, hit = -1;\n    for (let a = 0; a \u003c= kf; a++)\n      for (let b = -1; b \u003c= 1; b++) {\n        let qx = ex ? cx + ex * a : cx + b, qy = ex ? cy + b : cy + ey * a;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = slot[q * CAP + m];\n          if (j === i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), along = rx * ex + ry * ey, perp = ex ? ry : rx;\n          if (along \u003c= 0 || perp * perp >= d2) continue;\n          let s = along - sqrt(d2 - perp * perp);\n          if (s \u003c 0) s = 0;\n          if (s \u003c best) (best = s), (hit = j);\n        }\n      }\n    take(S, i);\n    let nx = xi + ex * best, ny = yi + ey * best;\n    nx = nx \u003c 0 ? nx + W : nx >= W ? nx - W : nx;\n    ny = ny \u003c 0 ? ny + H : ny >= H ? ny - H : ny;\n    X[i] = nx;\n    Y[i] = ny;\n    put(S, i);\n    len -= best;\n    if (hit >= 0) (i = hit), lifts++;\n  }\n  return lifts;\n}\n\n// The closest pair in the box. Disks grow to it and no further, so the box\n// is compressed without one overlap.\nfunction closest(S) {\n  const X = S.x, Y = S.y;\n  let m2 = C * C;\n  for (let i = 0; i \u003c N; i++) {\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0, xi = X[i], yi = Y[i];\n    for (let b = -1; b \u003c= 1; b++)\n      for (let a = -1; a \u003c= 1; a++) {\n        let qx = cx + a, qy = cy + b;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = S.cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = S.slot[q * CAP + m];\n          if (j \u003c= i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n          if (r2 \u003c m2) m2 = r2;\n        }\n      }\n  }\n  return sqrt(m2);\n}\n\n// Growth by a step of `rate`, then pushes: every overlapping pair is moved\n// apart along its axis, a few passes over the box. What overlap is left\n// after that is taken back by shrinking the disks to the closest pair, so the\n// chains never see two disks overlap.\nfunction grow(S, rate) {\n  if (S.dT \u003c= S.d) {\n    S.d = S.dT;\n    return;\n  }\n  const d1 = min(S.dT, S.d * (1 + rate)), X = S.x, Y = S.y;\n  for (let pass = 0; pass \u003c 4; pass++) {\n    let moved = 0;\n    for (let i = 0; i \u003c N; i++) {\n      const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m];\n            if (j \u003c= i) continue;\n            const rx = wx(X[j] - X[i]), ry = wy(Y[j] - Y[i]), r2 = rx * rx + ry * ry;\n            if (r2 >= d1 * d1 || r2 === 0) continue;\n            const r = sqrt(r2), f = (0.5 * (d1 - r) + 1e-4) / r;\n            X[i] -= rx * f;\n            Y[i] -= ry * f;\n            X[j] += rx * f;\n            Y[j] += ry * f;\n            moved++;\n          }\n        }\n    }\n    for (let i = 0; i \u003c N; i++) {\n      X[i] = (X[i] + W) % W;\n      Y[i] = (Y[i] + H) % H;\n      if (cellAt(X[i], Y[i]) !== S.cell[i]) take(S, i), put(S, i);\n    }\n    if (!moved) break;\n  }\n  S.d = min(d1, closest(S) * (1 - 1e-9));\n}\n\n// A batch of chains, each 1.5 diameters long in total.\nfunction chains(S, n) {\n  let lifts = 0;\n  for (let k = 0; k \u003c n; k++) lifts += chain(S, floor(random() * N), floor(random() * 4), 1.5 * S.d);\n  return lifts;\n}\n\n// The Voronoi cell of disk i, by clipping a square with the bisector of each\n// nearby disk, nearest first. Its edges give the neighbours and how much each\n// one counts: psi6 = sum over edges of length * exp(6 i theta) / perimeter.\nconst PX = new Float64Array(40), PY = new Float64Array(40), PL = new Int32Array(40);\nconst QX = new Float64Array(40), QY = new Float64Array(40), QL = new Int32Array(40);\nconst CR = new Float64Array(64), CRX = new Float64Array(64), CRY = new Float64Array(64), CJ = new Int32Array(64);\nconst NBMAX = 12, CPS = 1500;\n// Density range, growth per second at Speed 2, melt time.\nconst ETA0 = 0.68, ETA1 = 0.76, GROW = 0.02, MELT = 1.2, EASE = 0.3;\n// The coarse-grained |psi6| that turns slate into full colour, and the slate.\nconst O0 = 0.35, O1 = 0.62, SL = [0.13, 0.14, 0.2];\n\nfunction voronoi(S, i) {\n  const X = S.x, Y = S.y, xi = X[i], yi = Y[i], c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n  let nc = 0;\n  for (let b = -2; b \u003c= 2; b++)\n    for (let a = -2; a \u003c= 2; a++) {\n      let qx = cx + a, qy = cy + b;\n      qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n      qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n      const q = qy * CX + qx, n = S.cnt[q];\n      for (let m = 0; m \u003c n && nc \u003c 64; m++) {\n        const j = S.slot[q * CAP + m];\n        if (j === i) continue;\n        const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n        // Insertion into the list sorted by distance.\n        let k = nc++;\n        while (k > 0 && CR[k - 1] > r2) {\n          CR[k] = CR[k - 1];\n          CRX[k] = CRX[k - 1];\n          CRY[k] = CRY[k - 1];\n          CJ[k] = CJ[k - 1];\n          k--;\n        }\n        CR[k] = r2;\n        CRX[k] = rx;\n        CRY[k] = ry;\n        CJ[k] = j;\n      }\n    }\n  const HS = 2 * C;\n  let px = PX, py = PY, pl = PL, qx = QX, qy = QY, ql = QL, nv = 4;\n  px[0] = -HS, py[0] = -HS, px[1] = HS, py[1] = -HS, px[2] = HS, py[2] = HS, px[3] = -HS, py[3] = HS;\n  pl[0] = pl[1] = pl[2] = pl[3] = -1;\n  let far2 = 2 * HS * HS;\n  for (let k = 0; k \u003c nc; k++) {\n    // A bisector farther out than every corner cannot cut the cell.\n    if (CR[k] > 4 * far2) break;\n    const ax = CRX[k], ay = CRY[k], h = CR[k] / 2;\n    let no = 0;\n    for (let v = 0; v \u003c nv; v++) {\n      const w = v + 1 \u003c nv ? v + 1 : 0, sv = ax * px[v] + ay * py[v] - h, sw = ax * px[w] + ay * py[w] - h;\n      if (sv \u003c= 0) {\n        qx[no] = px[v], qy[no] = py[v], ql[no++] = pl[v];\n        if (sw > 0) {\n          const t = sv / (sv - sw);\n          qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = k;\n        }\n      } else if (sw \u003c= 0) {\n        const t = sv / (sv - sw);\n        qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = pl[v];\n      }\n    }\n    if (no === nv) {\n      let same = true;\n      for (let v = 0; v \u003c nv && same; v++) if (ql[v] !== pl[v]) same = false;\n      if (same) continue;\n    }\n    let t = px;\n    (px = qx), (qx = t), (t = py), (py = qy), (qy = t);\n    const tl = pl;\n    (pl = ql), (ql = tl), (nv = no);\n    far2 = 0;\n    for (let v = 0; v \u003c nv; v++) far2 = max(far2, px[v] * px[v] + py[v] * py[v]);\n  }\n  // Edges: label pl[v] runs from vertex v to vertex v + 1.\n  let sr = 0, si = 0, sl = 0, nn = 0;\n  for (let v = 0; v \u003c nv; v++) {\n    const k = pl[v];\n    if (k \u003c 0) continue;\n    const w = v + 1 \u003c nv ? v + 1 : 0, len = sqrt((px[w] - px[v]) ** 2 + (py[w] - py[v]) ** 2);\n    const r = sqrt(CR[k]), ux = CRX[k] / r, uy = CRY[k] / r;\n    // (ux + i uy)^6\n    const a2r = ux * ux - uy * uy, a2i = 2 * ux * uy, a4r = a2r * a2r - a2i * a2i, a4i = 2 * a2r * a2i;\n    sr += len * (a4r * a2r - a4i * a2i);\n    si += len * (a4r * a2i + a4i * a2r);\n    sl += len;\n    if (len > 1e-6 && nn \u003c NBMAX) S.nb[i * NBMAX + nn++] = CJ[k];\n  }\n  S.pr[i] = sl > 0 ? sr / sl : 0;\n  S.pi[i] = sl > 0 ? si / sl : 0;\n  S.nn[i] = nn;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    x: new Float64Array(N), y: new Float64Array(N), cell: new Int32Array(N), pos: new Int32Array(N),\n    cnt: new Int32Array(NC), slot: new Int32Array(NC * CAP),\n    pr: new Float32Array(N), pi: new Float32Array(N), nn: new Uint8Array(N), nb: new Int32Array(N * NBMAX),\n    qr: new Float32Array(N), qi: new Float32Array(N), col: new Float32Array(N * 3), sx: new Float64Array(N), sy: new Float64Array(N),\n    buf: new Float32Array(W * H * 3),\n    d: 2.6, dT: diam(0.68), hue: 0, speed: 2, eta: 0.68, cells: 0.06, warm: false, melt: 0, acc: 0, lifts: 0,\n  });\n  // Random sequential placement at a small diameter, 0.24 packing.\n  for (let i = 0; i \u003c N; i++) {\n    for (let tries = 0; tries \u003c 2000; tries++) {\n      const x = random() * W, y = random() * H;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) {\n        const rx = wx(S.x[j] - x), ry = wy(S.y[j] - y);\n        if (rx * rx + ry * ry \u003c S.d * S.d) ok = false;\n      }\n      if (ok) {\n        S.x[i] = x;\n        S.y[i] = y;\n        break;\n      }\n    }\n    put(S, i);\n  }\n}\n\nfunction analyse(S, ease) {\n  for (let i = 0; i \u003c N; i++) voronoi(S, i);\n  // Coarse grain over the disk and its Voronoi neighbours, then ease in time.\n  for (let i = 0; i \u003c N; i++) {\n    let r = S.pr[i], m = S.pi[i];\n    const n = S.nn[i];\n    for (let k = 0; k \u003c n; k++) {\n      const j = S.nb[i * NBMAX + k];\n      r += S.pr[j];\n      m += S.pi[j];\n    }\n    r /= n + 1;\n    m /= n + 1;\n    S.qr[i] += (r - S.qr[i]) * ease;\n    S.qi[i] += (m - S.qi[i]) * ease;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.68, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.eta = cl(k[2], ETA0, ETA1);\n  S.cells = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) S.melt = MELT;\n  S.melt = max(0, S.melt - d * S.speed / 2);\n  S.dT = diam(S.melt > 0 ? 0.6 : S.eta);\n  if (!S.warm) {\n    for (let r = 0; r \u003c 600 && S.d \u003c S.dT; r++) {\n      chains(S, 40);\n      grow(S, 0.004);\n    }\n    for (let r = 0; r \u003c 60; r++) chains(S, 40);\n    analyse(S, 1);\n    S.sx.set(S.x);\n    S.sy.set(S.y);\n    S.warm = true;\n  }\n  // Chains this frame, in three batches with a growth step after each.\n  S.acc += S.speed * CPS * d;\n  const n = floor(S.acc);\n  S.acc -= n;\n  let lifts = 0;\n  for (let b = 0; b \u003c 3; b++) {\n    lifts += chains(S, floor(n / 3) + (b \u003c n % 3 ? 1 : 0));\n    grow(S, (GROW * d * S.speed) / 2 / 3);\n  }\n  S.lifts = lifts;\n  analyse(S, 0.35);\n  // The disks are drawn where they have been over the last few frames, not\n  // where the last chain left them: each one rattles in its cage by about\n  // 0.4 LED from frame to frame, which flickers on the panel.\n  for (let i = 0; i \u003c N; i++) {\n    S.sx[i] += wx(S.x[i] - S.sx[i]) * EASE;\n    S.sy[i] += wy(S.y[i] - S.sy[i]) * EASE;\n    S.sx[i] = (S.sx[i] + W) % W;\n    S.sy[i] = (S.sy[i] + H) % H;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, col, sx: X, sy: Y } = S;\n  buf.fill(0);\n  // Disk colours: hue from the phase of psi6, and from its size a blend\n  // from a dim slate (liquid) to the full colour (crystal).\n  for (let i = 0; i \u003c N; i++) {\n    const r = S.qr[i], m = S.qi[i], mag = sqrt(r * r + m * m), o = sm(O0, O1, mag), n = S.nn[i], c = i * 3;\n    if (n !== 6) {\n      const w = 0.5 + 0.5 * o;\n      col[c] = col[c + 1] = col[c + 2] = n \u003c 6 ? w : -w;\n      continue;\n    }\n    const h = S.hue + 0.47 + atan2(m, r) / (2 * PI), hh = h - floor(h);\n    // Orange and yellow at less than full brightness read brown and olive,\n    // so there the colour goes paler instead.\n    const warm = sm(0.0, 0.05, hh) * (1 - sm(0.17, 0.24, hh));\n    hsv(h, 0.88 - 0.38 * warm, 1, col, c);\n    col[c] = SL[0] + (col[c] - SL[0]) * o;\n    col[c + 1] = SL[1] + (col[c + 1] - SL[1]) * o;\n    col[c + 2] = SL[2] + (col[c + 2] - SL[2]) * o;\n  }\n  const R = S.d / 2 - 0.25, R7 = R - 0.95;\n  for (let i = 0; i \u003c N; i++) {\n    const xi = X[i], yi = Y[i], c = i * 3;\n    let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n    // A 7-neighbour disk is a ring with a dark core.\n    const ring = cr \u003c 0;\n    if (ring) cr = cg = cb = -cr;\n    for (let yy = floor(yi - R - 1); yy \u003c= yi + R + 1; yy++)\n      for (let xx = floor(xi - R - 1); xx \u003c= xi + R + 1; xx++) {\n        const ex = xx + 0.5 - xi, ey = yy + 0.5 - yi, e = sqrt(ex * ex + ey * ey);\n        let cov = cl(R + 0.5 - e, 0, 1);\n        if (ring) cov *= cl(e - R7, 0, 1);\n        if (cov \u003c= 0) continue;\n        const px = (xx + W) % W, py = (yy + H) % H, p = (py * W + px) * 3;\n        buf[p] = max(buf[p], cr * cov);\n        buf[p + 1] = max(buf[p + 1], cg * cov);\n        buf[p + 2] = max(buf[p + 2], cb * cov);\n      }\n  }\n  if (S.cells > 0.02) cells(S, buf, col);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, round(255 * buf[p]), round(255 * buf[p + 1]), round(255 * buf[p + 2]));\n}\n\n// The Voronoi field: each LED takes the colour of its nearest disk, darkened\n// where the second nearest is almost as near, which draws the cell edges.\nfunction cells(S, buf, col) {\n  const X = S.x, Y = S.y, lv = S.cells;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const fx = x + 0.5, fy = y + 0.5, cx = floor(fx / C), cy = floor(fy / C);\n      let b1 = 1e9, b2 = 1e9, j1 = 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m], rx = wx(X[j] - fx), ry = wy(Y[j] - fy), r2 = rx * rx + ry * ry;\n            if (r2 \u003c b1) (b2 = b1), (b1 = r2), (j1 = j);\n            else if (r2 \u003c b2) b2 = r2;\n          }\n        }\n      // Distance to the bisector of the two nearest is (r2^2 - r1^2) / 2 r12;\n      // with r12 about one spacing this is close enough for a seam.\n      const edge = sm(0.1, 0.7, (b2 - b1) / (2 * S.d)), c = j1 * 3;\n      let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n      if (cr \u003c 0) cr = cg = cb = 0.05;\n      const g = lv * edge;\n      buf[p] = max(buf[p], cr * g);\n      buf[p + 1] = max(buf[p + 1], cg * g);\n      buf[p + 2] = max(buf[p + 2], cb * g);\n    }\n}\n\nfunction sm(a, b, v) {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n","layer":{"id":"layer-hexatic-phase","type":"code","name":"hexatic-phase","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hexatic Phase\n// Family:  particle\n// Idea:    440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: hexatic phase of two-dimensional melting (Bertrand Halperin and David Nelson, 1978), hard disks (Berni Alder and Thomas Wainwright, 1962), event-chain Monte Carlo (Etienne Bernard, Werner Krauth and David Wilson, 2009), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1\n//\n// Knob 1: Hue. Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together.\n// Knob 2: Speed. Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it.\n// Knob 3: Density. The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs.\n// Knob 4: Cells. From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring.\n// Buttons: K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.\n\nconst W = 64, H = 128, N = 440, CX = 14, CY = 28, C = W / CX, NC = CX * CY, CAP = 12;\nconst { floor, min, max, sqrt, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wx = (v) => (v \u003c -32 ? v + W : v >= 32 ? v - W : v);\nconst wy = (v) => (v \u003c -64 ? v + H : v >= 64 ? v - H : v);\n// Disk diameter for a packing fraction: eta = N pi d^2 / 4 / (W H).\nconst diam = (eta) => sqrt((4 * eta * W * H) / (N * PI));\n\n// Hard disks have no energy, only the packing fraction. Halperin and Nelson\n// (after Kosterlitz and Thouless) said a 2D crystal melts in two steps: bound\n// pairs of dislocations unbind into a hexatic phase that keeps the lattice's\n// orientation over long distances but not its rows, and then the hexatic\n// melts into a liquid when the dislocations split into free 5s and 7s.\n// Bernard and Krauth (2011) found that for hard disks the liquid to hexatic\n// step is first order: the two coexist from 0.700 to 0.716, the hexatic\n// holds to 0.720, and the solid starts there.\n//\n// Measured here, mean over seconds 10 to 40, of the edge-weighted psi6 of\n// single disks, and the share of disks without six Voronoi neighbours:\n//   0.68  |psi6| 0.60  off six 27%    0.70  |psi6| 0.69  off six 15%\n//   0.72  |psi6| 0.75  off six  9%    0.74  |psi6| 0.84  off six  2%\n// The whole box's |psi6| goes 0.16, 0.50, 0.63, 0.79: with 440 disks the\n// patches reach the box long before the solid does.\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction cellAt(x, y) {\n  let cx = floor(x / C), cy = floor(y / C);\n  if (cx >= CX) cx -= CX;\n  if (cy >= CY) cy -= CY;\n  return cy * CX + cx;\n}\nfunction put(S, i) {\n  const c = cellAt(S.x[i], S.y[i]), k = S.cnt[c]++;\n  S.slot[c * CAP + k] = i;\n  S.cell[i] = c;\n  S.pos[i] = k;\n}\nfunction take(S, i) {\n  const c = S.cell[i], k = S.pos[i], last = --S.cnt[c], j = S.slot[c * CAP + last];\n  S.slot[c * CAP + k] = j;\n  S.pos[j] = k;\n}\n\n// One straight event chain: disk i moves along direction dir until it\n// touches another disk, which takes over the rest of the length, and so on\n// until the length is spent. Each chain leaves the uniform distribution of\n// valid configurations as it was, so a random mix of the four directions\n// does too, and the mix keeps the whole box from drifting one way.\nfunction chain(S, i, dir, len) {\n  const d = S.d, d2 = d * d, ex = dir === 0 ? 1 : dir === 2 ? -1 : 0, ey = dir === 1 ? 1 : dir === 3 ? -1 : 0;\n  const X = S.x, Y = S.y, cnt = S.cnt, slot = S.slot;\n  let lifts = 0;\n  while (len > 1e-9 && lifts \u003c 200) {\n    const xi = X[i], yi = Y[i], look = len \u003c 2 * C ? len : 2 * C, kf = 1 + floor((look + d) / C);\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n    let best = look, hit = -1;\n    for (let a = 0; a \u003c= kf; a++)\n      for (let b = -1; b \u003c= 1; b++) {\n        let qx = ex ? cx + ex * a : cx + b, qy = ex ? cy + b : cy + ey * a;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = slot[q * CAP + m];\n          if (j === i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), along = rx * ex + ry * ey, perp = ex ? ry : rx;\n          if (along \u003c= 0 || perp * perp >= d2) continue;\n          let s = along - sqrt(d2 - perp * perp);\n          if (s \u003c 0) s = 0;\n          if (s \u003c best) (best = s), (hit = j);\n        }\n      }\n    take(S, i);\n    let nx = xi + ex * best, ny = yi + ey * best;\n    nx = nx \u003c 0 ? nx + W : nx >= W ? nx - W : nx;\n    ny = ny \u003c 0 ? ny + H : ny >= H ? ny - H : ny;\n    X[i] = nx;\n    Y[i] = ny;\n    put(S, i);\n    len -= best;\n    if (hit >= 0) (i = hit), lifts++;\n  }\n  return lifts;\n}\n\n// The closest pair in the box. Disks grow to it and no further, so the box\n// is compressed without one overlap.\nfunction closest(S) {\n  const X = S.x, Y = S.y;\n  let m2 = C * C;\n  for (let i = 0; i \u003c N; i++) {\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0, xi = X[i], yi = Y[i];\n    for (let b = -1; b \u003c= 1; b++)\n      for (let a = -1; a \u003c= 1; a++) {\n        let qx = cx + a, qy = cy + b;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = S.cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = S.slot[q * CAP + m];\n          if (j \u003c= i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n          if (r2 \u003c m2) m2 = r2;\n        }\n      }\n  }\n  return sqrt(m2);\n}\n\n// Growth by a step of `rate`, then pushes: every overlapping pair is moved\n// apart along its axis, a few passes over the box. What overlap is left\n// after that is taken back by shrinking the disks to the closest pair, so the\n// chains never see two disks overlap.\nfunction grow(S, rate) {\n  if (S.dT \u003c= S.d) {\n    S.d = S.dT;\n    return;\n  }\n  const d1 = min(S.dT, S.d * (1 + rate)), X = S.x, Y = S.y;\n  for (let pass = 0; pass \u003c 4; pass++) {\n    let moved = 0;\n    for (let i = 0; i \u003c N; i++) {\n      const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m];\n            if (j \u003c= i) continue;\n            const rx = wx(X[j] - X[i]), ry = wy(Y[j] - Y[i]), r2 = rx * rx + ry * ry;\n            if (r2 >= d1 * d1 || r2 === 0) continue;\n            const r = sqrt(r2), f = (0.5 * (d1 - r) + 1e-4) / r;\n            X[i] -= rx * f;\n            Y[i] -= ry * f;\n            X[j] += rx * f;\n            Y[j] += ry * f;\n            moved++;\n          }\n        }\n    }\n    for (let i = 0; i \u003c N; i++) {\n      X[i] = (X[i] + W) % W;\n      Y[i] = (Y[i] + H) % H;\n      if (cellAt(X[i], Y[i]) !== S.cell[i]) take(S, i), put(S, i);\n    }\n    if (!moved) break;\n  }\n  S.d = min(d1, closest(S) * (1 - 1e-9));\n}\n\n// A batch of chains, each 1.5 diameters long in total.\nfunction chains(S, n) {\n  let lifts = 0;\n  for (let k = 0; k \u003c n; k++) lifts += chain(S, floor(random() * N), floor(random() * 4), 1.5 * S.d);\n  return lifts;\n}\n\n// The Voronoi cell of disk i, by clipping a square with the bisector of each\n// nearby disk, nearest first. Its edges give the neighbours and how much each\n// one counts: psi6 = sum over edges of length * exp(6 i theta) / perimeter.\nconst PX = new Float64Array(40), PY = new Float64Array(40), PL = new Int32Array(40);\nconst QX = new Float64Array(40), QY = new Float64Array(40), QL = new Int32Array(40);\nconst CR = new Float64Array(64), CRX = new Float64Array(64), CRY = new Float64Array(64), CJ = new Int32Array(64);\nconst NBMAX = 12, CPS = 1500;\n// Density range, growth per second at Speed 2, melt time.\nconst ETA0 = 0.68, ETA1 = 0.76, GROW = 0.02, MELT = 1.2, EASE = 0.3;\n// The coarse-grained |psi6| that turns slate into full colour, and the slate.\nconst O0 = 0.35, O1 = 0.62, SL = [0.13, 0.14, 0.2];\n\nfunction voronoi(S, i) {\n  const X = S.x, Y = S.y, xi = X[i], yi = Y[i], c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n  let nc = 0;\n  for (let b = -2; b \u003c= 2; b++)\n    for (let a = -2; a \u003c= 2; a++) {\n      let qx = cx + a, qy = cy + b;\n      qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n      qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n      const q = qy * CX + qx, n = S.cnt[q];\n      for (let m = 0; m \u003c n && nc \u003c 64; m++) {\n        const j = S.slot[q * CAP + m];\n        if (j === i) continue;\n        const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n        // Insertion into the list sorted by distance.\n        let k = nc++;\n        while (k > 0 && CR[k - 1] > r2) {\n          CR[k] = CR[k - 1];\n          CRX[k] = CRX[k - 1];\n          CRY[k] = CRY[k - 1];\n          CJ[k] = CJ[k - 1];\n          k--;\n        }\n        CR[k] = r2;\n        CRX[k] = rx;\n        CRY[k] = ry;\n        CJ[k] = j;\n      }\n    }\n  const HS = 2 * C;\n  let px = PX, py = PY, pl = PL, qx = QX, qy = QY, ql = QL, nv = 4;\n  px[0] = -HS, py[0] = -HS, px[1] = HS, py[1] = -HS, px[2] = HS, py[2] = HS, px[3] = -HS, py[3] = HS;\n  pl[0] = pl[1] = pl[2] = pl[3] = -1;\n  let far2 = 2 * HS * HS;\n  for (let k = 0; k \u003c nc; k++) {\n    // A bisector farther out than every corner cannot cut the cell.\n    if (CR[k] > 4 * far2) break;\n    const ax = CRX[k], ay = CRY[k], h = CR[k] / 2;\n    let no = 0;\n    for (let v = 0; v \u003c nv; v++) {\n      const w = v + 1 \u003c nv ? v + 1 : 0, sv = ax * px[v] + ay * py[v] - h, sw = ax * px[w] + ay * py[w] - h;\n      if (sv \u003c= 0) {\n        qx[no] = px[v], qy[no] = py[v], ql[no++] = pl[v];\n        if (sw > 0) {\n          const t = sv / (sv - sw);\n          qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = k;\n        }\n      } else if (sw \u003c= 0) {\n        const t = sv / (sv - sw);\n        qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = pl[v];\n      }\n    }\n    if (no === nv) {\n      let same = true;\n      for (let v = 0; v \u003c nv && same; v++) if (ql[v] !== pl[v]) same = false;\n      if (same) continue;\n    }\n    let t = px;\n    (px = qx), (qx = t), (t = py), (py = qy), (qy = t);\n    const tl = pl;\n    (pl = ql), (ql = tl), (nv = no);\n    far2 = 0;\n    for (let v = 0; v \u003c nv; v++) far2 = max(far2, px[v] * px[v] + py[v] * py[v]);\n  }\n  // Edges: label pl[v] runs from vertex v to vertex v + 1.\n  let sr = 0, si = 0, sl = 0, nn = 0;\n  for (let v = 0; v \u003c nv; v++) {\n    const k = pl[v];\n    if (k \u003c 0) continue;\n    const w = v + 1 \u003c nv ? v + 1 : 0, len = sqrt((px[w] - px[v]) ** 2 + (py[w] - py[v]) ** 2);\n    const r = sqrt(CR[k]), ux = CRX[k] / r, uy = CRY[k] / r;\n    // (ux + i uy)^6\n    const a2r = ux * ux - uy * uy, a2i = 2 * ux * uy, a4r = a2r * a2r - a2i * a2i, a4i = 2 * a2r * a2i;\n    sr += len * (a4r * a2r - a4i * a2i);\n    si += len * (a4r * a2i + a4i * a2r);\n    sl += len;\n    if (len > 1e-6 && nn \u003c NBMAX) S.nb[i * NBMAX + nn++] = CJ[k];\n  }\n  S.pr[i] = sl > 0 ? sr / sl : 0;\n  S.pi[i] = sl > 0 ? si / sl : 0;\n  S.nn[i] = nn;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    x: new Float64Array(N), y: new Float64Array(N), cell: new Int32Array(N), pos: new Int32Array(N),\n    cnt: new Int32Array(NC), slot: new Int32Array(NC * CAP),\n    pr: new Float32Array(N), pi: new Float32Array(N), nn: new Uint8Array(N), nb: new Int32Array(N * NBMAX),\n    qr: new Float32Array(N), qi: new Float32Array(N), col: new Float32Array(N * 3), sx: new Float64Array(N), sy: new Float64Array(N),\n    buf: new Float32Array(W * H * 3),\n    d: 2.6, dT: diam(0.68), hue: 0, speed: 2, eta: 0.68, cells: 0.06, warm: false, melt: 0, acc: 0, lifts: 0,\n  });\n  // Random sequential placement at a small diameter, 0.24 packing.\n  for (let i = 0; i \u003c N; i++) {\n    for (let tries = 0; tries \u003c 2000; tries++) {\n      const x = random() * W, y = random() * H;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) {\n        const rx = wx(S.x[j] - x), ry = wy(S.y[j] - y);\n        if (rx * rx + ry * ry \u003c S.d * S.d) ok = false;\n      }\n      if (ok) {\n        S.x[i] = x;\n        S.y[i] = y;\n        break;\n      }\n    }\n    put(S, i);\n  }\n}\n\nfunction analyse(S, ease) {\n  for (let i = 0; i \u003c N; i++) voronoi(S, i);\n  // Coarse grain over the disk and its Voronoi neighbours, then ease in time.\n  for (let i = 0; i \u003c N; i++) {\n    let r = S.pr[i], m = S.pi[i];\n    const n = S.nn[i];\n    for (let k = 0; k \u003c n; k++) {\n      const j = S.nb[i * NBMAX + k];\n      r += S.pr[j];\n      m += S.pi[j];\n    }\n    r /= n + 1;\n    m /= n + 1;\n    S.qr[i] += (r - S.qr[i]) * ease;\n    S.qi[i] += (m - S.qi[i]) * ease;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.68, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.eta = cl(k[2], ETA0, ETA1);\n  S.cells = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) S.melt = MELT;\n  S.melt = max(0, S.melt - d * S.speed / 2);\n  S.dT = diam(S.melt > 0 ? 0.6 : S.eta);\n  if (!S.warm) {\n    for (let r = 0; r \u003c 600 && S.d \u003c S.dT; r++) {\n      chains(S, 40);\n      grow(S, 0.004);\n    }\n    for (let r = 0; r \u003c 60; r++) chains(S, 40);\n    analyse(S, 1);\n    S.sx.set(S.x);\n    S.sy.set(S.y);\n    S.warm = true;\n  }\n  // Chains this frame, in three batches with a growth step after each.\n  S.acc += S.speed * CPS * d;\n  const n = floor(S.acc);\n  S.acc -= n;\n  let lifts = 0;\n  for (let b = 0; b \u003c 3; b++) {\n    lifts += chains(S, floor(n / 3) + (b \u003c n % 3 ? 1 : 0));\n    grow(S, (GROW * d * S.speed) / 2 / 3);\n  }\n  S.lifts = lifts;\n  analyse(S, 0.35);\n  // The disks are drawn where they have been over the last few frames, not\n  // where the last chain left them: each one rattles in its cage by about\n  // 0.4 LED from frame to frame, which flickers on the panel.\n  for (let i = 0; i \u003c N; i++) {\n    S.sx[i] += wx(S.x[i] - S.sx[i]) * EASE;\n    S.sy[i] += wy(S.y[i] - S.sy[i]) * EASE;\n    S.sx[i] = (S.sx[i] + W) % W;\n    S.sy[i] = (S.sy[i] + H) % H;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, col, sx: X, sy: Y } = S;\n  buf.fill(0);\n  // Disk colours: hue from the phase of psi6, and from its size a blend\n  // from a dim slate (liquid) to the full colour (crystal).\n  for (let i = 0; i \u003c N; i++) {\n    const r = S.qr[i], m = S.qi[i], mag = sqrt(r * r + m * m), o = sm(O0, O1, mag), n = S.nn[i], c = i * 3;\n    if (n !== 6) {\n      const w = 0.5 + 0.5 * o;\n      col[c] = col[c + 1] = col[c + 2] = n \u003c 6 ? w : -w;\n      continue;\n    }\n    const h = S.hue + 0.47 + atan2(m, r) / (2 * PI), hh = h - floor(h);\n    // Orange and yellow at less than full brightness read brown and olive,\n    // so there the colour goes paler instead.\n    const warm = sm(0.0, 0.05, hh) * (1 - sm(0.17, 0.24, hh));\n    hsv(h, 0.88 - 0.38 * warm, 1, col, c);\n    col[c] = SL[0] + (col[c] - SL[0]) * o;\n    col[c + 1] = SL[1] + (col[c + 1] - SL[1]) * o;\n    col[c + 2] = SL[2] + (col[c + 2] - SL[2]) * o;\n  }\n  const R = S.d / 2 - 0.25, R7 = R - 0.95;\n  for (let i = 0; i \u003c N; i++) {\n    const xi = X[i], yi = Y[i], c = i * 3;\n    let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n    // A 7-neighbour disk is a ring with a dark core.\n    const ring = cr \u003c 0;\n    if (ring) cr = cg = cb = -cr;\n    for (let yy = floor(yi - R - 1); yy \u003c= yi + R + 1; yy++)\n      for (let xx = floor(xi - R - 1); xx \u003c= xi + R + 1; xx++) {\n        const ex = xx + 0.5 - xi, ey = yy + 0.5 - yi, e = sqrt(ex * ex + ey * ey);\n        let cov = cl(R + 0.5 - e, 0, 1);\n        if (ring) cov *= cl(e - R7, 0, 1);\n        if (cov \u003c= 0) continue;\n        const px = (xx + W) % W, py = (yy + H) % H, p = (py * W + px) * 3;\n        buf[p] = max(buf[p], cr * cov);\n        buf[p + 1] = max(buf[p + 1], cg * cov);\n        buf[p + 2] = max(buf[p + 2], cb * cov);\n      }\n  }\n  if (S.cells > 0.02) cells(S, buf, col);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, round(255 * buf[p]), round(255 * buf[p + 1]), round(255 * buf[p + 2]));\n}\n\n// The Voronoi field: each LED takes the colour of its nearest disk, darkened\n// where the second nearest is almost as near, which draws the cell edges.\nfunction cells(S, buf, col) {\n  const X = S.x, Y = S.y, lv = S.cells;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const fx = x + 0.5, fy = y + 0.5, cx = floor(fx / C), cy = floor(fy / C);\n      let b1 = 1e9, b2 = 1e9, j1 = 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m], rx = wx(X[j] - fx), ry = wy(Y[j] - fy), r2 = rx * rx + ry * ry;\n            if (r2 \u003c b1) (b2 = b1), (b1 = r2), (j1 = j);\n            else if (r2 \u003c b2) b2 = r2;\n          }\n        }\n      // Distance to the bisector of the two nearest is (r2^2 - r1^2) / 2 r12;\n      // with r12 about one spacing this is close enough for a seam.\n      const edge = sm(0.1, 0.7, (b2 - b1) / (2 * S.d)), c = j1 * 3;\n      let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n      if (cr \u003c 0) cr = cg = cb = 0.05;\n      const g = lv * edge;\n      buf[p] = max(buf[p], cr * g);\n      buf[p + 1] = max(buf[p + 1], cg * g);\n      buf[p + 2] = max(buf[p + 2], cb * g);\n    }\n}\n\nfunction sm(a, b, v) {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together."},{"name":"Speed","min":0.2,"max":3,"about":"Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it."},{"name":"Density","min":0.68,"max":0.76,"about":"The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs."},{"name":"Cells","min":0,"max":1,"about":"From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring."}],"start":[0,2,0.68,0.06],"measures":{"motion":2.3076,"detail":0.1862,"edges":0.5515,"complexity":2.0903,"coverage":0.6781,"colour":0.3428,"drift":0.1672},"knobResponse":[0.1472,0.2305,0.3425,0.068]},{"slug":"high-dive","title":"High Dive","family":"sport","round":23,"note":"밤의 실내 다이빙장을 옆에서 봐요. 다이버가 콘크리트 타워의 지그재그 계단을 올라 10 m 플랫폼 조명 아래 서고, 1.6초 동안 공중제비를 돌며 떨어져 물에 들어가면 물속에 기포 기둥이 오르고 전광판에 심판 일곱 명의 점수가 떠요. K3 이 앞으로 뛰기부터 세 바퀴 반과 비틀기까지 다이빙을 골라요.","idea":"A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.","buttons":"K1 tap sends the waiting diver off now, or hurries the one on the stairs.","code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","layer":{"id":"layer-high-dive","type":"code","name":"high-dive","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Pool","min":0,"max":1,"about":"The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls."},{"name":"Speed","min":0.2,"max":3,"about":"Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2."},{"name":"Dive","min":0,"max":4,"about":"The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty."},{"name":"Lights","min":0,"max":1,"about":"From a dim night practice with only the tower lamps on to full competition lights."}],"start":[0,2,0,0.06],"measures":{"motion":0.3915,"detail":0.0721,"edges":0.2796,"complexity":1.8967,"coverage":0.7436,"colour":0.2296,"drift":0.0344},"knobResponse":[0.0986,0.0554,0.0399,0.1523]},{"slug":"high-striker","title":"High Striker","family":"fair","round":20,"note":"밤 장터의 하이 스트라이커가 128줄을 다 써요. 줄 선 사람들이 차례로 망치를 내리치면 퍽이 실제 중력으로 레일을 오르며 눈금을 켜다가 떨어지고, 세게 친 판이나 K1 을 누른 판에는 꼭대기 놋쇠 종이 울려 전구가 깜박이고 하늘이 밝아져요.","idea":"A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.","buttons":"K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.","code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-high-striker","type":"code","name":"high-striker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Strength","min":60,"max":130,"about":"How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder."},{"name":"Gravity","min":-1,"max":1,"about":"The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker."}],"start":[0,2,60,0.06],"measures":{"motion":0.2551,"detail":0.0819,"edges":0.4794,"complexity":1.4989,"coverage":0.8211,"colour":0.2622,"drift":0.1521},"knobResponse":[0.0547,0.0439,0.0765,0.0768]},{"slug":"hofstadter-butterfly","title":"Hofstadter Butterfly","family":"fractal","round":30,"note":"자기장 속 격자 전자의 에너지 띠를 가로에, 자속을 세로에 놓았어요. 띠 사이 틈마다 홀 전도도의 정수로 칠해 날개가 서고, 같은 밀도의 줄이 날개를 따라 흘러요.","idea":"The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.","buttons":"K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.","code":"// ===== Patternflow pattern =====\n// Title:   Hofstadter Butterfly\n// Family:  fractal\n// Idea:    The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hofstadter's butterfly (Douglas Hofstadter, 1976), coloured by the gap labels of Thouless, Kohmoto, Nightingale and den Nijs (1982), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1\n//\n// Knob 1: Hue. Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on.\n// Knob 2: Speed. At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower.\n// Knob 3: Depth. The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in.\n// Knob 4: Coupling. lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was.\n// Buttons: K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.\n\nconst W = 64, H = 128, S = 6, NS = W * S;\nconst { floor, round, cos, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst BAND = 127, TM = 40;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The nearest fraction p/q to a with q at most Q; on a tie the smaller q, so\n// p/q comes out in lowest terms.\nfunction nearest(a, Q) {\n  let bp = 0, bq = 1, bd = 9;\n  for (let q = 1; q \u003c= Q; q++) {\n    const p = round(a * q), d = abs(a - p / q);\n    if (d \u003c bd - 1e-12) (bd = d), (bp = p), (bq = q);\n  }\n  return [bp, bq];\n}\n\n// Harper's equation, psi(n+1) + psi(n-1) + 2 lambda cos(2 pi alpha n + nu)\n// psi(n) = E psi(n), at alpha = p/q. Row y has flux (127 - y) / 127, so 0 at\n// the bottom and 1 at the top; column x has energy across -(2 + 2 lambda) to\n// 2 + 2 lambda, six samples to an LED.\n//\n// For each sample: the trace D of the product of the q transfer matrices\n// [[E - V(n), -1], [1, 0]], taken at nu = pi / 2q. Chambers' relation says the\n// trace at any other nu is D - 2 lambda^q cos(q nu), so E is in the spectrum\n// at phase nu where |D - 2 lambda^q cos(q nu)| \u003c= 2, and at some phase where\n// |D| \u003c= 2 + 2 lambda^q. Both are checked against the one cached D, so the\n// phase turns every frame for nothing.\n//\n// In a gap, r bands lie below E. r comes from a Sturm count: the negative\n// pivots of the chain cut off at 3q sites count its levels below E, which are\n// 3r give or take one. The gap labelling theorem puts the density there at\n// N = r / q = s + t p / q with whole s and t, so r = t p mod q, and t is r times\n// the inverse of p mod q, taken between -q/2 and q/2. t is the Hall\n// conductance of a filled gap in units of e^2/h. t = 0 only below and above\n// the whole spectrum.\nconst V = new Float64Array(128);\nfunction buildRow(P, y) {\n  const a = (H - 1 - y) / (H - 1), [p, q] = nearest(a, P.Q), lam = P.lam;\n  if (P.rp[y] === p && P.rq[y] === q && P.rlam[y] === lam) return 0;\n  (P.rp[y] = p), (P.rq[y] = q), (P.rlam[y] = lam);\n  const Em = 2 + 2 * lam, lq = lam ** q, lim = 2 + 2 * lq;\n  let pin = 1;\n  while ((p * pin) % q !== 1 % q) pin++;\n  for (let n = 0; n \u003c q; n++) V[n] = 2 * lam * cos((2 * PI * p * (n + 1)) / q + PI / (2 * q));\n  P.rl[y] = 2 * lq;\n  const o = y * NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const E = -Em + ((j + 0.5) * 2 * Em) / NS;\n    let a0 = 1, b0 = 0, c0 = 0, d0 = 1;\n    for (let n = 0; n \u003c q; n++) {\n      const v = E - V[n], na = v * a0 - c0, nb = v * b0 - d0;\n      (c0 = a0), (d0 = b0), (a0 = na), (b0 = nb);\n    }\n    const D = a0 + d0;\n    P.D[o + j] = D;\n    if (abs(D) \u003c= lim) {\n      (P.T[o + j] = BAND), (P.R[o + j] = 255);\n      continue;\n    }\n    let cnt = 0, dp = 1e300;\n    for (let k = 0; k \u003c 3; k++)\n      for (let n = 0; n \u003c q; n++) {\n        let dd = V[n] - E - 1 / dp;\n        if (dd === 0) dd = 1e-300;\n        if (dd \u003c 0) cnt++;\n        dp = dd;\n      }\n    const r = round(cnt / 3);\n    let t = (r * pin) % q;\n    if (t > q / 2) t -= q;\n    P.T[o + j] = r === 0 || r === q ? 0 : t;\n    P.R[o + j] = r;\n  }\n  return 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    D: new Float64Array(H * NS), T: new Int8Array(H * NS), R: new Uint8Array(H * NS),\n    rp: new Int32Array(H).fill(-1), rq: new Int32Array(H), rlam: new Float64Array(H), rl: new Float64Array(H),\n    Q: -1, lam: -1, next: H, phi: 0, wave: 0, hue: NaN, bw: 0, hold: 0,\n    pal: new Float32Array((2 * TM + 1) * 3), M: new Float32Array(2 * TM + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  const Q = round(cl(k[2], 16, 64)), K4 = cl(k[3], -1, 1);\n  const lam = abs(K4) \u003c 0.08 ? 1 : 2 ** (round(K4 * 50) / 50);\n  // The first frame builds all 128 rows (9 ms at Depth 16, 40 at 64). After a\n  // turn of K3 or K4 the rows are built again from the bottom, about 512\n  // periods' worth a frame, so a full redraw takes half a second; a row whose\n  // fraction and lambda did not change is kept.\n  const first = P.Q \u003c 0;\n  if (Q !== P.Q || lam !== P.lam) (P.Q = Q), (P.lam = lam), (P.next = 0);\n  for (let budget = first ? 1e9 : 512; budget > 0 && P.next \u003c H; ) budget -= buildRow(P, H - 1 - P.next++) * P.Q;\n  const sp = cl(k[1], 0.2, 3);\n  P.phi += d * sp;\n  P.wave += d * sp * 0.125;\n  if (input.btnPressed && input.btnPressed[0]) P.hold = 6;\n  P.hold = max(0, P.hold - d);\n  P.bw = cl(P.bw + (P.hold > 0 ? d : -d) * 1.5, 0, 1);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    for (let t = -TM; t \u003c= TM; t++) {\n      const o = (t + TM) * 3, at = abs(t);\n      if (t === 0) (P.pal[o] = 0), (P.pal[o + 1] = 0), (P.pal[o + 2] = 0);\n      else hsv(k[0] + (t > 0 ? 0.5 : 0.85) - 0.05 * min(at - 1, 4), 0.82, max(0.32, 1 / (1 + 0.2 * (at - 1))), P.pal, o);\n    }\n  }\n}\n\n// In a gap with label t, the density N = s + t alpha climbs t whole units from\n// the bottom of the panel to the top (Streda's formula: dN / d alpha = t).\n// Each gap is lit by cos(2 pi (2 N - w)), which needs only t alpha because s is\n// whole: as w grows, the lines of equal N rise through a gap at 1 / t of the\n// pace of the t = 1 wings, and sink where t is negative.\nconst WK = 2;\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.Q \u003c 0) return;\n  const pal = P.pal, M = P.M, bw = P.bw, cw = 1 - bw;\n  for (let y = 0; y \u003c H; y++) {\n    const c = P.rl[y] * cos(P.phi), o = y * NS, al = (H - 1 - y) / (H - 1);\n    for (let t = -TM; t \u003c= TM; t++) M[t + TM] = cw * (0.7 + 0.3 * cos(2 * PI * (WK * t * al - P.wave)));\n    let prev = P.R[o];\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0, miss = 0;\n      for (let j = x * S; j \u003c x * S + S; j++) {\n        const t = P.T[o + j], rr = P.R[o + j];\n        if (t === BAND) {\n          // White where the band is at the present phase, grey where it is at\n          // some other phase. In the 0, 1/2 and 1 rows the white slides across.\n          const w = abs(P.D[o + j] - c) \u003c= 2 ? 255 : 110;\n          (r += w), (g += w), (b += w);\n        } else {\n          // r changed between two gap samples: bands thinner than a sample lie\n          // between them, and their count lights the LED.\n          if (prev !== 255 && rr !== prev) miss += abs(rr - prev);\n          const q = (t + TM) * 3, f = M[t + TM];\n          (r += pal[q] * f), (g += pal[q + 1] * f), (b += pal[q + 2] * f);\n        }\n        prev = rr;\n      }\n      const wm = min(1, miss * (0.2 + 0.5 * bw));\n      (r /= S), (g /= S), (b /= S);\n      display.setPixel(x, y, r + (210 - r) * wm, g + (210 - g) * wm, b + (210 - b) * wm);\n    }\n  }\n}\n","layer":{"id":"layer-hofstadter-butterfly","type":"code","name":"hofstadter-butterfly","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hofstadter Butterfly\n// Family:  fractal\n// Idea:    The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hofstadter's butterfly (Douglas Hofstadter, 1976), coloured by the gap labels of Thouless, Kohmoto, Nightingale and den Nijs (1982), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1\n//\n// Knob 1: Hue. Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on.\n// Knob 2: Speed. At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower.\n// Knob 3: Depth. The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in.\n// Knob 4: Coupling. lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was.\n// Buttons: K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.\n\nconst W = 64, H = 128, S = 6, NS = W * S;\nconst { floor, round, cos, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst BAND = 127, TM = 40;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The nearest fraction p/q to a with q at most Q; on a tie the smaller q, so\n// p/q comes out in lowest terms.\nfunction nearest(a, Q) {\n  let bp = 0, bq = 1, bd = 9;\n  for (let q = 1; q \u003c= Q; q++) {\n    const p = round(a * q), d = abs(a - p / q);\n    if (d \u003c bd - 1e-12) (bd = d), (bp = p), (bq = q);\n  }\n  return [bp, bq];\n}\n\n// Harper's equation, psi(n+1) + psi(n-1) + 2 lambda cos(2 pi alpha n + nu)\n// psi(n) = E psi(n), at alpha = p/q. Row y has flux (127 - y) / 127, so 0 at\n// the bottom and 1 at the top; column x has energy across -(2 + 2 lambda) to\n// 2 + 2 lambda, six samples to an LED.\n//\n// For each sample: the trace D of the product of the q transfer matrices\n// [[E - V(n), -1], [1, 0]], taken at nu = pi / 2q. Chambers' relation says the\n// trace at any other nu is D - 2 lambda^q cos(q nu), so E is in the spectrum\n// at phase nu where |D - 2 lambda^q cos(q nu)| \u003c= 2, and at some phase where\n// |D| \u003c= 2 + 2 lambda^q. Both are checked against the one cached D, so the\n// phase turns every frame for nothing.\n//\n// In a gap, r bands lie below E. r comes from a Sturm count: the negative\n// pivots of the chain cut off at 3q sites count its levels below E, which are\n// 3r give or take one. The gap labelling theorem puts the density there at\n// N = r / q = s + t p / q with whole s and t, so r = t p mod q, and t is r times\n// the inverse of p mod q, taken between -q/2 and q/2. t is the Hall\n// conductance of a filled gap in units of e^2/h. t = 0 only below and above\n// the whole spectrum.\nconst V = new Float64Array(128);\nfunction buildRow(P, y) {\n  const a = (H - 1 - y) / (H - 1), [p, q] = nearest(a, P.Q), lam = P.lam;\n  if (P.rp[y] === p && P.rq[y] === q && P.rlam[y] === lam) return 0;\n  (P.rp[y] = p), (P.rq[y] = q), (P.rlam[y] = lam);\n  const Em = 2 + 2 * lam, lq = lam ** q, lim = 2 + 2 * lq;\n  let pin = 1;\n  while ((p * pin) % q !== 1 % q) pin++;\n  for (let n = 0; n \u003c q; n++) V[n] = 2 * lam * cos((2 * PI * p * (n + 1)) / q + PI / (2 * q));\n  P.rl[y] = 2 * lq;\n  const o = y * NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const E = -Em + ((j + 0.5) * 2 * Em) / NS;\n    let a0 = 1, b0 = 0, c0 = 0, d0 = 1;\n    for (let n = 0; n \u003c q; n++) {\n      const v = E - V[n], na = v * a0 - c0, nb = v * b0 - d0;\n      (c0 = a0), (d0 = b0), (a0 = na), (b0 = nb);\n    }\n    const D = a0 + d0;\n    P.D[o + j] = D;\n    if (abs(D) \u003c= lim) {\n      (P.T[o + j] = BAND), (P.R[o + j] = 255);\n      continue;\n    }\n    let cnt = 0, dp = 1e300;\n    for (let k = 0; k \u003c 3; k++)\n      for (let n = 0; n \u003c q; n++) {\n        let dd = V[n] - E - 1 / dp;\n        if (dd === 0) dd = 1e-300;\n        if (dd \u003c 0) cnt++;\n        dp = dd;\n      }\n    const r = round(cnt / 3);\n    let t = (r * pin) % q;\n    if (t > q / 2) t -= q;\n    P.T[o + j] = r === 0 || r === q ? 0 : t;\n    P.R[o + j] = r;\n  }\n  return 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    D: new Float64Array(H * NS), T: new Int8Array(H * NS), R: new Uint8Array(H * NS),\n    rp: new Int32Array(H).fill(-1), rq: new Int32Array(H), rlam: new Float64Array(H), rl: new Float64Array(H),\n    Q: -1, lam: -1, next: H, phi: 0, wave: 0, hue: NaN, bw: 0, hold: 0,\n    pal: new Float32Array((2 * TM + 1) * 3), M: new Float32Array(2 * TM + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  const Q = round(cl(k[2], 16, 64)), K4 = cl(k[3], -1, 1);\n  const lam = abs(K4) \u003c 0.08 ? 1 : 2 ** (round(K4 * 50) / 50);\n  // The first frame builds all 128 rows (9 ms at Depth 16, 40 at 64). After a\n  // turn of K3 or K4 the rows are built again from the bottom, about 512\n  // periods' worth a frame, so a full redraw takes half a second; a row whose\n  // fraction and lambda did not change is kept.\n  const first = P.Q \u003c 0;\n  if (Q !== P.Q || lam !== P.lam) (P.Q = Q), (P.lam = lam), (P.next = 0);\n  for (let budget = first ? 1e9 : 512; budget > 0 && P.next \u003c H; ) budget -= buildRow(P, H - 1 - P.next++) * P.Q;\n  const sp = cl(k[1], 0.2, 3);\n  P.phi += d * sp;\n  P.wave += d * sp * 0.125;\n  if (input.btnPressed && input.btnPressed[0]) P.hold = 6;\n  P.hold = max(0, P.hold - d);\n  P.bw = cl(P.bw + (P.hold > 0 ? d : -d) * 1.5, 0, 1);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    for (let t = -TM; t \u003c= TM; t++) {\n      const o = (t + TM) * 3, at = abs(t);\n      if (t === 0) (P.pal[o] = 0), (P.pal[o + 1] = 0), (P.pal[o + 2] = 0);\n      else hsv(k[0] + (t > 0 ? 0.5 : 0.85) - 0.05 * min(at - 1, 4), 0.82, max(0.32, 1 / (1 + 0.2 * (at - 1))), P.pal, o);\n    }\n  }\n}\n\n// In a gap with label t, the density N = s + t alpha climbs t whole units from\n// the bottom of the panel to the top (Streda's formula: dN / d alpha = t).\n// Each gap is lit by cos(2 pi (2 N - w)), which needs only t alpha because s is\n// whole: as w grows, the lines of equal N rise through a gap at 1 / t of the\n// pace of the t = 1 wings, and sink where t is negative.\nconst WK = 2;\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.Q \u003c 0) return;\n  const pal = P.pal, M = P.M, bw = P.bw, cw = 1 - bw;\n  for (let y = 0; y \u003c H; y++) {\n    const c = P.rl[y] * cos(P.phi), o = y * NS, al = (H - 1 - y) / (H - 1);\n    for (let t = -TM; t \u003c= TM; t++) M[t + TM] = cw * (0.7 + 0.3 * cos(2 * PI * (WK * t * al - P.wave)));\n    let prev = P.R[o];\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0, miss = 0;\n      for (let j = x * S; j \u003c x * S + S; j++) {\n        const t = P.T[o + j], rr = P.R[o + j];\n        if (t === BAND) {\n          // White where the band is at the present phase, grey where it is at\n          // some other phase. In the 0, 1/2 and 1 rows the white slides across.\n          const w = abs(P.D[o + j] - c) \u003c= 2 ? 255 : 110;\n          (r += w), (g += w), (b += w);\n        } else {\n          // r changed between two gap samples: bands thinner than a sample lie\n          // between them, and their count lights the LED.\n          if (prev !== 255 && rr !== prev) miss += abs(rr - prev);\n          const q = (t + TM) * 3, f = M[t + TM];\n          (r += pal[q] * f), (g += pal[q + 1] * f), (b += pal[q + 2] * f);\n        }\n        prev = rr;\n      }\n      const wm = min(1, miss * (0.2 + 0.5 * bw));\n      (r /= S), (g /= S), (b /= S);\n      display.setPixel(x, y, r + (210 - r) * wm, g + (210 - g) * wm, b + (210 - b) * wm);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower."},{"name":"Depth","min":16,"max":64,"about":"The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in."},{"name":"Coupling","min":-1,"max":1,"about":"lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was."}],"start":[0,2,16,0.06],"measures":{"motion":0.216,"detail":0.0564,"edges":0.3637,"complexity":0.928,"coverage":0.7618,"colour":0.4337,"drift":0.1658},"knobResponse":[0.2654,0.1807,0.0682,0.2004]},{"slug":"hopf-fibration","title":"Hopf Fibration","family":"topology","round":29,"note":"3차원 구면을 채운 원들을 입체 사영해 원근으로 그려요. 같은 위도의 밑점에서 온 원들이 겹겹의 토러스로 소용돌이치고, 가운데 세로선이 무한을 지나는 원이에요. K3 은 토러스 수(5~7)이고, K1 을 누르면 두 원만 남아 한 번 얽힌 것이 보여요.","idea":"The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.","buttons":"K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.","code":"// ===== Patternflow pattern =====\n// Title:   Hopf Fibration\n// Family:  topology\n// Idea:    The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hopf fibration (Heinz Hopf, 1931), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17\n//\n// Knob 1: Hue. Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point.\n// Knob 2: Speed. How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks.\n// Knob 3: Rings. How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line.\n// Knob 4: Fibres. How many fibres each torus has, from 14 to 17.\n// Buttons: K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, acos, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// Points round one fibre, and the most fibres on show: seven tori of\n// seventeen, the ring and the line.\nconst NT = 96, MAXF = 7 * 17 + 2, MAXS = MAXF * NT;\nconst CT = new Float32Array(NT), ST = new Float32Array(NT);\nfor (let i = 0; i \u003c NT; i++) (CT[i] = cos((TAU * i) / NT)), (ST[i] = sin((TAU * i) / NT));\n\n// Camera distance from the middle of the ring and focal length in LEDs: the\n// ring, radius 1, is 16 LEDs from the line. Depth bins for the painter.\nconst D = 7, F = D * 16, CX = 31.5, CY = 64, NB = 64, NEAR = 0.4;\n// Polar angles of the innermost and outermost circle of base points.\nconst TH0 = 0.6, TH1 = 2.35;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), I32 = (n) => new Int32Array(n);\n  params.s = {\n    T: 0, tilt: 0, tiltTo: 0, pair: 0, hue: 0, rings: 5, fib: 14, ns: 0, cam: new Float64Array(8),\n    buf: F32(N * 3),\n    // Every fibre point on screen with its depth.\n    sx: F32(MAXS), sy: F32(MAXS), sz: F32(MAXS),\n    col: F32(MAXF * 3), lit: F32(MAXF), pp: F32(MAXF),\n    // Segments as (first point, last point), sorted far to near by depth bin.\n    sa: I32(MAXS), sb: I32(MAXS), key: new Uint8Array(MAXS), ord: I32(MAXS), bin: I32(NB + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  // 1.3 a second at Speed 2, so the strands sweep across the panel rather\n  // than drift.\n  P.T += d * cl(k[1], 0.2, 3) * 1.3;\n  P.rings = cl(k[2], 5, 7);\n  P.fib = cl(k[3], 14, 17);\n  const b = input.btnPressed || [];\n  if (b[0]) P.pair = 5;\n  if (b[1]) P.tiltTo = P.tiltTo ? 0 : 1;\n  P.pair = max(0, P.pair - d);\n  P.tilt += cl(P.tiltTo - P.tilt, -d * 0.5, d * 0.5);\n}\n\n// One fibre into the point arrays. The base point sits at polar angle th\n// from the pole whose fibre is the ring, at longitude ph; with a = th/2 its\n// fibre is (cos a e^{i(t+ph)}, sin a e^{it}) on the 3-sphere, projected\n// stereographically from (0,0,0,1) and then through the camera.\nfunction fibre(P, f, th, ph, cam) {\n  const a = th / 2, ca = cos(a), sa = sin(a), cp = cos(ph) * ca, sp = sin(ph) * ca;\n  const rx = cam[0], ry = cam[1], ux = cam[2], uy = cam[3], uz = cam[4], fx = cam[5], fy = cam[6], fz = cam[7];\n  const sx = P.sx, sy = P.sy, sz = P.sz;\n  for (let i = 0, o = f * NT; i \u003c NT; i++, o++) {\n    const c = CT[i], s = ST[i], q = 1 / (1 - sa * s + 1e-6);\n    const X = (c * cp - s * sp) * q, Y = (s * cp + c * sp) * q, Z = sa * c * q;\n    const iz = F / (D + X * fx + Y * fy + Z * fz);\n    sz[o] = F / iz;\n    sx[o] = CX + (X * rx + Y * ry) * iz;\n    sy[o] = CY - (X * ux + Y * uy + Z * uz) * iz;\n  }\n}\n\n// One segment: an antialiased core whose half width hw comes from depth, and\n// a faint halo hl wide of the same light. Each LED is pulled toward the\n// line's colour by its cover, so a near strand passes over a far one with a\n// thin dark seam: that seam is what shows which of two fibres is in front.\n// The segment is walked one LED at a time along its longer axis and owns the\n// LEDs whose centres fall in [start, end) there, so the segments of one\n// fibre meet without gaps or double cover.\nfunction line(buf, x0, y0, x1, y1, r, g, b, hw, hl, op) {\n  const dx = x1 - x0, dy = y1 - y0, E = hw + 0.5 + hl, flat = abs(dx) >= abs(dy);\n  if (abs(dx) + abs(dy) \u003c 1e-3) return;\n  // Along the major axis a, across it c; k is the slope, cs the cosine that\n  // turns a distance across into a distance from the line.\n  const a0 = flat ? x0 : y0, a1 = flat ? x1 : y1, c0 = flat ? y0 : x0, k = flat ? dy / dx : dx / dy;\n  const cs = 1 / sqrt(1 + k * k), ec = E / cs, na = flat ? W : H, nc = flat ? H : W, sa = flat ? 3 : W * 3, sc = flat ? W * 3 : 3;\n  const s0 = max(0, Math.ceil(min(a0, a1) - 0.5)), s1 = min(na - 1, Math.ceil(max(a0, a1) - 0.5) - 1);\n  for (let i = s0; i \u003c= s1; i++) {\n    const cc = c0 + (i + 0.5 - a0) * k, j0 = max(0, Math.ceil(cc - ec - 0.5)), j1 = min(nc - 1, floor(cc + ec - 0.5));\n    for (let j = j0, q = i * sa + j0 * sc; j \u003c= j1; j++, q += sc) {\n      const e = (j + 0.5 - cc) * cs, dd = (e \u003c 0 ? -e : e) - hw;\n      if (dd > E - hw) continue;\n      const w = (dd \u003c -0.5 ? 1 : dd \u003c 0.2 ? 0.5 - dd : dd \u003c 0.5 ? 0.3 : (0.3 * (E - hw - dd)) / hl) * op;\n      buf[q] += (r - buf[q]) * w;\n      buf[q + 1] += (g - buf[q + 1]) * w;\n      buf[q + 2] += (b - buf[q + 2]) * w;\n    }\n  }\n}\n\n// One segment into the depth bins, unless it is off the panel or stretched\n// across it by passing close to the camera.\nfunction emit(P, a, b) {\n  const { sx, sy, sz } = P, x0 = sx[a], y0 = sy[a], x1 = sx[b], y1 = sy[b];\n  if (abs(x1 - x0) + abs(y1 - y0) >= 70) return;\n  if ((x0 \u003c -3 && x1 \u003c -3) || (x0 > W + 3 && x1 > W + 3) || (y0 \u003c -3 && y1 \u003c -3) || (y0 > H + 3 && y1 > H + 3)) return;\n  const kb = cl(floor((((sz[a] + sz[b]) / 2 - (D - 4)) / 8) * NB), 0, NB - 1);\n  P.key[P.ns] = kb;\n  P.sa[P.ns] = a;\n  P.sb[P.ns++] = b;\n  P.bin[kb + 1]++;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const T = P.T, buf = P.buf, { sx, sy, sz, sa, sb, key, ord, bin, col, lit } = P;\n  buf.fill(0);\n  // The camera turns slowly round the line and rocks between looking across\n  // the tori and looking down into the ring.\n  const az = 0.5 + T * 0.05, el = 0.75 + 0.2 * sin(T * 0.11);\n  const ce = cos(el), se = sin(el), ca = cos(az), sn = sin(az);\n  const cam = P.cam;\n  cam[0] = -sn;\n  cam[1] = ca;\n  cam[2] = -se * ca;\n  cam[3] = -se * sn;\n  cam[4] = ce;\n  cam[5] = -ce * ca;\n  cam[6] = -ce * sn;\n  cam[7] = -se;\n  const nr = P.rings, n = floor(P.fib), tl = sm(P.tilt) * 1.1, ct = cos(tl), st = sin(tl);\n  // After a K1 tap one fibre of the innermost torus and one of the next stay\n  // lit and the rest dim to under a third.\n  const hi = sm(P.pair) * 0.7, pick0 = 0, pick1 = floor(n / 2) + 1;\n  let nf = 0;\n  for (let j = 0; j \u003c 7; j++) {\n    const on = cl(nr - j, 0, 1);\n    if (on \u003c= 0) break;\n    // Latitudes spread evenly from near the ring's pole to near the line's,\n    // each breathing on its own phase; a ring the knob is still bringing in\n    // fades up on the outermost one while the others close up.\n    const u = min(j, nr - 1) / (nr - 1), th0 = TH0 + (TH1 - TH0) * u + 0.1 * sin(T * 0.35 + j * 1.7), dir = j & 1 ? -1 : 1;\n    for (let i = 0; i \u003c n; i++) {\n      const ph = (TAU * i) / n + dir * T * 0.25 + j * 0.4;\n      // The base point, its circle of latitude tipped about the x axis.\n      const bx = sin(th0) * cos(ph), by0 = sin(th0) * sin(ph), bz0 = cos(th0);\n      const by = by0 * ct - bz0 * st, bz = by0 * st + bz0 * ct;\n      fibre(P, nf, acos(cl(bz, -1, 1)), atan2(by, bx), cam);\n      // Hue from longitude, and paler toward the ring's pole, deeper and\n      // darker toward the line's.\n      hsv(P.hue + 0.55 + i / n, 0.45 + 0.5 * u, on * (1 - 0.4 * u), col, nf * 3);\n      const picked = (j === 0 && i === pick0) || (j === 1 && i === pick1);\n      lit[nf] = picked ? 1 + hi : 1 - hi;\n      P.pp[nf] = ph + j * 1.3;\n      nf++;\n    }\n  }\n  // The ring, fibre over one pole, and the line through infinity, the fibre\n  // over the other: on the panel a vertical line through the middle.\n  const rl = 1 - hi * 0.6;\n  fibre(P, nf, 0, 0, cam);\n  P.pp[nf] = 0;\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  lit[nf++] = rl;\n  for (let i = 0, o = nf * NT; i \u003c NT; i++, o++) {\n    const Z = (i / (NT - 1) - 0.5) * 60, zc = D + Z * cam[7];\n    sz[o] = zc;\n    sx[o] = CX;\n    sy[o] = CY - (F * Z * cam[4]) / zc;\n  }\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  P.pp[nf] = 0;\n  lit[nf++] = rl;\n\n  // Cut each fibre into segments as long as they can be while the curve\n  // between their ends stays within 0.3 LED of the chord (and under 12 LEDs),\n  // skipping what lies behind the camera or off the panel; bin them by depth.\n  bin.fill(0);\n  P.ns = 0;\n  for (let f = 0; f \u003c nf; f++) {\n    const o = f * NT, end = f \u003c nf - 1 ? NT : NT - 1;\n    let ia = 0;\n    for (let i = 1; i \u003c= end; ) {\n      const a = o + ia, b = o + (i % NT), ok = sz[a] > NEAR && sz[b] > NEAR;\n      if (ok && i \u003c end && i - ia \u003c 16) {\n        const dx = sx[b] - sx[a], dy = sy[b] - sy[a], m = o + ((ia + i) >> 1);\n        const dev = abs(dx * (sy[m] - sy[a]) - dy * (sx[m] - sx[a])) / (sqrt(dx * dx + dy * dy) + 1e-6);\n        if (abs(dx) + abs(dy) \u003c 12 && dev \u003c 0.3) {\n          i++;\n          continue;\n        }\n        if (i - ia > 1) {\n          emit(P, a, b - 1);\n          ia = i - 1;\n          continue;\n        }\n      }\n      if (ok) emit(P, a, b);\n      ia = i++;\n    }\n  }\n  const ns = P.ns;\n  for (let i = 1; i \u003c= NB; i++) bin[i] += bin[i - 1];\n  for (let s = 0; s \u003c ns; s++) ord[bin[key[s]]++] = s;\n  // Far to near. A fibre is lit 1 near the camera and a quarter far off,\n  // and its core is two LEDs wide near and one far; even far off it keeps a\n  // quarter-LED halo, so thin strands fade into the dark instead of stepping\n  // off it. A slow swell of light runs round every fibre at the same rate:\n  // the circle action of the fibration, which moves each point of the\n  // 3-sphere along its own fibre.\n  // Each fibre's swell starts from its own longitude so the whole picture\n  // never dims at once.\n  for (let r = ns - 1; r >= 0; r--) {\n    const s = ord[r], a = sa[s], b = sb[s], f = floor(a / NT), c = f * 3, lf = lit[f];\n    const dn = cl(((sz[a] + sz[b]) / 2 - (D - 3)) / 6, 0, 1) * (lf > 1 ? 2 - lf : 1);\n    const v = (1 - 0.75 * dn) * lf * (0.72 + 0.28 * cos((TAU * (a % NT)) / NT + P.pp[f] - 1.6 * T));\n    line(buf, sx[a], sy[a], sx[b], sy[b], min(255, col[c] * v), min(255, col[c + 1] * v), min(255, col[c + 2] * v), 0.25 + 0.6 * (1 - dn), 0.25 + 0.65 * (1 - dn), lf \u003c 1 ? lf * lf : 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-hopf-fibration","type":"code","name":"hopf-fibration","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hopf Fibration\n// Family:  topology\n// Idea:    The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hopf fibration (Heinz Hopf, 1931), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17\n//\n// Knob 1: Hue. Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point.\n// Knob 2: Speed. How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks.\n// Knob 3: Rings. How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line.\n// Knob 4: Fibres. How many fibres each torus has, from 14 to 17.\n// Buttons: K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, acos, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// Points round one fibre, and the most fibres on show: seven tori of\n// seventeen, the ring and the line.\nconst NT = 96, MAXF = 7 * 17 + 2, MAXS = MAXF * NT;\nconst CT = new Float32Array(NT), ST = new Float32Array(NT);\nfor (let i = 0; i \u003c NT; i++) (CT[i] = cos((TAU * i) / NT)), (ST[i] = sin((TAU * i) / NT));\n\n// Camera distance from the middle of the ring and focal length in LEDs: the\n// ring, radius 1, is 16 LEDs from the line. Depth bins for the painter.\nconst D = 7, F = D * 16, CX = 31.5, CY = 64, NB = 64, NEAR = 0.4;\n// Polar angles of the innermost and outermost circle of base points.\nconst TH0 = 0.6, TH1 = 2.35;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), I32 = (n) => new Int32Array(n);\n  params.s = {\n    T: 0, tilt: 0, tiltTo: 0, pair: 0, hue: 0, rings: 5, fib: 14, ns: 0, cam: new Float64Array(8),\n    buf: F32(N * 3),\n    // Every fibre point on screen with its depth.\n    sx: F32(MAXS), sy: F32(MAXS), sz: F32(MAXS),\n    col: F32(MAXF * 3), lit: F32(MAXF), pp: F32(MAXF),\n    // Segments as (first point, last point), sorted far to near by depth bin.\n    sa: I32(MAXS), sb: I32(MAXS), key: new Uint8Array(MAXS), ord: I32(MAXS), bin: I32(NB + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  // 1.3 a second at Speed 2, so the strands sweep across the panel rather\n  // than drift.\n  P.T += d * cl(k[1], 0.2, 3) * 1.3;\n  P.rings = cl(k[2], 5, 7);\n  P.fib = cl(k[3], 14, 17);\n  const b = input.btnPressed || [];\n  if (b[0]) P.pair = 5;\n  if (b[1]) P.tiltTo = P.tiltTo ? 0 : 1;\n  P.pair = max(0, P.pair - d);\n  P.tilt += cl(P.tiltTo - P.tilt, -d * 0.5, d * 0.5);\n}\n\n// One fibre into the point arrays. The base point sits at polar angle th\n// from the pole whose fibre is the ring, at longitude ph; with a = th/2 its\n// fibre is (cos a e^{i(t+ph)}, sin a e^{it}) on the 3-sphere, projected\n// stereographically from (0,0,0,1) and then through the camera.\nfunction fibre(P, f, th, ph, cam) {\n  const a = th / 2, ca = cos(a), sa = sin(a), cp = cos(ph) * ca, sp = sin(ph) * ca;\n  const rx = cam[0], ry = cam[1], ux = cam[2], uy = cam[3], uz = cam[4], fx = cam[5], fy = cam[6], fz = cam[7];\n  const sx = P.sx, sy = P.sy, sz = P.sz;\n  for (let i = 0, o = f * NT; i \u003c NT; i++, o++) {\n    const c = CT[i], s = ST[i], q = 1 / (1 - sa * s + 1e-6);\n    const X = (c * cp - s * sp) * q, Y = (s * cp + c * sp) * q, Z = sa * c * q;\n    const iz = F / (D + X * fx + Y * fy + Z * fz);\n    sz[o] = F / iz;\n    sx[o] = CX + (X * rx + Y * ry) * iz;\n    sy[o] = CY - (X * ux + Y * uy + Z * uz) * iz;\n  }\n}\n\n// One segment: an antialiased core whose half width hw comes from depth, and\n// a faint halo hl wide of the same light. Each LED is pulled toward the\n// line's colour by its cover, so a near strand passes over a far one with a\n// thin dark seam: that seam is what shows which of two fibres is in front.\n// The segment is walked one LED at a time along its longer axis and owns the\n// LEDs whose centres fall in [start, end) there, so the segments of one\n// fibre meet without gaps or double cover.\nfunction line(buf, x0, y0, x1, y1, r, g, b, hw, hl, op) {\n  const dx = x1 - x0, dy = y1 - y0, E = hw + 0.5 + hl, flat = abs(dx) >= abs(dy);\n  if (abs(dx) + abs(dy) \u003c 1e-3) return;\n  // Along the major axis a, across it c; k is the slope, cs the cosine that\n  // turns a distance across into a distance from the line.\n  const a0 = flat ? x0 : y0, a1 = flat ? x1 : y1, c0 = flat ? y0 : x0, k = flat ? dy / dx : dx / dy;\n  const cs = 1 / sqrt(1 + k * k), ec = E / cs, na = flat ? W : H, nc = flat ? H : W, sa = flat ? 3 : W * 3, sc = flat ? W * 3 : 3;\n  const s0 = max(0, Math.ceil(min(a0, a1) - 0.5)), s1 = min(na - 1, Math.ceil(max(a0, a1) - 0.5) - 1);\n  for (let i = s0; i \u003c= s1; i++) {\n    const cc = c0 + (i + 0.5 - a0) * k, j0 = max(0, Math.ceil(cc - ec - 0.5)), j1 = min(nc - 1, floor(cc + ec - 0.5));\n    for (let j = j0, q = i * sa + j0 * sc; j \u003c= j1; j++, q += sc) {\n      const e = (j + 0.5 - cc) * cs, dd = (e \u003c 0 ? -e : e) - hw;\n      if (dd > E - hw) continue;\n      const w = (dd \u003c -0.5 ? 1 : dd \u003c 0.2 ? 0.5 - dd : dd \u003c 0.5 ? 0.3 : (0.3 * (E - hw - dd)) / hl) * op;\n      buf[q] += (r - buf[q]) * w;\n      buf[q + 1] += (g - buf[q + 1]) * w;\n      buf[q + 2] += (b - buf[q + 2]) * w;\n    }\n  }\n}\n\n// One segment into the depth bins, unless it is off the panel or stretched\n// across it by passing close to the camera.\nfunction emit(P, a, b) {\n  const { sx, sy, sz } = P, x0 = sx[a], y0 = sy[a], x1 = sx[b], y1 = sy[b];\n  if (abs(x1 - x0) + abs(y1 - y0) >= 70) return;\n  if ((x0 \u003c -3 && x1 \u003c -3) || (x0 > W + 3 && x1 > W + 3) || (y0 \u003c -3 && y1 \u003c -3) || (y0 > H + 3 && y1 > H + 3)) return;\n  const kb = cl(floor((((sz[a] + sz[b]) / 2 - (D - 4)) / 8) * NB), 0, NB - 1);\n  P.key[P.ns] = kb;\n  P.sa[P.ns] = a;\n  P.sb[P.ns++] = b;\n  P.bin[kb + 1]++;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const T = P.T, buf = P.buf, { sx, sy, sz, sa, sb, key, ord, bin, col, lit } = P;\n  buf.fill(0);\n  // The camera turns slowly round the line and rocks between looking across\n  // the tori and looking down into the ring.\n  const az = 0.5 + T * 0.05, el = 0.75 + 0.2 * sin(T * 0.11);\n  const ce = cos(el), se = sin(el), ca = cos(az), sn = sin(az);\n  const cam = P.cam;\n  cam[0] = -sn;\n  cam[1] = ca;\n  cam[2] = -se * ca;\n  cam[3] = -se * sn;\n  cam[4] = ce;\n  cam[5] = -ce * ca;\n  cam[6] = -ce * sn;\n  cam[7] = -se;\n  const nr = P.rings, n = floor(P.fib), tl = sm(P.tilt) * 1.1, ct = cos(tl), st = sin(tl);\n  // After a K1 tap one fibre of the innermost torus and one of the next stay\n  // lit and the rest dim to under a third.\n  const hi = sm(P.pair) * 0.7, pick0 = 0, pick1 = floor(n / 2) + 1;\n  let nf = 0;\n  for (let j = 0; j \u003c 7; j++) {\n    const on = cl(nr - j, 0, 1);\n    if (on \u003c= 0) break;\n    // Latitudes spread evenly from near the ring's pole to near the line's,\n    // each breathing on its own phase; a ring the knob is still bringing in\n    // fades up on the outermost one while the others close up.\n    const u = min(j, nr - 1) / (nr - 1), th0 = TH0 + (TH1 - TH0) * u + 0.1 * sin(T * 0.35 + j * 1.7), dir = j & 1 ? -1 : 1;\n    for (let i = 0; i \u003c n; i++) {\n      const ph = (TAU * i) / n + dir * T * 0.25 + j * 0.4;\n      // The base point, its circle of latitude tipped about the x axis.\n      const bx = sin(th0) * cos(ph), by0 = sin(th0) * sin(ph), bz0 = cos(th0);\n      const by = by0 * ct - bz0 * st, bz = by0 * st + bz0 * ct;\n      fibre(P, nf, acos(cl(bz, -1, 1)), atan2(by, bx), cam);\n      // Hue from longitude, and paler toward the ring's pole, deeper and\n      // darker toward the line's.\n      hsv(P.hue + 0.55 + i / n, 0.45 + 0.5 * u, on * (1 - 0.4 * u), col, nf * 3);\n      const picked = (j === 0 && i === pick0) || (j === 1 && i === pick1);\n      lit[nf] = picked ? 1 + hi : 1 - hi;\n      P.pp[nf] = ph + j * 1.3;\n      nf++;\n    }\n  }\n  // The ring, fibre over one pole, and the line through infinity, the fibre\n  // over the other: on the panel a vertical line through the middle.\n  const rl = 1 - hi * 0.6;\n  fibre(P, nf, 0, 0, cam);\n  P.pp[nf] = 0;\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  lit[nf++] = rl;\n  for (let i = 0, o = nf * NT; i \u003c NT; i++, o++) {\n    const Z = (i / (NT - 1) - 0.5) * 60, zc = D + Z * cam[7];\n    sz[o] = zc;\n    sx[o] = CX;\n    sy[o] = CY - (F * Z * cam[4]) / zc;\n  }\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  P.pp[nf] = 0;\n  lit[nf++] = rl;\n\n  // Cut each fibre into segments as long as they can be while the curve\n  // between their ends stays within 0.3 LED of the chord (and under 12 LEDs),\n  // skipping what lies behind the camera or off the panel; bin them by depth.\n  bin.fill(0);\n  P.ns = 0;\n  for (let f = 0; f \u003c nf; f++) {\n    const o = f * NT, end = f \u003c nf - 1 ? NT : NT - 1;\n    let ia = 0;\n    for (let i = 1; i \u003c= end; ) {\n      const a = o + ia, b = o + (i % NT), ok = sz[a] > NEAR && sz[b] > NEAR;\n      if (ok && i \u003c end && i - ia \u003c 16) {\n        const dx = sx[b] - sx[a], dy = sy[b] - sy[a], m = o + ((ia + i) >> 1);\n        const dev = abs(dx * (sy[m] - sy[a]) - dy * (sx[m] - sx[a])) / (sqrt(dx * dx + dy * dy) + 1e-6);\n        if (abs(dx) + abs(dy) \u003c 12 && dev \u003c 0.3) {\n          i++;\n          continue;\n        }\n        if (i - ia > 1) {\n          emit(P, a, b - 1);\n          ia = i - 1;\n          continue;\n        }\n      }\n      if (ok) emit(P, a, b);\n      ia = i++;\n    }\n  }\n  const ns = P.ns;\n  for (let i = 1; i \u003c= NB; i++) bin[i] += bin[i - 1];\n  for (let s = 0; s \u003c ns; s++) ord[bin[key[s]]++] = s;\n  // Far to near. A fibre is lit 1 near the camera and a quarter far off,\n  // and its core is two LEDs wide near and one far; even far off it keeps a\n  // quarter-LED halo, so thin strands fade into the dark instead of stepping\n  // off it. A slow swell of light runs round every fibre at the same rate:\n  // the circle action of the fibration, which moves each point of the\n  // 3-sphere along its own fibre.\n  // Each fibre's swell starts from its own longitude so the whole picture\n  // never dims at once.\n  for (let r = ns - 1; r >= 0; r--) {\n    const s = ord[r], a = sa[s], b = sb[s], f = floor(a / NT), c = f * 3, lf = lit[f];\n    const dn = cl(((sz[a] + sz[b]) / 2 - (D - 3)) / 6, 0, 1) * (lf > 1 ? 2 - lf : 1);\n    const v = (1 - 0.75 * dn) * lf * (0.72 + 0.28 * cos((TAU * (a % NT)) / NT + P.pp[f] - 1.6 * T));\n    line(buf, sx[a], sy[a], sx[b], sy[b], min(255, col[c] * v), min(255, col[c + 1] * v), min(255, col[c + 2] * v), 0.25 + 0.6 * (1 - dn), 0.25 + 0.65 * (1 - dn), lf \u003c 1 ? lf * lf : 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks."},{"name":"Rings","min":5,"max":7,"about":"How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line."},{"name":"Fibres","min":14,"max":17,"about":"How many fibres each torus has, from 14 to 17."}],"start":[0,2,5,14],"measures":{"motion":1.6067,"detail":0.0653,"edges":0.2066,"complexity":1.8736,"coverage":0.5881,"colour":0.1771,"drift":0.0635},"knobResponse":[0.0967,0.1134,0.1017,0.0832]},{"slug":"horse-in-motion","title":"Horse in Motion","family":"film","round":27,"note":"양쪽에 퍼포레이션이 뚫린 필름이 영사기 게이트를 한 칸씩 끊어 내려가고, 램프가 비추는 가운데 칸에서 머이브리지의 경주마가 열두 장의 사진으로 달려요. 위아래 칸은 어둠 속에 흐리게 다음 차례를 기다려요. K3 이 그레이하운드와 앵무새, 달리는 사람의 필름으로 갈아 끼우고, 누르면 필름이 게이트에 걸려 타요.","idea":"A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.","buttons":"K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.","code":"// ===== Patternflow pattern =====\n// Title:   Horse in Motion\n// Family:  film\n// Idea:    A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after Eadweard Muybridge, The Horse in Motion (1878)\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1\n//\n// Knob 1: Tint. The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white.\n// Knob 2: Speed. Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds.\n// Knob 3: Subject. Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice.\n// Knob 4: Lamp. How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box.\n// Buttons: K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.\n\nconst W = 64, H = 128;\n// The strip: a frame every P rows with a frame line FL rows deep at its top,\n// the picture IW by IH between the perforations from column IX, and the gate\n// framing the frame whose top is on row GY. Four perforations a frame.\nconst P = 32, FL = 3, IW = 46, IH = P - FL, IX = 9, GY = 48, NP = 12, NI = IW * IH, NS = 4;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, atan2, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst fr = (v) => v - floor(v);\nfunction hash(a, b) {\n  let h = (Math.imul(a | 0, 374761393) + Math.imul(b | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// ---- The photographs, drawn once into masks: how much of each picture LED\n// the subject covers, 1 for its near side and FAR for limbs on the far side.\nconst MASK = new Float32Array(NS * NP * NI);\nconst FAR = 0.8;\nlet MO = 0;\nfunction cap(ax, ay, bx, by, ra, rb, v) {\n  const x0 = max(0, floor(min(ax - ra, bx - rb) - 1)), x1 = min(IW - 1, ceil(max(ax + ra, bx + rb)));\n  const y0 = max(0, floor(min(ay - ra, by - rb) - 1)), y1 = min(IH - 1, ceil(max(ay + ra, by + rb)));\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay;\n      const t = cl((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx, ey = py - t * dy;\n      const c = cl(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1) * v;\n      const i = MO + y * IW + x;\n      if (c > MASK[i]) MASK[i] = c;\n    }\n}\nconst dot = (x, y, r, v) => cap(x, y, x, y, r, r, v);\n// The body's own frame: x forward, y down, turned by the pitch.\nlet BX = 0, BY = 0, BC = 1, BS = 0;\nconst frame = (x, y, a) => ((BX = x), (BY = y), (BC = cos(a)), (BS = sin(a)));\nconst wx = (x, y) => BX + x * BC - y * BS;\nconst wy = (x, y) => BY + x * BS + y * BC;\nconst bcap = (x1, y1, x2, y2, ra, rb, v) => cap(wx(x1, y1), wy(x1, y1), wx(x2, y2), wy(x2, y2), ra, rb, v);\nconst bdot = (x, y, r, v) => dot(wx(x, y), wy(x, y), r, v);\n\n// Two bones from (tx, ty) towards (fx, fy), the joint bent forward (s = 1)\n// or back (s = -1). Leaves the joint in JX, JY and the reached end in FX, FY.\nlet JX = 0, JY = 0, FX = 0, FY = 0;\nfunction ik(tx, ty, fx, fy, a, b, s) {\n  let dx = fx - tx, dy = fy - ty;\n  const d = sqrt(dx * dx + dy * dy) || 1e-6;\n  const dc = cl(d, abs(a - b) + 0.05, a + b - 0.02);\n  (dx /= d), (dy /= d);\n  const ca = (a * a + dc * dc - b * b) / (2 * a * dc), sa = sqrt(max(0, 1 - ca * ca));\n  JX = tx + a * (ca * dx + s * sa * dy);\n  JY = ty + a * (ca * dy - s * sa * dx);\n  FX = tx + dx * dc;\n  FY = ty + dy * dc;\n}\n\n// One leg of a galloping animal. c is the leg's phase from touchdown; for\n// the share D of the stride the hoof stands on the ground (row GR) while the\n// body passes over it, from G[0] ahead of the top joint to G[1] behind; then\n// it lifts by G[2], folding (G[3] pulls it further behind first), and swings\n// forward, reaching G[4] past where it lands. The top joint (tx, ty) rides a\n// quarter of the sweep, hanging from the shoulder or hip (ux, uy).\n// L = bones a and b with their bend, then four radii.\nconst GR = 26.6;\nfunction leg(c, D, G, tx, ty, ux, uy, L, v) {\n  let hx, lift = 0;\n  if (c \u003c D) hx = G[0] - ((G[0] + G[1]) * c) / D;\n  else {\n    const s = (c - D) / (1 - D), w = sin(PI * s);\n    hx = -G[1] + (G[0] + G[1]) * ease(s) - G[3] * w * (1 - s) + G[4] * w * s * s;\n    lift = G[2] * sin(PI * s ** 0.75);\n  }\n  const Tx = wx(tx + 0.25 * hx, ty), Ty = wy(tx + 0.25 * hx, ty);\n  ik(Tx, Ty, wx(tx, ty) + hx, GR - lift, L[0], L[1], L[2]);\n  cap(wx(ux, uy), wy(ux, uy), Tx, Ty, L[3], L[4], v);\n  cap(Tx, Ty, JX, JY, L[4], L[5], v);\n  dot(JX, JY, L[5], v);\n  cap(JX, JY, FX, FY, L[5] * 0.75, L[6] * 0.7, v);\n  cap(FX, FY, FX + 0.6, FY + 0.2, L[6], L[6] * 0.9, v);\n}\n\n// Sallie Gardner at a 1:40 gait, ridden by G. Domm, seen from her right.\n// A transverse gallop: left hind, right hind, left fore, right fore, then\n// all four hooves off the ground with the legs gathered under the belly.\nconst LFH = [5.2, 5.2, 1, 2.3, 1.3, 0.75, 0.8], LHH = [5.4, 5.6, -1, 3, 1.4, 0.75, 0.8];\nconst GFH = [6, 5, 6.5, 1.5, 2.5], GHH = [4, 7, 5.5, 0, 1.5];\nfunction horse(c) {\n  const pitch = 0.07 * sin(TAU * (c - 0.3));\n  frame(21, 13.8 - 0.7 * cos(TAU * (c - 0.9)), pitch);\n  const fore = (td, v) => leg(fr(c - td), 0.32, GFH, 5.4, 2.8, 6.6, -0.6, LFH, v);\n  const hind = (td, v) => leg(fr(c - td), 0.32, GHH, -5, 2.4, -6.6, -1, LHH, v);\n  hind(0, FAR);\n  fore(0.33, FAR);\n  // Barrel, chest, withers and quarters.\n  bcap(-5, 0.4, 4.5, 0.2, 3.2, 3.5, 1);\n  bdot(6.6, -0.2, 3.2, 1);\n  bcap(3, -2.4, 6.2, -2, 2.4, 2.4, 1);\n  bdot(-6.6, -0.8, 3.6, 1);\n  bdot(-4.6, -1.6, 2.8, 1);\n  // Neck stretched out and nodding, head, jaw and ear.\n  const al = 0.6 - 0.1 * sin(TAU * (c - 0.3));\n  const nx = wx(6.4, -2), ny = wy(6.4, -2);\n  const px = nx + 9.4 * cos(al), py = ny - 9.4 * sin(al);\n  cap(nx, ny, px, py, 2.8, 1.5, 1);\n  cap(wx(7.8, 0.6), wy(7.8, 0.6), px, py + 1, 2, 1.2, 1);\n  const ga = 0.85 + 0.08 * sin(TAU * (c - 0.5));\n  const mx = px + 6.2 * cos(ga), my = py + 6.2 * sin(ga);\n  cap(px, py, mx, my, 1.6, 0.95, 1);\n  dot(px + 1.2 * cos(ga) - 0.8 * sin(ga), py + 1.2 * sin(ga) + 0.8 * cos(ga), 1.55, 1);\n  cap(px - 0.3, py - 1.1, px - 1.1, py - 3, 0.55, 0.3, 1);\n  // The tail streaming out behind.\n  let tx = wx(-9.6, -2.2), ty = wy(-9.6, -2.2);\n  const T = [-3, 1.2, 1.1, 1.2, -2.8, 1.5, 1.2, 1.3, -2.4, 2, 1.3, 0.5];\n  for (let j = 0; j \u003c 12; j += 4) {\n    const ux = tx + T[j], uy = ty + T[j + 1] + (0.5 + 0.15 * j) * sin(TAU * c - j / 4);\n    cap(tx, ty, ux, uy, T[j + 2], T[j + 3], 1);\n    (tx = ux), (ty = uy);\n  }\n  hind(0.1, 1);\n  fore(0.45, 1);\n  // The jockey, crouched forward with short stirrups, hands on the neck.\n  const sx = wx(1.5, -4.4), sy = wy(1.5, -4.4), a = 0.62 + 0.05 * sin(TAU * c);\n  const hx = sx + 5.6 * sin(a), hy = sy - 5.6 * cos(a);\n  cap(sx, sy, hx, hy, 1.6, 1.5, 1);\n  dot(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), 1.4, 1);\n  cap(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), hx + 3.6 * sin(a - 0.1), hy - 1.9 * cos(a - 0.1), 0.6, 0.4, 1);\n  const kx = wx(4.8, -5.2), ky = wy(4.8, -5.2);\n  cap(sx, sy, kx, ky, 1.4, 1.1, 1);\n  cap(kx, ky, wx(3.6, -1.2), wy(3.6, -1.2), 1, 0.8, 1);\n  const ex = hx + 1.8, ey = hy + 2.6, dx = wx(8.6, -4.6), dy = wy(8.6, -4.6);\n  cap(hx, hy, ex, ey, 0.8, 0.7, 1);\n  cap(ex, ey, dx, dy, 0.7, 0.6, 1);\n  cap(dx, dy, mx - 0.5, my - 0.4, 0.3, 0.3, 0.7);\n}\n\n// A greyhound in the rotary gallop: forefeet, the gathered flight\n// with the back arched and the hind feet reaching past the fore, hind feet,\n// then the long flight stretched out flat.\nconst LFD = [5.2, 5.6, 1, 1.9, 1, 0.55, 0.65], LHD = [5.6, 6, -1, 2.6, 1.15, 0.55, 0.65];\nconst GFD = [6, 4.5, 6, 1.6, 2.5], GHD = [4, 6.5, 5, 0, 2];\nfunction dog(c) {\n  const f = cos(TAU * (c - 0.38)), hl = 6.6 - 1.4 * f;\n  frame(22, 13.2 - 0.6 * f, 0.04 * sin(TAU * (c - 0.1)));\n  const fore = (td, v) => leg(fr(c - td), 0.24, GFD, hl - 1.6, 2.4, hl - 0.8, -0.8, LFD, v);\n  const hind = (td, v) => leg(fr(c - td), 0.24, GHD, -hl + 2.6, 1.6, -hl + 1.4, -1.2, LHD, v);\n  fore(0, FAR);\n  hind(0.53, FAR);\n  // Deep chest, the waist tucked up high under an arching loin.\n  bdot(hl - 1.5, 0.2, 3.2, 1);\n  bcap(hl - 1.5, 0, hl - 5.5, -0.7, 3.2, 2.4, 1);\n  bcap(hl - 5.5, -1.1, -hl + 2.5, -1.9 - 0.8 * f, 1.8, 1.5, 1);\n  bcap(0.5, -2.3 - 1.1 * f, -hl + 2, -2.1 - 0.7 * f, 1.3, 1.3, 1);\n  bdot(-hl + 1.5, -1.5 - 0.6 * f, 2.3, 1);\n  // Long neck, narrow head with a pointed muzzle, ears folded back.\n  const nx = wx(hl, -1.5), ny = wy(hl, -1.5), al = 0.55 + 0.1 * f;\n  const px = nx + 5.4 * cos(al), py = ny - 5.4 * sin(al);\n  cap(nx, ny, px, py, 2, 1.25, 1);\n  cap(px, py, px + 5 * cos(0.42), py + 5 * sin(0.42), 1.45, 0.55, 1);\n  cap(px - 0.4, py - 0.8, px - 2, py - 1.2, 0.6, 0.35, 1);\n  // A long thin tail, curving down and up again.\n  const tx = wx(-hl, -1.8), ty = wy(-hl, -1.8), w = sin(TAU * c);\n  cap(tx, ty, tx - 3, ty + 2.2 + w * 0.5, 0.8, 0.6, 1);\n  cap(tx - 3, ty + 2.2 + w * 0.5, tx - 6, ty + 3 + w, 0.6, 0.45, 1);\n  cap(tx - 6, ty + 3 + w, tx - 8.4, ty + 1.8 + 1.4 * w, 0.45, 0.35, 1);\n  fore(0.07, 1);\n  hind(0.45, 1);\n}\n\n// A sulphur-crested cockatoo flying to the right. Each wing tapers from the\n// shoulder to a fan of primaries; seen from the side its span shows only as\n// much as it is raised or lowered, and on the upstroke the hand folds back.\nfunction bird(c) {\n  const th = 0.12 + 1.07 * cos(TAU * c), up = max(0, sin(TAU * c)), dn = max(0, -sin(TAU * c));\n  frame(22, 16 + 1.4 * sin(TAU * c + 0.6), -0.06);\n  const wing = (o, v) => {\n    const sx = wx(1 + o, -1.6), sy = wy(1 + o, -1.6), e = sin(th);\n    const ax = sx + 0.8 * dn - 2.3, ay = sy - 5 * e + 0.3;\n    const bx = ax + 1.2 * dn - 3.5 * up + 0.6, by = ay - 5.6 * e;\n    cap(sx - 2.3, sy + 0.3, ax, ay, 2.5, 2.1, v);\n    cap(ax, ay, bx, by, 2.1, 1.1, v);\n    for (let j = 0; j \u003c 4; j++) {\n      const a = th + 0.12 - 0.2 * j;\n      cap(bx + 0.4 - 0.7 * j, by, bx - 0.8 - 1.1 * j - 1.4 * up, by - 3.6 * sin(a), 0.6, 0.3, v);\n    }\n  };\n  wing(-0.8, FAR);\n  bcap(-4, 0.3, 4, -0.4, 2.3, 2.6, 1);\n  bdot(6.2, -1.2, 2.1, 1);\n  bcap(7.6, -1.6, 9.8, -0.4, 1, 0.4, 1);\n  bcap(9.4, -0.8, 9.6, 0.5, 0.45, 0.3, 1);\n  // The crest laid back in flight.\n  bcap(6, -3, 2.2, -4.6 + 0.4 * sin(TAU * c), 0.9, 0.35, 1);\n  const e = MO + round(wy(6.8, -1.6) - 0.5) * IW + round(wx(6.8, -1.6) - 0.5);\n  MASK[e] = 0.35;\n  bcap(-3.4, 0.5, -12.5, 1.4, 1.5, 0.9, 1);\n  bcap(-3.4, 1, -12, 2.9, 1.1, 0.6, FAR);\n  wing(0, 1);\n}\n\n// A man running. Hip and knee follow keyframes eight to a stride and the\n// arms swing against the legs. The figure is set down so the lower foot\n// stands on the floor, a little above it in the two moments of flight.\nconst THI = [0.42, 0.12, -0.22, -0.5, -0.35, 0.35, 0.85, 0.75], KNE = [0.12, 0.55, 0.4, 0.35, 1.5, 2.1, 1.3, 0.4];\nconst key = (K, p) => {\n  const q = fr(p) * 8, i = floor(q), f = q - i;\n  return K[i] + (K[(i + 1) & 7] - K[i]) * (1 - cos(PI * f)) * 0.5;\n};\nconst RJ = new Float32Array(24);\nfunction runner(c) {\n  let low = 0;\n  for (let s = 0; s \u003c 2; s++) {\n    const ph = c + 0.5 * s, t = key(THI, ph), k = t - key(KNE, ph), o = s * 12;\n    const ua = -0.75 * sin(TAU * (ph - 0.55));\n    RJ.set([6.4 * sin(t), 6.4 * cos(t)], o);\n    RJ.set([RJ[o] + 6.2 * sin(k), RJ[o + 1] + 6.2 * cos(k)], o + 2);\n    RJ.set([RJ[o + 2] + 2.2 * sin(k + 1.45), RJ[o + 3] + 2.2 * cos(k + 1.45)], o + 4);\n    RJ.set([4.3 * sin(ua), 4.3 * cos(ua)], o + 6);\n    RJ.set([RJ[o + 6] + 3.8 * sin(ua + 1.7), RJ[o + 7] + 3.8 * cos(ua + 1.7)], o + 8);\n    low = max(low, RJ[o + 3] + 0.5, RJ[o + 5]);\n  }\n  const fl = fr(c * 2), lift = fl > 0.375 && fl \u003c 0.5 ? 1.2 * sin((PI * (fl - 0.375)) / 0.125) : 0;\n  const hx = 21, hy = 26.6 - low - lift, sx = hx + 1.3, sy = hy - 7.1;\n  const limb = (s, v) => {\n    const o = s * 12;\n    cap(hx, hy, hx + RJ[o], hy + RJ[o + 1], 1.7, 1.15, v);\n    cap(hx + RJ[o], hy + RJ[o + 1], hx + RJ[o + 2], hy + RJ[o + 3], 1.15, 0.7, v);\n    cap(hx + RJ[o + 2], hy + RJ[o + 3], hx + RJ[o + 4], hy + RJ[o + 5], 0.7, 0.5, v);\n  };\n  const arm = (s, v) => {\n    const o = s * 12;\n    cap(sx, sy, sx + RJ[o + 6], sy + RJ[o + 7], 0.95, 0.75, v);\n    cap(sx + RJ[o + 6], sy + RJ[o + 7], sx + RJ[o + 8], sy + RJ[o + 9], 0.75, 0.6, v);\n    dot(sx + RJ[o + 8], sy + RJ[o + 9], 0.75, v);\n  };\n  arm(1, FAR);\n  limb(1, FAR);\n  cap(hx, hy, sx, sy, 1.9, 2.2, 1);\n  cap(sx, sy, sx + 0.8, sy - 2, 0.9, 0.9, 1);\n  dot(sx + 0.9, sy - 2.8, 1.75, 1);\n  limb(0, 1);\n  arm(0, 1);\n}\nconst FIGS = [horse, dog, bird, runner];\n\n// The grounds behind them. At Palo Alto a white wall ruled with upright lines\n// stands behind the track, and the horse's shadow lies on the track under\n// her. In Philadelphia black cloth strung with a white thread grid hangs\n// behind a pale floor.\nconst BD = new Float32Array(2 * NI);\nconst FIG = [0.04, 0.9, 0.9, 0.9];\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const i = y * IW + x;\n    let t = y \u003c 22 ? (x % 4 === 1 ? 0.6 : 0.9) : y \u003c 23 ? 0.32 : y \u003c 24 ? 0.55 : 0.8 - 0.02 * (y - 24);\n    const sx = (x + 0.5 - 21) / 10, sy = (y + 0.5 - 27.3) / 1.4;\n    if (sx * sx + sy * sy \u003c 1) t *= 0.6;\n    BD[i] = t;\n    BD[NI + i] = y > 26 ? 0.3 : x % 6 === 2 || y % 6 === 3 ? 0.34 : 0.05;\n  }\n// Old lenses: the corners of every plate fall off.\nconst VG = new Float32Array(NI);\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const u = (x + 0.5) / IW - 0.5, v = (y + 0.5) / IH - 0.5;\n    VG[y * IW + x] = (1 - 0.5 * u * u) * (1 - 0.4 * v * v);\n  }\n\n// Film stocks: a curve from each stock's black to its clear base, bent\n// through the grey in the middle of the row.\nconst STOCK = [\n  [0.05, 0.025, 0.012, 0.62, 0.38, 0.18, 1, 0.9, 0.7],\n  [0.05, 0.022, 0, 0.75, 0.42, 0.08, 1, 0.74, 0.3],\n  [0.05, 0.01, 0.02, 0.72, 0.26, 0.36, 1, 0.7, 0.76],\n  [0.01, 0.025, 0.07, 0.16, 0.36, 0.72, 0.72, 0.86, 1],\n  [0.01, 0.04, 0.02, 0.2, 0.52, 0.3, 0.62, 1, 0.68],\n];\nconst LAMP = [1, 0.94, 0.82];\n\n// Columns: -1 the gate's rails, -2 black film edge, -3 perforation, -4 the\n// corner column of a perforation, 0.. the picture.\nconst COL = new Int8Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const e = min(x, W - 1 - x);\n  COL[x] = e === 0 ? -1 : e >= IX ? x - IX : e >= 2 && e \u003c= 6 ? (e === 2 || e === 6 ? -4 : -3) : -2;\n}\n\nexport function setup(params) {\n  for (let s = 0; s \u003c NS; s++)\n    for (let p = 0; p \u003c NP; p++) {\n      MO = (s * NP + p) * NI;\n      FIGS[s](p / NP);\n    }\n  // Dust and a stray hair on sixteen frames that repeat along the reel, and\n  // grain on the film's own rows.\n  const DU = new Float32Array(16 * NI).fill(1);\n  for (let f = 0; f \u003c 16; f++) {\n    for (let j = 0; j \u003c 4; j++) {\n      const x = floor(Math.random() * IW), y = floor(Math.random() * IH);\n      DU[f * NI + y * IW + x] = 0.25;\n      if (Math.random() \u003c 0.4 && x + 1 \u003c IW) DU[f * NI + y * IW + x + 1] = 0.55;\n    }\n    if (f % 7 === 3) {\n      let x = 5 + Math.random() * 36, y = 4 + Math.random() * 20, a = Math.random() * TAU;\n      for (let j = 0; j \u003c 9; j++) {\n        DU[f * NI + floor(y) * IW + floor(x)] = 0.35;\n        a += Math.random() - 0.5;\n        x = cl(x + cos(a), 0, IW - 1);\n        y = cl(y + sin(a), 0, IH - 1);\n      }\n    }\n  }\n  const GN = new Float32Array(W * 256);\n  for (let i = 0; i \u003c GN.length; i++) GN[i] = 0.95 + 0.1 * Math.random();\n  params.s = {\n    DU, GN, n: 0, cyc: 0.5, pos: 1, shut: 1, fps: 3, sub: -1, base: 0, sp: [], tint: -1, lamp: -9,\n    lut: new Float32Array(3 * 65), LY: new Float32Array(H), SP: new Float32Array(H), LX: new Float32Array(W), burns: [], ask: false,\n  };\n  const S = params.s;\n  for (let x = 0; x \u003c W; x++) {\n    const c = COL[x];\n    S.LX[x] = c >= 0 ? 1 - 0.1 * ((c - 22.5) / 23) ** 2 : c === -1 ? 0.1 : c === -2 ? 0.35 : 0.5;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const d = y \u003c GY + FL ? GY + FL - y : y > GY + P - 1 ? y - GY - P + 1 : 0;\n    S.LY[y] = d === 0 ? 1 - 0.08 * ((y - GY - FL - IH / 2) / (IH / 2)) ** 2 : 0.5 * exp(-d * 0.9);\n  }\n}\n\nfunction tune(S, k) {\n  const tint = cl(k[0], 0, 1);\n  if (tint !== S.tint) {\n    S.tint = tint;\n    const q = tint * (STOCK.length - 1), i = min(STOCK.length - 2, floor(q)), f = q - i;\n    for (let j = 0; j \u003c= 64; j++) {\n      const t = j / 64, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const A = STOCK[i], B = STOCK[i + 1];\n        const g = (s) => a * s[ch] + b * s[ch + 3] + c * s[ch + 6];\n        S.lut[j * 3 + ch] = g(A) + (g(B) - g(A)) * f;\n      }\n    }\n  }\n  const lamp = cl(k[3], -1, 1);\n  if (lamp !== S.lamp) {\n    S.lamp = lamp;\n    const b = 0.05 + 0.36 * (lamp + 1);\n    for (let y = 0; y \u003c H; y++) S.SP[y] = b * (0.6 + 0.4 * exp(-(((y - 65) / 34) ** 2)));\n  }\n}\n\n// Where the strip stands: sI rows pulled since the start; frame k holds rows\n// GY + sI + k P onwards.\nconst rows = (S) => round(S.pos * P);\nconst frameAt = (S, y) => floor((y - GY - rows(S)) / P);\nfunction subOf(S, k) {\n  let s = S.base;\n  for (const sp of S.sp) if (k \u003c= sp.k) s = sp.s;\n  return s;\n}\n\nconst BURN = 1.9;\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  tune(S, k);\n  const sub = cl(round(k[2]), 0, NS - 1);\n  if (S.sub \u003c 0) S.base = sub;\n  else if (sub !== S.sub) S.sp.push({ k: frameAt(S, 0) - 1, s: sub });\n  S.sub = sub;\n  while (S.sp.length && frameAt(S, H - 1) \u003c= S.sp[0].k) S.base = S.sp.shift().s;\n  S.fps = 1.5 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0] && !S.burns.some((b) => b.t \u003c BURN + 0.5)) S.ask = true;\n  const tp = min(0.16, 0.32 / S.fps);\n  // The film stands still while a frame burns, and a burnt frame is\n  // forgotten once it has gone off the bottom of the panel.\n  let held = false;\n  for (const b of S.burns) if ((b.t += dt) \u003c BURN) held = true;\n  if (S.burns.length) S.burns = S.burns.filter((b) => frameAt(S, H - 1) >= b.k && b.t \u003c 60);\n  if (!held) {\n    S.cyc += dt * S.fps;\n    if (S.cyc >= 1) (S.cyc -= 1), S.n++;\n  }\n  const tau = S.cyc / S.fps;\n  if (tau \u003c tp) {\n    const u = tau / tp;\n    S.pos = S.n + (1 - cos(PI * u)) / 2;\n    S.shut = 1 - 0.45 * sin(PI * u);\n  } else {\n    S.pos = S.n + 1;\n    S.shut = 1;\n    if (S.ask) {\n      S.ask = false;\n      const h = [0, 1, 2].map(() => Math.random() * TAU), kg = frameAt(S, GY + FL);\n      S.burns = S.burns.filter((b) => b.k !== kg);\n      S.burns.push({ k: kg, t: 0, x: 14 + 18 * Math.random(), y: 9 + 10 * Math.random(), h });\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const sI = rows(S), { lut, DU, GN, LX, LY, SP, burns } = S;\n  // A burn: first a blister, then a hole opening in it with a glowing rim\n  // that cools once the film moves on.\n  for (const b of burns) {\n    b.rh = 9.5 * ease((b.t - 0.35) / 1.3);\n    b.rb = b.rh + 1.2 + 2.6 * ease(b.t / 0.5);\n    b.gl = b.t \u003c BURN ? 1 : max(0, 1 - (b.t - BURN) / 1.4);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const v = y - GY - sI, k = floor(v / P), r = v - k * P, iy = r - FL;\n    const sub = subOf(S, k), mo = (sub * NP + (((-k % NP) + NP) % NP)) * NI, bo = sub ? NI : 0, fg = FIG[sub];\n    const pr = r & 7, hole = pr >= 3 && pr \u003c= 6, hedge = pr === 3 || pr === 6;\n    const ex = 0.93 + 0.1 * hash(k, 7), du = (k & 15) * NI, gn = (v & 255) * W;\n    let splice = false;\n    if (iy \u003c 0) for (const sp of S.sp) if (sp.k === k - 1) splice = true;\n    // A scratch down the emulsion, one every few frames, fixed to the film.\n    const seg = floor(k / 5), hs = hash(seg, 11);\n    const scx = hs \u003c 0.55 ? floor(hash(seg, 12) * 40) + 3 + (((v >> 3) & 3) === 1 ? 1 : 0) : -9;\n    const sc0 = hash(seg, 13) * 5 * P, sc1 = sc0 + (0.3 + hash(seg, 14)) * 3 * P, vs = v - seg * 5 * P;\n    const scr = vs > sc0 && vs \u003c sc1 ? scx : -9;\n    const ly = LY[y] * S.shut, sp = SP[y];\n    let burn = null;\n    for (const b of burns) if (b.k === k) burn = b;\n    for (let x = 0; x \u003c W; x++) {\n      const c = COL[x];\n      const a = ly * LX[x], L = 0.95 * a + sp * (1 - 0.95 * a);\n      let R, G, Bl;\n      if (c \u003c -2 && hole) {\n        // A perforation: the lamp straight through, its corners rounded.\n        const e = c === -4 && hedge ? 0.45 : 1;\n        R = LAMP[0] * L * e;\n        G = LAMP[1] * L * e;\n        Bl = LAMP[2] * L * e;\n      } else if (c === -1) {\n        R = G = Bl = 0.12 * L;\n      } else {\n        let t = 0.03;\n        let br = 0;\n        if (c >= 0 && iy >= 0) {\n          const i = iy * IW + c;\n          t = (BD[bo + i] + (fg - BD[bo + i]) * MASK[mo + i]) * VG[i] * ex * DU[du + i];\n          if (c === scr) t = min(1, t + 0.22);\n          if (burn) {\n            const dx = c + 0.5 - burn.x, dy = iy + 0.5 - burn.y, an = atan2(dy, dx), h = burn.h;\n            const d = sqrt(dx * dx + dy * dy) / (1 + 0.18 * sin(3 * an + h[0]) + 0.1 * sin(5 * an + h[1]) + 0.06 * sin(11 * an + h[2]));\n            if (d \u003c burn.rh) br = 1;\n            else if (d \u003c burn.rh + 1.4 && burn.rh > 0) br = 2;\n            else if (d \u003c burn.rb) {\n              t *= 0.3 + 0.5 * hash(c >> 1, (iy >> 1) + k * 31);\n              br = 3;\n            }\n          }\n        } else if (splice && c >= 0) t = r === 1 ? 0.55 : 0.2;\n        if (br === 1) {\n          R = LAMP[0] * L;\n          G = LAMP[1] * L;\n          Bl = LAMP[2] * L;\n        } else {\n          const j = round(cl(t, 0, 1) * 64) * 3, g = L * GN[gn + x];\n          R = lut[j] * g;\n          G = lut[j + 1] * g;\n          Bl = lut[j + 2] * g;\n          if (br === 3) (R = R * 0.8 + 0.1 * L), (G *= 0.6), (Bl *= 0.4);\n          if (br === 2) (R += burn.gl), (G += 0.42 * burn.gl), (Bl += 0.06 * burn.gl);\n        }\n      }\n      display.setPixel(x, y, min(255, 255 * R), min(255, 255 * G), min(255, 255 * Bl));\n    }\n  }\n}\n","layer":{"id":"layer-horse-in-motion","type":"code","name":"horse-in-motion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Horse in Motion\n// Family:  film\n// Idea:    A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after Eadweard Muybridge, The Horse in Motion (1878)\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1\n//\n// Knob 1: Tint. The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white.\n// Knob 2: Speed. Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds.\n// Knob 3: Subject. Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice.\n// Knob 4: Lamp. How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box.\n// Buttons: K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.\n\nconst W = 64, H = 128;\n// The strip: a frame every P rows with a frame line FL rows deep at its top,\n// the picture IW by IH between the perforations from column IX, and the gate\n// framing the frame whose top is on row GY. Four perforations a frame.\nconst P = 32, FL = 3, IW = 46, IH = P - FL, IX = 9, GY = 48, NP = 12, NI = IW * IH, NS = 4;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, atan2, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst fr = (v) => v - floor(v);\nfunction hash(a, b) {\n  let h = (Math.imul(a | 0, 374761393) + Math.imul(b | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// ---- The photographs, drawn once into masks: how much of each picture LED\n// the subject covers, 1 for its near side and FAR for limbs on the far side.\nconst MASK = new Float32Array(NS * NP * NI);\nconst FAR = 0.8;\nlet MO = 0;\nfunction cap(ax, ay, bx, by, ra, rb, v) {\n  const x0 = max(0, floor(min(ax - ra, bx - rb) - 1)), x1 = min(IW - 1, ceil(max(ax + ra, bx + rb)));\n  const y0 = max(0, floor(min(ay - ra, by - rb) - 1)), y1 = min(IH - 1, ceil(max(ay + ra, by + rb)));\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay;\n      const t = cl((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx, ey = py - t * dy;\n      const c = cl(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1) * v;\n      const i = MO + y * IW + x;\n      if (c > MASK[i]) MASK[i] = c;\n    }\n}\nconst dot = (x, y, r, v) => cap(x, y, x, y, r, r, v);\n// The body's own frame: x forward, y down, turned by the pitch.\nlet BX = 0, BY = 0, BC = 1, BS = 0;\nconst frame = (x, y, a) => ((BX = x), (BY = y), (BC = cos(a)), (BS = sin(a)));\nconst wx = (x, y) => BX + x * BC - y * BS;\nconst wy = (x, y) => BY + x * BS + y * BC;\nconst bcap = (x1, y1, x2, y2, ra, rb, v) => cap(wx(x1, y1), wy(x1, y1), wx(x2, y2), wy(x2, y2), ra, rb, v);\nconst bdot = (x, y, r, v) => dot(wx(x, y), wy(x, y), r, v);\n\n// Two bones from (tx, ty) towards (fx, fy), the joint bent forward (s = 1)\n// or back (s = -1). Leaves the joint in JX, JY and the reached end in FX, FY.\nlet JX = 0, JY = 0, FX = 0, FY = 0;\nfunction ik(tx, ty, fx, fy, a, b, s) {\n  let dx = fx - tx, dy = fy - ty;\n  const d = sqrt(dx * dx + dy * dy) || 1e-6;\n  const dc = cl(d, abs(a - b) + 0.05, a + b - 0.02);\n  (dx /= d), (dy /= d);\n  const ca = (a * a + dc * dc - b * b) / (2 * a * dc), sa = sqrt(max(0, 1 - ca * ca));\n  JX = tx + a * (ca * dx + s * sa * dy);\n  JY = ty + a * (ca * dy - s * sa * dx);\n  FX = tx + dx * dc;\n  FY = ty + dy * dc;\n}\n\n// One leg of a galloping animal. c is the leg's phase from touchdown; for\n// the share D of the stride the hoof stands on the ground (row GR) while the\n// body passes over it, from G[0] ahead of the top joint to G[1] behind; then\n// it lifts by G[2], folding (G[3] pulls it further behind first), and swings\n// forward, reaching G[4] past where it lands. The top joint (tx, ty) rides a\n// quarter of the sweep, hanging from the shoulder or hip (ux, uy).\n// L = bones a and b with their bend, then four radii.\nconst GR = 26.6;\nfunction leg(c, D, G, tx, ty, ux, uy, L, v) {\n  let hx, lift = 0;\n  if (c \u003c D) hx = G[0] - ((G[0] + G[1]) * c) / D;\n  else {\n    const s = (c - D) / (1 - D), w = sin(PI * s);\n    hx = -G[1] + (G[0] + G[1]) * ease(s) - G[3] * w * (1 - s) + G[4] * w * s * s;\n    lift = G[2] * sin(PI * s ** 0.75);\n  }\n  const Tx = wx(tx + 0.25 * hx, ty), Ty = wy(tx + 0.25 * hx, ty);\n  ik(Tx, Ty, wx(tx, ty) + hx, GR - lift, L[0], L[1], L[2]);\n  cap(wx(ux, uy), wy(ux, uy), Tx, Ty, L[3], L[4], v);\n  cap(Tx, Ty, JX, JY, L[4], L[5], v);\n  dot(JX, JY, L[5], v);\n  cap(JX, JY, FX, FY, L[5] * 0.75, L[6] * 0.7, v);\n  cap(FX, FY, FX + 0.6, FY + 0.2, L[6], L[6] * 0.9, v);\n}\n\n// Sallie Gardner at a 1:40 gait, ridden by G. Domm, seen from her right.\n// A transverse gallop: left hind, right hind, left fore, right fore, then\n// all four hooves off the ground with the legs gathered under the belly.\nconst LFH = [5.2, 5.2, 1, 2.3, 1.3, 0.75, 0.8], LHH = [5.4, 5.6, -1, 3, 1.4, 0.75, 0.8];\nconst GFH = [6, 5, 6.5, 1.5, 2.5], GHH = [4, 7, 5.5, 0, 1.5];\nfunction horse(c) {\n  const pitch = 0.07 * sin(TAU * (c - 0.3));\n  frame(21, 13.8 - 0.7 * cos(TAU * (c - 0.9)), pitch);\n  const fore = (td, v) => leg(fr(c - td), 0.32, GFH, 5.4, 2.8, 6.6, -0.6, LFH, v);\n  const hind = (td, v) => leg(fr(c - td), 0.32, GHH, -5, 2.4, -6.6, -1, LHH, v);\n  hind(0, FAR);\n  fore(0.33, FAR);\n  // Barrel, chest, withers and quarters.\n  bcap(-5, 0.4, 4.5, 0.2, 3.2, 3.5, 1);\n  bdot(6.6, -0.2, 3.2, 1);\n  bcap(3, -2.4, 6.2, -2, 2.4, 2.4, 1);\n  bdot(-6.6, -0.8, 3.6, 1);\n  bdot(-4.6, -1.6, 2.8, 1);\n  // Neck stretched out and nodding, head, jaw and ear.\n  const al = 0.6 - 0.1 * sin(TAU * (c - 0.3));\n  const nx = wx(6.4, -2), ny = wy(6.4, -2);\n  const px = nx + 9.4 * cos(al), py = ny - 9.4 * sin(al);\n  cap(nx, ny, px, py, 2.8, 1.5, 1);\n  cap(wx(7.8, 0.6), wy(7.8, 0.6), px, py + 1, 2, 1.2, 1);\n  const ga = 0.85 + 0.08 * sin(TAU * (c - 0.5));\n  const mx = px + 6.2 * cos(ga), my = py + 6.2 * sin(ga);\n  cap(px, py, mx, my, 1.6, 0.95, 1);\n  dot(px + 1.2 * cos(ga) - 0.8 * sin(ga), py + 1.2 * sin(ga) + 0.8 * cos(ga), 1.55, 1);\n  cap(px - 0.3, py - 1.1, px - 1.1, py - 3, 0.55, 0.3, 1);\n  // The tail streaming out behind.\n  let tx = wx(-9.6, -2.2), ty = wy(-9.6, -2.2);\n  const T = [-3, 1.2, 1.1, 1.2, -2.8, 1.5, 1.2, 1.3, -2.4, 2, 1.3, 0.5];\n  for (let j = 0; j \u003c 12; j += 4) {\n    const ux = tx + T[j], uy = ty + T[j + 1] + (0.5 + 0.15 * j) * sin(TAU * c - j / 4);\n    cap(tx, ty, ux, uy, T[j + 2], T[j + 3], 1);\n    (tx = ux), (ty = uy);\n  }\n  hind(0.1, 1);\n  fore(0.45, 1);\n  // The jockey, crouched forward with short stirrups, hands on the neck.\n  const sx = wx(1.5, -4.4), sy = wy(1.5, -4.4), a = 0.62 + 0.05 * sin(TAU * c);\n  const hx = sx + 5.6 * sin(a), hy = sy - 5.6 * cos(a);\n  cap(sx, sy, hx, hy, 1.6, 1.5, 1);\n  dot(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), 1.4, 1);\n  cap(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), hx + 3.6 * sin(a - 0.1), hy - 1.9 * cos(a - 0.1), 0.6, 0.4, 1);\n  const kx = wx(4.8, -5.2), ky = wy(4.8, -5.2);\n  cap(sx, sy, kx, ky, 1.4, 1.1, 1);\n  cap(kx, ky, wx(3.6, -1.2), wy(3.6, -1.2), 1, 0.8, 1);\n  const ex = hx + 1.8, ey = hy + 2.6, dx = wx(8.6, -4.6), dy = wy(8.6, -4.6);\n  cap(hx, hy, ex, ey, 0.8, 0.7, 1);\n  cap(ex, ey, dx, dy, 0.7, 0.6, 1);\n  cap(dx, dy, mx - 0.5, my - 0.4, 0.3, 0.3, 0.7);\n}\n\n// A greyhound in the rotary gallop: forefeet, the gathered flight\n// with the back arched and the hind feet reaching past the fore, hind feet,\n// then the long flight stretched out flat.\nconst LFD = [5.2, 5.6, 1, 1.9, 1, 0.55, 0.65], LHD = [5.6, 6, -1, 2.6, 1.15, 0.55, 0.65];\nconst GFD = [6, 4.5, 6, 1.6, 2.5], GHD = [4, 6.5, 5, 0, 2];\nfunction dog(c) {\n  const f = cos(TAU * (c - 0.38)), hl = 6.6 - 1.4 * f;\n  frame(22, 13.2 - 0.6 * f, 0.04 * sin(TAU * (c - 0.1)));\n  const fore = (td, v) => leg(fr(c - td), 0.24, GFD, hl - 1.6, 2.4, hl - 0.8, -0.8, LFD, v);\n  const hind = (td, v) => leg(fr(c - td), 0.24, GHD, -hl + 2.6, 1.6, -hl + 1.4, -1.2, LHD, v);\n  fore(0, FAR);\n  hind(0.53, FAR);\n  // Deep chest, the waist tucked up high under an arching loin.\n  bdot(hl - 1.5, 0.2, 3.2, 1);\n  bcap(hl - 1.5, 0, hl - 5.5, -0.7, 3.2, 2.4, 1);\n  bcap(hl - 5.5, -1.1, -hl + 2.5, -1.9 - 0.8 * f, 1.8, 1.5, 1);\n  bcap(0.5, -2.3 - 1.1 * f, -hl + 2, -2.1 - 0.7 * f, 1.3, 1.3, 1);\n  bdot(-hl + 1.5, -1.5 - 0.6 * f, 2.3, 1);\n  // Long neck, narrow head with a pointed muzzle, ears folded back.\n  const nx = wx(hl, -1.5), ny = wy(hl, -1.5), al = 0.55 + 0.1 * f;\n  const px = nx + 5.4 * cos(al), py = ny - 5.4 * sin(al);\n  cap(nx, ny, px, py, 2, 1.25, 1);\n  cap(px, py, px + 5 * cos(0.42), py + 5 * sin(0.42), 1.45, 0.55, 1);\n  cap(px - 0.4, py - 0.8, px - 2, py - 1.2, 0.6, 0.35, 1);\n  // A long thin tail, curving down and up again.\n  const tx = wx(-hl, -1.8), ty = wy(-hl, -1.8), w = sin(TAU * c);\n  cap(tx, ty, tx - 3, ty + 2.2 + w * 0.5, 0.8, 0.6, 1);\n  cap(tx - 3, ty + 2.2 + w * 0.5, tx - 6, ty + 3 + w, 0.6, 0.45, 1);\n  cap(tx - 6, ty + 3 + w, tx - 8.4, ty + 1.8 + 1.4 * w, 0.45, 0.35, 1);\n  fore(0.07, 1);\n  hind(0.45, 1);\n}\n\n// A sulphur-crested cockatoo flying to the right. Each wing tapers from the\n// shoulder to a fan of primaries; seen from the side its span shows only as\n// much as it is raised or lowered, and on the upstroke the hand folds back.\nfunction bird(c) {\n  const th = 0.12 + 1.07 * cos(TAU * c), up = max(0, sin(TAU * c)), dn = max(0, -sin(TAU * c));\n  frame(22, 16 + 1.4 * sin(TAU * c + 0.6), -0.06);\n  const wing = (o, v) => {\n    const sx = wx(1 + o, -1.6), sy = wy(1 + o, -1.6), e = sin(th);\n    const ax = sx + 0.8 * dn - 2.3, ay = sy - 5 * e + 0.3;\n    const bx = ax + 1.2 * dn - 3.5 * up + 0.6, by = ay - 5.6 * e;\n    cap(sx - 2.3, sy + 0.3, ax, ay, 2.5, 2.1, v);\n    cap(ax, ay, bx, by, 2.1, 1.1, v);\n    for (let j = 0; j \u003c 4; j++) {\n      const a = th + 0.12 - 0.2 * j;\n      cap(bx + 0.4 - 0.7 * j, by, bx - 0.8 - 1.1 * j - 1.4 * up, by - 3.6 * sin(a), 0.6, 0.3, v);\n    }\n  };\n  wing(-0.8, FAR);\n  bcap(-4, 0.3, 4, -0.4, 2.3, 2.6, 1);\n  bdot(6.2, -1.2, 2.1, 1);\n  bcap(7.6, -1.6, 9.8, -0.4, 1, 0.4, 1);\n  bcap(9.4, -0.8, 9.6, 0.5, 0.45, 0.3, 1);\n  // The crest laid back in flight.\n  bcap(6, -3, 2.2, -4.6 + 0.4 * sin(TAU * c), 0.9, 0.35, 1);\n  const e = MO + round(wy(6.8, -1.6) - 0.5) * IW + round(wx(6.8, -1.6) - 0.5);\n  MASK[e] = 0.35;\n  bcap(-3.4, 0.5, -12.5, 1.4, 1.5, 0.9, 1);\n  bcap(-3.4, 1, -12, 2.9, 1.1, 0.6, FAR);\n  wing(0, 1);\n}\n\n// A man running. Hip and knee follow keyframes eight to a stride and the\n// arms swing against the legs. The figure is set down so the lower foot\n// stands on the floor, a little above it in the two moments of flight.\nconst THI = [0.42, 0.12, -0.22, -0.5, -0.35, 0.35, 0.85, 0.75], KNE = [0.12, 0.55, 0.4, 0.35, 1.5, 2.1, 1.3, 0.4];\nconst key = (K, p) => {\n  const q = fr(p) * 8, i = floor(q), f = q - i;\n  return K[i] + (K[(i + 1) & 7] - K[i]) * (1 - cos(PI * f)) * 0.5;\n};\nconst RJ = new Float32Array(24);\nfunction runner(c) {\n  let low = 0;\n  for (let s = 0; s \u003c 2; s++) {\n    const ph = c + 0.5 * s, t = key(THI, ph), k = t - key(KNE, ph), o = s * 12;\n    const ua = -0.75 * sin(TAU * (ph - 0.55));\n    RJ.set([6.4 * sin(t), 6.4 * cos(t)], o);\n    RJ.set([RJ[o] + 6.2 * sin(k), RJ[o + 1] + 6.2 * cos(k)], o + 2);\n    RJ.set([RJ[o + 2] + 2.2 * sin(k + 1.45), RJ[o + 3] + 2.2 * cos(k + 1.45)], o + 4);\n    RJ.set([4.3 * sin(ua), 4.3 * cos(ua)], o + 6);\n    RJ.set([RJ[o + 6] + 3.8 * sin(ua + 1.7), RJ[o + 7] + 3.8 * cos(ua + 1.7)], o + 8);\n    low = max(low, RJ[o + 3] + 0.5, RJ[o + 5]);\n  }\n  const fl = fr(c * 2), lift = fl > 0.375 && fl \u003c 0.5 ? 1.2 * sin((PI * (fl - 0.375)) / 0.125) : 0;\n  const hx = 21, hy = 26.6 - low - lift, sx = hx + 1.3, sy = hy - 7.1;\n  const limb = (s, v) => {\n    const o = s * 12;\n    cap(hx, hy, hx + RJ[o], hy + RJ[o + 1], 1.7, 1.15, v);\n    cap(hx + RJ[o], hy + RJ[o + 1], hx + RJ[o + 2], hy + RJ[o + 3], 1.15, 0.7, v);\n    cap(hx + RJ[o + 2], hy + RJ[o + 3], hx + RJ[o + 4], hy + RJ[o + 5], 0.7, 0.5, v);\n  };\n  const arm = (s, v) => {\n    const o = s * 12;\n    cap(sx, sy, sx + RJ[o + 6], sy + RJ[o + 7], 0.95, 0.75, v);\n    cap(sx + RJ[o + 6], sy + RJ[o + 7], sx + RJ[o + 8], sy + RJ[o + 9], 0.75, 0.6, v);\n    dot(sx + RJ[o + 8], sy + RJ[o + 9], 0.75, v);\n  };\n  arm(1, FAR);\n  limb(1, FAR);\n  cap(hx, hy, sx, sy, 1.9, 2.2, 1);\n  cap(sx, sy, sx + 0.8, sy - 2, 0.9, 0.9, 1);\n  dot(sx + 0.9, sy - 2.8, 1.75, 1);\n  limb(0, 1);\n  arm(0, 1);\n}\nconst FIGS = [horse, dog, bird, runner];\n\n// The grounds behind them. At Palo Alto a white wall ruled with upright lines\n// stands behind the track, and the horse's shadow lies on the track under\n// her. In Philadelphia black cloth strung with a white thread grid hangs\n// behind a pale floor.\nconst BD = new Float32Array(2 * NI);\nconst FIG = [0.04, 0.9, 0.9, 0.9];\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const i = y * IW + x;\n    let t = y \u003c 22 ? (x % 4 === 1 ? 0.6 : 0.9) : y \u003c 23 ? 0.32 : y \u003c 24 ? 0.55 : 0.8 - 0.02 * (y - 24);\n    const sx = (x + 0.5 - 21) / 10, sy = (y + 0.5 - 27.3) / 1.4;\n    if (sx * sx + sy * sy \u003c 1) t *= 0.6;\n    BD[i] = t;\n    BD[NI + i] = y > 26 ? 0.3 : x % 6 === 2 || y % 6 === 3 ? 0.34 : 0.05;\n  }\n// Old lenses: the corners of every plate fall off.\nconst VG = new Float32Array(NI);\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const u = (x + 0.5) / IW - 0.5, v = (y + 0.5) / IH - 0.5;\n    VG[y * IW + x] = (1 - 0.5 * u * u) * (1 - 0.4 * v * v);\n  }\n\n// Film stocks: a curve from each stock's black to its clear base, bent\n// through the grey in the middle of the row.\nconst STOCK = [\n  [0.05, 0.025, 0.012, 0.62, 0.38, 0.18, 1, 0.9, 0.7],\n  [0.05, 0.022, 0, 0.75, 0.42, 0.08, 1, 0.74, 0.3],\n  [0.05, 0.01, 0.02, 0.72, 0.26, 0.36, 1, 0.7, 0.76],\n  [0.01, 0.025, 0.07, 0.16, 0.36, 0.72, 0.72, 0.86, 1],\n  [0.01, 0.04, 0.02, 0.2, 0.52, 0.3, 0.62, 1, 0.68],\n];\nconst LAMP = [1, 0.94, 0.82];\n\n// Columns: -1 the gate's rails, -2 black film edge, -3 perforation, -4 the\n// corner column of a perforation, 0.. the picture.\nconst COL = new Int8Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const e = min(x, W - 1 - x);\n  COL[x] = e === 0 ? -1 : e >= IX ? x - IX : e >= 2 && e \u003c= 6 ? (e === 2 || e === 6 ? -4 : -3) : -2;\n}\n\nexport function setup(params) {\n  for (let s = 0; s \u003c NS; s++)\n    for (let p = 0; p \u003c NP; p++) {\n      MO = (s * NP + p) * NI;\n      FIGS[s](p / NP);\n    }\n  // Dust and a stray hair on sixteen frames that repeat along the reel, and\n  // grain on the film's own rows.\n  const DU = new Float32Array(16 * NI).fill(1);\n  for (let f = 0; f \u003c 16; f++) {\n    for (let j = 0; j \u003c 4; j++) {\n      const x = floor(Math.random() * IW), y = floor(Math.random() * IH);\n      DU[f * NI + y * IW + x] = 0.25;\n      if (Math.random() \u003c 0.4 && x + 1 \u003c IW) DU[f * NI + y * IW + x + 1] = 0.55;\n    }\n    if (f % 7 === 3) {\n      let x = 5 + Math.random() * 36, y = 4 + Math.random() * 20, a = Math.random() * TAU;\n      for (let j = 0; j \u003c 9; j++) {\n        DU[f * NI + floor(y) * IW + floor(x)] = 0.35;\n        a += Math.random() - 0.5;\n        x = cl(x + cos(a), 0, IW - 1);\n        y = cl(y + sin(a), 0, IH - 1);\n      }\n    }\n  }\n  const GN = new Float32Array(W * 256);\n  for (let i = 0; i \u003c GN.length; i++) GN[i] = 0.95 + 0.1 * Math.random();\n  params.s = {\n    DU, GN, n: 0, cyc: 0.5, pos: 1, shut: 1, fps: 3, sub: -1, base: 0, sp: [], tint: -1, lamp: -9,\n    lut: new Float32Array(3 * 65), LY: new Float32Array(H), SP: new Float32Array(H), LX: new Float32Array(W), burns: [], ask: false,\n  };\n  const S = params.s;\n  for (let x = 0; x \u003c W; x++) {\n    const c = COL[x];\n    S.LX[x] = c >= 0 ? 1 - 0.1 * ((c - 22.5) / 23) ** 2 : c === -1 ? 0.1 : c === -2 ? 0.35 : 0.5;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const d = y \u003c GY + FL ? GY + FL - y : y > GY + P - 1 ? y - GY - P + 1 : 0;\n    S.LY[y] = d === 0 ? 1 - 0.08 * ((y - GY - FL - IH / 2) / (IH / 2)) ** 2 : 0.5 * exp(-d * 0.9);\n  }\n}\n\nfunction tune(S, k) {\n  const tint = cl(k[0], 0, 1);\n  if (tint !== S.tint) {\n    S.tint = tint;\n    const q = tint * (STOCK.length - 1), i = min(STOCK.length - 2, floor(q)), f = q - i;\n    for (let j = 0; j \u003c= 64; j++) {\n      const t = j / 64, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const A = STOCK[i], B = STOCK[i + 1];\n        const g = (s) => a * s[ch] + b * s[ch + 3] + c * s[ch + 6];\n        S.lut[j * 3 + ch] = g(A) + (g(B) - g(A)) * f;\n      }\n    }\n  }\n  const lamp = cl(k[3], -1, 1);\n  if (lamp !== S.lamp) {\n    S.lamp = lamp;\n    const b = 0.05 + 0.36 * (lamp + 1);\n    for (let y = 0; y \u003c H; y++) S.SP[y] = b * (0.6 + 0.4 * exp(-(((y - 65) / 34) ** 2)));\n  }\n}\n\n// Where the strip stands: sI rows pulled since the start; frame k holds rows\n// GY + sI + k P onwards.\nconst rows = (S) => round(S.pos * P);\nconst frameAt = (S, y) => floor((y - GY - rows(S)) / P);\nfunction subOf(S, k) {\n  let s = S.base;\n  for (const sp of S.sp) if (k \u003c= sp.k) s = sp.s;\n  return s;\n}\n\nconst BURN = 1.9;\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  tune(S, k);\n  const sub = cl(round(k[2]), 0, NS - 1);\n  if (S.sub \u003c 0) S.base = sub;\n  else if (sub !== S.sub) S.sp.push({ k: frameAt(S, 0) - 1, s: sub });\n  S.sub = sub;\n  while (S.sp.length && frameAt(S, H - 1) \u003c= S.sp[0].k) S.base = S.sp.shift().s;\n  S.fps = 1.5 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0] && !S.burns.some((b) => b.t \u003c BURN + 0.5)) S.ask = true;\n  const tp = min(0.16, 0.32 / S.fps);\n  // The film stands still while a frame burns, and a burnt frame is\n  // forgotten once it has gone off the bottom of the panel.\n  let held = false;\n  for (const b of S.burns) if ((b.t += dt) \u003c BURN) held = true;\n  if (S.burns.length) S.burns = S.burns.filter((b) => frameAt(S, H - 1) >= b.k && b.t \u003c 60);\n  if (!held) {\n    S.cyc += dt * S.fps;\n    if (S.cyc >= 1) (S.cyc -= 1), S.n++;\n  }\n  const tau = S.cyc / S.fps;\n  if (tau \u003c tp) {\n    const u = tau / tp;\n    S.pos = S.n + (1 - cos(PI * u)) / 2;\n    S.shut = 1 - 0.45 * sin(PI * u);\n  } else {\n    S.pos = S.n + 1;\n    S.shut = 1;\n    if (S.ask) {\n      S.ask = false;\n      const h = [0, 1, 2].map(() => Math.random() * TAU), kg = frameAt(S, GY + FL);\n      S.burns = S.burns.filter((b) => b.k !== kg);\n      S.burns.push({ k: kg, t: 0, x: 14 + 18 * Math.random(), y: 9 + 10 * Math.random(), h });\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const sI = rows(S), { lut, DU, GN, LX, LY, SP, burns } = S;\n  // A burn: first a blister, then a hole opening in it with a glowing rim\n  // that cools once the film moves on.\n  for (const b of burns) {\n    b.rh = 9.5 * ease((b.t - 0.35) / 1.3);\n    b.rb = b.rh + 1.2 + 2.6 * ease(b.t / 0.5);\n    b.gl = b.t \u003c BURN ? 1 : max(0, 1 - (b.t - BURN) / 1.4);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const v = y - GY - sI, k = floor(v / P), r = v - k * P, iy = r - FL;\n    const sub = subOf(S, k), mo = (sub * NP + (((-k % NP) + NP) % NP)) * NI, bo = sub ? NI : 0, fg = FIG[sub];\n    const pr = r & 7, hole = pr >= 3 && pr \u003c= 6, hedge = pr === 3 || pr === 6;\n    const ex = 0.93 + 0.1 * hash(k, 7), du = (k & 15) * NI, gn = (v & 255) * W;\n    let splice = false;\n    if (iy \u003c 0) for (const sp of S.sp) if (sp.k === k - 1) splice = true;\n    // A scratch down the emulsion, one every few frames, fixed to the film.\n    const seg = floor(k / 5), hs = hash(seg, 11);\n    const scx = hs \u003c 0.55 ? floor(hash(seg, 12) * 40) + 3 + (((v >> 3) & 3) === 1 ? 1 : 0) : -9;\n    const sc0 = hash(seg, 13) * 5 * P, sc1 = sc0 + (0.3 + hash(seg, 14)) * 3 * P, vs = v - seg * 5 * P;\n    const scr = vs > sc0 && vs \u003c sc1 ? scx : -9;\n    const ly = LY[y] * S.shut, sp = SP[y];\n    let burn = null;\n    for (const b of burns) if (b.k === k) burn = b;\n    for (let x = 0; x \u003c W; x++) {\n      const c = COL[x];\n      const a = ly * LX[x], L = 0.95 * a + sp * (1 - 0.95 * a);\n      let R, G, Bl;\n      if (c \u003c -2 && hole) {\n        // A perforation: the lamp straight through, its corners rounded.\n        const e = c === -4 && hedge ? 0.45 : 1;\n        R = LAMP[0] * L * e;\n        G = LAMP[1] * L * e;\n        Bl = LAMP[2] * L * e;\n      } else if (c === -1) {\n        R = G = Bl = 0.12 * L;\n      } else {\n        let t = 0.03;\n        let br = 0;\n        if (c >= 0 && iy >= 0) {\n          const i = iy * IW + c;\n          t = (BD[bo + i] + (fg - BD[bo + i]) * MASK[mo + i]) * VG[i] * ex * DU[du + i];\n          if (c === scr) t = min(1, t + 0.22);\n          if (burn) {\n            const dx = c + 0.5 - burn.x, dy = iy + 0.5 - burn.y, an = atan2(dy, dx), h = burn.h;\n            const d = sqrt(dx * dx + dy * dy) / (1 + 0.18 * sin(3 * an + h[0]) + 0.1 * sin(5 * an + h[1]) + 0.06 * sin(11 * an + h[2]));\n            if (d \u003c burn.rh) br = 1;\n            else if (d \u003c burn.rh + 1.4 && burn.rh > 0) br = 2;\n            else if (d \u003c burn.rb) {\n              t *= 0.3 + 0.5 * hash(c >> 1, (iy >> 1) + k * 31);\n              br = 3;\n            }\n          }\n        } else if (splice && c >= 0) t = r === 1 ? 0.55 : 0.2;\n        if (br === 1) {\n          R = LAMP[0] * L;\n          G = LAMP[1] * L;\n          Bl = LAMP[2] * L;\n        } else {\n          const j = round(cl(t, 0, 1) * 64) * 3, g = L * GN[gn + x];\n          R = lut[j] * g;\n          G = lut[j + 1] * g;\n          Bl = lut[j + 2] * g;\n          if (br === 3) (R = R * 0.8 + 0.1 * L), (G *= 0.6), (Bl *= 0.4);\n          if (br === 2) (R += burn.gl), (G += 0.42 * burn.gl), (Bl += 0.06 * burn.gl);\n        }\n      }\n      display.setPixel(x, y, min(255, 255 * R), min(255, 255 * G), min(255, 255 * Bl));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white."},{"name":"Speed","min":0.2,"max":3,"about":"Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds."},{"name":"Subject","min":0,"max":3,"about":"Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice."},{"name":"Lamp","min":-1,"max":1,"about":"How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box."}],"start":[0,2,0,0.06],"measures":{"motion":1.0766,"detail":0.056,"edges":0.3551,"complexity":1.5938,"coverage":0.6083,"colour":0.0988,"drift":0.0453},"knobResponse":[0.0878,0.0582,0.1145,0.1659]},{"slug":"hourglass","title":"Hourglass","family":"time","round":2,"note":"LED 하나가 모래 한 알이에요. 두 LED 목으로 흘러 위 더미는 가운데부터 꺼지고 아래에는 원뿔이 쌓이며, 위가 비면 유리가 반 바퀴 돌아 뒤집혀요.","idea":"One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.","buttons":"K1 tap turns the glass over now.","code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-hourglass","type":"code","name":"hourglass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sand","min":0,"max":1,"about":"The colour of the sand."},{"name":"Flow","min":0.5,"max":4,"about":"How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range."},{"name":"Glass","min":0,"max":1,"about":"The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube."},{"name":"Layers","min":1,"max":6,"about":"Colours each grain by when in the run it passed the neck, so the heap below grows rings of time."}],"start":[0,2,0,1],"measures":{"motion":0.0687,"detail":0.0755,"edges":0.7242,"complexity":0.1856,"coverage":0.3468,"colour":0.2248,"drift":0.051},"knobResponse":[0.0656,0.0293,0.076,0.03]},{"slug":"hyperbolic-band","title":"Hyperbolic Band","family":"space","round":28,"note":"칠각형이 한 꼭짓점에 셋씩 모인 쌍곡 평면을 띠 모형으로 세웠어요. 패널 너비 64 LED 에 평면의 폭이 다 들어가고, 쪽매는 띠를 따라 끝없이 올라가며 양옆 가장자리에서 한없이 작아져요. K3 이 {8,3}, {5,4}, {4,5}, {3,7} 로 쪽매를 바꾸고, 누르면 반 바퀴 돌아 제 모습으로 내려앉아요.","idea":"The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.","buttons":"K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.","code":"// ===== Patternflow pattern =====\n// Title:   Hyperbolic Band\n// Family:  space\n// Idea:    The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the band model of the hyperbolic plane, with the Poincaré disk (Eugenio Beltrami 1868, Henri Poincaré 1882) and Coxeter's regular {p,q} tilings, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1\n//\n// Knob 1: Hue. Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges.\n// Knob 2: Speed. How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that.\n// Knob 3: Tiling. Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}.\n// Knob 4: Lines. At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth.\n// Buttons: K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, log, asinh, acosh, abs, tanh, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The band |Im w| \u003c 1 goes onto the Poincaré disk by z = tanh(pi w / 4). Here\n// Im w runs across the panel, one unit to 32 LEDs, and Re w up it, so the\n// middle line of the band is the disk's real diameter, a geodesic. Along it a\n// unit of w is pi / 2 of hyperbolic length; at a distance v off it, a LED is\n// 1 / cos(pi v / 2) times longer.\nconst ZX = new Float64Array(N), ZY = new Float64Array(N), RHO = new Float64Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const v = (x + 0.5 - W / 2) / 32;\n  RHO[x] = PI / 64 / cos((PI * v) / 2);\n  for (let y = 0; y \u003c H; y++) {\n    const u = (H / 2 - y - 0.5) / 32, a = (PI * u) / 2, b = (PI * v) / 2, d = Math.cosh(a) + cos(b);\n    ZX[y * W + x] = Math.sinh(a) / d;\n    ZY[y * W + x] = sin(b) / d;\n  }\n}\n\n// The tilings. For each, the fundamental triangle of its reflection group:\n// the corner at the origin (a tile's centre) with angle pi/p between the real\n// axis and the ray at pi/p, and the circle mirror (the tile's edge) crossing\n// the real axis square at distance a. a is the tile's inradius, R its\n// circumradius, e half an edge. T is the shortest translation along the real\n// axis that is a symmetry: twice the gap between the mirrors that cross the\n// axis square, which depends on what the axis meets on its way.\nconst TIL = [[7, 3], [8, 3], [5, 4], [4, 5], [3, 7]].map(([p, q]) => {\n  const a = acosh(cos(PI / q) / sin(PI / p)), R = acosh(1 / (Math.tan(PI / p) * Math.tan(PI / q))), e = acosh(cos(PI / p) / sin(PI / q));\n  const m = tanh(a / 2), C = (m + 1 / m) / 2, r = (1 / m - m) / 2;\n  const T = p % 2 === 0 ? 2 * a : q % 2 === 0 ? 4 * (a + R) : 2 * (a + R + e);\n  const rc = new Float64Array(p), rs = new Float64Array(p);\n  for (let k = 0; k \u003c p; k++) (rc[k] = cos((2 * PI * k) / p)), (rs[k] = sin((2 * PI * k) / p));\n  // The wedge number, p added, taken round to 0..p-1.\n  const wr = new Int8Array(3 * p).map((_, i) => i % p);\n  return { p, q, a, R, C, r, r2: r * r, Tb: (2 * T) / PI, m0: (2 * a) / PI, rc, rs, wr, sf: sin(PI / p), cf: cos(PI / p) };\n});\n\nconst MAXIT = 40;\nconst CODE = new Int8Array(MAXIT);\nlet lutHue = NaN;\nconst LUT = new Float32Array(1024 * 3);\nfunction hsv(h, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const rgb = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = { s: 0, hue: 0, til: 0, lines: 0.06, speed: 2, spin: -1, m: 0, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.til = cl(Math.round(k[2]), 0, TIL.length - 1);\n  P.lines = cl(k[3], 0, 1);\n  const G = TIL[P.til];\n  // Tiles climb: the point of the tiling under the panel's centre moves down\n  // the band. 12 LEDs a second at Speed 2.\n  const slow = P.spin >= 0 ? 1 - 0.8 * sin(PI * P.spin) : 1;\n  P.s -= d * P.speed * 0.1875 * slow;\n  P.s -= G.Tb * floor(P.s / G.Tb + 0.5);\n  if (P.spin >= 0) {\n    P.spin += d / 3;\n    if (P.spin >= 1) P.spin = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) {\n    // The nearest point where a mirror crosses the axis square: the middle of\n    // an edge, or for even p a tile's centre too.\n    const h = G.Tb / 2;\n    P.m = G.m0 + h * Math.round((P.s - G.m0) / h);\n    P.spin = 0;\n  }\n}\n\n// Complex 2x2 Möbius matrices as [ar, ai, br, bi, cr, ci, dr, di].\nfunction mul(A, B) {\n  const o = [];\n  for (let i = 0; i \u003c 2; i++)\n    for (let j = 0; j \u003c 2; j++) {\n      const p = A[i * 4], pi = A[i * 4 + 1], q = A[i * 4 + 2], qi = A[i * 4 + 3];\n      const u = B[j * 2], ui = B[j * 2 + 1], v = B[4 + j * 2], vi = B[5 + j * 2];\n      o.push(p * u - pi * ui + q * v - qi * vi, p * ui + pi * u + q * vi + qi * v);\n    }\n  return o;\n}\nconst trans = (wb) => {\n  const t = tanh((PI * wb) / 4);\n  return [1, 0, t, 0, t, 0, 1, 0];\n};\nconst rot = (th) => [cos(th / 2), sin(th / 2), 0, 0, 0, 0, cos(th / 2), -sin(th / 2)];\n\n// The colour of a point of the tiling from where it sits on the band: cyan\n// glass on the middle line going through blue and violet to magenta at the\n// edges, and swinging a little along the band with the period T. Both are\n// kept by the half turn of K1 about any point where a mirror crosses the axis\n// square, and by the slide of one period.\nfunction hueAt(G, x, y) {\n  const u = (1 / PI) * log(((1 + x) ** 2 + y * y) / ((1 - x) ** 2 + y * y)), v = (2 / PI) * atan2(2 * y, 1 - x * x - y * y);\n  const h = 0.5 + 0.06 * cos((2 * PI * (u - G.m0)) / G.Tb) + 0.3 * sqrt(abs(v));\n  return (((h - floor(h)) * 1024) | 0) * 3;\n}\n\n// atan2 to a hundred-thousandth of a radian, which is all the fold needs to\n// pick its wedge: a point that lands a hair across a straight mirror is on\n// that mirror either way.\nfunction fat(y, x) {\n  const ax = x \u003c 0 ? -x : x, ay = y \u003c 0 ? -y : y, a = (ax \u003c ay ? ax : ay) / ((ax \u003c ay ? ay : ax) + 1e-300), q = a * a;\n  let r = ((-0.0464964749 * q + 0.15931422) * q - 0.327622764) * q * a + a;\n  if (ay > ax) r = PI / 2 - r;\n  if (x \u003c 0) r = PI - r;\n  return y \u003c 0 ? -r : r;\n}\n\nconst PREV = new Int8Array(MAXIT);\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const G = TIL[P.til], { p, C, r, r2, rc, rs, sf, cf, wr, a: ina, R: circ } = G, pp = p / PI;\n  const buf = P.buf, L = P.lines;\n  // From the panel's disk to the tiling: slide s along the axis, and during\n  // the K1 half turn, turn by th about the crossing m on the way.\n  let M = trans(P.s), mir = 0;\n  if (P.spin >= 0) {\n    const u = P.spin, th = PI * u * u * (3 - 2 * u);\n    M = mul(trans(P.m), mul(rot(th), trans(P.s - P.m)));\n    mir = sin(PI * u);\n  }\n  const [ar, ai, br, bi, cr, ci, dr, di] = M;\n  if (lutHue !== P.hue) for (let i = 0; i \u003c 1024; i++) hsv(i / 1024 + (lutHue = P.hue), LUT, i * 3);\n  const glassV = 1 - 0.78 * L, haze = 0.62 * glassV + 0.12 * L;\n  const lineR = 255 * L, lineG = 245 * L, lineB = 225 * L;\n  // The leading and the mirrors are lines of fixed hyperbolic width, box\n  // filtered over the LED, so they thin out with the tiles.\n  const hw = 0.035, mw = 0.025;\n  // The haze comes in as a tile's inradius drops from about three LEDs to one.\n  for (let x = 0; x \u003c W; x++) {\n    const rho = RHO[x], fog = sm(0.3 * ina, 1.1 * ina, rho);\n    let pn = -1, po = 0;\n    for (let y = 0; y \u003c H; y++) {\n      const i = y * W + x, zx = ZX[i], zy = ZY[i];\n      const nx = ar * zx - ai * zy + br, ny = ar * zy + ai * zx + bi;\n      const dx = cr * zx - ci * zy + dr, dy = cr * zy + ci * zx + di;\n      const qd = 1 / (dx * dx + dy * dy);\n      let X = (nx * dx + ny * dy) * qd, Y = (ny * dx - nx * dy) * qd;\n      let R = 0, Gc = 0, B = 0;\n      // Where the tiles are smaller than a LED, the glass's average colour.\n      if (fog > 0) {\n        const o = hueAt(G, X, Y);\n        R = LUT[o] * 255 * haze;\n        Gc = LUT[o + 1] * 255 * haze;\n        B = LUT[o + 2] * 255 * haze;\n      }\n      if (fog \u003c 1) {\n        // Fold into the fundamental triangle: turn into the wedge of angle\n        // pi/p, then reflect in the edge circle, until the edge is not crossed.\n        // Each turn and whether it flipped is kept, to find the tile's centre.\n        let n = 0, par = 0, ok = 1;\n        for (;;) {\n          const m = floor(fat(Y, X) * pp), f = m & 1, jj = wr[((m + 1) >> 1) + p];\n          const c = rc[jj], s = rs[jj], X1 = X * c + Y * s;\n          Y = Y * c - X * s;\n          X = X1;\n          if (f) Y = -Y;\n          par ^= f;\n          const ex = X - C, e2 = ex * ex + Y * Y;\n          if (e2 >= r2) break;\n          if (n >= MAXIT) {\n            ok = 0;\n            break;\n          }\n          CODE[n++] = jj * 2 + f;\n          const g = r2 / e2;\n          X = C + ex * g;\n          Y *= g;\n          par ^= 1;\n        }\n        if (!ok) {\n          const o = hueAt(G, X, Y);\n          (R = LUT[o] * 255 * haze), (Gc = LUT[o + 1] * 255 * haze), (B = LUT[o + 2] * 255 * haze);\n        } else {\n          // The same steps as the LED above: the same tile.\n          let same = n === pn;\n          for (let k = 0; same && k \u003c n; k++) same = CODE[k] === PREV[k];\n          if (!same) {\n            // The tile's centre is the origin taken back through the steps.\n            let cx = 0, cy = 0;\n            if (n > 0) {\n              cx = 1 / C;\n              for (let k = n - 1; k >= 0; k--) {\n                const jj = CODE[k] >> 1;\n                if (CODE[k] & 1) cy = -cy;\n                const c = rc[jj], s = rs[jj], x1 = cx * c - cy * s;\n                cy = cx * s + cy * c;\n                cx = x1;\n                if (k > 0) {\n                  const ex = cx - C, e2 = ex * ex + cy * cy, g = r2 / e2;\n                  cx = C + ex * g;\n                  cy *= g;\n                }\n              }\n            }\n            po = hueAt(G, cx, cy);\n            pn = n;\n            for (let k = 0; k \u003c n; k++) PREV[k] = CODE[k];\n          }\n          // Distances in the triangle: to the tile's edge, its centre, and the\n          // two straight mirrors that cut the tile into 2p facets.\n          const z2 = X * X + Y * Y, den = 1 - z2, zr = sqrt(z2);\n          const de = asinh((1 + z2 - 2 * C * X) / (r * den)), dc = log((1 + zr) / (1 - zr));\n          const dm = min(2 * Y, 2 * (X * sf - Y * cf)) / den;\n          const facet = 1 + (par ? -0.09 : 0.09) * min(1, dm / rho);\n          const gl = (1 - 0.42 * (dc / circ) ** 2) * facet * glassV * 255;\n          let r0 = LUT[po] * gl, g0 = LUT[po + 1] * gl, b0 = LUT[po + 2] * gl;\n          const cov = cl((min(de + rho / 2, hw) - max(de - rho / 2, -hw)) / rho, 0, 1);\n          r0 += (lineR - r0) * cov;\n          g0 += (lineG - g0) * cov;\n          b0 += (lineB - b0) * cov;\n          if (mir > 0) {\n            const mc = cl((min(dm + rho / 2, mw) - max(dm - rho / 2, -mw)) / rho, 0, 1) * mir * 0.85;\n            r0 += (250 - r0) * mc;\n            g0 += (235 - g0) * mc;\n            b0 += (200 - b0) * mc;\n          }\n          R = R * fog + r0 * (1 - fog);\n          Gc = Gc * fog + g0 * (1 - fog);\n          B = B * fog + b0 * (1 - fog);\n        }\n      }\n      const q = i * 3;\n      buf[q] = R;\n      buf[q + 1] = Gc;\n      buf[q + 2] = B;\n    }\n  }\n  for (let q = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, buf[q], buf[q + 1], buf[q + 2]);\n}\n","layer":{"id":"layer-hyperbolic-band","type":"code","name":"hyperbolic-band","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hyperbolic Band\n// Family:  space\n// Idea:    The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the band model of the hyperbolic plane, with the Poincaré disk (Eugenio Beltrami 1868, Henri Poincaré 1882) and Coxeter's regular {p,q} tilings, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1\n//\n// Knob 1: Hue. Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges.\n// Knob 2: Speed. How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that.\n// Knob 3: Tiling. Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}.\n// Knob 4: Lines. At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth.\n// Buttons: K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, log, asinh, acosh, abs, tanh, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The band |Im w| \u003c 1 goes onto the Poincaré disk by z = tanh(pi w / 4). Here\n// Im w runs across the panel, one unit to 32 LEDs, and Re w up it, so the\n// middle line of the band is the disk's real diameter, a geodesic. Along it a\n// unit of w is pi / 2 of hyperbolic length; at a distance v off it, a LED is\n// 1 / cos(pi v / 2) times longer.\nconst ZX = new Float64Array(N), ZY = new Float64Array(N), RHO = new Float64Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const v = (x + 0.5 - W / 2) / 32;\n  RHO[x] = PI / 64 / cos((PI * v) / 2);\n  for (let y = 0; y \u003c H; y++) {\n    const u = (H / 2 - y - 0.5) / 32, a = (PI * u) / 2, b = (PI * v) / 2, d = Math.cosh(a) + cos(b);\n    ZX[y * W + x] = Math.sinh(a) / d;\n    ZY[y * W + x] = sin(b) / d;\n  }\n}\n\n// The tilings. For each, the fundamental triangle of its reflection group:\n// the corner at the origin (a tile's centre) with angle pi/p between the real\n// axis and the ray at pi/p, and the circle mirror (the tile's edge) crossing\n// the real axis square at distance a. a is the tile's inradius, R its\n// circumradius, e half an edge. T is the shortest translation along the real\n// axis that is a symmetry: twice the gap between the mirrors that cross the\n// axis square, which depends on what the axis meets on its way.\nconst TIL = [[7, 3], [8, 3], [5, 4], [4, 5], [3, 7]].map(([p, q]) => {\n  const a = acosh(cos(PI / q) / sin(PI / p)), R = acosh(1 / (Math.tan(PI / p) * Math.tan(PI / q))), e = acosh(cos(PI / p) / sin(PI / q));\n  const m = tanh(a / 2), C = (m + 1 / m) / 2, r = (1 / m - m) / 2;\n  const T = p % 2 === 0 ? 2 * a : q % 2 === 0 ? 4 * (a + R) : 2 * (a + R + e);\n  const rc = new Float64Array(p), rs = new Float64Array(p);\n  for (let k = 0; k \u003c p; k++) (rc[k] = cos((2 * PI * k) / p)), (rs[k] = sin((2 * PI * k) / p));\n  // The wedge number, p added, taken round to 0..p-1.\n  const wr = new Int8Array(3 * p).map((_, i) => i % p);\n  return { p, q, a, R, C, r, r2: r * r, Tb: (2 * T) / PI, m0: (2 * a) / PI, rc, rs, wr, sf: sin(PI / p), cf: cos(PI / p) };\n});\n\nconst MAXIT = 40;\nconst CODE = new Int8Array(MAXIT);\nlet lutHue = NaN;\nconst LUT = new Float32Array(1024 * 3);\nfunction hsv(h, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const rgb = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = { s: 0, hue: 0, til: 0, lines: 0.06, speed: 2, spin: -1, m: 0, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.til = cl(Math.round(k[2]), 0, TIL.length - 1);\n  P.lines = cl(k[3], 0, 1);\n  const G = TIL[P.til];\n  // Tiles climb: the point of the tiling under the panel's centre moves down\n  // the band. 12 LEDs a second at Speed 2.\n  const slow = P.spin >= 0 ? 1 - 0.8 * sin(PI * P.spin) : 1;\n  P.s -= d * P.speed * 0.1875 * slow;\n  P.s -= G.Tb * floor(P.s / G.Tb + 0.5);\n  if (P.spin >= 0) {\n    P.spin += d / 3;\n    if (P.spin >= 1) P.spin = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) {\n    // The nearest point where a mirror crosses the axis square: the middle of\n    // an edge, or for even p a tile's centre too.\n    const h = G.Tb / 2;\n    P.m = G.m0 + h * Math.round((P.s - G.m0) / h);\n    P.spin = 0;\n  }\n}\n\n// Complex 2x2 Möbius matrices as [ar, ai, br, bi, cr, ci, dr, di].\nfunction mul(A, B) {\n  const o = [];\n  for (let i = 0; i \u003c 2; i++)\n    for (let j = 0; j \u003c 2; j++) {\n      const p = A[i * 4], pi = A[i * 4 + 1], q = A[i * 4 + 2], qi = A[i * 4 + 3];\n      const u = B[j * 2], ui = B[j * 2 + 1], v = B[4 + j * 2], vi = B[5 + j * 2];\n      o.push(p * u - pi * ui + q * v - qi * vi, p * ui + pi * u + q * vi + qi * v);\n    }\n  return o;\n}\nconst trans = (wb) => {\n  const t = tanh((PI * wb) / 4);\n  return [1, 0, t, 0, t, 0, 1, 0];\n};\nconst rot = (th) => [cos(th / 2), sin(th / 2), 0, 0, 0, 0, cos(th / 2), -sin(th / 2)];\n\n// The colour of a point of the tiling from where it sits on the band: cyan\n// glass on the middle line going through blue and violet to magenta at the\n// edges, and swinging a little along the band with the period T. Both are\n// kept by the half turn of K1 about any point where a mirror crosses the axis\n// square, and by the slide of one period.\nfunction hueAt(G, x, y) {\n  const u = (1 / PI) * log(((1 + x) ** 2 + y * y) / ((1 - x) ** 2 + y * y)), v = (2 / PI) * atan2(2 * y, 1 - x * x - y * y);\n  const h = 0.5 + 0.06 * cos((2 * PI * (u - G.m0)) / G.Tb) + 0.3 * sqrt(abs(v));\n  return (((h - floor(h)) * 1024) | 0) * 3;\n}\n\n// atan2 to a hundred-thousandth of a radian, which is all the fold needs to\n// pick its wedge: a point that lands a hair across a straight mirror is on\n// that mirror either way.\nfunction fat(y, x) {\n  const ax = x \u003c 0 ? -x : x, ay = y \u003c 0 ? -y : y, a = (ax \u003c ay ? ax : ay) / ((ax \u003c ay ? ay : ax) + 1e-300), q = a * a;\n  let r = ((-0.0464964749 * q + 0.15931422) * q - 0.327622764) * q * a + a;\n  if (ay > ax) r = PI / 2 - r;\n  if (x \u003c 0) r = PI - r;\n  return y \u003c 0 ? -r : r;\n}\n\nconst PREV = new Int8Array(MAXIT);\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const G = TIL[P.til], { p, C, r, r2, rc, rs, sf, cf, wr, a: ina, R: circ } = G, pp = p / PI;\n  const buf = P.buf, L = P.lines;\n  // From the panel's disk to the tiling: slide s along the axis, and during\n  // the K1 half turn, turn by th about the crossing m on the way.\n  let M = trans(P.s), mir = 0;\n  if (P.spin >= 0) {\n    const u = P.spin, th = PI * u * u * (3 - 2 * u);\n    M = mul(trans(P.m), mul(rot(th), trans(P.s - P.m)));\n    mir = sin(PI * u);\n  }\n  const [ar, ai, br, bi, cr, ci, dr, di] = M;\n  if (lutHue !== P.hue) for (let i = 0; i \u003c 1024; i++) hsv(i / 1024 + (lutHue = P.hue), LUT, i * 3);\n  const glassV = 1 - 0.78 * L, haze = 0.62 * glassV + 0.12 * L;\n  const lineR = 255 * L, lineG = 245 * L, lineB = 225 * L;\n  // The leading and the mirrors are lines of fixed hyperbolic width, box\n  // filtered over the LED, so they thin out with the tiles.\n  const hw = 0.035, mw = 0.025;\n  // The haze comes in as a tile's inradius drops from about three LEDs to one.\n  for (let x = 0; x \u003c W; x++) {\n    const rho = RHO[x], fog = sm(0.3 * ina, 1.1 * ina, rho);\n    let pn = -1, po = 0;\n    for (let y = 0; y \u003c H; y++) {\n      const i = y * W + x, zx = ZX[i], zy = ZY[i];\n      const nx = ar * zx - ai * zy + br, ny = ar * zy + ai * zx + bi;\n      const dx = cr * zx - ci * zy + dr, dy = cr * zy + ci * zx + di;\n      const qd = 1 / (dx * dx + dy * dy);\n      let X = (nx * dx + ny * dy) * qd, Y = (ny * dx - nx * dy) * qd;\n      let R = 0, Gc = 0, B = 0;\n      // Where the tiles are smaller than a LED, the glass's average colour.\n      if (fog > 0) {\n        const o = hueAt(G, X, Y);\n        R = LUT[o] * 255 * haze;\n        Gc = LUT[o + 1] * 255 * haze;\n        B = LUT[o + 2] * 255 * haze;\n      }\n      if (fog \u003c 1) {\n        // Fold into the fundamental triangle: turn into the wedge of angle\n        // pi/p, then reflect in the edge circle, until the edge is not crossed.\n        // Each turn and whether it flipped is kept, to find the tile's centre.\n        let n = 0, par = 0, ok = 1;\n        for (;;) {\n          const m = floor(fat(Y, X) * pp), f = m & 1, jj = wr[((m + 1) >> 1) + p];\n          const c = rc[jj], s = rs[jj], X1 = X * c + Y * s;\n          Y = Y * c - X * s;\n          X = X1;\n          if (f) Y = -Y;\n          par ^= f;\n          const ex = X - C, e2 = ex * ex + Y * Y;\n          if (e2 >= r2) break;\n          if (n >= MAXIT) {\n            ok = 0;\n            break;\n          }\n          CODE[n++] = jj * 2 + f;\n          const g = r2 / e2;\n          X = C + ex * g;\n          Y *= g;\n          par ^= 1;\n        }\n        if (!ok) {\n          const o = hueAt(G, X, Y);\n          (R = LUT[o] * 255 * haze), (Gc = LUT[o + 1] * 255 * haze), (B = LUT[o + 2] * 255 * haze);\n        } else {\n          // The same steps as the LED above: the same tile.\n          let same = n === pn;\n          for (let k = 0; same && k \u003c n; k++) same = CODE[k] === PREV[k];\n          if (!same) {\n            // The tile's centre is the origin taken back through the steps.\n            let cx = 0, cy = 0;\n            if (n > 0) {\n              cx = 1 / C;\n              for (let k = n - 1; k >= 0; k--) {\n                const jj = CODE[k] >> 1;\n                if (CODE[k] & 1) cy = -cy;\n                const c = rc[jj], s = rs[jj], x1 = cx * c - cy * s;\n                cy = cx * s + cy * c;\n                cx = x1;\n                if (k > 0) {\n                  const ex = cx - C, e2 = ex * ex + cy * cy, g = r2 / e2;\n                  cx = C + ex * g;\n                  cy *= g;\n                }\n              }\n            }\n            po = hueAt(G, cx, cy);\n            pn = n;\n            for (let k = 0; k \u003c n; k++) PREV[k] = CODE[k];\n          }\n          // Distances in the triangle: to the tile's edge, its centre, and the\n          // two straight mirrors that cut the tile into 2p facets.\n          const z2 = X * X + Y * Y, den = 1 - z2, zr = sqrt(z2);\n          const de = asinh((1 + z2 - 2 * C * X) / (r * den)), dc = log((1 + zr) / (1 - zr));\n          const dm = min(2 * Y, 2 * (X * sf - Y * cf)) / den;\n          const facet = 1 + (par ? -0.09 : 0.09) * min(1, dm / rho);\n          const gl = (1 - 0.42 * (dc / circ) ** 2) * facet * glassV * 255;\n          let r0 = LUT[po] * gl, g0 = LUT[po + 1] * gl, b0 = LUT[po + 2] * gl;\n          const cov = cl((min(de + rho / 2, hw) - max(de - rho / 2, -hw)) / rho, 0, 1);\n          r0 += (lineR - r0) * cov;\n          g0 += (lineG - g0) * cov;\n          b0 += (lineB - b0) * cov;\n          if (mir > 0) {\n            const mc = cl((min(dm + rho / 2, mw) - max(dm - rho / 2, -mw)) / rho, 0, 1) * mir * 0.85;\n            r0 += (250 - r0) * mc;\n            g0 += (235 - g0) * mc;\n            b0 += (200 - b0) * mc;\n          }\n          R = R * fog + r0 * (1 - fog);\n          Gc = Gc * fog + g0 * (1 - fog);\n          B = B * fog + b0 * (1 - fog);\n        }\n      }\n      const q = i * 3;\n      buf[q] = R;\n      buf[q + 1] = Gc;\n      buf[q + 2] = B;\n    }\n  }\n  for (let q = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, buf[q], buf[q + 1], buf[q + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that."},{"name":"Tiling","min":0,"max":4,"about":"Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}."},{"name":"Lines","min":0,"max":1,"about":"At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth."}],"start":[0,2,0,0.06],"measures":{"motion":1.4373,"detail":0.1076,"edges":0.286,"complexity":2.1332,"coverage":0.9802,"colour":0.6419,"drift":0.0932},"knobResponse":[0.5855,0.187,0.2223,0.3482]},{"slug":"iceberg","title":"Iceberg","family":"polar","round":26,"note":"물높이에서 자른 빙산이 9분의 1만 물 위에 내밀고 펭귄을 얹은 채 너울에 흔들리다, 판이 떨어져 물보라를 일으켜요. 물 아래 몸은 푸른 얼음 줄무늬와 탄산처럼 오르는 거품 줄기로 패널 바닥까지 내려가요. K1 은 백야의 해에서 오로라 뜬 극야로, 버튼은 판을 떼어 내요.","idea":"An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.","buttons":"K1 tap breaks a slab off the berg now.","code":"// ===== Patternflow pattern =====\n// Title:   Iceberg\n// Family:  polar\n// Idea:    An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the schoolbook drawing of an iceberg with eight ninths of it under the water\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1\n//\n// Knob 1: Light. Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora.\n// Knob 2: Speed. At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower.\n// Knob 3: Shape. A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom.\n// Knob 4: Swell. How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea.\n// Buttons: K1 tap breaks a slab off the berg now.\n\nconst W = 64, H = 128, N = W * H;\n// Sea level, horizon, the berg's middle; its grid (u across, v down from sea level) turns about row PV.\nconst WL = 30, HZ = 26, BX = 28, BW = 64, BH = 128, U0 = -32, V0 = -28, PV = 34, NB = BW * BH;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Caustic noise; the colour the water leaves at each row.\nconst CT = new Float32Array(4096).map((_, k) => vn(((k & 63) * 20) / 64, ((k >> 6) * 20) / 64, 20));\nconst AT = new Float32Array(H * 3).map((_, q) => exp(-max(0, floor(q / 3) + 0.5 - WL) / [26, 75, 170][q % 3]));\n\n// The top: a snow plain with sheer cliffs, or two spires.\nconst PIN = [[-13.5, 1], [-12, -3], [-10, -6], [-7.5, -10], [-5.5, -16], [-3.5, -19.5], [-1.5, -17.5], [0.5, -11], [2.5, -7.5], [4.5, -8.5], [6.5, -13], [8, -16], [9.5, -15], [11.5, -8], [13, -2.5], [14, 1]];\nfunction topAt(u, s) {\n  let i = 1;\n  while (i \u003c PIN.length - 1 && u > PIN[i][0]) i++;\n  const [a, b] = PIN[i - 1], [c, e] = PIN[i], A = u > 0 ? u : -u * 1.05;\n  const tab = A \u003c 15 ? -11 + 0.8 * (vn(u * 0.3, 3) - 0.5) + 1.3 * sm(12.5, 15, A) : mix(-9.7, 1, cl((A - 15) / 1.1, 0, 1));\n  return mix(tab, b + (e - b) * cl((u - a) / (c - a), 0, 1), s);\n}\n// Half widths under the water, tabular and pinnacle, a little lopsided.\nconst CV = [0, 5, 12, 22, 34, 46, 58, 68, 76, 82, 86];\nconst WT = [16.6, 20.5, 22, 22.5, 21.5, 21, 19.5, 16.5, 12.5, 8, 0];\nconst WP = [13.6, 15.5, 16.5, 16.5, 15.5, 14, 12, 9.5, 7, 4, 0];\nconst J = (h) => CV.map((_, i) => (i ? 0.88 + 0.24 * hash(i, h) : 1.03)), JL = J(5), JR = J(9);\nfunction edgeAt(v, s) {\n  const q = v / (1 + 0.1 * s);\n  if (v \u003c 0 || q >= 86) return [0, 0];\n  let i = 0;\n  while (CV[i + 1] \u003c= q) i++;\n  const f = (q - CV[i]) / (CV[i + 1] - CV[i]), w = mix(mix(WT[i], WP[i], s), mix(WT[i + 1], WP[i + 1], s), f), c = 2 * sin(v * 0.05);\n  return [c - w * mix(JL[i], JL[i + 1], f), c + w * mix(JR[i], JR[i + 1], f)];\n}\n\n// Midnight sun, noon, twilight: sky stops, lit and shaded face, snow, water top\n// and bottom, cloud lit and dark, shafts, light's side, ice, caustics.\nconst KF = [\n  [[[0, 28, 50, 116], [10, 100, 104, 166], [19, 232, 158, 132], [26, 250, 200, 128]], [246, 206, 158], [70, 118, 196], [242, 226, 206], [14, 86, 114], [3, 12, 40], [250, 196, 168], [118, 104, 150], [1, 1, 1, 1]],\n  [[[0, 118, 130, 148], [10, 156, 164, 178], [19, 186, 192, 200], [26, 200, 205, 210]], [214, 220, 226], [148, 166, 192], [226, 230, 236], [28, 108, 132], [5, 20, 48], [212, 216, 222], [128, 134, 150], [0.35, 0, 1.05, 0.5]],\n  [[[0, 6, 12, 42], [10, 16, 30, 80], [19, 38, 62, 120], [26, 62, 94, 148]], [160, 188, 232], [58, 84, 148], [176, 198, 236], [8, 44, 80], [2, 6, 24], [70, 86, 130], [26, 34, 66], [0.45, -1, 0.62, 0.5]],\n].map((k) => Float64Array.from(k.flat(2)));\n// Glacier ice; the pinnacle is older ice, bluer all through.\nconst BASE = [92, 192, 226], PALE = [190, 234, 246], CLEAR = [30, 120, 214], VEIN = [12, 50, 172], RIM = [40, 64, 60], TINT = [0.7, 0.9, 1.06];\nconst BLK = [12, 14, 22], WHT = [226, 228, 236], SUN = [255, 214, 150], MOON = [224, 228, 214], AUR = [30, 190, 110], LT = [0.55, 0.92, 1];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), pen = () => Object.fromEntries(\"on h u f st tu x y vx vy tt nb lx ly lt\".split(\" \").map((k) => [k, 0.5]));\n  params.s = {\n    f: F32(N * 3), ba: F32(N), sf: F32(W), rt: F32(176), row: F32(H * 3), P: new Float64Array(41), ex: F32(BH * 2), TT: F32(BW * 4 + 1),\n    M: F32(NB), IC: [F32(NB), F32(NB), F32(NB)], SN: F32(NB), NX: F32(NB), AL: F32(NB), D: F32(NB),\n    s: -1, t: 0.01, th: 0.01, thv: 0.01, thq: 0.01, by: 0.01, byv: 0.01, A: 0.5, k1: -1, k4: 0.06, live: 0, kx: 49.5, ky: 112.5,\n    next: 3.4, nd: 0.5, pend: null, crack: 0.5, cuts: [], pieces: [], bubs: [], spray: [], rings: [], vacc: [0.5, 0.5, 0.5, 0.5, 0.5], dv: null,\n    cl: [0, 1, 2, 3].map((k) => ({ x: 6 + k * 17 + 6 * rnd(), y: 5 + ((k * 5) % 13) + 2 * rnd(), w: 7 + 5 * rnd(), h: 1.7 + rnd() })),\n    kr: Array.from({ length: 46 }, () => ({ p: rnd() * 6.3, q: rnd() * 6.3, w: 0.4 + 0.5 * rnd(), r: 1 + 6 * rnd() })),\n    pens: [0, 1, 2, 3, 4].map((i) => Object.assign(pen(), { f: i % 2 ? 1 : -1, st: 0 })),\n  };\n}\n\nconst toW = (S, u, v) => [BX + cos(S.th) * u - sin(S.th) * (v - PV), WL + PV + S.by + sin(S.th) * u + cos(S.th) * (v - PV)];\n// What the cuts leave at u, v. Cuts heal outward as the berg turns.\nfunction cutA(cuts, u, v) {\n  let a = 1;\n  for (const c of cuts) if (v \u003c 0.6 && (u - c.cx) ** 2 + (v - c.cy) ** 2 \u003c 225) a *= cl(0.5 - (c.nx * u + c.ny * v - c.d), 0, 1);\n  return a;\n}\nconst topB = (S, u) => S.TT[cl(round((u - U0) * 4), 0, BW * 4)];\nfunction edgeU(S, side) {\n  for (let a = 0; a \u003c 26; a += 0.5) if (topB(S, side * a) > -1.5 || cutA(S.cuts, side * a, topB(S, side * a) + 0.7) \u003c 0.5) return side * (a - 1);\n  return side * 12;\n}\nconst surf = (S, x) => S.sf[cl(round(x), 0, W - 1)];\n\nfunction build(S, s) {\n  S.s = s;\n  const { M, SN, NX, AL, D, TT, ex } = S, E = [], face = [];\n  for (let q = 0; q \u003c= BW * 4; q++) TT[q] = topAt(U0 + q / 4, s);\n  for (let q = 0; q \u003c BH * 4; q++) E.push(edgeAt(V0 + (q + 0.5) / 4, s));\n  for (let k = 0; k \u003c NB; k++) {\n    let n = 0;\n    for (let j = 0; j \u003c 16; j++) {\n      const qu = (k & 63) * 4 + (j & 3), qv = (k >> 6) * 4 + (j >> 2), u = U0 + (qu + 0.5) / 4, v = V0 + (qv + 0.5) / 4;\n      if (v \u003c 0 ? v >= TT[qu] : u > E[qv][0] && u \u003c E[qv][1]) n++;\n    }\n    M[k] = n / 16;\n  }\n  // Distance to open water: a glowing rim, a darker core.\n  for (let k = 0; k \u003c NB; k++) D[k] = M[k] \u003c 0.5 ? 0 : 20;\n  for (let k = BW + 1; k \u003c NB - 1; k++) D[k] = min(D[k], D[k - 1] + 1, D[k - BW] + 1, D[k - BW - 1] + 1.4, D[k - BW + 1] + 1.4);\n  for (let k = NB - BW - 2; k > 0; k--) D[k] = min(D[k], D[k + 1] + 1, D[k + BW] + 1, D[k + BW + 1] + 1.4, D[k + BW - 1] + 1.4);\n  for (let j = 0; j \u003c BH * 2; j++) ex[j] = j & 1 ? -99 : 99;\n  for (let k = 0; k \u003c NB; k++) {\n    const gu = k & 63, gv = k >> 6, u = U0 + gu + 0.5, v = V0 + gv + 0.5;\n    if (M[k] \u003c= 0) continue;\n    // Facets: lit or shaded in the air; below, melt scallops lit on their lower walls.\n    let bd = 1e9, id = 0, sv = 0;\n    for (let j = 0; j \u003c 9; j++) {\n      const cu = floor(u / 5) + (j % 3) - 1, cv = floor(v / 5) + floor(j / 3) - 1, w = (cv + hash(cv, cu + 50)) * 5, dd = (u - (cu + hash(cu, cv)) * 5) ** 2 + (v - w) ** 2;\n      if (dd \u003c bd) (bd = dd), (id = hash(cu + 99, cv)), (sv = w);\n    }\n    const qu = gu * 4 + 2, sl = TT[min(BW * 4, qu + 2)] - TT[max(0, qu - 2)], dep = v - TT[qu];\n    NX[k] = mix(sl / sqrt(1 + sl * sl), cl(u / 24 + 1.3 * (id - 0.5), -1, 1), sm(1, 3, dep));\n    SN[k] = sm(2.4, 1.3, dep) * sm(1.6, 0.8, abs(sl));\n    AL[k] = (0.86 + 0.14 * hash(gu, 7)) * (0.88 + 0.24 * id) * (v > -1.5 && v \u003c 0 ? 0.7 : 1);\n    // Layers of white and clear blue ice, dark veins of refrozen meltwater.\n    const f = (v + u * 0.14 + 7 * vn(u * 0.04, v * 0.025 + 9)) / 8, n = floor(f), band = f - n, h1 = hash(n, 5);\n    const mot = (0.84 + 0.3 * vn(u * 0.1 + 3, v * 0.07)) * (1 + 0.2 * cl((v - sv) / 3, -1, 1));\n    const pale = sm(0.5, 0.6, band) * (1 - sm(0.6 + 0.3 * h1, 0.7 + 0.3 * h1, band)) * sm(0.25, 0.5, hash(n, 6)), clear = (1 - sm(0.2, 0.45, band)) * sm(0.4, 0.8, h1);\n    const vein = max(sm(0.11, 0.03, abs(vn(u * 0.08 + 11, v * 0.045) * 2 - 1)), 0.8 * sm(0.1, 0.025, abs(vn(u * 0.045 + 31, v * 0.11 + 5) * 2 - 1))) * sm(0.25, 0.5, vn(u * 0.035 + 20, v * 0.03));\n    const dk = D[k], core = (0.5 + 0.5 * exp(-max(0, dk - 1) / 5)) * (gv > 1 && M[k - 2 * BW] \u003c 0.5 ? 1.3 : 1) * (gv \u003c BH - 2 && M[k + 2 * BW] \u003c 0.5 ? 0.76 : 1);\n    for (let c = 0; c \u003c 3; c++) S.IC[c][k] = mix(mix(mix(BASE[c] * mot, PALE[c], 0.8 * pale), CLEAR[c], 0.6 * clear), VEIN[c], 0.9 * vein) * core * mix(1, TINT[c], s) + exp(-dk / 1.2) * RIM[c];\n    if (v > 3 && v \u003c 80 && dk > 1.5) face.push([u, v]);\n    (ex[gv * 2] = min(ex[gv * 2], u)), (ex[gv * 2 + 1] = max(ex[gv * 2 + 1], u));\n  }\n  S.vents = [0, 1, 2, 3, 4].map((i) => face[floor(hash(i, 41) * face.length)]);\n  // Penguin places: flat, three columns apart, clear of the slabs.\n  const slots = [];\n  for (const u of [0.5, -6, 6.5, -3, 3.5, -8, 8, -1.5, 2, -4.5, 5]) {\n    const q = round((u - U0) * 4);\n    if (abs(TT[q + 6] - TT[q - 6]) \u003c 1.6 && TT[q] \u003c -2.5 && TT[q] > -15 && slots.length \u003c 5 && slots.every((w) => abs(w - u) > 2.9)) slots.push(u + 0.01);\n  }\n  S.pens.forEach((p, i) => ((p.on = i \u003c slots.length ? 1 : 0), p.on && (p.h = slots[i]), p.st || (p.u = p.h)));\n}\n\nconst bub = (S, x, y, vy = -(4.5 + 5 * rnd()), wb = 0.6) => S.bubs.length \u003c 260 && S.bubs.push({ x, y, vy, wb, ph: rnd() * 6.3, dead: 0 });\nfunction splash(S, x, v, g) {\n  const y = surf(S, x) - 0.5;\n  for (let k = 0; k \u003c 7 + 29 * g; k++) S.spray.push({ x: x + (rnd() - 0.5) * (2 + 3 * g), y, vx: (rnd() - 0.5) * (10 + 14 * g), vy: -(6 + rnd() * (9 + 17 * g)), l: 0.99 });\n  S.rings.push({ x, t: 0.01, a: g ? min(3.2, 0.1 * v + 1.4) : 0.6 });\n  for (let k = 0; k \u003c 8 + 22 * g; k++) bub(S, x + (rnd() - 0.5) * 6, y + 1 + rnd() * (5 + 9 * g));\n}\n\n// A crack opens behind a slab of outer ice; it goes half a second later.\nfunction calve(S) {\n  if (S.pend || S.pieces.some((p) => p.f)) return;\n  let side = rnd() \u003c 0.5 ? -1 : 1;\n  if (S.cuts.some((c) => c.side === side && c.age \u003c 40)) side = -side;\n  let ue = edgeU(S, side);\n  if (abs(ue) \u003c 12) (side = -side), (ue = edgeU(S, side));\n  if (abs(ue) \u003c 12) return;\n  const px = side * max(9, abs(ue) - 3.5 - 3 * rnd()), nx = side * 0.993, d = nx * px + 0.6;\n  const c = { nx, ny: -0.12, d, d0: d, cx: px, cy: -5, side, age: 0.01, bu: 0.5, bv: 0.5, ex: 0.5, hx: 0.5, hy: 0.5 };\n  let u0 = 99, u1 = -99, v0 = 99, v1 = -99;\n  for (let k = 0; k \u003c NB; k++) {\n    const u = U0 + (k & 63) + 0.5, v = V0 + (k >> 6) + 0.5;\n    if (S.M[k] > 0.5 && cutA([c], u, v) \u003c 0.5 && cutA(S.cuts, u, v) > 0.5) (u0 = min(u0, u)), (u1 = max(u1, u)), (v0 = min(v0, v)), (v1 = max(v1, v));\n  }\n  if (u1 - u0 \u003c 1.5) return;\n  Object.assign(c, { bu: (u0 + u1) / 2, bv: (v0 + v1) / 2, hx: (u1 - u0) / 2 + 0.5, hy: (v1 - v0) / 2 + 0.5 });\n  c.ex = hypot(c.hx, c.hy) + 1.5;\n  (S.pend = c), (S.crack = 0.5);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d), A = S.A, sf = S.sf;\n  // The swell, and rings running out from each splash.\n  const swell = (x) => A * (0.7 * sin(x * 0.15 - t * 1.4) + 0.3 * sin(x * 0.34 + t * 0.95 + 1));\n  for (let x = 0; x \u003c W; x++) {\n    sf[x] = WL + swell(x + 0.5);\n    for (const r of S.rings) {\n      const q = abs(x + 0.5 - r.x) - 11 * r.t;\n      sf[x] += r.a * exp(-r.t * 0.5 - (q / 5) ** 2) * sin(q * 0.9);\n    }\n  }\n  for (const r of S.rings) r.t += d;\n  S.rings = S.rings.filter((r) => r.t \u003c 7);\n  S.thv += (-2.4 * (S.th - S.thq - 0.022 * A * cos(BX * 0.15 - t * 1.4)) - 0.45 * S.thv) * d;\n  S.byv += (-3 * (S.by - 0.5 * swell(BX)) - 1.2 * S.byv) * d;\n  (S.th += S.thv * d), (S.by += S.byv * d), (S.thq *= exp(-d / 60));\n  for (const c of S.cl) (c.x += (0.7 + 3 * S.k4) * d) > W + c.w + 2 && (c.x = -c.w - 2);\n\n  if (S.live && (S.next -= d) \u003c= 0) calve(S), (S.next = 15 + 10 * rnd());\n  if (S.pend && (S.crack -= d) \u003c= 0) {\n    // The berg loses weight on that side, rocks and settles leaning a little.\n    const c = S.pend, [x, y] = toW(S, c.bu, c.bv);\n    S.cuts.push(c);\n    S.pieces.push({ c, x, y, vx: c.side * 2.5, vy: 0.5, a: S.th, va: c.side * (1.4 + rnd()), f: 1, ta: 0.5 });\n    (S.pend = null), (S.thv -= c.side * 0.1), (S.thq -= c.side * 0.012), (S.byv -= 1.6);\n  }\n  for (const c of S.cuts) (c.age += d) > 20 && (c.d += d * 0.12);\n  S.cuts = S.cuts.filter((c) => c.age \u003c 130);\n  for (const p of S.pieces) {\n    if (p.f) {\n      (p.vy += 45 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.a += p.va * d);\n      if (p.y > surf(S, p.x) - 1) splash(S, p.x, p.vy, 1), (p.f = 0), (p.vy *= 0.3), (p.ta = round(p.a / (PI / 2)) * (PI / 2));\n    } else {\n      const c = p.c, hy = abs(sin(p.a - S.th)) * c.hx + abs(cos(p.a - S.th)) * c.hy;\n      (p.vy += (-5 * (p.y - surf(S, p.x) - 0.75 * hy) - 1.8 * p.vy) * d), (p.va += (-4 * (p.a - p.ta) - 1.6 * p.va) * d);\n      (p.y += p.vy * d), (p.a += p.va * d), (p.x += c.side * 1.4 * d);\n    }\n  }\n  S.pieces = S.pieces.filter((p) => abs(p.x - W / 2) \u003c W / 2 + p.c.ex + 2);\n  S.vents.forEach((v, i) => {\n    if (sin(t * 0.6 + i * 2.1) > -0.2) for (S.vacc[i] += d * 3.5; S.vacc[i] >= 1; S.vacc[i]--) bub(S, ...toW(S, v[0], v[1]), -(5 + 0.6 * i + 1.2 * rnd()), 0.9);\n  });\n  for (const b of S.bubs) {\n    (b.y += b.vy * d), (b.x += sin(t * 6 + b.ph) * b.wb * d);\n    if (b.y \u003c surf(S, b.x) + 0.3 || b.x \u003c -1 || b.x > W + 1) b.dead = 1;\n  }\n  S.bubs = S.bubs.filter((b) => !b.dead);\n  for (const p of S.spray) (p.vy += 50 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 0.8);\n  S.spray = S.spray.filter((p) => p.l > 0 && !(p.vy > 0 && p.y > surf(S, p.x) + 0.5));\n  (S.kx = 49 + 8 * sin(t * 0.1)), (S.ky = 112 + 7 * sin(t * 0.13 + 1));\n  penguins(S, d, t);\n}\n\n// Now and then a penguin waddles to the edge, jumps, swims to the krill and leaps back.\nfunction penguins(S, d, t) {\n  for (const p of S.pens) if (!p.st && rnd() \u003c d * 0.2) p.f = -p.f;\n  let p = S.dv;\n  if (!p && S.live && (S.nd -= d) \u003c= 0) {\n    const free = S.pens.filter((q) => !q.st && q.on);\n    if (!free.length) return;\n    p = S.dv = free.reduce((a, q) => (q.u > a.u ? q : a));\n    Object.assign(p, { st: 1, tu: edgeU(S, 1) - 0.5 });\n  }\n  if (!p) return;\n  if (p.st === 1 || p.st === 5) {\n    const g = p.st === 1 ? p.tu : p.h;\n    p.f = g > p.u ? 1 : -1;\n    p.u += p.f * min(abs(g - p.u), 4 * d);\n    if (abs(g - p.u) \u003c 0.01) {\n      if (p.st === 5) (p.st = 0), (S.dv = null), (S.nd = 5 + 6 * rnd());\n      else ([p.x, p.y] = toW(S, p.u, topB(S, p.u) - 0.3)), Object.assign(p, { st: 2, vx: 7, vy: -9 });\n    }\n  } else if (p.st === 2) {\n    (p.vy += 40 * d), (p.x += p.vx * d), (p.y += p.vy * d);\n    if (p.vy > 0 && p.y > surf(S, p.x)) splash(S, p.x, 8, 0), Object.assign(p, { st: 3, vy: 12, vx: 3, tt: 0.01, nb: 0.01 });\n  } else if (p.st === 3) {\n    const back = (p.tt += d) > 5, dx = (back ? W - 6 : S.kx + 5 * cos(t * 2.2)) - p.x, dy = (back ? WL - 2 : S.ky + 3 * sin(t * 2.2)) - p.y, r = hypot(dx, dy) + 1e-6, sp = back ? 17 : 14;\n    (p.vx += ((dx / r) * sp - p.vx) * min(1, 2.2 * d)), (p.vy += ((dy / r) * sp - p.vy) * min(1, 2.2 * d));\n    (p.x = cl(p.x + p.vx * d, 1, W - 2)), (p.y = min(p.y + p.vy * d, H - 3));\n    if ((p.nb += d) > 0.07) (p.nb = 0), bub(S, p.x - p.vx * 0.12, p.y - p.vy * 0.12);\n    if (back && p.y \u003c surf(S, p.x) + 1.5) splash(S, p.x, 6, 0), Object.assign(p, { st: 4, lx: p.x, ly: p.y, lt: 0.01, u: edgeU(S, 1) - 1 });\n  } else {\n    const [lx, ly] = toW(S, p.u, topB(S, p.u) - 0.3), l = (p.lt = min(1, p.lt + d / 0.7));\n    (p.vx = lx - p.x), (p.vy = ly - p.y), (p.x = mix(p.lx, lx, l)), (p.y = mix(p.ly, ly, l) - 40 * l * (1 - l));\n    if (l >= 1) p.st = 5;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 0, 1);\n  if (abs(k3 - S.s) > 0.01) build(S, k3);\n  (S.k4 = cl(k[3], 0, 1)), (S.A = 0.45 + 3 * S.k4);\n  if (k1 !== S.k1) {\n    const [a, b, u] = k1 \u003c 0.5 ? [0, 1, sm(0, 0.5, k1)] : [1, 2, sm(0.5, 1, k1)];\n    for (let j = 0; j \u003c 41; j++) S.P[j] = mix(KF[a][j], KF[b][j], u);\n    S.k1 = k1;\n  }\n  for (; !S.live; S.live = S.t > 4 ? 1 : 0) step(S, 1 / 30);\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nlet F, G, PL, RT, LR, LS, LC;\nconst LA = [0, 0, 0, 0], C3 = new Float64Array(3);\n// Light under water: slanting shafts, and caustics on the ice (one noise twice, crossed).\nfunction glow(x, y, dep, b) {\n  const q = x + LS * (y - WL) + 56, q0 = cl(floor(q), 0, 174);\n  let L = LR * mix(RT[q0], RT[q0 + 1], q - q0) * exp(-dep / 36) * 64 * (1 + 0.5 * b);\n  if (b > 0 && dep \u003c 34) L += LC * sm(0.75, 1, 1 - abs(CT[((y + LA[1]) & 63) * 64 + ((x + LA[0]) & 63)] - CT[((x + LA[2]) & 63) * 64 + ((y + LA[3]) & 63)]) * 4) * exp(-dep / 12) * (80 * b + 22);\n  return L;\n}\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst bl = (A, k, fx, fy) => mix(mix(A[k], A[k + 1], fx), mix(A[k + BW], A[k + BW + 1], fx), fy);\n// One LED of the berg, or of slab q, read at body point u, v.\nfunction paint(x, y, u, v, q) {\n  const S = G, P = PL, gx = u - U0 - 0.5, gy = v - V0 - 0.5, x0 = floor(gx), y0 = floor(gy), i = y * W + x, o = i * 3, s = S.sf[x], c = C3, pc = S.pend;\n  if (x0 \u003c 0 || y0 \u003c 0 || x0 >= BW - 1 || y0 >= BH - 1 || (q && (v > 0.6 || (u - q.cx) ** 2 + (v - q.cy) ** 2 > 225))) return;\n  const k = y0 * BW + x0, fx = gx - x0, fy = gy - y0, a = bl(S.M, k, fx, fy) * (q ? cl(0.5 + (q.nx * u + q.ny * v - q.d0), 0, 1) : S.cuts.length && v \u003c 0.6 ? cutA(S.cuts, u, v) : 1);\n  if (a \u003c 0.02) return;\n  if (y + 0.5 \u003c s) {\n    const nx = bl(S.NX, k, fx, fy), sn = bl(S.SN, k, fx, fy), al = bl(S.AL, k, fx, fy), li = P[38] ? cl(0.5 + 0.8 * nx * P[38], 0, 1) : 0.6 + 0.25 * nx;\n    for (let j = 0; j \u003c 3; j++) c[j] = mix(mix(P[19 + j], P[16 + j], li), P[22 + j] * (0.88 + 0.12 * li), sn) * al;\n  } else {\n    const L = glow(x, y, y + 0.5 - s, 1);\n    for (let j = 0; j \u003c 3; j++) c[j] = bl(S.IC[j], k, fx, fy) * AT[y * 3 + j] * P[39] + 0.35 * S.row[y * 3 + j] + L * LT[j];\n  }\n  const ck = pc && v \u003c 0.6 && abs(pc.nx * u + pc.ny * v - pc.d) \u003c 0.6 ? 0.4 : 1;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(q ? F[o + j] : 0, c[j] * ck, q ? a : 1);\n  S.ba[i] = max(S.ba[i], a);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  F = S.f;\n  const { ba, sf, rt, row, t, P, k1, ex } = S;\n  const sunA = 1 - sm(0, 0.4, k1), moonA = sm(0.6, 1, k1), aur = sm(0.7, 1, k1), stars = sm(0.55, 0.9, k1);\n  for (let y = 0; y \u003c H; y++) {\n    let k = 0;\n    while (k \u003c 2 && y > P[k * 4 + 4]) k++;\n    const u = y \u003c= HZ ? sm(P[k * 4], P[k * 4 + 4], y) : cl((y - WL) / 97, 0, 1) ** 0.75;\n    for (let j = 0; j \u003c 3; j++) row[y * 3 + j] = y \u003c= HZ ? mix(P[k * 4 + 1 + j], P[k * 4 + 5 + j], u) : mix(P[25 + j], P[28 + j], u);\n  }\n  for (let q = 0; q \u003c 176; q++) rt[q] = sm(0.45, 0.82, vn((q - 56) * 0.13 - t * 0.3, t * 0.05 + 7));\n  (G = S), (PL = P), (RT = rt), (LR = P[37]), (LS = P[38] * 0.45), (LC = P[40] * (0.7 + 0.6 * S.k4));\n  [7, -5, -6, 4].forEach((v, j) => (LA[j] = floor(t * v)));\n\n  // The berg first, then the background where it shows, then the slabs.\n  ba.fill(0);\n  const ct = cos(S.th), st = sin(S.th), oy = WL + PV + S.by;\n  for (let y = 0; y \u003c H; y++) {\n    const dy = y + 0.5 - oy, g0 = floor(ct * dy + PV - V0 - 0.5);\n    let u0 = 99, u1 = -99;\n    for (let j = max(0, g0 - 3); j \u003c= min(BH - 1, g0 + 3); j++) (u0 = min(u0, ex[j * 2])), (u1 = max(u1, ex[j * 2 + 1]));\n    for (let x = max(0, floor(BX + u0 - st * dy - 2)); x \u003c min(W, BX + u1 - st * dy + 3); x++) {\n      const dx = x + 0.5 - BX;\n      paint(x, y, ct * dx + st * dy, -st * dx + ct * dy + PV, null);\n    }\n  }\n  const sx = 55, sy = 21.5, mx = 12, my = 8, c = C3;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, A = ba[i], dep = y + 0.5 - sf[x];\n    if (A > 0.995) continue;\n    let g = 0, e = 0;\n    if (y \u003c HZ) {\n      const ds = hypot(x + 0.5 - sx, (y + 0.5 - sy) * 1.1), dm = hypot(x + 0.5 - mx, y + 0.5 - my), cu = aur > 0 ? 0.5 + 0.5 * sin(x * 0.2 + 3 * vn(x * 0.05 + t * 0.06, 1) + t * 0.25) : 0;\n      g = moonA * (0.25 * exp(-dm / 5) + (dm \u003c 2.6 && hypot(x - 0.8 - mx, y + 1.1 - my) > 2.3 ? 0.9 : 0)) + (stars > 0 && hash(x, y + 11) \u003c 0.016 ? stars * (0.25 + 0.5 * hash(y, x)) * (0.7 + 0.3 * sin(t * 3 + x * y)) * sm(HZ, 8, y) : 0);\n      e = cu ? aur * sm(19, 6, y) * sm(0, 4, y) * cu * cu * vn(x * 0.6, t * 0.4) : 0;\n      const gs = ds \u003c 30 ? sunA * (0.55 * exp(-ds / 7) + (ds \u003c 2.6 ? 1.2 : 0)) : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = row[y * 3 + j] + SUN[j] * gs + MOON[j] * g + AUR[j] * e;\n      for (const q of S.cl) {\n        const qx = (x + 0.5 - q.x) / q.w, qy = (y + 0.5 - q.y) / q.h;\n        if (qx * qx + qy * qy > 2) continue;\n        const a = 0.92 * sm(0, 0.45, 1 - qx * qx - qy * qy + 0.45 * (vn(x * 0.35 + q.w, y * 0.6) - 0.5)), u = sm(-1, 1, qy);\n        for (let j = 0; j \u003c 3; j++) c[j] = mix(c[j], mix(P[34 + j], P[31 + j], u), a);\n      }\n    } else if (dep \u003c 0) {\n      // The far sea: the sun's glitter path, whitecaps.\n      g = sunA * (abs(x + 0.5 - sx) \u003c 1.5 + (y - HZ) * 1.2 && hash(x, y + floor(t * 7) * 64) \u003c 0.45 ? 0.75 : 0);\n      e = S.k4 > 0.35 && hash(x + floor(t * 2) * 7, y) \u003c (S.k4 - 0.35) * 0.3 ? 0.8 : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[36 + j] * 0.55 + row[90 + j] * 0.45 + SUN[j] * g, 230, e);\n    } else {\n      // The surface's silver underside.\n      (g = glow(x, y, dep, 0)), (e = dep \u003c 2.5 ? (1 - dep / 2.5) * 0.5 : 0);\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[y * 3 + j] + (j ? 90 : 60) * e + g * LT[j], row[78 + j] * 0.9, dep \u003c 1 ? 0.55 : 0);\n    }\n    for (let j = 0; j \u003c 3; j++) F[o + j] = mix(c[j], F[o + j], A);\n  }\n  for (const p of S.pieces) {\n    const ca = cos(p.a), sa = sin(p.a), e = p.c.ex;\n    for (let y = max(0, floor(p.y - e)); y \u003c min(H, p.y + e); y++)\n      for (let x = max(0, floor(p.x - e)); x \u003c min(W, p.x + e); x++) {\n        const dx = x + 0.5 - p.x, dy = y + 0.5 - p.y;\n        paint(x, y, p.c.bu + ca * dx + sa * dy, p.c.bv - sa * dx + ca * dy, p.c);\n      }\n  }\n  sprites(S, t, ba);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction sprites(S, t, ba) {\n  for (const k of S.kr) {\n    const x = S.kx + cos(k.p + t * k.w) * k.r * 1.3, y = S.ky + sin(k.q + t * k.w * 1.3) * k.r * 0.7, i = floor(y) * W + floor(x);\n    if (i >= 0 && i \u003c N && ba[i] \u003c 0.5) put(x, y, [255, 128, 118], (0.25 + 0.35 * S.P[39]) * (0.7 + 0.3 * sin(t * 4 + k.p * 9)));\n  }\n  for (const b of S.bubs) put(b.x, b.y, [214, 246, 255], 0.6);\n  for (const p of S.pens) {\n    if (!p.st && !p.on) continue;\n    if (p.st === 0 || p.st === 1 || p.st === 5) {\n      const [x, y] = toW(S, p.u, topB(S, p.u) - 0.3), f = p.f, B = round(x - 0.5) + (f > 0 ? 0 : 1), Y = floor(y) - (p.st && sin(t * 14) > 0 ? 1 : 0);\n      put(B, Y - 3, BLK), put(B + f, Y - 3, BLK), put(B + 2 * f, Y - 3, [240, 168, 60], 0.8);\n      for (let j = 0; j \u003c 3; j++) put(B, Y - j, BLK), put(B + f, Y - j, WHT);\n    } else {\n      const r = hypot(p.vx, p.vy) + 1e-6, ux = p.vx / r, uy = p.vy / r;\n      for (let j = -1.5; j \u003c= 1.5; j += 0.5) put(p.x + ux * j, p.y + uy * j, BLK), j \u003c 1 && put(p.x + ux * j - uy * (ux \u003c 0 ? -1 : 1), p.y + uy * j + abs(ux), WHT, 0.9);\n    }\n  }\n  for (const p of S.spray) put(p.x, p.y, [232, 240, 246], min(1, p.l * 1.3));\n}\n","layer":{"id":"layer-iceberg","type":"code","name":"iceberg","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Iceberg\n// Family:  polar\n// Idea:    An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the schoolbook drawing of an iceberg with eight ninths of it under the water\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1\n//\n// Knob 1: Light. Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora.\n// Knob 2: Speed. At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower.\n// Knob 3: Shape. A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom.\n// Knob 4: Swell. How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea.\n// Buttons: K1 tap breaks a slab off the berg now.\n\nconst W = 64, H = 128, N = W * H;\n// Sea level, horizon, the berg's middle; its grid (u across, v down from sea level) turns about row PV.\nconst WL = 30, HZ = 26, BX = 28, BW = 64, BH = 128, U0 = -32, V0 = -28, PV = 34, NB = BW * BH;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Caustic noise; the colour the water leaves at each row.\nconst CT = new Float32Array(4096).map((_, k) => vn(((k & 63) * 20) / 64, ((k >> 6) * 20) / 64, 20));\nconst AT = new Float32Array(H * 3).map((_, q) => exp(-max(0, floor(q / 3) + 0.5 - WL) / [26, 75, 170][q % 3]));\n\n// The top: a snow plain with sheer cliffs, or two spires.\nconst PIN = [[-13.5, 1], [-12, -3], [-10, -6], [-7.5, -10], [-5.5, -16], [-3.5, -19.5], [-1.5, -17.5], [0.5, -11], [2.5, -7.5], [4.5, -8.5], [6.5, -13], [8, -16], [9.5, -15], [11.5, -8], [13, -2.5], [14, 1]];\nfunction topAt(u, s) {\n  let i = 1;\n  while (i \u003c PIN.length - 1 && u > PIN[i][0]) i++;\n  const [a, b] = PIN[i - 1], [c, e] = PIN[i], A = u > 0 ? u : -u * 1.05;\n  const tab = A \u003c 15 ? -11 + 0.8 * (vn(u * 0.3, 3) - 0.5) + 1.3 * sm(12.5, 15, A) : mix(-9.7, 1, cl((A - 15) / 1.1, 0, 1));\n  return mix(tab, b + (e - b) * cl((u - a) / (c - a), 0, 1), s);\n}\n// Half widths under the water, tabular and pinnacle, a little lopsided.\nconst CV = [0, 5, 12, 22, 34, 46, 58, 68, 76, 82, 86];\nconst WT = [16.6, 20.5, 22, 22.5, 21.5, 21, 19.5, 16.5, 12.5, 8, 0];\nconst WP = [13.6, 15.5, 16.5, 16.5, 15.5, 14, 12, 9.5, 7, 4, 0];\nconst J = (h) => CV.map((_, i) => (i ? 0.88 + 0.24 * hash(i, h) : 1.03)), JL = J(5), JR = J(9);\nfunction edgeAt(v, s) {\n  const q = v / (1 + 0.1 * s);\n  if (v \u003c 0 || q >= 86) return [0, 0];\n  let i = 0;\n  while (CV[i + 1] \u003c= q) i++;\n  const f = (q - CV[i]) / (CV[i + 1] - CV[i]), w = mix(mix(WT[i], WP[i], s), mix(WT[i + 1], WP[i + 1], s), f), c = 2 * sin(v * 0.05);\n  return [c - w * mix(JL[i], JL[i + 1], f), c + w * mix(JR[i], JR[i + 1], f)];\n}\n\n// Midnight sun, noon, twilight: sky stops, lit and shaded face, snow, water top\n// and bottom, cloud lit and dark, shafts, light's side, ice, caustics.\nconst KF = [\n  [[[0, 28, 50, 116], [10, 100, 104, 166], [19, 232, 158, 132], [26, 250, 200, 128]], [246, 206, 158], [70, 118, 196], [242, 226, 206], [14, 86, 114], [3, 12, 40], [250, 196, 168], [118, 104, 150], [1, 1, 1, 1]],\n  [[[0, 118, 130, 148], [10, 156, 164, 178], [19, 186, 192, 200], [26, 200, 205, 210]], [214, 220, 226], [148, 166, 192], [226, 230, 236], [28, 108, 132], [5, 20, 48], [212, 216, 222], [128, 134, 150], [0.35, 0, 1.05, 0.5]],\n  [[[0, 6, 12, 42], [10, 16, 30, 80], [19, 38, 62, 120], [26, 62, 94, 148]], [160, 188, 232], [58, 84, 148], [176, 198, 236], [8, 44, 80], [2, 6, 24], [70, 86, 130], [26, 34, 66], [0.45, -1, 0.62, 0.5]],\n].map((k) => Float64Array.from(k.flat(2)));\n// Glacier ice; the pinnacle is older ice, bluer all through.\nconst BASE = [92, 192, 226], PALE = [190, 234, 246], CLEAR = [30, 120, 214], VEIN = [12, 50, 172], RIM = [40, 64, 60], TINT = [0.7, 0.9, 1.06];\nconst BLK = [12, 14, 22], WHT = [226, 228, 236], SUN = [255, 214, 150], MOON = [224, 228, 214], AUR = [30, 190, 110], LT = [0.55, 0.92, 1];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), pen = () => Object.fromEntries(\"on h u f st tu x y vx vy tt nb lx ly lt\".split(\" \").map((k) => [k, 0.5]));\n  params.s = {\n    f: F32(N * 3), ba: F32(N), sf: F32(W), rt: F32(176), row: F32(H * 3), P: new Float64Array(41), ex: F32(BH * 2), TT: F32(BW * 4 + 1),\n    M: F32(NB), IC: [F32(NB), F32(NB), F32(NB)], SN: F32(NB), NX: F32(NB), AL: F32(NB), D: F32(NB),\n    s: -1, t: 0.01, th: 0.01, thv: 0.01, thq: 0.01, by: 0.01, byv: 0.01, A: 0.5, k1: -1, k4: 0.06, live: 0, kx: 49.5, ky: 112.5,\n    next: 3.4, nd: 0.5, pend: null, crack: 0.5, cuts: [], pieces: [], bubs: [], spray: [], rings: [], vacc: [0.5, 0.5, 0.5, 0.5, 0.5], dv: null,\n    cl: [0, 1, 2, 3].map((k) => ({ x: 6 + k * 17 + 6 * rnd(), y: 5 + ((k * 5) % 13) + 2 * rnd(), w: 7 + 5 * rnd(), h: 1.7 + rnd() })),\n    kr: Array.from({ length: 46 }, () => ({ p: rnd() * 6.3, q: rnd() * 6.3, w: 0.4 + 0.5 * rnd(), r: 1 + 6 * rnd() })),\n    pens: [0, 1, 2, 3, 4].map((i) => Object.assign(pen(), { f: i % 2 ? 1 : -1, st: 0 })),\n  };\n}\n\nconst toW = (S, u, v) => [BX + cos(S.th) * u - sin(S.th) * (v - PV), WL + PV + S.by + sin(S.th) * u + cos(S.th) * (v - PV)];\n// What the cuts leave at u, v. Cuts heal outward as the berg turns.\nfunction cutA(cuts, u, v) {\n  let a = 1;\n  for (const c of cuts) if (v \u003c 0.6 && (u - c.cx) ** 2 + (v - c.cy) ** 2 \u003c 225) a *= cl(0.5 - (c.nx * u + c.ny * v - c.d), 0, 1);\n  return a;\n}\nconst topB = (S, u) => S.TT[cl(round((u - U0) * 4), 0, BW * 4)];\nfunction edgeU(S, side) {\n  for (let a = 0; a \u003c 26; a += 0.5) if (topB(S, side * a) > -1.5 || cutA(S.cuts, side * a, topB(S, side * a) + 0.7) \u003c 0.5) return side * (a - 1);\n  return side * 12;\n}\nconst surf = (S, x) => S.sf[cl(round(x), 0, W - 1)];\n\nfunction build(S, s) {\n  S.s = s;\n  const { M, SN, NX, AL, D, TT, ex } = S, E = [], face = [];\n  for (let q = 0; q \u003c= BW * 4; q++) TT[q] = topAt(U0 + q / 4, s);\n  for (let q = 0; q \u003c BH * 4; q++) E.push(edgeAt(V0 + (q + 0.5) / 4, s));\n  for (let k = 0; k \u003c NB; k++) {\n    let n = 0;\n    for (let j = 0; j \u003c 16; j++) {\n      const qu = (k & 63) * 4 + (j & 3), qv = (k >> 6) * 4 + (j >> 2), u = U0 + (qu + 0.5) / 4, v = V0 + (qv + 0.5) / 4;\n      if (v \u003c 0 ? v >= TT[qu] : u > E[qv][0] && u \u003c E[qv][1]) n++;\n    }\n    M[k] = n / 16;\n  }\n  // Distance to open water: a glowing rim, a darker core.\n  for (let k = 0; k \u003c NB; k++) D[k] = M[k] \u003c 0.5 ? 0 : 20;\n  for (let k = BW + 1; k \u003c NB - 1; k++) D[k] = min(D[k], D[k - 1] + 1, D[k - BW] + 1, D[k - BW - 1] + 1.4, D[k - BW + 1] + 1.4);\n  for (let k = NB - BW - 2; k > 0; k--) D[k] = min(D[k], D[k + 1] + 1, D[k + BW] + 1, D[k + BW + 1] + 1.4, D[k + BW - 1] + 1.4);\n  for (let j = 0; j \u003c BH * 2; j++) ex[j] = j & 1 ? -99 : 99;\n  for (let k = 0; k \u003c NB; k++) {\n    const gu = k & 63, gv = k >> 6, u = U0 + gu + 0.5, v = V0 + gv + 0.5;\n    if (M[k] \u003c= 0) continue;\n    // Facets: lit or shaded in the air; below, melt scallops lit on their lower walls.\n    let bd = 1e9, id = 0, sv = 0;\n    for (let j = 0; j \u003c 9; j++) {\n      const cu = floor(u / 5) + (j % 3) - 1, cv = floor(v / 5) + floor(j / 3) - 1, w = (cv + hash(cv, cu + 50)) * 5, dd = (u - (cu + hash(cu, cv)) * 5) ** 2 + (v - w) ** 2;\n      if (dd \u003c bd) (bd = dd), (id = hash(cu + 99, cv)), (sv = w);\n    }\n    const qu = gu * 4 + 2, sl = TT[min(BW * 4, qu + 2)] - TT[max(0, qu - 2)], dep = v - TT[qu];\n    NX[k] = mix(sl / sqrt(1 + sl * sl), cl(u / 24 + 1.3 * (id - 0.5), -1, 1), sm(1, 3, dep));\n    SN[k] = sm(2.4, 1.3, dep) * sm(1.6, 0.8, abs(sl));\n    AL[k] = (0.86 + 0.14 * hash(gu, 7)) * (0.88 + 0.24 * id) * (v > -1.5 && v \u003c 0 ? 0.7 : 1);\n    // Layers of white and clear blue ice, dark veins of refrozen meltwater.\n    const f = (v + u * 0.14 + 7 * vn(u * 0.04, v * 0.025 + 9)) / 8, n = floor(f), band = f - n, h1 = hash(n, 5);\n    const mot = (0.84 + 0.3 * vn(u * 0.1 + 3, v * 0.07)) * (1 + 0.2 * cl((v - sv) / 3, -1, 1));\n    const pale = sm(0.5, 0.6, band) * (1 - sm(0.6 + 0.3 * h1, 0.7 + 0.3 * h1, band)) * sm(0.25, 0.5, hash(n, 6)), clear = (1 - sm(0.2, 0.45, band)) * sm(0.4, 0.8, h1);\n    const vein = max(sm(0.11, 0.03, abs(vn(u * 0.08 + 11, v * 0.045) * 2 - 1)), 0.8 * sm(0.1, 0.025, abs(vn(u * 0.045 + 31, v * 0.11 + 5) * 2 - 1))) * sm(0.25, 0.5, vn(u * 0.035 + 20, v * 0.03));\n    const dk = D[k], core = (0.5 + 0.5 * exp(-max(0, dk - 1) / 5)) * (gv > 1 && M[k - 2 * BW] \u003c 0.5 ? 1.3 : 1) * (gv \u003c BH - 2 && M[k + 2 * BW] \u003c 0.5 ? 0.76 : 1);\n    for (let c = 0; c \u003c 3; c++) S.IC[c][k] = mix(mix(mix(BASE[c] * mot, PALE[c], 0.8 * pale), CLEAR[c], 0.6 * clear), VEIN[c], 0.9 * vein) * core * mix(1, TINT[c], s) + exp(-dk / 1.2) * RIM[c];\n    if (v > 3 && v \u003c 80 && dk > 1.5) face.push([u, v]);\n    (ex[gv * 2] = min(ex[gv * 2], u)), (ex[gv * 2 + 1] = max(ex[gv * 2 + 1], u));\n  }\n  S.vents = [0, 1, 2, 3, 4].map((i) => face[floor(hash(i, 41) * face.length)]);\n  // Penguin places: flat, three columns apart, clear of the slabs.\n  const slots = [];\n  for (const u of [0.5, -6, 6.5, -3, 3.5, -8, 8, -1.5, 2, -4.5, 5]) {\n    const q = round((u - U0) * 4);\n    if (abs(TT[q + 6] - TT[q - 6]) \u003c 1.6 && TT[q] \u003c -2.5 && TT[q] > -15 && slots.length \u003c 5 && slots.every((w) => abs(w - u) > 2.9)) slots.push(u + 0.01);\n  }\n  S.pens.forEach((p, i) => ((p.on = i \u003c slots.length ? 1 : 0), p.on && (p.h = slots[i]), p.st || (p.u = p.h)));\n}\n\nconst bub = (S, x, y, vy = -(4.5 + 5 * rnd()), wb = 0.6) => S.bubs.length \u003c 260 && S.bubs.push({ x, y, vy, wb, ph: rnd() * 6.3, dead: 0 });\nfunction splash(S, x, v, g) {\n  const y = surf(S, x) - 0.5;\n  for (let k = 0; k \u003c 7 + 29 * g; k++) S.spray.push({ x: x + (rnd() - 0.5) * (2 + 3 * g), y, vx: (rnd() - 0.5) * (10 + 14 * g), vy: -(6 + rnd() * (9 + 17 * g)), l: 0.99 });\n  S.rings.push({ x, t: 0.01, a: g ? min(3.2, 0.1 * v + 1.4) : 0.6 });\n  for (let k = 0; k \u003c 8 + 22 * g; k++) bub(S, x + (rnd() - 0.5) * 6, y + 1 + rnd() * (5 + 9 * g));\n}\n\n// A crack opens behind a slab of outer ice; it goes half a second later.\nfunction calve(S) {\n  if (S.pend || S.pieces.some((p) => p.f)) return;\n  let side = rnd() \u003c 0.5 ? -1 : 1;\n  if (S.cuts.some((c) => c.side === side && c.age \u003c 40)) side = -side;\n  let ue = edgeU(S, side);\n  if (abs(ue) \u003c 12) (side = -side), (ue = edgeU(S, side));\n  if (abs(ue) \u003c 12) return;\n  const px = side * max(9, abs(ue) - 3.5 - 3 * rnd()), nx = side * 0.993, d = nx * px + 0.6;\n  const c = { nx, ny: -0.12, d, d0: d, cx: px, cy: -5, side, age: 0.01, bu: 0.5, bv: 0.5, ex: 0.5, hx: 0.5, hy: 0.5 };\n  let u0 = 99, u1 = -99, v0 = 99, v1 = -99;\n  for (let k = 0; k \u003c NB; k++) {\n    const u = U0 + (k & 63) + 0.5, v = V0 + (k >> 6) + 0.5;\n    if (S.M[k] > 0.5 && cutA([c], u, v) \u003c 0.5 && cutA(S.cuts, u, v) > 0.5) (u0 = min(u0, u)), (u1 = max(u1, u)), (v0 = min(v0, v)), (v1 = max(v1, v));\n  }\n  if (u1 - u0 \u003c 1.5) return;\n  Object.assign(c, { bu: (u0 + u1) / 2, bv: (v0 + v1) / 2, hx: (u1 - u0) / 2 + 0.5, hy: (v1 - v0) / 2 + 0.5 });\n  c.ex = hypot(c.hx, c.hy) + 1.5;\n  (S.pend = c), (S.crack = 0.5);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d), A = S.A, sf = S.sf;\n  // The swell, and rings running out from each splash.\n  const swell = (x) => A * (0.7 * sin(x * 0.15 - t * 1.4) + 0.3 * sin(x * 0.34 + t * 0.95 + 1));\n  for (let x = 0; x \u003c W; x++) {\n    sf[x] = WL + swell(x + 0.5);\n    for (const r of S.rings) {\n      const q = abs(x + 0.5 - r.x) - 11 * r.t;\n      sf[x] += r.a * exp(-r.t * 0.5 - (q / 5) ** 2) * sin(q * 0.9);\n    }\n  }\n  for (const r of S.rings) r.t += d;\n  S.rings = S.rings.filter((r) => r.t \u003c 7);\n  S.thv += (-2.4 * (S.th - S.thq - 0.022 * A * cos(BX * 0.15 - t * 1.4)) - 0.45 * S.thv) * d;\n  S.byv += (-3 * (S.by - 0.5 * swell(BX)) - 1.2 * S.byv) * d;\n  (S.th += S.thv * d), (S.by += S.byv * d), (S.thq *= exp(-d / 60));\n  for (const c of S.cl) (c.x += (0.7 + 3 * S.k4) * d) > W + c.w + 2 && (c.x = -c.w - 2);\n\n  if (S.live && (S.next -= d) \u003c= 0) calve(S), (S.next = 15 + 10 * rnd());\n  if (S.pend && (S.crack -= d) \u003c= 0) {\n    // The berg loses weight on that side, rocks and settles leaning a little.\n    const c = S.pend, [x, y] = toW(S, c.bu, c.bv);\n    S.cuts.push(c);\n    S.pieces.push({ c, x, y, vx: c.side * 2.5, vy: 0.5, a: S.th, va: c.side * (1.4 + rnd()), f: 1, ta: 0.5 });\n    (S.pend = null), (S.thv -= c.side * 0.1), (S.thq -= c.side * 0.012), (S.byv -= 1.6);\n  }\n  for (const c of S.cuts) (c.age += d) > 20 && (c.d += d * 0.12);\n  S.cuts = S.cuts.filter((c) => c.age \u003c 130);\n  for (const p of S.pieces) {\n    if (p.f) {\n      (p.vy += 45 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.a += p.va * d);\n      if (p.y > surf(S, p.x) - 1) splash(S, p.x, p.vy, 1), (p.f = 0), (p.vy *= 0.3), (p.ta = round(p.a / (PI / 2)) * (PI / 2));\n    } else {\n      const c = p.c, hy = abs(sin(p.a - S.th)) * c.hx + abs(cos(p.a - S.th)) * c.hy;\n      (p.vy += (-5 * (p.y - surf(S, p.x) - 0.75 * hy) - 1.8 * p.vy) * d), (p.va += (-4 * (p.a - p.ta) - 1.6 * p.va) * d);\n      (p.y += p.vy * d), (p.a += p.va * d), (p.x += c.side * 1.4 * d);\n    }\n  }\n  S.pieces = S.pieces.filter((p) => abs(p.x - W / 2) \u003c W / 2 + p.c.ex + 2);\n  S.vents.forEach((v, i) => {\n    if (sin(t * 0.6 + i * 2.1) > -0.2) for (S.vacc[i] += d * 3.5; S.vacc[i] >= 1; S.vacc[i]--) bub(S, ...toW(S, v[0], v[1]), -(5 + 0.6 * i + 1.2 * rnd()), 0.9);\n  });\n  for (const b of S.bubs) {\n    (b.y += b.vy * d), (b.x += sin(t * 6 + b.ph) * b.wb * d);\n    if (b.y \u003c surf(S, b.x) + 0.3 || b.x \u003c -1 || b.x > W + 1) b.dead = 1;\n  }\n  S.bubs = S.bubs.filter((b) => !b.dead);\n  for (const p of S.spray) (p.vy += 50 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 0.8);\n  S.spray = S.spray.filter((p) => p.l > 0 && !(p.vy > 0 && p.y > surf(S, p.x) + 0.5));\n  (S.kx = 49 + 8 * sin(t * 0.1)), (S.ky = 112 + 7 * sin(t * 0.13 + 1));\n  penguins(S, d, t);\n}\n\n// Now and then a penguin waddles to the edge, jumps, swims to the krill and leaps back.\nfunction penguins(S, d, t) {\n  for (const p of S.pens) if (!p.st && rnd() \u003c d * 0.2) p.f = -p.f;\n  let p = S.dv;\n  if (!p && S.live && (S.nd -= d) \u003c= 0) {\n    const free = S.pens.filter((q) => !q.st && q.on);\n    if (!free.length) return;\n    p = S.dv = free.reduce((a, q) => (q.u > a.u ? q : a));\n    Object.assign(p, { st: 1, tu: edgeU(S, 1) - 0.5 });\n  }\n  if (!p) return;\n  if (p.st === 1 || p.st === 5) {\n    const g = p.st === 1 ? p.tu : p.h;\n    p.f = g > p.u ? 1 : -1;\n    p.u += p.f * min(abs(g - p.u), 4 * d);\n    if (abs(g - p.u) \u003c 0.01) {\n      if (p.st === 5) (p.st = 0), (S.dv = null), (S.nd = 5 + 6 * rnd());\n      else ([p.x, p.y] = toW(S, p.u, topB(S, p.u) - 0.3)), Object.assign(p, { st: 2, vx: 7, vy: -9 });\n    }\n  } else if (p.st === 2) {\n    (p.vy += 40 * d), (p.x += p.vx * d), (p.y += p.vy * d);\n    if (p.vy > 0 && p.y > surf(S, p.x)) splash(S, p.x, 8, 0), Object.assign(p, { st: 3, vy: 12, vx: 3, tt: 0.01, nb: 0.01 });\n  } else if (p.st === 3) {\n    const back = (p.tt += d) > 5, dx = (back ? W - 6 : S.kx + 5 * cos(t * 2.2)) - p.x, dy = (back ? WL - 2 : S.ky + 3 * sin(t * 2.2)) - p.y, r = hypot(dx, dy) + 1e-6, sp = back ? 17 : 14;\n    (p.vx += ((dx / r) * sp - p.vx) * min(1, 2.2 * d)), (p.vy += ((dy / r) * sp - p.vy) * min(1, 2.2 * d));\n    (p.x = cl(p.x + p.vx * d, 1, W - 2)), (p.y = min(p.y + p.vy * d, H - 3));\n    if ((p.nb += d) > 0.07) (p.nb = 0), bub(S, p.x - p.vx * 0.12, p.y - p.vy * 0.12);\n    if (back && p.y \u003c surf(S, p.x) + 1.5) splash(S, p.x, 6, 0), Object.assign(p, { st: 4, lx: p.x, ly: p.y, lt: 0.01, u: edgeU(S, 1) - 1 });\n  } else {\n    const [lx, ly] = toW(S, p.u, topB(S, p.u) - 0.3), l = (p.lt = min(1, p.lt + d / 0.7));\n    (p.vx = lx - p.x), (p.vy = ly - p.y), (p.x = mix(p.lx, lx, l)), (p.y = mix(p.ly, ly, l) - 40 * l * (1 - l));\n    if (l >= 1) p.st = 5;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 0, 1);\n  if (abs(k3 - S.s) > 0.01) build(S, k3);\n  (S.k4 = cl(k[3], 0, 1)), (S.A = 0.45 + 3 * S.k4);\n  if (k1 !== S.k1) {\n    const [a, b, u] = k1 \u003c 0.5 ? [0, 1, sm(0, 0.5, k1)] : [1, 2, sm(0.5, 1, k1)];\n    for (let j = 0; j \u003c 41; j++) S.P[j] = mix(KF[a][j], KF[b][j], u);\n    S.k1 = k1;\n  }\n  for (; !S.live; S.live = S.t > 4 ? 1 : 0) step(S, 1 / 30);\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nlet F, G, PL, RT, LR, LS, LC;\nconst LA = [0, 0, 0, 0], C3 = new Float64Array(3);\n// Light under water: slanting shafts, and caustics on the ice (one noise twice, crossed).\nfunction glow(x, y, dep, b) {\n  const q = x + LS * (y - WL) + 56, q0 = cl(floor(q), 0, 174);\n  let L = LR * mix(RT[q0], RT[q0 + 1], q - q0) * exp(-dep / 36) * 64 * (1 + 0.5 * b);\n  if (b > 0 && dep \u003c 34) L += LC * sm(0.75, 1, 1 - abs(CT[((y + LA[1]) & 63) * 64 + ((x + LA[0]) & 63)] - CT[((x + LA[2]) & 63) * 64 + ((y + LA[3]) & 63)]) * 4) * exp(-dep / 12) * (80 * b + 22);\n  return L;\n}\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst bl = (A, k, fx, fy) => mix(mix(A[k], A[k + 1], fx), mix(A[k + BW], A[k + BW + 1], fx), fy);\n// One LED of the berg, or of slab q, read at body point u, v.\nfunction paint(x, y, u, v, q) {\n  const S = G, P = PL, gx = u - U0 - 0.5, gy = v - V0 - 0.5, x0 = floor(gx), y0 = floor(gy), i = y * W + x, o = i * 3, s = S.sf[x], c = C3, pc = S.pend;\n  if (x0 \u003c 0 || y0 \u003c 0 || x0 >= BW - 1 || y0 >= BH - 1 || (q && (v > 0.6 || (u - q.cx) ** 2 + (v - q.cy) ** 2 > 225))) return;\n  const k = y0 * BW + x0, fx = gx - x0, fy = gy - y0, a = bl(S.M, k, fx, fy) * (q ? cl(0.5 + (q.nx * u + q.ny * v - q.d0), 0, 1) : S.cuts.length && v \u003c 0.6 ? cutA(S.cuts, u, v) : 1);\n  if (a \u003c 0.02) return;\n  if (y + 0.5 \u003c s) {\n    const nx = bl(S.NX, k, fx, fy), sn = bl(S.SN, k, fx, fy), al = bl(S.AL, k, fx, fy), li = P[38] ? cl(0.5 + 0.8 * nx * P[38], 0, 1) : 0.6 + 0.25 * nx;\n    for (let j = 0; j \u003c 3; j++) c[j] = mix(mix(P[19 + j], P[16 + j], li), P[22 + j] * (0.88 + 0.12 * li), sn) * al;\n  } else {\n    const L = glow(x, y, y + 0.5 - s, 1);\n    for (let j = 0; j \u003c 3; j++) c[j] = bl(S.IC[j], k, fx, fy) * AT[y * 3 + j] * P[39] + 0.35 * S.row[y * 3 + j] + L * LT[j];\n  }\n  const ck = pc && v \u003c 0.6 && abs(pc.nx * u + pc.ny * v - pc.d) \u003c 0.6 ? 0.4 : 1;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(q ? F[o + j] : 0, c[j] * ck, q ? a : 1);\n  S.ba[i] = max(S.ba[i], a);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  F = S.f;\n  const { ba, sf, rt, row, t, P, k1, ex } = S;\n  const sunA = 1 - sm(0, 0.4, k1), moonA = sm(0.6, 1, k1), aur = sm(0.7, 1, k1), stars = sm(0.55, 0.9, k1);\n  for (let y = 0; y \u003c H; y++) {\n    let k = 0;\n    while (k \u003c 2 && y > P[k * 4 + 4]) k++;\n    const u = y \u003c= HZ ? sm(P[k * 4], P[k * 4 + 4], y) : cl((y - WL) / 97, 0, 1) ** 0.75;\n    for (let j = 0; j \u003c 3; j++) row[y * 3 + j] = y \u003c= HZ ? mix(P[k * 4 + 1 + j], P[k * 4 + 5 + j], u) : mix(P[25 + j], P[28 + j], u);\n  }\n  for (let q = 0; q \u003c 176; q++) rt[q] = sm(0.45, 0.82, vn((q - 56) * 0.13 - t * 0.3, t * 0.05 + 7));\n  (G = S), (PL = P), (RT = rt), (LR = P[37]), (LS = P[38] * 0.45), (LC = P[40] * (0.7 + 0.6 * S.k4));\n  [7, -5, -6, 4].forEach((v, j) => (LA[j] = floor(t * v)));\n\n  // The berg first, then the background where it shows, then the slabs.\n  ba.fill(0);\n  const ct = cos(S.th), st = sin(S.th), oy = WL + PV + S.by;\n  for (let y = 0; y \u003c H; y++) {\n    const dy = y + 0.5 - oy, g0 = floor(ct * dy + PV - V0 - 0.5);\n    let u0 = 99, u1 = -99;\n    for (let j = max(0, g0 - 3); j \u003c= min(BH - 1, g0 + 3); j++) (u0 = min(u0, ex[j * 2])), (u1 = max(u1, ex[j * 2 + 1]));\n    for (let x = max(0, floor(BX + u0 - st * dy - 2)); x \u003c min(W, BX + u1 - st * dy + 3); x++) {\n      const dx = x + 0.5 - BX;\n      paint(x, y, ct * dx + st * dy, -st * dx + ct * dy + PV, null);\n    }\n  }\n  const sx = 55, sy = 21.5, mx = 12, my = 8, c = C3;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, A = ba[i], dep = y + 0.5 - sf[x];\n    if (A > 0.995) continue;\n    let g = 0, e = 0;\n    if (y \u003c HZ) {\n      const ds = hypot(x + 0.5 - sx, (y + 0.5 - sy) * 1.1), dm = hypot(x + 0.5 - mx, y + 0.5 - my), cu = aur > 0 ? 0.5 + 0.5 * sin(x * 0.2 + 3 * vn(x * 0.05 + t * 0.06, 1) + t * 0.25) : 0;\n      g = moonA * (0.25 * exp(-dm / 5) + (dm \u003c 2.6 && hypot(x - 0.8 - mx, y + 1.1 - my) > 2.3 ? 0.9 : 0)) + (stars > 0 && hash(x, y + 11) \u003c 0.016 ? stars * (0.25 + 0.5 * hash(y, x)) * (0.7 + 0.3 * sin(t * 3 + x * y)) * sm(HZ, 8, y) : 0);\n      e = cu ? aur * sm(19, 6, y) * sm(0, 4, y) * cu * cu * vn(x * 0.6, t * 0.4) : 0;\n      const gs = ds \u003c 30 ? sunA * (0.55 * exp(-ds / 7) + (ds \u003c 2.6 ? 1.2 : 0)) : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = row[y * 3 + j] + SUN[j] * gs + MOON[j] * g + AUR[j] * e;\n      for (const q of S.cl) {\n        const qx = (x + 0.5 - q.x) / q.w, qy = (y + 0.5 - q.y) / q.h;\n        if (qx * qx + qy * qy > 2) continue;\n        const a = 0.92 * sm(0, 0.45, 1 - qx * qx - qy * qy + 0.45 * (vn(x * 0.35 + q.w, y * 0.6) - 0.5)), u = sm(-1, 1, qy);\n        for (let j = 0; j \u003c 3; j++) c[j] = mix(c[j], mix(P[34 + j], P[31 + j], u), a);\n      }\n    } else if (dep \u003c 0) {\n      // The far sea: the sun's glitter path, whitecaps.\n      g = sunA * (abs(x + 0.5 - sx) \u003c 1.5 + (y - HZ) * 1.2 && hash(x, y + floor(t * 7) * 64) \u003c 0.45 ? 0.75 : 0);\n      e = S.k4 > 0.35 && hash(x + floor(t * 2) * 7, y) \u003c (S.k4 - 0.35) * 0.3 ? 0.8 : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[36 + j] * 0.55 + row[90 + j] * 0.45 + SUN[j] * g, 230, e);\n    } else {\n      // The surface's silver underside.\n      (g = glow(x, y, dep, 0)), (e = dep \u003c 2.5 ? (1 - dep / 2.5) * 0.5 : 0);\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[y * 3 + j] + (j ? 90 : 60) * e + g * LT[j], row[78 + j] * 0.9, dep \u003c 1 ? 0.55 : 0);\n    }\n    for (let j = 0; j \u003c 3; j++) F[o + j] = mix(c[j], F[o + j], A);\n  }\n  for (const p of S.pieces) {\n    const ca = cos(p.a), sa = sin(p.a), e = p.c.ex;\n    for (let y = max(0, floor(p.y - e)); y \u003c min(H, p.y + e); y++)\n      for (let x = max(0, floor(p.x - e)); x \u003c min(W, p.x + e); x++) {\n        const dx = x + 0.5 - p.x, dy = y + 0.5 - p.y;\n        paint(x, y, p.c.bu + ca * dx + sa * dy, p.c.bv - sa * dx + ca * dy, p.c);\n      }\n  }\n  sprites(S, t, ba);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction sprites(S, t, ba) {\n  for (const k of S.kr) {\n    const x = S.kx + cos(k.p + t * k.w) * k.r * 1.3, y = S.ky + sin(k.q + t * k.w * 1.3) * k.r * 0.7, i = floor(y) * W + floor(x);\n    if (i >= 0 && i \u003c N && ba[i] \u003c 0.5) put(x, y, [255, 128, 118], (0.25 + 0.35 * S.P[39]) * (0.7 + 0.3 * sin(t * 4 + k.p * 9)));\n  }\n  for (const b of S.bubs) put(b.x, b.y, [214, 246, 255], 0.6);\n  for (const p of S.pens) {\n    if (!p.st && !p.on) continue;\n    if (p.st === 0 || p.st === 1 || p.st === 5) {\n      const [x, y] = toW(S, p.u, topB(S, p.u) - 0.3), f = p.f, B = round(x - 0.5) + (f > 0 ? 0 : 1), Y = floor(y) - (p.st && sin(t * 14) > 0 ? 1 : 0);\n      put(B, Y - 3, BLK), put(B + f, Y - 3, BLK), put(B + 2 * f, Y - 3, [240, 168, 60], 0.8);\n      for (let j = 0; j \u003c 3; j++) put(B, Y - j, BLK), put(B + f, Y - j, WHT);\n    } else {\n      const r = hypot(p.vx, p.vy) + 1e-6, ux = p.vx / r, uy = p.vy / r;\n      for (let j = -1.5; j \u003c= 1.5; j += 0.5) put(p.x + ux * j, p.y + uy * j, BLK), j \u003c 1 && put(p.x + ux * j - uy * (ux \u003c 0 ? -1 : 1), p.y + uy * j + abs(ux), WHT, 0.9);\n    }\n  }\n  for (const p of S.spray) put(p.x, p.y, [232, 240, 246], min(1, p.l * 1.3));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower."},{"name":"Shape","min":0,"max":1,"about":"A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom."},{"name":"Swell","min":0,"max":1,"about":"How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea."}],"start":[0,2,0,0.06],"measures":{"motion":0.1332,"detail":0.0357,"edges":0.189,"complexity":1.9213,"coverage":0.9971,"colour":0.3059,"drift":0.0544},"knobResponse":[0.1811,0.05,0.05,0.0489]},{"slug":"implosion","title":"Implosion","family":"construction","round":26,"note":"새벽 하늘 아래 스무 층 아파트에 장약 섬광이 층마다 타고 내려오면, 탑이 꺾이며 제자리로 주저앉고 회황색 먼지구름이 꼭대기까지 끓어올라요. 타임랩스로 비계 속에 새 탑이 서고, K1 을 누르면 바로 발파해요.","idea":"An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.","buttons":"K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.","code":"// ===== Patternflow pattern =====\n// Title:   Implosion\n// Family:  construction\n// Idea:    An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the explosive demolitions of 1960s concrete tower blocks\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1\n//\n// Knob 1: Light. Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust.\n// Knob 2: Speed. At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower.\n// Knob 3: Storeys. Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel.\n// Knob 4: Wind. Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it.\n// Buttons: K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = (a = 1) => Math.random() * a;\nconst side = () => (rnd() \u003c 0.5 ? -1 : 1);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every cx by cy cells.\nfunction vn(x, y, cx = 1e4, cy = 1e4) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (i, j) => hash(((i % cx) + cx) % cx, ((j % cy) + cy) % cy);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + h(xi + 1, yi + 1)) * su * sv;\n}\n\n// Ground row; the tower's front face from x 19 (22 wide) and side face (6).\nconst G = 110, X0 = 19, TW = 28, CX = 33;\n// One round at Speed 2, in seconds.\nconst T_CH = 2.4, T_FALL = 3, T_EX = 11, T_TL = 19, T_CLR = 25, T_RISE = 26.5, T_UP = 32.5, CYC = 36;\nconst MP = 240, PF = 12;\n// Dawn, morning, overcast, night: sky top, mid, horizon; ambient; sun; lit windows; floods; cloud lit, dark; cover.\nconst KEYS = [\n  [16, 30, 86, 52, 84, 156, 214, 146, 150, 0.4, 0.45, 0.66, 0.55, 0.32, 0.3, 0.34, 0.35, 236, 156, 156, 58, 60, 108, 0.5],\n  [46, 108, 206, 110, 164, 228, 236, 206, 160, 0.55, 0.58, 0.68, 1, 0.86, 0.62, 0.06, 0, 255, 244, 226, 150, 160, 190, 0.38],\n  [96, 102, 112, 136, 140, 146, 170, 170, 168, 0.66, 0.66, 0.68, 0.08, 0.08, 0.08, 0.12, 0.12, 190, 192, 196, 100, 104, 112, 0.9],\n  [3, 5, 18, 8, 14, 38, 34, 32, 58, 0.14, 0.15, 0.24, 0, 0, 0, 0.5, 1, 40, 38, 58, 12, 14, 28, 0.45],\n];\nconst TILE = [80, 110, 170], BRICK = [170, 84, 56], PALE = [190, 176, 150], RUST = [150, 80, 50], AMBER = [255, 150, 30];\nconst COATS = [[30, 34, 56], [56, 30, 36], [34, 46, 34], [50, 44, 34], [250, 120, 20]], SIL = [12, 12, 16], PHONE = [150, 180, 240];\nconst WIN = [204, 150, 83], GLASS = [60, 84, 110], MID = [0, 0, 0], LAMP = [200, 190, 150], DARK = [30, 28, 28], HOLE = [14, 12, 12], RED = [255, 40, 30];\nconst CON = [160, 154, 144], WARM = [255, 188, 104], YEL = [242, 182, 32], DUST0 = [150, 147, 142], DUST1 = [190, 164, 120];\nlet F, L, P;\n\nexport function setup(params) {\n  const f = (n) => new Float32Array(n);\n  P = params.s = { F: f(N * 3), NT: f(N), BA: f(N * 3), BU: f(N), BK: new Uint8Array(N), FL: f(N), SKY: f(H * 3), pf: f(MP * PF), np: 0, cr: [], T: 0, rt: 0, S: 0, cyc: 0, co: 0, w: 0 };\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.NT[i] = 0.5 * vn(x / 16, y / 16, 4, 8) + 0.3 * vn(x / 8, y / 8, 8, 16) + 0.2 * vn(x / 4, y / 4, 16, 32);\n    // Two floodlight masts by the fence aim up the tower.\n    for (const lx of [2, 61]) {\n      const dx = x - lx, dy = y - 82, dd = sqrt(dx * dx + dy * dy) + 0.5, ax = CX - lx, c = (dx * ax - dy * 32) / (dd * sqrt(ax * ax + 1024));\n      P.FL[i] += exp(-(1 - c) * 32) / (1 + dd / 40) + 0.9 * exp((-dd * dd) / 5);\n    }\n  }\n  scenery();\n  for (let x = 2; x \u003c 63; x += 3 + floor(rnd(3))) if (rnd() \u003c 0.85) P.cr.push([x, 111 + floor(rnd(4)), 4 + floor(rnd(3)), rnd(), rnd(), P.cr.length % 7 === 3 ? 4 : floor(rnd(4))]);\n  newRound();\n}\n\n// Street, site, two low blocks, far skyline and spire, chimney, a water cannon on a roof.\nfunction scenery() {\n  const top = [];\n  for (let x = 0; x \u003c W; ) for (let j = 0, w = 3 + rnd(6), t = 72 + rnd(16); j \u003c w && x \u003c W; j++) top[x++] = t;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, hh = hash(x, y), q = (x - 50) & 3;\n    let k = 2, c = 0, v = 1;\n    if (y > 118) (c = [58, 58, 64]), (v = 0.9 + 0.2 * hh);\n    else if (y === 118) c = [120, 118, 112];\n    else if (y >= G) (c = [118, 104, 86]), (v = 0.8 + 0.35 * hh);\n    else if (x > 50 && x \u003c 56 && y > 84 && y \u003c 90) c = abs(x - 53) + abs(y - 86.5) \u003c 1.6 ? [40, 44, 50] : [116, 120, 128];\n    else if (x \u003c 15 && y > 81) {\n      (c = y \u003c 84 ? [170, 160, 150] : [148, 92, 70]), (v = y \u003c 84 ? 1 : 0.88 + 0.2 * hash(x >> 1, y));\n      if (y > 85 && y \u003c 106 && x & 3 && (x & 3) \u003c 3 && (y - 86) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 48 && y > 89) {\n      (c = y \u003c 92 ? [190, 182, 170] : [176, 162, 138]), (v = 0.9 + 0.15 * hash(x, y >> 2));\n      if (y > 93 && y \u003c 108 && q && q \u003c 3 && (y - 94) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 55 && x \u003c 60 && y > 43) c = y === 44 ? [180, 172, 160] : y > 46 && y \u003c 54 && y % 5 > 1 && y % 5 \u003c 4 ? [176, 70, 56] : [150, 138, 124];\n    else if (y >= top[x] || (y > 57 && abs(x - 9) \u003c= (y - 58) / 6)) (k = 1), (c = [60, 66, 86]), (v = 0.85 + 0.25 * hash(x >> 2, 3));\n    else k = 0;\n    P.BK[i] = k;\n    if (c) for (let j = 0; j \u003c 3; j++) P.BA[i * 3 + j] = c[j] * v;\n  }\n}\n\n// The facade for S storeys: a kind per cell, each window's chance to be lit.\nfunction facade(S) {\n  const p = min(4, 100 / S), BH = round(S * p), BT = BH + 16, n = TW * BT, st = [], chg = [];\n  const A = new Float32Array(n), K = new Uint8Array(n), U = new Float32Array(n), RS = new Int16Array(BT).fill(-1);\n  for (let s = 0; s \u003c= S; s++) st.push(round(s * p));\n  for (let b = 0, s = 0; b \u003c BT; b++) {\n    while (s \u003c S - 1 && st[s + 1] \u003c= b) s++;\n    const r = b - st[s], wr = r === 1 || r === 2;\n    if (b \u003c BH) RS[b] = s;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = b * TW + c, bay = (c - 1) >> 2;\n      let k = 0, a = 0.92 + 0.14 * hash(s * 7 + bay, 11);\n      if (b \u003c BH) {\n        if (c \u003c 22) (k = !r ? 3 : c && c \u003c 21 && ((c - 1) & 3) \u003c 3 && wr ? 2 : 1), (U[j] = hash(s * 13 + bay, 3));\n        else (k = c > 23 && c \u003c 26 && wr ? 5 : 4), (a = c === 22 ? 1.15 : a), (U[j] = hash(s * 17 + c, 9));\n        if (!r) a *= 0.8;\n      } else if (b === BH) k = c \u003c 22 ? 6 : 0;\n      else if (b \u003c= BH + 4 && ((c > 4 && c \u003c 15) || (c > 15 && c \u003c 20 && b \u003c= BH + 3))) (k = 6), (a = 0.82);\n      else if (c === 10) k = b \u003c BT - 1 ? 7 : 8;\n      else if ((b === BH + 9 && c > 7 && c \u003c 13) || (b === BH + 7 && c === 11)) k = 7;\n      (K[j] = k), (A[j] = a);\n    }\n  }\n  for (let s = round(S * 0.78); s >= 2; s -= 3) chg.push(s);\n  Object.assign(P, { S, BH, BT, st, fa: A, fk: K, fu: U, rs: RS, chg: chg.concat([1, 0]), fold: st[round(S * 0.42)], fls: new Float32Array(S), bl: new Uint8Array(S) });\n}\n\nfunction newRound() {\n  Object.assign(P, { cyc: P.cyc + 1, dir: side(), fi: 0, b0: 0, b1: 0, pd1: 0, pc2: 0, a1: 0, a2: 0, bd: [] });\n  P.bl?.fill(0);\n  for (let j = 0; j \u003c 8; j++) P.bd.push([0, 0, 0, 0, rnd(6.28), 7 + rnd(10), 0, rnd(6)]);\n}\n\n// The lower floors give first; the upper block then folds into them.\nconst yS = (s) => G - 1 - (P.st[s] + P.st[s + 1]) / 2;\nconst fall = (tc) => (tc \u003c= 0 ? [0, 0] : [11 * tc * tc, tc > 0.5 ? 6 * (tc - 0.5) ** 2 : 0]);\nconst puff = (x, y, vx, vy, r, g, a, life, rise) => P.np \u003c MP && P.pf.set([x, y, vx, vy, r, r, g, a, 0, life, rise, rnd()], P.np++ * PF);\n// Dust from crushed floors: most climbs, some rolls out along the ground.\nfunction basePuff(kind) {\n  const x = X0 + rnd(TW), out = x - CX, roll = kind \u003c 2 && rnd() \u003c 0.4;\n  puff(x, G - 1 - rnd(4), out * 0.8 + rnd(12) - 6 + (roll ? Math.sign(out || 1) * (10 + rnd(10)) : 0), roll ? -1 - rnd(3) : -5 - rnd(12) - (kind > 1 ? 14 : 0), 3 + rnd(3), 2 + rnd(2.5), 1 + rnd(0.5), roll ? 12 + rnd(5) : 8.5 + rnd(5), roll ? 1 + rnd(3) : 8 + rnd(kind > 1 ? 30 : 24));\n}\n// A charge on storey s: its windows blow out and spit dust.\nfunction fire(s) {\n  const y = yS(s);\n  P.bl[s] = 1;\n  for (let n = 0; n \u003c 10; n++) {\n    const sd = n & 1 ? 1 : -1, ex = sd \u003c 0 ? X0 - 1 : X0 + TW;\n    puff(n \u003c 4 ? ex : X0 + 2 + rnd(TW - 4), y + rnd(2) - 1, sd * (n \u003c 4 ? 10 + rnd(12) : rnd(3)), -rnd(), 1 + rnd(0.8), 1.2 + rnd(), 0.7, 1.6 + rnd(), 0.5);\n  }\n  if (P.fi === 1) for (const b of P.bd) (b[6] = 1), (b[2] = (b[0] - CX) * 2 + rnd(14) - 7 + P.w * 14), (b[3] = -8 - rnd(14));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  P = params.s;\n  const k = input.knobValues || [0, 2, 20, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), S = round(cl(k[2], 20, 30)), w = (P.w = cl(k[3], -1, 1));\n  if (S !== P.S) facade(S);\n  P.rt += rd;\n  if (input.btnPressed?.[0]) P.T \u003c T_CH - 0.7 ? (P.T = T_CH - 0.7) : P.T >= T_TL && (newRound(), (P.T = T_CH - 0.7));\n  if ((P.T += d) >= CYC) newRound(), (P.T -= CYC);\n  const T = P.T, tl = 0.85 * sm(T_TL, T_TL + 1.2, T) * (1 - sm(CYC - 2.5, CYC - 0.4, T)), tc = T - T_FALL, [d1, c2] = T \u003c T_TL ? fall(tc) : [0, 0], cons = min(P.BT, d1 + c2), phM = 10 + S * 0.6;\n  // Time-lapse: a day every 2 s, and the clouds race.\n  const u = (P.he = mix(cl(k[0], 0, 1), 0.5 - 0.5 * cos(PI * (T - T_TL)), tl)) * 3, i = min(2, floor(u));\n  P.L = KEYS[i].map((v, j) => mix(v, KEYS[i + 1][j], u - i));\n  P.co += (w * 2 + tl * (w \u003c 0 ? -24 : 24)) * d;\n\n  // Charges, top to bottom, then the shudder.\n  while (P.fi \u003c P.chg.length && T >= T_CH + P.fi * 0.09 && T \u003c T_TL) fire(P.chg[P.fi++]);\n  P.gfl = 0;\n  P.chg.forEach((s, n) => (P.gfl = max(P.gfl, (P.fls[s] = T >= T_CH + n * 0.09 ? exp(-(T - T_CH - n * 0.09) * 9) : 0))));\n  P.shk = T > T_CH && T \u003c T_FALL + 0.6 ? round((rnd() - 0.5) * 2.6 * (1 - sm(T_FALL, T_FALL + 0.6, T))) : 0;\n\n  // The fall: dust where floors are crushed, at the foot and the fold.\n  if (tc > 0 && T \u003c T_TL) {\n    if (!P.b0) for (let n = (P.b0 = 24); n--; ) basePuff(1);\n    const e1 = max(0, d1 - P.pd1), e2 = max(0, c2 - P.pc2);\n    if (d1 + c2 \u003c P.BT) (P.a1 += e1 * 1.1), (P.a2 += e2 * 0.35);\n    for (; P.a1 >= 1; P.a1--) basePuff(0);\n    for (let sd; P.a2 >= 1; P.a2--) (sd = side()), puff(CX + sd * (8 + rnd(8)), min(G - 2, G - 1 - P.fold + d1), sd * (8 + rnd(14)), -2 - rnd(6), 2 + rnd(1.5), 3 + rnd(3), 0.7, 8 + rnd(4), 4 + rnd(6));\n    if (!P.b1 && cons >= P.BT) for (let n = (P.b1 = 20); n--; ) basePuff(2);\n    (P.pd1 = d1), (P.pc2 = c2);\n  }\n  P.ph = T \u003c T_FALL ? 0 : T \u003c T_TL ? phM * sm(0, 1, cons / P.BT) : phM * (1 - sm(T_TL + 0.5, T_CLR - 0.5, T));\n\n  // Puffs rise, slow, swell and drift, faster aloft.\n  const pf = P.pf, ex = 1 - exp(-0.7 * d), ey = 1 - exp(-0.9 * d);\n  for (let p = 0, q, age; p \u003c P.np; p++) {\n    if ((age = pf[(q = p * PF) + 8] += d) > pf[q + 9]) {\n      if (p-- \u003c --P.np) pf.copyWithin(q, P.np * PF, P.np * PF + PF);\n      continue;\n    }\n    pf[q + 2] += (w * (3 + 9 * (1 - pf[q + 1] / H)) - pf[q + 2]) * ex;\n    pf[q + 3] += (-pf[q + 10] * exp(-age / 4) - pf[q + 3]) * ey;\n    (pf[q] += pf[q + 2] * d), (pf[q + 1] = min(G - 0.35 * pf[q + 4], pf[q + 1] + pf[q + 3] * d)), (pf[q + 4] += (pf[q + 6] * d) / (1 + 0.4 * age));\n  }\n  const fly = (a, g, keep) => a.filter((b) => ((b[3] += g * d), (b[0] += b[2] * d), (b[1] += b[3] * d), keep(b)));\n  // Pigeons circle the roof until the first charge, then scatter.\n  for (const b of P.bd)\n    if (b[6]) fly([b], -4, () => 1), (b[7] += 14 * d);\n    else (b[4] += 0.9 * d), (b[0] = CX + cos(b[4]) * b[5] * 1.3), (b[1] = G - P.BH - 10 + sin(b[4]) * b[5] * 0.35), (b[7] += 9 * d);\n}\n\nconst idx = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] - F[o + j]) * a;\n}\nfunction add(x, y, c, k, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += c[j] * k;\n}\nfunction glow(x, y, c, k, r) {\n  for (let j = -r; j \u003c= r; j++) for (let i = -r; i \u003c= r; i++) add(x + i, y + j, c, k * exp(-(i * i + j * j) / (0.3 * r * r)));\n}\nconst lit = (c, m = 1, s = 0.5, f = 0) => [0, 1, 2].map((j) => c[j] * (L[9 + j] * m + L[12 + j] * s + f));\nfunction line(x0, y0, x1, y1, c) {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c);\n}\nconst fq = (x, y) => P.FL[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)] * L[16];\n\nfunction back() {\n  const { BA, BU, BK, FL, NT, SKY } = P, aw = abs(P.w), sx = 0.6 - 0.3 * aw, sh = 0.85 * P.w, sy = 1 + 0.8 * aw, th = 0.5 + (0.5 - L[23] - 0.15 * aw) * 0.32;\n  const sunV = 280 * sm(0.12, 0.3, P.he) * (1 - sm(0.42, 0.58, P.he)), night = sm(0.78, 1, P.he), fld = L[16], lw = L[15];\n  for (let y = 0; y \u003c H; y++) for (let c = 0, t = min(1, y / 96); c \u003c 3; c++) SKY[y * 3 + c] = mix(mix(L[c], L[3 + c], sm(0, 0.6, t)), L[6 + c], sm(0.4, 1, t) ** 2);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = BK[i], fb = fld * FL[i], so = y * 3;\n    if (!k) {\n      // Round clouds when calm, slanting streaks in wind; sun, moon, stars.\n      const n = NT[((floor(y * sy + 40) & 127) \u003c\u003c 6) | (floor(x * sx + y * sh + P.co) & 63)], cd = max(0, sm(th - 0.06, th + 0.08, n) * (1 - sm(66, 96, y)) * 0.9), lb = cl(0.15 + y / 110 + (n - th) * 2, 0, 1);\n      let sg = sunV > 0 ? sunV * exp(-((x - 9) ** 2 + (y - 60) ** 2) / 12) : 0;\n      if (night > 0) sg += night * (((x - 52) ** 2 + (y - 20) ** 2 \u003c 6) * 220 + (y \u003c 70 && hash(x, y) > 0.985 ? 90 + 60 * sin(P.rt * 3 + x) : 0));\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(SKY[so + c], mix(L[20 + c], L[17 + c], lb), cd) + sg * (1 - 0.15 * c) + (56 + 5 * c) * fb;\n    } else if (k === 3 && BU[i] \u003c lw * 1.1) F.set(WIN, o);\n    else {\n      const m = k === 3 ? 0.25 : 1, f = (y \u003c 84 ? 0.35 : 0.5) * (x \u003c 15 || x > 55 ? 1 : 0.6), gl = k === 3 ? 0.2 : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = k === 1 ? mix(BA[o + c] * L[9 + c], SKY[so + c], 0.55 - y / 400) : SKY[so + c] * gl + BA[o + c] * m * (L[9 + c] + L[12 + c] * f + fb * 0.6);\n    }\n  }\n  // Light masts; chimney smoke bending with the wind.\n  for (const lx of [2, 61]) {\n    for (let y = 82; y \u003c G; y++) put(lx, y, [30, 30, 34]);\n    if (fld > 0.05) put(lx, 82, [255, 250, 230], min(1, fld * 1.5));\n  }\n  const sc = lit([176, 172, 168]), ph = (P.rt * 0.5) % 1;\n  for (let j = 0; j \u003c 12; j++) {\n    const s = j + ph, x = 57.5 + P.w * (s * 2.2 + s * s * 0.14) + sin(P.rt * 0.7 + j) * 0.6, y = 42 - s * 2.4 * (1 - 0.55 * aw), r = 1.4 + s * 0.42, a = 0.45 * (1 - s / 12.5) * min(1, s);\n    for (let v = -ceil(r); v \u003c= r; v++) for (let u = -ceil(r), q; u \u003c= r; u++) if ((q = 1 - (u * u + v * v) / (r * r)) > 0) put(x + u, y + v, sc, a * q);\n  }\n}\n\n// The tower as it stands or falls. During the rebuild it rises in scaffolding.\nfunction tower() {\n  const { fa: A, fk: K, fu: U, rs: RS, FL, SKY, T, BT, BH, fold: F0 } = P, tc = T - T_FALL;\n  if (T >= T_TL && T \u003c T_RISE) return;\n  const reb = T >= T_RISE, built = reb ? BH * sm(T_RISE, T_UP, T) : BT, strip = reb ? BT * (1 - sm(T_UP, CYC - 0.6, T)) : 0, lw = L[15], fld = L[16], tick = floor(T * 20);\n  const [d1, c2] = reb ? [0, 0] : fall(tc), l1 = reb ? 0 : P.dir * 3 * sm(0.1, 1.2, tc), l2 = reb ? 0 : -P.dir * 10 * sm(0.3, 1.6, tc);\n  const scaf = lit([184, 186, 178]), net = lit([64, 124, 104]), slab = lit([130, 126, 118]), mast = lit([120, 124, 132]);\n  for (let y = max(0, G - BT - 1); y \u003c G; y++) {\n    // The block above the fold or the one under it; both shear.\n    let b = G - 1 + d1 + c2 - y, xo, up = 1;\n    if (b >= F0 + c2 && b \u003c BT) xo = l1 + (l2 * (b - F0 - c2)) / (BT - F0);\n    else if ((b = G - 1 + d1 - y) >= 0 && b \u003c F0) (xo = (l1 * b) / F0), (up = 0);\n    else continue;\n    const bi = floor(b), xs = round(xo + P.shk), s = RS[bi], fl = s >= 0 ? P.fls[s] : 0, rag = tc > 0 && !reb && (G - y \u003c 3 || (up && c2 > 0 && b - F0 - c2 \u003c 2));\n    const top = sm(70, 25, y), hy = (y >> 1) * 3, f2 = rag ? 0.55 : 1;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = bi * TW + c, k = K[j], x = X0 + c + xs;\n      if (!k || x \u003c 0 || x >= W || (rag && hash(x * 13 + y, tick) \u003c 0.4)) continue;\n      const o = (y * W + x) * 3, sd = k === 4 || k === 5, fq = FL[y * W + x] * fld;\n      let col = MID;\n      if (reb && (bi \u003c strip || (k > 5 && strip > BH))) {\n        if (bi >= built || k > 5) continue;\n        col = c % 3 === 0 || bi % 3 === 0 ? scaf : hash(c >> 2, bi >> 3) \u003c 0.4 ? net : k === 3 ? slab : hash(c >> 1, s) \u003c 0.12 ? LAMP : DARK;\n      } else if (k === 2 || k === 5) {\n        const v = sd ? 0.65 : 1;\n        if (s >= 0 && P.bl[s]) col = HOLE;\n        else if (U[j] \u003c lw) for (let q = 0, u = (0.7 + 0.3 * sin(U[j] * 60)) * v; q \u003c 3; q++) MID[q] = WARM[q] * u;\n        else for (let q = 0; q \u003c 3; q++) MID[q] = (SKY[hy + q] * 0.45 + L[6 + q] * 0.12 + 76 * fq) * v;\n      } else if (k === 7) col = mast;\n      else if (k === 8) col = (P.rt * 1.5) % 1 \u003c 0.5 ? RED : HOLE;\n      else for (let q = 0, m = sd ? 0.6 : 1, sn = (sd ? 0.06 : 0.55) + top * 0.4; q \u003c 3; q++) MID[q] = CON[q] * A[j] * (L[9 + q] * m + L[12 + q] * sn + fq * 1.6);\n      (F[o] = col[0] * f2 + fl * 300), (F[o + 1] = col[1] * f2 + fl * 250), (F[o + 2] = col[2] * f2 + fl * 170);\n    }\n  }\n  // Each charge lights the air by its floor.\n  for (const s of P.chg) {\n    const fl = P.fls[s], yc = yS(s);\n    if (fl > 0.02) for (let y = -6; y \u003c= 6; y++) for (let x = X0 - 9, dx; x \u003c X0 + TW + 9; x++) if ((dx = x \u003c X0 ? X0 - x : max(0, x - X0 - TW + 1))) add(x, yc + y, [255, 196, 120], fl * exp(-(dx * dx) / 12 - (y * y) / 8));\n  }\n}\n\nfunction pileH(x) {\n  const u = (x - CX) / 22;\n  return abs(u) >= 1 || P.ph \u003c 0.3 ? 0 : P.ph * (1 - u * u) ** 0.8 * (0.8 + 0.4 * vn(x * 0.25, P.cyc * 7)) + (hash(x, P.cyc) - 0.5) * 1.6 * min(1, P.ph / 4);\n}\n// Rubble: broken slabs, gaps, rebar and bits of painted rooms.\nfunction pile() {\n  if (P.ph \u003c 0.3) return;\n  for (let x = CX - 22; x \u003c= CX + 22; x++) {\n    const hp = pileH(x), sn = cl(0.45 - 0.3 * (pileH(x + 1) - pileH(x - 1)), 0, 1);\n    for (let y = round(G - hp), y0 = y; y \u003c G + 3; y++) {\n      const cx = floor((x + (y >> 1) * 1.7) / 3), v = hash(cx, (y >> 1) + P.cyc * 97), c = v > 0.96 ? TILE : v \u003c 0.05 ? BRICK : v > 0.9 ? PALE : CON, o = (y * W + x) * 3, f = fq(x, y);\n      let m = (1 - 0.35 * sm(0, 12, y - y0)) * (c === CON ? (0.65 + 0.45 * v) * (y & 1 ? 0.86 : 1.18) : 1);\n      if (y === y0 && hash(x, 9) \u003c 0.3) m = -1;\n      else if (hash(cx * 7 + x, y * 3 + P.cyc) \u003c 0.1) m *= 0.22;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = m \u003c 0 ? RUST[j] * (L[9 + j] + 0.3) : c[j] * m * (L[9 + j] + L[12 + j] * sn + f);\n    }\n  }\n}\n\n// Two long-reach diggers climb the heap and pick it apart.\nfunction digger(x, f, ph) {\n  const g = round(G - max(0, pileH(x) - 1)), q = fq(x, g) + 0.32, Y = lit(YEL, 1, 0.6, q), Yd = Y.map((v) => v * 0.7), D = lit([70, 68, 66], 1, 0.5, q);\n  for (let i = -4; i \u003c= 4; i++) put(x + i, g - 1, D, i & 1 ? 1 : 0.4), put(x + i, g - 2, D);\n  for (let i = -5; i \u003c= 2; i++) for (let j = 3; j \u003c= 5; j++) put(x + i * f, g - j, i \u003c -3 ? Yd : Y);\n  for (let j = 6; j \u003c= 9; j++) for (let i = 1; i \u003c= 3; i++) put(x + i * f, g - j, i === 2 && j > 6 && j \u003c 9 ? GLASS : Y);\n  const a1 = 1 + 0.3 * sin(ph), bx = x + 2 * f, by = g - 5, ex = bx + f * cos(a1) * 11, ey = by - sin(a1) * 11, a2 = -1.2 + 0.5 * sin(ph + 1.3), kx = ex + f * cos(a2) * 8, ky = ey - sin(a2) * 8;\n  line(bx, by, ex, ey, Y), line(bx - f, by, ex - f, ey, Yd), line(ex, ey, kx, ky, Y);\n  for (let i = 0; i \u003c 2; i++) for (let j = 0; j \u003c 3; j++) put(kx + i * f, ky + j, D);\n  if ((P.rt * 1.6 + f * 0.25) % 1 \u003c 0.5) glow(x + 2 * f, g - 10, AMBER, 0.45, 2);\n}\nfunction machines() {\n  const T = P.T, out = sm(T_CLR - 1, T_CLR + 0.5, T);\n  if (T > T_EX && T \u003c T_CLR + 1)\n    for (const [x0, xa, f, j] of [[-10, CX - 13, 1, 0], [76, CX + 13, -1, 1]])\n      digger(round(mix(mix(x0, xa, sm(T_EX + j, T_EX + 2.5 + j, T)), x0, out)), f, T * (T > T_TL ? 9 : 2.2) + j * 2);\n}\n\n// Fence, mesh, barrier tape; siren lights on two posts.\nfunction fence() {\n  const mc = lit([150, 152, 158]), pc = lit([96, 98, 104]), tape = lit([250, 210, 40], 1, 0.5, 0.15);\n  for (let y = 102; y \u003c 118; y++) for (let x = 0; x \u003c W; x++) x % 12 === 5 || y === 102 ? put(x, y, pc) : ((x + y) % 3 === 0 || (x - y + 300) % 3 === 0) && put(x, y, mc, 0.28);\n  for (let x = 0; x \u003c W; x++) put(x, 107 + round(sin(x * 0.6 + P.rt * 5) * (0.3 + abs(P.w))), (x + 40) % 4 \u003c 2 ? tape : SIL);\n  for (const [x, s] of [[5, 0], [53, 0.5]]) {\n    const on = P.T \u003c T_FALL + 0.8 && (P.rt * 2.5 + s) % 1 \u003c 0.45;\n    put(x, 100, on ? [255, 190, 80] : [90, 50, 20]);\n    if (on) glow(x, 100, AMBER, 0.6, 5);\n  }\n}\n\n// Each puff is a grainy ball lit by sun and sky, laid over the last, so billows keep their edges.\nfunction dust() {\n  const { NT, pf, FL } = P, fld = L[16] * 1.8, gf = P.gfl * 0.6, [L9, L10, L11, L12, L13, L14] = L.slice(9, 15);\n  for (let p = 0; p \u003c P.np; p++) {\n    const q = p * PF, px = pf[q], py = pf[q + 1], r = pf[q + 4], age = pf[q + 8], life = pf[q + 9];\n    const a = pf[q + 7] * sm(0, 0.25, age) * (1 - sm(0.4 * life, life, age)) * (pf[q + 5] / r) ** 0.35;\n    if (a \u003c 0.01) continue;\n    const t = pf[q + 11], ox = (p * 23) & 63, oy = p * 41 + floor(age * 3), ir = 1 / r, pb = 0.85 + 0.3 * hash(p, P.cyc);\n    const [a0, a1, a2] = DUST0.map((v, c) => mix(v, DUST1[c], t) * pb);\n    for (let y = max(0, ceil(py - r)), y1 = min(H - 1, floor(py + r)); y \u003c= y1; y++) {\n      const dy = (y - py) * ir, dy2 = dy * dy, row = y * W, nr = ((y + oy) & 127) \u003c\u003c 6, sh = 0.45 + 0.55 * sm(G, 40, y), sk = 0.8 - 0.25 * dy;\n      for (let x = max(0, ceil(px - r)), x1 = min(W - 1, floor(px + r)); x \u003c= x1; x++) {\n        const dx = (x - px) * ir, d2 = dx * dx + dy2;\n        if (d2 >= 1) continue;\n        const n = NT[nr | ((x + ox) & 63)];\n        let e = 2 - d2 * (0.7 + 2.4 * n);\n        if (e \u003c= 0.02) continue;\n        if (e > 1) e = 1;\n        const k = min(0.95, a * e * e * (3 - 2 * e)), i = row + x, o = i * 3, l = -0.6 * dx - 0.5 * dy + 0.62 * sqrt(1 - d2);\n        const gr = 0.4 + 1.2 * n, sun = (0.25 + 0.8 * (l > 0 ? l : 0)) * sh * gr, sky = sk * (0.55 + 0.45 * gr), fl = FL[i] * fld + gf;\n        F[o] += (a0 * (L9 * sky + L12 * sun + fl) - F[o]) * k;\n        F[o + 1] += (a1 * (L10 * sky + L13 * sun + fl) - F[o + 1]) * k;\n        F[o + 2] += (a2 * (L11 * sky + L14 * sun + fl) - F[o + 2]) * k;\n      }\n    }\n  }\n}\n\n// The crowd: coats, marshals in hi-vis, phones up once the siren goes.\nfunction people() {\n  const T = P.T, ph = T > T_CH - 1.5 && T \u003c T_TL ? 0.6 : 0.12, vest = lit(COATS[4], 1, 0.5, 0.2), strip = lit([220, 220, 210], 1, 0.5, 0.3);\n  for (const [x, hy, w, r1, , cc] of P.cr) {\n    const hw = w >> 1, coat = lit(COATS[cc & 3], 0.5, 0.25, 0.1);\n    for (let y = hy + 3, e; y \u003c H; y++) for (let i = -hw + (e = y === hy + 3); i \u003c= hw - !(w & 1) - e; i++) put(x + i, y, cc > 3 && y > hy + 3 && y \u003c hy + 9 ? (y === hy + 6 ? strip : vest) : coat);\n    for (let j = 0; j \u003c 3; j++) for (let i = -1; i \u003c= 1; i++) if (j || !i) put(x + i, hy + j, SIL);\n    if (r1 \u003c ph) {\n      const sc = T > T_CH && T \u003c 11 && hash(floor(P.rt * 30), x) \u003c 0.015 ? [255, 255, 255] : PHONE;\n      for (let j = -2; j \u003c 3; j++) put(x + 2, hy + j, j \u003c 0 ? sc : SIL);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  P = params.s;\n  if (!P || !P.L || !P.fk) return;\n  (F = P.F), (L = P.L);\n  back();\n  tower();\n  pile();\n  machines();\n  fence();\n  const wl = lit([170, 190, 210], 1, 0.5, 0.2), bc = L[16] > 0.7 ? [140, 140, 150] : [24, 24, 30];\n  // The water cannon on the right roof wets the site.\n  for (let j = 0, t; j \u003c 60 && P.T > 1 && P.T \u003c T_TL; j++) (t = ((j * 0.618 + P.rt * 0.8) % 1) * 1.5), add(52 + (P.w * 6 - 15 - 6 * hash(j, 5)) * t, 86 - (10 + 5 * hash(j, 6)) * t + 13 * t * t, wl, 0.2);\n  dust();\n  for (const [x, y, , , , , , fp] of P.bd) for (let i = -1, up = sin(fp) > 0 ? -1 : 0; i \u003c 2; i++) put(x + i, y + (i ? up : 0), bc);\n  people();\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, cl(F[o], 0, 255) | 0, cl(F[o + 1], 0, 255) | 0, cl(F[o + 2], 0, 255) | 0);\n}\n","layer":{"id":"layer-implosion","type":"code","name":"implosion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Implosion\n// Family:  construction\n// Idea:    An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the explosive demolitions of 1960s concrete tower blocks\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1\n//\n// Knob 1: Light. Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust.\n// Knob 2: Speed. At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower.\n// Knob 3: Storeys. Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel.\n// Knob 4: Wind. Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it.\n// Buttons: K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = (a = 1) => Math.random() * a;\nconst side = () => (rnd() \u003c 0.5 ? -1 : 1);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every cx by cy cells.\nfunction vn(x, y, cx = 1e4, cy = 1e4) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (i, j) => hash(((i % cx) + cx) % cx, ((j % cy) + cy) % cy);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + h(xi + 1, yi + 1)) * su * sv;\n}\n\n// Ground row; the tower's front face from x 19 (22 wide) and side face (6).\nconst G = 110, X0 = 19, TW = 28, CX = 33;\n// One round at Speed 2, in seconds.\nconst T_CH = 2.4, T_FALL = 3, T_EX = 11, T_TL = 19, T_CLR = 25, T_RISE = 26.5, T_UP = 32.5, CYC = 36;\nconst MP = 240, PF = 12;\n// Dawn, morning, overcast, night: sky top, mid, horizon; ambient; sun; lit windows; floods; cloud lit, dark; cover.\nconst KEYS = [\n  [16, 30, 86, 52, 84, 156, 214, 146, 150, 0.4, 0.45, 0.66, 0.55, 0.32, 0.3, 0.34, 0.35, 236, 156, 156, 58, 60, 108, 0.5],\n  [46, 108, 206, 110, 164, 228, 236, 206, 160, 0.55, 0.58, 0.68, 1, 0.86, 0.62, 0.06, 0, 255, 244, 226, 150, 160, 190, 0.38],\n  [96, 102, 112, 136, 140, 146, 170, 170, 168, 0.66, 0.66, 0.68, 0.08, 0.08, 0.08, 0.12, 0.12, 190, 192, 196, 100, 104, 112, 0.9],\n  [3, 5, 18, 8, 14, 38, 34, 32, 58, 0.14, 0.15, 0.24, 0, 0, 0, 0.5, 1, 40, 38, 58, 12, 14, 28, 0.45],\n];\nconst TILE = [80, 110, 170], BRICK = [170, 84, 56], PALE = [190, 176, 150], RUST = [150, 80, 50], AMBER = [255, 150, 30];\nconst COATS = [[30, 34, 56], [56, 30, 36], [34, 46, 34], [50, 44, 34], [250, 120, 20]], SIL = [12, 12, 16], PHONE = [150, 180, 240];\nconst WIN = [204, 150, 83], GLASS = [60, 84, 110], MID = [0, 0, 0], LAMP = [200, 190, 150], DARK = [30, 28, 28], HOLE = [14, 12, 12], RED = [255, 40, 30];\nconst CON = [160, 154, 144], WARM = [255, 188, 104], YEL = [242, 182, 32], DUST0 = [150, 147, 142], DUST1 = [190, 164, 120];\nlet F, L, P;\n\nexport function setup(params) {\n  const f = (n) => new Float32Array(n);\n  P = params.s = { F: f(N * 3), NT: f(N), BA: f(N * 3), BU: f(N), BK: new Uint8Array(N), FL: f(N), SKY: f(H * 3), pf: f(MP * PF), np: 0, cr: [], T: 0, rt: 0, S: 0, cyc: 0, co: 0, w: 0 };\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.NT[i] = 0.5 * vn(x / 16, y / 16, 4, 8) + 0.3 * vn(x / 8, y / 8, 8, 16) + 0.2 * vn(x / 4, y / 4, 16, 32);\n    // Two floodlight masts by the fence aim up the tower.\n    for (const lx of [2, 61]) {\n      const dx = x - lx, dy = y - 82, dd = sqrt(dx * dx + dy * dy) + 0.5, ax = CX - lx, c = (dx * ax - dy * 32) / (dd * sqrt(ax * ax + 1024));\n      P.FL[i] += exp(-(1 - c) * 32) / (1 + dd / 40) + 0.9 * exp((-dd * dd) / 5);\n    }\n  }\n  scenery();\n  for (let x = 2; x \u003c 63; x += 3 + floor(rnd(3))) if (rnd() \u003c 0.85) P.cr.push([x, 111 + floor(rnd(4)), 4 + floor(rnd(3)), rnd(), rnd(), P.cr.length % 7 === 3 ? 4 : floor(rnd(4))]);\n  newRound();\n}\n\n// Street, site, two low blocks, far skyline and spire, chimney, a water cannon on a roof.\nfunction scenery() {\n  const top = [];\n  for (let x = 0; x \u003c W; ) for (let j = 0, w = 3 + rnd(6), t = 72 + rnd(16); j \u003c w && x \u003c W; j++) top[x++] = t;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, hh = hash(x, y), q = (x - 50) & 3;\n    let k = 2, c = 0, v = 1;\n    if (y > 118) (c = [58, 58, 64]), (v = 0.9 + 0.2 * hh);\n    else if (y === 118) c = [120, 118, 112];\n    else if (y >= G) (c = [118, 104, 86]), (v = 0.8 + 0.35 * hh);\n    else if (x > 50 && x \u003c 56 && y > 84 && y \u003c 90) c = abs(x - 53) + abs(y - 86.5) \u003c 1.6 ? [40, 44, 50] : [116, 120, 128];\n    else if (x \u003c 15 && y > 81) {\n      (c = y \u003c 84 ? [170, 160, 150] : [148, 92, 70]), (v = y \u003c 84 ? 1 : 0.88 + 0.2 * hash(x >> 1, y));\n      if (y > 85 && y \u003c 106 && x & 3 && (x & 3) \u003c 3 && (y - 86) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 48 && y > 89) {\n      (c = y \u003c 92 ? [190, 182, 170] : [176, 162, 138]), (v = 0.9 + 0.15 * hash(x, y >> 2));\n      if (y > 93 && y \u003c 108 && q && q \u003c 3 && (y - 94) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 55 && x \u003c 60 && y > 43) c = y === 44 ? [180, 172, 160] : y > 46 && y \u003c 54 && y % 5 > 1 && y % 5 \u003c 4 ? [176, 70, 56] : [150, 138, 124];\n    else if (y >= top[x] || (y > 57 && abs(x - 9) \u003c= (y - 58) / 6)) (k = 1), (c = [60, 66, 86]), (v = 0.85 + 0.25 * hash(x >> 2, 3));\n    else k = 0;\n    P.BK[i] = k;\n    if (c) for (let j = 0; j \u003c 3; j++) P.BA[i * 3 + j] = c[j] * v;\n  }\n}\n\n// The facade for S storeys: a kind per cell, each window's chance to be lit.\nfunction facade(S) {\n  const p = min(4, 100 / S), BH = round(S * p), BT = BH + 16, n = TW * BT, st = [], chg = [];\n  const A = new Float32Array(n), K = new Uint8Array(n), U = new Float32Array(n), RS = new Int16Array(BT).fill(-1);\n  for (let s = 0; s \u003c= S; s++) st.push(round(s * p));\n  for (let b = 0, s = 0; b \u003c BT; b++) {\n    while (s \u003c S - 1 && st[s + 1] \u003c= b) s++;\n    const r = b - st[s], wr = r === 1 || r === 2;\n    if (b \u003c BH) RS[b] = s;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = b * TW + c, bay = (c - 1) >> 2;\n      let k = 0, a = 0.92 + 0.14 * hash(s * 7 + bay, 11);\n      if (b \u003c BH) {\n        if (c \u003c 22) (k = !r ? 3 : c && c \u003c 21 && ((c - 1) & 3) \u003c 3 && wr ? 2 : 1), (U[j] = hash(s * 13 + bay, 3));\n        else (k = c > 23 && c \u003c 26 && wr ? 5 : 4), (a = c === 22 ? 1.15 : a), (U[j] = hash(s * 17 + c, 9));\n        if (!r) a *= 0.8;\n      } else if (b === BH) k = c \u003c 22 ? 6 : 0;\n      else if (b \u003c= BH + 4 && ((c > 4 && c \u003c 15) || (c > 15 && c \u003c 20 && b \u003c= BH + 3))) (k = 6), (a = 0.82);\n      else if (c === 10) k = b \u003c BT - 1 ? 7 : 8;\n      else if ((b === BH + 9 && c > 7 && c \u003c 13) || (b === BH + 7 && c === 11)) k = 7;\n      (K[j] = k), (A[j] = a);\n    }\n  }\n  for (let s = round(S * 0.78); s >= 2; s -= 3) chg.push(s);\n  Object.assign(P, { S, BH, BT, st, fa: A, fk: K, fu: U, rs: RS, chg: chg.concat([1, 0]), fold: st[round(S * 0.42)], fls: new Float32Array(S), bl: new Uint8Array(S) });\n}\n\nfunction newRound() {\n  Object.assign(P, { cyc: P.cyc + 1, dir: side(), fi: 0, b0: 0, b1: 0, pd1: 0, pc2: 0, a1: 0, a2: 0, bd: [] });\n  P.bl?.fill(0);\n  for (let j = 0; j \u003c 8; j++) P.bd.push([0, 0, 0, 0, rnd(6.28), 7 + rnd(10), 0, rnd(6)]);\n}\n\n// The lower floors give first; the upper block then folds into them.\nconst yS = (s) => G - 1 - (P.st[s] + P.st[s + 1]) / 2;\nconst fall = (tc) => (tc \u003c= 0 ? [0, 0] : [11 * tc * tc, tc > 0.5 ? 6 * (tc - 0.5) ** 2 : 0]);\nconst puff = (x, y, vx, vy, r, g, a, life, rise) => P.np \u003c MP && P.pf.set([x, y, vx, vy, r, r, g, a, 0, life, rise, rnd()], P.np++ * PF);\n// Dust from crushed floors: most climbs, some rolls out along the ground.\nfunction basePuff(kind) {\n  const x = X0 + rnd(TW), out = x - CX, roll = kind \u003c 2 && rnd() \u003c 0.4;\n  puff(x, G - 1 - rnd(4), out * 0.8 + rnd(12) - 6 + (roll ? Math.sign(out || 1) * (10 + rnd(10)) : 0), roll ? -1 - rnd(3) : -5 - rnd(12) - (kind > 1 ? 14 : 0), 3 + rnd(3), 2 + rnd(2.5), 1 + rnd(0.5), roll ? 12 + rnd(5) : 8.5 + rnd(5), roll ? 1 + rnd(3) : 8 + rnd(kind > 1 ? 30 : 24));\n}\n// A charge on storey s: its windows blow out and spit dust.\nfunction fire(s) {\n  const y = yS(s);\n  P.bl[s] = 1;\n  for (let n = 0; n \u003c 10; n++) {\n    const sd = n & 1 ? 1 : -1, ex = sd \u003c 0 ? X0 - 1 : X0 + TW;\n    puff(n \u003c 4 ? ex : X0 + 2 + rnd(TW - 4), y + rnd(2) - 1, sd * (n \u003c 4 ? 10 + rnd(12) : rnd(3)), -rnd(), 1 + rnd(0.8), 1.2 + rnd(), 0.7, 1.6 + rnd(), 0.5);\n  }\n  if (P.fi === 1) for (const b of P.bd) (b[6] = 1), (b[2] = (b[0] - CX) * 2 + rnd(14) - 7 + P.w * 14), (b[3] = -8 - rnd(14));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  P = params.s;\n  const k = input.knobValues || [0, 2, 20, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), S = round(cl(k[2], 20, 30)), w = (P.w = cl(k[3], -1, 1));\n  if (S !== P.S) facade(S);\n  P.rt += rd;\n  if (input.btnPressed?.[0]) P.T \u003c T_CH - 0.7 ? (P.T = T_CH - 0.7) : P.T >= T_TL && (newRound(), (P.T = T_CH - 0.7));\n  if ((P.T += d) >= CYC) newRound(), (P.T -= CYC);\n  const T = P.T, tl = 0.85 * sm(T_TL, T_TL + 1.2, T) * (1 - sm(CYC - 2.5, CYC - 0.4, T)), tc = T - T_FALL, [d1, c2] = T \u003c T_TL ? fall(tc) : [0, 0], cons = min(P.BT, d1 + c2), phM = 10 + S * 0.6;\n  // Time-lapse: a day every 2 s, and the clouds race.\n  const u = (P.he = mix(cl(k[0], 0, 1), 0.5 - 0.5 * cos(PI * (T - T_TL)), tl)) * 3, i = min(2, floor(u));\n  P.L = KEYS[i].map((v, j) => mix(v, KEYS[i + 1][j], u - i));\n  P.co += (w * 2 + tl * (w \u003c 0 ? -24 : 24)) * d;\n\n  // Charges, top to bottom, then the shudder.\n  while (P.fi \u003c P.chg.length && T >= T_CH + P.fi * 0.09 && T \u003c T_TL) fire(P.chg[P.fi++]);\n  P.gfl = 0;\n  P.chg.forEach((s, n) => (P.gfl = max(P.gfl, (P.fls[s] = T >= T_CH + n * 0.09 ? exp(-(T - T_CH - n * 0.09) * 9) : 0))));\n  P.shk = T > T_CH && T \u003c T_FALL + 0.6 ? round((rnd() - 0.5) * 2.6 * (1 - sm(T_FALL, T_FALL + 0.6, T))) : 0;\n\n  // The fall: dust where floors are crushed, at the foot and the fold.\n  if (tc > 0 && T \u003c T_TL) {\n    if (!P.b0) for (let n = (P.b0 = 24); n--; ) basePuff(1);\n    const e1 = max(0, d1 - P.pd1), e2 = max(0, c2 - P.pc2);\n    if (d1 + c2 \u003c P.BT) (P.a1 += e1 * 1.1), (P.a2 += e2 * 0.35);\n    for (; P.a1 >= 1; P.a1--) basePuff(0);\n    for (let sd; P.a2 >= 1; P.a2--) (sd = side()), puff(CX + sd * (8 + rnd(8)), min(G - 2, G - 1 - P.fold + d1), sd * (8 + rnd(14)), -2 - rnd(6), 2 + rnd(1.5), 3 + rnd(3), 0.7, 8 + rnd(4), 4 + rnd(6));\n    if (!P.b1 && cons >= P.BT) for (let n = (P.b1 = 20); n--; ) basePuff(2);\n    (P.pd1 = d1), (P.pc2 = c2);\n  }\n  P.ph = T \u003c T_FALL ? 0 : T \u003c T_TL ? phM * sm(0, 1, cons / P.BT) : phM * (1 - sm(T_TL + 0.5, T_CLR - 0.5, T));\n\n  // Puffs rise, slow, swell and drift, faster aloft.\n  const pf = P.pf, ex = 1 - exp(-0.7 * d), ey = 1 - exp(-0.9 * d);\n  for (let p = 0, q, age; p \u003c P.np; p++) {\n    if ((age = pf[(q = p * PF) + 8] += d) > pf[q + 9]) {\n      if (p-- \u003c --P.np) pf.copyWithin(q, P.np * PF, P.np * PF + PF);\n      continue;\n    }\n    pf[q + 2] += (w * (3 + 9 * (1 - pf[q + 1] / H)) - pf[q + 2]) * ex;\n    pf[q + 3] += (-pf[q + 10] * exp(-age / 4) - pf[q + 3]) * ey;\n    (pf[q] += pf[q + 2] * d), (pf[q + 1] = min(G - 0.35 * pf[q + 4], pf[q + 1] + pf[q + 3] * d)), (pf[q + 4] += (pf[q + 6] * d) / (1 + 0.4 * age));\n  }\n  const fly = (a, g, keep) => a.filter((b) => ((b[3] += g * d), (b[0] += b[2] * d), (b[1] += b[3] * d), keep(b)));\n  // Pigeons circle the roof until the first charge, then scatter.\n  for (const b of P.bd)\n    if (b[6]) fly([b], -4, () => 1), (b[7] += 14 * d);\n    else (b[4] += 0.9 * d), (b[0] = CX + cos(b[4]) * b[5] * 1.3), (b[1] = G - P.BH - 10 + sin(b[4]) * b[5] * 0.35), (b[7] += 9 * d);\n}\n\nconst idx = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] - F[o + j]) * a;\n}\nfunction add(x, y, c, k, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += c[j] * k;\n}\nfunction glow(x, y, c, k, r) {\n  for (let j = -r; j \u003c= r; j++) for (let i = -r; i \u003c= r; i++) add(x + i, y + j, c, k * exp(-(i * i + j * j) / (0.3 * r * r)));\n}\nconst lit = (c, m = 1, s = 0.5, f = 0) => [0, 1, 2].map((j) => c[j] * (L[9 + j] * m + L[12 + j] * s + f));\nfunction line(x0, y0, x1, y1, c) {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c);\n}\nconst fq = (x, y) => P.FL[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)] * L[16];\n\nfunction back() {\n  const { BA, BU, BK, FL, NT, SKY } = P, aw = abs(P.w), sx = 0.6 - 0.3 * aw, sh = 0.85 * P.w, sy = 1 + 0.8 * aw, th = 0.5 + (0.5 - L[23] - 0.15 * aw) * 0.32;\n  const sunV = 280 * sm(0.12, 0.3, P.he) * (1 - sm(0.42, 0.58, P.he)), night = sm(0.78, 1, P.he), fld = L[16], lw = L[15];\n  for (let y = 0; y \u003c H; y++) for (let c = 0, t = min(1, y / 96); c \u003c 3; c++) SKY[y * 3 + c] = mix(mix(L[c], L[3 + c], sm(0, 0.6, t)), L[6 + c], sm(0.4, 1, t) ** 2);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = BK[i], fb = fld * FL[i], so = y * 3;\n    if (!k) {\n      // Round clouds when calm, slanting streaks in wind; sun, moon, stars.\n      const n = NT[((floor(y * sy + 40) & 127) \u003c\u003c 6) | (floor(x * sx + y * sh + P.co) & 63)], cd = max(0, sm(th - 0.06, th + 0.08, n) * (1 - sm(66, 96, y)) * 0.9), lb = cl(0.15 + y / 110 + (n - th) * 2, 0, 1);\n      let sg = sunV > 0 ? sunV * exp(-((x - 9) ** 2 + (y - 60) ** 2) / 12) : 0;\n      if (night > 0) sg += night * (((x - 52) ** 2 + (y - 20) ** 2 \u003c 6) * 220 + (y \u003c 70 && hash(x, y) > 0.985 ? 90 + 60 * sin(P.rt * 3 + x) : 0));\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(SKY[so + c], mix(L[20 + c], L[17 + c], lb), cd) + sg * (1 - 0.15 * c) + (56 + 5 * c) * fb;\n    } else if (k === 3 && BU[i] \u003c lw * 1.1) F.set(WIN, o);\n    else {\n      const m = k === 3 ? 0.25 : 1, f = (y \u003c 84 ? 0.35 : 0.5) * (x \u003c 15 || x > 55 ? 1 : 0.6), gl = k === 3 ? 0.2 : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = k === 1 ? mix(BA[o + c] * L[9 + c], SKY[so + c], 0.55 - y / 400) : SKY[so + c] * gl + BA[o + c] * m * (L[9 + c] + L[12 + c] * f + fb * 0.6);\n    }\n  }\n  // Light masts; chimney smoke bending with the wind.\n  for (const lx of [2, 61]) {\n    for (let y = 82; y \u003c G; y++) put(lx, y, [30, 30, 34]);\n    if (fld > 0.05) put(lx, 82, [255, 250, 230], min(1, fld * 1.5));\n  }\n  const sc = lit([176, 172, 168]), ph = (P.rt * 0.5) % 1;\n  for (let j = 0; j \u003c 12; j++) {\n    const s = j + ph, x = 57.5 + P.w * (s * 2.2 + s * s * 0.14) + sin(P.rt * 0.7 + j) * 0.6, y = 42 - s * 2.4 * (1 - 0.55 * aw), r = 1.4 + s * 0.42, a = 0.45 * (1 - s / 12.5) * min(1, s);\n    for (let v = -ceil(r); v \u003c= r; v++) for (let u = -ceil(r), q; u \u003c= r; u++) if ((q = 1 - (u * u + v * v) / (r * r)) > 0) put(x + u, y + v, sc, a * q);\n  }\n}\n\n// The tower as it stands or falls. During the rebuild it rises in scaffolding.\nfunction tower() {\n  const { fa: A, fk: K, fu: U, rs: RS, FL, SKY, T, BT, BH, fold: F0 } = P, tc = T - T_FALL;\n  if (T >= T_TL && T \u003c T_RISE) return;\n  const reb = T >= T_RISE, built = reb ? BH * sm(T_RISE, T_UP, T) : BT, strip = reb ? BT * (1 - sm(T_UP, CYC - 0.6, T)) : 0, lw = L[15], fld = L[16], tick = floor(T * 20);\n  const [d1, c2] = reb ? [0, 0] : fall(tc), l1 = reb ? 0 : P.dir * 3 * sm(0.1, 1.2, tc), l2 = reb ? 0 : -P.dir * 10 * sm(0.3, 1.6, tc);\n  const scaf = lit([184, 186, 178]), net = lit([64, 124, 104]), slab = lit([130, 126, 118]), mast = lit([120, 124, 132]);\n  for (let y = max(0, G - BT - 1); y \u003c G; y++) {\n    // The block above the fold or the one under it; both shear.\n    let b = G - 1 + d1 + c2 - y, xo, up = 1;\n    if (b >= F0 + c2 && b \u003c BT) xo = l1 + (l2 * (b - F0 - c2)) / (BT - F0);\n    else if ((b = G - 1 + d1 - y) >= 0 && b \u003c F0) (xo = (l1 * b) / F0), (up = 0);\n    else continue;\n    const bi = floor(b), xs = round(xo + P.shk), s = RS[bi], fl = s >= 0 ? P.fls[s] : 0, rag = tc > 0 && !reb && (G - y \u003c 3 || (up && c2 > 0 && b - F0 - c2 \u003c 2));\n    const top = sm(70, 25, y), hy = (y >> 1) * 3, f2 = rag ? 0.55 : 1;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = bi * TW + c, k = K[j], x = X0 + c + xs;\n      if (!k || x \u003c 0 || x >= W || (rag && hash(x * 13 + y, tick) \u003c 0.4)) continue;\n      const o = (y * W + x) * 3, sd = k === 4 || k === 5, fq = FL[y * W + x] * fld;\n      let col = MID;\n      if (reb && (bi \u003c strip || (k > 5 && strip > BH))) {\n        if (bi >= built || k > 5) continue;\n        col = c % 3 === 0 || bi % 3 === 0 ? scaf : hash(c >> 2, bi >> 3) \u003c 0.4 ? net : k === 3 ? slab : hash(c >> 1, s) \u003c 0.12 ? LAMP : DARK;\n      } else if (k === 2 || k === 5) {\n        const v = sd ? 0.65 : 1;\n        if (s >= 0 && P.bl[s]) col = HOLE;\n        else if (U[j] \u003c lw) for (let q = 0, u = (0.7 + 0.3 * sin(U[j] * 60)) * v; q \u003c 3; q++) MID[q] = WARM[q] * u;\n        else for (let q = 0; q \u003c 3; q++) MID[q] = (SKY[hy + q] * 0.45 + L[6 + q] * 0.12 + 76 * fq) * v;\n      } else if (k === 7) col = mast;\n      else if (k === 8) col = (P.rt * 1.5) % 1 \u003c 0.5 ? RED : HOLE;\n      else for (let q = 0, m = sd ? 0.6 : 1, sn = (sd ? 0.06 : 0.55) + top * 0.4; q \u003c 3; q++) MID[q] = CON[q] * A[j] * (L[9 + q] * m + L[12 + q] * sn + fq * 1.6);\n      (F[o] = col[0] * f2 + fl * 300), (F[o + 1] = col[1] * f2 + fl * 250), (F[o + 2] = col[2] * f2 + fl * 170);\n    }\n  }\n  // Each charge lights the air by its floor.\n  for (const s of P.chg) {\n    const fl = P.fls[s], yc = yS(s);\n    if (fl > 0.02) for (let y = -6; y \u003c= 6; y++) for (let x = X0 - 9, dx; x \u003c X0 + TW + 9; x++) if ((dx = x \u003c X0 ? X0 - x : max(0, x - X0 - TW + 1))) add(x, yc + y, [255, 196, 120], fl * exp(-(dx * dx) / 12 - (y * y) / 8));\n  }\n}\n\nfunction pileH(x) {\n  const u = (x - CX) / 22;\n  return abs(u) >= 1 || P.ph \u003c 0.3 ? 0 : P.ph * (1 - u * u) ** 0.8 * (0.8 + 0.4 * vn(x * 0.25, P.cyc * 7)) + (hash(x, P.cyc) - 0.5) * 1.6 * min(1, P.ph / 4);\n}\n// Rubble: broken slabs, gaps, rebar and bits of painted rooms.\nfunction pile() {\n  if (P.ph \u003c 0.3) return;\n  for (let x = CX - 22; x \u003c= CX + 22; x++) {\n    const hp = pileH(x), sn = cl(0.45 - 0.3 * (pileH(x + 1) - pileH(x - 1)), 0, 1);\n    for (let y = round(G - hp), y0 = y; y \u003c G + 3; y++) {\n      const cx = floor((x + (y >> 1) * 1.7) / 3), v = hash(cx, (y >> 1) + P.cyc * 97), c = v > 0.96 ? TILE : v \u003c 0.05 ? BRICK : v > 0.9 ? PALE : CON, o = (y * W + x) * 3, f = fq(x, y);\n      let m = (1 - 0.35 * sm(0, 12, y - y0)) * (c === CON ? (0.65 + 0.45 * v) * (y & 1 ? 0.86 : 1.18) : 1);\n      if (y === y0 && hash(x, 9) \u003c 0.3) m = -1;\n      else if (hash(cx * 7 + x, y * 3 + P.cyc) \u003c 0.1) m *= 0.22;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = m \u003c 0 ? RUST[j] * (L[9 + j] + 0.3) : c[j] * m * (L[9 + j] + L[12 + j] * sn + f);\n    }\n  }\n}\n\n// Two long-reach diggers climb the heap and pick it apart.\nfunction digger(x, f, ph) {\n  const g = round(G - max(0, pileH(x) - 1)), q = fq(x, g) + 0.32, Y = lit(YEL, 1, 0.6, q), Yd = Y.map((v) => v * 0.7), D = lit([70, 68, 66], 1, 0.5, q);\n  for (let i = -4; i \u003c= 4; i++) put(x + i, g - 1, D, i & 1 ? 1 : 0.4), put(x + i, g - 2, D);\n  for (let i = -5; i \u003c= 2; i++) for (let j = 3; j \u003c= 5; j++) put(x + i * f, g - j, i \u003c -3 ? Yd : Y);\n  for (let j = 6; j \u003c= 9; j++) for (let i = 1; i \u003c= 3; i++) put(x + i * f, g - j, i === 2 && j > 6 && j \u003c 9 ? GLASS : Y);\n  const a1 = 1 + 0.3 * sin(ph), bx = x + 2 * f, by = g - 5, ex = bx + f * cos(a1) * 11, ey = by - sin(a1) * 11, a2 = -1.2 + 0.5 * sin(ph + 1.3), kx = ex + f * cos(a2) * 8, ky = ey - sin(a2) * 8;\n  line(bx, by, ex, ey, Y), line(bx - f, by, ex - f, ey, Yd), line(ex, ey, kx, ky, Y);\n  for (let i = 0; i \u003c 2; i++) for (let j = 0; j \u003c 3; j++) put(kx + i * f, ky + j, D);\n  if ((P.rt * 1.6 + f * 0.25) % 1 \u003c 0.5) glow(x + 2 * f, g - 10, AMBER, 0.45, 2);\n}\nfunction machines() {\n  const T = P.T, out = sm(T_CLR - 1, T_CLR + 0.5, T);\n  if (T > T_EX && T \u003c T_CLR + 1)\n    for (const [x0, xa, f, j] of [[-10, CX - 13, 1, 0], [76, CX + 13, -1, 1]])\n      digger(round(mix(mix(x0, xa, sm(T_EX + j, T_EX + 2.5 + j, T)), x0, out)), f, T * (T > T_TL ? 9 : 2.2) + j * 2);\n}\n\n// Fence, mesh, barrier tape; siren lights on two posts.\nfunction fence() {\n  const mc = lit([150, 152, 158]), pc = lit([96, 98, 104]), tape = lit([250, 210, 40], 1, 0.5, 0.15);\n  for (let y = 102; y \u003c 118; y++) for (let x = 0; x \u003c W; x++) x % 12 === 5 || y === 102 ? put(x, y, pc) : ((x + y) % 3 === 0 || (x - y + 300) % 3 === 0) && put(x, y, mc, 0.28);\n  for (let x = 0; x \u003c W; x++) put(x, 107 + round(sin(x * 0.6 + P.rt * 5) * (0.3 + abs(P.w))), (x + 40) % 4 \u003c 2 ? tape : SIL);\n  for (const [x, s] of [[5, 0], [53, 0.5]]) {\n    const on = P.T \u003c T_FALL + 0.8 && (P.rt * 2.5 + s) % 1 \u003c 0.45;\n    put(x, 100, on ? [255, 190, 80] : [90, 50, 20]);\n    if (on) glow(x, 100, AMBER, 0.6, 5);\n  }\n}\n\n// Each puff is a grainy ball lit by sun and sky, laid over the last, so billows keep their edges.\nfunction dust() {\n  const { NT, pf, FL } = P, fld = L[16] * 1.8, gf = P.gfl * 0.6, [L9, L10, L11, L12, L13, L14] = L.slice(9, 15);\n  for (let p = 0; p \u003c P.np; p++) {\n    const q = p * PF, px = pf[q], py = pf[q + 1], r = pf[q + 4], age = pf[q + 8], life = pf[q + 9];\n    const a = pf[q + 7] * sm(0, 0.25, age) * (1 - sm(0.4 * life, life, age)) * (pf[q + 5] / r) ** 0.35;\n    if (a \u003c 0.01) continue;\n    const t = pf[q + 11], ox = (p * 23) & 63, oy = p * 41 + floor(age * 3), ir = 1 / r, pb = 0.85 + 0.3 * hash(p, P.cyc);\n    const [a0, a1, a2] = DUST0.map((v, c) => mix(v, DUST1[c], t) * pb);\n    for (let y = max(0, ceil(py - r)), y1 = min(H - 1, floor(py + r)); y \u003c= y1; y++) {\n      const dy = (y - py) * ir, dy2 = dy * dy, row = y * W, nr = ((y + oy) & 127) \u003c\u003c 6, sh = 0.45 + 0.55 * sm(G, 40, y), sk = 0.8 - 0.25 * dy;\n      for (let x = max(0, ceil(px - r)), x1 = min(W - 1, floor(px + r)); x \u003c= x1; x++) {\n        const dx = (x - px) * ir, d2 = dx * dx + dy2;\n        if (d2 >= 1) continue;\n        const n = NT[nr | ((x + ox) & 63)];\n        let e = 2 - d2 * (0.7 + 2.4 * n);\n        if (e \u003c= 0.02) continue;\n        if (e > 1) e = 1;\n        const k = min(0.95, a * e * e * (3 - 2 * e)), i = row + x, o = i * 3, l = -0.6 * dx - 0.5 * dy + 0.62 * sqrt(1 - d2);\n        const gr = 0.4 + 1.2 * n, sun = (0.25 + 0.8 * (l > 0 ? l : 0)) * sh * gr, sky = sk * (0.55 + 0.45 * gr), fl = FL[i] * fld + gf;\n        F[o] += (a0 * (L9 * sky + L12 * sun + fl) - F[o]) * k;\n        F[o + 1] += (a1 * (L10 * sky + L13 * sun + fl) - F[o + 1]) * k;\n        F[o + 2] += (a2 * (L11 * sky + L14 * sun + fl) - F[o + 2]) * k;\n      }\n    }\n  }\n}\n\n// The crowd: coats, marshals in hi-vis, phones up once the siren goes.\nfunction people() {\n  const T = P.T, ph = T > T_CH - 1.5 && T \u003c T_TL ? 0.6 : 0.12, vest = lit(COATS[4], 1, 0.5, 0.2), strip = lit([220, 220, 210], 1, 0.5, 0.3);\n  for (const [x, hy, w, r1, , cc] of P.cr) {\n    const hw = w >> 1, coat = lit(COATS[cc & 3], 0.5, 0.25, 0.1);\n    for (let y = hy + 3, e; y \u003c H; y++) for (let i = -hw + (e = y === hy + 3); i \u003c= hw - !(w & 1) - e; i++) put(x + i, y, cc > 3 && y > hy + 3 && y \u003c hy + 9 ? (y === hy + 6 ? strip : vest) : coat);\n    for (let j = 0; j \u003c 3; j++) for (let i = -1; i \u003c= 1; i++) if (j || !i) put(x + i, hy + j, SIL);\n    if (r1 \u003c ph) {\n      const sc = T > T_CH && T \u003c 11 && hash(floor(P.rt * 30), x) \u003c 0.015 ? [255, 255, 255] : PHONE;\n      for (let j = -2; j \u003c 3; j++) put(x + 2, hy + j, j \u003c 0 ? sc : SIL);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  P = params.s;\n  if (!P || !P.L || !P.fk) return;\n  (F = P.F), (L = P.L);\n  back();\n  tower();\n  pile();\n  machines();\n  fence();\n  const wl = lit([170, 190, 210], 1, 0.5, 0.2), bc = L[16] > 0.7 ? [140, 140, 150] : [24, 24, 30];\n  // The water cannon on the right roof wets the site.\n  for (let j = 0, t; j \u003c 60 && P.T > 1 && P.T \u003c T_TL; j++) (t = ((j * 0.618 + P.rt * 0.8) % 1) * 1.5), add(52 + (P.w * 6 - 15 - 6 * hash(j, 5)) * t, 86 - (10 + 5 * hash(j, 6)) * t + 13 * t * t, wl, 0.2);\n  dust();\n  for (const [x, y, , , , , , fp] of P.bd) for (let i = -1, up = sin(fp) > 0 ? -1 : 0; i \u003c 2; i++) put(x + i, y + (i ? up : 0), bc);\n  people();\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, cl(F[o], 0, 255) | 0, cl(F[o + 1], 0, 255) | 0, cl(F[o + 2], 0, 255) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower."},{"name":"Storeys","min":20,"max":30,"about":"Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel."},{"name":"Wind","min":-1,"max":1,"about":"Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it."}],"start":[0,2,20,0.06],"measures":{"motion":0.3241,"detail":0.034,"edges":0.2245,"complexity":1.918,"coverage":0.9298,"colour":0.1876,"drift":0.0773},"knobResponse":[0.3233,0.0558,0.0577,0.0486]},{"slug":"incense","title":"Incense","family":"noise","round":15,"note":"향 연기가 실처럼 곧게 오르다 몇 줄 위에서 흔들리고, 곧 소용돌이로 흩어져 위로 퍼져요. 돌탑 위 역류 향꽂이에서는 무거운 연기가 돌을 타고 흘러내려 접시에 고여요.","idea":"A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.","buttons":"K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.","code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-incense","type":"code","name":"incense","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10."},{"name":"Sticks","min":1,"max":3,"about":"One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner."},{"name":"Breeze","min":-1,"max":1,"about":"A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish."}],"start":[0,2,1,0.06],"measures":{"motion":0.2464,"detail":0.0379,"edges":0.3304,"complexity":1.0761,"coverage":0.3311,"colour":0.0945,"drift":0.0442},"knobResponse":[0.0522,0.0616,0.0686,0.0518]},{"slug":"indras-pearls","title":"Indra's Pearls","family":"geometry","round":31,"note":"마스킷 조각의 클라인 군이 그리는 극한 집합이 두 흰 벽 사이로 128줄을 내려가요. 접한 원의 목걸이 사이로 진주가 세대마다 작아지고, μ 가 첨점 사이를 오가며 목이 조였다 풀리고 겹 소용돌이가 감겼다 풀려요. K1 을 누르면 진주가 세대 차례로 켜져요.","idea":"The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.","buttons":"K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.","code":"// ===== Patternflow pattern =====\n// Title:   Indra's Pearls\n// Family:  geometry\n// Idea:    The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: limit set of a Kleinian group (Henri Poincaré, 1883), the Maskit slice as drawn in Indra's Pearls (David Mumford, Caroline Series and David Wright, 2002), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal.\n// Knob 2: Speed. At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower.\n// Knob 3: Shape. Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall.\n// Knob 4: Zoom. Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past.\n// Buttons: K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Cusps of the Maskit slice, mu = Re + i Im, from the cusp 0/1 at 2i to 1/2.\n// Each is the root of tr W_p/q(mu) = 2 with the largest imaginary part,\n// found by the Farey recursion on traces (tr a = -i mu, tr b = 2,\n// tr ab = -i mu - 2i). Between two of them the slice's edge dips well below\n// the chord, so mu on the chord, or a little above, stays inside the slice.\nconst CUSP = [\n  [0, 2], [-0.0216, 1.9374], [-0.0363, 1.9134], [-0.0674, 1.8745], [-0.1427, 1.8103],\n  [-0.2201, 1.7667], [-0.3522, 1.7214], [-0.5812, 1.6939], [-1, 1.7321],\n];\nconst NC = CUSP.length - 1;\n\n// The strip 0 \u003c Im z \u003c Im mu spans this many of the 64 columns at Zoom 0,\n// which leaves three LEDs on each side for the dark half-planes. Im mu runs\n// from 1.69 to 2.06, so that is 28 to 34 LEDs per unit of the plane.\nconst SPAN = 58;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    scroll: 0, ph: 0, sw: 0, hue: 0, shape: 0, zoom: 0.06, wave: -1,\n    mr: 0, mi: 2, uz: SPAN / 2, cx: 0, cy: 1, buf: new Float32Array(N * 3), pal: new Float32Array(64 * 3), palHue: -1,\n  };\n}\n\n// mu for a place c on the cusp chain (0..NC, and negative for its mirror,\n// Re mu -> -Re mu, which the slice shares) lifted by l into the slice.\nfunction muAt(c, l, P) {\n  const m = c \u003c 0 ? -1 : 1;\n  c = min(abs(c), NC);\n  const i = min(floor(c), NC - 1), f = c - i;\n  P.mr = m * (CUSP[i][0] + (CUSP[i + 1][0] - CUSP[i][0]) * f);\n  P.mi = CUSP[i][1] + (CUSP[i + 1][1] - CUSP[i][1]) * f + l;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.shape = cl(k[2], 0, 1);\n  P.zoom = cl(k[3], 0, 1);\n  P.ph += d * sp * 0.05;\n  P.sw += d * sp * 0.03;\n  // The lift above the cusp chain breathes between 0, where the chain\n  // pinches into tangent discs, and 0.06, where the invariant component\n  // opens into one winding band, every ten seconds at Speed 2. Over about\n  // seventeen seconds mu also swings along the chain and back: at Shape 0\n  // from the cusp 1/10 through 2i to its mirror image, so the spirals at the\n  // necks wind up one way, unwind and wind up the other way.\n  const lift = 0.06 * (0.5 - 0.5 * Math.cos(P.ph * 2 * PI)) ** 1.5;\n  const c = P.shape * NC + Math.sin(P.sw * 2 * PI) * (1.9 - 1.1 * P.shape);\n  muAt(c, lift, P);\n  // LEDs per unit of the plane, and the slide: five LEDs a second at Speed 2\n  // at any zoom. The picture repeats every 2 along Re z.\n  P.uz = (SPAN / P.mi) * 4 ** P.zoom;\n  // The zoom closes in on a fixed point of a, (mu - sqrt(mu^2 + 4)) / 2, the\n  // one in the lower half of the strip. It lies on the limit set at a neck\n  // of the chain, where the small pearls spiral in; the slide carries it\n  // through the middle of the view once a period.\n  const ar = P.mr * P.mr - P.mi * P.mi + 4, ai = 2 * P.mr * P.mi, am = sqrt(ar * ar + ai * ai);\n  let sr = sqrt(max(0, (am + ar) / 2)), si = sqrt(max(0, (am - ar) / 2));\n  if (ai \u003c 0) si = -si;\n  if (si \u003c 0) {\n    sr = -sr;\n    si = -si;\n  }\n  const zs = (1 - 4 ** -P.zoom) / 0.75;\n  P.cx = ((P.mr - sr) / 2) * zs;\n  P.cy = P.mi / 2 + ((P.mi - si) / 2 - P.mi / 2) * zs;\n  P.scroll = (P.scroll + (d * sp * 2.5) / P.uz) % 2;\n  const b = input.btnPressed || [];\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 14 ? -1 : P.wave + d * 2.2;\n}\n\n// One point z = x + iy through Jos Leys's escape algorithm for the Maskit\n// group a(z) = mu + 1/z, b(z) = z + 2. Each step wraps z into the strip of b\n// (sheared along mu), turns it half round about mu/2 if it lies above the\n// separation line (that half turn maps the limit set onto itself and swaps a\n// with its inverse), then applies a. It stops when z leaves the strip\n// 0 \u003c Im z \u003c Im mu (it was in a pearl, a disc that some word of the group\n// sends onto a half-plane), or falls into a 2-cycle (it is in the invariant\n// component, or in one of the discs it pinches into at a cusp). OUT holds\n// the kind, the step count and a distance to the limit set in plane units.\nconst OUT = new Float64Array(3);\n// 1 - e^-v in steps of 1/32 up to v = 12, for the separation line.\nconst SEP = new Float64Array(385);\nfor (let j = 0; j \u003c 385; j++) SEP[j] = 1 - exp(-j / 32);\nfunction trace(x, y, mr, t, maxIt) {\n  if (y \u003c 0 || y > t) {\n    OUT[0] = 0;\n    OUT[1] = 0;\n    OUT[2] = y \u003c 0 ? -y : y - t;\n    return;\n  }\n  const sh = mr / t, f = mr > 0 ? -1 : mr \u003c 0 ? 1 : 0, lean = (f * (2 * t - 1.95)) / 4, kk = 7.2 - (1.95 - t) * 15, hm = mr / 2, ht = t / 2, al = abs(lean);\n  let lx = x + 9, ly = y, llx = x - 9, lly = y, der = 1;\n  for (let i = 0; i \u003c maxIt; i++) {\n    const s = x - sh * y;\n    if (s >= 1 || s \u003c -1) x -= 2 * floor((s + 1) * 0.5);\n    const u = x - hm;\n    let up = y >= ht + al;\n    if (!up && y >= ht - al) {\n      const v = kk * (u > 0 ? u : -u) * 32;\n      let sep = 1;\n      if (v \u003c 383) {\n        const j = v | 0;\n        sep = SEP[j] + (SEP[j + 1] - SEP[j]) * (v - j);\n      }\n      up = y >= ht + (u > 0 ? lean : -lean) * sep;\n    }\n    if (up) {\n      x = mr - x;\n      y = t - y;\n    }\n    const r = 1 / (x * x + y * y);\n    der *= r;\n    x = mr + x * r;\n    y = t - y * r;\n    if (y \u003c 0 || y > t) {\n      OUT[0] = 1;\n      OUT[1] = i + 1;\n      OUT[2] = (y \u003c 0 ? -y : y - t) / der;\n      return;\n    }\n    const ex = x - llx, ey = y - lly;\n    if (ex * ex + ey * ey \u003c 1e-8) {\n      // How far the cycling point lies from the nearest limit set close to\n      // the fundamental domain: the two walls and the pearls a^-1(H-) and\n      // a^2(H-) that touch them at 0 and mu. Divided by the stretch of the\n      // word that brought it there, that is the distance back where it\n      // started, to first order.\n      let s2 = x - sh * y;\n      s2 -= 2 * floor((s2 + 1) / 2);\n      x = s2 + sh * y;\n      const rr = 0.5 / t, dt2 = t - rr;\n      let dd = min(y, t - y);\n      dd = min(dd, sqrt(x * x + (y - rr) * (y - rr)) - rr, sqrt((x - mr) * (x - mr) + (y - dt2) * (y - dt2)) - rr);\n      OUT[0] = 2;\n      OUT[1] = i + 1;\n      OUT[2] = max(0, dd) / der;\n      return;\n    }\n    llx = lx;\n    lly = ly;\n    lx = x;\n    ly = y;\n  }\n  OUT[0] = 3;\n  OUT[1] = maxIt;\n  OUT[2] = 0;\n}\n\n// Colours: 0..31 the invariant component by step count, 32..63 the pearls\n// by generation.\nfunction palette(P) {\n  const pal = P.pal, h = P.hue + 0.6;\n  for (let i = 0; i \u003c 32; i++) {\n    const u = i / 31;\n    // A dark orange or olive reads as brown, so the discs lift their light\n    // where the hue passes through them and turn gold instead.\n    let hh = h + 0.07 * u * u;\n    hh -= floor(hh);\n    const lift = max(0, 1 - abs(hh - 0.1) / 0.16);\n    hsv(hh, 0.85 - 0.3 * u * u, 0.2 + 0.5 * u * u + 0.5 * lift * (1 - u * u), pal, i * 3);\n    // Generation 1 teal, then cyan, sky, lavender and pink, paler as they\n    // shrink.\n    const g = min(i, 6) / 6;\n    hsv(h - 0.12 + 0.36 * g, 0.72 - 0.32 * g, 0.72 + 0.24 * g, pal, (32 + i) * 3);\n  }\n  P.palHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const buf = P.buf, pal = P.pal, mr = P.mr, t = P.mi;\n  const uz = P.uz, su = 1 / uz, maxIt = 40 + ((40 * P.zoom) | 0);\n  const y0 = P.cy - (W / 2) * su, x0 = P.cx - P.scroll - (H / 2) * su;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const x = x0 + (py + 0.5) * su;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      trace(x, y0 + (px + 0.5) * su, mr, t, maxIt);\n      const kind = OUT[0], n = OUT[1], de = OUT[2] * uz;\n      let r, g, b;\n      if (kind === 0) {\n        r = 0.02;\n        g = 0.02;\n        b = 0.05;\n      } else if (kind === 1) {\n        const o = (32 + min(n - 1, 31)) * 3;\n        // A pearl is a little darker at its rim, so neighbours part.\n        const v = 0.55 + 0.45 * min(1, de / 2.5);\n        r = pal[o] * v;\n        g = pal[o + 1] * v;\n        b = pal[o + 2] * v;\n        if (P.wave >= 0) {\n          const dw = P.wave - n, fl = exp(-dw * dw * 2) * 0.8;\n          r += (1 - r) * fl;\n          g += (1 - g) * fl;\n          b += (1 - b) * fl;\n        }\n      } else if (kind === 2) {\n        // The invariant component glows in from the limit set, about five\n        // LEDs deep, over a dark core.\n        const o = min(31, (31 * exp(-de / 5)) | 0) * 3;\n        r = pal[o];\n        g = pal[o + 1];\n        b = pal[o + 2];\n      } else {\n        r = 0.7;\n        g = 0.72;\n        b = 0.8;\n      }\n      // The limit set: a white line a LED or so wide wherever the distance\n      // to it is under a LED.\n      if (kind !== 3) {\n        const w = 0.92 * exp(-de * de * 2.4);\n        r += (0.92 - r) * w;\n        g += (0.94 - g) * w;\n        b += (1 - b) * w;\n      }\n      buf[p] = r * 255;\n      buf[p + 1] = g * 255;\n      buf[p + 2] = b * 255;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-indras-pearls","type":"code","name":"indras-pearls","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Indra's Pearls\n// Family:  geometry\n// Idea:    The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: limit set of a Kleinian group (Henri Poincaré, 1883), the Maskit slice as drawn in Indra's Pearls (David Mumford, Caroline Series and David Wright, 2002), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal.\n// Knob 2: Speed. At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower.\n// Knob 3: Shape. Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall.\n// Knob 4: Zoom. Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past.\n// Buttons: K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Cusps of the Maskit slice, mu = Re + i Im, from the cusp 0/1 at 2i to 1/2.\n// Each is the root of tr W_p/q(mu) = 2 with the largest imaginary part,\n// found by the Farey recursion on traces (tr a = -i mu, tr b = 2,\n// tr ab = -i mu - 2i). Between two of them the slice's edge dips well below\n// the chord, so mu on the chord, or a little above, stays inside the slice.\nconst CUSP = [\n  [0, 2], [-0.0216, 1.9374], [-0.0363, 1.9134], [-0.0674, 1.8745], [-0.1427, 1.8103],\n  [-0.2201, 1.7667], [-0.3522, 1.7214], [-0.5812, 1.6939], [-1, 1.7321],\n];\nconst NC = CUSP.length - 1;\n\n// The strip 0 \u003c Im z \u003c Im mu spans this many of the 64 columns at Zoom 0,\n// which leaves three LEDs on each side for the dark half-planes. Im mu runs\n// from 1.69 to 2.06, so that is 28 to 34 LEDs per unit of the plane.\nconst SPAN = 58;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    scroll: 0, ph: 0, sw: 0, hue: 0, shape: 0, zoom: 0.06, wave: -1,\n    mr: 0, mi: 2, uz: SPAN / 2, cx: 0, cy: 1, buf: new Float32Array(N * 3), pal: new Float32Array(64 * 3), palHue: -1,\n  };\n}\n\n// mu for a place c on the cusp chain (0..NC, and negative for its mirror,\n// Re mu -> -Re mu, which the slice shares) lifted by l into the slice.\nfunction muAt(c, l, P) {\n  const m = c \u003c 0 ? -1 : 1;\n  c = min(abs(c), NC);\n  const i = min(floor(c), NC - 1), f = c - i;\n  P.mr = m * (CUSP[i][0] + (CUSP[i + 1][0] - CUSP[i][0]) * f);\n  P.mi = CUSP[i][1] + (CUSP[i + 1][1] - CUSP[i][1]) * f + l;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.shape = cl(k[2], 0, 1);\n  P.zoom = cl(k[3], 0, 1);\n  P.ph += d * sp * 0.05;\n  P.sw += d * sp * 0.03;\n  // The lift above the cusp chain breathes between 0, where the chain\n  // pinches into tangent discs, and 0.06, where the invariant component\n  // opens into one winding band, every ten seconds at Speed 2. Over about\n  // seventeen seconds mu also swings along the chain and back: at Shape 0\n  // from the cusp 1/10 through 2i to its mirror image, so the spirals at the\n  // necks wind up one way, unwind and wind up the other way.\n  const lift = 0.06 * (0.5 - 0.5 * Math.cos(P.ph * 2 * PI)) ** 1.5;\n  const c = P.shape * NC + Math.sin(P.sw * 2 * PI) * (1.9 - 1.1 * P.shape);\n  muAt(c, lift, P);\n  // LEDs per unit of the plane, and the slide: five LEDs a second at Speed 2\n  // at any zoom. The picture repeats every 2 along Re z.\n  P.uz = (SPAN / P.mi) * 4 ** P.zoom;\n  // The zoom closes in on a fixed point of a, (mu - sqrt(mu^2 + 4)) / 2, the\n  // one in the lower half of the strip. It lies on the limit set at a neck\n  // of the chain, where the small pearls spiral in; the slide carries it\n  // through the middle of the view once a period.\n  const ar = P.mr * P.mr - P.mi * P.mi + 4, ai = 2 * P.mr * P.mi, am = sqrt(ar * ar + ai * ai);\n  let sr = sqrt(max(0, (am + ar) / 2)), si = sqrt(max(0, (am - ar) / 2));\n  if (ai \u003c 0) si = -si;\n  if (si \u003c 0) {\n    sr = -sr;\n    si = -si;\n  }\n  const zs = (1 - 4 ** -P.zoom) / 0.75;\n  P.cx = ((P.mr - sr) / 2) * zs;\n  P.cy = P.mi / 2 + ((P.mi - si) / 2 - P.mi / 2) * zs;\n  P.scroll = (P.scroll + (d * sp * 2.5) / P.uz) % 2;\n  const b = input.btnPressed || [];\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 14 ? -1 : P.wave + d * 2.2;\n}\n\n// One point z = x + iy through Jos Leys's escape algorithm for the Maskit\n// group a(z) = mu + 1/z, b(z) = z + 2. Each step wraps z into the strip of b\n// (sheared along mu), turns it half round about mu/2 if it lies above the\n// separation line (that half turn maps the limit set onto itself and swaps a\n// with its inverse), then applies a. It stops when z leaves the strip\n// 0 \u003c Im z \u003c Im mu (it was in a pearl, a disc that some word of the group\n// sends onto a half-plane), or falls into a 2-cycle (it is in the invariant\n// component, or in one of the discs it pinches into at a cusp). OUT holds\n// the kind, the step count and a distance to the limit set in plane units.\nconst OUT = new Float64Array(3);\n// 1 - e^-v in steps of 1/32 up to v = 12, for the separation line.\nconst SEP = new Float64Array(385);\nfor (let j = 0; j \u003c 385; j++) SEP[j] = 1 - exp(-j / 32);\nfunction trace(x, y, mr, t, maxIt) {\n  if (y \u003c 0 || y > t) {\n    OUT[0] = 0;\n    OUT[1] = 0;\n    OUT[2] = y \u003c 0 ? -y : y - t;\n    return;\n  }\n  const sh = mr / t, f = mr > 0 ? -1 : mr \u003c 0 ? 1 : 0, lean = (f * (2 * t - 1.95)) / 4, kk = 7.2 - (1.95 - t) * 15, hm = mr / 2, ht = t / 2, al = abs(lean);\n  let lx = x + 9, ly = y, llx = x - 9, lly = y, der = 1;\n  for (let i = 0; i \u003c maxIt; i++) {\n    const s = x - sh * y;\n    if (s >= 1 || s \u003c -1) x -= 2 * floor((s + 1) * 0.5);\n    const u = x - hm;\n    let up = y >= ht + al;\n    if (!up && y >= ht - al) {\n      const v = kk * (u > 0 ? u : -u) * 32;\n      let sep = 1;\n      if (v \u003c 383) {\n        const j = v | 0;\n        sep = SEP[j] + (SEP[j + 1] - SEP[j]) * (v - j);\n      }\n      up = y >= ht + (u > 0 ? lean : -lean) * sep;\n    }\n    if (up) {\n      x = mr - x;\n      y = t - y;\n    }\n    const r = 1 / (x * x + y * y);\n    der *= r;\n    x = mr + x * r;\n    y = t - y * r;\n    if (y \u003c 0 || y > t) {\n      OUT[0] = 1;\n      OUT[1] = i + 1;\n      OUT[2] = (y \u003c 0 ? -y : y - t) / der;\n      return;\n    }\n    const ex = x - llx, ey = y - lly;\n    if (ex * ex + ey * ey \u003c 1e-8) {\n      // How far the cycling point lies from the nearest limit set close to\n      // the fundamental domain: the two walls and the pearls a^-1(H-) and\n      // a^2(H-) that touch them at 0 and mu. Divided by the stretch of the\n      // word that brought it there, that is the distance back where it\n      // started, to first order.\n      let s2 = x - sh * y;\n      s2 -= 2 * floor((s2 + 1) / 2);\n      x = s2 + sh * y;\n      const rr = 0.5 / t, dt2 = t - rr;\n      let dd = min(y, t - y);\n      dd = min(dd, sqrt(x * x + (y - rr) * (y - rr)) - rr, sqrt((x - mr) * (x - mr) + (y - dt2) * (y - dt2)) - rr);\n      OUT[0] = 2;\n      OUT[1] = i + 1;\n      OUT[2] = max(0, dd) / der;\n      return;\n    }\n    llx = lx;\n    lly = ly;\n    lx = x;\n    ly = y;\n  }\n  OUT[0] = 3;\n  OUT[1] = maxIt;\n  OUT[2] = 0;\n}\n\n// Colours: 0..31 the invariant component by step count, 32..63 the pearls\n// by generation.\nfunction palette(P) {\n  const pal = P.pal, h = P.hue + 0.6;\n  for (let i = 0; i \u003c 32; i++) {\n    const u = i / 31;\n    // A dark orange or olive reads as brown, so the discs lift their light\n    // where the hue passes through them and turn gold instead.\n    let hh = h + 0.07 * u * u;\n    hh -= floor(hh);\n    const lift = max(0, 1 - abs(hh - 0.1) / 0.16);\n    hsv(hh, 0.85 - 0.3 * u * u, 0.2 + 0.5 * u * u + 0.5 * lift * (1 - u * u), pal, i * 3);\n    // Generation 1 teal, then cyan, sky, lavender and pink, paler as they\n    // shrink.\n    const g = min(i, 6) / 6;\n    hsv(h - 0.12 + 0.36 * g, 0.72 - 0.32 * g, 0.72 + 0.24 * g, pal, (32 + i) * 3);\n  }\n  P.palHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const buf = P.buf, pal = P.pal, mr = P.mr, t = P.mi;\n  const uz = P.uz, su = 1 / uz, maxIt = 40 + ((40 * P.zoom) | 0);\n  const y0 = P.cy - (W / 2) * su, x0 = P.cx - P.scroll - (H / 2) * su;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const x = x0 + (py + 0.5) * su;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      trace(x, y0 + (px + 0.5) * su, mr, t, maxIt);\n      const kind = OUT[0], n = OUT[1], de = OUT[2] * uz;\n      let r, g, b;\n      if (kind === 0) {\n        r = 0.02;\n        g = 0.02;\n        b = 0.05;\n      } else if (kind === 1) {\n        const o = (32 + min(n - 1, 31)) * 3;\n        // A pearl is a little darker at its rim, so neighbours part.\n        const v = 0.55 + 0.45 * min(1, de / 2.5);\n        r = pal[o] * v;\n        g = pal[o + 1] * v;\n        b = pal[o + 2] * v;\n        if (P.wave >= 0) {\n          const dw = P.wave - n, fl = exp(-dw * dw * 2) * 0.8;\n          r += (1 - r) * fl;\n          g += (1 - g) * fl;\n          b += (1 - b) * fl;\n        }\n      } else if (kind === 2) {\n        // The invariant component glows in from the limit set, about five\n        // LEDs deep, over a dark core.\n        const o = min(31, (31 * exp(-de / 5)) | 0) * 3;\n        r = pal[o];\n        g = pal[o + 1];\n        b = pal[o + 2];\n      } else {\n        r = 0.7;\n        g = 0.72;\n        b = 0.8;\n      }\n      // The limit set: a white line a LED or so wide wherever the distance\n      // to it is under a LED.\n      if (kind !== 3) {\n        const w = 0.92 * exp(-de * de * 2.4);\n        r += (0.92 - r) * w;\n        g += (0.94 - g) * w;\n        b += (1 - b) * w;\n      }\n      buf[p] = r * 255;\n      buf[p + 1] = g * 255;\n      buf[p + 2] = b * 255;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower."},{"name":"Shape","min":0,"max":1,"about":"Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall."},{"name":"Zoom","min":0,"max":1,"about":"Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past."}],"start":[0,2,0,0.06],"measures":{"motion":0.5032,"detail":0.058,"edges":0.429,"complexity":0.897,"coverage":1,"colour":0.18,"drift":0.2157},"knobResponse":[0.3262,0.2178,0.2586,0.2575]},{"slug":"infinity-series","title":"Infinity Series","family":"rhythm","round":38,"note":"페르 뇌르고르의 무한 수열이 네 줄 피아노 롤에 한 박에 1, 2, 4, 8음으로 떨어져 타격선에 닿아요. 박마다 네 줄이 함께 닿는데, 4음 줄은 1음 줄과 같은 음에, 2음과 8음 줄은 그 거울상에 닿아요. K3 은 한 박의 줄 수를 8 에서 40 으로 늘려 음을 길게 펴고, K4 는 수열의 더 먼 자리에서 시작해요.","idea":"Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Infinity Series\n// Family:  rhythm\n// Idea:    Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Per Nørgård's infinity series (1959), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1\n//\n// Knob 1: Hue. Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white.\n// Knob 2: Speed. The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start.\n// Knob 3: Beat. Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five.\n// Knob 4: Start. Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge.\n\nconst W = 64, H = 128;\n// Lanes: four, 16 columns each; pitches -7..7 on columns 0..14 of the lane,\n// pitch 0 on column 7, column 15 dark between lanes.\nconst LANES = 4, LW = 16, PMAX = 7, RATE = [1, 2, 4, 8];\n// The strike line: notes fall onto row SY and fade out below it.\nconst SY = 104;\n// Brightness of the held note on the beat behind the faster lanes.\nconst HOLD = 0.34;\nconst NA = 1 \u003c\u003c 16;\nconst { floor, min, max, abs, round, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The series: a(0) = 0, a(2n) = -a(n), a(2n + 1) = a(n) + 1.\nconst A = new Int8Array(NA);\nfor (let n = 1; n \u003c NA; n++) A[n] = n & 1 ? A[n >> 1] + 1 : -A[n >> 1];\nconst ser = (n) => A[((n % NA) + NA) % NA];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, beat: 0, start: 0, speed: 2, rpb: 8, hue: 0,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    up: [0, 0, 0], dn: [0, 0, 0], upOff: [0, 0, 0], dnOff: [0, 0, 0], upHold: [0, 0, 0], dnHold: [0, 0, 0], warm: [0, 0],\n  };\n}\n\nfunction startBeat(k) {\n  // Up to 0.06 note 0; above, beat 16 to 496 in steps of 16.\n  const u = cl(k, 0, 1);\n  return u \u003c= 0.06 ? 0 : 16 * max(1, round(((u - 0.06) / 0.94) * 31));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rpb = 8 * cl(round(cl(k[2], 8, 40) / 8), 1, 5);\n  const st = startBeat(k[3]);\n  // The roll opens with the start beat 1.5 beats above the strike line; a\n  // new Start jumps there.\n  if (!S.init || st !== S.start) {\n    S.start = st;\n    S.beat = st - 1.5;\n    S.init = true;\n  }\n  S.beat += d * S.speed;\n  // After 512 beats the roll goes back to its start, so the fastest lane\n  // reads no further than note 8 x 1008 = 8064, and no more than one note in\n  // 30 lies past seven steps from the middle.\n  if (S.beat > S.start + 512) S.beat -= 512 + 1.5;\n}\n\n// Adds light to one LED; the dark column between lanes stays dark.\nfunction add(S, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0 || (x & 15) === 15) return;\n  const p = y * W + x;\n  S.R[p] += c[0] * v;\n  S.G[p] += c[1] * v;\n  S.B[p] += c[2] * v;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { R, G, B, up, dn, upOff, dnOff, upHold, dnHold, warm } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The melody as it is, the melody upside down, and the notes between beats.\n  hsv(S.hue + 0.57, 0.8, 1, up);\n  hsv(S.hue + 0.93, 0.62, 1, dn);\n  // How far each colour is into orange or yellow, 0 to 1. Those are lifted\n  // toward white so they read amber or butter, not brown or olive, most of\n  // all in the dim held notes.\n  [up, dn].forEach((c, i) => {\n    const w = cl(2.5 * (min(c[0], c[1]) - c[2]), 0, 1);\n    warm[i] = w;\n    for (let j = 0; j \u003c 3; j++) c[j] = c[j] + (1 - c[j]) * 0.3 * w;\n  });\n  for (let j = 0; j \u003c 3; j++) {\n    // The notes between the beats: the lane's colour taken 55% toward white.\n    upOff[j] = 0.55 + 0.45 * up[j];\n    dnOff[j] = 0.55 + 0.45 * dn[j];\n    // The held notes: the colour itself, or up to 45% toward white and 1.6\n    // times as bright in orange and yellow.\n    upHold[j] = (up[j] + (1 - up[j]) * 0.45 * warm[0]) * HOLD * (1 + 0.6 * warm[0]);\n    dnHold[j] = (dn[j] + (1 - dn[j]) * 0.45 * warm[1]) * HOLD * (1 + 0.6 * warm[1]);\n  }\n  const T = S.beat, rpb = S.rpb, white = [1, 1, 1];\n\n  // Guides: each lane's pitch 0, the mirror line, and a line on every beat.\n  const grey = [0.55, 0.6, 0.75];\n  for (let l = 0; l \u003c LANES; l++) for (let y = 0; y \u003c H; y++) add(S, l * LW + PMAX, y, grey, 0.1);\n  const b0 = floor(T - (H - SY) / rpb) - 1, b1 = floor(T + SY / rpb) + 1;\n  for (let b = b0; b \u003c= b1; b++) {\n    const y = round(SY - (b - T) * rpb);\n    for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, y, grey, 0.13);\n  }\n\n  for (let l = 0; l \u003c LANES; l++) {\n    const s = RATE[l], x0 = l * LW, len = rpb / s;\n    // Notes on the beat in this lane play +a(m) (rates 1, 4) or -a(m) (2, 8).\n    const onC = l & 1 ? dn : up, offC = l & 1 ? dnOff : upOff, holdC = l & 1 ? dnHold : upHold, lw = warm[l & 1];\n    // Behind the lane's own notes, each note on the beat is held dim for the\n    // whole beat: the series read at the lane's step, which lands on lane\n    // 1's note in the lanes of 4 and on its mirror image in the lanes of 2\n    // and 8.\n    if (s > 1)\n      for (let m = max(0, b0); m \u003c= b1; m++) {\n        const a = ser(s * m), px = x0 + PMAX + cl(a, -PMAX, PMAX), yb = SY - (m - T) * rpb;\n        const ye = round(yb);\n        for (let y = ye - rpb + 1; y \u003c ye; y++) {\n          if (y \u003c 0 || y >= H) continue;\n          const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n          add(S, px, y, holdC, fade);\n          add(S, px - 1, y, holdC, 0.75 * fade);\n          add(S, px + 1, y, holdC, 0.75 * fade);\n        }\n      }\n    const n0 = floor((T - (H - SY) / rpb) * s) - 1, n1 = floor((T + SY / rpb) * s) + 1;\n    for (let n = max(0, n0); n \u003c= n1; n++) {\n      const a = ser(n), px = x0 + PMAX + cl(a, -PMAX, PMAX), on = n % s === 0;\n      // Rows the note covers: its onset at the bottom, the next onset at the top.\n      const yb = SY - (n / s - T) * rpb, yt = yb - len;\n      const gap = len >= 3 ? 1 : 0;\n      const c = on ? onC : offC, core = on ? 0.95 : 0.42 * (1 + 0.4 * lw), side = on ? 0.7 : 0.2 * (1 + 0.4 * lw);\n      const clip = abs(a) > PMAX ? 0.55 : 1;\n      // How long since this note struck, in beats: a flash that dies in about\n      // a sixth of a beat, longer for a downbeat.\n      const age = T - n / s, flash = age >= 0 && age \u003c 1 ? exp(-age * (on ? 9 : 16)) : 0;\n      // Rows are rounded at both ends, so a note of one row never drops out.\n      const ye = round(yb);\n      for (let y = round(yt) + gap; y \u003c ye; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        // Below the strike line the note has sounded and fades out.\n        const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n        const lit = (y >= SY - 2 ? 1 + 1.6 * flash : 1) * fade * clip;\n        add(S, px, y, c, core * lit);\n        add(S, px - 1, y, c, side * lit);\n        add(S, px + 1, y, c, side * lit);\n        if (y >= SY - 2 && flash > 0) add(S, px, y, white, 0.5 * flash * fade);\n      }\n      // The struck key on the strike line, and its glow on either side.\n      if (flash > 0) {\n        for (let dx = -2; dx \u003c= 2; dx++) {\n          const g = (on ? 1 : 0.5) * flash * (dx === 0 ? 1 : abs(dx) === 1 ? 0.55 : 0.2);\n          add(S, px + dx, SY, white, 0.5 * g);\n          add(S, px + dx, SY, c, 0.8 * g);\n          add(S, px + dx, SY + 1, c, 0.35 * g);\n        }\n      }\n    }\n  }\n\n  // The strike line itself, a dim rule across each lane.\n  for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, SY, grey, 0.16);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","layer":{"id":"layer-infinity-series","type":"code","name":"infinity-series","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Infinity Series\n// Family:  rhythm\n// Idea:    Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Per Nørgård's infinity series (1959), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1\n//\n// Knob 1: Hue. Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white.\n// Knob 2: Speed. The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start.\n// Knob 3: Beat. Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five.\n// Knob 4: Start. Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge.\n\nconst W = 64, H = 128;\n// Lanes: four, 16 columns each; pitches -7..7 on columns 0..14 of the lane,\n// pitch 0 on column 7, column 15 dark between lanes.\nconst LANES = 4, LW = 16, PMAX = 7, RATE = [1, 2, 4, 8];\n// The strike line: notes fall onto row SY and fade out below it.\nconst SY = 104;\n// Brightness of the held note on the beat behind the faster lanes.\nconst HOLD = 0.34;\nconst NA = 1 \u003c\u003c 16;\nconst { floor, min, max, abs, round, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The series: a(0) = 0, a(2n) = -a(n), a(2n + 1) = a(n) + 1.\nconst A = new Int8Array(NA);\nfor (let n = 1; n \u003c NA; n++) A[n] = n & 1 ? A[n >> 1] + 1 : -A[n >> 1];\nconst ser = (n) => A[((n % NA) + NA) % NA];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, beat: 0, start: 0, speed: 2, rpb: 8, hue: 0,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    up: [0, 0, 0], dn: [0, 0, 0], upOff: [0, 0, 0], dnOff: [0, 0, 0], upHold: [0, 0, 0], dnHold: [0, 0, 0], warm: [0, 0],\n  };\n}\n\nfunction startBeat(k) {\n  // Up to 0.06 note 0; above, beat 16 to 496 in steps of 16.\n  const u = cl(k, 0, 1);\n  return u \u003c= 0.06 ? 0 : 16 * max(1, round(((u - 0.06) / 0.94) * 31));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rpb = 8 * cl(round(cl(k[2], 8, 40) / 8), 1, 5);\n  const st = startBeat(k[3]);\n  // The roll opens with the start beat 1.5 beats above the strike line; a\n  // new Start jumps there.\n  if (!S.init || st !== S.start) {\n    S.start = st;\n    S.beat = st - 1.5;\n    S.init = true;\n  }\n  S.beat += d * S.speed;\n  // After 512 beats the roll goes back to its start, so the fastest lane\n  // reads no further than note 8 x 1008 = 8064, and no more than one note in\n  // 30 lies past seven steps from the middle.\n  if (S.beat > S.start + 512) S.beat -= 512 + 1.5;\n}\n\n// Adds light to one LED; the dark column between lanes stays dark.\nfunction add(S, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0 || (x & 15) === 15) return;\n  const p = y * W + x;\n  S.R[p] += c[0] * v;\n  S.G[p] += c[1] * v;\n  S.B[p] += c[2] * v;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { R, G, B, up, dn, upOff, dnOff, upHold, dnHold, warm } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The melody as it is, the melody upside down, and the notes between beats.\n  hsv(S.hue + 0.57, 0.8, 1, up);\n  hsv(S.hue + 0.93, 0.62, 1, dn);\n  // How far each colour is into orange or yellow, 0 to 1. Those are lifted\n  // toward white so they read amber or butter, not brown or olive, most of\n  // all in the dim held notes.\n  [up, dn].forEach((c, i) => {\n    const w = cl(2.5 * (min(c[0], c[1]) - c[2]), 0, 1);\n    warm[i] = w;\n    for (let j = 0; j \u003c 3; j++) c[j] = c[j] + (1 - c[j]) * 0.3 * w;\n  });\n  for (let j = 0; j \u003c 3; j++) {\n    // The notes between the beats: the lane's colour taken 55% toward white.\n    upOff[j] = 0.55 + 0.45 * up[j];\n    dnOff[j] = 0.55 + 0.45 * dn[j];\n    // The held notes: the colour itself, or up to 45% toward white and 1.6\n    // times as bright in orange and yellow.\n    upHold[j] = (up[j] + (1 - up[j]) * 0.45 * warm[0]) * HOLD * (1 + 0.6 * warm[0]);\n    dnHold[j] = (dn[j] + (1 - dn[j]) * 0.45 * warm[1]) * HOLD * (1 + 0.6 * warm[1]);\n  }\n  const T = S.beat, rpb = S.rpb, white = [1, 1, 1];\n\n  // Guides: each lane's pitch 0, the mirror line, and a line on every beat.\n  const grey = [0.55, 0.6, 0.75];\n  for (let l = 0; l \u003c LANES; l++) for (let y = 0; y \u003c H; y++) add(S, l * LW + PMAX, y, grey, 0.1);\n  const b0 = floor(T - (H - SY) / rpb) - 1, b1 = floor(T + SY / rpb) + 1;\n  for (let b = b0; b \u003c= b1; b++) {\n    const y = round(SY - (b - T) * rpb);\n    for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, y, grey, 0.13);\n  }\n\n  for (let l = 0; l \u003c LANES; l++) {\n    const s = RATE[l], x0 = l * LW, len = rpb / s;\n    // Notes on the beat in this lane play +a(m) (rates 1, 4) or -a(m) (2, 8).\n    const onC = l & 1 ? dn : up, offC = l & 1 ? dnOff : upOff, holdC = l & 1 ? dnHold : upHold, lw = warm[l & 1];\n    // Behind the lane's own notes, each note on the beat is held dim for the\n    // whole beat: the series read at the lane's step, which lands on lane\n    // 1's note in the lanes of 4 and on its mirror image in the lanes of 2\n    // and 8.\n    if (s > 1)\n      for (let m = max(0, b0); m \u003c= b1; m++) {\n        const a = ser(s * m), px = x0 + PMAX + cl(a, -PMAX, PMAX), yb = SY - (m - T) * rpb;\n        const ye = round(yb);\n        for (let y = ye - rpb + 1; y \u003c ye; y++) {\n          if (y \u003c 0 || y >= H) continue;\n          const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n          add(S, px, y, holdC, fade);\n          add(S, px - 1, y, holdC, 0.75 * fade);\n          add(S, px + 1, y, holdC, 0.75 * fade);\n        }\n      }\n    const n0 = floor((T - (H - SY) / rpb) * s) - 1, n1 = floor((T + SY / rpb) * s) + 1;\n    for (let n = max(0, n0); n \u003c= n1; n++) {\n      const a = ser(n), px = x0 + PMAX + cl(a, -PMAX, PMAX), on = n % s === 0;\n      // Rows the note covers: its onset at the bottom, the next onset at the top.\n      const yb = SY - (n / s - T) * rpb, yt = yb - len;\n      const gap = len >= 3 ? 1 : 0;\n      const c = on ? onC : offC, core = on ? 0.95 : 0.42 * (1 + 0.4 * lw), side = on ? 0.7 : 0.2 * (1 + 0.4 * lw);\n      const clip = abs(a) > PMAX ? 0.55 : 1;\n      // How long since this note struck, in beats: a flash that dies in about\n      // a sixth of a beat, longer for a downbeat.\n      const age = T - n / s, flash = age >= 0 && age \u003c 1 ? exp(-age * (on ? 9 : 16)) : 0;\n      // Rows are rounded at both ends, so a note of one row never drops out.\n      const ye = round(yb);\n      for (let y = round(yt) + gap; y \u003c ye; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        // Below the strike line the note has sounded and fades out.\n        const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n        const lit = (y >= SY - 2 ? 1 + 1.6 * flash : 1) * fade * clip;\n        add(S, px, y, c, core * lit);\n        add(S, px - 1, y, c, side * lit);\n        add(S, px + 1, y, c, side * lit);\n        if (y >= SY - 2 && flash > 0) add(S, px, y, white, 0.5 * flash * fade);\n      }\n      // The struck key on the strike line, and its glow on either side.\n      if (flash > 0) {\n        for (let dx = -2; dx \u003c= 2; dx++) {\n          const g = (on ? 1 : 0.5) * flash * (dx === 0 ? 1 : abs(dx) === 1 ? 0.55 : 0.2);\n          add(S, px + dx, SY, white, 0.5 * g);\n          add(S, px + dx, SY, c, 0.8 * g);\n          add(S, px + dx, SY + 1, c, 0.35 * g);\n        }\n      }\n    }\n  }\n\n  // The strike line itself, a dim rule across each lane.\n  for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, SY, grey, 0.16);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white."},{"name":"Speed","min":0.2,"max":3,"about":"The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start."},{"name":"Beat","min":8,"max":40,"about":"Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five."},{"name":"Start","min":0,"max":1,"about":"Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge."}],"start":[0,2,8,0.06],"measures":{"motion":1.2502,"detail":0.083,"edges":0.4948,"complexity":0.2954,"coverage":0.3381,"colour":0.176,"drift":0.0581},"knobResponse":[0.067,0.12,0.1058,0.141]},{"slug":"invasion-percolation","title":"Invasion Percolation","family":"sim","round":32,"note":"바닥 가운데 한 칸으로 들어온 침입 유체가 경계에서 문턱이 가장 낮은 칸을 하나씩 차지하며 위로 자라요. 차지한 차례대로 청록에서 보라로 물들고, 맨 윗줄과 끊겨 갇힌 방어 유체는 장미색으로 굳어요. 맨 윗줄에 닿으면 입구에서 거기까지 가장 짧은 통로가 금색으로 켜지고 새 문턱으로 다시 시작해요.","idea":"Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.","buttons":"K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.","code":"// ===== Patternflow pattern =====\n// Title:   Invasion Percolation\n// Family:  sim\n// Idea:    Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: invasion percolation (David Wilkinson and Jorge Willemsen, 1983), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold.\n// Knob 2: Speed. How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst.\n// Knob 3: Gravity. Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100.\n// Knob 4: Grain. How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes.\n// Buttons: K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.\n\nconst W = 64, H = 128, N = W * H, OUT = N, BIG = 1 \u003c\u003c 30;\nconst { floor, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Threshold tilt from bottom to top at Gravity 1.\nconst GA = 0.7;\n// Seconds the finished cluster stands, its channel lighting in the first 0.6.\nconst HOLD = 1.1;\n// Site percolation threshold of the square lattice (Newman and Ziff, 2000).\n// Of the thresholds the invader takes, 0.4 to 2 in a hundred lie above it.\nconst PC = 0.592746;\nconst JUMP = 17;\nconst INLET = N - W + (W >> 1);\n\n// The normal distribution function, after Abramowitz and Stegun 7.1.26.\nfunction phi(z) {\n  const x = Math.abs(z) / Math.SQRT2, t = 1 / (1 + 0.3275911 * x);\n  const e = 1 - ((((1.061405429 * t - 1.453152027) * t + 1.421413741) * t - 0.284496736) * t + 0.254829592) * t * exp(-x * x);\n  return z \u003c 0 ? 0.5 - 0.5 * e : 0.5 + 0.5 * e;\n}\n\n// Three box blurs of radius 2, across and then down: close to a Gaussian of\n// 2.45 cells.\nfunction blur(a, b) {\n  for (let pass = 0; pass \u003c 6; pass++) {\n    const across = pass % 2 === 0;\n    for (let i = 0; i \u003c N; i++) {\n      const x = i % W, y = (i / W) | 0;\n      let s = 0, n = 0;\n      for (let d = -2; d \u003c= 2; d++) {\n        const xx = across ? x + d : x, yy = across ? y : y + d;\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) (s += a[yy * W + xx]), n++;\n      }\n      b[i] = s / n;\n    }\n    a.set(b);\n  }\n}\n\n// Thresholds: white Gaussian noise mixed with its own blur by Grain, then\n// sent through the normal distribution function, so every cell's threshold\n// is uniform on [0, 1) whatever the grain and only the correlation changes.\nfunction field(P) {\n  const { r, g0, g1 } = P, a = P.grain, b = Math.sqrt(1 - a * a);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const v = b * g0[i] + a * g1[i];\n    r[i] = v;\n    m += v;\n    q += v * v;\n  }\n  m /= N;\n  const sd = Math.sqrt(Math.max(q / N - m * m, 1e-12));\n  for (let i = 0; i \u003c N; i++) r[i] = phi((r[i] - m) / sd);\n}\n\nfunction lattice(P) {\n  const { g0, g1 } = P;\n  for (let i = 0; i \u003c N; i++) g0[i] = Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n  g1.set(g0);\n  blur(g1, P.re);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) (m += g1[i]), (q += g1[i] * g1[i]);\n  m /= N;\n  const sd = Math.sqrt(q / N - m * m);\n  for (let i = 0; i \u003c N; i++) g1[i] = (g1[i] - m) / sd;\n  P.grain = NaN;\n  P.k = 0;\n  P.K = 0;\n  P.budget = 0;\n  P.hold = -1;\n  P.ord.fill(-1);\n  P.trap.fill(BIG);\n  P.path.fill(-1);\n  P.pathLen = 0;\n  P.grav = NaN;\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N + 1), I = () => new Int32Array(N + 1);\n  params.s = {\n    r: F(), re: F(), g0: F(), g1: F(), stepT: F(), dur: F(), cr: F(), cg: F(), cb: F(), oldR: F(), oldG: F(), oldB: F(),\n    seq: I(), ord: I(), path: I(), prev: I(), trap: I(), heap: I(), tmp: I(), cnt: I(), par: I(), nxt: I(), tail: I(), size: I(), join: I(),\n    inv: new Uint8Array(N + 1), inH: new Uint8Array(N + 1), good: new Uint8Array(N + 1),\n    pathLen: 0, k: 0, K: 0, budget: 0, clock: 0, hold: -1, oldA: 0, grav: NaN, grain: NaN, hue: 0, speed: 2, flash: 0,\n  };\n  lattice(params.s);\n}\n\n// From the cells already invaded, runs invasion without trapping to the top\n// row, then walks the run backwards with union-find over the defending cells\n// to learn which steps trapping would have refused and when each pocket of\n// defender was cut off from the top row.\nfunction compute(P) {\n  const { r, re, seq, ord, trap, heap, tmp, cnt, par, nxt, tail, size, join, inv, inH, good } = P;\n  const from = P.k, g = P.grav * GA;\n  for (let i = 0; i \u003c N; i++) re[i] = r[i] - (g * (H - 1 - ((i / W) | 0))) / (H - 1);\n  inv.fill(0);\n  inH.fill(0);\n  for (let j = 0; j \u003c from; j++) inv[seq[j]] = 1;\n  for (let i = 0; i \u003c N; i++) if (!inv[i] && trap[i] > from) (trap[i] = BIG), (ord[i] = -1);\n  let n = 0;\n  const push = (i) => {\n    if (inv[i] || inH[i] || trap[i] \u003c= from) return;\n    inH[i] = 1;\n    const v = re[i];\n    let c = n++;\n    while (c > 0) {\n      const p = (c - 1) >> 1;\n      if (re[heap[p]] \u003c= v) break;\n      heap[c] = heap[p];\n      c = p;\n    }\n    heap[c] = i;\n  };\n  const pop = () => {\n    const top = heap[0], last = heap[--n], v = re[last];\n    let c = 0;\n    for (;;) {\n      let m = 2 * c + 1;\n      if (m >= n) break;\n      if (m + 1 \u003c n && re[heap[m + 1]] \u003c re[heap[m]]) m++;\n      if (re[heap[m]] >= v) break;\n      heap[c] = heap[m];\n      c = m;\n    }\n    heap[c] = last;\n    return top;\n  };\n  const around = (i, f) => {\n    const x = i % W;\n    if (x > 0) f(i - 1);\n    if (x \u003c W - 1) f(i + 1);\n    if (i >= W) f(i - W);\n    if (i \u003c N - W) f(i + W);\n  };\n  push(INLET);\n  for (let j = 0; j \u003c from; j++) around(seq[j], push);\n  let M = 0;\n  while (n > 0) {\n    const i = pop();\n    inH[i] = 0;\n    inv[i] = 2;\n    tmp[M++] = i;\n    if (i \u003c W) break;\n    around(i, push);\n  }\n\n  for (let i = 0; i \u003c= N; i++) (par[i] = i), (nxt[i] = -1), (tail[i] = i), (size[i] = 1), (join[i] = -1);\n  const find = (i) => {\n    while (par[i] !== i) (par[i] = par[par[i]]), (i = par[i]);\n    return i;\n  };\n  let t = M;\n  const unite = (a, b) => {\n    a = find(a);\n    b = find(b);\n    if (a === b) return;\n    if (b === OUT) (b = a), (a = OUT);\n    if (a === OUT) {\n      for (let m = b; m >= 0; m = nxt[m]) join[m] = t;\n      par[b] = OUT;\n      return;\n    }\n    if (size[a] \u003c size[b]) {\n      const s = a;\n      (a = b), (b = s);\n    }\n    par[b] = a;\n    size[a] += size[b];\n    nxt[tail[a]] = b;\n    tail[a] = tail[b];\n  };\n  // The defender joins across corners too: a diagonal gap between two\n  // invaded cells lets it through.\n  const around8 = (i, f) => {\n    const x = i % W, l = x > 0, rr = x \u003c W - 1;\n    if (l) f(i - 1);\n    if (rr) f(i + 1);\n    if (i >= W) {\n      f(i - W);\n      if (l) f(i - W - 1);\n      if (rr) f(i - W + 1);\n    }\n    if (i \u003c N - W) {\n      f(i + W);\n      if (l) f(i + W - 1);\n      if (rr) f(i + W + 1);\n    }\n  };\n  for (let i = 0; i \u003c N; i++) {\n    if (inv[i]) continue;\n    if (i \u003c W) unite(i, OUT);\n    around8(i, (j) => !inv[j] && unite(i, j));\n  }\n  for (t = M - 1; t >= 0; t--) {\n    const c = tmp[t];\n    inv[c] = 0;\n    if (c \u003c W) unite(c, OUT);\n    around8(c, (j) => !inv[j] && unite(c, j));\n    good[t] = find(c) === OUT ? 1 : 0;\n  }\n  let k = from;\n  for (t = 0; t \u003c M; t++) {\n    if (good[t]) (seq[k] = tmp[t]), (ord[tmp[t]] = k), k++;\n    cnt[t] = k;\n  }\n  P.K = k;\n  for (let i = 0; i \u003c N; i++) {\n    if (trap[i] !== BIG || ord[i] >= 0) continue;\n    const j = join[i];\n    if (j >= 0 && j \u003c M) trap[i] = cnt[j];\n  }\n  durations(P);\n}\n\nfunction durations(P) {\n  const { re, seq, dur } = P;\n  let s = 0;\n  for (let k = 0; k \u003c P.K; k++) {\n    dur[k] = exp(JUMP * Math.min(re[seq[k]] - PC, 0.03));\n    s += dur[k];\n  }\n  const m = P.K / Math.max(s, 1e-9);\n  for (let k = 0; k \u003c P.K; k++) dur[k] *= m;\n}\n\n// The channel the invader flows through once it breaks through: the shortest\n// path inside the cluster from the inlet to the cell that reached the top row,\n// found breadth first. Each cell on it keeps its place along the path.\nfunction channel(P) {\n  const { ord, prev, heap: queue, path, seq, K } = P;\n  prev.fill(-2);\n  const end = seq[K - 1];\n  let qh = 0, qt = 0;\n  queue[qt++] = INLET;\n  prev[INLET] = -1;\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i === end) break;\n    const x = i % W;\n    for (const j of [i - W, x > 0 ? i - 1 : -1, x \u003c W - 1 ? i + 1 : -1, i + W])\n      if (j >= 0 && j \u003c N && ord[j] >= 0 && ord[j] \u003c K && prev[j] === -2) (prev[j] = i), (queue[qt++] = j);\n  }\n  let n = 0;\n  for (let i = end; i >= 0; i = prev[i]) n++;\n  P.pathLen = n;\n  for (let i = end; i >= 0; i = prev[i]) path[i] = --n;\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  lattice(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const g = cl(kv[2], -1, 1), gr = cl(kv[3], 0, 1);\n  P.clock += d;\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  if (P.hold \u003c 0 && (g !== P.grav || gr !== P.grain)) {\n    if (gr !== P.grain) (P.grain = gr), field(P);\n    P.grav = g;\n    compute(P);\n  }\n  P.oldA *= exp(-d / 0.45);\n  P.flash *= exp(-d / 0.4);\n  if (P.hold \u003c 0) {\n    P.budget += (d * P.K * P.speed) / 11;\n    while (P.k \u003c P.K && P.budget >= P.dur[P.k]) (P.budget -= P.dur[P.k]), (P.stepT[P.k] = P.clock), P.k++;\n    if (P.k >= P.K) (P.hold = 0), (P.flash = 1), channel(P);\n  } else if ((P.hold += d) > HOLD) restart(P);\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { r, ord, trap, stepT, path, cr, cg, cb, oldR, oldG, oldB, k, K } = P;\n  const h0 = P.hue, now = P.clock, oa = P.oldA, fl = P.flash, hold = P.hold;\n  hsv(h0 + 0.13, 0.5, 1);\n  const gR = C[0], gG = C[1], gB = C[2];\n  for (let i = 0; i \u003c N; i++) {\n    const o = ord[i];\n    let R, G, B;\n    if (o >= 0 && o \u003c k) {\n      const f = o / K;\n      const age = now - stepT[o];\n      hsv(h0 + 0.45 + 0.28 * f, 0.8, 0.55 + 0.25 * f + 0.2 * fl);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-age / 0.3);\n      if (w > 0.003) (R += (1 - R) * w), (G += (1 - G) * w), (B += (0.95 - B) * w);\n      const j = path[i];\n      if (j >= 0) {\n        const u = cl(hold / 0.6 - j / P.pathLen, 0, 1);\n        if (u > 0) (R += (gR - R) * u), (G += (gG - G) * u), (B += (gB - B) * u);\n      }\n    } else if (trap[i] \u003c= k) {\n      hsv(h0 + 0.95, 0.6, 0.1 + 0.22 * (1 - r[i]));\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-(now - stepT[trap[i] - 1]) / 0.5);\n      if (w > 0.003) (R += (1 - R) * w * 0.6), (G += (0.6 - G) * w * 0.6), (B += (0.8 - B) * w * 0.6);\n    } else {\n      hsv(h0 + 0.08, 0.35, 0.035 + 0.1 * (1 - r[i]) ** 1.5);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    }\n    R *= 255;\n    G *= 255;\n    B *= 255;\n    if (oa > 0.01) (R = Math.max(R, oldR[i] * oa)), (G = Math.max(G, oldG[i] * oa)), (B = Math.max(B, oldB[i] * oa));\n    (cr[i] = R), (cg[i] = G), (cb[i] = B);\n    display.setPixel(i % W, (i / W) | 0, R, G, B);\n  }\n}\n","layer":{"id":"layer-invasion-percolation","type":"code","name":"invasion-percolation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Invasion Percolation\n// Family:  sim\n// Idea:    Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: invasion percolation (David Wilkinson and Jorge Willemsen, 1983), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold.\n// Knob 2: Speed. How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst.\n// Knob 3: Gravity. Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100.\n// Knob 4: Grain. How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes.\n// Buttons: K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.\n\nconst W = 64, H = 128, N = W * H, OUT = N, BIG = 1 \u003c\u003c 30;\nconst { floor, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Threshold tilt from bottom to top at Gravity 1.\nconst GA = 0.7;\n// Seconds the finished cluster stands, its channel lighting in the first 0.6.\nconst HOLD = 1.1;\n// Site percolation threshold of the square lattice (Newman and Ziff, 2000).\n// Of the thresholds the invader takes, 0.4 to 2 in a hundred lie above it.\nconst PC = 0.592746;\nconst JUMP = 17;\nconst INLET = N - W + (W >> 1);\n\n// The normal distribution function, after Abramowitz and Stegun 7.1.26.\nfunction phi(z) {\n  const x = Math.abs(z) / Math.SQRT2, t = 1 / (1 + 0.3275911 * x);\n  const e = 1 - ((((1.061405429 * t - 1.453152027) * t + 1.421413741) * t - 0.284496736) * t + 0.254829592) * t * exp(-x * x);\n  return z \u003c 0 ? 0.5 - 0.5 * e : 0.5 + 0.5 * e;\n}\n\n// Three box blurs of radius 2, across and then down: close to a Gaussian of\n// 2.45 cells.\nfunction blur(a, b) {\n  for (let pass = 0; pass \u003c 6; pass++) {\n    const across = pass % 2 === 0;\n    for (let i = 0; i \u003c N; i++) {\n      const x = i % W, y = (i / W) | 0;\n      let s = 0, n = 0;\n      for (let d = -2; d \u003c= 2; d++) {\n        const xx = across ? x + d : x, yy = across ? y : y + d;\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) (s += a[yy * W + xx]), n++;\n      }\n      b[i] = s / n;\n    }\n    a.set(b);\n  }\n}\n\n// Thresholds: white Gaussian noise mixed with its own blur by Grain, then\n// sent through the normal distribution function, so every cell's threshold\n// is uniform on [0, 1) whatever the grain and only the correlation changes.\nfunction field(P) {\n  const { r, g0, g1 } = P, a = P.grain, b = Math.sqrt(1 - a * a);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const v = b * g0[i] + a * g1[i];\n    r[i] = v;\n    m += v;\n    q += v * v;\n  }\n  m /= N;\n  const sd = Math.sqrt(Math.max(q / N - m * m, 1e-12));\n  for (let i = 0; i \u003c N; i++) r[i] = phi((r[i] - m) / sd);\n}\n\nfunction lattice(P) {\n  const { g0, g1 } = P;\n  for (let i = 0; i \u003c N; i++) g0[i] = Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n  g1.set(g0);\n  blur(g1, P.re);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) (m += g1[i]), (q += g1[i] * g1[i]);\n  m /= N;\n  const sd = Math.sqrt(q / N - m * m);\n  for (let i = 0; i \u003c N; i++) g1[i] = (g1[i] - m) / sd;\n  P.grain = NaN;\n  P.k = 0;\n  P.K = 0;\n  P.budget = 0;\n  P.hold = -1;\n  P.ord.fill(-1);\n  P.trap.fill(BIG);\n  P.path.fill(-1);\n  P.pathLen = 0;\n  P.grav = NaN;\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N + 1), I = () => new Int32Array(N + 1);\n  params.s = {\n    r: F(), re: F(), g0: F(), g1: F(), stepT: F(), dur: F(), cr: F(), cg: F(), cb: F(), oldR: F(), oldG: F(), oldB: F(),\n    seq: I(), ord: I(), path: I(), prev: I(), trap: I(), heap: I(), tmp: I(), cnt: I(), par: I(), nxt: I(), tail: I(), size: I(), join: I(),\n    inv: new Uint8Array(N + 1), inH: new Uint8Array(N + 1), good: new Uint8Array(N + 1),\n    pathLen: 0, k: 0, K: 0, budget: 0, clock: 0, hold: -1, oldA: 0, grav: NaN, grain: NaN, hue: 0, speed: 2, flash: 0,\n  };\n  lattice(params.s);\n}\n\n// From the cells already invaded, runs invasion without trapping to the top\n// row, then walks the run backwards with union-find over the defending cells\n// to learn which steps trapping would have refused and when each pocket of\n// defender was cut off from the top row.\nfunction compute(P) {\n  const { r, re, seq, ord, trap, heap, tmp, cnt, par, nxt, tail, size, join, inv, inH, good } = P;\n  const from = P.k, g = P.grav * GA;\n  for (let i = 0; i \u003c N; i++) re[i] = r[i] - (g * (H - 1 - ((i / W) | 0))) / (H - 1);\n  inv.fill(0);\n  inH.fill(0);\n  for (let j = 0; j \u003c from; j++) inv[seq[j]] = 1;\n  for (let i = 0; i \u003c N; i++) if (!inv[i] && trap[i] > from) (trap[i] = BIG), (ord[i] = -1);\n  let n = 0;\n  const push = (i) => {\n    if (inv[i] || inH[i] || trap[i] \u003c= from) return;\n    inH[i] = 1;\n    const v = re[i];\n    let c = n++;\n    while (c > 0) {\n      const p = (c - 1) >> 1;\n      if (re[heap[p]] \u003c= v) break;\n      heap[c] = heap[p];\n      c = p;\n    }\n    heap[c] = i;\n  };\n  const pop = () => {\n    const top = heap[0], last = heap[--n], v = re[last];\n    let c = 0;\n    for (;;) {\n      let m = 2 * c + 1;\n      if (m >= n) break;\n      if (m + 1 \u003c n && re[heap[m + 1]] \u003c re[heap[m]]) m++;\n      if (re[heap[m]] >= v) break;\n      heap[c] = heap[m];\n      c = m;\n    }\n    heap[c] = last;\n    return top;\n  };\n  const around = (i, f) => {\n    const x = i % W;\n    if (x > 0) f(i - 1);\n    if (x \u003c W - 1) f(i + 1);\n    if (i >= W) f(i - W);\n    if (i \u003c N - W) f(i + W);\n  };\n  push(INLET);\n  for (let j = 0; j \u003c from; j++) around(seq[j], push);\n  let M = 0;\n  while (n > 0) {\n    const i = pop();\n    inH[i] = 0;\n    inv[i] = 2;\n    tmp[M++] = i;\n    if (i \u003c W) break;\n    around(i, push);\n  }\n\n  for (let i = 0; i \u003c= N; i++) (par[i] = i), (nxt[i] = -1), (tail[i] = i), (size[i] = 1), (join[i] = -1);\n  const find = (i) => {\n    while (par[i] !== i) (par[i] = par[par[i]]), (i = par[i]);\n    return i;\n  };\n  let t = M;\n  const unite = (a, b) => {\n    a = find(a);\n    b = find(b);\n    if (a === b) return;\n    if (b === OUT) (b = a), (a = OUT);\n    if (a === OUT) {\n      for (let m = b; m >= 0; m = nxt[m]) join[m] = t;\n      par[b] = OUT;\n      return;\n    }\n    if (size[a] \u003c size[b]) {\n      const s = a;\n      (a = b), (b = s);\n    }\n    par[b] = a;\n    size[a] += size[b];\n    nxt[tail[a]] = b;\n    tail[a] = tail[b];\n  };\n  // The defender joins across corners too: a diagonal gap between two\n  // invaded cells lets it through.\n  const around8 = (i, f) => {\n    const x = i % W, l = x > 0, rr = x \u003c W - 1;\n    if (l) f(i - 1);\n    if (rr) f(i + 1);\n    if (i >= W) {\n      f(i - W);\n      if (l) f(i - W - 1);\n      if (rr) f(i - W + 1);\n    }\n    if (i \u003c N - W) {\n      f(i + W);\n      if (l) f(i + W - 1);\n      if (rr) f(i + W + 1);\n    }\n  };\n  for (let i = 0; i \u003c N; i++) {\n    if (inv[i]) continue;\n    if (i \u003c W) unite(i, OUT);\n    around8(i, (j) => !inv[j] && unite(i, j));\n  }\n  for (t = M - 1; t >= 0; t--) {\n    const c = tmp[t];\n    inv[c] = 0;\n    if (c \u003c W) unite(c, OUT);\n    around8(c, (j) => !inv[j] && unite(c, j));\n    good[t] = find(c) === OUT ? 1 : 0;\n  }\n  let k = from;\n  for (t = 0; t \u003c M; t++) {\n    if (good[t]) (seq[k] = tmp[t]), (ord[tmp[t]] = k), k++;\n    cnt[t] = k;\n  }\n  P.K = k;\n  for (let i = 0; i \u003c N; i++) {\n    if (trap[i] !== BIG || ord[i] >= 0) continue;\n    const j = join[i];\n    if (j >= 0 && j \u003c M) trap[i] = cnt[j];\n  }\n  durations(P);\n}\n\nfunction durations(P) {\n  const { re, seq, dur } = P;\n  let s = 0;\n  for (let k = 0; k \u003c P.K; k++) {\n    dur[k] = exp(JUMP * Math.min(re[seq[k]] - PC, 0.03));\n    s += dur[k];\n  }\n  const m = P.K / Math.max(s, 1e-9);\n  for (let k = 0; k \u003c P.K; k++) dur[k] *= m;\n}\n\n// The channel the invader flows through once it breaks through: the shortest\n// path inside the cluster from the inlet to the cell that reached the top row,\n// found breadth first. Each cell on it keeps its place along the path.\nfunction channel(P) {\n  const { ord, prev, heap: queue, path, seq, K } = P;\n  prev.fill(-2);\n  const end = seq[K - 1];\n  let qh = 0, qt = 0;\n  queue[qt++] = INLET;\n  prev[INLET] = -1;\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i === end) break;\n    const x = i % W;\n    for (const j of [i - W, x > 0 ? i - 1 : -1, x \u003c W - 1 ? i + 1 : -1, i + W])\n      if (j >= 0 && j \u003c N && ord[j] >= 0 && ord[j] \u003c K && prev[j] === -2) (prev[j] = i), (queue[qt++] = j);\n  }\n  let n = 0;\n  for (let i = end; i >= 0; i = prev[i]) n++;\n  P.pathLen = n;\n  for (let i = end; i >= 0; i = prev[i]) path[i] = --n;\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  lattice(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const g = cl(kv[2], -1, 1), gr = cl(kv[3], 0, 1);\n  P.clock += d;\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  if (P.hold \u003c 0 && (g !== P.grav || gr !== P.grain)) {\n    if (gr !== P.grain) (P.grain = gr), field(P);\n    P.grav = g;\n    compute(P);\n  }\n  P.oldA *= exp(-d / 0.45);\n  P.flash *= exp(-d / 0.4);\n  if (P.hold \u003c 0) {\n    P.budget += (d * P.K * P.speed) / 11;\n    while (P.k \u003c P.K && P.budget >= P.dur[P.k]) (P.budget -= P.dur[P.k]), (P.stepT[P.k] = P.clock), P.k++;\n    if (P.k >= P.K) (P.hold = 0), (P.flash = 1), channel(P);\n  } else if ((P.hold += d) > HOLD) restart(P);\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { r, ord, trap, stepT, path, cr, cg, cb, oldR, oldG, oldB, k, K } = P;\n  const h0 = P.hue, now = P.clock, oa = P.oldA, fl = P.flash, hold = P.hold;\n  hsv(h0 + 0.13, 0.5, 1);\n  const gR = C[0], gG = C[1], gB = C[2];\n  for (let i = 0; i \u003c N; i++) {\n    const o = ord[i];\n    let R, G, B;\n    if (o >= 0 && o \u003c k) {\n      const f = o / K;\n      const age = now - stepT[o];\n      hsv(h0 + 0.45 + 0.28 * f, 0.8, 0.55 + 0.25 * f + 0.2 * fl);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-age / 0.3);\n      if (w > 0.003) (R += (1 - R) * w), (G += (1 - G) * w), (B += (0.95 - B) * w);\n      const j = path[i];\n      if (j >= 0) {\n        const u = cl(hold / 0.6 - j / P.pathLen, 0, 1);\n        if (u > 0) (R += (gR - R) * u), (G += (gG - G) * u), (B += (gB - B) * u);\n      }\n    } else if (trap[i] \u003c= k) {\n      hsv(h0 + 0.95, 0.6, 0.1 + 0.22 * (1 - r[i]));\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-(now - stepT[trap[i] - 1]) / 0.5);\n      if (w > 0.003) (R += (1 - R) * w * 0.6), (G += (0.6 - G) * w * 0.6), (B += (0.8 - B) * w * 0.6);\n    } else {\n      hsv(h0 + 0.08, 0.35, 0.035 + 0.1 * (1 - r[i]) ** 1.5);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    }\n    R *= 255;\n    G *= 255;\n    B *= 255;\n    if (oa > 0.01) (R = Math.max(R, oldR[i] * oa)), (G = Math.max(G, oldG[i] * oa)), (B = Math.max(B, oldB[i] * oa));\n    (cr[i] = R), (cg[i] = G), (cb[i] = B);\n    display.setPixel(i % W, (i / W) | 0, R, G, B);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst."},{"name":"Gravity","min":-1,"max":1,"about":"Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100."},{"name":"Grain","min":0,"max":1,"about":"How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes."}],"start":[0,2,0,0.06],"measures":{"motion":0.1366,"detail":0.0909,"edges":0.2189,"complexity":1.5161,"coverage":0.4669,"colour":0.1889,"drift":0.1552},"knobResponse":[0.0576,0.0663,0.1297,0.1267]},{"slug":"ivy","title":"Ivy","family":"growth","round":15,"note":"돌담을 타고 담쟁이가 꼭대기까지 올라요. 바람이 잎을 뒤집어 옅은 뒷면이 물결치고, 가을이면 잎이 노랑에서 진홍으로 물들어 떨어져요. 겨울에는 맨 줄기에 검푸른 열매가 남아요.","idea":"Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.","buttons":"K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.","code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-ivy","type":"code","name":"ivy","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it."},{"name":"Vines","min":2,"max":6,"about":"How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither."},{"name":"Wind","min":-1,"max":1,"about":"Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away."}],"start":[0,2,2,0.06],"measures":{"motion":0.0893,"detail":0.1136,"edges":0.3366,"complexity":2.0732,"coverage":0.8558,"colour":0.304,"drift":0.0713},"knobResponse":[0.1737,0.0489,0.1412,0.1012]},{"slug":"j-invariant","title":"J-Invariant","family":"fractal","round":29,"note":"클라인의 j 함수를 위 반평면에 칠해요. j 가 위쪽 값으로 보내는 삼각형은 옅은 금색, 아래쪽 값으로 보내는 삼각형은 짙은 파랑이라 같은 타일이 패널 아래 실수축으로 갈수록 잘게 되풀이되고, j 의 크기를 나눈 등고선 띠가 영점마다 흘러나와요. K3 을 돌리면 실수축 쪽으로 여덟 배까지 다가가고, K1 을 누르면 빛이 맨 위 타일부터 세대마다 아래로 번져요.","idea":"Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.","buttons":"K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.","code":"// ===== Patternflow pattern =====\n// Title:   J-Invariant\n// Family:  fractal\n// Idea:    Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the modular j-invariant (Richard Dedekind, 1877; Felix Klein, 1878), drawn by domain colouring, pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue.\n// Knob 2: Speed. At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower.\n// Knob 3: Depth. Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel.\n// Knob 4: Bands. The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat.\n// Buttons: K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, atan2, sqrt, abs, round, asinh, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// Re units per LED at Depth 0, and how far below the bottom row the real\n// axis lies, in LEDs.\nconst S0 = 1 / 96, GAP = 0.5;\n\n// One point of the half-plane: it is carried into the fundamental domain\n// |Re t| \u003c= 1/2, |t| >= 1 by t -> t + n and t -> -1/t, and j is read off\n// there, where |q| = |e^(2 pi i t)| \u003c= e^(-pi sqrt 3) \u003c 0.0044, so five terms\n// of each q-series are exact to the last bit that shows. The results land in\n// OUT: log|j|, arg j, how fast log j turns per unit of the original t, how\n// many times t -> -1/t was taken (the tile's generation, counted down from\n// the top) and the point in the fundamental domain.\nconst OUT = new Float64Array(6);\nfunction jAt(x, y) {\n  const y0 = y;\n  let gen = 0;\n  for (; gen \u003c 60; gen++) {\n    x -= round(x);\n    const r2 = x * x + y * y;\n    if (r2 >= 1) break;\n    x = -x / r2;\n    y = y / r2;\n  }\n  // q = e^(2 pi i t); E4 and E6 by their divisor sums, and the log of the\n  // eta product as L = sum sigma(m)/m q^m, so Delta = q e^(-24 L) and\n  // j = E4^3 / Delta.\n  const m = exp(-TAU * y), qr = m * cos(TAU * x), qi = m * sin(TAU * x);\n  const q2r = qr * qr - qi * qi, q2i = 2 * qr * qi;\n  const q3r = q2r * qr - q2i * qi, q3i = q2r * qi + q2i * qr;\n  const q4r = q2r * q2r - q2i * q2i, q4i = 2 * q2r * q2i;\n  const q5r = q4r * qr - q4i * qi, q5i = q4r * qi + q4i * qr;\n  const e4r = 1 + 240 * (qr + 9 * q2r + 28 * q3r + 73 * q4r + 126 * q5r);\n  const e4i = 240 * (qi + 9 * q2i + 28 * q3i + 73 * q4i + 126 * q5i);\n  const e6r = 1 - 504 * (qr + 33 * q2r + 244 * q3r + 1057 * q4r + 3126 * q5r);\n  const e6i = -504 * (qi + 33 * q2i + 244 * q3i + 1057 * q4i + 3126 * q5i);\n  const Lr = qr + 1.5 * q2r + (4 / 3) * q3r + 1.75 * q4r + 1.2 * q5r;\n  const Li = qi + 1.5 * q2i + (4 / 3) * q3i + 1.75 * q4i + 1.2 * q5i;\n  const a4 = e4r * e4r + e4i * e4i + 1e-30;\n  OUT[0] = 1.5 * log(a4) + TAU * y + 24 * Lr;\n  OUT[1] = 3 * atan2(e4i, e4r) - TAU * x + 24 * Li;\n  // d log j / dt = -2 pi i E6 / E4 (Ramanujan's identities), and the map\n  // into the domain shrinks lengths by y / y0.\n  OUT[2] = TAU * sqrt((e6r * e6r + e6i * e6i) / a4) * (y / y0);\n  OUT[3] = gen;\n  OUT[4] = x;\n  OUT[5] = y;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The phase palette. Where j is real the half-plane is cut into Klein's\n// triangles, and j maps each triangle onto one half of the plane of values:\n// those onto Im j > 0 take the light family, those onto Im j \u003c 0 the dark\n// one, so the two alternate across every edge as in Klein's own figure.\n// Across a triangle the phase runs through pi; f runs along a family from the\n// edge where j > 0 to the edge where j \u003c 0. 64 steps each, then the mean\n// colour the two families blend to where the triangles are too small to draw.\nconst PN = 64;\nfunction palette(P) {\n  const t = P.pal;\n  for (let f = 0; f \u003c PN; f++) {\n    const u = f / (PN - 1);\n    hsv(P.hue + 0.13 - 0.11 * u, 0.5 + 0.25 * u, 1, t, f * 3);\n    // A dark orange or olive reads as brown, so the dark family lifts its\n    // light where its hue passes through them.\n    let h = P.hue + 0.58 + 0.16 * u;\n    h -= floor(h);\n    const lift = max(0, 1 - abs(h - 0.13) / 0.14);\n    hsv(h, 0.9, 0.5 + 0.08 * u + 0.38 * lift, t, (PN + f) * 3);\n  }\n  for (let c = 0; c \u003c 3; c++) {\n    let a = 0;\n    for (let f = 0; f \u003c 2 * PN; f++) a += t[f * 3 + c];\n    t[2 * PN * 3 + c] = a / (2 * PN);\n  }\n  P.palHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = { x: 0.18, flow: 0, hue: 0, depth: 0, bands: 0.06, gold: 0, g: 0, wave: -1, pal: new Float32Array((2 * PN + 1) * 3), palHue: -1, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.depth = cl(k[2], 0, 1);\n  P.bands = cl(k[3], 0, 1);\n  // The window slides about four LEDs a second at Speed 2, whatever the\n  // zoom. j repeats every 1 along the axis.\n  const s = S0 * 8 ** -P.depth;\n  P.x = (P.x + d * sp * 2 * s) % 1;\n  P.flow += d * sp * 0.22;\n  const b = input.btnPressed || [];\n  // K1 sends a wave of light down the generations, two and a half a\n  // second; K2 lays the gold edges on or takes them off.\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 30 ? -1 : P.wave + d * 2.5;\n  if (b[1]) P.gold = 1 - P.gold;\n  P.g += (P.gold - P.g) * min(1, d * 5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const s = S0 * 8 ** -P.depth, buf = P.buf, pal = P.pal, MEAN = 2 * PN * 3;\n  // Bands: nepers of |j| per band, how much of each band is ramp, and how\n  // dark a band starts.\n  const L = 2.2 * 0.18 ** P.bands, ramp = 0.85 - 0.6 * P.bands, lo = 0.6 - 0.32 * P.bands;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const y = (H - py - 0.5 + GAP) * s;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      jAt(P.x + (px + 0.5 - W / 2) * s, y);\n      // How fast log j turns per LED. Near an image of i it stalls while\n      // the tiles round it stay small, so the tile size at this height,\n      // about y, sets a floor; and the last rows above the axis, where every\n      // tile is a few LEDs at most, fade whatever it says.\n      const g = max(OUT[2] * s, (5 * s) / y), hf = sm(2.5, 9, y / s);\n      // A band or a phase turn per LED or more cannot be drawn; the colour\n      // there would be static. Contrast and colour fade as they crowd, and\n      // the light with them, so the cusps and the axis sink into the dark\n      // instead of shimmering.\n      const cb = (1 - sm(0.25, 0.55, g / L)) * hf, ch = (1 - sm(0.3, 0.7, g / PI)) * hf;\n      let u = OUT[0] / L - P.flow;\n      u -= floor(u);\n      // A sawtooth: each band brightens slowly and drops at its edge.\n      const saw = u \u003c ramp ? u / ramp : (1 - u) / (1 - ramp);\n      const v = ((lo + (1 - lo) * saw) * cb + 0.78 * (1 - cb)) * (0.3 + 0.7 * ch);\n      let a = OUT[1] / TAU;\n      a -= floor(a);\n      const up = a \u003c 0.5, f = up ? 2 * a : 2 - 2 * a, fi = (f * (PN - 1)) | 0, o = (up ? fi : PN + fi) * 3;\n      // Half an LED either side of a triangle edge the two families blend.\n      const e = (min(f, 1 - f) * PI) / g, w = e \u003c 0.5 ? 0.5 - e : 0, o2 = (up ? PN + fi : fi) * 3;\n      let r = pal[o] + (pal[o2] - pal[o]) * w, gg = pal[o + 1] + (pal[o2 + 1] - pal[o + 1]) * w, b = pal[o + 2] + (pal[o2 + 2] - pal[o + 2]) * w;\n      r = (r * ch + pal[MEAN] * (1 - ch)) * v * 255;\n      gg = (gg * ch + pal[MEAN + 1] * (1 - ch)) * v * 255;\n      b = (b * ch + pal[MEAN + 2] * (1 - ch)) * v * 255;\n      if (P.wave >= 0) {\n        // The wave: a tile flares as the front reaches its generation and\n        // keeps a little of the light for a while after.\n        const dw = P.wave - OUT[3], fl = max(exp(-dw * dw * 3), dw > 0 ? 0.35 * exp(-dw * 0.7) : 0) * (0.3 + 0.7 * ch);\n        r += (255 - r) * fl * 0.8;\n        gg += (250 - gg) * fl * 0.8;\n        b += (235 - b) * fl * 0.8;\n      }\n      if (P.g > 0.01) {\n        // The tile edges as gold geodesics a LED wide, faded where the\n        // tiles are too small to draw. The hyperbolic distance to the nearer\n        // of the walls Re = +-1/2 and the floor |t| = 1, times y, is the\n        // distance on the panel.\n        const X = OUT[4], Y = OUT[5], e2 = (asinh(min(0.5 - abs(X), (X * X + Y * Y - 1) / 2) / Y) * y) / s;\n        const w2 = cl(1.1 - e2, 0, 1) * P.g * ch;\n        r += (255 - r) * w2;\n        gg += (205 - gg) * w2;\n        b += (90 - b) * w2;\n      }\n      buf[p] = r;\n      buf[p + 1] = gg;\n      buf[p + 2] = b;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-j-invariant","type":"code","name":"j-invariant","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   J-Invariant\n// Family:  fractal\n// Idea:    Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the modular j-invariant (Richard Dedekind, 1877; Felix Klein, 1878), drawn by domain colouring, pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue.\n// Knob 2: Speed. At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower.\n// Knob 3: Depth. Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel.\n// Knob 4: Bands. The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat.\n// Buttons: K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, atan2, sqrt, abs, round, asinh, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// Re units per LED at Depth 0, and how far below the bottom row the real\n// axis lies, in LEDs.\nconst S0 = 1 / 96, GAP = 0.5;\n\n// One point of the half-plane: it is carried into the fundamental domain\n// |Re t| \u003c= 1/2, |t| >= 1 by t -> t + n and t -> -1/t, and j is read off\n// there, where |q| = |e^(2 pi i t)| \u003c= e^(-pi sqrt 3) \u003c 0.0044, so five terms\n// of each q-series are exact to the last bit that shows. The results land in\n// OUT: log|j|, arg j, how fast log j turns per unit of the original t, how\n// many times t -> -1/t was taken (the tile's generation, counted down from\n// the top) and the point in the fundamental domain.\nconst OUT = new Float64Array(6);\nfunction jAt(x, y) {\n  const y0 = y;\n  let gen = 0;\n  for (; gen \u003c 60; gen++) {\n    x -= round(x);\n    const r2 = x * x + y * y;\n    if (r2 >= 1) break;\n    x = -x / r2;\n    y = y / r2;\n  }\n  // q = e^(2 pi i t); E4 and E6 by their divisor sums, and the log of the\n  // eta product as L = sum sigma(m)/m q^m, so Delta = q e^(-24 L) and\n  // j = E4^3 / Delta.\n  const m = exp(-TAU * y), qr = m * cos(TAU * x), qi = m * sin(TAU * x);\n  const q2r = qr * qr - qi * qi, q2i = 2 * qr * qi;\n  const q3r = q2r * qr - q2i * qi, q3i = q2r * qi + q2i * qr;\n  const q4r = q2r * q2r - q2i * q2i, q4i = 2 * q2r * q2i;\n  const q5r = q4r * qr - q4i * qi, q5i = q4r * qi + q4i * qr;\n  const e4r = 1 + 240 * (qr + 9 * q2r + 28 * q3r + 73 * q4r + 126 * q5r);\n  const e4i = 240 * (qi + 9 * q2i + 28 * q3i + 73 * q4i + 126 * q5i);\n  const e6r = 1 - 504 * (qr + 33 * q2r + 244 * q3r + 1057 * q4r + 3126 * q5r);\n  const e6i = -504 * (qi + 33 * q2i + 244 * q3i + 1057 * q4i + 3126 * q5i);\n  const Lr = qr + 1.5 * q2r + (4 / 3) * q3r + 1.75 * q4r + 1.2 * q5r;\n  const Li = qi + 1.5 * q2i + (4 / 3) * q3i + 1.75 * q4i + 1.2 * q5i;\n  const a4 = e4r * e4r + e4i * e4i + 1e-30;\n  OUT[0] = 1.5 * log(a4) + TAU * y + 24 * Lr;\n  OUT[1] = 3 * atan2(e4i, e4r) - TAU * x + 24 * Li;\n  // d log j / dt = -2 pi i E6 / E4 (Ramanujan's identities), and the map\n  // into the domain shrinks lengths by y / y0.\n  OUT[2] = TAU * sqrt((e6r * e6r + e6i * e6i) / a4) * (y / y0);\n  OUT[3] = gen;\n  OUT[4] = x;\n  OUT[5] = y;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The phase palette. Where j is real the half-plane is cut into Klein's\n// triangles, and j maps each triangle onto one half of the plane of values:\n// those onto Im j > 0 take the light family, those onto Im j \u003c 0 the dark\n// one, so the two alternate across every edge as in Klein's own figure.\n// Across a triangle the phase runs through pi; f runs along a family from the\n// edge where j > 0 to the edge where j \u003c 0. 64 steps each, then the mean\n// colour the two families blend to where the triangles are too small to draw.\nconst PN = 64;\nfunction palette(P) {\n  const t = P.pal;\n  for (let f = 0; f \u003c PN; f++) {\n    const u = f / (PN - 1);\n    hsv(P.hue + 0.13 - 0.11 * u, 0.5 + 0.25 * u, 1, t, f * 3);\n    // A dark orange or olive reads as brown, so the dark family lifts its\n    // light where its hue passes through them.\n    let h = P.hue + 0.58 + 0.16 * u;\n    h -= floor(h);\n    const lift = max(0, 1 - abs(h - 0.13) / 0.14);\n    hsv(h, 0.9, 0.5 + 0.08 * u + 0.38 * lift, t, (PN + f) * 3);\n  }\n  for (let c = 0; c \u003c 3; c++) {\n    let a = 0;\n    for (let f = 0; f \u003c 2 * PN; f++) a += t[f * 3 + c];\n    t[2 * PN * 3 + c] = a / (2 * PN);\n  }\n  P.palHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = { x: 0.18, flow: 0, hue: 0, depth: 0, bands: 0.06, gold: 0, g: 0, wave: -1, pal: new Float32Array((2 * PN + 1) * 3), palHue: -1, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.depth = cl(k[2], 0, 1);\n  P.bands = cl(k[3], 0, 1);\n  // The window slides about four LEDs a second at Speed 2, whatever the\n  // zoom. j repeats every 1 along the axis.\n  const s = S0 * 8 ** -P.depth;\n  P.x = (P.x + d * sp * 2 * s) % 1;\n  P.flow += d * sp * 0.22;\n  const b = input.btnPressed || [];\n  // K1 sends a wave of light down the generations, two and a half a\n  // second; K2 lays the gold edges on or takes them off.\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 30 ? -1 : P.wave + d * 2.5;\n  if (b[1]) P.gold = 1 - P.gold;\n  P.g += (P.gold - P.g) * min(1, d * 5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const s = S0 * 8 ** -P.depth, buf = P.buf, pal = P.pal, MEAN = 2 * PN * 3;\n  // Bands: nepers of |j| per band, how much of each band is ramp, and how\n  // dark a band starts.\n  const L = 2.2 * 0.18 ** P.bands, ramp = 0.85 - 0.6 * P.bands, lo = 0.6 - 0.32 * P.bands;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const y = (H - py - 0.5 + GAP) * s;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      jAt(P.x + (px + 0.5 - W / 2) * s, y);\n      // How fast log j turns per LED. Near an image of i it stalls while\n      // the tiles round it stay small, so the tile size at this height,\n      // about y, sets a floor; and the last rows above the axis, where every\n      // tile is a few LEDs at most, fade whatever it says.\n      const g = max(OUT[2] * s, (5 * s) / y), hf = sm(2.5, 9, y / s);\n      // A band or a phase turn per LED or more cannot be drawn; the colour\n      // there would be static. Contrast and colour fade as they crowd, and\n      // the light with them, so the cusps and the axis sink into the dark\n      // instead of shimmering.\n      const cb = (1 - sm(0.25, 0.55, g / L)) * hf, ch = (1 - sm(0.3, 0.7, g / PI)) * hf;\n      let u = OUT[0] / L - P.flow;\n      u -= floor(u);\n      // A sawtooth: each band brightens slowly and drops at its edge.\n      const saw = u \u003c ramp ? u / ramp : (1 - u) / (1 - ramp);\n      const v = ((lo + (1 - lo) * saw) * cb + 0.78 * (1 - cb)) * (0.3 + 0.7 * ch);\n      let a = OUT[1] / TAU;\n      a -= floor(a);\n      const up = a \u003c 0.5, f = up ? 2 * a : 2 - 2 * a, fi = (f * (PN - 1)) | 0, o = (up ? fi : PN + fi) * 3;\n      // Half an LED either side of a triangle edge the two families blend.\n      const e = (min(f, 1 - f) * PI) / g, w = e \u003c 0.5 ? 0.5 - e : 0, o2 = (up ? PN + fi : fi) * 3;\n      let r = pal[o] + (pal[o2] - pal[o]) * w, gg = pal[o + 1] + (pal[o2 + 1] - pal[o + 1]) * w, b = pal[o + 2] + (pal[o2 + 2] - pal[o + 2]) * w;\n      r = (r * ch + pal[MEAN] * (1 - ch)) * v * 255;\n      gg = (gg * ch + pal[MEAN + 1] * (1 - ch)) * v * 255;\n      b = (b * ch + pal[MEAN + 2] * (1 - ch)) * v * 255;\n      if (P.wave >= 0) {\n        // The wave: a tile flares as the front reaches its generation and\n        // keeps a little of the light for a while after.\n        const dw = P.wave - OUT[3], fl = max(exp(-dw * dw * 3), dw > 0 ? 0.35 * exp(-dw * 0.7) : 0) * (0.3 + 0.7 * ch);\n        r += (255 - r) * fl * 0.8;\n        gg += (250 - gg) * fl * 0.8;\n        b += (235 - b) * fl * 0.8;\n      }\n      if (P.g > 0.01) {\n        // The tile edges as gold geodesics a LED wide, faded where the\n        // tiles are too small to draw. The hyperbolic distance to the nearer\n        // of the walls Re = +-1/2 and the floor |t| = 1, times y, is the\n        // distance on the panel.\n        const X = OUT[4], Y = OUT[5], e2 = (asinh(min(0.5 - abs(X), (X * X + Y * Y - 1) / 2) / Y) * y) / s;\n        const w2 = cl(1.1 - e2, 0, 1) * P.g * ch;\n        r += (255 - r) * w2;\n        gg += (205 - gg) * w2;\n        b += (90 - b) * w2;\n      }\n      buf[p] = r;\n      buf[p + 1] = gg;\n      buf[p + 2] = b;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower."},{"name":"Depth","min":0,"max":1,"about":"Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel."},{"name":"Bands","min":0,"max":1,"about":"The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat."}],"start":[0,2,0,0.06],"measures":{"motion":0.3718,"detail":0.0494,"edges":0.1733,"complexity":2.6926,"coverage":1,"colour":0.3996,"drift":0.1786},"knobResponse":[0.3542,0.2406,0.2621,0.0689]},{"slug":"jacobs-ladder","title":"Jacob's Ladder","family":"light","round":6,"note":"두 막대가 가장 가까운 목에서 보랏빛 아크가 튀어, 벌어지는 V 를 타고 막대 끝까지 올라가 끊어져요. 위의 아크가 끝에 닿기 전에 목에서 다음 아크가 튀고, K4 를 올리면 지나간 아크가 사다리 가로대로 쌓여요.","idea":"An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.","buttons":"K1 tap strikes a new arc now.","code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-jacobs-ladder","type":"code","name":"jacobs-ladder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the gas the arc burns in, starting from the violet of an arc in air."},{"name":"Power","min":0.3,"max":3,"about":"How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone."},{"name":"Spread","min":0,"max":1,"about":"How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down."},{"name":"Exposure","min":0,"max":1,"about":"How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder."}],"start":[0,2,0,0.06],"measures":{"motion":0.8103,"detail":0.0208,"edges":0.2771,"complexity":0.702,"coverage":0.2778,"colour":0.0843,"drift":0.105},"knobResponse":[0.0479,0.0767,0.0696,0.0781]},{"slug":"jacquard","title":"Jacquard Loom","family":"textile","round":4,"note":"구멍 뚫린 카드가 한 장씩 내려와 날실을 들어 올리면 북이 씨실을 끌고 지나가고, 바디가 그 씨실을 쳐 넣어요. 아래로 짜여 내려가는 천에 카드 구멍이 적어 둔 다이아몬드가 서요.","idea":"A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.","buttons":"K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.","code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-jacquard","type":"code","name":"jacquard","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green."},{"name":"Speed","min":0.5,"max":5,"about":"Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak."},{"name":"Card","min":1,"max":4,"about":"The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down."},{"name":"Stripes","min":0,"max":1,"about":"How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks."}],"start":[0,2,1,0.06],"measures":{"motion":1.0063,"detail":0.2005,"edges":0.8201,"complexity":0.1835,"coverage":0.8529,"colour":0.5431,"drift":0.0411},"knobResponse":[0.3764,0.209,0.2197,0.1447]},{"slug":"jelly","title":"Jelly","family":"physics","round":2,"note":"젤리마다 질량 18개를 용수철과 안쪽 압력으로 묶은 고리예요. 키 큰 병에 떨어져 눌린 채 쌓여 출렁이다가, 하나씩 통 튀어 올라 다른 젤리 위로 굴러떨어져요.","idea":"Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.","buttons":"K1 tap shakes the jar.","code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","layer":{"id":"layer-jelly","type":"code","name":"jelly","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match."},{"name":"Gravity","min":-1,"max":3,"about":"Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid."},{"name":"Softness","min":0,"max":1,"about":"Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other."},{"name":"Count","min":4,"max":12,"about":"How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room."}],"start":[0,2,0,4],"measures":{"motion":0.4127,"detail":0.0345,"edges":0.4341,"complexity":0.5229,"coverage":0.4923,"colour":0.4252,"drift":0.1653},"knobResponse":[0.2349,0.3804,0.1184,0.2314]},{"slug":"johnson-mehl","title":"Johnson-Mehl","family":"cells","round":37,"note":"결정이 아무 때나 아무 데서 태어나 같은 빠르기로 원처럼 자라고, LED 마다 먼저 닿은 결정의 것이 돼요. 늦게 난 결정은 작고 둥글게 남아서 먼저 난 결정과 곧은 선이 아니라 쌍곡선 호에서 만나고, 한 상이 판을 다 채우면 다음 상이 그 위로 자라요. 위 12줄은 바뀐 몫을 아브라미 곡선과 나란히 그려요. K4 를 1로 돌리면 결정이 한꺼번에 태어나 경계가 곧은 보로노이가 되고, 누르면 다음 상이 바로 시작해요.","idea":"Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.","buttons":"K1 tap starts the next phase at once, over whatever has turned so far.","code":"// ===== Patternflow pattern =====\n// Title:   Johnson-Mehl\n// Family:  cells\n// Idea:    Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Johnson-Mehl tessellation (William Johnson and Robert Mehl, 1939), with Avrami's law (Melvin Avrami, 1939), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1\n//\n// Knob 1: Hue. Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan.\n// Knob 2: Speed. The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s.\n// Knob 3: Rate. The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3.\n// Knob 4: Mode. How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2.\n// Buttons: K1 tap starts the next phase at once, over whatever has turned so far.\n\n// Johnson and Mehl, and Avrami in the same year, asked how much of a sample\n// has turned by time t when nuclei appear at random, at rate I on the ground\n// not yet turned, and every grain grows at speed V. In the plane the answer\n// is X(t) = 1 - exp(-(pi / 3) I V^2 t^3). The exponent counts the nuclei, real\n// or phantom, whose discs would have reached a point by t; the chance that\n// none has is its exponential. A nucleus that falls on turned ground is a\n// phantom and is dropped: nucleate() looks at its cell first.\n//\n// Checked on this field, 64 by 115 LEDs, averaged over 120 phases at the\n// start knobs: the share turned stays within 0.015 of Avrami's curve all the\n// way; in Mode 1 within 0.013, at Rate 80 within 0.009. One phase alone\n// strays more, a median of 0.094 at Rate 4 and 0.034 at Rate 80, and the\n// strip shows one phase. Without the margin below the edges of the field\n// starve, as no grain can come in from outside: the share lagged the curve\n// by up to 0.063, and a phase took 2.14 Avrami times to fill instead of 1.82.\n\n// The plot takes the top 12 rows, a dark row parts it from the field, and\n// the field is the other 115.\nconst W = 64, H = 128, TOP = 12, FY = TOP + 1, FH = H - FY, FN = W * FH;\n// The grains grow on a grid 24 LEDs wider than the field on every side, and\n// nuclei are born there too, so the field is a window on a larger sample.\nconst M = 24, GW = W + 2 * M, GH = FH + 2 * M, GN = GW * GH;\n// Growth speed in LEDs a second at Speed 1; rate in nuclei per 10,000 LEDs\n// a second at Speed 1. The rim is the last 0.8 s of growth, 1.6 LEDs.\nconst V = 2, RATE_UNIT = 1e-4, RIM = 0.8, CACHE = 4096;\nconst { floor, sqrt, exp, log, random, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst G43 = 0.89298; // Gamma(4/3)\n// The phases take turns in three hues, blue, gold and rose at Hue 0, so a\n// phase never grows over one of its own colour, not even after a tap has\n// left two phases showing underneath it.\nconst PHASE = [0.56, 0.1, 0.88];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\n// Two numbers in [0, 1) from a grain's id: its orientation and its shade.\nfunction hash(id, salt) {\n  let h = Math.imul(id ^ salt, 0x9e3779b1);\n  h ^= h >>> 15;\n  h = Math.imul(h, 0x85ebca6b);\n  h ^= h >>> 13;\n  return (h >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: 0, speed: 2, rate: 4, mode: 0.06,\n    clock: 0, gen: 0, nextId: 1, nextBirth: Infinity, lambda: 0, ns: 0,\n    T: new Float32Array(GN), O: new Int32Array(GN), U: new Int32Array(FN), UP: new Uint8Array(FN),\n    meas: new Float32Array(W), filled: 0, X: 0, tEnd: 1,\n    cId: new Int32Array(CACHE).fill(-1), cRGB: new Float32Array(CACHE * 3), cHue: NaN, rgb: new Float32Array(3),\n  };\n}\n\n// The rate of the continuous part and the density of the nuclei all born\n// at once. A pure Johnson-Mehl run with rate I ends with I Gamma(4/3) tau\n// grains per LED, tau = (3 / (pi I V^2))^(1/3) the time at which Avrami's\n// exponent reaches 1. Mode m moves that share m of them to time 0, so the\n// grain count stays about the same from one end of the knob to the other.\nfunction rates(S) {\n  const I = S.rate * RATE_UNIT, tau = Math.cbrt(3 / (PI * I * V * V));\n  return { I, cont: (1 - S.mode) * I, sat: S.mode * I * G43 * tau };\n}\n\nfunction nucleate(S, x, y, t) {\n  const { T, O } = S;\n  const cx = floor(x), cy = floor(y);\n  if (T[cy * GW + cx] \u003c= t) return false;\n  const id = S.nextId++;\n  // T_i(p) = t_i + |p - x_i| / V, kept where it is the earliest. Only as\n  // far as the front can get by 2.5 plot spans, five times Avrami's time;\n  // by then a cell is still open with odds of exp(-25) or less. At Rate 80\n  // in Mode 1 that cut the 400 nuclei born on one frame from 18 ms to 3.\n  const R = V * max(0, 2.5 * S.tEnd - t);\n  const i0 = max(0, floor(x - R)), i1 = min(GW - 1, floor(x + R)), j0 = max(0, floor(y - R)), j1 = min(GH - 1, floor(y + R));\n  for (let j = j0; j \u003c= j1; j++) {\n    const dy = j + 0.5 - y, dy2 = dy * dy;\n    for (let i = i0, c = j * GW + i0; i \u003c= i1; i++, c++) {\n      const dx = i + 0.5 - x, a = t + sqrt(dx * dx + dy2) / V;\n      if (a \u003c T[c]) {\n        T[c] = a;\n        O[c] = id;\n      }\n    }\n  }\n  return true;\n}\n\nfunction drawWait(S) {\n  S.nextBirth = S.lambda > 0 ? S.clock - log(1 - random()) / S.lambda : Infinity;\n}\n\n// A new phase: what shows now becomes the layer underneath, the grid is\n// cleared, and the site-saturated share is born at once.\nfunction nextPhase(S) {\n  const { T, O, U, UP } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      if (T[c] \u003c= S.clock && O[c] > 0) {\n        U[p] = O[c];\n        UP[p] = par;\n      }\n    }\n  S.gen++;\n  S.clock = 0;\n  T.fill(Infinity);\n  O.fill(0);\n  const r = rates(S);\n  S.ns = r.sat;\n  S.lambda = r.cont * GN;\n  // The span first: it sets how far each nucleus below is drawn.\n  theoryEnd(S);\n  // A Poisson count of nuclei at time 0, by inversion.\n  const mean = r.sat * GN;\n  let n = 0;\n  if (mean > 0) {\n    let L = exp(-min(mean, 600)), p = 1, u = random();\n    if (mean > 600) n = floor(mean);\n    else {\n      let acc = L;\n      while (u > acc && n \u003c 4000) {\n        n++;\n        p *= mean / n;\n        acc += L * p;\n      }\n    }\n  }\n  for (let i = 0; i \u003c n; i++) nucleate(S, random() * GW, random() * GH, 0);\n  drawWait(S);\n  S.meas.fill(0);\n  S.filled = 0;\n  S.X = 0;\n}\n\n// Avrami: X(t) = 1 - exp(-pi V^2 (Ns t^2 + (1 - m) I t^3 / 3)). The plot\n// runs to twice the time at which the exponent is 1.\nfunction avramiExp(S, t) {\n  const r = rates(S);\n  return PI * V * V * (S.ns * t * t + (r.cont * t * t * t) / 3);\n}\nfunction theoryEnd(S) {\n  let lo = 0, hi = 1;\n  while (avramiExp(S, hi) \u003c 1) hi *= 2;\n  for (let k = 0; k \u003c 40; k++) {\n    const mid = 0.5 * (lo + hi);\n    if (avramiExp(S, mid) \u003c 1) lo = mid;\n    else hi = mid;\n  }\n  S.tEnd = 2 * hi;\n}\n\n// Advance the clock by d, birthing the continuous nuclei in order, and\n// measure the share of the field turned.\nfunction advance(S, d) {\n  const target = S.clock + d;\n  while (S.nextBirth \u003c= target) {\n    S.clock = S.nextBirth;\n    nucleate(S, random() * GW, random() * GH, S.clock);\n    drawWait(S);\n  }\n  S.clock = target;\n  let n = 0;\n  const T = S.T;\n  for (let y = 0; y \u003c FH; y++) for (let c = (y + M) * GW + M, e = c + W; c \u003c e; c++) if (T[c] \u003c= target) n++;\n  S.X = n / FN;\n  return n === FN;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 4, 80);\n  S.mode = cl(k[3], 0, 1);\n  const lam = rates(S).cont * GN;\n  if (lam !== S.lambda) {\n    S.lambda = lam;\n    drawWait(S);\n    theoryEnd(S);\n  }\n  if (!S.ready) {\n    // The first phase grows to the end before the first frame, so the\n    // panel opens full and the second phase starts over it.\n    S.gen = 2;\n    nextPhase(S);\n    while (!advance(S, 0.25) && S.clock \u003c 3 * S.tEnd);\n    nextPhase(S);\n    S.ready = true;\n  }\n  const tap = input.btnPressed && input.btnPressed[0];\n  const full = advance(S, d * S.speed);\n  // The plot takes one column per 64th of its time span.\n  while (S.filled \u003c W && S.clock >= ((S.filled + 1) / W) * S.tEnd) S.meas[S.filled++] = S.X;\n  if (full || tap || S.clock > 3 * S.tEnd) nextPhase(S);\n}\n\nfunction grainRGB(S, id, par, out) {\n  const slot = id & (CACHE - 1), o = slot * 3;\n  if (S.cId[slot] === id * 3 + par) {\n    out[0] = S.cRGB[o];\n    out[1] = S.cRGB[o + 1];\n    out[2] = S.cRGB[o + 2];\n    return;\n  }\n  const th = hash(id, 0x51ed), q = hash(id, 0x2c1b);\n  let h = S.hue + PHASE[par] + (th - 0.5) * 0.1;\n  h -= floor(h);\n  // Red, orange, gold and yellow keep their brightness and change shade by\n  // saturation; a darker gold reads olive and a darker orange brown. The\n  // lift fades out over lime and over rose.\n  const warm = h \u003c 0.2 ? 1 : h \u003c 0.27 ? (0.27 - h) / 0.07 : h > 0.95 ? 1 : h > 0.89 ? (h - 0.89) / 0.06 : 0;\n  const s = 0.5 + 0.4 * q - 0.05 * warm, v = 0.6 + 0.4 * (1 - q) + warm * (0.32 - 0.32 * (1 - q));\n  hsv(h, s, v, S.cRGB, o);\n  S.cId[slot] = id * 3 + par;\n  out[0] = S.cRGB[o];\n  out[1] = S.cRGB[o + 1];\n  out[2] = S.cRGB[o + 2];\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  if (S.cHue !== S.hue) {\n    S.cId.fill(-1);\n    S.cHue = S.hue;\n  }\n  const { T, O, U, UP, clock, rgb } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      let r, g, b;\n      if (T[c] \u003c= clock) {\n        const id = O[c];\n        grainRGB(S, id, par, rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] \u003c= clock && O[c + 1] !== id) || (y + 1 \u003c FH && T[c + GW] \u003c= clock && O[c + GW] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n        else {\n          const age = clock - T[c];\n          if (age \u003c RIM) {\n            const w = 0.8 * (1 - age / RIM);\n            r += (255 - r) * w;\n            g += (255 - g) * w;\n            b += (255 - b) * w;\n          }\n        }\n      } else {\n        const id = U[p];\n        grainRGB(S, id, UP[p], rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] > clock && U[p + 1] !== id) || (y + 1 \u003c FH && T[c + GW] > clock && U[p + W] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n      }\n      display.setPixel(x, y + FY, r, g, b);\n    }\n  }\n  // The plot: the share of the field turned so far, one column per 64th of\n  // the span, filled in the new phase's colour on black, and Avrami's curve\n  // as a pale line across the whole width. A dim fill read brown in gold.\n  const newC = [0, 0, 0];\n  hsv(S.hue + PHASE[par], 0.75, 1, newC, 0);\n  let prev = -1;\n  for (let x = 0; x \u003c W; x++) {\n    const hgt = x \u003c S.filled ? S.meas[x] * TOP : 0;\n    for (let yy = 0; yy \u003c TOP; yy++) {\n      const f = cl(hgt - (TOP - 1 - yy), 0, 1);\n      if (f > 0) display.setPixel(x, yy, newC[0] * f, newC[1] * f, newC[2] * f);\n    }\n    const t = ((x + 1) / W) * S.tEnd, X = 1 - exp(-avramiExp(S, t)), row = cl(floor((1 - X) * TOP - 0.001), 0, TOP - 1);\n    const a = prev \u003c 0 ? row : min(prev, row), bnd = prev \u003c 0 ? row : max(prev, row);\n    for (let yy = a; yy \u003c= bnd; yy++) display.setPixel(x, yy, 235, 235, 235);\n    prev = row;\n  }\n}\n","layer":{"id":"layer-johnson-mehl","type":"code","name":"johnson-mehl","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Johnson-Mehl\n// Family:  cells\n// Idea:    Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Johnson-Mehl tessellation (William Johnson and Robert Mehl, 1939), with Avrami's law (Melvin Avrami, 1939), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1\n//\n// Knob 1: Hue. Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan.\n// Knob 2: Speed. The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s.\n// Knob 3: Rate. The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3.\n// Knob 4: Mode. How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2.\n// Buttons: K1 tap starts the next phase at once, over whatever has turned so far.\n\n// Johnson and Mehl, and Avrami in the same year, asked how much of a sample\n// has turned by time t when nuclei appear at random, at rate I on the ground\n// not yet turned, and every grain grows at speed V. In the plane the answer\n// is X(t) = 1 - exp(-(pi / 3) I V^2 t^3). The exponent counts the nuclei, real\n// or phantom, whose discs would have reached a point by t; the chance that\n// none has is its exponential. A nucleus that falls on turned ground is a\n// phantom and is dropped: nucleate() looks at its cell first.\n//\n// Checked on this field, 64 by 115 LEDs, averaged over 120 phases at the\n// start knobs: the share turned stays within 0.015 of Avrami's curve all the\n// way; in Mode 1 within 0.013, at Rate 80 within 0.009. One phase alone\n// strays more, a median of 0.094 at Rate 4 and 0.034 at Rate 80, and the\n// strip shows one phase. Without the margin below the edges of the field\n// starve, as no grain can come in from outside: the share lagged the curve\n// by up to 0.063, and a phase took 2.14 Avrami times to fill instead of 1.82.\n\n// The plot takes the top 12 rows, a dark row parts it from the field, and\n// the field is the other 115.\nconst W = 64, H = 128, TOP = 12, FY = TOP + 1, FH = H - FY, FN = W * FH;\n// The grains grow on a grid 24 LEDs wider than the field on every side, and\n// nuclei are born there too, so the field is a window on a larger sample.\nconst M = 24, GW = W + 2 * M, GH = FH + 2 * M, GN = GW * GH;\n// Growth speed in LEDs a second at Speed 1; rate in nuclei per 10,000 LEDs\n// a second at Speed 1. The rim is the last 0.8 s of growth, 1.6 LEDs.\nconst V = 2, RATE_UNIT = 1e-4, RIM = 0.8, CACHE = 4096;\nconst { floor, sqrt, exp, log, random, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst G43 = 0.89298; // Gamma(4/3)\n// The phases take turns in three hues, blue, gold and rose at Hue 0, so a\n// phase never grows over one of its own colour, not even after a tap has\n// left two phases showing underneath it.\nconst PHASE = [0.56, 0.1, 0.88];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\n// Two numbers in [0, 1) from a grain's id: its orientation and its shade.\nfunction hash(id, salt) {\n  let h = Math.imul(id ^ salt, 0x9e3779b1);\n  h ^= h >>> 15;\n  h = Math.imul(h, 0x85ebca6b);\n  h ^= h >>> 13;\n  return (h >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: 0, speed: 2, rate: 4, mode: 0.06,\n    clock: 0, gen: 0, nextId: 1, nextBirth: Infinity, lambda: 0, ns: 0,\n    T: new Float32Array(GN), O: new Int32Array(GN), U: new Int32Array(FN), UP: new Uint8Array(FN),\n    meas: new Float32Array(W), filled: 0, X: 0, tEnd: 1,\n    cId: new Int32Array(CACHE).fill(-1), cRGB: new Float32Array(CACHE * 3), cHue: NaN, rgb: new Float32Array(3),\n  };\n}\n\n// The rate of the continuous part and the density of the nuclei all born\n// at once. A pure Johnson-Mehl run with rate I ends with I Gamma(4/3) tau\n// grains per LED, tau = (3 / (pi I V^2))^(1/3) the time at which Avrami's\n// exponent reaches 1. Mode m moves that share m of them to time 0, so the\n// grain count stays about the same from one end of the knob to the other.\nfunction rates(S) {\n  const I = S.rate * RATE_UNIT, tau = Math.cbrt(3 / (PI * I * V * V));\n  return { I, cont: (1 - S.mode) * I, sat: S.mode * I * G43 * tau };\n}\n\nfunction nucleate(S, x, y, t) {\n  const { T, O } = S;\n  const cx = floor(x), cy = floor(y);\n  if (T[cy * GW + cx] \u003c= t) return false;\n  const id = S.nextId++;\n  // T_i(p) = t_i + |p - x_i| / V, kept where it is the earliest. Only as\n  // far as the front can get by 2.5 plot spans, five times Avrami's time;\n  // by then a cell is still open with odds of exp(-25) or less. At Rate 80\n  // in Mode 1 that cut the 400 nuclei born on one frame from 18 ms to 3.\n  const R = V * max(0, 2.5 * S.tEnd - t);\n  const i0 = max(0, floor(x - R)), i1 = min(GW - 1, floor(x + R)), j0 = max(0, floor(y - R)), j1 = min(GH - 1, floor(y + R));\n  for (let j = j0; j \u003c= j1; j++) {\n    const dy = j + 0.5 - y, dy2 = dy * dy;\n    for (let i = i0, c = j * GW + i0; i \u003c= i1; i++, c++) {\n      const dx = i + 0.5 - x, a = t + sqrt(dx * dx + dy2) / V;\n      if (a \u003c T[c]) {\n        T[c] = a;\n        O[c] = id;\n      }\n    }\n  }\n  return true;\n}\n\nfunction drawWait(S) {\n  S.nextBirth = S.lambda > 0 ? S.clock - log(1 - random()) / S.lambda : Infinity;\n}\n\n// A new phase: what shows now becomes the layer underneath, the grid is\n// cleared, and the site-saturated share is born at once.\nfunction nextPhase(S) {\n  const { T, O, U, UP } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      if (T[c] \u003c= S.clock && O[c] > 0) {\n        U[p] = O[c];\n        UP[p] = par;\n      }\n    }\n  S.gen++;\n  S.clock = 0;\n  T.fill(Infinity);\n  O.fill(0);\n  const r = rates(S);\n  S.ns = r.sat;\n  S.lambda = r.cont * GN;\n  // The span first: it sets how far each nucleus below is drawn.\n  theoryEnd(S);\n  // A Poisson count of nuclei at time 0, by inversion.\n  const mean = r.sat * GN;\n  let n = 0;\n  if (mean > 0) {\n    let L = exp(-min(mean, 600)), p = 1, u = random();\n    if (mean > 600) n = floor(mean);\n    else {\n      let acc = L;\n      while (u > acc && n \u003c 4000) {\n        n++;\n        p *= mean / n;\n        acc += L * p;\n      }\n    }\n  }\n  for (let i = 0; i \u003c n; i++) nucleate(S, random() * GW, random() * GH, 0);\n  drawWait(S);\n  S.meas.fill(0);\n  S.filled = 0;\n  S.X = 0;\n}\n\n// Avrami: X(t) = 1 - exp(-pi V^2 (Ns t^2 + (1 - m) I t^3 / 3)). The plot\n// runs to twice the time at which the exponent is 1.\nfunction avramiExp(S, t) {\n  const r = rates(S);\n  return PI * V * V * (S.ns * t * t + (r.cont * t * t * t) / 3);\n}\nfunction theoryEnd(S) {\n  let lo = 0, hi = 1;\n  while (avramiExp(S, hi) \u003c 1) hi *= 2;\n  for (let k = 0; k \u003c 40; k++) {\n    const mid = 0.5 * (lo + hi);\n    if (avramiExp(S, mid) \u003c 1) lo = mid;\n    else hi = mid;\n  }\n  S.tEnd = 2 * hi;\n}\n\n// Advance the clock by d, birthing the continuous nuclei in order, and\n// measure the share of the field turned.\nfunction advance(S, d) {\n  const target = S.clock + d;\n  while (S.nextBirth \u003c= target) {\n    S.clock = S.nextBirth;\n    nucleate(S, random() * GW, random() * GH, S.clock);\n    drawWait(S);\n  }\n  S.clock = target;\n  let n = 0;\n  const T = S.T;\n  for (let y = 0; y \u003c FH; y++) for (let c = (y + M) * GW + M, e = c + W; c \u003c e; c++) if (T[c] \u003c= target) n++;\n  S.X = n / FN;\n  return n === FN;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 4, 80);\n  S.mode = cl(k[3], 0, 1);\n  const lam = rates(S).cont * GN;\n  if (lam !== S.lambda) {\n    S.lambda = lam;\n    drawWait(S);\n    theoryEnd(S);\n  }\n  if (!S.ready) {\n    // The first phase grows to the end before the first frame, so the\n    // panel opens full and the second phase starts over it.\n    S.gen = 2;\n    nextPhase(S);\n    while (!advance(S, 0.25) && S.clock \u003c 3 * S.tEnd);\n    nextPhase(S);\n    S.ready = true;\n  }\n  const tap = input.btnPressed && input.btnPressed[0];\n  const full = advance(S, d * S.speed);\n  // The plot takes one column per 64th of its time span.\n  while (S.filled \u003c W && S.clock >= ((S.filled + 1) / W) * S.tEnd) S.meas[S.filled++] = S.X;\n  if (full || tap || S.clock > 3 * S.tEnd) nextPhase(S);\n}\n\nfunction grainRGB(S, id, par, out) {\n  const slot = id & (CACHE - 1), o = slot * 3;\n  if (S.cId[slot] === id * 3 + par) {\n    out[0] = S.cRGB[o];\n    out[1] = S.cRGB[o + 1];\n    out[2] = S.cRGB[o + 2];\n    return;\n  }\n  const th = hash(id, 0x51ed), q = hash(id, 0x2c1b);\n  let h = S.hue + PHASE[par] + (th - 0.5) * 0.1;\n  h -= floor(h);\n  // Red, orange, gold and yellow keep their brightness and change shade by\n  // saturation; a darker gold reads olive and a darker orange brown. The\n  // lift fades out over lime and over rose.\n  const warm = h \u003c 0.2 ? 1 : h \u003c 0.27 ? (0.27 - h) / 0.07 : h > 0.95 ? 1 : h > 0.89 ? (h - 0.89) / 0.06 : 0;\n  const s = 0.5 + 0.4 * q - 0.05 * warm, v = 0.6 + 0.4 * (1 - q) + warm * (0.32 - 0.32 * (1 - q));\n  hsv(h, s, v, S.cRGB, o);\n  S.cId[slot] = id * 3 + par;\n  out[0] = S.cRGB[o];\n  out[1] = S.cRGB[o + 1];\n  out[2] = S.cRGB[o + 2];\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  if (S.cHue !== S.hue) {\n    S.cId.fill(-1);\n    S.cHue = S.hue;\n  }\n  const { T, O, U, UP, clock, rgb } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      let r, g, b;\n      if (T[c] \u003c= clock) {\n        const id = O[c];\n        grainRGB(S, id, par, rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] \u003c= clock && O[c + 1] !== id) || (y + 1 \u003c FH && T[c + GW] \u003c= clock && O[c + GW] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n        else {\n          const age = clock - T[c];\n          if (age \u003c RIM) {\n            const w = 0.8 * (1 - age / RIM);\n            r += (255 - r) * w;\n            g += (255 - g) * w;\n            b += (255 - b) * w;\n          }\n        }\n      } else {\n        const id = U[p];\n        grainRGB(S, id, UP[p], rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] > clock && U[p + 1] !== id) || (y + 1 \u003c FH && T[c + GW] > clock && U[p + W] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n      }\n      display.setPixel(x, y + FY, r, g, b);\n    }\n  }\n  // The plot: the share of the field turned so far, one column per 64th of\n  // the span, filled in the new phase's colour on black, and Avrami's curve\n  // as a pale line across the whole width. A dim fill read brown in gold.\n  const newC = [0, 0, 0];\n  hsv(S.hue + PHASE[par], 0.75, 1, newC, 0);\n  let prev = -1;\n  for (let x = 0; x \u003c W; x++) {\n    const hgt = x \u003c S.filled ? S.meas[x] * TOP : 0;\n    for (let yy = 0; yy \u003c TOP; yy++) {\n      const f = cl(hgt - (TOP - 1 - yy), 0, 1);\n      if (f > 0) display.setPixel(x, yy, newC[0] * f, newC[1] * f, newC[2] * f);\n    }\n    const t = ((x + 1) / W) * S.tEnd, X = 1 - exp(-avramiExp(S, t)), row = cl(floor((1 - X) * TOP - 0.001), 0, TOP - 1);\n    const a = prev \u003c 0 ? row : min(prev, row), bnd = prev \u003c 0 ? row : max(prev, row);\n    for (let yy = a; yy \u003c= bnd; yy++) display.setPixel(x, yy, 235, 235, 235);\n    prev = row;\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan."},{"name":"Speed","min":0.2,"max":3,"about":"The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s."},{"name":"Rate","min":4,"max":80,"about":"The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3."},{"name":"Mode","min":0,"max":1,"about":"How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2."}],"start":[0,2,4,0.06],"measures":{"motion":0.0659,"detail":0.0824,"edges":0.8775,"complexity":0.3635,"coverage":0.9103,"colour":0.4567,"drift":0.1875},"knobResponse":[0.3746,0.1973,0.3888,0.3417]},{"slug":"joukowsky-airfoil","title":"Joukowsky Airfoil","family":"physics","round":35,"note":"주콥스키 사상으로 원을 지나는 이상 흐름을 날개를 지나는 흐름으로 옮겼어요. 44줄 길이의 날개 위로 1초마다 맨 윗줄에서 놓은 염료 줄이 내려와 앞전의 붉은 정체점에서 갈라지고, 오른쪽 흡입면으로 간 반쪽이 뒷전에 12.6줄 먼저 닿아요. K3 은 받음각을 0도에서 15도로 올려 그 앞섬을 46줄까지 늘리고, K1 을 누르면 순환을 10초 동안 빼서 두 반쪽이 거의 같이 닿아요.","idea":"A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.","buttons":"K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.","code":"// ===== Patternflow pattern =====\n// Title:   Joukowsky Airfoil\n// Family:  physics\n// Idea:    A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joukowsky airfoil (Nikolai Zhukovsky, 1910)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12\n//\n// Knob 1: Hue. Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it.\n// Knob 2: Speed. How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten.\n// Knob 3: Attack. The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose.\n// Knob 4: Camber. The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows.\n// Buttons: K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.\n\n// Ideal flow past a circle in the ζ-plane, carried to flow past an airfoil\n// by z = ζ + c²/ζ. The circle goes through ζ = c, which lands on the sharp\n// trailing edge at z = 2c, and its centre ζ0 = -ε + iδ sits left of the\n// origin for thickness and above it for camber. With U = 1,\n//   W(ζ) = ζ' e^{-iα} + R² e^{iα}/ζ' + (iΓ/2π) log ζ',   ζ' = ζ - ζ0,\n// and the Kutta condition, that the flow leaves the trailing edge smoothly,\n// fixes Γ = 4πR sin(α + β), β the angle of ζ0 seen from c. Lengths are in\n// LEDs: c = 11, so the chord is 44 rows, centred on the panel, and ε =\n// 0.12 c makes the wing 6 LEDs at its thickest, 14% of the chord. The free\n// stream runs down the panel at one LED per unit of time.\nconst W = 64, H = 128, NP = W * H, CX = 32, CY = 64;\nconst C = 11, EPS = 0.12 * C, LAM = 20, DUTY = 2.2 / 20, TMAX = 400, CHUNK = 768, SPACE = 6;\nconst { min, max, floor, round, sqrt, sin, cos, atan2, abs, exp, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// One flow: the circle, the angle of attack and the circulation.\nfunction makeFlow(alphaDeg, camber, kutta) {\n  const a = (alphaDeg * PI) / 180, d = camber * 2 * C;\n  const z0r = -EPS, z0i = d, R = sqrt((C + EPS) ** 2 + d * d), beta = atan2(d, C + EPS);\n  const gam = kutta ? 4 * PI * R * sin(a + beta) : 0;\n  return { a, ca: cos(a), sa: sin(a), z0r, z0i, R, R2: R * R, beta, gam, key: alphaDeg.toFixed(1) + \"/\" + camber.toFixed(3) + \"/\" + kutta };\n}\n\n// The flow at ζ: o[0], o[1] = dζ/dt, o[2] = speed on the panel, o[3] =\n// |dz/dζ|. dζ/dt = conj(dW/dζ) / |dz/dζ|². At the trailing edge dz/dζ is 0;\n// with the Kutta condition dW/dζ is 0 there too and the floor on |dz/dζ|²\n// only keeps 0/0 away, without it the speed there is capped at 6.\nfunction flowAt(F, zr, zi, o) {\n  const pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n  const ir = pr / r2, ii = -pi / r2, i2r = ir * ir - ii * ii, i2i = 2 * ir * ii;\n  const er = F.ca * i2r - F.sa * i2i, ei = F.ca * i2i + F.sa * i2r, g = F.gam / TAU;\n  const wr = F.ca - F.R2 * er - g * ii, wi = -F.sa - F.R2 * ei + g * ir;\n  const q2 = zr * zr + zi * zi, jr = zr / q2, ji = -zi / q2, j2r = jr * jr - ji * ji, j2i = 2 * jr * ji;\n  const dr = 1 - C * C * j2r, di = -C * C * j2i, J2 = max(1e-8, dr * dr + di * di);\n  let sp = sqrt((wr * wr + wi * wi) / J2), k = 1;\n  if (sp > 6) (k = 6 / sp), (sp = 6);\n  o[0] = (k * wr) / J2;\n  o[1] = (-k * wi) / J2;\n  o[2] = sp;\n  o[3] = sqrt(J2);\n}\n\n// ζ to the panel: z = ζ + c²/ζ, turned back by α so the free stream runs\n// down the panel and the suction side faces right. o[0] = X, o[1] = Y.\nfunction toPanel(F, zr, zi, o) {\n  const q2 = zr * zr + zi * zi, xr = zr + (C * C * zr) / q2, xi = zi - (C * C * zi) / q2;\n  o[0] = CX + xi * F.ca - xr * F.sa;\n  o[1] = CY + xr * F.ca + xi * F.sa;\n}\n\n// The panel to ζ: of the two roots of ζ² - zζ + c² = 0, the one outside\n// the circle. o[2] = |ζ'|²; less than R² means the LED is inside the wing.\nfunction toZeta(F, X, Y, o) {\n  const pr = Y - CY, pi = X - CX, zr = pr * F.ca - pi * F.sa, zi = pr * F.sa + pi * F.ca;\n  const wr = zr * zr - zi * zi - 4 * C * C, wi = 2 * zr * zi, m = sqrt(wr * wr + wi * wi);\n  const sr = sqrt(max(0, (m + wr) / 2)), si = (wi \u003c 0 ? -1 : 1) * sqrt(max(0, (m - wr) / 2));\n  const ar = (zr + sr) / 2, ai = (zi + si) / 2, br = (zr - sr) / 2, bi = (zi - si) / 2;\n  const da = (ar - F.z0r) ** 2 + (ai - F.z0i) ** 2, db = (br - F.z0r) ** 2 + (bi - F.z0i) ** 2;\n  if (da >= db) (o[0] = ar), (o[1] = ai), (o[2] = da);\n  else (o[0] = br), (o[1] = bi), (o[2] = db);\n}\n\n// When the fluid at an LED crossed the top row: back along its stream line,\n// in the ζ-plane where the wing is a circle and easy to keep out of, adding\n// up time. Midpoint steps of 0.35 LED by the surface, up to 3 LEDs and 3\n// time units away from it.\nfunction arrival(F, X, Y, f, pos) {\n  toZeta(F, X, Y, f);\n  if (f[2] \u003c F.R2) return -1;\n  let zr = f[0], zi = f[1], T = 0;\n  for (let it = 0; it \u003c 400; it++) {\n    flowAt(F, zr, zi, f);\n    const pr = zr - F.z0r, pi = zi - F.z0i, dist = (sqrt(pr * pr + pi * pi) - F.R) * f[3];\n    const dt = min(cl(0.35 + 0.3 * dist, 0.35, 3) / max(f[2], 1e-6), 3);\n    flowAt(F, zr - 0.5 * dt * f[0], zi - 0.5 * dt * f[1], f);\n    zr -= dt * f[0];\n    zi -= dt * f[1];\n    const qr = zr - F.z0r, qi = zi - F.z0i, q2 = qr * qr + qi * qi;\n    if (q2 \u003c F.R2) {\n      const s = (F.R * 1.0001) / sqrt(q2);\n      zr = F.z0r + qr * s;\n      zi = F.z0i + qi * s;\n    }\n    T += dt;\n    toPanel(F, zr, zi, pos);\n    // Past the top row: give back the part of the step beyond it.\n    if (pos[1] \u003c= 0) return max(0, T + pos[1] / max(0.3, f[2]));\n    if (T > TMAX) return TMAX;\n  }\n  return TMAX;\n}\n\nfunction newField(F) {\n  return { F, T: new Float32Array(NP), G: new Float32Array(NP), psi: new Float32Array(NP), sp: new Float32Array(NP), body: new Float32Array(NP), next: 0, st: [0, 0, 0, 0] };\n}\n\n// Arrival times for LEDs from..to of a field; the rest once they are all in.\nfunction fill(Fd, to) {\n  const { F, T, G, psi, sp, body } = Fd, f = new Float64Array(4), pos = [0, 0];\n  for (let p = Fd.next; p \u003c to; p++) T[p] = arrival(F, (p % W) + 0.5, floor(p / W) + 0.5, f, pos);\n  Fd.next = to;\n  if (to \u003c NP) return false;\n  for (let p = 0; p \u003c NP; p++) {\n    toZeta(F, (p % W) + 0.5, floor(p / W) + 0.5, f);\n    const zr = f[0], zi = f[1], pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n    flowAt(F, zr, zi, f);\n    sp[p] = f[2];\n    // Inside the wing or within half an LED of its edge, by the distance\n    // to the circle stretched by |dz/dζ|.\n    body[p] = cl(0.5 - (sqrt(r2) - F.R) * f[3], 0, 1);\n    // ψ = Im W.\n    psi[p] = pi * F.ca - pr * F.sa + (F.R2 * (F.sa * pr - F.ca * pi)) / r2 + (F.gam / (2 * TAU)) * log(r2);\n  }\n  // How fast the arrival time changes across one LED, from the smaller of\n  // the two one-sided steps, so the jump in the wake behind the trailing\n  // edge does not count as steep.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p], d = (q) => (T[q] \u003c 0 ? 50 : min(50, abs(T[q] - t)));\n      const gx = min(x > 0 ? d(p - 1) : 50, x \u003c W - 1 ? d(p + 1) : 50), gy = min(y > 0 ? d(p - W) : 50, y \u003c H - 1 ? d(p + W) : 50);\n      G[p] = sqrt(gx * gx + gy * gy);\n    }\n  // The two stagnation points, where sin(θ - α) = -Γ / 4πR on the circle.\n  const s0 = cl(-F.gam / (4 * PI * F.R), -1, 1), th = [F.a + Math.asin(s0), F.a + PI - Math.asin(s0)];\n  for (let i = 0; i \u003c 2; i++) {\n    toPanel(F, F.z0r + F.R * cos(th[i]), F.z0i + F.R * sin(th[i]), pos);\n    Fd.st[i * 2] = pos[0];\n    Fd.st[i * 2 + 1] = pos[1];\n  }\n  return true;\n}\n\nexport function setup(params) {\n  params.s = { cur: null, old: null, nxt: null, fade: 1, s: 0, hue: 0, speed: 2, off: 0, pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(NP * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  // K1 takes the circulation away for 10 s; a second tap gives it back.\n  if (input.btnPressed && input.btnPressed[0]) P.off = P.off > 0 ? 0 : 10;\n  P.off = max(0, P.off - d);\n  const want = makeFlow(cl(k[2], 0, 15), cl(k[3], 0, 0.12), P.off \u003c= 0);\n  if (!P.cur) {\n    P.cur = newField(want);\n    fill(P.cur, NP);\n  } else if (!P.nxt && want.key !== P.cur.F.key) P.nxt = newField(want);\n  // A new flow is worked out 768 LEDs a frame, eleven frames for the panel,\n  // then faded in over 0.4 s; a knob still turning starts the next one.\n  if (P.nxt && fill(P.nxt, min(NP, P.nxt.next + CHUNK))) {\n    P.old = P.cur;\n    P.cur = P.nxt;\n    P.nxt = null;\n    P.fade = 0;\n  }\n  P.fade = min(1, P.fade + d / 0.4);\n  P.s += d * 10 * P.speed;\n}\n\nfunction paint(P, Fd, wgt, rgb) {\n  const { T, G, psi, sp, body } = Fd, pal = P.pal;\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) {\n    let r = 0.012, g = 0.016, b = 0.05;\n    // Stream lines every 6 units of ψ, about one LED wide wherever they are.\n    const u = psi[p] / SPACE, du = (abs(u - round(u)) * SPACE) / max(0.05, sp[p]), sl = 0.15 * exp(-2 * du * du);\n    r += sl * 0.45;\n    g += sl * 0.55;\n    b += sl * 0.8;\n    const t = T[p];\n    if (t >= 0) {\n      // The dye: a puff across the top row every 20 time units, lasting 2.2\n      // of them, so in the free stream a line 2.2 LEDs thick. Where the flow\n      // slows the lines crowd and thin; a line thinner than 1.6 LEDs is drawn\n      // 1.6 wide and dimmer, and where they come closer than 4 LEDs they\n      // merge into the haze they would make, 2.2/20 of full.\n      const ph = (P.s - t) / LAM - DUTY / 2, kk = round(ph), per = LAM / max(0.02, G[p]);\n      const wpx = DUTY * per, hw = max(0.8, wpx / 2), dpx = abs(ph - kk) * per;\n      const line = cl(hw + 0.5 - dpx, 0, 1) * min(1, wpx / (2 * hw)), mix = cl((per - 4) / 4, 0, 1);\n      const c = (((kk % 4) + 4) % 4) * 3, dye = line * mix, haze = DUTY * (1 - mix);\n      r += dye * pal[c] + haze * pal[12];\n      g += dye * pal[c + 1] + haze * pal[13];\n      b += dye * pal[c + 2] + haze * pal[14];\n    }\n    const bo = body[p];\n    r += (0.82 - r) * bo;\n    g += (0.84 - g) * bo;\n    b += (0.9 - b) * bo;\n    rgb[o] += wgt * r;\n    rgb[o + 1] += wgt * g;\n    rgb[o + 2] += wgt * b;\n  }\n}\n\n// The two stagnation points, a red LED each on the wing's edge.\nfunction marks(Fd, wgt, rgb) {\n  for (let i = 0; i \u003c 2; i++) {\n    const x = round(Fd.st[i * 2] - 0.5), y = round(Fd.st[i * 2 + 1] - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    rgb[o] += (1 - rgb[o]) * wgt;\n    rgb[o + 1] += (0.12 - rgb[o + 1]) * wgt;\n    rgb[o + 2] += (0.1 - rgb[o + 2]) * wgt;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cur) return;\n  const { pal, rgb } = P;\n  if (P.palHue !== P.hue) {\n    // Four dyes in turn, so a line can be followed past the wing: gold,\n    // green, blue and pink at Hue 0. The haze is their mean.\n    pal.fill(0, 12);\n    for (let i = 0; i \u003c 4; i++) {\n      hsv(P.hue + 0.12 + i * 0.25, 0.7, 1, pal, i * 3);\n      for (let c = 0; c \u003c 3; c++) pal[12 + c] += pal[i * 3 + c] / 4;\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  if (P.old && P.fade \u003c 1) paint(P, P.old, 1 - P.fade, rgb);\n  const w = P.old && P.fade \u003c 1 ? P.fade : 1;\n  paint(P, P.cur, w, rgb);\n  if (w \u003c 1) marks(P.old, 1 - w, rgb);\n  marks(P.cur, w, rgb);\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) display.setPixel(p % W, floor(p / W), min(255, rgb[o] * 255), min(255, rgb[o + 1] * 255), min(255, rgb[o + 2] * 255));\n}\n","layer":{"id":"layer-joukowsky-airfoil","type":"code","name":"joukowsky-airfoil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Joukowsky Airfoil\n// Family:  physics\n// Idea:    A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joukowsky airfoil (Nikolai Zhukovsky, 1910)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12\n//\n// Knob 1: Hue. Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it.\n// Knob 2: Speed. How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten.\n// Knob 3: Attack. The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose.\n// Knob 4: Camber. The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows.\n// Buttons: K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.\n\n// Ideal flow past a circle in the ζ-plane, carried to flow past an airfoil\n// by z = ζ + c²/ζ. The circle goes through ζ = c, which lands on the sharp\n// trailing edge at z = 2c, and its centre ζ0 = -ε + iδ sits left of the\n// origin for thickness and above it for camber. With U = 1,\n//   W(ζ) = ζ' e^{-iα} + R² e^{iα}/ζ' + (iΓ/2π) log ζ',   ζ' = ζ - ζ0,\n// and the Kutta condition, that the flow leaves the trailing edge smoothly,\n// fixes Γ = 4πR sin(α + β), β the angle of ζ0 seen from c. Lengths are in\n// LEDs: c = 11, so the chord is 44 rows, centred on the panel, and ε =\n// 0.12 c makes the wing 6 LEDs at its thickest, 14% of the chord. The free\n// stream runs down the panel at one LED per unit of time.\nconst W = 64, H = 128, NP = W * H, CX = 32, CY = 64;\nconst C = 11, EPS = 0.12 * C, LAM = 20, DUTY = 2.2 / 20, TMAX = 400, CHUNK = 768, SPACE = 6;\nconst { min, max, floor, round, sqrt, sin, cos, atan2, abs, exp, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// One flow: the circle, the angle of attack and the circulation.\nfunction makeFlow(alphaDeg, camber, kutta) {\n  const a = (alphaDeg * PI) / 180, d = camber * 2 * C;\n  const z0r = -EPS, z0i = d, R = sqrt((C + EPS) ** 2 + d * d), beta = atan2(d, C + EPS);\n  const gam = kutta ? 4 * PI * R * sin(a + beta) : 0;\n  return { a, ca: cos(a), sa: sin(a), z0r, z0i, R, R2: R * R, beta, gam, key: alphaDeg.toFixed(1) + \"/\" + camber.toFixed(3) + \"/\" + kutta };\n}\n\n// The flow at ζ: o[0], o[1] = dζ/dt, o[2] = speed on the panel, o[3] =\n// |dz/dζ|. dζ/dt = conj(dW/dζ) / |dz/dζ|². At the trailing edge dz/dζ is 0;\n// with the Kutta condition dW/dζ is 0 there too and the floor on |dz/dζ|²\n// only keeps 0/0 away, without it the speed there is capped at 6.\nfunction flowAt(F, zr, zi, o) {\n  const pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n  const ir = pr / r2, ii = -pi / r2, i2r = ir * ir - ii * ii, i2i = 2 * ir * ii;\n  const er = F.ca * i2r - F.sa * i2i, ei = F.ca * i2i + F.sa * i2r, g = F.gam / TAU;\n  const wr = F.ca - F.R2 * er - g * ii, wi = -F.sa - F.R2 * ei + g * ir;\n  const q2 = zr * zr + zi * zi, jr = zr / q2, ji = -zi / q2, j2r = jr * jr - ji * ji, j2i = 2 * jr * ji;\n  const dr = 1 - C * C * j2r, di = -C * C * j2i, J2 = max(1e-8, dr * dr + di * di);\n  let sp = sqrt((wr * wr + wi * wi) / J2), k = 1;\n  if (sp > 6) (k = 6 / sp), (sp = 6);\n  o[0] = (k * wr) / J2;\n  o[1] = (-k * wi) / J2;\n  o[2] = sp;\n  o[3] = sqrt(J2);\n}\n\n// ζ to the panel: z = ζ + c²/ζ, turned back by α so the free stream runs\n// down the panel and the suction side faces right. o[0] = X, o[1] = Y.\nfunction toPanel(F, zr, zi, o) {\n  const q2 = zr * zr + zi * zi, xr = zr + (C * C * zr) / q2, xi = zi - (C * C * zi) / q2;\n  o[0] = CX + xi * F.ca - xr * F.sa;\n  o[1] = CY + xr * F.ca + xi * F.sa;\n}\n\n// The panel to ζ: of the two roots of ζ² - zζ + c² = 0, the one outside\n// the circle. o[2] = |ζ'|²; less than R² means the LED is inside the wing.\nfunction toZeta(F, X, Y, o) {\n  const pr = Y - CY, pi = X - CX, zr = pr * F.ca - pi * F.sa, zi = pr * F.sa + pi * F.ca;\n  const wr = zr * zr - zi * zi - 4 * C * C, wi = 2 * zr * zi, m = sqrt(wr * wr + wi * wi);\n  const sr = sqrt(max(0, (m + wr) / 2)), si = (wi \u003c 0 ? -1 : 1) * sqrt(max(0, (m - wr) / 2));\n  const ar = (zr + sr) / 2, ai = (zi + si) / 2, br = (zr - sr) / 2, bi = (zi - si) / 2;\n  const da = (ar - F.z0r) ** 2 + (ai - F.z0i) ** 2, db = (br - F.z0r) ** 2 + (bi - F.z0i) ** 2;\n  if (da >= db) (o[0] = ar), (o[1] = ai), (o[2] = da);\n  else (o[0] = br), (o[1] = bi), (o[2] = db);\n}\n\n// When the fluid at an LED crossed the top row: back along its stream line,\n// in the ζ-plane where the wing is a circle and easy to keep out of, adding\n// up time. Midpoint steps of 0.35 LED by the surface, up to 3 LEDs and 3\n// time units away from it.\nfunction arrival(F, X, Y, f, pos) {\n  toZeta(F, X, Y, f);\n  if (f[2] \u003c F.R2) return -1;\n  let zr = f[0], zi = f[1], T = 0;\n  for (let it = 0; it \u003c 400; it++) {\n    flowAt(F, zr, zi, f);\n    const pr = zr - F.z0r, pi = zi - F.z0i, dist = (sqrt(pr * pr + pi * pi) - F.R) * f[3];\n    const dt = min(cl(0.35 + 0.3 * dist, 0.35, 3) / max(f[2], 1e-6), 3);\n    flowAt(F, zr - 0.5 * dt * f[0], zi - 0.5 * dt * f[1], f);\n    zr -= dt * f[0];\n    zi -= dt * f[1];\n    const qr = zr - F.z0r, qi = zi - F.z0i, q2 = qr * qr + qi * qi;\n    if (q2 \u003c F.R2) {\n      const s = (F.R * 1.0001) / sqrt(q2);\n      zr = F.z0r + qr * s;\n      zi = F.z0i + qi * s;\n    }\n    T += dt;\n    toPanel(F, zr, zi, pos);\n    // Past the top row: give back the part of the step beyond it.\n    if (pos[1] \u003c= 0) return max(0, T + pos[1] / max(0.3, f[2]));\n    if (T > TMAX) return TMAX;\n  }\n  return TMAX;\n}\n\nfunction newField(F) {\n  return { F, T: new Float32Array(NP), G: new Float32Array(NP), psi: new Float32Array(NP), sp: new Float32Array(NP), body: new Float32Array(NP), next: 0, st: [0, 0, 0, 0] };\n}\n\n// Arrival times for LEDs from..to of a field; the rest once they are all in.\nfunction fill(Fd, to) {\n  const { F, T, G, psi, sp, body } = Fd, f = new Float64Array(4), pos = [0, 0];\n  for (let p = Fd.next; p \u003c to; p++) T[p] = arrival(F, (p % W) + 0.5, floor(p / W) + 0.5, f, pos);\n  Fd.next = to;\n  if (to \u003c NP) return false;\n  for (let p = 0; p \u003c NP; p++) {\n    toZeta(F, (p % W) + 0.5, floor(p / W) + 0.5, f);\n    const zr = f[0], zi = f[1], pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n    flowAt(F, zr, zi, f);\n    sp[p] = f[2];\n    // Inside the wing or within half an LED of its edge, by the distance\n    // to the circle stretched by |dz/dζ|.\n    body[p] = cl(0.5 - (sqrt(r2) - F.R) * f[3], 0, 1);\n    // ψ = Im W.\n    psi[p] = pi * F.ca - pr * F.sa + (F.R2 * (F.sa * pr - F.ca * pi)) / r2 + (F.gam / (2 * TAU)) * log(r2);\n  }\n  // How fast the arrival time changes across one LED, from the smaller of\n  // the two one-sided steps, so the jump in the wake behind the trailing\n  // edge does not count as steep.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p], d = (q) => (T[q] \u003c 0 ? 50 : min(50, abs(T[q] - t)));\n      const gx = min(x > 0 ? d(p - 1) : 50, x \u003c W - 1 ? d(p + 1) : 50), gy = min(y > 0 ? d(p - W) : 50, y \u003c H - 1 ? d(p + W) : 50);\n      G[p] = sqrt(gx * gx + gy * gy);\n    }\n  // The two stagnation points, where sin(θ - α) = -Γ / 4πR on the circle.\n  const s0 = cl(-F.gam / (4 * PI * F.R), -1, 1), th = [F.a + Math.asin(s0), F.a + PI - Math.asin(s0)];\n  for (let i = 0; i \u003c 2; i++) {\n    toPanel(F, F.z0r + F.R * cos(th[i]), F.z0i + F.R * sin(th[i]), pos);\n    Fd.st[i * 2] = pos[0];\n    Fd.st[i * 2 + 1] = pos[1];\n  }\n  return true;\n}\n\nexport function setup(params) {\n  params.s = { cur: null, old: null, nxt: null, fade: 1, s: 0, hue: 0, speed: 2, off: 0, pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(NP * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  // K1 takes the circulation away for 10 s; a second tap gives it back.\n  if (input.btnPressed && input.btnPressed[0]) P.off = P.off > 0 ? 0 : 10;\n  P.off = max(0, P.off - d);\n  const want = makeFlow(cl(k[2], 0, 15), cl(k[3], 0, 0.12), P.off \u003c= 0);\n  if (!P.cur) {\n    P.cur = newField(want);\n    fill(P.cur, NP);\n  } else if (!P.nxt && want.key !== P.cur.F.key) P.nxt = newField(want);\n  // A new flow is worked out 768 LEDs a frame, eleven frames for the panel,\n  // then faded in over 0.4 s; a knob still turning starts the next one.\n  if (P.nxt && fill(P.nxt, min(NP, P.nxt.next + CHUNK))) {\n    P.old = P.cur;\n    P.cur = P.nxt;\n    P.nxt = null;\n    P.fade = 0;\n  }\n  P.fade = min(1, P.fade + d / 0.4);\n  P.s += d * 10 * P.speed;\n}\n\nfunction paint(P, Fd, wgt, rgb) {\n  const { T, G, psi, sp, body } = Fd, pal = P.pal;\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) {\n    let r = 0.012, g = 0.016, b = 0.05;\n    // Stream lines every 6 units of ψ, about one LED wide wherever they are.\n    const u = psi[p] / SPACE, du = (abs(u - round(u)) * SPACE) / max(0.05, sp[p]), sl = 0.15 * exp(-2 * du * du);\n    r += sl * 0.45;\n    g += sl * 0.55;\n    b += sl * 0.8;\n    const t = T[p];\n    if (t >= 0) {\n      // The dye: a puff across the top row every 20 time units, lasting 2.2\n      // of them, so in the free stream a line 2.2 LEDs thick. Where the flow\n      // slows the lines crowd and thin; a line thinner than 1.6 LEDs is drawn\n      // 1.6 wide and dimmer, and where they come closer than 4 LEDs they\n      // merge into the haze they would make, 2.2/20 of full.\n      const ph = (P.s - t) / LAM - DUTY / 2, kk = round(ph), per = LAM / max(0.02, G[p]);\n      const wpx = DUTY * per, hw = max(0.8, wpx / 2), dpx = abs(ph - kk) * per;\n      const line = cl(hw + 0.5 - dpx, 0, 1) * min(1, wpx / (2 * hw)), mix = cl((per - 4) / 4, 0, 1);\n      const c = (((kk % 4) + 4) % 4) * 3, dye = line * mix, haze = DUTY * (1 - mix);\n      r += dye * pal[c] + haze * pal[12];\n      g += dye * pal[c + 1] + haze * pal[13];\n      b += dye * pal[c + 2] + haze * pal[14];\n    }\n    const bo = body[p];\n    r += (0.82 - r) * bo;\n    g += (0.84 - g) * bo;\n    b += (0.9 - b) * bo;\n    rgb[o] += wgt * r;\n    rgb[o + 1] += wgt * g;\n    rgb[o + 2] += wgt * b;\n  }\n}\n\n// The two stagnation points, a red LED each on the wing's edge.\nfunction marks(Fd, wgt, rgb) {\n  for (let i = 0; i \u003c 2; i++) {\n    const x = round(Fd.st[i * 2] - 0.5), y = round(Fd.st[i * 2 + 1] - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    rgb[o] += (1 - rgb[o]) * wgt;\n    rgb[o + 1] += (0.12 - rgb[o + 1]) * wgt;\n    rgb[o + 2] += (0.1 - rgb[o + 2]) * wgt;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cur) return;\n  const { pal, rgb } = P;\n  if (P.palHue !== P.hue) {\n    // Four dyes in turn, so a line can be followed past the wing: gold,\n    // green, blue and pink at Hue 0. The haze is their mean.\n    pal.fill(0, 12);\n    for (let i = 0; i \u003c 4; i++) {\n      hsv(P.hue + 0.12 + i * 0.25, 0.7, 1, pal, i * 3);\n      for (let c = 0; c \u003c 3; c++) pal[12 + c] += pal[i * 3 + c] / 4;\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  if (P.old && P.fade \u003c 1) paint(P, P.old, 1 - P.fade, rgb);\n  const w = P.old && P.fade \u003c 1 ? P.fade : 1;\n  paint(P, P.cur, w, rgb);\n  if (w \u003c 1) marks(P.old, 1 - w, rgb);\n  marks(P.cur, w, rgb);\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) display.setPixel(p % W, floor(p / W), min(255, rgb[o] * 255), min(255, rgb[o + 1] * 255), min(255, rgb[o + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten."},{"name":"Attack","min":0,"max":15,"about":"The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose."},{"name":"Camber","min":0,"max":0.12,"about":"The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows."}],"start":[0,2,0,0.06],"measures":{"motion":1.8048,"detail":0.0682,"edges":0.3096,"complexity":0.7976,"coverage":0.3578,"colour":0.2135,"drift":0.0573},"knobResponse":[0.061,0.1268,0.1391,0.1409]},{"slug":"kaleidoscope","title":"Kaleidoscope","family":"geometry","round":1,"note":"움직이는 선 세 벌이 유리 한 조각을 자르고 거울이 그 조각을 꽃으로 접어요. 조각 사이에 1 LED 검은 납선이 있어요.","idea":"Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.","buttons":"K1 tap reverses the turn.","code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","layer":{"id":"layer-kaleidoscope","type":"code","name":"kaleidoscope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the glass colours around the colour wheel."},{"name":"Speed","min":0.1,"max":4,"about":"How fast the shards slide and the mirrors turn."},{"name":"Segments","min":6,"max":16,"about":"How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette."},{"name":"Twist","min":-1,"max":1,"about":"Bends the wedges into a spiral, one way below 0 and the other way above."}],"start":[0,2,6,0.06],"measures":{"motion":0.9384,"detail":0.1125,"edges":0.4099,"complexity":1.6131,"coverage":0.5499,"colour":0.359,"drift":0.2217},"knobResponse":[0.1659,0.2298,0.1535,0.1426]},{"slug":"kari-culik","title":"Kari-Culik Tiles","family":"algo","round":35,"note":"카리의 왕 타일 14장이 되풀이 없이 판을 덮어요. 한 줄이 x 를 2 나 2/3 로 곱하는 긴 곱셈이라 위아래 변에는 비티 숫자가 파랑 마름모로, 옆 변에는 올림수가 초록이나 보라에서 금색까지의 마름모로 이어져요. K3 은 맨 윗줄의 x 를 바꿔 다른 타일링을 깔고, K1 을 누르면 3초 동안 타일이 4분의 1 칸씩 떨어져 한 장씩 보여요.","idea":"Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.","buttons":"K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.","code":"// ===== Patternflow pattern =====\n// Title:   Kari-Culik Tiles\n// Family:  algo\n// Idea:    Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aperiodic Wang tiles from Beatty sequences (Jarkko Kari, 1996; Karel Culik II, 1996), Kari's set of 14, pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3.\n// Knob 2: Speed. How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s.\n// Knob 3: Start. The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles.\n// Knob 4: Size. Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8.\n// Buttons: K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.\n\n// The rule behind the tiles. Write x by its Beatty digits\n// a_n = floor((n + 1) x) - floor(n x), n over all the integers. A tile in a\n// row that multiplies by q has a_n(x) on top, a_n(qx) underneath, the carry\n// s_n = q floor(n x) - floor(n q x) on its left and s_(n+1) on its right, and\n// q a_n + s_n = b_n + s_(n+1) holds for each one, so the row is a long\n// multiplication done digit by digit. Rows stack with x_(i+1) = T(x_i),\n// 2x on [2/3, 1) and 2x/3 on [1, 2); T maps [2/3, 2) onto itself one to one,\n// so the rows can run either way. Kari states T on [1/2, 2], but [1/2, 2/3)\n// has nothing above it, and a tiling that scrolls up for ever lives in\n// [2/3, 2). No product of 2s and 2/3s is 1, so no row ever comes back.\n//\n// Counted over 5,400 rows from nine starts and 800 columns each, with exact\n// arithmetic and the identity checked on every tile, the rows use exactly 14\n// tiles, Kari's set: 4 that multiply by 2 and 10 by 2/3. The same count over\n// Culik's rows (3x on [1/3, 2/3), x/2 on [2/3, 2)) gives 12, one of them the\n// tile with 0 on all four edges, which covers the plane by itself. An\n// aperiodic set cannot hold such a tile, so Culik's 13 are not this plain\n// count, and the picture uses Kari's.\n//\n// In the log of x, T is a turn by log 2 round a circle log 3 long, so the\n// kinds of row follow a Sturmian word: a times-2 row (37%, log 1.5 / log 3\n// of them) is never next to another, and one or two times-2/3 rows lie\n// between them.\n\nconst W = 64, H = 128;\nconst { floor, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst Z = BigInt(0), ONE = BigInt(1), TWO = BigInt(2), THREE = BigInt(3), FOUR = BigInt(4);\n// Start = 0 lands on the square root of 2.\nconst START = 0.5606601717798213;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each row keeps x as an exact fraction p/q of BigInts. With floats the\n// product drifts off the true 2x/3 in its last bit, and a test run that way\n// turned up tiles with a carry of 1, which no row can have. The fractions\n// grow by a bit a row: 10,000 rows up, seven hours at Speed 2, they are\n// 10,053 bits long and one floor(n x) takes 9 microseconds.\nfunction floorDiv(n, p, q) {\n  const v = BigInt(n) * p;\n  let d = v / q;\n  if (v \u003c Z && d * q !== v) d -= ONE;\n  return Number(d);\n}\n\nfunction reduce(r) {\n  while ((r.p & ONE) === Z && (r.q & ONE) === Z) (r.p >>= ONE), (r.q >>= ONE);\n  while (r.p % THREE === Z && r.q % THREE === Z) (r.p /= THREE), (r.q /= THREE);\n  // kind 0 multiplies by 2 (x \u003c 1), kind 1 by 2/3.\n  r.kind = r.p \u003c r.q ? 0 : 1;\n  r.F = new Map();\n  return r;\n}\nconst forward = (r) => reduce({ p: TWO * r.p, q: r.kind === 0 ? r.q : THREE * r.q });\n// The row above: y/2 when y is 4/3 or more (it came from a times-2 row),\n// 3y/2 below that (from a times-2/3 row).\nconst backward = (r) => reduce({ p: THREE * r.p >= FOUR * r.q ? r.p : THREE * r.p, q: TWO * r.q });\n\n// floor(n x) for a row, kept per column while the row is on the panel.\nfunction fx(r, n) {\n  let v = r.F.get(n);\n  if (v === undefined) r.F.set(n, (v = floorDiv(n, r.p, r.q)));\n  return v;\n}\n\n// A new tiling with x at row index `at`. x is a fraction over 2^52, so the\n// top row's digits repeat only after 2^52 columns.\nfunction build(P, u, at) {\n  const x = 2 / 3 + (4 / 3) * ((((u + START) % 1) + 1) % 1);\n  const K = 2 ** 52;\n  P.rows = new Map([[at, reduce({ p: BigInt(round(x * K)), q: BigInt(K) })]]);\n  P.lo = P.hi = at;\n  P.start = u;\n}\n\nfunction row(P, i) {\n  while (i \u003c P.lo) {\n    const r = backward(P.rows.get(P.lo));\n    P.rows.set(--P.lo, r);\n  }\n  while (i > P.hi) {\n    const r = forward(P.rows.get(P.hi));\n    P.rows.set(++P.hi, r);\n  }\n  return P.rows.get(i);\n}\n\n// Which part of a D x D tile each pixel shows: 0 top, 1 right, 2 bottom,\n// 3 left, or 4 for a pixel on a diagonal, left dark so the triangles stay\n// apart. Two triangles that meet across a tile edge always carry the same\n// label, so the dark diagonals are all that is seen of the tile grid. A\n// lifted tile stands alone in its gap and needs no seams: its diagonal\n// pixels go to the top and bottom triangles.\nfunction triangles(D, seams) {\n  const t = new Uint8Array(D * D);\n  for (let v = 0; v \u003c D; v++)\n    for (let u = 0; u \u003c D; u++) {\n      const dT = v, dB = D - 1 - v, dL = u, dR = D - 1 - u, m = min(dT, dB, dL, dR);\n      const ties = (dT === m) + (dB === m) + (dL === m) + (dR === m);\n      t[v * D + u] = seams && ties > 1 ? 4 : dT === m ? 0 : dB === m ? 2 : dR === m ? 1 : 3;\n    }\n  return t;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, size: 8, scroll: 0, pan: 0, lift: 0, liftT: -1,\n    pal: new Float32Array(9 * 3), palHue: NaN, tri: new Map(), lab: new Int8Array(4),\n  };\n  build(params.s, 0, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 8], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = 2 * round(cl(k[3], 8, 16) / 2);\n  // A turn of Start puts its x on the top row showing now, and the rest of\n  // the tiling grows from there.\n  const u = cl(k[2], 0, 1);\n  if (u !== P.start) build(P, u, floor(-floor(P.scroll) / P.size));\n  P.scroll += d * P.speed * 1.5;\n  P.pan += d * P.speed * 0.5;\n  if (input.btnPressed && input.btnPressed[0]) P.liftT = 0;\n  if (P.liftT >= 0) {\n    P.liftT += d;\n    const t = P.liftT;\n    P.lift = t \u003c 0.5 ? sm(t / 0.5) : t \u003c 3.5 ? 1 : sm((4 - t) / 0.5);\n    if (t >= 4) (P.liftT = -1), (P.lift = 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const S = P.size, pal = P.pal, lab = P.lab;\n  if (P.palHue !== P.hue) {\n    // Labels 0-2 are the digits, a ramp in one blue; 3-4 the carries 0 and\n    // -1 of the times-2 rows; 5-8 the carries -1/3, 0, 1/3, 2/3 of the\n    // times-2/3 rows. Where the hue knob turns the blues to red, orange or\n    // yellow the dark digits are laid lighter, as a dim orange reads brown.\n    const c = [\n      [0.62, 0.85, 0.45], [0.58, 0.62, 0.78], [0.53, 0.22, 1],\n      [0.25, 0.8, 1], [0.45, 0.7, 0.9],\n      [0.78, 0.7, 1], [0.92, 0.62, 1], [0.04, 0.72, 1], [0.12, 0.6, 1],\n    ];\n    for (let j = 0; j \u003c 9; j++) {\n      let [h, s, v] = c[j];\n      h += P.hue;\n      const hh = h - floor(h) > 0.9 ? h - floor(h) - 1 : h - floor(h), warm = sm((hh + 0.04) / 0.08) * sm((0.24 - hh) / 0.06);\n      if (j \u003c 2) (v += (0.85 - v) * warm), (s *= 1 - 0.25 * warm);\n      hsv(h, s, v, pal, j * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The lift opens a gap of up to a quarter tile, in whole LEDs, and draws\n  // each tile that much smaller in the middle of its cell.\n  const gap = round(P.lift * (S / 4)), D = S - gap, off = gap >> 1;\n  const key = 2 * D + (gap === 0 ? 1 : 0);\n  let tri = P.tri.get(key);\n  if (!tri) P.tri.set(key, (tri = triangles(D, gap === 0)));\n  const sy = floor(P.scroll), sx = floor(P.pan);\n  const i0 = floor(-sy / S), i1 = floor((H - 1 - sy) / S);\n  const n0 = floor(sx / S), n1 = floor((W - 1 + sx) / S);\n  for (let i = i0; i \u003c= i1; i++) {\n    const r = row(P, i), r2 = row(P, i + 1);\n    for (let n = n0; n \u003c= n1; n++) {\n      const f0 = fx(r, n), f1 = fx(r, n + 1), g0 = fx(r2, n), g1 = fx(r2, n + 1);\n      lab[0] = f1 - f0;\n      lab[2] = g1 - g0;\n      // Left and right carries: s = 2 floor(nx) - floor(2nx) is 0 or -1;\n      // 3s = 2 floor(nx) - 3 floor(2nx/3) is -1, 0, 1 or 2.\n      if (r.kind === 0) (lab[3] = 3 + g0 - 2 * f0), (lab[1] = 3 + g1 - 2 * f1);\n      else (lab[3] = 6 + 2 * f0 - 3 * g0), (lab[1] = 6 + 2 * f1 - 3 * g1);\n      const X0 = n * S - sx, Y0 = i * S + sy;\n      for (let v = 0; v \u003c S; v++) {\n        const Y = Y0 + v;\n        if (Y \u003c 0 || Y >= H) continue;\n        const tv = v - off;\n        for (let u = 0; u \u003c S; u++) {\n          const X = X0 + u;\n          if (X \u003c 0 || X >= W) continue;\n          const tu = u - off;\n          const t = tv \u003c 0 || tu \u003c 0 || tv >= D || tu >= D ? 4 : tri[tv * D + tu];\n          if (t === 4) {\n            display.setPixel(X, Y, 0, 0, 0);\n            continue;\n          }\n          const o = lab[t] * 3;\n          display.setPixel(X, Y, pal[o] * 255, pal[o + 1] * 255, pal[o + 2] * 255);\n        }\n      }\n    }\n  }\n  // Rows that have slid off the bottom are let go; the panel only ever\n  // needs the rows from i0 down to i1 + 1.\n  while (P.hi > i1 + 2) P.rows.delete(P.hi--);\n}\n","layer":{"id":"layer-kari-culik","type":"code","name":"kari-culik","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kari-Culik Tiles\n// Family:  algo\n// Idea:    Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aperiodic Wang tiles from Beatty sequences (Jarkko Kari, 1996; Karel Culik II, 1996), Kari's set of 14, pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3.\n// Knob 2: Speed. How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s.\n// Knob 3: Start. The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles.\n// Knob 4: Size. Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8.\n// Buttons: K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.\n\n// The rule behind the tiles. Write x by its Beatty digits\n// a_n = floor((n + 1) x) - floor(n x), n over all the integers. A tile in a\n// row that multiplies by q has a_n(x) on top, a_n(qx) underneath, the carry\n// s_n = q floor(n x) - floor(n q x) on its left and s_(n+1) on its right, and\n// q a_n + s_n = b_n + s_(n+1) holds for each one, so the row is a long\n// multiplication done digit by digit. Rows stack with x_(i+1) = T(x_i),\n// 2x on [2/3, 1) and 2x/3 on [1, 2); T maps [2/3, 2) onto itself one to one,\n// so the rows can run either way. Kari states T on [1/2, 2], but [1/2, 2/3)\n// has nothing above it, and a tiling that scrolls up for ever lives in\n// [2/3, 2). No product of 2s and 2/3s is 1, so no row ever comes back.\n//\n// Counted over 5,400 rows from nine starts and 800 columns each, with exact\n// arithmetic and the identity checked on every tile, the rows use exactly 14\n// tiles, Kari's set: 4 that multiply by 2 and 10 by 2/3. The same count over\n// Culik's rows (3x on [1/3, 2/3), x/2 on [2/3, 2)) gives 12, one of them the\n// tile with 0 on all four edges, which covers the plane by itself. An\n// aperiodic set cannot hold such a tile, so Culik's 13 are not this plain\n// count, and the picture uses Kari's.\n//\n// In the log of x, T is a turn by log 2 round a circle log 3 long, so the\n// kinds of row follow a Sturmian word: a times-2 row (37%, log 1.5 / log 3\n// of them) is never next to another, and one or two times-2/3 rows lie\n// between them.\n\nconst W = 64, H = 128;\nconst { floor, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst Z = BigInt(0), ONE = BigInt(1), TWO = BigInt(2), THREE = BigInt(3), FOUR = BigInt(4);\n// Start = 0 lands on the square root of 2.\nconst START = 0.5606601717798213;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each row keeps x as an exact fraction p/q of BigInts. With floats the\n// product drifts off the true 2x/3 in its last bit, and a test run that way\n// turned up tiles with a carry of 1, which no row can have. The fractions\n// grow by a bit a row: 10,000 rows up, seven hours at Speed 2, they are\n// 10,053 bits long and one floor(n x) takes 9 microseconds.\nfunction floorDiv(n, p, q) {\n  const v = BigInt(n) * p;\n  let d = v / q;\n  if (v \u003c Z && d * q !== v) d -= ONE;\n  return Number(d);\n}\n\nfunction reduce(r) {\n  while ((r.p & ONE) === Z && (r.q & ONE) === Z) (r.p >>= ONE), (r.q >>= ONE);\n  while (r.p % THREE === Z && r.q % THREE === Z) (r.p /= THREE), (r.q /= THREE);\n  // kind 0 multiplies by 2 (x \u003c 1), kind 1 by 2/3.\n  r.kind = r.p \u003c r.q ? 0 : 1;\n  r.F = new Map();\n  return r;\n}\nconst forward = (r) => reduce({ p: TWO * r.p, q: r.kind === 0 ? r.q : THREE * r.q });\n// The row above: y/2 when y is 4/3 or more (it came from a times-2 row),\n// 3y/2 below that (from a times-2/3 row).\nconst backward = (r) => reduce({ p: THREE * r.p >= FOUR * r.q ? r.p : THREE * r.p, q: TWO * r.q });\n\n// floor(n x) for a row, kept per column while the row is on the panel.\nfunction fx(r, n) {\n  let v = r.F.get(n);\n  if (v === undefined) r.F.set(n, (v = floorDiv(n, r.p, r.q)));\n  return v;\n}\n\n// A new tiling with x at row index `at`. x is a fraction over 2^52, so the\n// top row's digits repeat only after 2^52 columns.\nfunction build(P, u, at) {\n  const x = 2 / 3 + (4 / 3) * ((((u + START) % 1) + 1) % 1);\n  const K = 2 ** 52;\n  P.rows = new Map([[at, reduce({ p: BigInt(round(x * K)), q: BigInt(K) })]]);\n  P.lo = P.hi = at;\n  P.start = u;\n}\n\nfunction row(P, i) {\n  while (i \u003c P.lo) {\n    const r = backward(P.rows.get(P.lo));\n    P.rows.set(--P.lo, r);\n  }\n  while (i > P.hi) {\n    const r = forward(P.rows.get(P.hi));\n    P.rows.set(++P.hi, r);\n  }\n  return P.rows.get(i);\n}\n\n// Which part of a D x D tile each pixel shows: 0 top, 1 right, 2 bottom,\n// 3 left, or 4 for a pixel on a diagonal, left dark so the triangles stay\n// apart. Two triangles that meet across a tile edge always carry the same\n// label, so the dark diagonals are all that is seen of the tile grid. A\n// lifted tile stands alone in its gap and needs no seams: its diagonal\n// pixels go to the top and bottom triangles.\nfunction triangles(D, seams) {\n  const t = new Uint8Array(D * D);\n  for (let v = 0; v \u003c D; v++)\n    for (let u = 0; u \u003c D; u++) {\n      const dT = v, dB = D - 1 - v, dL = u, dR = D - 1 - u, m = min(dT, dB, dL, dR);\n      const ties = (dT === m) + (dB === m) + (dL === m) + (dR === m);\n      t[v * D + u] = seams && ties > 1 ? 4 : dT === m ? 0 : dB === m ? 2 : dR === m ? 1 : 3;\n    }\n  return t;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, size: 8, scroll: 0, pan: 0, lift: 0, liftT: -1,\n    pal: new Float32Array(9 * 3), palHue: NaN, tri: new Map(), lab: new Int8Array(4),\n  };\n  build(params.s, 0, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 8], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = 2 * round(cl(k[3], 8, 16) / 2);\n  // A turn of Start puts its x on the top row showing now, and the rest of\n  // the tiling grows from there.\n  const u = cl(k[2], 0, 1);\n  if (u !== P.start) build(P, u, floor(-floor(P.scroll) / P.size));\n  P.scroll += d * P.speed * 1.5;\n  P.pan += d * P.speed * 0.5;\n  if (input.btnPressed && input.btnPressed[0]) P.liftT = 0;\n  if (P.liftT >= 0) {\n    P.liftT += d;\n    const t = P.liftT;\n    P.lift = t \u003c 0.5 ? sm(t / 0.5) : t \u003c 3.5 ? 1 : sm((4 - t) / 0.5);\n    if (t >= 4) (P.liftT = -1), (P.lift = 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const S = P.size, pal = P.pal, lab = P.lab;\n  if (P.palHue !== P.hue) {\n    // Labels 0-2 are the digits, a ramp in one blue; 3-4 the carries 0 and\n    // -1 of the times-2 rows; 5-8 the carries -1/3, 0, 1/3, 2/3 of the\n    // times-2/3 rows. Where the hue knob turns the blues to red, orange or\n    // yellow the dark digits are laid lighter, as a dim orange reads brown.\n    const c = [\n      [0.62, 0.85, 0.45], [0.58, 0.62, 0.78], [0.53, 0.22, 1],\n      [0.25, 0.8, 1], [0.45, 0.7, 0.9],\n      [0.78, 0.7, 1], [0.92, 0.62, 1], [0.04, 0.72, 1], [0.12, 0.6, 1],\n    ];\n    for (let j = 0; j \u003c 9; j++) {\n      let [h, s, v] = c[j];\n      h += P.hue;\n      const hh = h - floor(h) > 0.9 ? h - floor(h) - 1 : h - floor(h), warm = sm((hh + 0.04) / 0.08) * sm((0.24 - hh) / 0.06);\n      if (j \u003c 2) (v += (0.85 - v) * warm), (s *= 1 - 0.25 * warm);\n      hsv(h, s, v, pal, j * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The lift opens a gap of up to a quarter tile, in whole LEDs, and draws\n  // each tile that much smaller in the middle of its cell.\n  const gap = round(P.lift * (S / 4)), D = S - gap, off = gap >> 1;\n  const key = 2 * D + (gap === 0 ? 1 : 0);\n  let tri = P.tri.get(key);\n  if (!tri) P.tri.set(key, (tri = triangles(D, gap === 0)));\n  const sy = floor(P.scroll), sx = floor(P.pan);\n  const i0 = floor(-sy / S), i1 = floor((H - 1 - sy) / S);\n  const n0 = floor(sx / S), n1 = floor((W - 1 + sx) / S);\n  for (let i = i0; i \u003c= i1; i++) {\n    const r = row(P, i), r2 = row(P, i + 1);\n    for (let n = n0; n \u003c= n1; n++) {\n      const f0 = fx(r, n), f1 = fx(r, n + 1), g0 = fx(r2, n), g1 = fx(r2, n + 1);\n      lab[0] = f1 - f0;\n      lab[2] = g1 - g0;\n      // Left and right carries: s = 2 floor(nx) - floor(2nx) is 0 or -1;\n      // 3s = 2 floor(nx) - 3 floor(2nx/3) is -1, 0, 1 or 2.\n      if (r.kind === 0) (lab[3] = 3 + g0 - 2 * f0), (lab[1] = 3 + g1 - 2 * f1);\n      else (lab[3] = 6 + 2 * f0 - 3 * g0), (lab[1] = 6 + 2 * f1 - 3 * g1);\n      const X0 = n * S - sx, Y0 = i * S + sy;\n      for (let v = 0; v \u003c S; v++) {\n        const Y = Y0 + v;\n        if (Y \u003c 0 || Y >= H) continue;\n        const tv = v - off;\n        for (let u = 0; u \u003c S; u++) {\n          const X = X0 + u;\n          if (X \u003c 0 || X >= W) continue;\n          const tu = u - off;\n          const t = tv \u003c 0 || tu \u003c 0 || tv >= D || tu >= D ? 4 : tri[tv * D + tu];\n          if (t === 4) {\n            display.setPixel(X, Y, 0, 0, 0);\n            continue;\n          }\n          const o = lab[t] * 3;\n          display.setPixel(X, Y, pal[o] * 255, pal[o + 1] * 255, pal[o + 2] * 255);\n        }\n      }\n    }\n  }\n  // Rows that have slid off the bottom are let go; the panel only ever\n  // needs the rows from i0 down to i1 + 1.\n  while (P.hi > i1 + 2) P.rows.delete(P.hi--);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s."},{"name":"Start","min":0,"max":1,"about":"The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles."},{"name":"Size","min":8,"max":16,"about":"Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8."}],"start":[0,2,0,8],"measures":{"motion":1.0596,"detail":0.333,"edges":1,"complexity":0.1114,"coverage":0.75,"colour":0.4775,"drift":0.0797},"knobResponse":[0.3661,0.4609,0.2299,0.3929]},{"slug":"karman-street","title":"Kármán Street","family":"sim","round":37,"note":"반대로 도는 점 소용돌이 두 줄이 반 간격씩 어긋난 채 128줄을 위에서 아래로 흘러가요. 왼쪽 줄은 아쿠아, 오른쪽 줄은 장밋빛 염료를 감아 나선을 만들고, 두 줄 사이 거리와 간격의 비가 폰 카르만의 0.2806 이면 거리가 버티며 두 염료가 금색으로 바뀌어요. 처음 비 0.34 에서는 보이지 않던 흔들림이 12~24초 만에 자라 소용돌이가 짝을 지어 흩어지고, 그 뒤에 새 거리가 깔려요. K4 는 그 비를 0.13 에서 0.53 까지 옮기고, 누르면 새 거리를 바로 깔아요.","idea":"Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.","buttons":"K1 tap lays a fresh street at once, with a new small wobble.","code":"// ===== Patternflow pattern =====\n// Title:   Kármán Street\n// Family:  sim\n// Idea:    Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kármán vortex street and its stability (Theodore von Kármán, 1911), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25\n//\n// Knob 1: Hue. Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose.\n// Knob 2: Speed. How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower.\n// Knob 3: Vortices. Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it.\n// Knob 4: Offset. The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides.\n// Buttons: K1 tap lays a fresh street at once, with a new small wobble.\n\n// Each vortex is a whole row of copies 128 rows apart, so the panel is one\n// period top to bottom. A vertical row of vortices of circulation G spaced L\n// has the complex velocity -(i G / 2L) coth(pi (z - z0) / L), which in x and\n// y is the kernel in velAt() below. The row of n vortices spaced a = 128 / n is\n// the same sum as von Kármán's infinite row, so with the columns h apart and\n// staggered by a / 2 the street moves as one at (G / 2a) tanh(pi h / a).\n//\n// Growth of a random wobble of 1e-7 a, with G = a, measured as the slope of\n// ln(wobble) in a 600 s run (per second):\n//   h/a      0.13   0.20   0.25   0.2806  0.31   0.34   0.45   0.53\n//   n = 4   0.016  0.0076 0.0009 -0.001  0.0012 0.0054 0.014  0.017\n//   n = 8   0.031  0.0175 0.0041  0.001  0.0057 0.0117 0.028  0.034\n// At 0.2806 it stays inside +-0.0013, which is the measuring noise: the\n// street is neutrally stable there. The more vortices a period holds, the\n// narrower the nearly stable band round it, because a period of n allows\n// only wobbles whose phase steps by a multiple of 2 pi / n from one vortex\n// to the next; with 3 a column h/a = 0.34 grows at 0.0017, a third of the\n// rate with 4, which is why Vortices starts at 4. The pattern runs at\n// G = 30 a, so at 0.34 with 4 a column the wobble grows e-fold every 6 s\n// and at 0.2 every 4.4 s. Laid with a 5% wobble, the street at 0.34 came\n// apart (one vortex 0.3 a off its column) after 11.5 to 24 s, median 15.5,\n// over 34 streets in three four-minute runs, and at the two ends of the\n// knob after 3 to 7 s; at 0.2806 it lasted 106 to 237 s in five runs, as a\n// wobble that size is no longer small and grows on its own terms.\n\nconst W = 64, H = 128, N = W * H, L = 128, K = (2 * Math.PI) / L;\nconst { floor, min, max, exp, sin, cos, tanh, abs, PI } = Math;\nconst random = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// von Kármán's ratio: cosh(pi h / a) = sqrt 2.\nconst STABLE = Math.log(Math.SQRT2 + 1) / PI;\nconst NT = 3600, MAXV = 16;\n// Circulation per LED of spacing, the wobble a fresh street is laid with\n// (as a share of a), the speed the street is shown sliding down, and the\n// seconds between two lines of dye from one vortex.\nconst GAM = 30, EPS = 0.05, VSHOW = 5, PULSE = 2.4;\n// Dye cores: a tracer within RC of a vortex goes round as a solid body.\nconst RCF = 0.09;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  const S = (params.s = {\n    hue: 0, speed: 2, n: 4, ratio: STABLE + 0.06, want: [4, STABLE + 0.06], pend: 0,\n    vx: D(MAXV), vy: D(MAXV), vg: D(MAXV), x0: D(MAXV), m: 0, a: 32, wy: 0,\n    // Stage positions of the vortices and their precomputed exp and trig.\n    sx: D(MAXV * 4), sy: D(MAXV * 4), ex: D(MAXV * 4), ix: D(MAXV * 4), cy: D(MAXV * 4), sn: D(MAXV * 4),\n    kv: D(MAXV * 8),\n    tx: F(NT), ty: F(NT), age: F(NT), pt: D(MAXV), pp: new Uint8Array(MAXV),\n    kx: F(NT * 4), ky: F(NT * 4),\n    A: F(N), B: F(N), T: F(N), col: F(6),\n    broken: 0, fade: 1, out: 0, warm: false,\n  });\n  lay(S, 4, STABLE + 0.06);\n}\n\nfunction lay(S, n, ratio) {\n  const a = L / n, h = ratio * a, G = GAM * a;\n  S.n = n;\n  S.ratio = ratio;\n  S.a = a;\n  S.m = 2 * n;\n  // The left column spins one way and the right one the other, the way a\n  // wake's shear layers roll up, so on its own the street would climb at U\n  // through still water. The water is given a downward flow of VSHOW + U, so\n  // the street slides down at VSHOW and the dye that leaves it streams down\n  // faster between the vortices.\n  const U = (G / (2 * a)) * tanh((PI * h) / a);\n  S.wy = VSHOW + U;\n  const y0 = random() * a;\n  for (let i = 0; i \u003c n; i++) {\n    S.vx[i] = 32 - h / 2;\n    S.vy[i] = y0 + i * a;\n    S.vg[i] = -G;\n    S.vx[n + i] = 32 + h / 2;\n    S.vy[n + i] = y0 + i * a + a / 2;\n    S.vg[n + i] = G;\n  }\n  // The wobble: each vortex moved up to EPS a either way, then each\n  // column's mean move taken out again. A column shifted as a whole along\n  // the street breaks the half-spacing stagger, and then both columns push\n  // each other the same way sideways: the street drifted 8 LEDs off centre\n  // in 20 s before this.\n  for (let i = 0; i \u003c 2 * n; i++) {\n    S.x0[i] = S.vx[i];\n    S.kv[2 * i] = (random() - 0.5) * 2 * EPS * a;\n    S.kv[2 * i + 1] = (random() - 0.5) * 2 * EPS * a;\n  }\n  for (let c = 0; c \u003c 2; c++) {\n    let mx = 0, my = 0;\n    for (let i = c * n; i \u003c c * n + n; i++) (mx += S.kv[2 * i]), (my += S.kv[2 * i + 1]);\n    for (let i = c * n; i \u003c c * n + n; i++) {\n      S.vx[i] += S.kv[2 * i] - mx / n;\n      S.vy[i] += S.kv[2 * i + 1] - my / n;\n    }\n  }\n  // No dye yet; the vortices start dropping it at staggered moments.\n  S.age.fill(-1);\n  for (let p = 0; p \u003c S.m; p++) S.pt[p] = PULSE * (((p * 0.618) % 1) * 0.8 + 0.2 * random());\n  S.broken = 0;\n}\n\n// Every PULSE seconds a vortex drops a straight line of dye across its core,\n// alternating between two sets of tracers, so each set lives two pulses.\n// A continuous drip was tried first: in a steady swirl every radius then\n// fills its whole ring and the core reads as a speckled disc. A line laid\n// at once winds into a spiral, the inside turning faster than the outside.\nfunction pulse(S, p) {\n  const m = S.m, per = floor(NT / m), C = per >> 1, par = (S.pp[p] ^= 1), R = 0.56 * S.a;\n  const th = (random() - 0.5) * 0.6, c = cos(th), s = sin(th);\n  for (let j = par; j \u003c 2 * C; j += 2) {\n    const i = j * m + p, r = R * ((((j >> 1) + 0.5) / C) * 2 - 1);\n    S.tx[i] = S.vx[p] + r * c;\n    S.ty[i] = S.vy[p] + r * s;\n    S.age[i] = 0;\n  }\n}\n\n// Velocity at (x, y) from the vortices of stage s, written to out[o], out[o+1].\n// exp(K (x - xv)) is exp(K x) exp(-K xv) and the angle difference comes from\n// the sum formulas, so a tracer costs one exp, one sin and one cos per stage\n// whatever the number of vortices.\nfunction velAt(S, s, x, y, dl, skip, out, o) {\n  const m = S.m, b = s * MAXV, c2 = 1 / (2 * L);\n  const et = exp(K * x), it = 1 / et, cyt = cos(K * y), syt = sin(K * y);\n  let u = 0, v = 0;\n  for (let i = 0; i \u003c m; i++) {\n    if (i === skip) continue;\n    const j = b + i, E = et * S.ix[j], iE = it * S.ex[j];\n    const cY = cyt * S.cy[j] + syt * S.sn[j], sY = syt * S.cy[j] - cyt * S.sn[j];\n    const q = (S.vg[i] * c2) / (0.5 * (E + iE) - cY + dl);\n    u -= q * sY;\n    v += q * 0.5 * (E - iE);\n  }\n  out[o] = u;\n  out[o + 1] = v + S.wy;\n}\n\nfunction prep(S, s) {\n  for (let i = 0, b = s * MAXV; i \u003c S.m; i++) {\n    const x = S.sx[b + i], y = S.sy[b + i];\n    S.ex[b + i] = exp(K * x);\n    S.ix[b + i] = 1 / S.ex[b + i];\n    S.cy[b + i] = cos(K * y);\n    S.sn[b + i] = sin(K * y);\n  }\n}\n\n// One RK4 step of the vortices and the dye together.\nfunction step(S, h) {\n  const m = S.m, kv = S.kv, kx = S.kx, ky = S.ky;\n  const dv = 0.5 * (K * 0.5) * (K * 0.5), rc = RCF * S.a, dt = 0.5 * (K * rc) * (K * rc);\n  const cf = [0, 0.5, 0.5, 1];\n  for (let s = 0; s \u003c 4; s++) {\n    const b = s * MAXV;\n    for (let i = 0; i \u003c m; i++) {\n      S.sx[b + i] = S.vx[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i] : 0);\n      S.sy[b + i] = S.vy[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i + 1] : 0);\n    }\n    prep(S, s);\n    for (let i = 0; i \u003c m; i++) velAt(S, s, S.sx[b + i], S.sy[b + i], dv, i, kv, s * MAXV * 2 + 2 * i);\n    const tmp = [0, 0];\n    for (let i = 0; i \u003c NT; i++) {\n      if (S.age[i] \u003c 0) continue;\n      const x = S.tx[i] + (s ? cf[s] * h * kx[(s - 1) * NT + i] : 0), y = S.ty[i] + (s ? cf[s] * h * ky[(s - 1) * NT + i] : 0);\n      velAt(S, s, x, y, dt, -1, tmp, 0);\n      kx[s * NT + i] = tmp[0];\n      ky[s * NT + i] = tmp[1];\n    }\n  }\n  for (let i = 0; i \u003c m; i++) {\n    const o = 2 * i, M = MAXV * 2;\n    S.vx[i] += (h / 6) * (kv[o] + 2 * kv[M + o] + 2 * kv[2 * M + o] + kv[3 * M + o]);\n    S.vy[i] += (h / 6) * (kv[o + 1] + 2 * kv[M + o + 1] + 2 * kv[2 * M + o + 1] + kv[3 * M + o + 1]);\n    S.vy[i] -= L * floor(S.vy[i] / L);\n  }\n  for (let i = 0; i \u003c NT; i++) {\n    if (S.age[i] \u003c 0) continue;\n    S.tx[i] += (h / 6) * (kx[i] + 2 * kx[NT + i] + 2 * kx[2 * NT + i] + kx[3 * NT + i]);\n    S.ty[i] += (h / 6) * (ky[i] + 2 * ky[NT + i] + 2 * ky[2 * NT + i] + ky[3 * NT + i]);\n    S.ty[i] -= L * floor(S.ty[i] / L);\n    S.age[i] += h;\n    if (S.age[i] > 2 * PULSE || abs(S.tx[i] - 32) > 70) S.age[i] = -1;\n  }\n  for (let p = 0; p \u003c m; p++) if ((S.pt[p] -= h) \u003c= 0) {\n    S.pt[p] += PULSE;\n    pulse(S, p);\n  }\n}\n\n// How far the street has come apart: the largest sideways move of one\n// vortex from its column, the whole street's sideways drift taken out.\nfunction wobble(S) {\n  let mean = 0, off = 0, dev = 0;\n  for (let i = 0; i \u003c S.m; i++) mean += S.vx[i] - S.x0[i];\n  mean /= S.m;\n  for (let i = 0; i \u003c S.m; i++) {\n    dev = max(dev, abs(S.vx[i] - S.x0[i] - mean));\n    if (S.vx[i] \u003c -8 || S.vx[i] > W + 8) off++;\n  }\n  return [dev / S.a, off];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  const n = floor(cl(k[2], 4, 8) + 0.5), ratio = STABLE + cl(k[3], -0.15, 0.25);\n  if (!S.warm) {\n    S.warm = true;\n    if (n !== S.n || abs(ratio - S.ratio) > 1e-6) lay(S, n, ratio);\n    // Open with six seconds of dye already wound.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n  }\n  // A turned knob lays a new street once it has rested a third of a second.\n  if (n !== S.n || abs(ratio - S.ratio) > 0.004) {\n    if (n !== S.want[0] || abs(ratio - S.want[1]) > 1e-6) {\n      S.want = [n, ratio];\n      S.pend = 0.35;\n    } else if (S.pend > 0 && (S.pend -= d) \u003c= 0 && !S.out) S.out = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.out) S.out = 1;\n  // A core turns at G / (2 pi RC^2) radians a second, 18 with 4 a column\n  // and 37 with 8; a step is kept under 0.7 radian of that, which RK4\n  // carries without the core's dye spiralling in or out.\n  const h = (d * S.speed) / 2;\n  const sub = max(1, Math.ceil(((GAM / (2 * PI * RCF * RCF * S.a)) * h) / 0.7));\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n  const [dev, off] = wobble(S);\n  if (dev > 0.3) S.broken += h;\n  // Broken for 7 s, or half the vortices gone off the sides: lay a new one.\n  if (!S.out && (S.broken > 7 || off >= S.n)) S.out = 1;\n  if (S.out) {\n    S.fade -= d / 0.4;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      S.out = 0;\n      lay(S, n, ratio);\n      S.want = [n, ratio];\n      // Every vortex drops its first line in the 2.4 s run here, while the\n      // panel is dark, so the new street comes up whole.\n      for (let i = 0; i \u003c 72; i++) step(S, 1 / 30);\n    }\n  } else S.fade = min(1, S.fade + d / 0.6);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const A = S.A, B = S.B, T = S.T, col = S.col;\n  A.fill(0);\n  B.fill(0);\n  for (let i = 0; i \u003c NT; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / (2 * PULSE), env = min(1, age / 0.35) * (1 - u) ** 0.7;\n    const buf = i % S.m \u003c S.n ? A : B;\n    const fx = S.tx[i] - 0.5, fy = S.ty[i] - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n    if (ix \u003c -1 || ix >= W) continue;\n    const y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    if (ix >= 0) {\n      buf[y0 * W + ix] += env * (1 - ax) * (1 - ay);\n      buf[y1 * W + ix] += env * (1 - ax) * ay;\n    }\n    if (ix + 1 \u003c W) {\n      buf[y0 * W + ix + 1] += env * ax * (1 - ay);\n      buf[y1 * W + ix + 1] += env * ax * ay;\n    }\n  }\n  blur(A, T);\n  blur(B, T);\n  // Dyes: aqua and rose at Hue 0. Near von Kármán's ratio both turn gold,\n  // the left column deep and the right one pale, the mark of the one street\n  // that holds: full gold within 0.005 of it, half at 0.01.\n  const gd = (S.ratio - STABLE) / 0.012, gold = exp(-gd * gd);\n  const hA = S.hue + 0.5, hB = S.hue + 0.92;\n  const wA = max(warmth(hA), gold), wB = max(warmth(hB), gold);\n  hsv(hA, 0.8 - 0.35 * warmth(hA), 1, col, 0);\n  hsv(hB, 0.62 - 0.25 * warmth(hB), 1, col, 3);\n  const G1 = [1, 0.74, 0.3], G2 = [1, 0.9, 0.62];\n  for (let c = 0; c \u003c 3; c++) {\n    col[c] += (G1[c] - col[c]) * 0.92 * gold;\n    col[3 + c] += (G2[c] - col[3 + c]) * 0.92 * gold;\n  }\n  // Warm dye climbs to full brightness sooner and its faint end is lifted,\n  // so an old spiral of gold reads pale rather than olive.\n  const kA = 0.55 + 0.4 * wA, kB = 0.55 + 0.4 * wB, gA = 1 - 0.35 * wA, gB = 1 - 0.35 * wB, f = S.fade * 255;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const a = (1 - exp(-A[p] * kA)) ** gA, b = (1 - exp(-B[p] * kB)) ** gB, hi = max(0, a + b - 1.1) * 0.6;\n      display.setPixel(x, y, (col[0] * a + col[3] * b + hi) * f, (col[1] * a + col[4] * b + hi) * f, (col[2] * a + col[5] * b + hi) * f);\n    }\n}\n\n// 1 where a hue is orange to yellow-green, which read brown and olive when\n// dim, so there the dye is paler and climbs to full brightness sooner.\nfunction warmth(h) {\n  const t = h - floor(h);\n  return sm(0.0, 0.05, t) * (1 - sm(0.17, 0.24, t));\n}\n\n// [1 2 1] along rows then columns, wrapping top to bottom.\nfunction blur(a, t) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++) t[o + x] = 0.5 * a[o + x] + 0.25 * (a[o + (x > 0 ? x - 1 : x)] + a[o + (x \u003c W - 1 ? x + 1 : x)]);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W, u = ((y + H - 1) % H) * W, dn = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) a[o + x] = 0.5 * t[o + x] + 0.25 * (t[u + x] + t[dn + x]);\n  }\n}\n","layer":{"id":"layer-karman-street","type":"code","name":"karman-street","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kármán Street\n// Family:  sim\n// Idea:    Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kármán vortex street and its stability (Theodore von Kármán, 1911), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25\n//\n// Knob 1: Hue. Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose.\n// Knob 2: Speed. How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower.\n// Knob 3: Vortices. Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it.\n// Knob 4: Offset. The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides.\n// Buttons: K1 tap lays a fresh street at once, with a new small wobble.\n\n// Each vortex is a whole row of copies 128 rows apart, so the panel is one\n// period top to bottom. A vertical row of vortices of circulation G spaced L\n// has the complex velocity -(i G / 2L) coth(pi (z - z0) / L), which in x and\n// y is the kernel in velAt() below. The row of n vortices spaced a = 128 / n is\n// the same sum as von Kármán's infinite row, so with the columns h apart and\n// staggered by a / 2 the street moves as one at (G / 2a) tanh(pi h / a).\n//\n// Growth of a random wobble of 1e-7 a, with G = a, measured as the slope of\n// ln(wobble) in a 600 s run (per second):\n//   h/a      0.13   0.20   0.25   0.2806  0.31   0.34   0.45   0.53\n//   n = 4   0.016  0.0076 0.0009 -0.001  0.0012 0.0054 0.014  0.017\n//   n = 8   0.031  0.0175 0.0041  0.001  0.0057 0.0117 0.028  0.034\n// At 0.2806 it stays inside +-0.0013, which is the measuring noise: the\n// street is neutrally stable there. The more vortices a period holds, the\n// narrower the nearly stable band round it, because a period of n allows\n// only wobbles whose phase steps by a multiple of 2 pi / n from one vortex\n// to the next; with 3 a column h/a = 0.34 grows at 0.0017, a third of the\n// rate with 4, which is why Vortices starts at 4. The pattern runs at\n// G = 30 a, so at 0.34 with 4 a column the wobble grows e-fold every 6 s\n// and at 0.2 every 4.4 s. Laid with a 5% wobble, the street at 0.34 came\n// apart (one vortex 0.3 a off its column) after 11.5 to 24 s, median 15.5,\n// over 34 streets in three four-minute runs, and at the two ends of the\n// knob after 3 to 7 s; at 0.2806 it lasted 106 to 237 s in five runs, as a\n// wobble that size is no longer small and grows on its own terms.\n\nconst W = 64, H = 128, N = W * H, L = 128, K = (2 * Math.PI) / L;\nconst { floor, min, max, exp, sin, cos, tanh, abs, PI } = Math;\nconst random = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// von Kármán's ratio: cosh(pi h / a) = sqrt 2.\nconst STABLE = Math.log(Math.SQRT2 + 1) / PI;\nconst NT = 3600, MAXV = 16;\n// Circulation per LED of spacing, the wobble a fresh street is laid with\n// (as a share of a), the speed the street is shown sliding down, and the\n// seconds between two lines of dye from one vortex.\nconst GAM = 30, EPS = 0.05, VSHOW = 5, PULSE = 2.4;\n// Dye cores: a tracer within RC of a vortex goes round as a solid body.\nconst RCF = 0.09;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  const S = (params.s = {\n    hue: 0, speed: 2, n: 4, ratio: STABLE + 0.06, want: [4, STABLE + 0.06], pend: 0,\n    vx: D(MAXV), vy: D(MAXV), vg: D(MAXV), x0: D(MAXV), m: 0, a: 32, wy: 0,\n    // Stage positions of the vortices and their precomputed exp and trig.\n    sx: D(MAXV * 4), sy: D(MAXV * 4), ex: D(MAXV * 4), ix: D(MAXV * 4), cy: D(MAXV * 4), sn: D(MAXV * 4),\n    kv: D(MAXV * 8),\n    tx: F(NT), ty: F(NT), age: F(NT), pt: D(MAXV), pp: new Uint8Array(MAXV),\n    kx: F(NT * 4), ky: F(NT * 4),\n    A: F(N), B: F(N), T: F(N), col: F(6),\n    broken: 0, fade: 1, out: 0, warm: false,\n  });\n  lay(S, 4, STABLE + 0.06);\n}\n\nfunction lay(S, n, ratio) {\n  const a = L / n, h = ratio * a, G = GAM * a;\n  S.n = n;\n  S.ratio = ratio;\n  S.a = a;\n  S.m = 2 * n;\n  // The left column spins one way and the right one the other, the way a\n  // wake's shear layers roll up, so on its own the street would climb at U\n  // through still water. The water is given a downward flow of VSHOW + U, so\n  // the street slides down at VSHOW and the dye that leaves it streams down\n  // faster between the vortices.\n  const U = (G / (2 * a)) * tanh((PI * h) / a);\n  S.wy = VSHOW + U;\n  const y0 = random() * a;\n  for (let i = 0; i \u003c n; i++) {\n    S.vx[i] = 32 - h / 2;\n    S.vy[i] = y0 + i * a;\n    S.vg[i] = -G;\n    S.vx[n + i] = 32 + h / 2;\n    S.vy[n + i] = y0 + i * a + a / 2;\n    S.vg[n + i] = G;\n  }\n  // The wobble: each vortex moved up to EPS a either way, then each\n  // column's mean move taken out again. A column shifted as a whole along\n  // the street breaks the half-spacing stagger, and then both columns push\n  // each other the same way sideways: the street drifted 8 LEDs off centre\n  // in 20 s before this.\n  for (let i = 0; i \u003c 2 * n; i++) {\n    S.x0[i] = S.vx[i];\n    S.kv[2 * i] = (random() - 0.5) * 2 * EPS * a;\n    S.kv[2 * i + 1] = (random() - 0.5) * 2 * EPS * a;\n  }\n  for (let c = 0; c \u003c 2; c++) {\n    let mx = 0, my = 0;\n    for (let i = c * n; i \u003c c * n + n; i++) (mx += S.kv[2 * i]), (my += S.kv[2 * i + 1]);\n    for (let i = c * n; i \u003c c * n + n; i++) {\n      S.vx[i] += S.kv[2 * i] - mx / n;\n      S.vy[i] += S.kv[2 * i + 1] - my / n;\n    }\n  }\n  // No dye yet; the vortices start dropping it at staggered moments.\n  S.age.fill(-1);\n  for (let p = 0; p \u003c S.m; p++) S.pt[p] = PULSE * (((p * 0.618) % 1) * 0.8 + 0.2 * random());\n  S.broken = 0;\n}\n\n// Every PULSE seconds a vortex drops a straight line of dye across its core,\n// alternating between two sets of tracers, so each set lives two pulses.\n// A continuous drip was tried first: in a steady swirl every radius then\n// fills its whole ring and the core reads as a speckled disc. A line laid\n// at once winds into a spiral, the inside turning faster than the outside.\nfunction pulse(S, p) {\n  const m = S.m, per = floor(NT / m), C = per >> 1, par = (S.pp[p] ^= 1), R = 0.56 * S.a;\n  const th = (random() - 0.5) * 0.6, c = cos(th), s = sin(th);\n  for (let j = par; j \u003c 2 * C; j += 2) {\n    const i = j * m + p, r = R * ((((j >> 1) + 0.5) / C) * 2 - 1);\n    S.tx[i] = S.vx[p] + r * c;\n    S.ty[i] = S.vy[p] + r * s;\n    S.age[i] = 0;\n  }\n}\n\n// Velocity at (x, y) from the vortices of stage s, written to out[o], out[o+1].\n// exp(K (x - xv)) is exp(K x) exp(-K xv) and the angle difference comes from\n// the sum formulas, so a tracer costs one exp, one sin and one cos per stage\n// whatever the number of vortices.\nfunction velAt(S, s, x, y, dl, skip, out, o) {\n  const m = S.m, b = s * MAXV, c2 = 1 / (2 * L);\n  const et = exp(K * x), it = 1 / et, cyt = cos(K * y), syt = sin(K * y);\n  let u = 0, v = 0;\n  for (let i = 0; i \u003c m; i++) {\n    if (i === skip) continue;\n    const j = b + i, E = et * S.ix[j], iE = it * S.ex[j];\n    const cY = cyt * S.cy[j] + syt * S.sn[j], sY = syt * S.cy[j] - cyt * S.sn[j];\n    const q = (S.vg[i] * c2) / (0.5 * (E + iE) - cY + dl);\n    u -= q * sY;\n    v += q * 0.5 * (E - iE);\n  }\n  out[o] = u;\n  out[o + 1] = v + S.wy;\n}\n\nfunction prep(S, s) {\n  for (let i = 0, b = s * MAXV; i \u003c S.m; i++) {\n    const x = S.sx[b + i], y = S.sy[b + i];\n    S.ex[b + i] = exp(K * x);\n    S.ix[b + i] = 1 / S.ex[b + i];\n    S.cy[b + i] = cos(K * y);\n    S.sn[b + i] = sin(K * y);\n  }\n}\n\n// One RK4 step of the vortices and the dye together.\nfunction step(S, h) {\n  const m = S.m, kv = S.kv, kx = S.kx, ky = S.ky;\n  const dv = 0.5 * (K * 0.5) * (K * 0.5), rc = RCF * S.a, dt = 0.5 * (K * rc) * (K * rc);\n  const cf = [0, 0.5, 0.5, 1];\n  for (let s = 0; s \u003c 4; s++) {\n    const b = s * MAXV;\n    for (let i = 0; i \u003c m; i++) {\n      S.sx[b + i] = S.vx[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i] : 0);\n      S.sy[b + i] = S.vy[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i + 1] : 0);\n    }\n    prep(S, s);\n    for (let i = 0; i \u003c m; i++) velAt(S, s, S.sx[b + i], S.sy[b + i], dv, i, kv, s * MAXV * 2 + 2 * i);\n    const tmp = [0, 0];\n    for (let i = 0; i \u003c NT; i++) {\n      if (S.age[i] \u003c 0) continue;\n      const x = S.tx[i] + (s ? cf[s] * h * kx[(s - 1) * NT + i] : 0), y = S.ty[i] + (s ? cf[s] * h * ky[(s - 1) * NT + i] : 0);\n      velAt(S, s, x, y, dt, -1, tmp, 0);\n      kx[s * NT + i] = tmp[0];\n      ky[s * NT + i] = tmp[1];\n    }\n  }\n  for (let i = 0; i \u003c m; i++) {\n    const o = 2 * i, M = MAXV * 2;\n    S.vx[i] += (h / 6) * (kv[o] + 2 * kv[M + o] + 2 * kv[2 * M + o] + kv[3 * M + o]);\n    S.vy[i] += (h / 6) * (kv[o + 1] + 2 * kv[M + o + 1] + 2 * kv[2 * M + o + 1] + kv[3 * M + o + 1]);\n    S.vy[i] -= L * floor(S.vy[i] / L);\n  }\n  for (let i = 0; i \u003c NT; i++) {\n    if (S.age[i] \u003c 0) continue;\n    S.tx[i] += (h / 6) * (kx[i] + 2 * kx[NT + i] + 2 * kx[2 * NT + i] + kx[3 * NT + i]);\n    S.ty[i] += (h / 6) * (ky[i] + 2 * ky[NT + i] + 2 * ky[2 * NT + i] + ky[3 * NT + i]);\n    S.ty[i] -= L * floor(S.ty[i] / L);\n    S.age[i] += h;\n    if (S.age[i] > 2 * PULSE || abs(S.tx[i] - 32) > 70) S.age[i] = -1;\n  }\n  for (let p = 0; p \u003c m; p++) if ((S.pt[p] -= h) \u003c= 0) {\n    S.pt[p] += PULSE;\n    pulse(S, p);\n  }\n}\n\n// How far the street has come apart: the largest sideways move of one\n// vortex from its column, the whole street's sideways drift taken out.\nfunction wobble(S) {\n  let mean = 0, off = 0, dev = 0;\n  for (let i = 0; i \u003c S.m; i++) mean += S.vx[i] - S.x0[i];\n  mean /= S.m;\n  for (let i = 0; i \u003c S.m; i++) {\n    dev = max(dev, abs(S.vx[i] - S.x0[i] - mean));\n    if (S.vx[i] \u003c -8 || S.vx[i] > W + 8) off++;\n  }\n  return [dev / S.a, off];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  const n = floor(cl(k[2], 4, 8) + 0.5), ratio = STABLE + cl(k[3], -0.15, 0.25);\n  if (!S.warm) {\n    S.warm = true;\n    if (n !== S.n || abs(ratio - S.ratio) > 1e-6) lay(S, n, ratio);\n    // Open with six seconds of dye already wound.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n  }\n  // A turned knob lays a new street once it has rested a third of a second.\n  if (n !== S.n || abs(ratio - S.ratio) > 0.004) {\n    if (n !== S.want[0] || abs(ratio - S.want[1]) > 1e-6) {\n      S.want = [n, ratio];\n      S.pend = 0.35;\n    } else if (S.pend > 0 && (S.pend -= d) \u003c= 0 && !S.out) S.out = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.out) S.out = 1;\n  // A core turns at G / (2 pi RC^2) radians a second, 18 with 4 a column\n  // and 37 with 8; a step is kept under 0.7 radian of that, which RK4\n  // carries without the core's dye spiralling in or out.\n  const h = (d * S.speed) / 2;\n  const sub = max(1, Math.ceil(((GAM / (2 * PI * RCF * RCF * S.a)) * h) / 0.7));\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n  const [dev, off] = wobble(S);\n  if (dev > 0.3) S.broken += h;\n  // Broken for 7 s, or half the vortices gone off the sides: lay a new one.\n  if (!S.out && (S.broken > 7 || off >= S.n)) S.out = 1;\n  if (S.out) {\n    S.fade -= d / 0.4;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      S.out = 0;\n      lay(S, n, ratio);\n      S.want = [n, ratio];\n      // Every vortex drops its first line in the 2.4 s run here, while the\n      // panel is dark, so the new street comes up whole.\n      for (let i = 0; i \u003c 72; i++) step(S, 1 / 30);\n    }\n  } else S.fade = min(1, S.fade + d / 0.6);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const A = S.A, B = S.B, T = S.T, col = S.col;\n  A.fill(0);\n  B.fill(0);\n  for (let i = 0; i \u003c NT; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / (2 * PULSE), env = min(1, age / 0.35) * (1 - u) ** 0.7;\n    const buf = i % S.m \u003c S.n ? A : B;\n    const fx = S.tx[i] - 0.5, fy = S.ty[i] - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n    if (ix \u003c -1 || ix >= W) continue;\n    const y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    if (ix >= 0) {\n      buf[y0 * W + ix] += env * (1 - ax) * (1 - ay);\n      buf[y1 * W + ix] += env * (1 - ax) * ay;\n    }\n    if (ix + 1 \u003c W) {\n      buf[y0 * W + ix + 1] += env * ax * (1 - ay);\n      buf[y1 * W + ix + 1] += env * ax * ay;\n    }\n  }\n  blur(A, T);\n  blur(B, T);\n  // Dyes: aqua and rose at Hue 0. Near von Kármán's ratio both turn gold,\n  // the left column deep and the right one pale, the mark of the one street\n  // that holds: full gold within 0.005 of it, half at 0.01.\n  const gd = (S.ratio - STABLE) / 0.012, gold = exp(-gd * gd);\n  const hA = S.hue + 0.5, hB = S.hue + 0.92;\n  const wA = max(warmth(hA), gold), wB = max(warmth(hB), gold);\n  hsv(hA, 0.8 - 0.35 * warmth(hA), 1, col, 0);\n  hsv(hB, 0.62 - 0.25 * warmth(hB), 1, col, 3);\n  const G1 = [1, 0.74, 0.3], G2 = [1, 0.9, 0.62];\n  for (let c = 0; c \u003c 3; c++) {\n    col[c] += (G1[c] - col[c]) * 0.92 * gold;\n    col[3 + c] += (G2[c] - col[3 + c]) * 0.92 * gold;\n  }\n  // Warm dye climbs to full brightness sooner and its faint end is lifted,\n  // so an old spiral of gold reads pale rather than olive.\n  const kA = 0.55 + 0.4 * wA, kB = 0.55 + 0.4 * wB, gA = 1 - 0.35 * wA, gB = 1 - 0.35 * wB, f = S.fade * 255;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const a = (1 - exp(-A[p] * kA)) ** gA, b = (1 - exp(-B[p] * kB)) ** gB, hi = max(0, a + b - 1.1) * 0.6;\n      display.setPixel(x, y, (col[0] * a + col[3] * b + hi) * f, (col[1] * a + col[4] * b + hi) * f, (col[2] * a + col[5] * b + hi) * f);\n    }\n}\n\n// 1 where a hue is orange to yellow-green, which read brown and olive when\n// dim, so there the dye is paler and climbs to full brightness sooner.\nfunction warmth(h) {\n  const t = h - floor(h);\n  return sm(0.0, 0.05, t) * (1 - sm(0.17, 0.24, t));\n}\n\n// [1 2 1] along rows then columns, wrapping top to bottom.\nfunction blur(a, t) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++) t[o + x] = 0.5 * a[o + x] + 0.25 * (a[o + (x > 0 ? x - 1 : x)] + a[o + (x \u003c W - 1 ? x + 1 : x)]);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W, u = ((y + H - 1) % H) * W, dn = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) a[o + x] = 0.5 * t[o + x] + 0.25 * (t[u + x] + t[dn + x]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower."},{"name":"Vortices","min":4,"max":8,"about":"Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it."},{"name":"Offset","min":-0.15,"max":0.25,"about":"The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides."}],"start":[0,2,4,0.06],"measures":{"motion":0.4917,"detail":0.0363,"edges":0.1472,"complexity":1.3625,"coverage":0.3791,"colour":0.1414,"drift":0.0598},"knobResponse":[0.1029,0.0901,0.0896,0.103]},{"slug":"kdv-solitons","title":"KdV Solitons","family":"wave","round":31,"note":"맨 윗줄이 지금의 물결이고 지난 줄이 아래로 흘러내려요. 자부스키와 크루스칼의 코사인이 반 초 만에 가파라지며 솔리톤 여덟으로 갈리고, 키 큰 솔리톤이 작은 것을 지나칠 때마다 마루가 옆으로 비켜요. K1 을 누르면 큰 솔리톤 하나가 떨어져 무리를 뚫고 달려요.","idea":"Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.","buttons":"K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.","code":"// ===== Patternflow pattern =====\n// Title:   KdV Solitons\n// Family:  wave\n// Idea:    Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: solitons of the Korteweg-de Vries equation (Norman Zabusky and Martin Kruskal, 1965), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1\n//\n// Knob 1: Hue. Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale.\n// Knob 2: Speed. How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower.\n// Knob 3: Dispersion. The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often.\n// Knob 4: Start. The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run.\n// Buttons: K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.\n\nconst W = 64, H = 128;\nconst { min, max, floor, abs, sqrt, cos, sin, exp, tanh, cosh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The equation u_t + u u_x + delta^2 u_xxx = 0 on a ring of length 2, held on\n// 256 points, four to an LED column.\nconst NX = 256, MK = NX - 1, DX = 2 / NX, SUB = NX / W;\n// Rows of the diagram per unit of time, and history rows kept.\nconst RPT = 40, HR = H + 2;\n// Robert-Asselin filter on the leapfrog's middle level: it damps the\n// odd-even mode that otherwise grows to overflow after about five time units,\n// and takes under one percent off a soliton over a whole run.\nconst NU = 0.001;\n// Colour table over the height above the troughs, from UL to UH.\nconst NL = 512, UL = -0.5, UH = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p) * 255;\n  out[o + 1] = (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p) * 255;\n  out[o + 2] = (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p) * 255;\n}\n\n// Dark troughs, the crest hue at the top of a soliton, pale at the very top.\n// Below the crest the hue leans away round the wheel, so the small solitons\n// and the ripples between read as deeper water rather than a dim copy of the\n// crests. A dim orange or yellow reads brown or olive, so for crests from\n// pink round to yellow the lean runs the other way, through violet,\n// magenta and red, and only the brightest tones reach the crest hue; the two\n// leans meet at a yellow green, where the middle tones change side.\nconst LH = [0, 0.08, 0.17, 0.27, 0.27, 0.33, 0.5, 0.67, 0.83, 0.92, 1];\nconst LL = [-0.3, -0.36, -0.42, -0.47, 0.53, 0.15, 0.12, 0.12, 0, -0.2, -0.3];\nfunction lean(h) {\n  h -= floor(h);\n  for (let i = 1; i \u003c LH.length; i++) if (h \u003c= LH[i] && LH[i] > LH[i - 1]) return LL[i - 1] + ((LL[i] - LL[i - 1]) * (h - LH[i - 1])) / (LH[i] - LH[i - 1]);\n  return LL[0];\n}\nfunction palette(P) {\n  const t = P.lut, h0 = P.hue + 0.5, L = lean(h0);\n  for (let i = 0; i \u003c NL; i++) {\n    const e = UL + ((UH - UL) * i) / (NL - 1);\n    const v = cl(e / 2.5, 0, 1), w = cl((e - 2.1) / 1.4, 0, 1), q = cl((e - 0.3) / 1.9, 0, 1);\n    hsv(h0 + L * (1 - q) ** 0.6, 0.9 - 0.8 * w * w, 0.04 + 0.96 * v ** 1.15, t, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\n// du/dt at point i in the scheme's own differences.\nfunction rhs(u, i, d2) {\n  const m2 = u[(i - 2) & MK], m1 = u[(i - 1) & MK], z = u[i], p1 = u[(i + 1) & MK], p2 = u[(i + 2) & MK];\n  return -((p1 + z + m1) * (p1 - m1)) / (6 * DX) - (d2 * (p2 - 2 * p1 + 2 * m1 - m2)) / (2 * DX * DX * DX);\n}\n\n// Leapfrog is stable while dt times the largest rate of the linear scheme\n// stays under 1: |u|/dx for the u u_x term and 2.6 delta^2/dx^3 for the\n// third derivative (its worst wave is three grid cells long). A new dt, or a\n// new wave, starts the leapfrog again with one step back by Euler.\nfunction restartLeap(P) {\n  const d2 = P.delta * P.delta;\n  P.dt = 0.85 / (P.umax / DX + (2.6 * d2) / (DX * DX * DX));\n  const a = P.ua, b = P.ub;\n  for (let i = 0; i \u003c NX; i++) a[i] = b[i] - P.dt * rhs(b, i, d2);\n}\n\n// A starting wave into out, mean zero. Places and heights for the humps,\n// the plateau and the random sum are drawn fresh each run.\nfunction makeWave(P, kind, phase, out) {\n  const R = P.rnd;\n  if (kind) {\n    R[0] = Math.random() * 2;\n    R[1] = R[0] + 0.7 + Math.random() * 0.6;\n    R[2] = 1.05 + Math.random() * 0.3;\n    R[3] = 0.6 + Math.random() * 0.3;\n    for (let k = 1; k \u003c= 5; k++) (R[3 + k] = (0.3 + Math.random()) / k), (R[8 + k] = Math.random() * 2 * PI);\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    const x = i * DX;\n    let v = 0;\n    if (kind === 0) v = cos(PI * (x - phase));\n    else if (kind === 1) {\n      // Two humps, about 1.2 and 0.75 high.\n      const d1 = ((x - R[0] + 3) % 2) - 1, d2 = ((x - R[1] + 3) % 2) - 1;\n      v = R[2] * exp(-((d1 / 0.3) ** 2)) + R[3] * exp(-((d2 / 0.22) ** 2));\n    } else if (kind === 2) {\n      // A plateau 1.1 high and 0.8 wide with soft edges.\n      const d = ((x - R[0] + 3) % 2) - 1;\n      v = 0.55 * (tanh((d + 0.4) / 0.05) - tanh((d - 0.4) / 0.05));\n    } else for (let k = 1; k \u003c= 5; k++) v += R[3 + k] * cos(PI * k * x + R[8 + k]);\n    out[i] = v;\n  }\n  let s = 0, mx = 0;\n  for (let i = 0; i \u003c NX; i++) s += out[i];\n  s /= NX;\n  for (let i = 0; i \u003c NX; i++) mx = max(mx, abs((out[i] -= s)));\n  // The random sum peaks at 1, like the cosine.\n  if (kind === 3) for (let i = 0; i \u003c NX; i++) out[i] /= mx;\n}\n\nfunction begin(P, kind) {\n  P.ub.set(P.tg);\n  P.kind = kind;\n  P.tau = 0;\n  P.rec = 0;\n  P.drops = 0;\n  P.umax = 3;\n  restartLeap(P);\n}\n\n// The wave into one row of 64 columns as height above the troughs: a\n// little more than half the brightest of a column's four points and the\n// rest their mean, so a thin crest keeps its peak. The trough level follows\n// the lowest point of the wave over about a quarter time unit; it is -1 for\n// the cosine and sinks to about -0.7 once the solitons have taken their mass.\nfunction sample(P, out, o) {\n  const u = P.ub, bg = P.bg;\n  for (let c = 0, i = 0; c \u003c W; c++) {\n    let mx = -9, s = 0;\n    for (let k = 0; k \u003c SUB; k++, i++) {\n      const v = u[i];\n      s += v;\n      if (v > mx) mx = v;\n    }\n    out[o + c] = 0.55 * mx + (0.45 * s) / SUB - bg;\n  }\n}\n\n// The share of the wave's energy in the first cosine mode, 1 for the cosine\n// itself, and where that mode's crest stands.\nfunction mode1(P) {\n  const u = P.ub;\n  let c1 = 0, s1 = 0, e = 0;\n  for (let i = 0; i \u003c NX; i++) {\n    const a = PI * i * DX;\n    c1 += u[i] * cos(a);\n    s1 += u[i] * sin(a);\n    e += u[i] * u[i];\n  }\n  P.phase = atan2(s1, c1) / PI;\n  return (2 * (c1 * c1 + s1 * s1)) / (NX * e + 1e-9);\n}\n\n// A soliton 4.4 high over the trough, in the lowest stretch of the wave. Its\n// mass is taken evenly off the rest so the mean stays zero, and the older\n// leapfrog level gets it one step back along its path.\nfunction drop(P) {\n  const u = P.ub, a = P.ua;\n  let best = 99, at = 0;\n  for (let i = 0; i \u003c NX; i += 4) {\n    let s = 0;\n    for (let k = -12; k \u003c= 12; k++) s += u[(i + k) & MK];\n    if (s \u003c best) (best = s), (at = i);\n  }\n  const A = 4.4, w = P.delta * sqrt(12 / A), c = best / 25 + A / 3;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const tgt = pass ? a : u, back = pass ? c * P.dt : 0;\n    let m = 0;\n    for (let i = 0; i \u003c NX; i++) {\n      const d = ((((i - at) * DX + back + 3) % 2) - 1) / w;\n      m += P.uc[i] = A / cosh(d) ** 2;\n    }\n    for (let i = 0; i \u003c NX; i++) tgt[i] += P.uc[i] - m / NX;\n    if (!pass) P.bg -= m / NX;\n  }\n}\n\nfunction step(P, n) {\n  const d2 = P.delta * P.delta, k1 = P.dt / (3 * DX), k2 = (d2 * P.dt) / (DX * DX * DX);\n  for (let s = 0; s \u003c n; s++) {\n    const a = P.ua, b = P.ub, c = P.uc;\n    for (let i = 0; i \u003c NX; i++) {\n      const m2 = b[(i - 2) & MK], m1 = b[(i - 1) & MK], z = b[i], p1 = b[(i + 1) & MK], p2 = b[(i + 2) & MK];\n      c[i] = a[i] - k1 * (p1 + z + m1) * (p1 - m1) - k2 * (p2 - 2 * p1 + 2 * m1 - m2);\n    }\n    for (let i = 0; i \u003c NX; i++) b[i] += NU * (a[i] - 2 * b[i] + c[i]);\n    P.ua = b;\n    P.ub = c;\n    P.uc = a;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    ua: new Float64Array(NX), ub: new Float64Array(NX), uc: new Float64Array(NX), tg: new Float64Array(NX),\n    hist: new Float32Array(HR * W), now: new Float32Array(W), head: 0, frac: 0,\n    lut: new Float32Array(NL * 3), lutHue: -1, hue: 0, speed: 2, delta: 0.022,\n    dt: 1e-4, umax: 3, tau: 0, kind: -1, want: 0, wantT: 0, rnd: new Float64Array(14),\n    f1: 0, rising: 0, rec: 0, phase: 1, reform: -1, toKind: 0, rem: 1, rlen: 1, bg: -1, drops: 0,\n  };\n}\n\n// One row of time has passed: store it, keep dt safe, and watch for the\n// moment to start a new run.\nfunction row(P) {\n  const u = P.ub;\n  let um = 0, lo = 9, bad = false;\n  for (let i = 0; i \u003c NX; i++) {\n    const v = u[i];\n    if (!(v === v) || abs(v) > 40) bad = true;\n    else if (abs(v) > um) um = abs(v);\n    if (v \u003c lo) lo = v;\n  }\n  if (bad) return makeWave(P, P.kind, 1, P.tg), begin(P, P.kind);\n  P.bg += (lo - P.bg) * 0.1;\n  P.head = (P.head + HR - 1) % HR;\n  sample(P, P.hist, P.head * W);\n  // A taller wave than dt was set for: a smaller dt, from here.\n  if (um > 0.9 * P.umax) (P.umax = um * 1.4), restartLeap(P);\n  const f = mode1(P), Tr = 0.21 / P.delta, rowT = 1 / RPT;\n  // Each time the train gathers back, the energy flows into the first mode\n  // and out again; a peak of that share over 0.6 is one return.\n  if (f > P.f1) P.rising = 1;\n  else if (P.rising && P.f1 > 0.6 && P.tau > 0.5 * Tr) (P.rising = 0), P.rec++;\n  else P.rising = 0;\n  P.f1 = f;\n  if (P.reform \u003c 0) {\n    // The cosine runs through one return and is drawn back onto an exact\n    // cosine at the second, where the returning one stands; other starts,\n    // and runs a dropped soliton keeps from returning, start a fresh wave\n    // after about as long.\n    if (P.kind === 0 ? P.rec >= 1 && P.rising && f > 0.55 : P.tau > 1.2 * Tr) newRun(P, P.kind, P.kind ? 1 : 0.4);\n    else if (P.tau > 2.6 * Tr) newRun(P, P.kind, 1);\n  }\n  if (P.reform >= 0) {\n    // Both leapfrog levels are drawn over to the new wave, the cosine target\n    // following the returning crest, so that what is left of the old wave\n    // falls along a smoothstep; then the run starts from the new one exactly.\n    const r = (P.reform = min(1, P.reform + rowT / P.rlen)), rem = 1 - r * r * (3 - 2 * r), g = P.rem > 0 ? 1 - rem / P.rem : 1;\n    P.rem = rem;\n    if (P.toKind === 0) for (let i = 0; i \u003c NX; i++) P.tg[i] = cos(PI * (i * DX - P.phase));\n    for (let i = 0; i \u003c NX; i++) (u[i] += (P.tg[i] - u[i]) * g), (P.ua[i] += (P.tg[i] - P.ua[i]) * g);\n    if (r >= 1) (P.reform = -1), begin(P, P.toKind);\n  }\n}\n\n// A new run toward a wave of this kind, drawn over in len time units: 0.4\n// for the cosine coming back to itself, a whole unit for a different wave.\nfunction newRun(P, kind, len) {\n  P.reform = 0;\n  P.rem = 1;\n  P.rlen = len;\n  P.toKind = kind;\n  makeWave(P, kind, P.phase, P.tg);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.2, 3);\n  // Delta from 0.022 to 0.06 on a log scale.\n  const delta = 0.022 * (0.06 / 0.022) ** cl(k[2], 0, 1);\n  const kind = min(3, floor(cl(k[3], 0, 1) * 4));\n  if (abs(delta - P.delta) > 1e-6) (P.delta = delta), restartLeap(P);\n  if (P.kind \u003c 0) {\n    // Before the first frame the panel shows the starting wave as if it had\n    // been held still, so the diagram falls out of it.\n    makeWave(P, kind, 1, P.tg);\n    begin(P, kind);\n    P.bg = 9;\n    for (let i = 0; i \u003c NX; i++) P.bg = min(P.bg, P.ub[i]);\n    sample(P, P.hist, 0);\n    for (let r = 1; r \u003c HR; r++) P.hist.copyWithin(r * W, 0, W);\n  }\n  // A new Start is taken once the knob has rested on it a quarter second,\n  // and the wave is drawn over into it like any new run.\n  if (kind === (P.reform >= 0 ? P.toKind : P.kind)) P.wantT = 0;\n  else {\n    if (kind !== P.want) (P.want = kind), (P.wantT = 0);\n    if ((P.wantT += d) > 0.25) newRun(P, kind, 1);\n  }\n  const b = input.btnPressed || [];\n  // Four drops a run at most; past that the train is lost in white.\n  if (b[0] && P.drops \u003c 4) P.drops++, drop(P);\n\n  // 0.6 time units a second at Speed 2; the cosine breaks at 1/pi.\n  let left = d * P.speed * 0.3;\n  const rowT = 1 / RPT;\n  while (left > 1e-12) {\n    const run = min(left, (1 - P.frac) * rowT);\n    step(P, min(4000, max(1, round(run / P.dt))));\n    P.tau += run;\n    left -= run;\n    P.frac += run / rowT;\n    if (P.frac >= 1 - 1e-9) (P.frac = 0), row(P);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.kind \u003c 0) return;\n  if (P.lutHue !== P.hue) palette(P);\n  const now = P.now, hist = P.hist, lut = P.lut, f = P.frac, sc = (NL - 1) / (UH - UL);\n  sample(P, now, 0);\n  for (let y = 0; y \u003c H; y++) {\n    // Row y is the wave y rows of time ago. The newest stored row is f rows\n    // old; the top row is the wave now.\n    let ra = hist, ia, ib, w;\n    if (y \u003c= f) (ra = now), (ia = 0), (ib = P.head * W), (w = f > 0 ? y / f : 0);\n    else {\n      const kk = floor(y - f);\n      ia = ((P.head + kk) % HR) * W;\n      ib = ((P.head + kk + 1) % HR) * W;\n      w = y - f - kk;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const u = ra[ia + x] + (hist[ib + x] - ra[ia + x]) * w;\n      const o = cl(round((u - UL) * sc), 0, NL - 1) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-kdv-solitons","type":"code","name":"kdv-solitons","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   KdV Solitons\n// Family:  wave\n// Idea:    Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: solitons of the Korteweg-de Vries equation (Norman Zabusky and Martin Kruskal, 1965), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1\n//\n// Knob 1: Hue. Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale.\n// Knob 2: Speed. How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower.\n// Knob 3: Dispersion. The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often.\n// Knob 4: Start. The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run.\n// Buttons: K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.\n\nconst W = 64, H = 128;\nconst { min, max, floor, abs, sqrt, cos, sin, exp, tanh, cosh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The equation u_t + u u_x + delta^2 u_xxx = 0 on a ring of length 2, held on\n// 256 points, four to an LED column.\nconst NX = 256, MK = NX - 1, DX = 2 / NX, SUB = NX / W;\n// Rows of the diagram per unit of time, and history rows kept.\nconst RPT = 40, HR = H + 2;\n// Robert-Asselin filter on the leapfrog's middle level: it damps the\n// odd-even mode that otherwise grows to overflow after about five time units,\n// and takes under one percent off a soliton over a whole run.\nconst NU = 0.001;\n// Colour table over the height above the troughs, from UL to UH.\nconst NL = 512, UL = -0.5, UH = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p) * 255;\n  out[o + 1] = (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p) * 255;\n  out[o + 2] = (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p) * 255;\n}\n\n// Dark troughs, the crest hue at the top of a soliton, pale at the very top.\n// Below the crest the hue leans away round the wheel, so the small solitons\n// and the ripples between read as deeper water rather than a dim copy of the\n// crests. A dim orange or yellow reads brown or olive, so for crests from\n// pink round to yellow the lean runs the other way, through violet,\n// magenta and red, and only the brightest tones reach the crest hue; the two\n// leans meet at a yellow green, where the middle tones change side.\nconst LH = [0, 0.08, 0.17, 0.27, 0.27, 0.33, 0.5, 0.67, 0.83, 0.92, 1];\nconst LL = [-0.3, -0.36, -0.42, -0.47, 0.53, 0.15, 0.12, 0.12, 0, -0.2, -0.3];\nfunction lean(h) {\n  h -= floor(h);\n  for (let i = 1; i \u003c LH.length; i++) if (h \u003c= LH[i] && LH[i] > LH[i - 1]) return LL[i - 1] + ((LL[i] - LL[i - 1]) * (h - LH[i - 1])) / (LH[i] - LH[i - 1]);\n  return LL[0];\n}\nfunction palette(P) {\n  const t = P.lut, h0 = P.hue + 0.5, L = lean(h0);\n  for (let i = 0; i \u003c NL; i++) {\n    const e = UL + ((UH - UL) * i) / (NL - 1);\n    const v = cl(e / 2.5, 0, 1), w = cl((e - 2.1) / 1.4, 0, 1), q = cl((e - 0.3) / 1.9, 0, 1);\n    hsv(h0 + L * (1 - q) ** 0.6, 0.9 - 0.8 * w * w, 0.04 + 0.96 * v ** 1.15, t, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\n// du/dt at point i in the scheme's own differences.\nfunction rhs(u, i, d2) {\n  const m2 = u[(i - 2) & MK], m1 = u[(i - 1) & MK], z = u[i], p1 = u[(i + 1) & MK], p2 = u[(i + 2) & MK];\n  return -((p1 + z + m1) * (p1 - m1)) / (6 * DX) - (d2 * (p2 - 2 * p1 + 2 * m1 - m2)) / (2 * DX * DX * DX);\n}\n\n// Leapfrog is stable while dt times the largest rate of the linear scheme\n// stays under 1: |u|/dx for the u u_x term and 2.6 delta^2/dx^3 for the\n// third derivative (its worst wave is three grid cells long). A new dt, or a\n// new wave, starts the leapfrog again with one step back by Euler.\nfunction restartLeap(P) {\n  const d2 = P.delta * P.delta;\n  P.dt = 0.85 / (P.umax / DX + (2.6 * d2) / (DX * DX * DX));\n  const a = P.ua, b = P.ub;\n  for (let i = 0; i \u003c NX; i++) a[i] = b[i] - P.dt * rhs(b, i, d2);\n}\n\n// A starting wave into out, mean zero. Places and heights for the humps,\n// the plateau and the random sum are drawn fresh each run.\nfunction makeWave(P, kind, phase, out) {\n  const R = P.rnd;\n  if (kind) {\n    R[0] = Math.random() * 2;\n    R[1] = R[0] + 0.7 + Math.random() * 0.6;\n    R[2] = 1.05 + Math.random() * 0.3;\n    R[3] = 0.6 + Math.random() * 0.3;\n    for (let k = 1; k \u003c= 5; k++) (R[3 + k] = (0.3 + Math.random()) / k), (R[8 + k] = Math.random() * 2 * PI);\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    const x = i * DX;\n    let v = 0;\n    if (kind === 0) v = cos(PI * (x - phase));\n    else if (kind === 1) {\n      // Two humps, about 1.2 and 0.75 high.\n      const d1 = ((x - R[0] + 3) % 2) - 1, d2 = ((x - R[1] + 3) % 2) - 1;\n      v = R[2] * exp(-((d1 / 0.3) ** 2)) + R[3] * exp(-((d2 / 0.22) ** 2));\n    } else if (kind === 2) {\n      // A plateau 1.1 high and 0.8 wide with soft edges.\n      const d = ((x - R[0] + 3) % 2) - 1;\n      v = 0.55 * (tanh((d + 0.4) / 0.05) - tanh((d - 0.4) / 0.05));\n    } else for (let k = 1; k \u003c= 5; k++) v += R[3 + k] * cos(PI * k * x + R[8 + k]);\n    out[i] = v;\n  }\n  let s = 0, mx = 0;\n  for (let i = 0; i \u003c NX; i++) s += out[i];\n  s /= NX;\n  for (let i = 0; i \u003c NX; i++) mx = max(mx, abs((out[i] -= s)));\n  // The random sum peaks at 1, like the cosine.\n  if (kind === 3) for (let i = 0; i \u003c NX; i++) out[i] /= mx;\n}\n\nfunction begin(P, kind) {\n  P.ub.set(P.tg);\n  P.kind = kind;\n  P.tau = 0;\n  P.rec = 0;\n  P.drops = 0;\n  P.umax = 3;\n  restartLeap(P);\n}\n\n// The wave into one row of 64 columns as height above the troughs: a\n// little more than half the brightest of a column's four points and the\n// rest their mean, so a thin crest keeps its peak. The trough level follows\n// the lowest point of the wave over about a quarter time unit; it is -1 for\n// the cosine and sinks to about -0.7 once the solitons have taken their mass.\nfunction sample(P, out, o) {\n  const u = P.ub, bg = P.bg;\n  for (let c = 0, i = 0; c \u003c W; c++) {\n    let mx = -9, s = 0;\n    for (let k = 0; k \u003c SUB; k++, i++) {\n      const v = u[i];\n      s += v;\n      if (v > mx) mx = v;\n    }\n    out[o + c] = 0.55 * mx + (0.45 * s) / SUB - bg;\n  }\n}\n\n// The share of the wave's energy in the first cosine mode, 1 for the cosine\n// itself, and where that mode's crest stands.\nfunction mode1(P) {\n  const u = P.ub;\n  let c1 = 0, s1 = 0, e = 0;\n  for (let i = 0; i \u003c NX; i++) {\n    const a = PI * i * DX;\n    c1 += u[i] * cos(a);\n    s1 += u[i] * sin(a);\n    e += u[i] * u[i];\n  }\n  P.phase = atan2(s1, c1) / PI;\n  return (2 * (c1 * c1 + s1 * s1)) / (NX * e + 1e-9);\n}\n\n// A soliton 4.4 high over the trough, in the lowest stretch of the wave. Its\n// mass is taken evenly off the rest so the mean stays zero, and the older\n// leapfrog level gets it one step back along its path.\nfunction drop(P) {\n  const u = P.ub, a = P.ua;\n  let best = 99, at = 0;\n  for (let i = 0; i \u003c NX; i += 4) {\n    let s = 0;\n    for (let k = -12; k \u003c= 12; k++) s += u[(i + k) & MK];\n    if (s \u003c best) (best = s), (at = i);\n  }\n  const A = 4.4, w = P.delta * sqrt(12 / A), c = best / 25 + A / 3;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const tgt = pass ? a : u, back = pass ? c * P.dt : 0;\n    let m = 0;\n    for (let i = 0; i \u003c NX; i++) {\n      const d = ((((i - at) * DX + back + 3) % 2) - 1) / w;\n      m += P.uc[i] = A / cosh(d) ** 2;\n    }\n    for (let i = 0; i \u003c NX; i++) tgt[i] += P.uc[i] - m / NX;\n    if (!pass) P.bg -= m / NX;\n  }\n}\n\nfunction step(P, n) {\n  const d2 = P.delta * P.delta, k1 = P.dt / (3 * DX), k2 = (d2 * P.dt) / (DX * DX * DX);\n  for (let s = 0; s \u003c n; s++) {\n    const a = P.ua, b = P.ub, c = P.uc;\n    for (let i = 0; i \u003c NX; i++) {\n      const m2 = b[(i - 2) & MK], m1 = b[(i - 1) & MK], z = b[i], p1 = b[(i + 1) & MK], p2 = b[(i + 2) & MK];\n      c[i] = a[i] - k1 * (p1 + z + m1) * (p1 - m1) - k2 * (p2 - 2 * p1 + 2 * m1 - m2);\n    }\n    for (let i = 0; i \u003c NX; i++) b[i] += NU * (a[i] - 2 * b[i] + c[i]);\n    P.ua = b;\n    P.ub = c;\n    P.uc = a;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    ua: new Float64Array(NX), ub: new Float64Array(NX), uc: new Float64Array(NX), tg: new Float64Array(NX),\n    hist: new Float32Array(HR * W), now: new Float32Array(W), head: 0, frac: 0,\n    lut: new Float32Array(NL * 3), lutHue: -1, hue: 0, speed: 2, delta: 0.022,\n    dt: 1e-4, umax: 3, tau: 0, kind: -1, want: 0, wantT: 0, rnd: new Float64Array(14),\n    f1: 0, rising: 0, rec: 0, phase: 1, reform: -1, toKind: 0, rem: 1, rlen: 1, bg: -1, drops: 0,\n  };\n}\n\n// One row of time has passed: store it, keep dt safe, and watch for the\n// moment to start a new run.\nfunction row(P) {\n  const u = P.ub;\n  let um = 0, lo = 9, bad = false;\n  for (let i = 0; i \u003c NX; i++) {\n    const v = u[i];\n    if (!(v === v) || abs(v) > 40) bad = true;\n    else if (abs(v) > um) um = abs(v);\n    if (v \u003c lo) lo = v;\n  }\n  if (bad) return makeWave(P, P.kind, 1, P.tg), begin(P, P.kind);\n  P.bg += (lo - P.bg) * 0.1;\n  P.head = (P.head + HR - 1) % HR;\n  sample(P, P.hist, P.head * W);\n  // A taller wave than dt was set for: a smaller dt, from here.\n  if (um > 0.9 * P.umax) (P.umax = um * 1.4), restartLeap(P);\n  const f = mode1(P), Tr = 0.21 / P.delta, rowT = 1 / RPT;\n  // Each time the train gathers back, the energy flows into the first mode\n  // and out again; a peak of that share over 0.6 is one return.\n  if (f > P.f1) P.rising = 1;\n  else if (P.rising && P.f1 > 0.6 && P.tau > 0.5 * Tr) (P.rising = 0), P.rec++;\n  else P.rising = 0;\n  P.f1 = f;\n  if (P.reform \u003c 0) {\n    // The cosine runs through one return and is drawn back onto an exact\n    // cosine at the second, where the returning one stands; other starts,\n    // and runs a dropped soliton keeps from returning, start a fresh wave\n    // after about as long.\n    if (P.kind === 0 ? P.rec >= 1 && P.rising && f > 0.55 : P.tau > 1.2 * Tr) newRun(P, P.kind, P.kind ? 1 : 0.4);\n    else if (P.tau > 2.6 * Tr) newRun(P, P.kind, 1);\n  }\n  if (P.reform >= 0) {\n    // Both leapfrog levels are drawn over to the new wave, the cosine target\n    // following the returning crest, so that what is left of the old wave\n    // falls along a smoothstep; then the run starts from the new one exactly.\n    const r = (P.reform = min(1, P.reform + rowT / P.rlen)), rem = 1 - r * r * (3 - 2 * r), g = P.rem > 0 ? 1 - rem / P.rem : 1;\n    P.rem = rem;\n    if (P.toKind === 0) for (let i = 0; i \u003c NX; i++) P.tg[i] = cos(PI * (i * DX - P.phase));\n    for (let i = 0; i \u003c NX; i++) (u[i] += (P.tg[i] - u[i]) * g), (P.ua[i] += (P.tg[i] - P.ua[i]) * g);\n    if (r >= 1) (P.reform = -1), begin(P, P.toKind);\n  }\n}\n\n// A new run toward a wave of this kind, drawn over in len time units: 0.4\n// for the cosine coming back to itself, a whole unit for a different wave.\nfunction newRun(P, kind, len) {\n  P.reform = 0;\n  P.rem = 1;\n  P.rlen = len;\n  P.toKind = kind;\n  makeWave(P, kind, P.phase, P.tg);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.2, 3);\n  // Delta from 0.022 to 0.06 on a log scale.\n  const delta = 0.022 * (0.06 / 0.022) ** cl(k[2], 0, 1);\n  const kind = min(3, floor(cl(k[3], 0, 1) * 4));\n  if (abs(delta - P.delta) > 1e-6) (P.delta = delta), restartLeap(P);\n  if (P.kind \u003c 0) {\n    // Before the first frame the panel shows the starting wave as if it had\n    // been held still, so the diagram falls out of it.\n    makeWave(P, kind, 1, P.tg);\n    begin(P, kind);\n    P.bg = 9;\n    for (let i = 0; i \u003c NX; i++) P.bg = min(P.bg, P.ub[i]);\n    sample(P, P.hist, 0);\n    for (let r = 1; r \u003c HR; r++) P.hist.copyWithin(r * W, 0, W);\n  }\n  // A new Start is taken once the knob has rested on it a quarter second,\n  // and the wave is drawn over into it like any new run.\n  if (kind === (P.reform >= 0 ? P.toKind : P.kind)) P.wantT = 0;\n  else {\n    if (kind !== P.want) (P.want = kind), (P.wantT = 0);\n    if ((P.wantT += d) > 0.25) newRun(P, kind, 1);\n  }\n  const b = input.btnPressed || [];\n  // Four drops a run at most; past that the train is lost in white.\n  if (b[0] && P.drops \u003c 4) P.drops++, drop(P);\n\n  // 0.6 time units a second at Speed 2; the cosine breaks at 1/pi.\n  let left = d * P.speed * 0.3;\n  const rowT = 1 / RPT;\n  while (left > 1e-12) {\n    const run = min(left, (1 - P.frac) * rowT);\n    step(P, min(4000, max(1, round(run / P.dt))));\n    P.tau += run;\n    left -= run;\n    P.frac += run / rowT;\n    if (P.frac >= 1 - 1e-9) (P.frac = 0), row(P);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.kind \u003c 0) return;\n  if (P.lutHue !== P.hue) palette(P);\n  const now = P.now, hist = P.hist, lut = P.lut, f = P.frac, sc = (NL - 1) / (UH - UL);\n  sample(P, now, 0);\n  for (let y = 0; y \u003c H; y++) {\n    // Row y is the wave y rows of time ago. The newest stored row is f rows\n    // old; the top row is the wave now.\n    let ra = hist, ia, ib, w;\n    if (y \u003c= f) (ra = now), (ia = 0), (ib = P.head * W), (w = f > 0 ? y / f : 0);\n    else {\n      const kk = floor(y - f);\n      ia = ((P.head + kk) % HR) * W;\n      ib = ((P.head + kk + 1) % HR) * W;\n      w = y - f - kk;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const u = ra[ia + x] + (hist[ib + x] - ra[ia + x]) * w;\n      const o = cl(round((u - UL) * sc), 0, NL - 1) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower."},{"name":"Dispersion","min":0,"max":1,"about":"The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often."},{"name":"Start","min":0,"max":1,"about":"The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run."}],"start":[0,2,0,0.06],"measures":{"motion":0.5261,"detail":0.0597,"edges":0.2382,"complexity":1.5547,"coverage":0.8045,"colour":0.3345,"drift":0.2583},"knobResponse":[0.2224,0.1099,0.0581,0.2182]},{"slug":"kelvin-wake","title":"Kelvin Wake","family":"wave","round":34,"note":"고요한 물 위로 흰 거품 한 점이 아래에서 위로 올라가고, 그 뒤로 켈빈의 배 물결이 펼쳐져요. 물길을 가로지르는 굽은 가로 물마루와 비스듬한 짧은 발산 물결이 반각 19.47° 쐐기의 두 팔에서 만나 가장 밝은 첨점 줄을 이루고, 쐐기는 원천이 얼마나 빠르든 원천 뒤 90 LED 에서 패널 양옆에 닿아요. K3 은 원천을 빠르게 해 물결을 길게 늘이지만 쐐기의 각은 그대로예요.","idea":"A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.","buttons":"K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.","code":"// ===== Patternflow pattern =====\n// Title:   Kelvin Wake\n// Family:  wave\n// Idea:    A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kelvin ship-wave pattern (William Thomson, Lord Kelvin, 1887), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1\n//\n// Knob 1: Hue. The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Velocity. The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests.\n// Knob 4: Patch. The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7.\n// Buttons: K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.\n\nconst W = 64, H = 128, YC = 32, DX = 0.5, N = 256;\n// The wake is drawn to 150 LEDs behind its source and fades over the last\n// 45; sources come 190 LEDs apart, so 40 LEDs of still water separate them.\nconst LT = 150, FADE = 45, GAP = 190, ROWS = Math.ceil(LT / DX) + 2;\nconst { floor, sqrt, sin, cos, exp, abs, round, min, max, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// In-place radix-2 FFT with the + sign.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// The steady wake in the source's frame, x LEDs behind it and y LEDs to the\n// side, from the classical integral over wave directions theta:\n//   zeta(x, y) = Im  int sec^3(theta) exp(-(k a)^2 / 4) exp(i k (x cos theta + y sin theta)) dtheta,\n// k = k0 sec^2(theta), k0 = g / U^2 = 2 pi / lambda. The imaginary part is\n// the sine form, which is zero at x = 0, so the wake starts from nothing at\n// the source. Changing variable to the cross-track wavenumber\n// ky = k0 sec(theta) tan(theta) makes each row x one Fourier sum over ky:\n// sec^2(theta) = (1 + sqrt(1 + 4 (ky / k0)^2)) / 2, the along-track\n// wavenumber is k0 sec(theta), and sec^3 dtheta = sec^2 / (k0 (2 sec^2 - 1)) dky.\n// Only the slopes are drawn, so a row is two 256-point FFTs across y: the\n// same sum times i kx and times i ky. 256 LEDs across hold the wedge out to\n// x = 150, where it is 106 wide, so the FFT's wrap never reaches the panel.\n// Fitting the brightest crest beside the axis, row by row out to x = 320, as\n// s x - c x^(1/3) (the Airy fringe sits inside the caustic by c x^(1/3)) puts\n// the cusp line at 19.25 to 19.46 degrees over the whole Velocity range;\n// Kelvin's angle is arcsin(1/3) = 19.47.\nfunction build(T, lambda, a) {\n  const k0 = (2 * PI) / lambda;\n  const { ky, kx, B, r1, i1, r2, i2, ZX, ZY } = T;\n  for (let j = 0; j \u003c N; j++) {\n    const q = (2 * PI * (j \u003c N / 2 ? j : j - N)) / N, u = q / k0;\n    const s2 = (1 + sqrt(1 + 4 * u * u)) / 2, k = k0 * s2, aq = abs(q);\n    // A soft roll-off before the LED grid's Nyquist limit.\n    const win = aq \u003c 0.6 * PI ? 1 : cos(((aq - 0.6 * PI) / (0.4 * PI)) * 0.5 * PI) ** 2;\n    B[j] = (s2 / (k0 * (2 * s2 - 1))) * exp(-(((k * a) / 2) ** 2)) * win;\n    ky[j] = q;\n    kx[j] = k0 * sqrt(s2);\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const x = r * DX;\n    for (let j = 0; j \u003c N; j++) {\n      // Columns sit at y = m + 0.5, so the track runs between the two middle columns.\n      const ph = kx[j] * x + ky[j] * 0.5, c = B[j] * cos(ph), s = B[j] * sin(ph);\n      r1[j] = -kx[j] * s;\n      i1[j] = kx[j] * c;\n      r2[j] = -ky[j] * s;\n      i2[j] = ky[j] * c;\n    }\n    fft(r1, i1);\n    fft(r2, i2);\n    // The far end of the wake fades out: a source that has run for a finite\n    // time has a wake of finite length.\n    const f = 1 - sm(LT - FADE, LT, x);\n    for (let m = 0; m \u003c YC; m++) {\n      ZX[r * YC + m] = i1[m] * f;\n      ZY[r * YC + m] = i2[m] * f;\n    }\n  }\n  // One scale for the shading: the 99th percentile of the lit slope over\n  // the stretch that fits on the panel, both sides of the track.\n  const vals = T.vals;\n  let n = 0;\n  for (let r = floor(4 / DX); r \u003c floor(128 / DX); r += 2)\n    for (let m = 0; m \u003c YC; m++) {\n      const gx = ZX[r * YC + m], gy = ZY[r * YC + m];\n      vals[n++] = abs(gy * T.lx + gx * T.ly);\n      vals[n++] = abs(-gy * T.lx + gx * T.ly);\n    }\n  const v = vals.subarray(0, n).sort();\n  T.scale = 1 / (v[floor(n * 0.99)] || 1);\n}\n\nexport function setup(params) {\n  // The light comes from the upper left, low over the water.\n  const lx = -0.45, ly = -0.89;\n  params.s = {\n    hue: 0, speed: 2, vel: 1, patch: 0.06, warm: false, key: \"\", foamT: 0,\n    src: [], foam: [], cache: new Map(), c: [0, 0, 0],\n    work: {\n      ky: new Float64Array(N), kx: new Float64Array(N), B: new Float64Array(N),\n      r1: new Float64Array(N), i1: new Float64Array(N), r2: new Float64Array(N), i2: new Float64Array(N),\n    },\n    lx, ly, GX: new Float32Array(W * H), GY: new Float32Array(W * H), F: new Float32Array(W * H), tab: null,\n  };\n}\n\nfunction table(S) {\n  // Tables are cached by the quantised knob pair: Velocity in steps of 0.02,\n  // Patch in steps of 0.02.\n  const qv = round(S.vel * 50) / 50, qp = round(S.patch * 50) / 50, key = qv + \",\" + qp;\n  if (key === S.key) return;\n  S.key = key;\n  let T = S.cache.get(key);\n  if (!T) {\n    T = {\n      ...S.work, lx: S.lx, ly: S.ly, scale: 1, vals: new Float32Array(2 * YC * 128),\n      ZX: new Float32Array(ROWS * YC), ZY: new Float32Array(ROWS * YC),\n    };\n    build(T, 12 * qv * qv, 1.2 + 4.8 * qp);\n    if (S.cache.size > 6) S.cache.delete(S.cache.keys().next().value);\n    S.cache.set(key, T);\n  }\n  S.tab = T;\n}\n\n// Rows climbed per second.\nconst rate = (S) => 15 * S.vel * S.speed;\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.vel = cl(k[2], 1, 1.7);\n  S.patch = cl(k[3], 0, 1);\n  table(S);\n  const v = rate(S);\n  if (!S.warm) {\n    // Open so that 2.4 seconds in, a source is 40 LEDs below the top with the\n    // one before it already gone past.\n    const y0 = 40 + 2.4 * v;\n    S.src = [y0 - GAP, y0];\n    S.warm = true;\n  }\n  for (let i = 0; i \u003c S.src.length; i++) S.src[i] -= v * d;\n  while (S.src.length && S.src[0] \u003c -LT - 4) S.src.shift();\n  const last = S.src[S.src.length - 1];\n  if (last === undefined || last \u003c H + 6 - GAP) S.src.push(H + 6);\n  else if (input.btnPressed && input.btnPressed[0] && last \u003c H - 24) S.src.push(H + 6);\n  // Foam shed by each source stays where it fell on the still water and\n  // fades in about 0.4 seconds.\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  S.foamT += d * 60 * S.speed / 2;\n  for (const f of S.foam) f.life -= (d * S.speed) / 2 / 0.4;\n  S.foam = S.foam.filter((f) => f.life > 0);\n  while (S.foamT >= 1) {\n    S.foamT -= 1;\n    for (const ys of S.src)\n      if (ys > -4 && ys \u003c H + 4) {\n        const ang = random() * 2 * PI, r = rf * sqrt(random());\n        S.foam.push({ x: 31.5 + r * cos(ang), y: ys + 0.6 * r * sin(ang) + 1, life: 0.6 + 0.4 * random() });\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tab) return;\n  const T = S.tab, { ZX, ZY } = T, GX = S.GX, GY = S.GY, F = S.F, c = S.c;\n  GX.fill(0);\n  GY.fill(0);\n  F.fill(0);\n  for (const f of S.foam) {\n    const x = round(f.x), y = round(f.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) F[y * W + x] = max(F[y * W + x], min(1, f.life) * 0.85);\n  }\n  // Each source lays its wake, row by row, from the table: x behind it,\n  // linear between table rows; the cross-track slope is odd in y.\n  for (const ys of S.src)\n    for (let y = max(0, Math.ceil(ys)); y \u003c H; y++) {\n      const fx = (y - ys) / DX;\n      if (fx >= ROWS - 1) break;\n      const r = floor(fx), w = fx - r, o0 = r * YC, o1 = o0 + YC;\n      for (let m = 0; m \u003c YC; m++) {\n        const gx = ZX[o0 + m] * (1 - w) + ZX[o1 + m] * w, gy = ZY[o0 + m] * (1 - w) + ZY[o1 + m] * w;\n        GY[y * W + 32 + m] += gx;\n        GX[y * W + 32 + m] += gy;\n        GY[y * W + 31 - m] += gx;\n        GX[y * W + 31 - m] -= gy;\n      }\n    }\n  const h0 = S.hue + 0.55, hh = h0 - floor(h0);\n  // Amber, gold and lime water read brown or olive at the calm level, so\n  // there the water is lifted to 0.74 and its shadow faces lean to crimson.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.22, 0.32, hh));\n  const base = 0.34 + 0.4 * warm, sat0 = 0.82 + 0.1 * warm;\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Lit where the surface tilts towards the light.\n      const sh = -(GX[p] * S.lx + GY[p] * S.ly) * T.scale;\n      const up = sh > 0 ? min(1.4, sh) : 0, dn = sh \u003c 0 ? min(1, -sh) : 0;\n      let v = base + (1 - base) * pow(min(1, up), 0.75) - (base - 0.08 - 0.12 * warm) * pow(dn, 0.7);\n      let s = sat0 * (1 - 0.7 * sm(0.55, 1.25, up));\n      let hue = h0 + 0.03 * up - (0.02 + 0.08 * warm) * dn;\n      // The foam patch over each source.\n      let foam = F[p];\n      for (const ys of S.src) {\n        const dx = x - 31.5, dy = (y - ys) * 1.4, r2 = dx * dx + dy * dy;\n        if (r2 \u003c (rf + 1.5) * (rf + 1.5)) foam = max(foam, 1 - sm(rf - 1, rf + 1.5, sqrt(r2)));\n      }\n      if (foam > 0) {\n        v = v + (1 - v) * foam;\n        s *= 1 - foam;\n      }\n      hsv(hue, s, v, c);\n      display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n    }\n}\n","layer":{"id":"layer-kelvin-wake","type":"code","name":"kelvin-wake","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kelvin Wake\n// Family:  wave\n// Idea:    A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kelvin ship-wave pattern (William Thomson, Lord Kelvin, 1887), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1\n//\n// Knob 1: Hue. The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Velocity. The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests.\n// Knob 4: Patch. The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7.\n// Buttons: K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.\n\nconst W = 64, H = 128, YC = 32, DX = 0.5, N = 256;\n// The wake is drawn to 150 LEDs behind its source and fades over the last\n// 45; sources come 190 LEDs apart, so 40 LEDs of still water separate them.\nconst LT = 150, FADE = 45, GAP = 190, ROWS = Math.ceil(LT / DX) + 2;\nconst { floor, sqrt, sin, cos, exp, abs, round, min, max, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// In-place radix-2 FFT with the + sign.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// The steady wake in the source's frame, x LEDs behind it and y LEDs to the\n// side, from the classical integral over wave directions theta:\n//   zeta(x, y) = Im  int sec^3(theta) exp(-(k a)^2 / 4) exp(i k (x cos theta + y sin theta)) dtheta,\n// k = k0 sec^2(theta), k0 = g / U^2 = 2 pi / lambda. The imaginary part is\n// the sine form, which is zero at x = 0, so the wake starts from nothing at\n// the source. Changing variable to the cross-track wavenumber\n// ky = k0 sec(theta) tan(theta) makes each row x one Fourier sum over ky:\n// sec^2(theta) = (1 + sqrt(1 + 4 (ky / k0)^2)) / 2, the along-track\n// wavenumber is k0 sec(theta), and sec^3 dtheta = sec^2 / (k0 (2 sec^2 - 1)) dky.\n// Only the slopes are drawn, so a row is two 256-point FFTs across y: the\n// same sum times i kx and times i ky. 256 LEDs across hold the wedge out to\n// x = 150, where it is 106 wide, so the FFT's wrap never reaches the panel.\n// Fitting the brightest crest beside the axis, row by row out to x = 320, as\n// s x - c x^(1/3) (the Airy fringe sits inside the caustic by c x^(1/3)) puts\n// the cusp line at 19.25 to 19.46 degrees over the whole Velocity range;\n// Kelvin's angle is arcsin(1/3) = 19.47.\nfunction build(T, lambda, a) {\n  const k0 = (2 * PI) / lambda;\n  const { ky, kx, B, r1, i1, r2, i2, ZX, ZY } = T;\n  for (let j = 0; j \u003c N; j++) {\n    const q = (2 * PI * (j \u003c N / 2 ? j : j - N)) / N, u = q / k0;\n    const s2 = (1 + sqrt(1 + 4 * u * u)) / 2, k = k0 * s2, aq = abs(q);\n    // A soft roll-off before the LED grid's Nyquist limit.\n    const win = aq \u003c 0.6 * PI ? 1 : cos(((aq - 0.6 * PI) / (0.4 * PI)) * 0.5 * PI) ** 2;\n    B[j] = (s2 / (k0 * (2 * s2 - 1))) * exp(-(((k * a) / 2) ** 2)) * win;\n    ky[j] = q;\n    kx[j] = k0 * sqrt(s2);\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const x = r * DX;\n    for (let j = 0; j \u003c N; j++) {\n      // Columns sit at y = m + 0.5, so the track runs between the two middle columns.\n      const ph = kx[j] * x + ky[j] * 0.5, c = B[j] * cos(ph), s = B[j] * sin(ph);\n      r1[j] = -kx[j] * s;\n      i1[j] = kx[j] * c;\n      r2[j] = -ky[j] * s;\n      i2[j] = ky[j] * c;\n    }\n    fft(r1, i1);\n    fft(r2, i2);\n    // The far end of the wake fades out: a source that has run for a finite\n    // time has a wake of finite length.\n    const f = 1 - sm(LT - FADE, LT, x);\n    for (let m = 0; m \u003c YC; m++) {\n      ZX[r * YC + m] = i1[m] * f;\n      ZY[r * YC + m] = i2[m] * f;\n    }\n  }\n  // One scale for the shading: the 99th percentile of the lit slope over\n  // the stretch that fits on the panel, both sides of the track.\n  const vals = T.vals;\n  let n = 0;\n  for (let r = floor(4 / DX); r \u003c floor(128 / DX); r += 2)\n    for (let m = 0; m \u003c YC; m++) {\n      const gx = ZX[r * YC + m], gy = ZY[r * YC + m];\n      vals[n++] = abs(gy * T.lx + gx * T.ly);\n      vals[n++] = abs(-gy * T.lx + gx * T.ly);\n    }\n  const v = vals.subarray(0, n).sort();\n  T.scale = 1 / (v[floor(n * 0.99)] || 1);\n}\n\nexport function setup(params) {\n  // The light comes from the upper left, low over the water.\n  const lx = -0.45, ly = -0.89;\n  params.s = {\n    hue: 0, speed: 2, vel: 1, patch: 0.06, warm: false, key: \"\", foamT: 0,\n    src: [], foam: [], cache: new Map(), c: [0, 0, 0],\n    work: {\n      ky: new Float64Array(N), kx: new Float64Array(N), B: new Float64Array(N),\n      r1: new Float64Array(N), i1: new Float64Array(N), r2: new Float64Array(N), i2: new Float64Array(N),\n    },\n    lx, ly, GX: new Float32Array(W * H), GY: new Float32Array(W * H), F: new Float32Array(W * H), tab: null,\n  };\n}\n\nfunction table(S) {\n  // Tables are cached by the quantised knob pair: Velocity in steps of 0.02,\n  // Patch in steps of 0.02.\n  const qv = round(S.vel * 50) / 50, qp = round(S.patch * 50) / 50, key = qv + \",\" + qp;\n  if (key === S.key) return;\n  S.key = key;\n  let T = S.cache.get(key);\n  if (!T) {\n    T = {\n      ...S.work, lx: S.lx, ly: S.ly, scale: 1, vals: new Float32Array(2 * YC * 128),\n      ZX: new Float32Array(ROWS * YC), ZY: new Float32Array(ROWS * YC),\n    };\n    build(T, 12 * qv * qv, 1.2 + 4.8 * qp);\n    if (S.cache.size > 6) S.cache.delete(S.cache.keys().next().value);\n    S.cache.set(key, T);\n  }\n  S.tab = T;\n}\n\n// Rows climbed per second.\nconst rate = (S) => 15 * S.vel * S.speed;\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.vel = cl(k[2], 1, 1.7);\n  S.patch = cl(k[3], 0, 1);\n  table(S);\n  const v = rate(S);\n  if (!S.warm) {\n    // Open so that 2.4 seconds in, a source is 40 LEDs below the top with the\n    // one before it already gone past.\n    const y0 = 40 + 2.4 * v;\n    S.src = [y0 - GAP, y0];\n    S.warm = true;\n  }\n  for (let i = 0; i \u003c S.src.length; i++) S.src[i] -= v * d;\n  while (S.src.length && S.src[0] \u003c -LT - 4) S.src.shift();\n  const last = S.src[S.src.length - 1];\n  if (last === undefined || last \u003c H + 6 - GAP) S.src.push(H + 6);\n  else if (input.btnPressed && input.btnPressed[0] && last \u003c H - 24) S.src.push(H + 6);\n  // Foam shed by each source stays where it fell on the still water and\n  // fades in about 0.4 seconds.\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  S.foamT += d * 60 * S.speed / 2;\n  for (const f of S.foam) f.life -= (d * S.speed) / 2 / 0.4;\n  S.foam = S.foam.filter((f) => f.life > 0);\n  while (S.foamT >= 1) {\n    S.foamT -= 1;\n    for (const ys of S.src)\n      if (ys > -4 && ys \u003c H + 4) {\n        const ang = random() * 2 * PI, r = rf * sqrt(random());\n        S.foam.push({ x: 31.5 + r * cos(ang), y: ys + 0.6 * r * sin(ang) + 1, life: 0.6 + 0.4 * random() });\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tab) return;\n  const T = S.tab, { ZX, ZY } = T, GX = S.GX, GY = S.GY, F = S.F, c = S.c;\n  GX.fill(0);\n  GY.fill(0);\n  F.fill(0);\n  for (const f of S.foam) {\n    const x = round(f.x), y = round(f.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) F[y * W + x] = max(F[y * W + x], min(1, f.life) * 0.85);\n  }\n  // Each source lays its wake, row by row, from the table: x behind it,\n  // linear between table rows; the cross-track slope is odd in y.\n  for (const ys of S.src)\n    for (let y = max(0, Math.ceil(ys)); y \u003c H; y++) {\n      const fx = (y - ys) / DX;\n      if (fx >= ROWS - 1) break;\n      const r = floor(fx), w = fx - r, o0 = r * YC, o1 = o0 + YC;\n      for (let m = 0; m \u003c YC; m++) {\n        const gx = ZX[o0 + m] * (1 - w) + ZX[o1 + m] * w, gy = ZY[o0 + m] * (1 - w) + ZY[o1 + m] * w;\n        GY[y * W + 32 + m] += gx;\n        GX[y * W + 32 + m] += gy;\n        GY[y * W + 31 - m] += gx;\n        GX[y * W + 31 - m] -= gy;\n      }\n    }\n  const h0 = S.hue + 0.55, hh = h0 - floor(h0);\n  // Amber, gold and lime water read brown or olive at the calm level, so\n  // there the water is lifted to 0.74 and its shadow faces lean to crimson.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.22, 0.32, hh));\n  const base = 0.34 + 0.4 * warm, sat0 = 0.82 + 0.1 * warm;\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Lit where the surface tilts towards the light.\n      const sh = -(GX[p] * S.lx + GY[p] * S.ly) * T.scale;\n      const up = sh > 0 ? min(1.4, sh) : 0, dn = sh \u003c 0 ? min(1, -sh) : 0;\n      let v = base + (1 - base) * pow(min(1, up), 0.75) - (base - 0.08 - 0.12 * warm) * pow(dn, 0.7);\n      let s = sat0 * (1 - 0.7 * sm(0.55, 1.25, up));\n      let hue = h0 + 0.03 * up - (0.02 + 0.08 * warm) * dn;\n      // The foam patch over each source.\n      let foam = F[p];\n      for (const ys of S.src) {\n        const dx = x - 31.5, dy = (y - ys) * 1.4, r2 = dx * dx + dy * dy;\n        if (r2 \u003c (rf + 1.5) * (rf + 1.5)) foam = max(foam, 1 - sm(rf - 1, rf + 1.5, sqrt(r2)));\n      }\n      if (foam > 0) {\n        v = v + (1 - v) * foam;\n        s *= 1 - foam;\n      }\n      hsv(hue, s, v, c);\n      display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again."},{"name":"Velocity","min":1,"max":1.7,"about":"The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests."},{"name":"Patch","min":0,"max":1,"about":"The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7."}],"start":[0,2,1,0.06],"measures":{"motion":1.1485,"detail":0.0308,"edges":0.1674,"complexity":1.0448,"coverage":0.995,"colour":0.1633,"drift":0.0493},"knobResponse":[0.3266,0.0627,0.0628,0.0605]},{"slug":"kettle","title":"Kettle","family":"kitchen","round":20,"note":"밤 부엌 조리대의 유리 전기 주전자가 128줄을 다 써요. 받침의 파란 LED 고리가 물을 밑에서 밝히는 동안 열판의 잔 기포가 떠올랐다 꺼지는 철을 지나 큰 기포가 들끓고, 김이 주둥이에서 패널 꼭대기까지 오르다가 스위치가 딸깍 꺼져요. K1 을 누르면 바로 켜거나 꺼요.","idea":"A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.","buttons":"K1 tap switches the kettle on or off now.","code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-kettle","type":"code","name":"kettle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower."},{"name":"Fill","min":1,"max":1.7,"about":"How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil."},{"name":"Cold","min":0,"max":1,"about":"How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it."}],"start":[0,2,1,0.06],"measures":{"motion":0.2843,"detail":0.0449,"edges":0.2669,"complexity":1.5413,"coverage":0.6281,"colour":0.1671,"drift":0.1681},"knobResponse":[0.1034,0.0699,0.0403,0.056]},{"slug":"kingfisher","title":"Kingfisher","family":"bird","round":20,"note":"강둑 단면이 오리나무 가지부터 강바닥 자갈까지 128줄을 다 써요. 물총새가 가지에서 머리를 까딱이며 물을 보다가 곧장 내리꽂혀 물보라와 거품 줄을 남기고, 피라미를 물고 올라와 가지에 두드린 뒤 삼켜요. K1 을 누르면 바로 뛰어들어요.","idea":"A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.","buttons":"K1 tap sends the kingfisher down now, or as soon as it is back on the branch.","code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","layer":{"id":"layer-kingfisher","type":"code","name":"kingfisher","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen."},{"name":"Fish","min":6,"max":60,"about":"How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner."},{"name":"Current","min":-1,"max":1,"about":"Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea."}],"start":[0,2,6,0.06],"measures":{"motion":0.0867,"detail":0.0496,"edges":0.2577,"complexity":2.0204,"coverage":0.9952,"colour":0.1732,"drift":0.0377},"knobResponse":[0.186,0.0476,0.0402,0.0555]},{"slug":"kintsugi","title":"Kintsugi","family":"pottery","round":25,"note":"어두운 쪽빛 천 위의 청자 찻사발에 금이 가고, 조각들이 조금 벌어져 돌아요. 깨진 날에 붉은 옻과 금이 돈 다음 다시 붙어요. 위에 매달린 종이 등이 흔들리며 금빛 이음매에 반짝임을 지나가게 하고, K3 Mends 를 올릴수록 지나온 깨짐의 금빛 그물이 촘촘해져요. K1 을 누르면 사발이 바로 깨져요.","idea":"A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.","buttons":"K1 tap breaks the bowl now, while it stands whole.","code":"// ===== Patternflow pattern =====\n// Title:   Kintsugi\n// Family:  pottery\n// Idea:    A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after kintsugi, the Japanese mending of broken ware with urushi lacquer and powdered gold\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1\n//\n// Knob 1: Glaze. Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on.\n// Knob 2: Speed. At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower.\n// Knob 3: Mends. How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze.\n// Knob 4: Lamp. Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it.\n// Buttons: K1 tap breaks the bowl now, while it stands whole.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The bowl turned about x = CX, its foot on the cloth at FB, HT tall with a\n// rim RT across, seen a little from above: a circle r across shows E * r tall.\n// Its picture is kept in a band of rows from BY0, BH rows tall.\nconst CX = 32, FB = 104, HT = 40, E = 0.3, RT = 28, HORIZON = 84, BY0 = 52, BH = 58, NB = 64 * BH;\nconst R = (h) => (h \u003c 4 ? 11.5 : 13.6 + 14.4 * sin((min(1, (h - 4) / (HT - 4)) * PI) / 2) ** 0.75);\n\n// Each glaze and the colour it pools to, from celadon to raku black.\nconst GLAZE = [\n  [[112, 184, 150], [62, 134, 128]],\n  [[238, 230, 214], [238, 150, 96]],\n  [[240, 120, 44], [150, 60, 26]],\n  [[46, 42, 42], [92, 74, 62]],\n];\nconst CLAY = [206, 158, 116], BODY = [232, 212, 178], URUSHI = [184, 44, 30], GOLD = [255, 206, 86], OLDG = [236, 160, 64], GLINT = [255, 246, 216], SHEEN = [255, 238, 210];\nconst WALL = [92, 74, 56], WOOD = [104, 66, 40], CLOTH = [46, 62, 132];\n// Rest, crack, open, gild, close and shine, in seconds at Speed 2.\nconst DUR = [5, 0.45, 1.3, 2.4, 1.5, 1.2];\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, tau: 0, wd: 2.4, count: 0, mends: 2, glaze: 0, gs: 0, PX: 33, LX: 33, LY: 29, fade: 1, flare: 0,\n    mat: new Uint8Array(NB), nrm: F32(NB * 3), ao: F32(NB), mot: F32(NB), jit: F32(NB), sid: new Int32Array(NB), fid: new Int32Array(NB), off: new Uint8Array(16),\n    col: F32(NB * 3), f: F32(N * 3), bg: F32(N * 3), dust: [],\n  });\n  geometry(P);\n  // The breaks the bowl has already been through, oldest first.\n  for (let k = 0; k \u003c 8; k++) seams(P, crack(P, 4 + floor(rnd() * 3)), 1 + floor(rnd() * 3));\n  brk(P);\n  backdrop(P);\n  swing(P);\n}\n\n// Where each LED of the bowl's picture sits on it: outer wall, inside, lip or\n// foot, which way it faces, how much the bowl shades it, and the glaze's pooling.\nfunction geometry(P) {\n  const { mat, nrm, ao, mot, jit } = P;\n  for (let b = 0; b \u003c NB; b++) {\n    const x = b & 63, y = (b >> 6) + BY0, px = x + 0.5 - CX, h0 = FB - y - 0.5;\n    let h = h0, r = 0, u = 9, c = 0, n = null, m = 0, a = 1;\n    for (let it = 0; it \u003c 4; it++) {\n      r = R(h);\n      u = px / r;\n      c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n      h = h0 + E * r * c;\n    }\n    r = R(h);\n    u = px / r;\n    if (h >= 0 && h \u003c= HT && u * u \u003c 1) {\n      c = sqrt(1 - u * u);\n      const dR = (R(h + 0.6) - R(h - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = h \u003c 4 ? 4 : h > HT - 1.1 ? 3 : 1;\n      n = m === 3 ? [u * 0.5, 0.8, 0.35] : [u * nl, -dR * nl, c * nl];\n      a = m === 4 ? 0.8 : 1;\n    } else {\n      const ex = px / RT, ey = (y + 0.5 - (FB - HT)) / (E * RT), e2 = ex * ex + ey * ey;\n      if (e2 >= 1) continue;\n      // Inside: the far wall seen over the rim, darker the deeper it goes.\n      let hb = HT;\n      for (let it = 0; it \u003c 4; it++) {\n        r = R(hb);\n        u = cl(px / r, -1, 1);\n        c = sqrt(1 - u * u);\n        hb = cl(h0 - E * r * c, 4, HT);\n      }\n      const dR = (R(hb + 0.6) - R(hb - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = e2 > 0.84 && ey \u003c 0.2 ? 3 : 2;\n      n = m === 3 ? [ex * 0.5, 0.8, 0.35] : [-u * nl, dR * nl, c * nl];\n      a = m === 3 ? 1 : (0.3 + 0.7 * ((hb - 4) / (HT - 4)) ** 0.6) * (1 - 0.35 * sm(0.2, 0.95, ey));\n    }\n    mat[b] = m;\n    nrm.set(n, b * 3);\n    ao[b] = a;\n    mot[b] = sm(0.3, 0.85, 0.75 * vn(x / 4.5, y / 3.5) + 0.25 * hash(x, y + 999)) * (m === 2 ? 1 : 0.8);\n    jit[b] = (hash(x + 77, y) - 0.5) * 0.6;\n  }\n}\n\n// A break: the bowl's picture split into n shards with ragged edges, taller\n// than wide, like cracks that run down from the rim.\nfunction crack(P, n) {\n  const S = [], reg = new Uint8Array(NB), ox = rnd() * 400, oy = rnd() * 400;\n  while (S.length \u003c n) {\n    const b = floor(rnd() * NB);\n    if (P.mat[b]) S.push([(b & 63) + 0.5, (b >> 6) + 0.5]);\n  }\n  for (let b = 0; b \u003c NB; b++) {\n    if (!P.mat[b]) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + 0.5;\n    const wx = x + 5 * (vn(x / 7 + ox, y / 7 + oy) - 0.5) + 1.6 * (vn(x / 2 + oy, y / 2) - 0.5);\n    const wy = y + 5 * (vn(x / 7 + oy, y / 7 + ox + 50) - 0.5) + 1.6 * (vn(x / 2, y / 2 + ox) - 0.5);\n    let best = 1e9;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = wx - S[i][0], dy = (wy - S[i][1]) * 0.75, dd = dx * dx + dy * dy;\n      if (dd \u003c best) (best = dd), (reg[b] = i + 1);\n    }\n  }\n  // Most breaks also knock a chip out of the rim, and the gold fills it.\n  if (rnd() \u003c 0.8) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 3);\n    const r = 2.4 + rnd() * 1.8, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) if (reg[b] && ((b & 63) - cx) ** 2 + ((b >> 6) - cy) ** 2 \u003c r * r) reg[b] = 255;\n  }\n  // Some lose a shard for good, and a piece of another bowl is set in its\n  // place (yobitsugi).\n  if (rnd() \u003c 0.55) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 1 && P.mat[c] !== 2);\n    const r = 4.5 + rnd() * 2.5, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) {\n      const x = b & 63, y = b >> 6, dx = x - cx, dy = (y - cy) * 1.25;\n      if (reg[b] && reg[b] \u003c 255 && dx * dx + dy * dy \u003c (r * (0.75 + 0.5 * vn(x / 3 + ox, y / 3))) ** 2) reg[b] = 254;\n    }\n  }\n  return reg;\n}\n// One side of a crack (for the seam it leaves) or both (for the edges it opens).\nfunction edge(reg, b, both) {\n  const r = reg[b], x = b & 63;\n  if (!r) return false;\n  for (const nb of [x \u003c 63 ? b + 1 : -1, x > 0 ? b - 1 : -1, b + 64 \u003c NB ? b + 64 : -1, b - 64]) {\n    if (nb \u003c 0 || !reg[nb] || reg[nb] === r) continue;\n    if (both || reg[nb] > r) return true;\n  }\n  return false;\n}\n// A closed break becomes the newest seam, with its gold chip and the piece\n// from another bowl, glazed off glazes along.\nfunction seams(P, reg, off) {\n  const id = ++P.count;\n  P.off[id & 15] = off;\n  for (let b = 0; b \u003c NB; b++) {\n    if (reg[b] === 254) P.fid[b] = id;\n    if (reg[b] === 255 || edge(reg, b, 0)) P.sid[b] = id;\n  }\n}\n\n// The next break: its shards, which way each one drifts and turns, the\n// crack's run from where it is struck, and the order the gold goes round.\nfunction brk(P) {\n  const n = 4 + floor(rnd() * 3), reg = crack(P, n), S = [];\n  for (let i = 0; i \u003c n; i++) S.push({ cx: 0, cy: 0, c: 0, rad: 0, e: [] });\n  for (let b = 0; b \u003c NB; b++)\n    if (reg[b] && reg[b] \u003c 254) {\n      const s = S[reg[b] - 1];\n      (s.cx += (b & 63) + 0.5), (s.cy += (b >> 6) + BY0 + 0.5), s.c++;\n    }\n  for (const s of S) {\n    if (!s.c) continue;\n    (s.cx /= s.c), (s.cy /= s.c);\n    const dx = s.cx - CX, sg = dx \u003c 0 ? -1 : 1;\n    Object.assign(s, { tx: dx * 0.28 + sg * (1.5 + rnd() * 1.5), ty: (s.cy - 80) * 0.16 + 1 + rnd(), rot: (rnd() - 0.5) * 0.5, p: rnd() * TAU, o: rnd() });\n  }\n  const cb = new Uint8Array(NB), ce = new Uint8Array(NB), ga = F32(NB), cd = F32(NB);\n  let ib;\n  do ib = floor(rnd() * NB);\n  while (P.mat[ib] !== 1);\n  let md = 1;\n  for (let b = 0; b \u003c NB; b++) {\n    if (!reg[b] || reg[b] > 253) continue;\n    const s = S[reg[b] - 1], x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5;\n    const dx = s.cx - x, dy = s.cy - y;\n    s.rad = max(s.rad, sqrt(dx * dx + dy * dy) + 1.5);\n    if (edge(reg, b, 1)) (ce[b] = 1), s.e.push(b), (ga[b] = (atan2(dy, dx) / TAU + 0.5 + s.o) % 1);\n    if (edge(reg, b, 0)) (cb[b] = 1), (md = max(md, (cd[b] = sqrt((x - (ib & 63)) ** 2 + (y - (ib >> 6) - BY0) ** 2))));\n  }\n  for (let b = 0; b \u003c NB; b++) cd[b] /= md;\n  Object.assign(P, { reg, S, cb, ce, ga, cd, noff: 1 + floor(rnd() * 3), ix: (ib & 63) + 0.5, iy: (ib >> 6) + BY0 + 0.5 });\n}\n\n// The plaster wall with straw in it, the beam the lantern hangs from, and the\n// folded indigo cloth, before the lantern lights them.\nfunction backdrop(P) {\n  const B = P.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, q = hash(x, y);\n      let col, f;\n      if (y \u003c 3) (col = WOOD), (f = (y === 2 ? 0.55 : 0.9) * (0.85 + 0.15 * vn(x / 6, y)));\n      else if (y \u003c HORIZON) (col = WALL), (f = (0.86 + 0.2 * vn(x / 4, y / 4) + 0.04 * q) * (q > 0.985 ? 1.3 : 1));\n      else {\n        // Folds that run across the cloth and ease towards the front.\n        const v = 0.5 + 0.5 * sin(x * 0.11 - y * 0.17 + 2.2 * sin(y * 0.05 + x * 0.04)) * sin(x * 0.07 + y * 0.05 + 1);\n        (col = CLOTH), (f = (0.6 + 0.5 * v ** 1.4) * (0.94 + 0.06 * ((x + y) & 1)) * (y === HORIZON ? 1.35 : 1));\n      }\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f;\n    }\n}\n\nfunction swing(P) {\n  const w = (TAU / 6.5) * P.tau, a = 0.42 * sin(w) + 0.07 * sin(2.3 * w + 1);\n  P.LX = P.PX + 26 * sin(a);\n  P.LY = 3 + 26 * cos(a);\n}\n\nfunction go(P, ph) {\n  if (ph === 5) seams(P, P.reg, P.noff), brk(P);\n  if (ph === 0) P.wd = DUR[0];\n  P.ph = ph;\n  P.pt = 0;\n}\n\n// Where a shard is now: turned by th about its middle and moved by tx, ty.\nfunction place(P, s) {\n  const ph = P.ph, p = P.pt / DUR[ph], e = ph === 2 ? 1 - (1 - p) ** 3 : ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1, p) : 0;\n  const th = (s.rot + 0.05 * sin(P.tau * 1.1 + s.p)) * e;\n  return [cos(th), sin(th), s.cx + (s.tx + 0.8 * sin(P.tau * 1.7 + s.p)) * e, s.cy + (s.ty + 0.6 * cos(P.tau * 1.3 + s.p)) * e];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.glaze = cl(k[0], 0, 1);\n  P.mends = round(cl(k[2], 2, 8));\n  P.PX = 32 + 14 * cl(k[3], -1, 1);\n  P.tau += d;\n  if (input.btnPressed && input.btnPressed[0] && (P.ph === 0 || P.ph === 5)) go(P, 1);\n  if ((P.pt += d) >= (P.ph ? DUR[P.ph] : P.wd)) go(P, (P.ph + 1) % 6);\n  const p = P.pt / DUR[P.ph];\n  P.fade = P.ph === 3 ? 1 - sm(0.2, 1, p) : P.ph === 4 ? 0 : 1;\n  P.flare = P.ph === 5 ? 1 - p : 0;\n  swing(P);\n\n  // Gold powder dusted on the lacquer falls past the shards to the cloth.\n  if (P.ph === 3 && p > 0.3 && rnd() \u003c d * 16) {\n    const s = P.S[floor(rnd() * P.S.length)];\n    if (s.e.length) {\n      const b = s.e[floor(rnd() * s.e.length)], [co, si, tx, ty] = place(P, s), qx = (b & 63) + 0.5 - s.cx, qy = (b >> 6) + BY0 + 0.5 - s.cy;\n      P.dust.push([co * qx - si * qy + tx, si * qx + co * qy + ty, 0, FB + 5 + rnd() * 19, 1, rnd() * TAU]);\n    }\n  }\n  P.dust = P.dust.filter((q) => {\n    if (q[1] \u003c q[3]) (q[2] += 40 * d), (q[1] = min(q[3], q[1] + q[2] * d));\n    else q[4] -= d / 10;\n    return q[4] > 0;\n  });\n  if (P.dust.length > 90) P.dust.shift();\n}\n\n// The bowl's colours for this moment: glaze lit by the lantern, the seams of\n// the mends it carries, and the crack, the bare clay, the lacquer and the\n// gold of the break under way.\nfunction shade(P) {\n  // The bowl's glaze and the three others, round the ring of four.\n  const G = [0, 1, 2, 3].map((k) => {\n    const g = P.glaze * 3 + k, i = floor(g) % 4, f = g - floor(g);\n    return [0, 1].map((j) => GLAZE[i][j].map((v, n) => mix(v, GLAZE[(i + 1) % 4][j][n], f)));\n  });\n  const { mat, nrm, ao, mot, jit, sid, fid, col, LX, LY, ph, count, fade, flare } = P, lo = count - P.mends, p = P.pt / (ph ? DUR[ph] : P.wd);\n  const lac = ph === 3 ? sm(0, 0.5, p) * 1.05 : ph === 4 ? 2 : 0, gil = ph === 3 ? sm(0.3, 1, p) * 1.05 : ph === 4 ? 2 : 0, open = ph >= 2 && ph \u003c= 4;\n  const vis = (id) => (id > lo ? (id === lo + 1 ? fade : 1) : 0);\n  let gs = 0, r = 0, gg = 0, bb = 0, kg = 0, gl = 0;\n  const gold = (a, age, fl) => {\n    const t = min(1, age / 8);\n    gs += a * fl * (kg + gl);\n    r = mix(r, (mix(GOLD[0], OLDG[0], t) * kg + GLINT[0] * gl) * fl, a);\n    gg = mix(gg, (mix(GOLD[1], OLDG[1], t) * kg + GLINT[1] * gl) * fl, a);\n    bb = mix(bb, (mix(GOLD[2], OLDG[2], t) * kg + GLINT[2] * gl) * fl, a);\n  };\n  const flat = (c, k) => ((r = c[0] * k), (gg = c[1] * k), (bb = c[2] * k));\n  for (let b = 0; b \u003c NB; b++) {\n    const m = mat[b];\n    if (!m) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5, o = b * 3, nx = nrm[o], ny = nrm[o + 1], nz = nrm[o + 2];\n    let lx = LX - x, ly = y - LY, lz = 24;\n    const dd = lx * lx + ly * ly + lz * lz, il = 1 / sqrt(dd), fall = 0.55 + 0.6 * exp(-dd / 5000);\n    (lx *= il), (ly *= il), (lz *= il);\n    const hz = lz + 1, hl = 1 / sqrt(lx * lx + ly * ly + hz * hz), dif = max(0, nx * lx + ny * ly + nz * lz) * fall;\n    kg = 0.62 + 0.55 * dif;\n    gl = min(1.1, 1.7 * fall * max(0, ((nx + jit[b]) * lx + ny * ly + nz * hz) * hl) ** 30);\n    if (m === 4) flat(CLAY, (0.16 + 0.8 * dif) * ao[b]);\n    else {\n      // Glaze, or the piece of another bowl set into it.\n      const t = mot[b], fi = fid[b], nw = ph === 4 && P.reg[b] === 254, gk = nw ? P.noff : fi > lo ? P.off[fi & 15] : 0, ga = !nw && fi === lo + 1 ? fade : 1;\n      const k = (0.2 + 0.3 * max(0, -ny) + 0.95 * dif) * ao[b] * (m === 3 ? 1.15 : 1), sh = 0.6 * fall * max(0, (nx * lx + ny * ly + nz * hz) * hl) ** 24;\n      const A = G[0], B = G[gk];\n      r = mix(mix(A[0][0], A[1][0], t), mix(B[0][0], B[1][0], t), ga) * k + SHEEN[0] * sh;\n      gg = mix(mix(A[0][1], A[1][1], t), mix(B[0][1], B[1][1], t), ga) * k + SHEEN[1] * sh;\n      bb = mix(mix(A[0][2], A[1][2], t), mix(B[0][2], B[1][2], t), ga) * k + SHEEN[2] * sh;\n    }\n    const id = sid[b], a = vis(id);\n    if (open && P.ce[b]) {\n      // An opened edge: bare clay, then red lacquer, then gold.\n      const q = P.ga[b];\n      if (q \u003c gil) gold(1, 0, 1.15);\n      else if (q \u003c lac) flat(URUSHI, 0.5 + 0.6 * dif);\n      else flat(BODY, 0.45 + 0.7 * dif);\n    } else if (a > 0) gold(a, count - id, id === count ? 1 + 0.6 * flare : 1);\n    else if (flare > 0) {\n      // Fresh gold glows a little past the line it fills.\n      for (let j = 0; j \u003c 4; j++) {\n        const nb = b + (j === 0 ? 1 : j === 1 ? -1 : j === 2 ? 64 : -64);\n        if (nb >= 0 && nb \u003c NB && sid[nb] === count) {\n          gold(0.6 * flare, 0, 1);\n          break;\n        }\n      }\n    }\n    if (ph === 1 && P.cb[b] && P.cd[b] \u003c p * 1.6) (r *= 0.12), (gg *= 0.12), (bb *= 0.12);\n    (col[o] = r), (col[o + 1] = gg), (col[o + 2] = bb);\n  }\n  P.gs = gs;\n}\n\n// The wall and cloth lit by the lantern, the bowl's shadow thrown away from\n// it, and the warm light its gold throws down on the cloth.\nfunction back(P, F) {\n  const { LX, LY, bg } = P, sx = CX - (LX - CX) * 0.45, gx = CX + (LX - CX) * 0.3, gk = min(1.6, P.gs / 700);\n  // The glows fall off as a column term times a row term.\n  const X = [], Y = [];\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - LX) ** 2;\n    X.push([exp(-dx / 380), exp(-dx / 1400), exp(-dx / 1500), gk * exp(-((x + 0.5 - gx) ** 2) / 600)]);\n  }\n  for (let y = 0; y \u003c H; y++) Y.push([1.2 * exp(-((y + 0.5 - LY) ** 2) / 380), 0.3 * exp(-((y - LY) ** 2) / 4000), 0.9 * exp(-((y - 118) ** 2) / 700), exp(-((y - 111) ** 2) / 160)]);\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const [a, b, c, d] = Y[y], ey = (y + 0.5 - FB - 3) / 7;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const C = X[x];\n      if (y \u003c HORIZON) {\n        const k = 0.3 + a * C[0] + b * C[1];\n        (F[o] = bg[o] * k), (F[o + 1] = bg[o + 1] * k), (F[o + 2] = bg[o + 2] * k);\n        continue;\n      }\n      const ex = (x + 0.5 - sx) / 31, g = d * C[3] * (bg[o + 2] / CLOTH[2]);\n      let k = 0.42 + c * C[2];\n      if (ey * ey \u003c 1.4 && ex * ex \u003c 1.4) k *= 1 - 0.72 * sm(1.15, 0.55, sqrt(ex * ex + ey * ey));\n      k *= 1 + 0.7 * g;\n      (F[o] = bg[o] * k + 96 * g), (F[o + 1] = bg[o + 1] * k + 74 * g), (F[o + 2] = bg[o + 2] * k + 16 * g);\n    }\n  }\n}\n\nconst put = (F, x, y, c, k) => {\n  if ((x = floor(x)) >= 0 && x \u003c W && (y = floor(y)) >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// The paper lantern on its cord: ribs across the lit paper, black lacquer caps.\nfunction lantern(P, F) {\n  const { LX, LY, PX } = P;\n  for (let t = 0; t \u003c 1; t += 0.04) put(F, mix(PX, LX, t), mix(3, LY - 10, t), [70, 58, 46], 1);\n  for (let yy = -10; yy \u003c= 10; yy++) {\n    const y = round(LY) + yy, cap = yy \u003c= -9 || yy >= 9, w = cap ? 3.6 : 6.3 * sqrt(max(0, 1 - (yy / 9.6) ** 2)) + 0.4;\n    for (let x = floor(LX - w); x \u003c= LX + w; x++) {\n      const dx = x + 0.5 - LX, cov = cl(w - Math.abs(dx) + 0.5, 0, 1);\n      if (y \u003c 0 || x \u003c 0 || x >= W || !cov) continue;\n      const o = (y * W + x) * 3, q = dx / w, gl = 1 - q * q, rib = (yy + 9) % 3 ? 1 : 0.7;\n      for (let n = 0; n \u003c 3; n++) {\n        const c = cap ? [38, 30, 26][n] * (1.2 - 0.4 * q) : mix([236, 118, 44][n], [255, 226, 160][n], gl * (1 - (yy / 10) ** 2)) * rib;\n        F[o + n] = mix(F[o + n], c, cov);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.mat) return;\n  const F = P.f, { col, mat, ph } = P;\n  shade(P);\n  back(P, F);\n  lantern(P, F);\n  if (ph >= 2 && ph \u003c= 4) {\n    // Each shard drawn where it has drifted, read back through its turn.\n    for (let i = 0; i \u003c P.S.length; i++) {\n      const s = P.S[i];\n      if (!s.c) continue;\n      const [co, si, tx, ty] = place(P, s);\n      for (let y = max(0, floor(ty - s.rad)); y \u003c= min(H - 1, ty + s.rad); y++)\n        for (let x = max(0, floor(tx - s.rad)); x \u003c= min(W - 1, tx + s.rad); x++) {\n          const dx = x + 0.5 - tx, dy = y + 0.5 - ty, bx = floor(co * dx + si * dy + s.cx), by = floor(-si * dx + co * dy + s.cy) - BY0;\n          if (bx \u003c 0 || bx > 63 || by \u003c 0 || by >= BH) continue;\n          const b = by * 64 + bx, o = (y * W + x) * 3;\n          if (P.reg[b] === i + 1) (F[o] = col[b * 3]), (F[o + 1] = col[b * 3 + 1]), (F[o + 2] = col[b * 3 + 2]);\n        }\n    }\n    // The lost chip comes back as gold, and the lost shard as a piece of\n    // another bowl, as the shards close.\n    const a = ph === 4 ? sm(0.4, 1, P.pt / DUR[4]) : 0;\n    if (a) for (let b = 0, o = BY0 * W * 3; b \u003c NB; b++, o += 3) if (P.reg[b] > 253) for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], col[b * 3 + n], a);\n  } else for (let b = 0; b \u003c NB; b++) if (mat[b]) F.set(col.subarray(b * 3, b * 3 + 3), (BY0 * W + b) * 3);\n  // The ring of the strike.\n  if (ph === 1) {\n    const p = P.pt / DUR[1];\n    for (let y = -7; y \u003c= 7; y++)\n      for (let x = -7; x \u003c= 7; x++) {\n        const k = (1 - p) * exp(-(x * x + y * y) / (2 + 10 * p)), xx = floor(P.ix + x), yy = floor(P.iy + y);\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let n = 0, o = (yy * W + xx) * 3; n \u003c 3; n++) F[o + n] += 255 * k;\n      }\n  }\n  for (const q of P.dust) {\n    const x = floor(q[0]), y = floor(q[1]), k = q[1] \u003c q[3] ? 0.9 : q[4] * (0.25 + 0.75 * max(0, sin(q[5] + P.tau * 4)) ** 3);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = mix(F[o + n], GOLD[n], k);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-kintsugi","type":"code","name":"kintsugi","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kintsugi\n// Family:  pottery\n// Idea:    A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after kintsugi, the Japanese mending of broken ware with urushi lacquer and powdered gold\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1\n//\n// Knob 1: Glaze. Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on.\n// Knob 2: Speed. At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower.\n// Knob 3: Mends. How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze.\n// Knob 4: Lamp. Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it.\n// Buttons: K1 tap breaks the bowl now, while it stands whole.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The bowl turned about x = CX, its foot on the cloth at FB, HT tall with a\n// rim RT across, seen a little from above: a circle r across shows E * r tall.\n// Its picture is kept in a band of rows from BY0, BH rows tall.\nconst CX = 32, FB = 104, HT = 40, E = 0.3, RT = 28, HORIZON = 84, BY0 = 52, BH = 58, NB = 64 * BH;\nconst R = (h) => (h \u003c 4 ? 11.5 : 13.6 + 14.4 * sin((min(1, (h - 4) / (HT - 4)) * PI) / 2) ** 0.75);\n\n// Each glaze and the colour it pools to, from celadon to raku black.\nconst GLAZE = [\n  [[112, 184, 150], [62, 134, 128]],\n  [[238, 230, 214], [238, 150, 96]],\n  [[240, 120, 44], [150, 60, 26]],\n  [[46, 42, 42], [92, 74, 62]],\n];\nconst CLAY = [206, 158, 116], BODY = [232, 212, 178], URUSHI = [184, 44, 30], GOLD = [255, 206, 86], OLDG = [236, 160, 64], GLINT = [255, 246, 216], SHEEN = [255, 238, 210];\nconst WALL = [92, 74, 56], WOOD = [104, 66, 40], CLOTH = [46, 62, 132];\n// Rest, crack, open, gild, close and shine, in seconds at Speed 2.\nconst DUR = [5, 0.45, 1.3, 2.4, 1.5, 1.2];\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, tau: 0, wd: 2.4, count: 0, mends: 2, glaze: 0, gs: 0, PX: 33, LX: 33, LY: 29, fade: 1, flare: 0,\n    mat: new Uint8Array(NB), nrm: F32(NB * 3), ao: F32(NB), mot: F32(NB), jit: F32(NB), sid: new Int32Array(NB), fid: new Int32Array(NB), off: new Uint8Array(16),\n    col: F32(NB * 3), f: F32(N * 3), bg: F32(N * 3), dust: [],\n  });\n  geometry(P);\n  // The breaks the bowl has already been through, oldest first.\n  for (let k = 0; k \u003c 8; k++) seams(P, crack(P, 4 + floor(rnd() * 3)), 1 + floor(rnd() * 3));\n  brk(P);\n  backdrop(P);\n  swing(P);\n}\n\n// Where each LED of the bowl's picture sits on it: outer wall, inside, lip or\n// foot, which way it faces, how much the bowl shades it, and the glaze's pooling.\nfunction geometry(P) {\n  const { mat, nrm, ao, mot, jit } = P;\n  for (let b = 0; b \u003c NB; b++) {\n    const x = b & 63, y = (b >> 6) + BY0, px = x + 0.5 - CX, h0 = FB - y - 0.5;\n    let h = h0, r = 0, u = 9, c = 0, n = null, m = 0, a = 1;\n    for (let it = 0; it \u003c 4; it++) {\n      r = R(h);\n      u = px / r;\n      c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n      h = h0 + E * r * c;\n    }\n    r = R(h);\n    u = px / r;\n    if (h >= 0 && h \u003c= HT && u * u \u003c 1) {\n      c = sqrt(1 - u * u);\n      const dR = (R(h + 0.6) - R(h - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = h \u003c 4 ? 4 : h > HT - 1.1 ? 3 : 1;\n      n = m === 3 ? [u * 0.5, 0.8, 0.35] : [u * nl, -dR * nl, c * nl];\n      a = m === 4 ? 0.8 : 1;\n    } else {\n      const ex = px / RT, ey = (y + 0.5 - (FB - HT)) / (E * RT), e2 = ex * ex + ey * ey;\n      if (e2 >= 1) continue;\n      // Inside: the far wall seen over the rim, darker the deeper it goes.\n      let hb = HT;\n      for (let it = 0; it \u003c 4; it++) {\n        r = R(hb);\n        u = cl(px / r, -1, 1);\n        c = sqrt(1 - u * u);\n        hb = cl(h0 - E * r * c, 4, HT);\n      }\n      const dR = (R(hb + 0.6) - R(hb - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = e2 > 0.84 && ey \u003c 0.2 ? 3 : 2;\n      n = m === 3 ? [ex * 0.5, 0.8, 0.35] : [-u * nl, dR * nl, c * nl];\n      a = m === 3 ? 1 : (0.3 + 0.7 * ((hb - 4) / (HT - 4)) ** 0.6) * (1 - 0.35 * sm(0.2, 0.95, ey));\n    }\n    mat[b] = m;\n    nrm.set(n, b * 3);\n    ao[b] = a;\n    mot[b] = sm(0.3, 0.85, 0.75 * vn(x / 4.5, y / 3.5) + 0.25 * hash(x, y + 999)) * (m === 2 ? 1 : 0.8);\n    jit[b] = (hash(x + 77, y) - 0.5) * 0.6;\n  }\n}\n\n// A break: the bowl's picture split into n shards with ragged edges, taller\n// than wide, like cracks that run down from the rim.\nfunction crack(P, n) {\n  const S = [], reg = new Uint8Array(NB), ox = rnd() * 400, oy = rnd() * 400;\n  while (S.length \u003c n) {\n    const b = floor(rnd() * NB);\n    if (P.mat[b]) S.push([(b & 63) + 0.5, (b >> 6) + 0.5]);\n  }\n  for (let b = 0; b \u003c NB; b++) {\n    if (!P.mat[b]) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + 0.5;\n    const wx = x + 5 * (vn(x / 7 + ox, y / 7 + oy) - 0.5) + 1.6 * (vn(x / 2 + oy, y / 2) - 0.5);\n    const wy = y + 5 * (vn(x / 7 + oy, y / 7 + ox + 50) - 0.5) + 1.6 * (vn(x / 2, y / 2 + ox) - 0.5);\n    let best = 1e9;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = wx - S[i][0], dy = (wy - S[i][1]) * 0.75, dd = dx * dx + dy * dy;\n      if (dd \u003c best) (best = dd), (reg[b] = i + 1);\n    }\n  }\n  // Most breaks also knock a chip out of the rim, and the gold fills it.\n  if (rnd() \u003c 0.8) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 3);\n    const r = 2.4 + rnd() * 1.8, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) if (reg[b] && ((b & 63) - cx) ** 2 + ((b >> 6) - cy) ** 2 \u003c r * r) reg[b] = 255;\n  }\n  // Some lose a shard for good, and a piece of another bowl is set in its\n  // place (yobitsugi).\n  if (rnd() \u003c 0.55) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 1 && P.mat[c] !== 2);\n    const r = 4.5 + rnd() * 2.5, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) {\n      const x = b & 63, y = b >> 6, dx = x - cx, dy = (y - cy) * 1.25;\n      if (reg[b] && reg[b] \u003c 255 && dx * dx + dy * dy \u003c (r * (0.75 + 0.5 * vn(x / 3 + ox, y / 3))) ** 2) reg[b] = 254;\n    }\n  }\n  return reg;\n}\n// One side of a crack (for the seam it leaves) or both (for the edges it opens).\nfunction edge(reg, b, both) {\n  const r = reg[b], x = b & 63;\n  if (!r) return false;\n  for (const nb of [x \u003c 63 ? b + 1 : -1, x > 0 ? b - 1 : -1, b + 64 \u003c NB ? b + 64 : -1, b - 64]) {\n    if (nb \u003c 0 || !reg[nb] || reg[nb] === r) continue;\n    if (both || reg[nb] > r) return true;\n  }\n  return false;\n}\n// A closed break becomes the newest seam, with its gold chip and the piece\n// from another bowl, glazed off glazes along.\nfunction seams(P, reg, off) {\n  const id = ++P.count;\n  P.off[id & 15] = off;\n  for (let b = 0; b \u003c NB; b++) {\n    if (reg[b] === 254) P.fid[b] = id;\n    if (reg[b] === 255 || edge(reg, b, 0)) P.sid[b] = id;\n  }\n}\n\n// The next break: its shards, which way each one drifts and turns, the\n// crack's run from where it is struck, and the order the gold goes round.\nfunction brk(P) {\n  const n = 4 + floor(rnd() * 3), reg = crack(P, n), S = [];\n  for (let i = 0; i \u003c n; i++) S.push({ cx: 0, cy: 0, c: 0, rad: 0, e: [] });\n  for (let b = 0; b \u003c NB; b++)\n    if (reg[b] && reg[b] \u003c 254) {\n      const s = S[reg[b] - 1];\n      (s.cx += (b & 63) + 0.5), (s.cy += (b >> 6) + BY0 + 0.5), s.c++;\n    }\n  for (const s of S) {\n    if (!s.c) continue;\n    (s.cx /= s.c), (s.cy /= s.c);\n    const dx = s.cx - CX, sg = dx \u003c 0 ? -1 : 1;\n    Object.assign(s, { tx: dx * 0.28 + sg * (1.5 + rnd() * 1.5), ty: (s.cy - 80) * 0.16 + 1 + rnd(), rot: (rnd() - 0.5) * 0.5, p: rnd() * TAU, o: rnd() });\n  }\n  const cb = new Uint8Array(NB), ce = new Uint8Array(NB), ga = F32(NB), cd = F32(NB);\n  let ib;\n  do ib = floor(rnd() * NB);\n  while (P.mat[ib] !== 1);\n  let md = 1;\n  for (let b = 0; b \u003c NB; b++) {\n    if (!reg[b] || reg[b] > 253) continue;\n    const s = S[reg[b] - 1], x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5;\n    const dx = s.cx - x, dy = s.cy - y;\n    s.rad = max(s.rad, sqrt(dx * dx + dy * dy) + 1.5);\n    if (edge(reg, b, 1)) (ce[b] = 1), s.e.push(b), (ga[b] = (atan2(dy, dx) / TAU + 0.5 + s.o) % 1);\n    if (edge(reg, b, 0)) (cb[b] = 1), (md = max(md, (cd[b] = sqrt((x - (ib & 63)) ** 2 + (y - (ib >> 6) - BY0) ** 2))));\n  }\n  for (let b = 0; b \u003c NB; b++) cd[b] /= md;\n  Object.assign(P, { reg, S, cb, ce, ga, cd, noff: 1 + floor(rnd() * 3), ix: (ib & 63) + 0.5, iy: (ib >> 6) + BY0 + 0.5 });\n}\n\n// The plaster wall with straw in it, the beam the lantern hangs from, and the\n// folded indigo cloth, before the lantern lights them.\nfunction backdrop(P) {\n  const B = P.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, q = hash(x, y);\n      let col, f;\n      if (y \u003c 3) (col = WOOD), (f = (y === 2 ? 0.55 : 0.9) * (0.85 + 0.15 * vn(x / 6, y)));\n      else if (y \u003c HORIZON) (col = WALL), (f = (0.86 + 0.2 * vn(x / 4, y / 4) + 0.04 * q) * (q > 0.985 ? 1.3 : 1));\n      else {\n        // Folds that run across the cloth and ease towards the front.\n        const v = 0.5 + 0.5 * sin(x * 0.11 - y * 0.17 + 2.2 * sin(y * 0.05 + x * 0.04)) * sin(x * 0.07 + y * 0.05 + 1);\n        (col = CLOTH), (f = (0.6 + 0.5 * v ** 1.4) * (0.94 + 0.06 * ((x + y) & 1)) * (y === HORIZON ? 1.35 : 1));\n      }\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f;\n    }\n}\n\nfunction swing(P) {\n  const w = (TAU / 6.5) * P.tau, a = 0.42 * sin(w) + 0.07 * sin(2.3 * w + 1);\n  P.LX = P.PX + 26 * sin(a);\n  P.LY = 3 + 26 * cos(a);\n}\n\nfunction go(P, ph) {\n  if (ph === 5) seams(P, P.reg, P.noff), brk(P);\n  if (ph === 0) P.wd = DUR[0];\n  P.ph = ph;\n  P.pt = 0;\n}\n\n// Where a shard is now: turned by th about its middle and moved by tx, ty.\nfunction place(P, s) {\n  const ph = P.ph, p = P.pt / DUR[ph], e = ph === 2 ? 1 - (1 - p) ** 3 : ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1, p) : 0;\n  const th = (s.rot + 0.05 * sin(P.tau * 1.1 + s.p)) * e;\n  return [cos(th), sin(th), s.cx + (s.tx + 0.8 * sin(P.tau * 1.7 + s.p)) * e, s.cy + (s.ty + 0.6 * cos(P.tau * 1.3 + s.p)) * e];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.glaze = cl(k[0], 0, 1);\n  P.mends = round(cl(k[2], 2, 8));\n  P.PX = 32 + 14 * cl(k[3], -1, 1);\n  P.tau += d;\n  if (input.btnPressed && input.btnPressed[0] && (P.ph === 0 || P.ph === 5)) go(P, 1);\n  if ((P.pt += d) >= (P.ph ? DUR[P.ph] : P.wd)) go(P, (P.ph + 1) % 6);\n  const p = P.pt / DUR[P.ph];\n  P.fade = P.ph === 3 ? 1 - sm(0.2, 1, p) : P.ph === 4 ? 0 : 1;\n  P.flare = P.ph === 5 ? 1 - p : 0;\n  swing(P);\n\n  // Gold powder dusted on the lacquer falls past the shards to the cloth.\n  if (P.ph === 3 && p > 0.3 && rnd() \u003c d * 16) {\n    const s = P.S[floor(rnd() * P.S.length)];\n    if (s.e.length) {\n      const b = s.e[floor(rnd() * s.e.length)], [co, si, tx, ty] = place(P, s), qx = (b & 63) + 0.5 - s.cx, qy = (b >> 6) + BY0 + 0.5 - s.cy;\n      P.dust.push([co * qx - si * qy + tx, si * qx + co * qy + ty, 0, FB + 5 + rnd() * 19, 1, rnd() * TAU]);\n    }\n  }\n  P.dust = P.dust.filter((q) => {\n    if (q[1] \u003c q[3]) (q[2] += 40 * d), (q[1] = min(q[3], q[1] + q[2] * d));\n    else q[4] -= d / 10;\n    return q[4] > 0;\n  });\n  if (P.dust.length > 90) P.dust.shift();\n}\n\n// The bowl's colours for this moment: glaze lit by the lantern, the seams of\n// the mends it carries, and the crack, the bare clay, the lacquer and the\n// gold of the break under way.\nfunction shade(P) {\n  // The bowl's glaze and the three others, round the ring of four.\n  const G = [0, 1, 2, 3].map((k) => {\n    const g = P.glaze * 3 + k, i = floor(g) % 4, f = g - floor(g);\n    return [0, 1].map((j) => GLAZE[i][j].map((v, n) => mix(v, GLAZE[(i + 1) % 4][j][n], f)));\n  });\n  const { mat, nrm, ao, mot, jit, sid, fid, col, LX, LY, ph, count, fade, flare } = P, lo = count - P.mends, p = P.pt / (ph ? DUR[ph] : P.wd);\n  const lac = ph === 3 ? sm(0, 0.5, p) * 1.05 : ph === 4 ? 2 : 0, gil = ph === 3 ? sm(0.3, 1, p) * 1.05 : ph === 4 ? 2 : 0, open = ph >= 2 && ph \u003c= 4;\n  const vis = (id) => (id > lo ? (id === lo + 1 ? fade : 1) : 0);\n  let gs = 0, r = 0, gg = 0, bb = 0, kg = 0, gl = 0;\n  const gold = (a, age, fl) => {\n    const t = min(1, age / 8);\n    gs += a * fl * (kg + gl);\n    r = mix(r, (mix(GOLD[0], OLDG[0], t) * kg + GLINT[0] * gl) * fl, a);\n    gg = mix(gg, (mix(GOLD[1], OLDG[1], t) * kg + GLINT[1] * gl) * fl, a);\n    bb = mix(bb, (mix(GOLD[2], OLDG[2], t) * kg + GLINT[2] * gl) * fl, a);\n  };\n  const flat = (c, k) => ((r = c[0] * k), (gg = c[1] * k), (bb = c[2] * k));\n  for (let b = 0; b \u003c NB; b++) {\n    const m = mat[b];\n    if (!m) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5, o = b * 3, nx = nrm[o], ny = nrm[o + 1], nz = nrm[o + 2];\n    let lx = LX - x, ly = y - LY, lz = 24;\n    const dd = lx * lx + ly * ly + lz * lz, il = 1 / sqrt(dd), fall = 0.55 + 0.6 * exp(-dd / 5000);\n    (lx *= il), (ly *= il), (lz *= il);\n    const hz = lz + 1, hl = 1 / sqrt(lx * lx + ly * ly + hz * hz), dif = max(0, nx * lx + ny * ly + nz * lz) * fall;\n    kg = 0.62 + 0.55 * dif;\n    gl = min(1.1, 1.7 * fall * max(0, ((nx + jit[b]) * lx + ny * ly + nz * hz) * hl) ** 30);\n    if (m === 4) flat(CLAY, (0.16 + 0.8 * dif) * ao[b]);\n    else {\n      // Glaze, or the piece of another bowl set into it.\n      const t = mot[b], fi = fid[b], nw = ph === 4 && P.reg[b] === 254, gk = nw ? P.noff : fi > lo ? P.off[fi & 15] : 0, ga = !nw && fi === lo + 1 ? fade : 1;\n      const k = (0.2 + 0.3 * max(0, -ny) + 0.95 * dif) * ao[b] * (m === 3 ? 1.15 : 1), sh = 0.6 * fall * max(0, (nx * lx + ny * ly + nz * hz) * hl) ** 24;\n      const A = G[0], B = G[gk];\n      r = mix(mix(A[0][0], A[1][0], t), mix(B[0][0], B[1][0], t), ga) * k + SHEEN[0] * sh;\n      gg = mix(mix(A[0][1], A[1][1], t), mix(B[0][1], B[1][1], t), ga) * k + SHEEN[1] * sh;\n      bb = mix(mix(A[0][2], A[1][2], t), mix(B[0][2], B[1][2], t), ga) * k + SHEEN[2] * sh;\n    }\n    const id = sid[b], a = vis(id);\n    if (open && P.ce[b]) {\n      // An opened edge: bare clay, then red lacquer, then gold.\n      const q = P.ga[b];\n      if (q \u003c gil) gold(1, 0, 1.15);\n      else if (q \u003c lac) flat(URUSHI, 0.5 + 0.6 * dif);\n      else flat(BODY, 0.45 + 0.7 * dif);\n    } else if (a > 0) gold(a, count - id, id === count ? 1 + 0.6 * flare : 1);\n    else if (flare > 0) {\n      // Fresh gold glows a little past the line it fills.\n      for (let j = 0; j \u003c 4; j++) {\n        const nb = b + (j === 0 ? 1 : j === 1 ? -1 : j === 2 ? 64 : -64);\n        if (nb >= 0 && nb \u003c NB && sid[nb] === count) {\n          gold(0.6 * flare, 0, 1);\n          break;\n        }\n      }\n    }\n    if (ph === 1 && P.cb[b] && P.cd[b] \u003c p * 1.6) (r *= 0.12), (gg *= 0.12), (bb *= 0.12);\n    (col[o] = r), (col[o + 1] = gg), (col[o + 2] = bb);\n  }\n  P.gs = gs;\n}\n\n// The wall and cloth lit by the lantern, the bowl's shadow thrown away from\n// it, and the warm light its gold throws down on the cloth.\nfunction back(P, F) {\n  const { LX, LY, bg } = P, sx = CX - (LX - CX) * 0.45, gx = CX + (LX - CX) * 0.3, gk = min(1.6, P.gs / 700);\n  // The glows fall off as a column term times a row term.\n  const X = [], Y = [];\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - LX) ** 2;\n    X.push([exp(-dx / 380), exp(-dx / 1400), exp(-dx / 1500), gk * exp(-((x + 0.5 - gx) ** 2) / 600)]);\n  }\n  for (let y = 0; y \u003c H; y++) Y.push([1.2 * exp(-((y + 0.5 - LY) ** 2) / 380), 0.3 * exp(-((y - LY) ** 2) / 4000), 0.9 * exp(-((y - 118) ** 2) / 700), exp(-((y - 111) ** 2) / 160)]);\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const [a, b, c, d] = Y[y], ey = (y + 0.5 - FB - 3) / 7;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const C = X[x];\n      if (y \u003c HORIZON) {\n        const k = 0.3 + a * C[0] + b * C[1];\n        (F[o] = bg[o] * k), (F[o + 1] = bg[o + 1] * k), (F[o + 2] = bg[o + 2] * k);\n        continue;\n      }\n      const ex = (x + 0.5 - sx) / 31, g = d * C[3] * (bg[o + 2] / CLOTH[2]);\n      let k = 0.42 + c * C[2];\n      if (ey * ey \u003c 1.4 && ex * ex \u003c 1.4) k *= 1 - 0.72 * sm(1.15, 0.55, sqrt(ex * ex + ey * ey));\n      k *= 1 + 0.7 * g;\n      (F[o] = bg[o] * k + 96 * g), (F[o + 1] = bg[o + 1] * k + 74 * g), (F[o + 2] = bg[o + 2] * k + 16 * g);\n    }\n  }\n}\n\nconst put = (F, x, y, c, k) => {\n  if ((x = floor(x)) >= 0 && x \u003c W && (y = floor(y)) >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// The paper lantern on its cord: ribs across the lit paper, black lacquer caps.\nfunction lantern(P, F) {\n  const { LX, LY, PX } = P;\n  for (let t = 0; t \u003c 1; t += 0.04) put(F, mix(PX, LX, t), mix(3, LY - 10, t), [70, 58, 46], 1);\n  for (let yy = -10; yy \u003c= 10; yy++) {\n    const y = round(LY) + yy, cap = yy \u003c= -9 || yy >= 9, w = cap ? 3.6 : 6.3 * sqrt(max(0, 1 - (yy / 9.6) ** 2)) + 0.4;\n    for (let x = floor(LX - w); x \u003c= LX + w; x++) {\n      const dx = x + 0.5 - LX, cov = cl(w - Math.abs(dx) + 0.5, 0, 1);\n      if (y \u003c 0 || x \u003c 0 || x >= W || !cov) continue;\n      const o = (y * W + x) * 3, q = dx / w, gl = 1 - q * q, rib = (yy + 9) % 3 ? 1 : 0.7;\n      for (let n = 0; n \u003c 3; n++) {\n        const c = cap ? [38, 30, 26][n] * (1.2 - 0.4 * q) : mix([236, 118, 44][n], [255, 226, 160][n], gl * (1 - (yy / 10) ** 2)) * rib;\n        F[o + n] = mix(F[o + n], c, cov);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.mat) return;\n  const F = P.f, { col, mat, ph } = P;\n  shade(P);\n  back(P, F);\n  lantern(P, F);\n  if (ph >= 2 && ph \u003c= 4) {\n    // Each shard drawn where it has drifted, read back through its turn.\n    for (let i = 0; i \u003c P.S.length; i++) {\n      const s = P.S[i];\n      if (!s.c) continue;\n      const [co, si, tx, ty] = place(P, s);\n      for (let y = max(0, floor(ty - s.rad)); y \u003c= min(H - 1, ty + s.rad); y++)\n        for (let x = max(0, floor(tx - s.rad)); x \u003c= min(W - 1, tx + s.rad); x++) {\n          const dx = x + 0.5 - tx, dy = y + 0.5 - ty, bx = floor(co * dx + si * dy + s.cx), by = floor(-si * dx + co * dy + s.cy) - BY0;\n          if (bx \u003c 0 || bx > 63 || by \u003c 0 || by >= BH) continue;\n          const b = by * 64 + bx, o = (y * W + x) * 3;\n          if (P.reg[b] === i + 1) (F[o] = col[b * 3]), (F[o + 1] = col[b * 3 + 1]), (F[o + 2] = col[b * 3 + 2]);\n        }\n    }\n    // The lost chip comes back as gold, and the lost shard as a piece of\n    // another bowl, as the shards close.\n    const a = ph === 4 ? sm(0.4, 1, P.pt / DUR[4]) : 0;\n    if (a) for (let b = 0, o = BY0 * W * 3; b \u003c NB; b++, o += 3) if (P.reg[b] > 253) for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], col[b * 3 + n], a);\n  } else for (let b = 0; b \u003c NB; b++) if (mat[b]) F.set(col.subarray(b * 3, b * 3 + 3), (BY0 * W + b) * 3);\n  // The ring of the strike.\n  if (ph === 1) {\n    const p = P.pt / DUR[1];\n    for (let y = -7; y \u003c= 7; y++)\n      for (let x = -7; x \u003c= 7; x++) {\n        const k = (1 - p) * exp(-(x * x + y * y) / (2 + 10 * p)), xx = floor(P.ix + x), yy = floor(P.iy + y);\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let n = 0, o = (yy * W + xx) * 3; n \u003c 3; n++) F[o + n] += 255 * k;\n      }\n  }\n  for (const q of P.dust) {\n    const x = floor(q[0]), y = floor(q[1]), k = q[1] \u003c q[3] ? 0.9 : q[4] * (0.25 + 0.75 * max(0, sin(q[5] + P.tau * 4)) ** 3);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = mix(F[o + n], GOLD[n], k);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glaze","min":0,"max":1,"about":"Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower."},{"name":"Mends","min":2,"max":8,"about":"How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze."},{"name":"Lamp","min":-1,"max":1,"about":"Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it."}],"start":[0,2,2,0.06],"measures":{"motion":0.1906,"detail":0.0509,"edges":0.2812,"complexity":2.0844,"coverage":0.9972,"colour":0.1903,"drift":0.136},"knobResponse":[0.0565,0.1068,0.0529,0.1171]},{"slug":"kolakoski","title":"Kolakoski","family":"number","round":35,"note":"제 런 길이 부호와 같은 1 과 2 의 수열이 열 단의 고드름으로 매달려요. 맨 아래 단은 3,000번 항부터 64항이 LED 하나씩 금색 1 과 보라 2 로 서고, 그 위 단마다 아래 단의 런을 만든 항이 런 너비로 앉아 같은 수열이 단마다 3분의 2 로 줄며 왼쪽으로 한 항씩 흘러요. K3 은 단을 16 까지 늘리고, K1 을 누르면 창이 10만 항 뒤로 건너뛰어 맨 위 눈금이 1 이 4 개 앞선 자리에서 2 가 46 개 앞선 자리로 옮겨요.","idea":"The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.","buttons":"K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.","code":"// ===== Patternflow pattern =====\n// Title:   Kolakoski\n// Family:  number\n// Idea:    The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kolakoski sequence (William Kolakoski, 1965), pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1\n//\n// Knob 1: Hue. Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot.\n// Knob 2: Speed. Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s.\n// Knob 3: Bands. How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel.\n// Knob 4: Falloff. Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round.\n// Buttons: K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.\n\n// Term i of the sequence is the length of run i: 1, 2, 2, 1, 1, 2, 1 is a\n// run of one 1, one of two 2s, two 1s, one 2, one 1, ... and the runs\n// alternate 1s and 2s. So term k has K[k] children, the terms of run k,\n// and up[j] is the run that term j sits in: its parent. Term 0 and term 1\n// are their own parents, and every other term climbs to term 1, from term\n// 3,000 in 19 steps, from term 100,000 in 27.\n//\n// Rufus Oldenburger described it first in 1939; Kolakoski asked about it in\n// the American Mathematical Monthly in 1965. Keane's question, whether the\n// share of 1s tends to 1/2, is still open. Counted here: 49,972 1s in the\n// first 100,000 terms, 499,986 in the first million, and the 1s never run\n// more than 66 ahead of the 2s or behind them in all that way.\n\nconst W = 64, H = 128, N = 1 \u003c\u003c 20, W0 = 3000, JUMP = 100000, TOP = 3;\nconst { floor, max, round, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  // 2^20 terms, written by reading the sequence itself two terms behind the\n  // pen: 28 ms.\n  const K = new Uint8Array(N);\n  K[0] = 1;\n  K[1] = 2;\n  K[2] = 2;\n  for (let len = 3, read = 2, val = 1; len \u003c N; val = 3 - val)\n    for (let c = 0, r = K[read++]; c \u003c r && len \u003c N; c++) K[len++] = val;\n  const up = new Int32Array(N), ones = new Int32Array(N + 1);\n  for (let k = 0, pos = 0; pos \u003c N; k++) for (let c = 0; c \u003c K[k] && pos \u003c N; c++) up[pos++] = k;\n  for (let i = 0; i \u003c N; i++) ones[i + 1] = ones[i] + (K[i] === 1 ? 1 : 0);\n  params.s = {\n    K, up, ones, w: W0, acc: 0, hue: 0, speed: 2, bands: 10, fall: 0.06,\n    pal: new Float32Array(12), palHue: NaN, anc: new Int32Array(16 * W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.bands = round(cl(k[2], 10, 16));\n  P.fall = cl(k[3], -1, 1);\n  // Whole terms only: a window between two terms would smear every band.\n  P.acc += d * P.speed * 1.5;\n  while (P.acc >= 1) (P.acc -= 1), P.w++;\n  if (input.btnPressed && input.btnPressed[0]) P.w += JUMP;\n  if (P.w + W >= N) P.w = W0 + ((P.w - W0) % (N - W - W0));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { K, up, anc, pal } = P;\n  if (P.palHue !== P.hue) {\n    // Pale and full gold for the 1s, pale and deep violet for the 2s: each\n    // band runs from the first at its top row to the second at its foot.\n    // The gold keeps its brightness all the way down, as a darker gold\n    // reads olive, and where the knob turns the violet to red, orange or\n    // yellow it is lifted the same way.\n    const h2 = P.hue + 0.72 - floor(P.hue + 0.72), hw = h2 > 0.9 ? h2 - 1 : h2, warm = cl((hw + 0.06) / 0.08, 0, 1) * cl((0.32 - hw) / 0.08, 0, 1);\n    hsv(P.hue + 0.11, 0.28, 1, pal, 0);\n    hsv(P.hue + 0.11, 0.7, 1, pal, 3);\n    hsv(h2, 0.38, 0.8 + 0.15 * warm, pal, 6);\n    hsv(h2, 0.7, 0.56 + 0.36 * warm, pal, 9);\n    P.palHue = P.hue;\n  }\n  // anc[b W + x] is the ancestor b generations up of the term under column\n  // x. A band's term boundaries fall where this changes, so each term is\n  // exactly as wide as its descendants in the window.\n  const B = P.bands;\n  for (let x = 0; x \u003c W; x++)\n    for (let b = 0, j = P.w + x; b \u003c B; b++, j = up[j]) anc[b * W + x] = j;\n  // Band heights grow by `ratio` a band going up, with a dark row between\n  // bands; the top band takes what rounding leaves.\n  const avail = H - TOP - (B - 1), ratio = pow(1.3, P.fall);\n  let sum = 0;\n  for (let b = 0; b \u003c B; b++) sum += pow(ratio, b);\n  for (let b = 0, y = H; b \u003c B; b++) {\n    const hgt = b === B - 1 ? y - TOP : max(3, round((avail * pow(ratio, b)) / sum)), y0 = y - hgt, row = b * W;\n    for (let x = 0; x \u003c W; x++) {\n      const a = anc[row + x], v = K[a], o = (v - 1) * 6;\n      // Neighbours of different value part by colour. Two of the same, the\n      // two terms of one run, get a dark seam on the first column of the\n      // right one when it is two LEDs or more; two 1-LED terms run together\n      // and the band above tells them apart.\n      let g = 255;\n      if (x > 0 && anc[row + x - 1] !== a && K[anc[row + x - 1]] === v && x + 1 \u003c W && anc[row + x + 1] === a) g = 40;\n      for (let yy = y0; yy \u003c y; yy++) {\n        const t = hgt > 1 ? (yy - y0) / (hgt - 1) : 1, u = 1 - t;\n        display.setPixel(x, yy, (pal[o] * u + pal[o + 3] * t) * g, (pal[o + 1] * u + pal[o + 4] * t) * g, (pal[o + 2] * u + pal[o + 5] * t) * g);\n      }\n    }\n    if (y0 - 1 >= TOP) for (let x = 0; x \u003c W; x++) display.setPixel(x, y0 - 1, 0, 0, 0);\n    y = y0 - 1;\n  }\n  // The gauge: 1s minus 2s among the first w + 64 terms, half an LED a\n  // term from the middle, toward the gold side when the 1s are ahead. The\n  // track is dim violet on the left, dim gold on the right.\n  const n = P.w + W, lead = 2 * P.ones[n] - n, mx = cl(32 + round(lead / 2), 0, W - 1);\n  for (let x = 0; x \u003c W; x++) {\n    const o = x \u003c 32 ? 9 : 3, g = x === 32 ? 0 : 70;\n    for (let yy = 0; yy \u003c 2; yy++) {\n      if (x === mx) display.setPixel(x, yy, 255, 255, 255);\n      else if (g === 0) display.setPixel(x, yy, 110, 110, 110);\n      else display.setPixel(x, yy, pal[o] * g, pal[o + 1] * g, pal[o + 2] * g);\n    }\n    display.setPixel(x, 2, 0, 0, 0);\n  }\n}\n","layer":{"id":"layer-kolakoski","type":"code","name":"kolakoski","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kolakoski\n// Family:  number\n// Idea:    The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kolakoski sequence (William Kolakoski, 1965), pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1\n//\n// Knob 1: Hue. Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot.\n// Knob 2: Speed. Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s.\n// Knob 3: Bands. How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel.\n// Knob 4: Falloff. Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round.\n// Buttons: K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.\n\n// Term i of the sequence is the length of run i: 1, 2, 2, 1, 1, 2, 1 is a\n// run of one 1, one of two 2s, two 1s, one 2, one 1, ... and the runs\n// alternate 1s and 2s. So term k has K[k] children, the terms of run k,\n// and up[j] is the run that term j sits in: its parent. Term 0 and term 1\n// are their own parents, and every other term climbs to term 1, from term\n// 3,000 in 19 steps, from term 100,000 in 27.\n//\n// Rufus Oldenburger described it first in 1939; Kolakoski asked about it in\n// the American Mathematical Monthly in 1965. Keane's question, whether the\n// share of 1s tends to 1/2, is still open. Counted here: 49,972 1s in the\n// first 100,000 terms, 499,986 in the first million, and the 1s never run\n// more than 66 ahead of the 2s or behind them in all that way.\n\nconst W = 64, H = 128, N = 1 \u003c\u003c 20, W0 = 3000, JUMP = 100000, TOP = 3;\nconst { floor, max, round, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  // 2^20 terms, written by reading the sequence itself two terms behind the\n  // pen: 28 ms.\n  const K = new Uint8Array(N);\n  K[0] = 1;\n  K[1] = 2;\n  K[2] = 2;\n  for (let len = 3, read = 2, val = 1; len \u003c N; val = 3 - val)\n    for (let c = 0, r = K[read++]; c \u003c r && len \u003c N; c++) K[len++] = val;\n  const up = new Int32Array(N), ones = new Int32Array(N + 1);\n  for (let k = 0, pos = 0; pos \u003c N; k++) for (let c = 0; c \u003c K[k] && pos \u003c N; c++) up[pos++] = k;\n  for (let i = 0; i \u003c N; i++) ones[i + 1] = ones[i] + (K[i] === 1 ? 1 : 0);\n  params.s = {\n    K, up, ones, w: W0, acc: 0, hue: 0, speed: 2, bands: 10, fall: 0.06,\n    pal: new Float32Array(12), palHue: NaN, anc: new Int32Array(16 * W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.bands = round(cl(k[2], 10, 16));\n  P.fall = cl(k[3], -1, 1);\n  // Whole terms only: a window between two terms would smear every band.\n  P.acc += d * P.speed * 1.5;\n  while (P.acc >= 1) (P.acc -= 1), P.w++;\n  if (input.btnPressed && input.btnPressed[0]) P.w += JUMP;\n  if (P.w + W >= N) P.w = W0 + ((P.w - W0) % (N - W - W0));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { K, up, anc, pal } = P;\n  if (P.palHue !== P.hue) {\n    // Pale and full gold for the 1s, pale and deep violet for the 2s: each\n    // band runs from the first at its top row to the second at its foot.\n    // The gold keeps its brightness all the way down, as a darker gold\n    // reads olive, and where the knob turns the violet to red, orange or\n    // yellow it is lifted the same way.\n    const h2 = P.hue + 0.72 - floor(P.hue + 0.72), hw = h2 > 0.9 ? h2 - 1 : h2, warm = cl((hw + 0.06) / 0.08, 0, 1) * cl((0.32 - hw) / 0.08, 0, 1);\n    hsv(P.hue + 0.11, 0.28, 1, pal, 0);\n    hsv(P.hue + 0.11, 0.7, 1, pal, 3);\n    hsv(h2, 0.38, 0.8 + 0.15 * warm, pal, 6);\n    hsv(h2, 0.7, 0.56 + 0.36 * warm, pal, 9);\n    P.palHue = P.hue;\n  }\n  // anc[b W + x] is the ancestor b generations up of the term under column\n  // x. A band's term boundaries fall where this changes, so each term is\n  // exactly as wide as its descendants in the window.\n  const B = P.bands;\n  for (let x = 0; x \u003c W; x++)\n    for (let b = 0, j = P.w + x; b \u003c B; b++, j = up[j]) anc[b * W + x] = j;\n  // Band heights grow by `ratio` a band going up, with a dark row between\n  // bands; the top band takes what rounding leaves.\n  const avail = H - TOP - (B - 1), ratio = pow(1.3, P.fall);\n  let sum = 0;\n  for (let b = 0; b \u003c B; b++) sum += pow(ratio, b);\n  for (let b = 0, y = H; b \u003c B; b++) {\n    const hgt = b === B - 1 ? y - TOP : max(3, round((avail * pow(ratio, b)) / sum)), y0 = y - hgt, row = b * W;\n    for (let x = 0; x \u003c W; x++) {\n      const a = anc[row + x], v = K[a], o = (v - 1) * 6;\n      // Neighbours of different value part by colour. Two of the same, the\n      // two terms of one run, get a dark seam on the first column of the\n      // right one when it is two LEDs or more; two 1-LED terms run together\n      // and the band above tells them apart.\n      let g = 255;\n      if (x > 0 && anc[row + x - 1] !== a && K[anc[row + x - 1]] === v && x + 1 \u003c W && anc[row + x + 1] === a) g = 40;\n      for (let yy = y0; yy \u003c y; yy++) {\n        const t = hgt > 1 ? (yy - y0) / (hgt - 1) : 1, u = 1 - t;\n        display.setPixel(x, yy, (pal[o] * u + pal[o + 3] * t) * g, (pal[o + 1] * u + pal[o + 4] * t) * g, (pal[o + 2] * u + pal[o + 5] * t) * g);\n      }\n    }\n    if (y0 - 1 >= TOP) for (let x = 0; x \u003c W; x++) display.setPixel(x, y0 - 1, 0, 0, 0);\n    y = y0 - 1;\n  }\n  // The gauge: 1s minus 2s among the first w + 64 terms, half an LED a\n  // term from the middle, toward the gold side when the 1s are ahead. The\n  // track is dim violet on the left, dim gold on the right.\n  const n = P.w + W, lead = 2 * P.ones[n] - n, mx = cl(32 + round(lead / 2), 0, W - 1);\n  for (let x = 0; x \u003c W; x++) {\n    const o = x \u003c 32 ? 9 : 3, g = x === 32 ? 0 : 70;\n    for (let yy = 0; yy \u003c 2; yy++) {\n      if (x === mx) display.setPixel(x, yy, 255, 255, 255);\n      else if (g === 0) display.setPixel(x, yy, 110, 110, 110);\n      else display.setPixel(x, yy, pal[o] * g, pal[o + 1] * g, pal[o + 2] * g);\n    }\n    display.setPixel(x, 2, 0, 0, 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot."},{"name":"Speed","min":0.2,"max":3,"about":"Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s."},{"name":"Bands","min":10,"max":16,"about":"How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel."},{"name":"Falloff","min":-1,"max":1,"about":"Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round."}],"start":[0,2,10,0.06],"measures":{"motion":0.3357,"detail":0.1184,"edges":0.9202,"complexity":0.2363,"coverage":0.9144,"colour":0.3543,"drift":0.0962},"knobResponse":[0.3404,0.1812,0.286,0.2965]},{"slug":"kuramoto-sivashinsky","title":"Kuramoto-Sivashinsky","family":"noise","round":37,"note":"쿠라모토-시바신스키 방정식을 패널 폭만 한 고리에서 한 열에 격자점 하나씩 풀고, 새 순간이 맨 위로 들어와 아래로 흘러서 128줄이 시공간 그림이 돼요. u 가 양인 청록 줄기와 음인 자홍 줄기가 흔들리고 갈라지고 합쳐지며 땋이고, u 가 0을 지나는 곳은 검게 비어요. K3 은 고리 길이를 22에서 66으로 늘려 두 줄기를 일곱 줄기로 만들고, K4 의 분산 항은 혼돈을 한쪽으로 기우는 펄스 열로 가라앉혀요. 누르면 앞면이 한 군데 패여요.","idea":"The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.","buttons":"K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.","code":"// ===== Patternflow pattern =====\n// Title:   Kuramoto-Sivashinsky\n// Family:  noise\n// Idea:    The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kuramoto-Sivashinsky equation (Yoshiki Kuramoto, 1976; Gregory Sivashinsky, 1977), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1\n//\n// Knob 1: Hue. Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal.\n// Knob 2: Speed. Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s.\n// Knob 3: Length. The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge.\n// Knob 4: Dispersion. A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative.\n// Buttons: K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.\n\n// The solver is ETDRK4, the exponential time-differencing Runge-Kutta\n// scheme of Steven Cox and Paul Matthews (2002), with the coefficients\n// taken as means round a circle in the complex plane, the way Aly-Khan\n// Kassam and Lloyd Trefethen (2005) do it, so they hold for every mode from\n// the growing ones to the most damped. In Fourier space\n//   v_t = (k^2 - k^4 + i delta k^3) v - (i k / 2) FFT(u^2),\n// the linear part solved exactly and only u^2 stepped, 0.25 time units a\n// step, five steps a row, 40 FFTs of size 64 a frame at Speed 2. At 0.4\n// time units a row the streaks hardly bent in 128 rows; at 1.25 they braid.\n//\n// Checked over 10,000 time units from the same start at delta 0:\n// - The energy, the mean of u^2, stays bounded: it averages 1.41 at L 22\n//   and 1.71 at L 66, and never passes 3.13.\n// - The fastest-growing wavelength is 2 pi sqrt 2, so a ring of length L\n//   should hold about L / 8.89 cells. Counting the positive humps of u\n//   (with a 0.4 dead band) gives 2.26 at L 22 against 2.48, 3.66 at 36\n//   against 4.05, 5.34 at 50 against 5.63 and 6.89 at 66 against 7.43:\n//   always 91 to 93 percent of it.\n// - 64 grid points resolve the ring up to L 66, where the highest mode\n//   never carries more than 0.65 percent of the largest. At L 100 it\n//   reached 21 percent, so the knob stops at 66.\nconst W = 64, H = 128, N = 64, STEP = 0.25, ROW = 1.25, RATE = 15, MC = 32, PRERUN = 100;\nconst { floor, exp, cos, sin, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// A complex FFT of size 64: bit reversal, then six rounds of butterflies.\nconst BR = new Uint8Array(N), CS = new Float64Array(N / 2), SN = new Float64Array(N / 2);\nfor (let i = 0; i \u003c N; i++) {\n  let r = 0;\n  for (let b = 0, v = i; b \u003c 6; b++, v >>= 1) r = (r \u003c\u003c 1) | (v & 1);\n  BR[i] = r;\n}\nfor (let k = 0; k \u003c N / 2; k++) (CS[k] = cos((TAU * k) / N)), (SN[k] = sin((TAU * k) / N));\n\nfunction fft(re, im, sign) {\n  for (let i = 0; i \u003c N; i++) {\n    const j = BR[i];\n    if (j > i) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let size = 2; size \u003c= N; size \u003c\u003c= 1) {\n    const half = size >> 1, step = N / size;\n    for (let i = 0; i \u003c N; i += size)\n      for (let k = 0; k \u003c half; k++) {\n        const wr = CS[k * step], wi = sign * SN[k * step], a = i + k, b = a + half;\n        const tr = re[b] * wr - im[b] * wi, ti = re[b] * wi + im[b] * wr;\n        re[b] = re[a] - tr;\n        im[b] = im[a] - ti;\n        re[a] += tr;\n        im[a] += ti;\n      }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\nconst f64 = () => new Float64Array(N);\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: -1, speed: 2, L: -1, delta: NaN, acc: 0, head: 0,\n    vr: f64(), vi: f64(), g: f64(),\n    Er: f64(), Ei: f64(), E2r: f64(), E2i: f64(), Qr: f64(), Qi: f64(),\n    f1r: f64(), f1i: f64(), f2r: f64(), f2i: f64(), f3r: f64(), f3i: f64(),\n    ar: f64(), ai: f64(), br: f64(), bi: f64(), cr: f64(), ci: f64(),\n    Nvr: f64(), Nvi: f64(), Nar: f64(), Nai: f64(), Nbr: f64(), Nbi: f64(), Ncr: f64(), Nci: f64(),\n    tr: f64(), ti: f64(), u: f64(),\n    hist: new Float32Array(H * N), next: new Float32Array(N), lut: new Uint8Array(2 * 257 * 3),\n  };\n}\n\n// The ETDRK4 coefficients for ring length L and dispersion delta. Mode n\n// has wavenumber k = 2 pi n / L for n below 32 and 2 pi (n - 64) / L above;\n// the Nyquist mode, n = 32, gets the damping of its true wavenumber but no\n// share of the nonlinear term, as an odd derivative cannot be taken there.\nfunction coefficients(S) {\n  const { L, delta, g } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const kk = (TAU * (n \u003c N / 2 ? n : n - N)) / L, kn = n === N / 2 ? (TAU * (N / 2)) / L : kk;\n    g[n] = n === N / 2 ? 0 : -0.5 * kk;\n    const zr = STEP * (kn * kn - kn * kn * kn * kn), zi = n === N / 2 ? 0 : STEP * delta * kk * kk * kk;\n    let em = exp(zr);\n    S.Er[n] = em * cos(zi);\n    S.Ei[n] = em * sin(zi);\n    em = exp(zr / 2);\n    S.E2r[n] = em * cos(zi / 2);\n    S.E2i[n] = em * sin(zi / 2);\n    let qr = 0, qi = 0, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0;\n    for (let j = 0; j \u003c MC; j++) {\n      const th = (TAU * (j + 0.5)) / MC, lr = zr + cos(th), li = zi + sin(th);\n      const ex = exp(lr), er = ex * cos(li), ei = ex * sin(li);\n      const hx = exp(lr / 2), hr = hx * cos(li / 2), hi = hx * sin(li / 2);\n      const l2r = lr * lr - li * li, l2i = 2 * lr * li;\n      const l3r = l2r * lr - l2i * li, l3i = l2r * li + l2i * lr;\n      const d1 = lr * lr + li * li, d3 = l3r * l3r + l3i * l3i;\n      qr += ((hr - 1) * lr + hi * li) / d1;\n      qi += (hi * lr - (hr - 1) * li) / d1;\n      let pr = 4 - 3 * lr + l2r, pi = -3 * li + l2i;\n      let nr = -4 - lr + er * pr - ei * pi, ni = -li + er * pi + ei * pr;\n      a1 += (nr * l3r + ni * l3i) / d3;\n      b1 += (ni * l3r - nr * l3i) / d3;\n      pr = lr - 2;\n      pi = li;\n      nr = 2 + lr + er * pr - ei * pi;\n      ni = li + er * pi + ei * pr;\n      a2 += (nr * l3r + ni * l3i) / d3;\n      b2 += (ni * l3r - nr * l3i) / d3;\n      pr = 4 - lr;\n      pi = -li;\n      nr = -4 - 3 * lr - l2r + er * pr - ei * pi;\n      ni = -3 * li - l2i + er * pi + ei * pr;\n      a3 += (nr * l3r + ni * l3i) / d3;\n      b3 += (ni * l3r - nr * l3i) / d3;\n    }\n    const m = STEP / MC;\n    S.Qr[n] = qr * m;\n    S.Qi[n] = qi * m;\n    S.f1r[n] = a1 * m;\n    S.f1i[n] = b1 * m;\n    S.f2r[n] = a2 * m;\n    S.f2i[n] = b2 * m;\n    S.f3r[n] = a3 * m;\n    S.f3i[n] = b3 * m;\n  }\n}\n\n// N(v) = -(i k / 2) FFT(u^2), u the real part of the inverse FFT of v.\nfunction nonlinear(S, xr, xi, outr, outi) {\n  const { tr, ti, g } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = xr[n]), (ti[n] = xi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) {\n    const u = tr[j] / N;\n    tr[j] = u * u;\n    ti[j] = 0;\n  }\n  fft(tr, ti, -1);\n  for (let n = 0; n \u003c N; n++) {\n    outr[n] = -g[n] * ti[n];\n    outi[n] = g[n] * tr[n];\n  }\n}\n\nfunction step(S) {\n  const { vr, vi, ar, ai, br, bi, cr, ci, Nvr, Nvi, Nar, Nai, Nbr, Nbi, Ncr, Nci, E2r, E2i, Qr, Qi } = S;\n  nonlinear(S, vr, vi, Nvr, Nvi);\n  for (let n = 0; n \u003c N; n++) {\n    ar[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nvr[n] - Qi[n] * Nvi[n];\n    ai[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nvi[n] + Qi[n] * Nvr[n];\n  }\n  nonlinear(S, ar, ai, Nar, Nai);\n  for (let n = 0; n \u003c N; n++) {\n    br[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nar[n] - Qi[n] * Nai[n];\n    bi[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nai[n] + Qi[n] * Nar[n];\n  }\n  nonlinear(S, br, bi, Nbr, Nbi);\n  for (let n = 0; n \u003c N; n++) {\n    const xr = 2 * Nbr[n] - Nvr[n], xi = 2 * Nbi[n] - Nvi[n];\n    cr[n] = E2r[n] * ar[n] - E2i[n] * ai[n] + Qr[n] * xr - Qi[n] * xi;\n    ci[n] = E2r[n] * ai[n] + E2i[n] * ar[n] + Qr[n] * xi + Qi[n] * xr;\n  }\n  nonlinear(S, cr, ci, Ncr, Nci);\n  const { Er, Ei, f1r, f1i, f2r, f2i, f3r, f3i } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const sr = Nar[n] + Nbr[n], si = Nai[n] + Nbi[n];\n    const nr =\n      Er[n] * vr[n] - Ei[n] * vi[n] +\n      (Nvr[n] * f1r[n] - Nvi[n] * f1i[n]) + 2 * (sr * f2r[n] - si * f2i[n]) + (Ncr[n] * f3r[n] - Nci[n] * f3i[n]);\n    const ni =\n      Er[n] * vi[n] + Ei[n] * vr[n] +\n      (Nvr[n] * f1i[n] + Nvi[n] * f1r[n]) + 2 * (sr * f2i[n] + si * f2r[n]) + (Ncr[n] * f3i[n] + Nci[n] * f3r[n]);\n    vr[n] = nr;\n    vi[n] = ni;\n  }\n  // u is real, so v_(64-n) is the conjugate of v_n. Round-off breaks that,\n  // and the broken part is invisible to u^2, so nothing holds it down: it\n  // grew at the linear rate of modes 2 and 3, 0.19 a time unit at L = 22,\n  // and blew the run up at t = 340. Folding it back each step keeps it at 0.\n  for (let n = 1; n \u003c N / 2; n++) {\n    const a = 0.5 * (vr[n] + vr[N - n]), b = 0.5 * (vi[n] - vi[N - n]);\n    vr[n] = vr[N - n] = a;\n    vi[n] = b;\n    vi[N - n] = -b;\n  }\n  vr[0] = vi[0] = vi[N / 2] = 0;\n}\n\n// u on the 64 grid points, one per column.\nfunction physical(S, out) {\n  const { tr, ti } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = S.vr[n]), (ti[n] = S.vi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) out[j] = tr[j] / N;\n}\n\nfunction advanceRow(S) {\n  for (let s = 0, n = round(ROW / STEP); s \u003c n; s++) step(S);\n}\n\n// The row just computed goes in at the head; `next` is one row ahead of it,\n// so the top of the panel can slide between the two.\nfunction pushRow(S) {\n  S.head = (S.head + H - 1) % H;\n  S.hist.set(S.next, S.head * N);\n  advanceRow(S);\n  physical(S, S.next);\n}\n\n// u is the slope of Sivashinsky's flame front, so a dent pushed into the\n// front shows in u as a dipole, up on one side and down on the other: the\n// derivative of a Gaussian, 4 columns wide, peaks of +-amp. It has no mean.\n// A plain bump had one, and taking it off shifted the whole row by 0.78,\n// a hard line straight across the diagram.\nfunction kick(S, x0, amp) {\n  const u = S.u;\n  physical(S, u);\n  for (let j = 0; j \u003c N; j++) {\n    let d = j - x0;\n    if (d > N / 2) d -= N;\n    if (d \u003c -N / 2) d += N;\n    const q = d / 4;\n    S.tr[j] = u[j] + amp * 1.6487 * q * exp(-0.5 * q * q);\n    S.ti[j] = 0;\n  }\n  fft(S.tr, S.ti, -1);\n  for (let n = 0; n \u003c N; n++) (S.vr[n] = S.tr[n]), (S.vi[n] = S.ti[n]);\n  S.vr[0] = S.vi[0] = 0;\n}\n\nfunction start(S) {\n  // Low modes with random phases, then PRERUN time units so the first\n  // frame is already chaos, then a full panel of history.\n  for (let n = 0; n \u003c N; n++) S.vr[n] = S.vi[n] = 0;\n  for (let n = 1; n \u003c= 6; n++) {\n    const ph = random() * TAU, a = (0.3 * N) / n;\n    S.vr[n] = a * cos(ph);\n    S.vi[n] = a * sin(ph);\n    S.vr[N - n] = a * cos(ph);\n    S.vi[N - n] = -a * sin(ph);\n  }\n  for (let s = 0, n = round(PRERUN / STEP); s \u003c n; s++) step(S);\n  physical(S, S.next);\n  for (let r = 0; r \u003c H; r++) pushRow(S);\n  S.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 22, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const L = cl(k[2], 22, 66), delta = cl(k[3], -1, 1);\n  if (L !== S.L || delta !== S.delta) {\n    S.L = L;\n    S.delta = delta;\n    coefficients(S);\n  }\n  if (!S.ready) start(S);\n  if (input.btnPressed && input.btnPressed[0]) kick(S, random() * N, 4);\n  S.acc += d * S.speed * RATE;\n  // 30 rows a second at 30 frames lands on 0.9999...; a hair of slack\n  // keeps it one row a frame instead of none and then two.\n  while (S.acc >= 1 - 1e-6) {\n    S.acc = Math.max(0, S.acc - 1);\n    pushRow(S);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  const lut = S.lut;\n  if (S.lutHue !== S.hue) {\n    // Two ramps of 257 steps, positive u then negative: black at zero,\n    // rising straight to full colour at |u| = 2.64, then paling to a tint at\n    // 3.3. A straight ramp keeps the steps between neighbours soft; the\n    // first, steeper ramp put a hard step on 23 percent of them.\n    for (let side = 0; side \u003c 2; side++) {\n      const h = S.hue + (side === 0 ? 0.5 : 0.86);\n      for (let i = 0; i \u003c= 256; i++) {\n        const a = i / 256, f = cl(a / 0.8, 0, 1), w = cl((a - 0.8) / 0.2, 0, 1);\n        hsv(h + 0.05 * (f - 1), 1 - 0.55 * w, f, lut, (side * 257 + i) * 3);\n      }\n    }\n    S.lutHue = S.hue;\n  }\n  // Pulses grow with the dispersion, |u| up to 3.5 at delta 0 and 4.7 at\n  // delta 1, so the map stretches with it and the pulses do not wash out pale.\n  const { hist, next, head, acc } = S, inv = 256 / (3.3 * (1 + 0.4 * abs(S.delta)));\n  for (let y = 0; y \u003c H; y++) {\n    // Display row y is `acc` of the way from history row y - 1 to row y,\n    // where row -1 is the one computed ahead.\n    const a = y - acc, r0 = floor(a), t = a - r0;\n    const A = r0 \u003c 0 ? next : null, o0 = ((head + r0 + H) % H) * N, o1 = ((head + r0 + 1) % H) * N;\n    for (let x = 0; x \u003c W; x++) {\n      const u0 = A ? A[x] : hist[o0 + x], u1 = r0 + 1 \u003c H ? hist[o1 + x] : u0;\n      const u = u0 + (u1 - u0) * t, i = Math.min(256, round(abs(u) * inv)), o = ((u \u003c 0 ? 257 : 0) + i) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-kuramoto-sivashinsky","type":"code","name":"kuramoto-sivashinsky","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kuramoto-Sivashinsky\n// Family:  noise\n// Idea:    The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kuramoto-Sivashinsky equation (Yoshiki Kuramoto, 1976; Gregory Sivashinsky, 1977), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1\n//\n// Knob 1: Hue. Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal.\n// Knob 2: Speed. Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s.\n// Knob 3: Length. The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge.\n// Knob 4: Dispersion. A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative.\n// Buttons: K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.\n\n// The solver is ETDRK4, the exponential time-differencing Runge-Kutta\n// scheme of Steven Cox and Paul Matthews (2002), with the coefficients\n// taken as means round a circle in the complex plane, the way Aly-Khan\n// Kassam and Lloyd Trefethen (2005) do it, so they hold for every mode from\n// the growing ones to the most damped. In Fourier space\n//   v_t = (k^2 - k^4 + i delta k^3) v - (i k / 2) FFT(u^2),\n// the linear part solved exactly and only u^2 stepped, 0.25 time units a\n// step, five steps a row, 40 FFTs of size 64 a frame at Speed 2. At 0.4\n// time units a row the streaks hardly bent in 128 rows; at 1.25 they braid.\n//\n// Checked over 10,000 time units from the same start at delta 0:\n// - The energy, the mean of u^2, stays bounded: it averages 1.41 at L 22\n//   and 1.71 at L 66, and never passes 3.13.\n// - The fastest-growing wavelength is 2 pi sqrt 2, so a ring of length L\n//   should hold about L / 8.89 cells. Counting the positive humps of u\n//   (with a 0.4 dead band) gives 2.26 at L 22 against 2.48, 3.66 at 36\n//   against 4.05, 5.34 at 50 against 5.63 and 6.89 at 66 against 7.43:\n//   always 91 to 93 percent of it.\n// - 64 grid points resolve the ring up to L 66, where the highest mode\n//   never carries more than 0.65 percent of the largest. At L 100 it\n//   reached 21 percent, so the knob stops at 66.\nconst W = 64, H = 128, N = 64, STEP = 0.25, ROW = 1.25, RATE = 15, MC = 32, PRERUN = 100;\nconst { floor, exp, cos, sin, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// A complex FFT of size 64: bit reversal, then six rounds of butterflies.\nconst BR = new Uint8Array(N), CS = new Float64Array(N / 2), SN = new Float64Array(N / 2);\nfor (let i = 0; i \u003c N; i++) {\n  let r = 0;\n  for (let b = 0, v = i; b \u003c 6; b++, v >>= 1) r = (r \u003c\u003c 1) | (v & 1);\n  BR[i] = r;\n}\nfor (let k = 0; k \u003c N / 2; k++) (CS[k] = cos((TAU * k) / N)), (SN[k] = sin((TAU * k) / N));\n\nfunction fft(re, im, sign) {\n  for (let i = 0; i \u003c N; i++) {\n    const j = BR[i];\n    if (j > i) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let size = 2; size \u003c= N; size \u003c\u003c= 1) {\n    const half = size >> 1, step = N / size;\n    for (let i = 0; i \u003c N; i += size)\n      for (let k = 0; k \u003c half; k++) {\n        const wr = CS[k * step], wi = sign * SN[k * step], a = i + k, b = a + half;\n        const tr = re[b] * wr - im[b] * wi, ti = re[b] * wi + im[b] * wr;\n        re[b] = re[a] - tr;\n        im[b] = im[a] - ti;\n        re[a] += tr;\n        im[a] += ti;\n      }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\nconst f64 = () => new Float64Array(N);\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: -1, speed: 2, L: -1, delta: NaN, acc: 0, head: 0,\n    vr: f64(), vi: f64(), g: f64(),\n    Er: f64(), Ei: f64(), E2r: f64(), E2i: f64(), Qr: f64(), Qi: f64(),\n    f1r: f64(), f1i: f64(), f2r: f64(), f2i: f64(), f3r: f64(), f3i: f64(),\n    ar: f64(), ai: f64(), br: f64(), bi: f64(), cr: f64(), ci: f64(),\n    Nvr: f64(), Nvi: f64(), Nar: f64(), Nai: f64(), Nbr: f64(), Nbi: f64(), Ncr: f64(), Nci: f64(),\n    tr: f64(), ti: f64(), u: f64(),\n    hist: new Float32Array(H * N), next: new Float32Array(N), lut: new Uint8Array(2 * 257 * 3),\n  };\n}\n\n// The ETDRK4 coefficients for ring length L and dispersion delta. Mode n\n// has wavenumber k = 2 pi n / L for n below 32 and 2 pi (n - 64) / L above;\n// the Nyquist mode, n = 32, gets the damping of its true wavenumber but no\n// share of the nonlinear term, as an odd derivative cannot be taken there.\nfunction coefficients(S) {\n  const { L, delta, g } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const kk = (TAU * (n \u003c N / 2 ? n : n - N)) / L, kn = n === N / 2 ? (TAU * (N / 2)) / L : kk;\n    g[n] = n === N / 2 ? 0 : -0.5 * kk;\n    const zr = STEP * (kn * kn - kn * kn * kn * kn), zi = n === N / 2 ? 0 : STEP * delta * kk * kk * kk;\n    let em = exp(zr);\n    S.Er[n] = em * cos(zi);\n    S.Ei[n] = em * sin(zi);\n    em = exp(zr / 2);\n    S.E2r[n] = em * cos(zi / 2);\n    S.E2i[n] = em * sin(zi / 2);\n    let qr = 0, qi = 0, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0;\n    for (let j = 0; j \u003c MC; j++) {\n      const th = (TAU * (j + 0.5)) / MC, lr = zr + cos(th), li = zi + sin(th);\n      const ex = exp(lr), er = ex * cos(li), ei = ex * sin(li);\n      const hx = exp(lr / 2), hr = hx * cos(li / 2), hi = hx * sin(li / 2);\n      const l2r = lr * lr - li * li, l2i = 2 * lr * li;\n      const l3r = l2r * lr - l2i * li, l3i = l2r * li + l2i * lr;\n      const d1 = lr * lr + li * li, d3 = l3r * l3r + l3i * l3i;\n      qr += ((hr - 1) * lr + hi * li) / d1;\n      qi += (hi * lr - (hr - 1) * li) / d1;\n      let pr = 4 - 3 * lr + l2r, pi = -3 * li + l2i;\n      let nr = -4 - lr + er * pr - ei * pi, ni = -li + er * pi + ei * pr;\n      a1 += (nr * l3r + ni * l3i) / d3;\n      b1 += (ni * l3r - nr * l3i) / d3;\n      pr = lr - 2;\n      pi = li;\n      nr = 2 + lr + er * pr - ei * pi;\n      ni = li + er * pi + ei * pr;\n      a2 += (nr * l3r + ni * l3i) / d3;\n      b2 += (ni * l3r - nr * l3i) / d3;\n      pr = 4 - lr;\n      pi = -li;\n      nr = -4 - 3 * lr - l2r + er * pr - ei * pi;\n      ni = -3 * li - l2i + er * pi + ei * pr;\n      a3 += (nr * l3r + ni * l3i) / d3;\n      b3 += (ni * l3r - nr * l3i) / d3;\n    }\n    const m = STEP / MC;\n    S.Qr[n] = qr * m;\n    S.Qi[n] = qi * m;\n    S.f1r[n] = a1 * m;\n    S.f1i[n] = b1 * m;\n    S.f2r[n] = a2 * m;\n    S.f2i[n] = b2 * m;\n    S.f3r[n] = a3 * m;\n    S.f3i[n] = b3 * m;\n  }\n}\n\n// N(v) = -(i k / 2) FFT(u^2), u the real part of the inverse FFT of v.\nfunction nonlinear(S, xr, xi, outr, outi) {\n  const { tr, ti, g } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = xr[n]), (ti[n] = xi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) {\n    const u = tr[j] / N;\n    tr[j] = u * u;\n    ti[j] = 0;\n  }\n  fft(tr, ti, -1);\n  for (let n = 0; n \u003c N; n++) {\n    outr[n] = -g[n] * ti[n];\n    outi[n] = g[n] * tr[n];\n  }\n}\n\nfunction step(S) {\n  const { vr, vi, ar, ai, br, bi, cr, ci, Nvr, Nvi, Nar, Nai, Nbr, Nbi, Ncr, Nci, E2r, E2i, Qr, Qi } = S;\n  nonlinear(S, vr, vi, Nvr, Nvi);\n  for (let n = 0; n \u003c N; n++) {\n    ar[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nvr[n] - Qi[n] * Nvi[n];\n    ai[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nvi[n] + Qi[n] * Nvr[n];\n  }\n  nonlinear(S, ar, ai, Nar, Nai);\n  for (let n = 0; n \u003c N; n++) {\n    br[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nar[n] - Qi[n] * Nai[n];\n    bi[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nai[n] + Qi[n] * Nar[n];\n  }\n  nonlinear(S, br, bi, Nbr, Nbi);\n  for (let n = 0; n \u003c N; n++) {\n    const xr = 2 * Nbr[n] - Nvr[n], xi = 2 * Nbi[n] - Nvi[n];\n    cr[n] = E2r[n] * ar[n] - E2i[n] * ai[n] + Qr[n] * xr - Qi[n] * xi;\n    ci[n] = E2r[n] * ai[n] + E2i[n] * ar[n] + Qr[n] * xi + Qi[n] * xr;\n  }\n  nonlinear(S, cr, ci, Ncr, Nci);\n  const { Er, Ei, f1r, f1i, f2r, f2i, f3r, f3i } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const sr = Nar[n] + Nbr[n], si = Nai[n] + Nbi[n];\n    const nr =\n      Er[n] * vr[n] - Ei[n] * vi[n] +\n      (Nvr[n] * f1r[n] - Nvi[n] * f1i[n]) + 2 * (sr * f2r[n] - si * f2i[n]) + (Ncr[n] * f3r[n] - Nci[n] * f3i[n]);\n    const ni =\n      Er[n] * vi[n] + Ei[n] * vr[n] +\n      (Nvr[n] * f1i[n] + Nvi[n] * f1r[n]) + 2 * (sr * f2i[n] + si * f2r[n]) + (Ncr[n] * f3i[n] + Nci[n] * f3r[n]);\n    vr[n] = nr;\n    vi[n] = ni;\n  }\n  // u is real, so v_(64-n) is the conjugate of v_n. Round-off breaks that,\n  // and the broken part is invisible to u^2, so nothing holds it down: it\n  // grew at the linear rate of modes 2 and 3, 0.19 a time unit at L = 22,\n  // and blew the run up at t = 340. Folding it back each step keeps it at 0.\n  for (let n = 1; n \u003c N / 2; n++) {\n    const a = 0.5 * (vr[n] + vr[N - n]), b = 0.5 * (vi[n] - vi[N - n]);\n    vr[n] = vr[N - n] = a;\n    vi[n] = b;\n    vi[N - n] = -b;\n  }\n  vr[0] = vi[0] = vi[N / 2] = 0;\n}\n\n// u on the 64 grid points, one per column.\nfunction physical(S, out) {\n  const { tr, ti } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = S.vr[n]), (ti[n] = S.vi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) out[j] = tr[j] / N;\n}\n\nfunction advanceRow(S) {\n  for (let s = 0, n = round(ROW / STEP); s \u003c n; s++) step(S);\n}\n\n// The row just computed goes in at the head; `next` is one row ahead of it,\n// so the top of the panel can slide between the two.\nfunction pushRow(S) {\n  S.head = (S.head + H - 1) % H;\n  S.hist.set(S.next, S.head * N);\n  advanceRow(S);\n  physical(S, S.next);\n}\n\n// u is the slope of Sivashinsky's flame front, so a dent pushed into the\n// front shows in u as a dipole, up on one side and down on the other: the\n// derivative of a Gaussian, 4 columns wide, peaks of +-amp. It has no mean.\n// A plain bump had one, and taking it off shifted the whole row by 0.78,\n// a hard line straight across the diagram.\nfunction kick(S, x0, amp) {\n  const u = S.u;\n  physical(S, u);\n  for (let j = 0; j \u003c N; j++) {\n    let d = j - x0;\n    if (d > N / 2) d -= N;\n    if (d \u003c -N / 2) d += N;\n    const q = d / 4;\n    S.tr[j] = u[j] + amp * 1.6487 * q * exp(-0.5 * q * q);\n    S.ti[j] = 0;\n  }\n  fft(S.tr, S.ti, -1);\n  for (let n = 0; n \u003c N; n++) (S.vr[n] = S.tr[n]), (S.vi[n] = S.ti[n]);\n  S.vr[0] = S.vi[0] = 0;\n}\n\nfunction start(S) {\n  // Low modes with random phases, then PRERUN time units so the first\n  // frame is already chaos, then a full panel of history.\n  for (let n = 0; n \u003c N; n++) S.vr[n] = S.vi[n] = 0;\n  for (let n = 1; n \u003c= 6; n++) {\n    const ph = random() * TAU, a = (0.3 * N) / n;\n    S.vr[n] = a * cos(ph);\n    S.vi[n] = a * sin(ph);\n    S.vr[N - n] = a * cos(ph);\n    S.vi[N - n] = -a * sin(ph);\n  }\n  for (let s = 0, n = round(PRERUN / STEP); s \u003c n; s++) step(S);\n  physical(S, S.next);\n  for (let r = 0; r \u003c H; r++) pushRow(S);\n  S.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 22, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const L = cl(k[2], 22, 66), delta = cl(k[3], -1, 1);\n  if (L !== S.L || delta !== S.delta) {\n    S.L = L;\n    S.delta = delta;\n    coefficients(S);\n  }\n  if (!S.ready) start(S);\n  if (input.btnPressed && input.btnPressed[0]) kick(S, random() * N, 4);\n  S.acc += d * S.speed * RATE;\n  // 30 rows a second at 30 frames lands on 0.9999...; a hair of slack\n  // keeps it one row a frame instead of none and then two.\n  while (S.acc >= 1 - 1e-6) {\n    S.acc = Math.max(0, S.acc - 1);\n    pushRow(S);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  const lut = S.lut;\n  if (S.lutHue !== S.hue) {\n    // Two ramps of 257 steps, positive u then negative: black at zero,\n    // rising straight to full colour at |u| = 2.64, then paling to a tint at\n    // 3.3. A straight ramp keeps the steps between neighbours soft; the\n    // first, steeper ramp put a hard step on 23 percent of them.\n    for (let side = 0; side \u003c 2; side++) {\n      const h = S.hue + (side === 0 ? 0.5 : 0.86);\n      for (let i = 0; i \u003c= 256; i++) {\n        const a = i / 256, f = cl(a / 0.8, 0, 1), w = cl((a - 0.8) / 0.2, 0, 1);\n        hsv(h + 0.05 * (f - 1), 1 - 0.55 * w, f, lut, (side * 257 + i) * 3);\n      }\n    }\n    S.lutHue = S.hue;\n  }\n  // Pulses grow with the dispersion, |u| up to 3.5 at delta 0 and 4.7 at\n  // delta 1, so the map stretches with it and the pulses do not wash out pale.\n  const { hist, next, head, acc } = S, inv = 256 / (3.3 * (1 + 0.4 * abs(S.delta)));\n  for (let y = 0; y \u003c H; y++) {\n    // Display row y is `acc` of the way from history row y - 1 to row y,\n    // where row -1 is the one computed ahead.\n    const a = y - acc, r0 = floor(a), t = a - r0;\n    const A = r0 \u003c 0 ? next : null, o0 = ((head + r0 + H) % H) * N, o1 = ((head + r0 + 1) % H) * N;\n    for (let x = 0; x \u003c W; x++) {\n      const u0 = A ? A[x] : hist[o0 + x], u1 = r0 + 1 \u003c H ? hist[o1 + x] : u0;\n      const u = u0 + (u1 - u0) * t, i = Math.min(256, round(abs(u) * inv)), o = ((u \u003c 0 ? 257 : 0) + i) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal."},{"name":"Speed","min":0.2,"max":3,"about":"Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s."},{"name":"Length","min":22,"max":66,"about":"The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge."},{"name":"Dispersion","min":-1,"max":1,"about":"A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative."}],"start":[0,2,22,0.06],"measures":{"motion":2.1967,"detail":0.0813,"edges":0.1461,"complexity":1.9024,"coverage":0.8129,"colour":0.4992,"drift":0.2147},"knobResponse":[0.3397,0.3051,0.3397,0.3324]},{"slug":"lakes-of-wada","title":"Lakes of Wada","family":"topology","round":34,"note":"섬 안의 두 호수와 바다가 차례로 1 LED 운하를 파요. 마른 땅이 파는 물에서 32, 16, 8, … LED 안에 들 때까지 차례마다 거리를 반으로 줄여 파고 서로 다른 물은 끝내 닿지 않아서, 다 판 섬은 하늘색 바다와 분홍, 연두 호수 사이에 가는 땅 벽만 남은 미로가 돼요. K3 은 호수를 다섯까지 늘리고, K1 을 누르면 섬이 잠기고 새 섬이 솟아요.","idea":"An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.","buttons":"K1 tap floods the island now and raises a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Lakes of Wada\n// Family:  topology\n// Idea:    An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Lakes of Wada (Kunizō Yoneyama, 1917, after Takeo Wada), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1\n//\n// Knob 1: Hue. Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink.\n// Knob 2: Speed. At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds.\n// Knob 3: Lakes. How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters.\n// Knob 4: Wander. How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends.\n// Buttons: K1 tap floods the island now and raises a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst LAND = -1, BIG = 30000;\n// Canal heads digging at once for the water whose turn it is.\nconst TIPS = 3;\n// The first turn's distance; every later turn halves it, down to 1.\nconst D0 = 32;\n// LEDs dug a second for each unit of Speed.\nconst RATE = 110;\n// Distance searches a frame may run, so a late turn full of short canals\n// spreads over frames instead of stalling one.\nconst SEARCHES = 14;\n// LEDs a turn digs before it starts no new canal, a third of it once the\n// distance is 4 or less, so the water whose turn comes at a fine distance\n// cannot take the whole island.\nconst TURN_CAP = 160;\n// Hue of the sea at Hue 0; the lakes follow round the wheel.\nconst H0 = 0.56;\n// Seconds of digging before the first frame, and the waters' saturation.\n// Six seconds at a RATE of 80 and full colour put the study's colour at 0.723\n// and its motion at 0.017, both past the ends of their map axes, which\n// emptied six cells of the map.\nconst PRE = 3, SAT = 0.88;\nconst NB = [1, -1, W, -W], ANG = [0, PI, PI / 2, -PI / 2];\nconst wrap = (a) => a - 2 * PI * floor((a + PI) / (2 * PI));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, wander: 0.06, warm: false, clock: 0, acc: 0,\n    phase: \"dig\", pt: 0, stage: 0, turnDug: 0, roundDug: 0, roundTurns: 0, stageSteps: 0, searches: 0, rr: 0,\n    wat: new Int8Array(N), born: new Float32Array(N), give: new Uint8Array(N),\n    D: new Int16Array(N), C: new Int16Array(N), cw: -1, clr: 2, F: new Float32Array(N), FD: new Int16Array(N), fdMax: 1, fMax: 1,\n    Q: new Int32Array(N), tips: [], c: [0, 0, 0], next: null,\n  };\n  for (let k = 0; k \u003c TIPS; k++) params.s.tips.push({ on: false, sleep: false, pos: 0, tgt: 0, T: new Int16Array(N), steps: 0, cap: 0, h: 0 });\n}\n\n// ---------- the island ----------\n\n// A smooth random field on a coarse lattice, eased between lattice points.\nfunction field(gx, gy) {\n  const g = new Float32Array((gx + 1) * (gy + 1));\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / (W - 1)) * gx, v = (y / (H - 1)) * gy;\n      const i = min(gx - 1, floor(u)), j = min(gy - 1, floor(v));\n      const fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * (gx + 1) + i], b = g[j * (gx + 1) + i + 1], c = g[(j + 1) * (gx + 1) + i], d = g[(j + 1) * (gx + 1) + i + 1];\n      out[y * W + x] = (a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv;\n    }\n  return out;\n}\n\n// A new island with n - 1 lakes: water 0 is the sea, 1..n-1 the lakes.\n// Every water is kept at least two LEDs from every other, so no two touch\n// even at a corner.\nfunction makeIsland(n) {\n  const wat = new Int8Array(N), f = new Float32Array(N), Q = new Int32Array(N);\n  const a = field(5, 9), b = field(11, 21);\n  const rx = 29.5 + random() * 2, ry = 59 + random() * 3, cx = 31.5 + (random() - 0.5) * 3, cy = 63.5 + (random() - 0.5) * 6;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = (x - cx) / rx, dy = (y - cy) / ry;\n      // The coast bends away from the panel's rim instead of running along it.\n      const rim = min(x, W - 1 - x, y, H - 1 - y);\n      f[p] = 0.6 * (1 - dx * dx - dy * dy) + 0.32 * a[p] + 0.12 * b[p] - 0.5 * (1 - sm(1.5, 6, rim));\n      const edge = rim \u003c 2;\n      wat[p] = f[p] > 0 && !edge ? LAND : 0;\n    }\n  // Keep the largest piece of land, and fill any pond the field left in it.\n  const lab = new Int32Array(N).fill(-1);\n  let best = -1, bestSize = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (wat[s] !== LAND || lab[s] >= 0) continue;\n    let qh = 0, qt = 0;\n    Q[qt++] = s;\n    lab[s] = s;\n    while (qh \u003c qt) {\n      const p = Q[qh++], x = p % W;\n      for (let k = 0; k \u003c 4; k++) {\n        const q = p + NB[k];\n        if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n        if (wat[q] === LAND && lab[q] \u003c 0) (lab[q] = s), (Q[qt++] = q);\n      }\n    }\n    if (qt > bestSize) (bestSize = qt), (best = s);\n  }\n  for (let p = 0; p \u003c N; p++) if (wat[p] === LAND && lab[p] !== best) wat[p] = 0;\n  const sea = new Uint8Array(N);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0;\n    if ((x === 0 || y === 0 || x === W - 1 || y === H - 1) && wat[p] !== LAND) (sea[p] = 1), (Q[qt++] = p);\n  }\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (!sea[q] && wat[q] !== LAND) (sea[q] = 1), (Q[qt++] = q);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) if (!sea[p]) wat[p] = LAND;\n  // Distance from the coast, through the land.\n  const cd = new Int16Array(N).fill(BIG);\n  qh = qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (cd[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && cd[q] === BIG) (cd[q] = cd[p] + 1), (Q[qt++] = q);\n    }\n  }\n  // The lakes, spread over the island: each the best of 60 tries, as far as\n  // it can be from the lakes already placed.\n  const lakes = [];\n  for (let w = 1; w \u003c n; w++) {\n    const r = 4 + random() * 2;\n    let bx = -1, by = -1, bs = -1;\n    for (let k = 0; k \u003c 60; k++) {\n      const p = floor(random() * N);\n      if (wat[p] !== LAND || cd[p] \u003c r + 9) continue;\n      const x = p % W, y = (p / W) | 0;\n      let s = 200 + random();\n      for (const l of lakes) s = min(s, sqrt((x - l.x) ** 2 + (y - l.y) ** 2) - l.r - r);\n      if (s > bs) (bs = s), (bx = x), (by = y);\n    }\n    if (bx \u003c 0) continue;\n    lakes.push({ x: bx, y: by, r });\n    const ph = random() * 6.28;\n    for (let y = max(2, floor(by - r - 2)); y \u003c= min(H - 3, by + r + 2); y++)\n      for (let x = max(2, floor(bx - r - 2)); x \u003c= min(W - 3, bx + r + 2); x++) {\n        const p = y * W + x, dx = x - bx, dy = y - by;\n        if (wat[p] !== LAND || cd[p] \u003c 3) continue;\n        const th = atan2(dy, dx);\n        if (sqrt(dx * dx + dy * dy) > r * (1 + 0.12 * sin(2 * th + ph) + 0.1 * sin(3 * th + 2 * ph))) continue;\n        let ok = true;\n        for (let v = -2; v \u003c= 2 && ok; v++) for (let u = -2; u \u003c= 2; u++) if (wat[p + v * W + u] > 0 && wat[p + v * W + u] !== w) ok = false;\n        if (ok) wat[p] = w;\n      }\n  }\n  let fMax = 0;\n  for (let p = 0; p \u003c N; p++) fMax = max(fMax, f[p]);\n  return { wat, f, fMax };\n}\n\nfunction begin(S, isl) {\n  S.wat.set(isl.wat);\n  S.F.set(isl.f);\n  S.fMax = isl.fMax;\n  S.born.fill(-99);\n  S.give.fill(0);\n  S.stage = 0;\n  S.cw = -1;\n  S.turnDug = 0;\n  S.roundDug = 0;\n  S.roundTurns = 0;\n  S.stageSteps = 0;\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n}\n\n// ---------- digging ----------\n\nconst turnWater = (S) => (S.stage + 1) % S.n;\nconst turnDist = (S) => max(1, floor(D0 / 2 ** S.stage));\n// How far a canal keeps from the other waters: a quarter of the turn's\n// distance, and never closer than one LED of land between. A long early\n// canal that ran up to another water's shore would close the way past it.\nconst turnClear = (S) => max(2, floor(turnDist(S) / 4));\n\n// Chebyshev distance from every cell to the nearest water other than w,\n// into S.C. The others hold still during w's turn, so once a turn is enough.\nfunction clearance(S, w) {\n  const { wat, C, Q } = S;\n  C.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] !== LAND && wat[p] !== w) (C[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W, y = (p / W) | 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        const u = x + dx, v = y + dy;\n        if (u \u003c 0 || u >= W || v \u003c 0 || v >= H) continue;\n        const q = v * W + u;\n        if (C[q] === BIG) (C[q] = C[p] + 1), (Q[qt++] = q);\n      }\n  }\n  S.cw = w;\n}\n\n// Land a canal of w may take at all: inside the panel's rim and clear of\n// the other waters.\nconst free = (S, c) => S.wat[c] === LAND && S.C[c] >= S.clr && c % W > 0 && c % W \u003c W - 1 && c >= W && c \u003c N - W;\n\n// May water w dig land cell c, coming from its own cell t? Of c's eight\n// neighbours only t and the two cells beside t may be water, so a canal\n// never runs alongside itself or another canal of its own water.\nfunction canDig(S, c, t, w) {\n  if (!free(S, c)) return false;\n  const wat = S.wat, cx = c % W, cy = (c / W) | 0, ex = (t % W) - cx, ey = ((t / W) | 0) - cy;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      if ((!dx && !dy) || wat[c + dy * W + dx] === LAND) continue;\n      // t itself, or a cell beside t across the canal's line.\n      if ((ex !== 0 && dx === ex) || (ey !== 0 && dy === ey)) continue;\n      return false;\n    }\n  return true;\n}\n\n// Land with no water at all among its eight neighbours: a canal can pass.\nfunction open(S, c) {\n  if (!free(S, c)) return false;\n  const wat = S.wat;\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) if (wat[c + dy * W + dx] !== LAND) return false;\n  return true;\n}\n\n// Distance through the land from water w (and from the targets the other\n// heads are already digging toward), into S.D.\nfunction distances(S, w, mine) {\n  const { wat, D, Q } = S;\n  D.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === w) (D[p] = 0), (Q[qt++] = p);\n  for (const t of S.tips) if (t !== mine && t.on && D[t.tgt] === BIG) (D[t.tgt] = 0), (Q[qt++] = t.tgt);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && D[q] === BIG) (D[q] = D[p] + 1), (Q[qt++] = q);\n    }\n  }\n}\n\nfunction dig(S, c, w) {\n  S.wat[c] = w;\n  S.born[c] = S.clock;\n  S.turnDug++;\n}\n\nfunction finish(S, tip) {\n  tip.on = false;\n  S.give[tip.tgt] = 1;\n  for (const t of S.tips) t.sleep = false;\n}\n\n// A new canal for this head: the land farthest from the water whose turn it\n// is, and the nearest place on that water's shore to set out from.\n// Returns 1 if it dug, 0 if this turn has nothing left for it, -1 to retry.\nfunction startCanal(S, tip) {\n  const w = turnWater(S), d = turnDist(S), { D, give, Q } = S;\n  S.searches++;\n  if (S.cw !== w) clearance(S, w);\n  S.clr = turnClear(S);\n  distances(S, w, tip);\n  let m = d + 1, cnt = 0, X = -1;\n  for (let p = 0; p \u003c N; p++) {\n    const v = D[p];\n    if (v \u003c m || v === BIG || give[p] || !free(S, p)) continue;\n    if (v > m) (m = v), (cnt = 0);\n    if (random() * ++cnt \u003c 1) X = p;\n  }\n  if (X \u003c 0) return 0;\n  // Distance to X through land a canal can cross; the first cells reached\n  // that w can dig from its shore are where the canal may start.\n  const T = tip.T;\n  T.fill(BIG);\n  let qh = 0, qt = 0, start = -1, from = -1, tmin = BIG, seen = 0;\n  T[X] = 0;\n  Q[qt++] = X;\n  const tryStart = (c) => {\n    for (let k = 0; k \u003c 4; k++) {\n      const t = c + NB[k];\n      if (S.wat[t] === w && canDig(S, c, t, w) && random() * ++seen \u003c 1) (start = c), (from = t), (tmin = T[c]);\n    }\n  };\n  tryStart(X);\n  while (qh \u003c qt && T[Q[qh]] \u003c= tmin) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG) continue;\n      if (open(S, q)) {\n        T[q] = T[p] + 1;\n        Q[qt++] = q;\n      } else if (S.wat[q] === LAND) {\n        T[q] = T[p] + 1;\n        if (T[q] \u003c= tmin) tryStart(q);\n      }\n    }\n  }\n  if (start \u003c 0) {\n    // No way in from w's shore: none of this land counts for the turn.\n    for (let i = 0; i \u003c qt; i++) give[Q[i]] = 1;\n    give[X] = 1;\n    return -1;\n  }\n  // Finish the map past the start, so a wandering head still knows its way.\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG || !open(S, q)) continue;\n      T[q] = T[p] + 1;\n      Q[qt++] = q;\n    }\n  }\n  dig(S, start, w);\n  Object.assign(tip, { on: true, pos: start, tgt: X, steps: 1, cap: 2 * T[start] + 12 });\n  tip.h = atan2(((start / W) | 0) - ((from / W) | 0), (start % W) - (from % W));\n  if (T[start] === 0) finish(S, tip);\n  return 1;\n}\n\n// One LED more for an active head: toward X along the land map, with the\n// heading drifting as Wander allows.\nfunction extend(S, tip) {\n  const w = turnWater(S), t = tip.pos, T = tip.T, u = S.wander;\n  const beta = 3.2 - 2.4 * u, kap = 0.5 + 2.0 * u, noise = 0.12 + 1.1 * u;\n  let best = -1, bs = -1e9;\n  for (let k = 0; k \u003c 4; k++) {\n    const c = t + NB[k];\n    if (!canDig(S, c, t, w)) continue;\n    const dT = T[c] === BIG ? 3 : T[c] - T[t];\n    const s = -beta * dT + kap * cos(ANG[k] - tip.h) + noise * random();\n    if (s > bs) (bs = s), (best = k);\n  }\n  if (best \u003c 0) {\n    finish(S, tip);\n    return false;\n  }\n  const c = t + NB[best];\n  dig(S, c, w);\n  tip.pos = c;\n  tip.steps++;\n  const tx = tip.tgt % W, ty = (tip.tgt / W) | 0, cx = c % W, cy = (c / W) | 0;\n  tip.h += 0.25 * wrap(ANG[best] - tip.h) + 0.12 * (1 - u) * wrap(atan2(ty - cy, tx - cx) - tip.h) + (random() - 0.5) * 1.3 * u;\n  if (T[c] === 0 || tip.steps >= tip.cap) finish(S, tip);\n  return true;\n}\n\nfunction nextTurn(S) {\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n  S.give.fill(0);\n  S.cw = -1;\n  // A whole round of turns at distance 1 that found almost nothing to dig:\n  // the labyrinth is finished.\n  if (turnDist(S) === 1) {\n    S.roundDug += S.turnDug;\n    if (++S.roundTurns >= S.n) {\n      if (S.roundDug \u003c 4) {\n        S.phase = \"hold\";\n        S.pt = 0;\n      }\n      S.roundDug = 0;\n      S.roundTurns = 0;\n    }\n  }\n  S.stage++;\n  S.turnDug = 0;\n  S.stageSteps = 0;\n}\n\n// One step of digging: one LED for one head, round robin. Once the turn has\n// dug its share no new canal starts, but the heads finish the ones they are\n// on, so a long canal into the far land is not left half dug.\nfunction step(S, limited) {\n  if (++S.stageSteps > 1400) {\n    nextTurn(S);\n    return;\n  }\n  const full = S.turnDug >= (turnDist(S) > 4 ? TURN_CAP : TURN_CAP / 3);\n  for (let tries = 0; tries \u003c TIPS * 2; tries++) {\n    const tip = S.tips[(S.rr = (S.rr + 1) % TIPS)];\n    if (tip.on) {\n      if (extend(S, tip)) return;\n      continue;\n    }\n    if (tip.sleep || full) continue;\n    if (limited && S.searches >= SEARCHES) return;\n    const r = startCanal(S, tip);\n    if (r === 1) return;\n    if (r === 0) tip.sleep = true;\n  }\n  if (S.tips.every((t) => !t.on && (t.sleep || full))) nextTurn(S);\n}\n\n// ---------- flood ----------\n\n// Distance from the sea through everything else, for the flood front.\nfunction floodMap(S) {\n  const { wat, FD, Q } = S;\n  FD.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (FD[p] = 0), (Q[qt++] = p);\n  let m = 1;\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N || FD[q] !== BIG) continue;\n      FD[q] = FD[p] + 1;\n      m = max(m, FD[q]);\n      Q[qt++] = q;\n    }\n  }\n  S.fdMax = m;\n}\n\nfunction startFlood(S) {\n  floodMap(S);\n  for (const t of S.tips) t.on = false;\n  S.phase = \"flood\";\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wander = cl(k[3], 0, 1);\n  const n = round(cl(k[2], 3, 5));\n  if (!S.warm) {\n    S.n = n;\n    begin(S, makeIsland(n));\n    // Open on an island the waters have been digging for PRE seconds at\n    // this Speed.\n    const pre = round(PRE * S.speed * RATE);\n    for (let i = 0; i \u003c pre; i++) step(S, false);\n    S.clock = 10;\n    S.warm = true;\n  } else if (n !== S.n && S.phase !== \"flood\" && S.phase !== \"rise\") {\n    S.next = n;\n    startFlood(S);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== \"flood\" && S.phase !== \"rise\") startFlood(S);\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  S.pt += ds;\n  if (S.phase === \"dig\") {\n    S.acc += d * S.speed * RATE;\n    S.searches = 0;\n    let steps = 0;\n    while (S.acc >= 1 && steps \u003c 200 && S.phase === \"dig\") {\n      step(S, true);\n      S.acc -= 1;\n      steps++;\n      if (S.searches >= SEARCHES) {\n        S.acc = min(S.acc, 2);\n        break;\n      }\n    }\n  } else if (S.phase === \"hold\" && S.pt > 3) startFlood(S);\n  else if (S.phase === \"flood\" && S.pt > 1.2) {\n    if (S.next) (S.n = S.next), (S.next = null);\n    begin(S, makeIsland(S.n));\n    S.phase = \"rise\";\n    S.pt = 0;\n  } else if (S.phase === \"rise\" && S.pt > 1) {\n    S.phase = \"dig\";\n    S.pt = 0;\n    S.acc = 0;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { wat, born, c, n } = S;\n  const front = S.phase === \"flood\" ? S.fdMax * sm(0, 1.1, S.pt) : -1;\n  const level = S.phase === \"rise\" ? S.fMax * (1 - sm(0, 0.95, S.pt)) : -1;\n  const tipAt = new Set();\n  for (const t of S.tips) if (t.on) tipAt.add(t.pos);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let w = wat[p], glow = 0;\n      if (front >= 0 && S.FD[p] \u003c= front) {\n        w = 0;\n        if (S.FD[p] > 0) glow = 0.7 * sm(4, 0, front - S.FD[p]);\n      } else if (level >= 0 && S.F[p] \u003c= level) {\n        w = 0;\n        glow = 0.6 * sm(0.06, 0, level - S.F[p]) * (S.F[p] > 0 ? 1 : 0);\n      }\n      if (w === LAND) {\n        display.setPixel(x, y, 14, 12, 10);\n        continue;\n      }\n      if (front \u003c 0 && level \u003c 0) glow = tipAt.has(p) ? 1 : exp(-(S.clock - born[p]) / 0.22);\n      hsv(S.hue + H0 + w / n, SAT, 1, c);\n      const v = 255, s = 1 - 0.85 * glow;\n      display.setPixel(x, y, round(v * (c[0] * s + 1 - s)), round(v * (c[1] * s + 1 - s)), round(v * (c[2] * s + 1 - s)));\n    }\n}\n","layer":{"id":"layer-lakes-of-wada","type":"code","name":"lakes-of-wada","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lakes of Wada\n// Family:  topology\n// Idea:    An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Lakes of Wada (Kunizō Yoneyama, 1917, after Takeo Wada), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1\n//\n// Knob 1: Hue. Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink.\n// Knob 2: Speed. At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds.\n// Knob 3: Lakes. How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters.\n// Knob 4: Wander. How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends.\n// Buttons: K1 tap floods the island now and raises a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst LAND = -1, BIG = 30000;\n// Canal heads digging at once for the water whose turn it is.\nconst TIPS = 3;\n// The first turn's distance; every later turn halves it, down to 1.\nconst D0 = 32;\n// LEDs dug a second for each unit of Speed.\nconst RATE = 110;\n// Distance searches a frame may run, so a late turn full of short canals\n// spreads over frames instead of stalling one.\nconst SEARCHES = 14;\n// LEDs a turn digs before it starts no new canal, a third of it once the\n// distance is 4 or less, so the water whose turn comes at a fine distance\n// cannot take the whole island.\nconst TURN_CAP = 160;\n// Hue of the sea at Hue 0; the lakes follow round the wheel.\nconst H0 = 0.56;\n// Seconds of digging before the first frame, and the waters' saturation.\n// Six seconds at a RATE of 80 and full colour put the study's colour at 0.723\n// and its motion at 0.017, both past the ends of their map axes, which\n// emptied six cells of the map.\nconst PRE = 3, SAT = 0.88;\nconst NB = [1, -1, W, -W], ANG = [0, PI, PI / 2, -PI / 2];\nconst wrap = (a) => a - 2 * PI * floor((a + PI) / (2 * PI));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, wander: 0.06, warm: false, clock: 0, acc: 0,\n    phase: \"dig\", pt: 0, stage: 0, turnDug: 0, roundDug: 0, roundTurns: 0, stageSteps: 0, searches: 0, rr: 0,\n    wat: new Int8Array(N), born: new Float32Array(N), give: new Uint8Array(N),\n    D: new Int16Array(N), C: new Int16Array(N), cw: -1, clr: 2, F: new Float32Array(N), FD: new Int16Array(N), fdMax: 1, fMax: 1,\n    Q: new Int32Array(N), tips: [], c: [0, 0, 0], next: null,\n  };\n  for (let k = 0; k \u003c TIPS; k++) params.s.tips.push({ on: false, sleep: false, pos: 0, tgt: 0, T: new Int16Array(N), steps: 0, cap: 0, h: 0 });\n}\n\n// ---------- the island ----------\n\n// A smooth random field on a coarse lattice, eased between lattice points.\nfunction field(gx, gy) {\n  const g = new Float32Array((gx + 1) * (gy + 1));\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / (W - 1)) * gx, v = (y / (H - 1)) * gy;\n      const i = min(gx - 1, floor(u)), j = min(gy - 1, floor(v));\n      const fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * (gx + 1) + i], b = g[j * (gx + 1) + i + 1], c = g[(j + 1) * (gx + 1) + i], d = g[(j + 1) * (gx + 1) + i + 1];\n      out[y * W + x] = (a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv;\n    }\n  return out;\n}\n\n// A new island with n - 1 lakes: water 0 is the sea, 1..n-1 the lakes.\n// Every water is kept at least two LEDs from every other, so no two touch\n// even at a corner.\nfunction makeIsland(n) {\n  const wat = new Int8Array(N), f = new Float32Array(N), Q = new Int32Array(N);\n  const a = field(5, 9), b = field(11, 21);\n  const rx = 29.5 + random() * 2, ry = 59 + random() * 3, cx = 31.5 + (random() - 0.5) * 3, cy = 63.5 + (random() - 0.5) * 6;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = (x - cx) / rx, dy = (y - cy) / ry;\n      // The coast bends away from the panel's rim instead of running along it.\n      const rim = min(x, W - 1 - x, y, H - 1 - y);\n      f[p] = 0.6 * (1 - dx * dx - dy * dy) + 0.32 * a[p] + 0.12 * b[p] - 0.5 * (1 - sm(1.5, 6, rim));\n      const edge = rim \u003c 2;\n      wat[p] = f[p] > 0 && !edge ? LAND : 0;\n    }\n  // Keep the largest piece of land, and fill any pond the field left in it.\n  const lab = new Int32Array(N).fill(-1);\n  let best = -1, bestSize = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (wat[s] !== LAND || lab[s] >= 0) continue;\n    let qh = 0, qt = 0;\n    Q[qt++] = s;\n    lab[s] = s;\n    while (qh \u003c qt) {\n      const p = Q[qh++], x = p % W;\n      for (let k = 0; k \u003c 4; k++) {\n        const q = p + NB[k];\n        if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n        if (wat[q] === LAND && lab[q] \u003c 0) (lab[q] = s), (Q[qt++] = q);\n      }\n    }\n    if (qt > bestSize) (bestSize = qt), (best = s);\n  }\n  for (let p = 0; p \u003c N; p++) if (wat[p] === LAND && lab[p] !== best) wat[p] = 0;\n  const sea = new Uint8Array(N);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0;\n    if ((x === 0 || y === 0 || x === W - 1 || y === H - 1) && wat[p] !== LAND) (sea[p] = 1), (Q[qt++] = p);\n  }\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (!sea[q] && wat[q] !== LAND) (sea[q] = 1), (Q[qt++] = q);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) if (!sea[p]) wat[p] = LAND;\n  // Distance from the coast, through the land.\n  const cd = new Int16Array(N).fill(BIG);\n  qh = qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (cd[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && cd[q] === BIG) (cd[q] = cd[p] + 1), (Q[qt++] = q);\n    }\n  }\n  // The lakes, spread over the island: each the best of 60 tries, as far as\n  // it can be from the lakes already placed.\n  const lakes = [];\n  for (let w = 1; w \u003c n; w++) {\n    const r = 4 + random() * 2;\n    let bx = -1, by = -1, bs = -1;\n    for (let k = 0; k \u003c 60; k++) {\n      const p = floor(random() * N);\n      if (wat[p] !== LAND || cd[p] \u003c r + 9) continue;\n      const x = p % W, y = (p / W) | 0;\n      let s = 200 + random();\n      for (const l of lakes) s = min(s, sqrt((x - l.x) ** 2 + (y - l.y) ** 2) - l.r - r);\n      if (s > bs) (bs = s), (bx = x), (by = y);\n    }\n    if (bx \u003c 0) continue;\n    lakes.push({ x: bx, y: by, r });\n    const ph = random() * 6.28;\n    for (let y = max(2, floor(by - r - 2)); y \u003c= min(H - 3, by + r + 2); y++)\n      for (let x = max(2, floor(bx - r - 2)); x \u003c= min(W - 3, bx + r + 2); x++) {\n        const p = y * W + x, dx = x - bx, dy = y - by;\n        if (wat[p] !== LAND || cd[p] \u003c 3) continue;\n        const th = atan2(dy, dx);\n        if (sqrt(dx * dx + dy * dy) > r * (1 + 0.12 * sin(2 * th + ph) + 0.1 * sin(3 * th + 2 * ph))) continue;\n        let ok = true;\n        for (let v = -2; v \u003c= 2 && ok; v++) for (let u = -2; u \u003c= 2; u++) if (wat[p + v * W + u] > 0 && wat[p + v * W + u] !== w) ok = false;\n        if (ok) wat[p] = w;\n      }\n  }\n  let fMax = 0;\n  for (let p = 0; p \u003c N; p++) fMax = max(fMax, f[p]);\n  return { wat, f, fMax };\n}\n\nfunction begin(S, isl) {\n  S.wat.set(isl.wat);\n  S.F.set(isl.f);\n  S.fMax = isl.fMax;\n  S.born.fill(-99);\n  S.give.fill(0);\n  S.stage = 0;\n  S.cw = -1;\n  S.turnDug = 0;\n  S.roundDug = 0;\n  S.roundTurns = 0;\n  S.stageSteps = 0;\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n}\n\n// ---------- digging ----------\n\nconst turnWater = (S) => (S.stage + 1) % S.n;\nconst turnDist = (S) => max(1, floor(D0 / 2 ** S.stage));\n// How far a canal keeps from the other waters: a quarter of the turn's\n// distance, and never closer than one LED of land between. A long early\n// canal that ran up to another water's shore would close the way past it.\nconst turnClear = (S) => max(2, floor(turnDist(S) / 4));\n\n// Chebyshev distance from every cell to the nearest water other than w,\n// into S.C. The others hold still during w's turn, so once a turn is enough.\nfunction clearance(S, w) {\n  const { wat, C, Q } = S;\n  C.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] !== LAND && wat[p] !== w) (C[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W, y = (p / W) | 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        const u = x + dx, v = y + dy;\n        if (u \u003c 0 || u >= W || v \u003c 0 || v >= H) continue;\n        const q = v * W + u;\n        if (C[q] === BIG) (C[q] = C[p] + 1), (Q[qt++] = q);\n      }\n  }\n  S.cw = w;\n}\n\n// Land a canal of w may take at all: inside the panel's rim and clear of\n// the other waters.\nconst free = (S, c) => S.wat[c] === LAND && S.C[c] >= S.clr && c % W > 0 && c % W \u003c W - 1 && c >= W && c \u003c N - W;\n\n// May water w dig land cell c, coming from its own cell t? Of c's eight\n// neighbours only t and the two cells beside t may be water, so a canal\n// never runs alongside itself or another canal of its own water.\nfunction canDig(S, c, t, w) {\n  if (!free(S, c)) return false;\n  const wat = S.wat, cx = c % W, cy = (c / W) | 0, ex = (t % W) - cx, ey = ((t / W) | 0) - cy;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      if ((!dx && !dy) || wat[c + dy * W + dx] === LAND) continue;\n      // t itself, or a cell beside t across the canal's line.\n      if ((ex !== 0 && dx === ex) || (ey !== 0 && dy === ey)) continue;\n      return false;\n    }\n  return true;\n}\n\n// Land with no water at all among its eight neighbours: a canal can pass.\nfunction open(S, c) {\n  if (!free(S, c)) return false;\n  const wat = S.wat;\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) if (wat[c + dy * W + dx] !== LAND) return false;\n  return true;\n}\n\n// Distance through the land from water w (and from the targets the other\n// heads are already digging toward), into S.D.\nfunction distances(S, w, mine) {\n  const { wat, D, Q } = S;\n  D.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === w) (D[p] = 0), (Q[qt++] = p);\n  for (const t of S.tips) if (t !== mine && t.on && D[t.tgt] === BIG) (D[t.tgt] = 0), (Q[qt++] = t.tgt);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && D[q] === BIG) (D[q] = D[p] + 1), (Q[qt++] = q);\n    }\n  }\n}\n\nfunction dig(S, c, w) {\n  S.wat[c] = w;\n  S.born[c] = S.clock;\n  S.turnDug++;\n}\n\nfunction finish(S, tip) {\n  tip.on = false;\n  S.give[tip.tgt] = 1;\n  for (const t of S.tips) t.sleep = false;\n}\n\n// A new canal for this head: the land farthest from the water whose turn it\n// is, and the nearest place on that water's shore to set out from.\n// Returns 1 if it dug, 0 if this turn has nothing left for it, -1 to retry.\nfunction startCanal(S, tip) {\n  const w = turnWater(S), d = turnDist(S), { D, give, Q } = S;\n  S.searches++;\n  if (S.cw !== w) clearance(S, w);\n  S.clr = turnClear(S);\n  distances(S, w, tip);\n  let m = d + 1, cnt = 0, X = -1;\n  for (let p = 0; p \u003c N; p++) {\n    const v = D[p];\n    if (v \u003c m || v === BIG || give[p] || !free(S, p)) continue;\n    if (v > m) (m = v), (cnt = 0);\n    if (random() * ++cnt \u003c 1) X = p;\n  }\n  if (X \u003c 0) return 0;\n  // Distance to X through land a canal can cross; the first cells reached\n  // that w can dig from its shore are where the canal may start.\n  const T = tip.T;\n  T.fill(BIG);\n  let qh = 0, qt = 0, start = -1, from = -1, tmin = BIG, seen = 0;\n  T[X] = 0;\n  Q[qt++] = X;\n  const tryStart = (c) => {\n    for (let k = 0; k \u003c 4; k++) {\n      const t = c + NB[k];\n      if (S.wat[t] === w && canDig(S, c, t, w) && random() * ++seen \u003c 1) (start = c), (from = t), (tmin = T[c]);\n    }\n  };\n  tryStart(X);\n  while (qh \u003c qt && T[Q[qh]] \u003c= tmin) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG) continue;\n      if (open(S, q)) {\n        T[q] = T[p] + 1;\n        Q[qt++] = q;\n      } else if (S.wat[q] === LAND) {\n        T[q] = T[p] + 1;\n        if (T[q] \u003c= tmin) tryStart(q);\n      }\n    }\n  }\n  if (start \u003c 0) {\n    // No way in from w's shore: none of this land counts for the turn.\n    for (let i = 0; i \u003c qt; i++) give[Q[i]] = 1;\n    give[X] = 1;\n    return -1;\n  }\n  // Finish the map past the start, so a wandering head still knows its way.\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG || !open(S, q)) continue;\n      T[q] = T[p] + 1;\n      Q[qt++] = q;\n    }\n  }\n  dig(S, start, w);\n  Object.assign(tip, { on: true, pos: start, tgt: X, steps: 1, cap: 2 * T[start] + 12 });\n  tip.h = atan2(((start / W) | 0) - ((from / W) | 0), (start % W) - (from % W));\n  if (T[start] === 0) finish(S, tip);\n  return 1;\n}\n\n// One LED more for an active head: toward X along the land map, with the\n// heading drifting as Wander allows.\nfunction extend(S, tip) {\n  const w = turnWater(S), t = tip.pos, T = tip.T, u = S.wander;\n  const beta = 3.2 - 2.4 * u, kap = 0.5 + 2.0 * u, noise = 0.12 + 1.1 * u;\n  let best = -1, bs = -1e9;\n  for (let k = 0; k \u003c 4; k++) {\n    const c = t + NB[k];\n    if (!canDig(S, c, t, w)) continue;\n    const dT = T[c] === BIG ? 3 : T[c] - T[t];\n    const s = -beta * dT + kap * cos(ANG[k] - tip.h) + noise * random();\n    if (s > bs) (bs = s), (best = k);\n  }\n  if (best \u003c 0) {\n    finish(S, tip);\n    return false;\n  }\n  const c = t + NB[best];\n  dig(S, c, w);\n  tip.pos = c;\n  tip.steps++;\n  const tx = tip.tgt % W, ty = (tip.tgt / W) | 0, cx = c % W, cy = (c / W) | 0;\n  tip.h += 0.25 * wrap(ANG[best] - tip.h) + 0.12 * (1 - u) * wrap(atan2(ty - cy, tx - cx) - tip.h) + (random() - 0.5) * 1.3 * u;\n  if (T[c] === 0 || tip.steps >= tip.cap) finish(S, tip);\n  return true;\n}\n\nfunction nextTurn(S) {\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n  S.give.fill(0);\n  S.cw = -1;\n  // A whole round of turns at distance 1 that found almost nothing to dig:\n  // the labyrinth is finished.\n  if (turnDist(S) === 1) {\n    S.roundDug += S.turnDug;\n    if (++S.roundTurns >= S.n) {\n      if (S.roundDug \u003c 4) {\n        S.phase = \"hold\";\n        S.pt = 0;\n      }\n      S.roundDug = 0;\n      S.roundTurns = 0;\n    }\n  }\n  S.stage++;\n  S.turnDug = 0;\n  S.stageSteps = 0;\n}\n\n// One step of digging: one LED for one head, round robin. Once the turn has\n// dug its share no new canal starts, but the heads finish the ones they are\n// on, so a long canal into the far land is not left half dug.\nfunction step(S, limited) {\n  if (++S.stageSteps > 1400) {\n    nextTurn(S);\n    return;\n  }\n  const full = S.turnDug >= (turnDist(S) > 4 ? TURN_CAP : TURN_CAP / 3);\n  for (let tries = 0; tries \u003c TIPS * 2; tries++) {\n    const tip = S.tips[(S.rr = (S.rr + 1) % TIPS)];\n    if (tip.on) {\n      if (extend(S, tip)) return;\n      continue;\n    }\n    if (tip.sleep || full) continue;\n    if (limited && S.searches >= SEARCHES) return;\n    const r = startCanal(S, tip);\n    if (r === 1) return;\n    if (r === 0) tip.sleep = true;\n  }\n  if (S.tips.every((t) => !t.on && (t.sleep || full))) nextTurn(S);\n}\n\n// ---------- flood ----------\n\n// Distance from the sea through everything else, for the flood front.\nfunction floodMap(S) {\n  const { wat, FD, Q } = S;\n  FD.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (FD[p] = 0), (Q[qt++] = p);\n  let m = 1;\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N || FD[q] !== BIG) continue;\n      FD[q] = FD[p] + 1;\n      m = max(m, FD[q]);\n      Q[qt++] = q;\n    }\n  }\n  S.fdMax = m;\n}\n\nfunction startFlood(S) {\n  floodMap(S);\n  for (const t of S.tips) t.on = false;\n  S.phase = \"flood\";\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wander = cl(k[3], 0, 1);\n  const n = round(cl(k[2], 3, 5));\n  if (!S.warm) {\n    S.n = n;\n    begin(S, makeIsland(n));\n    // Open on an island the waters have been digging for PRE seconds at\n    // this Speed.\n    const pre = round(PRE * S.speed * RATE);\n    for (let i = 0; i \u003c pre; i++) step(S, false);\n    S.clock = 10;\n    S.warm = true;\n  } else if (n !== S.n && S.phase !== \"flood\" && S.phase !== \"rise\") {\n    S.next = n;\n    startFlood(S);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== \"flood\" && S.phase !== \"rise\") startFlood(S);\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  S.pt += ds;\n  if (S.phase === \"dig\") {\n    S.acc += d * S.speed * RATE;\n    S.searches = 0;\n    let steps = 0;\n    while (S.acc >= 1 && steps \u003c 200 && S.phase === \"dig\") {\n      step(S, true);\n      S.acc -= 1;\n      steps++;\n      if (S.searches >= SEARCHES) {\n        S.acc = min(S.acc, 2);\n        break;\n      }\n    }\n  } else if (S.phase === \"hold\" && S.pt > 3) startFlood(S);\n  else if (S.phase === \"flood\" && S.pt > 1.2) {\n    if (S.next) (S.n = S.next), (S.next = null);\n    begin(S, makeIsland(S.n));\n    S.phase = \"rise\";\n    S.pt = 0;\n  } else if (S.phase === \"rise\" && S.pt > 1) {\n    S.phase = \"dig\";\n    S.pt = 0;\n    S.acc = 0;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { wat, born, c, n } = S;\n  const front = S.phase === \"flood\" ? S.fdMax * sm(0, 1.1, S.pt) : -1;\n  const level = S.phase === \"rise\" ? S.fMax * (1 - sm(0, 0.95, S.pt)) : -1;\n  const tipAt = new Set();\n  for (const t of S.tips) if (t.on) tipAt.add(t.pos);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let w = wat[p], glow = 0;\n      if (front >= 0 && S.FD[p] \u003c= front) {\n        w = 0;\n        if (S.FD[p] > 0) glow = 0.7 * sm(4, 0, front - S.FD[p]);\n      } else if (level >= 0 && S.F[p] \u003c= level) {\n        w = 0;\n        glow = 0.6 * sm(0.06, 0, level - S.F[p]) * (S.F[p] > 0 ? 1 : 0);\n      }\n      if (w === LAND) {\n        display.setPixel(x, y, 14, 12, 10);\n        continue;\n      }\n      if (front \u003c 0 && level \u003c 0) glow = tipAt.has(p) ? 1 : exp(-(S.clock - born[p]) / 0.22);\n      hsv(S.hue + H0 + w / n, SAT, 1, c);\n      const v = 255, s = 1 - 0.85 * glow;\n      display.setPixel(x, y, round(v * (c[0] * s + 1 - s)), round(v * (c[1] * s + 1 - s)), round(v * (c[2] * s + 1 - s)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds."},{"name":"Lakes","min":3,"max":5,"about":"How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters."},{"name":"Wander","min":0,"max":1,"about":"How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends."}],"start":[0,2,3,0.06],"measures":{"motion":0.0225,"detail":0.2272,"edges":1,"complexity":0.1697,"coverage":0.5713,"colour":0.6325,"drift":0.1351},"knobResponse":[0.4015,0.1136,0.142,0.1216]},{"slug":"lap-pool","title":"Lap Pool","family":"sport","round":21,"note":"야외 25 m 수영장을 바로 위에서 내려다본 그림이 128줄을 다 써요. 색 수모를 쓴 사람들이 레인마다 제 속도로 오가다 벽에서 플립 턴을 하고, 뒤로 퍼지는 V자 물결이 빨강·하양·파랑 레인 로프를 흔들어요. 타일 바닥에는 햇빛이 만든 물결 그물이 흘러요.","idea":"A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","layer":{"id":"layer-lap-pool","type":"code","name":"lap-pool","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stroke","min":0,"max":3,"about":"What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20."},{"name":"Swimmers","min":4,"max":15,"about":"Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15."},{"name":"Sun","min":-1,"max":1,"about":"Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes."}],"start":[0,2,4,0.06],"measures":{"motion":0.3073,"detail":0.1425,"edges":0.4977,"complexity":2.1556,"coverage":0.9906,"colour":0.3817,"drift":0.0257},"knobResponse":[0.044,0.0596,0.0629,0.1105]},{"slug":"lava-lake","title":"Lava Lake","family":"volcano","round":27,"note":"화구 가장자리에서 용암 호수를 곧장 내려다봐요. 검은 지각 판들이 노랗게 벌어진 확장 균열에서 떨어져 나와 변환 단층을 끼고 위아래로 흘러가다, 계단진 화구 벽 밑에서 밝은 이음매를 그으며 가라앉아요. K1 은 틈을 주황 용암 강으로 넓히고, 누르면 큰 가스 거품이 터져 용암을 튀겨요.","idea":"Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.","buttons":"K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.","code":"// ===== Patternflow pattern =====\n// Title:   Lava Lake\n// Family:  volcano\n// Idea:    Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the lava lakes of Erta Ale and Nyiragongo seen from the crater rim\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1\n//\n// Knob 1: Heat. At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter.\n// Knob 2: Speed. At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower.\n// Knob 3: Plates. At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three.\n// Knob 4: Spatter. How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder.\n// Buttons: K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.\n\nconst W = 64, H = 128, N = W * H;\n// Sparks at most; plates are 1 / AX wider than tall, stretched along the\n// crack; the crust drifts V LEDs per second at Speed 2.\nconst MAXP = 700, AX = 0.72, V = 1.6;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction h32(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return (h ^ (h >>> 16)) >>> 0;\n}\nconst hash = (i, j) => h32(i, j) / 4294967296;\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Smooth noise on a 128 x 128 torus, features about eight texels across.\nconst NZ = new Float32Array(128 * 128).map((_, k) => 0.65 * vn((k & 127) / 8, (k >> 7) / 8, 16) + 0.35 * vn((k & 127) / 4 + 3, (k >> 7) / 4, 32));\nfunction nz(u, v) {\n  const xi = floor(u), yi = floor(v), fx = u - xi, fy = v - yi, x0 = xi & 127, y0 = (yi & 127) \u003c\u003c 7, x1 = (x0 + 1) & 127, y1 = ((yi + 1) & 127) \u003c\u003c 7;\n  const a = NZ[y0 + x0], b = NZ[y0 + x1], c = NZ[y1 + x0];\n  return a + (b - a) * fx + (c - a) * fy + (a - b - c + NZ[y1 + x1]) * fx * fy;\n}\n// Lava by temperature: dull red, cherry, orange, yellow, the white of a fresh tear.\nconst STOPS = [[0, 30, 1, 0], [0.2, 104, 7, 0], [0.4, 184, 27, 2], [0.6, 238, 82, 7], [0.8, 250, 158, 36], [1, 254, 230, 148]];\nconst LUT = new Float32Array(257 * 3);\nfor (let q = 0; q \u003c= 256; q++) {\n  const T = q / 256;\n  let k = 0;\n  while (k \u003c 4 && T > STOPS[k + 1][0]) k++;\n  const [a, b] = [STOPS[k], STOPS[k + 1]], u = (T - a[0]) / (b[0] - a[0]);\n  for (let c = 0; c \u003c 3; c++) LUT[q * 3 + c] = mix(a[c + 1], b[c + 1], u);\n}\nconst lut = (T) => round(cl(T, 0, 1) * 256) * 3;\n// exp(-v) for v >= 0, read from a table.\nconst EX = new Float32Array(1025).map((_, k) => exp(-k / 64)), ex = (v) => (v \u003c 16 ? EX[(v * 64) | 0] : 0);\n// sin, read from a table.\nconst SN = new Float32Array(1024).map((_, k) => sin((k * PI) / 512)), fsin = (a) => SN[(a * 162.97) & 1023];\n\n// The shore of the lake under each column, and where the crater rim is.\nconst ST = new Float32Array(W), SB = new Float32Array(W), RT = new Float32Array(W), RB = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  ST[x] = 17.5 + 2.2 * sin(x * 0.11 + 1) + 1.4 * sin(x * 0.29 + 4) + 1.6 * (vn(x * 0.35, 2, 64) - 0.5);\n  SB[x] = 109.5 + 2.4 * sin(x * 0.09 + 3) + 1.3 * sin(x * 0.31) + 1.6 * (vn(x * 0.35, 9, 64) - 0.5);\n  RT[x] = 4 + 1.6 * sin(x * 0.07 + 2) + 1.4 * vn(x * 0.4, 5, 64);\n  RB[x] = H - 4 - 1.5 * sin(x * 0.08) - 1.4 * vn(x * 0.4, 7, 64);\n}\n// The walls: old lava beds stacked up the crater, the lip of each catching\n// the lake's light, and the rim at the top; a dark grain everywhere.\nconst WG = new Float32Array(N * 3), WA = new Float32Array(N);\nfor (let i = 0; i \u003c N; i++) {\n  const x = i & 63, y = i >> 6, top = y \u003c 64, u = top ? ST[x] - y - 0.5 : y + 0.5 - SB[x], g = h32(i, 77);\n  const q = u * 0.27 + 0.7 * vn(x * 0.1, top ? 1 : 30, 64) + 0.25 * vn(x * 0.4, top ? 4 : 40, 64), k = floor(q) + (top ? 0 : 50), f = q - floor(q);\n  WG[i * 3] = (g & 31) * 0.78;\n  WG[i * 3 + 1] = ((g >> 5) & 31) * 0.78;\n  WG[i * 3 + 2] = ((g >> 10) & 31) * 0.78;\n  const rim = top ? RT[x] - y - 0.5 : y + 0.5 - RB[x];\n  WA[i] = rim > 0.5 ? 0 : (rim > -0.5 ? 0.9 : (0.5 + 0.5 * hash(k, 3)) * sm(0.34, 0.08, f) * sm(0.12, 0.32, vn(x * 0.25, k * 7, 64))) * (0.8 + 0.4 * hash(i, 5));\n}\n\n// The fumaroles, each as its column and its height above the shore; the\n// last number is 1 on the top wall.\nconst VENTS = [[6, 5, 1], [27, 8, 1], [44, 4.5, 1], [15, 4.5, 0], [36, 7, 0], [55, 5, 0]];\n// Where the spreading crack steps sideways, and by how much: one fault at\n// the start, two or three as the crust breaks up.\nconst FAULTS = [[27, 11], [17, 9, 45, -8], [12, 8, 31, -10, 50, 8]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  params.s = {\n    PX: F32(MAXP), PY: F32(MAXP), PVX: F32(MAXP), PVY: F32(MAXP), PF: F32(MAXP), PT: F32(MAXP), PG: new Int8Array(MAXP), np: 0,\n    t: 0, off: 0, k3: -1, heat: 0, spat: 0.06, c: 13, pm: 0.18, tf: FAULTS[0], rb: 50,\n    bubs: [], fl: [], hot: [], puffs: [], vt: [0, 0, 0, 0, 0, 0], fnd: null, fe: 0, next: 1.2, nfl: 0.5,\n  };\n}\n\nfunction ridge(S, x) {\n  let y = S.rb + 2.2 * sin(x * 0.085 + S.t * 0.05) + 1.3 * sin(x * 0.23 - S.t * 0.037 + 2);\n  for (let k = 0; k \u003c S.tf.length; k += 2) y += S.tf[k + 1] * (1 / (1 + exp(-(x - S.tf[k]) / 0.6)) - 0.5);\n  return y;\n}\n\n// The crust on each side of the crack is one rigid sheet sliding away from\n// it, so its plates are cells of a jittered grid in the sheet's own frame.\n// Each frame the grid points the panel can see are kept in a table (tab).\nconst CELL = { id: 0, px: 0, py: 0, e: 9, em: 9 }, TPX = new Float32Array(2048), TPY = new Float32Array(2048), TID = new Uint32Array(2048), GY0 = [0, 0];\nlet GX0 = 0, TW = 1;\nconst grid = (gx, gy, s) => h32(gx + s * 7919, gy);\nfunction table(off, c) {\n  (GX0 = floor((-3 * AX) / c) - 2), (TW = floor((67 * AX) / c) + 3 - GX0);\n  for (let s = 0; s \u003c 2; s++) {\n    const y0 = (s ? -off : off) + s * 300 - 3, n = floor((y0 + 134) / c) + 3 - (GY0[s] = floor(y0 / c) - 2);\n    for (let j = 0; j \u003c n * TW && j \u003c 1024; j++) {\n      const gx = GX0 + (j % TW), gy = GY0[s] + floor(j / TW), h = grid(gx, gy, s), q = s * 1024 + j;\n      (TID[q] = h), (TPX[q] = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (TPY[q] = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n    }\n  }\n}\nfunction cells(xx, ya, s, c, pm, tab) {\n  const u = (xx * AX) / c, v = ya / c, cu = floor(u), cv = floor(v);\n  let d1 = 99, d2 = 99, d3 = 99, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0, i1 = 0, i2 = 0, i3 = 0;\n  for (let gy = cv - 1; gy \u003c= cv + 1; gy++)\n    for (let gx = cu - 1; gx \u003c= cu + 1; gx++) {\n      let h, px, py;\n      if (tab) {\n        const q = s * 1024 + (gy - GY0[s]) * TW + gx - GX0;\n        (h = TID[q]), (px = TPX[q]), (py = TPY[q]);\n      } else (h = grid(gx, gy, s)), (px = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (py = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n      const d = (px - u) * (px - u) + (py - v) * (py - v);\n      if (d \u003c d1) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d1), (a2 = a1), (b2 = b1), (i2 = i1), (d1 = d), (a1 = px), (b1 = py), (i1 = h);\n      else if (d \u003c d2) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d), (a2 = px), (b2 = py), (i2 = h);\n      else if (d \u003c d3) (d3 = d), (a3 = px), (b3 = py), (i3 = h);\n    }\n  // Some neighbours have frozen together into one bigger, odd-shaped plate.\n  let e = (c * (d2 - d1)) / (2 * sqrt(AX * AX * (a1 - a2) ** 2 + (b1 - b2) ** 2) + 1e-6), em = 9;\n  if (hash(i1 ^ i2, 99) \u003c pm) {\n    em = e;\n    e = hash(i1 ^ i3, 99) \u003c pm ? 9 : (c * (d3 - d1)) / (2 * sqrt(AX * AX * (a1 - a3) ** 2 + (b1 - b3) ** 2) + 1e-6);\n  }\n  (CELL.id = i1), (CELL.px = (a1 * c) / AX), (CELL.py = b1 * c), (CELL.e = e), (CELL.em = em);\n  return CELL;\n}\n\nfunction bubble(S, big) {\n  const x = 4 + rnd() * 56, y = mix(ST[floor(x)] + 7, SB[floor(x)] - 7, 0.1 + 0.8 * rnd());\n  const sg = y \u003c ridge(S, x) ? -1 : 1;\n  S.bubs.push({ x, y, sg, t0: S.t, r: big ? 4.5 + 2 * rnd() : 1.2 + rnd() * (1.4 + 1.8 * S.spat), big: big ? 1 : rnd() \u003c S.spat * 0.4 ? 0.6 : 0, done: 0 });\n}\nfunction spark(S, x, y, sp, tf) {\n  if (S.np >= MAXP) return;\n  const i = S.np++, a = rnd() * 2 * PI;\n  (S.PX[i] = x), (S.PY[i] = y), (S.PVX[i] = cos(a) * sp), (S.PVY[i] = sin(a) * sp), (S.PF[i] = tf), (S.PT[i] = 0.62 + 0.3 * rnd()), (S.PG[i] = 0);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d);\n  S.off += V * d;\n  // Gas bubbles: a couple of seconds apart at the start, often and bigger with Spatter.\n  if ((S.next -= d * (0.35 + 2.2 * S.spat)) \u003c= 0) bubble(S, rnd() \u003c (S.spat - 0.55) * 0.5), (S.next = 0.4 + rnd());\n  for (const b of S.bubs) {\n    const a = t - b.t0;\n    b.y += b.sg * V * d;\n    if (a > 0.6 && !b.done) {\n      b.done = 1;\n      S.fe = max(S.fe, 0.25 + 0.9 * b.big + 0.05 * b.r);\n      for (let k = 0; k \u003c 5 + 7 * b.r + 40 * b.big; k++) spark(S, b.x, b.y, 3 + rnd() * (6 + 3 * b.r), 0.25 + rnd() * (0.4 + 0.8 * b.big));\n    }\n    // A big bubble keeps a fountain going for a while.\n    if (b.big && a > 0.6 && a \u003c 0.6 + 2 * b.big) for (let k = 0; k \u003c 2 + 4 * b.big; k++) spark(S, b.x + rnd() - 0.5, b.y + rnd() - 0.5, 2 + rnd() * 13 * b.big, 0.4 + rnd() * 1.1 * b.big);\n  }\n  S.bubs = S.bubs.filter((b) => t - b.t0 \u003c 5);\n  // Sparks fly out from the burst, land on the crust and ride it as they cool.\n  const { PX, PY, PVX, PVY, PF, PT, PG } = S;\n  let j = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    if (PF[i] > 0) {\n      (PX[i] += PVX[i] * d), (PY[i] += PVY[i] * d);\n      if ((PF[i] -= d) \u003c= 0) {\n        const x = floor(cl(PX[i], 0, W - 1));\n        PG[i] = PY[i] \u003c ST[x] || PY[i] > SB[x] ? 0 : PY[i] \u003c ridge(S, PX[i]) ? -1 : 1;\n      }\n    } else (PT[i] -= d * 0.28), (PY[i] += PG[i] * V * d);\n    if (PT[i] \u003c= 0 || PX[i] \u003c -2 || PX[i] > W + 2 || PY[i] \u003c -2 || PY[i] > H + 2) continue;\n    (PX[j] = PX[i]), (PY[j] = PY[i]), (PVX[j] = PVX[i]), (PVY[j] = PVY[i]), (PF[j] = PF[i]), (PT[j] = PT[i]), (PG[j] = PG[i]), j++;\n  }\n  S.np = j;\n  // Where plates dive under the walls the crust breaks with a flash.\n  if ((S.nfl -= d * V) \u003c= 0) S.fl.push({ x: rnd() * W, top: rnd() \u003c 0.4, t0: t, a: 0.4 + 0.6 * rnd() }), (S.nfl = 0.3 + 1.1 * rnd());\n  S.fl = S.fl.filter((f) => t - f.t0 \u003c 1.6);\n  // Fumaroles in the walls breathe out puffs that the wind takes along the rim.\n  VENTS.forEach(([x, u, top], k) => {\n    if ((S.vt[k] -= d * (1.6 + 3 * S.spat)) \u003c= 0) (S.vt[k] = 0.6 + 0.6 * rnd()), S.puffs.push({ x: x + rnd() - 0.5, u, top, t0: t, r: 1.4 + rnd() + 2 * S.spat });\n  });\n  for (const p of S.puffs) (p.x += (2.2 + 0.6 * sin(t * 0.3)) * d), (p.u += 1.1 * d);\n  S.puffs = S.puffs.filter((p) => t - p.t0 \u003c 4.5 && p.x \u003c W + 6);\n  S.fe *= exp(-d / 0.5);\n  // A foundering plate sinks for two seconds, then the hole crusts over.\n  const f = S.fnd;\n  if (f && t - f.t0 > 2.2) S.hot.push({ s: f.s, id: f.id, t }), (S.fnd = null);\n  S.hot = S.hot.filter((h) => t - h.t \u003c 7);\n}\n\nfunction founder(S) {\n  if (S.fnd) return;\n  const x = 16 + rnd() * 32, y = 72 + rnd() * 16, c = cells(x, y - S.off + 300, 1, S.c, S.pm);\n  S.fnd = { s: 1, id: c.id, t0: S.t };\n  S.fe = max(S.fe, 0.5);\n  for (let k = 0; k \u003c 24; k++) spark(S, x + (rnd() - 0.5) * S.c, y + (rnd() - 0.5) * S.c * 0.7, 2 + 5 * rnd(), 0.2 + 0.4 * rnd());\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k3 = cl(k[2], 0, 1);\n  S.heat = cl(k[0], 0, 1);\n  S.spat = cl(k[3], 0, 1);\n  if (abs(k3 - S.k3) > 0.005) (S.k3 = k3), (S.c = mix(13, 6, k3)), (S.pm = mix(0.18, 0.06, k3)), (S.tf = FAULTS[min(2, floor(k3 * 2.6))]), (S.fnd = null);\n  const p = input.btnPressed || [];\n  if (p[0]) bubble(S, 1), (S.bubs[S.bubs.length - 1].t0 -= 0.3);\n  if (p[1]) founder(S);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nconst F = new Float32Array(N * 3), SD = new Float32Array(N), RC = new Float32Array(W + 2), RMN = new Float32Array(W), RMX = new Float32Array(W);\nconst LAKE = [205, 80, 46], STEAM = [170, 112, 100], FL = new Float32Array(W * 2), SHN = new Float32Array(W * 2), WRN = new Float32Array(W), HS = new Int8Array(8), HI = new Uint32Array(8), HT = new Float32Array(8);\n\n// The distance from (x, y) to the crack, along its line through the column centres.\nlet STEEP = 0;\nfunction ridgeDist(x, xx, yy) {\n  let best = 1e9;\n  for (let c = max(0, x - 5); c \u003c min(W, x + 5); c++) {\n    const ax = c + 0.5, ay = RC[c], ey = RC[c + 1] - ay;\n    const u = cl((xx - ax + (yy - ay) * ey) / (1 + ey * ey), 0, 1), dx = xx - ax - u, dy = yy - ay - ey * u, d = dx * dx + dy * dy;\n    if (d \u003c best) (best = d), (STEEP = abs(ey));\n  }\n  return sqrt(best);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k3 \u003c 0) return;\n  const { t, heat, off, c: C } = S;\n  for (let x = 0; x \u003c W + 1; x++) RC[x] = ridge(S, x + 0.5);\n  for (let x = 0; x \u003c W; x++) {\n    let a = 1e9, b = -1e9;\n    for (let c = max(0, x - 5); c \u003c= min(W, x + 5); c++) (a = min(a, RC[c])), (b = max(b, RC[c]));\n    (RMN[x] = a), (RMX[x] = b), (WRN[x] = 0.5 + nz(x * 0.9 + 70, t * 0.7 + 20));\n    for (let s = 0; s \u003c 2; s++) SHN[x * 2 + s] = sm(0.3, 0.75, nz(x * 1.4 + 90 + s * 40, t * 0.5));\n  }\n  const LL = (0.5 + 0.75 * heat) * (0.92 + 0.08 * sin(t * 0.45)) + S.fe;\n  const ws0 = 0.42 + 2.5 * heat, wr0 = 0.8 + 3.4 * heat, Lc = 1.6 + 7 * heat, opA = 0.22 - 0.3 * heat;\n  table(off, C);\n  const fnd = S.fnd, fp = fnd ? cl((t - fnd.t0) / 2.2, 0, 1) : 0, nh = min(8, S.hot.length);\n  for (let k = 0; k \u003c nh; k++) (HS[k] = S.hot[k].s), (HI[k] = S.hot[k].id), (HT[k] = S.hot[k].t);\n  // Flashes along each shore, per column.\n  FL.fill(0);\n  for (const f of S.fl) for (let x = 0; x \u003c W; x++) FL[x * 2 + (f.top ? 0 : 1)] += f.a * exp(-(((x + 0.5 - f.x) / 2.6) ** 2)) * sm(0, 0.1, t - f.t0) * exp(-(t - f.t0) / 0.45);\n\n  for (let y = 0; y \u003c H; y++) {\n    const yy = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, xx = x + 0.5, st = ST[x], sb = SB[x];\n      if (yy \u003c st || yy > sb) {\n        // Crater wall, lit red from the lake below: its foot, then the lip of each bed.\n        const top = yy \u003c st, u = top ? st - yy : yy - sb, a = WA[i];\n        const lw = LL * (1.7 * ex(u / 1.6) * (0.6 + 0.6 * a) + 2.4 * a * ex(u / 11));\n        for (let c = 0; c \u003c 3; c++) F[o + c] = WG[o + c] + LAKE[c] * lw;\n        continue;\n      }\n      const up = yy \u003c RC[x], s = up ? 0 : 1, sg = up ? -1 : 1, ya = yy - sg * off + s * 300;\n      // Plate edges bend a little: the grid is read through a slow warp.\n      const n1 = nz(xx * 1.3, ya * 1.3), n2 = nz(xx * 0.6 + 40, ya * 0.6), P = cells(xx + 3 * (n2 - 0.5), ya + 2.6 * (n1 - 0.5), s, C, S.pm, 1), id = P.id, e = P.e, em = P.em, px = P.px, py = P.py;\n      STEEP = 0;\n      const dr = yy > RMN[x] - 7 && yy \u003c RMX[x] + 7 ? ridgeDist(x, xx, yy) : abs(yy - RC[x]) * 0.92, tf = sm(1.2, 3, STEEP);\n      const ds = up ? yy - st : sb - yy;\n\n      // The crust: black, its grain and ropes fixed to the plate.\n      const lx = xx - px, ly = (ya - py) * sg, g = h32(x + s * 131, round(ya) + 5003), pt = (id & 255) / 255;\n      const rope = fsin(ly * 1.9 + 0.05 * lx * lx + pt * 40) * (0.6 + 0.4 * fsin(lx * 0.4 + pt * 9)), tilt = 0.45 + 0.55 * sm(0, 4, ds);\n      let cr = ((g & 31) * 0.76 + rope * 1.5 + pt * 2) * tilt, cg = (((g >> 5) & 31) * 0.74 + rope * 2) * tilt, cb = (((g >> 10) & 31) * 0.76 + rope * 2.5 + pt * 2.5) * tilt;\n      // Young crust near the crack still glows through; so does a plate that foundered and froze over.\n      let Tc = 0.62 * ex(dr / Lc) * (0.65 + 0.7 * n1), hot = 99;\n      for (let k = 0; k \u003c nh; k++) if (HS[k] === s && HI[k] === id) hot = t - HT[k];\n      if (hot \u003c 7) Tc = max(Tc, 0.9 * exp(-hot / 0.7) * (0.75 + 0.5 * n2));\n      Tc = max(Tc, 0.22 * ex(e / 0.7) * (0.6 + heat));\n      if (Tc > 0.02) {\n        const L = lut(Tc), gl = sm(0, 0.5, Tc) * (0.75 + 0.03 * ((g >> 12) & 15));\n        (cr += LUT[L] * gl), (cg += LUT[L + 1] * gl), (cb += LUT[L + 2] * gl);\n      }\n      if (em \u003c 1.2) cr += 14 * sm(1.2, 0.2, em + 0.8 * (n1 - 0.5));\n      // Seams between plates: some open and red, some crusted shut; near the crack they spread wider.\n      const ws = ws0 * (0.4 + 1.2 * n1) * (1 + 0.7 * ex(dr / 6)), op = sm(opA, opA + 0.12, n1);\n      let A = e \u003c ws + 0.35 ? sm(ws + 0.35, ws - 0.25, e) * op : 0, T = 0.57 + 0.27 * heat + 0.12 * ex(dr / 8) + 0.36 * (n2 - 0.5);\n      // The spreading crack: the hottest lava, opening and closing along its length.\n      const wr = wr0 * WRN[x] * (1 - 0.6 * tf), ar = dr \u003c wr + 0.6 ? sm(wr + 0.6, wr - 0.4, dr) : 0;\n      if (ar > A) (A = ar), (T = 0.9 + 0.1 * heat - 0.3 * (dr / (wr + 0.6)) ** 2 + 0.25 * (n1 - 0.5) - 0.3 * tf);\n      // The shore where the crust dives under, flashing as it breaks.\n      const sh = ds \u003c 5 ? sm(1.7, 0.2, ds) * SHN[x * 2 + s] + 0.7 * ex(e / 1.2) * sm(5, 0.5, ds) + FL[x * 2 + s] * sm(4, 0.3, ds) : 0;\n      if (sh > A) (A = min(1, sh)), (T = 0.45 + 0.3 * heat + 0.3 * min(1, sh) + 0.2 * (n2 - 0.5));\n      // A foundering plate: its edges melt inward as it tilts and sinks.\n      if (fnd && fnd.s === s && fnd.id === id) {\n        const fa = sm(fp * 0.5 * C + 0.6, fp * 0.5 * C - 0.4, e);\n        (cr *= 1 - 0.6 * fp), (cg *= 1 - 0.6 * fp), (cb *= 1 - 0.6 * fp);\n        if (fa > A) (A = fa), (T = 0.62 + 0.3 * (1 - fp) + 0.2 * (n1 - 0.5));\n      }\n      if (hot \u003c 7) {\n        // The hole skins over in small new plates, their cracks narrowing and dimming.\n        const k = exp(-hot / 1.3), w = 0.3 + 3.5 * k * k * k, ha = sm(w + 0.5, w - 0.4, cells(xx, ya, s + 2, 4.5, 0).e) * sm(7, 4, hot);\n        if (ha > A) (A = ha), (T = 0.24 + 0.72 * k + 0.8 * k * (nz(xx * 2.4, ya * 2.4 + 9) - 0.5));\n      }\n      if (A > 0.003) {\n        // Open lava wrinkles a dark skin on itself as it cools.\n        const sw = hot \u003c 7 ? 0.8 : sm(0.2, 0.6, heat), sk = A > 0.5 && sw > 0 ? sm(0.07, 0.01, abs(nz(xx * 2.2 + 5, ya * 2.2) - 0.5)) * sw * 0.7 : 0;\n        const L = lut(T), b = A * (1 - sk);\n        (cr = mix(cr, LUT[L] + ((g >> 15) & 15) - 7.5, b)), (cg = mix(cg, LUT[L + 1] + ((g >> 19) & 31) * 0.8 - 12, b)), (cb = mix(cb, LUT[L + 2] + ((g >>> 24) & 31) * 0.8, b));\n      }\n      (F[o] = cr), (F[o + 1] = cg), (F[o + 2] = cb);\n    }\n  }\n  overlay(S, t);\n  // Exposed for the lava, as a night photograph of a lava lake is: what only\n  // glows faintly sinks back into the black of the crust.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const m = max(F[o], F[o + 1], F[o + 2]), k = m > 24 && m \u003c 60 ? (12 + (m - 24) * 1.333) / m : 1;\n    display.setPixel(i & 63, i >> 6, cl(F[o] * k, 0, 255) | 0, cl(F[o + 1] * k, 0, 255) | 0, cl(F[o + 2] * k, 0, 255) | 0);\n  }\n}\n\nfunction add(x, y, L, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], LUT[L + c], min(1, a));\n}\n\nfunction overlay(S, t) {\n  // Bubbles: the crust domes and cracks in a ring, then tears open and freezes over.\n  for (const b of S.bubs) {\n    const a = t - b.t0, R = b.r, E = R * 1.3 + 2, fnt = 2 * b.big;\n    for (let y = max(0, floor(b.y - E)); y \u003c min(H, b.y + E); y++)\n      for (let x = max(0, floor(b.x - E)); x \u003c min(W, b.x + E); x++) {\n        if (y \u003c ST[x] || y > SB[x]) continue;\n        const dx = x + 0.5 - b.x, dy = y + 0.5 - b.y, d = sqrt(dx * dx + dy * dy), o = (y * W + x) * 3;\n        let A, T;\n        if (a \u003c 0.6) {\n          // The crust domes up and cracks: a ring and spokes.\n          const p = a / 0.6, rr = R * (0.6 + 0.4 * p), sp = d \u003c rr ? sm(0.3, 0.08, abs(sin(Math.atan2(dy, dx) * 2.5 + b.r))) * sm(0.5, rr, d) : 0;\n          (A = p * max(sm(1, 0.2, abs(d - rr)), 0.8 * sp)), (T = 0.4 + 0.45 * p);\n        } else {\n          // Torn open: white-hot, churning while a fountain plays, then a skin\n          // closes over it in small plates, as over a foundered one.\n          const c = a - 0.6, hot = c \u003c fnt ? 1 : exp(-(c - fnt) / (0.4 + 0.2 * R)), sk = nz(x * 2.3 + b.r * 9, y * 2.3 + b.t0 * 7 + (c \u003c fnt ? c * 5 : 0));\n          const rr = R * (c \u003c fnt ? 0.6 : 1) * (0.7 + 0.8 * nz(x * 1.1 + b.r * 5, y * 1.1 + 40)), w = 0.3 + 3 * hot * hot * hot;\n          (A = sm(rr + 0.5, rr - 0.5, d) * sm(w + 0.5, w - 0.4, cells(dx + 40, dy + 40, 9 + floor(b.r * 97), 3.2, 0).e) * sm(0, 0.15, hot)), (T = 0.22 + 0.66 * hot - (0.2 * d) / R + 0.5 * (sk - 0.5) + (c \u003c fnt ? 0.25 * sm(R * 0.6, 0, d) : 0));\n          A = max(A, 0.9 * sm(1, 0.2, abs(d - R * 1.15)) * exp(-c / 0.35));\n        }\n        if (A > 0) {\n          const L = lut(T);\n          for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], LUT[L + k], min(1, A));\n        }\n      }\n  }\n  // Steam: soft puffs that swell and thin out, lit from the lake below.\n  SD.fill(0);\n  for (const p of S.puffs) {\n    const a = t - p.t0, r = p.r + 0.8 * a, al = sm(0, 0.5, a) * sm(4.5, 1.5, a);\n    const sx = p.top ? ST[cl(floor(p.x), 0, W - 1)] : SB[cl(floor(p.x), 0, W - 1)], yc = p.top ? sx - p.u : sx + p.u;\n    for (let y = max(0, floor(yc - r)); y \u003c min(H, yc + r + 1); y++) {\n      const u = p.top ? sx - y - 0.5 : y + 0.5 - sx, dy = (u - p.u) / 0.8;\n      if (abs(dy) > r) continue;\n      for (let x = max(0, floor(p.x - r)); x \u003c min(W, p.x + r); x++) {\n        const dx = x + 0.5 - p.x, q = 1 - (dx * dx + dy * dy) / (r * r);\n        if (q \u003c= 0) continue;\n        SD[y * W + x] += al * q * q * (0.45 + 0.55 * ex(max(0, u) / 7)) * (0.7 + 0.6 * nz(x * 1.7 + p.t0 * 13, y * 1.7));\n      }\n    }\n  }\n  const sl = min(1, (0.65 + 0.6 * S.spat) * (S.fe + 0.6 + 0.6 * S.heat));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (SD[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += STEAM[c] * sl * min(1, SD[i]) * (1 - F[o + c] / 255);\n  // Sparks: white-hot in the air, orange where they land, then dull red and gone.\n  const { PX, PY, PVX, PVY, PF, PT, np } = S;\n  for (let i = 0; i \u003c np; i++) {\n    if (PF[i] > 0) {\n      const L = lut(0.93 + 0.07 * sin(i));\n      add(PX[i], PY[i], L, 1), add(PX[i] - PVX[i] * 0.04, PY[i] - PVY[i] * 0.04, L, 0.5);\n    } else add(PX[i], PY[i], lut(PT[i] * 0.85), sm(0, 0.3, PT[i]));\n  }\n}\n","layer":{"id":"layer-lava-lake","type":"code","name":"lava-lake","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lava Lake\n// Family:  volcano\n// Idea:    Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the lava lakes of Erta Ale and Nyiragongo seen from the crater rim\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1\n//\n// Knob 1: Heat. At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter.\n// Knob 2: Speed. At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower.\n// Knob 3: Plates. At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three.\n// Knob 4: Spatter. How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder.\n// Buttons: K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.\n\nconst W = 64, H = 128, N = W * H;\n// Sparks at most; plates are 1 / AX wider than tall, stretched along the\n// crack; the crust drifts V LEDs per second at Speed 2.\nconst MAXP = 700, AX = 0.72, V = 1.6;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction h32(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return (h ^ (h >>> 16)) >>> 0;\n}\nconst hash = (i, j) => h32(i, j) / 4294967296;\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Smooth noise on a 128 x 128 torus, features about eight texels across.\nconst NZ = new Float32Array(128 * 128).map((_, k) => 0.65 * vn((k & 127) / 8, (k >> 7) / 8, 16) + 0.35 * vn((k & 127) / 4 + 3, (k >> 7) / 4, 32));\nfunction nz(u, v) {\n  const xi = floor(u), yi = floor(v), fx = u - xi, fy = v - yi, x0 = xi & 127, y0 = (yi & 127) \u003c\u003c 7, x1 = (x0 + 1) & 127, y1 = ((yi + 1) & 127) \u003c\u003c 7;\n  const a = NZ[y0 + x0], b = NZ[y0 + x1], c = NZ[y1 + x0];\n  return a + (b - a) * fx + (c - a) * fy + (a - b - c + NZ[y1 + x1]) * fx * fy;\n}\n// Lava by temperature: dull red, cherry, orange, yellow, the white of a fresh tear.\nconst STOPS = [[0, 30, 1, 0], [0.2, 104, 7, 0], [0.4, 184, 27, 2], [0.6, 238, 82, 7], [0.8, 250, 158, 36], [1, 254, 230, 148]];\nconst LUT = new Float32Array(257 * 3);\nfor (let q = 0; q \u003c= 256; q++) {\n  const T = q / 256;\n  let k = 0;\n  while (k \u003c 4 && T > STOPS[k + 1][0]) k++;\n  const [a, b] = [STOPS[k], STOPS[k + 1]], u = (T - a[0]) / (b[0] - a[0]);\n  for (let c = 0; c \u003c 3; c++) LUT[q * 3 + c] = mix(a[c + 1], b[c + 1], u);\n}\nconst lut = (T) => round(cl(T, 0, 1) * 256) * 3;\n// exp(-v) for v >= 0, read from a table.\nconst EX = new Float32Array(1025).map((_, k) => exp(-k / 64)), ex = (v) => (v \u003c 16 ? EX[(v * 64) | 0] : 0);\n// sin, read from a table.\nconst SN = new Float32Array(1024).map((_, k) => sin((k * PI) / 512)), fsin = (a) => SN[(a * 162.97) & 1023];\n\n// The shore of the lake under each column, and where the crater rim is.\nconst ST = new Float32Array(W), SB = new Float32Array(W), RT = new Float32Array(W), RB = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  ST[x] = 17.5 + 2.2 * sin(x * 0.11 + 1) + 1.4 * sin(x * 0.29 + 4) + 1.6 * (vn(x * 0.35, 2, 64) - 0.5);\n  SB[x] = 109.5 + 2.4 * sin(x * 0.09 + 3) + 1.3 * sin(x * 0.31) + 1.6 * (vn(x * 0.35, 9, 64) - 0.5);\n  RT[x] = 4 + 1.6 * sin(x * 0.07 + 2) + 1.4 * vn(x * 0.4, 5, 64);\n  RB[x] = H - 4 - 1.5 * sin(x * 0.08) - 1.4 * vn(x * 0.4, 7, 64);\n}\n// The walls: old lava beds stacked up the crater, the lip of each catching\n// the lake's light, and the rim at the top; a dark grain everywhere.\nconst WG = new Float32Array(N * 3), WA = new Float32Array(N);\nfor (let i = 0; i \u003c N; i++) {\n  const x = i & 63, y = i >> 6, top = y \u003c 64, u = top ? ST[x] - y - 0.5 : y + 0.5 - SB[x], g = h32(i, 77);\n  const q = u * 0.27 + 0.7 * vn(x * 0.1, top ? 1 : 30, 64) + 0.25 * vn(x * 0.4, top ? 4 : 40, 64), k = floor(q) + (top ? 0 : 50), f = q - floor(q);\n  WG[i * 3] = (g & 31) * 0.78;\n  WG[i * 3 + 1] = ((g >> 5) & 31) * 0.78;\n  WG[i * 3 + 2] = ((g >> 10) & 31) * 0.78;\n  const rim = top ? RT[x] - y - 0.5 : y + 0.5 - RB[x];\n  WA[i] = rim > 0.5 ? 0 : (rim > -0.5 ? 0.9 : (0.5 + 0.5 * hash(k, 3)) * sm(0.34, 0.08, f) * sm(0.12, 0.32, vn(x * 0.25, k * 7, 64))) * (0.8 + 0.4 * hash(i, 5));\n}\n\n// The fumaroles, each as its column and its height above the shore; the\n// last number is 1 on the top wall.\nconst VENTS = [[6, 5, 1], [27, 8, 1], [44, 4.5, 1], [15, 4.5, 0], [36, 7, 0], [55, 5, 0]];\n// Where the spreading crack steps sideways, and by how much: one fault at\n// the start, two or three as the crust breaks up.\nconst FAULTS = [[27, 11], [17, 9, 45, -8], [12, 8, 31, -10, 50, 8]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  params.s = {\n    PX: F32(MAXP), PY: F32(MAXP), PVX: F32(MAXP), PVY: F32(MAXP), PF: F32(MAXP), PT: F32(MAXP), PG: new Int8Array(MAXP), np: 0,\n    t: 0, off: 0, k3: -1, heat: 0, spat: 0.06, c: 13, pm: 0.18, tf: FAULTS[0], rb: 50,\n    bubs: [], fl: [], hot: [], puffs: [], vt: [0, 0, 0, 0, 0, 0], fnd: null, fe: 0, next: 1.2, nfl: 0.5,\n  };\n}\n\nfunction ridge(S, x) {\n  let y = S.rb + 2.2 * sin(x * 0.085 + S.t * 0.05) + 1.3 * sin(x * 0.23 - S.t * 0.037 + 2);\n  for (let k = 0; k \u003c S.tf.length; k += 2) y += S.tf[k + 1] * (1 / (1 + exp(-(x - S.tf[k]) / 0.6)) - 0.5);\n  return y;\n}\n\n// The crust on each side of the crack is one rigid sheet sliding away from\n// it, so its plates are cells of a jittered grid in the sheet's own frame.\n// Each frame the grid points the panel can see are kept in a table (tab).\nconst CELL = { id: 0, px: 0, py: 0, e: 9, em: 9 }, TPX = new Float32Array(2048), TPY = new Float32Array(2048), TID = new Uint32Array(2048), GY0 = [0, 0];\nlet GX0 = 0, TW = 1;\nconst grid = (gx, gy, s) => h32(gx + s * 7919, gy);\nfunction table(off, c) {\n  (GX0 = floor((-3 * AX) / c) - 2), (TW = floor((67 * AX) / c) + 3 - GX0);\n  for (let s = 0; s \u003c 2; s++) {\n    const y0 = (s ? -off : off) + s * 300 - 3, n = floor((y0 + 134) / c) + 3 - (GY0[s] = floor(y0 / c) - 2);\n    for (let j = 0; j \u003c n * TW && j \u003c 1024; j++) {\n      const gx = GX0 + (j % TW), gy = GY0[s] + floor(j / TW), h = grid(gx, gy, s), q = s * 1024 + j;\n      (TID[q] = h), (TPX[q] = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (TPY[q] = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n    }\n  }\n}\nfunction cells(xx, ya, s, c, pm, tab) {\n  const u = (xx * AX) / c, v = ya / c, cu = floor(u), cv = floor(v);\n  let d1 = 99, d2 = 99, d3 = 99, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0, i1 = 0, i2 = 0, i3 = 0;\n  for (let gy = cv - 1; gy \u003c= cv + 1; gy++)\n    for (let gx = cu - 1; gx \u003c= cu + 1; gx++) {\n      let h, px, py;\n      if (tab) {\n        const q = s * 1024 + (gy - GY0[s]) * TW + gx - GX0;\n        (h = TID[q]), (px = TPX[q]), (py = TPY[q]);\n      } else (h = grid(gx, gy, s)), (px = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (py = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n      const d = (px - u) * (px - u) + (py - v) * (py - v);\n      if (d \u003c d1) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d1), (a2 = a1), (b2 = b1), (i2 = i1), (d1 = d), (a1 = px), (b1 = py), (i1 = h);\n      else if (d \u003c d2) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d), (a2 = px), (b2 = py), (i2 = h);\n      else if (d \u003c d3) (d3 = d), (a3 = px), (b3 = py), (i3 = h);\n    }\n  // Some neighbours have frozen together into one bigger, odd-shaped plate.\n  let e = (c * (d2 - d1)) / (2 * sqrt(AX * AX * (a1 - a2) ** 2 + (b1 - b2) ** 2) + 1e-6), em = 9;\n  if (hash(i1 ^ i2, 99) \u003c pm) {\n    em = e;\n    e = hash(i1 ^ i3, 99) \u003c pm ? 9 : (c * (d3 - d1)) / (2 * sqrt(AX * AX * (a1 - a3) ** 2 + (b1 - b3) ** 2) + 1e-6);\n  }\n  (CELL.id = i1), (CELL.px = (a1 * c) / AX), (CELL.py = b1 * c), (CELL.e = e), (CELL.em = em);\n  return CELL;\n}\n\nfunction bubble(S, big) {\n  const x = 4 + rnd() * 56, y = mix(ST[floor(x)] + 7, SB[floor(x)] - 7, 0.1 + 0.8 * rnd());\n  const sg = y \u003c ridge(S, x) ? -1 : 1;\n  S.bubs.push({ x, y, sg, t0: S.t, r: big ? 4.5 + 2 * rnd() : 1.2 + rnd() * (1.4 + 1.8 * S.spat), big: big ? 1 : rnd() \u003c S.spat * 0.4 ? 0.6 : 0, done: 0 });\n}\nfunction spark(S, x, y, sp, tf) {\n  if (S.np >= MAXP) return;\n  const i = S.np++, a = rnd() * 2 * PI;\n  (S.PX[i] = x), (S.PY[i] = y), (S.PVX[i] = cos(a) * sp), (S.PVY[i] = sin(a) * sp), (S.PF[i] = tf), (S.PT[i] = 0.62 + 0.3 * rnd()), (S.PG[i] = 0);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d);\n  S.off += V * d;\n  // Gas bubbles: a couple of seconds apart at the start, often and bigger with Spatter.\n  if ((S.next -= d * (0.35 + 2.2 * S.spat)) \u003c= 0) bubble(S, rnd() \u003c (S.spat - 0.55) * 0.5), (S.next = 0.4 + rnd());\n  for (const b of S.bubs) {\n    const a = t - b.t0;\n    b.y += b.sg * V * d;\n    if (a > 0.6 && !b.done) {\n      b.done = 1;\n      S.fe = max(S.fe, 0.25 + 0.9 * b.big + 0.05 * b.r);\n      for (let k = 0; k \u003c 5 + 7 * b.r + 40 * b.big; k++) spark(S, b.x, b.y, 3 + rnd() * (6 + 3 * b.r), 0.25 + rnd() * (0.4 + 0.8 * b.big));\n    }\n    // A big bubble keeps a fountain going for a while.\n    if (b.big && a > 0.6 && a \u003c 0.6 + 2 * b.big) for (let k = 0; k \u003c 2 + 4 * b.big; k++) spark(S, b.x + rnd() - 0.5, b.y + rnd() - 0.5, 2 + rnd() * 13 * b.big, 0.4 + rnd() * 1.1 * b.big);\n  }\n  S.bubs = S.bubs.filter((b) => t - b.t0 \u003c 5);\n  // Sparks fly out from the burst, land on the crust and ride it as they cool.\n  const { PX, PY, PVX, PVY, PF, PT, PG } = S;\n  let j = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    if (PF[i] > 0) {\n      (PX[i] += PVX[i] * d), (PY[i] += PVY[i] * d);\n      if ((PF[i] -= d) \u003c= 0) {\n        const x = floor(cl(PX[i], 0, W - 1));\n        PG[i] = PY[i] \u003c ST[x] || PY[i] > SB[x] ? 0 : PY[i] \u003c ridge(S, PX[i]) ? -1 : 1;\n      }\n    } else (PT[i] -= d * 0.28), (PY[i] += PG[i] * V * d);\n    if (PT[i] \u003c= 0 || PX[i] \u003c -2 || PX[i] > W + 2 || PY[i] \u003c -2 || PY[i] > H + 2) continue;\n    (PX[j] = PX[i]), (PY[j] = PY[i]), (PVX[j] = PVX[i]), (PVY[j] = PVY[i]), (PF[j] = PF[i]), (PT[j] = PT[i]), (PG[j] = PG[i]), j++;\n  }\n  S.np = j;\n  // Where plates dive under the walls the crust breaks with a flash.\n  if ((S.nfl -= d * V) \u003c= 0) S.fl.push({ x: rnd() * W, top: rnd() \u003c 0.4, t0: t, a: 0.4 + 0.6 * rnd() }), (S.nfl = 0.3 + 1.1 * rnd());\n  S.fl = S.fl.filter((f) => t - f.t0 \u003c 1.6);\n  // Fumaroles in the walls breathe out puffs that the wind takes along the rim.\n  VENTS.forEach(([x, u, top], k) => {\n    if ((S.vt[k] -= d * (1.6 + 3 * S.spat)) \u003c= 0) (S.vt[k] = 0.6 + 0.6 * rnd()), S.puffs.push({ x: x + rnd() - 0.5, u, top, t0: t, r: 1.4 + rnd() + 2 * S.spat });\n  });\n  for (const p of S.puffs) (p.x += (2.2 + 0.6 * sin(t * 0.3)) * d), (p.u += 1.1 * d);\n  S.puffs = S.puffs.filter((p) => t - p.t0 \u003c 4.5 && p.x \u003c W + 6);\n  S.fe *= exp(-d / 0.5);\n  // A foundering plate sinks for two seconds, then the hole crusts over.\n  const f = S.fnd;\n  if (f && t - f.t0 > 2.2) S.hot.push({ s: f.s, id: f.id, t }), (S.fnd = null);\n  S.hot = S.hot.filter((h) => t - h.t \u003c 7);\n}\n\nfunction founder(S) {\n  if (S.fnd) return;\n  const x = 16 + rnd() * 32, y = 72 + rnd() * 16, c = cells(x, y - S.off + 300, 1, S.c, S.pm);\n  S.fnd = { s: 1, id: c.id, t0: S.t };\n  S.fe = max(S.fe, 0.5);\n  for (let k = 0; k \u003c 24; k++) spark(S, x + (rnd() - 0.5) * S.c, y + (rnd() - 0.5) * S.c * 0.7, 2 + 5 * rnd(), 0.2 + 0.4 * rnd());\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k3 = cl(k[2], 0, 1);\n  S.heat = cl(k[0], 0, 1);\n  S.spat = cl(k[3], 0, 1);\n  if (abs(k3 - S.k3) > 0.005) (S.k3 = k3), (S.c = mix(13, 6, k3)), (S.pm = mix(0.18, 0.06, k3)), (S.tf = FAULTS[min(2, floor(k3 * 2.6))]), (S.fnd = null);\n  const p = input.btnPressed || [];\n  if (p[0]) bubble(S, 1), (S.bubs[S.bubs.length - 1].t0 -= 0.3);\n  if (p[1]) founder(S);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nconst F = new Float32Array(N * 3), SD = new Float32Array(N), RC = new Float32Array(W + 2), RMN = new Float32Array(W), RMX = new Float32Array(W);\nconst LAKE = [205, 80, 46], STEAM = [170, 112, 100], FL = new Float32Array(W * 2), SHN = new Float32Array(W * 2), WRN = new Float32Array(W), HS = new Int8Array(8), HI = new Uint32Array(8), HT = new Float32Array(8);\n\n// The distance from (x, y) to the crack, along its line through the column centres.\nlet STEEP = 0;\nfunction ridgeDist(x, xx, yy) {\n  let best = 1e9;\n  for (let c = max(0, x - 5); c \u003c min(W, x + 5); c++) {\n    const ax = c + 0.5, ay = RC[c], ey = RC[c + 1] - ay;\n    const u = cl((xx - ax + (yy - ay) * ey) / (1 + ey * ey), 0, 1), dx = xx - ax - u, dy = yy - ay - ey * u, d = dx * dx + dy * dy;\n    if (d \u003c best) (best = d), (STEEP = abs(ey));\n  }\n  return sqrt(best);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k3 \u003c 0) return;\n  const { t, heat, off, c: C } = S;\n  for (let x = 0; x \u003c W + 1; x++) RC[x] = ridge(S, x + 0.5);\n  for (let x = 0; x \u003c W; x++) {\n    let a = 1e9, b = -1e9;\n    for (let c = max(0, x - 5); c \u003c= min(W, x + 5); c++) (a = min(a, RC[c])), (b = max(b, RC[c]));\n    (RMN[x] = a), (RMX[x] = b), (WRN[x] = 0.5 + nz(x * 0.9 + 70, t * 0.7 + 20));\n    for (let s = 0; s \u003c 2; s++) SHN[x * 2 + s] = sm(0.3, 0.75, nz(x * 1.4 + 90 + s * 40, t * 0.5));\n  }\n  const LL = (0.5 + 0.75 * heat) * (0.92 + 0.08 * sin(t * 0.45)) + S.fe;\n  const ws0 = 0.42 + 2.5 * heat, wr0 = 0.8 + 3.4 * heat, Lc = 1.6 + 7 * heat, opA = 0.22 - 0.3 * heat;\n  table(off, C);\n  const fnd = S.fnd, fp = fnd ? cl((t - fnd.t0) / 2.2, 0, 1) : 0, nh = min(8, S.hot.length);\n  for (let k = 0; k \u003c nh; k++) (HS[k] = S.hot[k].s), (HI[k] = S.hot[k].id), (HT[k] = S.hot[k].t);\n  // Flashes along each shore, per column.\n  FL.fill(0);\n  for (const f of S.fl) for (let x = 0; x \u003c W; x++) FL[x * 2 + (f.top ? 0 : 1)] += f.a * exp(-(((x + 0.5 - f.x) / 2.6) ** 2)) * sm(0, 0.1, t - f.t0) * exp(-(t - f.t0) / 0.45);\n\n  for (let y = 0; y \u003c H; y++) {\n    const yy = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, xx = x + 0.5, st = ST[x], sb = SB[x];\n      if (yy \u003c st || yy > sb) {\n        // Crater wall, lit red from the lake below: its foot, then the lip of each bed.\n        const top = yy \u003c st, u = top ? st - yy : yy - sb, a = WA[i];\n        const lw = LL * (1.7 * ex(u / 1.6) * (0.6 + 0.6 * a) + 2.4 * a * ex(u / 11));\n        for (let c = 0; c \u003c 3; c++) F[o + c] = WG[o + c] + LAKE[c] * lw;\n        continue;\n      }\n      const up = yy \u003c RC[x], s = up ? 0 : 1, sg = up ? -1 : 1, ya = yy - sg * off + s * 300;\n      // Plate edges bend a little: the grid is read through a slow warp.\n      const n1 = nz(xx * 1.3, ya * 1.3), n2 = nz(xx * 0.6 + 40, ya * 0.6), P = cells(xx + 3 * (n2 - 0.5), ya + 2.6 * (n1 - 0.5), s, C, S.pm, 1), id = P.id, e = P.e, em = P.em, px = P.px, py = P.py;\n      STEEP = 0;\n      const dr = yy > RMN[x] - 7 && yy \u003c RMX[x] + 7 ? ridgeDist(x, xx, yy) : abs(yy - RC[x]) * 0.92, tf = sm(1.2, 3, STEEP);\n      const ds = up ? yy - st : sb - yy;\n\n      // The crust: black, its grain and ropes fixed to the plate.\n      const lx = xx - px, ly = (ya - py) * sg, g = h32(x + s * 131, round(ya) + 5003), pt = (id & 255) / 255;\n      const rope = fsin(ly * 1.9 + 0.05 * lx * lx + pt * 40) * (0.6 + 0.4 * fsin(lx * 0.4 + pt * 9)), tilt = 0.45 + 0.55 * sm(0, 4, ds);\n      let cr = ((g & 31) * 0.76 + rope * 1.5 + pt * 2) * tilt, cg = (((g >> 5) & 31) * 0.74 + rope * 2) * tilt, cb = (((g >> 10) & 31) * 0.76 + rope * 2.5 + pt * 2.5) * tilt;\n      // Young crust near the crack still glows through; so does a plate that foundered and froze over.\n      let Tc = 0.62 * ex(dr / Lc) * (0.65 + 0.7 * n1), hot = 99;\n      for (let k = 0; k \u003c nh; k++) if (HS[k] === s && HI[k] === id) hot = t - HT[k];\n      if (hot \u003c 7) Tc = max(Tc, 0.9 * exp(-hot / 0.7) * (0.75 + 0.5 * n2));\n      Tc = max(Tc, 0.22 * ex(e / 0.7) * (0.6 + heat));\n      if (Tc > 0.02) {\n        const L = lut(Tc), gl = sm(0, 0.5, Tc) * (0.75 + 0.03 * ((g >> 12) & 15));\n        (cr += LUT[L] * gl), (cg += LUT[L + 1] * gl), (cb += LUT[L + 2] * gl);\n      }\n      if (em \u003c 1.2) cr += 14 * sm(1.2, 0.2, em + 0.8 * (n1 - 0.5));\n      // Seams between plates: some open and red, some crusted shut; near the crack they spread wider.\n      const ws = ws0 * (0.4 + 1.2 * n1) * (1 + 0.7 * ex(dr / 6)), op = sm(opA, opA + 0.12, n1);\n      let A = e \u003c ws + 0.35 ? sm(ws + 0.35, ws - 0.25, e) * op : 0, T = 0.57 + 0.27 * heat + 0.12 * ex(dr / 8) + 0.36 * (n2 - 0.5);\n      // The spreading crack: the hottest lava, opening and closing along its length.\n      const wr = wr0 * WRN[x] * (1 - 0.6 * tf), ar = dr \u003c wr + 0.6 ? sm(wr + 0.6, wr - 0.4, dr) : 0;\n      if (ar > A) (A = ar), (T = 0.9 + 0.1 * heat - 0.3 * (dr / (wr + 0.6)) ** 2 + 0.25 * (n1 - 0.5) - 0.3 * tf);\n      // The shore where the crust dives under, flashing as it breaks.\n      const sh = ds \u003c 5 ? sm(1.7, 0.2, ds) * SHN[x * 2 + s] + 0.7 * ex(e / 1.2) * sm(5, 0.5, ds) + FL[x * 2 + s] * sm(4, 0.3, ds) : 0;\n      if (sh > A) (A = min(1, sh)), (T = 0.45 + 0.3 * heat + 0.3 * min(1, sh) + 0.2 * (n2 - 0.5));\n      // A foundering plate: its edges melt inward as it tilts and sinks.\n      if (fnd && fnd.s === s && fnd.id === id) {\n        const fa = sm(fp * 0.5 * C + 0.6, fp * 0.5 * C - 0.4, e);\n        (cr *= 1 - 0.6 * fp), (cg *= 1 - 0.6 * fp), (cb *= 1 - 0.6 * fp);\n        if (fa > A) (A = fa), (T = 0.62 + 0.3 * (1 - fp) + 0.2 * (n1 - 0.5));\n      }\n      if (hot \u003c 7) {\n        // The hole skins over in small new plates, their cracks narrowing and dimming.\n        const k = exp(-hot / 1.3), w = 0.3 + 3.5 * k * k * k, ha = sm(w + 0.5, w - 0.4, cells(xx, ya, s + 2, 4.5, 0).e) * sm(7, 4, hot);\n        if (ha > A) (A = ha), (T = 0.24 + 0.72 * k + 0.8 * k * (nz(xx * 2.4, ya * 2.4 + 9) - 0.5));\n      }\n      if (A > 0.003) {\n        // Open lava wrinkles a dark skin on itself as it cools.\n        const sw = hot \u003c 7 ? 0.8 : sm(0.2, 0.6, heat), sk = A > 0.5 && sw > 0 ? sm(0.07, 0.01, abs(nz(xx * 2.2 + 5, ya * 2.2) - 0.5)) * sw * 0.7 : 0;\n        const L = lut(T), b = A * (1 - sk);\n        (cr = mix(cr, LUT[L] + ((g >> 15) & 15) - 7.5, b)), (cg = mix(cg, LUT[L + 1] + ((g >> 19) & 31) * 0.8 - 12, b)), (cb = mix(cb, LUT[L + 2] + ((g >>> 24) & 31) * 0.8, b));\n      }\n      (F[o] = cr), (F[o + 1] = cg), (F[o + 2] = cb);\n    }\n  }\n  overlay(S, t);\n  // Exposed for the lava, as a night photograph of a lava lake is: what only\n  // glows faintly sinks back into the black of the crust.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const m = max(F[o], F[o + 1], F[o + 2]), k = m > 24 && m \u003c 60 ? (12 + (m - 24) * 1.333) / m : 1;\n    display.setPixel(i & 63, i >> 6, cl(F[o] * k, 0, 255) | 0, cl(F[o + 1] * k, 0, 255) | 0, cl(F[o + 2] * k, 0, 255) | 0);\n  }\n}\n\nfunction add(x, y, L, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], LUT[L + c], min(1, a));\n}\n\nfunction overlay(S, t) {\n  // Bubbles: the crust domes and cracks in a ring, then tears open and freezes over.\n  for (const b of S.bubs) {\n    const a = t - b.t0, R = b.r, E = R * 1.3 + 2, fnt = 2 * b.big;\n    for (let y = max(0, floor(b.y - E)); y \u003c min(H, b.y + E); y++)\n      for (let x = max(0, floor(b.x - E)); x \u003c min(W, b.x + E); x++) {\n        if (y \u003c ST[x] || y > SB[x]) continue;\n        const dx = x + 0.5 - b.x, dy = y + 0.5 - b.y, d = sqrt(dx * dx + dy * dy), o = (y * W + x) * 3;\n        let A, T;\n        if (a \u003c 0.6) {\n          // The crust domes up and cracks: a ring and spokes.\n          const p = a / 0.6, rr = R * (0.6 + 0.4 * p), sp = d \u003c rr ? sm(0.3, 0.08, abs(sin(Math.atan2(dy, dx) * 2.5 + b.r))) * sm(0.5, rr, d) : 0;\n          (A = p * max(sm(1, 0.2, abs(d - rr)), 0.8 * sp)), (T = 0.4 + 0.45 * p);\n        } else {\n          // Torn open: white-hot, churning while a fountain plays, then a skin\n          // closes over it in small plates, as over a foundered one.\n          const c = a - 0.6, hot = c \u003c fnt ? 1 : exp(-(c - fnt) / (0.4 + 0.2 * R)), sk = nz(x * 2.3 + b.r * 9, y * 2.3 + b.t0 * 7 + (c \u003c fnt ? c * 5 : 0));\n          const rr = R * (c \u003c fnt ? 0.6 : 1) * (0.7 + 0.8 * nz(x * 1.1 + b.r * 5, y * 1.1 + 40)), w = 0.3 + 3 * hot * hot * hot;\n          (A = sm(rr + 0.5, rr - 0.5, d) * sm(w + 0.5, w - 0.4, cells(dx + 40, dy + 40, 9 + floor(b.r * 97), 3.2, 0).e) * sm(0, 0.15, hot)), (T = 0.22 + 0.66 * hot - (0.2 * d) / R + 0.5 * (sk - 0.5) + (c \u003c fnt ? 0.25 * sm(R * 0.6, 0, d) : 0));\n          A = max(A, 0.9 * sm(1, 0.2, abs(d - R * 1.15)) * exp(-c / 0.35));\n        }\n        if (A > 0) {\n          const L = lut(T);\n          for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], LUT[L + k], min(1, A));\n        }\n      }\n  }\n  // Steam: soft puffs that swell and thin out, lit from the lake below.\n  SD.fill(0);\n  for (const p of S.puffs) {\n    const a = t - p.t0, r = p.r + 0.8 * a, al = sm(0, 0.5, a) * sm(4.5, 1.5, a);\n    const sx = p.top ? ST[cl(floor(p.x), 0, W - 1)] : SB[cl(floor(p.x), 0, W - 1)], yc = p.top ? sx - p.u : sx + p.u;\n    for (let y = max(0, floor(yc - r)); y \u003c min(H, yc + r + 1); y++) {\n      const u = p.top ? sx - y - 0.5 : y + 0.5 - sx, dy = (u - p.u) / 0.8;\n      if (abs(dy) > r) continue;\n      for (let x = max(0, floor(p.x - r)); x \u003c min(W, p.x + r); x++) {\n        const dx = x + 0.5 - p.x, q = 1 - (dx * dx + dy * dy) / (r * r);\n        if (q \u003c= 0) continue;\n        SD[y * W + x] += al * q * q * (0.45 + 0.55 * ex(max(0, u) / 7)) * (0.7 + 0.6 * nz(x * 1.7 + p.t0 * 13, y * 1.7));\n      }\n    }\n  }\n  const sl = min(1, (0.65 + 0.6 * S.spat) * (S.fe + 0.6 + 0.6 * S.heat));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (SD[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += STEAM[c] * sl * min(1, SD[i]) * (1 - F[o + c] / 255);\n  // Sparks: white-hot in the air, orange where they land, then dull red and gone.\n  const { PX, PY, PVX, PVY, PF, PT, np } = S;\n  for (let i = 0; i \u003c np; i++) {\n    if (PF[i] > 0) {\n      const L = lut(0.93 + 0.07 * sin(i));\n      add(PX[i], PY[i], L, 1), add(PX[i] - PVX[i] * 0.04, PY[i] - PVY[i] * 0.04, L, 0.5);\n    } else add(PX[i], PY[i], lut(PT[i] * 0.85), sm(0, 0.3, PT[i]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Heat","min":0,"max":1,"about":"At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower."},{"name":"Plates","min":0,"max":1,"about":"At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three."},{"name":"Spatter","min":0,"max":1,"about":"How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder."}],"start":[0,2,0,0.06],"measures":{"motion":0.2026,"detail":0.1176,"edges":0.3894,"complexity":2.2223,"coverage":0.271,"colour":0.2444,"drift":0.0498},"knobResponse":[0.229,0.0729,0.0899,0.0472]},{"slug":"lava-lamp","title":"Lava Lamp","family":"sim","round":3,"note":"전구 위 웅덩이에서 데워진 왁스가 목을 늘이며 떨어져 나와 방울로 떠오르고, 위에서 식으면 다시 가라앉아요. 파란 물속에서 식은 왁스는 주황, 뜨거운 왁스는 노랑이에요.","idea":"A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.","buttons":"K1 tap flares the bulb, and the lowest drop heats through and lets go.","code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-lava-lamp","type":"code","name":"lava-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot."},{"name":"Heat","min":0.3,"max":3,"about":"How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top."},{"name":"Wax","min":4,"max":10,"about":"How many drops are loose in the lamp; drops past the count sink into the pool and melt into it."},{"name":"Stretch","min":0,"max":1,"about":"At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it."}],"start":[0,2,4,0.06],"measures":{"motion":0.1138,"detail":0.0147,"edges":0.1844,"complexity":1.5488,"coverage":1,"colour":0.5657,"drift":0.068},"knobResponse":[0.5599,0.1621,0.1504,0.0519]},{"slug":"lichtenberg","title":"Lichtenberg","family":"fractal","round":26,"note":"소다물을 바른 단풍나무 판의 위아래 전극에서 깃털 잔가지를 단 프랙탈 나무가 파란 플라스마와 주황 불씨를 달고 서로를 향해 타 들어가고, 만나면 아크가 번쩍여요. K1 이 판의 나무를 바꾸고, 누르면 다음 판이에요.","idea":"High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.","buttons":"K1 tap cuts the power and slides the next board in now.","code":"// ===== Patternflow pattern =====\n// Title:   Lichtenberg\n// Family:  fractal\n// Idea:    High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after fractal wood burning and the dielectric breakdown model (Niemeyer, Pietronero and Wiesmann, 1984)\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1\n//\n// Knob 1: Wood. Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash.\n// Knob 2: Speed. At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower.\n// Knob 3: Pull. The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders.\n// Knob 4: Lead. Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway.\n// Buttons: K1 tap cuts the power and slides the next board in now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, exp, sqrt, pow, sin, abs, log2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The board at rest fills columns X0..X1 and rows Y0..Y1; the electrodes\n// touch it at (TX, TY) and (BX, BY).\nconst X0 = 2, X1 = 61, Y0 = 3, Y1 = 124, TX = 32, TY = 9, BX = 31, BY = 118;\n// A board slides down this far for the next, with a few rows of rig between.\nconst SL = 131;\n// Seconds at Speed 2: wet board before the power, growth until the trees\n// meet, the arc, the embers dying, the slide.\nconst SOAK = 1.0, TG = 4.8, ARC = 0.5, COOL = 3, SLIDE = 1.6;\n// Cells each tree adds a second at the front when it keeps pace with its\n// schedule, and fringe twigs a second for every cell of its channels.\nconst RATE = 200, TWIG = 0.14;\n// A cell that joined the tree this recently is still plasma.\nconst TIP = 0.16;\nconst DIRS = [[1, 0], [1, 1], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1], [1, -1]];\n// How readily a channel, a twig and a twig's twig sprout a fringe twig,\n// and how far each new generation runs: three or four LEDs, two, then one.\nconst GEN = [1, 0.4, 0.25], LEN = [2, 1, 0];\n// A channel feeding this many cells beyond it burns a groove one, two,\n// three and four steps wider, with a brown scorch round it: the trunks\n// near the electrodes run thick and dark.\nconst WIDE = [12, 50, 160, 500];\n// How dark the curl's bands run, in grain darkness.\nconst CURL = 0.45;\nconst N4 = [-1, 1, -W, W], ND = [-W - 1, -W + 1, W - 1, W + 1], LUT = [0, 1, 16];\n\n// Board, grain, knot and char colours for maple, birch, walnut and\n// black-stained oak, where the burn leaves grey ash.\nconst WOODS = [\n  [[228, 196, 150], [160, 110, 66], [128, 76, 40], [30, 19, 14]],\n  [[244, 232, 204], [210, 186, 142], [120, 90, 58], [30, 19, 14]],\n  [[140, 90, 58], [88, 54, 34], [50, 30, 18], [26, 16, 12]],\n  [[50, 44, 46], [30, 26, 28], [18, 14, 14], [92, 86, 80]],\n];\nconst SMOKE = [196, 190, 184], RIG = [16, 17, 22];\n\n// One board's wood: grain darkness (above 1 in a knot), how wet the soda\n// wash left each spot, and a per-channel speckle.\nfunction wood() {\n  const g = F32(N), wet = F32(N), nz = new Int8Array(N * 3);\n  const ox = rnd() * 300, oy = rnd() * 300, per = 2.6 + rnd() * 0.6, tilt = (rnd() - 0.5) * 0.06;\n  const knots = [];\n  for (let k = 0, nk = 1 + floor(rnd() * 3); k \u003c nk; k++)\n    knots.push([X0 + 9 + rnd() * (X1 - X0 - 18), Y0 + 14 + rnd() * (Y1 - Y0 - 28), 1.6 + rnd() * 1.4]);\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let u = x + tilt * y + 9 * (vn(x / 26 + ox, y / 40 + oy) - 0.5) + 2 * (vn(x / 7 + oy, y / 11 + ox) - 0.5), kd = 0;\n      for (const [kx, ky, kr] of knots) {\n        const dx = x - kx, dy = (y - ky) / 2.2, d2 = dx * dx + dy * dy;\n        // The grain bends round a knot and crowds in close to it.\n        u += (kr * kr * 3 * dx) / (d2 + kr * kr);\n        kd = max(kd, 1 - sqrt(d2) / kr);\n      }\n      // Thin dark latewood lines, a pore streak here and there, and the curl\n      // of figured maple across the grain, a band every two rows or so.\n      const c = 0.5 + 0.5 * Math.cos((2 * Math.PI * u) / per);\n      let v = c ** 4 * (0.8 + 0.6 * vn(x / 5 + ox, y / 30)) + 0.22 * (hash(x, floor(y / 4) + 7) - 0.5);\n      v += CURL * (0.5 + 0.5 * Math.sin((2 * Math.PI * (y + 1.5 * vn(x / 6 + oy, y / 20))) / 2.3));\n      if (kd > 0) v = 1 + kd * 0.6;\n      g[i] = cl(v, 0, 1.6);\n      wet[i] = 0.5 + 0.5 * vn(x / 9 + oy, y / 9 + ox);\n      for (let ch = 0; ch \u003c 3; ch++) nz[i * 3 + ch] = round((rnd() - 0.5) * 4);\n    }\n  return { g, wet, nz, col: F32(N * 3), at: -1 };\n}\n\n// A board's colours for this K1: grain, knots, lamp, bevels and speckle.\nfunction paint(B, wood) {\n  const wv = wood * 3, wi = min(2, floor(wv)), wf = wv - wi, WC = [];\n  for (let j = 0; j \u003c 4; j++) WC.push([0, 1, 2].map((c) => WOODS[wi][j][c] + (WOODS[wi + 1][j][c] - WOODS[wi][j][c]) * wf));\n  B.ch = WC[3];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x, gv = B.g[i], lo = gv \u003c= 1 ? 0 : 1, t = gv \u003c= 1 ? gv : (gv - 1) / 0.6;\n      let lf = 1.02 - 0.12 * (y / H);\n      if (x === X0 || y === Y0) lf *= 1.08;\n      if (x === X1 || y === Y1) lf *= 0.7;\n      for (let c = 0; c \u003c 3; c++) B.col[i * 3 + c] = (WC[lo][c] + (WC[lo + 1][c] - WC[lo][c]) * t) * lf + B.nz[i * 3 + c];\n    }\n  B.at = wood;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    time: 0, ph: 0, pt: 0, tau: 0, power: 0, wood: 0, eta: 1, lead: 0, ym: 64,\n    own: new Uint8Array(N), twg: new Uint8Array(N), par: new Int32Array(N), cnt: new Int32Array(N), born: F32(N),\n    phi: F32(N), phi0: F32(N), chr: F32(N), sco: F32(N), ht: F32(N),\n    cand: [new Int32Array(N), new Int32Array(N)], cw: [F32(N), F32(N)], nc: [0, 0], acc: [0, 0], tac: [0, 0], tw: [], ntw: 0, cells: [new Int32Array(N), new Int32Array(N)], ncell: [1, 1], nsk: [1, 1],\n    fr: [TY, BY], meet: -1, meetQ: -1, path: new Int32Array(N), np: 0,\n    pl: F32(N), sm: F32(N), puffs: [], ring: new Int32Array(512), nr: 0, hot: new Int32Array(32), nh: 0, flash: 0,\n    wa: wood(), wb: wood(),\n  });\n  for (let k = 0; k \u003c 256; k++) P.tw.push({ left: 0 }), k \u003c 70 && P.puffs.push({ on: 0 });\n  // The field round the two bare electrodes, solved once from a straight ramp.\n  for (let y = Y0; y \u003c= Y1; y++) for (let x = X0; x \u003c= X1; x++) P.phi[y * W + x] = cl((y - TY) / (BY - TY), 0, 1);\n  (P.own[TY * W + TX] = 1), (P.phi[TY * W + TX] = 0), (P.own[BY * W + BX] = 2), (P.phi[BY * W + BX] = 1);\n  relax(P, 400);\n  P.phi0.set(P.phi);\n  fresh(P);\n}\n\n// A clean board under the electrodes, wet and unburnt.\nfunction fresh(P) {\n  for (const a of [P.own, P.twg, P.cnt, P.chr, P.sco, P.ht]) a.fill(0);\n  P.par.fill(-1);\n  P.born.fill(-9);\n  P.phi.set(P.phi0);\n  for (const t of P.tw) t.left = 0;\n  const t = TY * W + TX, b = BY * W + BX;\n  (P.own[t] = P.cnt[t] = P.cnt[b] = 1), (P.own[b] = 2), (P.cells[0][0] = t), (P.cells[1][0] = b);\n  Object.assign(P, { ncell: [1, 1], nsk: [1, 1], fr: [TY, BY], acc: [0, 0], tac: [0, 0], meet: -1, meetQ: -1, np: 0, tau: 0 });\n}\n\n// Red-black over-relaxation of Laplace's equation on the board: the top tree\n// held at 0, the bottom one at 1, the board's edges insulating.\nfunction relax(P, sweeps) {\n  const { own, phi } = P;\n  for (let s = 0; s \u003c sweeps; s++)\n    for (let c = 0; c \u003c 2; c++)\n      for (let y = Y0; y \u003c= Y1; y++) {\n        const r = y * W;\n        for (let x = X0 + ((y + c) & 1); x \u003c= X1; x += 2) {\n          const i = r + x;\n          if (own[i]) continue;\n          const v = phi[i];\n          const a = x > X0 ? phi[i - 1] : v, b = x \u003c X1 ? phi[i + 1] : v, u = y > Y0 ? phi[i - W] : v, d = y \u003c Y1 ? phi[i + W] : v;\n          phi[i] = v + 1.85 * ((a + b + u + d) * 0.25 - v);\n        }\n      }\n}\n\n// A wood cell beside one cell of a tree, or touching one at a corner, may\n// join it, with a chance that goes as the field there to the power eta.\n// Nothing off the board ever joins, so neighbours need no bounds checks.\nfunction scan(P, eta) {\n  const { own, phi, cand, cw } = P, n = [0, 0], t = [0, 0];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      if (own[i]) continue;\n      // Neighbours of each tree counted in one number, four bits a tree.\n      const s4 = LUT[own[i - 1]] + LUT[own[i + 1]] + LUT[own[i - W]] + LUT[own[i + W]];\n      const s8 = LUT[own[i - W - 1]] + LUT[own[i - W + 1]] + LUT[own[i + W - 1]] + LUT[own[i + W + 1]];\n      for (let k = 0; k \u003c 2; k++) {\n        const a = (s4 >> (4 * k)) & 15;\n        if (a > 1 || (!a && ((s8 >> (4 * k)) & 15) !== 1)) continue;\n        t[k] += pow(max(k ? 1 - phi[i] : phi[i], 1e-5), eta);\n        cand[k][n[k]] = i;\n        cw[k][n[k]++] = t[k];\n      }\n    }\n  P.nc = n;\n}\n\n// A cell joins tree k only if branches stay one LED wide: nothing of the\n// tree may touch it but the cell it grows from and that cell's neighbours.\n// Touching the other tree is the meeting.\nfunction join(P, c, k, tw = 0) {\n  const { own } = P;\n  if (own[c]) return false;\n  let p = -1, m = 0;\n  for (const o of N4) if (own[c + o] === k) (p = c + o), m++;\n  if (m > 1) return false;\n  if (p \u003c 0) for (const o of ND) if (own[c + o] === k && p \u003c 0) p = c + o;\n  if (p \u003c 0) return false;\n  const px = p & 63, py = p >> 6;\n  let other = -1;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const q = c + dy * W + dx;\n      if (q === c || q === p || !own[q]) continue;\n      if (own[q] !== k) {\n        // The trees may not close before their time.\n        if (P.tau \u003c TG - 0.25) return false;\n        other = q;\n      } else if (abs((q & 63) - px) > 1 || abs((q >> 6) - py) > 1) return false;\n    }\n  add(P, c, p, k, tw);\n  if (other >= 0) (P.meet = c), (P.meetQ = other);\n  return true;\n}\n\nfunction add(P, c, p, k, tw) {\n  const { cnt, par } = P, y = c >> 6, x = c & 63;\n  (P.own[c] = k), (P.twg[c] = tw), (par[c] = p), (cnt[c] = P.ht[c] = P.chr[c] = 1), (P.born[c] = P.time), (P.phi[c] = k - 1);\n  P.fr[k - 1] = k === 1 ? max(P.fr[0], y) : min(P.fr[1], y);\n  scorch(P, x, y, 1, 0.04);\n  P.ring[P.nr++ & 511] = c;\n  P.cells[k - 1][P.ncell[k - 1]++] = c;\n  if (!tw) P.nsk[k - 1]++;\n  // The current that feeds every cell beyond reaches it through all the\n  // cells back to the electrode, and the busiest burn into wide grooves.\n  for (let a = p; a >= 0; a = par[a]) {\n    const w = WIDE.indexOf(++cnt[a]);\n    if (w >= 0) {\n      const ax = a & 63, ay = a >> 6, r = 1 + 0.6 * w;\n      scorch(P, ax, ay, r, w ? 0.9 : 0.7, 1);\n      scorch(P, ax, ay, r + 2, 0.35);\n    }\n  }\n}\n\n// With burn set, char a groove of radius r round (x, y), still warm;\n// without, brown the wood within r by v, less towards the edge.\nfunction scorch(P, x, y, r, v, burn) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy, q = qy * W + qx;\n      if (d2 > r * r || qx \u003c X0 || qx > X1 || qy \u003c Y0 || qy > Y1) continue;\n      if (!burn) P.sco[q] = min(1, P.sco[q] + v * (1 - d2 / (r * r + 1)));\n      else (P.chr[q] = max(P.chr[q], v)), (P.ht[q] = max(P.ht[q], 0.5 * v));\n    }\n}\n\nfunction grow(P, d) {\n  relax(P, 3);\n  // Each tree has a front it should have reached by now, eased in so the\n  // growth speeds up as the trees close (a hard pull sends leaders racing\n  // out at once), and a cell budget that rises steeply when it lags.\n  const s = min(1, P.tau / TG) ** (1.35 - 0.15 * P.eta), late = max(0, P.tau - TG);\n  const lag = [TY + (P.ym - TY) * s - P.fr[0], P.fr[1] - (BY - (BY - P.ym) * s)];\n  // The leading electrode's tree takes the larger share of the front's\n  // cells; fringe twigs sprout as fast as there is channel to carry them,\n  // fewer the harder the pull.\n  for (let k = 0; k \u003c 2; k++) {\n    const f = exp(cl(lag[k] / 6, -2, 2.5)), sh = 1 + (k ? 0.85 : -0.85) * P.lead;\n    P.acc[k] += d * RATE * sh * f * (1 + 4 * late);\n    P.tac[k] += d * TWIG * P.nsk[k] * ((4.5 - P.eta) / 3.5) ** 2;\n  }\n  twigs(P);\n  if (P.acc[0] \u003c 1 && P.acc[1] \u003c 1 && P.tac[0] \u003c 1 && P.tac[1] \u003c 1) return;\n  scan(P, P.eta + 2 * late);\n  for (let k = 0; k \u003c 2; k++) {\n    const n = min(120, floor(P.acc[k])), C = P.cand[k], S = P.cw[k], m = P.nc[k];\n    P.acc[k] -= n;\n    if (!m) continue;\n    const tot = S[m - 1];\n    for (let t = 0, tries = 0; t \u003c n && tries \u003c 3 * n; tries++) {\n      const r = rnd() * tot;\n      let lo = 0;\n      for (let hi = m - 1, mid; lo \u003c hi; ) (mid = (lo + hi) >> 1), S[mid] \u003c r ? (lo = mid + 1) : (hi = mid);\n      if (join(P, C[lo], k + 1)) t++;\n      if (P.meet >= 0) return;\n    }\n  }\n  // A fringe twig sprouts off a burnt channel, an eighth of a turn off it\n  // or now and then a quarter, and runs a few LEDs, bending as it goes. A\n  // twig sprouts shorter twigs of its own, three generations deep.\n  for (let tries = 0, k = 0; tries \u003c 300; tries++) {\n    if (P.tac[k] \u003c 1) k = 1 - k;\n    if (P.tac[k] \u003c 1) break;\n    const a = P.cells[k][floor(rnd() * P.ncell[k])], g = P.twg[a];\n    if (P.par[a] \u003c 0 || g > 2 || rnd() > GEN[g]) continue;\n    // The branch's way here, read over four cells so one step cannot throw it.\n    let b = a;\n    for (let n = 0; n \u003c 4 && P.par[b] >= 0; n++) b = P.par[b];\n    const j = round((Math.atan2((a >> 6) - (b >> 6), (a & 63) - (b & 63)) * 4) / Math.PI) & 7;\n    const dir = (j + (rnd() \u003c 0.5 ? 1 : 7) * (rnd() \u003c 0.85 ? 1 : 2)) & 7;\n    const x = (a & 63) + DIRS[dir][0], y = (a >> 6) + DIRS[dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, k + 1, g + 1)) continue;\n    P.tac[k]--;\n    if (P.meet >= 0) return;\n    Object.assign(P.tw[P.ntw++ & 255], { c, d0: dir, dir, k: k + 1, g: g + 1, left: LEN[g] + floor(rnd() * LEN[g]) });\n  }\n  P.tac = P.tac.map((v) => min(v, 4));\n}\n\nfunction twigs(P) {\n  for (const t of P.tw) {\n    if (t.left \u003c= 0) continue;\n    t.left--;\n    // A twig wanders an eighth of a turn, never further off its way.\n    if (rnd() \u003c 0.25) {\n      const dir = (t.dir + (rnd() \u003c 0.5 ? 1 : 7)) & 7, off = (dir - t.d0 + 8) & 7;\n      if (off \u003c= 1 || off >= 7) t.dir = dir;\n    }\n    const x = (t.c & 63) + DIRS[t.dir][0], y = (t.c >> 6) + DIRS[t.dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, t.k, t.g)) {\n      t.left = 0;\n      continue;\n    }\n    t.c = c;\n    if (P.meet >= 0) return;\n  }\n}\n\n// The joined path, from the top electrode to the bottom one.\nfunction trace(P) {\n  const top = P.own[P.meet] === 1 ? P.meet : P.meetQ, bot = top === P.meet ? P.meetQ : P.meet;\n  let n = 0;\n  for (let a = top; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.path.subarray(0, n).reverse();\n  for (let a = bot; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.np = n;\n  for (let j = 0; j \u003c n; j++) {\n    const a = P.path[j], x = a & 63, y = a >> 6;\n    scorch(P, x, y, 2, 1, 1);\n    scorch(P, x, y, 4, 0.5);\n    P.ht[a] = 1;\n  }\n}\n\nfunction go(P, ph) {\n  (P.ph = ph), (P.pt = 0);\n  if (ph === 1) P.power = 1;\n  if (ph === 2) trace(P), (P.flash = 1);\n  if (ph > 2) P.power = 0;\n  if (ph === 0) ([P.wa, P.wb] = [P.wb, P.wa]), fresh(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  (P.wood = cl(k[0], 0, 1)), (P.eta = cl(k[2], 1, 4)), (P.lead = cl(k[3], -1, 1));\n  P.ym = (TY + BY) / 2 - 44 * P.lead;\n  (P.time += d), (P.pt += d);\n  if (input.btnPressed && input.btnPressed[0] && P.ph > 0 && P.ph \u003c 4) go(P, 4);\n  const ph = P.ph;\n  if (ph === 0 && P.pt >= SOAK) go(P, 1);\n  else if (ph === 1) {\n    P.tau += d;\n    grow(P, d);\n    // A board the trees cannot cross trips the breaker without an arc.\n    if (P.meet >= 0) go(P, 2);\n    else if (P.tau > TG + 3) go(P, 3);\n  } else if (ph === 2) {\n    // The arc keeps its path white hot.\n    for (let j = 0; j \u003c P.np; j++) P.ht[P.path[j]] = 1;\n    if (P.pt >= ARC) go(P, 3);\n  } else if (ph === 3 && P.pt >= COOL) go(P, 4);\n  else if (ph === 4 && P.pt >= SLIDE) go(P, 0), (P.wb = wood());\n  P.flash = max(0, P.flash - d * 9);\n  heat(P, d), smoke(P, d);\n}\n\n// Embers: fresh channels glow and cool to char, while the power is on the\n// busy trunks stay hot, and anything hot browns the wood round it.\nfunction heat(P, d) {\n  const { ht, own, cnt, sco, hot } = P, dec = exp(-d / (P.power ? 0.3 : 0.9));\n  let sum = 0, nh = 0;\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let h = ht[i];\n      if (h \u003c 0.004 && !own[i]) continue;\n      h *= dec;\n      if (P.power && own[i] && cnt[i] > 24) h = max(h, min(0.6, 0.12 * (log2(cnt[i]) - 3.5)) * (0.85 + 0.15 * rnd()));\n      ht[i] = h;\n      if (h > 0.2 && (cnt[i] > 12 || !own[i])) {\n        sum += h;\n        for (const o of N4) sco[i + o] = min(1, sco[i + o] + d * h * 0.3);\n        if (nh \u003c 32) hot[nh++] = i;\n        else if (rnd() \u003c 0.05) hot[floor(rnd() * 32)] = i;\n      }\n    }\n  P.nh = nh;\n  P.heatSum = sum;\n}\n\n// Smoke puffs rise off the hot channels, spread and thin out.\nfunction smoke(P, d) {\n  let want = (P.ph === 4 ? 0 : P.heatSum) * d * 0.22;\n  for (const s of P.puffs) {\n    if (s.on) {\n      if ((s.age += d) > s.life) {\n        s.on = 0;\n        continue;\n      }\n      s.x += (s.vx + 3 * sin(s.age * 2.3 + s.y * 0.1)) * d;\n      s.y += s.vy * d;\n      s.r += d * 1.6;\n      continue;\n    }\n    if (want > rnd() && P.nh) {\n      const i = P.hot[floor(rnd() * P.nh)];\n      Object.assign(s, { on: 1, x: i & 63, y: i >> 6, vx: (rnd() - 0.5) * 4, vy: -8 - rnd() * 8, r: 1, a: 0.16 + rnd() * 0.16, age: 0, life: 2.5 + rnd() * 2 });\n      want -= 1;\n    }\n  }\n}\n\n// Plasma at (x, y): how strongly it covers each LED round it.\nfunction plasma(L, x, y, r, v) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy;\n      if (qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c H && d2 \u003c= r * r) L[qy * W + qx] += v / (1 + d2 * 2.5);\n    }\n}\n\n// Ember colour by heat: dull red, orange, then yellow-white.\nconst EK = [0, 0.25, 0.6, 1], EC = [[0, 0, 0], [175, 35, 6], [255, 110, 20], [255, 220, 140]];\nfunction ember(h, out) {\n  const j = h \u003c 0.25 ? 0 : h \u003c 0.6 ? 1 : 2, t = (min(h, 1) - EK[j]) / (EK[j + 1] - EK[j]);\n  for (let c = 0; c \u003c 3; c++) out[c] = EC[j][c] + (EC[j + 1][c] - EC[j][c]) * t;\n}\n\nconst EM = [0, 0, 0];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { own, chr, sco, ht, born, pl, sm } = P;\n  pl.fill(0);\n  sm.fill(0);\n  if (P.wa.at !== P.wood) paint(P.wa, P.wood);\n  if (P.ph === 4 && P.wb.at !== P.wood) paint(P.wb, P.wood);\n  const off = P.ph === 4 ? SL * (1 - (1 + Math.cos((Math.PI * min(1, P.pt / SLIDE)))) / 2) : 0, oy = round(off);\n\n  // Plasma at the tips, and short streamers crackling ahead of them.\n  if (P.power) {\n    for (let j = 0; j \u003c 512 && j \u003c P.nr; j++) {\n      const c = P.ring[(P.nr - 1 - j) & 511], age = P.time - born[c];\n      if (age > TIP) break;\n      // Twigs behind the front only flash orange.\n      if (P.twg[c] && (own[c] === 1 ? (c >> 6) \u003c P.fr[0] - 14 : (c >> 6) > P.fr[1] + 14)) continue;\n      const f = (1 - age / TIP) * (0.5 + 0.5 * rnd()), x = c & 63, y = (c >> 6) + oy;\n      plasma(pl, x, y, 1.5, f);\n      if (rnd() \u003c 0.2)\n        for (let st = 0, sx = x, sy = y, len = 2 + floor(rnd() * 5); st \u003c len; st++) {\n          if (rnd() \u003c 0.6) sy += own[c] === 1 ? 1 : -1;\n          else sx += rnd() \u003c 0.5 ? -1 : 1;\n          if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n          pl[sy * W + sx] += 0.9 - st * 0.12;\n        }\n    }\n    // A blue corona at each electrode.\n    const z = 0.4 + 0.4 * rnd();\n    plasma(pl, TX, TY + oy, 2.5, z);\n    plasma(pl, BX, BY + oy, 2.5, z);\n  }\n  // The arc down the joined path, flickering sideways.\n  if (P.ph === 2) {\n    const f = (1 - 0.6 * (P.pt / ARC)) * (0.7 + 0.3 * rnd()), seed = rnd() * 99;\n    for (let j = 0; j \u003c P.np; j++) {\n      const a = P.path[j], x = (a & 63) + round(1.6 * (vn(j * 0.3, seed) - 0.5)), y = a >> 6;\n      if (j % 2 === 0) plasma(pl, x, y, 3.5, 0.35 * f);\n      pl[y * W + x] += 3 * f;\n    }\n  }\n  for (const s of P.puffs) {\n    if (!s.on) continue;\n    // A wisp, twice as tall as it is wide.\n    const a = s.a * sin((Math.PI * s.age) / s.life), R = Math.ceil(s.r), R2 = 2 * R;\n    for (let dy = -R2; dy \u003c= R2; dy++)\n      for (let dx = -R; dx \u003c= R; dx++) {\n        const qx = round(s.x) + dx, qy = round(s.y) + dy, d2 = (dx * dx + dy * dy * 0.25) / (s.r * s.r);\n        if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H || d2 >= 1) continue;\n        sm[qy * W + qx] += a * (1 - d2) * (1 - d2);\n      }\n  }\n\n  const fl = P.flash * 70, CH = P.wa.ch, dry = P.ph > 1 ? 1 : P.ph ? P.tau / (TG + 0.5) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r, g, b;\n      // Which board, if any, is under this LED.\n      let yb = y - oy, B = P.wa, burnt = 1;\n      if (P.ph === 4 && yb \u003c Y0) (yb += SL), (B = P.wb), (burnt = 0);\n      if (x >= X0 && x \u003c= X1 && yb >= Y0 && yb \u003c= Y1) {\n        const i = yb * W + x, C = B.col;\n        // The wet wash glosses the wood; the current steams it off the whole\n        // board and the burn dries it at once.\n        const s = burnt ? sco[i] : 0, lf = 0.86 + 0.28 * B.wet[i] * max(0, 1 - 3 * s - (burnt ? dry : 0));\n        (r = C[i * 3] * lf), (g = C[i * 3 + 1] * lf), (b = C[i * 3 + 2] * lf);\n        if (burnt) {\n          if (s > 0) (r *= 1 - 0.5 * s), (g *= 1 - 0.66 * s), (b *= 1 - 0.8 * s);\n          const c = chr[i];\n          if (c > 0) (r += (CH[0] - r) * c), (g += (CH[1] - g) * c), (b += (CH[2] - b) * c);\n          const h = ht[i];\n          if (h > 0.02 && c > 0.3) {\n            // Thick char glows only along its rim.\n            const rim = (x > X0 && chr[i - 1] \u003c 0.5) || (x \u003c X1 && chr[i + 1] \u003c 0.5) || chr[i - W] \u003c 0.5 || chr[i + W] \u003c 0.5;\n            ember(h * (rim ? 1 : 0.45), EM);\n            (r = max(r, EM[0])), (g = max(g, EM[1])), (b = max(b, EM[2]));\n          }\n        }\n        (r += fl), (g += fl), (b += fl * 1.2);\n      } else {\n        // The dark rig behind, with the board's shadow to its right.\n        const sh = x > X1 ? 0.55 : 1, q = hash(x, y);\n        (r = (RIG[0] + 6 * q) * sh), (g = (RIG[1] + 6 * hash(y, x)) * sh), (b = (RIG[2] + 6 * q) * sh);\n        if (x === 0 || x === 63) (r = 64 + 10 * q), (g = 66 + 10 * q), (b = 74 + 10 * q);\n      }\n      const m = min(0.7, sm[p]);\n      (r += (SMOKE[0] - r) * m), (g += (SMOKE[1] - g) * m), (b += (SMOKE[2] - b) * m);\n      // Plasma: deep blue where it is thin, blue-white where it is thick.\n      const t = pl[p];\n      if (t > 0.01) {\n        const u = min(1, t), w = min(1, t / 2.5);\n        (r += (90 + 160 * w - r) * u), (g += (120 + 130 * w - g) * u), (b += (255 - b) * u);\n      }\n      display.setPixel(x, y, cl(r, 0, 255) | 0, cl(g, 0, 255) | 0, cl(b, 0, 255) | 0);\n    }\n  electrodes(display, P);\n}\n\n// Brass clamps with their tips on the board, the red lead in from the top\n// and the black one from the bottom.\nfunction electrodes(display, P) {\n  for (let e = 0; e \u003c 2; e++) {\n    const cx = e ? BX : TX, s = e ? -1 : 1, y0 = e ? H - 1 : 0, lead = e ? [[96, 98, 110], [36, 36, 42]] : [[236, 84, 64], [172, 28, 22]];\n    for (let j = 0; j \u003c= 8; j++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const lit = j === 4 || dx === -3, dark = j === 7 || dx === 3;\n        let c = null;\n        if (j \u003c= 3 && abs(dx) \u003c= 1) c = lead[dx \u003c 0 ? 0 : 1];\n        else if (j >= 4 && j \u003c= 7) c = lit ? [236, 200, 110] : dark ? [130, 96, 40] : [196, 156, 70];\n        else if (j === 8 && !dx) c = P.power ? [210, 220, 255] : [240, 214, 130];\n        if (c) display.setPixel(cx + dx, y0 + s * j, c[0], c[1], c[2]);\n      }\n  }\n}\n","layer":{"id":"layer-lichtenberg","type":"code","name":"lichtenberg","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lichtenberg\n// Family:  fractal\n// Idea:    High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after fractal wood burning and the dielectric breakdown model (Niemeyer, Pietronero and Wiesmann, 1984)\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1\n//\n// Knob 1: Wood. Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash.\n// Knob 2: Speed. At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower.\n// Knob 3: Pull. The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders.\n// Knob 4: Lead. Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway.\n// Buttons: K1 tap cuts the power and slides the next board in now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, exp, sqrt, pow, sin, abs, log2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The board at rest fills columns X0..X1 and rows Y0..Y1; the electrodes\n// touch it at (TX, TY) and (BX, BY).\nconst X0 = 2, X1 = 61, Y0 = 3, Y1 = 124, TX = 32, TY = 9, BX = 31, BY = 118;\n// A board slides down this far for the next, with a few rows of rig between.\nconst SL = 131;\n// Seconds at Speed 2: wet board before the power, growth until the trees\n// meet, the arc, the embers dying, the slide.\nconst SOAK = 1.0, TG = 4.8, ARC = 0.5, COOL = 3, SLIDE = 1.6;\n// Cells each tree adds a second at the front when it keeps pace with its\n// schedule, and fringe twigs a second for every cell of its channels.\nconst RATE = 200, TWIG = 0.14;\n// A cell that joined the tree this recently is still plasma.\nconst TIP = 0.16;\nconst DIRS = [[1, 0], [1, 1], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1], [1, -1]];\n// How readily a channel, a twig and a twig's twig sprout a fringe twig,\n// and how far each new generation runs: three or four LEDs, two, then one.\nconst GEN = [1, 0.4, 0.25], LEN = [2, 1, 0];\n// A channel feeding this many cells beyond it burns a groove one, two,\n// three and four steps wider, with a brown scorch round it: the trunks\n// near the electrodes run thick and dark.\nconst WIDE = [12, 50, 160, 500];\n// How dark the curl's bands run, in grain darkness.\nconst CURL = 0.45;\nconst N4 = [-1, 1, -W, W], ND = [-W - 1, -W + 1, W - 1, W + 1], LUT = [0, 1, 16];\n\n// Board, grain, knot and char colours for maple, birch, walnut and\n// black-stained oak, where the burn leaves grey ash.\nconst WOODS = [\n  [[228, 196, 150], [160, 110, 66], [128, 76, 40], [30, 19, 14]],\n  [[244, 232, 204], [210, 186, 142], [120, 90, 58], [30, 19, 14]],\n  [[140, 90, 58], [88, 54, 34], [50, 30, 18], [26, 16, 12]],\n  [[50, 44, 46], [30, 26, 28], [18, 14, 14], [92, 86, 80]],\n];\nconst SMOKE = [196, 190, 184], RIG = [16, 17, 22];\n\n// One board's wood: grain darkness (above 1 in a knot), how wet the soda\n// wash left each spot, and a per-channel speckle.\nfunction wood() {\n  const g = F32(N), wet = F32(N), nz = new Int8Array(N * 3);\n  const ox = rnd() * 300, oy = rnd() * 300, per = 2.6 + rnd() * 0.6, tilt = (rnd() - 0.5) * 0.06;\n  const knots = [];\n  for (let k = 0, nk = 1 + floor(rnd() * 3); k \u003c nk; k++)\n    knots.push([X0 + 9 + rnd() * (X1 - X0 - 18), Y0 + 14 + rnd() * (Y1 - Y0 - 28), 1.6 + rnd() * 1.4]);\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let u = x + tilt * y + 9 * (vn(x / 26 + ox, y / 40 + oy) - 0.5) + 2 * (vn(x / 7 + oy, y / 11 + ox) - 0.5), kd = 0;\n      for (const [kx, ky, kr] of knots) {\n        const dx = x - kx, dy = (y - ky) / 2.2, d2 = dx * dx + dy * dy;\n        // The grain bends round a knot and crowds in close to it.\n        u += (kr * kr * 3 * dx) / (d2 + kr * kr);\n        kd = max(kd, 1 - sqrt(d2) / kr);\n      }\n      // Thin dark latewood lines, a pore streak here and there, and the curl\n      // of figured maple across the grain, a band every two rows or so.\n      const c = 0.5 + 0.5 * Math.cos((2 * Math.PI * u) / per);\n      let v = c ** 4 * (0.8 + 0.6 * vn(x / 5 + ox, y / 30)) + 0.22 * (hash(x, floor(y / 4) + 7) - 0.5);\n      v += CURL * (0.5 + 0.5 * Math.sin((2 * Math.PI * (y + 1.5 * vn(x / 6 + oy, y / 20))) / 2.3));\n      if (kd > 0) v = 1 + kd * 0.6;\n      g[i] = cl(v, 0, 1.6);\n      wet[i] = 0.5 + 0.5 * vn(x / 9 + oy, y / 9 + ox);\n      for (let ch = 0; ch \u003c 3; ch++) nz[i * 3 + ch] = round((rnd() - 0.5) * 4);\n    }\n  return { g, wet, nz, col: F32(N * 3), at: -1 };\n}\n\n// A board's colours for this K1: grain, knots, lamp, bevels and speckle.\nfunction paint(B, wood) {\n  const wv = wood * 3, wi = min(2, floor(wv)), wf = wv - wi, WC = [];\n  for (let j = 0; j \u003c 4; j++) WC.push([0, 1, 2].map((c) => WOODS[wi][j][c] + (WOODS[wi + 1][j][c] - WOODS[wi][j][c]) * wf));\n  B.ch = WC[3];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x, gv = B.g[i], lo = gv \u003c= 1 ? 0 : 1, t = gv \u003c= 1 ? gv : (gv - 1) / 0.6;\n      let lf = 1.02 - 0.12 * (y / H);\n      if (x === X0 || y === Y0) lf *= 1.08;\n      if (x === X1 || y === Y1) lf *= 0.7;\n      for (let c = 0; c \u003c 3; c++) B.col[i * 3 + c] = (WC[lo][c] + (WC[lo + 1][c] - WC[lo][c]) * t) * lf + B.nz[i * 3 + c];\n    }\n  B.at = wood;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    time: 0, ph: 0, pt: 0, tau: 0, power: 0, wood: 0, eta: 1, lead: 0, ym: 64,\n    own: new Uint8Array(N), twg: new Uint8Array(N), par: new Int32Array(N), cnt: new Int32Array(N), born: F32(N),\n    phi: F32(N), phi0: F32(N), chr: F32(N), sco: F32(N), ht: F32(N),\n    cand: [new Int32Array(N), new Int32Array(N)], cw: [F32(N), F32(N)], nc: [0, 0], acc: [0, 0], tac: [0, 0], tw: [], ntw: 0, cells: [new Int32Array(N), new Int32Array(N)], ncell: [1, 1], nsk: [1, 1],\n    fr: [TY, BY], meet: -1, meetQ: -1, path: new Int32Array(N), np: 0,\n    pl: F32(N), sm: F32(N), puffs: [], ring: new Int32Array(512), nr: 0, hot: new Int32Array(32), nh: 0, flash: 0,\n    wa: wood(), wb: wood(),\n  });\n  for (let k = 0; k \u003c 256; k++) P.tw.push({ left: 0 }), k \u003c 70 && P.puffs.push({ on: 0 });\n  // The field round the two bare electrodes, solved once from a straight ramp.\n  for (let y = Y0; y \u003c= Y1; y++) for (let x = X0; x \u003c= X1; x++) P.phi[y * W + x] = cl((y - TY) / (BY - TY), 0, 1);\n  (P.own[TY * W + TX] = 1), (P.phi[TY * W + TX] = 0), (P.own[BY * W + BX] = 2), (P.phi[BY * W + BX] = 1);\n  relax(P, 400);\n  P.phi0.set(P.phi);\n  fresh(P);\n}\n\n// A clean board under the electrodes, wet and unburnt.\nfunction fresh(P) {\n  for (const a of [P.own, P.twg, P.cnt, P.chr, P.sco, P.ht]) a.fill(0);\n  P.par.fill(-1);\n  P.born.fill(-9);\n  P.phi.set(P.phi0);\n  for (const t of P.tw) t.left = 0;\n  const t = TY * W + TX, b = BY * W + BX;\n  (P.own[t] = P.cnt[t] = P.cnt[b] = 1), (P.own[b] = 2), (P.cells[0][0] = t), (P.cells[1][0] = b);\n  Object.assign(P, { ncell: [1, 1], nsk: [1, 1], fr: [TY, BY], acc: [0, 0], tac: [0, 0], meet: -1, meetQ: -1, np: 0, tau: 0 });\n}\n\n// Red-black over-relaxation of Laplace's equation on the board: the top tree\n// held at 0, the bottom one at 1, the board's edges insulating.\nfunction relax(P, sweeps) {\n  const { own, phi } = P;\n  for (let s = 0; s \u003c sweeps; s++)\n    for (let c = 0; c \u003c 2; c++)\n      for (let y = Y0; y \u003c= Y1; y++) {\n        const r = y * W;\n        for (let x = X0 + ((y + c) & 1); x \u003c= X1; x += 2) {\n          const i = r + x;\n          if (own[i]) continue;\n          const v = phi[i];\n          const a = x > X0 ? phi[i - 1] : v, b = x \u003c X1 ? phi[i + 1] : v, u = y > Y0 ? phi[i - W] : v, d = y \u003c Y1 ? phi[i + W] : v;\n          phi[i] = v + 1.85 * ((a + b + u + d) * 0.25 - v);\n        }\n      }\n}\n\n// A wood cell beside one cell of a tree, or touching one at a corner, may\n// join it, with a chance that goes as the field there to the power eta.\n// Nothing off the board ever joins, so neighbours need no bounds checks.\nfunction scan(P, eta) {\n  const { own, phi, cand, cw } = P, n = [0, 0], t = [0, 0];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      if (own[i]) continue;\n      // Neighbours of each tree counted in one number, four bits a tree.\n      const s4 = LUT[own[i - 1]] + LUT[own[i + 1]] + LUT[own[i - W]] + LUT[own[i + W]];\n      const s8 = LUT[own[i - W - 1]] + LUT[own[i - W + 1]] + LUT[own[i + W - 1]] + LUT[own[i + W + 1]];\n      for (let k = 0; k \u003c 2; k++) {\n        const a = (s4 >> (4 * k)) & 15;\n        if (a > 1 || (!a && ((s8 >> (4 * k)) & 15) !== 1)) continue;\n        t[k] += pow(max(k ? 1 - phi[i] : phi[i], 1e-5), eta);\n        cand[k][n[k]] = i;\n        cw[k][n[k]++] = t[k];\n      }\n    }\n  P.nc = n;\n}\n\n// A cell joins tree k only if branches stay one LED wide: nothing of the\n// tree may touch it but the cell it grows from and that cell's neighbours.\n// Touching the other tree is the meeting.\nfunction join(P, c, k, tw = 0) {\n  const { own } = P;\n  if (own[c]) return false;\n  let p = -1, m = 0;\n  for (const o of N4) if (own[c + o] === k) (p = c + o), m++;\n  if (m > 1) return false;\n  if (p \u003c 0) for (const o of ND) if (own[c + o] === k && p \u003c 0) p = c + o;\n  if (p \u003c 0) return false;\n  const px = p & 63, py = p >> 6;\n  let other = -1;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const q = c + dy * W + dx;\n      if (q === c || q === p || !own[q]) continue;\n      if (own[q] !== k) {\n        // The trees may not close before their time.\n        if (P.tau \u003c TG - 0.25) return false;\n        other = q;\n      } else if (abs((q & 63) - px) > 1 || abs((q >> 6) - py) > 1) return false;\n    }\n  add(P, c, p, k, tw);\n  if (other >= 0) (P.meet = c), (P.meetQ = other);\n  return true;\n}\n\nfunction add(P, c, p, k, tw) {\n  const { cnt, par } = P, y = c >> 6, x = c & 63;\n  (P.own[c] = k), (P.twg[c] = tw), (par[c] = p), (cnt[c] = P.ht[c] = P.chr[c] = 1), (P.born[c] = P.time), (P.phi[c] = k - 1);\n  P.fr[k - 1] = k === 1 ? max(P.fr[0], y) : min(P.fr[1], y);\n  scorch(P, x, y, 1, 0.04);\n  P.ring[P.nr++ & 511] = c;\n  P.cells[k - 1][P.ncell[k - 1]++] = c;\n  if (!tw) P.nsk[k - 1]++;\n  // The current that feeds every cell beyond reaches it through all the\n  // cells back to the electrode, and the busiest burn into wide grooves.\n  for (let a = p; a >= 0; a = par[a]) {\n    const w = WIDE.indexOf(++cnt[a]);\n    if (w >= 0) {\n      const ax = a & 63, ay = a >> 6, r = 1 + 0.6 * w;\n      scorch(P, ax, ay, r, w ? 0.9 : 0.7, 1);\n      scorch(P, ax, ay, r + 2, 0.35);\n    }\n  }\n}\n\n// With burn set, char a groove of radius r round (x, y), still warm;\n// without, brown the wood within r by v, less towards the edge.\nfunction scorch(P, x, y, r, v, burn) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy, q = qy * W + qx;\n      if (d2 > r * r || qx \u003c X0 || qx > X1 || qy \u003c Y0 || qy > Y1) continue;\n      if (!burn) P.sco[q] = min(1, P.sco[q] + v * (1 - d2 / (r * r + 1)));\n      else (P.chr[q] = max(P.chr[q], v)), (P.ht[q] = max(P.ht[q], 0.5 * v));\n    }\n}\n\nfunction grow(P, d) {\n  relax(P, 3);\n  // Each tree has a front it should have reached by now, eased in so the\n  // growth speeds up as the trees close (a hard pull sends leaders racing\n  // out at once), and a cell budget that rises steeply when it lags.\n  const s = min(1, P.tau / TG) ** (1.35 - 0.15 * P.eta), late = max(0, P.tau - TG);\n  const lag = [TY + (P.ym - TY) * s - P.fr[0], P.fr[1] - (BY - (BY - P.ym) * s)];\n  // The leading electrode's tree takes the larger share of the front's\n  // cells; fringe twigs sprout as fast as there is channel to carry them,\n  // fewer the harder the pull.\n  for (let k = 0; k \u003c 2; k++) {\n    const f = exp(cl(lag[k] / 6, -2, 2.5)), sh = 1 + (k ? 0.85 : -0.85) * P.lead;\n    P.acc[k] += d * RATE * sh * f * (1 + 4 * late);\n    P.tac[k] += d * TWIG * P.nsk[k] * ((4.5 - P.eta) / 3.5) ** 2;\n  }\n  twigs(P);\n  if (P.acc[0] \u003c 1 && P.acc[1] \u003c 1 && P.tac[0] \u003c 1 && P.tac[1] \u003c 1) return;\n  scan(P, P.eta + 2 * late);\n  for (let k = 0; k \u003c 2; k++) {\n    const n = min(120, floor(P.acc[k])), C = P.cand[k], S = P.cw[k], m = P.nc[k];\n    P.acc[k] -= n;\n    if (!m) continue;\n    const tot = S[m - 1];\n    for (let t = 0, tries = 0; t \u003c n && tries \u003c 3 * n; tries++) {\n      const r = rnd() * tot;\n      let lo = 0;\n      for (let hi = m - 1, mid; lo \u003c hi; ) (mid = (lo + hi) >> 1), S[mid] \u003c r ? (lo = mid + 1) : (hi = mid);\n      if (join(P, C[lo], k + 1)) t++;\n      if (P.meet >= 0) return;\n    }\n  }\n  // A fringe twig sprouts off a burnt channel, an eighth of a turn off it\n  // or now and then a quarter, and runs a few LEDs, bending as it goes. A\n  // twig sprouts shorter twigs of its own, three generations deep.\n  for (let tries = 0, k = 0; tries \u003c 300; tries++) {\n    if (P.tac[k] \u003c 1) k = 1 - k;\n    if (P.tac[k] \u003c 1) break;\n    const a = P.cells[k][floor(rnd() * P.ncell[k])], g = P.twg[a];\n    if (P.par[a] \u003c 0 || g > 2 || rnd() > GEN[g]) continue;\n    // The branch's way here, read over four cells so one step cannot throw it.\n    let b = a;\n    for (let n = 0; n \u003c 4 && P.par[b] >= 0; n++) b = P.par[b];\n    const j = round((Math.atan2((a >> 6) - (b >> 6), (a & 63) - (b & 63)) * 4) / Math.PI) & 7;\n    const dir = (j + (rnd() \u003c 0.5 ? 1 : 7) * (rnd() \u003c 0.85 ? 1 : 2)) & 7;\n    const x = (a & 63) + DIRS[dir][0], y = (a >> 6) + DIRS[dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, k + 1, g + 1)) continue;\n    P.tac[k]--;\n    if (P.meet >= 0) return;\n    Object.assign(P.tw[P.ntw++ & 255], { c, d0: dir, dir, k: k + 1, g: g + 1, left: LEN[g] + floor(rnd() * LEN[g]) });\n  }\n  P.tac = P.tac.map((v) => min(v, 4));\n}\n\nfunction twigs(P) {\n  for (const t of P.tw) {\n    if (t.left \u003c= 0) continue;\n    t.left--;\n    // A twig wanders an eighth of a turn, never further off its way.\n    if (rnd() \u003c 0.25) {\n      const dir = (t.dir + (rnd() \u003c 0.5 ? 1 : 7)) & 7, off = (dir - t.d0 + 8) & 7;\n      if (off \u003c= 1 || off >= 7) t.dir = dir;\n    }\n    const x = (t.c & 63) + DIRS[t.dir][0], y = (t.c >> 6) + DIRS[t.dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, t.k, t.g)) {\n      t.left = 0;\n      continue;\n    }\n    t.c = c;\n    if (P.meet >= 0) return;\n  }\n}\n\n// The joined path, from the top electrode to the bottom one.\nfunction trace(P) {\n  const top = P.own[P.meet] === 1 ? P.meet : P.meetQ, bot = top === P.meet ? P.meetQ : P.meet;\n  let n = 0;\n  for (let a = top; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.path.subarray(0, n).reverse();\n  for (let a = bot; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.np = n;\n  for (let j = 0; j \u003c n; j++) {\n    const a = P.path[j], x = a & 63, y = a >> 6;\n    scorch(P, x, y, 2, 1, 1);\n    scorch(P, x, y, 4, 0.5);\n    P.ht[a] = 1;\n  }\n}\n\nfunction go(P, ph) {\n  (P.ph = ph), (P.pt = 0);\n  if (ph === 1) P.power = 1;\n  if (ph === 2) trace(P), (P.flash = 1);\n  if (ph > 2) P.power = 0;\n  if (ph === 0) ([P.wa, P.wb] = [P.wb, P.wa]), fresh(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  (P.wood = cl(k[0], 0, 1)), (P.eta = cl(k[2], 1, 4)), (P.lead = cl(k[3], -1, 1));\n  P.ym = (TY + BY) / 2 - 44 * P.lead;\n  (P.time += d), (P.pt += d);\n  if (input.btnPressed && input.btnPressed[0] && P.ph > 0 && P.ph \u003c 4) go(P, 4);\n  const ph = P.ph;\n  if (ph === 0 && P.pt >= SOAK) go(P, 1);\n  else if (ph === 1) {\n    P.tau += d;\n    grow(P, d);\n    // A board the trees cannot cross trips the breaker without an arc.\n    if (P.meet >= 0) go(P, 2);\n    else if (P.tau > TG + 3) go(P, 3);\n  } else if (ph === 2) {\n    // The arc keeps its path white hot.\n    for (let j = 0; j \u003c P.np; j++) P.ht[P.path[j]] = 1;\n    if (P.pt >= ARC) go(P, 3);\n  } else if (ph === 3 && P.pt >= COOL) go(P, 4);\n  else if (ph === 4 && P.pt >= SLIDE) go(P, 0), (P.wb = wood());\n  P.flash = max(0, P.flash - d * 9);\n  heat(P, d), smoke(P, d);\n}\n\n// Embers: fresh channels glow and cool to char, while the power is on the\n// busy trunks stay hot, and anything hot browns the wood round it.\nfunction heat(P, d) {\n  const { ht, own, cnt, sco, hot } = P, dec = exp(-d / (P.power ? 0.3 : 0.9));\n  let sum = 0, nh = 0;\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let h = ht[i];\n      if (h \u003c 0.004 && !own[i]) continue;\n      h *= dec;\n      if (P.power && own[i] && cnt[i] > 24) h = max(h, min(0.6, 0.12 * (log2(cnt[i]) - 3.5)) * (0.85 + 0.15 * rnd()));\n      ht[i] = h;\n      if (h > 0.2 && (cnt[i] > 12 || !own[i])) {\n        sum += h;\n        for (const o of N4) sco[i + o] = min(1, sco[i + o] + d * h * 0.3);\n        if (nh \u003c 32) hot[nh++] = i;\n        else if (rnd() \u003c 0.05) hot[floor(rnd() * 32)] = i;\n      }\n    }\n  P.nh = nh;\n  P.heatSum = sum;\n}\n\n// Smoke puffs rise off the hot channels, spread and thin out.\nfunction smoke(P, d) {\n  let want = (P.ph === 4 ? 0 : P.heatSum) * d * 0.22;\n  for (const s of P.puffs) {\n    if (s.on) {\n      if ((s.age += d) > s.life) {\n        s.on = 0;\n        continue;\n      }\n      s.x += (s.vx + 3 * sin(s.age * 2.3 + s.y * 0.1)) * d;\n      s.y += s.vy * d;\n      s.r += d * 1.6;\n      continue;\n    }\n    if (want > rnd() && P.nh) {\n      const i = P.hot[floor(rnd() * P.nh)];\n      Object.assign(s, { on: 1, x: i & 63, y: i >> 6, vx: (rnd() - 0.5) * 4, vy: -8 - rnd() * 8, r: 1, a: 0.16 + rnd() * 0.16, age: 0, life: 2.5 + rnd() * 2 });\n      want -= 1;\n    }\n  }\n}\n\n// Plasma at (x, y): how strongly it covers each LED round it.\nfunction plasma(L, x, y, r, v) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy;\n      if (qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c H && d2 \u003c= r * r) L[qy * W + qx] += v / (1 + d2 * 2.5);\n    }\n}\n\n// Ember colour by heat: dull red, orange, then yellow-white.\nconst EK = [0, 0.25, 0.6, 1], EC = [[0, 0, 0], [175, 35, 6], [255, 110, 20], [255, 220, 140]];\nfunction ember(h, out) {\n  const j = h \u003c 0.25 ? 0 : h \u003c 0.6 ? 1 : 2, t = (min(h, 1) - EK[j]) / (EK[j + 1] - EK[j]);\n  for (let c = 0; c \u003c 3; c++) out[c] = EC[j][c] + (EC[j + 1][c] - EC[j][c]) * t;\n}\n\nconst EM = [0, 0, 0];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { own, chr, sco, ht, born, pl, sm } = P;\n  pl.fill(0);\n  sm.fill(0);\n  if (P.wa.at !== P.wood) paint(P.wa, P.wood);\n  if (P.ph === 4 && P.wb.at !== P.wood) paint(P.wb, P.wood);\n  const off = P.ph === 4 ? SL * (1 - (1 + Math.cos((Math.PI * min(1, P.pt / SLIDE)))) / 2) : 0, oy = round(off);\n\n  // Plasma at the tips, and short streamers crackling ahead of them.\n  if (P.power) {\n    for (let j = 0; j \u003c 512 && j \u003c P.nr; j++) {\n      const c = P.ring[(P.nr - 1 - j) & 511], age = P.time - born[c];\n      if (age > TIP) break;\n      // Twigs behind the front only flash orange.\n      if (P.twg[c] && (own[c] === 1 ? (c >> 6) \u003c P.fr[0] - 14 : (c >> 6) > P.fr[1] + 14)) continue;\n      const f = (1 - age / TIP) * (0.5 + 0.5 * rnd()), x = c & 63, y = (c >> 6) + oy;\n      plasma(pl, x, y, 1.5, f);\n      if (rnd() \u003c 0.2)\n        for (let st = 0, sx = x, sy = y, len = 2 + floor(rnd() * 5); st \u003c len; st++) {\n          if (rnd() \u003c 0.6) sy += own[c] === 1 ? 1 : -1;\n          else sx += rnd() \u003c 0.5 ? -1 : 1;\n          if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n          pl[sy * W + sx] += 0.9 - st * 0.12;\n        }\n    }\n    // A blue corona at each electrode.\n    const z = 0.4 + 0.4 * rnd();\n    plasma(pl, TX, TY + oy, 2.5, z);\n    plasma(pl, BX, BY + oy, 2.5, z);\n  }\n  // The arc down the joined path, flickering sideways.\n  if (P.ph === 2) {\n    const f = (1 - 0.6 * (P.pt / ARC)) * (0.7 + 0.3 * rnd()), seed = rnd() * 99;\n    for (let j = 0; j \u003c P.np; j++) {\n      const a = P.path[j], x = (a & 63) + round(1.6 * (vn(j * 0.3, seed) - 0.5)), y = a >> 6;\n      if (j % 2 === 0) plasma(pl, x, y, 3.5, 0.35 * f);\n      pl[y * W + x] += 3 * f;\n    }\n  }\n  for (const s of P.puffs) {\n    if (!s.on) continue;\n    // A wisp, twice as tall as it is wide.\n    const a = s.a * sin((Math.PI * s.age) / s.life), R = Math.ceil(s.r), R2 = 2 * R;\n    for (let dy = -R2; dy \u003c= R2; dy++)\n      for (let dx = -R; dx \u003c= R; dx++) {\n        const qx = round(s.x) + dx, qy = round(s.y) + dy, d2 = (dx * dx + dy * dy * 0.25) / (s.r * s.r);\n        if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H || d2 >= 1) continue;\n        sm[qy * W + qx] += a * (1 - d2) * (1 - d2);\n      }\n  }\n\n  const fl = P.flash * 70, CH = P.wa.ch, dry = P.ph > 1 ? 1 : P.ph ? P.tau / (TG + 0.5) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r, g, b;\n      // Which board, if any, is under this LED.\n      let yb = y - oy, B = P.wa, burnt = 1;\n      if (P.ph === 4 && yb \u003c Y0) (yb += SL), (B = P.wb), (burnt = 0);\n      if (x >= X0 && x \u003c= X1 && yb >= Y0 && yb \u003c= Y1) {\n        const i = yb * W + x, C = B.col;\n        // The wet wash glosses the wood; the current steams it off the whole\n        // board and the burn dries it at once.\n        const s = burnt ? sco[i] : 0, lf = 0.86 + 0.28 * B.wet[i] * max(0, 1 - 3 * s - (burnt ? dry : 0));\n        (r = C[i * 3] * lf), (g = C[i * 3 + 1] * lf), (b = C[i * 3 + 2] * lf);\n        if (burnt) {\n          if (s > 0) (r *= 1 - 0.5 * s), (g *= 1 - 0.66 * s), (b *= 1 - 0.8 * s);\n          const c = chr[i];\n          if (c > 0) (r += (CH[0] - r) * c), (g += (CH[1] - g) * c), (b += (CH[2] - b) * c);\n          const h = ht[i];\n          if (h > 0.02 && c > 0.3) {\n            // Thick char glows only along its rim.\n            const rim = (x > X0 && chr[i - 1] \u003c 0.5) || (x \u003c X1 && chr[i + 1] \u003c 0.5) || chr[i - W] \u003c 0.5 || chr[i + W] \u003c 0.5;\n            ember(h * (rim ? 1 : 0.45), EM);\n            (r = max(r, EM[0])), (g = max(g, EM[1])), (b = max(b, EM[2]));\n          }\n        }\n        (r += fl), (g += fl), (b += fl * 1.2);\n      } else {\n        // The dark rig behind, with the board's shadow to its right.\n        const sh = x > X1 ? 0.55 : 1, q = hash(x, y);\n        (r = (RIG[0] + 6 * q) * sh), (g = (RIG[1] + 6 * hash(y, x)) * sh), (b = (RIG[2] + 6 * q) * sh);\n        if (x === 0 || x === 63) (r = 64 + 10 * q), (g = 66 + 10 * q), (b = 74 + 10 * q);\n      }\n      const m = min(0.7, sm[p]);\n      (r += (SMOKE[0] - r) * m), (g += (SMOKE[1] - g) * m), (b += (SMOKE[2] - b) * m);\n      // Plasma: deep blue where it is thin, blue-white where it is thick.\n      const t = pl[p];\n      if (t > 0.01) {\n        const u = min(1, t), w = min(1, t / 2.5);\n        (r += (90 + 160 * w - r) * u), (g += (120 + 130 * w - g) * u), (b += (255 - b) * u);\n      }\n      display.setPixel(x, y, cl(r, 0, 255) | 0, cl(g, 0, 255) | 0, cl(b, 0, 255) | 0);\n    }\n  electrodes(display, P);\n}\n\n// Brass clamps with their tips on the board, the red lead in from the top\n// and the black one from the bottom.\nfunction electrodes(display, P) {\n  for (let e = 0; e \u003c 2; e++) {\n    const cx = e ? BX : TX, s = e ? -1 : 1, y0 = e ? H - 1 : 0, lead = e ? [[96, 98, 110], [36, 36, 42]] : [[236, 84, 64], [172, 28, 22]];\n    for (let j = 0; j \u003c= 8; j++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const lit = j === 4 || dx === -3, dark = j === 7 || dx === 3;\n        let c = null;\n        if (j \u003c= 3 && abs(dx) \u003c= 1) c = lead[dx \u003c 0 ? 0 : 1];\n        else if (j >= 4 && j \u003c= 7) c = lit ? [236, 200, 110] : dark ? [130, 96, 40] : [196, 156, 70];\n        else if (j === 8 && !dx) c = P.power ? [210, 220, 255] : [240, 214, 130];\n        if (c) display.setPixel(cx + dx, y0 + s * j, c[0], c[1], c[2]);\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wood","min":0,"max":1,"about":"Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower."},{"name":"Pull","min":1,"max":4,"about":"The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders."},{"name":"Lead","min":-1,"max":1,"about":"Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway."}],"start":[0,2,1,0.06],"measures":{"motion":0.2052,"detail":0.13,"edges":0.3965,"complexity":2.6118,"coverage":0.9587,"colour":0.1893,"drift":0.2406},"knobResponse":[0.4635,0.1257,0.0391,0.0652]},{"slug":"life","title":"Life","family":"automata","round":1,"note":"같은 여덟 이웃에 법칙이 여섯이에요. 세포가 나이만큼 색을 입어서 법칙마다 무엇이 남는지 보여요.","idea":"The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.","buttons":"K1 tap sweeps a fresh soup down the whole panel.","code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-life","type":"code","name":"life","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole palette, newborn to old to ghost, around the colour wheel."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from one to about 24."},{"name":"Rule","min":0,"max":5,"about":"0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345."},{"name":"Ghosts","min":0,"max":1,"about":"How long a dead cell glows on, from a short smear to long exposure."}],"start":[0,2,0,0.06],"measures":{"motion":0.6935,"detail":0.1138,"edges":0.7121,"complexity":0.3343,"coverage":0.2193,"colour":0.2429,"drift":0.1393},"knobResponse":[0.1027,0.1531,0.303,0.0806]},{"slug":"liftoff","title":"Liftoff","family":"flight","round":22,"note":"새벽 물 건너 발사대에서 로켓이 하얀 산소 김을 흘리며 서 있다가 김구름 속에 불을 붙이고 솟아올라요. 카메라가 따라 고개를 들면 하늘이 파랑에서 별 뜬 검정으로 바뀌고, Max-Q 와 단 분리를 지나 밝은 점이 되면 새 로켓이 발사대에 서요.","idea":"A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.","buttons":"K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.","code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","layer":{"id":"layer-liftoff","type":"code","name":"liftoff","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Rocket","min":0,"max":3,"about":"A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer."},{"name":"Stages","min":1,"max":3,"about":"1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb."},{"name":"Time","min":0,"max":1,"about":"Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun."}],"start":[0,2,1,0.06],"measures":{"motion":0.3231,"detail":0.0267,"edges":0.3728,"complexity":1.8839,"coverage":0.9986,"colour":0.2838,"drift":0.1066},"knobResponse":[0.0489,0.062,0.0431,0.4667]},{"slug":"lip-gloss","title":"Lip Gloss","family":"cosmetic","round":31,"note":"맑은 글로스가 위에서 부어져 옅은 벽을 타고 흘러내리고, 앞머리가 길이 다른 방울 줄기로 갈라져 끝마다 빛 한 점을 문 구슬이 맺혀요. 바닥에 닿은 구슬은 떨어지고 글로스는 얇아지며 맑아져요. K1 은 색상환을 다 돌고, 누르면 위에 새로 부어요.","idea":"A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.","buttons":"K1 tap pours a fresh band along the top now.","code":"// ===== Patternflow pattern =====\n// Title:   Lip Gloss\n// Family:  cosmetic\n// Idea:    A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after clear lip gloss sliding down a tester wall\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it.\n// Knob 2: Speed. How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Pour. How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front.\n// Knob 4: Shimmer. Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly.\n// Buttons: K1 tap pours a fresh band along the top now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: rose, not red.\nconst H0 = 0.935;\n// The film moves under gravity with a flux C*h^3 (a viscous film on a wall,\n// speed going as thickness squared), so a film one unit thick runs C rows a\n// second at its front at Speed 2. A pour lasts POUR seconds, one starts\n// every CYCLE seconds.\nconst C = 30, POUR = 3, CYCLE = 11;\n// Flecks of mica for the Shimmer knob, at most MAXF at once.\nconst MAXF = 700;\n// Beads hanging from the bottom edge, at most MAXD; one lets go once it holds\n// DROP units of gloss.\nconst MAXD = 24, DROP = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    h: F(N), hr: F(N), q: F(H), m: F(W), front: new Int16Array(W), hf: F(W),\n    T: 0, since: 0, pourLeft: 0, flow: 0, out: F(W),\n    dx: F(MAXD), dv: F(MAXD), df: F(MAXD), dvy: F(MAXD), nd: 0,\n    bx: F(MAXD * 3), by: F(MAXD * 3), br: F(MAXD * 3), nb: 0,\n    fx: F(MAXF), fy: F(MAXF), fp: F(MAXF), fw: F(MAXF), nf: 0, cover: 0,\n    hue: 0, rate: 1, amount: 0, shim: 0.06, started: false,\n    tint: F(3), absb: F(3), wall: F(3), pear: F(3), gain: 1, dim: 0.27, buf: F(N * 3),\n  };\n}\n\n// A fresh pour: how much gloss comes down each column. A film running down\n// a wall breaks its front into fingers (Huppert 1982), the columns that get\n// ahead taking more of the flow. Here the fingers are laid into the pour: a\n// thin sheet across the whole width with bumps on it of different heights,\n// and since the front runs at a speed that goes as thickness squared, each\n// bump runs ahead as a drip of its own length.\nfunction newPour(S) {\n  const P = S.amount, m = S.m, nf = round(3 + 5 * P + rnd() * 0.8);\n  const base = 0.1 + 0.95 * P;\n  for (let x = 0; x \u003c W; x++) m[x] = base * (0.9 + 0.2 * rnd());\n  for (let k = 0; k \u003c nf; k++) {\n    const c = ((k + 0.5 + (rnd() - 0.5) * 0.7) / nf) * W, w = (1.6 + 1.3 * rnd()) * (1.3 - 0.4 * P);\n    const a = (0.6 + 1.0 * rnd()) * (1 - 0.55 * P);\n    for (let x = 0; x \u003c W; x++) m[x] += a * exp(-(((x + 0.5 - c) / w) ** 2));\n  }\n  S.pourLeft = POUR * (1 - 0.35 * P);\n  S.since = 0;\n  S.flow = C * (0.85 + 0.6 * P);\n}\n\nfunction flecks(S, st) {\n  // Mica hangs all through the gloss: new flecks turn up wherever the film is\n  // thick enough to hold them, as many as Shimmer asks for the film there is,\n  // and each rides down at the surface speed of the film under it, half as\n  // fast again as the film's mean.\n  const h = S.h, want = min(MAXF, S.shim * 1000 * S.cover);\n  for (let tries = 0; tries \u003c 60 && S.nf \u003c want; tries++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (h[floor(y) * W + floor(x)] \u003c 0.15) continue;\n    const i = S.nf++;\n    S.fx[i] = x;\n    S.fy[i] = y;\n    S.fp[i] = rnd() * 2 * PI;\n    S.fw[i] = (1.5 + 2.5 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  }\n  for (let i = S.nf - 1; i >= 0; i--) {\n    const hh = h[floor(S.fy[i]) * W + floor(S.fx[i])];\n    S.fy[i] += 1.5 * C * hh * hh * st;\n    S.fp[i] += S.fw[i] * st;\n    if (S.fy[i] >= H || hh \u003c 0.06 || S.nf > want + 20) {\n      const j = --S.nf;\n      S.fx[i] = S.fx[j];\n      S.fy[i] = S.fy[j];\n      S.fp[i] = S.fp[j];\n      S.fw[i] = S.fw[j];\n    }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= CYCLE) newPour(S);\n  const h = S.h, q = S.q, m = S.m;\n  // The pour feeds the top row; as it ends it tapers off over half a second.\n  if (S.pourLeft > 0) {\n    const f = S.flow * min(1, S.pourLeft * 2) * st;\n    for (let x = 0; x \u003c W; x++) h[x] += m[x] * f;\n    S.pourLeft -= st;\n  }\n  // Each column runs down with flux C*h^3, worked upwind in steps short\n  // enough for the fastest wave, which runs at 3*C*h^2.\n  let hm = 0;\n  for (let p = 0; p \u003c N; p++) if (h[p] > hm) hm = h[p];\n  const n = Math.ceil((st * 3 * C * hm * hm) / 0.8) || 1, dt = st / n;\n  for (let k = 0; k \u003c n; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      for (let y = 0, p = x; y \u003c H; y++, p += W) {\n        const v = h[p];\n        q[y] = C * v * v * v;\n      }\n      h[x] -= dt * q[0];\n      S.out[x] += dt * q[H - 1];\n      for (let y = 1, p = x + W; y \u003c H; y++, p += W) h[p] += dt * (q[y - 1] - q[y]);\n    }\n  }\n  // Surface tension pulls a little gloss sideways, so the drips stay round.\n  const D = min(0.2, 0.7 * st);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let prev = h[o];\n    for (let x = 0; x \u003c W; x++) {\n      const c = h[o + x], r = x \u003c W - 1 ? h[o + x + 1] : c;\n      h[o + x] = c + D * (prev + r - 2 * c);\n      prev = c;\n    }\n  }\n  // A film thinner than 0.45 slowly soaks away, the thinner the faster, so\n  // the wall clears from the top, where the draining film is thinnest, while\n  // the drips stay.\n  const fade = 0.075 * st;\n  let cover = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const v = h[p];\n    if (v \u003c 0.45) h[p] = max(0, v - fade * (1 - v / 0.45));\n    if (v > 0.15) cover++;\n  }\n  S.cover = cover / N;\n  flecks(S, st);\n  drops(S, st);\n}\n\n// What runs off the bottom row gathers into a bead hanging from the edge\n// under its drip; a full bead lets go and falls away.\nfunction drops(S, st) {\n  const out = S.out;\n  for (let x = 0; x \u003c W; x++) {\n    const v = out[x];\n    if (v \u003c= 0) continue;\n    out[x] = 0;\n    let b = -1, bd = 4.5;\n    for (let i = 0; i \u003c S.nd; i++) {\n      const d = abs(S.dx[i] - x - 0.5);\n      if (S.df[i] \u003c 0 && d \u003c bd) (bd = d), (b = i);\n    }\n    if (b \u003c 0) {\n      if (S.nd >= MAXD) continue;\n      b = S.nd++;\n      S.dx[b] = x + 0.5;\n      S.dv[b] = 0;\n      S.df[b] = -1;\n    }\n    const nv = S.dv[b] + v;\n    S.dx[b] = (S.dx[b] * S.dv[b] + (x + 0.5) * v) / nv;\n    S.dv[b] = nv;\n  }\n  for (let i = S.nd - 1; i >= 0; i--) {\n    if (S.df[i] \u003c 0) {\n      // A bead nothing feeds any more slowly soaks away like the film.\n      S.dv[i] -= 0.12 * st;\n      if (S.dv[i] > DROP) (S.df[i] = 0), (S.dvy[i] = 20);\n      else if (S.dv[i] \u003c 0.05) S.df[i] = 99;\n      continue;\n    }\n    S.dvy[i] += 500 * st;\n    S.df[i] += S.dvy[i] * st;\n    if (S.df[i] > 14) {\n      const j = --S.nd;\n      S.dx[i] = S.dx[j];\n      S.dv[i] = S.dv[j];\n      S.df[i] = S.df[j];\n      S.dvy[i] = S.dvy[j];\n    }\n  }\n}\n\n// Adds a round bead of gloss, radius r and height A, centred at cx, cy.\nfunction dome(S, cx, cy, r, A) {\n  const { hr, h } = S;\n  if (S.nb \u003c MAXD * 3) {\n    S.bx[S.nb] = cx;\n    S.by[S.nb] = cy;\n    S.br[S.nb++] = r;\n  }\n  for (let y = max(0, floor(cy - r)); y \u003c= min(H - 1, floor(cy + r)); y++)\n    for (let X = max(0, floor(cx - r)); X \u003c= min(W - 1, floor(cx + r)); X++) {\n      const dx = (X + 0.5 - cx) / r, dy = (y + 0.5 - cy) / r, d2 = dx * dx + dy * dy;\n      if (d2 \u003c 1) {\n        const p = y * W + X;\n        hr[p] = max(hr[p], h[p] + A * sqrt(1 - d2));\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.amount = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    newPour(S);\n    // Open a second and a half into the first pour.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) newPour(S);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { h, hr, front, hf, buf, tint, absb, wall } = S;\n  const hue = H0 + S.hue;\n  // How the gloss tints the light that goes through it: each channel is cut\n  // by exp(-a*h), a taken from the tint so thick gloss is the deep colour.\n  hsv(hue, 0.8, 1, tint, 0);\n  for (let c = 0; c \u003c 3; c++) absb[c] = -Math.log(max(0.2, tint[c])) * 0.95;\n  // Orange and yellow tints darkened read brown and olive on LEDs; the wall\n  // is bright enough that they stay clear, and they get a touch more light.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.11) / 0.1);\n  S.gain = 1 + 0.08 * am;\n  S.dim = 0.27 * (1 - 0.85 * max(0, 1 - abs(hw - 0.13) / 0.16));\n  // The wall: a pale warm white with a breath of the tint.\n  hsv(hue + 0.04, 0.07, 1, wall, 0);\n  // Each column's front and the rim behind it: walking up from the bottom,\n  // every step where the film thickens adds to a ridge that fades over three\n  // rows, the capillary ridge a running film piles up at its front.\n  const kr = exp(-1 / 2.6);\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0, f = -1, fh = 0;\n    for (let y = H - 1; y >= 0; y--) {\n      const p = y * W + x, below = y \u003c H - 1 ? h[p + W] : 0, jump = h[p] - below;\n      r *= kr;\n      if (jump > 0.02) r += jump * 0.9;\n      if (f \u003c 0 && h[p] > 0.1) (f = y), (fh = h[p]);\n      hr[p] = h[p] + r;\n    }\n    front[x] = f;\n    hf[x] = fh;\n  }\n  S.nb = 0;\n  // Beads: where a column's front runs further than its neighbours', the\n  // gloss gathers into a round bead at the tip of the drip.\n  for (let x = 0; x \u003c W; x++) {\n    const f = front[x];\n    if (f \u003c 6 || f > H - 5) continue;\n    let tip = true, lo = 1e9;\n    for (let d = -3; d \u003c= 3 && tip; d++) {\n      if (!d) continue;\n      const xx = x + d;\n      if (xx \u003c 0 || xx >= W) continue;\n      if (front[xx] > f || (front[xx] === f && d \u003c 0)) tip = false;\n      lo = min(lo, front[xx]);\n    }\n    if (!tip || f - lo \u003c 2) continue;\n    const r = 2 + 1.8 * min(1.2, hf[x]);\n    dome(S, x + 0.5, f + 0.6 - r * 0.55, r, 0.5 + 0.7 * min(1.2, hf[x]));\n  }\n  for (let i = 0; i \u003c S.nd; i++) {\n    const r = 1.3 + 1.2 * sqrt(S.dv[i]);\n    dome(S, S.dx[i], H - 0.3 - r + max(0, S.df[i]), r, 0.6 + 0.15 * r);\n  }\n  // The light: a soft bar above the wall that glides down it, seen in the\n  // gloss as a mirror image moved by the slope of the surface, and a small\n  // lamp to one side that puts a point of light on every bead.\n  const T = S.T, ys = ((T * 9) % (H + 60)) - 30, lxa = 0.25 * sin(T * 0.37), lya = -0.32 + 0.08 * sin(T * 0.23);\n  let hx = lxa, hy = lya, hz = 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hl;\n  hy /= hl;\n  hz /= hl;\n  const sh = S.shim, pear = S.pear;\n  hsv(hue - 0.04, 0.3, 245, pear, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t0 = hr[p], t = t0 / (1 + 0.25 * t0);\n      const wb = (0.8 + 0.07 * exp(-(((x - 32) / 40) ** 2 + ((y - ys * 0.5 - 30) / 90) ** 2))) * 255;\n      const film = sm(0.02, 0.14, t);\n      let R = wall[0] * wb, G = wall[1] * wb, B = wall[2] * wb;\n      if (film > 0) {\n        // Thick gloss also dims the wall a little in every channel, the band\n        // and the beads most, so the deep parts read deeper; less so for the\n        // warm tints, which dimmed turn brown and olive.\n        const g = S.gain * exp(-S.dim * t * t);\n        R *= exp(-absb[0] * t) * g;\n        G *= exp(-absb[1] * t) * g;\n        B *= exp(-absb[2] * t) * g;\n        // Mica scatters light back out of the gloss, a pearly haze of the\n        // tint over the film that grows with Shimmer.\n        const pe = 0.42 * sh * film;\n        R += (pear[0] - R) * pe;\n        G += (pear[1] - G) * pe;\n        B += (pear[2] - B) * pe;\n        const gx = (hr[x \u003c W - 1 ? p + 1 : p] - hr[x > 0 ? p - 1 : p]) * 0.5;\n        const gy = (hr[y \u003c H - 1 ? p + W : p] - hr[y > 0 ? p - W : p]) * 0.5;\n        let nx = -gx * 3, ny = -gy * 3, nz = 1;\n        const nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        nx *= nl;\n        ny *= nl;\n        nz *= nl;\n        // The bar seen in the gloss.\n        const yr = y - ny * 22 + (x - 32) * 0.15, bar = exp(-(((yr - ys) / 5) ** 2)) * 0.26 * film;\n        // The lamp: a sharp highlight where the surface faces half way\n        // between it and the eye.\n        const nd = max(0, nx * hx + ny * hy + nz * hz), spot = pow(nd, 200) * film;\n        const s = (bar + spot * 1.3 * sm(0.08, 0.35, t)) * 255;\n        R += s;\n        G += s;\n        B += s;\n      }\n      const q = p * 3;\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  // Every bead holds a point of light on the side towards the lamp, and the\n  // light it gathers lands as a glow of the tint low on the far side.\n  const pl = sqrt(hx * hx + hy * hy) || 1, ux = hx / pl, uy = hy / pl;\n  for (let i = 0; i \u003c S.nb; i++) {\n    const r = S.br[i], cx = S.bx[i], cy = S.by[i];\n    glow(buf, cx + ux * r * 0.42, cy + uy * r * 0.42, 0.55 + 0.04 * r, 235, 235, 235);\n    glow(buf, cx - ux * r * 0.35, cy - uy * r * 0.35 + r * 0.15, r * 0.38, 110 * tint[0], 110 * tint[1], 110 * tint[2]);\n  }\n  // Mica flecks: a pale glint of the tint, flashing white as they turn to\n  // the lamp, a bright flash spilling onto the four LEDs round it.\n  for (let i = 0; i \u003c S.nf; i++) {\n    const x = floor(S.fx[i]), y = floor(S.fy[i]);\n    const f = exp((cos(S.fp[i]) - 1) / 0.08), q = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[q + c] += 70 * (0.4 + 0.6 * tint[c]) + 200 * f;\n    if (f > 0.6)\n      for (let k = 0; k \u003c 4; k++) {\n        const X = x + (k === 0 ? 1 : k === 1 ? -1 : 0), Y = y + (k === 2 ? 1 : k === 3 ? -1 : 0);\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const o = (Y * W + X) * 3;\n        buf[o] += 90 * f;\n        buf[o + 1] += 90 * f;\n        buf[o + 2] += 90 * f;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    display.setPixel(p % W, (p / W) | 0, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n  }\n}\n\n// A soft round spot of light, sigma s LEDs, added at x, y.\nfunction glow(buf, x, y, s, r, g, b) {\n  const e = s * 2.5, k = 1 / (2 * s * s);\n  for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n    for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n      const w = exp(-((X + 0.5 - x) ** 2 + (Y + 0.5 - y) ** 2) * k), q = (Y * W + X) * 3;\n      buf[q] += r * w;\n      buf[q + 1] += g * w;\n      buf[q + 2] += b * w;\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-lip-gloss","type":"code","name":"lip-gloss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lip Gloss\n// Family:  cosmetic\n// Idea:    A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after clear lip gloss sliding down a tester wall\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it.\n// Knob 2: Speed. How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Pour. How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front.\n// Knob 4: Shimmer. Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly.\n// Buttons: K1 tap pours a fresh band along the top now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: rose, not red.\nconst H0 = 0.935;\n// The film moves under gravity with a flux C*h^3 (a viscous film on a wall,\n// speed going as thickness squared), so a film one unit thick runs C rows a\n// second at its front at Speed 2. A pour lasts POUR seconds, one starts\n// every CYCLE seconds.\nconst C = 30, POUR = 3, CYCLE = 11;\n// Flecks of mica for the Shimmer knob, at most MAXF at once.\nconst MAXF = 700;\n// Beads hanging from the bottom edge, at most MAXD; one lets go once it holds\n// DROP units of gloss.\nconst MAXD = 24, DROP = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    h: F(N), hr: F(N), q: F(H), m: F(W), front: new Int16Array(W), hf: F(W),\n    T: 0, since: 0, pourLeft: 0, flow: 0, out: F(W),\n    dx: F(MAXD), dv: F(MAXD), df: F(MAXD), dvy: F(MAXD), nd: 0,\n    bx: F(MAXD * 3), by: F(MAXD * 3), br: F(MAXD * 3), nb: 0,\n    fx: F(MAXF), fy: F(MAXF), fp: F(MAXF), fw: F(MAXF), nf: 0, cover: 0,\n    hue: 0, rate: 1, amount: 0, shim: 0.06, started: false,\n    tint: F(3), absb: F(3), wall: F(3), pear: F(3), gain: 1, dim: 0.27, buf: F(N * 3),\n  };\n}\n\n// A fresh pour: how much gloss comes down each column. A film running down\n// a wall breaks its front into fingers (Huppert 1982), the columns that get\n// ahead taking more of the flow. Here the fingers are laid into the pour: a\n// thin sheet across the whole width with bumps on it of different heights,\n// and since the front runs at a speed that goes as thickness squared, each\n// bump runs ahead as a drip of its own length.\nfunction newPour(S) {\n  const P = S.amount, m = S.m, nf = round(3 + 5 * P + rnd() * 0.8);\n  const base = 0.1 + 0.95 * P;\n  for (let x = 0; x \u003c W; x++) m[x] = base * (0.9 + 0.2 * rnd());\n  for (let k = 0; k \u003c nf; k++) {\n    const c = ((k + 0.5 + (rnd() - 0.5) * 0.7) / nf) * W, w = (1.6 + 1.3 * rnd()) * (1.3 - 0.4 * P);\n    const a = (0.6 + 1.0 * rnd()) * (1 - 0.55 * P);\n    for (let x = 0; x \u003c W; x++) m[x] += a * exp(-(((x + 0.5 - c) / w) ** 2));\n  }\n  S.pourLeft = POUR * (1 - 0.35 * P);\n  S.since = 0;\n  S.flow = C * (0.85 + 0.6 * P);\n}\n\nfunction flecks(S, st) {\n  // Mica hangs all through the gloss: new flecks turn up wherever the film is\n  // thick enough to hold them, as many as Shimmer asks for the film there is,\n  // and each rides down at the surface speed of the film under it, half as\n  // fast again as the film's mean.\n  const h = S.h, want = min(MAXF, S.shim * 1000 * S.cover);\n  for (let tries = 0; tries \u003c 60 && S.nf \u003c want; tries++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (h[floor(y) * W + floor(x)] \u003c 0.15) continue;\n    const i = S.nf++;\n    S.fx[i] = x;\n    S.fy[i] = y;\n    S.fp[i] = rnd() * 2 * PI;\n    S.fw[i] = (1.5 + 2.5 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  }\n  for (let i = S.nf - 1; i >= 0; i--) {\n    const hh = h[floor(S.fy[i]) * W + floor(S.fx[i])];\n    S.fy[i] += 1.5 * C * hh * hh * st;\n    S.fp[i] += S.fw[i] * st;\n    if (S.fy[i] >= H || hh \u003c 0.06 || S.nf > want + 20) {\n      const j = --S.nf;\n      S.fx[i] = S.fx[j];\n      S.fy[i] = S.fy[j];\n      S.fp[i] = S.fp[j];\n      S.fw[i] = S.fw[j];\n    }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= CYCLE) newPour(S);\n  const h = S.h, q = S.q, m = S.m;\n  // The pour feeds the top row; as it ends it tapers off over half a second.\n  if (S.pourLeft > 0) {\n    const f = S.flow * min(1, S.pourLeft * 2) * st;\n    for (let x = 0; x \u003c W; x++) h[x] += m[x] * f;\n    S.pourLeft -= st;\n  }\n  // Each column runs down with flux C*h^3, worked upwind in steps short\n  // enough for the fastest wave, which runs at 3*C*h^2.\n  let hm = 0;\n  for (let p = 0; p \u003c N; p++) if (h[p] > hm) hm = h[p];\n  const n = Math.ceil((st * 3 * C * hm * hm) / 0.8) || 1, dt = st / n;\n  for (let k = 0; k \u003c n; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      for (let y = 0, p = x; y \u003c H; y++, p += W) {\n        const v = h[p];\n        q[y] = C * v * v * v;\n      }\n      h[x] -= dt * q[0];\n      S.out[x] += dt * q[H - 1];\n      for (let y = 1, p = x + W; y \u003c H; y++, p += W) h[p] += dt * (q[y - 1] - q[y]);\n    }\n  }\n  // Surface tension pulls a little gloss sideways, so the drips stay round.\n  const D = min(0.2, 0.7 * st);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let prev = h[o];\n    for (let x = 0; x \u003c W; x++) {\n      const c = h[o + x], r = x \u003c W - 1 ? h[o + x + 1] : c;\n      h[o + x] = c + D * (prev + r - 2 * c);\n      prev = c;\n    }\n  }\n  // A film thinner than 0.45 slowly soaks away, the thinner the faster, so\n  // the wall clears from the top, where the draining film is thinnest, while\n  // the drips stay.\n  const fade = 0.075 * st;\n  let cover = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const v = h[p];\n    if (v \u003c 0.45) h[p] = max(0, v - fade * (1 - v / 0.45));\n    if (v > 0.15) cover++;\n  }\n  S.cover = cover / N;\n  flecks(S, st);\n  drops(S, st);\n}\n\n// What runs off the bottom row gathers into a bead hanging from the edge\n// under its drip; a full bead lets go and falls away.\nfunction drops(S, st) {\n  const out = S.out;\n  for (let x = 0; x \u003c W; x++) {\n    const v = out[x];\n    if (v \u003c= 0) continue;\n    out[x] = 0;\n    let b = -1, bd = 4.5;\n    for (let i = 0; i \u003c S.nd; i++) {\n      const d = abs(S.dx[i] - x - 0.5);\n      if (S.df[i] \u003c 0 && d \u003c bd) (bd = d), (b = i);\n    }\n    if (b \u003c 0) {\n      if (S.nd >= MAXD) continue;\n      b = S.nd++;\n      S.dx[b] = x + 0.5;\n      S.dv[b] = 0;\n      S.df[b] = -1;\n    }\n    const nv = S.dv[b] + v;\n    S.dx[b] = (S.dx[b] * S.dv[b] + (x + 0.5) * v) / nv;\n    S.dv[b] = nv;\n  }\n  for (let i = S.nd - 1; i >= 0; i--) {\n    if (S.df[i] \u003c 0) {\n      // A bead nothing feeds any more slowly soaks away like the film.\n      S.dv[i] -= 0.12 * st;\n      if (S.dv[i] > DROP) (S.df[i] = 0), (S.dvy[i] = 20);\n      else if (S.dv[i] \u003c 0.05) S.df[i] = 99;\n      continue;\n    }\n    S.dvy[i] += 500 * st;\n    S.df[i] += S.dvy[i] * st;\n    if (S.df[i] > 14) {\n      const j = --S.nd;\n      S.dx[i] = S.dx[j];\n      S.dv[i] = S.dv[j];\n      S.df[i] = S.df[j];\n      S.dvy[i] = S.dvy[j];\n    }\n  }\n}\n\n// Adds a round bead of gloss, radius r and height A, centred at cx, cy.\nfunction dome(S, cx, cy, r, A) {\n  const { hr, h } = S;\n  if (S.nb \u003c MAXD * 3) {\n    S.bx[S.nb] = cx;\n    S.by[S.nb] = cy;\n    S.br[S.nb++] = r;\n  }\n  for (let y = max(0, floor(cy - r)); y \u003c= min(H - 1, floor(cy + r)); y++)\n    for (let X = max(0, floor(cx - r)); X \u003c= min(W - 1, floor(cx + r)); X++) {\n      const dx = (X + 0.5 - cx) / r, dy = (y + 0.5 - cy) / r, d2 = dx * dx + dy * dy;\n      if (d2 \u003c 1) {\n        const p = y * W + X;\n        hr[p] = max(hr[p], h[p] + A * sqrt(1 - d2));\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.amount = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    newPour(S);\n    // Open a second and a half into the first pour.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) newPour(S);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { h, hr, front, hf, buf, tint, absb, wall } = S;\n  const hue = H0 + S.hue;\n  // How the gloss tints the light that goes through it: each channel is cut\n  // by exp(-a*h), a taken from the tint so thick gloss is the deep colour.\n  hsv(hue, 0.8, 1, tint, 0);\n  for (let c = 0; c \u003c 3; c++) absb[c] = -Math.log(max(0.2, tint[c])) * 0.95;\n  // Orange and yellow tints darkened read brown and olive on LEDs; the wall\n  // is bright enough that they stay clear, and they get a touch more light.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.11) / 0.1);\n  S.gain = 1 + 0.08 * am;\n  S.dim = 0.27 * (1 - 0.85 * max(0, 1 - abs(hw - 0.13) / 0.16));\n  // The wall: a pale warm white with a breath of the tint.\n  hsv(hue + 0.04, 0.07, 1, wall, 0);\n  // Each column's front and the rim behind it: walking up from the bottom,\n  // every step where the film thickens adds to a ridge that fades over three\n  // rows, the capillary ridge a running film piles up at its front.\n  const kr = exp(-1 / 2.6);\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0, f = -1, fh = 0;\n    for (let y = H - 1; y >= 0; y--) {\n      const p = y * W + x, below = y \u003c H - 1 ? h[p + W] : 0, jump = h[p] - below;\n      r *= kr;\n      if (jump > 0.02) r += jump * 0.9;\n      if (f \u003c 0 && h[p] > 0.1) (f = y), (fh = h[p]);\n      hr[p] = h[p] + r;\n    }\n    front[x] = f;\n    hf[x] = fh;\n  }\n  S.nb = 0;\n  // Beads: where a column's front runs further than its neighbours', the\n  // gloss gathers into a round bead at the tip of the drip.\n  for (let x = 0; x \u003c W; x++) {\n    const f = front[x];\n    if (f \u003c 6 || f > H - 5) continue;\n    let tip = true, lo = 1e9;\n    for (let d = -3; d \u003c= 3 && tip; d++) {\n      if (!d) continue;\n      const xx = x + d;\n      if (xx \u003c 0 || xx >= W) continue;\n      if (front[xx] > f || (front[xx] === f && d \u003c 0)) tip = false;\n      lo = min(lo, front[xx]);\n    }\n    if (!tip || f - lo \u003c 2) continue;\n    const r = 2 + 1.8 * min(1.2, hf[x]);\n    dome(S, x + 0.5, f + 0.6 - r * 0.55, r, 0.5 + 0.7 * min(1.2, hf[x]));\n  }\n  for (let i = 0; i \u003c S.nd; i++) {\n    const r = 1.3 + 1.2 * sqrt(S.dv[i]);\n    dome(S, S.dx[i], H - 0.3 - r + max(0, S.df[i]), r, 0.6 + 0.15 * r);\n  }\n  // The light: a soft bar above the wall that glides down it, seen in the\n  // gloss as a mirror image moved by the slope of the surface, and a small\n  // lamp to one side that puts a point of light on every bead.\n  const T = S.T, ys = ((T * 9) % (H + 60)) - 30, lxa = 0.25 * sin(T * 0.37), lya = -0.32 + 0.08 * sin(T * 0.23);\n  let hx = lxa, hy = lya, hz = 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hl;\n  hy /= hl;\n  hz /= hl;\n  const sh = S.shim, pear = S.pear;\n  hsv(hue - 0.04, 0.3, 245, pear, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t0 = hr[p], t = t0 / (1 + 0.25 * t0);\n      const wb = (0.8 + 0.07 * exp(-(((x - 32) / 40) ** 2 + ((y - ys * 0.5 - 30) / 90) ** 2))) * 255;\n      const film = sm(0.02, 0.14, t);\n      let R = wall[0] * wb, G = wall[1] * wb, B = wall[2] * wb;\n      if (film > 0) {\n        // Thick gloss also dims the wall a little in every channel, the band\n        // and the beads most, so the deep parts read deeper; less so for the\n        // warm tints, which dimmed turn brown and olive.\n        const g = S.gain * exp(-S.dim * t * t);\n        R *= exp(-absb[0] * t) * g;\n        G *= exp(-absb[1] * t) * g;\n        B *= exp(-absb[2] * t) * g;\n        // Mica scatters light back out of the gloss, a pearly haze of the\n        // tint over the film that grows with Shimmer.\n        const pe = 0.42 * sh * film;\n        R += (pear[0] - R) * pe;\n        G += (pear[1] - G) * pe;\n        B += (pear[2] - B) * pe;\n        const gx = (hr[x \u003c W - 1 ? p + 1 : p] - hr[x > 0 ? p - 1 : p]) * 0.5;\n        const gy = (hr[y \u003c H - 1 ? p + W : p] - hr[y > 0 ? p - W : p]) * 0.5;\n        let nx = -gx * 3, ny = -gy * 3, nz = 1;\n        const nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        nx *= nl;\n        ny *= nl;\n        nz *= nl;\n        // The bar seen in the gloss.\n        const yr = y - ny * 22 + (x - 32) * 0.15, bar = exp(-(((yr - ys) / 5) ** 2)) * 0.26 * film;\n        // The lamp: a sharp highlight where the surface faces half way\n        // between it and the eye.\n        const nd = max(0, nx * hx + ny * hy + nz * hz), spot = pow(nd, 200) * film;\n        const s = (bar + spot * 1.3 * sm(0.08, 0.35, t)) * 255;\n        R += s;\n        G += s;\n        B += s;\n      }\n      const q = p * 3;\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  // Every bead holds a point of light on the side towards the lamp, and the\n  // light it gathers lands as a glow of the tint low on the far side.\n  const pl = sqrt(hx * hx + hy * hy) || 1, ux = hx / pl, uy = hy / pl;\n  for (let i = 0; i \u003c S.nb; i++) {\n    const r = S.br[i], cx = S.bx[i], cy = S.by[i];\n    glow(buf, cx + ux * r * 0.42, cy + uy * r * 0.42, 0.55 + 0.04 * r, 235, 235, 235);\n    glow(buf, cx - ux * r * 0.35, cy - uy * r * 0.35 + r * 0.15, r * 0.38, 110 * tint[0], 110 * tint[1], 110 * tint[2]);\n  }\n  // Mica flecks: a pale glint of the tint, flashing white as they turn to\n  // the lamp, a bright flash spilling onto the four LEDs round it.\n  for (let i = 0; i \u003c S.nf; i++) {\n    const x = floor(S.fx[i]), y = floor(S.fy[i]);\n    const f = exp((cos(S.fp[i]) - 1) / 0.08), q = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[q + c] += 70 * (0.4 + 0.6 * tint[c]) + 200 * f;\n    if (f > 0.6)\n      for (let k = 0; k \u003c 4; k++) {\n        const X = x + (k === 0 ? 1 : k === 1 ? -1 : 0), Y = y + (k === 2 ? 1 : k === 3 ? -1 : 0);\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const o = (Y * W + X) * 3;\n        buf[o] += 90 * f;\n        buf[o + 1] += 90 * f;\n        buf[o + 2] += 90 * f;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    display.setPixel(p % W, (p / W) | 0, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n  }\n}\n\n// A soft round spot of light, sigma s LEDs, added at x, y.\nfunction glow(buf, x, y, s, r, g, b) {\n  const e = s * 2.5, k = 1 / (2 * s * s);\n  for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n    for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n      const w = exp(-((X + 0.5 - x) ** 2 + (Y + 0.5 - y) ** 2) * k), q = (Y * W + X) * 3;\n      buf[q] += r * w;\n      buf[q + 1] += g * w;\n      buf[q + 2] += b * w;\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower."},{"name":"Pour","min":0,"max":1,"about":"How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front."},{"name":"Shimmer","min":0,"max":1,"about":"Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly."}],"start":[0,2,0,0.06],"measures":{"motion":0.0402,"detail":0.004,"edges":0.0558,"complexity":1.0787,"coverage":1,"colour":0.1859,"drift":0.0271},"knobResponse":[0.1707,0.0957,0.1771,0.0458]},{"slug":"littlewood-roots","title":"Littlewood Roots","family":"fractal","round":31,"note":"계수가 다 ±1 인 13차 다항식 8192개의 근 106,496개가 단위원 둘레에 옅은 레이스로 번지고, 1의 거듭제곱근 자리마다 구멍이 나요. 그레이 부호로 계수 하나씩 뒤집는 지금 다항식의 근이 불티로 옮겨 다니며 레이스를 다시 밝혀요. K1 을 누르면 단위원이 번쩍여요.","idea":"Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.","buttons":"K1 tap flashes the unit circle the lace hugs.","code":"// ===== Patternflow pattern =====\n// Title:   Littlewood Roots\n// Family:  fractal\n// Idea:    Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: roots of Littlewood polynomials (John Edensor Littlewood, 1966), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1\n//\n// Knob 1: Hue. Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white.\n// Knob 2: Speed. How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs.\n// Knob 3: Degree. The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16.\n// Knob 4: Glow. How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit.\n// Buttons: K1 tap flashes the unit circle the lace hugs.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 44 LEDs per unit: Re z from 0 to 1.45 across, Im z from 1.45 down to\n// -1.45, so the unit circle runs from row 20 to row 108. The set is the same\n// under z -> -z and z -> conj z, so the left half folds onto the right; all\n// roots lie in 1/2 \u003c |z| \u003c 2, and those beyond 1.45 are few.\nconst S = 44;\n// Widths in LEDs of the fine blur, the wide blur the lace is compared with,\n// the sparks and the light they leave.\nconst FINE = 0.6, WIDE = 2.5, SPARK = 1.8, DEP = 1.4;\nconst px = (re) => abs(re) * S - 0.5, py = (im) => H / 2 - 0.5 - im * S;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Normalised Gaussian kernels, three widths each side.\nfunction kernel(sg) {\n  const R = Math.ceil(sg * 3), k = new Float32Array(2 * R + 1);\n  let s = 0;\n  for (let i = -R; i \u003c= R; i++) s += k[i + R] = exp((-i * i) / (2 * sg * sg));\n  for (let i = 0; i \u003c= 2 * R; i++) k[i] /= s;\n  return k;\n}\nconst KF = kernel(FINE), KW = kernel(WIDE);\n\nexport function setup(params) {\n  params.s = {\n    n: 0, M: 0, i: 0, c: null, re: null, im: null, pr: null, pi: null, built: 0,\n    dens: new Float32Array(N), lace: new Float32Array(N), tmp: new Float32Array(N), wide: new Float32Array(N), glow: new Float32Array(N),\n    step: 0, hue: 0, sp: 2, tau: 1, ring: 0, glw: 0.06, col: new Float32Array(12), colHue: -1,\n  };\n}\n\n// The polynomial z^n + z^(n-1) + c(n-2) z^(n-2) + ... + c0 with every c = +-1.\n// Fixing the top two coefficients loses nothing: -p(-z) has the other sign\n// of z^(n-1), and its roots are -z, which fold onto the conjugates of the\n// roots of p. The walk starts at all +1, whose roots are the (n+1)th roots\n// of unity other than 1.\nfunction start(P, n) {\n  P.n = n;\n  P.M = 1 \u003c\u003c (n - 1);\n  P.i = 0;\n  P.built = 0;\n  P.c = new Float64Array(n + 1).fill(1);\n  P.re = new Float64Array(n);\n  P.im = new Float64Array(n);\n  P.pr = new Float64Array(n);\n  P.pi = new Float64Array(n);\n  for (let k = 0; k \u003c n; k++) {\n    const a = (2 * PI * (k + 1)) / (n + 1);\n    P.re[k] = P.pr[k] = cos(a);\n    P.im[k] = P.pi[k] = sin(a);\n  }\n  P.dens.fill(0);\n  P.lace.fill(0);\n}\n\n// Durand-Kerner (Weierstrass) iteration: every root at once moves by\n// p(z_r) / prod (z_r - z_s). Started from the roots of the polynomial one\n// sign flip back, it settles in about eight rounds. Returns false if it has\n// not settled.\nfunction solve(P, rounds) {\n  const n = P.n, c = P.c, re = P.re, im = P.im;\n  for (let it = 0; it \u003c rounds; it++) {\n    let mx = 0;\n    for (let r = 0; r \u003c n; r++) {\n      const x = re[r], y = im[r];\n      let pr = 1, pi = 0;\n      for (let k = n - 1; k >= 0; k--) {\n        const t = pr * x - pi * y + c[k];\n        pi = pr * y + pi * x;\n        pr = t;\n      }\n      let dr = 1, di = 0;\n      for (let s = 0; s \u003c n; s++) {\n        if (s === r) continue;\n        const ux = x - re[s], uy = y - im[s], t = dr * ux - di * uy;\n        di = dr * uy + di * ux;\n        dr = t;\n      }\n      let dd = dr * dr + di * di;\n      if (!(dd > 1e-30)) dd = 1e-30;\n      const qr = (pr * dr + pi * di) / dd, qi = (pi * dr - pr * di) / dd;\n      re[r] = x - qr;\n      im[r] = y - qi;\n      const m = qr * qr + qi * qi;\n      if (m > mx) mx = m;\n    }\n    if (mx \u003c 1e-13) return true;\n  }\n  return false;\n}\n\n// One step along the Gray code: flip the coefficient its index says, then\n// find the new roots. If the warm start fails (two roots nearly meeting),\n// start again from a circle.\nfunction advance(P) {\n  P.i = (P.i + 1) % P.M;\n  let b = P.n - 2;\n  if (P.i) for (b = 0; !((P.i >> b) & 1); b++);\n  P.c[b] = -P.c[b];\n  if (solve(P, 24)) return;\n  for (let k = 0; k \u003c P.n; k++) {\n    P.re[k] = 1.1 * cos((2 * PI * k) / P.n + 0.4);\n    P.im[k] = 1.1 * sin((2 * PI * k) / P.n + 0.4);\n  }\n  solve(P, 80);\n}\n\n// Bilinear splat of the folded roots into the density. The fold puts the\n// mirror line Re z = 0 half a LED left of column 0, so weight that falls\n// into column -1 belongs to column 0.\nfunction splat(P) {\n  const re = P.re, im = P.im, d = P.dens;\n  for (let r = 0; r \u003c P.n; r++) {\n    const X = px(re[r]), Y = py(im[r]);\n    const x0 = floor(X), y0 = floor(Y), fx = X - x0, fy = Y - y0;\n    if (!(x0 >= -1 && x0 \u003c W && y0 >= 0 && y0 \u003c H - 1)) continue;\n    const xa = x0 \u003c 0 ? 0 : x0, xb = x0 + 1;\n    d[y0 * W + xa] += (1 - fx) * (1 - fy);\n    d[(y0 + 1) * W + xa] += (1 - fx) * fy;\n    if (xb \u003c W) {\n      d[y0 * W + xb] += fx * (1 - fy);\n      d[(y0 + 1) * W + xb] += fx * fy;\n    }\n  }\n}\n\n// Separable blur of src into out with kernel k; the column left of 0 is the\n// mirror of column 0, as the fold makes it.\nfunction blur(src, out, tmp, k) {\n  const R = (k.length - 1) / 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        let xx = x + i;\n        if (xx \u003c 0) xx = -1 - xx;\n        else if (xx >= W) continue;\n        a += src[y * W + xx] * k[i + R];\n      }\n      tmp[y * W + x] = a;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        const yy = y + i;\n        if (yy >= 0 && yy \u003c H) a += tmp[yy * W + x] * k[i + R];\n      }\n      out[y * W + x] = a;\n    }\n}\n\n// The lace level, 0..1: the finely blurred density, normalised by the number\n// of roots expected in all so the lace fades in while it builds, and\n// sharpened against its own wide blur, so the holes round the roots of unity\n// go dark and the knots of the fringe stand out of the band.\nfunction tone(P) {\n  const L = P.lace, Wd = P.wide;\n  blur(P.dens, L, P.tmp, KF);\n  blur(P.dens, Wd, P.tmp, KW);\n  // About 3600 LEDs of band at this scale, so this makes its mean density 1.\n  const norm = 3600 / (P.M * P.n);\n  for (let p = 0; p \u003c N; p++) {\n    const a = L[p], q = a / (Wd[p] + 1e-9);\n    L[p] = min(1, min(1, (a * norm) / 2.5) ** 1.2 * min(1.6, q * q));\n  }\n}\n\nfunction blob(G, X, Y, sg, amp) {\n  const R = Math.ceil(sg * 2.6), k = 1 / (2 * sg * sg);\n  const xa = max(0, floor(X - R)), xb = min(W - 1, floor(X + R) + 1), ya = max(0, floor(Y - R)), yb = min(H - 1, floor(Y + R) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - X, dy = y - Y;\n      // The mirror image across Re z = 0 for blobs near the left edge.\n      const dm = x + 1 + X;\n      G[y * W + x] += amp * (exp(-(dx * dx + dy * dy) * k) + (X \u003c R ? exp(-(dm * dm + dy * dy) * k) : 0));\n    }\n}\n\nfunction colours(P) {\n  const h = P.hue + 0.42, c = P.col;\n  // The lace deep where it is thin and paler where it is dense, the light\n  // the sparks leave a little bluer, and the sparks nearly white.\n  hsv(h, 0.85, 1, c, 0);\n  hsv(h + 0.03, 0.4, 1, c, 9);\n  hsv(h + 0.07, 0.5, 1, c, 3);\n  hsv(h + 0.03, 0.18, 1, c, 6);\n  P.colHue = P.hue;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  // About a second at Glow 0, eight at 1.\n  P.glw = cl(k[3], 0, 1);\n  P.tau = 1.2 * 8 ** P.glw;\n  const n = round(cl(k[2], 13, 16));\n  if (n !== P.n) start(P, n);\n  if (P.built \u003c P.M) {\n    // Build the lace: about 1.3 million root updates a frame, so degree 13\n    // takes six frames and degree 16 about two seconds.\n    const per = max(64, floor(1.3e6 / (9 * n * n)));\n    for (let j = 0; j \u003c per && P.built \u003c P.M; j++, P.built++) {\n      advance(P);\n      splat(P);\n    }\n    tone(P);\n    if (P.built >= P.M) {\n      P.step = 0;\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n    }\n  } else {\n    // The walk: 4 x Speed flips a second. A spark glides from where it was\n    // to its new root over the first half of the step and lights the lace\n    // where it lands.\n    P.step += d * 4 * P.sp;\n    while (P.step >= 1) {\n      P.step -= 1;\n      for (let r = 0; r \u003c P.n; r++) blob(P.glow, px(P.re[r]), py(P.im[r]), DEP + 2.2 * P.glw, 0.55);\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n      advance(P);\n    }\n  }\n  const g = P.glow, f = exp(-d / P.tau);\n  for (let p = 0; p \u003c N; p++) g[p] *= f;\n  const b = input.btnPressed || [];\n  if (b[0]) P.ring = 1;\n  P.ring = max(0, P.ring - d * 0.6);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.colHue !== P.hue) colours(P);\n  const L = P.lace, G = P.glow, T = P.tmp, c = P.col;\n  // The sparks into the scratch buffer, eased between their old and new\n  // roots.\n  T.fill(0);\n  if (P.built >= P.M) {\n    let e = cl(P.step * 2, 0, 1);\n    e = e * e * (3 - 2 * e);\n    for (let r = 0; r \u003c P.n; r++) {\n      const x = P.pr[r] + (P.re[r] - P.pr[r]) * e, y = P.pi[r] + (P.im[r] - P.pi[r]) * e;\n      blob(T, px(x), py(y), SPARK + 1.4 * P.glw, 0.36);\n    }\n  }\n  const ring = P.ring * P.ring;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const l = L[p], lace = l > 0.09 ? (0.6 * (l - 0.09)) / 0.91 : 0, sp0 = T[p], m = 0.5 * l * l;\n      // The glow saturates softly and only lights the lace, so a place lit\n      // again and again shows the lace's own grain.\n      const gl = 0.4 * l * (1 - exp(-G[p] * 1.2));\n      let sp = sp0;\n      if (ring > 0) {\n        const re = (x + 0.5) / S, im = (H / 2 - 0.5 - y) / S, dr = (sqrt(re * re + im * im) - 1) * S;\n        sp += 0.45 * ring * exp(-dr * dr * 0.18);\n      }\n      const v1 = lace, v2 = gl, v3 = min(0.5, sp);\n      const lr = c[0] + (c[9] - c[0]) * m, lg = c[1] + (c[10] - c[1]) * m, lb = c[2] + (c[11] - c[2]) * m;\n      const r = lr * v1 + c[3] * v2 + c[6] * v3, g = lg * v1 + c[4] * v2 + c[7] * v3, b = lb * v1 + c[5] * v2 + c[8] * v3;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, b * 255));\n    }\n}\n","layer":{"id":"layer-littlewood-roots","type":"code","name":"littlewood-roots","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Littlewood Roots\n// Family:  fractal\n// Idea:    Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: roots of Littlewood polynomials (John Edensor Littlewood, 1966), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1\n//\n// Knob 1: Hue. Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white.\n// Knob 2: Speed. How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs.\n// Knob 3: Degree. The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16.\n// Knob 4: Glow. How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit.\n// Buttons: K1 tap flashes the unit circle the lace hugs.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 44 LEDs per unit: Re z from 0 to 1.45 across, Im z from 1.45 down to\n// -1.45, so the unit circle runs from row 20 to row 108. The set is the same\n// under z -> -z and z -> conj z, so the left half folds onto the right; all\n// roots lie in 1/2 \u003c |z| \u003c 2, and those beyond 1.45 are few.\nconst S = 44;\n// Widths in LEDs of the fine blur, the wide blur the lace is compared with,\n// the sparks and the light they leave.\nconst FINE = 0.6, WIDE = 2.5, SPARK = 1.8, DEP = 1.4;\nconst px = (re) => abs(re) * S - 0.5, py = (im) => H / 2 - 0.5 - im * S;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Normalised Gaussian kernels, three widths each side.\nfunction kernel(sg) {\n  const R = Math.ceil(sg * 3), k = new Float32Array(2 * R + 1);\n  let s = 0;\n  for (let i = -R; i \u003c= R; i++) s += k[i + R] = exp((-i * i) / (2 * sg * sg));\n  for (let i = 0; i \u003c= 2 * R; i++) k[i] /= s;\n  return k;\n}\nconst KF = kernel(FINE), KW = kernel(WIDE);\n\nexport function setup(params) {\n  params.s = {\n    n: 0, M: 0, i: 0, c: null, re: null, im: null, pr: null, pi: null, built: 0,\n    dens: new Float32Array(N), lace: new Float32Array(N), tmp: new Float32Array(N), wide: new Float32Array(N), glow: new Float32Array(N),\n    step: 0, hue: 0, sp: 2, tau: 1, ring: 0, glw: 0.06, col: new Float32Array(12), colHue: -1,\n  };\n}\n\n// The polynomial z^n + z^(n-1) + c(n-2) z^(n-2) + ... + c0 with every c = +-1.\n// Fixing the top two coefficients loses nothing: -p(-z) has the other sign\n// of z^(n-1), and its roots are -z, which fold onto the conjugates of the\n// roots of p. The walk starts at all +1, whose roots are the (n+1)th roots\n// of unity other than 1.\nfunction start(P, n) {\n  P.n = n;\n  P.M = 1 \u003c\u003c (n - 1);\n  P.i = 0;\n  P.built = 0;\n  P.c = new Float64Array(n + 1).fill(1);\n  P.re = new Float64Array(n);\n  P.im = new Float64Array(n);\n  P.pr = new Float64Array(n);\n  P.pi = new Float64Array(n);\n  for (let k = 0; k \u003c n; k++) {\n    const a = (2 * PI * (k + 1)) / (n + 1);\n    P.re[k] = P.pr[k] = cos(a);\n    P.im[k] = P.pi[k] = sin(a);\n  }\n  P.dens.fill(0);\n  P.lace.fill(0);\n}\n\n// Durand-Kerner (Weierstrass) iteration: every root at once moves by\n// p(z_r) / prod (z_r - z_s). Started from the roots of the polynomial one\n// sign flip back, it settles in about eight rounds. Returns false if it has\n// not settled.\nfunction solve(P, rounds) {\n  const n = P.n, c = P.c, re = P.re, im = P.im;\n  for (let it = 0; it \u003c rounds; it++) {\n    let mx = 0;\n    for (let r = 0; r \u003c n; r++) {\n      const x = re[r], y = im[r];\n      let pr = 1, pi = 0;\n      for (let k = n - 1; k >= 0; k--) {\n        const t = pr * x - pi * y + c[k];\n        pi = pr * y + pi * x;\n        pr = t;\n      }\n      let dr = 1, di = 0;\n      for (let s = 0; s \u003c n; s++) {\n        if (s === r) continue;\n        const ux = x - re[s], uy = y - im[s], t = dr * ux - di * uy;\n        di = dr * uy + di * ux;\n        dr = t;\n      }\n      let dd = dr * dr + di * di;\n      if (!(dd > 1e-30)) dd = 1e-30;\n      const qr = (pr * dr + pi * di) / dd, qi = (pi * dr - pr * di) / dd;\n      re[r] = x - qr;\n      im[r] = y - qi;\n      const m = qr * qr + qi * qi;\n      if (m > mx) mx = m;\n    }\n    if (mx \u003c 1e-13) return true;\n  }\n  return false;\n}\n\n// One step along the Gray code: flip the coefficient its index says, then\n// find the new roots. If the warm start fails (two roots nearly meeting),\n// start again from a circle.\nfunction advance(P) {\n  P.i = (P.i + 1) % P.M;\n  let b = P.n - 2;\n  if (P.i) for (b = 0; !((P.i >> b) & 1); b++);\n  P.c[b] = -P.c[b];\n  if (solve(P, 24)) return;\n  for (let k = 0; k \u003c P.n; k++) {\n    P.re[k] = 1.1 * cos((2 * PI * k) / P.n + 0.4);\n    P.im[k] = 1.1 * sin((2 * PI * k) / P.n + 0.4);\n  }\n  solve(P, 80);\n}\n\n// Bilinear splat of the folded roots into the density. The fold puts the\n// mirror line Re z = 0 half a LED left of column 0, so weight that falls\n// into column -1 belongs to column 0.\nfunction splat(P) {\n  const re = P.re, im = P.im, d = P.dens;\n  for (let r = 0; r \u003c P.n; r++) {\n    const X = px(re[r]), Y = py(im[r]);\n    const x0 = floor(X), y0 = floor(Y), fx = X - x0, fy = Y - y0;\n    if (!(x0 >= -1 && x0 \u003c W && y0 >= 0 && y0 \u003c H - 1)) continue;\n    const xa = x0 \u003c 0 ? 0 : x0, xb = x0 + 1;\n    d[y0 * W + xa] += (1 - fx) * (1 - fy);\n    d[(y0 + 1) * W + xa] += (1 - fx) * fy;\n    if (xb \u003c W) {\n      d[y0 * W + xb] += fx * (1 - fy);\n      d[(y0 + 1) * W + xb] += fx * fy;\n    }\n  }\n}\n\n// Separable blur of src into out with kernel k; the column left of 0 is the\n// mirror of column 0, as the fold makes it.\nfunction blur(src, out, tmp, k) {\n  const R = (k.length - 1) / 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        let xx = x + i;\n        if (xx \u003c 0) xx = -1 - xx;\n        else if (xx >= W) continue;\n        a += src[y * W + xx] * k[i + R];\n      }\n      tmp[y * W + x] = a;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        const yy = y + i;\n        if (yy >= 0 && yy \u003c H) a += tmp[yy * W + x] * k[i + R];\n      }\n      out[y * W + x] = a;\n    }\n}\n\n// The lace level, 0..1: the finely blurred density, normalised by the number\n// of roots expected in all so the lace fades in while it builds, and\n// sharpened against its own wide blur, so the holes round the roots of unity\n// go dark and the knots of the fringe stand out of the band.\nfunction tone(P) {\n  const L = P.lace, Wd = P.wide;\n  blur(P.dens, L, P.tmp, KF);\n  blur(P.dens, Wd, P.tmp, KW);\n  // About 3600 LEDs of band at this scale, so this makes its mean density 1.\n  const norm = 3600 / (P.M * P.n);\n  for (let p = 0; p \u003c N; p++) {\n    const a = L[p], q = a / (Wd[p] + 1e-9);\n    L[p] = min(1, min(1, (a * norm) / 2.5) ** 1.2 * min(1.6, q * q));\n  }\n}\n\nfunction blob(G, X, Y, sg, amp) {\n  const R = Math.ceil(sg * 2.6), k = 1 / (2 * sg * sg);\n  const xa = max(0, floor(X - R)), xb = min(W - 1, floor(X + R) + 1), ya = max(0, floor(Y - R)), yb = min(H - 1, floor(Y + R) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - X, dy = y - Y;\n      // The mirror image across Re z = 0 for blobs near the left edge.\n      const dm = x + 1 + X;\n      G[y * W + x] += amp * (exp(-(dx * dx + dy * dy) * k) + (X \u003c R ? exp(-(dm * dm + dy * dy) * k) : 0));\n    }\n}\n\nfunction colours(P) {\n  const h = P.hue + 0.42, c = P.col;\n  // The lace deep where it is thin and paler where it is dense, the light\n  // the sparks leave a little bluer, and the sparks nearly white.\n  hsv(h, 0.85, 1, c, 0);\n  hsv(h + 0.03, 0.4, 1, c, 9);\n  hsv(h + 0.07, 0.5, 1, c, 3);\n  hsv(h + 0.03, 0.18, 1, c, 6);\n  P.colHue = P.hue;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  // About a second at Glow 0, eight at 1.\n  P.glw = cl(k[3], 0, 1);\n  P.tau = 1.2 * 8 ** P.glw;\n  const n = round(cl(k[2], 13, 16));\n  if (n !== P.n) start(P, n);\n  if (P.built \u003c P.M) {\n    // Build the lace: about 1.3 million root updates a frame, so degree 13\n    // takes six frames and degree 16 about two seconds.\n    const per = max(64, floor(1.3e6 / (9 * n * n)));\n    for (let j = 0; j \u003c per && P.built \u003c P.M; j++, P.built++) {\n      advance(P);\n      splat(P);\n    }\n    tone(P);\n    if (P.built >= P.M) {\n      P.step = 0;\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n    }\n  } else {\n    // The walk: 4 x Speed flips a second. A spark glides from where it was\n    // to its new root over the first half of the step and lights the lace\n    // where it lands.\n    P.step += d * 4 * P.sp;\n    while (P.step >= 1) {\n      P.step -= 1;\n      for (let r = 0; r \u003c P.n; r++) blob(P.glow, px(P.re[r]), py(P.im[r]), DEP + 2.2 * P.glw, 0.55);\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n      advance(P);\n    }\n  }\n  const g = P.glow, f = exp(-d / P.tau);\n  for (let p = 0; p \u003c N; p++) g[p] *= f;\n  const b = input.btnPressed || [];\n  if (b[0]) P.ring = 1;\n  P.ring = max(0, P.ring - d * 0.6);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.colHue !== P.hue) colours(P);\n  const L = P.lace, G = P.glow, T = P.tmp, c = P.col;\n  // The sparks into the scratch buffer, eased between their old and new\n  // roots.\n  T.fill(0);\n  if (P.built >= P.M) {\n    let e = cl(P.step * 2, 0, 1);\n    e = e * e * (3 - 2 * e);\n    for (let r = 0; r \u003c P.n; r++) {\n      const x = P.pr[r] + (P.re[r] - P.pr[r]) * e, y = P.pi[r] + (P.im[r] - P.pi[r]) * e;\n      blob(T, px(x), py(y), SPARK + 1.4 * P.glw, 0.36);\n    }\n  }\n  const ring = P.ring * P.ring;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const l = L[p], lace = l > 0.09 ? (0.6 * (l - 0.09)) / 0.91 : 0, sp0 = T[p], m = 0.5 * l * l;\n      // The glow saturates softly and only lights the lace, so a place lit\n      // again and again shows the lace's own grain.\n      const gl = 0.4 * l * (1 - exp(-G[p] * 1.2));\n      let sp = sp0;\n      if (ring > 0) {\n        const re = (x + 0.5) / S, im = (H / 2 - 0.5 - y) / S, dr = (sqrt(re * re + im * im) - 1) * S;\n        sp += 0.45 * ring * exp(-dr * dr * 0.18);\n      }\n      const v1 = lace, v2 = gl, v3 = min(0.5, sp);\n      const lr = c[0] + (c[9] - c[0]) * m, lg = c[1] + (c[10] - c[1]) * m, lb = c[2] + (c[11] - c[2]) * m;\n      const r = lr * v1 + c[3] * v2 + c[6] * v3, g = lg * v1 + c[4] * v2 + c[7] * v3, b = lb * v1 + c[5] * v2 + c[8] * v3;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, b * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs."},{"name":"Degree","min":13,"max":16,"about":"The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16."},{"name":"Glow","min":0,"max":1,"about":"How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit."}],"start":[0,2,13,0.06],"measures":{"motion":0.2172,"detail":0.0303,"edges":0.1403,"complexity":0.6238,"coverage":0.2539,"colour":0.1322,"drift":0.0228},"knobResponse":[0.0566,0.0256,0.0365,0.0521]},{"slug":"loewner-trace","title":"Loewner Trace","family":"line","round":28,"note":"브라운 운동이 모는 슈람-뢰브너 곡선이 패널만 한 골짜기를 기어오르고, 그 곡선을 푸는 등각 사상의 격자가 곡선 끝을 돌아 휘어요. 화면은 곡선을 따라 끝없이 위로 흘러가요. K3 이 κ 를 4 에서 8 까지 올리면 곡선이 제 몸과 벽에 닿아 가둔 땅을 삼키고, 8 에서는 다 메워요. 누르면 새 브라운 경로로 다시 자라요.","idea":"A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.","buttons":"K1 tap starts a fresh Brownian path from the floor of the channel.","code":"// ===== Patternflow pattern =====\n// Title:   Loewner Trace\n// Family:  line\n// Idea:    A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schramm-Loewner evolution (Oded Schramm, 2000) grown with Loewner's equation (Charles Loewner, 1923), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages.\n// Knob 2: Speed. Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower.\n// Knob 3: Kappa. The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip.\n// Knob 4: Trace. Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black.\n// Buttons: K1 tap starts a fresh Brownian path from the floor of the channel.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, log, atan2, exp, abs, sin, cos, PI, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The panel is a half-strip of the plane 65 LEDs wide, its walls and floor\n// one LED beyond the outer LEDs so that none sits on the boundary. sin()\n// carries the half-strip onto the upper half-plane, where the Loewner\n// equation lives: the floor goes to [-1, 1], the walls to the rest of the\n// real line, and the top of the channel, however far it scrolls, to\n// infinity. Each row up the channel is a factor e^(pi/65) further out.\n// Scale invariance of SLE makes that a channel the curve climbs for ever.\nconst PX = PI / 65;\nconst M = 12; // Laurent terms of g_t at infinity, for rows that scroll in\nconst CAP = 1 \u003c\u003c 16; // steps of driving function kept for the tip\nconst BACK = 6000; // steps walked back when finding the tip\nconst V = 0.025; // LEDs the curve climbs a step, on average\nconst RATE = 600; // steps a second at Speed 1\nconst NEAR = 0.6; // an LED this close to the curve is the curve\nconst KNEAR = 0.1; // the next slit against the w-distance of the LED nearest the tip\nconst TIPROW = 52; // the view scrolls to keep the tip at least this far down\n\nfunction zOf(s, x, py) {\n  const xi = (x - 31.5) * PX, eta = (127 - py + 1 + s.scroll) * PX;\n  const a = exp(eta - s.lnL) * 0.5, b = exp(-eta - s.lnL) * 0.5, il = exp(-s.lnL);\n  const ch = a + b, sh = a - b, c = cos(xi);\n  return [sin(xi) * ch, c * sh, PX * sqrt(c * c * il * il + sh * sh)];\n}\n\nfunction fresh(s) {\n  s.scroll = 0;\n  s.lnL = 0;\n  s.t = 0;\n  s.Wd = 0;\n  s.n = 0;\n  s.tau = 0;\n  s.near = Infinity;\n  s.b.fill(0);\n  s.mk.fill(0);\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const [zx, zy, S] = zOf(s, x, py);\n      s.wx[p] = zx;\n      s.wy[p] = zy;\n      s.d2[p] = S * S;\n    }\n  s.tipx = 31.5;\n  s.tipy = 128;\n}\n\nfunction gauss(s) {\n  if (s.spare !== null) {\n    const g = s.spare;\n    s.spare = null;\n    return g;\n  }\n  let u = Math.random();\n  if (u \u003c 1e-12) u = 1e-12;\n  const r = sqrt(-2 * log(u)), a = 2 * PI * Math.random();\n  s.spare = r * sin(a);\n  return r * cos(a);\n}\n\n// One Loewner step: the driving point jumps, then a vertical slit of\n// half-plane capacity 2 dt grows at it. Every LED's g_t(z) goes through the\n// slit map w -> W + sqrt((w - W)^2 + 4 dt), and so do the Laurent\n// coefficients of g_t at infinity.\nfunction step(s, kappa) {\n  const il2 = exp(-2 * s.lnL), t = s.t;\n  const base = V * PX * sqrt((t + 0.25 * PX * PX * il2) * (il2 + 4 * t));\n  // Where the tip sits in a sheltered passage a small slit at W unrolls\n  // into a long arc on the panel; the LEDs closest to the tip in the\n  // w-plane say how small the next slit must be to stay within one of them.\n  const dt = max(base * 0.02, min(base, s.near * KNEAR));\n  s.Wd += sqrt(kappa * dt) * gauss(s);\n  const Wk = s.Wd, c4 = 4 * dt, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, tau = s.tau;\n  const near2 = NEAR * NEAR;\n  let mmin = Infinity;\n  for (let p = 0; p \u003c N; p++) {\n    if (mk[p]) continue;\n    const ux = wx[p] - Wk, uy = wy[p];\n    const a = ux * ux - uy * uy + c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = b / (2 * re);\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    wx[p] = Wk + re;\n    wy[p] = im;\n    if (m \u003c mmin) mmin = m;\n    const g = (d2[p] *= (ux * ux + uy * uy) / m);\n    if (im * im \u003c near2 * g) (mk[p] = 1), (mt[p] = tau);\n  }\n  s.near = mmin;\n  // Laurent coefficients: g = z (1 + sum V_k z^-k), V_1 = -W, V_k = b_{k-1}.\n  const Vc = s.Vc, P = s.P, Q = s.Q, bb = s.b;\n  Vc[0] = 1;\n  Vc[1] = -Wk;\n  for (let k = 2; k \u003c= M + 1; k++) Vc[k] = bb[k - 1];\n  for (let k = 0; k \u003c= M + 1; k++) {\n    let acc = 0;\n    for (let j = 0; j \u003c= k; j++) acc += Vc[j] * Vc[k - j];\n    P[k] = acc + (k === 2 ? c4 : 0);\n  }\n  Q[0] = 1;\n  for (let k = 1; k \u003c= M + 1; k++) {\n    let acc = P[k];\n    for (let j = 1; j \u003c k; j++) acc -= Q[j] * Q[k - j];\n    Q[k] = acc * 0.5;\n  }\n  for (let n = 1; n \u003c= M; n++) bb[n] = Q[n + 1];\n  if (s.n === CAP) {\n    s.hw.copyWithin(0, CAP / 2);\n    s.ht.copyWithin(0, CAP / 2);\n    s.n = CAP / 2;\n  }\n  s.hw[s.n] = Wk;\n  s.ht[s.n] = dt;\n  s.n++;\n  s.t = t + dt;\n}\n\n// For kappa above 4 the curve hits itself and the walls, and whatever it\n// closes off from the top of the channel leaves the domain: an LED no path\n// of open LEDs joins to the top row is swallowed. At 4 and below SLE is a\n// simple curve that touches nothing, so nothing is filled there, even where\n// two strands pass within an LED of each other.\nfunction fill(s) {\n  const mk = s.mk, seen = s.seen, st = s.stack;\n  seen.fill(0);\n  let top = 0;\n  for (let x = 0; x \u003c W; x++) if (!mk[x]) (seen[x] = 1), (st[top++] = x);\n  while (top) {\n    const p = st[--top], x = p % W;\n    if (x > 0 && !mk[p - 1] && !seen[p - 1]) (seen[p - 1] = 1), (st[top++] = p - 1);\n    if (x \u003c W - 1 && !mk[p + 1] && !seen[p + 1]) (seen[p + 1] = 1), (st[top++] = p + 1);\n    if (p >= W && !mk[p - W] && !seen[p - W]) (seen[p - W] = 1), (st[top++] = p - W);\n    if (p \u003c N - W && !mk[p + W] && !seen[p + W]) (seen[p + W] = 1), (st[top++] = p + W);\n  }\n  for (let p = 0; p \u003c N; p++) if (!mk[p] && !seen[p]) (mk[p] = 2), (s.mt[p] = s.tau);\n}\n\n// The tip, g_t^{-1}(W_t): the slit maps undone newest first.\nfunction tip(s) {\n  const n = s.n;\n  if (!n) return [0, 0];\n  let zx = s.hw[n - 1], zy = 2 * sqrt(s.ht[n - 1]), T = s.t - s.ht[n - 1];\n  const stop = max(0, n - BACK);\n  for (let k = n - 2; k >= stop; k--) {\n    const Wk = s.hw[k], c4 = 4 * s.ht[k];\n    T -= s.ht[k];\n    const ux = zx - Wk, uy = zy;\n    const a = ux * ux - uy * uy - c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = re > 0 ? b / (2 * re) : 0;\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    zx = Wk + re;\n    zy = im;\n  }\n  // Whatever lies further back is small beside the tip: g^{-1}(w) ~ w - 2T/w.\n  if (stop > 0 && T > 0) {\n    const r2 = zx * zx + zy * zy;\n    zx -= (2 * T * zx) / r2;\n    zy += (2 * T * zy) / r2;\n  }\n  return [zx, zy];\n}\n\n// Where a point of the half-plane sits on the panel: arcsin back to the strip.\nfunction toPanel(s, zx, zy) {\n  const il2 = exp(-2 * s.lnL);\n  // q = -i z + sqrt(1/L^2 - z^2), the root of larger modulus.\n  const ax = il2 - (zx * zx - zy * zy), ay = -2 * zx * zy, m = sqrt(ax * ax + ay * ay);\n  let rx, ry;\n  if (ax >= 0) (rx = sqrt((m + ax) * 0.5)), (ry = rx > 0 ? ay / (2 * rx) : 0);\n  else (ry = sqrt((m - ax) * 0.5)), (rx = abs(ay) / (2 * ry)), (ry = ay \u003c 0 ? -ry : ry);\n  let qx = zy + rx, qy = -zx + ry;\n  const q2x = zy - rx, q2y = -zx - ry;\n  if (q2x * q2x + q2y * q2y > qx * qx + qy * qy) (qx = q2x), (qy = q2y);\n  const xi = -atan2(qy, qx), eta = s.lnL + 0.5 * log(qx * qx + qy * qy);\n  return [xi / PX + 31.5, 128 + s.scroll - eta / PX];\n}\n\n// A row scrolling in at the top, far above the hull, takes g_t from its\n// Laurent series at infinity.\nfunction newRow(s) {\n  const wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, bb = s.b;\n  wx.copyWithin(W, 0, N - W);\n  wy.copyWithin(W, 0, N - W);\n  d2.copyWithin(W, 0, N - W);\n  mk.copyWithin(W, 0, N - W);\n  s.mt.copyWithin(W, 0, N - W);\n  s.scroll++;\n  for (let x = 0; x \u003c W; x++) {\n    const [zx, zy, S] = zOf(s, x, 0);\n    const r2 = zx * zx + zy * zy, yx = zx / r2, yy = -zy / r2;\n    // sum b_n y^n and sum n b_n y^(n-1) by Horner.\n    let fx = bb[M], fy = 0, dx = M * bb[M], dy = 0;\n    for (let n = M - 1; n >= 1; n--) {\n      const tx = fx * yx - fy * yy + bb[n];\n      fy = fx * yy + fy * yx;\n      fx = tx;\n      const ex = dx * yx - dy * yy + n * bb[n];\n      dy = dx * yy + dy * yx;\n      dx = ex;\n    }\n    const gx = fx * yx - fy * yy, gy = fx * yy + fy * yx;\n    const y2x = yx * yx - yy * yy, y2y = 2 * yx * yy;\n    const hx = 1 - (dx * y2x - dy * y2y), hy = -(dx * y2y + dy * y2x);\n    wx[x] = zx + gx;\n    wy[x] = zy + gy;\n    d2[x] = (hx * hx + hy * hy) * S * S;\n    mk[x] = 0;\n  }\n  // Keep the numbers small: SLE does not see the scale.\n  if (s.scroll * PX - s.lnL > 9) renorm(s, 4);\n}\n\nfunction renorm(s, lnl) {\n  const l = exp(lnl), il = 1 / l;\n  s.lnL += lnl;\n  for (let p = 0; p \u003c N; p++) {\n    s.wx[p] *= il;\n    s.wy[p] *= il;\n    s.d2[p] *= il * il;\n  }\n  s.Wd *= il;\n  s.t *= il * il;\n  for (let k = 0; k \u003c s.n; k++) (s.hw[k] *= il), (s.ht[k] *= il * il);\n  s.near *= il * il;\n  let f = il;\n  for (let n = 1; n \u003c= M; n++) (f *= il), (s.b[n] *= f);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float64Array(n);\n  params.s = {\n    wx: F(N), wy: F(N), d2: F(N), mk: new Uint8Array(N), mt: F(N),\n    b: F(M + 1), Vc: F(M + 2), P: F(M + 2), Q: F(M + 2), hw: F(CAP), ht: F(CAP),\n    seen: new Uint8Array(N), stack: new Int32Array(N), spare: null, acc: 0, hue: 0, kappa: 4, trace: 0.06,\n    buf: new Float32Array(N * 3), tlut: new Float32Array(LUT * 3), blut: new Float32Array(LUT * 3),\n    side: new Float32Array(12), lutHue: NaN,\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  s.hue = k[0];\n  s.kappa = cl(k[2], 4, 8);\n  s.trace = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) fresh(s);\n  const sp = cl(k[1], 0.2, 3);\n  s.acc += d * sp * RATE;\n  let n = floor(s.acc);\n  s.acc -= n;\n  s.tau += d * sp;\n  while (n-- > 0) step(s, s.kappa);\n  if (s.kappa > 4) fill(s);\n  const [zx, zy] = tip(s);\n  const [px, py] = toPanel(s, zx, zy);\n  s.tipx = px;\n  s.tipy = py;\n  const rows = min(3, ceilPos(TIPROW - py));\n  for (let i = 0; i \u003c rows; i++) newRow(s);\n  s.tipy = py + rows;\n}\nconst ceilPos = (v) => (v > 0 ? Math.ceil(v) : 0);\n\n// Colour stops, turned round the colour wheel by Hue: the trace by its age,\n// new to old; swallowed ground by when it was swallowed; the field on the\n// right and on the left of the curve; the rays and the rings of the grid.\nconst TRACE = [[255, 238, 196], [255, 178, 84], [250, 92, 112], [206, 62, 196], [124, 76, 236]];\nconst BUBBLE = [[150, 40, 92], [112, 34, 128], [58, 40, 128], [96, 30, 70], [150, 40, 92]];\nconst RIGHT = [16, 32, 78], LEFT = [8, 50, 72], RAY = [52, 150, 172], RING = [96, 112, 206];\nconst LUT = 64;\nfunction ramp(stops, out, rot) {\n  const n = stops.length - 1;\n  for (let i = 0; i \u003c LUT; i++) {\n    const u = (i / (LUT - 1)) * n, j = min(n - 1, floor(u)), f = u - j;\n    const c = [0, 1, 2].map((k) => stops[j][k] + (stops[j + 1][k] - stops[j][k]) * f);\n    turn(c, rot, out, i * 3);\n  }\n}\n// A hue turn that keeps the grey axis: rotation about (1, 1, 1).\nfunction turn(c, a, out, o) {\n  const co = cos(a), si = sin(a), k = (1 - co) / 3, r = sqrt(1 / 3) * si;\n  const m0 = co + k, m1 = k - r, m2 = k + r;\n  out[o] = cl(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255);\n  out[o + 1] = cl(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255);\n  out[o + 2] = cl(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255);\n}\n\n// The grid is the conformal map log(g_t(z) - W_t), which unrolls what is\n// left of the channel into a straight strip with the tip at minus infinity:\n// its level lines are circles round the tip and the rays out of it. Where a\n// cell grows large a finer grid fades in, up to three halvings.\nconst DELTA = PI / 8, LEVELS = 4, LOG7 = log(DELTA / 7);\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s) return;\n  const buf = s.buf, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, Wk = s.Wd;\n  const fld = 1 - s.trace, tr = s.tlut, bu = s.blut, side = s.side;\n  if (s.lutHue !== s.hue) {\n    const rot = s.hue * 2 * PI;\n    ramp(TRACE, tr, rot);\n    ramp(BUBBLE, bu, rot);\n    turn(RIGHT, rot, side, 0);\n    turn(LEFT, rot, side, 3);\n    turn(RAY, rot, side, 6);\n    turn(RING, rot, side, 9);\n    s.lutHue = s.hue;\n  }\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (mk[p]) {\n        const age = max(0, s.tau - mt[p]);\n        if (mk[p] === 1) {\n          const i = min(LUT - 1, floor((age / 8) * (LUT - 1))) * 3;\n          buf[q] = tr[i];\n          buf[q + 1] = tr[i + 1];\n          buf[q + 2] = tr[i + 2];\n        } else {\n          // Swallowed ground keeps the colour of the moment it was cut off,\n          // and dims as it ages.\n          const u = mt[p] / 5, i = floor((u - floor(u)) * (LUT - 1)) * 3, v = 0.55 + 0.45 * exp(-age / 6);\n          const hat = ((x + (floor(u * 7) & 1 ? 1 : -1) * (py - s.scroll) + 4096) & 3) === 0 ? 1 : 0.5;\n          buf[q] = bu[i] * v * hat;\n          buf[q + 1] = bu[i + 1] * v * hat;\n          buf[q + 2] = bu[i + 2] * v * hat;\n        }\n        continue;\n      }\n      const ux = wx[p] - Wk, uy = wy[p], r2 = ux * ux + uy * uy, rr = sqrt(r2);\n      const lr = log(rr), th = atan2(uy, ux), lg = 0.5 * log(d2[p]);\n      const cell = DELTA * exp(lr - lg); // LEDs per grid cell here\n      const fa = lr / DELTA, fb = th / DELTA;\n      // Lines, coarse to fine.\n      let ring = 0, ray = 0, cj = cell, sa = fa, sb = fb, chk = 0;\n      const lc = cl((lr - lg + LOG7) * 1.4427, 0, LEVELS - 1.001), jc = floor(lc), fc = lc - jc;\n      for (let j = 0; j \u003c LEVELS && (j \u003c= jc + 1 || cj >= 6); j++) {\n        const ia = floor(sa), ib = floor(sb), nb = round(sb);\n        // The rays at angle 0 and pi are the boundary itself, not grid. The\n        // ray at pi/2 is the hyperbolic geodesic from the tip to the top of\n        // the channel, where the curve is bound, and burns brighter.\n        const da = min(sa - ia, ia + 1 - sa) * cj, db = nb > 0 && nb \u003c 8 \u003c\u003c j ? abs(sb - nb) * cj : 99;\n        const fade = j === 0 ? cl((cj - 2) / 3, 0, 1) : cl((cj - 6) / 6, 0, 1) * 0.6;\n        ring = max(ring, cl(1 - da / 0.8, 0, 1) * fade);\n        ray = max(ray, cl(1 - db / 0.8, 0, 1) * fade * (j === 0 && nb === 4 ? 1.6 : 1));\n        if (j === jc) chk += ((ia + ib) & 1) * (1 - fc);\n        if (j === jc + 1) chk += ((ia + ib) & 1) * fc;\n        cj *= 0.5;\n        sa *= 2;\n        sb *= 2;\n      }\n      // The two sides of the curve: th / pi is the chance that a Brownian\n      // walker from here leaves by the left-hand side.\n      const hs = th / PI, cf = (0.82 + 0.36 * chk * cl((cell - 2) / 3, 0, 1)) * (0.4 + 0.6 * sqrt(uy / rr));\n      let r = (side[0] + (side[3] - side[0]) * hs) * cf * fld;\n      let gg = (side[1] + (side[4] - side[1]) * hs) * cf * fld;\n      let bl = (side[2] + (side[5] - side[2]) * hs) * cf * fld;\n      let li = ring * fld;\n      r += (side[9] - r) * li;\n      gg += (side[10] - gg) * li;\n      bl += (side[11] - bl) * li;\n      li = min(1, ray) * fld;\n      const hot = max(0, ray - 1) * 1.6 * fld;\n      r += (side[6] - r) * li;\n      gg += (side[7] - gg) * li;\n      bl += (side[8] - bl) * li;\n      r += (210 - r) * hot;\n      gg += (240 - gg) * hot;\n      bl += (240 - bl) * hot;\n      buf[q] = r;\n      buf[q + 1] = gg;\n      buf[q + 2] = bl;\n    }\n  // The tip.\n  const tx = s.tipx, ty = s.tipy;\n  for (let y = max(0, floor(ty - 3)); y \u003c= min(H - 1, floor(ty + 3)); y++)\n    for (let x = max(0, floor(tx - 3)); x \u003c= min(W - 1, floor(tx + 3)); x++) {\n      const dd = (x - tx) ** 2 + (y - ty) ** 2, w = exp(-dd / 1.5);\n      const q = (y * W + x) * 3;\n      buf[q] += (255 - buf[q]) * w;\n      buf[q + 1] += (250 - buf[q + 1]) * w;\n      buf[q + 2] += (235 - buf[q + 2]) * w;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-loewner-trace","type":"code","name":"loewner-trace","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Loewner Trace\n// Family:  line\n// Idea:    A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schramm-Loewner evolution (Oded Schramm, 2000) grown with Loewner's equation (Charles Loewner, 1923), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages.\n// Knob 2: Speed. Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower.\n// Knob 3: Kappa. The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip.\n// Knob 4: Trace. Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black.\n// Buttons: K1 tap starts a fresh Brownian path from the floor of the channel.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, log, atan2, exp, abs, sin, cos, PI, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The panel is a half-strip of the plane 65 LEDs wide, its walls and floor\n// one LED beyond the outer LEDs so that none sits on the boundary. sin()\n// carries the half-strip onto the upper half-plane, where the Loewner\n// equation lives: the floor goes to [-1, 1], the walls to the rest of the\n// real line, and the top of the channel, however far it scrolls, to\n// infinity. Each row up the channel is a factor e^(pi/65) further out.\n// Scale invariance of SLE makes that a channel the curve climbs for ever.\nconst PX = PI / 65;\nconst M = 12; // Laurent terms of g_t at infinity, for rows that scroll in\nconst CAP = 1 \u003c\u003c 16; // steps of driving function kept for the tip\nconst BACK = 6000; // steps walked back when finding the tip\nconst V = 0.025; // LEDs the curve climbs a step, on average\nconst RATE = 600; // steps a second at Speed 1\nconst NEAR = 0.6; // an LED this close to the curve is the curve\nconst KNEAR = 0.1; // the next slit against the w-distance of the LED nearest the tip\nconst TIPROW = 52; // the view scrolls to keep the tip at least this far down\n\nfunction zOf(s, x, py) {\n  const xi = (x - 31.5) * PX, eta = (127 - py + 1 + s.scroll) * PX;\n  const a = exp(eta - s.lnL) * 0.5, b = exp(-eta - s.lnL) * 0.5, il = exp(-s.lnL);\n  const ch = a + b, sh = a - b, c = cos(xi);\n  return [sin(xi) * ch, c * sh, PX * sqrt(c * c * il * il + sh * sh)];\n}\n\nfunction fresh(s) {\n  s.scroll = 0;\n  s.lnL = 0;\n  s.t = 0;\n  s.Wd = 0;\n  s.n = 0;\n  s.tau = 0;\n  s.near = Infinity;\n  s.b.fill(0);\n  s.mk.fill(0);\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const [zx, zy, S] = zOf(s, x, py);\n      s.wx[p] = zx;\n      s.wy[p] = zy;\n      s.d2[p] = S * S;\n    }\n  s.tipx = 31.5;\n  s.tipy = 128;\n}\n\nfunction gauss(s) {\n  if (s.spare !== null) {\n    const g = s.spare;\n    s.spare = null;\n    return g;\n  }\n  let u = Math.random();\n  if (u \u003c 1e-12) u = 1e-12;\n  const r = sqrt(-2 * log(u)), a = 2 * PI * Math.random();\n  s.spare = r * sin(a);\n  return r * cos(a);\n}\n\n// One Loewner step: the driving point jumps, then a vertical slit of\n// half-plane capacity 2 dt grows at it. Every LED's g_t(z) goes through the\n// slit map w -> W + sqrt((w - W)^2 + 4 dt), and so do the Laurent\n// coefficients of g_t at infinity.\nfunction step(s, kappa) {\n  const il2 = exp(-2 * s.lnL), t = s.t;\n  const base = V * PX * sqrt((t + 0.25 * PX * PX * il2) * (il2 + 4 * t));\n  // Where the tip sits in a sheltered passage a small slit at W unrolls\n  // into a long arc on the panel; the LEDs closest to the tip in the\n  // w-plane say how small the next slit must be to stay within one of them.\n  const dt = max(base * 0.02, min(base, s.near * KNEAR));\n  s.Wd += sqrt(kappa * dt) * gauss(s);\n  const Wk = s.Wd, c4 = 4 * dt, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, tau = s.tau;\n  const near2 = NEAR * NEAR;\n  let mmin = Infinity;\n  for (let p = 0; p \u003c N; p++) {\n    if (mk[p]) continue;\n    const ux = wx[p] - Wk, uy = wy[p];\n    const a = ux * ux - uy * uy + c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = b / (2 * re);\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    wx[p] = Wk + re;\n    wy[p] = im;\n    if (m \u003c mmin) mmin = m;\n    const g = (d2[p] *= (ux * ux + uy * uy) / m);\n    if (im * im \u003c near2 * g) (mk[p] = 1), (mt[p] = tau);\n  }\n  s.near = mmin;\n  // Laurent coefficients: g = z (1 + sum V_k z^-k), V_1 = -W, V_k = b_{k-1}.\n  const Vc = s.Vc, P = s.P, Q = s.Q, bb = s.b;\n  Vc[0] = 1;\n  Vc[1] = -Wk;\n  for (let k = 2; k \u003c= M + 1; k++) Vc[k] = bb[k - 1];\n  for (let k = 0; k \u003c= M + 1; k++) {\n    let acc = 0;\n    for (let j = 0; j \u003c= k; j++) acc += Vc[j] * Vc[k - j];\n    P[k] = acc + (k === 2 ? c4 : 0);\n  }\n  Q[0] = 1;\n  for (let k = 1; k \u003c= M + 1; k++) {\n    let acc = P[k];\n    for (let j = 1; j \u003c k; j++) acc -= Q[j] * Q[k - j];\n    Q[k] = acc * 0.5;\n  }\n  for (let n = 1; n \u003c= M; n++) bb[n] = Q[n + 1];\n  if (s.n === CAP) {\n    s.hw.copyWithin(0, CAP / 2);\n    s.ht.copyWithin(0, CAP / 2);\n    s.n = CAP / 2;\n  }\n  s.hw[s.n] = Wk;\n  s.ht[s.n] = dt;\n  s.n++;\n  s.t = t + dt;\n}\n\n// For kappa above 4 the curve hits itself and the walls, and whatever it\n// closes off from the top of the channel leaves the domain: an LED no path\n// of open LEDs joins to the top row is swallowed. At 4 and below SLE is a\n// simple curve that touches nothing, so nothing is filled there, even where\n// two strands pass within an LED of each other.\nfunction fill(s) {\n  const mk = s.mk, seen = s.seen, st = s.stack;\n  seen.fill(0);\n  let top = 0;\n  for (let x = 0; x \u003c W; x++) if (!mk[x]) (seen[x] = 1), (st[top++] = x);\n  while (top) {\n    const p = st[--top], x = p % W;\n    if (x > 0 && !mk[p - 1] && !seen[p - 1]) (seen[p - 1] = 1), (st[top++] = p - 1);\n    if (x \u003c W - 1 && !mk[p + 1] && !seen[p + 1]) (seen[p + 1] = 1), (st[top++] = p + 1);\n    if (p >= W && !mk[p - W] && !seen[p - W]) (seen[p - W] = 1), (st[top++] = p - W);\n    if (p \u003c N - W && !mk[p + W] && !seen[p + W]) (seen[p + W] = 1), (st[top++] = p + W);\n  }\n  for (let p = 0; p \u003c N; p++) if (!mk[p] && !seen[p]) (mk[p] = 2), (s.mt[p] = s.tau);\n}\n\n// The tip, g_t^{-1}(W_t): the slit maps undone newest first.\nfunction tip(s) {\n  const n = s.n;\n  if (!n) return [0, 0];\n  let zx = s.hw[n - 1], zy = 2 * sqrt(s.ht[n - 1]), T = s.t - s.ht[n - 1];\n  const stop = max(0, n - BACK);\n  for (let k = n - 2; k >= stop; k--) {\n    const Wk = s.hw[k], c4 = 4 * s.ht[k];\n    T -= s.ht[k];\n    const ux = zx - Wk, uy = zy;\n    const a = ux * ux - uy * uy - c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = re > 0 ? b / (2 * re) : 0;\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    zx = Wk + re;\n    zy = im;\n  }\n  // Whatever lies further back is small beside the tip: g^{-1}(w) ~ w - 2T/w.\n  if (stop > 0 && T > 0) {\n    const r2 = zx * zx + zy * zy;\n    zx -= (2 * T * zx) / r2;\n    zy += (2 * T * zy) / r2;\n  }\n  return [zx, zy];\n}\n\n// Where a point of the half-plane sits on the panel: arcsin back to the strip.\nfunction toPanel(s, zx, zy) {\n  const il2 = exp(-2 * s.lnL);\n  // q = -i z + sqrt(1/L^2 - z^2), the root of larger modulus.\n  const ax = il2 - (zx * zx - zy * zy), ay = -2 * zx * zy, m = sqrt(ax * ax + ay * ay);\n  let rx, ry;\n  if (ax >= 0) (rx = sqrt((m + ax) * 0.5)), (ry = rx > 0 ? ay / (2 * rx) : 0);\n  else (ry = sqrt((m - ax) * 0.5)), (rx = abs(ay) / (2 * ry)), (ry = ay \u003c 0 ? -ry : ry);\n  let qx = zy + rx, qy = -zx + ry;\n  const q2x = zy - rx, q2y = -zx - ry;\n  if (q2x * q2x + q2y * q2y > qx * qx + qy * qy) (qx = q2x), (qy = q2y);\n  const xi = -atan2(qy, qx), eta = s.lnL + 0.5 * log(qx * qx + qy * qy);\n  return [xi / PX + 31.5, 128 + s.scroll - eta / PX];\n}\n\n// A row scrolling in at the top, far above the hull, takes g_t from its\n// Laurent series at infinity.\nfunction newRow(s) {\n  const wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, bb = s.b;\n  wx.copyWithin(W, 0, N - W);\n  wy.copyWithin(W, 0, N - W);\n  d2.copyWithin(W, 0, N - W);\n  mk.copyWithin(W, 0, N - W);\n  s.mt.copyWithin(W, 0, N - W);\n  s.scroll++;\n  for (let x = 0; x \u003c W; x++) {\n    const [zx, zy, S] = zOf(s, x, 0);\n    const r2 = zx * zx + zy * zy, yx = zx / r2, yy = -zy / r2;\n    // sum b_n y^n and sum n b_n y^(n-1) by Horner.\n    let fx = bb[M], fy = 0, dx = M * bb[M], dy = 0;\n    for (let n = M - 1; n >= 1; n--) {\n      const tx = fx * yx - fy * yy + bb[n];\n      fy = fx * yy + fy * yx;\n      fx = tx;\n      const ex = dx * yx - dy * yy + n * bb[n];\n      dy = dx * yy + dy * yx;\n      dx = ex;\n    }\n    const gx = fx * yx - fy * yy, gy = fx * yy + fy * yx;\n    const y2x = yx * yx - yy * yy, y2y = 2 * yx * yy;\n    const hx = 1 - (dx * y2x - dy * y2y), hy = -(dx * y2y + dy * y2x);\n    wx[x] = zx + gx;\n    wy[x] = zy + gy;\n    d2[x] = (hx * hx + hy * hy) * S * S;\n    mk[x] = 0;\n  }\n  // Keep the numbers small: SLE does not see the scale.\n  if (s.scroll * PX - s.lnL > 9) renorm(s, 4);\n}\n\nfunction renorm(s, lnl) {\n  const l = exp(lnl), il = 1 / l;\n  s.lnL += lnl;\n  for (let p = 0; p \u003c N; p++) {\n    s.wx[p] *= il;\n    s.wy[p] *= il;\n    s.d2[p] *= il * il;\n  }\n  s.Wd *= il;\n  s.t *= il * il;\n  for (let k = 0; k \u003c s.n; k++) (s.hw[k] *= il), (s.ht[k] *= il * il);\n  s.near *= il * il;\n  let f = il;\n  for (let n = 1; n \u003c= M; n++) (f *= il), (s.b[n] *= f);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float64Array(n);\n  params.s = {\n    wx: F(N), wy: F(N), d2: F(N), mk: new Uint8Array(N), mt: F(N),\n    b: F(M + 1), Vc: F(M + 2), P: F(M + 2), Q: F(M + 2), hw: F(CAP), ht: F(CAP),\n    seen: new Uint8Array(N), stack: new Int32Array(N), spare: null, acc: 0, hue: 0, kappa: 4, trace: 0.06,\n    buf: new Float32Array(N * 3), tlut: new Float32Array(LUT * 3), blut: new Float32Array(LUT * 3),\n    side: new Float32Array(12), lutHue: NaN,\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  s.hue = k[0];\n  s.kappa = cl(k[2], 4, 8);\n  s.trace = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) fresh(s);\n  const sp = cl(k[1], 0.2, 3);\n  s.acc += d * sp * RATE;\n  let n = floor(s.acc);\n  s.acc -= n;\n  s.tau += d * sp;\n  while (n-- > 0) step(s, s.kappa);\n  if (s.kappa > 4) fill(s);\n  const [zx, zy] = tip(s);\n  const [px, py] = toPanel(s, zx, zy);\n  s.tipx = px;\n  s.tipy = py;\n  const rows = min(3, ceilPos(TIPROW - py));\n  for (let i = 0; i \u003c rows; i++) newRow(s);\n  s.tipy = py + rows;\n}\nconst ceilPos = (v) => (v > 0 ? Math.ceil(v) : 0);\n\n// Colour stops, turned round the colour wheel by Hue: the trace by its age,\n// new to old; swallowed ground by when it was swallowed; the field on the\n// right and on the left of the curve; the rays and the rings of the grid.\nconst TRACE = [[255, 238, 196], [255, 178, 84], [250, 92, 112], [206, 62, 196], [124, 76, 236]];\nconst BUBBLE = [[150, 40, 92], [112, 34, 128], [58, 40, 128], [96, 30, 70], [150, 40, 92]];\nconst RIGHT = [16, 32, 78], LEFT = [8, 50, 72], RAY = [52, 150, 172], RING = [96, 112, 206];\nconst LUT = 64;\nfunction ramp(stops, out, rot) {\n  const n = stops.length - 1;\n  for (let i = 0; i \u003c LUT; i++) {\n    const u = (i / (LUT - 1)) * n, j = min(n - 1, floor(u)), f = u - j;\n    const c = [0, 1, 2].map((k) => stops[j][k] + (stops[j + 1][k] - stops[j][k]) * f);\n    turn(c, rot, out, i * 3);\n  }\n}\n// A hue turn that keeps the grey axis: rotation about (1, 1, 1).\nfunction turn(c, a, out, o) {\n  const co = cos(a), si = sin(a), k = (1 - co) / 3, r = sqrt(1 / 3) * si;\n  const m0 = co + k, m1 = k - r, m2 = k + r;\n  out[o] = cl(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255);\n  out[o + 1] = cl(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255);\n  out[o + 2] = cl(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255);\n}\n\n// The grid is the conformal map log(g_t(z) - W_t), which unrolls what is\n// left of the channel into a straight strip with the tip at minus infinity:\n// its level lines are circles round the tip and the rays out of it. Where a\n// cell grows large a finer grid fades in, up to three halvings.\nconst DELTA = PI / 8, LEVELS = 4, LOG7 = log(DELTA / 7);\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s) return;\n  const buf = s.buf, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, Wk = s.Wd;\n  const fld = 1 - s.trace, tr = s.tlut, bu = s.blut, side = s.side;\n  if (s.lutHue !== s.hue) {\n    const rot = s.hue * 2 * PI;\n    ramp(TRACE, tr, rot);\n    ramp(BUBBLE, bu, rot);\n    turn(RIGHT, rot, side, 0);\n    turn(LEFT, rot, side, 3);\n    turn(RAY, rot, side, 6);\n    turn(RING, rot, side, 9);\n    s.lutHue = s.hue;\n  }\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (mk[p]) {\n        const age = max(0, s.tau - mt[p]);\n        if (mk[p] === 1) {\n          const i = min(LUT - 1, floor((age / 8) * (LUT - 1))) * 3;\n          buf[q] = tr[i];\n          buf[q + 1] = tr[i + 1];\n          buf[q + 2] = tr[i + 2];\n        } else {\n          // Swallowed ground keeps the colour of the moment it was cut off,\n          // and dims as it ages.\n          const u = mt[p] / 5, i = floor((u - floor(u)) * (LUT - 1)) * 3, v = 0.55 + 0.45 * exp(-age / 6);\n          const hat = ((x + (floor(u * 7) & 1 ? 1 : -1) * (py - s.scroll) + 4096) & 3) === 0 ? 1 : 0.5;\n          buf[q] = bu[i] * v * hat;\n          buf[q + 1] = bu[i + 1] * v * hat;\n          buf[q + 2] = bu[i + 2] * v * hat;\n        }\n        continue;\n      }\n      const ux = wx[p] - Wk, uy = wy[p], r2 = ux * ux + uy * uy, rr = sqrt(r2);\n      const lr = log(rr), th = atan2(uy, ux), lg = 0.5 * log(d2[p]);\n      const cell = DELTA * exp(lr - lg); // LEDs per grid cell here\n      const fa = lr / DELTA, fb = th / DELTA;\n      // Lines, coarse to fine.\n      let ring = 0, ray = 0, cj = cell, sa = fa, sb = fb, chk = 0;\n      const lc = cl((lr - lg + LOG7) * 1.4427, 0, LEVELS - 1.001), jc = floor(lc), fc = lc - jc;\n      for (let j = 0; j \u003c LEVELS && (j \u003c= jc + 1 || cj >= 6); j++) {\n        const ia = floor(sa), ib = floor(sb), nb = round(sb);\n        // The rays at angle 0 and pi are the boundary itself, not grid. The\n        // ray at pi/2 is the hyperbolic geodesic from the tip to the top of\n        // the channel, where the curve is bound, and burns brighter.\n        const da = min(sa - ia, ia + 1 - sa) * cj, db = nb > 0 && nb \u003c 8 \u003c\u003c j ? abs(sb - nb) * cj : 99;\n        const fade = j === 0 ? cl((cj - 2) / 3, 0, 1) : cl((cj - 6) / 6, 0, 1) * 0.6;\n        ring = max(ring, cl(1 - da / 0.8, 0, 1) * fade);\n        ray = max(ray, cl(1 - db / 0.8, 0, 1) * fade * (j === 0 && nb === 4 ? 1.6 : 1));\n        if (j === jc) chk += ((ia + ib) & 1) * (1 - fc);\n        if (j === jc + 1) chk += ((ia + ib) & 1) * fc;\n        cj *= 0.5;\n        sa *= 2;\n        sb *= 2;\n      }\n      // The two sides of the curve: th / pi is the chance that a Brownian\n      // walker from here leaves by the left-hand side.\n      const hs = th / PI, cf = (0.82 + 0.36 * chk * cl((cell - 2) / 3, 0, 1)) * (0.4 + 0.6 * sqrt(uy / rr));\n      let r = (side[0] + (side[3] - side[0]) * hs) * cf * fld;\n      let gg = (side[1] + (side[4] - side[1]) * hs) * cf * fld;\n      let bl = (side[2] + (side[5] - side[2]) * hs) * cf * fld;\n      let li = ring * fld;\n      r += (side[9] - r) * li;\n      gg += (side[10] - gg) * li;\n      bl += (side[11] - bl) * li;\n      li = min(1, ray) * fld;\n      const hot = max(0, ray - 1) * 1.6 * fld;\n      r += (side[6] - r) * li;\n      gg += (side[7] - gg) * li;\n      bl += (side[8] - bl) * li;\n      r += (210 - r) * hot;\n      gg += (240 - gg) * hot;\n      bl += (240 - bl) * hot;\n      buf[q] = r;\n      buf[q + 1] = gg;\n      buf[q + 2] = bl;\n    }\n  // The tip.\n  const tx = s.tipx, ty = s.tipy;\n  for (let y = max(0, floor(ty - 3)); y \u003c= min(H - 1, floor(ty + 3)); y++)\n    for (let x = max(0, floor(tx - 3)); x \u003c= min(W - 1, floor(tx + 3)); x++) {\n      const dd = (x - tx) ** 2 + (y - ty) ** 2, w = exp(-dd / 1.5);\n      const q = (y * W + x) * 3;\n      buf[q] += (255 - buf[q]) * w;\n      buf[q + 1] += (250 - buf[q + 1]) * w;\n      buf[q + 2] += (235 - buf[q + 2]) * w;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages."},{"name":"Speed","min":0.2,"max":3,"about":"Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower."},{"name":"Kappa","min":4,"max":8,"about":"The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip."},{"name":"Trace","min":0,"max":1,"about":"Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black."}],"start":[0,2,4,0.06],"measures":{"motion":2.6307,"detail":0.0738,"edges":0.5207,"complexity":1.219,"coverage":0.8893,"colour":0.2244,"drift":0.1264},"knobResponse":[0.1533,0.1433,0.1845,0.1423]},{"slug":"longcase-clock","title":"Longcase Clock","family":"time","round":18,"note":"촛불 켠 밤 방에 128줄을 다 쓰는 괘종시계가 서 있어요. 줄의 유리문 안에서 황동 추가 1초에 한 번씩 흔들리고 무게추가 내려가며, 다이얼 아치의 달 원판이 돌고, 정시마다 꼭대기 종이 번쩍이며 울려요. K3 을 돌리면 촛불이 시계 왼쪽에서 앞을 지나 오른쪽으로 옮겨 가고, 벽에 진 그림자가 반대쪽으로 넘어가요.","idea":"A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","layer":{"id":"layer-longcase-clock","type":"code","name":"longcase-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wood","min":0,"max":1,"about":"The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1."},{"name":"Speed","min":0,"max":3,"about":"How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window."},{"name":"Candle","min":0,"max":1,"about":"Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side."},{"name":"Lamp","min":0,"max":1,"about":"The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.144,"detail":0.0765,"edges":0.4175,"complexity":2.1824,"coverage":0.9202,"colour":0.2877,"drift":0.0825},"knobResponse":[0.0907,0.1391,0.1097,0.2042]},{"slug":"look-and-say","title":"Look and Say","family":"data","round":28,"note":"콘웨이의 보고 말하기 수열이 한 줄씩 제 위 줄을 소리 내어 읽으며 쪽을 내려와요. 줄이 한 걸음에 1.3배씩 길어지면 글자가 3×5 숫자에서 막대로, LED 하나에 숫자 하나로 작아지고, 콘웨이의 원소 92개가 저마다 제 색이에요. K3 이 씨앗을 3, 312, 311311, 고정점 22 로 바꿔요.","idea":"Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.","buttons":"K1 tap starts the page again from the next seed.","code":"// ===== Patternflow pattern =====\n// Title:   Look and Say\n// Family:  data\n// Idea:    Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the look-and-say sequence and its audioactive decay into 92 elements (John Horton Conway, 1986), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream.\n// Knob 2: Speed. How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long.\n// Knob 3: Seed. The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s).\n// Knob 4: Digits. At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold.\n// Buttons: K1 tap starts the page again from the next seed.\n\nconst W = 64, H = 128;\nconst { min, max, floor, ceil, exp, pow, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Conway's 92 elements, H to U: the name, the digits, and what the element\n// becomes when it is read aloud. Every term of the sequence from the eighth\n// on is a row of these, and each element decays on its own.\nconst TABLE = `H 22 H|He 13112221133211322112211213322112 Hf.Pa.H.Ca.Li|Li 312211322212221121123222112 He|Be 111312211312113221133211322112211213322112 Ge.Ca.Li|B 1321132122211322212221121123222112 Be|C 3113112211322112211213322112 B|N 111312212221121123222112 C|O 132112211213322112 N|F 31121123222112 O|Ne 111213322112 F|Na 123222112 Ne|Mg 3113322112 Pm.Na|Al 1113222112 Mg|Si 1322112 Al|P 311311222112 Ho.Si|S 1113122112 P|Cl 132112 S|Ar 3112 Cl|K 1112 Ar|Ca 12 K|Sc 3113112221133112 Ho.Pa.H.Ca.Co|Ti 11131221131112 Sc|V 13211312 Ti|Cr 31132 V|Mn 111311222112 Cr.Si|Fe 13122112 Mn|Co 32112 Fe|Ni 11133112 Zn.Co|Cu 131112 Ni|Zn 312 Cu|Ga 13221133122211332 Eu.Ca.Ac.H.Ca.Zn|Ge 31131122211311122113222 Ho.Ga|As 11131221131211322113322112 Ge.Na|Se 13211321222113222112 As|Br 3113112211322112 Se|Kr 11131221222112 Br|Rb 1321122112 Kr|Sr 3112112 Rb|Y 1112133 Sr.U|Zr 12322211331222113112211 Y.H.Ca.Tc|Nb 1113122113322113111221131221 Er.Zr|Mo 13211322211312113211 Nb|Tc 311322113212221 Mo|Ru 132211331222113112211 Eu.Ca.Tc|Rh 311311222113111221131221 Ho.Ru|Pd 111312211312113211 Rh|Ag 132113212221 Pd|Cd 3113112211 Ag|In 11131221 Cd|Sn 13211 In|Sb 3112221 Pm.Sn|Te 1322113312211 Eu.Ca.Sb|I 311311222113111221 Ho.Te|Xe 11131221131211 I|Cs 13211321 Xe|Ba 311311 Cs|La 11131 Ba|Ce 1321133112 La.H.Ca.Co|Pr 31131112 Ce|Nd 111312 Pr|Pm 132 Nd|Sm 311332 Pm.Ca.Zn|Eu 1113222 Sm|Gd 13221133112 Eu.Ca.Co|Tb 3113112221131112 Ho.Gd|Dy 111312211312 Tb|Ho 1321132 Dy|Er 311311222 Ho.Pm|Tm 11131221133112 Er.Ca.Co|Yb 1321131112 Tm|Lu 311312 Yb|Hf 11132 Lu|Ta 13112221133211322112211213322113 Hf.Pa.H.Ca.W|W 312211322212221121123222113 Ta|Re 111312211312113221133211322112211213322113 Ge.Ca.W|Os 1321132122211322212221121123222113 Re|Ir 3113112211322112211213322113 Os|Pt 111312212221121123222113 Ir|Au 132112211213322113 Pt|Hg 31121123222113 Au|Tl 111213322113 Hg|Pb 123222113 Tl|Bi 3113322113 Pm.Pb|Po 1113222113 Bi|At 1322113 Po|Rn 311311222113 Ho.At|Fr 1113122113 Rn|Ra 132113 Fr|Ac 3113 Ra|Th 1113 Ac|Pa 13 Th|U 3 Pa`;\nconst ROWS = TABLE.split(\"|\").map((r) => r.split(\" \"));\nconst NAME = ROWS.map((r) => r[0]);\nconst LEN = ROWS.map((r) => r[1].length);\nconst DEC = ROWS.map((r) => r[2].split(\".\").map((n) => NAME.indexOf(n)));\nconst NONE = 92;\n\n// The seeds: the first row, the row from which it is a compound of elements,\n// and that compound. Seed 1 runs seven rows before it splits into Hf.Sn.\nconst SEEDS = [\n  [\"1\", 8, \"Hf.Sn\"],\n  [\"3\", 1, \"U\"],\n  [\"312\", 1, \"Zn\"],\n  [\"311311\", 1, \"Ba\"],\n  [\"22\", 1, \"H\"],\n];\n\n// The four prints: cell width and height, digits a line, blank lines between\n// rows, top margin, and how many lines the row read and the row typed may\n// fill together before the page steps down to the next print. Numerals\n// first, then bars one LED wide and as tall as the digit, so a run of equal\n// digits stands as a flat step; then one LED a digit, two LEDs tall, then\n// one.\nconst LV = [\n  { cw: 4, ch: 6, per: 16, gap: 0, top: 1, fit: 16 },\n  { cw: 1, ch: 4, per: 64, gap: 1, top: 0, fit: 24 },\n  { cw: 1, ch: 2, per: 64, gap: 1, top: 0, fit: 48 },\n  { cw: 1, ch: 1, per: 64, gap: 1, top: 0, fit: 999 },\n];\n// 3x5 numerals 1, 2 and 3, one octal digit a row from the top. No other\n// digit ever appears: no run in these seeds is longer than three.\nconst FONT = [0, 0o26227, 0o71747, 0o71317];\n// The largest row the finest print still holds, in lines of 64.\nconst LAST = 120;\n// Rows the page rattles off at the start before it settles to reading.\nconst BURST = 20;\n\nfunction say(d) {\n  const o = [];\n  for (let i = 0; i \u003c d.length; ) {\n    let j = i + 1;\n    while (j \u003c d.length && d[j] === d[i]) j++;\n    o.push(j - i, d[i]);\n    i = j;\n  }\n  return Uint8Array.from(o);\n}\n\nfunction build(P, si) {\n  const [s0, at, comp] = SEEDS[si];\n  const T = [];\n  let d = Uint8Array.from(s0, (c) => +c), E = null;\n  for (let n = 1; n \u003c= 48; n++) {\n    if (n === at) E = comp.split(\".\").map((x) => NAME.indexOf(x));\n    else if (E) E = E.flatMap((k) => DEC[k]);\n    const e = new Uint8Array(d.length).fill(NONE), end = new Uint8Array(d.length);\n    if (E) {\n      let p = 0;\n      for (const k of E) e.fill(k, p, (p += LEN[k])), (end[p - 1] = 1);\n    }\n    T.push({ d, e, end, n: d.length, ri: null });\n    const nx = say(d);\n    if (nx.length > LAST * 64) break;\n    d = nx;\n  }\n  P.si = si;\n  P.T = T;\n  P.lv = 0;\n  P.ls = lines(T, 0);\n  P.l0 = P.ls;\n  P.sc = 0;\n  P.n = 0;\n  P.st = 1;\n  P.w = 0.1;\n  P.r = 0;\n  // The seed is on the page from the start.\n  P.typed = T[0].n;\n  P.at = new Float32Array(T[0].n).fill(P.clock - 1);\n  P.u = 0;\n}\n\n// Where each row starts, in lines of a print.\nfunction lines(T, lv) {\n  const L = LV[lv], ls = new Int32Array(T.length + 1);\n  for (let k = 0; k \u003c T.length; k++) ls[k + 1] = ls[k] + ceil(T[k].n / L.per) + L.gap;\n  return ls;\n}\nconst rowLines = (P, k, lv) => ceil(P.T[k].n / LV[lv].per);\n\n// The runs of the row being read: for each digit, the number of its run.\nfunction runs(t) {\n  if (t.ri) return;\n  t.ri = new Int32Array(t.n);\n  t.rs = [];\n  for (let i = 0, r = -1; i \u003c t.n; i++) {\n    if (i === 0 || t.d[i] !== t.d[i - 1]) r++, t.rs.push(i);\n    t.ri[i] = r;\n  }\n}\n\n// How long a row takes to type: seconds for its runs at the Speed knob.\nfunction dur(P, k) {\n  const runsN = P.T[k].n / 2, f = 2 / P.sp;\n  if (P.l0[k] \u003c BURST) return 0.15 * pow(f, 0.5);\n  if (P.lv === 0) return f * (0.2 + 0.55 * pow(runsN, 0.5));\n  return f * (0.5 + 0.55 * pow(runsN, 0.3));\n}\n\n// The scroll that keeps the typing line at the foot of the panel and the\n// reading head on it.\nfunction want(P, lv, ls, typed) {\n  const L = LV[lv], n = P.n;\n  if (n >= P.T.length) return P.sc;\n  const tl = ls[n] + floor(min(typed, P.T[n].n - 1) / L.per);\n  let s = L.top + (tl + 1) * L.ch + 1 - H;\n  if (n > 0) {\n    const src = P.T[n - 1], i = src.rs ? src.rs[min(src.rs.length - 1, floor(P.r))] : 0;\n    s = min(s, L.top + (ls[n - 1] + floor(i / L.per)) * L.ch - 2);\n  }\n  return max(0, s);\n}\n\nfunction next(P) {\n  P.n++;\n  P.r = 0;\n  P.typed = 0;\n  if (P.n >= P.T.length) return void ((P.st = 3), (P.w = 3));\n  const t = P.T[P.n];\n  runs(P.T[P.n - 1]);\n  P.at = new Float32Array(t.n);\n  P.st = 0;\n  const lv = P.lv;\n  if (lv \u003c 3 && rowLines(P, P.n - 1, lv) + rowLines(P, P.n, lv) > LV[lv].fit) {\n    // Step down a print: every digit flies from its old place to its new one.\n    P.nl = lv + 1;\n    P.nls = lines(P.T, lv + 1);\n    P.nsc = want(P, lv + 1, P.nls, 0);\n    P.st = 2;\n    P.u = 0;\n  }\n}\n\nexport function setup(params) {\n  params.s = { si: 0, off: 0, sp: 2, hue: 0, dig: 0.06, col: new Float32Array(93 * 4 * 3), buf: new Float32Array(W * H * 3), clock: 0 };\n  build(params.s, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.dig = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.off++;\n  const si = (round(cl(k[2], 1, 5)) - 1 + P.off) % SEEDS.length;\n  if (si !== P.si) build(P, si);\n  P.clock += d;\n  if (P.st === 0) {\n    const t = P.T[P.n], rn = t.n / 2;\n    P.r = min(rn, P.r + (d * rn) / dur(P, P.n));\n    // The count is spoken as the run lights up, the digit just after.\n    while (P.typed \u003c t.n && (P.typed >> 1) + (P.typed & 1 ? 0.55 : 0.12) \u003c= P.r) P.at[P.typed++] = P.clock;\n    if (P.typed >= t.n) (P.st = 1), (P.w = P.l0[P.n] \u003c BURST ? 0.03 : 0.35 * (2 / P.sp));\n  } else if (P.st === 1) {\n    P.w -= d;\n    if (P.w \u003c= 0) next(P);\n  } else if (P.st === 2) {\n    P.u += d / 1.6;\n    if (P.u >= 1) (P.lv = P.nl), (P.ls = P.nls), (P.sc = P.nsc), (P.st = 0);\n  } else if (P.st === 3) {\n    P.w -= d;\n    if (P.w \u003c= 0) (P.st = 4), (P.u = 0);\n  } else if (P.st === 4) {\n    P.u += d / 0.8;\n    if (P.u >= 1) build(P, P.si);\n  }\n  if (P.st !== 2) P.sc += (want(P, P.lv, P.ls, P.typed) - P.sc) * (1 - exp(-d * 10));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\n// Colour of each element and digit: element hue by place in Conway's table,\n// from pink at hydrogen through violet and blue to green at uranium, so an\n// element and what it decays into are near in colour. The Digits knob mixes\n// toward a hue for each digit. Rows before the split into elements are pale.\nconst tmp = new Float32Array(6);\nfunction palette(P) {\n  const h0 = P.hue + 0.95, col = P.col, k = cl((P.dig - 0.3) / 0.4, 0, 1), g = k * k * (3 - 2 * k);\n  for (let e = 0; e \u003c= NONE; e++)\n    for (let dg = 1; dg \u003c= 3; dg++) {\n      if (e === NONE) hsv(h0 + 0.2, 0.3, 1, tmp, 0);\n      else hsv(h0 - 0.58 * (e / 91), 0.75, 1, tmp, 0);\n      hsv(h0 + [0, 0.56, 0.85, 0.19][dg], 0.8, 1, tmp, 3);\n      const o = (e * 4 + dg) * 3;\n      for (let c = 0; c \u003c 3; c++) col[o + c] = tmp[c] + (tmp[c + 3] - tmp[c]) * g;\n    }\n}\n\n// One digit onto the buffer in print lv at (x, y), the palette colour at o\n// scaled by v and whitened by w. Behind a numeral lies a strip of tint, open\n// after the last digit of an element; a bar at the end of an element is dimmer.\nfunction put(P, lv, x, y, dg, o, v, w, tint, end) {\n  const buf = P.buf, col = P.col;\n  const r = col[o] * v, g = col[o + 1] * v, b = col[o + 2] * v;\n  const R = r + (255 - r) * w, G = g + (255 - g) * w, B = b + (255 - b) * w;\n  if (lv === 0) {\n    const bits = FONT[dg], tw = end ? 3 : 4;\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const yy = y + gy;\n      if (yy \u003c 0 || yy >= H) continue;\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c tw; gx++) {\n        const xx = x + gx;\n        if (xx >= W) break;\n        const q = (yy * W + xx) * 3;\n        if (gx \u003c 3 && row & (4 >> gx)) (buf[q] = R), (buf[q + 1] = G), (buf[q + 2] = B);\n        else if (tint > 0) (buf[q] = col[o] * tint), (buf[q + 1] = col[o + 1] * tint), (buf[q + 2] = col[o + 2] * tint);\n      }\n    }\n    return;\n  }\n  const m = lv === 1 ? (end ? 0.6 : 1) : lv === 2 ? [0, 0.7, 0.86, 1][dg] : [0, 0.8, 0.9, 1][dg];\n  for (let yy = lv === 1 ? y + 3 - dg : y, y1 = lv === 1 ? y + 3 : y + LV[lv].ch; yy \u003c y1; yy++) {\n    if (yy \u003c 0 || yy >= H || x >= W) continue;\n    const q = (yy * W + x) * 3;\n    buf[q] = R * m;\n    buf[q + 1] = G * m;\n    buf[q + 2] = B * m;\n  }\n}\n\n// Brightness and whitening of digit i of row k: rows long read are dim, the\n// row being read dims behind the reading head, the run under the head lights\n// up, and a digit just typed flashes.\nconst OLD = 0.62, SRC = 0.95;\nfunction look(P, k, i, out) {\n  const n = P.n;\n  out[0] = OLD;\n  out[1] = 0;\n  if (k === n && P.st \u003c= 1) {\n    out[0] = 1;\n    out[1] = 0.85 * exp(-(P.clock - P.at[i]) / 0.22);\n  } else if (k === n - 1 && P.st \u003c= 1) {\n    const t = P.T[k], dr = P.r - t.ri[i];\n    if (dr \u003c 0) out[0] = SRC;\n    else {\n      const tau = dur(P, n) / (P.T[n].n / 2), s = dr \u003c 1 ? 0 : ((dr - 1) * tau) / 0.25;\n      out[1] = 0.8 * exp(-s);\n      out[0] = OLD + (SRC - OLD) * exp(-s * 0.3);\n    }\n  } else if (k === n - 1) out[0] = SRC;\n}\n\nconst lk = new Float32Array(2);\nfunction drawPage(P, lv, ls, sc) {\n  const L = LV[lv], top = L.top - round(sc), tintBase = (1 - P.dig) * 0.13;\n  const last = min(P.n, P.T.length - 1);\n  for (let k = 0; k \u003c= last; k++) {\n    const t = P.T[k], y0 = top + ls[k] * L.ch;\n    if (y0 >= H) break;\n    if (y0 + (ls[k + 1] - ls[k]) * L.ch \u003c 0) continue;\n    const cnt = k === P.n ? (P.st \u003c= 1 ? P.typed : 0) : t.n;\n    for (let i = 0; i \u003c cnt; i++) {\n      const y = y0 + floor(i / L.per) * L.ch;\n      if (y + L.ch \u003c= 0) {\n        i += L.per - 1 - (i % L.per);\n        continue;\n      }\n      if (y >= H) break;\n      look(P, k, i, lk);\n      const e = t.e[i], dg = t.d[i];\n      put(P, lv, (i % L.per) * L.cw, y, dg, (e * 4 + dg) * 3, lk[0], lk[1], e === NONE ? 0 : tintBase * (0.6 + 0.4 * lk[0]), t.end[i]);\n    }\n  }\n}\n\n// Stepping down a print: line by line from the top, each numeral drops to a\n// block and flies to its place in the finer print.\nfunction drawFlight(P) {\n  const A = LV[P.lv], B = LV[P.nl], u = P.u, tintBase = (1 - P.dig) * 0.13;\n  const ta = A.top - round(P.sc), tb = B.top - round(P.nsc);\n  for (let k = 0; k \u003c P.n; k++) {\n    const t = P.T[k];\n    for (let i = 0; i \u003c t.n; i++) {\n      const xa = (i % A.per) * A.cw, ya = ta + (P.ls[k] + floor(i / A.per)) * A.ch;\n      const xb = (i % B.per) * B.cw, yb = tb + (P.nls[k] + floor(i / B.per)) * B.ch;\n      if ((ya \u003c -6 || ya >= H) && (yb \u003c -6 || yb >= H)) continue;\n      const v = k === P.n - 1 ? SRC : OLD, e = t.e[i], dg = t.d[i], o = (e * 4 + dg) * 3;\n      const s = cl((u * 1.5 - 0.5 * cl(ya / H, 0, 1)) * 1.25, 0, 1);\n      if (s \u003c= 0) put(P, P.lv, xa, ya, dg, o, v, 0, e === NONE ? 0 : tintBase * (0.6 + 0.4 * v), t.end[i]);\n      else {\n        const f = s * s * (3 - 2 * s);\n        put(P, P.nl, round(xa + (xb - xa) * f), round(ya + (yb - ya) * f), dg, o, v, 0.5 * (1 - f), 0, t.end[i]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  palette(P);\n  const buf = P.buf;\n  buf.fill(0);\n  if (P.st === 2) drawFlight(P);\n  else drawPage(P, P.lv, P.ls, P.sc);\n  const fade = P.st === 4 ? 1 - P.u : 1;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * fade, buf[p + 1] * fade, buf[p + 2] * fade);\n}\n","layer":{"id":"layer-look-and-say","type":"code","name":"look-and-say","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Look and Say\n// Family:  data\n// Idea:    Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the look-and-say sequence and its audioactive decay into 92 elements (John Horton Conway, 1986), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream.\n// Knob 2: Speed. How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long.\n// Knob 3: Seed. The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s).\n// Knob 4: Digits. At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold.\n// Buttons: K1 tap starts the page again from the next seed.\n\nconst W = 64, H = 128;\nconst { min, max, floor, ceil, exp, pow, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Conway's 92 elements, H to U: the name, the digits, and what the element\n// becomes when it is read aloud. Every term of the sequence from the eighth\n// on is a row of these, and each element decays on its own.\nconst TABLE = `H 22 H|He 13112221133211322112211213322112 Hf.Pa.H.Ca.Li|Li 312211322212221121123222112 He|Be 111312211312113221133211322112211213322112 Ge.Ca.Li|B 1321132122211322212221121123222112 Be|C 3113112211322112211213322112 B|N 111312212221121123222112 C|O 132112211213322112 N|F 31121123222112 O|Ne 111213322112 F|Na 123222112 Ne|Mg 3113322112 Pm.Na|Al 1113222112 Mg|Si 1322112 Al|P 311311222112 Ho.Si|S 1113122112 P|Cl 132112 S|Ar 3112 Cl|K 1112 Ar|Ca 12 K|Sc 3113112221133112 Ho.Pa.H.Ca.Co|Ti 11131221131112 Sc|V 13211312 Ti|Cr 31132 V|Mn 111311222112 Cr.Si|Fe 13122112 Mn|Co 32112 Fe|Ni 11133112 Zn.Co|Cu 131112 Ni|Zn 312 Cu|Ga 13221133122211332 Eu.Ca.Ac.H.Ca.Zn|Ge 31131122211311122113222 Ho.Ga|As 11131221131211322113322112 Ge.Na|Se 13211321222113222112 As|Br 3113112211322112 Se|Kr 11131221222112 Br|Rb 1321122112 Kr|Sr 3112112 Rb|Y 1112133 Sr.U|Zr 12322211331222113112211 Y.H.Ca.Tc|Nb 1113122113322113111221131221 Er.Zr|Mo 13211322211312113211 Nb|Tc 311322113212221 Mo|Ru 132211331222113112211 Eu.Ca.Tc|Rh 311311222113111221131221 Ho.Ru|Pd 111312211312113211 Rh|Ag 132113212221 Pd|Cd 3113112211 Ag|In 11131221 Cd|Sn 13211 In|Sb 3112221 Pm.Sn|Te 1322113312211 Eu.Ca.Sb|I 311311222113111221 Ho.Te|Xe 11131221131211 I|Cs 13211321 Xe|Ba 311311 Cs|La 11131 Ba|Ce 1321133112 La.H.Ca.Co|Pr 31131112 Ce|Nd 111312 Pr|Pm 132 Nd|Sm 311332 Pm.Ca.Zn|Eu 1113222 Sm|Gd 13221133112 Eu.Ca.Co|Tb 3113112221131112 Ho.Gd|Dy 111312211312 Tb|Ho 1321132 Dy|Er 311311222 Ho.Pm|Tm 11131221133112 Er.Ca.Co|Yb 1321131112 Tm|Lu 311312 Yb|Hf 11132 Lu|Ta 13112221133211322112211213322113 Hf.Pa.H.Ca.W|W 312211322212221121123222113 Ta|Re 111312211312113221133211322112211213322113 Ge.Ca.W|Os 1321132122211322212221121123222113 Re|Ir 3113112211322112211213322113 Os|Pt 111312212221121123222113 Ir|Au 132112211213322113 Pt|Hg 31121123222113 Au|Tl 111213322113 Hg|Pb 123222113 Tl|Bi 3113322113 Pm.Pb|Po 1113222113 Bi|At 1322113 Po|Rn 311311222113 Ho.At|Fr 1113122113 Rn|Ra 132113 Fr|Ac 3113 Ra|Th 1113 Ac|Pa 13 Th|U 3 Pa`;\nconst ROWS = TABLE.split(\"|\").map((r) => r.split(\" \"));\nconst NAME = ROWS.map((r) => r[0]);\nconst LEN = ROWS.map((r) => r[1].length);\nconst DEC = ROWS.map((r) => r[2].split(\".\").map((n) => NAME.indexOf(n)));\nconst NONE = 92;\n\n// The seeds: the first row, the row from which it is a compound of elements,\n// and that compound. Seed 1 runs seven rows before it splits into Hf.Sn.\nconst SEEDS = [\n  [\"1\", 8, \"Hf.Sn\"],\n  [\"3\", 1, \"U\"],\n  [\"312\", 1, \"Zn\"],\n  [\"311311\", 1, \"Ba\"],\n  [\"22\", 1, \"H\"],\n];\n\n// The four prints: cell width and height, digits a line, blank lines between\n// rows, top margin, and how many lines the row read and the row typed may\n// fill together before the page steps down to the next print. Numerals\n// first, then bars one LED wide and as tall as the digit, so a run of equal\n// digits stands as a flat step; then one LED a digit, two LEDs tall, then\n// one.\nconst LV = [\n  { cw: 4, ch: 6, per: 16, gap: 0, top: 1, fit: 16 },\n  { cw: 1, ch: 4, per: 64, gap: 1, top: 0, fit: 24 },\n  { cw: 1, ch: 2, per: 64, gap: 1, top: 0, fit: 48 },\n  { cw: 1, ch: 1, per: 64, gap: 1, top: 0, fit: 999 },\n];\n// 3x5 numerals 1, 2 and 3, one octal digit a row from the top. No other\n// digit ever appears: no run in these seeds is longer than three.\nconst FONT = [0, 0o26227, 0o71747, 0o71317];\n// The largest row the finest print still holds, in lines of 64.\nconst LAST = 120;\n// Rows the page rattles off at the start before it settles to reading.\nconst BURST = 20;\n\nfunction say(d) {\n  const o = [];\n  for (let i = 0; i \u003c d.length; ) {\n    let j = i + 1;\n    while (j \u003c d.length && d[j] === d[i]) j++;\n    o.push(j - i, d[i]);\n    i = j;\n  }\n  return Uint8Array.from(o);\n}\n\nfunction build(P, si) {\n  const [s0, at, comp] = SEEDS[si];\n  const T = [];\n  let d = Uint8Array.from(s0, (c) => +c), E = null;\n  for (let n = 1; n \u003c= 48; n++) {\n    if (n === at) E = comp.split(\".\").map((x) => NAME.indexOf(x));\n    else if (E) E = E.flatMap((k) => DEC[k]);\n    const e = new Uint8Array(d.length).fill(NONE), end = new Uint8Array(d.length);\n    if (E) {\n      let p = 0;\n      for (const k of E) e.fill(k, p, (p += LEN[k])), (end[p - 1] = 1);\n    }\n    T.push({ d, e, end, n: d.length, ri: null });\n    const nx = say(d);\n    if (nx.length > LAST * 64) break;\n    d = nx;\n  }\n  P.si = si;\n  P.T = T;\n  P.lv = 0;\n  P.ls = lines(T, 0);\n  P.l0 = P.ls;\n  P.sc = 0;\n  P.n = 0;\n  P.st = 1;\n  P.w = 0.1;\n  P.r = 0;\n  // The seed is on the page from the start.\n  P.typed = T[0].n;\n  P.at = new Float32Array(T[0].n).fill(P.clock - 1);\n  P.u = 0;\n}\n\n// Where each row starts, in lines of a print.\nfunction lines(T, lv) {\n  const L = LV[lv], ls = new Int32Array(T.length + 1);\n  for (let k = 0; k \u003c T.length; k++) ls[k + 1] = ls[k] + ceil(T[k].n / L.per) + L.gap;\n  return ls;\n}\nconst rowLines = (P, k, lv) => ceil(P.T[k].n / LV[lv].per);\n\n// The runs of the row being read: for each digit, the number of its run.\nfunction runs(t) {\n  if (t.ri) return;\n  t.ri = new Int32Array(t.n);\n  t.rs = [];\n  for (let i = 0, r = -1; i \u003c t.n; i++) {\n    if (i === 0 || t.d[i] !== t.d[i - 1]) r++, t.rs.push(i);\n    t.ri[i] = r;\n  }\n}\n\n// How long a row takes to type: seconds for its runs at the Speed knob.\nfunction dur(P, k) {\n  const runsN = P.T[k].n / 2, f = 2 / P.sp;\n  if (P.l0[k] \u003c BURST) return 0.15 * pow(f, 0.5);\n  if (P.lv === 0) return f * (0.2 + 0.55 * pow(runsN, 0.5));\n  return f * (0.5 + 0.55 * pow(runsN, 0.3));\n}\n\n// The scroll that keeps the typing line at the foot of the panel and the\n// reading head on it.\nfunction want(P, lv, ls, typed) {\n  const L = LV[lv], n = P.n;\n  if (n >= P.T.length) return P.sc;\n  const tl = ls[n] + floor(min(typed, P.T[n].n - 1) / L.per);\n  let s = L.top + (tl + 1) * L.ch + 1 - H;\n  if (n > 0) {\n    const src = P.T[n - 1], i = src.rs ? src.rs[min(src.rs.length - 1, floor(P.r))] : 0;\n    s = min(s, L.top + (ls[n - 1] + floor(i / L.per)) * L.ch - 2);\n  }\n  return max(0, s);\n}\n\nfunction next(P) {\n  P.n++;\n  P.r = 0;\n  P.typed = 0;\n  if (P.n >= P.T.length) return void ((P.st = 3), (P.w = 3));\n  const t = P.T[P.n];\n  runs(P.T[P.n - 1]);\n  P.at = new Float32Array(t.n);\n  P.st = 0;\n  const lv = P.lv;\n  if (lv \u003c 3 && rowLines(P, P.n - 1, lv) + rowLines(P, P.n, lv) > LV[lv].fit) {\n    // Step down a print: every digit flies from its old place to its new one.\n    P.nl = lv + 1;\n    P.nls = lines(P.T, lv + 1);\n    P.nsc = want(P, lv + 1, P.nls, 0);\n    P.st = 2;\n    P.u = 0;\n  }\n}\n\nexport function setup(params) {\n  params.s = { si: 0, off: 0, sp: 2, hue: 0, dig: 0.06, col: new Float32Array(93 * 4 * 3), buf: new Float32Array(W * H * 3), clock: 0 };\n  build(params.s, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.dig = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.off++;\n  const si = (round(cl(k[2], 1, 5)) - 1 + P.off) % SEEDS.length;\n  if (si !== P.si) build(P, si);\n  P.clock += d;\n  if (P.st === 0) {\n    const t = P.T[P.n], rn = t.n / 2;\n    P.r = min(rn, P.r + (d * rn) / dur(P, P.n));\n    // The count is spoken as the run lights up, the digit just after.\n    while (P.typed \u003c t.n && (P.typed >> 1) + (P.typed & 1 ? 0.55 : 0.12) \u003c= P.r) P.at[P.typed++] = P.clock;\n    if (P.typed >= t.n) (P.st = 1), (P.w = P.l0[P.n] \u003c BURST ? 0.03 : 0.35 * (2 / P.sp));\n  } else if (P.st === 1) {\n    P.w -= d;\n    if (P.w \u003c= 0) next(P);\n  } else if (P.st === 2) {\n    P.u += d / 1.6;\n    if (P.u >= 1) (P.lv = P.nl), (P.ls = P.nls), (P.sc = P.nsc), (P.st = 0);\n  } else if (P.st === 3) {\n    P.w -= d;\n    if (P.w \u003c= 0) (P.st = 4), (P.u = 0);\n  } else if (P.st === 4) {\n    P.u += d / 0.8;\n    if (P.u >= 1) build(P, P.si);\n  }\n  if (P.st !== 2) P.sc += (want(P, P.lv, P.ls, P.typed) - P.sc) * (1 - exp(-d * 10));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\n// Colour of each element and digit: element hue by place in Conway's table,\n// from pink at hydrogen through violet and blue to green at uranium, so an\n// element and what it decays into are near in colour. The Digits knob mixes\n// toward a hue for each digit. Rows before the split into elements are pale.\nconst tmp = new Float32Array(6);\nfunction palette(P) {\n  const h0 = P.hue + 0.95, col = P.col, k = cl((P.dig - 0.3) / 0.4, 0, 1), g = k * k * (3 - 2 * k);\n  for (let e = 0; e \u003c= NONE; e++)\n    for (let dg = 1; dg \u003c= 3; dg++) {\n      if (e === NONE) hsv(h0 + 0.2, 0.3, 1, tmp, 0);\n      else hsv(h0 - 0.58 * (e / 91), 0.75, 1, tmp, 0);\n      hsv(h0 + [0, 0.56, 0.85, 0.19][dg], 0.8, 1, tmp, 3);\n      const o = (e * 4 + dg) * 3;\n      for (let c = 0; c \u003c 3; c++) col[o + c] = tmp[c] + (tmp[c + 3] - tmp[c]) * g;\n    }\n}\n\n// One digit onto the buffer in print lv at (x, y), the palette colour at o\n// scaled by v and whitened by w. Behind a numeral lies a strip of tint, open\n// after the last digit of an element; a bar at the end of an element is dimmer.\nfunction put(P, lv, x, y, dg, o, v, w, tint, end) {\n  const buf = P.buf, col = P.col;\n  const r = col[o] * v, g = col[o + 1] * v, b = col[o + 2] * v;\n  const R = r + (255 - r) * w, G = g + (255 - g) * w, B = b + (255 - b) * w;\n  if (lv === 0) {\n    const bits = FONT[dg], tw = end ? 3 : 4;\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const yy = y + gy;\n      if (yy \u003c 0 || yy >= H) continue;\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c tw; gx++) {\n        const xx = x + gx;\n        if (xx >= W) break;\n        const q = (yy * W + xx) * 3;\n        if (gx \u003c 3 && row & (4 >> gx)) (buf[q] = R), (buf[q + 1] = G), (buf[q + 2] = B);\n        else if (tint > 0) (buf[q] = col[o] * tint), (buf[q + 1] = col[o + 1] * tint), (buf[q + 2] = col[o + 2] * tint);\n      }\n    }\n    return;\n  }\n  const m = lv === 1 ? (end ? 0.6 : 1) : lv === 2 ? [0, 0.7, 0.86, 1][dg] : [0, 0.8, 0.9, 1][dg];\n  for (let yy = lv === 1 ? y + 3 - dg : y, y1 = lv === 1 ? y + 3 : y + LV[lv].ch; yy \u003c y1; yy++) {\n    if (yy \u003c 0 || yy >= H || x >= W) continue;\n    const q = (yy * W + x) * 3;\n    buf[q] = R * m;\n    buf[q + 1] = G * m;\n    buf[q + 2] = B * m;\n  }\n}\n\n// Brightness and whitening of digit i of row k: rows long read are dim, the\n// row being read dims behind the reading head, the run under the head lights\n// up, and a digit just typed flashes.\nconst OLD = 0.62, SRC = 0.95;\nfunction look(P, k, i, out) {\n  const n = P.n;\n  out[0] = OLD;\n  out[1] = 0;\n  if (k === n && P.st \u003c= 1) {\n    out[0] = 1;\n    out[1] = 0.85 * exp(-(P.clock - P.at[i]) / 0.22);\n  } else if (k === n - 1 && P.st \u003c= 1) {\n    const t = P.T[k], dr = P.r - t.ri[i];\n    if (dr \u003c 0) out[0] = SRC;\n    else {\n      const tau = dur(P, n) / (P.T[n].n / 2), s = dr \u003c 1 ? 0 : ((dr - 1) * tau) / 0.25;\n      out[1] = 0.8 * exp(-s);\n      out[0] = OLD + (SRC - OLD) * exp(-s * 0.3);\n    }\n  } else if (k === n - 1) out[0] = SRC;\n}\n\nconst lk = new Float32Array(2);\nfunction drawPage(P, lv, ls, sc) {\n  const L = LV[lv], top = L.top - round(sc), tintBase = (1 - P.dig) * 0.13;\n  const last = min(P.n, P.T.length - 1);\n  for (let k = 0; k \u003c= last; k++) {\n    const t = P.T[k], y0 = top + ls[k] * L.ch;\n    if (y0 >= H) break;\n    if (y0 + (ls[k + 1] - ls[k]) * L.ch \u003c 0) continue;\n    const cnt = k === P.n ? (P.st \u003c= 1 ? P.typed : 0) : t.n;\n    for (let i = 0; i \u003c cnt; i++) {\n      const y = y0 + floor(i / L.per) * L.ch;\n      if (y + L.ch \u003c= 0) {\n        i += L.per - 1 - (i % L.per);\n        continue;\n      }\n      if (y >= H) break;\n      look(P, k, i, lk);\n      const e = t.e[i], dg = t.d[i];\n      put(P, lv, (i % L.per) * L.cw, y, dg, (e * 4 + dg) * 3, lk[0], lk[1], e === NONE ? 0 : tintBase * (0.6 + 0.4 * lk[0]), t.end[i]);\n    }\n  }\n}\n\n// Stepping down a print: line by line from the top, each numeral drops to a\n// block and flies to its place in the finer print.\nfunction drawFlight(P) {\n  const A = LV[P.lv], B = LV[P.nl], u = P.u, tintBase = (1 - P.dig) * 0.13;\n  const ta = A.top - round(P.sc), tb = B.top - round(P.nsc);\n  for (let k = 0; k \u003c P.n; k++) {\n    const t = P.T[k];\n    for (let i = 0; i \u003c t.n; i++) {\n      const xa = (i % A.per) * A.cw, ya = ta + (P.ls[k] + floor(i / A.per)) * A.ch;\n      const xb = (i % B.per) * B.cw, yb = tb + (P.nls[k] + floor(i / B.per)) * B.ch;\n      if ((ya \u003c -6 || ya >= H) && (yb \u003c -6 || yb >= H)) continue;\n      const v = k === P.n - 1 ? SRC : OLD, e = t.e[i], dg = t.d[i], o = (e * 4 + dg) * 3;\n      const s = cl((u * 1.5 - 0.5 * cl(ya / H, 0, 1)) * 1.25, 0, 1);\n      if (s \u003c= 0) put(P, P.lv, xa, ya, dg, o, v, 0, e === NONE ? 0 : tintBase * (0.6 + 0.4 * v), t.end[i]);\n      else {\n        const f = s * s * (3 - 2 * s);\n        put(P, P.nl, round(xa + (xb - xa) * f), round(ya + (yb - ya) * f), dg, o, v, 0.5 * (1 - f), 0, t.end[i]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  palette(P);\n  const buf = P.buf;\n  buf.fill(0);\n  if (P.st === 2) drawFlight(P);\n  else drawPage(P, P.lv, P.ls, P.sc);\n  const fade = P.st === 4 ? 1 - P.u : 1;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * fade, buf[p + 1] * fade, buf[p + 2] * fade);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long."},{"name":"Seed","min":1,"max":5,"about":"The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s)."},{"name":"Digits","min":0,"max":1,"about":"At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold."}],"start":[0,2,1,0.06],"measures":{"motion":1.7275,"detail":0.2216,"edges":0.866,"complexity":0.242,"coverage":0.6191,"colour":0.2962,"drift":0.1823},"knobResponse":[0.1154,0.1635,0.2082,0.064]},{"slug":"loose-powder","title":"Loose Powder","family":"cosmetic","round":29,"note":"꽃 무늬가 눌린 분홍 압축 파우더 위로 보이지 않는 퍼프가 그림자로만 내려와 자국을 내고, 들릴 때 하얀 가루 구름이 운모 반짝임과 함께 피어 위로 흘러가요. K3 을 올리면 무늬 비탈에 새틴 광이 돌고, 누르면 퍼프가 바로 내려와요.","idea":"A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.","buttons":"K1 tap brings the puff down now, once the last one has lifted.","code":"// ===== Patternflow pattern =====\n// Title:   Loose Powder\n// Family:  cosmetic\n// Idea:    A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the embossed relief of pressed face powder and the puff lifted from it\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1\n//\n// Knob 1: Hue. The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are.\n// Knob 2: Speed. How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower.\n// Knob 3: Shimmer. How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica.\n// Knob 4: Air. How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself.\n// Buttons: K1 tap brings the puff down now, once the last one has lifted.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, sqrt, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The powder ends at row FLOOR, where a gold line edges a white band: the\n// packaging, the only part of it on show. The medallion sits centred above.\nconst FLOOR = 115, MY = 57;\n\n// The emboss, as a height: an eight-petalled flower with a raised rim round\n// each petal, a ring at its heart, a wide ring cut off by the panel's sides\n// and fine rays beyond it. GRAIN is each LED's fixed bit of powder texture and\n// TW the seed of the mica that may sit there.\nconst E = new Float32Array(N), GRAIN = new Float32Array(N), TW = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = x + 0.5 - 32, dy = y + 0.5 - MY, r = hypot(dx, dy), a = atan2(dy, dx);\n    const pet = 21 + 6 * cos(a * 8);\n    let h = cl((pet - r) / 3, 0, 1) * 0.6;\n    h += 0.4 * exp(-(((r - pet) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 8.5) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 42) / 1.3) ** 2));\n    if (r > 44) h += 0.25 * (0.5 + 0.5 * cos(a * 48));\n    const i = y * W + x;\n    E[i] = h;\n    GRAIN[i] = (hash(i) - 0.5) * 0.07;\n    TW[i] = hash(i + 77777);\n  }\n\n// The LEDs that could hold mica, in the order Shimmer turns them on.\nconst MICA = Int32Array.from({ length: FLOOR * W }, (_, i) => i)\n  .filter((i) => TW[i] \u003c 0.02)\n  .sort((a, b) => TW[a] - TW[b]);\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), z: F(MAXP), vx: F(MAXP), vy: F(MAXP), vz: F(MAXP), ph: F(MAXP), om: F(MAXP), mica: new Uint8Array(MAXP),\n    n: 0, dent: F(N), wear: F(N).fill(1), dust: F(N), prof: F(N), hm: F(N), den: F(N), sh: F(N), tmp: F(N), buf: F(N * 3),\n    T: 0, u: 99, wisp: 0, px: 32, py: 64, pz: 40, started: false, hue: 0, shim: 1, air: 0.06, az: 0, col: F(6),\n  };\n}\n\n// One grain of powder into the air at height z. When the air is full, it\n// takes the place of a grain already there.\nfunction emit(S, x, y, z, vx, vy, vz) {\n  let i = S.n;\n  if (i >= MAXP) i = floor(Math.random() * MAXP);\n  else S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.z[i] = z;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  S.vz[i] = vz;\n  // A mica flake turns at its own rate and flashes once a turn.\n  S.mica[i] = Math.random() \u003c 0.04 * S.shim ? 1 : 0;\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.5 + 3.5 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n}\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.z[i] = S.z[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.vz[i] = S.vz[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.mica[i] = S.mica[j];\n}\n\n// The puff's round, in seconds at Speed 2: it comes down, presses, lifts, and\n// the cloud has the rest. R is its radius in LEDs, ZTOP how high it waits.\nconst DOWN = 1.2, PRESS = 0.8, LIFT = 0.7, ROUND = 7, R = 16, ZTOP = 34;\n\n// A new round: the puff picks a spot, and the dent it will press is drawn up.\nfunction start(S) {\n  S.u = 0;\n  S.px = 18 + Math.random() * 28;\n  S.py = 22 + Math.random() * (FLOOR - 46);\n  const p = S.prof;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = hypot(x + 0.5 - S.px, y + 0.5 - S.py);\n      p[y * W + x] = 1 - sstep(R * 0.3, R, r);\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.az = 0.32 * sin(S.T * 0.21) + 0.12 * sin(S.T * 0.53 + 1);\n  if (S.u > ROUND) start(S);\n  const u0 = S.u;\n  S.u += st;\n  const u = S.u;\n  // Height of the puff above the powder, and how deep it is pressed.\n  if (u \u003c DOWN) S.pz = ZTOP * (1 - sstep(0, DOWN, u));\n  else if (u \u003c DOWN + PRESS) S.pz = 0;\n  else S.pz = ZTOP * sstep(DOWN + PRESS, DOWN + PRESS + LIFT * 1.6, u);\n  const press = u \u003c DOWN ? 0 : u \u003c DOWN + PRESS ? sstep(DOWN, DOWN + PRESS * 0.6, u) : 1;\n  // Pressing dents the powder and flattens the emboss under the puff. Both\n  // come back slowly as the cloud dusts the surface, so the round can repeat.\n  const dent = S.dent, wear = S.wear, dust = S.dust, prof = S.prof;\n  const fd = exp(-st / 7), fw = st / 9, fu = exp(-st / 5);\n  for (let i = 0; i \u003c N; i++) {\n    dent[i] *= fd;\n    wear[i] += (1 - wear[i]) * fw;\n    dust[i] *= fu;\n    if (press > 0 && u \u003c DOWN + PRESS + 0.05) {\n      const p = prof[i] * press;\n      if (p > dent[i]) dent[i] = p;\n      const w = 1 - 0.6 * p;\n      if (w \u003c wear[i]) wear[i] = w;\n    }\n  }\n  // Squeezed out at the rim as it presses in, lifted out of the dent as it rises.\n  if (u0 \u003c DOWN + 0.1 && u >= DOWN + 0.1)\n    for (let k = 0; k \u003c 420; k++) {\n      const a = Math.random() * 2 * PI, s = 10 + 22 * Math.random();\n      emit(S, S.px + cos(a) * R * 0.9, S.py + sin(a) * R * 0.9, 0.5 + Math.random() * 2, cos(a) * s, sin(a) * s, 4 + 8 * Math.random());\n    }\n  if (u > DOWN + PRESS && u \u003c DOWN + PRESS + LIFT) {\n    const n = floor((850 * st) / LIFT + Math.random());\n    for (let k = 0; k \u003c n; k++) {\n      const a = Math.random() * 2 * PI, r = R * sqrt(Math.random()) * 0.9, s = 3 + 9 * Math.random();\n      emit(S, S.px + cos(a) * r, S.py + sin(a) * r, Math.random() * 3, cos(a) * s, sin(a) * s, 8 + 12 * Math.random());\n    }\n  }\n  // The air: slow eddies and a drift up the panel, both stronger with Air.\n  // A strong draught lifts wisps of loose powder off the surface by itself.\n  const A = S.air, T = S.T, kd = min(1, 1.2 * st), kz = min(1, 0.9 * st);\n  S.wisp += st * 160 * A * A;\n  while (S.wisp >= 1) {\n    S.wisp -= 1;\n    emit(S, Math.random() * W, 10 + Math.random() * (FLOOR - 10), 0.2, 0, 0, 2 + 4 * Math.random());\n  }\n  for (let i = S.n - 1; i >= 0; i--) {\n    const x = S.x[i], y = S.y[i];\n    const ex = (1.5 + 6 * A) * sin(y * 0.06 + T * 0.4) + (1 + 3 * A) * sin(y * 0.13 - T * 0.3 + x * 0.05);\n    const ey = -(2 + 16 * A) + (1.5 + 4 * A) * sin(x * 0.09 - T * 0.33);\n    S.vx[i] += (ex - S.vx[i]) * kd;\n    S.vy[i] += (ey - S.vy[i]) * kd;\n    S.vz[i] += (-1.3 - S.vz[i]) * kz;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + S.vy[i] * st;\n    S.z[i] += S.vz[i] * st;\n    S.ph[i] += S.om[i] * st;\n    const nx = S.x[i], ny = S.y[i];\n    if (nx \u003c -4 || nx > W + 4 || ny \u003c -6 || ny > FLOOR + 4) {\n      kill(S, i);\n      continue;\n    }\n    if (S.z[i] \u003c= 0) {\n      // Settling: it dusts the powder where it lands.\n      const p = floor(ny) * W + floor(nx);\n      if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c FLOOR) dust[p] = min(1.5, dust[p] + 0.05);\n      kill(S, i);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.shim = cl(k[2], 1, 5);\n  S.air = cl(k[3], 0, 1);\n  // Open with the last round's cloud still in the air and the next puff a\n  // second and a half away.\n  if (!S.started) {\n    S.started = true;\n    start(S);\n    for (let i = 0; i \u003c 162; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.u > DOWN + PRESS + LIFT) start(S);\n  step(S, d * rate);\n}\n\n// Spreads a splat buffer over its neighbours, for a soft cloud.\nfunction blur(a, t, passes) {\n  for (let pass = 0; pass \u003c passes; pass++) {\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        t[i] = (a[i] * 2 + (x > 0 ? a[i - 1] : a[i]) + (x \u003c W - 1 ? a[i + 1] : a[i])) * 0.25;\n      }\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        a[i] = (t[i] * 2 + (y > 0 ? t[i - W] : t[i]) + (y \u003c H - 1 ? t[i + W] : t[i])) * 0.25;\n      }\n  }\n}\nfunction splat(a, x, y, w) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i, py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      a[py * W + px] += w * (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n    }\n}\n\n// The four LEDs beside one, as offsets into the colour buffer.\nconst NB = [-3, 3, -W * 3, W * 3];\n\n// The light comes low from the upper left, so the relief stands out, and sways\n// a little: the sheen and the glints move with it.\nconst LA = atan2(-0.65, -0.55), LZ = 0.5;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, hm = S.hm, den = S.den, sh = S.sh, col = S.col;\n  hsv(S.hue + 0.95, 0.5, 205, col, 0);\n  hsv(S.hue + 0.95, 0.07, 255, col, 3);\n  const la = LA + S.az, lx = cos(la), ly = sin(la);\n  const hl = hypot(lx * 0.894, ly * 0.894, 1.447), hx = (lx * 0.894) / hl, hy = (ly * 0.894) / hl, hz = 1.447 / hl;\n  const sheen = 0.1 + 0.45 * (S.shim - 1);\n  // The height of the surface, then the cloud's density and its shadow,\n  // thrown away from the light by each grain's height.\n  for (let i = 0; i \u003c N; i++) hm[i] = E[i] * S.wear[i] - 0.9 * S.dent[i] + 0.25 * S.dust[i];\n  den.fill(0);\n  sh.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const z = S.z[i];\n    splat(den, S.x[i], S.y[i], 0.55);\n    splat(sh, S.x[i] - lx * z * 0.8, S.y[i] - ly * z * 0.8, 0.35);\n  }\n  blur(den, S.tmp, 2);\n  blur(sh, S.tmp, 1);\n  // The puff's shadow, cast away from the light, softer the higher it is.\n  const sx = S.px - lx * S.pz * 0.8, sy = S.py - ly * S.pz * 0.8, soft = 1.5 + S.pz * 0.3, dark = 0.36 - 0.2 * (S.pz / ZTOP);\n  const sr = R * (1 + S.pz * 0.01);\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3;\n      const gx = (hm[y * W + min(W - 1, x + 1)] - hm[y * W + max(0, x - 1)]) * 1.6;\n      const gy = (hm[min(FLOOR - 1, y + 1) * W + x] - hm[max(0, y - 1) * W + x]) * 1.6;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1), lam = max(0, (-gx * lx - gy * ly + LZ) * inv) / LZ;\n      // Shimmer: a satin sheen on the slopes that face halfway between the\n      // light and the eye.\n      let sp = max(0, (-gx * hx - gy * hy + hz) * inv);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp = sp * sp * sp * sheen;\n      let v = (0.42 + 0.5 * lam) * (1 + GRAIN[i]);\n      // Fresh loose powder on top is paler; the pressed patch a touch deeper.\n      const du = min(1, S.dust[i]) * 0.3, pr = S.dent[i] * 0.1;\n      v *= 1 - pr;\n      const c = sh[i] * 1.4;\n      v *= 1 - (0.16 * c) / (1 + c);\n      const ddx = x + 0.5 - sx, ddy = y + 0.5 - sy, dd = ddx * ddx + ddy * ddy;\n      if (S.pz \u003c ZTOP * 0.99 && dd \u003c (sr + soft) ** 2) v *= 1 - dark * (1 - sstep(sr - soft, sr + soft, sqrt(dd)));\n      let r = col[0] * v + 250 * sp, g = col[1] * v + 240 * sp, b = col[2] * v + 225 * sp;\n      r += (col[3] * v - r) * du;\n      g += (col[4] * v - g) * du;\n      b += (col[5] * v - b) * du;\n      // The cloud in the air, lit and pale.\n      const e = den[i] * 1.8, a = min(0.9, e / (1 + e));\n      buf[q] = r + (col[3] - r) * a;\n      buf[q + 1] = g + (col[4] - g) * a;\n      buf[q + 2] = b + (col[5] - b) * a;\n    }\n  // The white band, and the gold line along its top with a highlight that\n  // slides along it as the light sways.\n  {\n    const gx = 32 + 110 * S.az;\n    for (let y = FLOOR; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const q = (y * W + x) * 3, gold = y === FLOOR ? 1 : y === FLOOR + 1 ? 0.35 : 0;\n        const hl = 0.8 + 0.45 * exp(-((x - gx) ** 2) / 50);\n        buf[q] = 222 + (240 * hl - 222) * gold;\n        buf[q + 1] = 216 + (178 * hl - 216) * gold;\n        buf[q + 2] = 208 + (70 * hl - 208) * gold;\n      }\n  }\n  // Mica pressed into the powder: a few LEDs, more with Shimmer, each glinting\n  // when the swaying light passes the angle of its face.\n  const lim = 0.004 * S.shim;\n  for (let k = 0; k \u003c MICA.length && TW[MICA[k]] \u003c lim; k++) {\n    const i = MICA[k];\n    const g = exp((cos(TW[i] * 1500 + S.az * 7) - 1) / 0.03) * (1 - min(1, S.dent[i]));\n    if (g \u003c 0.02) continue;\n    const q = i * 3, v = 230 * g;\n    buf[q] += v;\n    buf[q + 1] += v * 0.92;\n    buf[q + 2] += v * 0.8;\n  }\n  // Mica in the cloud: each flake turns and flashes as its face meets the light.\n  for (let i = 0; i \u003c S.n; i++) {\n    if (!S.mica[i]) continue;\n    const f = exp((cos(S.ph[i]) - 1) / 0.05), v = 40 + 260 * f;\n    const x = floor(S.x[i]), y = floor(S.y[i]);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= FLOOR - 1) continue;\n    const q = (y * W + x) * 3;\n    buf[q] += v;\n    buf[q + 1] += v * 0.95;\n    buf[q + 2] += v * 0.85;\n    // A flash spills a little onto the LEDs beside it, or it looks pinpricked.\n    if (f > 0.3)\n      for (const o of NB) {\n        buf[q + o] += v * 0.25;\n        buf[q + o + 1] += v * 0.24;\n        buf[q + o + 2] += v * 0.21;\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-loose-powder","type":"code","name":"loose-powder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Loose Powder\n// Family:  cosmetic\n// Idea:    A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the embossed relief of pressed face powder and the puff lifted from it\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1\n//\n// Knob 1: Hue. The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are.\n// Knob 2: Speed. How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower.\n// Knob 3: Shimmer. How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica.\n// Knob 4: Air. How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself.\n// Buttons: K1 tap brings the puff down now, once the last one has lifted.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, sqrt, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The powder ends at row FLOOR, where a gold line edges a white band: the\n// packaging, the only part of it on show. The medallion sits centred above.\nconst FLOOR = 115, MY = 57;\n\n// The emboss, as a height: an eight-petalled flower with a raised rim round\n// each petal, a ring at its heart, a wide ring cut off by the panel's sides\n// and fine rays beyond it. GRAIN is each LED's fixed bit of powder texture and\n// TW the seed of the mica that may sit there.\nconst E = new Float32Array(N), GRAIN = new Float32Array(N), TW = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = x + 0.5 - 32, dy = y + 0.5 - MY, r = hypot(dx, dy), a = atan2(dy, dx);\n    const pet = 21 + 6 * cos(a * 8);\n    let h = cl((pet - r) / 3, 0, 1) * 0.6;\n    h += 0.4 * exp(-(((r - pet) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 8.5) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 42) / 1.3) ** 2));\n    if (r > 44) h += 0.25 * (0.5 + 0.5 * cos(a * 48));\n    const i = y * W + x;\n    E[i] = h;\n    GRAIN[i] = (hash(i) - 0.5) * 0.07;\n    TW[i] = hash(i + 77777);\n  }\n\n// The LEDs that could hold mica, in the order Shimmer turns them on.\nconst MICA = Int32Array.from({ length: FLOOR * W }, (_, i) => i)\n  .filter((i) => TW[i] \u003c 0.02)\n  .sort((a, b) => TW[a] - TW[b]);\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), z: F(MAXP), vx: F(MAXP), vy: F(MAXP), vz: F(MAXP), ph: F(MAXP), om: F(MAXP), mica: new Uint8Array(MAXP),\n    n: 0, dent: F(N), wear: F(N).fill(1), dust: F(N), prof: F(N), hm: F(N), den: F(N), sh: F(N), tmp: F(N), buf: F(N * 3),\n    T: 0, u: 99, wisp: 0, px: 32, py: 64, pz: 40, started: false, hue: 0, shim: 1, air: 0.06, az: 0, col: F(6),\n  };\n}\n\n// One grain of powder into the air at height z. When the air is full, it\n// takes the place of a grain already there.\nfunction emit(S, x, y, z, vx, vy, vz) {\n  let i = S.n;\n  if (i >= MAXP) i = floor(Math.random() * MAXP);\n  else S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.z[i] = z;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  S.vz[i] = vz;\n  // A mica flake turns at its own rate and flashes once a turn.\n  S.mica[i] = Math.random() \u003c 0.04 * S.shim ? 1 : 0;\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.5 + 3.5 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n}\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.z[i] = S.z[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.vz[i] = S.vz[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.mica[i] = S.mica[j];\n}\n\n// The puff's round, in seconds at Speed 2: it comes down, presses, lifts, and\n// the cloud has the rest. R is its radius in LEDs, ZTOP how high it waits.\nconst DOWN = 1.2, PRESS = 0.8, LIFT = 0.7, ROUND = 7, R = 16, ZTOP = 34;\n\n// A new round: the puff picks a spot, and the dent it will press is drawn up.\nfunction start(S) {\n  S.u = 0;\n  S.px = 18 + Math.random() * 28;\n  S.py = 22 + Math.random() * (FLOOR - 46);\n  const p = S.prof;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = hypot(x + 0.5 - S.px, y + 0.5 - S.py);\n      p[y * W + x] = 1 - sstep(R * 0.3, R, r);\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.az = 0.32 * sin(S.T * 0.21) + 0.12 * sin(S.T * 0.53 + 1);\n  if (S.u > ROUND) start(S);\n  const u0 = S.u;\n  S.u += st;\n  const u = S.u;\n  // Height of the puff above the powder, and how deep it is pressed.\n  if (u \u003c DOWN) S.pz = ZTOP * (1 - sstep(0, DOWN, u));\n  else if (u \u003c DOWN + PRESS) S.pz = 0;\n  else S.pz = ZTOP * sstep(DOWN + PRESS, DOWN + PRESS + LIFT * 1.6, u);\n  const press = u \u003c DOWN ? 0 : u \u003c DOWN + PRESS ? sstep(DOWN, DOWN + PRESS * 0.6, u) : 1;\n  // Pressing dents the powder and flattens the emboss under the puff. Both\n  // come back slowly as the cloud dusts the surface, so the round can repeat.\n  const dent = S.dent, wear = S.wear, dust = S.dust, prof = S.prof;\n  const fd = exp(-st / 7), fw = st / 9, fu = exp(-st / 5);\n  for (let i = 0; i \u003c N; i++) {\n    dent[i] *= fd;\n    wear[i] += (1 - wear[i]) * fw;\n    dust[i] *= fu;\n    if (press > 0 && u \u003c DOWN + PRESS + 0.05) {\n      const p = prof[i] * press;\n      if (p > dent[i]) dent[i] = p;\n      const w = 1 - 0.6 * p;\n      if (w \u003c wear[i]) wear[i] = w;\n    }\n  }\n  // Squeezed out at the rim as it presses in, lifted out of the dent as it rises.\n  if (u0 \u003c DOWN + 0.1 && u >= DOWN + 0.1)\n    for (let k = 0; k \u003c 420; k++) {\n      const a = Math.random() * 2 * PI, s = 10 + 22 * Math.random();\n      emit(S, S.px + cos(a) * R * 0.9, S.py + sin(a) * R * 0.9, 0.5 + Math.random() * 2, cos(a) * s, sin(a) * s, 4 + 8 * Math.random());\n    }\n  if (u > DOWN + PRESS && u \u003c DOWN + PRESS + LIFT) {\n    const n = floor((850 * st) / LIFT + Math.random());\n    for (let k = 0; k \u003c n; k++) {\n      const a = Math.random() * 2 * PI, r = R * sqrt(Math.random()) * 0.9, s = 3 + 9 * Math.random();\n      emit(S, S.px + cos(a) * r, S.py + sin(a) * r, Math.random() * 3, cos(a) * s, sin(a) * s, 8 + 12 * Math.random());\n    }\n  }\n  // The air: slow eddies and a drift up the panel, both stronger with Air.\n  // A strong draught lifts wisps of loose powder off the surface by itself.\n  const A = S.air, T = S.T, kd = min(1, 1.2 * st), kz = min(1, 0.9 * st);\n  S.wisp += st * 160 * A * A;\n  while (S.wisp >= 1) {\n    S.wisp -= 1;\n    emit(S, Math.random() * W, 10 + Math.random() * (FLOOR - 10), 0.2, 0, 0, 2 + 4 * Math.random());\n  }\n  for (let i = S.n - 1; i >= 0; i--) {\n    const x = S.x[i], y = S.y[i];\n    const ex = (1.5 + 6 * A) * sin(y * 0.06 + T * 0.4) + (1 + 3 * A) * sin(y * 0.13 - T * 0.3 + x * 0.05);\n    const ey = -(2 + 16 * A) + (1.5 + 4 * A) * sin(x * 0.09 - T * 0.33);\n    S.vx[i] += (ex - S.vx[i]) * kd;\n    S.vy[i] += (ey - S.vy[i]) * kd;\n    S.vz[i] += (-1.3 - S.vz[i]) * kz;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + S.vy[i] * st;\n    S.z[i] += S.vz[i] * st;\n    S.ph[i] += S.om[i] * st;\n    const nx = S.x[i], ny = S.y[i];\n    if (nx \u003c -4 || nx > W + 4 || ny \u003c -6 || ny > FLOOR + 4) {\n      kill(S, i);\n      continue;\n    }\n    if (S.z[i] \u003c= 0) {\n      // Settling: it dusts the powder where it lands.\n      const p = floor(ny) * W + floor(nx);\n      if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c FLOOR) dust[p] = min(1.5, dust[p] + 0.05);\n      kill(S, i);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.shim = cl(k[2], 1, 5);\n  S.air = cl(k[3], 0, 1);\n  // Open with the last round's cloud still in the air and the next puff a\n  // second and a half away.\n  if (!S.started) {\n    S.started = true;\n    start(S);\n    for (let i = 0; i \u003c 162; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.u > DOWN + PRESS + LIFT) start(S);\n  step(S, d * rate);\n}\n\n// Spreads a splat buffer over its neighbours, for a soft cloud.\nfunction blur(a, t, passes) {\n  for (let pass = 0; pass \u003c passes; pass++) {\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        t[i] = (a[i] * 2 + (x > 0 ? a[i - 1] : a[i]) + (x \u003c W - 1 ? a[i + 1] : a[i])) * 0.25;\n      }\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        a[i] = (t[i] * 2 + (y > 0 ? t[i - W] : t[i]) + (y \u003c H - 1 ? t[i + W] : t[i])) * 0.25;\n      }\n  }\n}\nfunction splat(a, x, y, w) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i, py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      a[py * W + px] += w * (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n    }\n}\n\n// The four LEDs beside one, as offsets into the colour buffer.\nconst NB = [-3, 3, -W * 3, W * 3];\n\n// The light comes low from the upper left, so the relief stands out, and sways\n// a little: the sheen and the glints move with it.\nconst LA = atan2(-0.65, -0.55), LZ = 0.5;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, hm = S.hm, den = S.den, sh = S.sh, col = S.col;\n  hsv(S.hue + 0.95, 0.5, 205, col, 0);\n  hsv(S.hue + 0.95, 0.07, 255, col, 3);\n  const la = LA + S.az, lx = cos(la), ly = sin(la);\n  const hl = hypot(lx * 0.894, ly * 0.894, 1.447), hx = (lx * 0.894) / hl, hy = (ly * 0.894) / hl, hz = 1.447 / hl;\n  const sheen = 0.1 + 0.45 * (S.shim - 1);\n  // The height of the surface, then the cloud's density and its shadow,\n  // thrown away from the light by each grain's height.\n  for (let i = 0; i \u003c N; i++) hm[i] = E[i] * S.wear[i] - 0.9 * S.dent[i] + 0.25 * S.dust[i];\n  den.fill(0);\n  sh.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const z = S.z[i];\n    splat(den, S.x[i], S.y[i], 0.55);\n    splat(sh, S.x[i] - lx * z * 0.8, S.y[i] - ly * z * 0.8, 0.35);\n  }\n  blur(den, S.tmp, 2);\n  blur(sh, S.tmp, 1);\n  // The puff's shadow, cast away from the light, softer the higher it is.\n  const sx = S.px - lx * S.pz * 0.8, sy = S.py - ly * S.pz * 0.8, soft = 1.5 + S.pz * 0.3, dark = 0.36 - 0.2 * (S.pz / ZTOP);\n  const sr = R * (1 + S.pz * 0.01);\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3;\n      const gx = (hm[y * W + min(W - 1, x + 1)] - hm[y * W + max(0, x - 1)]) * 1.6;\n      const gy = (hm[min(FLOOR - 1, y + 1) * W + x] - hm[max(0, y - 1) * W + x]) * 1.6;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1), lam = max(0, (-gx * lx - gy * ly + LZ) * inv) / LZ;\n      // Shimmer: a satin sheen on the slopes that face halfway between the\n      // light and the eye.\n      let sp = max(0, (-gx * hx - gy * hy + hz) * inv);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp = sp * sp * sp * sheen;\n      let v = (0.42 + 0.5 * lam) * (1 + GRAIN[i]);\n      // Fresh loose powder on top is paler; the pressed patch a touch deeper.\n      const du = min(1, S.dust[i]) * 0.3, pr = S.dent[i] * 0.1;\n      v *= 1 - pr;\n      const c = sh[i] * 1.4;\n      v *= 1 - (0.16 * c) / (1 + c);\n      const ddx = x + 0.5 - sx, ddy = y + 0.5 - sy, dd = ddx * ddx + ddy * ddy;\n      if (S.pz \u003c ZTOP * 0.99 && dd \u003c (sr + soft) ** 2) v *= 1 - dark * (1 - sstep(sr - soft, sr + soft, sqrt(dd)));\n      let r = col[0] * v + 250 * sp, g = col[1] * v + 240 * sp, b = col[2] * v + 225 * sp;\n      r += (col[3] * v - r) * du;\n      g += (col[4] * v - g) * du;\n      b += (col[5] * v - b) * du;\n      // The cloud in the air, lit and pale.\n      const e = den[i] * 1.8, a = min(0.9, e / (1 + e));\n      buf[q] = r + (col[3] - r) * a;\n      buf[q + 1] = g + (col[4] - g) * a;\n      buf[q + 2] = b + (col[5] - b) * a;\n    }\n  // The white band, and the gold line along its top with a highlight that\n  // slides along it as the light sways.\n  {\n    const gx = 32 + 110 * S.az;\n    for (let y = FLOOR; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const q = (y * W + x) * 3, gold = y === FLOOR ? 1 : y === FLOOR + 1 ? 0.35 : 0;\n        const hl = 0.8 + 0.45 * exp(-((x - gx) ** 2) / 50);\n        buf[q] = 222 + (240 * hl - 222) * gold;\n        buf[q + 1] = 216 + (178 * hl - 216) * gold;\n        buf[q + 2] = 208 + (70 * hl - 208) * gold;\n      }\n  }\n  // Mica pressed into the powder: a few LEDs, more with Shimmer, each glinting\n  // when the swaying light passes the angle of its face.\n  const lim = 0.004 * S.shim;\n  for (let k = 0; k \u003c MICA.length && TW[MICA[k]] \u003c lim; k++) {\n    const i = MICA[k];\n    const g = exp((cos(TW[i] * 1500 + S.az * 7) - 1) / 0.03) * (1 - min(1, S.dent[i]));\n    if (g \u003c 0.02) continue;\n    const q = i * 3, v = 230 * g;\n    buf[q] += v;\n    buf[q + 1] += v * 0.92;\n    buf[q + 2] += v * 0.8;\n  }\n  // Mica in the cloud: each flake turns and flashes as its face meets the light.\n  for (let i = 0; i \u003c S.n; i++) {\n    if (!S.mica[i]) continue;\n    const f = exp((cos(S.ph[i]) - 1) / 0.05), v = 40 + 260 * f;\n    const x = floor(S.x[i]), y = floor(S.y[i]);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= FLOOR - 1) continue;\n    const q = (y * W + x) * 3;\n    buf[q] += v;\n    buf[q + 1] += v * 0.95;\n    buf[q + 2] += v * 0.85;\n    // A flash spills a little onto the LEDs beside it, or it looks pinpricked.\n    if (f > 0.3)\n      for (const o of NB) {\n        buf[q + o] += v * 0.25;\n        buf[q + o + 1] += v * 0.24;\n        buf[q + o + 2] += v * 0.21;\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower."},{"name":"Shimmer","min":1,"max":5,"about":"How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica."},{"name":"Air","min":0,"max":1,"about":"How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself."}],"start":[0,2,1,0.06],"measures":{"motion":0.0756,"detail":0.0494,"edges":0.1592,"complexity":2.3434,"coverage":1,"colour":0.2039,"drift":0.0525},"knobResponse":[0.2504,0.0583,0.0484,0.0614]},{"slug":"lotion-ribbon","title":"Lotion Ribbon","family":"cosmetic","round":36,"note":"위에서 굵은 로션 줄기가 쏟아지며 가늘어지고, 닿는 자리에서 꿀처럼 똬리를 틀어 접힌 더미를 쌓아요. K3 은 로션의 무게라서 묽은 세럼은 작은 고리로 빨리 감기고 바디 버터는 25 LED 너비의 고리로 천천히 접혀요. K1 을 누르면 줄기가 끊기고, 더미가 가라앉은 뒤 새 줄기가 내려와요.","idea":"A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.","buttons":"K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.","code":"// ===== Patternflow pattern =====\n// Title:   Lotion Ribbon\n// Family:  cosmetic\n// Idea:    A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after the slow pour of body lotion in skincare films; the coiling follows liquid rope coiling (Neil Ribe, 2004) and the heap spreads as a viscous gravity current (Herbert Huppert, 1982)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Thick. How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up.\n// Knob 4: Gloss. At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim.\n// Buttons: K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.\n\nconst W = 64, H = 128, N = W * H;\n// The counter under the heap, one cell an LED: x 0..63, z from -28 at the\n// back to 36 at the front, below the bottom edge.\nconst GX = 64, GZ = 64, ZC = 28, NG = GX * GZ;\n// The heap's bulk flows on cells two LEDs square; the fresh folds lie on the\n// LED cells above it.\nconst BX = GX / 2, BZ = GZ / 2, NB = BX * BZ;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, pow, round, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[0] = r;\n  out[1] = g;\n  out[2] = b;\n}\n\n// The camera looks down at the counter from EL radians above level. A point\n// x across, Y up and z toward the eye lands on screen row FY - Y*CE + z*SE,\n// and lies Y*SE + z*CE toward the eye.\nconst EL = 0.5, CE = cos(EL), SE = sin(EL);\nconst FY = 113, AX = 32;\n// The spout is just above the top edge.\nconst YN = (FY + 4) / CE;\n// Gravity and the speed the lotion leaves the spout, in LEDs and seconds at\n// Speed 2, and the spout's radius at Thick 0.\nconst G = 8, V0 = 14, A0 = 5.6;\n// Coiling rate: the gravitational regime of liquid rope coiling,\n// Omega = CW * (g Q^3 / (nu a1^8))^(1/4), Q the flux, nu the viscosity and a1\n// the rope's radius where it lands.\nconst CW = 0.144;\n// The coil bends out from the stream's axis over HC coil radii of height,\n// winding a quarter turn ahead of the point where it lands.\nconst HC = 1.5;\n// Slump: the heap flows as a thin viscous layer, dh/dt = div(K h^3 grad h),\n// K = KS / nu. A fresh loop holds its fold TF * nu^(1/4) seconds before it\n// melts into the heap.\nconst KS = 3e-2, TF = 3;\n// The coil does not land on one circle: its centre wanders up to EC coil\n// radii off the axis, round and back about every PW seconds, so the loops\n// cross and fold over each other.\nconst EC = 0.7, PW = 5.3;\n// One pour lasts POUR seconds; after the tail lands the heap settles SETTLE\n// seconds, then sinks SINK LEDs a second while the next pour falls.\nconst POUR = 16, SETTLE = 0.8, SINK = 5;\n// Little swellings ride down the stream FB times a second, BA of the radius.\nconst FB = 1.1, BA = 0.05;\n// Opening hue: pink, not red.\nconst H0 = 0.9;\n\n// Light from the upper left and a little in front, and the eye, in world\n// axes and in the camera's (x right, y up the screen, z toward the eye).\nconst nrm = (v) => {\n  const l = Math.hypot(v[0], v[1], v[2]);\n  return [v[0] / l, v[1] / l, v[2] / l];\n};\nconst LW = nrm([-0.5, 0.75, 0.45]);\nconst VW = [0, SE, CE];\nconst HW = nrm([LW[0] + VW[0], LW[1] + VW[1], LW[2] + VW[2]]);\nconst toCam = (v) => [v[0], v[1] * CE - v[2] * SE, v[1] * SE + v[2] * CE];\nconst LC = toCam(LW), HCm = toCam(HW);\n// A tall strip light to the left of the eye: on the falling rope it draws a\n// highlight down its whole length.\nconst HS = nrm([-0.3, 0, 1]);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, thick: 0, gloss: 0, warm: false,\n    t: 0, phi: 0, tPour: 0,\n    // top: height of the rope's upper end (YN while the spout runs); tip: its\n    // lower end while a fresh pour is still falling, or -1 once it has landed.\n    top: YN, topV: 0, tip: -1, tipV: 0, cut: false, gone: false, wait: 0, sinking: false,\n    h: new Float32Array(NG), b: new Float32Array(NB), f: new Float32Array(NG), dh: new Float32Array(NB),\n    blur: new Float32Array(NG), tmp: new Float32Array(NG), hs: new Float32Array(NG), cc: new Float32Array(NG * 3), fl: new Float32Array(NG),\n    hdep: new Float32Array(N), col: new Float32Array(N * 3),\n    rdep: new Float32Array(N), rcov: new Float32Array(N), rcol: new Float32Array(N * 3),\n    bg: new Float32Array(N),\n    lit: [0, 0, 0], dark: [0, 0, 0], wall: [0, 0, 0], pearl: [0, 0, 0], c: [0, 0, 0], up: [0, 0, 0],\n    spec: new Float32Array(SPN), specKey: null,\n  };\n  const S = params.s;\n  // A soft glow on the wall behind the stream, falling off to near black in\n  // the top corners.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = (x + 0.5 - AX) / 26, dy = (y - 78) / 70;\n      S.bg[y * W + x] = 0.12 + 0.88 * exp(-dx * dx - dy * dy);\n    }\n}\n\n// The lotion's make-up at the current Thick.\nfunction lotion(S) {\n  const nu = pow(4, S.thick), a0 = A0 * pow(1.25, S.thick);\n  return { nu, a0, Q: PI * a0 * a0 * V0, K: KS / nu, tf: TF * pow(nu, 0.25) };\n}\n\n// Free fall from the spout: speed at height Y, and the radius that keeps the\n// mass flux pi a^2 v the same all the way down.\nconst speedAt = (Y) => sqrt(V0 * V0 + 2 * G * max(0, YN - Y));\nconst radiusAt = (a0, Y) => a0 * sqrt(V0 / speedAt(Y));\n\n// The heap's height under a point, bilinear.\nfunction heightAt(S, x, z) {\n  const u = cl(x - 0.5, 0, GX - 1.001), v = cl(z + ZC - 0.5, 0, GZ - 1.001);\n  const i = floor(u), j = floor(v), fu = u - i, fv = v - j, h = S.h, p = j * GX + i;\n  return (h[p] * (1 - fu) + h[p + 1] * fu) * (1 - fv) + (h[p + GX] * (1 - fu) + h[p + GX + 1] * fu) * fv;\n}\n\n// Where the rope lands now: the coil's radius and rate and the surface under it.\nfunction coil(S, L) {\n  const R0 = 8;\n  // The surface a little ahead of the contact, where the rope is about to lie.\n  let Yc = heightAt(S, AX + R0 * cos(S.phi + 0.3), R0 * sin(S.phi + 0.3));\n  const U1 = speedAt(Yc), a1 = radiusAt(L.a0, Yc);\n  const om = CW * pow((G * L.Q * L.Q * L.Q) / (L.nu * pow(a1, 8)), 0.25);\n  const R = U1 / om, ps = (2 * PI * S.t) / PW, e = EC * R * (0.6 + 0.4 * sin(ps * 0.37 + 1));\n  const cx = AX + e * cos(ps), cz = e * sin(ps * 1.3);\n  Yc = heightAt(S, cx + R * cos(S.phi + a1 / R), cz + R * sin(S.phi + a1 / R));\n  return { Yc, U1, a1, om, R, cx, cz };\n}\n\n// Lay a short piece of rope at (x, z): its volume pi a^2 ds spread over the\n// cells under it, heaped in the middle.\nfunction deposit(S, x, z, a, ds) {\n  const h = S.f, vol = PI * a * a * ds;\n  const i0 = max(0, floor(x - a - 0.5)), i1 = min(GX - 1, ceil(x + a - 0.5));\n  const j0 = max(0, floor(z + ZC - a - 0.5)), j1 = min(GZ - 1, ceil(z + ZC + a - 0.5));\n  let sum = 0;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) sum += q;\n    }\n  if (sum \u003c= 0) return;\n  const k = vol / sum;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) h[j * GX + i] += k * q;\n    }\n}\n\n// The heap flows: flux K h^3 times the slope across every face between two\n// bulk cells, none out through the counter's edges, so no lotion is lost.\nfunction slump(S, L, dt) {\n  const h = S.b, d = S.dh, k = L.K / 4;\n  let left = dt;\n  while (left > 1e-6) {\n    let hm = 0;\n    for (let p = 0; p \u003c NB; p++) if (h[p] > hm) hm = h[p];\n    const st = min(left, 0.2 / (k * hm * hm * hm + 1e-6));\n    d.fill(0);\n    for (let j = 0; j \u003c BZ; j++)\n      for (let i = 0; i \u003c BX; i++) {\n        const p = j * BX + i, a = h[p];\n        if (i \u003c BX - 1) {\n          const b = h[p + 1], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + 1] += f;\n        }\n        if (j \u003c BZ - 1) {\n          const b = h[p + BX], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + BX] += f;\n        }\n      }\n    for (let p = 0; p \u003c NB; p++) h[p] = max(0, h[p] + d[p] * st);\n    left -= st;\n  }\n}\n\n// The bulk under an LED cell, bilinear between bulk cell centres.\nfunction bulkAt(b, i, j) {\n  const u = cl(i * 0.5 - 0.25, 0, BX - 1.001), v = cl(j * 0.5 - 0.25, 0, BZ - 1.001);\n  const I = floor(u), J = floor(v), fu = u - I, fv = v - J, p = J * BX + I;\n  return (b[p] * (1 - fu) + b[p + 1] * fu) * (1 - fv) + (b[p + BX] * (1 - fu) + b[p + BX + 1] * fu) * fv;\n}\n\nfunction breakStream(S) {\n  if (S.cut || S.gone || S.tip >= 0) return;\n  S.cut = true;\n  S.topV = V0;\n}\n\nfunction step(S, dt) {\n  const L = lotion(S);\n  S.t += dt;\n  const C = coil(S, L);\n  // A fresh pour falls until its front reaches the heap.\n  if (S.tip >= 0) {\n    S.tipV += G * dt;\n    S.tip -= S.tipV * dt;\n    if (S.tip \u003c= C.Yc + C.a1) S.tip = -1;\n  }\n  if (!S.cut && !S.gone) {\n    S.tPour += dt;\n    if (S.tPour > POUR) breakStream(S);\n  }\n  // A broken stream's tail falls in.\n  if (S.cut) {\n    S.topV += G * dt;\n    S.top -= S.topV * dt;\n    if (S.top \u003c= C.Yc + C.a1) {\n      S.cut = false;\n      S.gone = true;\n      S.wait = SETTLE;\n    }\n  }\n  if (S.gone) {\n    S.wait -= dt;\n    if (S.wait \u003c= 0 && !S.sinking) {\n      // The heap sinks away and the next pour starts from the spout.\n      S.sinking = true;\n      S.gone = false;\n      S.top = YN;\n      S.tip = YN;\n      S.tipV = V0;\n      S.tPour = 0;\n    }\n  }\n  const { b, f } = S;\n  const toBulk = (p) => ((p / GX) >> 1) * BX + ((p % GX) >> 1);\n  if (S.sinking) {\n    let any = false;\n    for (let p = 0; p \u003c NG; p++) {\n      b[toBulk(p)] += f[p] / 4;\n      f[p] = 0;\n    }\n    for (let p = 0; p \u003c NB; p++) {\n      b[p] = max(0, b[p] - SINK * dt);\n      if (b[p] > 0) any = true;\n    }\n    if (!any) S.sinking = false;\n  }\n  // The rope lays itself down along the coil at the speed it arrives, so the\n  // contact runs round at Omega = U1 / R.\n  if (!S.gone && S.tip \u003c 0) {\n    const dphi = C.om * dt, n = max(1, ceil((C.R * dphi) / 0.5));\n    for (let k = 0; k \u003c n; k++) {\n      const ph = S.phi + (dphi * (k + 0.5)) / n;\n      deposit(S, C.cx + C.R * cos(ph), C.cz + C.R * sin(ph), C.a1, (C.R * dphi) / n);\n    }\n    S.phi += dphi;\n  }\n  // Loops melt into the heap, which flows.\n  const m = 1 - exp(-dt / L.tf);\n  for (let p = 0; p \u003c NG; p++) {\n    const v = f[p] * m;\n    f[p] -= v;\n    b[toBulk(p)] += v / 4;\n  }\n  slump(S, L, dt);\n  for (let j = 0, p = 0; j \u003c GZ; j++) for (let i = 0; i \u003c GX; i++, p++) S.h[p] = bulkAt(b, i, j) + f[p];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.thick = cl(k[2], -1, 1);\n  S.gloss = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open six seconds into a pour.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breakStream(S);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours for the hue: the lit lotion, its shadow side and the wall.\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime go brown or olive when deep: there the lotion is\n  // paled to cream and the wall taken down almost to black.\n  const warm = sm(0.0, 0.08, hh) * (1 - sm(0.22, 0.32, hh));\n  // A wetter finish is a little deeper in colour.\n  const wet = 0.5 + 0.5 * S.gloss;\n  hsv(h, (0.38 + 0.14 * wet) * (1 - 0.4 * warm), 0.8 - 0.08 * wet + 0.06 * warm, S.lit);\n  hsv(h + 0.015, (0.6 + 0.2 * wet) * (1 - 0.35 * warm), 0.4 - 0.1 * wet + 0.2 * warm, S.dark);\n  hsv(h - 0.04, 0.85 - 0.5 * warm, 0.2 - 0.15 * warm, S.wall);\n  // The pearl in the lotion glints a cooler shade at grazing angles.\n  hsv(h - 0.12, 0.45 - 0.15 * warm, 1, S.pearl);\n}\n\n// The highlight against how squarely a surface faces the half vector,\n// tabled once per Gloss. Satin at -1: a broad dim sheen; wet at 1: a narrow\n// hot highlight.\nconst SPN = 1024;\nfunction specTable(S) {\n  if (S.specKey === S.gloss) return;\n  S.specKey = S.gloss;\n  const g = S.gloss, P = 28 * pow(5, g), KSp = 0.6 + 0.35 * g;\n  for (let i = 0; i \u003c SPN; i++) {\n    const n = i / (SPN - 1), n2 = n * n;\n    S.spec[i] = KSp * pow(n, P) + 0.16 * max(0, -g) * n2 * n2;\n  }\n}\n\nfunction shade(S, nx, ny, nz, vx, vy, vz, lx, ly, lz, hx, hy, hz, strip, ao, out) {\n  // A wet finish has a bright rim.\n  const KR = 0.25 + 0.3 * max(0, S.gloss);\n  const nl = nx * lx + ny * ly + nz * lz;\n  const dif = cl((nl + 0.25) / 1.25, 0, 1);\n  let nh = max(0, nx * hx + ny * hy + nz * hz);\n  // The strip light, seen in the rope: only the turn of the rope across\n  // matters, not along it.\n  if (strip) {\n    const l = sqrt(nx * nx + nz * nz) + 1e-6;\n    nh = max(nh, ((nx * HS[0] + nz * HS[2]) / l) * (0.75 + 0.25 * l));\n  }\n  const sp = S.spec[round(cl(nh, 0, 1) * (SPN - 1))], e = 1 - cl(nx * vx + ny * vy + nz * vz, 0, 1);\n  const rim = KR * e * e * e;\n  const lit = S.lit, dk = S.dark, pe = S.pearl;\n  for (let c = 0; c \u003c 3; c++) out[c] = (dk[c] + (lit[c] - dk[c]) * dif) * ao + sp + rim * pe[c];\n}\n\n// Highlights roll off softly instead of clipping: a table over 0..2.\nconst TONE = new Uint8Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) TONE[i] = round(min(255, 319 * (1 - exp((-1.6 * 2 * i) / 1024))));\nconst tone = (v) => TONE[v \u003c= 0 ? 0 : v >= 2 ? 1024 : (v * 512) | 0];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  specTable(S);\n  const L = lotion(S), C = coil(S, L);\n  const { h, hdep, col, rdep, rcov, rcol, bg, wall, c, blur, tmp } = S;\n  // The heap's height blurred over 5 cells, for its shadow on the counter:\n  // a running sum along x, then along z.\n  for (let j = 0; j \u003c GZ; j++) {\n    const o = j * GX;\n    let a = h[o] * 3 + h[o + 1] + h[o + 2];\n    for (let i = 0; i \u003c GX; i++) {\n      tmp[o + i] = a * 0.2;\n      a += h[o + min(GX - 1, i + 3)] - h[o + max(0, i - 2)];\n    }\n  }\n  for (let i = 0; i \u003c GX; i++) {\n    let a = tmp[i] * 3 + tmp[GX + i] + tmp[2 * GX + i];\n    for (let j = 0; j \u003c GZ; j++) {\n      blur[j * GX + i] = a * 0.2;\n      a += tmp[min(GZ - 1, j + 3) * GX + i] - tmp[max(0, j - 2) * GX + i];\n    }\n  }\n  // Heights smoothed 1-2-1 for the normals, so the steep rim of the heap\n  // does not break into a comb along the grid.\n  const hs = S.hs;\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, l = i > 0 ? p - 1 : p, r = i \u003c GX - 1 ? p + 1 : p;\n      tmp[p] = (h[l] + 2 * h[p] + h[r]) * 0.25;\n    }\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, b0 = j > 0 ? p - GX : p, f0 = j \u003c GZ - 1 ? p + GX : p;\n      hs[p] = (tmp[b0] + 2 * tmp[p] + tmp[f0]) * 0.25;\n    }\n  // The wall.\n  for (let p = 0; p \u003c N; p++) {\n    const v = bg[p];\n    col[p * 3] = wall[0] * v;\n    col[p * 3 + 1] = wall[1] * v;\n    col[p * 3 + 2] = wall[2] * v;\n    hdep[p] = -1e9;\n    rdep[p] = -1e9;\n    rcov[p] = 0;\n  }\n  // Each cell's colour: the lotion lit from its normal, valleys between\n  // folds a little darker; and the bare counter, a satin shelf a little\n  // lighter than the wall, in the shade of the heap beside it.\n  const cc = S.cc, up = S.up;\n  shade(S, 0, 1, 0, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1, up);\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, z = j + 0.5 - ZC;\n      S.fl[p] = (0.55 + 0.25 * sm(-28, 28, z)) * (1 - 0.6 * sm(0, 4, blur[p]));\n      if (hs[p] \u003c 1e-3) {\n        cc[p * 3] = up[0];\n        cc[p * 3 + 1] = up[1];\n        cc[p * 3 + 2] = up[2];\n        continue;\n      }\n      const hl = hs[p - (i > 0 ? 1 : 0)], hr = hs[p + (i \u003c GX - 1 ? 1 : 0)];\n      const hb = hs[p - (j > 0 ? GX : 0)], hf = hs[p + (j \u003c GZ - 1 ? GX : 0)];\n      const gx = (hr - hl) * 0.5, gz = (hf - hb) * 0.5, inv = 1 / sqrt(gx * gx + 1 + gz * gz);\n      const lap = hl + hr + hb + hf - 4 * hs[p];\n      shade(S, -gx * inv, inv, -gz * inv, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1 - 0.3 * cl(lap * 0.25, 0, 1), c);\n      cc[p * 3] = c[0];\n      cc[p * 3 + 1] = c[1];\n      cc[p * 3 + 2] = c[2];\n    }\n  // The counter and the heap, column by column from the front back in half\n  // cells, height and colour taken between cell centres, each sample filling\n  // the rows its top rises above the samples in front of it.\n  const FL = S.fl;\n  for (let i = 0; i \u003c GX; i++) {\n    let yb = H;\n    for (let v = GZ - 1; v >= 0; v -= 0.5) {\n      const j = floor(v), fv = v - j, p = j * GX + i, p2 = j \u003c GZ - 1 ? p + GX : p;\n      const Yv = h[p] + (h[p2] - h[p]) * fv, z = v + 0.5 - ZC;\n      const y0 = ceil(FY - Yv * CE + z * SE - 0.5);\n      if (y0 >= yb) continue;\n      // Thin lotion lets the counter show through.\n      const film = sm(0.05, 0.9, Yv), fl = (FL[p] + (FL[p2] - FL[p]) * fv) * (1 - film);\n      const r = (cc[p * 3] + (cc[p2 * 3] - cc[p * 3]) * fv) * film + wall[0] * fl;\n      const g = (cc[p * 3 + 1] + (cc[p2 * 3 + 1] - cc[p * 3 + 1]) * fv) * film + wall[1] * fl;\n      const b = (cc[p * 3 + 2] + (cc[p2 * 3 + 2] - cc[p * 3 + 2]) * fv) * film + wall[2] * fl;\n      const dep = Yv * SE + z * CE;\n      for (let y = max(0, y0); y \u003c yb; y++) {\n        const q = y * W + i;\n        col[q * 3] = r;\n        col[q * 3 + 1] = g;\n        col[q * 3 + 2] = b;\n        hdep[q] = dep;\n      }\n      yb = y0;\n    }\n  }\n  // The rope: a chain of balls half an LED apart, each a sphere, the nearest\n  // surface's normal kept at every LED.\n  const ropeOn = !S.gone;\n  if (ropeOn) {\n    const t = S.t, top = min(S.top, YN + 3);\n    const landed = S.tip \u003c 0;\n    const coilTop = C.Yc + C.a1 + HC * C.R;\n    const low = landed ? coilTop : S.tip;\n    const ball = (x, Y, z, a) => {\n      if (a \u003c 0.3) return;\n      const sx = x, sy = FY - Y * CE + z * SE, dd = Y * SE + z * CE;\n      const x0 = max(0, floor(sx - a - 1)), x1 = min(W - 1, ceil(sx + a)), y0 = max(0, floor(sy - a - 1)), y1 = min(H - 1, ceil(sy + a));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let xx = x0; xx \u003c= x1; xx++) {\n          const dx = xx + 0.5 - sx, dy = y + 0.5 - sy, r = sqrt(dx * dx + dy * dy);\n          const cov = cl(a - r + 0.5, 0, 1);\n          if (cov \u003c= 0) continue;\n          const q = y * W + xx, uz = sqrt(max(0, 1 - (r * r) / (a * a)));\n          const depth = dd + a * uz;\n          if (cov \u003c rcov[q] - 0.02 || (cov \u003c= rcov[q] + 0.02 && depth \u003c= rdep[q])) continue;\n          const m = 1 / max(a, r + 1e-6);\n          rcov[q] = cov;\n          rdep[q] = depth;\n          rcol[q * 3] = dx * m;\n          rcol[q * 3 + 1] = -dy * m;\n          rcol[q * 3 + 2] = uz;\n        }\n    };\n    // The falling stream, with swellings that left the spout at a steady\n    // beat and stretch apart as the lotion speeds up.\n    for (let Y = top; Y > low; Y -= 0.5) {\n      const v = speedAt(Y), age = (v - V0) / G;\n      let a = radiusAt(L.a0, Y) * (1 + BA * sin(2 * PI * FB * (t - age)));\n      // A broken stream's upper end narrows to a rounded tail.\n      if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n      ball(AX, Y, 0, a);\n    }\n    if (!landed) ball(AX, S.tip, 0, radiusAt(L.a0, S.tip) * 1.15);\n    else {\n      // The coil: from the axis at its top it bends out to radius R, winding\n      // a quarter turn as it comes down level onto the heap.\n      const len = HC * C.R + 2 * C.R, n = ceil(len / 0.5);\n      for (let k = n; k >= 0; k--) {\n        const s = k / n, Y = C.Yc + C.a1 + HC * C.R * s * s;\n        if (Y > top) continue;\n        const r = C.R * (1 - s * s) * (1 - s * s), th = S.phi + s * PI * 0.5, e = (1 - s) * (1 - s);\n        let a = radiusAt(L.a0, Y);\n        if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n        ball(AX + (C.cx - AX) * e + r * cos(th), Y, C.cz * e + r * sin(th), a);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let r = col[q * 3], g = col[q * 3 + 1], b = col[q * 3 + 2];\n      const cv = rcov[q];\n      if (cv > 0 && rdep[q] > hdep[q]) {\n        // The rope, lit from the normal its nearest ball left here.\n        shade(S, rcol[q * 3], rcol[q * 3 + 1], rcol[q * 3 + 2], 0, 0, 1, LC[0], LC[1], LC[2], HCm[0], HCm[1], HCm[2], true, 1, c);\n        r += (c[0] - r) * cv;\n        g += (c[1] - g) * cv;\n        b += (c[2] - b) * cv;\n      }\n      display.setPixel(x, y, tone(r), tone(g), tone(b));\n    }\n}\n","layer":{"id":"layer-lotion-ribbon","type":"code","name":"lotion-ribbon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lotion Ribbon\n// Family:  cosmetic\n// Idea:    A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after the slow pour of body lotion in skincare films; the coiling follows liquid rope coiling (Neil Ribe, 2004) and the heap spreads as a viscous gravity current (Herbert Huppert, 1982)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Thick. How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up.\n// Knob 4: Gloss. At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim.\n// Buttons: K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.\n\nconst W = 64, H = 128, N = W * H;\n// The counter under the heap, one cell an LED: x 0..63, z from -28 at the\n// back to 36 at the front, below the bottom edge.\nconst GX = 64, GZ = 64, ZC = 28, NG = GX * GZ;\n// The heap's bulk flows on cells two LEDs square; the fresh folds lie on the\n// LED cells above it.\nconst BX = GX / 2, BZ = GZ / 2, NB = BX * BZ;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, pow, round, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[0] = r;\n  out[1] = g;\n  out[2] = b;\n}\n\n// The camera looks down at the counter from EL radians above level. A point\n// x across, Y up and z toward the eye lands on screen row FY - Y*CE + z*SE,\n// and lies Y*SE + z*CE toward the eye.\nconst EL = 0.5, CE = cos(EL), SE = sin(EL);\nconst FY = 113, AX = 32;\n// The spout is just above the top edge.\nconst YN = (FY + 4) / CE;\n// Gravity and the speed the lotion leaves the spout, in LEDs and seconds at\n// Speed 2, and the spout's radius at Thick 0.\nconst G = 8, V0 = 14, A0 = 5.6;\n// Coiling rate: the gravitational regime of liquid rope coiling,\n// Omega = CW * (g Q^3 / (nu a1^8))^(1/4), Q the flux, nu the viscosity and a1\n// the rope's radius where it lands.\nconst CW = 0.144;\n// The coil bends out from the stream's axis over HC coil radii of height,\n// winding a quarter turn ahead of the point where it lands.\nconst HC = 1.5;\n// Slump: the heap flows as a thin viscous layer, dh/dt = div(K h^3 grad h),\n// K = KS / nu. A fresh loop holds its fold TF * nu^(1/4) seconds before it\n// melts into the heap.\nconst KS = 3e-2, TF = 3;\n// The coil does not land on one circle: its centre wanders up to EC coil\n// radii off the axis, round and back about every PW seconds, so the loops\n// cross and fold over each other.\nconst EC = 0.7, PW = 5.3;\n// One pour lasts POUR seconds; after the tail lands the heap settles SETTLE\n// seconds, then sinks SINK LEDs a second while the next pour falls.\nconst POUR = 16, SETTLE = 0.8, SINK = 5;\n// Little swellings ride down the stream FB times a second, BA of the radius.\nconst FB = 1.1, BA = 0.05;\n// Opening hue: pink, not red.\nconst H0 = 0.9;\n\n// Light from the upper left and a little in front, and the eye, in world\n// axes and in the camera's (x right, y up the screen, z toward the eye).\nconst nrm = (v) => {\n  const l = Math.hypot(v[0], v[1], v[2]);\n  return [v[0] / l, v[1] / l, v[2] / l];\n};\nconst LW = nrm([-0.5, 0.75, 0.45]);\nconst VW = [0, SE, CE];\nconst HW = nrm([LW[0] + VW[0], LW[1] + VW[1], LW[2] + VW[2]]);\nconst toCam = (v) => [v[0], v[1] * CE - v[2] * SE, v[1] * SE + v[2] * CE];\nconst LC = toCam(LW), HCm = toCam(HW);\n// A tall strip light to the left of the eye: on the falling rope it draws a\n// highlight down its whole length.\nconst HS = nrm([-0.3, 0, 1]);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, thick: 0, gloss: 0, warm: false,\n    t: 0, phi: 0, tPour: 0,\n    // top: height of the rope's upper end (YN while the spout runs); tip: its\n    // lower end while a fresh pour is still falling, or -1 once it has landed.\n    top: YN, topV: 0, tip: -1, tipV: 0, cut: false, gone: false, wait: 0, sinking: false,\n    h: new Float32Array(NG), b: new Float32Array(NB), f: new Float32Array(NG), dh: new Float32Array(NB),\n    blur: new Float32Array(NG), tmp: new Float32Array(NG), hs: new Float32Array(NG), cc: new Float32Array(NG * 3), fl: new Float32Array(NG),\n    hdep: new Float32Array(N), col: new Float32Array(N * 3),\n    rdep: new Float32Array(N), rcov: new Float32Array(N), rcol: new Float32Array(N * 3),\n    bg: new Float32Array(N),\n    lit: [0, 0, 0], dark: [0, 0, 0], wall: [0, 0, 0], pearl: [0, 0, 0], c: [0, 0, 0], up: [0, 0, 0],\n    spec: new Float32Array(SPN), specKey: null,\n  };\n  const S = params.s;\n  // A soft glow on the wall behind the stream, falling off to near black in\n  // the top corners.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = (x + 0.5 - AX) / 26, dy = (y - 78) / 70;\n      S.bg[y * W + x] = 0.12 + 0.88 * exp(-dx * dx - dy * dy);\n    }\n}\n\n// The lotion's make-up at the current Thick.\nfunction lotion(S) {\n  const nu = pow(4, S.thick), a0 = A0 * pow(1.25, S.thick);\n  return { nu, a0, Q: PI * a0 * a0 * V0, K: KS / nu, tf: TF * pow(nu, 0.25) };\n}\n\n// Free fall from the spout: speed at height Y, and the radius that keeps the\n// mass flux pi a^2 v the same all the way down.\nconst speedAt = (Y) => sqrt(V0 * V0 + 2 * G * max(0, YN - Y));\nconst radiusAt = (a0, Y) => a0 * sqrt(V0 / speedAt(Y));\n\n// The heap's height under a point, bilinear.\nfunction heightAt(S, x, z) {\n  const u = cl(x - 0.5, 0, GX - 1.001), v = cl(z + ZC - 0.5, 0, GZ - 1.001);\n  const i = floor(u), j = floor(v), fu = u - i, fv = v - j, h = S.h, p = j * GX + i;\n  return (h[p] * (1 - fu) + h[p + 1] * fu) * (1 - fv) + (h[p + GX] * (1 - fu) + h[p + GX + 1] * fu) * fv;\n}\n\n// Where the rope lands now: the coil's radius and rate and the surface under it.\nfunction coil(S, L) {\n  const R0 = 8;\n  // The surface a little ahead of the contact, where the rope is about to lie.\n  let Yc = heightAt(S, AX + R0 * cos(S.phi + 0.3), R0 * sin(S.phi + 0.3));\n  const U1 = speedAt(Yc), a1 = radiusAt(L.a0, Yc);\n  const om = CW * pow((G * L.Q * L.Q * L.Q) / (L.nu * pow(a1, 8)), 0.25);\n  const R = U1 / om, ps = (2 * PI * S.t) / PW, e = EC * R * (0.6 + 0.4 * sin(ps * 0.37 + 1));\n  const cx = AX + e * cos(ps), cz = e * sin(ps * 1.3);\n  Yc = heightAt(S, cx + R * cos(S.phi + a1 / R), cz + R * sin(S.phi + a1 / R));\n  return { Yc, U1, a1, om, R, cx, cz };\n}\n\n// Lay a short piece of rope at (x, z): its volume pi a^2 ds spread over the\n// cells under it, heaped in the middle.\nfunction deposit(S, x, z, a, ds) {\n  const h = S.f, vol = PI * a * a * ds;\n  const i0 = max(0, floor(x - a - 0.5)), i1 = min(GX - 1, ceil(x + a - 0.5));\n  const j0 = max(0, floor(z + ZC - a - 0.5)), j1 = min(GZ - 1, ceil(z + ZC + a - 0.5));\n  let sum = 0;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) sum += q;\n    }\n  if (sum \u003c= 0) return;\n  const k = vol / sum;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) h[j * GX + i] += k * q;\n    }\n}\n\n// The heap flows: flux K h^3 times the slope across every face between two\n// bulk cells, none out through the counter's edges, so no lotion is lost.\nfunction slump(S, L, dt) {\n  const h = S.b, d = S.dh, k = L.K / 4;\n  let left = dt;\n  while (left > 1e-6) {\n    let hm = 0;\n    for (let p = 0; p \u003c NB; p++) if (h[p] > hm) hm = h[p];\n    const st = min(left, 0.2 / (k * hm * hm * hm + 1e-6));\n    d.fill(0);\n    for (let j = 0; j \u003c BZ; j++)\n      for (let i = 0; i \u003c BX; i++) {\n        const p = j * BX + i, a = h[p];\n        if (i \u003c BX - 1) {\n          const b = h[p + 1], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + 1] += f;\n        }\n        if (j \u003c BZ - 1) {\n          const b = h[p + BX], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + BX] += f;\n        }\n      }\n    for (let p = 0; p \u003c NB; p++) h[p] = max(0, h[p] + d[p] * st);\n    left -= st;\n  }\n}\n\n// The bulk under an LED cell, bilinear between bulk cell centres.\nfunction bulkAt(b, i, j) {\n  const u = cl(i * 0.5 - 0.25, 0, BX - 1.001), v = cl(j * 0.5 - 0.25, 0, BZ - 1.001);\n  const I = floor(u), J = floor(v), fu = u - I, fv = v - J, p = J * BX + I;\n  return (b[p] * (1 - fu) + b[p + 1] * fu) * (1 - fv) + (b[p + BX] * (1 - fu) + b[p + BX + 1] * fu) * fv;\n}\n\nfunction breakStream(S) {\n  if (S.cut || S.gone || S.tip >= 0) return;\n  S.cut = true;\n  S.topV = V0;\n}\n\nfunction step(S, dt) {\n  const L = lotion(S);\n  S.t += dt;\n  const C = coil(S, L);\n  // A fresh pour falls until its front reaches the heap.\n  if (S.tip >= 0) {\n    S.tipV += G * dt;\n    S.tip -= S.tipV * dt;\n    if (S.tip \u003c= C.Yc + C.a1) S.tip = -1;\n  }\n  if (!S.cut && !S.gone) {\n    S.tPour += dt;\n    if (S.tPour > POUR) breakStream(S);\n  }\n  // A broken stream's tail falls in.\n  if (S.cut) {\n    S.topV += G * dt;\n    S.top -= S.topV * dt;\n    if (S.top \u003c= C.Yc + C.a1) {\n      S.cut = false;\n      S.gone = true;\n      S.wait = SETTLE;\n    }\n  }\n  if (S.gone) {\n    S.wait -= dt;\n    if (S.wait \u003c= 0 && !S.sinking) {\n      // The heap sinks away and the next pour starts from the spout.\n      S.sinking = true;\n      S.gone = false;\n      S.top = YN;\n      S.tip = YN;\n      S.tipV = V0;\n      S.tPour = 0;\n    }\n  }\n  const { b, f } = S;\n  const toBulk = (p) => ((p / GX) >> 1) * BX + ((p % GX) >> 1);\n  if (S.sinking) {\n    let any = false;\n    for (let p = 0; p \u003c NG; p++) {\n      b[toBulk(p)] += f[p] / 4;\n      f[p] = 0;\n    }\n    for (let p = 0; p \u003c NB; p++) {\n      b[p] = max(0, b[p] - SINK * dt);\n      if (b[p] > 0) any = true;\n    }\n    if (!any) S.sinking = false;\n  }\n  // The rope lays itself down along the coil at the speed it arrives, so the\n  // contact runs round at Omega = U1 / R.\n  if (!S.gone && S.tip \u003c 0) {\n    const dphi = C.om * dt, n = max(1, ceil((C.R * dphi) / 0.5));\n    for (let k = 0; k \u003c n; k++) {\n      const ph = S.phi + (dphi * (k + 0.5)) / n;\n      deposit(S, C.cx + C.R * cos(ph), C.cz + C.R * sin(ph), C.a1, (C.R * dphi) / n);\n    }\n    S.phi += dphi;\n  }\n  // Loops melt into the heap, which flows.\n  const m = 1 - exp(-dt / L.tf);\n  for (let p = 0; p \u003c NG; p++) {\n    const v = f[p] * m;\n    f[p] -= v;\n    b[toBulk(p)] += v / 4;\n  }\n  slump(S, L, dt);\n  for (let j = 0, p = 0; j \u003c GZ; j++) for (let i = 0; i \u003c GX; i++, p++) S.h[p] = bulkAt(b, i, j) + f[p];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.thick = cl(k[2], -1, 1);\n  S.gloss = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open six seconds into a pour.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breakStream(S);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours for the hue: the lit lotion, its shadow side and the wall.\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime go brown or olive when deep: there the lotion is\n  // paled to cream and the wall taken down almost to black.\n  const warm = sm(0.0, 0.08, hh) * (1 - sm(0.22, 0.32, hh));\n  // A wetter finish is a little deeper in colour.\n  const wet = 0.5 + 0.5 * S.gloss;\n  hsv(h, (0.38 + 0.14 * wet) * (1 - 0.4 * warm), 0.8 - 0.08 * wet + 0.06 * warm, S.lit);\n  hsv(h + 0.015, (0.6 + 0.2 * wet) * (1 - 0.35 * warm), 0.4 - 0.1 * wet + 0.2 * warm, S.dark);\n  hsv(h - 0.04, 0.85 - 0.5 * warm, 0.2 - 0.15 * warm, S.wall);\n  // The pearl in the lotion glints a cooler shade at grazing angles.\n  hsv(h - 0.12, 0.45 - 0.15 * warm, 1, S.pearl);\n}\n\n// The highlight against how squarely a surface faces the half vector,\n// tabled once per Gloss. Satin at -1: a broad dim sheen; wet at 1: a narrow\n// hot highlight.\nconst SPN = 1024;\nfunction specTable(S) {\n  if (S.specKey === S.gloss) return;\n  S.specKey = S.gloss;\n  const g = S.gloss, P = 28 * pow(5, g), KSp = 0.6 + 0.35 * g;\n  for (let i = 0; i \u003c SPN; i++) {\n    const n = i / (SPN - 1), n2 = n * n;\n    S.spec[i] = KSp * pow(n, P) + 0.16 * max(0, -g) * n2 * n2;\n  }\n}\n\nfunction shade(S, nx, ny, nz, vx, vy, vz, lx, ly, lz, hx, hy, hz, strip, ao, out) {\n  // A wet finish has a bright rim.\n  const KR = 0.25 + 0.3 * max(0, S.gloss);\n  const nl = nx * lx + ny * ly + nz * lz;\n  const dif = cl((nl + 0.25) / 1.25, 0, 1);\n  let nh = max(0, nx * hx + ny * hy + nz * hz);\n  // The strip light, seen in the rope: only the turn of the rope across\n  // matters, not along it.\n  if (strip) {\n    const l = sqrt(nx * nx + nz * nz) + 1e-6;\n    nh = max(nh, ((nx * HS[0] + nz * HS[2]) / l) * (0.75 + 0.25 * l));\n  }\n  const sp = S.spec[round(cl(nh, 0, 1) * (SPN - 1))], e = 1 - cl(nx * vx + ny * vy + nz * vz, 0, 1);\n  const rim = KR * e * e * e;\n  const lit = S.lit, dk = S.dark, pe = S.pearl;\n  for (let c = 0; c \u003c 3; c++) out[c] = (dk[c] + (lit[c] - dk[c]) * dif) * ao + sp + rim * pe[c];\n}\n\n// Highlights roll off softly instead of clipping: a table over 0..2.\nconst TONE = new Uint8Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) TONE[i] = round(min(255, 319 * (1 - exp((-1.6 * 2 * i) / 1024))));\nconst tone = (v) => TONE[v \u003c= 0 ? 0 : v >= 2 ? 1024 : (v * 512) | 0];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  specTable(S);\n  const L = lotion(S), C = coil(S, L);\n  const { h, hdep, col, rdep, rcov, rcol, bg, wall, c, blur, tmp } = S;\n  // The heap's height blurred over 5 cells, for its shadow on the counter:\n  // a running sum along x, then along z.\n  for (let j = 0; j \u003c GZ; j++) {\n    const o = j * GX;\n    let a = h[o] * 3 + h[o + 1] + h[o + 2];\n    for (let i = 0; i \u003c GX; i++) {\n      tmp[o + i] = a * 0.2;\n      a += h[o + min(GX - 1, i + 3)] - h[o + max(0, i - 2)];\n    }\n  }\n  for (let i = 0; i \u003c GX; i++) {\n    let a = tmp[i] * 3 + tmp[GX + i] + tmp[2 * GX + i];\n    for (let j = 0; j \u003c GZ; j++) {\n      blur[j * GX + i] = a * 0.2;\n      a += tmp[min(GZ - 1, j + 3) * GX + i] - tmp[max(0, j - 2) * GX + i];\n    }\n  }\n  // Heights smoothed 1-2-1 for the normals, so the steep rim of the heap\n  // does not break into a comb along the grid.\n  const hs = S.hs;\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, l = i > 0 ? p - 1 : p, r = i \u003c GX - 1 ? p + 1 : p;\n      tmp[p] = (h[l] + 2 * h[p] + h[r]) * 0.25;\n    }\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, b0 = j > 0 ? p - GX : p, f0 = j \u003c GZ - 1 ? p + GX : p;\n      hs[p] = (tmp[b0] + 2 * tmp[p] + tmp[f0]) * 0.25;\n    }\n  // The wall.\n  for (let p = 0; p \u003c N; p++) {\n    const v = bg[p];\n    col[p * 3] = wall[0] * v;\n    col[p * 3 + 1] = wall[1] * v;\n    col[p * 3 + 2] = wall[2] * v;\n    hdep[p] = -1e9;\n    rdep[p] = -1e9;\n    rcov[p] = 0;\n  }\n  // Each cell's colour: the lotion lit from its normal, valleys between\n  // folds a little darker; and the bare counter, a satin shelf a little\n  // lighter than the wall, in the shade of the heap beside it.\n  const cc = S.cc, up = S.up;\n  shade(S, 0, 1, 0, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1, up);\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, z = j + 0.5 - ZC;\n      S.fl[p] = (0.55 + 0.25 * sm(-28, 28, z)) * (1 - 0.6 * sm(0, 4, blur[p]));\n      if (hs[p] \u003c 1e-3) {\n        cc[p * 3] = up[0];\n        cc[p * 3 + 1] = up[1];\n        cc[p * 3 + 2] = up[2];\n        continue;\n      }\n      const hl = hs[p - (i > 0 ? 1 : 0)], hr = hs[p + (i \u003c GX - 1 ? 1 : 0)];\n      const hb = hs[p - (j > 0 ? GX : 0)], hf = hs[p + (j \u003c GZ - 1 ? GX : 0)];\n      const gx = (hr - hl) * 0.5, gz = (hf - hb) * 0.5, inv = 1 / sqrt(gx * gx + 1 + gz * gz);\n      const lap = hl + hr + hb + hf - 4 * hs[p];\n      shade(S, -gx * inv, inv, -gz * inv, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1 - 0.3 * cl(lap * 0.25, 0, 1), c);\n      cc[p * 3] = c[0];\n      cc[p * 3 + 1] = c[1];\n      cc[p * 3 + 2] = c[2];\n    }\n  // The counter and the heap, column by column from the front back in half\n  // cells, height and colour taken between cell centres, each sample filling\n  // the rows its top rises above the samples in front of it.\n  const FL = S.fl;\n  for (let i = 0; i \u003c GX; i++) {\n    let yb = H;\n    for (let v = GZ - 1; v >= 0; v -= 0.5) {\n      const j = floor(v), fv = v - j, p = j * GX + i, p2 = j \u003c GZ - 1 ? p + GX : p;\n      const Yv = h[p] + (h[p2] - h[p]) * fv, z = v + 0.5 - ZC;\n      const y0 = ceil(FY - Yv * CE + z * SE - 0.5);\n      if (y0 >= yb) continue;\n      // Thin lotion lets the counter show through.\n      const film = sm(0.05, 0.9, Yv), fl = (FL[p] + (FL[p2] - FL[p]) * fv) * (1 - film);\n      const r = (cc[p * 3] + (cc[p2 * 3] - cc[p * 3]) * fv) * film + wall[0] * fl;\n      const g = (cc[p * 3 + 1] + (cc[p2 * 3 + 1] - cc[p * 3 + 1]) * fv) * film + wall[1] * fl;\n      const b = (cc[p * 3 + 2] + (cc[p2 * 3 + 2] - cc[p * 3 + 2]) * fv) * film + wall[2] * fl;\n      const dep = Yv * SE + z * CE;\n      for (let y = max(0, y0); y \u003c yb; y++) {\n        const q = y * W + i;\n        col[q * 3] = r;\n        col[q * 3 + 1] = g;\n        col[q * 3 + 2] = b;\n        hdep[q] = dep;\n      }\n      yb = y0;\n    }\n  }\n  // The rope: a chain of balls half an LED apart, each a sphere, the nearest\n  // surface's normal kept at every LED.\n  const ropeOn = !S.gone;\n  if (ropeOn) {\n    const t = S.t, top = min(S.top, YN + 3);\n    const landed = S.tip \u003c 0;\n    const coilTop = C.Yc + C.a1 + HC * C.R;\n    const low = landed ? coilTop : S.tip;\n    const ball = (x, Y, z, a) => {\n      if (a \u003c 0.3) return;\n      const sx = x, sy = FY - Y * CE + z * SE, dd = Y * SE + z * CE;\n      const x0 = max(0, floor(sx - a - 1)), x1 = min(W - 1, ceil(sx + a)), y0 = max(0, floor(sy - a - 1)), y1 = min(H - 1, ceil(sy + a));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let xx = x0; xx \u003c= x1; xx++) {\n          const dx = xx + 0.5 - sx, dy = y + 0.5 - sy, r = sqrt(dx * dx + dy * dy);\n          const cov = cl(a - r + 0.5, 0, 1);\n          if (cov \u003c= 0) continue;\n          const q = y * W + xx, uz = sqrt(max(0, 1 - (r * r) / (a * a)));\n          const depth = dd + a * uz;\n          if (cov \u003c rcov[q] - 0.02 || (cov \u003c= rcov[q] + 0.02 && depth \u003c= rdep[q])) continue;\n          const m = 1 / max(a, r + 1e-6);\n          rcov[q] = cov;\n          rdep[q] = depth;\n          rcol[q * 3] = dx * m;\n          rcol[q * 3 + 1] = -dy * m;\n          rcol[q * 3 + 2] = uz;\n        }\n    };\n    // The falling stream, with swellings that left the spout at a steady\n    // beat and stretch apart as the lotion speeds up.\n    for (let Y = top; Y > low; Y -= 0.5) {\n      const v = speedAt(Y), age = (v - V0) / G;\n      let a = radiusAt(L.a0, Y) * (1 + BA * sin(2 * PI * FB * (t - age)));\n      // A broken stream's upper end narrows to a rounded tail.\n      if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n      ball(AX, Y, 0, a);\n    }\n    if (!landed) ball(AX, S.tip, 0, radiusAt(L.a0, S.tip) * 1.15);\n    else {\n      // The coil: from the axis at its top it bends out to radius R, winding\n      // a quarter turn as it comes down level onto the heap.\n      const len = HC * C.R + 2 * C.R, n = ceil(len / 0.5);\n      for (let k = n; k >= 0; k--) {\n        const s = k / n, Y = C.Yc + C.a1 + HC * C.R * s * s;\n        if (Y > top) continue;\n        const r = C.R * (1 - s * s) * (1 - s * s), th = S.phi + s * PI * 0.5, e = (1 - s) * (1 - s);\n        let a = radiusAt(L.a0, Y);\n        if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n        ball(AX + (C.cx - AX) * e + r * cos(th), Y, C.cz * e + r * sin(th), a);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let r = col[q * 3], g = col[q * 3 + 1], b = col[q * 3 + 2];\n      const cv = rcov[q];\n      if (cv > 0 && rdep[q] > hdep[q]) {\n        // The rope, lit from the normal its nearest ball left here.\n        shade(S, rcol[q * 3], rcol[q * 3 + 1], rcol[q * 3 + 2], 0, 0, 1, LC[0], LC[1], LC[2], HCm[0], HCm[1], HCm[2], true, 1, c);\n        r += (c[0] - r) * cv;\n        g += (c[1] - g) * cv;\n        b += (c[2] - b) * cv;\n      }\n      display.setPixel(x, y, tone(r), tone(g), tone(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Thick","min":-1,"max":1,"about":"How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up."},{"name":"Gloss","min":-1,"max":1,"about":"At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim."}],"start":[0,2,0,0.06],"measures":{"motion":0.0659,"detail":0.0182,"edges":0.2668,"complexity":1.0681,"coverage":0.9585,"colour":0.134,"drift":0.0362},"knobResponse":[0.16,0.0263,0.0576,0.0386]},{"slug":"lunation","title":"Lunation","family":"celestial","round":16,"note":"망원 렌즈로 본 한 달을 빠르게 돌려요. 패널 너비만 한 달이 지구조에 비친 초승달에서 보름달로 차오르며 달의 바다와 크레이터를 드러내고, 하늘도 같이 밝아져요. K1 을 누르면 다음 보름에 개기월식이 들어 달이 구릿빛이 돼요.","idea":"One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.","buttons":"K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.","code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-lunation","type":"code","name":"lunation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Latitude","min":-90,"max":90,"about":"Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down."},{"name":"Days","min":0.5,"max":4,"about":"Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4."},{"name":"Zoom","min":0,"max":1,"about":"The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame."},{"name":"Exposure","min":-2,"max":2,"about":"Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white."}],"start":[0,2,0,0.06],"measures":{"motion":0.058,"detail":0.023,"edges":0.2973,"complexity":1.178,"coverage":0.7526,"colour":0.083,"drift":0.3482},"knobResponse":[0.0549,0.1588,0.1276,0.2614]},{"slug":"mandelbrot","title":"Mandel Dive","family":"fractal","round":2,"note":"망델브로 집합 전체가 서 있다가 가장자리의 한 점으로 끝없이 떨어져 들어가요. 처음 자리는 안테나 위의 미니 망델브로라서, 다 들어가면 처음과 같은 그림으로 녹아들어 다시 떨어져요.","idea":"The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.","buttons":"K1 tap starts the next dive now.","code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-mandelbrot","type":"code","name":"mandelbrot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour bands around the wheel."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the view falls, from one doubling every eight seconds to two a second."},{"name":"Spot","min":0,"max":3,"about":"Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral."},{"name":"Bands","min":1,"max":3.5,"about":"How tightly the colour bands are packed, from slow washes to fine contour rings."}],"start":[0,2,0,1],"measures":{"motion":1.8353,"detail":0.0554,"edges":0.2209,"complexity":1.9032,"coverage":0.846,"colour":0.2924,"drift":0.4001},"knobResponse":[0.262,0.2907,0.2828,0.2216]},{"slug":"marble-run","title":"Marble Run","family":"toy","round":17,"note":"패널 높이의 구슬 굴리기 장난감이에요. 고양이눈 유리구슬이 깔때기를 돌고 지그재그 레일 셋과 나선, 실로폰을 지나 내려오면 옆의 나사 리프트가 다시 꼭대기로 올리고, 구슬이 지나는 플라스틱 조각에는 불이 들어와요. K1 을 누르면 구슬 여섯 개를 깔때기에 쏟아요.","idea":"Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.","buttons":"K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.","code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-marble-run","type":"code","name":"marble-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paint","min":0,"max":1,"about":"Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again."},{"name":"Marbles","min":6,"max":28,"about":"How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop."},{"name":"Tilt","min":0,"max":1,"about":"How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them."}],"start":[0,2,6,0.06],"measures":{"motion":0.4936,"detail":0.087,"edges":0.6482,"complexity":0.8353,"coverage":0.464,"colour":0.2101,"drift":0.042},"knobResponse":[0.0707,0.0515,0.0698,0.0736]},{"slug":"marbling","title":"Marbling","family":"print","round":15,"note":"물 위에 떨어진 잉크 방울이 과녁처럼 번지고, 빗이 지나가면 깃털과 갈매기 무늬로 끌려가요. 종이를 들어 올리면 물이 비고 다음 판에 다시 방울이 떨어져요.","idea":"Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.","buttons":"K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.","code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","layer":{"id":"layer-marbling","type":"code","name":"marbling","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top."},{"name":"Drops","min":3,"max":8,"about":"How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count."},{"name":"Comb","min":0,"max":1,"about":"How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10."}],"start":[0,2,3,0.06],"measures":{"motion":1.6459,"detail":0.1305,"edges":0.9605,"complexity":0.2799,"coverage":0.6371,"colour":0.5767,"drift":0.3773},"knobResponse":[0.3451,0.3454,0.3519,0.2984]},{"slug":"marionette","title":"Marionette","family":"stage","round":25,"note":"작은 인형극 무대에서 어릿광대 꼭두각시가 팔로 스폿을 받으며 지그를 춰요. 머리와 두 손, 두 무릎, 등에 맨 실 일곱이 꼭대기 다리에서 인형사가 쥔 십자 조종대까지 올라가서, 조종대가 기울면 실이 따라 기울고 팔과 무릎이 끌려 올라가요. K4 가 스폿을 옆으로 옮기면 인형과 실의 그림자가 반대쪽 배경막에 서고, K1 을 누르면 인형이 무릎을 접고 높이 뛰었다가 인사해요.","idea":"A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.","buttons":"K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.","code":"// ===== Patternflow pattern =====\n// Title:   Marionette\n// Family:  stage\n// Idea:    A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the string marionettes of the European puppet theatres\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1\n//\n// Knob 1: Costume. The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald.\n// Knob 2: Speed. The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower.\n// Knob 3: Number. The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order.\n// Knob 4: Spot. Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side.\n// Buttons: K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// Rows: bridge rail, grip, top of the backcloth, its foot, the ankles' floor, the apron.\nconst [RAIL, GRIP, CLOTH, BACK, FLOOR, APRON] = [3, 11, 28, 108, 117, 124];\n// Gravity in LEDs/s² (the 46 LED puppet is about 60 cm), damping per step, beats a second at Speed 2.\nconst [G, DAMP, BPS] = [700, 0.992, 2.4];\n// The puppet standing, x from its middle: temples, shoulders, hips, elbows, hands, knees, ankles.\nconst REST = [-3, 74, 3, 74, -5, 80, 5, 80, -3, 94, 3, 94, -6, 88, 6, 88, -7, 96, 7, 96, -3, 106, 3, 106, -3, 117, 3, 117];\n// Bones and their stiffness. The neck's diagonals are soft so the head can nod.\nconst BONES = \"01 02 13 03. 12. 23 45 24 35 25 34 26 68 37 79 4a ac 5b bd\".split(\" \").map((s) => [parseInt(s[0], 16), parseInt(s[1], 16), s[2] ? 0.2 : 1]);\n// The threads in the order of their anchors: temples, hands, the small of the back, knees.\nconst STR = [[0], [1], [8], [9], [4, 5], [10], [11]];\n// How low each particle may go.\nconst LIM = [3.5, 3.5, 2, 2, 2, 2, 1.5, 1.5, 1.3, 1.3, 1.6, 1.6, 0, 0].map((v) => FLOOR - v);\n// Beats in each number.\nconst LEN = [14, 8, 10, 10, 12];\n// Each number's light: wash, follow spot, its radius, footlights, pin spot, rail lamps.\nconst CUES = [\n  [0.5, 0.42, 0.34, 1, 0.9, 0.72, 21, 0.5, 0, 1],\n  [0.05, 0.05, 0.1, 0.3, 0.3, 0.34, 13, 0.12, 1, 0.8],\n  [0.12, 0.2, 0.42, 0.72, 0.84, 1, 20, 0.08, 0, 0.7],\n  [0.42, 0.1, 0.16, 1, 0.66, 0.36, 17, 1.2, 0, 1],\n  [0.58, 0.55, 0.46, 1, 1, 0.94, 25, 0.45, 0, 1],\n];\nconst WOOD = [205, 150, 95], FACE = [232, 194, 156], GOLD = [255, 200, 80], FT = [1, 0.72, 0.42], LM = [1, 0.78, 0.52], PK = [1, 0.97, 0.9];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    p: F32(42), q: F32(42), f: F32(N * 3), lt: F32(N * 3), m: F32(N), alb: F32(N * 3), pi: new Int8Array(N),\n    b: 0, num: 0, nk: -1, cue: CUES[0].slice(), leap: -1, walk: 0, sx: 32, sy: 92, bell: [38, 62, 0, 0], dust: [], k1: 0, s4: 0.06, flash: 0, stc: [0, 0],\n    C: { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0 },\n  });\n  for (let i = 0; i \u003c 14; i++) (P.p[i * 3] = P.q[i * 3] = 32 + REST[i * 2]), (P.p[i * 3 + 1] = P.q[i * 3 + 1] = REST[i * 2 + 1]);\n  const p = P.p, A = (P.A = anchors(P.C));\n  P.bl = BONES.map(([a, b]) => sqrt((p[a * 3] - p[b * 3]) ** 2 + (p[a * 3 + 1] - p[b * 3 + 1]) ** 2));\n  P.sl = STR.map((s, j) => {\n    const m = mid(p, s);\n    return sqrt((m[0] - A[j][0]) ** 2 + (m[1] - A[j][1]) ** 2 + (m[2] - A[j][2]) ** 2) + (j > 4 ? 2 : 1);\n  });\n  paint(P);\n  phys(P, A, A, 1 / 120, 150);\n}\n\nconst mid = (p, s) => [0, 1, 2].map((c) => (p[s[0] * 3 + c] + p[s[s.length - 1] * 3 + c]) / 2);\n\n// The cross: a stick from the grip with a bar across it. The leg bar is in the other hand below it.\nfunction anchors(C) {\n  const cp = cos(C.p), sp = sin(C.p), cr = cos(C.r), sr = sin(C.r), cw = cos(C.w), sw = sin(C.w);\n  const T = (lx, ly) => {\n    const y1 = ly * cp, z1 = ly * sp, x2 = lx * cr - y1 * sr, y2 = lx * sr + y1 * cr;\n    return [C.x + x2 * cw + z1 * sw, C.y + y2, -x2 * sw + z1 * cw];\n  };\n  const L = (s, k) => [C.x + s * 7 * cw, C.y + 19 - k, 3 - s * 7 * sw];\n  return [T(-4, 5), T(4, 5), T(-12, 5), T(12, 5), T(0, 16), L(-1, C.kL), L(1, C.kR), T(0, 0)];\n}\n\n// Verlet steps: gravity, bones, threads that pull only when taut, the floor.\nfunction phys(P, A0, A1, h, n) {\n  const p = P.p, q = P.q, C = P.C, h2 = h * h, d = [0, 0, 0];\n  for (let st = 0; st \u003c n; st++) {\n    const f = (st + 1) / n;\n    let rx = p[9] - p[6], rz = p[11] - p[8];\n    const rl = sqrt(rx * rx + rz * rz) || 1;\n    (rx /= rl), (rz /= rl);\n    for (let i = 0; i \u003c 14; i++) {\n      // Knees bend forward, elbows out and back, the head leans in a bow.\n      const sd = i & 1 ? 30 : -30, a = i > 9 && i \u003c 12 ? [-90 * rz, 90 * rx] : i === 6 || i === 7 ? [sd * rx + 25 * rz, sd * rz - 25 * rx] : i \u003c 2 ? [-C.lean * 400 * rz, C.lean * 400 * rx] : [0, 0];\n      for (let c = 0, o = i * 3; c \u003c 3; c++, o++) {\n        const v = (p[o] - q[o]) * DAMP;\n        (q[o] = p[o]), (p[o] += v + (c === 1 ? G : a[c >> 1]) * h2);\n      }\n    }\n    for (let it = 0; it \u003c 6; it++) {\n      BONES.forEach(([a, b, k], j) => {\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = p[b * 3 + c] - p[a * 3 + c]), (l += d[c] * d[c]);\n        const m = (1 - P.bl[j] / (sqrt(l) || 1e-6)) * 0.5 * k;\n        for (let c = 0; c \u003c 3; c++) (p[a * 3 + c] += d[c] * m), (p[b * 3 + c] -= d[c] * m);\n      });\n      for (let s = 0; s \u003c 7; s++) {\n        const m = mid(p, STR[s]), L = max(4, P.sl[s] + (s \u003c 2 ? C.sH : s === 2 ? -C.hL : s === 3 ? -C.hR : s === 4 ? C.sB : 0));\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = m[c] - mix(A0[s][c], A1[s][c], f)), (l += d[c] * d[c]);\n        if ((l = sqrt(l)) > L) for (const i of STR[s]) for (let c = 0; c \u003c 3; c++) p[i * 3 + c] -= (d[c] * (l - L)) / l;\n      }\n      for (let i = 0; i \u003c 14; i++) {\n        const o = i * 3;\n        if (p[o + 1] > LIM[i]) {\n          // A foot that comes down hard raises dust.\n          if (i > 11 && it === 0 && p[o + 1] - q[o + 1] > 0.45 && P.stc[i - 12] \u003c= 0) stamp(P, p[o], p[o + 1] - q[o + 1]), (P.stc[i - 12] = 0.25);\n          (p[o + 1] = q[o + 1] = LIM[i]), (q[o] = p[o] - (p[o] - q[o]) * 0.5), (q[o + 2] = p[o + 2] - (p[o + 2] - q[o + 2]) * 0.5);\n        }\n        (p[o] = cl(p[o], 3, 60)), (p[o + 2] = cl(p[o + 2], -14, 14));\n      }\n    }\n  }\n}\n\nfunction stamp(P, x, v) {\n  for (let i = 0; i \u003c 7; i++) P.dust.push([x + (Math.random() - 0.5) * 4, FLOOR + 1, (Math.random() - 0.5) * 40, -6 - Math.random() * 14 * v, 0.5 + Math.random() * 0.5]);\n}\n\n// What the puppeteer does with the cross in each number, beat by beat.\nfunction script(n, b) {\n  const T = { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0, au: 0 };\n  const ph = fr(b), bu = sin(PI * ph), odd = floor(b) & 1;\n  if (n === 0) {\n    // The jig: a hop on every beat, knees and arms up in turn, across and back.\n    const tr = (TAU * b) / 8, sw = sin((PI * b) / 2), e = 1 - sm(LEN[0] - 1.5, LEN[0], b);\n    (T.x = 32 + 10 * sin(tr) * e), (T.w = 0.5 * cos(tr) * e), (T.y -= 3.5 * bu * e), (T[odd ? \"kR\" : \"kL\"] = 9 * bu * bu * e);\n    (T.r = 0.3 * sw), (T.hL = 13 * max(0, sw) * e), (T.hR = 13 * max(0, -sw) * e);\n  } else if (n === 1) {\n    // The bow: the head threads let out, the back thread holds, the cross tips over.\n    const u = sm(1, 2.4, b) * (1 - sm(5, 6.6, b));\n    (T.y += u), (T.p = -0.5 * u), (T.sH = 11 * u), (T.sB = -3 * u), (T.lean = 1.3 * u), (T.w = 0.6 * u), (T.hR = 12 * sm(0.2, 1.2, b) * (1 - sm(4.6, 6.2, b))), (T.au = 1);\n  } else if (n === 2) {\n    // The flop: all let go, a heap on the floor, the head comes up to look round, lifted back up, a shake.\n    const dr = sm(0.8, 1.15, b) * (1 - sm(5.2, 6.8, b)), lk = sm(2.2, 2.9, b) * (1 - sm(4.4, 5, b));\n    (T.x = 27), (T.y += 26 * dr), (T.sH = -14 * lk * dr), (T.w = 0.7 * dr + 0.6 * sin((TAU * (b - 2.2)) / 2.2) * lk), (T.au = 1);\n    T.r = 0.35 * sin(TAU * b) * sm(6.8, 7.3, b) * (1 - sm(9, 9.8, b));\n  } else if (n === 3) {\n    // The stamp: a knee drawn up slowly and let drop hard on the beat.\n    (T.x = 37), (T[odd ? \"kR\" : \"kL\"] = 11 * sm(0.1, 0.6, ph) * (1 - sm(0.82, 0.9, ph))), (T.r = (odd ? 0.22 : -0.22) * bu);\n    (T.lean = -0.25), (T.hL = T.hR = 5), (T.w = 0.3 * sin((TAU * b) / 4)), (T.au = 1);\n  } else {\n    // The strut: across the stage and back, facing the way it goes.\n    const tr = (TAU * b) / 12;\n    (T.x = 32 + 12 * cos(tr)), (T.w = -0.8 * sin(tr)), (T.y -= 1.5 * bu), (T[odd ? \"kR\" : \"kL\"] = 6 * bu), (T.r = 0.25 * sin(PI * b)), (T.p = -0.1);\n  }\n  return T;\n}\n\n// K1's leap, in seconds: crouch, jerk up, fly, land, bow.\nfunction leap(P, T, rd) {\n  const u = P.leap, a = 1 - sm(2.7, 3.3, u), air = sm(0.25, 0.4, u) * (1 - sm(0.55, 0.95, u)), tuck = sm(0.3, 0.45, u) * (1 - sm(0.75, 0.95, u));\n  const bow = sm(1.2, 1.7, u) * (1 - sm(2.4, 3, u)), cr = sm(0, 0.2, u) * (1 - sm(0.22, 0.32, u));\n  (T.y = mix(T.y, GRIP + 4 * cr - 10 * air + 4 * bow, a)), (T.kL = T.kR = mix(T.kL, 7 * tuck, a)), (T.hL = T.hR = mix(T.hL, 15 * tuck, a));\n  (T.sH = mix(T.sH, 10 * bow, a)), (T.lean = mix(T.lean, bow, a)), (T.p = mix(T.p, -0.5 * bow, a)), (T.r *= 1 - a), (T.w *= 1 - a), (T.x = mix(T.x, P.C.x, a));\n  if (u \u003c 0.4 && u + rd >= 0.4) P.flash = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05), d = (rd * cl(k[1], 0.2, 3)) / 2;\n  (P.k1 = cl(k[0], 0, 1)), (P.s4 = cl(k[3], -1, 1));\n  const nk = round(cl(k[2], 0, 4));\n  if (nk !== P.nk) {\n    if (P.nk \u003c 0) P.cue = CUES[nk].slice();\n    (P.nk = P.num = nk), (P.b = 0);\n  }\n  if ((P.b += d * BPS) >= LEN[P.num]) (P.b -= LEN[P.num]), (P.num = (P.num + 1) % 5);\n  if (input.btnPressed && input.btnPressed[0] && P.leap \u003c 0) P.leap = 0;\n  const T = script(P.num, P.b), C = P.C, x0 = C.x;\n  if (P.leap >= 0 && (leap(P, T, rd), (P.leap += rd) > 3.3)) P.leap = -1;\n  const ex = min(1, rd / 0.45), e = min(1, rd / 0.05);\n  for (const key in C) C[key] = mix(C[key], T[key], key === \"x\" ? ex : e);\n  // Steps wherever the cross travels in a number without its own.\n  const dx = abs(C.x - x0);\n  P.walk += dx / 5;\n  if (T.au && rd > 0) {\n    const lift = min(1, dx / rd / 6) * 6 * sin(PI * fr(P.walk)) ** 2;\n    floor(P.walk) & 1 ? (C.kR = max(C.kR, lift)) : (C.kL = max(C.kL, lift));\n  }\n  const A = anchors(C), n = max(1, ceil(rd * 120 - 1e-6));\n  if (rd > 0) phys(P, P.A, A, rd / n, n);\n  P.A = A;\n  for (let i = 0; i \u003c 10; i++) P.cue[i] = mix(P.cue[i], CUES[P.num][i], min(1, rd * 2.2));\n  // The follow spot keeps to the body.\n  const p = P.p;\n  (P.sx = mix(P.sx, (p[6] + p[9] + p[12] + p[15]) / 4, min(1, rd * 3.5))), (P.sy = mix(P.sy, (p[7] + p[10] + p[13] + p[16]) / 4 + 3, min(1, rd * 2.5)));\n  // The bell on the cap swings after the head.\n  const hd = head(p), B = P.bell, gx = hd.x + hd.ux * 7 - hd.uy * 6, gy = hd.y + hd.uy * 7 + hd.ux * 6 + 2;\n  (B[2] += ((gx - B[0]) * 160 - B[2] * 7) * rd), (B[3] += ((gy - B[1]) * 160 - B[3] * 7 + 60) * rd), (B[0] += B[2] * rd), (B[1] += B[3] * rd);\n  (B[0] = cl(B[0], gx - 6, gx + 6)), (B[1] = cl(B[1], gy - 6, gy + 6));\n  P.dust = P.dust.filter((s) => ((s[3] += 50 * rd), (s[0] += s[2] * rd), (s[1] = min(FLOOR + 2, s[1] + s[3] * rd)), (s[4] -= rd) > 0));\n  (P.stc[0] -= rd), (P.stc[1] -= rd), (P.flash = max(0, P.flash - rd * 1.5));\n}\n\n// The head: its middle, which way is up, how far it is turned and nodded.\nfunction head(p) {\n  const x = (p[0] + p[3]) / 2, y = (p[1] + p[4]) / 2 - 0.5, z = (p[2] + p[5]) / 2, sx = (p[6] + p[9]) / 2, sy = (p[7] + p[10]) / 2, sz = (p[8] + p[11]) / 2;\n  const l = Math.hypot(x - sx, y - sy) || 1;\n  return { x, y, ux: (x - sx) / l, uy: (y - sy) / l, yaw: atan2(-(p[5] - p[2]), p[3] - p[0]), nod: (z - sz) / 6.3 };\n}\n\n// What does not move: velvet, rail, backcloth, boards, apron.\nfunction paint(P) {\n  const A = P.alb, I = P.pi;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.05, 0.045, 0.06];\n    I[i] = -1;\n    if (y >= RAIL && y \u003c= RAIL + 3) {\n      const g = (0.8 + 0.3 * hash(floor((x + y * 7) / 11), y)) * (y === RAIL ? 1.2 : y === RAIL + 3 ? 0.6 : 1) * (0.92 + 0.08 * n);\n      c = [0.55 * g, 0.36 * g, 0.22 * g];\n    } else if (y >= CLOTH - 2 && y \u003c CLOTH) c = [0.13, 0.1, 0.08];\n    else if (y >= CLOTH && y \u003c BACK) {\n      // Painted night: stars over two rows of hills, in soft folds.\n      const hf = 86 + 4 * sin(x * 0.09 + 0.5) + 2 * sin(x * 0.27 + 1), hn = 97 + 3 * sin(x * 0.13 + 2) + 1.5 * sin(x * 0.41);\n      const cx = floor(x / 7), cy = floor(y / 8), r = hash(cx, cy + 50), sx = cx * 7 + 1 + floor(r * 5), sy = cy * 8 + 1 + floor(hash(cx + 9, cy) * 6);\n      I[i] = y >= hn ? 2 : y >= hf ? 1 : r \u003c 0.5 && y \u003c hf - 3 ? (x === sx && y === sy ? 3 : abs(x - sx) + abs(y - sy) === 1 ? 4 : 0) : 0;\n      c = [(0.8 + 0.2 * (0.5 + 0.5 * sin(x * 0.95 + 0.6 * sin(y * 0.05)))) * (0.95 + 0.1 * n), 0, 0];\n    } else if (y >= BACK && y \u003c APRON) {\n      // Boards running towards you.\n      const u = (x - 31.5) / ((y - 30) / (APRON - 30)) / 6 + 0.5, bd = floor(u), g = (0.8 + 0.2 * hash(bd, 3)) * mix(0.45, 1, cl(min(fr(u), 1 - fr(u)) * 9 - 0.3, 0, 1)) * (y > APRON - 3 ? 1.12 : 1) * (0.92 + 0.14 * hash(x, bd * 31 + floor(y / 3)));\n      c = [0.6 * g, 0.42 * g, 0.27 * g];\n    } else if (y >= APRON) c = y === APRON ? [0.4, 0.28, 0.18] : [0.14, 0.09, 0.07];\n    (A[o] = c[0]), (A[o + 1] = c[1]), (A[o + 2] = c[2]);\n  }\n}\n\nlet F, L, M, MODE, SIDE;\n// One LED of the puppet or cross: the shadow mask, or its colour in the light there.\nfunction dot(x, y, c, nx = 0, flat = 0) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const i = y * W + x, o = i * 3;\n  if (MODE === 0) return void (M[i] = 1);\n  const k = 1 - 0.2 * nx * nx + 0.4 * SIDE * nx;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = c[j] * max(flat, L[o + j]) * k;\n}\n// A capsule; the colour may be a function of how far along.\nfunction seg(x0, y0, x1, y1, r, c, flat = 0) {\n  const dx = x1 - x0, dy = y1 - y0, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = floor(min(y0, y1) - r); y \u003c= ceil(max(y0, y1) + r); y++)\n    for (let x = floor(min(x0, x1) - r); x \u003c= ceil(max(x0, x1) + r); x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / l2, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      if (ex * ex + ey * ey \u003c= r * r) dot(x, y, typeof c === \"function\" ? c(t) : c, cl(ex / r, -1, 1), flat);\n    }\n}\nconst disc = (x, y, r, c, flat) => seg(x, y, x, y, r, c, flat);\n\n// A thread: one LED wide over two columns, a faint halo, a glint that slides as it tilts.\nfunction thread(ax, ay, bx, by, gl) {\n  const n = ceil(abs(by - ay)) + 1, tilt = (bx - ax) / (by - ay || 1), g0 = 0.5 + 6 * (tilt + SIDE * 0.06);\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n, x = mix(ax, bx, t), y = round(mix(ay, by, t)), x0 = floor(x), f = x - x0;\n    if (y \u003c 0 || y >= H) continue;\n    if (MODE === 0) {\n      if (x0 >= 0 && x0 \u003c W) M[y * W + x0] = max(M[y * W + x0], 0.45);\n      continue;\n    }\n    const o = (y * W + cl(x0, 0, W - 1)) * 3, gls = gl * 150 * exp(-((((t - g0) * n) / 5) ** 2));\n    for (let e = -1; e \u003c 3; e++) {\n      const xx = x0 + e, a = e \u003c 0 ? 0.12 - 0.12 * f : e ? (e > 1 ? 0.12 * f : 0.12 + 0.88 * f) : 1 - 0.88 * f, q = (y * W + xx) * 3;\n      if (xx \u003c 0 || xx >= W) continue;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += a * (24 + 64 * L[o + j] + gls);\n    }\n  }\n}\n\nfunction puppet(P, C1, C2) {\n  const p = P.p, X = (i) => p[i * 3], Y = (i) => p[i * 3 + 1], Z = (i) => p[i * 3 + 2], tz = (Z(2) + Z(3) + Z(4) + Z(5)) / 4;\n  const stock = (t) => (floor(t * 5) & 1 ? C1 : [235, 228, 210]);\n  const limb = (a, b, c, up, low, r1, r2) => {\n    seg(X(a), Y(a), X(b), Y(b), r1, up), seg(X(b), Y(b), X(c), Y(c), r2, low);\n  };\n  const arm = (s) => (limb(2 + s, 6 + s, 8 + s, C2, C1, 1.6, 1.2), disc(X(8 + s), Y(8 + s), 1.4, FACE));\n  const leg = (s) => {\n    limb(4 + s, 10 + s, 12 + s, C2, stock, 1.8, 1.2);\n    const fx = X(12 + s), fy = Y(12 + s) + 1.2, yw = atan2(-(Z(3) - Z(2)), X(3) - X(2));\n    seg(fx - 1.2, fy, fx + 1.2 + 2.4 * sin(yw), fy, 1.1, C2.map((v) => v * 0.55)), dot(round(fx + 2.4 + 2.6 * sin(yw)), round(fy - 1), GOLD);\n  };\n  const parts = [[(Z(6) + Z(8)) / 2, () => arm(0)], [(Z(7) + Z(9)) / 2, () => arm(1)], [(Z(10) + Z(12)) / 2, () => leg(0)], [(Z(11) + Z(13)) / 2, () => leg(1)]];\n  for (const [z, f] of parts) if (z \u003c tz - 1) f();\n  // The doublet in diamonds, flaring to a hem of points, with a belt.\n  const sx = (X(2) + X(3)) / 2, sy = (Y(2) + Y(3)) / 2, hx = (X(4) + X(5)) / 2, hy = (Y(4) + Y(5)) / 2, ax = hx - sx, ay = hy - sy, al = ax * ax + ay * ay || 1;\n  let ex = X(3) - X(2) + X(5) - X(4), ey = Y(3) - Y(2) + Y(5) - Y(4);\n  const el = Math.hypot(ex, ey) || 1, hwS = max(2.5, Math.hypot(X(3) - X(2), Y(3) - Y(2)) / 2), hwH = max(2.5, Math.hypot(X(5) - X(4), Y(5) - Y(4)) * 0.62);\n  (ex /= el), (ey /= el);\n  for (let y = floor(min(sy, hy) - 6); y \u003c= ceil(max(sy, hy) + 6); y++)\n    for (let x = floor(min(sx, hx) - 7); x \u003c= ceil(max(sx, hx) + 7); x++) {\n      const v = ((x - sx) * ax + (y - sy) * ay) / al, hw = mix(hwS, hwH, v), u = ((x - sx - ax * v) * ex + (y - sy - ay * v) * ey) / hw;\n      if (v \u003c -0.05 || abs(u) > 1 || v > 1.1 + 0.12 * abs(fr(u * 2.5) - 0.5) * 2) continue;\n      const belt = v > 0.84 && v \u003c 0.94, dia = (floor(u * 1.6 + v * 3.2) + floor(u * 1.6 - v * 3.2)) & 1;\n      dot(x, y, belt ? (abs(u) \u003c 0.22 ? GOLD : [60, 40, 30]) : dia ? C1 : C2, u);\n    }\n  for (const [z, f] of parts) if (z >= tz - 1) f();\n  // The ruff, the head, the face, the cap and its bell.\n  seg(X(2), Y(2) - 1, X(3), Y(3) - 1, 1.7, (t) => (floor(t * 9) & 1 ? [250, 246, 236] : [205, 200, 192]));\n  const hd = head(p), R = 4.3, px = -hd.uy, py = hd.ux;\n  disc(hd.x, hd.y, R, FACE);\n  if (MODE && hd.nod \u003c 0.7)\n    for (const [ph, hy, c] of [[0.5, -0.4, [30, 22, 34]], [0.8, 1.2, [240, 120, 110]], [0, 2.1, [150, 40, 46]], [-0.5, -0.4, [30, 22, 34]], [-0.8, 1.2, [240, 120, 110]]]) {\n      const a = ph + hd.yaw;\n      if (cos(a) > 0.25) dot(round(hd.x + R * 0.85 * sin(a)), round(hd.y + hy + hd.nod * 3), c);\n    }\n  const b0x = hd.x + hd.ux * 3.1, b0y = hd.y + hd.uy * 3.1, b1x = hd.x + hd.ux * 8 + px, b1y = hd.y + hd.uy * 8 + py, [bx, by] = P.bell;\n  for (let i = 0, lx = b0x, ly = b0y; i \u003c= 8; i++) {\n    const t = i / 8, x = mix(mix(b0x, b1x, t), mix(b1x, bx, t), t), y = mix(mix(b0y, b1y, t), mix(b1y, by, t), t);\n    seg(lx, ly, x, y, mix(3.3, 0.8, t), C1), (lx = x), (ly = y);\n  }\n  seg(hd.x + hd.ux * 2.3 - px * 4, hd.y + hd.uy * 2.3 - py * 4, hd.x + hd.ux * 2.3 + px * 4, hd.y + hd.uy * 2.3 + py * 4, 0.9, C2);\n  disc(bx, by, 1.3, GOLD);\n}\n\n// The puppeteer's sleeves and hands, the cross and the leg bar.\nfunction cross(P) {\n  const A = P.A, [gx, gy] = A[7], sleeve = [46, 38, 60], skin = [232, 176, 140], cuff = [236, 232, 222];\n  const arm = (x0, x1, y1) => seg(x0, -3, x1, y1, 2.6, (t) => (t > 0.84 ? cuff : sleeve), 0.32);\n  seg(A[5][0] - 1.5, A[5][1], A[6][0] + 1.5, A[6][1], 0.7, WOOD, 0.35);\n  seg(gx, gy, A[4][0], A[4][1], 0.9, WOOD, 0.35), seg(A[2][0], A[2][1], A[3][0], A[3][1], 0.8, WOOD, 0.35);\n  for (let j = 0; j \u003c 7; j++) dot(round(A[j][0]), round(A[j][1]), [220, 220, 230], 0, 0.5);\n  arm(gx + 17, gx + 1.5, gy - 1.5), disc(gx + 0.5, gy - 0.5, 2.2, skin, 0.4);\n  arm(A[5][0] - 22, A[5][0] - 2.5, A[5][1] - 1), disc(A[5][0] - 2, A[5][1] - 0.5, 2, skin, 0.4);\n}\n\nfunction stage(P, pal) {\n  const [wr, wg, wb, sr0, sg0, sb0, rad0, foot, pin, lamp] = P.cue, s = P.s4, A = P.alb, I = P.pi, p = P.p;\n  const fl = 1 + 0.5 * P.flash, rad = rad0 + 7 * P.flash, S = [sr0 * fl, sg0 * fl, sb0 * fl], WS = [wr, wg, wb];\n  const px = P.sx - s * 11, py = P.sy, rx = rad * (1 + 0.45 * abs(s)), ry = rad * 1.35, sdx = -s * 15, fx = (p[36] + p[39]) / 2, pinX = P.sx;\n  const lift = [0, 1].map((j) => 1 - sm(0, 8, FLOOR - p[37 + j * 3]));\n  for (let y = 0; y \u003c H; y++) {\n    const ft = y \u003c APRON ? foot * exp((y - APRON) / 14) : 0, wash = y \u003c CLOTH - 2 ? (y >= RAIL && y \u003c= RAIL + 3 ? 0.3 : 0.08) : 1, cw = 2 + (y + 12) * 0.085;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = (x - px) / rx, dy = (y - py) / ry, pool = 1 - sm(0.84, 1, sqrt(dx * dx + dy * dy));\n      const lm = lamp * (1 / (1 + ((x - 4.5) ** 2 + (y - 10) ** 2) / 260) + 1 / (1 + ((x - 59.5) ** 2 + (y - 10) ** 2) / 260));\n      let cone = 0;\n      if (pin > 0.01) cone = y >= BACK ? pin * (1 - sm(0.7, 1, sqrt(((x - pinX) / 12) ** 2 + ((y - FLOOR - 1) / 4) ** 2))) : pin * (1 - sm(0.6, 1, abs(x - pinX) / cw));\n      for (let j = 0; j \u003c 3; j++) L[o + j] = wash * WS[j] + pool * S[j] + ft * FT[j] + lm * LM[j] + cone * PK[j];\n      // The shadow stands up from the feet, larger, away from the spot.\n      let sh = 0, k = 1;\n      if (y >= CLOTH && y \u003c APRON && pool > 0) {\n        const mx = round(fx + (x - fx - sdx) / 1.12), my = round(FLOOR + (y - FLOOR + 3) / 1.12);\n        if (mx >= 0 && mx \u003c W && my >= 0 && my \u003c H) sh = M[my * W + mx] * pool * 0.8;\n      }\n      if (y > BACK && y \u003c APRON) for (let j = 0; j \u003c 2; j++) k *= 1 - 0.6 * lift[j] * exp(-1.5 * (((x - p[36 + j * 3]) / 3.5) ** 2 + ((y - FLOOR - 1.5) / 1.3) ** 2));\n      const c = I[i] >= 0 ? pal[I[i]] : null, f = c ? A[o] : 1, cf = c ? 0.8 * cone : 0;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = (c ? c[j] : A[o + j]) * f * k * (L[o + j] - sh * S[j] - cf * PK[j]) * 255;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  [F, L, M, SIDE] = [P.f, P.lt, P.m, P.s4];\n  const h = 0.36 + P.k1, hc = 0.61 + 0.3 * sin(TAU * P.k1), A = P.A, p = P.p;\n  const C1 = hsv(h, 0.8, 0.8).map((v) => v * 255), C2 = hsv(h + 0.06, 0.75, 0.42).map((v) => v * 255);\n  const sky = hsv(hc, 0.62, 0.34), star = [0.95, 0.78, 0.4], pal = [sky, hsv(hc + 0.06, 0.55, 0.46), hsv(hc + 0.12, 0.6, 0.58), star, sky.map((v, j) => mix(v, star[j], 0.4))];\n  const threads = (from, to) => {\n    for (let s = from; s \u003c to; s++) {\n      const m = mid(p, STR[s]), side = s \u003c 2 ? (s ? 2 : -2) * cos(head(p).yaw) : 0;\n      thread(A[s][0], A[s][1], m[0] + side, m[1] - (s \u003c 2 ? 1 : 0), s === 4 ? 0.4 : 1);\n    }\n  };\n  // The shadow first: the puppet and its threads as a mask.\n  M.fill(0), (MODE = 0), threads(0, 7), puppet(P, C1, C2);\n  (MODE = 1), stage(P, pal);\n  threads(0, 7), puppet(P, C1, C2), cross(P);\n  // Dust from the stamps, the haze in the pin beam, the footlights.\n  for (const [x, y, , , l] of P.dust) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) F[o + j] += [190, 160, 130][j] * l * 0.6 * max(0.4, L[o + j]);\n  }\n  const pin = P.cue[8];\n  if (pin > 0.01)\n    for (let y = 0; y \u003c BACK; y++) {\n      const cw = 2 + (y + 12) * 0.085;\n      for (let x = 0; x \u003c W; x++) {\n        const c = pin * 0.09 * (1 - sm(0.6, 1, abs(x - P.sx) / cw)) * 255;\n        for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += c * PK[j];\n      }\n    }\n  // The clip lamps on the rail and the footlights.\n  for (const x of [4.5, 59.5]) {\n    seg(x - 2, 7.5, x + 2, 7.5, 1.2, [40, 80, 58], 0.5), seg(x - 0.5, 9.2, x + 0.5, 9.2, 0.6, [255, 226, 170], P.cue[9]);\n    for (let i = -3; i \u003c 4; i++) for (let j = 0; j \u003c 3; j++) F[(10 * W + round(x + i)) * 3 + j] += (80 * P.cue[9] * LM[j]) / (1 + i * i);\n  }\n  const fb = min(1, P.cue[7] * 1.2 + 0.15);\n  for (const x of [6, 19, 32, 45, 57])\n    for (let i = -2; i \u003c= 3; i++) {\n      const a = i === 0 || i === 1 ? fb : fb * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[(125 * W + x + i) * 3 + j] += 255 * a * FT[j];\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","layer":{"id":"layer-marionette","type":"code","name":"marionette","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marionette\n// Family:  stage\n// Idea:    A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the string marionettes of the European puppet theatres\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1\n//\n// Knob 1: Costume. The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald.\n// Knob 2: Speed. The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower.\n// Knob 3: Number. The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order.\n// Knob 4: Spot. Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side.\n// Buttons: K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// Rows: bridge rail, grip, top of the backcloth, its foot, the ankles' floor, the apron.\nconst [RAIL, GRIP, CLOTH, BACK, FLOOR, APRON] = [3, 11, 28, 108, 117, 124];\n// Gravity in LEDs/s² (the 46 LED puppet is about 60 cm), damping per step, beats a second at Speed 2.\nconst [G, DAMP, BPS] = [700, 0.992, 2.4];\n// The puppet standing, x from its middle: temples, shoulders, hips, elbows, hands, knees, ankles.\nconst REST = [-3, 74, 3, 74, -5, 80, 5, 80, -3, 94, 3, 94, -6, 88, 6, 88, -7, 96, 7, 96, -3, 106, 3, 106, -3, 117, 3, 117];\n// Bones and their stiffness. The neck's diagonals are soft so the head can nod.\nconst BONES = \"01 02 13 03. 12. 23 45 24 35 25 34 26 68 37 79 4a ac 5b bd\".split(\" \").map((s) => [parseInt(s[0], 16), parseInt(s[1], 16), s[2] ? 0.2 : 1]);\n// The threads in the order of their anchors: temples, hands, the small of the back, knees.\nconst STR = [[0], [1], [8], [9], [4, 5], [10], [11]];\n// How low each particle may go.\nconst LIM = [3.5, 3.5, 2, 2, 2, 2, 1.5, 1.5, 1.3, 1.3, 1.6, 1.6, 0, 0].map((v) => FLOOR - v);\n// Beats in each number.\nconst LEN = [14, 8, 10, 10, 12];\n// Each number's light: wash, follow spot, its radius, footlights, pin spot, rail lamps.\nconst CUES = [\n  [0.5, 0.42, 0.34, 1, 0.9, 0.72, 21, 0.5, 0, 1],\n  [0.05, 0.05, 0.1, 0.3, 0.3, 0.34, 13, 0.12, 1, 0.8],\n  [0.12, 0.2, 0.42, 0.72, 0.84, 1, 20, 0.08, 0, 0.7],\n  [0.42, 0.1, 0.16, 1, 0.66, 0.36, 17, 1.2, 0, 1],\n  [0.58, 0.55, 0.46, 1, 1, 0.94, 25, 0.45, 0, 1],\n];\nconst WOOD = [205, 150, 95], FACE = [232, 194, 156], GOLD = [255, 200, 80], FT = [1, 0.72, 0.42], LM = [1, 0.78, 0.52], PK = [1, 0.97, 0.9];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    p: F32(42), q: F32(42), f: F32(N * 3), lt: F32(N * 3), m: F32(N), alb: F32(N * 3), pi: new Int8Array(N),\n    b: 0, num: 0, nk: -1, cue: CUES[0].slice(), leap: -1, walk: 0, sx: 32, sy: 92, bell: [38, 62, 0, 0], dust: [], k1: 0, s4: 0.06, flash: 0, stc: [0, 0],\n    C: { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0 },\n  });\n  for (let i = 0; i \u003c 14; i++) (P.p[i * 3] = P.q[i * 3] = 32 + REST[i * 2]), (P.p[i * 3 + 1] = P.q[i * 3 + 1] = REST[i * 2 + 1]);\n  const p = P.p, A = (P.A = anchors(P.C));\n  P.bl = BONES.map(([a, b]) => sqrt((p[a * 3] - p[b * 3]) ** 2 + (p[a * 3 + 1] - p[b * 3 + 1]) ** 2));\n  P.sl = STR.map((s, j) => {\n    const m = mid(p, s);\n    return sqrt((m[0] - A[j][0]) ** 2 + (m[1] - A[j][1]) ** 2 + (m[2] - A[j][2]) ** 2) + (j > 4 ? 2 : 1);\n  });\n  paint(P);\n  phys(P, A, A, 1 / 120, 150);\n}\n\nconst mid = (p, s) => [0, 1, 2].map((c) => (p[s[0] * 3 + c] + p[s[s.length - 1] * 3 + c]) / 2);\n\n// The cross: a stick from the grip with a bar across it. The leg bar is in the other hand below it.\nfunction anchors(C) {\n  const cp = cos(C.p), sp = sin(C.p), cr = cos(C.r), sr = sin(C.r), cw = cos(C.w), sw = sin(C.w);\n  const T = (lx, ly) => {\n    const y1 = ly * cp, z1 = ly * sp, x2 = lx * cr - y1 * sr, y2 = lx * sr + y1 * cr;\n    return [C.x + x2 * cw + z1 * sw, C.y + y2, -x2 * sw + z1 * cw];\n  };\n  const L = (s, k) => [C.x + s * 7 * cw, C.y + 19 - k, 3 - s * 7 * sw];\n  return [T(-4, 5), T(4, 5), T(-12, 5), T(12, 5), T(0, 16), L(-1, C.kL), L(1, C.kR), T(0, 0)];\n}\n\n// Verlet steps: gravity, bones, threads that pull only when taut, the floor.\nfunction phys(P, A0, A1, h, n) {\n  const p = P.p, q = P.q, C = P.C, h2 = h * h, d = [0, 0, 0];\n  for (let st = 0; st \u003c n; st++) {\n    const f = (st + 1) / n;\n    let rx = p[9] - p[6], rz = p[11] - p[8];\n    const rl = sqrt(rx * rx + rz * rz) || 1;\n    (rx /= rl), (rz /= rl);\n    for (let i = 0; i \u003c 14; i++) {\n      // Knees bend forward, elbows out and back, the head leans in a bow.\n      const sd = i & 1 ? 30 : -30, a = i > 9 && i \u003c 12 ? [-90 * rz, 90 * rx] : i === 6 || i === 7 ? [sd * rx + 25 * rz, sd * rz - 25 * rx] : i \u003c 2 ? [-C.lean * 400 * rz, C.lean * 400 * rx] : [0, 0];\n      for (let c = 0, o = i * 3; c \u003c 3; c++, o++) {\n        const v = (p[o] - q[o]) * DAMP;\n        (q[o] = p[o]), (p[o] += v + (c === 1 ? G : a[c >> 1]) * h2);\n      }\n    }\n    for (let it = 0; it \u003c 6; it++) {\n      BONES.forEach(([a, b, k], j) => {\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = p[b * 3 + c] - p[a * 3 + c]), (l += d[c] * d[c]);\n        const m = (1 - P.bl[j] / (sqrt(l) || 1e-6)) * 0.5 * k;\n        for (let c = 0; c \u003c 3; c++) (p[a * 3 + c] += d[c] * m), (p[b * 3 + c] -= d[c] * m);\n      });\n      for (let s = 0; s \u003c 7; s++) {\n        const m = mid(p, STR[s]), L = max(4, P.sl[s] + (s \u003c 2 ? C.sH : s === 2 ? -C.hL : s === 3 ? -C.hR : s === 4 ? C.sB : 0));\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = m[c] - mix(A0[s][c], A1[s][c], f)), (l += d[c] * d[c]);\n        if ((l = sqrt(l)) > L) for (const i of STR[s]) for (let c = 0; c \u003c 3; c++) p[i * 3 + c] -= (d[c] * (l - L)) / l;\n      }\n      for (let i = 0; i \u003c 14; i++) {\n        const o = i * 3;\n        if (p[o + 1] > LIM[i]) {\n          // A foot that comes down hard raises dust.\n          if (i > 11 && it === 0 && p[o + 1] - q[o + 1] > 0.45 && P.stc[i - 12] \u003c= 0) stamp(P, p[o], p[o + 1] - q[o + 1]), (P.stc[i - 12] = 0.25);\n          (p[o + 1] = q[o + 1] = LIM[i]), (q[o] = p[o] - (p[o] - q[o]) * 0.5), (q[o + 2] = p[o + 2] - (p[o + 2] - q[o + 2]) * 0.5);\n        }\n        (p[o] = cl(p[o], 3, 60)), (p[o + 2] = cl(p[o + 2], -14, 14));\n      }\n    }\n  }\n}\n\nfunction stamp(P, x, v) {\n  for (let i = 0; i \u003c 7; i++) P.dust.push([x + (Math.random() - 0.5) * 4, FLOOR + 1, (Math.random() - 0.5) * 40, -6 - Math.random() * 14 * v, 0.5 + Math.random() * 0.5]);\n}\n\n// What the puppeteer does with the cross in each number, beat by beat.\nfunction script(n, b) {\n  const T = { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0, au: 0 };\n  const ph = fr(b), bu = sin(PI * ph), odd = floor(b) & 1;\n  if (n === 0) {\n    // The jig: a hop on every beat, knees and arms up in turn, across and back.\n    const tr = (TAU * b) / 8, sw = sin((PI * b) / 2), e = 1 - sm(LEN[0] - 1.5, LEN[0], b);\n    (T.x = 32 + 10 * sin(tr) * e), (T.w = 0.5 * cos(tr) * e), (T.y -= 3.5 * bu * e), (T[odd ? \"kR\" : \"kL\"] = 9 * bu * bu * e);\n    (T.r = 0.3 * sw), (T.hL = 13 * max(0, sw) * e), (T.hR = 13 * max(0, -sw) * e);\n  } else if (n === 1) {\n    // The bow: the head threads let out, the back thread holds, the cross tips over.\n    const u = sm(1, 2.4, b) * (1 - sm(5, 6.6, b));\n    (T.y += u), (T.p = -0.5 * u), (T.sH = 11 * u), (T.sB = -3 * u), (T.lean = 1.3 * u), (T.w = 0.6 * u), (T.hR = 12 * sm(0.2, 1.2, b) * (1 - sm(4.6, 6.2, b))), (T.au = 1);\n  } else if (n === 2) {\n    // The flop: all let go, a heap on the floor, the head comes up to look round, lifted back up, a shake.\n    const dr = sm(0.8, 1.15, b) * (1 - sm(5.2, 6.8, b)), lk = sm(2.2, 2.9, b) * (1 - sm(4.4, 5, b));\n    (T.x = 27), (T.y += 26 * dr), (T.sH = -14 * lk * dr), (T.w = 0.7 * dr + 0.6 * sin((TAU * (b - 2.2)) / 2.2) * lk), (T.au = 1);\n    T.r = 0.35 * sin(TAU * b) * sm(6.8, 7.3, b) * (1 - sm(9, 9.8, b));\n  } else if (n === 3) {\n    // The stamp: a knee drawn up slowly and let drop hard on the beat.\n    (T.x = 37), (T[odd ? \"kR\" : \"kL\"] = 11 * sm(0.1, 0.6, ph) * (1 - sm(0.82, 0.9, ph))), (T.r = (odd ? 0.22 : -0.22) * bu);\n    (T.lean = -0.25), (T.hL = T.hR = 5), (T.w = 0.3 * sin((TAU * b) / 4)), (T.au = 1);\n  } else {\n    // The strut: across the stage and back, facing the way it goes.\n    const tr = (TAU * b) / 12;\n    (T.x = 32 + 12 * cos(tr)), (T.w = -0.8 * sin(tr)), (T.y -= 1.5 * bu), (T[odd ? \"kR\" : \"kL\"] = 6 * bu), (T.r = 0.25 * sin(PI * b)), (T.p = -0.1);\n  }\n  return T;\n}\n\n// K1's leap, in seconds: crouch, jerk up, fly, land, bow.\nfunction leap(P, T, rd) {\n  const u = P.leap, a = 1 - sm(2.7, 3.3, u), air = sm(0.25, 0.4, u) * (1 - sm(0.55, 0.95, u)), tuck = sm(0.3, 0.45, u) * (1 - sm(0.75, 0.95, u));\n  const bow = sm(1.2, 1.7, u) * (1 - sm(2.4, 3, u)), cr = sm(0, 0.2, u) * (1 - sm(0.22, 0.32, u));\n  (T.y = mix(T.y, GRIP + 4 * cr - 10 * air + 4 * bow, a)), (T.kL = T.kR = mix(T.kL, 7 * tuck, a)), (T.hL = T.hR = mix(T.hL, 15 * tuck, a));\n  (T.sH = mix(T.sH, 10 * bow, a)), (T.lean = mix(T.lean, bow, a)), (T.p = mix(T.p, -0.5 * bow, a)), (T.r *= 1 - a), (T.w *= 1 - a), (T.x = mix(T.x, P.C.x, a));\n  if (u \u003c 0.4 && u + rd >= 0.4) P.flash = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05), d = (rd * cl(k[1], 0.2, 3)) / 2;\n  (P.k1 = cl(k[0], 0, 1)), (P.s4 = cl(k[3], -1, 1));\n  const nk = round(cl(k[2], 0, 4));\n  if (nk !== P.nk) {\n    if (P.nk \u003c 0) P.cue = CUES[nk].slice();\n    (P.nk = P.num = nk), (P.b = 0);\n  }\n  if ((P.b += d * BPS) >= LEN[P.num]) (P.b -= LEN[P.num]), (P.num = (P.num + 1) % 5);\n  if (input.btnPressed && input.btnPressed[0] && P.leap \u003c 0) P.leap = 0;\n  const T = script(P.num, P.b), C = P.C, x0 = C.x;\n  if (P.leap >= 0 && (leap(P, T, rd), (P.leap += rd) > 3.3)) P.leap = -1;\n  const ex = min(1, rd / 0.45), e = min(1, rd / 0.05);\n  for (const key in C) C[key] = mix(C[key], T[key], key === \"x\" ? ex : e);\n  // Steps wherever the cross travels in a number without its own.\n  const dx = abs(C.x - x0);\n  P.walk += dx / 5;\n  if (T.au && rd > 0) {\n    const lift = min(1, dx / rd / 6) * 6 * sin(PI * fr(P.walk)) ** 2;\n    floor(P.walk) & 1 ? (C.kR = max(C.kR, lift)) : (C.kL = max(C.kL, lift));\n  }\n  const A = anchors(C), n = max(1, ceil(rd * 120 - 1e-6));\n  if (rd > 0) phys(P, P.A, A, rd / n, n);\n  P.A = A;\n  for (let i = 0; i \u003c 10; i++) P.cue[i] = mix(P.cue[i], CUES[P.num][i], min(1, rd * 2.2));\n  // The follow spot keeps to the body.\n  const p = P.p;\n  (P.sx = mix(P.sx, (p[6] + p[9] + p[12] + p[15]) / 4, min(1, rd * 3.5))), (P.sy = mix(P.sy, (p[7] + p[10] + p[13] + p[16]) / 4 + 3, min(1, rd * 2.5)));\n  // The bell on the cap swings after the head.\n  const hd = head(p), B = P.bell, gx = hd.x + hd.ux * 7 - hd.uy * 6, gy = hd.y + hd.uy * 7 + hd.ux * 6 + 2;\n  (B[2] += ((gx - B[0]) * 160 - B[2] * 7) * rd), (B[3] += ((gy - B[1]) * 160 - B[3] * 7 + 60) * rd), (B[0] += B[2] * rd), (B[1] += B[3] * rd);\n  (B[0] = cl(B[0], gx - 6, gx + 6)), (B[1] = cl(B[1], gy - 6, gy + 6));\n  P.dust = P.dust.filter((s) => ((s[3] += 50 * rd), (s[0] += s[2] * rd), (s[1] = min(FLOOR + 2, s[1] + s[3] * rd)), (s[4] -= rd) > 0));\n  (P.stc[0] -= rd), (P.stc[1] -= rd), (P.flash = max(0, P.flash - rd * 1.5));\n}\n\n// The head: its middle, which way is up, how far it is turned and nodded.\nfunction head(p) {\n  const x = (p[0] + p[3]) / 2, y = (p[1] + p[4]) / 2 - 0.5, z = (p[2] + p[5]) / 2, sx = (p[6] + p[9]) / 2, sy = (p[7] + p[10]) / 2, sz = (p[8] + p[11]) / 2;\n  const l = Math.hypot(x - sx, y - sy) || 1;\n  return { x, y, ux: (x - sx) / l, uy: (y - sy) / l, yaw: atan2(-(p[5] - p[2]), p[3] - p[0]), nod: (z - sz) / 6.3 };\n}\n\n// What does not move: velvet, rail, backcloth, boards, apron.\nfunction paint(P) {\n  const A = P.alb, I = P.pi;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.05, 0.045, 0.06];\n    I[i] = -1;\n    if (y >= RAIL && y \u003c= RAIL + 3) {\n      const g = (0.8 + 0.3 * hash(floor((x + y * 7) / 11), y)) * (y === RAIL ? 1.2 : y === RAIL + 3 ? 0.6 : 1) * (0.92 + 0.08 * n);\n      c = [0.55 * g, 0.36 * g, 0.22 * g];\n    } else if (y >= CLOTH - 2 && y \u003c CLOTH) c = [0.13, 0.1, 0.08];\n    else if (y >= CLOTH && y \u003c BACK) {\n      // Painted night: stars over two rows of hills, in soft folds.\n      const hf = 86 + 4 * sin(x * 0.09 + 0.5) + 2 * sin(x * 0.27 + 1), hn = 97 + 3 * sin(x * 0.13 + 2) + 1.5 * sin(x * 0.41);\n      const cx = floor(x / 7), cy = floor(y / 8), r = hash(cx, cy + 50), sx = cx * 7 + 1 + floor(r * 5), sy = cy * 8 + 1 + floor(hash(cx + 9, cy) * 6);\n      I[i] = y >= hn ? 2 : y >= hf ? 1 : r \u003c 0.5 && y \u003c hf - 3 ? (x === sx && y === sy ? 3 : abs(x - sx) + abs(y - sy) === 1 ? 4 : 0) : 0;\n      c = [(0.8 + 0.2 * (0.5 + 0.5 * sin(x * 0.95 + 0.6 * sin(y * 0.05)))) * (0.95 + 0.1 * n), 0, 0];\n    } else if (y >= BACK && y \u003c APRON) {\n      // Boards running towards you.\n      const u = (x - 31.5) / ((y - 30) / (APRON - 30)) / 6 + 0.5, bd = floor(u), g = (0.8 + 0.2 * hash(bd, 3)) * mix(0.45, 1, cl(min(fr(u), 1 - fr(u)) * 9 - 0.3, 0, 1)) * (y > APRON - 3 ? 1.12 : 1) * (0.92 + 0.14 * hash(x, bd * 31 + floor(y / 3)));\n      c = [0.6 * g, 0.42 * g, 0.27 * g];\n    } else if (y >= APRON) c = y === APRON ? [0.4, 0.28, 0.18] : [0.14, 0.09, 0.07];\n    (A[o] = c[0]), (A[o + 1] = c[1]), (A[o + 2] = c[2]);\n  }\n}\n\nlet F, L, M, MODE, SIDE;\n// One LED of the puppet or cross: the shadow mask, or its colour in the light there.\nfunction dot(x, y, c, nx = 0, flat = 0) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const i = y * W + x, o = i * 3;\n  if (MODE === 0) return void (M[i] = 1);\n  const k = 1 - 0.2 * nx * nx + 0.4 * SIDE * nx;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = c[j] * max(flat, L[o + j]) * k;\n}\n// A capsule; the colour may be a function of how far along.\nfunction seg(x0, y0, x1, y1, r, c, flat = 0) {\n  const dx = x1 - x0, dy = y1 - y0, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = floor(min(y0, y1) - r); y \u003c= ceil(max(y0, y1) + r); y++)\n    for (let x = floor(min(x0, x1) - r); x \u003c= ceil(max(x0, x1) + r); x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / l2, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      if (ex * ex + ey * ey \u003c= r * r) dot(x, y, typeof c === \"function\" ? c(t) : c, cl(ex / r, -1, 1), flat);\n    }\n}\nconst disc = (x, y, r, c, flat) => seg(x, y, x, y, r, c, flat);\n\n// A thread: one LED wide over two columns, a faint halo, a glint that slides as it tilts.\nfunction thread(ax, ay, bx, by, gl) {\n  const n = ceil(abs(by - ay)) + 1, tilt = (bx - ax) / (by - ay || 1), g0 = 0.5 + 6 * (tilt + SIDE * 0.06);\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n, x = mix(ax, bx, t), y = round(mix(ay, by, t)), x0 = floor(x), f = x - x0;\n    if (y \u003c 0 || y >= H) continue;\n    if (MODE === 0) {\n      if (x0 >= 0 && x0 \u003c W) M[y * W + x0] = max(M[y * W + x0], 0.45);\n      continue;\n    }\n    const o = (y * W + cl(x0, 0, W - 1)) * 3, gls = gl * 150 * exp(-((((t - g0) * n) / 5) ** 2));\n    for (let e = -1; e \u003c 3; e++) {\n      const xx = x0 + e, a = e \u003c 0 ? 0.12 - 0.12 * f : e ? (e > 1 ? 0.12 * f : 0.12 + 0.88 * f) : 1 - 0.88 * f, q = (y * W + xx) * 3;\n      if (xx \u003c 0 || xx >= W) continue;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += a * (24 + 64 * L[o + j] + gls);\n    }\n  }\n}\n\nfunction puppet(P, C1, C2) {\n  const p = P.p, X = (i) => p[i * 3], Y = (i) => p[i * 3 + 1], Z = (i) => p[i * 3 + 2], tz = (Z(2) + Z(3) + Z(4) + Z(5)) / 4;\n  const stock = (t) => (floor(t * 5) & 1 ? C1 : [235, 228, 210]);\n  const limb = (a, b, c, up, low, r1, r2) => {\n    seg(X(a), Y(a), X(b), Y(b), r1, up), seg(X(b), Y(b), X(c), Y(c), r2, low);\n  };\n  const arm = (s) => (limb(2 + s, 6 + s, 8 + s, C2, C1, 1.6, 1.2), disc(X(8 + s), Y(8 + s), 1.4, FACE));\n  const leg = (s) => {\n    limb(4 + s, 10 + s, 12 + s, C2, stock, 1.8, 1.2);\n    const fx = X(12 + s), fy = Y(12 + s) + 1.2, yw = atan2(-(Z(3) - Z(2)), X(3) - X(2));\n    seg(fx - 1.2, fy, fx + 1.2 + 2.4 * sin(yw), fy, 1.1, C2.map((v) => v * 0.55)), dot(round(fx + 2.4 + 2.6 * sin(yw)), round(fy - 1), GOLD);\n  };\n  const parts = [[(Z(6) + Z(8)) / 2, () => arm(0)], [(Z(7) + Z(9)) / 2, () => arm(1)], [(Z(10) + Z(12)) / 2, () => leg(0)], [(Z(11) + Z(13)) / 2, () => leg(1)]];\n  for (const [z, f] of parts) if (z \u003c tz - 1) f();\n  // The doublet in diamonds, flaring to a hem of points, with a belt.\n  const sx = (X(2) + X(3)) / 2, sy = (Y(2) + Y(3)) / 2, hx = (X(4) + X(5)) / 2, hy = (Y(4) + Y(5)) / 2, ax = hx - sx, ay = hy - sy, al = ax * ax + ay * ay || 1;\n  let ex = X(3) - X(2) + X(5) - X(4), ey = Y(3) - Y(2) + Y(5) - Y(4);\n  const el = Math.hypot(ex, ey) || 1, hwS = max(2.5, Math.hypot(X(3) - X(2), Y(3) - Y(2)) / 2), hwH = max(2.5, Math.hypot(X(5) - X(4), Y(5) - Y(4)) * 0.62);\n  (ex /= el), (ey /= el);\n  for (let y = floor(min(sy, hy) - 6); y \u003c= ceil(max(sy, hy) + 6); y++)\n    for (let x = floor(min(sx, hx) - 7); x \u003c= ceil(max(sx, hx) + 7); x++) {\n      const v = ((x - sx) * ax + (y - sy) * ay) / al, hw = mix(hwS, hwH, v), u = ((x - sx - ax * v) * ex + (y - sy - ay * v) * ey) / hw;\n      if (v \u003c -0.05 || abs(u) > 1 || v > 1.1 + 0.12 * abs(fr(u * 2.5) - 0.5) * 2) continue;\n      const belt = v > 0.84 && v \u003c 0.94, dia = (floor(u * 1.6 + v * 3.2) + floor(u * 1.6 - v * 3.2)) & 1;\n      dot(x, y, belt ? (abs(u) \u003c 0.22 ? GOLD : [60, 40, 30]) : dia ? C1 : C2, u);\n    }\n  for (const [z, f] of parts) if (z >= tz - 1) f();\n  // The ruff, the head, the face, the cap and its bell.\n  seg(X(2), Y(2) - 1, X(3), Y(3) - 1, 1.7, (t) => (floor(t * 9) & 1 ? [250, 246, 236] : [205, 200, 192]));\n  const hd = head(p), R = 4.3, px = -hd.uy, py = hd.ux;\n  disc(hd.x, hd.y, R, FACE);\n  if (MODE && hd.nod \u003c 0.7)\n    for (const [ph, hy, c] of [[0.5, -0.4, [30, 22, 34]], [0.8, 1.2, [240, 120, 110]], [0, 2.1, [150, 40, 46]], [-0.5, -0.4, [30, 22, 34]], [-0.8, 1.2, [240, 120, 110]]]) {\n      const a = ph + hd.yaw;\n      if (cos(a) > 0.25) dot(round(hd.x + R * 0.85 * sin(a)), round(hd.y + hy + hd.nod * 3), c);\n    }\n  const b0x = hd.x + hd.ux * 3.1, b0y = hd.y + hd.uy * 3.1, b1x = hd.x + hd.ux * 8 + px, b1y = hd.y + hd.uy * 8 + py, [bx, by] = P.bell;\n  for (let i = 0, lx = b0x, ly = b0y; i \u003c= 8; i++) {\n    const t = i / 8, x = mix(mix(b0x, b1x, t), mix(b1x, bx, t), t), y = mix(mix(b0y, b1y, t), mix(b1y, by, t), t);\n    seg(lx, ly, x, y, mix(3.3, 0.8, t), C1), (lx = x), (ly = y);\n  }\n  seg(hd.x + hd.ux * 2.3 - px * 4, hd.y + hd.uy * 2.3 - py * 4, hd.x + hd.ux * 2.3 + px * 4, hd.y + hd.uy * 2.3 + py * 4, 0.9, C2);\n  disc(bx, by, 1.3, GOLD);\n}\n\n// The puppeteer's sleeves and hands, the cross and the leg bar.\nfunction cross(P) {\n  const A = P.A, [gx, gy] = A[7], sleeve = [46, 38, 60], skin = [232, 176, 140], cuff = [236, 232, 222];\n  const arm = (x0, x1, y1) => seg(x0, -3, x1, y1, 2.6, (t) => (t > 0.84 ? cuff : sleeve), 0.32);\n  seg(A[5][0] - 1.5, A[5][1], A[6][0] + 1.5, A[6][1], 0.7, WOOD, 0.35);\n  seg(gx, gy, A[4][0], A[4][1], 0.9, WOOD, 0.35), seg(A[2][0], A[2][1], A[3][0], A[3][1], 0.8, WOOD, 0.35);\n  for (let j = 0; j \u003c 7; j++) dot(round(A[j][0]), round(A[j][1]), [220, 220, 230], 0, 0.5);\n  arm(gx + 17, gx + 1.5, gy - 1.5), disc(gx + 0.5, gy - 0.5, 2.2, skin, 0.4);\n  arm(A[5][0] - 22, A[5][0] - 2.5, A[5][1] - 1), disc(A[5][0] - 2, A[5][1] - 0.5, 2, skin, 0.4);\n}\n\nfunction stage(P, pal) {\n  const [wr, wg, wb, sr0, sg0, sb0, rad0, foot, pin, lamp] = P.cue, s = P.s4, A = P.alb, I = P.pi, p = P.p;\n  const fl = 1 + 0.5 * P.flash, rad = rad0 + 7 * P.flash, S = [sr0 * fl, sg0 * fl, sb0 * fl], WS = [wr, wg, wb];\n  const px = P.sx - s * 11, py = P.sy, rx = rad * (1 + 0.45 * abs(s)), ry = rad * 1.35, sdx = -s * 15, fx = (p[36] + p[39]) / 2, pinX = P.sx;\n  const lift = [0, 1].map((j) => 1 - sm(0, 8, FLOOR - p[37 + j * 3]));\n  for (let y = 0; y \u003c H; y++) {\n    const ft = y \u003c APRON ? foot * exp((y - APRON) / 14) : 0, wash = y \u003c CLOTH - 2 ? (y >= RAIL && y \u003c= RAIL + 3 ? 0.3 : 0.08) : 1, cw = 2 + (y + 12) * 0.085;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = (x - px) / rx, dy = (y - py) / ry, pool = 1 - sm(0.84, 1, sqrt(dx * dx + dy * dy));\n      const lm = lamp * (1 / (1 + ((x - 4.5) ** 2 + (y - 10) ** 2) / 260) + 1 / (1 + ((x - 59.5) ** 2 + (y - 10) ** 2) / 260));\n      let cone = 0;\n      if (pin > 0.01) cone = y >= BACK ? pin * (1 - sm(0.7, 1, sqrt(((x - pinX) / 12) ** 2 + ((y - FLOOR - 1) / 4) ** 2))) : pin * (1 - sm(0.6, 1, abs(x - pinX) / cw));\n      for (let j = 0; j \u003c 3; j++) L[o + j] = wash * WS[j] + pool * S[j] + ft * FT[j] + lm * LM[j] + cone * PK[j];\n      // The shadow stands up from the feet, larger, away from the spot.\n      let sh = 0, k = 1;\n      if (y >= CLOTH && y \u003c APRON && pool > 0) {\n        const mx = round(fx + (x - fx - sdx) / 1.12), my = round(FLOOR + (y - FLOOR + 3) / 1.12);\n        if (mx >= 0 && mx \u003c W && my >= 0 && my \u003c H) sh = M[my * W + mx] * pool * 0.8;\n      }\n      if (y > BACK && y \u003c APRON) for (let j = 0; j \u003c 2; j++) k *= 1 - 0.6 * lift[j] * exp(-1.5 * (((x - p[36 + j * 3]) / 3.5) ** 2 + ((y - FLOOR - 1.5) / 1.3) ** 2));\n      const c = I[i] >= 0 ? pal[I[i]] : null, f = c ? A[o] : 1, cf = c ? 0.8 * cone : 0;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = (c ? c[j] : A[o + j]) * f * k * (L[o + j] - sh * S[j] - cf * PK[j]) * 255;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  [F, L, M, SIDE] = [P.f, P.lt, P.m, P.s4];\n  const h = 0.36 + P.k1, hc = 0.61 + 0.3 * sin(TAU * P.k1), A = P.A, p = P.p;\n  const C1 = hsv(h, 0.8, 0.8).map((v) => v * 255), C2 = hsv(h + 0.06, 0.75, 0.42).map((v) => v * 255);\n  const sky = hsv(hc, 0.62, 0.34), star = [0.95, 0.78, 0.4], pal = [sky, hsv(hc + 0.06, 0.55, 0.46), hsv(hc + 0.12, 0.6, 0.58), star, sky.map((v, j) => mix(v, star[j], 0.4))];\n  const threads = (from, to) => {\n    for (let s = from; s \u003c to; s++) {\n      const m = mid(p, STR[s]), side = s \u003c 2 ? (s ? 2 : -2) * cos(head(p).yaw) : 0;\n      thread(A[s][0], A[s][1], m[0] + side, m[1] - (s \u003c 2 ? 1 : 0), s === 4 ? 0.4 : 1);\n    }\n  };\n  // The shadow first: the puppet and its threads as a mask.\n  M.fill(0), (MODE = 0), threads(0, 7), puppet(P, C1, C2);\n  (MODE = 1), stage(P, pal);\n  threads(0, 7), puppet(P, C1, C2), cross(P);\n  // Dust from the stamps, the haze in the pin beam, the footlights.\n  for (const [x, y, , , l] of P.dust) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) F[o + j] += [190, 160, 130][j] * l * 0.6 * max(0.4, L[o + j]);\n  }\n  const pin = P.cue[8];\n  if (pin > 0.01)\n    for (let y = 0; y \u003c BACK; y++) {\n      const cw = 2 + (y + 12) * 0.085;\n      for (let x = 0; x \u003c W; x++) {\n        const c = pin * 0.09 * (1 - sm(0.6, 1, abs(x - P.sx) / cw)) * 255;\n        for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += c * PK[j];\n      }\n    }\n  // The clip lamps on the rail and the footlights.\n  for (const x of [4.5, 59.5]) {\n    seg(x - 2, 7.5, x + 2, 7.5, 1.2, [40, 80, 58], 0.5), seg(x - 0.5, 9.2, x + 0.5, 9.2, 0.6, [255, 226, 170], P.cue[9]);\n    for (let i = -3; i \u003c 4; i++) for (let j = 0; j \u003c 3; j++) F[(10 * W + round(x + i)) * 3 + j] += (80 * P.cue[9] * LM[j]) / (1 + i * i);\n  }\n  const fb = min(1, P.cue[7] * 1.2 + 0.15);\n  for (const x of [6, 19, 32, 45, 57])\n    for (let i = -2; i \u003c= 3; i++) {\n      const a = i === 0 || i === 1 ? fb : fb * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[(125 * W + x + i) * 3 + j] += 255 * a * FT[j];\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Costume","min":0,"max":1,"about":"The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald."},{"name":"Speed","min":0.2,"max":3,"about":"The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower."},{"name":"Number","min":0,"max":4,"about":"The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order."},{"name":"Spot","min":-1,"max":1,"about":"Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side."}],"start":[0,2,0,0.06],"measures":{"motion":0.7728,"detail":0.0499,"edges":0.328,"complexity":1.7055,"coverage":0.7031,"colour":0.18,"drift":0.1687},"knobResponse":[0.0905,0.1199,0.1924,0.0547]},{"slug":"maze","title":"Maze","family":"algo","round":2,"note":"미로를 한 칸씩 파고 나면 입구에서 너비 우선 물결이 퍼져 복도마다 거리만큼 색을 입혀요. 가장 짧은 길이 밝게 그어지고, 미로가 부서진 자리에 다음 미로가 파여요.","idea":"A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.","buttons":"K1 tap crumbles the maze and carves a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-maze","type":"code","name":"maze","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it."},{"name":"Speed","min":0,"max":4,"about":"Carving, flood and trace together, from about 50 carving steps a second to about 1100."},{"name":"Cell","min":2,"max":4,"about":"Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25."},{"name":"Carver","min":0,"max":3,"about":"0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row."}],"start":[0,2,2,0.06],"measures":{"motion":0.0785,"detail":0.1747,"edges":0.9998,"complexity":0.1404,"coverage":0.6288,"colour":0.2889,"drift":0.1789},"knobResponse":[0.1257,0.2208,0.2744,0.1999]},{"slug":"meander","title":"Meander","family":"line","round":30,"note":"패널 한가운데 세로로 난 길을 12번에서 32번 건너는 닫힌 곡선 하나예요. 한쪽 아치들이 길 위로 누웠다가 새 짝으로 펴져도 곡선은 늘 하나로 닫혀요.","idea":"A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.","buttons":"K1 tap folds both sides at once and opens a fresh meander of the same order.","code":"// ===== Patternflow pattern =====\n// Title:   Meander\n// Family:  line\n// Idea:    A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: meanders (Vladimir Arnold, 1988), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1\n//\n// Knob 1: Hue. Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse.\n// Knob 2: Speed. At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again.\n// Knob 3: Crossings. How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander.\n// Knob 4: Hollow. At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left.\n// Buttons: K1 tap folds both sides at once and opens a fresh meander of the same order.\n\n// The road runs down the middle, between columns 31 and 32. The 2n crossings\n// sit evenly on it from row 2 to row 126, 4 LEDs apart at n = 16, and the\n// widest arc on a side reaches 28.5 LEDs out, so its line stays off the wall.\n// A meander of order n is a pair of non-crossing matchings of those points,\n// arcs on the left and arcs on the right, that join into one loop. Arnold\n// asked how many there are: 1, 2, 8, 42, 262, 1828, ..., each about ten\n// times the last by n = 16 and the ratio creeping up towards 12.26. No\n// formula is known.\nconst W = 64, H = 128, NP = W * H, MID = 32, WMAX = 28.5, TOP = 2, SPAN = 124;\nconst { min, max, floor, ceil, sqrt, cos, acos, abs, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n// The arc's distance from the road: its semicircle r, cut off softly at the\n// width w its nesting gives it. Both grow from an arc to any arc round it,\n// so nested arcs never touch.\nconst smin = (w, r) => (w \u003c= 0 || r \u003c= 0 ? 0 : (w * r) / sqrt(sqrt(w * w * w * w + r * r * r * r)));\n\n// A non-crossing perfect matching of 2n points as a uniform random Dyck word,\n// by the cycle lemma: shuffle n opens and n + 1 closes, start just after the\n// first lowest point of the walk, drop the last close.\nconst WALK = new Int8Array(33);\nfunction dyck(n, P) {\n  const m = 2 * n + 1, a = WALK;\n  for (let i = 0; i \u003c m; i++) a[i] = i \u003c n ? 1 : -1;\n  for (let i = m - 1; i > 0; i--) {\n    const j = floor(random() * (i + 1)), t = a[i];\n    (a[i] = a[j]), (a[j] = t);\n  }\n  let s = 0, lo = 0, at = 0;\n  for (let i = 0; i \u003c m; i++) if ((s += a[i]) \u003c lo) (lo = s), (at = i);\n  const st = [];\n  for (let k = 0; k \u003c 2 * n; k++) {\n    if (a[(at + 1 + k) % m] > 0) st.push(k);\n    else {\n      const o = st.pop();\n      (P[o] = k), (P[k] = o);\n    }\n  }\n}\n\n// Left arcs and right arcs together are one closed curve when walking left,\n// right, left, ... from point 0 meets every point before it comes back.\nfunction oneLoop(L, R, n2) {\n  let i = 0, c = 0;\n  do (i = R[L[i]]), (c += 2);\n  while (i !== 0 && c \u003c= n2);\n  return c === n2;\n}\n\n// Each arc's height: 0 when no arc lies inside it, else one more than the\n// highest arc directly inside. It sets the arc's width, so a nest of any\n// depth fits between the road and the wall.\nfunction heights(P, n2, h) {\n  const st = new Int8Array(n2 + 1);\n  let sp = 0;\n  st[0] = -1;\n  for (let i = 0; i \u003c n2; i++) {\n    if (P[i] > i) st[++sp] = -1;\n    else {\n      const v = st[sp--] + 1;\n      h[i] = h[P[i]] = v;\n      if (v > st[sp]) st[sp] = v;\n    }\n  }\n  return st[0];\n}\n\nfunction dress(n, L, R) {\n  const hL = new Int8Array(2 * n), hR = new Int8Array(2 * n);\n  return { n, L, R, hL, hR, HL: heights(L, 2 * n, hL), HR: heights(R, 2 * n, hR) };\n}\n\n// A uniform random meander of order n: draw both sides until they close into\n// one loop. About one pair in 10 does at n = 6 and one in 210 at n = 16.\nfunction meander(n) {\n  for (; n > 1; n--) {\n    const L = new Int8Array(2 * n), R = new Int8Array(2 * n);\n    for (let t = 0; t \u003c 4000; t++) {\n      dyck(n, L), dyck(n, R);\n      if (oneLoop(L, R, 2 * n)) return dress(n, L, R);\n    }\n  }\n  return dress(1, new Int8Array([1, 0]), new Int8Array([1, 0]));\n}\n\n// The same meander with side X drawn again, the other side kept.\nfunction reside(M, X) {\n  const n = M.n, Q = new Int8Array(2 * n);\n  for (let t = 0; t \u003c 4000; t++) {\n    dyck(n, Q);\n    if (X ? oneLoop(M.L, Q, 2 * n) : oneLoop(Q, M.R, 2 * n)) return X ? dress(n, M.L, Q) : dress(n, Q, M.R);\n  }\n  return M;\n}\n\nexport function setup(params) {\n  params.s = {\n    M: null, n2: 0, ph: 0, side: 2, u: 0, next: 0, both: false, flow: 0, ck: 0, cu: 0,\n    // the loop, arc by arc: from point, to point, side (0 left, 1 right)\n    AF: new Int8Array(32), AT: new Int8Array(32), AS: new Int8Array(32),\n    // each kept arc's place on the loop before the last swap, at its start and end\n    OS: new Float32Array(32), OE: new Float32Array(32), OK: new Uint8Array(32), old: 0,\n    len: new Float32Array(32), cum: new Float32Array(33),\n    gp: new Float32Array(32 * 6), D: new Float32Array(NP), LA: new Int8Array(NP), LT: new Float32Array(NP),\n    hue: 0, speed: 2, hollow: 0.06, nT: 6,\n  };\n}\n\n// Walk the loop from point a, first along side s.\nfunction order(P, a, s) {\n  const M = P.M;\n  for (let k = 0; k \u003c P.n2; k++) {\n    const b = s ? M.R[a] : M.L[a];\n    (P.AF[k] = a), (P.AT[k] = b), (P.AS[k] = s);\n    (a = b), (s ^= 1);\n  }\n}\n\n// Swap in new arcs while the side is flat on the road. A one-side swap keeps\n// the pulse on the kept arc it is on, or the next one, and lets every kept\n// arc carry its old colours over into the new loop's while the side opens.\nfunction swap(P) {\n  const X = P.side;\n  if (X === 2) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), floor(random() * 2));\n    (P.ck = 0), (P.cu = 0), (P.old = 0), (P.side = 2);\n    return;\n  }\n  const Q = 1 - X, n2 = P.n2, L = P.cum[n2] || 1;\n  const os = new Float32Array(n2), oe = new Float32Array(n2);\n  for (let k = 0; k \u003c n2; k++)\n    if (P.AS[k] === Q) {\n      const i = P.AF[k], j = P.AT[k];\n      (os[i] = P.cum[k] / L), (oe[i] = P.cum[k + 1] / L);\n      (os[j] = P.cum[k + 1] / L), (oe[j] = P.cum[k] / L);\n    }\n  let a = P.AF[P.ck];\n  if (P.AS[P.ck] !== Q) (a = P.AT[P.ck]), (P.cu = 0);\n  P.M = reside(P.M, X);\n  order(P, a, Q);\n  P.ck = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    P.OK[k] = P.AS[k] === Q ? 1 : 0;\n    (P.OS[k] = os[P.AF[k]]), (P.OE[k] = oe[P.AF[k]]);\n  }\n  P.old = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nT = cl(round(cl(k[2], 12, 32) / 2), 6, 16);\n  P.hollow = cl(k[3], 0, 1);\n  if (!P.M) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), 0);\n    (P.ph = 2), (P.side = 2), (P.u = 0);\n  }\n  const s = P.speed;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.both = true;\n    if (P.ph === 0) P.u = 1;\n  }\n  // 0 hold, 1 close, 2 open; in clock units that run at Speed a second.\n  if (P.ph === 0) {\n    P.u += (d * s) / 7;\n    if (P.M.n !== P.nT) P.u = 1;\n    if (P.u >= 1) {\n      P.side = P.both || P.M.n !== P.nT ? 2 : P.next;\n      if (P.side \u003c 2) P.next ^= 1;\n      (P.both = false), (P.ph = 1), (P.u = 0);\n    }\n  } else if (P.ph === 1) {\n    P.u += (d * s) / 1.2;\n    if (P.u >= 1) swap(P), (P.ph = 2), (P.u = 0);\n  } else {\n    P.u += (d * s) / 1.8;\n    if (P.u >= 1) (P.ph = 0), (P.u = 0), (P.old = 0);\n  }\n  P.flow += d * s * 0.04;\n  // The pulse: 40 LEDs of curve a second per unit of Speed.\n  P.cu += (d * s * 40) / max(4, P.len[P.ck]);\n  while (P.cu >= 1) (P.cu -= 1), (P.ck = (P.ck + 1) % P.n2);\n}\n\n// The colour wheel once round the loop, 1024 steps.\nconst LUT = new Float32Array(1024 * 3);\nfor (let i = 0; i \u003c 1024; i++) {\n  const h = (i / 1024) * 6, j = floor(h), f = h - j;\n  const c = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][j];\n  for (let q = 0; q \u003c 3; q++) LUT[i * 3 + q] = c[q] ** 0.9;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.M) return;\n  const M = P.M, n2 = P.n2, sp = SPAN / (n2 - 1), g = P.gp;\n  const open = P.ph === 0 ? 1 : P.ph === 1 ? 1 - ease(P.u) : ease(P.u);\n  const sL = P.side === 1 ? 1 : open, sR = P.side === 0 ? 1 : open;\n  const mix = P.old ? ease(P.ph === 2 ? P.u : 1) : 1;\n  // Each arc: top and bottom y, centre, radius, width, side sign. While a\n  // side folds, its arcs all lose width at one rate, so the innermost lie flat\n  // first and the nest never crosses itself; it opens outermost first.\n  for (let k = 0; k \u003c n2; k++) {\n    const a = P.AF[k], b = P.AT[k], side = P.AS[k];\n    const h = side ? M.hR[a] : M.hL[a], Hs = side ? M.HR : M.HL, so = side ? sR : sL;\n    const ya = TOP + a * sp, yb = TOP + b * sp, o = k * 6;\n    (g[o] = min(ya, yb)), (g[o + 1] = max(ya, yb));\n    (g[o + 2] = (ya + yb) / 2), (g[o + 3] = abs(yb - ya) / 2);\n    g[o + 4] = (WMAX / (Hs + 1)) * cl(so * (Hs + 1) - (Hs - h), 0, h + 1);\n    g[o + 5] = side ? 1 : -1;\n  }\n  // The curve: sample every arc in loop order, keep for each LED the nearest\n  // sample, which arc it was on and how far along.\n  const D = P.D, LA = P.LA, LT = P.LT;\n  D.fill(9);\n  P.cum[0] = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    const o = k * 6, c = g[o + 2], R = g[o + 3], w = g[o + 4], sg = g[o + 5];\n    const down = P.AF[k] \u003c P.AT[k], ns = max(4, ceil((PI * R) / 0.4));\n    let px = 0, py = 0, len = 0;\n    for (let j = 0; j \u003c= ns; j++) {\n      const t = (PI * j) / ns, X = MID + sg * smin(w, R * Math.sin(t)), Y = c - R * cos(t);\n      if (j) len += sqrt((X - px) ** 2 + (Y - py) ** 2);\n      (px = X), (py = Y);\n      const tau = down ? j / ns : 1 - j / ns;\n      for (let yy = ceil(Y - 2.3), y1 = floor(Y + 1.3); yy \u003c= y1; yy++) {\n        if (yy \u003c 0 || yy >= H) continue;\n        const ey = yy + 0.5 - Y;\n        for (let xx = ceil(X - 2.3), x1 = floor(X + 1.3); xx \u003c= x1; xx++) {\n          if (xx \u003c 0 || xx >= W) continue;\n          const ex = xx + 0.5 - X, dd = ex * ex + ey * ey, p = yy * W + xx;\n          if (dd \u003c D[p]) (D[p] = dd), (LA[p] = k), (LT[p] = tau);\n        }\n      }\n    }\n    P.len[k] = len;\n    P.cum[k + 1] = P.cum[k] + len;\n  }\n  const Ltot = P.cum[n2] || 1, head = P.cum[P.ck] + P.cu * P.len[P.ck];\n  // Where on the loop a point is, 0..1, with a kept arc's old place blended\n  // into its new one while its side opens.\n  const at = (k, tau) => {\n    let f = (P.cum[k] + tau * P.len[k]) / Ltot;\n    if (mix \u003c 1 && P.OK[k]) {\n      let e = P.OS[k] + tau * (P.OE[k] - P.OS[k]) - f;\n      e -= round(e);\n      f += (1 - mix) * e;\n    }\n    return f;\n  };\n  // The pulse's head, for the glow round it.\n  const ho = P.ck * 6, hr = g[ho + 3], ht = PI * (P.AF[P.ck] \u003c P.AT[P.ck] ? P.cu : 1 - P.cu);\n  const hx = MID + g[ho + 5] * smin(g[ho + 4], hr * Math.sin(ht)), hy = g[ho + 2] - hr * cos(ht);\n  const hue0 = P.hue + 0.55 - P.flow, fillV = 255 * 0.97 * (1 - P.hollow) ** 1.2;\n  const lineS = 0.5 + 0.35 * P.hollow;\n  // The inside by the even-odd rule, row by row: a LED is inside when a ray\n  // from it to the right wall crosses the curve an odd number of times. The\n  // arcs a row meets on one side are nested, so the band a LED sits in takes\n  // the colour of the arc just outside it, at this row.\n  const fl = new Float32Array(16), ka = new Int8Array(16), ta = new Float32Array(16);\n  const fr = new Float32Array(16), kb = new Int8Array(16), tb = new Float32Array(16);\n  for (let yy = 0; yy \u003c H; yy++) {\n    const yc = yy + 0.5;\n    let nl = 0, nr = 0;\n    for (let k = 0; k \u003c n2; k++) {\n      const o = k * 6;\n      if (!(g[o] \u003c yc && yc \u003c g[o + 1])) continue;\n      const c = g[o + 2], R = g[o + 3], dy = yc - c, f = smin(g[o + 4], sqrt(R * R - dy * dy));\n      const t = acos(cl(-dy / R, -1, 1)) / PI, tau = P.AF[k] \u003c P.AT[k] ? t : 1 - t;\n      const A = g[o + 5] > 0 ? fr : fl, KK = g[o + 5] > 0 ? kb : ka, T = g[o + 5] > 0 ? tb : ta;\n      let i = g[o + 5] > 0 ? nr++ : nl++;\n      while (i > 0 && A[i - 1] > f) (A[i] = A[i - 1]), (KK[i] = KK[i - 1]), (T[i] = T[i - 1]), i--;\n      (A[i] = f), (KK[i] = k), (T[i] = tau);\n    }\n    for (let half = 0; half \u003c 2; half++) {\n      const A = half ? fr : fl, KK = half ? kb : ka, T = half ? tb : ta, n = half ? nr : nl;\n      let i = 0;\n      for (let q = 0; q \u003c 32; q++) {\n        const xx = half ? MID + q : MID - 1 - q, dist = q + 0.5, p = yy * W + xx;\n        while (i \u003c n && A[i] \u003c dist) i++;\n        let r = 0, gg = 0, b = 0;\n        const inside = half ? (nr - i) & 1 : (i + nr) & 1;\n        if (inside && fillV > 0) {\n          const f = at(KK[i], T[i]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          (r = LUT[ix] * fillV), (gg = LUT[ix + 1] * fillV), (b = LUT[ix + 2] * fillV);\n        }\n        // The road, a faint line on the dark and a darker one through the colour.\n        if (q === 0) {\n          if (inside && fillV > 0) (r *= 0.6), (gg *= 0.6), (b *= 0.6);\n          else (r += 34), (gg += 36), (b += 44);\n        }\n        const dl = sqrt(D[p]);\n        if (dl \u003c 2.3) {\n          const k = LA[p], f = at(k, LT[p]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          let behind = (head - (P.cum[k] + LT[p] * P.len[k])) % Ltot;\n          if (behind \u003c 0) behind += Ltot;\n          const pulse = exp(-behind / 24) + (behind > Ltot - 3 ? (behind - Ltot + 3) / 3 : 0);\n          const I = cl(1.75 - dl * 1.1, 0, 1), J = cl(2 - dl * 0.75, 0, 1) * pulse, wh = 1 - lineS;\n          let lr = 255 * (wh + lineS * LUT[ix]), lg = 255 * (wh + lineS * LUT[ix + 1]), lb = 255 * (wh + lineS * LUT[ix + 2]);\n          const pv = min(1, pulse);\n          (lr += (255 - lr) * pv), (lg += (250 - lg) * pv), (lb += (235 - lb) * pv);\n          const m = max(I, J);\n          (r += (lr - r) * m), (gg += (lg - gg) * m), (b += (lb - b) * m);\n        }\n        const ex = xx + 0.5 - hx, ey = yc - hy, e2 = ex * ex + ey * ey;\n        if (e2 \u003c 30) {\n          const gl = 0.9 * exp(-e2 / 6);\n          (r += (255 - r) * gl), (gg += (250 - gg) * gl), (b += (235 - b) * gl);\n        }\n        display.setPixel(xx, yy, min(255, r), min(255, gg), min(255, b));\n      }\n    }\n  }\n}\n","layer":{"id":"layer-meander","type":"code","name":"meander","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Meander\n// Family:  line\n// Idea:    A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: meanders (Vladimir Arnold, 1988), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1\n//\n// Knob 1: Hue. Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse.\n// Knob 2: Speed. At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again.\n// Knob 3: Crossings. How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander.\n// Knob 4: Hollow. At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left.\n// Buttons: K1 tap folds both sides at once and opens a fresh meander of the same order.\n\n// The road runs down the middle, between columns 31 and 32. The 2n crossings\n// sit evenly on it from row 2 to row 126, 4 LEDs apart at n = 16, and the\n// widest arc on a side reaches 28.5 LEDs out, so its line stays off the wall.\n// A meander of order n is a pair of non-crossing matchings of those points,\n// arcs on the left and arcs on the right, that join into one loop. Arnold\n// asked how many there are: 1, 2, 8, 42, 262, 1828, ..., each about ten\n// times the last by n = 16 and the ratio creeping up towards 12.26. No\n// formula is known.\nconst W = 64, H = 128, NP = W * H, MID = 32, WMAX = 28.5, TOP = 2, SPAN = 124;\nconst { min, max, floor, ceil, sqrt, cos, acos, abs, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n// The arc's distance from the road: its semicircle r, cut off softly at the\n// width w its nesting gives it. Both grow from an arc to any arc round it,\n// so nested arcs never touch.\nconst smin = (w, r) => (w \u003c= 0 || r \u003c= 0 ? 0 : (w * r) / sqrt(sqrt(w * w * w * w + r * r * r * r)));\n\n// A non-crossing perfect matching of 2n points as a uniform random Dyck word,\n// by the cycle lemma: shuffle n opens and n + 1 closes, start just after the\n// first lowest point of the walk, drop the last close.\nconst WALK = new Int8Array(33);\nfunction dyck(n, P) {\n  const m = 2 * n + 1, a = WALK;\n  for (let i = 0; i \u003c m; i++) a[i] = i \u003c n ? 1 : -1;\n  for (let i = m - 1; i > 0; i--) {\n    const j = floor(random() * (i + 1)), t = a[i];\n    (a[i] = a[j]), (a[j] = t);\n  }\n  let s = 0, lo = 0, at = 0;\n  for (let i = 0; i \u003c m; i++) if ((s += a[i]) \u003c lo) (lo = s), (at = i);\n  const st = [];\n  for (let k = 0; k \u003c 2 * n; k++) {\n    if (a[(at + 1 + k) % m] > 0) st.push(k);\n    else {\n      const o = st.pop();\n      (P[o] = k), (P[k] = o);\n    }\n  }\n}\n\n// Left arcs and right arcs together are one closed curve when walking left,\n// right, left, ... from point 0 meets every point before it comes back.\nfunction oneLoop(L, R, n2) {\n  let i = 0, c = 0;\n  do (i = R[L[i]]), (c += 2);\n  while (i !== 0 && c \u003c= n2);\n  return c === n2;\n}\n\n// Each arc's height: 0 when no arc lies inside it, else one more than the\n// highest arc directly inside. It sets the arc's width, so a nest of any\n// depth fits between the road and the wall.\nfunction heights(P, n2, h) {\n  const st = new Int8Array(n2 + 1);\n  let sp = 0;\n  st[0] = -1;\n  for (let i = 0; i \u003c n2; i++) {\n    if (P[i] > i) st[++sp] = -1;\n    else {\n      const v = st[sp--] + 1;\n      h[i] = h[P[i]] = v;\n      if (v > st[sp]) st[sp] = v;\n    }\n  }\n  return st[0];\n}\n\nfunction dress(n, L, R) {\n  const hL = new Int8Array(2 * n), hR = new Int8Array(2 * n);\n  return { n, L, R, hL, hR, HL: heights(L, 2 * n, hL), HR: heights(R, 2 * n, hR) };\n}\n\n// A uniform random meander of order n: draw both sides until they close into\n// one loop. About one pair in 10 does at n = 6 and one in 210 at n = 16.\nfunction meander(n) {\n  for (; n > 1; n--) {\n    const L = new Int8Array(2 * n), R = new Int8Array(2 * n);\n    for (let t = 0; t \u003c 4000; t++) {\n      dyck(n, L), dyck(n, R);\n      if (oneLoop(L, R, 2 * n)) return dress(n, L, R);\n    }\n  }\n  return dress(1, new Int8Array([1, 0]), new Int8Array([1, 0]));\n}\n\n// The same meander with side X drawn again, the other side kept.\nfunction reside(M, X) {\n  const n = M.n, Q = new Int8Array(2 * n);\n  for (let t = 0; t \u003c 4000; t++) {\n    dyck(n, Q);\n    if (X ? oneLoop(M.L, Q, 2 * n) : oneLoop(Q, M.R, 2 * n)) return X ? dress(n, M.L, Q) : dress(n, Q, M.R);\n  }\n  return M;\n}\n\nexport function setup(params) {\n  params.s = {\n    M: null, n2: 0, ph: 0, side: 2, u: 0, next: 0, both: false, flow: 0, ck: 0, cu: 0,\n    // the loop, arc by arc: from point, to point, side (0 left, 1 right)\n    AF: new Int8Array(32), AT: new Int8Array(32), AS: new Int8Array(32),\n    // each kept arc's place on the loop before the last swap, at its start and end\n    OS: new Float32Array(32), OE: new Float32Array(32), OK: new Uint8Array(32), old: 0,\n    len: new Float32Array(32), cum: new Float32Array(33),\n    gp: new Float32Array(32 * 6), D: new Float32Array(NP), LA: new Int8Array(NP), LT: new Float32Array(NP),\n    hue: 0, speed: 2, hollow: 0.06, nT: 6,\n  };\n}\n\n// Walk the loop from point a, first along side s.\nfunction order(P, a, s) {\n  const M = P.M;\n  for (let k = 0; k \u003c P.n2; k++) {\n    const b = s ? M.R[a] : M.L[a];\n    (P.AF[k] = a), (P.AT[k] = b), (P.AS[k] = s);\n    (a = b), (s ^= 1);\n  }\n}\n\n// Swap in new arcs while the side is flat on the road. A one-side swap keeps\n// the pulse on the kept arc it is on, or the next one, and lets every kept\n// arc carry its old colours over into the new loop's while the side opens.\nfunction swap(P) {\n  const X = P.side;\n  if (X === 2) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), floor(random() * 2));\n    (P.ck = 0), (P.cu = 0), (P.old = 0), (P.side = 2);\n    return;\n  }\n  const Q = 1 - X, n2 = P.n2, L = P.cum[n2] || 1;\n  const os = new Float32Array(n2), oe = new Float32Array(n2);\n  for (let k = 0; k \u003c n2; k++)\n    if (P.AS[k] === Q) {\n      const i = P.AF[k], j = P.AT[k];\n      (os[i] = P.cum[k] / L), (oe[i] = P.cum[k + 1] / L);\n      (os[j] = P.cum[k + 1] / L), (oe[j] = P.cum[k] / L);\n    }\n  let a = P.AF[P.ck];\n  if (P.AS[P.ck] !== Q) (a = P.AT[P.ck]), (P.cu = 0);\n  P.M = reside(P.M, X);\n  order(P, a, Q);\n  P.ck = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    P.OK[k] = P.AS[k] === Q ? 1 : 0;\n    (P.OS[k] = os[P.AF[k]]), (P.OE[k] = oe[P.AF[k]]);\n  }\n  P.old = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nT = cl(round(cl(k[2], 12, 32) / 2), 6, 16);\n  P.hollow = cl(k[3], 0, 1);\n  if (!P.M) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), 0);\n    (P.ph = 2), (P.side = 2), (P.u = 0);\n  }\n  const s = P.speed;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.both = true;\n    if (P.ph === 0) P.u = 1;\n  }\n  // 0 hold, 1 close, 2 open; in clock units that run at Speed a second.\n  if (P.ph === 0) {\n    P.u += (d * s) / 7;\n    if (P.M.n !== P.nT) P.u = 1;\n    if (P.u >= 1) {\n      P.side = P.both || P.M.n !== P.nT ? 2 : P.next;\n      if (P.side \u003c 2) P.next ^= 1;\n      (P.both = false), (P.ph = 1), (P.u = 0);\n    }\n  } else if (P.ph === 1) {\n    P.u += (d * s) / 1.2;\n    if (P.u >= 1) swap(P), (P.ph = 2), (P.u = 0);\n  } else {\n    P.u += (d * s) / 1.8;\n    if (P.u >= 1) (P.ph = 0), (P.u = 0), (P.old = 0);\n  }\n  P.flow += d * s * 0.04;\n  // The pulse: 40 LEDs of curve a second per unit of Speed.\n  P.cu += (d * s * 40) / max(4, P.len[P.ck]);\n  while (P.cu >= 1) (P.cu -= 1), (P.ck = (P.ck + 1) % P.n2);\n}\n\n// The colour wheel once round the loop, 1024 steps.\nconst LUT = new Float32Array(1024 * 3);\nfor (let i = 0; i \u003c 1024; i++) {\n  const h = (i / 1024) * 6, j = floor(h), f = h - j;\n  const c = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][j];\n  for (let q = 0; q \u003c 3; q++) LUT[i * 3 + q] = c[q] ** 0.9;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.M) return;\n  const M = P.M, n2 = P.n2, sp = SPAN / (n2 - 1), g = P.gp;\n  const open = P.ph === 0 ? 1 : P.ph === 1 ? 1 - ease(P.u) : ease(P.u);\n  const sL = P.side === 1 ? 1 : open, sR = P.side === 0 ? 1 : open;\n  const mix = P.old ? ease(P.ph === 2 ? P.u : 1) : 1;\n  // Each arc: top and bottom y, centre, radius, width, side sign. While a\n  // side folds, its arcs all lose width at one rate, so the innermost lie flat\n  // first and the nest never crosses itself; it opens outermost first.\n  for (let k = 0; k \u003c n2; k++) {\n    const a = P.AF[k], b = P.AT[k], side = P.AS[k];\n    const h = side ? M.hR[a] : M.hL[a], Hs = side ? M.HR : M.HL, so = side ? sR : sL;\n    const ya = TOP + a * sp, yb = TOP + b * sp, o = k * 6;\n    (g[o] = min(ya, yb)), (g[o + 1] = max(ya, yb));\n    (g[o + 2] = (ya + yb) / 2), (g[o + 3] = abs(yb - ya) / 2);\n    g[o + 4] = (WMAX / (Hs + 1)) * cl(so * (Hs + 1) - (Hs - h), 0, h + 1);\n    g[o + 5] = side ? 1 : -1;\n  }\n  // The curve: sample every arc in loop order, keep for each LED the nearest\n  // sample, which arc it was on and how far along.\n  const D = P.D, LA = P.LA, LT = P.LT;\n  D.fill(9);\n  P.cum[0] = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    const o = k * 6, c = g[o + 2], R = g[o + 3], w = g[o + 4], sg = g[o + 5];\n    const down = P.AF[k] \u003c P.AT[k], ns = max(4, ceil((PI * R) / 0.4));\n    let px = 0, py = 0, len = 0;\n    for (let j = 0; j \u003c= ns; j++) {\n      const t = (PI * j) / ns, X = MID + sg * smin(w, R * Math.sin(t)), Y = c - R * cos(t);\n      if (j) len += sqrt((X - px) ** 2 + (Y - py) ** 2);\n      (px = X), (py = Y);\n      const tau = down ? j / ns : 1 - j / ns;\n      for (let yy = ceil(Y - 2.3), y1 = floor(Y + 1.3); yy \u003c= y1; yy++) {\n        if (yy \u003c 0 || yy >= H) continue;\n        const ey = yy + 0.5 - Y;\n        for (let xx = ceil(X - 2.3), x1 = floor(X + 1.3); xx \u003c= x1; xx++) {\n          if (xx \u003c 0 || xx >= W) continue;\n          const ex = xx + 0.5 - X, dd = ex * ex + ey * ey, p = yy * W + xx;\n          if (dd \u003c D[p]) (D[p] = dd), (LA[p] = k), (LT[p] = tau);\n        }\n      }\n    }\n    P.len[k] = len;\n    P.cum[k + 1] = P.cum[k] + len;\n  }\n  const Ltot = P.cum[n2] || 1, head = P.cum[P.ck] + P.cu * P.len[P.ck];\n  // Where on the loop a point is, 0..1, with a kept arc's old place blended\n  // into its new one while its side opens.\n  const at = (k, tau) => {\n    let f = (P.cum[k] + tau * P.len[k]) / Ltot;\n    if (mix \u003c 1 && P.OK[k]) {\n      let e = P.OS[k] + tau * (P.OE[k] - P.OS[k]) - f;\n      e -= round(e);\n      f += (1 - mix) * e;\n    }\n    return f;\n  };\n  // The pulse's head, for the glow round it.\n  const ho = P.ck * 6, hr = g[ho + 3], ht = PI * (P.AF[P.ck] \u003c P.AT[P.ck] ? P.cu : 1 - P.cu);\n  const hx = MID + g[ho + 5] * smin(g[ho + 4], hr * Math.sin(ht)), hy = g[ho + 2] - hr * cos(ht);\n  const hue0 = P.hue + 0.55 - P.flow, fillV = 255 * 0.97 * (1 - P.hollow) ** 1.2;\n  const lineS = 0.5 + 0.35 * P.hollow;\n  // The inside by the even-odd rule, row by row: a LED is inside when a ray\n  // from it to the right wall crosses the curve an odd number of times. The\n  // arcs a row meets on one side are nested, so the band a LED sits in takes\n  // the colour of the arc just outside it, at this row.\n  const fl = new Float32Array(16), ka = new Int8Array(16), ta = new Float32Array(16);\n  const fr = new Float32Array(16), kb = new Int8Array(16), tb = new Float32Array(16);\n  for (let yy = 0; yy \u003c H; yy++) {\n    const yc = yy + 0.5;\n    let nl = 0, nr = 0;\n    for (let k = 0; k \u003c n2; k++) {\n      const o = k * 6;\n      if (!(g[o] \u003c yc && yc \u003c g[o + 1])) continue;\n      const c = g[o + 2], R = g[o + 3], dy = yc - c, f = smin(g[o + 4], sqrt(R * R - dy * dy));\n      const t = acos(cl(-dy / R, -1, 1)) / PI, tau = P.AF[k] \u003c P.AT[k] ? t : 1 - t;\n      const A = g[o + 5] > 0 ? fr : fl, KK = g[o + 5] > 0 ? kb : ka, T = g[o + 5] > 0 ? tb : ta;\n      let i = g[o + 5] > 0 ? nr++ : nl++;\n      while (i > 0 && A[i - 1] > f) (A[i] = A[i - 1]), (KK[i] = KK[i - 1]), (T[i] = T[i - 1]), i--;\n      (A[i] = f), (KK[i] = k), (T[i] = tau);\n    }\n    for (let half = 0; half \u003c 2; half++) {\n      const A = half ? fr : fl, KK = half ? kb : ka, T = half ? tb : ta, n = half ? nr : nl;\n      let i = 0;\n      for (let q = 0; q \u003c 32; q++) {\n        const xx = half ? MID + q : MID - 1 - q, dist = q + 0.5, p = yy * W + xx;\n        while (i \u003c n && A[i] \u003c dist) i++;\n        let r = 0, gg = 0, b = 0;\n        const inside = half ? (nr - i) & 1 : (i + nr) & 1;\n        if (inside && fillV > 0) {\n          const f = at(KK[i], T[i]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          (r = LUT[ix] * fillV), (gg = LUT[ix + 1] * fillV), (b = LUT[ix + 2] * fillV);\n        }\n        // The road, a faint line on the dark and a darker one through the colour.\n        if (q === 0) {\n          if (inside && fillV > 0) (r *= 0.6), (gg *= 0.6), (b *= 0.6);\n          else (r += 34), (gg += 36), (b += 44);\n        }\n        const dl = sqrt(D[p]);\n        if (dl \u003c 2.3) {\n          const k = LA[p], f = at(k, LT[p]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          let behind = (head - (P.cum[k] + LT[p] * P.len[k])) % Ltot;\n          if (behind \u003c 0) behind += Ltot;\n          const pulse = exp(-behind / 24) + (behind > Ltot - 3 ? (behind - Ltot + 3) / 3 : 0);\n          const I = cl(1.75 - dl * 1.1, 0, 1), J = cl(2 - dl * 0.75, 0, 1) * pulse, wh = 1 - lineS;\n          let lr = 255 * (wh + lineS * LUT[ix]), lg = 255 * (wh + lineS * LUT[ix + 1]), lb = 255 * (wh + lineS * LUT[ix + 2]);\n          const pv = min(1, pulse);\n          (lr += (255 - lr) * pv), (lg += (250 - lg) * pv), (lb += (235 - lb) * pv);\n          const m = max(I, J);\n          (r += (lr - r) * m), (gg += (lg - gg) * m), (b += (lb - b) * m);\n        }\n        const ex = xx + 0.5 - hx, ey = yc - hy, e2 = ex * ex + ey * ey;\n        if (e2 \u003c 30) {\n          const gl = 0.9 * exp(-e2 / 6);\n          (r += (255 - r) * gl), (gg += (250 - gg) * gl), (b += (235 - b) * gl);\n        }\n        display.setPixel(xx, yy, min(255, r), min(255, gg), min(255, b));\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again."},{"name":"Crossings","min":12,"max":32,"about":"How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander."},{"name":"Hollow","min":0,"max":1,"about":"At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left."}],"start":[0,2,12,0.06],"measures":{"motion":0.1079,"detail":0.0446,"edges":0.5226,"complexity":0.7574,"coverage":0.4978,"colour":0.5487,"drift":0.1848},"knobResponse":[0.3105,0.2838,0.4218,0.1979]},{"slug":"metro-map","title":"Metro Map","family":"city","round":15,"note":"해리 벡 식 지하철 노선도예요. 색 노선 넷이 45도로 꺾이며 위아래로 달리고, 갈아타는 역은 흰 고리예요. 흰 열차가 역마다 섰다 떠나고 끝에서 되돌아가요. K1 을 누르면 급행이 지나가요.","idea":"A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.","buttons":"K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.","code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-metro-map","type":"code","name":"metro-map","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole line palette round the colour wheel together; the river stays blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21."},{"name":"Lines","min":4,"max":7,"about":"How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges."},{"name":"Rush","min":0,"max":1,"about":"The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds."}],"start":[0,2,4,0.06],"measures":{"motion":0.0316,"detail":0.0683,"edges":0.914,"complexity":0.1388,"coverage":0.2043,"colour":0.2301,"drift":0.035},"knobResponse":[0.0664,0.0514,0.0687,0.0629]},{"slug":"milk-ring","title":"Milk Ring","family":"cosmetic","round":38,"note":"우윳빛 크림 방울이 색을 띤 세럼에 떨어져 테두리가 밝은 소용돌이 고리가 돼요. 고리는 가라앉으며 부풀다 작은 방울 몇 개로 갈라지고, 그 방울이 다시 작은 고리가 되어 가는 크림 실에 매달린 나무처럼 패널 아래로 늘어져요. K3 은 한 고리가 갈라지는 방울 수를 셋에서 여섯으로 늘리고, K1 을 누르면 방울이 바로 떨어져요.","idea":"Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.","buttons":"K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Milk Ring\n// Family:  cosmetic\n// Idea:    Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after drops of cream let fall into clear serum, the vortex rings they form and the cascade in which each ring breaks into smaller rings (J. J. Thomson and H. F. Newall, 1885)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive.\n// Knob 2: Speed. At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Drops. How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117.\n// Knob 4: Gel. How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain.\n// Buttons: K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\n// The serum's surface, rows above it are the air the drop falls through.\nconst SURF = 5;\n// Seen from a little above: a ring of radius R is an ellipse R wide and\n// R * TILT tall, its near half lower on the panel.\nconst TILT = 0.4;\n// Per generation: starting radius, the radius it swells to, starting sink\n// speed in LEDs a second, how long it sinks before its rim breaks.\nconst GEN = [\n  { r0: 2.4, r1: 10, v0: 24, brk: 3.2 },\n  { r0: 1.4, r1: 5.2, v0: 18, brk: 2.8 },\n  { r0: 0.9, r1: 2.8, v0: 14, brk: 99 },\n];\n// Every sink speed falls toward VS with time constant TV; radii swell with TR.\nconst VS = 3.2, TV = 1.3, TR = 1.6;\n// Seconds between drops at Speed 2 and Gel 1, and the run before the first frame.\nconst PERIOD = 7, PREROLL = 9;\n// Opening hue: rose.\nconst H0 = 0.93;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, gel: 1, begun: false, t: 0, next: 0, tk: 1,\n    rings: [], falling: [], ripples: [],\n    D: new Float32Array(N), F: new Float32Array(N), T: new Float32Array(N), G: new Float32Array(N), tmp: new Float32Array(N),\n    deep: [0, 0, 0], light: [0, 0, 0], cream: [0, 0, 0],\n  };\n}\n\n// Soft dot of cream into a field, a Gaussian of width s.\nfunction splat(A, x, y, s, w) {\n  const r = Math.ceil(2.2 * s), xi = round(x), yi = round(y), k = -0.5 / (s * s);\n  for (let j = max(0, yi - r); j \u003c= min(H - 1, yi + r); j++) {\n    const dy = j - y, ey = dy * dy;\n    for (let i = max(0, xi - r); i \u003c= min(W - 1, xi + r); i++) {\n      const dx = i - x;\n      A[j * W + i] += w * exp((dx * dx + ey) * k);\n    }\n  }\n}\n\n// A thin thread point, bilinear into the trail.\nfunction dab(T, x, y, w) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  for (let b = 0; b \u003c 2; b++)\n    for (let a = 0; a \u003c 2; a++) {\n      const xx = i + a, yy = j + b;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      T[yy * W + xx] += w * (a ? fx : 1 - fx) * (b ? fy : 1 - fy);\n    }\n}\n\nfunction newRing(S, g, x, y, z, vx, vz) {\n  const G0 = GEN[g];\n  S.rings.push({ g, x, y, z, vx, vz, age: 0, R: G0.r0, amp: 1, broken: false, spin: random() * 2 * PI, v0: G0.v0 * (0.85 + 0.3 * random()) });\n}\n\nfunction drop(S) {\n  S.falling.push({ x: 18 + random() * 28, y: -4, z: (random() - 0.5) * 6 });\n}\n\n// Sim time, in seconds at Speed 2 and Gel 1; the gel stretches it.\nfunction step(S, dt) {\n  // A thicker gel slows everything, keeps the rings smaller and holds the\n  // threads longer.\n  const ts = S.gel ** 0.6, d = dt / ts, rs = S.gel ** -0.2;\n  S.t += d;\n  if (S.t >= S.next) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  // The drop falls through the air and goes in at the surface.\n  for (let i = S.falling.length - 1; i >= 0; i--) {\n    const f = S.falling[i];\n    f.y += 34 * d;\n    if (f.y >= SURF + 1) {\n      newRing(S, 0, f.x, SURF + 2.5, f.z, 0, 0);\n      S.ripples.push({ x: f.x, age: 0 });\n      S.falling.splice(i, 1);\n    }\n  }\n  for (const rp of S.ripples) rp.age += d;\n  S.ripples = S.ripples.filter((rp) => rp.age \u003c 3);\n  const T = S.T, born = [];\n  for (const r of S.rings) {\n    const G0 = GEN[r.g];\n    r.age += d;\n    r.R = (G0.r0 + (G0.r1 - G0.r0) * (1 - exp(-r.age / TR))) * rs;\n    const vy = r.v0 * exp(-r.age / TV) + VS, k = exp(-d / 0.8);\n    const x0 = r.x, y0 = r.y + r.z * TILT;\n    r.y += vy * d;\n    r.x += r.vx * d;\n    r.z += r.vz * d;\n    r.vx *= k;\n    r.vz *= k;\n    // The thread: the ring leaves cream behind it, the same for every LED\n    // of the way it goes.\n    const y1 = r.y + r.z * TILT, len = sqrt((r.x - x0) ** 2 + (y1 - y0) ** 2);\n    dab(T, r.x, y1, (r.g === 0 ? 0.75 : 0.55) * len * r.amp);\n    if (!r.broken && r.age > G0.brk) {\n      // The rim breaks into n drops round the ring, each thrown a little\n      // outward and down, and the ring itself is spent into them.\n      r.broken = true;\n      const n = S.n, ph = r.spin;\n      for (let j = 0; j \u003c n; j++) {\n        const a = ph + (2 * PI * j) / n, c = cos(a), s = sin(a);\n        born.push([r.g + 1, r.x + r.R * c, r.y + 0.5, r.z + r.R * s, 7 * c, 7 * s]);\n      }\n    }\n    if (r.broken) r.amp -= d / 0.7;\n    // The last generation dissolves into the serum after 4 s.\n    if (r.g === GEN.length - 1 && r.age > 4) r.amp -= d / 3;\n  }\n  for (const b of born) newRing(S, b[0], b[1], b[2], b[3], b[4], b[5]);\n  S.rings = S.rings.filter((r) => r.amp > 0.01 && r.y \u003c H + 12);\n  // Threads fade, the fade gathered up and laid on every few frames.\n  S.tk *= exp(-d / (4 * S.gel));\n  if (S.tk \u003c 0.98) {\n    for (let p = 0; p \u003c N; p++) T[p] *= S.tk;\n    S.tk = 1;\n  }\n}\n\n// Draw every ring into the cream field.\nfunction render(S) {\n  const D = S.D, F = S.F;\n  D.fill(0);\n  F.fill(0);\n  for (const r of S.rings) {\n    const form = cl(r.age / 0.6, 0, 1), R = r.R, amp = r.amp;\n    const cy = r.y + r.z * TILT;\n    // A fresh drop is a round blob that opens into the ring.\n    if (form \u003c 1) splat(D, r.x, cy, 0.55 * R + 0.5, 1.3 * (1 - form) * amp);\n    // The ring: its core is an eighth of its radius thick, at least 0.55\n    // LED, laid as dots along it so that a line of them peaks at the weight.\n    const core = max(0.55, 0.12 * R), m = max(10, round(2 * PI * R * 1.6)), ds = (2 * PI * R) / m;\n    for (let j = 0; j \u003c m; j++) {\n      const a = (2 * PI * j) / m, c = cos(a), s = sin(a);\n      // The near half (s > 0) lower on the panel and brighter than the far\n      // half seen through the ring.\n      const w = (0.85 + 0.45 * s) * form * amp * (ds / (core * 2.5066));\n      splat(D, r.x + R * c, cy + R * s * TILT, core, w);\n    }\n    // The bell of milky serum the ring carries above it.\n    splat(F, r.x, cy - 0.45 * R, 0.6 * R + 0.5, 0.4 * form * amp);\n  }\n  for (const f of S.falling) {\n    splat(D, f.x, f.y, 1.1, 1.4);\n    splat(D, f.x, f.y - 1.6, 0.7, 0.5);\n  }\n}\n\n// Box blur of radius r, horizontal then vertical, A into B.\nfunction blur(A, B, tmp, r) {\n  const k = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += A[y * W + cl(x + i, 0, W - 1)];\n      tmp[y * W + x] = s * k;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += tmp[cl(y + i, 0, H - 1) * W + x];\n      B[y * W + x] = s * k;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 3, 6));\n  S.gel = cl(k[3], 1, 5);\n  if (!S.begun) {\n    // The gel stretches the run before as it stretches everything.\n    const n = round(PREROLL * 30 * S.gel ** 0.6);\n    for (let i = 0; i \u003c n; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  render(S);\n  const { D, F, T, G, tmp, deep, light, cream } = S;\n  blur(D, G, tmp, 2);\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime serum goes brown or olive when deep: there it\n  // is lifted, so the bottom of the glass is as bright as the top elsewhere.\n  const warm = cl(1.3 - abs(hh - 0.13) / 0.13, 0, 1);\n  hsv(h, 0.7 - 0.2 * warm, 0.3 + 0.34 * warm, deep);\n  hsv(h + 0.03, 0.5 - 0.1 * warm, 0.62 + 0.14 * warm, light);\n  hsv(h + 0.02, 0.4, 1, cream);\n  const t = S.t;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1), lg = (1 - u) ** 1.6;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vig = 0.8 + 0.2 * sin((PI * (x + 0.5)) / W);\n      // The serum: light from above, and a slow shimmer of caustics.\n      const sh = 0.07 * sin(x * 0.31 + y * 0.07 + t * 0.6 + 1.7 * sin(x * 0.11 - y * 0.05 - t * 0.4)) * lg;\n      let r = deep[0] + (light[0] - deep[0]) * lg, g = deep[1] + (light[1] - deep[1]) * lg, b = deep[2] + (light[2] - deep[2]) * lg;\n      r *= (1 + sh) * vig;\n      g *= (1 + sh) * vig;\n      b *= (1 + sh) * vig;\n      if (y \u003c SURF) {\n        r *= 0.25;\n        g *= 0.25;\n        b *= 0.25;\n      }\n      // Cream: the rings, a soft glow round them, the bell and the threads,\n      // tinted where it is thin and white where it is thick.\n      const C = D[p] + 0.5 * G[p] + F[p] + T[p];\n      const c = 1 - exp(-1.2 * C), wh = c * sqrt(c);\n      const cr = cream[0] + (1 - cream[0]) * wh, cg = cream[1] + (1 - cream[1]) * wh, cb = cream[2] + (1 - cream[2]) * wh;\n      r = r * (1 - 0.85 * c) + cr * c;\n      g = g * (1 - 0.85 * c) + cg * c;\n      b = b * (1 - 0.85 * c) + cb * c;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n  // The surface: a bright line, rippled where a drop went in.\n  for (let x = 0; x \u003c W; x++) {\n    let off = 0;\n    for (const rp of S.ripples) {\n      const dx = abs(x - rp.x), front = rp.age * 14;\n      off += 1.2 * exp(-rp.age / 0.8) * sin(dx * 0.9 - rp.age * 12) * exp(-((dx - front) ** 2) / 30);\n    }\n    const y = cl(round(SURF + off), 0, H - 1);\n    display.setPixel(x, y, round(255 * min(1, light[0] * 0.5 + 0.5)), round(255 * min(1, light[1] * 0.5 + 0.5)), round(255 * min(1, light[2] * 0.5 + 0.5)));\n  }\n}\n","layer":{"id":"layer-milk-ring","type":"code","name":"milk-ring","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Milk Ring\n// Family:  cosmetic\n// Idea:    Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after drops of cream let fall into clear serum, the vortex rings they form and the cascade in which each ring breaks into smaller rings (J. J. Thomson and H. F. Newall, 1885)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive.\n// Knob 2: Speed. At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Drops. How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117.\n// Knob 4: Gel. How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain.\n// Buttons: K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\n// The serum's surface, rows above it are the air the drop falls through.\nconst SURF = 5;\n// Seen from a little above: a ring of radius R is an ellipse R wide and\n// R * TILT tall, its near half lower on the panel.\nconst TILT = 0.4;\n// Per generation: starting radius, the radius it swells to, starting sink\n// speed in LEDs a second, how long it sinks before its rim breaks.\nconst GEN = [\n  { r0: 2.4, r1: 10, v0: 24, brk: 3.2 },\n  { r0: 1.4, r1: 5.2, v0: 18, brk: 2.8 },\n  { r0: 0.9, r1: 2.8, v0: 14, brk: 99 },\n];\n// Every sink speed falls toward VS with time constant TV; radii swell with TR.\nconst VS = 3.2, TV = 1.3, TR = 1.6;\n// Seconds between drops at Speed 2 and Gel 1, and the run before the first frame.\nconst PERIOD = 7, PREROLL = 9;\n// Opening hue: rose.\nconst H0 = 0.93;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, gel: 1, begun: false, t: 0, next: 0, tk: 1,\n    rings: [], falling: [], ripples: [],\n    D: new Float32Array(N), F: new Float32Array(N), T: new Float32Array(N), G: new Float32Array(N), tmp: new Float32Array(N),\n    deep: [0, 0, 0], light: [0, 0, 0], cream: [0, 0, 0],\n  };\n}\n\n// Soft dot of cream into a field, a Gaussian of width s.\nfunction splat(A, x, y, s, w) {\n  const r = Math.ceil(2.2 * s), xi = round(x), yi = round(y), k = -0.5 / (s * s);\n  for (let j = max(0, yi - r); j \u003c= min(H - 1, yi + r); j++) {\n    const dy = j - y, ey = dy * dy;\n    for (let i = max(0, xi - r); i \u003c= min(W - 1, xi + r); i++) {\n      const dx = i - x;\n      A[j * W + i] += w * exp((dx * dx + ey) * k);\n    }\n  }\n}\n\n// A thin thread point, bilinear into the trail.\nfunction dab(T, x, y, w) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  for (let b = 0; b \u003c 2; b++)\n    for (let a = 0; a \u003c 2; a++) {\n      const xx = i + a, yy = j + b;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      T[yy * W + xx] += w * (a ? fx : 1 - fx) * (b ? fy : 1 - fy);\n    }\n}\n\nfunction newRing(S, g, x, y, z, vx, vz) {\n  const G0 = GEN[g];\n  S.rings.push({ g, x, y, z, vx, vz, age: 0, R: G0.r0, amp: 1, broken: false, spin: random() * 2 * PI, v0: G0.v0 * (0.85 + 0.3 * random()) });\n}\n\nfunction drop(S) {\n  S.falling.push({ x: 18 + random() * 28, y: -4, z: (random() - 0.5) * 6 });\n}\n\n// Sim time, in seconds at Speed 2 and Gel 1; the gel stretches it.\nfunction step(S, dt) {\n  // A thicker gel slows everything, keeps the rings smaller and holds the\n  // threads longer.\n  const ts = S.gel ** 0.6, d = dt / ts, rs = S.gel ** -0.2;\n  S.t += d;\n  if (S.t >= S.next) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  // The drop falls through the air and goes in at the surface.\n  for (let i = S.falling.length - 1; i >= 0; i--) {\n    const f = S.falling[i];\n    f.y += 34 * d;\n    if (f.y >= SURF + 1) {\n      newRing(S, 0, f.x, SURF + 2.5, f.z, 0, 0);\n      S.ripples.push({ x: f.x, age: 0 });\n      S.falling.splice(i, 1);\n    }\n  }\n  for (const rp of S.ripples) rp.age += d;\n  S.ripples = S.ripples.filter((rp) => rp.age \u003c 3);\n  const T = S.T, born = [];\n  for (const r of S.rings) {\n    const G0 = GEN[r.g];\n    r.age += d;\n    r.R = (G0.r0 + (G0.r1 - G0.r0) * (1 - exp(-r.age / TR))) * rs;\n    const vy = r.v0 * exp(-r.age / TV) + VS, k = exp(-d / 0.8);\n    const x0 = r.x, y0 = r.y + r.z * TILT;\n    r.y += vy * d;\n    r.x += r.vx * d;\n    r.z += r.vz * d;\n    r.vx *= k;\n    r.vz *= k;\n    // The thread: the ring leaves cream behind it, the same for every LED\n    // of the way it goes.\n    const y1 = r.y + r.z * TILT, len = sqrt((r.x - x0) ** 2 + (y1 - y0) ** 2);\n    dab(T, r.x, y1, (r.g === 0 ? 0.75 : 0.55) * len * r.amp);\n    if (!r.broken && r.age > G0.brk) {\n      // The rim breaks into n drops round the ring, each thrown a little\n      // outward and down, and the ring itself is spent into them.\n      r.broken = true;\n      const n = S.n, ph = r.spin;\n      for (let j = 0; j \u003c n; j++) {\n        const a = ph + (2 * PI * j) / n, c = cos(a), s = sin(a);\n        born.push([r.g + 1, r.x + r.R * c, r.y + 0.5, r.z + r.R * s, 7 * c, 7 * s]);\n      }\n    }\n    if (r.broken) r.amp -= d / 0.7;\n    // The last generation dissolves into the serum after 4 s.\n    if (r.g === GEN.length - 1 && r.age > 4) r.amp -= d / 3;\n  }\n  for (const b of born) newRing(S, b[0], b[1], b[2], b[3], b[4], b[5]);\n  S.rings = S.rings.filter((r) => r.amp > 0.01 && r.y \u003c H + 12);\n  // Threads fade, the fade gathered up and laid on every few frames.\n  S.tk *= exp(-d / (4 * S.gel));\n  if (S.tk \u003c 0.98) {\n    for (let p = 0; p \u003c N; p++) T[p] *= S.tk;\n    S.tk = 1;\n  }\n}\n\n// Draw every ring into the cream field.\nfunction render(S) {\n  const D = S.D, F = S.F;\n  D.fill(0);\n  F.fill(0);\n  for (const r of S.rings) {\n    const form = cl(r.age / 0.6, 0, 1), R = r.R, amp = r.amp;\n    const cy = r.y + r.z * TILT;\n    // A fresh drop is a round blob that opens into the ring.\n    if (form \u003c 1) splat(D, r.x, cy, 0.55 * R + 0.5, 1.3 * (1 - form) * amp);\n    // The ring: its core is an eighth of its radius thick, at least 0.55\n    // LED, laid as dots along it so that a line of them peaks at the weight.\n    const core = max(0.55, 0.12 * R), m = max(10, round(2 * PI * R * 1.6)), ds = (2 * PI * R) / m;\n    for (let j = 0; j \u003c m; j++) {\n      const a = (2 * PI * j) / m, c = cos(a), s = sin(a);\n      // The near half (s > 0) lower on the panel and brighter than the far\n      // half seen through the ring.\n      const w = (0.85 + 0.45 * s) * form * amp * (ds / (core * 2.5066));\n      splat(D, r.x + R * c, cy + R * s * TILT, core, w);\n    }\n    // The bell of milky serum the ring carries above it.\n    splat(F, r.x, cy - 0.45 * R, 0.6 * R + 0.5, 0.4 * form * amp);\n  }\n  for (const f of S.falling) {\n    splat(D, f.x, f.y, 1.1, 1.4);\n    splat(D, f.x, f.y - 1.6, 0.7, 0.5);\n  }\n}\n\n// Box blur of radius r, horizontal then vertical, A into B.\nfunction blur(A, B, tmp, r) {\n  const k = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += A[y * W + cl(x + i, 0, W - 1)];\n      tmp[y * W + x] = s * k;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += tmp[cl(y + i, 0, H - 1) * W + x];\n      B[y * W + x] = s * k;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 3, 6));\n  S.gel = cl(k[3], 1, 5);\n  if (!S.begun) {\n    // The gel stretches the run before as it stretches everything.\n    const n = round(PREROLL * 30 * S.gel ** 0.6);\n    for (let i = 0; i \u003c n; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  render(S);\n  const { D, F, T, G, tmp, deep, light, cream } = S;\n  blur(D, G, tmp, 2);\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime serum goes brown or olive when deep: there it\n  // is lifted, so the bottom of the glass is as bright as the top elsewhere.\n  const warm = cl(1.3 - abs(hh - 0.13) / 0.13, 0, 1);\n  hsv(h, 0.7 - 0.2 * warm, 0.3 + 0.34 * warm, deep);\n  hsv(h + 0.03, 0.5 - 0.1 * warm, 0.62 + 0.14 * warm, light);\n  hsv(h + 0.02, 0.4, 1, cream);\n  const t = S.t;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1), lg = (1 - u) ** 1.6;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vig = 0.8 + 0.2 * sin((PI * (x + 0.5)) / W);\n      // The serum: light from above, and a slow shimmer of caustics.\n      const sh = 0.07 * sin(x * 0.31 + y * 0.07 + t * 0.6 + 1.7 * sin(x * 0.11 - y * 0.05 - t * 0.4)) * lg;\n      let r = deep[0] + (light[0] - deep[0]) * lg, g = deep[1] + (light[1] - deep[1]) * lg, b = deep[2] + (light[2] - deep[2]) * lg;\n      r *= (1 + sh) * vig;\n      g *= (1 + sh) * vig;\n      b *= (1 + sh) * vig;\n      if (y \u003c SURF) {\n        r *= 0.25;\n        g *= 0.25;\n        b *= 0.25;\n      }\n      // Cream: the rings, a soft glow round them, the bell and the threads,\n      // tinted where it is thin and white where it is thick.\n      const C = D[p] + 0.5 * G[p] + F[p] + T[p];\n      const c = 1 - exp(-1.2 * C), wh = c * sqrt(c);\n      const cr = cream[0] + (1 - cream[0]) * wh, cg = cream[1] + (1 - cream[1]) * wh, cb = cream[2] + (1 - cream[2]) * wh;\n      r = r * (1 - 0.85 * c) + cr * c;\n      g = g * (1 - 0.85 * c) + cg * c;\n      b = b * (1 - 0.85 * c) + cb * c;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n  // The surface: a bright line, rippled where a drop went in.\n  for (let x = 0; x \u003c W; x++) {\n    let off = 0;\n    for (const rp of S.ripples) {\n      const dx = abs(x - rp.x), front = rp.age * 14;\n      off += 1.2 * exp(-rp.age / 0.8) * sin(dx * 0.9 - rp.age * 12) * exp(-((dx - front) ** 2) / 30);\n    }\n    const y = cl(round(SURF + off), 0, H - 1);\n    display.setPixel(x, y, round(255 * min(1, light[0] * 0.5 + 0.5)), round(255 * min(1, light[1] * 0.5 + 0.5)), round(255 * min(1, light[2] * 0.5 + 0.5)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Drops","min":3,"max":6,"about":"How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117."},{"name":"Gel","min":1,"max":5,"about":"How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain."}],"start":[0,2,3,1],"measures":{"motion":0.0728,"detail":0.0206,"edges":0.212,"complexity":1.5604,"coverage":1,"colour":0.1167,"drift":0.0533},"knobResponse":[0.2862,0.0564,0.077,0.0544]},{"slug":"millefiori","title":"Millefiori","family":"glass","round":20,"note":"무라노 밀레피오리 접시 위로 시야가 천천히 미끄러지며, 1 LED 고리와 꽃잎으로 된 유리 막대 조각 수백 개가 어두운 유리에 촘촘히 박혀 지나가요. K1 을 누르면 새로 뽑은 막대로 만든 접시가 오른쪽에서 밀려 들어와요.","idea":"The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.","buttons":"K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.","code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-millefiori","type":"code","name":"millefiori","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds."},{"name":"Canes","min":6,"max":12,"about":"How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals."},{"name":"Light","min":0,"max":1,"about":"How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim."}],"start":[0,2,6,0.06],"measures":{"motion":1.2091,"detail":0.3373,"edges":0.8101,"complexity":1.6267,"coverage":1,"colour":0.5579,"drift":0.0871},"knobResponse":[0.1882,0.3627,0.3509,0.1412]},{"slug":"mitosis","title":"Mitosis","family":"microbe","round":27,"note":"검은 바탕에 찍은 면역형광 사진 속 세포 배양이에요. DNA 는 파랑, 미세소관은 초록, 액틴은 빨강으로 물든 세포가 둥글게 말려 염색체를 두 방추극 사이에 세우고, 양쪽 극으로 끌어 나눈 뒤 빨간 수축 고리에서 잘록해져 둘이 돼요. K1 이 염료를 바꾸고, 누르면 가운데 세포가 바로 분열을 시작해요.","idea":"A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.","buttons":"K1 tap sends the interphase cell nearest the middle into prophase now.","code":"// ===== Patternflow pattern =====\n// Title:   Mitosis\n// Family:  microbe\n// Idea:    A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after immunofluorescence micrographs of dividing cells\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1\n//\n// Knob 1: Stain. The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA.\n// Knob 2: Speed. At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower.\n// Knob 3: Cells. How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in.\n// Knob 4: Zoom. The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show.\n// Buttons: K1 tap sends the interphase cell nearest the middle into prophase now.\n\nconst W = 64, H = 128, N = W * H, TAU = 2 * Math.PI, NCH = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// A 64x64 tile of value noise that wraps, for chromatin.\nconst NT = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = ((k & 63) * 16) / 64, y = ((k >> 6) * 16) / 64, xi = floor(x), yi = floor(y), u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), a = hash(xi, yi), b = hash((xi + 1) % 16, yi), c = hash(xi, (yi + 1) % 16), d = hash((xi + 1) % 16, (yi + 1) % 16);\n  NT[k] = a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, x0 = xi & 63, y0 = (yi & 63) * 64, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) * 64;\n  return mix(mix(NT[y0 + x0], NT[y0 + x1], fx), mix(NT[y1 + x0], NT[y1 + x1], fx), fy);\n}\n\n// The cycle, as fractions of it: daughters spread, interphase, prophase,\n// prometaphase, metaphase, anaphase, telophase to the split at 1.\nconst P1 = 0.1, P2 = 0.5, P3 = 0.6, P4 = 0.67, P5 = 0.79, P6 = 0.86;\n\n// Dye hues in degrees: DNA, tubulin, actin, centrosome.\nconst STAINS = [\n  [240, 120, 0, 55],\n  [228, 352, 125, 185],\n  [192, 305, 55, 120],\n  [262, 60, 318, 170],\n];\nconst hueRGB = (h, out, o) => {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (((5 - 2 * j) + h / 60) % 6 + 6) % 6;\n    out[o + j] = 1 - max(0, min(k, 4 - k, 1));\n  }\n};\n\n// One buffer per dye (actin, tubulin, DNA, centrosome) and one for the body\n// haze. LIN holds the merged colour and BL its blur for the glow; TMP is scratch.\nconst SA = new Float32Array(N), ST = new Float32Array(N), SD = new Float32Array(N), SC = new Float32Array(N), HZ = new Float32Array(N);\nconst LIN = new Float32Array(N * 3), BL = new Float32Array(N * 3), TMP = new Float32Array(N * 3);\nlet Z = 1, TT = 0;\n\nfunction newCell(x, y, p, B) {\n  const c = {\n    x, y, vx: 0, vy: 0, a: rnd() * PI, hd: rnd() * TAU, p, rate: 0.85 + 0.3 * rnd(), B: B || 12 + 2 * rnd(),\n    sd: floor(rnd() * 9973), w1: rnd() * TAU, w2: rnd() * TAU, w3: rnd() * TAU, nf: 22 + floor(rnd() * 7), cang: rnd() * TAU,\n    ox: rnd() * 64, oy: rnd() * 64, tilt: (rnd() - 0.5) * 0.4, al: 1, out: 0, br: 0, bx: 0, by: 0,\n    ca: 1, sa: 0, e: 0, rl: 5, kk: 2, pin: 0, wa: 0, hdl: 0, lam: 0, cx: 1, fur: 0, nS: 0, rn: 3, cond: 0, dense: 0, dS: 0, dr: 2,\n    Lp: 3, sp: 0, net: 0, ast: 0, chA: 0, sh: 0.5, pf: 0, ip: 0, ft: 0, fa: 0, cu: 0, cv: 0, dup: 0, rad: 10, p1u: 0, p1v: 0, p2u: 0, p2v: 0,\n    ch: new Float32Array(NCH * 4), wt: new Float32Array(64), fw: new Float32Array(64), gp: new Float32Array(64),\n  };\n  for (let j = 0; j \u003c NCH; j++) {\n    const r = 0.75 * sqrt(rnd()), q = rnd() * TAU;\n    c.ch[j * 4] = r * cos(q);\n    c.ch[j * 4 + 1] = r * sin(q);\n    c.ch[j * 4 + 2] = ((j + 0.5) / NCH) * 2 - 1 + (rnd() - 0.5) * 0.15;\n    c.ch[j * 4 + 3] = rnd() * PI;\n  }\n  return c;\n}\n\n// Where the cell is in its cycle decides its shape and what each dye shows.\nfunction geo(c) {\n  const p = c.p, B = c.B, Rm = 0.8 * B;\n  let rho = 1, R = Rm, f;\n  if (p \u003c P1) (f = sm(0, P1, p)), (rho = 1 - f), (R = mix(0.59 * B, 0.74 * B, f));\n  else if (p \u003c P2) (rho = 0), (R = mix(0.74 * B, B, (p - P1) / (P2 - P1)));\n  else if (p \u003c P3) (f = sm(P2, P3, p)), (rho = f), (R = mix(B, Rm, f));\n  const fa = (c.fa = sm(P5, P6, p)), ft = (c.ft = sm(P6, 1, p));\n  let e = 0.3 * R * (1 - rho);\n  if (p >= P5) e = p \u003c P6 ? 0.3 * Rm * fa : mix(0.3, 0.58, ft) * Rm;\n  c.e = e;\n  c.rl = R - 0.45 * e;\n  c.kk = (p >= P6 ? mix(0.5, 0.06, ft) : 0.5) * R;\n  c.pin = p >= P6 ? 3 * ft * sqrt(ft) : 0;\n  c.wa = 0.16 * (1 - rho) + 0.025;\n  c.lam = 1 - rho;\n  c.cx = mix(0.85, 1.2, rho);\n  c.fur = ft;\n  c.hdl = c.hd - c.a;\n  // Nucleus: whole until the envelope breaks early in prometaphase.\n  c.rn = 0.44 * R;\n  c.nS = p \u003c P3 ? 1 : 1 - sm(P3, P3 + 0.035, p);\n  c.cond = p \u003c P2 || p >= P6 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dense = p \u003c P1 ? 1 - sm(0, P1, p) : p >= P6 ? 1 : 0;\n  c.dS = sm(0.3, 0.8, ft);\n  c.dr = mix(0.13, 0.22, ft) * B;\n  // Chromosomes gather on the plate; in anaphase the sisters part for the poles.\n  c.pf = sm(P3, P4, p);\n  c.chA = p \u003c P3 ? 0 : sm(P3, P3 + 0.03, p) * (1 - sm(0.25, 0.7, ft));\n  const Lp0 = 0.58 * Rm;\n  c.Lp = p \u003c P5 ? Lp0 : p \u003c P6 ? Lp0 + 0.7 * e : mix(0.79, 0.86, ft) * Rm;\n  c.sh = p \u003c P5 ? 0.5 : p \u003c P6 ? mix(0.5, c.Lp - 1.4, fa) : c.Lp - 1.4;\n  c.sp = p \u003c P3 ? 0 : p \u003c P6 ? sm(P3, P4, p) : 1 - ft;\n  c.ip = p \u003c P5 ? 0 : p \u003c P6 ? fa : 1;\n  c.net = p \u003c P1 ? mix(0.45, 1, sm(0, P1, p)) : p \u003c P2 ? 1 : p \u003c P3 ? 1 - sm(P2, P3, p) : 0;\n  c.ast = p \u003c P2 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dup = p > 0.4 && p \u003c P3 ? 1 : 0;\n  // Centrosome beside the nucleus; in prophase the pair travels round it to the poles.\n  c.cu = (c.rn + 1) * cos(c.cang);\n  c.cv = (c.rn + 1) * sin(c.cang);\n  if (p >= P2) {\n    const g = p \u003c P3 ? sm(P2, P3, p) : 1;\n    c.p1u = mix(c.cu, -c.Lp, g);\n    c.p1v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n    c.p2u = mix(c.cu, c.Lp, g);\n    c.p2v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n  }\n  // The ruffled outline and the leading edge, as a table round the cell.\n  for (let k = 0; k \u003c 64; k++) {\n    const th = (k * PI) / 32 - PI, fr = max(0, cos(th - c.hdl)), F = fr * fr * c.lam;\n    c.fw[k] = F;\n    c.gp[k] = 1 - 0.9 * c.lam * sm(0.4, 0.5, 0.5 + 0.28 * sin(3 * th + 2 * c.w2) + 0.22 * sin(7 * th + c.w3));\n    c.wt[k] = c.rl * c.wa * (0.5 * sin(2 * th + c.w1) + 0.3 * sin(3 * th + c.w2) + 0.2 * sin(5 * th + c.w3 + TT * 0.35) + 0.9 * F);\n  }\n  c.rad = (c.e + c.rl * (1 + 1.6 * c.wa) + 2) * Z;\n  c.ca = cos(c.a);\n  c.sa = sin(c.a);\n}\n\n// What shapeD found at the last point it was asked about, kept for drawCell.\n// A typed array, so writing it for every LED makes no garbage.\nconst G = new Float64Array(3);\n// Signed distance to the cell's outline in its own frame: two discs joined\n// smoothly, ruffled, bulging at the leading edge, pinched at the furrow.\nfunction shapeD(c, u, v) {\n  const e = c.e, rl = c.rl, kk = c.kk;\n  const d1 = hypot(u - e, v) - rl, d2 = hypot(u + e, v) - rl, h = cl(0.5 + (0.5 * (d2 - d1)) / kk, 0, 1);\n  let d = mix(d2, d1, h) - kk * h * (1 - h);\n  const th = (G[1] = atan2(v, u)), q = (th + PI) * (32 / PI), k = floor(q), f = q - k, k0 = k & 63, k1 = (k + 1) & 63;\n  G[0] = mix(c.fw[k0], c.fw[k1], f);\n  G[2] = mix(c.gp[k0], c.gp[k1], f);\n  d -= mix(c.wt[k0], c.wt[k1], f);\n  if (c.pin > 0) d += c.pin * exp(-u * u * 0.4);\n  return d;\n}\n\nfunction put(B, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n    const i = y * W + x;\n    if (v > B[i]) B[i] = v;\n  }\n}\n// A soft dot at a world point; weights sharpened so lines stay one LED wide.\nfunction dot(B, wx, wy, a) {\n  const x = (wx - 32) * Z + 31.5, y = (wy - 64) * Z + 63.5, x0 = floor(x), y0 = floor(y);\n  let fx = x - x0, fy = y - y0;\n  (fx = fx * fx * (3 - 2 * fx)), (fy = fy * fy * (3 - 2 * fy));\n  put(B, x0, y0, a * (1 - fx) * (1 - fy));\n  put(B, x0 + 1, y0, a * fx * (1 - fy));\n  put(B, x0, y0 + 1, a * (1 - fx) * fy);\n  put(B, x0 + 1, y0 + 1, a * fx * fy);\n}\n// A curve in the cell's frame from (au, av) to (bu, bv) bowed through (mu, mv).\nfunction curve(B, c, au, av, mu, mv, bu, bv, a) {\n  const n = max(2, ceil((hypot(mu - au, mv - av) + hypot(bu - mu, bv - mv)) * Z * 2.2));\n  for (let k = 0; k \u003c= n; k++) {\n    const t = k / n, s = 1 - t, u = s * s * au + 2 * s * t * mu + t * t * bu, v = s * s * av + 2 * s * t * mv + t * t * bv;\n    dot(B, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, a);\n  }\n}\nconst line = (B, c, au, av, bu, bv, a) => curve(B, c, au, av, (au + bu) / 2, (av + bv) / 2, bu, bv, a);\n\n// Microtubules grown out from (u0, v0) until they meet the cortex.\nfunction rays(c, u0, v0, n, ang, spread, len, a, sd) {\n  const st = 0.45 / Z;\n  for (let i = 0; i \u003c n; i++) {\n    const h1 = hash(c.sd + sd, i), h2 = hash(i, c.sd + sd + 7);\n    let q = ang + (n > 1 ? ((i + 0.5 * h1) / n - 0.5) * spread : 0), u = u0, v = v0;\n    const L = len * (0.7 + 0.45 * h2), curl = (h1 - 0.5) * 0.3, b = a * (0.9 + 0.25 * h2);\n    for (let s = 0; s \u003c L; s += st) {\n      q += curl * st + 0.12 * sin(s * 0.6 + i * 1.7) * st;\n      u += cos(q) * st;\n      v += sin(q) * st;\n      if (shapeD(c, u, v) > -1.6 - 1.4 * G[0]) break;\n      const nq = c.nS > 0.5 ? hypot(u / (c.rn * 1.1), v / (c.rn * 0.92)) : 2;\n      // Asters wrap round the nucleus until its envelope breaks.\n      if (nq \u003c 1 && sd) break;\n      dot(ST, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, nq \u003c 1 ? b * 0.3 : b);\n    }\n  }\n}\n\nfunction chromatin(c, u, v, cond) {\n  const tu = u * 1.5 + c.ox, tv = v * 1.5 + c.oy;\n  let t = mix(0.35 + 0.9 * nz(tu, tv) - 0.6 * exp(-((u - 0.3 * c.rn) ** 2 + (v + 0.2 * c.rn) ** 2) * 0.9), 1.2, c.dense);\n  if (cond > 0) t = mix(t, 1.5 * sm(0.14, 0.04, abs(nz(tu * 1.4 + 17, tv * 1.4 + 5) - 0.5)), cond);\n  return t;\n}\n\nfunction drawCell(c) {\n  const al = c.al, cx = (c.x - 32) * Z + 32, cy = (c.y - 64) * Z + 64, r = c.rad;\n  const x0 = max(0, floor(cx - r)), x1 = min(W - 1, ceil(cx + r)), y0 = max(0, floor(cy - r)), y1 = min(H - 1, ceil(cy + r));\n  if (x0 > x1 || y0 > y1) return;\n  const iz = 1 / Z, rn = c.rn, na = rn * 1.1, nb = rn * 0.92, r2 = r * r;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      if ((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2 > r2) continue;\n      const dx = (x + 0.5 - cx) * iz, dy = (y + 0.5 - cy) * iz, u = dx * c.ca + dy * c.sa, v = -dx * c.sa + dy * c.ca;\n      const d = shapeD(c, u, v);\n      if (d > 0.8) continue;\n      const i = y * W + x;\n      // Actin: the cortex, broad at the leading edge, and the ring at the furrow.\n      const fr = G[0], th = G[1];\n      let A = sm(-1.2, -0.7, d) * sm(0.35, -0.15, d) * c.cx * G[2];\n      if (fr > 0.05) A = max(A, fr * sm(-2.6, -1.9, d) * sm(0.35, -0.15, d) * (0.55 + 0.6 * nz(th * 20.372 + c.oy, c.ox + d)));\n      if (c.lam > 0.05 && d \u003c -1.2) {\n        // Stress fibres along the cell's long axis, some broken off short.\n        const q = (v + c.tilt * u) / 2.7 + c.ox, k = floor(q + 0.5), h = hash(c.sd + 11, k), e = (hash(k, c.sd) - 0.5) * c.rl;\n        if (h > 0.55 && abs(u - e) \u003c c.rl * (0.3 + 0.7 * h) && hypot(u / na, v / nb) > 1.15) A = max(A, c.lam * sm(0.62, 0.22, abs(q - k) * 2.7) * sm(-1.2, -2.2, d));\n      }\n      if (c.fur > 0) A = max(A, 1.3 * c.fur * exp(-u * u * 1.4) * sm(0.3, -0.5, d));\n      if (A * al > SA[i]) SA[i] = A * al;\n      if (d \u003c 0 && al > HZ[i]) HZ[i] = al * sm(0.5, -2, d);\n      // DNA: an interphase nucleus, or the two that reform in telophase.\n      let D = 0;\n      if (c.nS > 0) {\n        const dn = (hypot(u / na, v / nb) - 1) * nb;\n        if (dn \u003c 0.6) D = sm(0.55, -0.45, dn) * c.nS * chromatin(c, u, v, c.cond);\n      }\n      if (c.dS > 0) {\n        const dn = hypot(abs(u) - c.e, v) - c.dr;\n        if (dn \u003c 0.6) D = max(D, sm(0.55, -0.45, dn) * c.dS * chromatin(c, abs(u) - c.e, v, c.cond));\n      }\n      if (D * al > SD[i]) SD[i] = D * al;\n    }\n  const p = c.p, Rm = 0.8 * c.B;\n  // Interphase network from the centrosome.\n  if (c.net > 0.02) rays(c, c.cu, c.cv, c.nf, c.cang, TAU, c.net * 1.6 * c.rl, al, 0);\n  if (p \u003c P2) {\n    dot(SC, c.x + c.cu * c.ca - c.cv * c.sa, c.y + c.cu * c.sa + c.cv * c.ca, 1.2 * al);\n    if (c.dup) dot(SC, c.x + (c.cu + 0.8) * c.ca - c.cv * c.sa, c.y + (c.cu + 0.8) * c.sa + c.cv * c.ca, 1.2 * al);\n  } else {\n    // Asters, and the spindle between its poles.\n    const spr = mix(TAU, 2.2, c.sp), la = c.ast * c.rl * 1.2;\n    rays(c, c.p1u, c.p1v, 9, PI, spr, la, al, 3);\n    rays(c, c.p2u, c.p2v, 9, 0, spr, la, al, 5);\n    dot(SC, c.x + c.p1u * c.ca - c.p1v * c.sa, c.y + c.p1u * c.sa + c.p1v * c.ca, 1.25 * al);\n    dot(SC, c.x + c.p2u * c.ca - c.p2v * c.sa, c.y + c.p2u * c.sa + c.p2v * c.ca, 1.25 * al);\n    const hw = 0.42 * Rm, ch = c.ch, pf = c.pf * c.pf * (3 - 2 * c.pf);\n    for (let j = 0; j \u003c NCH; j++) {\n      const cu = mix(ch[j * 4] * c.rn, 0.25 * sin(TT * 3.5 + j), pf), cv = mix(ch[j * 4 + 1] * c.rn, ch[j * 4 + 2] * hw, pf), o = mix(ch[j * 4 + 3], PI / 2, pf);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const su = cu + s * c.sh * mix(-sin(o), 1, pf), sv = cv + s * c.sh * mix(cos(o), 0, pf);\n        if (c.sp > 0.02) curve(ST, c, s * c.Lp, 0, (s * c.Lp + su) / 2, sv * 1.3, su, sv, c.sp * al * 0.95);\n        if (c.chA > 0.02) {\n          // Sister chromatids, arms trailing back toward the plate in anaphase.\n          const tr = c.fa, du = mix(cos(o), -s * 0.9, tr) * 1.1, dv = mix(sin(o), 0.45 * (cv \u003c 0 ? -1 : 1), tr) * 1.1;\n          line(SD, c, su - du * (1 - tr), sv - dv * (1 - tr), su + du, sv + dv, 1.3 * c.chA * al);\n        }\n      }\n    }\n    // Central spindle, gathered into the midbody as the furrow closes.\n    if (c.ip > 0.02) {\n      const x = max(1.4, (c.sh - 0.8) * (1 - c.ft) + 1.6 * c.ft);\n      for (let k = -1; k \u003c= 1; k++) line(ST, c, -x, k * 1.1 * (1 - c.ft), x, k * 1.1 * (1 - c.ft), c.ip * al * (k ? 0.85 : 1.1));\n    }\n  }\n  // The midbody bridge back to the sister cell, with its ring.\n  if (c.br > 0.02) {\n    const dx = c.bx - c.x, dy = c.by - c.y, L = hypot(dx, dy), r0 = c.rl * 0.8;\n    if (L > r0) {\n      const ux = dx / L, uy = dy / L, n = ceil((L - r0) * Z * 2.2);\n      for (let k = 0; k \u003c= n; k++) dot(ST, c.x + ux * (r0 + ((L - r0) * k) / n), c.y + uy * (r0 + ((L - r0) * k) / n), c.br * al);\n      dot(SA, c.bx, c.by, 1.2 * c.br * al);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = { cells: [], t: 0, k1: -1, pal: new Float32Array(12), cool: 0, n: 0 };\n}\n\n// The emptiest spot in the field: best of a dozen tries.\nfunction freeSpot(S) {\n  let bx = 32, by = 64, bd = -1;\n  for (let k = 0; k \u003c 14; k++) {\n    const x = 6 + rnd() * 52, y = 6 + rnd() * 116;\n    let d = min(x + 6, 70 - x, y + 6, 134 - y) * 0.6;\n    for (const c of S.cells) d = min(d, hypot(c.x - x, c.y - y));\n    if (d > bd) (bd = d), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// Everything here runs on the slide's own clock, ds seconds a step.\nfunction step(S, ds) {\n  const cells = S.cells, n = S.n;\n  S.t += ds;\n  TT = S.t;\n  for (let i = cells.length - 1; i >= 0; i--) {\n    const c = cells[i];\n    c.p += (ds * c.rate) / 30;\n    if (c.br > 0) {\n      c.br = c.p \u003c 0.13 ? 1 - sm(0.07, 0.13, c.p) : 0;\n      if (hypot(c.bx - c.x, c.by - c.y) > c.rl * 2.4) c.br = max(0, c.br - ds * 2);\n    }\n    if (c.p >= 1) {\n      // Abscission: two daughters, each half the size, moving apart.\n      cells.splice(i, 1);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const d = newCell(c.x + s * c.e * c.ca, c.y + s * c.e * c.sa, 0, c.B * (0.95 + 0.1 * rnd()));\n        (d.vx = s * c.ca * 0.7), (d.vy = s * c.sa * 0.7), (d.br = 1), (d.bx = c.x), (d.by = c.y), (d.al = c.al), (d.out = c.out);\n        // Each daughter keeps its centrosome on the far side from its sister.\n        d.hd = c.a + (s \u003c 0 ? PI : 0) + (rnd() - 0.5);\n        d.cang = c.a + (s \u003c 0 ? PI : 0) - d.a;\n        cells.push(d);\n      }\n      continue;\n    }\n    // Crawling: interphase cells wander, round cells sit still.\n    const crawl = c.lam * 0.7;\n    c.hd += (rnd() - 0.5) * ds * 1.2;\n    c.vx *= exp(-ds * 0.6);\n    c.vy *= exp(-ds * 0.6);\n    c.x += (c.vx + cos(c.hd) * crawl) * ds;\n    c.y += (c.vy + sin(c.hd) * crawl) * ds;\n    // The walls turn a cell back and nudge it in.\n    const wx = sm(4, -3, c.x) - sm(60, 67, c.x), wy = sm(4, -3, c.y) - sm(124, 131, c.y);\n    if (wx || wy) {\n      c.hd = atan2(sin(c.hd) + wy * ds * 3, cos(c.hd) + wx * ds * 3);\n      (c.x += wx * ds * 2), (c.y += wy * ds * 2);\n    }\n    if (c.out) c.al -= ds * 0.45;\n    else c.al = min(1, c.al + ds * 0.5);\n  }\n  // Cells push gently apart.\n  for (let i = 0; i \u003c cells.length; i++)\n    for (let j = i + 1; j \u003c cells.length; j++) {\n      const a = cells[i], b = cells[j], dx = b.x - a.x, dy = b.y - a.y, d = hypot(dx, dy) + 1e-6, m = 0.8 * (a.rl + b.rl + a.e + b.e);\n      if (d \u003c 1.8 * m) {\n        const f = (((d \u003c m ? m - d : 0) * 0.5 + (1.8 * m - d) * 0.15) / d) * ds;\n        (a.x -= dx * f), (a.y -= dy * f), (b.x += dx * f), (b.y += dy * f);\n      }\n    }\n  for (let i = cells.length - 1; i >= 0; i--) if (cells[i].al \u003c= 0 && cells[i].out) cells.splice(i, 1);\n  // Keep the count: a crowded interphase cell lifts away, or a new one settles in.\n  let live = 0;\n  for (const c of cells) live += c.out ? 0 : 1;\n  S.cool -= ds;\n  if (live > n && (S.cool \u003c= 0 || live > n + 1)) {\n    let best = null, bs = -1;\n    for (const a of cells) {\n      if (a.out || a.p \u003c 0.14 || a.p > P2 - 0.04) continue;\n      let s = 0;\n      for (const b of cells) if (b !== a) s += max(0, a.rl + b.rl - hypot(a.x - b.x, a.y - b.y));\n      s += max(0, 10 - min(a.x, 64 - a.x, a.y, 128 - a.y));\n      if (s > bs) (bs = s), (best = a);\n    }\n    if (best) (best.out = 1), (S.cool = 0.8);\n  } else if (live \u003c n && S.cool \u003c= 0) {\n    const [x, y] = freeSpot(S), c = newCell(x, y, 0.12 + 0.6 * rnd());\n    c.al = 0;\n    cells.push(c);\n    S.cool = 0.5;\n  }\n  for (const c of cells) geo(c);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 9, 0.06], speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 9, 17));\n  Z = 1 + 1.15 * cl(k[3], 0, 1) ** 1.3;\n  if (k[0] !== S.k1) {\n    const s = cl(k[0], 0, 1) * 3, i = min(2, floor(s)), f = sm(0, 1, s - i);\n    for (let j = 0; j \u003c 4; j++) {\n      let a = STAINS[i][j], b = STAINS[i + 1][j];\n      if (b - a > 180) a += 360;\n      if (a - b > 180) b += 360;\n      hueRGB(mix(a, b, f), S.pal, j * 3);\n    }\n    S.k1 = k[0];\n  }\n  if (!S.cells.length) {\n    for (let i = 0; i \u003c S.n; i++) {\n      const [x, y] = freeSpot(S);\n      S.cells.push(newCell(x, y, (i + 0.8 * rnd()) / S.n));\n    }\n    for (const c of S.cells) geo(c);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    let best = null, bd = 1e9;\n    for (const c of S.cells) {\n      const d = hypot(c.x - 32, c.y - 64);\n      if (!c.out && c.p > P1 && c.p \u003c P2 && d \u003c bd) (bd = d), (best = c);\n    }\n    if (best) best.p = P2;\n  }\n  step(S, cl(dt || 0, 0, 0.1) * speed * 0.5);\n}\n\n// Box blur of radius 2 across and then down, for the glow.\nfunction blur(src, dst) {\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = y * W * 3 + ch;\n      for (let x = -2; x \u003c W; x++) {\n        if (x + 2 \u003c W) s += src[o + (x + 2) * 3];\n        if (x - 3 >= 0) s -= src[o + (x - 3) * 3];\n        if (x >= 0) dst[o + x * 3] = s / 5;\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = x * 3 + ch;\n      for (let y = -2; y \u003c H; y++) {\n        if (y + 2 \u003c H) s += dst[o + (y + 2) * W * 3];\n        if (y - 3 >= 0) s -= dst[o + (y - 3) * W * 3];\n        if (y >= 0) src[o + y * W * 3] = s / 5;\n      }\n    }\n}\n\n// Hard knee: a dye is either lit near full or left under the glow.\nconst knee = (v) => (v \u003c= 0.28 ? 0 : v >= 0.52 ? 255 : 255 * sm(0.28, 0.52, v));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.cells.length) return;\n  SA.fill(0), ST.fill(0), SD.fill(0), SC.fill(0), HZ.fill(0);\n  TT = S.t;\n  for (const c of S.cells) drawCell(c);\n  const P = S.pal;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = SA[i], t = ST[i], d = SD[i], z = SC[i];\n    if (a + t + d + z === 0) {\n      LIN[o] = LIN[o + 1] = LIN[o + 2] = BL[o] = BL[o + 1] = BL[o + 2] = 0;\n      continue;\n    }\n    LIN[o] = BL[o] = min(1, a * P[6] + t * P[3] + d * P[0] + z * P[9]);\n    LIN[o + 1] = BL[o + 1] = min(1, a * P[7] + t * P[4] + d * P[1] + z * P[10]);\n    LIN[o + 2] = BL[o + 2] = min(1, a * P[8] + t * P[5] + d * P[2] + z * P[11]);\n  }\n  blur(BL, TMP);\n  // The glow and a faint body haze stay under 21, below what counts as lit.\n  const h0 = 13 * P[3], h1 = 13 * P[4], h2 = 13 * P[5];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const h = HZ[i];\n    display.setPixel(\n      i & 63,\n      i >> 6,\n      max(knee(LIN[o]), min(21, 24 * BL[o] + h * h0)) | 0,\n      max(knee(LIN[o + 1]), min(21, 24 * BL[o + 1] + h * h1)) | 0,\n      max(knee(LIN[o + 2]), min(21, 24 * BL[o + 2] + h * h2)) | 0,\n    );\n  }\n}\n","layer":{"id":"layer-mitosis","type":"code","name":"mitosis","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mitosis\n// Family:  microbe\n// Idea:    A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after immunofluorescence micrographs of dividing cells\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1\n//\n// Knob 1: Stain. The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA.\n// Knob 2: Speed. At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower.\n// Knob 3: Cells. How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in.\n// Knob 4: Zoom. The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show.\n// Buttons: K1 tap sends the interphase cell nearest the middle into prophase now.\n\nconst W = 64, H = 128, N = W * H, TAU = 2 * Math.PI, NCH = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// A 64x64 tile of value noise that wraps, for chromatin.\nconst NT = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = ((k & 63) * 16) / 64, y = ((k >> 6) * 16) / 64, xi = floor(x), yi = floor(y), u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), a = hash(xi, yi), b = hash((xi + 1) % 16, yi), c = hash(xi, (yi + 1) % 16), d = hash((xi + 1) % 16, (yi + 1) % 16);\n  NT[k] = a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, x0 = xi & 63, y0 = (yi & 63) * 64, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) * 64;\n  return mix(mix(NT[y0 + x0], NT[y0 + x1], fx), mix(NT[y1 + x0], NT[y1 + x1], fx), fy);\n}\n\n// The cycle, as fractions of it: daughters spread, interphase, prophase,\n// prometaphase, metaphase, anaphase, telophase to the split at 1.\nconst P1 = 0.1, P2 = 0.5, P3 = 0.6, P4 = 0.67, P5 = 0.79, P6 = 0.86;\n\n// Dye hues in degrees: DNA, tubulin, actin, centrosome.\nconst STAINS = [\n  [240, 120, 0, 55],\n  [228, 352, 125, 185],\n  [192, 305, 55, 120],\n  [262, 60, 318, 170],\n];\nconst hueRGB = (h, out, o) => {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (((5 - 2 * j) + h / 60) % 6 + 6) % 6;\n    out[o + j] = 1 - max(0, min(k, 4 - k, 1));\n  }\n};\n\n// One buffer per dye (actin, tubulin, DNA, centrosome) and one for the body\n// haze. LIN holds the merged colour and BL its blur for the glow; TMP is scratch.\nconst SA = new Float32Array(N), ST = new Float32Array(N), SD = new Float32Array(N), SC = new Float32Array(N), HZ = new Float32Array(N);\nconst LIN = new Float32Array(N * 3), BL = new Float32Array(N * 3), TMP = new Float32Array(N * 3);\nlet Z = 1, TT = 0;\n\nfunction newCell(x, y, p, B) {\n  const c = {\n    x, y, vx: 0, vy: 0, a: rnd() * PI, hd: rnd() * TAU, p, rate: 0.85 + 0.3 * rnd(), B: B || 12 + 2 * rnd(),\n    sd: floor(rnd() * 9973), w1: rnd() * TAU, w2: rnd() * TAU, w3: rnd() * TAU, nf: 22 + floor(rnd() * 7), cang: rnd() * TAU,\n    ox: rnd() * 64, oy: rnd() * 64, tilt: (rnd() - 0.5) * 0.4, al: 1, out: 0, br: 0, bx: 0, by: 0,\n    ca: 1, sa: 0, e: 0, rl: 5, kk: 2, pin: 0, wa: 0, hdl: 0, lam: 0, cx: 1, fur: 0, nS: 0, rn: 3, cond: 0, dense: 0, dS: 0, dr: 2,\n    Lp: 3, sp: 0, net: 0, ast: 0, chA: 0, sh: 0.5, pf: 0, ip: 0, ft: 0, fa: 0, cu: 0, cv: 0, dup: 0, rad: 10, p1u: 0, p1v: 0, p2u: 0, p2v: 0,\n    ch: new Float32Array(NCH * 4), wt: new Float32Array(64), fw: new Float32Array(64), gp: new Float32Array(64),\n  };\n  for (let j = 0; j \u003c NCH; j++) {\n    const r = 0.75 * sqrt(rnd()), q = rnd() * TAU;\n    c.ch[j * 4] = r * cos(q);\n    c.ch[j * 4 + 1] = r * sin(q);\n    c.ch[j * 4 + 2] = ((j + 0.5) / NCH) * 2 - 1 + (rnd() - 0.5) * 0.15;\n    c.ch[j * 4 + 3] = rnd() * PI;\n  }\n  return c;\n}\n\n// Where the cell is in its cycle decides its shape and what each dye shows.\nfunction geo(c) {\n  const p = c.p, B = c.B, Rm = 0.8 * B;\n  let rho = 1, R = Rm, f;\n  if (p \u003c P1) (f = sm(0, P1, p)), (rho = 1 - f), (R = mix(0.59 * B, 0.74 * B, f));\n  else if (p \u003c P2) (rho = 0), (R = mix(0.74 * B, B, (p - P1) / (P2 - P1)));\n  else if (p \u003c P3) (f = sm(P2, P3, p)), (rho = f), (R = mix(B, Rm, f));\n  const fa = (c.fa = sm(P5, P6, p)), ft = (c.ft = sm(P6, 1, p));\n  let e = 0.3 * R * (1 - rho);\n  if (p >= P5) e = p \u003c P6 ? 0.3 * Rm * fa : mix(0.3, 0.58, ft) * Rm;\n  c.e = e;\n  c.rl = R - 0.45 * e;\n  c.kk = (p >= P6 ? mix(0.5, 0.06, ft) : 0.5) * R;\n  c.pin = p >= P6 ? 3 * ft * sqrt(ft) : 0;\n  c.wa = 0.16 * (1 - rho) + 0.025;\n  c.lam = 1 - rho;\n  c.cx = mix(0.85, 1.2, rho);\n  c.fur = ft;\n  c.hdl = c.hd - c.a;\n  // Nucleus: whole until the envelope breaks early in prometaphase.\n  c.rn = 0.44 * R;\n  c.nS = p \u003c P3 ? 1 : 1 - sm(P3, P3 + 0.035, p);\n  c.cond = p \u003c P2 || p >= P6 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dense = p \u003c P1 ? 1 - sm(0, P1, p) : p >= P6 ? 1 : 0;\n  c.dS = sm(0.3, 0.8, ft);\n  c.dr = mix(0.13, 0.22, ft) * B;\n  // Chromosomes gather on the plate; in anaphase the sisters part for the poles.\n  c.pf = sm(P3, P4, p);\n  c.chA = p \u003c P3 ? 0 : sm(P3, P3 + 0.03, p) * (1 - sm(0.25, 0.7, ft));\n  const Lp0 = 0.58 * Rm;\n  c.Lp = p \u003c P5 ? Lp0 : p \u003c P6 ? Lp0 + 0.7 * e : mix(0.79, 0.86, ft) * Rm;\n  c.sh = p \u003c P5 ? 0.5 : p \u003c P6 ? mix(0.5, c.Lp - 1.4, fa) : c.Lp - 1.4;\n  c.sp = p \u003c P3 ? 0 : p \u003c P6 ? sm(P3, P4, p) : 1 - ft;\n  c.ip = p \u003c P5 ? 0 : p \u003c P6 ? fa : 1;\n  c.net = p \u003c P1 ? mix(0.45, 1, sm(0, P1, p)) : p \u003c P2 ? 1 : p \u003c P3 ? 1 - sm(P2, P3, p) : 0;\n  c.ast = p \u003c P2 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dup = p > 0.4 && p \u003c P3 ? 1 : 0;\n  // Centrosome beside the nucleus; in prophase the pair travels round it to the poles.\n  c.cu = (c.rn + 1) * cos(c.cang);\n  c.cv = (c.rn + 1) * sin(c.cang);\n  if (p >= P2) {\n    const g = p \u003c P3 ? sm(P2, P3, p) : 1;\n    c.p1u = mix(c.cu, -c.Lp, g);\n    c.p1v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n    c.p2u = mix(c.cu, c.Lp, g);\n    c.p2v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n  }\n  // The ruffled outline and the leading edge, as a table round the cell.\n  for (let k = 0; k \u003c 64; k++) {\n    const th = (k * PI) / 32 - PI, fr = max(0, cos(th - c.hdl)), F = fr * fr * c.lam;\n    c.fw[k] = F;\n    c.gp[k] = 1 - 0.9 * c.lam * sm(0.4, 0.5, 0.5 + 0.28 * sin(3 * th + 2 * c.w2) + 0.22 * sin(7 * th + c.w3));\n    c.wt[k] = c.rl * c.wa * (0.5 * sin(2 * th + c.w1) + 0.3 * sin(3 * th + c.w2) + 0.2 * sin(5 * th + c.w3 + TT * 0.35) + 0.9 * F);\n  }\n  c.rad = (c.e + c.rl * (1 + 1.6 * c.wa) + 2) * Z;\n  c.ca = cos(c.a);\n  c.sa = sin(c.a);\n}\n\n// What shapeD found at the last point it was asked about, kept for drawCell.\n// A typed array, so writing it for every LED makes no garbage.\nconst G = new Float64Array(3);\n// Signed distance to the cell's outline in its own frame: two discs joined\n// smoothly, ruffled, bulging at the leading edge, pinched at the furrow.\nfunction shapeD(c, u, v) {\n  const e = c.e, rl = c.rl, kk = c.kk;\n  const d1 = hypot(u - e, v) - rl, d2 = hypot(u + e, v) - rl, h = cl(0.5 + (0.5 * (d2 - d1)) / kk, 0, 1);\n  let d = mix(d2, d1, h) - kk * h * (1 - h);\n  const th = (G[1] = atan2(v, u)), q = (th + PI) * (32 / PI), k = floor(q), f = q - k, k0 = k & 63, k1 = (k + 1) & 63;\n  G[0] = mix(c.fw[k0], c.fw[k1], f);\n  G[2] = mix(c.gp[k0], c.gp[k1], f);\n  d -= mix(c.wt[k0], c.wt[k1], f);\n  if (c.pin > 0) d += c.pin * exp(-u * u * 0.4);\n  return d;\n}\n\nfunction put(B, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n    const i = y * W + x;\n    if (v > B[i]) B[i] = v;\n  }\n}\n// A soft dot at a world point; weights sharpened so lines stay one LED wide.\nfunction dot(B, wx, wy, a) {\n  const x = (wx - 32) * Z + 31.5, y = (wy - 64) * Z + 63.5, x0 = floor(x), y0 = floor(y);\n  let fx = x - x0, fy = y - y0;\n  (fx = fx * fx * (3 - 2 * fx)), (fy = fy * fy * (3 - 2 * fy));\n  put(B, x0, y0, a * (1 - fx) * (1 - fy));\n  put(B, x0 + 1, y0, a * fx * (1 - fy));\n  put(B, x0, y0 + 1, a * (1 - fx) * fy);\n  put(B, x0 + 1, y0 + 1, a * fx * fy);\n}\n// A curve in the cell's frame from (au, av) to (bu, bv) bowed through (mu, mv).\nfunction curve(B, c, au, av, mu, mv, bu, bv, a) {\n  const n = max(2, ceil((hypot(mu - au, mv - av) + hypot(bu - mu, bv - mv)) * Z * 2.2));\n  for (let k = 0; k \u003c= n; k++) {\n    const t = k / n, s = 1 - t, u = s * s * au + 2 * s * t * mu + t * t * bu, v = s * s * av + 2 * s * t * mv + t * t * bv;\n    dot(B, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, a);\n  }\n}\nconst line = (B, c, au, av, bu, bv, a) => curve(B, c, au, av, (au + bu) / 2, (av + bv) / 2, bu, bv, a);\n\n// Microtubules grown out from (u0, v0) until they meet the cortex.\nfunction rays(c, u0, v0, n, ang, spread, len, a, sd) {\n  const st = 0.45 / Z;\n  for (let i = 0; i \u003c n; i++) {\n    const h1 = hash(c.sd + sd, i), h2 = hash(i, c.sd + sd + 7);\n    let q = ang + (n > 1 ? ((i + 0.5 * h1) / n - 0.5) * spread : 0), u = u0, v = v0;\n    const L = len * (0.7 + 0.45 * h2), curl = (h1 - 0.5) * 0.3, b = a * (0.9 + 0.25 * h2);\n    for (let s = 0; s \u003c L; s += st) {\n      q += curl * st + 0.12 * sin(s * 0.6 + i * 1.7) * st;\n      u += cos(q) * st;\n      v += sin(q) * st;\n      if (shapeD(c, u, v) > -1.6 - 1.4 * G[0]) break;\n      const nq = c.nS > 0.5 ? hypot(u / (c.rn * 1.1), v / (c.rn * 0.92)) : 2;\n      // Asters wrap round the nucleus until its envelope breaks.\n      if (nq \u003c 1 && sd) break;\n      dot(ST, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, nq \u003c 1 ? b * 0.3 : b);\n    }\n  }\n}\n\nfunction chromatin(c, u, v, cond) {\n  const tu = u * 1.5 + c.ox, tv = v * 1.5 + c.oy;\n  let t = mix(0.35 + 0.9 * nz(tu, tv) - 0.6 * exp(-((u - 0.3 * c.rn) ** 2 + (v + 0.2 * c.rn) ** 2) * 0.9), 1.2, c.dense);\n  if (cond > 0) t = mix(t, 1.5 * sm(0.14, 0.04, abs(nz(tu * 1.4 + 17, tv * 1.4 + 5) - 0.5)), cond);\n  return t;\n}\n\nfunction drawCell(c) {\n  const al = c.al, cx = (c.x - 32) * Z + 32, cy = (c.y - 64) * Z + 64, r = c.rad;\n  const x0 = max(0, floor(cx - r)), x1 = min(W - 1, ceil(cx + r)), y0 = max(0, floor(cy - r)), y1 = min(H - 1, ceil(cy + r));\n  if (x0 > x1 || y0 > y1) return;\n  const iz = 1 / Z, rn = c.rn, na = rn * 1.1, nb = rn * 0.92, r2 = r * r;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      if ((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2 > r2) continue;\n      const dx = (x + 0.5 - cx) * iz, dy = (y + 0.5 - cy) * iz, u = dx * c.ca + dy * c.sa, v = -dx * c.sa + dy * c.ca;\n      const d = shapeD(c, u, v);\n      if (d > 0.8) continue;\n      const i = y * W + x;\n      // Actin: the cortex, broad at the leading edge, and the ring at the furrow.\n      const fr = G[0], th = G[1];\n      let A = sm(-1.2, -0.7, d) * sm(0.35, -0.15, d) * c.cx * G[2];\n      if (fr > 0.05) A = max(A, fr * sm(-2.6, -1.9, d) * sm(0.35, -0.15, d) * (0.55 + 0.6 * nz(th * 20.372 + c.oy, c.ox + d)));\n      if (c.lam > 0.05 && d \u003c -1.2) {\n        // Stress fibres along the cell's long axis, some broken off short.\n        const q = (v + c.tilt * u) / 2.7 + c.ox, k = floor(q + 0.5), h = hash(c.sd + 11, k), e = (hash(k, c.sd) - 0.5) * c.rl;\n        if (h > 0.55 && abs(u - e) \u003c c.rl * (0.3 + 0.7 * h) && hypot(u / na, v / nb) > 1.15) A = max(A, c.lam * sm(0.62, 0.22, abs(q - k) * 2.7) * sm(-1.2, -2.2, d));\n      }\n      if (c.fur > 0) A = max(A, 1.3 * c.fur * exp(-u * u * 1.4) * sm(0.3, -0.5, d));\n      if (A * al > SA[i]) SA[i] = A * al;\n      if (d \u003c 0 && al > HZ[i]) HZ[i] = al * sm(0.5, -2, d);\n      // DNA: an interphase nucleus, or the two that reform in telophase.\n      let D = 0;\n      if (c.nS > 0) {\n        const dn = (hypot(u / na, v / nb) - 1) * nb;\n        if (dn \u003c 0.6) D = sm(0.55, -0.45, dn) * c.nS * chromatin(c, u, v, c.cond);\n      }\n      if (c.dS > 0) {\n        const dn = hypot(abs(u) - c.e, v) - c.dr;\n        if (dn \u003c 0.6) D = max(D, sm(0.55, -0.45, dn) * c.dS * chromatin(c, abs(u) - c.e, v, c.cond));\n      }\n      if (D * al > SD[i]) SD[i] = D * al;\n    }\n  const p = c.p, Rm = 0.8 * c.B;\n  // Interphase network from the centrosome.\n  if (c.net > 0.02) rays(c, c.cu, c.cv, c.nf, c.cang, TAU, c.net * 1.6 * c.rl, al, 0);\n  if (p \u003c P2) {\n    dot(SC, c.x + c.cu * c.ca - c.cv * c.sa, c.y + c.cu * c.sa + c.cv * c.ca, 1.2 * al);\n    if (c.dup) dot(SC, c.x + (c.cu + 0.8) * c.ca - c.cv * c.sa, c.y + (c.cu + 0.8) * c.sa + c.cv * c.ca, 1.2 * al);\n  } else {\n    // Asters, and the spindle between its poles.\n    const spr = mix(TAU, 2.2, c.sp), la = c.ast * c.rl * 1.2;\n    rays(c, c.p1u, c.p1v, 9, PI, spr, la, al, 3);\n    rays(c, c.p2u, c.p2v, 9, 0, spr, la, al, 5);\n    dot(SC, c.x + c.p1u * c.ca - c.p1v * c.sa, c.y + c.p1u * c.sa + c.p1v * c.ca, 1.25 * al);\n    dot(SC, c.x + c.p2u * c.ca - c.p2v * c.sa, c.y + c.p2u * c.sa + c.p2v * c.ca, 1.25 * al);\n    const hw = 0.42 * Rm, ch = c.ch, pf = c.pf * c.pf * (3 - 2 * c.pf);\n    for (let j = 0; j \u003c NCH; j++) {\n      const cu = mix(ch[j * 4] * c.rn, 0.25 * sin(TT * 3.5 + j), pf), cv = mix(ch[j * 4 + 1] * c.rn, ch[j * 4 + 2] * hw, pf), o = mix(ch[j * 4 + 3], PI / 2, pf);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const su = cu + s * c.sh * mix(-sin(o), 1, pf), sv = cv + s * c.sh * mix(cos(o), 0, pf);\n        if (c.sp > 0.02) curve(ST, c, s * c.Lp, 0, (s * c.Lp + su) / 2, sv * 1.3, su, sv, c.sp * al * 0.95);\n        if (c.chA > 0.02) {\n          // Sister chromatids, arms trailing back toward the plate in anaphase.\n          const tr = c.fa, du = mix(cos(o), -s * 0.9, tr) * 1.1, dv = mix(sin(o), 0.45 * (cv \u003c 0 ? -1 : 1), tr) * 1.1;\n          line(SD, c, su - du * (1 - tr), sv - dv * (1 - tr), su + du, sv + dv, 1.3 * c.chA * al);\n        }\n      }\n    }\n    // Central spindle, gathered into the midbody as the furrow closes.\n    if (c.ip > 0.02) {\n      const x = max(1.4, (c.sh - 0.8) * (1 - c.ft) + 1.6 * c.ft);\n      for (let k = -1; k \u003c= 1; k++) line(ST, c, -x, k * 1.1 * (1 - c.ft), x, k * 1.1 * (1 - c.ft), c.ip * al * (k ? 0.85 : 1.1));\n    }\n  }\n  // The midbody bridge back to the sister cell, with its ring.\n  if (c.br > 0.02) {\n    const dx = c.bx - c.x, dy = c.by - c.y, L = hypot(dx, dy), r0 = c.rl * 0.8;\n    if (L > r0) {\n      const ux = dx / L, uy = dy / L, n = ceil((L - r0) * Z * 2.2);\n      for (let k = 0; k \u003c= n; k++) dot(ST, c.x + ux * (r0 + ((L - r0) * k) / n), c.y + uy * (r0 + ((L - r0) * k) / n), c.br * al);\n      dot(SA, c.bx, c.by, 1.2 * c.br * al);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = { cells: [], t: 0, k1: -1, pal: new Float32Array(12), cool: 0, n: 0 };\n}\n\n// The emptiest spot in the field: best of a dozen tries.\nfunction freeSpot(S) {\n  let bx = 32, by = 64, bd = -1;\n  for (let k = 0; k \u003c 14; k++) {\n    const x = 6 + rnd() * 52, y = 6 + rnd() * 116;\n    let d = min(x + 6, 70 - x, y + 6, 134 - y) * 0.6;\n    for (const c of S.cells) d = min(d, hypot(c.x - x, c.y - y));\n    if (d > bd) (bd = d), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// Everything here runs on the slide's own clock, ds seconds a step.\nfunction step(S, ds) {\n  const cells = S.cells, n = S.n;\n  S.t += ds;\n  TT = S.t;\n  for (let i = cells.length - 1; i >= 0; i--) {\n    const c = cells[i];\n    c.p += (ds * c.rate) / 30;\n    if (c.br > 0) {\n      c.br = c.p \u003c 0.13 ? 1 - sm(0.07, 0.13, c.p) : 0;\n      if (hypot(c.bx - c.x, c.by - c.y) > c.rl * 2.4) c.br = max(0, c.br - ds * 2);\n    }\n    if (c.p >= 1) {\n      // Abscission: two daughters, each half the size, moving apart.\n      cells.splice(i, 1);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const d = newCell(c.x + s * c.e * c.ca, c.y + s * c.e * c.sa, 0, c.B * (0.95 + 0.1 * rnd()));\n        (d.vx = s * c.ca * 0.7), (d.vy = s * c.sa * 0.7), (d.br = 1), (d.bx = c.x), (d.by = c.y), (d.al = c.al), (d.out = c.out);\n        // Each daughter keeps its centrosome on the far side from its sister.\n        d.hd = c.a + (s \u003c 0 ? PI : 0) + (rnd() - 0.5);\n        d.cang = c.a + (s \u003c 0 ? PI : 0) - d.a;\n        cells.push(d);\n      }\n      continue;\n    }\n    // Crawling: interphase cells wander, round cells sit still.\n    const crawl = c.lam * 0.7;\n    c.hd += (rnd() - 0.5) * ds * 1.2;\n    c.vx *= exp(-ds * 0.6);\n    c.vy *= exp(-ds * 0.6);\n    c.x += (c.vx + cos(c.hd) * crawl) * ds;\n    c.y += (c.vy + sin(c.hd) * crawl) * ds;\n    // The walls turn a cell back and nudge it in.\n    const wx = sm(4, -3, c.x) - sm(60, 67, c.x), wy = sm(4, -3, c.y) - sm(124, 131, c.y);\n    if (wx || wy) {\n      c.hd = atan2(sin(c.hd) + wy * ds * 3, cos(c.hd) + wx * ds * 3);\n      (c.x += wx * ds * 2), (c.y += wy * ds * 2);\n    }\n    if (c.out) c.al -= ds * 0.45;\n    else c.al = min(1, c.al + ds * 0.5);\n  }\n  // Cells push gently apart.\n  for (let i = 0; i \u003c cells.length; i++)\n    for (let j = i + 1; j \u003c cells.length; j++) {\n      const a = cells[i], b = cells[j], dx = b.x - a.x, dy = b.y - a.y, d = hypot(dx, dy) + 1e-6, m = 0.8 * (a.rl + b.rl + a.e + b.e);\n      if (d \u003c 1.8 * m) {\n        const f = (((d \u003c m ? m - d : 0) * 0.5 + (1.8 * m - d) * 0.15) / d) * ds;\n        (a.x -= dx * f), (a.y -= dy * f), (b.x += dx * f), (b.y += dy * f);\n      }\n    }\n  for (let i = cells.length - 1; i >= 0; i--) if (cells[i].al \u003c= 0 && cells[i].out) cells.splice(i, 1);\n  // Keep the count: a crowded interphase cell lifts away, or a new one settles in.\n  let live = 0;\n  for (const c of cells) live += c.out ? 0 : 1;\n  S.cool -= ds;\n  if (live > n && (S.cool \u003c= 0 || live > n + 1)) {\n    let best = null, bs = -1;\n    for (const a of cells) {\n      if (a.out || a.p \u003c 0.14 || a.p > P2 - 0.04) continue;\n      let s = 0;\n      for (const b of cells) if (b !== a) s += max(0, a.rl + b.rl - hypot(a.x - b.x, a.y - b.y));\n      s += max(0, 10 - min(a.x, 64 - a.x, a.y, 128 - a.y));\n      if (s > bs) (bs = s), (best = a);\n    }\n    if (best) (best.out = 1), (S.cool = 0.8);\n  } else if (live \u003c n && S.cool \u003c= 0) {\n    const [x, y] = freeSpot(S), c = newCell(x, y, 0.12 + 0.6 * rnd());\n    c.al = 0;\n    cells.push(c);\n    S.cool = 0.5;\n  }\n  for (const c of cells) geo(c);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 9, 0.06], speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 9, 17));\n  Z = 1 + 1.15 * cl(k[3], 0, 1) ** 1.3;\n  if (k[0] !== S.k1) {\n    const s = cl(k[0], 0, 1) * 3, i = min(2, floor(s)), f = sm(0, 1, s - i);\n    for (let j = 0; j \u003c 4; j++) {\n      let a = STAINS[i][j], b = STAINS[i + 1][j];\n      if (b - a > 180) a += 360;\n      if (a - b > 180) b += 360;\n      hueRGB(mix(a, b, f), S.pal, j * 3);\n    }\n    S.k1 = k[0];\n  }\n  if (!S.cells.length) {\n    for (let i = 0; i \u003c S.n; i++) {\n      const [x, y] = freeSpot(S);\n      S.cells.push(newCell(x, y, (i + 0.8 * rnd()) / S.n));\n    }\n    for (const c of S.cells) geo(c);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    let best = null, bd = 1e9;\n    for (const c of S.cells) {\n      const d = hypot(c.x - 32, c.y - 64);\n      if (!c.out && c.p > P1 && c.p \u003c P2 && d \u003c bd) (bd = d), (best = c);\n    }\n    if (best) best.p = P2;\n  }\n  step(S, cl(dt || 0, 0, 0.1) * speed * 0.5);\n}\n\n// Box blur of radius 2 across and then down, for the glow.\nfunction blur(src, dst) {\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = y * W * 3 + ch;\n      for (let x = -2; x \u003c W; x++) {\n        if (x + 2 \u003c W) s += src[o + (x + 2) * 3];\n        if (x - 3 >= 0) s -= src[o + (x - 3) * 3];\n        if (x >= 0) dst[o + x * 3] = s / 5;\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = x * 3 + ch;\n      for (let y = -2; y \u003c H; y++) {\n        if (y + 2 \u003c H) s += dst[o + (y + 2) * W * 3];\n        if (y - 3 >= 0) s -= dst[o + (y - 3) * W * 3];\n        if (y >= 0) src[o + y * W * 3] = s / 5;\n      }\n    }\n}\n\n// Hard knee: a dye is either lit near full or left under the glow.\nconst knee = (v) => (v \u003c= 0.28 ? 0 : v >= 0.52 ? 255 : 255 * sm(0.28, 0.52, v));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.cells.length) return;\n  SA.fill(0), ST.fill(0), SD.fill(0), SC.fill(0), HZ.fill(0);\n  TT = S.t;\n  for (const c of S.cells) drawCell(c);\n  const P = S.pal;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = SA[i], t = ST[i], d = SD[i], z = SC[i];\n    if (a + t + d + z === 0) {\n      LIN[o] = LIN[o + 1] = LIN[o + 2] = BL[o] = BL[o + 1] = BL[o + 2] = 0;\n      continue;\n    }\n    LIN[o] = BL[o] = min(1, a * P[6] + t * P[3] + d * P[0] + z * P[9]);\n    LIN[o + 1] = BL[o + 1] = min(1, a * P[7] + t * P[4] + d * P[1] + z * P[10]);\n    LIN[o + 2] = BL[o + 2] = min(1, a * P[8] + t * P[5] + d * P[2] + z * P[11]);\n  }\n  blur(BL, TMP);\n  // The glow and a faint body haze stay under 21, below what counts as lit.\n  const h0 = 13 * P[3], h1 = 13 * P[4], h2 = 13 * P[5];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const h = HZ[i];\n    display.setPixel(\n      i & 63,\n      i >> 6,\n      max(knee(LIN[o]), min(21, 24 * BL[o] + h * h0)) | 0,\n      max(knee(LIN[o + 1]), min(21, 24 * BL[o + 1] + h * h1)) | 0,\n      max(knee(LIN[o + 2]), min(21, 24 * BL[o + 2] + h * h2)) | 0,\n    );\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stain","min":0,"max":1,"about":"The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower."},{"name":"Cells","min":9,"max":17,"about":"How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in."},{"name":"Zoom","min":0,"max":1,"about":"The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show."}],"start":[0,2,9,0.06],"measures":{"motion":0.3411,"detail":0.1419,"edges":0.8838,"complexity":0.8038,"coverage":0.2626,"colour":0.5399,"drift":0.2023},"knobResponse":[0.1544,0.1632,0.2075,0.2066]},{"slug":"moire-rings","title":"Moire Rings","family":"wave","round":1,"note":"동심원 두 벌이 서로 지나가고, 어긋나는 자리에 아무도 그리지 않은 무늬가 생겨요.","idea":"Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.","buttons":"K1 tap swaps which set of rings is drawn bright.","code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-moire-rings","type":"code","name":"moire-rings","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two-colour pair around the colour wheel."},{"name":"Speed","min":0.1,"max":6,"about":"How fast the two centres orbit."},{"name":"Rings","min":5,"max":16,"about":"Ring spacing in LEDs; small is a fine moire, large is a few fat bands."},{"name":"Spread","min":-1,"max":1,"about":"How far apart the two centres travel, and below 0 the second one turns the other way."}],"start":[0,2,5,0.06],"measures":{"motion":1.5703,"detail":0.2108,"edges":1,"complexity":0.1822,"coverage":0.7502,"colour":0.4676,"drift":0.1626},"knobResponse":[0.2556,0.2849,0.3431,0.2821]},{"slug":"mood-tint","title":"Mood Tint","family":"cosmetic","round":34,"note":"판 전체가 열에 색이 바뀌는 짙은 보라 코팅이에요. 보이지 않는 손끝이 누른 자리마다 지문 결이 든 옅은 난초색 타원이 피고, 열이 퍼지며 결부터 흐려지고 이웃 자국과 엉겨 붙었다가 다시 보라 속으로 줄어들어요. K1 을 누르면 손바닥 하나가 1.1초 동안 눌러요.","idea":"A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.","buttons":"K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.","code":"// ===== Patternflow pattern =====\n// Title:   Mood Tint\n// Family:  cosmetic\n// Idea:    A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after thermochromic lip tints and mood nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1\n//\n// Knob 1: Hue. The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive.\n// Knob 2: Speed. At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster.\n// Knob 3: Warmth. How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together.\n// Knob 4: Blend. How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring.\n// Buttons: K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Temperatures are in units of a fingertip at Warmth 0 above the room: the\n// room is 0, a fingertip 1. The coat turns at THETA.\nconst THETA = 0.4;\n// Heat diffusion in LED^2 a second and Newton cooling a second, at Speed 2.\nconst ALPHA = 1.1, COOL = 0.32;\n// How fast the coat under a pressed fingertip takes its warmth, a second.\nconst GRIP = 7;\n// Hue of the cool coat at Hue 0: violet. The warm coat is a paler, pinker shade.\nconst H0 = 0.76;\n// The colour table spans temperatures -0.2 to 1.8.\nconst LUT = 512, T0 = -0.2, T1 = 1.8;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, warmth: 0, blend: 0.06, warm: false, clock: 0, nextPress: 0,\n    T: new Float32Array(N), U: new Float32Array(N), room: new Float32Array(N),\n    presses: [], lut: new Uint8Array(LUT * 3), lutKey: \"\", c: [0, 0, 0], c2: [0, 0, 0],\n  };\n  const S = params.s;\n  // The room is not quite even: a soft field of +-0.05 that only the cool\n  // shade shows.\n  const g = [];\n  for (let i = 0; i \u003c 5 * 9; i++) g.push(random() * 2 - 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / W) * 4, v = (y / H) * 8, i = floor(u), j = floor(v), fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * 5 + i], b = g[j * 5 + i + 1], c = g[(j + 1) * 5 + i], d = g[(j + 1) * 5 + i + 1];\n      S.room[y * W + x] = 0.05 * ((a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv);\n    }\n}\n\n// A fingertip pad: an oval about 11 by 16 LEDs, tilted, with whorl ridges\n// 2.3 LEDs apart round a core a little below its middle.\nfunction fingertip(x, y) {\n  return {\n    x, y, rx: 5 + random() * 1.5, ry: 7 + random() * 1.8, a: (random() - 0.5) * 1.1,\n    core: 1 + random() * 2, ph: random() * 6.28, lam: 2.8, palm: false,\n    t: 0, dur: 0.45 + random() * 0.3,\n  };\n}\n\n// The coat's colour at each temperature, rebuilt when a knob moves it.\nfunction buildLut(S) {\n  const key = S.hue.toFixed(3) + S.blend.toFixed(3);\n  if (key === S.lutKey) return;\n  S.lutKey = key;\n  const h = S.hue + H0, hh = h - floor(h), c = S.c, c2 = S.c2;\n  // Orange and yellow go brown or olive when deep, so round them the cool\n  // shade stays bright.\n  const lift = sm(0.0, 0.06, hh) * (1 - sm(0.24, 0.33, hh));\n  const width = 0.012 + 0.6 * S.blend * S.blend;\n  for (let i = 0; i \u003c LUT; i++) {\n    const T = T0 + ((T1 - T0) * i) / (LUT - 1);\n    const m = sm(THETA - width, THETA + width, T);\n    // Cool: deeper the colder it is, a little lighter just short of turning.\n    const vc = 0.44 + 0.34 * lift + 0.12 * sm(-0.1, THETA, T);\n    hsv(h, 0.9 - 0.1 * lift, vc, c);\n    // Warm: pale, and paler the hotter, so a ridge pressed hot is a whiter line.\n    const hot = sm(THETA, THETA + 0.7, T);\n    hsv(h + 0.08, (0.5 - 0.42 * hot) * (1 - 0.5 * lift), 1, c2);\n    for (let k = 0; k \u003c 3; k++) S.lut[i * 3 + k] = round(255 * (c[k] + (c2[k] - c[k]) * m));\n  }\n}\n\n// One moment of the coat: presses warm it, heat spreads and drains away.\nfunction step(S, dt) {\n  const { T, U, room } = S;\n  const Tf = 1.6 ** S.warmth;\n  // Fingertips arrive in little groups of one to three, about every 0.42 s.\n  S.nextPress -= dt;\n  if (S.nextPress \u003c= 0) {\n    S.nextPress = 0.1 + random() * 0.35;\n    const n = random() \u003c 0.55 ? 1 : random() \u003c 0.7 ? 2 : 3;\n    const x0 = 6 + random() * (W - 12), y0 = 8 + random() * (H - 16);\n    for (let i = 0; i \u003c n; i++) S.presses.push(fingertip(x0 + (i - (n - 1) / 2) * 12 + (random() - 0.5) * 3, y0 + (random() - 0.5) * 8));\n  }\n  for (const P of S.presses) {\n    P.t += dt;\n    const env = sm(0, 0.12, P.t) * (1 - sm(P.dur - 0.1, P.dur, P.t));\n    if (env \u003c= 0) continue;\n    const ca = cos(P.a), sa = sin(P.a), R = max(P.rx, P.ry) + 2;\n    const k = 1 - exp(-GRIP * dt * env);\n    for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, P.y + R); y++)\n      for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, P.x + R); x++) {\n        const dx = x - P.x, dy = y - P.y, u = dx * ca + dy * sa, v = -dx * sa + dy * ca;\n        const rho = sqrt((u / P.rx) ** 2 + (v / P.ry) ** 2);\n        if (rho >= 1) continue;\n        let ridge;\n        if (P.palm) ridge = 0.5 + 0.5 * cos(u * 0.35 + 2.2 * sin(v * 0.11 + P.ph)) * cos(v * 0.5 + sin(u * 0.2));\n        else {\n          const vv = v - P.core, rw = sqrt(u * u + vv * vv * 0.7) + 0.8 * sin(atan2(vv, u) + P.ph);\n          ridge = 0.5 + 0.5 * cos((2 * PI * rw) / P.lam);\n        }\n        const s = (1 - sm(0.72, 1, rho)) * (0.58 + 0.42 * ridge);\n        const p = y * W + x, target = Tf * s;\n        if (target > T[p]) T[p] += (target - T[p]) * k;\n      }\n  }\n  S.presses = S.presses.filter((P) => P.t \u003c P.dur);\n  // Heat equation on the panel, its edges insulated, and Newton cooling\n  // toward the room.\n  const a = ALPHA * dt, c = COOL * dt;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p];\n      const l = x > 0 ? T[p - 1] : t, r = x \u003c W - 1 ? T[p + 1] : t, u = y > 0 ? T[p - W] : t, d = y \u003c H - 1 ? T[p + W] : t;\n      U[p] = t + a * (l + r + u + d - 4 * t) - c * (t - room[p]);\n    }\n  T.set(U);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.warmth = cl(k[2], -1, 1);\n  S.blend = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a coat that has been pressed for four seconds.\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const P = fingertip(10 + random() * (W - 20), 22 + random() * (H - 44));\n    Object.assign(P, { rx: 17, ry: 23, a: (random() - 0.5) * 0.5, palm: true, dur: 1.1 });\n    S.presses.push(P);\n  }\n  // Time on the coat runs at Speed / 2; steps stay under 0.07 s so the heat\n  // equation holds steady.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 0.07);\n    step(S, h);\n    left -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  buildLut(S);\n  const { T, lut } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = round(((cl(T[y * W + x], T0, T1) - T0) / (T1 - T0)) * (LUT - 1)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n}\n","layer":{"id":"layer-mood-tint","type":"code","name":"mood-tint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mood Tint\n// Family:  cosmetic\n// Idea:    A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after thermochromic lip tints and mood nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1\n//\n// Knob 1: Hue. The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive.\n// Knob 2: Speed. At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster.\n// Knob 3: Warmth. How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together.\n// Knob 4: Blend. How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring.\n// Buttons: K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Temperatures are in units of a fingertip at Warmth 0 above the room: the\n// room is 0, a fingertip 1. The coat turns at THETA.\nconst THETA = 0.4;\n// Heat diffusion in LED^2 a second and Newton cooling a second, at Speed 2.\nconst ALPHA = 1.1, COOL = 0.32;\n// How fast the coat under a pressed fingertip takes its warmth, a second.\nconst GRIP = 7;\n// Hue of the cool coat at Hue 0: violet. The warm coat is a paler, pinker shade.\nconst H0 = 0.76;\n// The colour table spans temperatures -0.2 to 1.8.\nconst LUT = 512, T0 = -0.2, T1 = 1.8;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, warmth: 0, blend: 0.06, warm: false, clock: 0, nextPress: 0,\n    T: new Float32Array(N), U: new Float32Array(N), room: new Float32Array(N),\n    presses: [], lut: new Uint8Array(LUT * 3), lutKey: \"\", c: [0, 0, 0], c2: [0, 0, 0],\n  };\n  const S = params.s;\n  // The room is not quite even: a soft field of +-0.05 that only the cool\n  // shade shows.\n  const g = [];\n  for (let i = 0; i \u003c 5 * 9; i++) g.push(random() * 2 - 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / W) * 4, v = (y / H) * 8, i = floor(u), j = floor(v), fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * 5 + i], b = g[j * 5 + i + 1], c = g[(j + 1) * 5 + i], d = g[(j + 1) * 5 + i + 1];\n      S.room[y * W + x] = 0.05 * ((a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv);\n    }\n}\n\n// A fingertip pad: an oval about 11 by 16 LEDs, tilted, with whorl ridges\n// 2.3 LEDs apart round a core a little below its middle.\nfunction fingertip(x, y) {\n  return {\n    x, y, rx: 5 + random() * 1.5, ry: 7 + random() * 1.8, a: (random() - 0.5) * 1.1,\n    core: 1 + random() * 2, ph: random() * 6.28, lam: 2.8, palm: false,\n    t: 0, dur: 0.45 + random() * 0.3,\n  };\n}\n\n// The coat's colour at each temperature, rebuilt when a knob moves it.\nfunction buildLut(S) {\n  const key = S.hue.toFixed(3) + S.blend.toFixed(3);\n  if (key === S.lutKey) return;\n  S.lutKey = key;\n  const h = S.hue + H0, hh = h - floor(h), c = S.c, c2 = S.c2;\n  // Orange and yellow go brown or olive when deep, so round them the cool\n  // shade stays bright.\n  const lift = sm(0.0, 0.06, hh) * (1 - sm(0.24, 0.33, hh));\n  const width = 0.012 + 0.6 * S.blend * S.blend;\n  for (let i = 0; i \u003c LUT; i++) {\n    const T = T0 + ((T1 - T0) * i) / (LUT - 1);\n    const m = sm(THETA - width, THETA + width, T);\n    // Cool: deeper the colder it is, a little lighter just short of turning.\n    const vc = 0.44 + 0.34 * lift + 0.12 * sm(-0.1, THETA, T);\n    hsv(h, 0.9 - 0.1 * lift, vc, c);\n    // Warm: pale, and paler the hotter, so a ridge pressed hot is a whiter line.\n    const hot = sm(THETA, THETA + 0.7, T);\n    hsv(h + 0.08, (0.5 - 0.42 * hot) * (1 - 0.5 * lift), 1, c2);\n    for (let k = 0; k \u003c 3; k++) S.lut[i * 3 + k] = round(255 * (c[k] + (c2[k] - c[k]) * m));\n  }\n}\n\n// One moment of the coat: presses warm it, heat spreads and drains away.\nfunction step(S, dt) {\n  const { T, U, room } = S;\n  const Tf = 1.6 ** S.warmth;\n  // Fingertips arrive in little groups of one to three, about every 0.42 s.\n  S.nextPress -= dt;\n  if (S.nextPress \u003c= 0) {\n    S.nextPress = 0.1 + random() * 0.35;\n    const n = random() \u003c 0.55 ? 1 : random() \u003c 0.7 ? 2 : 3;\n    const x0 = 6 + random() * (W - 12), y0 = 8 + random() * (H - 16);\n    for (let i = 0; i \u003c n; i++) S.presses.push(fingertip(x0 + (i - (n - 1) / 2) * 12 + (random() - 0.5) * 3, y0 + (random() - 0.5) * 8));\n  }\n  for (const P of S.presses) {\n    P.t += dt;\n    const env = sm(0, 0.12, P.t) * (1 - sm(P.dur - 0.1, P.dur, P.t));\n    if (env \u003c= 0) continue;\n    const ca = cos(P.a), sa = sin(P.a), R = max(P.rx, P.ry) + 2;\n    const k = 1 - exp(-GRIP * dt * env);\n    for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, P.y + R); y++)\n      for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, P.x + R); x++) {\n        const dx = x - P.x, dy = y - P.y, u = dx * ca + dy * sa, v = -dx * sa + dy * ca;\n        const rho = sqrt((u / P.rx) ** 2 + (v / P.ry) ** 2);\n        if (rho >= 1) continue;\n        let ridge;\n        if (P.palm) ridge = 0.5 + 0.5 * cos(u * 0.35 + 2.2 * sin(v * 0.11 + P.ph)) * cos(v * 0.5 + sin(u * 0.2));\n        else {\n          const vv = v - P.core, rw = sqrt(u * u + vv * vv * 0.7) + 0.8 * sin(atan2(vv, u) + P.ph);\n          ridge = 0.5 + 0.5 * cos((2 * PI * rw) / P.lam);\n        }\n        const s = (1 - sm(0.72, 1, rho)) * (0.58 + 0.42 * ridge);\n        const p = y * W + x, target = Tf * s;\n        if (target > T[p]) T[p] += (target - T[p]) * k;\n      }\n  }\n  S.presses = S.presses.filter((P) => P.t \u003c P.dur);\n  // Heat equation on the panel, its edges insulated, and Newton cooling\n  // toward the room.\n  const a = ALPHA * dt, c = COOL * dt;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p];\n      const l = x > 0 ? T[p - 1] : t, r = x \u003c W - 1 ? T[p + 1] : t, u = y > 0 ? T[p - W] : t, d = y \u003c H - 1 ? T[p + W] : t;\n      U[p] = t + a * (l + r + u + d - 4 * t) - c * (t - room[p]);\n    }\n  T.set(U);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.warmth = cl(k[2], -1, 1);\n  S.blend = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a coat that has been pressed for four seconds.\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const P = fingertip(10 + random() * (W - 20), 22 + random() * (H - 44));\n    Object.assign(P, { rx: 17, ry: 23, a: (random() - 0.5) * 0.5, palm: true, dur: 1.1 });\n    S.presses.push(P);\n  }\n  // Time on the coat runs at Speed / 2; steps stay under 0.07 s so the heat\n  // equation holds steady.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 0.07);\n    step(S, h);\n    left -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  buildLut(S);\n  const { T, lut } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = round(((cl(T[y * W + x], T0, T1) - T0) / (T1 - T0)) * (LUT - 1)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster."},{"name":"Warmth","min":-1,"max":1,"about":"How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together."},{"name":"Blend","min":0,"max":1,"about":"How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring."}],"start":[0,2,0,0.06],"measures":{"motion":0.0548,"detail":0.0134,"edges":0.483,"complexity":0.652,"coverage":1,"colour":0.1889,"drift":0.0997},"knobResponse":[0.4028,0.1176,0.1081,0.0933]},{"slug":"moth-lamp","title":"Moth Lamp","family":"insect","round":20,"note":"벽돌집 처마 밑 사슬에 매달린 옛 등이 흔들리고, 나방이 어둠에서 나선을 그리며 날아와 등을 돌다가 유리와 불빛 든 벽돌에 날개를 펴고 앉아요. K1 을 누르면 박쥐가 빛 속으로 날아들어 나방 한 마리를 채 가요.","idea":"An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.","buttons":"K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.","code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","layer":{"id":"layer-moth-lamp","type":"code","name":"moth-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds."},{"name":"Moths","min":12,"max":120,"about":"Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them."},{"name":"Breeze","min":-1,"max":1,"about":"A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers."}],"start":[0,2,12,0.06],"measures":{"motion":0.1073,"detail":0.0382,"edges":0.2646,"complexity":2.2012,"coverage":0.2737,"colour":0.0944,"drift":0.0456},"knobResponse":[0.0525,0.0467,0.0451,0.0578]},{"slug":"moving-sofa","title":"Moving Sofa","family":"geometry","round":34,"note":"폭 14 LED 의 ㄇ자 복도를 해머슬리 소파가 오른쪽 다리로 올라와 모퉁이를 돌고, 위를 건너 왼쪽 다리로 내려가요. 모퉁이마다 안쪽 모서리가 소파의 금빛 반원 홈 안을 지나가고, 소파 뒤에 옅게 붙어 온 띠가 벽에 깎여 나가 소파 모양만 남아요. K3 은 홈의 반지름을 0 의 반원판에서 넓이 2 인 소파까지 바꿔요.","idea":"Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Moving Sofa\n// Family:  geometry\n// Idea:    Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: moving sofa problem (Leo Moser, 1966) and Hammersley's sofa (John Hammersley, 1968), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1\n//\n// Knob 1: Hue. Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim.\n// Knob 2: Speed. At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds.\n// Knob 3: Hole. The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole.\n// Knob 4: Trail. How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, abs, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (t) => {\n  t = cl(t, 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// One corner of the hallway, in widths: the arm the sofa comes along is\n// 0 \u003c= wy \u003c= 1, wx \u003c= 1, the arm it leaves by 0 \u003c= wx \u003c= 1, wy \u003c= 1, the\n// inner corner the origin and the outer corner (1, 1). On the panel the right\n// corner has wx running up the right leg and wy across, X = XC + U wy and\n// Y = YC - U wx; the left corner is its mirror image, X -> 64 - X.\nconst U = 14, XC = 49, YC = 15;\n\n// Hole 0 is r = 2/pi, where the area pi/2 + 2r - pi r^2 / 2 is largest.\n// Gerver's sofa of 1992, area 2.2195, is larger still and is not drawn here.\nconst R_OPT = 2 / PI;\nconst holeRadius = (k) => (k \u003c 0 ? R_OPT * (1 + k) : R_OPT + (1 - R_OPT) * k);\n\n// Signed distance, in widths, to Hammersley's sofa with hole radius r: the\n// points with y >= 0 within 1 of the segment from (-r, 0) to (r, 0), less\n// the half disc of radius r on the origin. Negative inside. Below the flat\n// side it is the distance to the two flat pieces, so a sharp end of the hole\n// touching a wall does not bleed into the wall's LED.\nfunction sdf(x, y, r) {\n  const ax = abs(x);\n  if (y \u003c 0) {\n    const ex = ax \u003c r ? r - ax : ax > r + 1 ? ax - r - 1 : 0;\n    return sqrt(ex * ex + y * y);\n  }\n  const dx = ax > r ? ax - r : 0;\n  return max(-y, sqrt(dx * dx + y * y) - 1, r - sqrt(x * x + y * y));\n}\n// Whether the sofa's nearest edge to (x, y) is the hole's semicircle.\nconst notch = (x, y, r) => r > 0.02 && x * x + y * y \u003c (r + 0.12) * (r + 0.12) && abs(x) \u003c r + 0.04;\n\n// How far (x, y), in the sofa's frame, lies inside every position the\n// hallway has taken in a turn so far, th of the way round, starting from the\n// strip behind the sofa's front: negative once some wall has passed through\n// it. The outer wall a = 1 has kept (x - r, y) within 1 of the origin in the\n// directions 0..th, the wall b = 1 has done the same for (x + r, y) in the\n// directions 90..90+th degrees, and the inner corner has cut from the hole\n// the part below the chord from (-r, 0) at angle th. At th = 90 degrees\n// this is the sofa.\nfunction block(x, y, th, r) {\n  const ct = cos(th), st = sin(th);\n  let s = min(y, 1 - y, r + 1 - x);\n  const vx = x - r, vy = y;\n  if (vy >= 0 && vx * st - vy * ct >= 0) s = min(s, 1 - sqrt(vx * vx + vy * vy));\n  else s = min(s, 1 - vx, 1 - vx * ct - vy * st);\n  const wx = x + r, wy = y;\n  if (wx \u003c= 0 && wy * st + wx * ct >= 0) s = min(s, 1 - sqrt(wx * wx + wy * wy));\n  else s = min(s, 1 - wy, 1 + wx * st - wy * ct);\n  return min(s, max(sqrt(x * x + y * y) - r, -wx * st + wy * ct));\n}\n\n// The motion, seen from the sofa: the hallway is turned through th and its\n// inner corner sits at c. While th runs from 0 to 90 degrees c runs round\n// the hole's semicircle, c = r (cos 2th, sin 2th). By Thales the inner walls\n// then pass through the hole's two ends, and the outer walls stay tangent to\n// the two quarter discs, so the sofa touches both outer walls all the way\n// round. Phases, in seconds at Speed 2: up the right leg, round the right\n// corner, across the top, round the left corner (the right one mirrored and\n// run backwards), down the left leg.\nconst TA = 4.4, TB = 2.4, TC = 1.4;\nconst T1 = TA, T2 = T1 + TB, T3 = T2 + TC, T4 = T3 + TB, LIFE = T4 + TA;\n// A new sofa sets off as the last one starts round the right corner, so it\n// reaches that corner as the last one leaves the left.\nconst PERIOD = TB + TC + TB;\n// Up the leg from below the panel, and the run across the top.\nconst DA = 9.2, EC = (XC - (64 - XC)) / U;\nconst KE = 0.3, VE = 1 / (1 - KE / 2);\n// Constant speed, then a stop over the last KE of the way.\nfunction easeOut(t) {\n  t = cl(t, 0, 1);\n  if (t \u003c= 1 - KE) return VE * t;\n  const s = t - (1 - KE);\n  return VE * (1 - KE + s - (s * s) / (2 * KE));\n}\nfunction turn(th, r, o) {\n  o.th = th;\n  o.cx = r * cos(2 * th);\n  o.cy = r * sin(2 * th);\n}\n// Pose at phase ph: o.m is 1 when it is given in the left corner's mirrored\n// frame.\nfunction pose(ph, r, o) {\n  o.m = 0;\n  o.cy = 0;\n  if (ph \u003c T1) {\n    o.th = 0;\n    o.cx = r + DA * (1 - easeOut(ph / TA));\n  } else if (ph \u003c T2) turn((PI / 2) * sm((ph - T1) / TB), r, o);\n  else if (ph \u003c T3) {\n    o.th = PI / 2;\n    o.cx = -r - (EC - 2 * r) * sm((ph - T2) / TC);\n  } else {\n    o.m = 1;\n    if (ph \u003c T4) turn((PI / 2) * (1 - sm((ph - T3) / TB)), r, o);\n    else {\n      o.th = 0;\n      o.cx = r + DA * (1 - easeOut(1 - (ph - T4) / TA));\n    }\n  }\n  return o;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Calls f(X, Y, sx, sy) for every LED near the sofa at pose P, with (sx, sy)\n// the LED centre in the sofa's frame.\nfunction eachLed(P, r, f, xa = -r - 1, xb = r + 1) {\n  const ct = cos(P.th), st = sin(P.th);\n  let x0 = 99, x1 = -99, y0 = 999, y1 = -999;\n  for (const [sx, sy] of [[xa, 0], [xb, 0], [xa, 1], [xb, 1]]) {\n    const ex = sx - P.cx, ey = sy - P.cy, wx = ex * ct + ey * st, wy = -ex * st + ey * ct;\n    const X = XC + U * wy, Y = YC - U * wx;\n    x0 = min(x0, X), x1 = max(x1, X), y0 = min(y0, Y), y1 = max(y1, Y);\n  }\n  x0 = max(0, floor(x0) - 1), x1 = min(W - 1, floor(x1) + 1), y0 = max(0, floor(y0) - 1), y1 = min(H - 1, floor(y1) + 1);\n  for (let Y = y0; Y \u003c= y1; Y++)\n    for (let Xm = x0; Xm \u003c= x1; Xm++) {\n      const wx = (YC - (Y + 0.5)) / U, wy = (Xm + 0.5 - XC) / U;\n      f(P.m ? W - 1 - Xm : Xm, Y, P.cx + wx * ct - wy * st, P.cy + wx * st + wy * ct);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    clock: 0, hue: 0, speed: 2, hole: 0, trail: 0.06, r: R_OPT, warm: false,\n    wake: new Float32Array(N), buf: new Float32Array(N * 3),\n    pose: { th: 0, cx: 0, cy: 0, m: 0 }, c1: [0, 0, 0], c2: [0, 0, 0], c3: [0, 0, 0],\n  };\n}\n\n// Advance the clock by dc and let the floor's glow where the sofas have been\n// fade.\nfunction step(S, dc) {\n  S.clock += dc;\n  const keep = exp(-dc / (0.25 + 1.5 * S.trail + 6 * S.trail * S.trail)), r = S.r, wake = S.wake;\n  for (let p = 0; p \u003c N; p++) wake[p] *= keep;\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    eachLed(pose(ph, r, S.pose), r, (X, Y, sx, sy) => {\n      const cov = cl(0.5 - sdf(sx, sy, r) * U, 0, 1), p = Y * W + X;\n      if (cov > wake[p]) wake[p] = cov;\n    });\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.hole = cl(k[2], -1, 1);\n  S.trail = cl(k[3], 0, 1);\n  S.r = holeRadius(S.hole);\n  if (!S.warm) {\n    // Open with a sofa 1.6 s short of the right corner and four seconds of\n    // memory already laid down behind it.\n    S.clock = T1 - 1.6 - 4;\n    for (let i = 0; i \u003c 60; i++) step(S, 4 / 60);\n    S.warm = true;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, c1, c2, c3, wake } = S, r = S.r, h = S.hue + 0.52;\n  buf.fill(0);\n  const put = (p, c, v) => {\n    buf[p * 3] = max(buf[p * 3], c[0] * v);\n    buf[p * 3 + 1] = max(buf[p * 3 + 1], c[1] * v);\n    buf[p * 3 + 2] = max(buf[p * 3 + 2], c[2] * v);\n  };\n  const set = (p, c, v, al) => {\n    buf[p * 3] += (c[0] * v - buf[p * 3]) * al;\n    buf[p * 3 + 1] += (c[1] * v - buf[p * 3 + 1]) * al;\n    buf[p * 3 + 2] += (c[2] * v - buf[p * 3 + 2]) * al;\n  };\n\n  // Walls one LED outside the hallway, the solid between the legs hatched\n  // as on a floor plan, and the floor's glow where the sofas have passed.\n  hsv(h + 0.2, 0.45, 1, c1);\n  for (let Y = 0; Y \u003c H; Y++) put(Y * W, c1, 70), put(Y * W + 63, c1, 70);\n  for (let X = 0; X \u003c W; X++) put(X, c1, 70);\n  for (let Y = 15; Y \u003c H; Y++) put(Y * W + 15, c1, 70), put(Y * W + 48, c1, 70);\n  for (let X = 15; X \u003c= 48; X++) put(15 * W + X, c1, 70);\n  for (let Y = 16; Y \u003c H; Y++) for (let X = 16; X \u003c 48; X++) if ((X + Y) % 5 === 0) put(Y * W + X, c1, 40);\n  hsv(h + 0.05, 0.6, 1, c2);\n  for (let p = 0; p \u003c N; p++) if (wake[p] > 0.01) put(p, c2, 100 * wake[p]);\n\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    const P = pose(ph, r, S.pose);\n    // In a turn, the rest of the strip behind the sofa that every position\n    // of the hallway so far still holds: the walls shave it down to the sofa.\n    const u = ph >= T1 && ph \u003c T2 ? (ph - T1) / TB : ph >= T3 && ph \u003c T4 ? (ph - T3) / TB : -1;\n    if (u >= 0) {\n      const th = (PI / 2) * sm(u), al = sm(u / 0.12), back = min(r + 1 / max(sin(th), 1e-3), 12);\n      hsv(h, 0.45, 1, c1);\n      eachLed(P, r, (X, Y, sx, sy) => {\n        // Each corner's own hallway runs on for ever; the panel's other\n        // corner stops the strip.\n        if (X \u003c 1 || X > 62 || Y \u003c 1 || (Y > 14 && X > 14 && X \u003c 49)) return;\n        const x = P.m ? -sx : sx, ex = cl(0.5 + block(x, sy, th, r) * U, 0, 1) - cl(0.5 - sdf(sx, sy, r) * U, 0, 1);\n        if (ex > 0) put(Y * W + X, c1, 80 * ex * al);\n      }, P.m ? -r - 1 : -back, P.m ? back : r + 1);\n    }\n    hsv(h, 0.85, 1, c1);\n    hsv(h, 0.3, 1, c2);\n    hsv(h + 0.62, 0.55, 1, c3);\n    eachLed(P, r, (X, Y, sx, sy) => {\n      const dl = sdf(sx, sy, r) * U, cov = cl(0.5 - dl, 0, 1);\n      if (cov \u003c= 0) return;\n      const p = Y * W + X;\n      set(p, c1, 150, cov);\n      put(p, notch(sx, sy, r) ? c3 : c2, 255 * cl(1.6 + dl, 0, 1) * cov);\n    });\n  }\n  // The inner corners.\n  hsv(h + 0.62, 0.3, 1, c3);\n  put(15 * W + 48, c3, 255);\n  put(15 * W + 15, c3, 255);\n\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(min(255, buf[p * 3])), round(min(255, buf[p * 3 + 1])), round(min(255, buf[p * 3 + 2])));\n}\n","layer":{"id":"layer-moving-sofa","type":"code","name":"moving-sofa","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moving Sofa\n// Family:  geometry\n// Idea:    Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: moving sofa problem (Leo Moser, 1966) and Hammersley's sofa (John Hammersley, 1968), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1\n//\n// Knob 1: Hue. Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim.\n// Knob 2: Speed. At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds.\n// Knob 3: Hole. The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole.\n// Knob 4: Trail. How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, abs, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (t) => {\n  t = cl(t, 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// One corner of the hallway, in widths: the arm the sofa comes along is\n// 0 \u003c= wy \u003c= 1, wx \u003c= 1, the arm it leaves by 0 \u003c= wx \u003c= 1, wy \u003c= 1, the\n// inner corner the origin and the outer corner (1, 1). On the panel the right\n// corner has wx running up the right leg and wy across, X = XC + U wy and\n// Y = YC - U wx; the left corner is its mirror image, X -> 64 - X.\nconst U = 14, XC = 49, YC = 15;\n\n// Hole 0 is r = 2/pi, where the area pi/2 + 2r - pi r^2 / 2 is largest.\n// Gerver's sofa of 1992, area 2.2195, is larger still and is not drawn here.\nconst R_OPT = 2 / PI;\nconst holeRadius = (k) => (k \u003c 0 ? R_OPT * (1 + k) : R_OPT + (1 - R_OPT) * k);\n\n// Signed distance, in widths, to Hammersley's sofa with hole radius r: the\n// points with y >= 0 within 1 of the segment from (-r, 0) to (r, 0), less\n// the half disc of radius r on the origin. Negative inside. Below the flat\n// side it is the distance to the two flat pieces, so a sharp end of the hole\n// touching a wall does not bleed into the wall's LED.\nfunction sdf(x, y, r) {\n  const ax = abs(x);\n  if (y \u003c 0) {\n    const ex = ax \u003c r ? r - ax : ax > r + 1 ? ax - r - 1 : 0;\n    return sqrt(ex * ex + y * y);\n  }\n  const dx = ax > r ? ax - r : 0;\n  return max(-y, sqrt(dx * dx + y * y) - 1, r - sqrt(x * x + y * y));\n}\n// Whether the sofa's nearest edge to (x, y) is the hole's semicircle.\nconst notch = (x, y, r) => r > 0.02 && x * x + y * y \u003c (r + 0.12) * (r + 0.12) && abs(x) \u003c r + 0.04;\n\n// How far (x, y), in the sofa's frame, lies inside every position the\n// hallway has taken in a turn so far, th of the way round, starting from the\n// strip behind the sofa's front: negative once some wall has passed through\n// it. The outer wall a = 1 has kept (x - r, y) within 1 of the origin in the\n// directions 0..th, the wall b = 1 has done the same for (x + r, y) in the\n// directions 90..90+th degrees, and the inner corner has cut from the hole\n// the part below the chord from (-r, 0) at angle th. At th = 90 degrees\n// this is the sofa.\nfunction block(x, y, th, r) {\n  const ct = cos(th), st = sin(th);\n  let s = min(y, 1 - y, r + 1 - x);\n  const vx = x - r, vy = y;\n  if (vy >= 0 && vx * st - vy * ct >= 0) s = min(s, 1 - sqrt(vx * vx + vy * vy));\n  else s = min(s, 1 - vx, 1 - vx * ct - vy * st);\n  const wx = x + r, wy = y;\n  if (wx \u003c= 0 && wy * st + wx * ct >= 0) s = min(s, 1 - sqrt(wx * wx + wy * wy));\n  else s = min(s, 1 - wy, 1 + wx * st - wy * ct);\n  return min(s, max(sqrt(x * x + y * y) - r, -wx * st + wy * ct));\n}\n\n// The motion, seen from the sofa: the hallway is turned through th and its\n// inner corner sits at c. While th runs from 0 to 90 degrees c runs round\n// the hole's semicircle, c = r (cos 2th, sin 2th). By Thales the inner walls\n// then pass through the hole's two ends, and the outer walls stay tangent to\n// the two quarter discs, so the sofa touches both outer walls all the way\n// round. Phases, in seconds at Speed 2: up the right leg, round the right\n// corner, across the top, round the left corner (the right one mirrored and\n// run backwards), down the left leg.\nconst TA = 4.4, TB = 2.4, TC = 1.4;\nconst T1 = TA, T2 = T1 + TB, T3 = T2 + TC, T4 = T3 + TB, LIFE = T4 + TA;\n// A new sofa sets off as the last one starts round the right corner, so it\n// reaches that corner as the last one leaves the left.\nconst PERIOD = TB + TC + TB;\n// Up the leg from below the panel, and the run across the top.\nconst DA = 9.2, EC = (XC - (64 - XC)) / U;\nconst KE = 0.3, VE = 1 / (1 - KE / 2);\n// Constant speed, then a stop over the last KE of the way.\nfunction easeOut(t) {\n  t = cl(t, 0, 1);\n  if (t \u003c= 1 - KE) return VE * t;\n  const s = t - (1 - KE);\n  return VE * (1 - KE + s - (s * s) / (2 * KE));\n}\nfunction turn(th, r, o) {\n  o.th = th;\n  o.cx = r * cos(2 * th);\n  o.cy = r * sin(2 * th);\n}\n// Pose at phase ph: o.m is 1 when it is given in the left corner's mirrored\n// frame.\nfunction pose(ph, r, o) {\n  o.m = 0;\n  o.cy = 0;\n  if (ph \u003c T1) {\n    o.th = 0;\n    o.cx = r + DA * (1 - easeOut(ph / TA));\n  } else if (ph \u003c T2) turn((PI / 2) * sm((ph - T1) / TB), r, o);\n  else if (ph \u003c T3) {\n    o.th = PI / 2;\n    o.cx = -r - (EC - 2 * r) * sm((ph - T2) / TC);\n  } else {\n    o.m = 1;\n    if (ph \u003c T4) turn((PI / 2) * (1 - sm((ph - T3) / TB)), r, o);\n    else {\n      o.th = 0;\n      o.cx = r + DA * (1 - easeOut(1 - (ph - T4) / TA));\n    }\n  }\n  return o;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Calls f(X, Y, sx, sy) for every LED near the sofa at pose P, with (sx, sy)\n// the LED centre in the sofa's frame.\nfunction eachLed(P, r, f, xa = -r - 1, xb = r + 1) {\n  const ct = cos(P.th), st = sin(P.th);\n  let x0 = 99, x1 = -99, y0 = 999, y1 = -999;\n  for (const [sx, sy] of [[xa, 0], [xb, 0], [xa, 1], [xb, 1]]) {\n    const ex = sx - P.cx, ey = sy - P.cy, wx = ex * ct + ey * st, wy = -ex * st + ey * ct;\n    const X = XC + U * wy, Y = YC - U * wx;\n    x0 = min(x0, X), x1 = max(x1, X), y0 = min(y0, Y), y1 = max(y1, Y);\n  }\n  x0 = max(0, floor(x0) - 1), x1 = min(W - 1, floor(x1) + 1), y0 = max(0, floor(y0) - 1), y1 = min(H - 1, floor(y1) + 1);\n  for (let Y = y0; Y \u003c= y1; Y++)\n    for (let Xm = x0; Xm \u003c= x1; Xm++) {\n      const wx = (YC - (Y + 0.5)) / U, wy = (Xm + 0.5 - XC) / U;\n      f(P.m ? W - 1 - Xm : Xm, Y, P.cx + wx * ct - wy * st, P.cy + wx * st + wy * ct);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    clock: 0, hue: 0, speed: 2, hole: 0, trail: 0.06, r: R_OPT, warm: false,\n    wake: new Float32Array(N), buf: new Float32Array(N * 3),\n    pose: { th: 0, cx: 0, cy: 0, m: 0 }, c1: [0, 0, 0], c2: [0, 0, 0], c3: [0, 0, 0],\n  };\n}\n\n// Advance the clock by dc and let the floor's glow where the sofas have been\n// fade.\nfunction step(S, dc) {\n  S.clock += dc;\n  const keep = exp(-dc / (0.25 + 1.5 * S.trail + 6 * S.trail * S.trail)), r = S.r, wake = S.wake;\n  for (let p = 0; p \u003c N; p++) wake[p] *= keep;\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    eachLed(pose(ph, r, S.pose), r, (X, Y, sx, sy) => {\n      const cov = cl(0.5 - sdf(sx, sy, r) * U, 0, 1), p = Y * W + X;\n      if (cov > wake[p]) wake[p] = cov;\n    });\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.hole = cl(k[2], -1, 1);\n  S.trail = cl(k[3], 0, 1);\n  S.r = holeRadius(S.hole);\n  if (!S.warm) {\n    // Open with a sofa 1.6 s short of the right corner and four seconds of\n    // memory already laid down behind it.\n    S.clock = T1 - 1.6 - 4;\n    for (let i = 0; i \u003c 60; i++) step(S, 4 / 60);\n    S.warm = true;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, c1, c2, c3, wake } = S, r = S.r, h = S.hue + 0.52;\n  buf.fill(0);\n  const put = (p, c, v) => {\n    buf[p * 3] = max(buf[p * 3], c[0] * v);\n    buf[p * 3 + 1] = max(buf[p * 3 + 1], c[1] * v);\n    buf[p * 3 + 2] = max(buf[p * 3 + 2], c[2] * v);\n  };\n  const set = (p, c, v, al) => {\n    buf[p * 3] += (c[0] * v - buf[p * 3]) * al;\n    buf[p * 3 + 1] += (c[1] * v - buf[p * 3 + 1]) * al;\n    buf[p * 3 + 2] += (c[2] * v - buf[p * 3 + 2]) * al;\n  };\n\n  // Walls one LED outside the hallway, the solid between the legs hatched\n  // as on a floor plan, and the floor's glow where the sofas have passed.\n  hsv(h + 0.2, 0.45, 1, c1);\n  for (let Y = 0; Y \u003c H; Y++) put(Y * W, c1, 70), put(Y * W + 63, c1, 70);\n  for (let X = 0; X \u003c W; X++) put(X, c1, 70);\n  for (let Y = 15; Y \u003c H; Y++) put(Y * W + 15, c1, 70), put(Y * W + 48, c1, 70);\n  for (let X = 15; X \u003c= 48; X++) put(15 * W + X, c1, 70);\n  for (let Y = 16; Y \u003c H; Y++) for (let X = 16; X \u003c 48; X++) if ((X + Y) % 5 === 0) put(Y * W + X, c1, 40);\n  hsv(h + 0.05, 0.6, 1, c2);\n  for (let p = 0; p \u003c N; p++) if (wake[p] > 0.01) put(p, c2, 100 * wake[p]);\n\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    const P = pose(ph, r, S.pose);\n    // In a turn, the rest of the strip behind the sofa that every position\n    // of the hallway so far still holds: the walls shave it down to the sofa.\n    const u = ph >= T1 && ph \u003c T2 ? (ph - T1) / TB : ph >= T3 && ph \u003c T4 ? (ph - T3) / TB : -1;\n    if (u >= 0) {\n      const th = (PI / 2) * sm(u), al = sm(u / 0.12), back = min(r + 1 / max(sin(th), 1e-3), 12);\n      hsv(h, 0.45, 1, c1);\n      eachLed(P, r, (X, Y, sx, sy) => {\n        // Each corner's own hallway runs on for ever; the panel's other\n        // corner stops the strip.\n        if (X \u003c 1 || X > 62 || Y \u003c 1 || (Y > 14 && X > 14 && X \u003c 49)) return;\n        const x = P.m ? -sx : sx, ex = cl(0.5 + block(x, sy, th, r) * U, 0, 1) - cl(0.5 - sdf(sx, sy, r) * U, 0, 1);\n        if (ex > 0) put(Y * W + X, c1, 80 * ex * al);\n      }, P.m ? -r - 1 : -back, P.m ? back : r + 1);\n    }\n    hsv(h, 0.85, 1, c1);\n    hsv(h, 0.3, 1, c2);\n    hsv(h + 0.62, 0.55, 1, c3);\n    eachLed(P, r, (X, Y, sx, sy) => {\n      const dl = sdf(sx, sy, r) * U, cov = cl(0.5 - dl, 0, 1);\n      if (cov \u003c= 0) return;\n      const p = Y * W + X;\n      set(p, c1, 150, cov);\n      put(p, notch(sx, sy, r) ? c3 : c2, 255 * cl(1.6 + dl, 0, 1) * cov);\n    });\n  }\n  // The inner corners.\n  hsv(h + 0.62, 0.3, 1, c3);\n  put(15 * W + 48, c3, 255);\n  put(15 * W + 15, c3, 255);\n\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(min(255, buf[p * 3])), round(min(255, buf[p * 3 + 1])), round(min(255, buf[p * 3 + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds."},{"name":"Hole","min":-1,"max":1,"about":"The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole."},{"name":"Trail","min":0,"max":1,"about":"How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches."}],"start":[0,2,0,0.06],"measures":{"motion":0.3083,"detail":0.0578,"edges":0.2742,"complexity":0.3757,"coverage":0.3481,"colour":0.1671,"drift":0.1766},"knobResponse":[0.06,0.1158,0.0644,0.0648]},{"slug":"needlepoint","title":"Needlepoint","family":"textile","round":19,"note":"슬레이트 틀의 인쇄 캔버스를 바늘이 오른쪽 위 구석부터 바스켓위브로 한 대각선씩 메워 가요. 앵무새 쿠션이나 검은 바탕의 베를린 장미, 알파벳 샘플러가 다 차면 틀이 굴러 새 캔버스를 감아 와요.","idea":"A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","layer":{"id":"layer-needlepoint","type":"code","name":"needlepoint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wool","min":0,"max":1,"about":"Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground."},{"name":"Speed","min":0.2,"max":3,"about":"Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds."},{"name":"Design","min":0,"max":2,"about":"Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow."}],"start":[0,2,0,0.06],"measures":{"motion":0.1581,"detail":0.3325,"edges":0.8053,"complexity":1.8885,"coverage":0.6687,"colour":0.2513,"drift":0.043},"knobResponse":[0.1114,0.0649,0.1048,0.0607]},{"slug":"neon-alley","title":"Neon Alley","family":"city","round":16,"note":"밤 골목의 벽에 유리관을 구부린 네온 그림 간판이 지붕부터 젖은 길까지 걸려서, 관이 하나씩 켜지고 화살표가 달리고 지친 관 하나가 지직거려요. K1 을 누르면 정전이 됐다가 간판이 하나씩 다시 켜지고, K2 를 누르면 간판이 새로 걸려요.","idea":"The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.","buttons":"K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.","code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","layer":{"id":"layer-neon-alley","type":"code","name":"neon-alley","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta."},{"name":"Pace","min":0,"max":4,"about":"The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between."},{"name":"Wear","min":0,"max":1,"about":"How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark."},{"name":"Rain","min":0,"max":1,"about":"A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow."}],"start":[0,2,0,0.06],"measures":{"motion":0.7208,"detail":0.1177,"edges":0.5393,"complexity":0.4294,"coverage":0.2587,"colour":0.5724,"drift":0.1545},"knobResponse":[0.2671,0.0583,0.0882,0.0858]},{"slug":"night-flight","title":"Night Flight","family":"city","round":22,"note":"여객기 창으로 내려다본 밤 도시예요. 1 LED 가로등이 바둑판 길과 대로, 강 위 다리를 따라 레이스처럼 이어지고, 고속도로에는 흰 전조등과 빨간 미등이 흘러요. 도시는 초록 항법등과 흰 섬광등이 달린 날개 끝을 지나 왼쪽 아래로 천천히 미끄러져요.","idea":"A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.","buttons":"K3 tap flies over another city.","code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-night-flight","type":"code","name":"night-flight","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1."},{"name":"Speed","min":0.2,"max":3,"about":"Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it."},{"name":"Grid","min":0,"max":1,"about":"Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones."},{"name":"Haze","min":0,"max":1,"about":"Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through."}],"start":[0,2,0,0.06],"measures":{"motion":0.3475,"detail":0.3276,"edges":0.2578,"complexity":1.0097,"coverage":0.5044,"colour":0.2424,"drift":0.0667},"knobResponse":[0.0508,0.1119,0.0511,0.1477]},{"slug":"nixie","title":"Nixie","family":"circuit","round":21,"note":"회로판 소켓에 선 닉시관 속, 육각 그물 뒤에 겹겹이 선 숫자 철사 가운데 하나가 네온 주황으로 빛나요. 숫자가 돌다가 하나씩 멈추고, Mode 노브를 돌리면 주파수 계수기나 시계가 돼요.","idea":"Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.","buttons":"K1 tap runs every cathode in turn now.","code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-nixie","type":"code","name":"nixie","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gas","min":0,"max":1,"about":"What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops."},{"name":"Rows","min":1,"max":3,"about":"One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter."},{"name":"Mode","min":0,"max":3,"about":"Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3."}],"start":[0,2,1,0.06],"measures":{"motion":0.4696,"detail":0.0533,"edges":0.238,"complexity":1.7971,"coverage":0.5829,"colour":0.1892,"drift":0.1676},"knobResponse":[0.0576,0.0717,0.1676,0.0732]},{"slug":"noborigama","title":"Noborigama","family":"pottery","round":26,"note":"밤 언덕의 오름가마를 세로로 잘라 봐요. 불이 그릇 쌓인 칸들을 타고 올라 아래 칸은 희고 위 칸은 붉으며, 장작을 넣을 때마다 감시 구멍에서 불길이, 굴뚝에서 검은 연기와 불티가 나와요. K1 은 소성 날짜를 바꾸고, 누르면 모든 구멍에 한꺼번에 불을 넣어요.","idea":"A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.","buttons":"K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.","code":"// ===== Patternflow pattern =====\n// Title:   Noborigama\n// Family:  pottery\n// Idea:    A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the noborigama, the wood-fired climbing kiln of Japan and Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1\n//\n// Knob 1: Firing. The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white.\n// Knob 2: Speed. At 2 the potter stokes every few seconds; 0.2 is ten times slower.\n// Knob 3: Chambers. Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves.\n// Knob 4: Draft. Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame.\n// Buttons: K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi % p), b = hash(xi + 1, yi % p), c = hash(xi, (yi + 1) % p);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, (yi + 1) % p)) * su * sv;\n}\n// Fine noise that wraps every 256 rows, for the quick flicker of flame and smoke.\nconst FN = new Float32Array(64 * 256).map((_, i) => vn((i & 63) * 0.9, ((i >> 6) * 84) / 256, 84));\nconst fn = (x, y) => FN[(y & 255) * 64 + (x & 63)];\n\n// Brick, gas and flame by temperature: dull red at 0.15, orange at 0.6, white\n// heat at 1. Red stops at 232: pinned at 255 it hid the flicker of the hottest\n// chambers, since an LED reads by its brightest channel.\nconst RAMP = [[0, 24, 4, 2], [0.15, 92, 13, 4], [0.3, 158, 30, 6], [0.45, 204, 68, 12], [0.6, 226, 114, 24], [0.75, 232, 160, 50], [0.88, 232, 194, 96], [1, 232, 216, 160], [1.25, 236, 230, 204]];\nconst LUT = new Float32Array(768);\nfor (let i = 0; i \u003c 256; i++) {\n  let k = 0;\n  const T = i / 204;\n  while (k \u003c 7 && T > RAMP[k + 1][0]) k++;\n  const u = cl((T - RAMP[k][0]) / (RAMP[k + 1][0] - RAMP[k][0]), 0, 1);\n  for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(RAMP[k][c + 1], RAMP[k + 1][c + 1], u);\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n// One colour array for every put(), to spare the garbage collector.\nconst C3 = [0, 0, 0];\nconst lc = (T, b = 1) => ((T = lut(T)), C3[0] = LUT[T] * b, C3[1] = LUT[T + 1] * b, C3[2] = LUT[T + 2] * b, C3);\n\nconst SKY = 0, EARTH = 1, WALL = 3, GAS = 4, POT = 5, SHELF = 6, HOLE = 7, FLUE = 8;\n// A vault on low walls: roof height across a chamber, 0.4 at the walls, 1 at the crown.\nconst arch = (u) => 0.4 + 0.6 * sqrt(max(0, 1 - (2 * u - 1) ** 2));\nconst TOP = 18; // the chimney's mouth row\nconst WOOD = [150, 118, 66], TOWEL = [214, 204, 184], FACE = [176, 116, 78], COAT = [46, 60, 128], LEGS = [74, 62, 54], RIM = [255, 150, 60];\n// Jar, flared bowl, bottle and cup: half width up the pot, bottom to top.\nconst prof = (k, t) => (k === 0 ? (t > 0.84 ? 0.5 : 0.6 + 0.4 * sin(PI * t)) : k === 1 ? 0.5 + 0.5 * t : k === 2 ? (t \u003c 0.55 ? 0.55 + 0.45 * sin((PI * t) / 0.55) : t > 0.88 ? 0.5 : 0.3) : 0.8);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    t: 0, n: 0, kind: new Uint8Array(N), ch: new Uint8Array(N), V: F32(N), bg: F32(N * 3), gw: F32(N), f: F32(N * 3), A: F32(W * 64), K: F32(W * 64), Q: F32(W * 64),\n    T: F32(8).fill(-1), Hc: F32(8).fill(-1), age: F32(8).fill(9), q: F32(8), open: F32(8), Te: F32(8), Br: F32(8),\n    puffs: [], sparks: [], logs: [], slugs: [], ev: [], motes: [], pot: { A: 0, tgt: 0, mode: 1, tm: -1.6, thr: 0, k: 0, ph: 0 }, fb: { tm: 1, an: 0 }, flare: 0, np: 0, ns: 0,\n  });\n  for (let k = 0; k \u003c 40; k++) S.motes.push({ x: rnd() * W, y: rnd() * H, e: rnd() \u003c 0.45, ph: rnd() * 7 });\n  for (let k = 0; k \u003c 3; k++) S.logs.push({ c: 0, x: 8 + k * 6 + rnd() * 3, y: 120 + (k & 1), len: 5, life: 0.4 + 0.5 * rnd() });\n}\n\nconst front = (S) => ((S.k1 + 1) / 2) * (S.n + 0.3);\n\nfunction build(S, n) {\n  S.n = n;\n  const P = 77 / n, h = P - 3, Wc = 34 - 2 * n, s = (43 - Wc) / (n - 1);\n  // The firebox, then the chambers, each P rows above the last and s LEDs to the right.\n  const g = (S.g = [{ L: 6, W: 25, F: 123, h: 11 }]);\n  for (let c = 1; c \u003c= n; c++) g.push({ L: 14 + (c - 1) * s, W: Wc, F: 108 - (c - 1) * P, h });\n  // The roof row over X inside a chamber; with e = 2, the top of its brick.\n  const inT = (S.inT = (k, X, e = 0) => {\n    const q = g[k], u = (X - q.L + e) / (q.W + 2 * e);\n    return u > 0 && u \u003c 1 ? q.F - (q.h + e) * arch(u) : 1e3;\n  });\n  const outT = (k, X) => inT(k, X, 2), tp = g[n], CX = (S.CX = tp.L + 0.62 * tp.W);\n  const hill = (X) => (X \u003c 4 ? 123 : X \u003c tp.L - 2 ? mix(123, tp.F + 2, (X - 4) / (tp.L - 6)) : mix(tp.F + 2, tp.F - 5, (X - tp.L + 2) / (66 - tp.L)));\n  // Flame passages through each chamber's floor, over the crown of the one below.\n  const holes = [];\n  for (let c = 1; c \u003c= n; c++) for (let a = g[c - 1], x = round(a.L + 0.2 * a.W); x \u003c= a.L + 0.8 * a.W; x += 4) if (x > g[c].L && x \u003c g[c].L + Wc - 2) holes.push([x, c]);\n  const { kind, ch, V, bg, gw } = S;\n  S.stars = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, r = hash(x, y), nz = 0.8 + 0.4 * vn(x * 0.3, y * 0.3);\n    let k = SKY, c = 0, v = 0, col = [0, 0, 0];\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F && Y > inT(j, X)) k = GAS, c = j, v = (g[j].F - Y) / g[j].h;\n    if (!k && abs(X - CX) \u003c 2 && Y > TOP && Y \u003c inT(n, X) + 0.5) k = FLUE, c = n, v = (Y - TOP) / (inT(n, CX) - TOP);\n    if (!k) for (const [hx, hc] of holes) if (x === hx && Y > g[hc].F && Y \u003c inT(hc - 1, X)) k = HOLE, c = hc;\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F + 2 && Y > outT(j, X)) k = WALL, c = j;\n    if (!k && Y > TOP && ((abs(X - CX) \u003c 4 && Y \u003c outT(n, X) + 1) || (Y \u003c TOP + 2 && abs(X - CX) \u003c 5))) k = WALL, c = n + 1;\n    if (!k && Y > hill(X)) k = EARTH;\n    // The fire mouth in the firebox's front wall.\n    if (k === WALL && !c && x \u003c 6 && y > 116) k = GAS, v = (123 - Y) / 11;\n    kind[i] = k, ch[i] = c, V[i] = v;\n    if (k === SKY) {\n      const u = sm(0, 112, Y), dm = hypot(X - 11, Y - 11), e = 26 * exp(-dm / 3.5), st = r \u003c 0.014 && y \u003c 100 && dm > 12 ? 70 + 140 * hash(y, x) : 0;\n      col = [5 + 15 * u + e + st, 9 + 17 * u + e + st, 32 + 30 * u + e + st];\n      // A crescent moon.\n      if (dm \u003c 3.6 && hypot(X - 12.6, Y - 10) > 3.2) col = [226, 222, 196];\n      if (st) S.stars.push(i);\n    } else if (k === EARTH) {\n      // Beds along the slope, stones, grass on top.\n      const dd = Y - hill(X), bd = (0.7 + 0.5 * vn(dd * 0.3 + x * 0.04, 3.5 + x * 0.02)) * nz;\n      col = dd \u003c 1.5 ? [24, 38, 24] : r \u003c 0.035 ? [58, 52, 46] : [30 * bd, 23 * bd, 19 * bd];\n    }\n    // Brick, coursed on the chimney.\n    else if (k === WALL) col = [96, 66, 50].map((v2) => v2 * ((c > n ? y % 3 === 0 || (x + (floor(y / 3) & 1) * 2) % 4 === 0 : r \u003c 0.25) ? 0.62 : 0.85 + 0.3 * r));\n    bg.set(col, i * 3);\n  }\n  gw.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, k = kind[i];\n    // The brick the fire touches.\n    if (k === WALL) V[i] = [1, -1, W, -W].some((d) => kind[i + d] >= GAS && (abs(d) > 1 || (x + d) >> 6 === 0)) ? 1 : 0;\n    // Earth and air by the kiln are warm: how near each LED is to a wall, and whose.\n    if (k \u003c= EARTH) {\n      let best = 9;\n      for (let dy = -4; dy \u003c= 4; dy++)\n        for (let dx = -4; dx \u003c= 4; dx++) {\n          const X = x + dx, Y = y + dy, d = abs(dx) + abs(dy);\n          if (X >= 0 && X \u003c W && Y >= 0 && Y \u003c H && kind[Y * W + X] === WALL && d \u003c best) best = d, ch[i] = ch[Y * W + X];\n        }\n      gw[i] = best \u003c 9 ? exp(-best / 1.4) * (k ? 0.8 : 0.6) : 0;\n    }\n  }\n  // Shelves and pots: two or three levels a chamber, under the vault.\n  const nl = h >= 16 ? 3 : 2, lh = h / nl;\n  for (let c = 1; c \u003c= n; c++) {\n    const q = g[c], x0 = round(q.L + max(6, 0.22 * Wc)), x1 = floor(q.L + Wc - 1);\n    const set = (x, y, k2, v2) => kind[y * W + x] === GAS && ch[y * W + x] === c && ((kind[y * W + x] = k2), (V[y * W + x] = v2));\n    for (let j = 0; j \u003c nl; j++) {\n      const ys = round(q.F - j * lh), base = ys - 1;\n      if (j) {\n        for (let x = x0; x \u003c= x1; x++) if (inT(c, x + 0.5) \u003c ys - 1) set(x, ys, SHELF, 0);\n        for (let y = ys + 1; y \u003c round(q.F - (j - 1) * lh); y++) set(x0, y, SHELF, 0), set(x1 - 1, y, SHELF, 0);\n      }\n      for (let x = x0 + 1; x \u003c x1 - 1; ) {\n        const ty = floor(hash(c * 7 + j, x) * 4), w = [5, 5, 4, 3][ty];\n        const ph = min(floor(lh - 2), [5, 3, 6, 4][ty], floor(base - max(inT(c, x + 0.5), inT(c, x + w - 0.5)) - 1));\n        if (ph \u003c 2 || x + w > x1) break;\n        for (let r = 0; r \u003c ph; r++)\n          for (let xx = x; xx \u003c x + w; xx++) {\n            const dx = xx + 0.5 - x - w / 2;\n            if (abs(dx) \u003c= (prof(ty, (r + 0.5) / ph) * w) / 2 + 0.15) set(xx, base - r, POT, 0.5 - dx / w + (r === ph - 1 ? 0.2 : 0));\n          }\n        x += w + 1;\n      }\n    }\n  }\n  // Ladders up each chamber's front, and the potter's way between the stoke holes.\n  const xs = (c) => g[c].L - 4, px = [], py = [], at = [0], pl = [0];\n  S.lad = [];\n  S.spy = [0];\n  for (let c = 1; c \u003c= n; c++) {\n    const yw = outT(c, g[c].L - 1.5);\n    S.lad.push([round(xs(c)), yw, outT(c - 1, xs(c))]);\n    S.spy.push(round(g[c].F - max(5, 0.35 * h)));\n    at.push(px.length);\n    px.push(xs(c)), py.push(g[c].F + 2);\n    if (c \u003c n) {\n      px.push(xs(c)), py.push(yw);\n      for (let x = g[c].L - 1.5; x \u003c xs(c + 1); x += 1.5) px.push(x), py.push(outT(c, x));\n      px.push(xs(c + 1)), py.push(outT(c, xs(c + 1)));\n    }\n  }\n  for (let j = 1; j \u003c px.length; j++) pl.push(pl[j - 1] + hypot(px[j] - px[j - 1], py[j] - py[j - 1]));\n  Object.assign(S, { px, py, pl, Ac: at.map((j, c) => (c ? pl[j] : 0)) });\n  // The first time, the potter stands by the chamber above the one being fired.\n  const pt = S.pot;\n  if (!S.built) S.built = 1, pt.tgt = min(n, cl(round(front(S)), 1, n) + 1);\n  pt.tgt = min(pt.tgt, n);\n  pt.A = S.Ac[pt.tgt];\n  if (!pt.mode) pt.mode = 2;\n  S.logs = S.logs.filter((l) => l.c \u003c= n);\n  S.slugs = [];\n  S.ev = [];\n}\n\n// A stoke: reduction first, the flame starved and smoky, then the surge.\nconst red = (a) => (a \u003c 0.2 ? a / 0.2 : exp(-(a - 0.2) / 1.1));\nconst surge = (a) => sm(0.9, 2.1, a) * exp(-max(0, a - 2.1) / 2.4);\n\nfunction pulse(S, c, s) {\n  S.age[c] = 0, S.q[c] = s;\n  // Its black smoke reaches the chimney later the lower the chamber.\n  S.ev.push({ at: 0.25 + 0.12 * (S.n - c), fn: () => S.slugs.push({ y: S.inT(S.n, S.CX), a: 0.5 + 0.5 * s }) });\n}\n\nfunction stoke(S, c) {\n  const q = S.g[c];\n  pulse(S, c, 1);\n  S.logs.push({ c, x: q.L + (c ? 0.5 + rnd() * 2 : 2 + rnd() * 9), y: c ? round(q.F) - 1 : 120 + (rnd() \u003c 0.5), len: (c ? 3 : 4) + floor(rnd() * 3), life: 1 });\n  // The firebox's flame goes on through the first chamber.\n  if (!c) S.ev.push({ at: 0.35, fn: () => pulse(S, 1, 0.6) });\n}\n\nfunction throwTo(S, c, delay = 0) {\n  S.ev.push({ at: 0.3 + delay, fn: () => stoke(S, c) });\n  S.open[c] = 1.3 + delay;\n}\n\nfunction puff(S, x, y, vy, r, a, k) {\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vy, r, a, k, hot: 0.7 - 0.2 * k, ph: rnd() * 7 });\n}\n\nfunction spark(S, s) {\n  if (S.sparks.length > 160) S.sparks.shift();\n  const life = 0.8 + 1.4 * rnd();\n  S.sparks.push({ x: S.CX + (rnd() - 0.5) * 3, y: TOP - 1, vx: (rnd() - 0.5) * 6 * s, vy: -(10 + 14 * rnd()) * s, life, L: life });\n}\n\nfunction posAt(S, A) {\n  const { px, py, pl } = S;\n  let j = 1;\n  while (j \u003c pl.length - 1 && pl[j] \u003c A) j++;\n  const u = cl((A - pl[j - 1]) / max(1e-6, pl[j] - pl[j - 1]), 0, 1);\n  return [mix(px[j - 1], px[j], u), mix(py[j - 1], py[j], u), abs(px[j] - px[j - 1]) \u003c 0.01];\n}\n\nfunction step(S, d) {\n  S.t += d;\n  const { n, T, age, q, Hc, Te, Br, wind, pot: pt, fb } = S, fr = front(S), peak = 0.5 + 0.45 * sm(0, 0.5, (S.k1 + 1) / 2);\n  S.cf = cl(round(fr), 1, n);\n  for (let c = 0; c \u003c= n; c++) {\n    // Fired chambers hold white heat; above the one being fired each is cooler.\n    const tg = max(0.2, peak - (1.1 / n) * max(0, c - fr));\n    T[c] = T[c] \u003c 0 ? tg : T[c] + (tg - T[c]) * min(1, d * 0.8);\n    age[c] += d;\n    // Wind up the hill pulls on the chimney; wind down it chokes the draft.\n    Te[c] = T[c] + q[c] * (0.1 * surge(age[c]) - 0.15 * red(age[c])) + 0.02 * sin(S.t * 1.3 + c * 2.1) + 0.06 * wind;\n    Br[c] = 1 - 0.36 * q[c] * red(age[c]);\n    // Heat work for the cones creeps up and hardly comes back.\n    if (Hc[c] \u003c 0) Hc[c] = T[c] - 0.1;\n    Hc[c] += (Te[c] - Hc[c]) * d * (Te[c] > Hc[c] ? 0.07 : 0.02);\n    S.open[c] = max(0, S.open[c] - d);\n  }\n  Te[n + 1] = Te[n] - 0.22, Br[n + 1] = Br[n];\n  for (const e of S.ev) if ((e.at -= d) \u003c= 0) e.fn();\n  S.ev = S.ev.filter((e) => e.at > 0);\n  // The potter stokes twice, watches the spy hole, then goes where wood is needed.\n  pt.ph += d;\n  if (!pt.mode) {\n    pt.A += cl(S.Ac[pt.tgt] - pt.A, -13 * d, 13 * d);\n    if (abs(S.Ac[pt.tgt] - pt.A) \u003c 1e-3) pt.mode = 1, pt.tm = 0, pt.thr = 0;\n  } else if (pt.mode === 1) {\n    pt.tm += d;\n    if (pt.thr \u003c 2 && pt.tm > 0.3 + 0.7 * pt.thr) {\n      throwTo(S, pt.tgt);\n      pt.thr++;\n    }\n    if (pt.tm > 1.5) pt.mode = 2, pt.tm = 0.6 + 0.6 * rnd();\n  } else if ((pt.tm -= d) \u003c= 0) pt.tgt = ++pt.k % 3 ? S.cf : min(n, S.cf + 1), pt.mode = 0;\n  // The stoker feeds the fire mouth.\n  fb.an = max(0, fb.an - d);\n  if ((fb.tm -= d) \u003c= 0) fb.tm = 3 + rnd(), fb.an = 0.5, throwTo(S, 0);\n  for (const l of S.logs) l.life -= d * (0.12 + 0.2 * T[l.c]);\n  S.logs = S.logs.filter((l) => l.life > 0);\n  // Black smoke up the chimney: at the top, a billow, a flare and sparks.\n  for (const s of S.slugs)\n    if ((s.y -= d * 30) \u003c TOP) {\n      s.done = 1;\n      for (let j = 0; j \u003c 3; j++) puff(S, S.CX + (rnd() - 0.5) * 3, TOP - 1 - j * 2, -6 - 4 * rnd(), 3 + rnd(), 0.6 + 0.6 * s.a, 1);\n      for (let j = 0; j \u003c 14 * s.a; j++) spark(S, 1.3);\n      S.flare = min(1.4, S.flare + s.a);\n    }\n  S.slugs = S.slugs.filter((s) => !s.done);\n  S.flare = max(0.15 + 0.35 * sm(0.6, 1, T[n]), S.flare * exp(-d * 1.6));\n  air(S, d);\n  // Ash and embers.\n  for (const m of S.motes) m.x = (m.x + (wind * 9 + 1 + 1.5 * sin(S.t * 0.7 + m.ph)) * d + 65) % 65, m.y = (m.y + (m.e ? -3.5 : 2.2) * d + 129) % 129;\n}\n\n// A grey plume that slows and spreads under the top of the panel, and sparks.\nfunction air(S, d) {\n  const { n, T, wind } = S;\n  for (S.np += d * 6; S.np >= 1; S.np--) puff(S, S.CX + (rnd() - 0.5) * 2, TOP - 1, -7 - 3 * rnd(), 3, 0.55 + 0.2 * T[n], 0);\n  for (const p of S.puffs) {\n    // A strong wind bends the plume over and draws it out downwind.\n    p.vy += (-3.5 * (1 - 0.55 * abs(wind)) * cl(p.y / 12, 0.3, 1) - p.vy) * d * 1.2;\n    p.y += p.vy * d;\n    p.x += (wind * 18 * (0.5 + 0.5 * cl((TOP - p.y) / TOP, 0, 1)) + 1.2 * sin(S.t * 0.9 + p.ph)) * d;\n    p.r = min(10 + p.k, p.r + d * (1.5 + 1.2 * p.k + 2 * cl((8 - p.y) / 8, 0, 1)));\n    p.a -= d * (0.05 + 0.04 * (1 - p.k));\n    p.hot = max(0, p.hot - d * 1.4);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.03 && p.y + p.r > -3 && p.x > -14 && p.x \u003c W + 14);\n  for (S.ns += d * (2 + 5 * T[n]) * (1 + 0.6 * wind); S.ns >= 1; S.ns--) spark(S, 1);\n  for (const p of S.sparks) {\n    p.vy += (-6 - p.vy) * d * 1.5;\n    p.vx += ((rnd() - 0.5) * 40 + (wind * 16 - p.vx) * 2) * d;\n    p.x += p.vx * d, p.y += p.vy * d, p.life -= d;\n  }\n  S.sparks = S.sparks.filter((p) => p.life > 0 && p.y > -1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], n = cl(round(k[2]), 3, 6);\n  S.k1 = cl(k[0], -1, 1);\n  S.wind = cl(k[3], -1, 1);\n  if (n !== S.n) build(S, n);\n  // The kiln has been smoking for hours before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    step(S, 0);\n    for (let j = 0; j \u003c 75; j++) air(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c= n; c++) throwTo(S, c, 0.05 * c);\n  step(S, cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2));\n}\n\nlet F;\nfunction put(x, y, c, a = 1, add = 0) {\n  x = floor(x), y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = add ? F[o + i] + c[i] * a : mix(F[o + i], c[i], a);\n}\nfunction glow(x, y, r, c, a) {\n  for (let Y = floor(y - r); Y \u003c= y + r; Y++) for (let X = floor(x - r); X \u003c= x + r; X++) put(X, Y, c, a * max(0, 1 - hypot(X + 0.5 - x, Y + 0.5 - y) / r) ** 2, 1);\n}\n\n// A figure nine LEDs tall, feet on row y, facing the kiln: white towel, indigo\n// jacket lit orange on the kiln side, paper lantern.\nfunction figure(x, y, pose, ph, rim, lamp) {\n  x = round(x), y = round(y);\n  const a = floor(ph * 6) & 1 ? -1 : 1, pts = [[-1, -8, TOWEL], [0, -8, TOWEL], [0, -7, FACE, 1]];\n  for (let dy = -6; dy \u003c= -4; dy++) pts.push([-1, dy, COAT], [0, dy, COAT], [1, dy, COAT, 1]);\n  const L = (l, b) => pts.push([l, -3, LEGS], [b, -2, LEGS], [b, -1, LEGS], [b, 0, LEGS]);\n  if (pose === 1 && a \u003c 0) L(0, 0);\n  else if (pose === 2) L(a, a), L(-a, -a), pts.push([a, -7, COAT, 1], [-a, -3, LEGS]);\n  else L(-1, -1), L(1, 1);\n  if (pose === 3) pts.push(...(ph \u003c 0.5 ? [[-1, -7, COAT], [-2, -8, COAT]] : [[2, -5, COAT, 1], [3, -5, FACE, 1]]));\n  for (const [dx, dy, c, k] of pts) put(x + dx, y + dy, k ? c.map((v, i) => mix(v, RIM[i], rim)) : c);\n  if (lamp) put(x - 2, y - 4, [120, 70, 40]), put(x - 2, y - 3, [255, 222, 150]), put(x - 2, y - 2, [240, 160, 80]), glow(x - 1.5, y - 2, 7, [70, 44, 16], 1);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  F = S.f;\n  const { n, t, kind, ch, V, bg, gw, Te, Br, g, wind, A, K, Q, q, age } = S, lean = wind * 2.2 + 0.8, fs = 1 + 0.45 * wind, fo = floor(t * fs * 17);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const k = kind[i], c = ch[i], x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, T = Te[c], B = Br[c], v = V[i];\n    // Each LED: backdrop times m plus a ramp colour times b.\n    let j = lut(T * 0.7), b = 0, m = 0;\n    if (k \u003c= EARTH) m = 1, b = gw[i] * 0.28 * B;\n    else if (k === WALL) m = v ? 0.45 : 0.95, j = lut(T * 0.85 - 0.05), b = B * (v ? 0.5 : 0.1);\n    else if (k === GAS) {\n      let I = sm(0.25, 0.85, 0.65 * vn(X * 0.45 - lean * (0.3 + v) * 3 + c * 19, (Y + t * fs * 10) * 0.16) + 0.35 * fn(x, y + fo) + 0.25 * (1 - v) - 0.07);\n      // The firebox floor: a bed of embers under the logs.\n      if (!c && v \u003c 0.3) I = sm(0.35, 0.85, 0.7 * vn(X * 0.7, Y * 0.9 + t * 0.4) + 0.3 * vn(X * 1.7 + t, Y * 1.5) + 0.1);\n      // Darker flame is cooler, orange rather than grey. The firebox burns rougher.\n      const r = c ? 0.14 : 0.26;\n      j = lut(T - r + 2 * r * I), b = B * (1 - 2 * r + 2 * r * I);\n    } else if (k === POT) j = lut(T - 0.18), b = B * (0.32 + 0.22 * v + 0.14 * fn(x >> 1, y + (fo >> 1)));\n    else if (k === SHELF) j = lut(T - 0.2), b = B * 0.4;\n    else if (k === HOLE) j = lut(mix(Te[c - 1], T, 0.5) + 0.04), b = 0.85 + 0.15 * sin(t * 9 + x);\n    else {\n      // The flue: hot gas rising in bands, and each stoke's black smoke going up.\n      let dk = 0;\n      for (const s of S.slugs) dk = max(dk, s.a * exp(-(((Y - s.y) / 3) ** 2)));\n      j = lut(T - 0.12 - 0.2 * v + 0.1 * vn(X * 0.6, (Y + t * 22) * 0.3)), b = B * (0.6 + 0.3 * vn(X * 0.5 + 9, (Y + t * 26) * 0.2)) * (1 - 0.85 * dk);\n    }\n    for (let e = 0; e \u003c 3; e++) F[o + e] = bg[o + e] * m + LUT[j + e] * b;\n  }\n  for (const i of S.stars) for (let e = 0; e \u003c 3; e++) F[i * 3 + e] *= 0.75 + 0.25 * sin(t * 2.3 + i);\n\n  // Burning wood on the floors; in the firebox, thicker logs with their tops alight.\n  for (const l of S.logs)\n    for (let k = 0, T = Te[l.c], len = max(1, round(l.len * min(1, l.life * 1.6))); k \u003c len; k++) {\n      put(l.x + k, l.y, (k + floor(t * 4 + l.x)) % 3 ? lc(T - 0.45, 0.45) : lc(T + 0.1));\n      if (!l.c) put(l.x + k, l.y - 1, lc(T - 0.1 + 0.15 * sin(t * 7 + k + l.x)), 0.85);\n    }\n  for (const [lx, y0, y1] of S.lad) for (let y = floor(y0); y \u003c= y1; y++) put(lx - 1, y, WOOD, 0.7), put(lx + 1, y, WOOD, 0.7), y % 3 || put(lx, y, WOOD, 0.6);\n  for (let c = 1; c \u003c= n; c++) {\n    // The stoke hole, open while wood goes in, and the spy hole.\n    const T = Te[c], wx = floor(g[c].L - 1.5), sy = S.spy[c], fy = round(g[c].F), op = sm(0, 0.3, S.open[c]);\n    for (let y = fy - 3; y \u003c= fy - 2; y++) for (let x = wx; x \u003c= wx + 1; x++) put(x, y, op > 0.05 ? lc(T + 0.05, op) : lc(T - 0.3, 0.35));\n    if (op > 0.05) glow(wx - 1, fy - 2.5, 6, lc(T - 0.1), 0.35 * op);\n    put(wx, sy, lc(T, 0.9)), put(wx + 1, sy, lc(T));\n    for (let x = wx + 2; x \u003c= wx + 6; x++) put(x, sy + 2, lc(T - 0.2, 0.4));\n    // Three cones on a pad, each bending once the heat work passes its number.\n    for (let m = 0; m \u003c 3; m++) {\n      const b = sm(0.57 + 0.12 * m, 0.68 + 0.12 * m, S.Hc[c]), cx = wx + 2 + 2 * m + (b > 0.4), cc = lc(T - 0.15, 0.5);\n      put(cx - (b > 0.4), sy + 1, cc), put(cx, sy, cc, b \u003c 0.75 ? 1 : 0.5), put(cx, b \u003c 0.75 ? sy - 1 : sy + 1, cc);\n    }\n    // Flame out of the spy hole after a stoke, or whenever the wind chokes the chimney.\n    const s = max(q[c] * red(age[c]) * sm(0.15, 0.35, age[c]), 0.55 * q[c - 1] * red(age[c - 1] - 0.3) * sm(0.4, 0.6, age[c - 1])) + 0.3 * max(0, -wind) * (0.7 + 0.3 * sin(t * 3 + c));\n    if (s \u003c 0.05) continue;\n    const x0 = wx - 0.5, y0 = sy + 0.5, len = 2 + 9 * s * (0.8 + 0.2 * sin(t * 13 + c));\n    glow(x0, y0, 5, [120, 50, 10], s);\n    for (let j = 0; j \u003c len; j++) {\n      const u = j / len, x = x0 - j * (1 - 0.6 * max(0, wind)) + wind * j * 0.4, y = y0 - j * j * 0.06 - j * 0.15 + sin(t * 17 + j) * 0.4 * u;\n      put(x, y, lc(T + 0.45 - 0.6 * u), 1 - u * 0.3);\n      if (u \u003c 0.7) put(x, y - 1, lc(T + 0.25 - 0.6 * u), 0.8 - u), put(x, y + 1, lc(T + 0.1 - 0.6 * u), 0.5 - 0.5 * u);\n    }\n  }\n  const pt = S.pot, [px, py, climb] = posAt(S, pt.A), pose = pt.mode === 1 ? 3 : pt.mode ? 0 : climb ? 2 : 1;\n  figure(px, py, pose, pose === 3 ? (pt.tm % 0.7) / 0.7 : pt.ph, 0.25 + 0.6 * sm(0, 0.3, S.open[pt.tgt]) * (pose === 3), 1);\n  figure(1, 122, S.fb.an > 0 ? 3 : 0, 1 - S.fb.an / 0.5, 0.5 + 0.3 * sin(t * 7), 0);\n  glow(5, 120, 6, lc(Te[0] - 0.1), 0.35);\n\n  // Smoke: puffs summed, then shaded grey, lit from below, or black after a stoke.\n  A.fill(0), K.fill(0), Q.fill(0);\n  for (const p of S.puffs)\n    for (let y = max(0, floor(p.y - p.r)); y \u003c= min(63, p.y + p.r); y++)\n      for (let x = max(0, floor(p.x - p.r)); x \u003c= min(W - 1, p.x + p.r); x++) {\n        const dx = (x + 0.5 - p.x) / p.r, dy = (y + 0.5 - p.y) / p.r, w = p.a * (1 - dx * dx - dy * dy) ** 2, i = y * W + x;\n        if (dx * dx + dy * dy \u003c 1) A[i] += w, K[i] += w * p.k, Q[i] += w * p.hot;\n      }\n  for (let i = 0; i \u003c W * 64; i++) {\n    if (A[i] \u003c 0.01) continue;\n    const y = i >> 6, tx = 0.6 * vn((i & 63) * 0.25 - t * wind, y * 0.25 + t * 0.8) + 0.4 * fn(i, y + (fo >> 2)), gr = 0.7 + 0.5 * tx;\n    const al = min(0.95, (1 - exp(-A[i] * 2.2)) * (0.6 + 0.6 * tx)), dk = K[i] / A[i], hq = min(1, Q[i] / A[i]) * (0.4 + 0.6 * sm(30, 10, y));\n    const o = i * 3;\n    F[o] = mix(F[o], mix(118 * gr, 16, dk) + 160 * hq, al), F[o + 1] = mix(F[o + 1], mix(106 * gr, 11, dk) + 60 * hq, al), F[o + 2] = mix(F[o + 2], mix(104 * gr, 10, dk) + 14 * hq, al);\n  }\n  // Flame licking out of the chimney's mouth.\n  const fh = 2 + 7 * S.flare;\n  glow(S.CX, TOP, 6, [110, 40, 8], S.flare * 0.8);\n  for (let j = 0, u = 0; j \u003c fh; u = ++j / fh)\n    for (let e = -1; e \u003c 2; e++) (u \u003c 0.5 || !e) && put(S.CX + e + wind * j * 0.6 + sin(t * 11 + j) * 0.6 * u, TOP - 1 - j, lc(Te[n] - 0.05 - 0.45 * u - 0.2 * abs(e)), e ? 0.6 : 1 - 0.5 * u);\n  for (const p of S.sparks) put(p.x, p.y, lc(0.35 + 0.75 * (p.life / p.L)), min(1, p.life * 2));\n  for (const m of S.motes) put(m.x, m.y, m.e ? [230, 110, 30] : [80, 78, 84], m.e ? 0.5 + 0.4 * sin(t * 5 + m.ph) : 0.6);\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-noborigama","type":"code","name":"noborigama","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Noborigama\n// Family:  pottery\n// Idea:    A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the noborigama, the wood-fired climbing kiln of Japan and Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1\n//\n// Knob 1: Firing. The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white.\n// Knob 2: Speed. At 2 the potter stokes every few seconds; 0.2 is ten times slower.\n// Knob 3: Chambers. Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves.\n// Knob 4: Draft. Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame.\n// Buttons: K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi % p), b = hash(xi + 1, yi % p), c = hash(xi, (yi + 1) % p);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, (yi + 1) % p)) * su * sv;\n}\n// Fine noise that wraps every 256 rows, for the quick flicker of flame and smoke.\nconst FN = new Float32Array(64 * 256).map((_, i) => vn((i & 63) * 0.9, ((i >> 6) * 84) / 256, 84));\nconst fn = (x, y) => FN[(y & 255) * 64 + (x & 63)];\n\n// Brick, gas and flame by temperature: dull red at 0.15, orange at 0.6, white\n// heat at 1. Red stops at 232: pinned at 255 it hid the flicker of the hottest\n// chambers, since an LED reads by its brightest channel.\nconst RAMP = [[0, 24, 4, 2], [0.15, 92, 13, 4], [0.3, 158, 30, 6], [0.45, 204, 68, 12], [0.6, 226, 114, 24], [0.75, 232, 160, 50], [0.88, 232, 194, 96], [1, 232, 216, 160], [1.25, 236, 230, 204]];\nconst LUT = new Float32Array(768);\nfor (let i = 0; i \u003c 256; i++) {\n  let k = 0;\n  const T = i / 204;\n  while (k \u003c 7 && T > RAMP[k + 1][0]) k++;\n  const u = cl((T - RAMP[k][0]) / (RAMP[k + 1][0] - RAMP[k][0]), 0, 1);\n  for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(RAMP[k][c + 1], RAMP[k + 1][c + 1], u);\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n// One colour array for every put(), to spare the garbage collector.\nconst C3 = [0, 0, 0];\nconst lc = (T, b = 1) => ((T = lut(T)), C3[0] = LUT[T] * b, C3[1] = LUT[T + 1] * b, C3[2] = LUT[T + 2] * b, C3);\n\nconst SKY = 0, EARTH = 1, WALL = 3, GAS = 4, POT = 5, SHELF = 6, HOLE = 7, FLUE = 8;\n// A vault on low walls: roof height across a chamber, 0.4 at the walls, 1 at the crown.\nconst arch = (u) => 0.4 + 0.6 * sqrt(max(0, 1 - (2 * u - 1) ** 2));\nconst TOP = 18; // the chimney's mouth row\nconst WOOD = [150, 118, 66], TOWEL = [214, 204, 184], FACE = [176, 116, 78], COAT = [46, 60, 128], LEGS = [74, 62, 54], RIM = [255, 150, 60];\n// Jar, flared bowl, bottle and cup: half width up the pot, bottom to top.\nconst prof = (k, t) => (k === 0 ? (t > 0.84 ? 0.5 : 0.6 + 0.4 * sin(PI * t)) : k === 1 ? 0.5 + 0.5 * t : k === 2 ? (t \u003c 0.55 ? 0.55 + 0.45 * sin((PI * t) / 0.55) : t > 0.88 ? 0.5 : 0.3) : 0.8);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    t: 0, n: 0, kind: new Uint8Array(N), ch: new Uint8Array(N), V: F32(N), bg: F32(N * 3), gw: F32(N), f: F32(N * 3), A: F32(W * 64), K: F32(W * 64), Q: F32(W * 64),\n    T: F32(8).fill(-1), Hc: F32(8).fill(-1), age: F32(8).fill(9), q: F32(8), open: F32(8), Te: F32(8), Br: F32(8),\n    puffs: [], sparks: [], logs: [], slugs: [], ev: [], motes: [], pot: { A: 0, tgt: 0, mode: 1, tm: -1.6, thr: 0, k: 0, ph: 0 }, fb: { tm: 1, an: 0 }, flare: 0, np: 0, ns: 0,\n  });\n  for (let k = 0; k \u003c 40; k++) S.motes.push({ x: rnd() * W, y: rnd() * H, e: rnd() \u003c 0.45, ph: rnd() * 7 });\n  for (let k = 0; k \u003c 3; k++) S.logs.push({ c: 0, x: 8 + k * 6 + rnd() * 3, y: 120 + (k & 1), len: 5, life: 0.4 + 0.5 * rnd() });\n}\n\nconst front = (S) => ((S.k1 + 1) / 2) * (S.n + 0.3);\n\nfunction build(S, n) {\n  S.n = n;\n  const P = 77 / n, h = P - 3, Wc = 34 - 2 * n, s = (43 - Wc) / (n - 1);\n  // The firebox, then the chambers, each P rows above the last and s LEDs to the right.\n  const g = (S.g = [{ L: 6, W: 25, F: 123, h: 11 }]);\n  for (let c = 1; c \u003c= n; c++) g.push({ L: 14 + (c - 1) * s, W: Wc, F: 108 - (c - 1) * P, h });\n  // The roof row over X inside a chamber; with e = 2, the top of its brick.\n  const inT = (S.inT = (k, X, e = 0) => {\n    const q = g[k], u = (X - q.L + e) / (q.W + 2 * e);\n    return u > 0 && u \u003c 1 ? q.F - (q.h + e) * arch(u) : 1e3;\n  });\n  const outT = (k, X) => inT(k, X, 2), tp = g[n], CX = (S.CX = tp.L + 0.62 * tp.W);\n  const hill = (X) => (X \u003c 4 ? 123 : X \u003c tp.L - 2 ? mix(123, tp.F + 2, (X - 4) / (tp.L - 6)) : mix(tp.F + 2, tp.F - 5, (X - tp.L + 2) / (66 - tp.L)));\n  // Flame passages through each chamber's floor, over the crown of the one below.\n  const holes = [];\n  for (let c = 1; c \u003c= n; c++) for (let a = g[c - 1], x = round(a.L + 0.2 * a.W); x \u003c= a.L + 0.8 * a.W; x += 4) if (x > g[c].L && x \u003c g[c].L + Wc - 2) holes.push([x, c]);\n  const { kind, ch, V, bg, gw } = S;\n  S.stars = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, r = hash(x, y), nz = 0.8 + 0.4 * vn(x * 0.3, y * 0.3);\n    let k = SKY, c = 0, v = 0, col = [0, 0, 0];\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F && Y > inT(j, X)) k = GAS, c = j, v = (g[j].F - Y) / g[j].h;\n    if (!k && abs(X - CX) \u003c 2 && Y > TOP && Y \u003c inT(n, X) + 0.5) k = FLUE, c = n, v = (Y - TOP) / (inT(n, CX) - TOP);\n    if (!k) for (const [hx, hc] of holes) if (x === hx && Y > g[hc].F && Y \u003c inT(hc - 1, X)) k = HOLE, c = hc;\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F + 2 && Y > outT(j, X)) k = WALL, c = j;\n    if (!k && Y > TOP && ((abs(X - CX) \u003c 4 && Y \u003c outT(n, X) + 1) || (Y \u003c TOP + 2 && abs(X - CX) \u003c 5))) k = WALL, c = n + 1;\n    if (!k && Y > hill(X)) k = EARTH;\n    // The fire mouth in the firebox's front wall.\n    if (k === WALL && !c && x \u003c 6 && y > 116) k = GAS, v = (123 - Y) / 11;\n    kind[i] = k, ch[i] = c, V[i] = v;\n    if (k === SKY) {\n      const u = sm(0, 112, Y), dm = hypot(X - 11, Y - 11), e = 26 * exp(-dm / 3.5), st = r \u003c 0.014 && y \u003c 100 && dm > 12 ? 70 + 140 * hash(y, x) : 0;\n      col = [5 + 15 * u + e + st, 9 + 17 * u + e + st, 32 + 30 * u + e + st];\n      // A crescent moon.\n      if (dm \u003c 3.6 && hypot(X - 12.6, Y - 10) > 3.2) col = [226, 222, 196];\n      if (st) S.stars.push(i);\n    } else if (k === EARTH) {\n      // Beds along the slope, stones, grass on top.\n      const dd = Y - hill(X), bd = (0.7 + 0.5 * vn(dd * 0.3 + x * 0.04, 3.5 + x * 0.02)) * nz;\n      col = dd \u003c 1.5 ? [24, 38, 24] : r \u003c 0.035 ? [58, 52, 46] : [30 * bd, 23 * bd, 19 * bd];\n    }\n    // Brick, coursed on the chimney.\n    else if (k === WALL) col = [96, 66, 50].map((v2) => v2 * ((c > n ? y % 3 === 0 || (x + (floor(y / 3) & 1) * 2) % 4 === 0 : r \u003c 0.25) ? 0.62 : 0.85 + 0.3 * r));\n    bg.set(col, i * 3);\n  }\n  gw.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, k = kind[i];\n    // The brick the fire touches.\n    if (k === WALL) V[i] = [1, -1, W, -W].some((d) => kind[i + d] >= GAS && (abs(d) > 1 || (x + d) >> 6 === 0)) ? 1 : 0;\n    // Earth and air by the kiln are warm: how near each LED is to a wall, and whose.\n    if (k \u003c= EARTH) {\n      let best = 9;\n      for (let dy = -4; dy \u003c= 4; dy++)\n        for (let dx = -4; dx \u003c= 4; dx++) {\n          const X = x + dx, Y = y + dy, d = abs(dx) + abs(dy);\n          if (X >= 0 && X \u003c W && Y >= 0 && Y \u003c H && kind[Y * W + X] === WALL && d \u003c best) best = d, ch[i] = ch[Y * W + X];\n        }\n      gw[i] = best \u003c 9 ? exp(-best / 1.4) * (k ? 0.8 : 0.6) : 0;\n    }\n  }\n  // Shelves and pots: two or three levels a chamber, under the vault.\n  const nl = h >= 16 ? 3 : 2, lh = h / nl;\n  for (let c = 1; c \u003c= n; c++) {\n    const q = g[c], x0 = round(q.L + max(6, 0.22 * Wc)), x1 = floor(q.L + Wc - 1);\n    const set = (x, y, k2, v2) => kind[y * W + x] === GAS && ch[y * W + x] === c && ((kind[y * W + x] = k2), (V[y * W + x] = v2));\n    for (let j = 0; j \u003c nl; j++) {\n      const ys = round(q.F - j * lh), base = ys - 1;\n      if (j) {\n        for (let x = x0; x \u003c= x1; x++) if (inT(c, x + 0.5) \u003c ys - 1) set(x, ys, SHELF, 0);\n        for (let y = ys + 1; y \u003c round(q.F - (j - 1) * lh); y++) set(x0, y, SHELF, 0), set(x1 - 1, y, SHELF, 0);\n      }\n      for (let x = x0 + 1; x \u003c x1 - 1; ) {\n        const ty = floor(hash(c * 7 + j, x) * 4), w = [5, 5, 4, 3][ty];\n        const ph = min(floor(lh - 2), [5, 3, 6, 4][ty], floor(base - max(inT(c, x + 0.5), inT(c, x + w - 0.5)) - 1));\n        if (ph \u003c 2 || x + w > x1) break;\n        for (let r = 0; r \u003c ph; r++)\n          for (let xx = x; xx \u003c x + w; xx++) {\n            const dx = xx + 0.5 - x - w / 2;\n            if (abs(dx) \u003c= (prof(ty, (r + 0.5) / ph) * w) / 2 + 0.15) set(xx, base - r, POT, 0.5 - dx / w + (r === ph - 1 ? 0.2 : 0));\n          }\n        x += w + 1;\n      }\n    }\n  }\n  // Ladders up each chamber's front, and the potter's way between the stoke holes.\n  const xs = (c) => g[c].L - 4, px = [], py = [], at = [0], pl = [0];\n  S.lad = [];\n  S.spy = [0];\n  for (let c = 1; c \u003c= n; c++) {\n    const yw = outT(c, g[c].L - 1.5);\n    S.lad.push([round(xs(c)), yw, outT(c - 1, xs(c))]);\n    S.spy.push(round(g[c].F - max(5, 0.35 * h)));\n    at.push(px.length);\n    px.push(xs(c)), py.push(g[c].F + 2);\n    if (c \u003c n) {\n      px.push(xs(c)), py.push(yw);\n      for (let x = g[c].L - 1.5; x \u003c xs(c + 1); x += 1.5) px.push(x), py.push(outT(c, x));\n      px.push(xs(c + 1)), py.push(outT(c, xs(c + 1)));\n    }\n  }\n  for (let j = 1; j \u003c px.length; j++) pl.push(pl[j - 1] + hypot(px[j] - px[j - 1], py[j] - py[j - 1]));\n  Object.assign(S, { px, py, pl, Ac: at.map((j, c) => (c ? pl[j] : 0)) });\n  // The first time, the potter stands by the chamber above the one being fired.\n  const pt = S.pot;\n  if (!S.built) S.built = 1, pt.tgt = min(n, cl(round(front(S)), 1, n) + 1);\n  pt.tgt = min(pt.tgt, n);\n  pt.A = S.Ac[pt.tgt];\n  if (!pt.mode) pt.mode = 2;\n  S.logs = S.logs.filter((l) => l.c \u003c= n);\n  S.slugs = [];\n  S.ev = [];\n}\n\n// A stoke: reduction first, the flame starved and smoky, then the surge.\nconst red = (a) => (a \u003c 0.2 ? a / 0.2 : exp(-(a - 0.2) / 1.1));\nconst surge = (a) => sm(0.9, 2.1, a) * exp(-max(0, a - 2.1) / 2.4);\n\nfunction pulse(S, c, s) {\n  S.age[c] = 0, S.q[c] = s;\n  // Its black smoke reaches the chimney later the lower the chamber.\n  S.ev.push({ at: 0.25 + 0.12 * (S.n - c), fn: () => S.slugs.push({ y: S.inT(S.n, S.CX), a: 0.5 + 0.5 * s }) });\n}\n\nfunction stoke(S, c) {\n  const q = S.g[c];\n  pulse(S, c, 1);\n  S.logs.push({ c, x: q.L + (c ? 0.5 + rnd() * 2 : 2 + rnd() * 9), y: c ? round(q.F) - 1 : 120 + (rnd() \u003c 0.5), len: (c ? 3 : 4) + floor(rnd() * 3), life: 1 });\n  // The firebox's flame goes on through the first chamber.\n  if (!c) S.ev.push({ at: 0.35, fn: () => pulse(S, 1, 0.6) });\n}\n\nfunction throwTo(S, c, delay = 0) {\n  S.ev.push({ at: 0.3 + delay, fn: () => stoke(S, c) });\n  S.open[c] = 1.3 + delay;\n}\n\nfunction puff(S, x, y, vy, r, a, k) {\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vy, r, a, k, hot: 0.7 - 0.2 * k, ph: rnd() * 7 });\n}\n\nfunction spark(S, s) {\n  if (S.sparks.length > 160) S.sparks.shift();\n  const life = 0.8 + 1.4 * rnd();\n  S.sparks.push({ x: S.CX + (rnd() - 0.5) * 3, y: TOP - 1, vx: (rnd() - 0.5) * 6 * s, vy: -(10 + 14 * rnd()) * s, life, L: life });\n}\n\nfunction posAt(S, A) {\n  const { px, py, pl } = S;\n  let j = 1;\n  while (j \u003c pl.length - 1 && pl[j] \u003c A) j++;\n  const u = cl((A - pl[j - 1]) / max(1e-6, pl[j] - pl[j - 1]), 0, 1);\n  return [mix(px[j - 1], px[j], u), mix(py[j - 1], py[j], u), abs(px[j] - px[j - 1]) \u003c 0.01];\n}\n\nfunction step(S, d) {\n  S.t += d;\n  const { n, T, age, q, Hc, Te, Br, wind, pot: pt, fb } = S, fr = front(S), peak = 0.5 + 0.45 * sm(0, 0.5, (S.k1 + 1) / 2);\n  S.cf = cl(round(fr), 1, n);\n  for (let c = 0; c \u003c= n; c++) {\n    // Fired chambers hold white heat; above the one being fired each is cooler.\n    const tg = max(0.2, peak - (1.1 / n) * max(0, c - fr));\n    T[c] = T[c] \u003c 0 ? tg : T[c] + (tg - T[c]) * min(1, d * 0.8);\n    age[c] += d;\n    // Wind up the hill pulls on the chimney; wind down it chokes the draft.\n    Te[c] = T[c] + q[c] * (0.1 * surge(age[c]) - 0.15 * red(age[c])) + 0.02 * sin(S.t * 1.3 + c * 2.1) + 0.06 * wind;\n    Br[c] = 1 - 0.36 * q[c] * red(age[c]);\n    // Heat work for the cones creeps up and hardly comes back.\n    if (Hc[c] \u003c 0) Hc[c] = T[c] - 0.1;\n    Hc[c] += (Te[c] - Hc[c]) * d * (Te[c] > Hc[c] ? 0.07 : 0.02);\n    S.open[c] = max(0, S.open[c] - d);\n  }\n  Te[n + 1] = Te[n] - 0.22, Br[n + 1] = Br[n];\n  for (const e of S.ev) if ((e.at -= d) \u003c= 0) e.fn();\n  S.ev = S.ev.filter((e) => e.at > 0);\n  // The potter stokes twice, watches the spy hole, then goes where wood is needed.\n  pt.ph += d;\n  if (!pt.mode) {\n    pt.A += cl(S.Ac[pt.tgt] - pt.A, -13 * d, 13 * d);\n    if (abs(S.Ac[pt.tgt] - pt.A) \u003c 1e-3) pt.mode = 1, pt.tm = 0, pt.thr = 0;\n  } else if (pt.mode === 1) {\n    pt.tm += d;\n    if (pt.thr \u003c 2 && pt.tm > 0.3 + 0.7 * pt.thr) {\n      throwTo(S, pt.tgt);\n      pt.thr++;\n    }\n    if (pt.tm > 1.5) pt.mode = 2, pt.tm = 0.6 + 0.6 * rnd();\n  } else if ((pt.tm -= d) \u003c= 0) pt.tgt = ++pt.k % 3 ? S.cf : min(n, S.cf + 1), pt.mode = 0;\n  // The stoker feeds the fire mouth.\n  fb.an = max(0, fb.an - d);\n  if ((fb.tm -= d) \u003c= 0) fb.tm = 3 + rnd(), fb.an = 0.5, throwTo(S, 0);\n  for (const l of S.logs) l.life -= d * (0.12 + 0.2 * T[l.c]);\n  S.logs = S.logs.filter((l) => l.life > 0);\n  // Black smoke up the chimney: at the top, a billow, a flare and sparks.\n  for (const s of S.slugs)\n    if ((s.y -= d * 30) \u003c TOP) {\n      s.done = 1;\n      for (let j = 0; j \u003c 3; j++) puff(S, S.CX + (rnd() - 0.5) * 3, TOP - 1 - j * 2, -6 - 4 * rnd(), 3 + rnd(), 0.6 + 0.6 * s.a, 1);\n      for (let j = 0; j \u003c 14 * s.a; j++) spark(S, 1.3);\n      S.flare = min(1.4, S.flare + s.a);\n    }\n  S.slugs = S.slugs.filter((s) => !s.done);\n  S.flare = max(0.15 + 0.35 * sm(0.6, 1, T[n]), S.flare * exp(-d * 1.6));\n  air(S, d);\n  // Ash and embers.\n  for (const m of S.motes) m.x = (m.x + (wind * 9 + 1 + 1.5 * sin(S.t * 0.7 + m.ph)) * d + 65) % 65, m.y = (m.y + (m.e ? -3.5 : 2.2) * d + 129) % 129;\n}\n\n// A grey plume that slows and spreads under the top of the panel, and sparks.\nfunction air(S, d) {\n  const { n, T, wind } = S;\n  for (S.np += d * 6; S.np >= 1; S.np--) puff(S, S.CX + (rnd() - 0.5) * 2, TOP - 1, -7 - 3 * rnd(), 3, 0.55 + 0.2 * T[n], 0);\n  for (const p of S.puffs) {\n    // A strong wind bends the plume over and draws it out downwind.\n    p.vy += (-3.5 * (1 - 0.55 * abs(wind)) * cl(p.y / 12, 0.3, 1) - p.vy) * d * 1.2;\n    p.y += p.vy * d;\n    p.x += (wind * 18 * (0.5 + 0.5 * cl((TOP - p.y) / TOP, 0, 1)) + 1.2 * sin(S.t * 0.9 + p.ph)) * d;\n    p.r = min(10 + p.k, p.r + d * (1.5 + 1.2 * p.k + 2 * cl((8 - p.y) / 8, 0, 1)));\n    p.a -= d * (0.05 + 0.04 * (1 - p.k));\n    p.hot = max(0, p.hot - d * 1.4);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.03 && p.y + p.r > -3 && p.x > -14 && p.x \u003c W + 14);\n  for (S.ns += d * (2 + 5 * T[n]) * (1 + 0.6 * wind); S.ns >= 1; S.ns--) spark(S, 1);\n  for (const p of S.sparks) {\n    p.vy += (-6 - p.vy) * d * 1.5;\n    p.vx += ((rnd() - 0.5) * 40 + (wind * 16 - p.vx) * 2) * d;\n    p.x += p.vx * d, p.y += p.vy * d, p.life -= d;\n  }\n  S.sparks = S.sparks.filter((p) => p.life > 0 && p.y > -1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], n = cl(round(k[2]), 3, 6);\n  S.k1 = cl(k[0], -1, 1);\n  S.wind = cl(k[3], -1, 1);\n  if (n !== S.n) build(S, n);\n  // The kiln has been smoking for hours before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    step(S, 0);\n    for (let j = 0; j \u003c 75; j++) air(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c= n; c++) throwTo(S, c, 0.05 * c);\n  step(S, cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2));\n}\n\nlet F;\nfunction put(x, y, c, a = 1, add = 0) {\n  x = floor(x), y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = add ? F[o + i] + c[i] * a : mix(F[o + i], c[i], a);\n}\nfunction glow(x, y, r, c, a) {\n  for (let Y = floor(y - r); Y \u003c= y + r; Y++) for (let X = floor(x - r); X \u003c= x + r; X++) put(X, Y, c, a * max(0, 1 - hypot(X + 0.5 - x, Y + 0.5 - y) / r) ** 2, 1);\n}\n\n// A figure nine LEDs tall, feet on row y, facing the kiln: white towel, indigo\n// jacket lit orange on the kiln side, paper lantern.\nfunction figure(x, y, pose, ph, rim, lamp) {\n  x = round(x), y = round(y);\n  const a = floor(ph * 6) & 1 ? -1 : 1, pts = [[-1, -8, TOWEL], [0, -8, TOWEL], [0, -7, FACE, 1]];\n  for (let dy = -6; dy \u003c= -4; dy++) pts.push([-1, dy, COAT], [0, dy, COAT], [1, dy, COAT, 1]);\n  const L = (l, b) => pts.push([l, -3, LEGS], [b, -2, LEGS], [b, -1, LEGS], [b, 0, LEGS]);\n  if (pose === 1 && a \u003c 0) L(0, 0);\n  else if (pose === 2) L(a, a), L(-a, -a), pts.push([a, -7, COAT, 1], [-a, -3, LEGS]);\n  else L(-1, -1), L(1, 1);\n  if (pose === 3) pts.push(...(ph \u003c 0.5 ? [[-1, -7, COAT], [-2, -8, COAT]] : [[2, -5, COAT, 1], [3, -5, FACE, 1]]));\n  for (const [dx, dy, c, k] of pts) put(x + dx, y + dy, k ? c.map((v, i) => mix(v, RIM[i], rim)) : c);\n  if (lamp) put(x - 2, y - 4, [120, 70, 40]), put(x - 2, y - 3, [255, 222, 150]), put(x - 2, y - 2, [240, 160, 80]), glow(x - 1.5, y - 2, 7, [70, 44, 16], 1);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  F = S.f;\n  const { n, t, kind, ch, V, bg, gw, Te, Br, g, wind, A, K, Q, q, age } = S, lean = wind * 2.2 + 0.8, fs = 1 + 0.45 * wind, fo = floor(t * fs * 17);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const k = kind[i], c = ch[i], x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, T = Te[c], B = Br[c], v = V[i];\n    // Each LED: backdrop times m plus a ramp colour times b.\n    let j = lut(T * 0.7), b = 0, m = 0;\n    if (k \u003c= EARTH) m = 1, b = gw[i] * 0.28 * B;\n    else if (k === WALL) m = v ? 0.45 : 0.95, j = lut(T * 0.85 - 0.05), b = B * (v ? 0.5 : 0.1);\n    else if (k === GAS) {\n      let I = sm(0.25, 0.85, 0.65 * vn(X * 0.45 - lean * (0.3 + v) * 3 + c * 19, (Y + t * fs * 10) * 0.16) + 0.35 * fn(x, y + fo) + 0.25 * (1 - v) - 0.07);\n      // The firebox floor: a bed of embers under the logs.\n      if (!c && v \u003c 0.3) I = sm(0.35, 0.85, 0.7 * vn(X * 0.7, Y * 0.9 + t * 0.4) + 0.3 * vn(X * 1.7 + t, Y * 1.5) + 0.1);\n      // Darker flame is cooler, orange rather than grey. The firebox burns rougher.\n      const r = c ? 0.14 : 0.26;\n      j = lut(T - r + 2 * r * I), b = B * (1 - 2 * r + 2 * r * I);\n    } else if (k === POT) j = lut(T - 0.18), b = B * (0.32 + 0.22 * v + 0.14 * fn(x >> 1, y + (fo >> 1)));\n    else if (k === SHELF) j = lut(T - 0.2), b = B * 0.4;\n    else if (k === HOLE) j = lut(mix(Te[c - 1], T, 0.5) + 0.04), b = 0.85 + 0.15 * sin(t * 9 + x);\n    else {\n      // The flue: hot gas rising in bands, and each stoke's black smoke going up.\n      let dk = 0;\n      for (const s of S.slugs) dk = max(dk, s.a * exp(-(((Y - s.y) / 3) ** 2)));\n      j = lut(T - 0.12 - 0.2 * v + 0.1 * vn(X * 0.6, (Y + t * 22) * 0.3)), b = B * (0.6 + 0.3 * vn(X * 0.5 + 9, (Y + t * 26) * 0.2)) * (1 - 0.85 * dk);\n    }\n    for (let e = 0; e \u003c 3; e++) F[o + e] = bg[o + e] * m + LUT[j + e] * b;\n  }\n  for (const i of S.stars) for (let e = 0; e \u003c 3; e++) F[i * 3 + e] *= 0.75 + 0.25 * sin(t * 2.3 + i);\n\n  // Burning wood on the floors; in the firebox, thicker logs with their tops alight.\n  for (const l of S.logs)\n    for (let k = 0, T = Te[l.c], len = max(1, round(l.len * min(1, l.life * 1.6))); k \u003c len; k++) {\n      put(l.x + k, l.y, (k + floor(t * 4 + l.x)) % 3 ? lc(T - 0.45, 0.45) : lc(T + 0.1));\n      if (!l.c) put(l.x + k, l.y - 1, lc(T - 0.1 + 0.15 * sin(t * 7 + k + l.x)), 0.85);\n    }\n  for (const [lx, y0, y1] of S.lad) for (let y = floor(y0); y \u003c= y1; y++) put(lx - 1, y, WOOD, 0.7), put(lx + 1, y, WOOD, 0.7), y % 3 || put(lx, y, WOOD, 0.6);\n  for (let c = 1; c \u003c= n; c++) {\n    // The stoke hole, open while wood goes in, and the spy hole.\n    const T = Te[c], wx = floor(g[c].L - 1.5), sy = S.spy[c], fy = round(g[c].F), op = sm(0, 0.3, S.open[c]);\n    for (let y = fy - 3; y \u003c= fy - 2; y++) for (let x = wx; x \u003c= wx + 1; x++) put(x, y, op > 0.05 ? lc(T + 0.05, op) : lc(T - 0.3, 0.35));\n    if (op > 0.05) glow(wx - 1, fy - 2.5, 6, lc(T - 0.1), 0.35 * op);\n    put(wx, sy, lc(T, 0.9)), put(wx + 1, sy, lc(T));\n    for (let x = wx + 2; x \u003c= wx + 6; x++) put(x, sy + 2, lc(T - 0.2, 0.4));\n    // Three cones on a pad, each bending once the heat work passes its number.\n    for (let m = 0; m \u003c 3; m++) {\n      const b = sm(0.57 + 0.12 * m, 0.68 + 0.12 * m, S.Hc[c]), cx = wx + 2 + 2 * m + (b > 0.4), cc = lc(T - 0.15, 0.5);\n      put(cx - (b > 0.4), sy + 1, cc), put(cx, sy, cc, b \u003c 0.75 ? 1 : 0.5), put(cx, b \u003c 0.75 ? sy - 1 : sy + 1, cc);\n    }\n    // Flame out of the spy hole after a stoke, or whenever the wind chokes the chimney.\n    const s = max(q[c] * red(age[c]) * sm(0.15, 0.35, age[c]), 0.55 * q[c - 1] * red(age[c - 1] - 0.3) * sm(0.4, 0.6, age[c - 1])) + 0.3 * max(0, -wind) * (0.7 + 0.3 * sin(t * 3 + c));\n    if (s \u003c 0.05) continue;\n    const x0 = wx - 0.5, y0 = sy + 0.5, len = 2 + 9 * s * (0.8 + 0.2 * sin(t * 13 + c));\n    glow(x0, y0, 5, [120, 50, 10], s);\n    for (let j = 0; j \u003c len; j++) {\n      const u = j / len, x = x0 - j * (1 - 0.6 * max(0, wind)) + wind * j * 0.4, y = y0 - j * j * 0.06 - j * 0.15 + sin(t * 17 + j) * 0.4 * u;\n      put(x, y, lc(T + 0.45 - 0.6 * u), 1 - u * 0.3);\n      if (u \u003c 0.7) put(x, y - 1, lc(T + 0.25 - 0.6 * u), 0.8 - u), put(x, y + 1, lc(T + 0.1 - 0.6 * u), 0.5 - 0.5 * u);\n    }\n  }\n  const pt = S.pot, [px, py, climb] = posAt(S, pt.A), pose = pt.mode === 1 ? 3 : pt.mode ? 0 : climb ? 2 : 1;\n  figure(px, py, pose, pose === 3 ? (pt.tm % 0.7) / 0.7 : pt.ph, 0.25 + 0.6 * sm(0, 0.3, S.open[pt.tgt]) * (pose === 3), 1);\n  figure(1, 122, S.fb.an > 0 ? 3 : 0, 1 - S.fb.an / 0.5, 0.5 + 0.3 * sin(t * 7), 0);\n  glow(5, 120, 6, lc(Te[0] - 0.1), 0.35);\n\n  // Smoke: puffs summed, then shaded grey, lit from below, or black after a stoke.\n  A.fill(0), K.fill(0), Q.fill(0);\n  for (const p of S.puffs)\n    for (let y = max(0, floor(p.y - p.r)); y \u003c= min(63, p.y + p.r); y++)\n      for (let x = max(0, floor(p.x - p.r)); x \u003c= min(W - 1, p.x + p.r); x++) {\n        const dx = (x + 0.5 - p.x) / p.r, dy = (y + 0.5 - p.y) / p.r, w = p.a * (1 - dx * dx - dy * dy) ** 2, i = y * W + x;\n        if (dx * dx + dy * dy \u003c 1) A[i] += w, K[i] += w * p.k, Q[i] += w * p.hot;\n      }\n  for (let i = 0; i \u003c W * 64; i++) {\n    if (A[i] \u003c 0.01) continue;\n    const y = i >> 6, tx = 0.6 * vn((i & 63) * 0.25 - t * wind, y * 0.25 + t * 0.8) + 0.4 * fn(i, y + (fo >> 2)), gr = 0.7 + 0.5 * tx;\n    const al = min(0.95, (1 - exp(-A[i] * 2.2)) * (0.6 + 0.6 * tx)), dk = K[i] / A[i], hq = min(1, Q[i] / A[i]) * (0.4 + 0.6 * sm(30, 10, y));\n    const o = i * 3;\n    F[o] = mix(F[o], mix(118 * gr, 16, dk) + 160 * hq, al), F[o + 1] = mix(F[o + 1], mix(106 * gr, 11, dk) + 60 * hq, al), F[o + 2] = mix(F[o + 2], mix(104 * gr, 10, dk) + 14 * hq, al);\n  }\n  // Flame licking out of the chimney's mouth.\n  const fh = 2 + 7 * S.flare;\n  glow(S.CX, TOP, 6, [110, 40, 8], S.flare * 0.8);\n  for (let j = 0, u = 0; j \u003c fh; u = ++j / fh)\n    for (let e = -1; e \u003c 2; e++) (u \u003c 0.5 || !e) && put(S.CX + e + wind * j * 0.6 + sin(t * 11 + j) * 0.6 * u, TOP - 1 - j, lc(Te[n] - 0.05 - 0.45 * u - 0.2 * abs(e)), e ? 0.6 : 1 - 0.5 * u);\n  for (const p of S.sparks) put(p.x, p.y, lc(0.35 + 0.75 * (p.life / p.L)), min(1, p.life * 2));\n  for (const m of S.motes) put(m.x, m.y, m.e ? [230, 110, 30] : [80, 78, 84], m.e ? 0.5 + 0.4 * sin(t * 5 + m.ph) : 0.6);\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Firing","min":-1,"max":1,"about":"The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the potter stokes every few seconds; 0.2 is ten times slower."},{"name":"Chambers","min":3,"max":6,"about":"Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves."},{"name":"Draft","min":-1,"max":1,"about":"Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame."}],"start":[0,2,3,0.06],"measures":{"motion":0.141,"detail":0.0581,"edges":0.3934,"complexity":1.5788,"coverage":0.9717,"colour":0.2311,"drift":0.0397},"knobResponse":[0.0974,0.0413,0.0659,0.0443]},{"slug":"one-bit","title":"One Bit","family":"pixel","round":17,"note":"달밤 바닷가 벼랑에 선 등대를 두 색과 Bayer 순서 디더링만으로 그린 1비트 화면이에요. 빛줄기가 돌고 구름이 달 앞을 지나고 안개 둑이 바다 위에서 오르내려도 한 프레임에 뒤집히는 픽셀은 열 개 안팎이에요. K1 이 앰버 단말기, 게임보이, 매킨토시, 전자잉크, 플레이데이트의 두 색을 골라요.","idea":"A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","layer":{"id":"layer-one-bit","type":"code","name":"one-bit","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver."},{"name":"Time","min":0.2,"max":3,"about":"How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still."},{"name":"Fog","min":0,"max":1,"about":"How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear."},{"name":"Wind","min":0,"max":1,"about":"At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff."}],"start":[0,2,0,0.06],"measures":{"motion":0.0337,"detail":0.3203,"edges":1,"complexity":0.0918,"coverage":0.242,"colour":0.3801,"drift":0.0416},"knobResponse":[0.2143,0.057,0.0812,0.0548]},{"slug":"op-stripes","title":"Op Stripes","family":"wave","round":1,"note":"브리짓 라일리 식의 두 색 가로줄이에요. 밑으로 지나가는 넓은 부풂 둘이 줄 간격을 벌려서 평평한 패널이 부푸는 것처럼 보여요.","idea":"Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-op-stripes","type":"code","name":"op-stripes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown."},{"name":"Drift","min":0.1,"max":6,"about":"How fast the bulges travel under the stripes and the bend rolls along them."},{"name":"Stripes","min":14,"max":26,"about":"Stripe pairs from top to bottom where nothing is swelling."},{"name":"Swell","min":0,"max":1,"about":"How far the stripes open over a bulge, from a soft swell to a wide flat lens."}],"start":[0,2,14,0.06],"measures":{"motion":0.0622,"detail":0.0792,"edges":1,"complexity":0.0654,"coverage":1,"colour":0.6118,"drift":0.0499},"knobResponse":[0.4596,0.1655,0.1894,0.1993]},{"slug":"origami","title":"Origami","family":"paper","round":26,"note":"어두운 호두나무 탁자의 램프 아래에서 청록 종이 한 장이 아홉 단계로 한 주름씩 접혀 종이학이 돼요. 학은 날개를 한 번 친 뒤 다시 펼쳐지고, 펼친 종이에는 산접기와 골접기의 주름 무늬가 남아요. K1 이 세이가이하 무늬 종이와 금박 같은 종이를 고르고, 누르면 학이 바로 펼쳐져요.","idea":"A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.","buttons":"K1 tap opens the crane flat now, or lays the next sheet if it is already open.","code":"// ===== Patternflow pattern =====\n// Title:   Origami\n// Family:  paper\n// Idea:    A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the orizuru, the paper crane folded from the bird base\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1\n//\n// Knob 1: Paper. Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which.\n// Knob 2: Speed. How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Sheets. How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3.\n// Knob 4: Lamp. Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way.\n// Buttons: K1 tap opens the crane flat now, or lays the next sheet if it is already open.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, hypot, log, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// The sheet is a diamond with corners (0, ±1) and (±1, 0), its crease-pattern\n// coordinates. K is where the petal fold's hinge crosses the square base and Q\n// is half the width of a leg once it is thinned.\nconst K = 1 - Math.SQRT1_2;\nconst Q = Math.SQRT1_2 * Math.tan(PI / 16);\n\n// An affine map [a, b, c, d, e, f]: x' = a x + b y + e, y' = c x + d y + f.\nconst mul = (M, A) => [\n  M[0] * A[0] + M[1] * A[2], M[0] * A[1] + M[1] * A[3],\n  M[2] * A[0] + M[3] * A[2], M[2] * A[1] + M[3] * A[3],\n  M[0] * A[4] + M[1] * A[5] + M[4], M[2] * A[4] + M[3] * A[5] + M[5],\n];\nconst tx = (A, c, j) => A[0] * c[j] + A[1] * c[j + 1] + A[4];\nconst ty = (A, c, j) => A[2] * c[j] + A[3] * c[j + 1] + A[5];\n// A flap turned by theta about the hinge through (hx, hy) with unit normal\n// (nx, ny) toward the flap, as seen from straight above: k = cos(theta) - 1.\n// At k = -2 the flap lies flat on the other side, mirrored.\nfunction hingeM(h, k) {\n  const [hx, hy, nx, ny] = h;\n  const hn = hx * nx + hy * ny;\n  return [1 + k * nx * nx, k * nx * ny, k * nx * ny, 1 + k * ny * ny, -k * hn * nx, -k * hn * ny];\n}\n\n// The crane. Each step is one or more folds: a crease line, a point on the\n// side that moves, which facets go (by the eighth of the sheet they came from\n// or where they lie now), and +1 for a valley fold that lands on top or -1\n// for one that goes behind.\nconst ALL = () => true;\nconst sec = (...s) => (f) => s.includes(f.sec);\nconst low = (...s) => (f, x, y) => y > K && s.includes(f.sec);\nconst legL = (f, x, y) => x \u003c 0 && y > K;\nconst legR = (f, x, y) => x > 0 && y > K;\n// The legs turn up about a line through (0, YP) along NL, so neck and tail\n// rise at 40 degrees.\nconst YP = 0.34;\nconst NL = [-0.906, 0.423];\nconst CRANE = [\n  // In half, corner to corner.\n  [{ l: [-1, 0, 1, 0], s: [0, -1], m: 1, sel: ALL }],\n  // Turned so the fold lies along the top.\n  [],\n  // The side corners down to the bottom one: the square base.\n  [{ l: [0, 0, -0.5, 0.5], s: [-1, 0], m: 1, sel: ALL }, { l: [0, 0, 0.5, 0.5], s: [1, 0], m: 1, sel: ALL }],\n  // Kite folds, the front layer to the front and the back one behind.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: 1, sel: sec(3) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: 1, sel: sec(0) },\n    { l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: sec(2) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: sec(1) }],\n  // The petal folds: front and back layers lift up past the top.\n  [{ l: [-1, K, 1, K], s: [0, 1], m: 1, sel: sec(0, 3) }, { l: [-1, K, 1, K], s: [0, 1], m: -1, sel: sec(1, 2) }],\n  // The sides of the middle layers tuck in: the bird base.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: low(4, 5) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: low(6, 7) }],\n  // The legs thinned.\n  [{ l: [0, 1, -Q, K], s: [-K, K], m: -1, sel: legL }, { l: [0, 1, Q, K], s: [K, K], m: -1, sel: legR }],\n  // The legs reverse-folded up into neck and tail.\n  [{ l: [0, YP, NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legL }, { l: [0, YP, -NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legR }],\n  // The tip of the neck reverse-folded down into the head.\n  [{ l: [-0.515, -0.013, -0.374, 0.004], s: [-0.506, -0.084], m: -1, sel: (f, x) => f.H[8] && x \u003c 0 }],\n];\n// Seconds per step at Speed 2, and how the sheet lies on the table at each\n// state: turned 45 degrees it is a square on the panel.\nconst DUR = [1.1, 0.7, 1.1, 0.8, 1.1, 0.8, 0.7, 1.0, 0.6];\nconst PHI = [PI / 4, PI / 4, 0, 0, 0, 0, 0, 0, 0, 0];\n// The finished crane flaps its front wing about the line it was lifted on.\nconst FLAPH = [0, K, 0, -1, 1];\n\n// A crease as a point on it and its unit normal toward the side that moves.\nfunction lineOf(mv) {\n  const [x1, y1, x2, y2] = mv.l;\n  const l = hypot(x2 - x1, y2 - y1) * ((mv.s[0] - x1) * (y1 - y2) + (mv.s[1] - y1) * (x2 - x1) \u003c 0 ? -1 : 1);\n  return [x1, y1, (y1 - y2) / l, (x2 - x1) / l];\n}\n\n// Cut a convex polygon by the sign of d, keeping the side s.\nfunction clip(cp, d, s) {\n  const out = [];\n  d.forEach((v, i) => {\n    const j = (i + 1) % d.length;\n    const a = v * s;\n    const b = d[j] * s;\n    const t = a / (a - b);\n    if (a >= 0) out.push(cp[2 * i], cp[2 * i + 1]);\n    if (a * b \u003c 0) out.push(cp[2 * i] + t * (cp[2 * j] - cp[2 * i]), cp[2 * i + 1] + t * (cp[2 * j + 1] - cp[2 * i + 1]));\n  });\n  return out;\n}\n\n// Fold the sheet through every step once, cutting facets along each crease\n// they cross. Each facet keeps where it lies, which way up and in which layer\n// at every state, so any moment of the folding and unfolding is a lookup.\nfunction build(steps) {\n  const C = [[1, 0], [0.5, 0.5], [0, 1], [-0.5, 0.5], [-1, 0], [-0.5, -0.5], [0, -1], [0.5, -0.5]];\n  const F = C.map((c, s) => ({ cp: [0, 0, c[0], c[1], ...C[(s + 1) % 8]], sec: s, T: [[1, 0, 0, 1, 0, 0]], L: [0], H: [null] }));\n  const n = steps.length;\n  for (let k = 1; k \u003c= n; k++) {\n    const top = max(...F.map((f) => f.L[k - 1]));\n    const bot = min(...F.map((f) => f.L[k - 1]));\n    for (const f of F) (f.T[k] = f.T[k - 1]), (f.L[k] = f.L[k - 1]), (f.H[k] = null);\n    for (const mv of steps[k - 1]) {\n      const h = lineOf(mv);\n      const [px, py, nx, ny] = h;\n      const moved = [];\n      for (const f of F.slice()) {\n        if (f.H[k]) continue;\n        const A = f.T[k - 1];\n        const cp = f.cp;\n        const m = cp.length / 2;\n        let cx = 0;\n        let cy = 0;\n        const d = [];\n        for (let j = 0; j \u003c 2 * m; j += 2) {\n          const x = tx(A, cp, j);\n          const y = ty(A, cp, j);\n          (cx += x / m), (cy += y / m);\n          const dd = (x - px) * nx + (y - py) * ny;\n          d.push(abs(dd) \u003c 1e-9 ? 0 : dd);\n        }\n        if (!mv.sel(f, cx, cy) || max(...d) \u003c 1e-6) continue;\n        let g = f;\n        if (min(...d) \u003c -1e-6) {\n          g = { cp: clip(cp, d, 1), sec: f.sec, T: f.T.slice(), L: f.L.slice(), H: f.H.slice() };\n          f.cp = clip(cp, d, -1);\n          F.push(g);\n        }\n        moved.push(g);\n      }\n      let lo = 1e9;\n      let hi = -1e9;\n      for (const g of moved) (lo = min(lo, g.L[k - 1])), (hi = max(hi, g.L[k - 1]));\n      for (const g of moved) {\n        g.T[k] = mul(hingeM(h, -2), g.T[k - 1]);\n        g.H[k] = [px, py, nx, ny, mv.m];\n        g.L[k] = mv.m > 0 ? top + 1 + hi - g.L[k - 1] : bot - 1 - (g.L[k - 1] - lo);\n      }\n    }\n  }\n  // Facets that lie together at a state share a group there: a crease shows\n  // between two facets that lie together now but were parted at the deepest\n  // fold.\n  // And the extent of each state, turned as it lies, for the camera.\n  const nf = F.length;\n  const gid = new Int32Array(nf * (n + 1));\n  const det = new Int8Array(nf * (n + 1));\n  const box = [];\n  for (let k = 0; k \u003c= n; k++) {\n    const seen = new Map();\n    const c = cos(PHI[k]);\n    const s = sin(PHI[k]);\n    const b = [1e9, -1e9, 1e9, -1e9];\n    F.forEach((f, i) => {\n      const A = f.T[k];\n      const key = A.map((v) => round(v * 1e4)).join();\n      if (!seen.has(key)) seen.set(key, seen.size);\n      gid[i * (n + 1) + k] = seen.get(key);\n      det[i * (n + 1) + k] = A[0] * A[3] - A[1] * A[2] > 0 ? 1 : -1;\n      for (let j = 0; j \u003c f.cp.length; j += 2) {\n        const x = tx(A, f.cp, j);\n        const y = ty(A, f.cp, j);\n        const u = x * c - y * s;\n        const v = x * s + y * c;\n        (b[0] = min(b[0], u)), (b[1] = max(b[1], u)), (b[2] = min(b[2], v)), (b[3] = max(b[3], v));\n      }\n    });\n    const u = (b[0] + b[1]) / 2;\n    const v = (b[2] + b[3]) / 2;\n    box.push([u * c + v * s, -u * s + v * c, b[1] - b[0], b[3] - b[2]]);\n  }\n  const tilt = F32(nf * 2);\n  for (let i = 0; i \u003c nf * 2; i++) tilt[i] = Math.random() - 0.5;\n  return { F, n, gid, det, box, tilt };\n}\n\n// Papers: colour, second colour, print. 0 plain kami, 1 seigaiha waves,\n// 2 metal foil, 3 kanoko dots, 4 ichimatsu checks.\nconst PAPERS = [\n  [[0.16, 0.72, 0.8], null, 0],\n  [[0.13, 0.2, 0.58], [0.78, 0.86, 0.96], 1],\n  [[1, 0.78, 0.3], null, 2],\n  [[0.96, 0.46, 0.6], [1, 0.95, 0.96], 3],\n  [[0.98, 0.78, 0.12], null, 0],\n  [[0.12, 0.46, 0.26], [0.94, 0.88, 0.7], 4],\n  [[0.74, 0.78, 0.84], null, 2],\n  [[0.9, 0.16, 0.12], null, 0],\n];\nconst WHITE = [0.95, 0.93, 0.87];\n\nfunction print(kind, s, t) {\n  if (kind === 1) {\n    // Rows of scales two wide, each row half a scale lower and covering the one above.\n    const X = s * 3;\n    const Y = t * 3;\n    const j = ceil(2 * Y);\n    for (let jj = j + 1; jj >= j; jj--) {\n      const ox = jj & 1;\n      const dx = X - ox - 2 * round((X - ox) / 2);\n      const dy = Y - jj / 2;\n      const r = sqrt(dx * dx + dy * dy);\n      if (r \u003c 1 || jj === j) return (r * 3) % 1 \u003c 0.4 ? 1 : 0;\n    }\n  }\n  if (kind === 3) {\n    const X = s * 5;\n    const Y = t * 5;\n    const ox = floor(Y) & 1 ? 0.5 : 0;\n    const dx = X + ox - floor(X + ox) - 0.5;\n    const dy = Y - floor(Y) - 0.5;\n    return dx * dx + dy * dy \u003c 0.06 ? 1 : 0;\n  }\n  if (kind === 4) return (floor(s * 4 + 4) + floor(t * 4 + 4)) & 1;\n  return 0;\n}\n\n// The order a sheet goes through.\nconst WAIT = 0, IN = 1, REST = 2, FOLD = 3, HOLD = 4, SIT = 5, UNFOLD = 6, CREASE = 7;\n\nconst newSheet = (sl, first) =>\n  Object.assign(sl, { old: first ? null : { seq: sl.seq, kmax: sl.kmax }, seq: sl.seq + 1, ph: IN, pt: 0, k: 0, u: 1, kmax: 0, rush: false });\nconst slot = (i) => ({ i, ph: WAIT, pt: -2.4 * i, k: 0, u: 1, kmax: 0, seq: -1, old: null, rush: false });\nconst F32 = (n) => new Float32Array(n);\n\nexport function setup(params) {\n  const grain = F32(N);\n  for (let y = 0; y \u003c H; y++) {\n    let w = Math.random();\n    for (let x = 0; x \u003c W; x++) {\n      w += 0.25 * (Math.random() - 0.5);\n      grain[y * W + x] = 0.75 + 0.2 * sin(y * 0.9 + 3 * sin(x * 0.05 + y * 0.02)) + 0.1 * w;\n    }\n  }\n  params.s = { M: build(CRANE), slots: [slot(0)], n: 1, base: 0, rate: 1, lamp: 0.06, lampKey: null, grain, bg: F32(N * 3) };\n  for (const k of [\"LX\", \"LY\", \"LZ\", \"LI\", \"HZ\"]) params.s[k] = F32(N);\n}\n\nfunction stepSlot(sl, h, M) {\n  if (sl.rush && (sl.ph === UNFOLD || sl.ph === CREASE)) h *= 4;\n  sl.pt += h;\n  const ph = sl.ph;\n  if (ph === WAIT && sl.pt >= 0) newSheet(sl, true);\n  else if (ph === IN && sl.pt >= 1.2) Object.assign(sl, { ph: REST, pt: 0, old: null });\n  else if (ph === REST && sl.pt >= 1) Object.assign(sl, { ph: FOLD, k: 1, u: 0 });\n  else if (ph === FOLD) {\n    sl.u = min(1, sl.u + h / DUR[sl.k - 1]);\n    if (sl.u >= 1) Object.assign(sl, { kmax: max(sl.kmax, sl.k), ph: HOLD, pt: 0 });\n  } else if (ph === HOLD && sl.pt >= 0.25) {\n    if (sl.k \u003c M.n) Object.assign(sl, { k: sl.k + 1, u: 0, ph: FOLD });\n    else Object.assign(sl, { ph: SIT, pt: 0 });\n  } else if (ph === SIT && sl.pt >= 3) sl.ph = UNFOLD;\n  else if (ph === UNFOLD && (sl.u -= h / 0.45) \u003c= 0) {\n    if (sl.k > 1) (sl.k--), (sl.u += 1);\n    else Object.assign(sl, { k: 0, u: 1, ph: CREASE, pt: 0 });\n  } else if (ph === CREASE && (sl.pt >= 2.5 || sl.rush)) newSheet(sl, false);\n}\n\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.base = floor(cl(k[0], 0, 1) * (PAPERS.length - 0.01));\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.lamp = cl(k[3], -1, 1);\n  const n = cl(round(k[2]), 1, 3);\n  if (n !== S.n) {\n    S.n = n;\n    while (S.slots.length \u003c n) S.slots.push(slot(S.slots.length));\n    S.slots.length = n;\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sl of S.slots) {\n      if (sl.ph === FOLD || sl.ph === HOLD || sl.ph === SIT) {\n        if (sl.ph !== FOLD) sl.u = 1;\n        sl.kmax = max(sl.kmax, sl.k);\n        sl.ph = UNFOLD;\n      } else if (sl.ph !== WAIT) {\n        if (sl.ph === UNFOLD || sl.ph === CREASE) sl.rush = true;\n        else newSheet(sl, false);\n      }\n    }\n  for (const sl of S.slots) stepSlot(sl, dt * S.rate, S.M);\n}\n\n// The lamp: a bulb LH above the table at (lx, LY0). Each LED keeps the unit\n// vector to it, the half vector's height for the shine on foil, and how much\n// light reaches it. The table is dark walnut, kept below 24 of 255; on it lie\n// the pack of paper, the next sheet on top, and a bone folder.\nconst LH = 80;\nconst LY0 = 34;\nconst PC = cos(-0.2);\nconst PS = sin(-0.2);\nfunction lampField(S, next) {\n  const lx = 31.5 + 44 * S.lamp;\n  const { LX, LY, LZ, LI, HZ, bg, grain } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = lx - x - 0.5;\n      const dy = LY0 - y - 0.5;\n      const r2 = dx * dx + dy * dy;\n      const l = sqrt(r2 + LH * LH);\n      LX[p] = dx / l;\n      LY[p] = dy / l;\n      LZ[p] = LH / l;\n      LI[p] = (LH * LH) / (LH * LH + 0.4 * r2);\n      HZ[p] = (LZ[p] + 1) / sqrt(LX[p] * LX[p] + LY[p] * LY[p] + (LZ[p] + 1) * (LZ[p] + 1));\n      const lit = LI[p] * (0.22 + 0.9 * LZ[p]);\n      const w = min(21, 255 * 0.085 * (0.25 + 0.75 * LI[p]) * grain[p]);\n      let c = [w, w * 0.56, w * 0.32];\n      // The pack: four sheets a little askew, each showing an edge of its colour.\n      for (let j = 0; j \u003c 4; j++) {\n        const X = x + 0.5 + 1 - 0.9 * j;\n        const Y = y + 0.5 - 1 - 1.3 * j;\n        const u = (X * PC + Y * PS) / 13;\n        const v = (Y * PC - X * PS) / 13;\n        if (abs(u) \u003c 1 && abs(v) \u003c 1) {\n          const P = PAPERS[(next + j) % PAPERS.length];\n          const col = P[2] !== 2 && print(P[2], u, v) ? P[1] : P[0];\n          const e = (abs(u) > 0.92 || abs(v) > 0.92 ? 0.7 : 1) * (j ? 0.8 : 1) * (P[2] === 2 ? 0.75 : 1);\n          c = col.map((v) => 255 * v * lit * e);\n          break;\n        }\n      }\n      // The bone folder, rounded at both ends, its back catching the lamp.\n      const ax = x + 0.5 - 47;\n      const ay = y + 0.5 - 118;\n      const t = cl((ax * 14 - ay * 15) / 421, 0, 1);\n      const d = hypot(ax - 14 * t, ay + 15 * t);\n      if (d \u003c 1.7) c = [0.8, 0.74, 0.62].map((v) => 255 * v * lit * (0.75 + 0.35 * (1 - d / 1.7)));\n      bg[p * 3] = c[0];\n      bg[p * 3 + 1] = c[1];\n      bg[p * 3 + 2] = c[2];\n    }\n  S.lp = [lx, LY0, LH];\n}\n\n// Per frame: every facet on the table, as drawn.\n// RA maps it from the crease pattern to the panel, RN is its lit normal, RK\n// its draw order; RS the side up, RP the paper, RQ the sheet; RG and RX its\n// group now and at the deepest fold, RU and RL its side and layer there.\nconst MAXR = 1600;\nconst [RA, RN, RK, RL, RM] = [6, 3, 1, 1, 1].map((k) => F32(MAXR * k));\nconst [RS, RU] = [new Int8Array(MAXR), new Int8Array(MAXR)];\nconst [RP, RQ, RG, RX] = [0, 0, 0, 0].map(() => new Int32Array(MAXR));\nconst ORD = [];\nconst RCP = [];\nconst ID = new Int16Array(N);\nconst SHK = F32(N);\nconst VX = F32(64);\nconst VY = F32(64);\nlet nr = 0;\n\n// Fill a convex polygon with v; mode 0 writes facet ids, mode 1 raises the\n// shadow key.\nfunction fill(cnt, v, mode) {\n  let ya = 1e9;\n  let yb = -1e9;\n  for (let i = 0; i \u003c cnt; i++) (ya = min(ya, VY[i])), (yb = max(yb, VY[i]));\n  const y0 = max(0, ceil(ya - 0.5));\n  const y1 = min(H - 1, floor(yb - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 1e9;\n    let xr = -1e9;\n    for (let i = 0; i \u003c cnt; i++) {\n      const j = i + 1 \u003c cnt ? i + 1 : 0;\n      const ay = VY[i];\n      const by = VY[j];\n      if ((ay \u003c= py && by > py) || (by \u003c= py && ay > py)) {\n        const x = VX[i] + ((py - ay) / (by - ay)) * (VX[j] - VX[i]);\n        (xl = min(xl, x)), (xr = max(xr, x));\n      }\n    }\n    const x0 = max(0, ceil(xl - 0.5));\n    const x1 = min(W - 1, floor(xr - 0.5));\n    const row = y * W;\n    if (mode === 0) for (let x = x0; x \u003c= x1; x++) ID[row + x] = v;\n    else for (let x = x0; x \u003c= x1; x++) if (SHK[row + x] \u003c v) SHK[row + x] = v;\n  }\n}\n\n// The camera for state j of a sheet in its slot: turned PHI[j], scaled to fit.\nfunction viewOf(M, j, fw, fh, zmax) {\n  const b = M.box[j];\n  return [PHI[j], log(min(fw / b[2], fh / b[3], zmax)), b[0], b[1]];\n}\n\n// Put one sheet on the table: model M at step k, progress u, in slot\n// region (cy, fw, fh), paper index pi. dx and dphi slide a new sheet in.\nfunction placeSheet(S, M, k, u, flap, kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, keyBase, mem, qid) {\n  const n1 = M.n + 1;\n  const go = k > 0 && u > 0 && u \u003c 1;\n  const jb = k === 0 ? 0 : u >= 1 ? k : k - 1;\n  const a = viewOf(M, k > 0 ? k - 1 : 0, fw, fh, zmax);\n  const b = viewOf(M, k, fw, fh, zmax);\n  const w = k > 0 ? ease(u) : 1;\n  const phi = mix(a[0], b[0], w) + dphi;\n  const z = exp(mix(a[1], b[1], w));\n  const ccx = mix(a[2], b[2], w);\n  const ccy = mix(a[3], b[3], w);\n  const c = cos(phi) * z;\n  const s = sin(phi) * z;\n  const V = [c, -s, s, c, 31.5 + dx - (c * ccx - s * ccy), cyp + dy - (s * ccx + c * ccy)];\n  const [lx, ly, lh] = S.lp;\n  M.F.forEach((f, i) => {\n    if (nr >= MAXR) return;\n    const r = nr++;\n    // The hinge this facet turns on now, if any: the fold under way, or the\n    // finished crane's wing beat.\n    let hg = null;\n    let th = 0;\n    if (go && f.H[k]) (hg = f.H[k]), (th = PI * ease(u));\n    else if (flap > 0 && (f.sec === 0 || f.sec === 3)) (hg = FLAPH), (th = flap);\n    const A0 = f.T[jb];\n    const ct = cos(th);\n    const st = sin(th);\n    const A = mul(V, hg ? mul(hingeM(hg, ct - 1), A0) : A0);\n    RA.set(A, r * 6);\n    RCP[r] = f.cp;\n    let side = M.det[i * n1 + jb];\n    let nx = 0;\n    let ny = 0;\n    let nz = 1;\n    let key = f.L[jb];\n    if (hg) {\n      const m = hg[4];\n      // The hinge normal as it lies on the panel.\n      const hx = hg[2] * cos(phi) - hg[3] * sin(phi);\n      const hy = hg[2] * sin(phi) + hg[3] * cos(phi);\n      nx = -m * st * hx;\n      ny = -m * st * hy;\n      nz = ct;\n      if (ct \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz), (side = -side);\n      key = (m > 0 ? 1e6 : -1e6) + (ct >= 0 ? f.L[jb] : go ? f.L[k] : -f.L[jb]);\n      // A lifted flap throws its shadow away from the lamp.\n      if (m > 0 && st > 0.02) {\n        const cp = f.cp;\n        const cnt = cp.length / 2;\n        for (let j = 0; j \u003c cnt; j++) {\n          const hz = (((tx(A0, cp, 2 * j) - hg[0]) * hg[2] + (ty(A0, cp, 2 * j) - hg[1]) * hg[3]) * st * z) / lh;\n          const px = tx(A, cp, 2 * j);\n          const py = ty(A, cp, 2 * j);\n          VX[j] = px + hz * (px - lx);\n          VY[j] = py + hz * (py - ly);\n        }\n        fill(cnt, keyBase + key, 1);\n      }\n    }\n    // Paper never lies quite flat: each layer tips a little its own way, and a\n    // sheet opened out again keeps a tilt in every facet between its creases.\n    const g = M.gid[i * n1 + jb];\n    nx += 0.06 * M.tilt[2 * g] + 0.12 * mem * M.tilt[2 * i + 1];\n    ny += 0.06 * M.tilt[2 * g + 1] + 0.12 * mem * M.tilt[2 * i];\n    const nl = hypot(nx, ny, nz);\n    RN[r * 3] = nx / nl;\n    RN[r * 3 + 1] = ny / nl;\n    RN[r * 3 + 2] = nz / nl;\n    RS[r] = side;\n    RK[r] = keyBase + key;\n    RP[r] = pi;\n    RG[r] = g;\n    RX[r] = M.gid[i * n1 + kmax];\n    RU[r] = M.det[i * n1 + kmax];\n    RL[r] = f.L[kmax];\n    RQ[r] = qid;\n    RM[r] = mem;\n    ORD.push(r);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const next = (S.base + S.slots[0].seq + 1) % PAPERS.length;\n  const lk = S.lamp + 10 * next;\n  if (S.lampKey !== lk) (S.lampKey = lk), lampField(S, next);\n  const { M, LX, LY, LZ, LI, HZ, bg } = S;\n  nr = 0;\n  ORD.length = 0;\n  SHK.fill(-1e12);\n  const n = S.slots.length;\n  const sh = H / n;\n  const zmax = [74, 50, 34][n - 1];\n  const fw = n === 1 ? 60 : n === 2 ? 56 : 46;\n  const fh = sh - (n === 1 ? 12 : 8);\n  let q = 0;\n  for (const sl of S.slots) {\n    if (sl.ph === WAIT) continue;\n    const cyp = sl.i * sh + sh / 2;\n    const pi = (S.base + 3 * sl.i + sl.seq) % PAPERS.length;\n    if (sl.old) placeSheet(S, M, 0, 1, 0, sl.old.kmax, (S.base + 3 * sl.i + sl.old.seq) % PAPERS.length, cyp, fw, fh, zmax, 0, 0, 0, -1e8, 1, q++);\n    let dx = 0;\n    let dy = 0;\n    let dphi = 0;\n    if (sl.ph === IN) {\n      // Slid off the pack in the corner.\n      const e = 1 - ease(sl.pt / 1.2);\n      dx = -62 * e;\n      dy = (8 - cyp) * e;\n      dphi = -0.2 * e;\n    }\n    let flap = 0;\n    if (sl.ph === SIT) {\n      // The crane beats its wing once.\n      const t = (sl.pt - 0.6) / 1.6;\n      if (t > 0 && t \u003c 1) flap = 0.78 * PI * sin(PI * t) ** 2;\n    }\n    const mem = sl.ph === UNFOLD || sl.ph === CREASE ? 1 : 0;\n    placeSheet(S, M, sl.k, sl.u, flap, sl.kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, 0, mem, q++);\n  }\n  ORD.sort((a, b) => RK[a] - RK[b]);\n  ID.fill(-1);\n  for (const r of ORD) {\n    const cp = RCP[r];\n    const A = RA.subarray(r * 6, r * 6 + 6);\n    for (let j = 0; j \u003c cp.length; j += 2) (VX[j / 2] = tx(A, cp, j)), (VY[j / 2] = ty(A, cp, j));\n    fill(cp.length / 2, r, 0);\n  }\n  const lx = S.lp[0];\n  const sx = lx \u003c 31.5 ? -1 : 1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const r = ID[p];\n      if (r \u003c 0) {\n        const f = SHK[p] > -1e11 ? 0.55 : 1;\n        display.setPixel(x, y, bg[p * 3] * f, bg[p * 3 + 1] * f, bg[p * 3 + 2] * f);\n      } else {\n        // The print, found back in the crease pattern: paper square s, t in -1..1.\n        const o = r * 6;\n        const [a, b, c, d] = [RA[o], RA[o + 1], RA[o + 2], RA[o + 3]];\n        const det = a * d - b * c;\n        const P = PAPERS[RP[r]];\n        let col = P[0];\n        let kind = P[2];\n        if (RS[r] \u003c 0) (col = WHITE), (kind = -1);\n        else if (P[1] && abs(det) > 1e-3) {\n          const X = x + 0.5 - RA[o + 4];\n          const Y = y + 0.5 - RA[o + 5];\n          const cu = (d * X - b * Y) / det;\n          const cv = (a * Y - c * X) / det;\n          if (print(kind, cu + cv, cv - cu)) col = P[1];\n        }\n        const nz = RN[r * 3 + 2];\n        const I = LI[p];\n        const hz = max(0, nz * HZ[p]);\n        // Kami is matte with a little sheen; foil is darker but throws the lamp back.\n        const fo = kind === 2;\n        const lit = I * (0.22 + 0.9 * max(0, RN[r * 3] * LX[p] + RN[r * 3 + 1] * LY[p] + nz * LZ[p])) * (fo ? 0.8 : 1);\n        const sp = I * (fo ? 0.25 + 0.9 * hz ** 12 : 0.06 * hz ** 8);\n        // Shade under a lifted flap, and along the edge of a layer above.\n        const k = RK[r];\n        let f = SHK[p] > k ? 0.55 : 1;\n        const s = x - sx >= 0 && x - sx \u003c W && y > 0 ? ID[p - W - sx] : -1;\n        if (s >= 0 && RQ[s] === RQ[r] && RK[s] > k + 0.5 && RG[s] !== RG[r]) f *= 0.66;\n        // Creases left from the folding.\n        if (RM[r] > 0) {\n          for (const s of [x + 1 \u003c W ? ID[p + 1] : -1, y + 1 \u003c H ? ID[p + W] : -1])\n            if (s >= 0 && s !== r && RQ[s] === RQ[r] && RG[s] === RG[r] && RX[s] !== RX[r]) {\n              const up = RL[s] > RL[r] ? s : r;\n              f *= RU[up] * RS[r] > 0 ? 1.22 : 0.72;\n              break;\n            }\n        }\n        const m = 255 * f * (fo ? lit + sp : lit);\n        const e = fo ? 0 : 255 * f * sp;\n        display.setPixel(x, y, min(255, col[0] * m + e), min(255, col[1] * m + e), min(255, col[2] * m + e));\n      }\n    }\n}\n","layer":{"id":"layer-origami","type":"code","name":"origami","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Origami\n// Family:  paper\n// Idea:    A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the orizuru, the paper crane folded from the bird base\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1\n//\n// Knob 1: Paper. Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which.\n// Knob 2: Speed. How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Sheets. How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3.\n// Knob 4: Lamp. Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way.\n// Buttons: K1 tap opens the crane flat now, or lays the next sheet if it is already open.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, hypot, log, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// The sheet is a diamond with corners (0, ±1) and (±1, 0), its crease-pattern\n// coordinates. K is where the petal fold's hinge crosses the square base and Q\n// is half the width of a leg once it is thinned.\nconst K = 1 - Math.SQRT1_2;\nconst Q = Math.SQRT1_2 * Math.tan(PI / 16);\n\n// An affine map [a, b, c, d, e, f]: x' = a x + b y + e, y' = c x + d y + f.\nconst mul = (M, A) => [\n  M[0] * A[0] + M[1] * A[2], M[0] * A[1] + M[1] * A[3],\n  M[2] * A[0] + M[3] * A[2], M[2] * A[1] + M[3] * A[3],\n  M[0] * A[4] + M[1] * A[5] + M[4], M[2] * A[4] + M[3] * A[5] + M[5],\n];\nconst tx = (A, c, j) => A[0] * c[j] + A[1] * c[j + 1] + A[4];\nconst ty = (A, c, j) => A[2] * c[j] + A[3] * c[j + 1] + A[5];\n// A flap turned by theta about the hinge through (hx, hy) with unit normal\n// (nx, ny) toward the flap, as seen from straight above: k = cos(theta) - 1.\n// At k = -2 the flap lies flat on the other side, mirrored.\nfunction hingeM(h, k) {\n  const [hx, hy, nx, ny] = h;\n  const hn = hx * nx + hy * ny;\n  return [1 + k * nx * nx, k * nx * ny, k * nx * ny, 1 + k * ny * ny, -k * hn * nx, -k * hn * ny];\n}\n\n// The crane. Each step is one or more folds: a crease line, a point on the\n// side that moves, which facets go (by the eighth of the sheet they came from\n// or where they lie now), and +1 for a valley fold that lands on top or -1\n// for one that goes behind.\nconst ALL = () => true;\nconst sec = (...s) => (f) => s.includes(f.sec);\nconst low = (...s) => (f, x, y) => y > K && s.includes(f.sec);\nconst legL = (f, x, y) => x \u003c 0 && y > K;\nconst legR = (f, x, y) => x > 0 && y > K;\n// The legs turn up about a line through (0, YP) along NL, so neck and tail\n// rise at 40 degrees.\nconst YP = 0.34;\nconst NL = [-0.906, 0.423];\nconst CRANE = [\n  // In half, corner to corner.\n  [{ l: [-1, 0, 1, 0], s: [0, -1], m: 1, sel: ALL }],\n  // Turned so the fold lies along the top.\n  [],\n  // The side corners down to the bottom one: the square base.\n  [{ l: [0, 0, -0.5, 0.5], s: [-1, 0], m: 1, sel: ALL }, { l: [0, 0, 0.5, 0.5], s: [1, 0], m: 1, sel: ALL }],\n  // Kite folds, the front layer to the front and the back one behind.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: 1, sel: sec(3) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: 1, sel: sec(0) },\n    { l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: sec(2) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: sec(1) }],\n  // The petal folds: front and back layers lift up past the top.\n  [{ l: [-1, K, 1, K], s: [0, 1], m: 1, sel: sec(0, 3) }, { l: [-1, K, 1, K], s: [0, 1], m: -1, sel: sec(1, 2) }],\n  // The sides of the middle layers tuck in: the bird base.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: low(4, 5) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: low(6, 7) }],\n  // The legs thinned.\n  [{ l: [0, 1, -Q, K], s: [-K, K], m: -1, sel: legL }, { l: [0, 1, Q, K], s: [K, K], m: -1, sel: legR }],\n  // The legs reverse-folded up into neck and tail.\n  [{ l: [0, YP, NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legL }, { l: [0, YP, -NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legR }],\n  // The tip of the neck reverse-folded down into the head.\n  [{ l: [-0.515, -0.013, -0.374, 0.004], s: [-0.506, -0.084], m: -1, sel: (f, x) => f.H[8] && x \u003c 0 }],\n];\n// Seconds per step at Speed 2, and how the sheet lies on the table at each\n// state: turned 45 degrees it is a square on the panel.\nconst DUR = [1.1, 0.7, 1.1, 0.8, 1.1, 0.8, 0.7, 1.0, 0.6];\nconst PHI = [PI / 4, PI / 4, 0, 0, 0, 0, 0, 0, 0, 0];\n// The finished crane flaps its front wing about the line it was lifted on.\nconst FLAPH = [0, K, 0, -1, 1];\n\n// A crease as a point on it and its unit normal toward the side that moves.\nfunction lineOf(mv) {\n  const [x1, y1, x2, y2] = mv.l;\n  const l = hypot(x2 - x1, y2 - y1) * ((mv.s[0] - x1) * (y1 - y2) + (mv.s[1] - y1) * (x2 - x1) \u003c 0 ? -1 : 1);\n  return [x1, y1, (y1 - y2) / l, (x2 - x1) / l];\n}\n\n// Cut a convex polygon by the sign of d, keeping the side s.\nfunction clip(cp, d, s) {\n  const out = [];\n  d.forEach((v, i) => {\n    const j = (i + 1) % d.length;\n    const a = v * s;\n    const b = d[j] * s;\n    const t = a / (a - b);\n    if (a >= 0) out.push(cp[2 * i], cp[2 * i + 1]);\n    if (a * b \u003c 0) out.push(cp[2 * i] + t * (cp[2 * j] - cp[2 * i]), cp[2 * i + 1] + t * (cp[2 * j + 1] - cp[2 * i + 1]));\n  });\n  return out;\n}\n\n// Fold the sheet through every step once, cutting facets along each crease\n// they cross. Each facet keeps where it lies, which way up and in which layer\n// at every state, so any moment of the folding and unfolding is a lookup.\nfunction build(steps) {\n  const C = [[1, 0], [0.5, 0.5], [0, 1], [-0.5, 0.5], [-1, 0], [-0.5, -0.5], [0, -1], [0.5, -0.5]];\n  const F = C.map((c, s) => ({ cp: [0, 0, c[0], c[1], ...C[(s + 1) % 8]], sec: s, T: [[1, 0, 0, 1, 0, 0]], L: [0], H: [null] }));\n  const n = steps.length;\n  for (let k = 1; k \u003c= n; k++) {\n    const top = max(...F.map((f) => f.L[k - 1]));\n    const bot = min(...F.map((f) => f.L[k - 1]));\n    for (const f of F) (f.T[k] = f.T[k - 1]), (f.L[k] = f.L[k - 1]), (f.H[k] = null);\n    for (const mv of steps[k - 1]) {\n      const h = lineOf(mv);\n      const [px, py, nx, ny] = h;\n      const moved = [];\n      for (const f of F.slice()) {\n        if (f.H[k]) continue;\n        const A = f.T[k - 1];\n        const cp = f.cp;\n        const m = cp.length / 2;\n        let cx = 0;\n        let cy = 0;\n        const d = [];\n        for (let j = 0; j \u003c 2 * m; j += 2) {\n          const x = tx(A, cp, j);\n          const y = ty(A, cp, j);\n          (cx += x / m), (cy += y / m);\n          const dd = (x - px) * nx + (y - py) * ny;\n          d.push(abs(dd) \u003c 1e-9 ? 0 : dd);\n        }\n        if (!mv.sel(f, cx, cy) || max(...d) \u003c 1e-6) continue;\n        let g = f;\n        if (min(...d) \u003c -1e-6) {\n          g = { cp: clip(cp, d, 1), sec: f.sec, T: f.T.slice(), L: f.L.slice(), H: f.H.slice() };\n          f.cp = clip(cp, d, -1);\n          F.push(g);\n        }\n        moved.push(g);\n      }\n      let lo = 1e9;\n      let hi = -1e9;\n      for (const g of moved) (lo = min(lo, g.L[k - 1])), (hi = max(hi, g.L[k - 1]));\n      for (const g of moved) {\n        g.T[k] = mul(hingeM(h, -2), g.T[k - 1]);\n        g.H[k] = [px, py, nx, ny, mv.m];\n        g.L[k] = mv.m > 0 ? top + 1 + hi - g.L[k - 1] : bot - 1 - (g.L[k - 1] - lo);\n      }\n    }\n  }\n  // Facets that lie together at a state share a group there: a crease shows\n  // between two facets that lie together now but were parted at the deepest\n  // fold.\n  // And the extent of each state, turned as it lies, for the camera.\n  const nf = F.length;\n  const gid = new Int32Array(nf * (n + 1));\n  const det = new Int8Array(nf * (n + 1));\n  const box = [];\n  for (let k = 0; k \u003c= n; k++) {\n    const seen = new Map();\n    const c = cos(PHI[k]);\n    const s = sin(PHI[k]);\n    const b = [1e9, -1e9, 1e9, -1e9];\n    F.forEach((f, i) => {\n      const A = f.T[k];\n      const key = A.map((v) => round(v * 1e4)).join();\n      if (!seen.has(key)) seen.set(key, seen.size);\n      gid[i * (n + 1) + k] = seen.get(key);\n      det[i * (n + 1) + k] = A[0] * A[3] - A[1] * A[2] > 0 ? 1 : -1;\n      for (let j = 0; j \u003c f.cp.length; j += 2) {\n        const x = tx(A, f.cp, j);\n        const y = ty(A, f.cp, j);\n        const u = x * c - y * s;\n        const v = x * s + y * c;\n        (b[0] = min(b[0], u)), (b[1] = max(b[1], u)), (b[2] = min(b[2], v)), (b[3] = max(b[3], v));\n      }\n    });\n    const u = (b[0] + b[1]) / 2;\n    const v = (b[2] + b[3]) / 2;\n    box.push([u * c + v * s, -u * s + v * c, b[1] - b[0], b[3] - b[2]]);\n  }\n  const tilt = F32(nf * 2);\n  for (let i = 0; i \u003c nf * 2; i++) tilt[i] = Math.random() - 0.5;\n  return { F, n, gid, det, box, tilt };\n}\n\n// Papers: colour, second colour, print. 0 plain kami, 1 seigaiha waves,\n// 2 metal foil, 3 kanoko dots, 4 ichimatsu checks.\nconst PAPERS = [\n  [[0.16, 0.72, 0.8], null, 0],\n  [[0.13, 0.2, 0.58], [0.78, 0.86, 0.96], 1],\n  [[1, 0.78, 0.3], null, 2],\n  [[0.96, 0.46, 0.6], [1, 0.95, 0.96], 3],\n  [[0.98, 0.78, 0.12], null, 0],\n  [[0.12, 0.46, 0.26], [0.94, 0.88, 0.7], 4],\n  [[0.74, 0.78, 0.84], null, 2],\n  [[0.9, 0.16, 0.12], null, 0],\n];\nconst WHITE = [0.95, 0.93, 0.87];\n\nfunction print(kind, s, t) {\n  if (kind === 1) {\n    // Rows of scales two wide, each row half a scale lower and covering the one above.\n    const X = s * 3;\n    const Y = t * 3;\n    const j = ceil(2 * Y);\n    for (let jj = j + 1; jj >= j; jj--) {\n      const ox = jj & 1;\n      const dx = X - ox - 2 * round((X - ox) / 2);\n      const dy = Y - jj / 2;\n      const r = sqrt(dx * dx + dy * dy);\n      if (r \u003c 1 || jj === j) return (r * 3) % 1 \u003c 0.4 ? 1 : 0;\n    }\n  }\n  if (kind === 3) {\n    const X = s * 5;\n    const Y = t * 5;\n    const ox = floor(Y) & 1 ? 0.5 : 0;\n    const dx = X + ox - floor(X + ox) - 0.5;\n    const dy = Y - floor(Y) - 0.5;\n    return dx * dx + dy * dy \u003c 0.06 ? 1 : 0;\n  }\n  if (kind === 4) return (floor(s * 4 + 4) + floor(t * 4 + 4)) & 1;\n  return 0;\n}\n\n// The order a sheet goes through.\nconst WAIT = 0, IN = 1, REST = 2, FOLD = 3, HOLD = 4, SIT = 5, UNFOLD = 6, CREASE = 7;\n\nconst newSheet = (sl, first) =>\n  Object.assign(sl, { old: first ? null : { seq: sl.seq, kmax: sl.kmax }, seq: sl.seq + 1, ph: IN, pt: 0, k: 0, u: 1, kmax: 0, rush: false });\nconst slot = (i) => ({ i, ph: WAIT, pt: -2.4 * i, k: 0, u: 1, kmax: 0, seq: -1, old: null, rush: false });\nconst F32 = (n) => new Float32Array(n);\n\nexport function setup(params) {\n  const grain = F32(N);\n  for (let y = 0; y \u003c H; y++) {\n    let w = Math.random();\n    for (let x = 0; x \u003c W; x++) {\n      w += 0.25 * (Math.random() - 0.5);\n      grain[y * W + x] = 0.75 + 0.2 * sin(y * 0.9 + 3 * sin(x * 0.05 + y * 0.02)) + 0.1 * w;\n    }\n  }\n  params.s = { M: build(CRANE), slots: [slot(0)], n: 1, base: 0, rate: 1, lamp: 0.06, lampKey: null, grain, bg: F32(N * 3) };\n  for (const k of [\"LX\", \"LY\", \"LZ\", \"LI\", \"HZ\"]) params.s[k] = F32(N);\n}\n\nfunction stepSlot(sl, h, M) {\n  if (sl.rush && (sl.ph === UNFOLD || sl.ph === CREASE)) h *= 4;\n  sl.pt += h;\n  const ph = sl.ph;\n  if (ph === WAIT && sl.pt >= 0) newSheet(sl, true);\n  else if (ph === IN && sl.pt >= 1.2) Object.assign(sl, { ph: REST, pt: 0, old: null });\n  else if (ph === REST && sl.pt >= 1) Object.assign(sl, { ph: FOLD, k: 1, u: 0 });\n  else if (ph === FOLD) {\n    sl.u = min(1, sl.u + h / DUR[sl.k - 1]);\n    if (sl.u >= 1) Object.assign(sl, { kmax: max(sl.kmax, sl.k), ph: HOLD, pt: 0 });\n  } else if (ph === HOLD && sl.pt >= 0.25) {\n    if (sl.k \u003c M.n) Object.assign(sl, { k: sl.k + 1, u: 0, ph: FOLD });\n    else Object.assign(sl, { ph: SIT, pt: 0 });\n  } else if (ph === SIT && sl.pt >= 3) sl.ph = UNFOLD;\n  else if (ph === UNFOLD && (sl.u -= h / 0.45) \u003c= 0) {\n    if (sl.k > 1) (sl.k--), (sl.u += 1);\n    else Object.assign(sl, { k: 0, u: 1, ph: CREASE, pt: 0 });\n  } else if (ph === CREASE && (sl.pt >= 2.5 || sl.rush)) newSheet(sl, false);\n}\n\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.base = floor(cl(k[0], 0, 1) * (PAPERS.length - 0.01));\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.lamp = cl(k[3], -1, 1);\n  const n = cl(round(k[2]), 1, 3);\n  if (n !== S.n) {\n    S.n = n;\n    while (S.slots.length \u003c n) S.slots.push(slot(S.slots.length));\n    S.slots.length = n;\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sl of S.slots) {\n      if (sl.ph === FOLD || sl.ph === HOLD || sl.ph === SIT) {\n        if (sl.ph !== FOLD) sl.u = 1;\n        sl.kmax = max(sl.kmax, sl.k);\n        sl.ph = UNFOLD;\n      } else if (sl.ph !== WAIT) {\n        if (sl.ph === UNFOLD || sl.ph === CREASE) sl.rush = true;\n        else newSheet(sl, false);\n      }\n    }\n  for (const sl of S.slots) stepSlot(sl, dt * S.rate, S.M);\n}\n\n// The lamp: a bulb LH above the table at (lx, LY0). Each LED keeps the unit\n// vector to it, the half vector's height for the shine on foil, and how much\n// light reaches it. The table is dark walnut, kept below 24 of 255; on it lie\n// the pack of paper, the next sheet on top, and a bone folder.\nconst LH = 80;\nconst LY0 = 34;\nconst PC = cos(-0.2);\nconst PS = sin(-0.2);\nfunction lampField(S, next) {\n  const lx = 31.5 + 44 * S.lamp;\n  const { LX, LY, LZ, LI, HZ, bg, grain } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = lx - x - 0.5;\n      const dy = LY0 - y - 0.5;\n      const r2 = dx * dx + dy * dy;\n      const l = sqrt(r2 + LH * LH);\n      LX[p] = dx / l;\n      LY[p] = dy / l;\n      LZ[p] = LH / l;\n      LI[p] = (LH * LH) / (LH * LH + 0.4 * r2);\n      HZ[p] = (LZ[p] + 1) / sqrt(LX[p] * LX[p] + LY[p] * LY[p] + (LZ[p] + 1) * (LZ[p] + 1));\n      const lit = LI[p] * (0.22 + 0.9 * LZ[p]);\n      const w = min(21, 255 * 0.085 * (0.25 + 0.75 * LI[p]) * grain[p]);\n      let c = [w, w * 0.56, w * 0.32];\n      // The pack: four sheets a little askew, each showing an edge of its colour.\n      for (let j = 0; j \u003c 4; j++) {\n        const X = x + 0.5 + 1 - 0.9 * j;\n        const Y = y + 0.5 - 1 - 1.3 * j;\n        const u = (X * PC + Y * PS) / 13;\n        const v = (Y * PC - X * PS) / 13;\n        if (abs(u) \u003c 1 && abs(v) \u003c 1) {\n          const P = PAPERS[(next + j) % PAPERS.length];\n          const col = P[2] !== 2 && print(P[2], u, v) ? P[1] : P[0];\n          const e = (abs(u) > 0.92 || abs(v) > 0.92 ? 0.7 : 1) * (j ? 0.8 : 1) * (P[2] === 2 ? 0.75 : 1);\n          c = col.map((v) => 255 * v * lit * e);\n          break;\n        }\n      }\n      // The bone folder, rounded at both ends, its back catching the lamp.\n      const ax = x + 0.5 - 47;\n      const ay = y + 0.5 - 118;\n      const t = cl((ax * 14 - ay * 15) / 421, 0, 1);\n      const d = hypot(ax - 14 * t, ay + 15 * t);\n      if (d \u003c 1.7) c = [0.8, 0.74, 0.62].map((v) => 255 * v * lit * (0.75 + 0.35 * (1 - d / 1.7)));\n      bg[p * 3] = c[0];\n      bg[p * 3 + 1] = c[1];\n      bg[p * 3 + 2] = c[2];\n    }\n  S.lp = [lx, LY0, LH];\n}\n\n// Per frame: every facet on the table, as drawn.\n// RA maps it from the crease pattern to the panel, RN is its lit normal, RK\n// its draw order; RS the side up, RP the paper, RQ the sheet; RG and RX its\n// group now and at the deepest fold, RU and RL its side and layer there.\nconst MAXR = 1600;\nconst [RA, RN, RK, RL, RM] = [6, 3, 1, 1, 1].map((k) => F32(MAXR * k));\nconst [RS, RU] = [new Int8Array(MAXR), new Int8Array(MAXR)];\nconst [RP, RQ, RG, RX] = [0, 0, 0, 0].map(() => new Int32Array(MAXR));\nconst ORD = [];\nconst RCP = [];\nconst ID = new Int16Array(N);\nconst SHK = F32(N);\nconst VX = F32(64);\nconst VY = F32(64);\nlet nr = 0;\n\n// Fill a convex polygon with v; mode 0 writes facet ids, mode 1 raises the\n// shadow key.\nfunction fill(cnt, v, mode) {\n  let ya = 1e9;\n  let yb = -1e9;\n  for (let i = 0; i \u003c cnt; i++) (ya = min(ya, VY[i])), (yb = max(yb, VY[i]));\n  const y0 = max(0, ceil(ya - 0.5));\n  const y1 = min(H - 1, floor(yb - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 1e9;\n    let xr = -1e9;\n    for (let i = 0; i \u003c cnt; i++) {\n      const j = i + 1 \u003c cnt ? i + 1 : 0;\n      const ay = VY[i];\n      const by = VY[j];\n      if ((ay \u003c= py && by > py) || (by \u003c= py && ay > py)) {\n        const x = VX[i] + ((py - ay) / (by - ay)) * (VX[j] - VX[i]);\n        (xl = min(xl, x)), (xr = max(xr, x));\n      }\n    }\n    const x0 = max(0, ceil(xl - 0.5));\n    const x1 = min(W - 1, floor(xr - 0.5));\n    const row = y * W;\n    if (mode === 0) for (let x = x0; x \u003c= x1; x++) ID[row + x] = v;\n    else for (let x = x0; x \u003c= x1; x++) if (SHK[row + x] \u003c v) SHK[row + x] = v;\n  }\n}\n\n// The camera for state j of a sheet in its slot: turned PHI[j], scaled to fit.\nfunction viewOf(M, j, fw, fh, zmax) {\n  const b = M.box[j];\n  return [PHI[j], log(min(fw / b[2], fh / b[3], zmax)), b[0], b[1]];\n}\n\n// Put one sheet on the table: model M at step k, progress u, in slot\n// region (cy, fw, fh), paper index pi. dx and dphi slide a new sheet in.\nfunction placeSheet(S, M, k, u, flap, kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, keyBase, mem, qid) {\n  const n1 = M.n + 1;\n  const go = k > 0 && u > 0 && u \u003c 1;\n  const jb = k === 0 ? 0 : u >= 1 ? k : k - 1;\n  const a = viewOf(M, k > 0 ? k - 1 : 0, fw, fh, zmax);\n  const b = viewOf(M, k, fw, fh, zmax);\n  const w = k > 0 ? ease(u) : 1;\n  const phi = mix(a[0], b[0], w) + dphi;\n  const z = exp(mix(a[1], b[1], w));\n  const ccx = mix(a[2], b[2], w);\n  const ccy = mix(a[3], b[3], w);\n  const c = cos(phi) * z;\n  const s = sin(phi) * z;\n  const V = [c, -s, s, c, 31.5 + dx - (c * ccx - s * ccy), cyp + dy - (s * ccx + c * ccy)];\n  const [lx, ly, lh] = S.lp;\n  M.F.forEach((f, i) => {\n    if (nr >= MAXR) return;\n    const r = nr++;\n    // The hinge this facet turns on now, if any: the fold under way, or the\n    // finished crane's wing beat.\n    let hg = null;\n    let th = 0;\n    if (go && f.H[k]) (hg = f.H[k]), (th = PI * ease(u));\n    else if (flap > 0 && (f.sec === 0 || f.sec === 3)) (hg = FLAPH), (th = flap);\n    const A0 = f.T[jb];\n    const ct = cos(th);\n    const st = sin(th);\n    const A = mul(V, hg ? mul(hingeM(hg, ct - 1), A0) : A0);\n    RA.set(A, r * 6);\n    RCP[r] = f.cp;\n    let side = M.det[i * n1 + jb];\n    let nx = 0;\n    let ny = 0;\n    let nz = 1;\n    let key = f.L[jb];\n    if (hg) {\n      const m = hg[4];\n      // The hinge normal as it lies on the panel.\n      const hx = hg[2] * cos(phi) - hg[3] * sin(phi);\n      const hy = hg[2] * sin(phi) + hg[3] * cos(phi);\n      nx = -m * st * hx;\n      ny = -m * st * hy;\n      nz = ct;\n      if (ct \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz), (side = -side);\n      key = (m > 0 ? 1e6 : -1e6) + (ct >= 0 ? f.L[jb] : go ? f.L[k] : -f.L[jb]);\n      // A lifted flap throws its shadow away from the lamp.\n      if (m > 0 && st > 0.02) {\n        const cp = f.cp;\n        const cnt = cp.length / 2;\n        for (let j = 0; j \u003c cnt; j++) {\n          const hz = (((tx(A0, cp, 2 * j) - hg[0]) * hg[2] + (ty(A0, cp, 2 * j) - hg[1]) * hg[3]) * st * z) / lh;\n          const px = tx(A, cp, 2 * j);\n          const py = ty(A, cp, 2 * j);\n          VX[j] = px + hz * (px - lx);\n          VY[j] = py + hz * (py - ly);\n        }\n        fill(cnt, keyBase + key, 1);\n      }\n    }\n    // Paper never lies quite flat: each layer tips a little its own way, and a\n    // sheet opened out again keeps a tilt in every facet between its creases.\n    const g = M.gid[i * n1 + jb];\n    nx += 0.06 * M.tilt[2 * g] + 0.12 * mem * M.tilt[2 * i + 1];\n    ny += 0.06 * M.tilt[2 * g + 1] + 0.12 * mem * M.tilt[2 * i];\n    const nl = hypot(nx, ny, nz);\n    RN[r * 3] = nx / nl;\n    RN[r * 3 + 1] = ny / nl;\n    RN[r * 3 + 2] = nz / nl;\n    RS[r] = side;\n    RK[r] = keyBase + key;\n    RP[r] = pi;\n    RG[r] = g;\n    RX[r] = M.gid[i * n1 + kmax];\n    RU[r] = M.det[i * n1 + kmax];\n    RL[r] = f.L[kmax];\n    RQ[r] = qid;\n    RM[r] = mem;\n    ORD.push(r);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const next = (S.base + S.slots[0].seq + 1) % PAPERS.length;\n  const lk = S.lamp + 10 * next;\n  if (S.lampKey !== lk) (S.lampKey = lk), lampField(S, next);\n  const { M, LX, LY, LZ, LI, HZ, bg } = S;\n  nr = 0;\n  ORD.length = 0;\n  SHK.fill(-1e12);\n  const n = S.slots.length;\n  const sh = H / n;\n  const zmax = [74, 50, 34][n - 1];\n  const fw = n === 1 ? 60 : n === 2 ? 56 : 46;\n  const fh = sh - (n === 1 ? 12 : 8);\n  let q = 0;\n  for (const sl of S.slots) {\n    if (sl.ph === WAIT) continue;\n    const cyp = sl.i * sh + sh / 2;\n    const pi = (S.base + 3 * sl.i + sl.seq) % PAPERS.length;\n    if (sl.old) placeSheet(S, M, 0, 1, 0, sl.old.kmax, (S.base + 3 * sl.i + sl.old.seq) % PAPERS.length, cyp, fw, fh, zmax, 0, 0, 0, -1e8, 1, q++);\n    let dx = 0;\n    let dy = 0;\n    let dphi = 0;\n    if (sl.ph === IN) {\n      // Slid off the pack in the corner.\n      const e = 1 - ease(sl.pt / 1.2);\n      dx = -62 * e;\n      dy = (8 - cyp) * e;\n      dphi = -0.2 * e;\n    }\n    let flap = 0;\n    if (sl.ph === SIT) {\n      // The crane beats its wing once.\n      const t = (sl.pt - 0.6) / 1.6;\n      if (t > 0 && t \u003c 1) flap = 0.78 * PI * sin(PI * t) ** 2;\n    }\n    const mem = sl.ph === UNFOLD || sl.ph === CREASE ? 1 : 0;\n    placeSheet(S, M, sl.k, sl.u, flap, sl.kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, 0, mem, q++);\n  }\n  ORD.sort((a, b) => RK[a] - RK[b]);\n  ID.fill(-1);\n  for (const r of ORD) {\n    const cp = RCP[r];\n    const A = RA.subarray(r * 6, r * 6 + 6);\n    for (let j = 0; j \u003c cp.length; j += 2) (VX[j / 2] = tx(A, cp, j)), (VY[j / 2] = ty(A, cp, j));\n    fill(cp.length / 2, r, 0);\n  }\n  const lx = S.lp[0];\n  const sx = lx \u003c 31.5 ? -1 : 1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const r = ID[p];\n      if (r \u003c 0) {\n        const f = SHK[p] > -1e11 ? 0.55 : 1;\n        display.setPixel(x, y, bg[p * 3] * f, bg[p * 3 + 1] * f, bg[p * 3 + 2] * f);\n      } else {\n        // The print, found back in the crease pattern: paper square s, t in -1..1.\n        const o = r * 6;\n        const [a, b, c, d] = [RA[o], RA[o + 1], RA[o + 2], RA[o + 3]];\n        const det = a * d - b * c;\n        const P = PAPERS[RP[r]];\n        let col = P[0];\n        let kind = P[2];\n        if (RS[r] \u003c 0) (col = WHITE), (kind = -1);\n        else if (P[1] && abs(det) > 1e-3) {\n          const X = x + 0.5 - RA[o + 4];\n          const Y = y + 0.5 - RA[o + 5];\n          const cu = (d * X - b * Y) / det;\n          const cv = (a * Y - c * X) / det;\n          if (print(kind, cu + cv, cv - cu)) col = P[1];\n        }\n        const nz = RN[r * 3 + 2];\n        const I = LI[p];\n        const hz = max(0, nz * HZ[p]);\n        // Kami is matte with a little sheen; foil is darker but throws the lamp back.\n        const fo = kind === 2;\n        const lit = I * (0.22 + 0.9 * max(0, RN[r * 3] * LX[p] + RN[r * 3 + 1] * LY[p] + nz * LZ[p])) * (fo ? 0.8 : 1);\n        const sp = I * (fo ? 0.25 + 0.9 * hz ** 12 : 0.06 * hz ** 8);\n        // Shade under a lifted flap, and along the edge of a layer above.\n        const k = RK[r];\n        let f = SHK[p] > k ? 0.55 : 1;\n        const s = x - sx >= 0 && x - sx \u003c W && y > 0 ? ID[p - W - sx] : -1;\n        if (s >= 0 && RQ[s] === RQ[r] && RK[s] > k + 0.5 && RG[s] !== RG[r]) f *= 0.66;\n        // Creases left from the folding.\n        if (RM[r] > 0) {\n          for (const s of [x + 1 \u003c W ? ID[p + 1] : -1, y + 1 \u003c H ? ID[p + W] : -1])\n            if (s >= 0 && s !== r && RQ[s] === RQ[r] && RG[s] === RG[r] && RX[s] !== RX[r]) {\n              const up = RL[s] > RL[r] ? s : r;\n              f *= RU[up] * RS[r] > 0 ? 1.22 : 0.72;\n              break;\n            }\n        }\n        const m = 255 * f * (fo ? lit + sp : lit);\n        const e = fo ? 0 : 255 * f * sp;\n        display.setPixel(x, y, min(255, col[0] * m + e), min(255, col[1] * m + e), min(255, col[2] * m + e));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower."},{"name":"Sheets","min":1,"max":3,"about":"How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3."},{"name":"Lamp","min":-1,"max":1,"about":"Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way."}],"start":[0,2,1,0.06],"measures":{"motion":0.2431,"detail":0.0239,"edges":0.722,"complexity":0.6298,"coverage":0.2643,"colour":0.177,"drift":0.2549},"knobResponse":[0.2136,0.2519,0.2517,0.0599]},{"slug":"outer-billiards","title":"Outer Billiards","family":"geometry","round":30,"note":"정오각형 밖의 평면을 점마다 꼭짓점 대칭 뛰기 몇 번 만에 제자리로 오는지로 칠했어요. 십각형과 오각형 목걸이가 둘레를 감고, 흰 점 하나가 제 궤도를 뛰어요.","idea":"A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.","buttons":"K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.","code":"// ===== Patternflow pattern =====\n// Title:   Outer Billiards\n// Family:  geometry\n// Idea:    A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: outer billiards (Bernhard Neumann, 1959) and Sergei Tabachnikov's regular pentagon (1995), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green.\n// Knob 2: Speed. At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes.\n// Knob 3: Sides. The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second.\n// Knob 4: Zoom. How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1.\n// Buttons: K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, atan2, log, exp, PI, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst TAU = 2 * PI;\n\n// The map has the polygon's symmetry, turns by 2pi/n and mirrors in its\n// axes (a mirror turns the map into its inverse, which has the same periods),\n// so one wedge of angle pi/n holds it all. The wedge is gridded log-polar:\n// radius RA to RMAX in CR cells per e-fold, angle in steps of 1/CR.\nconst RA = 0.7, RMAX = 33, CR = 110, NI = ceil(CR * log(RMAX / RA));\nconst MAXIT = 4000, INSIDE = 65535, BUDGET = 500000;\n\n// Four sample points in each LED: radius in LEDs, CR times its log, angle in turns.\nconst SR = new Float32Array(NP * 4), SL = new Float32Array(NP * 4), SA = new Float32Array(NP * 4);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++)\n    for (let s = 0; s \u003c 4; s++) {\n      const q = (y * W + x) * 4 + s, dx = x + (s & 1 ? 0.75 : 0.25) - 32, dy = 64 - y - (s & 2 ? 0.75 : 0.25);\n      SR[q] = sqrt(dx * dx + dy * dy);\n      SL[q] = CR * log(SR[q]);\n      SA[q] = atan2(dy, dx) / TAU;\n    }\n\n// A regular n-gon on the unit circle, vertex 0 on the x axis; edge k runs\n// from vertex k to k + 1 and its outward normal is NX, NY.\nfunction makePoly(n) {\n  const G = { n, r: cos(PI / n), NJ: ceil((PI / n) * CR), next: 0, VX: [], VY: [], NX: [], NY: [] };\n  for (let k = 0; k \u003c n; k++) {\n    G.VX.push(cos((TAU * k) / n));\n    G.VY.push(sin((TAU * k) / n));\n    G.NX.push(cos((TAU * (k + 0.5)) / n));\n    G.NY.push(sin((TAU * (k + 0.5)) / n));\n  }\n  G.M = new Uint16Array(NI * G.NJ);\n  return G;\n}\n\n// The vertex x reflects in: the first, counterclockwise, of the run of edges\n// x can see, so the polygon lies right of the ray from x through it. -1 inside.\nfunction vtx(G, x, y) {\n  const { n, NX, NY, r } = G;\n  let prev = x * NX[n - 1] + y * NY[n - 1] > r;\n  for (let k = 0; k \u003c n; k++) {\n    const vis = x * NX[k] + y * NY[k] > r;\n    if (vis && !prev) return k;\n    prev = vis;\n  }\n  return -1;\n}\n\n// Two jumps make a translation, so after an even number of jumps a periodic\n// point is back exactly, up to rounding. A domain whose centre has odd period p\n// is turned half round by p jumps, and its points come back after 2p; every\n// point of a domain gets the same number that way.\nlet spent = 0;\nfunction period(G, x0, y0) {\n  let x = x0, y = y0;\n  for (let it = 1; it \u003c= MAXIT; it++) {\n    const k = vtx(G, x, y);\n    if (k \u003c 0) return (spent += it), INSIDE;\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    if (!(it & 1) && (x - x0) ** 2 + (y - y0) ** 2 \u003c 1e-14) return (spent += it), it;\n  }\n  spent += MAXIT;\n  return 0;\n}\n\n// Fill the wedge outward from the polygon, BUDGET jumps a frame.\nfunction grow(G) {\n  spent = 0;\n  const total = NI * G.NJ;\n  while (G.next \u003c total && spent \u003c BUDGET) {\n    const c = G.next++, i = (c / G.NJ) | 0, a = (c - i * G.NJ + 0.5) / CR, rho = RA * exp((i + 0.5) / CR);\n    G.M[c] = period(G, rho * cos(a), rho * sin(a));\n  }\n}\n\n// The domain of a periodic point: the points that see the same vertices for p\n// jumps. After j jumps a point X is at s X + c; each jump adds two half\n// planes, and a square clipped by them all is the domain. Its centroid.\nfunction domain(G, x0, y0, p) {\n  let poly = [[x0 - 30, y0 - 30], [x0 + 30, y0 - 30], [x0 + 30, y0 + 30], [x0 - 30, y0 + 30]];\n  const clip = (ax, ay, b) => {\n    const out = [];\n    for (let i = 0; i \u003c poly.length; i++) {\n      const A = poly[i], B = poly[(i + 1) % poly.length], d1 = ax * A[0] + ay * A[1] - b, d2 = ax * B[0] + ay * B[1] - b;\n      if (d1 \u003c= 0) out.push(A);\n      if (d1 \u003c 0 !== d2 \u003c 0) out.push([A[0] + (d1 / (d1 - d2)) * (B[0] - A[0]), A[1] + (d1 / (d1 - d2)) * (B[1] - A[1])]);\n    }\n    poly = out;\n  };\n  let s = 1, cx = 0, cy = 0, x = x0, y = y0;\n  for (let j = 0; j \u003c p && poly.length; j++) {\n    const k = vtx(G, x, y), m = (k + G.n - 1) % G.n;\n    clip(-s * G.NX[k], -s * G.NY[k], G.NX[k] * cx + G.NY[k] * cy - G.r);\n    clip(s * G.NX[m], s * G.NY[m], G.r - G.NX[m] * cx - G.NY[m] * cy);\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    cx = 2 * G.VX[k] - cx;\n    cy = 2 * G.VY[k] - cy;\n    s = -s;\n  }\n  let A = 0, X = 0, Y = 0;\n  for (let i = 0; i \u003c poly.length; i++) {\n    const [x1, y1] = poly[i], [x2, y2] = poly[(i + 1) % poly.length], c = x1 * y2 - x2 * y1;\n    A += c;\n    X += (x1 + x2) * c;\n    Y += (y1 + y2) * c;\n  }\n  return A > 1e-9 ? [X / (3 * A), Y / (3 * A), A / 2] : [x0, y0, 0];\n}\n\nconst POLYS = {};\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 5, zoom: 5.2, rot: PI / 2, t: 0,\n    orb: null, k: 0, ph: 0, hops: 0, seen: [], marks: [],\n    lut: new Float32Array((MAXIT + 1) * 3), lutKey: \"\",\n    buf: new Float32Array(NP * 3),\n  };\n}\n\n// A seed: of forty random cells of the wedge, the one whose domain is biggest\n// on the panel, give or take, and not one of the last two periods, moved to its\n// domain's centroid. The orbit is kept as a list, so it closes exactly however\n// long it runs, and must stay within 44 LEDs of the centre: the 128 rows hold\n// all of it and the 64 columns most.\nfunction pick(P, G) {\n  const Z = P.zoom, lo = 1.1, hi = 40 / Z;\n  let best = 0;\n  for (let t = 0; t \u003c 40; t++) {\n    const i = floor(CR * log((lo + (hi - lo) * random()) / RA)), j = floor((random() * PI * CR) / G.n), c = i * G.NJ + j;\n    if (c >= G.next) continue;\n    const p = G.M[c], rho = RA * exp((i + 0.5) / CR), a = (j + 0.5) / CR;\n    if (!p || p === INSIDE || p > 12 * G.n) continue;\n    const [cx, cy, area] = domain(G, rho * cos(a), rho * sin(a), p);\n    const score = sqrt(min(area * Z * Z, 300)) * (0.5 + random()) * (P.seen.includes(p) ? 0.25 : 1);\n    if (area * Z * Z \u003c 8 || score \u003c= best) continue;\n    const ox = [cx], oy = [cy];\n    let far = 0;\n    for (let h = 0; h \u003c p; h++) {\n      const k = vtx(G, ox[h], oy[h]);\n      if (k \u003c 0) break;\n      ox.push(2 * G.VX[k] - ox[h]);\n      oy.push(2 * G.VY[k] - oy[h]);\n      far = max(far, sqrt(ox[h] ** 2 + oy[h] ** 2));\n    }\n    if (ox.length \u003c= p || far * Z > 44) continue;\n    best = score;\n    P.orb = { ox, oy, p, far };\n  }\n  if (best) {\n    P.seen = [P.orb.p, P.seen[0]];\n    P.k = P.ph = P.hops = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const n = cl(round(kv[2]), 5, 12);\n  P.zoom = 5.2 * 2 ** (1.2 * cl(kv[3], -1, 1));\n  if (n !== P.n || !P.G) {\n    P.n = n;\n    P.G = POLYS[n] || (POLYS[n] = makePoly(n));\n    P.orb = null;\n  }\n  const G = P.G;\n  grow(G);\n  P.t += d;\n  P.rot += d * P.speed * 0.045;\n  // K1, or a zoom that has pushed the orbit off the panel: a new orbit.\n  if ((input.btnPressed && input.btnPressed[0]) || (P.orb && P.orb.far * P.zoom > 52)) P.orb = null;\n  if (!P.orb) {\n    if (G.next > CR * log(30 / P.zoom / RA) * G.NJ) pick(P, G);\n  } else {\n    P.ph += d * P.speed * 1.2;\n    while (P.ph >= 1) {\n      P.ph -= 1;\n      const o = P.orb;\n      P.k = (P.k + 1) % o.p;\n      P.marks.push([o.ox[P.k], o.oy[P.k], P.t, cl(o.p / (P.speed * 1.2), 4, 12)]);\n      if (P.marks.length > 120) P.marks.shift();\n      if (++P.hops >= max(o.p, 2 * o.p * (o.p \u003c 16))) P.orb = null;\n    }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The colour of a period.\nfunction makeLut(P) {\n  const L = P.lut;\n  for (let p = 1; p \u003c= MAXIT; p++) {\n    const v = cl(1.1 - 0.12 * log(p / (2 * P.n)) / log(2), 0.5, 1);\n    hsv(P.hue + 0.55 + 0.618034 * p, 0.85, v * 255, L, p * 3);\n  }\n  P.lutKey = P.hue + \",\" + P.n;\n}\n\n// Additive splat with bilinear weights, in LEDs.\nfunction splat(buf, x, y, a, r, g, b) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const X = x0 + i, Y = y0 + j;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const w = a * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), q = (Y * W + X) * 3;\n      buf[q] += w * r;\n      buf[q + 1] += w * g;\n      buf[q + 2] += w * b;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.G) return;\n  const G = P.G, { n, M, NJ, r } = G, Z = P.zoom, buf = P.buf, L = P.lut;\n  if (P.lutKey !== P.hue + \",\" + n) makeLut(P);\n  const off = CR * (log(Z) + log(RA)), turn = (P.rot / TAU) * n, K = (TAU / n) * CR, pin = PI / n;\n  const w = 0.55 / Z;\n  for (let p = 0; p \u003c NP; p++) {\n    let R = 0, Gc = 0, B = 0, first = -1, mixed = 0, tab = 0, rim = 0;\n    for (let s = 0; s \u003c 4; s++) {\n      const q = p * 4 + s, rho = SR[q] / Z;\n      let a = SA[q] * n - turn;\n      a -= floor(a);\n      if (a > 0.5) a = 1 - a;\n      let per = 0;\n      // In the polygon, or on its rim.\n      if (rho \u003c 1 + w) {\n        const dd = rho * cos(pin - (a * TAU) / n) - r;\n        if (dd \u003c w) {\n          dd > -w ? rim++ : tab++;\n          continue;\n        }\n      }\n      const i = floor(SL[q] - off), c = i * NJ + floor(a * K);\n      if (i >= 0 && i \u003c NI && c \u003c G.next) per = M[c];\n      if (per === INSIDE) per = 0;\n      if (first \u003c 0) first = per;\n      else if (per !== first) mixed = 1;\n      if (per) (R += L[per * 3]), (Gc += L[per * 3 + 1]), (B += L[per * 3 + 2]);\n    }\n    // Where the period changes inside a LED, a dark seam.\n    const f = mixed || (tab && R + Gc + B) ? 0.15 : 0.25;\n    buf[p * 3] = R * f + rim * 64 + tab * 9;\n    buf[p * 3 + 1] = Gc * f + rim * 63 + tab * 9;\n    buf[p * 3 + 2] = B * f + rim * 61 + tab * 12;\n  }\n  // The orbit: the points it has landed on, each fading over the time one\n  // round takes (4 to 12 seconds), and the jump under way, a streak from the\n  // point through the vertex to its image.\n  const ca = cos(P.rot), sa = sin(P.rot);\n  const sx = (x, y) => 32 + Z * (x * ca - y * sa), sy = (x, y) => 64 - Z * (x * sa + y * ca);\n  for (const [x, y, t, life] of P.marks) {\n    const a = 1 - (P.t - t) / life;\n    if (a > 0) splat(buf, sx(x, y), sy(x, y), a * 255, 1, 1, 1);\n  }\n  const o = P.orb;\n  if (o) {\n    const k = P.k, k1 = (k + 1) % o.p, x0 = o.ox[k], y0 = o.oy[k], x1 = o.ox[k1], y1 = o.oy[k1];\n    const u = cl(P.ph / 0.4, 0, 1), e = u * u * (3 - 2 * u), fade = P.ph \u003c 0.4 ? 1 : 1 - (P.ph - 0.4) / 0.6;\n    const ax = sx(x0, y0), ay = sy(x0, y0), bx = sx(x1, y1), by = sy(x1, y1);\n    const len = sqrt((bx - ax) ** 2 + (by - ay) ** 2), steps = ceil((len * e) / 0.4);\n    for (let j = 0; j \u003c= steps; j++) {\n      const v = steps ? (j / steps) * e : 0;\n      splat(buf, ax + (bx - ax) * v, ay + (by - ay) * v, 170 * fade * (0.3 + 0.7 * (v / (e || 1))), 1, 0.97, 0.9);\n    }\n    const hx = ax + (bx - ax) * e, hy = ay + (by - ay) * e;\n    splat(buf, hx, hy, 400, 1, 1, 1);\n    const vx = (ax + bx) / 2, vy = (ay + by) / 2, fl = exp(-(((e - 0.5) * 5) ** 2)) * fade;\n    splat(buf, vx, vy, 500 * fl, 1, 1, 1);\n    for (let j = 0; j \u003c 8; j++) splat(buf, vx + 1.5 * cos((j * PI) / 4), vy + 1.5 * sin((j * PI) / 4), 140 * fl, 1, 1, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-outer-billiards","type":"code","name":"outer-billiards","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Outer Billiards\n// Family:  geometry\n// Idea:    A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: outer billiards (Bernhard Neumann, 1959) and Sergei Tabachnikov's regular pentagon (1995), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green.\n// Knob 2: Speed. At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes.\n// Knob 3: Sides. The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second.\n// Knob 4: Zoom. How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1.\n// Buttons: K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, atan2, log, exp, PI, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst TAU = 2 * PI;\n\n// The map has the polygon's symmetry, turns by 2pi/n and mirrors in its\n// axes (a mirror turns the map into its inverse, which has the same periods),\n// so one wedge of angle pi/n holds it all. The wedge is gridded log-polar:\n// radius RA to RMAX in CR cells per e-fold, angle in steps of 1/CR.\nconst RA = 0.7, RMAX = 33, CR = 110, NI = ceil(CR * log(RMAX / RA));\nconst MAXIT = 4000, INSIDE = 65535, BUDGET = 500000;\n\n// Four sample points in each LED: radius in LEDs, CR times its log, angle in turns.\nconst SR = new Float32Array(NP * 4), SL = new Float32Array(NP * 4), SA = new Float32Array(NP * 4);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++)\n    for (let s = 0; s \u003c 4; s++) {\n      const q = (y * W + x) * 4 + s, dx = x + (s & 1 ? 0.75 : 0.25) - 32, dy = 64 - y - (s & 2 ? 0.75 : 0.25);\n      SR[q] = sqrt(dx * dx + dy * dy);\n      SL[q] = CR * log(SR[q]);\n      SA[q] = atan2(dy, dx) / TAU;\n    }\n\n// A regular n-gon on the unit circle, vertex 0 on the x axis; edge k runs\n// from vertex k to k + 1 and its outward normal is NX, NY.\nfunction makePoly(n) {\n  const G = { n, r: cos(PI / n), NJ: ceil((PI / n) * CR), next: 0, VX: [], VY: [], NX: [], NY: [] };\n  for (let k = 0; k \u003c n; k++) {\n    G.VX.push(cos((TAU * k) / n));\n    G.VY.push(sin((TAU * k) / n));\n    G.NX.push(cos((TAU * (k + 0.5)) / n));\n    G.NY.push(sin((TAU * (k + 0.5)) / n));\n  }\n  G.M = new Uint16Array(NI * G.NJ);\n  return G;\n}\n\n// The vertex x reflects in: the first, counterclockwise, of the run of edges\n// x can see, so the polygon lies right of the ray from x through it. -1 inside.\nfunction vtx(G, x, y) {\n  const { n, NX, NY, r } = G;\n  let prev = x * NX[n - 1] + y * NY[n - 1] > r;\n  for (let k = 0; k \u003c n; k++) {\n    const vis = x * NX[k] + y * NY[k] > r;\n    if (vis && !prev) return k;\n    prev = vis;\n  }\n  return -1;\n}\n\n// Two jumps make a translation, so after an even number of jumps a periodic\n// point is back exactly, up to rounding. A domain whose centre has odd period p\n// is turned half round by p jumps, and its points come back after 2p; every\n// point of a domain gets the same number that way.\nlet spent = 0;\nfunction period(G, x0, y0) {\n  let x = x0, y = y0;\n  for (let it = 1; it \u003c= MAXIT; it++) {\n    const k = vtx(G, x, y);\n    if (k \u003c 0) return (spent += it), INSIDE;\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    if (!(it & 1) && (x - x0) ** 2 + (y - y0) ** 2 \u003c 1e-14) return (spent += it), it;\n  }\n  spent += MAXIT;\n  return 0;\n}\n\n// Fill the wedge outward from the polygon, BUDGET jumps a frame.\nfunction grow(G) {\n  spent = 0;\n  const total = NI * G.NJ;\n  while (G.next \u003c total && spent \u003c BUDGET) {\n    const c = G.next++, i = (c / G.NJ) | 0, a = (c - i * G.NJ + 0.5) / CR, rho = RA * exp((i + 0.5) / CR);\n    G.M[c] = period(G, rho * cos(a), rho * sin(a));\n  }\n}\n\n// The domain of a periodic point: the points that see the same vertices for p\n// jumps. After j jumps a point X is at s X + c; each jump adds two half\n// planes, and a square clipped by them all is the domain. Its centroid.\nfunction domain(G, x0, y0, p) {\n  let poly = [[x0 - 30, y0 - 30], [x0 + 30, y0 - 30], [x0 + 30, y0 + 30], [x0 - 30, y0 + 30]];\n  const clip = (ax, ay, b) => {\n    const out = [];\n    for (let i = 0; i \u003c poly.length; i++) {\n      const A = poly[i], B = poly[(i + 1) % poly.length], d1 = ax * A[0] + ay * A[1] - b, d2 = ax * B[0] + ay * B[1] - b;\n      if (d1 \u003c= 0) out.push(A);\n      if (d1 \u003c 0 !== d2 \u003c 0) out.push([A[0] + (d1 / (d1 - d2)) * (B[0] - A[0]), A[1] + (d1 / (d1 - d2)) * (B[1] - A[1])]);\n    }\n    poly = out;\n  };\n  let s = 1, cx = 0, cy = 0, x = x0, y = y0;\n  for (let j = 0; j \u003c p && poly.length; j++) {\n    const k = vtx(G, x, y), m = (k + G.n - 1) % G.n;\n    clip(-s * G.NX[k], -s * G.NY[k], G.NX[k] * cx + G.NY[k] * cy - G.r);\n    clip(s * G.NX[m], s * G.NY[m], G.r - G.NX[m] * cx - G.NY[m] * cy);\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    cx = 2 * G.VX[k] - cx;\n    cy = 2 * G.VY[k] - cy;\n    s = -s;\n  }\n  let A = 0, X = 0, Y = 0;\n  for (let i = 0; i \u003c poly.length; i++) {\n    const [x1, y1] = poly[i], [x2, y2] = poly[(i + 1) % poly.length], c = x1 * y2 - x2 * y1;\n    A += c;\n    X += (x1 + x2) * c;\n    Y += (y1 + y2) * c;\n  }\n  return A > 1e-9 ? [X / (3 * A), Y / (3 * A), A / 2] : [x0, y0, 0];\n}\n\nconst POLYS = {};\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 5, zoom: 5.2, rot: PI / 2, t: 0,\n    orb: null, k: 0, ph: 0, hops: 0, seen: [], marks: [],\n    lut: new Float32Array((MAXIT + 1) * 3), lutKey: \"\",\n    buf: new Float32Array(NP * 3),\n  };\n}\n\n// A seed: of forty random cells of the wedge, the one whose domain is biggest\n// on the panel, give or take, and not one of the last two periods, moved to its\n// domain's centroid. The orbit is kept as a list, so it closes exactly however\n// long it runs, and must stay within 44 LEDs of the centre: the 128 rows hold\n// all of it and the 64 columns most.\nfunction pick(P, G) {\n  const Z = P.zoom, lo = 1.1, hi = 40 / Z;\n  let best = 0;\n  for (let t = 0; t \u003c 40; t++) {\n    const i = floor(CR * log((lo + (hi - lo) * random()) / RA)), j = floor((random() * PI * CR) / G.n), c = i * G.NJ + j;\n    if (c >= G.next) continue;\n    const p = G.M[c], rho = RA * exp((i + 0.5) / CR), a = (j + 0.5) / CR;\n    if (!p || p === INSIDE || p > 12 * G.n) continue;\n    const [cx, cy, area] = domain(G, rho * cos(a), rho * sin(a), p);\n    const score = sqrt(min(area * Z * Z, 300)) * (0.5 + random()) * (P.seen.includes(p) ? 0.25 : 1);\n    if (area * Z * Z \u003c 8 || score \u003c= best) continue;\n    const ox = [cx], oy = [cy];\n    let far = 0;\n    for (let h = 0; h \u003c p; h++) {\n      const k = vtx(G, ox[h], oy[h]);\n      if (k \u003c 0) break;\n      ox.push(2 * G.VX[k] - ox[h]);\n      oy.push(2 * G.VY[k] - oy[h]);\n      far = max(far, sqrt(ox[h] ** 2 + oy[h] ** 2));\n    }\n    if (ox.length \u003c= p || far * Z > 44) continue;\n    best = score;\n    P.orb = { ox, oy, p, far };\n  }\n  if (best) {\n    P.seen = [P.orb.p, P.seen[0]];\n    P.k = P.ph = P.hops = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const n = cl(round(kv[2]), 5, 12);\n  P.zoom = 5.2 * 2 ** (1.2 * cl(kv[3], -1, 1));\n  if (n !== P.n || !P.G) {\n    P.n = n;\n    P.G = POLYS[n] || (POLYS[n] = makePoly(n));\n    P.orb = null;\n  }\n  const G = P.G;\n  grow(G);\n  P.t += d;\n  P.rot += d * P.speed * 0.045;\n  // K1, or a zoom that has pushed the orbit off the panel: a new orbit.\n  if ((input.btnPressed && input.btnPressed[0]) || (P.orb && P.orb.far * P.zoom > 52)) P.orb = null;\n  if (!P.orb) {\n    if (G.next > CR * log(30 / P.zoom / RA) * G.NJ) pick(P, G);\n  } else {\n    P.ph += d * P.speed * 1.2;\n    while (P.ph >= 1) {\n      P.ph -= 1;\n      const o = P.orb;\n      P.k = (P.k + 1) % o.p;\n      P.marks.push([o.ox[P.k], o.oy[P.k], P.t, cl(o.p / (P.speed * 1.2), 4, 12)]);\n      if (P.marks.length > 120) P.marks.shift();\n      if (++P.hops >= max(o.p, 2 * o.p * (o.p \u003c 16))) P.orb = null;\n    }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The colour of a period.\nfunction makeLut(P) {\n  const L = P.lut;\n  for (let p = 1; p \u003c= MAXIT; p++) {\n    const v = cl(1.1 - 0.12 * log(p / (2 * P.n)) / log(2), 0.5, 1);\n    hsv(P.hue + 0.55 + 0.618034 * p, 0.85, v * 255, L, p * 3);\n  }\n  P.lutKey = P.hue + \",\" + P.n;\n}\n\n// Additive splat with bilinear weights, in LEDs.\nfunction splat(buf, x, y, a, r, g, b) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const X = x0 + i, Y = y0 + j;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const w = a * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), q = (Y * W + X) * 3;\n      buf[q] += w * r;\n      buf[q + 1] += w * g;\n      buf[q + 2] += w * b;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.G) return;\n  const G = P.G, { n, M, NJ, r } = G, Z = P.zoom, buf = P.buf, L = P.lut;\n  if (P.lutKey !== P.hue + \",\" + n) makeLut(P);\n  const off = CR * (log(Z) + log(RA)), turn = (P.rot / TAU) * n, K = (TAU / n) * CR, pin = PI / n;\n  const w = 0.55 / Z;\n  for (let p = 0; p \u003c NP; p++) {\n    let R = 0, Gc = 0, B = 0, first = -1, mixed = 0, tab = 0, rim = 0;\n    for (let s = 0; s \u003c 4; s++) {\n      const q = p * 4 + s, rho = SR[q] / Z;\n      let a = SA[q] * n - turn;\n      a -= floor(a);\n      if (a > 0.5) a = 1 - a;\n      let per = 0;\n      // In the polygon, or on its rim.\n      if (rho \u003c 1 + w) {\n        const dd = rho * cos(pin - (a * TAU) / n) - r;\n        if (dd \u003c w) {\n          dd > -w ? rim++ : tab++;\n          continue;\n        }\n      }\n      const i = floor(SL[q] - off), c = i * NJ + floor(a * K);\n      if (i >= 0 && i \u003c NI && c \u003c G.next) per = M[c];\n      if (per === INSIDE) per = 0;\n      if (first \u003c 0) first = per;\n      else if (per !== first) mixed = 1;\n      if (per) (R += L[per * 3]), (Gc += L[per * 3 + 1]), (B += L[per * 3 + 2]);\n    }\n    // Where the period changes inside a LED, a dark seam.\n    const f = mixed || (tab && R + Gc + B) ? 0.15 : 0.25;\n    buf[p * 3] = R * f + rim * 64 + tab * 9;\n    buf[p * 3 + 1] = Gc * f + rim * 63 + tab * 9;\n    buf[p * 3 + 2] = B * f + rim * 61 + tab * 12;\n  }\n  // The orbit: the points it has landed on, each fading over the time one\n  // round takes (4 to 12 seconds), and the jump under way, a streak from the\n  // point through the vertex to its image.\n  const ca = cos(P.rot), sa = sin(P.rot);\n  const sx = (x, y) => 32 + Z * (x * ca - y * sa), sy = (x, y) => 64 - Z * (x * sa + y * ca);\n  for (const [x, y, t, life] of P.marks) {\n    const a = 1 - (P.t - t) / life;\n    if (a > 0) splat(buf, sx(x, y), sy(x, y), a * 255, 1, 1, 1);\n  }\n  const o = P.orb;\n  if (o) {\n    const k = P.k, k1 = (k + 1) % o.p, x0 = o.ox[k], y0 = o.oy[k], x1 = o.ox[k1], y1 = o.oy[k1];\n    const u = cl(P.ph / 0.4, 0, 1), e = u * u * (3 - 2 * u), fade = P.ph \u003c 0.4 ? 1 : 1 - (P.ph - 0.4) / 0.6;\n    const ax = sx(x0, y0), ay = sy(x0, y0), bx = sx(x1, y1), by = sy(x1, y1);\n    const len = sqrt((bx - ax) ** 2 + (by - ay) ** 2), steps = ceil((len * e) / 0.4);\n    for (let j = 0; j \u003c= steps; j++) {\n      const v = steps ? (j / steps) * e : 0;\n      splat(buf, ax + (bx - ax) * v, ay + (by - ay) * v, 170 * fade * (0.3 + 0.7 * (v / (e || 1))), 1, 0.97, 0.9);\n    }\n    const hx = ax + (bx - ax) * e, hy = ay + (by - ay) * e;\n    splat(buf, hx, hy, 400, 1, 1, 1);\n    const vx = (ax + bx) / 2, vy = (ay + by) / 2, fl = exp(-(((e - 0.5) * 5) ** 2)) * fade;\n    splat(buf, vx, vy, 500 * fl, 1, 1, 1);\n    for (let j = 0; j \u003c 8; j++) splat(buf, vx + 1.5 * cos((j * PI) / 4), vy + 1.5 * sin((j * PI) / 4), 140 * fl, 1, 1, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes."},{"name":"Sides","min":5,"max":12,"about":"The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second."},{"name":"Zoom","min":-1,"max":1,"about":"How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1."}],"start":[0,2,5,0.06],"measures":{"motion":0.5156,"detail":0.1148,"edges":0.7368,"complexity":0.7773,"coverage":0.9999,"colour":0.6754,"drift":0.0832},"knobResponse":[0.5981,0.1953,0.4355,0.388]},{"slug":"pancakes","title":"Pancakes","family":"kitchen","round":21,"note":"길든 철판을 위에서 내려다봐요. 국자로 부은 반죽이 퍼지고 기포가 올라와 터지며 구멍을 남기는 동안, 뒤집개가 하나씩 뒤집어 노릇한 면을 보이고 다 익은 것을 숯색 접시에 쌓아요. K1 을 누르면 가장 많이 익은 것부터 바로 뒤집거나 접시로 옮겨요.","idea":"A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.","buttons":"K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.","code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","layer":{"id":"layer-pancakes","type":"code","name":"pancakes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Batter","min":0,"max":1,"about":"Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds."},{"name":"Pancakes","min":6,"max":12,"about":"How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them."},{"name":"Heat","min":0,"max":1,"about":"How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke."}],"start":[0,2,6,0.06],"measures":{"motion":0.2802,"detail":0.2275,"edges":0.2381,"complexity":2.2758,"coverage":0.9979,"colour":0.2408,"drift":0.1011},"knobResponse":[0.1406,0.1266,0.1876,0.1386]},{"slug":"paternoster","title":"Paternoster","family":"machine","round":19,"note":"옛 사무실 건물의 파테르노스터를 기계실에서 피트까지 잘라 보여요. 나무 칸들이 오른쪽으로 오르고 왼쪽으로 내려오며 꼭대기와 바닥의 사슬 바퀴를 넘어가고, 층마다 사람이 지나가는 칸에 올라타고 내려요.","idea":"A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","layer":{"id":"layer-paternoster","type":"code","name":"paternoster","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again."},{"name":"Floors","min":3,"max":6,"about":"Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain."},{"name":"Busy","min":0,"max":1,"about":"How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom."}],"start":[0,2,3,0.06],"measures":{"motion":0.1311,"detail":0.0811,"edges":0.4174,"complexity":0.5845,"coverage":0.8893,"colour":0.2319,"drift":0.047},"knobResponse":[0.1087,0.0733,0.147,0.0325]},{"slug":"pearl-sheen","title":"Pearl Sheen","family":"cosmetic","round":30,"note":"펄 안료를 부은 면이 새틴 결로 흘러내려요. 누운 결은 로즈이고 기운 결은 박막 간섭으로 금빛 쪽으로 넘어가며, 긴 반사띠가 면을 가로질러요.","idea":"Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.","buttons":"K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.","code":"// ===== Patternflow pattern =====\n// Title:   Pearl Sheen\n// Family:  cosmetic\n// Idea:    Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after thin-film interference in pearlescent mica pigments (titania-coated mica)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1\n//\n// Knob 1: Hue. Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta.\n// Knob 2: Speed. How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that.\n// Knob 3: Shift. The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold.\n// Knob 4: Sheen. The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour.\n// Buttons: K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, tanh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Smooth noise in a 256 x 256 tile, three octaves of 8, 16 and 32 cells,\n// built once in setup. The streaks are this tile stretched about twelve times\n// along the flow.\nconst T = 256, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = Math.random() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.45;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The interference colour of the flakes' coat against the optical path\n// difference 2 n d cos(theta), 0 to 1600 nm in 1024 steps. Each entry sums\n// the two-beam reflectance over the spectrum, 400 to 700 nm every 5 nm, under\n// three bell-shaped channel curves at 600, 545 and 455 nm. The air-to-titania\n// face turns its beam over and the titania-to-mica face does not, so the\n// reflectance is (1 - cos(2 pi path / lambda)) / 2. Only the chroma is kept,\n// the colour less its grey, scaled so the second order's strongest is about 1.\nconst LN = 1024, OPD_MAX = 1600;\nconst RAW = new Float32Array(LN * 3);\nfunction buildRaw() {\n  const chan = [[600, 45], [545, 40], [455, 32]], norm = [0, 0, 0], wts = [];\n  for (let l = 400; l \u003c= 700; l += 5) {\n    const w = chan.map(([m, s]) => exp(-(((l - m) / s) ** 2) / 2));\n    wts.push([l, w]);\n    for (let c = 0; c \u003c 3; c++) norm[c] += w[c];\n  }\n  for (let i = 0; i \u003c LN; i++) {\n    const opd = (i / (LN - 1)) * OPD_MAX, acc = [0, 0, 0];\n    for (const [l, w] of wts) {\n      const r = 0.5 - 0.5 * cos((2 * PI * opd) / l);\n      for (let c = 0; c \u003c 3; c++) acc[c] += r * w[c];\n    }\n    for (let c = 0; c \u003c 3; c++) acc[c] /= norm[c];\n    const m = (acc[0] + acc[1] + acc[2]) / 3;\n    for (let c = 0; c \u003c 3; c++) RAW[i * 3 + c] = (acc[c] - m) / 0.45;\n  }\n}\n\n// The angle of a chroma round the grey axis, red at 0.\nconst chromaAngle = (r, g, b) => atan2((sqrt(3) / 2) * (g - b), r - (g + b) / 2);\n\n// Hue turns the table round the grey axis. Warm entries get LIFT: orange and\n// yellow at half light read as brown and olive on the panel, so they are\n// lifted and their deep tones kept lighter.\nconst LUT = new Float32Array(LN * 3), LIFT = new Float32Array(LN);\nlet lutRot = NaN;\nfunction buildLut(a) {\n  const c = cos(a), s = sin(a), k = (1 - c) / 3, q = s / sqrt(3), m0 = c + k, m1 = k - q, m2 = k + q;\n  for (let i = 0, j = 0; j \u003c LN; i += 3, j++) {\n    const r = RAW[i], g = RAW[i + 1], b = RAW[i + 2];\n    LUT[i] = r * m0 + g * m1 + b * m2;\n    LUT[i + 1] = r * m2 + g * m0 + b * m1;\n    LUT[i + 2] = r * m1 + g * m2 + b * m0;\n    const y = cos(chromaAngle(LUT[i], LUT[i + 1], LUT[i + 2]) - 1);\n    LIFT[j] = y > 0 ? y * y : 0;\n  }\n}\n\n// A flat flake's light path: the second order's magenta, 980 nm. A tilted\n// flake sees the light slant through its coat, 2 n d cos(theta) is shorter,\n// and the colour moves on through orange to gold. Hue then turns the table so\n// the flat colour sits on the knob's hue and the gold on its neighbour.\nconst BASE = 980;\nlet baseAng = 0;\n\nexport function setup(params) {\n  buildTex();\n  buildRaw();\n  const bi = round((BASE / OPD_MAX) * (LN - 1)) * 3;\n  baseAng = chromaAngle(RAW[bi], RAW[bi + 1], RAW[bi + 2]);\n  lutRot = NaN;\n  params.s = {\n    t: 0, flow: 0, hue: 0, shift: 0, sheen: 0.06, stir: -1,\n    u: new Float32Array(N), h: new Float32Array(N), big: new Float32Array(N), fine: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.shift = cl(k[2], 0, 1);\n  P.sheen = cl(k[3], 0, 1);\n  P.t += d;\n  P.flow += d * cl(k[1], 0.2, 3);\n  if (P.stir >= 0) {\n    P.stir += d;\n    if (P.stir > 12) P.stir = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.stir = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const rot = 2 * PI * (P.hue + 0.97) - baseAng;\n  if (rot !== lutRot) buildLut((lutRot = rot));\n  const ub = P.u, hb = P.h, bb = P.big, fb = P.fine, t = P.t, f = P.flow;\n\n  // Across-the-flow coordinate u: the panel's x bent by two slow warps, one\n  // carried down by the pour and one drifting on its own. A streak is a line\n  // of constant u. The spatula pushes u aside above its edge.\n  const sa0 = P.stir, sy = sa0 >= 0 ? -0.3 + (4.6 * sa0) / 2.5 : 0;\n  const sAmp = sa0 \u003c 0 ? 0 : 0.32 * (sa0 \u003c 2.5 ? 1 : exp(-(sa0 - 2.5) / 1.6));\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, push = sAmp > 0 ? sAmp * 0.5 * (1 + tanh((sy - Y) / 0.22)) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const X = x / 32;\n      ub[y * W + x] = X + tap(X * 6 + 40, Y * 5 - f * 0.5 + 7) * 1.4 + tap(X * 3 + t * 0.3, Y * 3 + 90) * 0.9 - push * sin((PI * (x + 0.5)) / W);\n    }\n  }\n  // The surface: broad swells (big) and fine striations (fine), both long\n  // along u. Where the warp squeezes the striations finer than two LEDs can\n  // hold, they fade out instead of breaking into stair steps.\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, u = ub[i];\n      const dx = ub[y * W + (x \u003c W - 1 ? x + 1 : x)] - ub[y * W + (x > 0 ? x - 1 : x)], dy = ub[yd + x] - ub[yu + x];\n      const over = 27 * sqrt(dx * dx + dy * dy) - 2;\n      const big = tap(u * 22 + 130, Y * 4 - f * 0.6);\n      const fine = tap(u * 55, Y * 4 - f * 3) / (1 + (over > 0 ? over * over : 0));\n      bb[i] = big;\n      fb[i] = fine;\n      hb[i] = big + fine * 0.12;\n    }\n  }\n\n  const sh = P.shift, sp = 0.2 + 0.8 * P.sheen;\n  // How much shorter a fully tilted flake's path is, and how much the coat's\n  // thickness varies along the striations.\n  const dmax = 0.03 + 0.115 * sh, thin = 10 + 40 * sh;\n  // A long strip light seen in the surface. Its reflection sweeps across and\n  // back every 21 s with a second, dimmer strip trailing it; Sheen narrows both.\n  const sw = 0.8 - 0.65 * sp, iw = 1 / sw, amp = 0.46 + 0.3 * sp;\n  const sc = 1.2 * sin(t * 0.3), sc2 = sc + (sc > 0 ? -1.6 : 1.6), sa = 0.25 * sin(t * 0.13);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, xl = y * W + (x > 0 ? x - 1 : x), xr = y * W + (x \u003c W - 1 ? x + 1 : x);\n      const hx = (hb[xr] - hb[xl]) * 8, hy = (hb[yd + x] - hb[yu + x]) * 8;\n      const n2 = 1 / (1 + hx * hx + hy * hy);\n      // The straight-on view reflected, r = 2 (n.v) n - v, on a swatch that\n      // bulges a little, so the strip lands as one broad band.\n      const bulge = 0.8 * ((x - 32) / 32 + (y - 64) / 160);\n      const rq = -2 * n2 * (hx + sa * hy) + bulge, q = (rq - sc) * iw, q2 = (rq - sc2) * iw;\n      const glow = exp(-q * q) + 0.6 * exp(-q2 * q2);\n      // The flakes lie along the flow and tilt with the fine striations. A\n      // tilted flake sees the light at an angle, which shortens its path:\n      // flip runs from 0 for flakes within 18 degrees of flat to 1 past 45.\n      const fx = ((fb[xr] - fb[xl]) * 4 + hx * 0.4) * 2.2, fy = ((fb[yd + x] - fb[yu + x]) * 4 + hy * 0.4) * 2.2;\n      const c2 = 1 / (1 + fx * fx + fy * fy);\n      const a = cl((0.9 - c2) * 2.5, 0, 1), flip = a * a * (3 - 2 * a);\n      const j = cl(round((((BASE + thin * fb[i]) * (1 - dmax * flip)) / OPD_MAX) * (LN - 1)), 0, LN - 1), li = j * 3;\n      // The flakes catch the strip in finer lines of their own.\n      const fq = (bulge - 2 * c2 * (fx + sa * fy) - sc) * 2.2;\n      const gl = 0.75 * glow + 0.25 * exp(-fq * fq);\n      // Deep tones only in the troughs of the broad swells.\n      const B = bb[i], deep = B \u003c -0.1 ? (B > -0.35 ? (-0.1 - B) / 0.25 : 1) : 0;\n      let lum = 0.64 - 0.12 * sp + amp * gl - 0.26 * deep + (0.1 * flip * dmax) / 0.13;\n      if (lum > 0.95) lum = 0.95 + (lum - 0.95) * 0.4;\n      const sat = 0.45 + 0.12 * sp - 0.32 * gl + 0.45 * deep + 0.3 * sh * flip;\n      const yl = LIFT[j], L = (lum + 0.12 * yl + 0.2 * yl * deep) * 235, S = sat * (1 - 0.3 * yl);\n      display.setPixel(x, y, cl(L * (1 + S * LUT[li]), 0, 255), cl(L * (1 + S * LUT[li + 1]), 0, 255), cl(L * (1 + S * LUT[li + 2]), 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-pearl-sheen","type":"code","name":"pearl-sheen","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pearl Sheen\n// Family:  cosmetic\n// Idea:    Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after thin-film interference in pearlescent mica pigments (titania-coated mica)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1\n//\n// Knob 1: Hue. Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta.\n// Knob 2: Speed. How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that.\n// Knob 3: Shift. The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold.\n// Knob 4: Sheen. The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour.\n// Buttons: K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, tanh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Smooth noise in a 256 x 256 tile, three octaves of 8, 16 and 32 cells,\n// built once in setup. The streaks are this tile stretched about twelve times\n// along the flow.\nconst T = 256, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = Math.random() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.45;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The interference colour of the flakes' coat against the optical path\n// difference 2 n d cos(theta), 0 to 1600 nm in 1024 steps. Each entry sums\n// the two-beam reflectance over the spectrum, 400 to 700 nm every 5 nm, under\n// three bell-shaped channel curves at 600, 545 and 455 nm. The air-to-titania\n// face turns its beam over and the titania-to-mica face does not, so the\n// reflectance is (1 - cos(2 pi path / lambda)) / 2. Only the chroma is kept,\n// the colour less its grey, scaled so the second order's strongest is about 1.\nconst LN = 1024, OPD_MAX = 1600;\nconst RAW = new Float32Array(LN * 3);\nfunction buildRaw() {\n  const chan = [[600, 45], [545, 40], [455, 32]], norm = [0, 0, 0], wts = [];\n  for (let l = 400; l \u003c= 700; l += 5) {\n    const w = chan.map(([m, s]) => exp(-(((l - m) / s) ** 2) / 2));\n    wts.push([l, w]);\n    for (let c = 0; c \u003c 3; c++) norm[c] += w[c];\n  }\n  for (let i = 0; i \u003c LN; i++) {\n    const opd = (i / (LN - 1)) * OPD_MAX, acc = [0, 0, 0];\n    for (const [l, w] of wts) {\n      const r = 0.5 - 0.5 * cos((2 * PI * opd) / l);\n      for (let c = 0; c \u003c 3; c++) acc[c] += r * w[c];\n    }\n    for (let c = 0; c \u003c 3; c++) acc[c] /= norm[c];\n    const m = (acc[0] + acc[1] + acc[2]) / 3;\n    for (let c = 0; c \u003c 3; c++) RAW[i * 3 + c] = (acc[c] - m) / 0.45;\n  }\n}\n\n// The angle of a chroma round the grey axis, red at 0.\nconst chromaAngle = (r, g, b) => atan2((sqrt(3) / 2) * (g - b), r - (g + b) / 2);\n\n// Hue turns the table round the grey axis. Warm entries get LIFT: orange and\n// yellow at half light read as brown and olive on the panel, so they are\n// lifted and their deep tones kept lighter.\nconst LUT = new Float32Array(LN * 3), LIFT = new Float32Array(LN);\nlet lutRot = NaN;\nfunction buildLut(a) {\n  const c = cos(a), s = sin(a), k = (1 - c) / 3, q = s / sqrt(3), m0 = c + k, m1 = k - q, m2 = k + q;\n  for (let i = 0, j = 0; j \u003c LN; i += 3, j++) {\n    const r = RAW[i], g = RAW[i + 1], b = RAW[i + 2];\n    LUT[i] = r * m0 + g * m1 + b * m2;\n    LUT[i + 1] = r * m2 + g * m0 + b * m1;\n    LUT[i + 2] = r * m1 + g * m2 + b * m0;\n    const y = cos(chromaAngle(LUT[i], LUT[i + 1], LUT[i + 2]) - 1);\n    LIFT[j] = y > 0 ? y * y : 0;\n  }\n}\n\n// A flat flake's light path: the second order's magenta, 980 nm. A tilted\n// flake sees the light slant through its coat, 2 n d cos(theta) is shorter,\n// and the colour moves on through orange to gold. Hue then turns the table so\n// the flat colour sits on the knob's hue and the gold on its neighbour.\nconst BASE = 980;\nlet baseAng = 0;\n\nexport function setup(params) {\n  buildTex();\n  buildRaw();\n  const bi = round((BASE / OPD_MAX) * (LN - 1)) * 3;\n  baseAng = chromaAngle(RAW[bi], RAW[bi + 1], RAW[bi + 2]);\n  lutRot = NaN;\n  params.s = {\n    t: 0, flow: 0, hue: 0, shift: 0, sheen: 0.06, stir: -1,\n    u: new Float32Array(N), h: new Float32Array(N), big: new Float32Array(N), fine: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.shift = cl(k[2], 0, 1);\n  P.sheen = cl(k[3], 0, 1);\n  P.t += d;\n  P.flow += d * cl(k[1], 0.2, 3);\n  if (P.stir >= 0) {\n    P.stir += d;\n    if (P.stir > 12) P.stir = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.stir = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const rot = 2 * PI * (P.hue + 0.97) - baseAng;\n  if (rot !== lutRot) buildLut((lutRot = rot));\n  const ub = P.u, hb = P.h, bb = P.big, fb = P.fine, t = P.t, f = P.flow;\n\n  // Across-the-flow coordinate u: the panel's x bent by two slow warps, one\n  // carried down by the pour and one drifting on its own. A streak is a line\n  // of constant u. The spatula pushes u aside above its edge.\n  const sa0 = P.stir, sy = sa0 >= 0 ? -0.3 + (4.6 * sa0) / 2.5 : 0;\n  const sAmp = sa0 \u003c 0 ? 0 : 0.32 * (sa0 \u003c 2.5 ? 1 : exp(-(sa0 - 2.5) / 1.6));\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, push = sAmp > 0 ? sAmp * 0.5 * (1 + tanh((sy - Y) / 0.22)) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const X = x / 32;\n      ub[y * W + x] = X + tap(X * 6 + 40, Y * 5 - f * 0.5 + 7) * 1.4 + tap(X * 3 + t * 0.3, Y * 3 + 90) * 0.9 - push * sin((PI * (x + 0.5)) / W);\n    }\n  }\n  // The surface: broad swells (big) and fine striations (fine), both long\n  // along u. Where the warp squeezes the striations finer than two LEDs can\n  // hold, they fade out instead of breaking into stair steps.\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, u = ub[i];\n      const dx = ub[y * W + (x \u003c W - 1 ? x + 1 : x)] - ub[y * W + (x > 0 ? x - 1 : x)], dy = ub[yd + x] - ub[yu + x];\n      const over = 27 * sqrt(dx * dx + dy * dy) - 2;\n      const big = tap(u * 22 + 130, Y * 4 - f * 0.6);\n      const fine = tap(u * 55, Y * 4 - f * 3) / (1 + (over > 0 ? over * over : 0));\n      bb[i] = big;\n      fb[i] = fine;\n      hb[i] = big + fine * 0.12;\n    }\n  }\n\n  const sh = P.shift, sp = 0.2 + 0.8 * P.sheen;\n  // How much shorter a fully tilted flake's path is, and how much the coat's\n  // thickness varies along the striations.\n  const dmax = 0.03 + 0.115 * sh, thin = 10 + 40 * sh;\n  // A long strip light seen in the surface. Its reflection sweeps across and\n  // back every 21 s with a second, dimmer strip trailing it; Sheen narrows both.\n  const sw = 0.8 - 0.65 * sp, iw = 1 / sw, amp = 0.46 + 0.3 * sp;\n  const sc = 1.2 * sin(t * 0.3), sc2 = sc + (sc > 0 ? -1.6 : 1.6), sa = 0.25 * sin(t * 0.13);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, xl = y * W + (x > 0 ? x - 1 : x), xr = y * W + (x \u003c W - 1 ? x + 1 : x);\n      const hx = (hb[xr] - hb[xl]) * 8, hy = (hb[yd + x] - hb[yu + x]) * 8;\n      const n2 = 1 / (1 + hx * hx + hy * hy);\n      // The straight-on view reflected, r = 2 (n.v) n - v, on a swatch that\n      // bulges a little, so the strip lands as one broad band.\n      const bulge = 0.8 * ((x - 32) / 32 + (y - 64) / 160);\n      const rq = -2 * n2 * (hx + sa * hy) + bulge, q = (rq - sc) * iw, q2 = (rq - sc2) * iw;\n      const glow = exp(-q * q) + 0.6 * exp(-q2 * q2);\n      // The flakes lie along the flow and tilt with the fine striations. A\n      // tilted flake sees the light at an angle, which shortens its path:\n      // flip runs from 0 for flakes within 18 degrees of flat to 1 past 45.\n      const fx = ((fb[xr] - fb[xl]) * 4 + hx * 0.4) * 2.2, fy = ((fb[yd + x] - fb[yu + x]) * 4 + hy * 0.4) * 2.2;\n      const c2 = 1 / (1 + fx * fx + fy * fy);\n      const a = cl((0.9 - c2) * 2.5, 0, 1), flip = a * a * (3 - 2 * a);\n      const j = cl(round((((BASE + thin * fb[i]) * (1 - dmax * flip)) / OPD_MAX) * (LN - 1)), 0, LN - 1), li = j * 3;\n      // The flakes catch the strip in finer lines of their own.\n      const fq = (bulge - 2 * c2 * (fx + sa * fy) - sc) * 2.2;\n      const gl = 0.75 * glow + 0.25 * exp(-fq * fq);\n      // Deep tones only in the troughs of the broad swells.\n      const B = bb[i], deep = B \u003c -0.1 ? (B > -0.35 ? (-0.1 - B) / 0.25 : 1) : 0;\n      let lum = 0.64 - 0.12 * sp + amp * gl - 0.26 * deep + (0.1 * flip * dmax) / 0.13;\n      if (lum > 0.95) lum = 0.95 + (lum - 0.95) * 0.4;\n      const sat = 0.45 + 0.12 * sp - 0.32 * gl + 0.45 * deep + 0.3 * sh * flip;\n      const yl = LIFT[j], L = (lum + 0.12 * yl + 0.2 * yl * deep) * 235, S = sat * (1 - 0.3 * yl);\n      display.setPixel(x, y, cl(L * (1 + S * LUT[li]), 0, 255), cl(L * (1 + S * LUT[li + 1]), 0, 255), cl(L * (1 + S * LUT[li + 2]), 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that."},{"name":"Shift","min":0,"max":1,"about":"The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold."},{"name":"Sheen","min":0,"max":1,"about":"The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour."}],"start":[0,2,0,0.06],"measures":{"motion":0.0507,"detail":0.0087,"edges":0,"complexity":1.7213,"coverage":1,"colour":0.1379,"drift":0.0591},"knobResponse":[0.2049,0.0688,0.0476,0.2033]},{"slug":"peel-off","title":"Peel-Off","family":"cosmetic","round":33,"note":"보랏빛 젤 막이 진줏빛 살결을 덮고, 위에서부터 벗겨지는 막이 옅은 안쪽을 드러낸 원통으로 말려 128줄을 내려가요. 막이 아래로 빠지면 젖은 새 막이 위에서 흘러내려 반무광으로 마르고, K3 은 그 막을 비치는 얇은 막에서 거의 불투명한 막까지 두껍게 해요. K1 은 색상환을 다 돌고, 누르면 바로 벗기기 시작해요.","idea":"A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.","buttons":"K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.","code":"// ===== Patternflow pattern =====\n// Title:   Peel-Off\n// Family:  cosmetic\n// Idea:    A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a peel-off gel mask lifted off in one sheet\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1\n//\n// Knob 1: Hue. The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive.\n// Knob 2: Speed. How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower.\n// Knob 3: Thickness. How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine.\n// Knob 4: Curl. How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40.\n// Buttons: K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells, built once: the pearl of the skin and the gel's uneven thickness.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 7 + o * 9973) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// Phases: the film peels, the skin shows bare, a new coat flows on, it dries.\nconst PEEL = 0, BARE = 1, COAT = 2, DRY = 3;\nconst PEEL_T = 7.5, BARE_T = 1.2, COAT_T = 2.4, DRY_T = 3.8;\n\n// The light: above and a little left, in front.\nconst LX = -0.15, LY = -0.75, LZ = -0.64, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst HX = LX * LN, HY = LY * LN, HZ = LZ * LN - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    t: 0, hue: 0, speed: 2, thick: 0, curl: 0.06,\n    phase: PEEL, pt: 0, coatAge: 99, queue: false,\n    yf: new Float32Array(W), rr: new Float32Array(W), roll: 0, R0: 6,\n    unc: new Float32Array(N).fill(-1),\n    sticks: [{ x: 20, w: 9, a: 4, age: -0.8, len: 1.2 }, { x: 46, w: 7, a: 3.5, age: -2.6, len: 1.0 }],\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n}\n\n// Where the coat's leading edge is, pt seconds into the coat: it flows fast\n// from the top and slows as it reaches the bottom.\nconst coatFront = (pt) => -4 + 136 * (1 - (1 - min(1, pt / COAT_T)) ** 2);\n// When it passed row y, for how wet that row still is.\nconst coatPassed = (y) => COAT_T * (1 - sqrt(cl(1 - (y + 4) / 136, 0, 1)));\n\n// The peel line: it starts above the top edge and leaves below the bottom.\nfunction peelY(P, pr) {\n  const span = H + 2.6 * P.R0 + 6, e = pr \u003c 0.08 ? (pr * pr) / 0.16 : pr - 0.04;\n  return -1.3 * P.R0 - 2 + (span * e) / 0.96;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], 0, 1);\n  P.curl = cl(k[3], 0, 1);\n  P.R0 = 5.5 + 10 * P.curl;\n  const d = (d0 * P.speed) / 2;\n  P.t += d;\n  P.pt += d;\n  P.coatAge += d;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.phase === DRY) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n    else if (P.phase === BARE) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0), (P.queue = true);\n    else if (P.phase === COAT) P.queue = true;\n  }\n  if (P.phase === PEEL && P.pt >= PEEL_T) (P.phase = BARE), (P.pt = 0);\n  else if (P.phase === BARE && P.pt >= BARE_T) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0);\n  else if (P.phase === COAT && P.pt >= COAT_T) {\n    P.phase = P.queue ? PEEL : DRY;\n    P.pt = 0;\n    P.queue = false;\n    if (P.phase === PEEL) P.unc.fill(-1);\n  } else if (P.phase === DRY && P.pt >= DRY_T) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n\n  // Spots where the gel holds on. Each one holds the peel line back for about\n  // a second while the film stretches, up to 5 rows, then lets go: the line\n  // snaps forward past straight and settles in a fifth of a second.\n  for (const s of P.sticks) {\n    s.age += d;\n    if (s.age > s.len + 0.35) {\n      s.age = -0.3 - 1.4 * Math.random();\n      s.x = 6 + Math.random() * 52;\n      s.w = 6 + Math.random() * 6;\n      s.a = 2.5 + Math.random() * 3;\n      s.len = 0.8 + Math.random() * 0.6;\n    }\n  }\n  if (P.phase === PEEL) {\n    const pr = P.pt / PEEL_T, Y = peelY(P, pr), t = P.t;\n    // The roll gathers the sheet and grows by half on its way down.\n    const R = P.R0 * (0.85 + 0.45 * pr);\n    P.roll = Y;\n    for (let x = 0; x \u003c W; x++) {\n      let y = Y + 1.3 * sin(0.11 * x + 0.9 * t) + 0.8 * sin(0.27 * x - 1.4 * t + 1) + 1.2 * tap(x * 0.9, t * 3);\n      for (const s of P.sticks) {\n        if (s.age \u003c 0) continue;\n        const g = exp(-(((x - s.x) / s.w) ** 2));\n        let lag;\n        if (s.age \u003c s.len) lag = s.a * (s.age / s.len) ** 1.5;\n        else {\n          const q = s.age - s.len;\n          lag = s.a * exp(-q / 0.07) * cos(q * 26);\n        }\n        y -= lag * g;\n      }\n      P.yf[x] = y;\n      P.rr[x] = R * (1 + 0.07 * sin(0.2 * x + 0.5 * t));\n      // Skin the peel has just passed over keeps a fresh glow for a while.\n      const top = min(H, max(0, floor(y)));\n      for (let yy = 0; yy \u003c top; yy++) {\n        const p = yy * W + x;\n        if (P.unc[p] \u003c 0) P.unc[p] = t;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const t = P.t, ph = P.phase, k3 = P.thick, tint = P.tint;\n  if (P.lastHue !== P.hue) {\n    // From red through orange and gold to lime the gel is lifted towards\n    // coral, peach, butter and pale lime: less saturation and more light than\n    // the skin, so it reads as a lit jelly. At 0.6 of full these hues read as\n    // brick, tan, khaki and olive.\n    let h = P.hue + 0.78;\n    h -= floor(h);\n    let dh = h - 0.13;\n    if (dh > 0.5) dh -= 1;\n    P.warm = sm(1 - abs(dh) / 0.21);\n    hsv(h, 0.68 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm, tr = tint[0], tg = tint[1], tb = tint[2];\n  // The gel's own colour at the start knobs is about 0.6 of full: deep enough\n  // that the peel reads as a change of light, not only of colour.\n  const deepV = 0.6 + 0.65 * warm - 0.14 * k3 * (1 - warm), op = 0.55 + 0.4 * k3;\n  const cf = ph === COAT ? coatFront(P.pt) : 0;\n  // A strip light's reflection drifts slowly across the gel.\n  const sweep = 52 + 34 * sin(t * 0.21);\n  // The broad glow on the skin wanders.\n  const gx = 32 + 20 * sin(t * 0.17), gy = 64 + 40 * sin(t * 0.11 + 1);\n\n  for (let x = 0; x \u003c W; x++) {\n    const yf = P.yf[x], R = P.rr[x], wob = 1.5 * sin(0.2 * x + 3 * P.pt) + sin(0.37 * x - 2 * P.pt);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      // Is there gel here, and how wet is it?\n      let film;\n      if (ph === PEEL) film = y > yf;\n      else if (ph === DRY) film = true;\n      else if (ph === BARE) film = false;\n      else film = y \u003c cf + wob;\n      const wet = film ? exp(-max(0, P.coatAge - coatPassed(y)) / 1.4) : 0;\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and mint\n      // across the panel, a broad soft glow that wanders, fine shimmer, and a\n      // fresh glow where the film has just come off.\n      const q = 0.5 * tap(x * 0.45 + 7, y * 0.45 + t * 0.8) + (x * 0.6 + y) / 170 + t * 0.03;\n      const gl = exp(-((x - gx) ** 2 + (y - gy) ** 2 * 0.3) / 1300);\n      const fr = P.unc[p] >= 0 ? exp(-(t - P.unc[p]) / 2.2) : 0;\n      const L = 0.8 + 0.13 * gl + 0.1 * fr + 0.02 * (hash(p) - 0.5);\n      let r = (1 + 0.035 * cos(TAU * q) + 0.03 * fr) * L;\n      let g = (0.875 + 0.03 * cos(TAU * (q - 0.33))) * L;\n      let b = (0.83 + 0.04 * cos(TAU * (q - 0.67)) + 0.015 * fr) * L;\n      const hs = hash(p + 101);\n      if (hs \u003c 0.022) {\n        const tw = max(0, sin(t * (2.4 + 40 * hs) + hash(p + 5) * 40)) ** 10 * (0.4 + 0.3 * gl);\n        r += tw;\n        g += tw;\n        b += tw;\n      }\n\n      if (film) {\n        // The gel: its own deep colour over the skin seen through it, uneven\n        // in thickness, deeper while wet. Wet, the strip light shows as a\n        // sharp band that the coat's ripples bend; dry, a broad soft sheen\n        // over a fine satin grain.\n        const th = tap(x * 0.8 + 60, y * 0.8 + 31);\n        const dv = deepV * (1 + (0.2 * th - 0.1 * wet) * (1 - 0.7 * warm)), thr = 1 - op;\n        r = tr * dv * op + r * (0.5 + 0.5 * tr) * thr * 0.8;\n        g = tg * dv * op + g * (0.5 + 0.5 * tg) * thr * 0.8;\n        b = tb * dv * op + b * (0.5 + 0.5 * tb) * thr * 0.8;\n        const rip = ph === COAT ? 2.5 * wet * sin((y - cf) * 0.32 - P.pt * 5) * exp(-max(0, cf - y) / 30) : 0;\n        const band = x * 0.5 + y * 0.42 + th * 4 + rip - sweep;\n        const wd = 13 - 8.5 * wet, amp = 0.15 + 0.12 * k3 + 0.55 * wet;\n        let hl = amp * exp(-((band / wd) ** 2)) + 0.3 * wet * exp(-(((band + 24) / 2.5) ** 2));\n        // Behind the coat's edge the wet gel still moves in low swells, each\n        // catching a thin line of light, and they die out as it settles.\n        if (ph === COAT && y \u003c cf + wob) hl += 0.3 * wet * max(0, sin((y - cf - wob) * 0.42 - P.pt * 5)) ** 8 * exp(-(cf - y) / 26);\n        const grain = (1 - wet) * 0.04 * (hash(p + 33) - 0.5);\n        r += hl * (0.85 + 0.15 * tr) + grain;\n        g += hl * (0.85 + 0.15 * tg) + grain;\n        b += hl * (0.85 + 0.15 * tb) + grain;\n        // The new coat's leading edge is a ridge of wet gel: a line of light\n        // on its upper slope, deeper colour where it is thickest.\n        if (ph === COAT) {\n          const e = y - (cf + wob);\n          if (e > -6) {\n            const deep = 1 - 0.28 * exp(-(((e + 1.2) / 1.3) ** 2)), hi = 0.75 * exp(-(((e + 3.2) / 0.9) ** 2));\n            r = r * deep + hi;\n            g = g * deep + hi;\n            b = b * deep + hi;\n          }\n        }\n        // Below the curl, its shadow on the film, lighter on the warm hues,\n        // where a deep shadow turns butter to olive.\n        if (ph === PEEL) {\n          const sd = (0.45 - 0.22 * warm) * exp(-max(0, y - yf - R * 0.9) / (0.7 * R + 1));\n          r *= 1 - sd;\n          g *= 1 - sd;\n          b *= 1 - sd;\n        }\n      }\n\n      // The curl: a cylinder of film lying on the skin along the peel line,\n      // its paler underside out. Its material turns as it rolls, carrying faint\n      // stretch lines and the edge of the outer turn round with it, and light\n      // coming through the gel tints its lower edge.\n      if (ph === PEEL) {\n        const v = (y - yf) / R;\n        if (v \u003c -1 && v > -1.6) {\n          // A little shade on the skin just above the roll.\n          const ao = 0.2 * sm((v + 1.6) / 0.6);\n          r *= 1 - ao;\n          g *= 1 - ao;\n          b *= 1 - ao;\n        }\n        if (v > -1.05 && v \u003c 1.05) {\n          const vv = cl(v, -0.999, 0.999), nz = sqrt(1 - vv * vv);\n          const dif = max(0, (vv * LY - nz * LZ) * LN);\n          const sp = max(0, (vv * HY - nz * HZ) * HN) ** 30;\n          const s = atan2(vv, nz) * R - P.roll;\n          const str = 0.05 * sin(s * 0.8 + tap(x * 0.7, 40) * 5);\n          let ed = (s / (TAU * R)) % 1;\n          if (ed \u003c 0) ed += 1;\n          const line = 0.16 * exp(-(((ed > 0.5 ? ed - 1 : ed) / 0.025) ** 2));\n          const lit = (0.32 + 0.3 * warm + 0.62 * dif) * (1 + str - line);\n          const rim = (1 - nz) ** 2 * 0.4, glow = 0.35 * sm((vv - 0.1) / 0.8);\n          const ur = 0.3 + 0.7 * tr, ug = 0.3 + 0.7 * tg, ub = 0.3 + 0.7 * tb;\n          const cr = ur * lit + (rim + glow) * tr + sp;\n          const cg = ug * lit + (rim + glow) * tg + sp;\n          const cbl = ub * lit + (rim + glow) * tb + sp;\n          const cov = cl((1 - abs(v)) * R + 0.5, 0, 1);\n          r += (cr - r) * cov;\n          g += (cg - g) * cov;\n          b += (cbl - b) * cov;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-peel-off","type":"code","name":"peel-off","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Peel-Off\n// Family:  cosmetic\n// Idea:    A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a peel-off gel mask lifted off in one sheet\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1\n//\n// Knob 1: Hue. The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive.\n// Knob 2: Speed. How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower.\n// Knob 3: Thickness. How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine.\n// Knob 4: Curl. How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40.\n// Buttons: K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells, built once: the pearl of the skin and the gel's uneven thickness.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 7 + o * 9973) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// Phases: the film peels, the skin shows bare, a new coat flows on, it dries.\nconst PEEL = 0, BARE = 1, COAT = 2, DRY = 3;\nconst PEEL_T = 7.5, BARE_T = 1.2, COAT_T = 2.4, DRY_T = 3.8;\n\n// The light: above and a little left, in front.\nconst LX = -0.15, LY = -0.75, LZ = -0.64, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst HX = LX * LN, HY = LY * LN, HZ = LZ * LN - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    t: 0, hue: 0, speed: 2, thick: 0, curl: 0.06,\n    phase: PEEL, pt: 0, coatAge: 99, queue: false,\n    yf: new Float32Array(W), rr: new Float32Array(W), roll: 0, R0: 6,\n    unc: new Float32Array(N).fill(-1),\n    sticks: [{ x: 20, w: 9, a: 4, age: -0.8, len: 1.2 }, { x: 46, w: 7, a: 3.5, age: -2.6, len: 1.0 }],\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n}\n\n// Where the coat's leading edge is, pt seconds into the coat: it flows fast\n// from the top and slows as it reaches the bottom.\nconst coatFront = (pt) => -4 + 136 * (1 - (1 - min(1, pt / COAT_T)) ** 2);\n// When it passed row y, for how wet that row still is.\nconst coatPassed = (y) => COAT_T * (1 - sqrt(cl(1 - (y + 4) / 136, 0, 1)));\n\n// The peel line: it starts above the top edge and leaves below the bottom.\nfunction peelY(P, pr) {\n  const span = H + 2.6 * P.R0 + 6, e = pr \u003c 0.08 ? (pr * pr) / 0.16 : pr - 0.04;\n  return -1.3 * P.R0 - 2 + (span * e) / 0.96;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], 0, 1);\n  P.curl = cl(k[3], 0, 1);\n  P.R0 = 5.5 + 10 * P.curl;\n  const d = (d0 * P.speed) / 2;\n  P.t += d;\n  P.pt += d;\n  P.coatAge += d;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.phase === DRY) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n    else if (P.phase === BARE) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0), (P.queue = true);\n    else if (P.phase === COAT) P.queue = true;\n  }\n  if (P.phase === PEEL && P.pt >= PEEL_T) (P.phase = BARE), (P.pt = 0);\n  else if (P.phase === BARE && P.pt >= BARE_T) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0);\n  else if (P.phase === COAT && P.pt >= COAT_T) {\n    P.phase = P.queue ? PEEL : DRY;\n    P.pt = 0;\n    P.queue = false;\n    if (P.phase === PEEL) P.unc.fill(-1);\n  } else if (P.phase === DRY && P.pt >= DRY_T) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n\n  // Spots where the gel holds on. Each one holds the peel line back for about\n  // a second while the film stretches, up to 5 rows, then lets go: the line\n  // snaps forward past straight and settles in a fifth of a second.\n  for (const s of P.sticks) {\n    s.age += d;\n    if (s.age > s.len + 0.35) {\n      s.age = -0.3 - 1.4 * Math.random();\n      s.x = 6 + Math.random() * 52;\n      s.w = 6 + Math.random() * 6;\n      s.a = 2.5 + Math.random() * 3;\n      s.len = 0.8 + Math.random() * 0.6;\n    }\n  }\n  if (P.phase === PEEL) {\n    const pr = P.pt / PEEL_T, Y = peelY(P, pr), t = P.t;\n    // The roll gathers the sheet and grows by half on its way down.\n    const R = P.R0 * (0.85 + 0.45 * pr);\n    P.roll = Y;\n    for (let x = 0; x \u003c W; x++) {\n      let y = Y + 1.3 * sin(0.11 * x + 0.9 * t) + 0.8 * sin(0.27 * x - 1.4 * t + 1) + 1.2 * tap(x * 0.9, t * 3);\n      for (const s of P.sticks) {\n        if (s.age \u003c 0) continue;\n        const g = exp(-(((x - s.x) / s.w) ** 2));\n        let lag;\n        if (s.age \u003c s.len) lag = s.a * (s.age / s.len) ** 1.5;\n        else {\n          const q = s.age - s.len;\n          lag = s.a * exp(-q / 0.07) * cos(q * 26);\n        }\n        y -= lag * g;\n      }\n      P.yf[x] = y;\n      P.rr[x] = R * (1 + 0.07 * sin(0.2 * x + 0.5 * t));\n      // Skin the peel has just passed over keeps a fresh glow for a while.\n      const top = min(H, max(0, floor(y)));\n      for (let yy = 0; yy \u003c top; yy++) {\n        const p = yy * W + x;\n        if (P.unc[p] \u003c 0) P.unc[p] = t;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const t = P.t, ph = P.phase, k3 = P.thick, tint = P.tint;\n  if (P.lastHue !== P.hue) {\n    // From red through orange and gold to lime the gel is lifted towards\n    // coral, peach, butter and pale lime: less saturation and more light than\n    // the skin, so it reads as a lit jelly. At 0.6 of full these hues read as\n    // brick, tan, khaki and olive.\n    let h = P.hue + 0.78;\n    h -= floor(h);\n    let dh = h - 0.13;\n    if (dh > 0.5) dh -= 1;\n    P.warm = sm(1 - abs(dh) / 0.21);\n    hsv(h, 0.68 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm, tr = tint[0], tg = tint[1], tb = tint[2];\n  // The gel's own colour at the start knobs is about 0.6 of full: deep enough\n  // that the peel reads as a change of light, not only of colour.\n  const deepV = 0.6 + 0.65 * warm - 0.14 * k3 * (1 - warm), op = 0.55 + 0.4 * k3;\n  const cf = ph === COAT ? coatFront(P.pt) : 0;\n  // A strip light's reflection drifts slowly across the gel.\n  const sweep = 52 + 34 * sin(t * 0.21);\n  // The broad glow on the skin wanders.\n  const gx = 32 + 20 * sin(t * 0.17), gy = 64 + 40 * sin(t * 0.11 + 1);\n\n  for (let x = 0; x \u003c W; x++) {\n    const yf = P.yf[x], R = P.rr[x], wob = 1.5 * sin(0.2 * x + 3 * P.pt) + sin(0.37 * x - 2 * P.pt);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      // Is there gel here, and how wet is it?\n      let film;\n      if (ph === PEEL) film = y > yf;\n      else if (ph === DRY) film = true;\n      else if (ph === BARE) film = false;\n      else film = y \u003c cf + wob;\n      const wet = film ? exp(-max(0, P.coatAge - coatPassed(y)) / 1.4) : 0;\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and mint\n      // across the panel, a broad soft glow that wanders, fine shimmer, and a\n      // fresh glow where the film has just come off.\n      const q = 0.5 * tap(x * 0.45 + 7, y * 0.45 + t * 0.8) + (x * 0.6 + y) / 170 + t * 0.03;\n      const gl = exp(-((x - gx) ** 2 + (y - gy) ** 2 * 0.3) / 1300);\n      const fr = P.unc[p] >= 0 ? exp(-(t - P.unc[p]) / 2.2) : 0;\n      const L = 0.8 + 0.13 * gl + 0.1 * fr + 0.02 * (hash(p) - 0.5);\n      let r = (1 + 0.035 * cos(TAU * q) + 0.03 * fr) * L;\n      let g = (0.875 + 0.03 * cos(TAU * (q - 0.33))) * L;\n      let b = (0.83 + 0.04 * cos(TAU * (q - 0.67)) + 0.015 * fr) * L;\n      const hs = hash(p + 101);\n      if (hs \u003c 0.022) {\n        const tw = max(0, sin(t * (2.4 + 40 * hs) + hash(p + 5) * 40)) ** 10 * (0.4 + 0.3 * gl);\n        r += tw;\n        g += tw;\n        b += tw;\n      }\n\n      if (film) {\n        // The gel: its own deep colour over the skin seen through it, uneven\n        // in thickness, deeper while wet. Wet, the strip light shows as a\n        // sharp band that the coat's ripples bend; dry, a broad soft sheen\n        // over a fine satin grain.\n        const th = tap(x * 0.8 + 60, y * 0.8 + 31);\n        const dv = deepV * (1 + (0.2 * th - 0.1 * wet) * (1 - 0.7 * warm)), thr = 1 - op;\n        r = tr * dv * op + r * (0.5 + 0.5 * tr) * thr * 0.8;\n        g = tg * dv * op + g * (0.5 + 0.5 * tg) * thr * 0.8;\n        b = tb * dv * op + b * (0.5 + 0.5 * tb) * thr * 0.8;\n        const rip = ph === COAT ? 2.5 * wet * sin((y - cf) * 0.32 - P.pt * 5) * exp(-max(0, cf - y) / 30) : 0;\n        const band = x * 0.5 + y * 0.42 + th * 4 + rip - sweep;\n        const wd = 13 - 8.5 * wet, amp = 0.15 + 0.12 * k3 + 0.55 * wet;\n        let hl = amp * exp(-((band / wd) ** 2)) + 0.3 * wet * exp(-(((band + 24) / 2.5) ** 2));\n        // Behind the coat's edge the wet gel still moves in low swells, each\n        // catching a thin line of light, and they die out as it settles.\n        if (ph === COAT && y \u003c cf + wob) hl += 0.3 * wet * max(0, sin((y - cf - wob) * 0.42 - P.pt * 5)) ** 8 * exp(-(cf - y) / 26);\n        const grain = (1 - wet) * 0.04 * (hash(p + 33) - 0.5);\n        r += hl * (0.85 + 0.15 * tr) + grain;\n        g += hl * (0.85 + 0.15 * tg) + grain;\n        b += hl * (0.85 + 0.15 * tb) + grain;\n        // The new coat's leading edge is a ridge of wet gel: a line of light\n        // on its upper slope, deeper colour where it is thickest.\n        if (ph === COAT) {\n          const e = y - (cf + wob);\n          if (e > -6) {\n            const deep = 1 - 0.28 * exp(-(((e + 1.2) / 1.3) ** 2)), hi = 0.75 * exp(-(((e + 3.2) / 0.9) ** 2));\n            r = r * deep + hi;\n            g = g * deep + hi;\n            b = b * deep + hi;\n          }\n        }\n        // Below the curl, its shadow on the film, lighter on the warm hues,\n        // where a deep shadow turns butter to olive.\n        if (ph === PEEL) {\n          const sd = (0.45 - 0.22 * warm) * exp(-max(0, y - yf - R * 0.9) / (0.7 * R + 1));\n          r *= 1 - sd;\n          g *= 1 - sd;\n          b *= 1 - sd;\n        }\n      }\n\n      // The curl: a cylinder of film lying on the skin along the peel line,\n      // its paler underside out. Its material turns as it rolls, carrying faint\n      // stretch lines and the edge of the outer turn round with it, and light\n      // coming through the gel tints its lower edge.\n      if (ph === PEEL) {\n        const v = (y - yf) / R;\n        if (v \u003c -1 && v > -1.6) {\n          // A little shade on the skin just above the roll.\n          const ao = 0.2 * sm((v + 1.6) / 0.6);\n          r *= 1 - ao;\n          g *= 1 - ao;\n          b *= 1 - ao;\n        }\n        if (v > -1.05 && v \u003c 1.05) {\n          const vv = cl(v, -0.999, 0.999), nz = sqrt(1 - vv * vv);\n          const dif = max(0, (vv * LY - nz * LZ) * LN);\n          const sp = max(0, (vv * HY - nz * HZ) * HN) ** 30;\n          const s = atan2(vv, nz) * R - P.roll;\n          const str = 0.05 * sin(s * 0.8 + tap(x * 0.7, 40) * 5);\n          let ed = (s / (TAU * R)) % 1;\n          if (ed \u003c 0) ed += 1;\n          const line = 0.16 * exp(-(((ed > 0.5 ? ed - 1 : ed) / 0.025) ** 2));\n          const lit = (0.32 + 0.3 * warm + 0.62 * dif) * (1 + str - line);\n          const rim = (1 - nz) ** 2 * 0.4, glow = 0.35 * sm((vv - 0.1) / 0.8);\n          const ur = 0.3 + 0.7 * tr, ug = 0.3 + 0.7 * tg, ub = 0.3 + 0.7 * tb;\n          const cr = ur * lit + (rim + glow) * tr + sp;\n          const cg = ug * lit + (rim + glow) * tg + sp;\n          const cbl = ub * lit + (rim + glow) * tb + sp;\n          const cov = cl((1 - abs(v)) * R + 0.5, 0, 1);\n          r += (cr - r) * cov;\n          g += (cg - g) * cov;\n          b += (cbl - b) * cov;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower."},{"name":"Thickness","min":0,"max":1,"about":"How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine."},{"name":"Curl","min":0,"max":1,"about":"How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40."}],"start":[0,2,0,0.06],"measures":{"motion":0.2317,"detail":0.0136,"edges":0.1088,"complexity":2.1892,"coverage":1,"colour":0.193,"drift":0.226},"knobResponse":[0.1816,0.2118,0.0647,0.0647]},{"slug":"peg-light","title":"Peg Light","family":"toy","round":18,"note":"1967년 Lite-Brite 처럼 검은 판의 엇갈린 구멍에 색 페그를 하나씩 꽂아 로켓, 돛배, 화분, 물고기, 집, 광대 그림을 채워요. 다 차면 4초 머문 뒤 페그가 위에서부터 쓸려 빠지고 다음 종이가 올라가요. K1 을 누르면 판을 비우고 같은 그림을 처음부터 다시 꽂아요.","idea":"Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.","buttons":"K1 tap pushes every peg out and starts the same picture again.","code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-peg-light","type":"code","name":"peg-light","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulb","min":0,"max":1,"about":"The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first."},{"name":"Speed","min":0.2,"max":3,"about":"Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too."},{"name":"Picture","min":0,"max":5,"about":"Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order."},{"name":"Glow","min":0,"max":1,"about":"How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.0352,"detail":0.2377,"edges":0.8627,"complexity":0.6614,"coverage":0.1604,"colour":0.2171,"drift":0.0512},"knobResponse":[0.0548,0.0566,0.1395,0.0943]},{"slug":"pendulum-wave","title":"Pendulum Wave","family":"physics","round":24,"note":"길이가 조금씩 다른 진자 줄을 위에서 내려다봐요. 한꺼번에 놓은 추들이 한 줄로 흔들리다가 뱀처럼 휘고, 세 줄, 두 줄로 엇갈렸다가 28초 만에 다시 한 줄로 모여요. K1 이 강철에서 놋쇠와 구리를 지나 무지개 유리구슬까지 추를 바꾸고, K4 를 올리면 추가 지나간 자리에 빛 꼬리가 남아요.","idea":"Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.","buttons":"K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.","code":"// ===== Patternflow pattern =====\n// Title:   Pendulum Wave\n// Family:  physics\n// Idea:    Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the pendulum wave demonstration of the Harvard Natural Sciences Lecture Demonstrations, fifteen pendulums tuned to 51 to 65 swings a minute\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1\n//\n// Knob 1: Finish. The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow.\n// Knob 2: Speed. The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again.\n// Knob 3: Pendulums. How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22.\n// Knob 4: Trails. A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them.\n// Buttons: K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, cos, sqrt, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// The beam's centre line (it covers columns 30 and 31) and the swing.\nconst BX = 31;\nconst AMP = 22;\n// One cycle at Speed 2, in seconds, and how many times the longest\n// pendulum swings in it; each shorter one swings once more.\nconst TC = 28;\nconst N0 = 22;\n// The lamp, off the left edge, and the beam's height over the table, in\n// LEDs. The longest string is 13 LEDs, so its bob hangs 4 over the table.\nconst [LX, LY, LZ] = [-34, 58, 120];\nconst ZB = 17;\nconst L0 = 13;\nconst MAXN = 24;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The lamp's colour, and the metal, at Finish 0, 1/4, 1/2 and 3/4 and on.\nconst LAMPS = [\n  [184, 206, 248],\n  [255, 214, 160],\n  [255, 192, 142],\n  [238, 236, 226],\n  [238, 236, 226],\n];\nconst METALS = [\n  [196, 208, 226],\n  [236, 172, 72],\n  [240, 122, 74],\n  [240, 122, 74],\n  [240, 122, 74],\n];\nconst stop = (T, f) => {\n  const u = cl(f, 0, 1) * 4, i = min(3, floor(u));\n  return T[i].map((v, c) => mix(v, T[i + 1][c], u - i));\n};\n\n// The table: walnut boards running along the beam, and a pale epoxy bench.\n// The lamp's pool on it never moves, so it is worked out once.\nfunction build(P) {\n  const seams = [11, 37, 58];\n  const ax = 14 - LX, ay = 62 - LY, az = -LZ, al = sqrt(ax * ax + ay * ay + az * az);\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    let pk = 0;\n    for (const s of seams) if (x >= s) pk++;\n    const sx = x + pk * 17.3, warp = 2.2 * vn(sx * 0.12, y * 0.018 + pk * 7);\n    const grain = vn(sx * 0.62 + warp, y * 0.04 + pk * 13), fine = vn(sx * 1.9, y * 0.22 + pk * 5);\n    const k = (0.74 + 0.36 * grain + 0.12 * fine) * (seams.includes(x) ? 0.6 : 1) * (0.88 + 0.24 * hash(pk, 99));\n    P.wood[i * 3] = 0.76 * k;\n    P.wood[i * 3 + 1] = 0.37 * k;\n    P.wood[i * 3 + 2] = 0.16 * k;\n    const b = 0.95 + 0.05 * hash(x, y + 300) + 0.05 * vn(x * 0.25, y * 0.25);\n    P.bench[i * 3] = 0.8 * b;\n    P.bench[i * 3 + 1] = 0.84 * b;\n    P.bench[i * 3 + 2] = 0.8 * b;\n    // Inverse square and the floor's slant, inside the shade's cone.\n    const vx = x + 0.5 - LX, vy = y + 0.5 - LY, d = sqrt(vx * vx + vy * vy + LZ * LZ);\n    const ca = (vx * ax + vy * ay + LZ * -az) / (d * al);\n    const p = (LZ / d) ** 3 * (0.25 + 0.75 * sm(0.83, 0.97, ca));\n    P.pool[i] = p;\n    top = max(top, p);\n    // The beam's shadow: it lies level, so its shadow is a straight band.\n    const bx = LX + (BX - LX) * (LZ / (LZ - ZB)), hw = LZ / (LZ - ZB);\n    P.beamD[i] = 0.5 * (1 - sm(hw - 0.9, hw + 0.9, Math.abs(x + 0.5 - bx)));\n  }\n  for (let i = 0; i \u003c N; i++) P.pool[i] /= top;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    wood: F(N * 3), bench: F(N * 3), pool: F(N), beamD: F(N), D: F(N), tr: F(N * 3), f: F(N * 3),\n    x: F(MAXN), prev: F(MAXN), from: F(MAXN), y: F(MAXN), z: F(MAXN), r: F(MAXN),\n    c: 0, n: 0, hold: 0.3, board: 1, fin: 0, tau: 0.05, first: true,\n  };\n  params.s.from.fill(BX + AMP);\n  build(params.s);\n}\n\n// Where each pendulum hangs, how high its bob is and how big it looks.\nfunction layout(P, n) {\n  P.n = n;\n  const s = H / n, rb = min(2.35, 0.31 * s);\n  for (let i = 0; i \u003c MAXN; i++) {\n    P.y[i] = floor(s / 2 + s * i) + 0.5;\n    // A string's length goes as the square of its period.\n    P.z[i] = ZB - L0 * (N0 / (N0 + i)) ** 2;\n    P.r[i] = rb * (0.93 + 0.022 * P.z[i]);\n  }\n}\n\n// The colours the finish gives the lamp and each bob.\nfunction colours(P) {\n  const f = P.fin, n = P.n;\n  P.lamp = stop(LAMPS, f);\n  P.glass = sm(0.52, 0.74, f);\n  P.benchK = sm(0.5, 0.74, f);\n  // Brass and copper tint their own highlights; steel and glass do not.\n  P.tint = (0.15 + 0.7 * sm(0, 0.25, f)) * (1 - P.glass);\n  const m = stop(METALS, f), u = sm(0.75, 1, f);\n  P.col = [];\n  // Sea-green glass at 3/4, opening into a rainbow down the row at 1.\n  for (let i = 0; i \u003c n; i++) {\n    const b = hsv(mix(0.42, 0.02 + (0.8 * i) / (n - 1), u), 0.82, 1);\n    P.col.push(m.map((v, c) => mix(v, b[c], P.glass)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const real = cl(dt || 0, 0, 0.1), d = (real * cl(k[1], 0.2, 3)) / 2;\n  P.fin = cl(k[0], 0, 1);\n  P.tau = 0.05 + 0.3 * cl(k[3], 0, 1) ** 1.6;\n  const n = cl(round(k[2]), 16, 24);\n  if (n !== P.n) layout(P, n);\n  colours(P);\n\n  // The button: a board comes in, every bob is caught against it, and all\n  // are let go at once.\n  if (input.btnPressed && input.btnPressed[0] && P.hold \u003c 0) {\n    P.hold = 0;\n    P.from.set(P.x);\n  }\n  if (P.hold >= 0) {\n    P.hold += real;\n    const e = sm(0.05, 0.6, P.hold);\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = mix(P.from[i], BX + AMP, e);\n    P.board = sm(0, 0.35, P.hold);\n    if (P.hold >= 0.95) (P.hold = -1), (P.c = 0);\n  } else {\n    P.c = (P.c + d) % TC;\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = BX + AMP * cos((2 * PI * (N0 + i) * P.c) / TC);\n    P.board = max(0, P.board - real * 5);\n  }\n  if (P.first) (P.first = false), P.prev.set(P.x);\n\n  // The long exposure fades in the pendulums' own time, so a trail is as\n  // long on the table at any speed. Each bob paints the way it came this\n  // frame, older parts dimmer.\n  const tr = P.tr, fade = exp(-d / P.tau), span = max(d, 0.004);\n  for (let i = 0; i \u003c tr.length; i++) tr[i] *= fade;\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = P.prev[i], x1 = P.x[i], y = P.y[i], rt = P.r[i] * 0.8, steps = max(1, ceil(Math.abs(x1 - x0) / 0.6));\n    const col = P.col[i].map((v, c) => (v * 0.55 + P.lamp[c] * 0.25) * 0.85);\n    for (let s = 1; s \u003c= steps; s++) {\n      const t = s / steps, xs = mix(x0, x1, t), lev = exp((-(1 - t) * span) / P.tau);\n      for (let yy = floor(y - rt - 1); yy \u003c= y + rt + 1; yy++)\n        for (let xx = floor(xs - rt - 1); xx \u003c= xs + rt + 1; xx++) {\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const dx = xx + 0.5 - xs, dy = yy + 0.5 - y, q = (dx * dx + dy * dy) / (rt * rt);\n          if (q >= 1.6) continue;\n          const a = lev * exp(-1.6 * q), o = (yy * W + xx) * 3;\n          for (let c = 0; c \u003c 3; c++) tr[o + c] = max(tr[o + c], col[c] * a);\n        }\n    }\n  }\n  P.prev.set(P.x);\n}\n\n// Where the lamp throws a point at height z onto the table.\nconst proj = (x, y, z) => {\n  const k = LZ / (LZ - z);\n  return [LX + (x - LX) * k, LY + (y - LY) * k];\n};\n\n// A shiny ball, sampled two by two inside each LED.\nfunction ball(F, cx, cy, cz, r, base, lamp, g, tint) {\n  const sc = lamp.map((v, c) => v * mix(1, (base[c] / 255) * 1.15, tint));\n  // The light leans twice as far as the lamp really stands, so the glint\n  // sits clearly on the lamp's side of a ball five LEDs across.\n  let lx = 2 * (LX - cx), ly = 2 * (LY - cy), lz = LZ - cz;\n  const ll = sqrt(lx * lx + ly * ly + lz * lz);\n  (lx /= ll), (ly /= ll), (lz /= ll);\n  let hx = lx, hy = ly, hz = lz + 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  (hx /= hl), (hy /= hl), (hz /= hl);\n  const lxy = sqrt(lx * lx + ly * ly) || 1;\n  const col = [0, 0, 0];\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      let cov = 0;\n      col[0] = col[1] = col[2] = 0;\n      for (let sy = 0; sy \u003c 2; sy++)\n        for (let sx = 0; sx \u003c 2; sx++) {\n          const dx = (x + 0.25 + 0.5 * sx - cx) / r, dy = (y + 0.25 + 0.5 * sy - cy) / r, q = dx * dx + dy * dy;\n          if (q >= 1) continue;\n          cov += 0.25;\n          const nz = sqrt(1 - q), diff = max(0, dx * lx + dy * ly + nz * lz), nh = max(0, dx * hx + dy * hy + nz * hz), spec = nh ** 18, sheen = nh ** 3;\n          // Metal: the lamp's side lit, the rim holding the dark table.\n          const rim = 0.4 + 0.6 * nz, back = max(0, -(dx * lx + dy * ly) / lxy) * sqrt(q);\n          for (let c = 0; c \u003c 3; c++) {\n            const m = base[c] * (0.1 + 0.85 * diff * sqrt(diff)) * rim, gl = base[c] * (0.3 + 0.25 * diff + 0.9 * back);\n            col[c] += (mix(m, gl, g) + sc[c] * (spec * 1.6 + 0.12 * sheen)) * 0.25;\n          }\n        }\n      if (cov \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = F[o + c] * (1 - cov) + col[c];\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const F = P.f, D = P.D, n = P.n, lamp = P.lamp, g = P.glass, bk = P.benchK;\n\n  // Shadows on the table: the beam, each string and each bob. A bob higher\n  // up throws its shadow further from the lamp and softer.\n  D.set(P.beamD);\n  const sh = [];\n  for (let i = 0; i \u003c n; i++) {\n    const [sx, sy] = proj(P.x[i], P.y[i], P.z[i]), [px, py] = proj(BX, P.y[i], ZB);\n    sh.push([sx, sy]);\n    const rs = P.r[i] * 0.95, pen = 0.45 + 0.09 * P.z[i], dk = (0.9 - 0.02 * P.z[i]) * (1 - 0.15 * g);\n    for (let y = floor(sy - rs - pen - 1); y \u003c= sy + rs + pen + 1; y++)\n      for (let x = floor(sx - rs - pen - 1); x \u003c= sx + rs + pen + 1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const dd = sqrt((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2), v = dk * (1 - sm(rs - pen, rs + pen, dd)), j = y * W + x;\n        if (v > D[j]) D[j] = v;\n      }\n    const len = sqrt((sx - px) ** 2 + (sy - py) ** 2), m = ceil(len * 1.5);\n    for (let s = 0; s \u003c= m; s++) {\n      const t = s / max(1, m), x = floor(mix(px, sx, t)), y = floor(mix(py, sy, t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && D[y * W + x] \u003c 0.2) D[y * W + x] = 0.2;\n    }\n  }\n\n  // The table under the lamp.\n  const fl = 0.42;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const e = (0.1 + 0.9 * P.pool[i] * (1 - D[i])) * fl;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(P.wood[o + c], P.bench[o + c], bk) * lamp[c] * e + P.tr[o + c];\n  }\n  // A glass bead gathers the lamp into a spot of its colour in its shadow.\n  if (g > 0.01)\n    for (let i = 0; i \u003c n; i++) {\n      const [sx, sy] = sh[i], rc = P.r[i] * 0.55, col = P.col[i];\n      for (let y = floor(sy - 3); y \u003c= sy + 3; y++)\n        for (let x = floor(sx - 3); x \u003c= sx + 3; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const q = ((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2) / (rc * rc), a = g * 0.75 * exp(-q) * (0.4 + 0.6 * P.pool[y * W + x]), o = (y * W + x) * 3;\n          for (let c = 0; c \u003c 3; c++) F[o + c] += col[c] * a;\n        }\n    }\n\n  // Strings: a fine line from the beam out to each bob, catching the lamp.\n  for (let i = 0; i \u003c n; i++) {\n    const x1 = P.x[i], y = floor(P.y[i]), a0 = min(BX, x1), a1 = max(BX, x1);\n    for (let x = floor(a0); x \u003c a1; x++) {\n      if (x \u003c 0 || x >= W) continue;\n      const o = (y * W + x) * 3, a = 0.5 * cl(min(x + 1 - a0, a1 - x), 0, 1);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], lamp[c] * 0.5, a);\n    }\n  }\n  // The bobs, the higher ones last.\n  for (let i = 0; i \u003c n; i++) ball(F, P.x[i], P.y[i], P.z[i], P.r[i], P.col[i], lamp, g, P.tint);\n\n  // The release board, a strip of pale wood that holds the row straight.\n  if (P.board > 0.01) {\n    const bx = BX + AMP + 3.2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = floor(bx); x \u003c bx + 2 && x \u003c W; x++) {\n        const o = (y * W + x) * 3, v = x === floor(bx) ? 0.85 : 0.55;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [224, 186, 132][c] * (lamp[c] / 255) * v, P.board);\n      }\n  }\n\n  // The beam over everything: brushed metal, its lamp side bright, with a\n  // clamp at every pivot.\n  for (let y = 0; y \u003c H; y++) {\n    const grain = 0.92 + 0.08 * hash(y, 7);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = (x \u003c BX ? 0.5 : 0.24) * grain;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    const y = floor(P.y[i]);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = x \u003c BX ? 0.78 : 0.4;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-pendulum-wave","type":"code","name":"pendulum-wave","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pendulum Wave\n// Family:  physics\n// Idea:    Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the pendulum wave demonstration of the Harvard Natural Sciences Lecture Demonstrations, fifteen pendulums tuned to 51 to 65 swings a minute\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1\n//\n// Knob 1: Finish. The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow.\n// Knob 2: Speed. The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again.\n// Knob 3: Pendulums. How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22.\n// Knob 4: Trails. A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them.\n// Buttons: K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, cos, sqrt, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// The beam's centre line (it covers columns 30 and 31) and the swing.\nconst BX = 31;\nconst AMP = 22;\n// One cycle at Speed 2, in seconds, and how many times the longest\n// pendulum swings in it; each shorter one swings once more.\nconst TC = 28;\nconst N0 = 22;\n// The lamp, off the left edge, and the beam's height over the table, in\n// LEDs. The longest string is 13 LEDs, so its bob hangs 4 over the table.\nconst [LX, LY, LZ] = [-34, 58, 120];\nconst ZB = 17;\nconst L0 = 13;\nconst MAXN = 24;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The lamp's colour, and the metal, at Finish 0, 1/4, 1/2 and 3/4 and on.\nconst LAMPS = [\n  [184, 206, 248],\n  [255, 214, 160],\n  [255, 192, 142],\n  [238, 236, 226],\n  [238, 236, 226],\n];\nconst METALS = [\n  [196, 208, 226],\n  [236, 172, 72],\n  [240, 122, 74],\n  [240, 122, 74],\n  [240, 122, 74],\n];\nconst stop = (T, f) => {\n  const u = cl(f, 0, 1) * 4, i = min(3, floor(u));\n  return T[i].map((v, c) => mix(v, T[i + 1][c], u - i));\n};\n\n// The table: walnut boards running along the beam, and a pale epoxy bench.\n// The lamp's pool on it never moves, so it is worked out once.\nfunction build(P) {\n  const seams = [11, 37, 58];\n  const ax = 14 - LX, ay = 62 - LY, az = -LZ, al = sqrt(ax * ax + ay * ay + az * az);\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    let pk = 0;\n    for (const s of seams) if (x >= s) pk++;\n    const sx = x + pk * 17.3, warp = 2.2 * vn(sx * 0.12, y * 0.018 + pk * 7);\n    const grain = vn(sx * 0.62 + warp, y * 0.04 + pk * 13), fine = vn(sx * 1.9, y * 0.22 + pk * 5);\n    const k = (0.74 + 0.36 * grain + 0.12 * fine) * (seams.includes(x) ? 0.6 : 1) * (0.88 + 0.24 * hash(pk, 99));\n    P.wood[i * 3] = 0.76 * k;\n    P.wood[i * 3 + 1] = 0.37 * k;\n    P.wood[i * 3 + 2] = 0.16 * k;\n    const b = 0.95 + 0.05 * hash(x, y + 300) + 0.05 * vn(x * 0.25, y * 0.25);\n    P.bench[i * 3] = 0.8 * b;\n    P.bench[i * 3 + 1] = 0.84 * b;\n    P.bench[i * 3 + 2] = 0.8 * b;\n    // Inverse square and the floor's slant, inside the shade's cone.\n    const vx = x + 0.5 - LX, vy = y + 0.5 - LY, d = sqrt(vx * vx + vy * vy + LZ * LZ);\n    const ca = (vx * ax + vy * ay + LZ * -az) / (d * al);\n    const p = (LZ / d) ** 3 * (0.25 + 0.75 * sm(0.83, 0.97, ca));\n    P.pool[i] = p;\n    top = max(top, p);\n    // The beam's shadow: it lies level, so its shadow is a straight band.\n    const bx = LX + (BX - LX) * (LZ / (LZ - ZB)), hw = LZ / (LZ - ZB);\n    P.beamD[i] = 0.5 * (1 - sm(hw - 0.9, hw + 0.9, Math.abs(x + 0.5 - bx)));\n  }\n  for (let i = 0; i \u003c N; i++) P.pool[i] /= top;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    wood: F(N * 3), bench: F(N * 3), pool: F(N), beamD: F(N), D: F(N), tr: F(N * 3), f: F(N * 3),\n    x: F(MAXN), prev: F(MAXN), from: F(MAXN), y: F(MAXN), z: F(MAXN), r: F(MAXN),\n    c: 0, n: 0, hold: 0.3, board: 1, fin: 0, tau: 0.05, first: true,\n  };\n  params.s.from.fill(BX + AMP);\n  build(params.s);\n}\n\n// Where each pendulum hangs, how high its bob is and how big it looks.\nfunction layout(P, n) {\n  P.n = n;\n  const s = H / n, rb = min(2.35, 0.31 * s);\n  for (let i = 0; i \u003c MAXN; i++) {\n    P.y[i] = floor(s / 2 + s * i) + 0.5;\n    // A string's length goes as the square of its period.\n    P.z[i] = ZB - L0 * (N0 / (N0 + i)) ** 2;\n    P.r[i] = rb * (0.93 + 0.022 * P.z[i]);\n  }\n}\n\n// The colours the finish gives the lamp and each bob.\nfunction colours(P) {\n  const f = P.fin, n = P.n;\n  P.lamp = stop(LAMPS, f);\n  P.glass = sm(0.52, 0.74, f);\n  P.benchK = sm(0.5, 0.74, f);\n  // Brass and copper tint their own highlights; steel and glass do not.\n  P.tint = (0.15 + 0.7 * sm(0, 0.25, f)) * (1 - P.glass);\n  const m = stop(METALS, f), u = sm(0.75, 1, f);\n  P.col = [];\n  // Sea-green glass at 3/4, opening into a rainbow down the row at 1.\n  for (let i = 0; i \u003c n; i++) {\n    const b = hsv(mix(0.42, 0.02 + (0.8 * i) / (n - 1), u), 0.82, 1);\n    P.col.push(m.map((v, c) => mix(v, b[c], P.glass)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const real = cl(dt || 0, 0, 0.1), d = (real * cl(k[1], 0.2, 3)) / 2;\n  P.fin = cl(k[0], 0, 1);\n  P.tau = 0.05 + 0.3 * cl(k[3], 0, 1) ** 1.6;\n  const n = cl(round(k[2]), 16, 24);\n  if (n !== P.n) layout(P, n);\n  colours(P);\n\n  // The button: a board comes in, every bob is caught against it, and all\n  // are let go at once.\n  if (input.btnPressed && input.btnPressed[0] && P.hold \u003c 0) {\n    P.hold = 0;\n    P.from.set(P.x);\n  }\n  if (P.hold >= 0) {\n    P.hold += real;\n    const e = sm(0.05, 0.6, P.hold);\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = mix(P.from[i], BX + AMP, e);\n    P.board = sm(0, 0.35, P.hold);\n    if (P.hold >= 0.95) (P.hold = -1), (P.c = 0);\n  } else {\n    P.c = (P.c + d) % TC;\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = BX + AMP * cos((2 * PI * (N0 + i) * P.c) / TC);\n    P.board = max(0, P.board - real * 5);\n  }\n  if (P.first) (P.first = false), P.prev.set(P.x);\n\n  // The long exposure fades in the pendulums' own time, so a trail is as\n  // long on the table at any speed. Each bob paints the way it came this\n  // frame, older parts dimmer.\n  const tr = P.tr, fade = exp(-d / P.tau), span = max(d, 0.004);\n  for (let i = 0; i \u003c tr.length; i++) tr[i] *= fade;\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = P.prev[i], x1 = P.x[i], y = P.y[i], rt = P.r[i] * 0.8, steps = max(1, ceil(Math.abs(x1 - x0) / 0.6));\n    const col = P.col[i].map((v, c) => (v * 0.55 + P.lamp[c] * 0.25) * 0.85);\n    for (let s = 1; s \u003c= steps; s++) {\n      const t = s / steps, xs = mix(x0, x1, t), lev = exp((-(1 - t) * span) / P.tau);\n      for (let yy = floor(y - rt - 1); yy \u003c= y + rt + 1; yy++)\n        for (let xx = floor(xs - rt - 1); xx \u003c= xs + rt + 1; xx++) {\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const dx = xx + 0.5 - xs, dy = yy + 0.5 - y, q = (dx * dx + dy * dy) / (rt * rt);\n          if (q >= 1.6) continue;\n          const a = lev * exp(-1.6 * q), o = (yy * W + xx) * 3;\n          for (let c = 0; c \u003c 3; c++) tr[o + c] = max(tr[o + c], col[c] * a);\n        }\n    }\n  }\n  P.prev.set(P.x);\n}\n\n// Where the lamp throws a point at height z onto the table.\nconst proj = (x, y, z) => {\n  const k = LZ / (LZ - z);\n  return [LX + (x - LX) * k, LY + (y - LY) * k];\n};\n\n// A shiny ball, sampled two by two inside each LED.\nfunction ball(F, cx, cy, cz, r, base, lamp, g, tint) {\n  const sc = lamp.map((v, c) => v * mix(1, (base[c] / 255) * 1.15, tint));\n  // The light leans twice as far as the lamp really stands, so the glint\n  // sits clearly on the lamp's side of a ball five LEDs across.\n  let lx = 2 * (LX - cx), ly = 2 * (LY - cy), lz = LZ - cz;\n  const ll = sqrt(lx * lx + ly * ly + lz * lz);\n  (lx /= ll), (ly /= ll), (lz /= ll);\n  let hx = lx, hy = ly, hz = lz + 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  (hx /= hl), (hy /= hl), (hz /= hl);\n  const lxy = sqrt(lx * lx + ly * ly) || 1;\n  const col = [0, 0, 0];\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      let cov = 0;\n      col[0] = col[1] = col[2] = 0;\n      for (let sy = 0; sy \u003c 2; sy++)\n        for (let sx = 0; sx \u003c 2; sx++) {\n          const dx = (x + 0.25 + 0.5 * sx - cx) / r, dy = (y + 0.25 + 0.5 * sy - cy) / r, q = dx * dx + dy * dy;\n          if (q >= 1) continue;\n          cov += 0.25;\n          const nz = sqrt(1 - q), diff = max(0, dx * lx + dy * ly + nz * lz), nh = max(0, dx * hx + dy * hy + nz * hz), spec = nh ** 18, sheen = nh ** 3;\n          // Metal: the lamp's side lit, the rim holding the dark table.\n          const rim = 0.4 + 0.6 * nz, back = max(0, -(dx * lx + dy * ly) / lxy) * sqrt(q);\n          for (let c = 0; c \u003c 3; c++) {\n            const m = base[c] * (0.1 + 0.85 * diff * sqrt(diff)) * rim, gl = base[c] * (0.3 + 0.25 * diff + 0.9 * back);\n            col[c] += (mix(m, gl, g) + sc[c] * (spec * 1.6 + 0.12 * sheen)) * 0.25;\n          }\n        }\n      if (cov \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = F[o + c] * (1 - cov) + col[c];\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const F = P.f, D = P.D, n = P.n, lamp = P.lamp, g = P.glass, bk = P.benchK;\n\n  // Shadows on the table: the beam, each string and each bob. A bob higher\n  // up throws its shadow further from the lamp and softer.\n  D.set(P.beamD);\n  const sh = [];\n  for (let i = 0; i \u003c n; i++) {\n    const [sx, sy] = proj(P.x[i], P.y[i], P.z[i]), [px, py] = proj(BX, P.y[i], ZB);\n    sh.push([sx, sy]);\n    const rs = P.r[i] * 0.95, pen = 0.45 + 0.09 * P.z[i], dk = (0.9 - 0.02 * P.z[i]) * (1 - 0.15 * g);\n    for (let y = floor(sy - rs - pen - 1); y \u003c= sy + rs + pen + 1; y++)\n      for (let x = floor(sx - rs - pen - 1); x \u003c= sx + rs + pen + 1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const dd = sqrt((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2), v = dk * (1 - sm(rs - pen, rs + pen, dd)), j = y * W + x;\n        if (v > D[j]) D[j] = v;\n      }\n    const len = sqrt((sx - px) ** 2 + (sy - py) ** 2), m = ceil(len * 1.5);\n    for (let s = 0; s \u003c= m; s++) {\n      const t = s / max(1, m), x = floor(mix(px, sx, t)), y = floor(mix(py, sy, t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && D[y * W + x] \u003c 0.2) D[y * W + x] = 0.2;\n    }\n  }\n\n  // The table under the lamp.\n  const fl = 0.42;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const e = (0.1 + 0.9 * P.pool[i] * (1 - D[i])) * fl;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(P.wood[o + c], P.bench[o + c], bk) * lamp[c] * e + P.tr[o + c];\n  }\n  // A glass bead gathers the lamp into a spot of its colour in its shadow.\n  if (g > 0.01)\n    for (let i = 0; i \u003c n; i++) {\n      const [sx, sy] = sh[i], rc = P.r[i] * 0.55, col = P.col[i];\n      for (let y = floor(sy - 3); y \u003c= sy + 3; y++)\n        for (let x = floor(sx - 3); x \u003c= sx + 3; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const q = ((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2) / (rc * rc), a = g * 0.75 * exp(-q) * (0.4 + 0.6 * P.pool[y * W + x]), o = (y * W + x) * 3;\n          for (let c = 0; c \u003c 3; c++) F[o + c] += col[c] * a;\n        }\n    }\n\n  // Strings: a fine line from the beam out to each bob, catching the lamp.\n  for (let i = 0; i \u003c n; i++) {\n    const x1 = P.x[i], y = floor(P.y[i]), a0 = min(BX, x1), a1 = max(BX, x1);\n    for (let x = floor(a0); x \u003c a1; x++) {\n      if (x \u003c 0 || x >= W) continue;\n      const o = (y * W + x) * 3, a = 0.5 * cl(min(x + 1 - a0, a1 - x), 0, 1);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], lamp[c] * 0.5, a);\n    }\n  }\n  // The bobs, the higher ones last.\n  for (let i = 0; i \u003c n; i++) ball(F, P.x[i], P.y[i], P.z[i], P.r[i], P.col[i], lamp, g, P.tint);\n\n  // The release board, a strip of pale wood that holds the row straight.\n  if (P.board > 0.01) {\n    const bx = BX + AMP + 3.2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = floor(bx); x \u003c bx + 2 && x \u003c W; x++) {\n        const o = (y * W + x) * 3, v = x === floor(bx) ? 0.85 : 0.55;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [224, 186, 132][c] * (lamp[c] / 255) * v, P.board);\n      }\n  }\n\n  // The beam over everything: brushed metal, its lamp side bright, with a\n  // clamp at every pivot.\n  for (let y = 0; y \u003c H; y++) {\n    const grain = 0.92 + 0.08 * hash(y, 7);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = (x \u003c BX ? 0.5 : 0.24) * grain;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    const y = floor(P.y[i]);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = x \u003c BX ? 0.78 : 0.4;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Finish","min":0,"max":1,"about":"The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again."},{"name":"Pendulums","min":16,"max":24,"about":"How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22."},{"name":"Trails","min":0,"max":1,"about":"A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them."}],"start":[0,2,16,0.06],"measures":{"motion":0.7632,"detail":0.0304,"edges":0.1868,"complexity":1.4841,"coverage":0.886,"colour":0.0797,"drift":0.0334},"knobResponse":[0.1242,0.0438,0.0523,0.0491]},{"slug":"penrose","title":"Penrose","family":"geometry","round":25,"note":"굵은 마름모와 가는 마름모의 펜로즈 타일링이 다섯 겹 대칭의 가운데로 끝없이 들어가요. 가운데서 꽃잎 다섯 장 꼴로 열리는 빛의 고리가 지나가면 타일이 황금비만큼 작은 타일로 나뉘고, 굵은 마름모 다섯이 모인 별은 금색이에요. Glow 를 올리면 유리가 어두워져 고리 뒤만 밝고, K1 을 누르면 연과 화살(P2)로 바뀌어요.","idea":"A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.","buttons":"K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.","code":"// ===== Patternflow pattern =====\n// Title:   Penrose\n// Family:  geometry\n// Idea:    A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after Roger Penrose's rhomb tiling (P3) and Raphael Robinson's golden triangles\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1\n//\n// Knob 1: Hue. Turns all the tile colours round the colour wheel together.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute.\n// Knob 3: Size. The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them.\n// Knob 4: Glow. How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring.\n// Buttons: K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.\n\n// The centre sits on an LED column, so the edges along the five-fold axis\n// draw as one dark LED rather than two grey ones.\nconst W = 64, H = 128, N = W * H, CX = 31.5, CY = 64;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, round, hypot, PI } = Math;\nconst PHI = (1 + sqrt(5)) / 2;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The smallest Size, how far the splitting ring runs in one level, the reach\n// of its five petals and how many levels lie between the seed and the tiles.\nconst EMIN = 7, RHO = 130, PET = 0.12, DEEP = 6;\n\n// Robinson's golden triangles. A triangle [kind, A, B, C, parent] is half a\n// tile: AB and AC are tile edges, BC runs through the middle of the tile.\n// Kind 0 is the sharp one (36-72-72), kind 1 the blunt one (108-36-36).\n// Rhombs (P3) and kites and darts (P2) split them by different rules.\nfunction split(fam, T, out, idx, R) {\n  const put = (k, ax, ay, bx, by, cx, cy) => {\n    if (reach(ax, ay, bx, by, cx, cy) \u003c R) out.push([k, ax, ay, bx, by, cx, cy, idx]);\n  };\n  const [k, ax, ay, bx, by, cx, cy] = T;\n  const g = (p, q) => p + (q - p) / PHI;\n  if (fam === 0) {\n    if (k === 0) {\n      const px = g(ax, bx), py = g(ay, by);\n      put(0, cx, cy, px, py, bx, by);\n      put(1, px, py, cx, cy, ax, ay);\n    } else {\n      const qx = g(bx, ax), qy = g(by, ay), rx = g(bx, cx), ry = g(by, cy);\n      put(1, rx, ry, cx, cy, ax, ay);\n      put(1, qx, qy, rx, ry, bx, by);\n      put(0, rx, ry, qx, qy, ax, ay);\n    }\n  } else if (k === 0) {\n    const qx = g(ax, bx), qy = g(ay, by), rx = g(bx, cx), ry = g(by, cy);\n    put(1, rx, ry, qx, qy, bx, by);\n    put(0, qx, qy, ax, ay, rx, ry);\n    put(0, cx, cy, ax, ay, rx, ry);\n  } else {\n    const px = g(cx, ax), py = g(cy, ay);\n    put(1, bx, by, px, py, ax, ay);\n    put(0, px, py, cx, cy, bx, by);\n  }\n}\n\n// How far the origin is from a triangle.\nfunction seg(ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay, t = cl(-(ax * dx + ay * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(ax + t * dx, ay + t * dy);\n}\nfunction reach(ax, ay, bx, by, cx, cy) {\n  const s1 = ax * by - ay * bx, s2 = bx * cy - by * cx, s3 = cx * ay - cy * ax;\n  if ((s1 >= 0 && s2 >= 0 && s3 >= 0) || (s1 \u003c= 0 && s2 \u003c= 0 && s3 \u003c= 0)) return 0;\n  return min(seg(ax, ay, bx, by), seg(bx, by, cx, cy), seg(cx, cy, ax, ay));\n}\n\n// One tiling, three levels deep. Level 0 has tile edge 1; levels 1 and 2 are\n// it split once and twice. Level 2 blown up by phi squared and turned 36\n// degrees is level 0 again, which is what lets the zoom run for ever. The\n// rhombs grow from a star of five fat rhombs, kites and darts from a sun of\n// five kites; both come back to themselves every second split. Each level\n// reaches just past the corners of the panel at the smallest Size.\nfunction build(fam, scale) {\n  const s = EMIN * scale, R = [75 / s + 3, 75 / s + 2, 75 / (s * PHI) + 1.5];\n  let T = [];\n  for (let i = 0; i \u003c 10; i++) {\n    const a = -PI / 2 + ((2 * PI) / 5) * (i >> 1), b = a + (i & 1 ? PI : -PI) / 5, L = PHI ** DEEP;\n    if (fam === 0) T.push([1, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L * PHI, sin(a) * L * PHI, 0]);\n    else T.push([0, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L, sin(a) * L, 0]);\n  }\n  const levels = [];\n  for (let d = 0; d \u003c DEEP + 2; d++) {\n    const out = [];\n    T.forEach((t, i) => split(fam, t, out, i, R[max(0, d - DEEP + 1)]));\n    T = out;\n    if (d >= DEEP - 1) levels.push(T);\n  }\n  return levels;\n}\n\n// Every corner where tiles meet is one of seven kinds; for kites and darts\n// Conway named them sun, star, ace, deuce, jack, queen and king. A tile's\n// colour class comes from its kind and the kinds of its four corners: ten\n// classes of rhomb, eight of kite and dart.\nconst vkey = (x, y) => round(x * 4096) * 1048576 + round(y * 4096);\n// The angle at A, B and C in tenths of a turn, sharp then blunt, per tiling.\nconst ANG = [\n  [1, 2, 2, 3, 1, 1],\n  [2, 1, 2, 1, 3, 1],\n];\nfunction classify(fam, levels) {\n  const an = ANG[fam];\n  const maps = levels.map((L) => {\n    const V = new Map();\n    const add = (x, y, slot) => {\n      const k = vkey(x, y);\n      let c = V.get(k);\n      if (!c) V.set(k, (c = new Array(16).fill(0)));\n      c[slot]++;\n    };\n    for (const [k, ax, ay, bx, by, cx, cy] of L) {\n      add(ax, ay, k * 8 + an[k * 3]);\n      add(bx, by, k * 8 + 4 + an[k * 3 + 1]);\n      add(cx, cy, k * 8 + 4 + an[k * 3 + 2]);\n    }\n    // A corner cut off at the edge of the patch does not close to 360 degrees.\n    for (const [k, c] of V) V.set(k, c.reduce((s, n, i) => s + n * (i & 3), 0) === 10 ? c.join(\" \") : \"x\");\n    return V;\n  });\n  const vnames = [...new Set(maps.flatMap((V) => [...V.values()]))].sort(), X = vnames.indexOf(\"x\");\n  const id = new Map(vnames.map((n, i) => [n, i]));\n  const codes = levels.map((L, j) => {\n    const V = maps[j], vt = (x, y) => id.get(V.get(vkey(x, y))), mid = new Map();\n    L.forEach((t, i) => {\n      const k = vkey(t[3] + t[5], t[4] + t[6]);\n      mid.set(k, mid.has(k) ? [mid.get(k)[0], i] : [i]);\n    });\n    return L.map((t, i) => {\n      const pair = mid.get(vkey(t[3] + t[5], t[4] + t[6])), o = L[pair[0] === i ? pair[1] ?? i : pair[0]];\n      const a0 = vt(t[1], t[2]), a1 = vt(o[1], o[2]), b0 = vt(t[3], t[4]), b1 = vt(t[5], t[6]);\n      if (a0 === X || a1 === X || b0 === X || b1 === X) return t[0] * 4096;\n      return t[0] * 4096 + min(a0, a1) * 512 + max(a0, a1) * 64 + min(b0, b1) * 8 + max(b0, b1);\n    });\n  });\n  const names = [...new Set(codes.flat())].sort((p, q) => p - q), cls = new Map(names.map((n, i) => [n, i]));\n  return codes.map((L) => L.map((n) => cls.get(n)));\n}\n\n// Packed for drawing: corners, colour class, parent, and the tile's middle as\n// its distance from the centre (pulled in along five petals) and how far the\n// triangle can reach past it.\nconst petal = (x, y, r) => (r > 1e-6 ? (5 * x ** 4 * y - 10 * x * x * y ** 3 + y ** 5) / r ** 5 : 0);\nfunction pack(levels, cls) {\n  return levels.map((L, j) => {\n    const n = L.length, P = { n, xy: new Float32Array(n * 6), cls: new Uint8Array(cls[j]), par: new Int32Array(n), rq: new Float32Array(n), near: new Float32Array(n), age: new Float32Array(n) };\n    L.forEach((t, i) => {\n      for (let q = 0; q \u003c 6; q++) P.xy[i * 6 + q] = t[q + 1];\n      P.par[i] = t[7];\n      // The middle of BC is the middle of the whole tile, so both halves of\n      // a tile split together.\n      const mx = (t[3] + t[5]) / 2, my = (t[4] + t[6]) / 2, r = hypot(mx, my);\n      P.rq[i] = r * (1 + PET * petal(mx, my, r));\n      P.near[i] = r - max(hypot(t[1] - mx, t[2] - my), hypot(t[3] - mx, t[4] - my));\n    });\n    return P;\n  });\n}\n\n// P2 is drawn half a level larger so the two tilings show tiles of about the\n// same area.\nconst SCALE = [1, sqrt(PHI)];\nconst FAM = [0, 1].map((f) => {\n  const levels = build(f, SCALE[f]);\n  return pack(levels, classify(f, levels));\n});\n\n// Hue offset, saturation and brightness of each colour class, in class order:\n// the sharp kind first (thin rhombs, kites), then the blunt kind (fat rhombs,\n// darts), each led by a fallback for tiles cut off at the edge of the patch,\n// which never reach the panel. Fat rhombs round a five-pointed star and the\n// darts of a star are gold.\nconst PAL = [\n  [\n    [0.6, 0.8, 0.75],\n    [0.5, 0.85, 0.85],\n    [0.42, 0.7, 0.95],\n    [0.63, 0.85, 0.85],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.15, 0.85, 1],\n    [0.88, 0.75, 0.9],\n    [0.76, 0.8, 0.75],\n    [0.98, 0.8, 0.9],\n    [0.1, 0.89, 1],\n    [0.33, 0.8, 0.8],\n  ],\n  [\n    [0.55, 0.8, 0.8],\n    [0.5, 0.85, 0.85],\n    [0.36, 0.75, 0.85],\n    [0.62, 0.85, 0.85],\n    [0.45, 0.75, 0.95],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.9, 0.75, 0.9],\n    [0.02, 0.8, 0.95],\n    [0.78, 0.8, 0.8],\n  ],\n];\nconst GLOW = [255, 226, 150];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Each LED's distance from the centre, pulled in along five petals: the\n// regrouping ring after a K1 tap opens along it.\nconst RR = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const x = (p % W) + 0.5 - CX, y = floor(p / W) + 0.5 - CY, r = hypot(x, y);\n  RR[p] = r * (1 + PET * petal(x, y, r));\n}\n\nexport function setup(params) {\n  params.s = { Z: 0, rot: 0, fam: 0, to: -1, rm: 0, hue: 0, e: EMIN, glow: 0.06, buf: new Float32Array(N * 3), col: new Float32Array(16 * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.e = cl(k[2], EMIN, 15);\n  P.glow = cl(k[3], 0, 1);\n  // Two levels of zoom, phi squared, bring level 2 to where level 0 was, a\n  // tenth of a turn round.\n  P.Z += d * cl(k[1], 0.2, 3) * 0.15;\n  if (P.Z >= 2) (P.Z -= 2), (P.rot = (P.rot + PI / 5) % (2 * PI));\n  if (P.to >= 0) {\n    P.rm += d * 45;\n    if (P.rm > 86) (P.fam = P.to), (P.to = -1);\n  } else if (input.btnPressed && input.btnPressed[0]) (P.to = 1 - P.fam), (P.rm = 0);\n}\n\n// One golden triangle onto the LEDs, colour (r, g, b) and line light gl.\n// Within LW of a tile edge an LED darkens into the 1-LED line between tiles;\n// mode 1 and 2 keep only the LEDs inside or outside the regrouping ring.\nconst LW = 0.72;\nfunction tri(P, xy, o, co, si, r, g, b, gl, mode) {\n  const ax = CX + co * xy[o] - si * xy[o + 1], ay = CY + si * xy[o] + co * xy[o + 1];\n  const bx = CX + co * xy[o + 2] - si * xy[o + 3], by = CY + si * xy[o + 2] + co * xy[o + 3];\n  const cx = CX + co * xy[o + 4] - si * xy[o + 5], cy = CY + si * xy[o + 4] + co * xy[o + 5];\n  const x0 = max(0, ceil(min(ax, bx, cx) - 0.5)), x1 = min(W - 1, floor(max(ax, bx, cx) - 0.5));\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(H - 1, floor(max(ay, by, cy) - 0.5));\n  if (x0 > x1 || y0 > y1) return;\n  const sg = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax) > 0 ? 1 : -1, buf = P.buf;\n  // Signed distances to AB, BC and CA as a*X + b*Y + c, positive inside.\n  const l1 = sg / hypot(bx - ax, by - ay), l2 = sg / hypot(cx - bx, cy - by), l3 = sg / hypot(ax - cx, ay - cy);\n  const a1 = (ay - by) * l1, b1 = (bx - ax) * l1, c1 = ((by - ay) * ax - (bx - ax) * ay) * l1;\n  const a2 = (by - cy) * l2, b2 = (cx - bx) * l2, c2 = ((cy - by) * bx - (cx - bx) * by) * l2;\n  const a3 = (cy - ay) * l3, b3 = (ax - cx) * l3, c3 = ((ay - cy) * cx - (ax - cx) * cy) * l3;\n  for (let y = y0; y \u003c= y1; y++) {\n    const Y = y + 0.5, X = x0 + 0.5;\n    let d1 = a1 * X + b1 * Y + c1, d2 = a2 * X + b2 * Y + c2, d3 = a3 * X + b3 * Y + c3;\n    for (let x = x0, p = y * W + x0; x \u003c= x1; x++, p++, d1 += a1, d2 += a2, d3 += a3) {\n      if (d1 \u003c -0.001 || d2 \u003c -0.001 || d3 \u003c -0.001 || (mode && (RR[p] \u003c P.rm) !== (mode === 1))) continue;\n      // The line's light keeps to its core, so a small tile behind the ring\n      // keeps its colour.\n      const w = cl((LW - min(d1, d3)) * 2.2, 0, 1), m = 1 - 0.93 * w, v = w * w * gl, q = p * 3;\n      buf[q] = r * m + (GLOW[0] - r * m) * v;\n      buf[q + 1] = g * m + (GLOW[1] - g * m) * v;\n      buf[q + 2] = b * m + (GLOW[2] - b * m) * v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const h = P.Z >= 1 ? 1 : 0, rho = (P.Z - h) * RHO, buf = P.buf, col = P.col, dim = 1 - 0.65 * P.glow;\n  buf.fill(0);\n  const jobs = P.to \u003c 0 ? [[P.fam, 0]] : [[P.fam, 2], [P.to, 1]];\n  for (const [fi, mode] of jobs) {\n    const S = P.e * PHI ** P.Z * SCALE[fi], co = cos(P.rot) * S, si = sin(P.rot) * S, lim = 73 / S;\n    const Lc = FAM[fi][h], Lf = FAM[fi][h + 1], pal = PAL[fi];\n    for (let c = 0; c \u003c pal.length; c++) hsv(P.hue + pal[c][0], pal[c][1], pal[c][2], col, c * 3);\n    // A tile splits once the ring has passed its middle. The ring runs RHO\n    // LEDs a level, well past the corners, so every tile on show has split\n    // and its light has died before the next level begins.\n    for (let i = 0; i \u003c Lc.n; i++) {\n      const a = (Lc.age[i] = rho - S * Lc.rq[i]);\n      if (a > 0 || Lc.near[i] > lim) continue;\n      const c = Lc.cls[i] * 3;\n      tri(P, Lc.xy, i * 6, co, si, col[c] * dim, col[c + 1] * dim, col[c + 2] * dim, 0, mode);\n    }\n    // Behind the ring the new edges flash, and the glass lights up and fades\n    // back down to what Glow leaves it.\n    for (let j = 0; j \u003c Lf.n; j++) {\n      const a = Lc.age[Lf.par[j]];\n      if (a \u003c= 0 || Lf.near[j] > lim) continue;\n      const c = Lf.cls[j] * 3, lit = dim + (1 - dim) * exp(-a / 10), fl = 0.3 * P.glow * exp(-a / 5);\n      const r = col[c] * lit, g = col[c + 1] * lit, b = col[c + 2] * lit;\n      tri(P, Lf.xy, j * 6, co, si, r + (255 - r) * fl, g + (255 - g) * fl, b + (255 - b) * fl, exp(-a / 2.5), mode);\n    }\n  }\n  // The regrouping ring itself, a line of light.\n  if (P.to >= 0)\n    for (let p = 0; p \u003c N; p++) {\n      const w = 1 - abs(RR[p] - P.rm) / 1.6;\n      if (w > 0) for (let q = 0; q \u003c 3; q++) buf[p * 3 + q] += (GLOW[q] - buf[p * 3 + q]) * w * 0.85;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-penrose","type":"code","name":"penrose","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Penrose\n// Family:  geometry\n// Idea:    A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after Roger Penrose's rhomb tiling (P3) and Raphael Robinson's golden triangles\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1\n//\n// Knob 1: Hue. Turns all the tile colours round the colour wheel together.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute.\n// Knob 3: Size. The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them.\n// Knob 4: Glow. How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring.\n// Buttons: K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.\n\n// The centre sits on an LED column, so the edges along the five-fold axis\n// draw as one dark LED rather than two grey ones.\nconst W = 64, H = 128, N = W * H, CX = 31.5, CY = 64;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, round, hypot, PI } = Math;\nconst PHI = (1 + sqrt(5)) / 2;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The smallest Size, how far the splitting ring runs in one level, the reach\n// of its five petals and how many levels lie between the seed and the tiles.\nconst EMIN = 7, RHO = 130, PET = 0.12, DEEP = 6;\n\n// Robinson's golden triangles. A triangle [kind, A, B, C, parent] is half a\n// tile: AB and AC are tile edges, BC runs through the middle of the tile.\n// Kind 0 is the sharp one (36-72-72), kind 1 the blunt one (108-36-36).\n// Rhombs (P3) and kites and darts (P2) split them by different rules.\nfunction split(fam, T, out, idx, R) {\n  const put = (k, ax, ay, bx, by, cx, cy) => {\n    if (reach(ax, ay, bx, by, cx, cy) \u003c R) out.push([k, ax, ay, bx, by, cx, cy, idx]);\n  };\n  const [k, ax, ay, bx, by, cx, cy] = T;\n  const g = (p, q) => p + (q - p) / PHI;\n  if (fam === 0) {\n    if (k === 0) {\n      const px = g(ax, bx), py = g(ay, by);\n      put(0, cx, cy, px, py, bx, by);\n      put(1, px, py, cx, cy, ax, ay);\n    } else {\n      const qx = g(bx, ax), qy = g(by, ay), rx = g(bx, cx), ry = g(by, cy);\n      put(1, rx, ry, cx, cy, ax, ay);\n      put(1, qx, qy, rx, ry, bx, by);\n      put(0, rx, ry, qx, qy, ax, ay);\n    }\n  } else if (k === 0) {\n    const qx = g(ax, bx), qy = g(ay, by), rx = g(bx, cx), ry = g(by, cy);\n    put(1, rx, ry, qx, qy, bx, by);\n    put(0, qx, qy, ax, ay, rx, ry);\n    put(0, cx, cy, ax, ay, rx, ry);\n  } else {\n    const px = g(cx, ax), py = g(cy, ay);\n    put(1, bx, by, px, py, ax, ay);\n    put(0, px, py, cx, cy, bx, by);\n  }\n}\n\n// How far the origin is from a triangle.\nfunction seg(ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay, t = cl(-(ax * dx + ay * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(ax + t * dx, ay + t * dy);\n}\nfunction reach(ax, ay, bx, by, cx, cy) {\n  const s1 = ax * by - ay * bx, s2 = bx * cy - by * cx, s3 = cx * ay - cy * ax;\n  if ((s1 >= 0 && s2 >= 0 && s3 >= 0) || (s1 \u003c= 0 && s2 \u003c= 0 && s3 \u003c= 0)) return 0;\n  return min(seg(ax, ay, bx, by), seg(bx, by, cx, cy), seg(cx, cy, ax, ay));\n}\n\n// One tiling, three levels deep. Level 0 has tile edge 1; levels 1 and 2 are\n// it split once and twice. Level 2 blown up by phi squared and turned 36\n// degrees is level 0 again, which is what lets the zoom run for ever. The\n// rhombs grow from a star of five fat rhombs, kites and darts from a sun of\n// five kites; both come back to themselves every second split. Each level\n// reaches just past the corners of the panel at the smallest Size.\nfunction build(fam, scale) {\n  const s = EMIN * scale, R = [75 / s + 3, 75 / s + 2, 75 / (s * PHI) + 1.5];\n  let T = [];\n  for (let i = 0; i \u003c 10; i++) {\n    const a = -PI / 2 + ((2 * PI) / 5) * (i >> 1), b = a + (i & 1 ? PI : -PI) / 5, L = PHI ** DEEP;\n    if (fam === 0) T.push([1, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L * PHI, sin(a) * L * PHI, 0]);\n    else T.push([0, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L, sin(a) * L, 0]);\n  }\n  const levels = [];\n  for (let d = 0; d \u003c DEEP + 2; d++) {\n    const out = [];\n    T.forEach((t, i) => split(fam, t, out, i, R[max(0, d - DEEP + 1)]));\n    T = out;\n    if (d >= DEEP - 1) levels.push(T);\n  }\n  return levels;\n}\n\n// Every corner where tiles meet is one of seven kinds; for kites and darts\n// Conway named them sun, star, ace, deuce, jack, queen and king. A tile's\n// colour class comes from its kind and the kinds of its four corners: ten\n// classes of rhomb, eight of kite and dart.\nconst vkey = (x, y) => round(x * 4096) * 1048576 + round(y * 4096);\n// The angle at A, B and C in tenths of a turn, sharp then blunt, per tiling.\nconst ANG = [\n  [1, 2, 2, 3, 1, 1],\n  [2, 1, 2, 1, 3, 1],\n];\nfunction classify(fam, levels) {\n  const an = ANG[fam];\n  const maps = levels.map((L) => {\n    const V = new Map();\n    const add = (x, y, slot) => {\n      const k = vkey(x, y);\n      let c = V.get(k);\n      if (!c) V.set(k, (c = new Array(16).fill(0)));\n      c[slot]++;\n    };\n    for (const [k, ax, ay, bx, by, cx, cy] of L) {\n      add(ax, ay, k * 8 + an[k * 3]);\n      add(bx, by, k * 8 + 4 + an[k * 3 + 1]);\n      add(cx, cy, k * 8 + 4 + an[k * 3 + 2]);\n    }\n    // A corner cut off at the edge of the patch does not close to 360 degrees.\n    for (const [k, c] of V) V.set(k, c.reduce((s, n, i) => s + n * (i & 3), 0) === 10 ? c.join(\" \") : \"x\");\n    return V;\n  });\n  const vnames = [...new Set(maps.flatMap((V) => [...V.values()]))].sort(), X = vnames.indexOf(\"x\");\n  const id = new Map(vnames.map((n, i) => [n, i]));\n  const codes = levels.map((L, j) => {\n    const V = maps[j], vt = (x, y) => id.get(V.get(vkey(x, y))), mid = new Map();\n    L.forEach((t, i) => {\n      const k = vkey(t[3] + t[5], t[4] + t[6]);\n      mid.set(k, mid.has(k) ? [mid.get(k)[0], i] : [i]);\n    });\n    return L.map((t, i) => {\n      const pair = mid.get(vkey(t[3] + t[5], t[4] + t[6])), o = L[pair[0] === i ? pair[1] ?? i : pair[0]];\n      const a0 = vt(t[1], t[2]), a1 = vt(o[1], o[2]), b0 = vt(t[3], t[4]), b1 = vt(t[5], t[6]);\n      if (a0 === X || a1 === X || b0 === X || b1 === X) return t[0] * 4096;\n      return t[0] * 4096 + min(a0, a1) * 512 + max(a0, a1) * 64 + min(b0, b1) * 8 + max(b0, b1);\n    });\n  });\n  const names = [...new Set(codes.flat())].sort((p, q) => p - q), cls = new Map(names.map((n, i) => [n, i]));\n  return codes.map((L) => L.map((n) => cls.get(n)));\n}\n\n// Packed for drawing: corners, colour class, parent, and the tile's middle as\n// its distance from the centre (pulled in along five petals) and how far the\n// triangle can reach past it.\nconst petal = (x, y, r) => (r > 1e-6 ? (5 * x ** 4 * y - 10 * x * x * y ** 3 + y ** 5) / r ** 5 : 0);\nfunction pack(levels, cls) {\n  return levels.map((L, j) => {\n    const n = L.length, P = { n, xy: new Float32Array(n * 6), cls: new Uint8Array(cls[j]), par: new Int32Array(n), rq: new Float32Array(n), near: new Float32Array(n), age: new Float32Array(n) };\n    L.forEach((t, i) => {\n      for (let q = 0; q \u003c 6; q++) P.xy[i * 6 + q] = t[q + 1];\n      P.par[i] = t[7];\n      // The middle of BC is the middle of the whole tile, so both halves of\n      // a tile split together.\n      const mx = (t[3] + t[5]) / 2, my = (t[4] + t[6]) / 2, r = hypot(mx, my);\n      P.rq[i] = r * (1 + PET * petal(mx, my, r));\n      P.near[i] = r - max(hypot(t[1] - mx, t[2] - my), hypot(t[3] - mx, t[4] - my));\n    });\n    return P;\n  });\n}\n\n// P2 is drawn half a level larger so the two tilings show tiles of about the\n// same area.\nconst SCALE = [1, sqrt(PHI)];\nconst FAM = [0, 1].map((f) => {\n  const levels = build(f, SCALE[f]);\n  return pack(levels, classify(f, levels));\n});\n\n// Hue offset, saturation and brightness of each colour class, in class order:\n// the sharp kind first (thin rhombs, kites), then the blunt kind (fat rhombs,\n// darts), each led by a fallback for tiles cut off at the edge of the patch,\n// which never reach the panel. Fat rhombs round a five-pointed star and the\n// darts of a star are gold.\nconst PAL = [\n  [\n    [0.6, 0.8, 0.75],\n    [0.5, 0.85, 0.85],\n    [0.42, 0.7, 0.95],\n    [0.63, 0.85, 0.85],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.15, 0.85, 1],\n    [0.88, 0.75, 0.9],\n    [0.76, 0.8, 0.75],\n    [0.98, 0.8, 0.9],\n    [0.1, 0.89, 1],\n    [0.33, 0.8, 0.8],\n  ],\n  [\n    [0.55, 0.8, 0.8],\n    [0.5, 0.85, 0.85],\n    [0.36, 0.75, 0.85],\n    [0.62, 0.85, 0.85],\n    [0.45, 0.75, 0.95],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.9, 0.75, 0.9],\n    [0.02, 0.8, 0.95],\n    [0.78, 0.8, 0.8],\n  ],\n];\nconst GLOW = [255, 226, 150];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Each LED's distance from the centre, pulled in along five petals: the\n// regrouping ring after a K1 tap opens along it.\nconst RR = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const x = (p % W) + 0.5 - CX, y = floor(p / W) + 0.5 - CY, r = hypot(x, y);\n  RR[p] = r * (1 + PET * petal(x, y, r));\n}\n\nexport function setup(params) {\n  params.s = { Z: 0, rot: 0, fam: 0, to: -1, rm: 0, hue: 0, e: EMIN, glow: 0.06, buf: new Float32Array(N * 3), col: new Float32Array(16 * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.e = cl(k[2], EMIN, 15);\n  P.glow = cl(k[3], 0, 1);\n  // Two levels of zoom, phi squared, bring level 2 to where level 0 was, a\n  // tenth of a turn round.\n  P.Z += d * cl(k[1], 0.2, 3) * 0.15;\n  if (P.Z >= 2) (P.Z -= 2), (P.rot = (P.rot + PI / 5) % (2 * PI));\n  if (P.to >= 0) {\n    P.rm += d * 45;\n    if (P.rm > 86) (P.fam = P.to), (P.to = -1);\n  } else if (input.btnPressed && input.btnPressed[0]) (P.to = 1 - P.fam), (P.rm = 0);\n}\n\n// One golden triangle onto the LEDs, colour (r, g, b) and line light gl.\n// Within LW of a tile edge an LED darkens into the 1-LED line between tiles;\n// mode 1 and 2 keep only the LEDs inside or outside the regrouping ring.\nconst LW = 0.72;\nfunction tri(P, xy, o, co, si, r, g, b, gl, mode) {\n  const ax = CX + co * xy[o] - si * xy[o + 1], ay = CY + si * xy[o] + co * xy[o + 1];\n  const bx = CX + co * xy[o + 2] - si * xy[o + 3], by = CY + si * xy[o + 2] + co * xy[o + 3];\n  const cx = CX + co * xy[o + 4] - si * xy[o + 5], cy = CY + si * xy[o + 4] + co * xy[o + 5];\n  const x0 = max(0, ceil(min(ax, bx, cx) - 0.5)), x1 = min(W - 1, floor(max(ax, bx, cx) - 0.5));\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(H - 1, floor(max(ay, by, cy) - 0.5));\n  if (x0 > x1 || y0 > y1) return;\n  const sg = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax) > 0 ? 1 : -1, buf = P.buf;\n  // Signed distances to AB, BC and CA as a*X + b*Y + c, positive inside.\n  const l1 = sg / hypot(bx - ax, by - ay), l2 = sg / hypot(cx - bx, cy - by), l3 = sg / hypot(ax - cx, ay - cy);\n  const a1 = (ay - by) * l1, b1 = (bx - ax) * l1, c1 = ((by - ay) * ax - (bx - ax) * ay) * l1;\n  const a2 = (by - cy) * l2, b2 = (cx - bx) * l2, c2 = ((cy - by) * bx - (cx - bx) * by) * l2;\n  const a3 = (cy - ay) * l3, b3 = (ax - cx) * l3, c3 = ((ay - cy) * cx - (ax - cx) * cy) * l3;\n  for (let y = y0; y \u003c= y1; y++) {\n    const Y = y + 0.5, X = x0 + 0.5;\n    let d1 = a1 * X + b1 * Y + c1, d2 = a2 * X + b2 * Y + c2, d3 = a3 * X + b3 * Y + c3;\n    for (let x = x0, p = y * W + x0; x \u003c= x1; x++, p++, d1 += a1, d2 += a2, d3 += a3) {\n      if (d1 \u003c -0.001 || d2 \u003c -0.001 || d3 \u003c -0.001 || (mode && (RR[p] \u003c P.rm) !== (mode === 1))) continue;\n      // The line's light keeps to its core, so a small tile behind the ring\n      // keeps its colour.\n      const w = cl((LW - min(d1, d3)) * 2.2, 0, 1), m = 1 - 0.93 * w, v = w * w * gl, q = p * 3;\n      buf[q] = r * m + (GLOW[0] - r * m) * v;\n      buf[q + 1] = g * m + (GLOW[1] - g * m) * v;\n      buf[q + 2] = b * m + (GLOW[2] - b * m) * v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const h = P.Z >= 1 ? 1 : 0, rho = (P.Z - h) * RHO, buf = P.buf, col = P.col, dim = 1 - 0.65 * P.glow;\n  buf.fill(0);\n  const jobs = P.to \u003c 0 ? [[P.fam, 0]] : [[P.fam, 2], [P.to, 1]];\n  for (const [fi, mode] of jobs) {\n    const S = P.e * PHI ** P.Z * SCALE[fi], co = cos(P.rot) * S, si = sin(P.rot) * S, lim = 73 / S;\n    const Lc = FAM[fi][h], Lf = FAM[fi][h + 1], pal = PAL[fi];\n    for (let c = 0; c \u003c pal.length; c++) hsv(P.hue + pal[c][0], pal[c][1], pal[c][2], col, c * 3);\n    // A tile splits once the ring has passed its middle. The ring runs RHO\n    // LEDs a level, well past the corners, so every tile on show has split\n    // and its light has died before the next level begins.\n    for (let i = 0; i \u003c Lc.n; i++) {\n      const a = (Lc.age[i] = rho - S * Lc.rq[i]);\n      if (a > 0 || Lc.near[i] > lim) continue;\n      const c = Lc.cls[i] * 3;\n      tri(P, Lc.xy, i * 6, co, si, col[c] * dim, col[c + 1] * dim, col[c + 2] * dim, 0, mode);\n    }\n    // Behind the ring the new edges flash, and the glass lights up and fades\n    // back down to what Glow leaves it.\n    for (let j = 0; j \u003c Lf.n; j++) {\n      const a = Lc.age[Lf.par[j]];\n      if (a \u003c= 0 || Lf.near[j] > lim) continue;\n      const c = Lf.cls[j] * 3, lit = dim + (1 - dim) * exp(-a / 10), fl = 0.3 * P.glow * exp(-a / 5);\n      const r = col[c] * lit, g = col[c + 1] * lit, b = col[c + 2] * lit;\n      tri(P, Lf.xy, j * 6, co, si, r + (255 - r) * fl, g + (255 - g) * fl, b + (255 - b) * fl, exp(-a / 2.5), mode);\n    }\n  }\n  // The regrouping ring itself, a line of light.\n  if (P.to >= 0)\n    for (let p = 0; p \u003c N; p++) {\n      const w = 1 - abs(RR[p] - P.rm) / 1.6;\n      if (w > 0) for (let q = 0; q \u003c 3; q++) buf[p * 3 + q] += (GLOW[q] - buf[p * 3 + q]) * w * 0.85;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns all the tile colours round the colour wheel together."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute."},{"name":"Size","min":7,"max":15,"about":"The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them."},{"name":"Glow","min":0,"max":1,"about":"How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring."}],"start":[0,2,7,0.06],"measures":{"motion":1.7979,"detail":0.2641,"edges":0.8556,"complexity":1.1732,"coverage":0.804,"colour":0.583,"drift":0.0983},"knobResponse":[0.4132,0.358,0.3898,0.2306]},{"slug":"penrose-room","title":"Penrose Room","family":"physics","round":33,"note":"거울로 된 펜로즈의 방에서 빛 한 점이 떠돌고, 수백 개의 광선이 반사하며 복도와 위아래 반타원을 밝히는 동안 양옆 방은 캄캄해요. 빛이 반타원을 지나 옆방으로 건너가면 밝은 곳과 어두운 곳이 뒤바뀌어요. K3 은 복도 벽을 초점에서 4 LED 까지 옮겨 어둠에 빛이 새게 하고, K1 을 누르면 빛이 바로 건너가요.","idea":"A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.","buttons":"K1 tap sends the light across now, from the corridor into a side chamber or back.","code":"// ===== Patternflow pattern =====\n// Title:   Penrose Room\n// Family:  physics\n// Idea:    A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Penrose unilluminable room (Roger Penrose, 1958), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1\n//\n// Knob 1: Hue. The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive.\n// Knob 2: Speed. How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower.\n// Knob 3: Offset. How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow.\n// Knob 4: Bounces. How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue.\n// Buttons: K1 tap sends the light across now, from the corridor into a side chamber or back.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The room, in LEDs. Two half-ellipses with semi-axes 31.5 and 26 put their\n// flat sides at rows 26.5 and 101.5, and their arcs touch rows 0 and 127, so\n// the room is the whole panel. The foci sit on the flat sides at 17.78 either\n// side of the middle column; the outer walls are the ellipses' own tangents\n// at the ends of the major axis, columns 0 and 63.\nconst A = 31.5, B = 26, C = sqrt(A * A - B * B), CX = 32;\nconst YT = 0.5 + B, YB = 127.5 - B, YM = 64;\nconst IA2 = 1 / (A * A), IB2 = 1 / (B * B), EPS = 1e-6;\n// Each reflection keeps 60% of the light. The glow is LEVEL times the light\n// over the mean of the lit LEDs, raised to GAMMA: the mean shows at 128 of 255\n// and the glow round the lamp comes close to full. At 92 the swap moved the\n// picture 0.270 on the study's drift scale; at 128 it moves it 0.365.\nconst REFL = 0.6, LEVEL = 0.50, GAMMA = 0.7;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, off: 0, nb: 14, w: C,\n    buf: new Float32Array(N), tmp: new Float32Array(N), hz: new Float32Array(N), kb: new Float32Array(N), kz: new Float32Array(N), wall: new Float32Array(N), wallW: NaN,\n    lu: 0, ly: YM, region: 0, tau: 0, stay: 3.2, mode: 0,\n    tt: 0, from: 0, to: 0, expo: 0, bz: new Float64Array(8), col: new Float32Array(51),\n  };\n}\n\n// Where the light may stand: the corridor between the walls, or one side\n// chamber, a little clear of every wall.\nfunction clampTo(S, region, u) {\n  const w = S.w;\n  if (region === 0) return cl(u, -(w - 1.2), w - 1.2);\n  return region * cl(region * u, w + 1.2, A - 1.2);\n}\n\n// A slow wander that starts from the middle of the place, so the light\n// arrives at the middle and sets off from there without a jump.\nfunction wander(S) {\n  const w = S.w, t = S.tau;\n  const y = YM + 30 * sin(0.4 * t);\n  if (S.region === 0) return [(w - 3.5) * sin(0.55 * t), y];\n  const uc = (S.region * (w + A)) / 2, au = max(0, (A - w) / 2 - 2.5);\n  return [uc + au * sin(0.7 * t), y];\n}\n\n// Crossing over: a cubic curve that leaves straight up (or down) through the\n// flat side nearer the light, arcs through the half-ellipse and drops\n// straight into the middle of the other place. From the corridor it leaves\n// between the foci and from a chamber outside them, as a ray would.\nfunction startTransit(S) {\n  const u0 = S.lu, y0 = S.ly, w = S.w;\n  S.from = S.region;\n  S.to = S.region === 0 ? (u0 > 0.5 ? 1 : u0 \u003c -0.5 ? -1 : Math.random() \u003c 0.5 ? -1 : 1) : 0;\n  const u3 = S.to === 0 ? 0 : (S.to * (w + A)) / 2, cy = y0 \u003c= YM ? YT - 32 : YB + 32;\n  S.bz.set([u0, y0, u0, cy, u3, cy, u3, YM]);\n  S.mode = 1;\n  S.tt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.off = cl(k[2] || 0, -4, 4);\n  S.w = C + S.off;\n  S.nb = Math.round(40 * Math.pow(cl(k[3], 0, 1), 0.373));\n  const sp = S.speed / 2;\n\n  if (input.btnPressed && input.btnPressed[0] && S.mode === 0) startTransit(S);\n  if (S.mode === 0) {\n    S.tau += d * sp;\n    S.stay -= d * sp;\n    const p = wander(S);\n    S.lu = clampTo(S, S.region, p[0]);\n    S.ly = p[1];\n    if (S.stay \u003c= 0) startTransit(S);\n  } else {\n    S.tt = min(1, S.tt + (d * sp) / 1.8);\n    const e = S.tt * S.tt * (3 - 2 * S.tt), f = 1 - e, b = S.bz;\n    const c0 = f * f * f, c1 = 3 * f * f * e, c2 = 3 * f * e * e, c3 = e * e * e;\n    let u = c0 * b[0] + c1 * b[2] + c2 * b[4] + c3 * b[6];\n    const y = c0 * b[1] + c1 * b[3] + c2 * b[5] + c3 * b[7];\n    // Between the flat sides the light is in a place, never in a wall.\n    // In a half-ellipse it keeps clear of the arc: with the walls 4 LEDs out,\n    // the curve's top would just touch it.\n    let yy = y;\n    if (y > YT && y \u003c YB) u = clampTo(S, S.tt \u003c 0.5 ? S.from : S.to, u);\n    else {\n      const yc = y \u003c= YT ? YT : YB, v = y - yc, E = u * u * IA2 + v * v * IB2;\n      if (E > 0.85) {\n        const q = sqrt(0.85 / E);\n        u *= q;\n        yy = yc + v * q;\n      }\n    }\n    S.lu = u;\n    S.ly = yy;\n    if (S.tt >= 1) {\n      S.mode = 0;\n      S.region = S.to;\n      S.tau = 0;\n      S.stay = S.region === 0 ? 5 + 3 * Math.random() : 7 + 3 * Math.random();\n    }\n  }\n\n  // The light fades over about a sixth of a second, so a place goes dark\n  // soon after the light has left it.\n  const buf = S.buf, kb = S.kb, fade = exp(-d / 0.16);\n  for (let i = 0; i \u003c N; i++) {\n    buf[i] *= fade;\n    kb[i] *= fade;\n  }\n  trace(S, d * 30);\n  // Exposure follows the mean of the lit LEDs over about half a second, the\n  // way an eye adjusts, so a chamber, where every ray soon hits a wall and\n  // loses 40% of its light, glows about as bright as the corridor.\n  let sum = 0, n = 0;\n  for (let i = 0; i \u003c N; i++)\n    if (buf[i] > 0.5) {\n      sum += buf[i];\n      n++;\n    }\n  const m = n ? sum / n : 1;\n  S.expo = S.expo > 0 ? S.expo + (m - S.expo) * (1 - exp(-d / 0.5)) : m;\n}\n\n// Rays leave the light evenly spaced round the circle, the whole fan turned\n// by a random angle each frame, and bounce off the mirrors; each reflection\n// keeps 60% of the light, so the first few reflections draw the shapes and\n// the later ones fill in. A ray's path is added to the buffer one LED step at\n// a time, so a pixel gathers light in proportion to the rays crossing it.\nfunction trace(S, gain) {\n  const nb = S.nb, R = cl(floor(4200 / (nb + 1)), 120, 300), w = S.w, buf = S.buf, kb = S.kb;\n  const phase = Math.random(), w0 = (gain * 0.5 * 300) / R;\n  for (let r = 0; r \u003c R; r++) {\n    const th = (2 * PI * (r + phase)) / R;\n    let u = S.lu, y = S.ly, dx = cos(th), dy = sin(th), wt = w0;\n    for (let k = 0; k \u003c= nb; k++) {\n      let best = 1e9, kind = 0, nx = 0, ny = 0;\n      // The two arcs: an ellipse counts as a mirror only on its own side of\n      // its flat side, which is open to the room between them.\n      for (let e = 0; e \u003c 2; e++) {\n        const yc = e ? YB : YT, v = y - yc;\n        const qa = dx * dx * IA2 + dy * dy * IB2, qb = 2 * (u * dx * IA2 + v * dy * IB2), qc = u * u * IA2 + v * v * IB2 - 1;\n        const disc = qb * qb - 4 * qa * qc;\n        if (disc \u003c= 0) continue;\n        const sq = sqrt(disc);\n        for (let j = 0; j \u003c 2; j++) {\n          const t = (-qb + (j ? sq : -sq)) / (2 * qa);\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (e ? hy >= YB : hy \u003c= YT) {\n            best = t;\n            kind = 1;\n            nx = (u + dx * t) * IA2;\n            ny = (hy - yc) * IB2;\n            break;\n          }\n        }\n      }\n      // The outer walls and the two thin corridor walls, mirrors on both sides.\n      if (dx !== 0)\n        for (let j = 0; j \u003c 4; j++) {\n          const X = j === 0 ? A : j === 1 ? -A : j === 2 ? w : -w, t = (X - u) / dx;\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (hy >= YT && hy \u003c= YB) {\n            best = t;\n            kind = 2;\n          }\n        }\n      if (kind === 0) break;\n      const u1 = u + dx * best, y1 = y + dy * best;\n      const n = floor(best) + 1, sx = (dx * best) / n, sy = (dy * best) / n, ww = (wt * best) / n;\n      let px = CX + u + sx * 0.5, py = y + sy * 0.5;\n      for (let i = 0; i \u003c n; i++) {\n        const ix = px | 0, iy = py | 0;\n        if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H) {\n          buf[iy * W + ix] += ww;\n          kb[iy * W + ix] += ww * k;\n        }\n        px += sx;\n        py += sy;\n      }\n      u = u1;\n      y = y1;\n      if (kind === 2) dx = -dx;\n      else {\n        const q = (2 * (dx * nx + dy * ny)) / (nx * nx + ny * ny);\n        dx -= q * nx;\n        dy -= q * ny;\n      }\n      wt *= REFL;\n    }\n  }\n}\n\n// The walls as one-LED lines, anti-aliased by distance: the arcs, the outer\n// walls and the two corridor walls from focus to focus (or wherever Offset\n// has moved them).\nfunction buildWalls(S) {\n  const wall = S.wall, w = S.w;\n  for (let py = 0, i = 0; py \u003c H; py++)\n    for (let px = 0; px \u003c W; px++, i++) {\n      const u = px + 0.5 - CX, y = py + 0.5, au = abs(u);\n      let dmin = 9;\n      if (y \u003c= YT || y >= YB) {\n        const v = y - (y \u003c= YT ? YT : YB);\n        const E = u * u * IA2 + v * v * IB2, g = 2 * sqrt(u * u * IA2 * IA2 + v * v * IB2 * IB2);\n        dmin = abs(E - 1) / max(g, 1e-6);\n        dmin = min(dmin, sqrt((au - w) * (au - w) + v * v));\n      } else dmin = min(abs(au - A), abs(au - w));\n      wall[i] = cl(1 - dmin, 0, 1);\n    }\n  S.wallW = w;\n}\n\n// A soft blur, 1 4 6 4 1 across and then down, about an LED wide, so the\n// rays glow instead of drawing hard lines and the edge of the light steps\n// down by under 40 levels a LED.\nfunction blur(src, out, tmp) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++)\n      tmp[o + x] = (src[o + max(0, x - 2)] + 4 * src[o + max(0, x - 1)] + 6 * src[o + x] + 4 * src[o + min(W - 1, x + 1)] + src[o + min(W - 1, x + 2)]) / 16;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o0 = max(0, y - 2) * W, o1 = max(0, y - 1) * W, o2 = y * W, o3 = min(H - 1, y + 1) * W, o4 = min(H - 1, y + 2) * W;\n    for (let x = 0; x \u003c W; x++) out[o2 + x] = (tmp[o0 + x] + 4 * tmp[o1 + x] + 6 * tmp[o2 + x] + 4 * tmp[o3 + x] + tmp[o4 + x]) / 16;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.wallW !== S.w) buildWalls(S);\n  const hz = S.hz, kz = S.kz, wall = S.wall, col = S.col;\n  blur(S.buf, hz, S.tmp);\n  blur(S.kb, kz, S.tmp);\n  // Colour by how many mirrors the light has met: the direct light is a pale\n  // tint of the hue, and each reflection turns it a little further round the\n  // wheel and deeper, a sixth of a turn by the fifth.\n  // Round orange, yellow and yellow-green, 0.03 to 0.29 on the wheel, the\n  // colour goes paler so the dimmer far light reads as butter, not olive.\n  const h = S.hue + 0.5;\n  for (let j = 0; j \u003c 16; j++) {\n    const f = 1 - exp(-j / 3), hj = h + 0.17 * f, hf = hj - floor(hj);\n    const mud = cl((hf - 0.01) / 0.04, 0, 1) * cl((0.33 - hf) / 0.06, 0, 1);\n    hsv(hj, (0.18 + 0.62 * f) * (1 - 0.6 * mud), 1, col, j * 3);\n  }\n  hsv(h + 0.27, 0.45, 34, col, 48);\n  const lx = CX + S.lu, ly = S.ly, ie = 1 / max(1, S.expo);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const L = hz[i], v = min(1, LEVEL * Math.pow(L * ie, GAMMA));\n      // The mean number of reflections here, read between two palette steps.\n      const kb = L > 1e-4 ? min(14.99, kz[i] / L) : 0, j = floor(kb), f = kb - j, o = j * 3;\n      const ddx = x + 0.5 - lx, ddy = y + 0.5 - ly, core = 255 * exp(-(ddx * ddx + ddy * ddy) / 1.1);\n      // A wall is a dim line in the dark and a darker line across the glow,\n      // a mirror seen edge on, so it never stands 40 levels off its sides.\n      const wv = wall[i], g = 255 * v * (1 - 0.5 * wv);\n      const r = g * (col[o] + (col[o + 3] - col[o]) * f) + wv * col[48] + core;\n      const gg = g * (col[o + 1] + (col[o + 4] - col[o + 1]) * f) + wv * col[49] + core;\n      const b = g * (col[o + 2] + (col[o + 5] - col[o + 2]) * f) + wv * col[50] + core;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","layer":{"id":"layer-penrose-room","type":"code","name":"penrose-room","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Penrose Room\n// Family:  physics\n// Idea:    A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Penrose unilluminable room (Roger Penrose, 1958), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1\n//\n// Knob 1: Hue. The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive.\n// Knob 2: Speed. How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower.\n// Knob 3: Offset. How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow.\n// Knob 4: Bounces. How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue.\n// Buttons: K1 tap sends the light across now, from the corridor into a side chamber or back.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The room, in LEDs. Two half-ellipses with semi-axes 31.5 and 26 put their\n// flat sides at rows 26.5 and 101.5, and their arcs touch rows 0 and 127, so\n// the room is the whole panel. The foci sit on the flat sides at 17.78 either\n// side of the middle column; the outer walls are the ellipses' own tangents\n// at the ends of the major axis, columns 0 and 63.\nconst A = 31.5, B = 26, C = sqrt(A * A - B * B), CX = 32;\nconst YT = 0.5 + B, YB = 127.5 - B, YM = 64;\nconst IA2 = 1 / (A * A), IB2 = 1 / (B * B), EPS = 1e-6;\n// Each reflection keeps 60% of the light. The glow is LEVEL times the light\n// over the mean of the lit LEDs, raised to GAMMA: the mean shows at 128 of 255\n// and the glow round the lamp comes close to full. At 92 the swap moved the\n// picture 0.270 on the study's drift scale; at 128 it moves it 0.365.\nconst REFL = 0.6, LEVEL = 0.50, GAMMA = 0.7;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, off: 0, nb: 14, w: C,\n    buf: new Float32Array(N), tmp: new Float32Array(N), hz: new Float32Array(N), kb: new Float32Array(N), kz: new Float32Array(N), wall: new Float32Array(N), wallW: NaN,\n    lu: 0, ly: YM, region: 0, tau: 0, stay: 3.2, mode: 0,\n    tt: 0, from: 0, to: 0, expo: 0, bz: new Float64Array(8), col: new Float32Array(51),\n  };\n}\n\n// Where the light may stand: the corridor between the walls, or one side\n// chamber, a little clear of every wall.\nfunction clampTo(S, region, u) {\n  const w = S.w;\n  if (region === 0) return cl(u, -(w - 1.2), w - 1.2);\n  return region * cl(region * u, w + 1.2, A - 1.2);\n}\n\n// A slow wander that starts from the middle of the place, so the light\n// arrives at the middle and sets off from there without a jump.\nfunction wander(S) {\n  const w = S.w, t = S.tau;\n  const y = YM + 30 * sin(0.4 * t);\n  if (S.region === 0) return [(w - 3.5) * sin(0.55 * t), y];\n  const uc = (S.region * (w + A)) / 2, au = max(0, (A - w) / 2 - 2.5);\n  return [uc + au * sin(0.7 * t), y];\n}\n\n// Crossing over: a cubic curve that leaves straight up (or down) through the\n// flat side nearer the light, arcs through the half-ellipse and drops\n// straight into the middle of the other place. From the corridor it leaves\n// between the foci and from a chamber outside them, as a ray would.\nfunction startTransit(S) {\n  const u0 = S.lu, y0 = S.ly, w = S.w;\n  S.from = S.region;\n  S.to = S.region === 0 ? (u0 > 0.5 ? 1 : u0 \u003c -0.5 ? -1 : Math.random() \u003c 0.5 ? -1 : 1) : 0;\n  const u3 = S.to === 0 ? 0 : (S.to * (w + A)) / 2, cy = y0 \u003c= YM ? YT - 32 : YB + 32;\n  S.bz.set([u0, y0, u0, cy, u3, cy, u3, YM]);\n  S.mode = 1;\n  S.tt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.off = cl(k[2] || 0, -4, 4);\n  S.w = C + S.off;\n  S.nb = Math.round(40 * Math.pow(cl(k[3], 0, 1), 0.373));\n  const sp = S.speed / 2;\n\n  if (input.btnPressed && input.btnPressed[0] && S.mode === 0) startTransit(S);\n  if (S.mode === 0) {\n    S.tau += d * sp;\n    S.stay -= d * sp;\n    const p = wander(S);\n    S.lu = clampTo(S, S.region, p[0]);\n    S.ly = p[1];\n    if (S.stay \u003c= 0) startTransit(S);\n  } else {\n    S.tt = min(1, S.tt + (d * sp) / 1.8);\n    const e = S.tt * S.tt * (3 - 2 * S.tt), f = 1 - e, b = S.bz;\n    const c0 = f * f * f, c1 = 3 * f * f * e, c2 = 3 * f * e * e, c3 = e * e * e;\n    let u = c0 * b[0] + c1 * b[2] + c2 * b[4] + c3 * b[6];\n    const y = c0 * b[1] + c1 * b[3] + c2 * b[5] + c3 * b[7];\n    // Between the flat sides the light is in a place, never in a wall.\n    // In a half-ellipse it keeps clear of the arc: with the walls 4 LEDs out,\n    // the curve's top would just touch it.\n    let yy = y;\n    if (y > YT && y \u003c YB) u = clampTo(S, S.tt \u003c 0.5 ? S.from : S.to, u);\n    else {\n      const yc = y \u003c= YT ? YT : YB, v = y - yc, E = u * u * IA2 + v * v * IB2;\n      if (E > 0.85) {\n        const q = sqrt(0.85 / E);\n        u *= q;\n        yy = yc + v * q;\n      }\n    }\n    S.lu = u;\n    S.ly = yy;\n    if (S.tt >= 1) {\n      S.mode = 0;\n      S.region = S.to;\n      S.tau = 0;\n      S.stay = S.region === 0 ? 5 + 3 * Math.random() : 7 + 3 * Math.random();\n    }\n  }\n\n  // The light fades over about a sixth of a second, so a place goes dark\n  // soon after the light has left it.\n  const buf = S.buf, kb = S.kb, fade = exp(-d / 0.16);\n  for (let i = 0; i \u003c N; i++) {\n    buf[i] *= fade;\n    kb[i] *= fade;\n  }\n  trace(S, d * 30);\n  // Exposure follows the mean of the lit LEDs over about half a second, the\n  // way an eye adjusts, so a chamber, where every ray soon hits a wall and\n  // loses 40% of its light, glows about as bright as the corridor.\n  let sum = 0, n = 0;\n  for (let i = 0; i \u003c N; i++)\n    if (buf[i] > 0.5) {\n      sum += buf[i];\n      n++;\n    }\n  const m = n ? sum / n : 1;\n  S.expo = S.expo > 0 ? S.expo + (m - S.expo) * (1 - exp(-d / 0.5)) : m;\n}\n\n// Rays leave the light evenly spaced round the circle, the whole fan turned\n// by a random angle each frame, and bounce off the mirrors; each reflection\n// keeps 60% of the light, so the first few reflections draw the shapes and\n// the later ones fill in. A ray's path is added to the buffer one LED step at\n// a time, so a pixel gathers light in proportion to the rays crossing it.\nfunction trace(S, gain) {\n  const nb = S.nb, R = cl(floor(4200 / (nb + 1)), 120, 300), w = S.w, buf = S.buf, kb = S.kb;\n  const phase = Math.random(), w0 = (gain * 0.5 * 300) / R;\n  for (let r = 0; r \u003c R; r++) {\n    const th = (2 * PI * (r + phase)) / R;\n    let u = S.lu, y = S.ly, dx = cos(th), dy = sin(th), wt = w0;\n    for (let k = 0; k \u003c= nb; k++) {\n      let best = 1e9, kind = 0, nx = 0, ny = 0;\n      // The two arcs: an ellipse counts as a mirror only on its own side of\n      // its flat side, which is open to the room between them.\n      for (let e = 0; e \u003c 2; e++) {\n        const yc = e ? YB : YT, v = y - yc;\n        const qa = dx * dx * IA2 + dy * dy * IB2, qb = 2 * (u * dx * IA2 + v * dy * IB2), qc = u * u * IA2 + v * v * IB2 - 1;\n        const disc = qb * qb - 4 * qa * qc;\n        if (disc \u003c= 0) continue;\n        const sq = sqrt(disc);\n        for (let j = 0; j \u003c 2; j++) {\n          const t = (-qb + (j ? sq : -sq)) / (2 * qa);\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (e ? hy >= YB : hy \u003c= YT) {\n            best = t;\n            kind = 1;\n            nx = (u + dx * t) * IA2;\n            ny = (hy - yc) * IB2;\n            break;\n          }\n        }\n      }\n      // The outer walls and the two thin corridor walls, mirrors on both sides.\n      if (dx !== 0)\n        for (let j = 0; j \u003c 4; j++) {\n          const X = j === 0 ? A : j === 1 ? -A : j === 2 ? w : -w, t = (X - u) / dx;\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (hy >= YT && hy \u003c= YB) {\n            best = t;\n            kind = 2;\n          }\n        }\n      if (kind === 0) break;\n      const u1 = u + dx * best, y1 = y + dy * best;\n      const n = floor(best) + 1, sx = (dx * best) / n, sy = (dy * best) / n, ww = (wt * best) / n;\n      let px = CX + u + sx * 0.5, py = y + sy * 0.5;\n      for (let i = 0; i \u003c n; i++) {\n        const ix = px | 0, iy = py | 0;\n        if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H) {\n          buf[iy * W + ix] += ww;\n          kb[iy * W + ix] += ww * k;\n        }\n        px += sx;\n        py += sy;\n      }\n      u = u1;\n      y = y1;\n      if (kind === 2) dx = -dx;\n      else {\n        const q = (2 * (dx * nx + dy * ny)) / (nx * nx + ny * ny);\n        dx -= q * nx;\n        dy -= q * ny;\n      }\n      wt *= REFL;\n    }\n  }\n}\n\n// The walls as one-LED lines, anti-aliased by distance: the arcs, the outer\n// walls and the two corridor walls from focus to focus (or wherever Offset\n// has moved them).\nfunction buildWalls(S) {\n  const wall = S.wall, w = S.w;\n  for (let py = 0, i = 0; py \u003c H; py++)\n    for (let px = 0; px \u003c W; px++, i++) {\n      const u = px + 0.5 - CX, y = py + 0.5, au = abs(u);\n      let dmin = 9;\n      if (y \u003c= YT || y >= YB) {\n        const v = y - (y \u003c= YT ? YT : YB);\n        const E = u * u * IA2 + v * v * IB2, g = 2 * sqrt(u * u * IA2 * IA2 + v * v * IB2 * IB2);\n        dmin = abs(E - 1) / max(g, 1e-6);\n        dmin = min(dmin, sqrt((au - w) * (au - w) + v * v));\n      } else dmin = min(abs(au - A), abs(au - w));\n      wall[i] = cl(1 - dmin, 0, 1);\n    }\n  S.wallW = w;\n}\n\n// A soft blur, 1 4 6 4 1 across and then down, about an LED wide, so the\n// rays glow instead of drawing hard lines and the edge of the light steps\n// down by under 40 levels a LED.\nfunction blur(src, out, tmp) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++)\n      tmp[o + x] = (src[o + max(0, x - 2)] + 4 * src[o + max(0, x - 1)] + 6 * src[o + x] + 4 * src[o + min(W - 1, x + 1)] + src[o + min(W - 1, x + 2)]) / 16;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o0 = max(0, y - 2) * W, o1 = max(0, y - 1) * W, o2 = y * W, o3 = min(H - 1, y + 1) * W, o4 = min(H - 1, y + 2) * W;\n    for (let x = 0; x \u003c W; x++) out[o2 + x] = (tmp[o0 + x] + 4 * tmp[o1 + x] + 6 * tmp[o2 + x] + 4 * tmp[o3 + x] + tmp[o4 + x]) / 16;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.wallW !== S.w) buildWalls(S);\n  const hz = S.hz, kz = S.kz, wall = S.wall, col = S.col;\n  blur(S.buf, hz, S.tmp);\n  blur(S.kb, kz, S.tmp);\n  // Colour by how many mirrors the light has met: the direct light is a pale\n  // tint of the hue, and each reflection turns it a little further round the\n  // wheel and deeper, a sixth of a turn by the fifth.\n  // Round orange, yellow and yellow-green, 0.03 to 0.29 on the wheel, the\n  // colour goes paler so the dimmer far light reads as butter, not olive.\n  const h = S.hue + 0.5;\n  for (let j = 0; j \u003c 16; j++) {\n    const f = 1 - exp(-j / 3), hj = h + 0.17 * f, hf = hj - floor(hj);\n    const mud = cl((hf - 0.01) / 0.04, 0, 1) * cl((0.33 - hf) / 0.06, 0, 1);\n    hsv(hj, (0.18 + 0.62 * f) * (1 - 0.6 * mud), 1, col, j * 3);\n  }\n  hsv(h + 0.27, 0.45, 34, col, 48);\n  const lx = CX + S.lu, ly = S.ly, ie = 1 / max(1, S.expo);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const L = hz[i], v = min(1, LEVEL * Math.pow(L * ie, GAMMA));\n      // The mean number of reflections here, read between two palette steps.\n      const kb = L > 1e-4 ? min(14.99, kz[i] / L) : 0, j = floor(kb), f = kb - j, o = j * 3;\n      const ddx = x + 0.5 - lx, ddy = y + 0.5 - ly, core = 255 * exp(-(ddx * ddx + ddy * ddy) / 1.1);\n      // A wall is a dim line in the dark and a darker line across the glow,\n      // a mirror seen edge on, so it never stands 40 levels off its sides.\n      const wv = wall[i], g = 255 * v * (1 - 0.5 * wv);\n      const r = g * (col[o] + (col[o + 3] - col[o]) * f) + wv * col[48] + core;\n      const gg = g * (col[o + 1] + (col[o + 4] - col[o + 1]) * f) + wv * col[49] + core;\n      const b = g * (col[o + 2] + (col[o + 5] - col[o + 2]) * f) + wv * col[50] + core;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower."},{"name":"Offset","min":-4,"max":4,"about":"How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow."},{"name":"Bounces","min":0,"max":1,"about":"How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue."}],"start":[0,2,0,0.06],"measures":{"motion":0.1329,"detail":0.0175,"edges":0.0753,"complexity":1.6655,"coverage":0.6752,"colour":0.1329,"drift":0.3645},"knobResponse":[0.1321,0.1111,0.1163,0.0615]},{"slug":"pentomino-cover","title":"Pentomino Cover","family":"algo","round":34,"note":"6×10 직사각형을 크누스의 춤추는 링크가 열두 펜토미노로 채워요. 고를 수가 가장 적은 칸부터 조각을 놓고 막히면 빼서 아래쪽 조각들이 쉴 새 없이 들고 나며 윤곽만 잠깐 남기고, 다 덮이면 2초 동안 빛이 비스듬히 쓸고 판 아래에 눈금이 하나 늘어요. K3 은 판을 5×12, 4×15, 해가 둘뿐인 3×20 으로 바꿔요.","idea":"A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.","buttons":"K1 tap starts a new search in a new shuffled order.","code":"// ===== Patternflow pattern =====\n// Title:   Pentomino Cover\n// Family:  algo\n// Idea:    A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dancing Links and Algorithm X (Donald Knuth, 2000) on Solomon Golomb's pentominoes (1953), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1\n//\n// Knob 1: Hue. Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had.\n// Knob 2: Speed. Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3.\n// Knob 3: Board. 0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images.\n// Knob 4: Shuffle. How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search.\n// Buttons: K1 tap starts a new search in a new shuffled order.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, round, abs, pow, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The twelve pentominoes, F I L N P T U V W X Y Z.\nconst PIECES = [\n  [[1, 0], [2, 0], [0, 1], [1, 1], [1, 2]],\n  [[0, 0], [1, 0], [2, 0], [3, 0], [4, 0]],\n  [[0, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [0, 1], [1, 1], [0, 2]],\n  [[0, 0], [1, 0], [2, 0], [1, 1], [1, 2]],\n  [[0, 0], [2, 0], [0, 1], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [0, 2], [1, 2], [2, 2]],\n  [[0, 0], [0, 1], [1, 1], [1, 2], [2, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [1, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [1, 2], [2, 2]],\n];\nconst P_ = 4, X_ = 9;\n// Boards, columns by rows, and the LEDs a cell takes.\nconst BOARDS = [[6, 10, 10], [5, 12, 10], [4, 15, 8], [3, 20, 6]];\n\n// Every distinct orientation of a piece: the four turns first, then the\n// four turns of its mirror image, so flip marks the mirrored ones.\nfunction orientations(cells) {\n  const out = [], seen = new Set();\n  for (let f = 0; f \u003c 2; f++)\n    for (let q = 0; q \u003c 4; q++) {\n      let c = cells.map(([x, y]) => (f ? [-x, y] : [x, y]));\n      for (let k = 0; k \u003c q; k++) c = c.map(([x, y]) => [-y, x]);\n      const mx = min(...c.map((p) => p[0])), my = min(...c.map((p) => p[1]));\n      c = c.map(([x, y]) => [x - mx, y - my]).sort((a, b) => a[1] - b[1] || a[0] - b[0]);\n      const key = c.join(\";\");\n      if (!seen.has(key)) seen.add(key), out.push({ cells: c, flip: f });\n    }\n  return out;\n}\nconst ORIENT = PIECES.map(orientations);\n\n// The exact cover matrix: one column per piece, one per cell, and one\n// secondary column that keeps the count to solutions up to symmetry. The X\n// may only sit in the board's first quarter; when it sits on a mirror line\n// of the board the P may not be mirrored, and the secondary column holds\n// those two choices apart.\nfunction placements(bw, bh) {\n  const rows = [];\n  PIECES.forEach((_, pi) => {\n    for (const o of ORIENT[pi]) {\n      const ow = max(...o.cells.map((p) => p[0])) + 1, oh = max(...o.cells.map((p) => p[1])) + 1;\n      for (let y = 0; y + oh \u003c= bh; y++)\n        for (let x = 0; x + ow \u003c= bw; x++) {\n          let sec = pi === P_ && o.flip === 1;\n          if (pi === X_) {\n            const cx = x + 1, cy = y + 1;\n            if (2 * cx > bw - 1 || 2 * cy > bh - 1) continue;\n            sec = (bw % 2 === 1 && 2 * cx === bw - 1) || (bh % 2 === 1 && 2 * cy === bh - 1);\n          }\n          rows.push({ piece: pi, cells: o.cells.map(([a, b]) => (y + b) * bw + x + a), sec });\n        }\n    }\n  });\n  return rows;\n}\n\nconst MAXN = 16000;\nfunction newSearch(S, again) {\n  const [bw, bh] = BOARDS[S.board];\n  const rows = placements(bw, bh);\n  // Shuffle moves each row by up to twice that share of the list. A search\n  // started again keeps the order it had.\n  if (!again) S.jit = rows.map(() => random());\n  const key = rows.map((_, i) => i / rows.length + 2 * S.shuffle * S.jit[i]);\n  const order = rows.map((_, i) => i).sort((a, b) => key[a] - key[b]);\n  const NC = 12 + bw * bh, SEC = NC + 1;\n  const { L, R, U, D, C, RW, SZ } = S;\n  for (let c = 0; c \u003c= NC; c++) (L[c] = c - 1), (R[c] = c + 1), (U[c] = D[c] = C[c] = c), (SZ[c] = 0);\n  L[0] = NC;\n  R[NC] = 0;\n  L[SEC] = R[SEC] = U[SEC] = D[SEC] = C[SEC] = SEC;\n  let k = SEC + 1;\n  S.rows = order.map((i) => rows[i]);\n  S.rows.forEach((r, ri) => {\n    const cols = [1 + r.piece, ...r.cells.map((c) => 13 + c)];\n    if (r.sec) cols.push(SEC);\n    const first = k;\n    for (const c of cols) {\n      C[k] = c;\n      RW[k] = ri;\n      U[k] = U[c];\n      D[k] = c;\n      D[U[c]] = k;\n      U[c] = k;\n      SZ[c]++;\n      L[k] = k - 1;\n      R[k] = k + 1;\n      k++;\n    }\n    L[first] = k - 1;\n    R[k - 1] = first;\n  });\n  S.bw = bw;\n  S.bh = bh;\n  S.cs = BOARDS[S.board][2];\n  S.k = 0;\n  S.mode = 0;\n  S.done = false;\n  S.found = 0;\n  S.hold = 0;\n  S.cell.fill(-1);\n  S.age.fill(9);\n  S.ghost.fill(-1);\n  S.gAge.fill(9);\n  S.builtBoard = S.board;\n  S.builtShuffle = S.shuffle;\n}\n\nfunction cover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  L[R[c]] = L[c];\n  R[L[c]] = R[c];\n  for (let i = D[c]; i !== c; i = D[i])\n    for (let j = R[i]; j !== i; j = R[j]) (U[D[j]] = U[j]), (D[U[j]] = D[j]), SZ[C[j]]--;\n}\nfunction uncover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  for (let i = U[c]; i !== c; i = U[i])\n    for (let j = L[i]; j !== i; j = L[j]) SZ[C[j]]++, (U[D[j]] = j), (D[U[j]] = j);\n  L[R[c]] = c;\n  R[L[c]] = c;\n}\nfunction place(S, node, on) {\n  const r = S.rows[S.RW[node]];\n  for (const c of r.cells) {\n    if (on) (S.cell[c] = r.piece), (S.age[c] = 0);\n    else (S.ghost[c] = S.cell[c]), (S.gAge[c] = 0), (S.cell[c] = -1);\n  }\n}\n\n// Algorithm X, one node of the search tree a call: enter a level and cover\n// the column with the fewest rows left, try its next row, or step back.\n// Returns true when the board is full.\nfunction searchStep(S) {\n  const { L, R, D, C, SZ, col, row } = S;\n  if (S.mode === 0) {\n    if (R[0] === 0) {\n      S.mode = 2;\n      return true;\n    }\n    let c = R[0], best = 1e9;\n    for (let j = R[0]; j !== 0; j = R[j]) if (SZ[j] \u003c best) (best = SZ[j]), (c = j);\n    cover(S, c);\n    col[S.k] = c;\n    row[S.k] = D[c];\n    S.mode = 1;\n  } else if (S.mode === 1) {\n    const r = row[S.k];\n    if (r === col[S.k]) {\n      uncover(S, col[S.k]);\n      S.mode = 2;\n      return false;\n    }\n    for (let j = R[r]; j !== r; j = R[j]) cover(S, C[j]);\n    place(S, r, true);\n    S.k++;\n    S.mode = 0;\n  } else {\n    if (S.k === 0) {\n      S.done = true;\n      return false;\n    }\n    S.k--;\n    const r = row[S.k];\n    place(S, r, false);\n    for (let j = L[r]; j !== r; j = L[j]) uncover(S, C[j]);\n    row[S.k] = D[r];\n    S.mode = 1;\n  }\n  return false;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, board: 0, shuffle: 0.06, warm: false, acc: 0, sweep: 0,\n    L: new Int32Array(MAXN), R: new Int32Array(MAXN), U: new Int32Array(MAXN), D: new Int32Array(MAXN),\n    C: new Int32Array(MAXN), RW: new Int32Array(MAXN), SZ: new Int32Array(80), col: new Int32Array(16), row: new Int32Array(16),\n    cell: new Int8Array(60), age: new Float32Array(60), ghost: new Int8Array(60), gAge: new Float32Array(60),\n    key: new Int8Array(60), pc: new Int8Array(N), c: [0, 0, 0],\n  };\n}\n\n// A full cover holds for HOLD seconds; the search takes rate(Speed) steps a\n// second.\nconst HOLD = 2;\nconst rate = (sp) => 5 * pow(2, 3.5 * (sp - 0.2));\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.board = cl(round(k[2]), 0, 3);\n  S.shuffle = cl(k[3], 0, 1);\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (!S.warm || pressed || S.board !== S.builtBoard || abs(S.shuffle - S.builtShuffle) > 0.04) {\n    newSearch(S);\n    if (!S.warm) {\n      // Open about 1100 steps short of the first full board, so at Speed 2\n      // the first solution comes near 2.8 s.\n      let n = 0;\n      while (!searchStep(S) && !S.done) n++;\n      newSearch(S, true);\n      for (let i = 0; i \u003c n - 1100; i++) searchStep(S);\n      S.age.fill(9);\n      S.ghost.fill(-1);\n      S.warm = true;\n    }\n  }\n  for (let c = 0; c \u003c 60; c++) (S.age[c] += d), (S.gAge[c] += d);\n  if (S.hold > 0) {\n    S.hold = max(0, S.hold - d);\n    S.sweep += d / HOLD;\n    return;\n  }\n  if (S.done) {\n    newSearch(S);\n    return;\n  }\n  S.acc += d * rate(S.speed);\n  while (S.acc >= 1) {\n    S.acc--;\n    if (searchStep(S)) {\n      S.found++;\n      S.hold = HOLD;\n      S.sweep = 0;\n      S.acc = 0;\n      break;\n    }\n    if (S.done) break;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { bw, bh, cs, cell, age, ghost, gAge, key, pc, c } = S, base = S.hue + 0.55;\n  const BW = bw * cs + 1, BH = bh * cs + 1, ox = floor((W - BW) / 2), oy = floor((H - BH) / 2);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, 0, 0, 0);\n  // Each cell shows its piece, or for 0.18 s after the search takes a\n  // piece out, that piece's outline fading.\n  for (let i = 0; i \u003c bw * bh; i++) key[i] = cell[i] >= 0 ? cell[i] : ghost[i] >= 0 && gAge[i] \u003c 0.18 ? 12 + ghost[i] : -1;\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= bw || y >= bh ? -2 : key[y * bw + x]);\n  // A cell's own LEDs show its piece, a grid line between two cells of one\n  // piece that piece, any other grid line the dark seam.\n  pc.fill(-1);\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const gx = X % cs === 0, gy = Y % cs === 0, cx = floor(X / cs), cy = floor(Y / cs);\n      let q;\n      if (!gx && !gy) q = at(cx, cy);\n      else if (gx && !gy) q = at(cx - 1, cy) === at(cx, cy) ? at(cx, cy) : -1;\n      else if (!gx && gy) q = at(cx, cy - 1) === at(cx, cy) ? at(cx, cy) : -1;\n      else {\n        const a = at(cx - 1, cy - 1);\n        q = a === at(cx, cy - 1) && a === at(cx - 1, cy) && a === at(cx, cy) ? a : -1;\n      }\n      pc[(oy + Y) * W + ox + X] = q;\n    }\n  // A light sweeps across the board while a solution holds.\n  const band = S.hold > 0 ? -0.25 + 1.5 * cl(S.sweep, 0, 1) : -9;\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const p = (oy + Y) * W + ox + X, q = pc[p];\n      const cx = min(bw - 1, floor(X / cs)), cy = min(bh - 1, floor(Y / cs)), ci = cy * bw + cx;\n      const g = (X / BW + Y / BH) / 2 - band, lit = S.hold > 0 ? exp(-g * g * 90) : 0;\n      if (q >= 0 && q \u003c 12) {\n        // A slight bevel: lighter next to a seam above or to the left,\n        // darker next to one below or to the right.\n        const up = pc[p - W] \u003c 0 || pc[p - W] >= 12, lf = pc[p - 1] \u003c 0 || pc[p - 1] >= 12;\n        const dn = pc[p + W] \u003c 0 || pc[p + W] >= 12, rt = pc[p + 1] \u003c 0 || pc[p + 1] >= 12;\n        const fresh = cl(1 - age[ci] / 0.15, 0, 1);\n        const v = min(1, 0.82 + (up || lf ? 0.18 : 0) - (dn || rt ? 0.2 : 0) + 0.15 * fresh + 0.3 * lit);\n        hsv(base + q / 12, (0.72 - 0.3 * fresh) * (1 - 0.7 * lit), 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 255 * v), round(c[1] * 255 * v), round(c[2] * 255 * v));\n      } else if (q >= 12) {\n        // A piece just taken out leaves its outline for a moment.\n        if (pc[p - W] === q && pc[p + W] === q && pc[p - 1] === q && pc[p + 1] === q) continue;\n        const f = cl(1 - gAge[ci] / 0.18, 0, 1);\n        hsv(base + (q - 12) / 12, 0.6, 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 150 * f), round(c[1] * 150 * f), round(c[2] * 150 * f));\n      } else if (X === 0 || Y === 0 || X === BW - 1 || Y === BH - 1) display.setPixel(ox + X, oy + Y, 44, 44, 54);\n      else if (X % cs === 0 && Y % cs === 0) display.setPixel(ox + X, oy + Y, 40, 40, 48);\n    }\n  // One tick under the board for each solution this search has found, 31\n  // to a row; a full row turns dim and the next starts over it.\n  const ty = oy + BH + (oy > 6 ? 2 : 0), full = floor(S.found / 31), part = S.found % 31;\n  for (let i = 0; i \u003c 31; i++) {\n    const on = i \u003c part, x = 1 + 2 * i;\n    if (!on && full === 0) continue;\n    hsv(base + 0.1 * (on ? full : full - 1), on ? 0.25 : 0.5, 1, c);\n    const v = on ? (i === part - 1 && S.hold > 0 ? 255 : 190) : 70;\n    for (let y = ty; y \u003c min(H, ty + 2); y++) display.setPixel(x, y, round(c[0] * v), round(c[1] * v), round(c[2] * v));\n  }\n}\n","layer":{"id":"layer-pentomino-cover","type":"code","name":"pentomino-cover","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pentomino Cover\n// Family:  algo\n// Idea:    A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dancing Links and Algorithm X (Donald Knuth, 2000) on Solomon Golomb's pentominoes (1953), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1\n//\n// Knob 1: Hue. Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had.\n// Knob 2: Speed. Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3.\n// Knob 3: Board. 0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images.\n// Knob 4: Shuffle. How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search.\n// Buttons: K1 tap starts a new search in a new shuffled order.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, round, abs, pow, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The twelve pentominoes, F I L N P T U V W X Y Z.\nconst PIECES = [\n  [[1, 0], [2, 0], [0, 1], [1, 1], [1, 2]],\n  [[0, 0], [1, 0], [2, 0], [3, 0], [4, 0]],\n  [[0, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [0, 1], [1, 1], [0, 2]],\n  [[0, 0], [1, 0], [2, 0], [1, 1], [1, 2]],\n  [[0, 0], [2, 0], [0, 1], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [0, 2], [1, 2], [2, 2]],\n  [[0, 0], [0, 1], [1, 1], [1, 2], [2, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [1, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [1, 2], [2, 2]],\n];\nconst P_ = 4, X_ = 9;\n// Boards, columns by rows, and the LEDs a cell takes.\nconst BOARDS = [[6, 10, 10], [5, 12, 10], [4, 15, 8], [3, 20, 6]];\n\n// Every distinct orientation of a piece: the four turns first, then the\n// four turns of its mirror image, so flip marks the mirrored ones.\nfunction orientations(cells) {\n  const out = [], seen = new Set();\n  for (let f = 0; f \u003c 2; f++)\n    for (let q = 0; q \u003c 4; q++) {\n      let c = cells.map(([x, y]) => (f ? [-x, y] : [x, y]));\n      for (let k = 0; k \u003c q; k++) c = c.map(([x, y]) => [-y, x]);\n      const mx = min(...c.map((p) => p[0])), my = min(...c.map((p) => p[1]));\n      c = c.map(([x, y]) => [x - mx, y - my]).sort((a, b) => a[1] - b[1] || a[0] - b[0]);\n      const key = c.join(\";\");\n      if (!seen.has(key)) seen.add(key), out.push({ cells: c, flip: f });\n    }\n  return out;\n}\nconst ORIENT = PIECES.map(orientations);\n\n// The exact cover matrix: one column per piece, one per cell, and one\n// secondary column that keeps the count to solutions up to symmetry. The X\n// may only sit in the board's first quarter; when it sits on a mirror line\n// of the board the P may not be mirrored, and the secondary column holds\n// those two choices apart.\nfunction placements(bw, bh) {\n  const rows = [];\n  PIECES.forEach((_, pi) => {\n    for (const o of ORIENT[pi]) {\n      const ow = max(...o.cells.map((p) => p[0])) + 1, oh = max(...o.cells.map((p) => p[1])) + 1;\n      for (let y = 0; y + oh \u003c= bh; y++)\n        for (let x = 0; x + ow \u003c= bw; x++) {\n          let sec = pi === P_ && o.flip === 1;\n          if (pi === X_) {\n            const cx = x + 1, cy = y + 1;\n            if (2 * cx > bw - 1 || 2 * cy > bh - 1) continue;\n            sec = (bw % 2 === 1 && 2 * cx === bw - 1) || (bh % 2 === 1 && 2 * cy === bh - 1);\n          }\n          rows.push({ piece: pi, cells: o.cells.map(([a, b]) => (y + b) * bw + x + a), sec });\n        }\n    }\n  });\n  return rows;\n}\n\nconst MAXN = 16000;\nfunction newSearch(S, again) {\n  const [bw, bh] = BOARDS[S.board];\n  const rows = placements(bw, bh);\n  // Shuffle moves each row by up to twice that share of the list. A search\n  // started again keeps the order it had.\n  if (!again) S.jit = rows.map(() => random());\n  const key = rows.map((_, i) => i / rows.length + 2 * S.shuffle * S.jit[i]);\n  const order = rows.map((_, i) => i).sort((a, b) => key[a] - key[b]);\n  const NC = 12 + bw * bh, SEC = NC + 1;\n  const { L, R, U, D, C, RW, SZ } = S;\n  for (let c = 0; c \u003c= NC; c++) (L[c] = c - 1), (R[c] = c + 1), (U[c] = D[c] = C[c] = c), (SZ[c] = 0);\n  L[0] = NC;\n  R[NC] = 0;\n  L[SEC] = R[SEC] = U[SEC] = D[SEC] = C[SEC] = SEC;\n  let k = SEC + 1;\n  S.rows = order.map((i) => rows[i]);\n  S.rows.forEach((r, ri) => {\n    const cols = [1 + r.piece, ...r.cells.map((c) => 13 + c)];\n    if (r.sec) cols.push(SEC);\n    const first = k;\n    for (const c of cols) {\n      C[k] = c;\n      RW[k] = ri;\n      U[k] = U[c];\n      D[k] = c;\n      D[U[c]] = k;\n      U[c] = k;\n      SZ[c]++;\n      L[k] = k - 1;\n      R[k] = k + 1;\n      k++;\n    }\n    L[first] = k - 1;\n    R[k - 1] = first;\n  });\n  S.bw = bw;\n  S.bh = bh;\n  S.cs = BOARDS[S.board][2];\n  S.k = 0;\n  S.mode = 0;\n  S.done = false;\n  S.found = 0;\n  S.hold = 0;\n  S.cell.fill(-1);\n  S.age.fill(9);\n  S.ghost.fill(-1);\n  S.gAge.fill(9);\n  S.builtBoard = S.board;\n  S.builtShuffle = S.shuffle;\n}\n\nfunction cover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  L[R[c]] = L[c];\n  R[L[c]] = R[c];\n  for (let i = D[c]; i !== c; i = D[i])\n    for (let j = R[i]; j !== i; j = R[j]) (U[D[j]] = U[j]), (D[U[j]] = D[j]), SZ[C[j]]--;\n}\nfunction uncover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  for (let i = U[c]; i !== c; i = U[i])\n    for (let j = L[i]; j !== i; j = L[j]) SZ[C[j]]++, (U[D[j]] = j), (D[U[j]] = j);\n  L[R[c]] = c;\n  R[L[c]] = c;\n}\nfunction place(S, node, on) {\n  const r = S.rows[S.RW[node]];\n  for (const c of r.cells) {\n    if (on) (S.cell[c] = r.piece), (S.age[c] = 0);\n    else (S.ghost[c] = S.cell[c]), (S.gAge[c] = 0), (S.cell[c] = -1);\n  }\n}\n\n// Algorithm X, one node of the search tree a call: enter a level and cover\n// the column with the fewest rows left, try its next row, or step back.\n// Returns true when the board is full.\nfunction searchStep(S) {\n  const { L, R, D, C, SZ, col, row } = S;\n  if (S.mode === 0) {\n    if (R[0] === 0) {\n      S.mode = 2;\n      return true;\n    }\n    let c = R[0], best = 1e9;\n    for (let j = R[0]; j !== 0; j = R[j]) if (SZ[j] \u003c best) (best = SZ[j]), (c = j);\n    cover(S, c);\n    col[S.k] = c;\n    row[S.k] = D[c];\n    S.mode = 1;\n  } else if (S.mode === 1) {\n    const r = row[S.k];\n    if (r === col[S.k]) {\n      uncover(S, col[S.k]);\n      S.mode = 2;\n      return false;\n    }\n    for (let j = R[r]; j !== r; j = R[j]) cover(S, C[j]);\n    place(S, r, true);\n    S.k++;\n    S.mode = 0;\n  } else {\n    if (S.k === 0) {\n      S.done = true;\n      return false;\n    }\n    S.k--;\n    const r = row[S.k];\n    place(S, r, false);\n    for (let j = L[r]; j !== r; j = L[j]) uncover(S, C[j]);\n    row[S.k] = D[r];\n    S.mode = 1;\n  }\n  return false;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, board: 0, shuffle: 0.06, warm: false, acc: 0, sweep: 0,\n    L: new Int32Array(MAXN), R: new Int32Array(MAXN), U: new Int32Array(MAXN), D: new Int32Array(MAXN),\n    C: new Int32Array(MAXN), RW: new Int32Array(MAXN), SZ: new Int32Array(80), col: new Int32Array(16), row: new Int32Array(16),\n    cell: new Int8Array(60), age: new Float32Array(60), ghost: new Int8Array(60), gAge: new Float32Array(60),\n    key: new Int8Array(60), pc: new Int8Array(N), c: [0, 0, 0],\n  };\n}\n\n// A full cover holds for HOLD seconds; the search takes rate(Speed) steps a\n// second.\nconst HOLD = 2;\nconst rate = (sp) => 5 * pow(2, 3.5 * (sp - 0.2));\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.board = cl(round(k[2]), 0, 3);\n  S.shuffle = cl(k[3], 0, 1);\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (!S.warm || pressed || S.board !== S.builtBoard || abs(S.shuffle - S.builtShuffle) > 0.04) {\n    newSearch(S);\n    if (!S.warm) {\n      // Open about 1100 steps short of the first full board, so at Speed 2\n      // the first solution comes near 2.8 s.\n      let n = 0;\n      while (!searchStep(S) && !S.done) n++;\n      newSearch(S, true);\n      for (let i = 0; i \u003c n - 1100; i++) searchStep(S);\n      S.age.fill(9);\n      S.ghost.fill(-1);\n      S.warm = true;\n    }\n  }\n  for (let c = 0; c \u003c 60; c++) (S.age[c] += d), (S.gAge[c] += d);\n  if (S.hold > 0) {\n    S.hold = max(0, S.hold - d);\n    S.sweep += d / HOLD;\n    return;\n  }\n  if (S.done) {\n    newSearch(S);\n    return;\n  }\n  S.acc += d * rate(S.speed);\n  while (S.acc >= 1) {\n    S.acc--;\n    if (searchStep(S)) {\n      S.found++;\n      S.hold = HOLD;\n      S.sweep = 0;\n      S.acc = 0;\n      break;\n    }\n    if (S.done) break;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { bw, bh, cs, cell, age, ghost, gAge, key, pc, c } = S, base = S.hue + 0.55;\n  const BW = bw * cs + 1, BH = bh * cs + 1, ox = floor((W - BW) / 2), oy = floor((H - BH) / 2);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, 0, 0, 0);\n  // Each cell shows its piece, or for 0.18 s after the search takes a\n  // piece out, that piece's outline fading.\n  for (let i = 0; i \u003c bw * bh; i++) key[i] = cell[i] >= 0 ? cell[i] : ghost[i] >= 0 && gAge[i] \u003c 0.18 ? 12 + ghost[i] : -1;\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= bw || y >= bh ? -2 : key[y * bw + x]);\n  // A cell's own LEDs show its piece, a grid line between two cells of one\n  // piece that piece, any other grid line the dark seam.\n  pc.fill(-1);\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const gx = X % cs === 0, gy = Y % cs === 0, cx = floor(X / cs), cy = floor(Y / cs);\n      let q;\n      if (!gx && !gy) q = at(cx, cy);\n      else if (gx && !gy) q = at(cx - 1, cy) === at(cx, cy) ? at(cx, cy) : -1;\n      else if (!gx && gy) q = at(cx, cy - 1) === at(cx, cy) ? at(cx, cy) : -1;\n      else {\n        const a = at(cx - 1, cy - 1);\n        q = a === at(cx, cy - 1) && a === at(cx - 1, cy) && a === at(cx, cy) ? a : -1;\n      }\n      pc[(oy + Y) * W + ox + X] = q;\n    }\n  // A light sweeps across the board while a solution holds.\n  const band = S.hold > 0 ? -0.25 + 1.5 * cl(S.sweep, 0, 1) : -9;\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const p = (oy + Y) * W + ox + X, q = pc[p];\n      const cx = min(bw - 1, floor(X / cs)), cy = min(bh - 1, floor(Y / cs)), ci = cy * bw + cx;\n      const g = (X / BW + Y / BH) / 2 - band, lit = S.hold > 0 ? exp(-g * g * 90) : 0;\n      if (q >= 0 && q \u003c 12) {\n        // A slight bevel: lighter next to a seam above or to the left,\n        // darker next to one below or to the right.\n        const up = pc[p - W] \u003c 0 || pc[p - W] >= 12, lf = pc[p - 1] \u003c 0 || pc[p - 1] >= 12;\n        const dn = pc[p + W] \u003c 0 || pc[p + W] >= 12, rt = pc[p + 1] \u003c 0 || pc[p + 1] >= 12;\n        const fresh = cl(1 - age[ci] / 0.15, 0, 1);\n        const v = min(1, 0.82 + (up || lf ? 0.18 : 0) - (dn || rt ? 0.2 : 0) + 0.15 * fresh + 0.3 * lit);\n        hsv(base + q / 12, (0.72 - 0.3 * fresh) * (1 - 0.7 * lit), 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 255 * v), round(c[1] * 255 * v), round(c[2] * 255 * v));\n      } else if (q >= 12) {\n        // A piece just taken out leaves its outline for a moment.\n        if (pc[p - W] === q && pc[p + W] === q && pc[p - 1] === q && pc[p + 1] === q) continue;\n        const f = cl(1 - gAge[ci] / 0.18, 0, 1);\n        hsv(base + (q - 12) / 12, 0.6, 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 150 * f), round(c[1] * 150 * f), round(c[2] * 150 * f));\n      } else if (X === 0 || Y === 0 || X === BW - 1 || Y === BH - 1) display.setPixel(ox + X, oy + Y, 44, 44, 54);\n      else if (X % cs === 0 && Y % cs === 0) display.setPixel(ox + X, oy + Y, 40, 40, 48);\n    }\n  // One tick under the board for each solution this search has found, 31\n  // to a row; a full row turns dim and the next starts over it.\n  const ty = oy + BH + (oy > 6 ? 2 : 0), full = floor(S.found / 31), part = S.found % 31;\n  for (let i = 0; i \u003c 31; i++) {\n    const on = i \u003c part, x = 1 + 2 * i;\n    if (!on && full === 0) continue;\n    hsv(base + 0.1 * (on ? full : full - 1), on ? 0.25 : 0.5, 1, c);\n    const v = on ? (i === part - 1 && S.hold > 0 ? 255 : 190) : 70;\n    for (let y = ty; y \u003c min(H, ty + 2); y++) display.setPixel(x, y, round(c[0] * v), round(c[1] * v), round(c[2] * v));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had."},{"name":"Speed","min":0.2,"max":3,"about":"Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3."},{"name":"Board","min":0,"max":3,"about":"0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images."},{"name":"Shuffle","min":0,"max":1,"about":"How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search."}],"start":[0,2,0,0.06],"measures":{"motion":1.8284,"detail":0.0833,"edges":0.9414,"complexity":0.2159,"coverage":0.603,"colour":0.4009,"drift":0.2078},"knobResponse":[0.2347,0.2072,0.3116,0.2483]},{"slug":"percolation","title":"Percolation","family":"cells","round":30,"note":"LED 마다 정해 둔 난수가 p 보다 작으면 열리고, 이어진 자리끼리 제 색의 클러스터가 돼요. p 가 오르다 한 클러스터가 위아래 128줄을 이으면 금빛으로 켜지고 가장 짧은 길이 그어져요.","idea":"Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.","buttons":"K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.","code":"// ===== Patternflow pattern =====\n// Title:   Percolation\n// Family:  cells\n// Idea:    Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: percolation (Simon Broadbent and John Hammersley, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle.\n// Knob 2: Speed. How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s.\n// Knob 3: Window. How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site.\n// Knob 4: Small. How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour.\n// Buttons: K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sqrt, acos, imul } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Site percolation threshold of the square lattice with edge neighbours,\n// found numerically (Newman and Ziff, 2000, give 0.59274621). Below it every\n// cluster on the infinite lattice is finite; above it one is infinite; at it\n// the clusters are fractal, of dimension 91/48, at every scale.\nconst PC = 0.592746;\n// Phase speed of the sweep per unit of Speed, over the root of the sweep's\n// width in p, so a wide Window sweeps faster in p but not in proportion.\nconst RATE = 0.0657;\n// Crossing comes this many seconds after the start, at Speed 2.\nconst LEAD = 2.7;\n\n// Union-find with union by size and path halving.\nfunction find(par, i) {\n  while (par[i] !== i) {\n    const g = par[par[i]];\n    par[i] = g;\n    i = g;\n  }\n  return i;\n}\n\nfunction join(par, sz, a, b) {\n  a = find(par, a);\n  b = find(par, b);\n  if (a === b) return;\n  if (sz[a] \u003c sz[b]) {\n    const t = a;\n    a = b;\n    b = t;\n  }\n  par[b] = a;\n  sz[a] += sz[b];\n}\n\nfunction hash(i) {\n  let h = imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h ^= h >>> 13;\n  h = imul(h, 0xc2b2ae35);\n  h ^= h >>> 16;\n  return (h >>> 0) / 4294967296;\n}\n\n// p*, the lattice's own crossing point: open the sites one at a time in the\n// order of their numbers, as Newman and Ziff do, with the top row joined to\n// one extra node and the bottom row to another, and stop when the two meet.\n// On a 64-wide strip it lands a few hundredths either side of p_c; the\n// study's seed gives 0.6038.\nfunction threshold(P) {\n  const { u, par, sz } = P;\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => u[a] - u[b]);\n  const on = new Uint8Array(N);\n  (par[N] = N), (par[N + 1] = N + 1), (sz[N] = sz[N + 1] = 1);\n  for (const i of order) {\n    (on[i] = 1), (par[i] = i), (sz[i] = 1);\n    const x = i % W, y = (i / W) | 0;\n    if (x > 0 && on[i - 1]) join(par, sz, i, i - 1);\n    if (x \u003c W - 1 && on[i + 1]) join(par, sz, i, i + 1);\n    if (y === 0) join(par, sz, i, N);\n    else if (on[i - W]) join(par, sz, i, i - W);\n    if (y === H - 1) join(par, sz, i, N + 1);\n    else if (on[i + W]) join(par, sz, i, i + W);\n    if (find(par, N) === find(par, N + 1)) return u[i];\n  }\n  return 1;\n}\n\nfunction lattice(P) {\n  for (let i = 0; i \u003c N; i++) P.u[i] = Math.random();\n  P.pstar = threshold(P);\n  P.id.fill(-1);\n  (P.span = false), (P.soft = 1);\n}\n\n// The sweep runs from W below p_c (or below p*, on a lattice that crosses\n// early) to 0.3 W above p*, so every rise ends in a crossing. Returns the\n// phase speed.\nfunction sweep(P, win, speed) {\n  P.lo = min(PC, P.pstar) - win;\n  P.hi = P.pstar + 0.3 * win;\n  return (RATE * speed) / sqrt(P.hi - P.lo);\n}\n\n// Puts the phase LEAD seconds before the crossing at the given Window and\n// Speed. p = lo + (hi - lo)(1 - cos phase) / 2.\nfunction aim(P, win, speed) {\n  const w = sweep(P, win, speed);\n  P.phase = acos(cl(1 - (2 * (P.pstar - P.lo)) / (P.hi - P.lo), -1, 1)) - LEAD * w;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N + 2), F = () => new Float32Array(N);\n  const P = (params.s = {\n    u: F(), jit: F(), sat: F(), glow: F(), cr: F(), cg: F(), cb: F(),\n    par: I(), sz: I(), root: I(), id: I(), idSize: I(), idHue: F(),\n    best: I(), bestS: I(), muSite: I(), rid: I(), owner: I(), prev: I(), queue: I(), path: I(), pathK: I().fill(-1),\n    flag: new Uint8Array(N), used: new Uint8Array(N),\n    pathLen: 0, cur: 0, maxSize: 1, spanRoot: -1, flash: 0, pulse: 0, p: 0.5, pstar: PC, dt: 1 / 30,\n    hue: 0, speed: 2, win: 0.04, small: 0.06, soft: 1, phase: 0, span: false, lo: 0.55, hi: 0.62,\n  });\n  // A fixed tint per LED: hue off by up to 0.05 and saturation 0.6 to 0.98.\n  for (let i = 0; i \u003c N; i++) (P.jit[i] = (hash(i + 7919) - 0.5) * 0.1), (P.sat[i] = 0.6 + 0.38 * hash(i + 104729));\n  lattice(P);\n  // The opening is aimed for Window 0.04 and Speed 2 whatever the knobs say,\n  // so a faster Speed crosses sooner and a wider Window starts further down.\n  aim(P, 0.04, 2);\n}\n\n// Labels the clusters at the current p and hands each one a colour. A\n// cluster's colour is an id with a hue. When clusters merge, the merged one\n// keeps the id of whichever part was biggest a frame ago; when one splits,\n// the biggest piece keeps it and the rest take fresh ids, hued from their\n// lowest-numbered site. So the big clusters hold their colour through the\n// whole sweep and only the small ones change.\nfunction label(P) {\n  const { u, par, sz, root, flag, muSite, best, bestS, rid, owner, used, id, idSize, idHue, p } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (u[i] \u003c p) (par[i] = i), (sz[i] = 1);\n    else par[i] = -1;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    if (par[i] \u003c 0) continue;\n    if (i % W && par[i - 1] >= 0) join(par, sz, i, i - 1);\n    if (i >= W && par[i - W] >= 0) join(par, sz, i, i - W);\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const r = par[i] \u003c 0 ? -1 : find(par, i);\n    root[i] = r;\n    if (r === i) (flag[i] = 0), (muSite[i] = i), (best[i] = -1), (bestS[i] = -1);\n  }\n  // Which rows each cluster touches (1 top, 2 bottom), its lowest site, and\n  // of the ids its sites wore last frame, the one whose cluster was biggest.\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r \u003c 0) continue;\n    if (i \u003c W) flag[r] |= 1;\n    if (i >= N - W) flag[r] |= 2;\n    if (u[i] \u003c u[muSite[r]]) muSite[r] = i;\n    const a = id[i];\n    if (a >= 0 && idSize[a] > bestS[r]) (bestS[r] = idSize[a]), (best[r] = a);\n  }\n  owner.fill(-1);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && (owner[c] \u003c 0 || sz[r] > sz[owner[c]])) owner[c] = r;\n  }\n  used.fill(0);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && owner[c] === r) (rid[r] = c), (used[c] = 1);\n    else rid[r] = -1;\n  }\n  let big = 1, span = -1;\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    if (rid[r] \u003c 0) {\n      while (used[P.cur]) P.cur = (P.cur + 1) % N;\n      (rid[r] = P.cur), (used[P.cur] = 1), (idHue[P.cur] = hash(muSite[r]) - 0.5);\n    }\n    idSize[rid[r]] = sz[r];\n    if (sz[r] > big) big = sz[r];\n    if (flag[r] === 3 && (span \u003c 0 || sz[r] > sz[span])) span = r;\n  }\n  for (let i = 0; i \u003c N; i++) id[i] = root[i] \u003c 0 ? -1 : rid[root[i]];\n  P.maxSize = big;\n  P.spanRoot = span;\n}\n\n// The shortest open path from the top row to the bottom row inside the\n// crossing cluster: a breadth-first search from all its top-row sites at\n// once, stopped at the first bottom-row site it reaches.\nfunction shortest(P, R) {\n  const { root, prev, queue, pathK, path } = P;\n  for (let j = 0; j \u003c P.pathLen; j++) pathK[path[j]] = -1;\n  P.pathLen = 0;\n  if (R \u003c 0) return;\n  prev.fill(-2);\n  let qh = 0, qt = 0, end = -1;\n  for (let x = 0; x \u003c W; x++) if (root[x] === R) (prev[x] = -1), (queue[qt++] = x);\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i >= N - W) {\n      end = i;\n      break;\n    }\n    const x = i % W;\n    let n = i + W;\n    if (root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - 1;\n    if (x > 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i + 1;\n    if (x \u003c W - 1 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - W;\n    if (n >= 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n  }\n  let len = 0;\n  for (let i = end; i >= 0; i = prev[i]) len++;\n  let j = len;\n  for (let i = end; i >= 0; i = prev[i]) (path[--j] = i), (pathK[i] = j);\n  P.pathLen = len;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0.04, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.win = cl(k[2], 0.04, 0.2);\n  P.small = cl(k[3], -1, 1);\n  // K1: a fresh lattice, crossed 2.7 s from now at the current knobs.\n  if (input.btnPressed && input.btnPressed[0]) lattice(P), aim(P, P.win, P.speed);\n  P.phase += sweep(P, P.win, P.speed) * d;\n  P.p = P.lo + ((P.hi - P.lo) * (1 - cos(P.phase))) / 2;\n  label(P);\n  // The flash comes on the frame a cluster first joins top to bottom and\n  // fades in 0.6 s; the gold stays while it spans and fades in 0.35 s after.\n  const spanning = P.spanRoot >= 0;\n  if (spanning && !P.span) P.flash = 1;\n  P.span = spanning;\n  P.flash *= exp(-d / 0.6);\n  P.soft *= exp(-d / 0.5);\n  P.pulse += (30 + 25 * P.speed) * d;\n  const fall = exp(-d / 0.35), { root, flag, glow } = P;\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r >= 0 && flag[r] === 3) glow[i] = 1;\n    else glow[i] *= fall;\n  }\n  shortest(P, P.spanRoot);\n  P.dt = d;\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { u, root, id, sz, idHue, jit, sat, glow, pathK, cr, cg, cb, p } = P;\n  const gold = 0.125 + P.hue, sm = P.small, fl = P.flash;\n  // Small: brightness lo + (1 - lo) f^gam, f = log size / log largest size.\n  const lo = sm \u003c 0 ? 0.3 * (1 + sm) : 0.3 + 0.5 * sm, gam = sm \u003c 0 ? 1.2 - 2.8 * sm : 1.2;\n  const lb = 1 / log(max(2, P.maxSize));\n  // Each LED eases to its colour in 0.1 s, so a merge washes over a cluster\n  // instead of blinking; after a K1 tap, in 0.7 s.\n  const kk = 1 - exp(-P.dt / (0.1 + 0.6 * P.soft));\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    let R, G, B;\n    if (r \u003c 0) {\n      // A closed site keeps an ember under 20 of 255, brightest when its\n      // number is just above p and it is next to open.\n      const e = 1 - (u[i] - p) / (1 - p);\n      hsv(gold + 0.5 + jit[i], sat[i], 0.075 * e * e);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    } else {\n      // An open site burns brighter the longer it has been open, from 42% at\n      // u = p to full at u = 0, and comes up over its first 0.004 of p.\n      const f = log(sz[r]) * lb, v = lo + (1 - lo) * f ** gam;\n      const g = (0.42 + 0.58 * (1 - u[i] / p)) * cl((p - u[i]) / 0.004, 0, 1);\n      hsv(gold + 0.475 + 0.55 * idHue[id[i]] + jit[i], sat[i], v * g);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = glow[i];\n      if (w > 0.002) {\n        hsv(gold + 0.4 * jit[i], (0.4 + 0.45 * sat[i]) * (1 - fl), (0.6 + 0.38 * g) * (1 - fl) + fl);\n        (R += (C[0] - R) * w), (G += (C[1] - G) * w), (B += (C[2] - B) * w);\n      }\n      // The shortest path: white, with a drop every 48 sites running down it.\n      const j = pathK[i];\n      if (j >= 0) {\n        const q = (((P.pulse - j) % 48) + 48) % 48, b = 0.65 + 0.35 * max(0, 1 - q / 14);\n        (R += (1 - R) * b), (G += (0.97 - G) * b), (B += (0.9 - B) * b);\n      }\n    }\n    cr[i] += (R * 255 - cr[i]) * kk;\n    cg[i] += (G * 255 - cg[i]) * kk;\n    cb[i] += (B * 255 - cb[i]) * kk;\n    display.setPixel(i % W, (i / W) | 0, cr[i], cg[i], cb[i]);\n  }\n}\n","layer":{"id":"layer-percolation","type":"code","name":"percolation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Percolation\n// Family:  cells\n// Idea:    Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: percolation (Simon Broadbent and John Hammersley, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle.\n// Knob 2: Speed. How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s.\n// Knob 3: Window. How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site.\n// Knob 4: Small. How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour.\n// Buttons: K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sqrt, acos, imul } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Site percolation threshold of the square lattice with edge neighbours,\n// found numerically (Newman and Ziff, 2000, give 0.59274621). Below it every\n// cluster on the infinite lattice is finite; above it one is infinite; at it\n// the clusters are fractal, of dimension 91/48, at every scale.\nconst PC = 0.592746;\n// Phase speed of the sweep per unit of Speed, over the root of the sweep's\n// width in p, so a wide Window sweeps faster in p but not in proportion.\nconst RATE = 0.0657;\n// Crossing comes this many seconds after the start, at Speed 2.\nconst LEAD = 2.7;\n\n// Union-find with union by size and path halving.\nfunction find(par, i) {\n  while (par[i] !== i) {\n    const g = par[par[i]];\n    par[i] = g;\n    i = g;\n  }\n  return i;\n}\n\nfunction join(par, sz, a, b) {\n  a = find(par, a);\n  b = find(par, b);\n  if (a === b) return;\n  if (sz[a] \u003c sz[b]) {\n    const t = a;\n    a = b;\n    b = t;\n  }\n  par[b] = a;\n  sz[a] += sz[b];\n}\n\nfunction hash(i) {\n  let h = imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h ^= h >>> 13;\n  h = imul(h, 0xc2b2ae35);\n  h ^= h >>> 16;\n  return (h >>> 0) / 4294967296;\n}\n\n// p*, the lattice's own crossing point: open the sites one at a time in the\n// order of their numbers, as Newman and Ziff do, with the top row joined to\n// one extra node and the bottom row to another, and stop when the two meet.\n// On a 64-wide strip it lands a few hundredths either side of p_c; the\n// study's seed gives 0.6038.\nfunction threshold(P) {\n  const { u, par, sz } = P;\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => u[a] - u[b]);\n  const on = new Uint8Array(N);\n  (par[N] = N), (par[N + 1] = N + 1), (sz[N] = sz[N + 1] = 1);\n  for (const i of order) {\n    (on[i] = 1), (par[i] = i), (sz[i] = 1);\n    const x = i % W, y = (i / W) | 0;\n    if (x > 0 && on[i - 1]) join(par, sz, i, i - 1);\n    if (x \u003c W - 1 && on[i + 1]) join(par, sz, i, i + 1);\n    if (y === 0) join(par, sz, i, N);\n    else if (on[i - W]) join(par, sz, i, i - W);\n    if (y === H - 1) join(par, sz, i, N + 1);\n    else if (on[i + W]) join(par, sz, i, i + W);\n    if (find(par, N) === find(par, N + 1)) return u[i];\n  }\n  return 1;\n}\n\nfunction lattice(P) {\n  for (let i = 0; i \u003c N; i++) P.u[i] = Math.random();\n  P.pstar = threshold(P);\n  P.id.fill(-1);\n  (P.span = false), (P.soft = 1);\n}\n\n// The sweep runs from W below p_c (or below p*, on a lattice that crosses\n// early) to 0.3 W above p*, so every rise ends in a crossing. Returns the\n// phase speed.\nfunction sweep(P, win, speed) {\n  P.lo = min(PC, P.pstar) - win;\n  P.hi = P.pstar + 0.3 * win;\n  return (RATE * speed) / sqrt(P.hi - P.lo);\n}\n\n// Puts the phase LEAD seconds before the crossing at the given Window and\n// Speed. p = lo + (hi - lo)(1 - cos phase) / 2.\nfunction aim(P, win, speed) {\n  const w = sweep(P, win, speed);\n  P.phase = acos(cl(1 - (2 * (P.pstar - P.lo)) / (P.hi - P.lo), -1, 1)) - LEAD * w;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N + 2), F = () => new Float32Array(N);\n  const P = (params.s = {\n    u: F(), jit: F(), sat: F(), glow: F(), cr: F(), cg: F(), cb: F(),\n    par: I(), sz: I(), root: I(), id: I(), idSize: I(), idHue: F(),\n    best: I(), bestS: I(), muSite: I(), rid: I(), owner: I(), prev: I(), queue: I(), path: I(), pathK: I().fill(-1),\n    flag: new Uint8Array(N), used: new Uint8Array(N),\n    pathLen: 0, cur: 0, maxSize: 1, spanRoot: -1, flash: 0, pulse: 0, p: 0.5, pstar: PC, dt: 1 / 30,\n    hue: 0, speed: 2, win: 0.04, small: 0.06, soft: 1, phase: 0, span: false, lo: 0.55, hi: 0.62,\n  });\n  // A fixed tint per LED: hue off by up to 0.05 and saturation 0.6 to 0.98.\n  for (let i = 0; i \u003c N; i++) (P.jit[i] = (hash(i + 7919) - 0.5) * 0.1), (P.sat[i] = 0.6 + 0.38 * hash(i + 104729));\n  lattice(P);\n  // The opening is aimed for Window 0.04 and Speed 2 whatever the knobs say,\n  // so a faster Speed crosses sooner and a wider Window starts further down.\n  aim(P, 0.04, 2);\n}\n\n// Labels the clusters at the current p and hands each one a colour. A\n// cluster's colour is an id with a hue. When clusters merge, the merged one\n// keeps the id of whichever part was biggest a frame ago; when one splits,\n// the biggest piece keeps it and the rest take fresh ids, hued from their\n// lowest-numbered site. So the big clusters hold their colour through the\n// whole sweep and only the small ones change.\nfunction label(P) {\n  const { u, par, sz, root, flag, muSite, best, bestS, rid, owner, used, id, idSize, idHue, p } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (u[i] \u003c p) (par[i] = i), (sz[i] = 1);\n    else par[i] = -1;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    if (par[i] \u003c 0) continue;\n    if (i % W && par[i - 1] >= 0) join(par, sz, i, i - 1);\n    if (i >= W && par[i - W] >= 0) join(par, sz, i, i - W);\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const r = par[i] \u003c 0 ? -1 : find(par, i);\n    root[i] = r;\n    if (r === i) (flag[i] = 0), (muSite[i] = i), (best[i] = -1), (bestS[i] = -1);\n  }\n  // Which rows each cluster touches (1 top, 2 bottom), its lowest site, and\n  // of the ids its sites wore last frame, the one whose cluster was biggest.\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r \u003c 0) continue;\n    if (i \u003c W) flag[r] |= 1;\n    if (i >= N - W) flag[r] |= 2;\n    if (u[i] \u003c u[muSite[r]]) muSite[r] = i;\n    const a = id[i];\n    if (a >= 0 && idSize[a] > bestS[r]) (bestS[r] = idSize[a]), (best[r] = a);\n  }\n  owner.fill(-1);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && (owner[c] \u003c 0 || sz[r] > sz[owner[c]])) owner[c] = r;\n  }\n  used.fill(0);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && owner[c] === r) (rid[r] = c), (used[c] = 1);\n    else rid[r] = -1;\n  }\n  let big = 1, span = -1;\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    if (rid[r] \u003c 0) {\n      while (used[P.cur]) P.cur = (P.cur + 1) % N;\n      (rid[r] = P.cur), (used[P.cur] = 1), (idHue[P.cur] = hash(muSite[r]) - 0.5);\n    }\n    idSize[rid[r]] = sz[r];\n    if (sz[r] > big) big = sz[r];\n    if (flag[r] === 3 && (span \u003c 0 || sz[r] > sz[span])) span = r;\n  }\n  for (let i = 0; i \u003c N; i++) id[i] = root[i] \u003c 0 ? -1 : rid[root[i]];\n  P.maxSize = big;\n  P.spanRoot = span;\n}\n\n// The shortest open path from the top row to the bottom row inside the\n// crossing cluster: a breadth-first search from all its top-row sites at\n// once, stopped at the first bottom-row site it reaches.\nfunction shortest(P, R) {\n  const { root, prev, queue, pathK, path } = P;\n  for (let j = 0; j \u003c P.pathLen; j++) pathK[path[j]] = -1;\n  P.pathLen = 0;\n  if (R \u003c 0) return;\n  prev.fill(-2);\n  let qh = 0, qt = 0, end = -1;\n  for (let x = 0; x \u003c W; x++) if (root[x] === R) (prev[x] = -1), (queue[qt++] = x);\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i >= N - W) {\n      end = i;\n      break;\n    }\n    const x = i % W;\n    let n = i + W;\n    if (root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - 1;\n    if (x > 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i + 1;\n    if (x \u003c W - 1 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - W;\n    if (n >= 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n  }\n  let len = 0;\n  for (let i = end; i >= 0; i = prev[i]) len++;\n  let j = len;\n  for (let i = end; i >= 0; i = prev[i]) (path[--j] = i), (pathK[i] = j);\n  P.pathLen = len;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0.04, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.win = cl(k[2], 0.04, 0.2);\n  P.small = cl(k[3], -1, 1);\n  // K1: a fresh lattice, crossed 2.7 s from now at the current knobs.\n  if (input.btnPressed && input.btnPressed[0]) lattice(P), aim(P, P.win, P.speed);\n  P.phase += sweep(P, P.win, P.speed) * d;\n  P.p = P.lo + ((P.hi - P.lo) * (1 - cos(P.phase))) / 2;\n  label(P);\n  // The flash comes on the frame a cluster first joins top to bottom and\n  // fades in 0.6 s; the gold stays while it spans and fades in 0.35 s after.\n  const spanning = P.spanRoot >= 0;\n  if (spanning && !P.span) P.flash = 1;\n  P.span = spanning;\n  P.flash *= exp(-d / 0.6);\n  P.soft *= exp(-d / 0.5);\n  P.pulse += (30 + 25 * P.speed) * d;\n  const fall = exp(-d / 0.35), { root, flag, glow } = P;\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r >= 0 && flag[r] === 3) glow[i] = 1;\n    else glow[i] *= fall;\n  }\n  shortest(P, P.spanRoot);\n  P.dt = d;\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { u, root, id, sz, idHue, jit, sat, glow, pathK, cr, cg, cb, p } = P;\n  const gold = 0.125 + P.hue, sm = P.small, fl = P.flash;\n  // Small: brightness lo + (1 - lo) f^gam, f = log size / log largest size.\n  const lo = sm \u003c 0 ? 0.3 * (1 + sm) : 0.3 + 0.5 * sm, gam = sm \u003c 0 ? 1.2 - 2.8 * sm : 1.2;\n  const lb = 1 / log(max(2, P.maxSize));\n  // Each LED eases to its colour in 0.1 s, so a merge washes over a cluster\n  // instead of blinking; after a K1 tap, in 0.7 s.\n  const kk = 1 - exp(-P.dt / (0.1 + 0.6 * P.soft));\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    let R, G, B;\n    if (r \u003c 0) {\n      // A closed site keeps an ember under 20 of 255, brightest when its\n      // number is just above p and it is next to open.\n      const e = 1 - (u[i] - p) / (1 - p);\n      hsv(gold + 0.5 + jit[i], sat[i], 0.075 * e * e);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    } else {\n      // An open site burns brighter the longer it has been open, from 42% at\n      // u = p to full at u = 0, and comes up over its first 0.004 of p.\n      const f = log(sz[r]) * lb, v = lo + (1 - lo) * f ** gam;\n      const g = (0.42 + 0.58 * (1 - u[i] / p)) * cl((p - u[i]) / 0.004, 0, 1);\n      hsv(gold + 0.475 + 0.55 * idHue[id[i]] + jit[i], sat[i], v * g);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = glow[i];\n      if (w > 0.002) {\n        hsv(gold + 0.4 * jit[i], (0.4 + 0.45 * sat[i]) * (1 - fl), (0.6 + 0.38 * g) * (1 - fl) + fl);\n        (R += (C[0] - R) * w), (G += (C[1] - G) * w), (B += (C[2] - B) * w);\n      }\n      // The shortest path: white, with a drop every 48 sites running down it.\n      const j = pathK[i];\n      if (j >= 0) {\n        const q = (((P.pulse - j) % 48) + 48) % 48, b = 0.65 + 0.35 * max(0, 1 - q / 14);\n        (R += (1 - R) * b), (G += (0.97 - G) * b), (B += (0.9 - B) * b);\n      }\n    }\n    cr[i] += (R * 255 - cr[i]) * kk;\n    cg[i] += (G * 255 - cg[i]) * kk;\n    cb[i] += (B * 255 - cb[i]) * kk;\n    display.setPixel(i % W, (i / W) | 0, cr[i], cg[i], cb[i]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle."},{"name":"Speed","min":0.2,"max":3,"about":"How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s."},{"name":"Window","min":0.04,"max":0.2,"about":"How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site."},{"name":"Small","min":-1,"max":1,"about":"How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour."}],"start":[0,2,0.04,0.06],"measures":{"motion":0.076,"detail":0.3535,"edges":0.6496,"complexity":2.5378,"coverage":0.6081,"colour":0.3525,"drift":0.1555},"knobResponse":[0.2138,0.2514,0.1582,0.0547]},{"slug":"perron-tree","title":"Perron Tree","family":"geometry","round":29,"note":"키 120 LED 삼각형을 2^n 조각으로 잘라 페론처럼 한 단씩 겹쳐 밀면, 모든 방향을 품은 채 넓이가 30% 로 줄어든 나무가 돼요. 흰 바늘이 모든 방향을 돌며 싹에서 싹으로 건너뛰어요. K3 은 단 수(32~256 조각)이고 K1 을 누르면 삼각형부터 다시 지어요.","idea":"A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.","buttons":"K1 tap starts again from the single triangle.","code":"// ===== Patternflow pattern =====\n// Title:   Perron Tree\n// Family:  geometry\n// Idea:    A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kakeya needle problem (Sōichi Kakeya, 1917), Besicovitch set drawn as Oskar Perron's tree (1928), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1\n//\n// Knob 1: Hue. Turns the sweep of colours that marks each sliver's direction round the wheel.\n// Knob 2: Speed. How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three.\n// Knob 3: Depth. How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8.\n// Knob 4: Slide. How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was.\n// Buttons: K1 tap starts again from the single triangle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, cos, abs, pow, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The triangle: base on the bottom edge, BW LEDs wide, apex HT LEDs up.\nconst BW = 60, HT = 120, Y0 = 128, MAXN = 8, MAXM = 1 \u003c\u003c MAXN;\n// How much of the blurred light comes back as glow (the blur sums to 81).\nconst GLOW = 0.22 / 81;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0];\n  out[o + 1] = c[1];\n  out[o + 2] = c[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    lam: 0, hold: 0, phase: 0, needle: 0, n: 5, g: 0.8, hue: 0,\n    acc: new Float32Array(N * 3), trail: new Float32Array(N), fade: 1, blo: new Float32Array(N * 3), sh: new Float32Array(MAXM), tj: new Float32Array(MAXN + 1), dur: new Float32Array(MAXN + 1),\n    col: new Float32Array(MAXM * 3),\n  };\n}\n\n// Perron's slides. At level j the base pieces pair up in groups of 2^j and\n// the right half of each group slides left by tj[j]: first closing the gap\n// its heart left at the level before, then a further 2(1 - g) of its half\n// base, so the two halves cross at 2g - 1 of the group triangle's height and\n// fork into two sprouts above it. What lies below is the group's heart, its\n// triangle shrunk by g^j toward its left corner, and the next level slides\n// hearts the same way. (Stein's write-up of Schoenberg's version.)\nfunction slides(P, n, g) {\n  const w = BW / (1 \u003c\u003c n);\n  for (let j = 1; j \u003c= n; j++) {\n    const half = w * (1 \u003c\u003c (j - 1)), s = pow(g, j - 1);\n    P.tj[j] = half * (1 - s) + 2 * (1 - g) * s * half;\n  }\n  // Seconds per level at Speed 2: the first levels move a fraction of an\n  // LED and go by quickly, the last ones take their time.\n  for (let j = 1; j \u003c= n; j++) P.dur[j] = 0.3 + 1.7 * pow(P.tj[j] / P.tj[n], 0.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) / 2;\n  P.hue = cl(k[0], 0, 1);\n  const n = cl(round(k[2]), 5, MAXN), g = 0.8 - 0.12 * cl(k[3], -1, 1);\n  if (n !== P.n || abs(g - P.g) > 1e-4) {\n    // Keep the same share of the build when the depth changes.\n    const frac = P.lam / P.n;\n    P.n = n;\n    P.g = g;\n    P.lam = frac * n;\n  }\n  slides(P, P.n, P.g);\n  if (input.btnPressed && input.btnPressed[0]) (P.phase = 0), (P.lam = 0), (P.hold = 0);\n  // Build level by level, hold the tree, take it apart again from the top\n  // level down at twice the pace, rest on the whole triangle, and again.\n  if (P.phase === 0) {\n    P.lam += d / P.dur[min(P.n, floor(P.lam) + 1)];\n    if (P.lam >= P.n) (P.lam = P.n), (P.phase = 1), (P.hold = 0);\n  } else if (P.phase === 1) {\n    if ((P.hold += d) > 6) P.phase = 2;\n  } else if (P.phase === 2) {\n    P.lam -= (2 * d) / P.dur[cl(Math.ceil(P.lam), 1, P.n)];\n    if (P.lam \u003c= 0) (P.lam = 0), (P.phase = 3), (P.hold = 0);\n  } else if ((P.hold += d) > 1.2) P.phase = 0;\n  P.needle += d * 0.11;\n  P.fade = exp(-cl(dt || 0, 0, 0.1) / 0.12);\n}\n\n// One row of one sliver into the light buffer: the span [l, r) at row y.\n// A span under an LED wide is drawn one LED wide and dimmer, so the sprouts\n// taper in light rather than vanish between LEDs.\nfunction span(acc, y, l, r, cr, cg, cb) {\n  let wd = r - l, k = 1;\n  if (wd \u003c 1) {\n    const c = (l + r) / 2;\n    k = sqrt(max(wd, 0));\n    (l = c - 0.5), (r = c + 0.5), (wd = 1);\n  }\n  const x0 = max(0, floor(l)), x1 = min(W - 1, floor(r - 1e-6));\n  for (let x = x0, p = (y * W + x0) * 3; x \u003c= x1; x++, p += 3) {\n    const cov = (min(r, x + 1) - max(l, x)) * k;\n    if (cov \u003c= 0) continue;\n    acc[p] += cr * cov;\n    acc[p + 1] += cg * cov;\n    acc[p + 2] += cb * cov;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, M = 1 \u003c\u003c n, w = BW / M, acc = P.acc, sh = P.sh, col = P.col;\n  acc.fill(0);\n  // How far each level has slid: level j runs while lam goes from j-1 to j.\n  let lo = 1e9, hi = -1e9;\n  for (let i = 0; i \u003c M; i++) {\n    let s = 0;\n    for (let j = 1; j \u003c= n; j++) if ((i >> (j - 1)) & 1) s -= P.tj[j] * sm(P.lam - (j - 1));\n    sh[i] = s;\n    lo = min(lo, s + i * w, s + BW / 2);\n    hi = max(hi, s + (i + 1) * w, s + BW / 2);\n  }\n  // Keep the whole figure centred as it slides.\n  const ox = W / 2 - (lo + hi) / 2;\n  // Each sliver's colour from its direction, the hue sweeping 0.8 of the wheel\n  // from one side of the triangle to the other.\n  // One sliver alone tones to about 140 of 255, two to 200, four near white.\n  for (let i = 0; i \u003c M; i++) hsv(P.hue + 0.5 + (0.8 * (i + 0.5)) / M, 0.85, 0.5, col, i * 3);\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT;\n    if (f \u003c 0 || f > 1) continue;\n    for (let i = 0; i \u003c M; i++) {\n      const a = ox + sh[i] + BW / 2, l = ox + sh[i] + i * w, r = l + w;\n      span(acc, y, l + (a - l) * f, r + (a - r) * f, col[i * 3], col[i * 3 + 1], col[i * 3 + 2]);\n    }\n  }\n  // The needle: a segment the height of the triangle, swinging through every\n  // direction between its sides and back. Its direction picks the base point\n  // it stands on, and that point the sliver whose sprout holds it.\n  const sw = 0.5 - 0.5 * cos(P.needle * 2 * PI), b = sw * BW, i = min(M - 1, floor(b / w));\n  const bx = ox + sh[i] + b, ax = ox + sh[i] + BW / 2, tr = P.trail, fd = P.fade;\n  // Its light fades over about a tenth of a second, which softens each hop.\n  for (let p = 0; p \u003c N; p++) tr[p] *= fd;\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT, x = bx + (ax - bx) * f;\n    for (let xx = max(0, floor(x - 2)); xx \u003c= min(W - 1, floor(x + 2)); xx++) {\n      const dd = abs(xx + 0.5 - x), wgt = dd \u003c 0.5 ? 1 : dd \u003c 1.5 ? 0.9 * (1.5 - dd) : 0.12 * (2.5 - dd), p = y * W + xx;\n      if (wgt > tr[p]) tr[p] = wgt;\n    }\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const v = tr[p];\n    if (v \u003c 0.01) continue;\n    acc[q] += 1.6 * v;\n    acc[q + 1] += 1.55 * v;\n    acc[q + 2] += 1.4 * v;\n  }\n  // A soft glow round everything bright: a 5 by 5 blur, about a fifth of it\n  // added back, so the thin sprouts read from a few metres away.\n  const blo = P.blo;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W * 3; x \u003c W; x++, p += 3)\n      for (let c = 0; c \u003c 3; c++) blo[p + c] = (x > 1 ? acc[p + c - 6] : 0) + 2 * (x > 0 ? acc[p + c - 3] : 0) + 3 * acc[p + c] + 2 * (x \u003c W - 1 ? acc[p + c + 3] : 0) + (x \u003c W - 2 ? acc[p + c + 6] : 0);\n  // Overlaps add up: light piles toward white where many slivers cross.\n  const R = W * 3, tone = (q, y) => {\n    const g = (y > 1 ? blo[q - 2 * R] : 0) + 2 * (y > 0 ? blo[q - R] : 0) + 3 * blo[q] + 2 * (y \u003c H - 1 ? blo[q + R] : 0) + (y \u003c H - 2 ? blo[q + 2 * R] : 0);\n    return 255 * (1 - exp(-1.6 * (acc[q] + GLOW * g)));\n  };\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, tone(p, y), tone(p + 1, y), tone(p + 2, y));\n}\n","layer":{"id":"layer-perron-tree","type":"code","name":"perron-tree","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Perron Tree\n// Family:  geometry\n// Idea:    A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kakeya needle problem (Sōichi Kakeya, 1917), Besicovitch set drawn as Oskar Perron's tree (1928), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1\n//\n// Knob 1: Hue. Turns the sweep of colours that marks each sliver's direction round the wheel.\n// Knob 2: Speed. How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three.\n// Knob 3: Depth. How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8.\n// Knob 4: Slide. How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was.\n// Buttons: K1 tap starts again from the single triangle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, cos, abs, pow, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The triangle: base on the bottom edge, BW LEDs wide, apex HT LEDs up.\nconst BW = 60, HT = 120, Y0 = 128, MAXN = 8, MAXM = 1 \u003c\u003c MAXN;\n// How much of the blurred light comes back as glow (the blur sums to 81).\nconst GLOW = 0.22 / 81;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0];\n  out[o + 1] = c[1];\n  out[o + 2] = c[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    lam: 0, hold: 0, phase: 0, needle: 0, n: 5, g: 0.8, hue: 0,\n    acc: new Float32Array(N * 3), trail: new Float32Array(N), fade: 1, blo: new Float32Array(N * 3), sh: new Float32Array(MAXM), tj: new Float32Array(MAXN + 1), dur: new Float32Array(MAXN + 1),\n    col: new Float32Array(MAXM * 3),\n  };\n}\n\n// Perron's slides. At level j the base pieces pair up in groups of 2^j and\n// the right half of each group slides left by tj[j]: first closing the gap\n// its heart left at the level before, then a further 2(1 - g) of its half\n// base, so the two halves cross at 2g - 1 of the group triangle's height and\n// fork into two sprouts above it. What lies below is the group's heart, its\n// triangle shrunk by g^j toward its left corner, and the next level slides\n// hearts the same way. (Stein's write-up of Schoenberg's version.)\nfunction slides(P, n, g) {\n  const w = BW / (1 \u003c\u003c n);\n  for (let j = 1; j \u003c= n; j++) {\n    const half = w * (1 \u003c\u003c (j - 1)), s = pow(g, j - 1);\n    P.tj[j] = half * (1 - s) + 2 * (1 - g) * s * half;\n  }\n  // Seconds per level at Speed 2: the first levels move a fraction of an\n  // LED and go by quickly, the last ones take their time.\n  for (let j = 1; j \u003c= n; j++) P.dur[j] = 0.3 + 1.7 * pow(P.tj[j] / P.tj[n], 0.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) / 2;\n  P.hue = cl(k[0], 0, 1);\n  const n = cl(round(k[2]), 5, MAXN), g = 0.8 - 0.12 * cl(k[3], -1, 1);\n  if (n !== P.n || abs(g - P.g) > 1e-4) {\n    // Keep the same share of the build when the depth changes.\n    const frac = P.lam / P.n;\n    P.n = n;\n    P.g = g;\n    P.lam = frac * n;\n  }\n  slides(P, P.n, P.g);\n  if (input.btnPressed && input.btnPressed[0]) (P.phase = 0), (P.lam = 0), (P.hold = 0);\n  // Build level by level, hold the tree, take it apart again from the top\n  // level down at twice the pace, rest on the whole triangle, and again.\n  if (P.phase === 0) {\n    P.lam += d / P.dur[min(P.n, floor(P.lam) + 1)];\n    if (P.lam >= P.n) (P.lam = P.n), (P.phase = 1), (P.hold = 0);\n  } else if (P.phase === 1) {\n    if ((P.hold += d) > 6) P.phase = 2;\n  } else if (P.phase === 2) {\n    P.lam -= (2 * d) / P.dur[cl(Math.ceil(P.lam), 1, P.n)];\n    if (P.lam \u003c= 0) (P.lam = 0), (P.phase = 3), (P.hold = 0);\n  } else if ((P.hold += d) > 1.2) P.phase = 0;\n  P.needle += d * 0.11;\n  P.fade = exp(-cl(dt || 0, 0, 0.1) / 0.12);\n}\n\n// One row of one sliver into the light buffer: the span [l, r) at row y.\n// A span under an LED wide is drawn one LED wide and dimmer, so the sprouts\n// taper in light rather than vanish between LEDs.\nfunction span(acc, y, l, r, cr, cg, cb) {\n  let wd = r - l, k = 1;\n  if (wd \u003c 1) {\n    const c = (l + r) / 2;\n    k = sqrt(max(wd, 0));\n    (l = c - 0.5), (r = c + 0.5), (wd = 1);\n  }\n  const x0 = max(0, floor(l)), x1 = min(W - 1, floor(r - 1e-6));\n  for (let x = x0, p = (y * W + x0) * 3; x \u003c= x1; x++, p += 3) {\n    const cov = (min(r, x + 1) - max(l, x)) * k;\n    if (cov \u003c= 0) continue;\n    acc[p] += cr * cov;\n    acc[p + 1] += cg * cov;\n    acc[p + 2] += cb * cov;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, M = 1 \u003c\u003c n, w = BW / M, acc = P.acc, sh = P.sh, col = P.col;\n  acc.fill(0);\n  // How far each level has slid: level j runs while lam goes from j-1 to j.\n  let lo = 1e9, hi = -1e9;\n  for (let i = 0; i \u003c M; i++) {\n    let s = 0;\n    for (let j = 1; j \u003c= n; j++) if ((i >> (j - 1)) & 1) s -= P.tj[j] * sm(P.lam - (j - 1));\n    sh[i] = s;\n    lo = min(lo, s + i * w, s + BW / 2);\n    hi = max(hi, s + (i + 1) * w, s + BW / 2);\n  }\n  // Keep the whole figure centred as it slides.\n  const ox = W / 2 - (lo + hi) / 2;\n  // Each sliver's colour from its direction, the hue sweeping 0.8 of the wheel\n  // from one side of the triangle to the other.\n  // One sliver alone tones to about 140 of 255, two to 200, four near white.\n  for (let i = 0; i \u003c M; i++) hsv(P.hue + 0.5 + (0.8 * (i + 0.5)) / M, 0.85, 0.5, col, i * 3);\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT;\n    if (f \u003c 0 || f > 1) continue;\n    for (let i = 0; i \u003c M; i++) {\n      const a = ox + sh[i] + BW / 2, l = ox + sh[i] + i * w, r = l + w;\n      span(acc, y, l + (a - l) * f, r + (a - r) * f, col[i * 3], col[i * 3 + 1], col[i * 3 + 2]);\n    }\n  }\n  // The needle: a segment the height of the triangle, swinging through every\n  // direction between its sides and back. Its direction picks the base point\n  // it stands on, and that point the sliver whose sprout holds it.\n  const sw = 0.5 - 0.5 * cos(P.needle * 2 * PI), b = sw * BW, i = min(M - 1, floor(b / w));\n  const bx = ox + sh[i] + b, ax = ox + sh[i] + BW / 2, tr = P.trail, fd = P.fade;\n  // Its light fades over about a tenth of a second, which softens each hop.\n  for (let p = 0; p \u003c N; p++) tr[p] *= fd;\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT, x = bx + (ax - bx) * f;\n    for (let xx = max(0, floor(x - 2)); xx \u003c= min(W - 1, floor(x + 2)); xx++) {\n      const dd = abs(xx + 0.5 - x), wgt = dd \u003c 0.5 ? 1 : dd \u003c 1.5 ? 0.9 * (1.5 - dd) : 0.12 * (2.5 - dd), p = y * W + xx;\n      if (wgt > tr[p]) tr[p] = wgt;\n    }\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const v = tr[p];\n    if (v \u003c 0.01) continue;\n    acc[q] += 1.6 * v;\n    acc[q + 1] += 1.55 * v;\n    acc[q + 2] += 1.4 * v;\n  }\n  // A soft glow round everything bright: a 5 by 5 blur, about a fifth of it\n  // added back, so the thin sprouts read from a few metres away.\n  const blo = P.blo;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W * 3; x \u003c W; x++, p += 3)\n      for (let c = 0; c \u003c 3; c++) blo[p + c] = (x > 1 ? acc[p + c - 6] : 0) + 2 * (x > 0 ? acc[p + c - 3] : 0) + 3 * acc[p + c] + 2 * (x \u003c W - 1 ? acc[p + c + 3] : 0) + (x \u003c W - 2 ? acc[p + c + 6] : 0);\n  // Overlaps add up: light piles toward white where many slivers cross.\n  const R = W * 3, tone = (q, y) => {\n    const g = (y > 1 ? blo[q - 2 * R] : 0) + 2 * (y > 0 ? blo[q - R] : 0) + 3 * blo[q] + 2 * (y \u003c H - 1 ? blo[q + R] : 0) + (y \u003c H - 2 ? blo[q + 2 * R] : 0);\n    return 255 * (1 - exp(-1.6 * (acc[q] + GLOW * g)));\n  };\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, tone(p, y), tone(p + 1, y), tone(p + 2, y));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the sweep of colours that marks each sliver's direction round the wheel."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three."},{"name":"Depth","min":5,"max":8,"about":"How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8."},{"name":"Slide","min":-1,"max":1,"about":"How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was."}],"start":[0,2,5,0.06],"measures":{"motion":0.2474,"detail":0.037,"edges":0.3794,"complexity":1.0174,"coverage":0.2747,"colour":0.1818,"drift":0.2212},"knobResponse":[0.075,0.1981,0.1861,0.1179]},{"slug":"photochromic","title":"Photochromic","family":"cosmetic","round":38,"note":"LED 마다 맨 폴리시이거나 펄 조각인 옅은 매니큐어 위로 보이지 않는 UV 손전등이 구불구불 쓸고 지나가면, 지나간 자리가 순식간에 짙은 보석 색으로 바뀌었다가 몇 초에 걸쳐 다시 옅어져요. K3 은 펄 조각을 한 LED 에서 네 LED 너비로 키워 굵은 글리터로 바꾸고, K1 을 누르면 지난번과 반대쪽으로 한 번 더 쓸어요.","idea":"A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.","buttons":"K1 tap sends a stroke now, running the other way from the last one.","code":"// ===== Patternflow pattern =====\n// Title:   Photochromic\n// Family:  cosmetic\n// Idea:    A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after photochromic nail polish, pale in the shade, that deepens under UV light and fades back [Beer-Lambert law, August Beer, 1852]\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1\n//\n// Knob 1: Hue. Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening.\n// Knob 2: Speed. At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds.\n// Knob 3: Flakes. The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter.\n// Knob 4: Fade. How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture.\n// Buttons: K1 tap sends a stroke now, running the other way from the last one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sin, exp, round, random, LN10, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Seconds at Speed 2: a stroke every PERIOD, crossing in SWEEP. The first\n// stroke of a fresh start begins at FIRST; the one before it, which ended\n// 8.4 seconds before the start, is run through when the pattern opens.\nconst PERIOD = 13, SWEEP = 2.4, FIRST = 2.2;\n// The torch: a soft spot of sigma SIG LEDs, weaving AMP LEDs either side of\n// the middle; the dye switches at KON per second where it is brightest.\nconst SIG = 15, AMP = 20, KON = 10;\n// Optical density of the switched dye, so the depth of colour goes as\n// 1 - 10^(-OD a) (Beer-Lambert): it holds dark while most of the dye is\n// still switched and lets go toward the end.\nconst OD = 2;\n// The fade, from a = 0.95 to the a where the colour is half gone.\nconst HALF_A = 1.856;\n// Opening hue: violet, not red.\nconst H0 = 0.76;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, flakes: 1, fade: 0.06, t: 0, begun: false, k: 0, tx: -99, ty: -99, on: 0,\n    a: new Float32Array(N), g: new Float32Array(N), ph: new Float32Array(N), om: new Float32Array(N),\n    size: 0, pale: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], pearl: [0, 0, 0], extra: -1,\n  };\n}\n\n// The flakes for a size, one glint per LED, every LED of a flake sharing\n// it: 1 catches the light, -1 is turned away and shades the polish under\n// it, 0 is bare polish. At size 1 every LED holds mica, 38% catching the\n// light, 22% turned away; larger flakes are fewer, 30% and 10%.\nfunction flakes(S, size) {\n  const { g, ph, om } = S;\n  const cw = Math.ceil(W / size), nc = cw * Math.ceil(H / size);\n  const cg = new Float32Array(nc), cp = new Float32Array(nc), co = new Float32Array(nc);\n  for (let c = 0; c \u003c nc; c++) {\n    const u = random();\n    if (size === 1) cg[c] = u \u003c 0.4 ? 0 : u \u003c 0.62 ? -1 : 1;\n    else cg[c] = u \u003c 0.6 ? 0 : u \u003c 0.7 ? -1 : 1;\n    cp[c] = random() * TAU;\n    co[c] = 0.8 + 0.7 * random();\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = floor(y / size) * cw + floor(x / size), i = y * W + x;\n      // Flakes three or four across lose their corners.\n      const ex = x % size === 0 || x % size === size - 1, ey = y % size === 0 || y % size === size - 1;\n      g[i] = size > 2 && ex && ey ? 0 : cg[c];\n      ph[i] = cp[c];\n      om[i] = co[c];\n    }\n  S.size = size;\n}\n\n// Where stroke k has the torch at progress s (0..1): strokes alternate down\n// and up the panel, weaving side to side, each a little different.\nfunction torchAt(S, k, s) {\n  const down = (k & 1) === 0, w = 2.4 + 0.5 * ((k * 0.618 + 10) % 1), ph = k * 2.4;\n  S.ty = down ? -30 + s * (H + 60) : H + 30 - s * (H + 60);\n  S.tx = W / 2 + AMP * sin(TAU * w * s + ph);\n}\n\n// Advance the dye by dt seconds of pattern time: switched by the torch at\n// KON times its intensity, back by the thermal fade.\nfunction dye(S, dt) {\n  const a = S.a, half = 4.5 * 3 ** S.fade, decay = exp((-HALF_A / half) * dt);\n  for (let i = 0; i \u003c N; i++) a[i] *= decay;\n  if (!S.on) return;\n  const R = 3 * SIG, x0 = max(0, floor(S.tx - R)), x1 = min(W - 1, Math.ceil(S.tx + R));\n  const y0 = max(0, floor(S.ty - R)), y1 = min(H - 1, Math.ceil(S.ty + R));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, I = exp(-(dx * dx + dy * dy) / (2 * SIG * SIG));\n      if (I \u003c 0.01) continue;\n      const i = y * W + x;\n      a[i] += (1 - a[i]) * (1 - exp(-KON * I * dt));\n    }\n}\n\n// Run the clock from t0 to t1 in steps, strokes switching on and off.\nfunction run(S, t0, t1, step) {\n  for (let t = t0; t \u003c t1 - 1e-9; t += step) {\n    const d = min(step, t1 - t), tm = t + d;\n    const k = floor((tm - FIRST) / PERIOD), s = (tm - FIRST - k * PERIOD) / SWEEP;\n    S.on = 0;\n    if (s \u003c= 1) {\n      S.on = 1;\n      S.k = k;\n      torchAt(S, k, s);\n    }\n    if (S.extra >= 0) {\n      const se = (tm - S.extra) / SWEEP;\n      if (se \u003c= 1) {\n        S.on = 1;\n        torchAt(S, S.k + 1, se);\n      } else S.extra = -1;\n    }\n    dye(S, d);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.flakes = cl(k[2], 1, 4);\n  S.fade = cl(k[3], -1, 1);\n  const size = round(S.flakes);\n  if (size !== S.size) flakes(S, size);\n  if (!S.begun) {\n    S.t = FIRST - PERIOD - 0.3;\n    run(S, S.t, 0, 0.1);\n    S.t = 0;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.extra \u003c 0) S.extra = S.t;\n  const step = (d * S.speed) / 2;\n  if (step > 0) run(S, S.t, S.t + step, step);\n  S.t += step;\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Red, orange, yellow and lime go brown or olive when dark: there the\n  // polish deepens to a bright full colour instead, from a cream.\n  const dw = min(abs(hh - 0.12), 1 - abs(hh - 0.12)), warm = 1 - sm(0.12, 0.24, dw);\n  hsv(h, 0.32 - 0.1 * warm, 0.52 + 0.04 * warm, S.pale);\n  hsv(h + 0.015 * (1 - warm), 0.92 + 0.06 * warm, 0.11 + 0.5 * warm, S.deep);\n  hsv(h, 0.6 - 0.1 * warm, 0.5 + 0.4 * warm, S.tint);\n  hsv(h, 0.12, 1, S.pearl);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { a, g, ph, om, pale, deep, tint, pearl } = S, t = S.t, k = -OD * LN10, norm = 1 - exp(k);\n  const sig2 = 2 * (SIG * 1.2) ** 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // How deep the colour is: Beer-Lambert in the switched dye.\n      const D = (1 - exp(k * a[i])) / norm;\n      let r = pale[0] + (deep[0] - pale[0]) * D;\n      let gg = pale[1] + (deep[1] - pale[1]) * D;\n      let b = pale[2] + (deep[2] - pale[2]) * D;\n      // The flake: pearl white in the pale polish; under the dark dye the light\n      // crosses the dye twice on its way to the flake and back, so the\n      // flake goes dim and takes the colour. Now and then a flake turns half\n      // away from the room light.\n      const gl = g[i] * (sin(ph[i] + t * om[i]) > -0.8 ? 1 : 0.5);\n      if (gl \u003c 0) {\n        r *= 1 + 0.3 * gl;\n        gg *= 1 + 0.3 * gl;\n        b *= 1 + 0.3 * gl;\n      } else if (gl > 0) {\n        r += (pearl[0] + (tint[0] - pearl[0]) * D - r) * gl;\n        gg += (pearl[1] + (tint[1] - pearl[1]) * D - gg) * gl;\n        b += (pearl[2] + (tint[2] - pearl[2]) * D - b) * gl;\n      }\n      // The torch's violet spill.\n      if (S.on) {\n        const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, v = 0.12 * exp(-(dx * dx + dy * dy) / sig2);\n        r += v * 0.45;\n        b += v;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, gg)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-photochromic","type":"code","name":"photochromic","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Photochromic\n// Family:  cosmetic\n// Idea:    A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after photochromic nail polish, pale in the shade, that deepens under UV light and fades back [Beer-Lambert law, August Beer, 1852]\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1\n//\n// Knob 1: Hue. Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening.\n// Knob 2: Speed. At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds.\n// Knob 3: Flakes. The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter.\n// Knob 4: Fade. How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture.\n// Buttons: K1 tap sends a stroke now, running the other way from the last one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sin, exp, round, random, LN10, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Seconds at Speed 2: a stroke every PERIOD, crossing in SWEEP. The first\n// stroke of a fresh start begins at FIRST; the one before it, which ended\n// 8.4 seconds before the start, is run through when the pattern opens.\nconst PERIOD = 13, SWEEP = 2.4, FIRST = 2.2;\n// The torch: a soft spot of sigma SIG LEDs, weaving AMP LEDs either side of\n// the middle; the dye switches at KON per second where it is brightest.\nconst SIG = 15, AMP = 20, KON = 10;\n// Optical density of the switched dye, so the depth of colour goes as\n// 1 - 10^(-OD a) (Beer-Lambert): it holds dark while most of the dye is\n// still switched and lets go toward the end.\nconst OD = 2;\n// The fade, from a = 0.95 to the a where the colour is half gone.\nconst HALF_A = 1.856;\n// Opening hue: violet, not red.\nconst H0 = 0.76;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, flakes: 1, fade: 0.06, t: 0, begun: false, k: 0, tx: -99, ty: -99, on: 0,\n    a: new Float32Array(N), g: new Float32Array(N), ph: new Float32Array(N), om: new Float32Array(N),\n    size: 0, pale: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], pearl: [0, 0, 0], extra: -1,\n  };\n}\n\n// The flakes for a size, one glint per LED, every LED of a flake sharing\n// it: 1 catches the light, -1 is turned away and shades the polish under\n// it, 0 is bare polish. At size 1 every LED holds mica, 38% catching the\n// light, 22% turned away; larger flakes are fewer, 30% and 10%.\nfunction flakes(S, size) {\n  const { g, ph, om } = S;\n  const cw = Math.ceil(W / size), nc = cw * Math.ceil(H / size);\n  const cg = new Float32Array(nc), cp = new Float32Array(nc), co = new Float32Array(nc);\n  for (let c = 0; c \u003c nc; c++) {\n    const u = random();\n    if (size === 1) cg[c] = u \u003c 0.4 ? 0 : u \u003c 0.62 ? -1 : 1;\n    else cg[c] = u \u003c 0.6 ? 0 : u \u003c 0.7 ? -1 : 1;\n    cp[c] = random() * TAU;\n    co[c] = 0.8 + 0.7 * random();\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = floor(y / size) * cw + floor(x / size), i = y * W + x;\n      // Flakes three or four across lose their corners.\n      const ex = x % size === 0 || x % size === size - 1, ey = y % size === 0 || y % size === size - 1;\n      g[i] = size > 2 && ex && ey ? 0 : cg[c];\n      ph[i] = cp[c];\n      om[i] = co[c];\n    }\n  S.size = size;\n}\n\n// Where stroke k has the torch at progress s (0..1): strokes alternate down\n// and up the panel, weaving side to side, each a little different.\nfunction torchAt(S, k, s) {\n  const down = (k & 1) === 0, w = 2.4 + 0.5 * ((k * 0.618 + 10) % 1), ph = k * 2.4;\n  S.ty = down ? -30 + s * (H + 60) : H + 30 - s * (H + 60);\n  S.tx = W / 2 + AMP * sin(TAU * w * s + ph);\n}\n\n// Advance the dye by dt seconds of pattern time: switched by the torch at\n// KON times its intensity, back by the thermal fade.\nfunction dye(S, dt) {\n  const a = S.a, half = 4.5 * 3 ** S.fade, decay = exp((-HALF_A / half) * dt);\n  for (let i = 0; i \u003c N; i++) a[i] *= decay;\n  if (!S.on) return;\n  const R = 3 * SIG, x0 = max(0, floor(S.tx - R)), x1 = min(W - 1, Math.ceil(S.tx + R));\n  const y0 = max(0, floor(S.ty - R)), y1 = min(H - 1, Math.ceil(S.ty + R));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, I = exp(-(dx * dx + dy * dy) / (2 * SIG * SIG));\n      if (I \u003c 0.01) continue;\n      const i = y * W + x;\n      a[i] += (1 - a[i]) * (1 - exp(-KON * I * dt));\n    }\n}\n\n// Run the clock from t0 to t1 in steps, strokes switching on and off.\nfunction run(S, t0, t1, step) {\n  for (let t = t0; t \u003c t1 - 1e-9; t += step) {\n    const d = min(step, t1 - t), tm = t + d;\n    const k = floor((tm - FIRST) / PERIOD), s = (tm - FIRST - k * PERIOD) / SWEEP;\n    S.on = 0;\n    if (s \u003c= 1) {\n      S.on = 1;\n      S.k = k;\n      torchAt(S, k, s);\n    }\n    if (S.extra >= 0) {\n      const se = (tm - S.extra) / SWEEP;\n      if (se \u003c= 1) {\n        S.on = 1;\n        torchAt(S, S.k + 1, se);\n      } else S.extra = -1;\n    }\n    dye(S, d);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.flakes = cl(k[2], 1, 4);\n  S.fade = cl(k[3], -1, 1);\n  const size = round(S.flakes);\n  if (size !== S.size) flakes(S, size);\n  if (!S.begun) {\n    S.t = FIRST - PERIOD - 0.3;\n    run(S, S.t, 0, 0.1);\n    S.t = 0;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.extra \u003c 0) S.extra = S.t;\n  const step = (d * S.speed) / 2;\n  if (step > 0) run(S, S.t, S.t + step, step);\n  S.t += step;\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Red, orange, yellow and lime go brown or olive when dark: there the\n  // polish deepens to a bright full colour instead, from a cream.\n  const dw = min(abs(hh - 0.12), 1 - abs(hh - 0.12)), warm = 1 - sm(0.12, 0.24, dw);\n  hsv(h, 0.32 - 0.1 * warm, 0.52 + 0.04 * warm, S.pale);\n  hsv(h + 0.015 * (1 - warm), 0.92 + 0.06 * warm, 0.11 + 0.5 * warm, S.deep);\n  hsv(h, 0.6 - 0.1 * warm, 0.5 + 0.4 * warm, S.tint);\n  hsv(h, 0.12, 1, S.pearl);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { a, g, ph, om, pale, deep, tint, pearl } = S, t = S.t, k = -OD * LN10, norm = 1 - exp(k);\n  const sig2 = 2 * (SIG * 1.2) ** 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // How deep the colour is: Beer-Lambert in the switched dye.\n      const D = (1 - exp(k * a[i])) / norm;\n      let r = pale[0] + (deep[0] - pale[0]) * D;\n      let gg = pale[1] + (deep[1] - pale[1]) * D;\n      let b = pale[2] + (deep[2] - pale[2]) * D;\n      // The flake: pearl white in the pale polish; under the dark dye the light\n      // crosses the dye twice on its way to the flake and back, so the\n      // flake goes dim and takes the colour. Now and then a flake turns half\n      // away from the room light.\n      const gl = g[i] * (sin(ph[i] + t * om[i]) > -0.8 ? 1 : 0.5);\n      if (gl \u003c 0) {\n        r *= 1 + 0.3 * gl;\n        gg *= 1 + 0.3 * gl;\n        b *= 1 + 0.3 * gl;\n      } else if (gl > 0) {\n        r += (pearl[0] + (tint[0] - pearl[0]) * D - r) * gl;\n        gg += (pearl[1] + (tint[1] - pearl[1]) * D - gg) * gl;\n        b += (pearl[2] + (tint[2] - pearl[2]) * D - b) * gl;\n      }\n      // The torch's violet spill.\n      if (S.on) {\n        const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, v = 0.12 * exp(-(dx * dx + dy * dy) / sig2);\n        r += v * 0.45;\n        b += v;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, gg)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds."},{"name":"Flakes","min":1,"max":4,"about":"The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter."},{"name":"Fade","min":-1,"max":1,"about":"How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture."}],"start":[0,2,1,0.06],"measures":{"motion":0.1311,"detail":0.2098,"edges":0.7508,"complexity":1.4701,"coverage":0.9752,"colour":0.1059,"drift":0.3646},"knobResponse":[0.1323,0.3042,0.2265,0.1945]},{"slug":"pin-art","title":"Pin Art","family":"toy","round":22,"note":"핀 아트 장난감을 앞에서 봐요. 엇갈린 격자의 강철 핀 4096개가 패널을 채우고, 뒤에서 펼친 손이 눌러 들어오면 밀려 나온 핀만 비스듬한 등빛을 받아 빛나요. 장난감을 기울이면 핀이 물결치며 평평해지고 열쇠가 다음으로 눌러 들어와요.","idea":"A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.","buttons":"K1 tap tilts the toy flat now and presses the next object in.","code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","layer":{"id":"layer-pin-art","type":"code","name":"pin-art","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower."},{"name":"Object","min":0,"max":4,"about":"What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one."},{"name":"Light","min":0,"max":1,"about":"Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.0617,"detail":0.3463,"edges":0.9544,"complexity":1.3204,"coverage":0.7864,"colour":0.2041,"drift":0.3573},"knobResponse":[0.1597,0.2367,0.0944,0.0463]},{"slug":"pint","title":"Pint","family":"cells","round":18,"note":"탭이 패널 높이만 한 파인트 잔에 맥주를 따르면, 뿌연 맥주가 바닥부터 맑아지고 기포 줄이 오르는 동안 거품 머리가 밝은 테두리의 다각형 셀로 굵어져요. 누군가 다섯 모금에 나눠 마시며 잔에 레이싱 고리를 남기고, 바닥이 보이면 다시 따라요. K1 은 라거에서 앰버 에일, 레드 에일을 지나 스타우트까지 맥주를 바꾸고, 스타우트는 크림빛 서지가 바닥부터 검게 가라앉아요.","idea":"A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-pint","type":"code","name":"pint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Beer","min":0,"max":1,"about":"What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower."},{"name":"Fizz","min":4,"max":20,"about":"How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20."},{"name":"Head","min":0,"max":1,"about":"How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells."}],"start":[0,2,4,0.06],"measures":{"motion":0.1411,"detail":0.0425,"edges":0.5054,"complexity":1.0501,"coverage":0.678,"colour":0.3448,"drift":0.1113},"knobResponse":[0.1725,0.2433,0.0546,0.0641]},{"slug":"pinwheel-tiling","title":"Pinwheel Tiling","family":"geometry","round":32,"note":"다리가 1 과 2 인 직각삼각형 타일링 속으로 끝없이 들어가요. 3.6초마다 타일마다 이음매가 옅게 나타나 다섯 조각으로 갈라지고, 그 가운데 하나는 부모에서 26.6° 돌아가 있어요. 타일을 긴 다리의 방향으로 칠해서, 같은 색 무리가 서로 다른 각도로 기운 것이 보여요.","idea":"The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.","buttons":"K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.","code":"// ===== Patternflow pattern =====\n// Title:   Pinwheel Tiling\n// Family:  geometry\n// Idea:    The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: pinwheel tiling (John Conway and Charles Radin, 1994), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1\n//\n// Knob 1: Hue. Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other.\n// Knob 2: Speed. At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4.\n// Knob 3: Size. How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider.\n// Knob 4: Paint. At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers.\n// Buttons: K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5;\nconst { floor, sqrt, cos, sin, atan, atan2, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst S5 = sqrt(5), LS5 = log(S5), TAU = 2 * PI, A2 = atan(0.5);\n\n// The tile in its own frame: small angle at (0,0), right angle at (2,0),\n// large angle at (2,1). Conway's cut: the altitude from the right angle takes\n// one copy off the short side; the larger part is cut from the midpoint of\n// its hypotenuse to its right angle and to the midpoints of its two legs,\n// four copies in two mirror pairs. Each child is [small, right, large] in the\n// parent's frame. Children 2 and 3 keep the parent's hand, 0, 1 and 4 are\n// mirrored. Cut with the midpoint split instead, the tiles keep to eight\n// directions; with this cut the count grows with every level.\nconst KIDS = [\n  [[2, 0], [1.6, 0.8], [2, 1]],\n  [[1, 0], [1.8, 0.4], [2, 0]],\n  [[1, 0], [1.8, 0.4], [1.6, 0.8]],\n  [[1.6, 0.8], [0.8, 0.4], [1, 0]],\n  [[0, 0], [0.8, 0.4], [1, 0]],\n].map(([a, b, c]) => {\n  const ux = (b[0] - a[0]) / 2, uy = (b[1] - a[1]) / 2, vx = c[0] - b[0], vy = c[1] - b[1], det = ux * vy - vx * uy;\n  return { ax: a[0], ay: a[1], ux, uy, vx, vy, i00: vy / det, i01: -vx / det, i10: -uy / det, i11: ux / det, flip: det \u003c 0 };\n});\n\n// Points the zoom can dive into, each the fixed point of a chain of children\n// that keeps the hand: child 2 alone, a copy a fifth of the area turned by\n// arctan(1/2); child 3 twice; 2 then 3; 3 then 2. P is the chain's length in\n// levels, R its turn.\nconst DIVES = [\n  { zx: 1.5, zy: 0.5, P: 1, R: A2 },\n  { zx: 1.2, zy: 0.4, P: 2, R: 2 * A2 },\n  { zx: 1.375, zy: 0.375, P: 2, R: 2 * A2 - PI },\n  { zx: 1.125, zy: 0.375, P: 2, R: 2 * A2 - PI },\n];\nconst N0 = 8;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  params.s = {\n    z: 0, hue: 0, speed: 2, size: 13, paint: 0.06, dive: 0, prev: -1, fade: 1,\n    lut: new Float32Array(256 * 3 * 4), lutHue: NaN, out: new Float32Array(W * H * 3), tmp: new Float32Array(W * H * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = cl(k[2], 13, 40);\n  P.paint = cl(k[3], 0, 1);\n  P.z += d * P.speed * 0.14;\n  if (P.fade \u003c 1) P.fade = Math.min(1, P.fade + d / 0.8);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.prev = P.dive;\n    P.dive = (P.dive + 1) % DIVES.length;\n    P.fade = 0;\n  }\n}\n\n// Draws one dive into buf: RGB 0..255 per LED.\nfunction render(P, D, buf) {\n  const u = P.z % D.P, S = Math.pow(S5, N0 + u), phi = -D.R * (u / D.P);\n  const cp = cos(-phi) / S, sp = sin(-phi) / S;\n  // Depth d tiles span S * sqrt5^(1-d) LEDs along the hypotenuse; the deepest\n  // drawn is the last one at least Size long, and it fades in.\n  const lam = N0 + u + 1 - log(P.size) / LS5, dn = floor(lam), al = sm(0, 0.3, lam - dn), ac = sm(0.28, 0.42, lam - dn);\n  // Each level's seam: its scale on the panel, how far it reaches from the\n  // edge (a little wider for the older, larger tiles) and how dark it is.\n  const sig = new Float32Array(dn + 1), reach = new Float32Array(dn + 1), dark = new Float32Array(dn + 1);\n  for (let d = 0; d \u003c= dn; d++) {\n    sig[d] = S * Math.pow(S5, -d);\n    reach[d] = 1.1 + 0.45 * sm(1, 2.5, lam - d);\n    dark[d] = d === dn ? al : 1;\n  }\n  const lut = P.lut, paint = P.paint;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - CX, dy = y - CY;\n      let qx = D.zx + cp * dx - sp * dy, qy = D.zy + sp * dx + cp * dy;\n      let m00 = 1, m01 = 0, m10 = 0, m11 = 1, flip = false;\n      let a0 = 0, f0 = false, seam = 0;\n      for (let d = 1; d \u003c= dn; d++) {\n        if (d === dn) (a0 = atan2(m10, m00)), (f0 = flip);\n        let best = -9, bi = 0, bx = 0, by = 0;\n        for (let i = 0; i \u003c 5; i++) {\n          const K = KIDS[i], rx = qx - K.ax, ry = qy - K.ay;\n          const tx = K.i00 * rx + K.i01 * ry, ty = K.i10 * rx + K.i11 * ry;\n          const mg = Math.min(ty, 2 - tx, (tx - 2 * ty) / S5);\n          if (mg > best) {\n            (best = mg), (bi = i), (bx = tx), (by = ty);\n            // The children do not overlap: one inside is the one.\n            if (mg > 0) break;\n          }\n        }\n        const K = KIDS[bi];\n        const n00 = m00 * K.ux + m01 * K.uy, n01 = m00 * K.vx + m01 * K.vy, n10 = m10 * K.ux + m11 * K.uy, n11 = m10 * K.vx + m11 * K.vy;\n        (m00 = n00), (m01 = n01), (m10 = n10), (m11 = n11), (flip = flip !== K.flip);\n        (qx = bx), (qy = by);\n        const sd = dark[d] * cl(reach[d] - best * sig[d], 0, 1);\n        if (sd > seam) seam = sd;\n      }\n      const a1 = atan2(m10, m00);\n      const o = (y * W + x) * 3;\n      // Colour of the tile one level up and of the newest tile, mixed.\n      tint(lut, a0 + phi, f0, paint);\n      const r0 = cr, g0 = cg, b0 = cb;\n      tint(lut, a1 + phi, flip, paint);\n      const r = r0 + (cr - r0) * ac, g = g0 + (cg - g0) * ac, b = b0 + (cb - b0) * ac;\n      const v = 1 - 0.94 * seam;\n      buf[o] = r * v;\n      buf[o + 1] = g * v;\n      buf[o + 2] = b * v;\n    }\n}\n\n// A tile's colour from the direction of its long leg on the panel and its\n// hand: four tables of 256 directions, by direction and by light, each for\n// both hands.\nlet cr = 0, cg = 0, cb = 0;\nfunction tint(lut, ang, flip, paint) {\n  let t = ang / TAU;\n  t -= floor(t);\n  const i = ((floor(t * 256) & 255) + (flip ? 256 : 0)) * 3, j = i + 1536;\n  cr = lut[i] + (lut[j] - lut[i]) * paint;\n  cg = lut[i + 1] + (lut[j + 1] - lut[i + 1]) * paint;\n  cb = lut[i + 2] + (lut[j + 2] - lut[i + 2]) * paint;\n}\n\nfunction buildLut(P) {\n  for (let i = 0; i \u003c 256; i++) {\n    const t = i / 256, lit = 0.5 + 0.5 * cos(t * TAU - 2.2);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 1, P.lut, i * 3);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 0.8, P.lut, (256 + i) * 3);\n    hsv(P.hue + 0.55, 0.55, 0.35 + 0.65 * lit, P.lut, (512 + i) * 3);\n    hsv(P.hue + 0.62, 0.85, 0.25 + 0.6 * lit, P.lut, (768 + i) * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const out = P.out;\n  render(P, DIVES[P.dive], out);\n  if (P.fade \u003c 1 && P.prev >= 0) {\n    render(P, DIVES[P.prev], P.tmp);\n    const f = sm(0, 1, P.fade), tmp = P.tmp;\n    for (let i = 0; i \u003c out.length; i++) out[i] = tmp[i] + (out[i] - tmp[i]) * f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","layer":{"id":"layer-pinwheel-tiling","type":"code","name":"pinwheel-tiling","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pinwheel Tiling\n// Family:  geometry\n// Idea:    The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: pinwheel tiling (John Conway and Charles Radin, 1994), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1\n//\n// Knob 1: Hue. Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other.\n// Knob 2: Speed. At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4.\n// Knob 3: Size. How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider.\n// Knob 4: Paint. At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers.\n// Buttons: K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5;\nconst { floor, sqrt, cos, sin, atan, atan2, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst S5 = sqrt(5), LS5 = log(S5), TAU = 2 * PI, A2 = atan(0.5);\n\n// The tile in its own frame: small angle at (0,0), right angle at (2,0),\n// large angle at (2,1). Conway's cut: the altitude from the right angle takes\n// one copy off the short side; the larger part is cut from the midpoint of\n// its hypotenuse to its right angle and to the midpoints of its two legs,\n// four copies in two mirror pairs. Each child is [small, right, large] in the\n// parent's frame. Children 2 and 3 keep the parent's hand, 0, 1 and 4 are\n// mirrored. Cut with the midpoint split instead, the tiles keep to eight\n// directions; with this cut the count grows with every level.\nconst KIDS = [\n  [[2, 0], [1.6, 0.8], [2, 1]],\n  [[1, 0], [1.8, 0.4], [2, 0]],\n  [[1, 0], [1.8, 0.4], [1.6, 0.8]],\n  [[1.6, 0.8], [0.8, 0.4], [1, 0]],\n  [[0, 0], [0.8, 0.4], [1, 0]],\n].map(([a, b, c]) => {\n  const ux = (b[0] - a[0]) / 2, uy = (b[1] - a[1]) / 2, vx = c[0] - b[0], vy = c[1] - b[1], det = ux * vy - vx * uy;\n  return { ax: a[0], ay: a[1], ux, uy, vx, vy, i00: vy / det, i01: -vx / det, i10: -uy / det, i11: ux / det, flip: det \u003c 0 };\n});\n\n// Points the zoom can dive into, each the fixed point of a chain of children\n// that keeps the hand: child 2 alone, a copy a fifth of the area turned by\n// arctan(1/2); child 3 twice; 2 then 3; 3 then 2. P is the chain's length in\n// levels, R its turn.\nconst DIVES = [\n  { zx: 1.5, zy: 0.5, P: 1, R: A2 },\n  { zx: 1.2, zy: 0.4, P: 2, R: 2 * A2 },\n  { zx: 1.375, zy: 0.375, P: 2, R: 2 * A2 - PI },\n  { zx: 1.125, zy: 0.375, P: 2, R: 2 * A2 - PI },\n];\nconst N0 = 8;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  params.s = {\n    z: 0, hue: 0, speed: 2, size: 13, paint: 0.06, dive: 0, prev: -1, fade: 1,\n    lut: new Float32Array(256 * 3 * 4), lutHue: NaN, out: new Float32Array(W * H * 3), tmp: new Float32Array(W * H * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = cl(k[2], 13, 40);\n  P.paint = cl(k[3], 0, 1);\n  P.z += d * P.speed * 0.14;\n  if (P.fade \u003c 1) P.fade = Math.min(1, P.fade + d / 0.8);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.prev = P.dive;\n    P.dive = (P.dive + 1) % DIVES.length;\n    P.fade = 0;\n  }\n}\n\n// Draws one dive into buf: RGB 0..255 per LED.\nfunction render(P, D, buf) {\n  const u = P.z % D.P, S = Math.pow(S5, N0 + u), phi = -D.R * (u / D.P);\n  const cp = cos(-phi) / S, sp = sin(-phi) / S;\n  // Depth d tiles span S * sqrt5^(1-d) LEDs along the hypotenuse; the deepest\n  // drawn is the last one at least Size long, and it fades in.\n  const lam = N0 + u + 1 - log(P.size) / LS5, dn = floor(lam), al = sm(0, 0.3, lam - dn), ac = sm(0.28, 0.42, lam - dn);\n  // Each level's seam: its scale on the panel, how far it reaches from the\n  // edge (a little wider for the older, larger tiles) and how dark it is.\n  const sig = new Float32Array(dn + 1), reach = new Float32Array(dn + 1), dark = new Float32Array(dn + 1);\n  for (let d = 0; d \u003c= dn; d++) {\n    sig[d] = S * Math.pow(S5, -d);\n    reach[d] = 1.1 + 0.45 * sm(1, 2.5, lam - d);\n    dark[d] = d === dn ? al : 1;\n  }\n  const lut = P.lut, paint = P.paint;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - CX, dy = y - CY;\n      let qx = D.zx + cp * dx - sp * dy, qy = D.zy + sp * dx + cp * dy;\n      let m00 = 1, m01 = 0, m10 = 0, m11 = 1, flip = false;\n      let a0 = 0, f0 = false, seam = 0;\n      for (let d = 1; d \u003c= dn; d++) {\n        if (d === dn) (a0 = atan2(m10, m00)), (f0 = flip);\n        let best = -9, bi = 0, bx = 0, by = 0;\n        for (let i = 0; i \u003c 5; i++) {\n          const K = KIDS[i], rx = qx - K.ax, ry = qy - K.ay;\n          const tx = K.i00 * rx + K.i01 * ry, ty = K.i10 * rx + K.i11 * ry;\n          const mg = Math.min(ty, 2 - tx, (tx - 2 * ty) / S5);\n          if (mg > best) {\n            (best = mg), (bi = i), (bx = tx), (by = ty);\n            // The children do not overlap: one inside is the one.\n            if (mg > 0) break;\n          }\n        }\n        const K = KIDS[bi];\n        const n00 = m00 * K.ux + m01 * K.uy, n01 = m00 * K.vx + m01 * K.vy, n10 = m10 * K.ux + m11 * K.uy, n11 = m10 * K.vx + m11 * K.vy;\n        (m00 = n00), (m01 = n01), (m10 = n10), (m11 = n11), (flip = flip !== K.flip);\n        (qx = bx), (qy = by);\n        const sd = dark[d] * cl(reach[d] - best * sig[d], 0, 1);\n        if (sd > seam) seam = sd;\n      }\n      const a1 = atan2(m10, m00);\n      const o = (y * W + x) * 3;\n      // Colour of the tile one level up and of the newest tile, mixed.\n      tint(lut, a0 + phi, f0, paint);\n      const r0 = cr, g0 = cg, b0 = cb;\n      tint(lut, a1 + phi, flip, paint);\n      const r = r0 + (cr - r0) * ac, g = g0 + (cg - g0) * ac, b = b0 + (cb - b0) * ac;\n      const v = 1 - 0.94 * seam;\n      buf[o] = r * v;\n      buf[o + 1] = g * v;\n      buf[o + 2] = b * v;\n    }\n}\n\n// A tile's colour from the direction of its long leg on the panel and its\n// hand: four tables of 256 directions, by direction and by light, each for\n// both hands.\nlet cr = 0, cg = 0, cb = 0;\nfunction tint(lut, ang, flip, paint) {\n  let t = ang / TAU;\n  t -= floor(t);\n  const i = ((floor(t * 256) & 255) + (flip ? 256 : 0)) * 3, j = i + 1536;\n  cr = lut[i] + (lut[j] - lut[i]) * paint;\n  cg = lut[i + 1] + (lut[j + 1] - lut[i + 1]) * paint;\n  cb = lut[i + 2] + (lut[j + 2] - lut[i + 2]) * paint;\n}\n\nfunction buildLut(P) {\n  for (let i = 0; i \u003c 256; i++) {\n    const t = i / 256, lit = 0.5 + 0.5 * cos(t * TAU - 2.2);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 1, P.lut, i * 3);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 0.8, P.lut, (256 + i) * 3);\n    hsv(P.hue + 0.55, 0.55, 0.35 + 0.65 * lit, P.lut, (512 + i) * 3);\n    hsv(P.hue + 0.62, 0.85, 0.25 + 0.6 * lit, P.lut, (768 + i) * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const out = P.out;\n  render(P, DIVES[P.dive], out);\n  if (P.fade \u003c 1 && P.prev >= 0) {\n    render(P, DIVES[P.prev], P.tmp);\n    const f = sm(0, 1, P.fade), tmp = P.tmp;\n    for (let i = 0; i \u003c out.length; i++) out[i] = tmp[i] + (out[i] - tmp[i]) * f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4."},{"name":"Size","min":13,"max":40,"about":"How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider."},{"name":"Paint","min":0,"max":1,"about":"At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers."}],"start":[0,2,13,0.06],"measures":{"motion":2.1331,"detail":0.1861,"edges":0.7085,"complexity":1.6658,"coverage":0.856,"colour":0.5245,"drift":0.1667},"knobResponse":[0.362,0.3049,0.2869,0.2296]},{"slug":"pipe-organ","title":"Pipe Organ","family":"music","round":24,"note":"어두운 성당의 파이프오르간 정면이 패널을 채워요. 보이지 않는 오르가니스트가 여덟 화음 코랄을 되풀이하면, 소리 나는 파이프마다 입에서 빛이 켜지고 몸통을 따라 정상파 띠가 올라가요. 가운데 가장 긴 파이프가 가장 낮은 음이에요. K1 이 플루트의 파랑, 프린시펄의 은빛, 리드의 금빛과 빨강 사이에서 음전을 고르고, K1 을 누르면 파이프 열아홉이 다 울려요.","idea":"The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.","buttons":"K1 tap is full organ: every pipe in the front speaks at once for about three seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Pipe Organ\n// Family:  music\n// Idea:    The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower-and-flat fronts of North German Baroque organ cases and four-part chorale harmony\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1\n//\n// Knob 1: Stops. The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too.\n// Knob 2: Tempo. At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one.\n// Knob 3: Voices. How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord.\n// Knob 4: Tremulant. The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them.\n// Buttons: K1 tap is full organ: every pipe in the front speaks at once for about three seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Pipe d sounds the d-th note of a major scale up from the longest pipe, and\n// an open pipe halves its length each octave.\nconst STEP = [0, 2, 4, 5, 7, 9, 11];\nconst len = (d) => 92 * 2 ** (-(12 * floor(d / 7) + STEP[d % 7]) / 12);\n// The front: the lowest note in the middle of the centre tower, then pairs,\n// the lower note left and the next one right, as the C and C sharp chests of\n// a real case split a scale between the two sides.\nconst PIPES = [];\nfunction pair(d, x, w, top, mouth, base) {\n  const L = d ? (len(d) + len(d + 1)) / 2 : len(0);\n  const t = round(top >= 0 ? top : mouth - L);\n  const m = round(top >= 0 ? top + L : mouth);\n  const mh = w >= 5 ? 2 : 1;\n  PIPES[d] = { x, w, top: t, m, mh, f0: m + mh + 1, base };\n  if (d) PIPES[d + 1] = { x: W - x - w, w, top: t, m, mh, f0: m + mh + 1, base };\n}\n// The centre tower and the side towers hang from their crowns, so their\n// mouths step; the flats stand on equal feet, so their tops ramp.\npair(0, 29, 6, 9, 0, 110);\npair(1, 23, 5, 12, 0, 110);\npair(3, 1, 4, 30, 0, 110);\npair(5, 6, 4, 38, 0, 110);\npair(7, 19, 3, -1, 102, 110);\npair(9, 15, 3, -1, 102, 110);\npair(11, 11, 3, -1, 102, 110);\npair(13, 19, 3, -1, 44, 50);\npair(15, 15, 3, -1, 44, 50);\npair(17, 11, 3, -1, 44, 50);\nconst NP = 19;\n\n// Eight-chord phrases on the scale's chords, I = 0 to vi = 5. The first one\n// always opens the piece.\nconst PHRASES = [\n  [0, 4, 5, 3, 0, 1, 4, 0],\n  [0, 5, 1, 4, 0, 3, 4, 0],\n  [5, 3, 0, 4, 5, 1, 4, 4],\n  [0, 3, 0, 4, 5, 1, 4, 0],\n  [3, 4, 0, 5, 1, 0, 4, 0],\n  [0, 2, 5, 3, 1, 4, 4, 0],\n];\n// Voices in the order the knob adds them: soprano, bass, alto, tenor, then\n// three that fill the chord.\nconst VORD = [0, 3, 1, 2, 4, 5, 6];\n\n// Surfaces, as how much of each light they give back.\nconst TIN = [0.9, 0.95, 1];\nconst WOOD = [0.42, 0.25, 0.15];\nconst GILT = [1.3, 1, 0.42];\nconst DARK = [0.07, 0.05, 0.045];\nconst STONE = [0.9, 0.88, 0.84];\n// Grey daylight from the nave, the candles, and the lamp on the music desk.\nconst DAY = [56, 56, 64];\nconst CAN = [200, 126, 58];\nconst LAMP = [255, 210, 140];\n// The rose window's glass.\nconst RUBY = [230, 40, 60];\nconst SAPH = [50, 90, 255];\nconst AMBER = [255, 200, 80];\nconst GREEN = [60, 200, 110];\nconst ROSE = [RUBY, SAPH, GREEN, SAPH];\n// Stop colours: flute, principal, reed at the mouth and up the body, full organ.\nconst FLUTE = [0.35, 0.62, 1];\nconst PRIN = [0.84, 0.9, 1];\nconst REED0 = [1, 0.77, 0.27];\nconst REED1 = [1, 0.2, 0.08];\nconst FULL = [1, 0.86, 0.58];\n\n// Round tin: a highlight a third of the way across and a dark far edge.\nfunction shade(p) {\n  return (0.2 + 0.5 * sin(PI * p) ** 0.7 + 0.55 * exp(-(((p - 0.36) / 0.14) ** 2))) * (1.1 - 0.4 * p);\n}\n\n// Carved and gilt pipe shades: pierced scrolls.\nfunction fret(x, y) {\n  return sin(x * 1.25 + 2 * sin(y * 0.52)) * sin(y * 0.9 + 1.6 * sin(x * 0.61));\n}\n\nfunction build(P) {\n  const A = P.A;\n  const put = (x, y, c, k = 1, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    for (let n = 0; n \u003c 3; n++) A[o + n] = mix(A[o + n], c[n] * k, a);\n  };\n  // Left half and its mirror.\n  const two = (x, y, c, k, a) => (put(x, y, c, k, a), put(W - 1 - x, y, c, k, a));\n  const row = (x0, x1, y, c, k) => {\n    for (let x = x0; x \u003c= x1; x++) two(x, y, c, k);\n  };\n  // The church wall: courses of ashlar.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cs = floor(y / 5), off = (cs & 1) * 4, mortar = y % 5 === 4 || (x + off) % 8 === 7;\n      put(x, y, STONE, mortar ? 0.14 : 0.27 + 0.1 * hash(floor((x + off) / 8), cs));\n    }\n  // The case, dark inside.\n  for (let y = 0; y \u003c 114; y++) for (let x = 0; x \u003c 32; x++) if (x > 21 || (x > 9 ? y >= 11 : y >= 22)) two(x, y, DARK, 1);\n  // Stiles between the towers and the flats.\n  for (const [x, y0] of [[0, 30], [10, 16], [22, 9]]) for (let y = y0; y \u003c 110; y++) two(x, y, WOOD, 1.05 + 0.15 * sin(y * 0.8) * (y % 12 \u003c 2 ? 1 : 0));\n  // The side towers' crowns, each with a gilt urn and a flame on top.\n  row(0, 10, 29, GILT, 0.9);\n  for (let y = 26; y \u003c= 28; y++) row(0, 10, y, WOOD, 0.9);\n  for (const x of [2, 5, 8]) two(x, 27, GILT, 1.05);\n  row(0, 10, 25, GILT, 1.05);\n  row(0, 10, 24, WOOD, 0.7);\n  row(0, 10, 23, WOOD, 1);\n  row(0, 10, 22, GILT, 1.15);\n  const URN = [[21, 2], [20, 1], [19, 2], [18, 2], [17, 1], [16, 0], [15, 1], [14, 0]];\n  for (const [y, r] of URN) for (let x = 5 - r; x \u003c= 5 + r; x++) two(x, y, GILT, 1.15 - 0.18 * (x - 5 + r));\n  // The upper flats' cornice and a scroll pediment.\n  row(10, 22, 15, GILT, 0.9);\n  for (let y = 12; y \u003c= 14; y++) for (let x = 10; x \u003c= 22; x++) two(x, y, WOOD, y === 13 && x % 2 ? 1.25 : 0.9);\n  row(10, 22, 11, GILT, 1.1);\n  row(12, 20, 10, GILT, 0.75);\n  for (const [x, y] of [[12, 9], [13, 9], [19, 9], [20, 9], [14, 8], [15, 8], [17, 8], [18, 8], [16, 7], [16, 6]]) two(x, y, GILT, 1.05);\n  // The centre tower's crown, with a carved crest over it.\n  row(22, 31, 8, GILT, 0.95);\n  for (let y = 5; y \u003c= 7; y++) for (let x = 22; x \u003c= 31; x++) two(x, y, x % 4 === 1 && y === 6 ? GILT : WOOD, x % 4 === 1 && y === 6 ? 1.1 : 0.9);\n  row(22, 31, 4, GILT, 1.1);\n  for (let x = 23; x \u003c= 31; x++) {\n    const h = 4 * (1 - ((x - 31.5) / 9) ** 2);\n    for (let y = floor(4 - h); y \u003c 4; y++) if (fret(x, y + 3) > -0.2 || x === 31) two(x, y, GILT, x === 31 ? 1.25 : 0.8 + 0.3 * fret(x, y));\n  }\n  // Pipe shades over every pipe that stops short of the carving above it.\n  const GAP = [5, 14, 18, 28, 35, 45, 49, 58];\n  for (const q of PIPES) {\n    const y0 = q.base === 50 ? 16 : q.x === 1 || q.x === 6 || q.x > 53 ? 30 : q.x > 22 && q.x \u003c 41 ? 9 : 54;\n    for (let x = q.x - 1; x \u003c= q.x + q.w; x++) {\n      const own = x >= q.x && x \u003c q.x + q.w;\n      if (own || GAP.indexOf(x) >= 0)\n        for (let y = y0; y \u003c q.top; y++) {\n          const v = fret(x, y);\n          if (own && y === q.top - 1) put(x, y, GILT, 1.05);\n          else if (v > -0.1) put(x, y, GILT, 0.55 + 0.5 * v);\n        }\n    }\n  }\n  // Under the lower flats the pipe shades of the upper ones, and the shelf they stand on.\n  row(10, 22, 50, GILT, 0.95);\n  row(10, 22, 51, WOOD, 1);\n  row(10, 22, 52, WOOD, 0.9);\n  row(10, 22, 53, WOOD, 0.55);\n  // The pipes: body, mouth with its lips, and the conical foot.\n  for (const q of PIPES) {\n    const { x, w, top, m, mh, f0, base } = q;\n    for (let y = top; y \u003c m; y++) for (let j = 0; j \u003c w; j++) put(x + j, y, TIN, shade((j + 0.5) / w) * (y === top ? 0.7 : 1));\n    for (let j = 0; j \u003c w; j++) {\n      const inner = j > 0 && j \u003c w - 1, s = shade((j + 0.5) / w);\n      if (inner) put(x + j, m - 1, TIN, s * 1.3);\n      for (let y = m; y \u003c m + mh; y++) put(x + j, y, inner ? DARK : TIN, inner ? 0.8 : s);\n      put(x + j, m + mh, TIN, s * (inner ? 1.15 : 0.9));\n    }\n    if (w >= 5) for (let j = floor((w - 1) / 2); j \u003c= floor(w / 2); j++) put(x + j, m - 2, TIN, 1.25);\n    const cx = x + w / 2;\n    for (let y = f0; y \u003c base; y++) {\n      const hw = mix(w / 2, 0.7, (y - f0) / max(1, base - 1 - f0));\n      for (let xx = floor(cx - hw); xx \u003c= cx + hw; xx++) {\n        const cov = cl(hw - abs(xx + 0.5 - cx) + 0.5, 0, 1);\n        put(xx, y, TIN, 0.9 * shade(cl((xx + 0.5 - cx + hw) / (2 * hw), 0, 1)), cov);\n      }\n    }\n  }\n  // The impost the pipes stand on.\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 110, GILT, 1);\n    put(x, 111, WOOD, x % 16 === 0 ? 0.6 : 1);\n    put(x, 112, WOOD, x % 16 === 0 ? 0.6 : 0.95);\n    put(x, 113, WOOD, 0.5);\n  }\n  // Candles on the stiles between the side towers and the flats.\n  for (let y = 98; y \u003c= 101; y++) two(10, y, [0.95, 0.9, 0.8], 0.5);\n  for (let x = 9; x \u003c= 11; x++) two(x, 102, GILT, 0.6);\n  // The console: the music desk with its lamp, and one manual.\n  for (let y = 114; y \u003c H; y++) for (let x = 0; x \u003c W; x++) put(x, y, WOOD, 0.7);\n  for (let y = 114; y \u003c= 119; y++) for (let x = 16; x \u003c= 47; x++) put(x, y, WOOD, 0.85);\n  for (let y = 115; y \u003c= 119; y++)\n    for (let x = 21; x \u003c= 42; x++) put(x, y, [0.95, 0.9, 0.76], y === 116 || y === 118 ? 0.62 : hash(x, y) \u003c 0.13 ? 0.3 : 1);\n  for (let x = 27; x \u003c= 36; x++) put(x, 114, GILT, 1.15);\n  for (let k = 0; k \u003c 21; k++) {\n    for (let y = 121; y \u003c= 125; y++) for (let x = 3 * k; x \u003c 3 * k + 2; x++) put(x, y, [0.92, 0.88, 0.78], y === 125 ? 0.7 : 1);\n    const n = (k + 6) % 7;\n    if (k \u003c 20 && n !== 2 && n !== 6) for (let y = 121; y \u003c= 123; y++) put(3 * k + 2, y, DARK, 1), put(3 * k + 3, y, DARK, 1);\n  }\n  // Light: grey daylight from above, warm candlelight, the desk lamp.\n  for (let i = 0; i \u003c N; i++) {\n    const x = (i & 63) + 0.5, y = (i >> 6) + 0.5;\n    P.day[i] = 0.45 + 0.55 * (1 - y / H) ** 1.3;\n    P.cL[i] = 0.85 / (1 + ((x - 10.5) ** 2 + (y - 96) ** 2) / 450);\n    P.cR[i] = 0.85 / (1 + ((x - 53.5) ** 2 + (y - 96) ** 2) / 450);\n    P.lamp[i] = y > 115 ? 1.1 / (1 + (x - 32) ** 2 / 90 + (y - 115) ** 2 / 40) : 0.45 / (1 + ((x - 32) ** 2 + (y - 114) ** 2) / 140);\n  }\n}\n\n// The nearest scale degree in lo..hi under cap whose note is in pcs, moving\n// from prev, sitting still costing `same`.\nfunction near(lo, hi, pcs, prev, same, cap) {\n  let best = -1;\n  let bs = 1e9;\n  for (let d = lo; d \u003c= hi; d++) {\n    if (d >= cap || pcs.indexOf(d % 7) \u003c 0) continue;\n    const j = abs(d - prev), s = j + (j === 0 ? same : 0) + (j > 4 ? 2 : 0) + rnd() * 0.9;\n    if (s \u003c bs) (bs = s), (best = d);\n  }\n  return best \u003c 0 ? (cap \u003c 99 ? near(lo, hi, pcs, prev, same, 99) : prev) : best;\n}\n\n// The next chord of the chorale, voiced from the last one.\nfunction chord(P) {\n  if (P.pi >= P.ph.length) (P.ph = PHRASES[floor(rnd() * PHRASES.length)]), (P.pi = 0);\n  const r = P.ph[P.pi++], last = P.pi === P.ph.length, pen = P.pi === P.ph.length - 1;\n  const T = [r, (r + 2) % 7, (r + 4) % 7];\n  if (pen && r === 4 && rnd() \u003c 0.6) T.push(3);\n  const [s0, a0, t0, b0] = P.prev;\n  const B = near(0, 7, [!last && !pen && rnd() \u003c 0.3 ? T[1] : r], b0, 0, 99);\n  const S = near(11, 18, last && r === 0 ? [0] : T, s0, 1.6, 99);\n  const A = near(8, 14, T, a0, 0.4, S);\n  const miss = T.filter((c) => c !== S % 7 && c !== A % 7 && c !== B % 7);\n  const Tn = near(4, 11, miss.length ? miss : T, t0, 0.4, A);\n  const v = [S, A, Tn, B];\n  // Three more parts fill the chord: the bass an octave up, one in the middle, one high.\n  for (const goal of [B + 7, 10, 16]) {\n    let best = -1;\n    let bs = 1e9;\n    for (let d = 0; d \u003c NP; d++) {\n      const s = abs(d - goal) + rnd() * 0.5;\n      if (T.indexOf(d % 7) >= 0 && v.indexOf(d) \u003c 0 && s \u003c bs) (bs = s), (best = d);\n    }\n    v.push(best);\n  }\n  P.prev = v;\n  return { v, dur: last ? 2 : 1, last, pass: [-1, -1, -1, -1], at: 0 };\n}\n\n// A part moving a third walks through the note between on the half beat.\nfunction passing(c, nx) {\n  if (c.last) return;\n  for (let k = 0; k \u003c 4; k++) if (abs(nx.v[k] - c.v[k]) === 2 && rnd() \u003c (k ? 0.4 : 0.6)) c.pass[k] = (c.v[k] + nx.v[k]) / 2;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    A: F32(N * 3), F: F32(N * 3), day: F32(N), cL: F32(N), cR: F32(N), lamp: F32(N),\n    amp: F32(NP), tgt: F32(NP), on: F32(NP), chiff: F32(NP), keys: F32(NP),\n    t: 0, beat: 0, fullT: 99, full: 0, fl: 1, fr: 1, s: 0, tr: 0,\n    ph1: rnd() * 6.28, ph2: rnd() * 6.28, ph: PHRASES[0], pi: 0, prev: [14, 11, 7, 0, 7, 9, 16],\n  });\n  build(P);\n  P.cur = chord(P);\n  P.nx = chord(P);\n  passing(P.cur, P.nx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  const s = (P.s = cl(k[0], 0, 1));\n  const tempo = cl(k[1], 0.2, 3);\n  const nv = cl(round(k[2]), 1, 6);\n  const tr = (P.tr = cl(k[3], 0, 1));\n  const t = (P.t += d);\n  P.beat += (d * tempo) / 2;\n  while (P.beat >= P.cur.at + P.cur.dur) {\n    const at = P.cur.at + P.cur.dur;\n    P.cur = P.nx;\n    P.cur.at = at;\n    P.nx = chord(P);\n    passing(P.cur, P.nx);\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.fullT = 0;\n  P.fullT += d;\n  P.full = P.fullT \u003c 2.8 ? sm(0, 0.06, P.fullT) : 1 - sm(2.8, 3.6, P.fullT);\n\n  // Which pipes speak: each part's note, the octave above from the\n  // principals on, and with the reeds the octave below, the twelfth and the\n  // fifteenth.\n  const c = P.cur, pos = P.beat - c.at, r4 = 0.8 * sm(0.3, 0.55, s), r2 = 0.75 * sm(0.7, 0.92, s);\n  P.tgt.fill(0);\n  P.keys.fill(0);\n  if (!(c.last && pos > c.dur - 0.22))\n    for (let n = 0; n \u003c= nv; n++) {\n      const v = VORD[n], g = v \u003c 4 && c.pass[v] >= 0 && pos >= c.dur / 2 ? c.pass[v] : c.v[v];\n      if (g \u003c 0) continue;\n      P.tgt[g] = 1;\n      if (v !== 3) P.keys[g] = 1;\n      if (g + 7 \u003c NP) P.tgt[g + 7] = max(P.tgt[g + 7], r4);\n      if (g >= 7) P.tgt[g - 7] = max(P.tgt[g - 7], r2);\n      if (g + 11 \u003c NP) P.tgt[g + 11] = max(P.tgt[g + 11], r2);\n      if (g + 14 \u003c NP) P.tgt[g + 14] = max(P.tgt[g + 14], r2);\n    }\n  for (let i = 0; i \u003c NP; i++) {\n    const g = max(P.tgt[i], 0.9 * P.full);\n    if (g > 0.5 && P.on[i] \u003c 0.5) P.chiff[i] = 1;\n    P.on[i] = g;\n    P.amp[i] += (g - P.amp[i]) * (1 - exp(-d / (g > P.amp[i] ? 0.035 : 0.14)));\n    P.chiff[i] *= exp(-d / 0.18);\n  }\n  // Candles in the draught: as the tremulant shakes the wind they flicker\n  // harder and burn lower.\n  const fa = 0.05 + tr;\n  const fl = (ph) => 1 - 0.4 * fa + fa * (0.6 * sin(t * 7.1 + ph) + 0.45 * sin(t * 11.9 + 2 * ph) + 0.35 * sin(t * 4.3 + 3 * ph) * sin(t * 17.3));\n  P.fl = cl(fl(0), 0.1, 2);\n  P.fr = cl(fl(2.1), 0.1, 2);\n}\n\n// A stop's colour, u from the mouth (0) to the top (1).\nfunction stopCol(out, s, u, full) {\n  for (let n = 0; n \u003c 3; n++) {\n    const v = s \u003c 0.5 ? mix(FLUTE[n], PRIN[n], s * 2) : mix(PRIN[n], mix(REED0[n], REED1[n], min(1, u * 1.6)), s * 2 - 1);\n    out[n] = mix(v, FULL[n], full);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { A, F, day, cL, cR, lamp, t } = P;\n  // The case in daylight, candlelight and lamplight.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const dl = day[i], cn = cL[i] * P.fl + cR[i] * P.fr, lp = lamp[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = A[o + n] * (DAY[n] * dl + CAN[n] * cn + LAMP[n] * lp);\n  }\n  // The rose window's light, cast long and slow across the case.\n  const px = 32 + 17 * sin(t * 0.05 + P.ph1), py = 60 + 34 * sin(t * 0.031 + P.ph2), RX = 15, RY = 24;\n  const I0 = 0.65 * (0.8 + 0.2 * sin(t * 0.23 + P.ph1));\n  for (let y = max(0, floor(py - RY)); y \u003c= min(H - 1, py + RY); y++)\n    for (let x = max(0, floor(px - RX)); x \u003c= min(W - 1, px + RX); x++) {\n      const dx = (x + 0.5 - px) / RX, dy = (y + 0.5 - py) / RY, r = sqrt(dx * dx + dy * dy);\n      if (r >= 1) continue;\n      const a = atan2(dy, dx) / (2 * PI) + 0.5;\n      let c, lead;\n      if (r \u003c 0.2) (c = AMBER), (lead = r > 0.15);\n      else if (r \u003c 0.5) {\n        const q = a * 8;\n        (c = floor(q) & 1 ? RUBY : SAPH), (lead = q - floor(q) \u003c 0.1 || r \u003c 0.24);\n      } else {\n        const q = a * 16;\n        (c = ROSE[floor(q) & 3]), (lead = q - floor(q) \u003c 0.08 || r \u003c 0.54);\n      }\n      const kk = I0 * (lead ? 0.45 : 1) * sm(1, 0.82, r), o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * c[n] * kk;\n    }\n  // The pipes that speak: the mouth lights and a standing wave shimmers up\n  // the body, its bands creeping upward and wavering with the tremulant.\n  const s = P.s, tr = P.tr, gain = 240 * (0.8 + 0.4 * s), bands = 2 + 4 * s, floor0 = 0.45 - 0.25 * s;\n  // Many pipes at once light the case less each, or the chord drowns in its own light.\n  let ns = 0;\n  for (let i = 0; i \u003c NP; i++) ns += P.amp[i];\n  const spread = (1 - 0.6 * P.full) / (1 + 0.12 * max(0, ns - 2));\n  const trem = sin(2 * PI * 5.4 * t), tm = 1 - 0.9 * tr * (0.5 + 0.5 * trem), wob = 0.3 * tr * trem;\n  const col = [0, 0, 0];\n  for (let i = 0; i \u003c NP; i++) {\n    const am = P.amp[i];\n    if (am \u003c 0.004) continue;\n    const { x, w, top, m, mh, base } = PIPES[i];\n    const a = am * gain * tm, span = m - top, osc = 0.7 + 0.3 * cos(t * (5 + 0.6 * i) + i * 1.7);\n    const bm = max(bands, 5 * P.full), creep = 0.3 * t + i * 0.37;\n    // Its light on the polished tin and the gilt round it.\n    stopCol(col, s, 0.4, P.full);\n    const kb = am * tm * (0.22 + 0.5 * s) * spread * 255;\n    for (let y = max(0, top - 10); y \u003c min(H, base + 6); y++) {\n      const ly = kb * (y \u003c top ? exp((y - top) / 4) : y > m ? exp((m - y) / 7) : 1);\n      for (let xx = max(0, x - 16); xx \u003c min(W, x + w + 16); xx++) {\n        const dd = xx \u003c x ? x - xx : xx >= x + w ? xx - x - w + 1 : 0, lb = ly / (1 + dd * dd * 0.05), o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * col[n] * lb;\n      }\n    }\n    for (let y = top; y \u003c m; y++) {\n      const u = (m - 0.5 - y) / span;\n      const bv = abs(cos(PI * (bm * u - creep + wob))) ** 2.5 * osc;\n      const g = a * (0.75 + 0.25 * exp(-3 * u)) * (floor0 + (1 - floor0) * bv);\n      stopCol(col, s, u, P.full);\n      for (let j = -2; j \u003c w + 2; j++) {\n        const xx = x + j;\n        if (xx \u003c 0 || xx >= W) continue;\n        const cr = j \u003c 0 || j >= w ? (j === -1 || j === w ? 0.2 : 0.07) : 0.6 + 0.4 * sin((PI * (j + 0.5)) / w);\n        const o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += col[n] * g * cr;\n      }\n    }\n    // The mouth: hot in the slot, flaring as the pipe speaks, and a glow round it.\n    stopCol(col, s, 0, P.full);\n    const cx = x + w / 2, cy = m + mh / 2, hot = a * (0.8 + 1.1 * P.chiff[i]);\n    for (let y = m - 4; y \u003c= m + mh + 4; y++)\n      for (let xx = x - 3; xx \u003c x + w + 3; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const e = ((xx + 0.5 - cx) / (w / 2 + 1.2)) ** 2 + ((y + 0.5 - cy) / 2.6) ** 2;\n        if (e > 3) continue;\n        const slot = y >= m && y \u003c m + mh && xx > x && xx \u003c x + w - 1;\n        const o = (y * W + xx) * 3, k = slot ? hot * 2 : hot * 0.5 * exp(-e * 1.3);\n        for (let n = 0; n \u003c 3; n++) F[o + n] += mix(col[n], 1, slot ? 0.7 : 0.2) * k;\n      }\n  }\n  // The candle flames, each with a halo in the air round it.\n  for (const [x, f] of [[10, P.fl], [53, P.fr]]) {\n    for (let y = 92; y \u003c= 100; y++)\n      for (let xx = x - 3; xx \u003c= x + 3; xx++) {\n        const e = (xx - x) ** 2 + ((y - 96.5) * 0.8) ** 2, o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += CAN[n] * 0.45 * f * exp(-e / 3);\n      }\n    for (const [y, c, k] of [[97, [255, 250, 225], 1], [96, [255, 236, 160], min(1, f)], [95, [255, 190, 80], cl(f, 0, 1)], [94, [255, 120, 30], cl(f - 0.8, 0, 1)]]) {\n      const o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = max(F[o + n], c[n] * k);\n    }\n  }\n  // Keys held down on the manual.\n  for (let i = 0; i \u003c NP; i++)\n    if (P.keys[i] > 0)\n      for (let y = 121; y \u003c= 125; y++)\n        for (let x = 3 * (i + 1); x \u003c 3 * (i + 1) + 2; x++) {\n          const o = (y * W + x) * 3;\n          for (let n = 0; n \u003c 3; n++) F[o + n] *= y === 125 ? 0.35 : 0.6;\n        }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, knee(F[o]), knee(F[o + 1]), knee(F[o + 2]));\n}\n\n// Light past 180 rolls off towards 255, so a speaking pipe keeps its colour.\nfunction knee(v) {\n  return (v \u003c 180 ? v : 255 - 75 * exp(-(v - 180) / 75)) | 0;\n}\n","layer":{"id":"layer-pipe-organ","type":"code","name":"pipe-organ","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pipe Organ\n// Family:  music\n// Idea:    The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower-and-flat fronts of North German Baroque organ cases and four-part chorale harmony\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1\n//\n// Knob 1: Stops. The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too.\n// Knob 2: Tempo. At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one.\n// Knob 3: Voices. How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord.\n// Knob 4: Tremulant. The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them.\n// Buttons: K1 tap is full organ: every pipe in the front speaks at once for about three seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Pipe d sounds the d-th note of a major scale up from the longest pipe, and\n// an open pipe halves its length each octave.\nconst STEP = [0, 2, 4, 5, 7, 9, 11];\nconst len = (d) => 92 * 2 ** (-(12 * floor(d / 7) + STEP[d % 7]) / 12);\n// The front: the lowest note in the middle of the centre tower, then pairs,\n// the lower note left and the next one right, as the C and C sharp chests of\n// a real case split a scale between the two sides.\nconst PIPES = [];\nfunction pair(d, x, w, top, mouth, base) {\n  const L = d ? (len(d) + len(d + 1)) / 2 : len(0);\n  const t = round(top >= 0 ? top : mouth - L);\n  const m = round(top >= 0 ? top + L : mouth);\n  const mh = w >= 5 ? 2 : 1;\n  PIPES[d] = { x, w, top: t, m, mh, f0: m + mh + 1, base };\n  if (d) PIPES[d + 1] = { x: W - x - w, w, top: t, m, mh, f0: m + mh + 1, base };\n}\n// The centre tower and the side towers hang from their crowns, so their\n// mouths step; the flats stand on equal feet, so their tops ramp.\npair(0, 29, 6, 9, 0, 110);\npair(1, 23, 5, 12, 0, 110);\npair(3, 1, 4, 30, 0, 110);\npair(5, 6, 4, 38, 0, 110);\npair(7, 19, 3, -1, 102, 110);\npair(9, 15, 3, -1, 102, 110);\npair(11, 11, 3, -1, 102, 110);\npair(13, 19, 3, -1, 44, 50);\npair(15, 15, 3, -1, 44, 50);\npair(17, 11, 3, -1, 44, 50);\nconst NP = 19;\n\n// Eight-chord phrases on the scale's chords, I = 0 to vi = 5. The first one\n// always opens the piece.\nconst PHRASES = [\n  [0, 4, 5, 3, 0, 1, 4, 0],\n  [0, 5, 1, 4, 0, 3, 4, 0],\n  [5, 3, 0, 4, 5, 1, 4, 4],\n  [0, 3, 0, 4, 5, 1, 4, 0],\n  [3, 4, 0, 5, 1, 0, 4, 0],\n  [0, 2, 5, 3, 1, 4, 4, 0],\n];\n// Voices in the order the knob adds them: soprano, bass, alto, tenor, then\n// three that fill the chord.\nconst VORD = [0, 3, 1, 2, 4, 5, 6];\n\n// Surfaces, as how much of each light they give back.\nconst TIN = [0.9, 0.95, 1];\nconst WOOD = [0.42, 0.25, 0.15];\nconst GILT = [1.3, 1, 0.42];\nconst DARK = [0.07, 0.05, 0.045];\nconst STONE = [0.9, 0.88, 0.84];\n// Grey daylight from the nave, the candles, and the lamp on the music desk.\nconst DAY = [56, 56, 64];\nconst CAN = [200, 126, 58];\nconst LAMP = [255, 210, 140];\n// The rose window's glass.\nconst RUBY = [230, 40, 60];\nconst SAPH = [50, 90, 255];\nconst AMBER = [255, 200, 80];\nconst GREEN = [60, 200, 110];\nconst ROSE = [RUBY, SAPH, GREEN, SAPH];\n// Stop colours: flute, principal, reed at the mouth and up the body, full organ.\nconst FLUTE = [0.35, 0.62, 1];\nconst PRIN = [0.84, 0.9, 1];\nconst REED0 = [1, 0.77, 0.27];\nconst REED1 = [1, 0.2, 0.08];\nconst FULL = [1, 0.86, 0.58];\n\n// Round tin: a highlight a third of the way across and a dark far edge.\nfunction shade(p) {\n  return (0.2 + 0.5 * sin(PI * p) ** 0.7 + 0.55 * exp(-(((p - 0.36) / 0.14) ** 2))) * (1.1 - 0.4 * p);\n}\n\n// Carved and gilt pipe shades: pierced scrolls.\nfunction fret(x, y) {\n  return sin(x * 1.25 + 2 * sin(y * 0.52)) * sin(y * 0.9 + 1.6 * sin(x * 0.61));\n}\n\nfunction build(P) {\n  const A = P.A;\n  const put = (x, y, c, k = 1, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    for (let n = 0; n \u003c 3; n++) A[o + n] = mix(A[o + n], c[n] * k, a);\n  };\n  // Left half and its mirror.\n  const two = (x, y, c, k, a) => (put(x, y, c, k, a), put(W - 1 - x, y, c, k, a));\n  const row = (x0, x1, y, c, k) => {\n    for (let x = x0; x \u003c= x1; x++) two(x, y, c, k);\n  };\n  // The church wall: courses of ashlar.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cs = floor(y / 5), off = (cs & 1) * 4, mortar = y % 5 === 4 || (x + off) % 8 === 7;\n      put(x, y, STONE, mortar ? 0.14 : 0.27 + 0.1 * hash(floor((x + off) / 8), cs));\n    }\n  // The case, dark inside.\n  for (let y = 0; y \u003c 114; y++) for (let x = 0; x \u003c 32; x++) if (x > 21 || (x > 9 ? y >= 11 : y >= 22)) two(x, y, DARK, 1);\n  // Stiles between the towers and the flats.\n  for (const [x, y0] of [[0, 30], [10, 16], [22, 9]]) for (let y = y0; y \u003c 110; y++) two(x, y, WOOD, 1.05 + 0.15 * sin(y * 0.8) * (y % 12 \u003c 2 ? 1 : 0));\n  // The side towers' crowns, each with a gilt urn and a flame on top.\n  row(0, 10, 29, GILT, 0.9);\n  for (let y = 26; y \u003c= 28; y++) row(0, 10, y, WOOD, 0.9);\n  for (const x of [2, 5, 8]) two(x, 27, GILT, 1.05);\n  row(0, 10, 25, GILT, 1.05);\n  row(0, 10, 24, WOOD, 0.7);\n  row(0, 10, 23, WOOD, 1);\n  row(0, 10, 22, GILT, 1.15);\n  const URN = [[21, 2], [20, 1], [19, 2], [18, 2], [17, 1], [16, 0], [15, 1], [14, 0]];\n  for (const [y, r] of URN) for (let x = 5 - r; x \u003c= 5 + r; x++) two(x, y, GILT, 1.15 - 0.18 * (x - 5 + r));\n  // The upper flats' cornice and a scroll pediment.\n  row(10, 22, 15, GILT, 0.9);\n  for (let y = 12; y \u003c= 14; y++) for (let x = 10; x \u003c= 22; x++) two(x, y, WOOD, y === 13 && x % 2 ? 1.25 : 0.9);\n  row(10, 22, 11, GILT, 1.1);\n  row(12, 20, 10, GILT, 0.75);\n  for (const [x, y] of [[12, 9], [13, 9], [19, 9], [20, 9], [14, 8], [15, 8], [17, 8], [18, 8], [16, 7], [16, 6]]) two(x, y, GILT, 1.05);\n  // The centre tower's crown, with a carved crest over it.\n  row(22, 31, 8, GILT, 0.95);\n  for (let y = 5; y \u003c= 7; y++) for (let x = 22; x \u003c= 31; x++) two(x, y, x % 4 === 1 && y === 6 ? GILT : WOOD, x % 4 === 1 && y === 6 ? 1.1 : 0.9);\n  row(22, 31, 4, GILT, 1.1);\n  for (let x = 23; x \u003c= 31; x++) {\n    const h = 4 * (1 - ((x - 31.5) / 9) ** 2);\n    for (let y = floor(4 - h); y \u003c 4; y++) if (fret(x, y + 3) > -0.2 || x === 31) two(x, y, GILT, x === 31 ? 1.25 : 0.8 + 0.3 * fret(x, y));\n  }\n  // Pipe shades over every pipe that stops short of the carving above it.\n  const GAP = [5, 14, 18, 28, 35, 45, 49, 58];\n  for (const q of PIPES) {\n    const y0 = q.base === 50 ? 16 : q.x === 1 || q.x === 6 || q.x > 53 ? 30 : q.x > 22 && q.x \u003c 41 ? 9 : 54;\n    for (let x = q.x - 1; x \u003c= q.x + q.w; x++) {\n      const own = x >= q.x && x \u003c q.x + q.w;\n      if (own || GAP.indexOf(x) >= 0)\n        for (let y = y0; y \u003c q.top; y++) {\n          const v = fret(x, y);\n          if (own && y === q.top - 1) put(x, y, GILT, 1.05);\n          else if (v > -0.1) put(x, y, GILT, 0.55 + 0.5 * v);\n        }\n    }\n  }\n  // Under the lower flats the pipe shades of the upper ones, and the shelf they stand on.\n  row(10, 22, 50, GILT, 0.95);\n  row(10, 22, 51, WOOD, 1);\n  row(10, 22, 52, WOOD, 0.9);\n  row(10, 22, 53, WOOD, 0.55);\n  // The pipes: body, mouth with its lips, and the conical foot.\n  for (const q of PIPES) {\n    const { x, w, top, m, mh, f0, base } = q;\n    for (let y = top; y \u003c m; y++) for (let j = 0; j \u003c w; j++) put(x + j, y, TIN, shade((j + 0.5) / w) * (y === top ? 0.7 : 1));\n    for (let j = 0; j \u003c w; j++) {\n      const inner = j > 0 && j \u003c w - 1, s = shade((j + 0.5) / w);\n      if (inner) put(x + j, m - 1, TIN, s * 1.3);\n      for (let y = m; y \u003c m + mh; y++) put(x + j, y, inner ? DARK : TIN, inner ? 0.8 : s);\n      put(x + j, m + mh, TIN, s * (inner ? 1.15 : 0.9));\n    }\n    if (w >= 5) for (let j = floor((w - 1) / 2); j \u003c= floor(w / 2); j++) put(x + j, m - 2, TIN, 1.25);\n    const cx = x + w / 2;\n    for (let y = f0; y \u003c base; y++) {\n      const hw = mix(w / 2, 0.7, (y - f0) / max(1, base - 1 - f0));\n      for (let xx = floor(cx - hw); xx \u003c= cx + hw; xx++) {\n        const cov = cl(hw - abs(xx + 0.5 - cx) + 0.5, 0, 1);\n        put(xx, y, TIN, 0.9 * shade(cl((xx + 0.5 - cx + hw) / (2 * hw), 0, 1)), cov);\n      }\n    }\n  }\n  // The impost the pipes stand on.\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 110, GILT, 1);\n    put(x, 111, WOOD, x % 16 === 0 ? 0.6 : 1);\n    put(x, 112, WOOD, x % 16 === 0 ? 0.6 : 0.95);\n    put(x, 113, WOOD, 0.5);\n  }\n  // Candles on the stiles between the side towers and the flats.\n  for (let y = 98; y \u003c= 101; y++) two(10, y, [0.95, 0.9, 0.8], 0.5);\n  for (let x = 9; x \u003c= 11; x++) two(x, 102, GILT, 0.6);\n  // The console: the music desk with its lamp, and one manual.\n  for (let y = 114; y \u003c H; y++) for (let x = 0; x \u003c W; x++) put(x, y, WOOD, 0.7);\n  for (let y = 114; y \u003c= 119; y++) for (let x = 16; x \u003c= 47; x++) put(x, y, WOOD, 0.85);\n  for (let y = 115; y \u003c= 119; y++)\n    for (let x = 21; x \u003c= 42; x++) put(x, y, [0.95, 0.9, 0.76], y === 116 || y === 118 ? 0.62 : hash(x, y) \u003c 0.13 ? 0.3 : 1);\n  for (let x = 27; x \u003c= 36; x++) put(x, 114, GILT, 1.15);\n  for (let k = 0; k \u003c 21; k++) {\n    for (let y = 121; y \u003c= 125; y++) for (let x = 3 * k; x \u003c 3 * k + 2; x++) put(x, y, [0.92, 0.88, 0.78], y === 125 ? 0.7 : 1);\n    const n = (k + 6) % 7;\n    if (k \u003c 20 && n !== 2 && n !== 6) for (let y = 121; y \u003c= 123; y++) put(3 * k + 2, y, DARK, 1), put(3 * k + 3, y, DARK, 1);\n  }\n  // Light: grey daylight from above, warm candlelight, the desk lamp.\n  for (let i = 0; i \u003c N; i++) {\n    const x = (i & 63) + 0.5, y = (i >> 6) + 0.5;\n    P.day[i] = 0.45 + 0.55 * (1 - y / H) ** 1.3;\n    P.cL[i] = 0.85 / (1 + ((x - 10.5) ** 2 + (y - 96) ** 2) / 450);\n    P.cR[i] = 0.85 / (1 + ((x - 53.5) ** 2 + (y - 96) ** 2) / 450);\n    P.lamp[i] = y > 115 ? 1.1 / (1 + (x - 32) ** 2 / 90 + (y - 115) ** 2 / 40) : 0.45 / (1 + ((x - 32) ** 2 + (y - 114) ** 2) / 140);\n  }\n}\n\n// The nearest scale degree in lo..hi under cap whose note is in pcs, moving\n// from prev, sitting still costing `same`.\nfunction near(lo, hi, pcs, prev, same, cap) {\n  let best = -1;\n  let bs = 1e9;\n  for (let d = lo; d \u003c= hi; d++) {\n    if (d >= cap || pcs.indexOf(d % 7) \u003c 0) continue;\n    const j = abs(d - prev), s = j + (j === 0 ? same : 0) + (j > 4 ? 2 : 0) + rnd() * 0.9;\n    if (s \u003c bs) (bs = s), (best = d);\n  }\n  return best \u003c 0 ? (cap \u003c 99 ? near(lo, hi, pcs, prev, same, 99) : prev) : best;\n}\n\n// The next chord of the chorale, voiced from the last one.\nfunction chord(P) {\n  if (P.pi >= P.ph.length) (P.ph = PHRASES[floor(rnd() * PHRASES.length)]), (P.pi = 0);\n  const r = P.ph[P.pi++], last = P.pi === P.ph.length, pen = P.pi === P.ph.length - 1;\n  const T = [r, (r + 2) % 7, (r + 4) % 7];\n  if (pen && r === 4 && rnd() \u003c 0.6) T.push(3);\n  const [s0, a0, t0, b0] = P.prev;\n  const B = near(0, 7, [!last && !pen && rnd() \u003c 0.3 ? T[1] : r], b0, 0, 99);\n  const S = near(11, 18, last && r === 0 ? [0] : T, s0, 1.6, 99);\n  const A = near(8, 14, T, a0, 0.4, S);\n  const miss = T.filter((c) => c !== S % 7 && c !== A % 7 && c !== B % 7);\n  const Tn = near(4, 11, miss.length ? miss : T, t0, 0.4, A);\n  const v = [S, A, Tn, B];\n  // Three more parts fill the chord: the bass an octave up, one in the middle, one high.\n  for (const goal of [B + 7, 10, 16]) {\n    let best = -1;\n    let bs = 1e9;\n    for (let d = 0; d \u003c NP; d++) {\n      const s = abs(d - goal) + rnd() * 0.5;\n      if (T.indexOf(d % 7) >= 0 && v.indexOf(d) \u003c 0 && s \u003c bs) (bs = s), (best = d);\n    }\n    v.push(best);\n  }\n  P.prev = v;\n  return { v, dur: last ? 2 : 1, last, pass: [-1, -1, -1, -1], at: 0 };\n}\n\n// A part moving a third walks through the note between on the half beat.\nfunction passing(c, nx) {\n  if (c.last) return;\n  for (let k = 0; k \u003c 4; k++) if (abs(nx.v[k] - c.v[k]) === 2 && rnd() \u003c (k ? 0.4 : 0.6)) c.pass[k] = (c.v[k] + nx.v[k]) / 2;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    A: F32(N * 3), F: F32(N * 3), day: F32(N), cL: F32(N), cR: F32(N), lamp: F32(N),\n    amp: F32(NP), tgt: F32(NP), on: F32(NP), chiff: F32(NP), keys: F32(NP),\n    t: 0, beat: 0, fullT: 99, full: 0, fl: 1, fr: 1, s: 0, tr: 0,\n    ph1: rnd() * 6.28, ph2: rnd() * 6.28, ph: PHRASES[0], pi: 0, prev: [14, 11, 7, 0, 7, 9, 16],\n  });\n  build(P);\n  P.cur = chord(P);\n  P.nx = chord(P);\n  passing(P.cur, P.nx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  const s = (P.s = cl(k[0], 0, 1));\n  const tempo = cl(k[1], 0.2, 3);\n  const nv = cl(round(k[2]), 1, 6);\n  const tr = (P.tr = cl(k[3], 0, 1));\n  const t = (P.t += d);\n  P.beat += (d * tempo) / 2;\n  while (P.beat >= P.cur.at + P.cur.dur) {\n    const at = P.cur.at + P.cur.dur;\n    P.cur = P.nx;\n    P.cur.at = at;\n    P.nx = chord(P);\n    passing(P.cur, P.nx);\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.fullT = 0;\n  P.fullT += d;\n  P.full = P.fullT \u003c 2.8 ? sm(0, 0.06, P.fullT) : 1 - sm(2.8, 3.6, P.fullT);\n\n  // Which pipes speak: each part's note, the octave above from the\n  // principals on, and with the reeds the octave below, the twelfth and the\n  // fifteenth.\n  const c = P.cur, pos = P.beat - c.at, r4 = 0.8 * sm(0.3, 0.55, s), r2 = 0.75 * sm(0.7, 0.92, s);\n  P.tgt.fill(0);\n  P.keys.fill(0);\n  if (!(c.last && pos > c.dur - 0.22))\n    for (let n = 0; n \u003c= nv; n++) {\n      const v = VORD[n], g = v \u003c 4 && c.pass[v] >= 0 && pos >= c.dur / 2 ? c.pass[v] : c.v[v];\n      if (g \u003c 0) continue;\n      P.tgt[g] = 1;\n      if (v !== 3) P.keys[g] = 1;\n      if (g + 7 \u003c NP) P.tgt[g + 7] = max(P.tgt[g + 7], r4);\n      if (g >= 7) P.tgt[g - 7] = max(P.tgt[g - 7], r2);\n      if (g + 11 \u003c NP) P.tgt[g + 11] = max(P.tgt[g + 11], r2);\n      if (g + 14 \u003c NP) P.tgt[g + 14] = max(P.tgt[g + 14], r2);\n    }\n  for (let i = 0; i \u003c NP; i++) {\n    const g = max(P.tgt[i], 0.9 * P.full);\n    if (g > 0.5 && P.on[i] \u003c 0.5) P.chiff[i] = 1;\n    P.on[i] = g;\n    P.amp[i] += (g - P.amp[i]) * (1 - exp(-d / (g > P.amp[i] ? 0.035 : 0.14)));\n    P.chiff[i] *= exp(-d / 0.18);\n  }\n  // Candles in the draught: as the tremulant shakes the wind they flicker\n  // harder and burn lower.\n  const fa = 0.05 + tr;\n  const fl = (ph) => 1 - 0.4 * fa + fa * (0.6 * sin(t * 7.1 + ph) + 0.45 * sin(t * 11.9 + 2 * ph) + 0.35 * sin(t * 4.3 + 3 * ph) * sin(t * 17.3));\n  P.fl = cl(fl(0), 0.1, 2);\n  P.fr = cl(fl(2.1), 0.1, 2);\n}\n\n// A stop's colour, u from the mouth (0) to the top (1).\nfunction stopCol(out, s, u, full) {\n  for (let n = 0; n \u003c 3; n++) {\n    const v = s \u003c 0.5 ? mix(FLUTE[n], PRIN[n], s * 2) : mix(PRIN[n], mix(REED0[n], REED1[n], min(1, u * 1.6)), s * 2 - 1);\n    out[n] = mix(v, FULL[n], full);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { A, F, day, cL, cR, lamp, t } = P;\n  // The case in daylight, candlelight and lamplight.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const dl = day[i], cn = cL[i] * P.fl + cR[i] * P.fr, lp = lamp[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = A[o + n] * (DAY[n] * dl + CAN[n] * cn + LAMP[n] * lp);\n  }\n  // The rose window's light, cast long and slow across the case.\n  const px = 32 + 17 * sin(t * 0.05 + P.ph1), py = 60 + 34 * sin(t * 0.031 + P.ph2), RX = 15, RY = 24;\n  const I0 = 0.65 * (0.8 + 0.2 * sin(t * 0.23 + P.ph1));\n  for (let y = max(0, floor(py - RY)); y \u003c= min(H - 1, py + RY); y++)\n    for (let x = max(0, floor(px - RX)); x \u003c= min(W - 1, px + RX); x++) {\n      const dx = (x + 0.5 - px) / RX, dy = (y + 0.5 - py) / RY, r = sqrt(dx * dx + dy * dy);\n      if (r >= 1) continue;\n      const a = atan2(dy, dx) / (2 * PI) + 0.5;\n      let c, lead;\n      if (r \u003c 0.2) (c = AMBER), (lead = r > 0.15);\n      else if (r \u003c 0.5) {\n        const q = a * 8;\n        (c = floor(q) & 1 ? RUBY : SAPH), (lead = q - floor(q) \u003c 0.1 || r \u003c 0.24);\n      } else {\n        const q = a * 16;\n        (c = ROSE[floor(q) & 3]), (lead = q - floor(q) \u003c 0.08 || r \u003c 0.54);\n      }\n      const kk = I0 * (lead ? 0.45 : 1) * sm(1, 0.82, r), o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * c[n] * kk;\n    }\n  // The pipes that speak: the mouth lights and a standing wave shimmers up\n  // the body, its bands creeping upward and wavering with the tremulant.\n  const s = P.s, tr = P.tr, gain = 240 * (0.8 + 0.4 * s), bands = 2 + 4 * s, floor0 = 0.45 - 0.25 * s;\n  // Many pipes at once light the case less each, or the chord drowns in its own light.\n  let ns = 0;\n  for (let i = 0; i \u003c NP; i++) ns += P.amp[i];\n  const spread = (1 - 0.6 * P.full) / (1 + 0.12 * max(0, ns - 2));\n  const trem = sin(2 * PI * 5.4 * t), tm = 1 - 0.9 * tr * (0.5 + 0.5 * trem), wob = 0.3 * tr * trem;\n  const col = [0, 0, 0];\n  for (let i = 0; i \u003c NP; i++) {\n    const am = P.amp[i];\n    if (am \u003c 0.004) continue;\n    const { x, w, top, m, mh, base } = PIPES[i];\n    const a = am * gain * tm, span = m - top, osc = 0.7 + 0.3 * cos(t * (5 + 0.6 * i) + i * 1.7);\n    const bm = max(bands, 5 * P.full), creep = 0.3 * t + i * 0.37;\n    // Its light on the polished tin and the gilt round it.\n    stopCol(col, s, 0.4, P.full);\n    const kb = am * tm * (0.22 + 0.5 * s) * spread * 255;\n    for (let y = max(0, top - 10); y \u003c min(H, base + 6); y++) {\n      const ly = kb * (y \u003c top ? exp((y - top) / 4) : y > m ? exp((m - y) / 7) : 1);\n      for (let xx = max(0, x - 16); xx \u003c min(W, x + w + 16); xx++) {\n        const dd = xx \u003c x ? x - xx : xx >= x + w ? xx - x - w + 1 : 0, lb = ly / (1 + dd * dd * 0.05), o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * col[n] * lb;\n      }\n    }\n    for (let y = top; y \u003c m; y++) {\n      const u = (m - 0.5 - y) / span;\n      const bv = abs(cos(PI * (bm * u - creep + wob))) ** 2.5 * osc;\n      const g = a * (0.75 + 0.25 * exp(-3 * u)) * (floor0 + (1 - floor0) * bv);\n      stopCol(col, s, u, P.full);\n      for (let j = -2; j \u003c w + 2; j++) {\n        const xx = x + j;\n        if (xx \u003c 0 || xx >= W) continue;\n        const cr = j \u003c 0 || j >= w ? (j === -1 || j === w ? 0.2 : 0.07) : 0.6 + 0.4 * sin((PI * (j + 0.5)) / w);\n        const o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += col[n] * g * cr;\n      }\n    }\n    // The mouth: hot in the slot, flaring as the pipe speaks, and a glow round it.\n    stopCol(col, s, 0, P.full);\n    const cx = x + w / 2, cy = m + mh / 2, hot = a * (0.8 + 1.1 * P.chiff[i]);\n    for (let y = m - 4; y \u003c= m + mh + 4; y++)\n      for (let xx = x - 3; xx \u003c x + w + 3; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const e = ((xx + 0.5 - cx) / (w / 2 + 1.2)) ** 2 + ((y + 0.5 - cy) / 2.6) ** 2;\n        if (e > 3) continue;\n        const slot = y >= m && y \u003c m + mh && xx > x && xx \u003c x + w - 1;\n        const o = (y * W + xx) * 3, k = slot ? hot * 2 : hot * 0.5 * exp(-e * 1.3);\n        for (let n = 0; n \u003c 3; n++) F[o + n] += mix(col[n], 1, slot ? 0.7 : 0.2) * k;\n      }\n  }\n  // The candle flames, each with a halo in the air round it.\n  for (const [x, f] of [[10, P.fl], [53, P.fr]]) {\n    for (let y = 92; y \u003c= 100; y++)\n      for (let xx = x - 3; xx \u003c= x + 3; xx++) {\n        const e = (xx - x) ** 2 + ((y - 96.5) * 0.8) ** 2, o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += CAN[n] * 0.45 * f * exp(-e / 3);\n      }\n    for (const [y, c, k] of [[97, [255, 250, 225], 1], [96, [255, 236, 160], min(1, f)], [95, [255, 190, 80], cl(f, 0, 1)], [94, [255, 120, 30], cl(f - 0.8, 0, 1)]]) {\n      const o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = max(F[o + n], c[n] * k);\n    }\n  }\n  // Keys held down on the manual.\n  for (let i = 0; i \u003c NP; i++)\n    if (P.keys[i] > 0)\n      for (let y = 121; y \u003c= 125; y++)\n        for (let x = 3 * (i + 1); x \u003c 3 * (i + 1) + 2; x++) {\n          const o = (y * W + x) * 3;\n          for (let n = 0; n \u003c 3; n++) F[o + n] *= y === 125 ? 0.35 : 0.6;\n        }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, knee(F[o]), knee(F[o + 1]), knee(F[o + 2]));\n}\n\n// Light past 180 rolls off towards 255, so a speaking pipe keeps its colour.\nfunction knee(v) {\n  return (v \u003c 180 ? v : 255 - 75 * exp(-(v - 180) / 75)) | 0;\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stops","min":0,"max":1,"about":"The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too."},{"name":"Tempo","min":0.2,"max":3,"about":"At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one."},{"name":"Voices","min":1,"max":6,"about":"How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord."},{"name":"Tremulant","min":0,"max":1,"about":"The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them."}],"start":[0,2,1,0.06],"measures":{"motion":0.1017,"detail":0.1071,"edges":0.5078,"complexity":2.0828,"coverage":0.7769,"colour":0.1713,"drift":0.0578},"knobResponse":[0.0627,0.0467,0.0469,0.0424]},{"slug":"plait","title":"Plait","family":"textile","round":15,"note":"세 가닥이 바깥 가닥부터 가운데 위로 넘어가며 땋여 내려가요. 밑으로 들어가는 가닥은 어둡고, 다 땋으면 리본을 묶고 다음 가닥이 내려와요. K3 이 일곱 가닥 납작 땋기까지 가요.","idea":"Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.","buttons":"K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.","code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","layer":{"id":"layer-plait","type":"code","name":"plait","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the strands' colours together, starting from teal, blue and magenta."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds."},{"name":"Strands","min":3,"max":7,"about":"3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge."},{"name":"Tension","min":0,"max":1,"about":"At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7."}],"start":[0,2,3,0.06],"measures":{"motion":1.0033,"detail":0.0467,"edges":0.1711,"complexity":1.4043,"coverage":0.7414,"colour":0.4415,"drift":0.2976},"knobResponse":[0.2929,0.2273,0.2358,0.2751]},{"slug":"player-piano","title":"Player Piano","family":"music","round":15,"note":"자동 피아노의 구멍 뚫린 종이 두루마리가 내려와요. 구멍이 트래커 바를 지날 때마다 발치의 건반이 눌려 빛나요. 곡은 패턴이 그 자리에서 지어서, 화음은 가로줄로, 펼친 화음은 사선으로 읽혀요.","idea":"A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.","buttons":"K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.","code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-player-piano","type":"code","name":"player-piano","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the parts together, starting from a gold tune over a blue bass."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210."},{"name":"Hands","min":2,"max":5,"about":"2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next."},{"name":"Pedal","min":0,"max":1,"about":"At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise."}],"start":[0,2,2,0.06],"measures":{"motion":0.3229,"detail":0.0822,"edges":0.6181,"complexity":0.1256,"coverage":0.9461,"colour":0.1765,"drift":0.0751},"knobResponse":[0.0626,0.0796,0.0519,0.0503]},{"slug":"pole-vault","title":"Pole Vault","family":"sport","round":26,"note":"밤 경기장에서 카메라가 장대를 든 선수를 따라 달리고, 활처럼 휜 장대를 타고 거꾸로 오른 선수가 패널 꼭대기 가까운 가로대를 넘어 매트에 떨어지면 심판이 흰 깃발이나 빨간 깃발을 들어요. K3 이 가로대를 5.00 m 에서 6.20 m 까지 올리고, 누르면 다음 선수가 바로 달려요.","idea":"A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.","buttons":"K1 tap sends the next vaulter down the runway now.","code":"// ===== Patternflow pattern =====\n// Title:   Pole Vault\n// Family:  sport\n// Idea:    A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the pole vault in athletics\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1\n//\n// Knob 1: Colour. The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour.\n// Knob 2: Speed. Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2.\n// Knob 3: Bar. The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses.\n// Knob 4: Wind. Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run.\n// Buttons: K1 tap sends the next vaulter down the runway now.\n\nconst W = 64, H = 128, N = W * H;\n// The runway (GY), the pole's tip in the box, 14 rows a metre. A point z LEDs\n// nearer the camera lands OBX right and OBY down. The standards stand XS past\n// the box, ZS either side; the mat starts at MAT0, MZ either side, MH tall.\nconst GY = 104, BOXY = GY + 2, PXM = 14, OBX = 0.55, OBY = 0.22, XS = 5, ZS = 13, MAT0 = 3, MZ = 11, MH = 9;\n// The camera's left edge on the bar, gravity at Speed 2, the body.\nconst CAMF = -26, G = 170, TORSO = 4.2, ARM = 5, LEG = 3.3, TACC = 0.7, TA = 1.25, PSI1 = 1.64;\nconst [SET, RUN, POLE, FLY, MAT] = [0, 1, 2, 3, 4];\n// The stands texture: CW columns that wrap, rows ST to 83.\nconst CW = 256, ST = 17, CH = 84 - ST;\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, asin, acos, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst lerp = (a, b, u) => a + (b - a) * u;\nconst rnd = () => Math.random();\n// A camera flash somewhere in the stands.\nconst flash = (t0) => ({ x: floor(rnd() * W), y: ST + 2 + floor(rnd() * 64), t0 });\nconst F = (n) => new Float32Array(n);\nconst hash = (a, b) => ((Math.imul(a * 7919 + b * 104729, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\nconst md = (a, m) => ((a % m) + m) % m;\nconst sc3 = (c, k, o = 0) => [c[0] * k + o, c[1] * k + o, c[2] * k + o];\nlet C = null;\nconst put = (x, y, c) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && C.set(c, (y * W + x) * 3);\n\n// Poses: [time, body angle, arm, near hip, near knee, far hip, far knee]. On\n// the pole the body rocks back to head-down (-PI); after the half turn it\n// goes on the other way, face down over the bar and onto the back.\nconst TAKE = [1.5, 1.6, -0.5, 0.3];\nconst VAULT = [[0, 0.08, 0.15, 1.5, 1.6, -0.5, 0.3], [0.2, -0.3, 0.25, 1.1, 1.3, 0.6, 0.2], [0.42, -1.25, 0.4, 2.1, 1.8, 2, 1.5], [0.62, -2.4, 0.9, 0.9, 0.5, 0.8, 0.4], [0.82, -3.05, 2.5, 0.2, 0.05, 0.15, 0.05], [1, -3.14, 0.35, 0.1, 0, 0.1, 0]];\nconst FLYK = [[0, PI, 0.35, 0.1, 0, 0.1, 0], [1, 1.39 * PI, 0.4, 0.7, 0.4, 0.6, 0.5], [1.4, 1.95 * PI, 0.5, 0.6, 0.3, 0.5, 0.4], [2, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8]];\nconst MATK = [[0, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8], [0.4, 2.5 * PI, 1.7, 0.8, 0.9, 0.7, 1], [0.95, 2 * PI + 0.15, 2.7, 1.5, 1.8, 1.4, 1.7]];\nfunction key(T, u, out) {\n  let j = 0;\n  while (j \u003c T.length - 2 && u > T[j + 1][0]) j++;\n  const a = T[j], b = T[j + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  for (let i = 1; i \u003c 7; i++) out[i - 1] = a[i] + (b[i] - a[i]) * f;\n  return out;\n}\n// How far below the hip the lower foot is, for a body leaning th.\nconst drop = (th, L) => LEG * max(cos(th - L[0]) + cos(th - L[0] + L[1]), cos(th - L[2]) + cos(th - L[2] + L[3]));\n\n// Built once: the stands, two LEDs a seat in rows three deep, aisles, empty\n// seats in the team colour, the upper tier in the roof's shadow; the glare.\nfunction build(S) {\n  const cr = F(CW * CH * 3), seat = F(CW * CH), glare = F(30 * 128);\n  for (let y = 0; y \u003c CH; y++) {\n    const lo = y + ST >= 52, ty = y + ST - (lo ? 52 : ST), band = ty % 3, tier = floor(ty / 3) + lo * 40;\n    const li = lo ? 0.62 + (0.38 * ty) / 31 : 0.3 + (0.42 * ty) / 29;\n    for (let x = 0, sn = 0; x \u003c CW; x++, sn = x >> 1) {\n      let c = x % 48 \u003c 2 ? [58, 58, 64] : [20, 20, 25];\n      if (x % 48 > 1 && band \u003c 2)\n        if (hash(sn, tier) > 0.8) (seat[y * CW + x] = (0.24 + 0.08 * band) * li), (c = [3, 3, 4]);\n        else c = band ? sc3(hsv(hash(sn * 3, tier), 0.55, 0.2 + 0.14 * hash(tier, sn)), 255) : x & 1 ? [14, 11, 10] : hash(sn, tier + 99) \u003c 0.5 ? [112, 78, 58] : [60, 42, 32];\n      cr.set(sc3(c, li), (y * CW + x) * 3);\n    }\n  }\n  for (let i = 0; i \u003c 30 * 128; i++) {\n    const dx = (i % 128) - 64, dy = floor(i / 128) - 3.5, d2 = dx * dx + dy * dy;\n    glare[i] = 70 * exp(-d2 / 16) + 30 * exp(-d2 / 110) + 30 * exp(-dy * dy / 1.5 - abs(dx) / 12);\n  }\n  Object.assign(S, { cr, seat, glare });\n}\n\nexport function setup(params) {\n  const S = { t: 0, ph: SET, pt: 0, tset: 1.95, n: 0, notch: 0, miss: 0, base: 5, by: 34, cam: CAMF, wind: 0, hk: 0.13, marks: [], hudF: 0, verdict: 0, done: 0 };\n  Object.assign(S, { clear: true, fig: null, free: null, flashes: [], C: F(N * 3), q: F(6) });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  build(S);\n  params.s = S;\n  newVaulter(S);\n}\n\n// Each vaulter wears a different kit; the stand lights take the opposite colour.\nconst newVaulter = (S) => (S.vo = [0, 0.36, 0.62][S.n++ % 3]);\nfunction colours(S) {\n  const hue = (S.hk + S.vo) % 1, cols = [sc3(hsv(hue, 0.82, 1), 245), sc3(hsv((hue + 0.5) % 1, 0.75, 0.8), 210), [232, 168, 128], [150, 100, 70]];\n  S.cols = cols.concat(cols.map((c) => sc3(c, 0.62)));\n  S.acc = hsv((S.hk + 0.5) % 1, 0.75, 1);\n  S.tint = sc3(S.acc, 0.5, 0.5);\n}\n\n// The cut to the runway: the takeoff spot is where a straight pole reaches\n// the box from hands held straight up.\nfunction startRun(S) {\n  if (S.ph === MAT) newVaulter(S);\n  const h = S.base + 0.1 * S.notch, Lg = 92.5 - GY + PXM * h, th = 0.08, hy = GY - drop(th, TAKE) - 0.8;\n  const px = TORSO * sin(th) + ARM * sin(th + 0.15), py = hy - TORSO * cos(th) - ARM * cos(th + 0.15);\n  const dx = sqrt(Lg * Lg - (BOXY - py) ** 2), D = 88 + 16 * (h - 5);\n  S.R = { Lg, D, dist: 0, Xto: -dx - px, hy, bto: -asin((BOXY - py) / Lg), psi0: atan2(BOXY - py, dx) };\n  Object.assign(S, { ph: RUN, pt: 0, clear: rnd() \u003c 0.72 - 0.08 * S.notch, wob: rnd() \u003c 0.5, free: null, verdict: 0, done: 0, cam: S.R.Xto - D - 16 });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  runPose(S);\n}\n\nfunction runPose(S) {\n  const R = S.R, rem = R.D - R.dist, X = R.Xto - rem, ph = (R.dist / 15) * PI + 0.6, e2 = sm(1 - rem / 15), L = [];\n  for (let i = 0; i \u003c 2; i++) L.push(0.2 + 0.7 * sin(ph + i * PI), 0.25 + 1.3 * max(0, cos(ph + i * PI + 0.9)));\n  for (let i = 0; i \u003c 4; i++) L[i] = lerp(L[i], TAKE[i], e2);\n  const th = lerp(0.16, 0.08, e2), hy = lerp(GY - drop(th, L) - 0.3, R.hy, e2), e = sm(1 - rem / 19);\n  // The pole tip drops over the last strides; then the top hand goes up as\n  // the tip slides into the box.\n  const p1x = lerp(X - 1, X + TORSO * sin(th) + ARM * sin(th + 0.15), e), p1y = lerp(hy - 0.5, hy - TORSO * cos(th) - ARM * cos(th + 0.15), e);\n  const beta = lerp(lerp(1.25 + 0.04 * sin(ph * 2), 0.12, sm((70 - rem) / 51)), R.bto, e), dx = cos(beta), dy = -sin(beta);\n  S.fig = { x: X, y: hy, th, fc: 1, L, hands: [p1x, p1y, p1x + 4.5 * dx, p1y + 4.5 * dy] };\n  S.pole = { x: p1x - 2.5 * dx, y: p1y - 2.5 * dy, x1: p1x + R.Lg * dx, y1: p1y + R.Lg * dy };\n}\n\n// The bent pole as an arc of length L from the box to the top hand.\nconst ARC = F(5);\nfunction arc(px, py, c, L) {\n  const r = cl(c / L, 0.3, 1);\n  let x = sqrt(6 * (1 - r)) + 1e-4;\n  for (let i = 0; i \u003c 5; i++) x = cl(x - (sin(x) - r * x) / (cos(x) - r), 1e-4, 1.56);\n  const R = L / (2 * x), d = R * cos(x), cx = px / 2 + ((py - BOXY) / c) * d, cy = (py + BOXY) / 2 - (px / c) * d, a0 = atan2(BOXY - cy, -cx);\n  ARC.set([cx, cy, R, a0, md(atan2(py - cy, px - cx) - a0 + PI, 2 * PI) - PI]);\n  return ARC;\n}\n\nfunction polePose(S) {\n  const R = S.R, u = min(1, S.pt / TA), L = R.Lg;\n  const c = L * (1 - 0.25 * sin(PI * min(1, u / 0.78)) ** 1.4), psi = R.psi0 + (PSI1 - R.psi0) * (1 - (1 - u) ** 1.6);\n  const p1x = -c * cos(psi), p1y = BOXY - c * sin(psi), q = key(VAULT, u, S.q), th = q[0], a = q[1];\n  const fc = cos(PI * sm((u - 0.66) / 0.24)), ux = sin(th), uy = -cos(th);\n  // Hang the body from the top hand; the bottom hand is 4.5 LEDs down the arc.\n  const ax = ux * cos(a) + cos(th) * fc * sin(a), ay = uy * cos(a) + sin(th) * fc * sin(a);\n  const A = arc(p1x, p1y, c, L), b = A[3] + (A[4] * (L - 4.5)) / L;\n  S.fig = { x: p1x - ARM * ax - TORSO * ux, y: p1y - ARM * ay - TORSO * uy, th, fc, L: q.slice(2), hands: [p1x, p1y, A[0] + A[2] * cos(b), A[1] + A[2] * sin(b)] };\n  S.pole = { c, L, px: p1x, py: p1y };\n}\n\nfunction matPose(S, tau) {\n  const q = key(MATK, tau, S.q), c = S.clear, e = sm((tau - (c ? 1.1 : 1.6)) / 0.3), w = max(0, tau - 1.9) * 20, s = sin(w * 0.4);\n  let L = q.slice(2).map((v) => v * (1 - e)), arms = [lerp(q[1], c ? 0.25 : 2.9, e), lerp(q[1] + 0.3, c ? 0.45 : 3.1, e)];\n  // Up with arms high and a hop if the bar stayed; then off to the right.\n  const Y = lerp(GY - MH - 1 + 0.6 * sm((tau - 0.4) / 0.5), GY - MH - 6.6 - 1.5 * c * abs(sin((tau - 1.1) * 9)) * (tau \u003c 1.9), e);\n  if (w) [L, arms] = [[0.5 * s, 0.4, -0.5 * s, 0.4], [PI - 0.4 * s, PI + 0.4 * s]];\n  S.fig = { x: S.lx + 2 * sm(tau / 0.5) + w, y: w ? GY - MH - 6.6 : Y, th: w ? 0.05 : lerp(q[0], 2 * PI, e), fc: w ? 1 : -1, L, arms };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06];\n  const st = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2, first = S.t === 0;\n  S.hk = (0.13 + cl(k[0], 0, 1)) % 1;\n  S.base = round(cl(k[2], 5, 6.2) * 20) / 20;\n  S.wind = cl(k[3], -1, 1);\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === SET || S.ph === MAT)) startRun(S);\n  S.pt += st;\n  const R = S.R, b = S.bar, tau = S.pt, tgt = GY - PXM * (S.base + 0.1 * S.notch);\n  if (first) S.by = tgt;\n  if (b.st !== 1 && b.st !== 3) S.by += (tgt - S.by) * min(1, st * 3);\n  if (S.ph > POLE) S.cam = CAMF;\n\n  if (S.ph === SET) {\n    [S.cam, S.fig] = [CAMF, null];\n    if (tau >= S.tset) startRun(S);\n  } else if (S.ph === RUN) {\n    R.dist = min(R.D, R.dist + 62 * (1 + 0.12 * S.wind) * min(1, 0.3 + tau / TACC) * st);\n    const rem = R.D - R.dist;\n    runPose(S);\n    S.cam = R.Xto - rem - lerp(16, 6, sm(1 - rem / 40));\n    if (rem \u003c= 0) [S.ph, S.pt, R.cam] = [POLE, 0, S.cam];\n  } else if (S.ph === POLE) {\n    polePose(S);\n    S.cam = lerp(R.cam, CAMF, sm(tau / TA / 0.75));\n    if (tau >= TA) {\n      // Let go: the hips fly on to just over the bar, or into it.\n      const f = S.fig, ya = S.by - (S.clear ? 3.5 : 0.3), tap = sqrt((2 * max(3, f.y - ya)) / G);\n      S.fl = { x: f.x, y: f.y, vx: cl((XS + 1 - f.x) / tap, 6, 30), vy: G * tap, tap, tf: sqrt((2 * max(10, GY - MH - 1.5 - ya)) / G) };\n      S.free = { a: PI / 2 - PSI1, w: 1.4, L: R.Lg + 2.5, amax: acos(2 / (R.Lg + 2.5)) };\n      [S.ph, S.pt] = [FLY, 0];\n    }\n  } else if (S.ph === FLY) {\n    const f = S.fl, X = f.x + f.vx * tau, Y = f.y - f.vy * tau + 0.5 * G * tau * tau;\n    const q = key(FLYK, tau \u003c f.tap ? tau / f.tap : 1 + (tau - f.tap) / f.tf, S.q);\n    S.fig = { x: X, y: Y, th: q[0], fc: -1, L: q.slice(2), arms: [q[1], q[1] + 0.25] };\n    // Every camera in the house goes off at the top, the two in the infield first.\n    if (!f.fl && (f.fl = tau >= f.tap - 0.05))\n      for (let i = 0; i \u003c 18; i++) S.flashes.push(i \u003c 2 ? { x: i * 36 + 20, y: 114 + i * 5, t0: S.t + i * 0.1 } : flash(S.t + rnd() * 0.6));\n    if (tau >= f.tap + 0.05 && b.st === 0 && (!S.clear || S.wob)) [b.st, b.t] = [S.clear ? 2 : 1, 0];\n    if (tau > f.tap && Y >= GY - MH - 1.5) Object.assign(S, { ph: MAT, pt: 0, lx: X });\n  } else if (S.ph === MAT) {\n    matPose(S, tau);\n    if (tau >= 0.5 && !S.verdict) [S.verdict, S.hudF, S.miss] = [2 - S.clear, 1, S.miss + !S.clear, S.marks.push(S.clear ? \"0\" : \"X\")];\n    // A clearance puts the bar up a notch; a third miss sends it back.\n    if (tau >= 1.6 && !S.done && (S.done = 1) && (S.clear || S.miss >= 3)) [S.marks, S.miss, S.notch] = [[], 0, S.clear && S.notch \u003c 6 ? S.notch + 1 : 0];\n    if (tau >= 2.3 && b.st === 3) b.st = 4;\n    if (tau >= 2.9) Object.assign(S, { ph: SET, pt: 0, tset: 0.7, free: null }), newVaulter(S), (b.st = 0);\n  }\n\n  // The pole, once let go, falls back about the box onto the runway.\n  const P = S.free;\n  if (P) {\n    P.w += ((3 * G) / (2 * P.L)) * sin(P.a) * st;\n    P.a += P.w * st;\n    if (P.a > P.amax) [P.a, P.w] = [P.amax, P.w > 0.6 ? -0.3 * P.w : 0];\n  }\n  // The bar shivers, and when it was hit it falls off the pegs onto the mat.\n  b.t += st;\n  if (b.st === 1 && b.t > 0.3) Object.assign(b, { st: 3, y: [S.by - OBY * ZS, S.by + OBY * ZS], v: [0, 0] });\n  for (let i = 0, fl; i \u003c 2 && b.st === 3; i++) {\n    if (b.t \u003c 0.3 + i * 0.08) continue;\n    b.y[i] += (b.v[i] += G * st) * st;\n    if (b.y[i] > (fl = GY - MH + OBY * MZ * (2 * i - 1) - 0.5)) [b.y[i], b.v[i]] = [fl, b.v[i] > 40 ? -0.3 * b.v[i] : 0];\n  }\n  S.hudF = max(0, S.hudF - st * 1.6);\n  S.flashes = S.flashes.filter((f) => S.t - f.t0 \u003c 0.2);\n  if (rnd() \u003c st * 0.8) S.flashes.push(flash(S.t));\n}\n\n// A figure, hip at (hx, hy): th turns the body clockwise from upright, fc\n// faces it right (1) or left (-1). Arms reach for the hands, or hang at angles.\nconst PART = F(96);\nfunction figure(S, hx, hy, th, fc, arms, L, hands, cols, sc) {\n  hx -= S.cam;\n  const ux = sin(th), uy = -cos(th), fx = cos(th) * fc, fy = sin(th) * fc, nx = hx + ux * TORSO * sc, ny = hy + uy * TORSO * sc;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => (PART.set([ax, ay, bx, by, r * sc, c], n), (n += 6));\n  const limb = (x, y, a, l) => [x + l * sc * (ux * cos(a) + fx * sin(a)), y + l * sc * (uy * cos(a) + fy * sin(a))];\n  // Far limbs first and in shade, then the body, then the near limbs.\n  for (let side = 1; side >= 0; side--) {\n    const [kx, ky] = limb(hx, hy, PI - L[side * 2], LEG), d = side * 4;\n    const [ax, ay] = limb(kx, ky, PI - L[side * 2] + L[side * 2 + 1], LEG);\n    const [wx, wy] = hands ? [hands[side * 2] - S.cam, hands[side * 2 + 1]] : limb(nx, ny, arms[side], ARM);\n    part(hx, hy, kx, ky, 0.85, 1 + d);\n    part(kx, ky, ax, ay, 0.62, 2 + d);\n    part(nx, ny, wx, wy, 0.55, 2 + d);\n    if (side) part(hx, hy, nx, ny, 1.05, 0), part(nx + ux * 1.7 * sc, ny + uy * 1.7 * sc, nx + ux * 1.8 * sc, ny + uy * 1.8 * sc, 1.25, 3);\n  }\n  let [x0, x1, y0, y1] = [99, -99, 999, -99];\n  for (let j = 0; j \u003c n; j += 6) [x0, x1, y0, y1] = [min(x0, PART[j], PART[j + 2]), max(x1, PART[j], PART[j + 2]), min(y0, PART[j + 1], PART[j + 3]), max(y1, PART[j + 1], PART[j + 3])];\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, ceil(y1 + 2)); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, ceil(x1 + 2)); x++) {\n      const px = x + 0.5, py = y + 0.5, i = y * W + x;\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j], ay = PART[j + 1], dx = PART[j + 2] - ax, dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const col = cols[PART[j + 5]];\n        for (let c = 0; c \u003c 3; c++) C[i * 3 + c] += (col[c] - C[i * 3 + c]) * a;\n      }\n    }\n}\n\n// The pole, two samples an LED, each shared over four LEDs.\nconst POLEC = [235, 232, 214];\nfunction splat(x, y) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1), w = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy), k = (yy * W + xx) * 3;\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let c = 0; c \u003c 3; c++) C[k + c] += (POLEC[c] - C[k + c]) * w;\n  }\n}\nfunction seg(x0, y0, x1, y1) {\n  for (let i = 0, n = ceil(Math.hypot(x1 - x0, y1 - y0) * 2) + 1; i \u003c= n; i++) splat(lerp(x0, x1, i / n), lerp(y0, y1, i / n));\n}\n\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, M: 0x5fed, X: 0x5aad, \".\": 4 };\nfunction text(s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(x + (j % 3), y + floor(j / 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\n// A photographer kneeling in the infield, lens up at the bar.\nconst SNAP = \"..oo.....oo.cc.####c.######..####...###...##.##..\";\n\n// Sky, roof, stands, LED ribbon, boards, track and grass, each panning by its depth.\nfunction back(S) {\n  const { cr, seat } = S, cam = S.cam, t = S.t, A = S.acc, T = S.tint, s0 = round(cam * 0.4), bx = cam * 0.85;\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) {\n      let r, g, b, v = -1;\n      if (y \u003c 13) (r = 5 + y), (g = 8 + 1.2 * y + 4 * T[1]), (b = 22 + 2 * y);\n      else if (y \u003c ST) {\n        if (y === 15 && md(s0 + x, 3) === 0) v = 190;\n        else r = g = b = y === 13 ? 46 : y === 16 ? 10 : 22;\n      } else if (y >= 46 && y \u003c 52) {\n        v = y > 46 && y \u003c 51 ? (md(floor((s0 + x + t * 12) / 2) * 7 + y, 11) \u003c 5 ? 210 : 50) : 14;\n      } else if (y \u003c 84) {\n        const i = (y - ST) * CW + md(s0 + x, CW), sw = seat[i] * 255;\n        (r = cr[i * 3] * T[0] + sw * A[0]), (g = cr[i * 3 + 1] * T[1] + sw * A[1]), (b = cr[i * 3 + 2] * T[2] + sw * A[2]);\n      } else if (y \u003c 92) {\n        const u = x + bx, sg = floor(u / 40), l = u - sg * 40, on = y > 85 && y \u003c 90 && hash(floor((l + t * 9) / 2) + sg * 50, y) \u003c 0.5;\n        if (l \u003c 1 || y === 91) r = g = b = 6;\n        else if (md(sg, 2) ? on : !on) v = on ? 150 : 55;\n        else r = g = b = on ? 150 : 8;\n      } else if (y \u003c 107) {\n        // The track, then the runway with white edges and metre marks.\n        const X = x + cam, li = y > 100 ? 1 : 0.55 + 0.03 * (y - 92), sp = hash(md(floor(X), 997), y) * 14;\n        if (y === 96 || y === 101 || y === 106 || (y === 105 && md(floor(X), 14) === 0)) r = g = b = 175 * li;\n        else (r = (140 + sp) * li), (g = (58 + sp * 0.4) * li), (b = (40 + sp * 0.3) * li);\n      } else {\n        // Infield grass in mown stripes.\n        const q = (md(floor((x + cam * 1.15 + (y - 107) * 1.3) / 11), 2) ? 0.78 : 1) * (1 - (y - 107) * 0.02);\n        (r = 24 * q), (g = 74 * q), (b = 32 * q);\n      }\n      if (v >= 0) (r = A[0] * v + (y \u003c ST) * 60), (g = A[1] * v + (y \u003c ST) * 60), (b = A[2] * v + (y \u003c ST) * 60);\n      C[j] = r;\n      C[j + 1] = g;\n      C[j + 2] = b;\n    }\n  // Floodlight towers above the roof, and flags streaming or hanging limp.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 1; y \u003c 13; y++)\n      for (let x = xi - 5; x \u003c= xi + 5; x++)\n        if (y \u003c 7) put(x, y, y > 1 && y \u003c 6 && (x - xi) % 2 === 0 && abs(x - xi) \u003c 5 ? [255, 244, 222] : [40, 42, 52]);\n        else if (x === xi) put(x, y, [34, 36, 46]);\n  }\n  const wd = S.wind, e = cl(abs(wd) * 1.4 + 0.25, 0, 1) * (wd \u003c 0 ? -1 : 1), a = abs(e);\n  for (let fx = 20 - md(s0, 32) - 32; fx \u003c W + 6; fx += 32)\n    for (let i = 0; i \u003c 22; i++)\n      if (i \u003c 7) put(fx, 6 + i, [110, 110, 118]);\n      else put(round(fx + e * (i % 5 + 1)), 6 + floor((i - 7) / 5) + round((i % 5 + 1) * ((1 - a) * 0.9 + sin(t * (5 + 7 * a) - i) * 0.12 * a)), i > 11 && i \u003c 17 ? [235, 235, 235] : sc3(A, 230));\n  // The photographers in the infield, and camera flashes going off.\n  for (let k = 0; k \u003c 2; k++) for (let r = 0; r \u003c 49; r++) if (SNAP[r] !== \".\") put(round(k * 36 - 16 - cam * 1.15) + (r % 7), 113 + k * 5 + floor(r / 7), SNAP[r] === \"#\" && r > 6 ? [12, 14, 20] : [48, 48, 56]);\n  for (const f of S.flashes) {\n    const a = 1 - (t - f.t0) / 0.2;\n    for (let i = 0; i \u003c 25 && a \u003c= 1; i++) {\n      const dx = (i % 5) - 2, dy = floor(i / 5) - 2, x = f.x + dx, d = abs(dx) + abs(dy), j = ((f.y + dy) * W + x) * 3;\n      const v = (d ? (d > 1 ? (f.y > 100 && dx * dy === 0 ? 120 : 0) : 150) : 255) * a;\n      if (x >= 0 && x \u003c W && v > 0) for (let c = 0; c \u003c 3; c++) C[j + c] = max(C[j + c], v);\n    }\n  }\n}\n\n// The mat from a little above: the top, the end facing the runway and the side\n// facing us. Then the box and its stop board.\nfunction mat(S) {\n  const cam = S.cam, top = GY - MH, xe = round(-cam);\n  for (let y = 89; y \u003c 108; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const py = y + 0.5, X0 = x + 0.5 + cam, z = (py - top) / OBY, X = X0 - OBX * z, Xf = X0 - OBX * MZ, zl = (X0 - MAT0) / OBX, v = 0.86 + 0.012 * z;\n      if (abs(z) \u003c= MZ && X >= MAT0) put(x, y, md(X, 16) \u003c 1 || z > MZ - 1 ? [110, 150, 250] : [44 * v, 98 * v, 232 * v]);\n      else if (Xf >= MAT0 && py >= top + OBY * MZ && py \u003c= GY + OBY * MZ) put(x, y, abs(py - GY + 0.6) \u003c 0.6 && md(Xf, 9) > 3 ? [215, 220, 235] : md(Xf, 18) \u003c 1 ? [18, 40, 120] : [30, 66, 176]);\n      else if (abs(zl) \u003c= MZ && py >= top + OBY * zl && py \u003c= GY + OBY * zl) put(x, y, [22, 50, 140]);\n    }\n  for (let x = xe - 7; x \u003c= xe; x++) for (let y = GY - 1; y \u003c= GY + 1; y++) put(x, y, x === xe ? [200, 200, 212] : y \u003c GY ? [90, 90, 100] : [10, 10, 14]);\n}\n\nfunction standard(S, z) {\n  const x = round(XS + OBX * z - S.cam), yb = round(GY + OBY * z), yt = round(S.by + OBY * z - 5), near = z > 0;\n  for (let y = yt; y \u003c= yb; y++) for (let w = 0; w \u003c 1 + near; w++) put(x + w, y, sc3([1, 1.02, 1.12], (near ? (w ? 120 : 175) : 100) * (y === yt ? 1.25 : 1)));\n  for (let w = -2; w \u003c= 2; w++) put(x + w, yb, [60, 60, 66]);\n  put(x + (near ? -1 : 1), round(S.by + OBY * z), [220, 220, 225]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const cam = S.cam, P = S.pole, b = S.bar;\n  C = S.C;\n  colours(S);\n  back(S);\n  standard(S, -ZS);\n  mat(S);\n\n  // The pole: carried, bent into an arc in the box, then let go.\n  if (S.ph === RUN) seg(P.x - cam, P.y, P.x1 - cam, P.y1);\n  else if (S.ph === POLE) {\n    const A = arc(P.px, P.py, P.c, P.L), n = ceil(P.L * 2), a = A[3] + A[4], s = A[4] > 0 ? 2.5 : -2.5, ex = A[0] + A[2] * cos(a) - cam, ey = A[1] + A[2] * sin(a);\n    for (let i = 0; i \u003c= n; i++) splat(A[0] + A[2] * cos(A[3] + (A[4] * i) / n) - cam, A[1] + A[2] * sin(A[3] + (A[4] * i) / n));\n    seg(ex, ey, ex - s * sin(a), ey + s * cos(a));\n  } else if (S.free) seg(-cam, BOXY, -cam - S.free.L * sin(S.free.a), BOXY - S.free.L * cos(S.free.a));\n\n  // The bar, striped, on its pegs or on its way down.\n  let [y0, y1] = [S.by - OBY * ZS, S.by + OBY * ZS];\n  const w = b.st === 1 || b.st === 2 ? sin(b.t * 48) * exp(-b.t * (b.st === 2 ? 5 : 2)) * 1.3 : 0;\n  if (b.st >= 3) [y0, y1] = b.y;\n  for (let i = 0; i \u003c= 36 && b.st !== 4; i++) put(floor(lerp(XS - OBX * ZS, XS + OBX * ZS, i / 36) - cam), floor(lerp(y0 + w, y1 + w * 0.6, i / 36)), floor(i / 5.2) % 2 ? [240, 240, 236] : sc3(S.acc, 120, 60));\n\n  // The vaulter, then the near upright in front.\n  const f = S.fig;\n  if (f) figure(S, f.x, f.y, f.th, f.fc, f.arms, f.L, f.hands, S.cols, 1);\n  standard(S, ZS);\n\n  // The judge by the box, a flag up once the bar has settled.\n  const up = S.ph === MAT && S.verdict && S.pt \u003c 2.6, jc = [[34, 50, 120], [70, 70, 82], [225, 165, 125], [40, 40, 44]];\n  figure(S, -13.2, 101.6, 0, 1, [up ? 0.2 : 2.9, 2.95], [0, 0, 0, 0], null, jc.concat(jc), 0.85);\n  for (let r = 0; r \u003c 9 && up; r++) put(round(-12.3 - cam) + (r % 3), 91 + floor(r / 3), S.verdict === 1 ? [245, 245, 245] : [235, 25, 25]);\n\n  // Glare from the lamp banks, over everything.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 0; y \u003c 30; y++)\n      for (let x = max(0, xi - 60), j = (y * W + x) * 3; x \u003c min(W, xi + 60); x++, j += 3) {\n        const v = S.glare[y * 128 + x - xi + 64];\n        C[j] += v;\n        C[j + 1] += v * 0.96;\n        C[j + 2] += v * 0.88;\n      }\n  }\n\n  // The results board: height, marks at it, the vaulter's colours.\n  const hc = S.verdict === 1 ? [255, 255, 255] : [255, 40, 40];\n  for (let y = 1; y \u003c 13; y++) for (let x = 39; x \u003c 63; x++) for (let c = 0, j = (y * W + x) * 3; c \u003c 3; c++) C[j + c] = y === 1 ? S.acc[c] * 230 : C[j + c] * 0.2 + [6, 10, 26][c] * 0.8 + hc[c] * S.hudF * 0.75;\n  text((S.base + 0.1 * S.notch).toFixed(2) + \"M\", 41, 3, [255, 180, 40]);\n  S.marks.slice(-3).forEach((m, i) => text(m, 41 + i * 4, 8, m === \"X\" ? [255, 50, 40] : [240, 240, 240]));\n  for (let r = 0; r \u003c 30; r++) put(55 + (r % 6), 8 + floor(r / 6), r \u003c 12 ? S.cols[0] : S.cols[1]);\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","layer":{"id":"layer-pole-vault","type":"code","name":"pole-vault","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pole Vault\n// Family:  sport\n// Idea:    A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the pole vault in athletics\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1\n//\n// Knob 1: Colour. The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour.\n// Knob 2: Speed. Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2.\n// Knob 3: Bar. The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses.\n// Knob 4: Wind. Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run.\n// Buttons: K1 tap sends the next vaulter down the runway now.\n\nconst W = 64, H = 128, N = W * H;\n// The runway (GY), the pole's tip in the box, 14 rows a metre. A point z LEDs\n// nearer the camera lands OBX right and OBY down. The standards stand XS past\n// the box, ZS either side; the mat starts at MAT0, MZ either side, MH tall.\nconst GY = 104, BOXY = GY + 2, PXM = 14, OBX = 0.55, OBY = 0.22, XS = 5, ZS = 13, MAT0 = 3, MZ = 11, MH = 9;\n// The camera's left edge on the bar, gravity at Speed 2, the body.\nconst CAMF = -26, G = 170, TORSO = 4.2, ARM = 5, LEG = 3.3, TACC = 0.7, TA = 1.25, PSI1 = 1.64;\nconst [SET, RUN, POLE, FLY, MAT] = [0, 1, 2, 3, 4];\n// The stands texture: CW columns that wrap, rows ST to 83.\nconst CW = 256, ST = 17, CH = 84 - ST;\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, asin, acos, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst lerp = (a, b, u) => a + (b - a) * u;\nconst rnd = () => Math.random();\n// A camera flash somewhere in the stands.\nconst flash = (t0) => ({ x: floor(rnd() * W), y: ST + 2 + floor(rnd() * 64), t0 });\nconst F = (n) => new Float32Array(n);\nconst hash = (a, b) => ((Math.imul(a * 7919 + b * 104729, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\nconst md = (a, m) => ((a % m) + m) % m;\nconst sc3 = (c, k, o = 0) => [c[0] * k + o, c[1] * k + o, c[2] * k + o];\nlet C = null;\nconst put = (x, y, c) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && C.set(c, (y * W + x) * 3);\n\n// Poses: [time, body angle, arm, near hip, near knee, far hip, far knee]. On\n// the pole the body rocks back to head-down (-PI); after the half turn it\n// goes on the other way, face down over the bar and onto the back.\nconst TAKE = [1.5, 1.6, -0.5, 0.3];\nconst VAULT = [[0, 0.08, 0.15, 1.5, 1.6, -0.5, 0.3], [0.2, -0.3, 0.25, 1.1, 1.3, 0.6, 0.2], [0.42, -1.25, 0.4, 2.1, 1.8, 2, 1.5], [0.62, -2.4, 0.9, 0.9, 0.5, 0.8, 0.4], [0.82, -3.05, 2.5, 0.2, 0.05, 0.15, 0.05], [1, -3.14, 0.35, 0.1, 0, 0.1, 0]];\nconst FLYK = [[0, PI, 0.35, 0.1, 0, 0.1, 0], [1, 1.39 * PI, 0.4, 0.7, 0.4, 0.6, 0.5], [1.4, 1.95 * PI, 0.5, 0.6, 0.3, 0.5, 0.4], [2, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8]];\nconst MATK = [[0, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8], [0.4, 2.5 * PI, 1.7, 0.8, 0.9, 0.7, 1], [0.95, 2 * PI + 0.15, 2.7, 1.5, 1.8, 1.4, 1.7]];\nfunction key(T, u, out) {\n  let j = 0;\n  while (j \u003c T.length - 2 && u > T[j + 1][0]) j++;\n  const a = T[j], b = T[j + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  for (let i = 1; i \u003c 7; i++) out[i - 1] = a[i] + (b[i] - a[i]) * f;\n  return out;\n}\n// How far below the hip the lower foot is, for a body leaning th.\nconst drop = (th, L) => LEG * max(cos(th - L[0]) + cos(th - L[0] + L[1]), cos(th - L[2]) + cos(th - L[2] + L[3]));\n\n// Built once: the stands, two LEDs a seat in rows three deep, aisles, empty\n// seats in the team colour, the upper tier in the roof's shadow; the glare.\nfunction build(S) {\n  const cr = F(CW * CH * 3), seat = F(CW * CH), glare = F(30 * 128);\n  for (let y = 0; y \u003c CH; y++) {\n    const lo = y + ST >= 52, ty = y + ST - (lo ? 52 : ST), band = ty % 3, tier = floor(ty / 3) + lo * 40;\n    const li = lo ? 0.62 + (0.38 * ty) / 31 : 0.3 + (0.42 * ty) / 29;\n    for (let x = 0, sn = 0; x \u003c CW; x++, sn = x >> 1) {\n      let c = x % 48 \u003c 2 ? [58, 58, 64] : [20, 20, 25];\n      if (x % 48 > 1 && band \u003c 2)\n        if (hash(sn, tier) > 0.8) (seat[y * CW + x] = (0.24 + 0.08 * band) * li), (c = [3, 3, 4]);\n        else c = band ? sc3(hsv(hash(sn * 3, tier), 0.55, 0.2 + 0.14 * hash(tier, sn)), 255) : x & 1 ? [14, 11, 10] : hash(sn, tier + 99) \u003c 0.5 ? [112, 78, 58] : [60, 42, 32];\n      cr.set(sc3(c, li), (y * CW + x) * 3);\n    }\n  }\n  for (let i = 0; i \u003c 30 * 128; i++) {\n    const dx = (i % 128) - 64, dy = floor(i / 128) - 3.5, d2 = dx * dx + dy * dy;\n    glare[i] = 70 * exp(-d2 / 16) + 30 * exp(-d2 / 110) + 30 * exp(-dy * dy / 1.5 - abs(dx) / 12);\n  }\n  Object.assign(S, { cr, seat, glare });\n}\n\nexport function setup(params) {\n  const S = { t: 0, ph: SET, pt: 0, tset: 1.95, n: 0, notch: 0, miss: 0, base: 5, by: 34, cam: CAMF, wind: 0, hk: 0.13, marks: [], hudF: 0, verdict: 0, done: 0 };\n  Object.assign(S, { clear: true, fig: null, free: null, flashes: [], C: F(N * 3), q: F(6) });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  build(S);\n  params.s = S;\n  newVaulter(S);\n}\n\n// Each vaulter wears a different kit; the stand lights take the opposite colour.\nconst newVaulter = (S) => (S.vo = [0, 0.36, 0.62][S.n++ % 3]);\nfunction colours(S) {\n  const hue = (S.hk + S.vo) % 1, cols = [sc3(hsv(hue, 0.82, 1), 245), sc3(hsv((hue + 0.5) % 1, 0.75, 0.8), 210), [232, 168, 128], [150, 100, 70]];\n  S.cols = cols.concat(cols.map((c) => sc3(c, 0.62)));\n  S.acc = hsv((S.hk + 0.5) % 1, 0.75, 1);\n  S.tint = sc3(S.acc, 0.5, 0.5);\n}\n\n// The cut to the runway: the takeoff spot is where a straight pole reaches\n// the box from hands held straight up.\nfunction startRun(S) {\n  if (S.ph === MAT) newVaulter(S);\n  const h = S.base + 0.1 * S.notch, Lg = 92.5 - GY + PXM * h, th = 0.08, hy = GY - drop(th, TAKE) - 0.8;\n  const px = TORSO * sin(th) + ARM * sin(th + 0.15), py = hy - TORSO * cos(th) - ARM * cos(th + 0.15);\n  const dx = sqrt(Lg * Lg - (BOXY - py) ** 2), D = 88 + 16 * (h - 5);\n  S.R = { Lg, D, dist: 0, Xto: -dx - px, hy, bto: -asin((BOXY - py) / Lg), psi0: atan2(BOXY - py, dx) };\n  Object.assign(S, { ph: RUN, pt: 0, clear: rnd() \u003c 0.72 - 0.08 * S.notch, wob: rnd() \u003c 0.5, free: null, verdict: 0, done: 0, cam: S.R.Xto - D - 16 });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  runPose(S);\n}\n\nfunction runPose(S) {\n  const R = S.R, rem = R.D - R.dist, X = R.Xto - rem, ph = (R.dist / 15) * PI + 0.6, e2 = sm(1 - rem / 15), L = [];\n  for (let i = 0; i \u003c 2; i++) L.push(0.2 + 0.7 * sin(ph + i * PI), 0.25 + 1.3 * max(0, cos(ph + i * PI + 0.9)));\n  for (let i = 0; i \u003c 4; i++) L[i] = lerp(L[i], TAKE[i], e2);\n  const th = lerp(0.16, 0.08, e2), hy = lerp(GY - drop(th, L) - 0.3, R.hy, e2), e = sm(1 - rem / 19);\n  // The pole tip drops over the last strides; then the top hand goes up as\n  // the tip slides into the box.\n  const p1x = lerp(X - 1, X + TORSO * sin(th) + ARM * sin(th + 0.15), e), p1y = lerp(hy - 0.5, hy - TORSO * cos(th) - ARM * cos(th + 0.15), e);\n  const beta = lerp(lerp(1.25 + 0.04 * sin(ph * 2), 0.12, sm((70 - rem) / 51)), R.bto, e), dx = cos(beta), dy = -sin(beta);\n  S.fig = { x: X, y: hy, th, fc: 1, L, hands: [p1x, p1y, p1x + 4.5 * dx, p1y + 4.5 * dy] };\n  S.pole = { x: p1x - 2.5 * dx, y: p1y - 2.5 * dy, x1: p1x + R.Lg * dx, y1: p1y + R.Lg * dy };\n}\n\n// The bent pole as an arc of length L from the box to the top hand.\nconst ARC = F(5);\nfunction arc(px, py, c, L) {\n  const r = cl(c / L, 0.3, 1);\n  let x = sqrt(6 * (1 - r)) + 1e-4;\n  for (let i = 0; i \u003c 5; i++) x = cl(x - (sin(x) - r * x) / (cos(x) - r), 1e-4, 1.56);\n  const R = L / (2 * x), d = R * cos(x), cx = px / 2 + ((py - BOXY) / c) * d, cy = (py + BOXY) / 2 - (px / c) * d, a0 = atan2(BOXY - cy, -cx);\n  ARC.set([cx, cy, R, a0, md(atan2(py - cy, px - cx) - a0 + PI, 2 * PI) - PI]);\n  return ARC;\n}\n\nfunction polePose(S) {\n  const R = S.R, u = min(1, S.pt / TA), L = R.Lg;\n  const c = L * (1 - 0.25 * sin(PI * min(1, u / 0.78)) ** 1.4), psi = R.psi0 + (PSI1 - R.psi0) * (1 - (1 - u) ** 1.6);\n  const p1x = -c * cos(psi), p1y = BOXY - c * sin(psi), q = key(VAULT, u, S.q), th = q[0], a = q[1];\n  const fc = cos(PI * sm((u - 0.66) / 0.24)), ux = sin(th), uy = -cos(th);\n  // Hang the body from the top hand; the bottom hand is 4.5 LEDs down the arc.\n  const ax = ux * cos(a) + cos(th) * fc * sin(a), ay = uy * cos(a) + sin(th) * fc * sin(a);\n  const A = arc(p1x, p1y, c, L), b = A[3] + (A[4] * (L - 4.5)) / L;\n  S.fig = { x: p1x - ARM * ax - TORSO * ux, y: p1y - ARM * ay - TORSO * uy, th, fc, L: q.slice(2), hands: [p1x, p1y, A[0] + A[2] * cos(b), A[1] + A[2] * sin(b)] };\n  S.pole = { c, L, px: p1x, py: p1y };\n}\n\nfunction matPose(S, tau) {\n  const q = key(MATK, tau, S.q), c = S.clear, e = sm((tau - (c ? 1.1 : 1.6)) / 0.3), w = max(0, tau - 1.9) * 20, s = sin(w * 0.4);\n  let L = q.slice(2).map((v) => v * (1 - e)), arms = [lerp(q[1], c ? 0.25 : 2.9, e), lerp(q[1] + 0.3, c ? 0.45 : 3.1, e)];\n  // Up with arms high and a hop if the bar stayed; then off to the right.\n  const Y = lerp(GY - MH - 1 + 0.6 * sm((tau - 0.4) / 0.5), GY - MH - 6.6 - 1.5 * c * abs(sin((tau - 1.1) * 9)) * (tau \u003c 1.9), e);\n  if (w) [L, arms] = [[0.5 * s, 0.4, -0.5 * s, 0.4], [PI - 0.4 * s, PI + 0.4 * s]];\n  S.fig = { x: S.lx + 2 * sm(tau / 0.5) + w, y: w ? GY - MH - 6.6 : Y, th: w ? 0.05 : lerp(q[0], 2 * PI, e), fc: w ? 1 : -1, L, arms };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06];\n  const st = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2, first = S.t === 0;\n  S.hk = (0.13 + cl(k[0], 0, 1)) % 1;\n  S.base = round(cl(k[2], 5, 6.2) * 20) / 20;\n  S.wind = cl(k[3], -1, 1);\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === SET || S.ph === MAT)) startRun(S);\n  S.pt += st;\n  const R = S.R, b = S.bar, tau = S.pt, tgt = GY - PXM * (S.base + 0.1 * S.notch);\n  if (first) S.by = tgt;\n  if (b.st !== 1 && b.st !== 3) S.by += (tgt - S.by) * min(1, st * 3);\n  if (S.ph > POLE) S.cam = CAMF;\n\n  if (S.ph === SET) {\n    [S.cam, S.fig] = [CAMF, null];\n    if (tau >= S.tset) startRun(S);\n  } else if (S.ph === RUN) {\n    R.dist = min(R.D, R.dist + 62 * (1 + 0.12 * S.wind) * min(1, 0.3 + tau / TACC) * st);\n    const rem = R.D - R.dist;\n    runPose(S);\n    S.cam = R.Xto - rem - lerp(16, 6, sm(1 - rem / 40));\n    if (rem \u003c= 0) [S.ph, S.pt, R.cam] = [POLE, 0, S.cam];\n  } else if (S.ph === POLE) {\n    polePose(S);\n    S.cam = lerp(R.cam, CAMF, sm(tau / TA / 0.75));\n    if (tau >= TA) {\n      // Let go: the hips fly on to just over the bar, or into it.\n      const f = S.fig, ya = S.by - (S.clear ? 3.5 : 0.3), tap = sqrt((2 * max(3, f.y - ya)) / G);\n      S.fl = { x: f.x, y: f.y, vx: cl((XS + 1 - f.x) / tap, 6, 30), vy: G * tap, tap, tf: sqrt((2 * max(10, GY - MH - 1.5 - ya)) / G) };\n      S.free = { a: PI / 2 - PSI1, w: 1.4, L: R.Lg + 2.5, amax: acos(2 / (R.Lg + 2.5)) };\n      [S.ph, S.pt] = [FLY, 0];\n    }\n  } else if (S.ph === FLY) {\n    const f = S.fl, X = f.x + f.vx * tau, Y = f.y - f.vy * tau + 0.5 * G * tau * tau;\n    const q = key(FLYK, tau \u003c f.tap ? tau / f.tap : 1 + (tau - f.tap) / f.tf, S.q);\n    S.fig = { x: X, y: Y, th: q[0], fc: -1, L: q.slice(2), arms: [q[1], q[1] + 0.25] };\n    // Every camera in the house goes off at the top, the two in the infield first.\n    if (!f.fl && (f.fl = tau >= f.tap - 0.05))\n      for (let i = 0; i \u003c 18; i++) S.flashes.push(i \u003c 2 ? { x: i * 36 + 20, y: 114 + i * 5, t0: S.t + i * 0.1 } : flash(S.t + rnd() * 0.6));\n    if (tau >= f.tap + 0.05 && b.st === 0 && (!S.clear || S.wob)) [b.st, b.t] = [S.clear ? 2 : 1, 0];\n    if (tau > f.tap && Y >= GY - MH - 1.5) Object.assign(S, { ph: MAT, pt: 0, lx: X });\n  } else if (S.ph === MAT) {\n    matPose(S, tau);\n    if (tau >= 0.5 && !S.verdict) [S.verdict, S.hudF, S.miss] = [2 - S.clear, 1, S.miss + !S.clear, S.marks.push(S.clear ? \"0\" : \"X\")];\n    // A clearance puts the bar up a notch; a third miss sends it back.\n    if (tau >= 1.6 && !S.done && (S.done = 1) && (S.clear || S.miss >= 3)) [S.marks, S.miss, S.notch] = [[], 0, S.clear && S.notch \u003c 6 ? S.notch + 1 : 0];\n    if (tau >= 2.3 && b.st === 3) b.st = 4;\n    if (tau >= 2.9) Object.assign(S, { ph: SET, pt: 0, tset: 0.7, free: null }), newVaulter(S), (b.st = 0);\n  }\n\n  // The pole, once let go, falls back about the box onto the runway.\n  const P = S.free;\n  if (P) {\n    P.w += ((3 * G) / (2 * P.L)) * sin(P.a) * st;\n    P.a += P.w * st;\n    if (P.a > P.amax) [P.a, P.w] = [P.amax, P.w > 0.6 ? -0.3 * P.w : 0];\n  }\n  // The bar shivers, and when it was hit it falls off the pegs onto the mat.\n  b.t += st;\n  if (b.st === 1 && b.t > 0.3) Object.assign(b, { st: 3, y: [S.by - OBY * ZS, S.by + OBY * ZS], v: [0, 0] });\n  for (let i = 0, fl; i \u003c 2 && b.st === 3; i++) {\n    if (b.t \u003c 0.3 + i * 0.08) continue;\n    b.y[i] += (b.v[i] += G * st) * st;\n    if (b.y[i] > (fl = GY - MH + OBY * MZ * (2 * i - 1) - 0.5)) [b.y[i], b.v[i]] = [fl, b.v[i] > 40 ? -0.3 * b.v[i] : 0];\n  }\n  S.hudF = max(0, S.hudF - st * 1.6);\n  S.flashes = S.flashes.filter((f) => S.t - f.t0 \u003c 0.2);\n  if (rnd() \u003c st * 0.8) S.flashes.push(flash(S.t));\n}\n\n// A figure, hip at (hx, hy): th turns the body clockwise from upright, fc\n// faces it right (1) or left (-1). Arms reach for the hands, or hang at angles.\nconst PART = F(96);\nfunction figure(S, hx, hy, th, fc, arms, L, hands, cols, sc) {\n  hx -= S.cam;\n  const ux = sin(th), uy = -cos(th), fx = cos(th) * fc, fy = sin(th) * fc, nx = hx + ux * TORSO * sc, ny = hy + uy * TORSO * sc;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => (PART.set([ax, ay, bx, by, r * sc, c], n), (n += 6));\n  const limb = (x, y, a, l) => [x + l * sc * (ux * cos(a) + fx * sin(a)), y + l * sc * (uy * cos(a) + fy * sin(a))];\n  // Far limbs first and in shade, then the body, then the near limbs.\n  for (let side = 1; side >= 0; side--) {\n    const [kx, ky] = limb(hx, hy, PI - L[side * 2], LEG), d = side * 4;\n    const [ax, ay] = limb(kx, ky, PI - L[side * 2] + L[side * 2 + 1], LEG);\n    const [wx, wy] = hands ? [hands[side * 2] - S.cam, hands[side * 2 + 1]] : limb(nx, ny, arms[side], ARM);\n    part(hx, hy, kx, ky, 0.85, 1 + d);\n    part(kx, ky, ax, ay, 0.62, 2 + d);\n    part(nx, ny, wx, wy, 0.55, 2 + d);\n    if (side) part(hx, hy, nx, ny, 1.05, 0), part(nx + ux * 1.7 * sc, ny + uy * 1.7 * sc, nx + ux * 1.8 * sc, ny + uy * 1.8 * sc, 1.25, 3);\n  }\n  let [x0, x1, y0, y1] = [99, -99, 999, -99];\n  for (let j = 0; j \u003c n; j += 6) [x0, x1, y0, y1] = [min(x0, PART[j], PART[j + 2]), max(x1, PART[j], PART[j + 2]), min(y0, PART[j + 1], PART[j + 3]), max(y1, PART[j + 1], PART[j + 3])];\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, ceil(y1 + 2)); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, ceil(x1 + 2)); x++) {\n      const px = x + 0.5, py = y + 0.5, i = y * W + x;\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j], ay = PART[j + 1], dx = PART[j + 2] - ax, dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const col = cols[PART[j + 5]];\n        for (let c = 0; c \u003c 3; c++) C[i * 3 + c] += (col[c] - C[i * 3 + c]) * a;\n      }\n    }\n}\n\n// The pole, two samples an LED, each shared over four LEDs.\nconst POLEC = [235, 232, 214];\nfunction splat(x, y) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1), w = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy), k = (yy * W + xx) * 3;\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let c = 0; c \u003c 3; c++) C[k + c] += (POLEC[c] - C[k + c]) * w;\n  }\n}\nfunction seg(x0, y0, x1, y1) {\n  for (let i = 0, n = ceil(Math.hypot(x1 - x0, y1 - y0) * 2) + 1; i \u003c= n; i++) splat(lerp(x0, x1, i / n), lerp(y0, y1, i / n));\n}\n\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, M: 0x5fed, X: 0x5aad, \".\": 4 };\nfunction text(s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(x + (j % 3), y + floor(j / 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\n// A photographer kneeling in the infield, lens up at the bar.\nconst SNAP = \"..oo.....oo.cc.####c.######..####...###...##.##..\";\n\n// Sky, roof, stands, LED ribbon, boards, track and grass, each panning by its depth.\nfunction back(S) {\n  const { cr, seat } = S, cam = S.cam, t = S.t, A = S.acc, T = S.tint, s0 = round(cam * 0.4), bx = cam * 0.85;\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) {\n      let r, g, b, v = -1;\n      if (y \u003c 13) (r = 5 + y), (g = 8 + 1.2 * y + 4 * T[1]), (b = 22 + 2 * y);\n      else if (y \u003c ST) {\n        if (y === 15 && md(s0 + x, 3) === 0) v = 190;\n        else r = g = b = y === 13 ? 46 : y === 16 ? 10 : 22;\n      } else if (y >= 46 && y \u003c 52) {\n        v = y > 46 && y \u003c 51 ? (md(floor((s0 + x + t * 12) / 2) * 7 + y, 11) \u003c 5 ? 210 : 50) : 14;\n      } else if (y \u003c 84) {\n        const i = (y - ST) * CW + md(s0 + x, CW), sw = seat[i] * 255;\n        (r = cr[i * 3] * T[0] + sw * A[0]), (g = cr[i * 3 + 1] * T[1] + sw * A[1]), (b = cr[i * 3 + 2] * T[2] + sw * A[2]);\n      } else if (y \u003c 92) {\n        const u = x + bx, sg = floor(u / 40), l = u - sg * 40, on = y > 85 && y \u003c 90 && hash(floor((l + t * 9) / 2) + sg * 50, y) \u003c 0.5;\n        if (l \u003c 1 || y === 91) r = g = b = 6;\n        else if (md(sg, 2) ? on : !on) v = on ? 150 : 55;\n        else r = g = b = on ? 150 : 8;\n      } else if (y \u003c 107) {\n        // The track, then the runway with white edges and metre marks.\n        const X = x + cam, li = y > 100 ? 1 : 0.55 + 0.03 * (y - 92), sp = hash(md(floor(X), 997), y) * 14;\n        if (y === 96 || y === 101 || y === 106 || (y === 105 && md(floor(X), 14) === 0)) r = g = b = 175 * li;\n        else (r = (140 + sp) * li), (g = (58 + sp * 0.4) * li), (b = (40 + sp * 0.3) * li);\n      } else {\n        // Infield grass in mown stripes.\n        const q = (md(floor((x + cam * 1.15 + (y - 107) * 1.3) / 11), 2) ? 0.78 : 1) * (1 - (y - 107) * 0.02);\n        (r = 24 * q), (g = 74 * q), (b = 32 * q);\n      }\n      if (v >= 0) (r = A[0] * v + (y \u003c ST) * 60), (g = A[1] * v + (y \u003c ST) * 60), (b = A[2] * v + (y \u003c ST) * 60);\n      C[j] = r;\n      C[j + 1] = g;\n      C[j + 2] = b;\n    }\n  // Floodlight towers above the roof, and flags streaming or hanging limp.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 1; y \u003c 13; y++)\n      for (let x = xi - 5; x \u003c= xi + 5; x++)\n        if (y \u003c 7) put(x, y, y > 1 && y \u003c 6 && (x - xi) % 2 === 0 && abs(x - xi) \u003c 5 ? [255, 244, 222] : [40, 42, 52]);\n        else if (x === xi) put(x, y, [34, 36, 46]);\n  }\n  const wd = S.wind, e = cl(abs(wd) * 1.4 + 0.25, 0, 1) * (wd \u003c 0 ? -1 : 1), a = abs(e);\n  for (let fx = 20 - md(s0, 32) - 32; fx \u003c W + 6; fx += 32)\n    for (let i = 0; i \u003c 22; i++)\n      if (i \u003c 7) put(fx, 6 + i, [110, 110, 118]);\n      else put(round(fx + e * (i % 5 + 1)), 6 + floor((i - 7) / 5) + round((i % 5 + 1) * ((1 - a) * 0.9 + sin(t * (5 + 7 * a) - i) * 0.12 * a)), i > 11 && i \u003c 17 ? [235, 235, 235] : sc3(A, 230));\n  // The photographers in the infield, and camera flashes going off.\n  for (let k = 0; k \u003c 2; k++) for (let r = 0; r \u003c 49; r++) if (SNAP[r] !== \".\") put(round(k * 36 - 16 - cam * 1.15) + (r % 7), 113 + k * 5 + floor(r / 7), SNAP[r] === \"#\" && r > 6 ? [12, 14, 20] : [48, 48, 56]);\n  for (const f of S.flashes) {\n    const a = 1 - (t - f.t0) / 0.2;\n    for (let i = 0; i \u003c 25 && a \u003c= 1; i++) {\n      const dx = (i % 5) - 2, dy = floor(i / 5) - 2, x = f.x + dx, d = abs(dx) + abs(dy), j = ((f.y + dy) * W + x) * 3;\n      const v = (d ? (d > 1 ? (f.y > 100 && dx * dy === 0 ? 120 : 0) : 150) : 255) * a;\n      if (x >= 0 && x \u003c W && v > 0) for (let c = 0; c \u003c 3; c++) C[j + c] = max(C[j + c], v);\n    }\n  }\n}\n\n// The mat from a little above: the top, the end facing the runway and the side\n// facing us. Then the box and its stop board.\nfunction mat(S) {\n  const cam = S.cam, top = GY - MH, xe = round(-cam);\n  for (let y = 89; y \u003c 108; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const py = y + 0.5, X0 = x + 0.5 + cam, z = (py - top) / OBY, X = X0 - OBX * z, Xf = X0 - OBX * MZ, zl = (X0 - MAT0) / OBX, v = 0.86 + 0.012 * z;\n      if (abs(z) \u003c= MZ && X >= MAT0) put(x, y, md(X, 16) \u003c 1 || z > MZ - 1 ? [110, 150, 250] : [44 * v, 98 * v, 232 * v]);\n      else if (Xf >= MAT0 && py >= top + OBY * MZ && py \u003c= GY + OBY * MZ) put(x, y, abs(py - GY + 0.6) \u003c 0.6 && md(Xf, 9) > 3 ? [215, 220, 235] : md(Xf, 18) \u003c 1 ? [18, 40, 120] : [30, 66, 176]);\n      else if (abs(zl) \u003c= MZ && py >= top + OBY * zl && py \u003c= GY + OBY * zl) put(x, y, [22, 50, 140]);\n    }\n  for (let x = xe - 7; x \u003c= xe; x++) for (let y = GY - 1; y \u003c= GY + 1; y++) put(x, y, x === xe ? [200, 200, 212] : y \u003c GY ? [90, 90, 100] : [10, 10, 14]);\n}\n\nfunction standard(S, z) {\n  const x = round(XS + OBX * z - S.cam), yb = round(GY + OBY * z), yt = round(S.by + OBY * z - 5), near = z > 0;\n  for (let y = yt; y \u003c= yb; y++) for (let w = 0; w \u003c 1 + near; w++) put(x + w, y, sc3([1, 1.02, 1.12], (near ? (w ? 120 : 175) : 100) * (y === yt ? 1.25 : 1)));\n  for (let w = -2; w \u003c= 2; w++) put(x + w, yb, [60, 60, 66]);\n  put(x + (near ? -1 : 1), round(S.by + OBY * z), [220, 220, 225]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const cam = S.cam, P = S.pole, b = S.bar;\n  C = S.C;\n  colours(S);\n  back(S);\n  standard(S, -ZS);\n  mat(S);\n\n  // The pole: carried, bent into an arc in the box, then let go.\n  if (S.ph === RUN) seg(P.x - cam, P.y, P.x1 - cam, P.y1);\n  else if (S.ph === POLE) {\n    const A = arc(P.px, P.py, P.c, P.L), n = ceil(P.L * 2), a = A[3] + A[4], s = A[4] > 0 ? 2.5 : -2.5, ex = A[0] + A[2] * cos(a) - cam, ey = A[1] + A[2] * sin(a);\n    for (let i = 0; i \u003c= n; i++) splat(A[0] + A[2] * cos(A[3] + (A[4] * i) / n) - cam, A[1] + A[2] * sin(A[3] + (A[4] * i) / n));\n    seg(ex, ey, ex - s * sin(a), ey + s * cos(a));\n  } else if (S.free) seg(-cam, BOXY, -cam - S.free.L * sin(S.free.a), BOXY - S.free.L * cos(S.free.a));\n\n  // The bar, striped, on its pegs or on its way down.\n  let [y0, y1] = [S.by - OBY * ZS, S.by + OBY * ZS];\n  const w = b.st === 1 || b.st === 2 ? sin(b.t * 48) * exp(-b.t * (b.st === 2 ? 5 : 2)) * 1.3 : 0;\n  if (b.st >= 3) [y0, y1] = b.y;\n  for (let i = 0; i \u003c= 36 && b.st !== 4; i++) put(floor(lerp(XS - OBX * ZS, XS + OBX * ZS, i / 36) - cam), floor(lerp(y0 + w, y1 + w * 0.6, i / 36)), floor(i / 5.2) % 2 ? [240, 240, 236] : sc3(S.acc, 120, 60));\n\n  // The vaulter, then the near upright in front.\n  const f = S.fig;\n  if (f) figure(S, f.x, f.y, f.th, f.fc, f.arms, f.L, f.hands, S.cols, 1);\n  standard(S, ZS);\n\n  // The judge by the box, a flag up once the bar has settled.\n  const up = S.ph === MAT && S.verdict && S.pt \u003c 2.6, jc = [[34, 50, 120], [70, 70, 82], [225, 165, 125], [40, 40, 44]];\n  figure(S, -13.2, 101.6, 0, 1, [up ? 0.2 : 2.9, 2.95], [0, 0, 0, 0], null, jc.concat(jc), 0.85);\n  for (let r = 0; r \u003c 9 && up; r++) put(round(-12.3 - cam) + (r % 3), 91 + floor(r / 3), S.verdict === 1 ? [245, 245, 245] : [235, 25, 25]);\n\n  // Glare from the lamp banks, over everything.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 0; y \u003c 30; y++)\n      for (let x = max(0, xi - 60), j = (y * W + x) * 3; x \u003c min(W, xi + 60); x++, j += 3) {\n        const v = S.glare[y * 128 + x - xi + 64];\n        C[j] += v;\n        C[j + 1] += v * 0.96;\n        C[j + 2] += v * 0.88;\n      }\n  }\n\n  // The results board: height, marks at it, the vaulter's colours.\n  const hc = S.verdict === 1 ? [255, 255, 255] : [255, 40, 40];\n  for (let y = 1; y \u003c 13; y++) for (let x = 39; x \u003c 63; x++) for (let c = 0, j = (y * W + x) * 3; c \u003c 3; c++) C[j + c] = y === 1 ? S.acc[c] * 230 : C[j + c] * 0.2 + [6, 10, 26][c] * 0.8 + hc[c] * S.hudF * 0.75;\n  text((S.base + 0.1 * S.notch).toFixed(2) + \"M\", 41, 3, [255, 180, 40]);\n  S.marks.slice(-3).forEach((m, i) => text(m, 41 + i * 4, 8, m === \"X\" ? [255, 50, 40] : [240, 240, 240]));\n  for (let r = 0; r \u003c 30; r++) put(55 + (r % 6), 8 + floor(r / 6), r \u003c 12 ? S.cols[0] : S.cols[1]);\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour."},{"name":"Speed","min":0.2,"max":3,"about":"Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2."},{"name":"Bar","min":5,"max":6.2,"about":"The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses."},{"name":"Wind","min":-1,"max":1,"about":"Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run."}],"start":[0,2,5,0.06],"measures":{"motion":0.7696,"detail":0.0793,"edges":0.2827,"complexity":0.9294,"coverage":0.6904,"colour":0.1943,"drift":0.0642},"knobResponse":[0.0451,0.0895,0.0561,0.043]},{"slug":"polya-urn","title":"Pólya Urn","family":"data","round":38,"note":"폴리아 항아리 64개가 한 열에 하나씩 나란히 공을 뽑아요. 로그 시계를 따라 위에서는 크게 흔들리다 아래로 가며 저마다 다른 섞임 비율로 굳고, 한 판이 끝나면 열들이 굳은 비율대로 줄을 서서 고르게 퍼진 극한을 곧은 그러데이션으로 보여 줘요. K3 은 처음 공을 늘려 열들을 가운데 섞임으로 모으고, K4 는 한 번에 더하는 공을 늘려 바코드를 두 색으로 갈라요.","idea":"Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Pólya Urn\n// Family:  data\n// Idea:    Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Pólya's urn (Florian Eggenberger and George Pólya, 1923), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8\n//\n// Knob 1: Hue. Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive.\n// Knob 2: Speed. How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it.\n// Knob 3: Balls. The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends.\n// Knob 4: Added. Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one.\n\nconst W = 64, H = 128;\n// The clock: row r is draw n(r) = N0 ((1 + NMAX / N0)^(r / 127) - 1), 0 at\n// the top and NMAX at the bottom: the first draw lands on row 12, the tenth\n// on row 40, the hundredth on row 77.\nconst NMAX = 2000, N0 = 1;\n// One run fills the panel in FILL / Speed seconds; the finished run waits\n// HOLD1 seconds, sorts at SORTS transposition rounds a second, then shows the\n// ramp for HOLD2 seconds before the next run comes down over it.\nconst FILL = 16, HOLD1 = 1.2, SORTS = 26, HOLD2 = 3.2;\nconst { floor, min, max, abs, round, random, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Draw count at each row boundary.\nconst NAT = new Float64Array(H);\nfor (let r = 0; r \u003c H; r++) NAT[r] = round(N0 * (pow(1 + NMAX / N0, r / (H - 1)) - 1));\n\nexport function setup(params) {\n  params.s = {\n    init: false, phase: 0, t: 0, front: 0, rounds: 0, still: false,\n    balls: 1, added: 1, hue: 0, speed: 2,\n    // Each urn: balls of the first colour, all balls, draws made.\n    A: new Float64Array(W), T: new Float64Array(W), n: new Float64Array(W),\n    // Share of the first colour at each row, this run and the run before.\n    cur: new Float32Array(W * H), old: new Float32Array(W * H),\n    ca: [0, 0, 0], cb: [0, 0, 0],\n  };\n}\n\nfunction startRun(S) {\n  for (let i = 0; i \u003c W; i++) {\n    S.A[i] = S.balls;\n    S.T[i] = 2 * S.balls;\n    S.n[i] = 0;\n  }\n  S.front = 0;\n  S.t = 0;\n  S.phase = 0;\n  S.rounds = 0;\n  S.still = false;\n}\n\n// Run every urn on to row r's draw count and write the shares of the rows it\n// passes; the row the front stands in shows the share as it is now.\nfunction advance(S, rf) {\n  const { A, T, n, cur } = S, c = S.added;\n  const r1 = min(H - 1, floor(rf));\n  for (let i = 0; i \u003c W; i++) {\n    let a = A[i], t = T[i], k = n[i];\n    for (let r = S.front; r \u003c= r1; r++) {\n      const goal = NAT[r];\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[r * W + i] = a / t;\n    }\n    // Draws inside the row the front is crossing, toward the next row.\n    if (r1 \u003c H - 1) {\n      const goal = NAT[r1] + (NAT[r1 + 1] - NAT[r1]) * (rf - r1);\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[(r1 + 1) * W + i] = a / t;\n    }\n    A[i] = a;\n    T[i] = t;\n    n[i] = k;\n  }\n  S.front = r1 + 1;\n}\n\n// One round of odd-even transposition sort on the columns, by the bottom\n// row's share; whole columns move, their history with them.\nfunction sortRound(S) {\n  const { cur } = S, base = (H - 1) * W, odd = S.rounds & 1;\n  let moved = false;\n  for (let i = odd; i + 1 \u003c W; i += 2) {\n    if (cur[base + i] > cur[base + i + 1]) {\n      for (let r = 0; r \u003c H; r++) {\n        const p = r * W + i, v = cur[p];\n        cur[p] = cur[p + 1];\n        cur[p + 1] = v;\n      }\n      moved = true;\n    }\n  }\n  S.rounds++;\n  return moved;\n}\n\nfunction firstRun(S) {\n  // The panel opens on a finished run, so the first run comes down over it.\n  startRun(S);\n  advance(S, H - 1);\n  while (sortRound(S) || sortRound(S));\n  S.old.set(S.cur);\n  startRun(S);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const balls = round(cl(k[2], 1, 8)), added = round(cl(k[3], 1, 8));\n  // A change of Balls or Added starts a fresh run under the new rule.\n  if (S.init && (balls !== S.balls || added !== S.added)) {\n    S.balls = balls;\n    S.added = added;\n    // What is on the panel now becomes the run the new one comes down over.\n    if (S.phase === 0) S.old.set(S.cur.subarray(0, S.front * W));\n    else S.old.set(S.cur);\n    startRun(S);\n  }\n  S.balls = balls;\n  S.added = added;\n  if (!S.init) {\n    firstRun(S);\n    S.init = true;\n  }\n  S.t += d;\n  if (S.phase === 0) {\n    const rf = min(H - 1, (S.t * S.speed * (H - 1)) / FILL);\n    advance(S, rf);\n    if (rf >= H - 1) {\n      S.phase = 1;\n      S.t = 0;\n    }\n  } else if (S.phase === 1) {\n    if (S.t > HOLD1) {\n      S.phase = 2;\n      S.t = 0;\n    }\n  } else if (S.phase === 2) {\n    // Sorting rounds at SORTS a second; two rounds in a row that move\n    // nothing mean the columns are in order.\n    while (S.t > 1 / SORTS) {\n      S.t -= 1 / SORTS;\n      const moved = sortRound(S);\n      if (!moved && S.still) {\n        S.phase = 3;\n        S.t = 0;\n        break;\n      }\n      S.still = !moved;\n    }\n  } else if (S.t > HOLD2) {\n    S.old.set(S.cur);\n    startRun(S);\n  }\n}\n\nfunction colours(S) {\n  // The first colour, and the second a third of the wheel on; orange and\n  // yellow are paled and lifted.\n  for (const [h, out] of [[S.hue + 0.47, S.ca], [S.hue + 0.8, S.cb]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.12) / 0.1, 0, 1);\n    hsv(h, 0.78 - 0.3 * warm, 1, out);\n    if (warm > 0) {\n      const lift = 1 + 0.25 * warm;\n      out[0] = min(1, out[0] * lift);\n      out[1] = min(1, out[1] * lift);\n      out[2] = min(1, out[2] * lift);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  colours(S);\n  const { ca, cb, cur, old } = S;\n  const fill = S.phase === 0, fr = S.front;\n  for (let y = 0; y \u003c H; y++) {\n    const live = !fill || y \u003c fr;\n    const atFront = fill && y === fr - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, s = live ? cur[p] : old[p];\n      // The mix of the two colours by the share of the first, lifted halfway\n      // back to full brightness, so two colours either side of yellow mix to\n      // yellow and not olive. A mix in orange or yellow is lifted and paled\n      // further, a quarter of the way to white. The run before waits under\n      // the front at 70%, sorted, so the new barcode reads against its ramp.\n      let r = s * ca[0] + (1 - s) * cb[0], g = s * ca[1] + (1 - s) * cb[1], b = s * ca[2] + (1 - s) * cb[2];\n      const m = max(r, g, b), warm = cl((min(r, g) - b) / m, 0, 1);\n      const k = ((live ? 0.95 : 0.7) + (live ? 0.05 : 0.3) * warm) * (0.5 + 0.5 / m), pale = 0.25 * warm;\n      r = r * k + (1 - r * k) * pale;\n      g = g * k + (1 - g * k) * pale;\n      b = b * k + (1 - b * k) * pale;\n      if (atFront) {\n        r = r * 0.5 + 0.5;\n        g = g * 0.5 + 0.5;\n        b = b * 0.5 + 0.5;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","layer":{"id":"layer-polya-urn","type":"code","name":"polya-urn","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pólya Urn\n// Family:  data\n// Idea:    Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Pólya's urn (Florian Eggenberger and George Pólya, 1923), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8\n//\n// Knob 1: Hue. Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive.\n// Knob 2: Speed. How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it.\n// Knob 3: Balls. The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends.\n// Knob 4: Added. Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one.\n\nconst W = 64, H = 128;\n// The clock: row r is draw n(r) = N0 ((1 + NMAX / N0)^(r / 127) - 1), 0 at\n// the top and NMAX at the bottom: the first draw lands on row 12, the tenth\n// on row 40, the hundredth on row 77.\nconst NMAX = 2000, N0 = 1;\n// One run fills the panel in FILL / Speed seconds; the finished run waits\n// HOLD1 seconds, sorts at SORTS transposition rounds a second, then shows the\n// ramp for HOLD2 seconds before the next run comes down over it.\nconst FILL = 16, HOLD1 = 1.2, SORTS = 26, HOLD2 = 3.2;\nconst { floor, min, max, abs, round, random, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Draw count at each row boundary.\nconst NAT = new Float64Array(H);\nfor (let r = 0; r \u003c H; r++) NAT[r] = round(N0 * (pow(1 + NMAX / N0, r / (H - 1)) - 1));\n\nexport function setup(params) {\n  params.s = {\n    init: false, phase: 0, t: 0, front: 0, rounds: 0, still: false,\n    balls: 1, added: 1, hue: 0, speed: 2,\n    // Each urn: balls of the first colour, all balls, draws made.\n    A: new Float64Array(W), T: new Float64Array(W), n: new Float64Array(W),\n    // Share of the first colour at each row, this run and the run before.\n    cur: new Float32Array(W * H), old: new Float32Array(W * H),\n    ca: [0, 0, 0], cb: [0, 0, 0],\n  };\n}\n\nfunction startRun(S) {\n  for (let i = 0; i \u003c W; i++) {\n    S.A[i] = S.balls;\n    S.T[i] = 2 * S.balls;\n    S.n[i] = 0;\n  }\n  S.front = 0;\n  S.t = 0;\n  S.phase = 0;\n  S.rounds = 0;\n  S.still = false;\n}\n\n// Run every urn on to row r's draw count and write the shares of the rows it\n// passes; the row the front stands in shows the share as it is now.\nfunction advance(S, rf) {\n  const { A, T, n, cur } = S, c = S.added;\n  const r1 = min(H - 1, floor(rf));\n  for (let i = 0; i \u003c W; i++) {\n    let a = A[i], t = T[i], k = n[i];\n    for (let r = S.front; r \u003c= r1; r++) {\n      const goal = NAT[r];\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[r * W + i] = a / t;\n    }\n    // Draws inside the row the front is crossing, toward the next row.\n    if (r1 \u003c H - 1) {\n      const goal = NAT[r1] + (NAT[r1 + 1] - NAT[r1]) * (rf - r1);\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[(r1 + 1) * W + i] = a / t;\n    }\n    A[i] = a;\n    T[i] = t;\n    n[i] = k;\n  }\n  S.front = r1 + 1;\n}\n\n// One round of odd-even transposition sort on the columns, by the bottom\n// row's share; whole columns move, their history with them.\nfunction sortRound(S) {\n  const { cur } = S, base = (H - 1) * W, odd = S.rounds & 1;\n  let moved = false;\n  for (let i = odd; i + 1 \u003c W; i += 2) {\n    if (cur[base + i] > cur[base + i + 1]) {\n      for (let r = 0; r \u003c H; r++) {\n        const p = r * W + i, v = cur[p];\n        cur[p] = cur[p + 1];\n        cur[p + 1] = v;\n      }\n      moved = true;\n    }\n  }\n  S.rounds++;\n  return moved;\n}\n\nfunction firstRun(S) {\n  // The panel opens on a finished run, so the first run comes down over it.\n  startRun(S);\n  advance(S, H - 1);\n  while (sortRound(S) || sortRound(S));\n  S.old.set(S.cur);\n  startRun(S);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const balls = round(cl(k[2], 1, 8)), added = round(cl(k[3], 1, 8));\n  // A change of Balls or Added starts a fresh run under the new rule.\n  if (S.init && (balls !== S.balls || added !== S.added)) {\n    S.balls = balls;\n    S.added = added;\n    // What is on the panel now becomes the run the new one comes down over.\n    if (S.phase === 0) S.old.set(S.cur.subarray(0, S.front * W));\n    else S.old.set(S.cur);\n    startRun(S);\n  }\n  S.balls = balls;\n  S.added = added;\n  if (!S.init) {\n    firstRun(S);\n    S.init = true;\n  }\n  S.t += d;\n  if (S.phase === 0) {\n    const rf = min(H - 1, (S.t * S.speed * (H - 1)) / FILL);\n    advance(S, rf);\n    if (rf >= H - 1) {\n      S.phase = 1;\n      S.t = 0;\n    }\n  } else if (S.phase === 1) {\n    if (S.t > HOLD1) {\n      S.phase = 2;\n      S.t = 0;\n    }\n  } else if (S.phase === 2) {\n    // Sorting rounds at SORTS a second; two rounds in a row that move\n    // nothing mean the columns are in order.\n    while (S.t > 1 / SORTS) {\n      S.t -= 1 / SORTS;\n      const moved = sortRound(S);\n      if (!moved && S.still) {\n        S.phase = 3;\n        S.t = 0;\n        break;\n      }\n      S.still = !moved;\n    }\n  } else if (S.t > HOLD2) {\n    S.old.set(S.cur);\n    startRun(S);\n  }\n}\n\nfunction colours(S) {\n  // The first colour, and the second a third of the wheel on; orange and\n  // yellow are paled and lifted.\n  for (const [h, out] of [[S.hue + 0.47, S.ca], [S.hue + 0.8, S.cb]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.12) / 0.1, 0, 1);\n    hsv(h, 0.78 - 0.3 * warm, 1, out);\n    if (warm > 0) {\n      const lift = 1 + 0.25 * warm;\n      out[0] = min(1, out[0] * lift);\n      out[1] = min(1, out[1] * lift);\n      out[2] = min(1, out[2] * lift);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  colours(S);\n  const { ca, cb, cur, old } = S;\n  const fill = S.phase === 0, fr = S.front;\n  for (let y = 0; y \u003c H; y++) {\n    const live = !fill || y \u003c fr;\n    const atFront = fill && y === fr - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, s = live ? cur[p] : old[p];\n      // The mix of the two colours by the share of the first, lifted halfway\n      // back to full brightness, so two colours either side of yellow mix to\n      // yellow and not olive. A mix in orange or yellow is lifted and paled\n      // further, a quarter of the way to white. The run before waits under\n      // the front at 70%, sorted, so the new barcode reads against its ramp.\n      let r = s * ca[0] + (1 - s) * cb[0], g = s * ca[1] + (1 - s) * cb[1], b = s * ca[2] + (1 - s) * cb[2];\n      const m = max(r, g, b), warm = cl((min(r, g) - b) / m, 0, 1);\n      const k = ((live ? 0.95 : 0.7) + (live ? 0.05 : 0.3) * warm) * (0.5 + 0.5 / m), pale = 0.25 * warm;\n      r = r * k + (1 - r * k) * pale;\n      g = g * k + (1 - g * k) * pale;\n      b = b * k + (1 - b * k) * pale;\n      if (atFront) {\n        r = r * 0.5 + 0.5;\n        g = g * 0.5 + 0.5;\n        b = b * 0.5 + 0.5;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it."},{"name":"Balls","min":1,"max":8,"about":"The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends."},{"name":"Added","min":1,"max":8,"about":"Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one."}],"start":[0,2,1,1],"measures":{"motion":0.0395,"detail":0.0065,"edges":0.0554,"complexity":1.2351,"coverage":1,"colour":0.4287,"drift":0.1821},"knobResponse":[0.3523,0.0975,0.0619,0.0708]},{"slug":"pop-up-book","title":"Pop-up Book","family":"paper","round":21,"note":"탁자에 펼친 팝업북에서 성과 숲, 등대, 도시가 종이 카드 여러 겹으로 일어서고, 그동안 달이 홈을 따라 가고 사슴이 고개를 숙여요. 페이지가 넘어가면 장면이 가운데 접힌 선으로 납작하게 눕고, 넘어오는 페이지에서 다음 장면이 일어나요.","idea":"A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.","buttons":"K1 tap turns the page now.","code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-pop-up-book","type":"code","name":"pop-up-book","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":3,"about":"Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three."},{"name":"Layers","min":4,"max":6,"about":"How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain)."},{"name":"Lamp","min":0,"max":1,"about":"Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing."}],"start":[0,2,4,0.06],"measures":{"motion":0.2969,"detail":0.0558,"edges":0.4541,"complexity":0.5762,"coverage":0.9872,"colour":0.1893,"drift":0.1346},"knobResponse":[0.1392,0.0773,0.0475,0.1266]},{"slug":"popcorn","title":"Popcorn","family":"kitchen","round":19,"note":"영화관 팝콘 수레가 128줄을 다 써요. 케틀에서 낟알이 터져 뛰고 넘쳐 떨어지다가 케틀이 기울어 한 배치를 더미에 쏟고, K1 을 누르면 스쿱이 더미를 떠 가요.","idea":"A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.","buttons":"K1 tap sends the scoop in now.","code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-popcorn","type":"code","name":"popcorn","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1."},{"name":"Heat","min":0.2,"max":3,"about":"How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one."},{"name":"Batch","min":6,"max":16,"about":"The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap."},{"name":"Heap","min":0,"max":1,"about":"How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle."}],"start":[0,2,6,0.06],"measures":{"motion":0.2278,"detail":0.0649,"edges":0.5093,"complexity":0.7081,"coverage":0.9514,"colour":0.2616,"drift":0.0636},"knobResponse":[0.0358,0.0496,0.0725,0.0766]},{"slug":"population-pyramid","title":"Population Pyramid","family":"data","round":25,"note":"가상의 나라의 인구 피라미드가 한 살에 한 줄씩 움직여요. 왼쪽이 남자, 오른쪽이 여자이고, 10년마다 태어난 세대가 제 색 띠로 해마다 한 줄씩 올라가요. 1995년의 베이비붐 띠가 위로 올라가 2060년에 위가 무거운 항아리꼴이 되면, 1820년의 뾰족한 삼각형으로 돌아가 240년을 다시 지나요. K3 을 내리면 아래가 좁아져 거꾸로 선 피라미드가 되고, K1 을 누르면 그해가 전쟁이나 유행병이 되어 패인 홈이 위로 올라가요.","idea":"The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.","buttons":"K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.","code":"// ===== Patternflow pattern =====\n// Title:   Population Pyramid\n// Family:  data\n// Idea:    The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the animated age pyramids of national statistics offices and the cohort-component model demographers project with\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1\n//\n// Knob 1: Palette. Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part.\n// Knob 2: Speed. At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid.\n// Knob 3: Births. Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads.\n// Knob 4: Migration. Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed.\n// Buttons: K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, exp, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\n\n// Ages 0 to 105 have a row each; the top row holds everyone older.\nconst NA = 107;\n// Row of age 0, first bar column for men (going left) and for women (going right), the widest bar.\nconst [Y0, MX, FX, BAR] = [121, 30, 33, 23];\n// The story runs from 1820 to 2060 and goes back to 1820. The first start opens in OPEN, the boom in middle age and\n// the old reaching the top of the panel, with the years before it run unseen.\nconst [START, END, OPEN] = [1820, 2060, 1995];\n\n// Mortality level: 0 where a quarter of babies die in their first year and life lasts 30 to 33 years on average, 1 where it lasts 79 to 83.\nconst LK = [[1820, 0], [1850, 0.02], [1880, 0.14], [1910, 0.34], [1950, 0.66], [1975, 0.84], [2000, 0.94], [2060, 1]];\n// Children a woman, before Births scales them.\nconst TK = [[1820, 6], [1865, 6], [1885, 5.5], [1905, 4.3], [1926, 2.9], [1933, 2.2], [1940, 2.3], [1947, 3.1], [1955, 3.5], [1962, 3.3], [1968, 2.5], [1977, 1.8], [1992, 1.55], [2008, 1.25], [2035, 1.05], [2060, 1]];\n// Two wars, the influenza after the first, and a cholera year in the opening decade.\nconst EV = [[1914, 1918, 0], [1940, 1945, 0], [1919, 1919, 1], [1823, 1823, 1]];\n\nconst key = (K, y) => {\n  if (y \u003c= K[0][0]) return K[0][1];\n  for (let i = 1; i \u003c K.length; i++)\n    if (y \u003c= K[i][0]) {\n      const t = (y - K[i - 1][0]) / (K[i][0] - K[i - 1][0]);\n      return mix(K[i - 1][1], K[i][1], t * t * (3 - 2 * t));\n    }\n  return K[K.length - 1][1];\n};\n\n// Where in a woman's life the children come: a hump peaking at 28.\nconst PHI = new Float64Array(NA);\n{\n  let s = 0;\n  for (let a = 15; a \u003c 50; a++) s += PHI[a] = (a - 14) ** 2.5 * exp(-(a - 14) / 5.5);\n  for (let a = 15; a \u003c 50; a++) PHI[a] /= s;\n}\n// Where migrants are in life: around 26.\nconst MIG = new Float64Array(NA).map((_, a) => exp(-(((a - 26) / 8) ** 2)));\n\n// Yearly hazard of dying at age a. kind: -1 a plain year, 0 war, 1 epidemic, 2 famine.\nfunction hazard(a, L, male, kind) {\n  let h = a === 0 ? mix(0.27, 0.0035, L) : a \u003c 15 ? mix(0.04, 0.0003, L) * exp(-(a - 1) / 2.2) : 0;\n  h += mix(0.008, 0.0003, L) * (male && a > 14 && a \u003c 40 ? 1.9 : 1);\n  h += 0.1 * exp(0.1 * (a - mix(64, 86, L) - (male ? 0 : mix(2, 4, L))));\n  if (kind === 0 && male && a > 17 && a \u003c 43) h += 0.09;\n  if (kind === 1) h += 0.015 + (a > 17 && a \u003c 41 ? 0.025 : 0) + (a \u003c 5 ? 0.08 : 0) + (a > 64 ? 0.06 : 0);\n  if (kind === 2) h += 0.02 + (a \u003c 5 ? 0.07 : 0) + (a > 59 ? 0.04 : 0);\n  return h;\n}\n\n// A state is six rows of ages: men and women living here, the part of them who came as migrants, and those who left.\nconst SV = new Float64Array(NA);\n// One year of the cohort-component model: the dead leave, everyone is a year older, the year's births come in, migrants come or go.\nfunction step(src, dst, y, fk, mig, kind, push) {\n  const L = key(LK, y);\n  let b = 0;\n  for (let a = 15; a \u003c 50; a++) b += src[1][a] * PHI[a];\n  b *= key(TK, y) * fk * [1, 0.62, 0.75, 0.85][kind + 1] * (push ? 0.7 : 1);\n  for (let s = 0; s \u003c 2; s++) {\n    for (let a = 0; a \u003c NA; a++) SV[a] = exp(-hazard(a, L, !s, kind) * (a ? 1 : 0.5));\n    for (let k = s; k \u003c 6; k += 2) {\n      const S = src[k], D = dst[k];\n      D[NA - 1] = S[NA - 1] * SV[NA - 1] + S[NA - 2] * SV[NA - 2];\n      for (let a = NA - 2; a > 0; a--) D[a] = S[a - 1] * SV[a - 1];\n      D[0] = k \u003c 2 ? b * (s ? 0.488 : 0.512) * SV[0] : 0;\n    }\n    const [D, I, E] = [dst[s], dst[s + 2], dst[s + 4]];\n    for (let a = 12; a \u003c 60; a++)\n      if (mig > 0) {\n        const n = mig * 0.00045 * MIG[a] * (s ? 0.9 : 1.1);\n        (D[a] += n), (I[a] += n);\n      } else if (mig \u003c 0) {\n        const f = 1 - exp(mig * 0.035 * MIG[a]);\n        (E[a] += D[a] * f), (D[a] *= 1 - f), (I[a] *= 1 - f);\n      }\n  }\n  // Keep the people living here at one: the bars are shares of them.\n  let t = 0;\n  for (let a = 0; a \u003c NA; a++) t += dst[0][a] + dst[1][a];\n  for (const A of dst) for (let a = 0; a \u003c NA; a++) A[a] /= t;\n}\n\n// A crisis by the script, or by chance in the hungry decades.\nconst kindOf = (y) => {\n  for (const [a, b, k] of EV) if (y >= a && y \u003c= b) return k;\n  return y \u003c 1880 && rnd() \u003c 0.07 ? 2 : -1;\n};\n\n// 3x5 digits, then M and F.\nconst GL = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf, 0x5fed, 0x79a4];\n\nexport function setup(params) {\n  const S = () => Array.from({ length: 6 }, () => new Float64Array(NA));\n  params.s = { cur: S(), nxt: S(), tmp: S(), y: START, u: 0, scl: 0, f: new Float32Array(N * 3), ready: 0, war: 0, fade: 0, kinds: new Int8Array(END - START + 2) };\n}\n\n// Run the opening regime for 110 years, longer than anyone lives, so it reaches its own shape and the knobs show from the first frame,\n// then the story up to the year it opens on.\nfunction warm(P, fk, mig, open) {\n  for (let s = 0; s \u003c 6; s++) for (let a = 0; a \u003c NA; a++) P.cur[s][a] = s \u003c 2 ? exp(-0.04 * a) : 0;\n  for (let i = 0; i \u003c 110; i++) {\n    step(P.cur, P.tmp, START - 110 + i, fk, mig, rnd() \u003c 0.07 ? 2 : -1, 0);\n    [P.cur, P.tmp] = [P.tmp, P.cur];\n  }\n  P.y = START;\n  P.u = 0;\n  P.kinds.fill(-1);\n  next(P, fk, mig, 0);\n  while (P.y \u003c open) [P.cur, P.nxt] = [P.nxt, P.cur], P.y++, next(P, fk, mig, 0);\n  P.scl = 0;\n}\n\n// Work out the year being lived now, from the state at its first day.\nfunction next(P, fk, mig, push) {\n  const k = push ? push - 1 : kindOf(P.y);\n  P.kinds[P.y - START] = k;\n  step(P.cur, P.nxt, P.y, fk, mig, k, push);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const fk = exp(0.47 * cl(k[2], -1, 1)), k4 = cl(k[3], -1, 1), mig = Math.sign(k4) * max(0, abs(k4) - 0.1) / 0.9, spd = 1.5 * cl(k[1], 0.25, 6);\n  P.hue = k[0];\n  if (!P.ready) (P.ready = 1), warm(P, fk, mig, OPEN);\n  // K1 tap: this year is a war, then an epidemic, by turns.\n  if (input.btnPressed && input.btnPressed[0] && P.y \u003c END) next(P, fk, mig, (P.war ^= 1) ? 1 : 2);\n  if (P.fade > 0) {\n    // The story is over: hold the urn a moment, dim, start again from the old triangle, light up.\n    P.fade += d;\n    if (P.fade > 2 && P.y >= END) warm(P, fk, mig, START);\n    if (P.fade > 2.8) P.fade = 0;\n  } else {\n    P.u += d * spd;\n    for (let i = 0; i \u003c 6 && P.u >= 1; i++) {\n      P.u -= 1;\n      [P.cur, P.nxt] = [P.nxt, P.cur];\n      if (++P.y >= END) {\n        (P.u = 0), (P.fade = 0.001);\n        break;\n      }\n      next(P, fk, mig, 0);\n    }\n  }\n  // The widest bar sets the scale, followed gently so a single year does not jolt it.\n  let m = 1e-9;\n  for (let a = 0; a \u003c NA; a++) m = max(m, P.cur[0][a], P.cur[1][a], P.nxt[0][a], P.nxt[1][a]);\n  const want = BAR / m;\n  P.scl = P.scl ? P.scl * exp(cl(Math.log(want / P.scl), -1, 1) * min(1, d * 1.5)) : want;\n  P.scl = min(P.scl, (BAR + 0.5) / m);\n}\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i % 6].map((c) => c * 255);\n}\n\nlet FB;\nfunction put(x, y, c, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  FB[o] = c[0] * a;\n  FB[o + 1] = c[1] * a;\n  FB[o + 2] = c[2] * a;\n}\nfunction glyph(g, x, y, c, s = 1) {\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((GL[g] >> (14 - r * 3 - q)) & 1) for (let i = 0; i \u003c s; i++) for (let j = 0; j \u003c s; j++) put(x + q * s + j, y + r * s + i, c);\n}\nfunction num(n, x, y, c, w, s = 1) {\n  const t = String(n).padStart(w, \"0\");\n  for (let i = 0; i \u003c t.length; i++) glyph(+t[i], x + i * 4 * s, y, c, s);\n}\n\n// A birth decade's colours: the band, its migrants, its leavers and its label. Decades step bright, middle, dark;\n// the darker two keep off orange and yellow, which go brown and olive when dim.\nconst LV = [1, 0.66, 0.4];\nfunction decade(hue, c) {\n  const l = ((c % 3) + 3) % 3, h0 = hue + c * 0.137, h = l ? 0.2 + (h0 - floor(h0)) * 0.82 : h0;\n  return [hsv(h, 0.8, LV[l]), hsv(h, 0.3, max(0.8, LV[l])), hsv(h, 0.6, 0.55), hsv(h, 0.55, 1)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  FB = P.f;\n  FB.fill(0);\n  const u = P.u, hue = 0.55 + (P.hue || 0), vis = P.fade > 1.2 ? min(1, abs(P.fade - 2) / 0.8) : 1;\n  // The age-0 row holds last year's births; the bands move up a row half way through the year.\n  const yb = P.y - 1 + (u >= 0.5 ? 1 : 0);\n  const grid = [38, 38, 38], lab = [110, 110, 120];\n  // Faint lines every ten years of age, and the ages up the left side.\n  for (let a = 0; a \u003c= 100; a += 10) {\n    const y = Y0 - a;\n    for (let x = 1; x \u003c W; x += 2) put(x, y, grid);\n    if (a % 20 === 0) num(a, 0, y - 2, lab, 1);\n  }\n  // The bars, one row per year of age, mid-year between the two states.\n  const C = P.cur, X = P.nxt, at = (s, a) => mix(C[s][a], X[s][a], u) * P.scl, memo = {}, dec = (c) => memo[c] || (memo[c] = decade(hue, c));\n  for (let a = 0; a \u003c NA; a++) {\n    const y = Y0 - a, [c, pale, ghost] = dec(floor((yb - a) / 10));\n    for (let s = 0; s \u003c 2; s++) {\n      const len = min(BAR, at(s, a)), imm = min(len, at(s + 2, a)), out = min(BAR + 1 - len, at(s + 4, a));\n      const px = (i, q, f = 1) => put(s ? FX + i : MX - i, y, q, f);\n      const n = floor(len), fr = len - n;\n      for (let i = 0; i \u003c n; i++) px(i, i + 0.5 \u003c len - imm ? c : pale);\n      if (fr > 0.05) px(n, imm > 0.5 ? pale : c, fr);\n      // Those who left, dotted past the end of the bar.\n      for (let i = n + 1; i \u003c len + out; i++) if ((i + a) & 1) px(i, ghost);\n    }\n  }\n  // The birth decade of each band, written beside it on the right in its own colour.\n  for (let c = floor((yb - 106) / 10); c \u003c= floor(yb / 10); c++) {\n    const top = min(NA - 1, yb - c * 10), bot = max(0, yb - c * 10 - 9);\n    if (top - bot \u003c 4) continue;\n    // A decade with hardly anyone left keeps a dim label.\n    let w = 0;\n    for (let a = bot; a \u003c= top; a++) w = max(w, at(0, a), at(1, a));\n    num((c * 10) % 100, 57, Math.round(Y0 - cl(yb - c * 10 - 4.5, bot + 2, top - 2)) - 2, dec(c)[3].map((q) => q * cl(w / 3, 0.3, 1)), 2);\n  }\n  // The year being lived, in the colour of the decade being born, red in a year of war or epidemic.\n  const kind = P.kinds[P.y - START] ?? -1, ycol = kind === 0 || kind === 1 ? [255, 60, 40] : decade(hue, floor(P.y / 10))[3];\n  num(P.y, 17, 2, ycol, 4, 2);\n  glyph(10, 18, 123, lab), glyph(11, 43, 123, lab);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, FB[o] * vis) | 0, min(255, FB[o + 1] * vis) | 0, min(255, FB[o + 2] * vis) | 0);\n}\n","layer":{"id":"layer-population-pyramid","type":"code","name":"population-pyramid","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Population Pyramid\n// Family:  data\n// Idea:    The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the animated age pyramids of national statistics offices and the cohort-component model demographers project with\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1\n//\n// Knob 1: Palette. Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part.\n// Knob 2: Speed. At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid.\n// Knob 3: Births. Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads.\n// Knob 4: Migration. Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed.\n// Buttons: K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, exp, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\n\n// Ages 0 to 105 have a row each; the top row holds everyone older.\nconst NA = 107;\n// Row of age 0, first bar column for men (going left) and for women (going right), the widest bar.\nconst [Y0, MX, FX, BAR] = [121, 30, 33, 23];\n// The story runs from 1820 to 2060 and goes back to 1820. The first start opens in OPEN, the boom in middle age and\n// the old reaching the top of the panel, with the years before it run unseen.\nconst [START, END, OPEN] = [1820, 2060, 1995];\n\n// Mortality level: 0 where a quarter of babies die in their first year and life lasts 30 to 33 years on average, 1 where it lasts 79 to 83.\nconst LK = [[1820, 0], [1850, 0.02], [1880, 0.14], [1910, 0.34], [1950, 0.66], [1975, 0.84], [2000, 0.94], [2060, 1]];\n// Children a woman, before Births scales them.\nconst TK = [[1820, 6], [1865, 6], [1885, 5.5], [1905, 4.3], [1926, 2.9], [1933, 2.2], [1940, 2.3], [1947, 3.1], [1955, 3.5], [1962, 3.3], [1968, 2.5], [1977, 1.8], [1992, 1.55], [2008, 1.25], [2035, 1.05], [2060, 1]];\n// Two wars, the influenza after the first, and a cholera year in the opening decade.\nconst EV = [[1914, 1918, 0], [1940, 1945, 0], [1919, 1919, 1], [1823, 1823, 1]];\n\nconst key = (K, y) => {\n  if (y \u003c= K[0][0]) return K[0][1];\n  for (let i = 1; i \u003c K.length; i++)\n    if (y \u003c= K[i][0]) {\n      const t = (y - K[i - 1][0]) / (K[i][0] - K[i - 1][0]);\n      return mix(K[i - 1][1], K[i][1], t * t * (3 - 2 * t));\n    }\n  return K[K.length - 1][1];\n};\n\n// Where in a woman's life the children come: a hump peaking at 28.\nconst PHI = new Float64Array(NA);\n{\n  let s = 0;\n  for (let a = 15; a \u003c 50; a++) s += PHI[a] = (a - 14) ** 2.5 * exp(-(a - 14) / 5.5);\n  for (let a = 15; a \u003c 50; a++) PHI[a] /= s;\n}\n// Where migrants are in life: around 26.\nconst MIG = new Float64Array(NA).map((_, a) => exp(-(((a - 26) / 8) ** 2)));\n\n// Yearly hazard of dying at age a. kind: -1 a plain year, 0 war, 1 epidemic, 2 famine.\nfunction hazard(a, L, male, kind) {\n  let h = a === 0 ? mix(0.27, 0.0035, L) : a \u003c 15 ? mix(0.04, 0.0003, L) * exp(-(a - 1) / 2.2) : 0;\n  h += mix(0.008, 0.0003, L) * (male && a > 14 && a \u003c 40 ? 1.9 : 1);\n  h += 0.1 * exp(0.1 * (a - mix(64, 86, L) - (male ? 0 : mix(2, 4, L))));\n  if (kind === 0 && male && a > 17 && a \u003c 43) h += 0.09;\n  if (kind === 1) h += 0.015 + (a > 17 && a \u003c 41 ? 0.025 : 0) + (a \u003c 5 ? 0.08 : 0) + (a > 64 ? 0.06 : 0);\n  if (kind === 2) h += 0.02 + (a \u003c 5 ? 0.07 : 0) + (a > 59 ? 0.04 : 0);\n  return h;\n}\n\n// A state is six rows of ages: men and women living here, the part of them who came as migrants, and those who left.\nconst SV = new Float64Array(NA);\n// One year of the cohort-component model: the dead leave, everyone is a year older, the year's births come in, migrants come or go.\nfunction step(src, dst, y, fk, mig, kind, push) {\n  const L = key(LK, y);\n  let b = 0;\n  for (let a = 15; a \u003c 50; a++) b += src[1][a] * PHI[a];\n  b *= key(TK, y) * fk * [1, 0.62, 0.75, 0.85][kind + 1] * (push ? 0.7 : 1);\n  for (let s = 0; s \u003c 2; s++) {\n    for (let a = 0; a \u003c NA; a++) SV[a] = exp(-hazard(a, L, !s, kind) * (a ? 1 : 0.5));\n    for (let k = s; k \u003c 6; k += 2) {\n      const S = src[k], D = dst[k];\n      D[NA - 1] = S[NA - 1] * SV[NA - 1] + S[NA - 2] * SV[NA - 2];\n      for (let a = NA - 2; a > 0; a--) D[a] = S[a - 1] * SV[a - 1];\n      D[0] = k \u003c 2 ? b * (s ? 0.488 : 0.512) * SV[0] : 0;\n    }\n    const [D, I, E] = [dst[s], dst[s + 2], dst[s + 4]];\n    for (let a = 12; a \u003c 60; a++)\n      if (mig > 0) {\n        const n = mig * 0.00045 * MIG[a] * (s ? 0.9 : 1.1);\n        (D[a] += n), (I[a] += n);\n      } else if (mig \u003c 0) {\n        const f = 1 - exp(mig * 0.035 * MIG[a]);\n        (E[a] += D[a] * f), (D[a] *= 1 - f), (I[a] *= 1 - f);\n      }\n  }\n  // Keep the people living here at one: the bars are shares of them.\n  let t = 0;\n  for (let a = 0; a \u003c NA; a++) t += dst[0][a] + dst[1][a];\n  for (const A of dst) for (let a = 0; a \u003c NA; a++) A[a] /= t;\n}\n\n// A crisis by the script, or by chance in the hungry decades.\nconst kindOf = (y) => {\n  for (const [a, b, k] of EV) if (y >= a && y \u003c= b) return k;\n  return y \u003c 1880 && rnd() \u003c 0.07 ? 2 : -1;\n};\n\n// 3x5 digits, then M and F.\nconst GL = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf, 0x5fed, 0x79a4];\n\nexport function setup(params) {\n  const S = () => Array.from({ length: 6 }, () => new Float64Array(NA));\n  params.s = { cur: S(), nxt: S(), tmp: S(), y: START, u: 0, scl: 0, f: new Float32Array(N * 3), ready: 0, war: 0, fade: 0, kinds: new Int8Array(END - START + 2) };\n}\n\n// Run the opening regime for 110 years, longer than anyone lives, so it reaches its own shape and the knobs show from the first frame,\n// then the story up to the year it opens on.\nfunction warm(P, fk, mig, open) {\n  for (let s = 0; s \u003c 6; s++) for (let a = 0; a \u003c NA; a++) P.cur[s][a] = s \u003c 2 ? exp(-0.04 * a) : 0;\n  for (let i = 0; i \u003c 110; i++) {\n    step(P.cur, P.tmp, START - 110 + i, fk, mig, rnd() \u003c 0.07 ? 2 : -1, 0);\n    [P.cur, P.tmp] = [P.tmp, P.cur];\n  }\n  P.y = START;\n  P.u = 0;\n  P.kinds.fill(-1);\n  next(P, fk, mig, 0);\n  while (P.y \u003c open) [P.cur, P.nxt] = [P.nxt, P.cur], P.y++, next(P, fk, mig, 0);\n  P.scl = 0;\n}\n\n// Work out the year being lived now, from the state at its first day.\nfunction next(P, fk, mig, push) {\n  const k = push ? push - 1 : kindOf(P.y);\n  P.kinds[P.y - START] = k;\n  step(P.cur, P.nxt, P.y, fk, mig, k, push);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const fk = exp(0.47 * cl(k[2], -1, 1)), k4 = cl(k[3], -1, 1), mig = Math.sign(k4) * max(0, abs(k4) - 0.1) / 0.9, spd = 1.5 * cl(k[1], 0.25, 6);\n  P.hue = k[0];\n  if (!P.ready) (P.ready = 1), warm(P, fk, mig, OPEN);\n  // K1 tap: this year is a war, then an epidemic, by turns.\n  if (input.btnPressed && input.btnPressed[0] && P.y \u003c END) next(P, fk, mig, (P.war ^= 1) ? 1 : 2);\n  if (P.fade > 0) {\n    // The story is over: hold the urn a moment, dim, start again from the old triangle, light up.\n    P.fade += d;\n    if (P.fade > 2 && P.y >= END) warm(P, fk, mig, START);\n    if (P.fade > 2.8) P.fade = 0;\n  } else {\n    P.u += d * spd;\n    for (let i = 0; i \u003c 6 && P.u >= 1; i++) {\n      P.u -= 1;\n      [P.cur, P.nxt] = [P.nxt, P.cur];\n      if (++P.y >= END) {\n        (P.u = 0), (P.fade = 0.001);\n        break;\n      }\n      next(P, fk, mig, 0);\n    }\n  }\n  // The widest bar sets the scale, followed gently so a single year does not jolt it.\n  let m = 1e-9;\n  for (let a = 0; a \u003c NA; a++) m = max(m, P.cur[0][a], P.cur[1][a], P.nxt[0][a], P.nxt[1][a]);\n  const want = BAR / m;\n  P.scl = P.scl ? P.scl * exp(cl(Math.log(want / P.scl), -1, 1) * min(1, d * 1.5)) : want;\n  P.scl = min(P.scl, (BAR + 0.5) / m);\n}\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i % 6].map((c) => c * 255);\n}\n\nlet FB;\nfunction put(x, y, c, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  FB[o] = c[0] * a;\n  FB[o + 1] = c[1] * a;\n  FB[o + 2] = c[2] * a;\n}\nfunction glyph(g, x, y, c, s = 1) {\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((GL[g] >> (14 - r * 3 - q)) & 1) for (let i = 0; i \u003c s; i++) for (let j = 0; j \u003c s; j++) put(x + q * s + j, y + r * s + i, c);\n}\nfunction num(n, x, y, c, w, s = 1) {\n  const t = String(n).padStart(w, \"0\");\n  for (let i = 0; i \u003c t.length; i++) glyph(+t[i], x + i * 4 * s, y, c, s);\n}\n\n// A birth decade's colours: the band, its migrants, its leavers and its label. Decades step bright, middle, dark;\n// the darker two keep off orange and yellow, which go brown and olive when dim.\nconst LV = [1, 0.66, 0.4];\nfunction decade(hue, c) {\n  const l = ((c % 3) + 3) % 3, h0 = hue + c * 0.137, h = l ? 0.2 + (h0 - floor(h0)) * 0.82 : h0;\n  return [hsv(h, 0.8, LV[l]), hsv(h, 0.3, max(0.8, LV[l])), hsv(h, 0.6, 0.55), hsv(h, 0.55, 1)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  FB = P.f;\n  FB.fill(0);\n  const u = P.u, hue = 0.55 + (P.hue || 0), vis = P.fade > 1.2 ? min(1, abs(P.fade - 2) / 0.8) : 1;\n  // The age-0 row holds last year's births; the bands move up a row half way through the year.\n  const yb = P.y - 1 + (u >= 0.5 ? 1 : 0);\n  const grid = [38, 38, 38], lab = [110, 110, 120];\n  // Faint lines every ten years of age, and the ages up the left side.\n  for (let a = 0; a \u003c= 100; a += 10) {\n    const y = Y0 - a;\n    for (let x = 1; x \u003c W; x += 2) put(x, y, grid);\n    if (a % 20 === 0) num(a, 0, y - 2, lab, 1);\n  }\n  // The bars, one row per year of age, mid-year between the two states.\n  const C = P.cur, X = P.nxt, at = (s, a) => mix(C[s][a], X[s][a], u) * P.scl, memo = {}, dec = (c) => memo[c] || (memo[c] = decade(hue, c));\n  for (let a = 0; a \u003c NA; a++) {\n    const y = Y0 - a, [c, pale, ghost] = dec(floor((yb - a) / 10));\n    for (let s = 0; s \u003c 2; s++) {\n      const len = min(BAR, at(s, a)), imm = min(len, at(s + 2, a)), out = min(BAR + 1 - len, at(s + 4, a));\n      const px = (i, q, f = 1) => put(s ? FX + i : MX - i, y, q, f);\n      const n = floor(len), fr = len - n;\n      for (let i = 0; i \u003c n; i++) px(i, i + 0.5 \u003c len - imm ? c : pale);\n      if (fr > 0.05) px(n, imm > 0.5 ? pale : c, fr);\n      // Those who left, dotted past the end of the bar.\n      for (let i = n + 1; i \u003c len + out; i++) if ((i + a) & 1) px(i, ghost);\n    }\n  }\n  // The birth decade of each band, written beside it on the right in its own colour.\n  for (let c = floor((yb - 106) / 10); c \u003c= floor(yb / 10); c++) {\n    const top = min(NA - 1, yb - c * 10), bot = max(0, yb - c * 10 - 9);\n    if (top - bot \u003c 4) continue;\n    // A decade with hardly anyone left keeps a dim label.\n    let w = 0;\n    for (let a = bot; a \u003c= top; a++) w = max(w, at(0, a), at(1, a));\n    num((c * 10) % 100, 57, Math.round(Y0 - cl(yb - c * 10 - 4.5, bot + 2, top - 2)) - 2, dec(c)[3].map((q) => q * cl(w / 3, 0.3, 1)), 2);\n  }\n  // The year being lived, in the colour of the decade being born, red in a year of war or epidemic.\n  const kind = P.kinds[P.y - START] ?? -1, ycol = kind === 0 || kind === 1 ? [255, 60, 40] : decade(hue, floor(P.y / 10))[3];\n  num(P.y, 17, 2, ycol, 4, 2);\n  glyph(10, 18, 123, lab), glyph(11, 43, 123, lab);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, FB[o] * vis) | 0, min(255, FB[o + 1] * vis) | 0, min(255, FB[o + 2] * vis) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part."},{"name":"Speed","min":0.25,"max":6,"about":"At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid."},{"name":"Births","min":-1,"max":1,"about":"Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads."},{"name":"Migration","min":-1,"max":1,"about":"Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed."}],"start":[0,2,0,0.06],"measures":{"motion":0.1321,"detail":0.0783,"edges":0.6662,"complexity":0.212,"coverage":0.4183,"colour":0.3565,"drift":0.1142},"knobResponse":[0.1688,0.1844,0.07,0.0935]},{"slug":"potters-wheel","title":"Potter's Wheel","family":"pottery","round":24,"note":"밤의 도자기 공방에서 녹색 갓 램프 아래 물레가 돌아요. 두 손이 흙덩이를 가운데로 모아 벽을 끌어올리면 그릇이 76~92줄 높이로 자라고, 물레 자국이 램프 쪽에서 반짝이며 옆으로 흘러가요. 다 빚은 병과 항아리는 줄로 잘려 선반에 올라가 젖은 흙빛에서 하얗게 말라 가요. K1 이 흙을 테라코타에서 검은 흙까지 바꾸고, K1 을 누르면 그릇이 주저앉아요.","idea":"At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.","buttons":"K1 tap makes the wall slump, and the potter balls the clay up and centres it again.","code":"// ===== Patternflow pattern =====\n// Title:   Potter's Wheel\n// Family:  pottery\n// Idea:    At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after throwing a pot on the potter's wheel\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1\n//\n// Knob 1: Clay. The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it.\n// Knob 2: Speed. At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower.\n// Knob 3: Pots. How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln.\n// Knob 4: Lamp. Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it.\n// Buttons: K1 tap makes the wall slump, and the potter balls the clay up and centres it again.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, asin, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The wheel head's centre and radius, the splash pan round it, and the tilt\n// of the view: a circle r across on the wheel shows as an ellipse E * r tall.\nconst [CX, BY, E, WR, PR] = [32, 111, 0.21, 21, 34];\nconst PY = BY + 2.5;\n// Three shelf boards with seven slots each, the order the slots fill, and\n// the size a pot stands at on the shelf against its size on the wheel.\nconst SHELF = [26, 53, 80];\nconst SLOT = [];\nfor (const sy of SHELF) for (let i = 0; i \u003c 7; i++) SLOT.push([4.6 + i * 9.13, sy]);\nconst ORDER = [1, 5, 8, 12, 14, 20, 3, 9, 11, 0, 6, 7, 13, 15, 19, 2, 4, 10, 16, 18, 17];\nconst SHS = 0.27;\n\n// Each clay at every stage of drying, from thrown and wet to bone-dry.\nconst CLAY = [\n  [[255, 112, 56], [196, 96, 58], [238, 158, 108]],\n  [[236, 170, 104], [190, 148, 100], [244, 222, 182]],\n  [[194, 198, 206], [184, 184, 182], [250, 248, 240]],\n  [[110, 96, 96], [86, 80, 78], [156, 148, 142]],\n];\nconst SKIN = [150, 98, 76], WALL = [84, 62, 50], WOOD = [132, 90, 58], METAL = [150, 152, 156], PLASTIC = [76, 80, 90], SLEEVE = [58, 66, 86], SHINE = [255, 232, 196];\n\n// Pot shapes as a height and the radius at keys up the wall: cylinder, bottle,\n// vase with a belly and a flared lip, jar and trumpet vase on the wheel, and\n// bowls and cups from earlier in the evening on the shelves.\nconst SHAPES = [\n  (j) => [76 + 8 * j, [[0, 10.5], [0.45, 10.2 + j], [0.9, 9.6], [1, 11]]],\n  (j) => [84 + 8 * j, [[0, 11], [0.3, 14.5], [0.7, 4.2], [0.93, 4], [1, 5.6]]],\n  (j) => [82 + 8 * j, [[0, 8], [0.42, 15], [0.8, 5], [0.9, 5.4], [1, 9.5]]],\n  (j) => [76 + 6 * j, [[0, 8.5], [0.55, 15.5], [0.9, 9], [1, 10.5]]],\n  (j) => [86 + 6 * j, [[0, 9.5], [0.2, 9.8], [0.62, 5.5], [1, 14]]],\n  (j) => [26 + 6 * j, [[0, 7], [0.45, 14], [1, 19]]],\n  (j) => [40 + 6 * j, [[0, 9], [0.5, 11.5], [0.85, 10.5], [1, 12]]],\n];\nfunction key(K, v) {\n  let i = 0;\n  while (i \u003c K.length - 2 && v > K[i + 1][0]) i++;\n  return mix(K[i][1], K[i + 1][1], sm(K[i][0], K[i + 1][0], v));\n}\n// A radius looked up along a wall kept one entry per row.\nconst at = (pr, h, Hp, i) => ((h = cl(h, 0, Hp)), (i = h | 0), pr[i] + (pr[i + 1] - pr[i]) * (h - i));\nfunction newSpec(not, all) {\n  let type;\n  // The first throw of the night is always one of the three tallest.\n  do type = floor(rnd() * (all ? 7 : 5));\n  while (type === not || (not \u003c -1 && type % 3 === 0));\n  const [Hf, K0] = SHAPES[type](rnd()), g = 0.92 + 0.16 * rnd(), K = K0.map(([v, r]) => [v, r * g]);\n  const pr = F32(ceil(Hf) + 3);\n  for (let h = 0; h \u003c pr.length; h++) pr[h] = key(K, min(1, h / Hf)) + 1.4 * exp(-h / 2.2);\n  // Where the hands shape it: the belly, then the neck above.\n  let vb = 0.5, vn = 0.85, rb = 0, rn = 99;\n  for (const [v, r] of K) if (v > 0.1 && v \u003c 0.85 && r > rb) (rb = r), (vb = v);\n  for (const [v, r] of K) if (v > vb && v \u003c 1 && r \u003c rn) (rn = r), (vn = v);\n  return { type, Hf, pr, rim: K[K.length - 1][1], vb, vn };\n}\n\n// The steps of a throw, how long each takes at Speed 2, and how fast the\n// wheel turns through it (turns a second): slapped down, centred, opened,\n// three pulls, shaped, shown, wired off, lifted to the shelf, and the slump\n// and the balling up after a K1 tap.\nconst DUR = [0.45, 0.9, 0.5, 4.5, 2.6, 1.6, 0.9, 1.8, 1.2, 0.9];\nconst SPIN = [0.4, 1.3, 1.1, 0.95, 0.75, 0.65, 0.3, 0, 0.9, 1];\n// The cylinder after each pull, and its wall at the rim.\nconst RC = [12.5, 11.3, 10.5, 9.9], WALL_T = [4, 2.7, 2.1, 1.7];\nconst cyl = (k, h) => RC[k] - 0.012 * h + 1.4 * exp(-h / 2.2);\nconst dome = (v, r) => r * sqrt(max(0, 1 - v ** 2.4)) + 1.2 * exp(-v * 8);\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, rot: 0, w: 0.4, H: 11, ri: 0, wa: 0, wt: 0, yo: 0, sH: 11, sri: 0, n: 6, LX: 12, clay: 0,\n    pr: F32(128), snap: F32(128), f: F32(N * 3), bg: F32(N * 3),\n    hd: null, hs: null, g: null, wire: -1, pieces: [], sp: [], dr: [], free: 0, bgKey: -1,\n  });\n  P.spec = newSpec(-2);\n  // The pieces already on the shelves, newest first.\n  for (let i = 0; i \u003c 21; i++) P.pieces.push({ slot: ORDER[i], spec: newSpec(i ? P.pieces[i - 1].spec.type : -1, 1), dry: min(1, 0.1 + i * 0.17) });\n  // Old slip spattered in the pan.\n  for (let i = 0; i \u003c 60; i++) {\n    const a = rnd() * TAU, r = 0.66 + 0.3 * rnd();\n    P.sp.push(i \u003c 44 ? [CX + PR * r * sin(a), PY + PR * E * r * cos(a), rnd() \u003c 0.3 ? 2 : 1, 0.6 + 0.5 * rnd()] : [2 + rnd() * 60, PY + 8 + rnd() * 4, 1, 0.5 + 0.4 * rnd()]);\n  }\n  shape(P, 0);\n}\n\nfunction go(P, ph) {\n  // The oldest piece on show goes to the kiln and the new pot takes its place.\n  if (ph === 7) P.free = P.pieces.splice(min(P.n, P.pieces.length) - 1, 1)[0].slot;\n  if (ph === 0 && P.ph === 7) P.pieces.unshift({ slot: P.free, spec: P.spec, dry: 0 }), (P.spec = newSpec(P.spec.type));\n  P.snap.set(P.pr);\n  Object.assign(P, { ph, pt: 0, sH: P.H, sri: P.ri });\n}\n\nfunction fill(P, Hn, f) {\n  P.H = Hn;\n  for (let h = 0, n = min(126, ceil(Hn) + 2); h \u003c= n; h++) P.pr[h] = max(0, f(min(h, Hn)));\n}\nconst snapR = (P, v) => at(P.snap, v * P.sH, P.sH);\nconst offset = (P, h) => P.wa * sin(P.rot) + P.wt * (cl(h / P.H, 0, 1) ** 1.5) * sin(P.rot + 0.8);\n\n// The clay's wall for this moment of the throw, and where the hands are.\nfunction shape(P, p) {\n  const sp = P.spec;\n  let hand = null;\n  Object.assign(P, { wa: 0, wt: 0.2, yo: 0, g: null, wire: -1, ring: 0.07 });\n  switch (P.ph) {\n    case 0: {\n      // Slapped down from the hands, squashing as it lands.\n      const sq = p > 0.6 ? 1 - 0.3 * sin((PI * (p - 0.6)) / 0.4) : 1, r = 10.5 / sqrt(sq), Hn = 11 * sq;\n      P.yo = p \u003c 0.6 ? -56 * (1 - (p / 0.6) ** 2) : 0;\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 0.8), (P.ring = 0.04);\n      hand = [5, -0.3, 0];\n      break;\n    }\n    case 1: {\n      // Centred: coned up and pressed down again while the wobble dies.\n      const Hn = 11 + 10 * sin(PI * sm(0.1, 0.9, p)), r = 10.5 * sqrt(11 / Hn);\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 2.6 * (1 - sm(0, 0.8, p))), (P.ring = 0.05);\n      hand = [Hn * 0.42, -0.5 + 0.4 * sin(p * 20), 0];\n      break;\n    }\n    case 2: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 13, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), cyl(0, h), q));\n      (P.ri = (RC[0] - WALL_T[0]) * sm(0.15, 1, p)), (P.ring = 0.07);\n      hand = [Hn - 1.5, -0.2, 0];\n      break;\n    }\n    case 3: {\n      // Three pulls. The hands squeeze the wall from the base to the rim and\n      // a roll of clay rides up ahead of them.\n      const k = min(2, floor(P.pt / 1.5)), a = (P.pt - k * 1.5) / 1.2, Hp = sp.Hf * 0.93;\n      const HS = [13, mix(13, Hp, 0.55), mix(13, Hp, 0.82), Hp];\n      if (a \u003c= 1) {\n        const Hn = mix(HS[k], HS[k + 1], sm(0, 1, a)), hh = Hn * min(1, a * 1.04) * 0.95, roll = 1.3 * (1 - sm(0.9, 1, a));\n        fill(P, Hn, (h) => mix(cyl(k + 1, h), cyl(k, h), sm(hh - 1, hh + 2.5, h)) + roll * exp(-(((h - hh - 2.6) / 2.2) ** 2)) - 0.8 * exp(-(((h - hh) / 1.4) ** 2)));\n        P.ri = mix(RC[k] - WALL_T[k], RC[k + 1] - WALL_T[k + 1], sm(0.85, 1, a));\n        hand = [hh, -0.3, 0];\n      } else {\n        const Hn = HS[k + 1], b = (a - 1) / 0.25;\n        fill(P, Hn, (h) => cyl(k + 1, h));\n        P.ri = RC[k + 1] - WALL_T[k + 1];\n        hand = [mix(Hn * 0.95, 3, sm(0, 1, b)), 1.5 * sin(PI * b), 0];\n      }\n      break;\n    }\n    case 4: {\n      // Shaped: the belly pushed out from inside, then the neck collared in.\n      const q = sm(0, 1, p), Hn = mix(P.sH, sp.Hf, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), at(sp.pr, (h / Hn) * sp.Hf, sp.Hf), q));\n      P.ri = mix(P.sri, sp.rim - 1.4, q);\n      hand = [Hn * mix(sp.vb, sp.vn, sm(0.4, 0.75, p)), -0.2, 0];\n      break;\n    }\n    case 8: {\n      // Slumped: the wall sinks, bellies and flops round as the wheel turns.\n      const q = sm(0, 1, p), Hn = mix(P.sH, max(12, P.sH * 0.3), q ** 0.8);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), snapR(P, (h / Hn) * 0.6) * (1 + 0.7 * (h / Hn) ** 2) + (3 * h) / Hn, q));\n      P.ri = P.sri > 0 ? max(0, at(P.pr, Hn, Hn) - 1.8) : 0;\n      (P.wt = 6 * sin(PI * min(1, p * 1.3)) + 2), (P.wa = 1);\n      hand = [Hn * 0.5, 4 + 20 * sm(0, 0.3, p), 10 * sm(0, 0.3, p)];\n      break;\n    }\n    case 9: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 11, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), dome(h / Hn, 10.5), q));\n      (P.ri = P.sri * (1 - q)), (P.wa = 2.6), (P.wt = 2 * (1 - q)), (P.ring = 0.04);\n      hand = [Hn * 0.45, mix(6, -0.5, sm(0, 0.5, p)), 0];\n      break;\n    }\n    default: {\n      fill(P, sp.Hf, (h) => at(sp.pr, h, sp.Hf));\n      P.ri = sp.rim - 1.4;\n      // Shown: the hands come away.\n      if (P.ph === 5) hand = [sp.Hf * sp.vn, 2 + 30 * sm(0, 0.6, p), 22 * sm(0, 0.6, p)];\n      if (P.ph === 6) {\n        // Wired off: the hands come in to the wheel and draw the wire under.\n        const a = sm(0, 0.25, p), q = sm(0.25, 1, p), y = mix(BY + 20, BY + E * P.pr[0] * (1 - 2 * q) + 0.5, a);\n        P.wire = a \u003c 1 ? -1 : q;\n        P.hd = [CX - mix(40, 25, a), y, CX + mix(40, 25, a), y];\n        return;\n      }\n      if (P.ph === 7) {\n        // Lifted, then carried back to its slot on the shelf.\n        const q1 = sm(0, 0.3, p), q2 = sm(0.3, 1, p), [sx, sy] = SLOT[P.free], s = mix(1, SHS, q2 ** 0.6);\n        P.g = [mix(CX, sx, q2), mix(BY - 9 * q1, sy + 0.5, q2) - 14 * sin(PI * q2), s];\n        if (q2 \u003c 0.5) {\n          const r = sp.pr[3] * s, y = P.g[1] - 3 * s + 40 * sm(0.2, 0.5, q2);\n          P.hd = [P.g[0] - r, y, P.g[0] + r, y];\n        } else P.hd = null;\n        return;\n      }\n    }\n  }\n  if (hand) {\n    const [h, gap, dy] = hand, r = at(P.pr, h, P.H), o = offset(P, h), y = BY + P.yo - h + dy;\n    P.hd = [CX + o - r - gap, y, CX + o + r + gap, y];\n  } else P.hd = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.clay = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 6, 20));\n  P.LX = mix(9, 55, cl(k[3], 0, 1));\n  if (input.btnPressed && input.btnPressed[0] && P.ph >= 1 && P.ph \u003c= 5) go(P, 8);\n  if ((P.pt += d) >= DUR[P.ph]) go(P, [1, 2, 3, 4, 5, 6, 7, 0, 9, 1][P.ph]);\n  P.w += (SPIN[P.ph] - P.w) * min(1, d * 3);\n  P.rot += TAU * P.w * d;\n  const landing = P.ph === 0 && P.yo \u003c 0;\n  shape(P, P.pt / DUR[P.ph]);\n  // The hands follow their mark, easing over the big jumps between steps.\n  if (!P.hd) P.hs = null;\n  else if (!P.hs) P.hs = P.hd.slice();\n  else for (let i = 0; i \u003c 4; i++) abs(P.hd[i] - P.hs[i]) > 3 ? (P.hs[i] += (P.hd[i] - P.hs[i]) * min(1, d * 14)) : (P.hs[i] = P.hd[i]);\n\n  // Slip flung off the wall by the hands, and spattered as the lump lands.\n  const fling = (x, y, sd, n) => {\n    while (n--) P.dr.push([x, y, sd * (8 + rnd() * 26), -8 - rnd() * 26, PY - 4 + rnd() * 10]);\n  };\n  if (P.hs && (P.ph === 3 || P.ph === 4) && rnd() \u003c d * 3) rnd() \u003c 0.5 ? fling(P.hs[0], P.hs[1], -1, 1) : fling(P.hs[2], P.hs[3], 1, 1);\n  if (landing && P.yo === 0) fling(CX - 9, BY - 2, -1, 3), fling(CX + 9, BY - 2, 1, 3);\n  P.dr = P.dr.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 150 * d);\n    if (q[3] > 0 && q[1] >= q[4]) {\n      P.sp.push([q[0], q[1], rnd() \u003c 0.3 ? 2 : 1, 0.7 + 0.5 * rnd()]);\n      if (P.sp.length > 110) P.sp.shift();\n      return false;\n    }\n    return q[0] > -2 && q[0] \u003c W + 2;\n  });\n  for (const q of P.pieces) q.dry = min(1, q.dry + d / 75);\n}\n\n// The wall, the rack and the lamp's glow, kept until the lamp or the clay changes.\nfunction backdrop(P) {\n  P.bgKey = bgKey(P);\n  // Clay dust lies on everything in the room and takes the clay's colour.\n  const B = P.bg, LX = P.LX, dust = P.dust, wall = WALL.map((v, n) => mix(v, dust[n] * 0.4, 0.55)), wood = WOOD.map((v, n) => mix(v, dust[n] * 0.6, 0.35));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - LX, dy = y - 10, o = (y * W + x) * 3;\n      let f = 0.24 + 0.85 * exp(-(dx * dx + dy * dy * 0.3) / 1500), col = wall;\n      if (dy > 0) {\n        const cw = 4 + dy * 0.72;\n        f += 0.32 * sm(cw + 6, cw - 3, abs(dx)) * exp(-dy / 90);\n      }\n      f *= 0.9 + 0.16 * hash(x >> 1, y >> 1);\n      for (const sy of SHELF) {\n        if (y === sy) (col = wood), (f *= 1.35);\n        else if (y > sy && y \u003c= sy + 3) (col = wood), (f *= 0.75 + 0.15 * hash(x >> 2, sy));\n        else if (y > sy + 3 && y \u003c= sy + 6) f *= 0.45 + 0.17 * (y - sy - 4);\n      }\n      if ((x \u003c 2 || x > 61) && y \u003c SHELF[2] + 4) (col = wood), (f *= x === 1 || x === 62 ? 0.9 : 0.6);\n      const g = 0.55 * exp(-(dx * dx + (y - 10.5) ** 2) / 30);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f + [255, 196, 120][c] * g;\n    }\n}\n\n// The light from the lamp at a spot: its direction and how much reaches it.\nfunction light(P, x, y) {\n  const lx = cl((P.LX - x) / 24, -1.3, 1.3), ly = 0.3 + (y - 10) / 300, n = sqrt(lx * lx + ly * ly + 0.25);\n  return [lx / n, ly / n, 0.5 / n, 0.6 + 0.5 * exp(-((x - P.LX) ** 2 + ((y - 10) * 0.5) ** 2) / 1800)];\n}\n\nlet F;\nconst bgKey = (P) => round(P.LX * 8) * 64 + round(P.clay * 48);\n// A thrown shape turned on its axis, lit by the lamp: wall, rim and the\n// dark inside. Off-centre clay swings its axis round with the wheel.\nfunction solid(o) {\n  const { cx, by, s, pr, Hp, L, alb } = o, Hs = Hp * s, [l0, l1, l2, lm] = L;\n  let Rm = 0;\n  for (let i = 0; i \u003c= Hp + 1; i++) Rm = max(Rm, pr[i]);\n  Rm *= s;\n  const R = (h) => at(pr, h / s, Hp) * s, off = (h) => o.wa * o.s1 + o.wt * (cl(h / Hs, 0, 1) ** 1.5) * o.s2;\n  const RT = R(Hs), cT = cx + off(Hs), yT = by - Hs, ryT = E * RT + 0.35, ri = o.ri * s, ryi = E * ri + 0.25, wb = abs(o.wa) + abs(o.wt);\n  const hn = sqrt(l0 * l0 + l1 * l1 + (l2 + 1) ** 2), hx = l0 / hn, hy = l1 / hn, hz = (l2 + 1) / hn;\n  const y0 = max(0, floor(yT - ryT - 1)), y1 = min(H - 1, ceil(by + E * Rm + 1)), x0 = max(0, floor(cx - Rm - wb - 1)), x1 = min(W - 1, ceil(cx + Rm + wb + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, h0 = by - y - 0.5, ox = wb ? off(h0) : 0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx - ox, o3 = (y * W + x) * 3;\n      let h = h0, r = 0, u = 9, c = 0, k, sp = 0;\n      for (let it = 0; it \u003c 3; it++) {\n        r = R(h);\n        u = r > 0.05 ? px / r : 9;\n        c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n        h = h0 + E * r * c;\n      }\n      r = R(h);\n      u = r > 0.05 ? px / r : 9;\n      if (h >= 0 && h \u003c= Hs && u * u \u003c 1) {\n        c = sqrt(1 - u * u);\n        const hp = h / s, dR = (R(h + 0.6) - R(h - 0.6)) / 1.2 + o.ring * 2.03 * cos(hp * 2.03), nl = 1 / sqrt(1 + dR * dR);\n        const dif = max(0, (u * l0 - dR * l1 + c * l2) * nl), nh = max(0, (u * hx - dR * hy + c * hz) * nl);\n        k = (o.amb + 0.95 * dif + 0.2 * max(0, (-u * l0 + 0.4 * c) * nl)) * lm;\n        sp = o.spec * nh ** 40;\n        if (o.fl) {\n          // Slip streaks and grog flecks ride round with the wheel.\n          const az = asin(u) - o.rot, a = ((az % TAU) + TAU) % TAU, i = floor(a * 6.366), j = floor(hp / 2.3), q = hash(i, j);\n          const st = 1 + 0.1 * sin(3 * az + 1.3) + 0.07 * sin(5 * az + hp * 0.11);\n          k *= st;\n          sp *= st;\n          if (q \u003c 0.2 && abs(a - (i + 0.5) / 6.366) * r \u003c 0.7 && abs(hp - (j + 0.5) * 2.3) \u003c 0.75) k *= q \u003c 0.1 ? 1.5 : 0.55;\n        }\n      } else {\n        const ex = (x + 0.5 - cT) / RT, ey = (y + 0.5 - yT) / ryT;\n        if (RT \u003c 0.4 || ex * ex + ey * ey > 1) continue;\n        const ix = (x + 0.5 - cT) / (ri + 0.01), iy = (y + 0.5 - yT) / ryi;\n        if (ri > 0.4 && ix * ix + iy * iy \u003c 1) k = (0.05 + 0.42 * cl(-ix * l0 * 1.3 + 0.2, 0, 1) * (iy \u003c 0.3 ? 1 : 0.55)) * lm;\n        else (k = (0.3 + 0.8 * l1) * lm), (sp = o.spec * 0.3);\n      }\n      for (let n = 0; n \u003c 3; n++) F[o3 + n] = alb[n] * k + SHINE[n] * sp;\n    }\n}\n\n// The earlier pots on the shelves, wet and dark, then leather-hard, then pale.\nconst STILL = { s: SHS, wa: 0, wt: 0, s1: 0, s2: 0, rot: 0, ring: 0, fl: 0, amb: 0.38 };\nfunction shelves(P, C) {\n  // While a pot is carried over, its slot stands empty.\n  for (let i = 0; i \u003c min(P.n - (P.ph === 7), P.pieces.length); i++) {\n    const q = P.pieces[i], [sx, sy] = SLOT[q.slot], dr = q.dry, a = dr \u003c 0.45 ? dr / 0.45 : (dr - 0.45) / 0.55;\n    const alb = dr \u003c 0.45 ? C[0].map((v, n) => mix(v * 0.62, C[1][n], a)) : C[1].map((v, n) => mix(v, C[2][n], a));\n    solid({ ...STILL, cx: sx, by: sy + 0.5, pr: q.spec.pr, Hp: q.spec.Hf, ri: q.spec.rim - 1.4, alb, spec: 0.6 * (1 - sm(0, 0.4, dr)), L: light(P, sx, sy - 10) });\n  }\n}\n\nconst put = (x, y, col, k) => {\n  if ((x = round(x - 0.5)) >= 0 && x \u003c W && (y = round(y - 0.5)) >= 0 && y \u003c H) for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = col[c] * k;\n};\n\n// The lamp: a cord, an enamel shade and the bulb under it.\nfunction lamp(P) {\n  for (let y = 0; y \u003c 12; y++)\n    for (let x = max(0, floor(P.LX - 8)); x \u003c= min(W - 1, P.LX + 8); x++) {\n      const dx = x + 0.5 - P.LX;\n      if (abs(dx) >= (y \u003c 3 ? 0.6 : y \u003c 10 ? 1.3 + (y - 3) * 0.85 : y \u003c 11 ? 2.4 : 1.2)) continue;\n      const k = y > 2 && y \u003c 9 ? 0.7 + 0.6 * (1 - (y - 3) / 6) * (dx \u003c 0 ? 1 : 0.6) : 1;\n      put(x + 0.5, y + 0.5, y \u003c 3 ? [44, 38, 34] : y \u003c 9 ? [38, 72, 62] : [[236, 170, 96], [255, 244, 214], [255, 226, 168]][y - 9], k);\n    }\n}\n\n// The pot's shadow thrown on the wall behind, leaning away from the lamp.\nfunction shadow(P) {\n  for (let y = max(0, floor(BY - P.H - 6)); y \u003c 106; y++) {\n    const h = BY + 4 - y;\n    if (h \u003c 0 || h > P.H) continue;\n    const r = at(P.pr, h, P.H) * 1.08, xc = CX + (CX - P.LX) * (0.12 + h * 0.007);\n    for (let x = max(0, floor(xc - r - 2)); x \u003c= min(W - 1, xc + r + 2); x++) {\n      const k = 1 - 0.5 * sm(r + 1.5, r - 1, abs(x + 0.5 - xc)), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n}\n\n// The splash pan with its slip, and the wheel head turning in it.\nfunction wheel(P, A) {\n  const [l0, l1, l2, lm] = light(P, CX, PY), mt = METAL.map((v, n) => mix(v, A[n], 0.7)), side = (z) => 0.15 + 0.8 * max(0, z * l0 + sqrt(max(0, 1 - z * z)) * l2);\n  for (let y = 100; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ex = (x + 0.5 - CX) / PR, ey = (y + 0.5 - PY) / (PR * E), dd = ex * ex + ey * ey, o = (y * W + x) * 3;\n      const wx = (x + 0.5 - CX) / WR, wy = (y + 0.5 - BY) / (WR * E), wd = wx * wx + wy * wy;\n      let col, k;\n      if (wd \u003c 1) (col = mt), (k = (0.3 + 0.6 * l1) * lm * (0.9 + 0.1 * cos(sqrt(wd) * WR * 1.4)));\n      else if (wy > 0 && wx * wx \u003c 1 && y + 0.5 \u003c BY + WR * E * sqrt(1 - wx * wx) + 2.5) (col = METAL), (k = 0.5 * side(wx) * lm);\n      else if (dd \u003c 1) dd > 0.86 ? ((col = PLASTIC), (k = (0.6 + 0.6 * l1) * lm)) : ((col = A), (k = (ey \u003c 0 ? 0.26 + 0.12 * (1 + ey) : 0.4) * lm));\n      else if (ey > 0 && ex * ex \u003c 1 && y + 0.5 \u003c PY + PR * E * sqrt(1 - ex * ex) + 6) (col = PLASTIC), (k = side(ex) * lm);\n      else if (y > PY) (col = WALL), (k = 0.2);\n      else continue;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = col[c] * k;\n    }\n  // Slip spattered on the pan, then the wheel's own marks going round.\n  for (const [x, y, z, t] of P.sp) {\n    const ex = (x - CX) / WR, ey = (y - BY) / (WR * E);\n    if (ex * ex + ey * ey \u003c 1.1) continue;\n    put(x, y, A, 0.5 * t * lm);\n    if (z > 1) put(x + 1, y, A, 0.4 * t * lm);\n  }\n  for (let j = 0; j \u003c 6; j++) {\n    const a = P.rot + j * 1.9, r = j \u003c 2 ? 16 : 11.5 + j * 1.6;\n    put(CX + r * sin(a) + 0.5, BY + E * r * cos(a) + 0.5, j \u003c 2 ? [20, 20, 22] : A, j \u003c 2 ? 1 : 0.85 * lm);\n  }\n}\n\n// Skin lit by the lamp, round in section.\nfunction cap(ax, ay, bx, by, ra, rb, col, L, tip) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6, rm = max(ra, rb) + 1;\n  for (let y = max(0, floor(min(ay, by) - rm)); y \u003c= min(H - 1, max(ay, by) + rm); y++)\n    for (let x = max(0, floor(min(ax, bx) - rm)); x \u003c= min(W - 1, max(ax, bx) + rm); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, r = mix(ra, rb, t), dd = ex * ex + ey * ey;\n      if (dd > r * r) continue;\n      const nz = sqrt(1 - dd / (r * r)), k = (0.16 + 0.9 * max(0, (ex / r) * L[0] - (ey / r) * L[1] + nz * L[2])) * L[3], C = tip && t > 0.5 ? tip : col, o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = C[c] * k;\n    }\n}\n\n// A hand on the clay at x, y: the sleeve and forearm down to the side, the\n// back of the hand, the fingers round the wall with slip on them, the thumb.\nfunction hand(P, sd, x, y, slip) {\n  const L = light(P, x, y);\n  cap(x + sd * 22, y + 26, x + sd * 46, y + 62, 5.6, 6.6, SLEEVE, L);\n  cap(x + sd * 6.5, y + 3.5, x + sd * 23, y + 27, 3.4, 4.6, SKIN, L);\n  cap(x + sd * 7.5, y + 3.5, x + sd * 3.2, y - 0.3, 3.6, 3.3, SKIN, L);\n  cap(x + sd * 3.2, y - 0.3, x - sd * 1.8, y + 0.8, 2.6, 2, SKIN, L, slip);\n  cap(x + sd * 3.8, y - 3, x + sd * 2.6, y - 4.4, 1.4, 1.2, SKIN, L, slip);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.pr) return;\n  F = P.f;\n  const c = P.clay * 3, i0 = min(2, floor(c)), f = c - i0, C = [0, 1, 2].map((j) => CLAY[i0][j].map((v, n) => mix(v, CLAY[i0 + 1][j][n], f))), A = C[0];\n  P.dust = C[2];\n  if (P.bgKey !== bgKey(P)) backdrop(P);\n  F.set(P.bg);\n  shelves(P, C);\n  lamp(P);\n  if (!P.g) shadow(P);\n  wheel(P, A);\n  const wire = (front) => {\n    if (P.wire \u003c 0 || !P.hs || P.wire \u003c 0.5 !== front) return;\n    for (let x = P.hs[0]; x \u003c= P.hs[2]; x++) put(x + 0.5, P.hs[1] + 0.5, [220, 222, 230], 0.9);\n  };\n  wire(false);\n  const [gx, gy, gs] = P.g || [CX, BY + P.yo, 1];\n  solid({ cx: gx, by: gy, s: gs, pr: P.pr, Hp: P.H, ri: P.ri, wa: P.wa, wt: P.wt, s1: sin(P.rot), s2: sin(P.rot + 0.8), rot: P.rot, alb: A, spec: 0.9, L: light(P, gx, gy - P.H * gs * 0.5), ring: P.ring, fl: 1, amb: 0.08 });\n  wire(true);\n  if (P.hs) {\n    const slip = SKIN.map((v, n) => mix(v, A[n], 0.6));\n    hand(P, -1, P.hs[0], P.hs[1], slip);\n    hand(P, 1, P.hs[2], P.hs[3], slip);\n  }\n  for (const [x, y] of P.dr) put(x, y, A, 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-potters-wheel","type":"code","name":"potters-wheel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Potter's Wheel\n// Family:  pottery\n// Idea:    At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after throwing a pot on the potter's wheel\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1\n//\n// Knob 1: Clay. The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it.\n// Knob 2: Speed. At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower.\n// Knob 3: Pots. How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln.\n// Knob 4: Lamp. Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it.\n// Buttons: K1 tap makes the wall slump, and the potter balls the clay up and centres it again.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, asin, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The wheel head's centre and radius, the splash pan round it, and the tilt\n// of the view: a circle r across on the wheel shows as an ellipse E * r tall.\nconst [CX, BY, E, WR, PR] = [32, 111, 0.21, 21, 34];\nconst PY = BY + 2.5;\n// Three shelf boards with seven slots each, the order the slots fill, and\n// the size a pot stands at on the shelf against its size on the wheel.\nconst SHELF = [26, 53, 80];\nconst SLOT = [];\nfor (const sy of SHELF) for (let i = 0; i \u003c 7; i++) SLOT.push([4.6 + i * 9.13, sy]);\nconst ORDER = [1, 5, 8, 12, 14, 20, 3, 9, 11, 0, 6, 7, 13, 15, 19, 2, 4, 10, 16, 18, 17];\nconst SHS = 0.27;\n\n// Each clay at every stage of drying, from thrown and wet to bone-dry.\nconst CLAY = [\n  [[255, 112, 56], [196, 96, 58], [238, 158, 108]],\n  [[236, 170, 104], [190, 148, 100], [244, 222, 182]],\n  [[194, 198, 206], [184, 184, 182], [250, 248, 240]],\n  [[110, 96, 96], [86, 80, 78], [156, 148, 142]],\n];\nconst SKIN = [150, 98, 76], WALL = [84, 62, 50], WOOD = [132, 90, 58], METAL = [150, 152, 156], PLASTIC = [76, 80, 90], SLEEVE = [58, 66, 86], SHINE = [255, 232, 196];\n\n// Pot shapes as a height and the radius at keys up the wall: cylinder, bottle,\n// vase with a belly and a flared lip, jar and trumpet vase on the wheel, and\n// bowls and cups from earlier in the evening on the shelves.\nconst SHAPES = [\n  (j) => [76 + 8 * j, [[0, 10.5], [0.45, 10.2 + j], [0.9, 9.6], [1, 11]]],\n  (j) => [84 + 8 * j, [[0, 11], [0.3, 14.5], [0.7, 4.2], [0.93, 4], [1, 5.6]]],\n  (j) => [82 + 8 * j, [[0, 8], [0.42, 15], [0.8, 5], [0.9, 5.4], [1, 9.5]]],\n  (j) => [76 + 6 * j, [[0, 8.5], [0.55, 15.5], [0.9, 9], [1, 10.5]]],\n  (j) => [86 + 6 * j, [[0, 9.5], [0.2, 9.8], [0.62, 5.5], [1, 14]]],\n  (j) => [26 + 6 * j, [[0, 7], [0.45, 14], [1, 19]]],\n  (j) => [40 + 6 * j, [[0, 9], [0.5, 11.5], [0.85, 10.5], [1, 12]]],\n];\nfunction key(K, v) {\n  let i = 0;\n  while (i \u003c K.length - 2 && v > K[i + 1][0]) i++;\n  return mix(K[i][1], K[i + 1][1], sm(K[i][0], K[i + 1][0], v));\n}\n// A radius looked up along a wall kept one entry per row.\nconst at = (pr, h, Hp, i) => ((h = cl(h, 0, Hp)), (i = h | 0), pr[i] + (pr[i + 1] - pr[i]) * (h - i));\nfunction newSpec(not, all) {\n  let type;\n  // The first throw of the night is always one of the three tallest.\n  do type = floor(rnd() * (all ? 7 : 5));\n  while (type === not || (not \u003c -1 && type % 3 === 0));\n  const [Hf, K0] = SHAPES[type](rnd()), g = 0.92 + 0.16 * rnd(), K = K0.map(([v, r]) => [v, r * g]);\n  const pr = F32(ceil(Hf) + 3);\n  for (let h = 0; h \u003c pr.length; h++) pr[h] = key(K, min(1, h / Hf)) + 1.4 * exp(-h / 2.2);\n  // Where the hands shape it: the belly, then the neck above.\n  let vb = 0.5, vn = 0.85, rb = 0, rn = 99;\n  for (const [v, r] of K) if (v > 0.1 && v \u003c 0.85 && r > rb) (rb = r), (vb = v);\n  for (const [v, r] of K) if (v > vb && v \u003c 1 && r \u003c rn) (rn = r), (vn = v);\n  return { type, Hf, pr, rim: K[K.length - 1][1], vb, vn };\n}\n\n// The steps of a throw, how long each takes at Speed 2, and how fast the\n// wheel turns through it (turns a second): slapped down, centred, opened,\n// three pulls, shaped, shown, wired off, lifted to the shelf, and the slump\n// and the balling up after a K1 tap.\nconst DUR = [0.45, 0.9, 0.5, 4.5, 2.6, 1.6, 0.9, 1.8, 1.2, 0.9];\nconst SPIN = [0.4, 1.3, 1.1, 0.95, 0.75, 0.65, 0.3, 0, 0.9, 1];\n// The cylinder after each pull, and its wall at the rim.\nconst RC = [12.5, 11.3, 10.5, 9.9], WALL_T = [4, 2.7, 2.1, 1.7];\nconst cyl = (k, h) => RC[k] - 0.012 * h + 1.4 * exp(-h / 2.2);\nconst dome = (v, r) => r * sqrt(max(0, 1 - v ** 2.4)) + 1.2 * exp(-v * 8);\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, rot: 0, w: 0.4, H: 11, ri: 0, wa: 0, wt: 0, yo: 0, sH: 11, sri: 0, n: 6, LX: 12, clay: 0,\n    pr: F32(128), snap: F32(128), f: F32(N * 3), bg: F32(N * 3),\n    hd: null, hs: null, g: null, wire: -1, pieces: [], sp: [], dr: [], free: 0, bgKey: -1,\n  });\n  P.spec = newSpec(-2);\n  // The pieces already on the shelves, newest first.\n  for (let i = 0; i \u003c 21; i++) P.pieces.push({ slot: ORDER[i], spec: newSpec(i ? P.pieces[i - 1].spec.type : -1, 1), dry: min(1, 0.1 + i * 0.17) });\n  // Old slip spattered in the pan.\n  for (let i = 0; i \u003c 60; i++) {\n    const a = rnd() * TAU, r = 0.66 + 0.3 * rnd();\n    P.sp.push(i \u003c 44 ? [CX + PR * r * sin(a), PY + PR * E * r * cos(a), rnd() \u003c 0.3 ? 2 : 1, 0.6 + 0.5 * rnd()] : [2 + rnd() * 60, PY + 8 + rnd() * 4, 1, 0.5 + 0.4 * rnd()]);\n  }\n  shape(P, 0);\n}\n\nfunction go(P, ph) {\n  // The oldest piece on show goes to the kiln and the new pot takes its place.\n  if (ph === 7) P.free = P.pieces.splice(min(P.n, P.pieces.length) - 1, 1)[0].slot;\n  if (ph === 0 && P.ph === 7) P.pieces.unshift({ slot: P.free, spec: P.spec, dry: 0 }), (P.spec = newSpec(P.spec.type));\n  P.snap.set(P.pr);\n  Object.assign(P, { ph, pt: 0, sH: P.H, sri: P.ri });\n}\n\nfunction fill(P, Hn, f) {\n  P.H = Hn;\n  for (let h = 0, n = min(126, ceil(Hn) + 2); h \u003c= n; h++) P.pr[h] = max(0, f(min(h, Hn)));\n}\nconst snapR = (P, v) => at(P.snap, v * P.sH, P.sH);\nconst offset = (P, h) => P.wa * sin(P.rot) + P.wt * (cl(h / P.H, 0, 1) ** 1.5) * sin(P.rot + 0.8);\n\n// The clay's wall for this moment of the throw, and where the hands are.\nfunction shape(P, p) {\n  const sp = P.spec;\n  let hand = null;\n  Object.assign(P, { wa: 0, wt: 0.2, yo: 0, g: null, wire: -1, ring: 0.07 });\n  switch (P.ph) {\n    case 0: {\n      // Slapped down from the hands, squashing as it lands.\n      const sq = p > 0.6 ? 1 - 0.3 * sin((PI * (p - 0.6)) / 0.4) : 1, r = 10.5 / sqrt(sq), Hn = 11 * sq;\n      P.yo = p \u003c 0.6 ? -56 * (1 - (p / 0.6) ** 2) : 0;\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 0.8), (P.ring = 0.04);\n      hand = [5, -0.3, 0];\n      break;\n    }\n    case 1: {\n      // Centred: coned up and pressed down again while the wobble dies.\n      const Hn = 11 + 10 * sin(PI * sm(0.1, 0.9, p)), r = 10.5 * sqrt(11 / Hn);\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 2.6 * (1 - sm(0, 0.8, p))), (P.ring = 0.05);\n      hand = [Hn * 0.42, -0.5 + 0.4 * sin(p * 20), 0];\n      break;\n    }\n    case 2: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 13, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), cyl(0, h), q));\n      (P.ri = (RC[0] - WALL_T[0]) * sm(0.15, 1, p)), (P.ring = 0.07);\n      hand = [Hn - 1.5, -0.2, 0];\n      break;\n    }\n    case 3: {\n      // Three pulls. The hands squeeze the wall from the base to the rim and\n      // a roll of clay rides up ahead of them.\n      const k = min(2, floor(P.pt / 1.5)), a = (P.pt - k * 1.5) / 1.2, Hp = sp.Hf * 0.93;\n      const HS = [13, mix(13, Hp, 0.55), mix(13, Hp, 0.82), Hp];\n      if (a \u003c= 1) {\n        const Hn = mix(HS[k], HS[k + 1], sm(0, 1, a)), hh = Hn * min(1, a * 1.04) * 0.95, roll = 1.3 * (1 - sm(0.9, 1, a));\n        fill(P, Hn, (h) => mix(cyl(k + 1, h), cyl(k, h), sm(hh - 1, hh + 2.5, h)) + roll * exp(-(((h - hh - 2.6) / 2.2) ** 2)) - 0.8 * exp(-(((h - hh) / 1.4) ** 2)));\n        P.ri = mix(RC[k] - WALL_T[k], RC[k + 1] - WALL_T[k + 1], sm(0.85, 1, a));\n        hand = [hh, -0.3, 0];\n      } else {\n        const Hn = HS[k + 1], b = (a - 1) / 0.25;\n        fill(P, Hn, (h) => cyl(k + 1, h));\n        P.ri = RC[k + 1] - WALL_T[k + 1];\n        hand = [mix(Hn * 0.95, 3, sm(0, 1, b)), 1.5 * sin(PI * b), 0];\n      }\n      break;\n    }\n    case 4: {\n      // Shaped: the belly pushed out from inside, then the neck collared in.\n      const q = sm(0, 1, p), Hn = mix(P.sH, sp.Hf, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), at(sp.pr, (h / Hn) * sp.Hf, sp.Hf), q));\n      P.ri = mix(P.sri, sp.rim - 1.4, q);\n      hand = [Hn * mix(sp.vb, sp.vn, sm(0.4, 0.75, p)), -0.2, 0];\n      break;\n    }\n    case 8: {\n      // Slumped: the wall sinks, bellies and flops round as the wheel turns.\n      const q = sm(0, 1, p), Hn = mix(P.sH, max(12, P.sH * 0.3), q ** 0.8);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), snapR(P, (h / Hn) * 0.6) * (1 + 0.7 * (h / Hn) ** 2) + (3 * h) / Hn, q));\n      P.ri = P.sri > 0 ? max(0, at(P.pr, Hn, Hn) - 1.8) : 0;\n      (P.wt = 6 * sin(PI * min(1, p * 1.3)) + 2), (P.wa = 1);\n      hand = [Hn * 0.5, 4 + 20 * sm(0, 0.3, p), 10 * sm(0, 0.3, p)];\n      break;\n    }\n    case 9: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 11, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), dome(h / Hn, 10.5), q));\n      (P.ri = P.sri * (1 - q)), (P.wa = 2.6), (P.wt = 2 * (1 - q)), (P.ring = 0.04);\n      hand = [Hn * 0.45, mix(6, -0.5, sm(0, 0.5, p)), 0];\n      break;\n    }\n    default: {\n      fill(P, sp.Hf, (h) => at(sp.pr, h, sp.Hf));\n      P.ri = sp.rim - 1.4;\n      // Shown: the hands come away.\n      if (P.ph === 5) hand = [sp.Hf * sp.vn, 2 + 30 * sm(0, 0.6, p), 22 * sm(0, 0.6, p)];\n      if (P.ph === 6) {\n        // Wired off: the hands come in to the wheel and draw the wire under.\n        const a = sm(0, 0.25, p), q = sm(0.25, 1, p), y = mix(BY + 20, BY + E * P.pr[0] * (1 - 2 * q) + 0.5, a);\n        P.wire = a \u003c 1 ? -1 : q;\n        P.hd = [CX - mix(40, 25, a), y, CX + mix(40, 25, a), y];\n        return;\n      }\n      if (P.ph === 7) {\n        // Lifted, then carried back to its slot on the shelf.\n        const q1 = sm(0, 0.3, p), q2 = sm(0.3, 1, p), [sx, sy] = SLOT[P.free], s = mix(1, SHS, q2 ** 0.6);\n        P.g = [mix(CX, sx, q2), mix(BY - 9 * q1, sy + 0.5, q2) - 14 * sin(PI * q2), s];\n        if (q2 \u003c 0.5) {\n          const r = sp.pr[3] * s, y = P.g[1] - 3 * s + 40 * sm(0.2, 0.5, q2);\n          P.hd = [P.g[0] - r, y, P.g[0] + r, y];\n        } else P.hd = null;\n        return;\n      }\n    }\n  }\n  if (hand) {\n    const [h, gap, dy] = hand, r = at(P.pr, h, P.H), o = offset(P, h), y = BY + P.yo - h + dy;\n    P.hd = [CX + o - r - gap, y, CX + o + r + gap, y];\n  } else P.hd = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.clay = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 6, 20));\n  P.LX = mix(9, 55, cl(k[3], 0, 1));\n  if (input.btnPressed && input.btnPressed[0] && P.ph >= 1 && P.ph \u003c= 5) go(P, 8);\n  if ((P.pt += d) >= DUR[P.ph]) go(P, [1, 2, 3, 4, 5, 6, 7, 0, 9, 1][P.ph]);\n  P.w += (SPIN[P.ph] - P.w) * min(1, d * 3);\n  P.rot += TAU * P.w * d;\n  const landing = P.ph === 0 && P.yo \u003c 0;\n  shape(P, P.pt / DUR[P.ph]);\n  // The hands follow their mark, easing over the big jumps between steps.\n  if (!P.hd) P.hs = null;\n  else if (!P.hs) P.hs = P.hd.slice();\n  else for (let i = 0; i \u003c 4; i++) abs(P.hd[i] - P.hs[i]) > 3 ? (P.hs[i] += (P.hd[i] - P.hs[i]) * min(1, d * 14)) : (P.hs[i] = P.hd[i]);\n\n  // Slip flung off the wall by the hands, and spattered as the lump lands.\n  const fling = (x, y, sd, n) => {\n    while (n--) P.dr.push([x, y, sd * (8 + rnd() * 26), -8 - rnd() * 26, PY - 4 + rnd() * 10]);\n  };\n  if (P.hs && (P.ph === 3 || P.ph === 4) && rnd() \u003c d * 3) rnd() \u003c 0.5 ? fling(P.hs[0], P.hs[1], -1, 1) : fling(P.hs[2], P.hs[3], 1, 1);\n  if (landing && P.yo === 0) fling(CX - 9, BY - 2, -1, 3), fling(CX + 9, BY - 2, 1, 3);\n  P.dr = P.dr.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 150 * d);\n    if (q[3] > 0 && q[1] >= q[4]) {\n      P.sp.push([q[0], q[1], rnd() \u003c 0.3 ? 2 : 1, 0.7 + 0.5 * rnd()]);\n      if (P.sp.length > 110) P.sp.shift();\n      return false;\n    }\n    return q[0] > -2 && q[0] \u003c W + 2;\n  });\n  for (const q of P.pieces) q.dry = min(1, q.dry + d / 75);\n}\n\n// The wall, the rack and the lamp's glow, kept until the lamp or the clay changes.\nfunction backdrop(P) {\n  P.bgKey = bgKey(P);\n  // Clay dust lies on everything in the room and takes the clay's colour.\n  const B = P.bg, LX = P.LX, dust = P.dust, wall = WALL.map((v, n) => mix(v, dust[n] * 0.4, 0.55)), wood = WOOD.map((v, n) => mix(v, dust[n] * 0.6, 0.35));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - LX, dy = y - 10, o = (y * W + x) * 3;\n      let f = 0.24 + 0.85 * exp(-(dx * dx + dy * dy * 0.3) / 1500), col = wall;\n      if (dy > 0) {\n        const cw = 4 + dy * 0.72;\n        f += 0.32 * sm(cw + 6, cw - 3, abs(dx)) * exp(-dy / 90);\n      }\n      f *= 0.9 + 0.16 * hash(x >> 1, y >> 1);\n      for (const sy of SHELF) {\n        if (y === sy) (col = wood), (f *= 1.35);\n        else if (y > sy && y \u003c= sy + 3) (col = wood), (f *= 0.75 + 0.15 * hash(x >> 2, sy));\n        else if (y > sy + 3 && y \u003c= sy + 6) f *= 0.45 + 0.17 * (y - sy - 4);\n      }\n      if ((x \u003c 2 || x > 61) && y \u003c SHELF[2] + 4) (col = wood), (f *= x === 1 || x === 62 ? 0.9 : 0.6);\n      const g = 0.55 * exp(-(dx * dx + (y - 10.5) ** 2) / 30);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f + [255, 196, 120][c] * g;\n    }\n}\n\n// The light from the lamp at a spot: its direction and how much reaches it.\nfunction light(P, x, y) {\n  const lx = cl((P.LX - x) / 24, -1.3, 1.3), ly = 0.3 + (y - 10) / 300, n = sqrt(lx * lx + ly * ly + 0.25);\n  return [lx / n, ly / n, 0.5 / n, 0.6 + 0.5 * exp(-((x - P.LX) ** 2 + ((y - 10) * 0.5) ** 2) / 1800)];\n}\n\nlet F;\nconst bgKey = (P) => round(P.LX * 8) * 64 + round(P.clay * 48);\n// A thrown shape turned on its axis, lit by the lamp: wall, rim and the\n// dark inside. Off-centre clay swings its axis round with the wheel.\nfunction solid(o) {\n  const { cx, by, s, pr, Hp, L, alb } = o, Hs = Hp * s, [l0, l1, l2, lm] = L;\n  let Rm = 0;\n  for (let i = 0; i \u003c= Hp + 1; i++) Rm = max(Rm, pr[i]);\n  Rm *= s;\n  const R = (h) => at(pr, h / s, Hp) * s, off = (h) => o.wa * o.s1 + o.wt * (cl(h / Hs, 0, 1) ** 1.5) * o.s2;\n  const RT = R(Hs), cT = cx + off(Hs), yT = by - Hs, ryT = E * RT + 0.35, ri = o.ri * s, ryi = E * ri + 0.25, wb = abs(o.wa) + abs(o.wt);\n  const hn = sqrt(l0 * l0 + l1 * l1 + (l2 + 1) ** 2), hx = l0 / hn, hy = l1 / hn, hz = (l2 + 1) / hn;\n  const y0 = max(0, floor(yT - ryT - 1)), y1 = min(H - 1, ceil(by + E * Rm + 1)), x0 = max(0, floor(cx - Rm - wb - 1)), x1 = min(W - 1, ceil(cx + Rm + wb + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, h0 = by - y - 0.5, ox = wb ? off(h0) : 0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx - ox, o3 = (y * W + x) * 3;\n      let h = h0, r = 0, u = 9, c = 0, k, sp = 0;\n      for (let it = 0; it \u003c 3; it++) {\n        r = R(h);\n        u = r > 0.05 ? px / r : 9;\n        c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n        h = h0 + E * r * c;\n      }\n      r = R(h);\n      u = r > 0.05 ? px / r : 9;\n      if (h >= 0 && h \u003c= Hs && u * u \u003c 1) {\n        c = sqrt(1 - u * u);\n        const hp = h / s, dR = (R(h + 0.6) - R(h - 0.6)) / 1.2 + o.ring * 2.03 * cos(hp * 2.03), nl = 1 / sqrt(1 + dR * dR);\n        const dif = max(0, (u * l0 - dR * l1 + c * l2) * nl), nh = max(0, (u * hx - dR * hy + c * hz) * nl);\n        k = (o.amb + 0.95 * dif + 0.2 * max(0, (-u * l0 + 0.4 * c) * nl)) * lm;\n        sp = o.spec * nh ** 40;\n        if (o.fl) {\n          // Slip streaks and grog flecks ride round with the wheel.\n          const az = asin(u) - o.rot, a = ((az % TAU) + TAU) % TAU, i = floor(a * 6.366), j = floor(hp / 2.3), q = hash(i, j);\n          const st = 1 + 0.1 * sin(3 * az + 1.3) + 0.07 * sin(5 * az + hp * 0.11);\n          k *= st;\n          sp *= st;\n          if (q \u003c 0.2 && abs(a - (i + 0.5) / 6.366) * r \u003c 0.7 && abs(hp - (j + 0.5) * 2.3) \u003c 0.75) k *= q \u003c 0.1 ? 1.5 : 0.55;\n        }\n      } else {\n        const ex = (x + 0.5 - cT) / RT, ey = (y + 0.5 - yT) / ryT;\n        if (RT \u003c 0.4 || ex * ex + ey * ey > 1) continue;\n        const ix = (x + 0.5 - cT) / (ri + 0.01), iy = (y + 0.5 - yT) / ryi;\n        if (ri > 0.4 && ix * ix + iy * iy \u003c 1) k = (0.05 + 0.42 * cl(-ix * l0 * 1.3 + 0.2, 0, 1) * (iy \u003c 0.3 ? 1 : 0.55)) * lm;\n        else (k = (0.3 + 0.8 * l1) * lm), (sp = o.spec * 0.3);\n      }\n      for (let n = 0; n \u003c 3; n++) F[o3 + n] = alb[n] * k + SHINE[n] * sp;\n    }\n}\n\n// The earlier pots on the shelves, wet and dark, then leather-hard, then pale.\nconst STILL = { s: SHS, wa: 0, wt: 0, s1: 0, s2: 0, rot: 0, ring: 0, fl: 0, amb: 0.38 };\nfunction shelves(P, C) {\n  // While a pot is carried over, its slot stands empty.\n  for (let i = 0; i \u003c min(P.n - (P.ph === 7), P.pieces.length); i++) {\n    const q = P.pieces[i], [sx, sy] = SLOT[q.slot], dr = q.dry, a = dr \u003c 0.45 ? dr / 0.45 : (dr - 0.45) / 0.55;\n    const alb = dr \u003c 0.45 ? C[0].map((v, n) => mix(v * 0.62, C[1][n], a)) : C[1].map((v, n) => mix(v, C[2][n], a));\n    solid({ ...STILL, cx: sx, by: sy + 0.5, pr: q.spec.pr, Hp: q.spec.Hf, ri: q.spec.rim - 1.4, alb, spec: 0.6 * (1 - sm(0, 0.4, dr)), L: light(P, sx, sy - 10) });\n  }\n}\n\nconst put = (x, y, col, k) => {\n  if ((x = round(x - 0.5)) >= 0 && x \u003c W && (y = round(y - 0.5)) >= 0 && y \u003c H) for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = col[c] * k;\n};\n\n// The lamp: a cord, an enamel shade and the bulb under it.\nfunction lamp(P) {\n  for (let y = 0; y \u003c 12; y++)\n    for (let x = max(0, floor(P.LX - 8)); x \u003c= min(W - 1, P.LX + 8); x++) {\n      const dx = x + 0.5 - P.LX;\n      if (abs(dx) >= (y \u003c 3 ? 0.6 : y \u003c 10 ? 1.3 + (y - 3) * 0.85 : y \u003c 11 ? 2.4 : 1.2)) continue;\n      const k = y > 2 && y \u003c 9 ? 0.7 + 0.6 * (1 - (y - 3) / 6) * (dx \u003c 0 ? 1 : 0.6) : 1;\n      put(x + 0.5, y + 0.5, y \u003c 3 ? [44, 38, 34] : y \u003c 9 ? [38, 72, 62] : [[236, 170, 96], [255, 244, 214], [255, 226, 168]][y - 9], k);\n    }\n}\n\n// The pot's shadow thrown on the wall behind, leaning away from the lamp.\nfunction shadow(P) {\n  for (let y = max(0, floor(BY - P.H - 6)); y \u003c 106; y++) {\n    const h = BY + 4 - y;\n    if (h \u003c 0 || h > P.H) continue;\n    const r = at(P.pr, h, P.H) * 1.08, xc = CX + (CX - P.LX) * (0.12 + h * 0.007);\n    for (let x = max(0, floor(xc - r - 2)); x \u003c= min(W - 1, xc + r + 2); x++) {\n      const k = 1 - 0.5 * sm(r + 1.5, r - 1, abs(x + 0.5 - xc)), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n}\n\n// The splash pan with its slip, and the wheel head turning in it.\nfunction wheel(P, A) {\n  const [l0, l1, l2, lm] = light(P, CX, PY), mt = METAL.map((v, n) => mix(v, A[n], 0.7)), side = (z) => 0.15 + 0.8 * max(0, z * l0 + sqrt(max(0, 1 - z * z)) * l2);\n  for (let y = 100; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ex = (x + 0.5 - CX) / PR, ey = (y + 0.5 - PY) / (PR * E), dd = ex * ex + ey * ey, o = (y * W + x) * 3;\n      const wx = (x + 0.5 - CX) / WR, wy = (y + 0.5 - BY) / (WR * E), wd = wx * wx + wy * wy;\n      let col, k;\n      if (wd \u003c 1) (col = mt), (k = (0.3 + 0.6 * l1) * lm * (0.9 + 0.1 * cos(sqrt(wd) * WR * 1.4)));\n      else if (wy > 0 && wx * wx \u003c 1 && y + 0.5 \u003c BY + WR * E * sqrt(1 - wx * wx) + 2.5) (col = METAL), (k = 0.5 * side(wx) * lm);\n      else if (dd \u003c 1) dd > 0.86 ? ((col = PLASTIC), (k = (0.6 + 0.6 * l1) * lm)) : ((col = A), (k = (ey \u003c 0 ? 0.26 + 0.12 * (1 + ey) : 0.4) * lm));\n      else if (ey > 0 && ex * ex \u003c 1 && y + 0.5 \u003c PY + PR * E * sqrt(1 - ex * ex) + 6) (col = PLASTIC), (k = side(ex) * lm);\n      else if (y > PY) (col = WALL), (k = 0.2);\n      else continue;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = col[c] * k;\n    }\n  // Slip spattered on the pan, then the wheel's own marks going round.\n  for (const [x, y, z, t] of P.sp) {\n    const ex = (x - CX) / WR, ey = (y - BY) / (WR * E);\n    if (ex * ex + ey * ey \u003c 1.1) continue;\n    put(x, y, A, 0.5 * t * lm);\n    if (z > 1) put(x + 1, y, A, 0.4 * t * lm);\n  }\n  for (let j = 0; j \u003c 6; j++) {\n    const a = P.rot + j * 1.9, r = j \u003c 2 ? 16 : 11.5 + j * 1.6;\n    put(CX + r * sin(a) + 0.5, BY + E * r * cos(a) + 0.5, j \u003c 2 ? [20, 20, 22] : A, j \u003c 2 ? 1 : 0.85 * lm);\n  }\n}\n\n// Skin lit by the lamp, round in section.\nfunction cap(ax, ay, bx, by, ra, rb, col, L, tip) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6, rm = max(ra, rb) + 1;\n  for (let y = max(0, floor(min(ay, by) - rm)); y \u003c= min(H - 1, max(ay, by) + rm); y++)\n    for (let x = max(0, floor(min(ax, bx) - rm)); x \u003c= min(W - 1, max(ax, bx) + rm); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, r = mix(ra, rb, t), dd = ex * ex + ey * ey;\n      if (dd > r * r) continue;\n      const nz = sqrt(1 - dd / (r * r)), k = (0.16 + 0.9 * max(0, (ex / r) * L[0] - (ey / r) * L[1] + nz * L[2])) * L[3], C = tip && t > 0.5 ? tip : col, o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = C[c] * k;\n    }\n}\n\n// A hand on the clay at x, y: the sleeve and forearm down to the side, the\n// back of the hand, the fingers round the wall with slip on them, the thumb.\nfunction hand(P, sd, x, y, slip) {\n  const L = light(P, x, y);\n  cap(x + sd * 22, y + 26, x + sd * 46, y + 62, 5.6, 6.6, SLEEVE, L);\n  cap(x + sd * 6.5, y + 3.5, x + sd * 23, y + 27, 3.4, 4.6, SKIN, L);\n  cap(x + sd * 7.5, y + 3.5, x + sd * 3.2, y - 0.3, 3.6, 3.3, SKIN, L);\n  cap(x + sd * 3.2, y - 0.3, x - sd * 1.8, y + 0.8, 2.6, 2, SKIN, L, slip);\n  cap(x + sd * 3.8, y - 3, x + sd * 2.6, y - 4.4, 1.4, 1.2, SKIN, L, slip);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.pr) return;\n  F = P.f;\n  const c = P.clay * 3, i0 = min(2, floor(c)), f = c - i0, C = [0, 1, 2].map((j) => CLAY[i0][j].map((v, n) => mix(v, CLAY[i0 + 1][j][n], f))), A = C[0];\n  P.dust = C[2];\n  if (P.bgKey !== bgKey(P)) backdrop(P);\n  F.set(P.bg);\n  shelves(P, C);\n  lamp(P);\n  if (!P.g) shadow(P);\n  wheel(P, A);\n  const wire = (front) => {\n    if (P.wire \u003c 0 || !P.hs || P.wire \u003c 0.5 !== front) return;\n    for (let x = P.hs[0]; x \u003c= P.hs[2]; x++) put(x + 0.5, P.hs[1] + 0.5, [220, 222, 230], 0.9);\n  };\n  wire(false);\n  const [gx, gy, gs] = P.g || [CX, BY + P.yo, 1];\n  solid({ cx: gx, by: gy, s: gs, pr: P.pr, Hp: P.H, ri: P.ri, wa: P.wa, wt: P.wt, s1: sin(P.rot), s2: sin(P.rot + 0.8), rot: P.rot, alb: A, spec: 0.9, L: light(P, gx, gy - P.H * gs * 0.5), ring: P.ring, fl: 1, amb: 0.08 });\n  wire(true);\n  if (P.hs) {\n    const slip = SKIN.map((v, n) => mix(v, A[n], 0.6));\n    hand(P, -1, P.hs[0], P.hs[1], slip);\n    hand(P, 1, P.hs[2], P.hs[3], slip);\n  }\n  for (const [x, y] of P.dr) put(x, y, A, 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Clay","min":0,"max":1,"about":"The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower."},{"name":"Pots","min":6,"max":20,"about":"How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it."}],"start":[0,2,6,0.06],"measures":{"motion":0.6649,"detail":0.0524,"edges":0.2558,"complexity":1.7276,"coverage":0.8999,"colour":0.2006,"drift":0.0739},"knobResponse":[0.0662,0.0422,0.05,0.1325]},{"slug":"powder-burst","title":"Powder Burst","family":"cosmetic","round":37,"note":"어두운 스튜디오 바닥의 파우더 케이크가 6.3초마다 좌우를 번갈아 맞아 터지고, 마젠타 파우더가 둥근 머리를 이고 4초쯤 만에 패널 꼭대기 언저리까지 솟아요. 머리는 고리로 말리며 버섯 꼴이 되고, 가장자리에서 고운 먼지가 말려 나가고 무거운 알갱이는 포물선을 그리며 떨어지고, 운모가 가끔 반짝여요. K3 은 머리를 패널보다 넓게 키워 위로 빠져나가게 하고, K4 는 운모를 한 번에 1,460조각까지 늘려요. 누르면 바로 케이크를 쳐요.","idea":"In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.","buttons":"K1 tap strikes the cake now.","code":"// ===== Patternflow pattern =====\n// Title:   Powder Burst\n// Family:  cosmetic\n// Idea:    In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after the slow-motion powder explosions of cosmetics advertising\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive.\n// Knob 2: Speed. How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower.\n// Knob 3: Force. How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90.\n// Knob 4: Shimmer. Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment.\n// Buttons: K1 tap strikes the cake now.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 9000;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Kinds of particle: fine powder, heavy specks, mica flakes.\nconst FINE = 0, SPECK = 1, MICA = 2;\n// Strikes alive at once, kept in a ring.\nconst NB = 4;\n// How far below the head the eye is (see draw), the share of grains drawn\n// round the axis rather than in the plane, how thick powder turns to light\n// (1 - exp(-GAIN d)), and the dust's mean life in seconds.\nconst TILT = 0.12, GAIN = 3.6, FILL = 0.5, LIFE = 6.2;\n// Small eddies: a stream function of four travelling waves, 19 to 44 LEDs\n// long, whose curl wrinkles the cloud's edge without bunching the powder.\nconst WAVES = [\n  [44, 0.4, 0.5],\n  [33, 2.1, -0.7],\n  [25, 3.9, 0.8],\n  [19, 5.1, -1.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 1.9];\n});\n// And a finer set, 8 to 13 LEDs, that only the young powder feels: it\n// wrinkles the head's edge into billows.\nconst FINE_WAVES = [\n  [13, 0.9, 2.2],\n  [10.5, 2.8, -2.6],\n  [8, 4.6, 3.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 2.3];\n});\nconst GS = 4, GX = W / GS + 3, GY = H / GS + 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), kd: F(MAXP), g: F(MAXP), w: F(MAXP), ph: F(MAXP), ca: F(MAXP), sa: F(MAXP),\n    kind: new Uint8Array(MAXP), bid: new Uint8Array(MAXP), n: 0,\n    B0: F(NB).fill(-99), BX: F(NB), BY: F(NB), BD: F(NB), BR: F(NB), BP: F(NB), slot: 0, ring: new Float64Array(NB * 7), nr: 0, fl: [0, 0],\n    U: F(GX * GY), V: F(GX * GY), U2: F(GX * GY), V2: F(GX * GY), D: F(N), O: F(N), S: F(N), G: F(N), tmp: F(N), col: F(12),\n    T: 0, next: 0, side: rnd() \u003c 0.5 ? -1 : 1, hue: 0, force: 0, shim: 0.06, started: false,\n  };\n}\n\n// A strike at x0: the cake sits on the floor at row 116.\nfunction strike(S, x0) {\n  const q = (S.slot = (S.slot + 1) % NB), f = S.force;\n  S.B0[q] = S.T;\n  S.BP[q] = 0;\n  S.BX[q] = x0;\n  S.BY[q] = 116;\n  // How far the head climbs, and how wide its ring opens.\n  S.BD[q] = (80 + 50 * f) * (0.92 + 0.16 * rnd());\n  S.BR[q] = (14.5 + 4.5 * f) * (0.9 + 0.2 * rnd());\n  const nf = 2600, ns = round((90 + 110 * f) * (0.8 + 0.4 * rnd())), nm = 60 + round(1400 * S.shim);\n  for (let j = 0; j \u003c nf + ns + nm && S.n \u003c MAXP; j++) {\n    const i = S.n++, kind = j \u003c nf ? FINE : j \u003c nf + ns ? SPECK : MICA;\n    S.x[i] = x0 + (rnd() - 0.5) * 5;\n    S.y[i] = 115 + (rnd() - 0.5) * 2;\n    S.age[i] = -rnd() * 0.06;\n    S.kind[i] = kind;\n    S.bid[i] = q;\n    S.ph[i] = rnd() * 2 * PI;\n    const az = rnd() * 2 * PI, fill = rnd() \u003c FILL;\n    S.ca[i] = fill ? cos(az) : 1;\n    S.sa[i] = fill ? sin(az) : 0;\n    if (kind === SPECK) {\n      // Specks are thrown out of the cake on steep arcs and fall back.\n      const a = (rnd() + rnd() + rnd() - 1.5) * 1.1, sp = (60 + 50 * rnd()) * (1 + 0.5 * f);\n      S.vx[i] = sp * sin(a);\n      S.vy[i] = -sp * cos(a);\n      S.kd[i] = 0.5 + 0.4 * rnd();\n      S.g[i] = 55 + 25 * rnd();\n      S.life[i] = 2.4 + rnd();\n      S.w[i] = 0.5 + 0.5 * rnd();\n      continue;\n    }\n    // Fine powder is thrown from the cake to a place round the head's\n    // start and comes to rest there in about 0.2 s, its throw halving every\n    // 0.04 to 0.06 s, so the head forms full: 16% round its two eddies, 40%\n    // in a dome over them. Another 22% is lofted over the next 0.6 s and\n    // drawn up behind as the stem, 10% is a skirt flung low along the floor\n    // and 12% a spray that fans out high.\n    const kd = (S.kd[i] = 12 + 6 * rnd()), u = rnd(), R = S.BR[q];\n    let tx, ty;\n    if (u \u003c 0.16) {\n      // Round the two eddies of the head, the hubs it rolls up on.\n      const g = gauss2();\n      tx = x0 + (rnd() \u003c 0.5 ? -R : R) + g[0] * 0.28 * R;\n      ty = 104 + g[1] * 0.28 * R;\n    } else if (u \u003c 0.56 || kind === MICA) {\n      // A thick dome over the head: as the head climbs its outside runs\n      // down round the eddies and curls in under the cap.\n      const t = PI * (1.05 + 0.9 * rnd()), r = 1 - 0.4 * rnd() * rnd();\n      tx = x0 + r * cos(t) * 1.75 * R;\n      ty = 104 + r * sin(t) * 1.45 * R;\n    } else if (u \u003c 0.78) {\n      tx = x0 + (rnd() - 0.5) * 10;\n      ty = 112 - 6 * rnd();\n      S.age[i] = -0.1 - 0.6 * rnd();\n    } else if (u \u003c 0.88) {\n      tx = x0 + (rnd() \u003c 0.5 ? -1 : 1) * (8 + 18 * rnd()) * (1 + 0.4 * f);\n      ty = 114 - 4 * rnd();\n    } else {\n      const a = (rnd() - 0.5) * 2.4, r = (24 + 30 * rnd()) * (1 + 0.4 * f);\n      tx = x0 + r * sin(a);\n      ty = 108 - r * cos(a);\n    }\n    S.vx[i] = (tx - S.x[i]) * kd;\n    S.vy[i] = (ty - S.y[i]) * kd;\n    S.g[i] = 0.4 + 1.2 * rnd();\n    S.life[i] = LIFE * (0.8 + 0.4 * rnd());\n    S.w[i] = 0.6 + 0.6 * rnd();\n  }\n}\n\nfunction gauss2() {\n  const r = sqrt(-2 * Math.log(1 - rnd())), t = 2 * PI * rnd();\n  return [r * cos(t), r * sin(t)];\n}\n\nfunction round(v) {\n  return floor(v + 0.5);\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.kd[i] = S.kd[j];\n  S.g[i] = S.g[j];\n  S.w[i] = S.w[j];\n  S.ph[i] = S.ph[j];\n  S.ca[i] = S.ca[j];\n  S.sa[i] = S.sa[j];\n  S.kind[i] = S.kind[j];\n  S.bid[i] = S.bid[j];\n}\n\n// The eddies on a grid every 4 LEDs, read off between.\nfunction eddies(S) {\n  const T = S.T;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U[gy * GX + gx] = u;\n      S.V[gy * GX + gx] = v;\n      u = 0;\n      v = 0;\n      for (const [kx, ky, w, m, ph] of FINE_WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U2[gy * GX + gx] = u;\n      S.V2[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, h) {\n  S.T += h;\n  S.next -= h;\n  if (S.next \u003c= 0) {\n    // Strikes alternate sides of the middle, 9 to 15 LEDs out.\n    S.side = -S.side;\n    strike(S, 32 + S.side * (9 + 6 * rnd()));\n    S.next = 6.3 * (0.95 + 0.1 * rnd());\n  }\n  eddies(S);\n  // Each strike's head: the plume's ring, seen edge on as two eddies of\n  // opposite spin R apart either side of its axis, climbing D rows on a\n  // curve that slows as it goes.\n  const ring = S.ring;\n  let nr = 0;\n  for (let q = 0; q \u003c NB; q++) {\n    // The head forms once the thrown powder has come to rest round it,\n    // 0.3 s after the strike, and gathers speed over a quarter second.\n    const a = S.T - S.B0[q] - 0.3;\n    if (a \u003c 0 || a > 7) continue;\n    const tau = 2.6, D = S.BD[q], V = ((D / tau) * exp(-a / tau) + 3) * sm(0, 0.25, a);\n    S.BP[q] += V * h;\n    // A third of the climb is the eddies' own: their strength is what moves\n    // a pair of cores 0.65 R wide at V / 3, 4.42 pi R V / 3. The rest is the\n    // warm air the head rides on, a broad rising blob that carries the\n    // cores at the same 2V / 3 as the powder round them; full-strength\n    // eddies rolled the dome into the cores within a second and the head\n    // read as two lobes.\n    const R = S.BR[q], rc = 0.65 * R, o = nr * 7;\n    ring[o] = S.BX[q];\n    ring[o + 1] = S.BY[q] - 12 - S.BP[q];\n    ring[o + 2] = R;\n    ring[o + 3] = rc * rc;\n    ring[o + 4] = (R * (4 + 0.4225) * V) / 6;\n    ring[o + 5] = ((2 * V) / 3) * exp(1 / (1.9 * 1.9));\n    ring[o + 6] = 30 * exp(-a / 2);\n    nr++;\n  }\n  S.nr = nr;\n  const fl = S.fl;\n  for (let i = S.n - 1; i >= 0; i--) {\n    let age = S.age[i];\n    if (age \u003c 0) {\n      S.age[i] = age + h;\n      continue;\n    }\n    age = S.age[i] += h;\n    const x = S.x[i], y = S.y[i];\n    if (age > S.life[i] || y > H + 6 || y \u003c -30 || x \u003c -20 || x > W + 20) {\n      kill(S, i);\n      continue;\n    }\n    if (S.kind[i] === SPECK) {\n      flow(S, x, y, -1);\n      const kd = 1 - exp(-S.kd[i] * h);\n      S.vx[i] += (fl[0] - S.vx[i]) * kd;\n      S.vy[i] += (fl[1] - S.vy[i]) * kd + S.g[i] * h;\n      S.x[i] = x + S.vx[i] * h;\n      S.y[i] = y + S.vy[i] * h;\n    } else {\n      // Fine powder rides the air exactly, plus what is left of the throw\n      // from the strike and a slow settling. Given inertia instead, as the\n      // specks have, it was flung out of the head's two eddies and the head\n      // read as a hollow arch. It is moved by the midpoint rule: a plain\n      // step turned each eddy's core, 19 radians a second, into an outward\n      // spiral, and the head showed two dark holes like eye sockets.\n      const kd = exp(-S.kd[i] * 0.5 * h), tx = S.vx[i] * kd, ty = S.vy[i] * kd + S.g[i] * min(1, age * 0.3);\n      flow(S, x, y, age);\n      flow(S, x + 0.5 * h * (fl[0] + tx), y + 0.5 * h * (fl[1] + ty), age);\n      S.x[i] = x + h * (fl[0] + tx) + (rnd() - 0.5) * 0.5;\n      S.y[i] = y + h * (fl[1] + ty) + (rnd() - 0.5) * 0.5;\n      S.vx[i] *= kd * kd;\n      S.vy[i] *= kd * kd;\n    }\n    // The floor: powder that comes down stays down.\n    if (S.y[i] > 118) {\n      S.y[i] = 118;\n      S.vy[i] *= -0.2;\n      S.vx[i] *= 0.6;\n    }\n  }\n}\n\n// The air at (x, y), into S.fl: the heads' eddies, the column of air still\n// rising under each head, and for powder (age 0 and up) the small eddies,\n// which grow as it ages and spreads.\nfunction flow(S, x, y, age) {\n  const ring = S.ring;\n  let ux = 0, uy = 0;\n  for (let r = 0; r \u003c S.nr; r++) {\n    const o = r * 7, xc = ring[o], yc = ring[o + 1], R = ring[o + 2], rc2 = ring[o + 3], G = ring[o + 4];\n    // Left eddy spins so its inside runs up, the right one the other way.\n    let dx = x - xc + R, dy = y - yc, q = -G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    dx = x - xc - R;\n    q = G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    // The warm air the head rides on.\n    const ex = (x - xc) / (1.9 * R), ey = (y - yc + 0.2 * R) / (1.7 * R);\n    uy -= ring[o + 5] * exp(-ex * ex - ey * ey);\n    // Under the head a column of air keeps rising after it, lifting the\n    // late powder into a stem.\n    if (y > yc) {\n      const sx = (x - xc) / 7;\n      uy -= ring[o + 6] * exp(-sx * sx);\n    }\n  }\n  if (age >= 0) {\n    const U = S.U, V = S.V;\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const eu = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const ev = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    const amp = 0.8 + 1.6 * min(1, age * 0.4), a2 = 9 * exp(-age * 0.7);\n    const U2 = S.U2, V2 = S.V2;\n    const fu = (U2[g] * (1 - ax) + U2[g + 1] * ax) * (1 - ay) + (U2[g + GX] * (1 - ax) + U2[g + GX + 1] * ax) * ay;\n    const fv = (V2[g] * (1 - ax) + V2[g + 1] * ax) * (1 - ay) + (V2[g + GX] * (1 - ax) + V2[g + GX + 1] * ax) * ay;\n    ux += eu * amp + fu * a2;\n    uy += ev * amp + fv * a2;\n  }\n  S.fl[0] = ux;\n  S.fl[1] = uy;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.force = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open 1.5 s after the first strike, the head already rising.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  const h = d * rate;\n  const sub = h > 0.025 ? 2 : 1;\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, O = S.O, SP = S.S, G = S.G, tmp = S.tmp, col = S.col, T = S.T, sh = S.shim;\n  D.fill(0);\n  O.fill(0);\n  SP.fill(0);\n  G.fill(0);\n  // The flow is worked out in one plane through the head's axis, and the\n  // cloud is round that axis, so half the grains are drawn at an angle of\n  // their own round it, seen from a little below, and half in the plane,\n  // which keeps the curls at the head's rim. All in the plane, the head\n  // showed two lobes with dark between them where the jet up the middle\n  // swept it clean; all round the axis, a smooth ball.\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / S.life[i], u2 = u * u, env = min(1, age * 12) * (1 - u2 * u2);\n    const kind = S.kind[i], ax = S.BX[S.bid[i]], r = S.x[i] - ax;\n    const x = ax + r * S.ca[i], y = S.y[i] + r * S.sa[i] * TILT;\n    if (kind === SPECK) splat(SP, x, y, S.w[i] * env);\n    else if (kind === MICA) {\n      // A flake only shows when it turns to the light: a swell a few times\n      // a second, sharpened so most of the time it is dark. Flakes add no\n      // body to the cloud, so Shimmer leaves its size alone.\n      const tw = 0.5 + 0.5 * sin(S.ph[i] + (3 + 2 * sin(S.ph[i] * 3)) * T);\n      const t4 = tw * tw * tw * tw;\n      splat(G, x, y, env * t4 * t4 * (0.8 + 1.2 * sh));\n    } else {\n      // Powder older than a second and a half goes into a softer layer,\n      // so the trails behind the head spread into haze.\n      const old = sm(1, 2.5, age);\n      if (old \u003c 1) splat(D, x, y, S.w[i] * env * (1 - old));\n      if (old > 0) splat(O, x, y, S.w[i] * env * old);\n    }\n  }\n  blur(D, tmp, 2);\n  blur(D, tmp, 1);\n  blur(O, tmp, 3);\n  blur(O, tmp, 2);\n  for (let p = 0; p \u003c N; p++) D[p] += O[p];\n  // Pigment, its pale lit side, the pearl tint mica gives the lit side, and\n  // the glint colour. Coral to lemon read brown and olive when dim, so there\n  // the pigment is paler. Elsewhere the pigment is laid at full saturation\n  // and only the lit side of thick powder goes pale: with an orchid pink at\n  // 0.82 and thick powder paling all over, the cloud's colourfulness was\n  // 0.231, and this way it is 0.393, beside Tunnel on the colour x drift\n  // map, since the cell where it first stood beside Bokeh took Heawood\n  // Torus first.\n  const h = S.hue + 0.84, hf = h - floor(h), warm = sm(0.0, 0.05, hf) * (1 - sm(0.17, 0.24, hf));\n  hsv(h, 1.0 - 0.32 * warm, 1, col, 0);\n  hsv(h - 0.02, 0.6 - 0.12 * warm, 1, col, 3);\n  hsv(h + 0.08, 0.15, 1, col, 6);\n  hsv(h + 0.2, 0.4, 1, col, 9);\n  // Warm powder's faint end is lifted too: a fading peach cloud read as\n  // milky coffee.\n  const gain = GAIN + 0.3 * warm, ga = 1 - 0.4 * warm;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const d = D[p], a = (1 - exp(-d * gain)) ** ga, s = min(1.4, SP[p]), g = G[p];\n      // The studio light is above and to the left: where the cloud thickens\n      // downward or rightward its surface faces the light. Without it the\n      // head was a flat blob of colour.\n      const dn = y \u003c H - 1 ? D[p + W] : d, up = y > 0 ? D[p - W] : d, rt = x \u003c W - 1 ? D[p + 1] : d, lf = x > 0 ? D[p - 1] : d;\n      const nrm = cl(((dn - up) * 0.8 + (rt - lf) * 0.4) / (d + 0.5), -1, 1), lit = 0.98 + 0.4 * nrm;\n      // Thin powder glows in the pigment, thick powder goes pale and bright,\n      // and with mica its lit side turns pearl.\n      const wt = a * a * cl(0.22 + 0.6 * nrm, 0, 1), pm = sh * 0.9 * cl(0.55 + nrm, 0, 1);\n      let r = 0, gg = 0, b = 0;\n      for (let c = 0; c \u003c 3; c++) {\n        const lc = col[3 + c] * (1 - pm) + col[9 + c] * pm, v = (col[c] * (1 - wt) + lc * wt) * a * lit;\n        // Specks are pigment, glints are light.\n        const o = v + col[c] * s * 0.8 + col[6 + c] * g;\n        if (c === 0) r = o;\n        else if (c === 1) gg = o;\n        else b = o;\n      }\n      if (warm > 0) {\n        // Dim peach and lemon read brown and olive, so as warm powder dims\n        // it greys toward a pale dust of the same level instead.\n        const m = max(r, gg, b), k = 0.9 * warm * sqrt(1 - min(1, m / 0.85));\n        r += (m - r) * k;\n        gg += (m - gg) * k;\n        b += (m - b) * k;\n      }\n      display.setPixel(x, y, knee(r * 255), knee(gg * 255), knee(b * 255));\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-powder-burst","type":"code","name":"powder-burst","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Powder Burst\n// Family:  cosmetic\n// Idea:    In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after the slow-motion powder explosions of cosmetics advertising\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive.\n// Knob 2: Speed. How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower.\n// Knob 3: Force. How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90.\n// Knob 4: Shimmer. Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment.\n// Buttons: K1 tap strikes the cake now.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 9000;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Kinds of particle: fine powder, heavy specks, mica flakes.\nconst FINE = 0, SPECK = 1, MICA = 2;\n// Strikes alive at once, kept in a ring.\nconst NB = 4;\n// How far below the head the eye is (see draw), the share of grains drawn\n// round the axis rather than in the plane, how thick powder turns to light\n// (1 - exp(-GAIN d)), and the dust's mean life in seconds.\nconst TILT = 0.12, GAIN = 3.6, FILL = 0.5, LIFE = 6.2;\n// Small eddies: a stream function of four travelling waves, 19 to 44 LEDs\n// long, whose curl wrinkles the cloud's edge without bunching the powder.\nconst WAVES = [\n  [44, 0.4, 0.5],\n  [33, 2.1, -0.7],\n  [25, 3.9, 0.8],\n  [19, 5.1, -1.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 1.9];\n});\n// And a finer set, 8 to 13 LEDs, that only the young powder feels: it\n// wrinkles the head's edge into billows.\nconst FINE_WAVES = [\n  [13, 0.9, 2.2],\n  [10.5, 2.8, -2.6],\n  [8, 4.6, 3.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 2.3];\n});\nconst GS = 4, GX = W / GS + 3, GY = H / GS + 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), kd: F(MAXP), g: F(MAXP), w: F(MAXP), ph: F(MAXP), ca: F(MAXP), sa: F(MAXP),\n    kind: new Uint8Array(MAXP), bid: new Uint8Array(MAXP), n: 0,\n    B0: F(NB).fill(-99), BX: F(NB), BY: F(NB), BD: F(NB), BR: F(NB), BP: F(NB), slot: 0, ring: new Float64Array(NB * 7), nr: 0, fl: [0, 0],\n    U: F(GX * GY), V: F(GX * GY), U2: F(GX * GY), V2: F(GX * GY), D: F(N), O: F(N), S: F(N), G: F(N), tmp: F(N), col: F(12),\n    T: 0, next: 0, side: rnd() \u003c 0.5 ? -1 : 1, hue: 0, force: 0, shim: 0.06, started: false,\n  };\n}\n\n// A strike at x0: the cake sits on the floor at row 116.\nfunction strike(S, x0) {\n  const q = (S.slot = (S.slot + 1) % NB), f = S.force;\n  S.B0[q] = S.T;\n  S.BP[q] = 0;\n  S.BX[q] = x0;\n  S.BY[q] = 116;\n  // How far the head climbs, and how wide its ring opens.\n  S.BD[q] = (80 + 50 * f) * (0.92 + 0.16 * rnd());\n  S.BR[q] = (14.5 + 4.5 * f) * (0.9 + 0.2 * rnd());\n  const nf = 2600, ns = round((90 + 110 * f) * (0.8 + 0.4 * rnd())), nm = 60 + round(1400 * S.shim);\n  for (let j = 0; j \u003c nf + ns + nm && S.n \u003c MAXP; j++) {\n    const i = S.n++, kind = j \u003c nf ? FINE : j \u003c nf + ns ? SPECK : MICA;\n    S.x[i] = x0 + (rnd() - 0.5) * 5;\n    S.y[i] = 115 + (rnd() - 0.5) * 2;\n    S.age[i] = -rnd() * 0.06;\n    S.kind[i] = kind;\n    S.bid[i] = q;\n    S.ph[i] = rnd() * 2 * PI;\n    const az = rnd() * 2 * PI, fill = rnd() \u003c FILL;\n    S.ca[i] = fill ? cos(az) : 1;\n    S.sa[i] = fill ? sin(az) : 0;\n    if (kind === SPECK) {\n      // Specks are thrown out of the cake on steep arcs and fall back.\n      const a = (rnd() + rnd() + rnd() - 1.5) * 1.1, sp = (60 + 50 * rnd()) * (1 + 0.5 * f);\n      S.vx[i] = sp * sin(a);\n      S.vy[i] = -sp * cos(a);\n      S.kd[i] = 0.5 + 0.4 * rnd();\n      S.g[i] = 55 + 25 * rnd();\n      S.life[i] = 2.4 + rnd();\n      S.w[i] = 0.5 + 0.5 * rnd();\n      continue;\n    }\n    // Fine powder is thrown from the cake to a place round the head's\n    // start and comes to rest there in about 0.2 s, its throw halving every\n    // 0.04 to 0.06 s, so the head forms full: 16% round its two eddies, 40%\n    // in a dome over them. Another 22% is lofted over the next 0.6 s and\n    // drawn up behind as the stem, 10% is a skirt flung low along the floor\n    // and 12% a spray that fans out high.\n    const kd = (S.kd[i] = 12 + 6 * rnd()), u = rnd(), R = S.BR[q];\n    let tx, ty;\n    if (u \u003c 0.16) {\n      // Round the two eddies of the head, the hubs it rolls up on.\n      const g = gauss2();\n      tx = x0 + (rnd() \u003c 0.5 ? -R : R) + g[0] * 0.28 * R;\n      ty = 104 + g[1] * 0.28 * R;\n    } else if (u \u003c 0.56 || kind === MICA) {\n      // A thick dome over the head: as the head climbs its outside runs\n      // down round the eddies and curls in under the cap.\n      const t = PI * (1.05 + 0.9 * rnd()), r = 1 - 0.4 * rnd() * rnd();\n      tx = x0 + r * cos(t) * 1.75 * R;\n      ty = 104 + r * sin(t) * 1.45 * R;\n    } else if (u \u003c 0.78) {\n      tx = x0 + (rnd() - 0.5) * 10;\n      ty = 112 - 6 * rnd();\n      S.age[i] = -0.1 - 0.6 * rnd();\n    } else if (u \u003c 0.88) {\n      tx = x0 + (rnd() \u003c 0.5 ? -1 : 1) * (8 + 18 * rnd()) * (1 + 0.4 * f);\n      ty = 114 - 4 * rnd();\n    } else {\n      const a = (rnd() - 0.5) * 2.4, r = (24 + 30 * rnd()) * (1 + 0.4 * f);\n      tx = x0 + r * sin(a);\n      ty = 108 - r * cos(a);\n    }\n    S.vx[i] = (tx - S.x[i]) * kd;\n    S.vy[i] = (ty - S.y[i]) * kd;\n    S.g[i] = 0.4 + 1.2 * rnd();\n    S.life[i] = LIFE * (0.8 + 0.4 * rnd());\n    S.w[i] = 0.6 + 0.6 * rnd();\n  }\n}\n\nfunction gauss2() {\n  const r = sqrt(-2 * Math.log(1 - rnd())), t = 2 * PI * rnd();\n  return [r * cos(t), r * sin(t)];\n}\n\nfunction round(v) {\n  return floor(v + 0.5);\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.kd[i] = S.kd[j];\n  S.g[i] = S.g[j];\n  S.w[i] = S.w[j];\n  S.ph[i] = S.ph[j];\n  S.ca[i] = S.ca[j];\n  S.sa[i] = S.sa[j];\n  S.kind[i] = S.kind[j];\n  S.bid[i] = S.bid[j];\n}\n\n// The eddies on a grid every 4 LEDs, read off between.\nfunction eddies(S) {\n  const T = S.T;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U[gy * GX + gx] = u;\n      S.V[gy * GX + gx] = v;\n      u = 0;\n      v = 0;\n      for (const [kx, ky, w, m, ph] of FINE_WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U2[gy * GX + gx] = u;\n      S.V2[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, h) {\n  S.T += h;\n  S.next -= h;\n  if (S.next \u003c= 0) {\n    // Strikes alternate sides of the middle, 9 to 15 LEDs out.\n    S.side = -S.side;\n    strike(S, 32 + S.side * (9 + 6 * rnd()));\n    S.next = 6.3 * (0.95 + 0.1 * rnd());\n  }\n  eddies(S);\n  // Each strike's head: the plume's ring, seen edge on as two eddies of\n  // opposite spin R apart either side of its axis, climbing D rows on a\n  // curve that slows as it goes.\n  const ring = S.ring;\n  let nr = 0;\n  for (let q = 0; q \u003c NB; q++) {\n    // The head forms once the thrown powder has come to rest round it,\n    // 0.3 s after the strike, and gathers speed over a quarter second.\n    const a = S.T - S.B0[q] - 0.3;\n    if (a \u003c 0 || a > 7) continue;\n    const tau = 2.6, D = S.BD[q], V = ((D / tau) * exp(-a / tau) + 3) * sm(0, 0.25, a);\n    S.BP[q] += V * h;\n    // A third of the climb is the eddies' own: their strength is what moves\n    // a pair of cores 0.65 R wide at V / 3, 4.42 pi R V / 3. The rest is the\n    // warm air the head rides on, a broad rising blob that carries the\n    // cores at the same 2V / 3 as the powder round them; full-strength\n    // eddies rolled the dome into the cores within a second and the head\n    // read as two lobes.\n    const R = S.BR[q], rc = 0.65 * R, o = nr * 7;\n    ring[o] = S.BX[q];\n    ring[o + 1] = S.BY[q] - 12 - S.BP[q];\n    ring[o + 2] = R;\n    ring[o + 3] = rc * rc;\n    ring[o + 4] = (R * (4 + 0.4225) * V) / 6;\n    ring[o + 5] = ((2 * V) / 3) * exp(1 / (1.9 * 1.9));\n    ring[o + 6] = 30 * exp(-a / 2);\n    nr++;\n  }\n  S.nr = nr;\n  const fl = S.fl;\n  for (let i = S.n - 1; i >= 0; i--) {\n    let age = S.age[i];\n    if (age \u003c 0) {\n      S.age[i] = age + h;\n      continue;\n    }\n    age = S.age[i] += h;\n    const x = S.x[i], y = S.y[i];\n    if (age > S.life[i] || y > H + 6 || y \u003c -30 || x \u003c -20 || x > W + 20) {\n      kill(S, i);\n      continue;\n    }\n    if (S.kind[i] === SPECK) {\n      flow(S, x, y, -1);\n      const kd = 1 - exp(-S.kd[i] * h);\n      S.vx[i] += (fl[0] - S.vx[i]) * kd;\n      S.vy[i] += (fl[1] - S.vy[i]) * kd + S.g[i] * h;\n      S.x[i] = x + S.vx[i] * h;\n      S.y[i] = y + S.vy[i] * h;\n    } else {\n      // Fine powder rides the air exactly, plus what is left of the throw\n      // from the strike and a slow settling. Given inertia instead, as the\n      // specks have, it was flung out of the head's two eddies and the head\n      // read as a hollow arch. It is moved by the midpoint rule: a plain\n      // step turned each eddy's core, 19 radians a second, into an outward\n      // spiral, and the head showed two dark holes like eye sockets.\n      const kd = exp(-S.kd[i] * 0.5 * h), tx = S.vx[i] * kd, ty = S.vy[i] * kd + S.g[i] * min(1, age * 0.3);\n      flow(S, x, y, age);\n      flow(S, x + 0.5 * h * (fl[0] + tx), y + 0.5 * h * (fl[1] + ty), age);\n      S.x[i] = x + h * (fl[0] + tx) + (rnd() - 0.5) * 0.5;\n      S.y[i] = y + h * (fl[1] + ty) + (rnd() - 0.5) * 0.5;\n      S.vx[i] *= kd * kd;\n      S.vy[i] *= kd * kd;\n    }\n    // The floor: powder that comes down stays down.\n    if (S.y[i] > 118) {\n      S.y[i] = 118;\n      S.vy[i] *= -0.2;\n      S.vx[i] *= 0.6;\n    }\n  }\n}\n\n// The air at (x, y), into S.fl: the heads' eddies, the column of air still\n// rising under each head, and for powder (age 0 and up) the small eddies,\n// which grow as it ages and spreads.\nfunction flow(S, x, y, age) {\n  const ring = S.ring;\n  let ux = 0, uy = 0;\n  for (let r = 0; r \u003c S.nr; r++) {\n    const o = r * 7, xc = ring[o], yc = ring[o + 1], R = ring[o + 2], rc2 = ring[o + 3], G = ring[o + 4];\n    // Left eddy spins so its inside runs up, the right one the other way.\n    let dx = x - xc + R, dy = y - yc, q = -G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    dx = x - xc - R;\n    q = G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    // The warm air the head rides on.\n    const ex = (x - xc) / (1.9 * R), ey = (y - yc + 0.2 * R) / (1.7 * R);\n    uy -= ring[o + 5] * exp(-ex * ex - ey * ey);\n    // Under the head a column of air keeps rising after it, lifting the\n    // late powder into a stem.\n    if (y > yc) {\n      const sx = (x - xc) / 7;\n      uy -= ring[o + 6] * exp(-sx * sx);\n    }\n  }\n  if (age >= 0) {\n    const U = S.U, V = S.V;\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const eu = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const ev = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    const amp = 0.8 + 1.6 * min(1, age * 0.4), a2 = 9 * exp(-age * 0.7);\n    const U2 = S.U2, V2 = S.V2;\n    const fu = (U2[g] * (1 - ax) + U2[g + 1] * ax) * (1 - ay) + (U2[g + GX] * (1 - ax) + U2[g + GX + 1] * ax) * ay;\n    const fv = (V2[g] * (1 - ax) + V2[g + 1] * ax) * (1 - ay) + (V2[g + GX] * (1 - ax) + V2[g + GX + 1] * ax) * ay;\n    ux += eu * amp + fu * a2;\n    uy += ev * amp + fv * a2;\n  }\n  S.fl[0] = ux;\n  S.fl[1] = uy;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.force = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open 1.5 s after the first strike, the head already rising.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  const h = d * rate;\n  const sub = h > 0.025 ? 2 : 1;\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, O = S.O, SP = S.S, G = S.G, tmp = S.tmp, col = S.col, T = S.T, sh = S.shim;\n  D.fill(0);\n  O.fill(0);\n  SP.fill(0);\n  G.fill(0);\n  // The flow is worked out in one plane through the head's axis, and the\n  // cloud is round that axis, so half the grains are drawn at an angle of\n  // their own round it, seen from a little below, and half in the plane,\n  // which keeps the curls at the head's rim. All in the plane, the head\n  // showed two lobes with dark between them where the jet up the middle\n  // swept it clean; all round the axis, a smooth ball.\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / S.life[i], u2 = u * u, env = min(1, age * 12) * (1 - u2 * u2);\n    const kind = S.kind[i], ax = S.BX[S.bid[i]], r = S.x[i] - ax;\n    const x = ax + r * S.ca[i], y = S.y[i] + r * S.sa[i] * TILT;\n    if (kind === SPECK) splat(SP, x, y, S.w[i] * env);\n    else if (kind === MICA) {\n      // A flake only shows when it turns to the light: a swell a few times\n      // a second, sharpened so most of the time it is dark. Flakes add no\n      // body to the cloud, so Shimmer leaves its size alone.\n      const tw = 0.5 + 0.5 * sin(S.ph[i] + (3 + 2 * sin(S.ph[i] * 3)) * T);\n      const t4 = tw * tw * tw * tw;\n      splat(G, x, y, env * t4 * t4 * (0.8 + 1.2 * sh));\n    } else {\n      // Powder older than a second and a half goes into a softer layer,\n      // so the trails behind the head spread into haze.\n      const old = sm(1, 2.5, age);\n      if (old \u003c 1) splat(D, x, y, S.w[i] * env * (1 - old));\n      if (old > 0) splat(O, x, y, S.w[i] * env * old);\n    }\n  }\n  blur(D, tmp, 2);\n  blur(D, tmp, 1);\n  blur(O, tmp, 3);\n  blur(O, tmp, 2);\n  for (let p = 0; p \u003c N; p++) D[p] += O[p];\n  // Pigment, its pale lit side, the pearl tint mica gives the lit side, and\n  // the glint colour. Coral to lemon read brown and olive when dim, so there\n  // the pigment is paler. Elsewhere the pigment is laid at full saturation\n  // and only the lit side of thick powder goes pale: with an orchid pink at\n  // 0.82 and thick powder paling all over, the cloud's colourfulness was\n  // 0.231, and this way it is 0.393, beside Tunnel on the colour x drift\n  // map, since the cell where it first stood beside Bokeh took Heawood\n  // Torus first.\n  const h = S.hue + 0.84, hf = h - floor(h), warm = sm(0.0, 0.05, hf) * (1 - sm(0.17, 0.24, hf));\n  hsv(h, 1.0 - 0.32 * warm, 1, col, 0);\n  hsv(h - 0.02, 0.6 - 0.12 * warm, 1, col, 3);\n  hsv(h + 0.08, 0.15, 1, col, 6);\n  hsv(h + 0.2, 0.4, 1, col, 9);\n  // Warm powder's faint end is lifted too: a fading peach cloud read as\n  // milky coffee.\n  const gain = GAIN + 0.3 * warm, ga = 1 - 0.4 * warm;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const d = D[p], a = (1 - exp(-d * gain)) ** ga, s = min(1.4, SP[p]), g = G[p];\n      // The studio light is above and to the left: where the cloud thickens\n      // downward or rightward its surface faces the light. Without it the\n      // head was a flat blob of colour.\n      const dn = y \u003c H - 1 ? D[p + W] : d, up = y > 0 ? D[p - W] : d, rt = x \u003c W - 1 ? D[p + 1] : d, lf = x > 0 ? D[p - 1] : d;\n      const nrm = cl(((dn - up) * 0.8 + (rt - lf) * 0.4) / (d + 0.5), -1, 1), lit = 0.98 + 0.4 * nrm;\n      // Thin powder glows in the pigment, thick powder goes pale and bright,\n      // and with mica its lit side turns pearl.\n      const wt = a * a * cl(0.22 + 0.6 * nrm, 0, 1), pm = sh * 0.9 * cl(0.55 + nrm, 0, 1);\n      let r = 0, gg = 0, b = 0;\n      for (let c = 0; c \u003c 3; c++) {\n        const lc = col[3 + c] * (1 - pm) + col[9 + c] * pm, v = (col[c] * (1 - wt) + lc * wt) * a * lit;\n        // Specks are pigment, glints are light.\n        const o = v + col[c] * s * 0.8 + col[6 + c] * g;\n        if (c === 0) r = o;\n        else if (c === 1) gg = o;\n        else b = o;\n      }\n      if (warm > 0) {\n        // Dim peach and lemon read brown and olive, so as warm powder dims\n        // it greys toward a pale dust of the same level instead.\n        const m = max(r, gg, b), k = 0.9 * warm * sqrt(1 - min(1, m / 0.85));\n        r += (m - r) * k;\n        gg += (m - gg) * k;\n        b += (m - b) * k;\n      }\n      display.setPixel(x, y, knee(r * 255), knee(gg * 255), knee(b * 255));\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower."},{"name":"Force","min":0,"max":1,"about":"How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90."},{"name":"Shimmer","min":0,"max":1,"about":"Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment."}],"start":[0,2,0,0.06],"measures":{"motion":0.285,"detail":0.0166,"edges":0.0495,"complexity":1.3583,"coverage":0.4791,"colour":0.3931,"drift":0.3981},"knobResponse":[0.3053,0.2228,0.1341,0.0525]},{"slug":"proscenium","title":"Proscenium","family":"stage","round":23,"note":"금박 프로시니엄 아래 붉은 벨벳 막이 플라이로 올라가면 달빛 바다나 숲, 밤 도시, 눈 내리는 마을을 그린 배경막이 드러나고, 브리지 조명의 빛줄기가 연무를 갈라요. 발레리나가 팔로 스폿을 받으며 도약해 무대를 건너고, 막이 내리면 막 앞에서 인사해요. 맨 아래에는 실크해트를 쓴 사람이 섞인 앞줄 관객의 뒤통수가 있어요.","idea":"A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.","buttons":"K1 tap brings the curtain in now, or takes it out again if it is in.","code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","layer":{"id":"layer-proscenium","type":"code","name":"proscenium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gel","min":0,"max":1,"about":"The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower."},{"name":"Scene","min":0,"max":3,"about":"The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one."},{"name":"Haze","min":0,"max":1,"about":"How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel."}],"start":[0,2,0,0.06],"measures":{"motion":0.1444,"detail":0.0876,"edges":0.3879,"complexity":1.7658,"coverage":0.8713,"colour":0.2563,"drift":0.0949},"knobResponse":[0.0636,0.1625,0.077,0.1771]},{"slug":"pulse-bars","title":"Pulse Bars","family":"rhythm","round":1,"note":"음악 없는 하이파이 미터예요. 작은 드럼 머신이 혼자 치고 막대는 그 소리를 듣는 듯 춤춰요.","idea":"A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.","buttons":"K1 tap grows the bars from the middle line both ways instead of from the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","layer":{"id":"layer-pulse-bars","type":"code","name":"pulse-bars","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour starts at the bass end; it climbs a third of the wheel to the treble end."},{"name":"Tempo","min":90,"max":180,"about":"Beats per minute of the drum machine, with sixteenth-note hats."},{"name":"Bars","min":8,"max":32,"about":"How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth."},{"name":"Decay","min":0,"max":1,"about":"How long each hit rings; low is tight and punchy, high swells and hangs."}],"start":[0,90,8,0.06],"measures":{"motion":0.7885,"detail":0.0861,"edges":0.9999,"complexity":0.1776,"coverage":0.2209,"colour":0.2463,"drift":0.1392},"knobResponse":[0.0897,0.0556,0.0615,0.0607]},{"slug":"rabbit-ears","title":"Rabbit Ears","family":"glitch","round":19,"note":"옛 TV 가 토끼 귀 안테나로 늦은 밤 일기예보를 잡아요. 신호가 흔들리면 진행자와 지도가 색을 잃고 눈 속으로 사라졌다가 블랭킹 띠와 함께 굴러 돌아오고, 오른쪽에는 고스트가 따라붙어요. K1 을 누르면 TV 를 쳐서 그림이 한 바퀴 굴러요.","idea":"An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.","buttons":"K1 tap slaps the side of the set: the hold slips and the picture rolls round once.","code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","layer":{"id":"layer-rabbit-ears","type":"code","name":"rabbit-ears","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between."},{"name":"Signal","min":0,"max":1,"about":"How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow."},{"name":"Ghost","min":0,"max":1,"about":"The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1."}],"start":[0,2,0,0.06],"measures":{"motion":2.2448,"detail":0.1335,"edges":0.365,"complexity":2.3725,"coverage":0.9855,"colour":0.1077,"drift":0.2857},"knobResponse":[0.1208,0.2747,0.0525,0.0711]},{"slug":"rainstorm","title":"Rainstorm","family":"weather","round":2,"note":"빗줄기가 128줄을 다 떨어져 물웅덩이에 고리를 남기고, 가끔 갈라진 번개가 구름을 찢으며 쏟아지는 비를 한순간 밝혀요.","idea":"Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.","buttons":"K1 tap strikes lightning now.","code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-rainstorm","type":"code","name":"rainstorm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the night, the cloud and the rain, starting from slate blue."},{"name":"Rain","min":0.2,"max":3,"about":"From a drizzle of a few slow drops to a downpour."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it."},{"name":"Storm","min":0,"max":1,"about":"How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs."}],"start":[0,2,0,0.06],"measures":{"motion":2.22,"detail":0.0685,"edges":0.8841,"complexity":0.6564,"coverage":0.3785,"colour":0.0656,"drift":0.2647},"knobResponse":[0.0545,0.1279,0.1012,0.1302]},{"slug":"rauzy-fractal","title":"Rauzy Fractal","family":"fractal","round":28,"note":"트리보나치 치환의 라우지 프랙탈이 세 크기의 제 사본으로 판을 덮고, 그 고정점으로 끝없이 들어가요. 타일은 자라 한 크기 위가 되고, 가운데서 퍼지는 고리가 가장 큰 타일을 세 조각으로 나눠요. 누르면 조각 셋이 저마다의 벡터로 미끄러져 같은 테두리 안에 다시 맞물려요.","idea":"The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.","buttons":"K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.","code":"// ===== Patternflow pattern =====\n// Title:   Rauzy Fractal\n// Family:  fractal\n// Idea:    The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Rauzy fractal of the tribonacci substitution (Gérard Rauzy, 1982), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three.\n// Knob 3: Depth. How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4.\n// Knob 4: Glow. At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground.\n// Buttons: K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64;\nconst { min, floor, ceil, sqrt, cos, sin, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The tribonacci constant TH, the real root of x^3 = x^2 + x + 1, and beta,\n// one of the other two roots, |beta| = 1/sqrt(TH) = 0.7374.\nlet TH = 2;\nfor (let i = 0; i \u003c 40; i++) TH -= (TH ** 3 - TH * TH - TH - 1) / (3 * TH * TH - 2 * TH - 1);\nconst BR = (1 - TH) / 2, BI = sqrt(1 / TH - BR * BR), BM = sqrt(BR * BR + BI * BI), BA = atan2(BI, BR);\n// The substitution 1 -> 12, 2 -> 13, 3 -> 1 counts letters with the matrix\n// M = [[1,1,1],[1,0,0],[0,1,0]]. A vector v of letter counts lands in the\n// contracting plane as z(v) = v1 + v2 (beta - 1) + v3 / beta, and z(M v) is\n// beta z(v). ZX, ZY are z of one letter 1, 2 or 3.\nconst ZX = [1, BR - 1, BR * TH], ZY = [0, BI, -BI * TH];\n// The lattice of z(v) with v1 + v2 + v3 = 0, spanned by z(e2 - e3), z(e3 - e1).\nconst AX = ZX[1] - ZX[2], AY = ZY[1] - ZY[2], BX = ZX[2] - 1, BY = ZY[2], DET = AX * BY - AY * BX;\n// The height along the expanding direction, h(v) = TH v1 + (TH^2 - TH) v2 + v3,\n// written as AL (v1 + v2 + v3) + HX Re z(v) + HY Im z(v).\nconst LH = [TH, TH * TH - TH, 1];\nconst [AL, HX, HY] = (() => {\n  const m = [0, 1, 2].map((j) => [1, ZX[j], ZY[j]]);\n  const d3 = (a, b, c) => a[0] * (b[1] * c[2] - b[2] * c[1]) - a[1] * (b[0] * c[2] - b[2] * c[0]) + a[2] * (b[0] * c[1] - b[1] * c[0]);\n  const D = d3(m[0], m[1], m[2]), col = (k) => m.map((r, j) => r.map((v, q) => (q === k ? LH[j] : v)));\n  return [0, 1, 2].map((k) => { const c = col(k); return d3(c[0], c[1], c[2]) / D; });\n})();\n\n// The fixed word 1213121121312... and where each prefix lands. A torus cell\n// (the plane modulo the lattice, G x G cells) remembers the letter after a\n// prefix landing in it and, two bits a letter, the letters of its ancestors\n// under the substitution: the piece, then the piece of the piece, sixteen\n// deep. KA, KB say which copy of the fractal the prefix fell in.\nconst G = 256, GM = G - 1, NW = 160000;\nconst CH = new Int32Array(G * G), KA = new Int8Array(G * G), KB = new Int8Array(G * G);\nlet HR0 = 1e9, HR1 = -1e9, MX = 0, MY = 0;\n{\n  const ch = new Int32Array(NW);\n  let n = 0;\n  for (let m = 0; n \u003c NW; m++) {\n    const a = ch[m] & 3, up = ch[m] \u003c\u003c 2;\n    ch[n++] = up;\n    if (a \u003c 2 && n \u003c NW) ch[n++] = up | (a + 1);\n  }\n  let x = 0, y = 0;\n  for (let i = 0; i \u003c NW; i++) {\n    const a = (x * BY - y * BX) / DET, b = (AX * y - AY * x) / DET, fa = floor(a), fb = floor(b);\n    const c = min(GM, floor((a - fa) * G)) + min(GM, floor((b - fb) * G)) * G;\n    CH[c] = ch[i];\n    KA[c] = fa;\n    KB[c] = fb;\n    const hr = HX * x + HY * y;\n    if (hr \u003c HR0) HR0 = hr;\n    if (hr > HR1) HR1 = hr;\n    const l = ch[i] & 3;\n    MX += x / NW;\n    MY += y / NW;\n    x += ZX[l];\n    y += ZY[l];\n  }\n}\n\n// The middle of R is MX, MY; R_1 = beta R, R_2 = beta^2 R + 1 and\n// R_3 = beta^3 R + beta + 1, and CEN holds their middles.\nconst CEN = [];\n{\n  let x = MX, y = MY;\n  for (let i = 0; i \u003c 3; i++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    CEN.push(x + (i > 0 ? 1 : 0) + (i > 1 ? BR : 0), y + (i > 1 ? BI : 0));\n  }\n}\n\n// The self-replicating tiling: a copy z(v) + R_i of piece i for every\n// v in Z^3 with 0 \u003c= h(v) \u003c h(e_i). The pieces are R scaled by beta, beta^2\n// and beta^3, so every tile is the fractal itself at one of three sizes.\n// For a point p, the copy of piece i holding it has z(v) = p - r with r in\n// R, and only two or three counts v1 + v2 + v3 = k can pass the height test.\nlet TCH = 0, TID = 0, TX = 0, TY = 0;\nfunction tile(px, py) {\n  const cp = HX * px + HY * py, k1 = (HR1 - cp + LH[0]) / AL;\n  for (let k = ceil((HR0 - cp) / AL - 1e-6); k \u003c= k1; k++) {\n    const qx = px - k, a = (qx * BY - py * BX) / DET, b = (AX * py - AY * qx) / DET;\n    const fa = floor(a), fb = floor(b), c = (floor((a - fa) * G) & GM) + (floor((b - fb) * G) & GM) * G;\n    const ta = fa - KA[c], tb = fb - KB[c], ch = CH[c], t = ch & 3;\n    const v1 = k - tb, v2 = ta, v3 = tb - ta, h = LH[0] * v1 + LH[1] * v2 + v3;\n    if (h >= 0 && h \u003c LH[t]) {\n      TCH = ch;\n      TID = ((v1 * 1024 + v2) * 1024 + v3) * 4 + t;\n      TX = v1 * ZX[0] + v2 * ZX[1] + v3 * ZX[2] + CEN[t * 2];\n      TY = v1 * ZY[0] + v2 * ZY[1] + v3 * ZY[2] + CEN[t * 2 + 1];\n      return t;\n    }\n  }\n  return -1;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// A tile's colour follows its age. The smallest tiles (copies of piece 3)\n// are young, piece 2 middle-aged, piece 1 old; a level of zoom later each\n// has grown into the next, and the old ones have split into three. Hue,\n// saturation and value at ages 0, 1 and 2; LUT holds them from age -1 to 2.5\n// for each of a tile's own three pieces, which turn the hue by PH and light\n// it by PV.\nconst AGE = [\n  [0.86, 0.8, 0.85],\n  [0.68, 0.85, 0.95],\n  [0.5, 0.9, 1],\n];\nconst PH = [0, 0.035, -0.03], PV = [1, 0.7, 0.48];\nconst LN = 71, LA = -1, LS = 0.05;\n\n// The domain exchange: piece j of R moves by z(e_j), and the three land in\n// R again. A tile of type t is R scaled by beta^(t+1), so its pieces move by\n// beta^(t+1) z(e_j), EV[t*6 + j*2].\nconst EV = [];\n{\n  let x = 1, y = 0;\n  for (let t = 0; t \u003c 3; t++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    for (let j = 0; j \u003c 3; j++) EV.push(x * ZX[j] - y * ZY[j], x * ZY[j] + y * ZX[j]);\n  }\n}\n\n// LEDs a unit of the plane at the start of a level, the turn of the view per\n// level (a turn of beta less a third of a full turn, so three levels close\n// the loop), how far the splitting ring runs in a level, and the exchange's\n// slide, hold and settle in seconds.\nconst S0 = 24, ROT = BA - (2 * PI) / 3, RING = 140, EX1 = 1.5, EX2 = 2.3, EXT = 3.3;\n\nexport function setup(params) {\n  params.s = { m: 0, f: 0, ex: -1, hue: 0, depth: 1, glow: 0.06, id: new Float64Array(N), buf: new Float32Array(N * 3), lut: new Float32Array(3 * LN * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.depth = cl(k[2], 1, 4);\n  P.glow = cl(k[3], 0, 1);\n  if (P.ex >= 0) {\n    P.ex += d;\n    if (P.ex > EXT) P.ex = -1;\n  } else {\n    P.f += d * cl(k[1], 0.2, 3) * 0.1;\n    if (P.f >= 1) (P.f -= 1), (P.m = (P.m + 1) % 3);\n    if (input.btnPressed && input.btnPressed[0]) P.ex = 0;\n  }\n}\n\n// The light of a point from the pieces it lies in, level by level from\n// letter kk down; a piece of type s splits again s + 1 letters lower.\nfunction tone(ch, kk, D) {\n  let v = 1;\n  for (let n = 2; n \u003c= 5 && kk \u003c 16; n++) {\n    const s = (ch >> (2 * kk)) & 3, w = cl(D + 1 - n, 0, 1) * 0.5;\n    v *= 1 - w * (1 - PV[s]);\n    kk += 1 + s;\n  }\n  return v;\n}\n\n// The colour of the plane point (px, py) into CR, CG, CB, and its tile (and\n// once split, its piece) into CID. Returns the tile's type, or -1 on the\n// rare point the table cannot place.\nlet CR = 0, CG = 0, CB = 0, CID = 0;\nfunction shade(px, py, f, ring, sc, D, lut) {\n  const t = tile(px, py);\n  if (t \u003c 0) return -1;\n  const ch = TCH, s1 = (ch >> (2 * t + 2)) & 3;\n  let a = t ? 2 - t + f : 2, v = tone(ch, t + 2 + s1, D), li = (s1 * LN + round((a - LA) / LS)) * 3;\n  CID = TID * 4;\n  if (t === 0) {\n    // An old tile splits as the ring passes its middle: each piece takes\n    // the colour of the young tile it becomes, with a flash.\n    const sp = cl((ring - sqrt(TX * TX + TY * TY) / sc) / 16, 0, 1);\n    if (sp > 0) {\n      const s2 = (ch >> (4 + 2 * s1)) & 3, a2 = 1 - s1 + f, v2 = tone(ch, 3 + s1 + s2, D) * (1 + 1.4 * sp * (1 - sp));\n      const l2 = (s2 * LN + cl(round((a2 - LA) / LS), 0, LN - 1)) * 3, u = 1 - sp;\n      CR = (lut[li] * v * u + lut[l2] * v2 * sp);\n      CG = (lut[li + 1] * v * u + lut[l2 + 1] * v2 * sp);\n      CB = (lut[li + 2] * v * u + lut[l2 + 2] * v2 * sp);\n      if (sp > 0.5) CID += s1 + 1;\n      return 0;\n    }\n  }\n  CR = lut[li] * v;\n  CG = lut[li + 1] * v;\n  CB = lut[li + 2] * v;\n  return t;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.f, sc = BM ** f / S0, an = ROT * f - ((2 * PI) / 3) * P.m, co = cos(an) * sc, si = sin(an) * sc;\n  const ID = P.id, buf = P.buf, lut = P.lut, D = P.depth, ring = (f - 0.04) * RING;\n  for (let s = 0; s \u003c 3; s++)\n    for (let i = 0; i \u003c LN; i++) {\n      const a = cl(LA + i * LS, 0, 2), j = min(1, floor(a)), u = a - j, A = AGE[j], B = AGE[j + 1], young = cl(1 + (LA + i * LS) * 0.4, 0.6, 1);\n      hsv(P.hue + A[0] + (B[0] - A[0]) * u + PH[s], A[1] + (B[1] - A[1]) * u, (A[2] + (B[2] - A[2]) * u) * young * PV[s], lut, (s * LN + i) * 3);\n    }\n  // While the pieces slide, each LED looks for a piece that has arrived on\n  // it: a point q of a type-t tile in piece j with q + slide = p.\n  const ex = P.ex, sl = ex \u003c 0 ? 0 : sstep(0, EX1, ex), back = ex \u003c 0 ? 1 : sstep(EX2, EXT, ex);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const X = x + 0.5 - CX, Y = y + 0.5 - CY, px = co * X - si * Y, py = si * X + co * Y, o = p * 3;\n      let r = 0, g = 0, b = 0, id = -1;\n      if (back \u003c 1)\n        for (let e = 0; e \u003c 18 && id \u003c 0; e += 2) {\n          const t = (e / 6) | 0;\n          if (shade(px - sl * EV[e], py - sl * EV[e + 1], f, ring, sc, D, lut) === t && ((TCH >> (2 * t + 2)) & 3) === (e % 6) / 2)\n            (r = CR), (g = CG), (b = CB), (id = TID * 32 + 1 + e);\n        }\n      if (back > 0 && (shade(px, py, f, ring, sc, D, lut) >= 0 || shade(px + 0.3 * sc, py, f, ring, sc, D, lut) >= 0)) {\n        r += (CR - r) * back;\n        g += (CG - g) * back;\n        b += (CB - b) * back;\n        if (back > 0.5) id = CID;\n      }\n      ID[p] = id;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  // A seam between tiles: dark at Glow 0, pale light at 1.\n  const gl = P.glow, dim = 1 - 0.55 * gl;\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const s = (x \u003c W - 1 && ID[p + 1] !== ID[p]) || (y \u003c H - 1 && ID[p + W] !== ID[p]), o = p * 3;\n      for (let c = 0; c \u003c 3; c++) {\n        const v = min(255, buf[o + c]) * dim;\n        buf[o + c] = s ? v * (0.12 + 0.3 * gl) + 170 * gl : v;\n      }\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-rauzy-fractal","type":"code","name":"rauzy-fractal","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rauzy Fractal\n// Family:  fractal\n// Idea:    The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Rauzy fractal of the tribonacci substitution (Gérard Rauzy, 1982), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three.\n// Knob 3: Depth. How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4.\n// Knob 4: Glow. At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground.\n// Buttons: K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64;\nconst { min, floor, ceil, sqrt, cos, sin, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The tribonacci constant TH, the real root of x^3 = x^2 + x + 1, and beta,\n// one of the other two roots, |beta| = 1/sqrt(TH) = 0.7374.\nlet TH = 2;\nfor (let i = 0; i \u003c 40; i++) TH -= (TH ** 3 - TH * TH - TH - 1) / (3 * TH * TH - 2 * TH - 1);\nconst BR = (1 - TH) / 2, BI = sqrt(1 / TH - BR * BR), BM = sqrt(BR * BR + BI * BI), BA = atan2(BI, BR);\n// The substitution 1 -> 12, 2 -> 13, 3 -> 1 counts letters with the matrix\n// M = [[1,1,1],[1,0,0],[0,1,0]]. A vector v of letter counts lands in the\n// contracting plane as z(v) = v1 + v2 (beta - 1) + v3 / beta, and z(M v) is\n// beta z(v). ZX, ZY are z of one letter 1, 2 or 3.\nconst ZX = [1, BR - 1, BR * TH], ZY = [0, BI, -BI * TH];\n// The lattice of z(v) with v1 + v2 + v3 = 0, spanned by z(e2 - e3), z(e3 - e1).\nconst AX = ZX[1] - ZX[2], AY = ZY[1] - ZY[2], BX = ZX[2] - 1, BY = ZY[2], DET = AX * BY - AY * BX;\n// The height along the expanding direction, h(v) = TH v1 + (TH^2 - TH) v2 + v3,\n// written as AL (v1 + v2 + v3) + HX Re z(v) + HY Im z(v).\nconst LH = [TH, TH * TH - TH, 1];\nconst [AL, HX, HY] = (() => {\n  const m = [0, 1, 2].map((j) => [1, ZX[j], ZY[j]]);\n  const d3 = (a, b, c) => a[0] * (b[1] * c[2] - b[2] * c[1]) - a[1] * (b[0] * c[2] - b[2] * c[0]) + a[2] * (b[0] * c[1] - b[1] * c[0]);\n  const D = d3(m[0], m[1], m[2]), col = (k) => m.map((r, j) => r.map((v, q) => (q === k ? LH[j] : v)));\n  return [0, 1, 2].map((k) => { const c = col(k); return d3(c[0], c[1], c[2]) / D; });\n})();\n\n// The fixed word 1213121121312... and where each prefix lands. A torus cell\n// (the plane modulo the lattice, G x G cells) remembers the letter after a\n// prefix landing in it and, two bits a letter, the letters of its ancestors\n// under the substitution: the piece, then the piece of the piece, sixteen\n// deep. KA, KB say which copy of the fractal the prefix fell in.\nconst G = 256, GM = G - 1, NW = 160000;\nconst CH = new Int32Array(G * G), KA = new Int8Array(G * G), KB = new Int8Array(G * G);\nlet HR0 = 1e9, HR1 = -1e9, MX = 0, MY = 0;\n{\n  const ch = new Int32Array(NW);\n  let n = 0;\n  for (let m = 0; n \u003c NW; m++) {\n    const a = ch[m] & 3, up = ch[m] \u003c\u003c 2;\n    ch[n++] = up;\n    if (a \u003c 2 && n \u003c NW) ch[n++] = up | (a + 1);\n  }\n  let x = 0, y = 0;\n  for (let i = 0; i \u003c NW; i++) {\n    const a = (x * BY - y * BX) / DET, b = (AX * y - AY * x) / DET, fa = floor(a), fb = floor(b);\n    const c = min(GM, floor((a - fa) * G)) + min(GM, floor((b - fb) * G)) * G;\n    CH[c] = ch[i];\n    KA[c] = fa;\n    KB[c] = fb;\n    const hr = HX * x + HY * y;\n    if (hr \u003c HR0) HR0 = hr;\n    if (hr > HR1) HR1 = hr;\n    const l = ch[i] & 3;\n    MX += x / NW;\n    MY += y / NW;\n    x += ZX[l];\n    y += ZY[l];\n  }\n}\n\n// The middle of R is MX, MY; R_1 = beta R, R_2 = beta^2 R + 1 and\n// R_3 = beta^3 R + beta + 1, and CEN holds their middles.\nconst CEN = [];\n{\n  let x = MX, y = MY;\n  for (let i = 0; i \u003c 3; i++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    CEN.push(x + (i > 0 ? 1 : 0) + (i > 1 ? BR : 0), y + (i > 1 ? BI : 0));\n  }\n}\n\n// The self-replicating tiling: a copy z(v) + R_i of piece i for every\n// v in Z^3 with 0 \u003c= h(v) \u003c h(e_i). The pieces are R scaled by beta, beta^2\n// and beta^3, so every tile is the fractal itself at one of three sizes.\n// For a point p, the copy of piece i holding it has z(v) = p - r with r in\n// R, and only two or three counts v1 + v2 + v3 = k can pass the height test.\nlet TCH = 0, TID = 0, TX = 0, TY = 0;\nfunction tile(px, py) {\n  const cp = HX * px + HY * py, k1 = (HR1 - cp + LH[0]) / AL;\n  for (let k = ceil((HR0 - cp) / AL - 1e-6); k \u003c= k1; k++) {\n    const qx = px - k, a = (qx * BY - py * BX) / DET, b = (AX * py - AY * qx) / DET;\n    const fa = floor(a), fb = floor(b), c = (floor((a - fa) * G) & GM) + (floor((b - fb) * G) & GM) * G;\n    const ta = fa - KA[c], tb = fb - KB[c], ch = CH[c], t = ch & 3;\n    const v1 = k - tb, v2 = ta, v3 = tb - ta, h = LH[0] * v1 + LH[1] * v2 + v3;\n    if (h >= 0 && h \u003c LH[t]) {\n      TCH = ch;\n      TID = ((v1 * 1024 + v2) * 1024 + v3) * 4 + t;\n      TX = v1 * ZX[0] + v2 * ZX[1] + v3 * ZX[2] + CEN[t * 2];\n      TY = v1 * ZY[0] + v2 * ZY[1] + v3 * ZY[2] + CEN[t * 2 + 1];\n      return t;\n    }\n  }\n  return -1;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// A tile's colour follows its age. The smallest tiles (copies of piece 3)\n// are young, piece 2 middle-aged, piece 1 old; a level of zoom later each\n// has grown into the next, and the old ones have split into three. Hue,\n// saturation and value at ages 0, 1 and 2; LUT holds them from age -1 to 2.5\n// for each of a tile's own three pieces, which turn the hue by PH and light\n// it by PV.\nconst AGE = [\n  [0.86, 0.8, 0.85],\n  [0.68, 0.85, 0.95],\n  [0.5, 0.9, 1],\n];\nconst PH = [0, 0.035, -0.03], PV = [1, 0.7, 0.48];\nconst LN = 71, LA = -1, LS = 0.05;\n\n// The domain exchange: piece j of R moves by z(e_j), and the three land in\n// R again. A tile of type t is R scaled by beta^(t+1), so its pieces move by\n// beta^(t+1) z(e_j), EV[t*6 + j*2].\nconst EV = [];\n{\n  let x = 1, y = 0;\n  for (let t = 0; t \u003c 3; t++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    for (let j = 0; j \u003c 3; j++) EV.push(x * ZX[j] - y * ZY[j], x * ZY[j] + y * ZX[j]);\n  }\n}\n\n// LEDs a unit of the plane at the start of a level, the turn of the view per\n// level (a turn of beta less a third of a full turn, so three levels close\n// the loop), how far the splitting ring runs in a level, and the exchange's\n// slide, hold and settle in seconds.\nconst S0 = 24, ROT = BA - (2 * PI) / 3, RING = 140, EX1 = 1.5, EX2 = 2.3, EXT = 3.3;\n\nexport function setup(params) {\n  params.s = { m: 0, f: 0, ex: -1, hue: 0, depth: 1, glow: 0.06, id: new Float64Array(N), buf: new Float32Array(N * 3), lut: new Float32Array(3 * LN * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.depth = cl(k[2], 1, 4);\n  P.glow = cl(k[3], 0, 1);\n  if (P.ex >= 0) {\n    P.ex += d;\n    if (P.ex > EXT) P.ex = -1;\n  } else {\n    P.f += d * cl(k[1], 0.2, 3) * 0.1;\n    if (P.f >= 1) (P.f -= 1), (P.m = (P.m + 1) % 3);\n    if (input.btnPressed && input.btnPressed[0]) P.ex = 0;\n  }\n}\n\n// The light of a point from the pieces it lies in, level by level from\n// letter kk down; a piece of type s splits again s + 1 letters lower.\nfunction tone(ch, kk, D) {\n  let v = 1;\n  for (let n = 2; n \u003c= 5 && kk \u003c 16; n++) {\n    const s = (ch >> (2 * kk)) & 3, w = cl(D + 1 - n, 0, 1) * 0.5;\n    v *= 1 - w * (1 - PV[s]);\n    kk += 1 + s;\n  }\n  return v;\n}\n\n// The colour of the plane point (px, py) into CR, CG, CB, and its tile (and\n// once split, its piece) into CID. Returns the tile's type, or -1 on the\n// rare point the table cannot place.\nlet CR = 0, CG = 0, CB = 0, CID = 0;\nfunction shade(px, py, f, ring, sc, D, lut) {\n  const t = tile(px, py);\n  if (t \u003c 0) return -1;\n  const ch = TCH, s1 = (ch >> (2 * t + 2)) & 3;\n  let a = t ? 2 - t + f : 2, v = tone(ch, t + 2 + s1, D), li = (s1 * LN + round((a - LA) / LS)) * 3;\n  CID = TID * 4;\n  if (t === 0) {\n    // An old tile splits as the ring passes its middle: each piece takes\n    // the colour of the young tile it becomes, with a flash.\n    const sp = cl((ring - sqrt(TX * TX + TY * TY) / sc) / 16, 0, 1);\n    if (sp > 0) {\n      const s2 = (ch >> (4 + 2 * s1)) & 3, a2 = 1 - s1 + f, v2 = tone(ch, 3 + s1 + s2, D) * (1 + 1.4 * sp * (1 - sp));\n      const l2 = (s2 * LN + cl(round((a2 - LA) / LS), 0, LN - 1)) * 3, u = 1 - sp;\n      CR = (lut[li] * v * u + lut[l2] * v2 * sp);\n      CG = (lut[li + 1] * v * u + lut[l2 + 1] * v2 * sp);\n      CB = (lut[li + 2] * v * u + lut[l2 + 2] * v2 * sp);\n      if (sp > 0.5) CID += s1 + 1;\n      return 0;\n    }\n  }\n  CR = lut[li] * v;\n  CG = lut[li + 1] * v;\n  CB = lut[li + 2] * v;\n  return t;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.f, sc = BM ** f / S0, an = ROT * f - ((2 * PI) / 3) * P.m, co = cos(an) * sc, si = sin(an) * sc;\n  const ID = P.id, buf = P.buf, lut = P.lut, D = P.depth, ring = (f - 0.04) * RING;\n  for (let s = 0; s \u003c 3; s++)\n    for (let i = 0; i \u003c LN; i++) {\n      const a = cl(LA + i * LS, 0, 2), j = min(1, floor(a)), u = a - j, A = AGE[j], B = AGE[j + 1], young = cl(1 + (LA + i * LS) * 0.4, 0.6, 1);\n      hsv(P.hue + A[0] + (B[0] - A[0]) * u + PH[s], A[1] + (B[1] - A[1]) * u, (A[2] + (B[2] - A[2]) * u) * young * PV[s], lut, (s * LN + i) * 3);\n    }\n  // While the pieces slide, each LED looks for a piece that has arrived on\n  // it: a point q of a type-t tile in piece j with q + slide = p.\n  const ex = P.ex, sl = ex \u003c 0 ? 0 : sstep(0, EX1, ex), back = ex \u003c 0 ? 1 : sstep(EX2, EXT, ex);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const X = x + 0.5 - CX, Y = y + 0.5 - CY, px = co * X - si * Y, py = si * X + co * Y, o = p * 3;\n      let r = 0, g = 0, b = 0, id = -1;\n      if (back \u003c 1)\n        for (let e = 0; e \u003c 18 && id \u003c 0; e += 2) {\n          const t = (e / 6) | 0;\n          if (shade(px - sl * EV[e], py - sl * EV[e + 1], f, ring, sc, D, lut) === t && ((TCH >> (2 * t + 2)) & 3) === (e % 6) / 2)\n            (r = CR), (g = CG), (b = CB), (id = TID * 32 + 1 + e);\n        }\n      if (back > 0 && (shade(px, py, f, ring, sc, D, lut) >= 0 || shade(px + 0.3 * sc, py, f, ring, sc, D, lut) >= 0)) {\n        r += (CR - r) * back;\n        g += (CG - g) * back;\n        b += (CB - b) * back;\n        if (back > 0.5) id = CID;\n      }\n      ID[p] = id;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  // A seam between tiles: dark at Glow 0, pale light at 1.\n  const gl = P.glow, dim = 1 - 0.55 * gl;\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const s = (x \u003c W - 1 && ID[p + 1] !== ID[p]) || (y \u003c H - 1 && ID[p + W] !== ID[p]), o = p * 3;\n      for (let c = 0; c \u003c 3; c++) {\n        const v = min(255, buf[o + c]) * dim;\n        buf[o + c] = s ? v * (0.12 + 0.3 * gl) + 170 * gl : v;\n      }\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three."},{"name":"Depth","min":1,"max":4,"about":"How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4."},{"name":"Glow","min":0,"max":1,"about":"At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground."}],"start":[0,2,1,0.06],"measures":{"motion":0.2887,"detail":0.0655,"edges":0.9038,"complexity":0.1892,"coverage":0.9988,"colour":0.5834,"drift":0.167},"knobResponse":[0.5259,0.2583,0.0944,0.2959]},{"slug":"reaction-diffusion","title":"Reaction Diffusion","family":"sim","round":1,"note":"두 물질이 번지고 먹고 먹히며 산호와 미로와 점박이를 길러요. K3 가 종을 바꿔요.","idea":"Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.","buttons":"K1 tap reseeds the dish.","code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","layer":{"id":"layer-reaction-diffusion","type":"code","name":"reaction-diffusion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the culture's colour around the wheel."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the culture grows; at 2 it runs 240 steps a second."},{"name":"Species","min":0,"max":5,"about":"Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms."},{"name":"Grain","min":0,"max":1,"about":"Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree."}],"start":[0,2,0,0.06],"measures":{"motion":0.0572,"detail":0.0825,"edges":0.3087,"complexity":2.0894,"coverage":0.7212,"colour":0.4058,"drift":0.1337},"knobResponse":[0.314,0.2095,0.2824,0.2879]},{"slug":"renyi-parking","title":"Rényi Parking","family":"data","round":35,"note":"128줄이 저마다 60 LED 길이의 거리이고, 6 LED 짜리 차가 아무 데나 와서 들어갈 틈이 있을 때만 서요. 거리는 위에서 빈 채로 들어와 내려가며 차고, 바닥에 닿으면 차 길이만 한 틈이 하나도 없이 72% 쯤 막혀요. 먼저 온 차는 하늘색, 마지막 틈에 끼어든 차는 금색이며 옆 눈금이 바닥을 떠난 거리 128개의 평균을 예측값 0.722 의 금색 눈금에 대 보고, K3 은 차 길이를 6~15 LED 로 바꾸고 K1 을 누르면 차가 다 왼쪽으로 밀려 줄마다 채운 몫만 한 막대가 돼요.","idea":"Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.","buttons":"K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.","code":"// ===== Patternflow pattern =====\n// Title:   Rényi Parking\n// Family:  data\n// Idea:    Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Rényi's parking problem (Alfréd Rényi, 1958), with its lattice form, Flory's dimers (Paul Flory, 1939)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1\n//\n// Knob 1: Hue. Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too.\n// Knob 2: Speed. How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes.\n// Knob 3: Length. The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it.\n// Knob 4: Lattice. Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street.\n// Buttons: K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.\n\nconst W = 64, H = 128, S = 60, MAXC = 32, GX = 61;\n// Rényi's constant, the share an endless street fills once jammed.\nconst C = 0.7475979202534114;\nconst { min, max, floor, ceil, round, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The street's own clock: t car arrivals have been tried per car length of\n// street by the time it has come down tau rows. It runs slowly at the top\n// and without end at row 127, so every street leaves the panel jammed.\n// With 6-LED cars a street is on average 0.29 full at row 42 (t = 0.45),\n// 0.54 at row 85 (t = 1.8) and 0.70 at row 120, and from there to the\n// bottom the few cars that still fit squeeze in: the slow end of the\n// filling, which on an endless street never stops.\nconst A = 0.9;\nconst clockAt = (tau) => (tau >= H - 1 ? Infinity : (A * tau) / (H - 1 - tau));\n\n// The mean number of cars a jammed street holds. Parked anywhere, a street\n// x car lengths long holds M(x), where M = 0 below 1 and\n// M(x) = 1 + 2/(x - 1) times the integral of M from 0 to x - 1, since the\n// first car splits the street into two streets of random length. That is\n// solved here in steps of 1/2048 of a car: 7.2236 cars at x = 10, the\n// 6-LED cars, a fill of 0.7224. Rényi's C (x + 1) - 1 agrees with it to\n// 1e-5 from x = 6 up and is 0.0045 cars low at x = 4. On a grid of N\n// points with k to a car the same split gives M(n) = 1 + 2/(n - k + 1)\n// times the sum of M(j) for j \u003c= n - k, summed exactly.\nfunction renyi(x) {\n  const h = 1 / 2048, n = round(x / h), one = 2048;\n  if (n \u003c one) return 0;\n  const m = new Float64Array(n + 1), area = new Float64Array(n + 1);\n  for (let i = one; i \u003c= n; i++) {\n    // area[i] is the integral of M from 1 to i h by trapezoids, M being 0\n    // below 1 and jumping to 1 there.\n    m[i] = i === one ? 1 : 1 + (2 / (i * h - 1)) * area[i - one];\n    if (i > one) area[i] = area[i - 1] + (h * (m[i] + m[i - 1])) / 2;\n  }\n  return m[n];\n}\nfunction predict(L, k) {\n  if (!k) return (renyi(S / L) * L) / S;\n  const N = floor((S * k) / L + 1e-9), m = new Float64Array(N + 1);\n  let sum = 0;\n  for (let n = 0; n \u003c= N; n++) {\n    if (n >= k) sum += m[n - k];\n    m[n] = n \u003c k ? 0 : 1 + (2 * sum) / (n - k + 1);\n  }\n  return (m[N] * L) / S;\n}\n\nfunction newStreet() {\n  return { pos: new Float32Array(MAXC), at: new Float32Array(MAXC), n: 0, L: 6, k: 0, F: 0, next: 0, last: 1 };\n}\n\n// Where a car can still stop: for every gap the start points that leave room\n// for it, as a length in LEDs (anywhere) or a count of grid points (on a\n// grid). With pick >= 0 it returns the start point that far into them.\n// rate() turns the total into tries that succeed per unit of the street's\n// clock: one try per car length of street, spread evenly.\nfunction feasible(st, pick) {\n  const { pos, n, L, k } = st;\n  let total = 0, start = 0;\n  if (!k) {\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? pos[i] : S, room = end - start - L;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return start + (pick - total);\n        total += room;\n      }\n      if (i \u003c n) start = pos[i] + L;\n    }\n  } else {\n    const d = L / k, N = floor((S * k) / L + 1e-9);\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? round(pos[i] / d) : N, room = end - start - k + 1;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return (start + floor(pick - total)) * d;\n        total += room;\n      }\n      if (i \u003c n) start = round(pos[i] / d) + k;\n    }\n  }\n  return pick >= 0 ? -1 : total;\n}\n\nconst rate = (st) => (st.k ? st.F / st.k : st.F / st.L);\n\nfunction reset(st, L, k, pred) {\n  st.n = 0;\n  st.L = L;\n  st.k = k;\n  // The share parked when the last car is due to come, so the colours run\n  // from the first car to the last whatever the length.\n  st.last = max(0.05, pred - L / S);\n  st.F = feasible(st, -1);\n  st.next = -log(1 - Math.random()) / rate(st);\n}\n\n// Run a street's clock on to t: a try that lands in a feasible stretch\n// parks a car at a uniform place in it. Tries that land anywhere else are\n// turned away and change nothing, so only the successes are drawn, at the\n// rate of the feasible stretch. Each car keeps the share of the street that\n// was already parked when it came.\nfunction advance(st, t) {\n  while (st.F > 0 && st.next \u003c= t) {\n    const x = feasible(st, Math.random() * st.F);\n    if (x \u003c 0) break;\n    let i = st.n;\n    while (i > 0 && st.pos[i - 1] > x) (st.pos[i] = st.pos[i - 1]), (st.at[i] = st.at[i - 1]), i--;\n    st.pos[i] = x;\n    st.at[i] = (st.n * st.L) / S;\n    st.n++;\n    st.F = feasible(st, -1);\n    if (st.F > 0) st.next += -log(1 - Math.random()) / rate(st);\n  }\n}\n\nexport function setup(params) {\n  const streets = [];\n  for (let i = 0; i \u003c H; i++) streets.push(newStreet());\n  params.s = {\n    streets, head: 0, phase: 0.5, primed: false,\n    hue: 0, speed: 2, L: 6, k: 0, pred: predict(6, 0),\n    // The fills of the last 128 jammed streets of the current length and\n    // grid, as they leave the bottom.\n    outs: new Float32Array(H), outN: 0, outI: 0,\n    pack: -1, rgb: new Float32Array(W * H * 3), pal: new Float32Array(33 * 3), palHue: NaN,\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 6, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const L = round(cl(kv[2], 6, 15)), g = cl(kv[3], 0, 1), k = g \u003c 0.07 ? 0 : max(1, round(1 / g));\n  if (L !== P.L || k !== P.k) {\n    P.L = L;\n    P.k = k;\n    P.pred = predict(L, k);\n    P.outN = P.outI = 0;\n  }\n  // The first frame fills the panel with streets at every stage, each run\n  // on to the clock of its row, so the picture starts whole.\n  if (!P.primed) {\n    for (let r = 0; r \u003c H; r++) {\n      const st = P.streets[(P.head + r) % H];\n      reset(st, L, k, P.pred);\n      advance(st, clockAt(r + P.phase));\n    }\n    P.primed = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.pack \u003c 0) P.pack = 0;\n  if (P.pack >= 0) {\n    // The tap: 0.6 s to pack, 3 s held, 0.6 s back; the streets wait.\n    P.pack += d;\n    if (P.pack >= 4.2) P.pack = -1;\n    return;\n  }\n  P.phase += d * P.speed * 2;\n  while (P.phase >= 1) {\n    P.phase -= 1;\n    // The jammed bottom street leaves and comes back empty at the top.\n    const bottom = P.streets[(P.head + H - 1) % H];\n    if (bottom.L === P.L && bottom.k === P.k) {\n      P.outs[P.outI] = (bottom.n * bottom.L) / S;\n      P.outI = (P.outI + 1) % H;\n      P.outN = min(H, P.outN + 1);\n    }\n    P.head = (P.head + H - 1) % H;\n    reset(bottom, L, k, P.pred);\n  }\n  for (let r = 0; r \u003c H; r++) advance(P.streets[(P.head + r) % H], clockAt(r + P.phase));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.primed) return;\n  const { rgb, pal } = P;\n  if (P.palHue !== P.hue) {\n    // 33 steps from the first car to come to the last: azure through\n    // violet and rose to gold, brighter as it goes, so the latecomers read\n    // first. Between orange and lime a dim car would read brown or olive,\n    // so there the dim end is lifted.\n    for (let i = 0; i \u003c= 32; i++) {\n      const u = i / 32, h = P.hue + 0.58 + 0.55 * u, band = max(0, 1 - abs(h - floor(h) - 0.14) / 0.13);\n      const v = 0.6 + 0.4 * u;\n      hsv(h, 0.75 - 0.1 * u, max(v, v + (0.92 - v) * band), pal, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  const e = P.pack \u003c 0 ? 0 : P.pack \u003c 0.6 ? sm(P.pack / 0.6) : P.pack \u003c 3.6 ? 1 : sm((4.2 - P.pack) / 0.6);\n  for (let r = 0; r \u003c H; r++) {\n    const st = P.streets[(P.head + r) % H], L = st.L;\n    for (let i = 0; i \u003c st.n; i++) {\n      // A car covers the LEDs whose centres fall inside it, less half an\n      // LED at each end: L - 1 LEDs and a dark one, so cars that touch\n      // still read as two.\n      const x = st.pos[i] + (i * L - st.pos[i]) * e, x0 = max(0, ceil(x)), x1 = min(S - 1, ceil(x + L - 1) - 1);\n      const c = min(32, round((st.at[i] / st.last) * 32)) * 3;\n      for (let px = x0; px \u003c= x1; px++) {\n        const q = (r * W + px) * 3;\n        (rgb[q] = pal[c]), (rgb[q + 1] = pal[c + 1]), (rgb[q + 2] = pal[c + 2]);\n      }\n    }\n  }\n  const gold = [];\n  hsv(P.hue + 0.13, 0.7, 1, gold, 0);\n  // Packed, the gold line stands at the predicted fill across the streets.\n  if (e > 0.5) {\n    const gx = min(S - 1, floor(P.pred * S));\n    for (let r = 0; r \u003c H; r++) {\n      const q = (r * W + gx) * 3;\n      (rgb[q] = gold[0]), (rgb[q + 1] = gold[1]), (rgb[q + 2] = gold[2]);\n    }\n  }\n  // The gauge, three LEDs wide, from a fill of 0.65 at the bottom to 1 at\n  // the top: a bar to the mean of the last jammed streets, a white tick at\n  // Rényi's constant for an endless street and a gold one at the\n  // prediction for this one.\n  const rowOf = (f) => cl(round(H - 1 - ((f - 0.65) / 0.35) * (H - 1)), 0, H - 1);\n  if (P.outN) {\n    let s = 0;\n    for (let i = 0; i \u003c P.outN; i++) s += P.outs[i];\n    const top = rowOf(s / P.outN);\n    for (let y = top; y \u003c H; y++)\n      for (let x = GX; x \u003c W; x++) {\n        const q = (y * W + x) * 3;\n        (rgb[q] = 0.36), (rgb[q + 1] = 0.4), (rgb[q + 2] = 0.5);\n      }\n  }\n  const tick = (f, c) => {\n    const y = rowOf(f);\n    for (let x = GX - 1; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = c[0]), (rgb[q + 1] = c[1]), (rgb[q + 2] = c[2]);\n    }\n  };\n  tick(C, [0.85, 0.85, 0.85]);\n  tick(P.pred, gold);\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-renyi-parking","type":"code","name":"renyi-parking","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rényi Parking\n// Family:  data\n// Idea:    Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Rényi's parking problem (Alfréd Rényi, 1958), with its lattice form, Flory's dimers (Paul Flory, 1939)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1\n//\n// Knob 1: Hue. Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too.\n// Knob 2: Speed. How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes.\n// Knob 3: Length. The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it.\n// Knob 4: Lattice. Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street.\n// Buttons: K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.\n\nconst W = 64, H = 128, S = 60, MAXC = 32, GX = 61;\n// Rényi's constant, the share an endless street fills once jammed.\nconst C = 0.7475979202534114;\nconst { min, max, floor, ceil, round, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The street's own clock: t car arrivals have been tried per car length of\n// street by the time it has come down tau rows. It runs slowly at the top\n// and without end at row 127, so every street leaves the panel jammed.\n// With 6-LED cars a street is on average 0.29 full at row 42 (t = 0.45),\n// 0.54 at row 85 (t = 1.8) and 0.70 at row 120, and from there to the\n// bottom the few cars that still fit squeeze in: the slow end of the\n// filling, which on an endless street never stops.\nconst A = 0.9;\nconst clockAt = (tau) => (tau >= H - 1 ? Infinity : (A * tau) / (H - 1 - tau));\n\n// The mean number of cars a jammed street holds. Parked anywhere, a street\n// x car lengths long holds M(x), where M = 0 below 1 and\n// M(x) = 1 + 2/(x - 1) times the integral of M from 0 to x - 1, since the\n// first car splits the street into two streets of random length. That is\n// solved here in steps of 1/2048 of a car: 7.2236 cars at x = 10, the\n// 6-LED cars, a fill of 0.7224. Rényi's C (x + 1) - 1 agrees with it to\n// 1e-5 from x = 6 up and is 0.0045 cars low at x = 4. On a grid of N\n// points with k to a car the same split gives M(n) = 1 + 2/(n - k + 1)\n// times the sum of M(j) for j \u003c= n - k, summed exactly.\nfunction renyi(x) {\n  const h = 1 / 2048, n = round(x / h), one = 2048;\n  if (n \u003c one) return 0;\n  const m = new Float64Array(n + 1), area = new Float64Array(n + 1);\n  for (let i = one; i \u003c= n; i++) {\n    // area[i] is the integral of M from 1 to i h by trapezoids, M being 0\n    // below 1 and jumping to 1 there.\n    m[i] = i === one ? 1 : 1 + (2 / (i * h - 1)) * area[i - one];\n    if (i > one) area[i] = area[i - 1] + (h * (m[i] + m[i - 1])) / 2;\n  }\n  return m[n];\n}\nfunction predict(L, k) {\n  if (!k) return (renyi(S / L) * L) / S;\n  const N = floor((S * k) / L + 1e-9), m = new Float64Array(N + 1);\n  let sum = 0;\n  for (let n = 0; n \u003c= N; n++) {\n    if (n >= k) sum += m[n - k];\n    m[n] = n \u003c k ? 0 : 1 + (2 * sum) / (n - k + 1);\n  }\n  return (m[N] * L) / S;\n}\n\nfunction newStreet() {\n  return { pos: new Float32Array(MAXC), at: new Float32Array(MAXC), n: 0, L: 6, k: 0, F: 0, next: 0, last: 1 };\n}\n\n// Where a car can still stop: for every gap the start points that leave room\n// for it, as a length in LEDs (anywhere) or a count of grid points (on a\n// grid). With pick >= 0 it returns the start point that far into them.\n// rate() turns the total into tries that succeed per unit of the street's\n// clock: one try per car length of street, spread evenly.\nfunction feasible(st, pick) {\n  const { pos, n, L, k } = st;\n  let total = 0, start = 0;\n  if (!k) {\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? pos[i] : S, room = end - start - L;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return start + (pick - total);\n        total += room;\n      }\n      if (i \u003c n) start = pos[i] + L;\n    }\n  } else {\n    const d = L / k, N = floor((S * k) / L + 1e-9);\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? round(pos[i] / d) : N, room = end - start - k + 1;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return (start + floor(pick - total)) * d;\n        total += room;\n      }\n      if (i \u003c n) start = round(pos[i] / d) + k;\n    }\n  }\n  return pick >= 0 ? -1 : total;\n}\n\nconst rate = (st) => (st.k ? st.F / st.k : st.F / st.L);\n\nfunction reset(st, L, k, pred) {\n  st.n = 0;\n  st.L = L;\n  st.k = k;\n  // The share parked when the last car is due to come, so the colours run\n  // from the first car to the last whatever the length.\n  st.last = max(0.05, pred - L / S);\n  st.F = feasible(st, -1);\n  st.next = -log(1 - Math.random()) / rate(st);\n}\n\n// Run a street's clock on to t: a try that lands in a feasible stretch\n// parks a car at a uniform place in it. Tries that land anywhere else are\n// turned away and change nothing, so only the successes are drawn, at the\n// rate of the feasible stretch. Each car keeps the share of the street that\n// was already parked when it came.\nfunction advance(st, t) {\n  while (st.F > 0 && st.next \u003c= t) {\n    const x = feasible(st, Math.random() * st.F);\n    if (x \u003c 0) break;\n    let i = st.n;\n    while (i > 0 && st.pos[i - 1] > x) (st.pos[i] = st.pos[i - 1]), (st.at[i] = st.at[i - 1]), i--;\n    st.pos[i] = x;\n    st.at[i] = (st.n * st.L) / S;\n    st.n++;\n    st.F = feasible(st, -1);\n    if (st.F > 0) st.next += -log(1 - Math.random()) / rate(st);\n  }\n}\n\nexport function setup(params) {\n  const streets = [];\n  for (let i = 0; i \u003c H; i++) streets.push(newStreet());\n  params.s = {\n    streets, head: 0, phase: 0.5, primed: false,\n    hue: 0, speed: 2, L: 6, k: 0, pred: predict(6, 0),\n    // The fills of the last 128 jammed streets of the current length and\n    // grid, as they leave the bottom.\n    outs: new Float32Array(H), outN: 0, outI: 0,\n    pack: -1, rgb: new Float32Array(W * H * 3), pal: new Float32Array(33 * 3), palHue: NaN,\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 6, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const L = round(cl(kv[2], 6, 15)), g = cl(kv[3], 0, 1), k = g \u003c 0.07 ? 0 : max(1, round(1 / g));\n  if (L !== P.L || k !== P.k) {\n    P.L = L;\n    P.k = k;\n    P.pred = predict(L, k);\n    P.outN = P.outI = 0;\n  }\n  // The first frame fills the panel with streets at every stage, each run\n  // on to the clock of its row, so the picture starts whole.\n  if (!P.primed) {\n    for (let r = 0; r \u003c H; r++) {\n      const st = P.streets[(P.head + r) % H];\n      reset(st, L, k, P.pred);\n      advance(st, clockAt(r + P.phase));\n    }\n    P.primed = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.pack \u003c 0) P.pack = 0;\n  if (P.pack >= 0) {\n    // The tap: 0.6 s to pack, 3 s held, 0.6 s back; the streets wait.\n    P.pack += d;\n    if (P.pack >= 4.2) P.pack = -1;\n    return;\n  }\n  P.phase += d * P.speed * 2;\n  while (P.phase >= 1) {\n    P.phase -= 1;\n    // The jammed bottom street leaves and comes back empty at the top.\n    const bottom = P.streets[(P.head + H - 1) % H];\n    if (bottom.L === P.L && bottom.k === P.k) {\n      P.outs[P.outI] = (bottom.n * bottom.L) / S;\n      P.outI = (P.outI + 1) % H;\n      P.outN = min(H, P.outN + 1);\n    }\n    P.head = (P.head + H - 1) % H;\n    reset(bottom, L, k, P.pred);\n  }\n  for (let r = 0; r \u003c H; r++) advance(P.streets[(P.head + r) % H], clockAt(r + P.phase));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.primed) return;\n  const { rgb, pal } = P;\n  if (P.palHue !== P.hue) {\n    // 33 steps from the first car to come to the last: azure through\n    // violet and rose to gold, brighter as it goes, so the latecomers read\n    // first. Between orange and lime a dim car would read brown or olive,\n    // so there the dim end is lifted.\n    for (let i = 0; i \u003c= 32; i++) {\n      const u = i / 32, h = P.hue + 0.58 + 0.55 * u, band = max(0, 1 - abs(h - floor(h) - 0.14) / 0.13);\n      const v = 0.6 + 0.4 * u;\n      hsv(h, 0.75 - 0.1 * u, max(v, v + (0.92 - v) * band), pal, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  const e = P.pack \u003c 0 ? 0 : P.pack \u003c 0.6 ? sm(P.pack / 0.6) : P.pack \u003c 3.6 ? 1 : sm((4.2 - P.pack) / 0.6);\n  for (let r = 0; r \u003c H; r++) {\n    const st = P.streets[(P.head + r) % H], L = st.L;\n    for (let i = 0; i \u003c st.n; i++) {\n      // A car covers the LEDs whose centres fall inside it, less half an\n      // LED at each end: L - 1 LEDs and a dark one, so cars that touch\n      // still read as two.\n      const x = st.pos[i] + (i * L - st.pos[i]) * e, x0 = max(0, ceil(x)), x1 = min(S - 1, ceil(x + L - 1) - 1);\n      const c = min(32, round((st.at[i] / st.last) * 32)) * 3;\n      for (let px = x0; px \u003c= x1; px++) {\n        const q = (r * W + px) * 3;\n        (rgb[q] = pal[c]), (rgb[q + 1] = pal[c + 1]), (rgb[q + 2] = pal[c + 2]);\n      }\n    }\n  }\n  const gold = [];\n  hsv(P.hue + 0.13, 0.7, 1, gold, 0);\n  // Packed, the gold line stands at the predicted fill across the streets.\n  if (e > 0.5) {\n    const gx = min(S - 1, floor(P.pred * S));\n    for (let r = 0; r \u003c H; r++) {\n      const q = (r * W + gx) * 3;\n      (rgb[q] = gold[0]), (rgb[q + 1] = gold[1]), (rgb[q + 2] = gold[2]);\n    }\n  }\n  // The gauge, three LEDs wide, from a fill of 0.65 at the bottom to 1 at\n  // the top: a bar to the mean of the last jammed streets, a white tick at\n  // Rényi's constant for an endless street and a gold one at the\n  // prediction for this one.\n  const rowOf = (f) => cl(round(H - 1 - ((f - 0.65) / 0.35) * (H - 1)), 0, H - 1);\n  if (P.outN) {\n    let s = 0;\n    for (let i = 0; i \u003c P.outN; i++) s += P.outs[i];\n    const top = rowOf(s / P.outN);\n    for (let y = top; y \u003c H; y++)\n      for (let x = GX; x \u003c W; x++) {\n        const q = (y * W + x) * 3;\n        (rgb[q] = 0.36), (rgb[q + 1] = 0.4), (rgb[q + 2] = 0.5);\n      }\n  }\n  const tick = (f, c) => {\n    const y = rowOf(f);\n    for (let x = GX - 1; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = c[0]), (rgb[q + 1] = c[1]), (rgb[q + 2] = c[2]);\n    }\n  };\n  tick(C, [0.85, 0.85, 0.85]);\n  tick(P.pred, gold);\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes."},{"name":"Length","min":6,"max":15,"about":"The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it."},{"name":"Lattice","min":0,"max":1,"about":"Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street."}],"start":[0,2,6,0.06],"measures":{"motion":1.1003,"detail":0.1839,"edges":0.8784,"complexity":0.1342,"coverage":0.3299,"colour":0.3078,"drift":0.0658},"knobResponse":[0.1481,0.1885,0.1964,0.2206]},{"slug":"rice-planting","title":"Rice Planting","family":"farm","round":26,"note":"물 댄 논을 위에서 내려다봐요. 밀짚모자를 쓴 일꾼들이 못줄을 따라 뒷걸음질하며 모를 한 포기씩 꽂고, 앞쪽 거울 물에는 구름과 모춤, 백로가 있어요. K1 은 아침 안개에서 노을까지 돌리고, 누르면 남은 모를 한꺼번에 꽂고 줄을 넘겨요.","idea":"Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.","buttons":"K1 tap and the crew pushes in the rest of the row at once and the rope moves on.","code":"// ===== Patternflow pattern =====\n// Title:   Rice Planting\n// Family:  farm\n// Idea:    Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after monaegi, the hand transplanting of rice along a marked rope (motjul) in Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1\n//\n// Knob 1: Hour. A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange.\n// Knob 2: Speed. At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower.\n// Knob 3: Planters. Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look.\n// Knob 4: Wind. Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean.\n// Buttons: K1 tap and the crew pushes in the rest of the row at once and the rope moves on.\n\nconst W = 64, H = 128, N = W * H, PW = 61, NH = 14, NR = 25;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every p cells, so the sky texture tiles.\nfunction vnp(x, y, p, o) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const g = (a, b) => hash(a % p, (b % p) + o);\n  const a = g(xi, yi), b = g(xi + 1, yi), c = g(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + g(xi + 1, yi + 1)) * su * sv;\n}\n\n// A paddy and its left bund are 61 columns of the world; the hills of a row\n// stand every four columns, and the rows every four LEDs from row 5 to 101.\nconst HX = (j) => 5 + 4 * j;\nconst rowY = (r, dn) => (dn > 0 ? 5 + 4 * r : 101 - 4 * r);\n// The light by the hour: sky overhead, sky toward the sun, sunlit cloud,\n// cloud underside, light on the people and the fields, and mist.\nconst HOURS = [\n  [0, 46, 92, 168, 116, 150, 204, 250, 242, 236, 150, 162, 192, 0.88, 0.92, 0.98, 0.32],\n  [0.25, 36, 92, 186, 110, 160, 218, 254, 250, 244, 156, 172, 204, 0.96, 0.98, 1, 0.12],\n  [0.5, 18, 66, 176, 64, 126, 210, 255, 255, 255, 168, 180, 206, 1.05, 1.05, 1, 0],\n  [0.75, 44, 92, 176, 176, 164, 150, 255, 224, 170, 160, 140, 156, 1, 0.9, 0.74, 0],\n  [1, 36, 34, 98, 170, 86, 96, 255, 150, 70, 112, 64, 100, 0.82, 0.56, 0.46, 0.12],\n];\nfunction key(u) {\n  let i = 0;\n  while (i \u003c HOURS.length - 2 && u > HOURS[i + 1][0]) i++;\n  const a = HOURS[i], b = HOURS[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\nconst HAT = [234, 190, 102], SKIN = [226, 176, 136], PANTS = [[60, 62, 120], [126, 62, 110], [70, 84, 72]];\nconst SHIRTS = [[236, 236, 228], [104, 144, 224], [238, 136, 164], [150, 208, 96], [184, 152, 228], [214, 78, 70], [112, 204, 204], [70, 96, 176]];\nconst SEED = [134, 222, 72], LEAF = [70, 166, 56], ROOT = [168, 136, 100], TIE = [230, 200, 112], NUR = [96, 196, 66];\nconst ROPE = [200, 170, 116], MARK = [[240, 52, 40], [252, 216, 60]], GRASS = [62, 116, 40], EARTH = [134, 106, 74], MUD = [120, 92, 58];\nconst WHITE = [248, 248, 242], BILL = [244, 196, 40];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, f: F32(N * 3), rip: F32(N), tb: F32(H), ht: F32(16384), bm: new Uint8Array(W), cd: F32(16384), cs: F32(16384), nz: F32(16384), k: 0, dn: 1, r: 0, fl: new Uint8Array(NH),\n    mv: -1.5, sl: -1.5, cam: 0.5, n: 0, h: 0.5, w: 0.5, ox: rnd() * 128, oy: rnd() * 128, rp: [], bu: [], init: false,\n  });\n  // The sky: clouds with steep edges, the size of a few drift blocks, and a\n  // slower field that says where the wind roughens the water and where mist lies.\n  for (let i = 0; i \u003c 16384; i++) {\n    const x = i & 127, y = i >> 7, q = (f, o) => vnp((x * f) / 128, (y * f) / 128, f, o);\n    const v = 0.55 * q(6, 0) + 0.3 * q(14, 50) + 0.15 * q(32, 90);\n    P.cd[i] = sm(0.5, 0.6, v);\n    P.cs[i] = cl((v - 0.5) * 4, 0, 1);\n    P.nz[i] = 0.6 * q(5, 130) + 0.4 * q(12, 170);\n    P.ht[i] = hash(x, y);\n  }\n  P.crew = SHIRTS.map((s, i) => ({ sh: (i * 3 + floor(rnd() * 8)) % 8, pa: floor(rnd() * 3), sp: 0.85 + rnd() * 0.3, list: [], q: 0, ph: 0.5, home: 32.5, wig: rnd() * 7 }));\n  P.eg = { x: 10 + rnd() * 44, y: 84 + rnd() * 14, a: rnd() * 6.28, m: 0, t: 1 + rnd(), st: -1.5, sx: 0.5, sy: 0.5, tx: 0.5, ty: 0.5, sk: -1.5 };\n  P.ca = { x: 14 + rnd() * 36, tx: 32.5, w: 0.6 + rnd(), tt: -0.5 };\n  P.pu = { x: 18 + rnd() * 30, x1: 0, old: [] };\n  P.pu.x1 = P.pu.x + 10 + rnd() * 12;\n}\n\n// Each planter takes a run of the fourteen hills; on alternate rows they work it the other way.\nfunction assign(P) {\n  const n = P.n;\n  P.crew.forEach((c, i) => {\n    const a = floor((i * NH) / n), b = floor(((i + 1) * NH) / n);\n    c.list = [];\n    if (i \u003c n) for (let j = a; j \u003c b; j++) if (!P.fl[j]) c.list.push(j);\n    if (P.r & 1) c.list.reverse();\n    c.q = 0;\n    c.ph = 0;\n    if (i \u003c n) c.home = (HX(a) + HX(b - 1)) / 2;\n  });\n}\nconst fresh = (P) => (P.fl.fill(0), assign(P));\nconst ropeY = (P) => (P.mv >= 0 ? mix(rowY(P.r, P.dn), rowY(P.r + 1, P.dn), sm(0, 1, P.mv)) : rowY(P.r, P.dn));\nconst ring = (P, x, y, s, life = 0.9) => P.rp.length \u003c 48 && P.rp.push({ x: x + 1e-6, y: y + 1e-6, s, a: 1e-6, life });\nfunction plant(P, j) {\n  P.fl[j] = 1;\n  ring(P, P.k * PW + HX(j), rowY(P.r, P.dn), 0.9);\n}\n// Bundles of seedlings lie about the open water, waiting for the line; ft\n// is how far through its flight a thrown one is, below 0 once it floats.\nconst bun = (x, y, ft, tx, ty) => ({ x, y, fx: x, fy: y, tx, ty, a: floor(rnd() * 8), ft });\nfunction scatter(P, k, lo, hi) {\n  for (let i = 0; i \u003c 12; i++) P.bu.push(bun(k * PW + 8 + rnd() * 46, lo + rnd() * (hi - lo), -1.5, 0.5, 0.5));\n}\n// Where open water lies ahead of the line in this paddy, as rows lo..hi.\nfunction open(P, gap) {\n  const ry = ropeY(P);\n  return P.dn > 0 ? [ry + gap, 99] : [7, ry - gap];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 4, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(kv[1], 0.2, 3)) / 2, n = round(cl(kv[2], 4, 8));\n  P.h = cl(kv[0], 0, 1);\n  P.w = cl(kv[3], 0, 1);\n  if (!P.init) {\n    // They have been at it since dawn: the more hands, the further along.\n    P.n = n;\n    P.r = 8 + round((n - 4) * 1.5) + floor(rnd() * 2);\n    assign(P);\n    scatter(P, 0, rowY(P.r, 1) + 10, 99);\n    P.init = true;\n  }\n  if (n !== P.n) (P.n = n), assign(P);\n  P.t += d;\n  P.ox += (3.4 + 5 * P.w) * d;\n  P.oy += (1.4 + 2 * P.w) * d;\n  const btn = input.btnPressed && input.btnPressed[0];\n  if (P.sl \u003c 0) {\n    if (btn && P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) plant(P, j);\n    if (P.mv \u003c 0) {\n      for (let i = 0; i \u003c P.n; i++) {\n        const c = P.crew[i];\n        if (c.q >= c.list.length) continue;\n        const j = c.list[c.q], p0 = c.ph;\n        if (P.fl[j] && p0 \u003c 0.6) {\n          c.q++;\n          continue;\n        }\n        c.ph += (d * c.sp) / 0.36;\n        if (p0 \u003c 0.6 && c.ph >= 0.6) plant(P, j);\n        if (c.ph >= 1) (c.ph = 0), c.q++;\n      }\n      if (P.fl.every((v) => v)) {\n        if (P.r >= NR - 1) {\n          // The last row is in: the crew crosses the bund to the next paddy,\n          // where the carrier has already thrown the bundles.\n          P.sl = 0;\n          scatter(P, P.k + 1, 10, 96);\n          P.eg.m === 0 && fly(P, P.k + 1);\n        } else P.mv = 0;\n      }\n    } else if ((P.mv += d / 0.5) >= 1) {\n      (P.mv = -1), P.r++, fresh(P);\n      for (let i = 0; i \u003c P.n; i++) ring(P, P.k * PW + P.crew[i].home, rowY(P.r, P.dn) + P.dn * 10, 0.5);\n    }\n  } else if ((P.sl += d / 3.5) >= 1) (P.sl = -1), P.k++, (P.dn = -P.dn), (P.r = 0), fresh(P);\n  P.cam = P.k * PW + (P.sl >= 0 ? PW * sm(0, 1, P.sl) : 0);\n  const ry = ropeY(P), dn = P.dn;\n  // The line picks up the bundles it reaches.\n  P.bu = P.bu.filter((b) => {\n    const k = floor(b.x / PW);\n    return b.ft >= 0 || k > P.k || (k === P.k && (P.sl >= 0 || (b.y - ry) * dn > 5));\n  });\n  for (const b of P.bu)\n    if (b.ft >= 0 && (b.ft += d / 0.75) >= 1) (b.ft = -1.5), (b.x = b.tx), (b.y = b.ty), ring(P, b.x, b.y, 1.2, 1.2);\n  // The carrier on the levee throws a bundle ahead of the line now and then.\n  const C = P.ca;\n  if (C.tt > 0) C.tt -= d;\n  else if (abs(C.tx - C.x) > 0.6) C.x += Math.sign(C.tx - C.x) * 7 * d;\n  else if ((C.w -= d) \u003c 0) {\n    const [lo, hi] = open(P, 10);\n    if (P.sl \u003c 0 && hi - lo > 6 && P.bu.length \u003c 16) {\n      const ty = max(lo, hi - 46) + rnd() * (hi - max(lo, hi - 46));\n      P.bu.push(bun(C.x, 104.5, 1e-6, P.k * PW + 8 + rnd() * 46, ty));\n      C.tt = 0.5;\n    }\n    C.w = 1.6 + rnd() * 2.4;\n    C.tx = P.cam + 6 + rnd() * 52;\n  }\n  // The seedling puller works left along the nursery bed.\n  const U = P.pu;\n  U.x -= 0.5 * d;\n  if (U.x \u003c P.cam - 8) U.old.push([U.x + 2, U.x1]) > 3 && U.old.shift(), (U.x1 = (U.x = P.cam + 70) + 2);\n  egret(P, d, ry);\n  for (const q of P.rp) q.a += d;\n  P.rp = P.rp.filter((q) => q.a \u003c q.life);\n}\n\n// The egret flies to open water in paddy k, away from the line.\nfunction fly(P, k) {\n  const E = P.eg, [lo, hi] = k === P.k ? open(P, 26) : [12, 92];\n  if (hi - lo \u003c 8) return fly(P, k + 1);\n  Object.assign(E, { m: 1, t: 0, sx: E.x, sy: E.y, tx: k * PW + 8 + rnd() * 46, ty: lo + rnd() * (hi - lo) });\n  E.a = Math.atan2(E.ty - E.sy, E.tx - E.sx);\n}\nfunction egret(P, d, ry) {\n  const E = P.eg;\n  if (E.m === 1) {\n    if ((E.t += d / 2.4) >= 1) (E.m = 0), (E.x = E.tx), (E.y = E.ty), (E.t = 1.5), ring(P, E.x, E.y, 0.8);\n    return;\n  }\n  if (E.sk >= 0 && (E.sk += d / 0.35) >= 1) E.sk = -1;\n  // Too near the line, or left behind in a planted paddy: off it goes.\n  if (P.sl \u003c 0 && (floor(E.x / PW) \u003c P.k || (floor(E.x / PW) === P.k && (E.y - ry) * P.dn \u003c 15))) return fly(P, P.k);\n  if (E.st >= 0) {\n    E.st += d / 0.45;\n    const q = sm(0, 1, E.st);\n    E.x = mix(E.sx, E.tx, q);\n    E.y = mix(E.sy, E.ty, q);\n    if (E.st >= 1) (E.st = -1), ring(P, E.x - 1.5 * cos(E.a), E.y - 1.5 * sin(E.a), 0.45, 0.7);\n  } else if ((E.t -= d) \u003c 0) {\n    // A slow step, now and then a strike at something in the mud.\n    if (rnd() \u003c 0.25) (E.sk = 0), ring(P, E.x + 5 * cos(E.a), E.y + 5 * sin(E.a), 0.7);\n    else {\n      const lx = E.x - P.k * PW;\n      E.a += (rnd() - 0.5) * 1.4;\n      if (lx \u003c 10) E.a = 0.2 * (rnd() - 0.5);\n      if (lx > 52) E.a = PI + 0.2 * (rnd() - 0.5);\n      if (E.y > 96 || E.y \u003c 10) E.a = (E.y > 50 ? -PI : PI) / 2 + (rnd() - 0.5);\n      Object.assign(E, { st: 0, sx: E.x, sy: E.y, tx: E.x + 1.6 * cos(E.a), ty: E.y + 1.6 * sin(E.a) });\n    }\n    E.t = 0.6 + rnd() * 1.8;\n  }\n}\n\nlet F, L;\nfunction put(x, y, c, k = 1, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j] * k * L[j], a);\n}\n// Points given along a heading (u forward, v to the side), turned to angle a.\nfunction spr(x, y, a, pts) {\n  const c = cos(a), s = sin(a);\n  for (const [u, v, col, k] of pts) {\n    const px = round(x + u * c - v * s), py = round(y + u * s + v * c), o = (py * W + px) * 3;\n    if (col) put(px, py, col, k);\n    else if (px >= 0 && px \u003c W && py >= 0 && py \u003c H) (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n  }\n}\nfunction disc(x, y, r, col, sh) {\n  x = round(x);\n  y = round(y);\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const e = sqrt(dx * dx + dy * dy);\n      if (e > r + 0.35) continue;\n      put(x + dx, y + dy, col, (1.14 - 0.32 * (e / r) ** 2) * (e > r - 0.55 ? 0.82 : 1) - (sh * 0.1 * (dx + dy)) / r);\n    }\n}\nfunction line(ax, ay, bx, by, c, k) {\n  const n = max(1, round(max(abs(bx - ax), abs(by - ay))));\n  for (let i = 0; i \u003c= n; i++) put(mix(ax, bx, i / n), mix(ay, by, i / n), c, k);\n}\nconst BUNDLE = [[-2, 0, ROOT, 0.9], [-1, 0, TIE, 1], [0, 0, SEED, 0.95], [1, 0, LEAF, 1], [2, 0, LEAF, 0.8], [1, -1, LEAF, 0.75], [1, 1, LEAF, 0.75]];\n\n// One planter bent over, seen from above: the hat, the back and hips\n// behind it, the arms reaching out past the brim to the water, a bundle in\n// one hand and the other pushing a hill in at the rope.\nconst BACK = [3.4, 3.4, 3, 2.6, 2.1];\nfunction planter(P, c, x, y, dn, ry, x0, hr, walk) {\n  const sh = SHIRTS[c.sh], pa = PANTS[c.pa], st = walk ? round(sin(P.t * 9 + c.wig)) : 0;\n  let side = c.home \u003c 32 ? 1 : -1, e = 0, tx = x + side * 3, ty = y - dn * 3.6;\n  if (!walk && c.q \u003c c.list.length) {\n    const hx = x0 + HX(c.list[c.q]);\n    side = hx >= x ? 1 : -1;\n    e = c.ph \u003c 0.6 ? sm(0, 0.5, c.ph) : 1 - sm(0.65, 1, c.ph);\n    tx = mix(x + side * 3, hx, e);\n    ty = mix(y - dn * 3.6, ry + dn * 0.6, e);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    put(x + s, y + dn * (8 + (s * st > 0 ? 1 : 0)), pa, 0.7);\n    for (let dx = -1; dx \u003c= 1; dx++) put(x + dx, y + dn * 7, pa, 0.9 - 0.1 * abs(dx));\n  }\n  BACK.forEach((hw, j) => {\n    for (let dx = -3; dx \u003c= 3; dx++) if (abs(dx) \u003c= hw) put(x + dx, y + dn * (2 + j), sh, (0.98 - 0.07 * j) * (abs(dx) > hw - 1 ? 0.85 : 1));\n  });\n  line(x + side * 2.8, y + dn * 1.5, tx, ty, sh, 0.9);\n  put(tx, ty, SKIN);\n  const bx = x - side * 3.2, by = y - dn * 3;\n  line(x - side * 2.8, y + dn * 1.5, bx, by, sh, 0.9);\n  put(bx, by, SKIN);\n  put(bx, by - dn, SEED);\n  put(bx + side, by - dn * 1.6, LEAF, 0.9);\n  put(bx - side, by - dn, LEAF, 0.8);\n  disc(x + (tx - x) * 0.15, y - dn * e * 0.8, hr, HAT, 1);\n}\n\n// Ripple rings from every push, step and splash, summed per LED.\nfunction ripples(P, cam) {\n  const RIP = P.rip;\n  RIP.fill(0);\n  for (const q of P.rp) {\n    const R = 0.6 + q.a * 6.5, a = q.s * (1 - q.a / q.life), qx = q.x - cam;\n    for (let y = max(0, floor(q.y - R - 1)); y \u003c= min(H - 1, q.y + R + 1); y++)\n      for (let x = max(0, floor(qx - R - 1)); x \u003c= min(W - 1, qx + R + 1); x++) {\n        const e = abs(sqrt((x - qx) ** 2 + (y - q.y) ** 2) - R);\n        if (e \u003c 0.8) RIP[y * W + x] += a * (1 - e / 0.8);\n      }\n  }\n}\n\n// The bunds, the levee, the nursery, and the water mirroring the sky.\nfunction ground(P, K, cam, ry) {\n  const f = F, k = P.k, dn = P.dn, t = P.t, w = P.w, h = P.h, RIP = P.rip, CD = P.cd, CS = P.cs, NZ = P.nz, HT = P.ht, TB = P.tb;\n  const ox = floor(P.ox), oy = floor(P.oy), wo = floor(t * (3 + 6 * w)), ws = 0.75 - 0.6 * w, wa1 = min(1, w * 4);\n  // The sun's glint, near noon, sliding across the paddy with the hour.\n  const gu = cl((h - 0.22) / 0.56, 0, 1), gs = sm(0.22, 0.38, h) * (1 - sm(0.62, 0.8, h)), gx = 6 + 52 * gu, gy = 70 - 30 * sin(PI * gu);\n  // The nursery bed is bare where the seedlings have been pulled.\n  const BM = P.bm;\n  BM.fill(0);\n  for (const [a, b] of [...P.pu.old, [P.pu.x + 2, P.pu.x1]]) for (let x = max(0, ceil(a - cam)); x \u003c= min(W - 1, b - cam); x++) BM[x] = 1;\n  // How muddy the water is on each row of this paddy: churned round the\n  // crew's feet and behind them, settling further back.\n  for (let y = 0; y \u003c H; y++) {\n    const ds = (ry - y) * dn;\n    TB[y] = P.sl >= 0 ? 0.22 : sm(-14, -9, ds) * (0.16 + 0.3 * exp(-max(0, ds) / 14));\n  }\n  const [z0, z1, z2, s0, s1, s2, l0, l1, l2, h0, h1, h2, , , , mist] = K.slice(1), L0 = L[0], L1 = L[1], L2 = L[2], M0 = MUD[0] * L0, M1 = MUD[1] * L1, M2 = MUD[2] * L2;\n  const m0 = mix(s0, 250, 0.6), m1 = mix(s1, 250, 0.6), m2 = mix(s2, 250, 0.6), my = floor(t * 1.5), mx = floor(t * 2.5) + 40;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, wx = x + cam, kk = floor(wx / PW), lx = wx - kk * PW, o = i * 3, hv = HT[(wx & 127) | (y \u003c\u003c 7)];\n    const wet = y >= 3 && y \u003c= 103 && lx >= 3 ? 1 : y === 110 || y === 116 || y === 122 ? 0.7 : 0;\n    if (!wet) {\n      let c = GRASS, v = 0.8 + 0.4 * hv;\n      if (y >= 110) {\n        const bare = y >= 117 && y \u003c= 121 && BM[x];\n        (c = bare ? MUD : NUR), (v = bare ? 0.55 + 0.3 * hv : (y === 111 || y === 115 || y === 117 || y === 121 || y === 123 ? 0.62 : 0.72) + 0.45 * hv);\n      } else if (y >= 104) (c = y >= 106 && y \u003c= 108 ? EARTH : GRASS), (v = y === 104 ? 0.6 + 0.3 * hv : v);\n      else if (y \u003c 3 ? y === 1 : lx === 1) (c = EARTH), (v = 0.75 + 0.35 * hv);\n      else if (y === 2 || (y > 2 && lx === 2)) v *= 0.7;\n      f[o] = c[0] * v * L0;\n      f[o + 1] = c[1] * v * L1;\n      f[o + 2] = c[2] * v * L2;\n      continue;\n    }\n    const ci = ((y + oy) & 127) * 128 + ((x + ox) & 127), cd = CD[ci], cs = CS[ci], g = (0.28 * x) / 63 + 0.52 * (1 - y / 127);\n    let br = 0.9;\n    if (wa1 > 0) {\n      const nz = NZ[(((y >> 1) + wo) & 127) | ((((x >> 1) + (wo >> 1)) & 127) \u003c\u003c 7)];\n      // A cat's paw darkens the mirror and breaks it into glitter.\n      if (nz > ws) {\n        const wa = sm(ws, ws + 0.16, nz) * wa1;\n        br *= 1 - 0.3 * wa;\n        if (HT[((x * 5 + wo * 3) & 127) | (((y + wo) & 127) \u003c\u003c 7)] > 0.87) br += 0.45 * wa;\n      }\n    }\n    const tb = kk \u003c k ? 0.22 : kk === k && wet === 1 ? TB[y] : 0, rp = RIP[i];\n    let gl = 0;\n    if (gs > 0 && abs(x - gx) \u003c 16) {\n      gl = gs * exp(-((x - gx) ** 2 + ((y - gy) * 0.8) ** 2) / 40) * (1 - tb);\n      if (w > 0.1) gl *= mix(1, HT[((x * 7 + wo) & 127) | (y \u003c\u003c 7)] > 0.75 ? 2.6 : 0.25, w);\n    }\n    const r0 = z0 + (s0 - z0) * g, r1 = z1 + (s1 - z1) * g, r2 = z2 + (s2 - z2) * g;\n    const q0 = (r0 + (h0 + (l0 - h0) * cs - r0) * cd) * br, q1 = (r1 + (h1 + (l1 - h1) * cs - r1) * cd) * br, q2 = (r2 + (h2 + (l2 - h2) * cs - r2) * cd) * br;\n    // Morning mist lies over the water in drifting banks.\n    let ms = mist > 0.01 ? (NZ[((((y >> 1) + my) & 127) \u003c\u003c 7) | ((x + mx) & 127)] - 0.5) * 2.4 : 0;\n    ms = ms > 0 ? mist * min(ms, 0.7) : 0;\n    const m = 0.7 + 0.4 * hv, wk = wet \u003c 1 ? 0.8 : 1, c0 = (q0 + (M0 * m - q0) * tb + rp * (60 + 0.35 * q0) + 255 * L0 * gl) * wk;\n    const c1 = (q1 + (M1 * m - q1) * tb + rp * (60 + 0.35 * q1) + 255 * L1 * gl) * wk, c2 = (q2 + (M2 * m - q2) * tb + rp * (60 + 0.35 * q2) + 255 * L2 * gl) * wk;\n    f[o] = c0 + (m0 - c0) * ms;\n    f[o + 1] = c1 + (m1 - c1) * ms;\n    f[o + 2] = c2 + (m2 - c2) * ms;\n  }\n}\n\n// The rope with its markers, one per hill still to plant, and every hill\n// planted so far, leaning and swaying with the wind.\nfunction field(P, cam, ry) {\n  const k = P.k, dn = P.dn, t = P.t, w = P.w, x0 = k * PW - cam;\n  if (P.sl \u003c 0) {\n    const yr = round(ry);\n    for (let x = 1; x \u003c= 62; x++) put(x0 + x, yr, ROPE, 0.85);\n    if (P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) put(x0 + HX(j), yr, MARK[j % 3 === 2 ? 1 : 0]);\n  }\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW) && kk \u003c= k; kk++) {\n    const xk = kk * PW - cam;\n    for (let gi = 0; gi \u003c NR; gi++) {\n      const y = 5 + 4 * gi, ord = kk \u003c k ? -1 : dn > 0 ? gi : NR - 1 - gi;\n      if (kk === k && ord > P.r) continue;\n      for (let j = 0; j \u003c NH; j++) {\n        if (kk === k && ord === P.r && !P.fl[j]) continue;\n        const x = xk + HX(j), v = 0.85 + 0.3 * hash(kk * 31 + j, gi), sw = sin(t * 2.6 + x * 0.3 + y * 0.15) * (0.25 + 0.9 * w) + 0.9 * w, ln = round(cl(sw, -1, 1));\n        put(x, y, SEED, v);\n        put(x + ln, y - 1, LEAF, v);\n        put(x + (v > 1 ? 1 : -1), y, LEAF, 0.75 * v);\n      }\n    }\n  }\n}\n\n// The egret: wading with its neck folded (out in a strike), or on the wing.\nfunction egretDraw(P, cam) {\n  const E = P.eg, pts = [];\n  if (E.m === 0) {\n    const nk = E.sk >= 0 ? 1.8 + 2.4 * sin(PI * E.sk) : 1.8;\n    for (let u = -3.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -1.5; v \u003c= 1.5; v += 0.5) if ((u + 1) ** 2 / 6.5 + (v * v) / 2.1 \u003c= 1) pts.push([u, v, WHITE, 0.9 + 0.06 * v]);\n    for (let u = 2; u \u003c= nk + 0.5; u += 0.5) pts.push([u, 0.5 * sin(u * 1.6), WHITE, 1]);\n    pts.push([nk + 1, 0, WHITE, 1], [nk + 2, 0, BILL, 1], [nk + 2.8, 0, BILL, 0.8]);\n    spr(E.x - cam + 1, E.y + 1, E.a, pts.map(([u, v]) => [u, v, 0, 0.7]));\n    spr(E.x - cam, E.y, E.a, pts);\n    return;\n  }\n  const q = sm(0, 1, E.t), ex = mix(E.sx, E.tx, q) - cam, ey = mix(E.sy, E.ty, q) - 8 * sin(PI * E.t), sp = 3 + 3 * abs(sin(P.t * 8));\n  for (let u = -2; u \u003c= 1; u += 0.5) pts.push([u, 0, WHITE, 1], [u, 0.6, WHITE, 0.9], [u, -0.6, WHITE, 0.9]);\n  for (let v = 1; v \u003c= sp; v += 0.5) for (let s = -1; s \u003c= 1; s += 2) pts.push([-0.4 * (v / sp) ** 2, s * v, WHITE, v > sp - 1 ? 0.75 : 1], [0.6 - 0.6 * (v / sp), s * v, WHITE, 0.85]);\n  pts.push([2, 0, WHITE, 1], [3, 0, WHITE, 1], [4, 0, BILL, 1]);\n  spr(ex, ey, E.a, pts);\n}\n\n// The crew and the rope holders on the bunds, all in straw hats.\nfunction crew(P, cam, ry) {\n  const dn = P.dn, x0 = P.k * PW - cam, hr = P.n > 6 ? 2.6 : 3;\n  if (P.sl \u003c 0) {\n    for (let i = 0; i \u003c P.n; i++) {\n      const c = P.crew[i], lag = P.mv >= 0 ? sm(0.15, 1, P.mv) : 1, cy = mix(rowY(P.r, dn), ry, lag) + dn * 4;\n      planter(P, c, x0 + c.home, cy, dn, ry, x0, hr, false);\n    }\n    for (let hx = 1; hx \u003c 63; hx += 61) {\n      put(x0 + hx + (hx \u003c 9 ? -2 : 2), ry + dn * 2, SHIRTS[hx & 7], 0.8);\n      disc(x0 + hx, ry + dn * 0.5, 2, HAT, 1);\n    }\n    return;\n  }\n  const q = sm(0, 1, P.sl), y0 = rowY(NR - 1, dn) + dn * 4, y1 = rowY(0, -dn) - dn * 4, fd = q \u003c 0.5 ? dn : -dn;\n  for (let i = 0; i \u003c P.n; i++) planter(P, P.crew[i], P.crew[i].home, mix(y0, y1, q), fd, 0, 0, hr, true);\n  for (let hx = 1; hx \u003c 63; hx += 61) disc(hx, mix(y0, y1, q) - fd * 4, 2, HAT, 1);\n}\n\n// The carrier on the levee with bundles on his A-frame, the puller in the\n// nursery with the bundles he has tied laid in the channel, and every bundle\n// afloat or in the air.\nfunction helpers(P, cam) {\n  const C = P.ca, cx = C.x - cam, U = P.pu, ux = U.x - cam, pull = sin(P.t * 7);\n  for (const b of P.bu) if (b.ft \u003c 0) spr(b.x - cam, b.y, (b.a * PI) / 4, BUNDLE);\n  // Trays of seedlings from the nursery wait on the levee path.\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW); kk++)\n    for (let tx = 9; tx \u003c 60; tx += 36)\n      for (let dx = 0; dx \u003c 8; dx++)\n        for (let dy = 0; dy \u003c 3; dy++) put(kk * PW + tx + dx - cam, 106 + dy, dx % 7 ? NUR : ROOT, dx % 7 ? 0.75 + 0.4 * hash(dx + tx, dy + kk * 5) : 0.6);\n  for (let dx = -2; dx \u003c= 2; dx++) for (let dy = 2; dy \u003c= 4; dy++) put(cx + dx, 106 + dy, (dx + dy) & 1 ? SEED : LEAF, dy === 2 ? 0.75 : 0.95);\n  put(cx - 2, 109, TIE), put(cx + 2, 109, TIE);\n  if (C.tt > 0) line(cx + 1, 105, cx + 2, 101 + 2 * C.tt, SKIN, 0.9);\n  disc(cx, 106, 2, HAT, 1);\n  for (let bx = U.x + 6; bx \u003c U.x1 - 1; bx += 5) spr(bx - cam, 116, PI / 2, BUNDLE);\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = 2; dx \u003c= 4; dx++) put(ux + dx, 119 + dy, SHIRTS[5], 0.85);\n  line(ux - 1, 118, ux - 2.5 - pull, 118, SKIN, 0.9);\n  line(ux - 1, 120, ux - 2.5 + pull, 120, SKIN, 0.9);\n  disc(ux, 119, 2, HAT, 1);\n}\nfunction thrown(P, cam) {\n  for (const b of P.bu) if (b.ft >= 0) spr(mix(b.fx, b.tx, b.ft) - cam, mix(b.fy, b.ty, b.ft) - 7 * sin(PI * b.ft), b.ft * 9, BUNDLE);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const K = key(P.h), cam = floor(P.cam), ry = ropeY(P), f = (F = P.f);\n  L = [K[13], K[14], K[15]];\n  ripples(P, cam);\n  ground(P, K, cam, ry);\n  field(P, cam, ry);\n  if (P.eg.m === 0) egretDraw(P, cam);\n  crew(P, cam, ry);\n  helpers(P, cam);\n  thrown(P, cam);\n  if (P.eg.m === 1) egretDraw(P, cam);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","layer":{"id":"layer-rice-planting","type":"code","name":"rice-planting","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rice Planting\n// Family:  farm\n// Idea:    Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after monaegi, the hand transplanting of rice along a marked rope (motjul) in Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1\n//\n// Knob 1: Hour. A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange.\n// Knob 2: Speed. At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower.\n// Knob 3: Planters. Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look.\n// Knob 4: Wind. Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean.\n// Buttons: K1 tap and the crew pushes in the rest of the row at once and the rope moves on.\n\nconst W = 64, H = 128, N = W * H, PW = 61, NH = 14, NR = 25;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every p cells, so the sky texture tiles.\nfunction vnp(x, y, p, o) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const g = (a, b) => hash(a % p, (b % p) + o);\n  const a = g(xi, yi), b = g(xi + 1, yi), c = g(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + g(xi + 1, yi + 1)) * su * sv;\n}\n\n// A paddy and its left bund are 61 columns of the world; the hills of a row\n// stand every four columns, and the rows every four LEDs from row 5 to 101.\nconst HX = (j) => 5 + 4 * j;\nconst rowY = (r, dn) => (dn > 0 ? 5 + 4 * r : 101 - 4 * r);\n// The light by the hour: sky overhead, sky toward the sun, sunlit cloud,\n// cloud underside, light on the people and the fields, and mist.\nconst HOURS = [\n  [0, 46, 92, 168, 116, 150, 204, 250, 242, 236, 150, 162, 192, 0.88, 0.92, 0.98, 0.32],\n  [0.25, 36, 92, 186, 110, 160, 218, 254, 250, 244, 156, 172, 204, 0.96, 0.98, 1, 0.12],\n  [0.5, 18, 66, 176, 64, 126, 210, 255, 255, 255, 168, 180, 206, 1.05, 1.05, 1, 0],\n  [0.75, 44, 92, 176, 176, 164, 150, 255, 224, 170, 160, 140, 156, 1, 0.9, 0.74, 0],\n  [1, 36, 34, 98, 170, 86, 96, 255, 150, 70, 112, 64, 100, 0.82, 0.56, 0.46, 0.12],\n];\nfunction key(u) {\n  let i = 0;\n  while (i \u003c HOURS.length - 2 && u > HOURS[i + 1][0]) i++;\n  const a = HOURS[i], b = HOURS[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\nconst HAT = [234, 190, 102], SKIN = [226, 176, 136], PANTS = [[60, 62, 120], [126, 62, 110], [70, 84, 72]];\nconst SHIRTS = [[236, 236, 228], [104, 144, 224], [238, 136, 164], [150, 208, 96], [184, 152, 228], [214, 78, 70], [112, 204, 204], [70, 96, 176]];\nconst SEED = [134, 222, 72], LEAF = [70, 166, 56], ROOT = [168, 136, 100], TIE = [230, 200, 112], NUR = [96, 196, 66];\nconst ROPE = [200, 170, 116], MARK = [[240, 52, 40], [252, 216, 60]], GRASS = [62, 116, 40], EARTH = [134, 106, 74], MUD = [120, 92, 58];\nconst WHITE = [248, 248, 242], BILL = [244, 196, 40];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, f: F32(N * 3), rip: F32(N), tb: F32(H), ht: F32(16384), bm: new Uint8Array(W), cd: F32(16384), cs: F32(16384), nz: F32(16384), k: 0, dn: 1, r: 0, fl: new Uint8Array(NH),\n    mv: -1.5, sl: -1.5, cam: 0.5, n: 0, h: 0.5, w: 0.5, ox: rnd() * 128, oy: rnd() * 128, rp: [], bu: [], init: false,\n  });\n  // The sky: clouds with steep edges, the size of a few drift blocks, and a\n  // slower field that says where the wind roughens the water and where mist lies.\n  for (let i = 0; i \u003c 16384; i++) {\n    const x = i & 127, y = i >> 7, q = (f, o) => vnp((x * f) / 128, (y * f) / 128, f, o);\n    const v = 0.55 * q(6, 0) + 0.3 * q(14, 50) + 0.15 * q(32, 90);\n    P.cd[i] = sm(0.5, 0.6, v);\n    P.cs[i] = cl((v - 0.5) * 4, 0, 1);\n    P.nz[i] = 0.6 * q(5, 130) + 0.4 * q(12, 170);\n    P.ht[i] = hash(x, y);\n  }\n  P.crew = SHIRTS.map((s, i) => ({ sh: (i * 3 + floor(rnd() * 8)) % 8, pa: floor(rnd() * 3), sp: 0.85 + rnd() * 0.3, list: [], q: 0, ph: 0.5, home: 32.5, wig: rnd() * 7 }));\n  P.eg = { x: 10 + rnd() * 44, y: 84 + rnd() * 14, a: rnd() * 6.28, m: 0, t: 1 + rnd(), st: -1.5, sx: 0.5, sy: 0.5, tx: 0.5, ty: 0.5, sk: -1.5 };\n  P.ca = { x: 14 + rnd() * 36, tx: 32.5, w: 0.6 + rnd(), tt: -0.5 };\n  P.pu = { x: 18 + rnd() * 30, x1: 0, old: [] };\n  P.pu.x1 = P.pu.x + 10 + rnd() * 12;\n}\n\n// Each planter takes a run of the fourteen hills; on alternate rows they work it the other way.\nfunction assign(P) {\n  const n = P.n;\n  P.crew.forEach((c, i) => {\n    const a = floor((i * NH) / n), b = floor(((i + 1) * NH) / n);\n    c.list = [];\n    if (i \u003c n) for (let j = a; j \u003c b; j++) if (!P.fl[j]) c.list.push(j);\n    if (P.r & 1) c.list.reverse();\n    c.q = 0;\n    c.ph = 0;\n    if (i \u003c n) c.home = (HX(a) + HX(b - 1)) / 2;\n  });\n}\nconst fresh = (P) => (P.fl.fill(0), assign(P));\nconst ropeY = (P) => (P.mv >= 0 ? mix(rowY(P.r, P.dn), rowY(P.r + 1, P.dn), sm(0, 1, P.mv)) : rowY(P.r, P.dn));\nconst ring = (P, x, y, s, life = 0.9) => P.rp.length \u003c 48 && P.rp.push({ x: x + 1e-6, y: y + 1e-6, s, a: 1e-6, life });\nfunction plant(P, j) {\n  P.fl[j] = 1;\n  ring(P, P.k * PW + HX(j), rowY(P.r, P.dn), 0.9);\n}\n// Bundles of seedlings lie about the open water, waiting for the line; ft\n// is how far through its flight a thrown one is, below 0 once it floats.\nconst bun = (x, y, ft, tx, ty) => ({ x, y, fx: x, fy: y, tx, ty, a: floor(rnd() * 8), ft });\nfunction scatter(P, k, lo, hi) {\n  for (let i = 0; i \u003c 12; i++) P.bu.push(bun(k * PW + 8 + rnd() * 46, lo + rnd() * (hi - lo), -1.5, 0.5, 0.5));\n}\n// Where open water lies ahead of the line in this paddy, as rows lo..hi.\nfunction open(P, gap) {\n  const ry = ropeY(P);\n  return P.dn > 0 ? [ry + gap, 99] : [7, ry - gap];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 4, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(kv[1], 0.2, 3)) / 2, n = round(cl(kv[2], 4, 8));\n  P.h = cl(kv[0], 0, 1);\n  P.w = cl(kv[3], 0, 1);\n  if (!P.init) {\n    // They have been at it since dawn: the more hands, the further along.\n    P.n = n;\n    P.r = 8 + round((n - 4) * 1.5) + floor(rnd() * 2);\n    assign(P);\n    scatter(P, 0, rowY(P.r, 1) + 10, 99);\n    P.init = true;\n  }\n  if (n !== P.n) (P.n = n), assign(P);\n  P.t += d;\n  P.ox += (3.4 + 5 * P.w) * d;\n  P.oy += (1.4 + 2 * P.w) * d;\n  const btn = input.btnPressed && input.btnPressed[0];\n  if (P.sl \u003c 0) {\n    if (btn && P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) plant(P, j);\n    if (P.mv \u003c 0) {\n      for (let i = 0; i \u003c P.n; i++) {\n        const c = P.crew[i];\n        if (c.q >= c.list.length) continue;\n        const j = c.list[c.q], p0 = c.ph;\n        if (P.fl[j] && p0 \u003c 0.6) {\n          c.q++;\n          continue;\n        }\n        c.ph += (d * c.sp) / 0.36;\n        if (p0 \u003c 0.6 && c.ph >= 0.6) plant(P, j);\n        if (c.ph >= 1) (c.ph = 0), c.q++;\n      }\n      if (P.fl.every((v) => v)) {\n        if (P.r >= NR - 1) {\n          // The last row is in: the crew crosses the bund to the next paddy,\n          // where the carrier has already thrown the bundles.\n          P.sl = 0;\n          scatter(P, P.k + 1, 10, 96);\n          P.eg.m === 0 && fly(P, P.k + 1);\n        } else P.mv = 0;\n      }\n    } else if ((P.mv += d / 0.5) >= 1) {\n      (P.mv = -1), P.r++, fresh(P);\n      for (let i = 0; i \u003c P.n; i++) ring(P, P.k * PW + P.crew[i].home, rowY(P.r, P.dn) + P.dn * 10, 0.5);\n    }\n  } else if ((P.sl += d / 3.5) >= 1) (P.sl = -1), P.k++, (P.dn = -P.dn), (P.r = 0), fresh(P);\n  P.cam = P.k * PW + (P.sl >= 0 ? PW * sm(0, 1, P.sl) : 0);\n  const ry = ropeY(P), dn = P.dn;\n  // The line picks up the bundles it reaches.\n  P.bu = P.bu.filter((b) => {\n    const k = floor(b.x / PW);\n    return b.ft >= 0 || k > P.k || (k === P.k && (P.sl >= 0 || (b.y - ry) * dn > 5));\n  });\n  for (const b of P.bu)\n    if (b.ft >= 0 && (b.ft += d / 0.75) >= 1) (b.ft = -1.5), (b.x = b.tx), (b.y = b.ty), ring(P, b.x, b.y, 1.2, 1.2);\n  // The carrier on the levee throws a bundle ahead of the line now and then.\n  const C = P.ca;\n  if (C.tt > 0) C.tt -= d;\n  else if (abs(C.tx - C.x) > 0.6) C.x += Math.sign(C.tx - C.x) * 7 * d;\n  else if ((C.w -= d) \u003c 0) {\n    const [lo, hi] = open(P, 10);\n    if (P.sl \u003c 0 && hi - lo > 6 && P.bu.length \u003c 16) {\n      const ty = max(lo, hi - 46) + rnd() * (hi - max(lo, hi - 46));\n      P.bu.push(bun(C.x, 104.5, 1e-6, P.k * PW + 8 + rnd() * 46, ty));\n      C.tt = 0.5;\n    }\n    C.w = 1.6 + rnd() * 2.4;\n    C.tx = P.cam + 6 + rnd() * 52;\n  }\n  // The seedling puller works left along the nursery bed.\n  const U = P.pu;\n  U.x -= 0.5 * d;\n  if (U.x \u003c P.cam - 8) U.old.push([U.x + 2, U.x1]) > 3 && U.old.shift(), (U.x1 = (U.x = P.cam + 70) + 2);\n  egret(P, d, ry);\n  for (const q of P.rp) q.a += d;\n  P.rp = P.rp.filter((q) => q.a \u003c q.life);\n}\n\n// The egret flies to open water in paddy k, away from the line.\nfunction fly(P, k) {\n  const E = P.eg, [lo, hi] = k === P.k ? open(P, 26) : [12, 92];\n  if (hi - lo \u003c 8) return fly(P, k + 1);\n  Object.assign(E, { m: 1, t: 0, sx: E.x, sy: E.y, tx: k * PW + 8 + rnd() * 46, ty: lo + rnd() * (hi - lo) });\n  E.a = Math.atan2(E.ty - E.sy, E.tx - E.sx);\n}\nfunction egret(P, d, ry) {\n  const E = P.eg;\n  if (E.m === 1) {\n    if ((E.t += d / 2.4) >= 1) (E.m = 0), (E.x = E.tx), (E.y = E.ty), (E.t = 1.5), ring(P, E.x, E.y, 0.8);\n    return;\n  }\n  if (E.sk >= 0 && (E.sk += d / 0.35) >= 1) E.sk = -1;\n  // Too near the line, or left behind in a planted paddy: off it goes.\n  if (P.sl \u003c 0 && (floor(E.x / PW) \u003c P.k || (floor(E.x / PW) === P.k && (E.y - ry) * P.dn \u003c 15))) return fly(P, P.k);\n  if (E.st >= 0) {\n    E.st += d / 0.45;\n    const q = sm(0, 1, E.st);\n    E.x = mix(E.sx, E.tx, q);\n    E.y = mix(E.sy, E.ty, q);\n    if (E.st >= 1) (E.st = -1), ring(P, E.x - 1.5 * cos(E.a), E.y - 1.5 * sin(E.a), 0.45, 0.7);\n  } else if ((E.t -= d) \u003c 0) {\n    // A slow step, now and then a strike at something in the mud.\n    if (rnd() \u003c 0.25) (E.sk = 0), ring(P, E.x + 5 * cos(E.a), E.y + 5 * sin(E.a), 0.7);\n    else {\n      const lx = E.x - P.k * PW;\n      E.a += (rnd() - 0.5) * 1.4;\n      if (lx \u003c 10) E.a = 0.2 * (rnd() - 0.5);\n      if (lx > 52) E.a = PI + 0.2 * (rnd() - 0.5);\n      if (E.y > 96 || E.y \u003c 10) E.a = (E.y > 50 ? -PI : PI) / 2 + (rnd() - 0.5);\n      Object.assign(E, { st: 0, sx: E.x, sy: E.y, tx: E.x + 1.6 * cos(E.a), ty: E.y + 1.6 * sin(E.a) });\n    }\n    E.t = 0.6 + rnd() * 1.8;\n  }\n}\n\nlet F, L;\nfunction put(x, y, c, k = 1, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j] * k * L[j], a);\n}\n// Points given along a heading (u forward, v to the side), turned to angle a.\nfunction spr(x, y, a, pts) {\n  const c = cos(a), s = sin(a);\n  for (const [u, v, col, k] of pts) {\n    const px = round(x + u * c - v * s), py = round(y + u * s + v * c), o = (py * W + px) * 3;\n    if (col) put(px, py, col, k);\n    else if (px >= 0 && px \u003c W && py >= 0 && py \u003c H) (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n  }\n}\nfunction disc(x, y, r, col, sh) {\n  x = round(x);\n  y = round(y);\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const e = sqrt(dx * dx + dy * dy);\n      if (e > r + 0.35) continue;\n      put(x + dx, y + dy, col, (1.14 - 0.32 * (e / r) ** 2) * (e > r - 0.55 ? 0.82 : 1) - (sh * 0.1 * (dx + dy)) / r);\n    }\n}\nfunction line(ax, ay, bx, by, c, k) {\n  const n = max(1, round(max(abs(bx - ax), abs(by - ay))));\n  for (let i = 0; i \u003c= n; i++) put(mix(ax, bx, i / n), mix(ay, by, i / n), c, k);\n}\nconst BUNDLE = [[-2, 0, ROOT, 0.9], [-1, 0, TIE, 1], [0, 0, SEED, 0.95], [1, 0, LEAF, 1], [2, 0, LEAF, 0.8], [1, -1, LEAF, 0.75], [1, 1, LEAF, 0.75]];\n\n// One planter bent over, seen from above: the hat, the back and hips\n// behind it, the arms reaching out past the brim to the water, a bundle in\n// one hand and the other pushing a hill in at the rope.\nconst BACK = [3.4, 3.4, 3, 2.6, 2.1];\nfunction planter(P, c, x, y, dn, ry, x0, hr, walk) {\n  const sh = SHIRTS[c.sh], pa = PANTS[c.pa], st = walk ? round(sin(P.t * 9 + c.wig)) : 0;\n  let side = c.home \u003c 32 ? 1 : -1, e = 0, tx = x + side * 3, ty = y - dn * 3.6;\n  if (!walk && c.q \u003c c.list.length) {\n    const hx = x0 + HX(c.list[c.q]);\n    side = hx >= x ? 1 : -1;\n    e = c.ph \u003c 0.6 ? sm(0, 0.5, c.ph) : 1 - sm(0.65, 1, c.ph);\n    tx = mix(x + side * 3, hx, e);\n    ty = mix(y - dn * 3.6, ry + dn * 0.6, e);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    put(x + s, y + dn * (8 + (s * st > 0 ? 1 : 0)), pa, 0.7);\n    for (let dx = -1; dx \u003c= 1; dx++) put(x + dx, y + dn * 7, pa, 0.9 - 0.1 * abs(dx));\n  }\n  BACK.forEach((hw, j) => {\n    for (let dx = -3; dx \u003c= 3; dx++) if (abs(dx) \u003c= hw) put(x + dx, y + dn * (2 + j), sh, (0.98 - 0.07 * j) * (abs(dx) > hw - 1 ? 0.85 : 1));\n  });\n  line(x + side * 2.8, y + dn * 1.5, tx, ty, sh, 0.9);\n  put(tx, ty, SKIN);\n  const bx = x - side * 3.2, by = y - dn * 3;\n  line(x - side * 2.8, y + dn * 1.5, bx, by, sh, 0.9);\n  put(bx, by, SKIN);\n  put(bx, by - dn, SEED);\n  put(bx + side, by - dn * 1.6, LEAF, 0.9);\n  put(bx - side, by - dn, LEAF, 0.8);\n  disc(x + (tx - x) * 0.15, y - dn * e * 0.8, hr, HAT, 1);\n}\n\n// Ripple rings from every push, step and splash, summed per LED.\nfunction ripples(P, cam) {\n  const RIP = P.rip;\n  RIP.fill(0);\n  for (const q of P.rp) {\n    const R = 0.6 + q.a * 6.5, a = q.s * (1 - q.a / q.life), qx = q.x - cam;\n    for (let y = max(0, floor(q.y - R - 1)); y \u003c= min(H - 1, q.y + R + 1); y++)\n      for (let x = max(0, floor(qx - R - 1)); x \u003c= min(W - 1, qx + R + 1); x++) {\n        const e = abs(sqrt((x - qx) ** 2 + (y - q.y) ** 2) - R);\n        if (e \u003c 0.8) RIP[y * W + x] += a * (1 - e / 0.8);\n      }\n  }\n}\n\n// The bunds, the levee, the nursery, and the water mirroring the sky.\nfunction ground(P, K, cam, ry) {\n  const f = F, k = P.k, dn = P.dn, t = P.t, w = P.w, h = P.h, RIP = P.rip, CD = P.cd, CS = P.cs, NZ = P.nz, HT = P.ht, TB = P.tb;\n  const ox = floor(P.ox), oy = floor(P.oy), wo = floor(t * (3 + 6 * w)), ws = 0.75 - 0.6 * w, wa1 = min(1, w * 4);\n  // The sun's glint, near noon, sliding across the paddy with the hour.\n  const gu = cl((h - 0.22) / 0.56, 0, 1), gs = sm(0.22, 0.38, h) * (1 - sm(0.62, 0.8, h)), gx = 6 + 52 * gu, gy = 70 - 30 * sin(PI * gu);\n  // The nursery bed is bare where the seedlings have been pulled.\n  const BM = P.bm;\n  BM.fill(0);\n  for (const [a, b] of [...P.pu.old, [P.pu.x + 2, P.pu.x1]]) for (let x = max(0, ceil(a - cam)); x \u003c= min(W - 1, b - cam); x++) BM[x] = 1;\n  // How muddy the water is on each row of this paddy: churned round the\n  // crew's feet and behind them, settling further back.\n  for (let y = 0; y \u003c H; y++) {\n    const ds = (ry - y) * dn;\n    TB[y] = P.sl >= 0 ? 0.22 : sm(-14, -9, ds) * (0.16 + 0.3 * exp(-max(0, ds) / 14));\n  }\n  const [z0, z1, z2, s0, s1, s2, l0, l1, l2, h0, h1, h2, , , , mist] = K.slice(1), L0 = L[0], L1 = L[1], L2 = L[2], M0 = MUD[0] * L0, M1 = MUD[1] * L1, M2 = MUD[2] * L2;\n  const m0 = mix(s0, 250, 0.6), m1 = mix(s1, 250, 0.6), m2 = mix(s2, 250, 0.6), my = floor(t * 1.5), mx = floor(t * 2.5) + 40;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, wx = x + cam, kk = floor(wx / PW), lx = wx - kk * PW, o = i * 3, hv = HT[(wx & 127) | (y \u003c\u003c 7)];\n    const wet = y >= 3 && y \u003c= 103 && lx >= 3 ? 1 : y === 110 || y === 116 || y === 122 ? 0.7 : 0;\n    if (!wet) {\n      let c = GRASS, v = 0.8 + 0.4 * hv;\n      if (y >= 110) {\n        const bare = y >= 117 && y \u003c= 121 && BM[x];\n        (c = bare ? MUD : NUR), (v = bare ? 0.55 + 0.3 * hv : (y === 111 || y === 115 || y === 117 || y === 121 || y === 123 ? 0.62 : 0.72) + 0.45 * hv);\n      } else if (y >= 104) (c = y >= 106 && y \u003c= 108 ? EARTH : GRASS), (v = y === 104 ? 0.6 + 0.3 * hv : v);\n      else if (y \u003c 3 ? y === 1 : lx === 1) (c = EARTH), (v = 0.75 + 0.35 * hv);\n      else if (y === 2 || (y > 2 && lx === 2)) v *= 0.7;\n      f[o] = c[0] * v * L0;\n      f[o + 1] = c[1] * v * L1;\n      f[o + 2] = c[2] * v * L2;\n      continue;\n    }\n    const ci = ((y + oy) & 127) * 128 + ((x + ox) & 127), cd = CD[ci], cs = CS[ci], g = (0.28 * x) / 63 + 0.52 * (1 - y / 127);\n    let br = 0.9;\n    if (wa1 > 0) {\n      const nz = NZ[(((y >> 1) + wo) & 127) | ((((x >> 1) + (wo >> 1)) & 127) \u003c\u003c 7)];\n      // A cat's paw darkens the mirror and breaks it into glitter.\n      if (nz > ws) {\n        const wa = sm(ws, ws + 0.16, nz) * wa1;\n        br *= 1 - 0.3 * wa;\n        if (HT[((x * 5 + wo * 3) & 127) | (((y + wo) & 127) \u003c\u003c 7)] > 0.87) br += 0.45 * wa;\n      }\n    }\n    const tb = kk \u003c k ? 0.22 : kk === k && wet === 1 ? TB[y] : 0, rp = RIP[i];\n    let gl = 0;\n    if (gs > 0 && abs(x - gx) \u003c 16) {\n      gl = gs * exp(-((x - gx) ** 2 + ((y - gy) * 0.8) ** 2) / 40) * (1 - tb);\n      if (w > 0.1) gl *= mix(1, HT[((x * 7 + wo) & 127) | (y \u003c\u003c 7)] > 0.75 ? 2.6 : 0.25, w);\n    }\n    const r0 = z0 + (s0 - z0) * g, r1 = z1 + (s1 - z1) * g, r2 = z2 + (s2 - z2) * g;\n    const q0 = (r0 + (h0 + (l0 - h0) * cs - r0) * cd) * br, q1 = (r1 + (h1 + (l1 - h1) * cs - r1) * cd) * br, q2 = (r2 + (h2 + (l2 - h2) * cs - r2) * cd) * br;\n    // Morning mist lies over the water in drifting banks.\n    let ms = mist > 0.01 ? (NZ[((((y >> 1) + my) & 127) \u003c\u003c 7) | ((x + mx) & 127)] - 0.5) * 2.4 : 0;\n    ms = ms > 0 ? mist * min(ms, 0.7) : 0;\n    const m = 0.7 + 0.4 * hv, wk = wet \u003c 1 ? 0.8 : 1, c0 = (q0 + (M0 * m - q0) * tb + rp * (60 + 0.35 * q0) + 255 * L0 * gl) * wk;\n    const c1 = (q1 + (M1 * m - q1) * tb + rp * (60 + 0.35 * q1) + 255 * L1 * gl) * wk, c2 = (q2 + (M2 * m - q2) * tb + rp * (60 + 0.35 * q2) + 255 * L2 * gl) * wk;\n    f[o] = c0 + (m0 - c0) * ms;\n    f[o + 1] = c1 + (m1 - c1) * ms;\n    f[o + 2] = c2 + (m2 - c2) * ms;\n  }\n}\n\n// The rope with its markers, one per hill still to plant, and every hill\n// planted so far, leaning and swaying with the wind.\nfunction field(P, cam, ry) {\n  const k = P.k, dn = P.dn, t = P.t, w = P.w, x0 = k * PW - cam;\n  if (P.sl \u003c 0) {\n    const yr = round(ry);\n    for (let x = 1; x \u003c= 62; x++) put(x0 + x, yr, ROPE, 0.85);\n    if (P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) put(x0 + HX(j), yr, MARK[j % 3 === 2 ? 1 : 0]);\n  }\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW) && kk \u003c= k; kk++) {\n    const xk = kk * PW - cam;\n    for (let gi = 0; gi \u003c NR; gi++) {\n      const y = 5 + 4 * gi, ord = kk \u003c k ? -1 : dn > 0 ? gi : NR - 1 - gi;\n      if (kk === k && ord > P.r) continue;\n      for (let j = 0; j \u003c NH; j++) {\n        if (kk === k && ord === P.r && !P.fl[j]) continue;\n        const x = xk + HX(j), v = 0.85 + 0.3 * hash(kk * 31 + j, gi), sw = sin(t * 2.6 + x * 0.3 + y * 0.15) * (0.25 + 0.9 * w) + 0.9 * w, ln = round(cl(sw, -1, 1));\n        put(x, y, SEED, v);\n        put(x + ln, y - 1, LEAF, v);\n        put(x + (v > 1 ? 1 : -1), y, LEAF, 0.75 * v);\n      }\n    }\n  }\n}\n\n// The egret: wading with its neck folded (out in a strike), or on the wing.\nfunction egretDraw(P, cam) {\n  const E = P.eg, pts = [];\n  if (E.m === 0) {\n    const nk = E.sk >= 0 ? 1.8 + 2.4 * sin(PI * E.sk) : 1.8;\n    for (let u = -3.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -1.5; v \u003c= 1.5; v += 0.5) if ((u + 1) ** 2 / 6.5 + (v * v) / 2.1 \u003c= 1) pts.push([u, v, WHITE, 0.9 + 0.06 * v]);\n    for (let u = 2; u \u003c= nk + 0.5; u += 0.5) pts.push([u, 0.5 * sin(u * 1.6), WHITE, 1]);\n    pts.push([nk + 1, 0, WHITE, 1], [nk + 2, 0, BILL, 1], [nk + 2.8, 0, BILL, 0.8]);\n    spr(E.x - cam + 1, E.y + 1, E.a, pts.map(([u, v]) => [u, v, 0, 0.7]));\n    spr(E.x - cam, E.y, E.a, pts);\n    return;\n  }\n  const q = sm(0, 1, E.t), ex = mix(E.sx, E.tx, q) - cam, ey = mix(E.sy, E.ty, q) - 8 * sin(PI * E.t), sp = 3 + 3 * abs(sin(P.t * 8));\n  for (let u = -2; u \u003c= 1; u += 0.5) pts.push([u, 0, WHITE, 1], [u, 0.6, WHITE, 0.9], [u, -0.6, WHITE, 0.9]);\n  for (let v = 1; v \u003c= sp; v += 0.5) for (let s = -1; s \u003c= 1; s += 2) pts.push([-0.4 * (v / sp) ** 2, s * v, WHITE, v > sp - 1 ? 0.75 : 1], [0.6 - 0.6 * (v / sp), s * v, WHITE, 0.85]);\n  pts.push([2, 0, WHITE, 1], [3, 0, WHITE, 1], [4, 0, BILL, 1]);\n  spr(ex, ey, E.a, pts);\n}\n\n// The crew and the rope holders on the bunds, all in straw hats.\nfunction crew(P, cam, ry) {\n  const dn = P.dn, x0 = P.k * PW - cam, hr = P.n > 6 ? 2.6 : 3;\n  if (P.sl \u003c 0) {\n    for (let i = 0; i \u003c P.n; i++) {\n      const c = P.crew[i], lag = P.mv >= 0 ? sm(0.15, 1, P.mv) : 1, cy = mix(rowY(P.r, dn), ry, lag) + dn * 4;\n      planter(P, c, x0 + c.home, cy, dn, ry, x0, hr, false);\n    }\n    for (let hx = 1; hx \u003c 63; hx += 61) {\n      put(x0 + hx + (hx \u003c 9 ? -2 : 2), ry + dn * 2, SHIRTS[hx & 7], 0.8);\n      disc(x0 + hx, ry + dn * 0.5, 2, HAT, 1);\n    }\n    return;\n  }\n  const q = sm(0, 1, P.sl), y0 = rowY(NR - 1, dn) + dn * 4, y1 = rowY(0, -dn) - dn * 4, fd = q \u003c 0.5 ? dn : -dn;\n  for (let i = 0; i \u003c P.n; i++) planter(P, P.crew[i], P.crew[i].home, mix(y0, y1, q), fd, 0, 0, hr, true);\n  for (let hx = 1; hx \u003c 63; hx += 61) disc(hx, mix(y0, y1, q) - fd * 4, 2, HAT, 1);\n}\n\n// The carrier on the levee with bundles on his A-frame, the puller in the\n// nursery with the bundles he has tied laid in the channel, and every bundle\n// afloat or in the air.\nfunction helpers(P, cam) {\n  const C = P.ca, cx = C.x - cam, U = P.pu, ux = U.x - cam, pull = sin(P.t * 7);\n  for (const b of P.bu) if (b.ft \u003c 0) spr(b.x - cam, b.y, (b.a * PI) / 4, BUNDLE);\n  // Trays of seedlings from the nursery wait on the levee path.\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW); kk++)\n    for (let tx = 9; tx \u003c 60; tx += 36)\n      for (let dx = 0; dx \u003c 8; dx++)\n        for (let dy = 0; dy \u003c 3; dy++) put(kk * PW + tx + dx - cam, 106 + dy, dx % 7 ? NUR : ROOT, dx % 7 ? 0.75 + 0.4 * hash(dx + tx, dy + kk * 5) : 0.6);\n  for (let dx = -2; dx \u003c= 2; dx++) for (let dy = 2; dy \u003c= 4; dy++) put(cx + dx, 106 + dy, (dx + dy) & 1 ? SEED : LEAF, dy === 2 ? 0.75 : 0.95);\n  put(cx - 2, 109, TIE), put(cx + 2, 109, TIE);\n  if (C.tt > 0) line(cx + 1, 105, cx + 2, 101 + 2 * C.tt, SKIN, 0.9);\n  disc(cx, 106, 2, HAT, 1);\n  for (let bx = U.x + 6; bx \u003c U.x1 - 1; bx += 5) spr(bx - cam, 116, PI / 2, BUNDLE);\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = 2; dx \u003c= 4; dx++) put(ux + dx, 119 + dy, SHIRTS[5], 0.85);\n  line(ux - 1, 118, ux - 2.5 - pull, 118, SKIN, 0.9);\n  line(ux - 1, 120, ux - 2.5 + pull, 120, SKIN, 0.9);\n  disc(ux, 119, 2, HAT, 1);\n}\nfunction thrown(P, cam) {\n  for (const b of P.bu) if (b.ft >= 0) spr(mix(b.fx, b.tx, b.ft) - cam, mix(b.fy, b.ty, b.ft) - 7 * sin(PI * b.ft), b.ft * 9, BUNDLE);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const K = key(P.h), cam = floor(P.cam), ry = ropeY(P), f = (F = P.f);\n  L = [K[13], K[14], K[15]];\n  ripples(P, cam);\n  ground(P, K, cam, ry);\n  field(P, cam, ry);\n  if (P.eg.m === 0) egretDraw(P, cam);\n  crew(P, cam, ry);\n  helpers(P, cam);\n  thrown(P, cam);\n  if (P.eg.m === 1) egretDraw(P, cam);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower."},{"name":"Planters","min":4,"max":8,"about":"Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look."},{"name":"Wind","min":0,"max":1,"about":"Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean."}],"start":[0,2,4,0.06],"measures":{"motion":0.0782,"detail":0.0601,"edges":0.318,"complexity":2.2267,"coverage":1,"colour":0.2886,"drift":0.0509},"knobResponse":[0.2048,0.0848,0.0585,0.1025]},{"slug":"rice-terraces","title":"Rice Terraces","family":"farm","round":25,"note":"세운 패널 아래 끝에서 숲이 선 능선까지 물 댄 다랑논이 등고선처럼 휘어 쌓이고, 논마다 해 뜨는 하늘을 비춰요. 위로 갈수록 층이 얇아지고 노을빛이 짙어지며, 구름 반사가 거울 논들을 가로질러 흘러가고 가까운 논에서는 농부가 물소를 몰아 논을 갈아요. K1 을 돌리면 모가 줄지어 서고 초록으로 덮였다가 누렇게 익고, K1 을 누르면 맨 위 물꼬가 열려 물이 둑을 하나씩 넘어 내려가요.","idea":"Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.","buttons":"K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.","code":"// ===== Patternflow pattern =====\n// Title:   Rice Terraces\n// Family:  farm\n// Idea:    Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Hani rice terraces of Yuanyang and the terraces of Banaue\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1\n//\n// Knob 1: Season. At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble.\n// Knob 2: Speed. At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower.\n// Knob 3: Terraces. How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water.\n// Knob 4: Hour. Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door.\n// Buttons: K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Terrace 0 sits just under the panel, the last one at the ridge. The sky's\n// horizon row, and the classes a LED can belong to.\nconst [YB, YT, YH] = [134, 38, 34];\nconst [SKY, FAR, NEAR, WOOD, WATER, WALL, RIM] = [0, 1, 2, 3, 4, 5, 6];\n// The row of the sky (0 the zenith, 31 the horizon) that the water on each\n// panel row holds: low sky in the far paddies, the sky overhead in the near ones.\nconst RR = F32(H).map((v, y) => 26 - 20 * cl((y - 36) / 92, 0, 1) ** 0.9);\nconst FOAM = [220, 236, 250], LAG = 0.22, AT = [0.82, 0.88, 1], MUD = [7, 5.6, 4.4], STUB = [150, 120, 70];\n\n// Light by the hour: sky at the zenith, sky at the horizon, sunlit cloud,\n// then ambient and direct light and how much mist lies in the valley.\nconst HOURS = [\n  [0, 14, 22, 70, 150, 100, 150, 255, 150, 140, 0.3, 0.12, 1],\n  [0.07, 34, 64, 150, 255, 176, 110, 255, 200, 150, 0.5, 0.55, 0.95],\n  [0.25, 40, 100, 200, 190, 215, 235, 255, 245, 225, 0.7, 0.6, 0.4],\n  [0.5, 36, 96, 206, 170, 205, 240, 255, 255, 250, 0.74, 0.66, 0.15],\n  [0.72, 40, 80, 180, 250, 200, 130, 255, 215, 150, 0.64, 0.56, 0.2],\n  [0.86, 40, 36, 100, 255, 120, 70, 255, 140, 90, 0.42, 0.36, 0.4],\n  [1, 6, 8, 28, 40, 36, 70, 60, 60, 90, 0.16, 0, 0.6],\n];\n// The season: earth wall, bund rim, rice. Flooded, planted, green, ripening, cut.\nconst SEASONS = [\n  [0, 66, 48, 36, 206, 184, 150, 120, 200, 70],\n  [0.35, 60, 74, 40, 150, 196, 96, 110, 204, 60],\n  [0.65, 42, 84, 34, 110, 176, 64, 46, 156, 40],\n  [0.85, 80, 84, 40, 186, 176, 84, 184, 184, 50],\n  [1, 96, 76, 44, 224, 184, 96, 244, 178, 40],\n];\nfunction key(T, u) {\n  let i = 0;\n  while (i \u003c T.length - 2 && u > T[i + 1][0]) i++;\n  const a = T[i], b = T[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ox: 0, mt: 0, n: 0, surge: 99, sk: F32(32 * 3), cl: F32(128 * 32), f: F32(N * 3),\n    cls: new Uint8Array(N), kk: new Int8Array(N), e: F32(N), dep: F32(N), tx: F32(N), walk: [[10 + rnd() * 44, 1], [10 + rnd() * 44, -1]],\n  });\n  P.ox = rnd() * 128;\n  // Egrets: where each stands (column, how far up the steps), and how long it waits.\n  P.birds = [0, 1, 2].map(() => ({ x: 6 + rnd() * 52, kf: 0.05 + rnd() * 0.6, w: 1 + rnd() * 8, p: -1 }));\n  // Cloud noise, 128 columns that wrap and 32 rows from the zenith down.\n  for (let i = 0; i \u003c 128 * 32; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.06, y * 0.22) + 0.3 * vn(X * 0.15, y * 0.5 + 9) + 0.15 * vn(X * 0.4, y + 3);\n    P.cl[i] = mix(f(x), f(x - 128), x / 128);\n  }\n  for (let i = 0; i \u003c N; i++) P.tx[i] = vn((i & 63) * 0.5, (i >> 6) * 0.6);\n}\n\n// The terraces for n steps. A level u climbs the panel in steps that shrink\n// with distance, bent by slow noise into spurs and gullies; each whole value\n// of u is a bund. For each LED: which terrace, and whether it is water, the\n// earth wall under a bund, or the bund's lit rim.\nfunction build(P, n) {\n  const q = 0.28 ** (1 / n), L = -log(q), b0 = ((YB - YT) * L) / (1 - q ** n);\n  const V = (y) => ((y = 1 - ((YB - y) * L) / b0), y > 1e-4 ? log(y) / -L : 99);\n  const { cls, kk, e, dep } = P, u = F32(H + 20), yc = F32(n + 6);\n  const put = (x, y, k, i = y * W + x) => y >= 0 && y \u003c H && cls[i] >= WATER && ((cls[i] = RIM), (kk[i] = k));\n  P.lip = F32((n + 2) * W);\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    // A spur comes down left of centre and a gully cuts in on the right.\n    const sp = 1.3 * exp(-(((x - 24) / 13) ** 2)) - 1 * exp(-(((x - 55) / 9) ** 2));\n    for (let y = H + 19, m = -9; y >= 0; y--) {\n      const v0 = V(y), xs = (x - 32) / (q ** v0) ** 0.4 + 40;\n      const v = v0 + sp + 1.2 * (vn(xs * 0.035, v0 * 0.07) * 2 - 1 + 0.4 * (vn(xs * 0.085 + 7, v0 * 0.15 + 5) * 2 - 1));\n      u[y] = m = max(m, v);\n    }\n    // Where each bund crosses this column, to a fraction of a LED.\n    yc.fill(H + 40);\n    for (let y = H + 18; y >= 0; y--) for (let k = max(-3, floor(u[y + 1]) + 1); k \u003c= min(n, u[y]); k++) yc[k + 3] = y + (u[y] - k) / max(1e-3, u[y] - u[y + 1]);\n    for (let k = 0; k \u003c= n; k++) P.lip[k * W + x] = yc[k + 3];\n    let y = H - 1;\n    for (; y >= 0 && u[y] \u003c n; y--) {\n      const k = max(-3, floor(u[y])), lip = yc[k + 4], bp = yc[k + 3] \u003c H + 40 ? yc[k + 3] - lip : b0, d = y - lip, rh = cl(0.22 * bp - 0.6, 0, 3.5), i = y * W + x;\n      if (d \u003c 1) (cls[i] = RIM), (kk[i] = k + 1);\n      else if (d \u003c 1 + rh) (cls[i] = WALL), (kk[i] = k + 1), (e[i] = (d - 1) / rh);\n      else (cls[i] = WATER), (kk[i] = k), (e[i] = d - 1 - rh), (dep[i] = bp - 1 - rh);\n    }\n    P.ridge[x] = y;\n    const top = y - 5 - 3 * vn(x * 0.35, 4) - abs(sin(x * 0.9)) * 1.5;\n    for (; y >= 0; y--) {\n      const i = y * W + x;\n      cls[i] = y > top ? WOOD : y >= 22 + 4 * sin(0.06 * x + 0.5) + 2.5 * sin(0.17 * x + 2) ? NEAR : y >= 15 + 5 * sin(0.045 * x + 2.4) + 2 * sin(0.13 * x + 1) ? FAR : SKY;\n    }\n  }\n  // Close the rim where a bund steps a row or more from one column to the next.\n  for (let k = 1; k \u003c= n; k++)\n    for (let x = 0; x \u003c W - 1; x++) {\n      let a = ceil(P.lip[k * W + x]), b = ceil(P.lip[k * W + x + 1]), xa = x, xb = x + 1;\n      if (a > b) [a, b, xa, xb] = [b, a, xb, xa];\n      const m = floor((a + b) / 2);\n      for (let y = a + 1; y \u003c b; y++) put(y \u003c= m ? xa : xb, y, k);\n      if (b > a) put(xb, m, k);\n    }\n  // How bright each rim is: faint where the steps are thin and far, and\n  // brighter where the bund turns to face the light.\n  const lp = (k, x) => P.lip[k * W + cl(x, 0, W - 1)];\n  for (let i = 0; i \u003c N; i++)\n    if (cls[i] === RIM) {\n      const k = kk[i], x = i & 63;\n      e[i] = k > 0 ? cl((lp(k - 1, x) - lp(k, x) - 2) / 7, 0.2, 1) : 1;\n      dep[i] = k >= 0 ? lp(k, x + 1) - lp(k, x - 1) : 0;\n    }\n  for (P.kw = 1; P.lip[P.kw * W + 32] > 117; P.kw++);\n  P.n = n;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2);\n  const n = round(cl(k[2], 12, 24));\n  if (n !== P.n) build(P, n);\n  P.s = cl(k[0], 0, 1);\n  P.h = cl(k[3], 0, 1);\n  P.t += d;\n  P.ox += 5 * d;\n  P.mt += d;\n  P.surge += d;\n  if (input.btnPressed && input.btnPressed[0]) P.surge = 0;\n  // The ploughing team and the farmer up on the high bund walk to the end and turn.\n  for (const w of P.walk) {\n    w[0] += w[1] * 2.2 * d;\n    if (w[0] > 56 || w[0] \u003c 6) w[1] = -w[1];\n  }\n  // An egret waits, then flies to another paddy in a low arc.\n  for (const b of P.birds)\n    if (b.p >= 0) {\n      if ((b.p += d / 1.8) >= 1) Object.assign(b, { p: -1, x: b.tx, kf: b.tk, w: 4 + rnd() * 9 });\n    } else if ((b.w -= d) \u003c= 0) Object.assign(b, { p: 0, tx: 6 + rnd() * 52, tk: 0.05 + rnd() * 0.6, y0: egY(P, b.x, b.kf) });\n}\n\n// Where an egret stands: a little behind the bund of its terrace.\nconst egY = (P, x, kf) => P.lip[max(1, round(kf * P.n)) * W + round(cl(x, 0, 63))] - 2;\nfunction egrets(P, L, wet) {\n  const c = lit([250, 248, 240], L);\n  for (const b of P.birds) {\n    if (b.p \u003c 0) {\n      const x = b.x, y = egY(P, x, b.kf);\n      put(x, y, c), put(x, y - 1, c), put(x + 1, y - 2, c), put(x, y + 1, c, 0.35 * wet), put(x, y + 2, c, 0.25 * wet);\n    } else {\n      const y1 = egY(P, b.tx, b.tk), x = mix(b.x, b.tx, b.p), y = mix(b.y0, y1, b.p) - 14 * sin(PI * b.p), up = floor(P.t * 7) & 1;\n      put(x, y, c), put(x - 1, y - up, c), put(x + 1, y - up, c), put(x - 2, y - 2 * up, c, 0.7), put(x + 2, y - 2 * up, c, 0.7);\n    }\n  }\n}\n\n// The sky at table x and row r (0 the zenith, 31 the horizon), with its clouds.\nfunction skyAt(P, K, xx, r, out) {\n  const s = P.sk, c = P.cl, xi = floor(xx), fx = xx - xi, i = r * 128;\n  const v = mix(c[i + (xi & 127)], c[i + ((xi + 1) & 127)], fx), cd = cl((v - 0.46) * 8, 0, 1) * (0.4 + 0.6 * sm(0, 6, 31 - r));\n  const lit = 0.3 + 0.7 * cd;\n  for (let j = 0; j \u003c 3; j++) out[j] = mix(s[r * 3 + j], mix(mix(K[1 + j], K[4 + j], 0.5) * 0.75, K[7 + j], lit), cd * 0.94);\n  return cd;\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], a);\n}\nconst lit = (c, L) => c.map((v, j) => v * L[j]);\n\n// Hani houses: earth walls under tall thatch, lamps in the doors at night,\n// smoke from the hearth of the middle one.\nconst HOUSE = [\"..TTT..\", \".TTTTT.\", \"TTTTTTT\", \".WWDWW.\", \".WWDWW.\"];\nfunction village(P, L, night, amb) {\n  const th = lit([176, 128, 70], L), wa = lit([186, 150, 112], L), dr = night > 0.3 ? [255 * night, 170 * night, 80 * night] : [40, 30, 26];\n  for (const [hx, dy] of [[5, 3], [13, 5], [21, 2]]) {\n    const by = P.ridge[hx] + dy;\n    for (let i = -4; i \u003c= 4; i++) put(hx + i, by + 1, lit([70, 56, 40], L));\n    HOUSE.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && put(hx + i - 3, by - 4 + j, ch === \"T\" ? th.map((v) => v * (j === 2 ? 0.8 : 1)) : ch === \"W\" ? wa : dr)));\n  }\n  const by = P.ridge[13] + 1;\n  for (let j = 0; j \u003c 14; j++) put(14 + j * 0.3 + sin(P.t * 1.3 - j * 0.6) * 0.7, by - 3 - j, [220, 216, 220].map((v) => v * (0.4 + 0.6 * amb)), 0.6 * (1 - j / 14));\n}\n\n// Each bund lets a thread of water down its wall through a gap; when the\n// sluice is open the thread runs wide and white.\nfunction streams(P, fo, I) {\n  for (let k = 1; k \u003c P.n; k++) {\n    const x = 5 + floor(hash(k, 11) * 54), y0 = ceil(P.lip[k * W + x]), f = I[k + 3], w = f > 0.3 ? 1 : 0;\n    for (let y = y0; y \u003c y0 + 5 && y \u003c H; y++) {\n      const C = P.cls[y * W + x];\n      if (y > y0 && C === WATER) {\n        put(x, y, fo, 0.35);\n        break;\n      }\n      const st = (y - floor(P.t * 9)) % 3 === 0 ? 1 : 0.7;\n      for (let i = -w; i \u003c= w; i++) put(x + i, y, fo.map((v) => v * st), 0.85);\n    }\n  }\n}\n\n// A farmer ploughs behind his buffalo in a near paddy, both mirrored in the\n// water, and another farmer walks a high bund.\nconst BUFF = [\"......hh\", \".BBBBBBH\", \"BBBBBBBHH\", \".BBBBBB..\"];\nfunction walkers(P, L, s, sk) {\n  const near = P.walk[0], far = P.walk[1], dir = near[1], k = P.kw, wet = 1 - sm(0.3, 0.6, s);\n  const feet = (x) => P.lip[k * W + round(cl(x, 0, 63))] - 1 - 3 * wet;\n  const fig = (x, y, c) => (put(x, y, c), wet > 0 && put(x, 2 * feet(near[0]) - y + 1, c.map((v, j) => v * 0.6 + sk[60 + j] * 0.2), 0.6 * wet));\n  const bx = near[0], by = feet(bx), fx = bx - 5 * dir;\n  // The furrow of churned water behind them.\n  for (let i = 4; i \u003c 20; i++) put(fx - i * dir, feet(fx - i * dir), [120, 100, 80].map((v, j) => v * L[j]), 0.5 * wet * (1 - i / 20));\n  BUFF.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && fig(bx + (dir > 0 ? i - 4 : 4 - i), by - 3 + j, ch === \"h\" ? lit([230, 220, 200], L) : lit(j > 1 ? [30, 27, 30] : [70, 62, 62], L))));\n  const hat = lit([240, 210, 136], L), body = lit([30, 34, 70], L);\n  for (const [i, j, c] of [[0, -4, hat], [-1, -3, hat], [0, -3, hat], [1, -3, hat], [0, -2, body], [0, -1, body], [-dir, -1, body], [0, 0, body]]) fig(fx + i, by + j, c);\n  // The plough's handle between them.\n  fig(fx + dir, by - 1, [70, 56, 44]), fig(fx + 2 * dir, by, [70, 56, 44]);\n  const k2 = k + round((P.n - k) * 0.55), gx = far[0], gy = P.lip[k2 * W + round(gx)] - 1;\n  put(gx, gy - 1, hat), put(gx, gy, body);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const K = key(HOURS, P.h), S = key(SEASONS, P.s), f = (F = P.f), sk = P.sk, n = P.n, t = P.t, s = P.s, cls = P.cls, tx = P.tx;\n  const [amb, dir, mist] = [K[10], K[11], K[12]], night = sm(0.86, 1, P.h);\n  for (let r = 0; r \u003c 32; r++) {\n    const e = sm(0, 0.65, 1 - r / 31) ** 0.8;\n    for (let j = 0; j \u003c 3; j++) sk[r * 3 + j] = mix(K[4 + j], K[1 + j], e);\n  }\n  // The sun along its day from right to left.\n  const a = cl(P.h / 0.86, 0, 1) * PI, sx = 32 + 26 * cos(a), sy = 16 - 80 * sin(a) ** 1.5, side = sx > 32 ? 1 : -1, rs = 31 - 13 * (1 - sy / YH), sunUp = (1 - sm(11, 15, sy)) * (1 - night);\n  const rice1 = sm(0.1, 0.3, s), rice2 = sm(0.3, 0.6, s), cut = sm(0.88, 1, s);\n  const c = P.cl, ox = P.ox, col = [0, 0, 0], L = [0, 0, 0], L0 = AT.map((v, j) => amb * v + (dir * K[7 + j]) / 255);\n  const sh0 = (0.5 + 0.5 * sm(0, 0.2, P.h)) * (1 - night) * 0.8 * dir;\n  const far = AT.map((v, j) => K[1 + j] * 0.9 + 16), near = [30, 44, 70].map((v) => v * (amb + 0.3)), wood = [28, 66, 32].map((v) => v * 1.3);\n  // How hard water is spilling over each bund: the sluice opens at the top and\n  // the overflow runs down one terrace every LAG seconds.\n  const I = F32(n + 8), HZ = F32(n + 8), fo = FOAM.map((v, j) => mix(v, K[7 + j], 0.3) * (0.4 + 0.6 * sm(0.1, 0.5, amb)));\n  for (let k = -3; k \u003c= n + 1; k++) {\n    const tk = P.surge - (n - k) * LAG;\n    HZ[k + 3] = 0.35 * cl(k / n, 0, 1) ** 1.6;\n    I[k + 3] = tk > 0 ? exp(-tk * 0.9) * sm(0, 0.15, tk) : 0;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, C = cls[i];\n    // Cloud shadow on the hillside, sliding across.\n    const shade = cl((c[((floor(y * 0.22) + 3) & 31) * 128 + (floor(x * 0.75 + ox * 1.2 + 40) & 127)] - 0.48) * 4, 0, 1) * sh0;\n    for (let j = 0; j \u003c 3; j++) L[j] = L0[j] - (shade * K[7 + j]) / 255;\n    if (C \u003c WOOD) {\n      const r = cl(round(31 - 13 * (1 - y / YH)), 0, 31), cd = skyAt(P, K, x * 1.3 + ox, r, col);\n      if (C === SKY) {\n        const ds = Math.hypot(x - sx, (y - sy) * 1.1), g = (1 - night) * (0.5 * exp(-ds / 9) * (1 - cd * 0.6) + (ds \u003c 2.6 ? 1 : 0)), st = night > 0.2 && hash(x, y) > 0.985 ? 200 * night : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] += K[7 + j] * g + st;\n      } else for (let j = 0; j \u003c 3; j++) col[j] = (C === FAR ? mix(sk[84 + j], far[j], 0.45) : mix(sk[84 + j], near[j], 0.75)) * (0.9 + 0.1 * tx[i]);\n    } else if (C === WOOD) for (let j = 0; j \u003c 3; j++) col[j] = wood[j] * (0.6 + 0.6 * tx[i]) * L[j];\n    else {\n      const k = P.kk[i], ee = P.e[i], fl = I[k + 3];\n      if (C === WALL) {\n        // Water sheets down the wall when the terrace above overflows.\n        const st = fl > 0.01 ? 0.85 * fl : 0, sv = st ? 0.5 + 0.5 * sin(y * 1.9 - P.surge * 14 + x * 1.3) ** 2 : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(S[1 + j] * L[j] * (1.05 - 0.4 * ee), fo[j] * sv, st);\n      } else if (C === RIM) {\n        const ra = ee * (0.55 + 0.45 * cl(0.5 + 0.3 * P.dep[i] * side, 0, 1));\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(S[1 + j] * L[j], S[4 + j] * (L[j] + 0.3) + sk[84 + j] * 0.25, ra), fo[j], fl);\n      } else {\n        // The mirror: the far paddies hold the low sky, the near ones the sky\n        // overhead, and each holds its own wall dark along the back.\n        const dp = max(2, P.dep[i]), u = cl(ee / dp, 0, 1), rr = RR[y] - 3 * u, r = round(rr);\n        skyAt(P, K, (x - 32) * (0.4 + r / 40) + 32 + ox + k * 1.5, r, col);\n        const gust = cl((c[((floor(y * 0.3) + 17) & 31) * 128 + (floor(x * 0.5 + ox * 1.6) & 127)] - 0.55) * 5, 0, 1), back = dp > 4 ? 0.5 * exp(-ee / 0.9) : 0;\n        // Ripples run out from the wall when water spills in from above.\n        const fi = I[k + 4], rip = fi > 0.01 ? fi * (0.5 + 0.5 * sin(ee * 1.7 - (P.surge - (n - k - 1) * LAG) * 9)) * 0.5 : 0;\n        // The sun's own path down the paddies that hold its height of sky.\n        const gl = sunUp && abs(x - sx) \u003c 7 ? sunUp * exp(-(((x - sx) / 2.2) ** 2) - ((rr - rs) / 1.3) ** 2) * (1 - 0.6 * gust) * (0.75 + 0.25 * sin(x * 2.3 + y * 1.7 + t * 6)) : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(col[j] * 0.88, sk[45 + j] * 0.55, 0.5 * gust), S[1 + j] * L[j], back * (1 - fi)) + MUD[j] * L[j] + fo[j] * rip + K[7 + j] * gl;\n        // Rice: seedlings in rows along the contour, then a closed crop.\n        const ra = max((x + k) % 2 === 0 && floor(ee) % 2 === 0 ? rice1 : 0, rice2);\n        if (ra > 0) {\n          const v = (floor(ee) & 1 ? 1 : 0.84) * (0.9 + 0.2 * hash(x, y * 7 + k)) * (1 + 0.3 * cl((gust - 0.1) * 2, 0, 1)), isCut = (k * 7 + 23) % 10 \u003c cut * 3.5;\n          for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], (isCut ? STUB[j] * (x % 3 ? 1 : 0.7) : S[7 + j]) * L[j] * v, ra);\n        }\n      }\n      // The far steps fade into the haze.\n      const hz = HZ[k + 3];\n      for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], sk[72 + j] * 0.9, hz);\n    }\n    f[o] = col[0];\n    f[o + 1] = col[1];\n    f[o + 2] = col[2];\n  }\n  // The village under the forest, the bunds' outlets, the farmers.\n  village(P, L0, night, amb);\n  streams(P, fo, I);\n  walkers(P, L0, s, sk);\n  egrets(P, L0, 1 - sm(0.3, 0.6, s));\n  // Mist: a bank in the valley behind the ridge and a thinner one over the steps.\n  const mt = P.mt, y1 = 28 + 4 * sin(mt * 0.4), y2 = 66 + 22 * sin(mt * 0.2 + 1), mc = [0, 1, 2].map((j) => mix(sk[93 + j], 250, 0.55) * (0.7 + 0.3 * amb));\n  for (let y = 0; y \u003c H; y++) {\n    const w1 = mist * 0.9 * exp(-(((y - y1) / 6) ** 2)), w2 = mist * 0.45 * exp(-(((y - y2) / 7) ** 2));\n    if (w1 + w2 \u003c 0.01) continue;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      const dm = min(0.9, ((cls[i] \u003c WOOD ? w1 : 0) + w2) * (0.4 + 0.6 * vn(x * 0.08 + mt * 0.3, y * 0.2)));\n      for (let j = 0; j \u003c 3; j++) f[i * 3 + j] = mix(f[i * 3 + j], mc[j], dm);\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","layer":{"id":"layer-rice-terraces","type":"code","name":"rice-terraces","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rice Terraces\n// Family:  farm\n// Idea:    Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Hani rice terraces of Yuanyang and the terraces of Banaue\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1\n//\n// Knob 1: Season. At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble.\n// Knob 2: Speed. At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower.\n// Knob 3: Terraces. How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water.\n// Knob 4: Hour. Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door.\n// Buttons: K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Terrace 0 sits just under the panel, the last one at the ridge. The sky's\n// horizon row, and the classes a LED can belong to.\nconst [YB, YT, YH] = [134, 38, 34];\nconst [SKY, FAR, NEAR, WOOD, WATER, WALL, RIM] = [0, 1, 2, 3, 4, 5, 6];\n// The row of the sky (0 the zenith, 31 the horizon) that the water on each\n// panel row holds: low sky in the far paddies, the sky overhead in the near ones.\nconst RR = F32(H).map((v, y) => 26 - 20 * cl((y - 36) / 92, 0, 1) ** 0.9);\nconst FOAM = [220, 236, 250], LAG = 0.22, AT = [0.82, 0.88, 1], MUD = [7, 5.6, 4.4], STUB = [150, 120, 70];\n\n// Light by the hour: sky at the zenith, sky at the horizon, sunlit cloud,\n// then ambient and direct light and how much mist lies in the valley.\nconst HOURS = [\n  [0, 14, 22, 70, 150, 100, 150, 255, 150, 140, 0.3, 0.12, 1],\n  [0.07, 34, 64, 150, 255, 176, 110, 255, 200, 150, 0.5, 0.55, 0.95],\n  [0.25, 40, 100, 200, 190, 215, 235, 255, 245, 225, 0.7, 0.6, 0.4],\n  [0.5, 36, 96, 206, 170, 205, 240, 255, 255, 250, 0.74, 0.66, 0.15],\n  [0.72, 40, 80, 180, 250, 200, 130, 255, 215, 150, 0.64, 0.56, 0.2],\n  [0.86, 40, 36, 100, 255, 120, 70, 255, 140, 90, 0.42, 0.36, 0.4],\n  [1, 6, 8, 28, 40, 36, 70, 60, 60, 90, 0.16, 0, 0.6],\n];\n// The season: earth wall, bund rim, rice. Flooded, planted, green, ripening, cut.\nconst SEASONS = [\n  [0, 66, 48, 36, 206, 184, 150, 120, 200, 70],\n  [0.35, 60, 74, 40, 150, 196, 96, 110, 204, 60],\n  [0.65, 42, 84, 34, 110, 176, 64, 46, 156, 40],\n  [0.85, 80, 84, 40, 186, 176, 84, 184, 184, 50],\n  [1, 96, 76, 44, 224, 184, 96, 244, 178, 40],\n];\nfunction key(T, u) {\n  let i = 0;\n  while (i \u003c T.length - 2 && u > T[i + 1][0]) i++;\n  const a = T[i], b = T[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ox: 0, mt: 0, n: 0, surge: 99, sk: F32(32 * 3), cl: F32(128 * 32), f: F32(N * 3),\n    cls: new Uint8Array(N), kk: new Int8Array(N), e: F32(N), dep: F32(N), tx: F32(N), walk: [[10 + rnd() * 44, 1], [10 + rnd() * 44, -1]],\n  });\n  P.ox = rnd() * 128;\n  // Egrets: where each stands (column, how far up the steps), and how long it waits.\n  P.birds = [0, 1, 2].map(() => ({ x: 6 + rnd() * 52, kf: 0.05 + rnd() * 0.6, w: 1 + rnd() * 8, p: -1 }));\n  // Cloud noise, 128 columns that wrap and 32 rows from the zenith down.\n  for (let i = 0; i \u003c 128 * 32; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.06, y * 0.22) + 0.3 * vn(X * 0.15, y * 0.5 + 9) + 0.15 * vn(X * 0.4, y + 3);\n    P.cl[i] = mix(f(x), f(x - 128), x / 128);\n  }\n  for (let i = 0; i \u003c N; i++) P.tx[i] = vn((i & 63) * 0.5, (i >> 6) * 0.6);\n}\n\n// The terraces for n steps. A level u climbs the panel in steps that shrink\n// with distance, bent by slow noise into spurs and gullies; each whole value\n// of u is a bund. For each LED: which terrace, and whether it is water, the\n// earth wall under a bund, or the bund's lit rim.\nfunction build(P, n) {\n  const q = 0.28 ** (1 / n), L = -log(q), b0 = ((YB - YT) * L) / (1 - q ** n);\n  const V = (y) => ((y = 1 - ((YB - y) * L) / b0), y > 1e-4 ? log(y) / -L : 99);\n  const { cls, kk, e, dep } = P, u = F32(H + 20), yc = F32(n + 6);\n  const put = (x, y, k, i = y * W + x) => y >= 0 && y \u003c H && cls[i] >= WATER && ((cls[i] = RIM), (kk[i] = k));\n  P.lip = F32((n + 2) * W);\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    // A spur comes down left of centre and a gully cuts in on the right.\n    const sp = 1.3 * exp(-(((x - 24) / 13) ** 2)) - 1 * exp(-(((x - 55) / 9) ** 2));\n    for (let y = H + 19, m = -9; y >= 0; y--) {\n      const v0 = V(y), xs = (x - 32) / (q ** v0) ** 0.4 + 40;\n      const v = v0 + sp + 1.2 * (vn(xs * 0.035, v0 * 0.07) * 2 - 1 + 0.4 * (vn(xs * 0.085 + 7, v0 * 0.15 + 5) * 2 - 1));\n      u[y] = m = max(m, v);\n    }\n    // Where each bund crosses this column, to a fraction of a LED.\n    yc.fill(H + 40);\n    for (let y = H + 18; y >= 0; y--) for (let k = max(-3, floor(u[y + 1]) + 1); k \u003c= min(n, u[y]); k++) yc[k + 3] = y + (u[y] - k) / max(1e-3, u[y] - u[y + 1]);\n    for (let k = 0; k \u003c= n; k++) P.lip[k * W + x] = yc[k + 3];\n    let y = H - 1;\n    for (; y >= 0 && u[y] \u003c n; y--) {\n      const k = max(-3, floor(u[y])), lip = yc[k + 4], bp = yc[k + 3] \u003c H + 40 ? yc[k + 3] - lip : b0, d = y - lip, rh = cl(0.22 * bp - 0.6, 0, 3.5), i = y * W + x;\n      if (d \u003c 1) (cls[i] = RIM), (kk[i] = k + 1);\n      else if (d \u003c 1 + rh) (cls[i] = WALL), (kk[i] = k + 1), (e[i] = (d - 1) / rh);\n      else (cls[i] = WATER), (kk[i] = k), (e[i] = d - 1 - rh), (dep[i] = bp - 1 - rh);\n    }\n    P.ridge[x] = y;\n    const top = y - 5 - 3 * vn(x * 0.35, 4) - abs(sin(x * 0.9)) * 1.5;\n    for (; y >= 0; y--) {\n      const i = y * W + x;\n      cls[i] = y > top ? WOOD : y >= 22 + 4 * sin(0.06 * x + 0.5) + 2.5 * sin(0.17 * x + 2) ? NEAR : y >= 15 + 5 * sin(0.045 * x + 2.4) + 2 * sin(0.13 * x + 1) ? FAR : SKY;\n    }\n  }\n  // Close the rim where a bund steps a row or more from one column to the next.\n  for (let k = 1; k \u003c= n; k++)\n    for (let x = 0; x \u003c W - 1; x++) {\n      let a = ceil(P.lip[k * W + x]), b = ceil(P.lip[k * W + x + 1]), xa = x, xb = x + 1;\n      if (a > b) [a, b, xa, xb] = [b, a, xb, xa];\n      const m = floor((a + b) / 2);\n      for (let y = a + 1; y \u003c b; y++) put(y \u003c= m ? xa : xb, y, k);\n      if (b > a) put(xb, m, k);\n    }\n  // How bright each rim is: faint where the steps are thin and far, and\n  // brighter where the bund turns to face the light.\n  const lp = (k, x) => P.lip[k * W + cl(x, 0, W - 1)];\n  for (let i = 0; i \u003c N; i++)\n    if (cls[i] === RIM) {\n      const k = kk[i], x = i & 63;\n      e[i] = k > 0 ? cl((lp(k - 1, x) - lp(k, x) - 2) / 7, 0.2, 1) : 1;\n      dep[i] = k >= 0 ? lp(k, x + 1) - lp(k, x - 1) : 0;\n    }\n  for (P.kw = 1; P.lip[P.kw * W + 32] > 117; P.kw++);\n  P.n = n;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2);\n  const n = round(cl(k[2], 12, 24));\n  if (n !== P.n) build(P, n);\n  P.s = cl(k[0], 0, 1);\n  P.h = cl(k[3], 0, 1);\n  P.t += d;\n  P.ox += 5 * d;\n  P.mt += d;\n  P.surge += d;\n  if (input.btnPressed && input.btnPressed[0]) P.surge = 0;\n  // The ploughing team and the farmer up on the high bund walk to the end and turn.\n  for (const w of P.walk) {\n    w[0] += w[1] * 2.2 * d;\n    if (w[0] > 56 || w[0] \u003c 6) w[1] = -w[1];\n  }\n  // An egret waits, then flies to another paddy in a low arc.\n  for (const b of P.birds)\n    if (b.p >= 0) {\n      if ((b.p += d / 1.8) >= 1) Object.assign(b, { p: -1, x: b.tx, kf: b.tk, w: 4 + rnd() * 9 });\n    } else if ((b.w -= d) \u003c= 0) Object.assign(b, { p: 0, tx: 6 + rnd() * 52, tk: 0.05 + rnd() * 0.6, y0: egY(P, b.x, b.kf) });\n}\n\n// Where an egret stands: a little behind the bund of its terrace.\nconst egY = (P, x, kf) => P.lip[max(1, round(kf * P.n)) * W + round(cl(x, 0, 63))] - 2;\nfunction egrets(P, L, wet) {\n  const c = lit([250, 248, 240], L);\n  for (const b of P.birds) {\n    if (b.p \u003c 0) {\n      const x = b.x, y = egY(P, x, b.kf);\n      put(x, y, c), put(x, y - 1, c), put(x + 1, y - 2, c), put(x, y + 1, c, 0.35 * wet), put(x, y + 2, c, 0.25 * wet);\n    } else {\n      const y1 = egY(P, b.tx, b.tk), x = mix(b.x, b.tx, b.p), y = mix(b.y0, y1, b.p) - 14 * sin(PI * b.p), up = floor(P.t * 7) & 1;\n      put(x, y, c), put(x - 1, y - up, c), put(x + 1, y - up, c), put(x - 2, y - 2 * up, c, 0.7), put(x + 2, y - 2 * up, c, 0.7);\n    }\n  }\n}\n\n// The sky at table x and row r (0 the zenith, 31 the horizon), with its clouds.\nfunction skyAt(P, K, xx, r, out) {\n  const s = P.sk, c = P.cl, xi = floor(xx), fx = xx - xi, i = r * 128;\n  const v = mix(c[i + (xi & 127)], c[i + ((xi + 1) & 127)], fx), cd = cl((v - 0.46) * 8, 0, 1) * (0.4 + 0.6 * sm(0, 6, 31 - r));\n  const lit = 0.3 + 0.7 * cd;\n  for (let j = 0; j \u003c 3; j++) out[j] = mix(s[r * 3 + j], mix(mix(K[1 + j], K[4 + j], 0.5) * 0.75, K[7 + j], lit), cd * 0.94);\n  return cd;\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], a);\n}\nconst lit = (c, L) => c.map((v, j) => v * L[j]);\n\n// Hani houses: earth walls under tall thatch, lamps in the doors at night,\n// smoke from the hearth of the middle one.\nconst HOUSE = [\"..TTT..\", \".TTTTT.\", \"TTTTTTT\", \".WWDWW.\", \".WWDWW.\"];\nfunction village(P, L, night, amb) {\n  const th = lit([176, 128, 70], L), wa = lit([186, 150, 112], L), dr = night > 0.3 ? [255 * night, 170 * night, 80 * night] : [40, 30, 26];\n  for (const [hx, dy] of [[5, 3], [13, 5], [21, 2]]) {\n    const by = P.ridge[hx] + dy;\n    for (let i = -4; i \u003c= 4; i++) put(hx + i, by + 1, lit([70, 56, 40], L));\n    HOUSE.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && put(hx + i - 3, by - 4 + j, ch === \"T\" ? th.map((v) => v * (j === 2 ? 0.8 : 1)) : ch === \"W\" ? wa : dr)));\n  }\n  const by = P.ridge[13] + 1;\n  for (let j = 0; j \u003c 14; j++) put(14 + j * 0.3 + sin(P.t * 1.3 - j * 0.6) * 0.7, by - 3 - j, [220, 216, 220].map((v) => v * (0.4 + 0.6 * amb)), 0.6 * (1 - j / 14));\n}\n\n// Each bund lets a thread of water down its wall through a gap; when the\n// sluice is open the thread runs wide and white.\nfunction streams(P, fo, I) {\n  for (let k = 1; k \u003c P.n; k++) {\n    const x = 5 + floor(hash(k, 11) * 54), y0 = ceil(P.lip[k * W + x]), f = I[k + 3], w = f > 0.3 ? 1 : 0;\n    for (let y = y0; y \u003c y0 + 5 && y \u003c H; y++) {\n      const C = P.cls[y * W + x];\n      if (y > y0 && C === WATER) {\n        put(x, y, fo, 0.35);\n        break;\n      }\n      const st = (y - floor(P.t * 9)) % 3 === 0 ? 1 : 0.7;\n      for (let i = -w; i \u003c= w; i++) put(x + i, y, fo.map((v) => v * st), 0.85);\n    }\n  }\n}\n\n// A farmer ploughs behind his buffalo in a near paddy, both mirrored in the\n// water, and another farmer walks a high bund.\nconst BUFF = [\"......hh\", \".BBBBBBH\", \"BBBBBBBHH\", \".BBBBBB..\"];\nfunction walkers(P, L, s, sk) {\n  const near = P.walk[0], far = P.walk[1], dir = near[1], k = P.kw, wet = 1 - sm(0.3, 0.6, s);\n  const feet = (x) => P.lip[k * W + round(cl(x, 0, 63))] - 1 - 3 * wet;\n  const fig = (x, y, c) => (put(x, y, c), wet > 0 && put(x, 2 * feet(near[0]) - y + 1, c.map((v, j) => v * 0.6 + sk[60 + j] * 0.2), 0.6 * wet));\n  const bx = near[0], by = feet(bx), fx = bx - 5 * dir;\n  // The furrow of churned water behind them.\n  for (let i = 4; i \u003c 20; i++) put(fx - i * dir, feet(fx - i * dir), [120, 100, 80].map((v, j) => v * L[j]), 0.5 * wet * (1 - i / 20));\n  BUFF.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && fig(bx + (dir > 0 ? i - 4 : 4 - i), by - 3 + j, ch === \"h\" ? lit([230, 220, 200], L) : lit(j > 1 ? [30, 27, 30] : [70, 62, 62], L))));\n  const hat = lit([240, 210, 136], L), body = lit([30, 34, 70], L);\n  for (const [i, j, c] of [[0, -4, hat], [-1, -3, hat], [0, -3, hat], [1, -3, hat], [0, -2, body], [0, -1, body], [-dir, -1, body], [0, 0, body]]) fig(fx + i, by + j, c);\n  // The plough's handle between them.\n  fig(fx + dir, by - 1, [70, 56, 44]), fig(fx + 2 * dir, by, [70, 56, 44]);\n  const k2 = k + round((P.n - k) * 0.55), gx = far[0], gy = P.lip[k2 * W + round(gx)] - 1;\n  put(gx, gy - 1, hat), put(gx, gy, body);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const K = key(HOURS, P.h), S = key(SEASONS, P.s), f = (F = P.f), sk = P.sk, n = P.n, t = P.t, s = P.s, cls = P.cls, tx = P.tx;\n  const [amb, dir, mist] = [K[10], K[11], K[12]], night = sm(0.86, 1, P.h);\n  for (let r = 0; r \u003c 32; r++) {\n    const e = sm(0, 0.65, 1 - r / 31) ** 0.8;\n    for (let j = 0; j \u003c 3; j++) sk[r * 3 + j] = mix(K[4 + j], K[1 + j], e);\n  }\n  // The sun along its day from right to left.\n  const a = cl(P.h / 0.86, 0, 1) * PI, sx = 32 + 26 * cos(a), sy = 16 - 80 * sin(a) ** 1.5, side = sx > 32 ? 1 : -1, rs = 31 - 13 * (1 - sy / YH), sunUp = (1 - sm(11, 15, sy)) * (1 - night);\n  const rice1 = sm(0.1, 0.3, s), rice2 = sm(0.3, 0.6, s), cut = sm(0.88, 1, s);\n  const c = P.cl, ox = P.ox, col = [0, 0, 0], L = [0, 0, 0], L0 = AT.map((v, j) => amb * v + (dir * K[7 + j]) / 255);\n  const sh0 = (0.5 + 0.5 * sm(0, 0.2, P.h)) * (1 - night) * 0.8 * dir;\n  const far = AT.map((v, j) => K[1 + j] * 0.9 + 16), near = [30, 44, 70].map((v) => v * (amb + 0.3)), wood = [28, 66, 32].map((v) => v * 1.3);\n  // How hard water is spilling over each bund: the sluice opens at the top and\n  // the overflow runs down one terrace every LAG seconds.\n  const I = F32(n + 8), HZ = F32(n + 8), fo = FOAM.map((v, j) => mix(v, K[7 + j], 0.3) * (0.4 + 0.6 * sm(0.1, 0.5, amb)));\n  for (let k = -3; k \u003c= n + 1; k++) {\n    const tk = P.surge - (n - k) * LAG;\n    HZ[k + 3] = 0.35 * cl(k / n, 0, 1) ** 1.6;\n    I[k + 3] = tk > 0 ? exp(-tk * 0.9) * sm(0, 0.15, tk) : 0;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, C = cls[i];\n    // Cloud shadow on the hillside, sliding across.\n    const shade = cl((c[((floor(y * 0.22) + 3) & 31) * 128 + (floor(x * 0.75 + ox * 1.2 + 40) & 127)] - 0.48) * 4, 0, 1) * sh0;\n    for (let j = 0; j \u003c 3; j++) L[j] = L0[j] - (shade * K[7 + j]) / 255;\n    if (C \u003c WOOD) {\n      const r = cl(round(31 - 13 * (1 - y / YH)), 0, 31), cd = skyAt(P, K, x * 1.3 + ox, r, col);\n      if (C === SKY) {\n        const ds = Math.hypot(x - sx, (y - sy) * 1.1), g = (1 - night) * (0.5 * exp(-ds / 9) * (1 - cd * 0.6) + (ds \u003c 2.6 ? 1 : 0)), st = night > 0.2 && hash(x, y) > 0.985 ? 200 * night : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] += K[7 + j] * g + st;\n      } else for (let j = 0; j \u003c 3; j++) col[j] = (C === FAR ? mix(sk[84 + j], far[j], 0.45) : mix(sk[84 + j], near[j], 0.75)) * (0.9 + 0.1 * tx[i]);\n    } else if (C === WOOD) for (let j = 0; j \u003c 3; j++) col[j] = wood[j] * (0.6 + 0.6 * tx[i]) * L[j];\n    else {\n      const k = P.kk[i], ee = P.e[i], fl = I[k + 3];\n      if (C === WALL) {\n        // Water sheets down the wall when the terrace above overflows.\n        const st = fl > 0.01 ? 0.85 * fl : 0, sv = st ? 0.5 + 0.5 * sin(y * 1.9 - P.surge * 14 + x * 1.3) ** 2 : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(S[1 + j] * L[j] * (1.05 - 0.4 * ee), fo[j] * sv, st);\n      } else if (C === RIM) {\n        const ra = ee * (0.55 + 0.45 * cl(0.5 + 0.3 * P.dep[i] * side, 0, 1));\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(S[1 + j] * L[j], S[4 + j] * (L[j] + 0.3) + sk[84 + j] * 0.25, ra), fo[j], fl);\n      } else {\n        // The mirror: the far paddies hold the low sky, the near ones the sky\n        // overhead, and each holds its own wall dark along the back.\n        const dp = max(2, P.dep[i]), u = cl(ee / dp, 0, 1), rr = RR[y] - 3 * u, r = round(rr);\n        skyAt(P, K, (x - 32) * (0.4 + r / 40) + 32 + ox + k * 1.5, r, col);\n        const gust = cl((c[((floor(y * 0.3) + 17) & 31) * 128 + (floor(x * 0.5 + ox * 1.6) & 127)] - 0.55) * 5, 0, 1), back = dp > 4 ? 0.5 * exp(-ee / 0.9) : 0;\n        // Ripples run out from the wall when water spills in from above.\n        const fi = I[k + 4], rip = fi > 0.01 ? fi * (0.5 + 0.5 * sin(ee * 1.7 - (P.surge - (n - k - 1) * LAG) * 9)) * 0.5 : 0;\n        // The sun's own path down the paddies that hold its height of sky.\n        const gl = sunUp && abs(x - sx) \u003c 7 ? sunUp * exp(-(((x - sx) / 2.2) ** 2) - ((rr - rs) / 1.3) ** 2) * (1 - 0.6 * gust) * (0.75 + 0.25 * sin(x * 2.3 + y * 1.7 + t * 6)) : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(col[j] * 0.88, sk[45 + j] * 0.55, 0.5 * gust), S[1 + j] * L[j], back * (1 - fi)) + MUD[j] * L[j] + fo[j] * rip + K[7 + j] * gl;\n        // Rice: seedlings in rows along the contour, then a closed crop.\n        const ra = max((x + k) % 2 === 0 && floor(ee) % 2 === 0 ? rice1 : 0, rice2);\n        if (ra > 0) {\n          const v = (floor(ee) & 1 ? 1 : 0.84) * (0.9 + 0.2 * hash(x, y * 7 + k)) * (1 + 0.3 * cl((gust - 0.1) * 2, 0, 1)), isCut = (k * 7 + 23) % 10 \u003c cut * 3.5;\n          for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], (isCut ? STUB[j] * (x % 3 ? 1 : 0.7) : S[7 + j]) * L[j] * v, ra);\n        }\n      }\n      // The far steps fade into the haze.\n      const hz = HZ[k + 3];\n      for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], sk[72 + j] * 0.9, hz);\n    }\n    f[o] = col[0];\n    f[o + 1] = col[1];\n    f[o + 2] = col[2];\n  }\n  // The village under the forest, the bunds' outlets, the farmers.\n  village(P, L0, night, amb);\n  streams(P, fo, I);\n  walkers(P, L0, s, sk);\n  egrets(P, L0, 1 - sm(0.3, 0.6, s));\n  // Mist: a bank in the valley behind the ridge and a thinner one over the steps.\n  const mt = P.mt, y1 = 28 + 4 * sin(mt * 0.4), y2 = 66 + 22 * sin(mt * 0.2 + 1), mc = [0, 1, 2].map((j) => mix(sk[93 + j], 250, 0.55) * (0.7 + 0.3 * amb));\n  for (let y = 0; y \u003c H; y++) {\n    const w1 = mist * 0.9 * exp(-(((y - y1) / 6) ** 2)), w2 = mist * 0.45 * exp(-(((y - y2) / 7) ** 2));\n    if (w1 + w2 \u003c 0.01) continue;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      const dm = min(0.9, ((cls[i] \u003c WOOD ? w1 : 0) + w2) * (0.4 + 0.6 * vn(x * 0.08 + mt * 0.3, y * 0.2)));\n      for (let j = 0; j \u003c 3; j++) f[i * 3 + j] = mix(f[i * 3 + j], mc[j], dm);\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower."},{"name":"Terraces","min":12,"max":24,"about":"How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water."},{"name":"Hour","min":0,"max":1,"about":"Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door."}],"start":[0,2,12,0.06],"measures":{"motion":0.0809,"detail":0.0942,"edges":0.423,"complexity":2.2579,"coverage":1,"colour":0.1716,"drift":0.0563},"knobResponse":[0.1151,0.0688,0.1253,0.4152]},{"slug":"ripple-tank","title":"Ripple Tank","family":"sim","round":1,"note":"빗방울이 떨어진 자리마다 고리가 퍼지고 벽에 부딪혀 되돌아와 서로 겹쳐요.","idea":"Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-ripple-tank","type":"code","name":"ripple-tank","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the crests round the colour wheel; the troughs stay deep blue."},{"name":"Rain","min":0.5,"max":6,"about":"Drops per second."},{"name":"Damping","min":0,"max":1,"about":"How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far."},{"name":"Drop","min":2.5,"max":6,"about":"Size of each drop; small drops throw fine rings, big ones a slow swell."}],"start":[0,2,0,2.5],"measures":{"motion":4.7512,"detail":0.0907,"edges":0.3794,"complexity":1.2184,"coverage":0.4445,"colour":0.2076,"drift":0.234},"knobResponse":[0.0799,0.2629,0.1082,0.1339]},{"slug":"rule-scroll","title":"Rule Scroll","family":"automata","round":1,"note":"64칸 한 줄이 이웃을 보고 다음 줄을 써 내려가요. 8비트 숫자 하나가 삼각형이 될지 잡음이 될지 정해요.","idea":"A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.","buttons":"K1 tap starts again from a single cell.","code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","layer":{"id":"layer-rule-scroll","type":"code","name":"rule-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from 3 to 24, one row each."},{"name":"Rule","min":0,"max":11,"about":"Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126."},{"name":"Noise","min":0,"max":1,"about":"Random flips each generation, which show as white sparks and break ordered rules open."}],"start":[0,2,0,0.06],"measures":{"motion":3.3184,"detail":0.3747,"edges":0.8011,"complexity":0.6155,"coverage":0.494,"colour":0.4373,"drift":0.0401},"knobResponse":[0.2576,0.1939,0.2319,0.0376]},{"slug":"sandpile","title":"Sandpile","family":"automata","round":21,"note":"한 칸에 모래알이 넷 모이면 이웃 넷에 하나씩 넘기는 쟁반에 모래가 한 줌씩 떨어져요. 사태가 떨어진 자리에서 빛나는 고리로 번지며 네 색 레이스를 다시 쓰고, 쟁반이 다 차면 기울어 모래를 쏟아요.","idea":"Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.","buttons":"K1 tap tips the tray now.","code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","layer":{"id":"layer-sandpile","type":"code","name":"sandpile","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon."},{"name":"Speed","min":0.2,"max":3,"about":"Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile."},{"name":"Sources","min":1,"max":5,"about":"How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre."},{"name":"Scatter","min":0,"max":1,"about":"How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray."}],"start":[0,2,1,0.06],"measures":{"motion":0.6394,"detail":0.335,"edges":0.8978,"complexity":0.6311,"coverage":0.8294,"colour":0.2844,"drift":0.1509},"knobResponse":[0.2234,0.3094,0.3442,0.2665]},{"slug":"satin-fold","title":"Satin Fold","family":"cosmetic","round":30,"note":"한 점에 잡힌 연한 새틴이 부채꼴 주름으로 흔들리고, 광택이 주름을 따라 긴 줄로 서요. 금색 실 하나가 천을 건너며 주름마다 휘어요.","idea":"A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.","buttons":"K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Satin Fold\n// Family:  cosmetic\n// Idea:    A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after satin weave sheen and gold-foil packaging; the sheen is a fibre highlight (James Kajiya and Timothy Kay, 1989) with an anisotropic lobe (Gregory Ward, 1992)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1\n//\n// Knob 1: Hue. The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac.\n// Knob 2: Speed. How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half.\n// Knob 3: Folds. One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5.\n// Knob 4: Gold. The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon.\n// Buttons: K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.\n\nconst W = 64, H = 128;\nconst { sin, cos, sqrt, exp, floor, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The first fold family is a fan: the cloth is held at a point 160 LEDs\n// above the panel's middle and a little left, and 22 folds a radian hang from\n// it, tight at the top of the panel and wide at the bottom.\nconst PX = -14, PY = -160, FAN = 22, FAN_A = 6.5, RC = 160;\n// The others are straight waves: crest angle in degrees, wavelength in LEDs,\n// height in LEDs, bend of the crest, travel in radians a second at Speed 1,\n// swell phase. The last is pressed: its profile has sharp valleys. The first\n// row stands for the fan, which reads only its travel and phase from it.\nconst FOLDS = [\n  [0, 1, 0, 0, 0.42, 0.0],\n  [58, 46, 4.2, -0.004, -0.33, 2.1],\n  [100, 30, 2.6, 0.007, 0.55, 4.0],\n  [128, 24, 1.8, -0.008, -0.71, 1.2],\n  [76, 28, 1.4, 0.004, 0.62, 3.3],\n].map(([ang, lam, A, c, w, ph]) => {\n  const a = (ang * PI) / 180;\n  return { tx: cos(a), ty: sin(a), nx: -sin(a), ny: cos(a), k: (2 * PI) / lam, A, c, w, ph };\n});\n\n// Light from the left, a little above and in front; the eye straight on.\n// y runs down.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.6, -0.35, 0.72);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The floats of the satin weave run nearly across the panel, rising a little\n// to the right, so they cross the hanging folds and catch the light only\n// where they tilt square to the half vector.\nconst FX = 0.985, FY = -0.17;\n// The gold line in the cloth's own coordinates: through the middle, going\n// down to the right, bowed a little.\nconst [GX, GY] = (() => {\n  const l = Math.hypot(0.42, 1);\n  return [0.42 / l, 1 / l];\n})();\nconst MX = -GY, MY = GX;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The satin's ramp from the deepest hollow (0) to the brightest sheen (1):\n// the hue deep and saturated in the hollows, pale over the body, near white\n// in the streaks.\nconst RAMP = 256;\nfunction ramp(P) {\n  const hue = P.hue + 0.975;\n  for (let i = 0; i \u003c RAMP; i++) {\n    const s = i / (RAMP - 1);\n    let sat, val;\n    if (s \u003c 0.5) {\n      const u = s / 0.5;\n      sat = 0.46 + (0.18 - 0.46) * u;\n      val = 0.5 + (0.8 - 0.5) * u;\n    } else {\n      const u = (s - 0.5) / 0.5;\n      sat = 0.18 + (0.04 - 0.18) * u;\n      val = 0.8 + (0.97 - 0.8) * u;\n    }\n    hsv(hue - 0.015 * (1 - s), sat, val, P.lut, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = {\n    t: 0, clock: 0, hue: 0, speed: 2, folds: 1, gold: 0.06, gust: -1,\n    lut: new Float32Array(RAMP * 3), lutHue: NaN, cw: new Float32Array(W), cd: new Float32Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.folds = cl(k[2], 1, 5);\n  P.gold = cl(k[3], 0, 1);\n  P.t += d * P.speed;\n  P.clock += d;\n  if (P.gust >= 0) {\n    P.gust += d / 2.5;\n    if (P.gust >= 1) P.gust = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) P.gust = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) ramp(P);\n  const T = P.t, F = P.folds, lut = P.lut;\n  // Each family fades in over one step of Folds, and the whole cloth gets\n  // deeper as it does.\n  const depth = 0.75 + 0.18 * (F - 1);\n  const act = [];\n  for (let i = 0; i \u003c FOLDS.length; i++) {\n    const f = FOLDS[i], wgt = sm(0, 1, F - i);\n    if (wgt \u003c= 0) continue;\n    const swell = 0.72 + 0.28 * sin(0.37 * T + f.ph);\n    act.push({ ...f, A: (i ? f.A * swell : FAN_A) * wgt * depth, phase: f.w * T + f.ph, press: i === 4 });\n  }\n  const na = act.length, fan = act[0];\n  let tot = 0;\n  for (const f of act) tot += f.A;\n  // The gust: one ridge across the sheet that runs from the bottom up.\n  let gA = 0, gy0 = 0;\n  if (P.gust >= 0) {\n    gA = 5.5 * sin(PI * P.gust);\n    gy0 = 80 - 190 * P.gust;\n  }\n  const wa = 3.2;\n  // The panel sees the cloth a little from below, so a line on it shifts\n  // with the height of the cloth under it: 0.65 LED a LED of height at one\n  // fold family, less on the deep drapes.\n  const lean = 0.65 / (1 + 0.15 * (F - 1));\n  const g = P.gold, gAlpha = sm(0, 0.04, g), hw = 0.6 + 6 * g, sw = 1 + 2.5 * g;\n  const gf = 0.11 + 0.11 * g, gT = P.clock * (0.6 + 0.4 * P.speed);\n  // The warp's sideways part, one value a column.\n  const CW = P.cw, CD = P.cd;\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - 31.5) * 0.07 - T * 0.17 + 1.3;\n    CW[x] = wa * sin(u);\n    CD[x] = wa * 0.07 * cos(u);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const py = y - 63.5;\n    const s1 = sin(py * 0.045 + T * 0.23), c1 = cos(py * 0.045 + T * 0.23);\n    const dxdy = wa * 0.045 * c1;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5;\n      const dydx = CD[x];\n      const qx = px + wa * s1, qy = py + CW[x];\n      let h = 0, gx = 0, gy = 0;\n      {\n        // The fan: the fold phase goes with the angle round the point it\n        // hangs from, and leans with the distance. Its height grows as the\n        // square root of the distance, and a swell runs down it.\n        const dx = qx - PX, dy = qy - PY, r2 = dx * dx + dy * dy, r = sqrt(r2);\n        const th = FAN * Math.atan2(dx, dy) + 0.025 * r - fan.phase;\n        const sv = 0.045 * r - 0.5 * T, ms = 0.75 + 0.25 * sin(sv), rr = sqrt(r / RC);\n        const A = fan.A * rr * ms, dA = A / (2 * r) + fan.A * rr * 0.01125 * cos(sv);\n        const sn = sin(th), cs = cos(th);\n        h += A * sn;\n        const gr = dA * sn + A * cs * 0.025, ga = (A * cs * FAN) / r2;\n        gx += (gr * dx) / r + ga * dy;\n        gy += (gr * dy) / r - ga * dx;\n      }\n      for (let j = 1; j \u003c na; j++) {\n        const f = act[j];\n        const a = qx * f.tx + qy * f.ty, s = qx * f.nx + qy * f.ny + f.c * a * a;\n        const th = f.k * s - f.phase;\n        let v, dv;\n        if (f.press) {\n          // sqrt(sin^2 + e^2): round crests, sharp valleys.\n          const sn = sin(th), cs = cos(th), r = sqrt(sn * sn + 0.04);\n          v = f.A * (r - 0.6);\n          dv = (f.A * f.k * sn * cs) / r;\n        } else {\n          v = f.A * sin(th);\n          dv = f.A * f.k * cos(th);\n        }\n        h += v;\n        const ex = f.nx + 2 * f.c * a * f.tx, ey = f.ny + 2 * f.c * a * f.ty;\n        gx += dv * ex;\n        gy += dv * ey;\n      }\n      if (gA > 0) {\n        const e = (qy - gy0 - 0.006 * qx * qx) / 12, b = gA * exp(-e * e), d = (-2 * e * b) / 12;\n        h += b;\n        gx += d * -0.012 * qx;\n        gy += d;\n      }\n      // Back from the cloth's coordinates to the panel's.\n      const hx = gx + gy * dydx, hy = gx * dxdy + gy;\n      // Normal and the fibre's tangent on the surface.\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), Nx = -hx * nl, Ny = -hy * nl, Nz = nl;\n      let Tx = FX, Ty = FY, Tz = FX * hx + FY * hy;\n      const tl = 1 / sqrt(Tx * Tx + Ty * Ty + Tz * Tz);\n      (Tx *= tl), (Ty *= tl), (Tz *= tl);\n      const NL = Nx * LX + Ny * LY + Nz * LZ;\n      const dif = cl((NL + 0.45) / 1.45, 0, 1);\n      // Ward-like lobe: narrow along the fibre, broad across it.\n      const TH = Tx * HX + Ty * HY + Tz * HZ;\n      const Bx = Ny * Tz - Nz * Ty, By = Nz * Tx - Nx * Tz, Bz = Nx * Ty - Ny * Tx;\n      const BH = Bx * HX + By * HY + Bz * HZ;\n      const spec = 0.45 * exp(-(TH * TH) / 0.012 - (BH * BH) / 0.35) + 0.5 * exp(-(TH * TH) / 0.06 - (BH * BH) / 0.6);\n      // The hollows get less of the light, and less of the sheen.\n      const ao = sm(-0.9 * tot, 0.6 * tot, h);\n      const shade = cl(0.05 + 0.7 * dif * (0.4 + 0.6 * ao) + 0.5 * spec * (0.25 + 0.75 * ao), 0, 1);\n      const o = ((shade * (RAMP - 1)) | 0) * 3;\n      let r = lut[o], gg = lut[o + 1], b = lut[o + 2];\n      if (gAlpha > 0) {\n        const al = qx * GX + qy * GY;\n        const vv = qx * MX + qy * MY + 0.0018 * al * al - 4 + lean * h;\n        const ggx = MX + 0.0036 * al * GX, ggy = MY + 0.0036 * al * GY;\n        const vx = ggx + ggy * dydx + lean * hx, vy = ggx * dxdy + ggy + lean * hy;\n        // Where a fold turns the line back on itself it passes behind the\n        // fold, so it fades out there instead of spreading into a blot.\n        const gl = sqrt(vx * vx + vy * vy), sd = vv / Math.max(0.3, gl), dist = Math.abs(sd), seen = gAlpha * sm(0.3, 0.7, gl);\n        // The line stands a little off the cloth and shades it on the side\n        // away from the light.\n        if (sd \u003c 0) {\n          const sh = 1 - 0.3 * seen * sm(hw + 0.5 + sw, hw - 0.5, dist);\n          (r *= sh), (gg *= sh), (b *= sh);\n        }\n        const cov = cl(hw + 0.5 - dist, 0, 1) * seen;\n        if (cov > 0) {\n          const NH = Nx * HX + Ny * HY + Nz * HZ;\n          const gs = NH > 0.95 ? ((NH - 0.95) / 0.05) ** 4 : 0;\n          const tw = 0.5 + 0.5 * sin(al * gf - gT * 2.2);\n          const glint = tw ** 24 + gs;\n          const lit = 0.62 + 0.38 * dif, gw = cl(glint, 0, 1);\n          const gr = 252 * lit + (255 - 252 * lit) * gw, ggr = 184 * lit + (246 - 184 * lit) * gw, gb = 58 * lit + (205 - 58 * lit) * gw;\n          r += (gr - r) * cov;\n          gg += (ggr - gg) * cov;\n          b += (gb - b) * cov;\n        }\n      }\n      display.setPixel(x, y, r, gg, b);\n    }\n  }\n}\n","layer":{"id":"layer-satin-fold","type":"code","name":"satin-fold","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Satin Fold\n// Family:  cosmetic\n// Idea:    A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after satin weave sheen and gold-foil packaging; the sheen is a fibre highlight (James Kajiya and Timothy Kay, 1989) with an anisotropic lobe (Gregory Ward, 1992)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1\n//\n// Knob 1: Hue. The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac.\n// Knob 2: Speed. How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half.\n// Knob 3: Folds. One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5.\n// Knob 4: Gold. The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon.\n// Buttons: K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.\n\nconst W = 64, H = 128;\nconst { sin, cos, sqrt, exp, floor, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The first fold family is a fan: the cloth is held at a point 160 LEDs\n// above the panel's middle and a little left, and 22 folds a radian hang from\n// it, tight at the top of the panel and wide at the bottom.\nconst PX = -14, PY = -160, FAN = 22, FAN_A = 6.5, RC = 160;\n// The others are straight waves: crest angle in degrees, wavelength in LEDs,\n// height in LEDs, bend of the crest, travel in radians a second at Speed 1,\n// swell phase. The last is pressed: its profile has sharp valleys. The first\n// row stands for the fan, which reads only its travel and phase from it.\nconst FOLDS = [\n  [0, 1, 0, 0, 0.42, 0.0],\n  [58, 46, 4.2, -0.004, -0.33, 2.1],\n  [100, 30, 2.6, 0.007, 0.55, 4.0],\n  [128, 24, 1.8, -0.008, -0.71, 1.2],\n  [76, 28, 1.4, 0.004, 0.62, 3.3],\n].map(([ang, lam, A, c, w, ph]) => {\n  const a = (ang * PI) / 180;\n  return { tx: cos(a), ty: sin(a), nx: -sin(a), ny: cos(a), k: (2 * PI) / lam, A, c, w, ph };\n});\n\n// Light from the left, a little above and in front; the eye straight on.\n// y runs down.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.6, -0.35, 0.72);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The floats of the satin weave run nearly across the panel, rising a little\n// to the right, so they cross the hanging folds and catch the light only\n// where they tilt square to the half vector.\nconst FX = 0.985, FY = -0.17;\n// The gold line in the cloth's own coordinates: through the middle, going\n// down to the right, bowed a little.\nconst [GX, GY] = (() => {\n  const l = Math.hypot(0.42, 1);\n  return [0.42 / l, 1 / l];\n})();\nconst MX = -GY, MY = GX;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The satin's ramp from the deepest hollow (0) to the brightest sheen (1):\n// the hue deep and saturated in the hollows, pale over the body, near white\n// in the streaks.\nconst RAMP = 256;\nfunction ramp(P) {\n  const hue = P.hue + 0.975;\n  for (let i = 0; i \u003c RAMP; i++) {\n    const s = i / (RAMP - 1);\n    let sat, val;\n    if (s \u003c 0.5) {\n      const u = s / 0.5;\n      sat = 0.46 + (0.18 - 0.46) * u;\n      val = 0.5 + (0.8 - 0.5) * u;\n    } else {\n      const u = (s - 0.5) / 0.5;\n      sat = 0.18 + (0.04 - 0.18) * u;\n      val = 0.8 + (0.97 - 0.8) * u;\n    }\n    hsv(hue - 0.015 * (1 - s), sat, val, P.lut, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = {\n    t: 0, clock: 0, hue: 0, speed: 2, folds: 1, gold: 0.06, gust: -1,\n    lut: new Float32Array(RAMP * 3), lutHue: NaN, cw: new Float32Array(W), cd: new Float32Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.folds = cl(k[2], 1, 5);\n  P.gold = cl(k[3], 0, 1);\n  P.t += d * P.speed;\n  P.clock += d;\n  if (P.gust >= 0) {\n    P.gust += d / 2.5;\n    if (P.gust >= 1) P.gust = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) P.gust = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) ramp(P);\n  const T = P.t, F = P.folds, lut = P.lut;\n  // Each family fades in over one step of Folds, and the whole cloth gets\n  // deeper as it does.\n  const depth = 0.75 + 0.18 * (F - 1);\n  const act = [];\n  for (let i = 0; i \u003c FOLDS.length; i++) {\n    const f = FOLDS[i], wgt = sm(0, 1, F - i);\n    if (wgt \u003c= 0) continue;\n    const swell = 0.72 + 0.28 * sin(0.37 * T + f.ph);\n    act.push({ ...f, A: (i ? f.A * swell : FAN_A) * wgt * depth, phase: f.w * T + f.ph, press: i === 4 });\n  }\n  const na = act.length, fan = act[0];\n  let tot = 0;\n  for (const f of act) tot += f.A;\n  // The gust: one ridge across the sheet that runs from the bottom up.\n  let gA = 0, gy0 = 0;\n  if (P.gust >= 0) {\n    gA = 5.5 * sin(PI * P.gust);\n    gy0 = 80 - 190 * P.gust;\n  }\n  const wa = 3.2;\n  // The panel sees the cloth a little from below, so a line on it shifts\n  // with the height of the cloth under it: 0.65 LED a LED of height at one\n  // fold family, less on the deep drapes.\n  const lean = 0.65 / (1 + 0.15 * (F - 1));\n  const g = P.gold, gAlpha = sm(0, 0.04, g), hw = 0.6 + 6 * g, sw = 1 + 2.5 * g;\n  const gf = 0.11 + 0.11 * g, gT = P.clock * (0.6 + 0.4 * P.speed);\n  // The warp's sideways part, one value a column.\n  const CW = P.cw, CD = P.cd;\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - 31.5) * 0.07 - T * 0.17 + 1.3;\n    CW[x] = wa * sin(u);\n    CD[x] = wa * 0.07 * cos(u);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const py = y - 63.5;\n    const s1 = sin(py * 0.045 + T * 0.23), c1 = cos(py * 0.045 + T * 0.23);\n    const dxdy = wa * 0.045 * c1;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5;\n      const dydx = CD[x];\n      const qx = px + wa * s1, qy = py + CW[x];\n      let h = 0, gx = 0, gy = 0;\n      {\n        // The fan: the fold phase goes with the angle round the point it\n        // hangs from, and leans with the distance. Its height grows as the\n        // square root of the distance, and a swell runs down it.\n        const dx = qx - PX, dy = qy - PY, r2 = dx * dx + dy * dy, r = sqrt(r2);\n        const th = FAN * Math.atan2(dx, dy) + 0.025 * r - fan.phase;\n        const sv = 0.045 * r - 0.5 * T, ms = 0.75 + 0.25 * sin(sv), rr = sqrt(r / RC);\n        const A = fan.A * rr * ms, dA = A / (2 * r) + fan.A * rr * 0.01125 * cos(sv);\n        const sn = sin(th), cs = cos(th);\n        h += A * sn;\n        const gr = dA * sn + A * cs * 0.025, ga = (A * cs * FAN) / r2;\n        gx += (gr * dx) / r + ga * dy;\n        gy += (gr * dy) / r - ga * dx;\n      }\n      for (let j = 1; j \u003c na; j++) {\n        const f = act[j];\n        const a = qx * f.tx + qy * f.ty, s = qx * f.nx + qy * f.ny + f.c * a * a;\n        const th = f.k * s - f.phase;\n        let v, dv;\n        if (f.press) {\n          // sqrt(sin^2 + e^2): round crests, sharp valleys.\n          const sn = sin(th), cs = cos(th), r = sqrt(sn * sn + 0.04);\n          v = f.A * (r - 0.6);\n          dv = (f.A * f.k * sn * cs) / r;\n        } else {\n          v = f.A * sin(th);\n          dv = f.A * f.k * cos(th);\n        }\n        h += v;\n        const ex = f.nx + 2 * f.c * a * f.tx, ey = f.ny + 2 * f.c * a * f.ty;\n        gx += dv * ex;\n        gy += dv * ey;\n      }\n      if (gA > 0) {\n        const e = (qy - gy0 - 0.006 * qx * qx) / 12, b = gA * exp(-e * e), d = (-2 * e * b) / 12;\n        h += b;\n        gx += d * -0.012 * qx;\n        gy += d;\n      }\n      // Back from the cloth's coordinates to the panel's.\n      const hx = gx + gy * dydx, hy = gx * dxdy + gy;\n      // Normal and the fibre's tangent on the surface.\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), Nx = -hx * nl, Ny = -hy * nl, Nz = nl;\n      let Tx = FX, Ty = FY, Tz = FX * hx + FY * hy;\n      const tl = 1 / sqrt(Tx * Tx + Ty * Ty + Tz * Tz);\n      (Tx *= tl), (Ty *= tl), (Tz *= tl);\n      const NL = Nx * LX + Ny * LY + Nz * LZ;\n      const dif = cl((NL + 0.45) / 1.45, 0, 1);\n      // Ward-like lobe: narrow along the fibre, broad across it.\n      const TH = Tx * HX + Ty * HY + Tz * HZ;\n      const Bx = Ny * Tz - Nz * Ty, By = Nz * Tx - Nx * Tz, Bz = Nx * Ty - Ny * Tx;\n      const BH = Bx * HX + By * HY + Bz * HZ;\n      const spec = 0.45 * exp(-(TH * TH) / 0.012 - (BH * BH) / 0.35) + 0.5 * exp(-(TH * TH) / 0.06 - (BH * BH) / 0.6);\n      // The hollows get less of the light, and less of the sheen.\n      const ao = sm(-0.9 * tot, 0.6 * tot, h);\n      const shade = cl(0.05 + 0.7 * dif * (0.4 + 0.6 * ao) + 0.5 * spec * (0.25 + 0.75 * ao), 0, 1);\n      const o = ((shade * (RAMP - 1)) | 0) * 3;\n      let r = lut[o], gg = lut[o + 1], b = lut[o + 2];\n      if (gAlpha > 0) {\n        const al = qx * GX + qy * GY;\n        const vv = qx * MX + qy * MY + 0.0018 * al * al - 4 + lean * h;\n        const ggx = MX + 0.0036 * al * GX, ggy = MY + 0.0036 * al * GY;\n        const vx = ggx + ggy * dydx + lean * hx, vy = ggx * dxdy + ggy + lean * hy;\n        // Where a fold turns the line back on itself it passes behind the\n        // fold, so it fades out there instead of spreading into a blot.\n        const gl = sqrt(vx * vx + vy * vy), sd = vv / Math.max(0.3, gl), dist = Math.abs(sd), seen = gAlpha * sm(0.3, 0.7, gl);\n        // The line stands a little off the cloth and shades it on the side\n        // away from the light.\n        if (sd \u003c 0) {\n          const sh = 1 - 0.3 * seen * sm(hw + 0.5 + sw, hw - 0.5, dist);\n          (r *= sh), (gg *= sh), (b *= sh);\n        }\n        const cov = cl(hw + 0.5 - dist, 0, 1) * seen;\n        if (cov > 0) {\n          const NH = Nx * HX + Ny * HY + Nz * HZ;\n          const gs = NH > 0.95 ? ((NH - 0.95) / 0.05) ** 4 : 0;\n          const tw = 0.5 + 0.5 * sin(al * gf - gT * 2.2);\n          const glint = tw ** 24 + gs;\n          const lit = 0.62 + 0.38 * dif, gw = cl(glint, 0, 1);\n          const gr = 252 * lit + (255 - 252 * lit) * gw, ggr = 184 * lit + (246 - 184 * lit) * gw, gb = 58 * lit + (205 - 58 * lit) * gw;\n          r += (gr - r) * cov;\n          gg += (ggr - gg) * cov;\n          b += (gb - b) * cov;\n        }\n      }\n      display.setPixel(x, y, r, gg, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half."},{"name":"Folds","min":1,"max":5,"about":"One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5."},{"name":"Gold","min":0,"max":1,"about":"The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon."}],"start":[0,2,1,0.06],"measures":{"motion":0.094,"detail":0.0124,"edges":0.0787,"complexity":1.2735,"coverage":1,"colour":0.1403,"drift":0.1604},"knobResponse":[0.1121,0.2232,0.0933,0.0521]},{"slug":"scheidegger-rivers","title":"Scheidegger Rivers","family":"line","round":34,"note":"체크무늬로 놓인 LED 마다 물을 왼쪽 아래나 오른쪽 아래로 무작위로 보내는 샤이데거의 강 그물이에요. 모인 물의 로그로 밝혀서 위의 실개천이 아래로 갈수록 굵은 줄기로 합쳐지고, 바닥의 출구마다 다른 색으로 물든 강을 따라 빗방울이 흘러내리며, 가끔 한 자리가 방향을 바꾸면 큰 강이 옆 유역으로 넘어가 옛 물길이 마르고 새 물길이 줄마다 차올라요.","idea":"Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.","buttons":"K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.","code":"// ===== Patternflow pattern =====\n// Title:   Scheidegger Rivers\n// Family:  line\n// Idea:    Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Scheidegger's river network model (Adrian Scheidegger, 1967), pattern round 34; its rivers are coalescing random walks, whose scaling limit is the Brownian web (Balint Toth and Wendelin Werner, 1998)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1\n//\n// Knob 1: Hue. Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale.\n// Knob 2: Speed. At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it.\n// Knob 3: Bias. The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way.\n// Knob 4: Capture. How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn.\n// Buttons: K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.\n\nconst W = 64, H = 128, SW = W / 2, NS = SW * H;\nconst { floor, min, max, log, exp, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Site s sits in row y = s / 32 at x = 2 (s % 32) + (y & 1): the LEDs with\n// x + y even. Its two neighbours below are x - 1 and x + 1 in row y + 1,\n// wrapping round the sides.\nconst SX = new Int16Array(NS), SY = new Int16Array(NS);\nconst DL = new Int32Array(NS), DR = new Int32Array(NS), UL = new Int32Array(NS), UR = new Int32Array(NS);\nconst siteAt = (x, y) => y * SW + (((x % W) + W) % W >> 1);\nfor (let s = 0; s \u003c NS; s++) {\n  const y = floor(s / SW), x = 2 * (s % SW) + (y & 1);\n  SX[s] = x;\n  SY[s] = y;\n  DL[s] = y \u003c H - 1 ? siteAt(x - 1, y + 1) : -1;\n  DR[s] = y \u003c H - 1 ? siteAt(x + 1, y + 1) : -1;\n  UL[s] = y > 0 ? siteAt(x - 1, y - 1) : -1;\n  UR[s] = y > 0 ? siteAt(x + 1, y - 1) : -1;\n}\nconst FMAX = 1500, LFMAX = log(FMAX);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0, cap: 0.06, warm: false, sweep: 0, flipAcc: 0, bigAcc: 0, rainAcc: 0,\n    u: new Float32Array(NS), dn: new Int32Array(NS), F: new Float32Array(NS), Q: new Float32Array(NS),\n    out: new Int16Array(NS), prev: new Int16Array(NS), ov: new Int32Array(SW * SW), col: new Int8Array(SW).fill(-1),\n    col2: new Int8Array(SW), ho: new Float32Array(NS), cum: new Float64Array(NS),\n    drops: [], Lv: new Float32Array(W * H), Hu: new Float32Array(W * H), Sa: new Float32Array(W * H),\n    Wd: new Float32Array(W * H), Dr: new Float32Array(W * H), c: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let s = 0; s \u003c NS; s++) S.u[s] = random();\n}\n\n// Each site drains right when its own random number is under 0.5 + 0.48 Bias.\nfunction route(S) {\n  const p = 0.5 + 0.48 * S.bias;\n  for (let s = 0; s \u003c NS; s++) S.dn[s] = DL[s] \u003c 0 ? -1 : S.u[s] \u003c p ? DR[s] : DL[s];\n}\n\n// The exact flux, row by row from the top: 1 for the site itself plus all\n// that drains into it.\nfunction flux(S) {\n  const F = S.F, dn = S.dn;\n  F.fill(1);\n  for (let s = 0; s \u003c NS - SW; s++) F[dn[s]] += F[s];\n  // Which outlet in the bottom row each site reaches, from the bottom up.\n  for (let s = NS - 1; s >= 0; s--) S.out[s] = dn[s] \u003c 0 ? s - (NS - SW) : S.out[dn[s]];\n}\n\n// The water on show moves one row per sweep: a rerouted river drains and the\n// new one fills from the site that changed downwards.\nfunction sweep(S) {\n  const Q = S.Q, dn = S.dn;\n  for (let s = NS - 1; s >= SW; s--) {\n    let q = 1;\n    const a = UL[s], b = UR[s];\n    if (dn[a] === s) q += Q[a];\n    if (dn[b] === s) q += Q[b];\n    Q[s] = q;\n  }\n}\n\n// Basin colours. A basin draining at least AMIN sites through its outlet\n// holds one of four hue steps; after the network changes, each new basin\n// takes the colour of the old basin it shares most sites with, and a basin\n// with none to take gets the step farthest from those in use.\nconst STEPS = [-0.1, 0, 0.1, 0.2], AMIN = 120;\nfunction basins(S) {\n  const ov = S.ov, F = S.F, B = NS - SW;\n  ov.fill(0);\n  for (let s = 0; s \u003c NS; s++) ov[S.prev[s] * SW + S.out[s]]++;\n  const pairs = [];\n  for (let i = 0; i \u003c SW; i++)\n    if (S.col[i] >= 0) for (let j = 0; j \u003c SW; j++) if (F[B + j] >= AMIN && ov[i * SW + j] > 0) pairs.push([ov[i * SW + j], i, j]);\n  pairs.sort((a, b) => b[0] - a[0]);\n  const col = S.col2.fill(-1), taken = new Uint8Array(SW);\n  for (const [, i, j] of pairs)\n    if (!taken[i] && col[j] \u003c 0) {\n      taken[i] = 1;\n      col[j] = S.col[i];\n    }\n  for (let j = 0; j \u003c SW; j++)\n    if (F[B + j] >= AMIN && col[j] \u003c 0) {\n      let best = 0, far = -1;\n      for (let k = 0; k \u003c STEPS.length; k++) {\n        let near = 9;\n        for (let m = 0; m \u003c SW; m++) if (col[m] >= 0) near = min(near, Math.abs(STEPS[k] - STEPS[col[m]]));\n        if (near > far) (far = near), (best = k);\n      }\n      col[j] = best;\n    }\n  S.col.set(col);\n  S.prev.set(S.out);\n}\n\n// How many rows the two paths out of site s, one through each neighbour\n// below, run apart before they join (or reach the bottom).\nfunction apart(S, s) {\n  let a = DL[s], b = DR[s], n = 0;\n  while (a >= 0 && a !== b) {\n    a = S.dn[a];\n    b = S.dn[b];\n    n++;\n  }\n  return n;\n}\n\n// A capture: site s turns to its other neighbour, with the Metropolis chance\n// that keeps every site draining right with chance p in the long run.\nfunction flip(S, s) {\n  const p = 0.5 + 0.48 * S.bias, right = S.u[s] \u003c p;\n  const want = right ? 1 - p : p;\n  if (random() * max(p, 1 - p) > want) return false;\n  S.u[s] = right ? p + (1 - p) * random() : p * random();\n  S.dn[s] = right ? DL[s] : DR[s];\n  return true;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2;\n  route(S);\n  flux(S);\n  // Small captures land on any site; large ones on a site picked in\n  // proportion to the flux through it, among those whose other way down\n  // runs at least 10 rows apart from the river it leaves.\n  S.flipAcc += d * sp * 150 * S.cap;\n  S.bigAcc += d * sp * 20 * S.cap;\n  let changed = false;\n  while (S.flipAcc >= 1) {\n    S.flipAcc -= 1;\n    changed = flip(S, floor(random() * (NS - SW))) || changed;\n  }\n  if (S.bigAcc >= 1) {\n    const cum = S.cum;\n    let acc = 0;\n    for (let s = 0; s \u003c NS; s++) cum[s] = acc += S.F[s];\n    while (S.bigAcc >= 1) {\n      S.bigAcc -= 1;\n      for (let tries = 0; tries \u003c 8; tries++) {\n        const r = random() * acc;\n        let lo = 0, hi = NS - 1;\n        while (lo \u003c hi) {\n          const m = (lo + hi) >> 1;\n          if (cum[m] \u003c r) lo = m + 1;\n          else hi = m;\n        }\n        if (lo >= NS - SW || apart(S, lo) \u003c 10) continue;\n        changed = flip(S, lo) || changed;\n        break;\n      }\n    }\n  }\n  if (changed) flux(S);\n  S.sweep += d * sp * 40;\n  while (S.sweep >= 1) {\n    S.sweep -= 1;\n    sweep(S);\n  }\n  const k = 1 - exp(-d * sp * 3);\n  basins(S);\n  for (let s = 0; s \u003c NS; s++) {\n    const c = S.col[S.out[s]];\n    if (c >= 0) S.ho[s] += (STEPS[c] - S.ho[s]) * k;\n  }\n\n  // Rain: drops land on random sites and run down the rivers, two LED steps\n  // a row (across, then down).\n  S.rainAcc += d * sp * 14;\n  while (S.rainAcc >= 1) {\n    S.rainAcc -= 1;\n    addDrop(S, floor(random() * (NS - 8 * SW)));\n  }\n  const v = d * sp * 32;\n  const drops = S.drops;\n  for (let i = drops.length - 1; i >= 0; i--) {\n    const D = drops[i];\n    D.pos += v;\n    while (D.pos >= 1) {\n      D.pos -= 1;\n      if (D.mid \u003c 0) {\n        const t = S.dn[D.s];\n        if (t \u003c 0) {\n          D.gone = true;\n          break;\n        }\n        D.mid = SY[D.s] * W + SX[t];\n        D.s = t;\n        D.trail.unshift(D.mid);\n      } else {\n        D.mid = -1;\n        D.trail.unshift(SY[D.s] * W + SX[D.s]);\n      }\n      if (D.trail.length > 8) D.trail.pop();\n    }\n    if (D.gone) drops.splice(i, 1);\n  }\n}\n\nfunction addDrop(S, s) {\n  S.drops.push({ s, mid: -1, pos: random(), trail: [SY[s] * W + SX[s]], gone: false });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], -1, 1);\n  S.cap = cl(k[3], 0, 1);\n  if (!S.warm) {\n    route(S);\n    flux(S);\n    S.Q.set(S.F);\n    S.prev.set(S.out);\n    basins(S);\n    for (let s = 0; s \u003c NS; s++) S.ho[s] = S.col[S.out[s]] >= 0 ? STEPS[S.col[S.out[s]]] : 0;\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let i = 0; i \u003c 260; i++) addDrop(S, floor(random() * 24 * SW));\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { Lv, Hu, Sa, Wd, Dr, Q } = S;\n  Lv.fill(0);\n  Wd.fill(0);\n  Dr.fill(0);\n  // Each site lights its own LED and the LED beside it on the side it drains\n  // to, which is the LED above the site it drains into: a river is a stair of\n  // LEDs, across then down, and two streams meeting make a T.\n  for (let s = 0; s \u003c NS; s++) {\n    const g = cl(log(Q[s]) / LFMAX, 0, 1), L = 30 + 225 * g ** 1.35;\n    const p = SY[s] * W + SX[s], h = S.hue + 0.52 + S.ho[s], sat = 0.85 - 0.45 * g;\n    const wd = 1 + 1.8 * cl((log(Q[s]) - log(30)) / (LFMAX - log(30)), 0, 1);\n    if (L > Lv[p]) (Lv[p] = L), (Hu[p] = h), (Sa[p] = sat), (Wd[p] = wd);\n    const t = S.dn[s];\n    if (t >= 0) {\n      const m = SY[s] * W + SX[t];\n      if (L > Lv[m]) (Lv[m] = L), (Hu[m] = h), (Sa[m] = sat), (Wd[m] = wd);\n    }\n  }\n  for (const D of S.drops)\n    D.trail.forEach((p, i) => {\n      Dr[p] = max(Dr[p], i \u003c 2 ? 1 : 0.85 ** (i - 1));\n    });\n  const out = S.c;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let L = Lv[p], h = Hu[p], sa = Sa[p];\n      // Wide rivers spill onto the LEDs beside them.\n      for (const dx of [-2, -1, 1, 2]) {\n        const q = y * W + ((x + dx + W) % W), w = Wd[q] - Math.abs(dx);\n        if (w > 0) {\n          const v = Lv[q] * min(1, w) * (Math.abs(dx) === 1 ? 0.8 : 0.55);\n          if (v > L) (L = v), (h = Hu[q]), (sa = Sa[q]);\n        }\n      }\n      const dr = Dr[p];\n      if (dr > 0) {\n        L = L + (255 - L) * dr;\n        sa *= 1 - 0.85 * dr;\n      }\n      hsv(h, sa, 1, out);\n      display.setPixel(x, y, round(out[0] * L), round(out[1] * L), round(out[2] * L));\n    }\n}\n","layer":{"id":"layer-scheidegger-rivers","type":"code","name":"scheidegger-rivers","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Scheidegger Rivers\n// Family:  line\n// Idea:    Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Scheidegger's river network model (Adrian Scheidegger, 1967), pattern round 34; its rivers are coalescing random walks, whose scaling limit is the Brownian web (Balint Toth and Wendelin Werner, 1998)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1\n//\n// Knob 1: Hue. Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale.\n// Knob 2: Speed. At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it.\n// Knob 3: Bias. The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way.\n// Knob 4: Capture. How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn.\n// Buttons: K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.\n\nconst W = 64, H = 128, SW = W / 2, NS = SW * H;\nconst { floor, min, max, log, exp, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Site s sits in row y = s / 32 at x = 2 (s % 32) + (y & 1): the LEDs with\n// x + y even. Its two neighbours below are x - 1 and x + 1 in row y + 1,\n// wrapping round the sides.\nconst SX = new Int16Array(NS), SY = new Int16Array(NS);\nconst DL = new Int32Array(NS), DR = new Int32Array(NS), UL = new Int32Array(NS), UR = new Int32Array(NS);\nconst siteAt = (x, y) => y * SW + (((x % W) + W) % W >> 1);\nfor (let s = 0; s \u003c NS; s++) {\n  const y = floor(s / SW), x = 2 * (s % SW) + (y & 1);\n  SX[s] = x;\n  SY[s] = y;\n  DL[s] = y \u003c H - 1 ? siteAt(x - 1, y + 1) : -1;\n  DR[s] = y \u003c H - 1 ? siteAt(x + 1, y + 1) : -1;\n  UL[s] = y > 0 ? siteAt(x - 1, y - 1) : -1;\n  UR[s] = y > 0 ? siteAt(x + 1, y - 1) : -1;\n}\nconst FMAX = 1500, LFMAX = log(FMAX);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0, cap: 0.06, warm: false, sweep: 0, flipAcc: 0, bigAcc: 0, rainAcc: 0,\n    u: new Float32Array(NS), dn: new Int32Array(NS), F: new Float32Array(NS), Q: new Float32Array(NS),\n    out: new Int16Array(NS), prev: new Int16Array(NS), ov: new Int32Array(SW * SW), col: new Int8Array(SW).fill(-1),\n    col2: new Int8Array(SW), ho: new Float32Array(NS), cum: new Float64Array(NS),\n    drops: [], Lv: new Float32Array(W * H), Hu: new Float32Array(W * H), Sa: new Float32Array(W * H),\n    Wd: new Float32Array(W * H), Dr: new Float32Array(W * H), c: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let s = 0; s \u003c NS; s++) S.u[s] = random();\n}\n\n// Each site drains right when its own random number is under 0.5 + 0.48 Bias.\nfunction route(S) {\n  const p = 0.5 + 0.48 * S.bias;\n  for (let s = 0; s \u003c NS; s++) S.dn[s] = DL[s] \u003c 0 ? -1 : S.u[s] \u003c p ? DR[s] : DL[s];\n}\n\n// The exact flux, row by row from the top: 1 for the site itself plus all\n// that drains into it.\nfunction flux(S) {\n  const F = S.F, dn = S.dn;\n  F.fill(1);\n  for (let s = 0; s \u003c NS - SW; s++) F[dn[s]] += F[s];\n  // Which outlet in the bottom row each site reaches, from the bottom up.\n  for (let s = NS - 1; s >= 0; s--) S.out[s] = dn[s] \u003c 0 ? s - (NS - SW) : S.out[dn[s]];\n}\n\n// The water on show moves one row per sweep: a rerouted river drains and the\n// new one fills from the site that changed downwards.\nfunction sweep(S) {\n  const Q = S.Q, dn = S.dn;\n  for (let s = NS - 1; s >= SW; s--) {\n    let q = 1;\n    const a = UL[s], b = UR[s];\n    if (dn[a] === s) q += Q[a];\n    if (dn[b] === s) q += Q[b];\n    Q[s] = q;\n  }\n}\n\n// Basin colours. A basin draining at least AMIN sites through its outlet\n// holds one of four hue steps; after the network changes, each new basin\n// takes the colour of the old basin it shares most sites with, and a basin\n// with none to take gets the step farthest from those in use.\nconst STEPS = [-0.1, 0, 0.1, 0.2], AMIN = 120;\nfunction basins(S) {\n  const ov = S.ov, F = S.F, B = NS - SW;\n  ov.fill(0);\n  for (let s = 0; s \u003c NS; s++) ov[S.prev[s] * SW + S.out[s]]++;\n  const pairs = [];\n  for (let i = 0; i \u003c SW; i++)\n    if (S.col[i] >= 0) for (let j = 0; j \u003c SW; j++) if (F[B + j] >= AMIN && ov[i * SW + j] > 0) pairs.push([ov[i * SW + j], i, j]);\n  pairs.sort((a, b) => b[0] - a[0]);\n  const col = S.col2.fill(-1), taken = new Uint8Array(SW);\n  for (const [, i, j] of pairs)\n    if (!taken[i] && col[j] \u003c 0) {\n      taken[i] = 1;\n      col[j] = S.col[i];\n    }\n  for (let j = 0; j \u003c SW; j++)\n    if (F[B + j] >= AMIN && col[j] \u003c 0) {\n      let best = 0, far = -1;\n      for (let k = 0; k \u003c STEPS.length; k++) {\n        let near = 9;\n        for (let m = 0; m \u003c SW; m++) if (col[m] >= 0) near = min(near, Math.abs(STEPS[k] - STEPS[col[m]]));\n        if (near > far) (far = near), (best = k);\n      }\n      col[j] = best;\n    }\n  S.col.set(col);\n  S.prev.set(S.out);\n}\n\n// How many rows the two paths out of site s, one through each neighbour\n// below, run apart before they join (or reach the bottom).\nfunction apart(S, s) {\n  let a = DL[s], b = DR[s], n = 0;\n  while (a >= 0 && a !== b) {\n    a = S.dn[a];\n    b = S.dn[b];\n    n++;\n  }\n  return n;\n}\n\n// A capture: site s turns to its other neighbour, with the Metropolis chance\n// that keeps every site draining right with chance p in the long run.\nfunction flip(S, s) {\n  const p = 0.5 + 0.48 * S.bias, right = S.u[s] \u003c p;\n  const want = right ? 1 - p : p;\n  if (random() * max(p, 1 - p) > want) return false;\n  S.u[s] = right ? p + (1 - p) * random() : p * random();\n  S.dn[s] = right ? DL[s] : DR[s];\n  return true;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2;\n  route(S);\n  flux(S);\n  // Small captures land on any site; large ones on a site picked in\n  // proportion to the flux through it, among those whose other way down\n  // runs at least 10 rows apart from the river it leaves.\n  S.flipAcc += d * sp * 150 * S.cap;\n  S.bigAcc += d * sp * 20 * S.cap;\n  let changed = false;\n  while (S.flipAcc >= 1) {\n    S.flipAcc -= 1;\n    changed = flip(S, floor(random() * (NS - SW))) || changed;\n  }\n  if (S.bigAcc >= 1) {\n    const cum = S.cum;\n    let acc = 0;\n    for (let s = 0; s \u003c NS; s++) cum[s] = acc += S.F[s];\n    while (S.bigAcc >= 1) {\n      S.bigAcc -= 1;\n      for (let tries = 0; tries \u003c 8; tries++) {\n        const r = random() * acc;\n        let lo = 0, hi = NS - 1;\n        while (lo \u003c hi) {\n          const m = (lo + hi) >> 1;\n          if (cum[m] \u003c r) lo = m + 1;\n          else hi = m;\n        }\n        if (lo >= NS - SW || apart(S, lo) \u003c 10) continue;\n        changed = flip(S, lo) || changed;\n        break;\n      }\n    }\n  }\n  if (changed) flux(S);\n  S.sweep += d * sp * 40;\n  while (S.sweep >= 1) {\n    S.sweep -= 1;\n    sweep(S);\n  }\n  const k = 1 - exp(-d * sp * 3);\n  basins(S);\n  for (let s = 0; s \u003c NS; s++) {\n    const c = S.col[S.out[s]];\n    if (c >= 0) S.ho[s] += (STEPS[c] - S.ho[s]) * k;\n  }\n\n  // Rain: drops land on random sites and run down the rivers, two LED steps\n  // a row (across, then down).\n  S.rainAcc += d * sp * 14;\n  while (S.rainAcc >= 1) {\n    S.rainAcc -= 1;\n    addDrop(S, floor(random() * (NS - 8 * SW)));\n  }\n  const v = d * sp * 32;\n  const drops = S.drops;\n  for (let i = drops.length - 1; i >= 0; i--) {\n    const D = drops[i];\n    D.pos += v;\n    while (D.pos >= 1) {\n      D.pos -= 1;\n      if (D.mid \u003c 0) {\n        const t = S.dn[D.s];\n        if (t \u003c 0) {\n          D.gone = true;\n          break;\n        }\n        D.mid = SY[D.s] * W + SX[t];\n        D.s = t;\n        D.trail.unshift(D.mid);\n      } else {\n        D.mid = -1;\n        D.trail.unshift(SY[D.s] * W + SX[D.s]);\n      }\n      if (D.trail.length > 8) D.trail.pop();\n    }\n    if (D.gone) drops.splice(i, 1);\n  }\n}\n\nfunction addDrop(S, s) {\n  S.drops.push({ s, mid: -1, pos: random(), trail: [SY[s] * W + SX[s]], gone: false });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], -1, 1);\n  S.cap = cl(k[3], 0, 1);\n  if (!S.warm) {\n    route(S);\n    flux(S);\n    S.Q.set(S.F);\n    S.prev.set(S.out);\n    basins(S);\n    for (let s = 0; s \u003c NS; s++) S.ho[s] = S.col[S.out[s]] >= 0 ? STEPS[S.col[S.out[s]]] : 0;\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let i = 0; i \u003c 260; i++) addDrop(S, floor(random() * 24 * SW));\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { Lv, Hu, Sa, Wd, Dr, Q } = S;\n  Lv.fill(0);\n  Wd.fill(0);\n  Dr.fill(0);\n  // Each site lights its own LED and the LED beside it on the side it drains\n  // to, which is the LED above the site it drains into: a river is a stair of\n  // LEDs, across then down, and two streams meeting make a T.\n  for (let s = 0; s \u003c NS; s++) {\n    const g = cl(log(Q[s]) / LFMAX, 0, 1), L = 30 + 225 * g ** 1.35;\n    const p = SY[s] * W + SX[s], h = S.hue + 0.52 + S.ho[s], sat = 0.85 - 0.45 * g;\n    const wd = 1 + 1.8 * cl((log(Q[s]) - log(30)) / (LFMAX - log(30)), 0, 1);\n    if (L > Lv[p]) (Lv[p] = L), (Hu[p] = h), (Sa[p] = sat), (Wd[p] = wd);\n    const t = S.dn[s];\n    if (t >= 0) {\n      const m = SY[s] * W + SX[t];\n      if (L > Lv[m]) (Lv[m] = L), (Hu[m] = h), (Sa[m] = sat), (Wd[m] = wd);\n    }\n  }\n  for (const D of S.drops)\n    D.trail.forEach((p, i) => {\n      Dr[p] = max(Dr[p], i \u003c 2 ? 1 : 0.85 ** (i - 1));\n    });\n  const out = S.c;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let L = Lv[p], h = Hu[p], sa = Sa[p];\n      // Wide rivers spill onto the LEDs beside them.\n      for (const dx of [-2, -1, 1, 2]) {\n        const q = y * W + ((x + dx + W) % W), w = Wd[q] - Math.abs(dx);\n        if (w > 0) {\n          const v = Lv[q] * min(1, w) * (Math.abs(dx) === 1 ? 0.8 : 0.55);\n          if (v > L) (L = v), (h = Hu[q]), (sa = Sa[q]);\n        }\n      }\n      const dr = Dr[p];\n      if (dr > 0) {\n        L = L + (255 - L) * dr;\n        sa *= 1 - 0.85 * dr;\n      }\n      hsv(h, sa, 1, out);\n      display.setPixel(x, y, round(out[0] * L), round(out[1] * L), round(out[2] * L));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it."},{"name":"Bias","min":-1,"max":1,"about":"The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way."},{"name":"Capture","min":0,"max":1,"about":"How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn."}],"start":[0,2,0,0.06],"measures":{"motion":0.094,"detail":0.1271,"edges":0.515,"complexity":1.5978,"coverage":0.922,"colour":0.2023,"drift":0.0432},"knobResponse":[0.1672,0.0593,0.2285,0.1968]},{"slug":"schwarz-lantern","title":"Schwarz Lantern","family":"geometry","round":36,"note":"꼭짓점이 모두 원기둥 위에 있는 삼각형 랜턴이 패널 높이만큼 서서 돌고, 띠가 3개에서 40개로 늘었다 줄어요. 접힐수록 아코디언처럼 반짝이고, 왼쪽 막대가 넓이를 원기둥의 1.88배까지 올려요. K3 은 한 고리의 꼭짓점 수를 5에서 12로 바꿔 같은 띠 40개를 매끈한 기둥으로 남기고, K1 을 누르면 단번에 가장 구겨진 꼴로 접혔다가 천천히 풀려요.","idea":"A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.","buttons":"K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.","code":"// ===== Patternflow pattern =====\n// Title:   Schwarz Lantern\n// Family:  geometry\n// Idea:    A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schwarz lantern (Hermann Schwarz, 1880), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1\n//\n// Knob 1: Hue. The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round.\n// Knob 2: Speed. At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long.\n// Knob 3: Sides. Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves.\n// Knob 4: Light. The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep.\n// Buttons: K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.\n\nconst W = 64, H = 128, SS = 2, SW = W * SS, SH = H * SS, SN = SW * SH;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, log, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The cylinder: radius R and height HC in LEDs, its axis at column CX, seen\n// from EL radians above. The bands run from MMIN to MMAX.\nconst R = 26, HC = 114, CX = 34.5, EL = 0.2, MMIN = 3, MMAX = 40, NMAX = 12;\n// The gauge: the lantern's area over the cylinder's, a bar up from row G0 at\n// the left edge, GPX LEDs to the unit, with a mark at 1.\nconst G0 = 125, GPX = 44;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const V = (MMAX + 2) * NMAX;\n  params.s = {\n    hue: 0, speed: 2, n: 5, light: 0.06, spin: 0, sweep: 2.2, snap: -1, mu: MMIN, area: 1,\n    ox: new Float32Array(V), oy: new Float32Array(V), oz: new Float32Array(V),\n    vx: new Float32Array(V), vy: new Float32Array(V), vz: new Float32Array(V),\n    zb: new Float32Array(SN), cr: new Float32Array(SN), cg: new Float32Array(SN), cb: new Float32Array(SN), col: new Float32Array(3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = Math.round(cl(k[2], 5, NMAX));\n  S.light = cl(k[3], 0, 1);\n  S.spin += d * S.speed * 0.12;\n  S.sweep += d * S.speed * 0.16;\n  if (S.snap >= 0) {\n    S.snap += d;\n    if (S.snap > 4.6) S.snap = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.snap = S.snap \u003c 0 ? 0 : min(S.snap, 0.6);\n  // The bands: MMIN to MMAX and back, evenly in log, lingering at both ends.\n  const u = 0.5 - 0.5 * cos(S.sweep);\n  let mu = exp(log(MMIN) + log(MMAX / MMIN) * u);\n  if (S.snap >= 0) {\n    const e = S.snap \u003c 0.6 ? sm(S.snap / 0.6) : 1 - sm((S.snap - 2.6) / 2);\n    mu = exp(log(mu) + (log(MMAX) - log(mu)) * e);\n  }\n  S.mu = mu;\n}\n\n// Rasterise one triangle into the supersampled buffers, flat coloured, row\n// by row: on each row every edge bounds the run of samples on one side.\nfunction tri(S, ax, ay, az, bx, by, bz, cx, cy, cz, r, g, b) {\n  const { zb, cr, cg, cb } = S;\n  const det = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);\n  if (abs(det) \u003c 1e-6) return;\n  // Depth as a plane over the screen.\n  const dzx = ((bz - az) * (cy - ay) - (cz - az) * (by - ay)) / det;\n  const dzy = ((cz - az) * (bx - ax) - (bz - az) * (cx - ax)) / det;\n  const s = det > 0 ? 1 : -1;\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(SH - 1, floor(max(ay, by, cy) - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 0, xr = SW - 1;\n    for (let e = 0; e \u003c 3; e++) {\n      const x0 = e === 0 ? ax : e === 1 ? bx : cx, y0e = e === 0 ? ay : e === 1 ? by : cy;\n      const x1 = e === 0 ? bx : e === 1 ? cx : ax, y1e = e === 0 ? by : e === 1 ? cy : ay;\n      // Inside when s ((x1 - x0)(py - y0) - (y1 - y0)(px - x0)) >= 0, linear in px.\n      const A = -s * (y1e - y0e), B = s * ((x1 - x0) * (py - y0e) + (y1e - y0e) * x0);\n      if (abs(A) \u003c 1e-9) {\n        if (B \u003c 0) xr = -1;\n      } else if (A > 0) xl = max(xl, ceil(-B / A - 0.5));\n      else xr = min(xr, floor(-B / A - 0.5));\n    }\n    for (let x = xl; x \u003c= xr; x++) {\n      const z = az + dzx * (x + 0.5 - ax) + dzy * (py - ay), p = y * SW + x;\n      if (z \u003c zb[p]) {\n        zb[p] = z;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ox, oy, oz, vx, vy, vz, zb, cr, cg, cb, col } = S;\n  const n = S.n, mu = S.mu, K = ceil(mu - 1e-6);\n  const ce = cos(EL), se = sin(EL), cxs = CX * SS, cys = 64 * SS;\n  const ct = cos(S.spin), st = sin(S.spin);\n  // Ring k holds n corners at angles (2 pi j + pi k) / n, so each ring is\n  // turned pi / n from the last, at height k h / mu, the last held at the\n  // top: at a whole mu this is the lantern with mu bands, and between two\n  // whole values the top band opens from flat to full height.\n  for (let k = 0; k \u003c= K; k++) {\n    const y = min(HC, (k * HC) / mu);\n    for (let j = 0; j \u003c n; j++) {\n      const a = (TAU * j + PI * k) / n, x = R * cos(a), z = R * sin(a), o = k * n + j;\n      ox[o] = x;\n      oy[o] = y;\n      oz[o] = z;\n      // Turn about the axis, then look down by EL.\n      const xr = x * ct + z * st, zr = -x * st + z * ct, yc = y - HC / 2;\n      vx[o] = cxs + SS * xr;\n      vy[o] = cys - SS * (yc * ce + zr * se);\n      vz[o] = -yc * se + zr * ce;\n    }\n  }\n  zb.fill(1e9);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  // The light from the front left, its height set by K4: 44 degrees above\n  // at the opening, level at 0.5, 50 below at 1. The eye looks along +z.\n  const le = 0.87 - 1.74 * S.light, Lx = -0.55 * cos(le), Ly = sin(le), Lz = -0.83 * cos(le);\n  const Hx = Lx, Hy = Ly, Hz = Lz - 1, Hn = 1 / sqrt(Hx * Hx + Hy * Hy + Hz * Hz);\n  // The half vector of a second light high above and behind, for the\n  // glints off deep folds.\n  const Gx = 0.25, Gy = 0.8, Gz = -0.45, Gn = 1 / sqrt(Gx * Gx + Gy * Gy + Gz * Gz);\n  const h0 = S.hue + 0.55;\n  let area = 0;\n  for (let k = 0; k \u003c K; k++)\n    for (let j = 0; j \u003c n; j++)\n      for (let t = 0; t \u003c 2; t++) {\n        // t = 0: base on ring k, apex on ring k + 1 between the base's ends.\n        // t = 1: base on ring k + 1, apex on ring k between its ends.\n        const i0 = t === 0 ? k * n + j : (k + 1) * n + ((j + n - 1) % n);\n        const i1 = t === 0 ? k * n + ((j + 1) % n) : (k + 1) * n + j;\n        const i2 = t === 0 ? (k + 1) * n + j : k * n + j;\n        const ux = ox[i1] - ox[i0], uy = oy[i1] - oy[i0], uz = oz[i1] - oz[i0];\n        const wx = ox[i2] - ox[i0], wy = oy[i2] - oy[i0], wz = oz[i2] - oz[i0];\n        let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n        const nl = sqrt(nx * nx + ny * ny + nz * nz);\n        area += nl / 2;\n        if (nl \u003c 1e-9) continue;\n        (nx /= nl), (ny /= nl), (nz /= nl);\n        // Point the normal out of the cylinder.\n        if (nx * (ox[i0] + ox[i1] + ox[i2]) + nz * (oz[i0] + oz[i1] + oz[i2]) \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n        const rx = nx * ct + nz * st, rz0 = -nx * st + nz * ct;\n        const ry = ny * ce + rz0 * se, rz = -ny * se + rz0 * ce;\n        // Outside faces turn toward the eye; the inside shows through the top.\n        const out = rz \u003c 0, sx = out ? rx : -rx, sy = out ? ry : -ry, sz = out ? rz : -rz;\n        const dif = max(0, sx * Lx + sy * Ly + sz * Lz);\n        let lit, spec = 0;\n        if (out) {\n          const hv = max(0, (sx * Hx + sy * Hy + sz * Hz) * Hn), gv = max(0, (sx * Gx + sy * Gy + sz * Gz) * Gn);\n          spec = hv ** 40 * 0.6 + gv ** 40;\n          hsv(h0 + 0.1 * ny, 0.85 - 0.1 * abs(ny), 1, col, 0);\n          lit = 0.16 + 0.84 * dif;\n        } else {\n          hsv(h0 + 0.12, 0.7, 1, col, 0);\n          lit = 0.1 + 0.3 * dif;\n        }\n        tri(S, vx[i0], vy[i0], vz[i0], vx[i1], vy[i1], vz[i1], vx[i2], vy[i2], vz[i2], col[0] * lit + spec, col[1] * lit + spec, col[2] * lit + spec);\n      }\n  // Summed from the triangles themselves; at whole mu it equals\n  // A = 2 m n r sin(pi/n) sqrt((h/m)^2 + r^2 (1 - cos(pi/n))^2).\n  S.area = area / (TAU * R * HC);\n\n  const f = 255 / (SS * SS);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0;\n      for (let dy = 0; dy \u003c SS; dy++)\n        for (let dx = 0; dx \u003c SS; dx++) {\n          const p = (y * SS + dy) * SW + x * SS + dx;\n          r += cr[p];\n          g += cg[p];\n          b += cb[p];\n        }\n      // The gauge: a two-LED bar up the left edge, and a mark at 1, where\n      // the lantern's area would equal the cylinder's.\n      if ((x === 1 || x === 2) && y > G0 - S.area * GPX && y \u003c= G0) r = g = b = 190 / f;\n      if (x \u003c 5 && y === G0 - GPX) r = g = b = 255 / f;\n      display.setPixel(x, y, cl(r * f, 0, 255), cl(g * f, 0, 255), cl(b * f, 0, 255));\n    }\n}\n","layer":{"id":"layer-schwarz-lantern","type":"code","name":"schwarz-lantern","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Schwarz Lantern\n// Family:  geometry\n// Idea:    A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schwarz lantern (Hermann Schwarz, 1880), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1\n//\n// Knob 1: Hue. The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round.\n// Knob 2: Speed. At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long.\n// Knob 3: Sides. Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves.\n// Knob 4: Light. The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep.\n// Buttons: K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.\n\nconst W = 64, H = 128, SS = 2, SW = W * SS, SH = H * SS, SN = SW * SH;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, log, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The cylinder: radius R and height HC in LEDs, its axis at column CX, seen\n// from EL radians above. The bands run from MMIN to MMAX.\nconst R = 26, HC = 114, CX = 34.5, EL = 0.2, MMIN = 3, MMAX = 40, NMAX = 12;\n// The gauge: the lantern's area over the cylinder's, a bar up from row G0 at\n// the left edge, GPX LEDs to the unit, with a mark at 1.\nconst G0 = 125, GPX = 44;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const V = (MMAX + 2) * NMAX;\n  params.s = {\n    hue: 0, speed: 2, n: 5, light: 0.06, spin: 0, sweep: 2.2, snap: -1, mu: MMIN, area: 1,\n    ox: new Float32Array(V), oy: new Float32Array(V), oz: new Float32Array(V),\n    vx: new Float32Array(V), vy: new Float32Array(V), vz: new Float32Array(V),\n    zb: new Float32Array(SN), cr: new Float32Array(SN), cg: new Float32Array(SN), cb: new Float32Array(SN), col: new Float32Array(3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = Math.round(cl(k[2], 5, NMAX));\n  S.light = cl(k[3], 0, 1);\n  S.spin += d * S.speed * 0.12;\n  S.sweep += d * S.speed * 0.16;\n  if (S.snap >= 0) {\n    S.snap += d;\n    if (S.snap > 4.6) S.snap = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.snap = S.snap \u003c 0 ? 0 : min(S.snap, 0.6);\n  // The bands: MMIN to MMAX and back, evenly in log, lingering at both ends.\n  const u = 0.5 - 0.5 * cos(S.sweep);\n  let mu = exp(log(MMIN) + log(MMAX / MMIN) * u);\n  if (S.snap >= 0) {\n    const e = S.snap \u003c 0.6 ? sm(S.snap / 0.6) : 1 - sm((S.snap - 2.6) / 2);\n    mu = exp(log(mu) + (log(MMAX) - log(mu)) * e);\n  }\n  S.mu = mu;\n}\n\n// Rasterise one triangle into the supersampled buffers, flat coloured, row\n// by row: on each row every edge bounds the run of samples on one side.\nfunction tri(S, ax, ay, az, bx, by, bz, cx, cy, cz, r, g, b) {\n  const { zb, cr, cg, cb } = S;\n  const det = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);\n  if (abs(det) \u003c 1e-6) return;\n  // Depth as a plane over the screen.\n  const dzx = ((bz - az) * (cy - ay) - (cz - az) * (by - ay)) / det;\n  const dzy = ((cz - az) * (bx - ax) - (bz - az) * (cx - ax)) / det;\n  const s = det > 0 ? 1 : -1;\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(SH - 1, floor(max(ay, by, cy) - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 0, xr = SW - 1;\n    for (let e = 0; e \u003c 3; e++) {\n      const x0 = e === 0 ? ax : e === 1 ? bx : cx, y0e = e === 0 ? ay : e === 1 ? by : cy;\n      const x1 = e === 0 ? bx : e === 1 ? cx : ax, y1e = e === 0 ? by : e === 1 ? cy : ay;\n      // Inside when s ((x1 - x0)(py - y0) - (y1 - y0)(px - x0)) >= 0, linear in px.\n      const A = -s * (y1e - y0e), B = s * ((x1 - x0) * (py - y0e) + (y1e - y0e) * x0);\n      if (abs(A) \u003c 1e-9) {\n        if (B \u003c 0) xr = -1;\n      } else if (A > 0) xl = max(xl, ceil(-B / A - 0.5));\n      else xr = min(xr, floor(-B / A - 0.5));\n    }\n    for (let x = xl; x \u003c= xr; x++) {\n      const z = az + dzx * (x + 0.5 - ax) + dzy * (py - ay), p = y * SW + x;\n      if (z \u003c zb[p]) {\n        zb[p] = z;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ox, oy, oz, vx, vy, vz, zb, cr, cg, cb, col } = S;\n  const n = S.n, mu = S.mu, K = ceil(mu - 1e-6);\n  const ce = cos(EL), se = sin(EL), cxs = CX * SS, cys = 64 * SS;\n  const ct = cos(S.spin), st = sin(S.spin);\n  // Ring k holds n corners at angles (2 pi j + pi k) / n, so each ring is\n  // turned pi / n from the last, at height k h / mu, the last held at the\n  // top: at a whole mu this is the lantern with mu bands, and between two\n  // whole values the top band opens from flat to full height.\n  for (let k = 0; k \u003c= K; k++) {\n    const y = min(HC, (k * HC) / mu);\n    for (let j = 0; j \u003c n; j++) {\n      const a = (TAU * j + PI * k) / n, x = R * cos(a), z = R * sin(a), o = k * n + j;\n      ox[o] = x;\n      oy[o] = y;\n      oz[o] = z;\n      // Turn about the axis, then look down by EL.\n      const xr = x * ct + z * st, zr = -x * st + z * ct, yc = y - HC / 2;\n      vx[o] = cxs + SS * xr;\n      vy[o] = cys - SS * (yc * ce + zr * se);\n      vz[o] = -yc * se + zr * ce;\n    }\n  }\n  zb.fill(1e9);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  // The light from the front left, its height set by K4: 44 degrees above\n  // at the opening, level at 0.5, 50 below at 1. The eye looks along +z.\n  const le = 0.87 - 1.74 * S.light, Lx = -0.55 * cos(le), Ly = sin(le), Lz = -0.83 * cos(le);\n  const Hx = Lx, Hy = Ly, Hz = Lz - 1, Hn = 1 / sqrt(Hx * Hx + Hy * Hy + Hz * Hz);\n  // The half vector of a second light high above and behind, for the\n  // glints off deep folds.\n  const Gx = 0.25, Gy = 0.8, Gz = -0.45, Gn = 1 / sqrt(Gx * Gx + Gy * Gy + Gz * Gz);\n  const h0 = S.hue + 0.55;\n  let area = 0;\n  for (let k = 0; k \u003c K; k++)\n    for (let j = 0; j \u003c n; j++)\n      for (let t = 0; t \u003c 2; t++) {\n        // t = 0: base on ring k, apex on ring k + 1 between the base's ends.\n        // t = 1: base on ring k + 1, apex on ring k between its ends.\n        const i0 = t === 0 ? k * n + j : (k + 1) * n + ((j + n - 1) % n);\n        const i1 = t === 0 ? k * n + ((j + 1) % n) : (k + 1) * n + j;\n        const i2 = t === 0 ? (k + 1) * n + j : k * n + j;\n        const ux = ox[i1] - ox[i0], uy = oy[i1] - oy[i0], uz = oz[i1] - oz[i0];\n        const wx = ox[i2] - ox[i0], wy = oy[i2] - oy[i0], wz = oz[i2] - oz[i0];\n        let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n        const nl = sqrt(nx * nx + ny * ny + nz * nz);\n        area += nl / 2;\n        if (nl \u003c 1e-9) continue;\n        (nx /= nl), (ny /= nl), (nz /= nl);\n        // Point the normal out of the cylinder.\n        if (nx * (ox[i0] + ox[i1] + ox[i2]) + nz * (oz[i0] + oz[i1] + oz[i2]) \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n        const rx = nx * ct + nz * st, rz0 = -nx * st + nz * ct;\n        const ry = ny * ce + rz0 * se, rz = -ny * se + rz0 * ce;\n        // Outside faces turn toward the eye; the inside shows through the top.\n        const out = rz \u003c 0, sx = out ? rx : -rx, sy = out ? ry : -ry, sz = out ? rz : -rz;\n        const dif = max(0, sx * Lx + sy * Ly + sz * Lz);\n        let lit, spec = 0;\n        if (out) {\n          const hv = max(0, (sx * Hx + sy * Hy + sz * Hz) * Hn), gv = max(0, (sx * Gx + sy * Gy + sz * Gz) * Gn);\n          spec = hv ** 40 * 0.6 + gv ** 40;\n          hsv(h0 + 0.1 * ny, 0.85 - 0.1 * abs(ny), 1, col, 0);\n          lit = 0.16 + 0.84 * dif;\n        } else {\n          hsv(h0 + 0.12, 0.7, 1, col, 0);\n          lit = 0.1 + 0.3 * dif;\n        }\n        tri(S, vx[i0], vy[i0], vz[i0], vx[i1], vy[i1], vz[i1], vx[i2], vy[i2], vz[i2], col[0] * lit + spec, col[1] * lit + spec, col[2] * lit + spec);\n      }\n  // Summed from the triangles themselves; at whole mu it equals\n  // A = 2 m n r sin(pi/n) sqrt((h/m)^2 + r^2 (1 - cos(pi/n))^2).\n  S.area = area / (TAU * R * HC);\n\n  const f = 255 / (SS * SS);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0;\n      for (let dy = 0; dy \u003c SS; dy++)\n        for (let dx = 0; dx \u003c SS; dx++) {\n          const p = (y * SS + dy) * SW + x * SS + dx;\n          r += cr[p];\n          g += cg[p];\n          b += cb[p];\n        }\n      // The gauge: a two-LED bar up the left edge, and a mark at 1, where\n      // the lantern's area would equal the cylinder's.\n      if ((x === 1 || x === 2) && y > G0 - S.area * GPX && y \u003c= G0) r = g = b = 190 / f;\n      if (x \u003c 5 && y === G0 - GPX) r = g = b = 255 / f;\n      display.setPixel(x, y, cl(r * f, 0, 255), cl(g * f, 0, 255), cl(b * f, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long."},{"name":"Sides","min":5,"max":12,"about":"Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves."},{"name":"Light","min":0,"max":1,"about":"The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep."}],"start":[0,2,5,0.06],"measures":{"motion":2.2095,"detail":0.1257,"edges":0.8296,"complexity":0.2813,"coverage":0.7377,"colour":0.3317,"drift":0.1973},"knobResponse":[0.2726,0.2005,0.2242,0.2083]},{"slug":"searchlights","title":"Searchlights","family":"light","round":7,"note":"밤 도시의 지붕 뒤에서 탐조등 세 대가 가장자리가 또렷한 빛기둥을 천천히 휘둘러요. 기둥 둘이 겹친 자리는 하얗게 타고, K1 을 누르면 하늘을 가로지르는 비행기를 모든 기둥이 붙잡았다가 놓아줘요.","idea":"Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.","buttons":"K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.","code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","layer":{"id":"layer-searchlights","type":"code","name":"searchlights","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the lamps, starting from the cold blue-white of a xenon arc."},{"name":"Sweep","min":0.2,"max":4,"about":"How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds."},{"name":"Lights","min":3,"max":7,"about":"How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out."},{"name":"Haze","min":0,"max":1,"about":"How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky."}],"start":[0,2,3,0.06],"measures":{"motion":0.1662,"detail":0.0601,"edges":0.9751,"complexity":0.5201,"coverage":0.2833,"colour":0.1361,"drift":0.3569},"knobResponse":[0.0557,0.2929,0.2085,0.0855]},{"slug":"senbazuru","title":"Senbazuru","family":"paper","round":22,"note":"붉은 옻칠 고리에 실로 꿴 종이학이 줄줄이 매달려 금박 학 아래로 주황에서 초록, 파랑을 지나 보라와 분홍까지 띠를 이루고, 실 끝에는 금 구슬과 비단 술이 달려요. 어두운 절 방에 외풍이 불면 줄이 흔들리고 학이 실을 축으로 돌면서 접힌 면이 하나씩 등불을 받아 번쩍여요. K1 을 누르면 돌풍이 불어 학 하나가 떨어져 나뭇잎처럼 바닥으로 내려앉아요.","idea":"Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.","buttons":"K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-senbazuru","type":"code","name":"senbazuru","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow."},{"name":"Breeze","min":0.2,"max":3,"about":"How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin."},{"name":"Strands","min":8,"max":16,"about":"How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them."},{"name":"Light","min":0,"max":1,"about":"Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it."}],"start":[0,2,8,0.06],"measures":{"motion":0.5463,"detail":0.1059,"edges":0.4439,"complexity":2.0626,"coverage":0.7211,"colour":0.2483,"drift":0.1023},"knobResponse":[0.0684,0.1034,0.1073,0.1606]},{"slug":"sequins","title":"Sequins","family":"textile","round":23,"note":"뒤집히는 스팽글을 촘촘히 단 쿠션이 패널을 채워요. 은빛 비늘이 엇갈린 줄로 겹쳐 있고, 보이지 않는 손끝이 지나가면 스팽글이 차례로 모서리를 보이며 넘어가 하트, 별, 고양이 얼굴, 번개, 파도를 분홍 면으로 그려요. 손바닥이 위에서 아래로 쓸면 다시 은빛이 돼요.","idea":"A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.","buttons":"K1 tap sweeps the palm down the cushion now and the next drawing starts.","code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","layer":{"id":"layer-sequins","type":"code","name":"sequins","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower."},{"name":"Drawing","min":0,"max":4,"about":"What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.1482,"detail":0.3266,"edges":0.6744,"complexity":1.7886,"coverage":0.647,"colour":0.0886,"drift":0.2495},"knobResponse":[0.0553,0.0492,0.2354,0.1678]},{"slug":"serum-fingers","title":"Serum Fingers","family":"cosmetic","round":38,"note":"유리판 두 장 사이 진한 크림에 묽은 세럼을 밑에서 밀어 넣으면, 둥근 손가락이 부풀고 갈라지며 위로 다투어 올라가요. LED 는 세럼이 닿을 때 한 번만 바뀌고, 한 손가락이 꼭대기에 닿으면 크림이 가는 손가락부터 다시 덮고 새로 밀어요. K3 은 표면 장력을 낮춰 굵은 손가락 셋을 가는 손가락 열둘로 바꾸고, K1 을 누르면 크림이 바로 다시 덮어요.","idea":"A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.","buttons":"K1 tap: the cream closes back now and a new press begins.","code":"// ===== Patternflow pattern =====\n// Title:   Serum Fingers\n// Family:  cosmetic\n// Idea:    A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after a thin serum pressed into thick cream between two glass plates (Saffman-Taylor viscous fingering, Philip Saffman and Geoffrey Taylor, 1958, in a Hele-Shaw cell, Henry Selby Hele-Shaw, 1898)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in.\n// Knob 2: Speed. At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster.\n// Knob 3: Fingers. Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press.\n// Knob 4: Inlet. Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press.\n// Buttons: K1 tap: the cream closes back now and a new press begins.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, cos, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Serum pressed in, in LEDs of area a second at Speed 2.\nconst Q0 = 580;\n// A fresh run opens with the first PRE seconds of a press already in.\nconst PRE = 0.6;\n// The cream gives way at a front LED as the pressure drop across it to the\n// power ETA, times the roughness of the glass there, times 1 + SIG phi, where\n// phi is how much more of the disc round it is serum than at a flat front:\n// below 0 at a fingertip, which is held back, above 0 in a crevice, which is\n// filled up to CAP times faster. That is the surface tension that keeps the\n// fingers round. SIG is for Fingers 0.\nconst ETA = 0.7, SIG = 2, CAP = 1.6;\n// Gauss-Seidel sweeps of the pressure each frame, over-relaxed.\nconst SWEEPS = 12, OMEGA = 1.9;\n// The disc the curvature is read over: cells within RC of a front cell. A\n// flat front fills PHI0 of it with serum.\nconst RC = 3.2;\nconst DISC = [];\nfor (let dy = -3; dy \u003c= 3; dy++) for (let dx = -3; dx \u003c= 3; dx++) if (dx * dx + dy * dy \u003c= RC * RC) DISC.push(dx, dy);\nlet PHI0 = 0;\n{\n  let a = 0, b = 0;\n  for (let k = 0; k \u003c DISC.length; k += 2) {\n    b++;\n    if (DISC[k + 1] \u003c 0) a++;\n  }\n  PHI0 = a / b;\n}\n// Opening hue: aqua serum.\nconst H0 = 0.5;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, fingers: 0, inlet: 0, sigma: SIG, begun: false,\n    st: new Uint8Array(N), fill: new Float32Array(N), P: new Float32Array(N),\n    eta: new Float32Array(N), phi: new Float32Array(N), band: new Float32Array(N), fill0: new Float32Array(N), dist: new Float32Array(N),\n    seed: new Uint8Array(N), tex: new Float32Array(N), front: new Int32Array(N), nf: 0,\n    vol: 0, mode: 0, timer: 0, maxd: 1,\n    A: new Float32Array(4 * N), T: new Float32Array(4 * N), ser: [0, 0, 0], pale: [0, 0, 0], cream: [0, 0, 0],\n  };\n  const S = params.s;\n  // The cream's own static mottle, a few soft lumps.\n  const lumps = [];\n  for (let k = 0; k \u003c 14; k++) lumps.push([random() * W, random() * H, 6 + random() * 14, random() - 0.5]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v = 0;\n      for (const [lx, ly, r, a] of lumps) v += a * exp(-((x - lx) ** 2 + (y - ly) ** 2) / (r * r));\n      S.tex[y * W + x] = v;\n    }\n}\n\n// A fresh press: the inlet filled, the rest cream, new roughness in the glass.\nfunction fresh(S) {\n  const { st, fill, P, eta, band, seed } = S;\n  st.fill(0);\n  fill.fill(0);\n  seed.fill(0);\n  // The inlet: a slot along the whole bottom at Inlet 0, narrowing to a half\n  // disc 5 LEDs across at the bottom centre at 1, its lip rounded at each\n  // end. Along the slot the lip is waved, from 3 waves across the panel at\n  // Fingers -1 to 12 at 1, so the fingers start at the width they would grow.\n  const half = 32 - 30 * S.inlet, RE = 2.6, nb = round(6 * 2 ** S.fingers), ph = random() * 2 * PI, amps = [];\n  for (let k = 0; k \u003c 16; k++) amps.push(2 + 4 * random());\n  for (let y = H - 6; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = max(0, abs(x + 0.5 - W / 2) - (half - RE)), up = H - (y + 0.5);\n      const wv = (2 * PI * nb * (x + 0.5)) / W + ph, amp = amps[floor(wv / (2 * PI) + 0.5) % amps.length];\n      const lip = dx > 0 ? sqrt(max(0, RE * RE - dx * dx)) : 2 + amp * (0.5 + 0.5 * cos(wv));\n      if (dx \u003c= RE && up \u003c= lip) {\n        const p = y * W + x;\n        st[p] = 1;\n        fill[p] = 1;\n        seed[p] = 1;\n        band[p] = 0;\n      }\n    }\n  // Roughness of the glass: two octaves of smooth noise, 8 and 4 LEDs\n  // across, so the front is nudged at the scale of a finger, not per LED.\n  const g8 = [], g4 = [];\n  for (let k = 0; k \u003c 9 * 17; k++) g8.push(random() - 0.5);\n  for (let k = 0; k \u003c 17 * 33; k++) g4.push(random() - 0.5);\n  const vn = (g, s, gw, x, y) => {\n    const u = x / s, v = y / s, i = floor(u), j = floor(v), fu = u - i, fv = v - j, a = j * gw + i;\n    return (g[a] * (1 - fu) + g[a + 1] * fu) * (1 - fv) + (g[a + gw] * (1 - fu) + g[a + gw + 1] * fu) * fv;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      eta[p] = 1 + 0.5 * vn(g8, 8, 9, x, y) + 0.3 * vn(g4, 4, 17, x, y);\n      P[p] = st[p] ? 1 : y / H;\n    }\n  S.vol = 0;\n  S.mode = 0;\n  S.timer = 0;\n}\n\n// The front: every cream LED next to the serum, and phi there.\nfunction boundary(S) {\n  const { st, fill, front, phi } = S;\n  let nf = 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (st[p]) continue;\n      if ((x > 0 && st[p - 1]) || (x \u003c W - 1 && st[p + 1]) || (y > 0 && st[p - W]) || (y \u003c H - 1 && st[p + W])) {\n        let s = 0, c = 0;\n        for (let k = 0; k \u003c DISC.length; k += 2) {\n          const xx = x + DISC[k], yy = y + DISC[k + 1];\n          if (xx \u003c 0 || xx >= W || yy >= H) continue;\n          c++;\n          if (yy \u003c 0) continue;\n          const q = yy * W + xx;\n          s += st[q] ? 1 : fill[q];\n        }\n        phi[p] = s / c - PHI0;\n        front[nf++] = p;\n      }\n    }\n  S.nf = nf;\n}\n\n// Over-relaxed sweeps of Laplace's equation for the pressure in the cream:\n// 1 in the serum, which is so thin it holds one pressure throughout, 0 at the\n// top edge, where the cream leaves the cell, and no flow through the sides\n// and the bottom.\nfunction relax(S, sweeps) {\n  const { st, P } = S;\n  for (let it = 0; it \u003c sweeps; it++)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        if (st[p]) continue;\n        let s = 0, c = 0;\n        if (y === 0) c++;\n        else {\n          s += st[p - W] ? 1 : P[p - W];\n          c++;\n        }\n        if (y \u003c H - 1) {\n          s += st[p + W] ? 1 : P[p + W];\n          c++;\n        }\n        if (x > 0) {\n          s += st[p - 1] ? 1 : P[p - 1];\n          c++;\n        }\n        if (x \u003c W - 1) {\n          s += st[p + 1] ? 1 : P[p + 1];\n          c++;\n        }\n        P[p] += OMEGA * (s / c - P[p]);\n      }\n}\n\nconst speed = (S, p) => max(0, 1 - S.P[p]) ** ETA * S.eta[p] * cl(1 + S.sigma * S.phi[p], 0, CAP);\n\n// Press in vol LEDs of serum, shared among the front LEDs by how fast the\n// cream gives way at each.\nfunction grow(S, vol) {\n  const { st, fill, P, band, front, nf } = S;\n  let tot = 0;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k];\n    tot += speed(S, p);\n  }\n  if (tot \u003c= 0) return;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k], v = speed(S, p);\n    if (v \u003c= 0) continue;\n    if (fill[p] === 0) band[p] = S.vol;\n    fill[p] += (vol * v) / tot;\n    if (fill[p] >= 1) {\n      fill[p] = 1;\n      st[p] = 1;\n      P[p] = 1;\n      // A finger at the top edge: the cell is full.\n      if (p \u003c 2 * W) S.mode = 1;\n    }\n  }\n  S.vol += vol;\n}\n\n// The cream closing back: every serum LED's distance to the cream, so the\n// fingers thin from their sides and the trunks go last.\nfunction startClear(S) {\n  const { st, fill, fill0, dist, seed } = S;\n  for (let p = 0; p \u003c N; p++) {\n    fill0[p] = fill[p];\n    dist[p] = fill[p] >= 1 && !seed[p] ? 1e9 : 0;\n  }\n  const D = 1, DD = 1.414;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x > 0) d = min(d, dist[p - 1] + D);\n      if (y > 0) {\n        d = min(d, dist[p - W] + D);\n        if (x > 0) d = min(d, dist[p - W - 1] + DD);\n        if (x \u003c W - 1) d = min(d, dist[p - W + 1] + DD);\n      }\n      dist[p] = d;\n    }\n  let m = 1;\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x \u003c W - 1) d = min(d, dist[p + 1] + D);\n      if (y \u003c H - 1) {\n        d = min(d, dist[p + W] + D);\n        if (x \u003c W - 1) d = min(d, dist[p + W + 1] + DD);\n        if (x > 0) d = min(d, dist[p + W - 1] + DD);\n      }\n      dist[p] = d;\n      if (d \u003c 1e8 && d > m) m = d;\n    }\n  S.maxd = m;\n  S.mode = 2;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.fingers = cl(k[2], -1, 1);\n  S.inlet = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const rate = S.speed / 2;\n  // Surface tension: 6 at Fingers -1, 2 at 0, 0.67 at 1.\n  S.sigma = SIG * 3 ** -S.fingers;\n  if (!S.begun) {\n    // Open with the first PRE seconds of a press already in, as at Speed 2.\n    fresh(S);\n    boundary(S);\n    relax(S, 200);\n    for (let i = 0; i \u003c PRE * 30; i++) {\n      boundary(S);\n      relax(S, SWEEPS);\n      grow(S, Q0 / 30);\n    }\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.mode \u003c 2) startClear(S);\n  if (S.mode === 0 || S.mode === 1) {\n    boundary(S);\n    relax(S, SWEEPS);\n    if (S.mode === 0) grow(S, Q0 * rate * d);\n    else {\n      S.timer += d * rate;\n      if (S.timer > 1.5) startClear(S);\n    }\n  } else if (S.mode === 2) {\n    S.timer += d * rate;\n    const u = S.timer / 3, R = (S.maxd + 1.5) * u * u;\n    const { fill, fill0, dist, st, seed } = S;\n    for (let p = 0; p \u003c N; p++) {\n      if (seed[p] || fill0[p] \u003c= 0) continue;\n      const f = min(fill0[p], cl(dist[p] - R, 0, 1));\n      fill[p] = f;\n      st[p] = f >= 1 ? 1 : 0;\n    }\n    if (u >= 1) {\n      fresh(S);\n      boundary(S);\n      relax(S, 60);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { fill, band, tex, ser, pale, cream, A, T } = S;\n  const h = S.hue + H0;\n  hsv(h, 0.72, 1, ser);\n  hsv(h + 0.06, 0.3, 1, pale);\n  hsv(h + 0.5, 0.1, 0.28, cream);\n  // The serum's colour, times how full each LED is, and the fill itself,\n  // softened by a 3 by 3 blur so the fingers' edges are round on the LEDs.\n  // Each LED's serum colour is set once, by how much had been pressed in\n  // when the serum got there: faint growth rings.\n  for (let p = 0; p \u003c N; p++) {\n    const f = fill[p], o = 4 * p;\n    if (f \u003c= 0) {\n      A[o] = A[o + 1] = A[o + 2] = A[o + 3] = 0;\n      continue;\n    }\n    const ring = 0.5 + 0.5 * cos((band[p] / 300) * 2 * PI), kk = (0.88 + 0.12 * ring) * f;\n    A[o] = (ser[0] + (pale[0] - ser[0]) * ring * 0.5) * kk;\n    A[o + 1] = (ser[1] + (pale[1] - ser[1]) * ring * 0.5) * kk;\n    A[o + 2] = (ser[2] + (pale[2] - ser[2]) * ring * 0.5) * kk;\n    A[o + 3] = f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = 4 * (y * W + x), l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) T[o + c] = 0.25 * A[l + c] + 0.5 * A[o + c] + 0.25 * A[r + c];\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, o = 4 * p, u = y > 0 ? o - 4 * W : o, d = y \u003c H - 1 ? o + 4 * W : o;\n      const f = 0.25 * T[u + 3] + 0.5 * T[o + 3] + 0.25 * T[d + 3], t = (1 + tex[p] * 0.25) * (1 - f);\n      const r = cream[0] * t + 0.25 * T[u] + 0.5 * T[o] + 0.25 * T[d];\n      const g = cream[1] * t + 0.25 * T[u + 1] + 0.5 * T[o + 1] + 0.25 * T[d + 1];\n      const b = cream[2] * t + 0.25 * T[u + 2] + 0.5 * T[o + 2] + 0.25 * T[d + 2];\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-serum-fingers","type":"code","name":"serum-fingers","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Serum Fingers\n// Family:  cosmetic\n// Idea:    A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after a thin serum pressed into thick cream between two glass plates (Saffman-Taylor viscous fingering, Philip Saffman and Geoffrey Taylor, 1958, in a Hele-Shaw cell, Henry Selby Hele-Shaw, 1898)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in.\n// Knob 2: Speed. At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster.\n// Knob 3: Fingers. Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press.\n// Knob 4: Inlet. Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press.\n// Buttons: K1 tap: the cream closes back now and a new press begins.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, cos, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Serum pressed in, in LEDs of area a second at Speed 2.\nconst Q0 = 580;\n// A fresh run opens with the first PRE seconds of a press already in.\nconst PRE = 0.6;\n// The cream gives way at a front LED as the pressure drop across it to the\n// power ETA, times the roughness of the glass there, times 1 + SIG phi, where\n// phi is how much more of the disc round it is serum than at a flat front:\n// below 0 at a fingertip, which is held back, above 0 in a crevice, which is\n// filled up to CAP times faster. That is the surface tension that keeps the\n// fingers round. SIG is for Fingers 0.\nconst ETA = 0.7, SIG = 2, CAP = 1.6;\n// Gauss-Seidel sweeps of the pressure each frame, over-relaxed.\nconst SWEEPS = 12, OMEGA = 1.9;\n// The disc the curvature is read over: cells within RC of a front cell. A\n// flat front fills PHI0 of it with serum.\nconst RC = 3.2;\nconst DISC = [];\nfor (let dy = -3; dy \u003c= 3; dy++) for (let dx = -3; dx \u003c= 3; dx++) if (dx * dx + dy * dy \u003c= RC * RC) DISC.push(dx, dy);\nlet PHI0 = 0;\n{\n  let a = 0, b = 0;\n  for (let k = 0; k \u003c DISC.length; k += 2) {\n    b++;\n    if (DISC[k + 1] \u003c 0) a++;\n  }\n  PHI0 = a / b;\n}\n// Opening hue: aqua serum.\nconst H0 = 0.5;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, fingers: 0, inlet: 0, sigma: SIG, begun: false,\n    st: new Uint8Array(N), fill: new Float32Array(N), P: new Float32Array(N),\n    eta: new Float32Array(N), phi: new Float32Array(N), band: new Float32Array(N), fill0: new Float32Array(N), dist: new Float32Array(N),\n    seed: new Uint8Array(N), tex: new Float32Array(N), front: new Int32Array(N), nf: 0,\n    vol: 0, mode: 0, timer: 0, maxd: 1,\n    A: new Float32Array(4 * N), T: new Float32Array(4 * N), ser: [0, 0, 0], pale: [0, 0, 0], cream: [0, 0, 0],\n  };\n  const S = params.s;\n  // The cream's own static mottle, a few soft lumps.\n  const lumps = [];\n  for (let k = 0; k \u003c 14; k++) lumps.push([random() * W, random() * H, 6 + random() * 14, random() - 0.5]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v = 0;\n      for (const [lx, ly, r, a] of lumps) v += a * exp(-((x - lx) ** 2 + (y - ly) ** 2) / (r * r));\n      S.tex[y * W + x] = v;\n    }\n}\n\n// A fresh press: the inlet filled, the rest cream, new roughness in the glass.\nfunction fresh(S) {\n  const { st, fill, P, eta, band, seed } = S;\n  st.fill(0);\n  fill.fill(0);\n  seed.fill(0);\n  // The inlet: a slot along the whole bottom at Inlet 0, narrowing to a half\n  // disc 5 LEDs across at the bottom centre at 1, its lip rounded at each\n  // end. Along the slot the lip is waved, from 3 waves across the panel at\n  // Fingers -1 to 12 at 1, so the fingers start at the width they would grow.\n  const half = 32 - 30 * S.inlet, RE = 2.6, nb = round(6 * 2 ** S.fingers), ph = random() * 2 * PI, amps = [];\n  for (let k = 0; k \u003c 16; k++) amps.push(2 + 4 * random());\n  for (let y = H - 6; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = max(0, abs(x + 0.5 - W / 2) - (half - RE)), up = H - (y + 0.5);\n      const wv = (2 * PI * nb * (x + 0.5)) / W + ph, amp = amps[floor(wv / (2 * PI) + 0.5) % amps.length];\n      const lip = dx > 0 ? sqrt(max(0, RE * RE - dx * dx)) : 2 + amp * (0.5 + 0.5 * cos(wv));\n      if (dx \u003c= RE && up \u003c= lip) {\n        const p = y * W + x;\n        st[p] = 1;\n        fill[p] = 1;\n        seed[p] = 1;\n        band[p] = 0;\n      }\n    }\n  // Roughness of the glass: two octaves of smooth noise, 8 and 4 LEDs\n  // across, so the front is nudged at the scale of a finger, not per LED.\n  const g8 = [], g4 = [];\n  for (let k = 0; k \u003c 9 * 17; k++) g8.push(random() - 0.5);\n  for (let k = 0; k \u003c 17 * 33; k++) g4.push(random() - 0.5);\n  const vn = (g, s, gw, x, y) => {\n    const u = x / s, v = y / s, i = floor(u), j = floor(v), fu = u - i, fv = v - j, a = j * gw + i;\n    return (g[a] * (1 - fu) + g[a + 1] * fu) * (1 - fv) + (g[a + gw] * (1 - fu) + g[a + gw + 1] * fu) * fv;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      eta[p] = 1 + 0.5 * vn(g8, 8, 9, x, y) + 0.3 * vn(g4, 4, 17, x, y);\n      P[p] = st[p] ? 1 : y / H;\n    }\n  S.vol = 0;\n  S.mode = 0;\n  S.timer = 0;\n}\n\n// The front: every cream LED next to the serum, and phi there.\nfunction boundary(S) {\n  const { st, fill, front, phi } = S;\n  let nf = 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (st[p]) continue;\n      if ((x > 0 && st[p - 1]) || (x \u003c W - 1 && st[p + 1]) || (y > 0 && st[p - W]) || (y \u003c H - 1 && st[p + W])) {\n        let s = 0, c = 0;\n        for (let k = 0; k \u003c DISC.length; k += 2) {\n          const xx = x + DISC[k], yy = y + DISC[k + 1];\n          if (xx \u003c 0 || xx >= W || yy >= H) continue;\n          c++;\n          if (yy \u003c 0) continue;\n          const q = yy * W + xx;\n          s += st[q] ? 1 : fill[q];\n        }\n        phi[p] = s / c - PHI0;\n        front[nf++] = p;\n      }\n    }\n  S.nf = nf;\n}\n\n// Over-relaxed sweeps of Laplace's equation for the pressure in the cream:\n// 1 in the serum, which is so thin it holds one pressure throughout, 0 at the\n// top edge, where the cream leaves the cell, and no flow through the sides\n// and the bottom.\nfunction relax(S, sweeps) {\n  const { st, P } = S;\n  for (let it = 0; it \u003c sweeps; it++)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        if (st[p]) continue;\n        let s = 0, c = 0;\n        if (y === 0) c++;\n        else {\n          s += st[p - W] ? 1 : P[p - W];\n          c++;\n        }\n        if (y \u003c H - 1) {\n          s += st[p + W] ? 1 : P[p + W];\n          c++;\n        }\n        if (x > 0) {\n          s += st[p - 1] ? 1 : P[p - 1];\n          c++;\n        }\n        if (x \u003c W - 1) {\n          s += st[p + 1] ? 1 : P[p + 1];\n          c++;\n        }\n        P[p] += OMEGA * (s / c - P[p]);\n      }\n}\n\nconst speed = (S, p) => max(0, 1 - S.P[p]) ** ETA * S.eta[p] * cl(1 + S.sigma * S.phi[p], 0, CAP);\n\n// Press in vol LEDs of serum, shared among the front LEDs by how fast the\n// cream gives way at each.\nfunction grow(S, vol) {\n  const { st, fill, P, band, front, nf } = S;\n  let tot = 0;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k];\n    tot += speed(S, p);\n  }\n  if (tot \u003c= 0) return;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k], v = speed(S, p);\n    if (v \u003c= 0) continue;\n    if (fill[p] === 0) band[p] = S.vol;\n    fill[p] += (vol * v) / tot;\n    if (fill[p] >= 1) {\n      fill[p] = 1;\n      st[p] = 1;\n      P[p] = 1;\n      // A finger at the top edge: the cell is full.\n      if (p \u003c 2 * W) S.mode = 1;\n    }\n  }\n  S.vol += vol;\n}\n\n// The cream closing back: every serum LED's distance to the cream, so the\n// fingers thin from their sides and the trunks go last.\nfunction startClear(S) {\n  const { st, fill, fill0, dist, seed } = S;\n  for (let p = 0; p \u003c N; p++) {\n    fill0[p] = fill[p];\n    dist[p] = fill[p] >= 1 && !seed[p] ? 1e9 : 0;\n  }\n  const D = 1, DD = 1.414;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x > 0) d = min(d, dist[p - 1] + D);\n      if (y > 0) {\n        d = min(d, dist[p - W] + D);\n        if (x > 0) d = min(d, dist[p - W - 1] + DD);\n        if (x \u003c W - 1) d = min(d, dist[p - W + 1] + DD);\n      }\n      dist[p] = d;\n    }\n  let m = 1;\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x \u003c W - 1) d = min(d, dist[p + 1] + D);\n      if (y \u003c H - 1) {\n        d = min(d, dist[p + W] + D);\n        if (x \u003c W - 1) d = min(d, dist[p + W + 1] + DD);\n        if (x > 0) d = min(d, dist[p + W - 1] + DD);\n      }\n      dist[p] = d;\n      if (d \u003c 1e8 && d > m) m = d;\n    }\n  S.maxd = m;\n  S.mode = 2;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.fingers = cl(k[2], -1, 1);\n  S.inlet = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const rate = S.speed / 2;\n  // Surface tension: 6 at Fingers -1, 2 at 0, 0.67 at 1.\n  S.sigma = SIG * 3 ** -S.fingers;\n  if (!S.begun) {\n    // Open with the first PRE seconds of a press already in, as at Speed 2.\n    fresh(S);\n    boundary(S);\n    relax(S, 200);\n    for (let i = 0; i \u003c PRE * 30; i++) {\n      boundary(S);\n      relax(S, SWEEPS);\n      grow(S, Q0 / 30);\n    }\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.mode \u003c 2) startClear(S);\n  if (S.mode === 0 || S.mode === 1) {\n    boundary(S);\n    relax(S, SWEEPS);\n    if (S.mode === 0) grow(S, Q0 * rate * d);\n    else {\n      S.timer += d * rate;\n      if (S.timer > 1.5) startClear(S);\n    }\n  } else if (S.mode === 2) {\n    S.timer += d * rate;\n    const u = S.timer / 3, R = (S.maxd + 1.5) * u * u;\n    const { fill, fill0, dist, st, seed } = S;\n    for (let p = 0; p \u003c N; p++) {\n      if (seed[p] || fill0[p] \u003c= 0) continue;\n      const f = min(fill0[p], cl(dist[p] - R, 0, 1));\n      fill[p] = f;\n      st[p] = f >= 1 ? 1 : 0;\n    }\n    if (u >= 1) {\n      fresh(S);\n      boundary(S);\n      relax(S, 60);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { fill, band, tex, ser, pale, cream, A, T } = S;\n  const h = S.hue + H0;\n  hsv(h, 0.72, 1, ser);\n  hsv(h + 0.06, 0.3, 1, pale);\n  hsv(h + 0.5, 0.1, 0.28, cream);\n  // The serum's colour, times how full each LED is, and the fill itself,\n  // softened by a 3 by 3 blur so the fingers' edges are round on the LEDs.\n  // Each LED's serum colour is set once, by how much had been pressed in\n  // when the serum got there: faint growth rings.\n  for (let p = 0; p \u003c N; p++) {\n    const f = fill[p], o = 4 * p;\n    if (f \u003c= 0) {\n      A[o] = A[o + 1] = A[o + 2] = A[o + 3] = 0;\n      continue;\n    }\n    const ring = 0.5 + 0.5 * cos((band[p] / 300) * 2 * PI), kk = (0.88 + 0.12 * ring) * f;\n    A[o] = (ser[0] + (pale[0] - ser[0]) * ring * 0.5) * kk;\n    A[o + 1] = (ser[1] + (pale[1] - ser[1]) * ring * 0.5) * kk;\n    A[o + 2] = (ser[2] + (pale[2] - ser[2]) * ring * 0.5) * kk;\n    A[o + 3] = f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = 4 * (y * W + x), l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) T[o + c] = 0.25 * A[l + c] + 0.5 * A[o + c] + 0.25 * A[r + c];\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, o = 4 * p, u = y > 0 ? o - 4 * W : o, d = y \u003c H - 1 ? o + 4 * W : o;\n      const f = 0.25 * T[u + 3] + 0.5 * T[o + 3] + 0.25 * T[d + 3], t = (1 + tex[p] * 0.25) * (1 - f);\n      const r = cream[0] * t + 0.25 * T[u] + 0.5 * T[o] + 0.25 * T[d];\n      const g = cream[1] * t + 0.25 * T[u + 1] + 0.5 * T[o + 1] + 0.25 * T[d + 1];\n      const b = cream[2] * t + 0.25 * T[u + 2] + 0.5 * T[o + 2] + 0.25 * T[d + 2];\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster."},{"name":"Fingers","min":-1,"max":1,"about":"Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press."},{"name":"Inlet","min":0,"max":1,"about":"Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press."}],"start":[0,2,0,0.06],"measures":{"motion":0.0418,"detail":0.0193,"edges":0.1667,"complexity":0.987,"coverage":1,"colour":0.3588,"drift":0.2509},"knobResponse":[0.1449,0.1034,0.0454,0.0842]},{"slug":"serum-gel","title":"Serum Gel","family":"cosmetic","round":29,"note":"연보라 젤 속에 진주와 캡슐, 기포가 떠서 천천히 흔들리고, 뒤쪽 벽에는 젤 표면을 지난 빛이 부드러운 그물로 어른거려요. K3 은 구슬 수를 여덟에서 마흔까지 바꾸고, 누르면 젤이 크게 출렁이며 구슬이 늘어났다 줄어들며 흔들리다 가라앉아요.","idea":"A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.","buttons":"K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.","code":"// ===== Patternflow pattern =====\n// Title:   Serum Gel\n// Family:  cosmetic\n// Idea:    A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the macro shots of serum and gel cream with suspended beads in skincare films\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1\n//\n// Knob 1: Hue. Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac.\n// Knob 2: Speed. How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still.\n// Knob 3: Beads. How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one.\n// Knob 4: Wobble. How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging.\n// Buttons: K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, pow, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The opening hue: lilac, not red.\nconst H0 = 0.78;\n// Light rays are cast from a grid SS times finer than the LEDs, over a\n// margin M beyond the panel so the edges get light from outside too. How\n// far each ray is bent is worked out on a coarser grid, GS LEDs a step,\n// since the ripples are much longer than that, and read between its points.\nconst SS = 1.5, M = 4, GS = 2, GW = (W + 2 * M) / GS + 2, GH = (H + 2 * M) / GS + 2;\nconst RW = (W + 2 * M) * SS, RH = (H + 2 * M) * SS;\n// The surface ripples: six waves 18 to 40 LEDs long.\nconst NWV = 6;\n// Specks of air, always there whatever the Beads knob says.\nconst SPECKS = 16;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The gel's low modes of wobble, as displacement fields: side to side with\n// the top swinging most, a bounce, a twist, and a squeeze. Each is a damped\n// spring with its angular frequency at Speed 2.\nconst MODES = 4;\nconst OMEGA = [3.1, 4.3, 2.6, 5.4];\n// They are kept on the coarse grid, which runs M LEDs past the panel on\n// every side; the gel past the panel's edges does not move.\nconst GN = GW * GH, MX = new Float32Array(MODES * GN), MY = new Float32Array(MODES * GN);\nfor (let j = 0; j \u003c GH; j++)\n  for (let i = 0; i \u003c GW; i++) {\n    const x = cl(i * GS - M, 0, W), y = cl(j * GS - M, 0, H), p = j * GW + i;\n    const sx = sin((PI * x) / W), sy = sin((PI * y) / H), top = cos((PI * y) / (2 * H));\n    MX[p] = sx * top;\n    MY[GN + p] = sx * sy;\n    MX[2 * GN + p] = (-(y - H / 2) / 40) * sx * sy;\n    MY[2 * GN + p] = ((x - W / 2) / 40) * sx * sy;\n    MX[3 * GN + p] = sin((2 * PI * x) / W) * sy;\n  }\n// A cosine table, 1024 steps a turn.\nconst CT = new Float32Array(1024).map((_, i) => cos((i * 2 * PI) / 1024));\nconst fcos = (a) => CT[(a * 162.97466) & 1023];\n\nexport function setup(params) {\n  params.s = {\n    t: 0, wv: new Float32Array(NWV * 8), ph: new Float32Array(NWV), md: new Float32Array(MODES * 2), drive: new Float32Array(MODES), dead: 0,\n    gx: new Float32Array(GN), gy: new Float32Array(GN), acc: new Float32Array(N), tmp: new Float32Array(N),\n    beads: [], want: 0, hue: 0, wob: 0.06, sp: 2, ready: false,\n    bg: new Float32Array(N * 3), col: new Float32Array(8 * 3),\n  };\n  const P = params.s;\n  // Each ripple: its wave vector, how fast it creeps (0.4 to 1.2 LEDs a\n  // second at Speed 2), its phase, the direction it bends light, and how\n  // fast it jiggles to and fro in place, as a gel's surface does.\n  for (let i = 0; i \u003c NWV; i++) {\n    const a = (i / NWV) * PI + rnd() * 0.5, L = 18 + rnd() * 22, o = i * 8;\n    P.wv[o] = (cos(a) * 2 * PI) / L;\n    P.wv[o + 1] = (sin(a) * 2 * PI) / L;\n    P.wv[o + 2] = ((0.4 + rnd() * 0.8) * 2 * PI) / L;\n    P.wv[o + 3] = rnd() * 2 * PI;\n    P.wv[o + 4] = cos(a);\n    P.wv[o + 5] = sin(a);\n    P.wv[o + 6] = 1.6 + rnd() * 1.6;\n    P.wv[o + 7] = rnd() * 2 * PI;\n  }\n}\n\n// A bead hanging at rest point (hx, hy), depth z from 0 (near) to 1 (far),\n// and where it is now. Kind 0 is a pearl, 3 a tinted capsule, 1 an air\n// bubble, 2 one of the specks of air that every gel holds. The fewer beads,\n// the bigger they are. Each new one tries a few places in its own band of\n// the panel's height and keeps the one furthest from the others, so they\n// spread out.\nfunction bead(P, n, kind, all, band, bands) {\n  const big = 10 * sqrt(8 / n), z = rnd(), f = 1 - 0.45 * z;\n  const r = kind === 2 ? 0.7 + rnd() * 0.8 : kind === 1 ? big * (0.3 + 0.3 * rnd()) * f : big * (0.65 + 0.35 * rnd()) * f;\n  let bx = 0, by = 0, best = -1;\n  for (let tries = 0; tries \u003c 12; tries++) {\n    const x = r + 1 + rnd() * (W - 2 * r - 2), y = cl(((band + rnd()) / bands) * H, r + 2, H - r - 3);\n    let near = 1e9;\n    for (const b of all) if (!b.gone && b.kind !== 2) near = min(near, sqrt((b.hx - x) ** 2 + (b.hy - y) ** 2) - b.r - r);\n    if (near > best) (best = near), (bx = x), (by = y);\n  }\n  if (kind === 0 && rnd() \u003c 0.4) kind = 3;\n  return { hx: bx, hy: by, x: bx, y: by, vx: 0, vy: 0, r, z, kind, ph: rnd() * 2 * PI, fq: 0.5 + rnd() * 0.5, a: 0, gone: false };\n}\n\n// Keep as many beads, pearls and capsules, as the knob asks for, and two\n// bubbles for every three beads: new ones fade in, spare ones fade out, and\n// the far ones are drawn first.\nfunction census(P, n) {\n  if (!P.beads.length) for (let i = 0; i \u003c SPECKS; i++) P.beads.push(bead(P, 8, 2, P.beads, i, SPECKS));\n  for (let kind = 0; kind \u003c 2; kind++) {\n    const want = kind ? Math.round((n * 2) / 3) : n, live = P.beads.filter((b) => !b.gone && (b.kind === kind || b.kind === kind + 3));\n    if (live.length \u003c want) for (let i = live.length; i \u003c want; i++) P.beads.push(bead(P, n, kind, P.beads, (i * 7) % want, want));\n    else for (let i = want; i \u003c live.length; i++) live[i].gone = true;\n  }\n  P.beads.sort((a, b) => b.z - a.z);\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\nfunction step(P, dt, sp, wob) {\n  P.t += dt * sp * 0.5;\n  // The modes ring like springs; a slow random push keeps them moving by as\n  // much as Wobble asks.\n  const md = P.md, dr = P.drive, k = sp * 0.5;\n  for (let m = 0; m \u003c MODES; m++) {\n    const w = OMEGA[m] * k, ze = 0.07;\n    dr[m] += (rnd() - 0.5) * dt * 6;\n    dr[m] *= 1 - dt * 0.8;\n    const f = dr[m] * (0.6 + 9 * wob) * w * w * 0.25;\n    let x = md[m * 2], v = md[m * 2 + 1];\n    v += (-w * w * x - 2 * ze * w * v + f) * dt;\n    x += v * dt;\n    md[m * 2] = x;\n    md[m * 2 + 1] = v;\n  }\n  // Beads hang from the gel on springs of their own, softer than the gel, so\n  // they lag behind its swing and then catch up; each drifts a little round\n  // its rest point on its own.\n  for (const b of P.beads) {\n    b.a = b.gone ? max(0, b.a - dt * 1.5) : min(1, b.a + dt * 1.5);\n    if (b.gone && b.a \u003c= 0) P.dead = 1;\n    const p = Math.round((b.hy + M) / GS) * GW + Math.round((b.hx + M) / GS);\n    let ux = 0, uy = 0;\n    for (let m = 0; m \u003c MODES; m++) {\n      ux += md[m * 2] * MX[m * GN + p];\n      uy += md[m * 2] * MY[m * GN + p];\n    }\n    const par = 1.15 - 0.4 * b.z, dfx = 1.4 * sin(P.t * b.fq + b.ph), dfy = 1.8 * sin(P.t * b.fq * 0.71 + b.ph * 1.3);\n    const tx = b.hx + ux * par + dfx, ty = b.hy + uy * par + dfy, w = 2.4 * k * (1.1 - 0.3 * b.z);\n    b.vx += ((tx - b.x) * w * w - 2 * 0.12 * w * b.vx) * dt;\n    b.vy += ((ty - b.y) * w * w - 2 * 0.12 * w * b.vy) * dt;\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n  }\n  if (P.dead) (P.beads = P.beads.filter((b) => !b.gone || b.a > 0)), (P.dead = 0);\n}\n\n// Light comes down through the gel's rippled surface and lands on the back\n// wall. Each ray is bent by the surface's slope where it entered, by up to a\n// few LEDs, and by the gel's wobble; where the rays crowd together the wall\n// is bright, the caustic net.\nfunction caustics(P, wob) {\n  const { gx, gy, acc, wv, md } = P;\n  // A jiggling gel ripples more: the bend grows with Wobble and with how\n  // hard the modes are swinging.\n  let e = 0;\n  for (let m = 0; m \u003c MODES; m++) e += abs(md[m * 2]);\n  const amp = (1.1 + 0.8 * wob + 0.15 * min(6, e)) / sqrt(NWV / 3), t = P.t * 2, ph = P.ph, jig = 0.5 + 0.8 * wob + 0.12 * min(6, e);\n  for (let w = 0; w \u003c NWV; w++) ph[w] = wv[w * 8 + 3] - wv[w * 8 + 2] * t + jig * sin(wv[w * 8 + 6] * t + wv[w * 8 + 7]);\n  const m0 = md[0] * 0.8, m1 = md[2] * 0.8, m2 = md[4] * 0.8, m3 = md[6] * 0.8;\n  for (let j = 0, q = 0; j \u003c GH; j++)\n    for (let i = 0; i \u003c GW; i++, q++) {\n      const x = i * GS - M, y = j * GS - M;\n      let sx = 0, sy = 0;\n      for (let w = 0; w \u003c NWV; w++) {\n        const c = fcos(wv[w * 8] * x + wv[w * 8 + 1] * y + ph[w]);\n        sx += wv[w * 8 + 4] * c;\n        sy += wv[w * 8 + 5] * c;\n      }\n      // The back wall moves with the gel, so the whole net swings with it.\n      gx[q] = sx * amp + m0 * MX[q] + m2 * MX[2 * GN + q] + m3 * MX[3 * GN + q];\n      gy[q] = sy * amp + m1 * MY[GN + q] + m2 * MY[2 * GN + q];\n    }\n  acc.fill(0);\n  const wgt = 1 / (SS * SS), inv = 1 / SS, gi = 1 / GS;\n  for (let rj = 0; rj \u003c RH; rj++) {\n    const fy = rj * inv, uy = fy * gi, j0 = floor(uy), ty = uy - j0;\n    for (let ri = 0; ri \u003c RW; ri++) {\n      const fx = ri * inv, ux = fx * gi, i0 = floor(ux), tx = ux - i0, q = j0 * GW + i0;\n      const X = fx - M + (gx[q] * (1 - tx) + gx[q + 1] * tx) * (1 - ty) + (gx[q + GW] * (1 - tx) + gx[q + GW + 1] * tx) * ty;\n      const Y = fy - M + (gy[q] * (1 - tx) + gy[q + 1] * tx) * (1 - ty) + (gy[q + GW] * (1 - tx) + gy[q + GW + 1] * tx) * ty;\n      const ix = floor(X), iy = floor(Y);\n      if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) continue;\n      const ax = X - ix, ay = Y - iy;\n      if (iy >= 0) {\n        if (ix >= 0) acc[iy * W + ix] += wgt * (1 - ax) * (1 - ay);\n        if (ix \u003c W - 1) acc[iy * W + ix + 1] += wgt * ax * (1 - ay);\n      }\n      if (iy \u003c H - 1) {\n        if (ix >= 0) acc[(iy + 1) * W + ix] += wgt * (1 - ax) * ay;\n        if (ix \u003c W - 1) acc[(iy + 1) * W + ix + 1] += wgt * ax * ay;\n      }\n    }\n  }\n  // Gel is not quite clear: the light softens on its way to the wall, and\n  // each line of it gets a halo on the LEDs beside it.\n  blur(acc, P.tmp);\n  blur(acc, P.tmp);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.wob = cl(k[3], 0, 1);\n  const n = cl(Math.round(k[2]), 8, 40);\n  if (n !== P.want) (P.want = n), census(P, n);\n  if (!P.ready) {\n    // The first frame already shows the gel settled and swaying.\n    for (const b of P.beads) b.a = 1;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, P.sp, P.wob);\n    P.ready = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A knock: the sway and the bounce get a hard kick, the others a little.\n    const s = rnd() \u003c 0.5 ? -1 : 1, w = P.sp * 0.5;\n    P.md[1] += s * 10 * OMEGA[0] * w;\n    P.md[3] += (rnd() - 0.5) * 8 * OMEGA[1] * w;\n    P.md[5] += (rnd() - 0.5) * 4 * OMEGA[2] * w;\n    P.md[7] += (rnd() - 0.5) * 3 * OMEGA[3] * w;\n  }\n  let t = d;\n  while (t > 1e-6) {\n    const h = min(t, 1 / 60);\n    step(P, h, P.sp, P.wob);\n    t -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  caustics(P, P.wob);\n  const { acc, bg, col } = P, hue = H0 + P.hue;\n  // Gel light and deep, caustic light, pearl one side, pearl rim, pearl\n  // other side, capsule body and its gathered light. Orange and yellow gel\n  // darkened reads as brown and olive on LEDs, so around those hues the gel\n  // is kept lighter, like honey.\n  const hw = (hue - floor(hue) + 0.38) % 1, am = max(0, 1 - abs(hw - 0.5) / 0.11);\n  hsv(hue, 0.72 - 0.12 * am, 0.62 + 0.3 * am, col, 0);\n  hsv(hue + 0.02, 0.85 - 0.1 * am, 0.3 + 0.38 * am, col, 3);\n  hsv(hue - 0.03, 0.35, 1, col, 6);\n  hsv(hue + 0.12, 0.2, 1, col, 9);\n  hsv(hue - 0.14, 0.6, 1, col, 12);\n  hsv(hue - 0.1, 0.2, 1, col, 15);\n  hsv(hue + 0.05, 0.95, 0.5, col, 18);\n  hsv(hue + 0.02, 0.5, 1, col, 21);\n  // The gel: light from above, so the top glows and the bottom is deeper,\n  // and over it the net of caustic light.\n  for (let y = 0; y \u003c H; y++) {\n    const g = 1 - (0.55 * y) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, l = cl(acc[p] - 0.6, 0, 1.6) * 0.5;\n      for (let q = 0; q \u003c 3; q++) bg[p * 3 + q] = col[q] * g + col[3 + q] * (1 - g) + col[6 + q] * l * (0.55 + 0.45 * g);\n    }\n  }\n  // Beads and bubbles, far ones first.\n  for (const b of P.beads) drawBead(P, b);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, bg[p * 3]), min(255, bg[p * 3 + 1]), min(255, bg[p * 3 + 2]));\n}\n\n// Pearls are lit from above through the gel, their white leaning one way\n// round the colour wheel on one side and the other way on the other, as a\n// pearl's sheen shifts, with a rim and a white highlight. A capsule is clear and deeply tinted: light coming down through\n// it gathers into a bright spot low inside it. An air bubble is clear, the\n// gel behind it brighter, with a thin bright rim and a highlight; a speck is\n// a point of light. Far ones sink into the gel's colour.\nfunction drawBead(P, b) {\n  // A bead swinging through the gel is drawn out a little along its path\n  // and squeezed across it, so it jiggles as it swings and settles round.\n  const ax = abs(b.vx), ay = abs(b.vy), qx = cl(1 + 0.02 * ax - 0.01 * ay, 0.82, 1.18), qy = cl(1 + 0.02 * ay - 0.01 * ax, 0.82, 1.18);\n  const { bg, col, acc } = P, r = b.r, x1 = max(0, floor(b.x - r * qx - 1)), x2 = min(W - 1, floor(b.x + r * qx + 1));\n  const y1 = max(0, floor(b.y - r * qy - 1)), y2 = min(H - 1, floor(b.y + r * qy + 1));\n  const fog = 0.45 * b.z, cp = cl(floor(b.y), 0, H - 1) * W + cl(floor(b.x), 0, W - 1), glint = 0.85 + 0.35 * cl(acc[cp] - 0.6, 0, 1.5);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const dx = (x + 0.5 - b.x) / (r * qx), dy = (y + 0.5 - b.y) / (r * qy), d2 = dx * dx + dy * dy, d = sqrt(d2);\n      const cov = cl((1 - d) * r + 0.5, 0, 1) * b.a;\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - d2)), p = (y * W + x) * 3, rim = pow(1 - nz, 2.2);\n      let R, G, B;\n      if (b.kind === 2) {\n        const k = 0.9 * (1 - d);\n        R = bg[p] + col[6] * k;\n        G = bg[p + 1] + col[7] * k;\n        B = bg[p + 2] + col[8] * k;\n      } else if (b.kind === 1) {\n        // Air in gel: clear in the middle, the light bent into a bright rim,\n        // and a highlight up towards the light.\n        const ring = sm((d - 0.6) / 0.25) * (1 - sm((d - 0.95) / 0.1)), hi = exp(-((dx + 0.35) ** 2 + (dy + 0.4) ** 2) * 22);\n        const k = 0.15 + 0.85 * ring;\n        R = bg[p] * 1.1 + col[6] * k * 0.85 + 255 * hi;\n        G = bg[p + 1] * 1.1 + col[7] * k * 0.85 + 255 * hi;\n        B = bg[p + 2] * 1.1 + col[8] * k * 0.85 + 255 * hi;\n      } else {\n        const hi = pow(max(0, -dx * 0.36 - dy * 0.5 + nz * 0.79), 40) * 255, edge = 1 - 0.3 * sm((d - 0.86) / 0.12);\n        if (b.kind === 0) {\n          const df = max(0, -dx * 0.3 - dy * 0.75 + nz * 0.6), lit = (0.72 + 0.4 * df) * glint * edge, u = cl(0.5 + 0.6 * (dx - dy) * 0.7, 0, 1);\n          R = (col[9] + (col[15] - col[9]) * u) * lit + col[12] * rim * 0.75 + hi;\n          G = (col[10] + (col[16] - col[10]) * u) * lit + col[13] * rim * 0.75 + hi;\n          B = (col[11] + (col[17] - col[11]) * u) * lit + col[14] * rim * 0.75 + hi;\n        } else {\n          const core = exp(-(dx * dx + (dy - 0.42) ** 2) * 5) * glint, body = 0.55 * edge;\n          R = col[18] * body + col[21] * core + col[21] * rim * 0.5 + hi;\n          G = col[19] * body + col[22] * core + col[22] * rim * 0.5 + hi;\n          B = col[20] * body + col[23] * core + col[23] * rim * 0.5 + hi;\n        }\n      }\n      R += (bg[p] - R) * fog;\n      G += (bg[p + 1] - G) * fog;\n      B += (bg[p + 2] - B) * fog;\n      bg[p] += (R - bg[p]) * cov;\n      bg[p + 1] += (G - bg[p + 1]) * cov;\n      bg[p + 2] += (B - bg[p + 2]) * cov;\n    }\n}\n","layer":{"id":"layer-serum-gel","type":"code","name":"serum-gel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Serum Gel\n// Family:  cosmetic\n// Idea:    A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the macro shots of serum and gel cream with suspended beads in skincare films\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1\n//\n// Knob 1: Hue. Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac.\n// Knob 2: Speed. How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still.\n// Knob 3: Beads. How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one.\n// Knob 4: Wobble. How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging.\n// Buttons: K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, pow, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The opening hue: lilac, not red.\nconst H0 = 0.78;\n// Light rays are cast from a grid SS times finer than the LEDs, over a\n// margin M beyond the panel so the edges get light from outside too. How\n// far each ray is bent is worked out on a coarser grid, GS LEDs a step,\n// since the ripples are much longer than that, and read between its points.\nconst SS = 1.5, M = 4, GS = 2, GW = (W + 2 * M) / GS + 2, GH = (H + 2 * M) / GS + 2;\nconst RW = (W + 2 * M) * SS, RH = (H + 2 * M) * SS;\n// The surface ripples: six waves 18 to 40 LEDs long.\nconst NWV = 6;\n// Specks of air, always there whatever the Beads knob says.\nconst SPECKS = 16;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The gel's low modes of wobble, as displacement fields: side to side with\n// the top swinging most, a bounce, a twist, and a squeeze. Each is a damped\n// spring with its angular frequency at Speed 2.\nconst MODES = 4;\nconst OMEGA = [3.1, 4.3, 2.6, 5.4];\n// They are kept on the coarse grid, which runs M LEDs past the panel on\n// every side; the gel past the panel's edges does not move.\nconst GN = GW * GH, MX = new Float32Array(MODES * GN), MY = new Float32Array(MODES * GN);\nfor (let j = 0; j \u003c GH; j++)\n  for (let i = 0; i \u003c GW; i++) {\n    const x = cl(i * GS - M, 0, W), y = cl(j * GS - M, 0, H), p = j * GW + i;\n    const sx = sin((PI * x) / W), sy = sin((PI * y) / H), top = cos((PI * y) / (2 * H));\n    MX[p] = sx * top;\n    MY[GN + p] = sx * sy;\n    MX[2 * GN + p] = (-(y - H / 2) / 40) * sx * sy;\n    MY[2 * GN + p] = ((x - W / 2) / 40) * sx * sy;\n    MX[3 * GN + p] = sin((2 * PI * x) / W) * sy;\n  }\n// A cosine table, 1024 steps a turn.\nconst CT = new Float32Array(1024).map((_, i) => cos((i * 2 * PI) / 1024));\nconst fcos = (a) => CT[(a * 162.97466) & 1023];\n\nexport function setup(params) {\n  params.s = {\n    t: 0, wv: new Float32Array(NWV * 8), ph: new Float32Array(NWV), md: new Float32Array(MODES * 2), drive: new Float32Array(MODES), dead: 0,\n    gx: new Float32Array(GN), gy: new Float32Array(GN), acc: new Float32Array(N), tmp: new Float32Array(N),\n    beads: [], want: 0, hue: 0, wob: 0.06, sp: 2, ready: false,\n    bg: new Float32Array(N * 3), col: new Float32Array(8 * 3),\n  };\n  const P = params.s;\n  // Each ripple: its wave vector, how fast it creeps (0.4 to 1.2 LEDs a\n  // second at Speed 2), its phase, the direction it bends light, and how\n  // fast it jiggles to and fro in place, as a gel's surface does.\n  for (let i = 0; i \u003c NWV; i++) {\n    const a = (i / NWV) * PI + rnd() * 0.5, L = 18 + rnd() * 22, o = i * 8;\n    P.wv[o] = (cos(a) * 2 * PI) / L;\n    P.wv[o + 1] = (sin(a) * 2 * PI) / L;\n    P.wv[o + 2] = ((0.4 + rnd() * 0.8) * 2 * PI) / L;\n    P.wv[o + 3] = rnd() * 2 * PI;\n    P.wv[o + 4] = cos(a);\n    P.wv[o + 5] = sin(a);\n    P.wv[o + 6] = 1.6 + rnd() * 1.6;\n    P.wv[o + 7] = rnd() * 2 * PI;\n  }\n}\n\n// A bead hanging at rest point (hx, hy), depth z from 0 (near) to 1 (far),\n// and where it is now. Kind 0 is a pearl, 3 a tinted capsule, 1 an air\n// bubble, 2 one of the specks of air that every gel holds. The fewer beads,\n// the bigger they are. Each new one tries a few places in its own band of\n// the panel's height and keeps the one furthest from the others, so they\n// spread out.\nfunction bead(P, n, kind, all, band, bands) {\n  const big = 10 * sqrt(8 / n), z = rnd(), f = 1 - 0.45 * z;\n  const r = kind === 2 ? 0.7 + rnd() * 0.8 : kind === 1 ? big * (0.3 + 0.3 * rnd()) * f : big * (0.65 + 0.35 * rnd()) * f;\n  let bx = 0, by = 0, best = -1;\n  for (let tries = 0; tries \u003c 12; tries++) {\n    const x = r + 1 + rnd() * (W - 2 * r - 2), y = cl(((band + rnd()) / bands) * H, r + 2, H - r - 3);\n    let near = 1e9;\n    for (const b of all) if (!b.gone && b.kind !== 2) near = min(near, sqrt((b.hx - x) ** 2 + (b.hy - y) ** 2) - b.r - r);\n    if (near > best) (best = near), (bx = x), (by = y);\n  }\n  if (kind === 0 && rnd() \u003c 0.4) kind = 3;\n  return { hx: bx, hy: by, x: bx, y: by, vx: 0, vy: 0, r, z, kind, ph: rnd() * 2 * PI, fq: 0.5 + rnd() * 0.5, a: 0, gone: false };\n}\n\n// Keep as many beads, pearls and capsules, as the knob asks for, and two\n// bubbles for every three beads: new ones fade in, spare ones fade out, and\n// the far ones are drawn first.\nfunction census(P, n) {\n  if (!P.beads.length) for (let i = 0; i \u003c SPECKS; i++) P.beads.push(bead(P, 8, 2, P.beads, i, SPECKS));\n  for (let kind = 0; kind \u003c 2; kind++) {\n    const want = kind ? Math.round((n * 2) / 3) : n, live = P.beads.filter((b) => !b.gone && (b.kind === kind || b.kind === kind + 3));\n    if (live.length \u003c want) for (let i = live.length; i \u003c want; i++) P.beads.push(bead(P, n, kind, P.beads, (i * 7) % want, want));\n    else for (let i = want; i \u003c live.length; i++) live[i].gone = true;\n  }\n  P.beads.sort((a, b) => b.z - a.z);\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\nfunction step(P, dt, sp, wob) {\n  P.t += dt * sp * 0.5;\n  // The modes ring like springs; a slow random push keeps them moving by as\n  // much as Wobble asks.\n  const md = P.md, dr = P.drive, k = sp * 0.5;\n  for (let m = 0; m \u003c MODES; m++) {\n    const w = OMEGA[m] * k, ze = 0.07;\n    dr[m] += (rnd() - 0.5) * dt * 6;\n    dr[m] *= 1 - dt * 0.8;\n    const f = dr[m] * (0.6 + 9 * wob) * w * w * 0.25;\n    let x = md[m * 2], v = md[m * 2 + 1];\n    v += (-w * w * x - 2 * ze * w * v + f) * dt;\n    x += v * dt;\n    md[m * 2] = x;\n    md[m * 2 + 1] = v;\n  }\n  // Beads hang from the gel on springs of their own, softer than the gel, so\n  // they lag behind its swing and then catch up; each drifts a little round\n  // its rest point on its own.\n  for (const b of P.beads) {\n    b.a = b.gone ? max(0, b.a - dt * 1.5) : min(1, b.a + dt * 1.5);\n    if (b.gone && b.a \u003c= 0) P.dead = 1;\n    const p = Math.round((b.hy + M) / GS) * GW + Math.round((b.hx + M) / GS);\n    let ux = 0, uy = 0;\n    for (let m = 0; m \u003c MODES; m++) {\n      ux += md[m * 2] * MX[m * GN + p];\n      uy += md[m * 2] * MY[m * GN + p];\n    }\n    const par = 1.15 - 0.4 * b.z, dfx = 1.4 * sin(P.t * b.fq + b.ph), dfy = 1.8 * sin(P.t * b.fq * 0.71 + b.ph * 1.3);\n    const tx = b.hx + ux * par + dfx, ty = b.hy + uy * par + dfy, w = 2.4 * k * (1.1 - 0.3 * b.z);\n    b.vx += ((tx - b.x) * w * w - 2 * 0.12 * w * b.vx) * dt;\n    b.vy += ((ty - b.y) * w * w - 2 * 0.12 * w * b.vy) * dt;\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n  }\n  if (P.dead) (P.beads = P.beads.filter((b) => !b.gone || b.a > 0)), (P.dead = 0);\n}\n\n// Light comes down through the gel's rippled surface and lands on the back\n// wall. Each ray is bent by the surface's slope where it entered, by up to a\n// few LEDs, and by the gel's wobble; where the rays crowd together the wall\n// is bright, the caustic net.\nfunction caustics(P, wob) {\n  const { gx, gy, acc, wv, md } = P;\n  // A jiggling gel ripples more: the bend grows with Wobble and with how\n  // hard the modes are swinging.\n  let e = 0;\n  for (let m = 0; m \u003c MODES; m++) e += abs(md[m * 2]);\n  const amp = (1.1 + 0.8 * wob + 0.15 * min(6, e)) / sqrt(NWV / 3), t = P.t * 2, ph = P.ph, jig = 0.5 + 0.8 * wob + 0.12 * min(6, e);\n  for (let w = 0; w \u003c NWV; w++) ph[w] = wv[w * 8 + 3] - wv[w * 8 + 2] * t + jig * sin(wv[w * 8 + 6] * t + wv[w * 8 + 7]);\n  const m0 = md[0] * 0.8, m1 = md[2] * 0.8, m2 = md[4] * 0.8, m3 = md[6] * 0.8;\n  for (let j = 0, q = 0; j \u003c GH; j++)\n    for (let i = 0; i \u003c GW; i++, q++) {\n      const x = i * GS - M, y = j * GS - M;\n      let sx = 0, sy = 0;\n      for (let w = 0; w \u003c NWV; w++) {\n        const c = fcos(wv[w * 8] * x + wv[w * 8 + 1] * y + ph[w]);\n        sx += wv[w * 8 + 4] * c;\n        sy += wv[w * 8 + 5] * c;\n      }\n      // The back wall moves with the gel, so the whole net swings with it.\n      gx[q] = sx * amp + m0 * MX[q] + m2 * MX[2 * GN + q] + m3 * MX[3 * GN + q];\n      gy[q] = sy * amp + m1 * MY[GN + q] + m2 * MY[2 * GN + q];\n    }\n  acc.fill(0);\n  const wgt = 1 / (SS * SS), inv = 1 / SS, gi = 1 / GS;\n  for (let rj = 0; rj \u003c RH; rj++) {\n    const fy = rj * inv, uy = fy * gi, j0 = floor(uy), ty = uy - j0;\n    for (let ri = 0; ri \u003c RW; ri++) {\n      const fx = ri * inv, ux = fx * gi, i0 = floor(ux), tx = ux - i0, q = j0 * GW + i0;\n      const X = fx - M + (gx[q] * (1 - tx) + gx[q + 1] * tx) * (1 - ty) + (gx[q + GW] * (1 - tx) + gx[q + GW + 1] * tx) * ty;\n      const Y = fy - M + (gy[q] * (1 - tx) + gy[q + 1] * tx) * (1 - ty) + (gy[q + GW] * (1 - tx) + gy[q + GW + 1] * tx) * ty;\n      const ix = floor(X), iy = floor(Y);\n      if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) continue;\n      const ax = X - ix, ay = Y - iy;\n      if (iy >= 0) {\n        if (ix >= 0) acc[iy * W + ix] += wgt * (1 - ax) * (1 - ay);\n        if (ix \u003c W - 1) acc[iy * W + ix + 1] += wgt * ax * (1 - ay);\n      }\n      if (iy \u003c H - 1) {\n        if (ix >= 0) acc[(iy + 1) * W + ix] += wgt * (1 - ax) * ay;\n        if (ix \u003c W - 1) acc[(iy + 1) * W + ix + 1] += wgt * ax * ay;\n      }\n    }\n  }\n  // Gel is not quite clear: the light softens on its way to the wall, and\n  // each line of it gets a halo on the LEDs beside it.\n  blur(acc, P.tmp);\n  blur(acc, P.tmp);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.wob = cl(k[3], 0, 1);\n  const n = cl(Math.round(k[2]), 8, 40);\n  if (n !== P.want) (P.want = n), census(P, n);\n  if (!P.ready) {\n    // The first frame already shows the gel settled and swaying.\n    for (const b of P.beads) b.a = 1;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, P.sp, P.wob);\n    P.ready = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A knock: the sway and the bounce get a hard kick, the others a little.\n    const s = rnd() \u003c 0.5 ? -1 : 1, w = P.sp * 0.5;\n    P.md[1] += s * 10 * OMEGA[0] * w;\n    P.md[3] += (rnd() - 0.5) * 8 * OMEGA[1] * w;\n    P.md[5] += (rnd() - 0.5) * 4 * OMEGA[2] * w;\n    P.md[7] += (rnd() - 0.5) * 3 * OMEGA[3] * w;\n  }\n  let t = d;\n  while (t > 1e-6) {\n    const h = min(t, 1 / 60);\n    step(P, h, P.sp, P.wob);\n    t -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  caustics(P, P.wob);\n  const { acc, bg, col } = P, hue = H0 + P.hue;\n  // Gel light and deep, caustic light, pearl one side, pearl rim, pearl\n  // other side, capsule body and its gathered light. Orange and yellow gel\n  // darkened reads as brown and olive on LEDs, so around those hues the gel\n  // is kept lighter, like honey.\n  const hw = (hue - floor(hue) + 0.38) % 1, am = max(0, 1 - abs(hw - 0.5) / 0.11);\n  hsv(hue, 0.72 - 0.12 * am, 0.62 + 0.3 * am, col, 0);\n  hsv(hue + 0.02, 0.85 - 0.1 * am, 0.3 + 0.38 * am, col, 3);\n  hsv(hue - 0.03, 0.35, 1, col, 6);\n  hsv(hue + 0.12, 0.2, 1, col, 9);\n  hsv(hue - 0.14, 0.6, 1, col, 12);\n  hsv(hue - 0.1, 0.2, 1, col, 15);\n  hsv(hue + 0.05, 0.95, 0.5, col, 18);\n  hsv(hue + 0.02, 0.5, 1, col, 21);\n  // The gel: light from above, so the top glows and the bottom is deeper,\n  // and over it the net of caustic light.\n  for (let y = 0; y \u003c H; y++) {\n    const g = 1 - (0.55 * y) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, l = cl(acc[p] - 0.6, 0, 1.6) * 0.5;\n      for (let q = 0; q \u003c 3; q++) bg[p * 3 + q] = col[q] * g + col[3 + q] * (1 - g) + col[6 + q] * l * (0.55 + 0.45 * g);\n    }\n  }\n  // Beads and bubbles, far ones first.\n  for (const b of P.beads) drawBead(P, b);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, bg[p * 3]), min(255, bg[p * 3 + 1]), min(255, bg[p * 3 + 2]));\n}\n\n// Pearls are lit from above through the gel, their white leaning one way\n// round the colour wheel on one side and the other way on the other, as a\n// pearl's sheen shifts, with a rim and a white highlight. A capsule is clear and deeply tinted: light coming down through\n// it gathers into a bright spot low inside it. An air bubble is clear, the\n// gel behind it brighter, with a thin bright rim and a highlight; a speck is\n// a point of light. Far ones sink into the gel's colour.\nfunction drawBead(P, b) {\n  // A bead swinging through the gel is drawn out a little along its path\n  // and squeezed across it, so it jiggles as it swings and settles round.\n  const ax = abs(b.vx), ay = abs(b.vy), qx = cl(1 + 0.02 * ax - 0.01 * ay, 0.82, 1.18), qy = cl(1 + 0.02 * ay - 0.01 * ax, 0.82, 1.18);\n  const { bg, col, acc } = P, r = b.r, x1 = max(0, floor(b.x - r * qx - 1)), x2 = min(W - 1, floor(b.x + r * qx + 1));\n  const y1 = max(0, floor(b.y - r * qy - 1)), y2 = min(H - 1, floor(b.y + r * qy + 1));\n  const fog = 0.45 * b.z, cp = cl(floor(b.y), 0, H - 1) * W + cl(floor(b.x), 0, W - 1), glint = 0.85 + 0.35 * cl(acc[cp] - 0.6, 0, 1.5);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const dx = (x + 0.5 - b.x) / (r * qx), dy = (y + 0.5 - b.y) / (r * qy), d2 = dx * dx + dy * dy, d = sqrt(d2);\n      const cov = cl((1 - d) * r + 0.5, 0, 1) * b.a;\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - d2)), p = (y * W + x) * 3, rim = pow(1 - nz, 2.2);\n      let R, G, B;\n      if (b.kind === 2) {\n        const k = 0.9 * (1 - d);\n        R = bg[p] + col[6] * k;\n        G = bg[p + 1] + col[7] * k;\n        B = bg[p + 2] + col[8] * k;\n      } else if (b.kind === 1) {\n        // Air in gel: clear in the middle, the light bent into a bright rim,\n        // and a highlight up towards the light.\n        const ring = sm((d - 0.6) / 0.25) * (1 - sm((d - 0.95) / 0.1)), hi = exp(-((dx + 0.35) ** 2 + (dy + 0.4) ** 2) * 22);\n        const k = 0.15 + 0.85 * ring;\n        R = bg[p] * 1.1 + col[6] * k * 0.85 + 255 * hi;\n        G = bg[p + 1] * 1.1 + col[7] * k * 0.85 + 255 * hi;\n        B = bg[p + 2] * 1.1 + col[8] * k * 0.85 + 255 * hi;\n      } else {\n        const hi = pow(max(0, -dx * 0.36 - dy * 0.5 + nz * 0.79), 40) * 255, edge = 1 - 0.3 * sm((d - 0.86) / 0.12);\n        if (b.kind === 0) {\n          const df = max(0, -dx * 0.3 - dy * 0.75 + nz * 0.6), lit = (0.72 + 0.4 * df) * glint * edge, u = cl(0.5 + 0.6 * (dx - dy) * 0.7, 0, 1);\n          R = (col[9] + (col[15] - col[9]) * u) * lit + col[12] * rim * 0.75 + hi;\n          G = (col[10] + (col[16] - col[10]) * u) * lit + col[13] * rim * 0.75 + hi;\n          B = (col[11] + (col[17] - col[11]) * u) * lit + col[14] * rim * 0.75 + hi;\n        } else {\n          const core = exp(-(dx * dx + (dy - 0.42) ** 2) * 5) * glint, body = 0.55 * edge;\n          R = col[18] * body + col[21] * core + col[21] * rim * 0.5 + hi;\n          G = col[19] * body + col[22] * core + col[22] * rim * 0.5 + hi;\n          B = col[20] * body + col[23] * core + col[23] * rim * 0.5 + hi;\n        }\n      }\n      R += (bg[p] - R) * fog;\n      G += (bg[p + 1] - G) * fog;\n      B += (bg[p + 2] - B) * fog;\n      bg[p] += (R - bg[p]) * cov;\n      bg[p + 1] += (G - bg[p + 1]) * cov;\n      bg[p + 2] += (B - bg[p + 2]) * cov;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still."},{"name":"Beads","min":8,"max":40,"about":"How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one."},{"name":"Wobble","min":0,"max":1,"about":"How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging."}],"start":[0,2,8,0.06],"measures":{"motion":0.1786,"detail":0.0286,"edges":0.0792,"complexity":2.417,"coverage":1,"colour":0.2132,"drift":0.1307},"knobResponse":[0.3676,0.1568,0.0763,0.0849]},{"slug":"server-rack","title":"Server Rack","family":"circuit","round":18,"note":"앞에서 본 42U 서버 랙이 패널을 채워요. 맨 위 스위치로 들어온 트래픽이 서버를 타고 내려가며 드라이브 불을 켜고, 백업이 스토리지 선반의 드라이브를 차례로 채워요. K4 를 올리면 바닥 타일에서 올라온 푸른 냉기 빛이 아래쪽 앞판을 물들여요.","idea":"A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","layer":{"id":"layer-server-rack","type":"code","name":"server-rack","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s."},{"name":"Load","min":0,"max":1,"about":"At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often."},{"name":"Aisle","min":0,"max":1,"about":"Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.3413,"detail":0.1038,"edges":0.3523,"complexity":1.287,"coverage":0.6285,"colour":0.2245,"drift":0.0981},"knobResponse":[0.0421,0.0369,0.0435,0.0677]},{"slug":"setting-mist","title":"Setting Mist","family":"cosmetic","round":31,"note":"왼쪽 밖에서 세팅 미스트가 1초에 한 번쯤 뿜어져, 얇은 원뿔이 3분의 1초 만에 구름으로 부풀고 소용돌이를 말며 흘러가다 가라앉아요. 짙은 물빛 바탕에 굵은 방울이 부드럽게 반짝여요. K1 은 색상환을 다 돌고, 누르면 크게 두 번 뿜어요.","idea":"Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.","buttons":"K1 tap fires a big double puff.","code":"// ===== Patternflow pattern =====\n// Title:   Setting Mist\n// Family:  cosmetic\n// Idea:    Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after a setting spray misted across a face\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1\n//\n// Knob 1: Hue. Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown.\n// Knob 2: Speed. How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower.\n// Knob 3: Spray. How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel.\n// Knob 4: Droplets. How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash.\n// Buttons: K1 tap fires a big double puff.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 6000;\nconst { min, max, floor, sin, cos, exp, abs, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The air: a stream function made of six travelling waves, 14 to 40 LEDs\n// long. Its curl moves the mist without bunching it, so the clouds roll.\n// [wavelength, direction, speed of travel, amplitude]\nconst WAVES = [\n  [40, 0.3, 0.6, 1.0],\n  [31, 1.9, -0.8, 0.9],\n  [24, 3.6, 0.9, 0.8],\n  [19, 4.9, -1.1, 0.7],\n  [16, 0.9, 1.3, 0.6],\n  [14, 2.7, -1.5, 0.5],\n].map(([l, a, w, m], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, (m * 4.2) / k, j * 2.4];\n});\n// The flow is worked out on a grid every 4 LEDs and read off between.\nconst GS = 4, GX = W / GS + 2, GY = H / GS + 2;\n// The ground is lit a little from the upper right: its level, 0..1.\nconst BGL = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const lx = (p % W) - 60, ly = floor(p / W) - 20;\n  BGL[p] = (26 + 26 * exp(-(lx * lx + ly * ly) / 5000)) / 255;\n}\n// Round orange and yellow the ground turns to deep navy, given at full\n// brightness like the hue colour it replaces.\nconst NAVY = [60, 95, 255];\n// Puffs are kept in a ring of NP, long enough for every cloud in the air.\nconst NP = 48;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), w: F(MAXP), gp: F(MAXP), gr: F(MAXP), dr: new Uint8Array(MAXP), pid: new Uint8Array(MAXP), ex: F(MAXP), ey: F(MAXP),\n    n: 0, T: 0, next: 0.3, nz: 0, puffs: [], slot: 0,\n    P0: F(NP).fill(-99), PY: F(NP), AX: F(NP), AY: F(NP), PL: F(NP), PG: F(NP), PR: F(NP),\n    U: F(GX * GY), V: F(GX * GY), D: F(N), Y: F(N), G: F(N), tmp: F(N), buf: F(N * 3), col: F(12),\n    hue: 0, spray: 0, drop: 0.06, started: false,\n  };\n}\n\n// A puff: the nozzle at height y, aimed at angle a (0 points straight right),\n// size s. It sprays for a fifth of a second. Its front rolls up like a smoke\n// ring: two eddies either side of the axis, carried out to reach PL and\n// slowing, which curl the cloud back on itself into billows.\nfunction puff(S, y, a, s, delay) {\n  const q = (S.slot = (S.slot + 1) % NP);\n  S.P0[q] = S.T + delay;\n  S.PY[q] = y;\n  S.AX[q] = cos(a);\n  S.AY[q] = sin(a);\n  S.PL[q] = (36 + 12 * s) * (0.85 + 0.3 * rnd());\n  S.PR[q] = 5 + 4 * s;\n  S.PG[q] = (220 + 100 * s) * (0.45 + 0.55 * rnd());\n  S.puffs.push({ q, y, a, s, t: -delay, left: round(380 * s), spread: 0.3 + 0.1 * s });\n}\n\n// The hand moves the bottle up and down the face: each puff comes from a new\n// height, aimed a little toward the middle of the panel.\nfunction fire(S, big) {\n  S.nz += 0.9 + rnd() * 0.8;\n  const y = 64 + 44 * sin(S.nz * 1.3) + (rnd() - 0.5) * 14;\n  const a = -0.45 * ((y - 64) / 64) + (rnd() - 0.5) * 0.3;\n  const s = big ? 2.2 : (1 + 0.7 * S.spray) * (0.8 + 0.4 * rnd());\n  puff(S, y, a, s, 0);\n  if (big || rnd() \u003c 0.22 + 0.3 * S.spray) {\n    const y2 = cl(y + (y \u003c 64 ? 1 : -1) * (14 + rnd() * 14), 8, H - 8);\n    puff(S, y2, -0.45 * ((y2 - 64) / 64) + (rnd() - 0.5) * 0.3, big ? 2 : s * (0.7 + 0.3 * rnd()), 0.16 + rnd() * 0.12);\n  }\n}\n\nfunction emit(S, p, k) {\n  for (let j = 0; j \u003c k && S.n \u003c MAXP; j++) {\n    const i = S.n++;\n    // Droplets leave the nozzle in a cone, faster along its axis.\n    const off = (rnd() + rnd() + rnd() - 1.5) * 2 * p.spread;\n    const a = p.a + off, v = (80 + 160 * rnd() * rnd()) * (0.85 + 0.15 * p.s) * (1 - 0.5 * abs(off));\n    // Each leaves at its own moment within the frame, so the burst does not\n    // start as one bright knot.\n    const lag = rnd() * 0.035;\n    S.x[i] = -3 + v * cos(a) * lag;\n    S.y[i] = p.y + (rnd() - 0.5) * 1.5 + v * sin(a) * lag;\n    S.vx[i] = v * cos(a);\n    S.vy[i] = v * sin(a);\n    S.age[i] = 0;\n    S.life[i] = 2.6 + 1.8 * rnd();\n    S.w[i] = 0.5 + 0.4 * rnd();\n    S.gp[i] = rnd() * 2 * PI;\n    S.gr[i] = 2 + 4 * rnd();\n    S.dr[i] = rnd() \u003c 0.3 + 0.3 * S.drop ? 1 : 0;\n    S.pid[i] = p.q;\n    // Each droplet also wanders off on its own, so the cloud keeps opening.\n    const e = rnd() * 2 * PI, es = 3 + 6 * rnd();\n    S.ex[i] = es * cos(e);\n    S.ey[i] = es * sin(e);\n  }\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.w[i] = S.w[j];\n  S.gp[i] = S.gp[j];\n  S.gr[i] = S.gr[j];\n  S.dr[i] = S.dr[j];\n  S.pid[i] = S.pid[j];\n  S.ex[i] = S.ex[j];\n  S.ey[i] = S.ey[j];\n}\n\nfunction flow(S) {\n  const T = S.T, U = S.U, V = S.V;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      U[gy * GX + gx] = u;\n      V[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  // Puffs on a clock: about one a second at Spray 0, three at Spray 1.\n  S.next -= st;\n  if (S.next \u003c= 0) {\n    fire(S, false);\n    S.next = (1.15 - 0.8 * S.spray) * (0.75 + 0.5 * rnd());\n  }\n  for (let q = S.puffs.length - 1; q >= 0; q--) {\n    const p = S.puffs[q];\n    p.t += st;\n    if (p.t \u003c 0) continue;\n    const k = p.t >= 0.2 ? p.left : min(p.left, round((p.left * st) / max(st, 0.2 - p.t + st)));\n    emit(S, p, k);\n    p.left -= k;\n    if (p.left \u003c= 0) S.puffs.splice(q, 1);\n  }\n  flow(S);\n  const U = S.U, V = S.V, drag = 3.1 - 1.1 * S.drop, fall = 2.5 + 7 * S.drop;\n  const kd = 1 - exp(-drag * st);\n  for (let i = S.n - 1; i >= 0; i--) {\n    const age = (S.age[i] += st);\n    if (age > S.life[i] || S.x[i] > W + 8 || S.y[i] \u003c -10 || S.y[i] > H + 10) {\n      kill(S, i);\n      continue;\n    }\n    const x = S.x[i], y = S.y[i];\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const u = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const v = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    // The young cloud churns hardest, then the air calms to a slow drift\n    // away from the nozzle, and the droplets sink as they age.\n    const churn = 1 + 1.6 * exp(-age * 1.6);\n    let ux = u * churn + 4 + S.ex[i], uy = v * churn - 1.5 + S.ey[i];\n    const q = S.pid[i], pa = S.T - S.P0[q];\n    if (pa \u003c 2.5) {\n      // The puff's two eddies, in the frame of its axis.\n      const ax = S.AX[q], ay = S.AY[q], f = S.PL[q] * (1 - exp(-pa / 0.22));\n      const dx = x + 3 - ax * f, dy = y - S.PY[q] - ay * f;\n      const sa = dx * ax + dy * ay, ta = dy * ax - dx * ay;\n      const R = S.PR[q] * (1 + 0.8 * pa), rc = 9 + 6 * pa, G = S.PG[q] * exp(-pa / 0.8);\n      const t1 = ta - R, t2 = ta + R;\n      const g1 = G / (sa * sa + t1 * t1 + rc), g2 = -G / (sa * sa + t2 * t2 + rc);\n      const vs = -(g1 * t1 + g2 * t2), vt = (g1 + g2) * sa;\n      ux += vs * ax - vt * ay;\n      uy += vs * ay + vt * ax;\n    }\n    S.vx[i] += (ux - S.vx[i]) * kd;\n    S.vy[i] += (uy - S.vy[i]) * kd;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + (S.vy[i] + fall * min(1, age * 0.6)) * st;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0] || 0;\n  S.spray = cl(k[2], 0, 1);\n  S.drop = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the mist already in the air.\n    for (let i = 0; i \u003c 75; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) fire(S, true);\n  step(S, d * rate);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  if (r \u003c 1) return;\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, Y = S.Y, G = S.G, tmp = S.tmp, buf = S.buf, col = S.col, T = S.T, dp = S.drop;\n  D.fill(0);\n  Y.fill(0);\n  G.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i], u = age / S.life[i];\n    const env = min(1, age * 18) * (1 - u) * (1 - u);\n    const x = S.x[i], y = S.y[i];\n    // For the first quarter second the droplets still fly in a thin cone;\n    // then they open into the soft cloud.\n    const yo = age \u003c 0.2 ? 1 : age > 0.6 ? 0 : (0.6 - age) / 0.4;\n    if (yo > 0) {\n      // Flying droplets smear into short streaks along their path.\n      const wy = S.w[i] * env * yo * 0.06, sx = S.vx[i] * 0.007, sy = S.vy[i] * 0.007;\n      for (let j = 0; j \u003c 4; j++) splat(Y, x - sx * j, y - sy * j, wy);\n    }\n    splat(D, x, y, S.w[i] * env * (1 - yo));\n    if (!S.dr[i]) continue;\n    // A droplet glints when it turns the light to the eye: a smooth swell\n    // a few times a second, so nothing strobes.\n    const tw = 0.5 + 0.5 * sin(S.gp[i] + S.gr[i] * T);\n    const t3 = tw * tw * tw, g = env * (1 - 0.8 * yo) * (0.04 + 0.3 * dp + (0.9 + dp) * t3 * t3 * t3);\n    splat(G, x, y, g);\n  }\n  // Haze is soft and wide; droplets keep their shape.\n  const r = 3 - round(2 * dp);\n  blur(D, tmp, r);\n  blur(D, tmp, r > 1 ? r - 1 : r);\n  blur(Y, tmp, 1);\n  blur(Y, tmp, 1);\n  for (let p = 0; p \u003c N; p++) D[p] += Y[p];\n  if (dp > 0.3) {\n    // Coarse spray: the droplets themselves as small soft dots in the cloud.\n    for (let i = 0; i \u003c S.n; i++) {\n      if (!S.dr[i]) continue;\n      const age = S.age[i], u = age / S.life[i];\n      splat(D, S.x[i], S.y[i], (dp - 0.3) * 1.1 * min(1, age * 18) * (1 - u) * (1 - u));\n    }\n  }\n  blur(G, tmp, dp > 0.6 ? 1 : 0);\n  // Deep ground, mist tint and glint colour from the hue. Dark orange reads\n  // brown and dark yellow olive, so round those hues the ground turns to\n  // navy and the mist is lifted to a brighter gold.\n  const h = S.hue + 0.48, hf = h - floor(h), wm = sm(hf / 0.06) * (1 - sm((hf - 0.17) / 0.1));\n  hsv(h, 0.9, 255, col, 0);\n  for (let c = 0; c \u003c 3; c++) col[c] += (NAVY[c] - col[c]) * wm;\n  hsv(h, 0.45 + 0.12 * wm, 255, col, 3);\n  hsv(h, 0.12 + 0.25 * wm, 255, col, 6);\n  const gain = (4.5 - 1.5 * dp) * (1 + 0.6 * wm);\n  for (let y = 0, q = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++, q += 3) {\n      const bg = BGL[p];\n      const a = 1 - exp(-D[p] * gain), g = G[p];\n      // Thin mist glows in the tint, thick mist goes to white.\n      const wt = a * a;\n      for (let c = 0; c \u003c 3; c++) {\n        const mist = col[3 + c] * (1 - wt) + 255 * wt;\n        buf[q + c] = col[c] * bg * (1 - a) + mist * a * 0.92 + col[6 + c] * g;\n      }\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-setting-mist","type":"code","name":"setting-mist","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Setting Mist\n// Family:  cosmetic\n// Idea:    Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after a setting spray misted across a face\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1\n//\n// Knob 1: Hue. Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown.\n// Knob 2: Speed. How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower.\n// Knob 3: Spray. How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel.\n// Knob 4: Droplets. How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash.\n// Buttons: K1 tap fires a big double puff.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 6000;\nconst { min, max, floor, sin, cos, exp, abs, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The air: a stream function made of six travelling waves, 14 to 40 LEDs\n// long. Its curl moves the mist without bunching it, so the clouds roll.\n// [wavelength, direction, speed of travel, amplitude]\nconst WAVES = [\n  [40, 0.3, 0.6, 1.0],\n  [31, 1.9, -0.8, 0.9],\n  [24, 3.6, 0.9, 0.8],\n  [19, 4.9, -1.1, 0.7],\n  [16, 0.9, 1.3, 0.6],\n  [14, 2.7, -1.5, 0.5],\n].map(([l, a, w, m], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, (m * 4.2) / k, j * 2.4];\n});\n// The flow is worked out on a grid every 4 LEDs and read off between.\nconst GS = 4, GX = W / GS + 2, GY = H / GS + 2;\n// The ground is lit a little from the upper right: its level, 0..1.\nconst BGL = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const lx = (p % W) - 60, ly = floor(p / W) - 20;\n  BGL[p] = (26 + 26 * exp(-(lx * lx + ly * ly) / 5000)) / 255;\n}\n// Round orange and yellow the ground turns to deep navy, given at full\n// brightness like the hue colour it replaces.\nconst NAVY = [60, 95, 255];\n// Puffs are kept in a ring of NP, long enough for every cloud in the air.\nconst NP = 48;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), w: F(MAXP), gp: F(MAXP), gr: F(MAXP), dr: new Uint8Array(MAXP), pid: new Uint8Array(MAXP), ex: F(MAXP), ey: F(MAXP),\n    n: 0, T: 0, next: 0.3, nz: 0, puffs: [], slot: 0,\n    P0: F(NP).fill(-99), PY: F(NP), AX: F(NP), AY: F(NP), PL: F(NP), PG: F(NP), PR: F(NP),\n    U: F(GX * GY), V: F(GX * GY), D: F(N), Y: F(N), G: F(N), tmp: F(N), buf: F(N * 3), col: F(12),\n    hue: 0, spray: 0, drop: 0.06, started: false,\n  };\n}\n\n// A puff: the nozzle at height y, aimed at angle a (0 points straight right),\n// size s. It sprays for a fifth of a second. Its front rolls up like a smoke\n// ring: two eddies either side of the axis, carried out to reach PL and\n// slowing, which curl the cloud back on itself into billows.\nfunction puff(S, y, a, s, delay) {\n  const q = (S.slot = (S.slot + 1) % NP);\n  S.P0[q] = S.T + delay;\n  S.PY[q] = y;\n  S.AX[q] = cos(a);\n  S.AY[q] = sin(a);\n  S.PL[q] = (36 + 12 * s) * (0.85 + 0.3 * rnd());\n  S.PR[q] = 5 + 4 * s;\n  S.PG[q] = (220 + 100 * s) * (0.45 + 0.55 * rnd());\n  S.puffs.push({ q, y, a, s, t: -delay, left: round(380 * s), spread: 0.3 + 0.1 * s });\n}\n\n// The hand moves the bottle up and down the face: each puff comes from a new\n// height, aimed a little toward the middle of the panel.\nfunction fire(S, big) {\n  S.nz += 0.9 + rnd() * 0.8;\n  const y = 64 + 44 * sin(S.nz * 1.3) + (rnd() - 0.5) * 14;\n  const a = -0.45 * ((y - 64) / 64) + (rnd() - 0.5) * 0.3;\n  const s = big ? 2.2 : (1 + 0.7 * S.spray) * (0.8 + 0.4 * rnd());\n  puff(S, y, a, s, 0);\n  if (big || rnd() \u003c 0.22 + 0.3 * S.spray) {\n    const y2 = cl(y + (y \u003c 64 ? 1 : -1) * (14 + rnd() * 14), 8, H - 8);\n    puff(S, y2, -0.45 * ((y2 - 64) / 64) + (rnd() - 0.5) * 0.3, big ? 2 : s * (0.7 + 0.3 * rnd()), 0.16 + rnd() * 0.12);\n  }\n}\n\nfunction emit(S, p, k) {\n  for (let j = 0; j \u003c k && S.n \u003c MAXP; j++) {\n    const i = S.n++;\n    // Droplets leave the nozzle in a cone, faster along its axis.\n    const off = (rnd() + rnd() + rnd() - 1.5) * 2 * p.spread;\n    const a = p.a + off, v = (80 + 160 * rnd() * rnd()) * (0.85 + 0.15 * p.s) * (1 - 0.5 * abs(off));\n    // Each leaves at its own moment within the frame, so the burst does not\n    // start as one bright knot.\n    const lag = rnd() * 0.035;\n    S.x[i] = -3 + v * cos(a) * lag;\n    S.y[i] = p.y + (rnd() - 0.5) * 1.5 + v * sin(a) * lag;\n    S.vx[i] = v * cos(a);\n    S.vy[i] = v * sin(a);\n    S.age[i] = 0;\n    S.life[i] = 2.6 + 1.8 * rnd();\n    S.w[i] = 0.5 + 0.4 * rnd();\n    S.gp[i] = rnd() * 2 * PI;\n    S.gr[i] = 2 + 4 * rnd();\n    S.dr[i] = rnd() \u003c 0.3 + 0.3 * S.drop ? 1 : 0;\n    S.pid[i] = p.q;\n    // Each droplet also wanders off on its own, so the cloud keeps opening.\n    const e = rnd() * 2 * PI, es = 3 + 6 * rnd();\n    S.ex[i] = es * cos(e);\n    S.ey[i] = es * sin(e);\n  }\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.w[i] = S.w[j];\n  S.gp[i] = S.gp[j];\n  S.gr[i] = S.gr[j];\n  S.dr[i] = S.dr[j];\n  S.pid[i] = S.pid[j];\n  S.ex[i] = S.ex[j];\n  S.ey[i] = S.ey[j];\n}\n\nfunction flow(S) {\n  const T = S.T, U = S.U, V = S.V;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      U[gy * GX + gx] = u;\n      V[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  // Puffs on a clock: about one a second at Spray 0, three at Spray 1.\n  S.next -= st;\n  if (S.next \u003c= 0) {\n    fire(S, false);\n    S.next = (1.15 - 0.8 * S.spray) * (0.75 + 0.5 * rnd());\n  }\n  for (let q = S.puffs.length - 1; q >= 0; q--) {\n    const p = S.puffs[q];\n    p.t += st;\n    if (p.t \u003c 0) continue;\n    const k = p.t >= 0.2 ? p.left : min(p.left, round((p.left * st) / max(st, 0.2 - p.t + st)));\n    emit(S, p, k);\n    p.left -= k;\n    if (p.left \u003c= 0) S.puffs.splice(q, 1);\n  }\n  flow(S);\n  const U = S.U, V = S.V, drag = 3.1 - 1.1 * S.drop, fall = 2.5 + 7 * S.drop;\n  const kd = 1 - exp(-drag * st);\n  for (let i = S.n - 1; i >= 0; i--) {\n    const age = (S.age[i] += st);\n    if (age > S.life[i] || S.x[i] > W + 8 || S.y[i] \u003c -10 || S.y[i] > H + 10) {\n      kill(S, i);\n      continue;\n    }\n    const x = S.x[i], y = S.y[i];\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const u = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const v = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    // The young cloud churns hardest, then the air calms to a slow drift\n    // away from the nozzle, and the droplets sink as they age.\n    const churn = 1 + 1.6 * exp(-age * 1.6);\n    let ux = u * churn + 4 + S.ex[i], uy = v * churn - 1.5 + S.ey[i];\n    const q = S.pid[i], pa = S.T - S.P0[q];\n    if (pa \u003c 2.5) {\n      // The puff's two eddies, in the frame of its axis.\n      const ax = S.AX[q], ay = S.AY[q], f = S.PL[q] * (1 - exp(-pa / 0.22));\n      const dx = x + 3 - ax * f, dy = y - S.PY[q] - ay * f;\n      const sa = dx * ax + dy * ay, ta = dy * ax - dx * ay;\n      const R = S.PR[q] * (1 + 0.8 * pa), rc = 9 + 6 * pa, G = S.PG[q] * exp(-pa / 0.8);\n      const t1 = ta - R, t2 = ta + R;\n      const g1 = G / (sa * sa + t1 * t1 + rc), g2 = -G / (sa * sa + t2 * t2 + rc);\n      const vs = -(g1 * t1 + g2 * t2), vt = (g1 + g2) * sa;\n      ux += vs * ax - vt * ay;\n      uy += vs * ay + vt * ax;\n    }\n    S.vx[i] += (ux - S.vx[i]) * kd;\n    S.vy[i] += (uy - S.vy[i]) * kd;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + (S.vy[i] + fall * min(1, age * 0.6)) * st;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0] || 0;\n  S.spray = cl(k[2], 0, 1);\n  S.drop = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the mist already in the air.\n    for (let i = 0; i \u003c 75; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) fire(S, true);\n  step(S, d * rate);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  if (r \u003c 1) return;\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, Y = S.Y, G = S.G, tmp = S.tmp, buf = S.buf, col = S.col, T = S.T, dp = S.drop;\n  D.fill(0);\n  Y.fill(0);\n  G.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i], u = age / S.life[i];\n    const env = min(1, age * 18) * (1 - u) * (1 - u);\n    const x = S.x[i], y = S.y[i];\n    // For the first quarter second the droplets still fly in a thin cone;\n    // then they open into the soft cloud.\n    const yo = age \u003c 0.2 ? 1 : age > 0.6 ? 0 : (0.6 - age) / 0.4;\n    if (yo > 0) {\n      // Flying droplets smear into short streaks along their path.\n      const wy = S.w[i] * env * yo * 0.06, sx = S.vx[i] * 0.007, sy = S.vy[i] * 0.007;\n      for (let j = 0; j \u003c 4; j++) splat(Y, x - sx * j, y - sy * j, wy);\n    }\n    splat(D, x, y, S.w[i] * env * (1 - yo));\n    if (!S.dr[i]) continue;\n    // A droplet glints when it turns the light to the eye: a smooth swell\n    // a few times a second, so nothing strobes.\n    const tw = 0.5 + 0.5 * sin(S.gp[i] + S.gr[i] * T);\n    const t3 = tw * tw * tw, g = env * (1 - 0.8 * yo) * (0.04 + 0.3 * dp + (0.9 + dp) * t3 * t3 * t3);\n    splat(G, x, y, g);\n  }\n  // Haze is soft and wide; droplets keep their shape.\n  const r = 3 - round(2 * dp);\n  blur(D, tmp, r);\n  blur(D, tmp, r > 1 ? r - 1 : r);\n  blur(Y, tmp, 1);\n  blur(Y, tmp, 1);\n  for (let p = 0; p \u003c N; p++) D[p] += Y[p];\n  if (dp > 0.3) {\n    // Coarse spray: the droplets themselves as small soft dots in the cloud.\n    for (let i = 0; i \u003c S.n; i++) {\n      if (!S.dr[i]) continue;\n      const age = S.age[i], u = age / S.life[i];\n      splat(D, S.x[i], S.y[i], (dp - 0.3) * 1.1 * min(1, age * 18) * (1 - u) * (1 - u));\n    }\n  }\n  blur(G, tmp, dp > 0.6 ? 1 : 0);\n  // Deep ground, mist tint and glint colour from the hue. Dark orange reads\n  // brown and dark yellow olive, so round those hues the ground turns to\n  // navy and the mist is lifted to a brighter gold.\n  const h = S.hue + 0.48, hf = h - floor(h), wm = sm(hf / 0.06) * (1 - sm((hf - 0.17) / 0.1));\n  hsv(h, 0.9, 255, col, 0);\n  for (let c = 0; c \u003c 3; c++) col[c] += (NAVY[c] - col[c]) * wm;\n  hsv(h, 0.45 + 0.12 * wm, 255, col, 3);\n  hsv(h, 0.12 + 0.25 * wm, 255, col, 6);\n  const gain = (4.5 - 1.5 * dp) * (1 + 0.6 * wm);\n  for (let y = 0, q = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++, q += 3) {\n      const bg = BGL[p];\n      const a = 1 - exp(-D[p] * gain), g = G[p];\n      // Thin mist glows in the tint, thick mist goes to white.\n      const wt = a * a;\n      for (let c = 0; c \u003c 3; c++) {\n        const mist = col[3 + c] * (1 - wt) + 255 * wt;\n        buf[q + c] = col[c] * bg * (1 - a) + mist * a * 0.92 + col[6 + c] * g;\n      }\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower."},{"name":"Spray","min":0,"max":1,"about":"How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel."},{"name":"Droplets","min":0,"max":1,"about":"How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash."}],"start":[0,2,0,0.06],"measures":{"motion":0.1908,"detail":0.0088,"edges":0.0593,"complexity":1.291,"coverage":1,"colour":0.0895,"drift":0.1077},"knobResponse":[0.1473,0.1003,0.1667,0.0634]},{"slug":"seven-shuffles","title":"Seven Shuffles","family":"algo","round":29,"note":"카드 한 벌을 옆에서 본 무지개 막대 더미를 리플 셔플로 섞어요. 한 번 섞을 때마다 그러데이션이 2, 4, 8 갈래로 엇갈려 끼다가 일곱 번쯤에 색종이처럼 흩어지고, 그다음 기수 정렬로 되돌려 다시 시작해요. K4 를 끝까지 돌리면 완벽한 파로 셔플이 되어 32장은 다섯 번 만에 처음 순서로 돌아와요.","idea":"A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.","buttons":"K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.","code":"// ===== Patternflow pattern =====\n// Title:   Seven Shuffles\n// Family:  algo\n// Idea:    A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbert-Shannon-Reeds riffle shuffle (Edgar Gilbert and Claude Shannon, 1955; Jim Reeds, 1981), seven shuffles suffice (Dave Bayer and Persi Diaconis, 1992), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1\n//\n// Knob 1: Hue. Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one.\n// Knob 2: Speed. How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer.\n// Knob 3: Cards. How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines.\n// Knob 4: Neatness. Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128).\n// Buttons: K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.\n\nconst W = 64, H = 128, NMAX = 128;\nconst { min, max, floor, round, exp, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (t) => ((t = cl(t, 0, 1)), t * t * (3 - 2 * t));\nconst rnd = () => Math.random();\n\n// The deck at rest spans columns XL to XL + BW. In a riffle the bottom packet\n// slides DX to the left and the top packet DX to the right, so where they\n// interleave each side shows only its own cards: a comb.\nconst XL = 8, BW = 48, DX = 6;\n// The strip on the left wall shows how far the deck is from random; the\n// marks on the right wall count the riffles.\nconst SX = 0, MX = 63;\n// Where the rainbow starts at Hue 0 (blue) and how much of the wheel it spans.\nconst H0 = 0.6, SPAN = 0.78;\n// Stop shuffling once the deck is this close to random, in total variation:\n// six riffles for 32 cards, seven for 52 (0.334, where six leave 0.614),\n// nine for 128.\nconst ENOUGH = 0.4;\n\n// Phases, and their length in seconds at Speed 2. A riffle splits the deck,\n// drops the cards together and squares it up; an unriffle pass does the\n// same backwards. REST holds the ordered deck before the first riffle, WAIT\n// the shuffled one before it is put back.\nconst REST = 0, SPLIT = 1, DROP = 2, JOIN = 3, PAUSE = 4, WAIT = 5;\nconst RIF = [0.8, 0.3, 0.9, 0.3, 0.25, 1.4], UNR = [0.8, 0.2, 0.55, 0.2, 0.08, 1.4];\n\n// log k! for the binomials in Bayer and Diaconis's formula.\nconst LF = new Float64Array(8400);\nfor (let i = 1; i \u003c LF.length; i++) LF[i] = LF[i - 1] + log(i);\n\n// Bayer and Diaconis: after k riffles, a deck whose order has r rising\n// sequences turns up with probability C(2^k + n - r, n) / 2^(kn), and the\n// Eulerian number A(n, r - 1) counts the orders with r of them. Half the\n// summed gap from 1/n! is the total variation distance from random.\nfunction tvTable(n) {\n  let row = new Float64Array(n + 1), nx = new Float64Array(n + 1);\n  row[0] = 1;\n  for (let m = 2; m \u003c= n; m++) {\n    nx.fill(0);\n    for (let j = 0; j \u003c m; j++) nx[j] = (j + 1) * row[j] + (m - j) * (j > 0 ? row[j - 1] : 0);\n    [row, nx] = [nx, row];\n  }\n  const tv = new Float64Array(14);\n  for (let k = 0; k \u003c 14; k++) {\n    const q = 2 ** k;\n    let s = 0;\n    for (let r = 1; r \u003c= n; r++) {\n      const w = exp(log(row[r - 1]) - LF[n]);\n      const ratio = q >= r ? exp(LF[q + n - r] - LF[q - r] - k * n * Math.LN2) : 0;\n      s += w * abs(ratio - 1);\n    }\n    tv[k] = min(1, s / 2);\n  }\n  return tv;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each card's colour by its place in the new deck, for this Hue.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let c = 0; c \u003c P.n; c++) hsv(hue + H0 + (SPAN * c) / (P.n - 1), 0.88, 255, P.col, c * 3);\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 32, nu: 0, sp: 2, hue: 0,\n    deck: new Int16Array(NMAX), from: new Float32Array(NMAX), to: new Float32Array(NMAX), side: new Int8Array(NMAX), nd: new Int16Array(NMAX),\n    job: 0, ph: REST, t: 0, k: 0, want: 0, pass: 0, bits: 5, tv: null, kmax: 6, faro: 5, strip: 1, glow: 0, mk: new Float32Array(16),\n    col: new Float32Array(NMAX * 3), buf: new Float32Array(W * H * 3), order: new Int16Array(NMAX),\n  };\n  fresh(params.s, 32);\n}\n\n// A new deck of n cards in order: card c at place c, counted from the bottom.\nfunction fresh(P, n) {\n  P.n = n;\n  for (let c = 0; c \u003c n; c++) P.deck[c] = c;\n  P.tv = tvTable(n);\n  P.kmax = 1;\n  while (P.kmax \u003c 13 && P.tv[P.kmax] >= ENOUGH) P.kmax++;\n  P.bits = 1;\n  while (1 \u003c\u003c P.bits \u003c n) P.bits++;\n  // How many perfect out-shuffles bring this deck home.\n  const a = new Int16Array(n), b = new Int16Array(n);\n  for (let c = 0; c \u003c n; c++) a[c] = c;\n  P.faro = 0;\n  do {\n    faro(a, b, n);\n    a.set(b.subarray(0, n));\n    P.faro++;\n  } while (P.faro \u003c 200 && !sorted(a, n));\n  P.job = 0, P.ph = REST, P.t = 0, P.k = 0, P.strip = 1;\n  P.mk.fill(0);\n  paint(P, P.hue);\n}\nfunction sorted(d, n) {\n  for (let i = 0; i \u003c n; i++) if (d[i] !== i) return false;\n  return true;\n}\n// The out-shuffle: the bottom half and the top half alternate from the\n// bottom up, so the bottom and top cards stay where they are.\nfunction faro(a, b, n) {\n  const c = (n + 1) >> 1;\n  for (let i = 0, l = 0, r = c; i \u003c n; i++) b[i] = i & 1 ? a[r++] : a[l++];\n}\n\n// Plan one riffle. The cut is binomial, as if each card picked a hand by a\n// coin; then the cards fall from the bottoms of the two packets, each from a\n// packet with chance in proportion to the cards it still holds. Neatness\n// pulls the cut to the middle and the falls toward strict alternation.\nfunction riffle(P) {\n  const n = P.n, nu = P.nu, d = P.deck;\n  let coin = 0;\n  for (let i = 0; i \u003c n; i++) coin += rnd() \u003c 0.5 ? 1 : 0;\n  const c = cl(round(n / 2 + (coin - n / 2) * (1 - nu) + (n & 1 ? 0.25 : 0)), 0, n);\n  let a = c, b = n - c, l = 0, r = c, last = 1;\n  for (let j = 0; j \u003c n; j++) {\n    const pg = a / (a + b), pa = last > 0 ? 1 : 0;\n    const fromL = b === 0 || (a > 0 && rnd() \u003c (1 - nu) * pg + nu * pa);\n    const card = fromL ? d[l++] : d[r++];\n    fromL ? a-- : b--;\n    last = fromL ? -1 : 1;\n    plan(P, card, fromL ? -1 : 1, j);\n  }\n  P.job = 0;\n}\n\n// Plan one unriffle: a pass of a binary radix sort. Cards whose original\n// place has a 0 in this bit slide left and drop to the bottom, the 1s slide\n// right and rise to the top, each side keeping its order. An inverse riffle\n// is exactly this with the bits drawn at random.\nfunction unriffle(P) {\n  const n = P.n, d = P.deck, bit = 1 \u003c\u003c P.pass;\n  let z = 0;\n  for (let i = 0; i \u003c n; i++) if (!(d[i] & bit)) z++;\n  for (let i = 0, lo = 0, hi = z; i \u003c n; i++) {\n    const card = d[i];\n    if (card & bit) plan(P, card, 1, hi++);\n    else plan(P, card, -1, lo++);\n  }\n  P.job = 1;\n}\n\nfunction plan(P, card, side, j) {\n  P.side[card] = side;\n  P.to[card] = j;\n  P.nd[j] = card;\n}\n\nfunction begin(P) {\n  for (let i = 0; i \u003c P.n; i++) P.from[P.deck[i]] = i;\n  P.ph = SPLIT, P.t = 0;\n}\n\n// What comes after a phase ends.\nfunction next(P) {\n  if (P.ph === SPLIT) return (P.ph = DROP), (P.t = 0);\n  if (P.ph === DROP) return (P.ph = JOIN), (P.t = 0);\n  if (P.ph === JOIN) {\n    for (let j = 0; j \u003c P.n; j++) P.deck[j] = P.nd[j];\n    if (P.job === 0) {\n      P.k++;\n      if (P.k \u003c= 16) P.mk[min(15, P.k - 1)] = 1;\n    } else P.pass++;\n    return (P.ph = PAUSE), (P.t = 0);\n  }\n  // At rest or after a pause, pick what the deck does next.\n  const home = sorted(P.deck, P.n);\n  if (P.job === 1 && P.pass \u003c P.bits) return unriffle(P), begin(P);\n  if (P.job === 1 || (home && P.k > 0)) {\n    // Back in order: by the radix sort, or by itself after perfect faros.\n    if (P.job === 0) P.glow = 1;\n    P.job = 0, P.k = 0;\n    if (P.want \u003c= 0) return (P.ph = REST), (P.t = 0);\n  }\n  if (P.want > 0 || (P.ph !== WAIT && P.k \u003c (P.nu > 0.97 ? max(P.faro, 1) : P.kmax) && P.k \u003c 12)) {\n    P.want = max(0, P.want - 1);\n    return riffle(P), begin(P);\n  }\n  if (P.ph !== WAIT) return (P.ph = WAIT), (P.t = 0);\n  P.pass = 0;\n  return unriffle(P), begin(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 32, 0.06], d = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[2], 32, NMAX));\n  if (n !== P.n) fresh(P, n);\n  if (P.hue !== k[0]) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  // Below a tenth the riffle is the pure random one the strip is true for.\n  P.nu = cl((k[3] - 0.1) / 0.9, 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.want++;\n    if (P.ph === REST || P.ph === WAIT) next(P);\n  }\n  // The hands slow down with Speed, but the waits between riffles do not\n  // drag on past a second or two.\n  const still = P.ph === REST || P.ph === WAIT || P.ph === PAUSE;\n  P.t += d * (still ? max(P.sp / 2, 0.75) : P.sp / 2);\n  const T = P.job ? UNR : RIF;\n  if (P.t >= T[P.ph]) next(P);\n\n  // The strip eases to the distance after k riffles, back to full once the\n  // deck is being put in order; it fades out as the riffles grow neat, where\n  // the formula no longer holds.\n  const goal = P.job === 1 ? 1 : P.tv[min(13, P.k)];\n  P.strip += (goal - P.strip) * min(1, d * 3);\n  P.glow = max(0, P.glow - d * 0.7);\n  for (let i = 0; i \u003c 16; i++) {\n    const on = i \u003c P.k && P.job === 0 ? 1 : 0;\n    P.mk[i] += (on * 0.55 - P.mk[i]) * min(1, d * (on ? 6 : 2.5));\n  }\n}\n\n// One card edge-on: h rows from row top, its face lit from above and its\n// lower edge dim (dark for the thick cards, a faint line at two rows a\n// card), across columns a to a + BW with the ends anti-aliased.\nfunction card(P, c, top, h, a, pass) {\n  const buf = P.buf, col = P.col, b = a + BW, gap = h >= 3 ? 0 : 0.28;\n  const g = P.glow * P.glow * 0.6, r0 = col[c * 3], g0 = col[c * 3 + 1], b0 = col[c * 3 + 2];\n  const R = r0 + (255 - r0) * g, G = g0 + (255 - g0) * g, B = b0 + (255 - b0) * g;\n  for (let yy = 0; yy \u003c h; yy++) {\n    const Y = top + yy, edge = yy === h - 1 && h > 1;\n    if (Y \u003c 0 || Y >= H || edge !== (pass === 0)) continue;\n    const lv = edge ? gap : 1 - 0.13 * yy;\n    for (let x = max(0, floor(a)); x \u003c= min(W - 1, floor(b)); x++) {\n      const w = (min(x + 1, b) - max(x, a)) * lv, q = (Y * W + x) * 3;\n      if (w \u003c= 0) continue;\n      buf[q] += (R - buf[q]) * w;\n      buf[q + 1] += (G - buf[q + 1]) * w;\n      buf[q + 2] += (B - buf[q + 2]) * w;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, buf = P.buf, T = P.job ? UNR : RIF, u = P.t / T[P.ph];\n  const h = n \u003c= 32 ? 4 : n \u003c= 42 ? 3 : n \u003c= 64 ? 2 : 1, y0 = floor((H - n * h) / 2);\n  buf.fill(0);\n  const moving = P.ph === SPLIT || P.ph === DROP || P.ph === JOIN;\n  // While the packets pass through each other the right one is in front.\n  const ord = P.order;\n  if (P.ph === SPLIT || P.ph === DROP) {\n    let m = 0;\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] \u003c 0) ord[m++] = P.nd[j];\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] > 0) ord[m++] = P.nd[j];\n  } else for (let j = 0; j \u003c n; j++) ord[j] = moving ? P.nd[j] : P.deck[j];\n  // Two passes: the dim edge rows first, then the faces, so a card passing\n  // in front never greys another card's face with its edge.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let j = 0; j \u003c n; j++) {\n      const c = ord[j];\n      let y = j, off = 0;\n      if (moving) {\n        const s = P.side[c] * DX;\n        if (P.ph === SPLIT) (y = P.from[c]), (off = s * ease(u));\n        else if (P.ph === DROP) (y = P.from[c] + (P.to[c] - P.from[c]) * ease(u)), (off = s);\n        else (y = P.to[c]), (off = s * (1 - ease(u)));\n      }\n      card(P, c, y0 + round((n - 1 - y) * h), h, XL + off, pass);\n    }\n  // The strip: full height while the deck is far from random, sinking as\n  // the riffles add up.\n  const fade = max(0, 1 - P.nu * 8), sh = P.strip * H;\n  if (fade > 0)\n    for (let y = 0; y \u003c H; y++) {\n      const w = cl(sh - (H - 1 - y), 0, 1) * fade * (H - y \u003c sh - 1.5 ? 0.38 : 0.85), q = (y * W + SX) * 3;\n      buf[q] = 230 * w, buf[q + 1] = 226 * w, buf[q + 2] = 214 * w;\n    }\n  // One mark per riffle down the right wall.\n  for (let i = 0; i \u003c 16; i++) {\n    const w = P.mk[i];\n    if (w \u003c 0.02) continue;\n    for (let y = 2 + i * 6; y \u003c 5 + i * 6 && y \u003c H; y++) {\n      const q = (y * W + MX) * 3;\n      buf[q] = 240 * w, buf[q + 1] = 236 * w, buf[q + 2] = 224 * w;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-seven-shuffles","type":"code","name":"seven-shuffles","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Seven Shuffles\n// Family:  algo\n// Idea:    A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbert-Shannon-Reeds riffle shuffle (Edgar Gilbert and Claude Shannon, 1955; Jim Reeds, 1981), seven shuffles suffice (Dave Bayer and Persi Diaconis, 1992), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1\n//\n// Knob 1: Hue. Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one.\n// Knob 2: Speed. How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer.\n// Knob 3: Cards. How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines.\n// Knob 4: Neatness. Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128).\n// Buttons: K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.\n\nconst W = 64, H = 128, NMAX = 128;\nconst { min, max, floor, round, exp, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (t) => ((t = cl(t, 0, 1)), t * t * (3 - 2 * t));\nconst rnd = () => Math.random();\n\n// The deck at rest spans columns XL to XL + BW. In a riffle the bottom packet\n// slides DX to the left and the top packet DX to the right, so where they\n// interleave each side shows only its own cards: a comb.\nconst XL = 8, BW = 48, DX = 6;\n// The strip on the left wall shows how far the deck is from random; the\n// marks on the right wall count the riffles.\nconst SX = 0, MX = 63;\n// Where the rainbow starts at Hue 0 (blue) and how much of the wheel it spans.\nconst H0 = 0.6, SPAN = 0.78;\n// Stop shuffling once the deck is this close to random, in total variation:\n// six riffles for 32 cards, seven for 52 (0.334, where six leave 0.614),\n// nine for 128.\nconst ENOUGH = 0.4;\n\n// Phases, and their length in seconds at Speed 2. A riffle splits the deck,\n// drops the cards together and squares it up; an unriffle pass does the\n// same backwards. REST holds the ordered deck before the first riffle, WAIT\n// the shuffled one before it is put back.\nconst REST = 0, SPLIT = 1, DROP = 2, JOIN = 3, PAUSE = 4, WAIT = 5;\nconst RIF = [0.8, 0.3, 0.9, 0.3, 0.25, 1.4], UNR = [0.8, 0.2, 0.55, 0.2, 0.08, 1.4];\n\n// log k! for the binomials in Bayer and Diaconis's formula.\nconst LF = new Float64Array(8400);\nfor (let i = 1; i \u003c LF.length; i++) LF[i] = LF[i - 1] + log(i);\n\n// Bayer and Diaconis: after k riffles, a deck whose order has r rising\n// sequences turns up with probability C(2^k + n - r, n) / 2^(kn), and the\n// Eulerian number A(n, r - 1) counts the orders with r of them. Half the\n// summed gap from 1/n! is the total variation distance from random.\nfunction tvTable(n) {\n  let row = new Float64Array(n + 1), nx = new Float64Array(n + 1);\n  row[0] = 1;\n  for (let m = 2; m \u003c= n; m++) {\n    nx.fill(0);\n    for (let j = 0; j \u003c m; j++) nx[j] = (j + 1) * row[j] + (m - j) * (j > 0 ? row[j - 1] : 0);\n    [row, nx] = [nx, row];\n  }\n  const tv = new Float64Array(14);\n  for (let k = 0; k \u003c 14; k++) {\n    const q = 2 ** k;\n    let s = 0;\n    for (let r = 1; r \u003c= n; r++) {\n      const w = exp(log(row[r - 1]) - LF[n]);\n      const ratio = q >= r ? exp(LF[q + n - r] - LF[q - r] - k * n * Math.LN2) : 0;\n      s += w * abs(ratio - 1);\n    }\n    tv[k] = min(1, s / 2);\n  }\n  return tv;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each card's colour by its place in the new deck, for this Hue.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let c = 0; c \u003c P.n; c++) hsv(hue + H0 + (SPAN * c) / (P.n - 1), 0.88, 255, P.col, c * 3);\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 32, nu: 0, sp: 2, hue: 0,\n    deck: new Int16Array(NMAX), from: new Float32Array(NMAX), to: new Float32Array(NMAX), side: new Int8Array(NMAX), nd: new Int16Array(NMAX),\n    job: 0, ph: REST, t: 0, k: 0, want: 0, pass: 0, bits: 5, tv: null, kmax: 6, faro: 5, strip: 1, glow: 0, mk: new Float32Array(16),\n    col: new Float32Array(NMAX * 3), buf: new Float32Array(W * H * 3), order: new Int16Array(NMAX),\n  };\n  fresh(params.s, 32);\n}\n\n// A new deck of n cards in order: card c at place c, counted from the bottom.\nfunction fresh(P, n) {\n  P.n = n;\n  for (let c = 0; c \u003c n; c++) P.deck[c] = c;\n  P.tv = tvTable(n);\n  P.kmax = 1;\n  while (P.kmax \u003c 13 && P.tv[P.kmax] >= ENOUGH) P.kmax++;\n  P.bits = 1;\n  while (1 \u003c\u003c P.bits \u003c n) P.bits++;\n  // How many perfect out-shuffles bring this deck home.\n  const a = new Int16Array(n), b = new Int16Array(n);\n  for (let c = 0; c \u003c n; c++) a[c] = c;\n  P.faro = 0;\n  do {\n    faro(a, b, n);\n    a.set(b.subarray(0, n));\n    P.faro++;\n  } while (P.faro \u003c 200 && !sorted(a, n));\n  P.job = 0, P.ph = REST, P.t = 0, P.k = 0, P.strip = 1;\n  P.mk.fill(0);\n  paint(P, P.hue);\n}\nfunction sorted(d, n) {\n  for (let i = 0; i \u003c n; i++) if (d[i] !== i) return false;\n  return true;\n}\n// The out-shuffle: the bottom half and the top half alternate from the\n// bottom up, so the bottom and top cards stay where they are.\nfunction faro(a, b, n) {\n  const c = (n + 1) >> 1;\n  for (let i = 0, l = 0, r = c; i \u003c n; i++) b[i] = i & 1 ? a[r++] : a[l++];\n}\n\n// Plan one riffle. The cut is binomial, as if each card picked a hand by a\n// coin; then the cards fall from the bottoms of the two packets, each from a\n// packet with chance in proportion to the cards it still holds. Neatness\n// pulls the cut to the middle and the falls toward strict alternation.\nfunction riffle(P) {\n  const n = P.n, nu = P.nu, d = P.deck;\n  let coin = 0;\n  for (let i = 0; i \u003c n; i++) coin += rnd() \u003c 0.5 ? 1 : 0;\n  const c = cl(round(n / 2 + (coin - n / 2) * (1 - nu) + (n & 1 ? 0.25 : 0)), 0, n);\n  let a = c, b = n - c, l = 0, r = c, last = 1;\n  for (let j = 0; j \u003c n; j++) {\n    const pg = a / (a + b), pa = last > 0 ? 1 : 0;\n    const fromL = b === 0 || (a > 0 && rnd() \u003c (1 - nu) * pg + nu * pa);\n    const card = fromL ? d[l++] : d[r++];\n    fromL ? a-- : b--;\n    last = fromL ? -1 : 1;\n    plan(P, card, fromL ? -1 : 1, j);\n  }\n  P.job = 0;\n}\n\n// Plan one unriffle: a pass of a binary radix sort. Cards whose original\n// place has a 0 in this bit slide left and drop to the bottom, the 1s slide\n// right and rise to the top, each side keeping its order. An inverse riffle\n// is exactly this with the bits drawn at random.\nfunction unriffle(P) {\n  const n = P.n, d = P.deck, bit = 1 \u003c\u003c P.pass;\n  let z = 0;\n  for (let i = 0; i \u003c n; i++) if (!(d[i] & bit)) z++;\n  for (let i = 0, lo = 0, hi = z; i \u003c n; i++) {\n    const card = d[i];\n    if (card & bit) plan(P, card, 1, hi++);\n    else plan(P, card, -1, lo++);\n  }\n  P.job = 1;\n}\n\nfunction plan(P, card, side, j) {\n  P.side[card] = side;\n  P.to[card] = j;\n  P.nd[j] = card;\n}\n\nfunction begin(P) {\n  for (let i = 0; i \u003c P.n; i++) P.from[P.deck[i]] = i;\n  P.ph = SPLIT, P.t = 0;\n}\n\n// What comes after a phase ends.\nfunction next(P) {\n  if (P.ph === SPLIT) return (P.ph = DROP), (P.t = 0);\n  if (P.ph === DROP) return (P.ph = JOIN), (P.t = 0);\n  if (P.ph === JOIN) {\n    for (let j = 0; j \u003c P.n; j++) P.deck[j] = P.nd[j];\n    if (P.job === 0) {\n      P.k++;\n      if (P.k \u003c= 16) P.mk[min(15, P.k - 1)] = 1;\n    } else P.pass++;\n    return (P.ph = PAUSE), (P.t = 0);\n  }\n  // At rest or after a pause, pick what the deck does next.\n  const home = sorted(P.deck, P.n);\n  if (P.job === 1 && P.pass \u003c P.bits) return unriffle(P), begin(P);\n  if (P.job === 1 || (home && P.k > 0)) {\n    // Back in order: by the radix sort, or by itself after perfect faros.\n    if (P.job === 0) P.glow = 1;\n    P.job = 0, P.k = 0;\n    if (P.want \u003c= 0) return (P.ph = REST), (P.t = 0);\n  }\n  if (P.want > 0 || (P.ph !== WAIT && P.k \u003c (P.nu > 0.97 ? max(P.faro, 1) : P.kmax) && P.k \u003c 12)) {\n    P.want = max(0, P.want - 1);\n    return riffle(P), begin(P);\n  }\n  if (P.ph !== WAIT) return (P.ph = WAIT), (P.t = 0);\n  P.pass = 0;\n  return unriffle(P), begin(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 32, 0.06], d = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[2], 32, NMAX));\n  if (n !== P.n) fresh(P, n);\n  if (P.hue !== k[0]) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  // Below a tenth the riffle is the pure random one the strip is true for.\n  P.nu = cl((k[3] - 0.1) / 0.9, 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.want++;\n    if (P.ph === REST || P.ph === WAIT) next(P);\n  }\n  // The hands slow down with Speed, but the waits between riffles do not\n  // drag on past a second or two.\n  const still = P.ph === REST || P.ph === WAIT || P.ph === PAUSE;\n  P.t += d * (still ? max(P.sp / 2, 0.75) : P.sp / 2);\n  const T = P.job ? UNR : RIF;\n  if (P.t >= T[P.ph]) next(P);\n\n  // The strip eases to the distance after k riffles, back to full once the\n  // deck is being put in order; it fades out as the riffles grow neat, where\n  // the formula no longer holds.\n  const goal = P.job === 1 ? 1 : P.tv[min(13, P.k)];\n  P.strip += (goal - P.strip) * min(1, d * 3);\n  P.glow = max(0, P.glow - d * 0.7);\n  for (let i = 0; i \u003c 16; i++) {\n    const on = i \u003c P.k && P.job === 0 ? 1 : 0;\n    P.mk[i] += (on * 0.55 - P.mk[i]) * min(1, d * (on ? 6 : 2.5));\n  }\n}\n\n// One card edge-on: h rows from row top, its face lit from above and its\n// lower edge dim (dark for the thick cards, a faint line at two rows a\n// card), across columns a to a + BW with the ends anti-aliased.\nfunction card(P, c, top, h, a, pass) {\n  const buf = P.buf, col = P.col, b = a + BW, gap = h >= 3 ? 0 : 0.28;\n  const g = P.glow * P.glow * 0.6, r0 = col[c * 3], g0 = col[c * 3 + 1], b0 = col[c * 3 + 2];\n  const R = r0 + (255 - r0) * g, G = g0 + (255 - g0) * g, B = b0 + (255 - b0) * g;\n  for (let yy = 0; yy \u003c h; yy++) {\n    const Y = top + yy, edge = yy === h - 1 && h > 1;\n    if (Y \u003c 0 || Y >= H || edge !== (pass === 0)) continue;\n    const lv = edge ? gap : 1 - 0.13 * yy;\n    for (let x = max(0, floor(a)); x \u003c= min(W - 1, floor(b)); x++) {\n      const w = (min(x + 1, b) - max(x, a)) * lv, q = (Y * W + x) * 3;\n      if (w \u003c= 0) continue;\n      buf[q] += (R - buf[q]) * w;\n      buf[q + 1] += (G - buf[q + 1]) * w;\n      buf[q + 2] += (B - buf[q + 2]) * w;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, buf = P.buf, T = P.job ? UNR : RIF, u = P.t / T[P.ph];\n  const h = n \u003c= 32 ? 4 : n \u003c= 42 ? 3 : n \u003c= 64 ? 2 : 1, y0 = floor((H - n * h) / 2);\n  buf.fill(0);\n  const moving = P.ph === SPLIT || P.ph === DROP || P.ph === JOIN;\n  // While the packets pass through each other the right one is in front.\n  const ord = P.order;\n  if (P.ph === SPLIT || P.ph === DROP) {\n    let m = 0;\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] \u003c 0) ord[m++] = P.nd[j];\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] > 0) ord[m++] = P.nd[j];\n  } else for (let j = 0; j \u003c n; j++) ord[j] = moving ? P.nd[j] : P.deck[j];\n  // Two passes: the dim edge rows first, then the faces, so a card passing\n  // in front never greys another card's face with its edge.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let j = 0; j \u003c n; j++) {\n      const c = ord[j];\n      let y = j, off = 0;\n      if (moving) {\n        const s = P.side[c] * DX;\n        if (P.ph === SPLIT) (y = P.from[c]), (off = s * ease(u));\n        else if (P.ph === DROP) (y = P.from[c] + (P.to[c] - P.from[c]) * ease(u)), (off = s);\n        else (y = P.to[c]), (off = s * (1 - ease(u)));\n      }\n      card(P, c, y0 + round((n - 1 - y) * h), h, XL + off, pass);\n    }\n  // The strip: full height while the deck is far from random, sinking as\n  // the riffles add up.\n  const fade = max(0, 1 - P.nu * 8), sh = P.strip * H;\n  if (fade > 0)\n    for (let y = 0; y \u003c H; y++) {\n      const w = cl(sh - (H - 1 - y), 0, 1) * fade * (H - y \u003c sh - 1.5 ? 0.38 : 0.85), q = (y * W + SX) * 3;\n      buf[q] = 230 * w, buf[q + 1] = 226 * w, buf[q + 2] = 214 * w;\n    }\n  // One mark per riffle down the right wall.\n  for (let i = 0; i \u003c 16; i++) {\n    const w = P.mk[i];\n    if (w \u003c 0.02) continue;\n    for (let y = 2 + i * 6; y \u003c 5 + i * 6 && y \u003c H; y++) {\n      const q = (y * W + MX) * 3;\n      buf[q] = 240 * w, buf[q + 1] = 236 * w, buf[q + 2] = 224 * w;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer."},{"name":"Cards","min":32,"max":128,"about":"How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines."},{"name":"Neatness","min":0,"max":1,"about":"Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128)."}],"start":[0,2,32,0.06],"measures":{"motion":3.42,"detail":0.1826,"edges":0.5208,"complexity":0.0962,"coverage":0.5604,"colour":0.575,"drift":0.2123},"knobResponse":[0.3602,0.3179,0.3253,0.2206]},{"slug":"shadow-play","title":"Shadow Play","family":"stage","round":26,"note":"등잔 불빛을 받은 흰 막에 와양 쿨릿 가죽 인형의 레이스 그림자가 비쳐요. 기사가 거인과 싸워 던져 버리면 구눙안이 떨며 쓸고 들어와 다음 장을 열고, K1 을 돌리면 막 뒤로 돌아가 금빛과 빨강, 남색 칠이 보여요.","idea":"Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.","buttons":"K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.","code":"// ===== Patternflow pattern =====\n// Title:   Shadow Play\n// Family:  stage\n// Idea:    Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the Javanese wayang kulit shadow play\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1\n//\n// Knob 1: View. At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp.\n// Knob 2: Speed. The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower.\n// Knob 3: Lamp. How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs.\n// Knob 4: Flicker. How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften.\n// Buttons: K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Rows: the top beam, the cloth, the line the puppets stand on, the hem, the banana trunk, the first row the audience can reach.\nconst BEAM = 3, CLOTH = 10, GROUND = 92, HEM = 103, TRUNK = 104, AUD = 88;\n// One scene in story seconds (real seconds at Speed 2).\nconst SCENE = 14.4;\n// The paint, seen from the dalang's side.\nconst GOLD = [0.95, 0.72, 0.26], RED = [0.86, 0.2, 0.13], INDIGO = [0.22, 0.3, 0.8], TEAL = [0.1, 0.52, 0.48], HAIR = [0.13, 0.1, 0.15];\nconst HORN = [0.32, 0.2, 0.11], BAMBOO = [0.62, 0.5, 0.3], IVORY = [0.96, 0.92, 0.82];\n// Lace: the punched holes, as a lattice in puppet space: spacing along, spacing across, laid diagonally.\nconst LA = [0, 2.5, 2.0, 1.9, 2.3], LB = [0, 2.5, 3.6, 1.9, 2.3], LD = [0, 0, 1, 0, 0], LR = [0, 0.9, 0.9, 0.8, 1.15];\n\n// Knight and ogre outlines in puppet space: x forward, y up from the soles.\nconst K_TORSO = [-5.2, 40.4, -3.6, 41.6, 3.2, 41.6, 4.6, 40.4, 3.4, 35, 1.9, 28.5, -2.1, 28.5, -3.6, 35];\nconst K_KAIN = [-3.2, 28.5, 3.2, 28.5, 4.4, 20, 3.4, 13, 1.6, 5, -0.6, 13, -4.5, 16, -9.8, 9.5, -5.8, 22];\nconst K_NOSE = [3.8, 49.6, 8.6, 45.2, 4.6, 46.4];\nconst O_TORSO = [-8.2, 47, -6.5, 48.4, 6, 48.4, 7.8, 46.5, 7, 38, 5.5, 31, -5.5, 31, -7.5, 39];\nconst O_KAIN = [-6.2, 31.5, 6.2, 31.5, 8.8, 21.5, 2, 17, -4, 19.5, -10, 23];\nconst O_CROWN = [-0.5, 58.5, 6.2, 58.5, 5.4, 62, 2.8, 67, 0.2, 61.8];\n\n// Where the knight and the ogre stand through a scene: story second, column (a scene that runs left to right).\nconst KX = [1.7, -16, 3.6, 18, 5.6, 14, 6, 23, 6.4, 14, 6.8, 17, 7.2, 13, 7.6, 24, 8, 16, 8.5, 20, 9, 22, 10.8, 28, 12.3, 86];\nconst OX = [2.3, 84, 4.2, 47, 5.6, 50, 6, 47, 6.4, 49, 6.8, 40, 7.2, 50, 7.6, 47, 8, 39, 8.5, 42, 9, 40];\nfunction key(t, k) {\n  if (t \u003c= k[0]) return k[1];\n  for (let i = 2; i \u003c k.length; i += 2) if (t \u003c k[i]) return mix(k[i - 1], k[i + 1], sm(k[i - 2], k[i], t));\n  return k[k.length - 1];\n}\nconst pose = (hc, sz) => ({ on: false, x: 32, y: GROUND, z: 0.02, rot: 0, face: 1, a1: 0, a2: 0, b1: 0, b2: 0, jaw: 0, hc, sz });\n\nexport function setup(params) {\n  const R = () => Math.random() * TAU;\n  const P = (params.s = {\n    M: new Float32Array(N), A: new Float32Array(N), C: new Float32Array(N * 3), F: new Float32Array(N * 3),\n    BG: new Float32Array(N * 3), PT: new Uint8Array(N), LW: new Float32Array(81), HB: new Float32Array((H - AUD) * W),\n    t: 0, rt: 0, view: 0, lamp: 0, fl: 0.06, knock: -1, ph: [R(), R(), R(), R(), R(), R(), R()], dir: Math.random() \u003c 0.5 ? 1 : -1,\n    K: pose(28, 1.22), O: pose(32, 1.12), G: pose(0, 1.04), I: 1, bil: 0, LX: 31.5, LY: 46, flame: 7, shx: 0, shy: 0,\n  });\n  // The puppets planted in the trunk at either end of the screen, only their fronts showing: an ogre king, a knight.\n  P.SIMP = [[-6.5, 1, 1.32, 0], [65.5, -1, 1.4, 1]].map(([x, face, sz, k]) => Object.assign(pose(30, sz), { x, face, k, y: GROUND + 4, a2: 0.1, b1: -0.1, b2: 0.15 }));\n  // Half the gunungan's width at each height: a leaf with a pointed tip.\n  for (let v = 0; v \u003c= 80; v++) P.LW[v] = v > 78 ? 0 : v \u003c 22 ? 18 * sqrt(1 - ((22 - v) / 31) ** 2) : 18 * (1 - ((v - 22) / 56) ** 1.7) ** 1.15;\n  // What does not move, as colour before the light: beam, border, posts, cloth, hem, trunk, floor.\n  const B = P.BG;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.02, 0.018, 0.03], t = 1;\n    if (y >= BEAM && y \u003c BEAM + 4) {\n      const g = [0.55, 0.85, 1, 0.65][y - BEAM] * ((x + (y & 1) * 2) % 5 === 0 ? 0.55 : 0.9 + 0.1 * n);\n      c = [0.5 * g, 0.31 * g, 0.16 * g];\n    } else if (y >= BEAM + 4 && y \u003c CLOTH) c = y === CLOTH - 1 ? (x & 1 ? [0.85, 0.62, 0.24] : [0.3, 0.07, 0.06]) : [0.34, 0.07, 0.06].map((v) => v * (0.85 + 0.15 * n));\n    else if (y >= CLOTH && y \u003c HEM && (x \u003c 2 || x > 61)) {\n      const g = x === 1 || x === 62 ? 0.75 : 0.42;\n      c = [0.46 * g, 0.28 * g, 0.15 * g];\n    } else if (y >= CLOTH && y \u003c HEM) (t = 0), (c = [0.955 + 0.045 * n - (y === 57 ? 0.07 : y === 58 ? 0.025 : 0) - (x & 1 ? 0.012 : 0), 0, 0]);\n    else if (y === HEM) c = [0.3, 0.06, 0.05];\n    else if (y >= TRUNK && y \u003c TRUNK + 8) {\n      const g = [0.7, 1, 0.95, 0.85, 0.72, 0.58, 0.44, 0.3][y - TRUNK] * (0.82 + 0.18 * hash(floor(x / 4) + y * 17, y));\n      (t = 2), (c = [0.6 * g, 0.64 * g, 0.4 * g]);\n    } else if (y >= TRUNK + 8) c = [0.05, 0.035, 0.03].map((v) => v * (1 - (y - TRUNK - 8) / 20));\n    (B[o] = c[0]), (B[o + 1] = c[1]), (B[o + 2] = c[2]), (P.PT[i] = t);\n  }\n}\n\n// The knight's scene, in story seconds, for a scene that runs left to right.\nfunction knight(t, Q, rt, kb) {\n  Q.on = t > 1.7 && t \u003c 12.3;\n  Q.x = key(t, KX);\n  const v = (key(t + 0.05, KX) - key(t - 0.05, KX)) * 10, walk = cl(abs(v) / 12, 0, 1), st = sin(PI * t * 2.6);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((Q.x - 14) / 9, 0, 1);\n  const point = sm(3.7, 4.1, t) * (1 - sm(4.8, 5.2, t)), heave = sm(8.5, 9.1, t) * (1 - sm(9.7, 10.5, t));\n  Q.y = GROUND - walk * 1.8 * abs(st);\n  Q.z = 0.03;\n  Q.rot = -0.05 * walk + fight * 0.06 * sin(w + 0.5) + heave * 0.16 - 0.14 * kb;\n  Q.a1 = 0.12 + 0.3 * walk * st + 1.45 * point + fight * 0.7 + 1.5 * reach + 2.5 * heave + 1.4 * kb;\n  Q.a2 = 0.15 + 0.35 * point + fight * 0.9 - 0.7 * reach + 0.2 * heave;\n  Q.b1 = -0.12 + 0.06 * sin(rt * 1.7) - 0.25 * walk * st + fight * 0.3 * sin(w + 2);\n  Q.b2 = 0.2;\n}\n\n// The ogre: in from the other side, a looming threat, the fight, the throw.\nfunction ogre(t, Q, rt, kb) {\n  Q.on = t > 2.3 && t \u003c 10.6;\n  const u = cl((t - 9.2) / 1.4, 0, 1);\n  Q.x = key(t, OX) + 30 * u;\n  const v = (key(t + 0.05, OX) - key(t - 0.05, OX)) * 10, walk = cl(abs(v) / 12, 0, 1) * (1 - u), st = sin(PI * t * 2.1);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((50 - Q.x) / 10, 0, 1);\n  const loom = sm(4.3, 4.9, t) * (1 - sm(4.95, 5.5, t));\n  Q.y = GROUND - walk * 2.6 * abs(st) - 115 * u * u;\n  Q.z = 0.03 + 0.16 * loom + 0.28 * u;\n  Q.rot = -0.04 * walk + 0.07 * walk * st - 0.1 * loom + fight * 0.07 * sin(w + 3.6) + 5.6 * u + 0.35 * kb;\n  Q.a1 = 0.3 + 0.25 * walk * st + 2.0 * loom + fight * (0.6 + 0.3 * sin(w)) + 1.6 * reach + 1.2 * u;\n  Q.a2 = 0.35 + 0.5 * loom + fight * 0.6 - 0.5 * reach;\n  Q.b1 = -0.4 - 0.3 * walk * st + 0.5 * loom; Q.b2 = 0.5;\n  Q.jaw = 0.08 + loom * (0.25 + 0.15 * sin(rt * 14)) + fight * 0.25 * (0.5 + 0.5 * sin(w * 2)) + 0.45 * u + 0.4 * kb;\n}\n\n// The gunungan: planted in the middle, pulled away trembling, back at the end.\nfunction gunungan(t, Q, rt, kb) {\n  Q.on = t \u003c 3.3 || t > 10.5;\n  let e, mv;\n  if (t \u003c 7) (e = cl((t - 1.4) / 1.9, 0, 1) ** 2), (Q.x = 32 + 58 * e), (mv = sin(PI * cl((t - 1.4) / 1.9, 0, 1)));\n  else (e = 1 - sm(10.5, 12.6, t)), (Q.x = 32 - 58 * e), (mv = sin(PI * e));\n  Q.y = 98 - 10 * mv;\n  Q.z = 0.02 + 0.3 * e;\n  Q.rot = -0.45 * e + (0.012 + 0.06 * mv + 0.12 * kb) * sin(rt * TAU * 8.5) + 0.01 * sin(rt * 2.3);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05);\n  (P.view = cl(k[0], 0, 1)), (P.lamp = cl(k[2], 0, 1)), (P.fl = cl(k[3], 0, 1));\n  (P.rt += rd), (P.t += (rd * cl(k[1], 0.2, 3)) / 2);\n  if (input.btnPressed && input.btnPressed[0]) P.knock = 0;\n  if (P.knock >= 0 && (P.knock += rd) > 1.2) P.knock = -1;\n  const kn = P.knock \u003c 0 ? 9 : P.knock, kb = kn \u003c 0.45 ? sin((PI * kn) / 0.45) : 0, kr = sin(PI * cl((kn - 0.1) / 0.5, 0, 1)), sh = kn \u003c 0.4 ? 1 - kn / 0.4 : 0;\n  // The flame: a breathing flicker, now and then a gutter, a sway that moves the light.\n  const f = P.fl, rt = P.rt, ph = P.ph, amp = 0.035 + 0.2 * f;\n  const n = 0.5 * sin(7.3 * rt + ph[0]) + 0.3 * sin(12.9 * rt + ph[1]) + 0.2 * sin(23.1 * rt + ph[2]), gut = max(0, sin(1.7 * rt + ph[3]) + 0.6 * sin(3.1 * rt + ph[6])) ** 3 * 0.25 * f;\n  P.I = 1 - 0.12 * f + amp * n - 0.35 * gut + 0.2 * sh;\n  // A draught also bellies the cloth away from the puppets, so their shadows swell and soften.\n  P.bil = 0.07 * f * (0.6 + 0.4 * sin(0.9 * rt + ph[5]));\n  P.LX = 31.5 + (1 + 11 * f) * (0.65 * sin(2.1 * rt + ph[4]) + 0.35 * sin(0.83 * rt + ph[5])) + 2 * amp * sin(9.7 * rt + ph[6]);\n  P.LY = 46 - 3 * gut - 3 * f * sin(1.3 * rt + ph[2]);\n  P.flame = 7 * (1 + 1.5 * f) * (1 + 0.8 * amp * sin(11.3 * rt + ph[1]) + 0.6 * gut);\n  (P.shx = 1.3 * sh * sin(kn * 70)), (P.shy = 0.9 * sh * sin(kn * 53 + 1));\n  // The play.\n  const sc = floor(P.t / SCENE), t = P.t - sc * SCENE, dir = sc & 1 ? -P.dir : P.dir;\n  (P.K.face = dir), (P.O.face = -dir), (P.G.face = dir);\n  knight(t, P.K, rt, kb), ogre(t, P.O, rt, kr), gunungan(t, P.G, rt, sh);\n  (P.K.x += 7 * kb), (P.O.x += 6 * kr);\n  for (const Q of [P.K, P.O, P.G]) if (dir \u003c 0) Q.x = 63 - Q.x;\n}\n\n// The puppet being drawn: screen from puppet space and back, its magnification and blur.\nlet M, A, C, TX, TY, F11, F12, F21, F22, I11, I12, I21, I22, MAG, PEN, HV, LC;\nfunction place(P, Q, D) {\n  const f = cl((Q.z + P.bil) / D, 0, 0.62), m = 1 / (1 - f), c = cos(Q.rot), s = sin(Q.rot), fc = Q.face, k = m * Q.sz, hc = Q.hc * Q.sz;\n  (MAG = k), (PEN = 1 + (P.flame * f) / (1 - f)), (HV = cl(1.25 - 0.42 * PEN, 0, 0.85));\n  (F11 = k * fc * c), (F12 = -k * fc * s), (F21 = -k * s), (F22 = -k * c);\n  TX = P.LX * (1 - m) + m * (Q.x + fc * s * hc) + P.shx;\n  TY = P.LY * (1 - m) + m * (Q.y - hc + c * hc) + P.shy;\n  const det = F11 * F22 - F12 * F21;\n  (I11 = F22 / det), (I12 = -F12 / det), (I21 = -F21 / det), (I22 = F11 / det);\n}\n\nfunction holes(u, v, k) {\n  let a = u, b = v;\n  if (LD[k]) (a = (u + v) * 0.7071), (b = (v - u) * 0.7071);\n  if (k === 4) (a += 0.8 * sin(v * 0.6 + abs(u) * 0.35)), (b += 0.5 * sin(abs(u) * 0.7));\n  const pa = LA[k], pb = LB[k], j = round(b / pb), aa = a + (j & 1) * pa * 0.5, du = aa - round(aa / pa) * pa, dv = b - j * pb;\n  return cl((LR[k] - sqrt(du * du + dv * dv)) * 1.15 + 0.1, 0, 1);\n}\n\n// The gunungan's inside: rim, gate, tree, the two beasts, and lace everywhere else.\nlet LN, LW;\nfunction leaf(u, v, hw) {\n  const au = abs(u);\n  (LN = 0), (LC = GOLD);\n  if (hw - au \u003c 1.4 || v \u003c 1.3) return (LC = RED), 1;\n  if (v \u003c 15 && au \u003c 8) {\n    if (v \u003c 9) return (LC = RED), au > 1 && au \u003c 3.3 && v > 2.2 && v \u003c 7.6 ? 0.12 : 1;\n    return au \u003c 8 - (v - 9) * 1.15 ? 1 : ((LN = 4), (LC = TEAL), 1);\n  }\n  if (au \u003c 1.9 - v * 0.012 && v \u003c 70) return 1;\n  for (let b = 0; b \u003c 6; b++) {\n    const vb = 19 + 8 * b + 0.5 * au + 0.02 * au * au;\n    if (abs(v - vb) \u003c 1.05 && au \u003c min(hw - 2.4, 15 - b)) return 1;\n  }\n  const bx = (au - 6.5) / 3.4, by = (v - 17.5) / 1.9;\n  if (bx * bx + by * by \u003c 1) return (LC = HORN), 1;\n  return (LN = 4), (LC = TEAL), 1;\n}\n\n// One part: kind 0 a tapered rod (x0, y0, x1, y1, r0, r1), 1 an ellipse (cx, cy, rx, ry, turn), 2 a polygon, 3 the gunungan's leaf.\n// lace picks the holes; a part with no colour is a hole cut through what is already there (lace is then how deep).\nfunction part(k, a, b, c, d, e, f, lace, col) {\n  let u0, u1, v0, v1, rp = 99;\n  const ce = cos(e || 0), se = sin(e || 0);\n  if (k === 0) {\n    const r = max(e, f);\n    (u0 = min(a, c) - r), (u1 = max(a, c) + r), (v0 = min(b, d) - r), (v1 = max(b, d) + r), (rp = r * MAG);\n  } else if (k === 1) {\n    const r = max(c, d);\n    (u0 = a - r), (u1 = a + r), (v0 = b - r), (v1 = b + r), (rp = min(c, d) * MAG);\n  } else if (k === 2) {\n    (u0 = v0 = 1e9), (u1 = v1 = -1e9);\n    for (let i = 0; i \u003c a.length; i += 2) (u0 = min(u0, a[i])), (u1 = max(u1, a[i])), (v0 = min(v0, a[i + 1])), (v1 = max(v1, a[i + 1]));\n  } else (u0 = -19), (u1 = 19), (v0 = 0), (v1 = 79);\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let q = 0; q \u003c 4; q++) {\n    const u = q & 1 ? u1 : u0, v = q & 2 ? v1 : v0, X = F11 * u + F12 * v + TX, Y = F21 * u + F22 * v + TY;\n    (x0 = min(x0, X)), (x1 = max(x1, X)), (y0 = min(y0, Y)), (y1 = max(y1, Y));\n  }\n  const pad = PEN * 0.5 + 0.5, thin = min(1, (2 * rp + 1) / PEN), abx = c - a, aby = d - b, ab2 = abx * abx + aby * aby || 1e-9;\n  const xa = max(0, floor(x0 - pad)), xb = min(W - 1, ceil(x1 + pad)), ya = max(0, floor(y0 - pad)), yb = min(H - 1, ceil(y1 + pad));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - TX, dy = y - TY, u = I11 * dx + I12 * dy, v = I21 * dx + I22 * dy;\n      let dd, op = 1, ln = lace, cc = col;\n      if (k === 0) {\n        const t = cl(((u - a) * abx + (v - b) * aby) / ab2, 0, 1), qx = u - a - abx * t, qy = v - b - aby * t;\n        dd = sqrt(qx * qx + qy * qy) - mix(e, f, t);\n      } else if (k === 1) {\n        const pu = u - a, pv = v - b, lu = (pu * ce + pv * se) / c, lv = (pv * ce - pu * se) / d;\n        dd = (sqrt(lu * lu + lv * lv) - 1) * min(c, d);\n      } else if (k === 2) {\n        let md = 1e9, ins = false;\n        for (let i = 0, j = a.length - 2; i \u003c a.length; j = i, i += 2) {\n          const xi = a[i], yi = a[i + 1], ex = a[j] - xi, ey = a[j + 1] - yi;\n          if (yi > v !== a[j + 1] > v && u \u003c (ex * (v - yi)) / ey + xi) ins = !ins;\n          const s = cl(((u - xi) * ex + (v - yi) * ey) / (ex * ex + ey * ey), 0, 1), qx = u - xi - ex * s, qy = v - yi - ey * s;\n          md = min(md, qx * qx + qy * qy);\n        }\n        dd = ins ? -sqrt(md) : sqrt(md);\n      } else {\n        const vi = cl(v, 0, 79.9), v0i = floor(vi), hw = mix(LW[v0i], LW[v0i + 1], vi - v0i);\n        dd = max(abs(u) - hw, -v, v - 78);\n        if (dd \u003c 0.6) (op = leaf(u, v, hw)), (ln = LN), (cc = LC);\n      }\n      const dp = dd * MAG;\n      if (dp > pad) continue;\n      let cs = cl(0.5 - dp / PEN, 0, 1) * thin, cv = cl(0.5 - dp, 0, 1);\n      const i = y * W + x, o = i * 3;\n      if (!cc) {\n        const dep = lace \u003c 0 ? 0.9 * holes(u, v, -lace) : lace, s = 1 - cs * dep * min(1, HV * 1.3), sv = 1 - cv * dep;\n        (M[i] *= s), (A[i] *= sv), (C[o] *= sv), (C[o + 1] *= sv), (C[o + 2] *= sv);\n        continue;\n      }\n      if (ln) {\n        const h = holes(u, v, ln);\n        (cs *= 1 - h * HV), (cv *= 1 - h * 0.85);\n      }\n      cs *= op;\n      cv *= op;\n      if (cs > M[i]) M[i] = cs;\n      if (cv > 0) (C[o] += (cc[0] - C[o]) * cv), (C[o + 1] += (cc[1] - C[o + 1]) * cv), (C[o + 2] += (cc[2] - C[o + 2]) * cv), (A[i] += (1 - A[i]) * cv);\n    }\n}\nconst rod = (x0, y0, x1, y1, r0, r1, lace, col) => part(0, x0, y0, x1, y1, r0, r1, lace, col);\nconst ell = (cx, cy, rx, ry, turn, lace, col) => part(1, cx, cy, rx, ry, turn, 0, lace, col);\nconst poly = (pts, lace, col) => part(2, pts, 0, 0, 0, 0, 0, lace, col);\n\n// An arm on its two joints, the pointing hand, and the thin rod down to the dalang's fist.\nfunction arm(sx, sy, a1, a2, l1, l2, r1, r2, col) {\n  const ex = sx + l1 * sin(a1), ey = sy - l1 * cos(a1), hx = ex + l2 * sin(a1 + a2), hy = ey - l2 * cos(a1 + a2);\n  rod(sx, sy, ex, ey, r1, r1 * 0.85, 0, col), rod(ex, ey, hx, hy, r2 * 0.95, r2 * 0.75, 0, col);\n  rod(hx, hy, hx + 2.4 * sin(a1 + a2 + 0.25), hy - 2.4 * cos(a1 + a2 + 0.25), r2 * 0.75, 0.3, 0, col);\n  rod(ex - 0.2, ey, ex + 0.2, ey, r1 * 1.15, r1 * 1.15, 0, GOLD);\n  const gx = 2 - hx, gy = -14 - hy, l = sqrt(gx * gx + gy * gy) || 1, L = min(l, 30) / l;\n  rod(hx, hy, hx + gx * L, hy + gy * L, 0.42, 0.42, 0, BAMBOO);\n}\n\nfunction drawKnight(Q) {\n  rod(0.4, 34, 0.4, -16, 0.5, 0.45, 0, HORN);\n  arm(-4.6, 39.4, Q.b1, Q.b2, 12, 12.5, 1.0, 0.85, GOLD);\n  rod(-1, 17, -2.6, 1.5, 1.15, 0.95, 0, GOLD), rod(-2.6, 0.8, 1.2, 0.6, 0.8, 0.7, 0, GOLD);\n  rod(1.5, 17, 3.6, 1.5, 1.15, 0.95, 0, GOLD), rod(3.6, 0.8, 7.6, 0.6, 0.8, 0.7, 0, GOLD);\n  poly(K_KAIN, 2, INDIGO);\n  rod(3, 27, 5.4, 11, 0.8, 0.45, 0, RED);\n  poly(K_TORSO, 0, GOLD);\n  rod(-2.6, 29, 2.4, 29, 1.1, 1.1, 0, RED);\n  rod(-2.2, 33, 2, 33, 0.9, 0.9, -1, null);\n  rod(0.5, 40.5, 1.8, 44, 1.3, 1.1, 0, GOLD);\n  ell(-1.6, 46, 1.1, 2.6, -0.5, 1, GOLD);\n  ell(2.2, 47, 2.8, 3.6, 0.35, 0, GOLD);\n  poly(K_NOSE, 0, GOLD);\n  rod(1.5, 50.5, -2.5, 53.4, 1.6, 1.4, 3, HAIR), rod(-2.5, 53.4, -4.8, 50.2, 1.4, 0.6, 3, HAIR);\n  rod(-0.5, 50, 4.2, 50.6, 0.7, 0.6, 0, GOLD);\n  rod(3.6, 48, 5.1, 47.6, 0.38, 0.38, 0.9, null);\n  rod(-3.4, 38.6, 0.3, 36.6, 0.75, 0.75, -3, null), rod(0.3, 36.6, 3.4, 38.6, 0.75, 0.75, -3, null);\n  arm(3.6, 39.4, Q.a1, Q.a2, 12, 12.5, 1.0, 0.85, GOLD);\n}\n\nfunction drawOgre(Q) {\n  rod(0.4, 40, 0.4, -16, 0.55, 0.5, 0, HORN);\n  arm(-7.5, 46, Q.b1, Q.b2, 12.5, 13, 1.6, 1.3, RED);\n  rod(-3, 27, -7, 15, 2, 1.6, 0, RED), rod(-7, 15, -7.5, 2, 1.6, 1.3, 0, RED), rod(-8.1, 1, -3.6, 0.8, 1.1, 1, 0, RED);\n  rod(3, 27, 7, 15, 2, 1.6, 0, RED), rod(7, 15, 7.5, 2, 1.6, 1.3, 0, RED), rod(7.5, 1, 12, 0.8, 1.1, 1, 0, RED);\n  poly(O_KAIN, 2, TEAL);\n  rod(5, 29, 8, 10, 1, 0.6, 0, GOLD);\n  poly(O_TORSO, 0, RED), ell(3.6, 37, 4.8, 5.4, 0, 0, RED);\n  rod(-5.5, 45.6, 0.5, 42.5, 1, 1, -3, null), rod(0.5, 42.5, 6, 45.6, 1, 1, -3, null), ell(-1.5, 38, 3, 4, 0.2, -1, null);\n  rod(-6, 31.2, 6, 31.2, 1.2, 1.2, 0, GOLD);\n  ell(-3.5, 54, 5.5, 7.5, 0.35, 3, HAIR);\n  rod(-6, 59, -10.5, 63, 1.3, 0.3, 0, HAIR), rod(-8, 52, -13, 50, 1.3, 0.3, 0, HAIR), rod(-6.5, 47.5, -10.5, 43, 1.1, 0.3, 0, HAIR);\n  rod(0.5, 47, 2, 51, 2.5, 2.2, 0, RED);\n  ell(3.2, 55.3, 5, 4.4, 0, 0, RED), ell(9.3, 54.8, 2.4, 2.0, 0, 0, RED);\n  const j = Q.jaw, jx = 3.5 + 6.3 * cos(j), jy = 50.6 - 6.3 * sin(j);\n  rod(3.5, 50.6, jx, jy, 1.3, 1.0, 0, RED), rod(jx - 0.9, jy + 0.5, jx - 0.5, jy + 2.7, 0.55, 0.15, 0, IVORY);\n  rod(7.6, 51.3, 7.9, 49.3, 0.5, 0.15, 0, IVORY);\n  poly(O_CROWN, 1, GOLD);\n  ell(-0.5, 53, 1.5, 3, -0.4, 1, GOLD);\n  rod(6.3, 56.4, 6.3, 56.4, 1.5, 1.5, 0.9, null);\n  rod(6.6, 56.4, 6.6, 56.4, 0.6, 0.6, 0, HAIR);\n  arm(6, 46, Q.a1, Q.a2, 12.5, 13, 1.6, 1.3, RED);\n}\n\nfunction drawGunungan() {\n  rod(0, 6, 0, -12, 0.7, 0.6, 0, HORN);\n  part(3, 0, 0, 0, 0, 0, 0, 0, GOLD);\n}\n\n// A soft-edged ellipse painted over the frame, or added as glow.\nfunction blob(F, cx, cy, rx, ry, col, a, add) {\n  for (let y = max(0, floor(cy - ry - 1)); y \u003c= min(H - 1, ceil(cy + ry + 1)); y++)\n    for (let x = max(0, floor(cx - rx - 1)); x \u003c= min(W - 1, ceil(cx + rx + 1)); x++) {\n      const ex = (x - cx) / rx, ey = (y - cy) / ry, d = sqrt(ex * ex + ey * ey), o = (y * W + x) * 3;\n      const c = add ? max(0, 1 - d) ** 2 * a : cl((1 - d) * min(rx, ry) + 0.5, 0, 1) * a;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = add ? F[o + j] + col[j] * c : mix(F[o + j], col[j], c);\n    }\n}\n\n// The audience: heads and shoulders against the light, [x, top, rx, ry, kind]: bare, a peci cap, a headscarf.\nconst RIM = [1, 0.76, 0.48];\nconst HEADS = [[6, 98, 4.6, 5.6, 1], [19, 95, 5, 6, 0], [33, 99.5, 4.4, 5.4, 2], [46, 96, 5, 6.2, 1], [58.5, 98.5, 4.6, 5.6, 0]];\n// Their outline, as coverage in rows AUD and down: head, ears or scarf, neck, shoulders.\nfunction audience(HB, rt) {\n  HB.fill(0);\n  for (let j = 0; j \u003c 5; j++) {\n    const [hx, ht, rx, ry, kd] = HEADS[j], cx = hx + 0.6 * sin(rt * 0.45 + j * 1.7), top = ht + 0.4 * sin(rt * 0.7 + j * 2.3), cy = top + ry, sr = rx * 2.6;\n    for (let y = floor(top - 3); y \u003c H; y++)\n      for (let x = max(0, floor(cx - sr)); x \u003c= min(W - 1, ceil(cx + sr)); x++) {\n        const ax = abs(x - cx), ex = ax / (rx + (kd === 2 ? 0.8 : 0)), ey = (y - cy) / ry, sx = ax / sr, sy = (y - top - 2 * ry - 11) / 9;\n        let d = min((sqrt(ex * ex + ey * ey) - 1) * rx, (sqrt(sx * sx + sy * sy) - 1) * 9);\n        if (kd === 1) d = min(d, max(ax - rx * (0.86 + 0.04 * (y - top)), abs(y - top + 0.2) - 2.3));\n        if (kd === 2) d = min(d, max(ax - rx * (0.9 + (y - cy) * 0.09), cy - y));\n        else d = min(d, (sqrt((ax - rx) ** 2 + (y - cy - 0.6) ** 2) - 1.1) * 1.5, max(ax - rx * 0.62, cy - y));\n        const i = (y - AUD) * W + x;\n        HB[i] = max(HB[i], cl(0.5 - d, 0, 1));\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  (M = P.M), (A = P.A), (C = P.C), (LW = P.LW);\n  M.fill(0), A.fill(0), C.fill(0);\n  const D = 1 - 0.55 * P.lamp;\n  for (const S of P.SIMP) place(P, S, D), S.k ? drawKnight(S) : drawOgre(S);\n  if (P.K.on) place(P, P.K, D), drawKnight(P.K);\n  if (P.O.on) place(P, P.O, D), drawOgre(P.O);\n  if (P.G.on) place(P, P.G, D), drawGunungan();\n  const F = P.F, B = P.BG, PT = P.PT, I = P.I, LX = P.LX, LY = P.LY, R2 = (46 * D) ** 2, vw = sm(0, 1, P.view), rd = 0.12 * (1 - P.I) * P.fl, top = I * 228 * (0.95 + 0.05 / D);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = x - LX, dy = y - LY, fo = 1 / (1 + (dx * dx + dy * dy) / R2), pt = PT[i];\n      if (pt === 0) {\n        // The cloth: lamp light through cotton, the shadows on it; or from behind, the paint over the dim cloth.\n        const L = top * (0.2 + 0.8 * fo) * B[o], lr = L, lg = L * (0.7 + 0.18 * fo - rd), lb = L * (0.36 + 0.3 * fo - rd), s = 1 - 0.94 * M[i];\n        let r = lr * s, g = lg * s, b = lb * s;\n        if (vw > 0) {\n          const k = 0.3 * (1 - A[i]), lit = I * (0.45 + 0.5 * fo) * 250;\n          (r = mix(r, lr * k + C[o] * lit, vw)), (g = mix(g, lg * k + C[o + 1] * lit, vw)), (b = mix(b, lb * k + C[o + 2] * lit, vw));\n        }\n        (F[o] = r), (F[o + 1] = g), (F[o + 2] = b);\n      } else {\n        const s = I * (0.3 + 0.7 * fo) * 255 * (pt === 2 ? 1 - 0.85 * M[i] : 1);\n        (F[o] = B[o] * s), (F[o + 1] = B[o + 1] * s), (F[o + 2] = B[o + 2] * s);\n      }\n    }\n  // From the dalang's side the blencong hangs in view: a bronze garuda on a chain, the flame at its beak.\n  if (vw > 0.01) {\n    const bx = LX + 2, fl = P.flame / 7;\n    for (let y = 0; y \u003c 11; y++) blob(F, round(bx), y, 0.6, 0.6, y & 1 ? [90, 62, 30] : [150, 105, 50], vw);\n    blob(F, bx + 6, 10.5, 2.2, 3.2, [150, 96, 36], vw), blob(F, bx, 13, 5, 2.2, [170, 112, 42], vw), blob(F, bx - 4.2, 11, 1.4, 1.6, [200, 140, 60], vw);\n    blob(F, bx - 6.2, 12.8 - fl, 1.6 * fl, 6 * fl, [255, 140, 40], 0.5 * vw * I, 1), blob(F, bx - 6.2, 12.5 - fl * 0.6, 0.8, 1.9 * fl, [255, 240, 190], vw);\n  }\n  // The audience against the light, the rims of their heads lit by the screen.\n  const HB = P.HB;\n  audience(HB, P.rt);\n  for (let y = AUD + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = (y - AUD) * W + x, c = HB[k];\n      if (c \u003c= 0) continue;\n      const o = (y * W + x) * 3, q = (min(y, HEM - 1) * W + x) * 3, side = min(x > 0 ? HB[k - 1] : 1, x \u003c W - 1 ? HB[k + 1] : 1);\n      const rim = (1 - (HB[k - W] + HB[k - 2 * W]) / 2) * 0.6 + (1 - side) * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = F[o + j] * (1 - c) + c * (6 + rim * RIM[j] * max(70, F[q] * 0.9));\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","layer":{"id":"layer-shadow-play","type":"code","name":"shadow-play","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shadow Play\n// Family:  stage\n// Idea:    Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the Javanese wayang kulit shadow play\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1\n//\n// Knob 1: View. At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp.\n// Knob 2: Speed. The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower.\n// Knob 3: Lamp. How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs.\n// Knob 4: Flicker. How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften.\n// Buttons: K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Rows: the top beam, the cloth, the line the puppets stand on, the hem, the banana trunk, the first row the audience can reach.\nconst BEAM = 3, CLOTH = 10, GROUND = 92, HEM = 103, TRUNK = 104, AUD = 88;\n// One scene in story seconds (real seconds at Speed 2).\nconst SCENE = 14.4;\n// The paint, seen from the dalang's side.\nconst GOLD = [0.95, 0.72, 0.26], RED = [0.86, 0.2, 0.13], INDIGO = [0.22, 0.3, 0.8], TEAL = [0.1, 0.52, 0.48], HAIR = [0.13, 0.1, 0.15];\nconst HORN = [0.32, 0.2, 0.11], BAMBOO = [0.62, 0.5, 0.3], IVORY = [0.96, 0.92, 0.82];\n// Lace: the punched holes, as a lattice in puppet space: spacing along, spacing across, laid diagonally.\nconst LA = [0, 2.5, 2.0, 1.9, 2.3], LB = [0, 2.5, 3.6, 1.9, 2.3], LD = [0, 0, 1, 0, 0], LR = [0, 0.9, 0.9, 0.8, 1.15];\n\n// Knight and ogre outlines in puppet space: x forward, y up from the soles.\nconst K_TORSO = [-5.2, 40.4, -3.6, 41.6, 3.2, 41.6, 4.6, 40.4, 3.4, 35, 1.9, 28.5, -2.1, 28.5, -3.6, 35];\nconst K_KAIN = [-3.2, 28.5, 3.2, 28.5, 4.4, 20, 3.4, 13, 1.6, 5, -0.6, 13, -4.5, 16, -9.8, 9.5, -5.8, 22];\nconst K_NOSE = [3.8, 49.6, 8.6, 45.2, 4.6, 46.4];\nconst O_TORSO = [-8.2, 47, -6.5, 48.4, 6, 48.4, 7.8, 46.5, 7, 38, 5.5, 31, -5.5, 31, -7.5, 39];\nconst O_KAIN = [-6.2, 31.5, 6.2, 31.5, 8.8, 21.5, 2, 17, -4, 19.5, -10, 23];\nconst O_CROWN = [-0.5, 58.5, 6.2, 58.5, 5.4, 62, 2.8, 67, 0.2, 61.8];\n\n// Where the knight and the ogre stand through a scene: story second, column (a scene that runs left to right).\nconst KX = [1.7, -16, 3.6, 18, 5.6, 14, 6, 23, 6.4, 14, 6.8, 17, 7.2, 13, 7.6, 24, 8, 16, 8.5, 20, 9, 22, 10.8, 28, 12.3, 86];\nconst OX = [2.3, 84, 4.2, 47, 5.6, 50, 6, 47, 6.4, 49, 6.8, 40, 7.2, 50, 7.6, 47, 8, 39, 8.5, 42, 9, 40];\nfunction key(t, k) {\n  if (t \u003c= k[0]) return k[1];\n  for (let i = 2; i \u003c k.length; i += 2) if (t \u003c k[i]) return mix(k[i - 1], k[i + 1], sm(k[i - 2], k[i], t));\n  return k[k.length - 1];\n}\nconst pose = (hc, sz) => ({ on: false, x: 32, y: GROUND, z: 0.02, rot: 0, face: 1, a1: 0, a2: 0, b1: 0, b2: 0, jaw: 0, hc, sz });\n\nexport function setup(params) {\n  const R = () => Math.random() * TAU;\n  const P = (params.s = {\n    M: new Float32Array(N), A: new Float32Array(N), C: new Float32Array(N * 3), F: new Float32Array(N * 3),\n    BG: new Float32Array(N * 3), PT: new Uint8Array(N), LW: new Float32Array(81), HB: new Float32Array((H - AUD) * W),\n    t: 0, rt: 0, view: 0, lamp: 0, fl: 0.06, knock: -1, ph: [R(), R(), R(), R(), R(), R(), R()], dir: Math.random() \u003c 0.5 ? 1 : -1,\n    K: pose(28, 1.22), O: pose(32, 1.12), G: pose(0, 1.04), I: 1, bil: 0, LX: 31.5, LY: 46, flame: 7, shx: 0, shy: 0,\n  });\n  // The puppets planted in the trunk at either end of the screen, only their fronts showing: an ogre king, a knight.\n  P.SIMP = [[-6.5, 1, 1.32, 0], [65.5, -1, 1.4, 1]].map(([x, face, sz, k]) => Object.assign(pose(30, sz), { x, face, k, y: GROUND + 4, a2: 0.1, b1: -0.1, b2: 0.15 }));\n  // Half the gunungan's width at each height: a leaf with a pointed tip.\n  for (let v = 0; v \u003c= 80; v++) P.LW[v] = v > 78 ? 0 : v \u003c 22 ? 18 * sqrt(1 - ((22 - v) / 31) ** 2) : 18 * (1 - ((v - 22) / 56) ** 1.7) ** 1.15;\n  // What does not move, as colour before the light: beam, border, posts, cloth, hem, trunk, floor.\n  const B = P.BG;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.02, 0.018, 0.03], t = 1;\n    if (y >= BEAM && y \u003c BEAM + 4) {\n      const g = [0.55, 0.85, 1, 0.65][y - BEAM] * ((x + (y & 1) * 2) % 5 === 0 ? 0.55 : 0.9 + 0.1 * n);\n      c = [0.5 * g, 0.31 * g, 0.16 * g];\n    } else if (y >= BEAM + 4 && y \u003c CLOTH) c = y === CLOTH - 1 ? (x & 1 ? [0.85, 0.62, 0.24] : [0.3, 0.07, 0.06]) : [0.34, 0.07, 0.06].map((v) => v * (0.85 + 0.15 * n));\n    else if (y >= CLOTH && y \u003c HEM && (x \u003c 2 || x > 61)) {\n      const g = x === 1 || x === 62 ? 0.75 : 0.42;\n      c = [0.46 * g, 0.28 * g, 0.15 * g];\n    } else if (y >= CLOTH && y \u003c HEM) (t = 0), (c = [0.955 + 0.045 * n - (y === 57 ? 0.07 : y === 58 ? 0.025 : 0) - (x & 1 ? 0.012 : 0), 0, 0]);\n    else if (y === HEM) c = [0.3, 0.06, 0.05];\n    else if (y >= TRUNK && y \u003c TRUNK + 8) {\n      const g = [0.7, 1, 0.95, 0.85, 0.72, 0.58, 0.44, 0.3][y - TRUNK] * (0.82 + 0.18 * hash(floor(x / 4) + y * 17, y));\n      (t = 2), (c = [0.6 * g, 0.64 * g, 0.4 * g]);\n    } else if (y >= TRUNK + 8) c = [0.05, 0.035, 0.03].map((v) => v * (1 - (y - TRUNK - 8) / 20));\n    (B[o] = c[0]), (B[o + 1] = c[1]), (B[o + 2] = c[2]), (P.PT[i] = t);\n  }\n}\n\n// The knight's scene, in story seconds, for a scene that runs left to right.\nfunction knight(t, Q, rt, kb) {\n  Q.on = t > 1.7 && t \u003c 12.3;\n  Q.x = key(t, KX);\n  const v = (key(t + 0.05, KX) - key(t - 0.05, KX)) * 10, walk = cl(abs(v) / 12, 0, 1), st = sin(PI * t * 2.6);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((Q.x - 14) / 9, 0, 1);\n  const point = sm(3.7, 4.1, t) * (1 - sm(4.8, 5.2, t)), heave = sm(8.5, 9.1, t) * (1 - sm(9.7, 10.5, t));\n  Q.y = GROUND - walk * 1.8 * abs(st);\n  Q.z = 0.03;\n  Q.rot = -0.05 * walk + fight * 0.06 * sin(w + 0.5) + heave * 0.16 - 0.14 * kb;\n  Q.a1 = 0.12 + 0.3 * walk * st + 1.45 * point + fight * 0.7 + 1.5 * reach + 2.5 * heave + 1.4 * kb;\n  Q.a2 = 0.15 + 0.35 * point + fight * 0.9 - 0.7 * reach + 0.2 * heave;\n  Q.b1 = -0.12 + 0.06 * sin(rt * 1.7) - 0.25 * walk * st + fight * 0.3 * sin(w + 2);\n  Q.b2 = 0.2;\n}\n\n// The ogre: in from the other side, a looming threat, the fight, the throw.\nfunction ogre(t, Q, rt, kb) {\n  Q.on = t > 2.3 && t \u003c 10.6;\n  const u = cl((t - 9.2) / 1.4, 0, 1);\n  Q.x = key(t, OX) + 30 * u;\n  const v = (key(t + 0.05, OX) - key(t - 0.05, OX)) * 10, walk = cl(abs(v) / 12, 0, 1) * (1 - u), st = sin(PI * t * 2.1);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((50 - Q.x) / 10, 0, 1);\n  const loom = sm(4.3, 4.9, t) * (1 - sm(4.95, 5.5, t));\n  Q.y = GROUND - walk * 2.6 * abs(st) - 115 * u * u;\n  Q.z = 0.03 + 0.16 * loom + 0.28 * u;\n  Q.rot = -0.04 * walk + 0.07 * walk * st - 0.1 * loom + fight * 0.07 * sin(w + 3.6) + 5.6 * u + 0.35 * kb;\n  Q.a1 = 0.3 + 0.25 * walk * st + 2.0 * loom + fight * (0.6 + 0.3 * sin(w)) + 1.6 * reach + 1.2 * u;\n  Q.a2 = 0.35 + 0.5 * loom + fight * 0.6 - 0.5 * reach;\n  Q.b1 = -0.4 - 0.3 * walk * st + 0.5 * loom; Q.b2 = 0.5;\n  Q.jaw = 0.08 + loom * (0.25 + 0.15 * sin(rt * 14)) + fight * 0.25 * (0.5 + 0.5 * sin(w * 2)) + 0.45 * u + 0.4 * kb;\n}\n\n// The gunungan: planted in the middle, pulled away trembling, back at the end.\nfunction gunungan(t, Q, rt, kb) {\n  Q.on = t \u003c 3.3 || t > 10.5;\n  let e, mv;\n  if (t \u003c 7) (e = cl((t - 1.4) / 1.9, 0, 1) ** 2), (Q.x = 32 + 58 * e), (mv = sin(PI * cl((t - 1.4) / 1.9, 0, 1)));\n  else (e = 1 - sm(10.5, 12.6, t)), (Q.x = 32 - 58 * e), (mv = sin(PI * e));\n  Q.y = 98 - 10 * mv;\n  Q.z = 0.02 + 0.3 * e;\n  Q.rot = -0.45 * e + (0.012 + 0.06 * mv + 0.12 * kb) * sin(rt * TAU * 8.5) + 0.01 * sin(rt * 2.3);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05);\n  (P.view = cl(k[0], 0, 1)), (P.lamp = cl(k[2], 0, 1)), (P.fl = cl(k[3], 0, 1));\n  (P.rt += rd), (P.t += (rd * cl(k[1], 0.2, 3)) / 2);\n  if (input.btnPressed && input.btnPressed[0]) P.knock = 0;\n  if (P.knock >= 0 && (P.knock += rd) > 1.2) P.knock = -1;\n  const kn = P.knock \u003c 0 ? 9 : P.knock, kb = kn \u003c 0.45 ? sin((PI * kn) / 0.45) : 0, kr = sin(PI * cl((kn - 0.1) / 0.5, 0, 1)), sh = kn \u003c 0.4 ? 1 - kn / 0.4 : 0;\n  // The flame: a breathing flicker, now and then a gutter, a sway that moves the light.\n  const f = P.fl, rt = P.rt, ph = P.ph, amp = 0.035 + 0.2 * f;\n  const n = 0.5 * sin(7.3 * rt + ph[0]) + 0.3 * sin(12.9 * rt + ph[1]) + 0.2 * sin(23.1 * rt + ph[2]), gut = max(0, sin(1.7 * rt + ph[3]) + 0.6 * sin(3.1 * rt + ph[6])) ** 3 * 0.25 * f;\n  P.I = 1 - 0.12 * f + amp * n - 0.35 * gut + 0.2 * sh;\n  // A draught also bellies the cloth away from the puppets, so their shadows swell and soften.\n  P.bil = 0.07 * f * (0.6 + 0.4 * sin(0.9 * rt + ph[5]));\n  P.LX = 31.5 + (1 + 11 * f) * (0.65 * sin(2.1 * rt + ph[4]) + 0.35 * sin(0.83 * rt + ph[5])) + 2 * amp * sin(9.7 * rt + ph[6]);\n  P.LY = 46 - 3 * gut - 3 * f * sin(1.3 * rt + ph[2]);\n  P.flame = 7 * (1 + 1.5 * f) * (1 + 0.8 * amp * sin(11.3 * rt + ph[1]) + 0.6 * gut);\n  (P.shx = 1.3 * sh * sin(kn * 70)), (P.shy = 0.9 * sh * sin(kn * 53 + 1));\n  // The play.\n  const sc = floor(P.t / SCENE), t = P.t - sc * SCENE, dir = sc & 1 ? -P.dir : P.dir;\n  (P.K.face = dir), (P.O.face = -dir), (P.G.face = dir);\n  knight(t, P.K, rt, kb), ogre(t, P.O, rt, kr), gunungan(t, P.G, rt, sh);\n  (P.K.x += 7 * kb), (P.O.x += 6 * kr);\n  for (const Q of [P.K, P.O, P.G]) if (dir \u003c 0) Q.x = 63 - Q.x;\n}\n\n// The puppet being drawn: screen from puppet space and back, its magnification and blur.\nlet M, A, C, TX, TY, F11, F12, F21, F22, I11, I12, I21, I22, MAG, PEN, HV, LC;\nfunction place(P, Q, D) {\n  const f = cl((Q.z + P.bil) / D, 0, 0.62), m = 1 / (1 - f), c = cos(Q.rot), s = sin(Q.rot), fc = Q.face, k = m * Q.sz, hc = Q.hc * Q.sz;\n  (MAG = k), (PEN = 1 + (P.flame * f) / (1 - f)), (HV = cl(1.25 - 0.42 * PEN, 0, 0.85));\n  (F11 = k * fc * c), (F12 = -k * fc * s), (F21 = -k * s), (F22 = -k * c);\n  TX = P.LX * (1 - m) + m * (Q.x + fc * s * hc) + P.shx;\n  TY = P.LY * (1 - m) + m * (Q.y - hc + c * hc) + P.shy;\n  const det = F11 * F22 - F12 * F21;\n  (I11 = F22 / det), (I12 = -F12 / det), (I21 = -F21 / det), (I22 = F11 / det);\n}\n\nfunction holes(u, v, k) {\n  let a = u, b = v;\n  if (LD[k]) (a = (u + v) * 0.7071), (b = (v - u) * 0.7071);\n  if (k === 4) (a += 0.8 * sin(v * 0.6 + abs(u) * 0.35)), (b += 0.5 * sin(abs(u) * 0.7));\n  const pa = LA[k], pb = LB[k], j = round(b / pb), aa = a + (j & 1) * pa * 0.5, du = aa - round(aa / pa) * pa, dv = b - j * pb;\n  return cl((LR[k] - sqrt(du * du + dv * dv)) * 1.15 + 0.1, 0, 1);\n}\n\n// The gunungan's inside: rim, gate, tree, the two beasts, and lace everywhere else.\nlet LN, LW;\nfunction leaf(u, v, hw) {\n  const au = abs(u);\n  (LN = 0), (LC = GOLD);\n  if (hw - au \u003c 1.4 || v \u003c 1.3) return (LC = RED), 1;\n  if (v \u003c 15 && au \u003c 8) {\n    if (v \u003c 9) return (LC = RED), au > 1 && au \u003c 3.3 && v > 2.2 && v \u003c 7.6 ? 0.12 : 1;\n    return au \u003c 8 - (v - 9) * 1.15 ? 1 : ((LN = 4), (LC = TEAL), 1);\n  }\n  if (au \u003c 1.9 - v * 0.012 && v \u003c 70) return 1;\n  for (let b = 0; b \u003c 6; b++) {\n    const vb = 19 + 8 * b + 0.5 * au + 0.02 * au * au;\n    if (abs(v - vb) \u003c 1.05 && au \u003c min(hw - 2.4, 15 - b)) return 1;\n  }\n  const bx = (au - 6.5) / 3.4, by = (v - 17.5) / 1.9;\n  if (bx * bx + by * by \u003c 1) return (LC = HORN), 1;\n  return (LN = 4), (LC = TEAL), 1;\n}\n\n// One part: kind 0 a tapered rod (x0, y0, x1, y1, r0, r1), 1 an ellipse (cx, cy, rx, ry, turn), 2 a polygon, 3 the gunungan's leaf.\n// lace picks the holes; a part with no colour is a hole cut through what is already there (lace is then how deep).\nfunction part(k, a, b, c, d, e, f, lace, col) {\n  let u0, u1, v0, v1, rp = 99;\n  const ce = cos(e || 0), se = sin(e || 0);\n  if (k === 0) {\n    const r = max(e, f);\n    (u0 = min(a, c) - r), (u1 = max(a, c) + r), (v0 = min(b, d) - r), (v1 = max(b, d) + r), (rp = r * MAG);\n  } else if (k === 1) {\n    const r = max(c, d);\n    (u0 = a - r), (u1 = a + r), (v0 = b - r), (v1 = b + r), (rp = min(c, d) * MAG);\n  } else if (k === 2) {\n    (u0 = v0 = 1e9), (u1 = v1 = -1e9);\n    for (let i = 0; i \u003c a.length; i += 2) (u0 = min(u0, a[i])), (u1 = max(u1, a[i])), (v0 = min(v0, a[i + 1])), (v1 = max(v1, a[i + 1]));\n  } else (u0 = -19), (u1 = 19), (v0 = 0), (v1 = 79);\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let q = 0; q \u003c 4; q++) {\n    const u = q & 1 ? u1 : u0, v = q & 2 ? v1 : v0, X = F11 * u + F12 * v + TX, Y = F21 * u + F22 * v + TY;\n    (x0 = min(x0, X)), (x1 = max(x1, X)), (y0 = min(y0, Y)), (y1 = max(y1, Y));\n  }\n  const pad = PEN * 0.5 + 0.5, thin = min(1, (2 * rp + 1) / PEN), abx = c - a, aby = d - b, ab2 = abx * abx + aby * aby || 1e-9;\n  const xa = max(0, floor(x0 - pad)), xb = min(W - 1, ceil(x1 + pad)), ya = max(0, floor(y0 - pad)), yb = min(H - 1, ceil(y1 + pad));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - TX, dy = y - TY, u = I11 * dx + I12 * dy, v = I21 * dx + I22 * dy;\n      let dd, op = 1, ln = lace, cc = col;\n      if (k === 0) {\n        const t = cl(((u - a) * abx + (v - b) * aby) / ab2, 0, 1), qx = u - a - abx * t, qy = v - b - aby * t;\n        dd = sqrt(qx * qx + qy * qy) - mix(e, f, t);\n      } else if (k === 1) {\n        const pu = u - a, pv = v - b, lu = (pu * ce + pv * se) / c, lv = (pv * ce - pu * se) / d;\n        dd = (sqrt(lu * lu + lv * lv) - 1) * min(c, d);\n      } else if (k === 2) {\n        let md = 1e9, ins = false;\n        for (let i = 0, j = a.length - 2; i \u003c a.length; j = i, i += 2) {\n          const xi = a[i], yi = a[i + 1], ex = a[j] - xi, ey = a[j + 1] - yi;\n          if (yi > v !== a[j + 1] > v && u \u003c (ex * (v - yi)) / ey + xi) ins = !ins;\n          const s = cl(((u - xi) * ex + (v - yi) * ey) / (ex * ex + ey * ey), 0, 1), qx = u - xi - ex * s, qy = v - yi - ey * s;\n          md = min(md, qx * qx + qy * qy);\n        }\n        dd = ins ? -sqrt(md) : sqrt(md);\n      } else {\n        const vi = cl(v, 0, 79.9), v0i = floor(vi), hw = mix(LW[v0i], LW[v0i + 1], vi - v0i);\n        dd = max(abs(u) - hw, -v, v - 78);\n        if (dd \u003c 0.6) (op = leaf(u, v, hw)), (ln = LN), (cc = LC);\n      }\n      const dp = dd * MAG;\n      if (dp > pad) continue;\n      let cs = cl(0.5 - dp / PEN, 0, 1) * thin, cv = cl(0.5 - dp, 0, 1);\n      const i = y * W + x, o = i * 3;\n      if (!cc) {\n        const dep = lace \u003c 0 ? 0.9 * holes(u, v, -lace) : lace, s = 1 - cs * dep * min(1, HV * 1.3), sv = 1 - cv * dep;\n        (M[i] *= s), (A[i] *= sv), (C[o] *= sv), (C[o + 1] *= sv), (C[o + 2] *= sv);\n        continue;\n      }\n      if (ln) {\n        const h = holes(u, v, ln);\n        (cs *= 1 - h * HV), (cv *= 1 - h * 0.85);\n      }\n      cs *= op;\n      cv *= op;\n      if (cs > M[i]) M[i] = cs;\n      if (cv > 0) (C[o] += (cc[0] - C[o]) * cv), (C[o + 1] += (cc[1] - C[o + 1]) * cv), (C[o + 2] += (cc[2] - C[o + 2]) * cv), (A[i] += (1 - A[i]) * cv);\n    }\n}\nconst rod = (x0, y0, x1, y1, r0, r1, lace, col) => part(0, x0, y0, x1, y1, r0, r1, lace, col);\nconst ell = (cx, cy, rx, ry, turn, lace, col) => part(1, cx, cy, rx, ry, turn, 0, lace, col);\nconst poly = (pts, lace, col) => part(2, pts, 0, 0, 0, 0, 0, lace, col);\n\n// An arm on its two joints, the pointing hand, and the thin rod down to the dalang's fist.\nfunction arm(sx, sy, a1, a2, l1, l2, r1, r2, col) {\n  const ex = sx + l1 * sin(a1), ey = sy - l1 * cos(a1), hx = ex + l2 * sin(a1 + a2), hy = ey - l2 * cos(a1 + a2);\n  rod(sx, sy, ex, ey, r1, r1 * 0.85, 0, col), rod(ex, ey, hx, hy, r2 * 0.95, r2 * 0.75, 0, col);\n  rod(hx, hy, hx + 2.4 * sin(a1 + a2 + 0.25), hy - 2.4 * cos(a1 + a2 + 0.25), r2 * 0.75, 0.3, 0, col);\n  rod(ex - 0.2, ey, ex + 0.2, ey, r1 * 1.15, r1 * 1.15, 0, GOLD);\n  const gx = 2 - hx, gy = -14 - hy, l = sqrt(gx * gx + gy * gy) || 1, L = min(l, 30) / l;\n  rod(hx, hy, hx + gx * L, hy + gy * L, 0.42, 0.42, 0, BAMBOO);\n}\n\nfunction drawKnight(Q) {\n  rod(0.4, 34, 0.4, -16, 0.5, 0.45, 0, HORN);\n  arm(-4.6, 39.4, Q.b1, Q.b2, 12, 12.5, 1.0, 0.85, GOLD);\n  rod(-1, 17, -2.6, 1.5, 1.15, 0.95, 0, GOLD), rod(-2.6, 0.8, 1.2, 0.6, 0.8, 0.7, 0, GOLD);\n  rod(1.5, 17, 3.6, 1.5, 1.15, 0.95, 0, GOLD), rod(3.6, 0.8, 7.6, 0.6, 0.8, 0.7, 0, GOLD);\n  poly(K_KAIN, 2, INDIGO);\n  rod(3, 27, 5.4, 11, 0.8, 0.45, 0, RED);\n  poly(K_TORSO, 0, GOLD);\n  rod(-2.6, 29, 2.4, 29, 1.1, 1.1, 0, RED);\n  rod(-2.2, 33, 2, 33, 0.9, 0.9, -1, null);\n  rod(0.5, 40.5, 1.8, 44, 1.3, 1.1, 0, GOLD);\n  ell(-1.6, 46, 1.1, 2.6, -0.5, 1, GOLD);\n  ell(2.2, 47, 2.8, 3.6, 0.35, 0, GOLD);\n  poly(K_NOSE, 0, GOLD);\n  rod(1.5, 50.5, -2.5, 53.4, 1.6, 1.4, 3, HAIR), rod(-2.5, 53.4, -4.8, 50.2, 1.4, 0.6, 3, HAIR);\n  rod(-0.5, 50, 4.2, 50.6, 0.7, 0.6, 0, GOLD);\n  rod(3.6, 48, 5.1, 47.6, 0.38, 0.38, 0.9, null);\n  rod(-3.4, 38.6, 0.3, 36.6, 0.75, 0.75, -3, null), rod(0.3, 36.6, 3.4, 38.6, 0.75, 0.75, -3, null);\n  arm(3.6, 39.4, Q.a1, Q.a2, 12, 12.5, 1.0, 0.85, GOLD);\n}\n\nfunction drawOgre(Q) {\n  rod(0.4, 40, 0.4, -16, 0.55, 0.5, 0, HORN);\n  arm(-7.5, 46, Q.b1, Q.b2, 12.5, 13, 1.6, 1.3, RED);\n  rod(-3, 27, -7, 15, 2, 1.6, 0, RED), rod(-7, 15, -7.5, 2, 1.6, 1.3, 0, RED), rod(-8.1, 1, -3.6, 0.8, 1.1, 1, 0, RED);\n  rod(3, 27, 7, 15, 2, 1.6, 0, RED), rod(7, 15, 7.5, 2, 1.6, 1.3, 0, RED), rod(7.5, 1, 12, 0.8, 1.1, 1, 0, RED);\n  poly(O_KAIN, 2, TEAL);\n  rod(5, 29, 8, 10, 1, 0.6, 0, GOLD);\n  poly(O_TORSO, 0, RED), ell(3.6, 37, 4.8, 5.4, 0, 0, RED);\n  rod(-5.5, 45.6, 0.5, 42.5, 1, 1, -3, null), rod(0.5, 42.5, 6, 45.6, 1, 1, -3, null), ell(-1.5, 38, 3, 4, 0.2, -1, null);\n  rod(-6, 31.2, 6, 31.2, 1.2, 1.2, 0, GOLD);\n  ell(-3.5, 54, 5.5, 7.5, 0.35, 3, HAIR);\n  rod(-6, 59, -10.5, 63, 1.3, 0.3, 0, HAIR), rod(-8, 52, -13, 50, 1.3, 0.3, 0, HAIR), rod(-6.5, 47.5, -10.5, 43, 1.1, 0.3, 0, HAIR);\n  rod(0.5, 47, 2, 51, 2.5, 2.2, 0, RED);\n  ell(3.2, 55.3, 5, 4.4, 0, 0, RED), ell(9.3, 54.8, 2.4, 2.0, 0, 0, RED);\n  const j = Q.jaw, jx = 3.5 + 6.3 * cos(j), jy = 50.6 - 6.3 * sin(j);\n  rod(3.5, 50.6, jx, jy, 1.3, 1.0, 0, RED), rod(jx - 0.9, jy + 0.5, jx - 0.5, jy + 2.7, 0.55, 0.15, 0, IVORY);\n  rod(7.6, 51.3, 7.9, 49.3, 0.5, 0.15, 0, IVORY);\n  poly(O_CROWN, 1, GOLD);\n  ell(-0.5, 53, 1.5, 3, -0.4, 1, GOLD);\n  rod(6.3, 56.4, 6.3, 56.4, 1.5, 1.5, 0.9, null);\n  rod(6.6, 56.4, 6.6, 56.4, 0.6, 0.6, 0, HAIR);\n  arm(6, 46, Q.a1, Q.a2, 12.5, 13, 1.6, 1.3, RED);\n}\n\nfunction drawGunungan() {\n  rod(0, 6, 0, -12, 0.7, 0.6, 0, HORN);\n  part(3, 0, 0, 0, 0, 0, 0, 0, GOLD);\n}\n\n// A soft-edged ellipse painted over the frame, or added as glow.\nfunction blob(F, cx, cy, rx, ry, col, a, add) {\n  for (let y = max(0, floor(cy - ry - 1)); y \u003c= min(H - 1, ceil(cy + ry + 1)); y++)\n    for (let x = max(0, floor(cx - rx - 1)); x \u003c= min(W - 1, ceil(cx + rx + 1)); x++) {\n      const ex = (x - cx) / rx, ey = (y - cy) / ry, d = sqrt(ex * ex + ey * ey), o = (y * W + x) * 3;\n      const c = add ? max(0, 1 - d) ** 2 * a : cl((1 - d) * min(rx, ry) + 0.5, 0, 1) * a;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = add ? F[o + j] + col[j] * c : mix(F[o + j], col[j], c);\n    }\n}\n\n// The audience: heads and shoulders against the light, [x, top, rx, ry, kind]: bare, a peci cap, a headscarf.\nconst RIM = [1, 0.76, 0.48];\nconst HEADS = [[6, 98, 4.6, 5.6, 1], [19, 95, 5, 6, 0], [33, 99.5, 4.4, 5.4, 2], [46, 96, 5, 6.2, 1], [58.5, 98.5, 4.6, 5.6, 0]];\n// Their outline, as coverage in rows AUD and down: head, ears or scarf, neck, shoulders.\nfunction audience(HB, rt) {\n  HB.fill(0);\n  for (let j = 0; j \u003c 5; j++) {\n    const [hx, ht, rx, ry, kd] = HEADS[j], cx = hx + 0.6 * sin(rt * 0.45 + j * 1.7), top = ht + 0.4 * sin(rt * 0.7 + j * 2.3), cy = top + ry, sr = rx * 2.6;\n    for (let y = floor(top - 3); y \u003c H; y++)\n      for (let x = max(0, floor(cx - sr)); x \u003c= min(W - 1, ceil(cx + sr)); x++) {\n        const ax = abs(x - cx), ex = ax / (rx + (kd === 2 ? 0.8 : 0)), ey = (y - cy) / ry, sx = ax / sr, sy = (y - top - 2 * ry - 11) / 9;\n        let d = min((sqrt(ex * ex + ey * ey) - 1) * rx, (sqrt(sx * sx + sy * sy) - 1) * 9);\n        if (kd === 1) d = min(d, max(ax - rx * (0.86 + 0.04 * (y - top)), abs(y - top + 0.2) - 2.3));\n        if (kd === 2) d = min(d, max(ax - rx * (0.9 + (y - cy) * 0.09), cy - y));\n        else d = min(d, (sqrt((ax - rx) ** 2 + (y - cy - 0.6) ** 2) - 1.1) * 1.5, max(ax - rx * 0.62, cy - y));\n        const i = (y - AUD) * W + x;\n        HB[i] = max(HB[i], cl(0.5 - d, 0, 1));\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  (M = P.M), (A = P.A), (C = P.C), (LW = P.LW);\n  M.fill(0), A.fill(0), C.fill(0);\n  const D = 1 - 0.55 * P.lamp;\n  for (const S of P.SIMP) place(P, S, D), S.k ? drawKnight(S) : drawOgre(S);\n  if (P.K.on) place(P, P.K, D), drawKnight(P.K);\n  if (P.O.on) place(P, P.O, D), drawOgre(P.O);\n  if (P.G.on) place(P, P.G, D), drawGunungan();\n  const F = P.F, B = P.BG, PT = P.PT, I = P.I, LX = P.LX, LY = P.LY, R2 = (46 * D) ** 2, vw = sm(0, 1, P.view), rd = 0.12 * (1 - P.I) * P.fl, top = I * 228 * (0.95 + 0.05 / D);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = x - LX, dy = y - LY, fo = 1 / (1 + (dx * dx + dy * dy) / R2), pt = PT[i];\n      if (pt === 0) {\n        // The cloth: lamp light through cotton, the shadows on it; or from behind, the paint over the dim cloth.\n        const L = top * (0.2 + 0.8 * fo) * B[o], lr = L, lg = L * (0.7 + 0.18 * fo - rd), lb = L * (0.36 + 0.3 * fo - rd), s = 1 - 0.94 * M[i];\n        let r = lr * s, g = lg * s, b = lb * s;\n        if (vw > 0) {\n          const k = 0.3 * (1 - A[i]), lit = I * (0.45 + 0.5 * fo) * 250;\n          (r = mix(r, lr * k + C[o] * lit, vw)), (g = mix(g, lg * k + C[o + 1] * lit, vw)), (b = mix(b, lb * k + C[o + 2] * lit, vw));\n        }\n        (F[o] = r), (F[o + 1] = g), (F[o + 2] = b);\n      } else {\n        const s = I * (0.3 + 0.7 * fo) * 255 * (pt === 2 ? 1 - 0.85 * M[i] : 1);\n        (F[o] = B[o] * s), (F[o + 1] = B[o + 1] * s), (F[o + 2] = B[o + 2] * s);\n      }\n    }\n  // From the dalang's side the blencong hangs in view: a bronze garuda on a chain, the flame at its beak.\n  if (vw > 0.01) {\n    const bx = LX + 2, fl = P.flame / 7;\n    for (let y = 0; y \u003c 11; y++) blob(F, round(bx), y, 0.6, 0.6, y & 1 ? [90, 62, 30] : [150, 105, 50], vw);\n    blob(F, bx + 6, 10.5, 2.2, 3.2, [150, 96, 36], vw), blob(F, bx, 13, 5, 2.2, [170, 112, 42], vw), blob(F, bx - 4.2, 11, 1.4, 1.6, [200, 140, 60], vw);\n    blob(F, bx - 6.2, 12.8 - fl, 1.6 * fl, 6 * fl, [255, 140, 40], 0.5 * vw * I, 1), blob(F, bx - 6.2, 12.5 - fl * 0.6, 0.8, 1.9 * fl, [255, 240, 190], vw);\n  }\n  // The audience against the light, the rims of their heads lit by the screen.\n  const HB = P.HB;\n  audience(HB, P.rt);\n  for (let y = AUD + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = (y - AUD) * W + x, c = HB[k];\n      if (c \u003c= 0) continue;\n      const o = (y * W + x) * 3, q = (min(y, HEM - 1) * W + x) * 3, side = min(x > 0 ? HB[k - 1] : 1, x \u003c W - 1 ? HB[k + 1] : 1);\n      const rim = (1 - (HB[k - W] + HB[k - 2 * W]) / 2) * 0.6 + (1 - side) * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = F[o + j] * (1 - c) + c * (6 + rim * RIM[j] * max(70, F[q] * 0.9));\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"View","min":0,"max":1,"about":"At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower."},{"name":"Lamp","min":0,"max":1,"about":"How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs."},{"name":"Flicker","min":0,"max":1,"about":"How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften."}],"start":[0,2,0,0.06],"measures":{"motion":1.0562,"detail":0.0589,"edges":0.3798,"complexity":1.779,"coverage":0.627,"colour":0.1416,"drift":0.2084},"knobResponse":[0.2162,0.1484,0.1028,0.0596]},{"slug":"sheet-mask","title":"Sheet Mask","family":"cosmetic","round":35,"note":"세럼에 젖은 시트 마스크가 위에서 내려와 진줏빛 살결에 닿는 대로 맑은 청록으로 비치고, 공기가 갇힌 자리는 흰 공기 방울 여섯 개로 볼록 솟아요. 보이지 않는 손바닥이 4.2초 동안 위에서 아래로 쓸며 방울을 양옆 끝으로 밀어내면, 매끈해진 시트 위로 떠도는 빛 한 점이 섬유 결에 부서져 반짝여요. K3 은 방울을 20개까지 늘리고 크게 부풀리며, K1 은 색상환을 다 돌고 누르면 손바닥이 0.8초 만에 한 번에 눌러 펴요.","idea":"A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.","buttons":"K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Sheet Mask\n// Family:  cosmetic\n// Idea:    A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cellulose sheet mask smoothed onto the face; the reverse of Peel-Off\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1\n//\n// Knob 1: Hue. The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive.\n// Knob 2: Speed. At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower.\n// Knob 3: Bubbles. How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear.\n// Knob 4: Weave. The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze.\n// Buttons: K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x2c1b3c6d, 0x297a2d39);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca6b);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n// A generator of its own for the fabric, so turning Weave changes only the\n// fabric and never where the next round's blisters land.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the skin's contour under the sheet and the mottle of the fabric.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 13 + o * 7919) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// The fabric, one value an LED round 0.5, wrapping both ways: a cloudy\n// mottle and short fibres laid in it. Weave makes the fibres longer and\n// thicker and turns them towards the two directions of a woven gauze.\nfunction weave(P, k) {\n  const F = P.F, R = rng(90731), s = 1 + 3 * k, align = sm((k - 0.15) / 0.75), wd = 0.6 + 0.35 * (s - 1);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[y * W + x] = 0.5 * tap((x * 2) / s + 11, (y * 2) / s + 5);\n  const splat = (fx, fy, a) => {\n    const ix = floor(fx), iy = floor(fy), tx = fx - ix, ty = fy - iy;\n    const x0 = ((ix % W) + W) % W, x1 = (x0 + 1) % W, y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    F[y0 * W + x0] += a * (1 - tx) * (1 - ty);\n    F[y0 * W + x1] += a * tx * (1 - ty);\n    F[y1 * W + x0] += a * (1 - tx) * ty;\n    F[y1 * W + x1] += a * tx * ty;\n  };\n  const n = floor(1500 / s);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = R() * W, y0 = R() * H, len = (2.8 + 2.4 * R()) * s;\n    let th = R() * PI;\n    if (R() \u003c align) th = (R() \u003c 0.5 ? 0 : PI / 2) + (R() - 0.5) * 0.22;\n    const a = 0.3 + 0.7 * R(), dx = cos(th), dy = sin(th);\n    for (let w = -wd / 2; w \u003c= wd / 2 + 1e-6; w += 0.7)\n      for (let t = -len / 2; t \u003c= len / 2; t += 0.5) splat(x0 + dx * t - dy * w, y0 + dy * t + dx * w, a * 0.5);\n  }\n  let m = 0, q = 0;\n  for (let p = 0; p \u003c N; p++) m += F[p];\n  m /= N;\n  for (let p = 0; p \u003c N; p++) q += (F[p] - m) ** 2;\n  const sd = sqrt(q / N) || 1;\n  for (let p = 0; p \u003c N; p++) F[p] = cl(0.5 + (0.22 * (F[p] - m)) / sd, 0, 1);\n  P.weaveK = k;\n}\n\n// The round: the sheet comes down, settles, the palm smooths it, it shines,\n// it lifts off, the skin shows bare. Durations in seconds at Speed 2.\nconst DESC = 0, HOLD = 1, SMOOTH = 2, GLOSS = 3, LIFT = 4, BARE = 5;\nconst DUR = [2.6, 1.0, 4.2, 3.0, 1.4, 0.7];\n// The palm's edge is a bow, its middle A rows ahead of its ends.\nconst A = 22, MAXB = 20;\n\n// Where each blister of round n would be trapped, its size and shape. All\n// twenty are placed every round, so Bubbles only says how many of them are\n// trapped and how big they swell, and the first six stay where they were.\nfunction trap(P) {\n  const n = P.round, b = P.bub;\n  for (let i = 0; i \u003c MAXB; i++) {\n    let x = 0, y = 0, r = 0;\n    for (let tr = 0; tr \u003c 10; tr++) {\n      const s = n * 7919 + i * 131 + tr * 17;\n      x = 7 + 50 * hash(s);\n      y = 10 + 108 * hash(s + 1);\n      r = 3.6 + 4.6 * hash(s + 2) ** 1.5;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) if ((b[j].x - x) ** 2 + ((b[j].y - y) / 1.1) ** 2 \u003c ((b[j].r + r) * 1.2 + 2) ** 2) ok = false;\n      if (ok) break;\n    }\n    const e = 0.8 + 0.45 * hash(n * 7919 + i * 131 + 999);\n    Object.assign(b[i], { x, y, r, rx: r * e, ry: r / e, h: 0.4 + 0.2 * r, age: -1, alive: true, side: hash(n * 31 + i) \u003c 0.5 ? -1 : 1 });\n  }\n  // Wrinkles the sheet lays down with: a few long shallow ridges of air.\n  P.wr = [];\n  for (let i = 0; i \u003c 2; i++) {\n    // Down the sheet, as it hung, one in each half.\n    const s = n * 4447 + i * 59, th = PI / 2 + (hash(s) - 0.5) * 0.9;\n    P.wr.push({ x: 8 + 20 * hash(s + 1) + 28 * i, y: 30 + 68 * hash(s + 2), tx: cos(th), ty: sin(th), len: 14 + 12 * hash(s + 3) });\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  const bub = [];\n  for (let i = 0; i \u003c MAXB; i++) bub.push({});\n  params.s = {\n    c: 0, hue: 0, speed: 2, nb: 6, grow: 0, gs: 1, k4: 0.06, weaveK: -1,\n    ph: DESC, pt: 0, round: 0, front: -40, fast: false,\n    bub, wr: [], F: new Float32Array(N), Z: new Float32Array(N), AIR: new Float32Array(N), RIM: new Float32Array(N), SHD: new Float32Array(N),\n    SQ: new Float32Array(N), SL: new Float32Array(N),\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n  // The skin's pearl, laid once: where its sheen sits on the colour wheel\n  // and how light it is.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      params.s.SQ[y * W + x] = 0.5 * tap(x * 0.4 + 7, y * 0.4) + (x * 0.6 + y) / 170;\n      params.s.SL[y * W + x] = 0.86 + 0.03 * tap(x * 1.3 + 50, y * 1.3);\n    }\n  trap(params.s);\n}\n\n// The sheet's hem and the line where it has wet through to the skin, as it\n// comes down: the hem falls fast and slows, the wet line follows.\nconst hemAt = (q) => -4 + 140 * (1 - (1 - min(1, q / 0.65)) ** 2);\nconst wetAt = (q) => -10 + 146 * sm(q);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nb = floor(cl(k[2], 6, 20) + 0.5);\n  P.grow = (P.nb - 6) / 14;\n  P.gs = 1 + 0.4 * P.grow;\n  P.k4 = cl(k[3], 0, 1);\n  if (abs(P.k4 - P.weaveK) > 0.004) weave(P, P.k4);\n  const d = (d0 * P.speed) / 2;\n  P.c += d;\n  P.pt += d;\n\n  const tap1 = input.btnPressed && input.btnPressed[0];\n  if (tap1) {\n    if (P.ph === DESC || P.ph === HOLD) {\n      // Blisters the wet line had not reached yet are never trapped.\n      for (const b of P.bub) if (b.age \u003c 0) b.alive = false;\n      (P.ph = SMOOTH), (P.pt = 0), (P.fast = true), (P.front = -A - 10);\n    } else if (P.ph === SMOOTH) P.fast = true;\n    else if (P.ph === GLOSS) (P.ph = LIFT), (P.pt = 0);\n  }\n  // Blisters beyond the count asked for are never trapped; once the palm is\n  // on the sheet the set is what it is.\n  if (P.ph === DESC || P.ph === HOLD) for (let i = 0; i \u003c MAXB; i++) P.bub[i].alive = i \u003c P.nb;\n  if (P.ph === SMOOTH) {\n    P.front = P.fast ? P.front + d * 220 : -A - 10 + (H + 2 * A + 30) * sm(P.pt / DUR[SMOOTH]) ** 0.9;\n    // The palm pushes each blister it reaches ahead of it and out towards\n    // the nearer side, faster the further out it already is; squeezed, the\n    // blister flattens along the palm's edge and loses a little air.\n    for (const b of P.bub) {\n      if (!b.alive) continue;\n      const u = (b.x - 31.5) / 32, yf = P.front - A * u * u, top = b.y - b.ry * P.gs * 0.55;\n      if (yf > top) {\n        const dy = yf - top;\n        const side = abs(u) \u003c 0.08 ? b.side : u \u003c 0 ? -1 : 1;\n        b.y += dy;\n        b.x += side * dy * (0.9 + 1.8 * abs(u));\n        b.ry = max(b.r * 0.55, b.ry * (1 - 0.012 * dy));\n        b.rx = min(b.r * 1.5, b.rx * (1 + 0.008 * dy));\n        b.h *= 1 - 0.006 * dy;\n      }\n      if (b.x - b.rx * P.gs * 0.3 > W || b.x + b.rx * P.gs * 0.3 \u003c 0 || b.y - b.ry * P.gs > H) b.alive = false;\n    }\n    if (P.front >= H + A + 19.9) (P.ph = GLOSS), (P.pt = 0), (P.fast = false);\n  }\n  if (P.ph !== SMOOTH && P.pt >= DUR[P.ph]) {\n    P.pt = 0;\n    if (P.ph === BARE) {\n      P.round++;\n      trap(P);\n      P.ph = DESC;\n    } else P.ph = P.ph === HOLD ? ((P.front = -A - 10), SMOOTH) : P.ph + 1;\n  }\n  // A blister fills as the wet line passes it, with a little overshoot.\n  if (P.ph === DESC || P.ph === HOLD) {\n    const wl = P.ph === DESC ? wetAt(P.pt / DUR[DESC]) : 999;\n    for (const b of P.bub) if (b.alive && b.age \u003c 0 && wl > b.y - b.ry * P.gs * 0.3) b.age = 0;\n  }\n  for (const b of P.bub) if (b.age >= 0) b.age += d;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { F, Z, AIR, RIM, SHD, SQ, SL, tint } = P, c = P.c, ph = P.ph, q = P.pt / DUR[ph];\n  if (P.lastHue !== P.hue) {\n    // From coral through peach and butter to lime the tint is paler and the\n    // wet sheet lighter: at the aqua's depth those hues read tan and olive.\n    let h = P.hue + 0.5;\n    h -= floor(h);\n    P.warm = sm((h + 0.02) / 0.07) * (1 - sm((h - 0.21) / 0.09));\n    hsv(h, 0.56 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm;\n\n  // Where the sheet is: below its hem there is only skin while it comes\n  // down, and behind the wet line it has soaked through.\n  const hem = ph === DESC ? hemAt(q) : ph === BARE ? -99 : 999;\n  const wl = ph === DESC ? wetAt(q) : ph >= BARE ? -99 : 999;\n  // Lifting: in the first third air runs in under the sheet from its edges\n  // and it goes white, then it rises off and fades.\n  const air = ph === LIFT ? sm(q / 0.32) : 0, fade = ph === LIFT ? sm((q - 0.3) / 0.7) : ph === BARE ? 1 : 0;\n  const rise = ph === LIFT ? 9 * sm((q - 0.25) / 0.75) : 0;\n  const pressedAll = ph === GLOSS || ph === LIFT;\n  // A small lamp drifts over the panel; the wet sheet mirrors it as a spot\n  // that the fibres break into glints and the blisters bend round.\n  const Lx = 32 + 40 * sin(0.37 * c + 0.5), Ly = 64 + 62 * sin(0.23 * c + 2), Lz = 45;\n  const Ex = 32, Ey = 70, Ez = 240;\n\n  // Heights: the skin's soft contour, the fibres standing a little, the\n  // wrinkles of a sheet not yet pressed, and the blisters.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, fy = (((y + floor(rise)) % H) + H) % H;\n      Z[p] = 1.1 * tap(x * 0.5, y * 0.5 + 40) + (0.22 + 0.3 * P.k4) * (F[fy * W + x] - 0.5);\n      AIR[p] = 0;\n      RIM[p] = 0;\n      SHD[p] = 0;\n    }\n  if (ph \u003c= SMOOTH) {\n    for (const w of P.wr) {\n      const ex = abs(w.tx) * w.len + 8, ey = abs(w.ty) * w.len + 8;\n      for (let y = max(0, floor(w.y - ey)); y \u003c min(H, w.y + ey); y++) {\n        for (let x = max(0, floor(w.x - ex)); x \u003c min(W, w.x + ex); x++) {\n          const dx = x - w.x, dy = y - w.y, a = dx * w.tx + dy * w.ty, n = -dx * w.ty + dy * w.tx;\n          if (abs(n) > 7 || abs(a) > w.len) continue;\n          // The palm presses a wrinkle flat as it passes.\n          const u = (x - 31.5) / 32, flat = ph === SMOOTH ? 1 - sm((P.front - A * u * u - y) / 2.5) : 1;\n          const v = exp(-((n / 3) ** 2)) * sm((w.len - abs(a)) / 9) * flat;\n          const p = y * W + x;\n          Z[p] += 0.45 * v;\n          AIR[p] = max(AIR[p], 0.25 * v);\n        }\n      }\n    }\n    for (const b of P.bub) {\n      if (!b.alive || b.age \u003c 0) continue;\n      // Filling: a springy swell to full size in about a third of a second.\n      const f = 1 - exp(-b.age / 0.09) * cos(b.age * 11), br = 1 + (ph === HOLD ? 0.03 * sin(c * 4 + b.r) : 0);\n      const rx = b.rx * P.gs * min(1.08, f) * br, ry = b.ry * P.gs * min(1.08, f) * br, hh = b.h * P.gs * f, rm = min(rx, ry);\n      let tlx = Lx - b.x, tly = Ly - b.y;\n      const tl = 1 / (sqrt(tlx * tlx + tly * tly) || 1);\n      (tlx *= tl), (tly *= tl);\n      const x0 = max(0, floor(b.x - rx - 4)), x1 = min(W - 1, floor(b.x + rx + 4));\n      const y0 = max(0, floor(b.y - ry - 4)), y1 = min(H - 1, floor(b.y + ry + 4));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let x = x0; x \u003c= x1; x++) {\n          const ex = (x - b.x) / rx, ey = (y - b.y) / ry, dd = ex * ex + ey * ey, p = y * W + x, dr = sqrt(dd);\n          const face = dr > 0 ? (ex * tlx + ey * tly) / dr : 0;\n          if (dd \u003c 1) {\n            // A pillow, rounder on top than a dome.\n            Z[p] += hh * sm((1 - dd) / 0.75);\n            AIR[p] = max(AIR[p], sm((1 - dr) / 0.3));\n          }\n          // A bright rim where the sheet lifts off the skin, brightest on\n          // the lamp's side, and a soft shadow on the skin past the far side.\n          RIM[p] = max(RIM[p], exp(-((((dr - 0.92) * rm) / 0.8) ** 2)) * (0.3 + 0.7 * max(0, face)));\n          if (dr > 0.9) SHD[p] = max(SHD[p], exp(-((((dr - 1) * rm) / 1.8) ** 2)) * max(0, -face));\n        }\n    }\n  }\n\n  const tr = tint[0], tg = tint[1], tb = tint[2];\n  const wetV = 0.88 + 0.09 * warm, mixT = 0.55 - 0.08 * warm;\n  const front = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const zx = (Z[y * W + min(W - 1, x + 1)] - Z[y * W + max(0, x - 1)]) / 2;\n      const zy = (Z[min(H - 1, y + 1) * W + x] - Z[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - Z[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      (vx *= vi), (vy *= vi), (vz *= vi);\n      let hx = lx + vx, hy = ly + vy, hz = lz + vz;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const nh = max(0, (nx * hx + ny * hy + nz * hz) * hi);\n      // Shading against what a level sheet would get, so only slopes show.\n      const shade = cl(1 + (nx * lx + ny * ly + nz * lz - lz), 0.55, 1.35);\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and\n      // mint across the panel.\n      const qq = SQ[p] + c * 0.03, Ls = SL[p];\n      let sr = (0.98 + 0.03 * cos(6.283 * qq)) * Ls, sg = (0.85 + 0.03 * cos(6.283 * (qq - 0.33))) * Ls, sb = (0.79 + 0.04 * cos(6.283 * (qq - 0.67))) * Ls;\n\n      // How far the sheet has soaked onto the skin here, 0 (air under it)\n      // to 1 (wet through), and how far the palm has pressed it.\n      const u = (x - 31.5) / 32, ai = AIR[p];\n      let contact = 1, pressed = pressedAll ? 1 : 0;\n      if (ph === DESC) contact = sm((wl + 3 * sin(0.21 * x + 3 * c) + 2 * tap(x * 1.7, 9) - y) / 5);\n      if (ph \u003c= SMOOTH) {\n        const yf = front - A * u * u;\n        pressed = ph === SMOOTH ? sm((yf - y) / 2.5) : 0;\n        // Not yet pressed, the sheet only half touches in places.\n        const part = 0.76 - 0.26 * P.grow + (0.24 + 0.26 * P.grow) * sm(0.5 + 1.6 * tap(x * 1.2 + 90, y * 1.2 + 30));\n        contact *= part + (1 - part) * pressed;\n        contact *= 1 - ai * (1 - pressed);\n      }\n      if (ph === LIFT) {\n        const ed = (0.6 * min(x + 0.5, W - 0.5 - x, (y + 0.5) / 2, (H - 0.5 - y) / 2)) / 32 + 0.4 * sm(0.5 + 1.4 * tap(x * 0.9 + 3, y * 0.9 + 70));\n        contact *= 1 - sm((air * 1.1 - ed) / 0.08);\n      }\n      const fib = F[((((y + floor(rise)) % H) + H) % H) * W + x] - 0.5;\n\n      // Wet through: the skin seen through the serum's tint, darker as\n      // anything wet is. Over air: a hanging sheet is near white with its\n      // fibres showing; a blister is the soaked sheet lit from inside, a\n      // pale clear tint.\n      const fk = 1 + 0.6 * P.k4, at = 0.08 + 0.42 * ai, af = (0.93 + 0.02 * ai) * (1 + 0.18 * fk * fib);\n      const ar = (1 - at + tr * at) * af, ag = (1 - at + tg * at) * af, ab = (1 - at + tb * at) * af;\n      const wk = wetV * (1 - 0.06 * pressed) * (1 + 0.1 * fk * fib);\n      const wr = (sr * (1 - mixT) + tr * mixT) * wk, wg = (sg * (1 - mixT) + tg * mixT) * wk, wb = (sb * (1 - mixT) + tb * mixT) * wk;\n      let r = ar + (wr - ar) * contact, g = ag + (wg - ag) * contact, b = ab + (wb - ab) * contact;\n      const sd = 1 - 0.2 * SHD[p] * (1 - pressed);\n      r *= shade * sd;\n      g *= shade * sd;\n      b *= shade * sd;\n      // The sheen: broad and soft on the half-dry sheet, tighter and much\n      // brighter where the palm has pressed the serum through.\n      const ks = 0.1 + 0.22 * contact + 0.22 * pressed, shin = 12 + 20 * contact + 110 * pressed;\n      // The blister's skin is wet serum too: a small sharp spot on each one.\n      let sp = ks * nh ** shin + 0.1 * pressed * nh ** 24 + 0.55 * ai * nh ** 70 + 0.3 * RIM[p] * (1 - pressed);\n      // The palm's edge pushes a bead of serum ahead of it: a bright line.\n      if (ph === SMOOTH) {\n        const e = y - (front - A * u * u);\n        sp += (0.18 + 0.1 * fib) * exp(-(((e - 1) / 1.1) ** 2)) + 0.08 * exp(-(((e - 3) / 1.8) ** 2));\n      }\n      r += sp * (0.92 + 0.08 * tr);\n      g += sp * (0.92 + 0.08 * tg);\n      b += sp * (0.92 + 0.08 * tb);\n\n      // Over the skin: the sheet is there above its hem and not yet lifted.\n      let have = 1 - fade;\n      if (ph === DESC) {\n        const hy = hem + 1.5 * sin(0.15 * x + 1.3 * c);\n        have = sm(hy - y + 0.5);\n        // The hanging sheet: drape folds running down from the wet line,\n        // and its shadow on the skin below the hem.\n        if (y > wl && y \u003c hy) {\n          const fold = 0.045 * sin(x * 0.42 + 2.2 * sin(y * 0.05 + c) + 1.5 * tap(x * 0.5, y * 0.2)) * sm((y - wl) / 12);\n          r *= 1 + fold;\n          g *= 1 + fold;\n          b *= 1 + fold;\n        }\n        const sh = 1 - 0.28 * exp(-max(0, y - hy) / 3.5) * sm(y - hy + 0.5);\n        (sr *= sh), (sg *= sh), (sb *= sh);\n        // The cut edge of the fabric catches the light.\n        const ed = 0.22 * exp(-(((y - hy + 0.8) / 0.7) ** 2));\n        (r += ed), (g += ed), (b += ed);\n      }\n      if (ph === LIFT) {\n        // The lifted sheet's shadow on the skin, softening as it rises.\n        const sh = 1 - 0.22 * (1 - fade) * air;\n        (sr *= sh), (sg *= sh), (sb *= sh);\n      }\n      // Bare skin keeps a film of serum that shines and slowly soaks in.\n      const dew = ph === LIFT ? sm((q - 0.2) / 0.5) : ph === BARE ? 1 - 0.6 * q : 0;\n      if (dew > 0) {\n        const ds = dew * 0.4 * nh ** 70;\n        (sr += ds), (sg += ds), (sb += ds * 0.96);\n      }\n      r = sr + (r - sr) * have;\n      g = sg + (g - sg) * have;\n      b = sb + (b - sb) * have;\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-sheet-mask","type":"code","name":"sheet-mask","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sheet Mask\n// Family:  cosmetic\n// Idea:    A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cellulose sheet mask smoothed onto the face; the reverse of Peel-Off\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1\n//\n// Knob 1: Hue. The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive.\n// Knob 2: Speed. At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower.\n// Knob 3: Bubbles. How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear.\n// Knob 4: Weave. The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze.\n// Buttons: K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x2c1b3c6d, 0x297a2d39);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca6b);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n// A generator of its own for the fabric, so turning Weave changes only the\n// fabric and never where the next round's blisters land.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the skin's contour under the sheet and the mottle of the fabric.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 13 + o * 7919) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// The fabric, one value an LED round 0.5, wrapping both ways: a cloudy\n// mottle and short fibres laid in it. Weave makes the fibres longer and\n// thicker and turns them towards the two directions of a woven gauze.\nfunction weave(P, k) {\n  const F = P.F, R = rng(90731), s = 1 + 3 * k, align = sm((k - 0.15) / 0.75), wd = 0.6 + 0.35 * (s - 1);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[y * W + x] = 0.5 * tap((x * 2) / s + 11, (y * 2) / s + 5);\n  const splat = (fx, fy, a) => {\n    const ix = floor(fx), iy = floor(fy), tx = fx - ix, ty = fy - iy;\n    const x0 = ((ix % W) + W) % W, x1 = (x0 + 1) % W, y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    F[y0 * W + x0] += a * (1 - tx) * (1 - ty);\n    F[y0 * W + x1] += a * tx * (1 - ty);\n    F[y1 * W + x0] += a * (1 - tx) * ty;\n    F[y1 * W + x1] += a * tx * ty;\n  };\n  const n = floor(1500 / s);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = R() * W, y0 = R() * H, len = (2.8 + 2.4 * R()) * s;\n    let th = R() * PI;\n    if (R() \u003c align) th = (R() \u003c 0.5 ? 0 : PI / 2) + (R() - 0.5) * 0.22;\n    const a = 0.3 + 0.7 * R(), dx = cos(th), dy = sin(th);\n    for (let w = -wd / 2; w \u003c= wd / 2 + 1e-6; w += 0.7)\n      for (let t = -len / 2; t \u003c= len / 2; t += 0.5) splat(x0 + dx * t - dy * w, y0 + dy * t + dx * w, a * 0.5);\n  }\n  let m = 0, q = 0;\n  for (let p = 0; p \u003c N; p++) m += F[p];\n  m /= N;\n  for (let p = 0; p \u003c N; p++) q += (F[p] - m) ** 2;\n  const sd = sqrt(q / N) || 1;\n  for (let p = 0; p \u003c N; p++) F[p] = cl(0.5 + (0.22 * (F[p] - m)) / sd, 0, 1);\n  P.weaveK = k;\n}\n\n// The round: the sheet comes down, settles, the palm smooths it, it shines,\n// it lifts off, the skin shows bare. Durations in seconds at Speed 2.\nconst DESC = 0, HOLD = 1, SMOOTH = 2, GLOSS = 3, LIFT = 4, BARE = 5;\nconst DUR = [2.6, 1.0, 4.2, 3.0, 1.4, 0.7];\n// The palm's edge is a bow, its middle A rows ahead of its ends.\nconst A = 22, MAXB = 20;\n\n// Where each blister of round n would be trapped, its size and shape. All\n// twenty are placed every round, so Bubbles only says how many of them are\n// trapped and how big they swell, and the first six stay where they were.\nfunction trap(P) {\n  const n = P.round, b = P.bub;\n  for (let i = 0; i \u003c MAXB; i++) {\n    let x = 0, y = 0, r = 0;\n    for (let tr = 0; tr \u003c 10; tr++) {\n      const s = n * 7919 + i * 131 + tr * 17;\n      x = 7 + 50 * hash(s);\n      y = 10 + 108 * hash(s + 1);\n      r = 3.6 + 4.6 * hash(s + 2) ** 1.5;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) if ((b[j].x - x) ** 2 + ((b[j].y - y) / 1.1) ** 2 \u003c ((b[j].r + r) * 1.2 + 2) ** 2) ok = false;\n      if (ok) break;\n    }\n    const e = 0.8 + 0.45 * hash(n * 7919 + i * 131 + 999);\n    Object.assign(b[i], { x, y, r, rx: r * e, ry: r / e, h: 0.4 + 0.2 * r, age: -1, alive: true, side: hash(n * 31 + i) \u003c 0.5 ? -1 : 1 });\n  }\n  // Wrinkles the sheet lays down with: a few long shallow ridges of air.\n  P.wr = [];\n  for (let i = 0; i \u003c 2; i++) {\n    // Down the sheet, as it hung, one in each half.\n    const s = n * 4447 + i * 59, th = PI / 2 + (hash(s) - 0.5) * 0.9;\n    P.wr.push({ x: 8 + 20 * hash(s + 1) + 28 * i, y: 30 + 68 * hash(s + 2), tx: cos(th), ty: sin(th), len: 14 + 12 * hash(s + 3) });\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  const bub = [];\n  for (let i = 0; i \u003c MAXB; i++) bub.push({});\n  params.s = {\n    c: 0, hue: 0, speed: 2, nb: 6, grow: 0, gs: 1, k4: 0.06, weaveK: -1,\n    ph: DESC, pt: 0, round: 0, front: -40, fast: false,\n    bub, wr: [], F: new Float32Array(N), Z: new Float32Array(N), AIR: new Float32Array(N), RIM: new Float32Array(N), SHD: new Float32Array(N),\n    SQ: new Float32Array(N), SL: new Float32Array(N),\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n  // The skin's pearl, laid once: where its sheen sits on the colour wheel\n  // and how light it is.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      params.s.SQ[y * W + x] = 0.5 * tap(x * 0.4 + 7, y * 0.4) + (x * 0.6 + y) / 170;\n      params.s.SL[y * W + x] = 0.86 + 0.03 * tap(x * 1.3 + 50, y * 1.3);\n    }\n  trap(params.s);\n}\n\n// The sheet's hem and the line where it has wet through to the skin, as it\n// comes down: the hem falls fast and slows, the wet line follows.\nconst hemAt = (q) => -4 + 140 * (1 - (1 - min(1, q / 0.65)) ** 2);\nconst wetAt = (q) => -10 + 146 * sm(q);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nb = floor(cl(k[2], 6, 20) + 0.5);\n  P.grow = (P.nb - 6) / 14;\n  P.gs = 1 + 0.4 * P.grow;\n  P.k4 = cl(k[3], 0, 1);\n  if (abs(P.k4 - P.weaveK) > 0.004) weave(P, P.k4);\n  const d = (d0 * P.speed) / 2;\n  P.c += d;\n  P.pt += d;\n\n  const tap1 = input.btnPressed && input.btnPressed[0];\n  if (tap1) {\n    if (P.ph === DESC || P.ph === HOLD) {\n      // Blisters the wet line had not reached yet are never trapped.\n      for (const b of P.bub) if (b.age \u003c 0) b.alive = false;\n      (P.ph = SMOOTH), (P.pt = 0), (P.fast = true), (P.front = -A - 10);\n    } else if (P.ph === SMOOTH) P.fast = true;\n    else if (P.ph === GLOSS) (P.ph = LIFT), (P.pt = 0);\n  }\n  // Blisters beyond the count asked for are never trapped; once the palm is\n  // on the sheet the set is what it is.\n  if (P.ph === DESC || P.ph === HOLD) for (let i = 0; i \u003c MAXB; i++) P.bub[i].alive = i \u003c P.nb;\n  if (P.ph === SMOOTH) {\n    P.front = P.fast ? P.front + d * 220 : -A - 10 + (H + 2 * A + 30) * sm(P.pt / DUR[SMOOTH]) ** 0.9;\n    // The palm pushes each blister it reaches ahead of it and out towards\n    // the nearer side, faster the further out it already is; squeezed, the\n    // blister flattens along the palm's edge and loses a little air.\n    for (const b of P.bub) {\n      if (!b.alive) continue;\n      const u = (b.x - 31.5) / 32, yf = P.front - A * u * u, top = b.y - b.ry * P.gs * 0.55;\n      if (yf > top) {\n        const dy = yf - top;\n        const side = abs(u) \u003c 0.08 ? b.side : u \u003c 0 ? -1 : 1;\n        b.y += dy;\n        b.x += side * dy * (0.9 + 1.8 * abs(u));\n        b.ry = max(b.r * 0.55, b.ry * (1 - 0.012 * dy));\n        b.rx = min(b.r * 1.5, b.rx * (1 + 0.008 * dy));\n        b.h *= 1 - 0.006 * dy;\n      }\n      if (b.x - b.rx * P.gs * 0.3 > W || b.x + b.rx * P.gs * 0.3 \u003c 0 || b.y - b.ry * P.gs > H) b.alive = false;\n    }\n    if (P.front >= H + A + 19.9) (P.ph = GLOSS), (P.pt = 0), (P.fast = false);\n  }\n  if (P.ph !== SMOOTH && P.pt >= DUR[P.ph]) {\n    P.pt = 0;\n    if (P.ph === BARE) {\n      P.round++;\n      trap(P);\n      P.ph = DESC;\n    } else P.ph = P.ph === HOLD ? ((P.front = -A - 10), SMOOTH) : P.ph + 1;\n  }\n  // A blister fills as the wet line passes it, with a little overshoot.\n  if (P.ph === DESC || P.ph === HOLD) {\n    const wl = P.ph === DESC ? wetAt(P.pt / DUR[DESC]) : 999;\n    for (const b of P.bub) if (b.alive && b.age \u003c 0 && wl > b.y - b.ry * P.gs * 0.3) b.age = 0;\n  }\n  for (const b of P.bub) if (b.age >= 0) b.age += d;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { F, Z, AIR, RIM, SHD, SQ, SL, tint } = P, c = P.c, ph = P.ph, q = P.pt / DUR[ph];\n  if (P.lastHue !== P.hue) {\n    // From coral through peach and butter to lime the tint is paler and the\n    // wet sheet lighter: at the aqua's depth those hues read tan and olive.\n    let h = P.hue + 0.5;\n    h -= floor(h);\n    P.warm = sm((h + 0.02) / 0.07) * (1 - sm((h - 0.21) / 0.09));\n    hsv(h, 0.56 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm;\n\n  // Where the sheet is: below its hem there is only skin while it comes\n  // down, and behind the wet line it has soaked through.\n  const hem = ph === DESC ? hemAt(q) : ph === BARE ? -99 : 999;\n  const wl = ph === DESC ? wetAt(q) : ph >= BARE ? -99 : 999;\n  // Lifting: in the first third air runs in under the sheet from its edges\n  // and it goes white, then it rises off and fades.\n  const air = ph === LIFT ? sm(q / 0.32) : 0, fade = ph === LIFT ? sm((q - 0.3) / 0.7) : ph === BARE ? 1 : 0;\n  const rise = ph === LIFT ? 9 * sm((q - 0.25) / 0.75) : 0;\n  const pressedAll = ph === GLOSS || ph === LIFT;\n  // A small lamp drifts over the panel; the wet sheet mirrors it as a spot\n  // that the fibres break into glints and the blisters bend round.\n  const Lx = 32 + 40 * sin(0.37 * c + 0.5), Ly = 64 + 62 * sin(0.23 * c + 2), Lz = 45;\n  const Ex = 32, Ey = 70, Ez = 240;\n\n  // Heights: the skin's soft contour, the fibres standing a little, the\n  // wrinkles of a sheet not yet pressed, and the blisters.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, fy = (((y + floor(rise)) % H) + H) % H;\n      Z[p] = 1.1 * tap(x * 0.5, y * 0.5 + 40) + (0.22 + 0.3 * P.k4) * (F[fy * W + x] - 0.5);\n      AIR[p] = 0;\n      RIM[p] = 0;\n      SHD[p] = 0;\n    }\n  if (ph \u003c= SMOOTH) {\n    for (const w of P.wr) {\n      const ex = abs(w.tx) * w.len + 8, ey = abs(w.ty) * w.len + 8;\n      for (let y = max(0, floor(w.y - ey)); y \u003c min(H, w.y + ey); y++) {\n        for (let x = max(0, floor(w.x - ex)); x \u003c min(W, w.x + ex); x++) {\n          const dx = x - w.x, dy = y - w.y, a = dx * w.tx + dy * w.ty, n = -dx * w.ty + dy * w.tx;\n          if (abs(n) > 7 || abs(a) > w.len) continue;\n          // The palm presses a wrinkle flat as it passes.\n          const u = (x - 31.5) / 32, flat = ph === SMOOTH ? 1 - sm((P.front - A * u * u - y) / 2.5) : 1;\n          const v = exp(-((n / 3) ** 2)) * sm((w.len - abs(a)) / 9) * flat;\n          const p = y * W + x;\n          Z[p] += 0.45 * v;\n          AIR[p] = max(AIR[p], 0.25 * v);\n        }\n      }\n    }\n    for (const b of P.bub) {\n      if (!b.alive || b.age \u003c 0) continue;\n      // Filling: a springy swell to full size in about a third of a second.\n      const f = 1 - exp(-b.age / 0.09) * cos(b.age * 11), br = 1 + (ph === HOLD ? 0.03 * sin(c * 4 + b.r) : 0);\n      const rx = b.rx * P.gs * min(1.08, f) * br, ry = b.ry * P.gs * min(1.08, f) * br, hh = b.h * P.gs * f, rm = min(rx, ry);\n      let tlx = Lx - b.x, tly = Ly - b.y;\n      const tl = 1 / (sqrt(tlx * tlx + tly * tly) || 1);\n      (tlx *= tl), (tly *= tl);\n      const x0 = max(0, floor(b.x - rx - 4)), x1 = min(W - 1, floor(b.x + rx + 4));\n      const y0 = max(0, floor(b.y - ry - 4)), y1 = min(H - 1, floor(b.y + ry + 4));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let x = x0; x \u003c= x1; x++) {\n          const ex = (x - b.x) / rx, ey = (y - b.y) / ry, dd = ex * ex + ey * ey, p = y * W + x, dr = sqrt(dd);\n          const face = dr > 0 ? (ex * tlx + ey * tly) / dr : 0;\n          if (dd \u003c 1) {\n            // A pillow, rounder on top than a dome.\n            Z[p] += hh * sm((1 - dd) / 0.75);\n            AIR[p] = max(AIR[p], sm((1 - dr) / 0.3));\n          }\n          // A bright rim where the sheet lifts off the skin, brightest on\n          // the lamp's side, and a soft shadow on the skin past the far side.\n          RIM[p] = max(RIM[p], exp(-((((dr - 0.92) * rm) / 0.8) ** 2)) * (0.3 + 0.7 * max(0, face)));\n          if (dr > 0.9) SHD[p] = max(SHD[p], exp(-((((dr - 1) * rm) / 1.8) ** 2)) * max(0, -face));\n        }\n    }\n  }\n\n  const tr = tint[0], tg = tint[1], tb = tint[2];\n  const wetV = 0.88 + 0.09 * warm, mixT = 0.55 - 0.08 * warm;\n  const front = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const zx = (Z[y * W + min(W - 1, x + 1)] - Z[y * W + max(0, x - 1)]) / 2;\n      const zy = (Z[min(H - 1, y + 1) * W + x] - Z[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - Z[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      (vx *= vi), (vy *= vi), (vz *= vi);\n      let hx = lx + vx, hy = ly + vy, hz = lz + vz;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const nh = max(0, (nx * hx + ny * hy + nz * hz) * hi);\n      // Shading against what a level sheet would get, so only slopes show.\n      const shade = cl(1 + (nx * lx + ny * ly + nz * lz - lz), 0.55, 1.35);\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and\n      // mint across the panel.\n      const qq = SQ[p] + c * 0.03, Ls = SL[p];\n      let sr = (0.98 + 0.03 * cos(6.283 * qq)) * Ls, sg = (0.85 + 0.03 * cos(6.283 * (qq - 0.33))) * Ls, sb = (0.79 + 0.04 * cos(6.283 * (qq - 0.67))) * Ls;\n\n      // How far the sheet has soaked onto the skin here, 0 (air under it)\n      // to 1 (wet through), and how far the palm has pressed it.\n      const u = (x - 31.5) / 32, ai = AIR[p];\n      let contact = 1, pressed = pressedAll ? 1 : 0;\n      if (ph === DESC) contact = sm((wl + 3 * sin(0.21 * x + 3 * c) + 2 * tap(x * 1.7, 9) - y) / 5);\n      if (ph \u003c= SMOOTH) {\n        const yf = front - A * u * u;\n        pressed = ph === SMOOTH ? sm((yf - y) / 2.5) : 0;\n        // Not yet pressed, the sheet only half touches in places.\n        const part = 0.76 - 0.26 * P.grow + (0.24 + 0.26 * P.grow) * sm(0.5 + 1.6 * tap(x * 1.2 + 90, y * 1.2 + 30));\n        contact *= part + (1 - part) * pressed;\n        contact *= 1 - ai * (1 - pressed);\n      }\n      if (ph === LIFT) {\n        const ed = (0.6 * min(x + 0.5, W - 0.5 - x, (y + 0.5) / 2, (H - 0.5 - y) / 2)) / 32 + 0.4 * sm(0.5 + 1.4 * tap(x * 0.9 + 3, y * 0.9 + 70));\n        contact *= 1 - sm((air * 1.1 - ed) / 0.08);\n      }\n      const fib = F[((((y + floor(rise)) % H) + H) % H) * W + x] - 0.5;\n\n      // Wet through: the skin seen through the serum's tint, darker as\n      // anything wet is. Over air: a hanging sheet is near white with its\n      // fibres showing; a blister is the soaked sheet lit from inside, a\n      // pale clear tint.\n      const fk = 1 + 0.6 * P.k4, at = 0.08 + 0.42 * ai, af = (0.93 + 0.02 * ai) * (1 + 0.18 * fk * fib);\n      const ar = (1 - at + tr * at) * af, ag = (1 - at + tg * at) * af, ab = (1 - at + tb * at) * af;\n      const wk = wetV * (1 - 0.06 * pressed) * (1 + 0.1 * fk * fib);\n      const wr = (sr * (1 - mixT) + tr * mixT) * wk, wg = (sg * (1 - mixT) + tg * mixT) * wk, wb = (sb * (1 - mixT) + tb * mixT) * wk;\n      let r = ar + (wr - ar) * contact, g = ag + (wg - ag) * contact, b = ab + (wb - ab) * contact;\n      const sd = 1 - 0.2 * SHD[p] * (1 - pressed);\n      r *= shade * sd;\n      g *= shade * sd;\n      b *= shade * sd;\n      // The sheen: broad and soft on the half-dry sheet, tighter and much\n      // brighter where the palm has pressed the serum through.\n      const ks = 0.1 + 0.22 * contact + 0.22 * pressed, shin = 12 + 20 * contact + 110 * pressed;\n      // The blister's skin is wet serum too: a small sharp spot on each one.\n      let sp = ks * nh ** shin + 0.1 * pressed * nh ** 24 + 0.55 * ai * nh ** 70 + 0.3 * RIM[p] * (1 - pressed);\n      // The palm's edge pushes a bead of serum ahead of it: a bright line.\n      if (ph === SMOOTH) {\n        const e = y - (front - A * u * u);\n        sp += (0.18 + 0.1 * fib) * exp(-(((e - 1) / 1.1) ** 2)) + 0.08 * exp(-(((e - 3) / 1.8) ** 2));\n      }\n      r += sp * (0.92 + 0.08 * tr);\n      g += sp * (0.92 + 0.08 * tg);\n      b += sp * (0.92 + 0.08 * tb);\n\n      // Over the skin: the sheet is there above its hem and not yet lifted.\n      let have = 1 - fade;\n      if (ph === DESC) {\n        const hy = hem + 1.5 * sin(0.15 * x + 1.3 * c);\n        have = sm(hy - y + 0.5);\n        // The hanging sheet: drape folds running down from the wet line,\n        // and its shadow on the skin below the hem.\n        if (y > wl && y \u003c hy) {\n          const fold = 0.045 * sin(x * 0.42 + 2.2 * sin(y * 0.05 + c) + 1.5 * tap(x * 0.5, y * 0.2)) * sm((y - wl) / 12);\n          r *= 1 + fold;\n          g *= 1 + fold;\n          b *= 1 + fold;\n        }\n        const sh = 1 - 0.28 * exp(-max(0, y - hy) / 3.5) * sm(y - hy + 0.5);\n        (sr *= sh), (sg *= sh), (sb *= sh);\n        // The cut edge of the fabric catches the light.\n        const ed = 0.22 * exp(-(((y - hy + 0.8) / 0.7) ** 2));\n        (r += ed), (g += ed), (b += ed);\n      }\n      if (ph === LIFT) {\n        // The lifted sheet's shadow on the skin, softening as it rises.\n        const sh = 1 - 0.22 * (1 - fade) * air;\n        (sr *= sh), (sg *= sh), (sb *= sh);\n      }\n      // Bare skin keeps a film of serum that shines and slowly soaks in.\n      const dew = ph === LIFT ? sm((q - 0.2) / 0.5) : ph === BARE ? 1 - 0.6 * q : 0;\n      if (dew > 0) {\n        const ds = dew * 0.4 * nh ** 70;\n        (sr += ds), (sg += ds), (sb += ds * 0.96);\n      }\n      r = sr + (r - sr) * have;\n      g = sg + (g - sg) * have;\n      b = sb + (b - sb) * have;\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower."},{"name":"Bubbles","min":6,"max":20,"about":"How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear."},{"name":"Weave","min":0,"max":1,"about":"The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze."}],"start":[0,2,6,0.06],"measures":{"motion":0.0942,"detail":0.0264,"edges":0.0175,"complexity":2.3054,"coverage":1,"colour":0.109,"drift":0.1087},"knobResponse":[0.2121,0.1814,0.0787,0.0461]},{"slug":"shimmer-oil","title":"Shimmer Oil","family":"cosmetic","round":36,"note":"보이지 않는 손끝이 마이카가 든 베리빛 바디 오일을 저으면, 납작한 조각들이 늘어난 자리에서는 일어서고 돌기만 하는 자리에서는 누운 채라 소용돌이 자체가 진주빛 실크 결로 보여요. K3 은 젓는 힘이라 1 에서는 소용돌이가 서로 말려 들며 결이 촘촘히 접혀요. K1 을 누르면 다른 손끝이 내려와 20 LED 쯤의 나선을 감아요.","idea":"An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.","buttons":"K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.","code":"// ===== Patternflow pattern =====\n// Title:   Shimmer Oil\n// Family:  cosmetic\n// Idea:    An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after shimmer body oils and Paul Matisse's Kalliroscope rheoscopic fluid (1960s), with the flakes turned by Jeffery's equation (G. B. Jeffery, 1922)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1\n//\n// Knob 1: Hue. Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Stir. How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls.\n// Knob 4: Mica. How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white.\n// Buttons: K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.\n\nconst W = 64, H = 128;\nconst { floor, min, sqrt, sin, cos, exp, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The flow lives on a grid of NX x NY cells, HS LEDs each, with free-slip\n// walls round the panel. It is solved as vorticity and stream function: the\n// stream function vanishes on the walls, so a sine series holds it exactly,\n// and the Poisson equation is a division in that series.\nconst NX = 24, NY = 48, HS = W / NX, MX = NX - 1, MY = NY - 1, GW = NX + 1, GN = GW * (NY + 1);\nconst SX = new Float32Array(MX * MX), SY = new Float32Array(MY * MY), LAM = new Float32Array(MX * MY);\nfor (let k = 1; k \u003c= MX; k++) for (let i = 1; i \u003c= MX; i++) SX[(k - 1) * MX + i - 1] = sin((PI * k * i) / NX);\nfor (let k = 1; k \u003c= MY; k++) for (let i = 1; i \u003c= MY; i++) SY[(k - 1) * MY + i - 1] = sin((PI * k * i) / NY);\n// Eigenvalues of the five-point Laplacian, so the stream function's\n// finite-difference Laplacian is exactly minus the vorticity.\nfor (let l = 1; l \u003c= MY; l++)\n  for (let k = 1; k \u003c= MX; k++)\n    LAM[(l - 1) * MX + k - 1] = (4 / (HS * HS)) * (sin((PI * k) / (2 * NX)) ** 2 + sin((PI * l) / (2 * NY)) ** 2);\n\n// Two-dimensional sine transform of the interior nodes (MY rows of MX).\nfunction dst2(src, dst, tmp) {\n  for (let j = 0; j \u003c MY; j++) {\n    const r = j * MX;\n    for (let k = 0; k \u003c MX; k++) {\n      const s = k * MX;\n      let a = 0;\n      for (let i = 0; i \u003c MX; i++) a += src[r + i] * SX[s + i];\n      tmp[r + k] = a;\n    }\n  }\n  for (let l = 0; l \u003c MY; l++) {\n    const s = l * MY, r = l * MX;\n    for (let k = 0; k \u003c MX; k++) dst[r + k] = 0;\n    for (let j = 0; j \u003c MY; j++) {\n      const c = SY[s + j], q = j * MX;\n      if (c === 0) continue;\n      for (let k = 0; k \u003c MX; k++) dst[r + k] += c * tmp[q + k];\n    }\n  }\n}\n\n// Flow constants at Speed 2: viscosity in LED^2 a second, skin friction a\n// second, and how fast the flakes settle back toward lying in the film, a\n// second.\nconst NU = 0.6, MU = 0.12, SETTLE = 0.24;\n// The largest traceless part of M: eigenvalues 36 and 1/36, a stretch of 6.\nconst DMAX = (36 - 1 / 36) / 2;\n// Flakes: a parcel of them to each LED, and one parcel in 25 also carries a\n// single large flake that glints. A flake's normal m turns with the flow as\n// A m, A = F^-T for the deformation F since the flakes lay down. The flakes\n// at rest lean E0 (about 14 degrees) every way, so a parcel's spread of\n// normals is set by M = A A^T alone (the turn left in A only spins an even\n// spread) and M is all a parcel carries. With M's eigenvalues s^2 and 1/s^2\n// and its axis e1 the flakes lie at E0 (s cos phi e1 + sin phi e2 / s), so\n// how they catch a light hangs on the stretch s and, for a light from one\n// side, on the angle between that side and e1.\nconst NP = W * H;\n// The tables hold the averages over phi, for s from 1 to 12 laid out on\n// 1 - 1/s.\nconst E0 = 0.25, NS = 96, NC = 33, SMAX = 12, EL = 0.95;\n// Soft front light, ring light, strip light by angle.\nconst RF = new Float32Array(NS), RR = new Float32Array(NS), RS = new Float32Array(NS * NC);\n{\n  const NPHI = 48, se = sin(EL), ce = cos(EL), cd = [], sd = [];\n  for (let j = 0; j \u003c NC; j++) {\n    const dl = 0.5 * Math.acos(-1 + (2 * j) / (NC - 1));\n    cd.push(se * cos(dl));\n    sd.push(se * sin(dl));\n  }\n  for (let i = 0; i \u003c NS; i++) {\n    const sg = 1 / (1 - (i / (NS - 1)) * (1 - 1 / SMAX));\n    let f = 0, r = 0;\n    for (let k = 0; k \u003c NPHI; k++) {\n      const ph = (PI * (k + 0.5)) / NPHI, m0 = E0 * sg * cos(ph), m1 = (E0 / sg) * sin(ph), inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const i2 = inv * inv, i4 = i2 * i2, i8 = i4 * i4;\n      f += i8 * i8 * i8;\n      // Flakes standing at about 45 degrees catch a low ring of light from\n      // every side; flat ones and edge-on ones miss most of it.\n      const rq = (inv - 0.707) * 3.5, rb = rq * rq \u003c 1 ? 1 - rq * rq : 0;\n      r += 0.05 + 0.95 * rb * rb;\n      for (let j = 0; j \u003c NC; j++) {\n        const d = (m0 * cd[j] + m1 * sd[j] + ce) * inv, d2 = d * d, d4 = d2 * d2;\n        RS[i * NC + j] += (d4 * d4) / NPHI;\n      }\n    }\n    RF[i] = f / NPHI;\n    RR[i] = r / NPHI;\n  }\n}\n\n// The fingertip's push, its radius in LEDs.\nconst SIG = 6.5;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, stir: 0, mica: 0.06, t: 0, fa: 0, par: 0, mdt: [0, 0], warm: false,\n    w: new Float32Array(GN), w2: new Float32Array(GN), psi: new Float32Array(GN),\n    u: new Float32Array(GN), v: new Float32Array(GN), ux: new Float32Array(GN), uy: new Float32Array(GN), vx: new Float32Array(GN),\n    a: new Float32Array(MX * MY), b: new Float32Array(MX * MY), c: new Float32Array(MX * MY), d: new Float32Array(MX * MY), q: new Float32Array((GW + 2) * (NY + 3)),\n    px: new Float32Array(NP), py: new Float32Array(NP),\n    M0: new Float32Array(NP), M1: new Float32Array(NP), M2: new Float32Array(NP),\n    gx: new Float32Array(NP), gy: new Float32Array(NP),\n    kp: new Float32Array(NP), cnt: new Int32Array(W * H), own: new Int32Array(W * H), gl: new Float32Array(W * H), lit: new Float32Array(W * H), wt: new Float32Array(W * H), tmp: new Float32Array(W * H),\n    swirl: null, c0: [0, 0, 0], c1: [0, 0, 0], c2: [0, 0, 0],\n  };\n  // Parcels start one to each LED, their flakes at rest.\n  for (let p = 0; p \u003c NP; p++) {\n    S.px[p] = (p % W) + random();\n    S.py[p] = floor(p / W) + random();\n    S.M0[p] = S.M2[p] = 1;\n    S.kp[p] = 0.8 + 0.4 * random();\n    if (random() \u003c 0.04) {\n      const a = random() * 2 * PI, r = E0 * (0.4 + 0.6 * random());\n      S.gx[p] = r * cos(a);\n      S.gy[p] = r * sin(a) + 1e-6;\n    }\n  }\n  // And the oil has been swirled before: a dozen soft eddies of either sign.\n  for (let n = 0; n \u003c 12; n++) {\n    const cx = 8 + random() * (W - 16), cy = 8 + random() * (H - 16), r = 6 + random() * 8, k = (random() \u003c 0.5 ? -1 : 1) * (2 + 3 * random());\n    for (let j = 1; j \u003c NY; j++)\n      for (let i = 1; i \u003c NX; i++) {\n        const dx = i * HS - cx, dy = j * HS - cy;\n        S.w[j * GW + i] += k * exp(-(dx * dx + dy * dy) / (r * r));\n      }\n  }\n  params.s = S;\n}\n\n// Where the fingertip is at time t: a slow loop that wanders over the panel.\nfunction finger(t) {\n  return [32 + 19 * sin(t * 0.7) + 4 * sin(t * 1.9), 64 + 44 * sin(t * 0.47 + 0.6) + 8 * cos(t * 1.3)];\n}\n\n// One step of the flow: carry the vorticity, push it with the fingertip,\n// let it decay, and solve for the stream function, velocity and its gradient.\nfunction flowStep(S, dt) {\n  const { w, w2, psi, u, v, ux, uy, vx, a, b, c } = S;\n  const force = 16 * (0.45 + 0.5 * S.stir + 1.3 * S.stir * S.stir);\n  const [fx, fy] = finger(S.t), [gx, gy] = finger(S.t + 0.02);\n  const vxs = (gx - fx) / 0.02, vys = (gy - fy) / 0.02;\n  const fr = exp(-MU * dt), sw = S.swirl;\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      // Back along the flow, in grid units.\n      let X = i - (u[g] * dt) / HS, Y = j - (v[g] * dt) / HS;\n      X = X \u003c 0 ? 0 : X > NX - 1e-4 ? NX - 1e-4 : X;\n      Y = Y \u003c 0 ? 0 : Y > NY - 1e-4 ? NY - 1e-4 : Y;\n      const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, q = j0 * GW + i0;\n      let val = (w[q] * (1 - tx) + w[q + 1] * tx) * (1 - ty) + (w[q + GW] * (1 - tx) + w[q + GW + 1] * tx) * ty;\n      // The fingertip drags the oil along with it: the curl of a force along\n      // its velocity, spread over a Gaussian of radius SIG.\n      const dx = i * HS - fx, dy = j * HS - fy, r2 = (dx * dx + dy * dy) / (SIG * SIG);\n      if (r2 \u003c 9) val += ((force * dt * -2) / (SIG * SIG)) * exp(-r2) * (vys * dx - vxs * dy);\n      if (sw) {\n        const ex = i * HS - sw.x, ey = j * HS - sw.y, e2 = (ex * ex + ey * ey) / (sw.r * sw.r);\n        if (e2 \u003c 9) val += sw.k * dt * exp(-e2) * (1 - 0.6 * e2);\n      }\n      w2[g] = val * fr;\n    }\n  if (sw && (sw.left -= dt) \u003c= 0) S.swirl = null;\n  // Viscosity, one explicit step of the five-point Laplacian (the vorticity\n  // is 0 on the walls).\n  const nu = (NU * dt) / (HS * HS);\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      w[g] = w2[g] + nu * (w2[g - 1] + w2[g + 1] + w2[g - GW] + w2[g + GW] - 4 * w2[g]);\n      a[(j - 1) * MX + i - 1] = w[g];\n    }\n  // The stream function: a division in the sine series.\n  dst2(a, b, c);\n  const norm = 4 / (NX * NY);\n  for (let n = 0; n \u003c MX * MY; n++) b[n] *= norm / LAM[n];\n  dst2(b, c, S.d);\n  for (let j = 1; j \u003c NY; j++) for (let i = 1; i \u003c NX; i++) psi[j * GW + i] = c[(j - 1) * MX + i - 1];\n  // Velocity u = dpsi/dy, v = -dpsi/dx and its gradient, by central\n  // differences; past a wall the stream function is mirrored with its sign\n  // turned over, as the sine series has it.\n  const Q = S.q, QW = GW + 2;\n  for (let j = 0; j \u003c= NY; j++) {\n    const r = (j + 1) * QW + 1;\n    for (let i = 0; i \u003c= NX; i++) Q[r + i] = psi[j * GW + i];\n    Q[r - 1] = -Q[r + 1];\n    Q[r + NX + 1] = -Q[r + NX - 1];\n  }\n  for (let i = 0; i \u003c QW; i++) {\n    Q[i] = -Q[2 * QW + i];\n    Q[(NY + 2) * QW + i] = -Q[NY * QW + i];\n  }\n  const h2 = 1 / (HS * HS), i2 = 1 / (2 * HS);\n  for (let j = 0; j \u003c= NY; j++)\n    for (let i = 0; i \u003c= NX; i++) {\n      const g = j * GW + i, q = (j + 1) * QW + i + 1, p0 = Q[q];\n      const pe = Q[q + 1], pw = Q[q - 1], pn = Q[q - QW], ps = Q[q + QW];\n      u[g] = (ps - pn) * i2;\n      v[g] = -(pe - pw) * i2;\n      uy[g] = (ps - 2 * p0 + pn) * h2;\n      vx[g] = -(pe - 2 * p0 + pw) * h2;\n      ux[g] = (Q[q + QW + 1] - Q[q - QW + 1] - Q[q + QW - 1] + Q[q - QW - 1]) * 0.25 * h2;\n    }\n}\n\n// The parcels ride the flow, and every flake in one turns as a flat disc of\n// no thickness does (Jeffery's equation): its normal m follows\n// dm/dt = K m with K = -(grad u)^T, so a flake turns its face across the\n// stretching and lies along the flow lines in shear. Then M follows\n// dM/dt = K M + M K^T, and the film draws M back toward the identity, the\n// flakes settling to rest.\nfunction flakeStep(S, dt) {\n  const { psi, ux, uy, vx, px, py, M0, M1, M2 } = S;\n  // Half the parcels turn their flakes each step, by the time since their\n  // last turn; all of them move.\n  const par = (S.par ^= 1), dm = S.mdt[par] + dt;\n  S.mdt[par] = 0;\n  S.mdt[par ^ 1] += dt;\n  const st = exp(-SETTLE * dm), ih = 1 / HS, XM = NX - 1e-4, YM = NY - 1e-4, hd = 0.5 * dt * ih;\n  for (let p = 0; p \u003c NP; p++) {\n    let x = px[p], y = py[p];\n    let X = x * ih, Y = y * ih;\n    X = X > XM ? XM : X;\n    Y = Y > YM ? YM : Y;\n    const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, g = j0 * GW + i0;\n    // Velocity from the bilinear stream function: divergence-free inside\n    // every cell.\n    const p00 = psi[g], p10 = psi[g + 1], p01 = psi[g + GW], p11 = psi[g + GW + 1];\n    const U = (1 - tx) * (p01 - p00) + tx * (p11 - p10), V = (1 - ty) * (p10 - p00) + ty * (p11 - p01);\n    if ((p & 1) === par) {\n      const w00 = (1 - tx) * (1 - ty), w10 = tx * (1 - ty), w01 = (1 - tx) * ty, w11 = tx * ty;\n      const a = ux[g] * w00 + ux[g + 1] * w10 + ux[g + GW] * w01 + ux[g + GW + 1] * w11;\n      const b = uy[g] * w00 + uy[g + 1] * w10 + uy[g + GW] * w01 + uy[g + GW + 1] * w11;\n      const c = vx[g] * w00 + vx[g + 1] * w10 + vx[g + GW] * w01 + vx[g + GW + 1] * w11;\n      // grad u = [[a, b], [c, -a]]. One step of m' = K m is the Cayley\n      // transform C = (I - K dt/2)^-1 (I + K dt/2); K has no trace, so\n      // C = ((1 - D) I + K dt) / (1 + D) with D = det(K dt) / 4, and det C = 1\n      // exactly, as the flow keeps area. M' = C M C^T.\n      const D = (dm * dm * (-a * a - b * c)) / 4, iD = 1 / (D > -0.8 ? 1 + D : 0.2), q = 1 - D;\n      const c00 = (q - dm * a) * iD, c01 = -dm * c * iD, c10 = -dm * b * iD, c11 = (q + dm * a) * iD;\n      const mp = M0[p], mq = M1[p], mr = M2[p];\n      const t00 = c00 * mp + c01 * mq, t01 = c00 * mq + c01 * mr, t10 = c10 * mp + c11 * mq, t11 = c10 * mq + c11 * mr;\n      // Settling: M's traceless part decays at the rate SETTLE, and past a\n      // stretch of 6 the film's drag holds it, so the flakes stop short of\n      // standing on edge. det M stays 1, as the flow keeps it: with the\n      // traceless part (d0, d1) the trace is 2 sqrt(1 + d0^2 + d1^2).\n      let d0 = 0.5 * (t00 * c00 + t01 * c01 - t10 * c10 - t11 * c11) * st, d1 = (t00 * c10 + t01 * c11) * st;\n      const dd = d0 * d0 + d1 * d1;\n      if (dd > DMAX * DMAX) {\n        const f = DMAX / sqrt(dd);\n        d0 *= f;\n        d1 *= f;\n      }\n      const h = sqrt(1 + d0 * d0 + d1 * d1);\n      M0[p] = h + d0;\n      M1[p] = d1;\n      M2[p] = h - d0;\n    }\n    // The parcel moves by the midpoint rule.\n    let Xm = X + hd * U, Ym = Y - hd * V;\n    Xm = Xm \u003c 0 ? 0 : Xm > XM ? XM : Xm;\n    Ym = Ym \u003c 0 ? 0 : Ym > YM ? YM : Ym;\n    const im = Xm | 0, jm = Ym | 0, sx = Xm - im, sy = Ym - jm, gm = jm * GW + im;\n    const q00 = psi[gm], q10 = psi[gm + 1], q01 = psi[gm + GW], q11 = psi[gm + GW + 1];\n    x += ((1 - sx) * (q01 - q00) + sx * (q11 - q10)) * ih * dt;\n    y -= ((1 - sy) * (q10 - q00) + sy * (q11 - q01)) * ih * dt;\n    px[p] = x \u003c 0.01 ? 0.01 : x > W - 0.01 ? W - 0.01 : x;\n    py[p] = y \u003c 0.01 ? 0.01 : y > H - 0.01 ? H - 0.01 : y;\n  }\n}\n\n// The flow keeps the oil's density even, and so would the parcels if they\n// moved exactly. Where they have drifted out of a LED that its neighbours\n// still reach, a parcel from a crowded LED is moved in, taking on the flakes\n// of a neighbour; up to 400 a frame.\nfunction even(S) {\n  const { px, py, M0, M1, M2, cnt, own } = S;\n  cnt.fill(0);\n  for (let p = 0; p \u003c NP; p++) {\n    const o = (py[p] | 0) * W + (px[p] | 0);\n    cnt[o]++;\n    own[o] = p;\n  }\n  let d = 0, moved = 0;\n  const start = (random() * W * H) | 0;\n  for (let n = 0; n \u003c W * H && moved \u003c 400; n++) {\n    const e = (start + n) % (W * H);\n    if (cnt[e] !== 0) continue;\n    const x = e % W, y = (e / W) | 0;\n    const nb = x > 0 && cnt[e - 1] ? e - 1 : x \u003c W - 1 && cnt[e + 1] ? e + 1 : y > 0 && cnt[e - W] ? e - W : y \u003c H - 1 && cnt[e + W] ? e + W : -1;\n    if (nb \u003c 0) continue;\n    while (d \u003c W * H && cnt[d] \u003c 3) d++;\n    if (d >= W * H) break;\n    const p = own[d], q = own[nb];\n    cnt[d]--;\n    cnt[e] = 1;\n    px[p] = x + 0.1 + 0.8 * random();\n    py[p] = y + 0.1 + 0.8 * random();\n    M0[p] = M0[q];\n    M1[p] = M1[q];\n    M2[p] = M2[q];\n    moved++;\n  }\n}\n\n// The flow is solved every 1/15 s of oil time, the flakes moved every step.\nfunction step(S, dt) {\n  S.fa += dt;\n  if (S.fa > 1 / 15 - 1e-6) {\n    flowStep(S, S.fa);\n    S.fa = 0;\n  }\n  flakeStep(S, dt);\n  S.t += dt;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.stir = cl(k[2], 0, 1);\n  S.mica = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on oil that has been stirred for 5.4 seconds, the flakes laid\n    // down for the last 4.2 of them.\n    for (let i = 0; i \u003c 4; i++) (S.t += 0.3), flowStep(S, 0.3);\n    for (let i = 0; i \u003c 6; i++) step(S, 0.4);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fingertip lands well away from the stirring one and turns a spiral.\n    const [fx, fy] = finger(S.t);\n    let x = 0, y = 0;\n    for (let n = 0; n \u003c 8; n++) {\n      x = 16 + random() * (W - 32);\n      y = 20 + random() * (H - 40);\n      if ((x - fx) ** 2 + (y - fy) ** 2 > 40 * 40) break;\n    }\n    S.swirl = { x, y, r: 10, k: random() \u003c 0.5 ? 22 : -22, left: 0.7 };\n  }\n  // Oil time runs at Speed / 2, in steps no longer than 1/15 s.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 1 / 15);\n    step(S, h);\n    left -= h;\n  }\n  even(S);\n}\n\nfunction blur(F, T) {\n  for (let y = 0; y \u003c H; y++) {\n    const r = y * W;\n    T[r] = 0.75 * F[r] + 0.25 * F[r + 1];\n    for (let x = 1; x \u003c W - 1; x++) T[r + x] = 0.5 * F[r + x] + 0.25 * (F[r + x - 1] + F[r + x + 1]);\n    T[r + W - 1] = 0.75 * F[r + W - 1] + 0.25 * F[r + W - 2];\n  }\n  for (let x = 0; x \u003c W; x++) {\n    F[x] = 0.75 * T[x] + 0.25 * T[x + W];\n    F[(H - 1) * W + x] = 0.75 * T[(H - 1) * W + x] + 0.25 * T[(H - 2) * W + x];\n  }\n  for (let o = W; o \u003c (H - 1) * W; o++) F[o] = 0.5 * T[o] + 0.25 * (T[o - W] + T[o + W]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { px, py, M0, M1, M2, gx, gy, kp, lit, wt, gl } = S;\n  const mica = S.mica, t = S.t;\n  // Three lights: a soft one over the viewer's shoulder for the flakes that\n  // lie flat, a low ring for the ones the flow has half stood up, and a strip\n  // low at one side, slowly circling, for those leaning toward it.\n  const az = 0.6 + 0.35 * t, c2a = cos(2 * az), s2a = sin(2 * az);\n  const h2x = sin(EL) * cos(az), h2y = sin(EL) * sin(az), h2z = cos(EL);\n  const wf = 0.15, wr = 0.85 + 0.3 * mica, ws = 1 + 0.6 * mica, wg = 0.5 + 1.5 * mica, gs = 0.6 * mica;\n  lit.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  // Large flakes glint once Mica brings them in, the flattest first.\n  const gcut = E0 * (1.05 - mica), sc = (NS - 1) / (1 - 1 / SMAX);\n  for (let p = 0; p \u003c NP; p++) {\n    const mp = M0[p], mq = M1[p], mr = M2[p], fro = mp + mr;\n    // The stretch s, the root of M's larger eigenvalue, and e1's angle to\n    // the strip.\n    const dd = mp - mr, an = sqrt(dd * dd + 4 * mq * mq), s1 = sqrt(0.5 * (fro + an));\n    const c2 = an > 1e-6 ? (dd * c2a + 2 * mq * s2a) / an : 0;\n    const ii = ((s1 > 1 ? 1 - 1 / s1 : 0) * sc + 0.5) | 0, i = ii \u003c NS ? ii : NS - 1, j = ((c2 + 1) * 0.5 * (NC - 1) + 0.5) | 0;\n    let val = wf * RF[i] + wr * RR[i] + ws * RS[i * NC + j];\n    val *= 1 - gs + gs * kp[p];\n    // Into the LED the parcel is over; the blur below spreads it. A large\n    // flake's glint stays in its own LED.\n    const o = (py[p] | 0) * W + (px[p] | 0), ex = gx[p], ey = gy[p];\n    if (ey !== 0 && ex * ex + ey * ey > gcut * gcut) {\n      // Its normal is sqrt(M) times its resting tilt; det M = 1, so\n      // sqrt(M) = (M + I) / sqrt(trace + 2).\n      const is = 1 / sqrt(fro + 2);\n      const m0 = ((mp + 1) * ex + mq * ey) * is, m1 = (mq * ex + (mr + 1) * ey) * is, inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const d = abs(h2x * m0 + h2y * m1 + h2z) * inv, d2 = d * d, d4 = d2 * d2, d8 = d4 * d4;\n      gl[o] += wg * d8 * d8 * d8;\n    }\n    lit[o] += val;\n    wt[o] += 1;\n  }\n  // A LED sees a little past its own square: a 1-2-1 blur each way.\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  // Colours: the oil's body and its sheen, whose brightest light leans a\n  // little round the wheel as pearl pigment does.\n  const h = S.hue + 0.88, hh = h - floor(h);\n  // Deep orange reads brown on the panel and deep yellow olive, so from\n  // orange to lime the oil glows instead: 0.82 of full, not 0.34.\n  const warm = sm(0.015, 0.05, hh) * (1 - sm(0.3, 0.38, hh));\n  const { c0, c1, c2 } = S;\n  hsv(h, 0.9 - 0.1 * warm, 0.34 + 0.48 * warm, c0);\n  hsv(h - 0.02, 0.42 - 0.12 * warm, 1, c1);\n  hsv(h - 0.12, 0.38 - 0.1 * warm, 1, c2);\n  const rest = RF[0] * wf + RR[0] * wr + RS[(NC - 1) >> 1] * ws;\n  for (let o = 0; o \u003c W * H; o++) {\n    // An LED no parcel reached shows flakes at rest.\n    const val = (lit[o] + 0.05 * rest) / (wt[o] + 0.05) + gl[o] * 0.5;\n    const s = val > 1.4 ? 1.4 : val, fl = val \u003c 0.4 ? 0 : val > 1 ? 1 : (val - 0.4) / 0.6, f = fl * fl * (3 - 2 * fl);\n    const sr = c1[0] + (c2[0] - c1[0]) * f, sg = c1[1] + (c2[1] - c1[1]) * f, sb = c1[2] + (c2[2] - c1[2]) * f;\n    const body = 1 - 0.55 * (s > 1 ? 1 : s);\n    // The brightest sheen runs on toward white.\n    const wl = val \u003c 0.75 ? 0 : val > 1.3 ? 1 : (val - 0.75) / 0.55, wh = wl * wl * (1.5 - wl), k = s * 0.85 * (1 - wh);\n    const r = 255 * (c0[0] * body + sr * k + wh), g = 255 * (c0[1] * body + sg * k + wh), b = 255 * (c0[2] * body + sb * k + wh);\n    display.setPixel(o % W, (o / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-shimmer-oil","type":"code","name":"shimmer-oil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shimmer Oil\n// Family:  cosmetic\n// Idea:    An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after shimmer body oils and Paul Matisse's Kalliroscope rheoscopic fluid (1960s), with the flakes turned by Jeffery's equation (G. B. Jeffery, 1922)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1\n//\n// Knob 1: Hue. Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Stir. How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls.\n// Knob 4: Mica. How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white.\n// Buttons: K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.\n\nconst W = 64, H = 128;\nconst { floor, min, sqrt, sin, cos, exp, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The flow lives on a grid of NX x NY cells, HS LEDs each, with free-slip\n// walls round the panel. It is solved as vorticity and stream function: the\n// stream function vanishes on the walls, so a sine series holds it exactly,\n// and the Poisson equation is a division in that series.\nconst NX = 24, NY = 48, HS = W / NX, MX = NX - 1, MY = NY - 1, GW = NX + 1, GN = GW * (NY + 1);\nconst SX = new Float32Array(MX * MX), SY = new Float32Array(MY * MY), LAM = new Float32Array(MX * MY);\nfor (let k = 1; k \u003c= MX; k++) for (let i = 1; i \u003c= MX; i++) SX[(k - 1) * MX + i - 1] = sin((PI * k * i) / NX);\nfor (let k = 1; k \u003c= MY; k++) for (let i = 1; i \u003c= MY; i++) SY[(k - 1) * MY + i - 1] = sin((PI * k * i) / NY);\n// Eigenvalues of the five-point Laplacian, so the stream function's\n// finite-difference Laplacian is exactly minus the vorticity.\nfor (let l = 1; l \u003c= MY; l++)\n  for (let k = 1; k \u003c= MX; k++)\n    LAM[(l - 1) * MX + k - 1] = (4 / (HS * HS)) * (sin((PI * k) / (2 * NX)) ** 2 + sin((PI * l) / (2 * NY)) ** 2);\n\n// Two-dimensional sine transform of the interior nodes (MY rows of MX).\nfunction dst2(src, dst, tmp) {\n  for (let j = 0; j \u003c MY; j++) {\n    const r = j * MX;\n    for (let k = 0; k \u003c MX; k++) {\n      const s = k * MX;\n      let a = 0;\n      for (let i = 0; i \u003c MX; i++) a += src[r + i] * SX[s + i];\n      tmp[r + k] = a;\n    }\n  }\n  for (let l = 0; l \u003c MY; l++) {\n    const s = l * MY, r = l * MX;\n    for (let k = 0; k \u003c MX; k++) dst[r + k] = 0;\n    for (let j = 0; j \u003c MY; j++) {\n      const c = SY[s + j], q = j * MX;\n      if (c === 0) continue;\n      for (let k = 0; k \u003c MX; k++) dst[r + k] += c * tmp[q + k];\n    }\n  }\n}\n\n// Flow constants at Speed 2: viscosity in LED^2 a second, skin friction a\n// second, and how fast the flakes settle back toward lying in the film, a\n// second.\nconst NU = 0.6, MU = 0.12, SETTLE = 0.24;\n// The largest traceless part of M: eigenvalues 36 and 1/36, a stretch of 6.\nconst DMAX = (36 - 1 / 36) / 2;\n// Flakes: a parcel of them to each LED, and one parcel in 25 also carries a\n// single large flake that glints. A flake's normal m turns with the flow as\n// A m, A = F^-T for the deformation F since the flakes lay down. The flakes\n// at rest lean E0 (about 14 degrees) every way, so a parcel's spread of\n// normals is set by M = A A^T alone (the turn left in A only spins an even\n// spread) and M is all a parcel carries. With M's eigenvalues s^2 and 1/s^2\n// and its axis e1 the flakes lie at E0 (s cos phi e1 + sin phi e2 / s), so\n// how they catch a light hangs on the stretch s and, for a light from one\n// side, on the angle between that side and e1.\nconst NP = W * H;\n// The tables hold the averages over phi, for s from 1 to 12 laid out on\n// 1 - 1/s.\nconst E0 = 0.25, NS = 96, NC = 33, SMAX = 12, EL = 0.95;\n// Soft front light, ring light, strip light by angle.\nconst RF = new Float32Array(NS), RR = new Float32Array(NS), RS = new Float32Array(NS * NC);\n{\n  const NPHI = 48, se = sin(EL), ce = cos(EL), cd = [], sd = [];\n  for (let j = 0; j \u003c NC; j++) {\n    const dl = 0.5 * Math.acos(-1 + (2 * j) / (NC - 1));\n    cd.push(se * cos(dl));\n    sd.push(se * sin(dl));\n  }\n  for (let i = 0; i \u003c NS; i++) {\n    const sg = 1 / (1 - (i / (NS - 1)) * (1 - 1 / SMAX));\n    let f = 0, r = 0;\n    for (let k = 0; k \u003c NPHI; k++) {\n      const ph = (PI * (k + 0.5)) / NPHI, m0 = E0 * sg * cos(ph), m1 = (E0 / sg) * sin(ph), inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const i2 = inv * inv, i4 = i2 * i2, i8 = i4 * i4;\n      f += i8 * i8 * i8;\n      // Flakes standing at about 45 degrees catch a low ring of light from\n      // every side; flat ones and edge-on ones miss most of it.\n      const rq = (inv - 0.707) * 3.5, rb = rq * rq \u003c 1 ? 1 - rq * rq : 0;\n      r += 0.05 + 0.95 * rb * rb;\n      for (let j = 0; j \u003c NC; j++) {\n        const d = (m0 * cd[j] + m1 * sd[j] + ce) * inv, d2 = d * d, d4 = d2 * d2;\n        RS[i * NC + j] += (d4 * d4) / NPHI;\n      }\n    }\n    RF[i] = f / NPHI;\n    RR[i] = r / NPHI;\n  }\n}\n\n// The fingertip's push, its radius in LEDs.\nconst SIG = 6.5;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, stir: 0, mica: 0.06, t: 0, fa: 0, par: 0, mdt: [0, 0], warm: false,\n    w: new Float32Array(GN), w2: new Float32Array(GN), psi: new Float32Array(GN),\n    u: new Float32Array(GN), v: new Float32Array(GN), ux: new Float32Array(GN), uy: new Float32Array(GN), vx: new Float32Array(GN),\n    a: new Float32Array(MX * MY), b: new Float32Array(MX * MY), c: new Float32Array(MX * MY), d: new Float32Array(MX * MY), q: new Float32Array((GW + 2) * (NY + 3)),\n    px: new Float32Array(NP), py: new Float32Array(NP),\n    M0: new Float32Array(NP), M1: new Float32Array(NP), M2: new Float32Array(NP),\n    gx: new Float32Array(NP), gy: new Float32Array(NP),\n    kp: new Float32Array(NP), cnt: new Int32Array(W * H), own: new Int32Array(W * H), gl: new Float32Array(W * H), lit: new Float32Array(W * H), wt: new Float32Array(W * H), tmp: new Float32Array(W * H),\n    swirl: null, c0: [0, 0, 0], c1: [0, 0, 0], c2: [0, 0, 0],\n  };\n  // Parcels start one to each LED, their flakes at rest.\n  for (let p = 0; p \u003c NP; p++) {\n    S.px[p] = (p % W) + random();\n    S.py[p] = floor(p / W) + random();\n    S.M0[p] = S.M2[p] = 1;\n    S.kp[p] = 0.8 + 0.4 * random();\n    if (random() \u003c 0.04) {\n      const a = random() * 2 * PI, r = E0 * (0.4 + 0.6 * random());\n      S.gx[p] = r * cos(a);\n      S.gy[p] = r * sin(a) + 1e-6;\n    }\n  }\n  // And the oil has been swirled before: a dozen soft eddies of either sign.\n  for (let n = 0; n \u003c 12; n++) {\n    const cx = 8 + random() * (W - 16), cy = 8 + random() * (H - 16), r = 6 + random() * 8, k = (random() \u003c 0.5 ? -1 : 1) * (2 + 3 * random());\n    for (let j = 1; j \u003c NY; j++)\n      for (let i = 1; i \u003c NX; i++) {\n        const dx = i * HS - cx, dy = j * HS - cy;\n        S.w[j * GW + i] += k * exp(-(dx * dx + dy * dy) / (r * r));\n      }\n  }\n  params.s = S;\n}\n\n// Where the fingertip is at time t: a slow loop that wanders over the panel.\nfunction finger(t) {\n  return [32 + 19 * sin(t * 0.7) + 4 * sin(t * 1.9), 64 + 44 * sin(t * 0.47 + 0.6) + 8 * cos(t * 1.3)];\n}\n\n// One step of the flow: carry the vorticity, push it with the fingertip,\n// let it decay, and solve for the stream function, velocity and its gradient.\nfunction flowStep(S, dt) {\n  const { w, w2, psi, u, v, ux, uy, vx, a, b, c } = S;\n  const force = 16 * (0.45 + 0.5 * S.stir + 1.3 * S.stir * S.stir);\n  const [fx, fy] = finger(S.t), [gx, gy] = finger(S.t + 0.02);\n  const vxs = (gx - fx) / 0.02, vys = (gy - fy) / 0.02;\n  const fr = exp(-MU * dt), sw = S.swirl;\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      // Back along the flow, in grid units.\n      let X = i - (u[g] * dt) / HS, Y = j - (v[g] * dt) / HS;\n      X = X \u003c 0 ? 0 : X > NX - 1e-4 ? NX - 1e-4 : X;\n      Y = Y \u003c 0 ? 0 : Y > NY - 1e-4 ? NY - 1e-4 : Y;\n      const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, q = j0 * GW + i0;\n      let val = (w[q] * (1 - tx) + w[q + 1] * tx) * (1 - ty) + (w[q + GW] * (1 - tx) + w[q + GW + 1] * tx) * ty;\n      // The fingertip drags the oil along with it: the curl of a force along\n      // its velocity, spread over a Gaussian of radius SIG.\n      const dx = i * HS - fx, dy = j * HS - fy, r2 = (dx * dx + dy * dy) / (SIG * SIG);\n      if (r2 \u003c 9) val += ((force * dt * -2) / (SIG * SIG)) * exp(-r2) * (vys * dx - vxs * dy);\n      if (sw) {\n        const ex = i * HS - sw.x, ey = j * HS - sw.y, e2 = (ex * ex + ey * ey) / (sw.r * sw.r);\n        if (e2 \u003c 9) val += sw.k * dt * exp(-e2) * (1 - 0.6 * e2);\n      }\n      w2[g] = val * fr;\n    }\n  if (sw && (sw.left -= dt) \u003c= 0) S.swirl = null;\n  // Viscosity, one explicit step of the five-point Laplacian (the vorticity\n  // is 0 on the walls).\n  const nu = (NU * dt) / (HS * HS);\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      w[g] = w2[g] + nu * (w2[g - 1] + w2[g + 1] + w2[g - GW] + w2[g + GW] - 4 * w2[g]);\n      a[(j - 1) * MX + i - 1] = w[g];\n    }\n  // The stream function: a division in the sine series.\n  dst2(a, b, c);\n  const norm = 4 / (NX * NY);\n  for (let n = 0; n \u003c MX * MY; n++) b[n] *= norm / LAM[n];\n  dst2(b, c, S.d);\n  for (let j = 1; j \u003c NY; j++) for (let i = 1; i \u003c NX; i++) psi[j * GW + i] = c[(j - 1) * MX + i - 1];\n  // Velocity u = dpsi/dy, v = -dpsi/dx and its gradient, by central\n  // differences; past a wall the stream function is mirrored with its sign\n  // turned over, as the sine series has it.\n  const Q = S.q, QW = GW + 2;\n  for (let j = 0; j \u003c= NY; j++) {\n    const r = (j + 1) * QW + 1;\n    for (let i = 0; i \u003c= NX; i++) Q[r + i] = psi[j * GW + i];\n    Q[r - 1] = -Q[r + 1];\n    Q[r + NX + 1] = -Q[r + NX - 1];\n  }\n  for (let i = 0; i \u003c QW; i++) {\n    Q[i] = -Q[2 * QW + i];\n    Q[(NY + 2) * QW + i] = -Q[NY * QW + i];\n  }\n  const h2 = 1 / (HS * HS), i2 = 1 / (2 * HS);\n  for (let j = 0; j \u003c= NY; j++)\n    for (let i = 0; i \u003c= NX; i++) {\n      const g = j * GW + i, q = (j + 1) * QW + i + 1, p0 = Q[q];\n      const pe = Q[q + 1], pw = Q[q - 1], pn = Q[q - QW], ps = Q[q + QW];\n      u[g] = (ps - pn) * i2;\n      v[g] = -(pe - pw) * i2;\n      uy[g] = (ps - 2 * p0 + pn) * h2;\n      vx[g] = -(pe - 2 * p0 + pw) * h2;\n      ux[g] = (Q[q + QW + 1] - Q[q - QW + 1] - Q[q + QW - 1] + Q[q - QW - 1]) * 0.25 * h2;\n    }\n}\n\n// The parcels ride the flow, and every flake in one turns as a flat disc of\n// no thickness does (Jeffery's equation): its normal m follows\n// dm/dt = K m with K = -(grad u)^T, so a flake turns its face across the\n// stretching and lies along the flow lines in shear. Then M follows\n// dM/dt = K M + M K^T, and the film draws M back toward the identity, the\n// flakes settling to rest.\nfunction flakeStep(S, dt) {\n  const { psi, ux, uy, vx, px, py, M0, M1, M2 } = S;\n  // Half the parcels turn their flakes each step, by the time since their\n  // last turn; all of them move.\n  const par = (S.par ^= 1), dm = S.mdt[par] + dt;\n  S.mdt[par] = 0;\n  S.mdt[par ^ 1] += dt;\n  const st = exp(-SETTLE * dm), ih = 1 / HS, XM = NX - 1e-4, YM = NY - 1e-4, hd = 0.5 * dt * ih;\n  for (let p = 0; p \u003c NP; p++) {\n    let x = px[p], y = py[p];\n    let X = x * ih, Y = y * ih;\n    X = X > XM ? XM : X;\n    Y = Y > YM ? YM : Y;\n    const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, g = j0 * GW + i0;\n    // Velocity from the bilinear stream function: divergence-free inside\n    // every cell.\n    const p00 = psi[g], p10 = psi[g + 1], p01 = psi[g + GW], p11 = psi[g + GW + 1];\n    const U = (1 - tx) * (p01 - p00) + tx * (p11 - p10), V = (1 - ty) * (p10 - p00) + ty * (p11 - p01);\n    if ((p & 1) === par) {\n      const w00 = (1 - tx) * (1 - ty), w10 = tx * (1 - ty), w01 = (1 - tx) * ty, w11 = tx * ty;\n      const a = ux[g] * w00 + ux[g + 1] * w10 + ux[g + GW] * w01 + ux[g + GW + 1] * w11;\n      const b = uy[g] * w00 + uy[g + 1] * w10 + uy[g + GW] * w01 + uy[g + GW + 1] * w11;\n      const c = vx[g] * w00 + vx[g + 1] * w10 + vx[g + GW] * w01 + vx[g + GW + 1] * w11;\n      // grad u = [[a, b], [c, -a]]. One step of m' = K m is the Cayley\n      // transform C = (I - K dt/2)^-1 (I + K dt/2); K has no trace, so\n      // C = ((1 - D) I + K dt) / (1 + D) with D = det(K dt) / 4, and det C = 1\n      // exactly, as the flow keeps area. M' = C M C^T.\n      const D = (dm * dm * (-a * a - b * c)) / 4, iD = 1 / (D > -0.8 ? 1 + D : 0.2), q = 1 - D;\n      const c00 = (q - dm * a) * iD, c01 = -dm * c * iD, c10 = -dm * b * iD, c11 = (q + dm * a) * iD;\n      const mp = M0[p], mq = M1[p], mr = M2[p];\n      const t00 = c00 * mp + c01 * mq, t01 = c00 * mq + c01 * mr, t10 = c10 * mp + c11 * mq, t11 = c10 * mq + c11 * mr;\n      // Settling: M's traceless part decays at the rate SETTLE, and past a\n      // stretch of 6 the film's drag holds it, so the flakes stop short of\n      // standing on edge. det M stays 1, as the flow keeps it: with the\n      // traceless part (d0, d1) the trace is 2 sqrt(1 + d0^2 + d1^2).\n      let d0 = 0.5 * (t00 * c00 + t01 * c01 - t10 * c10 - t11 * c11) * st, d1 = (t00 * c10 + t01 * c11) * st;\n      const dd = d0 * d0 + d1 * d1;\n      if (dd > DMAX * DMAX) {\n        const f = DMAX / sqrt(dd);\n        d0 *= f;\n        d1 *= f;\n      }\n      const h = sqrt(1 + d0 * d0 + d1 * d1);\n      M0[p] = h + d0;\n      M1[p] = d1;\n      M2[p] = h - d0;\n    }\n    // The parcel moves by the midpoint rule.\n    let Xm = X + hd * U, Ym = Y - hd * V;\n    Xm = Xm \u003c 0 ? 0 : Xm > XM ? XM : Xm;\n    Ym = Ym \u003c 0 ? 0 : Ym > YM ? YM : Ym;\n    const im = Xm | 0, jm = Ym | 0, sx = Xm - im, sy = Ym - jm, gm = jm * GW + im;\n    const q00 = psi[gm], q10 = psi[gm + 1], q01 = psi[gm + GW], q11 = psi[gm + GW + 1];\n    x += ((1 - sx) * (q01 - q00) + sx * (q11 - q10)) * ih * dt;\n    y -= ((1 - sy) * (q10 - q00) + sy * (q11 - q01)) * ih * dt;\n    px[p] = x \u003c 0.01 ? 0.01 : x > W - 0.01 ? W - 0.01 : x;\n    py[p] = y \u003c 0.01 ? 0.01 : y > H - 0.01 ? H - 0.01 : y;\n  }\n}\n\n// The flow keeps the oil's density even, and so would the parcels if they\n// moved exactly. Where they have drifted out of a LED that its neighbours\n// still reach, a parcel from a crowded LED is moved in, taking on the flakes\n// of a neighbour; up to 400 a frame.\nfunction even(S) {\n  const { px, py, M0, M1, M2, cnt, own } = S;\n  cnt.fill(0);\n  for (let p = 0; p \u003c NP; p++) {\n    const o = (py[p] | 0) * W + (px[p] | 0);\n    cnt[o]++;\n    own[o] = p;\n  }\n  let d = 0, moved = 0;\n  const start = (random() * W * H) | 0;\n  for (let n = 0; n \u003c W * H && moved \u003c 400; n++) {\n    const e = (start + n) % (W * H);\n    if (cnt[e] !== 0) continue;\n    const x = e % W, y = (e / W) | 0;\n    const nb = x > 0 && cnt[e - 1] ? e - 1 : x \u003c W - 1 && cnt[e + 1] ? e + 1 : y > 0 && cnt[e - W] ? e - W : y \u003c H - 1 && cnt[e + W] ? e + W : -1;\n    if (nb \u003c 0) continue;\n    while (d \u003c W * H && cnt[d] \u003c 3) d++;\n    if (d >= W * H) break;\n    const p = own[d], q = own[nb];\n    cnt[d]--;\n    cnt[e] = 1;\n    px[p] = x + 0.1 + 0.8 * random();\n    py[p] = y + 0.1 + 0.8 * random();\n    M0[p] = M0[q];\n    M1[p] = M1[q];\n    M2[p] = M2[q];\n    moved++;\n  }\n}\n\n// The flow is solved every 1/15 s of oil time, the flakes moved every step.\nfunction step(S, dt) {\n  S.fa += dt;\n  if (S.fa > 1 / 15 - 1e-6) {\n    flowStep(S, S.fa);\n    S.fa = 0;\n  }\n  flakeStep(S, dt);\n  S.t += dt;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.stir = cl(k[2], 0, 1);\n  S.mica = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on oil that has been stirred for 5.4 seconds, the flakes laid\n    // down for the last 4.2 of them.\n    for (let i = 0; i \u003c 4; i++) (S.t += 0.3), flowStep(S, 0.3);\n    for (let i = 0; i \u003c 6; i++) step(S, 0.4);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fingertip lands well away from the stirring one and turns a spiral.\n    const [fx, fy] = finger(S.t);\n    let x = 0, y = 0;\n    for (let n = 0; n \u003c 8; n++) {\n      x = 16 + random() * (W - 32);\n      y = 20 + random() * (H - 40);\n      if ((x - fx) ** 2 + (y - fy) ** 2 > 40 * 40) break;\n    }\n    S.swirl = { x, y, r: 10, k: random() \u003c 0.5 ? 22 : -22, left: 0.7 };\n  }\n  // Oil time runs at Speed / 2, in steps no longer than 1/15 s.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 1 / 15);\n    step(S, h);\n    left -= h;\n  }\n  even(S);\n}\n\nfunction blur(F, T) {\n  for (let y = 0; y \u003c H; y++) {\n    const r = y * W;\n    T[r] = 0.75 * F[r] + 0.25 * F[r + 1];\n    for (let x = 1; x \u003c W - 1; x++) T[r + x] = 0.5 * F[r + x] + 0.25 * (F[r + x - 1] + F[r + x + 1]);\n    T[r + W - 1] = 0.75 * F[r + W - 1] + 0.25 * F[r + W - 2];\n  }\n  for (let x = 0; x \u003c W; x++) {\n    F[x] = 0.75 * T[x] + 0.25 * T[x + W];\n    F[(H - 1) * W + x] = 0.75 * T[(H - 1) * W + x] + 0.25 * T[(H - 2) * W + x];\n  }\n  for (let o = W; o \u003c (H - 1) * W; o++) F[o] = 0.5 * T[o] + 0.25 * (T[o - W] + T[o + W]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { px, py, M0, M1, M2, gx, gy, kp, lit, wt, gl } = S;\n  const mica = S.mica, t = S.t;\n  // Three lights: a soft one over the viewer's shoulder for the flakes that\n  // lie flat, a low ring for the ones the flow has half stood up, and a strip\n  // low at one side, slowly circling, for those leaning toward it.\n  const az = 0.6 + 0.35 * t, c2a = cos(2 * az), s2a = sin(2 * az);\n  const h2x = sin(EL) * cos(az), h2y = sin(EL) * sin(az), h2z = cos(EL);\n  const wf = 0.15, wr = 0.85 + 0.3 * mica, ws = 1 + 0.6 * mica, wg = 0.5 + 1.5 * mica, gs = 0.6 * mica;\n  lit.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  // Large flakes glint once Mica brings them in, the flattest first.\n  const gcut = E0 * (1.05 - mica), sc = (NS - 1) / (1 - 1 / SMAX);\n  for (let p = 0; p \u003c NP; p++) {\n    const mp = M0[p], mq = M1[p], mr = M2[p], fro = mp + mr;\n    // The stretch s, the root of M's larger eigenvalue, and e1's angle to\n    // the strip.\n    const dd = mp - mr, an = sqrt(dd * dd + 4 * mq * mq), s1 = sqrt(0.5 * (fro + an));\n    const c2 = an > 1e-6 ? (dd * c2a + 2 * mq * s2a) / an : 0;\n    const ii = ((s1 > 1 ? 1 - 1 / s1 : 0) * sc + 0.5) | 0, i = ii \u003c NS ? ii : NS - 1, j = ((c2 + 1) * 0.5 * (NC - 1) + 0.5) | 0;\n    let val = wf * RF[i] + wr * RR[i] + ws * RS[i * NC + j];\n    val *= 1 - gs + gs * kp[p];\n    // Into the LED the parcel is over; the blur below spreads it. A large\n    // flake's glint stays in its own LED.\n    const o = (py[p] | 0) * W + (px[p] | 0), ex = gx[p], ey = gy[p];\n    if (ey !== 0 && ex * ex + ey * ey > gcut * gcut) {\n      // Its normal is sqrt(M) times its resting tilt; det M = 1, so\n      // sqrt(M) = (M + I) / sqrt(trace + 2).\n      const is = 1 / sqrt(fro + 2);\n      const m0 = ((mp + 1) * ex + mq * ey) * is, m1 = (mq * ex + (mr + 1) * ey) * is, inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const d = abs(h2x * m0 + h2y * m1 + h2z) * inv, d2 = d * d, d4 = d2 * d2, d8 = d4 * d4;\n      gl[o] += wg * d8 * d8 * d8;\n    }\n    lit[o] += val;\n    wt[o] += 1;\n  }\n  // A LED sees a little past its own square: a 1-2-1 blur each way.\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  // Colours: the oil's body and its sheen, whose brightest light leans a\n  // little round the wheel as pearl pigment does.\n  const h = S.hue + 0.88, hh = h - floor(h);\n  // Deep orange reads brown on the panel and deep yellow olive, so from\n  // orange to lime the oil glows instead: 0.82 of full, not 0.34.\n  const warm = sm(0.015, 0.05, hh) * (1 - sm(0.3, 0.38, hh));\n  const { c0, c1, c2 } = S;\n  hsv(h, 0.9 - 0.1 * warm, 0.34 + 0.48 * warm, c0);\n  hsv(h - 0.02, 0.42 - 0.12 * warm, 1, c1);\n  hsv(h - 0.12, 0.38 - 0.1 * warm, 1, c2);\n  const rest = RF[0] * wf + RR[0] * wr + RS[(NC - 1) >> 1] * ws;\n  for (let o = 0; o \u003c W * H; o++) {\n    // An LED no parcel reached shows flakes at rest.\n    const val = (lit[o] + 0.05 * rest) / (wt[o] + 0.05) + gl[o] * 0.5;\n    const s = val > 1.4 ? 1.4 : val, fl = val \u003c 0.4 ? 0 : val > 1 ? 1 : (val - 0.4) / 0.6, f = fl * fl * (3 - 2 * fl);\n    const sr = c1[0] + (c2[0] - c1[0]) * f, sg = c1[1] + (c2[1] - c1[1]) * f, sb = c1[2] + (c2[2] - c1[2]) * f;\n    const body = 1 - 0.55 * (s > 1 ? 1 : s);\n    // The brightest sheen runs on toward white.\n    const wl = val \u003c 0.75 ? 0 : val > 1.3 ? 1 : (val - 0.75) / 0.55, wh = wl * wl * (1.5 - wl), k = s * 0.85 * (1 - wh);\n    const r = 255 * (c0[0] * body + sr * k + wh), g = 255 * (c0[1] * body + sg * k + wh), b = 255 * (c0[2] * body + sb * k + wh);\n    display.setPixel(o % W, (o / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Stir","min":0,"max":1,"about":"How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls."},{"name":"Mica","min":0,"max":1,"about":"How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white."}],"start":[0,2,0,0.06],"measures":{"motion":0.1227,"detail":0.0154,"edges":0,"complexity":1.6312,"coverage":1,"colour":0.1493,"drift":0.0939},"knobResponse":[0.4877,0.1036,0.0703,0.0773]},{"slug":"shoot-em-up","title":"Shoot 'em Up","family":"pixel","round":24,"note":"세로로 흐르는 아케이드 슈팅 게임이 혼자 돌아요. 섬과 해안, 들판과 빨간 지붕 마을이 아래로 흘러가고, 흰 전투기가 노란 탄을 쏘며 S 자로 들어오는 편대와 포탑을 돌리는 포함을 떨어뜨려요. 화면 위 3분의 1을 덮는 보스가 내려와 고리와 나선 탄막을 뿌리다 연쇄 폭발로 부서져요. K1 이 열대 바다에서 붉은 협곡, 밤 도시, 우주 정거장까지 판을 바꾸고, K1 을 누르면 폭탄이 터져요.","idea":"An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.","buttons":"K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.","code":"// ===== Patternflow pattern =====\n// Title:   Shoot 'em Up\n// Family:  pixel\n// Idea:    An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the vertically scrolling arcade shooters of the 1980s\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1\n//\n// Knob 1: Stage. Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars.\n// Knob 2: Speed. The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in.\n// Knob 3: Waves. From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats.\n// Knob 4: Bullets. How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read.\n// Buttons: K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, abs, atan2, hypot, floor, round, sqrt, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = (a, b) => a + (b - a) * Math.random();\n// Ground scroll at Speed 2 in LEDs a second; clouds go 1.8 times as fast.\nconst V0 = 12, CLOUD = 1.8;\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), u = (x -= ix) * x * (3 - 2 * x), v = (y -= iy) * y * (3 - 2 * y);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\n\n// Ground types, one colour each in every stage's palette.\nconst [DEEP, WAVE, CAP, SHAL, SAND, GRASS, TREE, FLDA, FLDB, ROAD, ROOF, WALL, TRUNK, RIVER, LIGHT, HEDGE] = [...Array(16).keys()];\nconst PALS = [\n  \"123c9a1e5cc4d2ecff2aa8ccf0d4884aae3c1f6a2a9ccc4a6e9a3076706ad8482ef2e6c88a5a2a2c7ed8fff2c02e5226\",\n  \"5c20188a3a22d8966ab4502af0b464dc9a4c4a8a3cf2c278c8843e6e4630c8602ef6dcaa5a34182aa89affe6aa7a2c1a\",\n  \"0c1846172a628ca8e61c386a50506a163e340e2c2440446a2a2c481e1e30b43c96ffd25a2e222412265effa83c1c1c2c\",\n  \"08061c1e0e40e6e6ff34185e9a90885a62804c4440868ca8464c661c2034ff3c3cb8c2d83c343228dcff78ffc82a2e40\",\n].map((s) => s.match(/../g).map((h) => parseInt(h, 16)));\n// Clouds per stage: colour, underside shade, alpha, shadow shade.\nconst CLOUDS = [\n  [236, 242, 255, 0.74, 0.72, 0.62],\n  [236, 200, 156, 0.78, 0.6, 0.7],\n  [84, 96, 146, 0.7, 0.66, 0.72],\n  [150, 76, 214, 0.6, 0.5, 1],\n];\n\n// Sprites are rows of letters, \".\" clear; a mirrored one is its left half.\nfunction mk(src, pal, mirror) {\n  const rows = src.trim().split(/\\s+/), w = rows[0].length * (mirror ? 2 : 1), px = [], mask = new Uint8Array(w * rows.length);\n  rows.forEach((r, j) => {\n    for (let i = 0; i \u003c r.length; i++)\n      if (r[i] !== \".\") for (const x of mirror ? [i, w - 1 - i] : [i]) px.push(x, j, pal[r[i]]), (mask[j * w + x] = 1);\n  });\n  return { px, mask };\n}\nconst PLAYER = mk(\"....w.... ...wcw... ...wbw... ..gwbwg.. ..gwwwg.. .wgwwwgw. wwwwgwwww rww.g.wwr r..www..r ...r.r...\", { w: 0xdce4f0, c: 0x96f0ff, b: 0x286ee6, g: 0x828ca0, r: 0xe62832 });\nconst FIGHTER = mk(\"o.....o oo.d.oo ooodooo .odwdo. ..ddd.. ...d...\", { o: 0xff8c1e, d: 0xaa3214, w: 0xfff0c8 });\nconst DART = mk(\"mm...mm mmm.mmm .mmmmm. .mmcmm. ..mmm.. ..mdm.. ...m...\", { m: 0xd246e6, c: 0x78f0ff, d: 0x6e1e8c });\nconst BOAT = mk(\".kkkkk. kbbbbbk kbaaabk kbaaabk kbbbbbk kbbbbbk kbaaabk kbbbbbk .kbbbk. .kbbbk. ..kbk.. ...k...\", { k: 0x1e2028, b: 0x969baa, a: 0x5a5f6e });\n// The boss, 56 wide; \"e\" is its glowing core.\nconst BOSS = mk(\n  `\n.............kkgggk..kkkkkkk\nkk...........kacccc..kbbbbbb\nkykkk........kabbbc..kbbrrbb\nkybbbkkk.....kabbbc..kbbrrbb\nkbbbbbbbkk...kabbbc..kbbbbbb\nkbbbbbbbbbkkkbabbbc..kbbbbbb\nkbbrrrbbbbbbbbabbbc..kbbbkkk\nkaarrrrrrbbbbbabbbc..kbbbkee\nkccabbrrrrrrbbabbbckkbbbbkee\n.kkcaabgggrrrrabbbcbbbbbbkee\n...kcaagygbbrrrrrrbbbbbbbkee\n....kacgggbbbbbrrrrrrbbbbkee\n......kkcaabbbbbbbrrrbbbbkee\n........kacaaabgggbbbbbbbkee\n.........kkccabgygbbbbbbbkee\n...........kkaagggbbbbbbbkee\n.............kccaabbbbbbbkkk\n..............kkccabbbbbbbbb\n................kkcaabbbbbbb\n..................kccbbyybbb\n...................kkabbbbbb\n.....................kabbbbb\n.....................kcbbbbb\n......................kabbbb\n.......................kabbg\n.......................kcbbg\n........................kabg\n.........................kag\n.........................kcg\n..........................kg`,\n  { k: 0x14141e, c: 0x464a60, a: 0x787e96, b: 0xb4bacc, r: 0xdc323c, y: 0xffd646, g: 0x2c2c38, e: -1 },\n  true,\n);\nconst PALM = \"t.t.t .ttt. ttktt .ttt. t.t.t\".split(\" \");\n// 3x5 digits, a P, and a ship for the lives; one octal digit per row.\nconst GLYPH = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717, 0o75744, 0o22775];\nconst BUL = [\n  [255, 70, 170],\n  [70, 220, 255],\n  [255, 170, 40],\n];\n\n// The map repeats every 1024 rows: sea, coast, fields, town, river, coast. -1 is sea, 1 land.\nfunction profile(x, wy) {\n  const v = (wy % 1024) + 0.3 * (x - 32);\n  return v \u003c 250 || v > 830 ? -1 : v \u003c 290 ? (v - 270) / 20 : v \u003c 790 ? 1 : (810 - v) / 20;\n}\nconst ISL = {};\nfunction islands(sd, x, wy) {\n  let best = 0;\n  for (let j = floor(wy / 44) - 1, j1 = j + 2; j \u003c= j1; j++)\n    for (let i = floor(x / 32) - 1, i1 = i + 2; i \u003c= i1; i++) {\n      const ix = i * 32 + 4 + hash(i, j, sd + 2) * 24, iy = j * 44 + 6 + hash(i, j, sd + 3) * 32, r = 12 + hash(i, j, sd + 4) * 10;\n      const b = 1.9 * (1 - hypot(x - ix, wy - iy) / r);\n      if (b > best && hash(i, j, sd + 1) \u003c 0.7) ((best = b), (ISL.x = ix), (ISL.y = iy), (ISL.r = r));\n    }\n  return best;\n}\nfunction terrain(sd, x, wy) {\n  const pr = profile(x, wy);\n  let e = pr + 0.5 * (noise(x / 11, wy / 11, sd) - 0.5) + 0.24 * (noise(x / 4.5, wy / 4.5, sd + 9) - 0.5);\n  if (pr \u003c 0) e += islands(sd, x, wy) * min(1, -pr);\n  if (e \u003c -0.08) {\n    if (e > -0.12) return CAP;\n    if (e > -0.21) return SHAL;\n    const cx = x >> 3, cy = floor(wy / 5), h = hash(cx, cy, sd + 21), c0 = cx * 8 + floor(hash(cx, cy, sd + 22) * 6);\n    if (h \u003c 0.4 && wy === cy * 5 + floor(hash(cx, cy, sd + 23) * 4) && x >= c0 && x \u003c c0 + (h \u003c 0.15 ? 3 : 2)) return CAP;\n    return e > -0.36 || noise(x / 6, wy / 2, sd + 5) > 0.78 ? WAVE : DEEP;\n  }\n  if (e \u003c 0.08) return SAND;\n  if (pr \u003c -0.5) {\n    const dx = round(x - ISL.x), dy = round(wy - ISL.y), c = ISL.r > 13 && abs(dx) \u003c= 2 && abs(dy) \u003c= 2 ? PALM[dy + 2][dx + 2] : \".\";\n    return c === \".\" ? GRASS : c === \"k\" ? TRUNK : TREE;\n  }\n  const u = wy % 1024, dr = abs(x - 30 - 9 * sin(wy / 70));\n  if (u > 560 && u \u003c 770) {\n    const a = (u - 560) / 34, dv = abs(x - 32 - 23 * sin(a)) / sqrt(1 + (0.68 * cos(a)) ** 2);\n    if (dv \u003c 4.4) return dr \u003c 2.6 ? (dr > 1.6 ? WALL : ROAD) : dv \u003c 3.3 ? RIVER : SAND;\n  }\n  if (dr \u003c 1.6) return dr \u003c 0.6 && wy % 6 \u003c 3 ? LIGHT : ROAD;\n  if (u > 420 && u \u003c 510 && dr \u003c 22 + 6 * sin(wy / 9)) {\n    // The town: in each plot a house (roof, front wall, shadow) or a tree.\n    const lx = (x + 4) % 9, ly = wy % 9;\n    if (lx === 0 || ly === 0) return ROAD;\n    if (hash(floor((x + 4) / 9), floor(wy / 9), sd + 41) > 0.6) return hypot(lx - 4.5, ly - 4.5) \u003c 2.7 ? TREE : GRASS;\n    if (lx >= 2 && lx \u003c= 6 && ly >= 2) return ly === 2 ? WALL : ly > 7 ? GRASS : lx === 4 ? TRUNK : ROOF;\n    return (lx === 7 && ly >= 2 && ly \u003c= 6) || (ly === 1 && lx >= 3) ? HEDGE : GRASS;\n  }\n  const band = floor(wy / 14), gx = x + floor(hash(band, 0, sd + 51) * 16), h = hash(floor(gx / 16), band, sd + 52);\n  if (gx % 16 === 0 || wy % 14 === 0) return h \u003c 0.6 ? HEDGE : GRASS;\n  const kind = floor(h * 4);\n  if (kind \u003c 3) return (kind ? (kind > 1 ? hash(gx, wy, sd + 53) \u003c 0.12 : gx % 3 === 0) : wy % 3 === 0) ? FLDB : FLDA;\n  const tx = floor(gx / 5), ty = floor(wy / 5);\n  return hypot(gx - tx * 5 - 1 - hash(tx, ty, sd + 55) * 3, wy - ty * 5 - 1 - hash(tx, ty, sd + 56) * 3) \u003c 1.9 ? TREE : GRASS;\n}\n// A cloud: puffs on a flat base, 2 its body and 1 its underside.\nfunction newCloud(S, cw) {\n  const w = floor(rnd(22, 40)), h = floor(rnd(10, 16)), n = 3 + floor(w / 9), P = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = h * 0.5 * (0.5 + 0.5 * sin((PI * (i + 0.5)) / n)) + rnd(-0.6, 0.8);\n    P.push((w * (i + 0.5)) / n + rnd(-1.5, 1.5), h - 1.5 - r * 0.55, r);\n  }\n  const inn = (x, y) => x >= 0 && y >= 0 && x \u003c w && y \u003c= h - 1.5 && P.some((_, i) => i % 3 === 0 && hypot(x + 0.5 - P[i], y + 0.5 - P[i + 1]) \u003c P[i + 2]);\n  const m = new Uint8Array(w * h);\n  for (let y = 0; y \u003c h; y++) for (let x = 0; x \u003c w; x++) if (inn(x, y)) m[y * w + x] = inn(x, y + 2) ? 2 : 1;\n  S.clouds.push({ x: floor(rnd(-14, 56 - w / 2)), cw: cw + h, w, h, m });\n}\nfunction fill(S) {\n  for (const top = floor(S.scroll) + H + 24; S.gen \u003c top; S.gen++) for (let x = 0; x \u003c W; x++) S.ter[(S.gen & 255) * W + x] = terrain(S.sd, x, S.gen);\n  const cb = floor(S.scroll * CLOUD);\n  for (; S.cnext \u003c cb + H + 20; S.cnext += floor(rnd(24, 52))) newCloud(S, S.cnext);\n  S.clouds = S.clouds.filter((c) => cb + H - 1 - c.cw \u003c H);\n}\n\nexport function setup(params) {\n  const S = { t: 0, scroll: 85, gen: 83, cnext: 147, sd: floor(Math.random() * 9000), ter: new Uint8Array(256 * W), cb: new Uint8Array(N), buf: new Float32Array(N * 3), sh: new Float32Array(N) };\n  Object.assign(S, { clouds: [], en: [], boats: [], eb: [], ps: [], fx: [], pop: [], caps: [], bossAt: 3.2, bossN: 0, waveAt: 0.4, waveN: 0, boatAt: 0.2, kills: 0, score: 0, flash: 0 });\n  S.pl = { x: 32, y: 112, lvl: 0, lvlT: 0, ft: 0 };\n  fill(S);\n  params.s = S;\n}\n\nfunction shoot(S, x, y, a, v, c, big) {\n  if (S.eb.length \u003c 380) S.eb.push({ x, y, vx: cos(a) * v, vy: sin(a) * v, c, big });\n}\nfunction fan(S, x, y, m, gap, v) {\n  const g = atan2(S.pl.y - y, S.pl.x - x);\n  for (let i = 0; i \u003c m; i++) shoot(S, x, y, g + (i - (m - 1) / 2) * gap, v, 2, 0);\n}\nfunction boom(S, x, y, s) {\n  const sp = [];\n  for (let i = 0; i \u003c 4 + s * 3; i++) {\n    const a = rnd(0, 6.283);\n    sp.push(cos(a) * rnd(20, 50) * s, sin(a) * rnd(20, 50) * s);\n  }\n  S.fx.push({ x, y, t0: S.t, s, sp, d: 0.45 + 0.12 * s });\n}\nfunction score(S, x, y, v) {\n  S.pop.push({ x, y, v, t0: S.t });\n  S.score += v;\n}\n// A hit; a kill leaves an explosion, its score, and every ninth a capsule.\nfunction hurt(S, e, n, x, y) {\n  e.fl = 0.06;\n  if ((e.hp -= n) > 0) return;\n  boom(S, x, y, e.boat ? 1.3 : 1);\n  score(S, x, y - 4, e.boat ? 300 : e.k ? 150 : 100);\n  if (++S.kills % 9 === 0) S.caps.push({ x, y });\n}\nconst boatY = (S, b) => floor(S.scroll) + H - 1 - round(b.wy);\nconst yOf = (S, e) => (e.boat ? boatY(S, e) : e.y);\n\nfunction spawn(S) {\n  const w = S.waves;\n  if (S.t >= S.waveAt) {\n    const n = S.waveN++, m = 4 + round(w);\n    if (n % 2 === 0) {\n      const o = { k: 0, side: n % 4 ? -1 : 1, y0: rnd(8, 30) };\n      for (let i = 0; i \u003c m; i++) S.en.push({ ...o, born: S.t + i * 0.3, x: -99, y: -99, hp: 6 });\n    } else {\n      const cx = rnd(24, 40);\n      for (let i = 0; i \u003c (m | 1); i++) {\n        const r = (i + 1) >> 1;\n        S.en.push({ k: 1, born: S.t, x: cx + (i & 1 ? r : -r) * 6, y: -8 - r * 6, hy: 34 - r * 6, st: 0, hp: 7, hold: 0.5 + r * 0.25 + rnd(0, 0.2) });\n      }\n    }\n    S.waveAt = S.t + (n === 0 ? 0.45 : S.boss ? 2 : 1) * (3.3 / w ** 0.75);\n  }\n  if (S.t \u003c S.boatAt) return;\n  // A gunboat, where its hull fits on open water.\n  const wy = floor(S.scroll) + H + 8;\n  S.boatAt = S.t + 0.3;\n  for (let n = 0; n \u003c 6; n++) {\n    const x = floor(rnd(6, 58));\n    let ok = true;\n    for (let j = -7; j \u003c= 7; j += 2) for (let i = -4; i \u003c= 4; i += 2) ok &&= S.ter[((wy + j) & 255) * W + x + i] \u003c= CAP;\n    if (ok) return S.boats.push({ boat: 1, x, wy, hp: 10, ft: rnd(0.6, 1.6) }), (S.boatAt += rnd(1.1, 2.7) / w ** 0.7);\n  }\n}\n\nfunction stepEnemies(S, d) {\n  const f = S.fury;\n  for (const e of S.en) {\n    const a = S.t - e.born;\n    e.fl -= d;\n    if (a \u003c 0) continue;\n    if (e.k === 0) {\n      e.x = e.side > 0 ? -6 + 38 * a : 70 - 38 * a;\n      e.y = e.y0 + 14 * a + 13 * sin(3.2 * a);\n    } else if (e.st === 0) {\n      if ((e.y += 50 * d) >= e.hy) ((e.st = 1), (e.t1 = S.t));\n    } else if (e.st === 1) {\n      if (S.t - e.t1 > e.hold) {\n        const g = atan2(S.pl.y - e.y, S.pl.x - e.x);\n        ((e.st = 2), (e.vx = cos(g) * 30), (e.vy = sin(g) * 30));\n        if (Math.random() \u003c 0.35 + 0.65 * f) fan(S, e.x, e.y + 3, 1 + 2 * round(f * 1.5), 0.25, 42);\n      }\n    } else {\n      const k = min(130, hypot(e.vx, e.vy) + 110 * d) / hypot(e.vx, e.vy);\n      e.x += (e.vx *= k) * d;\n      e.y += (e.vy *= k) * d;\n    }\n  }\n  S.en = S.en.filter((e) => e.hp > 0 && e.y \u003c 140 && e.x > -20 && e.x \u003c 84);\n  for (const b of S.boats) {\n    const sy = boatY(S, b);\n    b.fl -= d;\n    b.a = atan2(S.pl.y - sy + 3, S.pl.x - b.x);\n    if ((b.ft -= d) \u003c= 0 && sy > 2 && sy \u003c 96) {\n      b.ft = 2.2 - 1.3 * f;\n      for (let i = f > 0.5 ? -1 : 0; i \u003c= (f > 0.5 ? 1 : 0); i++) shoot(S, b.x + cos(b.a) * 4, sy - 3 + sin(b.a) * 4, b.a + i * 0.25, 38, 2, 0);\n    }\n  }\n  S.boats = S.boats.filter((b) => b.hp > 0 && boatY(S, b) \u003c 140);\n}\n\nfunction stepBoss(S, d) {\n  const f = S.fury;\n  // The first boss is short, so its fight fits the first seconds.\n  if (!S.boss && S.t >= S.bossAt) S.boss = { x: 32, y: -34, t0: S.t, st: 0, hp: S.bossN ? 320 + 40 * S.bossN : 60, ph: S.bossN ? 2.8 : 1.6, ang: 0 };\n  const B = S.boss;\n  if (!B) return;\n  B.fl -= d;\n  if (B.st === 2) {\n    if (!(S.t \u003c B.nd)) {\n      boom(S, B.x + rnd(-22, 22), B.y + rnd(4, 24), rnd(0.7, 1.4));\n      B.nd = S.t + 0.07;\n    }\n    if (S.t - B.t2 > 1.7) {\n      boom(S, B.x, B.y + 12, 3.2);\n      for (let i = 0; i \u003c 6; i++) boom(S, B.x + rnd(-24, 24), B.y + rnd(4, 26), rnd(1, 1.8));\n      score(S, B.x - 6, B.y + 14, 5000);\n      S.caps.push({ x: B.x, y: B.y + 20 });\n      Object.assign(S, { flash: 0.75, boss: null, bossAt: S.t + rnd(18, 30), bossN: S.bossN + 1 });\n    }\n  } else if (B.st === 0) {\n    const u = min(1, (S.t - B.t0) / 1.4);\n    B.y = -34 + 40 * (1 - (1 - u) * (1 - u));\n    if (u >= 1) ((B.st = 1), (B.t1 = S.t));\n  } else {\n    // In turns: a ring, a spiral, aimed fans from the wing guns.\n    B.x = 32 + 3 * sin((S.t - B.t1) * 0.8);\n    const ph = floor((S.t - B.t1) / B.ph) % 3;\n    if (ph === 0 && !(S.t \u003c B.nr)) {\n      const n = floor(12 + 18 * f), a0 = rnd(0, 6.283);\n      B.nr = S.t + 1.5 - 0.8 * f;\n      for (let i = 0; i \u003c n; i++) shoot(S, B.x, B.y + 11, a0 + (i * 2 * PI) / n, 28, 0, 1);\n    }\n    if (ph === 1 && !(S.t \u003c B.nx)) {\n      const arms = f > 0.5 ? 3 : 2;\n      B.nx = S.t + 1 / (7 + 23 * f);\n      B.ang += 0.37;\n      for (let i = 0; i \u003c arms; i++) shoot(S, B.x, B.y + 11, B.ang + (i * 2 * PI) / arms, 32, 1, 0);\n    }\n    if (ph === 2 && !(S.t \u003c B.nf)) {\n      B.nf = S.t + 1.05 - 0.55 * f;\n      for (const s of [-1, 1]) fan(S, B.x + s * 19.5, B.y + 10, 3 + round(6 * f), 0.12 + 0.1 * f, 42);\n    }\n  }\n}\n\nfunction stepPlayer(S, d) {\n  const P = S.pl, B = S.boss;\n  if ((P.lvlT -= d) \u003c= 0 && P.lvl > 0) ((P.lvl -= 1), (P.lvlT = 14));\n  // Its aim: the boss, a capsule, or half way from its weave to the nearest enemy.\n  const wv = 32 + 18 * sin(S.t * 0.53);\n  let ax = wv, ny = -99;\n  if (B && B.st > 0) ax = B.x + 10 * sin(S.t * 1.1);\n  else if (S.caps.length) ax = S.caps[0].x;\n  else for (const e of [...S.en, ...S.boats]) if (yOf(S, e) > max(0, ny) && yOf(S, e) \u003c P.y - 14) ((ny = yOf(S, e)), (ax = 0.55 * e.x + 0.45 * wv));\n  // Then the nearby spot the bullets will miss on its way there.\n  let best = 1e9, bx = P.x, by = P.y;\n  for (const ox of [-14, -9, -5, -2, 0, 2, 5, 9, 14])\n    for (const oy of [-8, -3, 0, 4]) {\n      const cx = clamp(P.x + ox, 5, 58), cy = clamp(P.y + oy, 96, 116), dist = max(0.01, hypot(cx - P.x, cy - P.y));\n      let c = 0.05 * abs(cx - ax) + 0.04 * abs(cy - 111) + 0.015 * dist;\n      for (const b of S.eb)\n        for (const tau of abs(b.y - cy) \u003c 45 ? [0.05, 0.12, 0.2, 0.3, 0.42] : []) {\n          const k = min(1, (60 * tau) / dist), dx = b.x + b.vx * tau - P.x - (cx - P.x) * k, dy = b.y + b.vy * tau - P.y - (cy - P.y) * k;\n          c += max(0, 30 - dx * dx - 0.7 * dy * dy) / (tau \u003c 0.15 ? 6 : 15);\n        }\n      if (c \u003c best) ((best = c), (bx = cx), (by = cy));\n    }\n  P.x += clamp(bx - P.x, -60 * d, 60 * d);\n  P.y += clamp(by - P.y, -60 * d, 60 * d);\n  // Two streams, three after a capsule, five after two.\n  for (P.ft -= d; P.ft \u003c= 0; P.ft += 0.1)\n    for (const [x, vx] of [[-2, 0], [2, 0], [0, 0], [-3, -38], [3, 38]].slice(0, [2, 3, 5][P.lvl])) S.ps.push({ x: P.x + x, y: P.y - 5, vx, vy: -170 });\n}\n\nfunction stepShots(S, d) {\n  const B = S.boss, P = S.pl;\n  for (const s of S.ps) {\n    s.x += s.vx * d;\n    s.y += s.vy * d;\n    if (s.y \u003c -4) s.dead = 1;\n    for (const e of [...S.en, ...S.boats]) if (!s.dead && e.hp > 0 && abs(s.x - e.x) \u003c= 4 && abs(s.y - yOf(S, e)) \u003c= (e.boat ? 6 : 4)) ((s.dead = 1), hurt(S, e, 1, e.x, yOf(S, e)));\n    const ix = round(s.x - B?.x + 28), iy = round(s.y - B?.y);\n    if (!s.dead && B?.st === 1 && ix >= 0 && ix \u003c 56 && iy >= 0 && iy \u003c 30 && BOSS.mask[iy * 56 + ix]) ((s.dead = 1), (B.fl = 0.05), (S.score += 10), --B.hp);\n  }\n  // A bullet that reaches the fighter bursts on its shield.\n  for (const b of S.eb) {\n    b.x += b.vx * d;\n    b.y += b.vy * d;\n    if (b.x \u003c -3 || b.x > 66 || b.y \u003c -3 || b.y > 130) b.dead = 1;\n    else if (abs(b.x - P.x) \u003c 1.6 && abs(b.y - P.y) \u003c 2.5) ((b.dead = 1), boom(S, b.x, b.y, 0.4));\n  }\n  if (B?.st === 1 && B.hp \u003c= 0) ((B.st = 2), (B.t2 = S.t), (S.eb.length = 0));\n  for (const c of S.caps) {\n    c.y += 14 * d;\n    if (abs(c.x - P.x) \u003c 6 && abs(c.y - P.y) \u003c 7) ((c.dead = 1), (P.lvl = min(2, P.lvl + 1)), (P.lvlT = 16));\n  }\n  for (const k of [\"ps\", \"eb\", \"caps\"]) S[k] = S[k].filter((o) => !o.dead && o.y \u003c 134);\n  S.fx = S.fx.filter((f) => S.t - f.t0 \u003c f.d);\n  S.pop = S.pop.filter((p) => S.t - p.t0 \u003c 0.9);\n}\n\nfunction step(S, d) {\n  S.t += d;\n  S.scroll += V0 * d;\n  S.flash = max(0, S.flash - 2.6 * d);\n  fill(S);\n  spawn(S);\n  stepEnemies(S, d);\n  stepBoss(S, d);\n  stepPlayer(S, d);\n  stepShots(S, d);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.stage, S.waves, S.fury] = [clamp(k[0], 0, 1), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  // The first second plays before the first frame.\n  if (!S.started) {\n    S.started = 1;\n    for (let i = 0; i \u003c 30; i++) step(S, 1 / 30);\n  }\n  // The bomb clears the bullets and hurts everything on the screen.\n  if (input.btnPressed?.[0]) {\n    Object.assign(S, { flash: 0.9, bomb: S.t, eb: [] });\n    for (const e of [...S.en, ...S.boats]) if (e.hp > 0 && yOf(S, e) > 0) hurt(S, e, 4, e.x, yOf(S, e));\n    if (S.boss?.st === 1) S.boss.hp -= 15;\n  }\n  for (let d = (clamp(dt || 0, 0, 0.1) * clamp(k[1], 0.2, 3)) / 2; d > 0; d -= 1 / 30) step(S, min(d, 1 / 30));\n}\n\nfunction put(buf, x, y, r, g, b) {\n  const q = (round(y) * W + round(x)) * 3;\n  if (x > -0.5 && y > -0.5 && x \u003c W - 0.5 && y \u003c H - 0.5) ((buf[q] = r), (buf[q + 1] = g), (buf[q + 2] = b));\n}\nfunction mix(buf, q, r, g, b, a) {\n  buf[q] += (r - buf[q]) * a;\n  buf[q + 1] += (g - buf[q + 1]) * a;\n  buf[q + 2] += (b - buf[q + 2]) * a;\n}\n// Mode 1 draws a sprite white, 2 stamps its shadow.\nfunction spr(S, sp, x0, y0, mode, glow) {\n  const p = sp.px;\n  for (let i = 0; i \u003c p.length; i += 3) {\n    const x = x0 + p[i], y = y0 + p[i + 1], c = mode ? 0xffffff : p[i + 2];\n    if (mode === 2) {\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) S.sh[y * W + x] = min(S.sh[y * W + x], 0.55);\n    } else if (c \u003c 0) put(S.buf, x, y, ...glow);\n    else put(S.buf, x, y, c >> 16, (c >> 8) & 255, c & 255);\n  }\n}\nfunction number(buf, v, x0, y0, r, g, b) {\n  const s = String(v);\n  for (let n = 0; n \u003c s.length; n++)\n    for (let j = 0; j \u003c 15; j++) if ((GLYPH[\"0123456789PA\".indexOf(s[n])] >> (14 - j)) & 1) put(buf, x0 + n * 4 + (j % 3), y0 + floor(j / 3), r, g, b);\n}\n// A ring of width w, or a disc for w 0.\nfunction ring(buf, cx, cy, R, w, c) {\n  for (let y = floor(cy - R - w); y \u003c= cy + R + w; y++)\n    for (let x = floor(cx - R - w); x \u003c= cx + R + w; x++) if (w ? abs(hypot(x - cx, y - cy) - R) \u003c w : hypot(x - cx, y - cy) \u003c= R) put(buf, x, y, ...c);\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { buf, sh, cb, pl: P, boss: B, t } = S,\n    si = min(3, floor(S.stage * 4)), pal = PALS[si];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, wy = floor(S.scroll) + H - 1 - y; x \u003c W; x++) {\n      let k = S.ter[(wy & 255) * W + x];\n      if (k === CAP && (t * 1.6 + hash(x, wy, 3) * 4) % 2 > 1.55) k = WAVE;\n      put(buf, x, y, pal[k * 3], pal[k * 3 + 1], pal[k * 3 + 2]);\n      if (si === 2 && k === FLDA && (x + wy) % 2 === 0 && hash(x, wy, 5) \u003c 0.4) put(buf, x, y, 255, 214, 110);\n      const h = si === 3 && k === DEEP ? hash(x, wy, 6) : 1;\n      if (h \u003c 0.035) put(buf, x, y, ...Array(3).fill(90 + 4600 * h * (0.7 + 0.3 * sin(t * 4 + x * y))));\n    }\n  for (const b of S.boats) {\n    const y = boatY(S, b);\n    spr(S, BOAT, b.x - 3, y - 6, b.fl > 0 ? 1 : 0);\n    for (let i = 1; i \u003c= 3; i++) put(buf, b.x + cos(b.a) * i, y - 3 + sin(b.a) * i, 30, 30, 40);\n  }\n  // Shadows, then the clouds. Thick fire dims the ground as bullet-hell games do.\n  const C = CLOUDS[si];\n  cb.fill(0);\n  for (const c of S.clouds)\n    for (let j = 0, sy = floor(S.scroll * CLOUD) + H - 1 - c.cw; j \u003c c.h; j++)\n      for (let i = 0, x = c.x, y = sy + j; i \u003c c.w; i++, x++) if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && c.m[j * c.w + i]) cb[y * W + x] = c.m[j * c.w + i];\n  for (let i = 0; i \u003c N; i++) sh[i] = (i % W >= 6 && i >= 9 * W && cb[i - 9 * W - 6] ? C[5] : 1) * (1 - 0.36 * S.fury);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) + 2, round(e.y) + 6, 2);\n  if (B) spr(S, BOSS, round(B.x) - 22, round(B.y) + 9, 2);\n  spr(S, PLAYER, round(P.x) + 1, round(P.y) + 3, 2);\n  for (let i = 0; i \u003c N; i++) {\n    const l = cb[i], k = l === 1 ? C[3] : 1;\n    mix(buf, i * 3, 0, 0, 0, 1 - sh[i]);\n    if (l) mix(buf, i * 3, C[0] * k, C[1] * k, C[2] * k, C[4]);\n  }\n  for (const c of S.caps) ring(buf, c.x, c.y, 2.9, 0, floor(t * 7) % 2 ? [230, 40, 50] : [40, 90, 240]), number(buf, \"P\", c.x - 1, c.y - 2, 255, 255, 255);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) - 3, round(e.y) - 3, e.fl > 0 ? 1 : 0);\n  // The boss's core pulses cyan, or red as the fury rises.\n  const f = S.fury, p = 0.5 + 0.5 * sin(t * 9);\n  if (B) spr(S, BOSS, round(B.x) - 28, round(B.y), (B.st === 2 ? floor(t * 16) % 2 : B.fl > 0 && floor(t * 20) % 4 === 0) ? 1 : 0, [120 + 135 * f + 60 * p, 230 - 170 * f + 25 * p * (1 - f), 255 - 215 * f]);\n  for (const ex of [3, 5])\n    for (let j = 0, L = 2 + ((t * 24 + ex) % 3 | 0), c; j \u003c L; j++) put(buf, round(P.x) - 4 + ex, round(P.y) + 5 + j, 255 - 12 * (c = min(3, j + (L \u003c 3))) * c, 255 - 65 * c, 220 - 70 * c);\n  spr(S, PLAYER, round(P.x) - 4, round(P.y) - 5, 0);\n  for (const s of S.ps) for (let j = 0; j \u003c 3; j++) put(buf, s.x, s.y + j, 255, 255 - 28 * j, 230 - 85 * j);\n  // Explosions: a white flash, a ring cooling from yellow to red, sparks.\n  for (const f of S.fx) {\n    const a = (t - f.t0) / f.d, R = (1.5 + 4.5 * a) * f.s;\n    if (a \u003c 0.16) ring(buf, f.x, f.y, (1 + 10 * a) * f.s, 0, [255, 255, 235]);\n    else if (a \u003c 0.5) ring(buf, f.x, f.y, R * 0.5, 0, [255, a \u003c 0.3 ? 210 : 120, 40]);\n    if (a >= 0.16) ring(buf, f.x, f.y, R, 0.75, a \u003c 0.45 ? [255, 220, 80] : a \u003c 0.72 ? [255, 130, 30] : [180, 46, 24]);\n    for (let i = 0; a \u003c 0.85 && i \u003c f.sp.length; i += 2) put(buf, f.x + f.sp[i] * a * f.d, f.y + f.sp[i + 1] * a * f.d, 255, 245, 170);\n  }\n  for (const b of S.eb) {\n    const c = BUL[b.c];\n    for (let i = 0; i \u003c 9; i++) if (i % 2 || (b.big && i !== 4)) put(buf, b.x + (i % 3) - 1, b.y + floor(i / 3) - 1, ...c.map((v) => (i % 2 ? v : v * 0.6)));\n    put(buf, b.x, b.y, 255, 255, 255);\n  }\n  for (const p of S.pop) {\n    const a = (t - p.t0) / 0.9;\n    if (a \u003c 0.75 || floor(t * 20) % 2) number(buf, p.v, round(p.x - String(p.v).length * 2), round(p.y - a * 9), 255, 240, 120);\n  }\n  if (t - S.bomb \u003c 1) ring(buf, P.x, P.y, (t - S.bomb) * 150, 1.6, [200, 250, 255]);\n  for (let i = 0; S.flash > 0 && i \u003c N * 3; i++) buf[i] += (255 - buf[i]) * min(1, S.flash) * 0.85;\n  for (let i = 0; i \u003c 7 * W; i++) if (i % W \u003c 26 || i % W >= 50) mix(buf, i * 3, 0, 0, 0, 0.82);\n  number(buf, String(S.score % 1e6).padStart(6, \"0\"), 1, 1, 255, 255, 255);\n  number(buf, \"AAA\", 52, 1, 220, 228, 240);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","layer":{"id":"layer-shoot-em-up","type":"code","name":"shoot-em-up","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shoot 'em Up\n// Family:  pixel\n// Idea:    An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the vertically scrolling arcade shooters of the 1980s\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1\n//\n// Knob 1: Stage. Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars.\n// Knob 2: Speed. The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in.\n// Knob 3: Waves. From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats.\n// Knob 4: Bullets. How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read.\n// Buttons: K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, abs, atan2, hypot, floor, round, sqrt, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = (a, b) => a + (b - a) * Math.random();\n// Ground scroll at Speed 2 in LEDs a second; clouds go 1.8 times as fast.\nconst V0 = 12, CLOUD = 1.8;\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), u = (x -= ix) * x * (3 - 2 * x), v = (y -= iy) * y * (3 - 2 * y);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\n\n// Ground types, one colour each in every stage's palette.\nconst [DEEP, WAVE, CAP, SHAL, SAND, GRASS, TREE, FLDA, FLDB, ROAD, ROOF, WALL, TRUNK, RIVER, LIGHT, HEDGE] = [...Array(16).keys()];\nconst PALS = [\n  \"123c9a1e5cc4d2ecff2aa8ccf0d4884aae3c1f6a2a9ccc4a6e9a3076706ad8482ef2e6c88a5a2a2c7ed8fff2c02e5226\",\n  \"5c20188a3a22d8966ab4502af0b464dc9a4c4a8a3cf2c278c8843e6e4630c8602ef6dcaa5a34182aa89affe6aa7a2c1a\",\n  \"0c1846172a628ca8e61c386a50506a163e340e2c2440446a2a2c481e1e30b43c96ffd25a2e222412265effa83c1c1c2c\",\n  \"08061c1e0e40e6e6ff34185e9a90885a62804c4440868ca8464c661c2034ff3c3cb8c2d83c343228dcff78ffc82a2e40\",\n].map((s) => s.match(/../g).map((h) => parseInt(h, 16)));\n// Clouds per stage: colour, underside shade, alpha, shadow shade.\nconst CLOUDS = [\n  [236, 242, 255, 0.74, 0.72, 0.62],\n  [236, 200, 156, 0.78, 0.6, 0.7],\n  [84, 96, 146, 0.7, 0.66, 0.72],\n  [150, 76, 214, 0.6, 0.5, 1],\n];\n\n// Sprites are rows of letters, \".\" clear; a mirrored one is its left half.\nfunction mk(src, pal, mirror) {\n  const rows = src.trim().split(/\\s+/), w = rows[0].length * (mirror ? 2 : 1), px = [], mask = new Uint8Array(w * rows.length);\n  rows.forEach((r, j) => {\n    for (let i = 0; i \u003c r.length; i++)\n      if (r[i] !== \".\") for (const x of mirror ? [i, w - 1 - i] : [i]) px.push(x, j, pal[r[i]]), (mask[j * w + x] = 1);\n  });\n  return { px, mask };\n}\nconst PLAYER = mk(\"....w.... ...wcw... ...wbw... ..gwbwg.. ..gwwwg.. .wgwwwgw. wwwwgwwww rww.g.wwr r..www..r ...r.r...\", { w: 0xdce4f0, c: 0x96f0ff, b: 0x286ee6, g: 0x828ca0, r: 0xe62832 });\nconst FIGHTER = mk(\"o.....o oo.d.oo ooodooo .odwdo. ..ddd.. ...d...\", { o: 0xff8c1e, d: 0xaa3214, w: 0xfff0c8 });\nconst DART = mk(\"mm...mm mmm.mmm .mmmmm. .mmcmm. ..mmm.. ..mdm.. ...m...\", { m: 0xd246e6, c: 0x78f0ff, d: 0x6e1e8c });\nconst BOAT = mk(\".kkkkk. kbbbbbk kbaaabk kbaaabk kbbbbbk kbbbbbk kbaaabk kbbbbbk .kbbbk. .kbbbk. ..kbk.. ...k...\", { k: 0x1e2028, b: 0x969baa, a: 0x5a5f6e });\n// The boss, 56 wide; \"e\" is its glowing core.\nconst BOSS = mk(\n  `\n.............kkgggk..kkkkkkk\nkk...........kacccc..kbbbbbb\nkykkk........kabbbc..kbbrrbb\nkybbbkkk.....kabbbc..kbbrrbb\nkbbbbbbbkk...kabbbc..kbbbbbb\nkbbbbbbbbbkkkbabbbc..kbbbbbb\nkbbrrrbbbbbbbbabbbc..kbbbkkk\nkaarrrrrrbbbbbabbbc..kbbbkee\nkccabbrrrrrrbbabbbckkbbbbkee\n.kkcaabgggrrrrabbbcbbbbbbkee\n...kcaagygbbrrrrrrbbbbbbbkee\n....kacgggbbbbbrrrrrrbbbbkee\n......kkcaabbbbbbbrrrbbbbkee\n........kacaaabgggbbbbbbbkee\n.........kkccabgygbbbbbbbkee\n...........kkaagggbbbbbbbkee\n.............kccaabbbbbbbkkk\n..............kkccabbbbbbbbb\n................kkcaabbbbbbb\n..................kccbbyybbb\n...................kkabbbbbb\n.....................kabbbbb\n.....................kcbbbbb\n......................kabbbb\n.......................kabbg\n.......................kcbbg\n........................kabg\n.........................kag\n.........................kcg\n..........................kg`,\n  { k: 0x14141e, c: 0x464a60, a: 0x787e96, b: 0xb4bacc, r: 0xdc323c, y: 0xffd646, g: 0x2c2c38, e: -1 },\n  true,\n);\nconst PALM = \"t.t.t .ttt. ttktt .ttt. t.t.t\".split(\" \");\n// 3x5 digits, a P, and a ship for the lives; one octal digit per row.\nconst GLYPH = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717, 0o75744, 0o22775];\nconst BUL = [\n  [255, 70, 170],\n  [70, 220, 255],\n  [255, 170, 40],\n];\n\n// The map repeats every 1024 rows: sea, coast, fields, town, river, coast. -1 is sea, 1 land.\nfunction profile(x, wy) {\n  const v = (wy % 1024) + 0.3 * (x - 32);\n  return v \u003c 250 || v > 830 ? -1 : v \u003c 290 ? (v - 270) / 20 : v \u003c 790 ? 1 : (810 - v) / 20;\n}\nconst ISL = {};\nfunction islands(sd, x, wy) {\n  let best = 0;\n  for (let j = floor(wy / 44) - 1, j1 = j + 2; j \u003c= j1; j++)\n    for (let i = floor(x / 32) - 1, i1 = i + 2; i \u003c= i1; i++) {\n      const ix = i * 32 + 4 + hash(i, j, sd + 2) * 24, iy = j * 44 + 6 + hash(i, j, sd + 3) * 32, r = 12 + hash(i, j, sd + 4) * 10;\n      const b = 1.9 * (1 - hypot(x - ix, wy - iy) / r);\n      if (b > best && hash(i, j, sd + 1) \u003c 0.7) ((best = b), (ISL.x = ix), (ISL.y = iy), (ISL.r = r));\n    }\n  return best;\n}\nfunction terrain(sd, x, wy) {\n  const pr = profile(x, wy);\n  let e = pr + 0.5 * (noise(x / 11, wy / 11, sd) - 0.5) + 0.24 * (noise(x / 4.5, wy / 4.5, sd + 9) - 0.5);\n  if (pr \u003c 0) e += islands(sd, x, wy) * min(1, -pr);\n  if (e \u003c -0.08) {\n    if (e > -0.12) return CAP;\n    if (e > -0.21) return SHAL;\n    const cx = x >> 3, cy = floor(wy / 5), h = hash(cx, cy, sd + 21), c0 = cx * 8 + floor(hash(cx, cy, sd + 22) * 6);\n    if (h \u003c 0.4 && wy === cy * 5 + floor(hash(cx, cy, sd + 23) * 4) && x >= c0 && x \u003c c0 + (h \u003c 0.15 ? 3 : 2)) return CAP;\n    return e > -0.36 || noise(x / 6, wy / 2, sd + 5) > 0.78 ? WAVE : DEEP;\n  }\n  if (e \u003c 0.08) return SAND;\n  if (pr \u003c -0.5) {\n    const dx = round(x - ISL.x), dy = round(wy - ISL.y), c = ISL.r > 13 && abs(dx) \u003c= 2 && abs(dy) \u003c= 2 ? PALM[dy + 2][dx + 2] : \".\";\n    return c === \".\" ? GRASS : c === \"k\" ? TRUNK : TREE;\n  }\n  const u = wy % 1024, dr = abs(x - 30 - 9 * sin(wy / 70));\n  if (u > 560 && u \u003c 770) {\n    const a = (u - 560) / 34, dv = abs(x - 32 - 23 * sin(a)) / sqrt(1 + (0.68 * cos(a)) ** 2);\n    if (dv \u003c 4.4) return dr \u003c 2.6 ? (dr > 1.6 ? WALL : ROAD) : dv \u003c 3.3 ? RIVER : SAND;\n  }\n  if (dr \u003c 1.6) return dr \u003c 0.6 && wy % 6 \u003c 3 ? LIGHT : ROAD;\n  if (u > 420 && u \u003c 510 && dr \u003c 22 + 6 * sin(wy / 9)) {\n    // The town: in each plot a house (roof, front wall, shadow) or a tree.\n    const lx = (x + 4) % 9, ly = wy % 9;\n    if (lx === 0 || ly === 0) return ROAD;\n    if (hash(floor((x + 4) / 9), floor(wy / 9), sd + 41) > 0.6) return hypot(lx - 4.5, ly - 4.5) \u003c 2.7 ? TREE : GRASS;\n    if (lx >= 2 && lx \u003c= 6 && ly >= 2) return ly === 2 ? WALL : ly > 7 ? GRASS : lx === 4 ? TRUNK : ROOF;\n    return (lx === 7 && ly >= 2 && ly \u003c= 6) || (ly === 1 && lx >= 3) ? HEDGE : GRASS;\n  }\n  const band = floor(wy / 14), gx = x + floor(hash(band, 0, sd + 51) * 16), h = hash(floor(gx / 16), band, sd + 52);\n  if (gx % 16 === 0 || wy % 14 === 0) return h \u003c 0.6 ? HEDGE : GRASS;\n  const kind = floor(h * 4);\n  if (kind \u003c 3) return (kind ? (kind > 1 ? hash(gx, wy, sd + 53) \u003c 0.12 : gx % 3 === 0) : wy % 3 === 0) ? FLDB : FLDA;\n  const tx = floor(gx / 5), ty = floor(wy / 5);\n  return hypot(gx - tx * 5 - 1 - hash(tx, ty, sd + 55) * 3, wy - ty * 5 - 1 - hash(tx, ty, sd + 56) * 3) \u003c 1.9 ? TREE : GRASS;\n}\n// A cloud: puffs on a flat base, 2 its body and 1 its underside.\nfunction newCloud(S, cw) {\n  const w = floor(rnd(22, 40)), h = floor(rnd(10, 16)), n = 3 + floor(w / 9), P = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = h * 0.5 * (0.5 + 0.5 * sin((PI * (i + 0.5)) / n)) + rnd(-0.6, 0.8);\n    P.push((w * (i + 0.5)) / n + rnd(-1.5, 1.5), h - 1.5 - r * 0.55, r);\n  }\n  const inn = (x, y) => x >= 0 && y >= 0 && x \u003c w && y \u003c= h - 1.5 && P.some((_, i) => i % 3 === 0 && hypot(x + 0.5 - P[i], y + 0.5 - P[i + 1]) \u003c P[i + 2]);\n  const m = new Uint8Array(w * h);\n  for (let y = 0; y \u003c h; y++) for (let x = 0; x \u003c w; x++) if (inn(x, y)) m[y * w + x] = inn(x, y + 2) ? 2 : 1;\n  S.clouds.push({ x: floor(rnd(-14, 56 - w / 2)), cw: cw + h, w, h, m });\n}\nfunction fill(S) {\n  for (const top = floor(S.scroll) + H + 24; S.gen \u003c top; S.gen++) for (let x = 0; x \u003c W; x++) S.ter[(S.gen & 255) * W + x] = terrain(S.sd, x, S.gen);\n  const cb = floor(S.scroll * CLOUD);\n  for (; S.cnext \u003c cb + H + 20; S.cnext += floor(rnd(24, 52))) newCloud(S, S.cnext);\n  S.clouds = S.clouds.filter((c) => cb + H - 1 - c.cw \u003c H);\n}\n\nexport function setup(params) {\n  const S = { t: 0, scroll: 85, gen: 83, cnext: 147, sd: floor(Math.random() * 9000), ter: new Uint8Array(256 * W), cb: new Uint8Array(N), buf: new Float32Array(N * 3), sh: new Float32Array(N) };\n  Object.assign(S, { clouds: [], en: [], boats: [], eb: [], ps: [], fx: [], pop: [], caps: [], bossAt: 3.2, bossN: 0, waveAt: 0.4, waveN: 0, boatAt: 0.2, kills: 0, score: 0, flash: 0 });\n  S.pl = { x: 32, y: 112, lvl: 0, lvlT: 0, ft: 0 };\n  fill(S);\n  params.s = S;\n}\n\nfunction shoot(S, x, y, a, v, c, big) {\n  if (S.eb.length \u003c 380) S.eb.push({ x, y, vx: cos(a) * v, vy: sin(a) * v, c, big });\n}\nfunction fan(S, x, y, m, gap, v) {\n  const g = atan2(S.pl.y - y, S.pl.x - x);\n  for (let i = 0; i \u003c m; i++) shoot(S, x, y, g + (i - (m - 1) / 2) * gap, v, 2, 0);\n}\nfunction boom(S, x, y, s) {\n  const sp = [];\n  for (let i = 0; i \u003c 4 + s * 3; i++) {\n    const a = rnd(0, 6.283);\n    sp.push(cos(a) * rnd(20, 50) * s, sin(a) * rnd(20, 50) * s);\n  }\n  S.fx.push({ x, y, t0: S.t, s, sp, d: 0.45 + 0.12 * s });\n}\nfunction score(S, x, y, v) {\n  S.pop.push({ x, y, v, t0: S.t });\n  S.score += v;\n}\n// A hit; a kill leaves an explosion, its score, and every ninth a capsule.\nfunction hurt(S, e, n, x, y) {\n  e.fl = 0.06;\n  if ((e.hp -= n) > 0) return;\n  boom(S, x, y, e.boat ? 1.3 : 1);\n  score(S, x, y - 4, e.boat ? 300 : e.k ? 150 : 100);\n  if (++S.kills % 9 === 0) S.caps.push({ x, y });\n}\nconst boatY = (S, b) => floor(S.scroll) + H - 1 - round(b.wy);\nconst yOf = (S, e) => (e.boat ? boatY(S, e) : e.y);\n\nfunction spawn(S) {\n  const w = S.waves;\n  if (S.t >= S.waveAt) {\n    const n = S.waveN++, m = 4 + round(w);\n    if (n % 2 === 0) {\n      const o = { k: 0, side: n % 4 ? -1 : 1, y0: rnd(8, 30) };\n      for (let i = 0; i \u003c m; i++) S.en.push({ ...o, born: S.t + i * 0.3, x: -99, y: -99, hp: 6 });\n    } else {\n      const cx = rnd(24, 40);\n      for (let i = 0; i \u003c (m | 1); i++) {\n        const r = (i + 1) >> 1;\n        S.en.push({ k: 1, born: S.t, x: cx + (i & 1 ? r : -r) * 6, y: -8 - r * 6, hy: 34 - r * 6, st: 0, hp: 7, hold: 0.5 + r * 0.25 + rnd(0, 0.2) });\n      }\n    }\n    S.waveAt = S.t + (n === 0 ? 0.45 : S.boss ? 2 : 1) * (3.3 / w ** 0.75);\n  }\n  if (S.t \u003c S.boatAt) return;\n  // A gunboat, where its hull fits on open water.\n  const wy = floor(S.scroll) + H + 8;\n  S.boatAt = S.t + 0.3;\n  for (let n = 0; n \u003c 6; n++) {\n    const x = floor(rnd(6, 58));\n    let ok = true;\n    for (let j = -7; j \u003c= 7; j += 2) for (let i = -4; i \u003c= 4; i += 2) ok &&= S.ter[((wy + j) & 255) * W + x + i] \u003c= CAP;\n    if (ok) return S.boats.push({ boat: 1, x, wy, hp: 10, ft: rnd(0.6, 1.6) }), (S.boatAt += rnd(1.1, 2.7) / w ** 0.7);\n  }\n}\n\nfunction stepEnemies(S, d) {\n  const f = S.fury;\n  for (const e of S.en) {\n    const a = S.t - e.born;\n    e.fl -= d;\n    if (a \u003c 0) continue;\n    if (e.k === 0) {\n      e.x = e.side > 0 ? -6 + 38 * a : 70 - 38 * a;\n      e.y = e.y0 + 14 * a + 13 * sin(3.2 * a);\n    } else if (e.st === 0) {\n      if ((e.y += 50 * d) >= e.hy) ((e.st = 1), (e.t1 = S.t));\n    } else if (e.st === 1) {\n      if (S.t - e.t1 > e.hold) {\n        const g = atan2(S.pl.y - e.y, S.pl.x - e.x);\n        ((e.st = 2), (e.vx = cos(g) * 30), (e.vy = sin(g) * 30));\n        if (Math.random() \u003c 0.35 + 0.65 * f) fan(S, e.x, e.y + 3, 1 + 2 * round(f * 1.5), 0.25, 42);\n      }\n    } else {\n      const k = min(130, hypot(e.vx, e.vy) + 110 * d) / hypot(e.vx, e.vy);\n      e.x += (e.vx *= k) * d;\n      e.y += (e.vy *= k) * d;\n    }\n  }\n  S.en = S.en.filter((e) => e.hp > 0 && e.y \u003c 140 && e.x > -20 && e.x \u003c 84);\n  for (const b of S.boats) {\n    const sy = boatY(S, b);\n    b.fl -= d;\n    b.a = atan2(S.pl.y - sy + 3, S.pl.x - b.x);\n    if ((b.ft -= d) \u003c= 0 && sy > 2 && sy \u003c 96) {\n      b.ft = 2.2 - 1.3 * f;\n      for (let i = f > 0.5 ? -1 : 0; i \u003c= (f > 0.5 ? 1 : 0); i++) shoot(S, b.x + cos(b.a) * 4, sy - 3 + sin(b.a) * 4, b.a + i * 0.25, 38, 2, 0);\n    }\n  }\n  S.boats = S.boats.filter((b) => b.hp > 0 && boatY(S, b) \u003c 140);\n}\n\nfunction stepBoss(S, d) {\n  const f = S.fury;\n  // The first boss is short, so its fight fits the first seconds.\n  if (!S.boss && S.t >= S.bossAt) S.boss = { x: 32, y: -34, t0: S.t, st: 0, hp: S.bossN ? 320 + 40 * S.bossN : 60, ph: S.bossN ? 2.8 : 1.6, ang: 0 };\n  const B = S.boss;\n  if (!B) return;\n  B.fl -= d;\n  if (B.st === 2) {\n    if (!(S.t \u003c B.nd)) {\n      boom(S, B.x + rnd(-22, 22), B.y + rnd(4, 24), rnd(0.7, 1.4));\n      B.nd = S.t + 0.07;\n    }\n    if (S.t - B.t2 > 1.7) {\n      boom(S, B.x, B.y + 12, 3.2);\n      for (let i = 0; i \u003c 6; i++) boom(S, B.x + rnd(-24, 24), B.y + rnd(4, 26), rnd(1, 1.8));\n      score(S, B.x - 6, B.y + 14, 5000);\n      S.caps.push({ x: B.x, y: B.y + 20 });\n      Object.assign(S, { flash: 0.75, boss: null, bossAt: S.t + rnd(18, 30), bossN: S.bossN + 1 });\n    }\n  } else if (B.st === 0) {\n    const u = min(1, (S.t - B.t0) / 1.4);\n    B.y = -34 + 40 * (1 - (1 - u) * (1 - u));\n    if (u >= 1) ((B.st = 1), (B.t1 = S.t));\n  } else {\n    // In turns: a ring, a spiral, aimed fans from the wing guns.\n    B.x = 32 + 3 * sin((S.t - B.t1) * 0.8);\n    const ph = floor((S.t - B.t1) / B.ph) % 3;\n    if (ph === 0 && !(S.t \u003c B.nr)) {\n      const n = floor(12 + 18 * f), a0 = rnd(0, 6.283);\n      B.nr = S.t + 1.5 - 0.8 * f;\n      for (let i = 0; i \u003c n; i++) shoot(S, B.x, B.y + 11, a0 + (i * 2 * PI) / n, 28, 0, 1);\n    }\n    if (ph === 1 && !(S.t \u003c B.nx)) {\n      const arms = f > 0.5 ? 3 : 2;\n      B.nx = S.t + 1 / (7 + 23 * f);\n      B.ang += 0.37;\n      for (let i = 0; i \u003c arms; i++) shoot(S, B.x, B.y + 11, B.ang + (i * 2 * PI) / arms, 32, 1, 0);\n    }\n    if (ph === 2 && !(S.t \u003c B.nf)) {\n      B.nf = S.t + 1.05 - 0.55 * f;\n      for (const s of [-1, 1]) fan(S, B.x + s * 19.5, B.y + 10, 3 + round(6 * f), 0.12 + 0.1 * f, 42);\n    }\n  }\n}\n\nfunction stepPlayer(S, d) {\n  const P = S.pl, B = S.boss;\n  if ((P.lvlT -= d) \u003c= 0 && P.lvl > 0) ((P.lvl -= 1), (P.lvlT = 14));\n  // Its aim: the boss, a capsule, or half way from its weave to the nearest enemy.\n  const wv = 32 + 18 * sin(S.t * 0.53);\n  let ax = wv, ny = -99;\n  if (B && B.st > 0) ax = B.x + 10 * sin(S.t * 1.1);\n  else if (S.caps.length) ax = S.caps[0].x;\n  else for (const e of [...S.en, ...S.boats]) if (yOf(S, e) > max(0, ny) && yOf(S, e) \u003c P.y - 14) ((ny = yOf(S, e)), (ax = 0.55 * e.x + 0.45 * wv));\n  // Then the nearby spot the bullets will miss on its way there.\n  let best = 1e9, bx = P.x, by = P.y;\n  for (const ox of [-14, -9, -5, -2, 0, 2, 5, 9, 14])\n    for (const oy of [-8, -3, 0, 4]) {\n      const cx = clamp(P.x + ox, 5, 58), cy = clamp(P.y + oy, 96, 116), dist = max(0.01, hypot(cx - P.x, cy - P.y));\n      let c = 0.05 * abs(cx - ax) + 0.04 * abs(cy - 111) + 0.015 * dist;\n      for (const b of S.eb)\n        for (const tau of abs(b.y - cy) \u003c 45 ? [0.05, 0.12, 0.2, 0.3, 0.42] : []) {\n          const k = min(1, (60 * tau) / dist), dx = b.x + b.vx * tau - P.x - (cx - P.x) * k, dy = b.y + b.vy * tau - P.y - (cy - P.y) * k;\n          c += max(0, 30 - dx * dx - 0.7 * dy * dy) / (tau \u003c 0.15 ? 6 : 15);\n        }\n      if (c \u003c best) ((best = c), (bx = cx), (by = cy));\n    }\n  P.x += clamp(bx - P.x, -60 * d, 60 * d);\n  P.y += clamp(by - P.y, -60 * d, 60 * d);\n  // Two streams, three after a capsule, five after two.\n  for (P.ft -= d; P.ft \u003c= 0; P.ft += 0.1)\n    for (const [x, vx] of [[-2, 0], [2, 0], [0, 0], [-3, -38], [3, 38]].slice(0, [2, 3, 5][P.lvl])) S.ps.push({ x: P.x + x, y: P.y - 5, vx, vy: -170 });\n}\n\nfunction stepShots(S, d) {\n  const B = S.boss, P = S.pl;\n  for (const s of S.ps) {\n    s.x += s.vx * d;\n    s.y += s.vy * d;\n    if (s.y \u003c -4) s.dead = 1;\n    for (const e of [...S.en, ...S.boats]) if (!s.dead && e.hp > 0 && abs(s.x - e.x) \u003c= 4 && abs(s.y - yOf(S, e)) \u003c= (e.boat ? 6 : 4)) ((s.dead = 1), hurt(S, e, 1, e.x, yOf(S, e)));\n    const ix = round(s.x - B?.x + 28), iy = round(s.y - B?.y);\n    if (!s.dead && B?.st === 1 && ix >= 0 && ix \u003c 56 && iy >= 0 && iy \u003c 30 && BOSS.mask[iy * 56 + ix]) ((s.dead = 1), (B.fl = 0.05), (S.score += 10), --B.hp);\n  }\n  // A bullet that reaches the fighter bursts on its shield.\n  for (const b of S.eb) {\n    b.x += b.vx * d;\n    b.y += b.vy * d;\n    if (b.x \u003c -3 || b.x > 66 || b.y \u003c -3 || b.y > 130) b.dead = 1;\n    else if (abs(b.x - P.x) \u003c 1.6 && abs(b.y - P.y) \u003c 2.5) ((b.dead = 1), boom(S, b.x, b.y, 0.4));\n  }\n  if (B?.st === 1 && B.hp \u003c= 0) ((B.st = 2), (B.t2 = S.t), (S.eb.length = 0));\n  for (const c of S.caps) {\n    c.y += 14 * d;\n    if (abs(c.x - P.x) \u003c 6 && abs(c.y - P.y) \u003c 7) ((c.dead = 1), (P.lvl = min(2, P.lvl + 1)), (P.lvlT = 16));\n  }\n  for (const k of [\"ps\", \"eb\", \"caps\"]) S[k] = S[k].filter((o) => !o.dead && o.y \u003c 134);\n  S.fx = S.fx.filter((f) => S.t - f.t0 \u003c f.d);\n  S.pop = S.pop.filter((p) => S.t - p.t0 \u003c 0.9);\n}\n\nfunction step(S, d) {\n  S.t += d;\n  S.scroll += V0 * d;\n  S.flash = max(0, S.flash - 2.6 * d);\n  fill(S);\n  spawn(S);\n  stepEnemies(S, d);\n  stepBoss(S, d);\n  stepPlayer(S, d);\n  stepShots(S, d);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.stage, S.waves, S.fury] = [clamp(k[0], 0, 1), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  // The first second plays before the first frame.\n  if (!S.started) {\n    S.started = 1;\n    for (let i = 0; i \u003c 30; i++) step(S, 1 / 30);\n  }\n  // The bomb clears the bullets and hurts everything on the screen.\n  if (input.btnPressed?.[0]) {\n    Object.assign(S, { flash: 0.9, bomb: S.t, eb: [] });\n    for (const e of [...S.en, ...S.boats]) if (e.hp > 0 && yOf(S, e) > 0) hurt(S, e, 4, e.x, yOf(S, e));\n    if (S.boss?.st === 1) S.boss.hp -= 15;\n  }\n  for (let d = (clamp(dt || 0, 0, 0.1) * clamp(k[1], 0.2, 3)) / 2; d > 0; d -= 1 / 30) step(S, min(d, 1 / 30));\n}\n\nfunction put(buf, x, y, r, g, b) {\n  const q = (round(y) * W + round(x)) * 3;\n  if (x > -0.5 && y > -0.5 && x \u003c W - 0.5 && y \u003c H - 0.5) ((buf[q] = r), (buf[q + 1] = g), (buf[q + 2] = b));\n}\nfunction mix(buf, q, r, g, b, a) {\n  buf[q] += (r - buf[q]) * a;\n  buf[q + 1] += (g - buf[q + 1]) * a;\n  buf[q + 2] += (b - buf[q + 2]) * a;\n}\n// Mode 1 draws a sprite white, 2 stamps its shadow.\nfunction spr(S, sp, x0, y0, mode, glow) {\n  const p = sp.px;\n  for (let i = 0; i \u003c p.length; i += 3) {\n    const x = x0 + p[i], y = y0 + p[i + 1], c = mode ? 0xffffff : p[i + 2];\n    if (mode === 2) {\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) S.sh[y * W + x] = min(S.sh[y * W + x], 0.55);\n    } else if (c \u003c 0) put(S.buf, x, y, ...glow);\n    else put(S.buf, x, y, c >> 16, (c >> 8) & 255, c & 255);\n  }\n}\nfunction number(buf, v, x0, y0, r, g, b) {\n  const s = String(v);\n  for (let n = 0; n \u003c s.length; n++)\n    for (let j = 0; j \u003c 15; j++) if ((GLYPH[\"0123456789PA\".indexOf(s[n])] >> (14 - j)) & 1) put(buf, x0 + n * 4 + (j % 3), y0 + floor(j / 3), r, g, b);\n}\n// A ring of width w, or a disc for w 0.\nfunction ring(buf, cx, cy, R, w, c) {\n  for (let y = floor(cy - R - w); y \u003c= cy + R + w; y++)\n    for (let x = floor(cx - R - w); x \u003c= cx + R + w; x++) if (w ? abs(hypot(x - cx, y - cy) - R) \u003c w : hypot(x - cx, y - cy) \u003c= R) put(buf, x, y, ...c);\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { buf, sh, cb, pl: P, boss: B, t } = S,\n    si = min(3, floor(S.stage * 4)), pal = PALS[si];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, wy = floor(S.scroll) + H - 1 - y; x \u003c W; x++) {\n      let k = S.ter[(wy & 255) * W + x];\n      if (k === CAP && (t * 1.6 + hash(x, wy, 3) * 4) % 2 > 1.55) k = WAVE;\n      put(buf, x, y, pal[k * 3], pal[k * 3 + 1], pal[k * 3 + 2]);\n      if (si === 2 && k === FLDA && (x + wy) % 2 === 0 && hash(x, wy, 5) \u003c 0.4) put(buf, x, y, 255, 214, 110);\n      const h = si === 3 && k === DEEP ? hash(x, wy, 6) : 1;\n      if (h \u003c 0.035) put(buf, x, y, ...Array(3).fill(90 + 4600 * h * (0.7 + 0.3 * sin(t * 4 + x * y))));\n    }\n  for (const b of S.boats) {\n    const y = boatY(S, b);\n    spr(S, BOAT, b.x - 3, y - 6, b.fl > 0 ? 1 : 0);\n    for (let i = 1; i \u003c= 3; i++) put(buf, b.x + cos(b.a) * i, y - 3 + sin(b.a) * i, 30, 30, 40);\n  }\n  // Shadows, then the clouds. Thick fire dims the ground as bullet-hell games do.\n  const C = CLOUDS[si];\n  cb.fill(0);\n  for (const c of S.clouds)\n    for (let j = 0, sy = floor(S.scroll * CLOUD) + H - 1 - c.cw; j \u003c c.h; j++)\n      for (let i = 0, x = c.x, y = sy + j; i \u003c c.w; i++, x++) if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && c.m[j * c.w + i]) cb[y * W + x] = c.m[j * c.w + i];\n  for (let i = 0; i \u003c N; i++) sh[i] = (i % W >= 6 && i >= 9 * W && cb[i - 9 * W - 6] ? C[5] : 1) * (1 - 0.36 * S.fury);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) + 2, round(e.y) + 6, 2);\n  if (B) spr(S, BOSS, round(B.x) - 22, round(B.y) + 9, 2);\n  spr(S, PLAYER, round(P.x) + 1, round(P.y) + 3, 2);\n  for (let i = 0; i \u003c N; i++) {\n    const l = cb[i], k = l === 1 ? C[3] : 1;\n    mix(buf, i * 3, 0, 0, 0, 1 - sh[i]);\n    if (l) mix(buf, i * 3, C[0] * k, C[1] * k, C[2] * k, C[4]);\n  }\n  for (const c of S.caps) ring(buf, c.x, c.y, 2.9, 0, floor(t * 7) % 2 ? [230, 40, 50] : [40, 90, 240]), number(buf, \"P\", c.x - 1, c.y - 2, 255, 255, 255);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) - 3, round(e.y) - 3, e.fl > 0 ? 1 : 0);\n  // The boss's core pulses cyan, or red as the fury rises.\n  const f = S.fury, p = 0.5 + 0.5 * sin(t * 9);\n  if (B) spr(S, BOSS, round(B.x) - 28, round(B.y), (B.st === 2 ? floor(t * 16) % 2 : B.fl > 0 && floor(t * 20) % 4 === 0) ? 1 : 0, [120 + 135 * f + 60 * p, 230 - 170 * f + 25 * p * (1 - f), 255 - 215 * f]);\n  for (const ex of [3, 5])\n    for (let j = 0, L = 2 + ((t * 24 + ex) % 3 | 0), c; j \u003c L; j++) put(buf, round(P.x) - 4 + ex, round(P.y) + 5 + j, 255 - 12 * (c = min(3, j + (L \u003c 3))) * c, 255 - 65 * c, 220 - 70 * c);\n  spr(S, PLAYER, round(P.x) - 4, round(P.y) - 5, 0);\n  for (const s of S.ps) for (let j = 0; j \u003c 3; j++) put(buf, s.x, s.y + j, 255, 255 - 28 * j, 230 - 85 * j);\n  // Explosions: a white flash, a ring cooling from yellow to red, sparks.\n  for (const f of S.fx) {\n    const a = (t - f.t0) / f.d, R = (1.5 + 4.5 * a) * f.s;\n    if (a \u003c 0.16) ring(buf, f.x, f.y, (1 + 10 * a) * f.s, 0, [255, 255, 235]);\n    else if (a \u003c 0.5) ring(buf, f.x, f.y, R * 0.5, 0, [255, a \u003c 0.3 ? 210 : 120, 40]);\n    if (a >= 0.16) ring(buf, f.x, f.y, R, 0.75, a \u003c 0.45 ? [255, 220, 80] : a \u003c 0.72 ? [255, 130, 30] : [180, 46, 24]);\n    for (let i = 0; a \u003c 0.85 && i \u003c f.sp.length; i += 2) put(buf, f.x + f.sp[i] * a * f.d, f.y + f.sp[i + 1] * a * f.d, 255, 245, 170);\n  }\n  for (const b of S.eb) {\n    const c = BUL[b.c];\n    for (let i = 0; i \u003c 9; i++) if (i % 2 || (b.big && i !== 4)) put(buf, b.x + (i % 3) - 1, b.y + floor(i / 3) - 1, ...c.map((v) => (i % 2 ? v : v * 0.6)));\n    put(buf, b.x, b.y, 255, 255, 255);\n  }\n  for (const p of S.pop) {\n    const a = (t - p.t0) / 0.9;\n    if (a \u003c 0.75 || floor(t * 20) % 2) number(buf, p.v, round(p.x - String(p.v).length * 2), round(p.y - a * 9), 255, 240, 120);\n  }\n  if (t - S.bomb \u003c 1) ring(buf, P.x, P.y, (t - S.bomb) * 150, 1.6, [200, 250, 255]);\n  for (let i = 0; S.flash > 0 && i \u003c N * 3; i++) buf[i] += (255 - buf[i]) * min(1, S.flash) * 0.85;\n  for (let i = 0; i \u003c 7 * W; i++) if (i % W \u003c 26 || i % W >= 50) mix(buf, i * 3, 0, 0, 0, 0.82);\n  number(buf, String(S.score % 1e6).padStart(6, \"0\"), 1, 1, 255, 255, 255);\n  number(buf, \"AAA\", 52, 1, 220, 228, 240);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stage","min":0,"max":1,"about":"Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in."},{"name":"Waves","min":1,"max":5,"about":"From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats."},{"name":"Bullets","min":0,"max":1,"about":"How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read."}],"start":[0,2,1,0.06],"measures":{"motion":1.2251,"detail":0.0672,"edges":0.7429,"complexity":0.308,"coverage":0.995,"colour":0.3654,"drift":0.1128},"knobResponse":[0.2583,0.2156,0.0612,0.0985]},{"slug":"shoreline","title":"Shoreline","family":"ocean","round":17,"note":"드론으로 곧장 내려다본 해변이에요. 비스듬히 밀려온 너울이 모래톱 위에서 하얗게 부서지고 골에서 다시 일어나 기슭에서 한 번 더 부서진 뒤, 레이스 같은 거품 끝을 단 채 모래를 타고 올라갔다 물러나며 젖은 모래의 어두운 윤기를 남겨요.","idea":"A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","layer":{"id":"layer-shoreline","type":"code","name":"shoreline","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds."},{"name":"Height","min":1,"max":3,"about":"Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white."},{"name":"Tide","min":-1,"max":1,"about":"At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore."}],"start":[0,2,1,0.06],"measures":{"motion":0.1312,"detail":0.0226,"edges":0.2179,"complexity":0.5021,"coverage":1,"colour":0.3833,"drift":0.0432},"knobResponse":[0.2028,0.0707,0.0565,0.1108]},{"slug":"skein","title":"Skein","family":"bird","round":23,"note":"해 진 뒤 하늘을 올려다보면 기러기 떼가 V 자로 패널 위쪽, 북쪽으로 날아가요. 지친 선두가 한쪽 줄로 물러나면 다른 기러기가 앞에 서고, 커다란 보름달 앞을 지날 때는 새카만 실루엣이 돼요. 뒤따라온 작은 떼가 꼬리에 붙기도 해요.","idea":"Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.","buttons":"K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.","code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","layer":{"id":"layer-skein","type":"code","name":"skein","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower."},{"name":"Geese","min":7,"max":31,"about":"How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller."},{"name":"Wind","min":-1,"max":1,"about":"A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too."}],"start":[0,2,7,0.06],"measures":{"motion":0.2572,"detail":0.0301,"edges":0.4436,"complexity":1.9214,"coverage":0.9745,"colour":0.3836,"drift":0.0616},"knobResponse":[0.2529,0.0352,0.0331,0.0516]},{"slug":"skydiver","title":"Skydiver","family":"flight","round":25,"note":"강하장 위로 점프기가 지나가며 문에서 다이버들을 내보내요. 다이버들은 구름층을 뚫고 내려가 손을 잡아 고리를 만들었다가 흩어지고, 저마다 색 램에어 캐노피를 펴서 나선을 그리며 들판의 착지 원으로 내려와요. K1 을 끝까지 돌리면 해가 지평선에 걸린 노을 점프가 되고, K1 을 누르면 다음 비행기가 바로 들어와요.","idea":"A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.","buttons":"K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.","code":"// ===== Patternflow pattern =====\n// Title:   Skydiver\n// Family:  flight\n// Idea:    A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after formation skydiving loads at a drop zone\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1\n//\n// Knob 1: Hour. A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light.\n// Knob 2: Speed. At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower.\n// Knob 3: Divers. How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down.\n// Knob 4: Wind. The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you.\n// Buttons: K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the plane's fuselage, the flat base of the cloud deck, the horizon, the landing field.\nconst [PY, DB, HZ, GL] = [8, 30, 101, 118];\n// Depth goes onto the screen at this scale, nearer is lower; canopies are seen flatter.\nconst [ZS, ZC] = [0.55, 0.3];\n// Terminal velocity and the plane's speed in LEDs a second, the target, the windsock, seconds between loads.\nconst [VT, PV, TX, WX, CYCLE] = [8.5, 14, 34, 57, 15];\n// Sky top, middle, horizon; sun; lit and shaded cloud; daylight. Midday to sunset.\nconst KEYS = [\n  [8, 28, 104, 18, 62, 148, 112, 158, 204, 255, 250, 225, 252, 252, 255, 150, 162, 190, 1, 1, 1],\n  [12, 34, 112, 56, 96, 172, 196, 190, 184, 255, 226, 160, 255, 238, 210, 146, 140, 170, 1, 0.92, 0.8],\n  [20, 24, 90, 104, 84, 146, 255, 160, 84, 255, 186, 100, 255, 194, 136, 126, 96, 136, 1, 0.78, 0.58],\n  [12, 12, 50, 96, 46, 104, 255, 104, 44, 255, 136, 56, 255, 136, 96, 82, 54, 92, 0.86, 0.56, 0.42],\n];\nconst CAN = [[255, 30, 60], [255, 214, 0], [20, 110, 255], [255, 50, 190], [80, 235, 40], [255, 120, 0], [0, 220, 235], [150, 60, 255], [245, 245, 245], [255, 80, 80], [20, 190, 110], [255, 160, 200]];\nconst SUIT = [[255, 220, 40], [240, 40, 40], [40, 200, 255], [250, 250, 250], [255, 110, 0], [190, 70, 255], [60, 230, 90], [255, 80, 180]];\nconst HELM = [[250, 250, 250], [30, 30, 36], [255, 200, 0], [230, 40, 40]];\nconst STRIPE = [[200, 30, 40], [20, 70, 170], [230, 150, 0]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = { t: 0, rt: 0, loads: [], next: 0, cx: 0, w: 0, f: F32(N * 3), bg: F32(N * 3), key: -1, top: F32(128), far: F32(128) });\n  // Cumulus along a strip that wraps every 128 columns, each a cluster of round puffs: the deck and the far ones.\n  for (const [T, nc, sz] of [[P.top, 4, 1], [P.far, 6, 0.5]])\n    for (let k = 0; k \u003c nc; k++) {\n      const c = (k * 128) / nc + rnd() * 8, wd = (14 + rnd() * 14) * sz, hm = (5 + rnd() * 7) * sz;\n      for (let j = 0; j \u003c 11; j++) {\n        // Bubbles stacked higher towards the middle of the cloud.\n        const u = rnd() * 2 - 1, r = (2 + rnd() * 3.2) * (sz + 0.3) * 0.75, px = c + u * (wd / 2 - r * 0.5), e = max(0, (hm - r) * (1 - u * u) * (0.5 + 0.5 * rnd()));\n        for (let x = 0; x \u003c 128; x++) {\n          const dx = ((((x - px) % 128) + 192) % 128) - 64;\n          // A round top, and shoulders sloping down to the base.\n          const ax = abs(dx);\n          if (ax \u003c r + e) T[x] = max(T[x], ax \u003c r ? e + Math.sqrt(r * r - dx * dx) : e + r - ax);\n        }\n      }\n    }\n}\n\nconst shuffle = (n) => {\n  const a = [...Array(n).keys()];\n  for (let i = n - 1; i > 0; i--) {\n    const j = floor(rnd() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n};\n\n// A load: the plane runs in against the wind and puts the ring upwind of the target.\nfunction spawn(P, n, btn) {\n  // A big load gets out of the door faster, so every ring has the same time to build.\n  const w = P.w, dir = w >= 0 ? -1 : 1, len = 17 + n, ex = (0.5 + 0.06 * n) / (n - 1), half = ((n - 1) * ex) / 2, x0 = dir \u003c 0 ? 66 : -2;\n  const te0 = btn ? 1.3 : max(1.3, (dir * (31 - 12 * w - x0) + len - 12) / PV - half);\n  const cx = x0 + dir * PV * (te0 + half) - dir * (len - 12), ci = shuffle(CAN.length), si = shuffle(SUIT.length), rk = shuffle(n), lp = shuffle(n);\n  const d = [];\n  for (let i = 0; i \u003c n; i++) {\n    // Exit time, canopy colours (white or a second colour in the middle cells), suit, helmet,\n    // descent rate under canopy, which way the spiral turns, and the spot on the field.\n    d.push({\n      i, te: te0 + i * ex, st: 0, x: 0, y: 0, z: 0, h: 0, g: 0, o: 0, rank: rk[i], can: ci[i], cb: rnd() \u003c 0.5 ? 8 : ci[(i + 5) % 12], suit: si[i % 8], helm: floor(rnd() * 4),\n      zd: rnd() * 2 - 1, k: 2.2 + rnd() * 1.2, om: (rnd() \u003c 0.5 ? -1 : 1) * (0.8 + rnd() * 0.4), lx: TX + (lp[i] / (n - 1) - 0.5) * 26 + rnd() * 2, lz: rnd() * 12 - 4,\n    });\n  }\n  P.loads.push({ t: 0, n, dir, len, x0, te0, cx, px: x0, rot0: rnd() * TAU, rr: 4.6 / sin(PI / n), tb: te0 + 2 * half + 4.2, d, sc: STRIPE[floor(rnd() * 3)] });\n  if (P.loads.length > 4) P.loads.shift();\n}\n\nconst fall = (s) => (s \u003c= 0 ? 0 : VT * (s - (1 - exp(-1.5 * s)) / 1.5));\nconst thr = (s) => (s \u003c= 0 ? 0 : (PV * (1 - exp(-1.4 * s))) / 1.4);\n\nfunction runLoad(P, L, d) {\n  const T = (L.t += d), w = P.w, dir = L.dir, n = L.n;\n  L.px = L.x0 + dir * PV * T;\n  const s0 = T - L.te0, ccx = L.cx + w * 2 * max(0, s0), ccy = PY + 3 + fall(s0 - 0.15), rot = L.rot0 + 0.25 * s0;\n  const hf = atan2(1 - 0.9 * abs(w), -w), cf = cos(hf), sf = sin(hf);\n  for (const D of L.d) {\n    if (!D.st && T >= D.te) (D.st = 1), (D.xd = L.x0 + dir * PV * D.te - dir * (L.len - 6));\n    if (D.st === 1 && T >= L.tb) {\n      // Break-off: where the ring was, frozen, then turn away and track out.\n      const sb = L.tb - L.te0, th = L.rot0 + 0.25 * sb + (TAU * D.i) / n;\n      Object.assign(D, { st: 2, th, bx: L.cx + w * 2 * sb + L.rr * cos(th), bz: L.rr * sin(th), by: PY + 3 + fall(sb - 0.15) });\n    }\n    if (D.st === 1) {\n      const s = T - D.te, th = rot + (TAU * D.i) / n, g = sm(0.4, 2.3, s);\n      D.x = mix(D.xd + dir * thr(s) + w * 2 * s, ccx + L.rr * cos(th), g);\n      D.y = mix(PY + 3 + fall(s), ccy, g);\n      D.z = mix(D.zd, L.rr * sin(th), g);\n      D.h = th + PI;\n      D.g = g;\n    } else if (D.st === 2) {\n      const sb = T - L.tb, out = (10 + 0.6 * n) * (1 - exp(-1.1 * sb));\n      D.x = cl(D.bx + cos(D.th) * out, 2, 61);\n      D.z = D.bz + sin(D.th) * out * 0.6;\n      D.y = D.by + 9.5 * sb;\n      D.h = D.th + PI + PI * sm(0, 0.6, sb);\n      D.g = 0;\n      if (sb >= 0.7 + (1.4 * D.rank) / (n - 1)) Object.assign(D, { st: 3, td: T, yd: D.y, vy: 9.5, ax: D.x, az: D.z, h0: D.h });\n    } else if (D.st === 3) {\n      // Under canopy: open, slow down, spiral in over the field and turn to land.\n      const sc = T - D.td;\n      D.o = min(1, sc / 0.9);\n      D.vy += ((D.y > GL - 5 ? 1.3 : D.o > 0.55 ? D.k : 9.5) - D.vy) * min(1, 5 * d);\n      D.y += D.vy * d;\n      const pr = cl((D.y - D.yd) / (GL - D.yd), 0, 1), fx = D.lx - cf * 8, fz = D.lz - sf * 8;\n      if (pr \u003c 0.8) {\n        const e = sm(0, 0.8, pr), r = 13 * sin(PI * (pr / 0.8)) ** 0.6, h = D.h0 + D.om * sc, sg = D.om > 0 ? 1 : -1;\n        // The wind carries the spiral downwind on the way down, and the last turn brings it back.\n        D.x = mix(D.ax, fx, e) + sg * r * sin(h) + w * 12 * sin(PI * e);\n        D.z = mix(D.az, fz, e) - sg * r * cos(h);\n        const b = sm(0.65, 0.8, pr);\n        D.h = atan2(mix(sin(h), sf, b), mix(cos(h), cf, b));\n      } else {\n        const q = sm(0.8, 1, pr);\n        (D.x = mix(fx, D.lx, q)), (D.z = mix(fz, D.lz, q)), (D.h = hf);\n      }\n      D.x = cl(D.x, 3, 60);\n      D.fl = sm(GL - 5, GL, D.y);\n      if (D.y >= GL) Object.assign(D, { st: 4, tl: T, y: GL, x: D.lx, z: D.lz, h: hf });\n    } else if (D.st === 4 && T - D.tl > 7.5) D.st = 5;\n  }\n}\n\nfunction tick(P, d, n) {\n  P.t += d;\n  P.cx += (3.2 + 9 * P.w) * d;\n  if ((P.next -= d) \u003c= 0) spawn(P, n, 0), (P.next += CYCLE);\n  for (const L of P.loads) runLoad(P, L, d);\n  P.loads = P.loads.filter((L) => L.t \u003c 60 && L.d.some((D) => D.st \u003c 5));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), n = round(cl(k[2], 5, 12));\n  P.w = cl(k[3], -1, 1);\n  P.h = cl(k[0], 0, 1);\n  P.rt += rd;\n  // One load landing, one high under canopy, and the third plane on its run.\n  if (!P.ready) {\n    P.ready = 1;\n    P.next = 1e9;\n    for (const s of [0, 19, 30, 32.5]) {\n      while (P.t \u003c s - 1e-6) tick(P, 1 / 15, n);\n      s \u003c 32 && spawn(P, n, 0);\n    }\n    P.next = CYCLE - 2.5;\n  }\n  if (input.btnPressed && input.btnPressed[0]) spawn(P, n, 1), (P.next = CYCLE);\n  tick(P, d, n);\n}\n\nlet F, LT, K;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1) {\n  const o = at(x, y);\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction seg(x0, y0, x1, y1, c, a = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1;\n  for (let i = 0; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c, a);\n}\nconst lit = (c, k = 1) => [c[0] * LT[0] * k, c[1] * LT[1] * k, c[2] * LT[2] * k];\nconst KC = (i) => [K[i], K[i + 1], K[i + 2]];\n\n// Sky, sun, hills and the drop zone, kept until the hour moves.\nfunction backdrop(P) {\n  const B = P.bg, h = P.h, key = round(h * 300);\n  if (key === P.key) return;\n  P.key = key;\n  const zen = KC(0), mid = KC(3), hor = KC(6), sun = KC(9), sy = mix(-16, 90, sm(0.3, 1, h));\n  const FIELDS = [[74, 124, 44], [112, 140, 52], [150, 146, 72], [60, 104, 48], [126, 112, 64]];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    let c;\n    const hill = HZ - 1.5 - 2.5 * vn(x * 0.09, 50);\n    if (y \u003c hill) {\n      const f = y / HZ, u = f \u003c 0.6 ? sm(0, 1, f / 0.6) : ((f - 0.6) / 0.4) ** 1.6;\n      c = f \u003c 0.6 ? zen.map((v, j) => mix(v, mid[j], u)) : mid.map((v, j) => mix(v, hor[j], u));\n      const ds = Math.hypot(x - 47, (y - sy) * 1.1), g = 0.5 * exp(-ds / 9) + 0.25 * exp(-ds / 30);\n      c = ds \u003c 3.6 ? sun : c.map((v, j) => v + sun[j] * g * (0.4 + 0.6 * h));\n    } else if (y \u003c HZ) {\n      c = lit(hor.map((v, j) => mix(v, [44, 72, 70][j], 0.6)));\n    } else {\n      const zf = y - HZ + 2, gx = ((x - 32) * 24) / zf, gz = 260 / zf;\n      if (y >= 104 && y \u003c= 106) c = y === 105 && (floor(gx / 5) & 3) === 0 ? [220, 220, 220] : [92, 92, 98];\n      else if (y >= 109) c = [70, 150, 48].map((v) => v * (floor(gx / 7) & 1 ? 0.86 : 1));\n      else c = FIELDS[floor(hash(floor(gx / 40 + 60), floor(gz / 22)) * 5)];\n      const e = ((x - TX) / 11) ** 2 + ((y - GL) / 3.6) ** 2;\n      if (e \u003c 1) c = e \u003c 0.07 ? [245, 245, 245] : [204, 182, 132].map((v) => v * (e > 0.6 ? 0.84 : 1));\n      c = lit(c).map((v, j) => mix(v, hor[j], exp(-(zf - 2) / 4) * 0.65));\n    }\n    // The hangar by the runway, its door open.\n    if (x >= 3 && x \u003c= 16 && y \u003c= 105 && y >= 97 + ((x - 9.5) / 6.5) ** 2 * 3) c = lit(x > 6 && x \u003c 13 && y > 100 ? [34, 34, 42] : [196, 196, 204], y \u003c 99 ? 1.08 : 1);\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  }\n}\n\n// The far cumulus sitting on the horizon haze.\nfunction farClouds(P) {\n  const lt = KC(12), sh = KC(15), hor = KC(6);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x * 0.9 + P.cx * 0.6 + 40, i = floor(xx), f = xx - i, hgt = mix(P.far[i & 127], P.far[(i + 1) & 127], f);\n    for (let y = floor(98 - hgt); y \u003c= 98; y++) {\n      const u = (98 - y) / max(1, hgt), c = sh.map((v, j) => mix(mix(v, lt[j], cl(u * 1.3, 0, 1)), hor[j], 0.35));\n      put(x, y, c, cl(y - (98 - hgt) + 0.5, 0, 1) * 0.92);\n    }\n  }\n}\n\n// The deck the divers fall through: domes on top, a flat grey base.\nfunction deck(P) {\n  const lt = KC(12), sh = KC(15);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x + P.cx + 7, i = floor(xx), f = xx - i, hgt = mix(P.top[i & 127], P.top[(i + 1) & 127], f);\n    if (hgt \u003c 0.3) continue;\n    for (let y = floor(DB - hgt); y \u003c= DB; y++) {\n      const u = (DB - y) / max(1, hgt), b = cl(u * 1.15 + (vn(xx * 0.35, y * 0.4) - 0.5) * 0.6, 0, 1);\n      put(x, y, sh.map((v, j) => mix(v, lt[j], b)), cl(y - (DB - hgt) + 0.5, 0, 1) * (y === DB ? 0.7 : 0.95));\n    }\n  }\n}\n\nfunction plane(P, L) {\n  const { len, dir, px } = L, X = (u) => px - dir * (len - u), body = lit([236, 236, 242]), belly = lit([168, 170, 180]), glass = lit([50, 74, 110]), dark = [22, 22, 28];\n  for (let u = -1; u \u003c= len; u += 0.5) {\n    const x = X(u);\n    if (u \u003c 4.5) for (let y = PY - 2 - (u \u003c 2 ? 5 : 5 - (u - 2) * 2); y \u003c PY - 2; y++) put(x, y, body);\n    if (u \u003c 3.5) put(x, PY - 1, belly);\n    if (u \u003c 1) continue;\n    const bot = u \u003c 7 ? PY + 1 - (7 - u) * 0.45 : PY + 1, top = u > len - 3 ? PY - 2 + (u - len + 3) * 0.7 : PY - 2;\n    for (let y = ceil(top); y \u003c= bot; y++) put(x, y, y === PY ? lit(L.sc) : y > PY ? belly : body);\n  }\n  for (let u = 9; u \u003c len - 5; u += 2) put(X(u), PY - 1, glass);\n  put(X(len - 2), PY - 1, glass), put(X(len - 3), PY - 1, glass);\n  for (let u = len * 0.42; u \u003c= len * 0.66; u += 0.5) put(X(u), PY - 3, lit([214, 216, 224]));\n  for (let u = len * 0.6; u \u003c= len * 0.74; u += 0.5) put(X(u), PY - 2, lit([150, 150, 160]));\n  for (let y = PY - 5; y \u003c= PY; y++) put(X(len * 0.77), y, [220, 220, 230], 0.25 + 0.2 * rnd());\n  put(X(len * 0.55), PY + 2, dark), put(X(len - 2), PY + 2, dark);\n  // The door is open on the run in, with the next diver crouched in it.\n  const next = L.d.find((D) => !D.st);\n  if (next && L.t > L.te0 - 1.6) {\n    for (let u = 4.5; u \u003c= 6.5; u += 0.5) for (let y = PY - 1; y \u003c= PY + 1; y++) put(X(u), y, dark);\n    put(X(6), PY, lit(SUIT[next.suit])), put(X(6), PY - 1, lit(HELM[next.helm]));\n  }\n  if ((P.rt * 1.4) % 1 \u003c 0.25) put(X(len * 0.5), PY - 4, [255, 40, 30]);\n}\n\n// A diver in freefall seen from above and behind: spread arms and legs, the rig on the back, the helmet.\nconst bp = (D, a, b) => {\n  const c = cos(D.h) * 1.3, s = sin(D.h) * 1.3;\n  return [D.x + c * a - s * b, D.y + (D.z + s * a + c * b) * ZS];\n};\nfunction diver(D) {\n  const sc = lit(SUIT[D.suit]), ln = (a, b) => seg(...bp(D, ...a), ...bp(D, ...b), sc);\n  for (const m of [-1, 1]) {\n    ln([-0.9, 0.4 * m], [-2.8, 1.6 * m]);\n    if (D.g \u003c 0.97) ln([0.9, 0.8 * m], [2.1, 2.3 * m]);\n  }\n  ln([-0.9, 0], [0.9, 0]), ln([0.9, -0.9], [0.9, 0.9]);\n  put(...bp(D, -0.1, 0), [26, 26, 32]);\n  put(...bp(D, 1.9, 0), lit(HELM[D.helm]));\n}\n\n// A canopy: cells, lines, the jumper in the harness. On the ground it falls in behind the jumper, who gathers it up.\nfunction canopy(D, T) {\n  const sx = D.x, sy = D.y + D.z * ZS, ca = CAN[D.can], cb = CAN[D.cb], down = D.st === 4, sl = down ? T - D.tl : 0, a = 1 - sm(5.5, 7.5, sl);\n  const suit = lit(SUIT[D.suit]);\n  if (!down && D.o \u003c 0.3) {\n    // Pilot chute and bag going up.\n    seg(sx, sy - 1, sx, sy - 2 - D.o * 22, lit([200, 200, 210]), 0.5), put(sx, sy - 2 - D.o * 22, lit([245, 245, 245]));\n    put(sx, sy - 1, lit(HELM[D.helm])), put(sx, sy, suit), put(sx + 1, sy, suit);\n    return;\n  }\n  const kk = down ? 1 : sm(0.25, 0.8, D.o), pop = 1 + 0.18 * sin(PI * sm(0.55, 1, D.o)), c = sm(0, 1.2, sl);\n  const ch = cos(D.h), shh = sin(D.h), zm = 1 + D.z * 0.015, hs = (1 + 5.2 * kk) * pop * mix(1, 0.75, c) * zm, lr = (2 + 6 * kk) * (1 - c) * zm + 0.5 * c;\n  const ox = down ? -ch * 4 * c : 0, oy = down ? -shh * 4 * c * ZS : 0, cy = sy - 1.5 - lr + oy, droop = mix(1.1, 0.2, c) + D.fl * 0.6;\n  const svx = -shh * hs, svy = ch * hs * ZC, fx = ch * 2 * zm, fy = shh * 2 * ZC * (1 - c);\n  if (!down || c \u003c 1) for (const t of [-0.9, -0.35, 0.35, 0.9]) seg(sx, sy - 1.5, sx + ox + svx * t, cy + svy * t + droop * t * t + 1, lit([210, 210, 220]), 0.3 * a);\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let t = -1; t \u003c= 1; t += 0.45 / hs) {\n      const cell = min(8, floor((t + 1) * 4.5)), col = cell > 2 && cell \u003c 6 ? cb : ca, k = (cell & 1 ? 0.8 : 1) * (pass ? 1 : 0.5) * (1.12 - 0.12 * pop);\n      for (let q = -1; q \u003c= 1; q += 0.5) put(sx + ox + svx * t + fx * q, cy + svy * t + fy * q + droop * t * t + (pass ? 0 : 1), lit(col, k * (0.92 + 0.08 * q)), a);\n    }\n  put(sx, sy - 2, lit(HELM[D.helm]), a), put(sx, sy - 1, suit, a), put(sx + (D.fl > 0.3 ? 1 : 0), sy, suit.map((v) => v * 0.7), a);\n}\n\nfunction sock(P) {\n  const w = P.w, aw = abs(w), sx = w >= 0 ? 1 : -1;\n  for (let y = 104; y \u003c= 116; y++) put(WX, y, lit([200, 200, 206]));\n  for (let u = 0; u \u003c= 6; u += 0.5) {\n    const x = WX + sx * u * (0.3 + 0.7 * aw), y = 104 + u * (1 - aw) * 0.85 + sin(P.rt * 9 - u) * 0.35 * aw, col = lit(floor(u / 1.5) & 1 ? [240, 240, 240] : [255, 110, 20]);\n    put(x, y, col), u \u003c 4 && put(x, y + 1, col, 0.8);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  F = P.f;\n  const hh = P.h * 3, i0 = min(2, floor(hh));\n  K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  LT = KC(18);\n  backdrop(P);\n  F.set(P.bg);\n  // Cloud shadows crossing the fields.\n  for (let y = HZ; y \u003c H; y++) {\n    const zf = y - HZ + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const v = vn((((x - 32) * 24) / zf - P.cx * 1.1) * 0.035, (260 / zf) * 0.05), k = 1 - 0.5 * sm(0.45, 0.58, v), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n  farClouds(P);\n  sock(P);\n  const A = [];\n  for (const L of P.loads) for (const D of L.d) if (D.st === 4) canopy(D, L.t);\n  for (const L of P.loads) if (L.px > -40 && L.px \u003c 104) plane(P, L);\n  for (const L of P.loads) for (const D of L.d) if (D.st && D.st \u003c 4) A.push([D, L]);\n  A.sort((a, b) => a[0].z - b[0].z);\n  for (const [D, L] of A) {\n    if (D.st === 3) canopy(D, L.t);\n    else {\n      diver(D);\n      // Grips: the arms of two docked neighbours meet between them.\n      const E = L.d[(D.i + 1) % L.n];\n      if (D.st === 1 && E.st === 1 && D.g > 0.97 && E.g > 0.97) {\n        const d2 = (u, v) => (u[0] - v[0]) ** 2 + (u[1] - v[1]) ** 2, [a, b, c, e] = [bp(D, 0.9, -0.9), bp(D, 0.9, 0.9), bp(E, 0.9, -0.9), bp(E, 0.9, 0.9)];\n        const p = d2(a, c) + d2(a, e) \u003c d2(b, c) + d2(b, e) ? a : b, q = d2(p, c) \u003c d2(p, e) ? c : e;\n        const m = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];\n        seg(...p, ...m, lit(SUIT[D.suit])), seg(...m, ...q, lit(SUIT[E.suit]));\n      }\n    }\n  }\n  deck(P);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-skydiver","type":"code","name":"skydiver","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Skydiver\n// Family:  flight\n// Idea:    A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after formation skydiving loads at a drop zone\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1\n//\n// Knob 1: Hour. A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light.\n// Knob 2: Speed. At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower.\n// Knob 3: Divers. How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down.\n// Knob 4: Wind. The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you.\n// Buttons: K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the plane's fuselage, the flat base of the cloud deck, the horizon, the landing field.\nconst [PY, DB, HZ, GL] = [8, 30, 101, 118];\n// Depth goes onto the screen at this scale, nearer is lower; canopies are seen flatter.\nconst [ZS, ZC] = [0.55, 0.3];\n// Terminal velocity and the plane's speed in LEDs a second, the target, the windsock, seconds between loads.\nconst [VT, PV, TX, WX, CYCLE] = [8.5, 14, 34, 57, 15];\n// Sky top, middle, horizon; sun; lit and shaded cloud; daylight. Midday to sunset.\nconst KEYS = [\n  [8, 28, 104, 18, 62, 148, 112, 158, 204, 255, 250, 225, 252, 252, 255, 150, 162, 190, 1, 1, 1],\n  [12, 34, 112, 56, 96, 172, 196, 190, 184, 255, 226, 160, 255, 238, 210, 146, 140, 170, 1, 0.92, 0.8],\n  [20, 24, 90, 104, 84, 146, 255, 160, 84, 255, 186, 100, 255, 194, 136, 126, 96, 136, 1, 0.78, 0.58],\n  [12, 12, 50, 96, 46, 104, 255, 104, 44, 255, 136, 56, 255, 136, 96, 82, 54, 92, 0.86, 0.56, 0.42],\n];\nconst CAN = [[255, 30, 60], [255, 214, 0], [20, 110, 255], [255, 50, 190], [80, 235, 40], [255, 120, 0], [0, 220, 235], [150, 60, 255], [245, 245, 245], [255, 80, 80], [20, 190, 110], [255, 160, 200]];\nconst SUIT = [[255, 220, 40], [240, 40, 40], [40, 200, 255], [250, 250, 250], [255, 110, 0], [190, 70, 255], [60, 230, 90], [255, 80, 180]];\nconst HELM = [[250, 250, 250], [30, 30, 36], [255, 200, 0], [230, 40, 40]];\nconst STRIPE = [[200, 30, 40], [20, 70, 170], [230, 150, 0]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = { t: 0, rt: 0, loads: [], next: 0, cx: 0, w: 0, f: F32(N * 3), bg: F32(N * 3), key: -1, top: F32(128), far: F32(128) });\n  // Cumulus along a strip that wraps every 128 columns, each a cluster of round puffs: the deck and the far ones.\n  for (const [T, nc, sz] of [[P.top, 4, 1], [P.far, 6, 0.5]])\n    for (let k = 0; k \u003c nc; k++) {\n      const c = (k * 128) / nc + rnd() * 8, wd = (14 + rnd() * 14) * sz, hm = (5 + rnd() * 7) * sz;\n      for (let j = 0; j \u003c 11; j++) {\n        // Bubbles stacked higher towards the middle of the cloud.\n        const u = rnd() * 2 - 1, r = (2 + rnd() * 3.2) * (sz + 0.3) * 0.75, px = c + u * (wd / 2 - r * 0.5), e = max(0, (hm - r) * (1 - u * u) * (0.5 + 0.5 * rnd()));\n        for (let x = 0; x \u003c 128; x++) {\n          const dx = ((((x - px) % 128) + 192) % 128) - 64;\n          // A round top, and shoulders sloping down to the base.\n          const ax = abs(dx);\n          if (ax \u003c r + e) T[x] = max(T[x], ax \u003c r ? e + Math.sqrt(r * r - dx * dx) : e + r - ax);\n        }\n      }\n    }\n}\n\nconst shuffle = (n) => {\n  const a = [...Array(n).keys()];\n  for (let i = n - 1; i > 0; i--) {\n    const j = floor(rnd() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n};\n\n// A load: the plane runs in against the wind and puts the ring upwind of the target.\nfunction spawn(P, n, btn) {\n  // A big load gets out of the door faster, so every ring has the same time to build.\n  const w = P.w, dir = w >= 0 ? -1 : 1, len = 17 + n, ex = (0.5 + 0.06 * n) / (n - 1), half = ((n - 1) * ex) / 2, x0 = dir \u003c 0 ? 66 : -2;\n  const te0 = btn ? 1.3 : max(1.3, (dir * (31 - 12 * w - x0) + len - 12) / PV - half);\n  const cx = x0 + dir * PV * (te0 + half) - dir * (len - 12), ci = shuffle(CAN.length), si = shuffle(SUIT.length), rk = shuffle(n), lp = shuffle(n);\n  const d = [];\n  for (let i = 0; i \u003c n; i++) {\n    // Exit time, canopy colours (white or a second colour in the middle cells), suit, helmet,\n    // descent rate under canopy, which way the spiral turns, and the spot on the field.\n    d.push({\n      i, te: te0 + i * ex, st: 0, x: 0, y: 0, z: 0, h: 0, g: 0, o: 0, rank: rk[i], can: ci[i], cb: rnd() \u003c 0.5 ? 8 : ci[(i + 5) % 12], suit: si[i % 8], helm: floor(rnd() * 4),\n      zd: rnd() * 2 - 1, k: 2.2 + rnd() * 1.2, om: (rnd() \u003c 0.5 ? -1 : 1) * (0.8 + rnd() * 0.4), lx: TX + (lp[i] / (n - 1) - 0.5) * 26 + rnd() * 2, lz: rnd() * 12 - 4,\n    });\n  }\n  P.loads.push({ t: 0, n, dir, len, x0, te0, cx, px: x0, rot0: rnd() * TAU, rr: 4.6 / sin(PI / n), tb: te0 + 2 * half + 4.2, d, sc: STRIPE[floor(rnd() * 3)] });\n  if (P.loads.length > 4) P.loads.shift();\n}\n\nconst fall = (s) => (s \u003c= 0 ? 0 : VT * (s - (1 - exp(-1.5 * s)) / 1.5));\nconst thr = (s) => (s \u003c= 0 ? 0 : (PV * (1 - exp(-1.4 * s))) / 1.4);\n\nfunction runLoad(P, L, d) {\n  const T = (L.t += d), w = P.w, dir = L.dir, n = L.n;\n  L.px = L.x0 + dir * PV * T;\n  const s0 = T - L.te0, ccx = L.cx + w * 2 * max(0, s0), ccy = PY + 3 + fall(s0 - 0.15), rot = L.rot0 + 0.25 * s0;\n  const hf = atan2(1 - 0.9 * abs(w), -w), cf = cos(hf), sf = sin(hf);\n  for (const D of L.d) {\n    if (!D.st && T >= D.te) (D.st = 1), (D.xd = L.x0 + dir * PV * D.te - dir * (L.len - 6));\n    if (D.st === 1 && T >= L.tb) {\n      // Break-off: where the ring was, frozen, then turn away and track out.\n      const sb = L.tb - L.te0, th = L.rot0 + 0.25 * sb + (TAU * D.i) / n;\n      Object.assign(D, { st: 2, th, bx: L.cx + w * 2 * sb + L.rr * cos(th), bz: L.rr * sin(th), by: PY + 3 + fall(sb - 0.15) });\n    }\n    if (D.st === 1) {\n      const s = T - D.te, th = rot + (TAU * D.i) / n, g = sm(0.4, 2.3, s);\n      D.x = mix(D.xd + dir * thr(s) + w * 2 * s, ccx + L.rr * cos(th), g);\n      D.y = mix(PY + 3 + fall(s), ccy, g);\n      D.z = mix(D.zd, L.rr * sin(th), g);\n      D.h = th + PI;\n      D.g = g;\n    } else if (D.st === 2) {\n      const sb = T - L.tb, out = (10 + 0.6 * n) * (1 - exp(-1.1 * sb));\n      D.x = cl(D.bx + cos(D.th) * out, 2, 61);\n      D.z = D.bz + sin(D.th) * out * 0.6;\n      D.y = D.by + 9.5 * sb;\n      D.h = D.th + PI + PI * sm(0, 0.6, sb);\n      D.g = 0;\n      if (sb >= 0.7 + (1.4 * D.rank) / (n - 1)) Object.assign(D, { st: 3, td: T, yd: D.y, vy: 9.5, ax: D.x, az: D.z, h0: D.h });\n    } else if (D.st === 3) {\n      // Under canopy: open, slow down, spiral in over the field and turn to land.\n      const sc = T - D.td;\n      D.o = min(1, sc / 0.9);\n      D.vy += ((D.y > GL - 5 ? 1.3 : D.o > 0.55 ? D.k : 9.5) - D.vy) * min(1, 5 * d);\n      D.y += D.vy * d;\n      const pr = cl((D.y - D.yd) / (GL - D.yd), 0, 1), fx = D.lx - cf * 8, fz = D.lz - sf * 8;\n      if (pr \u003c 0.8) {\n        const e = sm(0, 0.8, pr), r = 13 * sin(PI * (pr / 0.8)) ** 0.6, h = D.h0 + D.om * sc, sg = D.om > 0 ? 1 : -1;\n        // The wind carries the spiral downwind on the way down, and the last turn brings it back.\n        D.x = mix(D.ax, fx, e) + sg * r * sin(h) + w * 12 * sin(PI * e);\n        D.z = mix(D.az, fz, e) - sg * r * cos(h);\n        const b = sm(0.65, 0.8, pr);\n        D.h = atan2(mix(sin(h), sf, b), mix(cos(h), cf, b));\n      } else {\n        const q = sm(0.8, 1, pr);\n        (D.x = mix(fx, D.lx, q)), (D.z = mix(fz, D.lz, q)), (D.h = hf);\n      }\n      D.x = cl(D.x, 3, 60);\n      D.fl = sm(GL - 5, GL, D.y);\n      if (D.y >= GL) Object.assign(D, { st: 4, tl: T, y: GL, x: D.lx, z: D.lz, h: hf });\n    } else if (D.st === 4 && T - D.tl > 7.5) D.st = 5;\n  }\n}\n\nfunction tick(P, d, n) {\n  P.t += d;\n  P.cx += (3.2 + 9 * P.w) * d;\n  if ((P.next -= d) \u003c= 0) spawn(P, n, 0), (P.next += CYCLE);\n  for (const L of P.loads) runLoad(P, L, d);\n  P.loads = P.loads.filter((L) => L.t \u003c 60 && L.d.some((D) => D.st \u003c 5));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), n = round(cl(k[2], 5, 12));\n  P.w = cl(k[3], -1, 1);\n  P.h = cl(k[0], 0, 1);\n  P.rt += rd;\n  // One load landing, one high under canopy, and the third plane on its run.\n  if (!P.ready) {\n    P.ready = 1;\n    P.next = 1e9;\n    for (const s of [0, 19, 30, 32.5]) {\n      while (P.t \u003c s - 1e-6) tick(P, 1 / 15, n);\n      s \u003c 32 && spawn(P, n, 0);\n    }\n    P.next = CYCLE - 2.5;\n  }\n  if (input.btnPressed && input.btnPressed[0]) spawn(P, n, 1), (P.next = CYCLE);\n  tick(P, d, n);\n}\n\nlet F, LT, K;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1) {\n  const o = at(x, y);\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction seg(x0, y0, x1, y1, c, a = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1;\n  for (let i = 0; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c, a);\n}\nconst lit = (c, k = 1) => [c[0] * LT[0] * k, c[1] * LT[1] * k, c[2] * LT[2] * k];\nconst KC = (i) => [K[i], K[i + 1], K[i + 2]];\n\n// Sky, sun, hills and the drop zone, kept until the hour moves.\nfunction backdrop(P) {\n  const B = P.bg, h = P.h, key = round(h * 300);\n  if (key === P.key) return;\n  P.key = key;\n  const zen = KC(0), mid = KC(3), hor = KC(6), sun = KC(9), sy = mix(-16, 90, sm(0.3, 1, h));\n  const FIELDS = [[74, 124, 44], [112, 140, 52], [150, 146, 72], [60, 104, 48], [126, 112, 64]];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    let c;\n    const hill = HZ - 1.5 - 2.5 * vn(x * 0.09, 50);\n    if (y \u003c hill) {\n      const f = y / HZ, u = f \u003c 0.6 ? sm(0, 1, f / 0.6) : ((f - 0.6) / 0.4) ** 1.6;\n      c = f \u003c 0.6 ? zen.map((v, j) => mix(v, mid[j], u)) : mid.map((v, j) => mix(v, hor[j], u));\n      const ds = Math.hypot(x - 47, (y - sy) * 1.1), g = 0.5 * exp(-ds / 9) + 0.25 * exp(-ds / 30);\n      c = ds \u003c 3.6 ? sun : c.map((v, j) => v + sun[j] * g * (0.4 + 0.6 * h));\n    } else if (y \u003c HZ) {\n      c = lit(hor.map((v, j) => mix(v, [44, 72, 70][j], 0.6)));\n    } else {\n      const zf = y - HZ + 2, gx = ((x - 32) * 24) / zf, gz = 260 / zf;\n      if (y >= 104 && y \u003c= 106) c = y === 105 && (floor(gx / 5) & 3) === 0 ? [220, 220, 220] : [92, 92, 98];\n      else if (y >= 109) c = [70, 150, 48].map((v) => v * (floor(gx / 7) & 1 ? 0.86 : 1));\n      else c = FIELDS[floor(hash(floor(gx / 40 + 60), floor(gz / 22)) * 5)];\n      const e = ((x - TX) / 11) ** 2 + ((y - GL) / 3.6) ** 2;\n      if (e \u003c 1) c = e \u003c 0.07 ? [245, 245, 245] : [204, 182, 132].map((v) => v * (e > 0.6 ? 0.84 : 1));\n      c = lit(c).map((v, j) => mix(v, hor[j], exp(-(zf - 2) / 4) * 0.65));\n    }\n    // The hangar by the runway, its door open.\n    if (x >= 3 && x \u003c= 16 && y \u003c= 105 && y >= 97 + ((x - 9.5) / 6.5) ** 2 * 3) c = lit(x > 6 && x \u003c 13 && y > 100 ? [34, 34, 42] : [196, 196, 204], y \u003c 99 ? 1.08 : 1);\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  }\n}\n\n// The far cumulus sitting on the horizon haze.\nfunction farClouds(P) {\n  const lt = KC(12), sh = KC(15), hor = KC(6);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x * 0.9 + P.cx * 0.6 + 40, i = floor(xx), f = xx - i, hgt = mix(P.far[i & 127], P.far[(i + 1) & 127], f);\n    for (let y = floor(98 - hgt); y \u003c= 98; y++) {\n      const u = (98 - y) / max(1, hgt), c = sh.map((v, j) => mix(mix(v, lt[j], cl(u * 1.3, 0, 1)), hor[j], 0.35));\n      put(x, y, c, cl(y - (98 - hgt) + 0.5, 0, 1) * 0.92);\n    }\n  }\n}\n\n// The deck the divers fall through: domes on top, a flat grey base.\nfunction deck(P) {\n  const lt = KC(12), sh = KC(15);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x + P.cx + 7, i = floor(xx), f = xx - i, hgt = mix(P.top[i & 127], P.top[(i + 1) & 127], f);\n    if (hgt \u003c 0.3) continue;\n    for (let y = floor(DB - hgt); y \u003c= DB; y++) {\n      const u = (DB - y) / max(1, hgt), b = cl(u * 1.15 + (vn(xx * 0.35, y * 0.4) - 0.5) * 0.6, 0, 1);\n      put(x, y, sh.map((v, j) => mix(v, lt[j], b)), cl(y - (DB - hgt) + 0.5, 0, 1) * (y === DB ? 0.7 : 0.95));\n    }\n  }\n}\n\nfunction plane(P, L) {\n  const { len, dir, px } = L, X = (u) => px - dir * (len - u), body = lit([236, 236, 242]), belly = lit([168, 170, 180]), glass = lit([50, 74, 110]), dark = [22, 22, 28];\n  for (let u = -1; u \u003c= len; u += 0.5) {\n    const x = X(u);\n    if (u \u003c 4.5) for (let y = PY - 2 - (u \u003c 2 ? 5 : 5 - (u - 2) * 2); y \u003c PY - 2; y++) put(x, y, body);\n    if (u \u003c 3.5) put(x, PY - 1, belly);\n    if (u \u003c 1) continue;\n    const bot = u \u003c 7 ? PY + 1 - (7 - u) * 0.45 : PY + 1, top = u > len - 3 ? PY - 2 + (u - len + 3) * 0.7 : PY - 2;\n    for (let y = ceil(top); y \u003c= bot; y++) put(x, y, y === PY ? lit(L.sc) : y > PY ? belly : body);\n  }\n  for (let u = 9; u \u003c len - 5; u += 2) put(X(u), PY - 1, glass);\n  put(X(len - 2), PY - 1, glass), put(X(len - 3), PY - 1, glass);\n  for (let u = len * 0.42; u \u003c= len * 0.66; u += 0.5) put(X(u), PY - 3, lit([214, 216, 224]));\n  for (let u = len * 0.6; u \u003c= len * 0.74; u += 0.5) put(X(u), PY - 2, lit([150, 150, 160]));\n  for (let y = PY - 5; y \u003c= PY; y++) put(X(len * 0.77), y, [220, 220, 230], 0.25 + 0.2 * rnd());\n  put(X(len * 0.55), PY + 2, dark), put(X(len - 2), PY + 2, dark);\n  // The door is open on the run in, with the next diver crouched in it.\n  const next = L.d.find((D) => !D.st);\n  if (next && L.t > L.te0 - 1.6) {\n    for (let u = 4.5; u \u003c= 6.5; u += 0.5) for (let y = PY - 1; y \u003c= PY + 1; y++) put(X(u), y, dark);\n    put(X(6), PY, lit(SUIT[next.suit])), put(X(6), PY - 1, lit(HELM[next.helm]));\n  }\n  if ((P.rt * 1.4) % 1 \u003c 0.25) put(X(len * 0.5), PY - 4, [255, 40, 30]);\n}\n\n// A diver in freefall seen from above and behind: spread arms and legs, the rig on the back, the helmet.\nconst bp = (D, a, b) => {\n  const c = cos(D.h) * 1.3, s = sin(D.h) * 1.3;\n  return [D.x + c * a - s * b, D.y + (D.z + s * a + c * b) * ZS];\n};\nfunction diver(D) {\n  const sc = lit(SUIT[D.suit]), ln = (a, b) => seg(...bp(D, ...a), ...bp(D, ...b), sc);\n  for (const m of [-1, 1]) {\n    ln([-0.9, 0.4 * m], [-2.8, 1.6 * m]);\n    if (D.g \u003c 0.97) ln([0.9, 0.8 * m], [2.1, 2.3 * m]);\n  }\n  ln([-0.9, 0], [0.9, 0]), ln([0.9, -0.9], [0.9, 0.9]);\n  put(...bp(D, -0.1, 0), [26, 26, 32]);\n  put(...bp(D, 1.9, 0), lit(HELM[D.helm]));\n}\n\n// A canopy: cells, lines, the jumper in the harness. On the ground it falls in behind the jumper, who gathers it up.\nfunction canopy(D, T) {\n  const sx = D.x, sy = D.y + D.z * ZS, ca = CAN[D.can], cb = CAN[D.cb], down = D.st === 4, sl = down ? T - D.tl : 0, a = 1 - sm(5.5, 7.5, sl);\n  const suit = lit(SUIT[D.suit]);\n  if (!down && D.o \u003c 0.3) {\n    // Pilot chute and bag going up.\n    seg(sx, sy - 1, sx, sy - 2 - D.o * 22, lit([200, 200, 210]), 0.5), put(sx, sy - 2 - D.o * 22, lit([245, 245, 245]));\n    put(sx, sy - 1, lit(HELM[D.helm])), put(sx, sy, suit), put(sx + 1, sy, suit);\n    return;\n  }\n  const kk = down ? 1 : sm(0.25, 0.8, D.o), pop = 1 + 0.18 * sin(PI * sm(0.55, 1, D.o)), c = sm(0, 1.2, sl);\n  const ch = cos(D.h), shh = sin(D.h), zm = 1 + D.z * 0.015, hs = (1 + 5.2 * kk) * pop * mix(1, 0.75, c) * zm, lr = (2 + 6 * kk) * (1 - c) * zm + 0.5 * c;\n  const ox = down ? -ch * 4 * c : 0, oy = down ? -shh * 4 * c * ZS : 0, cy = sy - 1.5 - lr + oy, droop = mix(1.1, 0.2, c) + D.fl * 0.6;\n  const svx = -shh * hs, svy = ch * hs * ZC, fx = ch * 2 * zm, fy = shh * 2 * ZC * (1 - c);\n  if (!down || c \u003c 1) for (const t of [-0.9, -0.35, 0.35, 0.9]) seg(sx, sy - 1.5, sx + ox + svx * t, cy + svy * t + droop * t * t + 1, lit([210, 210, 220]), 0.3 * a);\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let t = -1; t \u003c= 1; t += 0.45 / hs) {\n      const cell = min(8, floor((t + 1) * 4.5)), col = cell > 2 && cell \u003c 6 ? cb : ca, k = (cell & 1 ? 0.8 : 1) * (pass ? 1 : 0.5) * (1.12 - 0.12 * pop);\n      for (let q = -1; q \u003c= 1; q += 0.5) put(sx + ox + svx * t + fx * q, cy + svy * t + fy * q + droop * t * t + (pass ? 0 : 1), lit(col, k * (0.92 + 0.08 * q)), a);\n    }\n  put(sx, sy - 2, lit(HELM[D.helm]), a), put(sx, sy - 1, suit, a), put(sx + (D.fl > 0.3 ? 1 : 0), sy, suit.map((v) => v * 0.7), a);\n}\n\nfunction sock(P) {\n  const w = P.w, aw = abs(w), sx = w >= 0 ? 1 : -1;\n  for (let y = 104; y \u003c= 116; y++) put(WX, y, lit([200, 200, 206]));\n  for (let u = 0; u \u003c= 6; u += 0.5) {\n    const x = WX + sx * u * (0.3 + 0.7 * aw), y = 104 + u * (1 - aw) * 0.85 + sin(P.rt * 9 - u) * 0.35 * aw, col = lit(floor(u / 1.5) & 1 ? [240, 240, 240] : [255, 110, 20]);\n    put(x, y, col), u \u003c 4 && put(x, y + 1, col, 0.8);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  F = P.f;\n  const hh = P.h * 3, i0 = min(2, floor(hh));\n  K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  LT = KC(18);\n  backdrop(P);\n  F.set(P.bg);\n  // Cloud shadows crossing the fields.\n  for (let y = HZ; y \u003c H; y++) {\n    const zf = y - HZ + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const v = vn((((x - 32) * 24) / zf - P.cx * 1.1) * 0.035, (260 / zf) * 0.05), k = 1 - 0.5 * sm(0.45, 0.58, v), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n  farClouds(P);\n  sock(P);\n  const A = [];\n  for (const L of P.loads) for (const D of L.d) if (D.st === 4) canopy(D, L.t);\n  for (const L of P.loads) if (L.px > -40 && L.px \u003c 104) plane(P, L);\n  for (const L of P.loads) for (const D of L.d) if (D.st && D.st \u003c 4) A.push([D, L]);\n  A.sort((a, b) => a[0].z - b[0].z);\n  for (const [D, L] of A) {\n    if (D.st === 3) canopy(D, L.t);\n    else {\n      diver(D);\n      // Grips: the arms of two docked neighbours meet between them.\n      const E = L.d[(D.i + 1) % L.n];\n      if (D.st === 1 && E.st === 1 && D.g > 0.97 && E.g > 0.97) {\n        const d2 = (u, v) => (u[0] - v[0]) ** 2 + (u[1] - v[1]) ** 2, [a, b, c, e] = [bp(D, 0.9, -0.9), bp(D, 0.9, 0.9), bp(E, 0.9, -0.9), bp(E, 0.9, 0.9)];\n        const p = d2(a, c) + d2(a, e) \u003c d2(b, c) + d2(b, e) ? a : b, q = d2(p, c) \u003c d2(p, e) ? c : e;\n        const m = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];\n        seg(...p, ...m, lit(SUIT[D.suit])), seg(...m, ...q, lit(SUIT[E.suit]));\n      }\n    }\n  }\n  deck(P);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower."},{"name":"Divers","min":5,"max":12,"about":"How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down."},{"name":"Wind","min":-1,"max":1,"about":"The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you."}],"start":[0,2,5,0.06],"measures":{"motion":0.1475,"detail":0.0297,"edges":0.3609,"complexity":0.7202,"coverage":0.9986,"colour":0.3312,"drift":0.0468},"knobResponse":[0.1943,0.0707,0.0554,0.0919]},{"slug":"sled-dogs","title":"Sled Dogs","family":"polar","round":27,"note":"드론처럼 바로 위에서 본 개썰매 팀이 둘씩 갱라인에 매여 해빙 위를 달려 올라가요. 낮은 해가 개마다 긴 파란 그림자를 비스듬히 뒤로 던지고, 바람이 깎은 사스트루기 사이로 압력 능선과 다시 언 리드가 발밑을 흘러가요. K1 은 금빛 해에서 오로라 뜬 달밤으로 가고, 누르면 머셔가 외쳐 팀이 방향을 틀어요.","idea":"Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.","buttons":"K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.","code":"// ===== Patternflow pattern =====\n// Title:   Sled Dogs\n// Family:  polar\n// Idea:    Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after dog-sled teams on Arctic sea ice, here in pairs on a gangline (the tandem hitch) rather than the fan hitch used in Greenland\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1\n//\n// Knob 1: Light. A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow.\n// Knob 2: Speed. At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower.\n// Knob 3: Dogs. Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front.\n// Knob 4: Wind. Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice.\n// Buttons: K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.\n\nconst W = 64, H = 128, N = W * H;\n// The ice: a ring of world rows, x from -128 to 127.\nconst RX = 256, XO = 128, RY = 256, RN = RX * RY;\n// The shading grid and the window of heights around it.\nconst TW = 65, TH = 129, MX = 48, MY = 30, HW = TW + 2 * MX, HH = TH + 2 * MY;\n// Dogs are drawn in sixths of a metre, grown by Z.\nconst Z = 1.4, PITCH = 11 * Z, LAT = 2.5 * Z, STRIDE = 9 * Z, SLED = 15 * Z, PL = 1024;\nconst { min, max, floor, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rw = (y) => (((y % RY) + RY) % RY) * RX;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// The prevailing wind, which the sastrugi follow.\nconst GX = -0.8, GY = 0.6;\n// K1 stops: direct rgb, sky rgb, tan of elevation, aurora.\nconst KL = [\n  [0, 208, 146, 56, 64, 94, 160, 0.3, 0],\n  [0.33, 205, 122, 44, 60, 80, 142, 0.17, 0],\n  [0.6, 0, 0, 0, 84, 112, 186, 0.2, 0],\n  [1, 52, 64, 92, 12, 22, 52, 0.32, 1],\n].map((k) => Float64Array.from(k));\n// Coats from above, dark with a light face: black, grey, red, sable, black.\nconst COAT = [\n  [28, 26, 30, 64, 60, 60, 236, 232, 228],\n  [64, 62, 66, 112, 108, 104, 226, 222, 214],\n  [110, 56, 26, 150, 92, 50, 236, 220, 198],\n  [58, 42, 28, 104, 80, 56, 232, 216, 192],\n  [24, 22, 22, 44, 40, 38, 220, 214, 206],\n].map((c) => [0, 3, 6].map((j) => Float64Array.from(c.slice(j, j + 3), (v) => v / 255)));\nconst HARN = [1, 0.5, 0.04], LINE = [0.2, 0.17, 0.22], WOOD = [0.62, 0.46, 0.3], DARK = [0.26, 0.18, 0.12], LOAD = [0.44, 0.34, 0.24], RED = [0.78, 0.15, 0.1], FUR = [0.74, 0.66, 0.54];\n// Side views as capsules (a, h, a, h, r): a dog; the sled and musher.\nconst DOG = [-2, 2.75, 1.2, 2.95, 0.82, 1.2, 3.2, 2.7, 3.95, 0.6, 2.7, 3.95, 3.9, 3.65, 0.42, 2.55, 4.4, 2.7, 5, 0.22, -2.2, 3.2, -2.6, 4.2, 0.42, -2.6, 4.2, -1.8, 4.7, 0.36];\nconst SLD = [-1.5, 0.8, 14.5, 0.8, 0.55, 5.5, 1.8, 11.5, 1.8, 1, 2.6, 0.8, 2.6, 5.8, 0.3, 0.45, 0, 0.7, 5, 0.6, 0.7, 5, 0.9, 9, 1.15, 1, 10.2, 1, 10.3, 0.85, 1, 8.4, 2.5, 6, 0.4];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), U8 = (n) => new Uint8ClampedArray(n);\n  const S = (params.s = {\n    HT: F32(RN), AL: U8(RN * 3), MT: U8(RN), MK: U8(RN), LI: F32(RN), SQ: F32(RN), GN: new Int32Array(RN), gen: 1,\n    HL: F32(HW * HH), AM: F32(TW * TH * 3), DI: F32(TW * TH * 3), SM: F32(TW * TH), F: F32(N * 3), L: new Float64Array(9), TM: U8(1200), LC: new Float64Array(3),\n    PX: F32(PL), PY: F32(PL), np: PL, acc: 0.01, DX: F32(16), DY: F32(16), DF: F32(16), DO: F32(16), DC: U8(16), BX: F32(256), BY: F32(256), BA: F32(256), bi: 0,\n    lx: 0.01, ly: 0.01, th: 0.01, v: 20, vt: 20, ph: 0.01, t: 0.01, cx: -30, cy: -18, gy: 230, nd: 8, sbx: 0.01, sby: 0.01, sfx: 0.01, sfy: 0.01, ux: 0.01, uy: 0.01, run: 0.01, pt: 15.4,\n    rest: 0, restT: 0.01, turn: 1, turnT: 0.01, k1: -1, k4: 0.06, wind: 0.01, live: 0, cpY: [400, 50], cpX: [0, 0], feat: [], nf: 0, sk: 0,\n  });\n  for (let k = 0; k \u003c PL; k++) S.PY[k] = (PL - 1 - k) * 0.5;\n  for (let i = 0; i \u003c 16; i++) (S.DO[i] = hash(i, 3)), (S.DC[i] = floor(hash(i, 8) * 5));\n  for (let c = 0; c \u003c 1200; c++) S.TM[c] = c \u003c 205 ? c : 205 + 50 * (1 - exp(-(c - 205) / 50));\n  plan(S), plan(S), plan(S);\n  for (let y = 230; y > -53; y--) genRow(S, y);\n  S.gy = -53;\n}\n\n// The trail swings between control points.\nfunction trailX(S, y) {\n  const Y = S.cpY, X = S.cpX;\n  let i = 0;\n  while (i \u003c Y.length - 2 && Y[i + 1] > y) i++;\n  return mix(X[i], X[i + 1], sm(0, 1, (Y[i] - y) / (Y[i] - Y[i + 1])));\n}\n// Each obstacle lies across the way on; the trail swings round its end.\nfunction plan(S) {\n  const Y = S.cpY, X = S.cpX, ly = Y[Y.length - 1], lx = X[X.length - 1];\n  if (S.sk++ % 3 === 2) return Y.push(ly - 60 - 30 * rnd()), X.push(cl(lx + (rnd() - 0.5) * 20, -24, 24));\n  const side = abs(lx) > 6 ? (lx > 0 ? 1 : -1) : rnd() \u003c 0.5 ? 1 : -1, x0 = cl(lx - side * (9 + 5 * rnd()), -30, 30), y0 = ly - 60 - 20 * rnd(), sd = floor(rnd() * 999), ph = rnd() * 6;\n  Y.push(y0, y0 - 60 - 20 * rnd()), X.push(x0, cl(x0 + side * (9 + 6 * rnd()), -24, 24));\n  if (S.nf++ % 2 === 0) {\n    // A pressure ridge, square to the sun.\n    const a = -side * (0.5 + 0.4 * rnd()), len = 60 + 40 * rnd(), dx = side * cos(a), dy = sin(a);\n    S.feat.push({ k: 0, px: x0 + side * 4, py: y0, dx, dy, len, hh: 6 + 4 * rnd(), sd, ph, side, ol: 0, y0: y0 + min(0, dy * len) - 22, y1: y0 + max(0, dy * len) + 22 });\n  } else {\n    // A lead: slope, swing, wave number and width in dx, dy, len, hh.\n    const sl = (rnd() - 0.5) * 0.22, am = 3 + 4 * rnd(), w = 10 + 6 * rnd(), e = abs(sl) * (128 + abs(x0)) + am + w;\n    S.feat.push({ k: 1, px: x0, py: y0, dx: sl, dy: am, len: 0.03 + 0.03 * rnd(), hh: w, sd, ph, side, ol: 40 + 40 * rnd(), y0: y0 - e, y1: y0 + e });\n  }\n}\n\nfunction genRow(S, y) {\n  const o = rw(y), { HT, AL, MT } = S, fs = S.feat.filter((f) => y > f.y0 && y \u003c f.y1);\n  for (let i = 0; i \u003c RX; i++) {\n    // Sastrugi: crests with a long back to the sun and a steep lee face, broken into pieces.\n    const x = i - XO, u = x * GX + y * GY, v = -x * GY + y * GX, c = v * 0.085 + 2.4 * vn(u * 0.012, v * 0.012) + 0.7 * vn(u * 0.045, v * 0.03 + 20), cf = c - floor(c), ci = floor(c);\n    const sa = (cf \u003c 0.25 ? cf / 0.25 : (1 - cf) / 0.75) * sm(0.42, 0.75, vn(u * 0.06 + ci * 7.3, ci * 3.1)) * (0.25 + 0.75 * sm(0.3, 0.6, vn(x * 0.022 + 70, y * 0.022)));\n    let h = 0.95 * sa * sa + 0.15 * vn(u * 0.09 + 50, v * 0.34) + vn(x * 0.017 + 9, y * 0.017) - 0.5;\n    const g = 0.955 + 0.045 * hash(x, y);\n    let ar = 0.9 * g, ag = 0.94 * g, ab = g, mt = 0;\n    for (const f of fs) {\n      if (f.k === 0) {\n        // Tilted slabs, rubble at their feet.\n        const rx = x - f.px, ry = y - f.py, t = rx * f.dx + ry * f.dy;\n        if (t \u003c -8 || t > f.len + 8) continue;\n        const s = abs(ry * f.dx - rx * f.dy - 3 * sin(t * 0.06 + f.ph)), bk = floor(t / 3.4), e = sm(-4, 8, t) * sm(f.len + 4, f.len - 16, t), wb = 2.4 + 2.6 * hash(bk, f.sd + 1), gx = floor(x / 3), gy = floor(y / 3);\n        const hb = f.hh * (0.45 + 0.55 * hash(bk, f.sd)) * e;\n        let hr = hb * (1 - s / wb) + 0.5 * hb * (hash(bk, f.sd + 2) - 0.5) * (t / 3.4 - bk - 0.5), q = hash(bk, f.sd + 3);\n        if (hash(gx, gy + f.sd) \u003c 0.2 * e * sm(wb + 6, wb, s) && 0.8 + 1.4 * hash(gy, gx) > hr) (hr = 0.8 + 1.4 * hash(gy, gx)), (q = hash(gx + 7, gy));\n        if (hr > 0.2 && hr > h - 0.2) (h = max(h, hr) + 0.15), (mt = 1), (ar = mix(0.84, 0.44, q)), (ag = mix(0.93, 0.76, q)), (ab = mix(1, 0.92, q));\n      } else {\n        // A refrozen lead: dark young ice with frost flowers, and open water along part of it.\n        const yc = f.py + f.dx * (x - f.px) + f.dy * sin(x * f.len + f.ph), e = abs(y - yc) / (f.hh * (0.35 + 0.3 * vn(x * 0.045, f.sd)));\n        if (e > 1) {\n          h += 0.7 * max(0, 1.4 - e);\n          continue;\n        }\n        const sx = f.side * (x - f.px), gq = mix(0.14, 0.4, e * e) * (0.85 + 0.3 * vn(x * 0.2, y * 0.2)), fr = hash(x + 3, y) \u003c 0.07 ? 0.35 + 0.3 * hash(y, x) : 0;\n        (h = -0.45), (mt = 2), (ar = gq * 0.9 + fr), (ag = gq * 0.97 + fr), (ab = gq * 1.06 + fr);\n        if (e \u003c 0.8 * sm(5, 10, sx) * sm(f.ol + 10, f.ol, sx)) (mt = 3), (h = -0.6), (ar = 0.03), (ag = 0.07), (ab = 0.11);\n      }\n    }\n    const k = o + i;\n    (HT[k] = h), (AL[k * 3] = ar * 255), (AL[k * 3 + 1] = ag * 255), (AL[k * 3 + 2] = ab * 255), (MT[k] = mt), (S.MK[k] = S.GN[k] = 0);\n  }\n}\n\n// A paw print or runner groove in the snow; young ice takes none.\nfunction stamp(S, x, y, depth, bit) {\n  const i = floor(x + 0.5) + XO, yy = floor(y + 0.5), k = rw(yy) + i, A = S.AL;\n  if (i \u003c 0 || i >= RX || S.MK[k] & bit || S.MT[k] > 1) return;\n  S.MK[k] |= bit;\n  (S.HT[k] -= depth), (A[k * 3] *= 0.93), (A[k * 3 + 1] *= 0.95);\n  // Light it again.\n  for (let j = -2; j \u003c 3; j++) for (let q = max(0, i - 2); q \u003c min(RX, i + 3); q++) S.GN[rw(yy + j) + q] = 0;\n}\n\n// The point s LEDs back along the lead dog's path.\nconst PP = new Float64Array(2);\nfunction pathAt(S, s) {\n  const f = S.acc, last = (S.np - 1) & (PL - 1);\n  if (s \u003c= f) return (PP[0] = mix(S.lx, S.PX[last], s / max(f, 1e-6))), (PP[1] = mix(S.ly, S.PY[last], s / max(f, 1e-6)));\n  const k = (s - f) * 2, i = floor(k), r = k - i, a = (S.np - 1 - i) & (PL - 1), b = (S.np - 2 - i) & (PL - 1);\n  (PP[0] = mix(S.PX[a], S.PX[b], r)), (PP[1] = mix(S.PY[a], S.PY[b], r));\n}\n// Dogs in pairs on the path, the sled behind.\nfunction layout(S) {\n  // Long teams close up to fit the panel.\n  const n = S.nd, odd = n & 1, pt = (S.pt = min(PITCH, 76 / (((n + 1) >> 1) - 1))), sf = (((n + 1) >> 1) - 1) * pt + 8 * Z;\n  for (let i = 0; i \u003c n; i++) {\n    const side = odd && !i ? 0 : (odd ? i - 1 : i) & 1 ? 1 : -1, s = ((i + odd) >> 1) * pt + 0.6 * (S.DO[i] - 0.5) + (side > 0 ? 3.5 * Z : 0);\n    pathAt(S, s - 1);\n    const ax = PP[0], ay = PP[1];\n    pathAt(S, s + 1);\n    const fx = ax - PP[0], fy = ay - PP[1], l = sqrt(fx * fx + fy * fy) || 1;\n    pathAt(S, s);\n    (S.DX[i] = PP[0] - (fy / l) * side * LAT), (S.DY[i] = PP[1] + (fx / l) * side * LAT), (S.DF[i] = atan2(fx / l, -fy / l));\n  }\n  pathAt(S, sf), (S.sfx = PP[0]), (S.sfy = PP[1]);\n  pathAt(S, sf + SLED), (S.sbx = PP[0]), (S.sby = PP[1]);\n  (S.ux = (S.sfx - S.sbx) / SLED), (S.uy = (S.sfy - S.sby) / SLED);\n}\n\nfunction step(S, d, k4) {\n  S.t += d;\n  if (S.rest && (S.restT += d) > 10) S.rest = 0;\n  S.v += ((S.rest ? 0 : S.vt) - S.v) * min(1, d * (S.rest ? 1.6 : 0.9));\n  const v = S.v, rate = 0.065 * v * d;\n  // The lead dog aims 22 LEDs up the trail, or swings on a call.\n  let des = S.turnT > 0 ? ((S.turnT -= d), S.turn * 1.15) : cl(atan2(trailX(S, S.ly - 22) - S.lx, 22), -0.5, 0.5);\n  if (abs(S.lx) > 44) des = S.lx > 0 ? -0.6 : 0.6;\n  S.th += cl(des - S.th, -rate, rate);\n  const dist = v * d, fx = sin(S.th), fy = -cos(S.th), oph = S.ph;\n  (S.lx += fx * dist), (S.ly += fy * dist), (S.acc += dist), (S.ph += dist / STRIDE);\n  for (; S.acc >= 0.5; S.np++) (S.acc -= 0.5), (S.PX[S.np & (PL - 1)] = S.lx - fx * S.acc), (S.PY[S.np & (PL - 1)] = S.ly - fy * S.acc);\n  layout(S);\n  // Each foot leaves a print and each stride a breath; the runners cut grooves.\n  for (let i = 0; i \u003c S.nd; i++) {\n    const a = sin(S.DF[i]), b = -cos(S.DF[i]), o = S.DO[i];\n    for (let l = 0; l \u003c 4; l++) {\n      const fa = (LJ[l] + 1.5) * Z, fb = l & 1 ? Z : -Z;\n      if (floor(S.ph + o + LO[l]) > floor(oph + o + LO[l])) stamp(S, S.DX[i] + a * fa - b * fb, S.DY[i] + b * fa + a * fb, 0.22, 1);\n    }\n    if (floor(S.ph + o * 3) > floor(oph + o * 3)) {\n      const p = S.bi++ & 255;\n      (S.BX[p] = S.DX[i] + a * 4.6 * Z), (S.BY[p] = S.DY[i] + b * 4.6 * Z), (S.BA[p] = 0.01);\n    }\n  }\n  const ux = S.ux, uy = S.uy;\n  for (let e = -1; e \u003c= dist - 0.5; e += 0.5) for (let r = -2 * Z; r \u003c 3 * Z; r += 4 * Z) stamp(S, S.sbx - uy * r + ux * e, S.sby + ux * r + uy * e, 0.3, 2);\n  // The camera keeps the musher at row 118.\n  S.cx += ((S.lx + S.sbx) / 2 - 32 + (S.k1 \u003c 0.6 ? 6 : -6) - S.cx) * min(1, d * 1.5);\n  S.cy = S.sby - 118;\n  while (S.gy > S.cy - 40) genRow(S, --S.gy);\n  while (S.cpY[S.cpY.length - 1] > S.ly - 420) plan(S);\n  while (S.cpY.length > 4 && S.cpY[2] > S.ly + 300) S.cpY.shift(), S.cpX.shift();\n  S.feat = S.feat.filter((f) => f.y0 \u003c S.gy);\n  for (let p = 0, wv = (4 + 60 * k4) * d; p \u003c 256; p++) if (S.BA[p] \u003c 1.5) (S.BA[p] += d), (S.BX[p] += GX * wv), (S.BY[p] += GY * wv);\n  S.wind += (8 + 90 * k4) * d;\n}\n\n// Each leg from the side, joint to knee to foot; the hind pair lands first.\nconst LO = [0.5, 0.58, 0, 0.08], LJ = [1.1, 1.1, -1.9, -1.9], LG = new Float64Array(24);\nfunction legs(ph, run, bob) {\n  for (let l = 0; l \u003c 4; l++) {\n    const p = (((ph + LO[l]) % 1) + 1) % 1, R = 1.8 * run, ja = LJ[l], jh = 2.2 + bob, u = (p - 0.42) / 0.58;\n    const fa = ja + (p \u003c 0.42 ? R * (1 - p / 0.21) : -R + 2 * R * u * u * (3 - 2 * u)), fh = p \u003c 0.42 ? 0 : 0.9 * run * sin(PI * u);\n    const dx = fa - ja, dy = fh - jh, dd = sqrt(dx * dx + dy * dy), k = sqrt(max(0, 1.69 - (dd * dd) / 4)) / max(dd, 0.01), o = l * 6;\n    (LG[o] = ja), (LG[o + 1] = jh), (LG[o + 2] = (ja + fa) / 2 + dy * k), (LG[o + 3] = (jh + fh) / 2 - dx * k), (LG[o + 4] = fa), (LG[o + 5] = fh);\n  }\n}\n// Distance to a capsule; OO keeps the offset for shading.\nconst OO = new Float64Array(2);\nfunction cap(a, b, a0, b0, a1, b1, r) {\n  const pa = a - a0, pb = b - b0, ba = a1 - a0, bb = b1 - b0, t = cl((pa * ba + pb * bb) / (ba * ba + bb * bb + 1e-9), 0, 1), oa = pa - ba * t, ob = pb - bb * t;\n  (OO[0] = oa), (OO[1] = ob);\n  return sqrt(oa * oa + ob * ob) - r;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], k1 = cl(k[0], 0, 1), b = input.btnPressed || [];\n  (S.vt = 10 * cl(k[1], 0.2, 3)), (S.nd = cl(Math.round(k[2]), 8, 14)), (S.k4 = cl(k[3], 0, 1));\n  if (k1 !== S.k1) {\n    // New light: all ice is lit again.\n    let i = 0;\n    while (i \u003c KL.length - 2 && k1 > KL[i + 1][0]) i++;\n    for (let j = 1; j \u003c 9; j++) S.L[j] = mix(KL[i][j], KL[i + 1][j], sm(KL[i][0], KL[i + 1][0], k1));\n    (S.k1 = k1), S.gen++;\n  }\n  for (; !S.live; S.live = S.t > 6 ? 1 : 0) step(S, 1 / 30, S.k4);\n  if (b[0]) (S.turn = S.lx > 0 ? -1 : 1), (S.turnT = 1.6);\n  if (b[1]) (S.rest = 1 - S.rest), (S.restT = 0);\n  step(S, cl(dt || 0, 0, 0.1), S.k4);\n}\n\n// Per frame: the frame, the shadow mask, the light and the LED paint works on.\nlet F, SM, LC, LL, Lx, Ly, cE, sE, PO, La, Lb;\nfunction put(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  (F[o] += (r - F[o]) * a), (F[o + 1] += (g - F[o + 1]) * a), (F[o + 2] += (b - F[o + 2]) * a);\n}\n// Lay a part (distance d, radius r, 0 if flat) of colour c on LED PO.\nfunction paint(d, r, c, f) {\n  const q = cl(0.5 - d * Z, 0, 1) * f, nz = r ? sqrt(max(0, 1 - (OO[0] * OO[0] + OO[1] * OO[1]) / (r * r))) : 1, df = r ? max(0, ((OO[0] * La + OO[1] * Lb) / r) * cE + nz * sE) : sE;\n  if (q > 0) for (let k = 0; k \u003c 3; k++) F[PO + k] += (c[k] * (LL[k + 1] * min(2, df / sE) + LL[k + 4] * (0.55 + 0.45 * nz)) - F[PO + k]) * q;\n}\n// Nearest capsule of side view P; bob lifts the body.\nfunction side(P, a, h, bob) {\n  let d = 99;\n  for (let j = 0; j \u003c P.length; j += 5) d = min(d, cap(a, h, P[j], P[j + 1] + bob, P[j + 2], P[j + 3] + bob, P[j + 4]));\n  return d;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  (F = S.F), (SM = S.SM), (LC = S.LC), (LL = S.L);\n  const { HL, HT, AL, MT, AM, DI, L, TM, LI, SQ, GN, cx, cy, t, k4, gen, nd: n } = S, run = (S.run = cl(S.v / 6, 0, 1));\n  // Sun in the upper left, moon in the upper right.\n  const night = S.k1 > 0.6, lx = (Lx = night ? 0.85 : -0.8), ly = (Ly = night ? -0.53 : -0.6), te = L[7], aur = L[8];\n  (cE = 1 / sqrt(1 + te * te)), (sE = te * cE);\n  const dON = L[1] + L[2] + L[3] > 3, Kx = -lx / te, Ky = -ly / te, ox = floor(cx), oy = floor(cy), fx = cx - ox, fy = cy - oy;\n  let hmax = -9, hmin = 9;\n  for (let j = 0, q = 0; j \u003c HH; j++)\n    for (let i = 0, ro = rw(oy - MY + j); i \u003c HW; i++, q++) {\n      const h = (HL[q] = HT[ro + cl(ox - MX + i + XO, 0, RX - 1)]);\n      (hmax = max(hmax, h)), (hmin = min(hmin, h));\n    }\n  const ms = min(46, floor((hmax - hmin) / te) + 1);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0, ro = rw(oy + ty); tx \u003c TW; tx++) {\n      const wi = ro + cl(ox + tx + XO, 0, RX - 1);\n      // Ice keeps its light until the light or the ice changes.\n      if (GN[wi] !== gen) {\n        const k = (ty + MY) * HW + tx + MX, h = HL[k], gx = (HL[k + 1] - HL[k - 1]) * 0.7, gy = (HL[k + HW] - HL[k - HW]) * 0.7;\n        const inv = 1 / sqrt(gx * gx + gy * gy + 1), dif = (-gx * lx * cE - gy * ly * cE + sE) * inv;\n        let lt = 0;\n        if (dif > 0 && dON) {\n          let px = tx + MX + 0.5, py = ty + MY + 0.5, rh = h, oc = -1;\n          for (let s = 0; s \u003c ms && rh \u003c= hmax; s++) (px += lx), (py += ly), (rh += te), (oc = max(oc, HL[(py | 0) * HW + (px | 0)] - rh));\n          lt = min(2.2, dif / sE) * (1 - sm(-0.15, 0.3, oc));\n        }\n        // Slopes facing the light's side of the sky catch more sky.\n        const cav = cl(((HL[k - 1] + HL[k + 1] + HL[k - HW] + HL[k + HW]) * 0.25 - h) * 0.6, -0.15, 0.3), nh = cl((-gx * lx - gy * ly) * inv * 2.5, -0.6, 0.6);\n        (LI[wi] = lt), (SQ[wi] = (0.6 + 0.4 * inv) * (1 - cav) * (1 + 0.5 * nh)), (GN[wi] = gen);\n      }\n      // Aurora light; young ice and water mirror the sky.\n      const sk = SQ[wi], mt = MT[wi], o = (ty * TW + tx) * 3, lit = LI[wi] * (mt === 3 ? 0.1 : 1);\n      const eg = aur > 0 ? aur * 100 * (0.5 + 0.5 * sin((ox + tx) * 0.05 + (oy + ty) * 0.013 + 1.4 * sin((oy + ty) * 0.021 - t * 0.2) + t * 0.3)) ** 8 : 0;\n      const rf = mt > 1 ? 0.3 : 0;\n      for (let c = 0; c \u003c 3; c++) (AM[o + c] = (AL[wi * 3 + c] / 255) * (L[4 + c] * sk + eg * (c === 1 ? 1 : 0.15)) + rf * L[4 + c]), (DI[o + c] = (AL[wi * 3 + c] / 255) * L[1 + c] * lit);\n    }\n\n  // Shadows: each side view thrown along the snow.\n  SM.fill(0);\n  const ux = S.ux, uy = S.uy;\n  for (let i = 0; i \u003c n && dON; i++) {\n    const a = S.DF[i], ph = S.ph + S.DO[i], bob = 0.22 * run * sin(2 * PI * ph);\n    legs(ph, run, bob);\n    shadowOf(S.DX[i] - cx + fx, S.DY[i] - cy + fy, sin(a), -cos(a), Kx, Ky, 4.6, 5.6, DOG, bob, 1);\n  }\n  if (dON) shadowOf(S.sbx - cx + fx, S.sby - cy + fy, ux, uy, Kx, Ky, 16, 11, SLD, 0, 0);\n  // Snow between grid points, shadows taken out.\n  for (let i = 0, o = 0; i \u003c TW * TH; i++) for (let c = 0, s = 1 - 0.55 * SM[i]; c \u003c 3; c++, o++) AM[o] += DI[o] * s;\n  const w00 = (1 - fx) * (1 - fy), w10 = fx * (1 - fy), w01 = (1 - fx) * fy, w11 = fx * fy;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, q = y * TW * 3; x \u003c W; x++) for (let c = 0; c \u003c 3; c++, p++, q++) F[p] = w00 * AM[q] + w10 * AM[q + 3] + w01 * AM[q + TW * 3] + w11 * AM[q + TW * 3 + 3];\n\n  // Spindrift, under the dogs.\n  for (let c = 0; c \u003c 3; c++) LC[c] = L[4 + c] * 0.8 + L[1 + c] * 0.9;\n  if (k4 > 0.01) {\n    const th = 0.68 - 0.36 * k4, hz = 0.24 * k4 * k4;\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const wx = x + cx, wy = y + cy, al = wx * GX + wy * GY - S.wind, ac = -wx * GY + wy * GX, n1 = 0.62 * vn(al * 0.055, ac * 0.325);\n        if (n1 + 0.38 \u003c th && hz \u003c 0.004) continue;\n        const q = sm(th, th + 0.25, n1 + 0.38 * vn(al * 0.125 + 17, ac * 0.65 + 5)) * (0.4 + 0.6 * k4) * 0.9 + hz, p = i * 3;\n        for (let c = 0; c \u003c 3; c++) F[p + c] += ((LC[c] + 25 + 7.5 * c) * 1.1 - F[p + c]) * q;\n      }\n  }\n  // The team, then breath.\n  gangline(S);\n  for (let i = 0; i \u003c n; i++) dog(S, i);\n  sled(S.sbx - cx, S.sby - cy, ux, uy);\n  for (let p = 0; p \u003c 256; p++) {\n    const ag = S.BA[p], bx = S.BX[p] - cx, by = S.BY[p] - cy, r = 0.7 + ag * (1.2 + k4), al = 0.32 * (1 - ag / 1.5) * (1 - 0.5 * k4);\n    for (let y = floor(by - r); y \u003c= by + r && ag \u003c 1.5; y++)\n      for (let x = floor(bx - r); x \u003c= bx + r; x++) put(x, y, LC[0] * 1.15, LC[1] * 1.15, LC[2] * 1.15, al * (1 - ((x + 0.5 - bx) ** 2 + (y + 0.5 - by) ** 2) / (r * r)));\n  }\n  const tm = (v) => TM[min(1199, v | 0)];\n  for (let i = 0, p = 0; i \u003c N; i++, p += 3) display.setPixel(i & 63, i >> 6, tm(F[p]), tm(F[p + 1]), tm(F[p + 2]));\n}\n\n// A shadow: each grid point maps back to (a, h) in side view P.\nfunction shadowOf(x, y, Fx, Fy, Kx, Ky, A, Hh, P, bob, withLegs) {\n  const det = Fx * Ky - Fy * Kx, ax = abs(Fx) * A * Z, ay = abs(Fy) * A * Z, hx = Kx * Hh * Z, hy = Ky * Hh * Z;\n  for (let py = max(0, floor(y - ay + min(0, hy))); py \u003c= min(TH - 1, y + ay + max(0, hy)) && abs(det) > 0.05; py++)\n    for (let px = max(0, floor(x - ax + min(0, hx))); px \u003c= min(TW - 1, x + ax + max(0, hx)); px++) {\n      const rx = (px + 0.5 - x) / Z, ry = (py + 0.5 - y) / Z, a = (rx * Ky - ry * Kx) / det, h = (Fx * ry - Fy * rx) / det, i = py * TW + px;\n      if (h \u003c -0.6 || h > Hh || a \u003c -A || a > A) continue;\n      let d = side(P, a, h, bob);\n      for (let o = 0; o \u003c 24 && withLegs && h \u003c 3.2; o += 6) if (abs(a - LG[o + 2]) \u003c 2.2) d = min(d, cap(a, h, LG[o], LG[o + 1], LG[o + 2], LG[o + 3], 0.36), cap(a, h, LG[o + 2], LG[o + 3], LG[o + 4], LG[o + 5], 0.28));\n      SM[i] = max(SM[i], cl(0.6 - d * 1.4 * Z, 0, 1));\n    }\n}\n// The gangline, in soft dots from the lead dog to the sled.\nfunction gangline(S) {\n  for (let s = (S.nd & 1 ? 2.6 : -1) * Z; s \u003c (((S.nd + 1) >> 1) - 1) * S.pt + 8 * Z; s += 0.6) {\n    pathAt(S, s);\n    const x = PP[0] - S.cx - 0.5, y = PP[1] - S.cy - 0.5;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = floor(x) + (j & 1), Y = floor(y) + (j >> 1);\n      put(X, Y, LINE[0] * LC[0], LINE[1] * LC[1], LINE[2] * LC[2], 0.45 * (1 - abs(x - X)) * (1 - abs(y - Y)));\n    }\n  }\n}\n\n// A dog from above: legs, saddle, harness, neck, head, curled tail.\nfunction dog(S, i) {\n  const x = S.DX[i] - S.cx, y = S.DY[i] - S.cy, an = S.DF[i], Fx = sin(an), Fy = -cos(an), ph = S.ph + S.DO[i], [BK, SD, FC] = COAT[S.DC[i]], ext = sin(2 * PI * ph) * S.run, ts = i & 1 ? 1 : -1;\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  legs(ph, S.run, 0);\n  for (let py = max(0, floor(y - 5.4 * Z)); py \u003c= min(H - 1, y + 5.4 * Z); py++)\n    for (let px = max(0, floor(x - 5.4 * Z)); px \u003c= min(W - 1, x + 5.4 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx;\n      if (a * a + b * b > 30) continue;\n      PO = (py * W + px) * 3;\n      for (let l = 0; l \u003c 24; l += 6) paint(cap(a, b, LG[l], l % 12 ? 0.85 : -0.85, LG[l + 4], l % 12 ? 0.95 : -0.95, 0.38), 0.38, SD, 1);\n      const d = cap(a, b, -2.1 - 0.25 * ext, 0, 1.1 + 0.15 * ext, 0, 1.12), q = cl(0.5 - d * Z, 0, 1);\n      paint(d, 1.12, SD, 1);\n      if (q > 0) paint(d, 1.12, BK, sm(0.85, 0.35, abs(OO[1])) * q), abs(a - 0.7) \u003c 0.45 && paint(d, 1.12, HARN, q);\n      paint(cap(a, b, 1.4, 0, 2.7, 0, 0.55), 0.55, SD, 1);\n      paint(cap(a, b, 3, 0, 3.3, 0, 0.8), 0.8, FC, 1);\n      paint(cap(a, b, 3.5, 0, 4.4, 0, 0.42), 0.42, FC, 1);\n      paint(cap(a, b, -2.2, ts * 0.35, -2.2, ts * 0.35, 0.75), 0.75, FC, 1);\n    }\n}\n\n// The sled: runners, slats, load, handlebar, the musher.\nfunction sled(x, y, Fx, Fy) {\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  for (let py = max(0, floor(y - 17 * Z)); py \u003c= min(H - 1, y + 17 * Z); py++)\n    for (let px = max(0, floor(x - 17 * Z)); px \u003c= min(W - 1, x + 17 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx, ab = abs(b);\n      if (a \u003c -3 || a > 16 || ab > 3.2) continue;\n      PO = (py * W + px) * 3;\n      paint(cap(a, ab, -2.2, 2, 14.6, 2, 0.4), 0, DARK, 1);\n      paint(max(ab - 1.7, abs(a - 8.4) - 5.6), 0, a % 1.6 \u003c 1.1 ? WOOD : DARK, 1);\n      paint(max(ab - 1.3, abs(a - 8.7) - 3.2) - 0.25, 0, LOAD, 1);\n      paint(cap(a, b, 2.7, -2.3, 2.7, 2.3, 0.35), 0, DARK, 1);\n      paint(cap(a, b, 0.7, -1.4, 0.7, 1.4, 1), 1, RED, 1);\n      paint(cap(a, b, 1, 0, 1, 0, 1.1), 1.1, FUR, 1);\n    }\n}\n","layer":{"id":"layer-sled-dogs","type":"code","name":"sled-dogs","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sled Dogs\n// Family:  polar\n// Idea:    Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after dog-sled teams on Arctic sea ice, here in pairs on a gangline (the tandem hitch) rather than the fan hitch used in Greenland\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1\n//\n// Knob 1: Light. A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow.\n// Knob 2: Speed. At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower.\n// Knob 3: Dogs. Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front.\n// Knob 4: Wind. Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice.\n// Buttons: K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.\n\nconst W = 64, H = 128, N = W * H;\n// The ice: a ring of world rows, x from -128 to 127.\nconst RX = 256, XO = 128, RY = 256, RN = RX * RY;\n// The shading grid and the window of heights around it.\nconst TW = 65, TH = 129, MX = 48, MY = 30, HW = TW + 2 * MX, HH = TH + 2 * MY;\n// Dogs are drawn in sixths of a metre, grown by Z.\nconst Z = 1.4, PITCH = 11 * Z, LAT = 2.5 * Z, STRIDE = 9 * Z, SLED = 15 * Z, PL = 1024;\nconst { min, max, floor, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rw = (y) => (((y % RY) + RY) % RY) * RX;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// The prevailing wind, which the sastrugi follow.\nconst GX = -0.8, GY = 0.6;\n// K1 stops: direct rgb, sky rgb, tan of elevation, aurora.\nconst KL = [\n  [0, 208, 146, 56, 64, 94, 160, 0.3, 0],\n  [0.33, 205, 122, 44, 60, 80, 142, 0.17, 0],\n  [0.6, 0, 0, 0, 84, 112, 186, 0.2, 0],\n  [1, 52, 64, 92, 12, 22, 52, 0.32, 1],\n].map((k) => Float64Array.from(k));\n// Coats from above, dark with a light face: black, grey, red, sable, black.\nconst COAT = [\n  [28, 26, 30, 64, 60, 60, 236, 232, 228],\n  [64, 62, 66, 112, 108, 104, 226, 222, 214],\n  [110, 56, 26, 150, 92, 50, 236, 220, 198],\n  [58, 42, 28, 104, 80, 56, 232, 216, 192],\n  [24, 22, 22, 44, 40, 38, 220, 214, 206],\n].map((c) => [0, 3, 6].map((j) => Float64Array.from(c.slice(j, j + 3), (v) => v / 255)));\nconst HARN = [1, 0.5, 0.04], LINE = [0.2, 0.17, 0.22], WOOD = [0.62, 0.46, 0.3], DARK = [0.26, 0.18, 0.12], LOAD = [0.44, 0.34, 0.24], RED = [0.78, 0.15, 0.1], FUR = [0.74, 0.66, 0.54];\n// Side views as capsules (a, h, a, h, r): a dog; the sled and musher.\nconst DOG = [-2, 2.75, 1.2, 2.95, 0.82, 1.2, 3.2, 2.7, 3.95, 0.6, 2.7, 3.95, 3.9, 3.65, 0.42, 2.55, 4.4, 2.7, 5, 0.22, -2.2, 3.2, -2.6, 4.2, 0.42, -2.6, 4.2, -1.8, 4.7, 0.36];\nconst SLD = [-1.5, 0.8, 14.5, 0.8, 0.55, 5.5, 1.8, 11.5, 1.8, 1, 2.6, 0.8, 2.6, 5.8, 0.3, 0.45, 0, 0.7, 5, 0.6, 0.7, 5, 0.9, 9, 1.15, 1, 10.2, 1, 10.3, 0.85, 1, 8.4, 2.5, 6, 0.4];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), U8 = (n) => new Uint8ClampedArray(n);\n  const S = (params.s = {\n    HT: F32(RN), AL: U8(RN * 3), MT: U8(RN), MK: U8(RN), LI: F32(RN), SQ: F32(RN), GN: new Int32Array(RN), gen: 1,\n    HL: F32(HW * HH), AM: F32(TW * TH * 3), DI: F32(TW * TH * 3), SM: F32(TW * TH), F: F32(N * 3), L: new Float64Array(9), TM: U8(1200), LC: new Float64Array(3),\n    PX: F32(PL), PY: F32(PL), np: PL, acc: 0.01, DX: F32(16), DY: F32(16), DF: F32(16), DO: F32(16), DC: U8(16), BX: F32(256), BY: F32(256), BA: F32(256), bi: 0,\n    lx: 0.01, ly: 0.01, th: 0.01, v: 20, vt: 20, ph: 0.01, t: 0.01, cx: -30, cy: -18, gy: 230, nd: 8, sbx: 0.01, sby: 0.01, sfx: 0.01, sfy: 0.01, ux: 0.01, uy: 0.01, run: 0.01, pt: 15.4,\n    rest: 0, restT: 0.01, turn: 1, turnT: 0.01, k1: -1, k4: 0.06, wind: 0.01, live: 0, cpY: [400, 50], cpX: [0, 0], feat: [], nf: 0, sk: 0,\n  });\n  for (let k = 0; k \u003c PL; k++) S.PY[k] = (PL - 1 - k) * 0.5;\n  for (let i = 0; i \u003c 16; i++) (S.DO[i] = hash(i, 3)), (S.DC[i] = floor(hash(i, 8) * 5));\n  for (let c = 0; c \u003c 1200; c++) S.TM[c] = c \u003c 205 ? c : 205 + 50 * (1 - exp(-(c - 205) / 50));\n  plan(S), plan(S), plan(S);\n  for (let y = 230; y > -53; y--) genRow(S, y);\n  S.gy = -53;\n}\n\n// The trail swings between control points.\nfunction trailX(S, y) {\n  const Y = S.cpY, X = S.cpX;\n  let i = 0;\n  while (i \u003c Y.length - 2 && Y[i + 1] > y) i++;\n  return mix(X[i], X[i + 1], sm(0, 1, (Y[i] - y) / (Y[i] - Y[i + 1])));\n}\n// Each obstacle lies across the way on; the trail swings round its end.\nfunction plan(S) {\n  const Y = S.cpY, X = S.cpX, ly = Y[Y.length - 1], lx = X[X.length - 1];\n  if (S.sk++ % 3 === 2) return Y.push(ly - 60 - 30 * rnd()), X.push(cl(lx + (rnd() - 0.5) * 20, -24, 24));\n  const side = abs(lx) > 6 ? (lx > 0 ? 1 : -1) : rnd() \u003c 0.5 ? 1 : -1, x0 = cl(lx - side * (9 + 5 * rnd()), -30, 30), y0 = ly - 60 - 20 * rnd(), sd = floor(rnd() * 999), ph = rnd() * 6;\n  Y.push(y0, y0 - 60 - 20 * rnd()), X.push(x0, cl(x0 + side * (9 + 6 * rnd()), -24, 24));\n  if (S.nf++ % 2 === 0) {\n    // A pressure ridge, square to the sun.\n    const a = -side * (0.5 + 0.4 * rnd()), len = 60 + 40 * rnd(), dx = side * cos(a), dy = sin(a);\n    S.feat.push({ k: 0, px: x0 + side * 4, py: y0, dx, dy, len, hh: 6 + 4 * rnd(), sd, ph, side, ol: 0, y0: y0 + min(0, dy * len) - 22, y1: y0 + max(0, dy * len) + 22 });\n  } else {\n    // A lead: slope, swing, wave number and width in dx, dy, len, hh.\n    const sl = (rnd() - 0.5) * 0.22, am = 3 + 4 * rnd(), w = 10 + 6 * rnd(), e = abs(sl) * (128 + abs(x0)) + am + w;\n    S.feat.push({ k: 1, px: x0, py: y0, dx: sl, dy: am, len: 0.03 + 0.03 * rnd(), hh: w, sd, ph, side, ol: 40 + 40 * rnd(), y0: y0 - e, y1: y0 + e });\n  }\n}\n\nfunction genRow(S, y) {\n  const o = rw(y), { HT, AL, MT } = S, fs = S.feat.filter((f) => y > f.y0 && y \u003c f.y1);\n  for (let i = 0; i \u003c RX; i++) {\n    // Sastrugi: crests with a long back to the sun and a steep lee face, broken into pieces.\n    const x = i - XO, u = x * GX + y * GY, v = -x * GY + y * GX, c = v * 0.085 + 2.4 * vn(u * 0.012, v * 0.012) + 0.7 * vn(u * 0.045, v * 0.03 + 20), cf = c - floor(c), ci = floor(c);\n    const sa = (cf \u003c 0.25 ? cf / 0.25 : (1 - cf) / 0.75) * sm(0.42, 0.75, vn(u * 0.06 + ci * 7.3, ci * 3.1)) * (0.25 + 0.75 * sm(0.3, 0.6, vn(x * 0.022 + 70, y * 0.022)));\n    let h = 0.95 * sa * sa + 0.15 * vn(u * 0.09 + 50, v * 0.34) + vn(x * 0.017 + 9, y * 0.017) - 0.5;\n    const g = 0.955 + 0.045 * hash(x, y);\n    let ar = 0.9 * g, ag = 0.94 * g, ab = g, mt = 0;\n    for (const f of fs) {\n      if (f.k === 0) {\n        // Tilted slabs, rubble at their feet.\n        const rx = x - f.px, ry = y - f.py, t = rx * f.dx + ry * f.dy;\n        if (t \u003c -8 || t > f.len + 8) continue;\n        const s = abs(ry * f.dx - rx * f.dy - 3 * sin(t * 0.06 + f.ph)), bk = floor(t / 3.4), e = sm(-4, 8, t) * sm(f.len + 4, f.len - 16, t), wb = 2.4 + 2.6 * hash(bk, f.sd + 1), gx = floor(x / 3), gy = floor(y / 3);\n        const hb = f.hh * (0.45 + 0.55 * hash(bk, f.sd)) * e;\n        let hr = hb * (1 - s / wb) + 0.5 * hb * (hash(bk, f.sd + 2) - 0.5) * (t / 3.4 - bk - 0.5), q = hash(bk, f.sd + 3);\n        if (hash(gx, gy + f.sd) \u003c 0.2 * e * sm(wb + 6, wb, s) && 0.8 + 1.4 * hash(gy, gx) > hr) (hr = 0.8 + 1.4 * hash(gy, gx)), (q = hash(gx + 7, gy));\n        if (hr > 0.2 && hr > h - 0.2) (h = max(h, hr) + 0.15), (mt = 1), (ar = mix(0.84, 0.44, q)), (ag = mix(0.93, 0.76, q)), (ab = mix(1, 0.92, q));\n      } else {\n        // A refrozen lead: dark young ice with frost flowers, and open water along part of it.\n        const yc = f.py + f.dx * (x - f.px) + f.dy * sin(x * f.len + f.ph), e = abs(y - yc) / (f.hh * (0.35 + 0.3 * vn(x * 0.045, f.sd)));\n        if (e > 1) {\n          h += 0.7 * max(0, 1.4 - e);\n          continue;\n        }\n        const sx = f.side * (x - f.px), gq = mix(0.14, 0.4, e * e) * (0.85 + 0.3 * vn(x * 0.2, y * 0.2)), fr = hash(x + 3, y) \u003c 0.07 ? 0.35 + 0.3 * hash(y, x) : 0;\n        (h = -0.45), (mt = 2), (ar = gq * 0.9 + fr), (ag = gq * 0.97 + fr), (ab = gq * 1.06 + fr);\n        if (e \u003c 0.8 * sm(5, 10, sx) * sm(f.ol + 10, f.ol, sx)) (mt = 3), (h = -0.6), (ar = 0.03), (ag = 0.07), (ab = 0.11);\n      }\n    }\n    const k = o + i;\n    (HT[k] = h), (AL[k * 3] = ar * 255), (AL[k * 3 + 1] = ag * 255), (AL[k * 3 + 2] = ab * 255), (MT[k] = mt), (S.MK[k] = S.GN[k] = 0);\n  }\n}\n\n// A paw print or runner groove in the snow; young ice takes none.\nfunction stamp(S, x, y, depth, bit) {\n  const i = floor(x + 0.5) + XO, yy = floor(y + 0.5), k = rw(yy) + i, A = S.AL;\n  if (i \u003c 0 || i >= RX || S.MK[k] & bit || S.MT[k] > 1) return;\n  S.MK[k] |= bit;\n  (S.HT[k] -= depth), (A[k * 3] *= 0.93), (A[k * 3 + 1] *= 0.95);\n  // Light it again.\n  for (let j = -2; j \u003c 3; j++) for (let q = max(0, i - 2); q \u003c min(RX, i + 3); q++) S.GN[rw(yy + j) + q] = 0;\n}\n\n// The point s LEDs back along the lead dog's path.\nconst PP = new Float64Array(2);\nfunction pathAt(S, s) {\n  const f = S.acc, last = (S.np - 1) & (PL - 1);\n  if (s \u003c= f) return (PP[0] = mix(S.lx, S.PX[last], s / max(f, 1e-6))), (PP[1] = mix(S.ly, S.PY[last], s / max(f, 1e-6)));\n  const k = (s - f) * 2, i = floor(k), r = k - i, a = (S.np - 1 - i) & (PL - 1), b = (S.np - 2 - i) & (PL - 1);\n  (PP[0] = mix(S.PX[a], S.PX[b], r)), (PP[1] = mix(S.PY[a], S.PY[b], r));\n}\n// Dogs in pairs on the path, the sled behind.\nfunction layout(S) {\n  // Long teams close up to fit the panel.\n  const n = S.nd, odd = n & 1, pt = (S.pt = min(PITCH, 76 / (((n + 1) >> 1) - 1))), sf = (((n + 1) >> 1) - 1) * pt + 8 * Z;\n  for (let i = 0; i \u003c n; i++) {\n    const side = odd && !i ? 0 : (odd ? i - 1 : i) & 1 ? 1 : -1, s = ((i + odd) >> 1) * pt + 0.6 * (S.DO[i] - 0.5) + (side > 0 ? 3.5 * Z : 0);\n    pathAt(S, s - 1);\n    const ax = PP[0], ay = PP[1];\n    pathAt(S, s + 1);\n    const fx = ax - PP[0], fy = ay - PP[1], l = sqrt(fx * fx + fy * fy) || 1;\n    pathAt(S, s);\n    (S.DX[i] = PP[0] - (fy / l) * side * LAT), (S.DY[i] = PP[1] + (fx / l) * side * LAT), (S.DF[i] = atan2(fx / l, -fy / l));\n  }\n  pathAt(S, sf), (S.sfx = PP[0]), (S.sfy = PP[1]);\n  pathAt(S, sf + SLED), (S.sbx = PP[0]), (S.sby = PP[1]);\n  (S.ux = (S.sfx - S.sbx) / SLED), (S.uy = (S.sfy - S.sby) / SLED);\n}\n\nfunction step(S, d, k4) {\n  S.t += d;\n  if (S.rest && (S.restT += d) > 10) S.rest = 0;\n  S.v += ((S.rest ? 0 : S.vt) - S.v) * min(1, d * (S.rest ? 1.6 : 0.9));\n  const v = S.v, rate = 0.065 * v * d;\n  // The lead dog aims 22 LEDs up the trail, or swings on a call.\n  let des = S.turnT > 0 ? ((S.turnT -= d), S.turn * 1.15) : cl(atan2(trailX(S, S.ly - 22) - S.lx, 22), -0.5, 0.5);\n  if (abs(S.lx) > 44) des = S.lx > 0 ? -0.6 : 0.6;\n  S.th += cl(des - S.th, -rate, rate);\n  const dist = v * d, fx = sin(S.th), fy = -cos(S.th), oph = S.ph;\n  (S.lx += fx * dist), (S.ly += fy * dist), (S.acc += dist), (S.ph += dist / STRIDE);\n  for (; S.acc >= 0.5; S.np++) (S.acc -= 0.5), (S.PX[S.np & (PL - 1)] = S.lx - fx * S.acc), (S.PY[S.np & (PL - 1)] = S.ly - fy * S.acc);\n  layout(S);\n  // Each foot leaves a print and each stride a breath; the runners cut grooves.\n  for (let i = 0; i \u003c S.nd; i++) {\n    const a = sin(S.DF[i]), b = -cos(S.DF[i]), o = S.DO[i];\n    for (let l = 0; l \u003c 4; l++) {\n      const fa = (LJ[l] + 1.5) * Z, fb = l & 1 ? Z : -Z;\n      if (floor(S.ph + o + LO[l]) > floor(oph + o + LO[l])) stamp(S, S.DX[i] + a * fa - b * fb, S.DY[i] + b * fa + a * fb, 0.22, 1);\n    }\n    if (floor(S.ph + o * 3) > floor(oph + o * 3)) {\n      const p = S.bi++ & 255;\n      (S.BX[p] = S.DX[i] + a * 4.6 * Z), (S.BY[p] = S.DY[i] + b * 4.6 * Z), (S.BA[p] = 0.01);\n    }\n  }\n  const ux = S.ux, uy = S.uy;\n  for (let e = -1; e \u003c= dist - 0.5; e += 0.5) for (let r = -2 * Z; r \u003c 3 * Z; r += 4 * Z) stamp(S, S.sbx - uy * r + ux * e, S.sby + ux * r + uy * e, 0.3, 2);\n  // The camera keeps the musher at row 118.\n  S.cx += ((S.lx + S.sbx) / 2 - 32 + (S.k1 \u003c 0.6 ? 6 : -6) - S.cx) * min(1, d * 1.5);\n  S.cy = S.sby - 118;\n  while (S.gy > S.cy - 40) genRow(S, --S.gy);\n  while (S.cpY[S.cpY.length - 1] > S.ly - 420) plan(S);\n  while (S.cpY.length > 4 && S.cpY[2] > S.ly + 300) S.cpY.shift(), S.cpX.shift();\n  S.feat = S.feat.filter((f) => f.y0 \u003c S.gy);\n  for (let p = 0, wv = (4 + 60 * k4) * d; p \u003c 256; p++) if (S.BA[p] \u003c 1.5) (S.BA[p] += d), (S.BX[p] += GX * wv), (S.BY[p] += GY * wv);\n  S.wind += (8 + 90 * k4) * d;\n}\n\n// Each leg from the side, joint to knee to foot; the hind pair lands first.\nconst LO = [0.5, 0.58, 0, 0.08], LJ = [1.1, 1.1, -1.9, -1.9], LG = new Float64Array(24);\nfunction legs(ph, run, bob) {\n  for (let l = 0; l \u003c 4; l++) {\n    const p = (((ph + LO[l]) % 1) + 1) % 1, R = 1.8 * run, ja = LJ[l], jh = 2.2 + bob, u = (p - 0.42) / 0.58;\n    const fa = ja + (p \u003c 0.42 ? R * (1 - p / 0.21) : -R + 2 * R * u * u * (3 - 2 * u)), fh = p \u003c 0.42 ? 0 : 0.9 * run * sin(PI * u);\n    const dx = fa - ja, dy = fh - jh, dd = sqrt(dx * dx + dy * dy), k = sqrt(max(0, 1.69 - (dd * dd) / 4)) / max(dd, 0.01), o = l * 6;\n    (LG[o] = ja), (LG[o + 1] = jh), (LG[o + 2] = (ja + fa) / 2 + dy * k), (LG[o + 3] = (jh + fh) / 2 - dx * k), (LG[o + 4] = fa), (LG[o + 5] = fh);\n  }\n}\n// Distance to a capsule; OO keeps the offset for shading.\nconst OO = new Float64Array(2);\nfunction cap(a, b, a0, b0, a1, b1, r) {\n  const pa = a - a0, pb = b - b0, ba = a1 - a0, bb = b1 - b0, t = cl((pa * ba + pb * bb) / (ba * ba + bb * bb + 1e-9), 0, 1), oa = pa - ba * t, ob = pb - bb * t;\n  (OO[0] = oa), (OO[1] = ob);\n  return sqrt(oa * oa + ob * ob) - r;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], k1 = cl(k[0], 0, 1), b = input.btnPressed || [];\n  (S.vt = 10 * cl(k[1], 0.2, 3)), (S.nd = cl(Math.round(k[2]), 8, 14)), (S.k4 = cl(k[3], 0, 1));\n  if (k1 !== S.k1) {\n    // New light: all ice is lit again.\n    let i = 0;\n    while (i \u003c KL.length - 2 && k1 > KL[i + 1][0]) i++;\n    for (let j = 1; j \u003c 9; j++) S.L[j] = mix(KL[i][j], KL[i + 1][j], sm(KL[i][0], KL[i + 1][0], k1));\n    (S.k1 = k1), S.gen++;\n  }\n  for (; !S.live; S.live = S.t > 6 ? 1 : 0) step(S, 1 / 30, S.k4);\n  if (b[0]) (S.turn = S.lx > 0 ? -1 : 1), (S.turnT = 1.6);\n  if (b[1]) (S.rest = 1 - S.rest), (S.restT = 0);\n  step(S, cl(dt || 0, 0, 0.1), S.k4);\n}\n\n// Per frame: the frame, the shadow mask, the light and the LED paint works on.\nlet F, SM, LC, LL, Lx, Ly, cE, sE, PO, La, Lb;\nfunction put(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  (F[o] += (r - F[o]) * a), (F[o + 1] += (g - F[o + 1]) * a), (F[o + 2] += (b - F[o + 2]) * a);\n}\n// Lay a part (distance d, radius r, 0 if flat) of colour c on LED PO.\nfunction paint(d, r, c, f) {\n  const q = cl(0.5 - d * Z, 0, 1) * f, nz = r ? sqrt(max(0, 1 - (OO[0] * OO[0] + OO[1] * OO[1]) / (r * r))) : 1, df = r ? max(0, ((OO[0] * La + OO[1] * Lb) / r) * cE + nz * sE) : sE;\n  if (q > 0) for (let k = 0; k \u003c 3; k++) F[PO + k] += (c[k] * (LL[k + 1] * min(2, df / sE) + LL[k + 4] * (0.55 + 0.45 * nz)) - F[PO + k]) * q;\n}\n// Nearest capsule of side view P; bob lifts the body.\nfunction side(P, a, h, bob) {\n  let d = 99;\n  for (let j = 0; j \u003c P.length; j += 5) d = min(d, cap(a, h, P[j], P[j + 1] + bob, P[j + 2], P[j + 3] + bob, P[j + 4]));\n  return d;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  (F = S.F), (SM = S.SM), (LC = S.LC), (LL = S.L);\n  const { HL, HT, AL, MT, AM, DI, L, TM, LI, SQ, GN, cx, cy, t, k4, gen, nd: n } = S, run = (S.run = cl(S.v / 6, 0, 1));\n  // Sun in the upper left, moon in the upper right.\n  const night = S.k1 > 0.6, lx = (Lx = night ? 0.85 : -0.8), ly = (Ly = night ? -0.53 : -0.6), te = L[7], aur = L[8];\n  (cE = 1 / sqrt(1 + te * te)), (sE = te * cE);\n  const dON = L[1] + L[2] + L[3] > 3, Kx = -lx / te, Ky = -ly / te, ox = floor(cx), oy = floor(cy), fx = cx - ox, fy = cy - oy;\n  let hmax = -9, hmin = 9;\n  for (let j = 0, q = 0; j \u003c HH; j++)\n    for (let i = 0, ro = rw(oy - MY + j); i \u003c HW; i++, q++) {\n      const h = (HL[q] = HT[ro + cl(ox - MX + i + XO, 0, RX - 1)]);\n      (hmax = max(hmax, h)), (hmin = min(hmin, h));\n    }\n  const ms = min(46, floor((hmax - hmin) / te) + 1);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0, ro = rw(oy + ty); tx \u003c TW; tx++) {\n      const wi = ro + cl(ox + tx + XO, 0, RX - 1);\n      // Ice keeps its light until the light or the ice changes.\n      if (GN[wi] !== gen) {\n        const k = (ty + MY) * HW + tx + MX, h = HL[k], gx = (HL[k + 1] - HL[k - 1]) * 0.7, gy = (HL[k + HW] - HL[k - HW]) * 0.7;\n        const inv = 1 / sqrt(gx * gx + gy * gy + 1), dif = (-gx * lx * cE - gy * ly * cE + sE) * inv;\n        let lt = 0;\n        if (dif > 0 && dON) {\n          let px = tx + MX + 0.5, py = ty + MY + 0.5, rh = h, oc = -1;\n          for (let s = 0; s \u003c ms && rh \u003c= hmax; s++) (px += lx), (py += ly), (rh += te), (oc = max(oc, HL[(py | 0) * HW + (px | 0)] - rh));\n          lt = min(2.2, dif / sE) * (1 - sm(-0.15, 0.3, oc));\n        }\n        // Slopes facing the light's side of the sky catch more sky.\n        const cav = cl(((HL[k - 1] + HL[k + 1] + HL[k - HW] + HL[k + HW]) * 0.25 - h) * 0.6, -0.15, 0.3), nh = cl((-gx * lx - gy * ly) * inv * 2.5, -0.6, 0.6);\n        (LI[wi] = lt), (SQ[wi] = (0.6 + 0.4 * inv) * (1 - cav) * (1 + 0.5 * nh)), (GN[wi] = gen);\n      }\n      // Aurora light; young ice and water mirror the sky.\n      const sk = SQ[wi], mt = MT[wi], o = (ty * TW + tx) * 3, lit = LI[wi] * (mt === 3 ? 0.1 : 1);\n      const eg = aur > 0 ? aur * 100 * (0.5 + 0.5 * sin((ox + tx) * 0.05 + (oy + ty) * 0.013 + 1.4 * sin((oy + ty) * 0.021 - t * 0.2) + t * 0.3)) ** 8 : 0;\n      const rf = mt > 1 ? 0.3 : 0;\n      for (let c = 0; c \u003c 3; c++) (AM[o + c] = (AL[wi * 3 + c] / 255) * (L[4 + c] * sk + eg * (c === 1 ? 1 : 0.15)) + rf * L[4 + c]), (DI[o + c] = (AL[wi * 3 + c] / 255) * L[1 + c] * lit);\n    }\n\n  // Shadows: each side view thrown along the snow.\n  SM.fill(0);\n  const ux = S.ux, uy = S.uy;\n  for (let i = 0; i \u003c n && dON; i++) {\n    const a = S.DF[i], ph = S.ph + S.DO[i], bob = 0.22 * run * sin(2 * PI * ph);\n    legs(ph, run, bob);\n    shadowOf(S.DX[i] - cx + fx, S.DY[i] - cy + fy, sin(a), -cos(a), Kx, Ky, 4.6, 5.6, DOG, bob, 1);\n  }\n  if (dON) shadowOf(S.sbx - cx + fx, S.sby - cy + fy, ux, uy, Kx, Ky, 16, 11, SLD, 0, 0);\n  // Snow between grid points, shadows taken out.\n  for (let i = 0, o = 0; i \u003c TW * TH; i++) for (let c = 0, s = 1 - 0.55 * SM[i]; c \u003c 3; c++, o++) AM[o] += DI[o] * s;\n  const w00 = (1 - fx) * (1 - fy), w10 = fx * (1 - fy), w01 = (1 - fx) * fy, w11 = fx * fy;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, q = y * TW * 3; x \u003c W; x++) for (let c = 0; c \u003c 3; c++, p++, q++) F[p] = w00 * AM[q] + w10 * AM[q + 3] + w01 * AM[q + TW * 3] + w11 * AM[q + TW * 3 + 3];\n\n  // Spindrift, under the dogs.\n  for (let c = 0; c \u003c 3; c++) LC[c] = L[4 + c] * 0.8 + L[1 + c] * 0.9;\n  if (k4 > 0.01) {\n    const th = 0.68 - 0.36 * k4, hz = 0.24 * k4 * k4;\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const wx = x + cx, wy = y + cy, al = wx * GX + wy * GY - S.wind, ac = -wx * GY + wy * GX, n1 = 0.62 * vn(al * 0.055, ac * 0.325);\n        if (n1 + 0.38 \u003c th && hz \u003c 0.004) continue;\n        const q = sm(th, th + 0.25, n1 + 0.38 * vn(al * 0.125 + 17, ac * 0.65 + 5)) * (0.4 + 0.6 * k4) * 0.9 + hz, p = i * 3;\n        for (let c = 0; c \u003c 3; c++) F[p + c] += ((LC[c] + 25 + 7.5 * c) * 1.1 - F[p + c]) * q;\n      }\n  }\n  // The team, then breath.\n  gangline(S);\n  for (let i = 0; i \u003c n; i++) dog(S, i);\n  sled(S.sbx - cx, S.sby - cy, ux, uy);\n  for (let p = 0; p \u003c 256; p++) {\n    const ag = S.BA[p], bx = S.BX[p] - cx, by = S.BY[p] - cy, r = 0.7 + ag * (1.2 + k4), al = 0.32 * (1 - ag / 1.5) * (1 - 0.5 * k4);\n    for (let y = floor(by - r); y \u003c= by + r && ag \u003c 1.5; y++)\n      for (let x = floor(bx - r); x \u003c= bx + r; x++) put(x, y, LC[0] * 1.15, LC[1] * 1.15, LC[2] * 1.15, al * (1 - ((x + 0.5 - bx) ** 2 + (y + 0.5 - by) ** 2) / (r * r)));\n  }\n  const tm = (v) => TM[min(1199, v | 0)];\n  for (let i = 0, p = 0; i \u003c N; i++, p += 3) display.setPixel(i & 63, i >> 6, tm(F[p]), tm(F[p + 1]), tm(F[p + 2]));\n}\n\n// A shadow: each grid point maps back to (a, h) in side view P.\nfunction shadowOf(x, y, Fx, Fy, Kx, Ky, A, Hh, P, bob, withLegs) {\n  const det = Fx * Ky - Fy * Kx, ax = abs(Fx) * A * Z, ay = abs(Fy) * A * Z, hx = Kx * Hh * Z, hy = Ky * Hh * Z;\n  for (let py = max(0, floor(y - ay + min(0, hy))); py \u003c= min(TH - 1, y + ay + max(0, hy)) && abs(det) > 0.05; py++)\n    for (let px = max(0, floor(x - ax + min(0, hx))); px \u003c= min(TW - 1, x + ax + max(0, hx)); px++) {\n      const rx = (px + 0.5 - x) / Z, ry = (py + 0.5 - y) / Z, a = (rx * Ky - ry * Kx) / det, h = (Fx * ry - Fy * rx) / det, i = py * TW + px;\n      if (h \u003c -0.6 || h > Hh || a \u003c -A || a > A) continue;\n      let d = side(P, a, h, bob);\n      for (let o = 0; o \u003c 24 && withLegs && h \u003c 3.2; o += 6) if (abs(a - LG[o + 2]) \u003c 2.2) d = min(d, cap(a, h, LG[o], LG[o + 1], LG[o + 2], LG[o + 3], 0.36), cap(a, h, LG[o + 2], LG[o + 3], LG[o + 4], LG[o + 5], 0.28));\n      SM[i] = max(SM[i], cl(0.6 - d * 1.4 * Z, 0, 1));\n    }\n}\n// The gangline, in soft dots from the lead dog to the sled.\nfunction gangline(S) {\n  for (let s = (S.nd & 1 ? 2.6 : -1) * Z; s \u003c (((S.nd + 1) >> 1) - 1) * S.pt + 8 * Z; s += 0.6) {\n    pathAt(S, s);\n    const x = PP[0] - S.cx - 0.5, y = PP[1] - S.cy - 0.5;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = floor(x) + (j & 1), Y = floor(y) + (j >> 1);\n      put(X, Y, LINE[0] * LC[0], LINE[1] * LC[1], LINE[2] * LC[2], 0.45 * (1 - abs(x - X)) * (1 - abs(y - Y)));\n    }\n  }\n}\n\n// A dog from above: legs, saddle, harness, neck, head, curled tail.\nfunction dog(S, i) {\n  const x = S.DX[i] - S.cx, y = S.DY[i] - S.cy, an = S.DF[i], Fx = sin(an), Fy = -cos(an), ph = S.ph + S.DO[i], [BK, SD, FC] = COAT[S.DC[i]], ext = sin(2 * PI * ph) * S.run, ts = i & 1 ? 1 : -1;\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  legs(ph, S.run, 0);\n  for (let py = max(0, floor(y - 5.4 * Z)); py \u003c= min(H - 1, y + 5.4 * Z); py++)\n    for (let px = max(0, floor(x - 5.4 * Z)); px \u003c= min(W - 1, x + 5.4 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx;\n      if (a * a + b * b > 30) continue;\n      PO = (py * W + px) * 3;\n      for (let l = 0; l \u003c 24; l += 6) paint(cap(a, b, LG[l], l % 12 ? 0.85 : -0.85, LG[l + 4], l % 12 ? 0.95 : -0.95, 0.38), 0.38, SD, 1);\n      const d = cap(a, b, -2.1 - 0.25 * ext, 0, 1.1 + 0.15 * ext, 0, 1.12), q = cl(0.5 - d * Z, 0, 1);\n      paint(d, 1.12, SD, 1);\n      if (q > 0) paint(d, 1.12, BK, sm(0.85, 0.35, abs(OO[1])) * q), abs(a - 0.7) \u003c 0.45 && paint(d, 1.12, HARN, q);\n      paint(cap(a, b, 1.4, 0, 2.7, 0, 0.55), 0.55, SD, 1);\n      paint(cap(a, b, 3, 0, 3.3, 0, 0.8), 0.8, FC, 1);\n      paint(cap(a, b, 3.5, 0, 4.4, 0, 0.42), 0.42, FC, 1);\n      paint(cap(a, b, -2.2, ts * 0.35, -2.2, ts * 0.35, 0.75), 0.75, FC, 1);\n    }\n}\n\n// The sled: runners, slats, load, handlebar, the musher.\nfunction sled(x, y, Fx, Fy) {\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  for (let py = max(0, floor(y - 17 * Z)); py \u003c= min(H - 1, y + 17 * Z); py++)\n    for (let px = max(0, floor(x - 17 * Z)); px \u003c= min(W - 1, x + 17 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx, ab = abs(b);\n      if (a \u003c -3 || a > 16 || ab > 3.2) continue;\n      PO = (py * W + px) * 3;\n      paint(cap(a, ab, -2.2, 2, 14.6, 2, 0.4), 0, DARK, 1);\n      paint(max(ab - 1.7, abs(a - 8.4) - 5.6), 0, a % 1.6 \u003c 1.1 ? WOOD : DARK, 1);\n      paint(max(ab - 1.3, abs(a - 8.7) - 3.2) - 0.25, 0, LOAD, 1);\n      paint(cap(a, b, 2.7, -2.3, 2.7, 2.3, 0.35), 0, DARK, 1);\n      paint(cap(a, b, 0.7, -1.4, 0.7, 1.4, 1), 1, RED, 1);\n      paint(cap(a, b, 1, 0, 1, 0, 1.1), 1.1, FUR, 1);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower."},{"name":"Dogs","min":8,"max":14,"about":"Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front."},{"name":"Wind","min":0,"max":1,"about":"Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice."}],"start":[0,2,8,0.06],"measures":{"motion":0.9731,"detail":0.0564,"edges":0.2725,"complexity":2.1928,"coverage":0.9989,"colour":0.1125,"drift":0.1372},"knobResponse":[0.4249,0.2371,0.2343,0.1374]},{"slug":"slinky","title":"Slinky","family":"toy","round":21,"note":"슬링키가 패널 높이만큼 지그재그로 꺾인 계단을 한 칸씩 뒤집히며 내려가요. 코일이 활처럼 휘어 아래 칸으로 쏟아지고, 내려앉은 칸마다 계단등이 켜져요.","idea":"A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","layer":{"id":"layer-slinky","type":"code","name":"slinky","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spring","min":0,"max":1,"about":"Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower."},{"name":"Rise","min":6,"max":12,"about":"How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down."},{"name":"Lamp","min":-1,"max":1,"about":"The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them."}],"start":[0,2,6,0.06],"measures":{"motion":0.1152,"detail":0.057,"edges":0.2572,"complexity":1.8838,"coverage":0.9943,"colour":0.1312,"drift":0.056},"knobResponse":[0.1557,0.043,0.0908,0.2999]},{"slug":"smalti","title":"Smalti","family":"glass","round":19,"note":"라벤나 갈라 플라키디아의 별 궁륭과 기도하는 사도를 어두운 줄눈의 유리와 금 테세라로 128줄에 짜요. 등불이 벽을 오르내리면 저마다 조금씩 기운 금 큐브가 빛의 각도를 만날 때마다 번쩍여요.","idea":"A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","layer":{"id":"layer-smalti","type":"code","name":"smalti","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven."},{"name":"Tesserae","min":2,"max":4,"about":"How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes."},{"name":"Gold","min":0,"max":1,"about":"At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1."}],"start":[0,2,2,0.06],"measures":{"motion":0.0438,"detail":0.2001,"edges":1,"complexity":2.3202,"coverage":0.4186,"colour":0.2372,"drift":0.1208},"knobResponse":[0.0652,0.0785,0.082,0.0729]},{"slug":"snow-monkeys","title":"Snow Monkeys","family":"mammal","round":25,"note":"눈 내리는 지고쿠다니의 해 질 녘, 일본원숭이들이 김 오르는 노천 온천에 어깨까지 잠겨 머리에 눈을 얹은 채 졸거나 서로 털을 골라 줘요. 바위 위의 어미가 물로 걸어 들어오고, 덩어리진 김은 눈 덮인 삼나무 비탈을 지나 패널 꼭대기까지 피어올라요. K1 을 끝까지 돌리면 밤이 되어 석등이 김을 주황으로 물들이고, K1 을 누르면 새끼가 물보라를 일으키며 뛰어들어요.","idea":"At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.","buttons":"K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.","code":"// ===== Patternflow pattern =====\n// Title:   Snow Monkeys\n// Family:  mammal\n// Idea:    At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Japanese macaques (Macaca fuscata) that bathe in the hot spring at Jigokudani, Nagano\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1\n//\n// Knob 1: Light. The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it.\n// Knob 2: Speed. At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower.\n// Knob 3: Monkeys. How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam.\n// Knob 4: Wind. Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it.\n// Buttons: K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.\n\nconst W = 64, H = 128, N = W * H, GW = 32, GH = 64;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The back edge of the pool, and how big a monkey stands at a depth row.\nconst PB = 67;\nconst scl = (y) => 0.74 + (y - PB) * 0.0135;\n// The stone lantern's fire box.\nconst [LX, LY] = [8.5, 50.5];\n// The light from evening to night: ambient, sky overhead, sky at the ridge,\n// lit steam, and the lantern's strength.\nconst LIGHT = [\n  [0, 0.5, 0.6, 0.86, 24, 44, 104, 70, 98, 160, 196, 212, 240, 0.25],\n  [0.5, 0.36, 0.4, 0.66, 16, 20, 62, 84, 66, 118, 150, 156, 196, 0.65],\n  [1, 0.2, 0.24, 0.42, 5, 8, 24, 18, 24, 54, 84, 92, 130, 1.1],\n];\nconst LC = [1, 0.62, 0.3];\nconst SNOW = [232, 238, 250], FUR = [218, 184, 150], FACE = [250, 96, 92], EAR = [214, 132, 124], HAND = [120, 84, 78], EYE = [40, 22, 20];\nconst ROCK = [70, 64, 62], NEEDLE = [24, 46, 36], TRUNK = [52, 38, 30], WATER = [34, 70, 74], STONE = [118, 114, 108];\n// Boulders as half ellipses standing on their water line: centre, radii,\n// depth row. The back rim, the boulder in the pool, the near rocks.\nconst ROCKS = [\n  [2, 68, 12, 8, 66], [17, 69, 8, 6, 66], [30, 69, 9, 5, 66], [45, 68, 11, 6, 66], [61, 68, 10, 9, 66],\n  [53, 92, 13, 12, 90],\n  [6, 132, 15, 14, 126], [28, 133, 12, 12, 127], [48, 132, 11, 13, 126], [64, 129, 10, 15, 125],\n];\n// Cedars on the slope, far to near: apex x and row, height, nearness.\nconst TREES = [];\nfor (let i = 0; i \u003c 10; i++) TREES.push([2 + i * 6.7 + 3 * hash(i, 1), 4 + 9 * hash(i, 2), 16 + 8 * hash(i, 3), 0.3]);\nfor (let i = 0; i \u003c 7; i++) TREES.push([i * 10.5 + 5 * hash(i, 4), 16 + 12 * hash(i, 5), 24 + 10 * hash(i, 6), 0.6]);\nTREES.push([3, 12, 52, 1], [61, 6, 56, 1]);\n// Places in the order the Monkeys knob fills them: x, depth row (the seat\n// row on the rim), how low it sits in the water (0 shoulders out, 1 chin in\n// it), and what it does (0 looks about, 1 dozes, 2 grooms the one before\n// it, 3 sits on the rim rocks).\nconst SLOTS = [\n  [24, 101, 0.15, 1], [34, 93, 0.1, 2], [11, 117, 0.6, 1], [30, 64.5, 0, 3], [52, 119, 0.25, 0], [8, 90, 0.2, 0],\n  [41, 63, 0, 3], [61, 110, 0.3, 0], [31, 79, 0.15, 0], [37, 118, 0.3, 1], [23, 121, 0.5, 1], [14, 77, 0.2, 1],\n  [5, 104, 0.2, 0], [46, 86, 0.1, 0],\n];\n// The boulder seats and the way down into the water, as x and bottom row.\nconst SEAT = [52, 81], EDGE = [46, 83.5], FOOT = [44, 93], SPOT = [47, 103], BSEAT = [60, 83], BLAND = [53, 102], BFOOT = [60, 94];\n\nfunction ramp(g, c) {\n  let j = 0;\n  while (j \u003c LIGHT.length - 2 && g > LIGHT[j + 1][0]) j++;\n  const a = LIGHT[j], b = LIGHT[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, f: F32(N * 3), bg: F32(N * 3), il: F32(N * 3), lm: F32(N), z: new Uint8Array(N), G: F32(GW * GH), key: -1,\n    puffs: [], drops: [], acc: 0, vent: 0.5, fx: 0, fy: 0, gust: 0, w: 0, k1: 0, n: 3, spl: null,\n    R: { st: 0, t: 0, dur: 3, lk: 0, lt: 0, lc: 1 }, B: { st: 0, t: 0, nj: 6.2, lk: 0, lt: 0, lc: 2 },\n  });\n  P.sd = 7;\n  P.mk = SLOTS.map(([x, y, sk, pose], i) => ({ x, y, sk, pose, s: pose > 2 ? 0.86 : scl(y), p: 0, sw: i * 0.3, hy: y - 8, lk: pose === 2 ? -0.8 : 0, lt: 0, lc: 1 + rnd() * 3, e: pose === 1 ? 1 : 0, bl: 2 + rnd() * 3, ph: rnd() * 7, i }));\n  P.flakes = Array.from({ length: 180 }, () => {\n    const z = rnd();\n    return { x: rnd() * W, y: rnd() * H, z, ph: rnd() * 7, land: 40 + z * 88 };\n  });\n  P.flakes.forEach((f) => (f.y = rnd() * f.land));\n  P.rg = Array.from({ length: W }, (_, x) => 8 + 5 * vn(x * 0.07, 1.3) - 0.06 * x);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) P.lm[y * W + x] = exp(-((x + 0.5 - LX) ** 2 + (y + 0.5 - LY) ** 2 * 0.8) / 1500);\n}\n\nfunction spawn(P, x, y, a, g = rnd) {\n  P.puffs.push({ x, y, a, r: 2.5 + 2.5 * g(), age: 0, life: 7 + 5 * g(), vy: -(6 + 5 * g()), ph: g() * 7 });\n}\n\n// The steam: puffs off the water, thick clumps from the spring's mouth, all\n// rising, growing and fading, swayed by the gusts and leaned by the wind.\nfunction steam(P, d) {\n  const w = P.w;\n  P.gust = 0.55 * sin(P.t * 0.31) + 0.3 * sin(P.t * 0.83 + 2);\n  for (P.acc += d * 1.8; P.acc > 1; P.acc--) spawn(P, 2 + rnd() * 60 - w * 22, 74 + rnd() * 44, 0.2 + 0.25 * rnd());\n  if ((P.vent -= d) \u003c 0) {\n    P.vent = 0.7 + rnd() * 1.1;\n    const vx = [9, 22, 36][floor(rnd() * 3)] + rnd() * 6 - 3 - w * 14, vy = 72 + rnd() * 16;\n    for (let n = 0; n \u003c 3; n++) spawn(P, vx + rnd() * 8 - 4, vy + rnd() * 6, 0.4 + 0.25 * rnd());\n  }\n  // Wet fur steams in the cold: a wisp off each monkey's head now and then,\n  // from a generator of its own so the rest of the steam keeps its course.\n  for (const m of P.mk)\n    if (m.p > 0.5 && (m.sw -= d) \u003c 0) {\n      const g = () => ((P.sd = (Math.imul(P.sd, 1103515245) + 12345) >>> 0) / 4294967296);\n      m.sw = 0.35 + g() * 0.6;\n      spawn(P, m.x + (g() - 0.5) * 6 * m.s, m.hy - 3 * m.s, 0.25 + 0.2 * g(), g);\n    }\n  const wx = w * 15 + P.gust * 7;\n  for (const q of P.puffs) {\n    q.age += d;\n    const up = sm(84, 20, q.y);\n    q.x += (wx * (0.3 + 0.7 * up) + 1.6 * sin(q.age * 1.3 + q.ph)) * d;\n    q.y += q.vy * (0.5 + 0.5 * sm(0, 2.5, q.age)) * d;\n    q.r += (0.9 + 0.8 * abs(w)) * d;\n  }\n  P.puffs = P.puffs.filter((q) => q.age \u003c q.life * (1 - 0.35 * abs(w)) && q.y + q.r > -4 && q.x > -30 && q.x \u003c 94);\n  P.fx -= wx * 0.2 * d;\n  P.fy += 1.8 * d;\n}\n\n// Where the mother is on her way between the boulder and the pool, u 0..1.\nfunction path(u) {\n  if (u \u003c 0.3) {\n    const q = sm(0, 0.3, u);\n    return [mix(SEAT[0], EDGE[0], q), mix(SEAT[1], EDGE[1], q), 999, 90];\n  }\n  if (u \u003c 0.55) {\n    const q = sm(0.3, 0.55, u);\n    return [mix(EDGE[0], FOOT[0], q), mix(EDGE[1], FOOT[1], q), 999, 90 + 3 * q];\n  }\n  const q = sm(0.55, 1, u), wl = mix(FOOT[1], SPOT[1], q);\n  return [mix(FOOT[0], SPOT[0], q), wl + 9.5 * q * scl(wl), wl, wl];\n}\n\nfunction look(m, d) {\n  if ((m.lc -= d) \u003c 0) (m.lc = 1.2 + rnd() * 3), (m.lt = floor(rnd() * 3) - 1);\n  m.lk += (m.lt - m.lk) * min(1, d * 5);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.k1 = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 3, 14));\n  P.w = cl(k[3], -1, 1);\n  if (!P.init) {\n    // Open on a pool already steaming.\n    for (let i = 0; i \u003c 120; i++) (P.t += 0.1), steam(P, 0.1);\n    P.t = 0;\n    for (const m of P.mk) m.p = m.i \u003c P.n ? 1 : 0;\n    P.init = true;\n  }\n  const T = (P.t += d);\n  steam(P, d);\n  for (const m of P.mk) {\n    m.p = cl(m.p + (m.i \u003c P.n ? d : -d) * 0.8, 0, 1);\n    if (m.pose % 3 === 0) {\n      look(m, d);\n      if ((m.bl -= d) \u003c 0) m.bl = 2 + rnd() * 4;\n      m.e = m.bl \u003c 0.15 ? 1 : 0;\n    }\n  }\n  // The mother sits on the boulder until she wades in to soak. Later she climbs out again.\n  const R = P.R;\n  if ((R.t += d) >= R.dur) {\n    R.st = (R.st + 1) % 4;\n    (R.t = 0), (R.dur = [16 + rnd() * 6, 3, 18 + rnd() * 6, 3.4][R.st]);\n  }\n  look(R, d);\n  // The baby on the boulder: a leap, a splash, a paddle back and a climb.\n  const B = P.B;\n  if (input.btnPressed && input.btnPressed[0] && B.st === 0) B.nj = 0;\n  if (B.st === 0 && (B.nj -= d) \u003c= 0) (B.st = 1), (B.t = 0);\n  if (B.st) B.t += d;\n  if (B.st === 1 && B.t >= 0.7) {\n    (B.st = 2), (B.t = 0), (P.spl = { x: BLAND[0], y: BLAND[1], t: 0 });\n    for (let n = 0; n \u003c 34; n++) {\n      const a = (rnd() - 0.5) * 2.4;\n      P.drops.push([BLAND[0] + a * 2, BLAND[1] - 1, a * 14 + (rnd() - 0.5) * 6, -12 - rnd() * 22, BLAND[1] + (rnd() - 0.3) * 6]);\n    }\n    for (let n = 0; n \u003c 4; n++) spawn(P, BLAND[0] + rnd() * 10 - 5, BLAND[1] - 4, 0.8);\n  }\n  if (B.st === 2 && B.t >= 4.2) (B.st = 3), (B.t = 0);\n  if (B.st === 3 && B.t >= 1.3) (B.st = 0), (B.t = 0), (B.nj = 24 + rnd() * 10);\n  look(B, d);\n  if (P.spl && (P.spl.t += d) > 2) P.spl = null;\n  P.drops = P.drops.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 70 * d);\n    return !(q[3] > 0 && q[1] > q[4]);\n  });\n  for (const f of P.flakes) {\n    f.y += (5 + 9 * f.z) * (1 + 0.6 * abs(P.w)) * d;\n    f.x += ((P.w * 18 + P.gust * 4) * (0.4 + 0.6 * f.z) + 0.9 * sin(T * 1.7 + f.ph)) * d;\n    if (f.y > f.land) (f.y = -2 - rnd() * 4), (f.x = rnd() * W);\n    f.x = ((f.x % W) + W) % W;\n  }\n}\n\n// The valley, the rocks, the lantern and the still water, kept until the light changes.\nfunction backdrop(P) {\n  P.key = round(P.k1 * 60);\n  const g = P.k1, A = [0, 1, 2].map((c) => ramp(g, c)), top = [3, 4, 5].map((c) => ramp(g, c)), low = [6, 7, 8].map((c) => ramp(g, c));\n  const lamp = ramp(g, 12), BG = P.bg, IL = P.il, Z = P.z;\n  P.steamC = [9, 10, 11].map((c) => ramp(g, c));\n  P.lamp = lamp;\n  P.low = low;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, lm = P.lm[i];\n      for (let c = 0; c \u003c 3; c++) IL[o + c] = A[c] + LC[c] * lamp * lm;\n      let col = null, k = 1, z = 0;\n      const rg = P.rg[x];\n      if (y >= rg) {\n        // Snow on the slope, darker where scrub and rock break through.\n        col = SNOW;\n        k = 0.3 + 0.16 * vn(x * 0.12, y * 0.07) + 0.12 * (y / 66);\n        if (vn(x * 0.45 + 3, y * 0.28) > 0.7) k *= 0.45;\n      }\n      for (const [tx, ty, th, f] of TREES) {\n        // Tiers of drooping branches, each loaded with snow along its top.\n        const dx = abs(x + 0.5 - tx), ts = 3.2 + 2.6 * f, yy = y - ty - dx * 0.5, kq = floor(yy / ts), wi = yy - kq * ts;\n        if (yy \u003c 0 || y > ty + th + 3) continue;\n        if (y > ty + th) {\n          if (dx \u003c 0.4 + f) (col = TRUNK), (k = 0.6);\n          continue;\n        }\n        if (dx >= 0.5 + (y - ty) * 0.34 * (0.68 + 0.32 * (wi / ts)) * (0.85 + 0.3 * hash(kq, tx | 0))) continue;\n        if (wi \u003c 1 + 0.6 * f && hash(x, y) > 0.12) (col = SNOW), (k = 0.4 + 0.32 * f - 0.1 * (dx / th));\n        else (col = NEEDLE), (k = wi > ts - 0.7 ? 0.5 : 0.9 + 0.2 * hash(x + 7, y));\n        if (f \u003c 1) k = mix(k, 0.34, (1 - f) * 0.45);\n      }\n      if (y >= PB) (col = WATER), (z = 1), (k = 0.5 + 0.6 * ((y - PB) / 54));\n      for (const [cx, cy, rx, ry, dz] of ROCKS) {\n        const nx = (x + 0.5 - cx) / rx, ny = (y + 0.5 - cy) / ry, dd = nx * nx + ny * ny;\n        if (dd > 1 || y + 0.5 > cy) continue;\n        z = dz;\n        const nz = sqrt(1 - dd);\n        if (ny \u003c -0.42 - 0.22 * nz + 0.25 * (vn(x * 0.6, cy) - 0.5)) (col = SNOW), (k = 0.5 + 0.28 * nz - 0.12 * ny);\n        else (col = ROCK), (k = (0.6 + 0.5 * nz - 0.3 * nx) * (0.75 + 0.4 * vn(x * 0.5, y * 0.5)));\n      }\n      Z[i] = z;\n      if (!col) {\n        const v = (y / rg) ** 1.5;\n        for (let c = 0; c \u003c 3; c++) BG[o + c] = mix(top[c], low[c], v);\n        continue;\n      }\n      for (let c = 0; c \u003c 3; c++) BG[o + c] = col[c] * k * IL[o + c] + (z === 1 ? low[c] * 0.12 : 0);\n    }\n  // The stone lantern: finial, snowed roof, fire box with its glowing window,\n  // pillar and foot, standing on the rim rock.\n  const ROWS = [[42, 0.6, 1], [44, 3.6, 0], [46, 5, 1], [48, 2.6, 2], [54, 3.6, 1], [55, 1.3, 1], [60, 2.8, 1], [62, 0, 1]];\n  for (let r = 0; r \u003c ROWS.length - 1; r++)\n    for (let y = ROWS[r][0]; y \u003c ROWS[r + 1][0]; y++)\n      for (let x = 0; x \u003c 18; x++) {\n        const dx = abs(x + 0.5 - LX), hw = ROWS[r][1] + (r === 2 ? y - 46 : 0) * 0.6, o = (y * W + x) * 3;\n        if (dx > hw) continue;\n        const kind = ROWS[r][2], win = kind === 2 && dx \u003c 1.6 && y > 48 && y \u003c 53;\n        for (let c = 0; c \u003c 3; c++)\n          BG[o + c] = win ? [255, 200, 120][c] * min(1, 0.72 + 0.3 * lamp) : (kind ? STONE[c] * (0.6 + 0.25 * (LX - x) / hw) : SNOW[c] * 0.75) * IL[o + c];\n      }\n}\n\nlet F, IL, Z, M;\n// An ellipse of fur or skin on the monkey being drawn, under its water line\n// and behind any rock nearer than it.\nfunction blob(cx, cy, rx, ry, col, sn, fur) {\n  for (let y = max(0, floor(cy - ry)), y1 = min(H - 1, cy + ry); y \u003c= y1 && y + 0.5 \u003c M.wl; y++) {\n    const ny = (y + 0.5 - cy) / ry;\n    for (let x = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx); x \u003c= x1; x++) {\n      const nx = (x + 0.5 - cx) / rx, dd = nx * nx + ny * ny, i = y * W + x;\n      if (dd > 1 || Z[i] > M.z) continue;\n      const nz = sqrt(1 - dd);\n      let k, c = col;\n      if (fur) {\n        k = (0.36 + 0.55 * nz - 0.25 * ny - 0.12 * nx) * (0.84 + 0.3 * hash(x - M.x0, y - M.y0));\n        if (sn && ny \u003c sn * 0.5 - 1.05 + 0.25 * hash(x - M.x0, 9)) (c = SNOW), (k = 0.75 + 0.25 * nz);\n        else k *= 0.6 + 0.4 * sm(0.3, 2.2, M.wl - y - 0.5);\n      } else k = 0.72 + 0.3 * nz - 0.15 * ny;\n      paint(i, c, k);\n    }\n  }\n}\nfunction paint(i, c, k) {\n  const o = i * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k * (IL[o + n] * 0.6 + 0.4);\n}\nfunction dot(x, y, c, k) {\n  (x = floor(x)), (y = floor(y));\n  if (x >= 0 && x \u003c W && y >= 0 && y + 0.5 \u003c M.wl && Z[y * W + x] \u003c= M.z) paint(y * W + x, c, k);\n}\n// A limb of fur from a to b.\nfunction rod(ax, ay, bx, by, r, col) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = max(0, floor(min(ay, by) - r)); y \u003c= min(H - 1, max(ay, by) + r) && y + 0.5 \u003c M.wl; y++)\n    for (let x = max(0, floor(min(ax, bx) - r)); x \u003c= min(W - 1, max(ax, bx) + r); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t;\n      if (ex * ex + ey * ey > r * r || Z[y * W + x] > M.z) continue;\n      paint(y * W + x, col, (0.75 - 0.2 * (ey / r)) * (0.84 + 0.3 * hash(x, y)));\n    }\n}\n\n// One macaque: x, bottom row, scale, water line, depth, the turn of its head\n// (-1..1), how far it bows, eyes shut, snow on its head, sat on a rock.\nfunction monkey(x, yb, s, wl, z, lk, bow, shut, sn, sat) {\n  M = { wl, z, x0: floor(x), y0: floor(yb) };\n  blob(x, yb - 6.6 * s, 6.8 * s, 6.6 * s, FUR, sat ? 0.3 : 0, 1);\n  if (sat) {\n    for (const sd of [-1, 1]) {\n      blob(x + sd * 3.4 * s, yb - 2.6 * s, 2.7 * s, 2.3 * s, FUR, 0, 1);\n      blob(x + sd * 4.2 * s, yb - 0.6 * s, 1.5 * s, 0.9 * s, HAND, 0, 0);\n    }\n    for (const sd of [-1, 1]) rod(x + sd * 5 * s, yb - 10 * s, x + sd * 1.4 * s, yb - 4.8 * s, 1.4 * s, FUR);\n    blob(x, yb - 4.7 * s, 2 * s, 1 * s, HAND, 0, 0);\n  }\n  const R = 4.4 * s, hx = x + lk * 0.5 * s, hy = yb - (15.2 - bow) * s;\n  for (const sd of [-1, 1]) blob(hx + sd * R * (1 - 0.2 * lk * sd), hy - 0.3 * s, 1.1 * s + 0.2, 1.3 * s + 0.2, EAR, 0, 0);\n  blob(hx, hy, R * 1.05, R * 0.97, FUR, sn, 1);\n  const fx = hx + lk * 1.4 * s, fy = hy + (0.9 + bow * 0.25) * s;\n  blob(fx, fy, 2.2 * s * (1 - 0.2 * abs(lk)), 2.6 * s, FACE, 0, 0);\n  for (const sd of [-1, 1]) dot(fx + sd * 0.95 * s, fy - 0.6 * s, shut > 0.5 ? FACE : EYE, shut > 0.5 ? 0.45 : 1);\n  dot(fx, fy + 1.2 * s, FACE, 0.5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  if (P.key !== round(P.k1 * 60)) backdrop(P);\n  (F = P.f), (IL = P.il), (Z = P.z);\n  F.set(P.bg);\n  const T = P.t, lamp = P.lamp, BG = P.bg;\n  // The water: a slow shiver over it and the lantern's broken reflection.\n  for (let y = PB; y \u003c H; y++) {\n    const sx = 0.7 * sin(y * 0.5 + T * 1.3), rx = LX + 1.4 * sin(y * 0.9 + T * 3), rk = lamp * 140 * sm(104, 70, y);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (Z[i] !== 1) continue;\n      const r = vn(x * 0.3 + sx, y * 0.9 - T * 0.8), o = i * 3, dx = x + 0.5 - rx, ref = dx * dx \u003c 30 && rk ? rk * r * exp((-dx * dx) / 5) : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = BG[o + c] * (0.75 + 0.55 * r) + ref * LC[c];\n    }\n  }\n  // Who is where, back to front.\n  const L = [];\n  for (const m of P.mk) {\n    if (m.p \u003c= 0) continue;\n    if (m.pose > 2) {\n      // On the rim it slides down behind its rock as it goes.\n      const yb = m.y + 20 * (1 - m.p) * m.s;\n      m.hy = yb - 15.2 * m.s;\n      L.push([65, () => monkey(m.x, yb, m.s, 999, 65, m.lk, 0, m.e, 0.6, 1)]);\n      continue;\n    }\n    const wl = m.y + 0.35 * sin(T * 0.7 + m.ph), sk = m.sk + (m.pose === 1 ? 0.08 * sin(T * 0.5 + m.ph) : 0);\n    const yb = wl + (9.5 + 3.4 * sk + 20 * (1 - m.p)) * m.s;\n    m.hy = yb - (15.2 - (m.pose ? 1 : 0)) * m.s;\n    L.push([m.y, () => monkey(m.x, yb, m.s, wl, m.y, m.lk, m.pose ? 1 : 0, m.e, m.pose === 1 ? 1 : 0.55, 0), m]);\n  }\n  const R = P.R, u = R.st === 0 ? 0 : R.st === 2 ? 1 : R.st === 1 ? R.t / 3 : 1 - R.t / 3.4;\n  const [rx, ryb, rwl, rz] = path(u), rs = scl(rz);\n  L.push([rz, () => monkey(rx, ryb, rs, rwl, rz, R.lk, 0, R.st === 2 ? 1 : 0, 0.7, rwl > 900), rwl \u003c 900 && { x: rx, s: rs, p: 1, pose: 0, ph: 0 }]);\n  const B = P.B, bs = 0.64;\n  let bx, byb, bwl = 999, bz = 90;\n  if (B.st === 0) [bx, byb] = BSEAT;\n  else if (B.st === 1) {\n    const q = B.t / 0.7;\n    (bx = mix(BSEAT[0], BLAND[0], q)), (byb = mix(BSEAT[1], BLAND[1], q) - 14 * sin(PI * q)), (bz = mix(90, BLAND[1], q));\n  } else if (B.st === 2) {\n    const q = sm(0.8, 4.2, B.t);\n    (bwl = mix(BLAND[1], BFOOT[1], q)), (bx = mix(BLAND[0], BFOOT[0], q)), (bz = bwl);\n    byb = bwl + (12.5 + 14 * (1 - sm(0.15, 0.6, B.t))) * bs * scl(bwl);\n  } else {\n    const q = sm(0, 1.3, B.t);\n    (bx = mix(BFOOT[0], BSEAT[0], q)), (byb = mix(BFOOT[1], BSEAT[1], q)), (bz = mix(94, 90, q));\n  }\n  L.push([bz, () => monkey(bx, byb, bs * scl(bz), bwl, bz, B.lk, 0, 0, 0.4, B.st !== 2), B.st === 2 && { x: bx, s: 0.6, p: 1, pose: 0, ph: 3 }]);\n  L.sort((a, b) => a[0] - b[0]);\n  // Rings on the water round everyone in it.\n  for (const [z, , m] of L) {\n    if (!m) continue;\n    const s = m.s * m.p;\n    for (let n = 0; n \u003c 3; n++) {\n      const r = 6.5 * s + ((T * (m.pose === 1 ? 1.6 : 3) + n * 4.4 + m.ph) % 13), a = (1 - (r - 6.5 * s) / 13) * 0.8 * m.p;\n      for (let y = floor(z - r * 0.3 - 1); y \u003c= z + r * 0.3 + 1; y++)\n        for (let x = max(0, floor(m.x - r - 1)); x \u003c= min(W - 1, m.x + r + 1); x++) {\n          const i = y * W + x;\n          if (y >= H || Z[i] !== 1) continue;\n          const e = sqrt(((x + 0.5 - m.x) / r) ** 2 + ((y + 0.5 - z) / (r * 0.3)) ** 2);\n          if (abs(e - 1) * r \u003c 0.7) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += (P.low[c] * 0.6 + 60 * IL[i * 3 + c]) * a;\n        }\n    }\n  }\n  for (const [, fn, m] of L) {\n    fn();\n    // The groomer's hands in the fur of the one in front of it.\n    if (m && m.i === 0 && P.mk[1].p > 0.5) {\n      const g = P.mk[1], gs = g.s, hx = m.x + 2 * m.s, hy = m.hy - 3 * m.s;\n      M = { wl: g.y, z: m.y + 1, x0: 0, y0: 0 };\n      rod(g.x - 4.8 * gs, g.y - 1.5 * gs, hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.3 * gs, FUR);\n      rod(g.x - 2 * gs, g.y - 1.5 * gs, hx + 4 * m.s, hy + 5 * m.s + sin(T * 2.3), 1.3 * gs, FUR);\n      M.wl = 999;\n      blob(hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.2 * gs, 1 * gs, HAND, 0, 0);\n    }\n  }\n  // The splash: a plume, foam spreading and fading, a ring running out, and\n  // the drops falling back.\n  M = { wl: 999, z: 200, x0: 0, y0: 0 };\n  if (P.spl) {\n    const q = P.spl.t, { x: sx, y: sy } = P.spl, h = 7 * (1 - sm(0, 0.45, q));\n    if (h > 0.5) blob(sx, sy - h, 1.6 + 2 * q, h + 0.5, SNOW, 0, 0);\n    for (let y = floor(sy - 3), rx = 3 + 6 * q, ry = 1.4 + 1.2 * q; y \u003c= sy + 3 && q \u003c 1.4; y++)\n      for (let x = max(0, floor(sx - rx)); x \u003c= min(W - 1, sx + rx); x++) {\n        const e = 1 - ((x + 0.5 - sx) / rx) ** 2 - ((y + 0.5 - sy) / ry) ** 2, o = (y * W + x) * 3;\n        if (e > 0) for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * IL[o + c] * 1.2 - F[o + c]) * min(1, e * 3) * (1 - q / 1.4);\n      }\n    const r = 4 + 20 * q;\n    for (let x = 0; x \u003c W; x++)\n      for (const sd of [-1, 1]) {\n        const dx = (x + 0.5 - P.spl.x) / r, y = floor(P.spl.y + sd * r * 0.3 * sqrt(max(0, 1 - dx * dx)));\n        if (abs(dx) \u003c 1 && y \u003c H && Z[y * W + x] === 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] += 120 * (1 - q / 2) * IL[(y * W + x) * 3 + c];\n      }\n  }\n  for (const [x, y] of P.drops) dot(x, y, SNOW, 1);\n  // The steam over everything, lit by the sky and the lantern.\n  const G = P.G, SC = P.steamC;\n  G.fill(0);\n  for (const q of P.puffs) {\n    const a = q.a * sm(0, 0.9, q.age) * (1 - sm(q.life * 0.5, q.life, q.age)), gx = q.x / 2, gy = q.y / 2, rr = q.r * 0.75;\n    for (let j = max(0, floor(gy - rr * 1.3)); j \u003c= min(GH - 1, gy + rr * 1.3); j++)\n      for (let i = max(0, floor(gx - rr)); i \u003c= min(GW - 1, gx + rr); i++) {\n        const e = 1 - (i + 0.5 - gx) ** 2 / (rr * rr) - (j + 0.5 - gy) ** 2 / (rr * rr * 1.6);\n        if (e > 0) G[j * GW + i] += a * e * e;\n      }\n  }\n  // A low mist on the water, and the steam torn into wisps.\n  for (let j = 0, c = 0; j \u003c GH; j++)\n    for (let i = 0, mist = 0.2 * sm(PB - 8, PB + 14, j * 2 + 1); i \u003c GW; i++, c++)\n      if ((G[c] += mist) > 0.01) G[c] *= 0.2 + 0.85 * vn(i * 0.24 + P.fx, j * 0.17 + P.fy) + 0.45 * vn(i * 0.62 - P.fx, j * 0.44 + P.fy * 2);\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 2 - 0.25, j0 = cl(floor(v), 0, GH - 1), j1 = min(GH - 1, j0 + 1), fv = cl(v - j0, 0, 1), ay = 0.4 + 0.45 * sm(108, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const u2 = x / 2 - 0.25, i0 = cl(floor(u2), 0, GW - 1), i1 = min(GW - 1, i0 + 1), fu = cl(u2 - i0, 0, 1);\n      const D = mix(mix(G[j0 * GW + i0], G[j0 * GW + i1], fu), mix(G[j1 * GW + i0], G[j1 * GW + i1], fu), fv);\n      if (D \u003c 0.05) continue;\n      const a = ay * sm(0.05, 1.3, D), i = y * W + x, o = i * 3, lm = P.lm[i] * lamp * 200;\n      for (let c = 0; c \u003c 3; c++) F[o + c] += (SC[c] + LC[c] * lm - F[o + c]) * a;\n    }\n  }\n  // Snow falling, thicker in the wind.\n  const nf = floor(110 + 70 * abs(P.w));\n  for (let n = 0; n \u003c nf; n++) {\n    const f = P.flakes[n], x = floor(f.x), y = floor(f.y);\n    if (y \u003c 0 || y >= H) continue;\n    const i = y * W + x, o = i * 3, b = 0.45 + 0.5 * f.z;\n    for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * (IL[o + c] * 0.6 + 0.4) - F[o + c]) * b;\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-snow-monkeys","type":"code","name":"snow-monkeys","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Snow Monkeys\n// Family:  mammal\n// Idea:    At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Japanese macaques (Macaca fuscata) that bathe in the hot spring at Jigokudani, Nagano\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1\n//\n// Knob 1: Light. The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it.\n// Knob 2: Speed. At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower.\n// Knob 3: Monkeys. How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam.\n// Knob 4: Wind. Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it.\n// Buttons: K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.\n\nconst W = 64, H = 128, N = W * H, GW = 32, GH = 64;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The back edge of the pool, and how big a monkey stands at a depth row.\nconst PB = 67;\nconst scl = (y) => 0.74 + (y - PB) * 0.0135;\n// The stone lantern's fire box.\nconst [LX, LY] = [8.5, 50.5];\n// The light from evening to night: ambient, sky overhead, sky at the ridge,\n// lit steam, and the lantern's strength.\nconst LIGHT = [\n  [0, 0.5, 0.6, 0.86, 24, 44, 104, 70, 98, 160, 196, 212, 240, 0.25],\n  [0.5, 0.36, 0.4, 0.66, 16, 20, 62, 84, 66, 118, 150, 156, 196, 0.65],\n  [1, 0.2, 0.24, 0.42, 5, 8, 24, 18, 24, 54, 84, 92, 130, 1.1],\n];\nconst LC = [1, 0.62, 0.3];\nconst SNOW = [232, 238, 250], FUR = [218, 184, 150], FACE = [250, 96, 92], EAR = [214, 132, 124], HAND = [120, 84, 78], EYE = [40, 22, 20];\nconst ROCK = [70, 64, 62], NEEDLE = [24, 46, 36], TRUNK = [52, 38, 30], WATER = [34, 70, 74], STONE = [118, 114, 108];\n// Boulders as half ellipses standing on their water line: centre, radii,\n// depth row. The back rim, the boulder in the pool, the near rocks.\nconst ROCKS = [\n  [2, 68, 12, 8, 66], [17, 69, 8, 6, 66], [30, 69, 9, 5, 66], [45, 68, 11, 6, 66], [61, 68, 10, 9, 66],\n  [53, 92, 13, 12, 90],\n  [6, 132, 15, 14, 126], [28, 133, 12, 12, 127], [48, 132, 11, 13, 126], [64, 129, 10, 15, 125],\n];\n// Cedars on the slope, far to near: apex x and row, height, nearness.\nconst TREES = [];\nfor (let i = 0; i \u003c 10; i++) TREES.push([2 + i * 6.7 + 3 * hash(i, 1), 4 + 9 * hash(i, 2), 16 + 8 * hash(i, 3), 0.3]);\nfor (let i = 0; i \u003c 7; i++) TREES.push([i * 10.5 + 5 * hash(i, 4), 16 + 12 * hash(i, 5), 24 + 10 * hash(i, 6), 0.6]);\nTREES.push([3, 12, 52, 1], [61, 6, 56, 1]);\n// Places in the order the Monkeys knob fills them: x, depth row (the seat\n// row on the rim), how low it sits in the water (0 shoulders out, 1 chin in\n// it), and what it does (0 looks about, 1 dozes, 2 grooms the one before\n// it, 3 sits on the rim rocks).\nconst SLOTS = [\n  [24, 101, 0.15, 1], [34, 93, 0.1, 2], [11, 117, 0.6, 1], [30, 64.5, 0, 3], [52, 119, 0.25, 0], [8, 90, 0.2, 0],\n  [41, 63, 0, 3], [61, 110, 0.3, 0], [31, 79, 0.15, 0], [37, 118, 0.3, 1], [23, 121, 0.5, 1], [14, 77, 0.2, 1],\n  [5, 104, 0.2, 0], [46, 86, 0.1, 0],\n];\n// The boulder seats and the way down into the water, as x and bottom row.\nconst SEAT = [52, 81], EDGE = [46, 83.5], FOOT = [44, 93], SPOT = [47, 103], BSEAT = [60, 83], BLAND = [53, 102], BFOOT = [60, 94];\n\nfunction ramp(g, c) {\n  let j = 0;\n  while (j \u003c LIGHT.length - 2 && g > LIGHT[j + 1][0]) j++;\n  const a = LIGHT[j], b = LIGHT[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, f: F32(N * 3), bg: F32(N * 3), il: F32(N * 3), lm: F32(N), z: new Uint8Array(N), G: F32(GW * GH), key: -1,\n    puffs: [], drops: [], acc: 0, vent: 0.5, fx: 0, fy: 0, gust: 0, w: 0, k1: 0, n: 3, spl: null,\n    R: { st: 0, t: 0, dur: 3, lk: 0, lt: 0, lc: 1 }, B: { st: 0, t: 0, nj: 6.2, lk: 0, lt: 0, lc: 2 },\n  });\n  P.sd = 7;\n  P.mk = SLOTS.map(([x, y, sk, pose], i) => ({ x, y, sk, pose, s: pose > 2 ? 0.86 : scl(y), p: 0, sw: i * 0.3, hy: y - 8, lk: pose === 2 ? -0.8 : 0, lt: 0, lc: 1 + rnd() * 3, e: pose === 1 ? 1 : 0, bl: 2 + rnd() * 3, ph: rnd() * 7, i }));\n  P.flakes = Array.from({ length: 180 }, () => {\n    const z = rnd();\n    return { x: rnd() * W, y: rnd() * H, z, ph: rnd() * 7, land: 40 + z * 88 };\n  });\n  P.flakes.forEach((f) => (f.y = rnd() * f.land));\n  P.rg = Array.from({ length: W }, (_, x) => 8 + 5 * vn(x * 0.07, 1.3) - 0.06 * x);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) P.lm[y * W + x] = exp(-((x + 0.5 - LX) ** 2 + (y + 0.5 - LY) ** 2 * 0.8) / 1500);\n}\n\nfunction spawn(P, x, y, a, g = rnd) {\n  P.puffs.push({ x, y, a, r: 2.5 + 2.5 * g(), age: 0, life: 7 + 5 * g(), vy: -(6 + 5 * g()), ph: g() * 7 });\n}\n\n// The steam: puffs off the water, thick clumps from the spring's mouth, all\n// rising, growing and fading, swayed by the gusts and leaned by the wind.\nfunction steam(P, d) {\n  const w = P.w;\n  P.gust = 0.55 * sin(P.t * 0.31) + 0.3 * sin(P.t * 0.83 + 2);\n  for (P.acc += d * 1.8; P.acc > 1; P.acc--) spawn(P, 2 + rnd() * 60 - w * 22, 74 + rnd() * 44, 0.2 + 0.25 * rnd());\n  if ((P.vent -= d) \u003c 0) {\n    P.vent = 0.7 + rnd() * 1.1;\n    const vx = [9, 22, 36][floor(rnd() * 3)] + rnd() * 6 - 3 - w * 14, vy = 72 + rnd() * 16;\n    for (let n = 0; n \u003c 3; n++) spawn(P, vx + rnd() * 8 - 4, vy + rnd() * 6, 0.4 + 0.25 * rnd());\n  }\n  // Wet fur steams in the cold: a wisp off each monkey's head now and then,\n  // from a generator of its own so the rest of the steam keeps its course.\n  for (const m of P.mk)\n    if (m.p > 0.5 && (m.sw -= d) \u003c 0) {\n      const g = () => ((P.sd = (Math.imul(P.sd, 1103515245) + 12345) >>> 0) / 4294967296);\n      m.sw = 0.35 + g() * 0.6;\n      spawn(P, m.x + (g() - 0.5) * 6 * m.s, m.hy - 3 * m.s, 0.25 + 0.2 * g(), g);\n    }\n  const wx = w * 15 + P.gust * 7;\n  for (const q of P.puffs) {\n    q.age += d;\n    const up = sm(84, 20, q.y);\n    q.x += (wx * (0.3 + 0.7 * up) + 1.6 * sin(q.age * 1.3 + q.ph)) * d;\n    q.y += q.vy * (0.5 + 0.5 * sm(0, 2.5, q.age)) * d;\n    q.r += (0.9 + 0.8 * abs(w)) * d;\n  }\n  P.puffs = P.puffs.filter((q) => q.age \u003c q.life * (1 - 0.35 * abs(w)) && q.y + q.r > -4 && q.x > -30 && q.x \u003c 94);\n  P.fx -= wx * 0.2 * d;\n  P.fy += 1.8 * d;\n}\n\n// Where the mother is on her way between the boulder and the pool, u 0..1.\nfunction path(u) {\n  if (u \u003c 0.3) {\n    const q = sm(0, 0.3, u);\n    return [mix(SEAT[0], EDGE[0], q), mix(SEAT[1], EDGE[1], q), 999, 90];\n  }\n  if (u \u003c 0.55) {\n    const q = sm(0.3, 0.55, u);\n    return [mix(EDGE[0], FOOT[0], q), mix(EDGE[1], FOOT[1], q), 999, 90 + 3 * q];\n  }\n  const q = sm(0.55, 1, u), wl = mix(FOOT[1], SPOT[1], q);\n  return [mix(FOOT[0], SPOT[0], q), wl + 9.5 * q * scl(wl), wl, wl];\n}\n\nfunction look(m, d) {\n  if ((m.lc -= d) \u003c 0) (m.lc = 1.2 + rnd() * 3), (m.lt = floor(rnd() * 3) - 1);\n  m.lk += (m.lt - m.lk) * min(1, d * 5);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.k1 = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 3, 14));\n  P.w = cl(k[3], -1, 1);\n  if (!P.init) {\n    // Open on a pool already steaming.\n    for (let i = 0; i \u003c 120; i++) (P.t += 0.1), steam(P, 0.1);\n    P.t = 0;\n    for (const m of P.mk) m.p = m.i \u003c P.n ? 1 : 0;\n    P.init = true;\n  }\n  const T = (P.t += d);\n  steam(P, d);\n  for (const m of P.mk) {\n    m.p = cl(m.p + (m.i \u003c P.n ? d : -d) * 0.8, 0, 1);\n    if (m.pose % 3 === 0) {\n      look(m, d);\n      if ((m.bl -= d) \u003c 0) m.bl = 2 + rnd() * 4;\n      m.e = m.bl \u003c 0.15 ? 1 : 0;\n    }\n  }\n  // The mother sits on the boulder until she wades in to soak. Later she climbs out again.\n  const R = P.R;\n  if ((R.t += d) >= R.dur) {\n    R.st = (R.st + 1) % 4;\n    (R.t = 0), (R.dur = [16 + rnd() * 6, 3, 18 + rnd() * 6, 3.4][R.st]);\n  }\n  look(R, d);\n  // The baby on the boulder: a leap, a splash, a paddle back and a climb.\n  const B = P.B;\n  if (input.btnPressed && input.btnPressed[0] && B.st === 0) B.nj = 0;\n  if (B.st === 0 && (B.nj -= d) \u003c= 0) (B.st = 1), (B.t = 0);\n  if (B.st) B.t += d;\n  if (B.st === 1 && B.t >= 0.7) {\n    (B.st = 2), (B.t = 0), (P.spl = { x: BLAND[0], y: BLAND[1], t: 0 });\n    for (let n = 0; n \u003c 34; n++) {\n      const a = (rnd() - 0.5) * 2.4;\n      P.drops.push([BLAND[0] + a * 2, BLAND[1] - 1, a * 14 + (rnd() - 0.5) * 6, -12 - rnd() * 22, BLAND[1] + (rnd() - 0.3) * 6]);\n    }\n    for (let n = 0; n \u003c 4; n++) spawn(P, BLAND[0] + rnd() * 10 - 5, BLAND[1] - 4, 0.8);\n  }\n  if (B.st === 2 && B.t >= 4.2) (B.st = 3), (B.t = 0);\n  if (B.st === 3 && B.t >= 1.3) (B.st = 0), (B.t = 0), (B.nj = 24 + rnd() * 10);\n  look(B, d);\n  if (P.spl && (P.spl.t += d) > 2) P.spl = null;\n  P.drops = P.drops.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 70 * d);\n    return !(q[3] > 0 && q[1] > q[4]);\n  });\n  for (const f of P.flakes) {\n    f.y += (5 + 9 * f.z) * (1 + 0.6 * abs(P.w)) * d;\n    f.x += ((P.w * 18 + P.gust * 4) * (0.4 + 0.6 * f.z) + 0.9 * sin(T * 1.7 + f.ph)) * d;\n    if (f.y > f.land) (f.y = -2 - rnd() * 4), (f.x = rnd() * W);\n    f.x = ((f.x % W) + W) % W;\n  }\n}\n\n// The valley, the rocks, the lantern and the still water, kept until the light changes.\nfunction backdrop(P) {\n  P.key = round(P.k1 * 60);\n  const g = P.k1, A = [0, 1, 2].map((c) => ramp(g, c)), top = [3, 4, 5].map((c) => ramp(g, c)), low = [6, 7, 8].map((c) => ramp(g, c));\n  const lamp = ramp(g, 12), BG = P.bg, IL = P.il, Z = P.z;\n  P.steamC = [9, 10, 11].map((c) => ramp(g, c));\n  P.lamp = lamp;\n  P.low = low;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, lm = P.lm[i];\n      for (let c = 0; c \u003c 3; c++) IL[o + c] = A[c] + LC[c] * lamp * lm;\n      let col = null, k = 1, z = 0;\n      const rg = P.rg[x];\n      if (y >= rg) {\n        // Snow on the slope, darker where scrub and rock break through.\n        col = SNOW;\n        k = 0.3 + 0.16 * vn(x * 0.12, y * 0.07) + 0.12 * (y / 66);\n        if (vn(x * 0.45 + 3, y * 0.28) > 0.7) k *= 0.45;\n      }\n      for (const [tx, ty, th, f] of TREES) {\n        // Tiers of drooping branches, each loaded with snow along its top.\n        const dx = abs(x + 0.5 - tx), ts = 3.2 + 2.6 * f, yy = y - ty - dx * 0.5, kq = floor(yy / ts), wi = yy - kq * ts;\n        if (yy \u003c 0 || y > ty + th + 3) continue;\n        if (y > ty + th) {\n          if (dx \u003c 0.4 + f) (col = TRUNK), (k = 0.6);\n          continue;\n        }\n        if (dx >= 0.5 + (y - ty) * 0.34 * (0.68 + 0.32 * (wi / ts)) * (0.85 + 0.3 * hash(kq, tx | 0))) continue;\n        if (wi \u003c 1 + 0.6 * f && hash(x, y) > 0.12) (col = SNOW), (k = 0.4 + 0.32 * f - 0.1 * (dx / th));\n        else (col = NEEDLE), (k = wi > ts - 0.7 ? 0.5 : 0.9 + 0.2 * hash(x + 7, y));\n        if (f \u003c 1) k = mix(k, 0.34, (1 - f) * 0.45);\n      }\n      if (y >= PB) (col = WATER), (z = 1), (k = 0.5 + 0.6 * ((y - PB) / 54));\n      for (const [cx, cy, rx, ry, dz] of ROCKS) {\n        const nx = (x + 0.5 - cx) / rx, ny = (y + 0.5 - cy) / ry, dd = nx * nx + ny * ny;\n        if (dd > 1 || y + 0.5 > cy) continue;\n        z = dz;\n        const nz = sqrt(1 - dd);\n        if (ny \u003c -0.42 - 0.22 * nz + 0.25 * (vn(x * 0.6, cy) - 0.5)) (col = SNOW), (k = 0.5 + 0.28 * nz - 0.12 * ny);\n        else (col = ROCK), (k = (0.6 + 0.5 * nz - 0.3 * nx) * (0.75 + 0.4 * vn(x * 0.5, y * 0.5)));\n      }\n      Z[i] = z;\n      if (!col) {\n        const v = (y / rg) ** 1.5;\n        for (let c = 0; c \u003c 3; c++) BG[o + c] = mix(top[c], low[c], v);\n        continue;\n      }\n      for (let c = 0; c \u003c 3; c++) BG[o + c] = col[c] * k * IL[o + c] + (z === 1 ? low[c] * 0.12 : 0);\n    }\n  // The stone lantern: finial, snowed roof, fire box with its glowing window,\n  // pillar and foot, standing on the rim rock.\n  const ROWS = [[42, 0.6, 1], [44, 3.6, 0], [46, 5, 1], [48, 2.6, 2], [54, 3.6, 1], [55, 1.3, 1], [60, 2.8, 1], [62, 0, 1]];\n  for (let r = 0; r \u003c ROWS.length - 1; r++)\n    for (let y = ROWS[r][0]; y \u003c ROWS[r + 1][0]; y++)\n      for (let x = 0; x \u003c 18; x++) {\n        const dx = abs(x + 0.5 - LX), hw = ROWS[r][1] + (r === 2 ? y - 46 : 0) * 0.6, o = (y * W + x) * 3;\n        if (dx > hw) continue;\n        const kind = ROWS[r][2], win = kind === 2 && dx \u003c 1.6 && y > 48 && y \u003c 53;\n        for (let c = 0; c \u003c 3; c++)\n          BG[o + c] = win ? [255, 200, 120][c] * min(1, 0.72 + 0.3 * lamp) : (kind ? STONE[c] * (0.6 + 0.25 * (LX - x) / hw) : SNOW[c] * 0.75) * IL[o + c];\n      }\n}\n\nlet F, IL, Z, M;\n// An ellipse of fur or skin on the monkey being drawn, under its water line\n// and behind any rock nearer than it.\nfunction blob(cx, cy, rx, ry, col, sn, fur) {\n  for (let y = max(0, floor(cy - ry)), y1 = min(H - 1, cy + ry); y \u003c= y1 && y + 0.5 \u003c M.wl; y++) {\n    const ny = (y + 0.5 - cy) / ry;\n    for (let x = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx); x \u003c= x1; x++) {\n      const nx = (x + 0.5 - cx) / rx, dd = nx * nx + ny * ny, i = y * W + x;\n      if (dd > 1 || Z[i] > M.z) continue;\n      const nz = sqrt(1 - dd);\n      let k, c = col;\n      if (fur) {\n        k = (0.36 + 0.55 * nz - 0.25 * ny - 0.12 * nx) * (0.84 + 0.3 * hash(x - M.x0, y - M.y0));\n        if (sn && ny \u003c sn * 0.5 - 1.05 + 0.25 * hash(x - M.x0, 9)) (c = SNOW), (k = 0.75 + 0.25 * nz);\n        else k *= 0.6 + 0.4 * sm(0.3, 2.2, M.wl - y - 0.5);\n      } else k = 0.72 + 0.3 * nz - 0.15 * ny;\n      paint(i, c, k);\n    }\n  }\n}\nfunction paint(i, c, k) {\n  const o = i * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k * (IL[o + n] * 0.6 + 0.4);\n}\nfunction dot(x, y, c, k) {\n  (x = floor(x)), (y = floor(y));\n  if (x >= 0 && x \u003c W && y >= 0 && y + 0.5 \u003c M.wl && Z[y * W + x] \u003c= M.z) paint(y * W + x, c, k);\n}\n// A limb of fur from a to b.\nfunction rod(ax, ay, bx, by, r, col) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = max(0, floor(min(ay, by) - r)); y \u003c= min(H - 1, max(ay, by) + r) && y + 0.5 \u003c M.wl; y++)\n    for (let x = max(0, floor(min(ax, bx) - r)); x \u003c= min(W - 1, max(ax, bx) + r); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t;\n      if (ex * ex + ey * ey > r * r || Z[y * W + x] > M.z) continue;\n      paint(y * W + x, col, (0.75 - 0.2 * (ey / r)) * (0.84 + 0.3 * hash(x, y)));\n    }\n}\n\n// One macaque: x, bottom row, scale, water line, depth, the turn of its head\n// (-1..1), how far it bows, eyes shut, snow on its head, sat on a rock.\nfunction monkey(x, yb, s, wl, z, lk, bow, shut, sn, sat) {\n  M = { wl, z, x0: floor(x), y0: floor(yb) };\n  blob(x, yb - 6.6 * s, 6.8 * s, 6.6 * s, FUR, sat ? 0.3 : 0, 1);\n  if (sat) {\n    for (const sd of [-1, 1]) {\n      blob(x + sd * 3.4 * s, yb - 2.6 * s, 2.7 * s, 2.3 * s, FUR, 0, 1);\n      blob(x + sd * 4.2 * s, yb - 0.6 * s, 1.5 * s, 0.9 * s, HAND, 0, 0);\n    }\n    for (const sd of [-1, 1]) rod(x + sd * 5 * s, yb - 10 * s, x + sd * 1.4 * s, yb - 4.8 * s, 1.4 * s, FUR);\n    blob(x, yb - 4.7 * s, 2 * s, 1 * s, HAND, 0, 0);\n  }\n  const R = 4.4 * s, hx = x + lk * 0.5 * s, hy = yb - (15.2 - bow) * s;\n  for (const sd of [-1, 1]) blob(hx + sd * R * (1 - 0.2 * lk * sd), hy - 0.3 * s, 1.1 * s + 0.2, 1.3 * s + 0.2, EAR, 0, 0);\n  blob(hx, hy, R * 1.05, R * 0.97, FUR, sn, 1);\n  const fx = hx + lk * 1.4 * s, fy = hy + (0.9 + bow * 0.25) * s;\n  blob(fx, fy, 2.2 * s * (1 - 0.2 * abs(lk)), 2.6 * s, FACE, 0, 0);\n  for (const sd of [-1, 1]) dot(fx + sd * 0.95 * s, fy - 0.6 * s, shut > 0.5 ? FACE : EYE, shut > 0.5 ? 0.45 : 1);\n  dot(fx, fy + 1.2 * s, FACE, 0.5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  if (P.key !== round(P.k1 * 60)) backdrop(P);\n  (F = P.f), (IL = P.il), (Z = P.z);\n  F.set(P.bg);\n  const T = P.t, lamp = P.lamp, BG = P.bg;\n  // The water: a slow shiver over it and the lantern's broken reflection.\n  for (let y = PB; y \u003c H; y++) {\n    const sx = 0.7 * sin(y * 0.5 + T * 1.3), rx = LX + 1.4 * sin(y * 0.9 + T * 3), rk = lamp * 140 * sm(104, 70, y);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (Z[i] !== 1) continue;\n      const r = vn(x * 0.3 + sx, y * 0.9 - T * 0.8), o = i * 3, dx = x + 0.5 - rx, ref = dx * dx \u003c 30 && rk ? rk * r * exp((-dx * dx) / 5) : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = BG[o + c] * (0.75 + 0.55 * r) + ref * LC[c];\n    }\n  }\n  // Who is where, back to front.\n  const L = [];\n  for (const m of P.mk) {\n    if (m.p \u003c= 0) continue;\n    if (m.pose > 2) {\n      // On the rim it slides down behind its rock as it goes.\n      const yb = m.y + 20 * (1 - m.p) * m.s;\n      m.hy = yb - 15.2 * m.s;\n      L.push([65, () => monkey(m.x, yb, m.s, 999, 65, m.lk, 0, m.e, 0.6, 1)]);\n      continue;\n    }\n    const wl = m.y + 0.35 * sin(T * 0.7 + m.ph), sk = m.sk + (m.pose === 1 ? 0.08 * sin(T * 0.5 + m.ph) : 0);\n    const yb = wl + (9.5 + 3.4 * sk + 20 * (1 - m.p)) * m.s;\n    m.hy = yb - (15.2 - (m.pose ? 1 : 0)) * m.s;\n    L.push([m.y, () => monkey(m.x, yb, m.s, wl, m.y, m.lk, m.pose ? 1 : 0, m.e, m.pose === 1 ? 1 : 0.55, 0), m]);\n  }\n  const R = P.R, u = R.st === 0 ? 0 : R.st === 2 ? 1 : R.st === 1 ? R.t / 3 : 1 - R.t / 3.4;\n  const [rx, ryb, rwl, rz] = path(u), rs = scl(rz);\n  L.push([rz, () => monkey(rx, ryb, rs, rwl, rz, R.lk, 0, R.st === 2 ? 1 : 0, 0.7, rwl > 900), rwl \u003c 900 && { x: rx, s: rs, p: 1, pose: 0, ph: 0 }]);\n  const B = P.B, bs = 0.64;\n  let bx, byb, bwl = 999, bz = 90;\n  if (B.st === 0) [bx, byb] = BSEAT;\n  else if (B.st === 1) {\n    const q = B.t / 0.7;\n    (bx = mix(BSEAT[0], BLAND[0], q)), (byb = mix(BSEAT[1], BLAND[1], q) - 14 * sin(PI * q)), (bz = mix(90, BLAND[1], q));\n  } else if (B.st === 2) {\n    const q = sm(0.8, 4.2, B.t);\n    (bwl = mix(BLAND[1], BFOOT[1], q)), (bx = mix(BLAND[0], BFOOT[0], q)), (bz = bwl);\n    byb = bwl + (12.5 + 14 * (1 - sm(0.15, 0.6, B.t))) * bs * scl(bwl);\n  } else {\n    const q = sm(0, 1.3, B.t);\n    (bx = mix(BFOOT[0], BSEAT[0], q)), (byb = mix(BFOOT[1], BSEAT[1], q)), (bz = mix(94, 90, q));\n  }\n  L.push([bz, () => monkey(bx, byb, bs * scl(bz), bwl, bz, B.lk, 0, 0, 0.4, B.st !== 2), B.st === 2 && { x: bx, s: 0.6, p: 1, pose: 0, ph: 3 }]);\n  L.sort((a, b) => a[0] - b[0]);\n  // Rings on the water round everyone in it.\n  for (const [z, , m] of L) {\n    if (!m) continue;\n    const s = m.s * m.p;\n    for (let n = 0; n \u003c 3; n++) {\n      const r = 6.5 * s + ((T * (m.pose === 1 ? 1.6 : 3) + n * 4.4 + m.ph) % 13), a = (1 - (r - 6.5 * s) / 13) * 0.8 * m.p;\n      for (let y = floor(z - r * 0.3 - 1); y \u003c= z + r * 0.3 + 1; y++)\n        for (let x = max(0, floor(m.x - r - 1)); x \u003c= min(W - 1, m.x + r + 1); x++) {\n          const i = y * W + x;\n          if (y >= H || Z[i] !== 1) continue;\n          const e = sqrt(((x + 0.5 - m.x) / r) ** 2 + ((y + 0.5 - z) / (r * 0.3)) ** 2);\n          if (abs(e - 1) * r \u003c 0.7) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += (P.low[c] * 0.6 + 60 * IL[i * 3 + c]) * a;\n        }\n    }\n  }\n  for (const [, fn, m] of L) {\n    fn();\n    // The groomer's hands in the fur of the one in front of it.\n    if (m && m.i === 0 && P.mk[1].p > 0.5) {\n      const g = P.mk[1], gs = g.s, hx = m.x + 2 * m.s, hy = m.hy - 3 * m.s;\n      M = { wl: g.y, z: m.y + 1, x0: 0, y0: 0 };\n      rod(g.x - 4.8 * gs, g.y - 1.5 * gs, hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.3 * gs, FUR);\n      rod(g.x - 2 * gs, g.y - 1.5 * gs, hx + 4 * m.s, hy + 5 * m.s + sin(T * 2.3), 1.3 * gs, FUR);\n      M.wl = 999;\n      blob(hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.2 * gs, 1 * gs, HAND, 0, 0);\n    }\n  }\n  // The splash: a plume, foam spreading and fading, a ring running out, and\n  // the drops falling back.\n  M = { wl: 999, z: 200, x0: 0, y0: 0 };\n  if (P.spl) {\n    const q = P.spl.t, { x: sx, y: sy } = P.spl, h = 7 * (1 - sm(0, 0.45, q));\n    if (h > 0.5) blob(sx, sy - h, 1.6 + 2 * q, h + 0.5, SNOW, 0, 0);\n    for (let y = floor(sy - 3), rx = 3 + 6 * q, ry = 1.4 + 1.2 * q; y \u003c= sy + 3 && q \u003c 1.4; y++)\n      for (let x = max(0, floor(sx - rx)); x \u003c= min(W - 1, sx + rx); x++) {\n        const e = 1 - ((x + 0.5 - sx) / rx) ** 2 - ((y + 0.5 - sy) / ry) ** 2, o = (y * W + x) * 3;\n        if (e > 0) for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * IL[o + c] * 1.2 - F[o + c]) * min(1, e * 3) * (1 - q / 1.4);\n      }\n    const r = 4 + 20 * q;\n    for (let x = 0; x \u003c W; x++)\n      for (const sd of [-1, 1]) {\n        const dx = (x + 0.5 - P.spl.x) / r, y = floor(P.spl.y + sd * r * 0.3 * sqrt(max(0, 1 - dx * dx)));\n        if (abs(dx) \u003c 1 && y \u003c H && Z[y * W + x] === 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] += 120 * (1 - q / 2) * IL[(y * W + x) * 3 + c];\n      }\n  }\n  for (const [x, y] of P.drops) dot(x, y, SNOW, 1);\n  // The steam over everything, lit by the sky and the lantern.\n  const G = P.G, SC = P.steamC;\n  G.fill(0);\n  for (const q of P.puffs) {\n    const a = q.a * sm(0, 0.9, q.age) * (1 - sm(q.life * 0.5, q.life, q.age)), gx = q.x / 2, gy = q.y / 2, rr = q.r * 0.75;\n    for (let j = max(0, floor(gy - rr * 1.3)); j \u003c= min(GH - 1, gy + rr * 1.3); j++)\n      for (let i = max(0, floor(gx - rr)); i \u003c= min(GW - 1, gx + rr); i++) {\n        const e = 1 - (i + 0.5 - gx) ** 2 / (rr * rr) - (j + 0.5 - gy) ** 2 / (rr * rr * 1.6);\n        if (e > 0) G[j * GW + i] += a * e * e;\n      }\n  }\n  // A low mist on the water, and the steam torn into wisps.\n  for (let j = 0, c = 0; j \u003c GH; j++)\n    for (let i = 0, mist = 0.2 * sm(PB - 8, PB + 14, j * 2 + 1); i \u003c GW; i++, c++)\n      if ((G[c] += mist) > 0.01) G[c] *= 0.2 + 0.85 * vn(i * 0.24 + P.fx, j * 0.17 + P.fy) + 0.45 * vn(i * 0.62 - P.fx, j * 0.44 + P.fy * 2);\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 2 - 0.25, j0 = cl(floor(v), 0, GH - 1), j1 = min(GH - 1, j0 + 1), fv = cl(v - j0, 0, 1), ay = 0.4 + 0.45 * sm(108, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const u2 = x / 2 - 0.25, i0 = cl(floor(u2), 0, GW - 1), i1 = min(GW - 1, i0 + 1), fu = cl(u2 - i0, 0, 1);\n      const D = mix(mix(G[j0 * GW + i0], G[j0 * GW + i1], fu), mix(G[j1 * GW + i0], G[j1 * GW + i1], fu), fv);\n      if (D \u003c 0.05) continue;\n      const a = ay * sm(0.05, 1.3, D), i = y * W + x, o = i * 3, lm = P.lm[i] * lamp * 200;\n      for (let c = 0; c \u003c 3; c++) F[o + c] += (SC[c] + LC[c] * lm - F[o + c]) * a;\n    }\n  }\n  // Snow falling, thicker in the wind.\n  const nf = floor(110 + 70 * abs(P.w));\n  for (let n = 0; n \u003c nf; n++) {\n    const f = P.flakes[n], x = floor(f.x), y = floor(f.y);\n    if (y \u003c 0 || y >= H) continue;\n    const i = y * W + x, o = i * 3, b = 0.45 + 0.5 * f.z;\n    for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * (IL[o + c] * 0.6 + 0.4) - F[o + c]) * b;\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower."},{"name":"Monkeys","min":3,"max":14,"about":"How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam."},{"name":"Wind","min":-1,"max":1,"about":"Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it."}],"start":[0,2,3,0.06],"measures":{"motion":0.2849,"detail":0.086,"edges":0.3721,"complexity":2.5086,"coverage":0.9682,"colour":0.1461,"drift":0.1151},"knobResponse":[0.1114,0.1216,0.0428,0.1209]},{"slug":"sorting","title":"Sorting","family":"algo","round":2,"note":"막대 64개를 알고리즘 하나가 한 번에 한 동작씩 줄 세워요. 비교하는 막대는 희게, 바꾸는 막대는 붉게 켜지고, 다 서면 위에서 아래로 훑어 확인한 뒤 다시 섞어요.","idea":"Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.","buttons":"K1 tap throws the bars back into a heap.","code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-sorting","type":"code","name":"sorting","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the bars, which run from the shortest to the longest across a third of the colour wheel."},{"name":"Speed","min":0,"max":5,"about":"Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one."},{"name":"Algorithm","min":0,"max":7,"about":"0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand."},{"name":"Rows","min":2,"max":8,"about":"How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them."}],"start":[0,2,0,2],"measures":{"motion":1.5282,"detail":0.0322,"edges":0.8211,"complexity":0.0601,"coverage":0.5078,"colour":0.3589,"drift":0.1727},"knobResponse":[0.2105,0.2338,0.2297,0.1743]},{"slug":"sorting-network","title":"Sorting Network","family":"line","round":33,"note":"실 열여섯 가닥이 이웃끼리 한 쌍씩 자리를 바꿔 128줄 만에 순서가 거꾸로 되고, 다음 네트워크가 이어받아 실마다 패널을 사인 곡선으로 가로질러요. 균일한 무작위 정렬 네트워크라 바꾼 자리를 찍은 점이 가운데로 반원 꼴로 몰려요. K3 은 실을 32가닥까지 늘리고, K1 을 누르면 실 하나만 8초 동안 밝혀 그 곡선을 보여 줘요.","idea":"Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.","buttons":"K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.","code":"// ===== Patternflow pattern =====\n// Title:   Sorting Network\n// Family:  line\n// Idea:    Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: uniform random sorting networks (Omer Angel, Alexander Holroyd, Dan Romik, Bálint Virág, 2007), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1\n//\n// Knob 1: Hue. Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right.\n// Knob 2: Speed. Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds.\n// Knob 3: Wires. How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row.\n// Knob 4: Bubble. Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns.\n// Buttons: K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.\n\nconst W = 64, H = 128, NET = 128;\nconst HMAX = 12, HALF_PI = Math.PI / 2;\nconst { min, max, floor, ceil, sin, cos } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A uniformly random standard Young tableau of the staircase (n-1, ..., 1),\n// by the hook walk of Greene, Nijenhuis and Wilf (1979): start on a uniform\n// cell, jump to a uniform other cell of its hook until the walk stands on a\n// corner, write the largest number not yet used there, take the corner off.\n// T[r * (n-1) + c], 0-indexed, rows of n-1-r cells.\nfunction hookWalk(n) {\n  const R = n - 1, len = new Int32Array(R), T = new Int32Array(R * R);\n  for (let r = 0; r \u003c R; r++) len[r] = R - r;\n  let cells = (n * (n - 1)) / 2;\n  for (let val = cells; val >= 1; val--, cells--) {\n    let k = floor(Math.random() * cells), r = 0;\n    while (k >= len[r]) (k -= len[r]), r++;\n    let c = k;\n    for (;;) {\n      const arm = len[r] - 1 - c;\n      let leg = 0;\n      while (r + leg + 1 \u003c R && len[r + leg + 1] > c) leg++;\n      if (arm + leg === 0) break;\n      const h = floor(Math.random() * (arm + leg));\n      if (h \u003c arm) c += 1 + h;\n      else r += 1 + h - arm;\n    }\n    T[r * R + c] = val;\n    len[r]--;\n  }\n  return T;\n}\n\n// The tableau read row by row, 1 to N: under Edelman-Greene it is the\n// bubble-sort network run backwards in time, 1 | 2 1 | 3 2 1 | ..., where\n// the thread in place k walks left past all k threads before it in one\n// straight diagonal. Read column by column it is the mirror image.\nfunction readTableau(n, byRow) {\n  const R = n - 1, T = new Int32Array(R * R);\n  let v = 1;\n  for (let a = 0; a \u003c R; a++) for (let b = 0; b \u003c R - a; b++) T[byRow ? a * R + b : b * R + a] = v++;\n  return T;\n}\n\n// Edelman-Greene (1987), as Angel, Holroyd, Romik and Virag lay it out:\n// N times over, the largest entry N sits in a corner (i, j) with i + j = n,\n// 1-indexed; swap places j and j + 1; empty that cell and slide the hole to\n// (1, 1), each time moving in the larger of the neighbours above and to the\n// left; add 1 to every entry and write 1 in (1, 1). Adding 1 to everything\n// is kept as one offset, so a network costs N * n steps, not N * N. Checked\n// in a scratch script over 1400 networks with n from 3 to 32: every swap\n// takes a pair still in order and each network ends reversed; at n = 4 all\n// 16 reduced words of the longest permutation came out equally often.\nfunction edelmanGreene(T0, n, out) {\n  const R = n - 1, N = (n * (n - 1)) / 2, t = Int32Array.from(T0);\n  let off = 0;\n  for (let s = 0; s \u003c N; s++) {\n    let r = 0;\n    while (r \u003c R && t[r * R + R - 1 - r] + off !== N) r++;\n    let c = R - 1 - r;\n    out[s] = c;\n    for (;;) {\n      const up = r > 0 ? t[(r - 1) * R + c] : -1e9, lf = c > 0 ? t[r * R + c - 1] : -1e9;\n      if (r === 0 && c === 0) break;\n      if (up > lf) (t[r * R + c] = up), r--;\n      else (t[r * R + c] = lf), c--;\n    }\n    off++;\n    t[0] = 1 - off;\n  }\n}\n\n// Each cell gets (1 - b) * uniform + b * bubble. Both tableaux grow along\n// rows and down columns, so their blend does too, and ranking the cells by\n// it is a standard tableau again: a sorting network for every b.\nfunction network(P, net) {\n  const n = P.n, R = n - 1, N = (n * (n - 1)) / 2, b = P.bubble;\n  const Tb = (net.m & 1) === 0 ? P.tabRow : P.tabCol;\n  let T = net.tu;\n  if (b > 0) {\n    const key = new Float64Array(R * R), ids = [];\n    for (let r = 0; r \u003c R; r++) for (let c = 0; c \u003c R - r; c++) {\n      const i = r * R + c;\n      key[i] = (1 - b) * net.tu[i] + b * Tb[i];\n      ids.push(i);\n    }\n    ids.sort((x, y) => key[x] - key[y] || x - y);\n    T = new Int32Array(R * R);\n    for (let k = 0; k \u003c N; k++) T[ids[k]] = k + 1;\n  }\n  edelmanGreene(T, n, net.sw);\n  // The cheap form of the check, once a network: every swap must take a\n  // pair still in its starting order, and the end must be the reversal.\n  // A miss falls back on bubble sort, which is always right.\n  const a = Int32Array.from({ length: n }, (_, i) => i);\n  let ok = true;\n  for (let s = 0; s \u003c N && ok; s++) {\n    const p = net.sw[s], x = a[p];\n    if (x > a[p + 1]) ok = false;\n    (a[p] = a[p + 1]), (a[p + 1] = x);\n  }\n  for (let i = 0; i \u003c n && ok; i++) if (a[i] !== n - 1 - i) ok = false;\n  if (!ok) edelmanGreene(Tb, n, net.sw);\n  net.b = b;\n}\n\nfunction rebuild(P) {\n  const n = P.n;\n  P.tabRow = readTableau(n, true);\n  P.tabCol = readTableau(n, false);\n  P.nets = new Map();\n  P.cols = new Float32Array(n * 3);\n  // Four threads are drawn bright, both edges and two between, 0, 5, 10\n  // and 15 of sixteen: the edges swing all the way across on half a cosine,\n  // the two inside on arcs whose height the network picks.\n  P.lead = new Uint8Array(n);\n  for (let k = 0; k \u003c 4; k++) P.lead[Math.round((k * (n - 1)) / 3)] = 1;\n  P.colHue = NaN;\n  const cap = 4 * ((n * (n - 1)) / 2) + 8;\n  P.mt = new Float32Array(cap);\n  P.md = new Int8Array(cap);\n  P.mw = new Int32Array(cap);\n  P.mh = new Float32Array(cap);\n  P.mr = new Float32Array(cap);\n  P.dt_ = new Float32Array(cap);\n  P.dp = new Int32Array(cap);\n  P.da = new Int32Array(cap);\n  P.db = new Int32Array(cap);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 16, bubble: 0.06, scroll: 0, hl: -1, hlT: 0, hlA: 0,\n    buf: new Float32Array(W * H * 3),\n  };\n  rebuild(params.s);\n}\n\nfunction getNet(P, m) {\n  let net = P.nets.get(m);\n  if (!net) {\n    net = { m, tu: hookWalk(P.n), sw: new Int32Array((P.n * (P.n - 1)) / 2), b: -1 };\n    P.nets.set(m, net);\n  }\n  if (net.b !== P.bubble) network(P, net);\n  return net;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  const n = cl(Math.round(k[2]), 16, 32);\n  if (n !== P.n) (P.n = n), rebuild(P), (P.hl = -1), (P.hlT = 0);\n  // Bubble moves in steps of 1/200 so a knob resting between two readings\n  // does not rebuild the networks every frame.\n  P.bubble = Math.round(cl(k[3], 0, 1) * 200) / 200;\n  if (input.btnPressed && input.btnPressed[0]) {\n    let w = floor(Math.random() * (P.hl \u003c 0 ? P.n : P.n - 1));\n    if (P.hl >= 0 && w >= P.hl) w++;\n    P.hl = w;\n    P.hlT = 8;\n  }\n  P.hlT = max(0, P.hlT - d);\n  P.hlA += ((P.hlT > 0 ? 1 : 0) - P.hlA) * min(1, d * 5);\n  P.scroll += d * P.speed * 4;\n  const first = floor(P.scroll / NET) - 1;\n  for (const m of P.nets.keys()) if (m \u003c first) P.nets.delete(m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, N = (n * (n - 1)) / 2, buf = P.buf, sp = W / n;\n  if (P.colHue !== P.hue) {\n    // Gold through green, cyan and blue to violet: the thread that starts on\n    // the left is gold at Hue 0, the one on the right violet, never red.\n    for (let v = 0; v \u003c n; v++) hsv(P.hue + 0.14 + (0.64 * v) / (n - 1), 0.82, 1, P.cols, v * 3);\n    P.colHue = P.hue;\n  }\n  buf.fill(0);\n  // Every move in sight, in time order. Row y holds network time scroll + y;\n  // network m fills times 128 m to 128 (m + 1) and starts from the identity\n  // when m is even, from the reversal when m is odd, so threads run on from\n  // one network into the next and nothing has to be carried between them.\n  const T0 = P.scroll - HMAX - 1, T1 = P.scroll + H + HMAX + 1;\n  const cnt = new Int32Array(n), mt = P.mt, md = P.md, mw = P.mw, mh = P.mh, mr = P.mr;\n  // Moves are grouped by thread: thread w owns slots w * per .. w * per + per.\n  const per = floor(mt.length / n);\n  let nd = 0;\n  for (let m = floor(T0 / NET); m \u003c= floor(T1 / NET); m++) {\n    const net = getNet(P, m), st = new Int32Array(n);\n    for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n    for (let s = 0; s \u003c N; s++) {\n      const t = m * NET + ((s + 0.5) * NET) / N, p = net.sw[s], a = st[p], b = st[p + 1];\n      st[p] = b;\n      st[p + 1] = a;\n      if (t \u003c T0 || t > T1) continue;\n      if (cnt[a] >= per || cnt[b] >= per) continue;\n      const ia = a * per + cnt[a]++, ib = b * per + cnt[b]++;\n      (mt[ia] = t), (md[ia] = 1), (mw[ia] = p);\n      (mt[ib] = t), (md[ib] = -1), (mw[ib] = p + 1);\n      P.dt_[nd] = t;\n      P.dp[nd] = p;\n      P.da[nd] = a;\n      P.db[nd] = b;\n      nd++;\n    }\n  }\n  // A thread leaves the middle of its place halfway between its swaps,\n  // meets its partner on the boundary at the swap and settles in the middle\n  // of the next place halfway to its swap after, never taking more than\n  // HMAX rows a side. Each thread keeps its own timing, so it is always\n  // under way and still crosses its partner at the dot: both are on the\n  // boundary at the swap time.\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    for (let i = 0; i \u003c cnt[w]; i++) {\n      mh[o + i] = i > 0 ? min(HMAX, (mt[o + i] - mt[o + i - 1]) / 2) : HMAX;\n      mr[o + i] = i + 1 \u003c cnt[w] ? min(HMAX, (mt[o + i + 1] - mt[o + i]) / 2) : HMAX;\n    }\n  }\n  const hlA = P.hlA, cols = P.cols;\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    // Place of thread w at the top of the window: where its first move in\n    // sight starts from, or, with no move in sight, where it sits.\n    let i = 0;\n    let base = cnt[w] > 0 ? mw[o] - md[o] : placeAt(P, w, T0);\n    const lead = P.lead[w], lit = w === P.hl ? 1 : 1 - 0.75 * hlA;\n    const gain = ((lead ? 0.85 : 0.4) + (w === P.hl ? (1 - (lead ? 0.85 : 0.4)) * hlA : 0)) * lit;\n    const cr = cols[w * 3] * gain, cg = cols[w * 3 + 1] * gain, cb = cols[w * 3 + 2] * gain;\n    // A quarter cosine into the boundary and a quarter sine out of it.\n    const xAt = (t) => {\n      while (i \u003c cnt[w] && t >= mt[o + i] + mr[o + i]) (base += md[o + i]), i++;\n      let pos = base;\n      if (i \u003c cnt[w]) {\n        const u = t - mt[o + i];\n        if (u >= 0) pos += md[o + i] * (0.5 + 0.5 * sin((u / mr[o + i]) * HALF_PI));\n        else if (u > -mh[o + i]) pos += md[o + i] * 0.5 * (1 - cos(((u + mh[o + i]) / mh[o + i]) * HALF_PI));\n      }\n      return (pos + 0.5) * sp;\n    };\n    for (let y = 0; y \u003c H; y++) {\n      const t = P.scroll + y, xa = xAt(t), xm = xAt(t + 0.5), xb = xAt(t + 1);\n      const lo = min(xa, xm, xb), hi = max(xa, xm, xb);\n      const c0 = max(0, floor(lo - 1)), c1 = min(W - 1, ceil(hi + 1));\n      for (let c = c0; c \u003c= c1; c++) {\n        const cx = c + 0.5, dist = cx \u003c lo ? lo - cx : cx > hi ? cx - hi : 0;\n        const a = cl((1 - dist) * 1.6, 0, 1);\n        if (a \u003c= 0) continue;\n        const q = (y * W + c) * 3;\n        buf[q] += cr * a;\n        buf[q + 1] += cg * a;\n        buf[q + 2] += cb * a;\n      }\n    }\n  }\n  // The swaps: a pale dot where the two threads meet, half white and half\n  // the mix of the pair. Their density across the panel is the semicircle.\n  for (let j = 0; j \u003c nd; j++) {\n    const yc = P.dt_[j] - P.scroll, xc = (P.dp[j] + 1) * sp;\n    if (yc \u003c -2 || yc > H + 2) continue;\n    const a = P.da[j], b = P.db[j];\n    const dim = hlA > 0 && a !== P.hl && b !== P.hl ? 1 - 0.6 * hlA : 1;\n    const r = (0.55 + 0.25 * (cols[a * 3] + cols[b * 3])) * dim;\n    const g = (0.55 + 0.25 * (cols[a * 3 + 1] + cols[b * 3 + 1])) * dim;\n    const bl = (0.55 + 0.25 * (cols[a * 3 + 2] + cols[b * 3 + 2])) * dim;\n    for (let y = floor(yc - 1.5); y \u003c= ceil(yc + 1.5); y++) {\n      if (y \u003c 0 || y >= H) continue;\n      for (let x = floor(xc - 1.5); x \u003c= ceil(xc + 1.5); x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const dx = x + 0.5 - xc, dy = y + 0.5 - yc, f = cl(1.15 - (dx * dx + dy * dy) * 0.55, 0, 1);\n        if (f \u003c= 0) continue;\n        const q = (y * W + x) * 3;\n        buf[q] = max(buf[q], r * f);\n        buf[q + 1] = max(buf[q + 1], g * f);\n        buf[q + 2] = max(buf[q + 2], bl * f);\n      }\n    }\n  }\n  for (let p = 0, q = 0; p \u003c W * H; p++, q += 3) {\n    const x = p % W, y = (p / W) | 0;\n    display.setPixel(x, y, min(255, buf[q] * 255), min(255, buf[q + 1] * 255), min(255, buf[q + 2] * 255));\n  }\n}\n\n// Where thread w sits at time t, by playing its network from the start.\nfunction placeAt(P, w, t) {\n  const n = P.n, N = (n * (n - 1)) / 2, m = floor(t / NET), net = getNet(P, m);\n  let pos = m & 1 ? n - 1 - w : w;\n  const st = new Int32Array(n);\n  for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n  for (let s = 0; s \u003c N; s++) {\n    if (m * NET + ((s + 0.5) * NET) / N > t) break;\n    const p = net.sw[s], a = st[p];\n    st[p] = st[p + 1];\n    st[p + 1] = a;\n    if (st[p] === w) pos = p;\n    else if (st[p + 1] === w) pos = p + 1;\n  }\n  return pos;\n}\n","layer":{"id":"layer-sorting-network","type":"code","name":"sorting-network","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sorting Network\n// Family:  line\n// Idea:    Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: uniform random sorting networks (Omer Angel, Alexander Holroyd, Dan Romik, Bálint Virág, 2007), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1\n//\n// Knob 1: Hue. Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right.\n// Knob 2: Speed. Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds.\n// Knob 3: Wires. How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row.\n// Knob 4: Bubble. Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns.\n// Buttons: K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.\n\nconst W = 64, H = 128, NET = 128;\nconst HMAX = 12, HALF_PI = Math.PI / 2;\nconst { min, max, floor, ceil, sin, cos } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A uniformly random standard Young tableau of the staircase (n-1, ..., 1),\n// by the hook walk of Greene, Nijenhuis and Wilf (1979): start on a uniform\n// cell, jump to a uniform other cell of its hook until the walk stands on a\n// corner, write the largest number not yet used there, take the corner off.\n// T[r * (n-1) + c], 0-indexed, rows of n-1-r cells.\nfunction hookWalk(n) {\n  const R = n - 1, len = new Int32Array(R), T = new Int32Array(R * R);\n  for (let r = 0; r \u003c R; r++) len[r] = R - r;\n  let cells = (n * (n - 1)) / 2;\n  for (let val = cells; val >= 1; val--, cells--) {\n    let k = floor(Math.random() * cells), r = 0;\n    while (k >= len[r]) (k -= len[r]), r++;\n    let c = k;\n    for (;;) {\n      const arm = len[r] - 1 - c;\n      let leg = 0;\n      while (r + leg + 1 \u003c R && len[r + leg + 1] > c) leg++;\n      if (arm + leg === 0) break;\n      const h = floor(Math.random() * (arm + leg));\n      if (h \u003c arm) c += 1 + h;\n      else r += 1 + h - arm;\n    }\n    T[r * R + c] = val;\n    len[r]--;\n  }\n  return T;\n}\n\n// The tableau read row by row, 1 to N: under Edelman-Greene it is the\n// bubble-sort network run backwards in time, 1 | 2 1 | 3 2 1 | ..., where\n// the thread in place k walks left past all k threads before it in one\n// straight diagonal. Read column by column it is the mirror image.\nfunction readTableau(n, byRow) {\n  const R = n - 1, T = new Int32Array(R * R);\n  let v = 1;\n  for (let a = 0; a \u003c R; a++) for (let b = 0; b \u003c R - a; b++) T[byRow ? a * R + b : b * R + a] = v++;\n  return T;\n}\n\n// Edelman-Greene (1987), as Angel, Holroyd, Romik and Virag lay it out:\n// N times over, the largest entry N sits in a corner (i, j) with i + j = n,\n// 1-indexed; swap places j and j + 1; empty that cell and slide the hole to\n// (1, 1), each time moving in the larger of the neighbours above and to the\n// left; add 1 to every entry and write 1 in (1, 1). Adding 1 to everything\n// is kept as one offset, so a network costs N * n steps, not N * N. Checked\n// in a scratch script over 1400 networks with n from 3 to 32: every swap\n// takes a pair still in order and each network ends reversed; at n = 4 all\n// 16 reduced words of the longest permutation came out equally often.\nfunction edelmanGreene(T0, n, out) {\n  const R = n - 1, N = (n * (n - 1)) / 2, t = Int32Array.from(T0);\n  let off = 0;\n  for (let s = 0; s \u003c N; s++) {\n    let r = 0;\n    while (r \u003c R && t[r * R + R - 1 - r] + off !== N) r++;\n    let c = R - 1 - r;\n    out[s] = c;\n    for (;;) {\n      const up = r > 0 ? t[(r - 1) * R + c] : -1e9, lf = c > 0 ? t[r * R + c - 1] : -1e9;\n      if (r === 0 && c === 0) break;\n      if (up > lf) (t[r * R + c] = up), r--;\n      else (t[r * R + c] = lf), c--;\n    }\n    off++;\n    t[0] = 1 - off;\n  }\n}\n\n// Each cell gets (1 - b) * uniform + b * bubble. Both tableaux grow along\n// rows and down columns, so their blend does too, and ranking the cells by\n// it is a standard tableau again: a sorting network for every b.\nfunction network(P, net) {\n  const n = P.n, R = n - 1, N = (n * (n - 1)) / 2, b = P.bubble;\n  const Tb = (net.m & 1) === 0 ? P.tabRow : P.tabCol;\n  let T = net.tu;\n  if (b > 0) {\n    const key = new Float64Array(R * R), ids = [];\n    for (let r = 0; r \u003c R; r++) for (let c = 0; c \u003c R - r; c++) {\n      const i = r * R + c;\n      key[i] = (1 - b) * net.tu[i] + b * Tb[i];\n      ids.push(i);\n    }\n    ids.sort((x, y) => key[x] - key[y] || x - y);\n    T = new Int32Array(R * R);\n    for (let k = 0; k \u003c N; k++) T[ids[k]] = k + 1;\n  }\n  edelmanGreene(T, n, net.sw);\n  // The cheap form of the check, once a network: every swap must take a\n  // pair still in its starting order, and the end must be the reversal.\n  // A miss falls back on bubble sort, which is always right.\n  const a = Int32Array.from({ length: n }, (_, i) => i);\n  let ok = true;\n  for (let s = 0; s \u003c N && ok; s++) {\n    const p = net.sw[s], x = a[p];\n    if (x > a[p + 1]) ok = false;\n    (a[p] = a[p + 1]), (a[p + 1] = x);\n  }\n  for (let i = 0; i \u003c n && ok; i++) if (a[i] !== n - 1 - i) ok = false;\n  if (!ok) edelmanGreene(Tb, n, net.sw);\n  net.b = b;\n}\n\nfunction rebuild(P) {\n  const n = P.n;\n  P.tabRow = readTableau(n, true);\n  P.tabCol = readTableau(n, false);\n  P.nets = new Map();\n  P.cols = new Float32Array(n * 3);\n  // Four threads are drawn bright, both edges and two between, 0, 5, 10\n  // and 15 of sixteen: the edges swing all the way across on half a cosine,\n  // the two inside on arcs whose height the network picks.\n  P.lead = new Uint8Array(n);\n  for (let k = 0; k \u003c 4; k++) P.lead[Math.round((k * (n - 1)) / 3)] = 1;\n  P.colHue = NaN;\n  const cap = 4 * ((n * (n - 1)) / 2) + 8;\n  P.mt = new Float32Array(cap);\n  P.md = new Int8Array(cap);\n  P.mw = new Int32Array(cap);\n  P.mh = new Float32Array(cap);\n  P.mr = new Float32Array(cap);\n  P.dt_ = new Float32Array(cap);\n  P.dp = new Int32Array(cap);\n  P.da = new Int32Array(cap);\n  P.db = new Int32Array(cap);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 16, bubble: 0.06, scroll: 0, hl: -1, hlT: 0, hlA: 0,\n    buf: new Float32Array(W * H * 3),\n  };\n  rebuild(params.s);\n}\n\nfunction getNet(P, m) {\n  let net = P.nets.get(m);\n  if (!net) {\n    net = { m, tu: hookWalk(P.n), sw: new Int32Array((P.n * (P.n - 1)) / 2), b: -1 };\n    P.nets.set(m, net);\n  }\n  if (net.b !== P.bubble) network(P, net);\n  return net;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  const n = cl(Math.round(k[2]), 16, 32);\n  if (n !== P.n) (P.n = n), rebuild(P), (P.hl = -1), (P.hlT = 0);\n  // Bubble moves in steps of 1/200 so a knob resting between two readings\n  // does not rebuild the networks every frame.\n  P.bubble = Math.round(cl(k[3], 0, 1) * 200) / 200;\n  if (input.btnPressed && input.btnPressed[0]) {\n    let w = floor(Math.random() * (P.hl \u003c 0 ? P.n : P.n - 1));\n    if (P.hl >= 0 && w >= P.hl) w++;\n    P.hl = w;\n    P.hlT = 8;\n  }\n  P.hlT = max(0, P.hlT - d);\n  P.hlA += ((P.hlT > 0 ? 1 : 0) - P.hlA) * min(1, d * 5);\n  P.scroll += d * P.speed * 4;\n  const first = floor(P.scroll / NET) - 1;\n  for (const m of P.nets.keys()) if (m \u003c first) P.nets.delete(m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, N = (n * (n - 1)) / 2, buf = P.buf, sp = W / n;\n  if (P.colHue !== P.hue) {\n    // Gold through green, cyan and blue to violet: the thread that starts on\n    // the left is gold at Hue 0, the one on the right violet, never red.\n    for (let v = 0; v \u003c n; v++) hsv(P.hue + 0.14 + (0.64 * v) / (n - 1), 0.82, 1, P.cols, v * 3);\n    P.colHue = P.hue;\n  }\n  buf.fill(0);\n  // Every move in sight, in time order. Row y holds network time scroll + y;\n  // network m fills times 128 m to 128 (m + 1) and starts from the identity\n  // when m is even, from the reversal when m is odd, so threads run on from\n  // one network into the next and nothing has to be carried between them.\n  const T0 = P.scroll - HMAX - 1, T1 = P.scroll + H + HMAX + 1;\n  const cnt = new Int32Array(n), mt = P.mt, md = P.md, mw = P.mw, mh = P.mh, mr = P.mr;\n  // Moves are grouped by thread: thread w owns slots w * per .. w * per + per.\n  const per = floor(mt.length / n);\n  let nd = 0;\n  for (let m = floor(T0 / NET); m \u003c= floor(T1 / NET); m++) {\n    const net = getNet(P, m), st = new Int32Array(n);\n    for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n    for (let s = 0; s \u003c N; s++) {\n      const t = m * NET + ((s + 0.5) * NET) / N, p = net.sw[s], a = st[p], b = st[p + 1];\n      st[p] = b;\n      st[p + 1] = a;\n      if (t \u003c T0 || t > T1) continue;\n      if (cnt[a] >= per || cnt[b] >= per) continue;\n      const ia = a * per + cnt[a]++, ib = b * per + cnt[b]++;\n      (mt[ia] = t), (md[ia] = 1), (mw[ia] = p);\n      (mt[ib] = t), (md[ib] = -1), (mw[ib] = p + 1);\n      P.dt_[nd] = t;\n      P.dp[nd] = p;\n      P.da[nd] = a;\n      P.db[nd] = b;\n      nd++;\n    }\n  }\n  // A thread leaves the middle of its place halfway between its swaps,\n  // meets its partner on the boundary at the swap and settles in the middle\n  // of the next place halfway to its swap after, never taking more than\n  // HMAX rows a side. Each thread keeps its own timing, so it is always\n  // under way and still crosses its partner at the dot: both are on the\n  // boundary at the swap time.\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    for (let i = 0; i \u003c cnt[w]; i++) {\n      mh[o + i] = i > 0 ? min(HMAX, (mt[o + i] - mt[o + i - 1]) / 2) : HMAX;\n      mr[o + i] = i + 1 \u003c cnt[w] ? min(HMAX, (mt[o + i + 1] - mt[o + i]) / 2) : HMAX;\n    }\n  }\n  const hlA = P.hlA, cols = P.cols;\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    // Place of thread w at the top of the window: where its first move in\n    // sight starts from, or, with no move in sight, where it sits.\n    let i = 0;\n    let base = cnt[w] > 0 ? mw[o] - md[o] : placeAt(P, w, T0);\n    const lead = P.lead[w], lit = w === P.hl ? 1 : 1 - 0.75 * hlA;\n    const gain = ((lead ? 0.85 : 0.4) + (w === P.hl ? (1 - (lead ? 0.85 : 0.4)) * hlA : 0)) * lit;\n    const cr = cols[w * 3] * gain, cg = cols[w * 3 + 1] * gain, cb = cols[w * 3 + 2] * gain;\n    // A quarter cosine into the boundary and a quarter sine out of it.\n    const xAt = (t) => {\n      while (i \u003c cnt[w] && t >= mt[o + i] + mr[o + i]) (base += md[o + i]), i++;\n      let pos = base;\n      if (i \u003c cnt[w]) {\n        const u = t - mt[o + i];\n        if (u >= 0) pos += md[o + i] * (0.5 + 0.5 * sin((u / mr[o + i]) * HALF_PI));\n        else if (u > -mh[o + i]) pos += md[o + i] * 0.5 * (1 - cos(((u + mh[o + i]) / mh[o + i]) * HALF_PI));\n      }\n      return (pos + 0.5) * sp;\n    };\n    for (let y = 0; y \u003c H; y++) {\n      const t = P.scroll + y, xa = xAt(t), xm = xAt(t + 0.5), xb = xAt(t + 1);\n      const lo = min(xa, xm, xb), hi = max(xa, xm, xb);\n      const c0 = max(0, floor(lo - 1)), c1 = min(W - 1, ceil(hi + 1));\n      for (let c = c0; c \u003c= c1; c++) {\n        const cx = c + 0.5, dist = cx \u003c lo ? lo - cx : cx > hi ? cx - hi : 0;\n        const a = cl((1 - dist) * 1.6, 0, 1);\n        if (a \u003c= 0) continue;\n        const q = (y * W + c) * 3;\n        buf[q] += cr * a;\n        buf[q + 1] += cg * a;\n        buf[q + 2] += cb * a;\n      }\n    }\n  }\n  // The swaps: a pale dot where the two threads meet, half white and half\n  // the mix of the pair. Their density across the panel is the semicircle.\n  for (let j = 0; j \u003c nd; j++) {\n    const yc = P.dt_[j] - P.scroll, xc = (P.dp[j] + 1) * sp;\n    if (yc \u003c -2 || yc > H + 2) continue;\n    const a = P.da[j], b = P.db[j];\n    const dim = hlA > 0 && a !== P.hl && b !== P.hl ? 1 - 0.6 * hlA : 1;\n    const r = (0.55 + 0.25 * (cols[a * 3] + cols[b * 3])) * dim;\n    const g = (0.55 + 0.25 * (cols[a * 3 + 1] + cols[b * 3 + 1])) * dim;\n    const bl = (0.55 + 0.25 * (cols[a * 3 + 2] + cols[b * 3 + 2])) * dim;\n    for (let y = floor(yc - 1.5); y \u003c= ceil(yc + 1.5); y++) {\n      if (y \u003c 0 || y >= H) continue;\n      for (let x = floor(xc - 1.5); x \u003c= ceil(xc + 1.5); x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const dx = x + 0.5 - xc, dy = y + 0.5 - yc, f = cl(1.15 - (dx * dx + dy * dy) * 0.55, 0, 1);\n        if (f \u003c= 0) continue;\n        const q = (y * W + x) * 3;\n        buf[q] = max(buf[q], r * f);\n        buf[q + 1] = max(buf[q + 1], g * f);\n        buf[q + 2] = max(buf[q + 2], bl * f);\n      }\n    }\n  }\n  for (let p = 0, q = 0; p \u003c W * H; p++, q += 3) {\n    const x = p % W, y = (p / W) | 0;\n    display.setPixel(x, y, min(255, buf[q] * 255), min(255, buf[q + 1] * 255), min(255, buf[q + 2] * 255));\n  }\n}\n\n// Where thread w sits at time t, by playing its network from the start.\nfunction placeAt(P, w, t) {\n  const n = P.n, N = (n * (n - 1)) / 2, m = floor(t / NET), net = getNet(P, m);\n  let pos = m & 1 ? n - 1 - w : w;\n  const st = new Int32Array(n);\n  for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n  for (let s = 0; s \u003c N; s++) {\n    if (m * NET + ((s + 0.5) * NET) / N > t) break;\n    const p = net.sw[s], a = st[p];\n    st[p] = st[p + 1];\n    st[p + 1] = a;\n    if (st[p] === w) pos = p;\n    else if (st[p + 1] === w) pos = p + 1;\n  }\n  return pos;\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right."},{"name":"Speed","min":0.2,"max":3,"about":"Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds."},{"name":"Wires","min":16,"max":32,"about":"How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row."},{"name":"Bubble","min":0,"max":1,"about":"Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns."}],"start":[0,2,16,0.06],"measures":{"motion":1.187,"detail":0.1748,"edges":0.7005,"complexity":1.5147,"coverage":0.5118,"colour":0.2962,"drift":0.1325},"knobResponse":[0.1544,0.2402,0.3244,0.2291]},{"slug":"sparks","title":"Sparks","family":"particle","round":1,"note":"불꽃마다 흰빛에서 식어 가는 색이 제 나이를 보여 줘요. 꽃불 세 가지가 느슨한 박자로 터져요.","idea":"Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.","buttons":"K1 tap fires a shell straight away.","code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-sparks","type":"code","name":"sparks","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":1,"about":"At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour."},{"name":"Rate","min":0.6,"max":5,"about":"How often a rocket goes up; the beat stays loose, with doubles and the odd rest."},{"name":"Gravity","min":-1,"max":1,"about":"At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers."},{"name":"Trail","min":0.3,"max":1.8,"about":"Seconds a spark's streak takes to fade."}],"start":[0,2,0,0.3],"measures":{"motion":0.3313,"detail":0.0372,"edges":0.402,"complexity":0.7208,"coverage":0.1596,"colour":0.1435,"drift":0.1348},"knobResponse":[0.034,0.0885,0.063,0.0577]},{"slug":"spectrogram","title":"Spectrogram","family":"data","round":17,"note":"새벽 합창의 스펙트로그램이 폭포처럼 내려와요. 휘파람과 떨림, 짹 소리와 뻐꾸기의 두 음이 바람과 먼 찻길로 얼룩진 바닥 위에 밝게 그려지고, K3 을 누르면 손뼉 소리에 새들이 잠시 입을 다물어요.","idea":"A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.","buttons":"K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.","code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-spectrogram","type":"code","name":"spectrogram","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Map","min":0,"max":1,"about":"The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph."},{"name":"Scroll","min":0.5,"max":4,"about":"How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall."},{"name":"Birds","min":0,"max":1,"about":"How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all."},{"name":"Gain","min":-1,"max":1,"about":"Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel."}],"start":[0,2,0,0.06],"measures":{"motion":2.9689,"detail":0.133,"edges":0.3961,"complexity":2.4228,"coverage":0.9799,"colour":0.4061,"drift":0.0801},"knobResponse":[0.3109,0.1622,0.1596,0.4388]},{"slug":"sperner-lemma","title":"Sperner's Lemma","family":"topology","round":38,"note":"세운 삼각형을 작은 방으로 나누고, 꼭짓점마다 연속 사상이 가장 많이 줄이는 좌표의 번호를 붙여 파랑, 빨강, 초록 영토로 칠해요. 흰 걸음이 밑변의 1-2 문으로 들어와 방마다 다른 문으로 나가다가 세 번호를 다 가진 무지개 방에서 멈추고, 그 방은 사상의 고정점 위에 있어요. K3 은 사상을 고정점 둘레로 비틀어 영토 경계를 감고, K4 는 고정점을 늘려 무지개 방을 홀수 개로 늘려요.","idea":"A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Sperner's Lemma\n// Family:  topology\n// Idea:    A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Sperner's lemma (Emanuel Sperner, 1928) and the Brouwer fixed-point theorem it proves (L. E. J. Brouwer, 1911), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1\n//\n// Knob 1: Mesh. Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves.\n// Knob 2: Speed. At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Swirl. Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in.\n// Knob 4: Ripple. Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two.\n\nconst W = 64, H = 128, NMAX = 28, ST = NMAX + 1;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, hypot, PI } = Math;\nconst TAU = 2 * PI, R3 = sqrt(3);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The big triangle on the panel, pixel centres at x + 0.5: corner 1 bottom\n// left, corner 2 bottom right, corner 3 the apex. The base is the 1-2 side.\nconst P1x = 0.5, P1y = 127.2, P2x = 63.5, P2y = 127.2, P3x = 32, P3y = 0.8;\nconst E2x = P2x - P1x, E2y = P2y - P1y, E3x = P3x - P1x, E3y = P3y - P1y, DET = E2x * E3y - E3x * E2y;\n// Length of the gradient of each barycentric coordinate, in units per LED:\n// the distance from a pixel to a mesh line is its offset over this.\nconst G2 = hypot(E3y, E3x) / abs(DET), G3 = hypot(E2y, E2x) / abs(DET);\nconst G1 = hypot(E3y - E2y, E2x - E3x) / abs(DET);\n\n// The map f is defined on an equilateral triangle, corners E1 = (-1, 0),\n// E2 = (1, 0), E3 = (0, sqrt 3): f(q) = q + d(q), pulled back into the\n// triangle by the nearest point, so f is continuous and maps the triangle\n// into itself. d turns round the fixed point c by an angle that grows by\n// SWIRL radians per unit of distance at Swirl 1, and is STEP long from R0\n// out, shrinking to nothing at c.\nconst STEP = 0.12, R0 = 0.35, SWIRL = 3.4;\n// Radius of the glow round the head of the walk, in LEDs.\nconst GLOW = 7;\n// The ripple: two waves added to d, up to RIP times STEP.\nconst RIP = 3.5;\n\n// Label colours: 1 azure, 2 rose, 3 green. Each at its own brightness\n// (brightest channel 0.85, 0.62 and 0.4 of full), so a room that changes\n// label changes in brightness too and not only in hue; green at 0.4 still\n// looks about as bright to the eye as azure at 0.85.\nconst COL = [\n  [0.12 * 0.85, 0.42 * 0.85, 0.85],\n  [0.62, 0.18 * 0.62, 0.3 * 0.62],\n  [0.2 * 0.4 / 0.95, 0.4, 0.28 * 0.4 / 0.95],\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 0, speed: 2, swirl: 0, ripple: 0, t: 0, head: 0, begun: false,\n    lab: new Int8Array(ST * ST), cx: 0, cy: 0, turn: 0,\n    walks: [], main: null, rainbow: [], seen: new Uint8Array(2 * NMAX * NMAX),\n    line: new Float32Array(W * H), room: new Int32Array(W * H), R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    y: [0, 0, 0], hc: [0, 0, 0],\n  };\n}\n\n// Vertex (b, c) of an n-mesh has barycentric coordinates (n - b - c, b, c) / n.\nconst vid = (b, c) => c * ST + b;\n\n// Rooms: up room (i, j) has corners (i, j), (i + 1, j), (i, j + 1); down room\n// (i, j) has corners (i + 1, j), (i, j + 1), (i + 1, j + 1).\nconst rid = (i, j, down) => 2 * (j * NMAX + i) + down;\nfunction corners(r) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  return down ? [vid(i + 1, j), vid(i, j + 1), vid(i + 1, j + 1)] : [vid(i, j), vid(i + 1, j), vid(i, j + 1)];\n}\n// The three walls of a room, each as its two corners and the room behind it\n// (-1 for the base, -2 for the other two sides).\nfunction walls(r, n) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  if (down)\n    return [\n      [vid(i + 1, j), vid(i, j + 1), rid(i, j, 0)],\n      [vid(i, j + 1), vid(i + 1, j + 1), rid(i, j + 1, 0)],\n      [vid(i + 1, j), vid(i + 1, j + 1), rid(i + 1, j, 0)],\n    ];\n  return [\n    [vid(i, j), vid(i + 1, j), j > 0 ? rid(i, j - 1, 1) : -1],\n    [vid(i, j), vid(i, j + 1), i > 0 ? rid(i - 1, j, 1) : -2],\n    [vid(i + 1, j), vid(i, j + 1), i + j \u003c n - 1 ? rid(i, j, 1) : -2],\n  ];\n}\n\n// The map at barycentric x, written into y as barycentric coordinates.\n// Near the sides the turn and the ripple fade out (over the band where the\n// smallest coordinate is under EDGE), so there d points at c and q + d stays\n// inside: f has no fixed point on the sides, only where d is zero inside.\nconst EDGE = 0.16;\nfunction f(S, x1, x2, x3, y) {\n  const mb = min(x1, x2, x3), qx = x2 - x1, qy = R3 * x3, inner = sm(0, EDGE, mb);\n  const dx = S.cx - qx, dy = S.cy - qy, r = hypot(dx, dy);\n  let gx = 0, gy = 0;\n  if (r > 1e-12) {\n    const psi = (S.turn + S.swirl * SWIRL * r) * inner, m = (STEP * min(r, R0)) / R0 / r, cs = cos(psi), sn = sin(psi);\n    gx = (dx * cs - dy * sn) * m;\n    gy = (dx * sn + dy * cs) * m;\n  }\n  if (S.ripple > 0) {\n    const a = S.ripple ** 0.6 * RIP * STEP * sm(0, EDGE / 2, mb), ph = S.t * 0.21;\n    gx += a * sin(5.3 * qx + 3.1 * qy + ph);\n    gy += a * sin(-4.4 * qx + 4.9 * qy + 1.9 - 0.8 * ph);\n  }\n  let px = qx + gx, py = qy + gy;\n  // Back into the triangle by the nearest point.\n  let z3 = py / R3, z2 = (1 - z3 + px) / 2, z1 = (1 - z3 - px) / 2;\n  if (z1 \u003c 0 || z2 \u003c 0 || z3 \u003c 0) {\n    let best = Infinity, bx = 0, by = 0;\n    const E = [-1, 0, 1, 0, 0, R3];\n    for (let e = 0; e \u003c 3; e++) {\n      const ax = E[2 * e], ay = E[2 * e + 1], ex = E[(2 * e + 2) % 6] - ax, ey = E[(2 * e + 3) % 6] - ay;\n      const t = cl(((px - ax) * ex + (py - ay) * ey) / (ex * ex + ey * ey), 0, 1), sx = ax + t * ex, sy = ay + t * ey;\n      const d2 = (px - sx) ** 2 + (py - sy) ** 2;\n      if (d2 \u003c best) {\n        best = d2;\n        bx = sx;\n        by = sy;\n      }\n    }\n    px = bx;\n    py = by;\n    z3 = max(0, py / R3);\n    z2 = max(0, (1 - z3 + px) / 2);\n    z1 = max(0, 1 - z2 - z3);\n  }\n  y[0] = z1;\n  y[1] = z2;\n  y[2] = z3;\n}\n\n// Label every vertex: of the coordinates that are not zero, the one f takes\n// down the most. Such a one always exists because both sum to 1, and a\n// coordinate that is zero is never chosen, so each corner gets its own label\n// and each side only its two corners' labels: a Sperner labelling.\nfunction label(S) {\n  const n = S.n, y = S.y;\n  for (let c = 0; c \u003c= n; c++)\n    for (let b = 0; b + c \u003c= n; b++) {\n      const a = n - b - c, x = [a / n, b / n, c / n];\n      f(S, x[0], x[1], x[2], y);\n      let best = -Infinity, L = 0;\n      for (let i = 0; i \u003c 3; i++)\n        if (x[i] > 0 && x[i] - y[i] > best + 1e-12) {\n          best = x[i] - y[i];\n          L = i;\n        }\n      S.lab[vid(b, c)] = L;\n    }\n}\n\nconst isDoor = (S, va, vb) => S.lab[va] + S.lab[vb] === 1;\nfunction rainbow(S, r) {\n  const [a, b, c] = corners(r), L = S.lab;\n  return L[a] !== L[b] && L[b] !== L[c] && L[a] !== L[c];\n}\n\n// Walk from room r, having come in through the wall behind which lies\n// `from`: leave by the other door each time. Ends in a rainbow room (end =\n// room) or out through a door in the base (end = -1).\nfunction walk(S, r, from, pts) {\n  const n = S.n;\n  for (let guard = 0; guard \u003c 2 * n * n + 2; guard++) {\n    S.seen[r] = 1;\n    const cs = corners(r);\n    pts.push(centroid(n, cs));\n    if (rainbow(S, r)) return r;\n    const ws = walls(r, n);\n    let out = null;\n    for (const w of ws) if (isDoor(S, w[0], w[1]) && w[2] !== from) out = w;\n    if (!out) return r;\n    pts.push(mid(n, out[0], out[1]));\n    if (out[2] \u003c 0) return -1;\n    from = r;\n    r = out[2];\n  }\n  return -1;\n}\n\n// Panel position of vertex v of an n-mesh.\nfunction vpos(n, v) {\n  const b = v % ST, c = (v - b) / ST;\n  return [P1x + (E2x * b + E3x * c) / n, P1y + (E2y * b + E3y * c) / n];\n}\nfunction centroid(n, cs) {\n  const a = vpos(n, cs[0]), b = vpos(n, cs[1]), c = vpos(n, cs[2]);\n  return [(a[0] + b[0] + c[0]) / 3, (a[1] + b[1] + c[1]) / 3];\n}\nfunction mid(n, va, vb) {\n  const a = vpos(n, va), b = vpos(n, vb);\n  return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n}\n\n// All the door walks: from each door in the base, then from each rainbow\n// room no walk has reached yet. The main walk is the leftmost one from the\n// base that ends in a rainbow room; there is always one, because the base\n// holds an odd number of doors and walks from the base pair them up two by\n// two except where they end in a rainbow room.\nfunction walkAll(S) {\n  const n = S.n;\n  S.seen.fill(0);\n  S.walks = [];\n  S.main = null;\n  S.rainbow = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = rid(i, 0, 0);\n    if (S.seen[r] || !isDoor(S, vid(i, 0), vid(i + 1, 0))) continue;\n    const pts = [mid(n, vid(i, 0), vid(i + 1, 0))], end = walk(S, r, -1, pts);\n    const w = { pts, end, base: true };\n    S.walks.push(w);\n    if (end >= 0 && !S.main) S.main = w;\n  }\n  for (let j = 0; j \u003c n; j++)\n    for (let i = 0; i + j \u003c n; i++)\n      for (let down = 0; down \u003c 2; down++) {\n        if (down && i + j > n - 2) continue;\n        const r = rid(i, j, down);\n        if (!rainbow(S, r)) continue;\n        S.rainbow.push(r);\n        if (S.seen[r]) continue;\n        // Its one door, and on from the room behind it.\n        S.seen[r] = 1;\n        const pts = [centroid(n, corners(r))];\n        let end = r;\n        for (const w of walls(r, n))\n          if (isDoor(S, w[0], w[1])) {\n            pts.push(mid(n, w[0], w[1]));\n            end = w[2] >= 0 ? walk(S, w[2], r, pts) : -1;\n          }\n        S.walks.push({ pts, end, base: false });\n      }\n}\n\nfunction lengthOf(pts) {\n  let L = 0;\n  for (let k = 1; k \u003c pts.length; k++) L += hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n  return L;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [12, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.n = round(cl(k[0], 12, NMAX));\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[2], 0, 1);\n  // Up to 0.06 no ripple, so the opening has one fixed point.\n  S.ripple = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  if (!S.begun) {\n    // Open some way into the run, further in the faster it goes, so Speed\n    // shows from the first second.\n    S.t = 4 * S.speed;\n    S.begun = true;\n  }\n  S.t += (d * S.speed) / 2;\n  S.head += d * S.speed * 18;\n  // The fixed point of the map without ripple wanders inside the triangle,\n  // its barycentric coordinates never under 0.12, round its loop in 14\n  // seconds at Speed 2.\n  const t = S.t, rr = 0.13 + 0.08 * sin(0.6 * t + 0.6), ph = 0.45 * t + 1.1;\n  const c1 = 1 / 3 + rr * cos(ph), c2 = 1 / 3 + rr * cos(ph - TAU / 3), c3 = 1 - c1 - c2;\n  S.cx = c2 - c1;\n  S.cy = R3 * c3;\n  // The push leans up to 60 degrees either side of straight at c, back and\n  // forth every 12.6 seconds at Speed 2.\n  S.turn = 1.05 * sin(0.5 * t);\n  label(S);\n  walkAll(S);\n}\n\n// Light the line buffer along a polyline, with brightness fn(s) at arc\n// length s.\nfunction stroke(S, pts, fn) {\n  const L = S.line;\n  let s = 0;\n  for (let k = 1; k \u003c pts.length; k++) {\n    const ax = pts[k - 1][0], ay = pts[k - 1][1], bx = pts[k][0], by = pts[k][1];\n    const ex = bx - ax, ey = by - ay, len = hypot(ex, ey);\n    if (len \u003c 1e-6) continue;\n    const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n    const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, u = cl((px * ex + py * ey) / (len * len), 0, 1);\n        const dd = hypot(px - u * ex, py - u * ey), a = cl(1.25 - dd, 0, 1);\n        if (a \u003c= 0) continue;\n        const v = a * fn(s + u * len), p = y * W + x;\n        if (v > L[p]) L[p] = v;\n      }\n    s += len;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  const { n, lab, R, G, B, line, hc, room } = S;\n  line.fill(0);\n  const isMainEnd = (r) => S.main && S.main.end === r;\n  const rb = new Set(S.rainbow);\n  // The territories, the mesh and the rainbow rooms.\n  const lw = 0.5 + 0.3 * (NMAX - n) / 16;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, X = x + 0.5 - P1x, Y = y + 0.5 - P1y;\n      const l2 = (X * E3y - Y * E3x) / DET, l3 = (E2x * Y - E2y * X) / DET, l1 = 1 - l2 - l3;\n      if (l1 \u003c -0.004 || l2 \u003c -0.004 || l3 \u003c -0.004) {\n        R[p] = G[p] = B[p] = 0;\n        room[p] = -1;\n        continue;\n      }\n      const u = cl(l2 * n, 0, n - 1e-6), v = cl(l3 * n, 0, n - 1e-6);\n      let i = floor(u), j = floor(v);\n      if (i + j > n - 1) j = n - 1 - i;\n      const fu = u - i, fv = v - j, down = fu + fv > 1 ? 1 : 0;\n      const r = rid(i, j, down), cs = corners(r);\n      const w = down ? [fu + fv - 1, 1 - fu, 1 - fv] : [1 - fu - fv, fu, fv];\n      // Each corner's share of the room: the part nearer it than the others,\n      // so every vertex sits in a cell of its own label's colour.\n      let m = 0;\n      if (w[1] > w[m]) m = 1;\n      if (w[2] > w[m]) m = 2;\n      const c = COL[lab[cs[m]]];\n      // Mesh lines: dark walls, about one LED wide.\n      const a1 = u - i, b1 = v - j, w1 = u + v - floor(u + v);\n      const dm = min(min(a1, 1 - a1) / (n * G2), min(b1, 1 - b1) / (n * G3), min(w1, 1 - w1) / (n * G1));\n      const wl = 1 - sm(0.2, 0.75, dm);\n      room[p] = r;\n      if (rb.has(r)) {\n        // A rainbow room: a spinning wheel of every hue inside white walls.\n        const ctr = centroid(n, cs), a = atan2(y + 0.5 - ctr[1], x + 0.5 - ctr[0]) / TAU;\n        hsv(a + S.t * 0.6, 0.85, 1, hc);\n        const k = isMainEnd(r) ? 0.9 : 0.6;\n        R[p] = 255 * (hc[0] + (k - hc[0]) * wl);\n        G[p] = 255 * (hc[1] + (k - hc[1]) * wl);\n        B[p] = 255 * (hc[2] + (k - hc[2]) * wl);\n        continue;\n      }\n      const wall = 1 - lw * wl;\n      R[p] = c[0] * wall * 255;\n      G[p] = c[1] * wall * 255;\n      B[p] = c[2] * wall * 255;\n    }\n  // The other walks dim; the main one brighter, with a head running from\n  // the base door into the rainbow room and a pause there before it runs again.\n  // Each walk is drawn from door to door and stops at the wall of a rainbow\n  // room, so the room's own colours stay clear.\n  const trim = (w) => w.pts.slice(w.base ? 0 : 1, w.end >= 0 ? w.pts.length - 1 : w.pts.length);\n  for (const w of S.walks) if (w !== S.main) stroke(S, trim(w), () => 0.42);\n  if (S.main) {\n    const pts = trim(S.main), L = lengthOf(pts), cyc = L + 30, hs = S.head % cyc;\n    stroke(S, pts, (s) => {\n      const back = hs - s;\n      return back \u003c 0 ? 0.62 : 0.62 + 0.38 * Math.exp(-back / 9);\n    });\n    // A soft glow rides with the head, GLOW LEDs round, so the run up the\n    // walk shows from across the room and not only on the thin line.\n    if (hs \u003c L) {\n      let s = 0, hx = pts[0][0], hy = pts[0][1];\n      for (let k = 1; k \u003c pts.length; k++) {\n        const ex = pts[k][0] - pts[k - 1][0], ey = pts[k][1] - pts[k - 1][1], len = hypot(ex, ey);\n        if (s + len >= hs) {\n          const u = len > 0 ? (hs - s) / len : 0;\n          hx = pts[k - 1][0] + u * ex;\n          hy = pts[k - 1][1] + u * ey;\n          break;\n        }\n        s += len;\n      }\n      for (let y = max(0, floor(hy - GLOW)); y \u003c= min(H - 1, floor(hy + GLOW)); y++)\n        for (let x = max(0, floor(hx - GLOW)); x \u003c= min(W - 1, floor(hx + GLOW)); x++) {\n          const dd = hypot(x + 0.5 - hx, y + 0.5 - hy) / GLOW, p = y * W + x;\n          if (dd >= 1 || room[p] \u003c 0 || rb.has(room[p])) continue;\n          const g = 0.7 * (1 - dd) * (1 - dd);\n          R[p] += (255 - R[p]) * g;\n          G[p] += (255 - G[p]) * g;\n          B[p] += (255 - B[p]) * g;\n        }\n    }\n    // A halo round the room the walk ends in, flaring as the head arrives.\n    const ctr = centroid(n, corners(S.main.end)), fl = hs > L ? Math.exp(-(hs - L) / 12) : 0;\n    const rad = 5 + 3 * fl + 60 / n, amp = 0.3 + 0.5 * fl;\n    for (let y = max(0, floor(ctr[1] - rad)); y \u003c= min(H - 1, floor(ctr[1] + rad)); y++)\n      for (let x = max(0, floor(ctr[0] - rad)); x \u003c= min(W - 1, floor(ctr[0] + rad)); x++) {\n        const dd = hypot(x + 0.5 - ctr[0], (y + 0.5 - ctr[1]) * 0.6) / rad;\n        if (dd >= 1) continue;\n        const g = amp * (1 - dd) * (1 - dd), p = y * W + x;\n        if (room[p] \u003c 0 || rb.has(room[p])) continue;\n        R[p] += (255 - R[p]) * g;\n        G[p] += (255 - G[p]) * g;\n        B[p] += (255 - B[p]) * g;\n      }\n  }\n  for (let p = 0; p \u003c W * H; p++) {\n    const a = line[p];\n    const r = R[p] * (1 - a) + 255 * a, g = G[p] * (1 - a) + 255 * a, b = B[p] * (1 - a) + 255 * a;\n    display.setPixel(p % W, (p / W) | 0, round(min(255, r)), round(min(255, g)), round(min(255, b)));\n  }\n}\n","layer":{"id":"layer-sperner-lemma","type":"code","name":"sperner-lemma","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sperner's Lemma\n// Family:  topology\n// Idea:    A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Sperner's lemma (Emanuel Sperner, 1928) and the Brouwer fixed-point theorem it proves (L. E. J. Brouwer, 1911), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1\n//\n// Knob 1: Mesh. Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves.\n// Knob 2: Speed. At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Swirl. Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in.\n// Knob 4: Ripple. Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two.\n\nconst W = 64, H = 128, NMAX = 28, ST = NMAX + 1;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, hypot, PI } = Math;\nconst TAU = 2 * PI, R3 = sqrt(3);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The big triangle on the panel, pixel centres at x + 0.5: corner 1 bottom\n// left, corner 2 bottom right, corner 3 the apex. The base is the 1-2 side.\nconst P1x = 0.5, P1y = 127.2, P2x = 63.5, P2y = 127.2, P3x = 32, P3y = 0.8;\nconst E2x = P2x - P1x, E2y = P2y - P1y, E3x = P3x - P1x, E3y = P3y - P1y, DET = E2x * E3y - E3x * E2y;\n// Length of the gradient of each barycentric coordinate, in units per LED:\n// the distance from a pixel to a mesh line is its offset over this.\nconst G2 = hypot(E3y, E3x) / abs(DET), G3 = hypot(E2y, E2x) / abs(DET);\nconst G1 = hypot(E3y - E2y, E2x - E3x) / abs(DET);\n\n// The map f is defined on an equilateral triangle, corners E1 = (-1, 0),\n// E2 = (1, 0), E3 = (0, sqrt 3): f(q) = q + d(q), pulled back into the\n// triangle by the nearest point, so f is continuous and maps the triangle\n// into itself. d turns round the fixed point c by an angle that grows by\n// SWIRL radians per unit of distance at Swirl 1, and is STEP long from R0\n// out, shrinking to nothing at c.\nconst STEP = 0.12, R0 = 0.35, SWIRL = 3.4;\n// Radius of the glow round the head of the walk, in LEDs.\nconst GLOW = 7;\n// The ripple: two waves added to d, up to RIP times STEP.\nconst RIP = 3.5;\n\n// Label colours: 1 azure, 2 rose, 3 green. Each at its own brightness\n// (brightest channel 0.85, 0.62 and 0.4 of full), so a room that changes\n// label changes in brightness too and not only in hue; green at 0.4 still\n// looks about as bright to the eye as azure at 0.85.\nconst COL = [\n  [0.12 * 0.85, 0.42 * 0.85, 0.85],\n  [0.62, 0.18 * 0.62, 0.3 * 0.62],\n  [0.2 * 0.4 / 0.95, 0.4, 0.28 * 0.4 / 0.95],\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 0, speed: 2, swirl: 0, ripple: 0, t: 0, head: 0, begun: false,\n    lab: new Int8Array(ST * ST), cx: 0, cy: 0, turn: 0,\n    walks: [], main: null, rainbow: [], seen: new Uint8Array(2 * NMAX * NMAX),\n    line: new Float32Array(W * H), room: new Int32Array(W * H), R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    y: [0, 0, 0], hc: [0, 0, 0],\n  };\n}\n\n// Vertex (b, c) of an n-mesh has barycentric coordinates (n - b - c, b, c) / n.\nconst vid = (b, c) => c * ST + b;\n\n// Rooms: up room (i, j) has corners (i, j), (i + 1, j), (i, j + 1); down room\n// (i, j) has corners (i + 1, j), (i, j + 1), (i + 1, j + 1).\nconst rid = (i, j, down) => 2 * (j * NMAX + i) + down;\nfunction corners(r) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  return down ? [vid(i + 1, j), vid(i, j + 1), vid(i + 1, j + 1)] : [vid(i, j), vid(i + 1, j), vid(i, j + 1)];\n}\n// The three walls of a room, each as its two corners and the room behind it\n// (-1 for the base, -2 for the other two sides).\nfunction walls(r, n) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  if (down)\n    return [\n      [vid(i + 1, j), vid(i, j + 1), rid(i, j, 0)],\n      [vid(i, j + 1), vid(i + 1, j + 1), rid(i, j + 1, 0)],\n      [vid(i + 1, j), vid(i + 1, j + 1), rid(i + 1, j, 0)],\n    ];\n  return [\n    [vid(i, j), vid(i + 1, j), j > 0 ? rid(i, j - 1, 1) : -1],\n    [vid(i, j), vid(i, j + 1), i > 0 ? rid(i - 1, j, 1) : -2],\n    [vid(i + 1, j), vid(i, j + 1), i + j \u003c n - 1 ? rid(i, j, 1) : -2],\n  ];\n}\n\n// The map at barycentric x, written into y as barycentric coordinates.\n// Near the sides the turn and the ripple fade out (over the band where the\n// smallest coordinate is under EDGE), so there d points at c and q + d stays\n// inside: f has no fixed point on the sides, only where d is zero inside.\nconst EDGE = 0.16;\nfunction f(S, x1, x2, x3, y) {\n  const mb = min(x1, x2, x3), qx = x2 - x1, qy = R3 * x3, inner = sm(0, EDGE, mb);\n  const dx = S.cx - qx, dy = S.cy - qy, r = hypot(dx, dy);\n  let gx = 0, gy = 0;\n  if (r > 1e-12) {\n    const psi = (S.turn + S.swirl * SWIRL * r) * inner, m = (STEP * min(r, R0)) / R0 / r, cs = cos(psi), sn = sin(psi);\n    gx = (dx * cs - dy * sn) * m;\n    gy = (dx * sn + dy * cs) * m;\n  }\n  if (S.ripple > 0) {\n    const a = S.ripple ** 0.6 * RIP * STEP * sm(0, EDGE / 2, mb), ph = S.t * 0.21;\n    gx += a * sin(5.3 * qx + 3.1 * qy + ph);\n    gy += a * sin(-4.4 * qx + 4.9 * qy + 1.9 - 0.8 * ph);\n  }\n  let px = qx + gx, py = qy + gy;\n  // Back into the triangle by the nearest point.\n  let z3 = py / R3, z2 = (1 - z3 + px) / 2, z1 = (1 - z3 - px) / 2;\n  if (z1 \u003c 0 || z2 \u003c 0 || z3 \u003c 0) {\n    let best = Infinity, bx = 0, by = 0;\n    const E = [-1, 0, 1, 0, 0, R3];\n    for (let e = 0; e \u003c 3; e++) {\n      const ax = E[2 * e], ay = E[2 * e + 1], ex = E[(2 * e + 2) % 6] - ax, ey = E[(2 * e + 3) % 6] - ay;\n      const t = cl(((px - ax) * ex + (py - ay) * ey) / (ex * ex + ey * ey), 0, 1), sx = ax + t * ex, sy = ay + t * ey;\n      const d2 = (px - sx) ** 2 + (py - sy) ** 2;\n      if (d2 \u003c best) {\n        best = d2;\n        bx = sx;\n        by = sy;\n      }\n    }\n    px = bx;\n    py = by;\n    z3 = max(0, py / R3);\n    z2 = max(0, (1 - z3 + px) / 2);\n    z1 = max(0, 1 - z2 - z3);\n  }\n  y[0] = z1;\n  y[1] = z2;\n  y[2] = z3;\n}\n\n// Label every vertex: of the coordinates that are not zero, the one f takes\n// down the most. Such a one always exists because both sum to 1, and a\n// coordinate that is zero is never chosen, so each corner gets its own label\n// and each side only its two corners' labels: a Sperner labelling.\nfunction label(S) {\n  const n = S.n, y = S.y;\n  for (let c = 0; c \u003c= n; c++)\n    for (let b = 0; b + c \u003c= n; b++) {\n      const a = n - b - c, x = [a / n, b / n, c / n];\n      f(S, x[0], x[1], x[2], y);\n      let best = -Infinity, L = 0;\n      for (let i = 0; i \u003c 3; i++)\n        if (x[i] > 0 && x[i] - y[i] > best + 1e-12) {\n          best = x[i] - y[i];\n          L = i;\n        }\n      S.lab[vid(b, c)] = L;\n    }\n}\n\nconst isDoor = (S, va, vb) => S.lab[va] + S.lab[vb] === 1;\nfunction rainbow(S, r) {\n  const [a, b, c] = corners(r), L = S.lab;\n  return L[a] !== L[b] && L[b] !== L[c] && L[a] !== L[c];\n}\n\n// Walk from room r, having come in through the wall behind which lies\n// `from`: leave by the other door each time. Ends in a rainbow room (end =\n// room) or out through a door in the base (end = -1).\nfunction walk(S, r, from, pts) {\n  const n = S.n;\n  for (let guard = 0; guard \u003c 2 * n * n + 2; guard++) {\n    S.seen[r] = 1;\n    const cs = corners(r);\n    pts.push(centroid(n, cs));\n    if (rainbow(S, r)) return r;\n    const ws = walls(r, n);\n    let out = null;\n    for (const w of ws) if (isDoor(S, w[0], w[1]) && w[2] !== from) out = w;\n    if (!out) return r;\n    pts.push(mid(n, out[0], out[1]));\n    if (out[2] \u003c 0) return -1;\n    from = r;\n    r = out[2];\n  }\n  return -1;\n}\n\n// Panel position of vertex v of an n-mesh.\nfunction vpos(n, v) {\n  const b = v % ST, c = (v - b) / ST;\n  return [P1x + (E2x * b + E3x * c) / n, P1y + (E2y * b + E3y * c) / n];\n}\nfunction centroid(n, cs) {\n  const a = vpos(n, cs[0]), b = vpos(n, cs[1]), c = vpos(n, cs[2]);\n  return [(a[0] + b[0] + c[0]) / 3, (a[1] + b[1] + c[1]) / 3];\n}\nfunction mid(n, va, vb) {\n  const a = vpos(n, va), b = vpos(n, vb);\n  return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n}\n\n// All the door walks: from each door in the base, then from each rainbow\n// room no walk has reached yet. The main walk is the leftmost one from the\n// base that ends in a rainbow room; there is always one, because the base\n// holds an odd number of doors and walks from the base pair them up two by\n// two except where they end in a rainbow room.\nfunction walkAll(S) {\n  const n = S.n;\n  S.seen.fill(0);\n  S.walks = [];\n  S.main = null;\n  S.rainbow = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = rid(i, 0, 0);\n    if (S.seen[r] || !isDoor(S, vid(i, 0), vid(i + 1, 0))) continue;\n    const pts = [mid(n, vid(i, 0), vid(i + 1, 0))], end = walk(S, r, -1, pts);\n    const w = { pts, end, base: true };\n    S.walks.push(w);\n    if (end >= 0 && !S.main) S.main = w;\n  }\n  for (let j = 0; j \u003c n; j++)\n    for (let i = 0; i + j \u003c n; i++)\n      for (let down = 0; down \u003c 2; down++) {\n        if (down && i + j > n - 2) continue;\n        const r = rid(i, j, down);\n        if (!rainbow(S, r)) continue;\n        S.rainbow.push(r);\n        if (S.seen[r]) continue;\n        // Its one door, and on from the room behind it.\n        S.seen[r] = 1;\n        const pts = [centroid(n, corners(r))];\n        let end = r;\n        for (const w of walls(r, n))\n          if (isDoor(S, w[0], w[1])) {\n            pts.push(mid(n, w[0], w[1]));\n            end = w[2] >= 0 ? walk(S, w[2], r, pts) : -1;\n          }\n        S.walks.push({ pts, end, base: false });\n      }\n}\n\nfunction lengthOf(pts) {\n  let L = 0;\n  for (let k = 1; k \u003c pts.length; k++) L += hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n  return L;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [12, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.n = round(cl(k[0], 12, NMAX));\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[2], 0, 1);\n  // Up to 0.06 no ripple, so the opening has one fixed point.\n  S.ripple = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  if (!S.begun) {\n    // Open some way into the run, further in the faster it goes, so Speed\n    // shows from the first second.\n    S.t = 4 * S.speed;\n    S.begun = true;\n  }\n  S.t += (d * S.speed) / 2;\n  S.head += d * S.speed * 18;\n  // The fixed point of the map without ripple wanders inside the triangle,\n  // its barycentric coordinates never under 0.12, round its loop in 14\n  // seconds at Speed 2.\n  const t = S.t, rr = 0.13 + 0.08 * sin(0.6 * t + 0.6), ph = 0.45 * t + 1.1;\n  const c1 = 1 / 3 + rr * cos(ph), c2 = 1 / 3 + rr * cos(ph - TAU / 3), c3 = 1 - c1 - c2;\n  S.cx = c2 - c1;\n  S.cy = R3 * c3;\n  // The push leans up to 60 degrees either side of straight at c, back and\n  // forth every 12.6 seconds at Speed 2.\n  S.turn = 1.05 * sin(0.5 * t);\n  label(S);\n  walkAll(S);\n}\n\n// Light the line buffer along a polyline, with brightness fn(s) at arc\n// length s.\nfunction stroke(S, pts, fn) {\n  const L = S.line;\n  let s = 0;\n  for (let k = 1; k \u003c pts.length; k++) {\n    const ax = pts[k - 1][0], ay = pts[k - 1][1], bx = pts[k][0], by = pts[k][1];\n    const ex = bx - ax, ey = by - ay, len = hypot(ex, ey);\n    if (len \u003c 1e-6) continue;\n    const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n    const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, u = cl((px * ex + py * ey) / (len * len), 0, 1);\n        const dd = hypot(px - u * ex, py - u * ey), a = cl(1.25 - dd, 0, 1);\n        if (a \u003c= 0) continue;\n        const v = a * fn(s + u * len), p = y * W + x;\n        if (v > L[p]) L[p] = v;\n      }\n    s += len;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  const { n, lab, R, G, B, line, hc, room } = S;\n  line.fill(0);\n  const isMainEnd = (r) => S.main && S.main.end === r;\n  const rb = new Set(S.rainbow);\n  // The territories, the mesh and the rainbow rooms.\n  const lw = 0.5 + 0.3 * (NMAX - n) / 16;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, X = x + 0.5 - P1x, Y = y + 0.5 - P1y;\n      const l2 = (X * E3y - Y * E3x) / DET, l3 = (E2x * Y - E2y * X) / DET, l1 = 1 - l2 - l3;\n      if (l1 \u003c -0.004 || l2 \u003c -0.004 || l3 \u003c -0.004) {\n        R[p] = G[p] = B[p] = 0;\n        room[p] = -1;\n        continue;\n      }\n      const u = cl(l2 * n, 0, n - 1e-6), v = cl(l3 * n, 0, n - 1e-6);\n      let i = floor(u), j = floor(v);\n      if (i + j > n - 1) j = n - 1 - i;\n      const fu = u - i, fv = v - j, down = fu + fv > 1 ? 1 : 0;\n      const r = rid(i, j, down), cs = corners(r);\n      const w = down ? [fu + fv - 1, 1 - fu, 1 - fv] : [1 - fu - fv, fu, fv];\n      // Each corner's share of the room: the part nearer it than the others,\n      // so every vertex sits in a cell of its own label's colour.\n      let m = 0;\n      if (w[1] > w[m]) m = 1;\n      if (w[2] > w[m]) m = 2;\n      const c = COL[lab[cs[m]]];\n      // Mesh lines: dark walls, about one LED wide.\n      const a1 = u - i, b1 = v - j, w1 = u + v - floor(u + v);\n      const dm = min(min(a1, 1 - a1) / (n * G2), min(b1, 1 - b1) / (n * G3), min(w1, 1 - w1) / (n * G1));\n      const wl = 1 - sm(0.2, 0.75, dm);\n      room[p] = r;\n      if (rb.has(r)) {\n        // A rainbow room: a spinning wheel of every hue inside white walls.\n        const ctr = centroid(n, cs), a = atan2(y + 0.5 - ctr[1], x + 0.5 - ctr[0]) / TAU;\n        hsv(a + S.t * 0.6, 0.85, 1, hc);\n        const k = isMainEnd(r) ? 0.9 : 0.6;\n        R[p] = 255 * (hc[0] + (k - hc[0]) * wl);\n        G[p] = 255 * (hc[1] + (k - hc[1]) * wl);\n        B[p] = 255 * (hc[2] + (k - hc[2]) * wl);\n        continue;\n      }\n      const wall = 1 - lw * wl;\n      R[p] = c[0] * wall * 255;\n      G[p] = c[1] * wall * 255;\n      B[p] = c[2] * wall * 255;\n    }\n  // The other walks dim; the main one brighter, with a head running from\n  // the base door into the rainbow room and a pause there before it runs again.\n  // Each walk is drawn from door to door and stops at the wall of a rainbow\n  // room, so the room's own colours stay clear.\n  const trim = (w) => w.pts.slice(w.base ? 0 : 1, w.end >= 0 ? w.pts.length - 1 : w.pts.length);\n  for (const w of S.walks) if (w !== S.main) stroke(S, trim(w), () => 0.42);\n  if (S.main) {\n    const pts = trim(S.main), L = lengthOf(pts), cyc = L + 30, hs = S.head % cyc;\n    stroke(S, pts, (s) => {\n      const back = hs - s;\n      return back \u003c 0 ? 0.62 : 0.62 + 0.38 * Math.exp(-back / 9);\n    });\n    // A soft glow rides with the head, GLOW LEDs round, so the run up the\n    // walk shows from across the room and not only on the thin line.\n    if (hs \u003c L) {\n      let s = 0, hx = pts[0][0], hy = pts[0][1];\n      for (let k = 1; k \u003c pts.length; k++) {\n        const ex = pts[k][0] - pts[k - 1][0], ey = pts[k][1] - pts[k - 1][1], len = hypot(ex, ey);\n        if (s + len >= hs) {\n          const u = len > 0 ? (hs - s) / len : 0;\n          hx = pts[k - 1][0] + u * ex;\n          hy = pts[k - 1][1] + u * ey;\n          break;\n        }\n        s += len;\n      }\n      for (let y = max(0, floor(hy - GLOW)); y \u003c= min(H - 1, floor(hy + GLOW)); y++)\n        for (let x = max(0, floor(hx - GLOW)); x \u003c= min(W - 1, floor(hx + GLOW)); x++) {\n          const dd = hypot(x + 0.5 - hx, y + 0.5 - hy) / GLOW, p = y * W + x;\n          if (dd >= 1 || room[p] \u003c 0 || rb.has(room[p])) continue;\n          const g = 0.7 * (1 - dd) * (1 - dd);\n          R[p] += (255 - R[p]) * g;\n          G[p] += (255 - G[p]) * g;\n          B[p] += (255 - B[p]) * g;\n        }\n    }\n    // A halo round the room the walk ends in, flaring as the head arrives.\n    const ctr = centroid(n, corners(S.main.end)), fl = hs > L ? Math.exp(-(hs - L) / 12) : 0;\n    const rad = 5 + 3 * fl + 60 / n, amp = 0.3 + 0.5 * fl;\n    for (let y = max(0, floor(ctr[1] - rad)); y \u003c= min(H - 1, floor(ctr[1] + rad)); y++)\n      for (let x = max(0, floor(ctr[0] - rad)); x \u003c= min(W - 1, floor(ctr[0] + rad)); x++) {\n        const dd = hypot(x + 0.5 - ctr[0], (y + 0.5 - ctr[1]) * 0.6) / rad;\n        if (dd >= 1) continue;\n        const g = amp * (1 - dd) * (1 - dd), p = y * W + x;\n        if (room[p] \u003c 0 || rb.has(room[p])) continue;\n        R[p] += (255 - R[p]) * g;\n        G[p] += (255 - G[p]) * g;\n        B[p] += (255 - B[p]) * g;\n      }\n  }\n  for (let p = 0; p \u003c W * H; p++) {\n    const a = line[p];\n    const r = R[p] * (1 - a) + 255 * a, g = G[p] * (1 - a) + 255 * a, b = B[p] * (1 - a) + 255 * a;\n    display.setPixel(p % W, (p / W) | 0, round(min(255, r)), round(min(255, g)), round(min(255, b)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mesh","min":12,"max":28,"about":"Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Swirl","min":0,"max":1,"about":"Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in."},{"name":"Ripple","min":0,"max":1,"about":"Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two."}],"start":[12,2,0,0.06],"measures":{"motion":0.0411,"detail":0.0869,"edges":0.6362,"complexity":0.5552,"coverage":0.4564,"colour":0.2811,"drift":0.0451},"knobResponse":[0.0654,0.0563,0.0533,0.0518]},{"slug":"sponge-blend","title":"Sponge Blend","family":"cosmetic","round":31,"note":"옅은 바탕에 산호색 줄 하나가 그어지고, 보이지 않는 촉촉한 스펀지가 줄을 따라 1초에 여섯 번쯤 두드려 고운 구멍 자국을 찍으며 색을 바깥으로 펴요. 15초쯤이면 선이 넓은 점묘 그러데이션이 되고, 닦아 내고 다시 그어요. K1 은 색상환을 다 돌고, 누르면 새 줄을 그어요.","idea":"A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.","buttons":"K1 tap lays a fresh stripe of colour for the sponge to blend out.","code":"// ===== Patternflow pattern =====\n// Title:   Sponge Blend\n// Family:  cosmetic\n// Idea:    A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after foundation blended out with a damp makeup sponge\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1\n//\n// Knob 1: Hue. The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown.\n// Knob 2: Speed. How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower.\n// Knob 3: Coverage. How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab.\n// Knob 4: Grain. How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish.\n// Buttons: K1 tap lays a fresh stripe of colour for the sponge to blend out.\n\nconst W = 64, H = 128, N = W * H;\nconst TS = 128, TN = TS * TS;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sponge's pores: three tiles of noise blurred over 3, 5 and 7 LEDs, 128\n// LEDs square and wrapping, each LED's value turned into its rank 0..255.\n// Cutting a tile at rank 128 gives cells from two to four LEDs across, half of\n// them touching; cutting it lower leaves only the cores, small and sparse.\nlet TILES = null;\nfunction tiles() {\n  const out = [];\n  const raw = Float32Array.from({ length: TN }, (_, i) => hash(i + 911) - 0.5);\n  for (let r = 1; r \u003c= 3; r++) {\n    const b = new Float32Array(TN);\n    for (let y = 0; y \u003c TS; y++)\n      for (let x = 0; x \u003c TS; x++) {\n        let s = 0;\n        for (let dy = -r; dy \u003c= r; dy++) for (let dx = -r; dx \u003c= r; dx++) s += raw[((y + dy) & (TS - 1)) * TS + ((x + dx) & (TS - 1))];\n        b[y * TS + x] = s;\n      }\n    const order = Array.from({ length: TN }, (_, i) => i).sort((p, q) => b[p] - b[q]);\n    const rank = new Uint8Array(TN);\n    order.forEach((i, k) => (rank[i] = (k * 256) / TN));\n    out.push(rank);\n  }\n  return out;\n}\n\n// The base's grain is a fine checker: every other LED sits half a step above\n// the base and the rest half a step below, so neighbouring LEDs always differ\n// by about the same 28 to 41 levels and nothing reads as an outline. AMP is\n// each LED's own share of that step. The pores of a print are soft dips\n// spread over three LEDs, a few levels a LED, so they never cut an edge.\nconst AMP = Float32Array.from({ length: N }, (_, i) => 0.78 + 0.34 * hash(i + 4242));\nconst ODD = Uint8Array.from({ length: N }, (_, i) => ((i % W) + floor(i / W)) & 1);\nconst STEP = 0.175;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    A: F(N), c: F(N), pm: new Uint8Array(N), cn: F(N), sh: F(N), dist: F(N).fill(99), su: F(N),\n    phase: 0, pt: 0, lay: 0, len: 100, pts: F(98), u: 0, dir: 1, pass: 0, side: 1, load: 0, dabT: 0, n: 0,\n    hue: 0, speed: 2, cov: 0, grain: 0.06, started: false, col: F(6), T: 0,\n  };\n}\n\n// A new stripe: a gentle curve down most of the panel, or anywhere when\n// laid by hand. Every LED's distance from it and the place along it nearest\n// are kept for laying it on and for walking the sponge along it.\nfunction stripe(S, free) {\n  const r = Math.random;\n  let x0, y0, x1, y1;\n  if (free) {\n    const a = r() * PI, l = 50 + r() * 50, cx = 16 + r() * 32, cy = 30 + r() * 68;\n    x0 = cx - (cos(a) * l) / 2;\n    y0 = cy - (sin(a) * l) / 2;\n    x1 = cx + (cos(a) * l) / 2;\n    y1 = cy + (sin(a) * l) / 2;\n  } else {\n    x0 = 14 + r() * 36;\n    y0 = 8 + r() * 10;\n    x1 = 14 + r() * 36;\n    y1 = 110 + r() * 10;\n  }\n  const nx = -(y1 - y0), ny = x1 - x0, nl = sqrt(nx * nx + ny * ny) || 1, bend = (r() - 0.5) * 24;\n  const mx = (x0 + x1) / 2 + (nx / nl) * bend, my = (y0 + y1) / 2 + (ny / nl) * bend;\n  const P = S.pts;\n  let len = 0;\n  for (let k = 0; k \u003c 49; k++) {\n    const t = k / 48, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n    P[k * 2] = a * x0 + b * mx + c * x1;\n    P[k * 2 + 1] = a * y0 + b * my + c * y1;\n    if (k) len += Math.hypot(P[k * 2] - P[k * 2 - 2], P[k * 2 + 1] - P[k * 2 - 1]);\n  }\n  S.len = len;\n  S.wid = 11 + r() * 3;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let best = 1e9, bu = 0;\n      for (let k = 0; k \u003c 48; k++) {\n        const ax = P[k * 2], ay = P[k * 2 + 1], bx = P[k * 2 + 2] - ax, by = P[k * 2 + 3] - ay;\n        const t = cl(((x + 0.5 - ax) * bx + (y + 0.5 - ay) * by) / (bx * bx + by * by + 1e-6), 0, 1);\n        const dx = x + 0.5 - ax - bx * t, dy = y + 0.5 - ay - by * t, d = dx * dx + dy * dy;\n        if (d \u003c best) (best = d), (bu = (k + t) / 48);\n      }\n      S.dist[i] = sqrt(best);\n      S.su[i] = bu;\n    }\n  S.phase = 1;\n  S.lay = 0;\n  S.u = 0;\n  S.dir = 1;\n  S.pass = 0;\n  S.load = 0.3;\n}\n\n// Where the sponge comes down next: back and forth along the stripe, a step\n// at a time, zig-zagging to either side and further out with each pass.\nconst REACH = [6, 10, 14, 18, 12];\nfunction target(S) {\n  const P = S.pts, u = cl(S.u, 0, 1), k = min(47, floor(u * 48)), t = u * 48 - k;\n  const x = P[k * 2] + (P[k * 2 + 2] - P[k * 2]) * t, y = P[k * 2 + 1] + (P[k * 2 + 3] - P[k * 2 + 1]) * t;\n  const tx = P[k * 2 + 2] - P[k * 2], ty = P[k * 2 + 3] - P[k * 2 + 1], tl = sqrt(tx * tx + ty * ty) || 1;\n  const off = S.side * REACH[S.pass % REACH.length] * (0.2 + 0.8 * Math.random());\n  return [x - (ty / tl) * off + (Math.random() - 0.5) * 3, y + (tx / tl) * off + (Math.random() - 0.5) * 3];\n}\n\n// One dab: the sponge's touching cells give and take colour until each holds\n// nearer the patch's mean, with a little of what the sponge still carries\n// from the last dab, so the colour is dragged along the way it bounces. The\n// sponge soaks up a little each time, so a stripe thins as it spreads. The\n// print shows the touching cells as pores of deeper colour: all of them on a\n// fresh patch, and only their cores, smaller and fewer, each time the same\n// spot is dabbed again, until the patch is a smooth finish with fine pores.\nfunction dab(S, cx, cy) {\n  const cov = S.cov, R = 10 + 3 * cov, ox = floor(Math.random() * TS), oy = floor(Math.random() * TS);\n  const g = S.grain, tile = TILES[min(2, floor(g * 3))], rate = 0.7 + 0.25 * cov;\n  // A coarse sponge prints more and bigger pores, and prints them in thinner colour.\n  const fr = 0.36 + 0.24 * g, lo = 0.25 - 0.13 * g;\n  const A = S.A, pm = S.pm, cn = S.cn, sh = S.sh, C = S.c;\n  const E = R * 1.25, x0 = max(0, floor(cx - E)), x1 = min(W - 1, floor(cx + E)), y0 = max(0, floor(cy - E)), y1 = min(H - 1, floor(cy + E));\n  const p1 = Math.random() * 2 * PI, p2 = Math.random() * 2 * PI;\n  let sum = 0, area = 0;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy, th = Math.atan2(dy, dx), i = y * W + x;\n      // The sponge's tip is not a perfect circle, and turns from dab to dab.\n      const d = sqrt(dx * dx + dy * dy) / (R * (1 + 0.13 * sin(2 * th + p1) + 0.08 * sin(3 * th + p2)));\n      if (d >= 1) {\n        C[i] = 0;\n        continue;\n      }\n      const w = 1 - sm((d - 0.45) / 0.55);\n      const rk = tile[((y + oy) & (TS - 1)) * TS + ((x + ox) & (TS - 1))];\n      const c = w * (rk \u003c 128 ? 1 : 0.15) * rate;\n      C[i] = c;\n      sum += c * A[i];\n      area += c;\n      cn[i] += w;\n      sh[i] = max(sh[i], w);\n      // The print, except at the very rim where the sponge barely touched.\n      // Pores only show where colour sits, fewer the more it was dabbed.\n      if (w > 0.3 || hash(i + S.n * 131) \u003c w * 3) pm[i] = A[i] > lo && rk \u003c 256 * max(0.12, fr * exp(-cn[i] / 4)) ? 1 : 0;\n    }\n  if (area \u003c= 0) return;\n  const mean = sum / area, carry = 0.75 * mean + 0.25 * S.load;\n  S.load = mean;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, i = y * W + x0; x \u003c= x1; x++, i++) {\n      const c = C[i];\n      if (c > 0) A[i] = (A[i] + (carry - A[i]) * c) * (1 - 0.05 * c);\n    }\n  S.n++;\n}\n\nfunction stepT(S, st) {\n  if (S.phase === 1) {\n    // Laying the stripe on, top to bottom, in about a second.\n    S.lay = min(1, S.lay + st * 1.1);\n    const w2 = S.wid / 2, A = S.A;\n    for (let i = 0; i \u003c N; i++) {\n      const f = (S.lay - S.su[i]) * S.len;\n      if (f \u003c= 0) continue;\n      // A soft shoulder three LEDs wide on each side and at the tip, never a cliff.\n      const v = (1 - sm((S.dist[i] - w2 + 1.5) / 3)) * sm(f / 3);\n      if (v > A[i]) A[i] = v;\n    }\n    if (S.lay >= 1) {\n      S.phase = 2;\n      S.pt = 0;\n      S.dabT = 0.15;\n    }\n    return;\n  }\n  if (S.phase === 2) {\n    S.pt += st;\n    S.dabT -= st;\n    if (S.dabT \u003c= 0) {\n      S.dabT += 0.17 * (0.85 + 0.3 * Math.random());\n      const [x, y] = target(S);\n      dab(S, x, y);\n      S.side = -S.side;\n      S.u += (S.dir * 6.5) / S.len;\n      if (S.u > 1 || S.u \u003c 0) {\n        S.dir = -S.dir;\n        S.u = cl(S.u, 0, 1);\n        S.pass++;\n      }\n    }\n    if (S.pass >= REACH.length) {\n      S.phase = 3;\n      S.pt = 0;\n    }\n    return;\n  }\n  if (S.phase === 3) {\n    // A slow wipe from the top takes the colour off; then the next stripe.\n    S.pt += st;\n    const edge = S.pt * 110 - 10, A = S.A, cn = S.cn;\n    for (let y = 0; y \u003c H; y++) {\n      const k = cl((edge - y) / 12, 0, 1) * 0.25;\n      if (k \u003c= 0) break;\n      for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n        A[i] *= 1 - k;\n        cn[i] *= 1 - k;\n        if (A[i] \u003c 0.25) S.pm[i] = 0;\n      }\n    }\n    if (S.pt > 1.6) stripe(S, false);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.cov = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    if (!TILES) TILES = tiles();\n    // Open with the stripe more than half laid on.\n    stripe(S, false);\n    for (let i = 0; i \u003c 12; i++) stepT(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    stripe(S, true);\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  stepT(S, st);\n  // The wet shine dries in real time, over a second or two, so a fast sponge\n  // leaves several at once.\n  const fade = exp(-d * 1.4);\n  for (let i = 0; i \u003c N; i++) S.sh[i] *= fade;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const A = S.A, pm = S.pm, sh = S.sh, col = S.col;\n  const h = S.hue + 0.05, cov = S.cov;\n  // The base: a pale ivory with a breath of the hue. The colour: the hue at\n  // nearly the same brightness, so the blend shows as colour on a steady grain.\n  // Orange and gold read brown when dim, so round them the colour is lifted.\n  const hf = h - floor(h), wm = sm((hf - 0.03) / 0.05) * (1 - sm((hf - 0.15) / 0.07));\n  hsv(h, 0.06, 212, col, 0);\n  hsv(h, 0.5 + 0.18 * cov + 0.1 * wm, 208 + 18 * wm, col, 3);\n  // The damp canvas catches the light: two broad soft bands of sheen, about\n  // 18 levels at most and 35 LEDs wide, glide down it at 18 LEDs a second,\n  // tilted a little. They change by under a level from LED to LED, so they\n  // add no edge.\n  const cyc = H + 104, b0 = ((S.T * 18) % cyc) - 52, b1 = ((S.T * 18 + cyc / 2) % cyc) - 52;\n  // Grain also roughens the base: the checker's step grows by half from 0 to 1.\n  const g = S.grain, op = 0.65 + 0.35 * cov, dip = 0.05 + 0.03 * g, gs = STEP * (0.9 + 0.55 * g);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const sy = y + (x - 32) * 0.35, e0 = (sy - b0) / 15, e1 = (sy - b1) / 15;\n      const glow = 0.085 * (exp(-e0 * e0 * 0.5) + exp(-e1 * e1 * 0.5));\n      // How much pore is round this LED, 0..1 over its 3x3 neighbourhood.\n      let pv = 0;\n      for (let yy = max(0, y - 1); yy \u003c= min(H - 1, y + 1); yy++) for (let xx = max(0, x - 1), j = yy * W + xx; xx \u003c= min(W - 1, x + 1); xx++, j++) pv += pm[j];\n      pv /= 9;\n      // A pore holds more colour and sits a little deeper. A fresh dab is\n      // wet for a moment: its colour reads deeper and the base a touch\n      // brighter, then it dries back.\n      const ac = sqrt(cl(A[i], 0, 1)), wet = sh[i];\n      const a = min(1, ac * op * (1 + 0.45 * wet) + 0.45 * pv);\n      const l = 1 + glow + 0.08 * wet - dip * pv + gs * AMP[i] * (ODD[i] ? -0.5 : 0.5);\n      display.setPixel(x, y, (col[0] + (col[3] - col[0]) * a) * l, (col[1] + (col[4] - col[1]) * a) * l, (col[2] + (col[5] - col[2]) * a) * l);\n    }\n}\n","layer":{"id":"layer-sponge-blend","type":"code","name":"sponge-blend","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sponge Blend\n// Family:  cosmetic\n// Idea:    A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after foundation blended out with a damp makeup sponge\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1\n//\n// Knob 1: Hue. The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown.\n// Knob 2: Speed. How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower.\n// Knob 3: Coverage. How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab.\n// Knob 4: Grain. How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish.\n// Buttons: K1 tap lays a fresh stripe of colour for the sponge to blend out.\n\nconst W = 64, H = 128, N = W * H;\nconst TS = 128, TN = TS * TS;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sponge's pores: three tiles of noise blurred over 3, 5 and 7 LEDs, 128\n// LEDs square and wrapping, each LED's value turned into its rank 0..255.\n// Cutting a tile at rank 128 gives cells from two to four LEDs across, half of\n// them touching; cutting it lower leaves only the cores, small and sparse.\nlet TILES = null;\nfunction tiles() {\n  const out = [];\n  const raw = Float32Array.from({ length: TN }, (_, i) => hash(i + 911) - 0.5);\n  for (let r = 1; r \u003c= 3; r++) {\n    const b = new Float32Array(TN);\n    for (let y = 0; y \u003c TS; y++)\n      for (let x = 0; x \u003c TS; x++) {\n        let s = 0;\n        for (let dy = -r; dy \u003c= r; dy++) for (let dx = -r; dx \u003c= r; dx++) s += raw[((y + dy) & (TS - 1)) * TS + ((x + dx) & (TS - 1))];\n        b[y * TS + x] = s;\n      }\n    const order = Array.from({ length: TN }, (_, i) => i).sort((p, q) => b[p] - b[q]);\n    const rank = new Uint8Array(TN);\n    order.forEach((i, k) => (rank[i] = (k * 256) / TN));\n    out.push(rank);\n  }\n  return out;\n}\n\n// The base's grain is a fine checker: every other LED sits half a step above\n// the base and the rest half a step below, so neighbouring LEDs always differ\n// by about the same 28 to 41 levels and nothing reads as an outline. AMP is\n// each LED's own share of that step. The pores of a print are soft dips\n// spread over three LEDs, a few levels a LED, so they never cut an edge.\nconst AMP = Float32Array.from({ length: N }, (_, i) => 0.78 + 0.34 * hash(i + 4242));\nconst ODD = Uint8Array.from({ length: N }, (_, i) => ((i % W) + floor(i / W)) & 1);\nconst STEP = 0.175;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    A: F(N), c: F(N), pm: new Uint8Array(N), cn: F(N), sh: F(N), dist: F(N).fill(99), su: F(N),\n    phase: 0, pt: 0, lay: 0, len: 100, pts: F(98), u: 0, dir: 1, pass: 0, side: 1, load: 0, dabT: 0, n: 0,\n    hue: 0, speed: 2, cov: 0, grain: 0.06, started: false, col: F(6), T: 0,\n  };\n}\n\n// A new stripe: a gentle curve down most of the panel, or anywhere when\n// laid by hand. Every LED's distance from it and the place along it nearest\n// are kept for laying it on and for walking the sponge along it.\nfunction stripe(S, free) {\n  const r = Math.random;\n  let x0, y0, x1, y1;\n  if (free) {\n    const a = r() * PI, l = 50 + r() * 50, cx = 16 + r() * 32, cy = 30 + r() * 68;\n    x0 = cx - (cos(a) * l) / 2;\n    y0 = cy - (sin(a) * l) / 2;\n    x1 = cx + (cos(a) * l) / 2;\n    y1 = cy + (sin(a) * l) / 2;\n  } else {\n    x0 = 14 + r() * 36;\n    y0 = 8 + r() * 10;\n    x1 = 14 + r() * 36;\n    y1 = 110 + r() * 10;\n  }\n  const nx = -(y1 - y0), ny = x1 - x0, nl = sqrt(nx * nx + ny * ny) || 1, bend = (r() - 0.5) * 24;\n  const mx = (x0 + x1) / 2 + (nx / nl) * bend, my = (y0 + y1) / 2 + (ny / nl) * bend;\n  const P = S.pts;\n  let len = 0;\n  for (let k = 0; k \u003c 49; k++) {\n    const t = k / 48, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n    P[k * 2] = a * x0 + b * mx + c * x1;\n    P[k * 2 + 1] = a * y0 + b * my + c * y1;\n    if (k) len += Math.hypot(P[k * 2] - P[k * 2 - 2], P[k * 2 + 1] - P[k * 2 - 1]);\n  }\n  S.len = len;\n  S.wid = 11 + r() * 3;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let best = 1e9, bu = 0;\n      for (let k = 0; k \u003c 48; k++) {\n        const ax = P[k * 2], ay = P[k * 2 + 1], bx = P[k * 2 + 2] - ax, by = P[k * 2 + 3] - ay;\n        const t = cl(((x + 0.5 - ax) * bx + (y + 0.5 - ay) * by) / (bx * bx + by * by + 1e-6), 0, 1);\n        const dx = x + 0.5 - ax - bx * t, dy = y + 0.5 - ay - by * t, d = dx * dx + dy * dy;\n        if (d \u003c best) (best = d), (bu = (k + t) / 48);\n      }\n      S.dist[i] = sqrt(best);\n      S.su[i] = bu;\n    }\n  S.phase = 1;\n  S.lay = 0;\n  S.u = 0;\n  S.dir = 1;\n  S.pass = 0;\n  S.load = 0.3;\n}\n\n// Where the sponge comes down next: back and forth along the stripe, a step\n// at a time, zig-zagging to either side and further out with each pass.\nconst REACH = [6, 10, 14, 18, 12];\nfunction target(S) {\n  const P = S.pts, u = cl(S.u, 0, 1), k = min(47, floor(u * 48)), t = u * 48 - k;\n  const x = P[k * 2] + (P[k * 2 + 2] - P[k * 2]) * t, y = P[k * 2 + 1] + (P[k * 2 + 3] - P[k * 2 + 1]) * t;\n  const tx = P[k * 2 + 2] - P[k * 2], ty = P[k * 2 + 3] - P[k * 2 + 1], tl = sqrt(tx * tx + ty * ty) || 1;\n  const off = S.side * REACH[S.pass % REACH.length] * (0.2 + 0.8 * Math.random());\n  return [x - (ty / tl) * off + (Math.random() - 0.5) * 3, y + (tx / tl) * off + (Math.random() - 0.5) * 3];\n}\n\n// One dab: the sponge's touching cells give and take colour until each holds\n// nearer the patch's mean, with a little of what the sponge still carries\n// from the last dab, so the colour is dragged along the way it bounces. The\n// sponge soaks up a little each time, so a stripe thins as it spreads. The\n// print shows the touching cells as pores of deeper colour: all of them on a\n// fresh patch, and only their cores, smaller and fewer, each time the same\n// spot is dabbed again, until the patch is a smooth finish with fine pores.\nfunction dab(S, cx, cy) {\n  const cov = S.cov, R = 10 + 3 * cov, ox = floor(Math.random() * TS), oy = floor(Math.random() * TS);\n  const g = S.grain, tile = TILES[min(2, floor(g * 3))], rate = 0.7 + 0.25 * cov;\n  // A coarse sponge prints more and bigger pores, and prints them in thinner colour.\n  const fr = 0.36 + 0.24 * g, lo = 0.25 - 0.13 * g;\n  const A = S.A, pm = S.pm, cn = S.cn, sh = S.sh, C = S.c;\n  const E = R * 1.25, x0 = max(0, floor(cx - E)), x1 = min(W - 1, floor(cx + E)), y0 = max(0, floor(cy - E)), y1 = min(H - 1, floor(cy + E));\n  const p1 = Math.random() * 2 * PI, p2 = Math.random() * 2 * PI;\n  let sum = 0, area = 0;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy, th = Math.atan2(dy, dx), i = y * W + x;\n      // The sponge's tip is not a perfect circle, and turns from dab to dab.\n      const d = sqrt(dx * dx + dy * dy) / (R * (1 + 0.13 * sin(2 * th + p1) + 0.08 * sin(3 * th + p2)));\n      if (d >= 1) {\n        C[i] = 0;\n        continue;\n      }\n      const w = 1 - sm((d - 0.45) / 0.55);\n      const rk = tile[((y + oy) & (TS - 1)) * TS + ((x + ox) & (TS - 1))];\n      const c = w * (rk \u003c 128 ? 1 : 0.15) * rate;\n      C[i] = c;\n      sum += c * A[i];\n      area += c;\n      cn[i] += w;\n      sh[i] = max(sh[i], w);\n      // The print, except at the very rim where the sponge barely touched.\n      // Pores only show where colour sits, fewer the more it was dabbed.\n      if (w > 0.3 || hash(i + S.n * 131) \u003c w * 3) pm[i] = A[i] > lo && rk \u003c 256 * max(0.12, fr * exp(-cn[i] / 4)) ? 1 : 0;\n    }\n  if (area \u003c= 0) return;\n  const mean = sum / area, carry = 0.75 * mean + 0.25 * S.load;\n  S.load = mean;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, i = y * W + x0; x \u003c= x1; x++, i++) {\n      const c = C[i];\n      if (c > 0) A[i] = (A[i] + (carry - A[i]) * c) * (1 - 0.05 * c);\n    }\n  S.n++;\n}\n\nfunction stepT(S, st) {\n  if (S.phase === 1) {\n    // Laying the stripe on, top to bottom, in about a second.\n    S.lay = min(1, S.lay + st * 1.1);\n    const w2 = S.wid / 2, A = S.A;\n    for (let i = 0; i \u003c N; i++) {\n      const f = (S.lay - S.su[i]) * S.len;\n      if (f \u003c= 0) continue;\n      // A soft shoulder three LEDs wide on each side and at the tip, never a cliff.\n      const v = (1 - sm((S.dist[i] - w2 + 1.5) / 3)) * sm(f / 3);\n      if (v > A[i]) A[i] = v;\n    }\n    if (S.lay >= 1) {\n      S.phase = 2;\n      S.pt = 0;\n      S.dabT = 0.15;\n    }\n    return;\n  }\n  if (S.phase === 2) {\n    S.pt += st;\n    S.dabT -= st;\n    if (S.dabT \u003c= 0) {\n      S.dabT += 0.17 * (0.85 + 0.3 * Math.random());\n      const [x, y] = target(S);\n      dab(S, x, y);\n      S.side = -S.side;\n      S.u += (S.dir * 6.5) / S.len;\n      if (S.u > 1 || S.u \u003c 0) {\n        S.dir = -S.dir;\n        S.u = cl(S.u, 0, 1);\n        S.pass++;\n      }\n    }\n    if (S.pass >= REACH.length) {\n      S.phase = 3;\n      S.pt = 0;\n    }\n    return;\n  }\n  if (S.phase === 3) {\n    // A slow wipe from the top takes the colour off; then the next stripe.\n    S.pt += st;\n    const edge = S.pt * 110 - 10, A = S.A, cn = S.cn;\n    for (let y = 0; y \u003c H; y++) {\n      const k = cl((edge - y) / 12, 0, 1) * 0.25;\n      if (k \u003c= 0) break;\n      for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n        A[i] *= 1 - k;\n        cn[i] *= 1 - k;\n        if (A[i] \u003c 0.25) S.pm[i] = 0;\n      }\n    }\n    if (S.pt > 1.6) stripe(S, false);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.cov = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    if (!TILES) TILES = tiles();\n    // Open with the stripe more than half laid on.\n    stripe(S, false);\n    for (let i = 0; i \u003c 12; i++) stepT(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    stripe(S, true);\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  stepT(S, st);\n  // The wet shine dries in real time, over a second or two, so a fast sponge\n  // leaves several at once.\n  const fade = exp(-d * 1.4);\n  for (let i = 0; i \u003c N; i++) S.sh[i] *= fade;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const A = S.A, pm = S.pm, sh = S.sh, col = S.col;\n  const h = S.hue + 0.05, cov = S.cov;\n  // The base: a pale ivory with a breath of the hue. The colour: the hue at\n  // nearly the same brightness, so the blend shows as colour on a steady grain.\n  // Orange and gold read brown when dim, so round them the colour is lifted.\n  const hf = h - floor(h), wm = sm((hf - 0.03) / 0.05) * (1 - sm((hf - 0.15) / 0.07));\n  hsv(h, 0.06, 212, col, 0);\n  hsv(h, 0.5 + 0.18 * cov + 0.1 * wm, 208 + 18 * wm, col, 3);\n  // The damp canvas catches the light: two broad soft bands of sheen, about\n  // 18 levels at most and 35 LEDs wide, glide down it at 18 LEDs a second,\n  // tilted a little. They change by under a level from LED to LED, so they\n  // add no edge.\n  const cyc = H + 104, b0 = ((S.T * 18) % cyc) - 52, b1 = ((S.T * 18 + cyc / 2) % cyc) - 52;\n  // Grain also roughens the base: the checker's step grows by half from 0 to 1.\n  const g = S.grain, op = 0.65 + 0.35 * cov, dip = 0.05 + 0.03 * g, gs = STEP * (0.9 + 0.55 * g);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const sy = y + (x - 32) * 0.35, e0 = (sy - b0) / 15, e1 = (sy - b1) / 15;\n      const glow = 0.085 * (exp(-e0 * e0 * 0.5) + exp(-e1 * e1 * 0.5));\n      // How much pore is round this LED, 0..1 over its 3x3 neighbourhood.\n      let pv = 0;\n      for (let yy = max(0, y - 1); yy \u003c= min(H - 1, y + 1); yy++) for (let xx = max(0, x - 1), j = yy * W + xx; xx \u003c= min(W - 1, x + 1); xx++, j++) pv += pm[j];\n      pv /= 9;\n      // A pore holds more colour and sits a little deeper. A fresh dab is\n      // wet for a moment: its colour reads deeper and the base a touch\n      // brighter, then it dries back.\n      const ac = sqrt(cl(A[i], 0, 1)), wet = sh[i];\n      const a = min(1, ac * op * (1 + 0.45 * wet) + 0.45 * pv);\n      const l = 1 + glow + 0.08 * wet - dip * pv + gs * AMP[i] * (ODD[i] ? -0.5 : 0.5);\n      display.setPixel(x, y, (col[0] + (col[3] - col[0]) * a) * l, (col[1] + (col[4] - col[1]) * a) * l, (col[2] + (col[5] - col[2]) * a) * l);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower."},{"name":"Coverage","min":0,"max":1,"about":"How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab."},{"name":"Grain","min":0,"max":1,"about":"How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish."}],"start":[0,2,0,0.06],"measures":{"motion":0.0318,"detail":0.1277,"edges":0.0012,"complexity":1.8672,"coverage":1,"colour":0.1441,"drift":0.0382},"knobResponse":[0.095,0.0521,0.043,0.0383]},{"slug":"sprout","title":"Sprout","family":"growth","round":1,"note":"한 LED 씩 자라는 픽셀 들꽃밭이에요. 키 큰 접시꽃 둘이 패널 위쪽까지 올라가 꽃대 아래부터 피어요. 시든 꽃잎은 한 점씩 떨어져 발치에 쌓이고, 시드는 포기 곁에서 새 싹이 올라와요.","idea":"Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.","buttons":"K1 tap sows a seed now.","code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","layer":{"id":"layer-sprout","type":"code","name":"sprout","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The flower colour; each plant takes a shade either side of it."},{"name":"Grow","min":0.25,"max":6,"about":"How fast the tips climb, and with it how soon a plant flowers, withers and makes room."},{"name":"Branches","min":3,"max":14,"about":"How many tips a plant may have, from a stem with two side shoots to a small tree."},{"name":"Wind","min":-1,"max":1,"about":"Leans new growth and sways the tops; left of centre it blows the other way."}],"start":[0,2,3,0.06],"measures":{"motion":0.0426,"detail":0.1141,"edges":0.9949,"complexity":0.1635,"coverage":0.1685,"colour":0.2652,"drift":0.0313},"knobResponse":[0.0448,0.119,0.1279,0.0982]},{"slug":"stadium-billiard","title":"Stadium Billiard","family":"physics","round":28,"note":"공 이백 개가 방향을 1000분의 3 라디안 안에서만 달리해 한 점에서 흰 구슬 하나로 떠나요. 패널만 한 부니모비치 경기장의 둥근 끝이 구슬을 무지개 선으로 늘이고 접어서, 몇 초 만에 공들이 기체처럼 판을 채워요. K3 을 돌리면 탁자가 원이 되어 공이 흩어지지 않고, 누르면 새 무리가 떠나요.","idea":"Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.","buttons":"K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.","code":"// ===== Patternflow pattern =====\n// Title:   Stadium Billiard\n// Family:  physics\n// Idea:    Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Bunimovich stadium (Leonid Bunimovich, 1974), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1\n//\n// Knob 1: Hue. Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back.\n// Knob 2: Speed. At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots.\n// Knob 3: Round. At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up.\n// Knob 4: Trail. How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it.\n// Buttons: K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64, R = 32;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two hundred balls, launched with headings spread over FAN radians. VEL\n// LEDs a second per unit of Speed; TAU the shortest trail's time constant.\n// After CYCLE LEDs of flight the gas gathers for GATHER seconds and a new\n// bunch leaves. The cloth and its edge sit just under the 24/255 an LED\n// needs to count as lit, so the table shows on the panel as a faint shape.\nconst NB = 200;\nconst FAN = 3e-3, VEL = 62.5, TAU = 0.035;\nconst CYCLE = 1900, GATHER = 0.9;\nconst CLOTH = 0.075, RIM = 0.094;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nfunction inside(a, x, y, m) {\n  if (abs(y) \u003c= a) return abs(x) \u003c= R - m;\n  const cy = y > 0 ? a : -a;\n  return x * x + (y - cy) * (y - cy) \u003c= (R - m) * (R - m);\n}\n\n// Where along (dx, dy) a ball at (x, y) meets the wall, and the wall's\n// normal there.\nconst HIT = [0, 0, 0];\nfunction hit(a, x, y, dx, dy) {\n  let t = Infinity, nx = 0, ny = 0;\n  if (dx > 1e-12) {\n    const u = (R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = 1), (ny = 0);\n  } else if (dx \u003c -1e-12) {\n    const u = (-R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = -1), (ny = 0);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    const cy = s * a, py = y - cy, b = x * dx + py * dy, c = x * x + py * py - R * R, d = b * b - c;\n    if (d \u003c 0) continue;\n    const u = -b + sqrt(d);\n    if (u \u003c= 1e-9 || u >= t) continue;\n    const hy = y + u * dy - cy;\n    if (s * hy \u003c -1e-6) continue;\n    t = u;\n    nx = (x + u * dx) / R;\n    ny = hy / R;\n  }\n  HIT[0] = t;\n  HIT[1] = nx;\n  HIT[2] = ny;\n}\n\n// Lights the LEDs a ball passes between (x0, y0) and (x1, y1), each once,\n// w0 at the start fading up to w1 at the end.\nfunction trail(P, i, x0, y0, x1, y1, w0, w1) {\n  const n = max(1, ceil(sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)) / 0.6)), buf = P.buf, c = i * 3;\n  const cr = P.col[c], cg = P.col[c + 1], cb = P.col[c + 2];\n  for (let j = 1; j \u003c= n; j++) {\n    const t = j / n, X = floor(x0 + (x1 - x0) * t + CX), Y = floor(y0 + (y1 - y0) * t + CY);\n    const p = cl(Y, 0, H - 1) * W + cl(X, 0, W - 1);\n    if (p === P.lastp) continue;\n    P.lastp = p;\n    const w = w0 + (w1 - w0) * t, q = p * 3;\n    buf[q] += cr * w;\n    buf[q + 1] += cg * w;\n    buf[q + 2] += cb * w;\n  }\n}\n\n// Ball i flies s LEDs, bouncing off the walls exactly.\nfunction fly(P, i, s, w0, w1) {\n  const a = P.a;\n  let x = P.x[i], y = P.y[i], dx = P.dx[i], dy = P.dy[i], done = 0;\n  for (let k = 0; k \u003c 24 && done \u003c s; k++) {\n    hit(a, x, y, dx, dy);\n    // Every ray from inside meets the wall; a ball that finds none has been\n    // left outside, and goes back to the middle.\n    if (HIT[0] === Infinity && !inside(a, x, y, -0.5)) (x = 0), (y = 0);\n    const bounce = HIT[0] \u003c s - done, t = bounce ? HIT[0] : s - done;\n    const x1 = x + t * dx, y1 = y + t * dy;\n    trail(P, i, x, y, x1, y1, w0 + ((w1 - w0) * done) / s, w0 + ((w1 - w0) * (done + t)) / s);\n    x = x1;\n    y = y1;\n    done = bounce ? done + t : s;\n    if (bounce) {\n      const nx = HIT[1], ny = HIT[2], d = dx * nx + dy * ny;\n      dx -= 2 * d * nx;\n      dy -= 2 * d * ny;\n    }\n  }\n  P.x[i] = x;\n  P.y[i] = y;\n  P.dx[i] = dx;\n  P.dy[i] = dy;\n}\n\n// How far apart the two edge balls of a bunch launched from (x, y) at\n// angle th are after flying s LEDs.\nfunction split(a, x, y, th, s) {\n  const e = [];\n  for (const o of [-FAN / 2, FAN / 2]) {\n    let px = x, py = y, dx = cos(th + o), dy = sin(th + o), done = 0;\n    for (let k = 0; k \u003c 200 && done \u003c s; k++) {\n      hit(a, px, py, dx, dy);\n      if (HIT[0] >= s - done) {\n        px += (s - done) * dx;\n        py += (s - done) * dy;\n        break;\n      }\n      px += HIT[0] * dx;\n      py += HIT[0] * dy;\n      done += HIT[0];\n      const d = dx * HIT[1] + dy * HIT[2];\n      dx -= 2 * d * HIT[1];\n      dy -= 2 * d * HIT[2];\n    }\n    e.push(px, py);\n  }\n  return sqrt((e[0] - e[2]) ** 2 + (e[1] - e[3]) ** 2);\n}\n\n// A new launch: of sixteen spots and headings, the one whose bunch holds\n// together for the first 250 LEDs of flight and is furthest apart after 400\n// and 550, two and three and a half seconds at the opening speed. Headings\n// stay at least 30 degrees off the bouncing-ball orbits that run straight\n// across between the flat sides and take their time to come apart.\nfunction pick(P) {\n  const a = P.a;\n  let best = [0, 0, PI / 3], bd = -2;\n  for (let k = 0; k \u003c 16; k++) {\n    const x = (Math.random() * 2 - 1) * 20, y = (Math.random() * 2 - 1) * (a + 16);\n    if (!inside(a, x, y, 6)) continue;\n    let th = (0.17 + Math.random() * 0.3) * PI;\n    if (Math.random() \u003c 0.5) th = -th;\n    if (Math.random() \u003c 0.5) th = PI - th;\n    const d = a \u003c 4 ? 0 : split(a, x, y, th, 250) \u003c 6 ? split(a, x, y, th, 400) + split(a, x, y, th, 550) : -1;\n    if (d > bd) (bd = d), (best = [x, y, th]);\n  }\n  return best;\n}\n\nfunction launch(P, x, y, th) {\n  if (!inside(P.a, x, y, 1)) (x = 0), (y = 0);\n  for (let i = 0; i \u003c NB; i++) {\n    const t = th + FAN * (i / (NB - 1) - 0.5);\n    P.x[i] = x;\n    P.y[i] = y;\n    P.dx[i] = cos(t);\n    P.dy[i] = sin(t);\n  }\n  P.run = 0;\n  P.g = -1;\n}\n\n// The cloth: 1 on the table, 2 on its edge, 0 in the corners outside it.\nfunction table(P) {\n  const a = P.a, m = P.cloth;\n  for (let p = 0; p \u003c N; p++) m[p] = inside(a, (p % W) + 0.5 - CX, ((p / W) | 0) + 0.5 - CY, 0) ? 1 : 0;\n  const put = (x, y) => (m[cl(floor(y + CY), 0, H - 1) * W + cl(floor(x + CX), 0, W - 1)] = 2);\n  for (let y = -a; y \u003c= a; y += 0.5) put(-R + 0.01, y), put(R - 0.01, y);\n  for (let k = 0; k \u003c= 400; k++) {\n    const t = (k / 400) * PI, x = R * cos(t) * 0.9997, y = R * sin(t) * 0.9997;\n    put(x, a + y);\n    put(x, -a - y);\n  }\n}\n\nexport function setup(params) {\n  const F64 = (n) => new Float64Array(n);\n  params.s = {\n    x: F64(NB), y: F64(NB), dx: F64(NB), dy: F64(NB), gx: F64(NB), gy: F64(NB),\n    col: new Float32Array(NB * 3), buf: new Float32Array(N * 3), img: new Float32Array(N * 3),\n    a: 32, cloth: new Uint8Array(N), run: 0, g: -1, L: null, lastp: -1, hue: NaN, tint: [0, 0, 0, 0, 0, 0],\n  };\n  table(params.s);\n  launch(params.s, -19.9, 11.2, 2.389);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const v = VEL * cl(k[1], 0.2, 3), tr = cl(k[3], 0, 1), tau = TAU + 2.2 * tr * tr;\n  const f = exp(-d / tau), B = min(1, 0.07 / tau);\n  // Each ball keeps its place in the fan as a colour, six tenths of the\n  // wheel from one edge to the other, so the bead is white where they all\n  // overlap and the line it stretches into is a rainbow. The cloth turns\n  // from teal to violet and back and is never a dim orange, which reads brown.\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    for (let i = 0; i \u003c NB; i++) hsv(k[0] + 0.5 + 0.6 * (i / (NB - 1) - 0.5), 1, 1, P.col, i * 3);\n    const c = 0.52 + 0.28 * sin(PI * k[0]) ** 2;\n    hsv(c, 0.75, CLOTH, P.tint, 0);\n    hsv(c, 0.6, RIM, P.tint, 3);\n  }\n\n  // The table: two half circles of radius 32 joined by straight sides 2a long.\n  const a = 32 * (1 - cl(k[2], 0, 1));\n  if (abs(a - P.a) > 1e-6) {\n    P.a = a;\n    table(P);\n    for (let i = 0; i \u003c NB; i++) {\n      let x = P.x[i], y = P.y[i];\n      if (inside(a, x, y, 0.01)) continue;\n      const cy = abs(y) \u003c= a ? y : y > 0 ? a : -a, ox = x, oy = y - cy, r = sqrt(ox * ox + oy * oy) || 1;\n      x = (ox / r) * (R - 0.02);\n      y = cy + (oy / r) * (R - 0.02);\n      const nx = ox / r, ny = oy / r, dd = P.dx[i] * nx + P.dy[i] * ny;\n      if (dd > 0) (P.dx[i] -= 2 * dd * nx), (P.dy[i] -= 2 * dd * ny);\n      P.x[i] = x;\n      P.y[i] = y;\n    }\n  }\n\n  const buf = P.buf;\n  for (let q = 0; q \u003c N * 3; q++) buf[q] *= f;\n  if (P.g >= 0 && !inside(a, P.L[0], P.L[1], 1)) (P.L[0] = 0), (P.L[1] = 0);\n\n  if (P.g \u003c 0 && ((input.btnPressed && input.btnPressed[0]) || P.run > CYCLE)) {\n    P.L = pick(P);\n    P.g = 0;\n    P.gx.set(P.x);\n    P.gy.set(P.y);\n  }\n  if (P.g >= 0) {\n    // Gathering: every ball runs straight to the next launch spot.\n    const u0 = P.g / GATHER, u1 = min(1, (P.g + d) / GATHER);\n    const e0 = u0 * u0 * (3 - 2 * u0), e1 = u1 * u1 * (3 - 2 * u1), [lx, ly, th] = P.L;\n    for (let i = 0; i \u003c NB; i++) {\n      const x0 = P.gx[i] + (lx - P.gx[i]) * e0, y0 = P.gy[i] + (ly - P.gy[i]) * e0;\n      const x1 = P.gx[i] + (lx - P.gx[i]) * e1, y1 = P.gy[i] + (ly - P.gy[i]) * e1;\n      P.lastp = -1;\n      trail(P, i, x0, y0, x1, y1, B * f, B);\n      P.x[i] = x1;\n      P.y[i] = y1;\n    }\n    P.g += d;\n    if (u1 >= 1) launch(P, lx, ly, th);\n  } else if (d > 0) {\n    const s = v * d;\n    for (let i = 0; i \u003c NB; i++) {\n      P.lastp = -1;\n      fly(P, i, s, B * f, B);\n    }\n    P.run += s;\n  }\n  // Where the whole bunch passes at once the light piles up; capped, the\n  // bead's tail is no longer than a lone ball's.\n  for (let q = 0; q \u003c N * 3; q++) if (buf[q] > 1.5) buf[q] = 1.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const img = P.img, col = P.col, t = P.tint, m = P.cloth, buf = P.buf;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const o = m[p] === 2 ? 3 : 0, c = m[p] ? 1 : 0;\n    img[q] = max(buf[q], t[o] * c);\n    img[q + 1] = max(buf[q + 1], t[o + 1] * c);\n    img[q + 2] = max(buf[q + 2], t[o + 2] * c);\n  }\n  for (let i = 0; i \u003c NB; i++) {\n    const q = (cl(floor(P.y[i] + CY), 0, H - 1) * W + cl(floor(P.x[i] + CX), 0, W - 1)) * 3, c = i * 3;\n    img[q] += col[c];\n    img[q + 1] += col[c + 1];\n    img[q + 2] += col[c + 2];\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, img[q] * 255) | 0, min(255, img[q + 1] * 255) | 0, min(255, img[q + 2] * 255) | 0);\n  }\n}\n","layer":{"id":"layer-stadium-billiard","type":"code","name":"stadium-billiard","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Stadium Billiard\n// Family:  physics\n// Idea:    Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Bunimovich stadium (Leonid Bunimovich, 1974), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1\n//\n// Knob 1: Hue. Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back.\n// Knob 2: Speed. At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots.\n// Knob 3: Round. At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up.\n// Knob 4: Trail. How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it.\n// Buttons: K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64, R = 32;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two hundred balls, launched with headings spread over FAN radians. VEL\n// LEDs a second per unit of Speed; TAU the shortest trail's time constant.\n// After CYCLE LEDs of flight the gas gathers for GATHER seconds and a new\n// bunch leaves. The cloth and its edge sit just under the 24/255 an LED\n// needs to count as lit, so the table shows on the panel as a faint shape.\nconst NB = 200;\nconst FAN = 3e-3, VEL = 62.5, TAU = 0.035;\nconst CYCLE = 1900, GATHER = 0.9;\nconst CLOTH = 0.075, RIM = 0.094;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nfunction inside(a, x, y, m) {\n  if (abs(y) \u003c= a) return abs(x) \u003c= R - m;\n  const cy = y > 0 ? a : -a;\n  return x * x + (y - cy) * (y - cy) \u003c= (R - m) * (R - m);\n}\n\n// Where along (dx, dy) a ball at (x, y) meets the wall, and the wall's\n// normal there.\nconst HIT = [0, 0, 0];\nfunction hit(a, x, y, dx, dy) {\n  let t = Infinity, nx = 0, ny = 0;\n  if (dx > 1e-12) {\n    const u = (R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = 1), (ny = 0);\n  } else if (dx \u003c -1e-12) {\n    const u = (-R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = -1), (ny = 0);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    const cy = s * a, py = y - cy, b = x * dx + py * dy, c = x * x + py * py - R * R, d = b * b - c;\n    if (d \u003c 0) continue;\n    const u = -b + sqrt(d);\n    if (u \u003c= 1e-9 || u >= t) continue;\n    const hy = y + u * dy - cy;\n    if (s * hy \u003c -1e-6) continue;\n    t = u;\n    nx = (x + u * dx) / R;\n    ny = hy / R;\n  }\n  HIT[0] = t;\n  HIT[1] = nx;\n  HIT[2] = ny;\n}\n\n// Lights the LEDs a ball passes between (x0, y0) and (x1, y1), each once,\n// w0 at the start fading up to w1 at the end.\nfunction trail(P, i, x0, y0, x1, y1, w0, w1) {\n  const n = max(1, ceil(sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)) / 0.6)), buf = P.buf, c = i * 3;\n  const cr = P.col[c], cg = P.col[c + 1], cb = P.col[c + 2];\n  for (let j = 1; j \u003c= n; j++) {\n    const t = j / n, X = floor(x0 + (x1 - x0) * t + CX), Y = floor(y0 + (y1 - y0) * t + CY);\n    const p = cl(Y, 0, H - 1) * W + cl(X, 0, W - 1);\n    if (p === P.lastp) continue;\n    P.lastp = p;\n    const w = w0 + (w1 - w0) * t, q = p * 3;\n    buf[q] += cr * w;\n    buf[q + 1] += cg * w;\n    buf[q + 2] += cb * w;\n  }\n}\n\n// Ball i flies s LEDs, bouncing off the walls exactly.\nfunction fly(P, i, s, w0, w1) {\n  const a = P.a;\n  let x = P.x[i], y = P.y[i], dx = P.dx[i], dy = P.dy[i], done = 0;\n  for (let k = 0; k \u003c 24 && done \u003c s; k++) {\n    hit(a, x, y, dx, dy);\n    // Every ray from inside meets the wall; a ball that finds none has been\n    // left outside, and goes back to the middle.\n    if (HIT[0] === Infinity && !inside(a, x, y, -0.5)) (x = 0), (y = 0);\n    const bounce = HIT[0] \u003c s - done, t = bounce ? HIT[0] : s - done;\n    const x1 = x + t * dx, y1 = y + t * dy;\n    trail(P, i, x, y, x1, y1, w0 + ((w1 - w0) * done) / s, w0 + ((w1 - w0) * (done + t)) / s);\n    x = x1;\n    y = y1;\n    done = bounce ? done + t : s;\n    if (bounce) {\n      const nx = HIT[1], ny = HIT[2], d = dx * nx + dy * ny;\n      dx -= 2 * d * nx;\n      dy -= 2 * d * ny;\n    }\n  }\n  P.x[i] = x;\n  P.y[i] = y;\n  P.dx[i] = dx;\n  P.dy[i] = dy;\n}\n\n// How far apart the two edge balls of a bunch launched from (x, y) at\n// angle th are after flying s LEDs.\nfunction split(a, x, y, th, s) {\n  const e = [];\n  for (const o of [-FAN / 2, FAN / 2]) {\n    let px = x, py = y, dx = cos(th + o), dy = sin(th + o), done = 0;\n    for (let k = 0; k \u003c 200 && done \u003c s; k++) {\n      hit(a, px, py, dx, dy);\n      if (HIT[0] >= s - done) {\n        px += (s - done) * dx;\n        py += (s - done) * dy;\n        break;\n      }\n      px += HIT[0] * dx;\n      py += HIT[0] * dy;\n      done += HIT[0];\n      const d = dx * HIT[1] + dy * HIT[2];\n      dx -= 2 * d * HIT[1];\n      dy -= 2 * d * HIT[2];\n    }\n    e.push(px, py);\n  }\n  return sqrt((e[0] - e[2]) ** 2 + (e[1] - e[3]) ** 2);\n}\n\n// A new launch: of sixteen spots and headings, the one whose bunch holds\n// together for the first 250 LEDs of flight and is furthest apart after 400\n// and 550, two and three and a half seconds at the opening speed. Headings\n// stay at least 30 degrees off the bouncing-ball orbits that run straight\n// across between the flat sides and take their time to come apart.\nfunction pick(P) {\n  const a = P.a;\n  let best = [0, 0, PI / 3], bd = -2;\n  for (let k = 0; k \u003c 16; k++) {\n    const x = (Math.random() * 2 - 1) * 20, y = (Math.random() * 2 - 1) * (a + 16);\n    if (!inside(a, x, y, 6)) continue;\n    let th = (0.17 + Math.random() * 0.3) * PI;\n    if (Math.random() \u003c 0.5) th = -th;\n    if (Math.random() \u003c 0.5) th = PI - th;\n    const d = a \u003c 4 ? 0 : split(a, x, y, th, 250) \u003c 6 ? split(a, x, y, th, 400) + split(a, x, y, th, 550) : -1;\n    if (d > bd) (bd = d), (best = [x, y, th]);\n  }\n  return best;\n}\n\nfunction launch(P, x, y, th) {\n  if (!inside(P.a, x, y, 1)) (x = 0), (y = 0);\n  for (let i = 0; i \u003c NB; i++) {\n    const t = th + FAN * (i / (NB - 1) - 0.5);\n    P.x[i] = x;\n    P.y[i] = y;\n    P.dx[i] = cos(t);\n    P.dy[i] = sin(t);\n  }\n  P.run = 0;\n  P.g = -1;\n}\n\n// The cloth: 1 on the table, 2 on its edge, 0 in the corners outside it.\nfunction table(P) {\n  const a = P.a, m = P.cloth;\n  for (let p = 0; p \u003c N; p++) m[p] = inside(a, (p % W) + 0.5 - CX, ((p / W) | 0) + 0.5 - CY, 0) ? 1 : 0;\n  const put = (x, y) => (m[cl(floor(y + CY), 0, H - 1) * W + cl(floor(x + CX), 0, W - 1)] = 2);\n  for (let y = -a; y \u003c= a; y += 0.5) put(-R + 0.01, y), put(R - 0.01, y);\n  for (let k = 0; k \u003c= 400; k++) {\n    const t = (k / 400) * PI, x = R * cos(t) * 0.9997, y = R * sin(t) * 0.9997;\n    put(x, a + y);\n    put(x, -a - y);\n  }\n}\n\nexport function setup(params) {\n  const F64 = (n) => new Float64Array(n);\n  params.s = {\n    x: F64(NB), y: F64(NB), dx: F64(NB), dy: F64(NB), gx: F64(NB), gy: F64(NB),\n    col: new Float32Array(NB * 3), buf: new Float32Array(N * 3), img: new Float32Array(N * 3),\n    a: 32, cloth: new Uint8Array(N), run: 0, g: -1, L: null, lastp: -1, hue: NaN, tint: [0, 0, 0, 0, 0, 0],\n  };\n  table(params.s);\n  launch(params.s, -19.9, 11.2, 2.389);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const v = VEL * cl(k[1], 0.2, 3), tr = cl(k[3], 0, 1), tau = TAU + 2.2 * tr * tr;\n  const f = exp(-d / tau), B = min(1, 0.07 / tau);\n  // Each ball keeps its place in the fan as a colour, six tenths of the\n  // wheel from one edge to the other, so the bead is white where they all\n  // overlap and the line it stretches into is a rainbow. The cloth turns\n  // from teal to violet and back and is never a dim orange, which reads brown.\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    for (let i = 0; i \u003c NB; i++) hsv(k[0] + 0.5 + 0.6 * (i / (NB - 1) - 0.5), 1, 1, P.col, i * 3);\n    const c = 0.52 + 0.28 * sin(PI * k[0]) ** 2;\n    hsv(c, 0.75, CLOTH, P.tint, 0);\n    hsv(c, 0.6, RIM, P.tint, 3);\n  }\n\n  // The table: two half circles of radius 32 joined by straight sides 2a long.\n  const a = 32 * (1 - cl(k[2], 0, 1));\n  if (abs(a - P.a) > 1e-6) {\n    P.a = a;\n    table(P);\n    for (let i = 0; i \u003c NB; i++) {\n      let x = P.x[i], y = P.y[i];\n      if (inside(a, x, y, 0.01)) continue;\n      const cy = abs(y) \u003c= a ? y : y > 0 ? a : -a, ox = x, oy = y - cy, r = sqrt(ox * ox + oy * oy) || 1;\n      x = (ox / r) * (R - 0.02);\n      y = cy + (oy / r) * (R - 0.02);\n      const nx = ox / r, ny = oy / r, dd = P.dx[i] * nx + P.dy[i] * ny;\n      if (dd > 0) (P.dx[i] -= 2 * dd * nx), (P.dy[i] -= 2 * dd * ny);\n      P.x[i] = x;\n      P.y[i] = y;\n    }\n  }\n\n  const buf = P.buf;\n  for (let q = 0; q \u003c N * 3; q++) buf[q] *= f;\n  if (P.g >= 0 && !inside(a, P.L[0], P.L[1], 1)) (P.L[0] = 0), (P.L[1] = 0);\n\n  if (P.g \u003c 0 && ((input.btnPressed && input.btnPressed[0]) || P.run > CYCLE)) {\n    P.L = pick(P);\n    P.g = 0;\n    P.gx.set(P.x);\n    P.gy.set(P.y);\n  }\n  if (P.g >= 0) {\n    // Gathering: every ball runs straight to the next launch spot.\n    const u0 = P.g / GATHER, u1 = min(1, (P.g + d) / GATHER);\n    const e0 = u0 * u0 * (3 - 2 * u0), e1 = u1 * u1 * (3 - 2 * u1), [lx, ly, th] = P.L;\n    for (let i = 0; i \u003c NB; i++) {\n      const x0 = P.gx[i] + (lx - P.gx[i]) * e0, y0 = P.gy[i] + (ly - P.gy[i]) * e0;\n      const x1 = P.gx[i] + (lx - P.gx[i]) * e1, y1 = P.gy[i] + (ly - P.gy[i]) * e1;\n      P.lastp = -1;\n      trail(P, i, x0, y0, x1, y1, B * f, B);\n      P.x[i] = x1;\n      P.y[i] = y1;\n    }\n    P.g += d;\n    if (u1 >= 1) launch(P, lx, ly, th);\n  } else if (d > 0) {\n    const s = v * d;\n    for (let i = 0; i \u003c NB; i++) {\n      P.lastp = -1;\n      fly(P, i, s, B * f, B);\n    }\n    P.run += s;\n  }\n  // Where the whole bunch passes at once the light piles up; capped, the\n  // bead's tail is no longer than a lone ball's.\n  for (let q = 0; q \u003c N * 3; q++) if (buf[q] > 1.5) buf[q] = 1.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const img = P.img, col = P.col, t = P.tint, m = P.cloth, buf = P.buf;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const o = m[p] === 2 ? 3 : 0, c = m[p] ? 1 : 0;\n    img[q] = max(buf[q], t[o] * c);\n    img[q + 1] = max(buf[q + 1], t[o + 1] * c);\n    img[q + 2] = max(buf[q + 2], t[o + 2] * c);\n  }\n  for (let i = 0; i \u003c NB; i++) {\n    const q = (cl(floor(P.y[i] + CY), 0, H - 1) * W + cl(floor(P.x[i] + CX), 0, W - 1)) * 3, c = i * 3;\n    img[q] += col[c];\n    img[q + 1] += col[c + 1];\n    img[q + 2] += col[c + 2];\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, img[q] * 255) | 0, min(255, img[q + 1] * 255) | 0, min(255, img[q + 2] * 255) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots."},{"name":"Round","min":0,"max":1,"about":"At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up."},{"name":"Trail","min":0,"max":1,"about":"How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it."}],"start":[0,2,0,0.06],"measures":{"motion":2.3616,"detail":0.0707,"edges":0.5768,"complexity":0.586,"coverage":0.1863,"colour":0.2492,"drift":0.1225},"knobResponse":[0.0382,0.064,0.0378,0.0449]},{"slug":"stained-glass","title":"Stained Glass","family":"glass","round":18,"note":"고딕 첨두 창이 세운 패널을 다 채워요. 뾰족한 머리의 장미창과 몸통의 생명나무가 검은 납선에 끼운 보석빛 유리 조각으로 짜여 있고, 창 뒤로 해가 지나가면 그 쪽 조각이 희게 타오르고 구름 그림자가 지나가면 어두워져요. K3 은 유리를 자른 크기라서, 돌리면 테두리 네모와 마름모가 잘아지고 장미 꽃잎이 여덟 장에서 열두 장이 돼요.","idea":"A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","layer":{"id":"layer-stained-glass","type":"code","name":"stained-glass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glass","min":0,"max":1,"about":"Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves."},{"name":"Pieces","min":1,"max":4,"about":"How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8."},{"name":"Clouds","min":0,"max":1,"about":"At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches."}],"start":[0,2,1,0.06],"measures":{"motion":0.0274,"detail":0.1501,"edges":0.9911,"complexity":1.9492,"coverage":0.4248,"colour":0.2313,"drift":0.0531},"knobResponse":[0.1334,0.0459,0.0844,0.0693]},{"slug":"star-trails","title":"Star Trails","family":"celestial","round":12,"note":"삼각대에 세운 카메라가 셔터를 열어 둔 사이 하늘이 돌아서, 별마다 북극 둘레에 제 색의 호를 그려요. 능선 아래에는 랜턴을 켠 텐트가 있고, 가끔 떨어지는 별똥별은 궤적만큼 사진에 남아요. K1 을 누르면 별똥별이 하나 더 떨어져요.","idea":"A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.","buttons":"K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","layer":{"id":"layer-star-trails","type":"code","name":"star-trails","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Facing","min":-1,"max":1,"about":"Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes."},{"name":"Latitude","min":-1,"max":1,"about":"Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground."},{"name":"Exposure","min":0,"max":1,"about":"How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles."}],"start":[0,2,0,0.06],"measures":{"motion":0.019,"detail":0.0909,"edges":0.5036,"complexity":1.5537,"coverage":0.563,"colour":0.1007,"drift":0.036},"knobResponse":[0.2496,0.0367,0.1859,0.2144]},{"slug":"sugar-scrub","title":"Sugar Scrub","family":"cosmetic","round":32,"note":"장밋빛 오일 밤 위에 설탕 결정 칠백 알쯤이 떠 있고, 보이지 않는 손끝이 지름 26 LED 원을 그리며 지나간 자리에 분홍빛 광택 고리가 남아요. 손끝에 끌린 알갱이는 구르며 하얀 십자로 반짝이고 녹아 작아져요. 10초마다 새 한 숟갈이 더미로 얹혔다가 다음 원에 쓸려 퍼져요.","idea":"Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.","buttons":"K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.","code":"// ===== Patternflow pattern =====\n// Title:   Sugar Scrub\n// Family:  cosmetic\n// Idea:    Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the sugar body scrub\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1\n//\n// Knob 1: Hue. The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid.\n// Knob 2: Speed. At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2.\n// Knob 3: Grain. The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm.\n// Knob 4: Oil. How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1.\n// Buttons: K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.\n\nconst W = 64, H = 128, N = W * H, MAXG = 3200;\nconst { floor, sqrt, exp, sin, cos, min, max, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Smooth value noise with a lattice cell LEDs wide, for the balm's relief.\nfunction valueNoise(cell) {\n  const gw = floor(W / cell) + 2, gh = floor(H / cell) + 2, g = new Float32Array(gw * gh), out = new Float32Array(N);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      (tx = tx * tx * (3 - 2 * tx)), (ty = ty * ty * (3 - 2 * ty));\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n    }\n  return out;\n}\n\nexport function setup(params) {\n  const n1 = valueNoise(9), n2 = valueNoise(3.5), N0 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) N0[i] = 0.65 * n1[i] + 0.35 * n2[i];\n  params.s = {\n    t: 0, hue: NaN, speed: 2, grain: 0, oil: 0.53,\n    S: Float32Array.from(N0), S2: new Float32Array(N), N0, G: new Float32Array(N), G2: new Float32Array(N),\n    gx: new Float32Array(MAXG), gy: new Float32Array(MAXG), vx: new Float32Array(MAXG), vy: new Float32Array(MAXG),\n    gs: new Float32Array(MAXG), ph: new Float32Array(MAXG), tx: new Float32Array(MAXG), ty: new Float32Array(MAXG), fall: new Uint8Array(MAXG), tint: new Float32Array(MAXG),\n    n: 0, filled: false, spoon: 3, goal: 0, queue: 0, fx: 0, fy: 0, fvx: 0, fvy: 0,\n    col: new Float32Array(12), img: new Float32Array(N * 3),\n  };\n}\n\n// The fingertip: circles of radius 13 at 0.7 rad a unit of time, round a\n// centre that wanders up and down most of the panel.\nfunction finger(t) {\n  const a = 0.7 * t, cx = 32 + 6 * sin(0.11 * t), cy = 64 + 36 * sin(0.09 * t - 2.6), r = 13 + 2 * sin(0.23 * t);\n  return [cx + r * cos(a), cy + r * sin(a)];\n}\n\nconst meanR = (P) => 0.95 + 0.55 * P.grain;\nconst target = (P) => {\n  const o = P.oil, cov = 0.72 * (1 - o) ** 1.6 + 0.03, r = meanR(P);\n  return min(MAXG, floor((cov * N) / (PI * r * r)));\n};\n\nfunction addGrain(P, x, y, cx, cy) {\n  if (P.n >= MAXG) return;\n  // A grain keeps its size as a share of the mean, so Grain resizes every\n  // grain on the panel at once.\n  const i = P.n++;\n  P.gs[i] = 0.55 + 0.9 * random();\n  P.ph[i] = random() * 2 * PI;\n  P.tint[i] = random();\n  (P.vx[i] = 0), (P.vy[i] = 0);\n  if (cx !== undefined) {\n    // Part of a spoonful: it starts in the heap's tight middle and is thrown\n    // out to where it lands.\n    (P.gx[i] = cx + (x - cx) * 0.25), (P.gy[i] = cy + (y - cy) * 0.25);\n    (P.tx[i] = x), (P.ty[i] = y), (P.fall[i] = 1);\n  } else (P.gx[i] = x), (P.gy[i] = y), (P.fall[i] = 0);\n}\n\nfunction kill(P, i) {\n  const j = --P.n;\n  for (const a of [P.gx, P.gy, P.vx, P.vy, P.gs, P.ph, P.tx, P.ty, P.fall, P.tint]) a[i] = a[j];\n}\n\n// A spoonful lands on the emptiest of five spots that are well clear of the\n// fingertip: a round heap 26 LEDs across, densest in the middle.\nfunction spoonful(P) {\n  let best = -Infinity, bx = 32, by = 30;\n  for (let c = 0; c \u003c 5; c++) {\n    const x = 14 + random() * 36, y = 14 + random() * (H - 28);\n    if (Math.hypot(x - P.fx, y - P.fy) \u003c 30) continue;\n    let near = 0;\n    for (let i = 0; i \u003c P.n; i += 3) if (abs(P.gx[i] - x) \u003c 12 && abs(P.gy[i] - y) \u003c 12) near++;\n    const score = -near + random();\n    if (score > best) (best = score), (bx = x), (by = y);\n  }\n  const m = floor(target(P) * 0.22) + 60;\n  for (let k = 0; k \u003c m; k++) {\n    const a = random() * 2 * PI, rr = random() ** 0.75;\n    addGrain(P, cl(bx + cos(a) * rr * 13, 0, W - 1), cl(by + sin(a) * rr * 13, 0, H - 1), bx, by);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.grain = cl(k[2], -1, 1);\n  P.oil = (cl(k[3], -1, 1) + 1) / 2;\n  // A turn of Grain or Oil changes how many grains the balm should hold:\n  // the difference is sprinkled on or melted away, 60 grains a frame.\n  const goal = target(P);\n  if (P.filled && goal !== P.goal) (P.queue += goal - P.goal), (P.goal = goal);\n  if (P.queue > 0) {\n    const m = min(60, P.queue);\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    P.queue -= m;\n  } else if (P.queue \u003c 0) {\n    const m = min(60, -P.queue, P.n);\n    for (let i = 0; i \u003c m; i++) kill(P, floor(random() * P.n));\n    P.queue += m;\n  }\n  if (!P.filled) {\n    // The jar has been in use a while: twelve seconds of rubbing at Speed 2\n    // run before the first frame, so the panel opens on swirled tracks, a\n    // heap or two and ridges of pushed grains, with the next spoonful due\n    // in three seconds.\n    const m = (P.goal = target(P));\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    for (let i = 0; i \u003c 120; i++) step(P, 0.1, 2, false);\n    P.filled = true;\n    P.spoon = 3;\n  }\n  step(P, d, P.speed, input.btnPressed && input.btnPressed[0]);\n}\n\nfunction step(P, d, sp, press) {\n  P.t += d * sp;\n  const [fx, fy] = finger(P.t), [px, py] = finger(P.t - 0.05);\n  (P.fx = fx), (P.fy = fy), (P.fvx = ((fx - px) / 0.05) * sp), (P.fvy = ((fy - py) / 0.05) * sp);\n  if (press) spoonful(P);\n  P.spoon -= d * sp * 0.5;\n  if (P.spoon \u003c= 0 || P.n \u003c target(P) * 0.35) (P.spoon = 10), spoonful(P);\n\n  // The oil the fingertip drags: its own velocity under the pad, falling off\n  // over 5 LEDs, and a push out from under it.\n  const sig2 = 2 * 5 * 5, oil = P.oil;\n  const vel = (x, y, out) => {\n    const dx = x - fx, dy = y - fy, r2 = dx * dx + dy * dy;\n    if (r2 > 400) return (out[0] = 0), (out[1] = 0), 0;\n    const e = exp(-r2 / sig2), r = sqrt(r2) + 0.5, push = 1.5 * sp * e;\n    out[0] = P.fvx * e * 0.8 + (push * dx) / r;\n    out[1] = P.fvy * e * 0.8 + (push * dy) / r;\n    return e;\n  };\n  const v = [0, 0];\n\n  // Grains trail the oil and roll; under the pad they melt.\n  const melt = 0.05 + 0.32 * oil, mr = meanR(P);\n  for (let i = 0; i \u003c P.n; i++) {\n    if (P.fall[i]) {\n      const u = min(1, d * 9);\n      P.gx[i] += (P.tx[i] - P.gx[i]) * u;\n      P.gy[i] += (P.ty[i] - P.gy[i]) * u;\n      if (abs(P.tx[i] - P.gx[i]) + abs(P.ty[i] - P.gy[i]) \u003c 0.1) P.fall[i] = 0;\n      P.ph[i] += d * 6;\n      continue;\n    }\n    const e = vel(P.gx[i], P.gy[i], v), lag = min(1, d * 7);\n    // Grains in the flow knock into each other and scatter a little.\n    const jit = e > 0.1 ? 14 * e * sp * d : 0;\n    P.vx[i] += (v[0] - P.vx[i]) * lag + jit * (random() - 0.5) * 4;\n    P.vy[i] += (v[1] - P.vy[i]) * lag + jit * (random() - 0.5) * 4;\n    P.gx[i] = cl(P.gx[i] + P.vx[i] * d, 0, W - 0.01);\n    P.gy[i] = cl(P.gy[i] + P.vy[i] * d, 0, H - 0.01);\n    const s = abs(P.vx[i]) + abs(P.vy[i]);\n    P.ph[i] += d * (0.35 * sp + (s * 1.3) / (P.gs[i] * mr));\n    if (e > 0.05) P.gs[i] -= (d * melt * e) / mr;\n    if (P.gs[i] \u003c 0.35) kill(P, i--);\n  }\n\n  // The balm: its texture is carried by the same flow and slowly settles\n  // back; the gloss is laid down under the pad, spreads and dries.\n  const S = P.S, S2 = P.S2, G = P.G, G2 = P.G2, N0 = P.N0;\n  const back = d * 0.04, dry = d * (0.12 - 0.08 * oil), lay = d * 1.6, spread = min(0.24, 1.5 * d);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, e = vel(x, y, v);\n      let s = S[i];\n      if (e > 0.002) {\n        const sx = cl(x - v[0] * d, 0, W - 1.001), sy = cl(y - v[1] * d, 0, H - 1.001), ix = sx | 0, iy = sy | 0, tx = sx - ix, ty = sy - iy, j = iy * W + ix;\n        s = S[j] * (1 - tx) * (1 - ty) + S[j + 1] * tx * (1 - ty) + S[j + W] * (1 - tx) * ty + S[j + W + 1] * tx * ty;\n      }\n      S2[i] = s + (N0[i] - s) * back;\n      const l = x > 0 ? G[i - 1] : G[i], r = x \u003c W - 1 ? G[i + 1] : G[i], u = y > 0 ? G[i - W] : G[i], b = y \u003c H - 1 ? G[i + W] : G[i];\n      G2[i] = min(1, G[i] + (l + r + u + b - 4 * G[i]) * spread - G[i] * dry + lay * e);\n    }\n  (P.S = S2), (P.S2 = S), (P.G = G2), (P.G2 = G);\n}\n\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { S, G, img, col } = P, oil = P.oil, h = P.hue + 0.955, mr = meanR(P);\n  // Dry balm, wet oil, the crystal body and the sheen.\n  hsv(h, 0.42, 0.84, col, 0);\n  hsv(h + 0.015, 0.74, 0.64, col, 3);\n  // The light comes from the upper left and swings slowly to and fro, so\n  // the sheen slides over the balm even where the fingertip is not.\n  const la = -2.2 + 0.5 * sin(P.t * 0.21), LX = 0.75 * cos(la), LY = 0.75 * sin(la), LZ = 0.66;\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  hsv(h - 0.02, 0.09, 1, col, 6);\n  hsv(h - 0.03, 0.1, 1, col, 9);\n  // More oil: a wetter, smoother balm.\n  const base = 0.2 + 0.55 * oil, sh = 3.2 * (1 - 0.65 * oil);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const wet = min(1, base + G[i]);\n      const hx = sh * ((x \u003c W - 1 ? S[i + 1] : S[i]) - (x > 0 ? S[i - 1] : S[i])) + 2 * ((x \u003c W - 1 ? G[i + 1] : G[i]) - (x > 0 ? G[i - 1] : G[i]));\n      const hy = sh * ((y \u003c H - 1 ? S[i + W] : S[i]) - (y > 0 ? S[i - W] : S[i])) + 2 * ((y \u003c H - 1 ? G[i + W] : G[i]) - (y > 0 ? G[i - W] : G[i]));\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), nx = -hx * nl, ny = -hy * nl, nz = nl;\n      const dif = 0.8 + 0.35 * (nx * LX + ny * LY + nz * LZ - 0.7);\n      // A sharp sheen on the balm's relief, and over the oil the fingertip\n      // laid down a broad film of light.\n      const nh = max(0, nx * HX + ny * HY + nz * HZ), spec = (nh ** 60 * 1.3 + nh ** 6 * 0.18) * wet + G[i] * (0.1 + 0.5 * nh ** 10);\n      const tex = 0.88 + 0.26 * (S[i] - 0.5);\n      for (let c = 0; c \u003c 3; c++) {\n        const b = (col[c] + (col[3 + c] - col[c]) * wet) * dif * tex;\n        img[i * 3 + c] = b + (col[9 + c] - b) * min(1, spec);\n      }\n    }\n  // The grains: a shadow down and right, a body lit from the upper left,\n  // and a flash when a facet turns to the light.\n  for (let k = 0; k \u003c P.n; k++) {\n    const gx = P.gx[k], gy = P.gy[k], r = P.gs[k] * mr, ph = P.ph[k];\n    const gl = max(0, cos(ph)) ** 24, x0 = floor(gx - r - 1), x1 = floor(gx + r + 1), y0 = floor(gy - r - 1), y1 = floor(gy + r + 1);\n    const wetHere = min(1, base + G[cl(floor(gy), 0, H - 1) * W + cl(floor(gx), 0, W - 1)]);\n    const op = 0.96 - 0.4 * wetHere, tv = 0.86 + 0.14 * P.tint[k];\n    for (let y = max(0, y0); y \u003c= min(H - 1, y1); y++)\n      for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n        const dx = x + 0.5 - gx, dy = y + 0.5 - gy, dd = sqrt(dx * dx + dy * dy), cov = cl(r + 0.6 - dd, 0, 1);\n        const i = (y * W + x) * 3;\n        const sdx = dx - 0.8, sdy = dy - 0.8, sc = cl(r + 0.5 - sqrt(sdx * sdx + sdy * sdy), 0, 1) * (1 - cov) * 0.16;\n        if (sc > 0) for (let c = 0; c \u003c 3; c++) img[i + c] *= 1 - sc;\n        if (cov \u003c= 0) continue;\n        const lit = (0.8 + 0.2 * cl(-(dx * 0.6 + dy * 0.8) / max(r, 0.6), -1, 1)) * tv;\n        const a = cov * op;\n        for (let c = 0; c \u003c 3; c++) img[i + c] += (col[6 + c] * lit - img[i + c]) * a;\n        if (gl > 0.02) {\n          const f = gl * cov * (dd \u003c 0.8 ? 1 : 0.55);\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * f;\n        }\n      }\n    // A bright flash throws a short cross.\n    if (gl > 0.7 && r > 0.6) {\n      const cx = floor(gx), cy = floor(gy), f = (gl - 0.7) * 2, arm = r > 1.1 ? 2 : 1;\n      for (let a = 1; a \u003c= arm; a++)\n        for (const [ox, oy] of [[a, 0], [-a, 0], [0, a], [0, -a]]) {\n          const x = cx + ox, y = cy + oy;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const i = (y * W + x) * 3, ff = f / a;\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * ff;\n        }\n    }\n  }\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, img[i * 3]), min(255, img[i * 3 + 1]), min(255, img[i * 3 + 2]));\n}\n","layer":{"id":"layer-sugar-scrub","type":"code","name":"sugar-scrub","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sugar Scrub\n// Family:  cosmetic\n// Idea:    Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the sugar body scrub\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1\n//\n// Knob 1: Hue. The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid.\n// Knob 2: Speed. At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2.\n// Knob 3: Grain. The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm.\n// Knob 4: Oil. How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1.\n// Buttons: K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.\n\nconst W = 64, H = 128, N = W * H, MAXG = 3200;\nconst { floor, sqrt, exp, sin, cos, min, max, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Smooth value noise with a lattice cell LEDs wide, for the balm's relief.\nfunction valueNoise(cell) {\n  const gw = floor(W / cell) + 2, gh = floor(H / cell) + 2, g = new Float32Array(gw * gh), out = new Float32Array(N);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      (tx = tx * tx * (3 - 2 * tx)), (ty = ty * ty * (3 - 2 * ty));\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n    }\n  return out;\n}\n\nexport function setup(params) {\n  const n1 = valueNoise(9), n2 = valueNoise(3.5), N0 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) N0[i] = 0.65 * n1[i] + 0.35 * n2[i];\n  params.s = {\n    t: 0, hue: NaN, speed: 2, grain: 0, oil: 0.53,\n    S: Float32Array.from(N0), S2: new Float32Array(N), N0, G: new Float32Array(N), G2: new Float32Array(N),\n    gx: new Float32Array(MAXG), gy: new Float32Array(MAXG), vx: new Float32Array(MAXG), vy: new Float32Array(MAXG),\n    gs: new Float32Array(MAXG), ph: new Float32Array(MAXG), tx: new Float32Array(MAXG), ty: new Float32Array(MAXG), fall: new Uint8Array(MAXG), tint: new Float32Array(MAXG),\n    n: 0, filled: false, spoon: 3, goal: 0, queue: 0, fx: 0, fy: 0, fvx: 0, fvy: 0,\n    col: new Float32Array(12), img: new Float32Array(N * 3),\n  };\n}\n\n// The fingertip: circles of radius 13 at 0.7 rad a unit of time, round a\n// centre that wanders up and down most of the panel.\nfunction finger(t) {\n  const a = 0.7 * t, cx = 32 + 6 * sin(0.11 * t), cy = 64 + 36 * sin(0.09 * t - 2.6), r = 13 + 2 * sin(0.23 * t);\n  return [cx + r * cos(a), cy + r * sin(a)];\n}\n\nconst meanR = (P) => 0.95 + 0.55 * P.grain;\nconst target = (P) => {\n  const o = P.oil, cov = 0.72 * (1 - o) ** 1.6 + 0.03, r = meanR(P);\n  return min(MAXG, floor((cov * N) / (PI * r * r)));\n};\n\nfunction addGrain(P, x, y, cx, cy) {\n  if (P.n >= MAXG) return;\n  // A grain keeps its size as a share of the mean, so Grain resizes every\n  // grain on the panel at once.\n  const i = P.n++;\n  P.gs[i] = 0.55 + 0.9 * random();\n  P.ph[i] = random() * 2 * PI;\n  P.tint[i] = random();\n  (P.vx[i] = 0), (P.vy[i] = 0);\n  if (cx !== undefined) {\n    // Part of a spoonful: it starts in the heap's tight middle and is thrown\n    // out to where it lands.\n    (P.gx[i] = cx + (x - cx) * 0.25), (P.gy[i] = cy + (y - cy) * 0.25);\n    (P.tx[i] = x), (P.ty[i] = y), (P.fall[i] = 1);\n  } else (P.gx[i] = x), (P.gy[i] = y), (P.fall[i] = 0);\n}\n\nfunction kill(P, i) {\n  const j = --P.n;\n  for (const a of [P.gx, P.gy, P.vx, P.vy, P.gs, P.ph, P.tx, P.ty, P.fall, P.tint]) a[i] = a[j];\n}\n\n// A spoonful lands on the emptiest of five spots that are well clear of the\n// fingertip: a round heap 26 LEDs across, densest in the middle.\nfunction spoonful(P) {\n  let best = -Infinity, bx = 32, by = 30;\n  for (let c = 0; c \u003c 5; c++) {\n    const x = 14 + random() * 36, y = 14 + random() * (H - 28);\n    if (Math.hypot(x - P.fx, y - P.fy) \u003c 30) continue;\n    let near = 0;\n    for (let i = 0; i \u003c P.n; i += 3) if (abs(P.gx[i] - x) \u003c 12 && abs(P.gy[i] - y) \u003c 12) near++;\n    const score = -near + random();\n    if (score > best) (best = score), (bx = x), (by = y);\n  }\n  const m = floor(target(P) * 0.22) + 60;\n  for (let k = 0; k \u003c m; k++) {\n    const a = random() * 2 * PI, rr = random() ** 0.75;\n    addGrain(P, cl(bx + cos(a) * rr * 13, 0, W - 1), cl(by + sin(a) * rr * 13, 0, H - 1), bx, by);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.grain = cl(k[2], -1, 1);\n  P.oil = (cl(k[3], -1, 1) + 1) / 2;\n  // A turn of Grain or Oil changes how many grains the balm should hold:\n  // the difference is sprinkled on or melted away, 60 grains a frame.\n  const goal = target(P);\n  if (P.filled && goal !== P.goal) (P.queue += goal - P.goal), (P.goal = goal);\n  if (P.queue > 0) {\n    const m = min(60, P.queue);\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    P.queue -= m;\n  } else if (P.queue \u003c 0) {\n    const m = min(60, -P.queue, P.n);\n    for (let i = 0; i \u003c m; i++) kill(P, floor(random() * P.n));\n    P.queue += m;\n  }\n  if (!P.filled) {\n    // The jar has been in use a while: twelve seconds of rubbing at Speed 2\n    // run before the first frame, so the panel opens on swirled tracks, a\n    // heap or two and ridges of pushed grains, with the next spoonful due\n    // in three seconds.\n    const m = (P.goal = target(P));\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    for (let i = 0; i \u003c 120; i++) step(P, 0.1, 2, false);\n    P.filled = true;\n    P.spoon = 3;\n  }\n  step(P, d, P.speed, input.btnPressed && input.btnPressed[0]);\n}\n\nfunction step(P, d, sp, press) {\n  P.t += d * sp;\n  const [fx, fy] = finger(P.t), [px, py] = finger(P.t - 0.05);\n  (P.fx = fx), (P.fy = fy), (P.fvx = ((fx - px) / 0.05) * sp), (P.fvy = ((fy - py) / 0.05) * sp);\n  if (press) spoonful(P);\n  P.spoon -= d * sp * 0.5;\n  if (P.spoon \u003c= 0 || P.n \u003c target(P) * 0.35) (P.spoon = 10), spoonful(P);\n\n  // The oil the fingertip drags: its own velocity under the pad, falling off\n  // over 5 LEDs, and a push out from under it.\n  const sig2 = 2 * 5 * 5, oil = P.oil;\n  const vel = (x, y, out) => {\n    const dx = x - fx, dy = y - fy, r2 = dx * dx + dy * dy;\n    if (r2 > 400) return (out[0] = 0), (out[1] = 0), 0;\n    const e = exp(-r2 / sig2), r = sqrt(r2) + 0.5, push = 1.5 * sp * e;\n    out[0] = P.fvx * e * 0.8 + (push * dx) / r;\n    out[1] = P.fvy * e * 0.8 + (push * dy) / r;\n    return e;\n  };\n  const v = [0, 0];\n\n  // Grains trail the oil and roll; under the pad they melt.\n  const melt = 0.05 + 0.32 * oil, mr = meanR(P);\n  for (let i = 0; i \u003c P.n; i++) {\n    if (P.fall[i]) {\n      const u = min(1, d * 9);\n      P.gx[i] += (P.tx[i] - P.gx[i]) * u;\n      P.gy[i] += (P.ty[i] - P.gy[i]) * u;\n      if (abs(P.tx[i] - P.gx[i]) + abs(P.ty[i] - P.gy[i]) \u003c 0.1) P.fall[i] = 0;\n      P.ph[i] += d * 6;\n      continue;\n    }\n    const e = vel(P.gx[i], P.gy[i], v), lag = min(1, d * 7);\n    // Grains in the flow knock into each other and scatter a little.\n    const jit = e > 0.1 ? 14 * e * sp * d : 0;\n    P.vx[i] += (v[0] - P.vx[i]) * lag + jit * (random() - 0.5) * 4;\n    P.vy[i] += (v[1] - P.vy[i]) * lag + jit * (random() - 0.5) * 4;\n    P.gx[i] = cl(P.gx[i] + P.vx[i] * d, 0, W - 0.01);\n    P.gy[i] = cl(P.gy[i] + P.vy[i] * d, 0, H - 0.01);\n    const s = abs(P.vx[i]) + abs(P.vy[i]);\n    P.ph[i] += d * (0.35 * sp + (s * 1.3) / (P.gs[i] * mr));\n    if (e > 0.05) P.gs[i] -= (d * melt * e) / mr;\n    if (P.gs[i] \u003c 0.35) kill(P, i--);\n  }\n\n  // The balm: its texture is carried by the same flow and slowly settles\n  // back; the gloss is laid down under the pad, spreads and dries.\n  const S = P.S, S2 = P.S2, G = P.G, G2 = P.G2, N0 = P.N0;\n  const back = d * 0.04, dry = d * (0.12 - 0.08 * oil), lay = d * 1.6, spread = min(0.24, 1.5 * d);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, e = vel(x, y, v);\n      let s = S[i];\n      if (e > 0.002) {\n        const sx = cl(x - v[0] * d, 0, W - 1.001), sy = cl(y - v[1] * d, 0, H - 1.001), ix = sx | 0, iy = sy | 0, tx = sx - ix, ty = sy - iy, j = iy * W + ix;\n        s = S[j] * (1 - tx) * (1 - ty) + S[j + 1] * tx * (1 - ty) + S[j + W] * (1 - tx) * ty + S[j + W + 1] * tx * ty;\n      }\n      S2[i] = s + (N0[i] - s) * back;\n      const l = x > 0 ? G[i - 1] : G[i], r = x \u003c W - 1 ? G[i + 1] : G[i], u = y > 0 ? G[i - W] : G[i], b = y \u003c H - 1 ? G[i + W] : G[i];\n      G2[i] = min(1, G[i] + (l + r + u + b - 4 * G[i]) * spread - G[i] * dry + lay * e);\n    }\n  (P.S = S2), (P.S2 = S), (P.G = G2), (P.G2 = G);\n}\n\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { S, G, img, col } = P, oil = P.oil, h = P.hue + 0.955, mr = meanR(P);\n  // Dry balm, wet oil, the crystal body and the sheen.\n  hsv(h, 0.42, 0.84, col, 0);\n  hsv(h + 0.015, 0.74, 0.64, col, 3);\n  // The light comes from the upper left and swings slowly to and fro, so\n  // the sheen slides over the balm even where the fingertip is not.\n  const la = -2.2 + 0.5 * sin(P.t * 0.21), LX = 0.75 * cos(la), LY = 0.75 * sin(la), LZ = 0.66;\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  hsv(h - 0.02, 0.09, 1, col, 6);\n  hsv(h - 0.03, 0.1, 1, col, 9);\n  // More oil: a wetter, smoother balm.\n  const base = 0.2 + 0.55 * oil, sh = 3.2 * (1 - 0.65 * oil);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const wet = min(1, base + G[i]);\n      const hx = sh * ((x \u003c W - 1 ? S[i + 1] : S[i]) - (x > 0 ? S[i - 1] : S[i])) + 2 * ((x \u003c W - 1 ? G[i + 1] : G[i]) - (x > 0 ? G[i - 1] : G[i]));\n      const hy = sh * ((y \u003c H - 1 ? S[i + W] : S[i]) - (y > 0 ? S[i - W] : S[i])) + 2 * ((y \u003c H - 1 ? G[i + W] : G[i]) - (y > 0 ? G[i - W] : G[i]));\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), nx = -hx * nl, ny = -hy * nl, nz = nl;\n      const dif = 0.8 + 0.35 * (nx * LX + ny * LY + nz * LZ - 0.7);\n      // A sharp sheen on the balm's relief, and over the oil the fingertip\n      // laid down a broad film of light.\n      const nh = max(0, nx * HX + ny * HY + nz * HZ), spec = (nh ** 60 * 1.3 + nh ** 6 * 0.18) * wet + G[i] * (0.1 + 0.5 * nh ** 10);\n      const tex = 0.88 + 0.26 * (S[i] - 0.5);\n      for (let c = 0; c \u003c 3; c++) {\n        const b = (col[c] + (col[3 + c] - col[c]) * wet) * dif * tex;\n        img[i * 3 + c] = b + (col[9 + c] - b) * min(1, spec);\n      }\n    }\n  // The grains: a shadow down and right, a body lit from the upper left,\n  // and a flash when a facet turns to the light.\n  for (let k = 0; k \u003c P.n; k++) {\n    const gx = P.gx[k], gy = P.gy[k], r = P.gs[k] * mr, ph = P.ph[k];\n    const gl = max(0, cos(ph)) ** 24, x0 = floor(gx - r - 1), x1 = floor(gx + r + 1), y0 = floor(gy - r - 1), y1 = floor(gy + r + 1);\n    const wetHere = min(1, base + G[cl(floor(gy), 0, H - 1) * W + cl(floor(gx), 0, W - 1)]);\n    const op = 0.96 - 0.4 * wetHere, tv = 0.86 + 0.14 * P.tint[k];\n    for (let y = max(0, y0); y \u003c= min(H - 1, y1); y++)\n      for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n        const dx = x + 0.5 - gx, dy = y + 0.5 - gy, dd = sqrt(dx * dx + dy * dy), cov = cl(r + 0.6 - dd, 0, 1);\n        const i = (y * W + x) * 3;\n        const sdx = dx - 0.8, sdy = dy - 0.8, sc = cl(r + 0.5 - sqrt(sdx * sdx + sdy * sdy), 0, 1) * (1 - cov) * 0.16;\n        if (sc > 0) for (let c = 0; c \u003c 3; c++) img[i + c] *= 1 - sc;\n        if (cov \u003c= 0) continue;\n        const lit = (0.8 + 0.2 * cl(-(dx * 0.6 + dy * 0.8) / max(r, 0.6), -1, 1)) * tv;\n        const a = cov * op;\n        for (let c = 0; c \u003c 3; c++) img[i + c] += (col[6 + c] * lit - img[i + c]) * a;\n        if (gl > 0.02) {\n          const f = gl * cov * (dd \u003c 0.8 ? 1 : 0.55);\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * f;\n        }\n      }\n    // A bright flash throws a short cross.\n    if (gl > 0.7 && r > 0.6) {\n      const cx = floor(gx), cy = floor(gy), f = (gl - 0.7) * 2, arm = r > 1.1 ? 2 : 1;\n      for (let a = 1; a \u003c= arm; a++)\n        for (const [ox, oy] of [[a, 0], [-a, 0], [0, a], [0, -a]]) {\n          const x = cx + ox, y = cy + oy;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const i = (y * W + x) * 3, ff = f / a;\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * ff;\n        }\n    }\n  }\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, img[i * 3]), min(255, img[i * 3 + 1]), min(255, img[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2."},{"name":"Grain","min":-1,"max":1,"about":"The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm."},{"name":"Oil","min":-1,"max":1,"about":"How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1."}],"start":[0,2,0,0.06],"measures":{"motion":0.0841,"detail":0.0638,"edges":0.1575,"complexity":2.6755,"coverage":1,"colour":0.1376,"drift":0.0416},"knobResponse":[0.1741,0.077,0.0995,0.1983]},{"slug":"sunglint","title":"Sunglint","family":"ocean","round":20,"note":"절벽에서 해를 마주 보면 수평선 아래로 윤슬 길이 내려오며 넓어져 패널을 채우고, 밀려오는 잔물결 줄마다 반짝임이 실려요. K1 을 누르면 돛단배가 빛 속을 검은 그림자로 가로질러요.","idea":"From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.","buttons":"K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.","code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","layer":{"id":"layer-sunglint","type":"code","name":"sunglint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet."},{"name":"Chop","min":0,"max":1,"about":"How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider."},{"name":"Wind","min":-1,"max":1,"about":"Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.5376,"detail":0.3357,"edges":0.4835,"complexity":2.2983,"coverage":0.8569,"colour":0.0799,"drift":0.0378},"knobResponse":[0.1189,0.329,0.2477,0.3023]},{"slug":"swatch-row","title":"Swatch Row","family":"cosmetic","round":30,"note":"보이지 않는 손가락이 아이보리 카드에 크림 안료를 한 줄씩 끌어 색조표를 채워요. 줄마다 한 단계씩 밝거나 짙고, K1 하나로 어떤 색 라인으로든 바뀌어요.","idea":"A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.","buttons":"K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.","code":"// ===== Patternflow pattern =====\n// Title:   Swatch Row\n// Family:  cosmetic\n// Idea:    A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after the makeup artist's swatch\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1\n//\n// Knob 1: Hue. Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum.\n// Knob 2: Speed. At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4.\n// Knob 3: Range. How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it.\n// Knob 4: Finish. At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles.\n// Buttons: K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.\n\nconst W = 64, H = 128, SL = 16, ROWS = H / SL, NT = W * SL;\nconst { min, floor, sqrt, sin, exp, abs, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Rose sits at 0.955 of the wheel; K1 adds to it.\nconst ROSE = 0.955;\n\n// The card: warm ivory, 198/186/164 in the middle, 10% dimmer at the side\n// edges and 7% at the ends, with a fixed paper grain of about 1%.\nconst GR = new Float32Array(W * H * 3);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - 32) / 32, dy = (y + 0.5 - 64) / 64;\n    const v = 1 - 0.1 * dx * dx - 0.07 * dy * dy + 0.024 * (hash(x, y, 7) - 0.5), i = (y * W + x) * 3;\n    (GR[i] = 198 * v), (GR[i + 1] = 186 * v), (GR[i + 2] = 164 * v);\n  }\n\n// Smooth value noise over a table of random numbers.\nconst n1 = (T, f) => {\n  const i = cl(floor(f), 0, T.length - 2), t = cl(f - i, 0, 1);\n  return T[i] + (T[i + 1] - T[i]) * t * t * (3 - 2 * t);\n};\nconst n2 = (T, n, fx, fy) => {\n  const i = cl(floor(fx), 0, T.length / n - 2), t = cl(fx - i, 0, 1), s = t * t * (3 - 2 * t);\n  return mix(n1(T.subarray(i * n, i * n + n), fy), n1(T.subarray(i * n + n, i * n + 2 * n), fy), s);\n};\nconst table = (n) => Float32Array.from({ length: n }, () => random());\n\n// One swatch, baked once into fields over its 64x16 slot: how opaque the\n// pigment is (A), how light against its own shade (V), where across the\n// stroke the LED sits (Q, -1 at the top edge, 1 at the bottom), how much the\n// highlight catches there (G), how far the finger must have come before it\n// lays this LED (R), and a fixed number for the sparkle (K).\n//\n// The stroke lands with a round cap of radius r, runs straight with a little\n// waver, and from a fraction ut of its length on the pigment runs out: the\n// stroke narrows, goes sheer, and the drag streaks, which follow the stroke,\n// drop out one by one, the weakest first, until the last one ends at xe.\nfunction swatch(n) {\n  const s = {\n    n, jit: (random() - 0.5) * 0.05, seed: floor(random() * 1e6),\n    A: new Float32Array(NT), V: new Float32Array(NT), Q: new Float32Array(NT), G: new Float32Array(NT), R: new Float32Array(NT), K: new Float32Array(NT),\n    p: 0, go: false, wait: 0, xa: 0, xb: 0, prev: null, wipe: 1, wwait: 0,\n  };\n  const r = 5.3 + random() * 0.6, x0 = 2 + random() * 3.5, xe = 58 + random() * 6, ut = 0.4 + random() * 0.16;\n  const slope = (random() - 0.5) * 0.04, amp = 0.2 + random() * 0.35, fr = 0.05 + random() * 0.06, ph = random() * 2 * PI, xm = (x0 + xe) / 2;\n  const T1 = table(24), T2 = table(24 * 10), T3 = table(24 * 24), TE = table(20);\n  for (let j = 0; j \u003c SL; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, xc = x + 0.5;\n      const yc = 7.5 + slope * (xc - xm) + amp * sin(xc * fr + ph), q = j + 0.5 - yc, u = (xc - x0) / (xe - x0);\n      let hw;\n      if (xc \u003c x0 + r) {\n        const d = (x0 + r - xc) / r;\n        hw = d >= 1 ? -1 : r * sqrt(1 - d * d);\n      } else hw = r * (1 - 0.06 * u - 0.24 * sm(ut, 1.1, u));\n      hw += 0.5 * (n1(TE, xc / 4 + 2) - 0.5);\n      const cov = cl(hw - abs(q) + 0.5, 0, 1);\n      const st = 0.62 * n1(T1, q * 1.15 + 11) + 0.38 * n2(T2, 24, xc / 8, q + 11);\n      // In the tail the streaks also break along their length, where the\n      // last of the pigment skips over the card.\n      const thin = sm(ut, 1, u), brk = n2(T3, 24, xc / 2.6, q * 1.3 + 11);\n      const keep = sm(-0.2, 0.2, st * 1.1 + 0.3 - thin * (1.05 + 0.7 * brk));\n      s.A[i] = cov * (0.93 + 0.07 * st) * keep * (1 - 0.5 * thin) * (1 - sm(0.94, 1.04, u));\n      // Where the finger landed the pigment piles up a shade deeper, and the\n      // drag pushes a little more of it to the two long edges.\n      const ce = xc - (x0 + r - sqrt(Math.max(0, r * r - q * q)));\n      let v = (1 + 0.24 * (st - 0.5)) * (1 - 0.1 * sm(0.55, 1, abs(q) / Math.max(hw, 0.5)));\n      if (ce \u003c 2.5) v *= 0.8 + 0.2 * cl(ce / 2.5, 0, 1);\n      s.V[i] = v;\n      s.Q[i] = q / Math.max(hw, 1);\n      s.G[i] = (0.45 + st) * (1 - 0.7 * thin);\n      s.R[i] = xc + 0.85 * (r - sqrt(Math.max(0, r * r - q * q)));\n      s.K[i] = hash(x, j, s.seed);\n    }\n  (s.xa = x0 - 1.5), (s.xb = xe + r + 2);\n  return s;\n}\n\n// The finger sets off quickly and slows as the pigment runs out.\nconst travel = (p) => 0.4 * p * p * (3 - 2 * p) + 0.6 * (1 - (1 - p) * (1 - p));\nconst fingerAt = (s) => s.xa + (s.xb - s.xa) * travel(s.p);\n\nexport function setup(params) {\n  const L = [];\n  for (let k = 0; k \u003c= ROWS; k++) {\n    const s = swatch(k);\n    if (k \u003c ROWS - 1) s.p = 1;\n    L.push(s);\n  }\n  // The card opens with seven swatches down and the eighth being dragged.\n  (L[ROWS - 1].go = true), (L[ROWS - 1].p = 0.12);\n  params.s = {\n    L, n: ROWS + 1, off: 0, phase: 0, pt: 0, t: 0, sweep: 30, hue: 0, speed: 2, width: 0.52, fin: 0.06,\n    col: new Float32Array((ROWS + 1) * 6), SH: new Float32Array(64), SW: new Float32Array(180),\n  };\n}\n\n// The stack glides up a row: the top swatch leaves, an empty slot comes in\n// at the bottom and the finger starts on the slot above it.\nfunction shift(P) {\n  P.L.shift();\n  P.L.push(swatch(P.n++));\n  (P.off = 0), (P.phase = 0), (P.pt = 0);\n  const B = P.L[ROWS - 1];\n  (B.go = true), (B.p = 0);\n}\n\n// K1: a pad wipes each swatch off left to right, row after row, and a\n// finger follows each wipe with a fresh stroke of the same shade.\nfunction reswatch(P) {\n  if (P.phase === 2) shift(P);\n  P.phase = 0;\n  for (let k = 0; k \u003c ROWS; k++) {\n    const old = P.L[k], s = swatch(old.n);\n    old.prev = null;\n    if (old.p > 0) (s.prev = old), (s.wipe = 0), (s.wwait = 0.07 * k);\n    (s.go = true), (s.p = 0), (s.wait = 0.07 * k + 0.3);\n    P.L[k] = s;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.width = 0.04 + 0.48 * (cl(k[2], -1, 1) + 1);\n  P.fin = cl(k[3], -1, 1);\n  const sp = P.speed, drag = 2.1 / sp, hold = 0.9 / sp, glide = 1.1 / sp;\n  P.t += d;\n  // A band of light crosses the card corner to corner every 18 s at Speed 2.\n  P.sweep += d * 7 * sp;\n  if (P.sweep > 200) P.sweep -= 250;\n  if (input.btnPressed && input.btnPressed[0]) reswatch(P);\n  for (const s of P.L) {\n    if (s.prev) {\n      if (s.wwait > 0) s.wwait -= d;\n      else if ((s.wipe += d / 0.45) >= 1) s.prev = null;\n    }\n    if (s.go && s.p \u003c 1) {\n      if (s.wait > 0) s.wait -= d;\n      else s.p = min(1, s.p + d / drag);\n    }\n  }\n  const B = P.L[ROWS - 1];\n  if (P.phase === 0) {\n    if (B.p >= 1) (P.phase = 1), (P.pt = 0);\n  } else if (P.phase === 1) {\n    if ((P.pt += d) >= hold) (P.phase = 2), (P.pt = 0);\n  } else {\n    P.pt += d;\n    const u = min(1, P.pt / glide);\n    P.off = SL * u * u * (3 - 2 * u);\n    if (u >= 1) shift(P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = 255 * rgb[c];\n}\n\n// The shade of swatch n: the range runs light to deep and back over 14\n// swatches, so the eight on the card always show a stretch of it.\nfunction tone(P, s, m, out, o) {\n  const a = s.n % 14, tri = (a \u003c= 7 ? a : 14 - a) / 7, w = P.width;\n  const d = cl(0.5 + w * (tri - 0.5) + s.jit, 0, 1);\n  const h = P.hue + ROSE + 0.05 * w * (0.5 - d);\n  hsv(h, 0.3 + 0.58 * d, (0.98 - 0.56 * d) * (1 + 0.12 * m), out, o);\n  // The highlight: a pale tint of the same hue, and towards metallic a\n  // champagne one.\n  hsv(h + 0.02 * m, (0.3 + 0.58 * d) * 0.35, 1, out, o + 3);\n  for (let c = 0; c \u003c 3; c++) out[o + 3 + c] = mix(mix(out[o + 3 + c], 255, 0.35), [255, 226, 186][c], 0.55 * m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.fin, m = sm(0.15, 1, f), col = P.col, SH = P.SH, SW = P.SW, L = P.L;\n  // Matte keeps 3% of a sheen, satin 50%, metallic 95%, narrower as it\n  // goes; metallic also throws a weaker second light off the lower edge.\n  const kS = 0.03 + 0.47 * sm(-1, 0, f) + 0.45 * sm(0, 1, f), wS = f \u003c 0 ? mix(0.4, 0.75, -f) : mix(0.4, 0.26, f);\n  for (let b = 0; b \u003c 64; b++) {\n    const q = -1.6 + (3.2 * b) / 63, e = (q + 0.3) / wS, e2 = (q - 0.72) / 0.16;\n    SH[b] = kS * exp(-e * e) + 0.35 * m * exp(-e2 * e2);\n  }\n  const base = mix(0.85, 0.5, m), amp = mix(0.45, 1.4, m);\n  for (let g = 0; g \u003c 180; g++) {\n    const e = (g - P.sweep) / 15;\n    SW[g] = exp(-e * e);\n  }\n  for (let k = 0; k \u003c= ROWS; k++) tone(P, L[k], m, col, k * 6);\n  const dens = 1 - 0.15 * m, t = P.t, off = round(P.off);\n  const XF = L.map((s) => (s.p \u003c 1 ? fingerAt(s) : 1e3)), PF = L.map((s) => (s.prev ? fingerAt(s.prev) : 0));\n  const WX = L.map((s) => -6 + 78 * s.wipe);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = y + off, k = floor(ty / SL), j = ty - k * SL, s = L[k], o = k * 6, xf = XF[k];\n    for (let x = 0; x \u003c W; x++) {\n      const gi = (y * W + x) * 3;\n      let r = GR[gi], g = GR[gi + 1], b = GR[gi + 2];\n      const i = j * W + x;\n      // The swatch being wiped off, still there right of the round edge of\n      // the pad.\n      if (s.prev) {\n        const S = s.prev, e = WX[k] - 2.5 * S.Q[i] * S.Q[i], a = S.A[i] * cl((PF[k] - S.R[i]) * 0.8 + 0.5, 0, 1) * sm(e - 2.5, e + 2.5, x);\n        if (a > 0.004) {\n          const v = S.V[i];\n          (r = mix(r, col[o] * v, a)), (g = mix(g, col[o + 1] * v, a)), (b = mix(b, col[o + 2] * v, a));\n        }\n      }\n      let a = s.A[i];\n      if (a > 0.004) {\n        let wet = 0;\n        if (xf \u003c 1e3) {\n          const dx = xf - s.R[i];\n          a *= cl(dx * 0.8 + 0.5, 0, 1);\n          if (dx > 0 && dx \u003c 4) wet = 0.5 * (1 - dx / 4);\n        }\n        if (a > 0.004) {\n          const Q = s.Q[i], v = s.V[i] * (1 - 0.42 * m * sm(-0.1, 0.6, Q));\n          let pr = col[o] * v, pg = col[o + 1] * v, pb = col[o + 2] * v;\n          const lt = SW[cl(round(y + 0.55 * x), 0, 179)];\n          const h = min(1, SH[cl(round(((Q + 1.6) * 63) / 3.2), 0, 63)] * s.G[i] * (base + amp * lt) + wet);\n          (pr = mix(pr, col[o + 3], h)), (pg = mix(pg, col[o + 4], h)), (pb = mix(pb, col[o + 5], h));\n          const K = s.K[i];\n          if (m > 0 && K > dens && a > 0.4) {\n            const tw = sin(K * 6283 + t * 2.6);\n            if (tw > 0.3) {\n              const z = (tw - 0.3) / 0.7, spk = z * z * m * (0.45 + 0.9 * lt);\n              (pr = mix(pr, 255, spk)), (pg = mix(pg, 248, spk)), (pb = mix(pb, 232, spk));\n            }\n          }\n          (r = mix(r, pr, a)), (g = mix(g, pg, a)), (b = mix(b, pb, a));\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-swatch-row","type":"code","name":"swatch-row","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Swatch Row\n// Family:  cosmetic\n// Idea:    A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after the makeup artist's swatch\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1\n//\n// Knob 1: Hue. Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum.\n// Knob 2: Speed. At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4.\n// Knob 3: Range. How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it.\n// Knob 4: Finish. At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles.\n// Buttons: K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.\n\nconst W = 64, H = 128, SL = 16, ROWS = H / SL, NT = W * SL;\nconst { min, floor, sqrt, sin, exp, abs, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Rose sits at 0.955 of the wheel; K1 adds to it.\nconst ROSE = 0.955;\n\n// The card: warm ivory, 198/186/164 in the middle, 10% dimmer at the side\n// edges and 7% at the ends, with a fixed paper grain of about 1%.\nconst GR = new Float32Array(W * H * 3);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - 32) / 32, dy = (y + 0.5 - 64) / 64;\n    const v = 1 - 0.1 * dx * dx - 0.07 * dy * dy + 0.024 * (hash(x, y, 7) - 0.5), i = (y * W + x) * 3;\n    (GR[i] = 198 * v), (GR[i + 1] = 186 * v), (GR[i + 2] = 164 * v);\n  }\n\n// Smooth value noise over a table of random numbers.\nconst n1 = (T, f) => {\n  const i = cl(floor(f), 0, T.length - 2), t = cl(f - i, 0, 1);\n  return T[i] + (T[i + 1] - T[i]) * t * t * (3 - 2 * t);\n};\nconst n2 = (T, n, fx, fy) => {\n  const i = cl(floor(fx), 0, T.length / n - 2), t = cl(fx - i, 0, 1), s = t * t * (3 - 2 * t);\n  return mix(n1(T.subarray(i * n, i * n + n), fy), n1(T.subarray(i * n + n, i * n + 2 * n), fy), s);\n};\nconst table = (n) => Float32Array.from({ length: n }, () => random());\n\n// One swatch, baked once into fields over its 64x16 slot: how opaque the\n// pigment is (A), how light against its own shade (V), where across the\n// stroke the LED sits (Q, -1 at the top edge, 1 at the bottom), how much the\n// highlight catches there (G), how far the finger must have come before it\n// lays this LED (R), and a fixed number for the sparkle (K).\n//\n// The stroke lands with a round cap of radius r, runs straight with a little\n// waver, and from a fraction ut of its length on the pigment runs out: the\n// stroke narrows, goes sheer, and the drag streaks, which follow the stroke,\n// drop out one by one, the weakest first, until the last one ends at xe.\nfunction swatch(n) {\n  const s = {\n    n, jit: (random() - 0.5) * 0.05, seed: floor(random() * 1e6),\n    A: new Float32Array(NT), V: new Float32Array(NT), Q: new Float32Array(NT), G: new Float32Array(NT), R: new Float32Array(NT), K: new Float32Array(NT),\n    p: 0, go: false, wait: 0, xa: 0, xb: 0, prev: null, wipe: 1, wwait: 0,\n  };\n  const r = 5.3 + random() * 0.6, x0 = 2 + random() * 3.5, xe = 58 + random() * 6, ut = 0.4 + random() * 0.16;\n  const slope = (random() - 0.5) * 0.04, amp = 0.2 + random() * 0.35, fr = 0.05 + random() * 0.06, ph = random() * 2 * PI, xm = (x0 + xe) / 2;\n  const T1 = table(24), T2 = table(24 * 10), T3 = table(24 * 24), TE = table(20);\n  for (let j = 0; j \u003c SL; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, xc = x + 0.5;\n      const yc = 7.5 + slope * (xc - xm) + amp * sin(xc * fr + ph), q = j + 0.5 - yc, u = (xc - x0) / (xe - x0);\n      let hw;\n      if (xc \u003c x0 + r) {\n        const d = (x0 + r - xc) / r;\n        hw = d >= 1 ? -1 : r * sqrt(1 - d * d);\n      } else hw = r * (1 - 0.06 * u - 0.24 * sm(ut, 1.1, u));\n      hw += 0.5 * (n1(TE, xc / 4 + 2) - 0.5);\n      const cov = cl(hw - abs(q) + 0.5, 0, 1);\n      const st = 0.62 * n1(T1, q * 1.15 + 11) + 0.38 * n2(T2, 24, xc / 8, q + 11);\n      // In the tail the streaks also break along their length, where the\n      // last of the pigment skips over the card.\n      const thin = sm(ut, 1, u), brk = n2(T3, 24, xc / 2.6, q * 1.3 + 11);\n      const keep = sm(-0.2, 0.2, st * 1.1 + 0.3 - thin * (1.05 + 0.7 * brk));\n      s.A[i] = cov * (0.93 + 0.07 * st) * keep * (1 - 0.5 * thin) * (1 - sm(0.94, 1.04, u));\n      // Where the finger landed the pigment piles up a shade deeper, and the\n      // drag pushes a little more of it to the two long edges.\n      const ce = xc - (x0 + r - sqrt(Math.max(0, r * r - q * q)));\n      let v = (1 + 0.24 * (st - 0.5)) * (1 - 0.1 * sm(0.55, 1, abs(q) / Math.max(hw, 0.5)));\n      if (ce \u003c 2.5) v *= 0.8 + 0.2 * cl(ce / 2.5, 0, 1);\n      s.V[i] = v;\n      s.Q[i] = q / Math.max(hw, 1);\n      s.G[i] = (0.45 + st) * (1 - 0.7 * thin);\n      s.R[i] = xc + 0.85 * (r - sqrt(Math.max(0, r * r - q * q)));\n      s.K[i] = hash(x, j, s.seed);\n    }\n  (s.xa = x0 - 1.5), (s.xb = xe + r + 2);\n  return s;\n}\n\n// The finger sets off quickly and slows as the pigment runs out.\nconst travel = (p) => 0.4 * p * p * (3 - 2 * p) + 0.6 * (1 - (1 - p) * (1 - p));\nconst fingerAt = (s) => s.xa + (s.xb - s.xa) * travel(s.p);\n\nexport function setup(params) {\n  const L = [];\n  for (let k = 0; k \u003c= ROWS; k++) {\n    const s = swatch(k);\n    if (k \u003c ROWS - 1) s.p = 1;\n    L.push(s);\n  }\n  // The card opens with seven swatches down and the eighth being dragged.\n  (L[ROWS - 1].go = true), (L[ROWS - 1].p = 0.12);\n  params.s = {\n    L, n: ROWS + 1, off: 0, phase: 0, pt: 0, t: 0, sweep: 30, hue: 0, speed: 2, width: 0.52, fin: 0.06,\n    col: new Float32Array((ROWS + 1) * 6), SH: new Float32Array(64), SW: new Float32Array(180),\n  };\n}\n\n// The stack glides up a row: the top swatch leaves, an empty slot comes in\n// at the bottom and the finger starts on the slot above it.\nfunction shift(P) {\n  P.L.shift();\n  P.L.push(swatch(P.n++));\n  (P.off = 0), (P.phase = 0), (P.pt = 0);\n  const B = P.L[ROWS - 1];\n  (B.go = true), (B.p = 0);\n}\n\n// K1: a pad wipes each swatch off left to right, row after row, and a\n// finger follows each wipe with a fresh stroke of the same shade.\nfunction reswatch(P) {\n  if (P.phase === 2) shift(P);\n  P.phase = 0;\n  for (let k = 0; k \u003c ROWS; k++) {\n    const old = P.L[k], s = swatch(old.n);\n    old.prev = null;\n    if (old.p > 0) (s.prev = old), (s.wipe = 0), (s.wwait = 0.07 * k);\n    (s.go = true), (s.p = 0), (s.wait = 0.07 * k + 0.3);\n    P.L[k] = s;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.width = 0.04 + 0.48 * (cl(k[2], -1, 1) + 1);\n  P.fin = cl(k[3], -1, 1);\n  const sp = P.speed, drag = 2.1 / sp, hold = 0.9 / sp, glide = 1.1 / sp;\n  P.t += d;\n  // A band of light crosses the card corner to corner every 18 s at Speed 2.\n  P.sweep += d * 7 * sp;\n  if (P.sweep > 200) P.sweep -= 250;\n  if (input.btnPressed && input.btnPressed[0]) reswatch(P);\n  for (const s of P.L) {\n    if (s.prev) {\n      if (s.wwait > 0) s.wwait -= d;\n      else if ((s.wipe += d / 0.45) >= 1) s.prev = null;\n    }\n    if (s.go && s.p \u003c 1) {\n      if (s.wait > 0) s.wait -= d;\n      else s.p = min(1, s.p + d / drag);\n    }\n  }\n  const B = P.L[ROWS - 1];\n  if (P.phase === 0) {\n    if (B.p >= 1) (P.phase = 1), (P.pt = 0);\n  } else if (P.phase === 1) {\n    if ((P.pt += d) >= hold) (P.phase = 2), (P.pt = 0);\n  } else {\n    P.pt += d;\n    const u = min(1, P.pt / glide);\n    P.off = SL * u * u * (3 - 2 * u);\n    if (u >= 1) shift(P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = 255 * rgb[c];\n}\n\n// The shade of swatch n: the range runs light to deep and back over 14\n// swatches, so the eight on the card always show a stretch of it.\nfunction tone(P, s, m, out, o) {\n  const a = s.n % 14, tri = (a \u003c= 7 ? a : 14 - a) / 7, w = P.width;\n  const d = cl(0.5 + w * (tri - 0.5) + s.jit, 0, 1);\n  const h = P.hue + ROSE + 0.05 * w * (0.5 - d);\n  hsv(h, 0.3 + 0.58 * d, (0.98 - 0.56 * d) * (1 + 0.12 * m), out, o);\n  // The highlight: a pale tint of the same hue, and towards metallic a\n  // champagne one.\n  hsv(h + 0.02 * m, (0.3 + 0.58 * d) * 0.35, 1, out, o + 3);\n  for (let c = 0; c \u003c 3; c++) out[o + 3 + c] = mix(mix(out[o + 3 + c], 255, 0.35), [255, 226, 186][c], 0.55 * m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.fin, m = sm(0.15, 1, f), col = P.col, SH = P.SH, SW = P.SW, L = P.L;\n  // Matte keeps 3% of a sheen, satin 50%, metallic 95%, narrower as it\n  // goes; metallic also throws a weaker second light off the lower edge.\n  const kS = 0.03 + 0.47 * sm(-1, 0, f) + 0.45 * sm(0, 1, f), wS = f \u003c 0 ? mix(0.4, 0.75, -f) : mix(0.4, 0.26, f);\n  for (let b = 0; b \u003c 64; b++) {\n    const q = -1.6 + (3.2 * b) / 63, e = (q + 0.3) / wS, e2 = (q - 0.72) / 0.16;\n    SH[b] = kS * exp(-e * e) + 0.35 * m * exp(-e2 * e2);\n  }\n  const base = mix(0.85, 0.5, m), amp = mix(0.45, 1.4, m);\n  for (let g = 0; g \u003c 180; g++) {\n    const e = (g - P.sweep) / 15;\n    SW[g] = exp(-e * e);\n  }\n  for (let k = 0; k \u003c= ROWS; k++) tone(P, L[k], m, col, k * 6);\n  const dens = 1 - 0.15 * m, t = P.t, off = round(P.off);\n  const XF = L.map((s) => (s.p \u003c 1 ? fingerAt(s) : 1e3)), PF = L.map((s) => (s.prev ? fingerAt(s.prev) : 0));\n  const WX = L.map((s) => -6 + 78 * s.wipe);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = y + off, k = floor(ty / SL), j = ty - k * SL, s = L[k], o = k * 6, xf = XF[k];\n    for (let x = 0; x \u003c W; x++) {\n      const gi = (y * W + x) * 3;\n      let r = GR[gi], g = GR[gi + 1], b = GR[gi + 2];\n      const i = j * W + x;\n      // The swatch being wiped off, still there right of the round edge of\n      // the pad.\n      if (s.prev) {\n        const S = s.prev, e = WX[k] - 2.5 * S.Q[i] * S.Q[i], a = S.A[i] * cl((PF[k] - S.R[i]) * 0.8 + 0.5, 0, 1) * sm(e - 2.5, e + 2.5, x);\n        if (a > 0.004) {\n          const v = S.V[i];\n          (r = mix(r, col[o] * v, a)), (g = mix(g, col[o + 1] * v, a)), (b = mix(b, col[o + 2] * v, a));\n        }\n      }\n      let a = s.A[i];\n      if (a > 0.004) {\n        let wet = 0;\n        if (xf \u003c 1e3) {\n          const dx = xf - s.R[i];\n          a *= cl(dx * 0.8 + 0.5, 0, 1);\n          if (dx > 0 && dx \u003c 4) wet = 0.5 * (1 - dx / 4);\n        }\n        if (a > 0.004) {\n          const Q = s.Q[i], v = s.V[i] * (1 - 0.42 * m * sm(-0.1, 0.6, Q));\n          let pr = col[o] * v, pg = col[o + 1] * v, pb = col[o + 2] * v;\n          const lt = SW[cl(round(y + 0.55 * x), 0, 179)];\n          const h = min(1, SH[cl(round(((Q + 1.6) * 63) / 3.2), 0, 63)] * s.G[i] * (base + amp * lt) + wet);\n          (pr = mix(pr, col[o + 3], h)), (pg = mix(pg, col[o + 4], h)), (pb = mix(pb, col[o + 5], h));\n          const K = s.K[i];\n          if (m > 0 && K > dens && a > 0.4) {\n            const tw = sin(K * 6283 + t * 2.6);\n            if (tw > 0.3) {\n              const z = (tw - 0.3) / 0.7, spk = z * z * m * (0.45 + 0.9 * lt);\n              (pr = mix(pr, 255, spk)), (pg = mix(pg, 248, spk)), (pb = mix(pb, 232, spk));\n            }\n          }\n          (r = mix(r, pr, a)), (g = mix(g, pg, a)), (b = mix(b, pb, a));\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4."},{"name":"Range","min":-1,"max":1,"about":"How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it."},{"name":"Finish","min":-1,"max":1,"about":"At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles."}],"start":[0,2,0,0.06],"measures":{"motion":0.1965,"detail":0.0215,"edges":0.0463,"complexity":1.8772,"coverage":1,"colour":0.2018,"drift":0.0306},"knobResponse":[0.1202,0.0645,0.0452,0.0494]},{"slug":"taffy-cream","title":"Taffy Cream","family":"cosmetic","round":37,"note":"라일락 크림과 아이보리 크림이 높은 통을 채우고, 보이지 않는 핀 셋이 둘씩 서로를 한 바퀴씩 돌며 태피처럼 잡아당겨요. 두 크림의 경계가 윤기 있는 주름으로 늘어나 한 주기에 13배쯤 길어지며 겹이 늘고 가늘어지다 파스텔로 섞이면, 아이보리 테를 두른 새 덩이가 핀이 지날 길에 놓여요. K3 은 핀을 다섯까지 늘리고, 누르면 새 덩이를 바로 놓아요.","idea":"A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.","buttons":"K1 tap lays a fresh dollop in now, on the path of the pins that turn next.","code":"// ===== Patternflow pattern =====\n// Title:   Taffy Cream\n// Family:  cosmetic\n// Idea:    A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after two-tone cream being pulled in a cosmetics mixing vat, with the pins moving as a taffy puller, a rod-stirring protocol in the sense of Philip Boyland, Hassan Aref and Mark Stremler (2000)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1\n//\n// Knob 1: Hue. The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white.\n// Knob 2: Speed. At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower.\n// Knob 3: Pins. How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns.\n// Knob 4: Gloss. At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen.\n// Buttons: K1 tap lays a fresh dollop in now, on the path of the pins that turn next.\n\n// The pins move as the taffy puller: pins on a line, neighbours turning\n// once round each other, the turns alternately clockwise and anticlockwise.\n// The braid of three pins is s1^2 s2^-2, and its Burau matrix at t = -1 is\n// [[5, 2], [2, 1]], whose larger eigenvalue is 3 + 2 sqrt 2 = 5.83, the\n// silver ratio squared: the least a line caught round the pins must be\n// stretched by in one period, whatever the cream between them does.\n// Boyland, Aref and Stremler's half turns, s1 s2^-1, give the golden ratio\n// squared, 2.62. For four and five pins the same matrices give at least 9.9\n// and 12.4 a period of three and four turns. Followed in a scratch script\n// through this pattern's own flow, a line across the middle of the vat grew\n// 17, 13 and 14 times in three periods with three pins, 13 a period with\n// four and 19 to 23 with five: above the floor, as the cream round each\n// pin is sheared besides.\n//\n// The flow: each moving pin carries the cream round it with a stream\n// function psi = (V x (p - r)) g(|p - r|), g = exp(-d^2 / 2 s^2), so cream\n// at the pin goes with the pin and cream a few s away stays put. Each pin\n// has a mirror image behind each of the four walls, moving as its\n// reflection, which takes psi to zero along the walls, so no cream crosses\n// them and it slides along them freely. The velocity is the curl of psi,\n// so the cream keeps its volume. It is worked out on the LED corners, once\n// a step, and read between them.\n//\n// The first try tapered psi to zero over the last 5 LEDs instead. A pin\n// passing 14 LEDs from a side wall left psi near 350 there, and the cream\n// a pin carries comes back round it in a ring two to three s out, so even\n// the top wall, 28 LEDs above the highest pin, saw psi near 75. Squeezed\n// to zero in 5 LEDs, either drove a jet of 40 to 50 LEDs a second along\n// the wall that combed the cream there into stair steps. With the images\n// every corner stays 3.5 s or more from any pin, where g is 0.002, and no\n// taper is needed.\n\nconst W = 64, H = 128, N = W * H;\n// The cream is followed on a grid twice as fine as the LEDs.\nconst GW = 128, GH = 256, GN = GW * GH;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n// One turn takes this many seconds at Speed 1.\nconst TURN = 6;\n// A dollop every this many turns.\nconst EVERY = 5;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The pins stand on x = 32, sp apart and centred in the vat.\nfunction layout(n) {\n  const sp = min(36, 116 / n), ys = [];\n  for (let j = 0; j \u003c n; j++) ys.push(64 + (j - (n - 1) / 2) * sp);\n  return { n, sp, ys, sg: 0.3 * sp };\n}\n\n// The turning pair and the two pins' places and velocities at phase f of\n// turn k: pair j = k mod (n - 1), clockwise for even j. The angle eases in\n// and out, so a turn starts and ends at rest and the next pair takes over.\nfunction pins(S, out) {\n  const L = S.lay, j = S.turn % (L.n - 1), dir = j % 2 === 0 ? 1 : -1, f = S.phase;\n  const cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const th = 2 * PI * (f - sin(2 * PI * f) / (2 * PI)), om = (2 * PI * (1 - cos(2 * PI * f))) / (S.turnLen || 1);\n  for (let k = 0; k \u003c 2; k++) {\n    const al = (k === 0 ? -PI / 2 : PI / 2) + dir * th;\n    out[k * 4] = 32 + R * cos(al);\n    out[k * 4 + 1] = cy + R * sin(al);\n    out[k * 4 + 2] = -R * sin(al) * dir * om;\n    out[k * 4 + 3] = R * cos(al) * dir * om;\n  }\n  return out;\n}\n\n// Velocity at (x, y) in LED units, written to S.vx, S.vy.\nfunction vel(S, x, y, P) {\n  const is2 = 1 / (S.lay.sg * S.lay.sg);\n  let px = 0, py = 0;\n  for (let k = 0; k \u003c 8; k += 4)\n    for (let m = 0; m \u003c 5; m++) {\n      // The pin, then its images behind the left, right, top and bottom walls.\n      const rx = m === 1 ? -P[k] : m === 2 ? 2 * W - P[k] : P[k], ry = m === 3 ? -P[k + 1] : m === 4 ? 2 * H - P[k + 1] : P[k + 1];\n      const vx = m === 1 || m === 2 ? -P[k + 2] : P[k + 2], vy = m === 3 || m === 4 ? -P[k + 3] : P[k + 3];\n      const dx = x - rx, dy = y - ry, d2 = (dx * dx + dy * dy) * is2;\n      if (d2 > 30) continue;\n      const g = Math.exp(-0.5 * d2), c = vx * dy - vy * dx;\n      px += -vy * g - c * g * dx * is2;\n      py += vx * g - c * g * dy * is2;\n    }\n  S.vx = py;\n  S.vy = -px;\n}\n\n// Catmull-Rom sample of the fine grid at grid coordinates (gx, gy), held\n// between the four nearest values so a stripe edge never rings.\nfunction sample(c, gx, gy) {\n  gx = cl(gx, 0, GW - 1.001);\n  gy = cl(gy, 0, GH - 1.001);\n  const ix = floor(gx), iy = floor(gy), fx = gx - ix, fy = gy - iy;\n  const wx0 = ((-0.5 * fx + 1) * fx - 0.5) * fx, wx1 = (1.5 * fx - 2.5) * fx * fx + 1, wx2 = ((-1.5 * fx + 2) * fx + 0.5) * fx, wx3 = (0.5 * fx - 0.5) * fx * fx;\n  const wy0 = ((-0.5 * fy + 1) * fy - 0.5) * fy, wy1 = (1.5 * fy - 2.5) * fy * fy + 1, wy2 = ((-1.5 * fy + 2) * fy + 0.5) * fy, wy3 = (0.5 * fy - 0.5) * fy * fy;\n  const x0 = max(ix - 1, 0), x2 = ix + 1, x3 = min(ix + 2, GW - 1);\n  let s = 0;\n  for (let k = 0; k \u003c 4; k++) {\n    const row = min(max(iy - 1 + k, 0), GH - 1) * GW, wy = k === 0 ? wy0 : k === 1 ? wy1 : k === 2 ? wy2 : wy3;\n    s += wy * (c[row + x0] * wx0 + c[row + ix] * wx1 + c[row + x2] * wx2 + c[row + x3] * wx3);\n  }\n  const a = c[iy * GW + ix], b = c[iy * GW + x2], d = c[(iy + 1) * GW + ix], e = c[(iy + 1) * GW + x2];\n  return cl(s, min(min(a, b), min(d, e)), max(max(a, b), max(d, e)));\n}\n\n// One step of the cream: each fine cell looks back along the flow, a\n// midpoint step, and takes what was there. Cells under LEDs whose corners\n// all move less than a ten-thousandth of an LED a step are copied as they\n// are; at that rate a still cell and a moving neighbour part by 0.2 LED in\n// a minute, and the turning pair changes long before.\nconst VW = W + 1, VH = H + 1;\nfunction advect(S, dt) {\n  const P = pins(S, S.P), c = S.c, o = S.c2, U = S.U, V = S.V, still = S.still;\n  for (let y = 0; y \u003c VH; y++)\n    for (let x = 0; x \u003c VW; x++) {\n      vel(S, x, y, P);\n      U[y * VW + x] = S.vx;\n      V[y * VW + x] = S.vy;\n    }\n  const lim = (1e-4 / dt) * (1e-4 / dt);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * VW + x, r = q + VW;\n      const m = max(max(U[q] * U[q] + V[q] * V[q], U[q + 1] * U[q + 1] + V[q + 1] * V[q + 1]), max(U[r] * U[r] + V[r] * V[r], U[r + 1] * U[r + 1] + V[r + 1] * V[r + 1]));\n      still[y * W + x] = m \u003c lim ? 1 : 0;\n    }\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, ly = gy >> 1;\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const p = gy * GW + gx;\n      if (still[ly * W + (gx >> 1)]) {\n        o[p] = c[p];\n        continue;\n      }\n      const x = (gx + 0.5) / 2;\n      // Bilinear velocity at (x, y), then at the midpoint back along it.\n      let ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, q = iy * VW + ix;\n      let vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      let vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      const mx = cl(x - 0.5 * dt * vx, 0, W - 0.001), my = cl(y - 0.5 * dt * vy, 0, H - 0.001);\n      (ix = floor(mx)), (iy = floor(my)), (fx = mx - ix), (fy = my - iy), (q = iy * VW + ix);\n      vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      o[p] = sample(c, (x - dt * vx) * 2 - 0.5, (y - dt * vy) * 2 - 0.5);\n    }\n  }\n  S.c = o;\n  S.c2 = c;\n}\n\n// A dollop: a tinted core with an ivory rim, its edge wobbling on two\n// harmonics, laid where the next turn's pins will pass.\nfunction dollop(S) {\n  const L = S.lay, j = S.turn % (L.n - 1), cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const al = random() * 2 * PI, x0 = 32 + R * cos(al) * 0.8, y0 = cy + R * sin(al) * 0.8;\n  const r1 = 0.36 * L.sp + 4, r2 = r1 + 4 + 0.08 * L.sp, p1 = random() * 6.3, p2 = random() * 6.3, c = S.c;\n  for (let gy = 0; gy \u003c GH; gy++)\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const dx = (gx + 0.5) / 2 - x0, dy = (gy + 0.5) / 2 - y0, d = sqrt(dx * dx + dy * dy);\n      if (d > r2 * 1.3 + 1) continue;\n      const an = Math.atan2(dy, dx), wob = 1 + 0.12 * sin(2 * an + p1) + 0.07 * sin(3 * an + p2);\n      const e = d / wob;\n      if (e > r2 + 0.5) continue;\n      const core = sm(r1 + 0.5 - e), rim = sm(r2 + 0.5 - e), p = gy * GW + gx;\n      c[p] = c[p] * (1 - rim) + core;\n    }\n}\n\nfunction fresh(S) {\n  // The vat opens with the tinted cream on the left and the ivory on the\n  // right, the line between them wavering across the pins.\n  const c = S.c, ph = random() * 6.3;\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, edge = 32 + 6 * sin((y / H) * 2 * PI * 1.5 + ph);\n    for (let gx = 0; gx \u003c GW; gx++) c[gy * GW + gx] = sm(edge + 0.5 - (gx + 0.5) / 2);\n  }\n}\n\nfunction step(S, d, lim = 3) {\n  S.turnLen = TURN / S.speed;\n  S.clock += d * S.speed;\n  // Substeps keep the pins under 3 LEDs a step: one at Speed 2, two at 3.\n  const vmax = (S.lay.sp / 2) * 4 * PI / S.turnLen, ns = max(1, Math.ceil((vmax * d) / lim));\n  for (let i = 0; i \u003c ns; i++) {\n    advect(S, d / ns);\n    S.phase += d / ns / S.turnLen;\n    if (S.phase >= 1) {\n      S.phase -= 1;\n      S.turn++;\n      if (++S.since >= EVERY) (S.since = 0), dollop(S);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    c: new Float32Array(GN), c2: new Float32Array(GN), led: new Float32Array(N), hgt: new Float32Array(N),\n    P: new Float64Array(8), vx: 0, vy: 0, U: new Float32Array(VW * VH), V: new Float32Array(VW * VH), still: new Uint8Array(N), lay: layout(3), n: 3, hue: 0, speed: 2, gloss: 0.06,\n    turn: 0, phase: 0, since: 0, turnLen: 3, clock: 0, warm: false, tint: [0, 0, 0], ivory: [1, 0.95, 0.86],\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.gloss = cl(k[3], 0, 1);\n  const n = Math.round(cl(k[2], 3, 5));\n  if (n !== S.n) {\n    // The pins are unseen, so they simply take their new places; the turn\n    // under way goes on with the new pair.\n    S.n = n;\n    S.lay = layout(n);\n  }\n  if (!S.warm) {\n    // Open a turn and a half in, the first folds already drawn. The 4.5 s\n    // run in steps of up to 6 LEDs, 60 of them, about 0.3 s of work.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 30; i++) step(S, 0.15, 6);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) dollop(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, led = S.led, hgt = S.hgt, tint = S.tint, iv = S.ivory;\n  // The tint: lilac at 0. From coral to lime it is brought up to full\n  // brightness and its shading made shallower, as a darker peach reads brown\n  // and a darker butter khaki. Next to butter and lime the ivory turns to a\n  // cooler white, or the two creams would be one.\n  const h = S.hue + 0.76, hh = h - floor(h);\n  const warm = sm(hh / 0.05) * sm((0.3 - hh) / 0.06) + sm((hh - 0.96) / 0.04), yel = sm((hh - 0.08) / 0.05) * sm((0.32 - hh) / 0.05);\n  hsv(h, 0.46 + 0.08 * warm, 0.9 + 0.1 * warm, tint);\n  iv[0] = 1 - 0.03 * yel;\n  iv[1] = 0.95 + 0.02 * yel;\n  iv[2] = 0.86 + 0.13 * yel;\n  const deep = 1 - 0.45 * warm;\n  // Each LED averages its 2 x 2 fine cells, so stripes under an LED wide\n  // blend into the pastel between the two creams.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 2 * y * GW + 2 * x;\n      led[y * W + x] = 0.25 * (c[g] + c[g + 1] + c[g + GW] + c[g + GW + 1]);\n    }\n  // The surface: the tinted cream stands a little proud of the ivory, so\n  // every fold has two slopes, and a slow swell runs under both.\n  const t = S.clock;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0, wsum = 0;\n      for (let v = -1; v \u003c= 1; v++)\n        for (let u = -1; u \u003c= 1; u++) {\n          const xx = cl(x + u, 0, W - 1), yy = cl(y + v, 0, H - 1), w = u === 0 && v === 0 ? 4 : u === 0 || v === 0 ? 2 : 1;\n          s += led[yy * W + xx] * w;\n          wsum += w;\n        }\n      hgt[y * W + x] = (2.4 * s) / wsum + 0.5 * sin(x * 0.11 + y * 0.05 + t * 0.4) * sin(y * 0.07 - t * 0.3);\n    }\n  // The light comes from the upper left and drifts across and back every\n  // 20 s of turning; Gloss tightens the highlight and brightens it.\n  const gl = S.gloss, la = -2.3 + 0.6 * sin((2 * PI * t) / 20), le = 0.75;\n  const lx = cos(la) * cos(le), ly = sin(la) * cos(le), lz = sin(le);\n  const hx = lx, hy = ly, hz = lz + 1, hn = sqrt(hx * hx + hy * hy + hz * hz);\n  const ex = pow(2, 2.5 + 4 * gl), ks = 0.2 + 0.7 * gl, slope = 0.7 + 1.2 * gl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (hgt[y * W + min(x + 1, W - 1)] - hgt[y * W + max(x - 1, 0)]) * 0.5 * slope;\n      const gy = (hgt[min(y + 1, H - 1) * W + x] - hgt[max(y - 1, 0) * W + x]) * 0.5 * slope;\n      const nl = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * nl, ny = -gy * nl, nz = nl;\n      // A broad satin sheen lifts flat cream by about 0.12; a tight gloss\n      // does not, so the lift is put back by hand and the ivory keeps its\n      // level at any Gloss instead of going beige.\n      const diff = 1 - (0.09 - 0.1 * gl + 0.28 * (lz - (nx * lx + ny * ly + nz * lz))) * deep;\n      const spec = ks * pow(max(0, (nx * hx + ny * hy + nz * hz) / hn), ex);\n      const m = led[p];\n      const r = (iv[0] + (tint[0] - iv[0]) * m) * diff + spec;\n      const g = (iv[1] + (tint[1] - iv[1]) * m) * diff + spec;\n      const b = (iv[2] + (tint[2] - iv[2]) * m) * diff + spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","layer":{"id":"layer-taffy-cream","type":"code","name":"taffy-cream","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Taffy Cream\n// Family:  cosmetic\n// Idea:    A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after two-tone cream being pulled in a cosmetics mixing vat, with the pins moving as a taffy puller, a rod-stirring protocol in the sense of Philip Boyland, Hassan Aref and Mark Stremler (2000)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1\n//\n// Knob 1: Hue. The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white.\n// Knob 2: Speed. At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower.\n// Knob 3: Pins. How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns.\n// Knob 4: Gloss. At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen.\n// Buttons: K1 tap lays a fresh dollop in now, on the path of the pins that turn next.\n\n// The pins move as the taffy puller: pins on a line, neighbours turning\n// once round each other, the turns alternately clockwise and anticlockwise.\n// The braid of three pins is s1^2 s2^-2, and its Burau matrix at t = -1 is\n// [[5, 2], [2, 1]], whose larger eigenvalue is 3 + 2 sqrt 2 = 5.83, the\n// silver ratio squared: the least a line caught round the pins must be\n// stretched by in one period, whatever the cream between them does.\n// Boyland, Aref and Stremler's half turns, s1 s2^-1, give the golden ratio\n// squared, 2.62. For four and five pins the same matrices give at least 9.9\n// and 12.4 a period of three and four turns. Followed in a scratch script\n// through this pattern's own flow, a line across the middle of the vat grew\n// 17, 13 and 14 times in three periods with three pins, 13 a period with\n// four and 19 to 23 with five: above the floor, as the cream round each\n// pin is sheared besides.\n//\n// The flow: each moving pin carries the cream round it with a stream\n// function psi = (V x (p - r)) g(|p - r|), g = exp(-d^2 / 2 s^2), so cream\n// at the pin goes with the pin and cream a few s away stays put. Each pin\n// has a mirror image behind each of the four walls, moving as its\n// reflection, which takes psi to zero along the walls, so no cream crosses\n// them and it slides along them freely. The velocity is the curl of psi,\n// so the cream keeps its volume. It is worked out on the LED corners, once\n// a step, and read between them.\n//\n// The first try tapered psi to zero over the last 5 LEDs instead. A pin\n// passing 14 LEDs from a side wall left psi near 350 there, and the cream\n// a pin carries comes back round it in a ring two to three s out, so even\n// the top wall, 28 LEDs above the highest pin, saw psi near 75. Squeezed\n// to zero in 5 LEDs, either drove a jet of 40 to 50 LEDs a second along\n// the wall that combed the cream there into stair steps. With the images\n// every corner stays 3.5 s or more from any pin, where g is 0.002, and no\n// taper is needed.\n\nconst W = 64, H = 128, N = W * H;\n// The cream is followed on a grid twice as fine as the LEDs.\nconst GW = 128, GH = 256, GN = GW * GH;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n// One turn takes this many seconds at Speed 1.\nconst TURN = 6;\n// A dollop every this many turns.\nconst EVERY = 5;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The pins stand on x = 32, sp apart and centred in the vat.\nfunction layout(n) {\n  const sp = min(36, 116 / n), ys = [];\n  for (let j = 0; j \u003c n; j++) ys.push(64 + (j - (n - 1) / 2) * sp);\n  return { n, sp, ys, sg: 0.3 * sp };\n}\n\n// The turning pair and the two pins' places and velocities at phase f of\n// turn k: pair j = k mod (n - 1), clockwise for even j. The angle eases in\n// and out, so a turn starts and ends at rest and the next pair takes over.\nfunction pins(S, out) {\n  const L = S.lay, j = S.turn % (L.n - 1), dir = j % 2 === 0 ? 1 : -1, f = S.phase;\n  const cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const th = 2 * PI * (f - sin(2 * PI * f) / (2 * PI)), om = (2 * PI * (1 - cos(2 * PI * f))) / (S.turnLen || 1);\n  for (let k = 0; k \u003c 2; k++) {\n    const al = (k === 0 ? -PI / 2 : PI / 2) + dir * th;\n    out[k * 4] = 32 + R * cos(al);\n    out[k * 4 + 1] = cy + R * sin(al);\n    out[k * 4 + 2] = -R * sin(al) * dir * om;\n    out[k * 4 + 3] = R * cos(al) * dir * om;\n  }\n  return out;\n}\n\n// Velocity at (x, y) in LED units, written to S.vx, S.vy.\nfunction vel(S, x, y, P) {\n  const is2 = 1 / (S.lay.sg * S.lay.sg);\n  let px = 0, py = 0;\n  for (let k = 0; k \u003c 8; k += 4)\n    for (let m = 0; m \u003c 5; m++) {\n      // The pin, then its images behind the left, right, top and bottom walls.\n      const rx = m === 1 ? -P[k] : m === 2 ? 2 * W - P[k] : P[k], ry = m === 3 ? -P[k + 1] : m === 4 ? 2 * H - P[k + 1] : P[k + 1];\n      const vx = m === 1 || m === 2 ? -P[k + 2] : P[k + 2], vy = m === 3 || m === 4 ? -P[k + 3] : P[k + 3];\n      const dx = x - rx, dy = y - ry, d2 = (dx * dx + dy * dy) * is2;\n      if (d2 > 30) continue;\n      const g = Math.exp(-0.5 * d2), c = vx * dy - vy * dx;\n      px += -vy * g - c * g * dx * is2;\n      py += vx * g - c * g * dy * is2;\n    }\n  S.vx = py;\n  S.vy = -px;\n}\n\n// Catmull-Rom sample of the fine grid at grid coordinates (gx, gy), held\n// between the four nearest values so a stripe edge never rings.\nfunction sample(c, gx, gy) {\n  gx = cl(gx, 0, GW - 1.001);\n  gy = cl(gy, 0, GH - 1.001);\n  const ix = floor(gx), iy = floor(gy), fx = gx - ix, fy = gy - iy;\n  const wx0 = ((-0.5 * fx + 1) * fx - 0.5) * fx, wx1 = (1.5 * fx - 2.5) * fx * fx + 1, wx2 = ((-1.5 * fx + 2) * fx + 0.5) * fx, wx3 = (0.5 * fx - 0.5) * fx * fx;\n  const wy0 = ((-0.5 * fy + 1) * fy - 0.5) * fy, wy1 = (1.5 * fy - 2.5) * fy * fy + 1, wy2 = ((-1.5 * fy + 2) * fy + 0.5) * fy, wy3 = (0.5 * fy - 0.5) * fy * fy;\n  const x0 = max(ix - 1, 0), x2 = ix + 1, x3 = min(ix + 2, GW - 1);\n  let s = 0;\n  for (let k = 0; k \u003c 4; k++) {\n    const row = min(max(iy - 1 + k, 0), GH - 1) * GW, wy = k === 0 ? wy0 : k === 1 ? wy1 : k === 2 ? wy2 : wy3;\n    s += wy * (c[row + x0] * wx0 + c[row + ix] * wx1 + c[row + x2] * wx2 + c[row + x3] * wx3);\n  }\n  const a = c[iy * GW + ix], b = c[iy * GW + x2], d = c[(iy + 1) * GW + ix], e = c[(iy + 1) * GW + x2];\n  return cl(s, min(min(a, b), min(d, e)), max(max(a, b), max(d, e)));\n}\n\n// One step of the cream: each fine cell looks back along the flow, a\n// midpoint step, and takes what was there. Cells under LEDs whose corners\n// all move less than a ten-thousandth of an LED a step are copied as they\n// are; at that rate a still cell and a moving neighbour part by 0.2 LED in\n// a minute, and the turning pair changes long before.\nconst VW = W + 1, VH = H + 1;\nfunction advect(S, dt) {\n  const P = pins(S, S.P), c = S.c, o = S.c2, U = S.U, V = S.V, still = S.still;\n  for (let y = 0; y \u003c VH; y++)\n    for (let x = 0; x \u003c VW; x++) {\n      vel(S, x, y, P);\n      U[y * VW + x] = S.vx;\n      V[y * VW + x] = S.vy;\n    }\n  const lim = (1e-4 / dt) * (1e-4 / dt);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * VW + x, r = q + VW;\n      const m = max(max(U[q] * U[q] + V[q] * V[q], U[q + 1] * U[q + 1] + V[q + 1] * V[q + 1]), max(U[r] * U[r] + V[r] * V[r], U[r + 1] * U[r + 1] + V[r + 1] * V[r + 1]));\n      still[y * W + x] = m \u003c lim ? 1 : 0;\n    }\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, ly = gy >> 1;\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const p = gy * GW + gx;\n      if (still[ly * W + (gx >> 1)]) {\n        o[p] = c[p];\n        continue;\n      }\n      const x = (gx + 0.5) / 2;\n      // Bilinear velocity at (x, y), then at the midpoint back along it.\n      let ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, q = iy * VW + ix;\n      let vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      let vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      const mx = cl(x - 0.5 * dt * vx, 0, W - 0.001), my = cl(y - 0.5 * dt * vy, 0, H - 0.001);\n      (ix = floor(mx)), (iy = floor(my)), (fx = mx - ix), (fy = my - iy), (q = iy * VW + ix);\n      vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      o[p] = sample(c, (x - dt * vx) * 2 - 0.5, (y - dt * vy) * 2 - 0.5);\n    }\n  }\n  S.c = o;\n  S.c2 = c;\n}\n\n// A dollop: a tinted core with an ivory rim, its edge wobbling on two\n// harmonics, laid where the next turn's pins will pass.\nfunction dollop(S) {\n  const L = S.lay, j = S.turn % (L.n - 1), cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const al = random() * 2 * PI, x0 = 32 + R * cos(al) * 0.8, y0 = cy + R * sin(al) * 0.8;\n  const r1 = 0.36 * L.sp + 4, r2 = r1 + 4 + 0.08 * L.sp, p1 = random() * 6.3, p2 = random() * 6.3, c = S.c;\n  for (let gy = 0; gy \u003c GH; gy++)\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const dx = (gx + 0.5) / 2 - x0, dy = (gy + 0.5) / 2 - y0, d = sqrt(dx * dx + dy * dy);\n      if (d > r2 * 1.3 + 1) continue;\n      const an = Math.atan2(dy, dx), wob = 1 + 0.12 * sin(2 * an + p1) + 0.07 * sin(3 * an + p2);\n      const e = d / wob;\n      if (e > r2 + 0.5) continue;\n      const core = sm(r1 + 0.5 - e), rim = sm(r2 + 0.5 - e), p = gy * GW + gx;\n      c[p] = c[p] * (1 - rim) + core;\n    }\n}\n\nfunction fresh(S) {\n  // The vat opens with the tinted cream on the left and the ivory on the\n  // right, the line between them wavering across the pins.\n  const c = S.c, ph = random() * 6.3;\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, edge = 32 + 6 * sin((y / H) * 2 * PI * 1.5 + ph);\n    for (let gx = 0; gx \u003c GW; gx++) c[gy * GW + gx] = sm(edge + 0.5 - (gx + 0.5) / 2);\n  }\n}\n\nfunction step(S, d, lim = 3) {\n  S.turnLen = TURN / S.speed;\n  S.clock += d * S.speed;\n  // Substeps keep the pins under 3 LEDs a step: one at Speed 2, two at 3.\n  const vmax = (S.lay.sp / 2) * 4 * PI / S.turnLen, ns = max(1, Math.ceil((vmax * d) / lim));\n  for (let i = 0; i \u003c ns; i++) {\n    advect(S, d / ns);\n    S.phase += d / ns / S.turnLen;\n    if (S.phase >= 1) {\n      S.phase -= 1;\n      S.turn++;\n      if (++S.since >= EVERY) (S.since = 0), dollop(S);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    c: new Float32Array(GN), c2: new Float32Array(GN), led: new Float32Array(N), hgt: new Float32Array(N),\n    P: new Float64Array(8), vx: 0, vy: 0, U: new Float32Array(VW * VH), V: new Float32Array(VW * VH), still: new Uint8Array(N), lay: layout(3), n: 3, hue: 0, speed: 2, gloss: 0.06,\n    turn: 0, phase: 0, since: 0, turnLen: 3, clock: 0, warm: false, tint: [0, 0, 0], ivory: [1, 0.95, 0.86],\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.gloss = cl(k[3], 0, 1);\n  const n = Math.round(cl(k[2], 3, 5));\n  if (n !== S.n) {\n    // The pins are unseen, so they simply take their new places; the turn\n    // under way goes on with the new pair.\n    S.n = n;\n    S.lay = layout(n);\n  }\n  if (!S.warm) {\n    // Open a turn and a half in, the first folds already drawn. The 4.5 s\n    // run in steps of up to 6 LEDs, 60 of them, about 0.3 s of work.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 30; i++) step(S, 0.15, 6);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) dollop(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, led = S.led, hgt = S.hgt, tint = S.tint, iv = S.ivory;\n  // The tint: lilac at 0. From coral to lime it is brought up to full\n  // brightness and its shading made shallower, as a darker peach reads brown\n  // and a darker butter khaki. Next to butter and lime the ivory turns to a\n  // cooler white, or the two creams would be one.\n  const h = S.hue + 0.76, hh = h - floor(h);\n  const warm = sm(hh / 0.05) * sm((0.3 - hh) / 0.06) + sm((hh - 0.96) / 0.04), yel = sm((hh - 0.08) / 0.05) * sm((0.32 - hh) / 0.05);\n  hsv(h, 0.46 + 0.08 * warm, 0.9 + 0.1 * warm, tint);\n  iv[0] = 1 - 0.03 * yel;\n  iv[1] = 0.95 + 0.02 * yel;\n  iv[2] = 0.86 + 0.13 * yel;\n  const deep = 1 - 0.45 * warm;\n  // Each LED averages its 2 x 2 fine cells, so stripes under an LED wide\n  // blend into the pastel between the two creams.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 2 * y * GW + 2 * x;\n      led[y * W + x] = 0.25 * (c[g] + c[g + 1] + c[g + GW] + c[g + GW + 1]);\n    }\n  // The surface: the tinted cream stands a little proud of the ivory, so\n  // every fold has two slopes, and a slow swell runs under both.\n  const t = S.clock;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0, wsum = 0;\n      for (let v = -1; v \u003c= 1; v++)\n        for (let u = -1; u \u003c= 1; u++) {\n          const xx = cl(x + u, 0, W - 1), yy = cl(y + v, 0, H - 1), w = u === 0 && v === 0 ? 4 : u === 0 || v === 0 ? 2 : 1;\n          s += led[yy * W + xx] * w;\n          wsum += w;\n        }\n      hgt[y * W + x] = (2.4 * s) / wsum + 0.5 * sin(x * 0.11 + y * 0.05 + t * 0.4) * sin(y * 0.07 - t * 0.3);\n    }\n  // The light comes from the upper left and drifts across and back every\n  // 20 s of turning; Gloss tightens the highlight and brightens it.\n  const gl = S.gloss, la = -2.3 + 0.6 * sin((2 * PI * t) / 20), le = 0.75;\n  const lx = cos(la) * cos(le), ly = sin(la) * cos(le), lz = sin(le);\n  const hx = lx, hy = ly, hz = lz + 1, hn = sqrt(hx * hx + hy * hy + hz * hz);\n  const ex = pow(2, 2.5 + 4 * gl), ks = 0.2 + 0.7 * gl, slope = 0.7 + 1.2 * gl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (hgt[y * W + min(x + 1, W - 1)] - hgt[y * W + max(x - 1, 0)]) * 0.5 * slope;\n      const gy = (hgt[min(y + 1, H - 1) * W + x] - hgt[max(y - 1, 0) * W + x]) * 0.5 * slope;\n      const nl = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * nl, ny = -gy * nl, nz = nl;\n      // A broad satin sheen lifts flat cream by about 0.12; a tight gloss\n      // does not, so the lift is put back by hand and the ivory keeps its\n      // level at any Gloss instead of going beige.\n      const diff = 1 - (0.09 - 0.1 * gl + 0.28 * (lz - (nx * lx + ny * ly + nz * lz))) * deep;\n      const spec = ks * pow(max(0, (nx * hx + ny * hy + nz * hz) / hn), ex);\n      const m = led[p];\n      const r = (iv[0] + (tint[0] - iv[0]) * m) * diff + spec;\n      const g = (iv[1] + (tint[1] - iv[1]) * m) * diff + spec;\n      const b = (iv[2] + (tint[2] - iv[2]) * m) * diff + spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower."},{"name":"Pins","min":3,"max":5,"about":"How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns."},{"name":"Gloss","min":0,"max":1,"about":"At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen."}],"start":[0,2,3,0.06],"measures":{"motion":0.1992,"detail":0.0229,"edges":0.0398,"complexity":1.5866,"coverage":1,"colour":0.2145,"drift":0.034},"knobResponse":[0.174,0.088,0.0927,0.0503]},{"slug":"talbot-carpet","title":"Talbot Carpet","family":"wave","round":32,"note":"좁은 슬릿 격자를 지난 빛의 세기를, 격자에서 멀어지는 거리를 세로로 두고 그려요. 슬릿 상이 한 탤벗 길이마다 그대로, 반 길이마다 반 주기 옆으로 되살아나고, 그 사이 분수 거리에서는 둘과 넷으로 갈라진 상과 곧은 빛줄기가 엇갈려요. 남색 골과 청록 바닥, 흰 방울이 1 LED 망점 위에서 1초에 15줄씩 올라가요.","idea":"Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.","buttons":"K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.","code":"// ===== Patternflow pattern =====\n// Title:   Talbot Carpet\n// Family:  wave\n// Idea:    Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Talbot effect (Henry Fox Talbot, 1836) and quantum carpets (Michael Berry, 1996), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4\n//\n// Knob 1: Hue. Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow.\n// Knob 2: Speed. How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds.\n// Knob 3: Slit. The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies.\n// Knob 4: Periods. How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter.\n// Buttons: K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.\n\nconst W = 64, H = 128, M = 256, R = 512;\nconst { floor, min, sin, cos, pow, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Share of the lit LEDs in the screen that go to beads: the brightest 14.5%\n// of each frame, which fixes the measured edges near 0.14.\nconst CUT = 0.855;\n\n// In-place radix-2 FFT with the + sign, so it sums c_n e^{+2 pi i n j / M}.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// psi(x, tau) = sum c_n exp(2 pi i (n x - n^2 tau)) for a slit of width w\n// centred on x = 0, 256 terms with a Gaussian roll-off, at R steps of tau\n// over one Talbot length. Each row keeps a running sum of |psi|^2 over one\n// period, so a column of any width is two lookups.\nfunction build(P) {\n  const w = P.w, c = new Float64Array(M), re = new Float64Array(M), im = new Float64Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    const n = k \u003c M / 2 ? k : k - M;\n    c[k] = (n === 0 ? w : sin(PI * n * w) / (PI * n)) * exp(-(n / 24) * (n / 24));\n  }\n  const S = P.sum;\n  for (let r = 0; r \u003c R; r++) {\n    for (let k = 0; k \u003c M; k++) {\n      const n = k \u003c M / 2 ? k : k - M;\n      // n^2 r is an integer, so the phase wraps exactly.\n      const ph = (-2 * PI * ((n * n * r) % R)) / R;\n      re[k] = c[k] * cos(ph);\n      im[k] = c[k] * sin(ph);\n    }\n    fft(re, im);\n    const o = r * (M + 1);\n    S[o] = 0;\n    for (let j = 0; j \u003c M; j++) S[o + j + 1] = S[o + j] + re[j] * re[j] + im[j] * im[j];\n  }\n  P.builtW = w;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Box blur, rows wrapping (the carpet is periodic across), columns clamped.\nfunction blur(src, dst, tmp, rad) {\n  const n = 2 * rad + 1;\n  for (let y = 0; y \u003c H; y++) {\n    let acc = 0;\n    for (let k = -rad; k \u003c= rad; k++) acc += src[y * W + ((k + W) % W)];\n    for (let x = 0; x \u003c W; x++) {\n      tmp[y * W + x] = acc / n;\n      acc += src[y * W + ((x + rad + 1) % W)] - src[y * W + ((x - rad + W) % W)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      let acc = 0;\n      for (let k = -rad; k \u003c= rad; k++) acc += tmp[cl(y + k, 0, H - 1) * W + x];\n      dst[y * W + x] = acc / n;\n    }\n}\n\nexport function setup(params) {\n  const N = W * H;\n  params.s = {\n    t: 0, hue: 0, speed: 2, w: 0.1, builtW: -1, per: 1,\n    sum: new Float32Array(R * (M + 1)), I: new Float32Array(N), G: new Float32Array(N), T: new Float32Array(N),\n    U: new Float32Array(N), Lv: new Int16Array(N), srt: new Float32Array(N / 2), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 1], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.w = round((0.1 + 0.35 * cl(k[2], 0, 1)) * 100) / 100;\n  P.per = cl(k[3], 1, 4);\n  if (P.w !== P.builtW) build(P);\n  P.t += d * P.speed * 0.06;\n  if (input.btnPressed && input.btnPressed[0]) P.t += 0.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { sum: S, I, G, T, U, Lv, srt, c } = P;\n  // Row y holds tau from t + y/128 to t + (y+1)/128: four table rows,\n  // averaged, and each LED the mean over its width of the period.\n  for (let y = 0; y \u003c H; y++) {\n    const ra = floor((P.t + y / H) * R), rb = Math.max(ra + 1, floor((P.t + (y + 1) / H) * R));\n    for (let x = 0; x \u003c W; x++) I[y * W + x] = 0;\n    for (let rr = ra; rr \u003c rb; rr++) {\n      const o = (((rr % R) + R) % R) * (M + 1);\n      const at = (u) => {\n        const q = floor(u / M), v = u - q * M, i = floor(v);\n        return q * S[o + M] + S[o + i] + (S[o + i + 1] - S[o + i]) * (v - i);\n      };\n      let prev = at((0.5 * M) | 0);\n      for (let x = 0; x \u003c W; x++) {\n        const u1 = (((x + 1) / W) * P.per + 0.5) * M, next = at(u1);\n        I[y * W + x] += (next - prev) / ((P.per * M) / W) / (rb - ra);\n        prev = next;\n      }\n    }\n  }\n  // The screen: LEDs with x + y odd carry a soft glow of the carpet, blurred\n  // so it never steps more than a few levels from one LED to the next. The\n  // others stand 40 above the darkest glow beside them, so every pair of\n  // neighbours differs by 40 or a little less, or they hold a bead at full\n  // brightness where the carpet is brightest.\n  blur(I, T, U, 2);\n  blur(T, G, U, 2);\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) srt[n++] = I[y * W + x];\n  srt.sort();\n  const hi = srt[floor(n * CUT)], top = srt[floor(n * 0.995)], mid = srt[n >> 1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = (y + 1) & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      Lv[p] = round(8 + 70 * cl(pow(G[p] / (2.2 * mid), 0.9), 0, 1));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = y & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      if (I[p] > hi) {\n        Lv[p] = 255;\n        continue;\n      }\n      let m = 255;\n      if (x > 0) m = min(m, Lv[p - 1]);\n      if (x \u003c W - 1) m = min(m, Lv[p + 1]);\n      if (y > 0) m = min(m, Lv[p - W]);\n      if (y \u003c H - 1) m = min(m, Lv[p + W]);\n      Lv[p] = m + 40;\n    }\n  // Colour carries the fine carpet at no cost to the screen: the canals\n  // deep and saturated, the floor paler and greener as it brightens.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, L = Lv[p];\n      if (L === 255) hsv(P.hue + 0.5, 0.35 * (1 - cl((I[p] - hi) / (top - hi), 0, 1)), 1, c);\n      else {\n        const t = cl(pow(I[p] / (2.5 * mid), 0.7), 0, 1);\n        hsv(P.hue + 0.64 - 0.14 * t, 1 - 0.5 * t, 1, c);\n      }\n      display.setPixel(x, y, round(c[0] * L), round(c[1] * L), round(c[2] * L));\n    }\n}\n","layer":{"id":"layer-talbot-carpet","type":"code","name":"talbot-carpet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Talbot Carpet\n// Family:  wave\n// Idea:    Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Talbot effect (Henry Fox Talbot, 1836) and quantum carpets (Michael Berry, 1996), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4\n//\n// Knob 1: Hue. Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow.\n// Knob 2: Speed. How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds.\n// Knob 3: Slit. The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies.\n// Knob 4: Periods. How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter.\n// Buttons: K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.\n\nconst W = 64, H = 128, M = 256, R = 512;\nconst { floor, min, sin, cos, pow, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Share of the lit LEDs in the screen that go to beads: the brightest 14.5%\n// of each frame, which fixes the measured edges near 0.14.\nconst CUT = 0.855;\n\n// In-place radix-2 FFT with the + sign, so it sums c_n e^{+2 pi i n j / M}.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// psi(x, tau) = sum c_n exp(2 pi i (n x - n^2 tau)) for a slit of width w\n// centred on x = 0, 256 terms with a Gaussian roll-off, at R steps of tau\n// over one Talbot length. Each row keeps a running sum of |psi|^2 over one\n// period, so a column of any width is two lookups.\nfunction build(P) {\n  const w = P.w, c = new Float64Array(M), re = new Float64Array(M), im = new Float64Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    const n = k \u003c M / 2 ? k : k - M;\n    c[k] = (n === 0 ? w : sin(PI * n * w) / (PI * n)) * exp(-(n / 24) * (n / 24));\n  }\n  const S = P.sum;\n  for (let r = 0; r \u003c R; r++) {\n    for (let k = 0; k \u003c M; k++) {\n      const n = k \u003c M / 2 ? k : k - M;\n      // n^2 r is an integer, so the phase wraps exactly.\n      const ph = (-2 * PI * ((n * n * r) % R)) / R;\n      re[k] = c[k] * cos(ph);\n      im[k] = c[k] * sin(ph);\n    }\n    fft(re, im);\n    const o = r * (M + 1);\n    S[o] = 0;\n    for (let j = 0; j \u003c M; j++) S[o + j + 1] = S[o + j] + re[j] * re[j] + im[j] * im[j];\n  }\n  P.builtW = w;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Box blur, rows wrapping (the carpet is periodic across), columns clamped.\nfunction blur(src, dst, tmp, rad) {\n  const n = 2 * rad + 1;\n  for (let y = 0; y \u003c H; y++) {\n    let acc = 0;\n    for (let k = -rad; k \u003c= rad; k++) acc += src[y * W + ((k + W) % W)];\n    for (let x = 0; x \u003c W; x++) {\n      tmp[y * W + x] = acc / n;\n      acc += src[y * W + ((x + rad + 1) % W)] - src[y * W + ((x - rad + W) % W)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      let acc = 0;\n      for (let k = -rad; k \u003c= rad; k++) acc += tmp[cl(y + k, 0, H - 1) * W + x];\n      dst[y * W + x] = acc / n;\n    }\n}\n\nexport function setup(params) {\n  const N = W * H;\n  params.s = {\n    t: 0, hue: 0, speed: 2, w: 0.1, builtW: -1, per: 1,\n    sum: new Float32Array(R * (M + 1)), I: new Float32Array(N), G: new Float32Array(N), T: new Float32Array(N),\n    U: new Float32Array(N), Lv: new Int16Array(N), srt: new Float32Array(N / 2), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 1], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.w = round((0.1 + 0.35 * cl(k[2], 0, 1)) * 100) / 100;\n  P.per = cl(k[3], 1, 4);\n  if (P.w !== P.builtW) build(P);\n  P.t += d * P.speed * 0.06;\n  if (input.btnPressed && input.btnPressed[0]) P.t += 0.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { sum: S, I, G, T, U, Lv, srt, c } = P;\n  // Row y holds tau from t + y/128 to t + (y+1)/128: four table rows,\n  // averaged, and each LED the mean over its width of the period.\n  for (let y = 0; y \u003c H; y++) {\n    const ra = floor((P.t + y / H) * R), rb = Math.max(ra + 1, floor((P.t + (y + 1) / H) * R));\n    for (let x = 0; x \u003c W; x++) I[y * W + x] = 0;\n    for (let rr = ra; rr \u003c rb; rr++) {\n      const o = (((rr % R) + R) % R) * (M + 1);\n      const at = (u) => {\n        const q = floor(u / M), v = u - q * M, i = floor(v);\n        return q * S[o + M] + S[o + i] + (S[o + i + 1] - S[o + i]) * (v - i);\n      };\n      let prev = at((0.5 * M) | 0);\n      for (let x = 0; x \u003c W; x++) {\n        const u1 = (((x + 1) / W) * P.per + 0.5) * M, next = at(u1);\n        I[y * W + x] += (next - prev) / ((P.per * M) / W) / (rb - ra);\n        prev = next;\n      }\n    }\n  }\n  // The screen: LEDs with x + y odd carry a soft glow of the carpet, blurred\n  // so it never steps more than a few levels from one LED to the next. The\n  // others stand 40 above the darkest glow beside them, so every pair of\n  // neighbours differs by 40 or a little less, or they hold a bead at full\n  // brightness where the carpet is brightest.\n  blur(I, T, U, 2);\n  blur(T, G, U, 2);\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) srt[n++] = I[y * W + x];\n  srt.sort();\n  const hi = srt[floor(n * CUT)], top = srt[floor(n * 0.995)], mid = srt[n >> 1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = (y + 1) & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      Lv[p] = round(8 + 70 * cl(pow(G[p] / (2.2 * mid), 0.9), 0, 1));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = y & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      if (I[p] > hi) {\n        Lv[p] = 255;\n        continue;\n      }\n      let m = 255;\n      if (x > 0) m = min(m, Lv[p - 1]);\n      if (x \u003c W - 1) m = min(m, Lv[p + 1]);\n      if (y > 0) m = min(m, Lv[p - W]);\n      if (y \u003c H - 1) m = min(m, Lv[p + W]);\n      Lv[p] = m + 40;\n    }\n  // Colour carries the fine carpet at no cost to the screen: the canals\n  // deep and saturated, the floor paler and greener as it brightens.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, L = Lv[p];\n      if (L === 255) hsv(P.hue + 0.5, 0.35 * (1 - cl((I[p] - hi) / (top - hi), 0, 1)), 1, c);\n      else {\n        const t = cl(pow(I[p] / (2.5 * mid), 0.7), 0, 1);\n        hsv(P.hue + 0.64 - 0.14 * t, 1 - 0.5 * t, 1, c);\n      }\n      display.setPixel(x, y, round(c[0] * L), round(c[1] * L), round(c[2] * L));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds."},{"name":"Slit","min":0,"max":1,"about":"The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies."},{"name":"Periods","min":1,"max":4,"about":"How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter."}],"start":[0,2,0,1],"measures":{"motion":0.9679,"detail":0.2277,"edges":0.1425,"complexity":1.3191,"coverage":0.9648,"colour":0.1367,"drift":0.088},"knobResponse":[0.1564,0.1417,0.1324,0.1293]},{"slug":"test-card","title":"Test Card","family":"glitch","round":1,"note":"텔레비전 컬러 바를, 수직 동기를 잃어 가는 수상기가 보여 주는 대로 그려요.","idea":"A television's colour bars, as a set that is losing its hold would show them.","buttons":"K1 tap tears the picture now.","code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","layer":{"id":"layer-test-card","type":"code","name":"test-card","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole set of bars round the colour wheel."},{"name":"Bursts","min":0.2,"max":6,"about":"How often the picture tears."},{"name":"Damage","min":0.15,"max":1,"about":"From a clean card with the odd twitch to bars torn apart and smeared."},{"name":"Roll","min":0,"max":1,"about":"The vertical hold: the picture starts to slip and roll."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.2635,"detail":0.0837,"edges":0.7844,"complexity":0.0808,"coverage":0.8476,"colour":0.6265,"drift":0.0606},"knobResponse":[0.3578,0.0535,0.0933,0.3676]},{"slug":"tetromino-well","title":"Tetromino Well","family":"algo","round":10,"note":"세운 패널이 너비 10칸, 높이 21칸의 테트리스 우물이에요. 지치지 않는 플레이어가 꼭대기에 기다리는 다음 조각을 보며 패널의 3분의 2 높이까지 쌓고, 오른쪽 한 줄을 비워 두었다가 긴 막대가 오면 네 줄을 한꺼번에 지워요. K1 을 누르면 긴 막대가 다음 조각으로 와요.","idea":"The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.","buttons":"K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.","code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","layer":{"id":"layer-tetromino-well","type":"code","name":"tetromino-well","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L."},{"name":"Speed","min":0.2,"max":3,"about":"How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one."},{"name":"Headroom","min":6,"max":18,"about":"The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor."},{"name":"Garbage","min":0,"max":1,"about":"The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it."}],"start":[0,2,6,0.06],"measures":{"motion":0.2184,"detail":0.0909,"edges":0.7088,"complexity":0.1224,"coverage":0.6512,"colour":0.4389,"drift":0.0999},"knobResponse":[0.2488,0.0464,0.2189,0.2009]},{"slug":"thermal","title":"Thermal","family":"flight","round":24,"note":"여름 오후의 밭 위에서 흰 글라이더가 열기류를 타고 타원을 그리며 맴돌아 올라가요. 말똥가리 둘이 더 좁게 같이 돌고, 꼭대기의 적운은 자라며 바닥이 어두워져요. 구름 바닥에 닿은 글라이더는 다음 열기류로 미끄러져 가고 아래에서 새 글라이더가 들어와요. K1 을 누르면 윈치가 글라이더 하나를 끌어올려요.","idea":"A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.","buttons":"K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.","code":"// ===== Patternflow pattern =====\n// Title:   Thermal\n// Family:  flight\n// Idea:    A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after thermal soaring under fair-weather cumulus over farmland\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1\n//\n// Knob 1: Hour. Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows.\n// Knob 2: Speed. At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower.\n// Knob 3: Gliders. One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up.\n// Knob 4: Wind. The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm.\n// Buttons: K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, round, pow, sign, PI } = Math;\nconst TAU = 2 * PI;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\nconst rnd = () => Math.random();\n// Rows: horizon, first field row, cloud base, where the thermal leaves the ground.\nconst [HOR, FY, YB, YG] = [97, 100, 36, 116];\n// The ploughed field the thermal comes off: its column and its distance.\nconst [SRCX, DSRC] = [29, 9.6];\n// We look up a little, so a level circle is a thin ellipse; the craft are drawn flatter so a banked wing does not stand on end.\nconst SE = sin(0.3);\nconst [BE, BC] = [sin(0.1), cos(0.1)];\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\nconst fbm = (x, y, s) => 0.55 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.15 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Pasture, beans, stubble, wheat, hay and plough in midday sun; 1 marks rows running away from us.\nconst CROP = [[70, 150, 45, 0], [38, 106, 36, 1], [216, 184, 94, 1], [198, 160, 66, 0], [142, 178, 74, 0], [96, 62, 40, 1]];\nconst PICK = [0, 0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Tapered strokes in the craft's axes: forward, right, up, twice, then two radii.\nconst GLIDER = [[3.6, 0, -0.1, -4.8, 0, 0.15, 0.85, 0.45], [0.6, 0, 0.25, 0.25, -9, 0.85, 0.75, 0.45], [0.6, 0, 0.25, 0.25, 9, 0.85, 0.75, 0.45], [-4.2, 0, 0.1, -4.9, 0, 2.4, 0.55, 0.45], [-4.9, -2.6, 2.4, -4.9, 2.6, 2.4, 0.45, 0.45]];\nconst BUZZ = [[1.3, 0, 0, -1.3, 0, 0, 0.6, 0.45], [0.2, 0, 0.1, -0.3, -3.7, 0.75, 0.8, 0.45], [0.2, 0, 0.1, -0.3, 3.7, 0.75, 0.8, 0.45], [-1.2, 0, 0, -2.5, 0, 0.1, 0.45, 0.65]];\n\n// A cumulus as puffs over a flat base: each puff's place (u across, v up), its radius r and when in its growth it appears.\nfunction puffs() {\n  const L = [];\n  const add = (u, v, r, t0) => L.push({ u: u + (rnd() - 0.5) * 0.14, v: v + (rnd() - 0.5) * 0.08, r: r * (0.88 + 0.24 * rnd()), t0, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 5; i++) add(-0.76 + i * 0.38, 0.2, 0.34, i === 2 ? 0 : 0.03 + 0.12 * rnd());\n  for (let i = 0; i \u003c 4; i++) add(-0.5 + i * 0.33, 0.45, 0.33, 0.08 + 0.17 * rnd());\n  for (let i = 0; i \u003c 3; i++) add(-0.3 + i * 0.3, 0.68, 0.3, 0.3 + 0.2 * rnd());\n  for (let i = 0; i \u003c 2; i++) add((rnd() - 0.5) * 0.4, 0.86, 0.26, 0.55 + 0.15 * rnd());\n  return L;\n}\nconst newCloud = (x, a) => ({ x, a, g: 0, al: 1, det: false, p: puffs(), sd: floor(rnd() * 999) });\n\n// Fields lie in strips at distance D (row = HOR + 180 / D), each cut into fields across.\nfunction buildFields(S) {\n  const strips = [], trees = [], us = ((SRCX - 32) * DSRC) / 64, hw = (11 * DSRC) / 64;\n  for (let D = 5.6; D \u003c 66; ) {\n    const D2 = D * (1.22 + 0.12 * rnd());\n    const wid = () => ((12 + 18 * rnd()) * pow(6 / D, 0.35) * D) / 64;\n    let b = [];\n    for (let u = -0.62 * D2 - rnd() * wid(); u \u003c 0.62 * D2 + 0.3; u += wid()) b.push(u);\n    const src = D \u003c= DSRC && DSRC \u003c D2;\n    if (src) {\n      b = b.filter((u) => u \u003c us - hw - 0.3 || u > us + hw + 0.3);\n      b.push(us - hw, us + hw);\n      b.sort((p, q) => p - q);\n    }\n    const t = [];\n    for (let j = 0; j \u003c b.length - 1; j++) {\n      let k;\n      do k = PICK[floor(rnd() * PICK.length)];\n      while (j && k === t[j - 1]);\n      t.push(k);\n    }\n    if (src) t[b.indexOf(us - hw)] = 5;\n    strips.push({ d0: D, d1: D2, b, t, hh: 0.12 + 0.08 * rnd(), i: strips.length });\n    // Trees in the hedge along each strip's near edge, and at some corners.\n    for (let j = 0; j \u003c 2; j++) if (rnd() \u003c 0.6) trees.push({ u: (rnd() - 0.5) * 1.1 * D, D: D + 0.05, rc: 0.2 + 0.14 * rnd() });\n    for (let j = 1; j \u003c b.length - 1; j++) if (rnd() \u003c 0.2) trees.push({ u: b[j], D: D + 0.05, rc: 0.2 + 0.12 * rnd() });\n    D = D2;\n  }\n  for (const tr of trees) tr.hc = tr.rc * 1.5 + 0.15;\n  S.strips = strips;\n  S.trees = trees.sort((p, q) => q.D - p.D);\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N);\n  const S = { t: 0, bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), A: F(), fu: F(), fd: F(), fn: F(), gl: [], down: [], clouds: [], far: [], spawn: [0, 0], cable: null, bb: [1e9, 1e9, -1, -1] };\n  buildFields(S);\n  for (let y = FY; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      S.fd[p] = 180 / (y + 0.5 - HOR);\n      S.fu[p] = ((x + 0.5 - 32) * S.fd[p]) / 64;\n      S.fn[p] = fbm(x * 0.15, y * 0.3, 11);\n    }\n  for (let i = 0; i \u003c 3; i++) S.far.push({ x: 8 + i * 24 + rnd() * 10, yb: 87 - i * 5 - rnd() * 2, hw: 5 + 2.5 * i + rnd() * 2, ht: 3 + i + rnd() * 1.5, p: puffs(), sd: floor(rnd() * 999), m: 0.35, e: 44 });\n  S.shad = [{ x: 6, D: 7.4, r: 19, rd: 2.6, m: 0.9, e: 62 }, { x: 50, D: 16, r: 15, rd: 5.5, m: 0.9, e: 60 }];\n  params.s = S;\n}\n\n// The thermal's centre at a row: it leans downwind with height and wanders a little.\nconst colX = (S, y) => SRCX + S.lean * (YG - y) + 1.5 * sin(S.t * 0.21);\nconst sunLight = (h, k = mix(1, 0.9, h)) => [mix(1, 1.16, h) * k, mix(1, 0.86, h) * k, mix(1, 0.56, h) * k];\nconst SHADE = [0.42, 0.47, 0.6];\nconst hazeOf = (h) => mix3([176, 202, 222], [236, 186, 122], h);\nfunction skyAt(x, y, h) {\n  const top = mix3([14, 50, 150], [30, 52, 128], h), mid = mix3([44, 108, 206], [70, 104, 178], h), t = y / 96;\n  const c = t \u003c 0.66 ? mix3(top, mid, sstep(0, 0.66, t)) : mix3(mid, hazeOf(h), sstep(0.66, 1, t));\n  const gw = pow(h, 1.5) * exp(-x / 24) * exp(-abs(y - 78) / 36);\n  return [c[0] + 110 * gw, c[1] + 64 * gw, c[2] + 14 * gw];\n}\n\n// The ground seen at a point of the panel: hedges, fields, their shadows, and the haze.\nfunction fieldAt(S, x, y, sun, Lsh, haze) {\n  const D = 180 / (y - HOR), u = ((x - 32) * D) / 64, st = S.strips;\n  let k = 0;\n  while (k \u003c st.length - 1 && D >= st[k].d1) k++;\n  let alb = null;\n  let lit = 1;\n  // The hedge on a strip's near edge hides the ground just behind it.\n  for (let j = k; j >= 0 && st[j].d0 > D * 0.8; j--) {\n    const s = st[j];\n    if (y >= HOR + (180 - 64 * s.hh * (0.7 + 0.6 * noise(u * 2.6, s.i * 9, 3))) / s.d0) {\n      const n = 0.8 + 0.4 * noise(u * 6, y, 5);\n      alb = [34 * n, 78 * n, 30 * n];\n      lit = 0.85;\n      break;\n    }\n  }\n  if (!alb) {\n    const s = st[k], b = s.b;\n    let j = 0;\n    while (j \u003c b.length - 2 && u >= b[j + 1]) j++;\n    const hwu = ((0.8 * pow(6 / D, 0.4) + 0.25) * D) / 64;\n    if (abs(u - b[j]) \u003c hwu || abs(u - b[j + 1]) \u003c hwu) {\n      alb = [30, 70, 28];\n      lit = 0.7;\n    } else {\n      const c = CROP[s.t[j]], tx = c[3] ? 0.97 + 0.17 * sin(u * TAU * 6.5) : 0.86 + 0.28 * fbm(u * 2.5, D * 0.7, s.t[j] + j);\n      alb = [c[0] * tx, c[1] * tx, c[2] * tx];\n      // Shadows of the hedges left and in front, and of the trees.\n      if (u - b[j] \u003c s.hh * Lsh * 0.85 || D - s.d0 \u003c s.hh * Lsh * 0.4) lit = 0;\n      else\n        for (const tr of S.trees) {\n          const du = u - tr.u - tr.hc * Lsh * 0.85, dd = D - tr.D - tr.hc * Lsh * 0.45;\n          if (abs(dd) > 3 + Lsh) continue;\n          const al = (du * 0.86 + dd * 0.5) / (tr.rc * (1 + 0.55 * Lsh)), pe = (-du * 0.5 + dd * 0.86) / (tr.rc * 1.8);\n          if (al * al + pe * pe \u003c 1) {\n            lit = 0;\n            break;\n          }\n        }\n    }\n  }\n  const hz = 0.55 * sstep(5, 75, D);\n  return [0, 1, 2].map((c) => mix(alb[c] * mix(SHADE[c], sun[c], lit), haze[c], hz));\n}\n\nfunction paint(S) {\n  const h = S.hour, sun = sunLight(h), haze = hazeOf(h), Lsh = 0.35 + 4.2 * pow(h, 1.6), bg = S.bg, ridgeF = mix3(haze, [64, 96, 116], 0.38);\n  const ridgeN = mix3(haze, [52 * sun[0], 98 * sun[1], 54 * sun[2]], 0.58);\n  for (let x = 0; x \u003c W; x++) {\n    const farT = 83 + 5 * fbm(x * 0.045, 1.3, 21), nearT = 91.5 + 3 * fbm(x * 0.09, 4.1, 22) - 1.5 * sstep(0.55, 0.8, noise(x * 0.5, 0, 23));\n    for (let y = 0; y \u003c H; y++) {\n      const q = (y * W + x) * 3;\n      bg[q] = bg[q + 1] = bg[q + 2] = 0;\n      // The open sky is smooth enough for one sample.\n      for (let k = y + 1 \u003c farT ? 3 : 0; k \u003c 4; k++) {\n        const xs = x + 0.25 + 0.5 * (k & 1), ys = y + 0.25 + 0.5 * (k >> 1);\n        let c;\n        if (ys >= FY) c = fieldAt(S, xs, ys, sun, Lsh, haze);\n        else if (ys >= nearT) c = ridgeN.map((v) => v * (0.84 + 0.3 * fbm(x * 0.35, ys * 0.9, 24)));\n        else if (ys >= farT) c = ridgeF;\n        else c = skyAt(xs, ys, h);\n        for (let i = 0; i \u003c 3; i++) bg[q + i] += y + 1 \u003c farT ? c[i] : c[i] / 4;\n      }\n    }\n  }\n  // Tree crowns, far ones first, lit from the sun's side.\n  for (const tr of S.trees) {\n    const cx = 32 + (64 * tr.u) / tr.D, cy = HOR + (180 - 64 * tr.hc) / tr.D, R = (64 * tr.rc) / tr.D, hz = 0.55 * sstep(5, 75, tr.D);\n    for (let y = max(FY - 4, floor(cy - R - 1)); y \u003c= min(H - 1, cy + R + 1); y++)\n      for (let x = max(0, floor(cx - R - 1)); x \u003c= min(W - 1, cx + R + 1); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - cy) / R, a = clamp((1 - sqrt(dx * dx + dy * dy)) * R + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const l = clamp(0.45 - 0.7 * dx - 0.4 * dy, 0, 1), n = 0.85 + 0.3 * hash(x, y, 31), q = (y * W + x) * 3;\n        [40, 94, 38].forEach((al, c) => (bg[q + c] += (mix(al * n * mix(SHADE[c], sun[c] * 1.1, l), haze[c], hz) - bg[q + c]) * a));\n      }\n  }\n  S.painted = h;\n}\n\nfunction addCraft(S, kind, st, X, yc, dir) {\n  const R = kind ? 5.5 + rnd() : 11.5 + rnd();\n  const o = { kind, st, X, yc, Z: -dir * R, R, dir, th: (-dir * PI) / 2, bank: st === \"climb\" ? 0.5 + 0.12 * kind : 0, pitch: 0, off: 0, s: 0, w: kind ? 1.75 + 0.3 * rnd() : 1.05, c0: kind ? 1.9 : 2.4 };\n  S.gl.push(o);\n  return o;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hour = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2, kg = clamp(k[2], 1, 4), n = (S.n = round(kg)), wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    S.wind = wind;\n    S.ks = 1 + 0.14 * (kg - 1);\n    S.lean = wind * 0.22;\n    for (let i = 0; i \u003c n; i++) addCraft(S, 0, \"climb\", 0, n === 1 ? 72 : 82 - (i * 36) / (n - 1), 1).th = rnd() * TAU;\n    for (const y of [86, 62]) addCraft(S, 1, \"climb\", 0, y, 1).th = rnd() * TAU;\n    for (let i = 0; i \u003c 56; i++) S.down.push({ y: YB + rnd() * (YG - YB), a: rnd() * TAU, r: 0.5 + rnd() * 5.5, v: 3 + rnd() * 3, tw: rnd() * TAU });\n    // The cloud of the last thermal is drifting off as the next one starts.\n    S.clouds.push(Object.assign(newCloud(colX(S, YB) + (wind \u003c 0 ? -24 : 24), 26), { det: true, al: 0.9 }), newCloud(colX(S, YB), 1.5));\n  }\n  const d = dt * tempo;\n  S.t += d;\n  S.wind += (wind - S.wind) * min(1, dt * 2);\n  S.ks += (1 + 0.14 * (kg - 1) - S.ks) * min(1, dt * 2);\n  S.lean = S.wind * 0.22;\n  const vd = (S.wind \u003c 0 ? -2 : 2) + 6 * S.wind;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const dir = rnd() \u003c 0.5 ? 1 : -1, o = addCraft(S, 0, \"launch\", dir > 0 ? 4 + rnd() * 10 : 50 + rnd() * 10, 0, dir);\n    Object.assign(o, { yc: 121 + o.Z * SE, X0: o.X, cable: true });\n  }\n\n  // The thermal's cloud builds for 26 s, then drifts off and thins as a new one starts.\n  for (const c of S.clouds) {\n    c.a += d;\n    c.g = 1 - exp(-c.a / 6.5);\n    if (c.det) {\n      c.x += vd * d;\n      c.al -= d / 8;\n    } else {\n      c.x += (colX(S, YB) - c.x) * min(1, d * 0.6);\n      if (c.a > 26) {\n        c.det = true;\n        S.clouds.push(newCloud(colX(S, YB), 0));\n      }\n    }\n  }\n  S.clouds = S.clouds.filter((c) => c.al > 0);\n  // Far cumulus and the shadows of clouds out of sight drift with the wind and come round again.\n  for (const f of S.far.concat(S.shad)) {\n    f.x += vd * f.m * d;\n    if ((f.x - 32) * vd > 0 && abs(f.x - 32) > f.e) f.x = 32 - sign(f.x - 32) * (f.e - 1);\n  }\n\n  // Gliders and buzzards: launched, gliding in, circling up, or gliding off.\n  for (const o of S.gl) {\n    const cx = colX(S, o.yc) + (o.kind ? 2 : 0);\n    if (o.st === \"launch\") {\n      o.s += d;\n      const v = 16 * min(1, o.s / 0.5);\n      o.pitch = o.cable ? 0.95 * sstep(0.5, 1.1, o.s) : max(0, o.pitch - d * 1.2);\n      o.X += o.dir * v * cos(o.pitch) * d;\n      o.yc -= v * sin(o.pitch) * d;\n      if (o.cable && o.yc \u003c 88) {\n        o.cable = false;\n        S.cable = { x: o.X + o.dir * 3, y: o.yc - o.Z * SE - 2.5, xw: o.X0 + o.dir * 58, t: 0 };\n      }\n      if (!o.cable && o.pitch \u003c= 0) {\n        o.st = \"climb\";\n        o.off = o.X - cx;\n      }\n    } else if (o.st === \"climb\") {\n      const th0 = o.th;\n      o.th += o.w * d;\n      o.off *= exp(-d * 0.35);\n      o.yc -= o.c0 * (1 + 0.45 * cos(o.th + 0.8)) * d;\n      o.bank += ((o.kind ? 0.62 : 0.5) - o.bank) * min(1, d * 2);\n      if (o.yc \u003c YB + (o.kind ? 18 : 8)) o.leave = true;\n      // Done, it straightens up the next time it flies across the panel.\n      if (o.leave && cos(th0) * cos(o.th) \u003c= 0) {\n        o.st = \"out\";\n        o.th = sin(o.th) > 0 ? PI / 2 : -PI / 2;\n        o.dir = -sign(sin(o.th));\n      }\n      o.X = cx + o.off + o.R * cos(o.th);\n      o.Z = o.R * sin(o.th);\n    } else {\n      o.X += o.dir * o.R * o.w * d;\n      o.yc += (o.st === \"out\" ? 0.8 : 0.4) * d;\n      o.bank *= exp(-d * 3);\n      if (o.st === \"in\" && o.dir * (o.X - cx) >= 0) o.st = \"climb\";\n      if (abs(o.X - 32) > 56) o.gone = true;\n    }\n  }\n  S.gl = S.gl.filter((o) => !o.gone);\n  // Too many: the highest leaves early. Too few: a newcomer glides in low.\n  for (const kind of [0, 1]) {\n    const act = S.gl.filter((o) => o.kind === kind && o.st !== \"out\");\n    const want = kind ? 2 : n;\n    S.spawn[kind] -= d;\n    if (act.length \u003c want && S.spawn[kind] \u003c= 0) {\n      const dir = rnd() \u003c 0.5 ? 1 : -1;\n      addCraft(S, kind, \"in\", 32 - dir * 46, (kind ? 84 : 86) + rnd() * 6, dir);\n      S.spawn[kind] = kind ? 1.5 + rnd() * 2 : 2.5;\n    } else if (act.length > want) {\n      const hi = act.filter((o) => o.st === \"climb\" && !o.leave).sort((p, q) => p.yc - q.yc)[0];\n      if (hi) hi.leave = true;\n    }\n  }\n  const cb = S.cable;\n  if (cb) {\n    cb.y += 9 * d;\n    if ((cb.t += d) > 2) S.cable = null;\n  }\n  // Thistledown rides the thermal up from the ploughed field.\n  for (const p of S.down) {\n    p.y -= p.v * d;\n    p.a += (1.6 / (1 + p.r * 0.3)) * d;\n    if (p.y \u003c YB + 1) {\n      p.y = YG - 3 + rnd() * 5;\n      p.r = 0.5 + rnd() * 5.5;\n    }\n  }\n}\n\n// A tapered stroke into the coverage buffer, growing the box drawn into.\nfunction stroke(S, ax, ay, bx, by, ra, rb) {\n  const { A, bb } = S, x0 = max(0, floor(min(ax, bx) - 2)), x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2)), y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  if (x0 > x1 || y0 > y1) return;\n  bb[0] = min(bb[0], x0);\n  bb[1] = min(bb[1], y0);\n  bb[2] = max(bb[2], x1);\n  bb[3] = max(bb[3], y1);\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = clamp((px * dx + py * dy) / ll, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      const a = clamp(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1), i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\nfunction flush(S, col, alpha) {\n  const { A, buf, bb } = S;\n  for (let y = bb[1]; y \u003c= bb[3]; y++)\n    for (let x = bb[0]; x \u003c= bb[2]; x++) {\n      const i = y * W + x, a = min(1, A[i] * alpha);\n      if (a \u003c= 0) continue;\n      A[i] = 0;\n      for (let c = 0; c \u003c 3; c++) buf[i * 3 + c] += (col[c] - buf[i * 3 + c]) * a;\n    }\n  bb[0] = bb[1] = 1e9;\n  bb[2] = bb[3] = -1;\n}\n\n// A craft in its own frame (heading, pitch, bank), seen from below and to the side.\nfunction craft(S, o, h) {\n  const cl = o.st === \"climb\", hx = cl ? -sin(o.th) : o.dir, hz = cl ? cos(o.th) : 0, cp = cos(o.pitch), sp = sin(o.pitch);\n  const F = [hx * cp, sp, hz * cp], U0 = [-hx * sp, cp, -hz * sp], R0 = [-hz, 0, hx], cb = cos(o.bank * 0.7), sb = sin(o.bank * 0.7);\n  const U = [U0[0] * cb + R0[0] * sb, U0[1] * cb, U0[2] * cb + R0[2] * sb], R = [R0[0] * cb - U0[0] * sb, -U0[1] * sb, R0[2] * cb - U0[2] * sb];\n  const sy = o.yc - o.Z * SE;\n  const P = (f, r, u) => [o.X + F[0] * f + R[0] * r + U[0] * u, sy - (F[1] * f + R[1] * r + U[1] * u) * BC - (F[2] * f + R[2] * r + U[2] * u) * BE];\n  for (const m of o.kind ? BUZZ : GLIDER) {\n    const a = P(m[0], m[1], m[2]), b = P(m[3], m[4], m[5]);\n    stroke(S, a[0], a[1], b[0], b[1], m[6], m[7]);\n  }\n  // From below we see the shaded underside; banked towards us, the sunlit top.\n  const top = sstep(-0.3, 0.4, -U[1] * BE + U[2] * BC);\n  if (o.kind) return flush(S, [mix(58, 86, top), mix(42, 62, top), mix(30, 40, top)], 1);\n  const f = 0.84 + 0.16 * top;\n  flush(S, mix3([236, 240, 246], [255, 226, 176], h).map((v) => v * f), 1.35);\n  // Once a turn the wing tilts to the sun and flashes.\n  const gx = mix(-0.35, -0.8, h), gz = mix(1, 0.6, h);\n  const gl = (sstep(0.92, 1, ((R0[0] * gx + R0[2] * gz) / sqrt(gx * gx + gz * gz)) * sign(o.bank || 1)) * abs(o.bank)) / 0.5;\n  if (gl \u003c 0.02) return;\n  const w = P(0.4, 3.5 * sign(o.bank || 1), 0.6);\n  for (let y = max(0, floor(w[1] - 5)); y \u003c= min(H - 1, w[1] + 5); y++)\n    for (let x = max(0, floor(w[0] - 5)); x \u003c= min(W - 1, w[0] + 5); x++) {\n      const ex = abs(x + 0.5 - w[0]), ey = abs(y + 0.5 - w[1]);\n      const v = gl * (exp(-sqrt(ex * ex + ey * ey) / 1.3) + 0.5 * exp(-min(ex, ey) * 2.5 - max(ex, ey) / 2.5)), q = (y * W + x) * 3;\n      S.buf[q] += 255 * v;\n      S.buf[q + 1] += 246 * v;\n      S.buf[q + 2] += mix(225, 170, h) * v;\n    }\n}\n\nfunction drawCloud(S, c, hw, ht, g, yb, al, haze) {\n  const { buf, t } = S, h = S.hour, B = [], lean = S.lean * 0.6;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9;\n  for (const p of c.p) {\n    const gr = sstep(p.t0, p.t0 + 0.25, g);\n    if (gr \u003c= 0.02) continue;\n    const r = p.r * hw * gr * (1 + 0.05 * sin(t * 0.7 + p.ph)), bx = c.x + p.u * hw + lean * p.v * ht + 0.04 * hw * sin(t * 0.5 + p.ph);\n    const by = yb - p.v * ht - 0.03 * ht * sin(t * 0.4 + p.ph * 2);\n    B.push(bx, by, r);\n    x0 = min(x0, bx - r);\n    x1 = max(x1, bx + r);\n    y0 = min(y0, by - r);\n  }\n  const L = [mix(-0.45, -0.85, h), mix(-0.7, -0.28, h), 0.5], ll = sqrt(L[0] * L[0] + L[1] * L[1] + L[2] * L[2]);\n  const litC = mix3([252, 252, 250], [255, 214, 150], h);\n  const shC = mix3([150, 162, 192], [150, 124, 146], h).map((v) => v * (1 - 0.2 * g * (c.det ? 0.5 : 1)));\n  const baseC = mix3([126, 132, 152], [108, 90, 100], h).map((v) => v * mix(1, 0.78, g));\n  const hz = hazeOf(h);\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, yb + 1); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, x1 + 2); x++) {\n      const px = x + 0.5, py = y + 0.5;\n      // The normal blends the puffs nearby, weighted by how deep inside each the pixel is.\n      let best = -9, r = 1, sw = 0, nx = 0, ny = 0;\n      for (let i = 0; i \u003c B.length; i += 3) {\n        const dx = (px - B[i]) / B[i + 2], dy = (py - B[i + 1]) / B[i + 2], v = 1 - sqrt(dx * dx + dy * dy);\n        if (v \u003c -0.5) continue;\n        if (v > best) {\n          best = v;\n          r = B[i + 2];\n        }\n        const w = exp(7 * v);\n        sw += w;\n        nx += dx * w;\n        ny += dy * w;\n      }\n      if (best \u003c -0.4) continue;\n      // Cauliflower edges; a cloud that is dying frays from the edges in.\n      const n = noise(px * 0.32, py * 0.32 - t * 0.12, c.sd);\n      const a = clamp((best + 0.32 * (n - 0.5) - (1 - al) * 0.8) * r * 0.7, 0, 1) * clamp(yb + 0.7 - py + 0.6 * noise(px * 0.4, 1, c.sd), 0, 1) * sqrt(al);\n      if (a \u003c= 0) continue;\n      nx /= sw;\n      ny /= sw;\n      const nz = sqrt(max(0, 1 - nx * nx - ny * ny));\n      const lw = clamp(((nx * L[0] + ny * L[1] + nz * L[2]) / ll + 0.45) / 1.45 + 0.3 * (n - 0.5), 0, 1) * (0.55 + 0.45 * clamp((yb - py) / (0.45 * ht), 0, 1));\n      const bs = sstep(yb - 2.6, yb - 0.6, py), q = (y * W + x) * 3;\n      for (let k = 0; k \u003c 3; k++) buf[q + k] += (mix(mix(mix(shC[k], litC[k], lw), baseC[k], bs), hz[k], haze) - buf[q + k]) * a;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.painted === undefined || abs(S.painted - S.hour) > 0.003) paint(S);\n  const h = S.hour, buf = S.buf;\n  buf.set(S.bg);\n\n  // Cloud shadows: each thermal cloud's, pushed off its field by the sun, and two from clouds out of sight.\n  const sh = [];\n  for (const c of S.clouds) {\n    const ru = (((8 + 18 * c.g) * S.ks * DSRC) / 64) * 0.95 * (c.det ? sqrt(c.al) : 1);\n    sh.push(((c.x - 29 + 30 * h) * DSRC) / 64, DSRC * (1.04 + 1.1 * h), ru, ru * 1.3 + 0.5, c.al * (0.55 + 0.45 * c.g));\n  }\n  for (const s of S.shad) sh.push(((s.x - 32) * s.D) / 64, s.D, (s.r * s.D) / 64, s.rd, 1);\n  const sc = [0.46, 0.5, 0.62];\n  for (let p = FY * W; p \u003c N; p++) {\n    let m = 0;\n    for (let i = 0; i \u003c sh.length; i += 5) {\n      const du = (S.fu[p] - sh[i]) / sh[i + 2], dv = (S.fd[p] - sh[i + 1]) / sh[i + 3], q = du * du + dv * dv;\n      if (q \u003c 2.2) m = max(m, sstep(1.05, 0.6, sqrt(q) + 0.35 * (S.fn[p] - 0.5)) * sh[i + 4]);\n    }\n    if (m > 0) for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= mix(1, sc[c], m);\n  }\n\n  // Far cumulus along the horizon, then the clouds the thermal builds.\n  for (const f of S.far) drawCloud(S, f, f.hw, f.ht, 1, f.yb, 0.9, 0.5);\n  for (const c of S.clouds) drawCloud(S, c, (8 + 18 * c.g) * S.ks, (6 + 26 * c.g) * S.ks, c.g, YB, c.det ? c.al : 1, 0);\n\n  // Thistledown catching the sun as it rises.\n  const dc = mix3([240, 240, 228], [255, 222, 160], h), nd = 26 + round((10 * (S.ks - 1)) / 0.14);\n  for (let i = 0; i \u003c nd; i++) {\n    const p = S.down[i], x = round(colX(S, p.y) + p.r * cos(p.a) + 0.8 * sin(S.t * 1.7 + p.tw) - 0.5), y = round(p.y + p.r * sin(p.a) * SE - 0.5);\n    if (x \u003c 0 || x >= W) continue;\n    const a = (0.45 + 0.4 * sin(S.t * 3 + p.tw * 5)) * sstep(YB, YB + 8, p.y) * sstep(YG + 2, YG - 6, p.y);\n    for (let k = 0, q = (y * W + x) * 3; k \u003c 3; k++) buf[q + k] += (dc[k] - buf[q + k]) * a;\n  }\n\n  // The winch cable, and the one that falls on its red parachute after release.\n  const dark = [36, 34, 38];\n  for (const o of S.gl)\n    if (o.cable) {\n      stroke(S, o.X + o.dir * 3 * cos(o.pitch), o.yc - o.Z * SE - 3 * sin(o.pitch), o.X0 + o.dir * 58, 118, 0.18, 0.18);\n      flush(S, dark, 0.75);\n    }\n  const cb = S.cable;\n  if (cb) {\n    stroke(S, cb.x, cb.y, cb.xw, 118, 0.18, 0.18);\n    flush(S, dark, 0.75 * (1 - cb.t / 2));\n    stroke(S, cb.x, cb.y - 1, cb.x, cb.y - 1, 0.7, 0.7);\n    flush(S, [230, 50, 40], 1 - cb.t / 2);\n  }\n  // Gliders and buzzards, the far side of their circles first.\n  for (const o of S.gl.slice().sort((p, q) => p.Z - q.Z)) craft(S, o, h);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","layer":{"id":"layer-thermal","type":"code","name":"thermal","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Thermal\n// Family:  flight\n// Idea:    A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after thermal soaring under fair-weather cumulus over farmland\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1\n//\n// Knob 1: Hour. Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows.\n// Knob 2: Speed. At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower.\n// Knob 3: Gliders. One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up.\n// Knob 4: Wind. The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm.\n// Buttons: K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, round, pow, sign, PI } = Math;\nconst TAU = 2 * PI;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\nconst rnd = () => Math.random();\n// Rows: horizon, first field row, cloud base, where the thermal leaves the ground.\nconst [HOR, FY, YB, YG] = [97, 100, 36, 116];\n// The ploughed field the thermal comes off: its column and its distance.\nconst [SRCX, DSRC] = [29, 9.6];\n// We look up a little, so a level circle is a thin ellipse; the craft are drawn flatter so a banked wing does not stand on end.\nconst SE = sin(0.3);\nconst [BE, BC] = [sin(0.1), cos(0.1)];\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\nconst fbm = (x, y, s) => 0.55 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.15 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Pasture, beans, stubble, wheat, hay and plough in midday sun; 1 marks rows running away from us.\nconst CROP = [[70, 150, 45, 0], [38, 106, 36, 1], [216, 184, 94, 1], [198, 160, 66, 0], [142, 178, 74, 0], [96, 62, 40, 1]];\nconst PICK = [0, 0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Tapered strokes in the craft's axes: forward, right, up, twice, then two radii.\nconst GLIDER = [[3.6, 0, -0.1, -4.8, 0, 0.15, 0.85, 0.45], [0.6, 0, 0.25, 0.25, -9, 0.85, 0.75, 0.45], [0.6, 0, 0.25, 0.25, 9, 0.85, 0.75, 0.45], [-4.2, 0, 0.1, -4.9, 0, 2.4, 0.55, 0.45], [-4.9, -2.6, 2.4, -4.9, 2.6, 2.4, 0.45, 0.45]];\nconst BUZZ = [[1.3, 0, 0, -1.3, 0, 0, 0.6, 0.45], [0.2, 0, 0.1, -0.3, -3.7, 0.75, 0.8, 0.45], [0.2, 0, 0.1, -0.3, 3.7, 0.75, 0.8, 0.45], [-1.2, 0, 0, -2.5, 0, 0.1, 0.45, 0.65]];\n\n// A cumulus as puffs over a flat base: each puff's place (u across, v up), its radius r and when in its growth it appears.\nfunction puffs() {\n  const L = [];\n  const add = (u, v, r, t0) => L.push({ u: u + (rnd() - 0.5) * 0.14, v: v + (rnd() - 0.5) * 0.08, r: r * (0.88 + 0.24 * rnd()), t0, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 5; i++) add(-0.76 + i * 0.38, 0.2, 0.34, i === 2 ? 0 : 0.03 + 0.12 * rnd());\n  for (let i = 0; i \u003c 4; i++) add(-0.5 + i * 0.33, 0.45, 0.33, 0.08 + 0.17 * rnd());\n  for (let i = 0; i \u003c 3; i++) add(-0.3 + i * 0.3, 0.68, 0.3, 0.3 + 0.2 * rnd());\n  for (let i = 0; i \u003c 2; i++) add((rnd() - 0.5) * 0.4, 0.86, 0.26, 0.55 + 0.15 * rnd());\n  return L;\n}\nconst newCloud = (x, a) => ({ x, a, g: 0, al: 1, det: false, p: puffs(), sd: floor(rnd() * 999) });\n\n// Fields lie in strips at distance D (row = HOR + 180 / D), each cut into fields across.\nfunction buildFields(S) {\n  const strips = [], trees = [], us = ((SRCX - 32) * DSRC) / 64, hw = (11 * DSRC) / 64;\n  for (let D = 5.6; D \u003c 66; ) {\n    const D2 = D * (1.22 + 0.12 * rnd());\n    const wid = () => ((12 + 18 * rnd()) * pow(6 / D, 0.35) * D) / 64;\n    let b = [];\n    for (let u = -0.62 * D2 - rnd() * wid(); u \u003c 0.62 * D2 + 0.3; u += wid()) b.push(u);\n    const src = D \u003c= DSRC && DSRC \u003c D2;\n    if (src) {\n      b = b.filter((u) => u \u003c us - hw - 0.3 || u > us + hw + 0.3);\n      b.push(us - hw, us + hw);\n      b.sort((p, q) => p - q);\n    }\n    const t = [];\n    for (let j = 0; j \u003c b.length - 1; j++) {\n      let k;\n      do k = PICK[floor(rnd() * PICK.length)];\n      while (j && k === t[j - 1]);\n      t.push(k);\n    }\n    if (src) t[b.indexOf(us - hw)] = 5;\n    strips.push({ d0: D, d1: D2, b, t, hh: 0.12 + 0.08 * rnd(), i: strips.length });\n    // Trees in the hedge along each strip's near edge, and at some corners.\n    for (let j = 0; j \u003c 2; j++) if (rnd() \u003c 0.6) trees.push({ u: (rnd() - 0.5) * 1.1 * D, D: D + 0.05, rc: 0.2 + 0.14 * rnd() });\n    for (let j = 1; j \u003c b.length - 1; j++) if (rnd() \u003c 0.2) trees.push({ u: b[j], D: D + 0.05, rc: 0.2 + 0.12 * rnd() });\n    D = D2;\n  }\n  for (const tr of trees) tr.hc = tr.rc * 1.5 + 0.15;\n  S.strips = strips;\n  S.trees = trees.sort((p, q) => q.D - p.D);\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N);\n  const S = { t: 0, bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), A: F(), fu: F(), fd: F(), fn: F(), gl: [], down: [], clouds: [], far: [], spawn: [0, 0], cable: null, bb: [1e9, 1e9, -1, -1] };\n  buildFields(S);\n  for (let y = FY; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      S.fd[p] = 180 / (y + 0.5 - HOR);\n      S.fu[p] = ((x + 0.5 - 32) * S.fd[p]) / 64;\n      S.fn[p] = fbm(x * 0.15, y * 0.3, 11);\n    }\n  for (let i = 0; i \u003c 3; i++) S.far.push({ x: 8 + i * 24 + rnd() * 10, yb: 87 - i * 5 - rnd() * 2, hw: 5 + 2.5 * i + rnd() * 2, ht: 3 + i + rnd() * 1.5, p: puffs(), sd: floor(rnd() * 999), m: 0.35, e: 44 });\n  S.shad = [{ x: 6, D: 7.4, r: 19, rd: 2.6, m: 0.9, e: 62 }, { x: 50, D: 16, r: 15, rd: 5.5, m: 0.9, e: 60 }];\n  params.s = S;\n}\n\n// The thermal's centre at a row: it leans downwind with height and wanders a little.\nconst colX = (S, y) => SRCX + S.lean * (YG - y) + 1.5 * sin(S.t * 0.21);\nconst sunLight = (h, k = mix(1, 0.9, h)) => [mix(1, 1.16, h) * k, mix(1, 0.86, h) * k, mix(1, 0.56, h) * k];\nconst SHADE = [0.42, 0.47, 0.6];\nconst hazeOf = (h) => mix3([176, 202, 222], [236, 186, 122], h);\nfunction skyAt(x, y, h) {\n  const top = mix3([14, 50, 150], [30, 52, 128], h), mid = mix3([44, 108, 206], [70, 104, 178], h), t = y / 96;\n  const c = t \u003c 0.66 ? mix3(top, mid, sstep(0, 0.66, t)) : mix3(mid, hazeOf(h), sstep(0.66, 1, t));\n  const gw = pow(h, 1.5) * exp(-x / 24) * exp(-abs(y - 78) / 36);\n  return [c[0] + 110 * gw, c[1] + 64 * gw, c[2] + 14 * gw];\n}\n\n// The ground seen at a point of the panel: hedges, fields, their shadows, and the haze.\nfunction fieldAt(S, x, y, sun, Lsh, haze) {\n  const D = 180 / (y - HOR), u = ((x - 32) * D) / 64, st = S.strips;\n  let k = 0;\n  while (k \u003c st.length - 1 && D >= st[k].d1) k++;\n  let alb = null;\n  let lit = 1;\n  // The hedge on a strip's near edge hides the ground just behind it.\n  for (let j = k; j >= 0 && st[j].d0 > D * 0.8; j--) {\n    const s = st[j];\n    if (y >= HOR + (180 - 64 * s.hh * (0.7 + 0.6 * noise(u * 2.6, s.i * 9, 3))) / s.d0) {\n      const n = 0.8 + 0.4 * noise(u * 6, y, 5);\n      alb = [34 * n, 78 * n, 30 * n];\n      lit = 0.85;\n      break;\n    }\n  }\n  if (!alb) {\n    const s = st[k], b = s.b;\n    let j = 0;\n    while (j \u003c b.length - 2 && u >= b[j + 1]) j++;\n    const hwu = ((0.8 * pow(6 / D, 0.4) + 0.25) * D) / 64;\n    if (abs(u - b[j]) \u003c hwu || abs(u - b[j + 1]) \u003c hwu) {\n      alb = [30, 70, 28];\n      lit = 0.7;\n    } else {\n      const c = CROP[s.t[j]], tx = c[3] ? 0.97 + 0.17 * sin(u * TAU * 6.5) : 0.86 + 0.28 * fbm(u * 2.5, D * 0.7, s.t[j] + j);\n      alb = [c[0] * tx, c[1] * tx, c[2] * tx];\n      // Shadows of the hedges left and in front, and of the trees.\n      if (u - b[j] \u003c s.hh * Lsh * 0.85 || D - s.d0 \u003c s.hh * Lsh * 0.4) lit = 0;\n      else\n        for (const tr of S.trees) {\n          const du = u - tr.u - tr.hc * Lsh * 0.85, dd = D - tr.D - tr.hc * Lsh * 0.45;\n          if (abs(dd) > 3 + Lsh) continue;\n          const al = (du * 0.86 + dd * 0.5) / (tr.rc * (1 + 0.55 * Lsh)), pe = (-du * 0.5 + dd * 0.86) / (tr.rc * 1.8);\n          if (al * al + pe * pe \u003c 1) {\n            lit = 0;\n            break;\n          }\n        }\n    }\n  }\n  const hz = 0.55 * sstep(5, 75, D);\n  return [0, 1, 2].map((c) => mix(alb[c] * mix(SHADE[c], sun[c], lit), haze[c], hz));\n}\n\nfunction paint(S) {\n  const h = S.hour, sun = sunLight(h), haze = hazeOf(h), Lsh = 0.35 + 4.2 * pow(h, 1.6), bg = S.bg, ridgeF = mix3(haze, [64, 96, 116], 0.38);\n  const ridgeN = mix3(haze, [52 * sun[0], 98 * sun[1], 54 * sun[2]], 0.58);\n  for (let x = 0; x \u003c W; x++) {\n    const farT = 83 + 5 * fbm(x * 0.045, 1.3, 21), nearT = 91.5 + 3 * fbm(x * 0.09, 4.1, 22) - 1.5 * sstep(0.55, 0.8, noise(x * 0.5, 0, 23));\n    for (let y = 0; y \u003c H; y++) {\n      const q = (y * W + x) * 3;\n      bg[q] = bg[q + 1] = bg[q + 2] = 0;\n      // The open sky is smooth enough for one sample.\n      for (let k = y + 1 \u003c farT ? 3 : 0; k \u003c 4; k++) {\n        const xs = x + 0.25 + 0.5 * (k & 1), ys = y + 0.25 + 0.5 * (k >> 1);\n        let c;\n        if (ys >= FY) c = fieldAt(S, xs, ys, sun, Lsh, haze);\n        else if (ys >= nearT) c = ridgeN.map((v) => v * (0.84 + 0.3 * fbm(x * 0.35, ys * 0.9, 24)));\n        else if (ys >= farT) c = ridgeF;\n        else c = skyAt(xs, ys, h);\n        for (let i = 0; i \u003c 3; i++) bg[q + i] += y + 1 \u003c farT ? c[i] : c[i] / 4;\n      }\n    }\n  }\n  // Tree crowns, far ones first, lit from the sun's side.\n  for (const tr of S.trees) {\n    const cx = 32 + (64 * tr.u) / tr.D, cy = HOR + (180 - 64 * tr.hc) / tr.D, R = (64 * tr.rc) / tr.D, hz = 0.55 * sstep(5, 75, tr.D);\n    for (let y = max(FY - 4, floor(cy - R - 1)); y \u003c= min(H - 1, cy + R + 1); y++)\n      for (let x = max(0, floor(cx - R - 1)); x \u003c= min(W - 1, cx + R + 1); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - cy) / R, a = clamp((1 - sqrt(dx * dx + dy * dy)) * R + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const l = clamp(0.45 - 0.7 * dx - 0.4 * dy, 0, 1), n = 0.85 + 0.3 * hash(x, y, 31), q = (y * W + x) * 3;\n        [40, 94, 38].forEach((al, c) => (bg[q + c] += (mix(al * n * mix(SHADE[c], sun[c] * 1.1, l), haze[c], hz) - bg[q + c]) * a));\n      }\n  }\n  S.painted = h;\n}\n\nfunction addCraft(S, kind, st, X, yc, dir) {\n  const R = kind ? 5.5 + rnd() : 11.5 + rnd();\n  const o = { kind, st, X, yc, Z: -dir * R, R, dir, th: (-dir * PI) / 2, bank: st === \"climb\" ? 0.5 + 0.12 * kind : 0, pitch: 0, off: 0, s: 0, w: kind ? 1.75 + 0.3 * rnd() : 1.05, c0: kind ? 1.9 : 2.4 };\n  S.gl.push(o);\n  return o;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hour = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2, kg = clamp(k[2], 1, 4), n = (S.n = round(kg)), wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    S.wind = wind;\n    S.ks = 1 + 0.14 * (kg - 1);\n    S.lean = wind * 0.22;\n    for (let i = 0; i \u003c n; i++) addCraft(S, 0, \"climb\", 0, n === 1 ? 72 : 82 - (i * 36) / (n - 1), 1).th = rnd() * TAU;\n    for (const y of [86, 62]) addCraft(S, 1, \"climb\", 0, y, 1).th = rnd() * TAU;\n    for (let i = 0; i \u003c 56; i++) S.down.push({ y: YB + rnd() * (YG - YB), a: rnd() * TAU, r: 0.5 + rnd() * 5.5, v: 3 + rnd() * 3, tw: rnd() * TAU });\n    // The cloud of the last thermal is drifting off as the next one starts.\n    S.clouds.push(Object.assign(newCloud(colX(S, YB) + (wind \u003c 0 ? -24 : 24), 26), { det: true, al: 0.9 }), newCloud(colX(S, YB), 1.5));\n  }\n  const d = dt * tempo;\n  S.t += d;\n  S.wind += (wind - S.wind) * min(1, dt * 2);\n  S.ks += (1 + 0.14 * (kg - 1) - S.ks) * min(1, dt * 2);\n  S.lean = S.wind * 0.22;\n  const vd = (S.wind \u003c 0 ? -2 : 2) + 6 * S.wind;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const dir = rnd() \u003c 0.5 ? 1 : -1, o = addCraft(S, 0, \"launch\", dir > 0 ? 4 + rnd() * 10 : 50 + rnd() * 10, 0, dir);\n    Object.assign(o, { yc: 121 + o.Z * SE, X0: o.X, cable: true });\n  }\n\n  // The thermal's cloud builds for 26 s, then drifts off and thins as a new one starts.\n  for (const c of S.clouds) {\n    c.a += d;\n    c.g = 1 - exp(-c.a / 6.5);\n    if (c.det) {\n      c.x += vd * d;\n      c.al -= d / 8;\n    } else {\n      c.x += (colX(S, YB) - c.x) * min(1, d * 0.6);\n      if (c.a > 26) {\n        c.det = true;\n        S.clouds.push(newCloud(colX(S, YB), 0));\n      }\n    }\n  }\n  S.clouds = S.clouds.filter((c) => c.al > 0);\n  // Far cumulus and the shadows of clouds out of sight drift with the wind and come round again.\n  for (const f of S.far.concat(S.shad)) {\n    f.x += vd * f.m * d;\n    if ((f.x - 32) * vd > 0 && abs(f.x - 32) > f.e) f.x = 32 - sign(f.x - 32) * (f.e - 1);\n  }\n\n  // Gliders and buzzards: launched, gliding in, circling up, or gliding off.\n  for (const o of S.gl) {\n    const cx = colX(S, o.yc) + (o.kind ? 2 : 0);\n    if (o.st === \"launch\") {\n      o.s += d;\n      const v = 16 * min(1, o.s / 0.5);\n      o.pitch = o.cable ? 0.95 * sstep(0.5, 1.1, o.s) : max(0, o.pitch - d * 1.2);\n      o.X += o.dir * v * cos(o.pitch) * d;\n      o.yc -= v * sin(o.pitch) * d;\n      if (o.cable && o.yc \u003c 88) {\n        o.cable = false;\n        S.cable = { x: o.X + o.dir * 3, y: o.yc - o.Z * SE - 2.5, xw: o.X0 + o.dir * 58, t: 0 };\n      }\n      if (!o.cable && o.pitch \u003c= 0) {\n        o.st = \"climb\";\n        o.off = o.X - cx;\n      }\n    } else if (o.st === \"climb\") {\n      const th0 = o.th;\n      o.th += o.w * d;\n      o.off *= exp(-d * 0.35);\n      o.yc -= o.c0 * (1 + 0.45 * cos(o.th + 0.8)) * d;\n      o.bank += ((o.kind ? 0.62 : 0.5) - o.bank) * min(1, d * 2);\n      if (o.yc \u003c YB + (o.kind ? 18 : 8)) o.leave = true;\n      // Done, it straightens up the next time it flies across the panel.\n      if (o.leave && cos(th0) * cos(o.th) \u003c= 0) {\n        o.st = \"out\";\n        o.th = sin(o.th) > 0 ? PI / 2 : -PI / 2;\n        o.dir = -sign(sin(o.th));\n      }\n      o.X = cx + o.off + o.R * cos(o.th);\n      o.Z = o.R * sin(o.th);\n    } else {\n      o.X += o.dir * o.R * o.w * d;\n      o.yc += (o.st === \"out\" ? 0.8 : 0.4) * d;\n      o.bank *= exp(-d * 3);\n      if (o.st === \"in\" && o.dir * (o.X - cx) >= 0) o.st = \"climb\";\n      if (abs(o.X - 32) > 56) o.gone = true;\n    }\n  }\n  S.gl = S.gl.filter((o) => !o.gone);\n  // Too many: the highest leaves early. Too few: a newcomer glides in low.\n  for (const kind of [0, 1]) {\n    const act = S.gl.filter((o) => o.kind === kind && o.st !== \"out\");\n    const want = kind ? 2 : n;\n    S.spawn[kind] -= d;\n    if (act.length \u003c want && S.spawn[kind] \u003c= 0) {\n      const dir = rnd() \u003c 0.5 ? 1 : -1;\n      addCraft(S, kind, \"in\", 32 - dir * 46, (kind ? 84 : 86) + rnd() * 6, dir);\n      S.spawn[kind] = kind ? 1.5 + rnd() * 2 : 2.5;\n    } else if (act.length > want) {\n      const hi = act.filter((o) => o.st === \"climb\" && !o.leave).sort((p, q) => p.yc - q.yc)[0];\n      if (hi) hi.leave = true;\n    }\n  }\n  const cb = S.cable;\n  if (cb) {\n    cb.y += 9 * d;\n    if ((cb.t += d) > 2) S.cable = null;\n  }\n  // Thistledown rides the thermal up from the ploughed field.\n  for (const p of S.down) {\n    p.y -= p.v * d;\n    p.a += (1.6 / (1 + p.r * 0.3)) * d;\n    if (p.y \u003c YB + 1) {\n      p.y = YG - 3 + rnd() * 5;\n      p.r = 0.5 + rnd() * 5.5;\n    }\n  }\n}\n\n// A tapered stroke into the coverage buffer, growing the box drawn into.\nfunction stroke(S, ax, ay, bx, by, ra, rb) {\n  const { A, bb } = S, x0 = max(0, floor(min(ax, bx) - 2)), x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2)), y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  if (x0 > x1 || y0 > y1) return;\n  bb[0] = min(bb[0], x0);\n  bb[1] = min(bb[1], y0);\n  bb[2] = max(bb[2], x1);\n  bb[3] = max(bb[3], y1);\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = clamp((px * dx + py * dy) / ll, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      const a = clamp(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1), i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\nfunction flush(S, col, alpha) {\n  const { A, buf, bb } = S;\n  for (let y = bb[1]; y \u003c= bb[3]; y++)\n    for (let x = bb[0]; x \u003c= bb[2]; x++) {\n      const i = y * W + x, a = min(1, A[i] * alpha);\n      if (a \u003c= 0) continue;\n      A[i] = 0;\n      for (let c = 0; c \u003c 3; c++) buf[i * 3 + c] += (col[c] - buf[i * 3 + c]) * a;\n    }\n  bb[0] = bb[1] = 1e9;\n  bb[2] = bb[3] = -1;\n}\n\n// A craft in its own frame (heading, pitch, bank), seen from below and to the side.\nfunction craft(S, o, h) {\n  const cl = o.st === \"climb\", hx = cl ? -sin(o.th) : o.dir, hz = cl ? cos(o.th) : 0, cp = cos(o.pitch), sp = sin(o.pitch);\n  const F = [hx * cp, sp, hz * cp], U0 = [-hx * sp, cp, -hz * sp], R0 = [-hz, 0, hx], cb = cos(o.bank * 0.7), sb = sin(o.bank * 0.7);\n  const U = [U0[0] * cb + R0[0] * sb, U0[1] * cb, U0[2] * cb + R0[2] * sb], R = [R0[0] * cb - U0[0] * sb, -U0[1] * sb, R0[2] * cb - U0[2] * sb];\n  const sy = o.yc - o.Z * SE;\n  const P = (f, r, u) => [o.X + F[0] * f + R[0] * r + U[0] * u, sy - (F[1] * f + R[1] * r + U[1] * u) * BC - (F[2] * f + R[2] * r + U[2] * u) * BE];\n  for (const m of o.kind ? BUZZ : GLIDER) {\n    const a = P(m[0], m[1], m[2]), b = P(m[3], m[4], m[5]);\n    stroke(S, a[0], a[1], b[0], b[1], m[6], m[7]);\n  }\n  // From below we see the shaded underside; banked towards us, the sunlit top.\n  const top = sstep(-0.3, 0.4, -U[1] * BE + U[2] * BC);\n  if (o.kind) return flush(S, [mix(58, 86, top), mix(42, 62, top), mix(30, 40, top)], 1);\n  const f = 0.84 + 0.16 * top;\n  flush(S, mix3([236, 240, 246], [255, 226, 176], h).map((v) => v * f), 1.35);\n  // Once a turn the wing tilts to the sun and flashes.\n  const gx = mix(-0.35, -0.8, h), gz = mix(1, 0.6, h);\n  const gl = (sstep(0.92, 1, ((R0[0] * gx + R0[2] * gz) / sqrt(gx * gx + gz * gz)) * sign(o.bank || 1)) * abs(o.bank)) / 0.5;\n  if (gl \u003c 0.02) return;\n  const w = P(0.4, 3.5 * sign(o.bank || 1), 0.6);\n  for (let y = max(0, floor(w[1] - 5)); y \u003c= min(H - 1, w[1] + 5); y++)\n    for (let x = max(0, floor(w[0] - 5)); x \u003c= min(W - 1, w[0] + 5); x++) {\n      const ex = abs(x + 0.5 - w[0]), ey = abs(y + 0.5 - w[1]);\n      const v = gl * (exp(-sqrt(ex * ex + ey * ey) / 1.3) + 0.5 * exp(-min(ex, ey) * 2.5 - max(ex, ey) / 2.5)), q = (y * W + x) * 3;\n      S.buf[q] += 255 * v;\n      S.buf[q + 1] += 246 * v;\n      S.buf[q + 2] += mix(225, 170, h) * v;\n    }\n}\n\nfunction drawCloud(S, c, hw, ht, g, yb, al, haze) {\n  const { buf, t } = S, h = S.hour, B = [], lean = S.lean * 0.6;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9;\n  for (const p of c.p) {\n    const gr = sstep(p.t0, p.t0 + 0.25, g);\n    if (gr \u003c= 0.02) continue;\n    const r = p.r * hw * gr * (1 + 0.05 * sin(t * 0.7 + p.ph)), bx = c.x + p.u * hw + lean * p.v * ht + 0.04 * hw * sin(t * 0.5 + p.ph);\n    const by = yb - p.v * ht - 0.03 * ht * sin(t * 0.4 + p.ph * 2);\n    B.push(bx, by, r);\n    x0 = min(x0, bx - r);\n    x1 = max(x1, bx + r);\n    y0 = min(y0, by - r);\n  }\n  const L = [mix(-0.45, -0.85, h), mix(-0.7, -0.28, h), 0.5], ll = sqrt(L[0] * L[0] + L[1] * L[1] + L[2] * L[2]);\n  const litC = mix3([252, 252, 250], [255, 214, 150], h);\n  const shC = mix3([150, 162, 192], [150, 124, 146], h).map((v) => v * (1 - 0.2 * g * (c.det ? 0.5 : 1)));\n  const baseC = mix3([126, 132, 152], [108, 90, 100], h).map((v) => v * mix(1, 0.78, g));\n  const hz = hazeOf(h);\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, yb + 1); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, x1 + 2); x++) {\n      const px = x + 0.5, py = y + 0.5;\n      // The normal blends the puffs nearby, weighted by how deep inside each the pixel is.\n      let best = -9, r = 1, sw = 0, nx = 0, ny = 0;\n      for (let i = 0; i \u003c B.length; i += 3) {\n        const dx = (px - B[i]) / B[i + 2], dy = (py - B[i + 1]) / B[i + 2], v = 1 - sqrt(dx * dx + dy * dy);\n        if (v \u003c -0.5) continue;\n        if (v > best) {\n          best = v;\n          r = B[i + 2];\n        }\n        const w = exp(7 * v);\n        sw += w;\n        nx += dx * w;\n        ny += dy * w;\n      }\n      if (best \u003c -0.4) continue;\n      // Cauliflower edges; a cloud that is dying frays from the edges in.\n      const n = noise(px * 0.32, py * 0.32 - t * 0.12, c.sd);\n      const a = clamp((best + 0.32 * (n - 0.5) - (1 - al) * 0.8) * r * 0.7, 0, 1) * clamp(yb + 0.7 - py + 0.6 * noise(px * 0.4, 1, c.sd), 0, 1) * sqrt(al);\n      if (a \u003c= 0) continue;\n      nx /= sw;\n      ny /= sw;\n      const nz = sqrt(max(0, 1 - nx * nx - ny * ny));\n      const lw = clamp(((nx * L[0] + ny * L[1] + nz * L[2]) / ll + 0.45) / 1.45 + 0.3 * (n - 0.5), 0, 1) * (0.55 + 0.45 * clamp((yb - py) / (0.45 * ht), 0, 1));\n      const bs = sstep(yb - 2.6, yb - 0.6, py), q = (y * W + x) * 3;\n      for (let k = 0; k \u003c 3; k++) buf[q + k] += (mix(mix(mix(shC[k], litC[k], lw), baseC[k], bs), hz[k], haze) - buf[q + k]) * a;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.painted === undefined || abs(S.painted - S.hour) > 0.003) paint(S);\n  const h = S.hour, buf = S.buf;\n  buf.set(S.bg);\n\n  // Cloud shadows: each thermal cloud's, pushed off its field by the sun, and two from clouds out of sight.\n  const sh = [];\n  for (const c of S.clouds) {\n    const ru = (((8 + 18 * c.g) * S.ks * DSRC) / 64) * 0.95 * (c.det ? sqrt(c.al) : 1);\n    sh.push(((c.x - 29 + 30 * h) * DSRC) / 64, DSRC * (1.04 + 1.1 * h), ru, ru * 1.3 + 0.5, c.al * (0.55 + 0.45 * c.g));\n  }\n  for (const s of S.shad) sh.push(((s.x - 32) * s.D) / 64, s.D, (s.r * s.D) / 64, s.rd, 1);\n  const sc = [0.46, 0.5, 0.62];\n  for (let p = FY * W; p \u003c N; p++) {\n    let m = 0;\n    for (let i = 0; i \u003c sh.length; i += 5) {\n      const du = (S.fu[p] - sh[i]) / sh[i + 2], dv = (S.fd[p] - sh[i + 1]) / sh[i + 3], q = du * du + dv * dv;\n      if (q \u003c 2.2) m = max(m, sstep(1.05, 0.6, sqrt(q) + 0.35 * (S.fn[p] - 0.5)) * sh[i + 4]);\n    }\n    if (m > 0) for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= mix(1, sc[c], m);\n  }\n\n  // Far cumulus along the horizon, then the clouds the thermal builds.\n  for (const f of S.far) drawCloud(S, f, f.hw, f.ht, 1, f.yb, 0.9, 0.5);\n  for (const c of S.clouds) drawCloud(S, c, (8 + 18 * c.g) * S.ks, (6 + 26 * c.g) * S.ks, c.g, YB, c.det ? c.al : 1, 0);\n\n  // Thistledown catching the sun as it rises.\n  const dc = mix3([240, 240, 228], [255, 222, 160], h), nd = 26 + round((10 * (S.ks - 1)) / 0.14);\n  for (let i = 0; i \u003c nd; i++) {\n    const p = S.down[i], x = round(colX(S, p.y) + p.r * cos(p.a) + 0.8 * sin(S.t * 1.7 + p.tw) - 0.5), y = round(p.y + p.r * sin(p.a) * SE - 0.5);\n    if (x \u003c 0 || x >= W) continue;\n    const a = (0.45 + 0.4 * sin(S.t * 3 + p.tw * 5)) * sstep(YB, YB + 8, p.y) * sstep(YG + 2, YG - 6, p.y);\n    for (let k = 0, q = (y * W + x) * 3; k \u003c 3; k++) buf[q + k] += (dc[k] - buf[q + k]) * a;\n  }\n\n  // The winch cable, and the one that falls on its red parachute after release.\n  const dark = [36, 34, 38];\n  for (const o of S.gl)\n    if (o.cable) {\n      stroke(S, o.X + o.dir * 3 * cos(o.pitch), o.yc - o.Z * SE - 3 * sin(o.pitch), o.X0 + o.dir * 58, 118, 0.18, 0.18);\n      flush(S, dark, 0.75);\n    }\n  const cb = S.cable;\n  if (cb) {\n    stroke(S, cb.x, cb.y, cb.xw, 118, 0.18, 0.18);\n    flush(S, dark, 0.75 * (1 - cb.t / 2));\n    stroke(S, cb.x, cb.y - 1, cb.x, cb.y - 1, 0.7, 0.7);\n    flush(S, [230, 50, 40], 1 - cb.t / 2);\n  }\n  // Gliders and buzzards, the far side of their circles first.\n  for (const o of S.gl.slice().sort((p, q) => p.Z - q.Z)) craft(S, o, h);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower."},{"name":"Gliders","min":1,"max":4,"about":"One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up."},{"name":"Wind","min":-1,"max":1,"about":"The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm."}],"start":[0,2,1,0.06],"measures":{"motion":0.0272,"detail":0.0308,"edges":0.2402,"complexity":1.2348,"coverage":0.9999,"colour":0.3714,"drift":0.0371},"knobResponse":[0.1132,0.0554,0.0527,0.073]},{"slug":"thomson-problem","title":"Thomson Problem","family":"physics","round":34,"note":"천천히 도는 구 위에서 같은 전하 100개가 서로 밀어 거의 삼각형인 격자로 앉아요. 이웃이 여섯인 전하는 가운데가 옅은 하늘색으로, 오일러 공식이 늘 열둘을 남기는 다섯 이웃 전하는 금색으로 빛나고, 일곱 이웃 전하가 생기면 자홍색이에요. K3 을 480 까지 올리면 열둘이 5-7-5 흉터로 자라고, K1 을 누르면 전하가 흩어졌다가 다시 격자로 앉아요.","idea":"Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.","buttons":"K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.","code":"// ===== Patternflow pattern =====\n// Title:   Thomson Problem\n// Family:  physics\n// Idea:    Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Thomson problem (J. J. Thomson, 1904), with the scars of Bowick, Nelson and Travesset (2000), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1\n//\n// Knob 1: Hue. Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue.\n// Knob 2: Speed. How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds.\n// Knob 3: Charges. 100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them.\n// Knob 4: Heat. A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander.\n// Buttons: K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5, RS = 29;\nconst NMIN = 100, NMAX = 480;\n// Sixfold, fivefold and sevenfold charges: hue offset, saturation at the\n// rim and at the centre, and peak level.\nconst TYPES = [\n  [0, 1, 0.4, 215],\n  [0.58, 1, 0.45, 250],\n  [0.3, 1, 0.4, 240],\n];\n// The glow's sigma in LEDs, or a fifth of the lattice spacing where that is less.\nconst SIG = 2.15;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Lattice spacing on the unit sphere: each charge holds (sqrt3/2) a^2 of the\n// 4 pi of surface.\nconst spacing = (n) => sqrt((8 * PI) / (sqrt(3) * n));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * log(u)) * cos(2 * PI * v);\n}\n\nfunction scatter(X, from, to) {\n  for (let i = from; i \u003c to; i++) {\n    const z = 2 * random() - 1, f = 2 * PI * random(), r = sqrt(1 - z * z);\n    X[3 * i] = r * cos(f);\n    X[3 * i + 1] = r * sin(f);\n    X[3 * i + 2] = z;\n  }\n}\n\n// One step of projected gradient descent on E = sum 1/r_ij, with momentum\n// beta. The step is 0.15 a^3; plain descent at 0.25 a^3 rang and never\n// settled. No charge moves more than a fifth of the spacing in one step, so a\n// fresh scatter, where two charges can sit almost on top of each other, stays\n// calm. Heat adds a random kick of up to 0.075 a per step.\nfunction relax(S, kick, beta) {\n  const { X, F, M } = S, n = S.n;\n  F.fill(0, 0, 3 * n);\n  for (let i = 0; i \u003c n; i++) {\n    const xi = X[3 * i], yi = X[3 * i + 1], zi = X[3 * i + 2];\n    let fx = 0, fy = 0, fz = 0;\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = xi - X[3 * j], dy = yi - X[3 * j + 1], dz = zi - X[3 * j + 2];\n      const r2 = dx * dx + dy * dy + dz * dz + 1e-9, q = 1 / (r2 * sqrt(r2));\n      fx += dx * q;\n      fy += dy * q;\n      fz += dz * q;\n      F[3 * j] -= dx * q;\n      F[3 * j + 1] -= dy * q;\n      F[3 * j + 2] -= dz * q;\n    }\n    F[3 * i] += fx;\n    F[3 * i + 1] += fy;\n    F[3 * i + 2] += fz;\n  }\n  const a = spacing(n), eta = 0.15 * a * a * a, cap = 0.2 * a, k = kick * a;\n  for (let i = 0; i \u003c n; i++) {\n    const o = 3 * i, x = X[o], y = X[o + 1], z = X[o + 2];\n    let fx = F[o], fy = F[o + 1], fz = F[o + 2];\n    const d = fx * x + fy * y + fz * z;\n    fx = beta * M[o] + eta * (fx - d * x);\n    fy = beta * M[o + 1] + eta * (fy - d * y);\n    fz = beta * M[o + 2] + eta * (fz - d * z);\n    const e = fx * x + fy * y + fz * z;\n    fx -= e * x;\n    fy -= e * y;\n    fz -= e * z;\n    const m = sqrt(fx * fx + fy * fy + fz * fz);\n    if (m > cap) {\n      fx *= cap / m;\n      fy *= cap / m;\n      fz *= cap / m;\n    }\n    M[o] = fx;\n    M[o + 1] = fy;\n    M[o + 2] = fz;\n    if (k > 0) {\n      fx += k * gauss();\n      fy += k * gauss();\n      fz += k * gauss();\n    }\n    const nx = x + fx, ny = y + fy, nz = z + fz, l = 1 / sqrt(nx * nx + ny * ny + nz * nz);\n    X[o] = nx * l;\n    X[o + 1] = ny * l;\n    X[o + 2] = nz * l;\n  }\n}\n\nfunction energy(X, n) {\n  let e = 0;\n  for (let i = 0; i \u003c n; i++)\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = X[3 * i] - X[3 * j], dy = X[3 * i + 1] - X[3 * j + 1], dz = X[3 * i + 2] - X[3 * j + 2];\n      e += 1 / sqrt(dx * dx + dy * dy + dz * dz);\n    }\n  return e;\n}\n\n// The Delaunay triangulation of points on a sphere is their convex hull.\n// Incremental hull: each new point removes the faces it sees and joins the\n// horizon around them to itself. E maps a directed edge u->v to its face.\nfunction hull(S) {\n  const P = S.U, n = S.n, { fa, fb, fc, fx, fy, fz, fd, vis, E } = S;\n  let nf = 0;\n  const add = (a, b, c) => {\n    const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n    const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n    const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n    const x = uy * vz - uz * vy, y = uz * vx - ux * vz, z = ux * vy - uy * vx;\n    fa[nf] = a;\n    fb[nf] = b;\n    fc[nf] = c;\n    fx[nf] = x;\n    fy[nf] = y;\n    fz[nf] = z;\n    fd[nf] = x * ax + y * ay + z * az;\n    vis[nf] = 0;\n    E[a * n + b] = nf;\n    E[b * n + c] = nf;\n    E[c * n + a] = nf;\n    return nf++;\n  };\n  // The fourth point of the first tetrahedron is the one farthest from the\n  // plane of the first three.\n  let k = 3, best = -1;\n  for (let j = 3; j \u003c n; j++) {\n    const v = abs(orient(P, 0, 1, 2, j));\n    if (v > best) (best = v), (k = j);\n  }\n  let live = [];\n  if (orient(P, 0, 1, 2, k) \u003c 0) live.push(add(0, 1, 2), add(1, 0, k), add(2, 1, k), add(0, 2, k));\n  else live.push(add(0, 2, 1), add(0, 1, k), add(1, 2, k), add(2, 0, k));\n  const seen = [], rim = [];\n  for (let p = 3; p \u003c n; p++) {\n    if (p === k) continue;\n    const px = P[3 * p], py = P[3 * p + 1], pz = P[3 * p + 2];\n    seen.length = 0;\n    for (let q = 0; q \u003c live.length; q++) {\n      const f = live[q];\n      if (fx[f] * px + fy[f] * py + fz[f] * pz - fd[f] > 1e-13) {\n        vis[f] = 1;\n        seen.push(f);\n      }\n    }\n    if (!seen.length) continue;\n    rim.length = 0;\n    for (const f of seen) {\n      const a = fa[f], b = fb[f], c = fc[f];\n      if (!vis[E[b * n + a]]) rim.push(a, b);\n      if (!vis[E[c * n + b]]) rim.push(b, c);\n      if (!vis[E[a * n + c]]) rim.push(c, a);\n    }\n    const next = [];\n    for (const f of live) if (!vis[f]) next.push(f);\n    for (let r = 0; r \u003c rim.length; r += 2) next.push(add(rim[r], rim[r + 1], p));\n    live = next;\n  }\n  // Keep the faces as the triangulation the flips look after from here on.\n  S.nt = live.length;\n  for (let t = 0; t \u003c live.length; t++) {\n    const f = live[t];\n    S.ta[t] = fa[f];\n    S.tb[t] = fb[f];\n    S.tc[t] = fc[f];\n  }\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = S.ta[t], b = S.tb[t], c = S.tc[t];\n    E[a * n + b] = t;\n    E[b * n + c] = t;\n    E[c * n + a] = t;\n  }\n}\n\n// (d - a) . ((b - a) x (c - a)): positive when d lies outside the plane of the\n// triangle abc, which on the sphere means inside its circumcircle.\nfunction orient(P, a, b, c, d) {\n  const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n  const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n  const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n  const wx = P[3 * d] - ax, wy = P[3 * d + 1] - ay, wz = P[3 * d + 2] - az;\n  return wx * (uy * vz - uz * vy) + wy * (uz * vx - ux * vz) + wz * (ux * vy - uy * vx);\n}\n\n// Between hulls the triangulation follows the charges by edge flips. An edge\n// flips only once the far point is inside the circumcircle by 2% of what a\n// perfect lattice holds it outside, so a nearly square quad does not toggle\n// a 5-7 pair from frame to frame. A face turned inside out asks for a new hull.\nfunction maintain(S) {\n  const P = S.U, n = S.n, { ta, tb, tc, E } = S;\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = ta[t], b = tb[t], c = tc[t];\n    const ux = P[3 * b] - P[3 * a], uy = P[3 * b + 1] - P[3 * a + 1], uz = P[3 * b + 2] - P[3 * a + 2];\n    const vx = P[3 * c] - P[3 * a], vy = P[3 * c + 1] - P[3 * a + 1], vz = P[3 * c + 2] - P[3 * a + 2];\n    const d = (uy * vz - uz * vy) * P[3 * a] + (uz * vx - ux * vz) * P[3 * a + 1] + (ux * vy - uy * vx) * P[3 * a + 2];\n    if (d \u003c= 0) return hull(S);\n  }\n  const a = spacing(n), thr = 0.02 * 0.433 * a * a * a * a;\n  for (let pass = 0; pass \u003c 8; pass++) {\n    let flips = 0;\n    for (let t = 0; t \u003c S.nt; t++)\n      for (let e = 0; e \u003c 3; e++) {\n        const u = e === 0 ? ta[t] : e === 1 ? tb[t] : tc[t];\n        const v = e === 0 ? tb[t] : e === 1 ? tc[t] : ta[t];\n        const w = e === 0 ? tc[t] : e === 1 ? ta[t] : tb[t];\n        if (u > v) continue;\n        const s = E[v * n + u];\n        const x = ta[s] !== u && ta[s] !== v ? ta[s] : tb[s] !== u && tb[s] !== v ? tb[s] : tc[s];\n        if (orient(P, u, v, w, x) > thr) {\n          ta[t] = w;\n          tb[t] = u;\n          tc[t] = x;\n          ta[s] = x;\n          tb[s] = v;\n          tc[s] = w;\n          E[w * n + u] = t;\n          E[u * n + x] = t;\n          E[x * n + w] = t;\n          E[x * n + v] = s;\n          E[v * n + w] = s;\n          E[w * n + x] = s;\n          flips++;\n          break;\n        }\n      }\n    if (!flips) break;\n  }\n}\n\n// U is the display position: the charge's position smoothed over about seven\n// steps and put back on the sphere, so heat shows as a wobble and not a buzz,\n// and the lattice is read from where the charges sit, not where they shiver.\nfunction smooth(S, k) {\n  const { X, V, U } = S;\n  for (let i = 0; i \u003c S.n; i++) {\n    const o = 3 * i;\n    V[o] += k * (X[o] - V[o]);\n    V[o + 1] += k * (X[o + 1] - V[o + 1]);\n    V[o + 2] += k * (X[o + 2] - V[o + 2]);\n    const l = 1 / sqrt(V[o] * V[o] + V[o + 1] * V[o + 1] + V[o + 2] * V[o + 2]);\n    U[o] = V[o] * l;\n    U[o + 1] = V[o + 1] * l;\n    U[o + 2] = V[o + 2] * l;\n  }\n}\n\nfunction degrees(S) {\n  const { deg, ta, tb, tc } = S;\n  deg.fill(0, 0, S.n);\n  for (let t = 0; t \u003c S.nt; t++) {\n    deg[ta[t]]++;\n    deg[tb[t]]++;\n    deg[tc[t]]++;\n  }\n}\n\n// The opening: a few scatters, each run down 400 steps with heavy momentum\n// (0.9), and the one with the lowest energy kept. At 100 charges the best of\n// five opens 0.02 above the known minimum 4448.3506, with just the twelve.\nfunction settle(S) {\n  const n = S.n, tries = n \u003c= 160 ? 5 : n \u003c= 300 ? 3 : 1, steps = n \u003c= 300 ? 400 : 300;\n  const keep = new Float64Array(3 * n);\n  let best = Infinity;\n  for (let r = 0; r \u003c tries; r++) {\n    scatter(S.X, 0, n);\n    S.M.fill(0);\n    for (let i = 0; i \u003c steps; i++) relax(S, 0, 0.9);\n    const e = energy(S.X, n);\n    if (e \u003c best) {\n      best = e;\n      keep.set(S.X.subarray(0, 3 * n));\n    }\n  }\n  S.X.set(keep);\n  S.V.set(keep);\n  S.U.set(keep);\n  S.M.fill(0);\n  hull(S);\n  degrees(S);\n  for (let i = 0; i \u003c n; i++) {\n    S.f5[i] = S.deg[i] \u003c 6 ? 1 : 0;\n    S.f7[i] = S.deg[i] > 6 ? 1 : 0;\n  }\n}\n\nfunction resize(S, n) {\n  const old = S.n;\n  S.n = n;\n  if (n > old) {\n    scatter(S.X, old, n);\n    for (let i = 3 * old; i \u003c 3 * n; i++) {\n      S.V[i] = S.U[i] = S.X[i];\n      S.M[i] = 0;\n    }\n    for (let i = old; i \u003c n; i++) S.f5[i] = S.f7[i] = 0;\n  }\n  hull(S);\n}\n\nexport function setup(params) {\n  const F = 16 * NMAX + 64;\n  params.s = {\n    n: 0, hue: 0, speed: 2, heat: 0.06, turn: 0, acc: 0, warm: false,\n    X: new Float64Array(3 * NMAX), F: new Float64Array(3 * NMAX), M: new Float64Array(3 * NMAX), V: new Float64Array(3 * NMAX), U: new Float64Array(3 * NMAX),\n    fa: new Int32Array(F), fb: new Int32Array(F), fc: new Int32Array(F), fx: new Float64Array(F), fy: new Float64Array(F), fz: new Float64Array(F), fd: new Float64Array(F), vis: new Uint8Array(F),\n    E: new Int32Array(NMAX * NMAX), ta: new Int32Array(2 * NMAX), tb: new Int32Array(2 * NMAX), tc: new Int32Array(2 * NMAX), nt: 0,\n    deg: new Int32Array(NMAX), f5: new Float32Array(NMAX), f7: new Float32Array(NMAX),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0, 0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, NMIN, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.heat = cl(k[3], 0, 1);\n  const n = round(cl(k[2], NMIN, NMAX)), kick = 0.075 * S.heat;\n  if (!S.warm) {\n    S.n = n;\n    settle(S);\n    S.warm = true;\n  } else if (n !== S.n) resize(S, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    scatter(S.X, 0, S.n);\n    S.M.fill(0);\n    S.V.set(S.X.subarray(0, 3 * S.n));\n    S.U.set(S.X.subarray(0, 3 * S.n));\n    hull(S);\n  }\n  // 30 steps a second for each unit of Speed, at most six a frame.\n  S.acc += d * S.speed * 30;\n  let steps = min(6, floor(S.acc));\n  S.acc -= floor(S.acc);\n  for (; steps > 0; steps--) {\n    relax(S, kick, 0.5);\n    smooth(S, 0.15);\n  }\n  maintain(S);\n  degrees(S);\n  const ease = 1 - exp(-d / 0.08);\n  for (let i = 0; i \u003c S.n; i++) {\n    S.f5[i] += ease * ((S.deg[i] \u003c 6 ? 1 : 0) - S.f5[i]);\n    S.f7[i] += ease * ((S.deg[i] > 6 ? 1 : 0) - S.f7[i]);\n  }\n  S.turn += d * S.speed * 0.1;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { U, R, G, B, c, f5, f7 } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The sphere turns about an axis leaning 20 degrees toward the viewer.\n  const ct = cos(S.turn), st = sin(S.turn), cx = cos(0.35), sx = sin(0.35);\n  const h = S.hue + 0.55;\n  // Each charge is one soft gaussian glow. Its colour runs from nearly white\n  // at the centre to the full hue at the rim: hsv(hue, s, 1) is white less s\n  // times (1 - the pure hue), and s falls with the square of the glow.\n  const T = TYPES.map(([dh, sr, sc, lv]) => {\n    const q = [0, 0, 0];\n    hsv(h + dh, 1, 1, q);\n    return [1 - q[0], 1 - q[1], 1 - q[2], sr, sr - sc, lv];\n  });\n  const sp = spacing(n) * RS, sig = min(SIG, 0.2 * sp);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = U[3 * i], y0 = U[3 * i + 1], z0 = U[3 * i + 2];\n    const x1 = ct * x0 + st * z0, z1 = -st * x0 + ct * z0;\n    const y = cx * y0 - sx * z1, z = sx * y0 + cx * z1, x = x1;\n    if (z \u003c -0.02) continue;\n    const t = cl((z + 0.02) / 0.37, 0, 1), w = t * t * (3 - 2 * t);\n    const a5 = f5[i], a7 = f7[i], a6 = 1 - a5 - a7;\n    for (let j = 0; j \u003c 6; j++) c[j] = T[0][j] * a6 + T[1][j] * a5 + T[2][j] * a7;\n    const L = c[5] * w * (0.55 + 0.45 * z), s = sig * (1 + 0.25 * (a5 + a7));\n    // Foreshortened toward the rim: narrower across the radius.\n    const px = CX + RS * x, py = CY - RS * y, rr = sqrt(x * x + y * y) || 1, rx = x / rr, ry = -y / rr;\n    const sr = s * (0.45 + 0.55 * z), ir = 1 / (2 * sr * sr), it = 1 / (2 * s * s), ext = 3 * s;\n    for (let yy = max(0, floor(py - ext)); yy \u003c= min(H - 1, py + ext); yy++)\n      for (let xx = max(0, floor(px - ext)); xx \u003c= min(W - 1, px + ext); xx++) {\n        const dx = xx - px, dy = yy - py, dr = dx * rx + dy * ry, dq = -dx * ry + dy * rx;\n        const g = exp(-dr * dr * ir - dq * dq * it), v = L * g, sat = v * (c[3] - c[4] * g * g * g), p = yy * W + xx;\n        R[p] += v - sat * c[0];\n        G[p] += v - sat * c[1];\n        B[p] += v - sat * c[2];\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-thomson-problem","type":"code","name":"thomson-problem","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Thomson Problem\n// Family:  physics\n// Idea:    Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Thomson problem (J. J. Thomson, 1904), with the scars of Bowick, Nelson and Travesset (2000), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1\n//\n// Knob 1: Hue. Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue.\n// Knob 2: Speed. How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds.\n// Knob 3: Charges. 100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them.\n// Knob 4: Heat. A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander.\n// Buttons: K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5, RS = 29;\nconst NMIN = 100, NMAX = 480;\n// Sixfold, fivefold and sevenfold charges: hue offset, saturation at the\n// rim and at the centre, and peak level.\nconst TYPES = [\n  [0, 1, 0.4, 215],\n  [0.58, 1, 0.45, 250],\n  [0.3, 1, 0.4, 240],\n];\n// The glow's sigma in LEDs, or a fifth of the lattice spacing where that is less.\nconst SIG = 2.15;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Lattice spacing on the unit sphere: each charge holds (sqrt3/2) a^2 of the\n// 4 pi of surface.\nconst spacing = (n) => sqrt((8 * PI) / (sqrt(3) * n));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * log(u)) * cos(2 * PI * v);\n}\n\nfunction scatter(X, from, to) {\n  for (let i = from; i \u003c to; i++) {\n    const z = 2 * random() - 1, f = 2 * PI * random(), r = sqrt(1 - z * z);\n    X[3 * i] = r * cos(f);\n    X[3 * i + 1] = r * sin(f);\n    X[3 * i + 2] = z;\n  }\n}\n\n// One step of projected gradient descent on E = sum 1/r_ij, with momentum\n// beta. The step is 0.15 a^3; plain descent at 0.25 a^3 rang and never\n// settled. No charge moves more than a fifth of the spacing in one step, so a\n// fresh scatter, where two charges can sit almost on top of each other, stays\n// calm. Heat adds a random kick of up to 0.075 a per step.\nfunction relax(S, kick, beta) {\n  const { X, F, M } = S, n = S.n;\n  F.fill(0, 0, 3 * n);\n  for (let i = 0; i \u003c n; i++) {\n    const xi = X[3 * i], yi = X[3 * i + 1], zi = X[3 * i + 2];\n    let fx = 0, fy = 0, fz = 0;\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = xi - X[3 * j], dy = yi - X[3 * j + 1], dz = zi - X[3 * j + 2];\n      const r2 = dx * dx + dy * dy + dz * dz + 1e-9, q = 1 / (r2 * sqrt(r2));\n      fx += dx * q;\n      fy += dy * q;\n      fz += dz * q;\n      F[3 * j] -= dx * q;\n      F[3 * j + 1] -= dy * q;\n      F[3 * j + 2] -= dz * q;\n    }\n    F[3 * i] += fx;\n    F[3 * i + 1] += fy;\n    F[3 * i + 2] += fz;\n  }\n  const a = spacing(n), eta = 0.15 * a * a * a, cap = 0.2 * a, k = kick * a;\n  for (let i = 0; i \u003c n; i++) {\n    const o = 3 * i, x = X[o], y = X[o + 1], z = X[o + 2];\n    let fx = F[o], fy = F[o + 1], fz = F[o + 2];\n    const d = fx * x + fy * y + fz * z;\n    fx = beta * M[o] + eta * (fx - d * x);\n    fy = beta * M[o + 1] + eta * (fy - d * y);\n    fz = beta * M[o + 2] + eta * (fz - d * z);\n    const e = fx * x + fy * y + fz * z;\n    fx -= e * x;\n    fy -= e * y;\n    fz -= e * z;\n    const m = sqrt(fx * fx + fy * fy + fz * fz);\n    if (m > cap) {\n      fx *= cap / m;\n      fy *= cap / m;\n      fz *= cap / m;\n    }\n    M[o] = fx;\n    M[o + 1] = fy;\n    M[o + 2] = fz;\n    if (k > 0) {\n      fx += k * gauss();\n      fy += k * gauss();\n      fz += k * gauss();\n    }\n    const nx = x + fx, ny = y + fy, nz = z + fz, l = 1 / sqrt(nx * nx + ny * ny + nz * nz);\n    X[o] = nx * l;\n    X[o + 1] = ny * l;\n    X[o + 2] = nz * l;\n  }\n}\n\nfunction energy(X, n) {\n  let e = 0;\n  for (let i = 0; i \u003c n; i++)\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = X[3 * i] - X[3 * j], dy = X[3 * i + 1] - X[3 * j + 1], dz = X[3 * i + 2] - X[3 * j + 2];\n      e += 1 / sqrt(dx * dx + dy * dy + dz * dz);\n    }\n  return e;\n}\n\n// The Delaunay triangulation of points on a sphere is their convex hull.\n// Incremental hull: each new point removes the faces it sees and joins the\n// horizon around them to itself. E maps a directed edge u->v to its face.\nfunction hull(S) {\n  const P = S.U, n = S.n, { fa, fb, fc, fx, fy, fz, fd, vis, E } = S;\n  let nf = 0;\n  const add = (a, b, c) => {\n    const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n    const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n    const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n    const x = uy * vz - uz * vy, y = uz * vx - ux * vz, z = ux * vy - uy * vx;\n    fa[nf] = a;\n    fb[nf] = b;\n    fc[nf] = c;\n    fx[nf] = x;\n    fy[nf] = y;\n    fz[nf] = z;\n    fd[nf] = x * ax + y * ay + z * az;\n    vis[nf] = 0;\n    E[a * n + b] = nf;\n    E[b * n + c] = nf;\n    E[c * n + a] = nf;\n    return nf++;\n  };\n  // The fourth point of the first tetrahedron is the one farthest from the\n  // plane of the first three.\n  let k = 3, best = -1;\n  for (let j = 3; j \u003c n; j++) {\n    const v = abs(orient(P, 0, 1, 2, j));\n    if (v > best) (best = v), (k = j);\n  }\n  let live = [];\n  if (orient(P, 0, 1, 2, k) \u003c 0) live.push(add(0, 1, 2), add(1, 0, k), add(2, 1, k), add(0, 2, k));\n  else live.push(add(0, 2, 1), add(0, 1, k), add(1, 2, k), add(2, 0, k));\n  const seen = [], rim = [];\n  for (let p = 3; p \u003c n; p++) {\n    if (p === k) continue;\n    const px = P[3 * p], py = P[3 * p + 1], pz = P[3 * p + 2];\n    seen.length = 0;\n    for (let q = 0; q \u003c live.length; q++) {\n      const f = live[q];\n      if (fx[f] * px + fy[f] * py + fz[f] * pz - fd[f] > 1e-13) {\n        vis[f] = 1;\n        seen.push(f);\n      }\n    }\n    if (!seen.length) continue;\n    rim.length = 0;\n    for (const f of seen) {\n      const a = fa[f], b = fb[f], c = fc[f];\n      if (!vis[E[b * n + a]]) rim.push(a, b);\n      if (!vis[E[c * n + b]]) rim.push(b, c);\n      if (!vis[E[a * n + c]]) rim.push(c, a);\n    }\n    const next = [];\n    for (const f of live) if (!vis[f]) next.push(f);\n    for (let r = 0; r \u003c rim.length; r += 2) next.push(add(rim[r], rim[r + 1], p));\n    live = next;\n  }\n  // Keep the faces as the triangulation the flips look after from here on.\n  S.nt = live.length;\n  for (let t = 0; t \u003c live.length; t++) {\n    const f = live[t];\n    S.ta[t] = fa[f];\n    S.tb[t] = fb[f];\n    S.tc[t] = fc[f];\n  }\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = S.ta[t], b = S.tb[t], c = S.tc[t];\n    E[a * n + b] = t;\n    E[b * n + c] = t;\n    E[c * n + a] = t;\n  }\n}\n\n// (d - a) . ((b - a) x (c - a)): positive when d lies outside the plane of the\n// triangle abc, which on the sphere means inside its circumcircle.\nfunction orient(P, a, b, c, d) {\n  const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n  const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n  const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n  const wx = P[3 * d] - ax, wy = P[3 * d + 1] - ay, wz = P[3 * d + 2] - az;\n  return wx * (uy * vz - uz * vy) + wy * (uz * vx - ux * vz) + wz * (ux * vy - uy * vx);\n}\n\n// Between hulls the triangulation follows the charges by edge flips. An edge\n// flips only once the far point is inside the circumcircle by 2% of what a\n// perfect lattice holds it outside, so a nearly square quad does not toggle\n// a 5-7 pair from frame to frame. A face turned inside out asks for a new hull.\nfunction maintain(S) {\n  const P = S.U, n = S.n, { ta, tb, tc, E } = S;\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = ta[t], b = tb[t], c = tc[t];\n    const ux = P[3 * b] - P[3 * a], uy = P[3 * b + 1] - P[3 * a + 1], uz = P[3 * b + 2] - P[3 * a + 2];\n    const vx = P[3 * c] - P[3 * a], vy = P[3 * c + 1] - P[3 * a + 1], vz = P[3 * c + 2] - P[3 * a + 2];\n    const d = (uy * vz - uz * vy) * P[3 * a] + (uz * vx - ux * vz) * P[3 * a + 1] + (ux * vy - uy * vx) * P[3 * a + 2];\n    if (d \u003c= 0) return hull(S);\n  }\n  const a = spacing(n), thr = 0.02 * 0.433 * a * a * a * a;\n  for (let pass = 0; pass \u003c 8; pass++) {\n    let flips = 0;\n    for (let t = 0; t \u003c S.nt; t++)\n      for (let e = 0; e \u003c 3; e++) {\n        const u = e === 0 ? ta[t] : e === 1 ? tb[t] : tc[t];\n        const v = e === 0 ? tb[t] : e === 1 ? tc[t] : ta[t];\n        const w = e === 0 ? tc[t] : e === 1 ? ta[t] : tb[t];\n        if (u > v) continue;\n        const s = E[v * n + u];\n        const x = ta[s] !== u && ta[s] !== v ? ta[s] : tb[s] !== u && tb[s] !== v ? tb[s] : tc[s];\n        if (orient(P, u, v, w, x) > thr) {\n          ta[t] = w;\n          tb[t] = u;\n          tc[t] = x;\n          ta[s] = x;\n          tb[s] = v;\n          tc[s] = w;\n          E[w * n + u] = t;\n          E[u * n + x] = t;\n          E[x * n + w] = t;\n          E[x * n + v] = s;\n          E[v * n + w] = s;\n          E[w * n + x] = s;\n          flips++;\n          break;\n        }\n      }\n    if (!flips) break;\n  }\n}\n\n// U is the display position: the charge's position smoothed over about seven\n// steps and put back on the sphere, so heat shows as a wobble and not a buzz,\n// and the lattice is read from where the charges sit, not where they shiver.\nfunction smooth(S, k) {\n  const { X, V, U } = S;\n  for (let i = 0; i \u003c S.n; i++) {\n    const o = 3 * i;\n    V[o] += k * (X[o] - V[o]);\n    V[o + 1] += k * (X[o + 1] - V[o + 1]);\n    V[o + 2] += k * (X[o + 2] - V[o + 2]);\n    const l = 1 / sqrt(V[o] * V[o] + V[o + 1] * V[o + 1] + V[o + 2] * V[o + 2]);\n    U[o] = V[o] * l;\n    U[o + 1] = V[o + 1] * l;\n    U[o + 2] = V[o + 2] * l;\n  }\n}\n\nfunction degrees(S) {\n  const { deg, ta, tb, tc } = S;\n  deg.fill(0, 0, S.n);\n  for (let t = 0; t \u003c S.nt; t++) {\n    deg[ta[t]]++;\n    deg[tb[t]]++;\n    deg[tc[t]]++;\n  }\n}\n\n// The opening: a few scatters, each run down 400 steps with heavy momentum\n// (0.9), and the one with the lowest energy kept. At 100 charges the best of\n// five opens 0.02 above the known minimum 4448.3506, with just the twelve.\nfunction settle(S) {\n  const n = S.n, tries = n \u003c= 160 ? 5 : n \u003c= 300 ? 3 : 1, steps = n \u003c= 300 ? 400 : 300;\n  const keep = new Float64Array(3 * n);\n  let best = Infinity;\n  for (let r = 0; r \u003c tries; r++) {\n    scatter(S.X, 0, n);\n    S.M.fill(0);\n    for (let i = 0; i \u003c steps; i++) relax(S, 0, 0.9);\n    const e = energy(S.X, n);\n    if (e \u003c best) {\n      best = e;\n      keep.set(S.X.subarray(0, 3 * n));\n    }\n  }\n  S.X.set(keep);\n  S.V.set(keep);\n  S.U.set(keep);\n  S.M.fill(0);\n  hull(S);\n  degrees(S);\n  for (let i = 0; i \u003c n; i++) {\n    S.f5[i] = S.deg[i] \u003c 6 ? 1 : 0;\n    S.f7[i] = S.deg[i] > 6 ? 1 : 0;\n  }\n}\n\nfunction resize(S, n) {\n  const old = S.n;\n  S.n = n;\n  if (n > old) {\n    scatter(S.X, old, n);\n    for (let i = 3 * old; i \u003c 3 * n; i++) {\n      S.V[i] = S.U[i] = S.X[i];\n      S.M[i] = 0;\n    }\n    for (let i = old; i \u003c n; i++) S.f5[i] = S.f7[i] = 0;\n  }\n  hull(S);\n}\n\nexport function setup(params) {\n  const F = 16 * NMAX + 64;\n  params.s = {\n    n: 0, hue: 0, speed: 2, heat: 0.06, turn: 0, acc: 0, warm: false,\n    X: new Float64Array(3 * NMAX), F: new Float64Array(3 * NMAX), M: new Float64Array(3 * NMAX), V: new Float64Array(3 * NMAX), U: new Float64Array(3 * NMAX),\n    fa: new Int32Array(F), fb: new Int32Array(F), fc: new Int32Array(F), fx: new Float64Array(F), fy: new Float64Array(F), fz: new Float64Array(F), fd: new Float64Array(F), vis: new Uint8Array(F),\n    E: new Int32Array(NMAX * NMAX), ta: new Int32Array(2 * NMAX), tb: new Int32Array(2 * NMAX), tc: new Int32Array(2 * NMAX), nt: 0,\n    deg: new Int32Array(NMAX), f5: new Float32Array(NMAX), f7: new Float32Array(NMAX),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0, 0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, NMIN, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.heat = cl(k[3], 0, 1);\n  const n = round(cl(k[2], NMIN, NMAX)), kick = 0.075 * S.heat;\n  if (!S.warm) {\n    S.n = n;\n    settle(S);\n    S.warm = true;\n  } else if (n !== S.n) resize(S, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    scatter(S.X, 0, S.n);\n    S.M.fill(0);\n    S.V.set(S.X.subarray(0, 3 * S.n));\n    S.U.set(S.X.subarray(0, 3 * S.n));\n    hull(S);\n  }\n  // 30 steps a second for each unit of Speed, at most six a frame.\n  S.acc += d * S.speed * 30;\n  let steps = min(6, floor(S.acc));\n  S.acc -= floor(S.acc);\n  for (; steps > 0; steps--) {\n    relax(S, kick, 0.5);\n    smooth(S, 0.15);\n  }\n  maintain(S);\n  degrees(S);\n  const ease = 1 - exp(-d / 0.08);\n  for (let i = 0; i \u003c S.n; i++) {\n    S.f5[i] += ease * ((S.deg[i] \u003c 6 ? 1 : 0) - S.f5[i]);\n    S.f7[i] += ease * ((S.deg[i] > 6 ? 1 : 0) - S.f7[i]);\n  }\n  S.turn += d * S.speed * 0.1;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { U, R, G, B, c, f5, f7 } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The sphere turns about an axis leaning 20 degrees toward the viewer.\n  const ct = cos(S.turn), st = sin(S.turn), cx = cos(0.35), sx = sin(0.35);\n  const h = S.hue + 0.55;\n  // Each charge is one soft gaussian glow. Its colour runs from nearly white\n  // at the centre to the full hue at the rim: hsv(hue, s, 1) is white less s\n  // times (1 - the pure hue), and s falls with the square of the glow.\n  const T = TYPES.map(([dh, sr, sc, lv]) => {\n    const q = [0, 0, 0];\n    hsv(h + dh, 1, 1, q);\n    return [1 - q[0], 1 - q[1], 1 - q[2], sr, sr - sc, lv];\n  });\n  const sp = spacing(n) * RS, sig = min(SIG, 0.2 * sp);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = U[3 * i], y0 = U[3 * i + 1], z0 = U[3 * i + 2];\n    const x1 = ct * x0 + st * z0, z1 = -st * x0 + ct * z0;\n    const y = cx * y0 - sx * z1, z = sx * y0 + cx * z1, x = x1;\n    if (z \u003c -0.02) continue;\n    const t = cl((z + 0.02) / 0.37, 0, 1), w = t * t * (3 - 2 * t);\n    const a5 = f5[i], a7 = f7[i], a6 = 1 - a5 - a7;\n    for (let j = 0; j \u003c 6; j++) c[j] = T[0][j] * a6 + T[1][j] * a5 + T[2][j] * a7;\n    const L = c[5] * w * (0.55 + 0.45 * z), s = sig * (1 + 0.25 * (a5 + a7));\n    // Foreshortened toward the rim: narrower across the radius.\n    const px = CX + RS * x, py = CY - RS * y, rr = sqrt(x * x + y * y) || 1, rx = x / rr, ry = -y / rr;\n    const sr = s * (0.45 + 0.55 * z), ir = 1 / (2 * sr * sr), it = 1 / (2 * s * s), ext = 3 * s;\n    for (let yy = max(0, floor(py - ext)); yy \u003c= min(H - 1, py + ext); yy++)\n      for (let xx = max(0, floor(px - ext)); xx \u003c= min(W - 1, px + ext); xx++) {\n        const dx = xx - px, dy = yy - py, dr = dx * rx + dy * ry, dq = -dx * ry + dy * rx;\n        const g = exp(-dr * dr * ir - dq * dq * it), v = L * g, sat = v * (c[3] - c[4] * g * g * g), p = yy * W + xx;\n        R[p] += v - sat * c[0];\n        G[p] += v - sat * c[1];\n        B[p] += v - sat * c[2];\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds."},{"name":"Charges","min":100,"max":480,"about":"100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them."},{"name":"Heat","min":0,"max":1,"about":"A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander."}],"start":[0,2,100,0.06],"measures":{"motion":0.1033,"detail":0.027,"edges":0.1646,"complexity":0.9152,"coverage":0.2589,"colour":0.1371,"drift":0.0297},"knobResponse":[0.0593,0.055,0.0527,0.0511]},{"slug":"three-gaps","title":"Three Gaps","family":"number","round":30,"note":"원 위에 α 씩 돌아가며 점을 찍으면 이웃 간격은 많아야 세 가지예요. 줄마다 점을 하나씩 더해 간격을 길이 등급으로 칠하고, α 가 분수에 닿으면 아래쪽이 줄무늬로 무너져요.","idea":"Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.","buttons":"K1 tap sends a straight to the stop at the end of the leg it is on.","code":"// ===== Patternflow pattern =====\n// Title:   Three Gaps\n// Family:  number\n// Idea:    Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: three-gap theorem (conjectured by Hugo Steinhaus, proved by Vera T. Sós, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair.\n// Knob 2: Speed. How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s.\n// Knob 3: Alpha. Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns.\n// Knob 4: Points. How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples.\n// Buttons: K1 tap sends a straight to the stop at the end of the leg it is on.\n\nconst W = 64, H = 128, SS = 4, NMAX = 160, Q = 21;\nconst { min, max, floor, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\nconst GOLD = (Math.sqrt(5) - 1) / 2, BRONZE = (Math.sqrt(13) - 3) / 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The two fractions with denominator at most 21 that hold a0 between them,\n// found by walking down the Stern-Brocot tree: 8/13 and 13/21 for 1/phi.\nfunction bracket(a0) {\n  let a = 0, b = 1, c = 1, d = 1;\n  for (;;) {\n    const p = a + c, q = b + d;\n    if (q > Q) break;\n    if (a0 \u003c p / q) (c = p), (d = q);\n    else (a = p), (b = q);\n  }\n  return [a / b, c / d];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, k3: -1, a0: GOLD, ends: [GOLD, GOLD], u: 0, nmax: 36, alpha: GOLD,\n    pos: new Float64Array(NMAX + 1), idx: new Int32Array(NMAX + 1), sep: new Float32Array(W),\n    row: new Float32Array(W * 3), lut: new Float32Array(3 * 64), lutHue: NaN,\n  };\n}\n\nconst stop = (P, i) => (i & 1 ? P.ends[i >> 1] : P.a0);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nmax = floor(30 + 100 * cl(k[3], 0, 1));\n  const k3 = cl(k[2], 0, 1);\n  if (k3 !== P.k3) {\n    P.k3 = k3;\n    P.a0 = GOLD + (BRONZE - GOLD) * k3;\n    // The nearer fraction first. On a fraction exactly, points would land on\n    // each other and floating point would shuffle their order; 3e-7 off it,\n    // on a0's side, they stay in order and the picture is the same.\n    const [lo, hi] = bracket(P.a0);\n    P.ends = P.a0 - lo \u003c hi - P.a0 ? [lo + 3e-7, hi - 3e-7] : [hi - 3e-7, lo + 3e-7];\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.u = floor(P.u) + 1;\n  // a goes a0, first fraction, a0, second fraction, a0, easing in and out of\n  // each stop; a longer leg takes longer, so the bottom row never runs away.\n  const s = floor(P.u) & 3, from = stop(P, s), to = stop(P, (s + 1) & 3);\n  P.u += (d * P.speed * 0.15) / (0.4 + abs(to - from) / 0.004);\n  const s2 = floor(P.u) & 3, A = stop(P, s2), B = stop(P, (s2 + 1) & 3);\n  P.alpha = A + (B - A) * ease(P.u - floor(P.u));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pos, idx, sep, row, lut } = P, a = P.alpha, nmax = P.nmax;\n  if (P.lutHue !== P.hue) {\n    // Colour by the rank of the length: yellow the longest, cyan the middle,\n    // magenta the shortest, and mixes for ranks in between. Mixed as light,\n    // not round the wheel, which would put a dark blue between cyan and\n    // magenta, then brought back to saturation 0.7 so a mix is not grey.\n    const c3 = new Float32Array(9);\n    for (let c = 0; c \u003c 3; c++) hsv(P.hue + 0.15 + c * 0.36, 0.88, 1, c3, c * 3);\n    for (let i = 0; i \u003c 64; i++) {\n      const r = (i / 63) * 2, j = min(1, floor(r)), f = r - j, o = i * 3;\n      for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = c3[j * 3 + ch] * (1 - f) + c3[j * 3 + 3 + ch] * f;\n      const mx = max(lut[o], lut[o + 1], lut[o + 2]), sat = 1 - min(lut[o], lut[o + 1], lut[o + 2]) / mx;\n      if (sat \u003c 0.7) for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = mx - ((mx - lut[o + ch]) * 0.7) / max(sat, 1e-3);\n    }\n    P.lutHue = P.hue;\n  }\n  const dv = [0, 0, 0, 0], dl = [0, 0, 0, 0], rank = [0, 0, 0, 0];\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) {\n    // Row y holds n points, n growing down the panel. New points go into the\n    // sorted list one at a time, so a frame sorts nothing twice.\n    const want = 1 + floor((y * nmax) / H);\n    let tick = -1;\n    while (n \u003c want) {\n      const p = n * a - floor(n * a);\n      let lo = 0, hi = n;\n      while (lo \u003c hi) {\n        const m = (lo + hi) >> 1;\n        if (pos[m] \u003c p) lo = m + 1;\n        else hi = m;\n      }\n      for (let j = n; j > lo; j--) (pos[j] = pos[j - 1]), (idx[j] = idx[j - 1]);\n      pos[lo] = p;\n      idx[lo] = n;\n      tick = floor(p * W);\n      n++;\n    }\n    pos[n] = 1;\n    idx[n] = 0;\n    // The gap from point i to point j is frac((j - i) a) long, so the index\n    // difference names the length, and the theorem says there are at most\n    // three. The newest point always lands in a longest gap and cuts it into\n    // one gap of each of the two shorter lengths already on the circle, which\n    // is why the longest is the sum of the other two. When the last longest\n    // gap is cut, the middle length is the longest and the cutting goes on.\n    let nc = 0;\n    for (let i = 0; i \u003c n; i++) {\n      const dd = idx[i + 1] - idx[i];\n      let c = 0;\n      while (c \u003c nc && dv[c] !== dd) c++;\n      if (c === nc && nc \u003c 4) (dv[nc] = dd), (dl[nc] = pos[i + 1] - pos[i]), nc++;\n    }\n    // Rank: how many lengths are longer, counting a length within 15% as\n    // half. Near a fraction p/q the shortest shrinks towards nothing and the\n    // other two meet, so their gaps go one colour as the three become two.\n    for (let c = 0; c \u003c nc; c++) {\n      let r = 0;\n      for (let e = 0; e \u003c nc; e++) if (e !== c) r += cl(0.5 + (dl[e] - dl[c]) / (0.3 * max(dl[e], dl[c])), 0, 1);\n      rank[c] = min(2, r);\n    }\n    // Points closer than a third of an LED count as one. A lone one between\n    // two gaps wider than an LED draws a dark line, darker the wider they are.\n    sep.fill(0);\n    let first = 0;\n    while (first \u003c n - 1 && (pos[first + 1] - pos[first]) * W \u003c 0.34) first++;\n    for (let i = 0, prev = -1; i \u003c n; i++) {\n      const gr = (pos[i + 1] - pos[i]) * W;\n      if (gr \u003c 0.34 && i \u003c n - 1) continue;\n      const gl = prev \u003c 0 ? (pos[first] + 1 - pos[n - 1]) * W : (pos[i] - pos[prev]) * W;\n      const x = floor(pos[i] * W);\n      sep[x] = max(sep[x], cl((min(gl, gr) - 1.1) / 2.4, 0, 1));\n      prev = i;\n    }\n    // Four samples to an LED. Brightness follows the gap's length times n,\n    // which runs about 0.4 to 1.9 at 1/phi: a gap brightens down the panel\n    // until a point cuts it.\n    row.fill(0);\n    let g = 0;\n    for (let x = 0; x \u003c W; x++)\n      for (let s = 0; s \u003c SS; s++) {\n        const u = (x + (s + 0.5) / SS) / W;\n        while (pos[g + 1] \u003c= u) g++;\n        const dd = idx[g + 1] - idx[g];\n        let c = 0;\n        while (c \u003c nc - 1 && dv[c] !== dd) c++;\n        const v = 0.6 + 0.4 * cl((n * (pos[g + 1] - pos[g]) - 0.4) / 1.3, 0, 1), q = floor(rank[c] * 31.5) * 3;\n        row[x * 3] += lut[q] * v;\n        row[x * 3 + 1] += lut[q + 1] * v;\n        row[x * 3 + 2] += lut[q + 2] * v;\n      }\n    // The newest point, white on the row where it arrives: they fall on a\n    // lattice, and each heads the dark line its point draws below.\n    for (let x = 0; x \u003c W; x++) {\n      const f = (255 / SS) * (1 - 0.85 * sep[x]);\n      if (x === tick) display.setPixel(x, y, 255, 255, 255);\n      else display.setPixel(x, y, row[x * 3] * f, row[x * 3 + 1] * f, row[x * 3 + 2] * f);\n    }\n  }\n}\n","layer":{"id":"layer-three-gaps","type":"code","name":"three-gaps","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Three Gaps\n// Family:  number\n// Idea:    Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: three-gap theorem (conjectured by Hugo Steinhaus, proved by Vera T. Sós, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair.\n// Knob 2: Speed. How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s.\n// Knob 3: Alpha. Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns.\n// Knob 4: Points. How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples.\n// Buttons: K1 tap sends a straight to the stop at the end of the leg it is on.\n\nconst W = 64, H = 128, SS = 4, NMAX = 160, Q = 21;\nconst { min, max, floor, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\nconst GOLD = (Math.sqrt(5) - 1) / 2, BRONZE = (Math.sqrt(13) - 3) / 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The two fractions with denominator at most 21 that hold a0 between them,\n// found by walking down the Stern-Brocot tree: 8/13 and 13/21 for 1/phi.\nfunction bracket(a0) {\n  let a = 0, b = 1, c = 1, d = 1;\n  for (;;) {\n    const p = a + c, q = b + d;\n    if (q > Q) break;\n    if (a0 \u003c p / q) (c = p), (d = q);\n    else (a = p), (b = q);\n  }\n  return [a / b, c / d];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, k3: -1, a0: GOLD, ends: [GOLD, GOLD], u: 0, nmax: 36, alpha: GOLD,\n    pos: new Float64Array(NMAX + 1), idx: new Int32Array(NMAX + 1), sep: new Float32Array(W),\n    row: new Float32Array(W * 3), lut: new Float32Array(3 * 64), lutHue: NaN,\n  };\n}\n\nconst stop = (P, i) => (i & 1 ? P.ends[i >> 1] : P.a0);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nmax = floor(30 + 100 * cl(k[3], 0, 1));\n  const k3 = cl(k[2], 0, 1);\n  if (k3 !== P.k3) {\n    P.k3 = k3;\n    P.a0 = GOLD + (BRONZE - GOLD) * k3;\n    // The nearer fraction first. On a fraction exactly, points would land on\n    // each other and floating point would shuffle their order; 3e-7 off it,\n    // on a0's side, they stay in order and the picture is the same.\n    const [lo, hi] = bracket(P.a0);\n    P.ends = P.a0 - lo \u003c hi - P.a0 ? [lo + 3e-7, hi - 3e-7] : [hi - 3e-7, lo + 3e-7];\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.u = floor(P.u) + 1;\n  // a goes a0, first fraction, a0, second fraction, a0, easing in and out of\n  // each stop; a longer leg takes longer, so the bottom row never runs away.\n  const s = floor(P.u) & 3, from = stop(P, s), to = stop(P, (s + 1) & 3);\n  P.u += (d * P.speed * 0.15) / (0.4 + abs(to - from) / 0.004);\n  const s2 = floor(P.u) & 3, A = stop(P, s2), B = stop(P, (s2 + 1) & 3);\n  P.alpha = A + (B - A) * ease(P.u - floor(P.u));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pos, idx, sep, row, lut } = P, a = P.alpha, nmax = P.nmax;\n  if (P.lutHue !== P.hue) {\n    // Colour by the rank of the length: yellow the longest, cyan the middle,\n    // magenta the shortest, and mixes for ranks in between. Mixed as light,\n    // not round the wheel, which would put a dark blue between cyan and\n    // magenta, then brought back to saturation 0.7 so a mix is not grey.\n    const c3 = new Float32Array(9);\n    for (let c = 0; c \u003c 3; c++) hsv(P.hue + 0.15 + c * 0.36, 0.88, 1, c3, c * 3);\n    for (let i = 0; i \u003c 64; i++) {\n      const r = (i / 63) * 2, j = min(1, floor(r)), f = r - j, o = i * 3;\n      for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = c3[j * 3 + ch] * (1 - f) + c3[j * 3 + 3 + ch] * f;\n      const mx = max(lut[o], lut[o + 1], lut[o + 2]), sat = 1 - min(lut[o], lut[o + 1], lut[o + 2]) / mx;\n      if (sat \u003c 0.7) for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = mx - ((mx - lut[o + ch]) * 0.7) / max(sat, 1e-3);\n    }\n    P.lutHue = P.hue;\n  }\n  const dv = [0, 0, 0, 0], dl = [0, 0, 0, 0], rank = [0, 0, 0, 0];\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) {\n    // Row y holds n points, n growing down the panel. New points go into the\n    // sorted list one at a time, so a frame sorts nothing twice.\n    const want = 1 + floor((y * nmax) / H);\n    let tick = -1;\n    while (n \u003c want) {\n      const p = n * a - floor(n * a);\n      let lo = 0, hi = n;\n      while (lo \u003c hi) {\n        const m = (lo + hi) >> 1;\n        if (pos[m] \u003c p) lo = m + 1;\n        else hi = m;\n      }\n      for (let j = n; j > lo; j--) (pos[j] = pos[j - 1]), (idx[j] = idx[j - 1]);\n      pos[lo] = p;\n      idx[lo] = n;\n      tick = floor(p * W);\n      n++;\n    }\n    pos[n] = 1;\n    idx[n] = 0;\n    // The gap from point i to point j is frac((j - i) a) long, so the index\n    // difference names the length, and the theorem says there are at most\n    // three. The newest point always lands in a longest gap and cuts it into\n    // one gap of each of the two shorter lengths already on the circle, which\n    // is why the longest is the sum of the other two. When the last longest\n    // gap is cut, the middle length is the longest and the cutting goes on.\n    let nc = 0;\n    for (let i = 0; i \u003c n; i++) {\n      const dd = idx[i + 1] - idx[i];\n      let c = 0;\n      while (c \u003c nc && dv[c] !== dd) c++;\n      if (c === nc && nc \u003c 4) (dv[nc] = dd), (dl[nc] = pos[i + 1] - pos[i]), nc++;\n    }\n    // Rank: how many lengths are longer, counting a length within 15% as\n    // half. Near a fraction p/q the shortest shrinks towards nothing and the\n    // other two meet, so their gaps go one colour as the three become two.\n    for (let c = 0; c \u003c nc; c++) {\n      let r = 0;\n      for (let e = 0; e \u003c nc; e++) if (e !== c) r += cl(0.5 + (dl[e] - dl[c]) / (0.3 * max(dl[e], dl[c])), 0, 1);\n      rank[c] = min(2, r);\n    }\n    // Points closer than a third of an LED count as one. A lone one between\n    // two gaps wider than an LED draws a dark line, darker the wider they are.\n    sep.fill(0);\n    let first = 0;\n    while (first \u003c n - 1 && (pos[first + 1] - pos[first]) * W \u003c 0.34) first++;\n    for (let i = 0, prev = -1; i \u003c n; i++) {\n      const gr = (pos[i + 1] - pos[i]) * W;\n      if (gr \u003c 0.34 && i \u003c n - 1) continue;\n      const gl = prev \u003c 0 ? (pos[first] + 1 - pos[n - 1]) * W : (pos[i] - pos[prev]) * W;\n      const x = floor(pos[i] * W);\n      sep[x] = max(sep[x], cl((min(gl, gr) - 1.1) / 2.4, 0, 1));\n      prev = i;\n    }\n    // Four samples to an LED. Brightness follows the gap's length times n,\n    // which runs about 0.4 to 1.9 at 1/phi: a gap brightens down the panel\n    // until a point cuts it.\n    row.fill(0);\n    let g = 0;\n    for (let x = 0; x \u003c W; x++)\n      for (let s = 0; s \u003c SS; s++) {\n        const u = (x + (s + 0.5) / SS) / W;\n        while (pos[g + 1] \u003c= u) g++;\n        const dd = idx[g + 1] - idx[g];\n        let c = 0;\n        while (c \u003c nc - 1 && dv[c] !== dd) c++;\n        const v = 0.6 + 0.4 * cl((n * (pos[g + 1] - pos[g]) - 0.4) / 1.3, 0, 1), q = floor(rank[c] * 31.5) * 3;\n        row[x * 3] += lut[q] * v;\n        row[x * 3 + 1] += lut[q + 1] * v;\n        row[x * 3 + 2] += lut[q + 2] * v;\n      }\n    // The newest point, white on the row where it arrives: they fall on a\n    // lattice, and each heads the dark line its point draws below.\n    for (let x = 0; x \u003c W; x++) {\n      const f = (255 / SS) * (1 - 0.85 * sep[x]);\n      if (x === tick) display.setPixel(x, y, 255, 255, 255);\n      else display.setPixel(x, y, row[x * 3] * f, row[x * 3 + 1] * f, row[x * 3 + 2] * f);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair."},{"name":"Speed","min":0.2,"max":3,"about":"How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s."},{"name":"Alpha","min":0,"max":1,"about":"Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns."},{"name":"Points","min":0,"max":1,"about":"How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples."}],"start":[0,2,0,0.06],"measures":{"motion":0.1477,"detail":0.1059,"edges":0.725,"complexity":0.2583,"coverage":0.9968,"colour":0.6429,"drift":0.149},"knobResponse":[0.4559,0.1669,0.3074,0.2544]},{"slug":"toner-pad","title":"Toner Pad","family":"cosmetic","round":35,"note":"섬유 400가닥이 아무렇게나 엇갈린 흰 솜 패드에 장밋빛 토너가 3.2초마다 한 방울씩 떨어져요. 젖는 앞은 잘 빨아올리는 섬유를 따라 손가락처럼 먼저 뻗고, 젖은 곳은 반투명해져 뒤의 빛을 토너 색으로 받으며 그 안의 섬유가 어둡게 드러나요. 패치는 가장자리부터 말라 흰 솜으로 돌아가요. K3 은 한 방울이 적시는 넓이를 1800 LED 에서 5400 LED 로 늘리고, K1 을 누르면 아직 젖은 곳을 피해 한 방울이 바로 떨어져요.","idea":"A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.","buttons":"K1 tap lets a drop fall at once, away from the patches still wet.","code":"// ===== Patternflow pattern =====\n// Title:   Toner Pad\n// Family:  cosmetic\n// Idea:    A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cotton pad soaking up toner\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1\n//\n// Knob 1: Hue. The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive.\n// Knob 2: Speed. How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower.\n// Knob 3: Toner. How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65.\n// Knob 4: Fibre. How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges.\n// Buttons: K1 tap lets a drop fall at once, away from the patches still wet.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n// Drops on the pad at once: a fifth, from quick taps, takes the place of the oldest.\nconst MAXD = 4;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    F: F(N), F2: F(N), tmp: F(N), CE: F(N), CS: F(N), CSE: F(N), CSW: F(N), J: F(N),\n    drops: [], pool: [F(N), F(N), F(N), F(N), F(N)],\n    // The heap's keys are 32-bit like the reach they are checked against, so a\n    // key is never read as stale because it was rounded on the way in.\n    hk: F(8 * N + 16), hv: new Int32Array(8 * N + 16),\n    T: 0, next: 0, hue: 0, speed: 2, toner: 0, fibre: 0.06, webKey: NaN, started: false, col: F(12), key: NaN,\n  };\n}\n\n// The web: fibres laid at random, each a slightly wavy strand, drawn soft\n// into F (how much fibre each LED sees) and marked on the links between\n// neighbouring LEDs it runs through, which is where the toner wicks fastest.\nfunction web(S) {\n  const g = S.fibre, Fd = S.F, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW;\n  Fd.fill(0);\n  CE.fill(0);\n  CS.fill(0);\n  CSE.fill(0);\n  CSW.fill(0);\n  for (let i = 0; i \u003c N; i++) S.J[i] = 0.9 + 0.2 * rnd();\n  const count = floor(420 - 300 * g), wid = 0.6 + 1.4 * g;\n  for (let f = 0; f \u003c count; f++) {\n    let x = -20 + rnd() * (W + 40), y = -20 + rnd() * (H + 40), th = rnd() * PI * 2, bend = 0;\n    const len = 40 + 50 * rnd(), b = 0.45 + 0.55 * rnd();\n    // Most strands carry the toner a little faster than the gaps; a few\n    // carry it about six times as fast, and the front runs out along them.\n    const u = rnd(), wick = 0.12 + 1.1 * u * u * u * u;\n    let px = -1, py = -1;\n    for (let t = 0; t \u003c len; t += 0.6) {\n      bend += (rnd() - 0.5) * 0.05;\n      bend *= 0.95;\n      th += bend * 0.5;\n      x += 0.6 * cos(th);\n      y += 0.6 * sin(th);\n      if (x \u003c 0 || y \u003c 0 || x >= W - 1 || y >= H - 1) {\n        px = -1;\n        continue;\n      }\n      // Soft splat of the strand.\n      const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix, w = 0.32 * b * wid;\n      Fd[o] += w * (1 - fx) * (1 - fy);\n      Fd[o + 1] += w * fx * (1 - fy);\n      Fd[o + W] += w * (1 - fx) * fy;\n      Fd[o + W + 1] += w * fx * fy;\n      // The link it crossed.\n      const cx = floor(x + 0.5), cy = floor(y + 0.5);\n      if (px >= 0 && (cx !== px || cy !== py)) {\n        const dx = cx - px, dy = cy - py, a = Math.min(cy, py) * W, k = wick;\n        if (abs(dx) \u003c= 1 && abs(dy) \u003c= 1) {\n          if (dy === 0) CE[cy * W + min(cx, px)] += k;\n          else if (dx === 0) CS[a + cx] += k;\n          else if (dx === dy) CSE[a + min(cx, px)] += k;\n          else CSW[a + max(cx, px)] += k;\n        }\n      }\n      px = cx;\n      py = cy;\n    }\n  }\n  for (let i = 0; i \u003c N; i++) Fd[i] = 1 - exp(-Fd[i] * 1.6);\n  // Deeper in the pad the fibres are out of focus: a second web, laid the\n  // same way and blurred over five LEDs, gives the white its soft depth.\n  const F2 = S.F2, tmp = S.tmp;\n  F2.fill(0);\n  for (let f = 0; f \u003c 260; f++) {\n    let x = rnd() * W, y = rnd() * H, th = rnd() * PI * 2;\n    for (let t = 0; t \u003c 50; t += 1) {\n      th += (rnd() - 0.5) * 0.08;\n      x += cos(th);\n      y += sin(th);\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) F2[floor(y) * W + floor(x)] += 0.5;\n    }\n  }\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += F2[y * W + cl(x + k, 0, W - 1)];\n        tmp[i] = a / 5;\n      }\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += tmp[cl(y + k, 0, H - 1) * W + x];\n        F2[i] = a / 5;\n      }\n  }\n  for (let i = 0; i \u003c N; i++) F2[i] = 1 - exp(-F2[i] * 3);\n}\n\n// How far the toner has to wick to reach each LED from a drop at (x0, y0):\n// the cheapest path, where crossing a link costs its length divided by how\n// well fibres carry along it. A front at a given reach has run furthest\n// along the fibres, so it is fingered and follows them.\nfunction reach(S, d, x0, y0) {\n  const hk = S.hk, hv = S.hv, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW, J = S.J, LIM = 45;\n  d.fill(1e9);\n  let n = 0;\n  const push = (k, v) => {\n    let i = n++;\n    while (i > 0) {\n      const p = (i - 1) >> 1;\n      if (hk[p] \u003c= k) break;\n      hk[i] = hk[p];\n      hv[i] = hv[p];\n      i = p;\n    }\n    hk[i] = k;\n    hv[i] = v;\n  };\n  for (let y = max(0, floor(y0 - 3)); y \u003c= min(H - 1, floor(y0 + 3)); y++)\n    for (let x = max(0, floor(x0 - 3)); x \u003c= min(W - 1, floor(x0 + 3)); x++) {\n      const r = Math.hypot(x + 0.5 - x0, y + 0.5 - y0);\n      if (r \u003c 3) {\n        d[y * W + x] = r * 0.4;\n        push(r * 0.4, y * W + x);\n      }\n    }\n  const speed = (c) => 1 / (1 + 4.5 * c);\n  while (n > 0) {\n    const k = hk[0], v = hv[0];\n    // Pop.\n    n--;\n    const lk = hk[n], lv = hv[n];\n    let i = 0;\n    while (true) {\n      let c = 2 * i + 1;\n      if (c >= n) break;\n      if (c + 1 \u003c n && hk[c + 1] \u003c hk[c]) c++;\n      if (hk[c] >= lk) break;\n      hk[i] = hk[c];\n      hv[i] = hv[c];\n      i = c;\n    }\n    hk[i] = lk;\n    hv[i] = lv;\n    if (k > d[v] || k > LIM) continue;\n    const x = v % W, y = (v - x) / W, j = J[v];\n    const rel = (u, cost) => {\n      const nk = k + cost * j;\n      if (nk \u003c d[u]) {\n        d[u] = nk;\n        push(nk, u);\n      }\n    };\n    if (x \u003c W - 1) rel(v + 1, speed(CE[v]));\n    if (x > 0) rel(v - 1, speed(CE[v - 1]));\n    if (y \u003c H - 1) {\n      rel(v + W, speed(CS[v]));\n      if (x \u003c W - 1) rel(v + W + 1, 1.414 * speed(CSE[v]));\n      if (x > 0) rel(v + W - 1, 1.414 * speed(CSW[v]));\n    }\n    if (y > 0) {\n      rel(v - W, speed(CS[v - W]));\n      if (x > 0) rel(v - W - 1, 1.414 * speed(CSE[v - W - 1]));\n      if (x \u003c W - 1) rel(v - W + 1, 1.414 * speed(CSW[v - W + 1]));\n    }\n  }\n  // Paths on a grid of LEDs come out in stair steps; two passes of a 3x3\n  // blur round the front off while keeping its fingers.\n  const tmp = S.tmp;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) tmp[i] = (xx > 0 ? d[i - 1] : d[i]) + d[i] + (xx \u003c W - 1 ? d[i + 1] : d[i]);\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) d[i] = ((yy > 0 ? tmp[i - W] : tmp[i]) + tmp[i] + (yy \u003c H - 1 ? tmp[i + W] : tmp[i])) / 9;\n  }\n}\n\nfunction drop(S, x, y, age) {\n  if (S.drops.length >= MAXD) S.pool.push(S.drops.shift().d);\n  const d = S.pool.pop();\n  reach(S, d, x, y);\n  S.drops.push({ d, x, y, t: age, R: spread(d, S.toner) });\n}\n\n// How far a drop's front runs: the reach at which the wet patch covers the\n// area its toner can fill, 1800 LEDs at Toner 0 and 5400 at 1, whatever the\n// web. Found by halving.\nfunction spread(d, toner) {\n  const A = 1800 + 3600 * toner;\n  let lo = 0, hi = 40;\n  for (let it = 0; it \u003c 18; it++) {\n    const R = (lo + hi) / 2;\n    let n = 0;\n    for (let i = 0; i \u003c N; i++) if (d[i] \u003c R) n++;\n    if (n \u003c A) lo = R;\n    else hi = R;\n  }\n  return (lo + hi) / 2;\n}\n\n// Somewhere new: of six tries, the one furthest from every patch still wet.\nfunction spot(S) {\n  let bx = 32, by = 64, best = -1;\n  for (let k = 0; k \u003c 6; k++) {\n    const x = 10 + rnd() * 44, y = 12 + rnd() * 104;\n    let dd = 1e9;\n    for (const e of S.drops) dd = min(dd, Math.hypot(x - e.x, (y - e.y) * 0.7));\n    if (dd > best) (best = dd), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// A drop's front: running out fast and slowing as the toner spreads thin,\n// holding, then drying back from the far edges towards where it fell.\nconst TS = 0.8, THOLD = 3.2, TDRY = 3.6;\nfunction front(e) {\n  const t = e.t;\n  if (t \u003c 0) return -9;\n  if (t \u003c THOLD) return e.R * sqrt(1 - exp(-t / TS));\n  const full = e.R * sqrt(1 - exp(-THOLD / TS));\n  return full * (1 - (t - THOLD) / TDRY);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.toner = cl(kv[2] || 0, 0, 1);\n  S.fibre = cl(kv[3], 0, 1);\n  const wk = Math.round(S.fibre * 25);\n  if (wk !== S.webKey) {\n    S.webKey = wk;\n    web(S);\n    for (const e of S.drops) {\n      reach(S, e.d, e.x, e.y);\n      e.R = spread(e.d, S.toner);\n    }\n  }\n  if (!S.started) {\n    S.started = true;\n    // Open on a patch drying in the lower half and a fresh drop about to land higher up.\n    drop(S, 22 + rnd() * 20, 88 + rnd() * 20, 4.2);\n    drop(S, 22 + rnd() * 20, 26 + rnd() * 24, -0.2);\n    S.next = 3.2;\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  for (const e of S.drops) e.t += st;\n  S.drops = S.drops.filter((e) => {\n    if (e.t \u003c THOLD + TDRY) return true;\n    S.pool.push(e.d);\n    return false;\n  });\n  S.next -= st;\n  if ((input.btnPressed && input.btnPressed[0]) || S.next \u003c= 0) {\n    const [x, y] = spot(S);\n    drop(S, x, y, 0);\n    S.next = 3.2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, Fd = S.F, F2 = S.F2, T = S.T;\n  const h = S.hue + 0.95, key = h;\n  if (S.key !== key) {\n    const hf = h - floor(h), wm = sm((hf + 0.03) / 0.06) * (1 - sm((hf - 0.24) / 0.06));\n    hsv(h, 0.03, 1, col, 0);\n    hsv(h, 0.55 - 0.2 * wm, 1, col, 3);\n    col[6] = wm;\n    S.key = key;\n  }\n  const wm = col[6];\n  const fr = S.drops.map(front);\n  // A drying patch also pales a little as it shrinks.\n  const mo = S.drops.map((e) => (e.t \u003c THOLD ? 1 : 1 - (0.4 * (e.t - THOLD)) / TDRY));\n  // A soft light behind the pad drifts slowly; wet cotton lets it through.\n  const gx = 32 + 20 * sin(T * 0.43), gy = 64 + 44 * sin(T * 0.29 + 1);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let wet = 0, deep = 0;\n      for (let k = 0; k \u003c S.drops.length; k++) {\n        const R = fr[k];\n        if (R \u003c= 0) continue;\n        const dd = S.drops[k].d[i], w = sm((R - dd) / 1.6 + 0.5) * mo[k];\n        if (w > wet) wet = w;\n        const dp = w * cl(1 - dd / (R + 2), 0, 1);\n        if (dp > deep) deep = dp;\n      }\n      const f = Fd[i], f2 = F2[i];\n      const gdx = x - gx, gdy = y - gy, glow = exp(-(gdx * gdx + gdy * gdy) / 900);\n      // Dry: matte white, the fibres a little brighter than the gaps.\n      const ld = 0.8 + 0.1 * f2 + 0.12 * f + 0.06 * glow;\n      // Wet: translucent and lit from behind in the toner's tint, deeper\n      // towards where the drop fell, and the fibres dark against it. A dark\n      // fibre in orange or gold would be a brown line, so the fibres go\n      // towards a cool grey, there more and only half as dark.\n      const lw = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2) * (1 - (0.58 - 0.3 * wm) * f), ti = 0.65 + 0.35 * deep;\n      let wr = (col[0] + (col[3] - col[0]) * ti) * lw, wg = (col[1] + (col[4] - col[1]) * ti) * lw, wb = (col[2] + (col[5] - col[2]) * ti) * lw;\n      const l0 = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2), ds = f * (0.25 + 0.55 * wm);\n      wr += (0.4 * l0 - wr) * ds;\n      wg += (0.43 * l0 - wg) * ds;\n      wb += (0.5 * l0 - wb) * ds;\n      let r = col[0] * ld + (wr - col[0] * ld) * wet, g = col[1] * ld + (wg - col[1] * ld) * wet, b = col[2] * ld + (wb - col[2] * ld) * wet;\n      // A drop that has just landed sits as a glossy bead for a moment before\n      // it soaks in: deeper tint under it and a highlight on its upper left.\n      for (const e of S.drops) {\n        if (e.t \u003c 0 || e.t > 0.6) continue;\n        const u = e.t / 0.6, rb = 3.2 * (1 - u * u), bx = x + 0.5 - e.x, by = y + 0.5 - e.y, q = (bx * bx + by * by) / (rb * rb + 0.01);\n        if (q >= 1.6) continue;\n        const cov = sm((1.3 - q) / 0.5), hx = bx / rb + 0.4, hy = by / rb + 0.4, hl = exp(-(hx * hx + hy * hy) * 5) * 0.6 * cov;\n        r = r * (1 - 0.25 * cov) + hl;\n        g = g * (1 - 0.25 * cov) + hl;\n        b = b * (1 - 0.25 * cov) + hl;\n      }\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","layer":{"id":"layer-toner-pad","type":"code","name":"toner-pad","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Toner Pad\n// Family:  cosmetic\n// Idea:    A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cotton pad soaking up toner\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1\n//\n// Knob 1: Hue. The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive.\n// Knob 2: Speed. How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower.\n// Knob 3: Toner. How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65.\n// Knob 4: Fibre. How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges.\n// Buttons: K1 tap lets a drop fall at once, away from the patches still wet.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n// Drops on the pad at once: a fifth, from quick taps, takes the place of the oldest.\nconst MAXD = 4;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    F: F(N), F2: F(N), tmp: F(N), CE: F(N), CS: F(N), CSE: F(N), CSW: F(N), J: F(N),\n    drops: [], pool: [F(N), F(N), F(N), F(N), F(N)],\n    // The heap's keys are 32-bit like the reach they are checked against, so a\n    // key is never read as stale because it was rounded on the way in.\n    hk: F(8 * N + 16), hv: new Int32Array(8 * N + 16),\n    T: 0, next: 0, hue: 0, speed: 2, toner: 0, fibre: 0.06, webKey: NaN, started: false, col: F(12), key: NaN,\n  };\n}\n\n// The web: fibres laid at random, each a slightly wavy strand, drawn soft\n// into F (how much fibre each LED sees) and marked on the links between\n// neighbouring LEDs it runs through, which is where the toner wicks fastest.\nfunction web(S) {\n  const g = S.fibre, Fd = S.F, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW;\n  Fd.fill(0);\n  CE.fill(0);\n  CS.fill(0);\n  CSE.fill(0);\n  CSW.fill(0);\n  for (let i = 0; i \u003c N; i++) S.J[i] = 0.9 + 0.2 * rnd();\n  const count = floor(420 - 300 * g), wid = 0.6 + 1.4 * g;\n  for (let f = 0; f \u003c count; f++) {\n    let x = -20 + rnd() * (W + 40), y = -20 + rnd() * (H + 40), th = rnd() * PI * 2, bend = 0;\n    const len = 40 + 50 * rnd(), b = 0.45 + 0.55 * rnd();\n    // Most strands carry the toner a little faster than the gaps; a few\n    // carry it about six times as fast, and the front runs out along them.\n    const u = rnd(), wick = 0.12 + 1.1 * u * u * u * u;\n    let px = -1, py = -1;\n    for (let t = 0; t \u003c len; t += 0.6) {\n      bend += (rnd() - 0.5) * 0.05;\n      bend *= 0.95;\n      th += bend * 0.5;\n      x += 0.6 * cos(th);\n      y += 0.6 * sin(th);\n      if (x \u003c 0 || y \u003c 0 || x >= W - 1 || y >= H - 1) {\n        px = -1;\n        continue;\n      }\n      // Soft splat of the strand.\n      const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix, w = 0.32 * b * wid;\n      Fd[o] += w * (1 - fx) * (1 - fy);\n      Fd[o + 1] += w * fx * (1 - fy);\n      Fd[o + W] += w * (1 - fx) * fy;\n      Fd[o + W + 1] += w * fx * fy;\n      // The link it crossed.\n      const cx = floor(x + 0.5), cy = floor(y + 0.5);\n      if (px >= 0 && (cx !== px || cy !== py)) {\n        const dx = cx - px, dy = cy - py, a = Math.min(cy, py) * W, k = wick;\n        if (abs(dx) \u003c= 1 && abs(dy) \u003c= 1) {\n          if (dy === 0) CE[cy * W + min(cx, px)] += k;\n          else if (dx === 0) CS[a + cx] += k;\n          else if (dx === dy) CSE[a + min(cx, px)] += k;\n          else CSW[a + max(cx, px)] += k;\n        }\n      }\n      px = cx;\n      py = cy;\n    }\n  }\n  for (let i = 0; i \u003c N; i++) Fd[i] = 1 - exp(-Fd[i] * 1.6);\n  // Deeper in the pad the fibres are out of focus: a second web, laid the\n  // same way and blurred over five LEDs, gives the white its soft depth.\n  const F2 = S.F2, tmp = S.tmp;\n  F2.fill(0);\n  for (let f = 0; f \u003c 260; f++) {\n    let x = rnd() * W, y = rnd() * H, th = rnd() * PI * 2;\n    for (let t = 0; t \u003c 50; t += 1) {\n      th += (rnd() - 0.5) * 0.08;\n      x += cos(th);\n      y += sin(th);\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) F2[floor(y) * W + floor(x)] += 0.5;\n    }\n  }\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += F2[y * W + cl(x + k, 0, W - 1)];\n        tmp[i] = a / 5;\n      }\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += tmp[cl(y + k, 0, H - 1) * W + x];\n        F2[i] = a / 5;\n      }\n  }\n  for (let i = 0; i \u003c N; i++) F2[i] = 1 - exp(-F2[i] * 3);\n}\n\n// How far the toner has to wick to reach each LED from a drop at (x0, y0):\n// the cheapest path, where crossing a link costs its length divided by how\n// well fibres carry along it. A front at a given reach has run furthest\n// along the fibres, so it is fingered and follows them.\nfunction reach(S, d, x0, y0) {\n  const hk = S.hk, hv = S.hv, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW, J = S.J, LIM = 45;\n  d.fill(1e9);\n  let n = 0;\n  const push = (k, v) => {\n    let i = n++;\n    while (i > 0) {\n      const p = (i - 1) >> 1;\n      if (hk[p] \u003c= k) break;\n      hk[i] = hk[p];\n      hv[i] = hv[p];\n      i = p;\n    }\n    hk[i] = k;\n    hv[i] = v;\n  };\n  for (let y = max(0, floor(y0 - 3)); y \u003c= min(H - 1, floor(y0 + 3)); y++)\n    for (let x = max(0, floor(x0 - 3)); x \u003c= min(W - 1, floor(x0 + 3)); x++) {\n      const r = Math.hypot(x + 0.5 - x0, y + 0.5 - y0);\n      if (r \u003c 3) {\n        d[y * W + x] = r * 0.4;\n        push(r * 0.4, y * W + x);\n      }\n    }\n  const speed = (c) => 1 / (1 + 4.5 * c);\n  while (n > 0) {\n    const k = hk[0], v = hv[0];\n    // Pop.\n    n--;\n    const lk = hk[n], lv = hv[n];\n    let i = 0;\n    while (true) {\n      let c = 2 * i + 1;\n      if (c >= n) break;\n      if (c + 1 \u003c n && hk[c + 1] \u003c hk[c]) c++;\n      if (hk[c] >= lk) break;\n      hk[i] = hk[c];\n      hv[i] = hv[c];\n      i = c;\n    }\n    hk[i] = lk;\n    hv[i] = lv;\n    if (k > d[v] || k > LIM) continue;\n    const x = v % W, y = (v - x) / W, j = J[v];\n    const rel = (u, cost) => {\n      const nk = k + cost * j;\n      if (nk \u003c d[u]) {\n        d[u] = nk;\n        push(nk, u);\n      }\n    };\n    if (x \u003c W - 1) rel(v + 1, speed(CE[v]));\n    if (x > 0) rel(v - 1, speed(CE[v - 1]));\n    if (y \u003c H - 1) {\n      rel(v + W, speed(CS[v]));\n      if (x \u003c W - 1) rel(v + W + 1, 1.414 * speed(CSE[v]));\n      if (x > 0) rel(v + W - 1, 1.414 * speed(CSW[v]));\n    }\n    if (y > 0) {\n      rel(v - W, speed(CS[v - W]));\n      if (x > 0) rel(v - W - 1, 1.414 * speed(CSE[v - W - 1]));\n      if (x \u003c W - 1) rel(v - W + 1, 1.414 * speed(CSW[v - W + 1]));\n    }\n  }\n  // Paths on a grid of LEDs come out in stair steps; two passes of a 3x3\n  // blur round the front off while keeping its fingers.\n  const tmp = S.tmp;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) tmp[i] = (xx > 0 ? d[i - 1] : d[i]) + d[i] + (xx \u003c W - 1 ? d[i + 1] : d[i]);\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) d[i] = ((yy > 0 ? tmp[i - W] : tmp[i]) + tmp[i] + (yy \u003c H - 1 ? tmp[i + W] : tmp[i])) / 9;\n  }\n}\n\nfunction drop(S, x, y, age) {\n  if (S.drops.length >= MAXD) S.pool.push(S.drops.shift().d);\n  const d = S.pool.pop();\n  reach(S, d, x, y);\n  S.drops.push({ d, x, y, t: age, R: spread(d, S.toner) });\n}\n\n// How far a drop's front runs: the reach at which the wet patch covers the\n// area its toner can fill, 1800 LEDs at Toner 0 and 5400 at 1, whatever the\n// web. Found by halving.\nfunction spread(d, toner) {\n  const A = 1800 + 3600 * toner;\n  let lo = 0, hi = 40;\n  for (let it = 0; it \u003c 18; it++) {\n    const R = (lo + hi) / 2;\n    let n = 0;\n    for (let i = 0; i \u003c N; i++) if (d[i] \u003c R) n++;\n    if (n \u003c A) lo = R;\n    else hi = R;\n  }\n  return (lo + hi) / 2;\n}\n\n// Somewhere new: of six tries, the one furthest from every patch still wet.\nfunction spot(S) {\n  let bx = 32, by = 64, best = -1;\n  for (let k = 0; k \u003c 6; k++) {\n    const x = 10 + rnd() * 44, y = 12 + rnd() * 104;\n    let dd = 1e9;\n    for (const e of S.drops) dd = min(dd, Math.hypot(x - e.x, (y - e.y) * 0.7));\n    if (dd > best) (best = dd), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// A drop's front: running out fast and slowing as the toner spreads thin,\n// holding, then drying back from the far edges towards where it fell.\nconst TS = 0.8, THOLD = 3.2, TDRY = 3.6;\nfunction front(e) {\n  const t = e.t;\n  if (t \u003c 0) return -9;\n  if (t \u003c THOLD) return e.R * sqrt(1 - exp(-t / TS));\n  const full = e.R * sqrt(1 - exp(-THOLD / TS));\n  return full * (1 - (t - THOLD) / TDRY);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.toner = cl(kv[2] || 0, 0, 1);\n  S.fibre = cl(kv[3], 0, 1);\n  const wk = Math.round(S.fibre * 25);\n  if (wk !== S.webKey) {\n    S.webKey = wk;\n    web(S);\n    for (const e of S.drops) {\n      reach(S, e.d, e.x, e.y);\n      e.R = spread(e.d, S.toner);\n    }\n  }\n  if (!S.started) {\n    S.started = true;\n    // Open on a patch drying in the lower half and a fresh drop about to land higher up.\n    drop(S, 22 + rnd() * 20, 88 + rnd() * 20, 4.2);\n    drop(S, 22 + rnd() * 20, 26 + rnd() * 24, -0.2);\n    S.next = 3.2;\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  for (const e of S.drops) e.t += st;\n  S.drops = S.drops.filter((e) => {\n    if (e.t \u003c THOLD + TDRY) return true;\n    S.pool.push(e.d);\n    return false;\n  });\n  S.next -= st;\n  if ((input.btnPressed && input.btnPressed[0]) || S.next \u003c= 0) {\n    const [x, y] = spot(S);\n    drop(S, x, y, 0);\n    S.next = 3.2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, Fd = S.F, F2 = S.F2, T = S.T;\n  const h = S.hue + 0.95, key = h;\n  if (S.key !== key) {\n    const hf = h - floor(h), wm = sm((hf + 0.03) / 0.06) * (1 - sm((hf - 0.24) / 0.06));\n    hsv(h, 0.03, 1, col, 0);\n    hsv(h, 0.55 - 0.2 * wm, 1, col, 3);\n    col[6] = wm;\n    S.key = key;\n  }\n  const wm = col[6];\n  const fr = S.drops.map(front);\n  // A drying patch also pales a little as it shrinks.\n  const mo = S.drops.map((e) => (e.t \u003c THOLD ? 1 : 1 - (0.4 * (e.t - THOLD)) / TDRY));\n  // A soft light behind the pad drifts slowly; wet cotton lets it through.\n  const gx = 32 + 20 * sin(T * 0.43), gy = 64 + 44 * sin(T * 0.29 + 1);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let wet = 0, deep = 0;\n      for (let k = 0; k \u003c S.drops.length; k++) {\n        const R = fr[k];\n        if (R \u003c= 0) continue;\n        const dd = S.drops[k].d[i], w = sm((R - dd) / 1.6 + 0.5) * mo[k];\n        if (w > wet) wet = w;\n        const dp = w * cl(1 - dd / (R + 2), 0, 1);\n        if (dp > deep) deep = dp;\n      }\n      const f = Fd[i], f2 = F2[i];\n      const gdx = x - gx, gdy = y - gy, glow = exp(-(gdx * gdx + gdy * gdy) / 900);\n      // Dry: matte white, the fibres a little brighter than the gaps.\n      const ld = 0.8 + 0.1 * f2 + 0.12 * f + 0.06 * glow;\n      // Wet: translucent and lit from behind in the toner's tint, deeper\n      // towards where the drop fell, and the fibres dark against it. A dark\n      // fibre in orange or gold would be a brown line, so the fibres go\n      // towards a cool grey, there more and only half as dark.\n      const lw = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2) * (1 - (0.58 - 0.3 * wm) * f), ti = 0.65 + 0.35 * deep;\n      let wr = (col[0] + (col[3] - col[0]) * ti) * lw, wg = (col[1] + (col[4] - col[1]) * ti) * lw, wb = (col[2] + (col[5] - col[2]) * ti) * lw;\n      const l0 = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2), ds = f * (0.25 + 0.55 * wm);\n      wr += (0.4 * l0 - wr) * ds;\n      wg += (0.43 * l0 - wg) * ds;\n      wb += (0.5 * l0 - wb) * ds;\n      let r = col[0] * ld + (wr - col[0] * ld) * wet, g = col[1] * ld + (wg - col[1] * ld) * wet, b = col[2] * ld + (wb - col[2] * ld) * wet;\n      // A drop that has just landed sits as a glossy bead for a moment before\n      // it soaks in: deeper tint under it and a highlight on its upper left.\n      for (const e of S.drops) {\n        if (e.t \u003c 0 || e.t > 0.6) continue;\n        const u = e.t / 0.6, rb = 3.2 * (1 - u * u), bx = x + 0.5 - e.x, by = y + 0.5 - e.y, q = (bx * bx + by * by) / (rb * rb + 0.01);\n        if (q >= 1.6) continue;\n        const cov = sm((1.3 - q) / 0.5), hx = bx / rb + 0.4, hy = by / rb + 0.4, hl = exp(-(hx * hx + hy * hy) * 5) * 0.6 * cov;\n        r = r * (1 - 0.25 * cov) + hl;\n        g = g * (1 - 0.25 * cov) + hl;\n        b = b * (1 - 0.25 * cov) + hl;\n      }\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower."},{"name":"Toner","min":0,"max":1,"about":"How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65."},{"name":"Fibre","min":0,"max":1,"about":"How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges."}],"start":[0,2,0,0.06],"measures":{"motion":0.0391,"detail":0.0359,"edges":0.0818,"complexity":1.8818,"coverage":1,"colour":0.1257,"drift":0.1404},"knobResponse":[0.0571,0.1234,0.1866,0.1574]},{"slug":"tower-crane","title":"Tower Crane","family":"construction","round":24,"note":"해 질 녘 올라가는 콘크리트 건물 옆에 노란 타워크레인이 서서, 마당의 벽판과 철근 다발, 거푸집, 콘크리트 버킷을 차례로 꼭대기 층에 올려요. 붐이 원근 속에서 돌며 짧아졌다 길어지고, 버킷이 바닥을 부으면 건물이 한 층 자라 새 층 창에 불이 들어와요. K1 을 끝까지 돌리면 밤이 되어 투광등이 켜져요.","idea":"A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.","buttons":"K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.","code":"// ===== Patternflow pattern =====\n// Title:   Tower Crane\n// Family:  construction\n// Idea:    A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower cranes that stand beside a rising concrete frame\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1\n//\n// Knob 1: Dusk. From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit.\n// Knob 2: Speed. At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower.\n// Knob 3: Floors. How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof.\n// Knob 4: Wind. Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable.\n// Buttons: K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street level, one storey, and the most floors that fit under the jib.\nconst [GY, FH, NMAX] = [114, 6, 13];\n// The frame, x 3 to 39: six columns two LEDs wide, five bays, the one by the crane the lift core.\nconst [BX0, BX1, CORE] = [3, 39, 4];\n// Mast centre, the jib's bottom chord at the root, jib and counter-jib lengths, top of the tower head.\nconst [MX, JY, JL, CJL, APEX] = [46, 15, 42, 15, 3];\n// The hook's highest row, the radius it picks at over the yard, the yard's load line.\nconst [HTOP, PICK_R, PICK_Y] = [21, 11, 120];\n// Wall panel, rebar, formwork, bucket: width, height, the column it is set down on.\nconst LW = [8, 11, 9, 5], LH = [5, 2, 4, 6], DROP = [35, 20, 12, 6];\n// Sky top, middle, horizon; sun; lit and shaded cloud; light on things. Afternoon to night.\nconst KEYS = [\n  [34, 72, 156, 128, 142, 186, 255, 190, 112, 255, 236, 170, 255, 236, 204, 150, 130, 160, 1, 0.9, 0.74],\n  [30, 50, 130, 168, 108, 140, 255, 140, 62, 255, 168, 78, 255, 170, 116, 104, 70, 108, 0.86, 0.64, 0.48],\n  [16, 20, 70, 64, 44, 96, 196, 86, 78, 226, 90, 52, 176, 92, 104, 46, 36, 66, 0.44, 0.38, 0.46],\n  [4, 6, 22, 10, 14, 40, 44, 34, 60, 0, 0, 0, 42, 36, 56, 16, 16, 30, 0.2, 0.21, 0.3],\n];\nconst FLC = [1, 0.94, 0.82];\nconst YEL = [255, 196, 22];\n// The floodlight tower in the yard and where it is aimed.\nconst [LX, LY] = [60.5, 84.5];\nconst [AX, AY] = (([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)])([-34, 31]);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F(N * 3), bg: F(N * 3), lm: F(N * 3), fl: F(N), row: F(H * 3), cloud: F(128 * 64), sky: new Int16Array(W),\n    t: 0, rt: 0, nk: -1, stage: 3, cage: 1, form: 1, item: -1, lightNew: -1, th: PI, r: 40, load: 3, ph: \"I\", sw: 0, swv: 0, vx: 0, ptx: 6,\n    on: new Uint8Array(NMAX), onT: F(NMAX).fill(9), nsw: 2.4, cx: 0, sp: [], weld: 0.4, welding: 0, wk: [], mix: 2, cars: [], ncar: 1.4,\n  });\n  // Clouds: a strip of soft noise that wraps every 128 columns.\n  for (let i = 0; i \u003c 128 * 64; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.05, y * 0.13) + 0.3 * vn(X * 0.13, y * 0.3 + 9) + 0.15 * vn(X * 0.4, y * 0.6 + 3);\n    P.cloud[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  // The city behind: blocks of four to nine columns.\n  for (let x = 0, w = 0, h = 0; x \u003c W; x++, w--) w > 0 || ((w = 4 + floor(rnd() * 6)), (h = 98 + floor(rnd() * 12))), (P.sky[x] = h);\n  for (let k = 0; k \u003c NMAX; k++) (P.on[k] = rnd() \u003c 0.35 ? 1 : 0), k \u003c 3 && P.wk.push({ x: 8 + k * 11 + rnd() * 4, tx: 8 + rnd() * 28, wait: rnd() * 2 });\n}\n\n// A move of the crane: slew angle, trolley radius and hook row, eased to where they go.\nfunction go(P, ph, dur, to) {\n  Object.assign(P, { ph, pt: 0, pd: dur, f0: [P.th, P.r, P.hy], f1: [to.th ?? P.th, to.r ?? P.r, to.hy ?? P.hy] });\n}\n\nconst deckY = (P) => GY - P.n * FH;\nconst tip = (P) => [MX + P.r * cos(P.th), JY + 1 - P.r * sin(P.th) * 0.1];\nconst bucketHy = (P) => deckY(P) - FH - 2 - LH[3] - 3;\n\nfunction finishFloor(P) {\n  if (P.n \u003c NMAX) P.n++;\n  else P.top = 1;\n  // The floor that has just been glazed lights up a moment later.\n  Object.assign(P, { stage: 0, cage: 0, form: 0, item: -1, pourX: -1, nsw: min(P.nsw, 0.7), lightNew: P.n - 3 });\n}\n\n// Down to the yard, rig, hoist, slew over, lower, set down (or pour), up again.\nfunction step(P) {\n  const T = P.ph, type = P.load;\n  if (T === \"A\") go(P, \"B\", 0.5, {});\n  else if (T === \"B\") (P.load = P.top && P.stage > 2 ? (P.stage = 0) : P.stage), go(P, \"C\", 2.8, { hy: HTOP });\n  else if (T === \"C\") go(P, \"D\", 2.4, { th: P.th + PI, r: MX - DROP[type] });\n  else if (T === \"D\") go(P, \"E\", 1.5, { hy: type === 3 ? bucketHy(P) : deckY(P) - 4 - LH[type] });\n  else if (T === \"E\") {\n    if (type === 3) (P.pourX = BX0), go(P, \"P\", 3, { r: MX - BX1 + 2 });\n    else {\n      // Set down: the panel goes into the core, rebar and formwork lie on the deck.\n      const x = round(tip(P)[0]);\n      if (type) (P.item = type), (P.ix = x), type \u003c 2 ? (P.cage = 0) : (P.form = 0);\n      for (const w of P.wk) w.tx = x + (rnd() - 0.5) * 10;\n      (P.stage = max(P.stage, type + 1)), (P.load = -1), go(P, \"F\", 0.9, {});\n    }\n  } else if (T === \"P\" || T === \"I\") finishFloor(P), go(P, \"F\", 0.4, {});\n  else if (T === \"F\") go(P, \"G\", 0.5, { hy: P.hy - 12 });\n  else (P.load = -1), go(P, \"A\", 1.5, { th: (floor(P.th / TAU + 1e-3) + 1) * TAU, r: PICK_R, hy: PICK_Y - LH[P.stage] - 3 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nf = round(cl(k[2], 9, 13));\n  if (nf !== P.nk) {\n    // A new count of floors: the hook keeps its place over the deck.\n    const sh = (nf - P.n) * FH;\n    P.nk = P.n = nf;\n    P.top = 0;\n    if (P.ph === \"I\") (P.hy = bucketHy(P)), (P.pourX = BX0), go(P, \"I\", 3, { r: MX - BX1 + 2 });\n    else if (\"EPFG\".includes(P.ph)) (P.hy -= sh), (P.f0[2] -= sh), (P.f1[2] -= sh);\n  }\n  P.w = cl(k[3], -1, 1);\n  const t = (P.t += d), k0 = cl(k[0], 0, 1);\n  P.rt += rd;\n  // The evening deepens a little and comes back once every minute and a half.\n  P.h = k0 + (1 - k0) * 0.05 * (1 - cos((TAU * t) / 90));\n  // K1 tap: everything for the floor is in place at once and the deck pours.\n  if (input.btnPressed && input.btnPressed[0] && P.pourX \u003c 0 && !P.top) Object.assign(P, { pourBtn: 1, pourX: BX0, stage: 3, cage: 1, form: 1 });\n  const lin = min(1, (P.pt += d) / P.pd), u = sm(0, 1, lin), pour = P.ph === \"P\" || P.ph === \"I\";\n  P.th = mix(P.f0[0], P.f1[0], u);\n  P.r = mix(P.f0[1], P.f1[1], pour ? lin : u);\n  P.hy = mix(P.f0[2], P.f1[2], u);\n  if (pour) P.pourX = max(P.pourX, tip(P)[0] + 2);\n  if (lin >= 1) step(P);\n  if (P.pourBtn && (P.pourX += 30 * d) > BX1) (P.pourBtn = 0), finishFloor(P);\n  // The load swings on its cable when the trolley speeds up or slows, and in the wind.\n  const [tx, ty] = tip(P), L = max(4, P.hy - ty);\n  if (d > 0) {\n    const vx = (tx - P.ptx) / d, ax = cl((vx - P.vx) / d, -30, 30), eq = P.w * (0.06 + 0.04 * sin(t * 1.7)) * (P.load >= 0 ? 1 : 1.6);\n    P.swv += (-(110 / L) * (P.sw - eq) - (0.5 * ax) / L - 1.4 * P.swv) * d;\n    P.sw = cl(P.sw + P.swv * d, -0.3, 0.3);\n    [P.ptx, P.vx] = [tx, vx];\n  }\n  // The rigger steadies the load before it goes up.\n  if (P.ph === \"B\") (P.sw *= 1 - min(1, 5 * d)), (P.swv *= 1 - min(1, 5 * d));\n  P.swx = cl(L * sin(P.sw), -2.5, 2.5);\n  // The rebar is tied up the columns and the formwork goes round them.\n  if (P.stage > 1) P.cage = min(1, P.cage + d * 0.3);\n  if (P.stage > 2) P.form = min(1, P.form + d * 0.3);\n  // A floor switches its lights on or off together.\n  for (let i = 0; i \u003c NMAX; i++) P.onT[i] += rd;\n  if ((P.nsw -= d) \u003c= 0) {\n    const f = P.lightNew >= 0 ? P.lightNew : floor(rnd() * max(1, P.n - 2));\n    P.on[f] = P.lightNew >= 0 ? 1 : 1 - P.on[f];\n    Object.assign(P, { lightNew: -1, nsw: 1.6 + rnd() * 2 }).onT[f] = 0;\n  }\n  // Welding on the deck, and its sparks falling down the face.\n  if ((P.weld -= d) \u003c= 0) (P.welding = 1 - P.welding), (P.weld = P.welding ? 1.4 + rnd() * 1.6 : 0.4 + rnd() * 0.8);\n  const wy = deckY(P) - 2;\n  if (P.welding) for (let n = 0; n \u003c 4; n++) if (rnd() \u003c d * 18) P.sp.push([18 + rnd(), wy, (rnd() - 0.5) * 14, -4 - rnd() * 7, 1 + rnd() * 0.9, 18.5, wy]);\n  P.sp = P.sp.filter((s) => ((s[5] = s[0]), (s[6] = s[1]), (s[3] += 46 * d), (s[0] += s[2] * d), (s[1] += s[3] * d), (s[4] -= d) > 0 && s[1] \u003c GY));\n  // Workers walk about the deck.\n  for (const w of P.wk)\n    if (abs(w.tx - w.x) > 0.3) w.x = cl(w.x + cl(w.tx - w.x, -4 * d, 4 * d), 5, 37);\n    else if ((w.wait -= d) \u003c= 0) (w.tx = 6 + rnd() * 30), (w.wait = 1 + rnd() * 3);\n  // The mixer comes in for the bucket and backs out after the pour.\n  P.mix += cl((P.stage >= 2 && !P.top ? 2 : -26) - P.mix, -9 * d, 9 * d);\n  // Cars along the street.\n  if ((P.ncar -= d) \u003c= 0) (P.ncar = 2 + rnd() * 4), P.cars.push(rnd() \u003c 0.5 ? [-8, 11 + rnd() * 6, floor(rnd() * 4)] : [W + 1, -11 - rnd() * 6, floor(rnd() * 4)]);\n  P.cars = P.cars.filter((c) => ((c[0] += c[1] * d), c[0] > -12 && c[0] \u003c W + 12));\n  // Clouds drift with the wind.\n  P.cx += (1.5 + 9 * P.w) * d;\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\n// A surface: its own colour under the light that falls on that LED.\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\n// A lamp's glow round it, and a worker three LEDs tall.\nconst glow = (x, y, c, k) => {\n  for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (i || j) add(x + i, y + j, c, k / (i * i + j * j));\n};\nconst man = (x, y, head = [250, 250, 240]) => (sur(x, y, 50, 56, 90), sur(x, y - 1, 255, 130, 20), surc(x, y - 2, head));\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.2 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\n\n// Sky, sun and the city beyond, kept until the evening moves on.\nfunction sky(P, K) {\n  const h = P.h, B = P.bg;\n  if (round(h * 300) === P.bgKey) return F.set(B);\n  P.bgKey = round(h * 300);\n  const row = P.row, night = sm(0.4, 0.9, h), vis = 1 - sm(0.78, 0.95, h);\n  for (let y = 0; y \u003c H; y++) {\n    const f = min(1, y / GY), a = f \u003c 0.5 ? 0 : 3, u = f \u003c 0.5 ? f / 0.5 : (f - 0.5) / 0.5;\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(K[a + c], K[a + 3 + c], a ? u * u : sm(0, 1, u));\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    if (y >= P.sky[x]) {\n      const win = night * (hash(x, y * 3) \u003c 0.16 && y & 1 ? 1 : 0);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = mix(K[3 + c], K[6 + c], 0.55) * 0.6 * (x & 1 ? 1 : 0.86) + win * [210, 160, 90][c];\n      continue;\n    }\n    const d = Math.hypot(x - 54.5, y - 61.5 - 52 * h), g = vis * (0.55 * exp(-((d - 3.6) ** 2) / 50) + 0.3 * exp(-d / 16));\n    for (let c = 0; c \u003c 3; c++) B[o + c] = d \u003c 3.6 && vis > 0 ? mix(row[y * 3 + c], K[9 + c], vis) : row[y * 3 + c] + K[9 + c] * g * 0.7;\n  }\n  F.set(B);\n}\n\nfunction clouds(P, K) {\n  const cover = 0.56 - 0.18 * abs(P.w), C = P.cloud;\n  for (let y = 0; y \u003c 100; y++) {\n    const ty = floor(y * 0.6) & 63, fade = 1 - sm(50, 100, y);\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= P.sky[x]) continue;\n      const v = C[(ty \u003c\u003c 7) | (floor(x + P.cx) & 127)], a = cl((v - cover) * 7, 0, 1) * fade, lt = cl(1.25 - (v - cover) * 4 + (y - 40) / 120, 0, 1);\n      if (a > 0.01) put(x, y, [mix(K[15], K[12], lt), mix(K[16], K[13], lt), mix(K[17], K[14], lt)], a * 0.92);\n    }\n  }\n}\n\n// The light on every surface: the day, cloud shadows, the floodlights after dusk.\nfunction light(P, K) {\n  const sunA = 1 - sm(0.45, 0.85, P.h), fon = sm(0.3, 0.55, P.h), FLb = P.fl, C = P.cloud;\n  const cover = 0.5 - 0.18 * abs(P.w), [tx, ty] = tip(P), hx = tx + P.swx * 0.5;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, v = C[((floor(y * 0.25 + 20) & 63) \u003c\u003c 7) | (floor(x * 0.8 + P.cx * 2.2 + 40) & 127)];\n    let fl = 0;\n    if (fon > 0) {\n      const dx = x + 0.5 - LX, dy = y + 0.5 - LY, dd = Math.hypot(dx, dy) + 0.01, ca = (dx * AX + dy * AY) / dd;\n      fl = (exp((ca - 1) / 0.03) * 1.2) / (1 + (dd / 60) ** 2);\n      if (y > ty + 1) {\n        const q = (x + 0.5 - hx) / (1.2 + 0.16 * (y - ty));\n        fl += (exp(-q * q) * 0.7) / (1 + ((y - ty) / 90) ** 2);\n      }\n      fl *= fon;\n    }\n    FLb[i] = fl;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[18 + c] * (1 - 0.45 * sunA * cl((v - cover) * 5, 0, 1)) + fl * FLC[c];\n  }\n}\n\n// The yard's gravel, the kerb, the street and its markings.\nfunction ground() {\n  for (let i = GY * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, n = 0.82 + 0.3 * hash(x, y + 900);\n    y === 126 && (x + 6) % 8 \u003c 2 ? sur(x, y, 190, 180, 120) : y > 123 ? sur(x, y, 62 * n, 60 * n, 66 * n) : y > 122 ? sur(x, y, 150, 146, 140) : sur(x, y, 150 * n, 126 * n, 98 * n);\n  }\n}\n\n// The concrete frame, its windows, and the floor going up on the deck.\nfunction building(P) {\n  const n = P.n, dk = deckY(P), g = n - 2, night = sm(0.4, 0.9, P.h), row = P.row;\n  for (let y = dk; y \u003c GY; y++) {\n    const k = floor((GY - 1 - y) / FH), ry = y - (GY - (k + 1) * FH);\n    for (let x = BX0; x \u003c= BX1; x++) {\n      const cx = (x - BX0) % 7, b = floor((x - BX0) / 7), bx = cx - 2;\n      if (ry === 0) sur(x, y, 228, 220, 206);\n      else if (cx \u003c 2) sur(x, y, 206, 198, 184);\n      else if (ry === 1) k \u003c g ? sur(x, y, 78, 86, 102) : sur(x, y, 178, 172, 162);\n      else if (b === CORE) sur(x, y, 196, 190, 180, (x + y) % 9 === 0 ? 0.8 : 0.95);\n      else if (k \u003c g && bx === 2) sur(x, y, 80, 80, 88);\n      else if (k \u003c g) {\n        // Glass: the sky in it, or a lit room behind.\n        const o = (y * W + x) * 3, rr = cl(round(y * 0.3 + 4), 0, GY - 1) * 3;\n        let on = P.on[k] ? hash(k, b * 7 + 1) \u003c 0.92 : hash(k, b * 7 + 3) \u003c 0.1 + 0.6 * night;\n        if (on && P.on[k] && P.onT[k] \u003c 0.5) on = hash(k * 13 + b, floor(P.onT[k] * 22)) > 0.45;\n        const lc = hash(k, b + 40) \u003c 0.75 ? [255, 184, 88] : [200, 228, 255], a = on ? 0.9 + 0.1 * night : 0;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(row[rr + c] * 0.42 + c * 5, lc[c], a) * (ry === 2 ? 1.12 : 1);\n      } else {\n        // An open floor: dark inside, the back columns, a work lamp at night.\n        if (night > 0.05 && bx === 2 && ry === 2 && hash(k, b) \u003c 0.6) put(x, y, [255, 214, 150].map((v) => v * night));\n        else sur(x, y, 60, 54, 52, bx === 2 ? 0.6 : 0.28);\n      }\n    }\n  }\n  // Ties from the mast to the frame.\n  for (let k = 2; k \u003c n; k += 3) for (let x = BX1 + 1; x \u003c MX - 2; x++) sur(x, GY - (k + 1) * FH + 1, 200, 170, 60);\n\n  // The floor on the deck: starter bars, the core panel, the rebar cages, the formwork.\n  const top = dk - FH, st = P.top ? 0 : P.stage;\n  if (st > 0) for (let y = top + 1; y \u003c dk; y++) for (let x = BX0 + 30; x \u003c= BX0 + 34; x++) sur(x, y, 176, 172, 164, x === BX0 + 32 ? 0.8 : 1);\n  for (let ci = 0; ci \u003c 6; ci++) {\n    const x = BX0 + ci * 7;\n    for (let j = 1; j \u003c= max(2, st > 1 ? round(P.cage * 5) : 0); j++) sur(x, dk - j, 176, 96, 50), j & 1 && sur(x + 1, dk - j, 130, 76, 44);\n    if (st > 2 && ci / 6 \u003c P.form) for (let j = 1; j \u003c FH; j++) sur(x, dk - j, 218, 162, 84), sur(x + 1, dk - j, 196, 140, 70);\n  }\n  if (st > 2) for (let x = BX0; x \u003c= BX0 + 36 * P.form; x++) for (let j = 0; j \u003c ((x - BX0) % 7 === 4 ? FH : 1); j++) j ? sur(x, top + j, 150, 150, 156, 0.8) : sur(x, top, 214, 156, 80);\n  if (P.pourX >= 0 && !P.top) for (let x = BX0; x \u003c= min(BX1, P.pourX); x++) sur(x, top, 140, 140, 150), (x - BX0) % 7 \u003c 2 && sur(x, top + 1, 140, 140, 150, 0.9);\n  if (P.item > 0) drawLoad(P.item, P.ix, dk - LH[P.item]);\n  // Topped out: a little fir tree on the roof.\n  if (P.top) for (let j = 0; j \u003c 5; j++) for (let i = -j; i \u003c= j; i++) sur(24 + i, dk - 6 + j, 40, 120, 60);\n  // The workers on the deck in hi-vis, and the welder by a column.\n  for (const w of P.wk) man(w.x, dk - 1);\n  man(17, dk - 1, [60, 60, 70]);\n}\n\n// One of the four loads, centred on x with its top on row y0.\nfunction drawLoad(type, cx, y0) {\n  const w = LW[type], h = LH[type], x0 = round(cx - w / 2), y = round(y0);\n  for (let j = 0; j \u003c h; j++)\n    for (let i = 0; i \u003c w; i++) {\n      const X = x0 + i, Y = y + j;\n      if (type === 0) (i \u003c 2 || i > 4 || !j || j > 3) && sur(X, Y, 150, 146, 140, i && j ? 1 : 1.25);\n      else if (type === 1) sur(X, Y, i === 2 || i === 8 ? 60 : 186, i === 2 || i === 8 ? 54 : 92, 48, j ? 0.72 : 1);\n      else if (type === 2) sur(X, Y, 226, 170, 92, j & 1 ? 0.55 : 1);\n      else if (i >= (j >= h - 2 ? 1 : 0) && i \u003c w - (j >= h - 2 ? 1 : 0)) sur(X, Y, 120, 120, 128, j === 1 ? 0.6 : j === 0 ? 1.3 : 1);\n    }\n  if (type === 3) sur(x0 + 2, y + h, 70, 70, 76);\n}\n\n// The hook block, its cable and slings, and whatever it carries.\nfunction hook(P) {\n  const [tx, ty] = tip(P), hx = tx + P.swx, hy = P.hy;\n  line(tx, ty + 1, hx, hy - 1, [120, 120, 130], 0.9);\n  for (let i = -1; i \u003c= 1; i++) surc(hx + i, hy - 1, YEL);\n  sur(hx, hy, 60, 60, 66), sur(hx, hy + 1, 90, 90, 96);\n  if (P.load >= 0) {\n    const w = LW[P.load] / 2 - 0.5;\n    line(hx, hy + 1, hx - w, hy + 3, [110, 110, 116], 0.8), line(hx, hy + 1, hx + w, hy + 3, [110, 110, 116], 0.8);\n    drawLoad(P.load, hx + 0.5, hy + 3);\n    // Concrete runs from the bucket into the forms.\n    if (P.ph === \"P\" || P.ph === \"I\") for (let j = hy + 10; j \u003c deckY(P) - FH; j++) sur(hx + 0.5, j, 140, 140, 150);\n  }\n}\n\n// The yard: stock waiting by the crane, the load being rigged, the floodlight tower.\nfunction yard(P) {\n  drawLoad(2, 53, 115), drawLoad(1, 54, 118);\n  if (P.ph === \"A\" || P.ph === \"B\") {\n    const s = P.stage, x = MX + PICK_R - LW[s] / 2 - 2, arm = P.ph === \"B\" ? (P.pt * 6) & 1 : 0;\n    drawLoad(s, MX + PICK_R + 0.5, PICK_Y - LH[s]);\n    man(x, PICK_Y - 1), sur(x + 1, PICK_Y - 2 - arm, 255, 130, 20);\n  }\n  for (let y = LY; y \u003c 122; y++) sur(62, y, 120, 120, 126);\n  const fon = sm(0.3, 0.55, P.h);\n  for (let x = 59; x \u003c= 62; x++) put(x, 83, [90, 90, 96]), put(x, 84, x \u003c 62 ? [70 + 185 * fon, 70 + 180 * fon, 76 + 154 * fon] : [90, 90, 96]);\n}\n\n// The crane: mast, ties, slewing ring, cab, tower head, jib and counter-jib.\nfunction crane(P) {\n  const c = cos(P.th), sn = sin(P.th), blink = P.rt % 1.2 \u003c 0.55, fon = sm(0.3, 0.55, P.h);\n  const jib = () => {\n    for (let s = 0; s \u003c= JL; s += 0.3) {\n      // Swung towards you the tip is nearer and bigger, swung away it shrinks.\n      const sc = 1 + (0.45 * s * sn) / JL, px = MX + s * c, py = JY - s * sn * 0.1, ht = (3 - (1.2 * s) / JL) * sc, tri = abs(((s / 2.4) % 2) - 1), wd = sn * 1.2 * sc;\n      surc(px - wd, py, YEL, 0.85), surc(px + wd, py, YEL, 0.85), surc(px, py - ht, YEL), surc(px + wd * (1 - tri), py - tri * ht, YEL, 0.75);\n    }\n  };\n  const counter = () => {\n    for (let s = 0; s \u003c= CJL; s += 0.3) {\n      const px = MX - s * c, py = JY + s * sn * 0.1;\n      surc(px, py, YEL, 0.85), surc(px, py - 1, YEL, s % 2 \u003c 0.6 ? 0.8 : 0);\n      if (s > 6 && s \u003c 8.5) for (let j = 1; j \u003c= 2; j++) sur(px, py - 1 - j, 80, 84, 92);\n      if (s > CJL - 5) for (let j = 1; j \u003c= 4; j++) sur(px, py + j, 190, 184, 172, (floor(s) & 1) === 0 ? 0.8 : 1);\n    }\n  };\n  const pend = () => {\n    line(MX, APEX + 1, MX + 28 * c, JY - 28 * sn * 0.1 - 2.2, [110, 104, 96], 0.8);\n    line(MX, APEX + 1, MX - CJL * c, JY + CJL * sn * 0.1 - 1, [110, 104, 96], 0.8);\n  };\n  const cab = () => {\n    for (let q = 0, i, j; q \u003c 12; q++)\n      (i = (q % 3) - 1), (j = (q / 3) | 0), j % 3 && i > -1 ? put(MX + 3.5 * c + i, JY + 1 + j, P.h > 0.5 ? [255 * fon, 226 * fon, 160 * fon] : [110, 150, 196]) : surc(MX + 3.5 * c + i, JY + 1 + j, [240, 232, 210]);\n  };\n  // What faces away is drawn first.\n  if (sn \u003c 0) jib(), pend(), cab();\n  else counter(), pend();\n  // The mast: two chords and a lattice of diagonals.\n  for (let y = JY + 3; y \u003c 118; y++) {\n    surc(MX - 2, y, YEL, 0.72), surc(MX + 2, y, YEL);\n    for (let xi = 1; xi \u003c= 3; xi++) if (((y + xi) & 3) === 0 || ((y - xi) & 3) === 0) surc(MX - 2 + xi, y, YEL, 0.8);\n  }\n  for (let x = MX - 4; x \u003c= MX + 4; x++) sur(x, 117, 170, 166, 160), sur(x, 118, 170, 166, 160), sur(x, 119, 170, 166, 160), abs(x - MX) \u003c 4 && (sur(x, JY + 1, 80, 80, 86), sur(x, JY + 2, 110, 110, 116));\n  // The tower head.\n  for (let y = APEX; y \u003c= JY - 3; y++) {\n    const hw = (1.6 * (y - APEX)) / (JY - 3 - APEX);\n    surc(MX - hw, y, YEL), surc(MX + hw, y, YEL);\n    if ((y & 1) === 0) for (let x = round(MX - hw); x \u003c= MX + hw; x++) surc(x, y, YEL, 0.8);\n  }\n  if (sn \u003c 0) counter(), pend();\n  else jib(), pend(), cab();\n  // The trolley, and the warning lights on the head and at the jib tip.\n  const [tx, ty] = tip(P);\n  sur(tx - 1, ty, 90, 90, 96), sur(tx, ty, 90, 90, 96), sur(tx + 1, ty, 90, 90, 96);\n  for (const [x, y] of [[MX, APEX - 1], [MX + JL * c, JY - JL * sn * 0.1 - 2]]) {\n    put(x, y, blink ? [255, 40, 28] : [110, 20, 16]);\n    if (blink) glow(x, y, [255, 30, 20], 0.12 + 0.3 * fon);\n  }\n}\n\n// The mixer, its drum turning.\nfunction mixer(P) {\n  const x0 = round(P.mix), night = sm(0.4, 0.9, P.h);\n  if (x0 \u003c -24) return;\n  for (let y = 115; y \u003c= 121; y++)\n    for (let i = 0; i \u003c 13; i++) {\n      const e = ((i - 6) / 6.8) ** 2 + ((y - 118 + (i - 6) * 0.18) / 3.4) ** 2;\n      if (e \u003c 1) sur(x0 + i, y, ...((((i * 0.7 + y * 1.4 - P.t * 9) % 4) + 4) % 4 \u003c 2 ? [240, 120, 40] : [230, 228, 220]), 1 - 0.3 * e);\n    }\n  for (let i = 0; i \u003c 20; i++) sur(x0 + i, 122, 70, 70, 76);\n  for (let y = 116; y \u003c 122; y++) for (let i = 15; i \u003c 20; i++) sur(x0 + i, y, ...(y \u003c 119 && i > 16 ? [110, 150, 190] : [230, 60, 40]));\n  for (const i of [2, 5, 16]) sur(x0 + i, 123, 30, 30, 34), sur(x0 + i + 1, 123, 30, 30, 34);\n  if (night > 0.1) add(x0 + 20, 120, [255, 240, 200], night);\n}\n\nfunction cars(P) {\n  const night = sm(0.35, 0.9, P.h), cols = [[200, 40, 36], [220, 220, 226], [40, 80, 170], [60, 64, 70]];\n  for (const [cx, v, ci] of P.cars) {\n    const x0 = round(cx), fx = v > 0 ? x0 + 6 : x0;\n    for (let i = 0; i \u003c 21; i++) i \u003c 14 ? surc(x0 + (i >> 1), 125 + (i & 1), cols[ci]) : i \u003c 17 && sur(x0 + i - 12, 124, 120, 150, 180);\n    add(fx, 125, [255, 250, 220], 0.3 + night), add(x0 + 6 - fx + x0, 125, [255, 20, 10], 0.2 + night);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  const hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  // The hook goes behind the frame when the jib swings away from you.\n  const behind = sin(P.th) \u003c -0.15, y = deckY(P) - 2, FLb = P.fl;\n  sky(P, K), clouds(P, K), light(P, K), ground(), behind && hook(P), building(P), yard(P), crane(P), mixer(P), cars(P), behind || hook(P);\n  // The welding arc, its sparks, and the floodlight beams in the dusk air.\n  if (P.welding) put(18, y, [235, 244, 255]), glow(18, y, [160, 190, 255], 0.36 + 0.24 * rnd());\n  for (const [x, y, , , l, px, py] of P.sp) put(px, py, [255, 120, 30], min(1, l * 1.4) * 0.6), put(x, y, [255, 170 + 80 * min(1, l), 70 * min(1, l)], min(1, l * 1.4));\n  if (P.h > 0.3) for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (FLb[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += FLb[i] * 22 * FLC[c];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-tower-crane","type":"code","name":"tower-crane","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tower Crane\n// Family:  construction\n// Idea:    A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower cranes that stand beside a rising concrete frame\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1\n//\n// Knob 1: Dusk. From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit.\n// Knob 2: Speed. At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower.\n// Knob 3: Floors. How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof.\n// Knob 4: Wind. Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable.\n// Buttons: K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street level, one storey, and the most floors that fit under the jib.\nconst [GY, FH, NMAX] = [114, 6, 13];\n// The frame, x 3 to 39: six columns two LEDs wide, five bays, the one by the crane the lift core.\nconst [BX0, BX1, CORE] = [3, 39, 4];\n// Mast centre, the jib's bottom chord at the root, jib and counter-jib lengths, top of the tower head.\nconst [MX, JY, JL, CJL, APEX] = [46, 15, 42, 15, 3];\n// The hook's highest row, the radius it picks at over the yard, the yard's load line.\nconst [HTOP, PICK_R, PICK_Y] = [21, 11, 120];\n// Wall panel, rebar, formwork, bucket: width, height, the column it is set down on.\nconst LW = [8, 11, 9, 5], LH = [5, 2, 4, 6], DROP = [35, 20, 12, 6];\n// Sky top, middle, horizon; sun; lit and shaded cloud; light on things. Afternoon to night.\nconst KEYS = [\n  [34, 72, 156, 128, 142, 186, 255, 190, 112, 255, 236, 170, 255, 236, 204, 150, 130, 160, 1, 0.9, 0.74],\n  [30, 50, 130, 168, 108, 140, 255, 140, 62, 255, 168, 78, 255, 170, 116, 104, 70, 108, 0.86, 0.64, 0.48],\n  [16, 20, 70, 64, 44, 96, 196, 86, 78, 226, 90, 52, 176, 92, 104, 46, 36, 66, 0.44, 0.38, 0.46],\n  [4, 6, 22, 10, 14, 40, 44, 34, 60, 0, 0, 0, 42, 36, 56, 16, 16, 30, 0.2, 0.21, 0.3],\n];\nconst FLC = [1, 0.94, 0.82];\nconst YEL = [255, 196, 22];\n// The floodlight tower in the yard and where it is aimed.\nconst [LX, LY] = [60.5, 84.5];\nconst [AX, AY] = (([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)])([-34, 31]);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F(N * 3), bg: F(N * 3), lm: F(N * 3), fl: F(N), row: F(H * 3), cloud: F(128 * 64), sky: new Int16Array(W),\n    t: 0, rt: 0, nk: -1, stage: 3, cage: 1, form: 1, item: -1, lightNew: -1, th: PI, r: 40, load: 3, ph: \"I\", sw: 0, swv: 0, vx: 0, ptx: 6,\n    on: new Uint8Array(NMAX), onT: F(NMAX).fill(9), nsw: 2.4, cx: 0, sp: [], weld: 0.4, welding: 0, wk: [], mix: 2, cars: [], ncar: 1.4,\n  });\n  // Clouds: a strip of soft noise that wraps every 128 columns.\n  for (let i = 0; i \u003c 128 * 64; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.05, y * 0.13) + 0.3 * vn(X * 0.13, y * 0.3 + 9) + 0.15 * vn(X * 0.4, y * 0.6 + 3);\n    P.cloud[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  // The city behind: blocks of four to nine columns.\n  for (let x = 0, w = 0, h = 0; x \u003c W; x++, w--) w > 0 || ((w = 4 + floor(rnd() * 6)), (h = 98 + floor(rnd() * 12))), (P.sky[x] = h);\n  for (let k = 0; k \u003c NMAX; k++) (P.on[k] = rnd() \u003c 0.35 ? 1 : 0), k \u003c 3 && P.wk.push({ x: 8 + k * 11 + rnd() * 4, tx: 8 + rnd() * 28, wait: rnd() * 2 });\n}\n\n// A move of the crane: slew angle, trolley radius and hook row, eased to where they go.\nfunction go(P, ph, dur, to) {\n  Object.assign(P, { ph, pt: 0, pd: dur, f0: [P.th, P.r, P.hy], f1: [to.th ?? P.th, to.r ?? P.r, to.hy ?? P.hy] });\n}\n\nconst deckY = (P) => GY - P.n * FH;\nconst tip = (P) => [MX + P.r * cos(P.th), JY + 1 - P.r * sin(P.th) * 0.1];\nconst bucketHy = (P) => deckY(P) - FH - 2 - LH[3] - 3;\n\nfunction finishFloor(P) {\n  if (P.n \u003c NMAX) P.n++;\n  else P.top = 1;\n  // The floor that has just been glazed lights up a moment later.\n  Object.assign(P, { stage: 0, cage: 0, form: 0, item: -1, pourX: -1, nsw: min(P.nsw, 0.7), lightNew: P.n - 3 });\n}\n\n// Down to the yard, rig, hoist, slew over, lower, set down (or pour), up again.\nfunction step(P) {\n  const T = P.ph, type = P.load;\n  if (T === \"A\") go(P, \"B\", 0.5, {});\n  else if (T === \"B\") (P.load = P.top && P.stage > 2 ? (P.stage = 0) : P.stage), go(P, \"C\", 2.8, { hy: HTOP });\n  else if (T === \"C\") go(P, \"D\", 2.4, { th: P.th + PI, r: MX - DROP[type] });\n  else if (T === \"D\") go(P, \"E\", 1.5, { hy: type === 3 ? bucketHy(P) : deckY(P) - 4 - LH[type] });\n  else if (T === \"E\") {\n    if (type === 3) (P.pourX = BX0), go(P, \"P\", 3, { r: MX - BX1 + 2 });\n    else {\n      // Set down: the panel goes into the core, rebar and formwork lie on the deck.\n      const x = round(tip(P)[0]);\n      if (type) (P.item = type), (P.ix = x), type \u003c 2 ? (P.cage = 0) : (P.form = 0);\n      for (const w of P.wk) w.tx = x + (rnd() - 0.5) * 10;\n      (P.stage = max(P.stage, type + 1)), (P.load = -1), go(P, \"F\", 0.9, {});\n    }\n  } else if (T === \"P\" || T === \"I\") finishFloor(P), go(P, \"F\", 0.4, {});\n  else if (T === \"F\") go(P, \"G\", 0.5, { hy: P.hy - 12 });\n  else (P.load = -1), go(P, \"A\", 1.5, { th: (floor(P.th / TAU + 1e-3) + 1) * TAU, r: PICK_R, hy: PICK_Y - LH[P.stage] - 3 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nf = round(cl(k[2], 9, 13));\n  if (nf !== P.nk) {\n    // A new count of floors: the hook keeps its place over the deck.\n    const sh = (nf - P.n) * FH;\n    P.nk = P.n = nf;\n    P.top = 0;\n    if (P.ph === \"I\") (P.hy = bucketHy(P)), (P.pourX = BX0), go(P, \"I\", 3, { r: MX - BX1 + 2 });\n    else if (\"EPFG\".includes(P.ph)) (P.hy -= sh), (P.f0[2] -= sh), (P.f1[2] -= sh);\n  }\n  P.w = cl(k[3], -1, 1);\n  const t = (P.t += d), k0 = cl(k[0], 0, 1);\n  P.rt += rd;\n  // The evening deepens a little and comes back once every minute and a half.\n  P.h = k0 + (1 - k0) * 0.05 * (1 - cos((TAU * t) / 90));\n  // K1 tap: everything for the floor is in place at once and the deck pours.\n  if (input.btnPressed && input.btnPressed[0] && P.pourX \u003c 0 && !P.top) Object.assign(P, { pourBtn: 1, pourX: BX0, stage: 3, cage: 1, form: 1 });\n  const lin = min(1, (P.pt += d) / P.pd), u = sm(0, 1, lin), pour = P.ph === \"P\" || P.ph === \"I\";\n  P.th = mix(P.f0[0], P.f1[0], u);\n  P.r = mix(P.f0[1], P.f1[1], pour ? lin : u);\n  P.hy = mix(P.f0[2], P.f1[2], u);\n  if (pour) P.pourX = max(P.pourX, tip(P)[0] + 2);\n  if (lin >= 1) step(P);\n  if (P.pourBtn && (P.pourX += 30 * d) > BX1) (P.pourBtn = 0), finishFloor(P);\n  // The load swings on its cable when the trolley speeds up or slows, and in the wind.\n  const [tx, ty] = tip(P), L = max(4, P.hy - ty);\n  if (d > 0) {\n    const vx = (tx - P.ptx) / d, ax = cl((vx - P.vx) / d, -30, 30), eq = P.w * (0.06 + 0.04 * sin(t * 1.7)) * (P.load >= 0 ? 1 : 1.6);\n    P.swv += (-(110 / L) * (P.sw - eq) - (0.5 * ax) / L - 1.4 * P.swv) * d;\n    P.sw = cl(P.sw + P.swv * d, -0.3, 0.3);\n    [P.ptx, P.vx] = [tx, vx];\n  }\n  // The rigger steadies the load before it goes up.\n  if (P.ph === \"B\") (P.sw *= 1 - min(1, 5 * d)), (P.swv *= 1 - min(1, 5 * d));\n  P.swx = cl(L * sin(P.sw), -2.5, 2.5);\n  // The rebar is tied up the columns and the formwork goes round them.\n  if (P.stage > 1) P.cage = min(1, P.cage + d * 0.3);\n  if (P.stage > 2) P.form = min(1, P.form + d * 0.3);\n  // A floor switches its lights on or off together.\n  for (let i = 0; i \u003c NMAX; i++) P.onT[i] += rd;\n  if ((P.nsw -= d) \u003c= 0) {\n    const f = P.lightNew >= 0 ? P.lightNew : floor(rnd() * max(1, P.n - 2));\n    P.on[f] = P.lightNew >= 0 ? 1 : 1 - P.on[f];\n    Object.assign(P, { lightNew: -1, nsw: 1.6 + rnd() * 2 }).onT[f] = 0;\n  }\n  // Welding on the deck, and its sparks falling down the face.\n  if ((P.weld -= d) \u003c= 0) (P.welding = 1 - P.welding), (P.weld = P.welding ? 1.4 + rnd() * 1.6 : 0.4 + rnd() * 0.8);\n  const wy = deckY(P) - 2;\n  if (P.welding) for (let n = 0; n \u003c 4; n++) if (rnd() \u003c d * 18) P.sp.push([18 + rnd(), wy, (rnd() - 0.5) * 14, -4 - rnd() * 7, 1 + rnd() * 0.9, 18.5, wy]);\n  P.sp = P.sp.filter((s) => ((s[5] = s[0]), (s[6] = s[1]), (s[3] += 46 * d), (s[0] += s[2] * d), (s[1] += s[3] * d), (s[4] -= d) > 0 && s[1] \u003c GY));\n  // Workers walk about the deck.\n  for (const w of P.wk)\n    if (abs(w.tx - w.x) > 0.3) w.x = cl(w.x + cl(w.tx - w.x, -4 * d, 4 * d), 5, 37);\n    else if ((w.wait -= d) \u003c= 0) (w.tx = 6 + rnd() * 30), (w.wait = 1 + rnd() * 3);\n  // The mixer comes in for the bucket and backs out after the pour.\n  P.mix += cl((P.stage >= 2 && !P.top ? 2 : -26) - P.mix, -9 * d, 9 * d);\n  // Cars along the street.\n  if ((P.ncar -= d) \u003c= 0) (P.ncar = 2 + rnd() * 4), P.cars.push(rnd() \u003c 0.5 ? [-8, 11 + rnd() * 6, floor(rnd() * 4)] : [W + 1, -11 - rnd() * 6, floor(rnd() * 4)]);\n  P.cars = P.cars.filter((c) => ((c[0] += c[1] * d), c[0] > -12 && c[0] \u003c W + 12));\n  // Clouds drift with the wind.\n  P.cx += (1.5 + 9 * P.w) * d;\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\n// A surface: its own colour under the light that falls on that LED.\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\n// A lamp's glow round it, and a worker three LEDs tall.\nconst glow = (x, y, c, k) => {\n  for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (i || j) add(x + i, y + j, c, k / (i * i + j * j));\n};\nconst man = (x, y, head = [250, 250, 240]) => (sur(x, y, 50, 56, 90), sur(x, y - 1, 255, 130, 20), surc(x, y - 2, head));\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.2 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\n\n// Sky, sun and the city beyond, kept until the evening moves on.\nfunction sky(P, K) {\n  const h = P.h, B = P.bg;\n  if (round(h * 300) === P.bgKey) return F.set(B);\n  P.bgKey = round(h * 300);\n  const row = P.row, night = sm(0.4, 0.9, h), vis = 1 - sm(0.78, 0.95, h);\n  for (let y = 0; y \u003c H; y++) {\n    const f = min(1, y / GY), a = f \u003c 0.5 ? 0 : 3, u = f \u003c 0.5 ? f / 0.5 : (f - 0.5) / 0.5;\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(K[a + c], K[a + 3 + c], a ? u * u : sm(0, 1, u));\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    if (y >= P.sky[x]) {\n      const win = night * (hash(x, y * 3) \u003c 0.16 && y & 1 ? 1 : 0);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = mix(K[3 + c], K[6 + c], 0.55) * 0.6 * (x & 1 ? 1 : 0.86) + win * [210, 160, 90][c];\n      continue;\n    }\n    const d = Math.hypot(x - 54.5, y - 61.5 - 52 * h), g = vis * (0.55 * exp(-((d - 3.6) ** 2) / 50) + 0.3 * exp(-d / 16));\n    for (let c = 0; c \u003c 3; c++) B[o + c] = d \u003c 3.6 && vis > 0 ? mix(row[y * 3 + c], K[9 + c], vis) : row[y * 3 + c] + K[9 + c] * g * 0.7;\n  }\n  F.set(B);\n}\n\nfunction clouds(P, K) {\n  const cover = 0.56 - 0.18 * abs(P.w), C = P.cloud;\n  for (let y = 0; y \u003c 100; y++) {\n    const ty = floor(y * 0.6) & 63, fade = 1 - sm(50, 100, y);\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= P.sky[x]) continue;\n      const v = C[(ty \u003c\u003c 7) | (floor(x + P.cx) & 127)], a = cl((v - cover) * 7, 0, 1) * fade, lt = cl(1.25 - (v - cover) * 4 + (y - 40) / 120, 0, 1);\n      if (a > 0.01) put(x, y, [mix(K[15], K[12], lt), mix(K[16], K[13], lt), mix(K[17], K[14], lt)], a * 0.92);\n    }\n  }\n}\n\n// The light on every surface: the day, cloud shadows, the floodlights after dusk.\nfunction light(P, K) {\n  const sunA = 1 - sm(0.45, 0.85, P.h), fon = sm(0.3, 0.55, P.h), FLb = P.fl, C = P.cloud;\n  const cover = 0.5 - 0.18 * abs(P.w), [tx, ty] = tip(P), hx = tx + P.swx * 0.5;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, v = C[((floor(y * 0.25 + 20) & 63) \u003c\u003c 7) | (floor(x * 0.8 + P.cx * 2.2 + 40) & 127)];\n    let fl = 0;\n    if (fon > 0) {\n      const dx = x + 0.5 - LX, dy = y + 0.5 - LY, dd = Math.hypot(dx, dy) + 0.01, ca = (dx * AX + dy * AY) / dd;\n      fl = (exp((ca - 1) / 0.03) * 1.2) / (1 + (dd / 60) ** 2);\n      if (y > ty + 1) {\n        const q = (x + 0.5 - hx) / (1.2 + 0.16 * (y - ty));\n        fl += (exp(-q * q) * 0.7) / (1 + ((y - ty) / 90) ** 2);\n      }\n      fl *= fon;\n    }\n    FLb[i] = fl;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[18 + c] * (1 - 0.45 * sunA * cl((v - cover) * 5, 0, 1)) + fl * FLC[c];\n  }\n}\n\n// The yard's gravel, the kerb, the street and its markings.\nfunction ground() {\n  for (let i = GY * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, n = 0.82 + 0.3 * hash(x, y + 900);\n    y === 126 && (x + 6) % 8 \u003c 2 ? sur(x, y, 190, 180, 120) : y > 123 ? sur(x, y, 62 * n, 60 * n, 66 * n) : y > 122 ? sur(x, y, 150, 146, 140) : sur(x, y, 150 * n, 126 * n, 98 * n);\n  }\n}\n\n// The concrete frame, its windows, and the floor going up on the deck.\nfunction building(P) {\n  const n = P.n, dk = deckY(P), g = n - 2, night = sm(0.4, 0.9, P.h), row = P.row;\n  for (let y = dk; y \u003c GY; y++) {\n    const k = floor((GY - 1 - y) / FH), ry = y - (GY - (k + 1) * FH);\n    for (let x = BX0; x \u003c= BX1; x++) {\n      const cx = (x - BX0) % 7, b = floor((x - BX0) / 7), bx = cx - 2;\n      if (ry === 0) sur(x, y, 228, 220, 206);\n      else if (cx \u003c 2) sur(x, y, 206, 198, 184);\n      else if (ry === 1) k \u003c g ? sur(x, y, 78, 86, 102) : sur(x, y, 178, 172, 162);\n      else if (b === CORE) sur(x, y, 196, 190, 180, (x + y) % 9 === 0 ? 0.8 : 0.95);\n      else if (k \u003c g && bx === 2) sur(x, y, 80, 80, 88);\n      else if (k \u003c g) {\n        // Glass: the sky in it, or a lit room behind.\n        const o = (y * W + x) * 3, rr = cl(round(y * 0.3 + 4), 0, GY - 1) * 3;\n        let on = P.on[k] ? hash(k, b * 7 + 1) \u003c 0.92 : hash(k, b * 7 + 3) \u003c 0.1 + 0.6 * night;\n        if (on && P.on[k] && P.onT[k] \u003c 0.5) on = hash(k * 13 + b, floor(P.onT[k] * 22)) > 0.45;\n        const lc = hash(k, b + 40) \u003c 0.75 ? [255, 184, 88] : [200, 228, 255], a = on ? 0.9 + 0.1 * night : 0;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(row[rr + c] * 0.42 + c * 5, lc[c], a) * (ry === 2 ? 1.12 : 1);\n      } else {\n        // An open floor: dark inside, the back columns, a work lamp at night.\n        if (night > 0.05 && bx === 2 && ry === 2 && hash(k, b) \u003c 0.6) put(x, y, [255, 214, 150].map((v) => v * night));\n        else sur(x, y, 60, 54, 52, bx === 2 ? 0.6 : 0.28);\n      }\n    }\n  }\n  // Ties from the mast to the frame.\n  for (let k = 2; k \u003c n; k += 3) for (let x = BX1 + 1; x \u003c MX - 2; x++) sur(x, GY - (k + 1) * FH + 1, 200, 170, 60);\n\n  // The floor on the deck: starter bars, the core panel, the rebar cages, the formwork.\n  const top = dk - FH, st = P.top ? 0 : P.stage;\n  if (st > 0) for (let y = top + 1; y \u003c dk; y++) for (let x = BX0 + 30; x \u003c= BX0 + 34; x++) sur(x, y, 176, 172, 164, x === BX0 + 32 ? 0.8 : 1);\n  for (let ci = 0; ci \u003c 6; ci++) {\n    const x = BX0 + ci * 7;\n    for (let j = 1; j \u003c= max(2, st > 1 ? round(P.cage * 5) : 0); j++) sur(x, dk - j, 176, 96, 50), j & 1 && sur(x + 1, dk - j, 130, 76, 44);\n    if (st > 2 && ci / 6 \u003c P.form) for (let j = 1; j \u003c FH; j++) sur(x, dk - j, 218, 162, 84), sur(x + 1, dk - j, 196, 140, 70);\n  }\n  if (st > 2) for (let x = BX0; x \u003c= BX0 + 36 * P.form; x++) for (let j = 0; j \u003c ((x - BX0) % 7 === 4 ? FH : 1); j++) j ? sur(x, top + j, 150, 150, 156, 0.8) : sur(x, top, 214, 156, 80);\n  if (P.pourX >= 0 && !P.top) for (let x = BX0; x \u003c= min(BX1, P.pourX); x++) sur(x, top, 140, 140, 150), (x - BX0) % 7 \u003c 2 && sur(x, top + 1, 140, 140, 150, 0.9);\n  if (P.item > 0) drawLoad(P.item, P.ix, dk - LH[P.item]);\n  // Topped out: a little fir tree on the roof.\n  if (P.top) for (let j = 0; j \u003c 5; j++) for (let i = -j; i \u003c= j; i++) sur(24 + i, dk - 6 + j, 40, 120, 60);\n  // The workers on the deck in hi-vis, and the welder by a column.\n  for (const w of P.wk) man(w.x, dk - 1);\n  man(17, dk - 1, [60, 60, 70]);\n}\n\n// One of the four loads, centred on x with its top on row y0.\nfunction drawLoad(type, cx, y0) {\n  const w = LW[type], h = LH[type], x0 = round(cx - w / 2), y = round(y0);\n  for (let j = 0; j \u003c h; j++)\n    for (let i = 0; i \u003c w; i++) {\n      const X = x0 + i, Y = y + j;\n      if (type === 0) (i \u003c 2 || i > 4 || !j || j > 3) && sur(X, Y, 150, 146, 140, i && j ? 1 : 1.25);\n      else if (type === 1) sur(X, Y, i === 2 || i === 8 ? 60 : 186, i === 2 || i === 8 ? 54 : 92, 48, j ? 0.72 : 1);\n      else if (type === 2) sur(X, Y, 226, 170, 92, j & 1 ? 0.55 : 1);\n      else if (i >= (j >= h - 2 ? 1 : 0) && i \u003c w - (j >= h - 2 ? 1 : 0)) sur(X, Y, 120, 120, 128, j === 1 ? 0.6 : j === 0 ? 1.3 : 1);\n    }\n  if (type === 3) sur(x0 + 2, y + h, 70, 70, 76);\n}\n\n// The hook block, its cable and slings, and whatever it carries.\nfunction hook(P) {\n  const [tx, ty] = tip(P), hx = tx + P.swx, hy = P.hy;\n  line(tx, ty + 1, hx, hy - 1, [120, 120, 130], 0.9);\n  for (let i = -1; i \u003c= 1; i++) surc(hx + i, hy - 1, YEL);\n  sur(hx, hy, 60, 60, 66), sur(hx, hy + 1, 90, 90, 96);\n  if (P.load >= 0) {\n    const w = LW[P.load] / 2 - 0.5;\n    line(hx, hy + 1, hx - w, hy + 3, [110, 110, 116], 0.8), line(hx, hy + 1, hx + w, hy + 3, [110, 110, 116], 0.8);\n    drawLoad(P.load, hx + 0.5, hy + 3);\n    // Concrete runs from the bucket into the forms.\n    if (P.ph === \"P\" || P.ph === \"I\") for (let j = hy + 10; j \u003c deckY(P) - FH; j++) sur(hx + 0.5, j, 140, 140, 150);\n  }\n}\n\n// The yard: stock waiting by the crane, the load being rigged, the floodlight tower.\nfunction yard(P) {\n  drawLoad(2, 53, 115), drawLoad(1, 54, 118);\n  if (P.ph === \"A\" || P.ph === \"B\") {\n    const s = P.stage, x = MX + PICK_R - LW[s] / 2 - 2, arm = P.ph === \"B\" ? (P.pt * 6) & 1 : 0;\n    drawLoad(s, MX + PICK_R + 0.5, PICK_Y - LH[s]);\n    man(x, PICK_Y - 1), sur(x + 1, PICK_Y - 2 - arm, 255, 130, 20);\n  }\n  for (let y = LY; y \u003c 122; y++) sur(62, y, 120, 120, 126);\n  const fon = sm(0.3, 0.55, P.h);\n  for (let x = 59; x \u003c= 62; x++) put(x, 83, [90, 90, 96]), put(x, 84, x \u003c 62 ? [70 + 185 * fon, 70 + 180 * fon, 76 + 154 * fon] : [90, 90, 96]);\n}\n\n// The crane: mast, ties, slewing ring, cab, tower head, jib and counter-jib.\nfunction crane(P) {\n  const c = cos(P.th), sn = sin(P.th), blink = P.rt % 1.2 \u003c 0.55, fon = sm(0.3, 0.55, P.h);\n  const jib = () => {\n    for (let s = 0; s \u003c= JL; s += 0.3) {\n      // Swung towards you the tip is nearer and bigger, swung away it shrinks.\n      const sc = 1 + (0.45 * s * sn) / JL, px = MX + s * c, py = JY - s * sn * 0.1, ht = (3 - (1.2 * s) / JL) * sc, tri = abs(((s / 2.4) % 2) - 1), wd = sn * 1.2 * sc;\n      surc(px - wd, py, YEL, 0.85), surc(px + wd, py, YEL, 0.85), surc(px, py - ht, YEL), surc(px + wd * (1 - tri), py - tri * ht, YEL, 0.75);\n    }\n  };\n  const counter = () => {\n    for (let s = 0; s \u003c= CJL; s += 0.3) {\n      const px = MX - s * c, py = JY + s * sn * 0.1;\n      surc(px, py, YEL, 0.85), surc(px, py - 1, YEL, s % 2 \u003c 0.6 ? 0.8 : 0);\n      if (s > 6 && s \u003c 8.5) for (let j = 1; j \u003c= 2; j++) sur(px, py - 1 - j, 80, 84, 92);\n      if (s > CJL - 5) for (let j = 1; j \u003c= 4; j++) sur(px, py + j, 190, 184, 172, (floor(s) & 1) === 0 ? 0.8 : 1);\n    }\n  };\n  const pend = () => {\n    line(MX, APEX + 1, MX + 28 * c, JY - 28 * sn * 0.1 - 2.2, [110, 104, 96], 0.8);\n    line(MX, APEX + 1, MX - CJL * c, JY + CJL * sn * 0.1 - 1, [110, 104, 96], 0.8);\n  };\n  const cab = () => {\n    for (let q = 0, i, j; q \u003c 12; q++)\n      (i = (q % 3) - 1), (j = (q / 3) | 0), j % 3 && i > -1 ? put(MX + 3.5 * c + i, JY + 1 + j, P.h > 0.5 ? [255 * fon, 226 * fon, 160 * fon] : [110, 150, 196]) : surc(MX + 3.5 * c + i, JY + 1 + j, [240, 232, 210]);\n  };\n  // What faces away is drawn first.\n  if (sn \u003c 0) jib(), pend(), cab();\n  else counter(), pend();\n  // The mast: two chords and a lattice of diagonals.\n  for (let y = JY + 3; y \u003c 118; y++) {\n    surc(MX - 2, y, YEL, 0.72), surc(MX + 2, y, YEL);\n    for (let xi = 1; xi \u003c= 3; xi++) if (((y + xi) & 3) === 0 || ((y - xi) & 3) === 0) surc(MX - 2 + xi, y, YEL, 0.8);\n  }\n  for (let x = MX - 4; x \u003c= MX + 4; x++) sur(x, 117, 170, 166, 160), sur(x, 118, 170, 166, 160), sur(x, 119, 170, 166, 160), abs(x - MX) \u003c 4 && (sur(x, JY + 1, 80, 80, 86), sur(x, JY + 2, 110, 110, 116));\n  // The tower head.\n  for (let y = APEX; y \u003c= JY - 3; y++) {\n    const hw = (1.6 * (y - APEX)) / (JY - 3 - APEX);\n    surc(MX - hw, y, YEL), surc(MX + hw, y, YEL);\n    if ((y & 1) === 0) for (let x = round(MX - hw); x \u003c= MX + hw; x++) surc(x, y, YEL, 0.8);\n  }\n  if (sn \u003c 0) counter(), pend();\n  else jib(), pend(), cab();\n  // The trolley, and the warning lights on the head and at the jib tip.\n  const [tx, ty] = tip(P);\n  sur(tx - 1, ty, 90, 90, 96), sur(tx, ty, 90, 90, 96), sur(tx + 1, ty, 90, 90, 96);\n  for (const [x, y] of [[MX, APEX - 1], [MX + JL * c, JY - JL * sn * 0.1 - 2]]) {\n    put(x, y, blink ? [255, 40, 28] : [110, 20, 16]);\n    if (blink) glow(x, y, [255, 30, 20], 0.12 + 0.3 * fon);\n  }\n}\n\n// The mixer, its drum turning.\nfunction mixer(P) {\n  const x0 = round(P.mix), night = sm(0.4, 0.9, P.h);\n  if (x0 \u003c -24) return;\n  for (let y = 115; y \u003c= 121; y++)\n    for (let i = 0; i \u003c 13; i++) {\n      const e = ((i - 6) / 6.8) ** 2 + ((y - 118 + (i - 6) * 0.18) / 3.4) ** 2;\n      if (e \u003c 1) sur(x0 + i, y, ...((((i * 0.7 + y * 1.4 - P.t * 9) % 4) + 4) % 4 \u003c 2 ? [240, 120, 40] : [230, 228, 220]), 1 - 0.3 * e);\n    }\n  for (let i = 0; i \u003c 20; i++) sur(x0 + i, 122, 70, 70, 76);\n  for (let y = 116; y \u003c 122; y++) for (let i = 15; i \u003c 20; i++) sur(x0 + i, y, ...(y \u003c 119 && i > 16 ? [110, 150, 190] : [230, 60, 40]));\n  for (const i of [2, 5, 16]) sur(x0 + i, 123, 30, 30, 34), sur(x0 + i + 1, 123, 30, 30, 34);\n  if (night > 0.1) add(x0 + 20, 120, [255, 240, 200], night);\n}\n\nfunction cars(P) {\n  const night = sm(0.35, 0.9, P.h), cols = [[200, 40, 36], [220, 220, 226], [40, 80, 170], [60, 64, 70]];\n  for (const [cx, v, ci] of P.cars) {\n    const x0 = round(cx), fx = v > 0 ? x0 + 6 : x0;\n    for (let i = 0; i \u003c 21; i++) i \u003c 14 ? surc(x0 + (i >> 1), 125 + (i & 1), cols[ci]) : i \u003c 17 && sur(x0 + i - 12, 124, 120, 150, 180);\n    add(fx, 125, [255, 250, 220], 0.3 + night), add(x0 + 6 - fx + x0, 125, [255, 20, 10], 0.2 + night);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  const hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  // The hook goes behind the frame when the jib swings away from you.\n  const behind = sin(P.th) \u003c -0.15, y = deckY(P) - 2, FLb = P.fl;\n  sky(P, K), clouds(P, K), light(P, K), ground(), behind && hook(P), building(P), yard(P), crane(P), mixer(P), cars(P), behind || hook(P);\n  // The welding arc, its sparks, and the floodlight beams in the dusk air.\n  if (P.welding) put(18, y, [235, 244, 255]), glow(18, y, [160, 190, 255], 0.36 + 0.24 * rnd());\n  for (const [x, y, , , l, px, py] of P.sp) put(px, py, [255, 120, 30], min(1, l * 1.4) * 0.6), put(x, y, [255, 170 + 80 * min(1, l), 70 * min(1, l)], min(1, l * 1.4));\n  if (P.h > 0.3) for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (FLb[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += FLb[i] * 22 * FLC[c];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower."},{"name":"Floors","min":9,"max":13,"about":"How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof."},{"name":"Wind","min":-1,"max":1,"about":"Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable."}],"start":[0,2,9,0.06],"measures":{"motion":0.1573,"detail":0.0705,"edges":0.403,"complexity":1.4462,"coverage":0.9851,"colour":0.2925,"drift":0.0434},"knobResponse":[0.3747,0.0499,0.0453,0.0999]},{"slug":"train-window","title":"Train Window","family":"space","round":17,"note":"달리는 기차 창밖이 층층이 흘러요. 먼 구름과 산은 느리게, 들판과 농가는 빠르게 지나가고 전차선 기둥은 휙 스쳐요. 깎은 비탈이 다가오면 터널이 창을 검게 덮고 나트륨등이 줄을 그으며 지나가요.","idea":"The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-train-window","type":"code","name":"train-window","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Time","min":0,"max":1,"about":"The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3."},{"name":"Hills","min":0,"max":1,"about":"At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds."},{"name":"Rain","min":0,"max":1,"about":"Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded."}],"start":[0,2,0,0.06],"measures":{"motion":0.6601,"detail":0.0493,"edges":0.717,"complexity":0.2041,"coverage":0.8669,"colour":0.2389,"drift":0.3599},"knobResponse":[0.2716,0.0947,0.2843,0.1097]},{"slug":"truchet","title":"Truchet","family":"geometry","round":1,"note":"타일마다 같은 사분원 둘이 있어요. 한 장을 90도 돌리면 길 둘이 하나로 이어지거나 하나가 둘로 끊겨요.","idea":"Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.","buttons":"K1 tap turns a quarter of the tiles at once.","code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-truchet","type":"code","name":"truchet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the path colours around the colour wheel."},{"name":"Flip Rate","min":0,"max":5,"about":"How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them."},{"name":"Tile","min":8,"max":20,"about":"Tile size in LEDs; small is a dense meander, large a few wide loops."},{"name":"Thickness","min":0,"max":1,"about":"Line width, from a thin wire to fat ribbons with small dark holes between them."}],"start":[0,2,8,0.06],"measures":{"motion":0.3464,"detail":0.1313,"edges":0.5615,"complexity":1.2014,"coverage":0.7147,"colour":0.3084,"drift":0.0597},"knobResponse":[0.1766,0.0939,0.1747,0.1431]},{"slug":"tunnel","title":"Tunnel","family":"space","round":1,"note":"가운데서 떨어진 거리로 나누면 평평한 체크무늬가 날아 들어가는 관이 돼요.","idea":"Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.","buttons":"K1 tap throws the far end of the tube to a new place.","code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","layer":{"id":"layer-tunnel","type":"code","name":"tunnel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the near rings; the far ones drift round the wheel from it."},{"name":"Speed","min":-3,"max":8,"about":"Flying forward, and below 0 backing out of the tube."},{"name":"Twist","min":-1,"max":1,"about":"Winds the tiles into a spiral, either way round."},{"name":"Tiles","min":8,"max":24,"about":"How many tiles go round the tube."}],"start":[0,2,0,8],"measures":{"motion":2.5151,"detail":0.0531,"edges":0.4689,"complexity":0.9004,"coverage":0.8993,"colour":0.486,"drift":0.3919},"knobResponse":[0.376,0.2448,0.256,0.2505]},{"slug":"turntables","title":"Turntables","family":"music","round":18,"note":"DJ 의 턴테이블 두 대가 믹서 띠를 사이에 두고 위아래로 서요. 판은 가만히 있는 방 불빛 아래에서 돌며 홈을 드러내고, DJ 는 기다리는 판을 손으로 잡았다가 킥에 맞춰 놓고 크로스페이더를 넘겨요. K2 Pitch 를 0 에 두면 플래터 테두리의 안쪽 스트로브 점이 멈춰 서요.","idea":"Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","layer":{"id":"layer-turntables","type":"code","name":"turntables","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light."},{"name":"Pitch","min":-8,"max":8,"about":"Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back."},{"name":"Scratch","min":0,"max":1,"about":"How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke."},{"name":"Light","min":0,"max":1,"about":"Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat."}],"start":[0,2,0,0.06],"measures":{"motion":0.2259,"detail":0.0842,"edges":0.4014,"complexity":1.294,"coverage":0.7108,"colour":0.1698,"drift":0.051},"knobResponse":[0.0432,0.0432,0.0448,0.0571]},{"slug":"typewriter","title":"Typewriter","family":"type","round":18,"note":"수동 타자기가 시 두 편을 3×5 픽셀 글자로 한 자씩 쳐요. 칠 때마다 활자대가 리본을 지나 튀어 올라 글자를 찍고 종이가 한 칸 왼쪽으로 밀리며, 줄 끝에서 벨이 번쩍이면 캐리지가 오른쪽으로 돌아오며 종이를 한 줄 올려요. K4 를 돌리면 리본이 닳아 글자가 옅어지고, 빨간 반쪽으로 치는 낱말이 늘어요.","idea":"A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","layer":{"id":"layer-typewriter","type":"code","name":"typewriter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet."},{"name":"Speed","min":0.2,"max":3,"about":"Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven."},{"name":"Spacing","min":1,"max":2,"about":"The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows)."},{"name":"Ribbon","min":0,"max":1,"about":"At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words."}],"start":[0,2,1,0.06],"measures":{"motion":0.4854,"detail":0.1156,"edges":0.8353,"complexity":0.7724,"coverage":0.9016,"colour":0.0948,"drift":0.1684},"knobResponse":[0.084,0.1398,0.167,0.0481]},{"slug":"veiled-lady","title":"Veiled Lady","family":"fungi","round":20,"note":"동트기 전 열대 숲 바닥을 손전등으로 비춘 망태버섯 타임랩스예요. 낙엽 속 흰 알이 터져 대가 패널 높이만큼 솟고, 올리브색 갓 밑에서 흰 레이스 망사가 낙엽 가까이까지 내려와요. 파리가 꼬였던 버섯이 시들어 쓰러지면 옆에서 다음 알이 부풀고, K1 을 돌리면 손전등이 UV 로 바뀌어 망사가 청록으로 빛나요.","idea":"A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.","buttons":"K1 tap starts a new egg now.","code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-veiled-lady","type":"code","name":"veiled-lady","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Torch","min":0,"max":1,"about":"A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower."},{"name":"Veil","min":0,"max":1,"about":"At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves."},{"name":"Rain","min":0,"max":1,"about":"Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net."}],"start":[0,2,0,0.06],"measures":{"motion":0.1497,"detail":0.0791,"edges":0.3662,"complexity":1.7099,"coverage":0.5698,"colour":0.1244,"drift":0.0576},"knobResponse":[0.0782,0.0485,0.0482,0.0673]},{"slug":"velvet-nap","title":"Velvet Nap","family":"cosmetic","round":34,"note":"판 전체가 에메랄드 무광 벨벳이고, 보이지 않는 손끝 둘이 천천히 글씨를 쓰듯 결을 쓸어요. 빛 쪽으로 밀린 결은 짙고 깊은 색으로, 빛을 따라 누운 결은 옅은 은빛으로 남아 서로 겹쳐 덮이고, 7초마다 손바닥이 22 LED 너비 띠를 위에서 아래로 쓸어 결을 한 방향으로 눕혀요.","idea":"The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.","buttons":"K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.","code":"// ===== Patternflow pattern =====\n// Title:   Velvet Nap\n// Family:  cosmetic\n// Idea:    The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the matte velvet of flocked compacts and velvet lip tints\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1\n//\n// Knob 1: Hue. The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive.\n// Knob 2: Speed. At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Width. The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel.\n// Knob 4: Pile. The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain.\n// Buttons: K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, round, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The pile of each LED is a vector in the plane of the cloth: its direction\n// is where the fibres lean, its length how far they lean, 0 upright and 1 as\n// far over as the pile goes. A palm lays it straight down the panel.\nconst PALM = 0.85;\n// The light comes from the left and a little below, 22 degrees above the\n// cloth, and sways 29 degrees either way every 12 seconds.\nconst ELEV = (22 * PI) / 180, LAZ = PI - 0.36, SWAY = 0.5;\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, width: 0, pile: 0.06, warm: false, clock: 0, palmT: 0, palmY: -99, palmX: 32, flat: 0,\n    qx: new Float32Array(N), qy: new Float32Array(N),\n    ga: new Float32Array(N), gl: new Float32Array(N), gb: new Float32Array(N),\n    fingers: [], c: [0, 0, 0], d: [0, 0, 0],\n  });\n  for (let p = 0; p \u003c N; p++) {\n    S.qy[p] = PALM;\n    // The fibre grain: each LED's tuft leans a little off the brushed way,\n    // a little more or less, and holds a little more or less dye.\n    S.ga[p] = (random() - 0.5) * 0.3;\n    S.gl[p] = 1 + (random() - 0.5) * 0.16;\n    S.gb[p] = 1 + (random() - 0.5) * 0.05;\n  }\n  for (let i = 0; i \u003c 2; i++) S.fingers.push(newFinger(i));\n}\n\n// The two fingers start one in each half of the panel.\nfunction newFinger(i) {\n  return {\n    x: 10 + random() * 44, y: (i + 0.15 + random() * 0.7) * 64, hd: random() * 2 * PI, turn: 0,\n    down: true, t: random() * 1.5, len: 1.2 + random() * 1.8,\n  };\n}\n\n// One finger, one step: it curves as it goes and steers away from the edges.\n// A stroke lasts 1.2 to 3 seconds, then the finger lifts for 0.2 to 0.5\n// seconds and comes down somewhere else.\nfunction moveFinger(S, f, ds) {\n  f.t += ds;\n  if (!f.down) {\n    if (f.t >= f.len) {\n      f.down = true;\n      f.t = 0;\n      f.len = 1.2 + random() * 1.8;\n      // It comes down where the velvet is least written: the best of four\n      // tries, scored by how far the pile round each is from the palm's.\n      let best = 1e9;\n      for (let k = 0; k \u003c 4; k++) {\n        const x = 6 + random() * (W - 13), y = 6 + random() * (H - 13);\n        let sc = 0;\n        for (let v = -9; v \u003c= 9; v += 3)\n          for (let u = -9; u \u003c= 9; u += 3) {\n            const p = cl(round(y + v), 0, H - 1) * W + cl(round(x + u), 0, W - 1);\n            sc += Math.abs(S.qx[p]) + Math.abs(S.qy[p] - PALM);\n          }\n        if (sc \u003c best) (best = sc), (f.x = x), (f.y = y);\n      }\n      f.hd = random() * 2 * PI;\n      f.turn = (random() - 0.5) * 3;\n    }\n    return false;\n  }\n  if (f.t >= f.len) {\n    f.down = false;\n    f.t = 0;\n    f.len = 0.2 + random() * 0.3;\n    return false;\n  }\n  f.turn += (random() - 0.5) * 14 * ds - f.turn * 0.8 * ds;\n  f.turn = cl(f.turn, -2.6, 2.6);\n  // Steer back towards the middle near an edge.\n  const mx = 10, cx = f.x \u003c mx ? 1 : f.x > W - 1 - mx ? -1 : 0, cy = f.y \u003c mx ? 1 : f.y > H - 1 - mx ? -1 : 0;\n  if (cx || cy) {\n    const want = atan2(cy || (32 - f.y) * 0.01, cx || (32 - f.x) * 0.01);\n    let dh = want - f.hd;\n    dh -= 2 * PI * Math.round(dh / (2 * PI));\n    f.turn += dh * 4 * ds;\n  }\n  f.hd += f.turn * ds;\n  return true;\n}\n\n// Brush the pile under the fingertip towards the way it moves.\nfunction brush(S, x, y, dx, dy, r) {\n  const r2 = (r + 1) * (r + 1);\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, y + r + 1); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, x + r + 1); xx++) {\n      const ex = xx - x, ey = yy - y, e2 = ex * ex + ey * ey;\n      if (e2 > r2) continue;\n      const w = 0.55 * (1 - sm(0.45 * r, r + 0.6, sqrt(e2))), p = yy * W + xx;\n      S.qx[p] += (dx - S.qx[p]) * w;\n      S.qy[p] += (dy - S.qy[p]) * w;\n    }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp, r = 2.2 + 3.6 * S.width, v = 26;\n  S.clock += ds;\n  for (const f of S.fingers) {\n    if (!moveFinger(S, f, ds)) continue;\n    const dx = cos(f.hd), dy = sin(f.hd), dist = v * ds, n = Math.max(1, Math.ceil(dist / 0.7));\n    for (let i = 0; i \u003c n; i++) {\n      f.x += (dx * dist) / n;\n      f.y += (dy * dist) / n;\n      brush(S, f.x, f.y, dx, dy, r);\n    }\n  }\n  // Every 7 seconds a palm strokes down one band 22 LEDs wide, from the\n  // top edge to the bottom in 1.6 seconds, and lays its pile straight down.\n  S.palmT += ds;\n  if (S.palmT >= 7) {\n    S.palmT -= 7;\n    S.palmY = -14;\n    S.palmX = 11 + random() * 42;\n  }\n  if (S.palmY > -50 && S.palmY \u003c H + 14) {\n    const y0 = S.palmY;\n    S.palmY += (156 / 1.6) * ds;\n    const ym = (y0 + S.palmY) / 2;\n    for (let y = max(0, floor(y0 - 12)); y \u003c= min(H - 1, S.palmY + 12); y++) {\n      const wy = 1 - sm(4, 12, Math.abs(y - ym));\n      if (wy \u003c= 0) continue;\n      for (let x = max(0, floor(S.palmX - 13)); x \u003c= min(W - 1, S.palmX + 13); x++) {\n        const w = 0.5 * wy * (1 - sm(7, 12, Math.abs(x - S.palmX))), p = y * W + x;\n        S.qx[p] += (0 - S.qx[p]) * w;\n        S.qy[p] += (PALM - S.qy[p]) * w;\n      }\n    }\n  }\n  if (S.flat > 0) {\n    S.flat -= ds;\n    for (let p = 0; p \u003c N; p++) {\n      S.qx[p] += (0 - S.qx[p]) * 0.2;\n      S.qy[p] += (PALM - S.qy[p]) * 0.2;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.width = cl(k[2], 0, 1);\n  S.pile = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on velvet that has been written on for fourteen seconds, with the\n    // next palm due 2.5 seconds in.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 420; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.palmT = 4.5;\n    S.palmY = -99;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.flat = 0.5;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, dcol = S.d;\n  // Pile length: a short nap leans 36 degrees when brushed and its sheen is\n  // broad; a long plush one leans 72 degrees with a tight bright sheen.\n  const u = (S.pile + 1) / 2, bmax = ((36 + 36 * u) * PI) / 180, pex = 3 + 4 * u;\n  const az = LAZ + SWAY * sin((2 * PI * S.clock) / 12);\n  const lx = cos(az) * cos(ELEV), ly = sin(az) * cos(ELEV), lz = sin(ELEV);\n  const h0 = S.hue + 0.42, hh = h0 - floor(h0);\n  // Orange, gold and chartreuse velvet read rust, mustard or olive at the\n  // body's level, so there the body is lifted towards 0.8 and its darker\n  // faces lean to ruby.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.24, 0.34, hh));\n  // The sheen is a pale tint of the dye.\n  hsv(h0, 0.18, 1, dcol);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const qx = S.qx[p], qy = S.qy[p];\n      let m = sqrt(qx * qx + qy * qy);\n      const ang = (m > 1e-4 ? atan2(qy, qx) : 0) + S.ga[p];\n      m = min(1, m * S.gl[p]);\n      // The fibre axis t: leaning by beta towards the pile's way.\n      const be = m * bmax, sb = sin(be), cb = cos(be);\n      const tx = sb * cos(ang), ty = sb * sin(ang), tz = cb;\n      const tl = tx * lx + ty * ly + tz * lz, sl = sqrt(max(0, 1 - tl * tl));\n      // Kajiya-Kay for a fibre: the lit side goes with the sine to the\n      // light, and a tuft seen end-on shows less of its side. The sheen is\n      // the reflection cone round the fibre crossing the eye straight ahead.\n      const diff = sl * (0.35 + 0.65 * sb);\n      const spec = pow(max(0, sl * sb - tl * cb), pex);\n      const body = (0.22 + 0.78 * diff) * S.gb[p];\n      const rich = 1 - diff;\n      hsv(h0 - (0.012 + 0.06 * warm) * rich, 0.78 + 0.2 * rich - 0.25 * spec, 1, c);\n      const vb = body * (0.8 + 0.2 * warm) + 0.5 * warm * (1 - body), vs = 0.55 * spec;\n      display.setPixel(\n        x, y,\n        round(255 * min(1, c[0] * vb + dcol[0] * vs)),\n        round(255 * min(1, c[1] * vb + dcol[1] * vs)),\n        round(255 * min(1, c[2] * vb + dcol[2] * vs)),\n      );\n    }\n}\n","layer":{"id":"layer-velvet-nap","type":"code","name":"velvet-nap","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Velvet Nap\n// Family:  cosmetic\n// Idea:    The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the matte velvet of flocked compacts and velvet lip tints\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1\n//\n// Knob 1: Hue. The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive.\n// Knob 2: Speed. At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Width. The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel.\n// Knob 4: Pile. The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain.\n// Buttons: K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, round, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The pile of each LED is a vector in the plane of the cloth: its direction\n// is where the fibres lean, its length how far they lean, 0 upright and 1 as\n// far over as the pile goes. A palm lays it straight down the panel.\nconst PALM = 0.85;\n// The light comes from the left and a little below, 22 degrees above the\n// cloth, and sways 29 degrees either way every 12 seconds.\nconst ELEV = (22 * PI) / 180, LAZ = PI - 0.36, SWAY = 0.5;\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, width: 0, pile: 0.06, warm: false, clock: 0, palmT: 0, palmY: -99, palmX: 32, flat: 0,\n    qx: new Float32Array(N), qy: new Float32Array(N),\n    ga: new Float32Array(N), gl: new Float32Array(N), gb: new Float32Array(N),\n    fingers: [], c: [0, 0, 0], d: [0, 0, 0],\n  });\n  for (let p = 0; p \u003c N; p++) {\n    S.qy[p] = PALM;\n    // The fibre grain: each LED's tuft leans a little off the brushed way,\n    // a little more or less, and holds a little more or less dye.\n    S.ga[p] = (random() - 0.5) * 0.3;\n    S.gl[p] = 1 + (random() - 0.5) * 0.16;\n    S.gb[p] = 1 + (random() - 0.5) * 0.05;\n  }\n  for (let i = 0; i \u003c 2; i++) S.fingers.push(newFinger(i));\n}\n\n// The two fingers start one in each half of the panel.\nfunction newFinger(i) {\n  return {\n    x: 10 + random() * 44, y: (i + 0.15 + random() * 0.7) * 64, hd: random() * 2 * PI, turn: 0,\n    down: true, t: random() * 1.5, len: 1.2 + random() * 1.8,\n  };\n}\n\n// One finger, one step: it curves as it goes and steers away from the edges.\n// A stroke lasts 1.2 to 3 seconds, then the finger lifts for 0.2 to 0.5\n// seconds and comes down somewhere else.\nfunction moveFinger(S, f, ds) {\n  f.t += ds;\n  if (!f.down) {\n    if (f.t >= f.len) {\n      f.down = true;\n      f.t = 0;\n      f.len = 1.2 + random() * 1.8;\n      // It comes down where the velvet is least written: the best of four\n      // tries, scored by how far the pile round each is from the palm's.\n      let best = 1e9;\n      for (let k = 0; k \u003c 4; k++) {\n        const x = 6 + random() * (W - 13), y = 6 + random() * (H - 13);\n        let sc = 0;\n        for (let v = -9; v \u003c= 9; v += 3)\n          for (let u = -9; u \u003c= 9; u += 3) {\n            const p = cl(round(y + v), 0, H - 1) * W + cl(round(x + u), 0, W - 1);\n            sc += Math.abs(S.qx[p]) + Math.abs(S.qy[p] - PALM);\n          }\n        if (sc \u003c best) (best = sc), (f.x = x), (f.y = y);\n      }\n      f.hd = random() * 2 * PI;\n      f.turn = (random() - 0.5) * 3;\n    }\n    return false;\n  }\n  if (f.t >= f.len) {\n    f.down = false;\n    f.t = 0;\n    f.len = 0.2 + random() * 0.3;\n    return false;\n  }\n  f.turn += (random() - 0.5) * 14 * ds - f.turn * 0.8 * ds;\n  f.turn = cl(f.turn, -2.6, 2.6);\n  // Steer back towards the middle near an edge.\n  const mx = 10, cx = f.x \u003c mx ? 1 : f.x > W - 1 - mx ? -1 : 0, cy = f.y \u003c mx ? 1 : f.y > H - 1 - mx ? -1 : 0;\n  if (cx || cy) {\n    const want = atan2(cy || (32 - f.y) * 0.01, cx || (32 - f.x) * 0.01);\n    let dh = want - f.hd;\n    dh -= 2 * PI * Math.round(dh / (2 * PI));\n    f.turn += dh * 4 * ds;\n  }\n  f.hd += f.turn * ds;\n  return true;\n}\n\n// Brush the pile under the fingertip towards the way it moves.\nfunction brush(S, x, y, dx, dy, r) {\n  const r2 = (r + 1) * (r + 1);\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, y + r + 1); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, x + r + 1); xx++) {\n      const ex = xx - x, ey = yy - y, e2 = ex * ex + ey * ey;\n      if (e2 > r2) continue;\n      const w = 0.55 * (1 - sm(0.45 * r, r + 0.6, sqrt(e2))), p = yy * W + xx;\n      S.qx[p] += (dx - S.qx[p]) * w;\n      S.qy[p] += (dy - S.qy[p]) * w;\n    }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp, r = 2.2 + 3.6 * S.width, v = 26;\n  S.clock += ds;\n  for (const f of S.fingers) {\n    if (!moveFinger(S, f, ds)) continue;\n    const dx = cos(f.hd), dy = sin(f.hd), dist = v * ds, n = Math.max(1, Math.ceil(dist / 0.7));\n    for (let i = 0; i \u003c n; i++) {\n      f.x += (dx * dist) / n;\n      f.y += (dy * dist) / n;\n      brush(S, f.x, f.y, dx, dy, r);\n    }\n  }\n  // Every 7 seconds a palm strokes down one band 22 LEDs wide, from the\n  // top edge to the bottom in 1.6 seconds, and lays its pile straight down.\n  S.palmT += ds;\n  if (S.palmT >= 7) {\n    S.palmT -= 7;\n    S.palmY = -14;\n    S.palmX = 11 + random() * 42;\n  }\n  if (S.palmY > -50 && S.palmY \u003c H + 14) {\n    const y0 = S.palmY;\n    S.palmY += (156 / 1.6) * ds;\n    const ym = (y0 + S.palmY) / 2;\n    for (let y = max(0, floor(y0 - 12)); y \u003c= min(H - 1, S.palmY + 12); y++) {\n      const wy = 1 - sm(4, 12, Math.abs(y - ym));\n      if (wy \u003c= 0) continue;\n      for (let x = max(0, floor(S.palmX - 13)); x \u003c= min(W - 1, S.palmX + 13); x++) {\n        const w = 0.5 * wy * (1 - sm(7, 12, Math.abs(x - S.palmX))), p = y * W + x;\n        S.qx[p] += (0 - S.qx[p]) * w;\n        S.qy[p] += (PALM - S.qy[p]) * w;\n      }\n    }\n  }\n  if (S.flat > 0) {\n    S.flat -= ds;\n    for (let p = 0; p \u003c N; p++) {\n      S.qx[p] += (0 - S.qx[p]) * 0.2;\n      S.qy[p] += (PALM - S.qy[p]) * 0.2;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.width = cl(k[2], 0, 1);\n  S.pile = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on velvet that has been written on for fourteen seconds, with the\n    // next palm due 2.5 seconds in.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 420; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.palmT = 4.5;\n    S.palmY = -99;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.flat = 0.5;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, dcol = S.d;\n  // Pile length: a short nap leans 36 degrees when brushed and its sheen is\n  // broad; a long plush one leans 72 degrees with a tight bright sheen.\n  const u = (S.pile + 1) / 2, bmax = ((36 + 36 * u) * PI) / 180, pex = 3 + 4 * u;\n  const az = LAZ + SWAY * sin((2 * PI * S.clock) / 12);\n  const lx = cos(az) * cos(ELEV), ly = sin(az) * cos(ELEV), lz = sin(ELEV);\n  const h0 = S.hue + 0.42, hh = h0 - floor(h0);\n  // Orange, gold and chartreuse velvet read rust, mustard or olive at the\n  // body's level, so there the body is lifted towards 0.8 and its darker\n  // faces lean to ruby.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.24, 0.34, hh));\n  // The sheen is a pale tint of the dye.\n  hsv(h0, 0.18, 1, dcol);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const qx = S.qx[p], qy = S.qy[p];\n      let m = sqrt(qx * qx + qy * qy);\n      const ang = (m > 1e-4 ? atan2(qy, qx) : 0) + S.ga[p];\n      m = min(1, m * S.gl[p]);\n      // The fibre axis t: leaning by beta towards the pile's way.\n      const be = m * bmax, sb = sin(be), cb = cos(be);\n      const tx = sb * cos(ang), ty = sb * sin(ang), tz = cb;\n      const tl = tx * lx + ty * ly + tz * lz, sl = sqrt(max(0, 1 - tl * tl));\n      // Kajiya-Kay for a fibre: the lit side goes with the sine to the\n      // light, and a tuft seen end-on shows less of its side. The sheen is\n      // the reflection cone round the fibre crossing the eye straight ahead.\n      const diff = sl * (0.35 + 0.65 * sb);\n      const spec = pow(max(0, sl * sb - tl * cb), pex);\n      const body = (0.22 + 0.78 * diff) * S.gb[p];\n      const rich = 1 - diff;\n      hsv(h0 - (0.012 + 0.06 * warm) * rich, 0.78 + 0.2 * rich - 0.25 * spec, 1, c);\n      const vb = body * (0.8 + 0.2 * warm) + 0.5 * warm * (1 - body), vs = 0.55 * spec;\n      display.setPixel(\n        x, y,\n        round(255 * min(1, c[0] * vb + dcol[0] * vs)),\n        round(255 * min(1, c[1] * vb + dcol[1] * vs)),\n        round(255 * min(1, c[2] * vb + dcol[2] * vs)),\n      );\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Width","min":0,"max":1,"about":"The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel."},{"name":"Pile","min":-1,"max":1,"about":"The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain."}],"start":[0,2,0,0.06],"measures":{"motion":0.0497,"detail":0.0465,"edges":0.1077,"complexity":1.9034,"coverage":1,"colour":0.202,"drift":0.1599},"knobResponse":[0.6367,0.0934,0.1478,0.2049]},{"slug":"voronoi","title":"Voronoi","family":"cells","round":2,"note":"흐름을 타고 도는 씨앗마다 가장 가까운 LED 를 제 유리 색으로 칠하고, 조각 사이에 1 LED 납선이 서요. K4 로 거리를 재는 법을 바꾸면 조각 가운데 둥근 유리가 원에서 마름모를 지나 정사각형이 돼요.","idea":"Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.","buttons":"K1 tap reshuffles the glass colours.","code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-voronoi","type":"code","name":"voronoi","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of most of the glass; a few panes take the colours across the wheel from it."},{"name":"Speed","min":0.2,"max":6,"about":"How fast the current carries the seeds round."},{"name":"Cells","min":20,"max":60,"about":"How many panes, from 20 big ones to 60 small ones."},{"name":"Metric","min":0,"max":2,"about":"How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square."}],"start":[0,2,20,0.06],"measures":{"motion":2.0975,"detail":0.1621,"edges":1,"complexity":0.2058,"coverage":0.8378,"colour":0.5986,"drift":0.1196},"knobResponse":[0.4827,0.3489,0.3517,0.1477]},{"slug":"waggle-dance","title":"Waggle Dance","family":"insect","round":24,"note":"관찰 벌통의 벌집 한 장이 패널 높이로 서요. 위에 봉한 꿀, 그 아래 여덟 색 꽃가루 띠와 애벌레 방이 있고, 벌 여든 마리가 기어 다녀요. 아래쪽 빈 벌집에서는 꽃가루를 단 벌이 몸을 흔들며 8 자 춤을 추고 따르는 벌들이 둘러서요. 춤의 각도가 해에서 본 꽃밭의 방향이라 K4 를 돌리면 모든 춤이 같이 돌아요.","idea":"Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.","buttons":"K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.","code":"// ===== Patternflow pattern =====\n// Title:   Waggle Dance\n// Family:  insect\n// Idea:    Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after Karl von Frisch's reading of the honeybee's waggle dance\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1\n//\n// Knob 1: Light. Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see.\n// Knob 2: Speed. At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower.\n// Knob 3: Bees. Eighty to 240; turned up, more walk in from the sides until they hide the comb.\n// Knob 4: Sun. The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass.\n// Buttons: K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Cells six LEDs across the flats, rows five apart (a hexagon squashed by\n// four in a hundred, so every cell is drawn alike); the frame's top bar,\n// its bottom bar and the entrance slot in it.\nconst [CW, RH, TOP, BOT, NC, NR, ENX] = [6, 5, 5, 123, 13, 27, 9];\nconst Y0 = TOP + 2.5;\nconst [EMPTY, HONEY, NECTAR, POLLEN, BROOD, LARVA, EGG] = [0, 1, 2, 3, 4, 5, 6];\nconst [CRAWL, REST, DIP, FOLLOW, DANCE, HOME, EXIT] = [0, 1, 2, 3, 4, 5, 6];\n// Pollen: orange, yellow, ochre, rust, purple-grey, buff, olive, red-orange.\nconst POLLENS = [[0.95, 0.52, 0.08], [0.95, 0.8, 0.16], [0.74, 0.54, 0.17], [0.6, 0.25, 0.1],\n  [0.44, 0.37, 0.5], [0.86, 0.68, 0.36], [0.55, 0.58, 0.24], [0.9, 0.4, 0.12]];\n// Bees: a dark race, the usual, a golden one. Thorax, then the amber bands.\nconst THX = [[0.5, 0.37, 0.2], [0.78, 0.56, 0.24], [0.9, 0.68, 0.3]];\nconst AMB = [[0.62, 0.44, 0.18], [1, 0.72, 0.2], [1, 0.84, 0.32]];\nconst [DARK, HEAD, WING] = [[0.3, 0.18, 0.08], [0.14, 0.1, 0.06], [0.8, 0.84, 0.9]];\nconst [SUNC, DAYC, WARM, REDC] = [[1, 0.84, 0.56], [1, 0.94, 0.82], [1, 0.66, 0.34], [1, 0.09, 0.035]];\n// Where the flowers lie, against the main field, and how often foragers come from each.\nconst FIELDS = [0, 0, 0.95, -1.9];\n\nconst { min, max, sin, cos, abs, sqrt, floor, round, exp, atan2, PI } = Math;\nconst len = (a, b) => sqrt(a * a + b * b);\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst wrap = (a) => a - 2 * PI * round(a / (2 * PI));\nconst rnd = () => Math.random();\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Distance from a cell's centre in its own hexagon, 3 on the wall.\nconst hexd = (dx, dy) => max(abs(dx), abs(0.5 * dx + 0.9 * dy), abs(0.5 * dx - 0.9 * dy));\nconst cellX = (r, c) => CW * (c - 1) + (r & 1 ? 3.5 : 0.5);\nconst cellY = (r) => Y0 + (r - 1) * RH;\nconst cap = (t) => t === BROOD || t === HONEY;\n\n// Which cell each LED sits in, and where in it.\nfunction grid(S) {\n  for (let y = TOP; y \u003c BOT; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r0 = round((y + 0.5 - Y0) / RH) + 1;\n      let [best, next] = [99, 99];\n      const p = y * W + x;\n      for (let r = max(0, r0 - 1); r \u003c= min(NR - 1, r0 + 1); r++) {\n        const off = r & 1 ? 3.5 : 0.5;\n        const c0 = round((x + 0.5 - off) / CW) + 1;\n        for (let c = max(0, c0 - 1); c \u003c= min(NC - 1, c0 + 1); c++) {\n          const dx = x + 0.5 - cellX(r, c);\n          const dy = y + 0.5 - cellY(r);\n          const d = hexd(dx, dy);\n          if (d \u003c best) {\n            next = best;\n            S.cid2[p] = S.cid[p];\n            best = d;\n            S.cid[p] = r * NC + c;\n            [S.hd[p], S.dx[p], S.dy[p]] = [d, dx, dy];\n          } else if (d \u003c next) {\n            next = d;\n            S.cid2[p] = r * NC + c;\n          }\n        }\n      }\n    }\n}\n\n// Honey over the top and down the corners, a band of pollen, brood below.\nfunction layout(S) {\n  for (let r = 0; r \u003c NR; r++)\n    for (let c = 0; c \u003c NC; c++) {\n      const i = r * NC + c;\n      const [x, y] = [cellX(r, c), cellY(r)];\n      const e = len((x - 32) / 33, (y - 70) / 28) + 0.05 * (sin(x * 0.21 + y * 0.13) + sin(y * 0.29 - x * 0.17 + 2));\n      const u = rnd();\n      let t;\n      if (y \u003c 24 || (e > 1.28 && y \u003c 64)) t = u \u003c 0.82 ? HONEY : u \u003c 0.95 ? NECTAR : EMPTY;\n      else if (e > 1 && y \u003c 72) t = u \u003c 0.62 ? POLLEN : u \u003c 0.78 ? NECTAR : EMPTY;\n      else if (e \u003c 0.72) t = u \u003c 0.68 ? BROOD : u \u003c 0.78 ? LARVA : u \u003c 0.81 ? EGG : EMPTY;\n      else if (e \u003c 1) t = u \u003c 0.34 ? LARVA : u \u003c 0.48 ? EGG : u \u003c 0.64 ? BROOD : u \u003c 0.68 ? POLLEN : EMPTY;\n      else t = u \u003c 0.12 ? POLLEN : u \u003c 0.27 ? NECTAR : EMPTY;\n      [S.type[i], S.age[i], S.tint[i], S.gap[i], S.pol[i]] = [t, rnd(), rnd(), rnd() * 6.283, floor(rnd() * 8)];\n    }\n}\n\n// Each LED's colour as it would be in white light, and how much of the\n// sun reaches it: cell bottoms stay in shadow.\nfunction paint(S) {\n  const { base, expo } = S;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    let r, g, b;\n    let ex = 1;\n    let dim = 0.66;\n    if (y \u003c TOP || y >= BOT) {\n      // Pine, the grain running along the bar, a groove where it meets the comb.\n      const gr = 0.8 + 0.2 * sin(x * 0.23 + 2 * sin(x * 0.07 + y * 1.3));\n      const edge = y === TOP - 1 || y === BOT ? 0.55 : 1;\n      const k = gr * edge * (0.9 + 0.1 * hash(p, 5));\n      [r, g, b] = [0.6 * k, 0.42 * k, 0.24 * k];\n      if (y > BOT + 1 && y \u003c H - 1 && abs(x + 0.5 - ENX) \u003c 5) [r, g, b] = [0.02, 0.015, 0.01];\n    } else {\n      const [i, d, dx, dy] = [S.cid[p], S.hd[p], S.dx[p], S.dy[p]];\n      const [t, tn, rr, lit] = [S.type[i], S.tint[i], len(dx, dy), -(dx + dy) / 3];\n      if (t === HONEY) {\n        dim = 1;\n        const k = (1 - 0.12 * (d / 2.6) ** 2 + 0.06 * lit) * (0.95 + 0.06 * hash(p, 1));\n        [r, g, b] = [(1 - 0.04 * tn) * k, (0.88 - 0.16 * tn) * k, (0.6 - 0.26 * tn) * k];\n      } else if (t === NECTAR) {\n        // Nectar: dark amber down in the cell, a bright meniscus round it, and a glint.\n        const f = (0.08 + 0.92 * sm(1.5, 2.4, d)) * (0.75 + 0.3 * tn);\n        [r, g, b] = [0.07 + 0.62 * f, 0.03 + 0.36 * f, 0.006 + 0.06 * f];\n        if (abs(dx + 1) \u003c 0.6 && abs(dy + 1) \u003c 0.7) [r, g, b] = [0.95, 0.9, 0.74];\n        ex = 0.6;\n      } else if (t === POLLEN) {\n        const c = POLLENS[S.pol[i]];\n        dim = 0.8;\n        // Packed down in the cell, its inside wall in shadow round it.\n        const k = (0.8 + 0.25 * tn) * (1 - 0.85 * sm(1.5, 2.3, d));\n        [r, g, b] = c.map((v, n) => v * k * (0.82 + 0.3 * hash(p, 2 + n)));\n        ex = 0.8;\n      } else if (t === BROOD) {\n        const k = (1 - 0.32 * (rr / 2.7) ** 2 + 0.1 * lit) * (hash(p, 6) \u003c 0.14 ? 0.78 : 1) * (0.9 + 0.15 * tn);\n        [r, g, b] = [0.8 * k, 0.68 * k, 0.5 * k];\n      } else {\n        // An open cell: dark at the bottom, its lower inside wall catching the light.\n        const lip = sm(1.6, 2.4, d) * (dy > 0.5 ? 1 : 0.3);\n        const k = (0.04 + 0.1 * lip) * (0.75 + 0.5 * tn);\n        [r, g, b] = [k, k * 0.68, k * 0.38];\n        ex = 0.2 + 0.8 * lip;\n        if (t === LARVA) {\n          // The larva curled in a C on its bed of jelly, bigger as it grows.\n          const a = S.age[i];\n          const [R, th] = [0.4 + 1.1 * a, 0.45 + 0.55 * a];\n          const ang = wrap(atan2(dy, dx) - S.gap[i]);\n          let on = a \u003c 0.3 ? sm(1.2, 0.5, rr) : sm(th + 0.3, th - 0.3, abs(rr - R)) * sm(0.5, 1, abs(ang));\n          if (rr \u003c 1.9) [r, g, b] = [r + 0.18, g + 0.17, b + 0.14];\n          const sh = 0.82 + 0.18 * clamp(lit + 0.5, 0, 1) + 0.05 * sin(ang * 5);\n          r += (0.97 * sh - r) * on;\n          g += (0.94 * sh - g) * on;\n          b += (0.85 * sh - b) * on;\n          ex += (0.9 - ex) * on;\n        } else if (t === EGG && rr \u003c 0.7) [r, g, b] = [0.86, 0.85, 0.78];\n      }\n      // The walls: pale wax round the honey, the rims of open cells lit,\n      // and a dark seam where two brood caps meet.\n      const w = sm(2.4, 2.6, d);\n      if (w > 0) {\n        const t2 = S.type[S.cid2[p]];\n        const pale = t === HONEY || t === NECTAR ? 1 : 0;\n        const seam = (t === BROOD || t2 === BROOD) && cap(t) && cap(t2) ? 0.15 : 1;\n        // Light from above rakes the slanted walls; the upright ones stand side on to it.\n        const k = (0.85 + 0.3 * hash(p, 8)) * seam * (!pale && abs(dx) > 2.6 ? 0.45 : 1);\n        r += ((0.34 + 0.18 * pale) * k - r) * w;\n        g += ((0.24 + 0.15 * pale) * k - g) * w;\n        b += ((0.11 + 0.08 * pale) * k - b) * w;\n        ex += ((seam \u003c 1 ? 0.15 : 1) - ex) * w;\n      }\n    }\n    // The comb sits back in the hive's shade; the bees on it catch the light.\n    base[q] = r * dim;\n    base[q + 1] = g * dim;\n    base[q + 2] = b * dim;\n    expo[p] = ex;\n  }\n}\n\n// The window throws its four panes of sun on the glass; they slide and lean with the sun.\nfunction sunPatch(S, s) {\n  const [cx, cy, sh] = [32 + 22 * s, 74 - 6 * abs(s), -0.5 * s];\n  for (let p = 0; p \u003c N; p++) {\n    const v = ((p / W) | 0) + 0.5 - cy;\n    const u = (p % W) + 0.5 - cx - sh * v;\n    let m = sm(22, 16, abs(u)) * sm(40, 33, abs(v));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(u));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(v + 5));\n    S.sun[p] = m;\n  }\n  S.sunK = s;\n}\n\nfunction newBee(S, x, y, h) {\n  const u = rnd();\n  const b = { x, y, h, m: CRAWL, t: rnd() * 3, v: 2.6 + 2.6 * rnd(), s: 1.12 + 0.14 * rnd(), tone: u \u003c 0.18 ? 0 : u \u003c 0.82 ? 1 : 2, ph: rnd() * 6.28, w: 0, wag: 0, wp: 0 };\n  S.bees.push(b);\n  return b;\n}\n\n// A bee to the dance floor on the lower comb, clear of the other dances.\nfunction spot(S) {\n  let best = [32, 104];\n  let far = -1;\n  for (let k = 0; k \u003c 24; k++) {\n    const x = 12 + 40 * rnd();\n    const y = 80 + 33 * rnd();\n    // The lower the better, near the entrance, but well clear of the others.\n    const d = min(24, ...S.dances.map((D) => len(D.cx - x, D.cy - y))) + 0.1 * y;\n    if (d > far) [far, best] = [d, [x, y]];\n  }\n  return best;\n}\n\nfunction newDance(S, b, vig) {\n  const [cx, cy] = spot(S);\n  // A forager from a rich patch runs longer, keeps at it and draws more followers.\n  const D = { b, cx, cy, fl: FIELDS[floor(rnd() * 4)] + 0.12 * (rnd() - 0.5), L: vig ? 11 : 8 + 2.5 * rnd(), tw: vig ? 1.25 : 0.85 + 0.3 * rnd(),\n    tr: vig ? 0.9 : 1 + 0.3 * rnd(), tau: 0, side: rnd() \u003c 0.5 ? -1 : 1, n: vig ? 26 : 9 + floor(10 * rnd()), amp: vig ? 1 : 0.65 + 0.2 * rnd(),\n    want: vig ? 10 : 6 + floor(3 * rnd()), on: false, foll: [], rec: 0, pc: floor(rnd() * 3) };\n  D.th = D.fl - S.sunA;\n  b.D = D;\n  S.dances.push(D);\n  return D;\n}\n\n// The bees nearest the dance turn and gather round it.\nfunction recruit(S, D, snap) {\n  const free = S.bees.filter((b) => (b.m === CRAWL || b.m === REST) && len(b.x - D.cx, b.y - D.cy) \u003c 24);\n  free.sort((a, b) => len(a.x - D.cx, a.y - D.cy) - len(b.x - D.cx, b.y - D.cy));\n  for (const b of free) {\n    if (D.foll.length >= D.want) break;\n    Object.assign(b, { m: FOLLOW, D, a: atan2(b.x - D.cx, -(b.y - D.cy)), t: 5 + 10 * rnd() });\n    D.foll.push(b);\n    if (snap) {\n      const R = D.L / 2 + 3.4;\n      b.x = D.cx + R * sin(b.a);\n      b.y = D.cy - R * cos(b.a);\n      b.h = b.a + PI;\n    }\n  }\n}\n\nfunction seek(b, tx, ty, sp, dt) {\n  const [dx, dy] = [tx - b.x, ty - b.y];\n  const r = len(dx, dy);\n  if (r > 0.25) {\n    const want = atan2(dx, -dy);\n    const e = wrap(want - b.h);\n    b.h += clamp(e, -5 * dt, 5 * dt);\n    const st = min(r, sp * dt) * max(0.15, cos(e));\n    b.x += sin(b.h) * st;\n    b.y -= cos(b.h) * st;\n  }\n  return r;\n}\n\nfunction stepDance(S, D, dt) {\n  const b = D.b;\n  D.th += clamp(wrap(D.fl - S.sunA - D.th), -1.5 * dt, 1.5 * dt);\n  const [ux, uy] = [sin(D.th), -cos(D.th)];\n  if (!D.on) {\n    // The forager hurries up from the entrance to where she will dance.\n    b.m = HOME;\n    if (seek(b, D.cx - (ux * D.L) / 2, D.cy - (uy * D.L) / 2, D.n > 20 ? 13 : 9, dt) \u003c 1.2) {\n      D.on = true;\n      b.m = DANCE;\n      recruit(S, D, false);\n    }\n    return;\n  }\n  D.tau += dt;\n  if (D.tau >= D.tw + D.tr) {\n    D.tau -= D.tw + D.tr;\n    D.side = -D.side;\n    if (--D.n \u003c= 0) {\n      // Done: she goes back out, and some of her followers go after the flowers.\n      [D.gone, b.m, b.wag] = [true, EXIT, 0];\n      for (const f of D.foll) [f.m, f.t] = [rnd() \u003c 0.4 ? EXIT : CRAWL, 1 + 2 * rnd()];\n      return;\n    }\n  }\n  let want;\n  if (D.tau \u003c D.tw) {\n    const f = D.tau / D.tw - 0.5;\n    b.x = D.cx + ux * D.L * f;\n    b.y = D.cy + uy * D.L * f;\n    want = D.th;\n    b.wag = D.amp;\n    b.wp += dt * 2 * PI * 13;\n  } else {\n    const s = (D.tau - D.tw) / D.tr;\n    const ps = D.side * PI * s;\n    const [rx, ry] = [ux * cos(ps) - uy * sin(ps), ux * sin(ps) + uy * cos(ps)];\n    b.x = D.cx + (rx * D.L) / 2;\n    b.y = D.cy + (ry * D.L) / 2;\n    want = atan2(-D.side * ry, -D.side * rx);\n    b.wag = 0;\n  }\n  b.h += clamp(wrap(want - b.h), -14 * dt, 14 * dt);\n  // Followers keep their place round her, turned to face her, and drift with her.\n  D.foll = D.foll.filter((f) => f.m === FOLLOW && f.D === D);\n  D.rec -= dt;\n  if (D.rec \u003c= 0) {\n    D.rec = 1.5;\n    if (D.foll.length \u003c D.want) recruit(S, D, false);\n  }\n  const da = atan2(b.x - D.cx, -(b.y - D.cy));\n  for (const f of D.foll) {\n    f.a += dt * 0.35 * sin(wrap(da - f.a));\n    const R = D.L / 2 + 3.4 + 0.4 * sin(S.t * 2 + f.ph);\n    if (seek(f, D.cx + R * sin(f.a), D.cy - R * cos(f.a), 6, dt) \u003c 1.2) f.h += clamp(wrap(atan2(b.x - f.x, -(b.y - f.y)) - f.h), -6 * dt, 6 * dt);\n    if ((f.t -= dt) \u003c= 0) [f.m, f.t, f.h] = [CRAWL, 1 + 2 * rnd(), f.h + PI];\n  }\n}\n\nfunction crawl(S, b, dt) {\n  b.w += (rnd() - 0.5) * 10 * sqrt(dt);\n  b.w *= 1 - min(1, 1.5 * dt);\n  let want = null;\n  const ex = b.x \u003c 4 ? 1 : b.x > W - 4 ? -1 : 0;\n  const ey = b.y \u003c TOP + 4 ? 1 : b.y > BOT - 4 ? -1 : 0;\n  if (ex || ey) want = atan2(ex, -ey);\n  b.h += b.w * dt;\n  if (want !== null) b.h += clamp(wrap(want - b.h), -3 * dt, 3 * dt);\n  const st = b.v * dt;\n  b.x += sin(b.h) * st;\n  b.y -= cos(b.h) * st;\n}\n\nfunction step(S, dt) {\n  const { bees } = S;\n  for (const b of bees) {\n    const m = b.m;\n    if (m === DANCE || m === HOME || m === FOLLOW) continue;\n    if (m === EXIT) {\n      if (seek(b, ENX, BOT + 1.5, 7, dt) \u003c 1.5) b.out = true;\n      continue;\n    }\n    // Others give the dancer and her followers room.\n    for (const D of S.dances) {\n      const [dx, dy] = [b.x - D.cx, b.y - D.cy];\n      const r = len(dx, dy);\n      if (D.on && r \u003c D.L / 2 + 9) {\n        if (m !== CRAWL) b.t = 0;\n        b.x += (dx / (r + 0.01)) * 4 * dt;\n        b.y += (dy / (r + 0.01)) * 4 * dt;\n        b.h += clamp(wrap(atan2(dx, -dy) - b.h), -4 * dt, 4 * dt);\n      }\n    }\n    if (m === CRAWL) crawl(S, b, dt);\n    else if (m === REST) b.h += sin(S.t * 6 + b.ph) * 0.5 * dt;\n    if ((b.t -= dt) > 0) continue;\n    // Backing out of a cell, she turns away.\n    if (m === DIP) [b.x, b.y, b.h] = [b.x - sin(b.h) * 1.5, b.y + cos(b.h) * 1.5, b.h + PI * (0.6 + 0.8 * rnd())];\n    const u = rnd();\n    b.m = CRAWL;\n    b.t = 1 + 3 * rnd();\n    if (u \u003c 0.28) [b.m, b.t] = [REST, 0.8 + 2.5 * rnd()];\n    else if (u \u003c 0.5 && m !== DIP) {\n      // Head first into a cell: to feed a larva, take nectar or pack pollen.\n      const hx = round(b.x + sin(b.h) * 2.2 - 0.5);\n      const hy = round(b.y - cos(b.h) * 2.2 - 0.5);\n      if (hx >= 0 && hx \u003c W && hy >= TOP + 2 && hy \u003c BOT - 2) {\n        const i = S.cid[hy * W + hx];\n        const t = S.type[i];\n        if (t !== HONEY && t !== BROOD) {\n          const r = floor(i / NC);\n          [b.m, b.t] = [DIP, 2 + 4 * rnd()];\n          b.x = cellX(r, i % NC) - sin(b.h) * 1.5;\n          b.y = cellY(r) + cos(b.h) * 1.5;\n        }\n      }\n    }\n  }\n  for (const D of S.dances) stepDance(S, D, dt);\n  S.dances = S.dances.filter((D) => !D.gone);\n  for (const b of bees) if (b.D && (b.D.gone || (b.m !== FOLLOW && b.m !== DANCE && b.m !== HOME))) b.D = null;\n  // Bees shoulder each other apart; those still at a cell or dancing stand firm.\n  for (const a of bees) {\n    if (a.m === REST || a.m === DIP || a.m === DANCE) continue;\n    for (const b of bees) {\n      const dx = a.x - b.x;\n      const dy = a.y - b.y;\n      if (abs(dx) > 3.6 || abs(dy) > 3.6 || b === a) continue;\n      const r = len(dx, dy);\n      if (r \u003c 3.6 && r > 0.01) {\n        a.x += (dx / r) * (3.6 - r) * 0.25;\n        a.y += (dy / r) * (3.6 - r) * 0.25;\n      }\n    }\n  }\n  S.bees = bees.filter((b) => !b.out);\n}\n\nexport function setup(params) {\n  const S = { t: 0, started: false, sunA: 0, sunK: 9, next: 6, add: 0, c0: 4.2, c1: 8.5, cd: 0.55, bees: [], dances: [] };\n  for (const k of [\"cid\", \"cid2\"]) S[k] = new Int16Array(N);\n  for (const k of [\"hd\", \"dx\", \"dy\", \"expo\", \"X\", \"amb\", \"pool\", \"sun\"]) S[k] = new Float32Array(N);\n  for (const k of [\"base\", \"A\", \"jit\"]) S[k] = new Float32Array(N * 3);\n  for (const k of [\"age\", \"tint\", \"gap\"]) S[k] = new Float32Array(NR * NC);\n  for (const k of [\"type\", \"pol\"]) S[k] = new Uint8Array(NR * NC);\n  grid(S);\n  layout(S);\n  paint(S);\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p % W, (p / W) | 0];\n    S.amb[p] = 0.74 + 0.2 * (1 - y / H) + 0.03 * sin(x * 0.11 + y * 0.05) - 0.12 * ((x - 31.5) / 32) ** 4;\n    S.pool[p] = 0.42 + 0.6 * exp(-((x - 40) ** 2 + (y - 74) ** 2) / 3000);\n    const j = 0.94 + 0.12 * hash(p, 19);\n    for (let c = 0; c \u003c 3; c++) S.jit[p * 3 + c] = j * (0.97 + 0.06 * hash(p, 20 + c));\n  }\n  params.s = S;\n}\n\nfunction start(S, n) {\n  // Bees thickest on the brood, two dances already going.\n  for (let k = 0; k \u003c n; k++) {\n    let x, y;\n    for (let j = 0; j \u003c 4; j++) {\n      x = 2 + 60 * rnd();\n      y = TOP + 3 + (BOT - TOP - 6) * rnd();\n      if (rnd() \u003c 0.35 + 0.65 * sm(30, 70, y)) break;\n    }\n    newBee(S, x, y, rnd() * 6.28);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const b = newBee(S, 0, 0, 0);\n    const D = newDance(S, b, false);\n    Object.assign(D, { fl: k ? 0.08 : -0.1, cx: k ? 20 : 43, cy: k ? 111 : 102, on: true, tau: rnd() * (D.tw + D.tr), rec: 1.5 });\n    D.th = D.fl - S.sunA;\n    b.m = DANCE;\n    stepDance(S, D, 0);\n    b.h = D.tau \u003c D.tw ? D.th : b.h;\n    recruit(S, D, true);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.light = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  const want = round(clamp(k[2], 80, 240));\n  const sk = clamp(k[3], -1, 1);\n  S.sunA = sk * PI;\n  if (abs(sk - S.sunK) > 0.002) sunPatch(S, sk);\n  if (!S.started) {\n    S.started = true;\n    start(S, want);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  // Clouds cross the sun now and then; the first one early.\n  if (S.t > S.c1 + 1.5) {\n    S.c0 = S.t + 8 + 20 * rnd();\n    S.c1 = S.c0 + 3 + 6 * rnd();\n    S.cd = 0.4 + 0.5 * rnd();\n  }\n  S.cloud = 1 - S.cd * sm(S.c0, S.c0 + 1.5, S.t) * sm(S.c1 + 1.5, S.c1, S.t);\n  const vig = input.btnPressed && input.btnPressed[0];\n  if ((S.next -= d) \u003c= 0 || vig) {\n    if (S.dances.length \u003c (vig ? 4 : 3)) {\n      const b = newBee(S, ENX + 4 * (rnd() - 0.5), BOT + 1, 0);\n      b.m = HOME;\n      newDance(S, b, vig);\n    }\n    if (!vig) S.next = 5 + 8 * rnd();\n  }\n  // Bees walk in from the sides, or go out at the entrance, to match the knob.\n  let ord = 0;\n  for (const b of S.bees) if (b.m \u003c= FOLLOW) ord++;\n  if ((S.add -= dt) \u003c= 0) {\n    S.add = 0.1;\n    if (ord \u003c want) {\n      const l = rnd() \u003c 0.5;\n      newBee(S, l ? -3 : W + 3, TOP + 8 + (BOT - TOP - 16) * rnd(), l ? PI / 2 : -PI / 2).t = 1.5;\n    } else if (ord > want + 2) {\n      const b = S.bees.find((b) => b.m === CRAWL);\n      if (b) b.m = EXIT;\n    }\n  }\n  step(S, d);\n}\n\n// One bee into the albedo: her body worked out on a 12 x 12 patch first,\n// then her shadow a step down and right, head, thorax, banded abdomen, wings.\nconst PC = new Float32Array(144);\nconst PP = new Uint8Array(144);\nfunction bee(S, b) {\n  const { A, X } = S;\n  const [s, fx, fy, dip, wg] = [b.s, sin(b.h), -cos(b.h), b.m === DIP, b.wag > 0];\n  const wag = wg ? b.wag * sin(b.wp) : b.m === REST ? 0.15 * sin(S.t * 9 + b.ph) : 0;\n  const [bl, th, am] = [wg ? 0.4 : 0, THX[b.tone], AMB[b.tone]];\n  const shim = 0.24 + 0.14 * sin(S.t * 2.3 + b.ph + b.x * 0.3);\n  // A box round her, the whole patch for a dancer and her blur.\n  const ax = wg ? 5 : s * (3.2 * abs(fx) + 1.9 * abs(fy)) + 0.5;\n  const ay = wg ? 5 : s * (3.2 * abs(fy) + 1.9 * abs(fx)) + 0.5;\n  const [x0, y0] = [floor(b.x - ax), floor(b.y - ay)];\n  const nw = min(12, floor(b.x + ax) - x0 + 2);\n  const nh = min(12, floor(b.y + ay) - y0 + 2);\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const X0 = x0 + i + 0.5 - b.x;\n      const Y0 = y0 + j + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      PC[k] = shape(u, v, s, dip, bl);\n      PP[k] = PART;\n    }\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      const c = PC[k];\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      const q = p * 3;\n      const sh = i && j ? PC[k - nw - 1] : 0;\n      if (sh > 0) {\n        const f = 1 - 0.7 * sh * (1 - c);\n        A[q] *= f;\n        A[q + 1] *= f;\n        A[q + 2] *= f;\n      }\n      const X0 = px + 0.5 - b.x;\n      const Y0 = py + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      // A waggling dancer buzzes her wings into a pale blur round her.\n      let wa = wg ? 0.55 * clamp(1.6 - len((u + 0.7) / 1.5, v / 1.7), 0, 1) : 0;\n      if (c \u003c= 0 && wa \u003c= 0) continue;\n      const pt = PP[k];\n      const col = pt === 1 ? HEAD : pt === 2 ? th : null;\n      const st = u > -0.85 ? 1 : u > -1.35 ? 0 : u > -1.9 ? 0.8 : 0;\n      if (u > -2.2 && u \u003c 0.3 && abs(v) > 0.35 && abs(v) \u003c 1.15) wa = max(wa, shim);\n      const a = max(c, wa);\n      for (let n = 0; n \u003c 3; n++) {\n        let e = col ? col[n] : DARK[n] + (am[n] - DARK[n]) * st;\n        e += (WING[n] - e) * wa;\n        A[q + n] += (e - A[q + n]) * a;\n      }\n      X[p] += (1 - X[p]) * a;\n    }\n  // A forager home from the field carries her pollen loads on her hind legs.\n  if (b.D && (b.m === DANCE || b.m === HOME)) {\n    const c = POLLENS[b.D.pc];\n    for (const sd of [-1, 1]) {\n      const px = round(b.x + s * (-0.7 * fx - sd * 1.25 * fy) - 0.5);\n      const py = round(b.y + s * (-0.7 * fy + sd * 1.25 * fx) - 0.5);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      [A[q], A[q + 1], A[q + 2], X[py * W + px]] = [...c, 1];\n    }\n  }\n}\n\n// Coverage of a bee's body at (u along, v across) in body lengths of\n// about five LEDs; PART says which piece.\nlet PART = 0;\nfunction shape(u, v, s, dip, bl) {\n  let c = clamp((1 - len((u + 1.3) / 1.5, v / (1.12 + bl))) * 1.2 * s + 0.5, 0, 1);\n  PART = 3;\n  if (!dip || u \u003c 0.3) {\n    const k = clamp((1 - len((u - 0.5) / 0.8, v)) * 0.9 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 2];\n  }\n  if (!dip) {\n    const k = clamp((1 - len((u - 1.65) / 0.6, v / 0.75)) * 0.7 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 1];\n  }\n  return c;\n}\n\nconst knee = (c) => (c \u003c 190 ? c : 190 + 65 * (1 - exp(-(c - 190) / 65)));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { A, X, base, expo, amb, sun, pool, jit } = S;\n  A.set(base);\n  X.set(expo);\n  for (const b of S.bees) if (b.m !== DANCE) bee(S, b);\n  for (const b of S.bees) if (b.m === DANCE) bee(S, b);\n  // The curtain closes on the sun first; the room light goes from daylight\n  // to a warm lamp over the hive by 0.5, and from that to the red lamp.\n  const L = S.light;\n  const [w, rd, pw] = [sm(0, 0.5, L), sm(0.5, 1, L), sm(0.15, 0.6, L)];\n  const dc = [0, 1, 2].map((c) => (DAYC[c] + (WARM[c] - DAYC[c]) * w + (REDC[c] - WARM[c]) * rd) * (1 - 0.1 * w - 0.1 * rd) * 255);\n  const sk = 0.9 * S.cloud * (1 - sm(0, 0.4, L)) * 255;\n  const o = [0, 0, 0];\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const a = amb[p] + (pool[p] - amb[p]) * pw;\n    const s = sun[p] * X[p] * sk;\n    for (let c = 0; c \u003c 3; c++) o[c] = knee(A[q + c] * (a * dc[c] + s * SUNC[c]) * jit[q + c]) | 0;\n    display.setPixel(p % W, (p / W) | 0, o[0], o[1], o[2]);\n  }\n}\n","layer":{"id":"layer-waggle-dance","type":"code","name":"waggle-dance","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Waggle Dance\n// Family:  insect\n// Idea:    Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after Karl von Frisch's reading of the honeybee's waggle dance\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1\n//\n// Knob 1: Light. Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see.\n// Knob 2: Speed. At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower.\n// Knob 3: Bees. Eighty to 240; turned up, more walk in from the sides until they hide the comb.\n// Knob 4: Sun. The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass.\n// Buttons: K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Cells six LEDs across the flats, rows five apart (a hexagon squashed by\n// four in a hundred, so every cell is drawn alike); the frame's top bar,\n// its bottom bar and the entrance slot in it.\nconst [CW, RH, TOP, BOT, NC, NR, ENX] = [6, 5, 5, 123, 13, 27, 9];\nconst Y0 = TOP + 2.5;\nconst [EMPTY, HONEY, NECTAR, POLLEN, BROOD, LARVA, EGG] = [0, 1, 2, 3, 4, 5, 6];\nconst [CRAWL, REST, DIP, FOLLOW, DANCE, HOME, EXIT] = [0, 1, 2, 3, 4, 5, 6];\n// Pollen: orange, yellow, ochre, rust, purple-grey, buff, olive, red-orange.\nconst POLLENS = [[0.95, 0.52, 0.08], [0.95, 0.8, 0.16], [0.74, 0.54, 0.17], [0.6, 0.25, 0.1],\n  [0.44, 0.37, 0.5], [0.86, 0.68, 0.36], [0.55, 0.58, 0.24], [0.9, 0.4, 0.12]];\n// Bees: a dark race, the usual, a golden one. Thorax, then the amber bands.\nconst THX = [[0.5, 0.37, 0.2], [0.78, 0.56, 0.24], [0.9, 0.68, 0.3]];\nconst AMB = [[0.62, 0.44, 0.18], [1, 0.72, 0.2], [1, 0.84, 0.32]];\nconst [DARK, HEAD, WING] = [[0.3, 0.18, 0.08], [0.14, 0.1, 0.06], [0.8, 0.84, 0.9]];\nconst [SUNC, DAYC, WARM, REDC] = [[1, 0.84, 0.56], [1, 0.94, 0.82], [1, 0.66, 0.34], [1, 0.09, 0.035]];\n// Where the flowers lie, against the main field, and how often foragers come from each.\nconst FIELDS = [0, 0, 0.95, -1.9];\n\nconst { min, max, sin, cos, abs, sqrt, floor, round, exp, atan2, PI } = Math;\nconst len = (a, b) => sqrt(a * a + b * b);\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst wrap = (a) => a - 2 * PI * round(a / (2 * PI));\nconst rnd = () => Math.random();\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Distance from a cell's centre in its own hexagon, 3 on the wall.\nconst hexd = (dx, dy) => max(abs(dx), abs(0.5 * dx + 0.9 * dy), abs(0.5 * dx - 0.9 * dy));\nconst cellX = (r, c) => CW * (c - 1) + (r & 1 ? 3.5 : 0.5);\nconst cellY = (r) => Y0 + (r - 1) * RH;\nconst cap = (t) => t === BROOD || t === HONEY;\n\n// Which cell each LED sits in, and where in it.\nfunction grid(S) {\n  for (let y = TOP; y \u003c BOT; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r0 = round((y + 0.5 - Y0) / RH) + 1;\n      let [best, next] = [99, 99];\n      const p = y * W + x;\n      for (let r = max(0, r0 - 1); r \u003c= min(NR - 1, r0 + 1); r++) {\n        const off = r & 1 ? 3.5 : 0.5;\n        const c0 = round((x + 0.5 - off) / CW) + 1;\n        for (let c = max(0, c0 - 1); c \u003c= min(NC - 1, c0 + 1); c++) {\n          const dx = x + 0.5 - cellX(r, c);\n          const dy = y + 0.5 - cellY(r);\n          const d = hexd(dx, dy);\n          if (d \u003c best) {\n            next = best;\n            S.cid2[p] = S.cid[p];\n            best = d;\n            S.cid[p] = r * NC + c;\n            [S.hd[p], S.dx[p], S.dy[p]] = [d, dx, dy];\n          } else if (d \u003c next) {\n            next = d;\n            S.cid2[p] = r * NC + c;\n          }\n        }\n      }\n    }\n}\n\n// Honey over the top and down the corners, a band of pollen, brood below.\nfunction layout(S) {\n  for (let r = 0; r \u003c NR; r++)\n    for (let c = 0; c \u003c NC; c++) {\n      const i = r * NC + c;\n      const [x, y] = [cellX(r, c), cellY(r)];\n      const e = len((x - 32) / 33, (y - 70) / 28) + 0.05 * (sin(x * 0.21 + y * 0.13) + sin(y * 0.29 - x * 0.17 + 2));\n      const u = rnd();\n      let t;\n      if (y \u003c 24 || (e > 1.28 && y \u003c 64)) t = u \u003c 0.82 ? HONEY : u \u003c 0.95 ? NECTAR : EMPTY;\n      else if (e > 1 && y \u003c 72) t = u \u003c 0.62 ? POLLEN : u \u003c 0.78 ? NECTAR : EMPTY;\n      else if (e \u003c 0.72) t = u \u003c 0.68 ? BROOD : u \u003c 0.78 ? LARVA : u \u003c 0.81 ? EGG : EMPTY;\n      else if (e \u003c 1) t = u \u003c 0.34 ? LARVA : u \u003c 0.48 ? EGG : u \u003c 0.64 ? BROOD : u \u003c 0.68 ? POLLEN : EMPTY;\n      else t = u \u003c 0.12 ? POLLEN : u \u003c 0.27 ? NECTAR : EMPTY;\n      [S.type[i], S.age[i], S.tint[i], S.gap[i], S.pol[i]] = [t, rnd(), rnd(), rnd() * 6.283, floor(rnd() * 8)];\n    }\n}\n\n// Each LED's colour as it would be in white light, and how much of the\n// sun reaches it: cell bottoms stay in shadow.\nfunction paint(S) {\n  const { base, expo } = S;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    let r, g, b;\n    let ex = 1;\n    let dim = 0.66;\n    if (y \u003c TOP || y >= BOT) {\n      // Pine, the grain running along the bar, a groove where it meets the comb.\n      const gr = 0.8 + 0.2 * sin(x * 0.23 + 2 * sin(x * 0.07 + y * 1.3));\n      const edge = y === TOP - 1 || y === BOT ? 0.55 : 1;\n      const k = gr * edge * (0.9 + 0.1 * hash(p, 5));\n      [r, g, b] = [0.6 * k, 0.42 * k, 0.24 * k];\n      if (y > BOT + 1 && y \u003c H - 1 && abs(x + 0.5 - ENX) \u003c 5) [r, g, b] = [0.02, 0.015, 0.01];\n    } else {\n      const [i, d, dx, dy] = [S.cid[p], S.hd[p], S.dx[p], S.dy[p]];\n      const [t, tn, rr, lit] = [S.type[i], S.tint[i], len(dx, dy), -(dx + dy) / 3];\n      if (t === HONEY) {\n        dim = 1;\n        const k = (1 - 0.12 * (d / 2.6) ** 2 + 0.06 * lit) * (0.95 + 0.06 * hash(p, 1));\n        [r, g, b] = [(1 - 0.04 * tn) * k, (0.88 - 0.16 * tn) * k, (0.6 - 0.26 * tn) * k];\n      } else if (t === NECTAR) {\n        // Nectar: dark amber down in the cell, a bright meniscus round it, and a glint.\n        const f = (0.08 + 0.92 * sm(1.5, 2.4, d)) * (0.75 + 0.3 * tn);\n        [r, g, b] = [0.07 + 0.62 * f, 0.03 + 0.36 * f, 0.006 + 0.06 * f];\n        if (abs(dx + 1) \u003c 0.6 && abs(dy + 1) \u003c 0.7) [r, g, b] = [0.95, 0.9, 0.74];\n        ex = 0.6;\n      } else if (t === POLLEN) {\n        const c = POLLENS[S.pol[i]];\n        dim = 0.8;\n        // Packed down in the cell, its inside wall in shadow round it.\n        const k = (0.8 + 0.25 * tn) * (1 - 0.85 * sm(1.5, 2.3, d));\n        [r, g, b] = c.map((v, n) => v * k * (0.82 + 0.3 * hash(p, 2 + n)));\n        ex = 0.8;\n      } else if (t === BROOD) {\n        const k = (1 - 0.32 * (rr / 2.7) ** 2 + 0.1 * lit) * (hash(p, 6) \u003c 0.14 ? 0.78 : 1) * (0.9 + 0.15 * tn);\n        [r, g, b] = [0.8 * k, 0.68 * k, 0.5 * k];\n      } else {\n        // An open cell: dark at the bottom, its lower inside wall catching the light.\n        const lip = sm(1.6, 2.4, d) * (dy > 0.5 ? 1 : 0.3);\n        const k = (0.04 + 0.1 * lip) * (0.75 + 0.5 * tn);\n        [r, g, b] = [k, k * 0.68, k * 0.38];\n        ex = 0.2 + 0.8 * lip;\n        if (t === LARVA) {\n          // The larva curled in a C on its bed of jelly, bigger as it grows.\n          const a = S.age[i];\n          const [R, th] = [0.4 + 1.1 * a, 0.45 + 0.55 * a];\n          const ang = wrap(atan2(dy, dx) - S.gap[i]);\n          let on = a \u003c 0.3 ? sm(1.2, 0.5, rr) : sm(th + 0.3, th - 0.3, abs(rr - R)) * sm(0.5, 1, abs(ang));\n          if (rr \u003c 1.9) [r, g, b] = [r + 0.18, g + 0.17, b + 0.14];\n          const sh = 0.82 + 0.18 * clamp(lit + 0.5, 0, 1) + 0.05 * sin(ang * 5);\n          r += (0.97 * sh - r) * on;\n          g += (0.94 * sh - g) * on;\n          b += (0.85 * sh - b) * on;\n          ex += (0.9 - ex) * on;\n        } else if (t === EGG && rr \u003c 0.7) [r, g, b] = [0.86, 0.85, 0.78];\n      }\n      // The walls: pale wax round the honey, the rims of open cells lit,\n      // and a dark seam where two brood caps meet.\n      const w = sm(2.4, 2.6, d);\n      if (w > 0) {\n        const t2 = S.type[S.cid2[p]];\n        const pale = t === HONEY || t === NECTAR ? 1 : 0;\n        const seam = (t === BROOD || t2 === BROOD) && cap(t) && cap(t2) ? 0.15 : 1;\n        // Light from above rakes the slanted walls; the upright ones stand side on to it.\n        const k = (0.85 + 0.3 * hash(p, 8)) * seam * (!pale && abs(dx) > 2.6 ? 0.45 : 1);\n        r += ((0.34 + 0.18 * pale) * k - r) * w;\n        g += ((0.24 + 0.15 * pale) * k - g) * w;\n        b += ((0.11 + 0.08 * pale) * k - b) * w;\n        ex += ((seam \u003c 1 ? 0.15 : 1) - ex) * w;\n      }\n    }\n    // The comb sits back in the hive's shade; the bees on it catch the light.\n    base[q] = r * dim;\n    base[q + 1] = g * dim;\n    base[q + 2] = b * dim;\n    expo[p] = ex;\n  }\n}\n\n// The window throws its four panes of sun on the glass; they slide and lean with the sun.\nfunction sunPatch(S, s) {\n  const [cx, cy, sh] = [32 + 22 * s, 74 - 6 * abs(s), -0.5 * s];\n  for (let p = 0; p \u003c N; p++) {\n    const v = ((p / W) | 0) + 0.5 - cy;\n    const u = (p % W) + 0.5 - cx - sh * v;\n    let m = sm(22, 16, abs(u)) * sm(40, 33, abs(v));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(u));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(v + 5));\n    S.sun[p] = m;\n  }\n  S.sunK = s;\n}\n\nfunction newBee(S, x, y, h) {\n  const u = rnd();\n  const b = { x, y, h, m: CRAWL, t: rnd() * 3, v: 2.6 + 2.6 * rnd(), s: 1.12 + 0.14 * rnd(), tone: u \u003c 0.18 ? 0 : u \u003c 0.82 ? 1 : 2, ph: rnd() * 6.28, w: 0, wag: 0, wp: 0 };\n  S.bees.push(b);\n  return b;\n}\n\n// A bee to the dance floor on the lower comb, clear of the other dances.\nfunction spot(S) {\n  let best = [32, 104];\n  let far = -1;\n  for (let k = 0; k \u003c 24; k++) {\n    const x = 12 + 40 * rnd();\n    const y = 80 + 33 * rnd();\n    // The lower the better, near the entrance, but well clear of the others.\n    const d = min(24, ...S.dances.map((D) => len(D.cx - x, D.cy - y))) + 0.1 * y;\n    if (d > far) [far, best] = [d, [x, y]];\n  }\n  return best;\n}\n\nfunction newDance(S, b, vig) {\n  const [cx, cy] = spot(S);\n  // A forager from a rich patch runs longer, keeps at it and draws more followers.\n  const D = { b, cx, cy, fl: FIELDS[floor(rnd() * 4)] + 0.12 * (rnd() - 0.5), L: vig ? 11 : 8 + 2.5 * rnd(), tw: vig ? 1.25 : 0.85 + 0.3 * rnd(),\n    tr: vig ? 0.9 : 1 + 0.3 * rnd(), tau: 0, side: rnd() \u003c 0.5 ? -1 : 1, n: vig ? 26 : 9 + floor(10 * rnd()), amp: vig ? 1 : 0.65 + 0.2 * rnd(),\n    want: vig ? 10 : 6 + floor(3 * rnd()), on: false, foll: [], rec: 0, pc: floor(rnd() * 3) };\n  D.th = D.fl - S.sunA;\n  b.D = D;\n  S.dances.push(D);\n  return D;\n}\n\n// The bees nearest the dance turn and gather round it.\nfunction recruit(S, D, snap) {\n  const free = S.bees.filter((b) => (b.m === CRAWL || b.m === REST) && len(b.x - D.cx, b.y - D.cy) \u003c 24);\n  free.sort((a, b) => len(a.x - D.cx, a.y - D.cy) - len(b.x - D.cx, b.y - D.cy));\n  for (const b of free) {\n    if (D.foll.length >= D.want) break;\n    Object.assign(b, { m: FOLLOW, D, a: atan2(b.x - D.cx, -(b.y - D.cy)), t: 5 + 10 * rnd() });\n    D.foll.push(b);\n    if (snap) {\n      const R = D.L / 2 + 3.4;\n      b.x = D.cx + R * sin(b.a);\n      b.y = D.cy - R * cos(b.a);\n      b.h = b.a + PI;\n    }\n  }\n}\n\nfunction seek(b, tx, ty, sp, dt) {\n  const [dx, dy] = [tx - b.x, ty - b.y];\n  const r = len(dx, dy);\n  if (r > 0.25) {\n    const want = atan2(dx, -dy);\n    const e = wrap(want - b.h);\n    b.h += clamp(e, -5 * dt, 5 * dt);\n    const st = min(r, sp * dt) * max(0.15, cos(e));\n    b.x += sin(b.h) * st;\n    b.y -= cos(b.h) * st;\n  }\n  return r;\n}\n\nfunction stepDance(S, D, dt) {\n  const b = D.b;\n  D.th += clamp(wrap(D.fl - S.sunA - D.th), -1.5 * dt, 1.5 * dt);\n  const [ux, uy] = [sin(D.th), -cos(D.th)];\n  if (!D.on) {\n    // The forager hurries up from the entrance to where she will dance.\n    b.m = HOME;\n    if (seek(b, D.cx - (ux * D.L) / 2, D.cy - (uy * D.L) / 2, D.n > 20 ? 13 : 9, dt) \u003c 1.2) {\n      D.on = true;\n      b.m = DANCE;\n      recruit(S, D, false);\n    }\n    return;\n  }\n  D.tau += dt;\n  if (D.tau >= D.tw + D.tr) {\n    D.tau -= D.tw + D.tr;\n    D.side = -D.side;\n    if (--D.n \u003c= 0) {\n      // Done: she goes back out, and some of her followers go after the flowers.\n      [D.gone, b.m, b.wag] = [true, EXIT, 0];\n      for (const f of D.foll) [f.m, f.t] = [rnd() \u003c 0.4 ? EXIT : CRAWL, 1 + 2 * rnd()];\n      return;\n    }\n  }\n  let want;\n  if (D.tau \u003c D.tw) {\n    const f = D.tau / D.tw - 0.5;\n    b.x = D.cx + ux * D.L * f;\n    b.y = D.cy + uy * D.L * f;\n    want = D.th;\n    b.wag = D.amp;\n    b.wp += dt * 2 * PI * 13;\n  } else {\n    const s = (D.tau - D.tw) / D.tr;\n    const ps = D.side * PI * s;\n    const [rx, ry] = [ux * cos(ps) - uy * sin(ps), ux * sin(ps) + uy * cos(ps)];\n    b.x = D.cx + (rx * D.L) / 2;\n    b.y = D.cy + (ry * D.L) / 2;\n    want = atan2(-D.side * ry, -D.side * rx);\n    b.wag = 0;\n  }\n  b.h += clamp(wrap(want - b.h), -14 * dt, 14 * dt);\n  // Followers keep their place round her, turned to face her, and drift with her.\n  D.foll = D.foll.filter((f) => f.m === FOLLOW && f.D === D);\n  D.rec -= dt;\n  if (D.rec \u003c= 0) {\n    D.rec = 1.5;\n    if (D.foll.length \u003c D.want) recruit(S, D, false);\n  }\n  const da = atan2(b.x - D.cx, -(b.y - D.cy));\n  for (const f of D.foll) {\n    f.a += dt * 0.35 * sin(wrap(da - f.a));\n    const R = D.L / 2 + 3.4 + 0.4 * sin(S.t * 2 + f.ph);\n    if (seek(f, D.cx + R * sin(f.a), D.cy - R * cos(f.a), 6, dt) \u003c 1.2) f.h += clamp(wrap(atan2(b.x - f.x, -(b.y - f.y)) - f.h), -6 * dt, 6 * dt);\n    if ((f.t -= dt) \u003c= 0) [f.m, f.t, f.h] = [CRAWL, 1 + 2 * rnd(), f.h + PI];\n  }\n}\n\nfunction crawl(S, b, dt) {\n  b.w += (rnd() - 0.5) * 10 * sqrt(dt);\n  b.w *= 1 - min(1, 1.5 * dt);\n  let want = null;\n  const ex = b.x \u003c 4 ? 1 : b.x > W - 4 ? -1 : 0;\n  const ey = b.y \u003c TOP + 4 ? 1 : b.y > BOT - 4 ? -1 : 0;\n  if (ex || ey) want = atan2(ex, -ey);\n  b.h += b.w * dt;\n  if (want !== null) b.h += clamp(wrap(want - b.h), -3 * dt, 3 * dt);\n  const st = b.v * dt;\n  b.x += sin(b.h) * st;\n  b.y -= cos(b.h) * st;\n}\n\nfunction step(S, dt) {\n  const { bees } = S;\n  for (const b of bees) {\n    const m = b.m;\n    if (m === DANCE || m === HOME || m === FOLLOW) continue;\n    if (m === EXIT) {\n      if (seek(b, ENX, BOT + 1.5, 7, dt) \u003c 1.5) b.out = true;\n      continue;\n    }\n    // Others give the dancer and her followers room.\n    for (const D of S.dances) {\n      const [dx, dy] = [b.x - D.cx, b.y - D.cy];\n      const r = len(dx, dy);\n      if (D.on && r \u003c D.L / 2 + 9) {\n        if (m !== CRAWL) b.t = 0;\n        b.x += (dx / (r + 0.01)) * 4 * dt;\n        b.y += (dy / (r + 0.01)) * 4 * dt;\n        b.h += clamp(wrap(atan2(dx, -dy) - b.h), -4 * dt, 4 * dt);\n      }\n    }\n    if (m === CRAWL) crawl(S, b, dt);\n    else if (m === REST) b.h += sin(S.t * 6 + b.ph) * 0.5 * dt;\n    if ((b.t -= dt) > 0) continue;\n    // Backing out of a cell, she turns away.\n    if (m === DIP) [b.x, b.y, b.h] = [b.x - sin(b.h) * 1.5, b.y + cos(b.h) * 1.5, b.h + PI * (0.6 + 0.8 * rnd())];\n    const u = rnd();\n    b.m = CRAWL;\n    b.t = 1 + 3 * rnd();\n    if (u \u003c 0.28) [b.m, b.t] = [REST, 0.8 + 2.5 * rnd()];\n    else if (u \u003c 0.5 && m !== DIP) {\n      // Head first into a cell: to feed a larva, take nectar or pack pollen.\n      const hx = round(b.x + sin(b.h) * 2.2 - 0.5);\n      const hy = round(b.y - cos(b.h) * 2.2 - 0.5);\n      if (hx >= 0 && hx \u003c W && hy >= TOP + 2 && hy \u003c BOT - 2) {\n        const i = S.cid[hy * W + hx];\n        const t = S.type[i];\n        if (t !== HONEY && t !== BROOD) {\n          const r = floor(i / NC);\n          [b.m, b.t] = [DIP, 2 + 4 * rnd()];\n          b.x = cellX(r, i % NC) - sin(b.h) * 1.5;\n          b.y = cellY(r) + cos(b.h) * 1.5;\n        }\n      }\n    }\n  }\n  for (const D of S.dances) stepDance(S, D, dt);\n  S.dances = S.dances.filter((D) => !D.gone);\n  for (const b of bees) if (b.D && (b.D.gone || (b.m !== FOLLOW && b.m !== DANCE && b.m !== HOME))) b.D = null;\n  // Bees shoulder each other apart; those still at a cell or dancing stand firm.\n  for (const a of bees) {\n    if (a.m === REST || a.m === DIP || a.m === DANCE) continue;\n    for (const b of bees) {\n      const dx = a.x - b.x;\n      const dy = a.y - b.y;\n      if (abs(dx) > 3.6 || abs(dy) > 3.6 || b === a) continue;\n      const r = len(dx, dy);\n      if (r \u003c 3.6 && r > 0.01) {\n        a.x += (dx / r) * (3.6 - r) * 0.25;\n        a.y += (dy / r) * (3.6 - r) * 0.25;\n      }\n    }\n  }\n  S.bees = bees.filter((b) => !b.out);\n}\n\nexport function setup(params) {\n  const S = { t: 0, started: false, sunA: 0, sunK: 9, next: 6, add: 0, c0: 4.2, c1: 8.5, cd: 0.55, bees: [], dances: [] };\n  for (const k of [\"cid\", \"cid2\"]) S[k] = new Int16Array(N);\n  for (const k of [\"hd\", \"dx\", \"dy\", \"expo\", \"X\", \"amb\", \"pool\", \"sun\"]) S[k] = new Float32Array(N);\n  for (const k of [\"base\", \"A\", \"jit\"]) S[k] = new Float32Array(N * 3);\n  for (const k of [\"age\", \"tint\", \"gap\"]) S[k] = new Float32Array(NR * NC);\n  for (const k of [\"type\", \"pol\"]) S[k] = new Uint8Array(NR * NC);\n  grid(S);\n  layout(S);\n  paint(S);\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p % W, (p / W) | 0];\n    S.amb[p] = 0.74 + 0.2 * (1 - y / H) + 0.03 * sin(x * 0.11 + y * 0.05) - 0.12 * ((x - 31.5) / 32) ** 4;\n    S.pool[p] = 0.42 + 0.6 * exp(-((x - 40) ** 2 + (y - 74) ** 2) / 3000);\n    const j = 0.94 + 0.12 * hash(p, 19);\n    for (let c = 0; c \u003c 3; c++) S.jit[p * 3 + c] = j * (0.97 + 0.06 * hash(p, 20 + c));\n  }\n  params.s = S;\n}\n\nfunction start(S, n) {\n  // Bees thickest on the brood, two dances already going.\n  for (let k = 0; k \u003c n; k++) {\n    let x, y;\n    for (let j = 0; j \u003c 4; j++) {\n      x = 2 + 60 * rnd();\n      y = TOP + 3 + (BOT - TOP - 6) * rnd();\n      if (rnd() \u003c 0.35 + 0.65 * sm(30, 70, y)) break;\n    }\n    newBee(S, x, y, rnd() * 6.28);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const b = newBee(S, 0, 0, 0);\n    const D = newDance(S, b, false);\n    Object.assign(D, { fl: k ? 0.08 : -0.1, cx: k ? 20 : 43, cy: k ? 111 : 102, on: true, tau: rnd() * (D.tw + D.tr), rec: 1.5 });\n    D.th = D.fl - S.sunA;\n    b.m = DANCE;\n    stepDance(S, D, 0);\n    b.h = D.tau \u003c D.tw ? D.th : b.h;\n    recruit(S, D, true);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.light = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  const want = round(clamp(k[2], 80, 240));\n  const sk = clamp(k[3], -1, 1);\n  S.sunA = sk * PI;\n  if (abs(sk - S.sunK) > 0.002) sunPatch(S, sk);\n  if (!S.started) {\n    S.started = true;\n    start(S, want);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  // Clouds cross the sun now and then; the first one early.\n  if (S.t > S.c1 + 1.5) {\n    S.c0 = S.t + 8 + 20 * rnd();\n    S.c1 = S.c0 + 3 + 6 * rnd();\n    S.cd = 0.4 + 0.5 * rnd();\n  }\n  S.cloud = 1 - S.cd * sm(S.c0, S.c0 + 1.5, S.t) * sm(S.c1 + 1.5, S.c1, S.t);\n  const vig = input.btnPressed && input.btnPressed[0];\n  if ((S.next -= d) \u003c= 0 || vig) {\n    if (S.dances.length \u003c (vig ? 4 : 3)) {\n      const b = newBee(S, ENX + 4 * (rnd() - 0.5), BOT + 1, 0);\n      b.m = HOME;\n      newDance(S, b, vig);\n    }\n    if (!vig) S.next = 5 + 8 * rnd();\n  }\n  // Bees walk in from the sides, or go out at the entrance, to match the knob.\n  let ord = 0;\n  for (const b of S.bees) if (b.m \u003c= FOLLOW) ord++;\n  if ((S.add -= dt) \u003c= 0) {\n    S.add = 0.1;\n    if (ord \u003c want) {\n      const l = rnd() \u003c 0.5;\n      newBee(S, l ? -3 : W + 3, TOP + 8 + (BOT - TOP - 16) * rnd(), l ? PI / 2 : -PI / 2).t = 1.5;\n    } else if (ord > want + 2) {\n      const b = S.bees.find((b) => b.m === CRAWL);\n      if (b) b.m = EXIT;\n    }\n  }\n  step(S, d);\n}\n\n// One bee into the albedo: her body worked out on a 12 x 12 patch first,\n// then her shadow a step down and right, head, thorax, banded abdomen, wings.\nconst PC = new Float32Array(144);\nconst PP = new Uint8Array(144);\nfunction bee(S, b) {\n  const { A, X } = S;\n  const [s, fx, fy, dip, wg] = [b.s, sin(b.h), -cos(b.h), b.m === DIP, b.wag > 0];\n  const wag = wg ? b.wag * sin(b.wp) : b.m === REST ? 0.15 * sin(S.t * 9 + b.ph) : 0;\n  const [bl, th, am] = [wg ? 0.4 : 0, THX[b.tone], AMB[b.tone]];\n  const shim = 0.24 + 0.14 * sin(S.t * 2.3 + b.ph + b.x * 0.3);\n  // A box round her, the whole patch for a dancer and her blur.\n  const ax = wg ? 5 : s * (3.2 * abs(fx) + 1.9 * abs(fy)) + 0.5;\n  const ay = wg ? 5 : s * (3.2 * abs(fy) + 1.9 * abs(fx)) + 0.5;\n  const [x0, y0] = [floor(b.x - ax), floor(b.y - ay)];\n  const nw = min(12, floor(b.x + ax) - x0 + 2);\n  const nh = min(12, floor(b.y + ay) - y0 + 2);\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const X0 = x0 + i + 0.5 - b.x;\n      const Y0 = y0 + j + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      PC[k] = shape(u, v, s, dip, bl);\n      PP[k] = PART;\n    }\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      const c = PC[k];\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      const q = p * 3;\n      const sh = i && j ? PC[k - nw - 1] : 0;\n      if (sh > 0) {\n        const f = 1 - 0.7 * sh * (1 - c);\n        A[q] *= f;\n        A[q + 1] *= f;\n        A[q + 2] *= f;\n      }\n      const X0 = px + 0.5 - b.x;\n      const Y0 = py + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      // A waggling dancer buzzes her wings into a pale blur round her.\n      let wa = wg ? 0.55 * clamp(1.6 - len((u + 0.7) / 1.5, v / 1.7), 0, 1) : 0;\n      if (c \u003c= 0 && wa \u003c= 0) continue;\n      const pt = PP[k];\n      const col = pt === 1 ? HEAD : pt === 2 ? th : null;\n      const st = u > -0.85 ? 1 : u > -1.35 ? 0 : u > -1.9 ? 0.8 : 0;\n      if (u > -2.2 && u \u003c 0.3 && abs(v) > 0.35 && abs(v) \u003c 1.15) wa = max(wa, shim);\n      const a = max(c, wa);\n      for (let n = 0; n \u003c 3; n++) {\n        let e = col ? col[n] : DARK[n] + (am[n] - DARK[n]) * st;\n        e += (WING[n] - e) * wa;\n        A[q + n] += (e - A[q + n]) * a;\n      }\n      X[p] += (1 - X[p]) * a;\n    }\n  // A forager home from the field carries her pollen loads on her hind legs.\n  if (b.D && (b.m === DANCE || b.m === HOME)) {\n    const c = POLLENS[b.D.pc];\n    for (const sd of [-1, 1]) {\n      const px = round(b.x + s * (-0.7 * fx - sd * 1.25 * fy) - 0.5);\n      const py = round(b.y + s * (-0.7 * fy + sd * 1.25 * fx) - 0.5);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      [A[q], A[q + 1], A[q + 2], X[py * W + px]] = [...c, 1];\n    }\n  }\n}\n\n// Coverage of a bee's body at (u along, v across) in body lengths of\n// about five LEDs; PART says which piece.\nlet PART = 0;\nfunction shape(u, v, s, dip, bl) {\n  let c = clamp((1 - len((u + 1.3) / 1.5, v / (1.12 + bl))) * 1.2 * s + 0.5, 0, 1);\n  PART = 3;\n  if (!dip || u \u003c 0.3) {\n    const k = clamp((1 - len((u - 0.5) / 0.8, v)) * 0.9 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 2];\n  }\n  if (!dip) {\n    const k = clamp((1 - len((u - 1.65) / 0.6, v / 0.75)) * 0.7 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 1];\n  }\n  return c;\n}\n\nconst knee = (c) => (c \u003c 190 ? c : 190 + 65 * (1 - exp(-(c - 190) / 65)));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { A, X, base, expo, amb, sun, pool, jit } = S;\n  A.set(base);\n  X.set(expo);\n  for (const b of S.bees) if (b.m !== DANCE) bee(S, b);\n  for (const b of S.bees) if (b.m === DANCE) bee(S, b);\n  // The curtain closes on the sun first; the room light goes from daylight\n  // to a warm lamp over the hive by 0.5, and from that to the red lamp.\n  const L = S.light;\n  const [w, rd, pw] = [sm(0, 0.5, L), sm(0.5, 1, L), sm(0.15, 0.6, L)];\n  const dc = [0, 1, 2].map((c) => (DAYC[c] + (WARM[c] - DAYC[c]) * w + (REDC[c] - WARM[c]) * rd) * (1 - 0.1 * w - 0.1 * rd) * 255);\n  const sk = 0.9 * S.cloud * (1 - sm(0, 0.4, L)) * 255;\n  const o = [0, 0, 0];\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const a = amb[p] + (pool[p] - amb[p]) * pw;\n    const s = sun[p] * X[p] * sk;\n    for (let c = 0; c \u003c 3; c++) o[c] = knee(A[q + c] * (a * dc[c] + s * SUNC[c]) * jit[q + c]) | 0;\n    display.setPixel(p % W, (p / W) | 0, o[0], o[1], o[2]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower."},{"name":"Bees","min":80,"max":240,"about":"Eighty to 240; turned up, more walk in from the sides until they hide the comb."},{"name":"Sun","min":-1,"max":1,"about":"The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass."}],"start":[0,2,80,0.06],"measures":{"motion":0.2561,"detail":0.1412,"edges":0.4465,"complexity":2.5302,"coverage":0.7323,"colour":0.2225,"drift":0.0504},"knobResponse":[0.1684,0.0666,0.1239,0.0576]},{"slug":"warp","title":"Warp","family":"space","round":15,"note":"별 사이를 워프로 날아요. 별은 앞쪽에서 얼음빛 파랑이고, 옆으로 지나가며 자홍 줄로 늘어나요. K1 을 누르면 워프에서 빠져 멈췄다가 흰 빛과 함께 다시 들어가요.","idea":"A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.","buttons":"K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.","code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","layer":{"id":"layer-warp","type":"code","name":"warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel."},{"name":"Warp","min":0.2,"max":4,"about":"How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel."},{"name":"Stars","min":420,"max":1400,"about":"How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard."},{"name":"Steer","min":-1,"max":1,"about":"The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn."}],"start":[0,2,420,0.06],"measures":{"motion":2.077,"detail":0.0623,"edges":0.3496,"complexity":0.991,"coverage":0.2025,"colour":0.1354,"drift":0.0642},"knobResponse":[0.0455,0.0994,0.1476,0.0712]},{"slug":"waterfall","title":"Waterfall","family":"weather","round":14,"note":"강이 벼랑 끝을 넘어 패널 높이를 다 떨어져 소에 닿아요. 벼랑 끝에서 청록 유리 같던 물은 떨어지며 하얘지고, 소에서 오르는 안개에 무지개 한 토막이 서요. K3 바람을 끝까지 돌리면 돌풍이 물줄기를 찢어 물보라로 날려 올리고, K1 을 누르면 통나무 하나가 벼랑 끝을 넘어와요.","idea":"A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.","buttons":"K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.","code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","layer":{"id":"layer-waterfall","type":"code","name":"waterfall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly."},{"name":"Spate","min":0,"max":1,"about":"How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match."}],"start":[0,2,0,0.06],"measures":{"motion":0.6549,"detail":0.0595,"edges":0.3161,"complexity":1.514,"coverage":0.9639,"colour":0.146,"drift":0.0724},"knobResponse":[0.0442,0.112,0.1828,0.287]},{"slug":"weaver","title":"Weaver","family":"bird","round":22,"note":"강 위로 뻗은 아카시아 가지 끝에서 수컷 마을베짜기새가 둥지를 지어요. 갈대 잎을 찢어 문 초록 띠를 벽에 꿰어 당기면 둥지가 고리에서 둥근 방으로, 다시 아래로 열린 입구로 한 가닥씩 자라고, 묵은 띠는 짚 색으로 바래요. K1 을 누르면 암컷이 날아와 둥지를 살피고, 다 지은 둥지가 퇴짜를 맞으면 수컷이 끊어 강에 떨어뜨리고 새 고리부터 다시 지어요.","idea":"A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.","buttons":"K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.","code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","layer":{"id":"layer-weaver","type":"code","name":"weaver","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plumage","min":0,"max":2,"about":"A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in."},{"name":"Nests","min":3,"max":9,"about":"Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance."},{"name":"Sky","min":0,"max":1,"about":"Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left."}],"start":[0,2,3,0.06],"measures":{"motion":0.1278,"detail":0.0716,"edges":0.3689,"complexity":2.2916,"coverage":0.9985,"colour":0.2367,"drift":0.0436},"knobResponse":[0.0466,0.0543,0.0568,0.2018]},{"slug":"whipped-soap","title":"Whipped Soap","family":"cosmetic","round":36,"note":"보이지 않는 별 깍지가 휘핑 바디 솝을 한 송이씩 짜는데, 한 바퀴가 앞 바퀴에 반쯤 얹히며 뾰족하게 솟아요. 쟁반이 두 칸 네 줄로 차면 긁개가 거품을 말아 아래로 밀어 내요. K3 은 깍지의 별 꼭짓점 수라서 굵은 골 두세 줄이 가는 골 네다섯 줄로 바뀌고, K1 을 누르면 쟁반을 바로 밀어요.","idea":"An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.","buttons":"K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.","code":"// ===== Patternflow pattern =====\n// Title:   Whipped Soap\n// Family:  cosmetic\n// Idea:    An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after whipped body soap piped into rosettes in handmade soap shops\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1\n//\n// Knob 1: Hue. Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Ridges. The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together.\n// Knob 4: Swirl. How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high.\n// Buttons: K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, ceil, min, max, sqrt, sin, cos, tan, atan2, abs, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The tray: two rosettes across and four down, each in a square 32 LEDs on a side.\nconst COLS = 2, ROWS = 4, NR = COLS * ROWS, CWD = W / COLS, CHT = H / ROWS;\n// The nozzle's path starts R0 LEDs from the rosette's centre; the bead it\n// lays is RB LEDs in radius across and stands SQ times that tall.\nconst R0 = 10, RB = 4.6, SQ = 1.2;\n// How deep the star's notches cut into the bead, and how far the star turns\n// round the bead for each LED the nozzle travels.\nconst NOTCH = 0.45, TWIST = 0.11;\n// The nozzle runs VN LEDs a second at Speed 2.\nconst VN = 30;\n// A turn lands on the foam laid at least LAG LEDs of path earlier: the\n// bead never sits on itself.\nconst LAG = 2.6 * RB;\n// A soft light from the upper left (x right, y down the panel, z out of\n// it), ELV radians above the tray, swings SWING radians either way and back\n// every SWAY seconds at Speed 2, so shadows and sheen slide round the swirls.\nconst ELV = 0.58, TANE = tan(ELV), AZ0 = atan2(-0.65, -0.6), SWING = 0.5, SWAY = 7;\n// Each LED keeps how high the foam stands toward the light, as a slope,\n// looking SHADOW LEDs out at three bearings across the swing.\nconst SHADOW = 16, NAZ = 3;\n// Opening hue: mint, not red.\nconst H0 = 0.45;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, ridges: 5, swirl: 0, begun: false,\n    hgt: new Float32Array(N), lag: new Float32Array(N), t: 0,\n    nx: new Float32Array(N), ny: new Float32Array(N), nz: new Float32Array(N).fill(1),\n    ao: new Float32Array(N).fill(1), hz: new Float32Array(N * NAZ), foam: new Float32Array(N),\n    pend: [], k: 0, pathS: 0, th: 0, ro: null, wait: 0,\n    scraping: false, ys: 0, vol: new Float32Array(W), roll: new Float32Array(W), tmp: new Float32Array(W),\n    dirty: [0, 0, W - 1, H - 1], prof: new Float32Array(41),\n    lit: [0, 0, 0], dark: [0, 0, 0], tray: [0, 0, 0],\n  };\n}\n\n// A rosette's place on the tray, a little off true as by hand, and where the\n// nozzle starts round it.\nfunction newRosette(S, k) {\n  const c = k % COLS, r = floor(k / COLS);\n  return {\n    cx: (c + 0.5) * CWD + (random() - 0.5) * 1.6, cy: (r + 0.5) * CHT + (random() - 0.5) * 1.6,\n    a0: random() * 2 * PI, dir: random() \u003c 0.5 ? 1 : -1, tw: random() * 2 * PI,\n  };\n}\n\n// The nozzle's path: angle th round the centre, out of 2 pi turns in all,\n// the radius closing from R0 to nothing. Each turn closes in by a step: the\n// bead's full width at Swirl -1, so the turns lie side by side; 0.9 of its\n// radius at 0, so each turn rests half on the one before; 0.57 at 1, a tall\n// cone.\nconst turnsOf = (S) => R0 / (RB * (S.swirl \u003c 0 ? 0.9 - 1.1 * S.swirl : 0.9 - 0.33 * S.swirl));\nfunction pathAt(S, ro, th) {\n  const T = 2 * PI * turnsOf(S), u = cl(th / T, 0, 1), r = R0 * (1 - u) ** 0.8;\n  const a = ro.a0 + ro.dir * th;\n  return { x: ro.cx + r * cos(a), y: ro.cy + r * sin(a), r, u, a };\n}\n\n// The star bead's top across its width. The star's outline,\n// rho = RB (1 - NOTCH + NOTCH (1 - |sin(n phi / 2)|)^2), sharp at the points\n// and round in the notches, is walked at 96 angles over its upper half, and\n// each edge between two of them lifts the 41 steps across it lies over.\nconst NP = 96;\nfunction profile(S, alpha, scale) {\n  const pr = S.prof, n = S.ridges;\n  pr.fill(0);\n  let ps = 0, pw = 0;\n  for (let m = 0; m \u003c= NP; m++) {\n    const ph = (m / NP) * PI, cr = 1 - abs(sin((n * (ph + alpha)) / 2));\n    const rho = RB * scale * (1 - NOTCH + NOTCH * cr * cr);\n    const s = ((rho * cos(ph)) / RB) * 20 + 20, w = rho * sin(ph) * SQ;\n    if (m > 0) {\n      const a = min(s, ps), b = max(s, ps);\n      for (let k = max(0, ceil(a)); k \u003c= min(40, floor(b)); k++) {\n        const t = b > a ? (k - ps) / (s - ps) : 0, v = pw + (w - pw) * t;\n        if (v > pr[k]) pr[k] = v;\n      }\n    }\n    ps = s;\n    pw = w;\n  }\n}\n\nfunction grow(S, x0, y0, x1, y1) {\n  const d = S.dirty;\n  d[0] = min(d[0], max(0, floor(x0)));\n  d[1] = min(d[1], max(0, floor(y0)));\n  d[2] = max(d[2], min(W - 1, ceil(x1)));\n  d[3] = max(d[3], min(H - 1, ceil(y1)));\n}\n\n// Height of the foam laid at least LAG earlier, under a point, bilinear.\nfunction lagAt(S, x, y) {\n  const u = cl(x - 0.5, 0, W - 1.001), v = cl(y - 0.5, 0, H - 1.001), i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n  const g = S.lag, p = j * W + i;\n  return (g[p] * (1 - fu) + g[p + 1] * fu) * (1 - fv) + (g[p + W] * (1 - fu) + g[p + W + 1] * fu) * fv;\n}\n\n// Lay the bead at one point of the path.\nfunction lay(S, ro, th) {\n  // The direction of travel, from a step back along the path, which still\n  // has length at the centre where the radius closes to nothing.\n  const P = pathAt(S, ro, th), Q = pathAt(S, ro, max(0, th - 0.15));\n  let tx = P.x - Q.x, ty = P.y - Q.y;\n  const tl = hypot(tx, ty);\n  if (tl \u003c 1e-4) {\n    tx = -sin(P.a) * ro.dir;\n    ty = cos(P.a) * ro.dir;\n  } else {\n    tx /= tl;\n    ty /= tl;\n  }\n  // Over the last tenth the bead thins to a point as the nozzle lifts away.\n  const scale = 1 - 0.75 * sm(0.88, 1, P.u), lift = 2.2 * sm(0.85, 1, P.u);\n  profile(S, ro.tw + TWIST * S.pathS, scale);\n  // The bead rests on the turn before: on the foam under the nozzle or a\n  // little outward of it, whichever stands higher.\n  const ox = P.r > 0.01 ? (P.x - ro.cx) / P.r : 0, oy = P.r > 0.01 ? (P.y - ro.cy) / P.r : 0, rest = 0.45 * RB;\n  const base = max(lagAt(S, P.x, P.y), lagAt(S, P.x + ox * rest, P.y + oy * rest) - 0.6) + lift, pr = S.prof, R = RB + 1;\n  for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, ceil(P.y + R)); y++)\n    for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, ceil(P.x + R)); x++) {\n      const dx = x + 0.5 - P.x, dy = y + 0.5 - P.y, along = dx * tx + dy * ty;\n      if (abs(along) > 0.75) continue;\n      const s = -dx * ty + dy * tx, b = ((s / RB) * 0.5 + 0.5) * 40;\n      if (b \u003c 0 || b > 40) continue;\n      const b0 = floor(b), b1 = min(40, b0 + 1), f = b - b0, w0 = pr[b0], w1 = pr[b1];\n      const v = base + w0 + (w1 - w0) * f, p = y * W + x;\n      if (v > S.hgt[p]) {\n        S.hgt[p] = v;\n        S.pend.push(p, v, S.pathS);\n      }\n    }\n  grow(S, P.x - R - 2, P.y - R - 2, P.x + R + SHADOW, P.y + R + SHADOW);\n}\n\n// Foam laid LAG or more of path ago becomes ground for the next turn.\nfunction settle(S, all) {\n  const q = S.pend;\n  let k = 0;\n  while (k \u003c q.length && (all || S.pathS - q[k + 2] > LAG)) {\n    const p = q[k];\n    if (q[k + 1] > S.lag[p]) S.lag[p] = q[k + 1];\n    k += 3;\n  }\n  if (k) q.splice(0, k);\n}\n\nfunction startScrape(S) {\n  if (S.scraping) return;\n  settle(S, true);\n  S.scraping = true;\n  S.ro = null;\n  S.ys = -8;\n  S.vol.fill(0);\n  S.roll.fill(0);\n}\n\nfunction step(S, dt) {\n  S.t += dt;\n  if (S.scraping) {\n    // A blade runs down the tray at 55 LEDs a second: everything above it\n    // is taken up, rolled ahead of it, and leaves past the bottom edge.\n    const y0 = S.ys, y1 = S.ys + 55 * dt;\n    for (let y = max(0, ceil(y0)); y \u003c min(H, ceil(y1)); y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        S.vol[x] += S.hgt[p];\n        S.hgt[p] = 0;\n        S.lag[p] = 0;\n      }\n    S.ys = y1;\n    // The roll spreads along the blade: its height across the panel is the\n    // scraped foam smoothed over about a rosette's width, lumpy as foam.\n    const v = S.vol, t = S.tmp, rl = S.roll;\n    for (let pass = 0; pass \u003c 2; pass++) {\n      const a = pass ? t : v, b = pass ? rl : t;\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let k = -7; k \u003c= 7; k++) sum += a[cl(x + k, 0, W - 1)];\n        b[x] = sum / 15;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) rl[x] = 0.55 * sqrt(rl[x]) * (0.85 + 0.15 * sin(x * 0.9 + S.ys * 0.21));\n    grow(S, 0, y0 - 3, W - 1, y1 + 10 + SHADOW);\n    if (S.ys > H + 14) {\n      S.scraping = false;\n      S.k = 0;\n      S.wait = 0.5;\n    }\n    return;\n  }\n  if (S.wait > 0) {\n    S.wait -= dt;\n    return;\n  }\n  if (!S.ro) {\n    if (S.k >= NR) {\n      startScrape(S);\n      return;\n    }\n    S.ro = newRosette(S, S.k);\n    S.th = 0;\n  }\n  // The nozzle runs on along its spiral, laying the bead every 0.4 LED.\n  const T = 2 * PI * turnsOf(S);\n  let left = VN * dt;\n  while (left > 0 && S.ro) {\n    const P = pathAt(S, S.ro, S.th), ds = min(0.4, left);\n    // Arc length per radian of the spiral, kept off zero at the centre.\n    const sp = max(1.2, hypot(P.r, (0.8 * R0 * (1 - P.u) ** -0.2) / T));\n    S.th += ds / sp;\n    S.pathS += ds;\n    left -= ds;\n    if (S.th >= T) {\n      lay(S, S.ro, T);\n      settle(S, true);\n      S.ro = null;\n      S.k++;\n      S.wait = 0.3;\n      break;\n    }\n    lay(S, S.ro, S.th);\n    settle(S, false);\n  }\n}\n\n// A whole rosette at once, for the tray the pattern opens on.\nfunction pipeNow(S) {\n  S.ro = newRosette(S, S.k);\n  S.th = 0;\n  while (S.ro) step(S, 0.02);\n  S.wait = 0;\n}\n\n// The roll of scraped foam ahead of the blade, at a column and row.\nfunction rollAt(S, x, y) {\n  const d = y + 0.5 - S.ys;\n  if (!S.scraping || d \u003c 0 || d > 8) return 0;\n  return S.roll[x] * sin((PI * d) / 8) ** 0.7;\n}\n\n// Survey the foam inside the dirty box: its normal, how far it sits in a\n// valley, and its horizon toward the light at each bearing.\nfunction survey(S) {\n  const d = S.dirty;\n  if (d[0] > d[2]) return;\n  const g = S.hgt, ht = (x, y) => {\n    const xi = cl(x, 0, W - 1), yi = cl(y, 0, H - 1);\n    return max(g[yi * W + xi], rollAt(S, xi, yi));\n  };\n  for (let y = d[1]; y \u003c= d[3]; y++)\n    for (let x = d[0]; x \u003c= d[2]; x++) {\n      const p = y * W + x, h0 = ht(x, y);\n      const gx = (ht(x + 1, y) - ht(x - 1, y)) * 0.5, gy = (ht(x, y + 1) - ht(x, y - 1)) * 0.5;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1);\n      S.nx[p] = -gx * inv;\n      S.ny[p] = -gy * inv;\n      S.nz[p] = inv;\n      // Valleys: the foam lower than its ring of neighbours two LEDs out.\n      const ring = (ht(x - 2, y) + ht(x + 2, y) + ht(x, y - 2) + ht(x, y + 2)) * 0.25;\n      S.ao[p] = 1 - 0.4 * sm(0, 2.2, ring - h0);\n      S.foam[p] = sm(0.08, 0.7, h0);\n      for (let k = 0; k \u003c NAZ; k++) {\n        const az = AZ0 + SWING * (k - 1), dx = cos(az), dy = sin(az);\n        let hor = -1;\n        for (let s = 1; s \u003c= SHADOW; s++) {\n          const e = (ht(round(x + dx * s), round(y + dy * s)) - h0) / s;\n          if (e > hor) hor = e;\n        }\n        S.hz[k * N + p] = hor;\n      }\n    }\n  d[0] = W;\n  d[1] = H;\n  d[2] = -1;\n  d[3] = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.ridges = round(cl(k[2], 5, 10));\n  S.swirl = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open on a tray half piped.\n    for (let i = 0; i \u003c 4; i++) pipeNow(S);\n    S.dirty = [0, 0, W - 1, H - 1];\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startScrape(S);\n  step(S, (d * S.speed) / 2);\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Peach, butter and lime go brown or olive when deep: there the foam is\n  // paled, its shadows lifted, and the tray taken down to near black.\n  const warm = sm(0.0, 0.07, hh) * (1 - sm(0.24, 0.34, hh));\n  hsv(h, 0.3 - 0.1 * warm, 1, S.lit);\n  hsv(h + 0.03, 0.5 - 0.2 * warm, 0.5 + 0.14 * warm, S.dark);\n  hsv(h + 0.05, 0.75 - 0.4 * warm, 0.24 - 0.15 * warm, S.tray);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  survey(S);\n  palette(S);\n  const { nx, ny, nz, ao, hz, foam, lit, dark, tray } = S;\n  // Where the light is now, and the half vector to the eye straight above.\n  const az = AZ0 + SWING * sin((2 * PI * S.t) / SWAY), ce = cos(ELV);\n  const lx = cos(az) * ce, ly = sin(az) * ce, lz = sin(ELV);\n  const hl = hypot(lx, ly, lz + 1), hx = lx / hl, hy = ly / hl, hz2 = (lz + 1) / hl;\n  const u = cl((az - AZ0) / SWING + 1, 0, 1.999), k = floor(u), fk = u - k, o0 = k * N, o1 = o0 + N;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, f = foam[p];\n      // Diffuse from the normal, darkened in valleys and where the foam\n      // toward the light stands above the light's own slope.\n      const hor = hz[o0 + p] + (hz[o1 + p] - hz[o0 + p]) * fk;\n      const shade = 1 - 0.8 * sm(TANE - 0.12, TANE + 0.4, hor);\n      const nl = max(0, nx[p] * lx + ny[p] * ly + nz[p] * lz);\n      const l = (0.2 + 0.8 * nl * shade) * ao[p];\n      // A faint sheen: matte foam, not frosting.\n      const nh = max(0, nx[p] * hx + ny[p] * hy + nz[p] * hz2), n2 = nh * nh, n4 = n2 * n2;\n      const sp = 0.14 * n4 * n4 * n4 * n2 * shade * f;\n      // Bare tray: its own colour, lit the same way and shadowed the same.\n      const tl = 0.2 + 0.8 * l;\n      const r = (dark[0] + (lit[0] - dark[0]) * l) * f + tray[0] * tl * (1 - f) + sp;\n      const g = (dark[1] + (lit[1] - dark[1]) * l) * f + tray[1] * tl * (1 - f) + sp;\n      const b = (dark[2] + (lit[2] - dark[2]) * l) * f + tray[2] * tl * (1 - f) + sp;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-whipped-soap","type":"code","name":"whipped-soap","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Whipped Soap\n// Family:  cosmetic\n// Idea:    An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after whipped body soap piped into rosettes in handmade soap shops\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1\n//\n// Knob 1: Hue. Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Ridges. The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together.\n// Knob 4: Swirl. How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high.\n// Buttons: K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, ceil, min, max, sqrt, sin, cos, tan, atan2, abs, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The tray: two rosettes across and four down, each in a square 32 LEDs on a side.\nconst COLS = 2, ROWS = 4, NR = COLS * ROWS, CWD = W / COLS, CHT = H / ROWS;\n// The nozzle's path starts R0 LEDs from the rosette's centre; the bead it\n// lays is RB LEDs in radius across and stands SQ times that tall.\nconst R0 = 10, RB = 4.6, SQ = 1.2;\n// How deep the star's notches cut into the bead, and how far the star turns\n// round the bead for each LED the nozzle travels.\nconst NOTCH = 0.45, TWIST = 0.11;\n// The nozzle runs VN LEDs a second at Speed 2.\nconst VN = 30;\n// A turn lands on the foam laid at least LAG LEDs of path earlier: the\n// bead never sits on itself.\nconst LAG = 2.6 * RB;\n// A soft light from the upper left (x right, y down the panel, z out of\n// it), ELV radians above the tray, swings SWING radians either way and back\n// every SWAY seconds at Speed 2, so shadows and sheen slide round the swirls.\nconst ELV = 0.58, TANE = tan(ELV), AZ0 = atan2(-0.65, -0.6), SWING = 0.5, SWAY = 7;\n// Each LED keeps how high the foam stands toward the light, as a slope,\n// looking SHADOW LEDs out at three bearings across the swing.\nconst SHADOW = 16, NAZ = 3;\n// Opening hue: mint, not red.\nconst H0 = 0.45;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, ridges: 5, swirl: 0, begun: false,\n    hgt: new Float32Array(N), lag: new Float32Array(N), t: 0,\n    nx: new Float32Array(N), ny: new Float32Array(N), nz: new Float32Array(N).fill(1),\n    ao: new Float32Array(N).fill(1), hz: new Float32Array(N * NAZ), foam: new Float32Array(N),\n    pend: [], k: 0, pathS: 0, th: 0, ro: null, wait: 0,\n    scraping: false, ys: 0, vol: new Float32Array(W), roll: new Float32Array(W), tmp: new Float32Array(W),\n    dirty: [0, 0, W - 1, H - 1], prof: new Float32Array(41),\n    lit: [0, 0, 0], dark: [0, 0, 0], tray: [0, 0, 0],\n  };\n}\n\n// A rosette's place on the tray, a little off true as by hand, and where the\n// nozzle starts round it.\nfunction newRosette(S, k) {\n  const c = k % COLS, r = floor(k / COLS);\n  return {\n    cx: (c + 0.5) * CWD + (random() - 0.5) * 1.6, cy: (r + 0.5) * CHT + (random() - 0.5) * 1.6,\n    a0: random() * 2 * PI, dir: random() \u003c 0.5 ? 1 : -1, tw: random() * 2 * PI,\n  };\n}\n\n// The nozzle's path: angle th round the centre, out of 2 pi turns in all,\n// the radius closing from R0 to nothing. Each turn closes in by a step: the\n// bead's full width at Swirl -1, so the turns lie side by side; 0.9 of its\n// radius at 0, so each turn rests half on the one before; 0.57 at 1, a tall\n// cone.\nconst turnsOf = (S) => R0 / (RB * (S.swirl \u003c 0 ? 0.9 - 1.1 * S.swirl : 0.9 - 0.33 * S.swirl));\nfunction pathAt(S, ro, th) {\n  const T = 2 * PI * turnsOf(S), u = cl(th / T, 0, 1), r = R0 * (1 - u) ** 0.8;\n  const a = ro.a0 + ro.dir * th;\n  return { x: ro.cx + r * cos(a), y: ro.cy + r * sin(a), r, u, a };\n}\n\n// The star bead's top across its width. The star's outline,\n// rho = RB (1 - NOTCH + NOTCH (1 - |sin(n phi / 2)|)^2), sharp at the points\n// and round in the notches, is walked at 96 angles over its upper half, and\n// each edge between two of them lifts the 41 steps across it lies over.\nconst NP = 96;\nfunction profile(S, alpha, scale) {\n  const pr = S.prof, n = S.ridges;\n  pr.fill(0);\n  let ps = 0, pw = 0;\n  for (let m = 0; m \u003c= NP; m++) {\n    const ph = (m / NP) * PI, cr = 1 - abs(sin((n * (ph + alpha)) / 2));\n    const rho = RB * scale * (1 - NOTCH + NOTCH * cr * cr);\n    const s = ((rho * cos(ph)) / RB) * 20 + 20, w = rho * sin(ph) * SQ;\n    if (m > 0) {\n      const a = min(s, ps), b = max(s, ps);\n      for (let k = max(0, ceil(a)); k \u003c= min(40, floor(b)); k++) {\n        const t = b > a ? (k - ps) / (s - ps) : 0, v = pw + (w - pw) * t;\n        if (v > pr[k]) pr[k] = v;\n      }\n    }\n    ps = s;\n    pw = w;\n  }\n}\n\nfunction grow(S, x0, y0, x1, y1) {\n  const d = S.dirty;\n  d[0] = min(d[0], max(0, floor(x0)));\n  d[1] = min(d[1], max(0, floor(y0)));\n  d[2] = max(d[2], min(W - 1, ceil(x1)));\n  d[3] = max(d[3], min(H - 1, ceil(y1)));\n}\n\n// Height of the foam laid at least LAG earlier, under a point, bilinear.\nfunction lagAt(S, x, y) {\n  const u = cl(x - 0.5, 0, W - 1.001), v = cl(y - 0.5, 0, H - 1.001), i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n  const g = S.lag, p = j * W + i;\n  return (g[p] * (1 - fu) + g[p + 1] * fu) * (1 - fv) + (g[p + W] * (1 - fu) + g[p + W + 1] * fu) * fv;\n}\n\n// Lay the bead at one point of the path.\nfunction lay(S, ro, th) {\n  // The direction of travel, from a step back along the path, which still\n  // has length at the centre where the radius closes to nothing.\n  const P = pathAt(S, ro, th), Q = pathAt(S, ro, max(0, th - 0.15));\n  let tx = P.x - Q.x, ty = P.y - Q.y;\n  const tl = hypot(tx, ty);\n  if (tl \u003c 1e-4) {\n    tx = -sin(P.a) * ro.dir;\n    ty = cos(P.a) * ro.dir;\n  } else {\n    tx /= tl;\n    ty /= tl;\n  }\n  // Over the last tenth the bead thins to a point as the nozzle lifts away.\n  const scale = 1 - 0.75 * sm(0.88, 1, P.u), lift = 2.2 * sm(0.85, 1, P.u);\n  profile(S, ro.tw + TWIST * S.pathS, scale);\n  // The bead rests on the turn before: on the foam under the nozzle or a\n  // little outward of it, whichever stands higher.\n  const ox = P.r > 0.01 ? (P.x - ro.cx) / P.r : 0, oy = P.r > 0.01 ? (P.y - ro.cy) / P.r : 0, rest = 0.45 * RB;\n  const base = max(lagAt(S, P.x, P.y), lagAt(S, P.x + ox * rest, P.y + oy * rest) - 0.6) + lift, pr = S.prof, R = RB + 1;\n  for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, ceil(P.y + R)); y++)\n    for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, ceil(P.x + R)); x++) {\n      const dx = x + 0.5 - P.x, dy = y + 0.5 - P.y, along = dx * tx + dy * ty;\n      if (abs(along) > 0.75) continue;\n      const s = -dx * ty + dy * tx, b = ((s / RB) * 0.5 + 0.5) * 40;\n      if (b \u003c 0 || b > 40) continue;\n      const b0 = floor(b), b1 = min(40, b0 + 1), f = b - b0, w0 = pr[b0], w1 = pr[b1];\n      const v = base + w0 + (w1 - w0) * f, p = y * W + x;\n      if (v > S.hgt[p]) {\n        S.hgt[p] = v;\n        S.pend.push(p, v, S.pathS);\n      }\n    }\n  grow(S, P.x - R - 2, P.y - R - 2, P.x + R + SHADOW, P.y + R + SHADOW);\n}\n\n// Foam laid LAG or more of path ago becomes ground for the next turn.\nfunction settle(S, all) {\n  const q = S.pend;\n  let k = 0;\n  while (k \u003c q.length && (all || S.pathS - q[k + 2] > LAG)) {\n    const p = q[k];\n    if (q[k + 1] > S.lag[p]) S.lag[p] = q[k + 1];\n    k += 3;\n  }\n  if (k) q.splice(0, k);\n}\n\nfunction startScrape(S) {\n  if (S.scraping) return;\n  settle(S, true);\n  S.scraping = true;\n  S.ro = null;\n  S.ys = -8;\n  S.vol.fill(0);\n  S.roll.fill(0);\n}\n\nfunction step(S, dt) {\n  S.t += dt;\n  if (S.scraping) {\n    // A blade runs down the tray at 55 LEDs a second: everything above it\n    // is taken up, rolled ahead of it, and leaves past the bottom edge.\n    const y0 = S.ys, y1 = S.ys + 55 * dt;\n    for (let y = max(0, ceil(y0)); y \u003c min(H, ceil(y1)); y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        S.vol[x] += S.hgt[p];\n        S.hgt[p] = 0;\n        S.lag[p] = 0;\n      }\n    S.ys = y1;\n    // The roll spreads along the blade: its height across the panel is the\n    // scraped foam smoothed over about a rosette's width, lumpy as foam.\n    const v = S.vol, t = S.tmp, rl = S.roll;\n    for (let pass = 0; pass \u003c 2; pass++) {\n      const a = pass ? t : v, b = pass ? rl : t;\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let k = -7; k \u003c= 7; k++) sum += a[cl(x + k, 0, W - 1)];\n        b[x] = sum / 15;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) rl[x] = 0.55 * sqrt(rl[x]) * (0.85 + 0.15 * sin(x * 0.9 + S.ys * 0.21));\n    grow(S, 0, y0 - 3, W - 1, y1 + 10 + SHADOW);\n    if (S.ys > H + 14) {\n      S.scraping = false;\n      S.k = 0;\n      S.wait = 0.5;\n    }\n    return;\n  }\n  if (S.wait > 0) {\n    S.wait -= dt;\n    return;\n  }\n  if (!S.ro) {\n    if (S.k >= NR) {\n      startScrape(S);\n      return;\n    }\n    S.ro = newRosette(S, S.k);\n    S.th = 0;\n  }\n  // The nozzle runs on along its spiral, laying the bead every 0.4 LED.\n  const T = 2 * PI * turnsOf(S);\n  let left = VN * dt;\n  while (left > 0 && S.ro) {\n    const P = pathAt(S, S.ro, S.th), ds = min(0.4, left);\n    // Arc length per radian of the spiral, kept off zero at the centre.\n    const sp = max(1.2, hypot(P.r, (0.8 * R0 * (1 - P.u) ** -0.2) / T));\n    S.th += ds / sp;\n    S.pathS += ds;\n    left -= ds;\n    if (S.th >= T) {\n      lay(S, S.ro, T);\n      settle(S, true);\n      S.ro = null;\n      S.k++;\n      S.wait = 0.3;\n      break;\n    }\n    lay(S, S.ro, S.th);\n    settle(S, false);\n  }\n}\n\n// A whole rosette at once, for the tray the pattern opens on.\nfunction pipeNow(S) {\n  S.ro = newRosette(S, S.k);\n  S.th = 0;\n  while (S.ro) step(S, 0.02);\n  S.wait = 0;\n}\n\n// The roll of scraped foam ahead of the blade, at a column and row.\nfunction rollAt(S, x, y) {\n  const d = y + 0.5 - S.ys;\n  if (!S.scraping || d \u003c 0 || d > 8) return 0;\n  return S.roll[x] * sin((PI * d) / 8) ** 0.7;\n}\n\n// Survey the foam inside the dirty box: its normal, how far it sits in a\n// valley, and its horizon toward the light at each bearing.\nfunction survey(S) {\n  const d = S.dirty;\n  if (d[0] > d[2]) return;\n  const g = S.hgt, ht = (x, y) => {\n    const xi = cl(x, 0, W - 1), yi = cl(y, 0, H - 1);\n    return max(g[yi * W + xi], rollAt(S, xi, yi));\n  };\n  for (let y = d[1]; y \u003c= d[3]; y++)\n    for (let x = d[0]; x \u003c= d[2]; x++) {\n      const p = y * W + x, h0 = ht(x, y);\n      const gx = (ht(x + 1, y) - ht(x - 1, y)) * 0.5, gy = (ht(x, y + 1) - ht(x, y - 1)) * 0.5;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1);\n      S.nx[p] = -gx * inv;\n      S.ny[p] = -gy * inv;\n      S.nz[p] = inv;\n      // Valleys: the foam lower than its ring of neighbours two LEDs out.\n      const ring = (ht(x - 2, y) + ht(x + 2, y) + ht(x, y - 2) + ht(x, y + 2)) * 0.25;\n      S.ao[p] = 1 - 0.4 * sm(0, 2.2, ring - h0);\n      S.foam[p] = sm(0.08, 0.7, h0);\n      for (let k = 0; k \u003c NAZ; k++) {\n        const az = AZ0 + SWING * (k - 1), dx = cos(az), dy = sin(az);\n        let hor = -1;\n        for (let s = 1; s \u003c= SHADOW; s++) {\n          const e = (ht(round(x + dx * s), round(y + dy * s)) - h0) / s;\n          if (e > hor) hor = e;\n        }\n        S.hz[k * N + p] = hor;\n      }\n    }\n  d[0] = W;\n  d[1] = H;\n  d[2] = -1;\n  d[3] = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.ridges = round(cl(k[2], 5, 10));\n  S.swirl = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open on a tray half piped.\n    for (let i = 0; i \u003c 4; i++) pipeNow(S);\n    S.dirty = [0, 0, W - 1, H - 1];\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startScrape(S);\n  step(S, (d * S.speed) / 2);\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Peach, butter and lime go brown or olive when deep: there the foam is\n  // paled, its shadows lifted, and the tray taken down to near black.\n  const warm = sm(0.0, 0.07, hh) * (1 - sm(0.24, 0.34, hh));\n  hsv(h, 0.3 - 0.1 * warm, 1, S.lit);\n  hsv(h + 0.03, 0.5 - 0.2 * warm, 0.5 + 0.14 * warm, S.dark);\n  hsv(h + 0.05, 0.75 - 0.4 * warm, 0.24 - 0.15 * warm, S.tray);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  survey(S);\n  palette(S);\n  const { nx, ny, nz, ao, hz, foam, lit, dark, tray } = S;\n  // Where the light is now, and the half vector to the eye straight above.\n  const az = AZ0 + SWING * sin((2 * PI * S.t) / SWAY), ce = cos(ELV);\n  const lx = cos(az) * ce, ly = sin(az) * ce, lz = sin(ELV);\n  const hl = hypot(lx, ly, lz + 1), hx = lx / hl, hy = ly / hl, hz2 = (lz + 1) / hl;\n  const u = cl((az - AZ0) / SWING + 1, 0, 1.999), k = floor(u), fk = u - k, o0 = k * N, o1 = o0 + N;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, f = foam[p];\n      // Diffuse from the normal, darkened in valleys and where the foam\n      // toward the light stands above the light's own slope.\n      const hor = hz[o0 + p] + (hz[o1 + p] - hz[o0 + p]) * fk;\n      const shade = 1 - 0.8 * sm(TANE - 0.12, TANE + 0.4, hor);\n      const nl = max(0, nx[p] * lx + ny[p] * ly + nz[p] * lz);\n      const l = (0.2 + 0.8 * nl * shade) * ao[p];\n      // A faint sheen: matte foam, not frosting.\n      const nh = max(0, nx[p] * hx + ny[p] * hy + nz[p] * hz2), n2 = nh * nh, n4 = n2 * n2;\n      const sp = 0.14 * n4 * n4 * n4 * n2 * shade * f;\n      // Bare tray: its own colour, lit the same way and shadowed the same.\n      const tl = 0.2 + 0.8 * l;\n      const r = (dark[0] + (lit[0] - dark[0]) * l) * f + tray[0] * tl * (1 - f) + sp;\n      const g = (dark[1] + (lit[1] - dark[1]) * l) * f + tray[1] * tl * (1 - f) + sp;\n      const b = (dark[2] + (lit[2] - dark[2]) * l) * f + tray[2] * tl * (1 - f) + sp;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Ridges","min":5,"max":10,"about":"The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together."},{"name":"Swirl","min":-1,"max":1,"about":"How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high."}],"start":[0,2,5,0.06],"measures":{"motion":0.0309,"detail":0.0537,"edges":0.3642,"complexity":1.1069,"coverage":0.9764,"colour":0.1274,"drift":0.0699},"knobResponse":[0.1534,0.0635,0.0442,0.1089]},{"slug":"wireworld","title":"Wireworld","family":"automata","round":16,"note":"구리선 회로를 전자가 파란 머리와 주황 꼬리로 달려요. 둘레 12, 18, 24, 30칸 클록 넷의 신호가 다이오드와 지연선을 지나 XOR 과 OR 게이트에서 만나고, 아래 램프 셋이 그 답을 깜박여요. K1 을 누르면 네 줄에 전자 여섯 개씩이 박자를 맞춰 들어가요.","idea":"A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.","buttons":"K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.","code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","layer":{"id":"layer-wireworld","type":"code","name":"wireworld","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":3,"about":"0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon."},{"name":"Speed","min":0,"max":4,"about":"Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell."},{"name":"Pulses","min":1,"max":3,"about":"One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out."},{"name":"Glow","min":0,"max":1,"about":"The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s."}],"start":[0,2,1,0.06],"measures":{"motion":0.2605,"detail":0.0895,"edges":0.7694,"complexity":0.461,"coverage":0.3111,"colour":0.2355,"drift":0.0855},"knobResponse":[0.0911,0.0637,0.0514,0.0736]},{"slug":"woodpecker","title":"Woodpecker","family":"bird","round":21,"note":"새벽 숲의 자작나무 줄기가 128줄을 다 쓰고, 오색딱따구리가 뻣뻣한 꽁지로 버티며 껑충껑충 오르다 멈춰 머리가 흐려지도록 두드려 부스러기를 튀기고 구멍을 내요. 꼭대기에 닿으면 물결치듯 날아 밑동으로 내려가 다시 오르고, K1 을 누르면 다음 걸음 뒤에 바로 두드려요.","idea":"A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.","buttons":"K1 tap makes the male stop and drum after his next hop.","code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","layer":{"id":"layer-woodpecker","type":"code","name":"woodpecker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tree","min":0,"max":2,"about":"A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower."},{"name":"Birds","min":1,"max":4,"about":"One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk."},{"name":"Light","min":0,"max":1,"about":"Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west."}],"start":[0,2,1,0.06],"measures":{"motion":0.092,"detail":0.0823,"edges":0.3471,"complexity":2.5826,"coverage":0.9376,"colour":0.1398,"drift":0.0454},"knobResponse":[0.1005,0.0437,0.0473,0.1346]},{"slug":"wythoff-nim","title":"Wythoff Nim","family":"algo","round":28,"note":"위토프 게임의 스프라그-그런디 값 표를 모서리로 세웠어요. 지는 자리(값 0)는 황금비 두 줄을 따라 금빛이고, 값 0, 1, 2 가 차례로 쓸고 지나가며 저마다의 두 줄에서 번쩍였다 표로 가라앉아요. 누르면 흰 말이 떨어져 이기는 수로 모서리까지 게임을 해요.","idea":"The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.","buttons":"K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.","code":"// ===== Patternflow pattern =====\n// Title:   Wythoff Nim\n// Family:  algo\n// Idea:    The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Wythoff's game (Willem Abraham Wythoff, 1907) and its Sprague-Grundy values (Roland Sprague 1935, Patrick Grundy 1939), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple.\n// Knob 2: Speed. How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half.\n// Knob 3: Zoom. LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays.\n// Knob 4: Glow. How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds.\n// Buttons: K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two heaps of x and y counters. A move takes any number from one heap, or\n// the same number from both; whoever takes the last counter wins. A\n// position's Grundy value is the smallest number not among the values one\n// move away: left along its row, up its column, up its diagonal. The\n// positions of value 0 are the ones to move to: (floor(n phi),\n// floor(n phi^2)) and their mirror images, on two rays of slopes phi and\n// 1/phi. Every other value gathers along the same two rays, wobbling off\n// them without ever falling into a period (Dress, Flammenkamp and Pink,\n// 1999), and down the middle the values grow like x + y.\nconst T = 82;\nconst G = new Int16Array(T * T);\nlet GALL = 0;\n{\n  const mark = new Int32Array(4 * T);\n  for (let y = 0, id = 1; y \u003c T; y++)\n    for (let x = 0; x \u003c T; x++, id++) {\n      for (let i = 0; i \u003c x; i++) mark[G[y * T + i]] = id;\n      for (let j = 0; j \u003c y; j++) mark[G[j * T + x]] = id;\n      for (let d = 1; d \u003c= min(x, y); d++) mark[G[(y - d) * T + x - d]] = id;\n      let m = 0;\n      while (mark[m] === id) m++;\n      G[y * T + x] = m;\n      GALL = max(GALL, m);\n    }\n}\n// The cells of each value, for the sweep.\nconst BY = Array.from({ length: GALL + 1 }, () => []);\nfor (let c = 0; c \u003c T * T; c++) BY[G[c]].push(c);\n\n// The table stands on its corner: position (x, y) is drawn at u = x - y\n// across and v = x + y down, s LEDs to a unit, with (0, 0) at the top.\n// Taking from one heap moves up and to the side at 45 degrees; taking from\n// both moves straight up, and the two rays run down from the corner 13\n// degrees either side of the middle. At Zoom 1 a cell is the LED at its\n// centre and the one above it.\nfunction place(P, s) {\n  P.s = s;\n  P.vis = 0;\n  const top = 0.5 + s;\n  for (let p = 0; p \u003c N; p++) {\n    const u = ((p % W) + 0.5 - 32.5) / s, v = (floor(p / W) + 0.5 - top) / s + 1e-3;\n    const xf = (u + v) / 2, yf = (v - u) / 2, x = round(xf), y = round(yf);\n    if (x \u003c 0 || y \u003c 0 || x >= T || y >= T) {\n      P.ci[p] = -1;\n      continue;\n    }\n    const c = y * T + x;\n    P.ci[p] = c;\n    P.vis = max(P.vis, G[c]);\n    // How far into the cell, in LEDs, for the lines between cells.\n    P.edge[p] = min(0.5 - abs(xf - x), 0.5 - abs(yf - y)) * 1.414 * s;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    ts: 0, K: -1, hue: -1, glow: 0.06, s: 0, vis: 0,\n    ci: new Int32Array(N), edge: new Float32Array(N),\n    L: new Float32Array(T * T), pw: new Float32Array(T * T), pl: new Float32Array(T * T),\n    pal: new Float32Array((GALL + 1) * 3), pb: new Float32Array((GALL + 1) * 3), game: null,\n  });\n  place(P, 1);\n}\n\n// The sweep's value climbs slowly through the small values, where the rays\n// are, and faster through the large ones: K = 12 (e^(2.5 t / 12) - 1), t in\n// seconds at Speed 2.\nconst C = 12, RATE = 2.5;\n\nfunction light(P, g) {\n  if (g >= 0 && g \u003c= GALL) for (const c of BY[g]) P.L[c] = 1;\n}\n\n// A move: to a position of value 0 if there is one (the winner's move),\n// otherwise a few counters from a heap or both (the loser's).\nfunction nextMove(x, y) {\n  if (G[y * T + x] !== 0) {\n    for (let i = 0; i \u003c x; i++) if (G[y * T + i] === 0) return [i, y, 1];\n    for (let j = 0; j \u003c y; j++) if (G[j * T + x] === 0) return [x, j, 1];\n    for (let q = min(x, y); q > 0; q--) if (G[(y - q) * T + x - q] === 0) return [x - q, y - q, 1];\n  }\n  for (;;) {\n    const kind = floor(random() * 3), a = kind === 0 ? x : kind === 1 ? y : min(x, y);\n    if (a \u003c 1) continue;\n    const q = 1 + floor(random() * min(a, 9));\n    return [kind === 1 ? x : x - q, kind === 0 ? y : y - q, 0];\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const s = round(cl(k[2], 1, 4));\n  if (abs(s - P.s) > 1e-3) place(P, s);\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    hsv(P.hue + 0.13, 0.8, 1, P.pal, 0);\n    hsv(P.hue + 0.13, 0.5, 1, P.pb, 0);\n    for (let g = 1; g \u003c= GALL; g++) {\n      const h = P.hue + 0.1 - 0.5 * (1 - exp(-g / 14)) - g / 900;\n      hsv(h, 0.85, 0.17 + 0.6 * exp(-g / 35), P.pal, g * 3);\n      hsv(h, 0.5, 1, P.pb, g * 3);\n    }\n  }\n  P.glow = cl(k[3], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2, ds = d * sp;\n\n  // The sweep.\n  const fade = exp(-ds / (0.45 + 1.6 * P.glow));\n  for (let c = 0; c \u003c T * T; c++) P.L[c] *= fade;\n  const k0 = P.K;\n  P.ts += ds;\n  P.K = P.ts \u003c 0 ? -1 : floor(C * (exp((P.ts * RATE) / C) - 1) + 1e-6);\n  for (let g = max(k0 + 1, 0); g \u003c= P.K; g++) light(P, g);\n  if (P.K > P.vis + 2) (P.ts = -0.8), (P.K = -1);\n\n  // The game.\n  const gd = d * (0.5 + 0.5 * sp), gone = exp(-d / (P.game ? 8 : 1.2));\n  for (let c = 0; c \u003c T * T; c++) (P.pw[c] *= gone), (P.pl[c] *= gone);\n  if (input.btnPressed && input.btnPressed[0]) {\n    const vmax = (H - 1.5 - P.s) / P.s, v = round(vmax * (0.6 + 0.35 * random()));\n    let u = round((random() - 0.5) * 1.6 * min(v, 31 / P.s));\n    if ((u + v) & 1) u += u > 0 ? -1 : 1;\n    const x = (u + v) >> 1, y = (v - u) >> 1;\n    P.game = { x, y, cx: x, cy: y, m: nextMove(x, y), f: 0, wait: 0.4 };\n  }\n  const gm = P.game;\n  if (gm) {\n    if (gm.wait > 0) gm.wait -= gd * 2;\n    else {\n      const [tx, ty, win] = gm.m, len = max(abs(tx - gm.x), abs(ty - gm.y));\n      gm.f = min(1, gm.f + (gd * 30) / (len + 8));\n      const sx = Math.sign(tx - gm.x), sy = Math.sign(ty - gm.y), at = round(gm.f * len);\n      for (let i = 0; i \u003c= at; i++) (win ? P.pw : P.pl)[(gm.y + sy * i) * T + gm.x + sx * i] = 1;\n      gm.cx = gm.x + sx * gm.f * len;\n      gm.cy = gm.y + sy * gm.f * len;\n      if (gm.f >= 1) {\n        gm.x = tx;\n        gm.y = ty;\n        gm.f = 0;\n        gm.wait = 0.5;\n        if (win) P.L[ty * T + tx] = 1;\n        if (tx === 0 && ty === 0) P.game = null;\n        else gm.m = nextMove(tx, ty);\n      }\n    }\n  }\n}\n\nconst WIN = [255, 226, 130], LOSE = [90, 180, 255];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const base = 1 - 0.85 * P.glow, grid = P.s > 2 ? 0.6 : 0, gm = P.game, S = P.s;\n  // The counter, a diamond of light where the game stands.\n  const ux = gm ? 32 + S * (gm.cx - gm.cy) : -99, vy = gm ? S + S * (gm.cx + gm.cy) - (S === 1 ? 0.5 : 0) : -99;\n  for (let p = 0; p \u003c N; p++) {\n    const c = P.ci[p], X = p % W, Y = floor(p / W);\n    if (c \u003c 0) {\n      display.setPixel(X, Y, 0, 0, 0);\n      continue;\n    }\n    const q = G[c] * 3, l = P.L[c], a = P.pw[c] * 0.8, b = P.pl[c] * 0.75, f = q ? base : 0.6 + 0.4 * base;\n    const e = 1 - grid * cl(1 - P.edge[p] * 1.6, 0, 1);\n    // A lit cell flashes white, fades to its own colour at full strength\n    // and then down into the table.\n    const m = min(1, l * 1.5), wt = l * l * l;\n    let r = P.pal[q] * f, g = P.pal[q + 1] * f, bl = P.pal[q + 2] * f;\n    r += (P.pb[q] + (255 - P.pb[q]) * wt - r) * m;\n    g += (P.pb[q + 1] + (255 - P.pb[q + 1]) * wt - g) * m;\n    bl += (P.pb[q + 2] + (255 - P.pb[q + 2]) * wt - bl) * m;\n    r += (LOSE[0] - r) * b + (WIN[0] - r) * a;\n    g += (LOSE[1] - g) * b + (WIN[1] - g) * a;\n    bl += (LOSE[2] - bl) * b + (WIN[2] - bl) * a;\n    const k = cl(S + 1.6 - abs(X - ux) - abs(Y - vy), 0, 1.6) / 1.6;\n    if (k > 0) (r += (255 - r) * k), (g += (255 - g) * k), (bl += (255 - bl) * k);\n    display.setPixel(X, Y, r * e, g * e, bl * e);\n  }\n}\n","layer":{"id":"layer-wythoff-nim","type":"code","name":"wythoff-nim","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Wythoff Nim\n// Family:  algo\n// Idea:    The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Wythoff's game (Willem Abraham Wythoff, 1907) and its Sprague-Grundy values (Roland Sprague 1935, Patrick Grundy 1939), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple.\n// Knob 2: Speed. How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half.\n// Knob 3: Zoom. LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays.\n// Knob 4: Glow. How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds.\n// Buttons: K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two heaps of x and y counters. A move takes any number from one heap, or\n// the same number from both; whoever takes the last counter wins. A\n// position's Grundy value is the smallest number not among the values one\n// move away: left along its row, up its column, up its diagonal. The\n// positions of value 0 are the ones to move to: (floor(n phi),\n// floor(n phi^2)) and their mirror images, on two rays of slopes phi and\n// 1/phi. Every other value gathers along the same two rays, wobbling off\n// them without ever falling into a period (Dress, Flammenkamp and Pink,\n// 1999), and down the middle the values grow like x + y.\nconst T = 82;\nconst G = new Int16Array(T * T);\nlet GALL = 0;\n{\n  const mark = new Int32Array(4 * T);\n  for (let y = 0, id = 1; y \u003c T; y++)\n    for (let x = 0; x \u003c T; x++, id++) {\n      for (let i = 0; i \u003c x; i++) mark[G[y * T + i]] = id;\n      for (let j = 0; j \u003c y; j++) mark[G[j * T + x]] = id;\n      for (let d = 1; d \u003c= min(x, y); d++) mark[G[(y - d) * T + x - d]] = id;\n      let m = 0;\n      while (mark[m] === id) m++;\n      G[y * T + x] = m;\n      GALL = max(GALL, m);\n    }\n}\n// The cells of each value, for the sweep.\nconst BY = Array.from({ length: GALL + 1 }, () => []);\nfor (let c = 0; c \u003c T * T; c++) BY[G[c]].push(c);\n\n// The table stands on its corner: position (x, y) is drawn at u = x - y\n// across and v = x + y down, s LEDs to a unit, with (0, 0) at the top.\n// Taking from one heap moves up and to the side at 45 degrees; taking from\n// both moves straight up, and the two rays run down from the corner 13\n// degrees either side of the middle. At Zoom 1 a cell is the LED at its\n// centre and the one above it.\nfunction place(P, s) {\n  P.s = s;\n  P.vis = 0;\n  const top = 0.5 + s;\n  for (let p = 0; p \u003c N; p++) {\n    const u = ((p % W) + 0.5 - 32.5) / s, v = (floor(p / W) + 0.5 - top) / s + 1e-3;\n    const xf = (u + v) / 2, yf = (v - u) / 2, x = round(xf), y = round(yf);\n    if (x \u003c 0 || y \u003c 0 || x >= T || y >= T) {\n      P.ci[p] = -1;\n      continue;\n    }\n    const c = y * T + x;\n    P.ci[p] = c;\n    P.vis = max(P.vis, G[c]);\n    // How far into the cell, in LEDs, for the lines between cells.\n    P.edge[p] = min(0.5 - abs(xf - x), 0.5 - abs(yf - y)) * 1.414 * s;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    ts: 0, K: -1, hue: -1, glow: 0.06, s: 0, vis: 0,\n    ci: new Int32Array(N), edge: new Float32Array(N),\n    L: new Float32Array(T * T), pw: new Float32Array(T * T), pl: new Float32Array(T * T),\n    pal: new Float32Array((GALL + 1) * 3), pb: new Float32Array((GALL + 1) * 3), game: null,\n  });\n  place(P, 1);\n}\n\n// The sweep's value climbs slowly through the small values, where the rays\n// are, and faster through the large ones: K = 12 (e^(2.5 t / 12) - 1), t in\n// seconds at Speed 2.\nconst C = 12, RATE = 2.5;\n\nfunction light(P, g) {\n  if (g >= 0 && g \u003c= GALL) for (const c of BY[g]) P.L[c] = 1;\n}\n\n// A move: to a position of value 0 if there is one (the winner's move),\n// otherwise a few counters from a heap or both (the loser's).\nfunction nextMove(x, y) {\n  if (G[y * T + x] !== 0) {\n    for (let i = 0; i \u003c x; i++) if (G[y * T + i] === 0) return [i, y, 1];\n    for (let j = 0; j \u003c y; j++) if (G[j * T + x] === 0) return [x, j, 1];\n    for (let q = min(x, y); q > 0; q--) if (G[(y - q) * T + x - q] === 0) return [x - q, y - q, 1];\n  }\n  for (;;) {\n    const kind = floor(random() * 3), a = kind === 0 ? x : kind === 1 ? y : min(x, y);\n    if (a \u003c 1) continue;\n    const q = 1 + floor(random() * min(a, 9));\n    return [kind === 1 ? x : x - q, kind === 0 ? y : y - q, 0];\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const s = round(cl(k[2], 1, 4));\n  if (abs(s - P.s) > 1e-3) place(P, s);\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    hsv(P.hue + 0.13, 0.8, 1, P.pal, 0);\n    hsv(P.hue + 0.13, 0.5, 1, P.pb, 0);\n    for (let g = 1; g \u003c= GALL; g++) {\n      const h = P.hue + 0.1 - 0.5 * (1 - exp(-g / 14)) - g / 900;\n      hsv(h, 0.85, 0.17 + 0.6 * exp(-g / 35), P.pal, g * 3);\n      hsv(h, 0.5, 1, P.pb, g * 3);\n    }\n  }\n  P.glow = cl(k[3], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2, ds = d * sp;\n\n  // The sweep.\n  const fade = exp(-ds / (0.45 + 1.6 * P.glow));\n  for (let c = 0; c \u003c T * T; c++) P.L[c] *= fade;\n  const k0 = P.K;\n  P.ts += ds;\n  P.K = P.ts \u003c 0 ? -1 : floor(C * (exp((P.ts * RATE) / C) - 1) + 1e-6);\n  for (let g = max(k0 + 1, 0); g \u003c= P.K; g++) light(P, g);\n  if (P.K > P.vis + 2) (P.ts = -0.8), (P.K = -1);\n\n  // The game.\n  const gd = d * (0.5 + 0.5 * sp), gone = exp(-d / (P.game ? 8 : 1.2));\n  for (let c = 0; c \u003c T * T; c++) (P.pw[c] *= gone), (P.pl[c] *= gone);\n  if (input.btnPressed && input.btnPressed[0]) {\n    const vmax = (H - 1.5 - P.s) / P.s, v = round(vmax * (0.6 + 0.35 * random()));\n    let u = round((random() - 0.5) * 1.6 * min(v, 31 / P.s));\n    if ((u + v) & 1) u += u > 0 ? -1 : 1;\n    const x = (u + v) >> 1, y = (v - u) >> 1;\n    P.game = { x, y, cx: x, cy: y, m: nextMove(x, y), f: 0, wait: 0.4 };\n  }\n  const gm = P.game;\n  if (gm) {\n    if (gm.wait > 0) gm.wait -= gd * 2;\n    else {\n      const [tx, ty, win] = gm.m, len = max(abs(tx - gm.x), abs(ty - gm.y));\n      gm.f = min(1, gm.f + (gd * 30) / (len + 8));\n      const sx = Math.sign(tx - gm.x), sy = Math.sign(ty - gm.y), at = round(gm.f * len);\n      for (let i = 0; i \u003c= at; i++) (win ? P.pw : P.pl)[(gm.y + sy * i) * T + gm.x + sx * i] = 1;\n      gm.cx = gm.x + sx * gm.f * len;\n      gm.cy = gm.y + sy * gm.f * len;\n      if (gm.f >= 1) {\n        gm.x = tx;\n        gm.y = ty;\n        gm.f = 0;\n        gm.wait = 0.5;\n        if (win) P.L[ty * T + tx] = 1;\n        if (tx === 0 && ty === 0) P.game = null;\n        else gm.m = nextMove(tx, ty);\n      }\n    }\n  }\n}\n\nconst WIN = [255, 226, 130], LOSE = [90, 180, 255];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const base = 1 - 0.85 * P.glow, grid = P.s > 2 ? 0.6 : 0, gm = P.game, S = P.s;\n  // The counter, a diamond of light where the game stands.\n  const ux = gm ? 32 + S * (gm.cx - gm.cy) : -99, vy = gm ? S + S * (gm.cx + gm.cy) - (S === 1 ? 0.5 : 0) : -99;\n  for (let p = 0; p \u003c N; p++) {\n    const c = P.ci[p], X = p % W, Y = floor(p / W);\n    if (c \u003c 0) {\n      display.setPixel(X, Y, 0, 0, 0);\n      continue;\n    }\n    const q = G[c] * 3, l = P.L[c], a = P.pw[c] * 0.8, b = P.pl[c] * 0.75, f = q ? base : 0.6 + 0.4 * base;\n    const e = 1 - grid * cl(1 - P.edge[p] * 1.6, 0, 1);\n    // A lit cell flashes white, fades to its own colour at full strength\n    // and then down into the table.\n    const m = min(1, l * 1.5), wt = l * l * l;\n    let r = P.pal[q] * f, g = P.pal[q + 1] * f, bl = P.pal[q + 2] * f;\n    r += (P.pb[q] + (255 - P.pb[q]) * wt - r) * m;\n    g += (P.pb[q + 1] + (255 - P.pb[q + 1]) * wt - g) * m;\n    bl += (P.pb[q + 2] + (255 - P.pb[q + 2]) * wt - bl) * m;\n    r += (LOSE[0] - r) * b + (WIN[0] - r) * a;\n    g += (LOSE[1] - g) * b + (WIN[1] - g) * a;\n    bl += (LOSE[2] - bl) * b + (WIN[2] - bl) * a;\n    const k = cl(S + 1.6 - abs(X - ux) - abs(Y - vy), 0, 1.6) / 1.6;\n    if (k > 0) (r += (255 - r) * k), (g += (255 - g) * k), (bl += (255 - bl) * k);\n    display.setPixel(X, Y, r * e, g * e, bl * e);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half."},{"name":"Zoom","min":1,"max":4,"about":"LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays."},{"name":"Glow","min":0,"max":1,"about":"How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds."}],"start":[0,2,1,0.06],"measures":{"motion":0.0944,"detail":0.0878,"edges":0.5187,"complexity":1.051,"coverage":0.875,"colour":0.3599,"drift":0.0676},"knobResponse":[0.2558,0.0431,0.2303,0.1714]},{"slug":"zen-garden","title":"Zen Garden","family":"line","round":18,"note":"곧장 내려다본 마른 돌 정원이에요. 갈퀴 자국이 이끼 두른 돌 둘레에서 고리로 휘고, 갈퀴가 15줄 띠씩 줄을 다시 그으며 떨어진 단풍잎을 거둬 가요. K1 을 돌리면 아침 해가 저녁 해로 옮겨 가며 돌 그림자와 고리의 밝은 쪽이 따라 돌아요.","idea":"A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","layer":{"id":"layer-zen-garden","type":"code","name":"zen-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds."},{"name":"Stones","min":3,"max":5,"about":"Three, four or five stone groups, each in its moss collar with two or three rings raked round it."},{"name":"Wind","min":0,"max":1,"about":"Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves."}],"start":[0,2,3,0.06],"measures":{"motion":0.0392,"detail":0.2481,"edges":0.4637,"complexity":1.6255,"coverage":0.96,"colour":0.1203,"drift":0.0759},"knobResponse":[0.1756,0.245,0.2327,0.2481]},{"slug":"zeta-loops","title":"Zeta Loops","family":"line","round":29,"note":"리만 제타 함수를 임계선 위에서 t 를 올리며 그려요. 실수축이 패널 위로 서 있고, 밝은 머리가 고리를 돌다가 영점마다 원점을 정확히 지나며 원점에서 고리가 퍼져요. K3 으로 임계선에서 벗어나면 고리가 원점을 비껴가고, K1 을 누르면 머리가 다음 영점까지 달려가요.","idea":"A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.","buttons":"K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.","code":"// ===== Patternflow pattern =====\n// Title:   Zeta Loops\n// Family:  line\n// Idea:    A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Riemann zeta function on the critical line (Bernhard Riemann, 1859), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1\n//\n// Knob 1: Hue. Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail.\n// Knob 2: Speed. How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower.\n// Knob 3: Sigma. How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn.\n// Knob 4: Trail. How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin.\n// Buttons: K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, sqrt, hypot, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The plane turned a quarter turn: the real axis runs up the panel through\n// column OX, the imaginary axis runs left, the origin sits OY rows down.\nconst OX = 32, OY = 92;\n// LEDs to one unit at t. The loops widen with t faster than the panel does,\n// so the view backs off a little as t climbs: 26 at the start, 15 by\n// t = 118, which keeps most of each loop inside the side walls and still\n// lets the later loops come out bigger.\nconst scaleAt = (t) => 26 / (1 + t / 70) ** 0.55;\n// t runs from 0 to TEND and starts again. Samples are DT apart in t.\nconst TEND = 118, DT = 0.008, CAP = 16384;\n\n// Euler-Maclaurin summation: the first N-1 terms of the Dirichlet series,\n// the integral of the tail, and six Bernoulli corrections. With N past\n// t / 2 pi the corrections shrink fast, and ten more terms make it good to\n// many digits at the t this pattern reaches.\nconst NMAX = 64;\nconst LN = new Float64Array(NMAX + 1).map((_, n) => (n ? log(n) : 0));\nconst BF = [1 / 12, -1 / 720, 1 / 30240, -1 / 1209600, 1 / 47900160, -691 / 1307674368000];\nfunction zeta(sr, si, out) {\n  const n0 = min(NMAX - 1, floor(abs(si) / (2 * PI)) + 10);\n  let zr = 0, zi = 0;\n  for (let n = 1; n \u003c n0; n++) {\n    const m = exp(-sr * LN[n]), a = -si * LN[n];\n    zr += m * cos(a);\n    zi += m * sin(a);\n  }\n  // N^-s, then N^(1-s) / (s - 1) and half of N^-s.\n  const L = LN[n0], m = exp(-sr * L), a = -si * L, pr = m * cos(a), pi = m * sin(a);\n  const dr = sr - 1, d2 = dr * dr + si * si, nr = n0 * pr, ni = n0 * pi;\n  zr += (nr * dr + ni * si) / d2 + pr / 2;\n  zi += (ni * dr - nr * si) / d2 + pi / 2;\n  // B2k / (2k)! times s(s+1)...(s+2k-2) times N^(-s-2k+1).\n  let cr = pr / n0, ci = pi / n0, fr = sr, fi = si;\n  for (let k = 0; k \u003c 6; k++) {\n    const c = BF[k];\n    zr += c * (fr * cr - fi * ci);\n    zi += c * (fr * ci + fi * cr);\n    const a1 = sr + 2 * k + 1, a2 = sr + 2 * k + 2;\n    const gr = fr * a1 - fi * si, gi = fr * si + fi * a1;\n    fr = gr * a2 - gi * si;\n    fi = gr * si + gi * a2;\n    cr /= n0 * n0;\n    ci /= n0 * n0;\n  }\n  out[0] = zr;\n  out[1] = zi;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, acc: 0, clock: 0, sc: 26, sig: 0, n: 0, head: -1, race: 0,\n    // Each sample: t, the point, sigma it was taken at, the clock, and 1 when\n    // the curve breaks before it (a restart).\n    T: new Float64Array(CAP), X: new Float32Array(CAP), Y: new Float32Array(CAP), S: new Float64Array(CAP),\n    C: new Float32Array(CAP), B: new Uint8Array(CAP),\n    fix: -1, fixN: 0, dPrev: 9, falling: 0, flashes: [], hue: 0, life: 3, z: new Float64Array(2),\n    R: new Float32Array(N), G: new Float32Array(N), Bl: new Float32Array(N), col: new Float32Array(3),\n    sR: new Float32Array(N), sG: new Float32Array(N), sB: new Float32Array(N), tmp: new Float32Array(N),\n  });\n  // The first frame already shows the curve on its way to the first zero at\n  // t = 14.13: eight seconds of drawing at half the opening speed.\n  for (let i = 0; i \u003c 240; i++) step(P, 1 / 30, 1, 0, 0.06);\n}\n\nfunction push(P, brk) {\n  zeta(0.5 + P.sig, P.t, P.z);\n  const i = (P.head = (P.head + 1) % CAP);\n  P.T[i] = P.t;\n  P.X[i] = P.z[0];\n  P.Y[i] = P.z[1];\n  P.S[i] = P.sig;\n  P.C[i] = P.clock;\n  P.B[i] = brk;\n  P.n = min(P.n + 1, CAP);\n  // A pass by the origin is the moment the distance stops falling. Its\n  // flash is as bright as the pass is close: full on the critical line, a\n  // glimmer a few LEDs off it.\n  const d = hypot(P.z[0], P.z[1]);\n  if (!brk && d > P.dPrev && P.falling && P.dPrev \u003c 0.6) {\n    const j = (i + CAP - 1) % CAP, k = (i + CAP - 2) % CAP;\n    const miss = segDist(P.X[k], P.Y[k], P.X[j], P.Y[j], P.X[i], P.Y[i]) * P.sc;\n    const s = exp(-(miss * miss) / 3);\n    if (s > 0.05) P.flashes.push([P.clock, s]);\n    if (P.race && P.t > P.race) P.race = 0;\n  }\n  P.falling = d \u003c P.dPrev ? 1 : 0;\n  P.dPrev = brk ? 9 : d;\n}\n\n// How close the two segments a-b-c come to the origin.\nfunction segDist(ax, ay, bx, by, cx, cy) {\n  const one = (px, py, qx, qy) => {\n    const dx = qx - px, dy = qy - py, l = dx * dx + dy * dy, u = l > 0 ? cl(-(px * dx + py * dy) / l, 0, 1) : 0;\n    return hypot(px + u * dx, py + u * dy);\n  };\n  return min(one(ax, ay, bx, by), one(bx, by, cx, cy));\n}\n\nfunction step(P, d, speed, sig, trail) {\n  P.clock += d;\n  P.life = 0.8 + 29.2 * trail ** 0.4;\n  P.sc += (scaleAt(P.t) - P.sc) * min(1, d * 1.5);\n  if (abs(sig - P.sig) > 0.002) (P.sig = sig), (P.fix = P.head), (P.fixN = P.n);\n  // t climbs a little slower as it rises, so the head's speed on the panel\n  // grows only slowly while the loops widen and the zeros crowd closer.\n  const rate = (speed * 1.55 * (P.race ? 10 : 1)) / (1 + P.t / 90);\n  P.acc += rate * d;\n  let brk = P.head \u003c 0 ? 1 : 0;\n  for (; P.acc >= DT; P.acc -= DT) {\n    P.t += DT;\n    if (P.t > TEND) (P.t = 0), (brk = 1), (P.race = 0);\n    push(P, brk);\n    brk = 0;\n  }\n  // The trail redraws itself at a new Sigma, newest first, a few hundred\n  // samples a frame.\n  if (P.fix >= 0) {\n    for (let c = 0; c \u003c 500 && P.fix >= 0; c++) {\n      const i = P.fix;\n      if (P.S[i] !== P.sig) {\n        zeta(0.5 + P.sig, P.T[i], P.z);\n        P.X[i] = P.z[0];\n        P.Y[i] = P.z[1];\n        P.S[i] = P.sig;\n      }\n      const j = (i + CAP - 1) % CAP;\n      P.fix = --P.fixN > 0 && P.clock - P.C[j] \u003c P.life ? j : -1;\n    }\n  }\n  P.flashes = P.flashes.filter((f) => P.clock - f[0] \u003c 1.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const b = input.btnPressed || [];\n  // The race runs past a zero the head is about to reach anyway and stops\n  // at the one after.\n  if (b[0]) P.race = P.t + 1;\n  if (b[1]) (P.t = TEND + 1), (P.race = 0);\n  step(P, d, cl(k[1], 0.2, 3), cl(k[2], -0.25, 0.25), cl(k[3], 0, 1));\n}\n\n// A soft dot of light, kept to the brightest of what is already there: full\n// on the LED under it, fading to nothing 1.3 LEDs out, so the curve draws\n// as a line a little under two LEDs wide.\nfunction dot(P, x, y, r, g, b) {\n  const cx = floor(x), cy = floor(y);\n  for (let yy = cy - 1; yy \u003c= cy + 1; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy + 0.5 - y;\n    for (let xx = cx - 1; xx \u003c= cx + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x, w = 1.3 - sqrt(dx * dx + dy * dy);\n      if (w \u003c= 0) continue;\n      const p = yy * W + xx, v = w > 1 ? 1 : w;\n      if (P.R[p] \u003c r * v) P.R[p] = r * v;\n      if (P.G[p] \u003c g * v) P.G[p] = g * v;\n      if (P.Bl[p] \u003c b * v) P.Bl[p] = b * v;\n    }\n  }\n}\n// Light added on top of the curve and its glow.\nconst add = (P, x, y, r, g, b) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  P.sR[p] += r;\n  P.sG[p] += g;\n  P.sB[p] += b;\n};\n\n// Two passes of a five-wide box along rows, then along columns, each a\n// running sum; the panel's edges count as dark.\nconst GLOW = 0.6;\nfunction box(a, o, step, n, out) {\n  let v = a[o] + a[o + step] + a[o + 2 * step];\n  for (let i = 0; i \u003c n; i++) {\n    out[o + i * step] = v / 5;\n    if (i + 3 \u003c n) v += a[o + (i + 3) * step];\n    if (i >= 2) v -= a[o + (i - 2) * step];\n  }\n}\nfunction blur(src, tmp, dst) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0; y \u003c H; y++) box(pass ? dst : src, y * W, 1, W, tmp);\n    for (let x = 0; x \u003c W; x++) box(tmp, x, W, H, dst);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const R = P.R, G = P.G, B = P.Bl, col = P.col;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The curve, oldest first, each segment walked in steps under half an LED.\n  const life = P.life;\n  let n = 0;\n  while (n \u003c P.n && P.clock - P.C[(P.head + CAP - n) % CAP] \u003c life) n++;\n  let i = (P.head + CAP - n + 1) % CAP;\n  for (let c = 0, px = 0, py = 0, ok = 0; c \u003c n; c++, i = (i + 1) % CAP) {\n    const age = P.clock - P.C[i];\n    const x = OX + 0.5 - P.Y[i] * P.sc, y = OY + 0.5 - P.X[i] * P.sc;\n    const f = 1 - age / life, v = sqrt(f);\n    // Young curve is pale, then the hue, then a deeper tail.\n    hsv(P.hue + 0.5 + 0.18 * (1 - f), 0.6 + 0.35 * min(1, (1 - f) * 4), v, col);\n    if (ok && !P.B[i]) {\n      const L = hypot(x - px, y - py), m = max(1, Math.ceil(L / 0.5));\n      for (let s = 1; s \u003c= m; s++) dot(P, px + ((x - px) * s) / m, py + ((y - py) * s) / m, col[0] * 255, col[1] * 255, col[2] * 255);\n    } else dot(P, x, y, col[0] * 255, col[1] * 255, col[2] * 255);\n    ok = 1;\n    px = x;\n    py = y;\n  }\n  // The curve glows: a soft blur of its own light, two box passes each\n  // way, laid under it. On the panel a bare 1-LED line looks thin.\n  const sR = P.sR, sG = P.sG, sB = P.sB;\n  blur(R, P.tmp, sR);\n  blur(G, P.tmp, sG);\n  blur(B, P.tmp, sB);\n  for (let p = 0; p \u003c N; p++) (sR[p] = R[p] + sR[p] * GLOW), (sG[p] = G[p] + sG[p] * GLOW), (sB[p] = B[p] + sB[p] * GLOW);\n  // The axes, dim: the real axis up the panel with a tick at each whole\n  // number, and a short stub of the imaginary axis through the origin.\n  for (let y = 0; y \u003c H; y++) {\n    const re = (OY - y) / P.sc, tick = abs(re - Math.round(re)) * P.sc \u003c 0.5;\n    add(P, OX, y, 14, 14, 18);\n    if (tick) for (let x = -2; x \u003c= 2; x++) if (x) add(P, OX + x, y, 16, 16, 20);\n  }\n  for (let x = OX - 6; x \u003c= OX + 6; x++) if (x !== OX) add(P, x, OY, 12, 12, 16);\n  // Each pass through the origin: the origin flares and a ring opens, in a\n  // pale rose that stays clear of the curve's colour and never browns.\n  hsv(P.hue + 0.92, 0.45, 1, col);\n  const fr = col[0] * 255, fg = col[1] * 255, fb = col[2] * 255;\n  for (const [c0, s] of P.flashes) {\n    const a = P.clock - c0, rad = 1.5 + a * 34, v = s * exp(-a * 2);\n    for (let y = max(0, floor(OY - rad - 2)); y \u003c= min(H - 1, OY + rad + 2); y++)\n      for (let x = max(0, floor(OX - rad - 2)); x \u003c= min(W - 1, OX + rad + 2); x++) {\n        const d = hypot(x - OX, y - OY), w = max(0, 1 - abs(d - rad) / 1.1) + max(0, 1 - d / 3.5) * exp(-a * 3) * 1.6;\n        if (w > 0) add(P, x, y, fr * v * w, fg * v * w, fb * v * w);\n      }\n  }\n  add(P, OX, OY, 40, 40, 44);\n  // The head: white with a small glow.\n  if (P.n) {\n    const h = P.head, hx = OX + 0.5 - P.Y[h] * P.sc, hy = OY + 0.5 - P.X[h] * P.sc;\n    for (let y = floor(hy) - 2; y \u003c= floor(hy) + 2; y++)\n      for (let x = floor(hx) - 2; x \u003c= floor(hx) + 2; x++) {\n        const d = hypot(x + 0.5 - hx, y + 0.5 - hy), w = exp(-d * d * 0.9);\n        add(P, x, y, 255 * w, 250 * w, 235 * w);\n      }\n  }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, sR[p]), min(255, sG[p]), min(255, sB[p]));\n}\n","layer":{"id":"layer-zeta-loops","type":"code","name":"zeta-loops","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Zeta Loops\n// Family:  line\n// Idea:    A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Riemann zeta function on the critical line (Bernhard Riemann, 1859), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1\n//\n// Knob 1: Hue. Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail.\n// Knob 2: Speed. How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower.\n// Knob 3: Sigma. How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn.\n// Knob 4: Trail. How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin.\n// Buttons: K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, sqrt, hypot, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The plane turned a quarter turn: the real axis runs up the panel through\n// column OX, the imaginary axis runs left, the origin sits OY rows down.\nconst OX = 32, OY = 92;\n// LEDs to one unit at t. The loops widen with t faster than the panel does,\n// so the view backs off a little as t climbs: 26 at the start, 15 by\n// t = 118, which keeps most of each loop inside the side walls and still\n// lets the later loops come out bigger.\nconst scaleAt = (t) => 26 / (1 + t / 70) ** 0.55;\n// t runs from 0 to TEND and starts again. Samples are DT apart in t.\nconst TEND = 118, DT = 0.008, CAP = 16384;\n\n// Euler-Maclaurin summation: the first N-1 terms of the Dirichlet series,\n// the integral of the tail, and six Bernoulli corrections. With N past\n// t / 2 pi the corrections shrink fast, and ten more terms make it good to\n// many digits at the t this pattern reaches.\nconst NMAX = 64;\nconst LN = new Float64Array(NMAX + 1).map((_, n) => (n ? log(n) : 0));\nconst BF = [1 / 12, -1 / 720, 1 / 30240, -1 / 1209600, 1 / 47900160, -691 / 1307674368000];\nfunction zeta(sr, si, out) {\n  const n0 = min(NMAX - 1, floor(abs(si) / (2 * PI)) + 10);\n  let zr = 0, zi = 0;\n  for (let n = 1; n \u003c n0; n++) {\n    const m = exp(-sr * LN[n]), a = -si * LN[n];\n    zr += m * cos(a);\n    zi += m * sin(a);\n  }\n  // N^-s, then N^(1-s) / (s - 1) and half of N^-s.\n  const L = LN[n0], m = exp(-sr * L), a = -si * L, pr = m * cos(a), pi = m * sin(a);\n  const dr = sr - 1, d2 = dr * dr + si * si, nr = n0 * pr, ni = n0 * pi;\n  zr += (nr * dr + ni * si) / d2 + pr / 2;\n  zi += (ni * dr - nr * si) / d2 + pi / 2;\n  // B2k / (2k)! times s(s+1)...(s+2k-2) times N^(-s-2k+1).\n  let cr = pr / n0, ci = pi / n0, fr = sr, fi = si;\n  for (let k = 0; k \u003c 6; k++) {\n    const c = BF[k];\n    zr += c * (fr * cr - fi * ci);\n    zi += c * (fr * ci + fi * cr);\n    const a1 = sr + 2 * k + 1, a2 = sr + 2 * k + 2;\n    const gr = fr * a1 - fi * si, gi = fr * si + fi * a1;\n    fr = gr * a2 - gi * si;\n    fi = gr * si + gi * a2;\n    cr /= n0 * n0;\n    ci /= n0 * n0;\n  }\n  out[0] = zr;\n  out[1] = zi;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, acc: 0, clock: 0, sc: 26, sig: 0, n: 0, head: -1, race: 0,\n    // Each sample: t, the point, sigma it was taken at, the clock, and 1 when\n    // the curve breaks before it (a restart).\n    T: new Float64Array(CAP), X: new Float32Array(CAP), Y: new Float32Array(CAP), S: new Float64Array(CAP),\n    C: new Float32Array(CAP), B: new Uint8Array(CAP),\n    fix: -1, fixN: 0, dPrev: 9, falling: 0, flashes: [], hue: 0, life: 3, z: new Float64Array(2),\n    R: new Float32Array(N), G: new Float32Array(N), Bl: new Float32Array(N), col: new Float32Array(3),\n    sR: new Float32Array(N), sG: new Float32Array(N), sB: new Float32Array(N), tmp: new Float32Array(N),\n  });\n  // The first frame already shows the curve on its way to the first zero at\n  // t = 14.13: eight seconds of drawing at half the opening speed.\n  for (let i = 0; i \u003c 240; i++) step(P, 1 / 30, 1, 0, 0.06);\n}\n\nfunction push(P, brk) {\n  zeta(0.5 + P.sig, P.t, P.z);\n  const i = (P.head = (P.head + 1) % CAP);\n  P.T[i] = P.t;\n  P.X[i] = P.z[0];\n  P.Y[i] = P.z[1];\n  P.S[i] = P.sig;\n  P.C[i] = P.clock;\n  P.B[i] = brk;\n  P.n = min(P.n + 1, CAP);\n  // A pass by the origin is the moment the distance stops falling. Its\n  // flash is as bright as the pass is close: full on the critical line, a\n  // glimmer a few LEDs off it.\n  const d = hypot(P.z[0], P.z[1]);\n  if (!brk && d > P.dPrev && P.falling && P.dPrev \u003c 0.6) {\n    const j = (i + CAP - 1) % CAP, k = (i + CAP - 2) % CAP;\n    const miss = segDist(P.X[k], P.Y[k], P.X[j], P.Y[j], P.X[i], P.Y[i]) * P.sc;\n    const s = exp(-(miss * miss) / 3);\n    if (s > 0.05) P.flashes.push([P.clock, s]);\n    if (P.race && P.t > P.race) P.race = 0;\n  }\n  P.falling = d \u003c P.dPrev ? 1 : 0;\n  P.dPrev = brk ? 9 : d;\n}\n\n// How close the two segments a-b-c come to the origin.\nfunction segDist(ax, ay, bx, by, cx, cy) {\n  const one = (px, py, qx, qy) => {\n    const dx = qx - px, dy = qy - py, l = dx * dx + dy * dy, u = l > 0 ? cl(-(px * dx + py * dy) / l, 0, 1) : 0;\n    return hypot(px + u * dx, py + u * dy);\n  };\n  return min(one(ax, ay, bx, by), one(bx, by, cx, cy));\n}\n\nfunction step(P, d, speed, sig, trail) {\n  P.clock += d;\n  P.life = 0.8 + 29.2 * trail ** 0.4;\n  P.sc += (scaleAt(P.t) - P.sc) * min(1, d * 1.5);\n  if (abs(sig - P.sig) > 0.002) (P.sig = sig), (P.fix = P.head), (P.fixN = P.n);\n  // t climbs a little slower as it rises, so the head's speed on the panel\n  // grows only slowly while the loops widen and the zeros crowd closer.\n  const rate = (speed * 1.55 * (P.race ? 10 : 1)) / (1 + P.t / 90);\n  P.acc += rate * d;\n  let brk = P.head \u003c 0 ? 1 : 0;\n  for (; P.acc >= DT; P.acc -= DT) {\n    P.t += DT;\n    if (P.t > TEND) (P.t = 0), (brk = 1), (P.race = 0);\n    push(P, brk);\n    brk = 0;\n  }\n  // The trail redraws itself at a new Sigma, newest first, a few hundred\n  // samples a frame.\n  if (P.fix >= 0) {\n    for (let c = 0; c \u003c 500 && P.fix >= 0; c++) {\n      const i = P.fix;\n      if (P.S[i] !== P.sig) {\n        zeta(0.5 + P.sig, P.T[i], P.z);\n        P.X[i] = P.z[0];\n        P.Y[i] = P.z[1];\n        P.S[i] = P.sig;\n      }\n      const j = (i + CAP - 1) % CAP;\n      P.fix = --P.fixN > 0 && P.clock - P.C[j] \u003c P.life ? j : -1;\n    }\n  }\n  P.flashes = P.flashes.filter((f) => P.clock - f[0] \u003c 1.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const b = input.btnPressed || [];\n  // The race runs past a zero the head is about to reach anyway and stops\n  // at the one after.\n  if (b[0]) P.race = P.t + 1;\n  if (b[1]) (P.t = TEND + 1), (P.race = 0);\n  step(P, d, cl(k[1], 0.2, 3), cl(k[2], -0.25, 0.25), cl(k[3], 0, 1));\n}\n\n// A soft dot of light, kept to the brightest of what is already there: full\n// on the LED under it, fading to nothing 1.3 LEDs out, so the curve draws\n// as a line a little under two LEDs wide.\nfunction dot(P, x, y, r, g, b) {\n  const cx = floor(x), cy = floor(y);\n  for (let yy = cy - 1; yy \u003c= cy + 1; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy + 0.5 - y;\n    for (let xx = cx - 1; xx \u003c= cx + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x, w = 1.3 - sqrt(dx * dx + dy * dy);\n      if (w \u003c= 0) continue;\n      const p = yy * W + xx, v = w > 1 ? 1 : w;\n      if (P.R[p] \u003c r * v) P.R[p] = r * v;\n      if (P.G[p] \u003c g * v) P.G[p] = g * v;\n      if (P.Bl[p] \u003c b * v) P.Bl[p] = b * v;\n    }\n  }\n}\n// Light added on top of the curve and its glow.\nconst add = (P, x, y, r, g, b) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  P.sR[p] += r;\n  P.sG[p] += g;\n  P.sB[p] += b;\n};\n\n// Two passes of a five-wide box along rows, then along columns, each a\n// running sum; the panel's edges count as dark.\nconst GLOW = 0.6;\nfunction box(a, o, step, n, out) {\n  let v = a[o] + a[o + step] + a[o + 2 * step];\n  for (let i = 0; i \u003c n; i++) {\n    out[o + i * step] = v / 5;\n    if (i + 3 \u003c n) v += a[o + (i + 3) * step];\n    if (i >= 2) v -= a[o + (i - 2) * step];\n  }\n}\nfunction blur(src, tmp, dst) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0; y \u003c H; y++) box(pass ? dst : src, y * W, 1, W, tmp);\n    for (let x = 0; x \u003c W; x++) box(tmp, x, W, H, dst);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const R = P.R, G = P.G, B = P.Bl, col = P.col;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The curve, oldest first, each segment walked in steps under half an LED.\n  const life = P.life;\n  let n = 0;\n  while (n \u003c P.n && P.clock - P.C[(P.head + CAP - n) % CAP] \u003c life) n++;\n  let i = (P.head + CAP - n + 1) % CAP;\n  for (let c = 0, px = 0, py = 0, ok = 0; c \u003c n; c++, i = (i + 1) % CAP) {\n    const age = P.clock - P.C[i];\n    const x = OX + 0.5 - P.Y[i] * P.sc, y = OY + 0.5 - P.X[i] * P.sc;\n    const f = 1 - age / life, v = sqrt(f);\n    // Young curve is pale, then the hue, then a deeper tail.\n    hsv(P.hue + 0.5 + 0.18 * (1 - f), 0.6 + 0.35 * min(1, (1 - f) * 4), v, col);\n    if (ok && !P.B[i]) {\n      const L = hypot(x - px, y - py), m = max(1, Math.ceil(L / 0.5));\n      for (let s = 1; s \u003c= m; s++) dot(P, px + ((x - px) * s) / m, py + ((y - py) * s) / m, col[0] * 255, col[1] * 255, col[2] * 255);\n    } else dot(P, x, y, col[0] * 255, col[1] * 255, col[2] * 255);\n    ok = 1;\n    px = x;\n    py = y;\n  }\n  // The curve glows: a soft blur of its own light, two box passes each\n  // way, laid under it. On the panel a bare 1-LED line looks thin.\n  const sR = P.sR, sG = P.sG, sB = P.sB;\n  blur(R, P.tmp, sR);\n  blur(G, P.tmp, sG);\n  blur(B, P.tmp, sB);\n  for (let p = 0; p \u003c N; p++) (sR[p] = R[p] + sR[p] * GLOW), (sG[p] = G[p] + sG[p] * GLOW), (sB[p] = B[p] + sB[p] * GLOW);\n  // The axes, dim: the real axis up the panel with a tick at each whole\n  // number, and a short stub of the imaginary axis through the origin.\n  for (let y = 0; y \u003c H; y++) {\n    const re = (OY - y) / P.sc, tick = abs(re - Math.round(re)) * P.sc \u003c 0.5;\n    add(P, OX, y, 14, 14, 18);\n    if (tick) for (let x = -2; x \u003c= 2; x++) if (x) add(P, OX + x, y, 16, 16, 20);\n  }\n  for (let x = OX - 6; x \u003c= OX + 6; x++) if (x !== OX) add(P, x, OY, 12, 12, 16);\n  // Each pass through the origin: the origin flares and a ring opens, in a\n  // pale rose that stays clear of the curve's colour and never browns.\n  hsv(P.hue + 0.92, 0.45, 1, col);\n  const fr = col[0] * 255, fg = col[1] * 255, fb = col[2] * 255;\n  for (const [c0, s] of P.flashes) {\n    const a = P.clock - c0, rad = 1.5 + a * 34, v = s * exp(-a * 2);\n    for (let y = max(0, floor(OY - rad - 2)); y \u003c= min(H - 1, OY + rad + 2); y++)\n      for (let x = max(0, floor(OX - rad - 2)); x \u003c= min(W - 1, OX + rad + 2); x++) {\n        const d = hypot(x - OX, y - OY), w = max(0, 1 - abs(d - rad) / 1.1) + max(0, 1 - d / 3.5) * exp(-a * 3) * 1.6;\n        if (w > 0) add(P, x, y, fr * v * w, fg * v * w, fb * v * w);\n      }\n  }\n  add(P, OX, OY, 40, 40, 44);\n  // The head: white with a small glow.\n  if (P.n) {\n    const h = P.head, hx = OX + 0.5 - P.Y[h] * P.sc, hy = OY + 0.5 - P.X[h] * P.sc;\n    for (let y = floor(hy) - 2; y \u003c= floor(hy) + 2; y++)\n      for (let x = floor(hx) - 2; x \u003c= floor(hx) + 2; x++) {\n        const d = hypot(x + 0.5 - hx, y + 0.5 - hy), w = exp(-d * d * 0.9);\n        add(P, x, y, 255 * w, 250 * w, 235 * w);\n      }\n  }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, sR[p]), min(255, sG[p]), min(255, sB[p]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail."},{"name":"Speed","min":0.2,"max":3,"about":"How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower."},{"name":"Sigma","min":-0.25,"max":0.25,"about":"How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn."},{"name":"Trail","min":0,"max":1,"about":"How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin."}],"start":[0,2,0,0.06],"measures":{"motion":0.1356,"detail":0.0457,"edges":0.4182,"complexity":0.8175,"coverage":0.1691,"colour":0.1955,"drift":0.0901},"knobResponse":[0.0373,0.0539,0.0648,0.0438]}],"families":{"algo":{"label":"알고리즘","color":"#e0c060"},"automata":{"label":"셀룰러 오토마타","color":"#9be15d"},"bird":{"label":"새","color":"#778800"},"body":{"label":"몸","color":"#bb5566"},"celestial":{"label":"천체","color":"#ffffaa"},"cells":{"label":"보로노이·셀","color":"#5fd0d0"},"chemistry":{"label":"화학·실험","color":"#00bb00"},"circuit":{"label":"전자 회로","color":"#2e7d32"},"city":{"label":"도시","color":"#22ff00"},"construction":{"label":"공사·건설","color":"#ffee00"},"cosmetic":{"label":"화장품 팝업","color":"#f2c6c2"},"data":{"label":"데이터 그림","color":"#7fe08a"},"fair":{"label":"놀이공원","color":"#ffffff"},"farm":{"label":"농사·밭","color":"#449911"},"film":{"label":"필름·영화","color":"#ff0000"},"flight":{"label":"비행","color":"#9944ee"},"fractal":{"label":"프랙탈","color":"#a3a0ff"},"fungi":{"label":"버섯·균사","color":"#00ff88"},"geometry":{"label":"기하·대칭","color":"#c77dff"},"glass":{"label":"유리","color":"#b0002a"},"glitch":{"label":"글리치","color":"#b0b8c8"},"growth":{"label":"자라남","color":"#d4c094"},"insect":{"label":"곤충","color":"#b4e61e"},"kitchen":{"label":"부엌","color":"#ff5500"},"light":{"label":"빛","color":"#7ef0d0"},"line":{"label":"선·궤적","color":"#ff7a45"},"machine":{"label":"기계·톱니","color":"#4a2cff"},"mammal":{"label":"짐승","color":"#998844"},"microbe":{"label":"미생물","color":"#aa00aa"},"mineral":{"label":"광물·결정","color":"#886688"},"music":{"label":"음악·악기","color":"#a0705a"},"noise":{"label":"노이즈·흐름","color":"#5ec8ff"},"number":{"label":"수론","color":"#00aaff"},"ocean":{"label":"바다","color":"#1f7fb8"},"paper":{"label":"종이","color":"#996600"},"particle":{"label":"입자","color":"#ffb02e"},"physics":{"label":"물리·스프링","color":"#ff9db0"},"pixel":{"label":"픽셀 아트","color":"#ffd166"},"polar":{"label":"얼음·극지","color":"#00ffff"},"pottery":{"label":"도자기","color":"#b05030"},"print":{"label":"망점·인쇄","color":"#f0a0e0"},"rail":{"label":"철도","color":"#00bb66"},"rhythm":{"label":"리듬·펄스","color":"#ff4d4d"},"sim":{"label":"시뮬레이션","color":"#3fe0a8"},"space":{"label":"공간·원근","color":"#e8e05a"},"sport":{"label":"운동·경기","color":"#337777"},"stage":{"label":"무대·공연","color":"#ff0066"},"textile":{"label":"직물·짜임","color":"#e04ad8"},"time":{"label":"시계·시간","color":"#ff8f5a"},"topology":{"label":"위상·매듭","color":"#80ff40"},"toy":{"label":"장난감","color":"#dd11ff"},"type":{"label":"글자","color":"#ff5fa2"},"volcano":{"label":"화산","color":"#bb2200"},"wave":{"label":"물결·간섭","color":"#4f7dff"},"weather":{"label":"날씨·자연","color":"#8fc0ff"}}}</script>
+<script id="study-data" type="application/json">{"patterns":[{"slug":"abyss","title":"Abyss","family":"ocean","round":16,"note":"물결 밑 햇빛층에서 심해 바닥까지 바다 한 기둥이 128줄에 서요. 빛내림과 정어리 떼 아래로 관해파리와 샛비늘치, 아귀의 미끼 불빛을 지나 잠수정이 등을 켜고 열수 분출공까지 내려갔다 올라와요. K1 을 누르면 죽은 고래가 기둥을 다 가라앉아 바닥에 뼈로 남아요.","idea":"One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.","buttons":"K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.","code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","layer":{"id":"layer-abyss","type":"code","name":"abyss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Night","min":0,"max":1,"about":"Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace."},{"name":"Current","min":-1,"max":1,"about":"A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream."},{"name":"Bloom","min":0,"max":1,"about":"From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens."}],"start":[0,2,0,0.06],"measures":{"motion":0.1244,"detail":0.039,"edges":0.3461,"complexity":1.1983,"coverage":0.6808,"colour":0.2784,"drift":0.0583},"knobResponse":[0.1135,0.059,0.0565,0.0734]},{"slug":"agate","title":"Agate","family":"mineral","round":20,"note":"라이트박스에 올린 블루 레이스 마노 단면이 패널을 거의 다 채우고, 1 LED 남짓한 하늘색 띠와 젖빛 띠가 갈색 껍질을 따라 겹겹이 들어가 석영 결정이 반짝이는 빈 속에 닿아요. 톱이 천천히 더 깊이 썰어 들어가며 띠가 흐르고, K1 을 누르면 날이 라이트박스를 가로지르며 새 마노 덩어리의 단면이 깔려요.","idea":"A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.","buttons":"K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.","code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-agate","type":"code","name":"agate","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stain","min":0,"max":1,"about":"The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds."},{"name":"Width","min":1,"max":4,"about":"How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands."},{"name":"Light","min":-1,"max":1,"about":"Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own."}],"start":[0,2,1,0.06],"measures":{"motion":0.2044,"detail":0.342,"edges":0.8294,"complexity":2.5192,"coverage":1,"colour":0.128,"drift":0.0573},"knobResponse":[0.1001,0.2798,0.2989,0.0578]},{"slug":"analemma","title":"Analemma","family":"celestial","round":15,"note":"일 년 동안 같은 시각에 찍은 해가 바다 위 하늘에 8자를 그려요. K1 이 시각을 아침에서 저녁까지 돌려 8자를 눕히고, K4 를 올리면 화성의 눈물방울 모양이 돼요.","idea":"A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.","buttons":"K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.","code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-analemma","type":"code","name":"analemma","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":-1,"max":1,"about":"The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings."},{"name":"Speed","min":0.2,"max":3,"about":"Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top."},{"name":"Latitude","min":-1,"max":1,"about":"Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea."},{"name":"Orbit","min":0,"max":1,"about":"The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop."}],"start":[0,2,0,0.06],"measures":{"motion":0.0266,"detail":0.0181,"edges":0.3039,"complexity":1.0442,"coverage":0.9984,"colour":0.1966,"drift":0.0308},"knobResponse":[0.0776,0.085,0.0971,0.0827]},{"slug":"anderson-localization","title":"Anderson Localization","family":"wave","round":38,"note":"위치 에너지가 무작위로 놓인 사슬의 한 자리에 양자 입자를 놓고, 자리를 가로로, 시간을 세로로 그려요. 깨끗한 사슬이라면 점선을 따라 패널 끝까지 벌어졌을 원뿔이 27 LED 너비에서 멈추고, 얼룩진 기둥으로 끝까지 서 있어요. K3 은 무질서를 키워 기둥을 12 LED 까지 좁히고, K1 을 누르면 새 에너지와 새 자리에서 바로 다시 시작해요.","idea":"A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.","buttons":"K1 tap launches now, on a new sample of energies and a new site.","code":"// ===== Patternflow pattern =====\n// Title:   Anderson Localization\n// Family:  wave\n// Idea:    A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Anderson localization (Philip W. Anderson, 1958), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16\n//\n// Knob 1: Hue. Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive.\n// Knob 2: Speed. How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s.\n// Knob 3: Disorder. The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8.\n// Knob 4: Samples. How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over.\n// Buttons: K1 tap launches now, on a new sample of energies and a new site.\n\nconst W = 64, H = 128, NS = 192, OFF = 64, MAXS = 16;\n// Time per row: 0.25 in units of the hopping, so 128 rows hold t = 0 to 32\n// and a clean cone, whose edge runs 2 sites per unit, reaches 32 sites out at\n// row 64. RK4 steps of 0.025, ten to a row.\nconst TROW = 0.25, STEPS = 10, DT = TROW / STEPS;\n// Rows per second at Speed 1.\nconst RATE = 10;\n// Brightness from the probability on a log scale: 1e-3 is dark, 0.4 full.\nconst LMIN = -3, LSPAN = 2.6;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst { floor, min, max, abs, log10, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, dis: 3, ns: 1, begun: false,\n    // u: each sample's site energies over W, uniform in [-1/2, 1/2].\n    u: new Float64Array(MAXS * NS), re: new Float64Array(MAXS * NS), im: new Float64Array(MAXS * NS), done: 0,\n    ya: new Float64Array(NS), yb: new Float64Array(NS), ka: new Float64Array(NS), kb: new Float64Array(NS),\n    sa: new Float64Array(NS), sb: new Float64Array(NS),\n    n0: 96, t: 0, row: 0, prog: 0, hold: 0, norm: 1,\n    rho: new Float32Array(W * H), vt: new Float32Array(W * H), cone: new Uint8Array(W * H), dim: new Float32Array(H),\n    lo: [0, 0, 0], mid: [0, 0, 0], hi: [0, 0, 0], pos: [0, 0, 0], neg: [0, 0, 0],\n  };\n}\n\n// dy/dt for y = re + i im under i dy/dt = H y, H y_n = -(y_n+1 + y_n-1) + V_n y_n,\n// with hard walls past both ends of the chain: d re = H im, d im = -H re.\nfunction deriv(a, b, u, o, Wd, ka, kb) {\n  for (let n = 0; n \u003c NS; n++) {\n    const V = Wd * u[o + n];\n    let ha = V * a[n], hb = V * b[n];\n    if (n > 0) {\n      ha -= a[n - 1];\n      hb -= b[n - 1];\n    }\n    if (n \u003c NS - 1) {\n      ha -= a[n + 1];\n      hb -= b[n + 1];\n    }\n    ka[n] = hb;\n    kb[n] = -ha;\n  }\n}\n\n// One RK4 step of one sample.\nfunction rk4(S, k, h) {\n  const o = k * NS, { re, im, u, ya, yb, ka, kb, sa, sb } = S, Wd = S.dis;\n  for (let n = 0; n \u003c NS; n++) {\n    ya[n] = re[o + n];\n    yb[n] = im[o + n];\n  }\n  // k1\n  const a0 = re.subarray(o, o + NS), b0 = im.subarray(o, o + NS);\n  deriv(a0, b0, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] = ka[n];\n    sb[n] = kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k2\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k3\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + h * ka[n];\n    yb[n] = b0[n] + h * kb[n];\n  }\n  // k4\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    a0[n] += (h / 6) * (sa[n] + ka[n]);\n    b0[n] += (h / 6) * (sb[n] + kb[n]);\n  }\n}\n\n// Put sample k on the launch site and run it up to the time of the run.\nfunction start(S, k) {\n  const o = k * NS;\n  S.re.fill(0, o, o + NS);\n  S.im.fill(0, o, o + NS);\n  S.re[o + S.n0] = 1;\n  const steps = round(S.t / DT);\n  for (let i = 0; i \u003c steps; i++) rk4(S, k, DT);\n}\n\n// A new run: fresh energies for every sample and a new site, picked so the\n// start lies in the middle 40 columns.\nfunction launch(S) {\n  for (let i = 0; i \u003c MAXS * NS; i++) S.u[i] = random() - 0.5;\n  S.n0 = OFF + 12 + floor(random() * 40);\n  S.t = 0;\n  S.row = 0;\n  S.prog = 0;\n  S.hold = 0;\n  for (let k = 0; k \u003c S.ns; k++) start(S, k);\n  S.done = S.ns;\n  // What is left of the run before stays at 40%.\n  S.dim.fill(0.4);\n}\n\n// Write the row for the present time, the samples' probability averaged.\nfunction writeRow(S) {\n  const r = S.row, { re, im, rho, vt, cone, u } = S, ns = S.ns, c0 = S.n0 - OFF, edge = 2 * S.t;\n  let norm = 0;\n  for (let n = 0; n \u003c NS; n++) norm += re[n] * re[n] + im[n] * im[n];\n  S.norm = norm;\n  for (let x = 0; x \u003c W; x++) {\n    const n = OFF + x;\n    let s = 0;\n    for (let k = 0; k \u003c ns; k++) {\n      const i = k * NS + n;\n      s += re[i] * re[i] + im[i] * im[i];\n    }\n    const p = r * W + x;\n    rho[p] = s / ns;\n    // The stripes show the first sample's energies, fainter as more samples\n    // are averaged, since the average has no one landscape.\n    vt[p] = u[n] / ns;\n    // The clean chain's light cone, n0 +- 2t, dotted every other row.\n    const d = abs(abs(x - c0) - edge);\n    cone[p] = r % 2 === 0 && d \u003c 0.5 && r > 0 ? 1 : 0;\n  }\n  S.dim[r] = 1;\n  S.row++;\n}\n\n// Run the present time forward to row r and write each row on the way.\nfunction advanceTo(S, target) {\n  while (S.row \u003c= target && S.row \u003c H) {\n    if (S.row > 0) {\n      for (let i = 0; i \u003c STEPS; i++) for (let k = 0; k \u003c S.ns; k++) rk4(S, k, DT);\n      S.t = S.row * TROW;\n    }\n    writeRow(S);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.dis = cl(k[2], 4, 12);\n  S.ns = round(cl(k[3], 1, MAXS));\n  if (!S.begun) {\n    // Open on a whole run already written, and a new one starting over it.\n    launch(S);\n    advanceTo(S, H - 1);\n    launch(S);\n    S.begun = true;\n  }\n  // Samples turned up in the middle of a run catch up to its time.\n  while (S.done \u003c S.ns) start(S, S.done++);\n  if (S.done > S.ns) S.done = S.ns;\n  if (input.btnPressed && input.btnPressed[0]) launch(S);\n  if (S.row >= H) {\n    S.hold += d * S.speed;\n    // Hold the finished run 1.5 s at Speed 2.\n    if (S.hold > 3) launch(S);\n    return;\n  }\n  S.prog += d * S.speed * RATE;\n  advanceTo(S, floor(S.prog));\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { rho, vt, cone, dim, lo, mid, hi, pos, neg } = S;\n  const h = S.hue + H0;\n  // Orange to yellow on the panel goes brown or olive when dim. Round there\n  // the tails turn toward rose instead of toward yellow, the body is paled\n  // to peach or butter, and everything is lifted.\n  const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.13, 0, 1);\n  hsv(h + 0.09 - 0.19 * warm, 1 - 0.2 * warm, 1, lo);\n  hsv(h, 0.85 - 0.4 * warm, 1, mid);\n  hsv(h - 0.04, 0.18, 1, hi);\n  hsv(h + 0.45, 0.7, 1, pos);\n  hsv(h + 0.3, 0.7, 1, neg);\n  const vlift = 1 + 0.4 * warm, head = S.row, mixOld = 0.5 + 0.4 * warm;\n  for (let y = 0; y \u003c H; y++) {\n    const old = dim[y] \u003c 1, dm = old ? dim[y] + 0.2 * warm : 1;\n    // Two rows of dark under the head, between the new run and the old.\n    const gap = old && y >= head && y \u003c head + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0, g = 0, b = 0;\n      if (!gap) {\n        const L = cl((log10(rho[p] + 1e-12) - LMIN) / LSPAN, 0, 1);\n        if (L > 0) {\n          const v = min(1, (0.1 + 0.9 * L) * vlift);\n          let c0 = lo, c1 = mid, f = L * 2;\n          if (L > 0.5) {\n            c0 = mid;\n            c1 = hi;\n            f = L * 2 - 1;\n          }\n          r = (c0[0] + (c1[0] - c0[0]) * f) * v;\n          g = (c0[1] + (c1[1] - c0[1]) * f) * v;\n          b = (c0[2] + (c1[2] - c0[2]) * f) * v;\n          // The run before is drawn half in the tails' colour, so it sits\n          // back and dims to violet or rose, not to grey or brown.\n          if (old) {\n            r += (lo[0] * v - r) * mixOld;\n            g += (lo[1] * v - g) * mixOld;\n            b += (lo[2] * v - b) * mixOld;\n          }\n        }\n        // The site energies, faint: high sites one tint, low sites another.\n        const e = vt[p], c = e > 0 ? pos : neg, a = 0.16 * abs(e) * 2;\n        r = max(r, c[0] * a);\n        g = max(g, c[1] * a);\n        b = max(b, c[2] * a);\n        if (cone[p]) {\n          r = max(r, 0.32);\n          g = max(g, 0.32);\n          b = max(b, 0.32);\n        }\n        r *= dm;\n        g *= dm;\n        b *= dm;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","layer":{"id":"layer-anderson-localization","type":"code","name":"anderson-localization","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Anderson Localization\n// Family:  wave\n// Idea:    A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Anderson localization (Philip W. Anderson, 1958), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16\n//\n// Knob 1: Hue. Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive.\n// Knob 2: Speed. How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s.\n// Knob 3: Disorder. The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8.\n// Knob 4: Samples. How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over.\n// Buttons: K1 tap launches now, on a new sample of energies and a new site.\n\nconst W = 64, H = 128, NS = 192, OFF = 64, MAXS = 16;\n// Time per row: 0.25 in units of the hopping, so 128 rows hold t = 0 to 32\n// and a clean cone, whose edge runs 2 sites per unit, reaches 32 sites out at\n// row 64. RK4 steps of 0.025, ten to a row.\nconst TROW = 0.25, STEPS = 10, DT = TROW / STEPS;\n// Rows per second at Speed 1.\nconst RATE = 10;\n// Brightness from the probability on a log scale: 1e-3 is dark, 0.4 full.\nconst LMIN = -3, LSPAN = 2.6;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst { floor, min, max, abs, log10, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, dis: 3, ns: 1, begun: false,\n    // u: each sample's site energies over W, uniform in [-1/2, 1/2].\n    u: new Float64Array(MAXS * NS), re: new Float64Array(MAXS * NS), im: new Float64Array(MAXS * NS), done: 0,\n    ya: new Float64Array(NS), yb: new Float64Array(NS), ka: new Float64Array(NS), kb: new Float64Array(NS),\n    sa: new Float64Array(NS), sb: new Float64Array(NS),\n    n0: 96, t: 0, row: 0, prog: 0, hold: 0, norm: 1,\n    rho: new Float32Array(W * H), vt: new Float32Array(W * H), cone: new Uint8Array(W * H), dim: new Float32Array(H),\n    lo: [0, 0, 0], mid: [0, 0, 0], hi: [0, 0, 0], pos: [0, 0, 0], neg: [0, 0, 0],\n  };\n}\n\n// dy/dt for y = re + i im under i dy/dt = H y, H y_n = -(y_n+1 + y_n-1) + V_n y_n,\n// with hard walls past both ends of the chain: d re = H im, d im = -H re.\nfunction deriv(a, b, u, o, Wd, ka, kb) {\n  for (let n = 0; n \u003c NS; n++) {\n    const V = Wd * u[o + n];\n    let ha = V * a[n], hb = V * b[n];\n    if (n > 0) {\n      ha -= a[n - 1];\n      hb -= b[n - 1];\n    }\n    if (n \u003c NS - 1) {\n      ha -= a[n + 1];\n      hb -= b[n + 1];\n    }\n    ka[n] = hb;\n    kb[n] = -ha;\n  }\n}\n\n// One RK4 step of one sample.\nfunction rk4(S, k, h) {\n  const o = k * NS, { re, im, u, ya, yb, ka, kb, sa, sb } = S, Wd = S.dis;\n  for (let n = 0; n \u003c NS; n++) {\n    ya[n] = re[o + n];\n    yb[n] = im[o + n];\n  }\n  // k1\n  const a0 = re.subarray(o, o + NS), b0 = im.subarray(o, o + NS);\n  deriv(a0, b0, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] = ka[n];\n    sb[n] = kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k2\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k3\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + h * ka[n];\n    yb[n] = b0[n] + h * kb[n];\n  }\n  // k4\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    a0[n] += (h / 6) * (sa[n] + ka[n]);\n    b0[n] += (h / 6) * (sb[n] + kb[n]);\n  }\n}\n\n// Put sample k on the launch site and run it up to the time of the run.\nfunction start(S, k) {\n  const o = k * NS;\n  S.re.fill(0, o, o + NS);\n  S.im.fill(0, o, o + NS);\n  S.re[o + S.n0] = 1;\n  const steps = round(S.t / DT);\n  for (let i = 0; i \u003c steps; i++) rk4(S, k, DT);\n}\n\n// A new run: fresh energies for every sample and a new site, picked so the\n// start lies in the middle 40 columns.\nfunction launch(S) {\n  for (let i = 0; i \u003c MAXS * NS; i++) S.u[i] = random() - 0.5;\n  S.n0 = OFF + 12 + floor(random() * 40);\n  S.t = 0;\n  S.row = 0;\n  S.prog = 0;\n  S.hold = 0;\n  for (let k = 0; k \u003c S.ns; k++) start(S, k);\n  S.done = S.ns;\n  // What is left of the run before stays at 40%.\n  S.dim.fill(0.4);\n}\n\n// Write the row for the present time, the samples' probability averaged.\nfunction writeRow(S) {\n  const r = S.row, { re, im, rho, vt, cone, u } = S, ns = S.ns, c0 = S.n0 - OFF, edge = 2 * S.t;\n  let norm = 0;\n  for (let n = 0; n \u003c NS; n++) norm += re[n] * re[n] + im[n] * im[n];\n  S.norm = norm;\n  for (let x = 0; x \u003c W; x++) {\n    const n = OFF + x;\n    let s = 0;\n    for (let k = 0; k \u003c ns; k++) {\n      const i = k * NS + n;\n      s += re[i] * re[i] + im[i] * im[i];\n    }\n    const p = r * W + x;\n    rho[p] = s / ns;\n    // The stripes show the first sample's energies, fainter as more samples\n    // are averaged, since the average has no one landscape.\n    vt[p] = u[n] / ns;\n    // The clean chain's light cone, n0 +- 2t, dotted every other row.\n    const d = abs(abs(x - c0) - edge);\n    cone[p] = r % 2 === 0 && d \u003c 0.5 && r > 0 ? 1 : 0;\n  }\n  S.dim[r] = 1;\n  S.row++;\n}\n\n// Run the present time forward to row r and write each row on the way.\nfunction advanceTo(S, target) {\n  while (S.row \u003c= target && S.row \u003c H) {\n    if (S.row > 0) {\n      for (let i = 0; i \u003c STEPS; i++) for (let k = 0; k \u003c S.ns; k++) rk4(S, k, DT);\n      S.t = S.row * TROW;\n    }\n    writeRow(S);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.dis = cl(k[2], 4, 12);\n  S.ns = round(cl(k[3], 1, MAXS));\n  if (!S.begun) {\n    // Open on a whole run already written, and a new one starting over it.\n    launch(S);\n    advanceTo(S, H - 1);\n    launch(S);\n    S.begun = true;\n  }\n  // Samples turned up in the middle of a run catch up to its time.\n  while (S.done \u003c S.ns) start(S, S.done++);\n  if (S.done > S.ns) S.done = S.ns;\n  if (input.btnPressed && input.btnPressed[0]) launch(S);\n  if (S.row >= H) {\n    S.hold += d * S.speed;\n    // Hold the finished run 1.5 s at Speed 2.\n    if (S.hold > 3) launch(S);\n    return;\n  }\n  S.prog += d * S.speed * RATE;\n  advanceTo(S, floor(S.prog));\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { rho, vt, cone, dim, lo, mid, hi, pos, neg } = S;\n  const h = S.hue + H0;\n  // Orange to yellow on the panel goes brown or olive when dim. Round there\n  // the tails turn toward rose instead of toward yellow, the body is paled\n  // to peach or butter, and everything is lifted.\n  const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.13, 0, 1);\n  hsv(h + 0.09 - 0.19 * warm, 1 - 0.2 * warm, 1, lo);\n  hsv(h, 0.85 - 0.4 * warm, 1, mid);\n  hsv(h - 0.04, 0.18, 1, hi);\n  hsv(h + 0.45, 0.7, 1, pos);\n  hsv(h + 0.3, 0.7, 1, neg);\n  const vlift = 1 + 0.4 * warm, head = S.row, mixOld = 0.5 + 0.4 * warm;\n  for (let y = 0; y \u003c H; y++) {\n    const old = dim[y] \u003c 1, dm = old ? dim[y] + 0.2 * warm : 1;\n    // Two rows of dark under the head, between the new run and the old.\n    const gap = old && y >= head && y \u003c head + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0, g = 0, b = 0;\n      if (!gap) {\n        const L = cl((log10(rho[p] + 1e-12) - LMIN) / LSPAN, 0, 1);\n        if (L > 0) {\n          const v = min(1, (0.1 + 0.9 * L) * vlift);\n          let c0 = lo, c1 = mid, f = L * 2;\n          if (L > 0.5) {\n            c0 = mid;\n            c1 = hi;\n            f = L * 2 - 1;\n          }\n          r = (c0[0] + (c1[0] - c0[0]) * f) * v;\n          g = (c0[1] + (c1[1] - c0[1]) * f) * v;\n          b = (c0[2] + (c1[2] - c0[2]) * f) * v;\n          // The run before is drawn half in the tails' colour, so it sits\n          // back and dims to violet or rose, not to grey or brown.\n          if (old) {\n            r += (lo[0] * v - r) * mixOld;\n            g += (lo[1] * v - g) * mixOld;\n            b += (lo[2] * v - b) * mixOld;\n          }\n        }\n        // The site energies, faint: high sites one tint, low sites another.\n        const e = vt[p], c = e > 0 ? pos : neg, a = 0.16 * abs(e) * 2;\n        r = max(r, c[0] * a);\n        g = max(g, c[1] * a);\n        b = max(b, c[2] * a);\n        if (cone[p]) {\n          r = max(r, 0.32);\n          g = max(g, 0.32);\n          b = max(b, 0.32);\n        }\n        r *= dm;\n        g *= dm;\n        b *= dm;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s."},{"name":"Disorder","min":4,"max":12,"about":"The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8."},{"name":"Samples","min":1,"max":16,"about":"How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over."}],"start":[0,2,4,1],"measures":{"motion":0.0706,"detail":0.0573,"edges":0.2197,"complexity":1.2567,"coverage":0.5738,"colour":0.1923,"drift":0.1291},"knobResponse":[0.0885,0.0786,0.0464,0.0484]},{"slug":"ant-farm","title":"Ant Farm","family":"insect","round":17,"note":"유리 사이에 모래를 채운 개미집에서 수확개미들이 바닥의 여왕 방까지 굴을 파고, 판 모래를 입구 옆 더미에 올리거나 오래된 막다른 굴에 다시 다져 넣어요. K1 을 누르면 뚜껑으로 물을 줘서 젖은 모래 얼룩이 천천히 아래로 번져요.","idea":"Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.","buttons":"K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","layer":{"id":"layer-ant-farm","type":"code","name":"ant-farm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fill","min":0,"max":1,"about":"Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second."},{"name":"Ants","min":40,"max":120,"about":"Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest."},{"name":"Lamp","min":0,"max":1,"about":"From daylight to the red lamp keepers watch by, because ants do not see red."}],"start":[0,2,40,0.06],"measures":{"motion":0.0748,"detail":0.0791,"edges":0.3143,"complexity":0.7035,"coverage":0.9824,"colour":0.2295,"drift":0.0611},"knobResponse":[0.2509,0.0544,0.0511,0.2616]},{"slug":"antoine-necklace","title":"Antoine's Necklace","family":"space","round":37,"note":"경기장 트랙 모양 유리 목걸이 안에 고리 18개가 이웃끼리 한 번씩 걸린 사슬이 들어 있고, 고리마다 목걸이 전체를 0.184배로 줄인 꼴이라 그 안에 또 사슬이 있어요. 카메라가 고리 하나로 9초에 한 세대씩 날아 들어가면 겉은 유리 테두리로 얇아지고 속 사슬이 단단해져서, 9초 뒤에는 색만 한 세대 넘어간 처음 그림이 돼요. K3 은 사슬의 고리를 30개까지 늘리고, 누르면 옆의 고리로 옮겨 들어가요.","idea":"A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.","buttons":"K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.","code":"// ===== Patternflow pattern =====\n// Title:   Antoine's Necklace\n// Family:  space\n// Idea:    A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Antoine's necklace (Louis Antoine, 1921), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90\n//\n// Knob 1: Hue. Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown.\n// Knob 2: Speed. How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s.\n// Knob 3: Links. Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12.\n// Knob 4: Turn. How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2.\n// Buttons: K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.\n\n// The shape. The core of the necklace is a stadium: two straight runs of\n// length 2L joined by two half circles of radius 1. The solid torus round it\n// has tube radius RHO. With L = 1 and RHO = 0.27 the outside is 2.54 wide and\n// 4.54 tall, and at a turn of 45 degrees it stands about twice as tall as it\n// is wide, like the panel.\n//\n// The links. A chain of N links runs round the core, one every P / N of arc\n// (P = 4L + 2 pi = 10.28). Every link is the necklace itself scaled by s, its\n// long axis along the core, and they alternate: even links lie in the\n// necklace's plane, odd links stand across it. The spacing is SPACE = 3.1\n// times a link's own core half width, so s = P / (3.1 N). Measured by\n// sampling every link's core at 96 points: at N = 18 the closest two\n// neighbours come within 0.47 of a link tube radius of touching, a link comes\n// within 0.38 of a tube radius of the parent's wall, and links two apart stay\n// 6 tube radii apart; at N = 30 these are 0.91, 4.1 and 6.1. The Gauss\n// linking integral, at 120 points a link for N = 18, 24 and 30, comes to 1\n// for every pair of neighbours and to 0 for every other pair. Uniform\n// spacing fails below 18: at 16 the bends turn neighbours 37 degrees against\n// each other, the end of one link swings towards the side of the next, and\n// the best scale still leaves them 0.05 of a tube radius into each other.\n//\n// Every link holds a chain built the same way, so the necklace is a fixed\n// set of similarity maps and it is the same at every scale. The dive target\n// is a flat link on a straight run, whose map is a pure shrink and shift,\n// x -> s x + c. The camera slides towards the map's fixed point\n// p = c / (1 - s), a point of the Cantor set, its distance to p shrinking by s\n// each generation, so the view at the end of one generation is the view at\n// its start. What changes is the colour: generations keep theirs as they grow.\n\nconst W = 64, H = 128, NPIX = W * H;\nconst L = 1, RHO = 0.27, SPACE = 3.1, P = 4 * L + 2 * Math.PI;\nconst BX = 1 + RHO, BY = L + 1 + RHO, BZ = RHO;\n// The camera stands 9 units from the necklace's middle with a focal length of\n// 222 LEDs, so the 4.54 units of height take 112 rows and the necklace's\n// neighbours in the chain it belongs to show above and below it.\nconst D0 = 9, F = 222;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Point and tangent of the core at arc length u, starting at the middle of\n// the right run and going up, so anticlockwise.\nfunction core(u, out) {\n  u = ((u % P) + P) % P;\n  let x, y, tx, ty;\n  if (u \u003c L) (x = 1), (y = u), (tx = 0), (ty = 1);\n  else if (u \u003c L + PI) {\n    const a = u - L;\n    (x = cos(a)), (y = L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else if (u \u003c 3 * L + PI) (x = -1), (y = L - (u - L - PI)), (tx = 0), (ty = -1);\n  else if (u \u003c 3 * L + 2 * PI) {\n    const a = PI + (u - 3 * L - PI);\n    (x = cos(a)), (y = -L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else (x = 1), (y = -L + (u - 3 * L - 2 * PI)), (tx = 0), (ty = 1);\n  out[0] = x;\n  out[1] = y;\n  out[2] = tx;\n  out[3] = ty;\n}\n\n// The N maps of one chain: rotation (columns: the link's across, along and\n// out-of-plane axes) and centre, all for a parent of size 1.\nfunction buildChain(N) {\n  const s = P / (SPACE * N), rot = new Float64Array(9 * N), ctr = new Float64Array(3 * N), targets = [], c = [0, 0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    core((i * P) / N, c);\n    const [x, y, tx, ty] = c, nx = ty, ny = -tx, o = 9 * i;\n    if (i % 2 === 0) {\n      // A flat link on a straight run gets no rotation at all, even on the\n      // left run where its axes point the other way: the stadium looks the\n      // same turned half round, and this keeps its map a pure shrink.\n      const flatRun = tx === 0;\n      rot.set(flatRun ? [1, 0, 0, 0, 1, 0, 0, 0, 1] : [nx, ny, 0, tx, ty, 0, 0, 0, 1], o);\n      if (flatRun) targets.push(i);\n    } else rot.set([0, 0, 1, tx, ty, 0, -ty, tx, 0], o);\n    ctr[3 * i] = x;\n    ctr[3 * i + 1] = y;\n  }\n  return { N, s, rot, ctr, targets };\n}\n\n// Ray directions through each LED, in view space (x right, y up, looking\n// down -z).\nconst RDX = new Float32Array(NPIX), RDY = new Float32Array(NPIX), RDZ = new Float32Array(NPIX);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - W / 2) / F, dy = -(y + 0.5 - H / 2) / F, n = 1 / sqrt(dx * dx + dy * dy + 1), p = y * W + x;\n    RDX[p] = dx * n;\n    RDY[p] = dy * n;\n    RDZ[p] = -n;\n  }\n\n// Light from the upper left and in front, and the half vector for the shine.\nconst LV = (() => {\n  const l = [-0.55, 0.6, 0.58], n = 1 / Math.hypot(...l);\n  const lx = l[0] * n, ly = l[1] * n, lz = l[2] * n, hz = lz + 1, hn = 1 / Math.hypot(lx, ly, hz);\n  return [lx, ly, lz, lx * hn, ly * hn, hz * hn];\n})();\n\n// Solidity and glass by apparent generation a = generation - zoom: a link is\n// solid from a = 0.85 up, thins to clear by a = 0.2, and its glass rim fades\n// out between a = 0 and a = -1, where it is the parent of the panel's parent.\nconst solidOf = (a) => sm(0.2, 0.85, a);\nconst glassOf = (a) => sm(-1, -0.25, a) * (1 - solidOf(a));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, links: 18, turn: 45, z: 0, gen: 0, clock: 0,\n    chain: buildChain(18), tgt: 0, ctx: 0, pend: false, from: null, glide: 1, gz0: 0,\n    zb: new Float32Array(NPIX), cr: new Float32Array(NPIX), cg: new Float32Array(NPIX), cb: new Float32Array(NPIX),\n    pal: new Float32Array(18), palHue: NaN, list: [],\n  };\n}\n\n// The camera's aim point for target index ti of a chain: p = c / (1 - s).\nfunction aim(ch, ti) {\n  const i = ch.targets[ti % ch.targets.length], k = 1 / (1 - ch.s);\n  return [ch.ctr[3 * i] * k, ch.ctr[3 * i + 1] * k, 0, i];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 18, 45], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.turn = cl(k[3], 45, 90);\n  const n = 2 * Math.round(cl(k[2], 18, 30) / 2);\n  if (n !== S.chain.N) {\n    S.chain = buildChain(n);\n    S.tgt = 0;\n    S.ctx = S.chain.targets[0];\n    S.glide = 1;\n    S.pend = false;\n  }\n  // The glide takes 1.5 s, which is gz of a generation. It must end before\n  // the wrap, so a tap late in a generation waits for the next one, where\n  // every target's path still starts from the same view.\n  const gz = (1.5 * S.speed) / 18;\n  if (input.btnPressed && input.btnPressed[0]) S.pend = true;\n  if (S.pend && S.glide >= 1 && S.z + gz \u003c 0.95) {\n    S.from = aim(S.chain, S.tgt);\n    S.tgt = (S.tgt + 1) % S.chain.targets.length;\n    S.glide = 0;\n    S.gz0 = S.z;\n    S.pend = false;\n  }\n  // If Speed is turned up during a glide it still ends by z = 0.97.\n  S.glide = min(1, max(S.glide + d / 1.5, (S.z - S.gz0) / (0.97 - S.gz0)));\n  S.clock += (d * S.speed) / 2;\n  S.z += (d * S.speed) / 18;\n  if (S.z >= 1) {\n    // One generation deeper: the target link becomes the necklace, and the\n    // necklace it sat in becomes the one round the panel.\n    S.z -= 1;\n    S.gen++;\n    S.glide = 1;\n    S.ctx = S.chain.targets[S.tgt];\n  }\n}\n\nfunction palette(S) {\n  // Three generation colours a third apart. At Hue 0 they are lime (glass of\n  // the opening), azure (the opening chain) and rose. Body colour and the\n  // floor its shaded side keeps: a red, orange or yellow body keeps more of\n  // its light and less of its saturation, as at half light it reads brown.\n  for (let g = 0; g \u003c 3; g++) {\n    const h = S.hue + 0.227 + g / 3, hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.02, hw) * (1 - sm(0.17, 0.27, hw));\n    hsv(h, 0.78 - 0.3 * warm, 1, S.pal, g * 6);\n    hsv(h, 0.28, 1, S.pal, g * 6 + 3);\n    S.pal[15 + g] = warm;\n  }\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const ch = S.chain, s = ch.s, z = S.z, sz = pow(s, z);\n  // The aim point, gliding after a tap.\n  let p = aim(ch, S.tgt);\n  if (S.glide \u003c 1 && S.from) {\n    const w = sm(0, 1, S.glide);\n    p = [S.from[0] + (p[0] - S.from[0]) * w, S.from[1] + (p[1] - S.from[1]) * w, 0, p[3]];\n  }\n  // View rotation: turn about the upright axis, then lean back 12 degrees.\n  // Halfway through each generation the necklace has swung 22 degrees\n  // further round, so the run the camera dives at turns to face along the\n  // view and the empty middle of the necklace narrows; it swings back by the\n  // end, and the swing starts and stops at rest, so the loop has no seam.\n  const sw = sin(PI * z), psi = ((S.turn + 22 * sw * sw + 8 * sin((2 * PI * S.clock) / 25)) * PI) / 180, tilt = (-12 * PI) / 180;\n  const cy = cos(psi), sy = sin(psi), ct = cos(tilt), st = sin(tilt);\n  // R = Rx(tilt) * Ry(psi), row-major.\n  const R = [cy, 0, sy, st * sy, ct, -st * cy, -ct * sy, st, ct * cy];\n  const k1 = 1 - sz, ox = p[0] * k1, oy = p[1] * k1;\n  // World point x -> view: R (x - (1 - s^z) p) - (0, 0, s^z D0).\n  const list = (S.list = []);\n  const near = 0.05 * sz * D0;\n  const visit = (Sc, M, cx, cy0, cz, gen) => {\n    // Centre in view.\n    const wx = cx - ox, wy = cy0 - oy, wz = cz;\n    const vx = R[0] * wx + R[1] * wy + R[2] * wz, vy = R[3] * wx + R[4] * wy + R[5] * wz, vz = R[6] * wx + R[7] * wy + R[8] * wz - sz * D0;\n    const rad = Sc * (BY + 0.05);\n    if (gen >= 0) {\n      if (vz - rad > -near) return;\n      const dz = -vz, ext = rad;\n      if (dz > ext) {\n        const sx = W / 2 + (F * vx) / dz, syy = H / 2 - (F * vy) / dz, pr = (F * ext) / (dz - ext);\n        if (sx + pr \u003c 0 || sx - pr > W || syy + pr \u003c 0 || syy - pr > H) return;\n        // A tube under a third of an LED thick is not drawn.\n        if ((F * Sc * RHO) / dz \u003c 0.17) return;\n      }\n      const a = gen - z, sol = solidOf(a), gl = glassOf(a);\n      if (sol > 0.004 || gl > 0.03) {\n        const MV = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n        for (let r = 0; r \u003c 3; r++)\n          for (let c = 0; c \u003c 3; c++) MV[r * 3 + c] = R[r * 3] * M[c] + R[r * 3 + 1] * M[3 + c] + R[r * 3 + 2] * M[6 + c];\n        list.push({ S: Sc, MV, vx, vy, vz, sol, gl, col: (((S.gen + gen) % 3) + 3) % 3 });\n      }\n      // Behind a link more than 97% solid its chain does not show.\n      if (sol >= 0.97 || gen >= 2) return;\n    }\n    for (let i = 0; i \u003c ch.N; i++) {\n      const o = 9 * i, Ri = ch.rot, ci = ch.ctr;\n      // Child rotation M * Ri (row-major M; Ri stored by columns).\n      const CM = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n      for (let r = 0; r \u003c 3; r++)\n        for (let c = 0; c \u003c 3; c++) CM[r * 3 + c] = M[r * 3] * Ri[o + c * 3] + M[r * 3 + 1] * Ri[o + c * 3 + 1] + M[r * 3 + 2] * Ri[o + c * 3 + 2];\n      const px = ci[3 * i], py = ci[3 * i + 1];\n      visit(Sc * s, CM, cx + Sc * (M[0] * px + M[1] * py), cy0 + Sc * (M[3] * px + M[4] * py), cz + Sc * (M[6] * px + M[7] * py), gen + 1);\n    }\n  };\n  // Start from the necklace the panel's necklace is a link of: the link the\n  // camera dived into last generation.\n  const ct0 = ch.ctr, ci0 = S.ctx;\n  visit(1 / s, [1, 0, 0, 0, 1, 0, 0, 0, 1], -ct0[3 * ci0] / s, -ct0[3 * ci0 + 1] / s, 0, -1);\n\n  const { zb, cr, cg, cb } = S;\n  zb.fill(Infinity);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  for (const e of list) if (e.sol >= 0.999) raster(S, e, true, sz);\n  const rest = list.filter((e) => e.sol \u003c 0.999).sort((a, b) => a.vz - b.vz);\n  for (const e of rest) raster(S, e, false, sz);\n  for (let i = 0; i \u003c NPIX; i++) display.setPixel(i % W, (i / W) | 0, cr[i] * 255, cg[i] * 255, cb[i] * 255);\n}\n\n// Trace every LED in the link's screen box against the link's own distance\n// field, in the link's frame where it has half width 1.\nfunction raster(S, e, solid, sz) {\n  const { MV, vx, vy, vz } = e, Sc = e.S, inv = 1 / Sc;\n  // Camera in link coordinates: MV^T (0 - centre) / S.\n  const ox = -(MV[0] * vx + MV[3] * vy + MV[6] * vz) * inv, oy = -(MV[1] * vx + MV[4] * vy + MV[7] * vz) * inv, oz = -(MV[2] * vx + MV[5] * vy + MV[8] * vz) * inv;\n  // Screen box from the eight corners of the link's box.\n  let x0 = W, x1 = -1, y0 = H, y1 = -1, full = false;\n  for (let c = 0; c \u003c 8; c++) {\n    const lx = c & 1 ? BX : -BX, ly = c & 2 ? BY : -BY, lz = c & 4 ? BZ : -BZ;\n    const px = vx + Sc * (MV[0] * lx + MV[1] * ly + MV[2] * lz), py = vy + Sc * (MV[3] * lx + MV[4] * ly + MV[5] * lz), pz = vz + Sc * (MV[6] * lx + MV[7] * ly + MV[8] * lz);\n    if (-pz \u003c 1e-3) {\n      full = true;\n      break;\n    }\n    const sx = W / 2 + (F * px) / -pz, sy = H / 2 - (F * py) / -pz;\n    if (sx \u003c x0) x0 = sx;\n    if (sx > x1) x1 = sx;\n    if (sy \u003c y0) y0 = sy;\n    if (sy > y1) y1 = sy;\n  }\n  if (full) (x0 = 0), (x1 = W - 1), (y0 = 0), (y1 = H - 1);\n  const X0 = max(0, floor(x0)), X1 = min(W - 1, floor(x1)), Y0 = max(0, floor(y0)), Y1 = min(H - 1, floor(y1));\n  if (X0 > X1 || Y0 > Y1) return;\n  const { zb, cr, cg, cb, pal } = S, g6 = e.col * 6, warm = pal[15 + e.col];\n  const br = pal[g6], bg = pal[g6 + 1], bb = pal[g6 + 2], gr = pal[g6 + 3], gg = pal[g6 + 4], gbb = pal[g6 + 5];\n  const [lx, ly, lz, hx, hy, hz] = LV;\n  const eps = 0.3 / F, sol = e.sol, gl = e.gl, dref = sz * D0;\n  for (let py = Y0; py \u003c= Y1; py++)\n    for (let px = X0; px \u003c= X1; px++) {\n      const p = py * W + px, rx = RDX[p], ry = RDY[p], rz = RDZ[p];\n      const dx = MV[0] * rx + MV[3] * ry + MV[6] * rz, dy = MV[1] * rx + MV[4] * ry + MV[7] * rz, dz = MV[2] * rx + MV[5] * ry + MV[8] * rz;\n      // Slab test against the box.\n      let t0 = 0, t1 = 1e9;\n      {\n        const ix = 1 / dx, a = (-BX - ox) * ix, b = (BX - ox) * ix;\n        t0 = max(t0, min(a, b));\n        t1 = min(t1, max(a, b));\n        const iy = 1 / dy, c = (-BY - oy) * iy, d = (BY - oy) * iy;\n        t0 = max(t0, min(c, d));\n        t1 = min(t1, max(c, d));\n        const iz = 1 / dz, f = (-BZ - oz) * iz, g = (BZ - oz) * iz;\n        t0 = max(t0, min(f, g));\n        t1 = min(t1, max(f, g));\n      }\n      if (t0 >= t1) continue;\n      const zmax = zb[p] * inv;\n      if (t0 >= zmax) continue;\n      let t = t0, hit = false, qx = 0, qy = 0, qz = 0, q = 0, rr = 0, dyy = 0;\n      for (let it = 0; it \u003c 48; it++) {\n        qx = ox + t * dx;\n        qy = oy + t * dy;\n        qz = oz + t * dz;\n        const ay = abs(qy) - L;\n        dyy = ay > 0 ? ay : 0;\n        rr = sqrt(qx * qx + dyy * dyy);\n        q = rr - 1;\n        const dist = sqrt(q * q + qz * qz) - RHO;\n        if (dist \u003c eps * t) {\n          hit = true;\n          break;\n        }\n        t += dist;\n        if (t > t1 || t > zmax) break;\n      }\n      if (!hit) continue;\n      // Normal in link coordinates, then in view.\n      const rinv = rr > 1e-6 ? 1 / rr : 0, gx = q * qx * rinv, gy = q * (qy \u003c 0 ? -dyy : dyy) * rinv;\n      let nl = sqrt(gx * gx + gy * gy + qz * qz);\n      nl = nl > 1e-9 ? 1 / nl : 0;\n      const nlx = gx * nl, nly = gy * nl, nlz = qz * nl;\n      const nx = MV[0] * nlx + MV[1] * nly + MV[2] * nlz, ny = MV[3] * nlx + MV[4] * nly + MV[5] * nlz, nz = MV[6] * nlx + MV[7] * nly + MV[8] * nlz;\n      const ndv = -(nx * rx + ny * ry + nz * rz), edge = abs(ndv);\n      const lam = max(0, nx * lx + ny * ly + nz * lz), spec = pow(max(0, nx * hx + ny * hy + nz * hz), 36);\n      const tv = t * Sc;\n      // Depth: nearer than the necklace's middle is brighter.\n      const fog = cl(1.25 - 0.55 * (tv / dref), 0.45, 1.2);\n      const amb = 0.2 + 0.25 * warm, body = (amb + (1 - amb) * lam) * sm(0.0, 0.45, edge) * fog;\n      let r = br * body + 0.75 * spec * fog, g = bg * body + 0.75 * spec * fog, b = bb * body + 0.75 * spec * fog;\n      if (solid) {\n        zb[p] = tv;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n        continue;\n      }\n      // Glass: a faint tint over its whole face, bright at the rim, and the\n      // shine. A thinning link blends its body over what lies behind it.\n      const rim = pow(1 - edge, 2.2), gw = gl * (0.05 + 0.85 * rim);\n      const keep = 1 - sol;\n      cr[p] = cr[p] * keep + r * sol + gr * gw + 0.5 * spec * gl;\n      cg[p] = cg[p] * keep + g * sol + gg * gw + 0.5 * spec * gl;\n      cb[p] = cb[p] * keep + b * sol + gbb * gw + 0.5 * spec * gl;\n    }\n}\n","layer":{"id":"layer-antoine-necklace","type":"code","name":"antoine-necklace","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Antoine's Necklace\n// Family:  space\n// Idea:    A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Antoine's necklace (Louis Antoine, 1921), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90\n//\n// Knob 1: Hue. Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown.\n// Knob 2: Speed. How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s.\n// Knob 3: Links. Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12.\n// Knob 4: Turn. How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2.\n// Buttons: K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.\n\n// The shape. The core of the necklace is a stadium: two straight runs of\n// length 2L joined by two half circles of radius 1. The solid torus round it\n// has tube radius RHO. With L = 1 and RHO = 0.27 the outside is 2.54 wide and\n// 4.54 tall, and at a turn of 45 degrees it stands about twice as tall as it\n// is wide, like the panel.\n//\n// The links. A chain of N links runs round the core, one every P / N of arc\n// (P = 4L + 2 pi = 10.28). Every link is the necklace itself scaled by s, its\n// long axis along the core, and they alternate: even links lie in the\n// necklace's plane, odd links stand across it. The spacing is SPACE = 3.1\n// times a link's own core half width, so s = P / (3.1 N). Measured by\n// sampling every link's core at 96 points: at N = 18 the closest two\n// neighbours come within 0.47 of a link tube radius of touching, a link comes\n// within 0.38 of a tube radius of the parent's wall, and links two apart stay\n// 6 tube radii apart; at N = 30 these are 0.91, 4.1 and 6.1. The Gauss\n// linking integral, at 120 points a link for N = 18, 24 and 30, comes to 1\n// for every pair of neighbours and to 0 for every other pair. Uniform\n// spacing fails below 18: at 16 the bends turn neighbours 37 degrees against\n// each other, the end of one link swings towards the side of the next, and\n// the best scale still leaves them 0.05 of a tube radius into each other.\n//\n// Every link holds a chain built the same way, so the necklace is a fixed\n// set of similarity maps and it is the same at every scale. The dive target\n// is a flat link on a straight run, whose map is a pure shrink and shift,\n// x -> s x + c. The camera slides towards the map's fixed point\n// p = c / (1 - s), a point of the Cantor set, its distance to p shrinking by s\n// each generation, so the view at the end of one generation is the view at\n// its start. What changes is the colour: generations keep theirs as they grow.\n\nconst W = 64, H = 128, NPIX = W * H;\nconst L = 1, RHO = 0.27, SPACE = 3.1, P = 4 * L + 2 * Math.PI;\nconst BX = 1 + RHO, BY = L + 1 + RHO, BZ = RHO;\n// The camera stands 9 units from the necklace's middle with a focal length of\n// 222 LEDs, so the 4.54 units of height take 112 rows and the necklace's\n// neighbours in the chain it belongs to show above and below it.\nconst D0 = 9, F = 222;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Point and tangent of the core at arc length u, starting at the middle of\n// the right run and going up, so anticlockwise.\nfunction core(u, out) {\n  u = ((u % P) + P) % P;\n  let x, y, tx, ty;\n  if (u \u003c L) (x = 1), (y = u), (tx = 0), (ty = 1);\n  else if (u \u003c L + PI) {\n    const a = u - L;\n    (x = cos(a)), (y = L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else if (u \u003c 3 * L + PI) (x = -1), (y = L - (u - L - PI)), (tx = 0), (ty = -1);\n  else if (u \u003c 3 * L + 2 * PI) {\n    const a = PI + (u - 3 * L - PI);\n    (x = cos(a)), (y = -L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else (x = 1), (y = -L + (u - 3 * L - 2 * PI)), (tx = 0), (ty = 1);\n  out[0] = x;\n  out[1] = y;\n  out[2] = tx;\n  out[3] = ty;\n}\n\n// The N maps of one chain: rotation (columns: the link's across, along and\n// out-of-plane axes) and centre, all for a parent of size 1.\nfunction buildChain(N) {\n  const s = P / (SPACE * N), rot = new Float64Array(9 * N), ctr = new Float64Array(3 * N), targets = [], c = [0, 0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    core((i * P) / N, c);\n    const [x, y, tx, ty] = c, nx = ty, ny = -tx, o = 9 * i;\n    if (i % 2 === 0) {\n      // A flat link on a straight run gets no rotation at all, even on the\n      // left run where its axes point the other way: the stadium looks the\n      // same turned half round, and this keeps its map a pure shrink.\n      const flatRun = tx === 0;\n      rot.set(flatRun ? [1, 0, 0, 0, 1, 0, 0, 0, 1] : [nx, ny, 0, tx, ty, 0, 0, 0, 1], o);\n      if (flatRun) targets.push(i);\n    } else rot.set([0, 0, 1, tx, ty, 0, -ty, tx, 0], o);\n    ctr[3 * i] = x;\n    ctr[3 * i + 1] = y;\n  }\n  return { N, s, rot, ctr, targets };\n}\n\n// Ray directions through each LED, in view space (x right, y up, looking\n// down -z).\nconst RDX = new Float32Array(NPIX), RDY = new Float32Array(NPIX), RDZ = new Float32Array(NPIX);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - W / 2) / F, dy = -(y + 0.5 - H / 2) / F, n = 1 / sqrt(dx * dx + dy * dy + 1), p = y * W + x;\n    RDX[p] = dx * n;\n    RDY[p] = dy * n;\n    RDZ[p] = -n;\n  }\n\n// Light from the upper left and in front, and the half vector for the shine.\nconst LV = (() => {\n  const l = [-0.55, 0.6, 0.58], n = 1 / Math.hypot(...l);\n  const lx = l[0] * n, ly = l[1] * n, lz = l[2] * n, hz = lz + 1, hn = 1 / Math.hypot(lx, ly, hz);\n  return [lx, ly, lz, lx * hn, ly * hn, hz * hn];\n})();\n\n// Solidity and glass by apparent generation a = generation - zoom: a link is\n// solid from a = 0.85 up, thins to clear by a = 0.2, and its glass rim fades\n// out between a = 0 and a = -1, where it is the parent of the panel's parent.\nconst solidOf = (a) => sm(0.2, 0.85, a);\nconst glassOf = (a) => sm(-1, -0.25, a) * (1 - solidOf(a));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, links: 18, turn: 45, z: 0, gen: 0, clock: 0,\n    chain: buildChain(18), tgt: 0, ctx: 0, pend: false, from: null, glide: 1, gz0: 0,\n    zb: new Float32Array(NPIX), cr: new Float32Array(NPIX), cg: new Float32Array(NPIX), cb: new Float32Array(NPIX),\n    pal: new Float32Array(18), palHue: NaN, list: [],\n  };\n}\n\n// The camera's aim point for target index ti of a chain: p = c / (1 - s).\nfunction aim(ch, ti) {\n  const i = ch.targets[ti % ch.targets.length], k = 1 / (1 - ch.s);\n  return [ch.ctr[3 * i] * k, ch.ctr[3 * i + 1] * k, 0, i];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 18, 45], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.turn = cl(k[3], 45, 90);\n  const n = 2 * Math.round(cl(k[2], 18, 30) / 2);\n  if (n !== S.chain.N) {\n    S.chain = buildChain(n);\n    S.tgt = 0;\n    S.ctx = S.chain.targets[0];\n    S.glide = 1;\n    S.pend = false;\n  }\n  // The glide takes 1.5 s, which is gz of a generation. It must end before\n  // the wrap, so a tap late in a generation waits for the next one, where\n  // every target's path still starts from the same view.\n  const gz = (1.5 * S.speed) / 18;\n  if (input.btnPressed && input.btnPressed[0]) S.pend = true;\n  if (S.pend && S.glide >= 1 && S.z + gz \u003c 0.95) {\n    S.from = aim(S.chain, S.tgt);\n    S.tgt = (S.tgt + 1) % S.chain.targets.length;\n    S.glide = 0;\n    S.gz0 = S.z;\n    S.pend = false;\n  }\n  // If Speed is turned up during a glide it still ends by z = 0.97.\n  S.glide = min(1, max(S.glide + d / 1.5, (S.z - S.gz0) / (0.97 - S.gz0)));\n  S.clock += (d * S.speed) / 2;\n  S.z += (d * S.speed) / 18;\n  if (S.z >= 1) {\n    // One generation deeper: the target link becomes the necklace, and the\n    // necklace it sat in becomes the one round the panel.\n    S.z -= 1;\n    S.gen++;\n    S.glide = 1;\n    S.ctx = S.chain.targets[S.tgt];\n  }\n}\n\nfunction palette(S) {\n  // Three generation colours a third apart. At Hue 0 they are lime (glass of\n  // the opening), azure (the opening chain) and rose. Body colour and the\n  // floor its shaded side keeps: a red, orange or yellow body keeps more of\n  // its light and less of its saturation, as at half light it reads brown.\n  for (let g = 0; g \u003c 3; g++) {\n    const h = S.hue + 0.227 + g / 3, hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.02, hw) * (1 - sm(0.17, 0.27, hw));\n    hsv(h, 0.78 - 0.3 * warm, 1, S.pal, g * 6);\n    hsv(h, 0.28, 1, S.pal, g * 6 + 3);\n    S.pal[15 + g] = warm;\n  }\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const ch = S.chain, s = ch.s, z = S.z, sz = pow(s, z);\n  // The aim point, gliding after a tap.\n  let p = aim(ch, S.tgt);\n  if (S.glide \u003c 1 && S.from) {\n    const w = sm(0, 1, S.glide);\n    p = [S.from[0] + (p[0] - S.from[0]) * w, S.from[1] + (p[1] - S.from[1]) * w, 0, p[3]];\n  }\n  // View rotation: turn about the upright axis, then lean back 12 degrees.\n  // Halfway through each generation the necklace has swung 22 degrees\n  // further round, so the run the camera dives at turns to face along the\n  // view and the empty middle of the necklace narrows; it swings back by the\n  // end, and the swing starts and stops at rest, so the loop has no seam.\n  const sw = sin(PI * z), psi = ((S.turn + 22 * sw * sw + 8 * sin((2 * PI * S.clock) / 25)) * PI) / 180, tilt = (-12 * PI) / 180;\n  const cy = cos(psi), sy = sin(psi), ct = cos(tilt), st = sin(tilt);\n  // R = Rx(tilt) * Ry(psi), row-major.\n  const R = [cy, 0, sy, st * sy, ct, -st * cy, -ct * sy, st, ct * cy];\n  const k1 = 1 - sz, ox = p[0] * k1, oy = p[1] * k1;\n  // World point x -> view: R (x - (1 - s^z) p) - (0, 0, s^z D0).\n  const list = (S.list = []);\n  const near = 0.05 * sz * D0;\n  const visit = (Sc, M, cx, cy0, cz, gen) => {\n    // Centre in view.\n    const wx = cx - ox, wy = cy0 - oy, wz = cz;\n    const vx = R[0] * wx + R[1] * wy + R[2] * wz, vy = R[3] * wx + R[4] * wy + R[5] * wz, vz = R[6] * wx + R[7] * wy + R[8] * wz - sz * D0;\n    const rad = Sc * (BY + 0.05);\n    if (gen >= 0) {\n      if (vz - rad > -near) return;\n      const dz = -vz, ext = rad;\n      if (dz > ext) {\n        const sx = W / 2 + (F * vx) / dz, syy = H / 2 - (F * vy) / dz, pr = (F * ext) / (dz - ext);\n        if (sx + pr \u003c 0 || sx - pr > W || syy + pr \u003c 0 || syy - pr > H) return;\n        // A tube under a third of an LED thick is not drawn.\n        if ((F * Sc * RHO) / dz \u003c 0.17) return;\n      }\n      const a = gen - z, sol = solidOf(a), gl = glassOf(a);\n      if (sol > 0.004 || gl > 0.03) {\n        const MV = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n        for (let r = 0; r \u003c 3; r++)\n          for (let c = 0; c \u003c 3; c++) MV[r * 3 + c] = R[r * 3] * M[c] + R[r * 3 + 1] * M[3 + c] + R[r * 3 + 2] * M[6 + c];\n        list.push({ S: Sc, MV, vx, vy, vz, sol, gl, col: (((S.gen + gen) % 3) + 3) % 3 });\n      }\n      // Behind a link more than 97% solid its chain does not show.\n      if (sol >= 0.97 || gen >= 2) return;\n    }\n    for (let i = 0; i \u003c ch.N; i++) {\n      const o = 9 * i, Ri = ch.rot, ci = ch.ctr;\n      // Child rotation M * Ri (row-major M; Ri stored by columns).\n      const CM = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n      for (let r = 0; r \u003c 3; r++)\n        for (let c = 0; c \u003c 3; c++) CM[r * 3 + c] = M[r * 3] * Ri[o + c * 3] + M[r * 3 + 1] * Ri[o + c * 3 + 1] + M[r * 3 + 2] * Ri[o + c * 3 + 2];\n      const px = ci[3 * i], py = ci[3 * i + 1];\n      visit(Sc * s, CM, cx + Sc * (M[0] * px + M[1] * py), cy0 + Sc * (M[3] * px + M[4] * py), cz + Sc * (M[6] * px + M[7] * py), gen + 1);\n    }\n  };\n  // Start from the necklace the panel's necklace is a link of: the link the\n  // camera dived into last generation.\n  const ct0 = ch.ctr, ci0 = S.ctx;\n  visit(1 / s, [1, 0, 0, 0, 1, 0, 0, 0, 1], -ct0[3 * ci0] / s, -ct0[3 * ci0 + 1] / s, 0, -1);\n\n  const { zb, cr, cg, cb } = S;\n  zb.fill(Infinity);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  for (const e of list) if (e.sol >= 0.999) raster(S, e, true, sz);\n  const rest = list.filter((e) => e.sol \u003c 0.999).sort((a, b) => a.vz - b.vz);\n  for (const e of rest) raster(S, e, false, sz);\n  for (let i = 0; i \u003c NPIX; i++) display.setPixel(i % W, (i / W) | 0, cr[i] * 255, cg[i] * 255, cb[i] * 255);\n}\n\n// Trace every LED in the link's screen box against the link's own distance\n// field, in the link's frame where it has half width 1.\nfunction raster(S, e, solid, sz) {\n  const { MV, vx, vy, vz } = e, Sc = e.S, inv = 1 / Sc;\n  // Camera in link coordinates: MV^T (0 - centre) / S.\n  const ox = -(MV[0] * vx + MV[3] * vy + MV[6] * vz) * inv, oy = -(MV[1] * vx + MV[4] * vy + MV[7] * vz) * inv, oz = -(MV[2] * vx + MV[5] * vy + MV[8] * vz) * inv;\n  // Screen box from the eight corners of the link's box.\n  let x0 = W, x1 = -1, y0 = H, y1 = -1, full = false;\n  for (let c = 0; c \u003c 8; c++) {\n    const lx = c & 1 ? BX : -BX, ly = c & 2 ? BY : -BY, lz = c & 4 ? BZ : -BZ;\n    const px = vx + Sc * (MV[0] * lx + MV[1] * ly + MV[2] * lz), py = vy + Sc * (MV[3] * lx + MV[4] * ly + MV[5] * lz), pz = vz + Sc * (MV[6] * lx + MV[7] * ly + MV[8] * lz);\n    if (-pz \u003c 1e-3) {\n      full = true;\n      break;\n    }\n    const sx = W / 2 + (F * px) / -pz, sy = H / 2 - (F * py) / -pz;\n    if (sx \u003c x0) x0 = sx;\n    if (sx > x1) x1 = sx;\n    if (sy \u003c y0) y0 = sy;\n    if (sy > y1) y1 = sy;\n  }\n  if (full) (x0 = 0), (x1 = W - 1), (y0 = 0), (y1 = H - 1);\n  const X0 = max(0, floor(x0)), X1 = min(W - 1, floor(x1)), Y0 = max(0, floor(y0)), Y1 = min(H - 1, floor(y1));\n  if (X0 > X1 || Y0 > Y1) return;\n  const { zb, cr, cg, cb, pal } = S, g6 = e.col * 6, warm = pal[15 + e.col];\n  const br = pal[g6], bg = pal[g6 + 1], bb = pal[g6 + 2], gr = pal[g6 + 3], gg = pal[g6 + 4], gbb = pal[g6 + 5];\n  const [lx, ly, lz, hx, hy, hz] = LV;\n  const eps = 0.3 / F, sol = e.sol, gl = e.gl, dref = sz * D0;\n  for (let py = Y0; py \u003c= Y1; py++)\n    for (let px = X0; px \u003c= X1; px++) {\n      const p = py * W + px, rx = RDX[p], ry = RDY[p], rz = RDZ[p];\n      const dx = MV[0] * rx + MV[3] * ry + MV[6] * rz, dy = MV[1] * rx + MV[4] * ry + MV[7] * rz, dz = MV[2] * rx + MV[5] * ry + MV[8] * rz;\n      // Slab test against the box.\n      let t0 = 0, t1 = 1e9;\n      {\n        const ix = 1 / dx, a = (-BX - ox) * ix, b = (BX - ox) * ix;\n        t0 = max(t0, min(a, b));\n        t1 = min(t1, max(a, b));\n        const iy = 1 / dy, c = (-BY - oy) * iy, d = (BY - oy) * iy;\n        t0 = max(t0, min(c, d));\n        t1 = min(t1, max(c, d));\n        const iz = 1 / dz, f = (-BZ - oz) * iz, g = (BZ - oz) * iz;\n        t0 = max(t0, min(f, g));\n        t1 = min(t1, max(f, g));\n      }\n      if (t0 >= t1) continue;\n      const zmax = zb[p] * inv;\n      if (t0 >= zmax) continue;\n      let t = t0, hit = false, qx = 0, qy = 0, qz = 0, q = 0, rr = 0, dyy = 0;\n      for (let it = 0; it \u003c 48; it++) {\n        qx = ox + t * dx;\n        qy = oy + t * dy;\n        qz = oz + t * dz;\n        const ay = abs(qy) - L;\n        dyy = ay > 0 ? ay : 0;\n        rr = sqrt(qx * qx + dyy * dyy);\n        q = rr - 1;\n        const dist = sqrt(q * q + qz * qz) - RHO;\n        if (dist \u003c eps * t) {\n          hit = true;\n          break;\n        }\n        t += dist;\n        if (t > t1 || t > zmax) break;\n      }\n      if (!hit) continue;\n      // Normal in link coordinates, then in view.\n      const rinv = rr > 1e-6 ? 1 / rr : 0, gx = q * qx * rinv, gy = q * (qy \u003c 0 ? -dyy : dyy) * rinv;\n      let nl = sqrt(gx * gx + gy * gy + qz * qz);\n      nl = nl > 1e-9 ? 1 / nl : 0;\n      const nlx = gx * nl, nly = gy * nl, nlz = qz * nl;\n      const nx = MV[0] * nlx + MV[1] * nly + MV[2] * nlz, ny = MV[3] * nlx + MV[4] * nly + MV[5] * nlz, nz = MV[6] * nlx + MV[7] * nly + MV[8] * nlz;\n      const ndv = -(nx * rx + ny * ry + nz * rz), edge = abs(ndv);\n      const lam = max(0, nx * lx + ny * ly + nz * lz), spec = pow(max(0, nx * hx + ny * hy + nz * hz), 36);\n      const tv = t * Sc;\n      // Depth: nearer than the necklace's middle is brighter.\n      const fog = cl(1.25 - 0.55 * (tv / dref), 0.45, 1.2);\n      const amb = 0.2 + 0.25 * warm, body = (amb + (1 - amb) * lam) * sm(0.0, 0.45, edge) * fog;\n      let r = br * body + 0.75 * spec * fog, g = bg * body + 0.75 * spec * fog, b = bb * body + 0.75 * spec * fog;\n      if (solid) {\n        zb[p] = tv;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n        continue;\n      }\n      // Glass: a faint tint over its whole face, bright at the rim, and the\n      // shine. A thinning link blends its body over what lies behind it.\n      const rim = pow(1 - edge, 2.2), gw = gl * (0.05 + 0.85 * rim);\n      const keep = 1 - sol;\n      cr[p] = cr[p] * keep + r * sol + gr * gw + 0.5 * spec * gl;\n      cg[p] = cg[p] * keep + g * sol + gg * gw + 0.5 * spec * gl;\n      cb[p] = cb[p] * keep + b * sol + gbb * gw + 0.5 * spec * gl;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s."},{"name":"Links","min":18,"max":30,"about":"Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12."},{"name":"Turn","min":45,"max":90,"about":"How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2."}],"start":[0,2,18,45],"measures":{"motion":0.8976,"detail":0.0847,"edges":0.5082,"complexity":1.4555,"coverage":0.5229,"colour":0.1494,"drift":0.2617},"knobResponse":[0.1332,0.2651,0.185,0.2969]},{"slug":"aquarium","title":"Aquarium","family":"pixel","round":2,"note":"높은 수조에 흰동가리, 블루탱, 엔젤피시, 네온테트라 떼가 꼬리를 흔들며 헤엄쳐요. 모래 위 보물상자가 몇 초마다 뚜껑을 열어 공기 방울을 뱉고, K1 을 누르면 먹이가 떨어져 물고기가 몰려와요.","idea":"A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.","buttons":"K1 tap drops a pinch of food at the surface, and every fish goes for it.","code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","layer":{"id":"layer-aquarium","type":"code","name":"aquarium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet."},{"name":"Swim","min":0.2,"max":4,"about":"How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush."},{"name":"Fish","min":6,"max":18,"about":"How many fish live in the tank; new ones swim in from the side and spare ones swim out."},{"name":"Light","min":-1,"max":1,"about":"Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand."}],"start":[0,2,6,0.06],"measures":{"motion":0.1521,"detail":0.0707,"edges":0.4986,"complexity":0.73,"coverage":0.9459,"colour":0.2752,"drift":0.0492},"knobResponse":[0.1007,0.0662,0.0696,0.1627]},{"slug":"arnold-tongues","title":"Arnold Tongues","family":"rhythm","round":32,"note":"아래 가장자리의 분수 p/q 마다 혀가 하나씩 위로 자라 벌어져요. 양옆은 0/1 과 1/1 혀, 가운데는 분홍 1/2 혀, 그 양쪽은 초록 1/3 과 2/3 혀예요. 혀마다 q박에 한 번 번쩍여서 판 전체가 13박까지의 폴리리듬으로 뛰고, 회색 탐침선이 오르내리며 그 높이의 악마의 계단을 그어요.","idea":"The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.","buttons":"K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.","code":"// ===== Patternflow pattern =====\n// Title:   Arnold Tongues\n// Family:  rhythm\n// Idea:    The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold tongues of the circle map (Vladimir Arnold, 1961), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right.\n// Knob 2: Tempo. 0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2.\n// Knob 3: Zoom. At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second.\n// Knob 4: Depth. The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points.\n// Buttons: K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.\n\nconst W = 64, H = 128, SX = 3, NS = W * SX, QM = 21, T = 320, EPS = 1e-4, RUNS = 4;\nconst { floor, round, abs, exp, cos, min, max, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst GOLD2 = (3 - Math.sqrt(5)) / 2;\n\n// sin(2 pi u) from a table: the map runs 320 steps for each of 24576 points.\nconst LN = 4096, SIN = new Float64Array(LN + 1);\nfor (let i = 0; i \u003c= LN; i++) SIN[i] = Math.sin((TAU * i) / LN);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The lifted circle map th -> th + Om - (K / 2 pi) sin(2 pi th), from th = 0.\n// Row y has K = 1 - (1 - u)^2 with u = (127 - y) / 127: 0 at the bottom, 1 at\n// the top, and twice as many rows near the top, where the tongues spread, as\n// a straight scale would give. After 320 steps the point is locked to p/q\n// when th moved by exactly p over each of its last four runs of q steps; the\n// smallest such q wins. The rotation number rho is the mean step over the\n// last 256.\nconst kOf = (y) => {\n  const u = 1 - (H - 1 - y) / (H - 1);\n  return 1 - u * u;\n};\nconst BUF = new Float64Array(T + 1);\nfunction buildRow(P, y) {\n  const c = kOf(y) / TAU, o = y * NS, o0 = P.om0, dw = (P.om1 - P.om0) / NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const om = o0 + (j + 0.5) * dw;\n    let th = 0;\n    for (let n = 0; n \u003c T; n++) {\n      BUF[n] = th;\n      const u = (th - floor(th)) * LN, i = u | 0;\n      th += om - c * (SIN[i] + (SIN[i + 1] - SIN[i]) * (u - i));\n    }\n    BUF[T] = th;\n    let q = 1;\n    for (; q \u003c= QM; q++) {\n      const p = round(BUF[T] - BUF[T - q]);\n      let r = 0;\n      while (r \u003c RUNS && abs(BUF[T - r * q] - BUF[T - r * q - q] - p) \u003c EPS) r++;\n      if (r === RUNS) break;\n    }\n    P.Q[o + j] = q > QM ? 0 : q;\n    P.R[o + j] = (BUF[T] - BUF[T - 256]) / 256;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    Q: new Uint8Array(H * NS), R: new Float32Array(H * NS), zoom: -1, om0: 0, om1: 1, next: H,\n    beat: 0, hue: NaN, depth: 13, accent: 0,\n    pal: new Float32Array((QM + 1) * 3), dim: new Float32Array(256 * 3), env: new Float32Array(QM + 1),\n    row: new Float32Array(W * 3), lock: new Uint8Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const z = round(cl(k[2], 0, 1) * 200) / 200;\n  const first = P.zoom \u003c 0;\n  if (z !== P.zoom) {\n    // The window narrows to 0.12 wide and slides to the golden section.\n    P.zoom = z;\n    const w = exp(Math.log(0.12) * z), c = 0.5 + (GOLD2 - 0.5) * ((1 - w) / (1 - 0.12));\n    (P.om0 = c - w / 2), (P.om1 = c + w / 2), (P.next = 0);\n  }\n  // The first frame builds all 128 rows; after a turn of Zoom they are built\n  // again from the bottom, four rows a frame.\n  for (let b = first ? H : 4; b > 0 && P.next \u003c H; b--) buildRow(P, H - 1 - P.next++);\n  P.depth = round(2 + 19 * ((cl(k[3], -1, 1) + 1) / 2) ** 0.9);\n  P.beat += d * 0.8 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0]) (P.beat = 0), (P.accent = 1);\n  P.accent = max(0, P.accent - d * 0.9);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    // q = 1, the two wide tongues at the sides, stays dim so the rest show.\n    for (let q = 1; q \u003c= QM; q++) hsv(k[0] + 0.52 + GOLD2 * (q - 1), 0.78, q === 1 ? 0.3 : 0.66 - 0.008 * q, P.pal, q * 3);\n    for (let i = 0; i \u003c 256; i++) hsv(k[0] + 0.62 + (0.3 * i) / 255, 0.7, 0.17, P.dim, i * 3);\n  }\n  // Beat b lights every tongue whose q divides it, and the light dies away\n  // over the beat.\n  const b = floor(P.beat), f = P.beat - b;\n  for (let q = 1; q \u003c= QM; q++) P.env[q] = b % q === 0 ? exp(-3.2 * f) : 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.zoom \u003c 0) return;\n  const { Q, R, pal, dim, env, row, lock } = P, D = P.depth, acc = P.accent;\n  const f = P.beat - floor(P.beat), yb = (H - 1) * (1 - 1.3 * f), rs = 255 / (P.om1 - P.om0), r0 = P.om0;\n  // The scan line: up and down the panel once every 24 beats.\n  const yp = round((H - 1) * (0.5 + 0.5 * cos((TAU * P.beat) / 24)));\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * NS;\n    // On each beat a band of light runs up the tongues that beat lights.\n    const band = exp(-((y - yb) * (y - yb)) / 120);\n    row.fill(0);\n    for (let x = 0; x \u003c W; x++) {\n      // A tongue thinner than an LED still lights the whole LED, so long as\n      // it holds for a row above or below; a lone locked point, a thin\n      // tongue that bends across this column, lights its third.\n      let qs = 99, r = 0, g = 0, b = 0;\n      for (let j = x * SX; j \u003c x * SX + SX; j++) {\n        const q = Q[o + j];\n        if (q && q \u003c= D) {\n          if (q \u003c qs && ((y > 0 && Q[o + j - NS] === q) || (y \u003c H - 1 && Q[o + j + NS] === q))) qs = q;\n          (r += pal[q * 3]), (g += pal[q * 3 + 1]), (b += pal[q * 3 + 2]);\n        } else {\n          // Not locked, or locked past Depth: a dim colour that runs with rho.\n          const i = cl(round((R[o + j] - r0) * rs), 0, 255) * 3;\n          (r += dim[i]), (g += dim[i + 1]), (b += dim[i + 2]);\n        }\n      }\n      if (y === yp) lock[x] = qs \u003c 99 ? qs : 0;\n      if (qs \u003c 99) {\n        const e = min(1, env[qs] * (0.55 + 0.6 * band) + acc), m = 1 + 0.6 * e, wv = 130 * e;\n        display.setPixel(x, y, min(255, pal[qs * 3] * m + wv), min(255, pal[qs * 3 + 1] * m + wv), min(255, pal[qs * 3 + 2] * m + wv));\n      } else display.setPixel(x, y, r / SX, g / SX, b / SX);\n    }\n  }\n  // The devil's staircase at the scan line: rho against Omega, rho scaled so\n  // the bottom row's straight line rho = Omega would run corner to corner.\n  // Its flat steps are the tongues the line crosses, in their colours.\n  const o = yp * NS, sc = (H - 1) / (P.om1 - P.om0);\n  let py = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0;\n    for (let s = 0; s \u003c SX; s++) r += R[o + x * SX + s];\n    const sy = cl(round(H - 1 - (r / SX - r0) * sc), 0, H - 1);\n    const a = py \u003c 0 ? sy : py, y0 = min(a, sy), y1 = max(a, sy), q = lock[x];\n    for (let y = y0; y \u003c= y1; y++) display.setPixel(x, y, 170, 170, 165);\n    if (q) display.setPixel(x, sy, min(255, pal[q * 3] * 1.3 + 100), min(255, pal[q * 3 + 1] * 1.3 + 100), min(255, pal[q * 3 + 2] * 1.3 + 100));\n    py = sy;\n    if (x % 2 === 0 && (yp \u003c y0 || yp > y1)) display.setPixel(x, yp, 150, 150, 150);\n  }\n}\n","layer":{"id":"layer-arnold-tongues","type":"code","name":"arnold-tongues","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Arnold Tongues\n// Family:  rhythm\n// Idea:    The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold tongues of the circle map (Vladimir Arnold, 1961), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right.\n// Knob 2: Tempo. 0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2.\n// Knob 3: Zoom. At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second.\n// Knob 4: Depth. The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points.\n// Buttons: K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.\n\nconst W = 64, H = 128, SX = 3, NS = W * SX, QM = 21, T = 320, EPS = 1e-4, RUNS = 4;\nconst { floor, round, abs, exp, cos, min, max, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst GOLD2 = (3 - Math.sqrt(5)) / 2;\n\n// sin(2 pi u) from a table: the map runs 320 steps for each of 24576 points.\nconst LN = 4096, SIN = new Float64Array(LN + 1);\nfor (let i = 0; i \u003c= LN; i++) SIN[i] = Math.sin((TAU * i) / LN);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The lifted circle map th -> th + Om - (K / 2 pi) sin(2 pi th), from th = 0.\n// Row y has K = 1 - (1 - u)^2 with u = (127 - y) / 127: 0 at the bottom, 1 at\n// the top, and twice as many rows near the top, where the tongues spread, as\n// a straight scale would give. After 320 steps the point is locked to p/q\n// when th moved by exactly p over each of its last four runs of q steps; the\n// smallest such q wins. The rotation number rho is the mean step over the\n// last 256.\nconst kOf = (y) => {\n  const u = 1 - (H - 1 - y) / (H - 1);\n  return 1 - u * u;\n};\nconst BUF = new Float64Array(T + 1);\nfunction buildRow(P, y) {\n  const c = kOf(y) / TAU, o = y * NS, o0 = P.om0, dw = (P.om1 - P.om0) / NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const om = o0 + (j + 0.5) * dw;\n    let th = 0;\n    for (let n = 0; n \u003c T; n++) {\n      BUF[n] = th;\n      const u = (th - floor(th)) * LN, i = u | 0;\n      th += om - c * (SIN[i] + (SIN[i + 1] - SIN[i]) * (u - i));\n    }\n    BUF[T] = th;\n    let q = 1;\n    for (; q \u003c= QM; q++) {\n      const p = round(BUF[T] - BUF[T - q]);\n      let r = 0;\n      while (r \u003c RUNS && abs(BUF[T - r * q] - BUF[T - r * q - q] - p) \u003c EPS) r++;\n      if (r === RUNS) break;\n    }\n    P.Q[o + j] = q > QM ? 0 : q;\n    P.R[o + j] = (BUF[T] - BUF[T - 256]) / 256;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    Q: new Uint8Array(H * NS), R: new Float32Array(H * NS), zoom: -1, om0: 0, om1: 1, next: H,\n    beat: 0, hue: NaN, depth: 13, accent: 0,\n    pal: new Float32Array((QM + 1) * 3), dim: new Float32Array(256 * 3), env: new Float32Array(QM + 1),\n    row: new Float32Array(W * 3), lock: new Uint8Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const z = round(cl(k[2], 0, 1) * 200) / 200;\n  const first = P.zoom \u003c 0;\n  if (z !== P.zoom) {\n    // The window narrows to 0.12 wide and slides to the golden section.\n    P.zoom = z;\n    const w = exp(Math.log(0.12) * z), c = 0.5 + (GOLD2 - 0.5) * ((1 - w) / (1 - 0.12));\n    (P.om0 = c - w / 2), (P.om1 = c + w / 2), (P.next = 0);\n  }\n  // The first frame builds all 128 rows; after a turn of Zoom they are built\n  // again from the bottom, four rows a frame.\n  for (let b = first ? H : 4; b > 0 && P.next \u003c H; b--) buildRow(P, H - 1 - P.next++);\n  P.depth = round(2 + 19 * ((cl(k[3], -1, 1) + 1) / 2) ** 0.9);\n  P.beat += d * 0.8 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0]) (P.beat = 0), (P.accent = 1);\n  P.accent = max(0, P.accent - d * 0.9);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    // q = 1, the two wide tongues at the sides, stays dim so the rest show.\n    for (let q = 1; q \u003c= QM; q++) hsv(k[0] + 0.52 + GOLD2 * (q - 1), 0.78, q === 1 ? 0.3 : 0.66 - 0.008 * q, P.pal, q * 3);\n    for (let i = 0; i \u003c 256; i++) hsv(k[0] + 0.62 + (0.3 * i) / 255, 0.7, 0.17, P.dim, i * 3);\n  }\n  // Beat b lights every tongue whose q divides it, and the light dies away\n  // over the beat.\n  const b = floor(P.beat), f = P.beat - b;\n  for (let q = 1; q \u003c= QM; q++) P.env[q] = b % q === 0 ? exp(-3.2 * f) : 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.zoom \u003c 0) return;\n  const { Q, R, pal, dim, env, row, lock } = P, D = P.depth, acc = P.accent;\n  const f = P.beat - floor(P.beat), yb = (H - 1) * (1 - 1.3 * f), rs = 255 / (P.om1 - P.om0), r0 = P.om0;\n  // The scan line: up and down the panel once every 24 beats.\n  const yp = round((H - 1) * (0.5 + 0.5 * cos((TAU * P.beat) / 24)));\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * NS;\n    // On each beat a band of light runs up the tongues that beat lights.\n    const band = exp(-((y - yb) * (y - yb)) / 120);\n    row.fill(0);\n    for (let x = 0; x \u003c W; x++) {\n      // A tongue thinner than an LED still lights the whole LED, so long as\n      // it holds for a row above or below; a lone locked point, a thin\n      // tongue that bends across this column, lights its third.\n      let qs = 99, r = 0, g = 0, b = 0;\n      for (let j = x * SX; j \u003c x * SX + SX; j++) {\n        const q = Q[o + j];\n        if (q && q \u003c= D) {\n          if (q \u003c qs && ((y > 0 && Q[o + j - NS] === q) || (y \u003c H - 1 && Q[o + j + NS] === q))) qs = q;\n          (r += pal[q * 3]), (g += pal[q * 3 + 1]), (b += pal[q * 3 + 2]);\n        } else {\n          // Not locked, or locked past Depth: a dim colour that runs with rho.\n          const i = cl(round((R[o + j] - r0) * rs), 0, 255) * 3;\n          (r += dim[i]), (g += dim[i + 1]), (b += dim[i + 2]);\n        }\n      }\n      if (y === yp) lock[x] = qs \u003c 99 ? qs : 0;\n      if (qs \u003c 99) {\n        const e = min(1, env[qs] * (0.55 + 0.6 * band) + acc), m = 1 + 0.6 * e, wv = 130 * e;\n        display.setPixel(x, y, min(255, pal[qs * 3] * m + wv), min(255, pal[qs * 3 + 1] * m + wv), min(255, pal[qs * 3 + 2] * m + wv));\n      } else display.setPixel(x, y, r / SX, g / SX, b / SX);\n    }\n  }\n  // The devil's staircase at the scan line: rho against Omega, rho scaled so\n  // the bottom row's straight line rho = Omega would run corner to corner.\n  // Its flat steps are the tongues the line crosses, in their colours.\n  const o = yp * NS, sc = (H - 1) / (P.om1 - P.om0);\n  let py = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0;\n    for (let s = 0; s \u003c SX; s++) r += R[o + x * SX + s];\n    const sy = cl(round(H - 1 - (r / SX - r0) * sc), 0, H - 1);\n    const a = py \u003c 0 ? sy : py, y0 = min(a, sy), y1 = max(a, sy), q = lock[x];\n    for (let y = y0; y \u003c= y1; y++) display.setPixel(x, y, 170, 170, 165);\n    if (q) display.setPixel(x, sy, min(255, pal[q * 3] * 1.3 + 100), min(255, pal[q * 3 + 1] * 1.3 + 100), min(255, pal[q * 3 + 2] * 1.3 + 100));\n    py = sy;\n    if (x % 2 === 0 && (yp \u003c y0 || yp > y1)) display.setPixel(x, yp, 150, 150, 150);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right."},{"name":"Tempo","min":0.2,"max":3,"about":"0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2."},{"name":"Zoom","min":0,"max":1,"about":"At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second."},{"name":"Depth","min":-1,"max":1,"about":"The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points."}],"start":[0,2,0,0.06],"measures":{"motion":0.3954,"detail":0.0597,"edges":0.7533,"complexity":0.3067,"coverage":1,"colour":0.3016,"drift":0.0852},"knobResponse":[0.2048,0.0673,0.163,0.058]},{"slug":"aurora","title":"Aurora","family":"light","round":1,"note":"떠도는 선에 빛 커튼이 걸리고, 빛줄기는 커튼이 흔들리는 것보다 느리게 일렁여요.","idea":"Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n// @ramp oklab 0:#000000 0.18:#04122e 0.45:#0b6b5a 0.72:#3dff9a 0.9:#b8ffd9 1:#f0c8ff\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","layer":{"id":"layer-aurora","type":"code","name":"aurora","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":0.18,"color":"#04122e","alpha":1},{"position":0.45,"color":"#0b6b5a","alpha":1},{"position":0.72,"color":"#3dff9a","alpha":1},{"position":0.9,"color":"#b8ffd9","alpha":1},{"position":1,"color":"#f0c8ff","alpha":1}],"mode":"oklab","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sway","min":0,"max":1,"about":"How far the curtains swing from side to side."},{"name":"Speed","min":0.1,"max":5,"about":"How fast everything drifts."},{"name":"Curtains","min":1,"max":4,"about":"One curtain or a sky of up to four, each its own height."},{"name":"Rays","min":0,"max":1,"about":"From a smooth glow to sharp vertical rays."}],"start":[0,2,1,0.06],"measures":{"motion":0.0423,"detail":0.0219,"edges":0.176,"complexity":1.1219,"coverage":0.4849,"colour":0.2574,"drift":0.0814},"knobResponse":[0.0412,0.0639,0.142,0.0829]},{"slug":"axon","title":"Axon","family":"body","round":23,"note":"어두운 조직 속에서 신경세포 하나가 초록 형광으로 빛나요. 세포체를 떠난 스파이크가 수초 사이의 랑비에 결절을 하나씩 건너뛰며 축삭을 내려가고, 말단 단추가 시냅스 틈 너머로 신호를 넘기면 아래의 자홍색 신경세포가 따라 켜져요. K4 를 올리면 수초가 벗겨져 신호가 기어가다 꺼져요.","idea":"A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.","buttons":"K1 tap fires a burst of four spikes now.","code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","layer":{"id":"layer-axon","type":"code","name":"axon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei."},{"name":"Speed","min":0.2,"max":3,"about":"The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower."},{"name":"Rate","min":1,"max":8,"about":"How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8."},{"name":"Damage","min":0,"max":1,"about":"Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals."}],"start":[0,2,1,0.06],"measures":{"motion":0.2284,"detail":0.0799,"edges":0.4159,"complexity":1.8734,"coverage":0.4953,"colour":0.2394,"drift":0.0867},"knobResponse":[0.1239,0.0564,0.0498,0.061]},{"slug":"aztec-diamond","title":"Aztec Diamond","family":"cells","round":28,"note":"아즈텍 다이아몬드 여덟 개가 패널을 덮고 저마다 도미노 셔플로 자라요. 도미노가 제 방향으로 한 LED 씩 미끄러지고 빈 2×2 칸에 새 쌍이 들어서면, 다 자란 다이아몬드의 네 모서리는 한 색 벽돌로 얼고 북극권 원 안만 뒤섞여요. K3 이 가로와 세로의 몫을 기울여 원을 타원으로 바꾸고, 누르면 처음부터 다시 자라요.","idea":"Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.","buttons":"K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.","code":"// ===== Patternflow pattern =====\n// Title:   Aztec Diamond\n// Family:  cells\n// Idea:    Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino shuffling on the Aztec diamond (Elkies, Kuperberg, Larsen and Propp, 1992) and the arctic circle theorem (Jockusch, Propp and Shor, 1995), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1\n//\n// Knob 1: Hue. Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red.\n// Knob 2: Speed. At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower.\n// Knob 3: Bias. The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way.\n// Knob 4: Checker. How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED.\n// Buttons: K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, floor, abs, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n\n// The four kinds of domino, by orientation and by the colour of the\n// checkerboard square under their first cell: 0 north, 1 east, 2 south,\n// 3 west. At order k a horizontal domino whose left cell is (x, y) goes north\n// when x + y + k is odd and south when it is even; a vertical one goes west\n// when odd and east when even.\nconst kind = (x, y, v, k) => ((x + y + k) & 1 ? (v ? 3 : 0) : v ? 1 : 2);\nconst STEP = [[0, -1], [1, 0], [0, 1], [-1, 0]];\n\n// Aztec diamonds tile the plane. Two of order 32 stand whole on the panel,\n// one above the other; the gaps round them are diamonds of order 31, halved\n// by the sides and quartered by the corners. Those grow only to order 30, so\n// a one-LED diagonal of dark runs between every two diamonds.\n// [centre x, centre y, order, hold in seconds at Speed 2, clock at the start, order at the start]\nconst LAYOUT = [\n  [32, 32, 32, 15, -21, 32],\n  [32, 96, 32, 15, 0, 18],\n  [0, 64, 30, 50, 39, 30],\n  [64, 64, 30, 50, 25, 30],\n  [0, 0, 30, 50, 4, 30],\n  [64, 0, 30, 50, 32, 30],\n  [0, 128, 30, 50, 18, 30],\n  [64, 128, 30, 50, 11, 30],\n];\n\n// A diamond keeps its dominoes as lists (left or top cell, vertical or not,\n// grain) and two pictures of its cells to fade between: per cell 0 for empty\n// or 1 + the kind of the domino on it, and that domino's grain, 204 to 255.\nfunction makeDiamond([cx, cy, N, hold]) {\n  const F = 2 * N, M = N * (N + 1) + 4, C = F * F;\n  return {\n    cx, cy, N, F, hold, k: 0, n: 0, p: 0.5, wait: 0,\n    dx: new Int16Array(M), dy: new Int16Array(M), dv: new Uint8Array(M), dg: new Uint8Array(M),\n    grid: new Int16Array(C).fill(-1),\n    ft: new Uint8Array(C), fg: new Uint8Array(C), tt: new Uint8Array(C), tg: new Uint8Array(C),\n    stage: 0, sub: 1, u: 1, dur: 0.1, clock: 0,\n  };\n}\n\nfunction regrid(D) {\n  const g = D.grid, F = D.F;\n  g.fill(-1);\n  for (let i = 0; i \u003c D.n; i++) {\n    const c = D.dx[i] + D.dy[i] * F;\n    g[c] = i;\n    g[D.dv[i] ? c + F : c + 1] = i;\n  }\n}\n\nfunction add(D, x, y, v) {\n  const i = D.n++;\n  (D.dx[i] = x), (D.dy[i] = y), (D.dv[i] = v), (D.dg[i] = 204 + floor(random() * 52));\n  return i;\n}\n\n// Shuffling, order k to k + 1, in three moves. First the bad blocks go: a\n// south-going domino right above a north-going one, or an east-going one\n// right left of a west-going one, would pass through each other.\nfunction destroy(D) {\n  regrid(D);\n  const { dx, dy, dv, grid: g, k, F } = D;\n  const dead = new Uint8Array(D.n);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F;\n    if (t === 2) {\n      const j = g[c + F];\n      if (j >= 0 && !dv[j] && dx[j] === dx[i] && dy[j] === dy[i] + 1) dead[i] = dead[j] = 1;\n    } else if (t === 1) {\n      const j = g[c + 1];\n      if (j >= 0 && dv[j] && dx[j] === dx[i] + 1 && dy[j] === dy[i]) dead[i] = dead[j] = 1;\n    }\n  }\n  let m = 0;\n  for (let i = 0; i \u003c D.n; i++)\n    if (!dead[i]) (dx[m] = dx[i]), (dy[m] = dy[i]), (dv[m] = dv[i]), (D.dg[m] = D.dg[i]), m++;\n  D.n = m;\n}\n\n// Then every domino slides one cell in its own direction.\nfunction slide(D) {\n  const { dx, dy, dv, k } = D;\n  for (let i = 0; i \u003c D.n; i++) {\n    const s = STEP[kind(dx[i], dy[i], dv[i], k)];\n    (dx[i] += s[0]), (dy[i] += s[1]);\n  }\n  D.k = k + 1;\n  regrid(D);\n}\n\n// And the holes left in the bigger diamond, which always come as 2x2\n// blocks, each take a random pair: two horizontal with probability p,\n// two vertical otherwise.\nfunction create(D) {\n  const { grid: g, k, p, N, F } = D;\n  for (let y = N - k; y \u003c N + k; y++) {\n    const r = k - abs(2 * y + 1 - F) / 2 + 0.5;\n    for (let x = N - r; x \u003c N + r; x++) {\n      const c = x + y * F;\n      if (g[c] >= 0) continue;\n      if (random() \u003c p) {\n        g[c] = g[c + 1] = add(D, x, y, 0);\n        g[c + F] = g[c + F + 1] = add(D, x, y + 1, 0);\n      } else {\n        g[c] = g[c + F] = add(D, x, y, 1);\n        g[c + 1] = g[c + F + 1] = add(D, x + 1, y, 1);\n      }\n    }\n  }\n}\n\n// At full size the tiling keeps moving by flips: a 2x2 block covered by two\n// parallel dominoes turns over to the other pair with the same odds as a\n// fresh block. The weighted uniform measure stays put under it, so the\n// frozen corners hold still and only the arctic circle churns.\nfunction flips(D, tries) {\n  const { dx, dy, dv, grid: g, p, F } = D;\n  for (let t = 0; t \u003c tries; t++) {\n    const x = floor(random() * (F - 1)), y = floor(random() * (F - 1)), c = x + y * F, a = g[c];\n    if (a \u003c 0 || dx[a] !== x || dy[a] !== y) continue;\n    const h = random() \u003c p;\n    if (!dv[a]) {\n      const b = g[c + F];\n      if (b \u003c 0 || dv[b] || dx[b] !== x || dy[b] !== y + 1 || h) continue;\n      (dv[a] = dv[b] = 1), (dx[b] = x + 1), (dy[b] = y);\n      (g[c + F] = a), (g[c + 1] = b);\n    } else {\n      const b = g[c + 1];\n      if (b \u003c 0 || !dv[b] || dx[b] !== x + 1 || dy[b] !== y || !h) continue;\n      (dv[a] = dv[b] = 0), (dx[b] = x), (dy[b] = y + 1);\n      (g[c + 1] = a), (g[c + F] = b);\n    }\n  }\n}\n\n// The picture a diamond fades to.\nfunction paint(D) {\n  const { dx, dy, dv, dg, k, F, tt, tg } = D;\n  tt.fill(0);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F, c2 = dv[i] ? c + F : c + 1;\n    (tt[c] = tt[c2] = t + 1), (tg[c] = tg[c2] = dg[i]);\n  }\n}\n\nfunction retire(D, dur) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  (D.u = 0), (D.stage = 2), (D.dur = dur), (D.n = 0);\n  paint(D);\n}\n\n// One move of a diamond's life. Growing, a step from order k to k + 1 takes\n// two fades: the bad pairs go out while every other domino slides, then the\n// holes fill. Grown, it flips blocks a batch at a time until its hold runs\n// out, fades and grows again from order 1.\nfunction begin(D, P) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  D.u = 0;\n  const s = P.speed, T = 0.9 / s;\n  if (D.stage === 0) {\n    if (D.sub === 0) create(D), (D.sub = 1), (D.dur = 0.4 * T);\n    else if (D.k >= D.N) {\n      (D.stage = 1), (D.clock = -D.wait), (D.wait = 0);\n      return begin(D, P);\n    } else if (D.k === 0) (D.k = 1), regrid(D), create(D), (D.dur = 0.4 * T);\n    else destroy(D), slide(D), (D.sub = 0), (D.dur = 0.6 * T);\n  } else if (D.stage === 1) {\n    if (D.clock > (D.hold * 2) / s) {\n      if (D.N \u003c 32) D.hold = 40 + 20 * random();\n      return retire(D, 0.8);\n    }\n    flips(D, 500), (D.dur = 0.35 / s);\n  } else {\n    (D.stage = 0), (D.sub = 1), (D.k = 0), (D.n = 0);\n    return begin(D, P);\n  }\n  paint(D);\n}\n\n// Which diamond and which of its cells each LED shows; -1 is the dark seam.\nconst OWN = new Int8Array(NP).fill(-1), CELL = new Int32Array(NP);\nLAYOUT.forEach(([cx, cy, N], d) => {\n  for (let y = 0; y \u003c 2 * N; y++)\n    for (let x = 0; x \u003c 2 * N; x++) {\n      const X = cx - N + x, Y = cy - N + y;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H || abs(2 * x + 1 - 2 * N) + abs(2 * y + 1 - 2 * N) > 2 * N) continue;\n      (OWN[X + Y * W] = d), (CELL[X + Y * W] = x + y * 2 * N);\n    }\n});\n\nexport function setup(params) {\n  params.s = { fresh: true, speed: 2, hue: 0, dark: 0.4, D: LAYOUT.map(makeDiamond), col: new Float32Array(12) };\n}\n\n// The top diamond opens grown and churning, the bottom one at order 18 and\n// still growing, the six round them grown and due to regrow one by one,\n// the first after 11 seconds. They grow on the first frame, once Bias is known.\nfunction opening(P) {\n  P.D.forEach((D, i) => {\n    begin(D, P);\n    while (D.k \u003c LAYOUT[i][5] || (D.k >= D.N && D.stage === 0)) begin(D, P);\n    D.clock = LAYOUT[i][4];\n  });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const bias = cl(k[2], -1, 1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.dark = 0.38 * (1 + cl(k[3], -1, 1));\n  P.D.forEach((D, i) => (D.p = 0.5 + (i \u003c 2 ? 0.4 : -0.4) * bias));\n  if (P.fresh) (P.fresh = false), opening(P);\n  // K1: every diamond fades and grows again from order 1, all together; the\n  // bottom one then holds half a cycle longer, so the two take turns again.\n  if (input.btnPressed && input.btnPressed[0])\n    P.D.forEach((D, i) => {\n      D.wait = ((i === 1 ? 15 : i > 1 ? 30 * random() : 0) * 2) / P.speed;\n      retire(D, 0.4);\n    });\n  for (const D of P.D) {\n    D.clock += d;\n    D.u += d / D.dur;\n    if (D.u >= 1) begin(D, P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const col = P.col, sm = 1 - P.dark, E = P.D.map((D) => ease(cl(D.u, 0, 1)));\n  // Orange north, green east, blue south, magenta west at Hue 0.\n  for (let t = 0; t \u003c 4; t++) hsv(P.hue + 0.1 + t * 0.25, 0.94, 1, col, t * 3);\n  for (let p = 0; p \u003c NP; p++) {\n    const d = OWN[p], x = p % W, y = (p / W) | 0;\n    if (d \u003c 0) {\n      display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    // The checkerboard stays put on the LEDs while the dominoes slide over it.\n    const D = P.D[d], c = CELL[p], a = D.ft[c], b = D.tt[c], e = E[d], lv = (x + y) & 1 ? sm : 1;\n    let r = 0, g = 0, bl = 0;\n    if (a) {\n      const w = D.fg[c] * lv * (1 - e), q = (a - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    if (b) {\n      const w = D.tg[c] * lv * e, q = (b - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    display.setPixel(x, y, min(255, r), min(255, g), min(255, bl));\n  }\n}\n","layer":{"id":"layer-aztec-diamond","type":"code","name":"aztec-diamond","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aztec Diamond\n// Family:  cells\n// Idea:    Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino shuffling on the Aztec diamond (Elkies, Kuperberg, Larsen and Propp, 1992) and the arctic circle theorem (Jockusch, Propp and Shor, 1995), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1\n//\n// Knob 1: Hue. Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red.\n// Knob 2: Speed. At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower.\n// Knob 3: Bias. The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way.\n// Knob 4: Checker. How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED.\n// Buttons: K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, floor, abs, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n\n// The four kinds of domino, by orientation and by the colour of the\n// checkerboard square under their first cell: 0 north, 1 east, 2 south,\n// 3 west. At order k a horizontal domino whose left cell is (x, y) goes north\n// when x + y + k is odd and south when it is even; a vertical one goes west\n// when odd and east when even.\nconst kind = (x, y, v, k) => ((x + y + k) & 1 ? (v ? 3 : 0) : v ? 1 : 2);\nconst STEP = [[0, -1], [1, 0], [0, 1], [-1, 0]];\n\n// Aztec diamonds tile the plane. Two of order 32 stand whole on the panel,\n// one above the other; the gaps round them are diamonds of order 31, halved\n// by the sides and quartered by the corners. Those grow only to order 30, so\n// a one-LED diagonal of dark runs between every two diamonds.\n// [centre x, centre y, order, hold in seconds at Speed 2, clock at the start, order at the start]\nconst LAYOUT = [\n  [32, 32, 32, 15, -21, 32],\n  [32, 96, 32, 15, 0, 18],\n  [0, 64, 30, 50, 39, 30],\n  [64, 64, 30, 50, 25, 30],\n  [0, 0, 30, 50, 4, 30],\n  [64, 0, 30, 50, 32, 30],\n  [0, 128, 30, 50, 18, 30],\n  [64, 128, 30, 50, 11, 30],\n];\n\n// A diamond keeps its dominoes as lists (left or top cell, vertical or not,\n// grain) and two pictures of its cells to fade between: per cell 0 for empty\n// or 1 + the kind of the domino on it, and that domino's grain, 204 to 255.\nfunction makeDiamond([cx, cy, N, hold]) {\n  const F = 2 * N, M = N * (N + 1) + 4, C = F * F;\n  return {\n    cx, cy, N, F, hold, k: 0, n: 0, p: 0.5, wait: 0,\n    dx: new Int16Array(M), dy: new Int16Array(M), dv: new Uint8Array(M), dg: new Uint8Array(M),\n    grid: new Int16Array(C).fill(-1),\n    ft: new Uint8Array(C), fg: new Uint8Array(C), tt: new Uint8Array(C), tg: new Uint8Array(C),\n    stage: 0, sub: 1, u: 1, dur: 0.1, clock: 0,\n  };\n}\n\nfunction regrid(D) {\n  const g = D.grid, F = D.F;\n  g.fill(-1);\n  for (let i = 0; i \u003c D.n; i++) {\n    const c = D.dx[i] + D.dy[i] * F;\n    g[c] = i;\n    g[D.dv[i] ? c + F : c + 1] = i;\n  }\n}\n\nfunction add(D, x, y, v) {\n  const i = D.n++;\n  (D.dx[i] = x), (D.dy[i] = y), (D.dv[i] = v), (D.dg[i] = 204 + floor(random() * 52));\n  return i;\n}\n\n// Shuffling, order k to k + 1, in three moves. First the bad blocks go: a\n// south-going domino right above a north-going one, or an east-going one\n// right left of a west-going one, would pass through each other.\nfunction destroy(D) {\n  regrid(D);\n  const { dx, dy, dv, grid: g, k, F } = D;\n  const dead = new Uint8Array(D.n);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F;\n    if (t === 2) {\n      const j = g[c + F];\n      if (j >= 0 && !dv[j] && dx[j] === dx[i] && dy[j] === dy[i] + 1) dead[i] = dead[j] = 1;\n    } else if (t === 1) {\n      const j = g[c + 1];\n      if (j >= 0 && dv[j] && dx[j] === dx[i] + 1 && dy[j] === dy[i]) dead[i] = dead[j] = 1;\n    }\n  }\n  let m = 0;\n  for (let i = 0; i \u003c D.n; i++)\n    if (!dead[i]) (dx[m] = dx[i]), (dy[m] = dy[i]), (dv[m] = dv[i]), (D.dg[m] = D.dg[i]), m++;\n  D.n = m;\n}\n\n// Then every domino slides one cell in its own direction.\nfunction slide(D) {\n  const { dx, dy, dv, k } = D;\n  for (let i = 0; i \u003c D.n; i++) {\n    const s = STEP[kind(dx[i], dy[i], dv[i], k)];\n    (dx[i] += s[0]), (dy[i] += s[1]);\n  }\n  D.k = k + 1;\n  regrid(D);\n}\n\n// And the holes left in the bigger diamond, which always come as 2x2\n// blocks, each take a random pair: two horizontal with probability p,\n// two vertical otherwise.\nfunction create(D) {\n  const { grid: g, k, p, N, F } = D;\n  for (let y = N - k; y \u003c N + k; y++) {\n    const r = k - abs(2 * y + 1 - F) / 2 + 0.5;\n    for (let x = N - r; x \u003c N + r; x++) {\n      const c = x + y * F;\n      if (g[c] >= 0) continue;\n      if (random() \u003c p) {\n        g[c] = g[c + 1] = add(D, x, y, 0);\n        g[c + F] = g[c + F + 1] = add(D, x, y + 1, 0);\n      } else {\n        g[c] = g[c + F] = add(D, x, y, 1);\n        g[c + 1] = g[c + F + 1] = add(D, x + 1, y, 1);\n      }\n    }\n  }\n}\n\n// At full size the tiling keeps moving by flips: a 2x2 block covered by two\n// parallel dominoes turns over to the other pair with the same odds as a\n// fresh block. The weighted uniform measure stays put under it, so the\n// frozen corners hold still and only the arctic circle churns.\nfunction flips(D, tries) {\n  const { dx, dy, dv, grid: g, p, F } = D;\n  for (let t = 0; t \u003c tries; t++) {\n    const x = floor(random() * (F - 1)), y = floor(random() * (F - 1)), c = x + y * F, a = g[c];\n    if (a \u003c 0 || dx[a] !== x || dy[a] !== y) continue;\n    const h = random() \u003c p;\n    if (!dv[a]) {\n      const b = g[c + F];\n      if (b \u003c 0 || dv[b] || dx[b] !== x || dy[b] !== y + 1 || h) continue;\n      (dv[a] = dv[b] = 1), (dx[b] = x + 1), (dy[b] = y);\n      (g[c + F] = a), (g[c + 1] = b);\n    } else {\n      const b = g[c + 1];\n      if (b \u003c 0 || !dv[b] || dx[b] !== x + 1 || dy[b] !== y || !h) continue;\n      (dv[a] = dv[b] = 0), (dx[b] = x), (dy[b] = y + 1);\n      (g[c + 1] = a), (g[c + F] = b);\n    }\n  }\n}\n\n// The picture a diamond fades to.\nfunction paint(D) {\n  const { dx, dy, dv, dg, k, F, tt, tg } = D;\n  tt.fill(0);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F, c2 = dv[i] ? c + F : c + 1;\n    (tt[c] = tt[c2] = t + 1), (tg[c] = tg[c2] = dg[i]);\n  }\n}\n\nfunction retire(D, dur) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  (D.u = 0), (D.stage = 2), (D.dur = dur), (D.n = 0);\n  paint(D);\n}\n\n// One move of a diamond's life. Growing, a step from order k to k + 1 takes\n// two fades: the bad pairs go out while every other domino slides, then the\n// holes fill. Grown, it flips blocks a batch at a time until its hold runs\n// out, fades and grows again from order 1.\nfunction begin(D, P) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  D.u = 0;\n  const s = P.speed, T = 0.9 / s;\n  if (D.stage === 0) {\n    if (D.sub === 0) create(D), (D.sub = 1), (D.dur = 0.4 * T);\n    else if (D.k >= D.N) {\n      (D.stage = 1), (D.clock = -D.wait), (D.wait = 0);\n      return begin(D, P);\n    } else if (D.k === 0) (D.k = 1), regrid(D), create(D), (D.dur = 0.4 * T);\n    else destroy(D), slide(D), (D.sub = 0), (D.dur = 0.6 * T);\n  } else if (D.stage === 1) {\n    if (D.clock > (D.hold * 2) / s) {\n      if (D.N \u003c 32) D.hold = 40 + 20 * random();\n      return retire(D, 0.8);\n    }\n    flips(D, 500), (D.dur = 0.35 / s);\n  } else {\n    (D.stage = 0), (D.sub = 1), (D.k = 0), (D.n = 0);\n    return begin(D, P);\n  }\n  paint(D);\n}\n\n// Which diamond and which of its cells each LED shows; -1 is the dark seam.\nconst OWN = new Int8Array(NP).fill(-1), CELL = new Int32Array(NP);\nLAYOUT.forEach(([cx, cy, N], d) => {\n  for (let y = 0; y \u003c 2 * N; y++)\n    for (let x = 0; x \u003c 2 * N; x++) {\n      const X = cx - N + x, Y = cy - N + y;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H || abs(2 * x + 1 - 2 * N) + abs(2 * y + 1 - 2 * N) > 2 * N) continue;\n      (OWN[X + Y * W] = d), (CELL[X + Y * W] = x + y * 2 * N);\n    }\n});\n\nexport function setup(params) {\n  params.s = { fresh: true, speed: 2, hue: 0, dark: 0.4, D: LAYOUT.map(makeDiamond), col: new Float32Array(12) };\n}\n\n// The top diamond opens grown and churning, the bottom one at order 18 and\n// still growing, the six round them grown and due to regrow one by one,\n// the first after 11 seconds. They grow on the first frame, once Bias is known.\nfunction opening(P) {\n  P.D.forEach((D, i) => {\n    begin(D, P);\n    while (D.k \u003c LAYOUT[i][5] || (D.k >= D.N && D.stage === 0)) begin(D, P);\n    D.clock = LAYOUT[i][4];\n  });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const bias = cl(k[2], -1, 1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.dark = 0.38 * (1 + cl(k[3], -1, 1));\n  P.D.forEach((D, i) => (D.p = 0.5 + (i \u003c 2 ? 0.4 : -0.4) * bias));\n  if (P.fresh) (P.fresh = false), opening(P);\n  // K1: every diamond fades and grows again from order 1, all together; the\n  // bottom one then holds half a cycle longer, so the two take turns again.\n  if (input.btnPressed && input.btnPressed[0])\n    P.D.forEach((D, i) => {\n      D.wait = ((i === 1 ? 15 : i > 1 ? 30 * random() : 0) * 2) / P.speed;\n      retire(D, 0.4);\n    });\n  for (const D of P.D) {\n    D.clock += d;\n    D.u += d / D.dur;\n    if (D.u >= 1) begin(D, P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const col = P.col, sm = 1 - P.dark, E = P.D.map((D) => ease(cl(D.u, 0, 1)));\n  // Orange north, green east, blue south, magenta west at Hue 0.\n  for (let t = 0; t \u003c 4; t++) hsv(P.hue + 0.1 + t * 0.25, 0.94, 1, col, t * 3);\n  for (let p = 0; p \u003c NP; p++) {\n    const d = OWN[p], x = p % W, y = (p / W) | 0;\n    if (d \u003c 0) {\n      display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    // The checkerboard stays put on the LEDs while the dominoes slide over it.\n    const D = P.D[d], c = CELL[p], a = D.ft[c], b = D.tt[c], e = E[d], lv = (x + y) & 1 ? sm : 1;\n    let r = 0, g = 0, bl = 0;\n    if (a) {\n      const w = D.fg[c] * lv * (1 - e), q = (a - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    if (b) {\n      const w = D.tg[c] * lv * e, q = (b - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    display.setPixel(x, y, min(255, r), min(255, g), min(255, bl));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower."},{"name":"Bias","min":-1,"max":1,"about":"The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way."},{"name":"Checker","min":-1,"max":1,"about":"How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED."}],"start":[0,2,0,0.06],"measures":{"motion":0.2173,"detail":0.3498,"edges":0.9816,"complexity":1.6331,"coverage":0.888,"colour":0.6403,"drift":0.1071},"knobResponse":[0.459,0.1665,0.2603,0.1486]},{"slug":"bait-ball","title":"Bait Ball","family":"ocean","round":23,"note":"옆에서 본 푸른 바다를 정어리 떼 공이 거의 다 채워요. 떼가 한꺼번에 몸을 틀면 은빛 물결이 공을 가로지르고, 등을 돌리면 짙은 남색으로 가라앉아요. 상어와 돌고래가 뚫고 지나간 구멍은 뒤에서 다시 닫히고, 가넷이 수면에서 거품 꼬리를 끌며 내리꽂혀요.","idea":"Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.","buttons":"K1 tap sends a hunter charging through the ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-bait-ball","type":"code","name":"bait-ball","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower."},{"name":"Predators","min":1,"max":5,"about":"How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them."},{"name":"Sun","min":0,"max":1,"about":"The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel."}],"start":[0,2,1,0.06],"measures":{"motion":0.8889,"detail":0.2376,"edges":0.5511,"complexity":1.4993,"coverage":0.9518,"colour":0.2846,"drift":0.3724},"knobResponse":[0.0519,0.3412,0.1352,0.1016]},{"slug":"ballistic-deposition","title":"Ballistic Deposition","family":"particle","round":30,"note":"입자가 64열 위로 곧게 떨어져 처음 닿는 자리에 붙어요. 처마 밑이 빈 퇴적물이 내려앉은 차례대로 띠를 이루고, 띠의 경계가 거칠어지는 앞면의 지난 모습이에요.","idea":"Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.","buttons":"K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.","code":"// ===== Patternflow pattern =====\n// Title:   Ballistic Deposition\n// Family:  particle\n// Idea:    Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: ballistic deposition (Marjorie J. Vold, 1959), whose surface is in the Kardar-Parisi-Zhang class (1986), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24\n//\n// Knob 1: Hue. Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green.\n// Knob 2: Speed. Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second.\n// Knob 3: Slip. The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000.\n// Knob 4: Layers. How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows.\n// Buttons: K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.\n\n// On 64 columns that wrap round, the front's width grows from a flat start\n// as t^(1/3), the KPZ exponent, and stops near 4.5 rows once its bumps are\n// as wide as the panel; the bands keep each stage of it as it scrolls by.\nconst W = 64, H = 128, R = 512, RM = R - 1;\nconst { min, max, floor, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst MAXF = 1024, MAXL = 256;\nconst FALL = 70; // rows a second\nconst FRONT = 0.8; // the camera holds the mean front this far up the panel\nconst LID = 0x7fffffff;\n\nexport function setup(params) {\n  params.s = {\n    fresh: true,\n    h: new Int32Array(W), // rows taken in each column, counting the particles still falling to it\n    vh: new Int32Array(W), // the same for the particles that have landed\n    cell: new Int32Array(W * R), // particle number, 0 for a hole\n    row: new Int32Array(R).fill(-1), // the world row each ring row holds\n    n: 0, base: 0, acc: 0, t: 0,\n    fx: new Int16Array(MAXF), fy: new Float32Array(MAXF), fto: new Int32Array(MAXF), fn: new Int32Array(MAXF), nf: 0,\n    lx: new Int16Array(MAXL), ly: new Int32Array(MAXL), lt: new Float32Array(MAXL).fill(-9), li: 0,\n    hue: 0, layers: 6,\n    pal: new Float32Array(256 * 3), palKey: new Int32Array(256).fill(-1),\n  };\n}\n\n// Vold's rule. A particle falling down column x stops on its own column's top\n// or, if it sticks sideways, beside the top particle of a taller neighbour:\n// h_x \u003c- max(h_{x-1}, h_x + 1, h_{x+1}). The columns wrap round.\nfunction deposit(P, x, stick) {\n  const h = P.h;\n  let y = h[x];\n  if (stick) y = max(y, h[(x + 63) & 63] - 1, h[(x + 1) & 63] - 1);\n  h[x] = y + 1;\n  return y;\n}\n\n// The deposit lives in a ring of 512 rows; a row is wiped when a particle\n// first reaches it, and rows far below the camera are written over.\nfunction place(P, x, y, n) {\n  const rr = y & RM;\n  if (P.row[rr] !== y) {\n    if (P.row[rr] > y) return;\n    P.row[rr] = y;\n    P.cell.fill(0, rr * W, rr * W + W);\n  }\n  P.cell[rr * W + x] = n;\n  if (y >= P.vh[x]) P.vh[x] = y + 1;\n}\n\nconst meanH = (h) => {\n  let s = 0;\n  for (let x = 0; x \u003c W; x++) s += h[x];\n  return s / W;\n};\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 6], d = cl(dt || 0, 0, 0.1);\n  const speed = cl(k[1], 0.2, 3), slip = cl(k[2], 0, 1);\n  P.hue = k[0];\n  P.layers = cl(k[3], 6, 24);\n  P.t += d;\n  // The opening deposit is laid on a flat floor before the first frame,\n  // until its mean front stands at the camera's mark.\n  if (P.fresh) {\n    P.fresh = false;\n    while (meanH(P.h) \u003c FRONT * H)\n      for (let i = 0; i \u003c W; i++) {\n        const x = floor(random() * W);\n        place(P, x, deposit(P, x, random() >= slip), ++P.n);\n      }\n  }\n  // K1: a flat lid one row above the highest particle. The front starts\n  // flat again and roughens on top of it.\n  if (input.btnPressed && input.btnPressed[0]) {\n    let y = 0;\n    for (let x = 0; x \u003c W; x++) y = max(y, P.h[x]);\n    for (let x = 0; x \u003c W; x++) place(P, x, y, LID), (P.h[x] = y + 1);\n    for (let i = 0; i \u003c P.nf; i++) P.fto[i] = deposit(P, P.fx[i], random() >= slip);\n  }\n  // Each particle's landing is settled the moment it leaves the top, against\n  // the deposit as all earlier particles left it, so the order is Vold's\n  // one at a time; the fall to that place is only shown.\n  P.acc += 4 * Math.pow(75, (speed - 0.2) / 2.8) * d;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    if (P.nf >= MAXF) continue;\n    const i = P.nf++, x = floor(random() * W);\n    P.fx[i] = x;\n    P.fto[i] = deposit(P, x, random() >= slip);\n    P.fn[i] = ++P.n;\n    P.fy[i] = max(P.base + H + random() * FALL * d, P.fto[i] + 1);\n  }\n  for (let i = 0; i \u003c P.nf; i++) {\n    P.fy[i] -= FALL * d;\n    if (P.fy[i] > P.fto[i]) continue;\n    place(P, P.fx[i], P.fto[i], P.fn[i]);\n    const j = P.li++ & (MAXL - 1);\n    (P.lx[j] = P.fx[i]), (P.ly[j] = P.fto[i]), (P.lt[j] = P.t);\n    P.nf--;\n    (P.fx[i] = P.fx[P.nf]), (P.fy[i] = P.fy[P.nf]), (P.fto[i] = P.fto[P.nf]), (P.fn[i] = P.fn[P.nf]);\n    i--;\n  }\n  const goal = meanH(P.vh) - FRONT * H;\n  if (goal > P.base) P.base += (goal - P.base) * min(1, d * 4);\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const B = round(P.base), per = W * P.layers, pal = P.pal, key = P.palKey;\n  // A band is Layers times 64 particles, counted in landing order. Bands\n  // alternate between two colours 0.3 of the wheel apart, and the pair\n  // wanders 0.125 up the wheel and back over ten bands.\n  const colour = (n) => {\n    const b = floor((n - 1) / per), q = b & 255;\n    if (key[q] !== b) {\n      key[q] = b;\n      const odd = b & 1, u = b % 10, tri = u \u003c 5 ? u : 10 - u;\n      hsv(P.hue + 0.48 + 0.025 * tri + (odd ? 0.3 : 0), odd ? 0.8 : 0.9, odd ? 0.85 : 1, pal, q * 3);\n    }\n    return q * 3;\n  };\n  for (let sy = 0; sy \u003c H; sy++) {\n    // Older deposit dims with depth, to 55% at the bottom edge.\n    const wy = B + H - 1 - sy, rr = wy & RM, ok = wy >= 0 && P.row[rr] === wy, fade = 1 - 0.45 * cl((sy - 30) / 98, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const n = ok ? P.cell[rr * W + x] : 0;\n      if (!n) display.setPixel(x, sy, 0, 0, 0);\n      else if (n === LID) display.setPixel(x, sy, 200, 200, 200);\n      else {\n        const q = colour(n);\n        // The top particle of each column, the front itself, burns pale.\n        if (wy === P.vh[x] - 1) display.setPixel(x, sy, pal[q] * 0.35 + 166, pal[q + 1] * 0.35 + 166, pal[q + 2] * 0.35 + 166);\n        else display.setPixel(x, sy, pal[q] * fade, pal[q + 1] * fade, pal[q + 2] * fade);\n      }\n    }\n  }\n  // Fresh landings flash white and settle into their band's colour.\n  for (let j = 0; j \u003c MAXL; j++) {\n    const age = P.t - P.lt[j];\n    if (age > 0.4) continue;\n    const y = P.ly[j], sy = B + H - 1 - y, rr = y & RM, n = P.row[rr] === y ? P.cell[rr * W + P.lx[j]] : 0;\n    if (sy \u003c 0 || sy >= H || !n || n === LID) continue;\n    const q = colour(n), a = age / 0.4, w = 255 * (1 - a);\n    display.setPixel(P.lx[j], sy, w + pal[q] * a, w + pal[q + 1] * a, w + pal[q + 2] * a);\n  }\n  // Particles in flight: a white head and a short grey tail.\n  for (let i = 0; i \u003c P.nf; i++) {\n    const sy = B + H - 1 - floor(P.fy[i]);\n    for (let t = 0; t \u003c 3; t++) {\n      const y = sy - t, v = t ? 150 - 45 * t : 255;\n      if (y >= 0 && y \u003c H) display.setPixel(P.fx[i], y, v, v, v);\n    }\n  }\n}\n","layer":{"id":"layer-ballistic-deposition","type":"code","name":"ballistic-deposition","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ballistic Deposition\n// Family:  particle\n// Idea:    Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: ballistic deposition (Marjorie J. Vold, 1959), whose surface is in the Kardar-Parisi-Zhang class (1986), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24\n//\n// Knob 1: Hue. Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green.\n// Knob 2: Speed. Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second.\n// Knob 3: Slip. The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000.\n// Knob 4: Layers. How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows.\n// Buttons: K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.\n\n// On 64 columns that wrap round, the front's width grows from a flat start\n// as t^(1/3), the KPZ exponent, and stops near 4.5 rows once its bumps are\n// as wide as the panel; the bands keep each stage of it as it scrolls by.\nconst W = 64, H = 128, R = 512, RM = R - 1;\nconst { min, max, floor, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst MAXF = 1024, MAXL = 256;\nconst FALL = 70; // rows a second\nconst FRONT = 0.8; // the camera holds the mean front this far up the panel\nconst LID = 0x7fffffff;\n\nexport function setup(params) {\n  params.s = {\n    fresh: true,\n    h: new Int32Array(W), // rows taken in each column, counting the particles still falling to it\n    vh: new Int32Array(W), // the same for the particles that have landed\n    cell: new Int32Array(W * R), // particle number, 0 for a hole\n    row: new Int32Array(R).fill(-1), // the world row each ring row holds\n    n: 0, base: 0, acc: 0, t: 0,\n    fx: new Int16Array(MAXF), fy: new Float32Array(MAXF), fto: new Int32Array(MAXF), fn: new Int32Array(MAXF), nf: 0,\n    lx: new Int16Array(MAXL), ly: new Int32Array(MAXL), lt: new Float32Array(MAXL).fill(-9), li: 0,\n    hue: 0, layers: 6,\n    pal: new Float32Array(256 * 3), palKey: new Int32Array(256).fill(-1),\n  };\n}\n\n// Vold's rule. A particle falling down column x stops on its own column's top\n// or, if it sticks sideways, beside the top particle of a taller neighbour:\n// h_x \u003c- max(h_{x-1}, h_x + 1, h_{x+1}). The columns wrap round.\nfunction deposit(P, x, stick) {\n  const h = P.h;\n  let y = h[x];\n  if (stick) y = max(y, h[(x + 63) & 63] - 1, h[(x + 1) & 63] - 1);\n  h[x] = y + 1;\n  return y;\n}\n\n// The deposit lives in a ring of 512 rows; a row is wiped when a particle\n// first reaches it, and rows far below the camera are written over.\nfunction place(P, x, y, n) {\n  const rr = y & RM;\n  if (P.row[rr] !== y) {\n    if (P.row[rr] > y) return;\n    P.row[rr] = y;\n    P.cell.fill(0, rr * W, rr * W + W);\n  }\n  P.cell[rr * W + x] = n;\n  if (y >= P.vh[x]) P.vh[x] = y + 1;\n}\n\nconst meanH = (h) => {\n  let s = 0;\n  for (let x = 0; x \u003c W; x++) s += h[x];\n  return s / W;\n};\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 6], d = cl(dt || 0, 0, 0.1);\n  const speed = cl(k[1], 0.2, 3), slip = cl(k[2], 0, 1);\n  P.hue = k[0];\n  P.layers = cl(k[3], 6, 24);\n  P.t += d;\n  // The opening deposit is laid on a flat floor before the first frame,\n  // until its mean front stands at the camera's mark.\n  if (P.fresh) {\n    P.fresh = false;\n    while (meanH(P.h) \u003c FRONT * H)\n      for (let i = 0; i \u003c W; i++) {\n        const x = floor(random() * W);\n        place(P, x, deposit(P, x, random() >= slip), ++P.n);\n      }\n  }\n  // K1: a flat lid one row above the highest particle. The front starts\n  // flat again and roughens on top of it.\n  if (input.btnPressed && input.btnPressed[0]) {\n    let y = 0;\n    for (let x = 0; x \u003c W; x++) y = max(y, P.h[x]);\n    for (let x = 0; x \u003c W; x++) place(P, x, y, LID), (P.h[x] = y + 1);\n    for (let i = 0; i \u003c P.nf; i++) P.fto[i] = deposit(P, P.fx[i], random() >= slip);\n  }\n  // Each particle's landing is settled the moment it leaves the top, against\n  // the deposit as all earlier particles left it, so the order is Vold's\n  // one at a time; the fall to that place is only shown.\n  P.acc += 4 * Math.pow(75, (speed - 0.2) / 2.8) * d;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    if (P.nf >= MAXF) continue;\n    const i = P.nf++, x = floor(random() * W);\n    P.fx[i] = x;\n    P.fto[i] = deposit(P, x, random() >= slip);\n    P.fn[i] = ++P.n;\n    P.fy[i] = max(P.base + H + random() * FALL * d, P.fto[i] + 1);\n  }\n  for (let i = 0; i \u003c P.nf; i++) {\n    P.fy[i] -= FALL * d;\n    if (P.fy[i] > P.fto[i]) continue;\n    place(P, P.fx[i], P.fto[i], P.fn[i]);\n    const j = P.li++ & (MAXL - 1);\n    (P.lx[j] = P.fx[i]), (P.ly[j] = P.fto[i]), (P.lt[j] = P.t);\n    P.nf--;\n    (P.fx[i] = P.fx[P.nf]), (P.fy[i] = P.fy[P.nf]), (P.fto[i] = P.fto[P.nf]), (P.fn[i] = P.fn[P.nf]);\n    i--;\n  }\n  const goal = meanH(P.vh) - FRONT * H;\n  if (goal > P.base) P.base += (goal - P.base) * min(1, d * 4);\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const B = round(P.base), per = W * P.layers, pal = P.pal, key = P.palKey;\n  // A band is Layers times 64 particles, counted in landing order. Bands\n  // alternate between two colours 0.3 of the wheel apart, and the pair\n  // wanders 0.125 up the wheel and back over ten bands.\n  const colour = (n) => {\n    const b = floor((n - 1) / per), q = b & 255;\n    if (key[q] !== b) {\n      key[q] = b;\n      const odd = b & 1, u = b % 10, tri = u \u003c 5 ? u : 10 - u;\n      hsv(P.hue + 0.48 + 0.025 * tri + (odd ? 0.3 : 0), odd ? 0.8 : 0.9, odd ? 0.85 : 1, pal, q * 3);\n    }\n    return q * 3;\n  };\n  for (let sy = 0; sy \u003c H; sy++) {\n    // Older deposit dims with depth, to 55% at the bottom edge.\n    const wy = B + H - 1 - sy, rr = wy & RM, ok = wy >= 0 && P.row[rr] === wy, fade = 1 - 0.45 * cl((sy - 30) / 98, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const n = ok ? P.cell[rr * W + x] : 0;\n      if (!n) display.setPixel(x, sy, 0, 0, 0);\n      else if (n === LID) display.setPixel(x, sy, 200, 200, 200);\n      else {\n        const q = colour(n);\n        // The top particle of each column, the front itself, burns pale.\n        if (wy === P.vh[x] - 1) display.setPixel(x, sy, pal[q] * 0.35 + 166, pal[q + 1] * 0.35 + 166, pal[q + 2] * 0.35 + 166);\n        else display.setPixel(x, sy, pal[q] * fade, pal[q + 1] * fade, pal[q + 2] * fade);\n      }\n    }\n  }\n  // Fresh landings flash white and settle into their band's colour.\n  for (let j = 0; j \u003c MAXL; j++) {\n    const age = P.t - P.lt[j];\n    if (age > 0.4) continue;\n    const y = P.ly[j], sy = B + H - 1 - y, rr = y & RM, n = P.row[rr] === y ? P.cell[rr * W + P.lx[j]] : 0;\n    if (sy \u003c 0 || sy >= H || !n || n === LID) continue;\n    const q = colour(n), a = age / 0.4, w = 255 * (1 - a);\n    display.setPixel(P.lx[j], sy, w + pal[q] * a, w + pal[q + 1] * a, w + pal[q + 2] * a);\n  }\n  // Particles in flight: a white head and a short grey tail.\n  for (let i = 0; i \u003c P.nf; i++) {\n    const sy = B + H - 1 - floor(P.fy[i]);\n    for (let t = 0; t \u003c 3; t++) {\n      const y = sy - t, v = t ? 150 - 45 * t : 255;\n      if (y >= 0 && y \u003c H) display.setPixel(P.fx[i], y, v, v, v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green."},{"name":"Speed","min":0.2,"max":3,"about":"Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second."},{"name":"Slip","min":0,"max":1,"about":"The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000."},{"name":"Layers","min":6,"max":24,"about":"How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows."}],"start":[0,2,0,6],"measures":{"motion":0.6499,"detail":0.2394,"edges":0.9298,"complexity":0.4248,"coverage":0.4131,"colour":0.4145,"drift":0.0572},"knobResponse":[0.2133,0.2835,0.2999,0.1051]},{"slug":"balloon-box","title":"Balloon Box","family":"weather","round":11,"note":"새벽 골짜기에 바람이 둘이에요. 낮은 바람은 열기구를 왼쪽으로, 높은 바람은 오른쪽으로 데려가고, 조종사가 버너로 높이를 바꾸면 풍선이 멈췄다 되돌아가요. 옆으로 나간 자리에는 새 풍선이 바람을 타고 들어오거나 들판에서 떠올라요. K1 을 누르면 모든 버너가 한꺼번에 켜져요.","idea":"Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.","buttons":"K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.","code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-balloon-box","type":"code","name":"balloon-box","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons."},{"name":"Wind","min":0.2,"max":3,"about":"How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds."},{"name":"Balloons","min":8,"max":16,"about":"How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back."},{"name":"Sunrise","min":0,"max":1,"about":"The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue."}],"start":[0,2,8,0.06],"measures":{"motion":0.167,"detail":0.0307,"edges":0.6336,"complexity":0.5511,"coverage":0.8946,"colour":0.5662,"drift":0.2806},"knobResponse":[0.306,0.2762,0.2316,0.2865]},{"slug":"bath-fizz","title":"Bath Fizz","family":"cosmetic","round":35,"note":"패널 아래에서 녹는 배스 파우더가 깊은 물속으로 안료 구름을 올려 보내요. 분홍에서 색상환을 따라 벌려 놓은 안료 세 가지가 버섯 머리로 말리며 128줄을 채우고 맞닿은 가장자리에서 섞여요. 가는 거품 줄기가 그 사이를 뚫고 올라가며 물을 끌어올려요. K3 은 거품을 1초에 60개에서 360개로 늘려 첫 구름이 위 20줄에 닿는 때를 7.6초에서 2.4초로 당기고, K1 을 누르면 세 색이 바닥에서 한꺼번에 터져요.","idea":"Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.","buttons":"K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.","code":"// ===== Patternflow pattern =====\n// Title:   Bath Fizz\n// Family:  cosmetic\n// Idea:    Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after underwater film of a fizzing bath powder clouding the water\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1\n//\n// Knob 1: Hue. Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo.\n// Knob 2: Speed. How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower.\n// Knob 3: Fizz. How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s.\n// Knob 4: Mix. How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac.\n// Buttons: K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.\n\nconst W = 64, H = 128, N = W * H;\n// The water is worked out on a grid of 2x2 LEDs; the pigment is carried at\n// full resolution through it, so the clouds keep a fine edge.\nconst GW = 32, GH = 64, GN = GW * GH;\nconst MAXB = 1200;\n// Deep indigo, given at full brightness like the water colour it replaces.\nconst INDIGO = [0.34, 0.3, 1];\nconst { min, max, floor, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    U: F(GN), V: F(GN), U0: F(GN), V0: F(GN), P: F(GN), DV: F(GN), L: F(GN), L0: F(GN), CU: F(GN), FB: F(GN),\n    A: [F(N), F(N), F(N)], TA: F(N), PI0: new Int32Array(N), PF: F(2 * N), BB: F(N), BT: F(N), DD: F(N),\n    bx: F(MAXB), by: F(MAXB), bs: F(MAXB), bp: F(MAXB), nb: 0,\n    // Three places along the bottom where the powder fizzes, one per colour.\n    src: [0, 1, 2].map((c) => ({ c, ph: (2 * PI * c) / 3 + rnd(), w: [0.11, 0.07, 0.09][c], next: 0.2 + 0.5 * c, puff: 0, bacc: 0 })),\n    T: 0, RS: F(W), RC: F(W), PW: F(256), pe: 0, hue: 0, speed: 2, fizz: 0, mix: 0.06, started: false, col: F(20), key: NaN,\n  };\n}\n\n// Bilinear read of a grid field at grid coordinates.\nfunction samp(F, x, y) {\n  x = cl(x, 0, GW - 1.001);\n  y = cl(y, 0, GH - 1.001);\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, i = iy * GW + ix;\n  return (F[i] * (1 - fx) + F[i + 1] * fx) * (1 - fy) + (F[i + GW] * (1 - fx) + F[i + GW + 1] * fx) * fy;\n}\n\n// A soft round blob added to a full-resolution field.\nfunction blob(A, cx, cy, r, w) {\n  const x0 = max(0, floor(cx - 2 * r)), x1 = min(W - 1, floor(cx + 2 * r)), y0 = max(0, floor(cy - 2 * r)), y1 = min(H - 1, floor(cy + 2 * r));\n  const k = 1 / (r * r);\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy;\n      A[y * W + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction gblob(G, cx, cy, r, w) {\n  // The same on the water's grid, given in LEDs.\n  const gx = cx / 2, gy = cy / 2, gr = r / 2, k = 1 / (gr * gr);\n  for (let y = max(0, floor(gy - 2 * gr)); y \u003c= min(GH - 1, floor(gy + 2 * gr)); y++)\n    for (let x = max(0, floor(gx - 2 * gr)); x \u003c= min(GW - 1, floor(gx + 2 * gr)); x++) {\n      const dx = x + 0.5 - gx, dy = y + 0.5 - gy;\n      G[y * GW + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction bubbles(S, x, n, spread) {\n  for (let j = 0; j \u003c n && S.nb \u003c MAXB; j++) {\n    const i = S.nb++;\n    S.bx[i] = x + (rnd() + rnd() - 1) * spread;\n    S.by[i] = H + 1 + rnd() * 4;\n    S.bs[i] = rnd();\n    S.bp[i] = rnd() * 2 * PI;\n  }\n}\n\n// A burst from one place: pigment and lift at the bottom, and its bubbles.\nfunction puff(S, s, x, k) {\n  blob(S.A[s.c], x, H - 2, 5 + 2 * k, 5.4 * k);\n  gblob(S.L, x, H - 3, 6 + 2 * k, 2.2 * k);\n}\n\nfunction burst(S) {\n  for (const s of S.src) {\n    const x = 6 + rnd() * 52;\n    puff(S, s, x, 2.2);\n    bubbles(S, x, 70, 5);\n  }\n}\n\nfunction fluid(S, st) {\n  const U = S.U, V = S.V, U0 = S.U0, V0 = S.V0, L = S.L, L0 = S.L0, P = S.P, DV = S.DV, CU = S.CU, FB = S.FB, f = S.fizz;\n  // Forces: the lift the fizz leaves in the water, and the drag of each\n  // rising bubble on the water round it.\n  const buoy = 34 * (1 + 0.9 * f);\n  for (let i = 0; i \u003c GN; i++) {\n    V[i] -= st * (buoy * L[i] + 7 * FB[i]);\n    FB[i] = 0;\n  }\n  // Vorticity confinement keeps the small curls that roll a cloud's edge over.\n  for (let y = 1; y \u003c GH - 1; y++)\n    for (let x = 1; x \u003c GW - 1; x++) {\n      const i = y * GW + x;\n      CU[i] = 0.5 * (V[i + 1] - V[i - 1] - U[i + GW] + U[i - GW]);\n    }\n  const eps = 2.2;\n  for (let y = 2; y \u003c GH - 2; y++)\n    for (let x = 2; x \u003c GW - 2; x++) {\n      const i = y * GW + x;\n      const nx = 0.5 * (abs(CU[i + 1]) - abs(CU[i - 1])), ny = 0.5 * (abs(CU[i + GW]) - abs(CU[i - GW])), nl = sqrt(nx * nx + ny * ny) + 1e-5;\n      U[i] += st * eps * (ny / nl) * CU[i];\n      V[i] -= st * eps * (nx / nl) * CU[i];\n    }\n  // Carry the water along itself.\n  U0.set(U);\n  V0.set(V);\n  L0.set(L);\n  const fade = exp(-st / 2.4);\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const px = x - st * U0[i], py = y - st * V0[i];\n      U[i] = samp(U0, px, py) * 0.995;\n      V[i] = samp(V0, px, py) * 0.995;\n      L[i] = samp(L0, px, py) * fade;\n    }\n  // Walls all round: the sides of the bath, its floor below the panel and the\n  // surface above.\n  for (let y = 0; y \u003c GH; y++) {\n    U[y * GW] = U[y * GW + GW - 1] = 0;\n  }\n  for (let x = 0; x \u003c GW; x++) {\n    V[x] = V[(GH - 1) * GW + x] = 0;\n  }\n  // Make it incompressible: what rises in the middle comes down at the sides.\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const ur = x \u003c GW - 1 ? U[i + 1] : 0, ul = x > 0 ? U[i - 1] : 0, vd = y \u003c GH - 1 ? V[i + GW] : 0, vu = y > 0 ? V[i - GW] : 0;\n      DV[i] = 0.5 * (ur - ul + vd - vu);\n    }\n  for (let it = 0; it \u003c 24; it++)\n    for (let y = 0, i = 0; y \u003c GH; y++)\n      for (let x = 0; x \u003c GW; x++, i++) {\n        const p = P[i];\n        const s = (x > 0 ? P[i - 1] : p) + (x \u003c GW - 1 ? P[i + 1] : p) + (y > 0 ? P[i - GW] : p) + (y \u003c GH - 1 ? P[i + GW] : p);\n        P[i] = p + 1.6 * ((s - DV[i]) / 4 - p);\n      }\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const p = P[i];\n      U[i] -= 0.5 * ((x \u003c GW - 1 ? P[i + 1] : p) - (x > 0 ? P[i - 1] : p));\n      V[i] -= 0.5 * ((y \u003c GH - 1 ? P[i + GW] : p) - (y > 0 ? P[i - GW] : p));\n    }\n}\n\nfunction pigment(S, st) {\n  const U = S.U, V = S.V, TA = S.TA, mix = S.mix, PI0 = S.PI0, PF = S.PF;\n  // The pigment is carried by the water, read at each LED's own place so it\n  // stays half a cell finer than the water. The trace back is worked out once\n  // for all three pigments.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const gx = (x + 0.5) / 2 - 0.5, gy = (y + 0.5) / 2 - 0.5;\n      const px = cl(x - 2 * st * samp(U, gx, gy), 0, W - 1.001), py = cl(y - 2 * st * samp(V, gx, gy), 0, H - 1.001);\n      const ix = floor(px), iy = floor(py);\n      PI0[i] = iy * W + ix;\n      PF[2 * i] = px - ix;\n      PF[2 * i + 1] = py - iy;\n    }\n  // Then it spreads a little, more the higher Mix, and slowly thins into the bath.\n  const kap = cl(st * (0.6 + 5 * mix), 0, 0.24), fade = exp(-st / 5);\n  for (const A of S.A) {\n    TA.set(A);\n    for (let i = 0; i \u003c N; i++) {\n      const j = PI0[i], fx = PF[2 * i], fy = PF[2 * i + 1];\n      A[i] = (TA[j] * (1 - fx) + TA[j + 1] * fx) * (1 - fy) + (TA[j + W] * (1 - fx) + TA[j + W + 1] * fx) * fy;\n    }\n    TA.set(A);\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const c = TA[i];\n        const l = (x > 0 ? TA[i - 1] : c) + (x \u003c W - 1 ? TA[i + 1] : c) + (y > 0 ? TA[i - W] : c) + (y \u003c H - 1 ? TA[i + W] : c) - 4 * c;\n        A[i] = (c + kap * l) * fade;\n      }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const f = S.fizz;\n  for (const s of S.src) {\n    // Each place wanders along the bottom as the powder tumbles, each at its\n    // own pace, so now and then two pass and their clouds go up together.\n    s.ph += st * s.w;\n    const x = 32 + 22 * sin(s.ph) + 4 * sin(2.7 * s.ph + s.c);\n    s.next -= st;\n    if (s.next \u003c= 0) {\n      s.puff = 0.8 + 0.6 * rnd();\n      s.next = (1.6 - 0.8 * f) * (0.6 + 0.8 * rnd());\n    }\n    s.puff *= exp(-st / 0.3);\n    const k = st * (0.5 + 0.4 * f + 4 * s.puff);\n    puff(S, s, x, k);\n    s.bacc += st * (30 + 110 * f) * (0.5 + s.puff);\n    const nb = floor(s.bacc);\n    s.bacc -= nb;\n    bubbles(S, x, nb, 1.5 + 1.5 * s.puff);\n  }\n  // Bubbles: small ones rise slower and zig-zag more, all ride the water\n  // sideways, and each pulls the water up with it.\n  const U = S.U, V = S.V, FB = S.FB;\n  let k = 0;\n  for (let i = 0; i \u003c S.nb; i++) {\n    let x = S.bx[i], y = S.by[i];\n    const s = S.bs[i], gx = x / 2 - 0.5, gy = y / 2 - 0.5;\n    const ph = (S.bp[i] += st * (7 + 5 * (1 - s)));\n    const rise = (24 + 20 * s) * (0.85 + 0.5 * f);\n    x += st * (1.2 * samp(U, gx, gy) + (2 + 3 * (1 - s)) * cos(ph));\n    y += st * (2 * samp(V, gx, gy) * 0.6 - rise);\n    if (y \u003c -1 || x \u003c -1 || x > W + 1) continue;\n    const ci = cl(floor(y / 2), 0, GH - 1) * GW + cl(floor(x / 2), 0, GW - 1);\n    FB[ci] += 0.5 + 0.5 * s;\n    S.bx[k] = x;\n    S.by[k] = y;\n    S.bs[k] = s;\n    S.bp[k] = S.bp[i];\n    k++;\n  }\n  S.nb = k;\n  fluid(S, st);\n  pigment(S, st);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.fizz = cl(kv[2] || 0, 0, 1);\n  S.mix = cl(kv[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the water already clouding: six and a half seconds of fizz,\n    // in coarse steps.\n    for (let i = 0; i \u003c 80; i++) step(S, 1 / 12);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, mix = S.mix, A0 = S.A[0], A1 = S.A[1], A2 = S.A[2], T = S.T;\n  // Palette: three pigments spread round the wheel from the hue, and deep\n  // water. A pigment from orange to lime is paled and its cloud thickens\n  // faster, because those hues at half brightness read brown and olive.\n  const h0 = S.hue + 0.92, key = h0 + 3 * mix;\n  if (S.key !== key) {\n    const hs = [h0, h0 - 0.17, h0 - 0.42];\n    for (let c = 0; c \u003c 3; c++) {\n      const hf = hs[c] - floor(hs[c]), wm = sm((hf - 0.02) / 0.05) * (1 - sm((hf - 0.24) / 0.06));\n      hsv(hs[c], 0.95 - 0.45 * wm, 1, col, c * 3);\n      col[9 + c] = 4.5 * (1 + wm);\n      col[16 + c] = wm;\n    }\n    // Deep water opposite the pigments; where that lands on orange or gold it\n    // would be brown, so there the water turns deep indigo.\n    const hw = h0 - 0.32, hf = hw - floor(hw), wm = sm((hf + 0.02) / 0.06) * (1 - sm((hf - 0.27) / 0.08));\n    hsv(hw, 0.8, 1, col, 12);\n    for (let c = 0; c \u003c 3; c++) col[12 + c] += (INDIGO[c] - col[12 + c]) * wm;\n    S.key = key;\n  }\n  // Bubbles: splatted, then a 3x3 blur so each is a soft bump two or three\n  // LEDs across rather than a hard dot.\n  const BB = S.BB, BT = S.BT;\n  BB.fill(0);\n  for (let i = 0; i \u003c S.nb; i++) {\n    const x = S.bx[i] - 0.5, y = S.by[i] - 0.5, ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, w = 0.7 + 0.5 * S.bs[i];\n    if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) continue;\n    const p = iy * W + ix;\n    BB[p] += w * (1 - fx) * (1 - fy);\n    BB[p + 1] += w * fx * (1 - fy);\n    BB[p + W] += w * (1 - fx) * fy;\n    BB[p + W + 1] += w * fx * fy;\n  }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BT[i] = (x > 0 ? BB[i - 1] : 0) + 2 * BB[i] + (x \u003c W - 1 ? BB[i + 1] : 0);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BB[i] = ((y > 0 ? BT[i - W] : 0) + 2 * BT[i] + (y \u003c H - 1 ? BT[i + W] : 0)) / 16;\n  // How sharply the strongest pigment takes a LED: at Mix 0 it takes it up to\n  // a narrow seam, at 1 the pigments add.\n  const pe = 1 + 7 * (1 - mix) * (1 - mix), PW = S.PW;\n  if (S.pe !== pe) {\n    for (let j = 0; j \u003c 256; j++) PW[j] = pow((j + 0.5) / 255, pe);\n    PW[255] = 1;\n    S.pe = pe;\n  }\n  const DD = S.DD;\n  for (let i = 0; i \u003c N; i++) DD[i] = A0[i] + A1[i] + A2[i];\n  // Slow shafts of light slant down through the water from the surface:\n  // sin(a(x) + 0.08 y), split so each row and column is worked out once.\n  const RS = S.RS, RC = S.RC;\n  for (let x = 0; x \u003c W; x++) {\n    const a = 0.16 * x + 0.5 * T + 1.2 * sin(0.05 * x - 0.3 * T);\n    RS[x] = sin(a);\n    RC[x] = cos(a);\n  }\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    // The water: light from the surface, falling off towards the floor.\n    const wl = 0.1 + 0.08 * exp(-y / 40), wr = 0.25 * wl * exp(-y / 70), sy = sin(0.08 * y), cy = cos(0.08 * y);\n    for (let x = 0; x \u003c W; x++, i++) {\n      const a0 = A0[i], a1 = A1[i], a2 = A2[i], D = DD[i];\n      const lw = wl + wr * (1 + RS[x] * cy + RC[x] * sy);\n      let r = col[12] * lw, g = col[13] * lw, b = col[14] * lw;\n      if (D > 0.002) {\n        // Each pigment's weight is its share of the strongest, to the power pe.\n        const am = a0 > a1 ? (a0 > a2 ? a0 : a2) : a1 > a2 ? a1 : a2, iv = 1 / am;\n        const q0 = a0 * iv, q1 = a1 * iv, q2 = a2 * iv;\n        const w0 = PW[(q0 * 255) | 0], w1 = PW[(q1 * 255) | 0], w2 = PW[(q2 * 255) | 0];\n        const ws = w0 + w1 + w2;\n        let cr = (w0 * col[0] + w1 * col[3] + w2 * col[6]) / ws, cg = (w0 * col[1] + w1 * col[4] + w2 * col[7]) / ws, cb = (w0 * col[2] + w1 * col[5] + w2 * col[8]) / ws;\n        // Opacity goes with the cube of the pigment, e^3 / (e^3 + 1): half at\n        // e = 1, nine tenths at e = 2 and nearly clear below a half, so old\n        // colour thins away and fresh clouds stand out on the water.\n        const e = a0 * col[9] + a1 * col[10] + a2 * col[11], e3 = e * e * e, op = e3 / (e3 + 1);\n        // A thinning cloud of orange, gold or lime would dim through brown and\n        // olive, so as it thins it pales towards a grey haze instead.\n        const wp = ((w0 * col[16] + w1 * col[17] + w2 * col[18]) / ws) * (1 - op * op);\n        cr += (0.8 - cr) * wp;\n        cg += (0.8 - cg) * wp;\n        cb += (0.8 - cb) * wp;\n        // Light from above catches the top of each billow and the cloud is\n        // brighter where it is thick.\n        const up = y > 1 ? D - DD[i - 2 * W] : 0;\n        const lv = cl(0.76 + 0.25 * (1 - exp(-2 * D)) + 0.35 * up, 0.5, 1);\n        r += (cr * lv - r) * op;\n        g += (cg * lv - g) * op;\n        b += (cb * lv - b) * op;\n      }\n      const bb = min(0.55, BB[i]);\n      r += bb * (1 - 0.4 * r);\n      g += bb * (1 - 0.4 * g);\n      b += bb * (1 - 0.4 * b);\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","layer":{"id":"layer-bath-fizz","type":"code","name":"bath-fizz","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bath Fizz\n// Family:  cosmetic\n// Idea:    Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after underwater film of a fizzing bath powder clouding the water\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1\n//\n// Knob 1: Hue. Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo.\n// Knob 2: Speed. How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower.\n// Knob 3: Fizz. How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s.\n// Knob 4: Mix. How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac.\n// Buttons: K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.\n\nconst W = 64, H = 128, N = W * H;\n// The water is worked out on a grid of 2x2 LEDs; the pigment is carried at\n// full resolution through it, so the clouds keep a fine edge.\nconst GW = 32, GH = 64, GN = GW * GH;\nconst MAXB = 1200;\n// Deep indigo, given at full brightness like the water colour it replaces.\nconst INDIGO = [0.34, 0.3, 1];\nconst { min, max, floor, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    U: F(GN), V: F(GN), U0: F(GN), V0: F(GN), P: F(GN), DV: F(GN), L: F(GN), L0: F(GN), CU: F(GN), FB: F(GN),\n    A: [F(N), F(N), F(N)], TA: F(N), PI0: new Int32Array(N), PF: F(2 * N), BB: F(N), BT: F(N), DD: F(N),\n    bx: F(MAXB), by: F(MAXB), bs: F(MAXB), bp: F(MAXB), nb: 0,\n    // Three places along the bottom where the powder fizzes, one per colour.\n    src: [0, 1, 2].map((c) => ({ c, ph: (2 * PI * c) / 3 + rnd(), w: [0.11, 0.07, 0.09][c], next: 0.2 + 0.5 * c, puff: 0, bacc: 0 })),\n    T: 0, RS: F(W), RC: F(W), PW: F(256), pe: 0, hue: 0, speed: 2, fizz: 0, mix: 0.06, started: false, col: F(20), key: NaN,\n  };\n}\n\n// Bilinear read of a grid field at grid coordinates.\nfunction samp(F, x, y) {\n  x = cl(x, 0, GW - 1.001);\n  y = cl(y, 0, GH - 1.001);\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, i = iy * GW + ix;\n  return (F[i] * (1 - fx) + F[i + 1] * fx) * (1 - fy) + (F[i + GW] * (1 - fx) + F[i + GW + 1] * fx) * fy;\n}\n\n// A soft round blob added to a full-resolution field.\nfunction blob(A, cx, cy, r, w) {\n  const x0 = max(0, floor(cx - 2 * r)), x1 = min(W - 1, floor(cx + 2 * r)), y0 = max(0, floor(cy - 2 * r)), y1 = min(H - 1, floor(cy + 2 * r));\n  const k = 1 / (r * r);\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy;\n      A[y * W + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction gblob(G, cx, cy, r, w) {\n  // The same on the water's grid, given in LEDs.\n  const gx = cx / 2, gy = cy / 2, gr = r / 2, k = 1 / (gr * gr);\n  for (let y = max(0, floor(gy - 2 * gr)); y \u003c= min(GH - 1, floor(gy + 2 * gr)); y++)\n    for (let x = max(0, floor(gx - 2 * gr)); x \u003c= min(GW - 1, floor(gx + 2 * gr)); x++) {\n      const dx = x + 0.5 - gx, dy = y + 0.5 - gy;\n      G[y * GW + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction bubbles(S, x, n, spread) {\n  for (let j = 0; j \u003c n && S.nb \u003c MAXB; j++) {\n    const i = S.nb++;\n    S.bx[i] = x + (rnd() + rnd() - 1) * spread;\n    S.by[i] = H + 1 + rnd() * 4;\n    S.bs[i] = rnd();\n    S.bp[i] = rnd() * 2 * PI;\n  }\n}\n\n// A burst from one place: pigment and lift at the bottom, and its bubbles.\nfunction puff(S, s, x, k) {\n  blob(S.A[s.c], x, H - 2, 5 + 2 * k, 5.4 * k);\n  gblob(S.L, x, H - 3, 6 + 2 * k, 2.2 * k);\n}\n\nfunction burst(S) {\n  for (const s of S.src) {\n    const x = 6 + rnd() * 52;\n    puff(S, s, x, 2.2);\n    bubbles(S, x, 70, 5);\n  }\n}\n\nfunction fluid(S, st) {\n  const U = S.U, V = S.V, U0 = S.U0, V0 = S.V0, L = S.L, L0 = S.L0, P = S.P, DV = S.DV, CU = S.CU, FB = S.FB, f = S.fizz;\n  // Forces: the lift the fizz leaves in the water, and the drag of each\n  // rising bubble on the water round it.\n  const buoy = 34 * (1 + 0.9 * f);\n  for (let i = 0; i \u003c GN; i++) {\n    V[i] -= st * (buoy * L[i] + 7 * FB[i]);\n    FB[i] = 0;\n  }\n  // Vorticity confinement keeps the small curls that roll a cloud's edge over.\n  for (let y = 1; y \u003c GH - 1; y++)\n    for (let x = 1; x \u003c GW - 1; x++) {\n      const i = y * GW + x;\n      CU[i] = 0.5 * (V[i + 1] - V[i - 1] - U[i + GW] + U[i - GW]);\n    }\n  const eps = 2.2;\n  for (let y = 2; y \u003c GH - 2; y++)\n    for (let x = 2; x \u003c GW - 2; x++) {\n      const i = y * GW + x;\n      const nx = 0.5 * (abs(CU[i + 1]) - abs(CU[i - 1])), ny = 0.5 * (abs(CU[i + GW]) - abs(CU[i - GW])), nl = sqrt(nx * nx + ny * ny) + 1e-5;\n      U[i] += st * eps * (ny / nl) * CU[i];\n      V[i] -= st * eps * (nx / nl) * CU[i];\n    }\n  // Carry the water along itself.\n  U0.set(U);\n  V0.set(V);\n  L0.set(L);\n  const fade = exp(-st / 2.4);\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const px = x - st * U0[i], py = y - st * V0[i];\n      U[i] = samp(U0, px, py) * 0.995;\n      V[i] = samp(V0, px, py) * 0.995;\n      L[i] = samp(L0, px, py) * fade;\n    }\n  // Walls all round: the sides of the bath, its floor below the panel and the\n  // surface above.\n  for (let y = 0; y \u003c GH; y++) {\n    U[y * GW] = U[y * GW + GW - 1] = 0;\n  }\n  for (let x = 0; x \u003c GW; x++) {\n    V[x] = V[(GH - 1) * GW + x] = 0;\n  }\n  // Make it incompressible: what rises in the middle comes down at the sides.\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const ur = x \u003c GW - 1 ? U[i + 1] : 0, ul = x > 0 ? U[i - 1] : 0, vd = y \u003c GH - 1 ? V[i + GW] : 0, vu = y > 0 ? V[i - GW] : 0;\n      DV[i] = 0.5 * (ur - ul + vd - vu);\n    }\n  for (let it = 0; it \u003c 24; it++)\n    for (let y = 0, i = 0; y \u003c GH; y++)\n      for (let x = 0; x \u003c GW; x++, i++) {\n        const p = P[i];\n        const s = (x > 0 ? P[i - 1] : p) + (x \u003c GW - 1 ? P[i + 1] : p) + (y > 0 ? P[i - GW] : p) + (y \u003c GH - 1 ? P[i + GW] : p);\n        P[i] = p + 1.6 * ((s - DV[i]) / 4 - p);\n      }\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const p = P[i];\n      U[i] -= 0.5 * ((x \u003c GW - 1 ? P[i + 1] : p) - (x > 0 ? P[i - 1] : p));\n      V[i] -= 0.5 * ((y \u003c GH - 1 ? P[i + GW] : p) - (y > 0 ? P[i - GW] : p));\n    }\n}\n\nfunction pigment(S, st) {\n  const U = S.U, V = S.V, TA = S.TA, mix = S.mix, PI0 = S.PI0, PF = S.PF;\n  // The pigment is carried by the water, read at each LED's own place so it\n  // stays half a cell finer than the water. The trace back is worked out once\n  // for all three pigments.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const gx = (x + 0.5) / 2 - 0.5, gy = (y + 0.5) / 2 - 0.5;\n      const px = cl(x - 2 * st * samp(U, gx, gy), 0, W - 1.001), py = cl(y - 2 * st * samp(V, gx, gy), 0, H - 1.001);\n      const ix = floor(px), iy = floor(py);\n      PI0[i] = iy * W + ix;\n      PF[2 * i] = px - ix;\n      PF[2 * i + 1] = py - iy;\n    }\n  // Then it spreads a little, more the higher Mix, and slowly thins into the bath.\n  const kap = cl(st * (0.6 + 5 * mix), 0, 0.24), fade = exp(-st / 5);\n  for (const A of S.A) {\n    TA.set(A);\n    for (let i = 0; i \u003c N; i++) {\n      const j = PI0[i], fx = PF[2 * i], fy = PF[2 * i + 1];\n      A[i] = (TA[j] * (1 - fx) + TA[j + 1] * fx) * (1 - fy) + (TA[j + W] * (1 - fx) + TA[j + W + 1] * fx) * fy;\n    }\n    TA.set(A);\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const c = TA[i];\n        const l = (x > 0 ? TA[i - 1] : c) + (x \u003c W - 1 ? TA[i + 1] : c) + (y > 0 ? TA[i - W] : c) + (y \u003c H - 1 ? TA[i + W] : c) - 4 * c;\n        A[i] = (c + kap * l) * fade;\n      }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const f = S.fizz;\n  for (const s of S.src) {\n    // Each place wanders along the bottom as the powder tumbles, each at its\n    // own pace, so now and then two pass and their clouds go up together.\n    s.ph += st * s.w;\n    const x = 32 + 22 * sin(s.ph) + 4 * sin(2.7 * s.ph + s.c);\n    s.next -= st;\n    if (s.next \u003c= 0) {\n      s.puff = 0.8 + 0.6 * rnd();\n      s.next = (1.6 - 0.8 * f) * (0.6 + 0.8 * rnd());\n    }\n    s.puff *= exp(-st / 0.3);\n    const k = st * (0.5 + 0.4 * f + 4 * s.puff);\n    puff(S, s, x, k);\n    s.bacc += st * (30 + 110 * f) * (0.5 + s.puff);\n    const nb = floor(s.bacc);\n    s.bacc -= nb;\n    bubbles(S, x, nb, 1.5 + 1.5 * s.puff);\n  }\n  // Bubbles: small ones rise slower and zig-zag more, all ride the water\n  // sideways, and each pulls the water up with it.\n  const U = S.U, V = S.V, FB = S.FB;\n  let k = 0;\n  for (let i = 0; i \u003c S.nb; i++) {\n    let x = S.bx[i], y = S.by[i];\n    const s = S.bs[i], gx = x / 2 - 0.5, gy = y / 2 - 0.5;\n    const ph = (S.bp[i] += st * (7 + 5 * (1 - s)));\n    const rise = (24 + 20 * s) * (0.85 + 0.5 * f);\n    x += st * (1.2 * samp(U, gx, gy) + (2 + 3 * (1 - s)) * cos(ph));\n    y += st * (2 * samp(V, gx, gy) * 0.6 - rise);\n    if (y \u003c -1 || x \u003c -1 || x > W + 1) continue;\n    const ci = cl(floor(y / 2), 0, GH - 1) * GW + cl(floor(x / 2), 0, GW - 1);\n    FB[ci] += 0.5 + 0.5 * s;\n    S.bx[k] = x;\n    S.by[k] = y;\n    S.bs[k] = s;\n    S.bp[k] = S.bp[i];\n    k++;\n  }\n  S.nb = k;\n  fluid(S, st);\n  pigment(S, st);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.fizz = cl(kv[2] || 0, 0, 1);\n  S.mix = cl(kv[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the water already clouding: six and a half seconds of fizz,\n    // in coarse steps.\n    for (let i = 0; i \u003c 80; i++) step(S, 1 / 12);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, mix = S.mix, A0 = S.A[0], A1 = S.A[1], A2 = S.A[2], T = S.T;\n  // Palette: three pigments spread round the wheel from the hue, and deep\n  // water. A pigment from orange to lime is paled and its cloud thickens\n  // faster, because those hues at half brightness read brown and olive.\n  const h0 = S.hue + 0.92, key = h0 + 3 * mix;\n  if (S.key !== key) {\n    const hs = [h0, h0 - 0.17, h0 - 0.42];\n    for (let c = 0; c \u003c 3; c++) {\n      const hf = hs[c] - floor(hs[c]), wm = sm((hf - 0.02) / 0.05) * (1 - sm((hf - 0.24) / 0.06));\n      hsv(hs[c], 0.95 - 0.45 * wm, 1, col, c * 3);\n      col[9 + c] = 4.5 * (1 + wm);\n      col[16 + c] = wm;\n    }\n    // Deep water opposite the pigments; where that lands on orange or gold it\n    // would be brown, so there the water turns deep indigo.\n    const hw = h0 - 0.32, hf = hw - floor(hw), wm = sm((hf + 0.02) / 0.06) * (1 - sm((hf - 0.27) / 0.08));\n    hsv(hw, 0.8, 1, col, 12);\n    for (let c = 0; c \u003c 3; c++) col[12 + c] += (INDIGO[c] - col[12 + c]) * wm;\n    S.key = key;\n  }\n  // Bubbles: splatted, then a 3x3 blur so each is a soft bump two or three\n  // LEDs across rather than a hard dot.\n  const BB = S.BB, BT = S.BT;\n  BB.fill(0);\n  for (let i = 0; i \u003c S.nb; i++) {\n    const x = S.bx[i] - 0.5, y = S.by[i] - 0.5, ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, w = 0.7 + 0.5 * S.bs[i];\n    if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) continue;\n    const p = iy * W + ix;\n    BB[p] += w * (1 - fx) * (1 - fy);\n    BB[p + 1] += w * fx * (1 - fy);\n    BB[p + W] += w * (1 - fx) * fy;\n    BB[p + W + 1] += w * fx * fy;\n  }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BT[i] = (x > 0 ? BB[i - 1] : 0) + 2 * BB[i] + (x \u003c W - 1 ? BB[i + 1] : 0);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BB[i] = ((y > 0 ? BT[i - W] : 0) + 2 * BT[i] + (y \u003c H - 1 ? BT[i + W] : 0)) / 16;\n  // How sharply the strongest pigment takes a LED: at Mix 0 it takes it up to\n  // a narrow seam, at 1 the pigments add.\n  const pe = 1 + 7 * (1 - mix) * (1 - mix), PW = S.PW;\n  if (S.pe !== pe) {\n    for (let j = 0; j \u003c 256; j++) PW[j] = pow((j + 0.5) / 255, pe);\n    PW[255] = 1;\n    S.pe = pe;\n  }\n  const DD = S.DD;\n  for (let i = 0; i \u003c N; i++) DD[i] = A0[i] + A1[i] + A2[i];\n  // Slow shafts of light slant down through the water from the surface:\n  // sin(a(x) + 0.08 y), split so each row and column is worked out once.\n  const RS = S.RS, RC = S.RC;\n  for (let x = 0; x \u003c W; x++) {\n    const a = 0.16 * x + 0.5 * T + 1.2 * sin(0.05 * x - 0.3 * T);\n    RS[x] = sin(a);\n    RC[x] = cos(a);\n  }\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    // The water: light from the surface, falling off towards the floor.\n    const wl = 0.1 + 0.08 * exp(-y / 40), wr = 0.25 * wl * exp(-y / 70), sy = sin(0.08 * y), cy = cos(0.08 * y);\n    for (let x = 0; x \u003c W; x++, i++) {\n      const a0 = A0[i], a1 = A1[i], a2 = A2[i], D = DD[i];\n      const lw = wl + wr * (1 + RS[x] * cy + RC[x] * sy);\n      let r = col[12] * lw, g = col[13] * lw, b = col[14] * lw;\n      if (D > 0.002) {\n        // Each pigment's weight is its share of the strongest, to the power pe.\n        const am = a0 > a1 ? (a0 > a2 ? a0 : a2) : a1 > a2 ? a1 : a2, iv = 1 / am;\n        const q0 = a0 * iv, q1 = a1 * iv, q2 = a2 * iv;\n        const w0 = PW[(q0 * 255) | 0], w1 = PW[(q1 * 255) | 0], w2 = PW[(q2 * 255) | 0];\n        const ws = w0 + w1 + w2;\n        let cr = (w0 * col[0] + w1 * col[3] + w2 * col[6]) / ws, cg = (w0 * col[1] + w1 * col[4] + w2 * col[7]) / ws, cb = (w0 * col[2] + w1 * col[5] + w2 * col[8]) / ws;\n        // Opacity goes with the cube of the pigment, e^3 / (e^3 + 1): half at\n        // e = 1, nine tenths at e = 2 and nearly clear below a half, so old\n        // colour thins away and fresh clouds stand out on the water.\n        const e = a0 * col[9] + a1 * col[10] + a2 * col[11], e3 = e * e * e, op = e3 / (e3 + 1);\n        // A thinning cloud of orange, gold or lime would dim through brown and\n        // olive, so as it thins it pales towards a grey haze instead.\n        const wp = ((w0 * col[16] + w1 * col[17] + w2 * col[18]) / ws) * (1 - op * op);\n        cr += (0.8 - cr) * wp;\n        cg += (0.8 - cg) * wp;\n        cb += (0.8 - cb) * wp;\n        // Light from above catches the top of each billow and the cloud is\n        // brighter where it is thick.\n        const up = y > 1 ? D - DD[i - 2 * W] : 0;\n        const lv = cl(0.76 + 0.25 * (1 - exp(-2 * D)) + 0.35 * up, 0.5, 1);\n        r += (cr * lv - r) * op;\n        g += (cg * lv - g) * op;\n        b += (cb * lv - b) * op;\n      }\n      const bb = min(0.55, BB[i]);\n      r += bb * (1 - 0.4 * r);\n      g += bb * (1 - 0.4 * g);\n      b += bb * (1 - 0.4 * b);\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower."},{"name":"Fizz","min":0,"max":1,"about":"How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s."},{"name":"Mix","min":0,"max":1,"about":"How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac."}],"start":[0,2,0,0.06],"measures":{"motion":0.7842,"detail":0.0381,"edges":0.0956,"complexity":2.4963,"coverage":1,"colour":0.5925,"drift":0.2882},"knobResponse":[0.3666,0.2615,0.3734,0.0989]},{"slug":"bauhaus","title":"Bauhaus","family":"geometry","round":1,"note":"바우하우스 포스터처럼 납작한 원반과 막대가 2×4 칸에 놓이고, 한 칸씩 천천히 다른 모양이나 색으로 바뀌어요.","idea":"A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.","buttons":"K1 tap deals the whole sheet again, a diagonal of cells at a time.","code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-bauhaus","type":"code","name":"bauhaus","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the red, yellow and blue together around the wheel; the cream stays cream."},{"name":"Pace","min":0.25,"max":6,"about":"How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once."},{"name":"Grid","min":4,"max":12,"about":"Cells down the long side, from four big squares to twelve small ones."},{"name":"Line","min":0,"max":1,"about":"How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing."}],"start":[0,2,4,0.06],"measures":{"motion":0.0436,"detail":0.04,"edges":0.8787,"complexity":0.0601,"coverage":0.5555,"colour":0.5847,"drift":0.0591},"knobResponse":[0.3486,0.141,0.3458,0.2172]},{"slug":"bernoulli-convolutions","title":"Bernoulli Convolutions","family":"fractal","round":38,"note":"128줄 하나하나가 λ 하나에 대한 ±1 ±λ ±λ² … 의 분포예요. 위의 칸토어 먼지에서 아래의 매끈한 종까지 항이 하나 더해질 때마다 모든 점이 둘로 쪼개지고, λ 가 피소 수의 역수인 열네 줄에서는 합이 같은 점에 거듭 내려앉아 흰 금빛으로 타요. K3 은 동전을 한쪽으로 기울여 종을 오른쪽 벽으로 밀고, K1 을 누르면 항을 다 걷었다가 첫 항부터 다시 쌓아요.","idea":"Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.","buttons":"K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.","code":"// ===== Patternflow pattern =====\n// Title:   Bernoulli Convolutions\n// Family:  fractal\n// Idea:    Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bernoulli convolutions (Børge Jessen and Aurel Wintner, 1935; Paul Erdős, 1939; Boris Solomyak, 1995), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1\n//\n// Knob 1: Hue. Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive.\n// Knob 2: Speed. At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed.\n// Knob 3: Bias. The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95.\n// Knob 4: Zoom. The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart.\n// Buttons: K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.\n\nconst W = 64, H = 128, M = 512, F = M / W;\n// Terms: the cycle falls to NLO and climbs to NHI; stages 0..NHI are kept.\nconst NLO = 6, NHI = 13;\n// Seconds at Speed 2: hold at NHI, per term falling, rest at NLO, per term\n// climbing. The first hold, the picture the pattern opens on, lasts OPEN\n// seconds at any speed.\nconst HOLD = 2.5, TF = 0.33, REST = 0.6, TC = 1.0, OPEN = 1.2;\n// Opening hue: violet and azure, not red.\nconst H0 = 0.62;\n// Pisot numbers in (1, 2), each the largest root of its polynomial (highest\n// power first). Their reciprocals are the lambdas where Erdos (1939) showed\n// the measure singular: the sums land on each other again and again.\nconst PISOT = [\n  [1, 0, -1, -1], // 1.3247, the plastic number\n  [1, -1, 0, 0, -1], // 1.3803\n  [1, -1, -1, 1, 0, -1], // 1.4433\n  [1, -1, 0, -1], // 1.4656\n  [1, -1, -1, 0, 1, 0, -1], // 1.5016\n  [1, 0, -1, -1, -1, -1], // 1.5342\n  [1, -1, -1, 0, 0, 1, 0, -1], // 1.5452\n  [1, -1, 0, -1, 0, -1], // 1.5701\n  [1, -1, -1], // 1.6180, the golden ratio\n  [1, -1, -1, 0, 0, -1], // 1.7049\n  [1, -2, 1, -1], // 1.7549\n  [1, -1, -1, -1], // 1.8393, the tribonacci constant\n  [1, -2, 0, 1, -1], // 1.8668\n  [1, -1, -1, -1, -1], // 1.9276\n];\nconst { floor, min, abs, exp, log2, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = [v, q, p, p, t, v][i];\n  out[o + 1] = [t, v, v, q, p, p][i];\n  out[o + 2] = [p, p, t, v, v, q][i];\n}\n\n// Newton from 2 down to the largest real root.\nfunction rootOf(c) {\n  let x = 2;\n  for (let it = 0; it \u003c 60; it++) {\n    let f = 0, d = 0;\n    for (let k = 0; k \u003c c.length; k++) {\n      d = d * x + f;\n      f = f * x + c[k];\n    }\n    x -= f / d;\n  }\n  return x;\n}\nconst LAMP = PISOT.map((c) => 1 / rootOf(c));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0.5, zoom: 0.06, built: false, bBias: -1, bZoom: -1, since: 0,\n    lam: new Float64Array(H), pis: new Int8Array(H).fill(-1),\n    h: new Float64Array(M), h2: new Float64Array(M + 1),\n    // Per stage, row and column: the mass of the row in the column, and\n    // the log2 of how many sign choices share a point there on average.\n    I: new Float32Array((NHI + 1) * H * W), G: new Float32Array((NHI + 1) * H * W),\n    phase: 0, pt: 0, lo: NLO, x: NHI, open: OPEN,\n    lut: new Float32Array(256 * 3), row: new Float32Array(W), gold: [1, 0.86, 0.56],\n  };\n}\n\n// The lambdas of the rows, the nearest row to each Pisot reciprocal moved\n// onto it exactly. Every other row's lambda is a binary fraction, and for\n// those no two sign choices ever give the same sum: the highest power that\n// differs leaves an odd numerator no lower power can cancel.\nfunction rows(S) {\n  const lo = 0.3 + 0.26 * S.zoom, hi = 0.9 - 0.12 * S.zoom, dl = (hi - lo) / (H - 1);\n  S.lo0 = lo;\n  S.hi0 = hi;\n  S.pis.fill(-1);\n  for (let r = 0; r \u003c H; r++) S.lam[r] = lo + dl * r;\n  LAMP.forEach((l, k) => {\n    const r = round((l - lo) / dl);\n    if (r >= 0 && r \u003c H && abs(S.lam[r] - l) \u003c= dl / 2 + 1e-12) {\n      S.lam[r] = l;\n      S.pis[r] = k;\n    }\n  });\n}\n\n// Every stage of every row. The fine histogram (M bins over the row's\n// range, u = x (1 - lambda) in [-1, 1]) starts as a point at 0 and is\n// pushed through nu -> p S+ nu + (1 - p) S- nu, S+- u = lambda u +- (1 - lambda),\n// once per term. On a Pisot row the sums are also kept exactly, as sorted\n// points with their mass, and points closer than 1e-9 are one point.\nfunction build(S) {\n  rows(S);\n  const p = S.bias, q = 1 - p, { h, h2, I, G } = S, c0 = M / 2 - 0.5;\n  G.fill(0);\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], sh = (1 - lam) * (M / 2);\n    h.fill(0);\n    h[M / 2 - 1] = 0.5;\n    h[M / 2] = 0.5;\n    for (let n = 0; n \u003c= NHI; n++) {\n      const o = (n * H + r) * W;\n      for (let c = 0; c \u003c W; c++) {\n        let m = 0;\n        for (let i = c * F; i \u003c c * F + F; i++) m += h[i];\n        I[o + c] = m;\n      }\n      if (n === NHI) break;\n      h2.fill(0);\n      for (let i = 0; i \u003c M; i++) {\n        const v = h[i];\n        if (v === 0) continue;\n        const base = c0 + lam * (i - c0);\n        for (let sgn = 0; sgn \u003c 2; sgn++) {\n          const f = base + (sgn ? sh : -sh), w = v * (sgn ? p : q), j = floor(f), fr = f - j;\n          if (j >= 0 && j \u003c M) h2[j] += w * (1 - fr);\n          if (j + 1 >= 0 && j + 1 \u003c M) h2[j + 1] += w * fr;\n        }\n      }\n      for (let i = 0; i \u003c M; i++) h[i] = h2[i];\n    }\n    if (S.pis[r] >= 0) exact(S, r, p);\n  }\n  S.built = true;\n  S.bBias = S.bias;\n  S.bZoom = S.zoom;\n  S.since = 0;\n}\n\n// The exact sums on a Pisot row, term by term in the order they shrink:\n// each point x splits into x + lambda^n (mass p) and x - lambda^n (mass 1 - p).\n// m is a point's mass; w the sum of its sign choices' squared masses, so\n// m^2 / w is how many choices it holds, weighted, and 1 when it holds one.\nfunction exact(S, r, p) {\n  const lam = S.lam[r], q = 1 - p, G = S.G, k1 = 1 - lam;\n  let X = new Float64Array([0]), Mm = new Float64Array([1]), Q = new Float64Array([1]);\n  const sm2 = new Float64Array(W), sq = new Float64Array(W);\n  for (let n = 1; n \u003c= NHI; n++) {\n    const a = lam ** (n - 1), L = X.length;\n    const X2 = new Float64Array(2 * L), M2 = new Float64Array(2 * L), Q2 = new Float64Array(2 * L);\n    let i = 0, j = 0, k = -1;\n    while (i \u003c L || j \u003c L) {\n      // Merge the two shifted copies, both already sorted.\n      let x, m, w;\n      if (j >= L || (i \u003c L && X[i] - a \u003c= X[j] + a)) {\n        x = X[i] - a;\n        m = Mm[i] * q;\n        w = Q[i] * q * q;\n        i++;\n      } else {\n        x = X[j] + a;\n        m = Mm[j] * p;\n        w = Q[j] * p * p;\n        j++;\n      }\n      if (k >= 0 && x - X2[k] \u003c 1e-9) {\n        M2[k] += m;\n        Q2[k] += w;\n      } else {\n        k++;\n        X2[k] = x;\n        M2[k] = m;\n        Q2[k] = w;\n      }\n    }\n    X = X2.subarray(0, k + 1);\n    Mm = M2.subarray(0, k + 1);\n    Q = Q2.subarray(0, k + 1);\n    sm2.fill(0);\n    sq.fill(0);\n    for (let t = 0; t \u003c= k; t++) {\n      const c = cl(floor((X[t] * k1 + 1) * (W / 2)), 0, W - 1);\n      sm2[c] += Mm[t] * Mm[t];\n      sq[c] += Q[t];\n    }\n    const o = (n * H + r) * W;\n    for (let c = 0; c \u003c W; c++) G[o + c] = sq[c] > 0 ? log2(sm2[c] / sq[c]) : 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], 0.5, 0.95);\n  S.zoom = cl(k[3], 0, 1);\n  S.since += d;\n  // Rebuilding takes a few milliseconds: at most ten times a second while a knob turns.\n  if (!S.built || ((abs(S.bias - S.bBias) > 1e-4 || abs(S.zoom - S.bZoom) > 1e-4) && S.since > 0.1)) build(S);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lo = 0;\n    if (S.phase !== 1) {\n      S.phase = 1;\n      S.pt = (NHI - S.x) * TF;\n    }\n  }\n  // The term count x runs hold, fall, rest, climb.\n  if (S.open > 0) {\n    // The opening hold, in plain seconds; it ends straight into the fall.\n    S.open -= d;\n    if (S.open \u003c= 0) S.pt = HOLD;\n  } else S.pt += (d * S.speed) / 2;\n  const span = NHI - S.lo;\n  if (S.phase === 0 && S.pt >= HOLD) {\n    S.phase = 1;\n    S.pt -= HOLD;\n  }\n  if (S.phase === 1 && S.pt >= span * TF) {\n    S.phase = 2;\n    S.pt -= span * TF;\n  }\n  if (S.phase === 2 && S.pt >= REST) {\n    S.phase = 3;\n    S.pt -= REST;\n  }\n  if (S.phase === 3 && S.pt >= span * TC) {\n    S.phase = 0;\n    S.pt -= span * TC;\n    S.lo = NLO;\n  }\n  if (S.phase === 0) S.x = NHI;\n  else if (S.phase === 1) {\n    const u = S.pt / TF, j = floor(u);\n    S.x = NHI - j - sm(0, 1, u - j);\n  } else if (S.phase === 2) S.x = S.lo;\n  else {\n    const u = S.pt / TC, j = floor(u);\n    S.x = S.lo + j + sm(0, 0.65, u - j);\n  }\n  S.x = cl(S.x, 0, NHI);\n}\n\n// Density levels: violet where a row is thin, azure where it is thick. A\n// hue that comes round to orange or yellow is paled and lifted, so thin\n// parts read peach or butter and not brown or olive.\nfunction palette(S) {\n  const lut = S.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const L = i / 255, h = S.hue + H0 + 0.16 * (1 - L) - 0.06, hh = h - floor(h);\n    const warm = cl(1 - abs(hh - 0.13) / 0.13, 0, 1);\n    hsv(h, 0.9 - 0.45 * L - 0.3 * warm, min(1, 0.92 * L ** (0.7 - 0.2 * warm) * (1 + 0.35 * warm)), lut, i * 3);\n  }\n  // The seams: white-gold, nearly white where the rows themselves are warm.\n  const hh = S.hue + H0 - 0.06 - floor(S.hue + H0 - 0.06), warm = cl(1 - abs(hh - 0.13) / 0.2, 0, 1);\n  S.gold[0] = 1;\n  S.gold[1] = 0.86 + 0.12 * warm;\n  S.gold[2] = 0.56 + 0.36 * warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.built) return;\n  palette(S);\n  const { I, G, lut, row } = S, p = S.bias, q = 1 - p;\n  const n = min(NHI - 1, floor(S.x)), s = S.x - n;\n  // The new term splits every point by +- (1 - lambda) lambda^n of the range,\n  // and in the last third of the split the exact next stage takes over.\n  const wNext = sm(0.55, 1, s);\n  const gold = S.gold;\n  // The entropy bound p^p (1 - p)^(1 - p), as a row.\n  const lstar = p ** p * q ** q, rstar = round(((lstar - S.lo0) / (S.hi0 - S.lo0)) * (H - 1));\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], dsh = s * (1 - lam) * lam ** n * (W / 2);\n    const o0 = (n * H + r) * W, o1 = o0 + H * W;\n    for (let c = 0; c \u003c W; c++) {\n      // p of the row moved right by dsh, 1 - p moved left.\n      const a = c - dsh, b = c + dsh, ia = floor(a), ib = floor(b), fa = a - ia, fb = b - ib;\n      const va = (ia >= 0 && ia \u003c W ? I[o0 + ia] * (1 - fa) : 0) + (ia + 1 >= 0 && ia + 1 \u003c W ? I[o0 + ia + 1] * fa : 0);\n      const vb = (ib >= 0 && ib \u003c W ? I[o0 + ib] * (1 - fb) : 0) + (ib + 1 >= 0 && ib + 1 \u003c W ? I[o0 + ib + 1] * fb : 0);\n      row[c] = (p * va + q * vb) * (1 - wNext) + I[o1 + c] * wNext;\n    }\n    const seam = S.pis[r] >= 0;\n    for (let c = 0; c \u003c W; c++) {\n      // 64 times the mass is 1 where the row is flat; 1 - e^(-rho / 1.2)\n      // keeps thin rows readable and the dust and the bells from burning out.\n      const L = 1 - exp((-W * row[c]) / 1.2), li = round(L * 255) * 3;\n      let R = lut[li], Gc = lut[li + 1], B = lut[li + 2];\n      if (seam) {\n        const g = G[o0 + c] * (1 - s) + G[o1 + c] * s, k = sm(0.2, 5.5, g) * (0.35 + 0.65 * sm(0, 0.5, L));\n        R += (gold[0] - R) * k;\n        Gc += (gold[1] - Gc) * k;\n        B += (gold[2] - B) * k;\n      }\n      if (r === rstar && (c \u003c 2 || c > W - 3)) R = Gc = B = 0.85;\n      display.setPixel(c, r, round(255 * min(1, R)), round(255 * min(1, Gc)), round(255 * min(1, B)));\n    }\n  }\n}\n","layer":{"id":"layer-bernoulli-convolutions","type":"code","name":"bernoulli-convolutions","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bernoulli Convolutions\n// Family:  fractal\n// Idea:    Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bernoulli convolutions (Børge Jessen and Aurel Wintner, 1935; Paul Erdős, 1939; Boris Solomyak, 1995), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1\n//\n// Knob 1: Hue. Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive.\n// Knob 2: Speed. At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed.\n// Knob 3: Bias. The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95.\n// Knob 4: Zoom. The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart.\n// Buttons: K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.\n\nconst W = 64, H = 128, M = 512, F = M / W;\n// Terms: the cycle falls to NLO and climbs to NHI; stages 0..NHI are kept.\nconst NLO = 6, NHI = 13;\n// Seconds at Speed 2: hold at NHI, per term falling, rest at NLO, per term\n// climbing. The first hold, the picture the pattern opens on, lasts OPEN\n// seconds at any speed.\nconst HOLD = 2.5, TF = 0.33, REST = 0.6, TC = 1.0, OPEN = 1.2;\n// Opening hue: violet and azure, not red.\nconst H0 = 0.62;\n// Pisot numbers in (1, 2), each the largest root of its polynomial (highest\n// power first). Their reciprocals are the lambdas where Erdos (1939) showed\n// the measure singular: the sums land on each other again and again.\nconst PISOT = [\n  [1, 0, -1, -1], // 1.3247, the plastic number\n  [1, -1, 0, 0, -1], // 1.3803\n  [1, -1, -1, 1, 0, -1], // 1.4433\n  [1, -1, 0, -1], // 1.4656\n  [1, -1, -1, 0, 1, 0, -1], // 1.5016\n  [1, 0, -1, -1, -1, -1], // 1.5342\n  [1, -1, -1, 0, 0, 1, 0, -1], // 1.5452\n  [1, -1, 0, -1, 0, -1], // 1.5701\n  [1, -1, -1], // 1.6180, the golden ratio\n  [1, -1, -1, 0, 0, -1], // 1.7049\n  [1, -2, 1, -1], // 1.7549\n  [1, -1, -1, -1], // 1.8393, the tribonacci constant\n  [1, -2, 0, 1, -1], // 1.8668\n  [1, -1, -1, -1, -1], // 1.9276\n];\nconst { floor, min, abs, exp, log2, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = [v, q, p, p, t, v][i];\n  out[o + 1] = [t, v, v, q, p, p][i];\n  out[o + 2] = [p, p, t, v, v, q][i];\n}\n\n// Newton from 2 down to the largest real root.\nfunction rootOf(c) {\n  let x = 2;\n  for (let it = 0; it \u003c 60; it++) {\n    let f = 0, d = 0;\n    for (let k = 0; k \u003c c.length; k++) {\n      d = d * x + f;\n      f = f * x + c[k];\n    }\n    x -= f / d;\n  }\n  return x;\n}\nconst LAMP = PISOT.map((c) => 1 / rootOf(c));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0.5, zoom: 0.06, built: false, bBias: -1, bZoom: -1, since: 0,\n    lam: new Float64Array(H), pis: new Int8Array(H).fill(-1),\n    h: new Float64Array(M), h2: new Float64Array(M + 1),\n    // Per stage, row and column: the mass of the row in the column, and\n    // the log2 of how many sign choices share a point there on average.\n    I: new Float32Array((NHI + 1) * H * W), G: new Float32Array((NHI + 1) * H * W),\n    phase: 0, pt: 0, lo: NLO, x: NHI, open: OPEN,\n    lut: new Float32Array(256 * 3), row: new Float32Array(W), gold: [1, 0.86, 0.56],\n  };\n}\n\n// The lambdas of the rows, the nearest row to each Pisot reciprocal moved\n// onto it exactly. Every other row's lambda is a binary fraction, and for\n// those no two sign choices ever give the same sum: the highest power that\n// differs leaves an odd numerator no lower power can cancel.\nfunction rows(S) {\n  const lo = 0.3 + 0.26 * S.zoom, hi = 0.9 - 0.12 * S.zoom, dl = (hi - lo) / (H - 1);\n  S.lo0 = lo;\n  S.hi0 = hi;\n  S.pis.fill(-1);\n  for (let r = 0; r \u003c H; r++) S.lam[r] = lo + dl * r;\n  LAMP.forEach((l, k) => {\n    const r = round((l - lo) / dl);\n    if (r >= 0 && r \u003c H && abs(S.lam[r] - l) \u003c= dl / 2 + 1e-12) {\n      S.lam[r] = l;\n      S.pis[r] = k;\n    }\n  });\n}\n\n// Every stage of every row. The fine histogram (M bins over the row's\n// range, u = x (1 - lambda) in [-1, 1]) starts as a point at 0 and is\n// pushed through nu -> p S+ nu + (1 - p) S- nu, S+- u = lambda u +- (1 - lambda),\n// once per term. On a Pisot row the sums are also kept exactly, as sorted\n// points with their mass, and points closer than 1e-9 are one point.\nfunction build(S) {\n  rows(S);\n  const p = S.bias, q = 1 - p, { h, h2, I, G } = S, c0 = M / 2 - 0.5;\n  G.fill(0);\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], sh = (1 - lam) * (M / 2);\n    h.fill(0);\n    h[M / 2 - 1] = 0.5;\n    h[M / 2] = 0.5;\n    for (let n = 0; n \u003c= NHI; n++) {\n      const o = (n * H + r) * W;\n      for (let c = 0; c \u003c W; c++) {\n        let m = 0;\n        for (let i = c * F; i \u003c c * F + F; i++) m += h[i];\n        I[o + c] = m;\n      }\n      if (n === NHI) break;\n      h2.fill(0);\n      for (let i = 0; i \u003c M; i++) {\n        const v = h[i];\n        if (v === 0) continue;\n        const base = c0 + lam * (i - c0);\n        for (let sgn = 0; sgn \u003c 2; sgn++) {\n          const f = base + (sgn ? sh : -sh), w = v * (sgn ? p : q), j = floor(f), fr = f - j;\n          if (j >= 0 && j \u003c M) h2[j] += w * (1 - fr);\n          if (j + 1 >= 0 && j + 1 \u003c M) h2[j + 1] += w * fr;\n        }\n      }\n      for (let i = 0; i \u003c M; i++) h[i] = h2[i];\n    }\n    if (S.pis[r] >= 0) exact(S, r, p);\n  }\n  S.built = true;\n  S.bBias = S.bias;\n  S.bZoom = S.zoom;\n  S.since = 0;\n}\n\n// The exact sums on a Pisot row, term by term in the order they shrink:\n// each point x splits into x + lambda^n (mass p) and x - lambda^n (mass 1 - p).\n// m is a point's mass; w the sum of its sign choices' squared masses, so\n// m^2 / w is how many choices it holds, weighted, and 1 when it holds one.\nfunction exact(S, r, p) {\n  const lam = S.lam[r], q = 1 - p, G = S.G, k1 = 1 - lam;\n  let X = new Float64Array([0]), Mm = new Float64Array([1]), Q = new Float64Array([1]);\n  const sm2 = new Float64Array(W), sq = new Float64Array(W);\n  for (let n = 1; n \u003c= NHI; n++) {\n    const a = lam ** (n - 1), L = X.length;\n    const X2 = new Float64Array(2 * L), M2 = new Float64Array(2 * L), Q2 = new Float64Array(2 * L);\n    let i = 0, j = 0, k = -1;\n    while (i \u003c L || j \u003c L) {\n      // Merge the two shifted copies, both already sorted.\n      let x, m, w;\n      if (j >= L || (i \u003c L && X[i] - a \u003c= X[j] + a)) {\n        x = X[i] - a;\n        m = Mm[i] * q;\n        w = Q[i] * q * q;\n        i++;\n      } else {\n        x = X[j] + a;\n        m = Mm[j] * p;\n        w = Q[j] * p * p;\n        j++;\n      }\n      if (k >= 0 && x - X2[k] \u003c 1e-9) {\n        M2[k] += m;\n        Q2[k] += w;\n      } else {\n        k++;\n        X2[k] = x;\n        M2[k] = m;\n        Q2[k] = w;\n      }\n    }\n    X = X2.subarray(0, k + 1);\n    Mm = M2.subarray(0, k + 1);\n    Q = Q2.subarray(0, k + 1);\n    sm2.fill(0);\n    sq.fill(0);\n    for (let t = 0; t \u003c= k; t++) {\n      const c = cl(floor((X[t] * k1 + 1) * (W / 2)), 0, W - 1);\n      sm2[c] += Mm[t] * Mm[t];\n      sq[c] += Q[t];\n    }\n    const o = (n * H + r) * W;\n    for (let c = 0; c \u003c W; c++) G[o + c] = sq[c] > 0 ? log2(sm2[c] / sq[c]) : 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], 0.5, 0.95);\n  S.zoom = cl(k[3], 0, 1);\n  S.since += d;\n  // Rebuilding takes a few milliseconds: at most ten times a second while a knob turns.\n  if (!S.built || ((abs(S.bias - S.bBias) > 1e-4 || abs(S.zoom - S.bZoom) > 1e-4) && S.since > 0.1)) build(S);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lo = 0;\n    if (S.phase !== 1) {\n      S.phase = 1;\n      S.pt = (NHI - S.x) * TF;\n    }\n  }\n  // The term count x runs hold, fall, rest, climb.\n  if (S.open > 0) {\n    // The opening hold, in plain seconds; it ends straight into the fall.\n    S.open -= d;\n    if (S.open \u003c= 0) S.pt = HOLD;\n  } else S.pt += (d * S.speed) / 2;\n  const span = NHI - S.lo;\n  if (S.phase === 0 && S.pt >= HOLD) {\n    S.phase = 1;\n    S.pt -= HOLD;\n  }\n  if (S.phase === 1 && S.pt >= span * TF) {\n    S.phase = 2;\n    S.pt -= span * TF;\n  }\n  if (S.phase === 2 && S.pt >= REST) {\n    S.phase = 3;\n    S.pt -= REST;\n  }\n  if (S.phase === 3 && S.pt >= span * TC) {\n    S.phase = 0;\n    S.pt -= span * TC;\n    S.lo = NLO;\n  }\n  if (S.phase === 0) S.x = NHI;\n  else if (S.phase === 1) {\n    const u = S.pt / TF, j = floor(u);\n    S.x = NHI - j - sm(0, 1, u - j);\n  } else if (S.phase === 2) S.x = S.lo;\n  else {\n    const u = S.pt / TC, j = floor(u);\n    S.x = S.lo + j + sm(0, 0.65, u - j);\n  }\n  S.x = cl(S.x, 0, NHI);\n}\n\n// Density levels: violet where a row is thin, azure where it is thick. A\n// hue that comes round to orange or yellow is paled and lifted, so thin\n// parts read peach or butter and not brown or olive.\nfunction palette(S) {\n  const lut = S.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const L = i / 255, h = S.hue + H0 + 0.16 * (1 - L) - 0.06, hh = h - floor(h);\n    const warm = cl(1 - abs(hh - 0.13) / 0.13, 0, 1);\n    hsv(h, 0.9 - 0.45 * L - 0.3 * warm, min(1, 0.92 * L ** (0.7 - 0.2 * warm) * (1 + 0.35 * warm)), lut, i * 3);\n  }\n  // The seams: white-gold, nearly white where the rows themselves are warm.\n  const hh = S.hue + H0 - 0.06 - floor(S.hue + H0 - 0.06), warm = cl(1 - abs(hh - 0.13) / 0.2, 0, 1);\n  S.gold[0] = 1;\n  S.gold[1] = 0.86 + 0.12 * warm;\n  S.gold[2] = 0.56 + 0.36 * warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.built) return;\n  palette(S);\n  const { I, G, lut, row } = S, p = S.bias, q = 1 - p;\n  const n = min(NHI - 1, floor(S.x)), s = S.x - n;\n  // The new term splits every point by +- (1 - lambda) lambda^n of the range,\n  // and in the last third of the split the exact next stage takes over.\n  const wNext = sm(0.55, 1, s);\n  const gold = S.gold;\n  // The entropy bound p^p (1 - p)^(1 - p), as a row.\n  const lstar = p ** p * q ** q, rstar = round(((lstar - S.lo0) / (S.hi0 - S.lo0)) * (H - 1));\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], dsh = s * (1 - lam) * lam ** n * (W / 2);\n    const o0 = (n * H + r) * W, o1 = o0 + H * W;\n    for (let c = 0; c \u003c W; c++) {\n      // p of the row moved right by dsh, 1 - p moved left.\n      const a = c - dsh, b = c + dsh, ia = floor(a), ib = floor(b), fa = a - ia, fb = b - ib;\n      const va = (ia >= 0 && ia \u003c W ? I[o0 + ia] * (1 - fa) : 0) + (ia + 1 >= 0 && ia + 1 \u003c W ? I[o0 + ia + 1] * fa : 0);\n      const vb = (ib >= 0 && ib \u003c W ? I[o0 + ib] * (1 - fb) : 0) + (ib + 1 >= 0 && ib + 1 \u003c W ? I[o0 + ib + 1] * fb : 0);\n      row[c] = (p * va + q * vb) * (1 - wNext) + I[o1 + c] * wNext;\n    }\n    const seam = S.pis[r] >= 0;\n    for (let c = 0; c \u003c W; c++) {\n      // 64 times the mass is 1 where the row is flat; 1 - e^(-rho / 1.2)\n      // keeps thin rows readable and the dust and the bells from burning out.\n      const L = 1 - exp((-W * row[c]) / 1.2), li = round(L * 255) * 3;\n      let R = lut[li], Gc = lut[li + 1], B = lut[li + 2];\n      if (seam) {\n        const g = G[o0 + c] * (1 - s) + G[o1 + c] * s, k = sm(0.2, 5.5, g) * (0.35 + 0.65 * sm(0, 0.5, L));\n        R += (gold[0] - R) * k;\n        Gc += (gold[1] - Gc) * k;\n        B += (gold[2] - B) * k;\n      }\n      if (r === rstar && (c \u003c 2 || c > W - 3)) R = Gc = B = 0.85;\n      display.setPixel(c, r, round(255 * min(1, R)), round(255 * min(1, Gc)), round(255 * min(1, B)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed."},{"name":"Bias","min":0.5,"max":0.95,"about":"The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95."},{"name":"Zoom","min":0,"max":1,"about":"The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart."}],"start":[0,2,0.5,0.06],"measures":{"motion":0.1052,"detail":0.0778,"edges":0.2761,"complexity":1.7226,"coverage":0.81,"colour":0.2382,"drift":0.0505},"knobResponse":[0.3122,0.0507,0.314,0.1288]},{"slug":"bertrand-paradox","title":"Bertrand Paradox","family":"data","round":33,"note":"지름 40 LED 의 원 셋이 세 칸에 하나씩 서서, 원마다 다른 뜻의 무작위로 현을 1초에 24개씩 긋고 현은 LED 하나씩 부서져 사라져요. 삼각형 변보다 긴 현은 자홍, 짧은 현은 초록이고, 옆 막대와 숫자가 긴 현의 몫을 세어 위 원은 1/3 로, 가운데는 1/2 로, 아래는 1/4 로 모여요. K3 을 올리면 선이 원마다 다른 밀도의 점묘가 되고, K1 을 누르면 원과 셈을 비우고 처음부터 다시 그어요.","idea":"Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.","buttons":"K1 tap clears the three discs and their counts, and the gauges start again from nothing.","code":"// ===== Patternflow pattern =====\n// Title:   Bertrand Paradox\n// Family:  data\n// Idea:    Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bertrand paradox (Joseph Bertrand, 1889), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1\n//\n// Knob 1: Hue. Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap.\n// Knob 2: Speed. The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep.\n// Knob 3: Chords. How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross.\n// Knob 4: Persist. How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple.\n// Buttons: K1 tap clears the three discs and their counts, and the gauges start again from nothing.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, round, sqrt, sin, cos, abs, exp, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// One disc in each third of the 128 rows, 40 LEDs across, set left, right,\n// left so each has 22 columns beside it for its gauge.\nconst R = 19.5;\nconst DISCS = [\n  { cx: 20.5, cy: 21.5, side: 1, num: 1, den: 3 },\n  { cx: 43.5, cy: 64, side: -1, num: 1, den: 2 },\n  { cx: 20.5, cy: 106.5, side: 1, num: 1, den: 4 },\n];\nconst BAR = 40;\n// The points each method picked for its newest chords, shown white for a\n// quarter of a second: the rim pair, the point on the radius, the midpoint.\nconst SEEDS = 16, SEED_LIFE = 0.25;\n// Chords a second times the fade time at the opening knobs.\nconst OPEN = 24 * 1.1 * 7 ** 0.06;\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = {\n  0: 0b111101101101111, 1: 0b010110010010111, 2: 0b111001111100111, 3: 0b111001111001111,\n  4: 0b101101111001001, 5: 0b111100111001111, 6: 0b111100111101111, 7: 0b111001001001001,\n  8: 0b111101111101111, 9: 0b111101111001111, \"/\": 0b001001010100100, \"-\": 0b000000111000000,\n};\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i].map((c) => c * 255);\n}\n\n// The faint frame: each disc's rim and its inscribed triangle, point up.\n// They sit at 24 of 255, just visible on the panel and still dark to the\n// study's count of lit LEDs, which starts above 24.\nfunction buildFrame() {\n  const f = new Uint8Array(N);\n  for (const d of DISCS) {\n    for (let a = 0; a \u003c 720; a++) {\n      const t = (a / 720) * 2 * PI, x = floor(d.cx + R * cos(t)), y = floor(d.cy + R * sin(t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) f[y * W + x] = 1;\n    }\n    for (let k = 0; k \u003c 3; k++) {\n      const a0 = -PI / 2 + (k * 2 * PI) / 3, a1 = a0 + (2 * PI) / 3;\n      const x0 = d.cx + R * cos(a0), y0 = d.cy + R * sin(a0), x1 = d.cx + R * cos(a1), y1 = d.cy + R * sin(a1);\n      const n = 80;\n      for (let j = 0; j \u003c= n; j++) f[floor(y0 + ((y1 - y0) * j) / n) * W + floor(x0 + ((x1 - x0) * j) / n)] = 2;\n    }\n  }\n  return f;\n}\n\nexport function setup(params) {\n  const thr = new Float32Array(N);\n  // Each LED lets go of a fading chord at its own level, so a chord crumbles\n  // LED by LED instead of dimming, and every lit LED is at full brightness.\n  // Half-lit lines would turn the saturated pair towards grey.\n  for (let i = 0; i \u003c N; i++) thr[i] = 0.1 + 0.9 * Math.random();\n  params.s = {\n    accL: new Float32Array(N), accS: new Float32Array(N), thr, frame: buildFrame(),\n    long: [0, 0, 0], total: [0, 0, 0], carry: 0, hue: 0, clock: 0, scale: 1, cap: 2.5,\n    seeds: new Int32Array(3 * SEEDS).fill(-1), born: new Float32Array(3 * SEEDS), next: [0, 0, 0],\n  };\n}\n\n// A chord of the unit circle by method m, as its two ends and its distance\n// p from the centre. It is longer than the triangle's side, sqrt 3, exactly\n// when p \u003c 1/2, when it cuts the triangle's incircle.\nfunction chord(m) {\n  const rnd = Math.random;\n  if (m === 0) {\n    // Two uniform points on the rim: long with probability 1/3.\n    const a = 2 * PI * rnd(), b = 2 * PI * rnd();\n    return [cos(a), sin(a), cos(b), sin(b), abs(cos((a - b) / 2))];\n  }\n  // A uniform point on a random radius (m = 1, long with probability 1/2)\n  // or a uniform point in the disc (m = 2, 1/4) as the chord's midpoint.\n  const f = 2 * PI * rnd(), p = m === 1 ? rnd() : sqrt(rnd()), h = sqrt(1 - p * p), c = cos(f), s = sin(f);\n  return [p * c - h * s, p * s + h * c, p * c + h * s, p * s - h * c, p];\n}\n\nfunction seed(P, d, x, y) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const j = d * SEEDS + P.next[d];\n  P.next[d] = (P.next[d] + 1) % SEEDS;\n  P.seeds[j] = y * W + x;\n  P.born[j] = P.clock;\n}\n\n// Disc d draws its chords by method d.\nfunction lay(P, d) {\n  const D = DISCS[d], [ax, ay, bx, by, p] = chord(d), isLong = p \u003c 0.5;\n  if (d === 0) {\n    seed(P, d, D.cx + R * ax, D.cy + R * ay);\n    seed(P, d, D.cx + R * bx, D.cy + R * by);\n  } else seed(P, d, D.cx + (R * (ax + bx)) / 2, D.cy + (R * (ay + by)) / 2);\n  const acc = isLong ? P.accL : P.accS;\n  const x0 = D.cx + R * ax, y0 = D.cy + R * ay, dx = R * (bx - ax), dy = R * (by - ay);\n  const n = Math.ceil(max(abs(dx), abs(dy)));\n  let last = -1;\n  for (let j = 0; j \u003c= n; j++) {\n    const x = floor(x0 + (dx * j) / max(1, n)), y = floor(y0 + (dy * j) / max(1, n));\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const i = y * W + x;\n    if (i === last) continue;\n    last = i;\n    acc[i] = min(acc[i] + 1, P.cap);\n  }\n  P.total[d]++;\n  if (isLong) P.long[d]++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const clock = d * (cl(k[1], 0.2, 3) / 2);\n  const rate = 24 * 10 ** cl(k[2], 0, 1), tau = 1.1 * 7 ** cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.accL.fill(0);\n    P.accS.fill(0);\n    P.long = [0, 0, 0];\n    P.total = [0, 0, 0];\n    P.seeds.fill(-1);\n  }\n  P.clock += clock;\n  // With more chords alive than at the opening, the level an LED needs to\n  // light rises with them (to the 0.85th power), so the discs turn from a\n  // few lines into a stipple of each method's own density instead of\n  // filling solid: even in the middle disc, heavy at the rim in the top one,\n  // hollow in the bottom one.\n  P.scale = max(1, (rate * tau) / OPEN) ** 0.85;\n  P.cap = 2.5 * P.scale;\n  const fade = exp(-clock / tau), aL = P.accL, aS = P.accS;\n  for (let i = 0; i \u003c N; i++) {\n    aL[i] *= fade;\n    aS[i] *= fade;\n  }\n  P.carry += rate * clock;\n  const n = floor(P.carry);\n  P.carry -= n;\n  for (let j = 0; j \u003c n; j++) for (let m = 0; m \u003c 3; m++) lay(P, m);\n}\n\nfunction glyph(display, ch, x0, y0, sc, c) {\n  const bits = FONT[ch];\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((bits >> (14 - r * 3 - q)) & 1)\n        for (let u = 0; u \u003c sc; u++) for (let v = 0; v \u003c sc; v++) display.setPixel(x0 + q * sc + u, y0 + r * sc + v, c[0], c[1], c[2]);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  // Magenta for the long chords, green for the short: at full saturation\n  // the pair sits as far apart as two colours can on the panel's red-green\n  // and yellow-blue axes, and neither opens on red.\n  const cL = hsv(P.hue + 5 / 6, 1, 1), cS = hsv(P.hue + 1 / 3, 1, 1);\n  const { accL, accS, thr, frame } = P, sc = P.scale;\n  for (let i = 0; i \u003c N; i++) {\n    const a = accL[i], b = accS[i], t = a + b, x = i % W, y = (i / W) | 0;\n    if (t > thr[i] * sc) {\n      // A lit LED is at full brightness: the fade shows as crumbling.\n      const c = a >= b ? cL : cS;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    } else if (frame[i]) display.setPixel(x, y, 24, 24, 24);\n    else display.setPixel(x, y, 0, 0, 0);\n  }\n  for (let j = 0; j \u003c P.seeds.length; j++) {\n    const i = P.seeds[j];\n    if (i >= 0 && P.clock - P.born[j] \u003c SEED_LIFE) display.setPixel(i % W, (i / W) | 0, 255, 255, 255);\n  }\n  for (let d = 0; d \u003c 3; d++) {\n    const D = DISCS[d], yb = round(D.cy + R) - 1, top = yb - BAR + 1;\n    const bx = D.side > 0 ? 43 : 18, tx = D.side > 0 ? 49 : 1;\n    const tot = P.total[d], f = tot ? P.long[d] / tot : 0, hgt = round(f * BAR);\n    // The bar: the share of long chords so far, out of 40 rows.\n    for (let j = 0; j \u003c hgt; j++) for (let q = 0; q \u003c 3; q++) display.setPixel(bx + q, yb - j, cL[0], cL[1], cL[2]);\n    // The answer this method gives, as a white tick and its fraction.\n    const ty = yb - round((D.num / D.den) * BAR);\n    for (let q = -1; q \u003c= 3; q++) display.setPixel(bx + q, ty, 255, 255, 255);\n    const lx = D.side > 0 ? tx : tx + 3;\n    glyph(display, D.num, lx, ty - 2, 1, cS);\n    glyph(display, \"/\", lx + 4, ty - 2, 1, cS);\n    glyph(display, D.den, lx + 8, ty - 2, 1, cS);\n    // The running share in percent, two digits, in the long colour.\n    const pct = min(99, round(f * 100));\n    const s = tot ? [floor(pct / 10), pct % 10] : [\"-\", \"-\"];\n    glyph(display, s[0], tx, top + 1, 2, cL);\n    glyph(display, s[1], tx + 8, top + 1, 2, cL);\n  }\n}\n","layer":{"id":"layer-bertrand-paradox","type":"code","name":"bertrand-paradox","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bertrand Paradox\n// Family:  data\n// Idea:    Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bertrand paradox (Joseph Bertrand, 1889), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1\n//\n// Knob 1: Hue. Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap.\n// Knob 2: Speed. The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep.\n// Knob 3: Chords. How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross.\n// Knob 4: Persist. How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple.\n// Buttons: K1 tap clears the three discs and their counts, and the gauges start again from nothing.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, round, sqrt, sin, cos, abs, exp, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// One disc in each third of the 128 rows, 40 LEDs across, set left, right,\n// left so each has 22 columns beside it for its gauge.\nconst R = 19.5;\nconst DISCS = [\n  { cx: 20.5, cy: 21.5, side: 1, num: 1, den: 3 },\n  { cx: 43.5, cy: 64, side: -1, num: 1, den: 2 },\n  { cx: 20.5, cy: 106.5, side: 1, num: 1, den: 4 },\n];\nconst BAR = 40;\n// The points each method picked for its newest chords, shown white for a\n// quarter of a second: the rim pair, the point on the radius, the midpoint.\nconst SEEDS = 16, SEED_LIFE = 0.25;\n// Chords a second times the fade time at the opening knobs.\nconst OPEN = 24 * 1.1 * 7 ** 0.06;\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = {\n  0: 0b111101101101111, 1: 0b010110010010111, 2: 0b111001111100111, 3: 0b111001111001111,\n  4: 0b101101111001001, 5: 0b111100111001111, 6: 0b111100111101111, 7: 0b111001001001001,\n  8: 0b111101111101111, 9: 0b111101111001111, \"/\": 0b001001010100100, \"-\": 0b000000111000000,\n};\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i].map((c) => c * 255);\n}\n\n// The faint frame: each disc's rim and its inscribed triangle, point up.\n// They sit at 24 of 255, just visible on the panel and still dark to the\n// study's count of lit LEDs, which starts above 24.\nfunction buildFrame() {\n  const f = new Uint8Array(N);\n  for (const d of DISCS) {\n    for (let a = 0; a \u003c 720; a++) {\n      const t = (a / 720) * 2 * PI, x = floor(d.cx + R * cos(t)), y = floor(d.cy + R * sin(t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) f[y * W + x] = 1;\n    }\n    for (let k = 0; k \u003c 3; k++) {\n      const a0 = -PI / 2 + (k * 2 * PI) / 3, a1 = a0 + (2 * PI) / 3;\n      const x0 = d.cx + R * cos(a0), y0 = d.cy + R * sin(a0), x1 = d.cx + R * cos(a1), y1 = d.cy + R * sin(a1);\n      const n = 80;\n      for (let j = 0; j \u003c= n; j++) f[floor(y0 + ((y1 - y0) * j) / n) * W + floor(x0 + ((x1 - x0) * j) / n)] = 2;\n    }\n  }\n  return f;\n}\n\nexport function setup(params) {\n  const thr = new Float32Array(N);\n  // Each LED lets go of a fading chord at its own level, so a chord crumbles\n  // LED by LED instead of dimming, and every lit LED is at full brightness.\n  // Half-lit lines would turn the saturated pair towards grey.\n  for (let i = 0; i \u003c N; i++) thr[i] = 0.1 + 0.9 * Math.random();\n  params.s = {\n    accL: new Float32Array(N), accS: new Float32Array(N), thr, frame: buildFrame(),\n    long: [0, 0, 0], total: [0, 0, 0], carry: 0, hue: 0, clock: 0, scale: 1, cap: 2.5,\n    seeds: new Int32Array(3 * SEEDS).fill(-1), born: new Float32Array(3 * SEEDS), next: [0, 0, 0],\n  };\n}\n\n// A chord of the unit circle by method m, as its two ends and its distance\n// p from the centre. It is longer than the triangle's side, sqrt 3, exactly\n// when p \u003c 1/2, when it cuts the triangle's incircle.\nfunction chord(m) {\n  const rnd = Math.random;\n  if (m === 0) {\n    // Two uniform points on the rim: long with probability 1/3.\n    const a = 2 * PI * rnd(), b = 2 * PI * rnd();\n    return [cos(a), sin(a), cos(b), sin(b), abs(cos((a - b) / 2))];\n  }\n  // A uniform point on a random radius (m = 1, long with probability 1/2)\n  // or a uniform point in the disc (m = 2, 1/4) as the chord's midpoint.\n  const f = 2 * PI * rnd(), p = m === 1 ? rnd() : sqrt(rnd()), h = sqrt(1 - p * p), c = cos(f), s = sin(f);\n  return [p * c - h * s, p * s + h * c, p * c + h * s, p * s - h * c, p];\n}\n\nfunction seed(P, d, x, y) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const j = d * SEEDS + P.next[d];\n  P.next[d] = (P.next[d] + 1) % SEEDS;\n  P.seeds[j] = y * W + x;\n  P.born[j] = P.clock;\n}\n\n// Disc d draws its chords by method d.\nfunction lay(P, d) {\n  const D = DISCS[d], [ax, ay, bx, by, p] = chord(d), isLong = p \u003c 0.5;\n  if (d === 0) {\n    seed(P, d, D.cx + R * ax, D.cy + R * ay);\n    seed(P, d, D.cx + R * bx, D.cy + R * by);\n  } else seed(P, d, D.cx + (R * (ax + bx)) / 2, D.cy + (R * (ay + by)) / 2);\n  const acc = isLong ? P.accL : P.accS;\n  const x0 = D.cx + R * ax, y0 = D.cy + R * ay, dx = R * (bx - ax), dy = R * (by - ay);\n  const n = Math.ceil(max(abs(dx), abs(dy)));\n  let last = -1;\n  for (let j = 0; j \u003c= n; j++) {\n    const x = floor(x0 + (dx * j) / max(1, n)), y = floor(y0 + (dy * j) / max(1, n));\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const i = y * W + x;\n    if (i === last) continue;\n    last = i;\n    acc[i] = min(acc[i] + 1, P.cap);\n  }\n  P.total[d]++;\n  if (isLong) P.long[d]++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const clock = d * (cl(k[1], 0.2, 3) / 2);\n  const rate = 24 * 10 ** cl(k[2], 0, 1), tau = 1.1 * 7 ** cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.accL.fill(0);\n    P.accS.fill(0);\n    P.long = [0, 0, 0];\n    P.total = [0, 0, 0];\n    P.seeds.fill(-1);\n  }\n  P.clock += clock;\n  // With more chords alive than at the opening, the level an LED needs to\n  // light rises with them (to the 0.85th power), so the discs turn from a\n  // few lines into a stipple of each method's own density instead of\n  // filling solid: even in the middle disc, heavy at the rim in the top one,\n  // hollow in the bottom one.\n  P.scale = max(1, (rate * tau) / OPEN) ** 0.85;\n  P.cap = 2.5 * P.scale;\n  const fade = exp(-clock / tau), aL = P.accL, aS = P.accS;\n  for (let i = 0; i \u003c N; i++) {\n    aL[i] *= fade;\n    aS[i] *= fade;\n  }\n  P.carry += rate * clock;\n  const n = floor(P.carry);\n  P.carry -= n;\n  for (let j = 0; j \u003c n; j++) for (let m = 0; m \u003c 3; m++) lay(P, m);\n}\n\nfunction glyph(display, ch, x0, y0, sc, c) {\n  const bits = FONT[ch];\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((bits >> (14 - r * 3 - q)) & 1)\n        for (let u = 0; u \u003c sc; u++) for (let v = 0; v \u003c sc; v++) display.setPixel(x0 + q * sc + u, y0 + r * sc + v, c[0], c[1], c[2]);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  // Magenta for the long chords, green for the short: at full saturation\n  // the pair sits as far apart as two colours can on the panel's red-green\n  // and yellow-blue axes, and neither opens on red.\n  const cL = hsv(P.hue + 5 / 6, 1, 1), cS = hsv(P.hue + 1 / 3, 1, 1);\n  const { accL, accS, thr, frame } = P, sc = P.scale;\n  for (let i = 0; i \u003c N; i++) {\n    const a = accL[i], b = accS[i], t = a + b, x = i % W, y = (i / W) | 0;\n    if (t > thr[i] * sc) {\n      // A lit LED is at full brightness: the fade shows as crumbling.\n      const c = a >= b ? cL : cS;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    } else if (frame[i]) display.setPixel(x, y, 24, 24, 24);\n    else display.setPixel(x, y, 0, 0, 0);\n  }\n  for (let j = 0; j \u003c P.seeds.length; j++) {\n    const i = P.seeds[j];\n    if (i >= 0 && P.clock - P.born[j] \u003c SEED_LIFE) display.setPixel(i % W, (i / W) | 0, 255, 255, 255);\n  }\n  for (let d = 0; d \u003c 3; d++) {\n    const D = DISCS[d], yb = round(D.cy + R) - 1, top = yb - BAR + 1;\n    const bx = D.side > 0 ? 43 : 18, tx = D.side > 0 ? 49 : 1;\n    const tot = P.total[d], f = tot ? P.long[d] / tot : 0, hgt = round(f * BAR);\n    // The bar: the share of long chords so far, out of 40 rows.\n    for (let j = 0; j \u003c hgt; j++) for (let q = 0; q \u003c 3; q++) display.setPixel(bx + q, yb - j, cL[0], cL[1], cL[2]);\n    // The answer this method gives, as a white tick and its fraction.\n    const ty = yb - round((D.num / D.den) * BAR);\n    for (let q = -1; q \u003c= 3; q++) display.setPixel(bx + q, ty, 255, 255, 255);\n    const lx = D.side > 0 ? tx : tx + 3;\n    glyph(display, D.num, lx, ty - 2, 1, cS);\n    glyph(display, \"/\", lx + 4, ty - 2, 1, cS);\n    glyph(display, D.den, lx + 8, ty - 2, 1, cS);\n    // The running share in percent, two digits, in the long colour.\n    const pct = min(99, round(f * 100));\n    const s = tot ? [floor(pct / 10), pct % 10] : [\"-\", \"-\"];\n    glyph(display, s[0], tx, top + 1, 2, cL);\n    glyph(display, s[1], tx + 8, top + 1, 2, cL);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap."},{"name":"Speed","min":0.2,"max":3,"about":"The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep."},{"name":"Chords","min":0,"max":1,"about":"How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross."},{"name":"Persist","min":0,"max":1,"about":"How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple."}],"start":[0,2,0,0.06],"measures":{"motion":0.3006,"detail":0.2269,"edges":0.8503,"complexity":0.2324,"coverage":0.2638,"colour":0.5757,"drift":0.0802},"knobResponse":[0.24,0.1255,0.1353,0.0538]},{"slug":"bi-phase","title":"Bi-Phase","family":"cosmetic","round":30,"note":"흔들어 섞은 이중층 클렌저가 패널 가득 기름 방울로 흩어졌다가, 방울끼리 합쳐 떠올라 위에 한 층으로 모이고 경계선이 맑게 서요. 그러고 나면 다시 흔들려요.","idea":"The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.","buttons":"K1 tap shakes the bottle now.","code":"// ===== Patternflow pattern =====\n// Title:   Bi-Phase\n// Family:  cosmetic\n// Idea:    The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after two-phase cleansers and phase-field separation of two liquids (Cahn-Hilliard, John W. Cahn and John E. Hilliard, 1958; Allen-Cahn, Samuel M. Allen and John W. Cahn, 1979)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1\n//\n// Knob 1: Hue. Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose.\n// Knob 2: Speed. How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long.\n// Knob 3: Oil. The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down.\n// Knob 4: Shake. How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles.\n// Buttons: K1 tap shakes the bottle now.\n\nconst W = 64, H = 128, N = W * H;\n// The flow is solved on a coarse grid of 4x4 LED cells.\nconst CW = 16, CH = 32, CN = CW * CH;\nconst { min, max, floor, sqrt, sin, cos, exp, log, tanh, abs, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// Allen-Cahn: phi_t = M (K lap phi + phi - phi^3) + lambda, phi = +1 oil and\n// -1 water, lambda the multiplier that holds the amount of oil to K3. The\n// interface is tanh(d / sqrt(2K)) across, about 2 LEDs, and moves at M K\n// times its curvature. h M (8K + 2) \u003c 2 keeps the step stable: 4 a frame at\n// Speed 2.\nconst KAP = 0.5, MOB = 1.5, HMAX = 0.21;\n// Gravity in the free energy, on the interfaces only: a rim higher up gains\n// oil from one lower down in the same patch.\nconst GRAV = 2.5;\n// Time units a second at Speed 1; a shake lasts TS of them, 1.1 s at Speed 2.\nconst RATE = 12, TS = 26;\n// The push of the oil, and the screening of the flat bottle's walls.\nconst BUOY = 0.5, AL2 = 0.16;\n// Drops under AMAX LEDs move as one piece; ROUND and DRIFT below.\nconst AMAX = 700, ROUND = 0.06, DRIFT = 0.08;\n\n// Sine transforms of the coarse grid (DST-II forward, DST-III back), and the\n// screened Stokes operator (lap - a^2)^2 psi = d(f_y)/dx of a flat cell,\n// diagonal in that basis, with free-slip walls.\nconst SX = new Float32Array(CW * CW), SY = new Float32Array(CH * CH), KI = new Float32Array(CN);\nfor (let m = 0; m \u003c CW; m++) for (let i = 0; i \u003c CW; i++) SX[m * CW + i] = sin((PI * (m + 1) * (i + 0.5)) / CW);\nfor (let n = 0; n \u003c CH; n++) for (let j = 0; j \u003c CH; j++) SY[n * CH + j] = sin((PI * (n + 1) * (j + 0.5)) / CH);\nfor (let n = 0; n \u003c CH; n++)\n  for (let m = 0; m \u003c CW; m++) {\n    const kx = 4 * sin((PI * (m + 1)) / (2 * CW)) ** 2, ky = 4 * sin((PI * (n + 1)) / (2 * CH)) ** 2;\n    KI[n * CW + m] = ((m === CW - 1 ? 1 : 2) * (n === CH - 1 ? 1 : 2)) / (CN * (kx + ky + AL2) ** 2);\n  }\n\nfunction hsv(h, s, v, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  (o[0] = c[0]), (o[1] = c[1]), (o[2] = c[2]);\n}\n\nexport function setup(params) {\n  params.s = null;\n}\n\nfunction init(k) {\n  const f = () => new Float32Array(N), g = () => new Float32Array(CN);\n  const P = {\n    phi: f(), nxt: f(), S: f(), tmp: f(), blur: f(), u: f(), v: f(), b1: f(), b2: f(),\n    lab: new Int32Array(N), stk: new Int32Array(N), cu: f(), cv: f(), ca: f(), px: f(), py: f(), rad: f(),\n    F: g(), A: g(), G: g(), psi: g(), U: g(), V: g(),\n    hue: k[0], speed: 2, oil: cl(k[2], 0.3, 0.6), shake: cl(k[3], 0, 1),\n    mT: 0, c: 0.85 * TS, time: 0, rt: 0, deep: [0, 0, 0], pale: [0, 0, 0],\n  };\n  // Open at the end of a shake, the new drops just formed.\n  P.mT = 2 * P.oil - 1;\n  shake(P);\n  P.phi.set(P.S);\n  for (let s = 0; s \u003c 8; s++) relax(P, HMAX);\n  return P;\n}\n\n// A shake's emulsion: round drops of the lesser liquid dropped at random until\n// they make up its share, radius 2.2 to 5 LEDs after a gentle shake and 1.5\n// to 2.4 after a hard one, small ones the most common. Most land a LED clear\n// of the others; one in twenty may touch.\nfunction shake(P) {\n  const S = P.S, inv = P.mT > 0, f = inv ? (1 - P.mT) / 2 : (1 + P.mT) / 2;\n  const r0 = 2.2 - 0.7 * P.shake, r1 = 5 - 2.6 * P.shake;\n  S.fill(-1);\n  let area = 0;\n  for (let k = 0; k \u003c 5000 && area \u003c f * N; k++) {\n    const r = r0 * (r1 / r0) ** (random() ** 1.6), cx = random() * W, cy = random() * H;\n    const xa = max(0, floor(cx - r - 2)), xb = min(W - 1, floor(cx + r + 2)), ya = max(0, floor(cy - r - 2)), yb = min(H - 1, floor(cy + r + 2));\n    if (k \u003c 4500 && random() \u003c 0.95) {\n      let hit = false;\n      const rr = (r + 1.2) * (r + 1.2);\n      for (let y = ya; y \u003c= yb && !hit; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const ex = x + 0.5 - cx, ey = y + 0.5 - cy;\n          if (ex * ex + ey * ey \u003c rr && S[y * W + x] > -0.9) hit = true;\n        }\n      if (hit) continue;\n    }\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const ex = x + 0.5 - cx, ey = y + 0.5 - cy, i = y * W + x, v = tanh((r - sqrt(ex * ex + ey * ey)) / 0.8);\n        if (v > S[i]) (area += (v - S[i]) / 2), (S[i] = v);\n      }\n  }\n  if (inv) for (let i = 0; i \u003c N; i++) S[i] = -S[i];\n}\n\n// Box blur of radius r, along x and then y, by running sums.\nfunction box(src, dst, tmp, r) {\n  const n = 2 * r + 1;\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = src[o] * (r + 1);\n    for (let x = 1; x \u003c= r; x++) s += src[o + x];\n    for (let x = 0; x \u003c W; x++) (tmp[o + x] = s / n), (s += src[o + min(x + r + 1, W - 1)] - src[o + max(x - r, 0)]);\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = tmp[x] * (r + 1);\n    for (let y = 1; y \u003c= r; y++) s += tmp[y * W + x];\n    for (let y = 0; y \u003c H; y++) (dst[y * W + x] = s / n), (s += tmp[min(y + r + 1, H - 1) * W + x] - tmp[max(y - r, 0) * W + x]);\n  }\n}\n\n// One Allen-Cahn step. The multiplier acts on the interfaces only, weighted\n// by g = (1 - phi^2)^2, and is worked out over each 11x11 patch rather than\n// the whole panel, so what a drop's rim loses to its curvature comes back on\n// the same rim: a drop pulls round without shrinking, oil cannot go into\n// solution in the water, and a drop only feeds a neighbour it nearly touches,\n// as with Cahn-Hilliard. What the patches miss goes back over all the rims.\nfunction relax(P, h) {\n  const phi = P.phi, r = P.nxt, g = P.b1, rb = P.b2, gb = P.blur, a = h * MOB;\n  for (let y = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0, gr = (GRAV * (H - 2 * y)) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], q = 1 - p * p, w = q * q;\n      const lap = phi[x > 0 ? i - 1 : i] + phi[x \u003c W - 1 ? i + 1 : i] + phi[i + up] + phi[i + dn] - 4 * p;\n      r[i] = a * (KAP * lap + p - p * p * p + gr * w);\n      g[i] = w;\n    }\n  }\n  box(r, rb, P.tmp, 5);\n  box(g, gb, P.tmp, 5);\n  let sum = 0, gs = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const q = (phi[i] += r[i] - (g[i] * rb[i]) / (gb[i] + 1e-9));\n    sum += q;\n    gs += g[i];\n  }\n  const d = (P.mT * N - sum) / (gs + 1e-6);\n  for (let i = 0; i \u003c N; i++) phi[i] += d * g[i];\n}\n\n// The flow. Oil is lighter, so each coarse cell pushes up by how much oil it\n// holds; screened Stokes flow carries the drops, big ones faster, and water\n// comes down round them. A shake adds a swirl of the two lowest modes.\nfunction flow(P, swirl, phase) {\n  const { phi, F, A, G, psi, U, V } = P;\n  F.fill(0);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[(y >> 2) * CW + (x >> 2)] += phi[y * W + x];\n  // The curl of the push, -B dF/dx, then along x, along y, scaled, and back.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) G[j * CW + i] = (-BUOY / 32) * (F[j * CW + min(i + 1, CW - 1)] - F[j * CW + max(i - 1, 0)]);\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let i = 0; i \u003c CW; i++) s += G[j * CW + i] * SX[m * CW + i];\n      A[j * CW + m] = s;\n    }\n  for (let n = 0; n \u003c CH; n++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let j = 0; j \u003c CH; j++) s += A[j * CW + m] * SY[n * CH + j];\n      G[n * CW + m] = s * KI[n * CW + m];\n    }\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let n = 0; n \u003c CH; n++) s += G[n * CW + m] * SY[n * CH + j];\n      A[j * CW + m] = s;\n    }\n  const c1 = cos(phase), s1 = sin(phase);\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      let s = 0;\n      for (let m = 0; m \u003c CW; m++) s += A[j * CW + m] * SX[m * CW + i];\n      const X = (PI * (i + 0.5)) / CW, Y = (PI * (j + 0.5)) / CH;\n      psi[j * CW + i] = s + swirl * (sin(X) * sin(2 * Y) * c1 + 0.8 * sin(2 * X) * sin(Y) * s1);\n    }\n  // u = dpsi/dy, v = -dpsi/dx, in LEDs per time unit; psi is 0 past the walls.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      const k = j * CW + i, p = psi[k];\n      U[k] = 2 * ((j \u003c CH - 1 ? psi[k + CW] : -p) - (j > 0 ? psi[k - CW] : -p));\n      V[k] = -2 * ((i \u003c CW - 1 ? psi[k + 1] : -p) - (i > 0 ? psi[k - 1] : -p));\n    }\n}\n\n// The flow at every LED. A drop of either liquid under AMAX LEDs moves as one\n// piece at the mean of the flow over it, as surface tension holds a small\n// drop together, and so do the two rings of LEDs round it, which it is about\n// to take the place of. On top of that each drop is drawn towards the circle\n// of its own area: every LED of it moves along the radius at ROUND times its\n// distance from that circle, which curvature alone would take seconds over\n// for a big drop. A drop on a side wall slides up it and is drawn to a half\n// circle standing on the wall. Every drop rises, or sinks if it is water, at\n// least DRIFT LEDs a time unit faster than the coarse flow says, so the last\n// small ones still get there. The layers and the liquid between the drops\n// follow the flow smoothed over 5 LEDs; during a shake the swirl takes over.\nfunction velocity(P, rigid) {\n  const { U, V, u, v, b1, b2, phi, lab, stk, cu, cv, ca, px, py, rad } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const gy = cl((y - 1.5) / 4, 0, CH - 1), j0 = gy | 0, fy = gy - j0, a = j0 * CW, b = min(j0 + 1, CH - 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const gx = cl((x - 1.5) / 4, 0, CW - 1), i0 = gx | 0, i1 = min(i0 + 1, CW - 1), fx = gx - i0, i = y * W + x;\n      u[i] = (U[a + i0] * (1 - fx) + U[a + i1] * fx) * (1 - fy) + (U[b + i0] * (1 - fx) + U[b + i1] * fx) * fy;\n      v[i] = (V[a + i0] * (1 - fx) + V[a + i1] * fx) * (1 - fy) + (V[b + i0] * (1 - fx) + V[b + i1] * fx) * fy;\n    }\n  }\n  box(u, b1, P.tmp, 2);\n  box(v, b2, P.tmp, 2);\n  if (rigid \u003c= 0) return u.set(b1), v.set(b2);\n  // Label the pieces of each liquid, 4-connected.\n  lab.fill(-1);\n  let nc = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (lab[s] >= 0) continue;\n    const ph = phi[s] > 0;\n    let top = 0, area = 0, su = 0, sv = 0, mx = 0, my = 0, wall = false;\n    stk[top++] = s;\n    lab[s] = nc;\n    while (top > 0) {\n      const i = stk[--top], x = i % W;\n      area++;\n      if (x === 0 || x === W - 1) wall = true;\n      (su += u[i]), (sv += v[i]), (mx += x), (my += (i - x) / W);\n      if (x > 0 && lab[i - 1] \u003c 0 && phi[i - 1] > 0 === ph) (lab[i - 1] = nc), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0 && phi[i + 1] > 0 === ph) (lab[i + 1] = nc), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0 && phi[i - W] > 0 === ph) (lab[i - W] = nc), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0 && phi[i + W] > 0 === ph) (lab[i + W] = nc), (stk[top++] = i + W);\n    }\n    (ca[nc] = area), (cu[nc] = wall ? 0 : su / area), (cv[nc] = sv / area + (ph ? -DRIFT : DRIFT));\n    (px[nc] = wall ? (mx / area \u003c W / 2 ? -0.5 : W - 0.5) : mx / area), (py[nc] = my / area);\n    rad[nc] = sqrt(((wall ? 2 : 1) * area) / PI);\n    nc++;\n  }\n  const put = (i, k) => {\n    const dx = (i % W) - px[k], dy = ((i / W) | 0) - py[k], w = ROUND * (rad[k] / (sqrt(dx * dx + dy * dy) + 0.5) - 1);\n    (u[i] = cu[k] + w * dx), (v[i] = cv[k] + w * dy), (lab[i] = k);\n  };\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    if (ca[lab[i]] \u003c AMAX) put(i, lab[i]), (stk[top++] = i);\n    else (u[i] = b1[i]), (v[i] = b2[i]), (lab[i] = -1);\n  }\n  // Two rings round each drop, nearest drop first.\n  for (let ring = 0, from = 0; ring \u003c 2; ring++) {\n    const end = top;\n    for (let t = from; t \u003c end; t++) {\n      const i = stk[t], x = i % W, k = lab[i];\n      if (x > 0 && lab[i - 1] \u003c 0) put(i - 1, k), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0) put(i + 1, k), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0) put(i - W, k), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0) put(i + W, k), (stk[top++] = i + W);\n    }\n    from = end;\n  }\n  if (rigid \u003c 1) for (let i = 0; i \u003c N; i++) (u[i] = b1[i] + (u[i] - b1[i]) * rigid), (v[i] = b2[i] + (v[i] - b2[i]) * rigid);\n}\n\n// Semi-Lagrangian advection of a field over T time units, from src into dst.\n// Past the top the bottle holds oil (top) and past the bottom water (bot), so\n// a drop leaving the floor does not draw a streak of itself up behind it.\nfunction advect(P, src, dst, T, top, bot) {\n  const { u, v } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, sx = cl(x - u[i] * T, 0, W - 1), sy = y - v[i] * T;\n      const x0 = sx | 0, x1 = min(x0 + 1, W - 1), ex = sx - x0, y0 = floor(sy), ey = sy - y0;\n      const a = y0 \u003c 0 ? top : y0 > H - 1 ? bot : src[y0 * W + x0] * (1 - ex) + src[y0 * W + x1] * ex;\n      const b = y0 \u003c -1 ? top : y0 > H - 2 ? bot : src[(y0 + 1) * W + x0] * (1 - ex) + src[(y0 + 1) * W + x1] * ex;\n      dst[i] = a * (1 - ey) + b * ey;\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.3, 0.06];\n  if (!params.s) params.s = init(k);\n  const P = params.s, d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.oil = cl(k[2], 0.3, 0.6);\n  P.shake = cl(k[3], 0, 1);\n  // The amount of oil follows K3 at a fifth of the bottle a second, so the\n  // layer grows or thins instead of the water clouding over.\n  P.mT += cl(2 * P.oil - 1 - P.mT, -0.4 * d, 0.4 * d);\n  const T = d * P.speed * RATE;\n  P.rt += d;\n  P.time += T;\n  P.c += T;\n  // A shake every 560 time units (23 s at Speed 2) at K4 0, down to 120 at 1.\n  if ((input.btnPressed && input.btnPressed[0] && P.c > TS) || P.c > 560 - 440 * sqrt(P.shake)) (P.c = 0), shake(P);\n  // The swirl winds the liquid round for the first two thirds of a shake, and\n  // as it dies the liquid breaks up into the new drops.\n  const shaking = P.c \u003c TS, u = P.c / TS, e = shaking ? sin(PI * min(1, u / 0.65)) ** 2 : 0;\n  flow(P, 10 * e, P.time * 0.3);\n  velocity(P, 1 - e);\n  // phi is carried as atanh(phi), which runs nearly straight through an\n  // interface, so the linear interpolation does not smear the drops' edges.\n  const phi = P.phi, q = P.nxt;\n  for (let i = 0; i \u003c N; i++) {\n    const p = cl(phi[i], -0.99999, 0.99999);\n    q[i] = 0.5 * log((1 + p) / (1 - p));\n  }\n  advect(P, q, phi, T, 6, -6);\n  for (let i = 0; i \u003c N; i++) phi[i] = 1 - 2 / (exp(2 * phi[i]) + 1);\n  if (shaking) {\n    const w = 1 - exp(-0.5 * sm(0.4, 0.8, u) * T), S = P.S;\n    for (let i = 0; i \u003c N; i++) phi[i] += w * (S[i] - phi[i]);\n  }\n  const steps = Math.ceil(T / HMAX - 1e-6);\n  for (let s = 0; s \u003c steps; s++) relax(P, T / steps);\n  // A drop shrunk to one LED inside the other liquid cannot go anywhere under\n  // the local multiplier and would stay as a dimple: fill it in.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i];\n      if (p > 0.97 || p \u003c -0.97) continue;\n      const a = phi[x > 0 ? i - 1 : i + 1], b = phi[x \u003c W - 1 ? i + 1 : i - 1], c = phi[y > 0 ? i - W : i + W], e = phi[y \u003c H - 1 ? i + W : i - W];\n      const lo = min(a, b, c, e), hi = max(a, b, c, e);\n      if ((lo > 0.5 && p \u003c lo - 0.1) || (hi \u003c -0.5 && p > hi + 0.1)) phi[i] = (a + b + c + e) / 4;\n    }\n}\n\n// Light from the upper left and in front, and the half vector for the glint.\nconst LX = -0.42, LY = -0.56, LZ = 0.71, HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const phi = P.phi, bl = P.blur, deep = P.deep, pale = P.pale;\n  // phi blurred over 5x5 is read as the height of the oil: a drop is a dome\n  // and the layer a plateau, lit from the upper left.\n  box(phi, bl, P.tmp, 2);\n  hsv(P.hue + 0.07, 0.62, 1, deep);\n  hsv(P.hue + 0.07, 0.26, 1, pale);\n  // A soft band of shop light drifts across the glass every 14 s.\n  const band = W / 2 + 46 * sin((2 * PI * P.rt) / 14);\n  for (let y = 0; y \u003c H; y++) {\n    const shop = 0.86 + 0.14 * (1 - y / H);\n    // Water: a pale cool white, a shade bluer low down.\n    const wr = 0.76 - 0.06 * (y / H), wg = 0.82 - 0.03 * (y / H), wb = 0.93;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], o = sm(-0.6, 0.6, p);\n      const gx = phi[x \u003c W - 1 ? i + 1 : i] - phi[x > 0 ? i - 1 : i], gy = phi[y \u003c H - 1 ? i + W : i] - phi[y > 0 ? i - W : i];\n      const nx = -2.4 * (bl[x \u003c W - 1 ? i + 1 : i] - bl[x > 0 ? i - 1 : i]), ny = -2.4 * (bl[y \u003c H - 1 ? i + W : i] - bl[y > 0 ? i - W : i]);\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1), c1 = max(0, (nx * HX + ny * HY + HZ) * nn), c4 = c1 * c1 * c1 * c1, c16 = c4 * c4 * c4 * c4;\n      // Oil: pale at a drop's rim and deep in its middle and in the layer,\n      // shaded as a dome, never below 80% so it does not go brown.\n      const dpt = sm(-0.2, 0.9, bl[i]), sh = max(0.8, 1 + 0.6 * ((nx * LX + ny * LY + LZ) * nn - LZ));\n      const r = wr + ((pale[0] + (deep[0] - pale[0]) * dpt) * sh - wr) * o;\n      const g = wg + ((pale[1] + (deep[1] - pale[1]) * dpt) * sh - wg) * o;\n      const b = wb + ((pale[2] + (deep[2] - pale[2]) * dpt) * sh - wb) * o;\n      // The rim catches the light from above, a dome its glint, and a long\n      // flat interface, the meniscus, shows as a bright line.\n      const q = 1 - p * p, rim = q * q, lit = cl(gy * 0.6 + gx * 0.25, 0, 1), flat = (gy * gy) / (gx * gx + gy * gy + 1e-6);\n      const men = rim * flat * flat * sm(0.45, 0.75, abs(ny / 2.4));\n      const bx = (x - band + 0.4 * (y - H / 2)) / 11, sheen = bx * bx \u003c 9 ? exp(-bx * bx) * (0.05 + 0.1 * o) : 0;\n      const hl = cl(0.1 * rim + 0.45 * rim * lit + 0.7 * c16 * c16 * o + 0.8 * men + sheen, 0, 1);\n      display.setPixel(x, y, (r + (1 - r) * hl) * shop * 255, (g + (1 - g) * hl) * shop * 255, (b + (1 - b) * hl) * shop * 255);\n    }\n  }\n}\n","layer":{"id":"layer-bi-phase","type":"code","name":"bi-phase","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bi-Phase\n// Family:  cosmetic\n// Idea:    The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after two-phase cleansers and phase-field separation of two liquids (Cahn-Hilliard, John W. Cahn and John E. Hilliard, 1958; Allen-Cahn, Samuel M. Allen and John W. Cahn, 1979)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1\n//\n// Knob 1: Hue. Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose.\n// Knob 2: Speed. How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long.\n// Knob 3: Oil. The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down.\n// Knob 4: Shake. How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles.\n// Buttons: K1 tap shakes the bottle now.\n\nconst W = 64, H = 128, N = W * H;\n// The flow is solved on a coarse grid of 4x4 LED cells.\nconst CW = 16, CH = 32, CN = CW * CH;\nconst { min, max, floor, sqrt, sin, cos, exp, log, tanh, abs, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// Allen-Cahn: phi_t = M (K lap phi + phi - phi^3) + lambda, phi = +1 oil and\n// -1 water, lambda the multiplier that holds the amount of oil to K3. The\n// interface is tanh(d / sqrt(2K)) across, about 2 LEDs, and moves at M K\n// times its curvature. h M (8K + 2) \u003c 2 keeps the step stable: 4 a frame at\n// Speed 2.\nconst KAP = 0.5, MOB = 1.5, HMAX = 0.21;\n// Gravity in the free energy, on the interfaces only: a rim higher up gains\n// oil from one lower down in the same patch.\nconst GRAV = 2.5;\n// Time units a second at Speed 1; a shake lasts TS of them, 1.1 s at Speed 2.\nconst RATE = 12, TS = 26;\n// The push of the oil, and the screening of the flat bottle's walls.\nconst BUOY = 0.5, AL2 = 0.16;\n// Drops under AMAX LEDs move as one piece; ROUND and DRIFT below.\nconst AMAX = 700, ROUND = 0.06, DRIFT = 0.08;\n\n// Sine transforms of the coarse grid (DST-II forward, DST-III back), and the\n// screened Stokes operator (lap - a^2)^2 psi = d(f_y)/dx of a flat cell,\n// diagonal in that basis, with free-slip walls.\nconst SX = new Float32Array(CW * CW), SY = new Float32Array(CH * CH), KI = new Float32Array(CN);\nfor (let m = 0; m \u003c CW; m++) for (let i = 0; i \u003c CW; i++) SX[m * CW + i] = sin((PI * (m + 1) * (i + 0.5)) / CW);\nfor (let n = 0; n \u003c CH; n++) for (let j = 0; j \u003c CH; j++) SY[n * CH + j] = sin((PI * (n + 1) * (j + 0.5)) / CH);\nfor (let n = 0; n \u003c CH; n++)\n  for (let m = 0; m \u003c CW; m++) {\n    const kx = 4 * sin((PI * (m + 1)) / (2 * CW)) ** 2, ky = 4 * sin((PI * (n + 1)) / (2 * CH)) ** 2;\n    KI[n * CW + m] = ((m === CW - 1 ? 1 : 2) * (n === CH - 1 ? 1 : 2)) / (CN * (kx + ky + AL2) ** 2);\n  }\n\nfunction hsv(h, s, v, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  (o[0] = c[0]), (o[1] = c[1]), (o[2] = c[2]);\n}\n\nexport function setup(params) {\n  params.s = null;\n}\n\nfunction init(k) {\n  const f = () => new Float32Array(N), g = () => new Float32Array(CN);\n  const P = {\n    phi: f(), nxt: f(), S: f(), tmp: f(), blur: f(), u: f(), v: f(), b1: f(), b2: f(),\n    lab: new Int32Array(N), stk: new Int32Array(N), cu: f(), cv: f(), ca: f(), px: f(), py: f(), rad: f(),\n    F: g(), A: g(), G: g(), psi: g(), U: g(), V: g(),\n    hue: k[0], speed: 2, oil: cl(k[2], 0.3, 0.6), shake: cl(k[3], 0, 1),\n    mT: 0, c: 0.85 * TS, time: 0, rt: 0, deep: [0, 0, 0], pale: [0, 0, 0],\n  };\n  // Open at the end of a shake, the new drops just formed.\n  P.mT = 2 * P.oil - 1;\n  shake(P);\n  P.phi.set(P.S);\n  for (let s = 0; s \u003c 8; s++) relax(P, HMAX);\n  return P;\n}\n\n// A shake's emulsion: round drops of the lesser liquid dropped at random until\n// they make up its share, radius 2.2 to 5 LEDs after a gentle shake and 1.5\n// to 2.4 after a hard one, small ones the most common. Most land a LED clear\n// of the others; one in twenty may touch.\nfunction shake(P) {\n  const S = P.S, inv = P.mT > 0, f = inv ? (1 - P.mT) / 2 : (1 + P.mT) / 2;\n  const r0 = 2.2 - 0.7 * P.shake, r1 = 5 - 2.6 * P.shake;\n  S.fill(-1);\n  let area = 0;\n  for (let k = 0; k \u003c 5000 && area \u003c f * N; k++) {\n    const r = r0 * (r1 / r0) ** (random() ** 1.6), cx = random() * W, cy = random() * H;\n    const xa = max(0, floor(cx - r - 2)), xb = min(W - 1, floor(cx + r + 2)), ya = max(0, floor(cy - r - 2)), yb = min(H - 1, floor(cy + r + 2));\n    if (k \u003c 4500 && random() \u003c 0.95) {\n      let hit = false;\n      const rr = (r + 1.2) * (r + 1.2);\n      for (let y = ya; y \u003c= yb && !hit; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const ex = x + 0.5 - cx, ey = y + 0.5 - cy;\n          if (ex * ex + ey * ey \u003c rr && S[y * W + x] > -0.9) hit = true;\n        }\n      if (hit) continue;\n    }\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const ex = x + 0.5 - cx, ey = y + 0.5 - cy, i = y * W + x, v = tanh((r - sqrt(ex * ex + ey * ey)) / 0.8);\n        if (v > S[i]) (area += (v - S[i]) / 2), (S[i] = v);\n      }\n  }\n  if (inv) for (let i = 0; i \u003c N; i++) S[i] = -S[i];\n}\n\n// Box blur of radius r, along x and then y, by running sums.\nfunction box(src, dst, tmp, r) {\n  const n = 2 * r + 1;\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = src[o] * (r + 1);\n    for (let x = 1; x \u003c= r; x++) s += src[o + x];\n    for (let x = 0; x \u003c W; x++) (tmp[o + x] = s / n), (s += src[o + min(x + r + 1, W - 1)] - src[o + max(x - r, 0)]);\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = tmp[x] * (r + 1);\n    for (let y = 1; y \u003c= r; y++) s += tmp[y * W + x];\n    for (let y = 0; y \u003c H; y++) (dst[y * W + x] = s / n), (s += tmp[min(y + r + 1, H - 1) * W + x] - tmp[max(y - r, 0) * W + x]);\n  }\n}\n\n// One Allen-Cahn step. The multiplier acts on the interfaces only, weighted\n// by g = (1 - phi^2)^2, and is worked out over each 11x11 patch rather than\n// the whole panel, so what a drop's rim loses to its curvature comes back on\n// the same rim: a drop pulls round without shrinking, oil cannot go into\n// solution in the water, and a drop only feeds a neighbour it nearly touches,\n// as with Cahn-Hilliard. What the patches miss goes back over all the rims.\nfunction relax(P, h) {\n  const phi = P.phi, r = P.nxt, g = P.b1, rb = P.b2, gb = P.blur, a = h * MOB;\n  for (let y = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0, gr = (GRAV * (H - 2 * y)) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], q = 1 - p * p, w = q * q;\n      const lap = phi[x > 0 ? i - 1 : i] + phi[x \u003c W - 1 ? i + 1 : i] + phi[i + up] + phi[i + dn] - 4 * p;\n      r[i] = a * (KAP * lap + p - p * p * p + gr * w);\n      g[i] = w;\n    }\n  }\n  box(r, rb, P.tmp, 5);\n  box(g, gb, P.tmp, 5);\n  let sum = 0, gs = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const q = (phi[i] += r[i] - (g[i] * rb[i]) / (gb[i] + 1e-9));\n    sum += q;\n    gs += g[i];\n  }\n  const d = (P.mT * N - sum) / (gs + 1e-6);\n  for (let i = 0; i \u003c N; i++) phi[i] += d * g[i];\n}\n\n// The flow. Oil is lighter, so each coarse cell pushes up by how much oil it\n// holds; screened Stokes flow carries the drops, big ones faster, and water\n// comes down round them. A shake adds a swirl of the two lowest modes.\nfunction flow(P, swirl, phase) {\n  const { phi, F, A, G, psi, U, V } = P;\n  F.fill(0);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[(y >> 2) * CW + (x >> 2)] += phi[y * W + x];\n  // The curl of the push, -B dF/dx, then along x, along y, scaled, and back.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) G[j * CW + i] = (-BUOY / 32) * (F[j * CW + min(i + 1, CW - 1)] - F[j * CW + max(i - 1, 0)]);\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let i = 0; i \u003c CW; i++) s += G[j * CW + i] * SX[m * CW + i];\n      A[j * CW + m] = s;\n    }\n  for (let n = 0; n \u003c CH; n++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let j = 0; j \u003c CH; j++) s += A[j * CW + m] * SY[n * CH + j];\n      G[n * CW + m] = s * KI[n * CW + m];\n    }\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let n = 0; n \u003c CH; n++) s += G[n * CW + m] * SY[n * CH + j];\n      A[j * CW + m] = s;\n    }\n  const c1 = cos(phase), s1 = sin(phase);\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      let s = 0;\n      for (let m = 0; m \u003c CW; m++) s += A[j * CW + m] * SX[m * CW + i];\n      const X = (PI * (i + 0.5)) / CW, Y = (PI * (j + 0.5)) / CH;\n      psi[j * CW + i] = s + swirl * (sin(X) * sin(2 * Y) * c1 + 0.8 * sin(2 * X) * sin(Y) * s1);\n    }\n  // u = dpsi/dy, v = -dpsi/dx, in LEDs per time unit; psi is 0 past the walls.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      const k = j * CW + i, p = psi[k];\n      U[k] = 2 * ((j \u003c CH - 1 ? psi[k + CW] : -p) - (j > 0 ? psi[k - CW] : -p));\n      V[k] = -2 * ((i \u003c CW - 1 ? psi[k + 1] : -p) - (i > 0 ? psi[k - 1] : -p));\n    }\n}\n\n// The flow at every LED. A drop of either liquid under AMAX LEDs moves as one\n// piece at the mean of the flow over it, as surface tension holds a small\n// drop together, and so do the two rings of LEDs round it, which it is about\n// to take the place of. On top of that each drop is drawn towards the circle\n// of its own area: every LED of it moves along the radius at ROUND times its\n// distance from that circle, which curvature alone would take seconds over\n// for a big drop. A drop on a side wall slides up it and is drawn to a half\n// circle standing on the wall. Every drop rises, or sinks if it is water, at\n// least DRIFT LEDs a time unit faster than the coarse flow says, so the last\n// small ones still get there. The layers and the liquid between the drops\n// follow the flow smoothed over 5 LEDs; during a shake the swirl takes over.\nfunction velocity(P, rigid) {\n  const { U, V, u, v, b1, b2, phi, lab, stk, cu, cv, ca, px, py, rad } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const gy = cl((y - 1.5) / 4, 0, CH - 1), j0 = gy | 0, fy = gy - j0, a = j0 * CW, b = min(j0 + 1, CH - 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const gx = cl((x - 1.5) / 4, 0, CW - 1), i0 = gx | 0, i1 = min(i0 + 1, CW - 1), fx = gx - i0, i = y * W + x;\n      u[i] = (U[a + i0] * (1 - fx) + U[a + i1] * fx) * (1 - fy) + (U[b + i0] * (1 - fx) + U[b + i1] * fx) * fy;\n      v[i] = (V[a + i0] * (1 - fx) + V[a + i1] * fx) * (1 - fy) + (V[b + i0] * (1 - fx) + V[b + i1] * fx) * fy;\n    }\n  }\n  box(u, b1, P.tmp, 2);\n  box(v, b2, P.tmp, 2);\n  if (rigid \u003c= 0) return u.set(b1), v.set(b2);\n  // Label the pieces of each liquid, 4-connected.\n  lab.fill(-1);\n  let nc = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (lab[s] >= 0) continue;\n    const ph = phi[s] > 0;\n    let top = 0, area = 0, su = 0, sv = 0, mx = 0, my = 0, wall = false;\n    stk[top++] = s;\n    lab[s] = nc;\n    while (top > 0) {\n      const i = stk[--top], x = i % W;\n      area++;\n      if (x === 0 || x === W - 1) wall = true;\n      (su += u[i]), (sv += v[i]), (mx += x), (my += (i - x) / W);\n      if (x > 0 && lab[i - 1] \u003c 0 && phi[i - 1] > 0 === ph) (lab[i - 1] = nc), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0 && phi[i + 1] > 0 === ph) (lab[i + 1] = nc), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0 && phi[i - W] > 0 === ph) (lab[i - W] = nc), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0 && phi[i + W] > 0 === ph) (lab[i + W] = nc), (stk[top++] = i + W);\n    }\n    (ca[nc] = area), (cu[nc] = wall ? 0 : su / area), (cv[nc] = sv / area + (ph ? -DRIFT : DRIFT));\n    (px[nc] = wall ? (mx / area \u003c W / 2 ? -0.5 : W - 0.5) : mx / area), (py[nc] = my / area);\n    rad[nc] = sqrt(((wall ? 2 : 1) * area) / PI);\n    nc++;\n  }\n  const put = (i, k) => {\n    const dx = (i % W) - px[k], dy = ((i / W) | 0) - py[k], w = ROUND * (rad[k] / (sqrt(dx * dx + dy * dy) + 0.5) - 1);\n    (u[i] = cu[k] + w * dx), (v[i] = cv[k] + w * dy), (lab[i] = k);\n  };\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    if (ca[lab[i]] \u003c AMAX) put(i, lab[i]), (stk[top++] = i);\n    else (u[i] = b1[i]), (v[i] = b2[i]), (lab[i] = -1);\n  }\n  // Two rings round each drop, nearest drop first.\n  for (let ring = 0, from = 0; ring \u003c 2; ring++) {\n    const end = top;\n    for (let t = from; t \u003c end; t++) {\n      const i = stk[t], x = i % W, k = lab[i];\n      if (x > 0 && lab[i - 1] \u003c 0) put(i - 1, k), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0) put(i + 1, k), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0) put(i - W, k), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0) put(i + W, k), (stk[top++] = i + W);\n    }\n    from = end;\n  }\n  if (rigid \u003c 1) for (let i = 0; i \u003c N; i++) (u[i] = b1[i] + (u[i] - b1[i]) * rigid), (v[i] = b2[i] + (v[i] - b2[i]) * rigid);\n}\n\n// Semi-Lagrangian advection of a field over T time units, from src into dst.\n// Past the top the bottle holds oil (top) and past the bottom water (bot), so\n// a drop leaving the floor does not draw a streak of itself up behind it.\nfunction advect(P, src, dst, T, top, bot) {\n  const { u, v } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, sx = cl(x - u[i] * T, 0, W - 1), sy = y - v[i] * T;\n      const x0 = sx | 0, x1 = min(x0 + 1, W - 1), ex = sx - x0, y0 = floor(sy), ey = sy - y0;\n      const a = y0 \u003c 0 ? top : y0 > H - 1 ? bot : src[y0 * W + x0] * (1 - ex) + src[y0 * W + x1] * ex;\n      const b = y0 \u003c -1 ? top : y0 > H - 2 ? bot : src[(y0 + 1) * W + x0] * (1 - ex) + src[(y0 + 1) * W + x1] * ex;\n      dst[i] = a * (1 - ey) + b * ey;\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.3, 0.06];\n  if (!params.s) params.s = init(k);\n  const P = params.s, d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.oil = cl(k[2], 0.3, 0.6);\n  P.shake = cl(k[3], 0, 1);\n  // The amount of oil follows K3 at a fifth of the bottle a second, so the\n  // layer grows or thins instead of the water clouding over.\n  P.mT += cl(2 * P.oil - 1 - P.mT, -0.4 * d, 0.4 * d);\n  const T = d * P.speed * RATE;\n  P.rt += d;\n  P.time += T;\n  P.c += T;\n  // A shake every 560 time units (23 s at Speed 2) at K4 0, down to 120 at 1.\n  if ((input.btnPressed && input.btnPressed[0] && P.c > TS) || P.c > 560 - 440 * sqrt(P.shake)) (P.c = 0), shake(P);\n  // The swirl winds the liquid round for the first two thirds of a shake, and\n  // as it dies the liquid breaks up into the new drops.\n  const shaking = P.c \u003c TS, u = P.c / TS, e = shaking ? sin(PI * min(1, u / 0.65)) ** 2 : 0;\n  flow(P, 10 * e, P.time * 0.3);\n  velocity(P, 1 - e);\n  // phi is carried as atanh(phi), which runs nearly straight through an\n  // interface, so the linear interpolation does not smear the drops' edges.\n  const phi = P.phi, q = P.nxt;\n  for (let i = 0; i \u003c N; i++) {\n    const p = cl(phi[i], -0.99999, 0.99999);\n    q[i] = 0.5 * log((1 + p) / (1 - p));\n  }\n  advect(P, q, phi, T, 6, -6);\n  for (let i = 0; i \u003c N; i++) phi[i] = 1 - 2 / (exp(2 * phi[i]) + 1);\n  if (shaking) {\n    const w = 1 - exp(-0.5 * sm(0.4, 0.8, u) * T), S = P.S;\n    for (let i = 0; i \u003c N; i++) phi[i] += w * (S[i] - phi[i]);\n  }\n  const steps = Math.ceil(T / HMAX - 1e-6);\n  for (let s = 0; s \u003c steps; s++) relax(P, T / steps);\n  // A drop shrunk to one LED inside the other liquid cannot go anywhere under\n  // the local multiplier and would stay as a dimple: fill it in.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i];\n      if (p > 0.97 || p \u003c -0.97) continue;\n      const a = phi[x > 0 ? i - 1 : i + 1], b = phi[x \u003c W - 1 ? i + 1 : i - 1], c = phi[y > 0 ? i - W : i + W], e = phi[y \u003c H - 1 ? i + W : i - W];\n      const lo = min(a, b, c, e), hi = max(a, b, c, e);\n      if ((lo > 0.5 && p \u003c lo - 0.1) || (hi \u003c -0.5 && p > hi + 0.1)) phi[i] = (a + b + c + e) / 4;\n    }\n}\n\n// Light from the upper left and in front, and the half vector for the glint.\nconst LX = -0.42, LY = -0.56, LZ = 0.71, HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const phi = P.phi, bl = P.blur, deep = P.deep, pale = P.pale;\n  // phi blurred over 5x5 is read as the height of the oil: a drop is a dome\n  // and the layer a plateau, lit from the upper left.\n  box(phi, bl, P.tmp, 2);\n  hsv(P.hue + 0.07, 0.62, 1, deep);\n  hsv(P.hue + 0.07, 0.26, 1, pale);\n  // A soft band of shop light drifts across the glass every 14 s.\n  const band = W / 2 + 46 * sin((2 * PI * P.rt) / 14);\n  for (let y = 0; y \u003c H; y++) {\n    const shop = 0.86 + 0.14 * (1 - y / H);\n    // Water: a pale cool white, a shade bluer low down.\n    const wr = 0.76 - 0.06 * (y / H), wg = 0.82 - 0.03 * (y / H), wb = 0.93;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], o = sm(-0.6, 0.6, p);\n      const gx = phi[x \u003c W - 1 ? i + 1 : i] - phi[x > 0 ? i - 1 : i], gy = phi[y \u003c H - 1 ? i + W : i] - phi[y > 0 ? i - W : i];\n      const nx = -2.4 * (bl[x \u003c W - 1 ? i + 1 : i] - bl[x > 0 ? i - 1 : i]), ny = -2.4 * (bl[y \u003c H - 1 ? i + W : i] - bl[y > 0 ? i - W : i]);\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1), c1 = max(0, (nx * HX + ny * HY + HZ) * nn), c4 = c1 * c1 * c1 * c1, c16 = c4 * c4 * c4 * c4;\n      // Oil: pale at a drop's rim and deep in its middle and in the layer,\n      // shaded as a dome, never below 80% so it does not go brown.\n      const dpt = sm(-0.2, 0.9, bl[i]), sh = max(0.8, 1 + 0.6 * ((nx * LX + ny * LY + LZ) * nn - LZ));\n      const r = wr + ((pale[0] + (deep[0] - pale[0]) * dpt) * sh - wr) * o;\n      const g = wg + ((pale[1] + (deep[1] - pale[1]) * dpt) * sh - wg) * o;\n      const b = wb + ((pale[2] + (deep[2] - pale[2]) * dpt) * sh - wb) * o;\n      // The rim catches the light from above, a dome its glint, and a long\n      // flat interface, the meniscus, shows as a bright line.\n      const q = 1 - p * p, rim = q * q, lit = cl(gy * 0.6 + gx * 0.25, 0, 1), flat = (gy * gy) / (gx * gx + gy * gy + 1e-6);\n      const men = rim * flat * flat * sm(0.45, 0.75, abs(ny / 2.4));\n      const bx = (x - band + 0.4 * (y - H / 2)) / 11, sheen = bx * bx \u003c 9 ? exp(-bx * bx) * (0.05 + 0.1 * o) : 0;\n      const hl = cl(0.1 * rim + 0.45 * rim * lit + 0.7 * c16 * c16 * o + 0.8 * men + sheen, 0, 1);\n      display.setPixel(x, y, (r + (1 - r) * hl) * shop * 255, (g + (1 - g) * hl) * shop * 255, (b + (1 - b) * hl) * shop * 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long."},{"name":"Oil","min":0.3,"max":0.6,"about":"The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down."},{"name":"Shake","min":0,"max":1,"about":"How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles."}],"start":[0,2,0.3,0.06],"measures":{"motion":0.0579,"detail":0.0044,"edges":0.0095,"complexity":0.6088,"coverage":1,"colour":0.3088,"drift":0.0284},"knobResponse":[0.1292,0.1228,0.1399,0.1113]},{"slug":"big-type","title":"Big Type","family":"type","round":1,"note":"화면을 꽉 채운 낱말 하나가 자석을 댄 옛 텔레비전 화면처럼 휘어요.","idea":"One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-big-type","type":"code","name":"big-type","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the outline colour; the fill and the shadow follow it."},{"name":"Speed","min":0.2,"max":5,"about":"How fast the wave runs down the word and the bright scan bar rolls."},{"name":"Word","min":0,"max":6,"about":"Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB."},{"name":"Warp","min":0,"max":1,"about":"How hard the picture bends, from a slow sway to a set losing its hold."}],"start":[0,2,0,0.06],"measures":{"motion":0.4681,"detail":0.0954,"edges":0.9989,"complexity":0.0628,"coverage":0.2402,"colour":0.253,"drift":0.0745},"knobResponse":[0.0865,0.0522,0.1361,0.0808]},{"slug":"bismuth","title":"Bismuth","family":"mineral","round":18,"note":"녹은 비스무트 웅덩이에서 계단 진 네모 호퍼 결정이 가지를 치며 패널 꼭대기까지 자라요. 테라스마다 산화막이 은색에서 금색, 자홍, 파랑, 청록을 지나 두 번째 금색과 분홍으로 바뀌어서 색이 그 단이 생긴 때를 말해요. K1 을 누르면 웅덩이가 패널을 타고 올라 결정을 녹였다가 빠지고, 결정이 다시 자라요.","idea":"Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.","buttons":"K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.","code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-bismuth","type":"code","name":"bismuth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves."},{"name":"Steps","min":3,"max":8,"about":"How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows."},{"name":"Heat","min":0,"max":1,"about":"How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back."}],"start":[0,2,3,0.06],"measures":{"motion":0.0634,"detail":0.155,"edges":0.6769,"complexity":1.8463,"coverage":0.7656,"colour":0.3505,"drift":0.1056},"knobResponse":[0.1563,0.1868,0.0876,0.1811]},{"slug":"blooming-gel","title":"Blooming Gel","family":"cosmetic","round":36,"note":"젖은 블루밍 베이스에 코발트와 라일락, 흰 젤 방울이 하나씩 떨어져 가장자리가 해진 꽃처럼 번지고, 안료는 번지는 앞선으로 밀려 테두리가 짙어져요. 6.2초를 그리고 나면 경화 램프 띠가 위에서 아래로 지나며 무늬를 굳히고, 닦아 낸 새 베이스에서 다시 시작해요. K3 은 방울 크기와 번지는 거리를 정하고, K1 을 누르면 방울 하나가 바로 떨어져요.","idea":"Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.","buttons":"K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.","code":"// ===== Patternflow pattern =====\n// Title:   Blooming Gel\n// Family:  cosmetic\n// Idea:    Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after blooming gel nail art, with the drop's gel spreading by the porous medium equation and its Barenblatt fronts (G. I. Barenblatt, 1952) and its pigment run ahead to the front like a watercolour back-run\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1\n//\n// Knob 1: Hue. Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream.\n// Knob 2: Speed. The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Bloom. How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other.\n// Knob 4: Rim. How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring.\n// Buttons: K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, exp, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The gel lives on a coarse grid of CW x CH cells, 2 LEDs each; its\n// pigment on the LEDs themselves.\nconst CW = W / 2, CH = H / 2, CN = CW * CH;\n// Tiles of 8 x 8 LEDs: only the wet ones and their neighbours are worked.\nconst TS = 8, TW = W / TS, TH = H / TS;\n// Pigments: two tints and white.\nconst NK = 3;\n// The drop's gel spreads as w_t = div(D w grad w), the porous medium\n// equation, whose fronts move at a finite speed; D in LED^2 a second at\n// Speed 2. The gel soaks into the base, losing SOAK of itself a second, and\n// pigment moves only where the gel is thicker than WET.\nconst SOAK = 0.06, WET = 0.006;\n// One painting round in seconds of nail time: drops land until PAINT, the\n// cure lamp passes from CURE to HOLD, the design rests, and the wipe runs\n// from WIPE to ROUND.\nconst PAINT = 6.2, CURE = 6.5, HOLD = 7.9, WIPE = 9.1, ROUND = 10.3;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, bloom: 0, rim: 0.06, t: 0, next: 0, first: true, gmob: 1,\n    g: new Float32Array(CN), dg: new Float32Array(CN), Gx: new Float32Array(CN), Gy: new Float32Array(CN), set: 0, lamp: -99,\n    w: new Float32Array(N), wt: new Float32Array(N), Mx: new Float32Array(N), My: new Float32Array(N),\n    p: [new Float32Array(N), new Float32Array(N), new Float32Array(N)], dp: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    tile: new Uint8Array(TW * TH), act: new Uint8Array(TW * TH),\n    c: [0, 0, 0], col: [new Float32Array(3), new Float32Array(3)], base: [0, 0, 0],\n    lastKind: 0, lastX: 32, lastY: 64,\n  };\n  freshBase(S);\n  params.s = S;\n}\n\n// Smooth value noise on a grid of cells LEDs, in -1..1, for a w x h field.\nfunction noise(cells, w, h) {\n  const gw = Math.ceil(w / cells) + 2, gh = Math.ceil(h / cells) + 2, g = new Float32Array(gw * gh), out = new Float32Array(w * h);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  for (let y = 0; y \u003c h; y++)\n    for (let x = 0; x \u003c w; x++) {\n      const u = x / cells, v = y / cells, i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n      const su = fu * fu * (3 - 2 * fu), sv = fv * fv * (3 - 2 * fv);\n      const a = g[j * gw + i], b = g[j * gw + i + 1], c = g[(j + 1) * gw + i], d = g[(j + 1) * gw + i + 1];\n      out[y * w + x] = (a + (b - a) * su) * (1 - sv) + (c + (d - c) * su) * sv;\n    }\n  return out;\n}\n\n// A fresh blooming base: clear, and unevenly wet, which is what feathers\n// the blooms. The gel's mobility varies up to sixfold over 6 to 12 LEDs,\n// which bends the fronts into lobes; the pigment's more over 2 to 5 LEDs,\n// which mottles the colour inside a bloom.\nfunction freshBase(S) {\n  const a = noise(3, CW, CH), b = noise(1.5, CW, CH), m = new Float32Array(CN);\n  let mm = 0;\n  for (let i = 0; i \u003c CN; i++) mm = max(mm, (m[i] = exp(0.6 * a[i] + 0.3 * b[i])));\n  S.gmob = mm;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x;\n      S.Gx[i] = x \u003c CW - 1 ? 0.5 * (m[i] + m[i + 1]) : 0;\n      S.Gy[i] = y \u003c CH - 1 ? 0.5 * (m[i] + m[i + CW]) : 0;\n    }\n  const c = noise(2.5, W, H), d = noise(1.2, W, H), f = new Float32Array(N), e = noise(4, W, H);\n  // And how thick the gel must be before pigment can enter, which varies\n  // fourfold or more from LED to LED: that frays the edges.\n  for (let i = 0; i \u003c N; i++) S.wt[i] = WET * exp(1.2 * d[i] + 0.8 * e[i]);\n  for (let i = 0; i \u003c N; i++) f[i] = exp(0.9 * c[i] + 0.5 * d[i]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      S.Mx[i] = x \u003c W - 1 ? 0.5 * (f[i] + f[i + 1]) : 0;\n      S.My[i] = y \u003c H - 1 ? 0.5 * (f[i] + f[i + W]) : 0;\n    }\n  S.g.fill(0);\n  S.w.fill(0);\n  for (let k = 0; k \u003c NK; k++) S.p[k].fill(0);\n  S.set = 0;\n}\n\n// A drop of gel lands: a small dome of gel carrying one pigment.\n// Its outline is a little wavy, four to seven soft lobes.\nfunction drop(S, x0, y0, kind) {\n  const r = 6 + 3 * S.bloom, h0 = 0.5 + 0.25 * S.bloom, R = r * 1.25 + 1;\n  const lobes = 4 + floor(random() * 4), ph = random() * 2 * PI, amp = 0.1 + 0.1 * random();\n  const shape = (dx, dy) => (dx * dx + dy * dy) / (r * r * (1 + amp * sin(lobes * Math.atan2(dy, dx) + ph)) ** 2);\n  for (let y = max(0, floor((y0 - R) / 2)); y \u003c= min(CH - 1, (y0 + R) / 2); y++)\n    for (let x = max(0, floor((x0 - R) / 2)); x \u003c= min(CW - 1, (x0 + R) / 2); x++) {\n      const d2 = shape(2 * x + 1 - x0, 2 * y + 1 - y0);\n      if (d2 \u003c 1) S.g[y * CW + x] += h0 * (1 - d2);\n    }\n  const P = S.p[kind];\n  for (let y = max(0, floor(y0 - R)); y \u003c= min(H - 1, y0 + R); y++)\n    for (let x = max(0, floor(x0 - R)); x \u003c= min(W - 1, x0 + R); x++) {\n      const d2 = shape(x + 0.5 - x0, y + 0.5 - y0);\n      if (d2 \u003c 1) P[y * W + x] += 0.8 * h0 * (1 - d2);\n    }\n  S.lastKind = kind;\n  S.lastX = x0;\n  S.lastY = y0;\n}\n\n// The next drop: near the last one as often as not, so blooms meet, and\n// never the same pigment twice running.\nfunction nextDrop(S) {\n  let x, y;\n  if (random() \u003c 0.5) {\n    const a = random() * 2 * PI, d = 14 + random() * 14;\n    x = S.lastX + d * cos(a);\n    y = S.lastY + d * sin(a) * 1.4;\n  } else {\n    x = 8 + random() * (W - 16);\n    y = 8 + random() * (H - 16);\n  }\n  x = cl(x, 6, W - 6);\n  y = cl(y, 6, H - 6);\n  // After a tint, white one time in three; never white twice.\n  const kind = S.lastKind === 2 ? (random() \u003c 0.5 ? 0 : 1) : random() \u003c 0.67 ? 1 - S.lastKind : 2;\n  drop(S, x, y, kind);\n}\n\n// One explicit step of the gel on its coarse grid: finite volumes, the flux\n// across a face D w (w_j - w_i) / h^2 with w the mean of the two cells.\nfunction gelStep(S, dt, D) {\n  const { g, dg, Gx, Gy } = S, k = (D * dt) / 4;\n  dg.fill(0);\n  for (let y = Math.ceil(S.set / 2); y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x, gi = g[i];\n      if (x \u003c CW - 1) {\n        const gj = g[i + 1];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gx[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + 1] -= q;\n        }\n      }\n      if (y \u003c CH - 1) {\n        const gj = g[i + CW];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gy[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + CW] -= q;\n        }\n      }\n    }\n  const soak = exp(-SOAK * dt), dry = 0.004 * dt;\n  for (let i = 0; i \u003c CN; i++) {\n    const v = (g[i] + dg[i]) * soak - dry;\n    g[i] = v > 0 ? v : 0;\n  }\n}\n\n// The gel's thickness on the LEDs, bilinear from the coarse grid, and which\n// tiles have any.\nfunction upsample(S) {\n  const { g, w, tile } = S;\n  tile.fill(0);\n  for (let y = 0; y \u003c H; y++) {\n    const v = cl(y / 2 - 0.25, 0, CH - 1.0001), j = v | 0, fy = v - j;\n    for (let x = 0; x \u003c W; x++) {\n      const u = cl(x / 2 - 0.25, 0, CW - 1.0001), i = u | 0, fx = u - i, q = j * CW + i;\n      const val = (g[q] * (1 - fx) + g[q + 1] * fx) * (1 - fy) + (g[q + CW] * (1 - fx) + g[q + CW + 1] * fx) * fy;\n      w[y * W + x] = val;\n      if (val > WET) tile[((y / TS) | 0) * TW + ((x / TS) | 0)] = 1;\n    }\n  }\n}\n\n// One explicit step of the pigment over the wet tiles. In the body of a\n// bloom it goes with the gel, at the gel's mean velocity -D grad w; where the\n// gel thins toward its front it rides the surface, up to beta = 3.5 + 5.5 Rim\n// times as fast, so it runs ahead to the front and piles up there, since it\n// can only go where there is gel. Within the gel it spreads a little.\nfunction pigmentStep(S, dt, D, beta) {\n  const { w, wt, Mx, My, p, dp, tile, act } = S;\n  act.fill(0);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0; tx \u003c TW; tx++)\n      if (tile[ty * TW + tx])\n        for (let j = max(0, ty - 1); j \u003c= min(TH - 1, ty + 1); j++) for (let i = max(0, tx - 1); i \u003c= min(TW - 1, tx + 1); i++) act[j * TW + i] = 1;\n  const p0 = p[0], p1 = p[1], p2 = p[2], d0 = dp[0], d1 = dp[1], d2 = dp[2];\n  const kap = 1.2 * dt, edge = 0.03 + 0.05 * S.rim;\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++) {\n      const r = y * W;\n      d0.fill(0, r + x0, r + x0 + TS);\n      d1.fill(0, r + x0, r + x0 + TS);\n      d2.fill(0, r + x0, r + x0 + TS);\n    }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = max(y0, Math.ceil(S.set)); y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x, wi = w[i];\n        for (let f = 0; f \u003c 2; f++) {\n          if (f === 0 ? x === W - 1 : y === H - 1) continue;\n          const j = f === 0 ? i + 1 : i + W, wj = w[j];\n          if (wi \u003c WET && wj \u003c WET) continue;\n          if (p0[i] + p1[i] + p2[i] + p0[j] + p1[j] + p2[j] \u003c 1e-4) continue;\n          const m = f === 0 ? Mx[i] : My[i];\n          // Upwind: the pigment of the LED the gel leaves. The surface's lead\n          // fades in below a gel thickness of about edge.\n          const wf = 0.5 * (wi + wj);\n          let v = -dt * D * (1 + (beta - 1) * (edge / (wf + edge))) * m * (wj - wi);\n          v = v > 0.2 ? 0.2 : v \u003c -0.2 ? -0.2 : v;\n          let a0 = 0, a1 = 0, a2 = 0;\n          if (v > 0 && wj > wt[j]) (a0 = v * p0[i]), (a1 = v * p1[i]), (a2 = v * p2[i]);\n          else if (v \u003c 0 && wi > wt[i]) (a0 = v * p0[j]), (a1 = v * p1[j]), (a2 = v * p2[j]);\n          if (wi > wt[i] && wj > wt[j]) {\n            const k = kap * m \u003c 0.04 ? kap * m : 0.04;\n            a0 -= k * (p0[j] - p0[i]);\n            a1 -= k * (p1[j] - p1[i]);\n            a2 -= k * (p2[j] - p2[i]);\n          }\n          d0[i] -= a0;\n          d0[j] += a0;\n          d1[i] -= a1;\n          d1[j] += a1;\n          d2[i] -= a2;\n          d2[j] += a2;\n        }\n      }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x;\n        p0[i] += d0[i];\n        p1[i] += d1[i];\n        p2[i] += d2[i];\n      }\n  }\n}\n\nfunction advance(S, dt) {\n  const t0 = S.t % ROUND;\n  S.t += dt;\n  const t1 = S.t % ROUND;\n  const D = 150 + 150 * S.bloom, beta = 3.5 + 5.5 * S.rim;\n  if (t1 \u003c t0) {\n    freshBase(S);\n    S.next = 0.2;\n  }\n  // Drops while painting.\n  if (t1 \u003c PAINT) {\n    S.next -= dt;\n    if (S.next \u003c= 0) {\n      S.next = 0.35 + 0.45 * random();\n      nextDrop(S);\n    }\n  }\n  // The cure lamp passes down the panel and sets each row it has passed: the\n  // gel and its pigment stop moving there.\n  S.lamp = t1 >= CURE && t1 \u003c HOLD + 0.2 ? ((t1 - CURE) / (HOLD - CURE)) * (H + 20) - 10 : -99;\n  if (S.lamp > -99) S.set = max(S.set, cl(S.lamp, 0, H));\n  // The wipe pushes the colour down ahead of it and lifts it off.\n  if (t1 >= WIPE) {\n    const row = ((t1 - WIPE) / (ROUND - WIPE)) * (H + 24) - 12;\n    for (let y = H - 1; y >= 0; y--) {\n      const f = cl((row - y) / 10, 0, 1);\n      if (f \u003c= 0) continue;\n      for (let k = 0; k \u003c NK; k++) {\n        const P = S.p[k];\n        for (let x = 0; x \u003c W; x++) {\n          const i = y * W + x, v = P[i] * f * 0.3;\n          P[i] -= v + 0.25 * f * P[i];\n          if (y \u003c H - 1) P[i + W] += v;\n        }\n      }\n    }\n  }\n  // The gel in explicit steps short enough to hold steady, at most twelve\n  // a frame: for the moment a fresh drop is thickest, nail time runs a\n  // little slow rather than the sums running away.\n  let gm = 0;\n  for (let i = 0; i \u003c CN; i++) if (S.g[i] > gm) gm = S.g[i];\n  if (gm \u003c= 0) {\n    S.w.fill(0);\n    return;\n  }\n  const lim = 0.8 / (D * S.gmob * gm), n = min(12, Math.ceil(dt / lim)), h = min(dt / n, lim);\n  for (let s = 0; s \u003c n; s++) gelStep(S, h, D);\n  upsample(S);\n  // The pigment in one or two steps. No face passes on more than 0.24 of a\n  // LED's pigment in one, so even a LED emptying through all four faces\n  // keeps a little and none goes below zero.\n  const m = dt > 0.04 ? 2 : 1;\n  for (let s = 0; s \u003c m; s++) pigmentStep(S, (n * h) / m, D, beta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bloom = cl(k[2], 0, 1);\n  S.rim = cl(k[3], 0, 1);\n  if (S.first) {\n    // Open with three drops already landing, spread down the panel.\n    for (let n = 0; n \u003c 3; n++) drop(S, 18 + 28 * random(), 22 + 40 * n + 12 * random(), n);\n    S.first = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Once the lamp has started, a new drop needs a fresh base first.\n    if (S.t % ROUND >= CURE) {\n      S.t = (floor(S.t / ROUND) + 1) * ROUND;\n      freshBase(S);\n      S.next = 0.6;\n    }\n    nextDrop(S);\n  }\n  advance(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { w, p, col, base, c } = S;\n  // Colours: a milky base, two tints round the hue, white. Each tint is a\n  // pigment that takes light away as exp(-a p) (Beer-Lambert), its strength\n  // a set so a full drop shows the tint.\n  // From orange to lime a pale base reads khaki, so there it is paler still.\n  const h = S.hue + 0.66, hb = h + 0.04 - floor(h + 0.04), warm = sm(0.02, 0.07, hb) * (1 - sm(0.3, 0.38, hb));\n  hsv(h + 0.04, 0.2 - 0.08 * warm, 0.85 + 0.08 * warm, base);\n  // The tints: a deep one on the hue and a lighter one 0.1 round from it.\n  // Round orange and yellow both are lifted to near full, so a thick rim\n  // deepens toward red or orange instead of going brown or olive.\n  for (let k = 0; k \u003c 2; k++) {\n    const ht = h + 0.1 * k, hk = ht - floor(ht), wk = sm(0.0, 0.05, hk) * (1 - sm(0.28, 0.36, hk));\n    hsv(ht, k ? 0.7 : 0.88, (k ? 0.76 : 0.58) + (k ? 0.18 : 0.34) * wk, c);\n    for (let ch = 0; ch \u003c 3; ch++) col[k][ch] = max(0, -Math.log(max(c[ch], 0.03) / base[ch]) / 0.15);\n  }\n  const p0 = p[0], p1 = p[1], p2 = p[2], lb = S.lamp > -99 ? 1 : 0, sh = ((S.t % ROUND) - CURE) * 40 - 30;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, a = p0[i], b = p1[i], wh = 1 - exp(-8 * p2[i]);\n      let r = base[0] * exp(-col[0][0] * a - col[1][0] * b);\n      let g = base[1] * exp(-col[0][1] * a - col[1][1] * b);\n      let bl = base[2] * exp(-col[0][2] * a - col[1][2] * b);\n      r += (0.97 - r) * wh;\n      g += (0.97 - g) * wh;\n      bl += (0.97 - bl) * wh;\n      // Wet gel shines: a highlight from the slope of its surface.\n      const wi = w[i];\n      if (wi > 0) {\n        const gx = (x \u003c W - 1 ? w[i + 1] : wi) - (x > 0 ? w[i - 1] : wi), gy = (y \u003c H - 1 ? w[i + W] : wi) - (y > 0 ? w[i - W] : wi);\n        const nx = -gx * 14, ny = -gy * 14, nn = 1 / sqrt(1 + nx * nx + ny * ny);\n        const sp = (nx * -0.3 + ny * -0.45 + 0.84) * nn, s4 = sp * sp, s8 = s4 * s4, s16 = s8 * s8;\n        const gl = 0.45 * s16 * min(1, wi * 12);\n        r += gl;\n        g += gl;\n        bl += gl;\n      }\n      // The cure lamp's band, and the set coat's sheen behind it.\n      if (lb > 0) {\n        const q = (y - S.lamp) / 4, b2 = exp(-q * q) * lb;\n        r += 0.42 * b2;\n        g += 0.36 * b2;\n        bl += 0.5 * b2;\n      }\n      if (y \u003c S.set) {\n        const q = (x * 0.5 + y - sh) / 9, b3 = 0.1 * exp(-q * q);\n        r += b3;\n        g += b3;\n        bl += b3;\n      }\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","layer":{"id":"layer-blooming-gel","type":"code","name":"blooming-gel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Blooming Gel\n// Family:  cosmetic\n// Idea:    Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after blooming gel nail art, with the drop's gel spreading by the porous medium equation and its Barenblatt fronts (G. I. Barenblatt, 1952) and its pigment run ahead to the front like a watercolour back-run\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1\n//\n// Knob 1: Hue. Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream.\n// Knob 2: Speed. The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Bloom. How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other.\n// Knob 4: Rim. How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring.\n// Buttons: K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, exp, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The gel lives on a coarse grid of CW x CH cells, 2 LEDs each; its\n// pigment on the LEDs themselves.\nconst CW = W / 2, CH = H / 2, CN = CW * CH;\n// Tiles of 8 x 8 LEDs: only the wet ones and their neighbours are worked.\nconst TS = 8, TW = W / TS, TH = H / TS;\n// Pigments: two tints and white.\nconst NK = 3;\n// The drop's gel spreads as w_t = div(D w grad w), the porous medium\n// equation, whose fronts move at a finite speed; D in LED^2 a second at\n// Speed 2. The gel soaks into the base, losing SOAK of itself a second, and\n// pigment moves only where the gel is thicker than WET.\nconst SOAK = 0.06, WET = 0.006;\n// One painting round in seconds of nail time: drops land until PAINT, the\n// cure lamp passes from CURE to HOLD, the design rests, and the wipe runs\n// from WIPE to ROUND.\nconst PAINT = 6.2, CURE = 6.5, HOLD = 7.9, WIPE = 9.1, ROUND = 10.3;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, bloom: 0, rim: 0.06, t: 0, next: 0, first: true, gmob: 1,\n    g: new Float32Array(CN), dg: new Float32Array(CN), Gx: new Float32Array(CN), Gy: new Float32Array(CN), set: 0, lamp: -99,\n    w: new Float32Array(N), wt: new Float32Array(N), Mx: new Float32Array(N), My: new Float32Array(N),\n    p: [new Float32Array(N), new Float32Array(N), new Float32Array(N)], dp: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    tile: new Uint8Array(TW * TH), act: new Uint8Array(TW * TH),\n    c: [0, 0, 0], col: [new Float32Array(3), new Float32Array(3)], base: [0, 0, 0],\n    lastKind: 0, lastX: 32, lastY: 64,\n  };\n  freshBase(S);\n  params.s = S;\n}\n\n// Smooth value noise on a grid of cells LEDs, in -1..1, for a w x h field.\nfunction noise(cells, w, h) {\n  const gw = Math.ceil(w / cells) + 2, gh = Math.ceil(h / cells) + 2, g = new Float32Array(gw * gh), out = new Float32Array(w * h);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  for (let y = 0; y \u003c h; y++)\n    for (let x = 0; x \u003c w; x++) {\n      const u = x / cells, v = y / cells, i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n      const su = fu * fu * (3 - 2 * fu), sv = fv * fv * (3 - 2 * fv);\n      const a = g[j * gw + i], b = g[j * gw + i + 1], c = g[(j + 1) * gw + i], d = g[(j + 1) * gw + i + 1];\n      out[y * w + x] = (a + (b - a) * su) * (1 - sv) + (c + (d - c) * su) * sv;\n    }\n  return out;\n}\n\n// A fresh blooming base: clear, and unevenly wet, which is what feathers\n// the blooms. The gel's mobility varies up to sixfold over 6 to 12 LEDs,\n// which bends the fronts into lobes; the pigment's more over 2 to 5 LEDs,\n// which mottles the colour inside a bloom.\nfunction freshBase(S) {\n  const a = noise(3, CW, CH), b = noise(1.5, CW, CH), m = new Float32Array(CN);\n  let mm = 0;\n  for (let i = 0; i \u003c CN; i++) mm = max(mm, (m[i] = exp(0.6 * a[i] + 0.3 * b[i])));\n  S.gmob = mm;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x;\n      S.Gx[i] = x \u003c CW - 1 ? 0.5 * (m[i] + m[i + 1]) : 0;\n      S.Gy[i] = y \u003c CH - 1 ? 0.5 * (m[i] + m[i + CW]) : 0;\n    }\n  const c = noise(2.5, W, H), d = noise(1.2, W, H), f = new Float32Array(N), e = noise(4, W, H);\n  // And how thick the gel must be before pigment can enter, which varies\n  // fourfold or more from LED to LED: that frays the edges.\n  for (let i = 0; i \u003c N; i++) S.wt[i] = WET * exp(1.2 * d[i] + 0.8 * e[i]);\n  for (let i = 0; i \u003c N; i++) f[i] = exp(0.9 * c[i] + 0.5 * d[i]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      S.Mx[i] = x \u003c W - 1 ? 0.5 * (f[i] + f[i + 1]) : 0;\n      S.My[i] = y \u003c H - 1 ? 0.5 * (f[i] + f[i + W]) : 0;\n    }\n  S.g.fill(0);\n  S.w.fill(0);\n  for (let k = 0; k \u003c NK; k++) S.p[k].fill(0);\n  S.set = 0;\n}\n\n// A drop of gel lands: a small dome of gel carrying one pigment.\n// Its outline is a little wavy, four to seven soft lobes.\nfunction drop(S, x0, y0, kind) {\n  const r = 6 + 3 * S.bloom, h0 = 0.5 + 0.25 * S.bloom, R = r * 1.25 + 1;\n  const lobes = 4 + floor(random() * 4), ph = random() * 2 * PI, amp = 0.1 + 0.1 * random();\n  const shape = (dx, dy) => (dx * dx + dy * dy) / (r * r * (1 + amp * sin(lobes * Math.atan2(dy, dx) + ph)) ** 2);\n  for (let y = max(0, floor((y0 - R) / 2)); y \u003c= min(CH - 1, (y0 + R) / 2); y++)\n    for (let x = max(0, floor((x0 - R) / 2)); x \u003c= min(CW - 1, (x0 + R) / 2); x++) {\n      const d2 = shape(2 * x + 1 - x0, 2 * y + 1 - y0);\n      if (d2 \u003c 1) S.g[y * CW + x] += h0 * (1 - d2);\n    }\n  const P = S.p[kind];\n  for (let y = max(0, floor(y0 - R)); y \u003c= min(H - 1, y0 + R); y++)\n    for (let x = max(0, floor(x0 - R)); x \u003c= min(W - 1, x0 + R); x++) {\n      const d2 = shape(x + 0.5 - x0, y + 0.5 - y0);\n      if (d2 \u003c 1) P[y * W + x] += 0.8 * h0 * (1 - d2);\n    }\n  S.lastKind = kind;\n  S.lastX = x0;\n  S.lastY = y0;\n}\n\n// The next drop: near the last one as often as not, so blooms meet, and\n// never the same pigment twice running.\nfunction nextDrop(S) {\n  let x, y;\n  if (random() \u003c 0.5) {\n    const a = random() * 2 * PI, d = 14 + random() * 14;\n    x = S.lastX + d * cos(a);\n    y = S.lastY + d * sin(a) * 1.4;\n  } else {\n    x = 8 + random() * (W - 16);\n    y = 8 + random() * (H - 16);\n  }\n  x = cl(x, 6, W - 6);\n  y = cl(y, 6, H - 6);\n  // After a tint, white one time in three; never white twice.\n  const kind = S.lastKind === 2 ? (random() \u003c 0.5 ? 0 : 1) : random() \u003c 0.67 ? 1 - S.lastKind : 2;\n  drop(S, x, y, kind);\n}\n\n// One explicit step of the gel on its coarse grid: finite volumes, the flux\n// across a face D w (w_j - w_i) / h^2 with w the mean of the two cells.\nfunction gelStep(S, dt, D) {\n  const { g, dg, Gx, Gy } = S, k = (D * dt) / 4;\n  dg.fill(0);\n  for (let y = Math.ceil(S.set / 2); y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x, gi = g[i];\n      if (x \u003c CW - 1) {\n        const gj = g[i + 1];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gx[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + 1] -= q;\n        }\n      }\n      if (y \u003c CH - 1) {\n        const gj = g[i + CW];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gy[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + CW] -= q;\n        }\n      }\n    }\n  const soak = exp(-SOAK * dt), dry = 0.004 * dt;\n  for (let i = 0; i \u003c CN; i++) {\n    const v = (g[i] + dg[i]) * soak - dry;\n    g[i] = v > 0 ? v : 0;\n  }\n}\n\n// The gel's thickness on the LEDs, bilinear from the coarse grid, and which\n// tiles have any.\nfunction upsample(S) {\n  const { g, w, tile } = S;\n  tile.fill(0);\n  for (let y = 0; y \u003c H; y++) {\n    const v = cl(y / 2 - 0.25, 0, CH - 1.0001), j = v | 0, fy = v - j;\n    for (let x = 0; x \u003c W; x++) {\n      const u = cl(x / 2 - 0.25, 0, CW - 1.0001), i = u | 0, fx = u - i, q = j * CW + i;\n      const val = (g[q] * (1 - fx) + g[q + 1] * fx) * (1 - fy) + (g[q + CW] * (1 - fx) + g[q + CW + 1] * fx) * fy;\n      w[y * W + x] = val;\n      if (val > WET) tile[((y / TS) | 0) * TW + ((x / TS) | 0)] = 1;\n    }\n  }\n}\n\n// One explicit step of the pigment over the wet tiles. In the body of a\n// bloom it goes with the gel, at the gel's mean velocity -D grad w; where the\n// gel thins toward its front it rides the surface, up to beta = 3.5 + 5.5 Rim\n// times as fast, so it runs ahead to the front and piles up there, since it\n// can only go where there is gel. Within the gel it spreads a little.\nfunction pigmentStep(S, dt, D, beta) {\n  const { w, wt, Mx, My, p, dp, tile, act } = S;\n  act.fill(0);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0; tx \u003c TW; tx++)\n      if (tile[ty * TW + tx])\n        for (let j = max(0, ty - 1); j \u003c= min(TH - 1, ty + 1); j++) for (let i = max(0, tx - 1); i \u003c= min(TW - 1, tx + 1); i++) act[j * TW + i] = 1;\n  const p0 = p[0], p1 = p[1], p2 = p[2], d0 = dp[0], d1 = dp[1], d2 = dp[2];\n  const kap = 1.2 * dt, edge = 0.03 + 0.05 * S.rim;\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++) {\n      const r = y * W;\n      d0.fill(0, r + x0, r + x0 + TS);\n      d1.fill(0, r + x0, r + x0 + TS);\n      d2.fill(0, r + x0, r + x0 + TS);\n    }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = max(y0, Math.ceil(S.set)); y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x, wi = w[i];\n        for (let f = 0; f \u003c 2; f++) {\n          if (f === 0 ? x === W - 1 : y === H - 1) continue;\n          const j = f === 0 ? i + 1 : i + W, wj = w[j];\n          if (wi \u003c WET && wj \u003c WET) continue;\n          if (p0[i] + p1[i] + p2[i] + p0[j] + p1[j] + p2[j] \u003c 1e-4) continue;\n          const m = f === 0 ? Mx[i] : My[i];\n          // Upwind: the pigment of the LED the gel leaves. The surface's lead\n          // fades in below a gel thickness of about edge.\n          const wf = 0.5 * (wi + wj);\n          let v = -dt * D * (1 + (beta - 1) * (edge / (wf + edge))) * m * (wj - wi);\n          v = v > 0.2 ? 0.2 : v \u003c -0.2 ? -0.2 : v;\n          let a0 = 0, a1 = 0, a2 = 0;\n          if (v > 0 && wj > wt[j]) (a0 = v * p0[i]), (a1 = v * p1[i]), (a2 = v * p2[i]);\n          else if (v \u003c 0 && wi > wt[i]) (a0 = v * p0[j]), (a1 = v * p1[j]), (a2 = v * p2[j]);\n          if (wi > wt[i] && wj > wt[j]) {\n            const k = kap * m \u003c 0.04 ? kap * m : 0.04;\n            a0 -= k * (p0[j] - p0[i]);\n            a1 -= k * (p1[j] - p1[i]);\n            a2 -= k * (p2[j] - p2[i]);\n          }\n          d0[i] -= a0;\n          d0[j] += a0;\n          d1[i] -= a1;\n          d1[j] += a1;\n          d2[i] -= a2;\n          d2[j] += a2;\n        }\n      }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x;\n        p0[i] += d0[i];\n        p1[i] += d1[i];\n        p2[i] += d2[i];\n      }\n  }\n}\n\nfunction advance(S, dt) {\n  const t0 = S.t % ROUND;\n  S.t += dt;\n  const t1 = S.t % ROUND;\n  const D = 150 + 150 * S.bloom, beta = 3.5 + 5.5 * S.rim;\n  if (t1 \u003c t0) {\n    freshBase(S);\n    S.next = 0.2;\n  }\n  // Drops while painting.\n  if (t1 \u003c PAINT) {\n    S.next -= dt;\n    if (S.next \u003c= 0) {\n      S.next = 0.35 + 0.45 * random();\n      nextDrop(S);\n    }\n  }\n  // The cure lamp passes down the panel and sets each row it has passed: the\n  // gel and its pigment stop moving there.\n  S.lamp = t1 >= CURE && t1 \u003c HOLD + 0.2 ? ((t1 - CURE) / (HOLD - CURE)) * (H + 20) - 10 : -99;\n  if (S.lamp > -99) S.set = max(S.set, cl(S.lamp, 0, H));\n  // The wipe pushes the colour down ahead of it and lifts it off.\n  if (t1 >= WIPE) {\n    const row = ((t1 - WIPE) / (ROUND - WIPE)) * (H + 24) - 12;\n    for (let y = H - 1; y >= 0; y--) {\n      const f = cl((row - y) / 10, 0, 1);\n      if (f \u003c= 0) continue;\n      for (let k = 0; k \u003c NK; k++) {\n        const P = S.p[k];\n        for (let x = 0; x \u003c W; x++) {\n          const i = y * W + x, v = P[i] * f * 0.3;\n          P[i] -= v + 0.25 * f * P[i];\n          if (y \u003c H - 1) P[i + W] += v;\n        }\n      }\n    }\n  }\n  // The gel in explicit steps short enough to hold steady, at most twelve\n  // a frame: for the moment a fresh drop is thickest, nail time runs a\n  // little slow rather than the sums running away.\n  let gm = 0;\n  for (let i = 0; i \u003c CN; i++) if (S.g[i] > gm) gm = S.g[i];\n  if (gm \u003c= 0) {\n    S.w.fill(0);\n    return;\n  }\n  const lim = 0.8 / (D * S.gmob * gm), n = min(12, Math.ceil(dt / lim)), h = min(dt / n, lim);\n  for (let s = 0; s \u003c n; s++) gelStep(S, h, D);\n  upsample(S);\n  // The pigment in one or two steps. No face passes on more than 0.24 of a\n  // LED's pigment in one, so even a LED emptying through all four faces\n  // keeps a little and none goes below zero.\n  const m = dt > 0.04 ? 2 : 1;\n  for (let s = 0; s \u003c m; s++) pigmentStep(S, (n * h) / m, D, beta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bloom = cl(k[2], 0, 1);\n  S.rim = cl(k[3], 0, 1);\n  if (S.first) {\n    // Open with three drops already landing, spread down the panel.\n    for (let n = 0; n \u003c 3; n++) drop(S, 18 + 28 * random(), 22 + 40 * n + 12 * random(), n);\n    S.first = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Once the lamp has started, a new drop needs a fresh base first.\n    if (S.t % ROUND >= CURE) {\n      S.t = (floor(S.t / ROUND) + 1) * ROUND;\n      freshBase(S);\n      S.next = 0.6;\n    }\n    nextDrop(S);\n  }\n  advance(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { w, p, col, base, c } = S;\n  // Colours: a milky base, two tints round the hue, white. Each tint is a\n  // pigment that takes light away as exp(-a p) (Beer-Lambert), its strength\n  // a set so a full drop shows the tint.\n  // From orange to lime a pale base reads khaki, so there it is paler still.\n  const h = S.hue + 0.66, hb = h + 0.04 - floor(h + 0.04), warm = sm(0.02, 0.07, hb) * (1 - sm(0.3, 0.38, hb));\n  hsv(h + 0.04, 0.2 - 0.08 * warm, 0.85 + 0.08 * warm, base);\n  // The tints: a deep one on the hue and a lighter one 0.1 round from it.\n  // Round orange and yellow both are lifted to near full, so a thick rim\n  // deepens toward red or orange instead of going brown or olive.\n  for (let k = 0; k \u003c 2; k++) {\n    const ht = h + 0.1 * k, hk = ht - floor(ht), wk = sm(0.0, 0.05, hk) * (1 - sm(0.28, 0.36, hk));\n    hsv(ht, k ? 0.7 : 0.88, (k ? 0.76 : 0.58) + (k ? 0.18 : 0.34) * wk, c);\n    for (let ch = 0; ch \u003c 3; ch++) col[k][ch] = max(0, -Math.log(max(c[ch], 0.03) / base[ch]) / 0.15);\n  }\n  const p0 = p[0], p1 = p[1], p2 = p[2], lb = S.lamp > -99 ? 1 : 0, sh = ((S.t % ROUND) - CURE) * 40 - 30;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, a = p0[i], b = p1[i], wh = 1 - exp(-8 * p2[i]);\n      let r = base[0] * exp(-col[0][0] * a - col[1][0] * b);\n      let g = base[1] * exp(-col[0][1] * a - col[1][1] * b);\n      let bl = base[2] * exp(-col[0][2] * a - col[1][2] * b);\n      r += (0.97 - r) * wh;\n      g += (0.97 - g) * wh;\n      bl += (0.97 - bl) * wh;\n      // Wet gel shines: a highlight from the slope of its surface.\n      const wi = w[i];\n      if (wi > 0) {\n        const gx = (x \u003c W - 1 ? w[i + 1] : wi) - (x > 0 ? w[i - 1] : wi), gy = (y \u003c H - 1 ? w[i + W] : wi) - (y > 0 ? w[i - W] : wi);\n        const nx = -gx * 14, ny = -gy * 14, nn = 1 / sqrt(1 + nx * nx + ny * ny);\n        const sp = (nx * -0.3 + ny * -0.45 + 0.84) * nn, s4 = sp * sp, s8 = s4 * s4, s16 = s8 * s8;\n        const gl = 0.45 * s16 * min(1, wi * 12);\n        r += gl;\n        g += gl;\n        bl += gl;\n      }\n      // The cure lamp's band, and the set coat's sheen behind it.\n      if (lb > 0) {\n        const q = (y - S.lamp) / 4, b2 = exp(-q * q) * lb;\n        r += 0.42 * b2;\n        g += 0.36 * b2;\n        bl += 0.5 * b2;\n      }\n      if (y \u003c S.set) {\n        const q = (x * 0.5 + y - sh) / 9, b3 = 0.1 * exp(-q * q);\n        r += b3;\n        g += b3;\n        bl += b3;\n      }\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Bloom","min":0,"max":1,"about":"How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other."},{"name":"Rim","min":0,"max":1,"about":"How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring."}],"start":[0,2,0,0.06],"measures":{"motion":0.0712,"detail":0.0141,"edges":0.1484,"complexity":1.601,"coverage":1,"colour":0.1697,"drift":0.0438},"knobResponse":[0.2098,0.0709,0.1051,0.0332]},{"slug":"blotting-paper","title":"Blotting Paper","family":"cosmetic","round":39,"note":"결이 비치는 얇은 기름종이가 살에 눌린 자리마다 피지를 빨아들여, 반투명한 점이 결을 따라 √t 로 번지고 합쳐져요. 젖은 자리는 뒤 벽의 빛이 비쳐 밝고 짙은 색이 되고, LED 마다 한 번만 밝아져요. 종이가 거의 다 비치면 새 종이가 내려와 덮어요.","idea":"A thin tinted sheet of oil-blotting paper with its fibres showing hangs in front of a lit wall and, pressed to skin we never see, takes up oil where each pore touches it: translucent spots open with a deeper rim at their wet edge and widen with the square root of time, running a little ahead along the fibres and into one another, and wherever the paper has gone clear the wall shines through brighter and deeper in tint, until most of the sheet glows, holds, and a fresh sheet slides down over it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Blotting Paper\n// Family:  cosmetic\n// Idea:    A thin tinted sheet of oil-blotting paper with its fibres showing hangs in front of a lit wall and, pressed to skin we never see, takes up oil where each pore touches it: translucent spots open with a deeper rim at their wet edge and widen with the square root of time, running a little ahead along the fibres and into one another, and wherever the paper has gone clear the wall shines through brighter and deeper in tint, until most of the sheet glows, holds, and a fresh sheet slides down over it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after oil-blotting paper pressed to the skin, going translucent where the sebum wicks into its fibres (Lucas-Washburn wicking: Richard Lucas, 1918; Edward Washburn, 1921)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pores=20..80, Grain=0..1\n//\n// Knob 1: Hue. Turns the paper's tint round the whole wheel; the dry paper is a dim pale tint and the clear spots the same hue, deeper. At 0 rose, at 0.05 red, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale yellow, 0.3 lime, 0.4 green, 0.5 aqua, 0.6 sky blue, 0.7 blue, 0.8 violet, 0.9 orchid. From 0.02 to 0.34 the dry paper is lifted up to 1.5 times and paled toward grey and the spots a little paler, so red, orange and yellow paper never reads brown or olive.\n// Knob 2: Speed. At 2 the first pores touch 0.4 s after a sheet is pressed and the last about 6.5 s after; a tenth of the sheet is clear by 2.5 s, half by 6.7 s and nine tenths by 13 s, then it holds 2.5 s and a fresh sheet slides down in 1.4 s, about 16 s a sheet. At 0.2 the wicking is ten times slower, at 3 one and a half times faster; the slide always takes 1.4 s.\n// Knob 3: Pores. How many pores touch the sheet, each later one where the paper is still dry: 20 at the start, whose widest spots reach about 45 LEDs across before they meet, up to 80 at the top, about 24 across. Each spot's radius goes as the square root of its age, and the more pores, the slower each one spreads, so the sheet clears in about the same time.\n// Knob 4: Grain. How far the fibres line up along the panel. Up to 0.06 they lie every which way and the spots stay round; at 1 nearly all run up and down, nearly twice as long, and the oil runs along them two and a half times as fast as across, so the spots stretch into tall ovals and the clear patches join in columns.\n\nconst W = 64, H = 128, N = W * H;\n// Opening tint: rose.\nconst H0 = 0.94;\n// Fibres in a sheet, the width of the wicking front in LEDs, and how far the\n// oil runs ahead along a fibre.\nconst NF = 440, FRONT = 2.6, AHEAD = 1.8;\n// Brightness of the dry and the clear paper over the wall, 0..1.\nconst DRY = 0.24, CLEAR = 1;\n// Sheet seconds at Speed 2: the hold, once 90% of the sheet is clear, and the\n// slide of the next sheet in real seconds.\nconst HOLD = 2.5, SLIDE = 1.4;\n// Sheet seconds for the paper behind the front to soak to its clearest.\nconst SOAK = 2.5;\n// Spreading rate: the area all the spots open together, in LEDs a second.\nconst RATE = 1290, LATE = 6.5;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// A sheet: its fibres, its paper grain and the slow cockle that makes each\n// spot a little uneven. The fibres come from their own generator, so the\n// grain knob changes the fibres and never where the pores touch.\nfunction sheet(seed, grain) {\n  const F = new Float32Array(N), g = new Float32Array(N), r = rng(seed);\n  const spread = 1 - 0.9 * grain;\n  for (let f = 0; f \u003c NF; f++) {\n    const cx = r() * (W + 8) - 4, cy = r() * (H + 8) - 4, len = (4 + 11 * r()) * (1 + 0.8 * grain), a = PI / 2 + spread * (r() - 0.5) * PI, w = 0.35 + 0.65 * r();\n    const dx = cos(a), dy = sin(a), n = Math.ceil(len / 0.5);\n    for (let j = 0; j \u003c= n; j++) {\n      const s = (j / n - 0.5) * len, x = cx + dx * s, y = cy + dy * s, i = floor(x), k = floor(y), fx = x - i, fy = y - k;\n      for (let b = 0; b \u003c 2; b++)\n        for (let c = 0; c \u003c 2; c++) {\n          const xx = i + c, yy = k + b;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          F[yy * W + xx] += 0.5 * w * (c ? fx : 1 - fx) * (b ? fy : 1 - fy);\n        }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    F[p] = min(1, F[p]);\n    g[p] = r() * 2 - 1;\n  }\n  // The cockle roughens the spots' edges; the flocs, clumps of fibres a few\n  // LEDs across, cloud the paper where it has gone clear.\n  const nz = noise(r, 7, 1), fl = noise(r, 9, 0.5);\n  return { F, g, nz, fl, seed };\n}\n\n// Smooth value noise, -1..1, on a grid of cells `cell` LEDs wide, with a\n// second octave of half the size at weight w2.\nfunction noise(r, cell, w2) {\n  const out = new Float32Array(N);\n  for (const [c, w] of [[cell, 1], [cell / 2, w2]]) {\n    const gw = Math.ceil(W / c) + 2, gh = Math.ceil(H / c) + 2, G = new Float32Array(gw * gh);\n    for (let i = 0; i \u003c G.length; i++) G[i] = r() * 2 - 1;\n    for (let y = 0; y \u003c H; y++) {\n      const v = y / c, j = floor(v), fy = (v - j) * (v - j) * (3 - 2 * (v - j));\n      for (let x = 0; x \u003c W; x++) {\n        const u = x / c, i = floor(u), fx = (u - i) * (u - i) * (3 - 2 * (u - i)), a = G[j * gw + i], b = G[j * gw + i + 1], e = G[(j + 1) * gw + i], d = G[(j + 1) * gw + i + 1];\n        out[y * W + x] += (w * (a + (b - a) * fx + (e + (d - e) * fx - a - (b - a) * fx) * fy)) / (1 + w2);\n      }\n    }\n  }\n  return out;\n}\n\n// Where the pores touch: each the best of four tries at standing clear of\n// the ones before it, so the first n are spread out for any n.\nfunction pores(seed) {\n  const r = rng(seed ^ 0x5bd1e995), out = [];\n  for (let i = 0; i \u003c 80; i++) {\n    let best = null, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      const x = r() * (W + 6) - 3, y = r() * (H + 6) - 3;\n      let d = 1e9;\n      for (const o of out) d = min(d, (o.x - x) ** 2 + (o.y - y) ** 2);\n      if (d > bd) {\n        bd = d;\n        best = { x, y };\n      }\n    }\n    // How fast it wicks, and a share of the time it touches.\n    best.k = 0.75 + 0.5 * r();\n    best.r = 0.85 + 0.3 * r();\n    out.push(best);\n  }\n  return out;\n}\n\n// For every LED, the pore whose oil reaches it first: when that spot opened,\n// how fast it spreads and how far the LED is from it. Lucas-Washburn: a spot's\n// radius is k sqrt(t - t0), so the oil reaches distance d at t0 + (d / k)^2.\n// Distance is stretched across the grain, cut short along the fibres and\n// roughened by the cockle.\nfunction wick(S) {\n  const { F, nz } = S.cur, P = S.pores.slice(0, S.n), al = sqrt(1 + 1.5 * S.grain), T0 = S.T0, K = S.K, D = S.D;\n  // The first pores touch 0.4 s after the press and the rest follow over\n  // LATE seconds, each later one where the sheet is still dry.\n  P.forEach((o, i) => (o.t0 = 0.4 + LATE * (i / S.n) ** 1.4 * o.r));\n  // Each pore's k scaled so that n spots together open RATE LEDs a second.\n  let sk = 0;\n  for (const o of P) sk += o.k * o.k;\n  const kk = sqrt(RATE / (PI * sk)), arr = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, rough = 1 + 0.3 * nz[p], ahead = AHEAD * F[p];\n      let bt = 1e9, bi = 0, bd = 0;\n      for (let i = 0; i \u003c P.length; i++) {\n        const o = P[i], dx = (x - o.x) * al, dy = (y - o.y) / al;\n        const d = max(0, sqrt(dx * dx + dy * dy) * rough - ahead), k = o.k * kk, t = o.t0 + (d / k) * (d / k);\n        if (t \u003c bt) {\n          bt = t;\n          bi = i;\n          bd = d;\n        }\n      }\n      T0[p] = P[bi].t0;\n      K[p] = P[bi].k * kk;\n      D[p] = bd;\n      arr[p] = bt;\n    }\n  // The hold starts when nine tenths of the sheet has been reached.\n  arr.sort();\n  S.full = arr[floor(0.9 * N)];\n}\n\nfunction lay(S, seed) {\n  S.cur = sheet(seed, S.grain);\n  S.pores = pores(seed);\n  S.next = sheet(seed + 7919, S.grain);\n  wick(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 20, grain: 0.06, t: 0, phase: 0, slide: 0, seed: floor(Math.random() * 1e9), begun: false,\n    T0: new Float32Array(N), K: new Float32Array(N), D: new Float32Array(N), V: new Float32Array(N), C: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 20, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const n = round(cl(k[2], 20, 80)), grain = cl(k[3], 0, 1);\n  if (!S.begun) {\n    S.n = n;\n    S.grain = grain;\n    lay(S, S.seed);\n    S.begun = true;\n  } else if (abs(grain - S.grain) > 0.01) {\n    S.grain = grain;\n    S.n = n;\n    S.cur = sheet(S.cur.seed, grain);\n    S.next = sheet(S.cur.seed + 7919, grain);\n    wick(S);\n  } else if (n !== S.n) {\n    S.n = n;\n    wick(S);\n  }\n  if (S.phase === 0) {\n    S.t += (d * S.speed) / 2;\n    if (S.t > S.full + HOLD) S.phase = 1;\n  } else {\n    // A fresh sheet slides down over the old one.\n    S.slide += d / SLIDE;\n    if (S.slide >= 1) {\n      S.phase = 0;\n      S.slide = 0;\n      S.t = 0;\n      S.seed = (S.seed + 7919) >>> 0;\n      S.cur = S.next;\n      S.pores = pores(S.seed);\n      S.next = sheet(S.seed + 7919, S.grain);\n      wick(S);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { T0, K, D, V, C } = S, t = S.t, h = S.hue + H0, hh = h - floor(h);\n  const pure = [0, 0, 0];\n  {\n    const x = hh * 6, i = floor(x) % 6, f = x - floor(x);\n    pure[0] = [1, 1 - f, 0, 0, f, 1][i];\n    pure[1] = [f, 1, 1, 1 - f, 0, 0][i];\n    pure[2] = [0, 0, f, 1, 1, 1 - f][i];\n  }\n  // Orange and yellow paper goes brown when dim: there the dry paper is\n  // lifted and paled.\n  const warm = cl(1.6 - abs(hh - 0.12) / 0.1, 0, 1);\n  const dryV = DRY * (1 + 0.5 * warm), dryS = 0.2 - 0.15 * warm, clrS = 0.56 - 0.1 * warm;\n  // Each LED's brightness is its dry level until the oil reaches it and then\n  // rises once, smoothly, to its clear level; nothing else on the sheet moves.\n  const { F, g, fl } = S.cur;\n  for (let y = 0; y \u003c H; y++) {\n    const vy = (y - 63.5) / 92;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vx = (x - 31.5) / 46, wall = 0.84 + 0.16 * (1 - vx * vx - vy * vy);\n      const m = K[p] * sqrt(max(0, t - T0[p])) - D[p], age = t - T0[p] - (D[p] / K[p]) ** 2;\n      let s = cl(m / FRONT + 0.5, 0, 1);\n      s = s * s * (3 - 2 * s);\n      // Behind the front the paper keeps soaking up oil and clears further.\n      const soak = age > 0 ? 1 - exp(-age / SOAK) : 0;\n      const f = F[p], dry = dryV * wall * (1 + 0.5 * (f - 0.25) + 0.05 * g[p] + 0.06 * fl[p]), clr = CLEAR * wall * (1 - 0.17 * f + 0.03 * g[p] + 0.11 * fl[p]);\n      V[p] = dry + (clr - dry) * (0.68 * s + 0.32 * soak);\n      // The wet front carries a deeper rim of tint; it changes the colour,\n      // not the brightness.\n      C[p] = dryS + (clrS - dryS) * s + 1.2 * s * (1 - s);\n    }\n  }\n  const edge = S.phase === 1 ? round(H * (1 - (1 - S.slide) ** 3)) : -1, nf = S.next.F, ng = S.next.g, nl = S.next.fl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = V[p], c = C[p];\n      if (y \u003c edge) {\n        // The fresh sheet, dry, its fibres sliding down with it.\n        const q = (y - edge + H) * W + x, vx = (x - 31.5) / 46, vy = (y - 63.5) / 92;\n        v = dryV * (0.84 + 0.16 * (1 - vx * vx - vy * vy)) * (1 + 0.5 * (nf[q] - 0.25) + 0.05 * ng[q] + 0.06 * nl[q]);\n        c = dryS;\n        if (y === edge - 1) v *= 1.5;\n      } else if (edge >= 0 && y - edge \u003c 3) v *= 0.45 + 0.18 * (y - edge);\n      v = min(1, v);\n      display.setPixel(x, y, round(255 * v * (1 - c + c * pure[0])), round(255 * v * (1 - c + c * pure[1])), round(255 * v * (1 - c + c * pure[2])));\n    }\n}\n","layer":{"id":"layer-blotting-paper","type":"code","name":"blotting-paper","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Blotting Paper\n// Family:  cosmetic\n// Idea:    A thin tinted sheet of oil-blotting paper with its fibres showing hangs in front of a lit wall and, pressed to skin we never see, takes up oil where each pore touches it: translucent spots open with a deeper rim at their wet edge and widen with the square root of time, running a little ahead along the fibres and into one another, and wherever the paper has gone clear the wall shines through brighter and deeper in tint, until most of the sheet glows, holds, and a fresh sheet slides down over it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after oil-blotting paper pressed to the skin, going translucent where the sebum wicks into its fibres (Lucas-Washburn wicking: Richard Lucas, 1918; Edward Washburn, 1921)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pores=20..80, Grain=0..1\n//\n// Knob 1: Hue. Turns the paper's tint round the whole wheel; the dry paper is a dim pale tint and the clear spots the same hue, deeper. At 0 rose, at 0.05 red, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale yellow, 0.3 lime, 0.4 green, 0.5 aqua, 0.6 sky blue, 0.7 blue, 0.8 violet, 0.9 orchid. From 0.02 to 0.34 the dry paper is lifted up to 1.5 times and paled toward grey and the spots a little paler, so red, orange and yellow paper never reads brown or olive.\n// Knob 2: Speed. At 2 the first pores touch 0.4 s after a sheet is pressed and the last about 6.5 s after; a tenth of the sheet is clear by 2.5 s, half by 6.7 s and nine tenths by 13 s, then it holds 2.5 s and a fresh sheet slides down in 1.4 s, about 16 s a sheet. At 0.2 the wicking is ten times slower, at 3 one and a half times faster; the slide always takes 1.4 s.\n// Knob 3: Pores. How many pores touch the sheet, each later one where the paper is still dry: 20 at the start, whose widest spots reach about 45 LEDs across before they meet, up to 80 at the top, about 24 across. Each spot's radius goes as the square root of its age, and the more pores, the slower each one spreads, so the sheet clears in about the same time.\n// Knob 4: Grain. How far the fibres line up along the panel. Up to 0.06 they lie every which way and the spots stay round; at 1 nearly all run up and down, nearly twice as long, and the oil runs along them two and a half times as fast as across, so the spots stretch into tall ovals and the clear patches join in columns.\n\nconst W = 64, H = 128, N = W * H;\n// Opening tint: rose.\nconst H0 = 0.94;\n// Fibres in a sheet, the width of the wicking front in LEDs, and how far the\n// oil runs ahead along a fibre.\nconst NF = 440, FRONT = 2.6, AHEAD = 1.8;\n// Brightness of the dry and the clear paper over the wall, 0..1.\nconst DRY = 0.24, CLEAR = 1;\n// Sheet seconds at Speed 2: the hold, once 90% of the sheet is clear, and the\n// slide of the next sheet in real seconds.\nconst HOLD = 2.5, SLIDE = 1.4;\n// Sheet seconds for the paper behind the front to soak to its clearest.\nconst SOAK = 2.5;\n// Spreading rate: the area all the spots open together, in LEDs a second.\nconst RATE = 1290, LATE = 6.5;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// A sheet: its fibres, its paper grain and the slow cockle that makes each\n// spot a little uneven. The fibres come from their own generator, so the\n// grain knob changes the fibres and never where the pores touch.\nfunction sheet(seed, grain) {\n  const F = new Float32Array(N), g = new Float32Array(N), r = rng(seed);\n  const spread = 1 - 0.9 * grain;\n  for (let f = 0; f \u003c NF; f++) {\n    const cx = r() * (W + 8) - 4, cy = r() * (H + 8) - 4, len = (4 + 11 * r()) * (1 + 0.8 * grain), a = PI / 2 + spread * (r() - 0.5) * PI, w = 0.35 + 0.65 * r();\n    const dx = cos(a), dy = sin(a), n = Math.ceil(len / 0.5);\n    for (let j = 0; j \u003c= n; j++) {\n      const s = (j / n - 0.5) * len, x = cx + dx * s, y = cy + dy * s, i = floor(x), k = floor(y), fx = x - i, fy = y - k;\n      for (let b = 0; b \u003c 2; b++)\n        for (let c = 0; c \u003c 2; c++) {\n          const xx = i + c, yy = k + b;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          F[yy * W + xx] += 0.5 * w * (c ? fx : 1 - fx) * (b ? fy : 1 - fy);\n        }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    F[p] = min(1, F[p]);\n    g[p] = r() * 2 - 1;\n  }\n  // The cockle roughens the spots' edges; the flocs, clumps of fibres a few\n  // LEDs across, cloud the paper where it has gone clear.\n  const nz = noise(r, 7, 1), fl = noise(r, 9, 0.5);\n  return { F, g, nz, fl, seed };\n}\n\n// Smooth value noise, -1..1, on a grid of cells `cell` LEDs wide, with a\n// second octave of half the size at weight w2.\nfunction noise(r, cell, w2) {\n  const out = new Float32Array(N);\n  for (const [c, w] of [[cell, 1], [cell / 2, w2]]) {\n    const gw = Math.ceil(W / c) + 2, gh = Math.ceil(H / c) + 2, G = new Float32Array(gw * gh);\n    for (let i = 0; i \u003c G.length; i++) G[i] = r() * 2 - 1;\n    for (let y = 0; y \u003c H; y++) {\n      const v = y / c, j = floor(v), fy = (v - j) * (v - j) * (3 - 2 * (v - j));\n      for (let x = 0; x \u003c W; x++) {\n        const u = x / c, i = floor(u), fx = (u - i) * (u - i) * (3 - 2 * (u - i)), a = G[j * gw + i], b = G[j * gw + i + 1], e = G[(j + 1) * gw + i], d = G[(j + 1) * gw + i + 1];\n        out[y * W + x] += (w * (a + (b - a) * fx + (e + (d - e) * fx - a - (b - a) * fx) * fy)) / (1 + w2);\n      }\n    }\n  }\n  return out;\n}\n\n// Where the pores touch: each the best of four tries at standing clear of\n// the ones before it, so the first n are spread out for any n.\nfunction pores(seed) {\n  const r = rng(seed ^ 0x5bd1e995), out = [];\n  for (let i = 0; i \u003c 80; i++) {\n    let best = null, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      const x = r() * (W + 6) - 3, y = r() * (H + 6) - 3;\n      let d = 1e9;\n      for (const o of out) d = min(d, (o.x - x) ** 2 + (o.y - y) ** 2);\n      if (d > bd) {\n        bd = d;\n        best = { x, y };\n      }\n    }\n    // How fast it wicks, and a share of the time it touches.\n    best.k = 0.75 + 0.5 * r();\n    best.r = 0.85 + 0.3 * r();\n    out.push(best);\n  }\n  return out;\n}\n\n// For every LED, the pore whose oil reaches it first: when that spot opened,\n// how fast it spreads and how far the LED is from it. Lucas-Washburn: a spot's\n// radius is k sqrt(t - t0), so the oil reaches distance d at t0 + (d / k)^2.\n// Distance is stretched across the grain, cut short along the fibres and\n// roughened by the cockle.\nfunction wick(S) {\n  const { F, nz } = S.cur, P = S.pores.slice(0, S.n), al = sqrt(1 + 1.5 * S.grain), T0 = S.T0, K = S.K, D = S.D;\n  // The first pores touch 0.4 s after the press and the rest follow over\n  // LATE seconds, each later one where the sheet is still dry.\n  P.forEach((o, i) => (o.t0 = 0.4 + LATE * (i / S.n) ** 1.4 * o.r));\n  // Each pore's k scaled so that n spots together open RATE LEDs a second.\n  let sk = 0;\n  for (const o of P) sk += o.k * o.k;\n  const kk = sqrt(RATE / (PI * sk)), arr = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, rough = 1 + 0.3 * nz[p], ahead = AHEAD * F[p];\n      let bt = 1e9, bi = 0, bd = 0;\n      for (let i = 0; i \u003c P.length; i++) {\n        const o = P[i], dx = (x - o.x) * al, dy = (y - o.y) / al;\n        const d = max(0, sqrt(dx * dx + dy * dy) * rough - ahead), k = o.k * kk, t = o.t0 + (d / k) * (d / k);\n        if (t \u003c bt) {\n          bt = t;\n          bi = i;\n          bd = d;\n        }\n      }\n      T0[p] = P[bi].t0;\n      K[p] = P[bi].k * kk;\n      D[p] = bd;\n      arr[p] = bt;\n    }\n  // The hold starts when nine tenths of the sheet has been reached.\n  arr.sort();\n  S.full = arr[floor(0.9 * N)];\n}\n\nfunction lay(S, seed) {\n  S.cur = sheet(seed, S.grain);\n  S.pores = pores(seed);\n  S.next = sheet(seed + 7919, S.grain);\n  wick(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 20, grain: 0.06, t: 0, phase: 0, slide: 0, seed: floor(Math.random() * 1e9), begun: false,\n    T0: new Float32Array(N), K: new Float32Array(N), D: new Float32Array(N), V: new Float32Array(N), C: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 20, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const n = round(cl(k[2], 20, 80)), grain = cl(k[3], 0, 1);\n  if (!S.begun) {\n    S.n = n;\n    S.grain = grain;\n    lay(S, S.seed);\n    S.begun = true;\n  } else if (abs(grain - S.grain) > 0.01) {\n    S.grain = grain;\n    S.n = n;\n    S.cur = sheet(S.cur.seed, grain);\n    S.next = sheet(S.cur.seed + 7919, grain);\n    wick(S);\n  } else if (n !== S.n) {\n    S.n = n;\n    wick(S);\n  }\n  if (S.phase === 0) {\n    S.t += (d * S.speed) / 2;\n    if (S.t > S.full + HOLD) S.phase = 1;\n  } else {\n    // A fresh sheet slides down over the old one.\n    S.slide += d / SLIDE;\n    if (S.slide >= 1) {\n      S.phase = 0;\n      S.slide = 0;\n      S.t = 0;\n      S.seed = (S.seed + 7919) >>> 0;\n      S.cur = S.next;\n      S.pores = pores(S.seed);\n      S.next = sheet(S.seed + 7919, S.grain);\n      wick(S);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { T0, K, D, V, C } = S, t = S.t, h = S.hue + H0, hh = h - floor(h);\n  const pure = [0, 0, 0];\n  {\n    const x = hh * 6, i = floor(x) % 6, f = x - floor(x);\n    pure[0] = [1, 1 - f, 0, 0, f, 1][i];\n    pure[1] = [f, 1, 1, 1 - f, 0, 0][i];\n    pure[2] = [0, 0, f, 1, 1, 1 - f][i];\n  }\n  // Orange and yellow paper goes brown when dim: there the dry paper is\n  // lifted and paled.\n  const warm = cl(1.6 - abs(hh - 0.12) / 0.1, 0, 1);\n  const dryV = DRY * (1 + 0.5 * warm), dryS = 0.2 - 0.15 * warm, clrS = 0.56 - 0.1 * warm;\n  // Each LED's brightness is its dry level until the oil reaches it and then\n  // rises once, smoothly, to its clear level; nothing else on the sheet moves.\n  const { F, g, fl } = S.cur;\n  for (let y = 0; y \u003c H; y++) {\n    const vy = (y - 63.5) / 92;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vx = (x - 31.5) / 46, wall = 0.84 + 0.16 * (1 - vx * vx - vy * vy);\n      const m = K[p] * sqrt(max(0, t - T0[p])) - D[p], age = t - T0[p] - (D[p] / K[p]) ** 2;\n      let s = cl(m / FRONT + 0.5, 0, 1);\n      s = s * s * (3 - 2 * s);\n      // Behind the front the paper keeps soaking up oil and clears further.\n      const soak = age > 0 ? 1 - exp(-age / SOAK) : 0;\n      const f = F[p], dry = dryV * wall * (1 + 0.5 * (f - 0.25) + 0.05 * g[p] + 0.06 * fl[p]), clr = CLEAR * wall * (1 - 0.17 * f + 0.03 * g[p] + 0.11 * fl[p]);\n      V[p] = dry + (clr - dry) * (0.68 * s + 0.32 * soak);\n      // The wet front carries a deeper rim of tint; it changes the colour,\n      // not the brightness.\n      C[p] = dryS + (clrS - dryS) * s + 1.2 * s * (1 - s);\n    }\n  }\n  const edge = S.phase === 1 ? round(H * (1 - (1 - S.slide) ** 3)) : -1, nf = S.next.F, ng = S.next.g, nl = S.next.fl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = V[p], c = C[p];\n      if (y \u003c edge) {\n        // The fresh sheet, dry, its fibres sliding down with it.\n        const q = (y - edge + H) * W + x, vx = (x - 31.5) / 46, vy = (y - 63.5) / 92;\n        v = dryV * (0.84 + 0.16 * (1 - vx * vx - vy * vy)) * (1 + 0.5 * (nf[q] - 0.25) + 0.05 * ng[q] + 0.06 * nl[q]);\n        c = dryS;\n        if (y === edge - 1) v *= 1.5;\n      } else if (edge >= 0 && y - edge \u003c 3) v *= 0.45 + 0.18 * (y - edge);\n      v = min(1, v);\n      display.setPixel(x, y, round(255 * v * (1 - c + c * pure[0])), round(255 * v * (1 - c + c * pure[1])), round(255 * v * (1 - c + c * pure[2])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Pores=20..80, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the paper's tint round the whole wheel; the dry paper is a dim pale tint and the clear spots the same hue, deeper. At 0 rose, at 0.05 red, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale yellow, 0.3 lime, 0.4 green, 0.5 aqua, 0.6 sky blue, 0.7 blue, 0.8 violet, 0.9 orchid. From 0.02 to 0.34 the dry paper is lifted up to 1.5 times and paled toward grey and the spots a little paler, so red, orange and yellow paper never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first pores touch 0.4 s after a sheet is pressed and the last about 6.5 s after; a tenth of the sheet is clear by 2.5 s, half by 6.7 s and nine tenths by 13 s, then it holds 2.5 s and a fresh sheet slides down in 1.4 s, about 16 s a sheet. At 0.2 the wicking is ten times slower, at 3 one and a half times faster; the slide always takes 1.4 s."},{"name":"Pores","min":20,"max":80,"about":"How many pores touch the sheet, each later one where the paper is still dry: 20 at the start, whose widest spots reach about 45 LEDs across before they meet, up to 80 at the top, about 24 across. Each spot's radius goes as the square root of its age, and the more pores, the slower each one spreads, so the sheet clears in about the same time."},{"name":"Grain","min":0,"max":1,"about":"How far the fibres line up along the panel. Up to 0.06 they lie every which way and the spots stay round; at 1 nearly all run up and down, nearly twice as long, and the oil runs along them two and a half times as fast as across, so the spots stretch into tall ovals and the clear patches join in columns."}],"start":[0,2,20,0.06],"measures":{"motion":0.0572,"detail":0.0504,"edges":0.1413,"complexity":1.9288,"coverage":1,"colour":0.225,"drift":0.3434},"knobResponse":[0.1516,0.0572,0.0394,0.0465]},{"slug":"bokeh","title":"Bokeh","family":"light","round":1,"note":"초점이 나간 밤거리 불빛이에요. 여섯 모 진 빛 원반이 피었다 흘러가며 겹친 자리만 부드럽게 밝아져요.","idea":"A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.","buttons":"K1 tap racks the focus through, so every disc closes to a point and opens out again.","code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","layer":{"id":"layer-bokeh","type":"code","name":"bokeh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them."},{"name":"Pace","min":0.2,"max":4,"about":"How fast the lights drift past and how quickly each one blooms and goes out."},{"name":"Size","min":-1,"max":1,"about":"How far out of focus they are, from small bright points to wide soft discs."},{"name":"Lights","min":40,"max":90,"about":"How many are lit at once; big discs come in fewer."}],"start":[0,2,0,40],"measures":{"motion":0.9868,"detail":0.0384,"edges":0.1836,"complexity":1.7001,"coverage":0.5358,"colour":0.318,"drift":0.3822},"knobResponse":[0.2498,0.2782,0.2491,0.2757]},{"slug":"borromean-rings","title":"Borromean Rings","family":"topology","round":33,"note":"테이트의 보로메오 고리를 황금 직사각형 세 장으로 만들고 세로로 2.3배 늘여 세웠어요. 하늘색 고리가 키 크게 서고 분홍 고리가 그것을 가로지르며 연두 고리가 허리를 둘러 20초에 한 바퀴 돌고, 앞 관이 뒤 관을 지나는 자리마다 LED 한 줄이 어두워져 위아래가 읽혀요. K3 은 직사각형의 긴 변 비를 1.618 에서 2.4 까지 바꾸고, K1 을 누르면 분홍 고리가 사라진 동안 연두 고리가 긴 고리 아래 끝으로 빠져나갔다 돌아와요.","idea":"Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.","buttons":"K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.","code":"// ===== Patternflow pattern =====\n// Title:   Borromean Rings\n// Family:  topology\n// Idea:    Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Borromean rings (Peter Guthrie Tait, 1876), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown.\n// Knob 2: Speed. How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower.\n// Knob 3: Aspect. Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side.\n// Knob 4: Tube. How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching.\n// Buttons: K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The model, short side a = 1. Each ring lies in one coordinate plane:\n//   R1 in x = 0, half sides z1 = r and y1 = SIG,\n//   R2 in z = 0, half sides x2 = 1 and y2 = SIG r (the tall one),\n//   R3 in y = 0, half sides x3 = r and z3 = 1 (the flat one round the waist).\n// Unstretched (SIG = 1, r = phi) these are Tait's three golden rectangles.\n// The link only asks y1 \u003c y2, x2 \u003c x3 and z3 \u003c z1: along each axis one ring\n// passes through the next. Stretching along y keeps all three, so the model\n// can be drawn 2.3 times as tall, which the 64 x 128 panel needs: unstretched\n// it fits a cube and would light a band about 50 rows high.\nconst SIG = 2.3;\n// Corners rounded to 0.4 of the short side, the camera 12 units away.\nconst RC = 0.4, CAM = 12;\n// Light from the upper left and in front, and the half vector for the shine.\nconst LX = -0.48, LY = -0.62, LZ = -0.62, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst lx = LX * LN, ly = LY * LN, lz = LZ * LN;\nconst HX = lx, HY = ly, HZ = lz - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\nconst hx = HX * HN, hy = HY * HN, hz = HZ * HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points round a rounded rectangle with half sides A (along u) and B (along\n// v), about one every `step`, as (u, v) pairs. Four sides and four arcs.\nfunction loop(A, B, c, step, out) {\n  let n = 0;\n  const side = (u0, v0, u1, v1) => {\n    const len = sqrt((u1 - u0) ** 2 + (v1 - v0) ** 2), k = max(1, ceil(len / step));\n    for (let i = 0; i \u003c k; i++) (out[n++] = u0 + ((u1 - u0) * i) / k), (out[n++] = v0 + ((v1 - v0) * i) / k);\n  };\n  const arc = (cu, cv, a0) => {\n    const k = max(2, ceil((c * PI) / 2 / step));\n    for (let i = 0; i \u003c k; i++) {\n      const a = a0 + ((PI / 2) * i) / k;\n      out[n++] = cu + c * cos(a);\n      out[n++] = cv + c * sin(a);\n    }\n  };\n  const a = A - c, b = B - c;\n  side(A, -b, A, b);\n  arc(a, b, 0);\n  side(a, B, -a, B);\n  arc(-a, b, PI / 2);\n  side(-A, b, -A, -b);\n  arc(-a, -b, PI);\n  side(-a, -B, a, -B);\n  arc(a, -b, 1.5 * PI);\n  return n >> 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    turn: 0.6, nod: 0, hue: 0, speed: 2, r: 1.618, tube: 0.06, cut: -1,\n    z: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    c: [new Float32Array(N * 3), new Float32Array(N * 3), new Float32Array(N * 3)],\n    fid: new Int8Array(N), fz: new Float32Array(N), uv: new Float32Array(8192), pts: new Float32Array(16384), col: new Float32Array(9),\n  };\n}\n\n// K1 tap, seconds: R1 fades 0 to 0.8, the other two slide apart to 3.0,\n// hold to 4.4, slide back to 6.6, R1 returns by 7.4.\nconst T_END = 7.4;\nfunction cutState(t) {\n  if (t \u003c 0) return [1, 0, 0];\n  const fade = t \u003c 0.8 ? 1 - sm(t / 0.8) : t \u003c 6.6 ? 0 : sm((t - 6.6) / 0.8);\n  const sep = t \u003c 0.8 ? 0 : t \u003c 3 ? sm((t - 0.8) / 2.2) : t \u003c 4.4 ? 1 : t \u003c 6.6 ? 1 - sm((t - 4.4) / 2.2) : 0;\n  return [fade, sep, sm(t / 1.2) * (1 - sm((t - 6.2) / 1.2))];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1.618, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.r = cl(k[2], 1.618, 2.4);\n  P.tube = cl(k[3], 0, 1);\n  P.turn += d * P.speed * 0.157;\n  P.nod += d * P.speed * 0.116;\n  if (P.cut >= 0) {\n    P.cut += d;\n    if (P.cut > T_END) P.cut = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.cut \u003c 0) P.cut = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const r = P.r, ZB = P.z, CB = P.c, uv = P.uv, pts = P.pts, col = P.col, fid = P.fid, fz = P.fz;\n  // The room where a ring passes through the next: one short side, or r - 1\n  // of it where the long side is shorter than two.\n  const room = min(1, r - 1), tr = (0.29 + 0.16 * P.tube) * room;\n  // LEDs to a unit: the flat ring's corners swing out to rxz from the axis,\n  // and the panel is 64 across; the tall ring is SIG r high each side of the\n  // middle, and the panel is 128 tall.\n  const rxz = sqrt((r - RC) ** 2 + (1 - RC) ** 2) + RC + tr;\n  const S = min(27 / rxz, 55 / (SIG * r + tr));\n  const [fade, sep, low] = cutState(P.cut);\n  // With R1 gone the flat ring drops down the tall ring until it\n  // clears the bottom end with 0.6 of a unit of air between the tubes, and\n  // the tall ring rises a little to meet it.\n  const drop = sep * (SIG * r + 2 * tr + 0.6);\n  const up2 = drop * 0.2, down3 = drop * 0.8;\n\n  // The rings turn round the tall ring's axis and the view looks down on them\n  // from 14 to 30 degrees, so the flat ring always shows its hole. While the\n  // rings come apart the eye sinks to 7 degrees below the middle, near the\n  // height the flat ring drops to, so the air between it and the bottom of\n  // the tall ring shows.\n  const th = P.turn, ct = cos(th), st = sin(th);\n  const el = (0.38 + 0.14 * sin(P.nod)) * (1 - low) - 0.12 * low, ce = cos(el), se = sin(el);\n\n  for (let i = 0; i \u003c 9; i += 3) hsv(P.hue + 0.58 + (i / 9), 0.8, 1, col, i);\n  // Round orange and yellow the colour goes brown in the shade, so there it\n  // keeps less saturation and more light.\n  const warm = [0, 0, 0];\n  for (let i = 0; i \u003c 3; i++) {\n    let h = P.hue + 0.58 + i / 3;\n    h -= floor(h);\n    let dh = h - 0.12;\n    if (dh > 0.5) dh -= 1;\n    warm[i] = sm(1 - abs(dh) / 0.17);\n    for (let c = 0; c \u003c 3; c++) col[i * 3 + c] += (1 - col[i * 3 + c]) * 0.45 * warm[i];\n  }\n\n  // Ring order in the buffers: 0 the tall ring (R2), 1 the one across it (R1), 2 the flat one (R3).\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const zb = ZB[ring], cb = CB[ring];\n    zb.fill(1e9);\n    let A, B;\n    if (ring === 0) (A = 1), (B = SIG * r);\n    else if (ring === 1) (A = r), (B = SIG);\n    else (A = r), (B = 1);\n    const n = loop(A, B, RC * min(A, B), tr * 0.3, uv);\n    const cr = col[ring * 3], cg = col[ring * 3 + 1], cbl = col[ring * 3 + 2], wl = warm[ring];\n    // Every point on screen first, so each can see its neighbours for the\n    // tube's direction.\n    for (let i = 0; i \u003c n; i++) {\n      const u = uv[i * 2], v = uv[i * 2 + 1];\n      let X, Y, Z;\n      if (ring === 0) (X = u), (Y = v + up2), (Z = 0);\n      else if (ring === 1) (X = 0), (Y = v), (Z = u);\n      else (X = u), (Y = -down3), (Z = v);\n      // Turn about y, then tip the view down by el.\n      const xr = X * ct + Z * st, zr = -X * st + Z * ct;\n      const up = Y * ce + zr * se, dep = zr * ce - Y * se;\n      const sc = (S * CAM) / (CAM + dep);\n      pts[i * 4] = 31.5 + xr * sc;\n      pts[i * 4 + 1] = 63.5 - up * sc;\n      pts[i * 4 + 2] = dep * S;\n      pts[i * 4 + 3] = tr * sc;\n    }\n    for (let i = 0; i \u003c n; i++) {\n      const o = i * 4, sx = pts[o], sy = pts[o + 1], dz = pts[o + 2], rp = pts[o + 3];\n      const a = ((i + 1) % n) * 4, b = ((i + n - 1) % n) * 4;\n      let tx = pts[a] - pts[b], ty = pts[a + 1] - pts[b + 1], tz = pts[a + 2] - pts[b + 2];\n      const tl = 1 / (sqrt(tx * tx + ty * ty + tz * tz) + 1e-9);\n      (tx *= tl), (ty *= tl), (tz *= tl);\n      // Nearer is brighter: a quarter darker at the back of the rings.\n      const fog = 1 - 0.25 * cl((dz / S + 2) / 4, 0, 1);\n      const x0 = max(0, floor(sx - rp)), x1 = min(W - 1, ceil(sx + rp)), y0 = max(0, floor(sy - rp)), y1 = min(H - 1, ceil(sy + rp));\n      const r2 = rp * rp;\n      for (let y = y0; y \u003c= y1; y++) {\n        const ny = y - sy, ny2 = ny * ny;\n        for (let x = x0; x \u003c= x1; x++) {\n          const nx = x - sx, d2 = nx * nx + ny2;\n          if (d2 >= r2) continue;\n          const nzp = sqrt(r2 - d2), z = dz - nzp, p = y * W + x;\n          if (z >= zb[p]) continue;\n          zb[p] = z;\n          // The tube is drawn as a chain of spheres, but the normal is the\n          // tube's: the sphere's, less its part along the tube.\n          const dt = nx * tx + ny * ty - nzp * tz;\n          let Nx = nx - dt * tx, Ny = ny - dt * ty, Nz = -nzp - dt * tz;\n          const nl = 1 / (sqrt(Nx * Nx + Ny * Ny + Nz * Nz) + 1e-9);\n          (Nx *= nl), (Ny *= nl), (Nz *= nl);\n          const dif = max(0, Nx * lx + Ny * ly + Nz * lz);\n          const hv = max(0, Nx * hx + Ny * hy + Nz * hz), sp = hv ** 24 * 0.85;\n          const lit = (0.2 + 0.3 * wl + 0.8 * dif) * fog;\n          cb[p * 3] = cr * lit + sp;\n          cb[p * 3 + 1] = cg * lit + sp;\n          cb[p * 3 + 2] = cbl * lit + sp;\n        }\n      }\n    }\n  }\n\n  // The nearest solid ring at each LED, for the gaps.\n  const al = [1, fade, 1];\n  for (let p = 0; p \u003c N; p++) {\n    let best = -1, bz = 1e9;\n    for (let ring = 0; ring \u003c 3; ring++) if (al[ring] > 0.5 && ZB[ring][p] \u003c bz) (bz = ZB[ring][p]), (best = ring);\n    fid[p] = best;\n    fz[p] = bz;\n  }\n  const gapDepth = tr * S * 1.1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Layers front to back: R1 fades by its alpha.\n      const z0 = ZB[0][p], z1 = ZB[1][p], z2 = ZB[2][p];\n      let R = 0, G = 0, Bc = 0;\n      if (z0 \u003c 1e8 || z1 \u003c 1e8 || z2 \u003c 1e8) {\n        const ord = z0 \u003c= z1 ? (z1 \u003c= z2 ? [0, 1, 2] : z0 \u003c= z2 ? [0, 2, 1] : [2, 0, 1]) : z0 \u003c= z2 ? [1, 0, 2] : z1 \u003c= z2 ? [1, 2, 0] : [2, 1, 0];\n        let keep = 1;\n        for (let j = 0; j \u003c 3 && keep > 0.001; j++) {\n          const ring = ord[j];\n          if (ZB[ring][p] > 1e8) break;\n          const a = al[ring] * keep, cb = CB[ring];\n          R += cb[p * 3] * a;\n          G += cb[p * 3 + 1] * a;\n          Bc += cb[p * 3 + 2] * a;\n          keep -= a;\n        }\n        // A dark LED where a nearer tube of another ring passes over this\n        // one, so the crossing reads as over and under.\n        const me = fid[p];\n        if (me >= 0) {\n          const zme = fz[p];\n          let dark = 0;\n          for (let dy = -1; dy \u003c= 1; dy++) {\n            const yy = y + dy;\n            if (yy \u003c 0 || yy >= H) continue;\n            for (let dx = -1; dx \u003c= 1; dx++) {\n              const xx = x + dx;\n              if (xx \u003c 0 || xx >= W || (dx === 0 && dy === 0)) continue;\n              const q = yy * W + xx, o = fid[q];\n              if (o >= 0 && o !== me && fz[q] \u003c zme - gapDepth) dark = 1;\n            }\n          }\n          if (dark) (R *= 0.12), (G *= 0.12), (Bc *= 0.12);\n        }\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(Bc * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-borromean-rings","type":"code","name":"borromean-rings","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Borromean Rings\n// Family:  topology\n// Idea:    Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Borromean rings (Peter Guthrie Tait, 1876), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown.\n// Knob 2: Speed. How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower.\n// Knob 3: Aspect. Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side.\n// Knob 4: Tube. How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching.\n// Buttons: K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The model, short side a = 1. Each ring lies in one coordinate plane:\n//   R1 in x = 0, half sides z1 = r and y1 = SIG,\n//   R2 in z = 0, half sides x2 = 1 and y2 = SIG r (the tall one),\n//   R3 in y = 0, half sides x3 = r and z3 = 1 (the flat one round the waist).\n// Unstretched (SIG = 1, r = phi) these are Tait's three golden rectangles.\n// The link only asks y1 \u003c y2, x2 \u003c x3 and z3 \u003c z1: along each axis one ring\n// passes through the next. Stretching along y keeps all three, so the model\n// can be drawn 2.3 times as tall, which the 64 x 128 panel needs: unstretched\n// it fits a cube and would light a band about 50 rows high.\nconst SIG = 2.3;\n// Corners rounded to 0.4 of the short side, the camera 12 units away.\nconst RC = 0.4, CAM = 12;\n// Light from the upper left and in front, and the half vector for the shine.\nconst LX = -0.48, LY = -0.62, LZ = -0.62, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst lx = LX * LN, ly = LY * LN, lz = LZ * LN;\nconst HX = lx, HY = ly, HZ = lz - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\nconst hx = HX * HN, hy = HY * HN, hz = HZ * HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points round a rounded rectangle with half sides A (along u) and B (along\n// v), about one every `step`, as (u, v) pairs. Four sides and four arcs.\nfunction loop(A, B, c, step, out) {\n  let n = 0;\n  const side = (u0, v0, u1, v1) => {\n    const len = sqrt((u1 - u0) ** 2 + (v1 - v0) ** 2), k = max(1, ceil(len / step));\n    for (let i = 0; i \u003c k; i++) (out[n++] = u0 + ((u1 - u0) * i) / k), (out[n++] = v0 + ((v1 - v0) * i) / k);\n  };\n  const arc = (cu, cv, a0) => {\n    const k = max(2, ceil((c * PI) / 2 / step));\n    for (let i = 0; i \u003c k; i++) {\n      const a = a0 + ((PI / 2) * i) / k;\n      out[n++] = cu + c * cos(a);\n      out[n++] = cv + c * sin(a);\n    }\n  };\n  const a = A - c, b = B - c;\n  side(A, -b, A, b);\n  arc(a, b, 0);\n  side(a, B, -a, B);\n  arc(-a, b, PI / 2);\n  side(-A, b, -A, -b);\n  arc(-a, -b, PI);\n  side(-a, -B, a, -B);\n  arc(a, -b, 1.5 * PI);\n  return n >> 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    turn: 0.6, nod: 0, hue: 0, speed: 2, r: 1.618, tube: 0.06, cut: -1,\n    z: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    c: [new Float32Array(N * 3), new Float32Array(N * 3), new Float32Array(N * 3)],\n    fid: new Int8Array(N), fz: new Float32Array(N), uv: new Float32Array(8192), pts: new Float32Array(16384), col: new Float32Array(9),\n  };\n}\n\n// K1 tap, seconds: R1 fades 0 to 0.8, the other two slide apart to 3.0,\n// hold to 4.4, slide back to 6.6, R1 returns by 7.4.\nconst T_END = 7.4;\nfunction cutState(t) {\n  if (t \u003c 0) return [1, 0, 0];\n  const fade = t \u003c 0.8 ? 1 - sm(t / 0.8) : t \u003c 6.6 ? 0 : sm((t - 6.6) / 0.8);\n  const sep = t \u003c 0.8 ? 0 : t \u003c 3 ? sm((t - 0.8) / 2.2) : t \u003c 4.4 ? 1 : t \u003c 6.6 ? 1 - sm((t - 4.4) / 2.2) : 0;\n  return [fade, sep, sm(t / 1.2) * (1 - sm((t - 6.2) / 1.2))];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1.618, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.r = cl(k[2], 1.618, 2.4);\n  P.tube = cl(k[3], 0, 1);\n  P.turn += d * P.speed * 0.157;\n  P.nod += d * P.speed * 0.116;\n  if (P.cut >= 0) {\n    P.cut += d;\n    if (P.cut > T_END) P.cut = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.cut \u003c 0) P.cut = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const r = P.r, ZB = P.z, CB = P.c, uv = P.uv, pts = P.pts, col = P.col, fid = P.fid, fz = P.fz;\n  // The room where a ring passes through the next: one short side, or r - 1\n  // of it where the long side is shorter than two.\n  const room = min(1, r - 1), tr = (0.29 + 0.16 * P.tube) * room;\n  // LEDs to a unit: the flat ring's corners swing out to rxz from the axis,\n  // and the panel is 64 across; the tall ring is SIG r high each side of the\n  // middle, and the panel is 128 tall.\n  const rxz = sqrt((r - RC) ** 2 + (1 - RC) ** 2) + RC + tr;\n  const S = min(27 / rxz, 55 / (SIG * r + tr));\n  const [fade, sep, low] = cutState(P.cut);\n  // With R1 gone the flat ring drops down the tall ring until it\n  // clears the bottom end with 0.6 of a unit of air between the tubes, and\n  // the tall ring rises a little to meet it.\n  const drop = sep * (SIG * r + 2 * tr + 0.6);\n  const up2 = drop * 0.2, down3 = drop * 0.8;\n\n  // The rings turn round the tall ring's axis and the view looks down on them\n  // from 14 to 30 degrees, so the flat ring always shows its hole. While the\n  // rings come apart the eye sinks to 7 degrees below the middle, near the\n  // height the flat ring drops to, so the air between it and the bottom of\n  // the tall ring shows.\n  const th = P.turn, ct = cos(th), st = sin(th);\n  const el = (0.38 + 0.14 * sin(P.nod)) * (1 - low) - 0.12 * low, ce = cos(el), se = sin(el);\n\n  for (let i = 0; i \u003c 9; i += 3) hsv(P.hue + 0.58 + (i / 9), 0.8, 1, col, i);\n  // Round orange and yellow the colour goes brown in the shade, so there it\n  // keeps less saturation and more light.\n  const warm = [0, 0, 0];\n  for (let i = 0; i \u003c 3; i++) {\n    let h = P.hue + 0.58 + i / 3;\n    h -= floor(h);\n    let dh = h - 0.12;\n    if (dh > 0.5) dh -= 1;\n    warm[i] = sm(1 - abs(dh) / 0.17);\n    for (let c = 0; c \u003c 3; c++) col[i * 3 + c] += (1 - col[i * 3 + c]) * 0.45 * warm[i];\n  }\n\n  // Ring order in the buffers: 0 the tall ring (R2), 1 the one across it (R1), 2 the flat one (R3).\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const zb = ZB[ring], cb = CB[ring];\n    zb.fill(1e9);\n    let A, B;\n    if (ring === 0) (A = 1), (B = SIG * r);\n    else if (ring === 1) (A = r), (B = SIG);\n    else (A = r), (B = 1);\n    const n = loop(A, B, RC * min(A, B), tr * 0.3, uv);\n    const cr = col[ring * 3], cg = col[ring * 3 + 1], cbl = col[ring * 3 + 2], wl = warm[ring];\n    // Every point on screen first, so each can see its neighbours for the\n    // tube's direction.\n    for (let i = 0; i \u003c n; i++) {\n      const u = uv[i * 2], v = uv[i * 2 + 1];\n      let X, Y, Z;\n      if (ring === 0) (X = u), (Y = v + up2), (Z = 0);\n      else if (ring === 1) (X = 0), (Y = v), (Z = u);\n      else (X = u), (Y = -down3), (Z = v);\n      // Turn about y, then tip the view down by el.\n      const xr = X * ct + Z * st, zr = -X * st + Z * ct;\n      const up = Y * ce + zr * se, dep = zr * ce - Y * se;\n      const sc = (S * CAM) / (CAM + dep);\n      pts[i * 4] = 31.5 + xr * sc;\n      pts[i * 4 + 1] = 63.5 - up * sc;\n      pts[i * 4 + 2] = dep * S;\n      pts[i * 4 + 3] = tr * sc;\n    }\n    for (let i = 0; i \u003c n; i++) {\n      const o = i * 4, sx = pts[o], sy = pts[o + 1], dz = pts[o + 2], rp = pts[o + 3];\n      const a = ((i + 1) % n) * 4, b = ((i + n - 1) % n) * 4;\n      let tx = pts[a] - pts[b], ty = pts[a + 1] - pts[b + 1], tz = pts[a + 2] - pts[b + 2];\n      const tl = 1 / (sqrt(tx * tx + ty * ty + tz * tz) + 1e-9);\n      (tx *= tl), (ty *= tl), (tz *= tl);\n      // Nearer is brighter: a quarter darker at the back of the rings.\n      const fog = 1 - 0.25 * cl((dz / S + 2) / 4, 0, 1);\n      const x0 = max(0, floor(sx - rp)), x1 = min(W - 1, ceil(sx + rp)), y0 = max(0, floor(sy - rp)), y1 = min(H - 1, ceil(sy + rp));\n      const r2 = rp * rp;\n      for (let y = y0; y \u003c= y1; y++) {\n        const ny = y - sy, ny2 = ny * ny;\n        for (let x = x0; x \u003c= x1; x++) {\n          const nx = x - sx, d2 = nx * nx + ny2;\n          if (d2 >= r2) continue;\n          const nzp = sqrt(r2 - d2), z = dz - nzp, p = y * W + x;\n          if (z >= zb[p]) continue;\n          zb[p] = z;\n          // The tube is drawn as a chain of spheres, but the normal is the\n          // tube's: the sphere's, less its part along the tube.\n          const dt = nx * tx + ny * ty - nzp * tz;\n          let Nx = nx - dt * tx, Ny = ny - dt * ty, Nz = -nzp - dt * tz;\n          const nl = 1 / (sqrt(Nx * Nx + Ny * Ny + Nz * Nz) + 1e-9);\n          (Nx *= nl), (Ny *= nl), (Nz *= nl);\n          const dif = max(0, Nx * lx + Ny * ly + Nz * lz);\n          const hv = max(0, Nx * hx + Ny * hy + Nz * hz), sp = hv ** 24 * 0.85;\n          const lit = (0.2 + 0.3 * wl + 0.8 * dif) * fog;\n          cb[p * 3] = cr * lit + sp;\n          cb[p * 3 + 1] = cg * lit + sp;\n          cb[p * 3 + 2] = cbl * lit + sp;\n        }\n      }\n    }\n  }\n\n  // The nearest solid ring at each LED, for the gaps.\n  const al = [1, fade, 1];\n  for (let p = 0; p \u003c N; p++) {\n    let best = -1, bz = 1e9;\n    for (let ring = 0; ring \u003c 3; ring++) if (al[ring] > 0.5 && ZB[ring][p] \u003c bz) (bz = ZB[ring][p]), (best = ring);\n    fid[p] = best;\n    fz[p] = bz;\n  }\n  const gapDepth = tr * S * 1.1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Layers front to back: R1 fades by its alpha.\n      const z0 = ZB[0][p], z1 = ZB[1][p], z2 = ZB[2][p];\n      let R = 0, G = 0, Bc = 0;\n      if (z0 \u003c 1e8 || z1 \u003c 1e8 || z2 \u003c 1e8) {\n        const ord = z0 \u003c= z1 ? (z1 \u003c= z2 ? [0, 1, 2] : z0 \u003c= z2 ? [0, 2, 1] : [2, 0, 1]) : z0 \u003c= z2 ? [1, 0, 2] : z1 \u003c= z2 ? [1, 2, 0] : [2, 1, 0];\n        let keep = 1;\n        for (let j = 0; j \u003c 3 && keep > 0.001; j++) {\n          const ring = ord[j];\n          if (ZB[ring][p] > 1e8) break;\n          const a = al[ring] * keep, cb = CB[ring];\n          R += cb[p * 3] * a;\n          G += cb[p * 3 + 1] * a;\n          Bc += cb[p * 3 + 2] * a;\n          keep -= a;\n        }\n        // A dark LED where a nearer tube of another ring passes over this\n        // one, so the crossing reads as over and under.\n        const me = fid[p];\n        if (me >= 0) {\n          const zme = fz[p];\n          let dark = 0;\n          for (let dy = -1; dy \u003c= 1; dy++) {\n            const yy = y + dy;\n            if (yy \u003c 0 || yy >= H) continue;\n            for (let dx = -1; dx \u003c= 1; dx++) {\n              const xx = x + dx;\n              if (xx \u003c 0 || xx >= W || (dx === 0 && dy === 0)) continue;\n              const q = yy * W + xx, o = fid[q];\n              if (o >= 0 && o !== me && fz[q] \u003c zme - gapDepth) dark = 1;\n            }\n          }\n          if (dark) (R *= 0.12), (G *= 0.12), (Bc *= 0.12);\n        }\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(Bc * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower."},{"name":"Aspect","min":1.618,"max":2.4,"about":"Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side."},{"name":"Tube","min":0,"max":1,"about":"How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching."}],"start":[0,2,1.618,0.06],"measures":{"motion":0.1873,"detail":0.0417,"edges":0.4546,"complexity":0.6755,"coverage":0.2581,"colour":0.1929,"drift":0.1053},"knobResponse":[0.1012,0.1249,0.077,0.0449]},{"slug":"borsuk-ulam","title":"Borsuk-Ulam","family":"topology","round":39,"note":"기온과 기압이 천천히 바뀌는 지구가 돌아요. 위 원판은 앞 반구, 아래 원판은 뒤 반구라서 −x 가 x 와 같은 자리에 그려지고, 대척점과 기온이 같은 흰 선과 기압이 같은 자홍 선이 두 원판의 같은 자리를 지나요. 두 선이 만나는 금색 점이 보르수크-울람 정리가 늘 있다고 하는 대척점 쌍이에요.","idea":"A turning globe carries a slowly changing temperature and pressure, the top disk showing the side that faces you and the bottom disk the far side laid so that each point sits where its antipode sits above, and the white line where the temperature equals the temperature at the antipode crosses the magenta line where the pressure does at an odd number of gold points, the same in both disks, where two opposite places on the Earth have the same weather.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Borsuk-Ulam\n// Family:  topology\n// Idea:    A turning globe carries a slowly changing temperature and pressure, the top disk showing the side that faces you and the bottom disk the far side laid so that each point sits where its antipode sits above, and the white line where the temperature equals the temperature at the antipode crosses the magenta line where the pressure does at an odd number of gold points, the same in both disks, where two opposite places on the Earth have the same weather.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Borsuk-Ulam theorem (Karol Borsuk, 1933, after a question of Stanisław Ulam)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Degree=3..6, Speed=0.2..3, Weather=0..1, Hue=0..1\n//\n// Knob 1: Degree. The highest degree of the random spherical harmonics in both fields, the next degree fading in between whole numbers. The two curves hang only on the odd degrees, so at 3 they are cubic curves and meet at 1 to 9 pairs, 2.8 on average: one pair 36% of the time, three 42%, five 19%, seven 3%. 4 adds a finer even layer to the colours and the isobars and leaves the curves cubic; at 5 and 6 the curves are quintic, wind into loops and meet at up to 25 pairs, about 5 on average.\n// Knob 2: Speed. How fast the globe turns: at 2 once in 20 seconds round an axis leaning 24 degrees toward you, at 0.2 once in 200 seconds, at 3 once in 13. The curves and the pairs turn with it; a pair that slips over the rim comes back at once on the opposite rim, where its other point is rising.\n// Knob 3: Weather. How fast the temperature and the pressure change. At 0 each coefficient swings once in 56 to 168 seconds, the curves creep and a pair of pairs is born or dies about 12 times a minute at Degree 3; at 1 eight times faster, 7 to 21 seconds, about 74 times a minute. Pairs come and go two at a time, where the curves touch, so the count stays odd.\n// Knob 4: Hue. Turns the palette: at the start azure for cold and orange for warm with a magenta pressure curve; at 0.25 violet and green with red; at 0.5 red and cyan with green; at 0.75 green and violet with cyan. The temperature curve stays white and the pairs gold. Where cold or warm lands on orange or yellow the pale bands are lifted toward full brightness, so they never go brown or olive.\n\n// Each disk sits in a 64 x 64 square, the near side above the far side.\nconst S2 = 64;\nconst { floor, min, abs, sqrt, sin, cos, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The disks: radius RAD about the centre of each 64 x 64 square.\nconst RAD = 31, CX = 32, CY = 32;\n// Each field is a sum over AX zonal harmonics sqrt(2l+1) P_l(u . x) for every\n// degree l up to LMAX, each axis u wandering on a great circle.\nconst AX = 5, LMAX = 6;\n// The globe turns round an axis leaning TILT toward you.\nconst TILT = 0.42;\n// Grid seeds for Newton's method each frame, over one hemisphere.\nconst SEEDS = 72;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nfunction unit() {\n  for (;;) {\n    const x = 2 * random() - 1, y = 2 * random() - 1, z = 2 * random() - 1, r = x * x + y * y + z * z;\n    if (r > 0.01 && r \u003c 1) {\n      const k = 1 / sqrt(r);\n      return [x * k, y * k, z * k];\n    }\n  }\n}\n\n// One field: per axis a great circle (two orthonormal vectors and a speed)\n// and per degree a coefficient swinging with its own speed and phase.\nfunction field() {\n  const F = { e: [], w: [], amp: [], om: [], ph: [], u: new Float64Array(3 * AX), c: new Float64Array(AX * (LMAX + 1)) };\n  for (let j = 0; j \u003c AX; j++) {\n    const a = unit(), b0 = unit();\n    const d = a[0] * b0[0] + a[1] * b0[1] + a[2] * b0[2];\n    const b = [b0[0] - d * a[0], b0[1] - d * a[1], b0[2] - d * a[2]], bl = Math.hypot(b[0], b[1], b[2]);\n    F.e.push([a, [b[0] / bl, b[1] / bl, b[2] / bl], random() * TAU]);\n    F.w.push((0.08 + 0.12 * random()) * (random() \u003c 0.5 ? -1 : 1));\n    for (let l = 0; l \u003c= LMAX; l++) {\n      F.amp.push(l === 0 ? 0 : (random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.4 * random()));\n      F.om.push(0.15 + 0.3 * random());\n      F.ph.push(random() * TAU);\n    }\n  }\n  return F;\n}\n\n// Axes and coefficients at weather time t, with degree l weighted by how far\n// the Degree knob has come past it.\nfunction place(F, t, deg) {\n  for (let j = 0; j \u003c AX; j++) {\n    const [a, b, p] = F.e[j], th = p + F.w[j] * t, cs = cos(th), sn = sin(th);\n    for (let i = 0; i \u003c 3; i++) F.u[3 * j + i] = a[i] * cs + b[i] * sn;\n    for (let l = 1; l \u003c= LMAX; l++) {\n      const q = j * (LMAX + 1) + l, fade = cl(deg - l + 1, 0, 1);\n      F.c[q] = (fade * F.amp[q] * sqrt(2 * l + 1) * sin(F.om[q] * t + F.ph[q])) / Math.pow(l, 0.3);\n    }\n  }\n}\n\n// Even and odd parts of a field at unit vector x, and the gradient of the odd\n// part when grad is given: f(x) = even + odd, f(-x) = even - odd.\nfunction evalField(F, x, y, z, L, out, grad) {\n  let ev = 0, od = 0, gx = 0, gy = 0, gz = 0;\n  for (let j = 0; j \u003c AX; j++) {\n    const ux = F.u[3 * j], uy = F.u[3 * j + 1], uz = F.u[3 * j + 2], s = ux * x + uy * y + uz * z, base = j * (LMAX + 1);\n    let p0 = 1, p1 = s, d0 = 0, d1 = 1, o = F.c[base + 1] * p1, e = 0, dd = F.c[base + 1];\n    for (let l = 1; l \u003c L; l++) {\n      const p2 = ((2 * l + 1) * s * p1 - l * p0) / (l + 1), d2 = d0 + (2 * l + 1) * p1, c = F.c[base + l + 1];\n      if ((l + 1) & 1) {\n        o += c * p2;\n        dd += c * d2;\n      } else e += c * p2;\n      p0 = p1;\n      p1 = p2;\n      d0 = d1;\n      d1 = d2;\n    }\n    ev += e;\n    od += o;\n    if (grad) {\n      gx += dd * ux;\n      gy += dd * uy;\n      gz += dd * uz;\n    }\n  }\n  out[0] = ev;\n  out[1] = od;\n  if (grad) {\n    grad[0] = gx;\n    grad[1] = gy;\n    grad[2] = gz;\n  }\n}\n\nexport function setup(params) {\n  const P = S2 * S2;\n  // World direction of each pixel of the top square: x right, y up, z\n  // toward you, pulled onto the rim outside the disk.\n  const wx = new Float32Array(P), wy = new Float32Array(P), wz = new Float32Array(P), cov = new Float32Array(P);\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x, u = (x + 0.5 - CX) / RAD, v = (CY - y - 0.5) / RAD, r = sqrt(u * u + v * v);\n      cov[p] = cl((1 - r) * RAD + 0.5, 0, 1);\n      if (r \u003c 1) {\n        wx[p] = u;\n        wy[p] = v;\n        wz[p] = sqrt(1 - r * r);\n      } else {\n        wx[p] = u / r;\n        wy[p] = v / r;\n        wz[p] = 0;\n      }\n    }\n  // Seeds: a Fibonacci spiral over the upper hemisphere.\n  const seeds = [];\n  for (let i = 0; i \u003c SEEDS; i++) {\n    const z = (i + 0.5) / SEEDS, r = sqrt(1 - z * z), a = i * 2.39996323;\n    seeds.push([r * cos(a), r * sin(a), z]);\n  }\n  params.s = {\n    init: false, t: 0, wt: 0, deg: 3, L: 3, f: field(), g: field(), wx, wy, wz, cov, seeds,\n    fe: new Float32Array(P), fo: new Float32Array(P), ge: new Float32Array(P), go: new Float32Array(P),\n    lf: new Float32Array(P), lg: new Float32Array(P), roots: [], M: [1, 0, 0, 0, 1, 0, 0, 0, 1], hue: 0.06,\n    o1: [0, 0], o2: [0, 0], g1: [0, 0, 0], g2: [0, 0, 0], c: [0, 0, 0], d: [0, 0, 0],\n  };\n}\n\n// Newton's method on the sphere for fodd = godd = 0: the step is the\n// smallest tangent move that zeroes both linearised, taken from x and pulled\n// back onto the sphere.\nfunction newton(S, x0) {\n  let x = x0[0], y = x0[1], z = x0[2];\n  const { o1, o2, g1, g2 } = S;\n  for (let it = 0; it \u003c 24; it++) {\n    evalField(S.f, x, y, z, S.L, o1, g1);\n    evalField(S.g, x, y, z, S.L, o2, g2);\n    const F1 = o1[1], F2 = o2[1];\n    if (abs(F1) \u003c 1e-13 && abs(F2) \u003c 1e-13) return [x, y, z];\n    const d1 = g1[0] * x + g1[1] * y + g1[2] * z, d2 = g2[0] * x + g2[1] * y + g2[2] * z;\n    const ax = g1[0] - d1 * x, ay = g1[1] - d1 * y, az = g1[2] - d1 * z;\n    const bx = g2[0] - d2 * x, by = g2[1] - d2 * y, bz = g2[2] - d2 * z;\n    const a = ax * ax + ay * ay + az * az, b = ax * bx + ay * by + az * bz, c = bx * bx + by * by + bz * bz, det = a * c - b * b;\n    if (det \u003c 1e-14) return null;\n    const al = (-F1 * c + F2 * b) / det, be = (-F2 * a + F1 * b) / det;\n    let sx = al * ax + be * bx, sy = al * ay + be * by, sz = al * az + be * bz;\n    const sl = sqrt(sx * sx + sy * sy + sz * sz);\n    if (sl > 0.35) {\n      sx *= 0.35 / sl;\n      sy *= 0.35 / sl;\n      sz *= 0.35 / sl;\n    }\n    x += sx;\n    y += sy;\n    z += sz;\n    const n = 1 / sqrt(x * x + y * y + z * z);\n    x *= n;\n    y *= n;\n    z *= n;\n  }\n  evalField(S.f, x, y, z, S.L, o1);\n  evalField(S.g, x, y, z, S.L, o2);\n  return abs(o1[1]) \u003c 1e-10 && abs(o2[1]) \u003c 1e-10 ? [x, y, z] : null;\n}\n\n// All antipodal pairs, by Newton's method from three kinds of start: last\n// frame's pairs, every 2 x 2 block of LEDs on the near side where both odd\n// parts change sign, and a fixed spiral of seeds; each pair kept once.\nfunction findRoots(S) {\n  const found = [];\n  const add = (r) => {\n    if (!r) return;\n    for (const q of found) {\n      const d = (q[0] - r[0]) ** 2 + (q[1] - r[1]) ** 2 + (q[2] - r[2]) ** 2, e = (q[0] + r[0]) ** 2 + (q[1] + r[1]) ** 2 + (q[2] + r[2]) ** 2;\n      if (d \u003c 1e-8 || e \u003c 1e-8) return;\n    }\n    found.push(r);\n  };\n  for (const r of S.roots) add(newton(S, r));\n  const { fo, go, wx, wy, wz, M } = S;\n  for (let y = 0; y \u003c S2 - 1; y++)\n    for (let x = 0; x \u003c S2 - 1; x++) {\n      const p = y * S2 + x, q = [p, p + 1, p + S2, p + S2 + 1];\n      let fp = 0, fn = 0, gp = 0, gn = 0;\n      for (const i of q) {\n        if (fo[i] > 0) fp = 1;\n        else fn = 1;\n        if (go[i] > 0) gp = 1;\n        else gn = 1;\n      }\n      if (!(fp && fn && gp && gn)) continue;\n      const X = wx[p], Y = wy[p], Z = wz[p];\n      add(newton(S, [M[0] * X + M[1] * Y + M[2] * Z, M[3] * X + M[4] * Y + M[5] * Z, M[6] * X + M[7] * Y + M[8] * Z]));\n    }\n  for (const s of S.seeds) add(newton(S, s));\n  S.roots = found;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.deg = cl(k[0], 3, 6);\n  S.L = Math.ceil(S.deg - 1e-9);\n  const speed = cl(k[1], 0.2, 3), weather = 0.25 + 1.75 * cl(k[2], 0, 1);\n  S.hue = k[3];\n  S.t += d * speed;\n  S.wt += d * weather;\n  place(S.f, S.wt + 3, S.deg);\n  place(S.g, S.wt + 3, S.deg);\n  // Body from world: undo the lean, then the turn.\n  const ph = S.t * 0.025 * TAU, cp = cos(ph), sp = sin(ph), ct = cos(TILT), st = sin(TILT);\n  // World = Rx(TILT) Ry(ph) body; body = Ry(-ph) Rx(-TILT) world.\n  // Rx(-TILT): (x, y, z) -> (x, ct y + st z, -st y + ct z).\n  // Ry(-ph): (x, y, z) -> (cp x - sp z, y, sp x + cp z).\n  S.M = [cp, sp * st, -sp * ct, 0, ct, st, sp, -cp * st, cp * ct];\n  const { wx, wy, wz, fe, fo, ge, go, o1, o2, M } = S, L = S.L;\n  for (let p = 0; p \u003c S2 * S2; p++) {\n    const X = wx[p], Y = wy[p], Z = wz[p];\n    const x = M[0] * X + M[1] * Y + M[2] * Z, y = M[3] * X + M[4] * Y + M[5] * Z, z = M[6] * X + M[7] * Y + M[8] * Z;\n    evalField(S.f, x, y, z, L, o1);\n    evalField(S.g, x, y, z, L, o2);\n    fe[p] = o1[0];\n    fo[p] = o1[1];\n    ge[p] = o2[0];\n    go[p] = o2[1];\n  }\n  findRoots(S);\n}\n\n// Length of the screen gradient of A + sgn B at LED (x, y), per LED.\nfunction slope(A, B, sgn, x, y) {\n  const p = y * S2 + x, xl = x > 0 ? p - 1 : p, xr = x \u003c S2 - 1 ? p + 1 : p, yu = y > 0 ? p - S2 : p, yd = y \u003c S2 - 1 ? p + S2 : p;\n  const gx = (A[xr] - A[xl] + sgn * (B[xr] - B[xl])) / (xr - xl), gy = (A[yd] - A[yu] + sgn * (B[yd] - B[yu])) / ((yd - yu) / S2);\n  return sqrt(gx * gx + gy * gy) + 1e-9;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { fe, fo, ge, go, cov, wz, c } = S;\n  const h0 = 0.52 + S.hue, FS = 2.2, ISO = 2, gc = S.d;\n  // Orange and yellow go brown and olive when dim, so near hue 0.12 the\n  // pale bands are lifted toward full brightness.\n  const yl = [0, 0.5].map((o) => {\n    const h = h0 + o - floor(h0 + o);\n    return 0.7 * cl(1 - abs(h - 0.12) / 0.11, 0, 1);\n  });\n  hsv(h0 + 0.25, 0.75, 1, gc);\n  // Screen places of the pairs: the member that faces you.\n  const pts = [];\n  for (const r of S.roots) {\n    const M = S.M;\n    // World from body is the transpose of M.\n    let X = M[0] * r[0] + M[3] * r[1] + M[6] * r[2], Y = M[1] * r[0] + M[4] * r[1] + M[7] * r[2], Z = M[2] * r[0] + M[5] * r[1] + M[8] * r[2];\n    if (Z \u003c 0) {\n      X = -X;\n      Y = -Y;\n      Z = -Z;\n    }\n    pts.push([CX + X * RAD, CY - Y * RAD]);\n  }\n  const pulse = 0.75 + 0.25 * sin(S.t * 3), { lf, lg } = S;\n  // The two odd curves, the same in both disks: fodd(-x) = -fodd(x).\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x;\n      lf[p] = cl(1.25 - abs(fo[p]) / slope(fo, fo, 0, x, y), 0, 1) * cov[p];\n      lg[p] = cl(1.15 - abs(go[p]) / slope(go, go, 0, x, y), 0, 1) * cov[p];\n    }\n  for (let half = 0; half \u003c 2; half++) {\n    const sg = half ? -1 : 1;\n    for (let y = 0; y \u003c S2; y++)\n      for (let x = 0; x \u003c S2; x++) {\n        const p = y * S2 + x, a = cov[p];\n        if (a \u003c= 0) {\n          display.setPixel(x, y + half * S2, 0, 0, 0);\n          continue;\n        }\n        // Temperature: two tones apart from a pale middle, in soft bands.\n        const tv = cl((fe[p] + sg * fo[p]) / FS, -1, 1), m = abs(tv) * 4, band = (floor(m) + sm(0.35, 0.65, m - floor(m))) / 4;\n        const side = tv \u003c 0 ? 0 : 1, v0 = 0.6 + 0.4 * band;\n        hsv(h0 + 0.5 * side, 0.1 + 0.72 * band, v0 + (1 - v0) * yl[side] * sm(0, 0.4, band), c);\n        let shade = (0.86 + 0.14 * wz[p]) * a;\n        // Pressure: a few contour lines, darker.\n        const gv = (ge[p] + sg * go[p]) / ISO, fr = abs(gv - round(gv)) * ISO;\n        shade *= 1 - 0.55 * cl(0.95 - fr / slope(ge, go, sg, x, y), 0, 1);\n        let R = c[0] * shade, G = c[1] * shade, B = c[2] * shade;\n        // The curve godd = 0, where the pressure is the same at the antipode.\n        const ga = lg[p];\n        R += (gc[0] - R) * ga;\n        G += (gc[1] - G) * ga;\n        B += (gc[2] - B) * ga;\n        // The curve fodd = 0, where the temperature is.\n        const fa = lf[p];\n        R += (1 - R) * fa;\n        G += (1 - G) * fa;\n        B += (1 - B) * fa;\n        // The pairs: a gold core inside a dark ring, and a glow round it.\n        for (const q of pts) {\n          const dd = Math.hypot(x + 0.5 - q[0], y + 0.5 - q[1]);\n          if (dd >= 6.5) continue;\n          if (dd \u003c 2.1) {\n            R = 1;\n            G = 0.86;\n            B = 0.45;\n          } else if (dd \u003c 3.2) {\n            R *= 0.12;\n            G *= 0.12;\n            B *= 0.12;\n          } else {\n            const gw = pulse * 0.9 * (1 - (dd - 3.2) / 3.3) ** 1.5;\n            R += (1 - R) * gw;\n            G += (0.86 - G) * gw;\n            B += (0.45 - B) * gw * 0.5;\n          }\n        }\n        display.setPixel(x, y + half * S2, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n      }\n  }\n}\n","layer":{"id":"layer-borsuk-ulam","type":"code","name":"borsuk-ulam","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Borsuk-Ulam\n// Family:  topology\n// Idea:    A turning globe carries a slowly changing temperature and pressure, the top disk showing the side that faces you and the bottom disk the far side laid so that each point sits where its antipode sits above, and the white line where the temperature equals the temperature at the antipode crosses the magenta line where the pressure does at an odd number of gold points, the same in both disks, where two opposite places on the Earth have the same weather.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Borsuk-Ulam theorem (Karol Borsuk, 1933, after a question of Stanisław Ulam)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Degree=3..6, Speed=0.2..3, Weather=0..1, Hue=0..1\n//\n// Knob 1: Degree. The highest degree of the random spherical harmonics in both fields, the next degree fading in between whole numbers. The two curves hang only on the odd degrees, so at 3 they are cubic curves and meet at 1 to 9 pairs, 2.8 on average: one pair 36% of the time, three 42%, five 19%, seven 3%. 4 adds a finer even layer to the colours and the isobars and leaves the curves cubic; at 5 and 6 the curves are quintic, wind into loops and meet at up to 25 pairs, about 5 on average.\n// Knob 2: Speed. How fast the globe turns: at 2 once in 20 seconds round an axis leaning 24 degrees toward you, at 0.2 once in 200 seconds, at 3 once in 13. The curves and the pairs turn with it; a pair that slips over the rim comes back at once on the opposite rim, where its other point is rising.\n// Knob 3: Weather. How fast the temperature and the pressure change. At 0 each coefficient swings once in 56 to 168 seconds, the curves creep and a pair of pairs is born or dies about 12 times a minute at Degree 3; at 1 eight times faster, 7 to 21 seconds, about 74 times a minute. Pairs come and go two at a time, where the curves touch, so the count stays odd.\n// Knob 4: Hue. Turns the palette: at the start azure for cold and orange for warm with a magenta pressure curve; at 0.25 violet and green with red; at 0.5 red and cyan with green; at 0.75 green and violet with cyan. The temperature curve stays white and the pairs gold. Where cold or warm lands on orange or yellow the pale bands are lifted toward full brightness, so they never go brown or olive.\n\n// Each disk sits in a 64 x 64 square, the near side above the far side.\nconst S2 = 64;\nconst { floor, min, abs, sqrt, sin, cos, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The disks: radius RAD about the centre of each 64 x 64 square.\nconst RAD = 31, CX = 32, CY = 32;\n// Each field is a sum over AX zonal harmonics sqrt(2l+1) P_l(u . x) for every\n// degree l up to LMAX, each axis u wandering on a great circle.\nconst AX = 5, LMAX = 6;\n// The globe turns round an axis leaning TILT toward you.\nconst TILT = 0.42;\n// Grid seeds for Newton's method each frame, over one hemisphere.\nconst SEEDS = 72;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nfunction unit() {\n  for (;;) {\n    const x = 2 * random() - 1, y = 2 * random() - 1, z = 2 * random() - 1, r = x * x + y * y + z * z;\n    if (r > 0.01 && r \u003c 1) {\n      const k = 1 / sqrt(r);\n      return [x * k, y * k, z * k];\n    }\n  }\n}\n\n// One field: per axis a great circle (two orthonormal vectors and a speed)\n// and per degree a coefficient swinging with its own speed and phase.\nfunction field() {\n  const F = { e: [], w: [], amp: [], om: [], ph: [], u: new Float64Array(3 * AX), c: new Float64Array(AX * (LMAX + 1)) };\n  for (let j = 0; j \u003c AX; j++) {\n    const a = unit(), b0 = unit();\n    const d = a[0] * b0[0] + a[1] * b0[1] + a[2] * b0[2];\n    const b = [b0[0] - d * a[0], b0[1] - d * a[1], b0[2] - d * a[2]], bl = Math.hypot(b[0], b[1], b[2]);\n    F.e.push([a, [b[0] / bl, b[1] / bl, b[2] / bl], random() * TAU]);\n    F.w.push((0.08 + 0.12 * random()) * (random() \u003c 0.5 ? -1 : 1));\n    for (let l = 0; l \u003c= LMAX; l++) {\n      F.amp.push(l === 0 ? 0 : (random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.4 * random()));\n      F.om.push(0.15 + 0.3 * random());\n      F.ph.push(random() * TAU);\n    }\n  }\n  return F;\n}\n\n// Axes and coefficients at weather time t, with degree l weighted by how far\n// the Degree knob has come past it.\nfunction place(F, t, deg) {\n  for (let j = 0; j \u003c AX; j++) {\n    const [a, b, p] = F.e[j], th = p + F.w[j] * t, cs = cos(th), sn = sin(th);\n    for (let i = 0; i \u003c 3; i++) F.u[3 * j + i] = a[i] * cs + b[i] * sn;\n    for (let l = 1; l \u003c= LMAX; l++) {\n      const q = j * (LMAX + 1) + l, fade = cl(deg - l + 1, 0, 1);\n      F.c[q] = (fade * F.amp[q] * sqrt(2 * l + 1) * sin(F.om[q] * t + F.ph[q])) / Math.pow(l, 0.3);\n    }\n  }\n}\n\n// Even and odd parts of a field at unit vector x, and the gradient of the odd\n// part when grad is given: f(x) = even + odd, f(-x) = even - odd.\nfunction evalField(F, x, y, z, L, out, grad) {\n  let ev = 0, od = 0, gx = 0, gy = 0, gz = 0;\n  for (let j = 0; j \u003c AX; j++) {\n    const ux = F.u[3 * j], uy = F.u[3 * j + 1], uz = F.u[3 * j + 2], s = ux * x + uy * y + uz * z, base = j * (LMAX + 1);\n    let p0 = 1, p1 = s, d0 = 0, d1 = 1, o = F.c[base + 1] * p1, e = 0, dd = F.c[base + 1];\n    for (let l = 1; l \u003c L; l++) {\n      const p2 = ((2 * l + 1) * s * p1 - l * p0) / (l + 1), d2 = d0 + (2 * l + 1) * p1, c = F.c[base + l + 1];\n      if ((l + 1) & 1) {\n        o += c * p2;\n        dd += c * d2;\n      } else e += c * p2;\n      p0 = p1;\n      p1 = p2;\n      d0 = d1;\n      d1 = d2;\n    }\n    ev += e;\n    od += o;\n    if (grad) {\n      gx += dd * ux;\n      gy += dd * uy;\n      gz += dd * uz;\n    }\n  }\n  out[0] = ev;\n  out[1] = od;\n  if (grad) {\n    grad[0] = gx;\n    grad[1] = gy;\n    grad[2] = gz;\n  }\n}\n\nexport function setup(params) {\n  const P = S2 * S2;\n  // World direction of each pixel of the top square: x right, y up, z\n  // toward you, pulled onto the rim outside the disk.\n  const wx = new Float32Array(P), wy = new Float32Array(P), wz = new Float32Array(P), cov = new Float32Array(P);\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x, u = (x + 0.5 - CX) / RAD, v = (CY - y - 0.5) / RAD, r = sqrt(u * u + v * v);\n      cov[p] = cl((1 - r) * RAD + 0.5, 0, 1);\n      if (r \u003c 1) {\n        wx[p] = u;\n        wy[p] = v;\n        wz[p] = sqrt(1 - r * r);\n      } else {\n        wx[p] = u / r;\n        wy[p] = v / r;\n        wz[p] = 0;\n      }\n    }\n  // Seeds: a Fibonacci spiral over the upper hemisphere.\n  const seeds = [];\n  for (let i = 0; i \u003c SEEDS; i++) {\n    const z = (i + 0.5) / SEEDS, r = sqrt(1 - z * z), a = i * 2.39996323;\n    seeds.push([r * cos(a), r * sin(a), z]);\n  }\n  params.s = {\n    init: false, t: 0, wt: 0, deg: 3, L: 3, f: field(), g: field(), wx, wy, wz, cov, seeds,\n    fe: new Float32Array(P), fo: new Float32Array(P), ge: new Float32Array(P), go: new Float32Array(P),\n    lf: new Float32Array(P), lg: new Float32Array(P), roots: [], M: [1, 0, 0, 0, 1, 0, 0, 0, 1], hue: 0.06,\n    o1: [0, 0], o2: [0, 0], g1: [0, 0, 0], g2: [0, 0, 0], c: [0, 0, 0], d: [0, 0, 0],\n  };\n}\n\n// Newton's method on the sphere for fodd = godd = 0: the step is the\n// smallest tangent move that zeroes both linearised, taken from x and pulled\n// back onto the sphere.\nfunction newton(S, x0) {\n  let x = x0[0], y = x0[1], z = x0[2];\n  const { o1, o2, g1, g2 } = S;\n  for (let it = 0; it \u003c 24; it++) {\n    evalField(S.f, x, y, z, S.L, o1, g1);\n    evalField(S.g, x, y, z, S.L, o2, g2);\n    const F1 = o1[1], F2 = o2[1];\n    if (abs(F1) \u003c 1e-13 && abs(F2) \u003c 1e-13) return [x, y, z];\n    const d1 = g1[0] * x + g1[1] * y + g1[2] * z, d2 = g2[0] * x + g2[1] * y + g2[2] * z;\n    const ax = g1[0] - d1 * x, ay = g1[1] - d1 * y, az = g1[2] - d1 * z;\n    const bx = g2[0] - d2 * x, by = g2[1] - d2 * y, bz = g2[2] - d2 * z;\n    const a = ax * ax + ay * ay + az * az, b = ax * bx + ay * by + az * bz, c = bx * bx + by * by + bz * bz, det = a * c - b * b;\n    if (det \u003c 1e-14) return null;\n    const al = (-F1 * c + F2 * b) / det, be = (-F2 * a + F1 * b) / det;\n    let sx = al * ax + be * bx, sy = al * ay + be * by, sz = al * az + be * bz;\n    const sl = sqrt(sx * sx + sy * sy + sz * sz);\n    if (sl > 0.35) {\n      sx *= 0.35 / sl;\n      sy *= 0.35 / sl;\n      sz *= 0.35 / sl;\n    }\n    x += sx;\n    y += sy;\n    z += sz;\n    const n = 1 / sqrt(x * x + y * y + z * z);\n    x *= n;\n    y *= n;\n    z *= n;\n  }\n  evalField(S.f, x, y, z, S.L, o1);\n  evalField(S.g, x, y, z, S.L, o2);\n  return abs(o1[1]) \u003c 1e-10 && abs(o2[1]) \u003c 1e-10 ? [x, y, z] : null;\n}\n\n// All antipodal pairs, by Newton's method from three kinds of start: last\n// frame's pairs, every 2 x 2 block of LEDs on the near side where both odd\n// parts change sign, and a fixed spiral of seeds; each pair kept once.\nfunction findRoots(S) {\n  const found = [];\n  const add = (r) => {\n    if (!r) return;\n    for (const q of found) {\n      const d = (q[0] - r[0]) ** 2 + (q[1] - r[1]) ** 2 + (q[2] - r[2]) ** 2, e = (q[0] + r[0]) ** 2 + (q[1] + r[1]) ** 2 + (q[2] + r[2]) ** 2;\n      if (d \u003c 1e-8 || e \u003c 1e-8) return;\n    }\n    found.push(r);\n  };\n  for (const r of S.roots) add(newton(S, r));\n  const { fo, go, wx, wy, wz, M } = S;\n  for (let y = 0; y \u003c S2 - 1; y++)\n    for (let x = 0; x \u003c S2 - 1; x++) {\n      const p = y * S2 + x, q = [p, p + 1, p + S2, p + S2 + 1];\n      let fp = 0, fn = 0, gp = 0, gn = 0;\n      for (const i of q) {\n        if (fo[i] > 0) fp = 1;\n        else fn = 1;\n        if (go[i] > 0) gp = 1;\n        else gn = 1;\n      }\n      if (!(fp && fn && gp && gn)) continue;\n      const X = wx[p], Y = wy[p], Z = wz[p];\n      add(newton(S, [M[0] * X + M[1] * Y + M[2] * Z, M[3] * X + M[4] * Y + M[5] * Z, M[6] * X + M[7] * Y + M[8] * Z]));\n    }\n  for (const s of S.seeds) add(newton(S, s));\n  S.roots = found;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.deg = cl(k[0], 3, 6);\n  S.L = Math.ceil(S.deg - 1e-9);\n  const speed = cl(k[1], 0.2, 3), weather = 0.25 + 1.75 * cl(k[2], 0, 1);\n  S.hue = k[3];\n  S.t += d * speed;\n  S.wt += d * weather;\n  place(S.f, S.wt + 3, S.deg);\n  place(S.g, S.wt + 3, S.deg);\n  // Body from world: undo the lean, then the turn.\n  const ph = S.t * 0.025 * TAU, cp = cos(ph), sp = sin(ph), ct = cos(TILT), st = sin(TILT);\n  // World = Rx(TILT) Ry(ph) body; body = Ry(-ph) Rx(-TILT) world.\n  // Rx(-TILT): (x, y, z) -> (x, ct y + st z, -st y + ct z).\n  // Ry(-ph): (x, y, z) -> (cp x - sp z, y, sp x + cp z).\n  S.M = [cp, sp * st, -sp * ct, 0, ct, st, sp, -cp * st, cp * ct];\n  const { wx, wy, wz, fe, fo, ge, go, o1, o2, M } = S, L = S.L;\n  for (let p = 0; p \u003c S2 * S2; p++) {\n    const X = wx[p], Y = wy[p], Z = wz[p];\n    const x = M[0] * X + M[1] * Y + M[2] * Z, y = M[3] * X + M[4] * Y + M[5] * Z, z = M[6] * X + M[7] * Y + M[8] * Z;\n    evalField(S.f, x, y, z, L, o1);\n    evalField(S.g, x, y, z, L, o2);\n    fe[p] = o1[0];\n    fo[p] = o1[1];\n    ge[p] = o2[0];\n    go[p] = o2[1];\n  }\n  findRoots(S);\n}\n\n// Length of the screen gradient of A + sgn B at LED (x, y), per LED.\nfunction slope(A, B, sgn, x, y) {\n  const p = y * S2 + x, xl = x > 0 ? p - 1 : p, xr = x \u003c S2 - 1 ? p + 1 : p, yu = y > 0 ? p - S2 : p, yd = y \u003c S2 - 1 ? p + S2 : p;\n  const gx = (A[xr] - A[xl] + sgn * (B[xr] - B[xl])) / (xr - xl), gy = (A[yd] - A[yu] + sgn * (B[yd] - B[yu])) / ((yd - yu) / S2);\n  return sqrt(gx * gx + gy * gy) + 1e-9;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { fe, fo, ge, go, cov, wz, c } = S;\n  const h0 = 0.52 + S.hue, FS = 2.2, ISO = 2, gc = S.d;\n  // Orange and yellow go brown and olive when dim, so near hue 0.12 the\n  // pale bands are lifted toward full brightness.\n  const yl = [0, 0.5].map((o) => {\n    const h = h0 + o - floor(h0 + o);\n    return 0.7 * cl(1 - abs(h - 0.12) / 0.11, 0, 1);\n  });\n  hsv(h0 + 0.25, 0.75, 1, gc);\n  // Screen places of the pairs: the member that faces you.\n  const pts = [];\n  for (const r of S.roots) {\n    const M = S.M;\n    // World from body is the transpose of M.\n    let X = M[0] * r[0] + M[3] * r[1] + M[6] * r[2], Y = M[1] * r[0] + M[4] * r[1] + M[7] * r[2], Z = M[2] * r[0] + M[5] * r[1] + M[8] * r[2];\n    if (Z \u003c 0) {\n      X = -X;\n      Y = -Y;\n      Z = -Z;\n    }\n    pts.push([CX + X * RAD, CY - Y * RAD]);\n  }\n  const pulse = 0.75 + 0.25 * sin(S.t * 3), { lf, lg } = S;\n  // The two odd curves, the same in both disks: fodd(-x) = -fodd(x).\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x;\n      lf[p] = cl(1.25 - abs(fo[p]) / slope(fo, fo, 0, x, y), 0, 1) * cov[p];\n      lg[p] = cl(1.15 - abs(go[p]) / slope(go, go, 0, x, y), 0, 1) * cov[p];\n    }\n  for (let half = 0; half \u003c 2; half++) {\n    const sg = half ? -1 : 1;\n    for (let y = 0; y \u003c S2; y++)\n      for (let x = 0; x \u003c S2; x++) {\n        const p = y * S2 + x, a = cov[p];\n        if (a \u003c= 0) {\n          display.setPixel(x, y + half * S2, 0, 0, 0);\n          continue;\n        }\n        // Temperature: two tones apart from a pale middle, in soft bands.\n        const tv = cl((fe[p] + sg * fo[p]) / FS, -1, 1), m = abs(tv) * 4, band = (floor(m) + sm(0.35, 0.65, m - floor(m))) / 4;\n        const side = tv \u003c 0 ? 0 : 1, v0 = 0.6 + 0.4 * band;\n        hsv(h0 + 0.5 * side, 0.1 + 0.72 * band, v0 + (1 - v0) * yl[side] * sm(0, 0.4, band), c);\n        let shade = (0.86 + 0.14 * wz[p]) * a;\n        // Pressure: a few contour lines, darker.\n        const gv = (ge[p] + sg * go[p]) / ISO, fr = abs(gv - round(gv)) * ISO;\n        shade *= 1 - 0.55 * cl(0.95 - fr / slope(ge, go, sg, x, y), 0, 1);\n        let R = c[0] * shade, G = c[1] * shade, B = c[2] * shade;\n        // The curve godd = 0, where the pressure is the same at the antipode.\n        const ga = lg[p];\n        R += (gc[0] - R) * ga;\n        G += (gc[1] - G) * ga;\n        B += (gc[2] - B) * ga;\n        // The curve fodd = 0, where the temperature is.\n        const fa = lf[p];\n        R += (1 - R) * fa;\n        G += (1 - G) * fa;\n        B += (1 - B) * fa;\n        // The pairs: a gold core inside a dark ring, and a glow round it.\n        for (const q of pts) {\n          const dd = Math.hypot(x + 0.5 - q[0], y + 0.5 - q[1]);\n          if (dd >= 6.5) continue;\n          if (dd \u003c 2.1) {\n            R = 1;\n            G = 0.86;\n            B = 0.45;\n          } else if (dd \u003c 3.2) {\n            R *= 0.12;\n            G *= 0.12;\n            B *= 0.12;\n          } else {\n            const gw = pulse * 0.9 * (1 - (dd - 3.2) / 3.3) ** 1.5;\n            R += (1 - R) * gw;\n            G += (0.86 - G) * gw;\n            B += (0.45 - B) * gw * 0.5;\n          }\n        }\n        display.setPixel(x, y + half * S2, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Degree=3..6, Speed=0.2..3, Weather=0..1, Hue=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Degree","min":3,"max":6,"about":"The highest degree of the random spherical harmonics in both fields, the next degree fading in between whole numbers. The two curves hang only on the odd degrees, so at 3 they are cubic curves and meet at 1 to 9 pairs, 2.8 on average: one pair 36% of the time, three 42%, five 19%, seven 3%. 4 adds a finer even layer to the colours and the isobars and leaves the curves cubic; at 5 and 6 the curves are quintic, wind into loops and meet at up to 25 pairs, about 5 on average."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the globe turns: at 2 once in 20 seconds round an axis leaning 24 degrees toward you, at 0.2 once in 200 seconds, at 3 once in 13. The curves and the pairs turn with it; a pair that slips over the rim comes back at once on the opposite rim, where its other point is rising."},{"name":"Weather","min":0,"max":1,"about":"How fast the temperature and the pressure change. At 0 each coefficient swings once in 56 to 168 seconds, the curves creep and a pair of pairs is born or dies about 12 times a minute at Degree 3; at 1 eight times faster, 7 to 21 seconds, about 74 times a minute. Pairs come and go two at a time, where the curves touch, so the count stays odd."},{"name":"Hue","min":0,"max":1,"about":"Turns the palette: at the start azure for cold and orange for warm with a magenta pressure curve; at 0.25 violet and green with red; at 0.5 red and cyan with green; at 0.75 green and violet with cyan. The temperature curve stays white and the pairs gold. Where cold or warm lands on orange or yellow the pale bands are lifted toward full brightness, so they never go brown or olive."}],"start":[3,2,0,0.06],"measures":{"motion":0.3065,"detail":0.0677,"edges":0.3854,"complexity":1.6473,"coverage":0.7507,"colour":0.3391,"drift":0.0903},"knobResponse":[0.1438,0.1696,0.1763,0.2221]},{"slug":"bowling-lane","title":"Bowling Lane","family":"sport","round":22,"note":"볼러 뒤에서 본 10핀 레인이에요. 공이 오일 위로 제 반사를 끌며 휘어 올라가 핀을 흩고, 스위프 바가 데드우드를 쓸어 낸 뒤 핀이 다시 서요. 처음에는 블랙라이트 아래 핀과 화살표, 오일이 빛나고, K4 를 올리면 나무 레인에 하우스 조명이 켜져요.","idea":"A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.","buttons":"K1 tap throws the next ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-bowling-lane","type":"code","name":"bowling-lane","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Ball","min":0,"max":1,"about":"The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins."},{"name":"Hook","min":0,"max":1,"about":"How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side."},{"name":"Lights","min":0,"max":1,"about":"Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.1625,"detail":0.0689,"edges":0.5323,"complexity":1.7471,"coverage":0.9404,"colour":0.2104,"drift":0.042},"knobResponse":[0.0566,0.0281,0.0252,0.2377]},{"slug":"boys-surface","title":"Boy's Surface","family":"topology","round":31,"note":"사영 평면을 3차원에 담은 보이 곡면이 위 칸에서 세 겹 대칭축으로 돌고, 수평면이 오르내리며 자른 곡선이 아래 칸에 위에서 본 그림으로 떠요. 평면 아래는 단단하고 위는 옅은 유리라 안쪽에서 앞면과 뒷면이 만나는 이음매가 보여요. K1 을 누르면 평면이 삼중점에 멈춰 세 고리가 한 점을 지나요.","idea":"Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.","buttons":"K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.","code":"// ===== Patternflow pattern =====\n// Title:   Boy's Surface\n// Family:  topology\n// Idea:    Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Boy's surface (Werner Boy, 1901), in the parametrisation of Robert Bryant and Rob Kusner, pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan.\n// Knob 2: Speed. At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut.\n// Knob 4: Bands. Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light.\n// Buttons: K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.\n\nconst W = 64, S = 64, N = W * 128;\nconst { min, max, floor, sqrt, sin, cos, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The disk is sampled on NR rings of NA points; ring 0 is the centre.\nconst NR = 64, NA = 192, NP = (NR + 1) * NA, NC = NR * NA;\n// The surface lies within 1.571 of (0, 0, ZC), so 19.4 LEDs a unit keeps\n// it inside its square at every turn and tilt. The triple point is at the\n// origin, the top of the lobes at z = 0.443 and the pole at z = -2.\nconst ZC = -0.779, SC = 19.4, CX = 31.5, CY = 31.5, PY = 64 + 31.5;\nconst Z0 = -1.45, Z1 = 0.3;\n\n// Bryant and Kusner's formula for one point w = re + i im of the closed\n// unit disk, written out in real arithmetic.\nconst S5 = sqrt(5);\nfunction boy(re, im, out, o) {\n  const r2 = re * re - im * im, i2 = 2 * re * im;\n  const r3 = r2 * re - i2 * im, i3 = r2 * im + i2 * re;\n  const r4 = r2 * r2 - i2 * i2, i4 = 2 * r2 * i2;\n  const r6 = r3 * r3 - i3 * i3, i6 = 2 * r3 * i3;\n  const dr = r6 + S5 * r3 - 1, di = i6 + S5 * i3, dd = dr * dr + di * di;\n  // w (1 - w^4), w (1 + w^4) and 1 + w^6, each over the denominator.\n  const ar = re * (1 - r4) + im * i4, ai = im * (1 - r4) - re * i4;\n  const br = re * (1 + r4) - im * i4, bi = im * (1 + r4) + re * i4;\n  const g1 = (-1.5 * (ai * dr - ar * di)) / dd;\n  const g2 = (-1.5 * (br * dr + bi * di)) / dd;\n  const g3 = (i6 * dr - (1 + r6) * di) / dd - 0.5;\n  const g = g1 * g1 + g2 * g2 + g3 * g3;\n  out[o] = g1 / g;\n  out[o + 1] = g2 / g;\n  out[o + 2] = g3 / g;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points, normals and cells, once. The normal is\n// d/dRe x d/dIm of the map, the orientation of the disk: across the seam,\n// where antipodal points of the boundary circle meet, it points the other\n// way, and the colours follow it.\nfunction build(G) {\n  const P = G.p, Nn = G.n, T = new Float64Array(12);\n  for (let i = 0; i \u003c= NR; i++) {\n    const r = i / NR;\n    for (let j = 0; j \u003c NA; j++) {\n      const a = (TAU * j) / NA, re = r * cos(a), im = r * sin(a), k = i * NA + j, h = 1e-4;\n      boy(re, im, P, k * 3);\n      boy(re + h, im, T, 0);\n      boy(re - h, im, T, 3);\n      boy(re, im + h, T, 6);\n      boy(re, im - h, T, 9);\n      const ux = T[0] - T[3], uy = T[1] - T[4], uz = T[2] - T[5], vx = T[6] - T[9], vy = T[7] - T[10], vz = T[8] - T[11];\n      let nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;\n      const l = 1 / (sqrt(nx * nx + ny * ny + nz * nz) + 1e-30);\n      Nn[k * 3] = nx * l;\n      Nn[k * 3 + 1] = ny * l;\n      Nn[k * 3 + 2] = nz * l;\n    }\n  }\n  // The corners of each grid cell, and its mean height, which decides\n  // whether it is under the plane.\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j, o = c * 4, q = [c, c + NA, (i + 1) * NA + ((j + 1) % NA), i * NA + ((j + 1) % NA)];\n      for (let e = 0; e \u003c 4; e++) G.cc[o + e] = q[e];\n      G.cz[c] = (P[q[0] * 3 + 2] + P[q[1] * 3 + 2] + P[q[2] * 3 + 2] + P[q[3] * 3 + 2]) / 4;\n    }\n  // Cells of the grid by height: bin b lists every cell whose corners span\n  // a height in it, so the cut only looks at the cells near the plane.\n  const cnt = new Int32Array(NB + 1), lo = new Int32Array(NR * NA), hi = new Int32Array(NR * NA);\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j;\n      let a = 9, b = -9;\n      for (let e = 0; e \u003c 4; e++) (a = min(a, P[G.cc[c * 4 + e] * 3 + 2])), (b = max(b, P[G.cc[c * 4 + e] * 3 + 2]));\n      lo[c] = bin(a);\n      hi[c] = bin(b);\n      for (let k = lo[c]; k \u003c= hi[c]; k++) cnt[k + 1]++;\n    }\n  for (let k = 0; k \u003c NB; k++) cnt[k + 1] += cnt[k];\n  G.binAt = cnt.slice();\n  G.cells = new Int32Array(cnt[NB]);\n  for (let c = 0; c \u003c NR * NA; c++) for (let k = lo[c]; k \u003c= hi[c]; k++) G.cells[cnt[k]++] = c;\n}\n\n// Height bins for the cut, from the pole at -2 to the top at 0.45.\nconst NB = 96;\nconst bin = (z) => cl(floor(((z + 2.01) / 2.47) * NB), 0, NB - 1);\n\nexport function setup(params) {\n  const A = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    p: A(NP * 3), n: A(NP * 3), cc: I(NC * 4), cz: A(NC), binAt: null, cells: null,\n    // Each point's place in the side view, its depth there, and its row in the plan.\n    vx: A(NP), vy: A(NP), vd: A(NP), vp: A(NP),\n    // Depth and point per LED: the side view under the plane and over it,\n    // and the plan, which looks straight down on what is under it.\n    za: A(W * S), ia: I(W * S), zo: A(W * S), io: I(W * S), zp: A(W * S), ip: I(W * S),\n    line: A(N), col: A(N * 3), pal: A(12), c3: A(3), seg: A(4096 * 2), band: A(NR + 1),\n    L: [0, 1, 2].map(() => ({ a: A(W * S), b: A(W * S), c: A(W * S), f: new Int8Array(W * S), g: new Int8Array(W * S) })),\n    az: 0.4, sw: PI / 2, hold: 0, hw: 0, hue: 0, tilt: 0, bands: 0.06, zc: -0.5, palHue: -1, built: false,\n  };\n}\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const G = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  if (!G.built) build(G), (G.built = true);\n  G.hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3);\n  G.tilt = cl(k[2], 0, 1);\n  G.bands = cl(k[3], 0, 1);\n  // A third of a turn in 8.7 s and one sweep of the plane in 20 s at Speed 2.\n  G.az += d * sp * 0.12;\n  G.sw += (d * sp * TAU) / 40;\n  const b = input.btnPressed || [];\n  if (b[0]) G.hold = 6.6;\n  G.hold = max(0, G.hold - d);\n  // The plane eases over to the triple point, at z = 0, in 0.8 s, and back\n  // to its sweep in 0.8 s once the hold is over.\n  G.hw = cl(G.hw + (G.hold > 0.8 ? d : -d) / 0.8, 0, 1);\n  const zs = Z0 + (Z1 - Z0) * (0.5 - 0.5 * cos(G.sw));\n  G.zc = zs * (1 - sm(G.hw));\n}\n\n// Two colours for each face of the disk, one in the light and one in\n// shadow. A dim orange or yellow reads brown, so a face whose hue lies\n// between red and yellow turns crimson in shadow, and one between yellow\n// and green turns green; other faces lean a little toward violet.\nfunction palette(G) {\n  const t = G.pal;\n  for (let f = 0; f \u003c 2; f++) {\n    let h = G.hue + (f ? 0.52 : 0.92);\n    h -= floor(h);\n    const sh = h \u003c 0.17 ? 0.94 : h \u003c 0.33 ? 0.33 : h + cl(0.7 - h, -0.04, 0.04);\n    hsv(h, f ? 0.8 : 0.7, 1, t, f * 3);\n    hsv(sh, 0.85, 1, t, 6 + f * 3);\n  }\n  G.palHue = G.hue;\n}\n\n// A soft line one LED wide into the light buffer: points every half LED,\n// each shared between its four nearest LEDs.\nfunction soft(buf, x0, y0, x1, y1, w, ylo, yhi) {\n  const n = max(1, Math.ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) * 2)), ww = (w * sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2)) / n;\n  for (let i = 0; i \u003c n; i++) {\n    const t = (i + 0.5) / n, x = x0 + (x1 - x0) * t - 0.5, y = y0 + (y1 - y0) * t - 0.5;\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy;\n    for (let c = 0; c \u003c 4; c++) {\n      const xx = ix + (c & 1), yy = iy + (c >> 1);\n      if (xx \u003c 0 || xx >= W || yy \u003c ylo || yy >= yhi) continue;\n      buf[yy * W + xx] += ww * (c & 1 ? fx : 1 - fx) * (c >> 1 ? fy : 1 - fy);\n    }\n  }\n}\n\n// The colour of point k on face f in a view whose right, up and\n// toward-the-eye axes carry the normal to (a, b, c), into G.c3. The light is\n// two-sided Lambert from upper left in front, with a highlight, and the\n// disk's circles stripe it.\nfunction shade(G, k, a, b, c, gain, f) {\n  const pal = G.pal, sg = f ? -1 : 1, o = f * 3, so = 6 + o;\n  const ld = max(0, sg * (a * LX + b * LY + c * LZ)), h2 = max(0, sg * (a * HX + b * HY + c * HZ)) ** 2, h8 = (h2 * h2) ** 2;\n  // The shadow colour gives way to the lit one with the square of the light,\n  // and later still in the dimmed glass and plan.\n  const lit = (0.24 + 0.76 * ld) * G.band[(k / NA) | 0] * gain, sp = h8 * h8 * h8 * 0.55 * gain, m = ld * ld * gain;\n  G.c3[0] = ((pal[so] + (pal[o] - pal[so]) * m) * lit + sp) * 255;\n  G.c3[1] = ((pal[so + 1] + (pal[o + 1] - pal[so + 1]) * m) * lit + sp) * 255;\n  G.c3[2] = ((pal[so + 2] + (pal[o + 2] - pal[so + 2]) * m) * lit + sp) * 255;\n}\nconst LX = -0.45, LY = 0.62, LZ = 0.64, HL = 1 / sqrt(LX * LX + LY * LY + (LZ + 1) ** 2), HX = LX * HL, HY = LY * HL, HZ = (LZ + 1) * HL;\n\n// One grid cell into a depth buffer: every LED whose centre lies in the\n// box round its four corners. The boxes of neighbouring cells overlap, so\n// the turning surface has no holes.\nfunction fill(zb, ib, X, Y, cc, o, D, k) {\n  const a = cc[o], b = cc[o + 1], c = cc[o + 2], d = cc[o + 3];\n  let xa = X[a], xb = X[b], ya = Y[a], yb = Y[b];\n  if (xa > xb) (xb = xa), (xa = X[b]);\n  if (ya > yb) (yb = ya), (ya = Y[b]);\n  let t = X[c];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = X[d];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = Y[c];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  t = Y[d];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  // LED centres sit at whole numbers plus a half.\n  let x0 = (xa - 0.5) | 0, y0 = (ya - 0.5) | 0, x1 = (xb + 0.5) | 0, y1 = (yb + 0.5) | 0;\n  if (xa - 0.5 > x0) x0++;\n  if (ya - 0.5 > y0) y0++;\n  if (x0 \u003c 0) x0 = 0;\n  if (y0 \u003c 0) y0 = 0;\n  if (x1 > W) x1 = W;\n  if (y1 > S) y1 = S;\n  for (let yy = y0; yy \u003c y1; yy++) for (let q = yy * W + x0, qe = yy * W + x1; q \u003c qe; q++) if (D > zb[q]) (zb[q] = D), (ib[q] = k);\n}\n\n// Every cell into the side view's solid or glass layer by its mean height,\n// at the mean depth of its corners, and the solid ones into the plan too.\nfunction cellsIn(G, zc) {\n  const { cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip } = G;\n  for (let c = 0, o = 0; c \u003c NC; c++, o += 4) {\n    const k = cc[o], D = (vd[k] + vd[cc[o + 1]] + vd[cc[o + 2]] + vd[cc[o + 3]]) * 0.25;\n    if (cz[c] \u003c= zc) fill(za, ia, vx, vy, cc, o, D, k), fill(zp, ip, vx, vp, cc, o, cz[c], k);\n    else fill(zo, io, vx, vy, cc, o, D, k);\n  }\n}\n\n// The normal of each LED's point in the eye's frame (right, up, toward the\n// eye; the plan looks down the axis) and the face of the disk it shows. A\n// lone LED showing the other face from every lit neighbour is a cell's box\n// poking past a fold, and takes their face.\nfunction normals(G, ids, ca, sa, ce, se, plan, L) {\n  const n = G.n, { a, b, c, f, g } = L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const k = ids[q];\n    if (k \u003c 0) {\n      f[q] = -1;\n      continue;\n    }\n    const nx = n[k * 3], ny = n[k * 3 + 1], nz = n[k * 3 + 2], nyr = nx * sa + ny * ca;\n    a[q] = nx * ca - ny * sa;\n    b[q] = plan ? nyr : nyr * se + nz * ce;\n    c[q] = plan ? nz : nz * se - nyr * ce;\n    f[q] = c[q] >= 0 ? 0 : 1;\n  }\n  for (let q = 0; q \u003c W * S; q++) {\n    const fq = (g[q] = f[q]);\n    if (fq \u003c 0) continue;\n    const x = q & (W - 1), l = x > 0 ? f[q - 1] : -1, r = x \u003c W - 1 ? f[q + 1] : -1, u = q >= W ? f[q - W] : -1, d = q \u003c W * S - W ? f[q + W] : -1;\n    if (l !== fq && r !== fq && u !== fq && d !== fq && (l >= 0) + (r >= 0) + (u >= 0) + (d >= 0) >= 2) g[q] = 1 - fq;\n  }\n}\n\nexport function draw(display, params) {\n  const G = params.s;\n  if (!G || !G.built) return;\n  if (G.palHue !== G.hue) palette(G);\n  const { p, n, cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip, line, col, seg, c3 } = G;\n  const ca = cos(G.az), sa = sin(G.az), el = (22 + 68 * G.tilt) * (PI / 180), ce = cos(el), se = sin(el), zc = G.zc;\n  // The disk's circles: each ring of the grid is lit by its band, from 1.2\n  // on the light stripes to 0.35 in the middle of the dark ones.\n  const nb = 2 + 7 * G.bands;\n  for (let i = 0; i \u003c= NR; i++) G.band[i] = 1.2 - 0.85 * (0.5 - 0.5 * cos((TAU * nb * (NR - i)) / NR));\n  za.fill(-1e9);\n  zo.fill(-1e9);\n  zp.fill(-1e9);\n  ia.fill(-1);\n  io.fill(-1);\n  ip.fill(-1);\n  // The side view in two layers: what is under the plane is solid, what is\n  // over it is glass. The plan takes what is under the plane, nearest the\n  // eye above first.\n  for (let k = 0, o = 0; k \u003c NP; k++, o += 3) {\n    const x = p[o], y = p[o + 1], z = p[o + 2], xr = x * ca - y * sa, yr = x * sa + y * ca;\n    vx[k] = CX + SC * xr;\n    vy[k] = CY - SC * (yr * se + (z - ZC) * ce);\n    vd[k] = z * se - yr * ce;\n    vp[k] = CY - SC * yr;\n  }\n  cellsIn(G, zc);\n  normals(G, ia, ca, sa, ce, se, false, G.L[0]);\n  normals(G, io, ca, sa, ce, se, false, G.L[1]);\n  normals(G, ip, ca, sa, ce, se, true, G.L[2]);\n  const [A, O, Pl] = G.L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const o = q * 3, oo = (W * S + q) * 3;\n    let r = 0, g = 0, b = 0, k = ia[q];\n    if (k >= 0) shade(G, k, A.a[q], A.b[q], A.c[q], 1, A.g[q]), (r = c3[0]), (g = c3[1]), (b = c3[2]);\n    k = io[q];\n    if (k >= 0 && zo[q] > za[q]) {\n      // Glass: 60 percent of its own light over 55 of what is behind.\n      shade(G, k, O.a[q], O.b[q], O.c[q], 0.6, O.g[q]);\n      (r = r * 0.55 + c3[0]), (g = g * 0.55 + c3[1]), (b = b * 0.55 + c3[2]);\n    }\n    (col[o] = r), (col[o + 1] = g), (col[o + 2] = b);\n    k = ip[q];\n    if (k >= 0) shade(G, k, Pl.a[q], Pl.b[q], Pl.c[q], 0.5, Pl.g[q]), (col[oo] = c3[0]), (col[oo + 1] = c3[1]), (col[oo + 2] = c3[2]);\n    else col[oo] = col[oo + 1] = col[oo + 2] = 0;\n  }\n  // The cut: in each grid cell the plane crosses, the points where it\n  // crosses the cell's edges, two to a piece of the curve (four in a\n  // saddle, paired in order round the cell).\n  line.fill(0);\n  let ns = 0;\n  const bz = bin(zc), cells = G.cells, zs = [0, 0, 0, 0], cs = [0, 0, 0, 0];\n  for (let m = G.binAt[bz]; m \u003c G.binAt[bz + 1] && ns \u003c 2040; m++) {\n    const c = cells[m];\n    for (let e = 0; e \u003c 4; e++) cs[e] = cc[c * 4 + e];\n    let up = 0;\n    for (let e = 0; e \u003c 4; e++) up += (zs[e] = p[cs[e] * 3 + 2] - zc) > 0;\n    if (up === 0 || up === 4) continue;\n    for (let e = 0; e \u003c 4; e++) {\n      const z0 = zs[e], z1 = zs[(e + 1) & 3];\n      if (z0 > 0 === z1 > 0) continue;\n      const t = z0 / (z0 - z1), A = cs[e] * 3, B = cs[(e + 1) & 3] * 3;\n      seg[ns * 2] = p[A] + (p[B] - p[A]) * t;\n      seg[ns * 2 + 1] = p[A + 1] + (p[B + 1] - p[A + 1]) * t;\n      ns++;\n    }\n  }\n  // Each piece soft in both views; in the side view a piece behind the\n  // solid is faint.\n  for (let s = 0; s + 1 \u003c ns; s += 2) {\n    const ax = seg[s * 2], ay = seg[s * 2 + 1], bx = seg[s * 2 + 2], by = seg[s * 2 + 3];\n    const axr = ax * ca - ay * sa, ayr = ax * sa + ay * ca, bxr = bx * ca - by * sa, byr = bx * sa + by * ca;\n    const X0 = CX + SC * axr, X1 = CX + SC * bxr, Y0 = CY - SC * (ayr * se + (zc - ZC) * ce), Y1 = CY - SC * (byr * se + (zc - ZC) * ce);\n    const D = zc * se - ((ayr + byr) / 2) * ce, qx = Math.round((X0 + X1) / 2 - 0.5), qy = Math.round((Y0 + Y1) / 2 - 0.5);\n    const zq = qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c S ? za[qy * W + qx] : -1e9;\n    soft(line, X0, Y0, X1, Y1, D > zq - 0.1 ? 1 : 0.22, 0, S);\n    soft(line, X0, PY - SC * ayr, X1, PY - SC * byr, 1, S, 128);\n  }\n  // Ticks at the two edges of the side view mark the plane's height on the\n  // axis.\n  const ty = CY - SC * (zc - ZC) * ce, ty0 = floor(ty - 0.5), fy = ty - 0.5 - ty0;\n  for (const x of [0, 1, 62, 63])\n    for (let c = 0; c \u003c 2; c++) {\n      const yy = ty0 + c;\n      if (yy >= 0 && yy \u003c S) line[yy * W + x] += (c ? fy : 1 - fy) * (x === 0 || x === 63 ? 1 : 0.45);\n    }\n  for (let q = 0, o = 0; q \u003c N; q++, o += 3) {\n    const l = min(1, line[q] * 1.1);\n    const r = min(255, col[o]), g = min(255, col[o + 1]), b = min(255, col[o + 2]);\n    display.setPixel(q % W, (q / W) | 0, r + (255 - r) * l, g + (244 - g) * l, b + (205 - b) * l);\n  }\n}\n","layer":{"id":"layer-boys-surface","type":"code","name":"boys-surface","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Boy's Surface\n// Family:  topology\n// Idea:    Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Boy's surface (Werner Boy, 1901), in the parametrisation of Robert Bryant and Rob Kusner, pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan.\n// Knob 2: Speed. At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut.\n// Knob 4: Bands. Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light.\n// Buttons: K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.\n\nconst W = 64, S = 64, N = W * 128;\nconst { min, max, floor, sqrt, sin, cos, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The disk is sampled on NR rings of NA points; ring 0 is the centre.\nconst NR = 64, NA = 192, NP = (NR + 1) * NA, NC = NR * NA;\n// The surface lies within 1.571 of (0, 0, ZC), so 19.4 LEDs a unit keeps\n// it inside its square at every turn and tilt. The triple point is at the\n// origin, the top of the lobes at z = 0.443 and the pole at z = -2.\nconst ZC = -0.779, SC = 19.4, CX = 31.5, CY = 31.5, PY = 64 + 31.5;\nconst Z0 = -1.45, Z1 = 0.3;\n\n// Bryant and Kusner's formula for one point w = re + i im of the closed\n// unit disk, written out in real arithmetic.\nconst S5 = sqrt(5);\nfunction boy(re, im, out, o) {\n  const r2 = re * re - im * im, i2 = 2 * re * im;\n  const r3 = r2 * re - i2 * im, i3 = r2 * im + i2 * re;\n  const r4 = r2 * r2 - i2 * i2, i4 = 2 * r2 * i2;\n  const r6 = r3 * r3 - i3 * i3, i6 = 2 * r3 * i3;\n  const dr = r6 + S5 * r3 - 1, di = i6 + S5 * i3, dd = dr * dr + di * di;\n  // w (1 - w^4), w (1 + w^4) and 1 + w^6, each over the denominator.\n  const ar = re * (1 - r4) + im * i4, ai = im * (1 - r4) - re * i4;\n  const br = re * (1 + r4) - im * i4, bi = im * (1 + r4) + re * i4;\n  const g1 = (-1.5 * (ai * dr - ar * di)) / dd;\n  const g2 = (-1.5 * (br * dr + bi * di)) / dd;\n  const g3 = (i6 * dr - (1 + r6) * di) / dd - 0.5;\n  const g = g1 * g1 + g2 * g2 + g3 * g3;\n  out[o] = g1 / g;\n  out[o + 1] = g2 / g;\n  out[o + 2] = g3 / g;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points, normals and cells, once. The normal is\n// d/dRe x d/dIm of the map, the orientation of the disk: across the seam,\n// where antipodal points of the boundary circle meet, it points the other\n// way, and the colours follow it.\nfunction build(G) {\n  const P = G.p, Nn = G.n, T = new Float64Array(12);\n  for (let i = 0; i \u003c= NR; i++) {\n    const r = i / NR;\n    for (let j = 0; j \u003c NA; j++) {\n      const a = (TAU * j) / NA, re = r * cos(a), im = r * sin(a), k = i * NA + j, h = 1e-4;\n      boy(re, im, P, k * 3);\n      boy(re + h, im, T, 0);\n      boy(re - h, im, T, 3);\n      boy(re, im + h, T, 6);\n      boy(re, im - h, T, 9);\n      const ux = T[0] - T[3], uy = T[1] - T[4], uz = T[2] - T[5], vx = T[6] - T[9], vy = T[7] - T[10], vz = T[8] - T[11];\n      let nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;\n      const l = 1 / (sqrt(nx * nx + ny * ny + nz * nz) + 1e-30);\n      Nn[k * 3] = nx * l;\n      Nn[k * 3 + 1] = ny * l;\n      Nn[k * 3 + 2] = nz * l;\n    }\n  }\n  // The corners of each grid cell, and its mean height, which decides\n  // whether it is under the plane.\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j, o = c * 4, q = [c, c + NA, (i + 1) * NA + ((j + 1) % NA), i * NA + ((j + 1) % NA)];\n      for (let e = 0; e \u003c 4; e++) G.cc[o + e] = q[e];\n      G.cz[c] = (P[q[0] * 3 + 2] + P[q[1] * 3 + 2] + P[q[2] * 3 + 2] + P[q[3] * 3 + 2]) / 4;\n    }\n  // Cells of the grid by height: bin b lists every cell whose corners span\n  // a height in it, so the cut only looks at the cells near the plane.\n  const cnt = new Int32Array(NB + 1), lo = new Int32Array(NR * NA), hi = new Int32Array(NR * NA);\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j;\n      let a = 9, b = -9;\n      for (let e = 0; e \u003c 4; e++) (a = min(a, P[G.cc[c * 4 + e] * 3 + 2])), (b = max(b, P[G.cc[c * 4 + e] * 3 + 2]));\n      lo[c] = bin(a);\n      hi[c] = bin(b);\n      for (let k = lo[c]; k \u003c= hi[c]; k++) cnt[k + 1]++;\n    }\n  for (let k = 0; k \u003c NB; k++) cnt[k + 1] += cnt[k];\n  G.binAt = cnt.slice();\n  G.cells = new Int32Array(cnt[NB]);\n  for (let c = 0; c \u003c NR * NA; c++) for (let k = lo[c]; k \u003c= hi[c]; k++) G.cells[cnt[k]++] = c;\n}\n\n// Height bins for the cut, from the pole at -2 to the top at 0.45.\nconst NB = 96;\nconst bin = (z) => cl(floor(((z + 2.01) / 2.47) * NB), 0, NB - 1);\n\nexport function setup(params) {\n  const A = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    p: A(NP * 3), n: A(NP * 3), cc: I(NC * 4), cz: A(NC), binAt: null, cells: null,\n    // Each point's place in the side view, its depth there, and its row in the plan.\n    vx: A(NP), vy: A(NP), vd: A(NP), vp: A(NP),\n    // Depth and point per LED: the side view under the plane and over it,\n    // and the plan, which looks straight down on what is under it.\n    za: A(W * S), ia: I(W * S), zo: A(W * S), io: I(W * S), zp: A(W * S), ip: I(W * S),\n    line: A(N), col: A(N * 3), pal: A(12), c3: A(3), seg: A(4096 * 2), band: A(NR + 1),\n    L: [0, 1, 2].map(() => ({ a: A(W * S), b: A(W * S), c: A(W * S), f: new Int8Array(W * S), g: new Int8Array(W * S) })),\n    az: 0.4, sw: PI / 2, hold: 0, hw: 0, hue: 0, tilt: 0, bands: 0.06, zc: -0.5, palHue: -1, built: false,\n  };\n}\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const G = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  if (!G.built) build(G), (G.built = true);\n  G.hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3);\n  G.tilt = cl(k[2], 0, 1);\n  G.bands = cl(k[3], 0, 1);\n  // A third of a turn in 8.7 s and one sweep of the plane in 20 s at Speed 2.\n  G.az += d * sp * 0.12;\n  G.sw += (d * sp * TAU) / 40;\n  const b = input.btnPressed || [];\n  if (b[0]) G.hold = 6.6;\n  G.hold = max(0, G.hold - d);\n  // The plane eases over to the triple point, at z = 0, in 0.8 s, and back\n  // to its sweep in 0.8 s once the hold is over.\n  G.hw = cl(G.hw + (G.hold > 0.8 ? d : -d) / 0.8, 0, 1);\n  const zs = Z0 + (Z1 - Z0) * (0.5 - 0.5 * cos(G.sw));\n  G.zc = zs * (1 - sm(G.hw));\n}\n\n// Two colours for each face of the disk, one in the light and one in\n// shadow. A dim orange or yellow reads brown, so a face whose hue lies\n// between red and yellow turns crimson in shadow, and one between yellow\n// and green turns green; other faces lean a little toward violet.\nfunction palette(G) {\n  const t = G.pal;\n  for (let f = 0; f \u003c 2; f++) {\n    let h = G.hue + (f ? 0.52 : 0.92);\n    h -= floor(h);\n    const sh = h \u003c 0.17 ? 0.94 : h \u003c 0.33 ? 0.33 : h + cl(0.7 - h, -0.04, 0.04);\n    hsv(h, f ? 0.8 : 0.7, 1, t, f * 3);\n    hsv(sh, 0.85, 1, t, 6 + f * 3);\n  }\n  G.palHue = G.hue;\n}\n\n// A soft line one LED wide into the light buffer: points every half LED,\n// each shared between its four nearest LEDs.\nfunction soft(buf, x0, y0, x1, y1, w, ylo, yhi) {\n  const n = max(1, Math.ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) * 2)), ww = (w * sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2)) / n;\n  for (let i = 0; i \u003c n; i++) {\n    const t = (i + 0.5) / n, x = x0 + (x1 - x0) * t - 0.5, y = y0 + (y1 - y0) * t - 0.5;\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy;\n    for (let c = 0; c \u003c 4; c++) {\n      const xx = ix + (c & 1), yy = iy + (c >> 1);\n      if (xx \u003c 0 || xx >= W || yy \u003c ylo || yy >= yhi) continue;\n      buf[yy * W + xx] += ww * (c & 1 ? fx : 1 - fx) * (c >> 1 ? fy : 1 - fy);\n    }\n  }\n}\n\n// The colour of point k on face f in a view whose right, up and\n// toward-the-eye axes carry the normal to (a, b, c), into G.c3. The light is\n// two-sided Lambert from upper left in front, with a highlight, and the\n// disk's circles stripe it.\nfunction shade(G, k, a, b, c, gain, f) {\n  const pal = G.pal, sg = f ? -1 : 1, o = f * 3, so = 6 + o;\n  const ld = max(0, sg * (a * LX + b * LY + c * LZ)), h2 = max(0, sg * (a * HX + b * HY + c * HZ)) ** 2, h8 = (h2 * h2) ** 2;\n  // The shadow colour gives way to the lit one with the square of the light,\n  // and later still in the dimmed glass and plan.\n  const lit = (0.24 + 0.76 * ld) * G.band[(k / NA) | 0] * gain, sp = h8 * h8 * h8 * 0.55 * gain, m = ld * ld * gain;\n  G.c3[0] = ((pal[so] + (pal[o] - pal[so]) * m) * lit + sp) * 255;\n  G.c3[1] = ((pal[so + 1] + (pal[o + 1] - pal[so + 1]) * m) * lit + sp) * 255;\n  G.c3[2] = ((pal[so + 2] + (pal[o + 2] - pal[so + 2]) * m) * lit + sp) * 255;\n}\nconst LX = -0.45, LY = 0.62, LZ = 0.64, HL = 1 / sqrt(LX * LX + LY * LY + (LZ + 1) ** 2), HX = LX * HL, HY = LY * HL, HZ = (LZ + 1) * HL;\n\n// One grid cell into a depth buffer: every LED whose centre lies in the\n// box round its four corners. The boxes of neighbouring cells overlap, so\n// the turning surface has no holes.\nfunction fill(zb, ib, X, Y, cc, o, D, k) {\n  const a = cc[o], b = cc[o + 1], c = cc[o + 2], d = cc[o + 3];\n  let xa = X[a], xb = X[b], ya = Y[a], yb = Y[b];\n  if (xa > xb) (xb = xa), (xa = X[b]);\n  if (ya > yb) (yb = ya), (ya = Y[b]);\n  let t = X[c];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = X[d];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = Y[c];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  t = Y[d];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  // LED centres sit at whole numbers plus a half.\n  let x0 = (xa - 0.5) | 0, y0 = (ya - 0.5) | 0, x1 = (xb + 0.5) | 0, y1 = (yb + 0.5) | 0;\n  if (xa - 0.5 > x0) x0++;\n  if (ya - 0.5 > y0) y0++;\n  if (x0 \u003c 0) x0 = 0;\n  if (y0 \u003c 0) y0 = 0;\n  if (x1 > W) x1 = W;\n  if (y1 > S) y1 = S;\n  for (let yy = y0; yy \u003c y1; yy++) for (let q = yy * W + x0, qe = yy * W + x1; q \u003c qe; q++) if (D > zb[q]) (zb[q] = D), (ib[q] = k);\n}\n\n// Every cell into the side view's solid or glass layer by its mean height,\n// at the mean depth of its corners, and the solid ones into the plan too.\nfunction cellsIn(G, zc) {\n  const { cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip } = G;\n  for (let c = 0, o = 0; c \u003c NC; c++, o += 4) {\n    const k = cc[o], D = (vd[k] + vd[cc[o + 1]] + vd[cc[o + 2]] + vd[cc[o + 3]]) * 0.25;\n    if (cz[c] \u003c= zc) fill(za, ia, vx, vy, cc, o, D, k), fill(zp, ip, vx, vp, cc, o, cz[c], k);\n    else fill(zo, io, vx, vy, cc, o, D, k);\n  }\n}\n\n// The normal of each LED's point in the eye's frame (right, up, toward the\n// eye; the plan looks down the axis) and the face of the disk it shows. A\n// lone LED showing the other face from every lit neighbour is a cell's box\n// poking past a fold, and takes their face.\nfunction normals(G, ids, ca, sa, ce, se, plan, L) {\n  const n = G.n, { a, b, c, f, g } = L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const k = ids[q];\n    if (k \u003c 0) {\n      f[q] = -1;\n      continue;\n    }\n    const nx = n[k * 3], ny = n[k * 3 + 1], nz = n[k * 3 + 2], nyr = nx * sa + ny * ca;\n    a[q] = nx * ca - ny * sa;\n    b[q] = plan ? nyr : nyr * se + nz * ce;\n    c[q] = plan ? nz : nz * se - nyr * ce;\n    f[q] = c[q] >= 0 ? 0 : 1;\n  }\n  for (let q = 0; q \u003c W * S; q++) {\n    const fq = (g[q] = f[q]);\n    if (fq \u003c 0) continue;\n    const x = q & (W - 1), l = x > 0 ? f[q - 1] : -1, r = x \u003c W - 1 ? f[q + 1] : -1, u = q >= W ? f[q - W] : -1, d = q \u003c W * S - W ? f[q + W] : -1;\n    if (l !== fq && r !== fq && u !== fq && d !== fq && (l >= 0) + (r >= 0) + (u >= 0) + (d >= 0) >= 2) g[q] = 1 - fq;\n  }\n}\n\nexport function draw(display, params) {\n  const G = params.s;\n  if (!G || !G.built) return;\n  if (G.palHue !== G.hue) palette(G);\n  const { p, n, cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip, line, col, seg, c3 } = G;\n  const ca = cos(G.az), sa = sin(G.az), el = (22 + 68 * G.tilt) * (PI / 180), ce = cos(el), se = sin(el), zc = G.zc;\n  // The disk's circles: each ring of the grid is lit by its band, from 1.2\n  // on the light stripes to 0.35 in the middle of the dark ones.\n  const nb = 2 + 7 * G.bands;\n  for (let i = 0; i \u003c= NR; i++) G.band[i] = 1.2 - 0.85 * (0.5 - 0.5 * cos((TAU * nb * (NR - i)) / NR));\n  za.fill(-1e9);\n  zo.fill(-1e9);\n  zp.fill(-1e9);\n  ia.fill(-1);\n  io.fill(-1);\n  ip.fill(-1);\n  // The side view in two layers: what is under the plane is solid, what is\n  // over it is glass. The plan takes what is under the plane, nearest the\n  // eye above first.\n  for (let k = 0, o = 0; k \u003c NP; k++, o += 3) {\n    const x = p[o], y = p[o + 1], z = p[o + 2], xr = x * ca - y * sa, yr = x * sa + y * ca;\n    vx[k] = CX + SC * xr;\n    vy[k] = CY - SC * (yr * se + (z - ZC) * ce);\n    vd[k] = z * se - yr * ce;\n    vp[k] = CY - SC * yr;\n  }\n  cellsIn(G, zc);\n  normals(G, ia, ca, sa, ce, se, false, G.L[0]);\n  normals(G, io, ca, sa, ce, se, false, G.L[1]);\n  normals(G, ip, ca, sa, ce, se, true, G.L[2]);\n  const [A, O, Pl] = G.L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const o = q * 3, oo = (W * S + q) * 3;\n    let r = 0, g = 0, b = 0, k = ia[q];\n    if (k >= 0) shade(G, k, A.a[q], A.b[q], A.c[q], 1, A.g[q]), (r = c3[0]), (g = c3[1]), (b = c3[2]);\n    k = io[q];\n    if (k >= 0 && zo[q] > za[q]) {\n      // Glass: 60 percent of its own light over 55 of what is behind.\n      shade(G, k, O.a[q], O.b[q], O.c[q], 0.6, O.g[q]);\n      (r = r * 0.55 + c3[0]), (g = g * 0.55 + c3[1]), (b = b * 0.55 + c3[2]);\n    }\n    (col[o] = r), (col[o + 1] = g), (col[o + 2] = b);\n    k = ip[q];\n    if (k >= 0) shade(G, k, Pl.a[q], Pl.b[q], Pl.c[q], 0.5, Pl.g[q]), (col[oo] = c3[0]), (col[oo + 1] = c3[1]), (col[oo + 2] = c3[2]);\n    else col[oo] = col[oo + 1] = col[oo + 2] = 0;\n  }\n  // The cut: in each grid cell the plane crosses, the points where it\n  // crosses the cell's edges, two to a piece of the curve (four in a\n  // saddle, paired in order round the cell).\n  line.fill(0);\n  let ns = 0;\n  const bz = bin(zc), cells = G.cells, zs = [0, 0, 0, 0], cs = [0, 0, 0, 0];\n  for (let m = G.binAt[bz]; m \u003c G.binAt[bz + 1] && ns \u003c 2040; m++) {\n    const c = cells[m];\n    for (let e = 0; e \u003c 4; e++) cs[e] = cc[c * 4 + e];\n    let up = 0;\n    for (let e = 0; e \u003c 4; e++) up += (zs[e] = p[cs[e] * 3 + 2] - zc) > 0;\n    if (up === 0 || up === 4) continue;\n    for (let e = 0; e \u003c 4; e++) {\n      const z0 = zs[e], z1 = zs[(e + 1) & 3];\n      if (z0 > 0 === z1 > 0) continue;\n      const t = z0 / (z0 - z1), A = cs[e] * 3, B = cs[(e + 1) & 3] * 3;\n      seg[ns * 2] = p[A] + (p[B] - p[A]) * t;\n      seg[ns * 2 + 1] = p[A + 1] + (p[B + 1] - p[A + 1]) * t;\n      ns++;\n    }\n  }\n  // Each piece soft in both views; in the side view a piece behind the\n  // solid is faint.\n  for (let s = 0; s + 1 \u003c ns; s += 2) {\n    const ax = seg[s * 2], ay = seg[s * 2 + 1], bx = seg[s * 2 + 2], by = seg[s * 2 + 3];\n    const axr = ax * ca - ay * sa, ayr = ax * sa + ay * ca, bxr = bx * ca - by * sa, byr = bx * sa + by * ca;\n    const X0 = CX + SC * axr, X1 = CX + SC * bxr, Y0 = CY - SC * (ayr * se + (zc - ZC) * ce), Y1 = CY - SC * (byr * se + (zc - ZC) * ce);\n    const D = zc * se - ((ayr + byr) / 2) * ce, qx = Math.round((X0 + X1) / 2 - 0.5), qy = Math.round((Y0 + Y1) / 2 - 0.5);\n    const zq = qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c S ? za[qy * W + qx] : -1e9;\n    soft(line, X0, Y0, X1, Y1, D > zq - 0.1 ? 1 : 0.22, 0, S);\n    soft(line, X0, PY - SC * ayr, X1, PY - SC * byr, 1, S, 128);\n  }\n  // Ticks at the two edges of the side view mark the plane's height on the\n  // axis.\n  const ty = CY - SC * (zc - ZC) * ce, ty0 = floor(ty - 0.5), fy = ty - 0.5 - ty0;\n  for (const x of [0, 1, 62, 63])\n    for (let c = 0; c \u003c 2; c++) {\n      const yy = ty0 + c;\n      if (yy >= 0 && yy \u003c S) line[yy * W + x] += (c ? fy : 1 - fy) * (x === 0 || x === 63 ? 1 : 0.45);\n    }\n  for (let q = 0, o = 0; q \u003c N; q++, o += 3) {\n    const l = min(1, line[q] * 1.1);\n    const r = min(255, col[o]), g = min(255, col[o + 1]), b = min(255, col[o + 2]);\n    display.setPixel(q % W, (q / W) | 0, r + (255 - r) * l, g + (244 - g) * l, b + (205 - b) * l);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower."},{"name":"Tilt","min":0,"max":1,"about":"The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut."},{"name":"Bands","min":0,"max":1,"about":"Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light."}],"start":[0,2,0,0.06],"measures":{"motion":0.2388,"detail":0.0514,"edges":0.351,"complexity":1.1851,"coverage":0.4559,"colour":0.1933,"drift":0.0801},"knobResponse":[0.0711,0.1334,0.081,0.0395]},{"slug":"brachistochrone","title":"Brachistochrone","family":"physics","round":39,"note":"왼쪽 위 한 점에서 구슬 다섯이 직선, 갈릴레이의 원호, 포물선, 깊이 떨어지는 길, 사이클로이드를 타고 함께 미끄러져요. 직선보다 긴 길을 타는 사이클로이드의 구슬이 먼저 닿고, 구슬이 지금까지 닿을 수 있는 점들의 앞면이 고리를 남기며 패널 아래까지 퍼져요. 한 판 걸러 사이클로이드의 여러 높이에서 놓은 구슬이 바닥에 함께 닿아요.","idea":"Beads let go together from a point at the top left slide without friction down five tracks to a point on the right, a straight line, Galileo's circle, a parabola, a deep drop to the bottom of the panel and the cycloid, while the curve of all the points a bead could have reached by now spreads from the start down the whole panel and leaves rings behind; the cycloid's bead rides that front all the way and arrives first on a track longer than the line, the tracks light up in the order their beads come in, and every second race six beads let go from different heights on the cycloid all reach its bottom at once.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Brachistochrone\n// Family:  physics\n// Idea:    Beads let go together from a point at the top left slide without friction down five tracks to a point on the right, a straight line, Galileo's circle, a parabola, a deep drop to the bottom of the panel and the cycloid, while the curve of all the points a bead could have reached by now spreads from the start down the whole panel and leaves rings behind; the cycloid's bead rides that front all the way and arrives first on a track longer than the line, the tracks light up in the order their beads come in, and every second race six beads let go from different heights on the cycloid all reach its bottom at once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the brachistochrone problem (Johann Bernoulli, 1696), solved by the cycloid, and the tautochrone (Christiaan Huygens, 1673), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=0.2..3, End=0..1, Tracks=5..13\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the cycloid gold, Galileo's circle violet, the parabola green, the line cyan, the deep drop rose, and the front and its rings pale blue. From 0.33 to 0.68, where the front would turn red, orange, yellow or lime, it is paled and lifted so it reads cream, never brown.\n// Knob 2: Gravity. At 2 g is 31 LEDs a second squared: the cycloid's bead takes 2.4 s, the line's 2.84 s and the deep drop's 4.27 s, then the finish holds 1.3 s and fades in 0.6 s. Every time goes as one over the square root of g, so at 0.2 the race takes 3.2 times as long and at 3 it is 1.22 times as fast.\n// Knob 3: End. Where the end point sits on the right edge. At 0 at row 39, the bottom of the cycloid's arch, where the cycloid wins by 1.2% over the circle, 4.3% over the parabola and 18.5% over the line. Turned up the end point rises to row 13 and the cycloid dips 10 rows below it and climbs back, now 37.6% ahead of the circle and 74% ahead of the line; the beads of the second race pass the bottom of the arch together and those let go below the end swing back and meet there again.\n// Knob 4: Tracks. How many tracks race. At 5 the cycloid and its four classic rivals; each step adds another smooth track from the start to the end, eight more at 13, some starting shallow and some dipping below the end. None of them beats the cycloid.\n\nconst W = 64, H = 128, N = W * H;\n// The start point A, and the column the end point B sits in.\nconst AX = 3, AY = 3, BX = 60, DX = BX - AX;\n// B's depth below A: at End 0 the bottom of the arch, 2/pi of the width; at\n// End 1 ten rows. The deep drop always falls to row 124.\nconst BY0 = (2 * DX) / Math.PI, BY1 = 10, YDEEP = 121;\n// g at Gravity 2, in LEDs a second squared: the cycloid's race at End 0 then\n// takes 2.4 s.\nconst G2 = 31.1;\n// Points in each track's table, and the seconds of the hold, the fade, the\n// wait at the start and the light trail behind a bead.\nconst M = 640, HOLD = 1.3, FADE = 0.6, WAIT = 0.5, TRAIL = 0.28;\n// Rings of the front left behind every sixth of the cycloid's time.\nconst RINGS = 6;\n// Track colours, hue and saturation: the cycloid, Galileo's circle, the\n// parabola, the line, the deep drop, then the extra tracks.\nconst COL = [[0.13, 0.62], [0.79, 0.55], [0.35, 0.6], [0.5, 0.6], [0.96, 0.55]];\n// Extra tracks: the angle they leave A at, degrees from straight down; the\n// angle they come into B at, degrees below level (negative: coming up); and\n// the lengths of their two handles as shares of the chord.\nconst EXTRA = [[62, 12, 0.45, 0.3], [14, -35, 0.55, 0.45], [38, 38, 0.4, 0.4], [4, 2, 0.85, 0.3], [74, 55, 0.5, 0.35], [24, -55, 0.8, 0.5], [50, -12, 0.5, 0.35], [9, 22, 0.6, 0.3]];\nconst EXH = [0.06, 0.24, 0.43, 0.56, 0.68, 0.88, 0.17, 0.74];\nconst { floor, min, max, abs, sqrt, exp, sin, cos, acos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, q, p, p, t, v][i], [t, v, v, q, p, p][i], [p, p, t, v, v, q][i]];\n}\n\n// The cycloid from A through a point bx across and by down: the angle the\n// rolling circle has turned at that point, and its radius a.\nfunction cycloidTo(bx, by) {\n  const r = bx / by;\n  let lo = 1e-9, hi = 2 * PI - 1e-9;\n  for (let i = 0; i \u003c 56; i++) {\n    const m = (lo + hi) / 2, s = sin(m / 2);\n    if ((m - sin(m)) / (2 * s * s) \u003c r) lo = m;\n    else hi = m;\n  }\n  const th = (lo + hi) / 2, s = sin(th / 2);\n  return [th, by / (2 * s * s)];\n}\n\n// A track from a curve f(u), u from 0 at A to 1 at B, sampled densely at both\n// ends. Times are in units where g = 1: each chord is taken at constant\n// slope, so the bead's time on it is exactly its length over the mean of the\n// speeds sqrt(2y) at its two ends, and the sum is the time of the polyline.\nfunction track(f, hue, sat) {\n  const x = new Float32Array(M), y = new Float32Array(M), t = new Float64Array(M);\n  let px = 0, py = 0;\n  for (let i = 0; i \u003c M; i++) {\n    const u = 0.5 - 0.5 * cos((PI * i) / (M - 1)), p = f(u);\n    x[i] = p[0];\n    y[i] = max(0, p[1]);\n    if (i) t[i] = t[i - 1] + (Math.hypot(x[i] - px, y[i] - py) * Math.SQRT2) / (sqrt(py) + sqrt(y[i]) || 1);\n    px = x[i];\n    py = y[i];\n  }\n  return { x, y, t, T: t[M - 1], hue, sat, pix: null, wt: null, at: -1 };\n}\n\nfunction bezier(P) {\n  return (u) => {\n    const v = 1 - u, a = v * v * v, b = 3 * v * v * u, c = 3 * v * u * u, d = u * u * u;\n    return [a * P[0] + b * P[2] + c * P[4] + d * P[6], a * P[1] + b * P[3] + c * P[5] + d * P[7]];\n  };\n}\n\n// Lay a track into the panel as a thin core and a soft halo, kept as a list\n// of the pixels it touches.\nfunction rasterize(S, k) {\n  const R = S.tmp;\n  R.fill(0);\n  const { x, y } = k;\n  for (let i = 1; i \u003c M; i++) {\n    const x0 = x[i - 1] + AX, y0 = y[i - 1] + AY, len = Math.hypot(x[i] + AX - x0, y[i] + AY - y0), n = Math.ceil(len / 0.4);\n    for (let j = 0; j \u003c n; j++) {\n      const f = (j + 0.5) / n, px = x0 + (x[i] + AX - x0) * f, py = y0 + (y[i] + AY - y0) * f, w = len / n;\n      const ix = round(px), iy = round(py);\n      for (let b = -2; b \u003c= 2; b++) {\n        const yy = iy + b;\n        if (yy \u003c 0 || yy >= H) continue;\n        for (let a = -2; a \u003c= 2; a++) {\n          const xx = ix + a;\n          if (xx \u003c 0 || xx >= W) continue;\n          const d2 = (xx - px) ** 2 + (yy - py) ** 2;\n          R[yy * W + xx] += w * (0.75 * exp(-d2 / 0.5) + 0.07 * exp(-d2 / 5));\n        }\n      }\n    }\n  }\n  const pix = [], wt = [];\n  for (let p = 0; p \u003c N; p++)\n    if (R[p] > 0.01) {\n      pix.push(p);\n      wt.push(min(1.2, R[p]));\n    }\n  k.pix = Int32Array.from(pix);\n  k.wt = Float32Array.from(wt);\n}\n\n// Every track for the end point's place, and the cycloid's numbers.\nfunction build(S) {\n  const bx = DX, by = BY0 * (BY1 / BY0) ** S.end;\n  const [th, a] = cycloidTo(bx, by);\n  S.by = by;\n  S.th = th;\n  S.a = a;\n  const tr = [];\n  // The cycloid, the curve a point on a rolling circle draws.\n  tr.push(track((u) => [a * (th * u - sin(th * u)), 2 * a * sin((th * u) / 2) ** 2], ...COL[0]));\n  // Galileo's circle: the arc down to B whose lowest point is B.\n  const R = (bx * bx + by * by) / (2 * by), cy = by - R, a0 = Math.atan2(-cy, -bx);\n  tr.push(track((u) => [bx + R * cos(a0 + (PI / 2 - a0) * u), cy + R * sin(a0 + (PI / 2 - a0) * u)], ...COL[1]));\n  // The parabola whose lowest point is B.\n  tr.push(track((u) => [bx * u, by * (1 - (1 - u) ** 2)], ...COL[2]));\n  // The straight line, the shortest way.\n  tr.push(track((u) => [bx * u, by * u], ...COL[3]));\n  // The deep drop: straight down the left side to row 124, along the bottom\n  // and up into B. D is found so that its lowest point is there.\n  let lo = by, hi = 4 * YDEEP;\n  for (let i = 0; i \u003c 30; i++) {\n    const D = (lo + hi) / 2;\n    let m = 0;\n    for (let j = 1; j \u003c 64; j++) {\n      const u = j / 64;\n      m = max(m, 3 * u * (1 - u) * D + u * u * u * by);\n    }\n    if (m \u003c YDEEP) lo = D;\n    else hi = D;\n  }\n  tr.push(track(bezier([0, 0, 0, lo, bx, lo, bx, by]), ...COL[4]));\n  const C = Math.hypot(bx, by);\n  for (let j = 0; j \u003c S.ntr - 5; j++) {\n    const [p, q, h1, h2] = EXTRA[j], pa = (p * PI) / 180, qa = (q * PI) / 180;\n    tr.push(track(bezier([0, 0, h1 * C * sin(pa), h1 * C * cos(pa), bx - h2 * C * cos(qa), by - h2 * C * sin(qa), bx, by]), EXH[j], 0.5));\n  }\n  for (const k of tr) rasterize(S, k);\n  // Keep the arrivals already seen in this race.\n  if (S.tracks) for (let i = 0; i \u003c tr.length && i \u003c S.tracks.length; i++) if (S.tracks[i].at >= 0 && S.tau >= tr[i].T) tr[i].at = S.tracks[i].at;\n  S.tracks = tr;\n  S.tauB = th * sqrt(a);\n}\n\n// Where the field of least times is: the time of the cycloid from A through\n// each pixel, the fastest way there, and the bead's speed there. The front at\n// time t is the curve these times equal t on, and all of it moves at the speed\n// a bead would have there, so its distance in LEDs is the time to go times\n// that speed.\nfunction field(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dy = y - AY, dx = abs(x - AX);\n      if (dy \u003c 0 || (dy === 0 && dx === 0)) {\n        S.tau0[p] = dy \u003c 0 ? 1e9 : 0;\n        S.q[p] = 0;\n        continue;\n      }\n      if (dy === 0) S.tau0[p] = 2 * PI * sqrt(dx / (2 * PI));\n      else {\n        const [th, a] = cycloidTo(dx, dy);\n        S.tau0[p] = th * sqrt(a);\n      }\n      S.q[p] = sqrt(2 * dy);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, g: G2, end: -1, ntr: 0, tracks: null, mode: 0, phase: 0, clock: 0, tau: 0, fade: 1, t: 0, meet: [],\n    tau0: new Float32Array(N), q: new Float32Array(N), tmp: new Float32Array(N),\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N),\n  };\n  field(params.s);\n}\n\n// The tautochrone: from rest at arc length s0 above the bottom of the arch, a\n// bead's arc length is s0 cos(t sqrt(g / 4a)), whatever s0 is.\nfunction tautoBeads(S) {\n  const a = S.a, out = [];\n  for (let j = 0; j \u003c 6; j++) out.push(4 * a * (1 - j / 6));\n  return out;\n}\nfunction onCycloid(S, s) {\n  const th = 2 * acos(cl(s / (4 * S.a), -1, 1));\n  return [S.a * (th - sin(th)), S.a * (1 - cos(th)), th];\n}\n\n// The race's last moment, in g = 1 time.\nfunction raceEnd(S) {\n  if (S.mode === 0) {\n    let m = 0;\n    for (const k of S.tracks) m = max(m, k.T);\n    return m;\n  }\n  const bot = PI * sqrt(S.a);\n  return S.th \u003c= PI + 1e-6 ? S.tauB : 3 * bot;\n}\n\nfunction at(k, tau) {\n  const t = k.t;\n  if (tau >= k.T) return [k.x[M - 1], k.y[M - 1]];\n  if (tau \u003c= 0) return [0, 0];\n  let lo = 0, hi = M - 1;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (t[m] \u003c= tau) lo = m;\n    else hi = m;\n  }\n  const f = (tau - t[lo]) / (t[hi] - t[lo] || 1);\n  return [k.x[lo] + (k.x[hi] - k.x[lo]) * f, k.y[lo] + (k.y[hi] - k.y[lo]) * f];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 5], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.g = G2 * (cl(k[1], 0.2, 3) / 2);\n  const end = cl(k[2], 0, 1), ntr = round(cl(k[3], 5, 13));\n  if (abs(end - S.end) > 0.002 || ntr !== S.ntr) {\n    S.end = end;\n    S.ntr = ntr;\n    build(S);\n  }\n  const sg = sqrt(S.g);\n  S.t += d;\n  S.clock += d;\n  if (S.phase === 0 && S.clock >= WAIT) {\n    S.phase = 1;\n    S.tau = 0;\n  } else if (S.phase >= 1) {\n    const before = S.tau;\n    S.tau += d * sg;\n    if (S.mode === 0)\n      for (const tk of S.tracks)\n        // The arrival, placed inside the frame where it fell.\n        if (tk.at \u003c 0 && S.tau >= tk.T) tk.at = S.t - (S.tau - tk.T) / sg;\n    if (S.mode === 1 && S.th >= PI - 1e-6) {\n      const bot = PI * sqrt(S.a);\n      for (const m of [bot, 3 * bot]) if (before \u003c m && S.tau >= m) S.meet.push(S.t - (S.tau - m) / sg);\n    }\n    if (S.phase === 1 && S.tau >= raceEnd(S)) {\n      S.phase = 2;\n      S.clock = 0;\n    } else if (S.phase === 2 && S.clock >= HOLD) {\n      S.phase = 3;\n      S.clock = 0;\n    } else if (S.phase === 3) {\n      S.fade = 1 - S.clock / FADE;\n      if (S.clock >= FADE) {\n        S.phase = 0;\n        S.clock = 0;\n        S.fade = 1;\n        S.tau = 0;\n        S.mode ^= 1;\n        S.meet = [];\n        for (const tk of S.tracks) tk.at = -1;\n      }\n    }\n  }\n}\n\n// A soft dot of light into the colour buffers.\nfunction dot(S, x, y, r, w, c) {\n  const xi = round(x + AX), yi = round(y + AY), k = -1 / (r * r);\n  for (let j = yi - 2; j \u003c= yi + 2; j++) {\n    if (j \u003c 0 || j >= H) continue;\n    for (let i = xi - 2; i \u003c= xi + 2; i++) {\n      if (i \u003c 0 || i >= W) continue;\n      const e = w * exp(((i - x - AX) ** 2 + (j - y - AY) ** 2) * k), p = j * W + i;\n      S.R[p] += e * c[0];\n      S.G[p] += e * c[1];\n      S.B[p] += e * c[2];\n    }\n  }\n}\n\nfunction ring(S, x, y, age, c) {\n  const r = 1.5 + 16 * age, w = 0.8 * exp(-age / 0.22), n = round(6 * r + 8);\n  if (w \u003c 0.03) return;\n  for (let j = 0; j \u003c n; j++) {\n    const a = (2 * PI * j) / n;\n    dot(S, x + r * cos(a), y + r * sin(a), 0.7, w, c);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tracks) return;\n  const { R, G, B, tau0, q } = S;\n  const fade = S.phase === 3 ? S.fade : 1, live = S.phase >= 1, tau = live ? S.tau : 0, sg = sqrt(S.g);\n  // The front, the light it leaves behind and its rings, pale blue.\n  const fh = 0.6 + S.hue, dh = abs(fh - floor(fh) - 0.11), warm = cl(1.9 - min(dh, 1 - dh) / 0.09, 0, 1);\n  // Orange and yellow go brown this faint: there the front is paled and lifted.\n  const fc = hsv(fh, 0.5 - 0.3 * warm, 1 + 0.4 * warm), rk = S.tauB / RINGS;\n  const nring = live ? floor(tau / rk) : 0;\n  for (let p = 0; p \u003c N; p++) {\n    let v = 0;\n    if (live && q[p] > 0) {\n      const dd = (tau0[p] - tau) * q[p];\n      if (dd \u003c 2.5) {\n        if (dd > -2.5) v += 0.55 * exp(-dd * dd);\n        if (dd \u003c 0) v += 0.09 + 0.16 * exp(dd / 7);\n        for (let r = 1; r \u003c= nring; r++) {\n          const e = (tau0[p] - r * rk) * q[p];\n          if (e > -2 && e \u003c 2) v += 0.24 * exp(-e * e * 2);\n        }\n      }\n    }\n    v *= fade;\n    R[p] = v * fc[0];\n    G[p] = v * fc[1];\n    B[p] = v * fc[2];\n  }\n  // The tracks, faint, each lit up when its bead arrives and staying lit.\n  const tc = [];\n  for (const k of S.tracks) {\n    const c = hsv(k.hue + S.hue, k.sat, 1);\n    tc.push(c);\n    let f = 0.3;\n    if (S.mode === 1 && k !== S.tracks[0]) f = 0.16;\n    if (k.at >= 0) {\n      const age = S.t - k.at;\n      f += fade * (0.22 + 0.5 * exp(-age / 0.3));\n    }\n    for (let i = 0; i \u003c k.pix.length; i++) {\n      const p = k.pix[i], w = k.wt[i] * f;\n      R[p] += w * c[0];\n      G[p] += w * c[1];\n      B[p] += w * c[2];\n    }\n  }\n  const white = [1, 1, 1], bx = DX, by = S.by;\n  if (live) {\n    const dtr = (TRAIL * sg) / 12;\n    if (S.mode === 0)\n      S.tracks.forEach((k, i) => {\n        const c = tc[i];\n        if (k.at >= 0) {\n          ring(S, bx, by, S.t - k.at, c);\n          if (S.t - k.at > 0.15) return;\n        }\n        for (let j = 12; j >= 1; j--) {\n          const p = at(k, tau - j * dtr);\n          dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n        }\n        const p = at(k, tau);\n        dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n        dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n      });\n    else {\n      // The second race: beads from six heights on the cycloid, the one at A\n      // the same bead as in the race.\n      const c = tc[0], w = 1 / (2 * sqrt(S.a)), sB = 4 * S.a * cos(S.th / 2);\n      for (const s0 of tautoBeads(S)) {\n        // A bead let go above the end point's height leaves the track there.\n        const tEnd = s0 >= abs(sB) - 1e-6 ? acos(cl(sB / s0, -1, 1)) / w : 1e9;\n        if (tau > tEnd + 0.15 * sg) continue;\n        for (let j = 12; j >= 0; j--) {\n          const tt = min(max(0, tau - j * dtr), tEnd), p = onCycloid(S, s0 * cos(tt * w));\n          if (j) dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n          else {\n            dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n            dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n          }\n        }\n      }\n      for (const m of S.meet) ring(S, PI * S.a, 2 * S.a, S.t - m, c);\n    }\n  }\n  // A and B.\n  dot(S, 0, 0, 0.9, 0.7, white);\n  dot(S, bx, by, 0.9, 0.7, white);\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n}\n","layer":{"id":"layer-brachistochrone","type":"code","name":"brachistochrone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Brachistochrone\n// Family:  physics\n// Idea:    Beads let go together from a point at the top left slide without friction down five tracks to a point on the right, a straight line, Galileo's circle, a parabola, a deep drop to the bottom of the panel and the cycloid, while the curve of all the points a bead could have reached by now spreads from the start down the whole panel and leaves rings behind; the cycloid's bead rides that front all the way and arrives first on a track longer than the line, the tracks light up in the order their beads come in, and every second race six beads let go from different heights on the cycloid all reach its bottom at once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the brachistochrone problem (Johann Bernoulli, 1696), solved by the cycloid, and the tautochrone (Christiaan Huygens, 1673), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=0.2..3, End=0..1, Tracks=5..13\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the cycloid gold, Galileo's circle violet, the parabola green, the line cyan, the deep drop rose, and the front and its rings pale blue. From 0.33 to 0.68, where the front would turn red, orange, yellow or lime, it is paled and lifted so it reads cream, never brown.\n// Knob 2: Gravity. At 2 g is 31 LEDs a second squared: the cycloid's bead takes 2.4 s, the line's 2.84 s and the deep drop's 4.27 s, then the finish holds 1.3 s and fades in 0.6 s. Every time goes as one over the square root of g, so at 0.2 the race takes 3.2 times as long and at 3 it is 1.22 times as fast.\n// Knob 3: End. Where the end point sits on the right edge. At 0 at row 39, the bottom of the cycloid's arch, where the cycloid wins by 1.2% over the circle, 4.3% over the parabola and 18.5% over the line. Turned up the end point rises to row 13 and the cycloid dips 10 rows below it and climbs back, now 37.6% ahead of the circle and 74% ahead of the line; the beads of the second race pass the bottom of the arch together and those let go below the end swing back and meet there again.\n// Knob 4: Tracks. How many tracks race. At 5 the cycloid and its four classic rivals; each step adds another smooth track from the start to the end, eight more at 13, some starting shallow and some dipping below the end. None of them beats the cycloid.\n\nconst W = 64, H = 128, N = W * H;\n// The start point A, and the column the end point B sits in.\nconst AX = 3, AY = 3, BX = 60, DX = BX - AX;\n// B's depth below A: at End 0 the bottom of the arch, 2/pi of the width; at\n// End 1 ten rows. The deep drop always falls to row 124.\nconst BY0 = (2 * DX) / Math.PI, BY1 = 10, YDEEP = 121;\n// g at Gravity 2, in LEDs a second squared: the cycloid's race at End 0 then\n// takes 2.4 s.\nconst G2 = 31.1;\n// Points in each track's table, and the seconds of the hold, the fade, the\n// wait at the start and the light trail behind a bead.\nconst M = 640, HOLD = 1.3, FADE = 0.6, WAIT = 0.5, TRAIL = 0.28;\n// Rings of the front left behind every sixth of the cycloid's time.\nconst RINGS = 6;\n// Track colours, hue and saturation: the cycloid, Galileo's circle, the\n// parabola, the line, the deep drop, then the extra tracks.\nconst COL = [[0.13, 0.62], [0.79, 0.55], [0.35, 0.6], [0.5, 0.6], [0.96, 0.55]];\n// Extra tracks: the angle they leave A at, degrees from straight down; the\n// angle they come into B at, degrees below level (negative: coming up); and\n// the lengths of their two handles as shares of the chord.\nconst EXTRA = [[62, 12, 0.45, 0.3], [14, -35, 0.55, 0.45], [38, 38, 0.4, 0.4], [4, 2, 0.85, 0.3], [74, 55, 0.5, 0.35], [24, -55, 0.8, 0.5], [50, -12, 0.5, 0.35], [9, 22, 0.6, 0.3]];\nconst EXH = [0.06, 0.24, 0.43, 0.56, 0.68, 0.88, 0.17, 0.74];\nconst { floor, min, max, abs, sqrt, exp, sin, cos, acos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, q, p, p, t, v][i], [t, v, v, q, p, p][i], [p, p, t, v, v, q][i]];\n}\n\n// The cycloid from A through a point bx across and by down: the angle the\n// rolling circle has turned at that point, and its radius a.\nfunction cycloidTo(bx, by) {\n  const r = bx / by;\n  let lo = 1e-9, hi = 2 * PI - 1e-9;\n  for (let i = 0; i \u003c 56; i++) {\n    const m = (lo + hi) / 2, s = sin(m / 2);\n    if ((m - sin(m)) / (2 * s * s) \u003c r) lo = m;\n    else hi = m;\n  }\n  const th = (lo + hi) / 2, s = sin(th / 2);\n  return [th, by / (2 * s * s)];\n}\n\n// A track from a curve f(u), u from 0 at A to 1 at B, sampled densely at both\n// ends. Times are in units where g = 1: each chord is taken at constant\n// slope, so the bead's time on it is exactly its length over the mean of the\n// speeds sqrt(2y) at its two ends, and the sum is the time of the polyline.\nfunction track(f, hue, sat) {\n  const x = new Float32Array(M), y = new Float32Array(M), t = new Float64Array(M);\n  let px = 0, py = 0;\n  for (let i = 0; i \u003c M; i++) {\n    const u = 0.5 - 0.5 * cos((PI * i) / (M - 1)), p = f(u);\n    x[i] = p[0];\n    y[i] = max(0, p[1]);\n    if (i) t[i] = t[i - 1] + (Math.hypot(x[i] - px, y[i] - py) * Math.SQRT2) / (sqrt(py) + sqrt(y[i]) || 1);\n    px = x[i];\n    py = y[i];\n  }\n  return { x, y, t, T: t[M - 1], hue, sat, pix: null, wt: null, at: -1 };\n}\n\nfunction bezier(P) {\n  return (u) => {\n    const v = 1 - u, a = v * v * v, b = 3 * v * v * u, c = 3 * v * u * u, d = u * u * u;\n    return [a * P[0] + b * P[2] + c * P[4] + d * P[6], a * P[1] + b * P[3] + c * P[5] + d * P[7]];\n  };\n}\n\n// Lay a track into the panel as a thin core and a soft halo, kept as a list\n// of the pixels it touches.\nfunction rasterize(S, k) {\n  const R = S.tmp;\n  R.fill(0);\n  const { x, y } = k;\n  for (let i = 1; i \u003c M; i++) {\n    const x0 = x[i - 1] + AX, y0 = y[i - 1] + AY, len = Math.hypot(x[i] + AX - x0, y[i] + AY - y0), n = Math.ceil(len / 0.4);\n    for (let j = 0; j \u003c n; j++) {\n      const f = (j + 0.5) / n, px = x0 + (x[i] + AX - x0) * f, py = y0 + (y[i] + AY - y0) * f, w = len / n;\n      const ix = round(px), iy = round(py);\n      for (let b = -2; b \u003c= 2; b++) {\n        const yy = iy + b;\n        if (yy \u003c 0 || yy >= H) continue;\n        for (let a = -2; a \u003c= 2; a++) {\n          const xx = ix + a;\n          if (xx \u003c 0 || xx >= W) continue;\n          const d2 = (xx - px) ** 2 + (yy - py) ** 2;\n          R[yy * W + xx] += w * (0.75 * exp(-d2 / 0.5) + 0.07 * exp(-d2 / 5));\n        }\n      }\n    }\n  }\n  const pix = [], wt = [];\n  for (let p = 0; p \u003c N; p++)\n    if (R[p] > 0.01) {\n      pix.push(p);\n      wt.push(min(1.2, R[p]));\n    }\n  k.pix = Int32Array.from(pix);\n  k.wt = Float32Array.from(wt);\n}\n\n// Every track for the end point's place, and the cycloid's numbers.\nfunction build(S) {\n  const bx = DX, by = BY0 * (BY1 / BY0) ** S.end;\n  const [th, a] = cycloidTo(bx, by);\n  S.by = by;\n  S.th = th;\n  S.a = a;\n  const tr = [];\n  // The cycloid, the curve a point on a rolling circle draws.\n  tr.push(track((u) => [a * (th * u - sin(th * u)), 2 * a * sin((th * u) / 2) ** 2], ...COL[0]));\n  // Galileo's circle: the arc down to B whose lowest point is B.\n  const R = (bx * bx + by * by) / (2 * by), cy = by - R, a0 = Math.atan2(-cy, -bx);\n  tr.push(track((u) => [bx + R * cos(a0 + (PI / 2 - a0) * u), cy + R * sin(a0 + (PI / 2 - a0) * u)], ...COL[1]));\n  // The parabola whose lowest point is B.\n  tr.push(track((u) => [bx * u, by * (1 - (1 - u) ** 2)], ...COL[2]));\n  // The straight line, the shortest way.\n  tr.push(track((u) => [bx * u, by * u], ...COL[3]));\n  // The deep drop: straight down the left side to row 124, along the bottom\n  // and up into B. D is found so that its lowest point is there.\n  let lo = by, hi = 4 * YDEEP;\n  for (let i = 0; i \u003c 30; i++) {\n    const D = (lo + hi) / 2;\n    let m = 0;\n    for (let j = 1; j \u003c 64; j++) {\n      const u = j / 64;\n      m = max(m, 3 * u * (1 - u) * D + u * u * u * by);\n    }\n    if (m \u003c YDEEP) lo = D;\n    else hi = D;\n  }\n  tr.push(track(bezier([0, 0, 0, lo, bx, lo, bx, by]), ...COL[4]));\n  const C = Math.hypot(bx, by);\n  for (let j = 0; j \u003c S.ntr - 5; j++) {\n    const [p, q, h1, h2] = EXTRA[j], pa = (p * PI) / 180, qa = (q * PI) / 180;\n    tr.push(track(bezier([0, 0, h1 * C * sin(pa), h1 * C * cos(pa), bx - h2 * C * cos(qa), by - h2 * C * sin(qa), bx, by]), EXH[j], 0.5));\n  }\n  for (const k of tr) rasterize(S, k);\n  // Keep the arrivals already seen in this race.\n  if (S.tracks) for (let i = 0; i \u003c tr.length && i \u003c S.tracks.length; i++) if (S.tracks[i].at >= 0 && S.tau >= tr[i].T) tr[i].at = S.tracks[i].at;\n  S.tracks = tr;\n  S.tauB = th * sqrt(a);\n}\n\n// Where the field of least times is: the time of the cycloid from A through\n// each pixel, the fastest way there, and the bead's speed there. The front at\n// time t is the curve these times equal t on, and all of it moves at the speed\n// a bead would have there, so its distance in LEDs is the time to go times\n// that speed.\nfunction field(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dy = y - AY, dx = abs(x - AX);\n      if (dy \u003c 0 || (dy === 0 && dx === 0)) {\n        S.tau0[p] = dy \u003c 0 ? 1e9 : 0;\n        S.q[p] = 0;\n        continue;\n      }\n      if (dy === 0) S.tau0[p] = 2 * PI * sqrt(dx / (2 * PI));\n      else {\n        const [th, a] = cycloidTo(dx, dy);\n        S.tau0[p] = th * sqrt(a);\n      }\n      S.q[p] = sqrt(2 * dy);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, g: G2, end: -1, ntr: 0, tracks: null, mode: 0, phase: 0, clock: 0, tau: 0, fade: 1, t: 0, meet: [],\n    tau0: new Float32Array(N), q: new Float32Array(N), tmp: new Float32Array(N),\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N),\n  };\n  field(params.s);\n}\n\n// The tautochrone: from rest at arc length s0 above the bottom of the arch, a\n// bead's arc length is s0 cos(t sqrt(g / 4a)), whatever s0 is.\nfunction tautoBeads(S) {\n  const a = S.a, out = [];\n  for (let j = 0; j \u003c 6; j++) out.push(4 * a * (1 - j / 6));\n  return out;\n}\nfunction onCycloid(S, s) {\n  const th = 2 * acos(cl(s / (4 * S.a), -1, 1));\n  return [S.a * (th - sin(th)), S.a * (1 - cos(th)), th];\n}\n\n// The race's last moment, in g = 1 time.\nfunction raceEnd(S) {\n  if (S.mode === 0) {\n    let m = 0;\n    for (const k of S.tracks) m = max(m, k.T);\n    return m;\n  }\n  const bot = PI * sqrt(S.a);\n  return S.th \u003c= PI + 1e-6 ? S.tauB : 3 * bot;\n}\n\nfunction at(k, tau) {\n  const t = k.t;\n  if (tau >= k.T) return [k.x[M - 1], k.y[M - 1]];\n  if (tau \u003c= 0) return [0, 0];\n  let lo = 0, hi = M - 1;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (t[m] \u003c= tau) lo = m;\n    else hi = m;\n  }\n  const f = (tau - t[lo]) / (t[hi] - t[lo] || 1);\n  return [k.x[lo] + (k.x[hi] - k.x[lo]) * f, k.y[lo] + (k.y[hi] - k.y[lo]) * f];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 5], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.g = G2 * (cl(k[1], 0.2, 3) / 2);\n  const end = cl(k[2], 0, 1), ntr = round(cl(k[3], 5, 13));\n  if (abs(end - S.end) > 0.002 || ntr !== S.ntr) {\n    S.end = end;\n    S.ntr = ntr;\n    build(S);\n  }\n  const sg = sqrt(S.g);\n  S.t += d;\n  S.clock += d;\n  if (S.phase === 0 && S.clock >= WAIT) {\n    S.phase = 1;\n    S.tau = 0;\n  } else if (S.phase >= 1) {\n    const before = S.tau;\n    S.tau += d * sg;\n    if (S.mode === 0)\n      for (const tk of S.tracks)\n        // The arrival, placed inside the frame where it fell.\n        if (tk.at \u003c 0 && S.tau >= tk.T) tk.at = S.t - (S.tau - tk.T) / sg;\n    if (S.mode === 1 && S.th >= PI - 1e-6) {\n      const bot = PI * sqrt(S.a);\n      for (const m of [bot, 3 * bot]) if (before \u003c m && S.tau >= m) S.meet.push(S.t - (S.tau - m) / sg);\n    }\n    if (S.phase === 1 && S.tau >= raceEnd(S)) {\n      S.phase = 2;\n      S.clock = 0;\n    } else if (S.phase === 2 && S.clock >= HOLD) {\n      S.phase = 3;\n      S.clock = 0;\n    } else if (S.phase === 3) {\n      S.fade = 1 - S.clock / FADE;\n      if (S.clock >= FADE) {\n        S.phase = 0;\n        S.clock = 0;\n        S.fade = 1;\n        S.tau = 0;\n        S.mode ^= 1;\n        S.meet = [];\n        for (const tk of S.tracks) tk.at = -1;\n      }\n    }\n  }\n}\n\n// A soft dot of light into the colour buffers.\nfunction dot(S, x, y, r, w, c) {\n  const xi = round(x + AX), yi = round(y + AY), k = -1 / (r * r);\n  for (let j = yi - 2; j \u003c= yi + 2; j++) {\n    if (j \u003c 0 || j >= H) continue;\n    for (let i = xi - 2; i \u003c= xi + 2; i++) {\n      if (i \u003c 0 || i >= W) continue;\n      const e = w * exp(((i - x - AX) ** 2 + (j - y - AY) ** 2) * k), p = j * W + i;\n      S.R[p] += e * c[0];\n      S.G[p] += e * c[1];\n      S.B[p] += e * c[2];\n    }\n  }\n}\n\nfunction ring(S, x, y, age, c) {\n  const r = 1.5 + 16 * age, w = 0.8 * exp(-age / 0.22), n = round(6 * r + 8);\n  if (w \u003c 0.03) return;\n  for (let j = 0; j \u003c n; j++) {\n    const a = (2 * PI * j) / n;\n    dot(S, x + r * cos(a), y + r * sin(a), 0.7, w, c);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tracks) return;\n  const { R, G, B, tau0, q } = S;\n  const fade = S.phase === 3 ? S.fade : 1, live = S.phase >= 1, tau = live ? S.tau : 0, sg = sqrt(S.g);\n  // The front, the light it leaves behind and its rings, pale blue.\n  const fh = 0.6 + S.hue, dh = abs(fh - floor(fh) - 0.11), warm = cl(1.9 - min(dh, 1 - dh) / 0.09, 0, 1);\n  // Orange and yellow go brown this faint: there the front is paled and lifted.\n  const fc = hsv(fh, 0.5 - 0.3 * warm, 1 + 0.4 * warm), rk = S.tauB / RINGS;\n  const nring = live ? floor(tau / rk) : 0;\n  for (let p = 0; p \u003c N; p++) {\n    let v = 0;\n    if (live && q[p] > 0) {\n      const dd = (tau0[p] - tau) * q[p];\n      if (dd \u003c 2.5) {\n        if (dd > -2.5) v += 0.55 * exp(-dd * dd);\n        if (dd \u003c 0) v += 0.09 + 0.16 * exp(dd / 7);\n        for (let r = 1; r \u003c= nring; r++) {\n          const e = (tau0[p] - r * rk) * q[p];\n          if (e > -2 && e \u003c 2) v += 0.24 * exp(-e * e * 2);\n        }\n      }\n    }\n    v *= fade;\n    R[p] = v * fc[0];\n    G[p] = v * fc[1];\n    B[p] = v * fc[2];\n  }\n  // The tracks, faint, each lit up when its bead arrives and staying lit.\n  const tc = [];\n  for (const k of S.tracks) {\n    const c = hsv(k.hue + S.hue, k.sat, 1);\n    tc.push(c);\n    let f = 0.3;\n    if (S.mode === 1 && k !== S.tracks[0]) f = 0.16;\n    if (k.at >= 0) {\n      const age = S.t - k.at;\n      f += fade * (0.22 + 0.5 * exp(-age / 0.3));\n    }\n    for (let i = 0; i \u003c k.pix.length; i++) {\n      const p = k.pix[i], w = k.wt[i] * f;\n      R[p] += w * c[0];\n      G[p] += w * c[1];\n      B[p] += w * c[2];\n    }\n  }\n  const white = [1, 1, 1], bx = DX, by = S.by;\n  if (live) {\n    const dtr = (TRAIL * sg) / 12;\n    if (S.mode === 0)\n      S.tracks.forEach((k, i) => {\n        const c = tc[i];\n        if (k.at >= 0) {\n          ring(S, bx, by, S.t - k.at, c);\n          if (S.t - k.at > 0.15) return;\n        }\n        for (let j = 12; j >= 1; j--) {\n          const p = at(k, tau - j * dtr);\n          dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n        }\n        const p = at(k, tau);\n        dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n        dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n      });\n    else {\n      // The second race: beads from six heights on the cycloid, the one at A\n      // the same bead as in the race.\n      const c = tc[0], w = 1 / (2 * sqrt(S.a)), sB = 4 * S.a * cos(S.th / 2);\n      for (const s0 of tautoBeads(S)) {\n        // A bead let go above the end point's height leaves the track there.\n        const tEnd = s0 >= abs(sB) - 1e-6 ? acos(cl(sB / s0, -1, 1)) / w : 1e9;\n        if (tau > tEnd + 0.15 * sg) continue;\n        for (let j = 12; j >= 0; j--) {\n          const tt = min(max(0, tau - j * dtr), tEnd), p = onCycloid(S, s0 * cos(tt * w));\n          if (j) dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n          else {\n            dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n            dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n          }\n        }\n      }\n      for (const m of S.meet) ring(S, PI * S.a, 2 * S.a, S.t - m, c);\n    }\n  }\n  // A and B.\n  dot(S, 0, 0, 0.9, 0.7, white);\n  dot(S, bx, by, 0.9, 0.7, white);\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Gravity=0.2..3, End=0..1, Tracks=5..13","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the cycloid gold, Galileo's circle violet, the parabola green, the line cyan, the deep drop rose, and the front and its rings pale blue. From 0.33 to 0.68, where the front would turn red, orange, yellow or lime, it is paled and lifted so it reads cream, never brown."},{"name":"Gravity","min":0.2,"max":3,"about":"At 2 g is 31 LEDs a second squared: the cycloid's bead takes 2.4 s, the line's 2.84 s and the deep drop's 4.27 s, then the finish holds 1.3 s and fades in 0.6 s. Every time goes as one over the square root of g, so at 0.2 the race takes 3.2 times as long and at 3 it is 1.22 times as fast."},{"name":"End","min":0,"max":1,"about":"Where the end point sits on the right edge. At 0 at row 39, the bottom of the cycloid's arch, where the cycloid wins by 1.2% over the circle, 4.3% over the parabola and 18.5% over the line. Turned up the end point rises to row 13 and the cycloid dips 10 rows below it and climbs back, now 37.6% ahead of the circle and 74% ahead of the line; the beads of the second race pass the bottom of the arch together and those let go below the end swing back and meet there again."},{"name":"Tracks","min":5,"max":13,"about":"How many tracks race. At 5 the cycloid and its four classic rivals; each step adds another smooth track from the start to the end, eight more at 13, some starting shallow and some dipping below the end. None of them beats the cycloid."}],"start":[0,2,0,5],"measures":{"motion":0.2086,"detail":0.0362,"edges":0.3333,"complexity":0.8549,"coverage":0.2988,"colour":0.08,"drift":0.1306},"knobResponse":[0.0398,0.0764,0.0473,0.038]},{"slug":"bread-mould","title":"Bread Mould","family":"fungi","round":21,"note":"도마 위 식빵 두 쪽이 곰팡이로 덮여 가는 저속 촬영이에요. 내려앉은 포자에서 흰 테를 두른 푸른곰팡이와 검은 털곰팡이가 고리를 그리며 번지고, 다 덮이면 새 두 쪽이 옆에서 밀려 들어와요.","idea":"A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.","buttons":"K1 tap slides a fresh pair of slices in now.","code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","layer":{"id":"layer-bread-mould","type":"code","name":"bread-mould","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mould","min":0,"max":3,"about":"What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep."},{"name":"Spores","min":4,"max":40,"about":"How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40."},{"name":"Damp","min":0,"max":1,"about":"A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies."}],"start":[0,2,4,0.06],"measures":{"motion":0.3259,"detail":0.0597,"edges":0.2499,"complexity":2.3664,"coverage":0.9889,"colour":0.1543,"drift":0.3583},"knobResponse":[0.188,0.3046,0.062,0.1018]},{"slug":"breath","title":"Breath","family":"body","round":24,"note":"후두에서 횡격막까지 해부도처럼 그린 폐가 숨을 쉬어요. 들이쉬면 횡격막이 내려가고 갈비뼈가 들리며, 푸르스름한 공기가 일곱 번 더 갈라지는 기관지를 타고 내려가 보랏빛 허파꽈리를 빨갛게 물들여요. K1 이 맑은 공기에서 입김이 하얗게 서리는 겨울과 매연 낀 도시까지 공기를 바꾸고, K1 을 누르면 기침을 해요.","idea":"A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.","buttons":"K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.","code":"// ===== Patternflow pattern =====\n// Title:   Breath\n// Family:  body\n// Idea:    A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after anatomical plates of the lungs, with the bronchial tree grown by volume-filling branching (Tawhai, Pullan and Hunter, 2000)\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1\n//\n// Knob 1: Air. What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli.\n// Knob 2: Rate. Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3.\n// Knob 3: Depth. A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far.\n// Knob 4: Altitude. Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own.\n// Buttons: K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.\n\nconst W = 64, H = 128, N = W * H, A0 = 2;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, ceil, round, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The diaphragm under the lungs breathed out, x then y: the right dome higher\n// over the liver, the heart sitting in the dip between the domes.\nconst DK = [-1, 118.5, 5, 113.8, 9, 108.4, 13, 103.8, 17, 101.6, 21, 101, 25, 101.8, 29, 104.2, 33, 106, 37, 106.6, 41, 106.6, 45, 105.8, 49, 106.8, 53, 110.2, 57, 115, 60, 117.8, 65, 122.5];\nconst D0T = F32(68);\nfor (let i = 0, k = 0; i \u003c 68; i++) {\n  while (k \u003c DK.length - 4 && i - 1 > DK[k + 2]) k += 2;\n  D0T[i] = mix(DK[k + 1], DK[k + 3], (i - 1 - DK[k]) / (DK[k + 2] - DK[k]));\n}\nfor (let n = 0; n \u003c 4; n++) for (let i = 1; i \u003c 67; i++) D0T[i] = (D0T[i - 1] + 2 * D0T[i] + D0T[i + 1]) / 4;\nconst d0 = (x) => ((x = cl(x + 1, 0, 66.99)), D0T[floor(x)] + (D0T[floor(x) + 1] - D0T[floor(x)]) * (x - floor(x)));\n// How far the diaphragm drops at each column: most under the two domes, so\n// they flatten.\nconst GX = Float32Array.from({ length: W }, (_, x) => 0.32 + 0.68 * (exp(-(((x - 17) / 10) ** 2)) + exp(-(((x - 46) / 10) ** 2))));\n// The outlines of the right lung (on the viewer's left) and the smaller left\n// lung with the heart's notch, breathed out. The diaphragm cuts their bases.\nconst LUNGS = [\n  [19, 21, 15, 22.5, 11.5, 26, 8.5, 32, 6.3, 40, 4.8, 50, 4, 60, 3.6, 72, 3.6, 84, 4, 96, 4.6, 106, 5.6, 126, 28.8, 126, 28.6, 104, 28.2, 98, 27.6, 90, 27.2, 82, 27.6, 74, 28.6, 66, 29, 58, 28.6, 50, 27.8, 42, 26.6, 34, 24.8, 27, 22.5, 22.5],\n  [44.5, 22, 48.5, 23.5, 52, 27, 55, 33, 57.2, 41, 58.8, 51, 59.6, 62, 60, 74, 60.2, 86, 60.2, 98, 59.9, 108, 59.2, 126, 41.5, 126, 41.5, 106, 41, 103, 42.4, 98, 44.5, 92, 45.4, 86, 44.4, 80, 41.8, 75, 38.6, 71, 36.6, 66, 36, 58, 36.4, 50, 37.2, 42, 38.4, 34, 40, 28, 42, 23.5],\n];\n// Airway walls by generation (9 is the channel through the larynx), and how\n// strongly each shows over the lung.\nconst WC = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? [226, 216, 204] : [232 - 2 * g, 208 - 4 * g, 206]));\nconst AG = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? 1 : g > 8 ? 0 : 1.1 - 0.08 * g));\n// The cough: seconds and lung volume, and the moments of the three jolts.\nconst CK = [0, 0, 0.32, 0.97, 0.44, 0.97, 0.54, 0.66, 0.84, 0.66, 0.94, 0.38, 1.24, 0.38, 1.34, 0.12, 1.9, 0];\nconst CT = [0.44, 0.84, 1.24];\n\nfunction sdPoly(v, px, py) {\n  let d = 1e9, s = 1;\n  for (let i = 0, j = v.length - 2; i \u003c v.length; j = i, i += 2) {\n    const ex = v[j] - v[i], ey = v[j + 1] - v[i + 1], wx = px - v[i], wy = py - v[i + 1];\n    const t = cl((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1), bx = wx - ex * t, by = wy - ey * t;\n    d = min(d, bx * bx + by * by);\n    const c1 = py >= v[i + 1], c2 = py \u003c v[j + 1], c3 = ex * wy > ey * wx;\n    if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s = -s;\n  }\n  return s * sqrt(d);\n}\n// The colour being built for one LED, and mixing toward another by k.\nconst C = F32(3);\nconst DA = [74, 58, 156];\nconst bl = (r, g, b, k) => ((C[0] += (r - C[0]) * k), (C[1] += (g - C[1]) * k), (C[2] += (b - C[2]) * k));\nfunction samp(A, x, y) {\n  x = cl(x, 0, 62.999);\n  y = cl(y, 0, 126.999);\n  const xi = x | 0, yi = y | 0, fx = x - xi, p = yi * W + xi, a = A[p] + (A[p + 1] - A[p]) * fx;\n  return a + (A[p + W] + (A[p + W + 1] - A[p + W]) * fx - a) * (y - yi);\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ph: 0.68, lp: 0.68, vol: 0.6, D: 0.5, air: 0, ct: -1, jolt: 0, hp: 0, hb: 0, envIn: 0, envOut: 0, Fin: -1, Fx: 2, bf: [], puffs: [],\n    sd: F32(N), own: new Int16Array(N).fill(-1), und: F32(N * 3), ua: F32(N), GL: F32(N),\n    SX: F32(H), KY: F32(W), alvA: F32(N), alvS: F32(N), alvK: new Int16Array(N), trA: F32(N), trV: F32(N), trS: F32(N), trG: new Int8Array(N), rib: F32(N), O: F32(N * 3),\n    seg: [], ax: [], ay: [], as: [], soot: [], cd: [], cb: [], trH: F32(N),\n  });\n  build(P);\n}\n\nfunction addSeg(P, x0, y0, x1, y1, r, g, d) {\n  const e = d + hypot(x1 - x0, y1 - y0);\n  P.seg.push(x0, y0, x1, y1, r, g, d, e);\n  return e;\n}\n\n// Volume-filling branching: a branch's alveoli are split by the line from its\n// end through their centroid, and each half gets a child that runs 40% of the\n// way to its own centroid, until a handful is left: one grape cluster.\nfunction grow(P, x0, y0, dx, dy, pts, g, r, d) {\n  const { ax, ay } = P, n = pts.length;\n  let cx = 0, cy = 0;\n  for (const i of pts) (cx += ax[i]), (cy += ay[i]);\n  (cx /= n), (cy /= n);\n  if (n \u003c= 7 || g > 8) {\n    for (const i of pts) (P.ak[i] = P.cd.length), (ax[i] += (cx - ax[i]) * 0.3), (ay[i] += (cy - ay[i]) * 0.3);\n    P.cd.push(d + hypot(cx - x0, cy - y0));\n    P.cb.push(0.84 + 0.32 * rnd());\n    return;\n  }\n  // The lobes split along the line from the branch to their centroid; past\n  // them each set is cut across its long axis, a near half and a far one.\n  let ux = cx - x0, uy = cy - y0, ul = hypot(ux, uy), ox = x0, oy = y0;\n  if (g > 2) {\n    let sxx = 0, syy = 0, sxy = 0;\n    for (const i of pts) (sxx += (ax[i] - cx) ** 2), (syy += (ay[i] - cy) ** 2), (sxy += (ax[i] - cx) * (ay[i] - cy));\n    const th = 0.5 * atan2(2 * sxy, sxx - syy) + PI / 2;\n    (ux = cos(th)), (uy = sin(th)), (ul = 1), (ox = cx), (oy = cy);\n  }\n  if (ul \u003c 0.5) (ux = dx), (uy = dy), (ul = hypot(dx, dy));\n  (ux /= ul), (uy /= ul);\n  const side = (i) => (ax[i] - ox) * uy - (ay[i] - oy) * ux;\n  let A = pts.filter((i) => side(i) > 0), B = pts.filter((i) => side(i) \u003c= 0);\n  if (A.length \u003c 2 || B.length \u003c 2) {\n    const s = pts.slice().sort((i, j) => side(i) - side(j));\n    (A = s.slice(0, n >> 1)), (B = s.slice(n >> 1));\n  }\n  const pa = atan2(dy, dx), lim = g === 2 ? 1.75 : 1.1;\n  for (const Q of [A, B]) {\n    let qx = 0, qy = 0;\n    for (const i of Q) (qx += ax[i]), (qy += ay[i]);\n    (qx = qx / Q.length - x0), (qy = qy / Q.length - y0);\n    let a = atan2(qy, qx), da = a - pa;\n    da = atan2(sin(da), cos(da));\n    if (abs(da) > lim) a = pa + Math.sign(da) * lim;\n    let len = max(1.2, hypot(qx, qy) * (Q.length \u003c= 7 ? 0.55 : 0.4)), x1, y1;\n    for (;;) {\n      (x1 = x0 + cos(a) * len), (y1 = y0 + sin(a) * len);\n      if (len \u003c= 1.2 || samp(P.sd, x1, y1) \u003c -0.6) break;\n      len *= 0.8;\n    }\n    const rr = max(0.5, r * Math.cbrt(Q.length / n));\n    grow(P, x1, y1, x1 - x0, y1 - y0, Q, g + 1, rr, addSeg(P, x0, y0, x1, y1, rr, g, d));\n  }\n}\n\nfunction build(P) {\n  const { sd, own, GL } = P;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, sl = d0(x + 0.5) - d0(x - 0.5), cut = (y - d0(x) + 0.6) / sqrt(1 + sl * sl);\n    const a = y \u003c 15 ? 6 : max(sdPoly(LUNGS[0], x, y), cut), b = y \u003c 15 ? 6 : max(sdPoly(LUNGS[1], x, y), cut);\n    sd[p] = min(a, b) + 0.9 * (vn(x * 0.32, y * 0.32) - 0.5);\n    GL[p] = exp(-(((x - 32) / 26) ** 2) - (((y - 66) / 50) ** 2));\n  }\n  // Alveoli on a jittered honeycomb inside the lungs.\n  const pts = [[], []];\n  for (let j = 0; j \u003c 56; j++)\n    for (let i = 0; i \u003c 29; i++) {\n      const x = 1 + i * 2.25 + (j & 1) * 1.125 + (rnd() - 0.5) * 0.7, y = 19 + j * 1.95 + (rnd() - 0.5) * 0.7;\n      if (x > 62.5 || y > 125 || samp(sd, x, y) > -1) continue;\n      pts[x \u003c 32 ? 0 : 1].push(P.ax.length);\n      P.ax.push(x), P.ay.push(y), P.as.push(0.86 + 0.28 * rnd()), P.soot.push(rnd());\n    }\n  P.ak = new Int16Array(P.ax.length);\n  // The larynx and trachea, the short steep right bronchus and the longer\n  // left one, then the trees.\n  let d = addSeg(P, 32, 3, 32, 16.5, 1, 9, 0);\n  d = addSeg(P, 32, 16.5, 32, 48.5, 3, 0, d);\n  grow(P, 26.6, 57, -4.8, 8.5, pts[0], 2, 2.3, addSeg(P, 31.3, 48.5, 26.6, 57, 2.3, 1, d));\n  grow(P, 40.4, 56.6, 7.8, 8.1, pts[1], 2, 2.05, addSeg(P, 32.7, 48.5, 40.4, 56.6, 2.05, 1, d));\n  P.dmax = max(...P.cd);\n  P.cd = Float32Array.from(P.cd, (v) => v / P.dmax);\n  P.cox = F32(P.cd.length).fill(0.55);\n  P.airK = F32(P.cd.length);\n  // Each lung pixel takes the cluster of its nearest alveolus.\n  const best = F32(N).fill(9);\n  P.ax.forEach((cx, i) => {\n    const cy = P.ay[i];\n    for (let y = max(0, round(cy) - 3); y \u003c= min(H - 1, round(cy) + 3); y++)\n      for (let x = max(0, round(cx) - 3); x \u003c= min(W - 1, round(cx) + 3); x++) {\n        const e = hypot(x - cx, y - cy), p = y * W + x;\n        if (e \u003c best[p]) (best[p] = e), (own[p] = P.ak[i]);\n      }\n  });\n  under(P);\n}\n\n// What lies behind the lungs, breathed out, as colour times cover: the\n// larynx, the diaphragm and, dim under it, the liver and the stomach.\nfunction under(P) {\n  const { und, ua } = P;\n  const lay = (p, r, g, b, a) => {\n    if (a \u003c= 0) return;\n    const o = p * 3;\n    (und[o] += (r - und[o]) * a), (und[o + 1] += (g - und[o + 1]) * a), (und[o + 2] += (b - und[o + 2]) * a), (ua[p] += (1 - ua[p]) * a);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, t = y - d0(x), ax = abs(x - 32);\n    if (t > 3) {\n      const xb = 37 + 3 * sin(y * 0.21), f = (1 - 0.55 * sm(3, 20, t)) * (0.7 + 0.5 * vn(x * 0.17, y * 0.17)) * (0.4 + 0.6 * sm(0.3, 2, abs(x - xb)));\n      x \u003c xb ? lay(p, 60 * f, 20 * f, 22 * f, cl(t - 3, 0, 1)) : lay(p, 50 * f, 30 * f, 44 * f, cl(t - 3, 0, 1));\n    }\n    // The diaphragm: a band of muscle with a lit upper face, its tendon pale\n    // in the middle under the heart.\n    if (t > -0.5 && t \u003c 4) {\n      const ten = sm(24, 29, x) * sm(43, 38, x), st = 0.8 + 0.2 * sin(x * 1.9 + t * 0.9), lit = 1 + 0.45 * sm(1.6, 0, t);\n      lay(p, mix(232 * st, 214, ten) * 0.72 * lit, mix(82 * st, 198, ten) * 0.66 * lit, mix(96, 188, ten) * 0.66 * lit, cl(min(t + 0.5, 4 - t), 0, 1));\n    }\n    if (y \u003c 19) {\n      const hy = 3.4 + 0.03 * ax * ax;\n      if (ax \u003c 9.5) lay(p, 200, 192, 176, 0.5 * cl(1 - abs(y - hy) / 0.9, 0, 1));\n      const top = 6 + 2.2 * max(0, 1 - ax / 2.4), hw = 7.4 - 0.42 * (y - 6), e = min(y - top, 14.6 - y, hw - ax);\n      // The thyroid cartilage, its left plate lit and the right in shade.\n      if (e > -0.5) lay(p, 206, 196, 184, cl(e + 0.5, 0, 1) * (0.42 + 0.2 * exp(-((ax / 1.8) ** 2)) + 0.25 * sm(1.2, 0.2, e)) * (x \u003c 32 ? 1.05 : 0.78));\n      if (y > 15 && y \u003c 17.6 && ax \u003c 4.9) lay(p, 214, 204, 192, 0.55 * cl(4.9 - ax, 0, 1));\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.t += dt;\n  P.air = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3), dep = cl(k[2], 0, 1), alt = cl(k[3], 0, 1);\n  const bpm = (8 + 4.5 * rate + 12 * max(0, rate - 2) ** 2) * (1 + 0.45 * alt);\n  P.D = (0.5 + 0.5 * dep) * (1 - 0.4 * sm(2, 3, rate)) * (1 + 0.22 * alt);\n  if (input.btnPressed && input.btnPressed[0] && P.ct \u003c 0) (P.ct = 0), (P.cv = P.vol), (P.cn = 0);\n  let vol = 0, envIn = 0, envOut = 0, Fin = -1, Fx = 2;\n  P.bf = [];\n  P.jolt = 0;\n  if (P.ct >= 0) {\n    // A gasp, then three coughs, each a jolt and a burst of warm air up the tree.\n    const c = (P.ct += dt);\n    let j = 0;\n    while (j \u003c CK.length - 4 && c > CK[j + 2]) j += 2;\n    vol = mix(j ? CK[j + 1] : P.cv, CK[j + 3], sm(CK[j], CK[j + 2], c));\n    if (c \u003c 0.4) (envIn = sin((PI * c) / 0.4) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(c / 0.3, 0, 1)) ** 2));\n    for (const tc of CT) {\n      const u = c - tc;\n      if (u > 0 && u \u003c 0.7) P.bf.push(1 - u * 3.2), (P.jolt = max(P.jolt, 2.4 * exp(-u / 0.08)));\n    }\n    if (P.cn \u003c 3 && c > CT[P.cn] + 0.28) P.puffs.push([0, 2, rnd()]), P.cn++;\n    if (c > 1.9) (P.ct = -1), (P.ph = 0.9);\n  } else {\n    // In for 38% of a breath, out for half, then a short rest.\n    const p = (P.ph = (P.ph + (dt * bpm) / 60) % 1);\n    if (p \u003c 0.38) (vol = 0.5 - 0.5 * cos((PI * p) / 0.38)), (envIn = sin((PI * p) / 0.38) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(p / 0.3, 0, 1)) ** 2));\n    else if (p \u003c 0.88) {\n      const u = (p - 0.38) / 0.5;\n      (vol = 0.5 + 0.5 * cos(PI * u)), (envOut = sin(PI * u) ** 0.5), (Fx = 1.06 - 1.2 * sm(0.02, 0.8, u));\n    }\n    if (P.lp \u003c 0.64 && p >= 0.64) P.puffs.push([0, 1, rnd()]);\n    P.lp = p;\n  }\n  Object.assign(P, { vol, envIn, envOut, Fin, Fx });\n  // The alveoli the cold air has reached take up oxygen fast; the rest give it\n  // up slowly to the blood that carries it away.\n  const wS = max(0, 2 * P.air - 1), hi = 1 - 0.66 * alt - 0.14 * wS, { cd, cox, airK } = P;\n  for (let i = 0; i \u003c cd.length; i++) {\n    cox[i] += Fin > cd[i] ? (hi - cox[i]) * (1 - exp(-dt * 7)) : (0.05 - cox[i]) * (1 - exp(-dt * 0.85));\n    airK[i] = envIn * exp(-(((Fin - cd[i]) / 0.07) ** 2));\n  }\n  P.hp = (P.hp + (dt * (62 + 10 * rate + 40 * alt)) / 60) % 1;\n  P.hb = exp(-(((P.hp - 0.06) / 0.05) ** 2)) + 0.6 * exp(-(((P.hp - 0.3) / 0.05) ** 2));\n  P.puffs = P.puffs.filter((f) => (f[0] += dt) \u003c 5);\n}\n\n// Rest coordinates to the panel, breathed in by the per-row and per-column\n// scales: out to the sides, down with the diaphragm.\nlet FX = 0, FY = 0;\nfunction fw(P, xr, yr) {\n  const { SX, KY } = P, kx = cl(32 + (xr - 32) * SX[cl(round(yr), 0, H - 1)], 0, 62.99), ki = floor(kx);\n  FY = A0 + (yr - A0) * (KY[ki] + (KY[ki + 1] - KY[ki]) * (kx - ki));\n  FX = 32 + (xr - 32) * SX[cl(round(FY), 0, H - 1)];\n}\n\nfunction alveoli(P) {\n  const { alvA, alvS, alvK, ax, ay, as } = P, rA = 1.02 + 0.52 * P.vol * P.D;\n  alvA.fill(0);\n  for (let i = 0; i \u003c ax.length; i++) {\n    fw(P, ax[i], ay[i]);\n    const cx = FX, cy = FY, r = rA * as[i], lim = (r + 0.5) ** 2;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n        const dx = x - cx, dy = y - cy, e2 = dx * dx + dy * dy;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x;\n        const q = e / r, hx = dx + 0.4 * r, hy = dy + 0.45 * r, hl = max(0, 1 - sqrt(hx * hx + hy * hy) / (0.75 * r));\n        const s = 0.72 + 0.28 * sqrt(max(0, 1 - q * q)) + 0.38 * hl * hl;\n        if (a * s > alvA[p] * alvS[p]) (alvA[p] = a), (alvS[p] = s), (alvK[p] = i);\n      }\n  }\n}\n\nfunction tree(P) {\n  const { seg: S, trA, trV, trS, trG, trH } = P, dil = 1 + 0.1 * P.vol * P.D;\n  trA.fill(0);\n  trH.fill(0);\n  for (let j = 0; j \u003c S.length; j += 8) {\n    fw(P, S[j], S[j + 1]);\n    const x0 = FX, y0 = FY;\n    fw(P, S[j + 2], S[j + 3]);\n    const ex = FX - x0, ey = FY - y0, l2 = ex * ex + ey * ey || 1e-6, r = S[j + 4] * dil, g = S[j + 5], da = S[j + 6], db = S[j + 7], lim = (r + 1.7) ** 2, hr = min(1, r);\n    for (let y = max(0, floor(min(y0, FY) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, FY) + r + 1)); y++)\n      for (let x = max(0, floor(min(x0, FX) - r - 1)); x \u003c= min(W - 1, ceil(max(x0, FX) + r + 1)); x++) {\n        const t = cl(((x - x0) * ex + (y - y0) * ey) / l2, 0, 1), px = x - x0 - ex * t, py = y - y0 - ey * t, e2 = px * px + py * py;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x, h = cl(r + 1.7 - e, 0, 1) * hr;\n        if (h > trH[p]) trH[p] = h;\n        if (a > trA[p]) (trA[p] = a), (trS[p] = da + (db - da) * t), (trV[p] = e / r), (trG[p] = g);\n      }\n  }\n}\n\n// The collarbones and ten ribs, faint arcs that lift and spread on a breath.\nfunction ribs(P) {\n  const { rib, SX } = P, v = P.vol * P.D;\n  rib.fill(0);\n  const dot = (fx, fy, rad, k) => {\n    for (let y = max(0, round(fy) - 1); y \u003c= min(H - 1, round(fy) + 1); y++)\n      for (let x = max(0, round(fx) - 1); x \u003c= min(W - 1, round(fx) + 1); x++) {\n        const a = cl(rad + 0.5 - sqrt((x - fx) ** 2 + (y - fy) ** 2), 0, 1) * k, p = y * W + x;\n        if (a > rib[p]) rib[p] = a;\n      }\n  };\n  for (let i = 0; i \u003c= 10; i++)\n    for (const s of [-1, 1]) {\n      if (i === 0) {\n        for (let n = 0; n \u003c= 50; n++) {\n          const u = n / 50;\n          dot(32 + s * (4.5 + 21 * u), 18.6 - 4.2 * u + 1.4 * sin(PI * u) - 1.2 * v, 0.5 + 0.4 * (2 * u - 1) ** 2, 0.85);\n        }\n        continue;\n      }\n      const yr = 23 + (i - 1) * 8.4, y0 = yr - v * (1 + 0.42 * i), hw = (1.5 + 28.4 * (1 - exp(-(yr - 15) / 14))) * SX[round(yr)];\n      const rx = hw - 3, ry = (5.5 + 0.55 * i) * (1 - 0.25 * v), n = ceil((rx + ry) * 2.2);\n      for (let m = 0; m \u003c= n; m++) {\n        const th = (1.62 * m) / n;\n        dot(32 + s * (3 + rx * sin(th)), y0 + ry * (1 - cos(th)), 0.7, sm(0.2, 0.6, th));\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cox) return;\n  const { SX, KY, sd, own, cox, cb, airK, und, ua, alvA, alvS, alvK, trA, trV, trS, trG, trH, rib, O, ak, soot, GL } = P, dm = 1 / P.dmax;\n  const t = P.t, v = P.vol * P.D, air = P.air, hb = P.hb, { envIn, envOut, Fin, Fx, bf } = P;\n  const wC = max(0, 1 - 2 * air), wW = 1 - abs(2 * air - 1), wS = max(0, 2 * air - 1);\n  const pal = (c, w, s) => [0, 1, 2].map((i) => c[i] * wC + w[i] * wW + s[i] * wS);\n  const bgT = pal([3, 7, 18], [16, 26, 48], [62, 50, 32]), bgB = pal([2, 4, 12], [8, 14, 30], [36, 28, 20]), glo = pal([8, 18, 40], [22, 38, 64], [40, 30, 18]);\n  const cold = pal([150, 205, 255], [215, 238, 255], [196, 178, 128]), warm = pal([255, 196, 160], [255, 224, 206], [190, 160, 130]);\n  const puffC = pal([255, 214, 196], [236, 242, 255], [168, 158, 144]), puffK = 0.6 * wC + 1.5 * wW + 0.7 * wS;\n  const oxA = [240 - 64 * wS, 46 + 26 * wS, 58 + 20 * wS];\n  for (let y = 0; y \u003c H; y++) SX[y] = 1 + 0.085 * v * (0.25 + 0.75 * sm(15, 115, y));\n  for (let x = 0; x \u003c W; x++) KY[x] = 1 + 0.14 * v * GX[x];\n  alveoli(P);\n  tree(P);\n  ribs(P);\n  // The breath leaving at the top: each puff rises, spreads and thins.\n  const pf = [];\n  for (const [age, str, sd0] of P.puffs) {\n    const R = 3 + (5 + 8 * wW) * age;\n    pf.push(32 + (sd0 - 0.5) * 8, 6 - 3.2 * age, R, str * sm(0, 0.25, age) * exp(-age / (0.9 + 1.6 * wW)), sd0 * 40);\n  }\n  const hs = 1 / (1 - 0.035 * hb);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const fy = y / 127, gl = GL[p];\n      let hz = 1;\n      if (wS > 0) hz = 1 + wS * (0.18 * sin(x * 0.2 + y * 0.05 + t * 0.6) + 0.18 * sin(y * 0.13 - x * 0.06 - t * 0.35));\n      for (let c = 0; c \u003c 3; c++) C[c] = (bgT[c] + (bgB[c] - bgT[c]) * fy + glo[c] * gl) * hz;\n      const xr = cl(32 + (x - 32) / SX[y], 0, 62.999), yr = cl(A0 + (y - A0) / KY[x], 0, 126.999);\n      const xi = xr | 0, yi = yr | 0, fx = xr - xi, fz = yr - yi, q = yi * W + xi;\n      if (ua[q] + ua[q + 1] + ua[q + W] + ua[q + W + 1] > 0) {\n        const w0 = (1 - fx) * (1 - fz) * ua[q], w1 = fx * (1 - fz) * ua[q + 1], w2 = (1 - fx) * fz * ua[q + W], w3 = fx * fz * ua[q + W + 1], a = 1 - w0 - w1 - w2 - w3;\n        const o0 = q * 3, o2 = o0 + W * 3;\n        for (let c = 0; c \u003c 3; c++) C[c] = C[c] * a + und[o0 + c] * w0 + und[o0 + 3 + c] * w1 + und[o2 + c] * w2 + und[o2 + 3 + c] * w3;\n      }\n      // The heart, dim behind the lungs, its apex down to the left.\n      if (xr > 20 && xr \u003c 56 && yr > 60 && yr \u003c 110) {\n        const dx = xr - 36.6, dy = yr - 86, hv = (dx * 0.6 + dy * 0.8) * hs, hu = (dx * 0.8 - dy * 0.6) * hs, eu = hu / (12.5 * (1 - 0.36 * sm(-6, 19, hv))), ev = hv / 19;\n        const a = cl((1 - sqrt(eu * eu + ev * ev)) * 9, 0, 1);\n        if (a > 0) {\n          const k = (0.4 + 0.32 * hb) * (0.65 + 0.45 * sm(9, -9, hu));\n          bl(150 * k, 26 * k, 44 * k, a);\n        }\n      }\n      // The lung: a dusky body, the grape clusters of alveoli, the capillary\n      // net shimmering on them, the pleura at the edge.\n      const s = samp(sd, xr, yr), qn = round(yr) * W + round(xr);\n      let m = 0;\n      if (s \u003c 1.2) {\n        const c = own[qn], ox = c >= 0 ? cox[c] : 0.3;\n        m = cl(0.5 - s, 0, 1);\n        if (m > 0) bl(24 + 56 * ox, 14 - 4 * ox, 50 - 20 * ox, 0.92 * m);\n        const aa = alvA[p];\n        if (aa > 0) {\n          const i = alvK[p], cc = ak[i], o = cox[cc], sh = alvS[p] * cb[cc] * (soot[i] \u003c wS * 0.4 ? 0.3 : 1), af = 0.4 * airK[cc];\n          for (let c = 0; c \u003c 3; c++) C[c] += ((DA[c] + (oxA[c] - DA[c]) * o) * sh + cold[c] * af - C[c]) * aa;\n        }\n        const cv = hash(qn, 5);\n        if (m > 0 && cv > 0.6) {\n          const k = (cv - 0.35) * (0.75 + 0.75 * sin(t * 6 + cv * 90 + 2 * hb)) * (0.12 + 0.34 * ox) * m;\n          (C[0] += 230 * k), (C[1] += 30 * k), (C[2] += 50 * k);\n        }\n        const rm = cl(1 - abs(s + 0.45) / 0.75, 0, 1) * 0.5;\n        if (rm > 0) bl(126 + 129 * ox, 100 + 24 * ox, 214 - 70 * ox, rm);\n        // A shadow along each airway lifts the tree off the alveoli.\n        bl(0, 0, 0, trH[p] * 0.5 * m);\n      }\n      // The airways, and the air in them.\n      const ta = trA[p];\n      if (ta > 0) {\n        const gg = trG[p], vv = trV[p], d = trS[p] * dm, wc = WC[gg], al = AG[gg] * ta;\n        let wb = 0.85;\n        if (gg \u003c= 1) {\n          const ring = 0.5 + 0.5 * cos(trS[p] * 2.73);\n          wb = (0.5 + 0.5 * sm(0.35, 0.95, vv)) * (0.66 + 0.44 * ring * ring);\n        } else if (gg \u003c= 3) wb = 0.65 + 0.35 * sm(0.3, 1, vv);\n        bl(wc[0] * wb, wc[1] * wb, wc[2] * wb, al);\n        let ca = 0, wa = 0;\n        if (envIn > 0 && d \u003c Fin) ca = envIn * (0.3 + 0.7 * exp(-(((Fin - d) / 0.05) ** 2)));\n        if (envOut > 0 && d > Fx) wa = envOut * (0.24 + 0.76 * exp(-(((d - Fx) / 0.05) ** 2)));\n        for (const f of bf) wa += 1.3 * exp(-(((d - f) / 0.06) ** 2)) + (d > f ? 0.25 : 0);\n        const lf = (gg \u003c= 1 ? 1 - 0.5 * sm(0.55, 1, vv) : 1) * ta * (gg === 9 ? 0.8 : 0.9);\n        for (let c = 0; c \u003c 3; c++) C[c] += (cold[c] * ca + warm[c] * wa) * lf;\n      }\n      const rb = rib[p];\n      if (rb > 0) bl(220, 210, 196, rb * (0.42 + 0.1 * m));\n      if (y \u003c 48 && pf.length) {\n        let pa = 0;\n        for (let j = 0; j \u003c pf.length; j += 5) {\n          const dx = (x - pf[j]) / (pf[j + 2] * 1.4), dy = (y - pf[j + 1]) / pf[j + 2], e = dx * dx + dy * dy;\n          if (e \u003c 4) pa += pf[j + 3] * exp(-e * 1.4) * cl(0.4 + 1.4 * (vn(x * 0.2 + pf[j + 4], y * 0.2 + t * 0.9) - 0.5) + 0.5 * exp(-e * 3), 0, 1.4);\n        }\n        if (pa > 0) bl(puffC[0], puffC[1], puffC[2], min(1, pa * puffK));\n      }\n      if (wS > 0) bl(120, 96, 62, 0.14 * wS * hz);\n      O.set(C, p * 3);\n    }\n  // A cough jolts the whole chest up.\n  const jl = round(P.jolt);\n  for (let y = 0; y \u003c H; y++) {\n    const o = min(H - 1, y + jl) * W * 3;\n    for (let x = 0; x \u003c W; x++) display.setPixel(x, y, min(255, O[o + x * 3]) | 0, min(255, O[o + x * 3 + 1]) | 0, min(255, O[o + x * 3 + 2]) | 0);\n  }\n}\n","layer":{"id":"layer-breath","type":"code","name":"breath","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Breath\n// Family:  body\n// Idea:    A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after anatomical plates of the lungs, with the bronchial tree grown by volume-filling branching (Tawhai, Pullan and Hunter, 2000)\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1\n//\n// Knob 1: Air. What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli.\n// Knob 2: Rate. Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3.\n// Knob 3: Depth. A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far.\n// Knob 4: Altitude. Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own.\n// Buttons: K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.\n\nconst W = 64, H = 128, N = W * H, A0 = 2;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, ceil, round, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The diaphragm under the lungs breathed out, x then y: the right dome higher\n// over the liver, the heart sitting in the dip between the domes.\nconst DK = [-1, 118.5, 5, 113.8, 9, 108.4, 13, 103.8, 17, 101.6, 21, 101, 25, 101.8, 29, 104.2, 33, 106, 37, 106.6, 41, 106.6, 45, 105.8, 49, 106.8, 53, 110.2, 57, 115, 60, 117.8, 65, 122.5];\nconst D0T = F32(68);\nfor (let i = 0, k = 0; i \u003c 68; i++) {\n  while (k \u003c DK.length - 4 && i - 1 > DK[k + 2]) k += 2;\n  D0T[i] = mix(DK[k + 1], DK[k + 3], (i - 1 - DK[k]) / (DK[k + 2] - DK[k]));\n}\nfor (let n = 0; n \u003c 4; n++) for (let i = 1; i \u003c 67; i++) D0T[i] = (D0T[i - 1] + 2 * D0T[i] + D0T[i + 1]) / 4;\nconst d0 = (x) => ((x = cl(x + 1, 0, 66.99)), D0T[floor(x)] + (D0T[floor(x) + 1] - D0T[floor(x)]) * (x - floor(x)));\n// How far the diaphragm drops at each column: most under the two domes, so\n// they flatten.\nconst GX = Float32Array.from({ length: W }, (_, x) => 0.32 + 0.68 * (exp(-(((x - 17) / 10) ** 2)) + exp(-(((x - 46) / 10) ** 2))));\n// The outlines of the right lung (on the viewer's left) and the smaller left\n// lung with the heart's notch, breathed out. The diaphragm cuts their bases.\nconst LUNGS = [\n  [19, 21, 15, 22.5, 11.5, 26, 8.5, 32, 6.3, 40, 4.8, 50, 4, 60, 3.6, 72, 3.6, 84, 4, 96, 4.6, 106, 5.6, 126, 28.8, 126, 28.6, 104, 28.2, 98, 27.6, 90, 27.2, 82, 27.6, 74, 28.6, 66, 29, 58, 28.6, 50, 27.8, 42, 26.6, 34, 24.8, 27, 22.5, 22.5],\n  [44.5, 22, 48.5, 23.5, 52, 27, 55, 33, 57.2, 41, 58.8, 51, 59.6, 62, 60, 74, 60.2, 86, 60.2, 98, 59.9, 108, 59.2, 126, 41.5, 126, 41.5, 106, 41, 103, 42.4, 98, 44.5, 92, 45.4, 86, 44.4, 80, 41.8, 75, 38.6, 71, 36.6, 66, 36, 58, 36.4, 50, 37.2, 42, 38.4, 34, 40, 28, 42, 23.5],\n];\n// Airway walls by generation (9 is the channel through the larynx), and how\n// strongly each shows over the lung.\nconst WC = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? [226, 216, 204] : [232 - 2 * g, 208 - 4 * g, 206]));\nconst AG = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? 1 : g > 8 ? 0 : 1.1 - 0.08 * g));\n// The cough: seconds and lung volume, and the moments of the three jolts.\nconst CK = [0, 0, 0.32, 0.97, 0.44, 0.97, 0.54, 0.66, 0.84, 0.66, 0.94, 0.38, 1.24, 0.38, 1.34, 0.12, 1.9, 0];\nconst CT = [0.44, 0.84, 1.24];\n\nfunction sdPoly(v, px, py) {\n  let d = 1e9, s = 1;\n  for (let i = 0, j = v.length - 2; i \u003c v.length; j = i, i += 2) {\n    const ex = v[j] - v[i], ey = v[j + 1] - v[i + 1], wx = px - v[i], wy = py - v[i + 1];\n    const t = cl((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1), bx = wx - ex * t, by = wy - ey * t;\n    d = min(d, bx * bx + by * by);\n    const c1 = py >= v[i + 1], c2 = py \u003c v[j + 1], c3 = ex * wy > ey * wx;\n    if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s = -s;\n  }\n  return s * sqrt(d);\n}\n// The colour being built for one LED, and mixing toward another by k.\nconst C = F32(3);\nconst DA = [74, 58, 156];\nconst bl = (r, g, b, k) => ((C[0] += (r - C[0]) * k), (C[1] += (g - C[1]) * k), (C[2] += (b - C[2]) * k));\nfunction samp(A, x, y) {\n  x = cl(x, 0, 62.999);\n  y = cl(y, 0, 126.999);\n  const xi = x | 0, yi = y | 0, fx = x - xi, p = yi * W + xi, a = A[p] + (A[p + 1] - A[p]) * fx;\n  return a + (A[p + W] + (A[p + W + 1] - A[p + W]) * fx - a) * (y - yi);\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ph: 0.68, lp: 0.68, vol: 0.6, D: 0.5, air: 0, ct: -1, jolt: 0, hp: 0, hb: 0, envIn: 0, envOut: 0, Fin: -1, Fx: 2, bf: [], puffs: [],\n    sd: F32(N), own: new Int16Array(N).fill(-1), und: F32(N * 3), ua: F32(N), GL: F32(N),\n    SX: F32(H), KY: F32(W), alvA: F32(N), alvS: F32(N), alvK: new Int16Array(N), trA: F32(N), trV: F32(N), trS: F32(N), trG: new Int8Array(N), rib: F32(N), O: F32(N * 3),\n    seg: [], ax: [], ay: [], as: [], soot: [], cd: [], cb: [], trH: F32(N),\n  });\n  build(P);\n}\n\nfunction addSeg(P, x0, y0, x1, y1, r, g, d) {\n  const e = d + hypot(x1 - x0, y1 - y0);\n  P.seg.push(x0, y0, x1, y1, r, g, d, e);\n  return e;\n}\n\n// Volume-filling branching: a branch's alveoli are split by the line from its\n// end through their centroid, and each half gets a child that runs 40% of the\n// way to its own centroid, until a handful is left: one grape cluster.\nfunction grow(P, x0, y0, dx, dy, pts, g, r, d) {\n  const { ax, ay } = P, n = pts.length;\n  let cx = 0, cy = 0;\n  for (const i of pts) (cx += ax[i]), (cy += ay[i]);\n  (cx /= n), (cy /= n);\n  if (n \u003c= 7 || g > 8) {\n    for (const i of pts) (P.ak[i] = P.cd.length), (ax[i] += (cx - ax[i]) * 0.3), (ay[i] += (cy - ay[i]) * 0.3);\n    P.cd.push(d + hypot(cx - x0, cy - y0));\n    P.cb.push(0.84 + 0.32 * rnd());\n    return;\n  }\n  // The lobes split along the line from the branch to their centroid; past\n  // them each set is cut across its long axis, a near half and a far one.\n  let ux = cx - x0, uy = cy - y0, ul = hypot(ux, uy), ox = x0, oy = y0;\n  if (g > 2) {\n    let sxx = 0, syy = 0, sxy = 0;\n    for (const i of pts) (sxx += (ax[i] - cx) ** 2), (syy += (ay[i] - cy) ** 2), (sxy += (ax[i] - cx) * (ay[i] - cy));\n    const th = 0.5 * atan2(2 * sxy, sxx - syy) + PI / 2;\n    (ux = cos(th)), (uy = sin(th)), (ul = 1), (ox = cx), (oy = cy);\n  }\n  if (ul \u003c 0.5) (ux = dx), (uy = dy), (ul = hypot(dx, dy));\n  (ux /= ul), (uy /= ul);\n  const side = (i) => (ax[i] - ox) * uy - (ay[i] - oy) * ux;\n  let A = pts.filter((i) => side(i) > 0), B = pts.filter((i) => side(i) \u003c= 0);\n  if (A.length \u003c 2 || B.length \u003c 2) {\n    const s = pts.slice().sort((i, j) => side(i) - side(j));\n    (A = s.slice(0, n >> 1)), (B = s.slice(n >> 1));\n  }\n  const pa = atan2(dy, dx), lim = g === 2 ? 1.75 : 1.1;\n  for (const Q of [A, B]) {\n    let qx = 0, qy = 0;\n    for (const i of Q) (qx += ax[i]), (qy += ay[i]);\n    (qx = qx / Q.length - x0), (qy = qy / Q.length - y0);\n    let a = atan2(qy, qx), da = a - pa;\n    da = atan2(sin(da), cos(da));\n    if (abs(da) > lim) a = pa + Math.sign(da) * lim;\n    let len = max(1.2, hypot(qx, qy) * (Q.length \u003c= 7 ? 0.55 : 0.4)), x1, y1;\n    for (;;) {\n      (x1 = x0 + cos(a) * len), (y1 = y0 + sin(a) * len);\n      if (len \u003c= 1.2 || samp(P.sd, x1, y1) \u003c -0.6) break;\n      len *= 0.8;\n    }\n    const rr = max(0.5, r * Math.cbrt(Q.length / n));\n    grow(P, x1, y1, x1 - x0, y1 - y0, Q, g + 1, rr, addSeg(P, x0, y0, x1, y1, rr, g, d));\n  }\n}\n\nfunction build(P) {\n  const { sd, own, GL } = P;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, sl = d0(x + 0.5) - d0(x - 0.5), cut = (y - d0(x) + 0.6) / sqrt(1 + sl * sl);\n    const a = y \u003c 15 ? 6 : max(sdPoly(LUNGS[0], x, y), cut), b = y \u003c 15 ? 6 : max(sdPoly(LUNGS[1], x, y), cut);\n    sd[p] = min(a, b) + 0.9 * (vn(x * 0.32, y * 0.32) - 0.5);\n    GL[p] = exp(-(((x - 32) / 26) ** 2) - (((y - 66) / 50) ** 2));\n  }\n  // Alveoli on a jittered honeycomb inside the lungs.\n  const pts = [[], []];\n  for (let j = 0; j \u003c 56; j++)\n    for (let i = 0; i \u003c 29; i++) {\n      const x = 1 + i * 2.25 + (j & 1) * 1.125 + (rnd() - 0.5) * 0.7, y = 19 + j * 1.95 + (rnd() - 0.5) * 0.7;\n      if (x > 62.5 || y > 125 || samp(sd, x, y) > -1) continue;\n      pts[x \u003c 32 ? 0 : 1].push(P.ax.length);\n      P.ax.push(x), P.ay.push(y), P.as.push(0.86 + 0.28 * rnd()), P.soot.push(rnd());\n    }\n  P.ak = new Int16Array(P.ax.length);\n  // The larynx and trachea, the short steep right bronchus and the longer\n  // left one, then the trees.\n  let d = addSeg(P, 32, 3, 32, 16.5, 1, 9, 0);\n  d = addSeg(P, 32, 16.5, 32, 48.5, 3, 0, d);\n  grow(P, 26.6, 57, -4.8, 8.5, pts[0], 2, 2.3, addSeg(P, 31.3, 48.5, 26.6, 57, 2.3, 1, d));\n  grow(P, 40.4, 56.6, 7.8, 8.1, pts[1], 2, 2.05, addSeg(P, 32.7, 48.5, 40.4, 56.6, 2.05, 1, d));\n  P.dmax = max(...P.cd);\n  P.cd = Float32Array.from(P.cd, (v) => v / P.dmax);\n  P.cox = F32(P.cd.length).fill(0.55);\n  P.airK = F32(P.cd.length);\n  // Each lung pixel takes the cluster of its nearest alveolus.\n  const best = F32(N).fill(9);\n  P.ax.forEach((cx, i) => {\n    const cy = P.ay[i];\n    for (let y = max(0, round(cy) - 3); y \u003c= min(H - 1, round(cy) + 3); y++)\n      for (let x = max(0, round(cx) - 3); x \u003c= min(W - 1, round(cx) + 3); x++) {\n        const e = hypot(x - cx, y - cy), p = y * W + x;\n        if (e \u003c best[p]) (best[p] = e), (own[p] = P.ak[i]);\n      }\n  });\n  under(P);\n}\n\n// What lies behind the lungs, breathed out, as colour times cover: the\n// larynx, the diaphragm and, dim under it, the liver and the stomach.\nfunction under(P) {\n  const { und, ua } = P;\n  const lay = (p, r, g, b, a) => {\n    if (a \u003c= 0) return;\n    const o = p * 3;\n    (und[o] += (r - und[o]) * a), (und[o + 1] += (g - und[o + 1]) * a), (und[o + 2] += (b - und[o + 2]) * a), (ua[p] += (1 - ua[p]) * a);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, t = y - d0(x), ax = abs(x - 32);\n    if (t > 3) {\n      const xb = 37 + 3 * sin(y * 0.21), f = (1 - 0.55 * sm(3, 20, t)) * (0.7 + 0.5 * vn(x * 0.17, y * 0.17)) * (0.4 + 0.6 * sm(0.3, 2, abs(x - xb)));\n      x \u003c xb ? lay(p, 60 * f, 20 * f, 22 * f, cl(t - 3, 0, 1)) : lay(p, 50 * f, 30 * f, 44 * f, cl(t - 3, 0, 1));\n    }\n    // The diaphragm: a band of muscle with a lit upper face, its tendon pale\n    // in the middle under the heart.\n    if (t > -0.5 && t \u003c 4) {\n      const ten = sm(24, 29, x) * sm(43, 38, x), st = 0.8 + 0.2 * sin(x * 1.9 + t * 0.9), lit = 1 + 0.45 * sm(1.6, 0, t);\n      lay(p, mix(232 * st, 214, ten) * 0.72 * lit, mix(82 * st, 198, ten) * 0.66 * lit, mix(96, 188, ten) * 0.66 * lit, cl(min(t + 0.5, 4 - t), 0, 1));\n    }\n    if (y \u003c 19) {\n      const hy = 3.4 + 0.03 * ax * ax;\n      if (ax \u003c 9.5) lay(p, 200, 192, 176, 0.5 * cl(1 - abs(y - hy) / 0.9, 0, 1));\n      const top = 6 + 2.2 * max(0, 1 - ax / 2.4), hw = 7.4 - 0.42 * (y - 6), e = min(y - top, 14.6 - y, hw - ax);\n      // The thyroid cartilage, its left plate lit and the right in shade.\n      if (e > -0.5) lay(p, 206, 196, 184, cl(e + 0.5, 0, 1) * (0.42 + 0.2 * exp(-((ax / 1.8) ** 2)) + 0.25 * sm(1.2, 0.2, e)) * (x \u003c 32 ? 1.05 : 0.78));\n      if (y > 15 && y \u003c 17.6 && ax \u003c 4.9) lay(p, 214, 204, 192, 0.55 * cl(4.9 - ax, 0, 1));\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.t += dt;\n  P.air = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3), dep = cl(k[2], 0, 1), alt = cl(k[3], 0, 1);\n  const bpm = (8 + 4.5 * rate + 12 * max(0, rate - 2) ** 2) * (1 + 0.45 * alt);\n  P.D = (0.5 + 0.5 * dep) * (1 - 0.4 * sm(2, 3, rate)) * (1 + 0.22 * alt);\n  if (input.btnPressed && input.btnPressed[0] && P.ct \u003c 0) (P.ct = 0), (P.cv = P.vol), (P.cn = 0);\n  let vol = 0, envIn = 0, envOut = 0, Fin = -1, Fx = 2;\n  P.bf = [];\n  P.jolt = 0;\n  if (P.ct >= 0) {\n    // A gasp, then three coughs, each a jolt and a burst of warm air up the tree.\n    const c = (P.ct += dt);\n    let j = 0;\n    while (j \u003c CK.length - 4 && c > CK[j + 2]) j += 2;\n    vol = mix(j ? CK[j + 1] : P.cv, CK[j + 3], sm(CK[j], CK[j + 2], c));\n    if (c \u003c 0.4) (envIn = sin((PI * c) / 0.4) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(c / 0.3, 0, 1)) ** 2));\n    for (const tc of CT) {\n      const u = c - tc;\n      if (u > 0 && u \u003c 0.7) P.bf.push(1 - u * 3.2), (P.jolt = max(P.jolt, 2.4 * exp(-u / 0.08)));\n    }\n    if (P.cn \u003c 3 && c > CT[P.cn] + 0.28) P.puffs.push([0, 2, rnd()]), P.cn++;\n    if (c > 1.9) (P.ct = -1), (P.ph = 0.9);\n  } else {\n    // In for 38% of a breath, out for half, then a short rest.\n    const p = (P.ph = (P.ph + (dt * bpm) / 60) % 1);\n    if (p \u003c 0.38) (vol = 0.5 - 0.5 * cos((PI * p) / 0.38)), (envIn = sin((PI * p) / 0.38) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(p / 0.3, 0, 1)) ** 2));\n    else if (p \u003c 0.88) {\n      const u = (p - 0.38) / 0.5;\n      (vol = 0.5 + 0.5 * cos(PI * u)), (envOut = sin(PI * u) ** 0.5), (Fx = 1.06 - 1.2 * sm(0.02, 0.8, u));\n    }\n    if (P.lp \u003c 0.64 && p >= 0.64) P.puffs.push([0, 1, rnd()]);\n    P.lp = p;\n  }\n  Object.assign(P, { vol, envIn, envOut, Fin, Fx });\n  // The alveoli the cold air has reached take up oxygen fast; the rest give it\n  // up slowly to the blood that carries it away.\n  const wS = max(0, 2 * P.air - 1), hi = 1 - 0.66 * alt - 0.14 * wS, { cd, cox, airK } = P;\n  for (let i = 0; i \u003c cd.length; i++) {\n    cox[i] += Fin > cd[i] ? (hi - cox[i]) * (1 - exp(-dt * 7)) : (0.05 - cox[i]) * (1 - exp(-dt * 0.85));\n    airK[i] = envIn * exp(-(((Fin - cd[i]) / 0.07) ** 2));\n  }\n  P.hp = (P.hp + (dt * (62 + 10 * rate + 40 * alt)) / 60) % 1;\n  P.hb = exp(-(((P.hp - 0.06) / 0.05) ** 2)) + 0.6 * exp(-(((P.hp - 0.3) / 0.05) ** 2));\n  P.puffs = P.puffs.filter((f) => (f[0] += dt) \u003c 5);\n}\n\n// Rest coordinates to the panel, breathed in by the per-row and per-column\n// scales: out to the sides, down with the diaphragm.\nlet FX = 0, FY = 0;\nfunction fw(P, xr, yr) {\n  const { SX, KY } = P, kx = cl(32 + (xr - 32) * SX[cl(round(yr), 0, H - 1)], 0, 62.99), ki = floor(kx);\n  FY = A0 + (yr - A0) * (KY[ki] + (KY[ki + 1] - KY[ki]) * (kx - ki));\n  FX = 32 + (xr - 32) * SX[cl(round(FY), 0, H - 1)];\n}\n\nfunction alveoli(P) {\n  const { alvA, alvS, alvK, ax, ay, as } = P, rA = 1.02 + 0.52 * P.vol * P.D;\n  alvA.fill(0);\n  for (let i = 0; i \u003c ax.length; i++) {\n    fw(P, ax[i], ay[i]);\n    const cx = FX, cy = FY, r = rA * as[i], lim = (r + 0.5) ** 2;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n        const dx = x - cx, dy = y - cy, e2 = dx * dx + dy * dy;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x;\n        const q = e / r, hx = dx + 0.4 * r, hy = dy + 0.45 * r, hl = max(0, 1 - sqrt(hx * hx + hy * hy) / (0.75 * r));\n        const s = 0.72 + 0.28 * sqrt(max(0, 1 - q * q)) + 0.38 * hl * hl;\n        if (a * s > alvA[p] * alvS[p]) (alvA[p] = a), (alvS[p] = s), (alvK[p] = i);\n      }\n  }\n}\n\nfunction tree(P) {\n  const { seg: S, trA, trV, trS, trG, trH } = P, dil = 1 + 0.1 * P.vol * P.D;\n  trA.fill(0);\n  trH.fill(0);\n  for (let j = 0; j \u003c S.length; j += 8) {\n    fw(P, S[j], S[j + 1]);\n    const x0 = FX, y0 = FY;\n    fw(P, S[j + 2], S[j + 3]);\n    const ex = FX - x0, ey = FY - y0, l2 = ex * ex + ey * ey || 1e-6, r = S[j + 4] * dil, g = S[j + 5], da = S[j + 6], db = S[j + 7], lim = (r + 1.7) ** 2, hr = min(1, r);\n    for (let y = max(0, floor(min(y0, FY) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, FY) + r + 1)); y++)\n      for (let x = max(0, floor(min(x0, FX) - r - 1)); x \u003c= min(W - 1, ceil(max(x0, FX) + r + 1)); x++) {\n        const t = cl(((x - x0) * ex + (y - y0) * ey) / l2, 0, 1), px = x - x0 - ex * t, py = y - y0 - ey * t, e2 = px * px + py * py;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x, h = cl(r + 1.7 - e, 0, 1) * hr;\n        if (h > trH[p]) trH[p] = h;\n        if (a > trA[p]) (trA[p] = a), (trS[p] = da + (db - da) * t), (trV[p] = e / r), (trG[p] = g);\n      }\n  }\n}\n\n// The collarbones and ten ribs, faint arcs that lift and spread on a breath.\nfunction ribs(P) {\n  const { rib, SX } = P, v = P.vol * P.D;\n  rib.fill(0);\n  const dot = (fx, fy, rad, k) => {\n    for (let y = max(0, round(fy) - 1); y \u003c= min(H - 1, round(fy) + 1); y++)\n      for (let x = max(0, round(fx) - 1); x \u003c= min(W - 1, round(fx) + 1); x++) {\n        const a = cl(rad + 0.5 - sqrt((x - fx) ** 2 + (y - fy) ** 2), 0, 1) * k, p = y * W + x;\n        if (a > rib[p]) rib[p] = a;\n      }\n  };\n  for (let i = 0; i \u003c= 10; i++)\n    for (const s of [-1, 1]) {\n      if (i === 0) {\n        for (let n = 0; n \u003c= 50; n++) {\n          const u = n / 50;\n          dot(32 + s * (4.5 + 21 * u), 18.6 - 4.2 * u + 1.4 * sin(PI * u) - 1.2 * v, 0.5 + 0.4 * (2 * u - 1) ** 2, 0.85);\n        }\n        continue;\n      }\n      const yr = 23 + (i - 1) * 8.4, y0 = yr - v * (1 + 0.42 * i), hw = (1.5 + 28.4 * (1 - exp(-(yr - 15) / 14))) * SX[round(yr)];\n      const rx = hw - 3, ry = (5.5 + 0.55 * i) * (1 - 0.25 * v), n = ceil((rx + ry) * 2.2);\n      for (let m = 0; m \u003c= n; m++) {\n        const th = (1.62 * m) / n;\n        dot(32 + s * (3 + rx * sin(th)), y0 + ry * (1 - cos(th)), 0.7, sm(0.2, 0.6, th));\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cox) return;\n  const { SX, KY, sd, own, cox, cb, airK, und, ua, alvA, alvS, alvK, trA, trV, trS, trG, trH, rib, O, ak, soot, GL } = P, dm = 1 / P.dmax;\n  const t = P.t, v = P.vol * P.D, air = P.air, hb = P.hb, { envIn, envOut, Fin, Fx, bf } = P;\n  const wC = max(0, 1 - 2 * air), wW = 1 - abs(2 * air - 1), wS = max(0, 2 * air - 1);\n  const pal = (c, w, s) => [0, 1, 2].map((i) => c[i] * wC + w[i] * wW + s[i] * wS);\n  const bgT = pal([3, 7, 18], [16, 26, 48], [62, 50, 32]), bgB = pal([2, 4, 12], [8, 14, 30], [36, 28, 20]), glo = pal([8, 18, 40], [22, 38, 64], [40, 30, 18]);\n  const cold = pal([150, 205, 255], [215, 238, 255], [196, 178, 128]), warm = pal([255, 196, 160], [255, 224, 206], [190, 160, 130]);\n  const puffC = pal([255, 214, 196], [236, 242, 255], [168, 158, 144]), puffK = 0.6 * wC + 1.5 * wW + 0.7 * wS;\n  const oxA = [240 - 64 * wS, 46 + 26 * wS, 58 + 20 * wS];\n  for (let y = 0; y \u003c H; y++) SX[y] = 1 + 0.085 * v * (0.25 + 0.75 * sm(15, 115, y));\n  for (let x = 0; x \u003c W; x++) KY[x] = 1 + 0.14 * v * GX[x];\n  alveoli(P);\n  tree(P);\n  ribs(P);\n  // The breath leaving at the top: each puff rises, spreads and thins.\n  const pf = [];\n  for (const [age, str, sd0] of P.puffs) {\n    const R = 3 + (5 + 8 * wW) * age;\n    pf.push(32 + (sd0 - 0.5) * 8, 6 - 3.2 * age, R, str * sm(0, 0.25, age) * exp(-age / (0.9 + 1.6 * wW)), sd0 * 40);\n  }\n  const hs = 1 / (1 - 0.035 * hb);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const fy = y / 127, gl = GL[p];\n      let hz = 1;\n      if (wS > 0) hz = 1 + wS * (0.18 * sin(x * 0.2 + y * 0.05 + t * 0.6) + 0.18 * sin(y * 0.13 - x * 0.06 - t * 0.35));\n      for (let c = 0; c \u003c 3; c++) C[c] = (bgT[c] + (bgB[c] - bgT[c]) * fy + glo[c] * gl) * hz;\n      const xr = cl(32 + (x - 32) / SX[y], 0, 62.999), yr = cl(A0 + (y - A0) / KY[x], 0, 126.999);\n      const xi = xr | 0, yi = yr | 0, fx = xr - xi, fz = yr - yi, q = yi * W + xi;\n      if (ua[q] + ua[q + 1] + ua[q + W] + ua[q + W + 1] > 0) {\n        const w0 = (1 - fx) * (1 - fz) * ua[q], w1 = fx * (1 - fz) * ua[q + 1], w2 = (1 - fx) * fz * ua[q + W], w3 = fx * fz * ua[q + W + 1], a = 1 - w0 - w1 - w2 - w3;\n        const o0 = q * 3, o2 = o0 + W * 3;\n        for (let c = 0; c \u003c 3; c++) C[c] = C[c] * a + und[o0 + c] * w0 + und[o0 + 3 + c] * w1 + und[o2 + c] * w2 + und[o2 + 3 + c] * w3;\n      }\n      // The heart, dim behind the lungs, its apex down to the left.\n      if (xr > 20 && xr \u003c 56 && yr > 60 && yr \u003c 110) {\n        const dx = xr - 36.6, dy = yr - 86, hv = (dx * 0.6 + dy * 0.8) * hs, hu = (dx * 0.8 - dy * 0.6) * hs, eu = hu / (12.5 * (1 - 0.36 * sm(-6, 19, hv))), ev = hv / 19;\n        const a = cl((1 - sqrt(eu * eu + ev * ev)) * 9, 0, 1);\n        if (a > 0) {\n          const k = (0.4 + 0.32 * hb) * (0.65 + 0.45 * sm(9, -9, hu));\n          bl(150 * k, 26 * k, 44 * k, a);\n        }\n      }\n      // The lung: a dusky body, the grape clusters of alveoli, the capillary\n      // net shimmering on them, the pleura at the edge.\n      const s = samp(sd, xr, yr), qn = round(yr) * W + round(xr);\n      let m = 0;\n      if (s \u003c 1.2) {\n        const c = own[qn], ox = c >= 0 ? cox[c] : 0.3;\n        m = cl(0.5 - s, 0, 1);\n        if (m > 0) bl(24 + 56 * ox, 14 - 4 * ox, 50 - 20 * ox, 0.92 * m);\n        const aa = alvA[p];\n        if (aa > 0) {\n          const i = alvK[p], cc = ak[i], o = cox[cc], sh = alvS[p] * cb[cc] * (soot[i] \u003c wS * 0.4 ? 0.3 : 1), af = 0.4 * airK[cc];\n          for (let c = 0; c \u003c 3; c++) C[c] += ((DA[c] + (oxA[c] - DA[c]) * o) * sh + cold[c] * af - C[c]) * aa;\n        }\n        const cv = hash(qn, 5);\n        if (m > 0 && cv > 0.6) {\n          const k = (cv - 0.35) * (0.75 + 0.75 * sin(t * 6 + cv * 90 + 2 * hb)) * (0.12 + 0.34 * ox) * m;\n          (C[0] += 230 * k), (C[1] += 30 * k), (C[2] += 50 * k);\n        }\n        const rm = cl(1 - abs(s + 0.45) / 0.75, 0, 1) * 0.5;\n        if (rm > 0) bl(126 + 129 * ox, 100 + 24 * ox, 214 - 70 * ox, rm);\n        // A shadow along each airway lifts the tree off the alveoli.\n        bl(0, 0, 0, trH[p] * 0.5 * m);\n      }\n      // The airways, and the air in them.\n      const ta = trA[p];\n      if (ta > 0) {\n        const gg = trG[p], vv = trV[p], d = trS[p] * dm, wc = WC[gg], al = AG[gg] * ta;\n        let wb = 0.85;\n        if (gg \u003c= 1) {\n          const ring = 0.5 + 0.5 * cos(trS[p] * 2.73);\n          wb = (0.5 + 0.5 * sm(0.35, 0.95, vv)) * (0.66 + 0.44 * ring * ring);\n        } else if (gg \u003c= 3) wb = 0.65 + 0.35 * sm(0.3, 1, vv);\n        bl(wc[0] * wb, wc[1] * wb, wc[2] * wb, al);\n        let ca = 0, wa = 0;\n        if (envIn > 0 && d \u003c Fin) ca = envIn * (0.3 + 0.7 * exp(-(((Fin - d) / 0.05) ** 2)));\n        if (envOut > 0 && d > Fx) wa = envOut * (0.24 + 0.76 * exp(-(((d - Fx) / 0.05) ** 2)));\n        for (const f of bf) wa += 1.3 * exp(-(((d - f) / 0.06) ** 2)) + (d > f ? 0.25 : 0);\n        const lf = (gg \u003c= 1 ? 1 - 0.5 * sm(0.55, 1, vv) : 1) * ta * (gg === 9 ? 0.8 : 0.9);\n        for (let c = 0; c \u003c 3; c++) C[c] += (cold[c] * ca + warm[c] * wa) * lf;\n      }\n      const rb = rib[p];\n      if (rb > 0) bl(220, 210, 196, rb * (0.42 + 0.1 * m));\n      if (y \u003c 48 && pf.length) {\n        let pa = 0;\n        for (let j = 0; j \u003c pf.length; j += 5) {\n          const dx = (x - pf[j]) / (pf[j + 2] * 1.4), dy = (y - pf[j + 1]) / pf[j + 2], e = dx * dx + dy * dy;\n          if (e \u003c 4) pa += pf[j + 3] * exp(-e * 1.4) * cl(0.4 + 1.4 * (vn(x * 0.2 + pf[j + 4], y * 0.2 + t * 0.9) - 0.5) + 0.5 * exp(-e * 3), 0, 1.4);\n        }\n        if (pa > 0) bl(puffC[0], puffC[1], puffC[2], min(1, pa * puffK));\n      }\n      if (wS > 0) bl(120, 96, 62, 0.14 * wS * hz);\n      O.set(C, p * 3);\n    }\n  // A cough jolts the whole chest up.\n  const jl = round(P.jolt);\n  for (let y = 0; y \u003c H; y++) {\n    const o = min(H - 1, y + jl) * W * 3;\n    for (let x = 0; x \u003c W; x++) display.setPixel(x, y, min(255, O[o + x * 3]) | 0, min(255, O[o + x * 3 + 1]) | 0, min(255, O[o + x * 3 + 2]) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Air","min":0,"max":1,"about":"What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli."},{"name":"Rate","min":0.2,"max":3,"about":"Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3."},{"name":"Depth","min":0,"max":1,"about":"A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far."},{"name":"Altitude","min":0,"max":1,"about":"Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own."}],"start":[0,2,0,0.06],"measures":{"motion":0.3669,"detail":0.0863,"edges":0.4238,"complexity":2.0569,"coverage":0.8446,"colour":0.207,"drift":0.1347},"knobResponse":[0.0972,0.1294,0.1076,0.1068]},{"slug":"brushstrokes","title":"Brushstrokes","family":"noise","round":17,"note":"반 고흐의 「별이 빛나는 밤」을 짧고 두꺼운 붓질로 칠하고 또 칠해요. 흐름을 따라 놓인 군청과 코발트 붓질이 노란 별무리와 초승달을 감아 돌고, 불꽃처럼 솟은 사이프러스 옆 마을에 창이 켜져요.","idea":"A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","layer":{"id":"layer-brushstrokes","type":"code","name":"brushstrokes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow."},{"name":"Flow","min":0.2,"max":3,"about":"How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower."},{"name":"Length","min":4,"max":12,"about":"How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones."},{"name":"Swirl","min":0,"max":1,"about":"How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies."}],"start":[0,2,4,0.06],"measures":{"motion":0.0383,"detail":0.0951,"edges":0.2993,"complexity":2.3542,"coverage":0.998,"colour":0.5763,"drift":0.0278},"knobResponse":[0.4036,0.1538,0.1578,0.1518]},{"slug":"cam-wave","title":"Cam Wave","family":"machine","round":15,"note":"발치의 캠축이 돌면 캠마다 막대를 밀어 올리고, 막대 끝에 걸린 구슬 띠가 물결이 되어 옆으로 흘러가요. K1 을 누르면 캠이 둥근 편심에서 달걀꼴, 달팽이꼴로 바뀌어요.","idea":"A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.","buttons":"K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.","code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-cam-wave","type":"code","name":"cam-wave","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20."},{"name":"Cams","min":6,"max":12,"about":"How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12."},{"name":"Phase","min":-1,"max":1,"about":"How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second."}],"start":[0,2,6,0.06],"measures":{"motion":0.4062,"detail":0.0758,"edges":0.6341,"complexity":0.5068,"coverage":0.4175,"colour":0.2693,"drift":0.1185},"knobResponse":[0.0838,0.0978,0.1488,0.0628]},{"slug":"cat-eye","title":"Cat Eye","family":"cosmetic","round":34,"note":"보랏빛 젤리 폴리시 밑으로 보이지 않는 막대 자석이 미끄러지면, 자성 반짝이가 자기장을 따라 돌아 자기장이 표면과 나란한 자리에 날카로운 빛줄기 하나가 서고 그 양옆은 곧추선 반짝이로 짙어져요. 자석이 지나간 자리의 반짝이는 1.8초에 걸쳐 흩어진 은하 같은 반짝임으로 돌아가요. K3 은 막대를 둘로 늘려 줄 두 개나 별 모양을 세우고, K1 을 누르면 자석이 멀어졌다 돌아와요.","idea":"A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.","buttons":"K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.","code":"// ===== Patternflow pattern =====\n// Title:   Cat Eye\n// Family:  cosmetic\n// Idea:    A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after magnetic cat-eye gel nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1\n//\n// Knob 1: Hue. The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne.\n// Knob 2: Speed. At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Magnet. At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star.\n// Knob 4: Depth. How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide.\n// Buttons: K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.\n\nconst W = 64, H = 128, N = W * H;\n// The magnet is a flat bar 76 LEDs long, magnetised across its width, lying\n// along the panel under the polish: nine dipoles in a row.\nconst BAR = 76, PTS = 9;\nconst { floor, min, max, sqrt, sin, cos, exp, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * Math.log(u)) * cos(2 * PI * v);\n}\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, mag: 0, depth: 0.06, t: 0, warm: false, pull: 0, pullT: -1,\n    A: new Float32Array(N), TH: new Float32Array(N), JIT: new Float32Array(N), TEX: new Float32Array(N), SZ: new Float32Array(N),\n    R0: new Float32Array(N), RW: new Float32Array(N), RP: new Float32Array(N),\n    dip: new Float64Array(6 * 2 * PTS), nd: 0, ref: 1,\n  };\n  for (let p = 0; p \u003c N; p++) {\n    S.JIT[p] = 0.1 * gauss();\n    S.TEX[p] = 0.8 + 0.4 * random();\n    S.SZ[p] = 0.3 + 1.2 * random() ** 2;\n    S.R0[p] = (random() - 0.5) * PI;\n    S.RW[p] = 0.3 + 0.9 * random();\n    S.RP[p] = 2 * PI * random();\n  }\n  params.s = S;\n}\n\n// A second bar has strength |Magnet|. Below 0 it lies beside the first, 0.9\n// of the depth away and poles reversed, for a double line; above 0 it lies\n// across the first, for a star.\n\nfunction magnets(S) {\n  const sp = S.t, d = 10 + 30 * S.depth;\n  const cx = 32 + 15 * sin((2 * PI * sp) / 7), cy = 64 + 16 * sin((2 * PI * sp) / 11 + 1);\n  const ang = 0.3 * sin((2 * PI * sp) / 17);\n  // Along the bar (down the panel) and across it.\n  const lx = -sin(ang), ly = cos(ang), mx = cos(ang), my = sin(ang);\n  const k = S.mag, away = 1 + 3 * S.pull, dip = S.dip;\n  S.nd = 0;\n  const bar = (x, y, ax, ay, ex, ey, st) => {\n    for (let i = 0; i \u003c PTS; i++) {\n      const u = (i / (PTS - 1) - 0.5) * BAR, o = 6 * S.nd++;\n      dip[o] = x + u * ax;\n      dip[o + 1] = y + u * ay;\n      dip[o + 2] = d * away;\n      dip[o + 3] = ex;\n      dip[o + 4] = ey;\n      dip[o + 5] = st / PTS;\n    }\n  };\n  if (k \u003c 0) {\n    const s = 0.9 * d * -k;\n    bar(cx - s * mx, cy - s * my, lx, ly, mx, my, 1);\n    bar(cx + s * mx, cy + s * my, lx, ly, -mx, -my, -k);\n  } else {\n    bar(cx, cy, lx, ly, mx, my, 1);\n    if (k > 0) bar(cx, cy, mx, my, -lx, -ly, k);\n  }\n  // The field at the surface right over the middle of one bar at this depth\n  // is the scale the flakes answer to.\n  let ref = 0;\n  for (let i = 0; i \u003c PTS; i++) {\n    const u = (i / (PTS - 1) - 0.5) * BAR, r2 = u * u + d * d, ir = 1 / sqrt(r2);\n    ref += (ir * ir * ir) / PTS;\n  }\n  S.ref = ref;\n}\n\nfunction step(S, dt) {\n  const sp = S.speed / 2, ds = dt * sp;\n  S.t += ds;\n  if (S.pullT >= 0) {\n    // Away in 0.3 s, held 2.5 s, back in 0.5 s.\n    S.pullT += ds;\n    const u = S.pullT;\n    S.pull = u \u003c 0.3 ? u / 0.3 : u \u003c 2.8 ? 1 : u \u003c 3.3 ? 1 - (u - 2.8) / 0.5 : 0;\n    if (u >= 3.3) S.pullT = -1;\n  }\n  magnets(S);\n  const { A, TH, dip } = S, iref = 1 / S.ref, nd = S.nd;\n  const kOn = 1 - exp(-ds / 0.15), kOff = 1 - exp(-ds / 1.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let bx = 0, by = 0, bz = 0;\n      for (let o = 0; o \u003c 6 * nd; o += 6) {\n        const ex = dip[o + 3], ey = dip[o + 4], st = dip[o + 5];\n        const rx = x + 0.5 - dip[o], ry = y + 0.5 - dip[o + 1], rz = dip[o + 2];\n        const r2 = rx * rx + ry * ry + rz * rz, ir = 1 / sqrt(r2), i3 = st * ir * ir * ir, md = 3 * (ex * rx + ey * ry) * ir * ir;\n        bx += i3 * (md * rx - ex);\n        by += i3 * (md * ry - ey);\n        bz += i3 * md * rz;\n      }\n      const bh = sqrt(bx * bx + by * by), b = sqrt(bh * bh + bz * bz) * iref;\n      const p = y * W + x, at = 1 - exp(-b / 0.25);\n      A[p] += (at - A[p]) * (at > A[p] ? kOn : kOff);\n      // Tilt of the field from the surface, -pi/2..pi/2; a flake's axis is a\n      // line, so tilts half a turn apart are the same.\n      const tt = atan2(bz, bh);\n      let dlt = tt - TH[p];\n      if (dlt > PI / 2) dlt -= PI;\n      else if (dlt \u003c -PI / 2) dlt += PI;\n      TH[p] += dlt * (1 - exp(-ds * (1 + 10 * at) / 0.6));\n      if (TH[p] > PI / 2) TH[p] -= PI;\n      else if (TH[p] \u003c -PI / 2) TH[p] += PI;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.mag = cl(k[2], -1, 1);\n  S.depth = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on flakes that have followed the magnet for two seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 60; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.pullT \u003c 0) S.pullT = 0;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { A, TH, JIT, TEX, SZ, R0, RW, RP } = S, h = S.hue + 0.74, t = S.t;\n  // Orange and yellow jelly at level 40 reads brown on the panel. Round\n  // there (hue 0.0 to 0.22) the base sinks toward black, as a gold cat eye\n  // over a black base coat, and the band's glow turns paler and brighter.\n  const hh = h - floor(h), wy = max(0, 1 - ((hh - 0.11) / 0.12) ** 2);\n  const body = [0, 0, 0], glint = [0, 0, 0], vel = [0, 0, 0];\n  hsv(h, 0.95 - 0.2 * wy, 1 - 0.7 * wy, body);\n  hsv(h + 0.02, 0.25 - 0.1 * wy, 1, glint);\n  hsv(h + 0.01, 0.6 - 0.25 * wy, 1 + 0.4 * wy, vel);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, a = A[p], th = TH[p], s2 = sin(th) * sin(th);\n      // Where the flake points: along the field as far as it is aligned,\n      // otherwise its own slow tumble.\n      const free = 6 * (R0[p] + 0.7 * sin(RW[p] * t + RP[p]));\n      const phi = a * (th + JIT[p]) + (1 - a) * free;\n      const g = exp(-(phi * phi) / (2 * 0.12 * 0.12));\n      const v = a * a * exp(-(th * th) / (2 * 0.5 * 0.5));\n      const lb = 40 * TEX[p] * (1 - 0.5 * a * s2), lg = 255 * g * (a + 0.3 * (1 - a) * SZ[p]), lv = 150 * v;\n      const r = body[0] * lb + glint[0] * lg + vel[0] * lv;\n      const gg = body[1] * lb + glint[1] * lg + vel[1] * lv;\n      const bb = body[2] * lb + glint[2] * lg + vel[2] * lv;\n      display.setPixel(x, y, round(min(255, r)), round(min(255, gg)), round(min(255, bb)));\n    }\n}\n","layer":{"id":"layer-cat-eye","type":"code","name":"cat-eye","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cat Eye\n// Family:  cosmetic\n// Idea:    A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after magnetic cat-eye gel nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1\n//\n// Knob 1: Hue. The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne.\n// Knob 2: Speed. At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Magnet. At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star.\n// Knob 4: Depth. How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide.\n// Buttons: K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.\n\nconst W = 64, H = 128, N = W * H;\n// The magnet is a flat bar 76 LEDs long, magnetised across its width, lying\n// along the panel under the polish: nine dipoles in a row.\nconst BAR = 76, PTS = 9;\nconst { floor, min, max, sqrt, sin, cos, exp, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * Math.log(u)) * cos(2 * PI * v);\n}\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, mag: 0, depth: 0.06, t: 0, warm: false, pull: 0, pullT: -1,\n    A: new Float32Array(N), TH: new Float32Array(N), JIT: new Float32Array(N), TEX: new Float32Array(N), SZ: new Float32Array(N),\n    R0: new Float32Array(N), RW: new Float32Array(N), RP: new Float32Array(N),\n    dip: new Float64Array(6 * 2 * PTS), nd: 0, ref: 1,\n  };\n  for (let p = 0; p \u003c N; p++) {\n    S.JIT[p] = 0.1 * gauss();\n    S.TEX[p] = 0.8 + 0.4 * random();\n    S.SZ[p] = 0.3 + 1.2 * random() ** 2;\n    S.R0[p] = (random() - 0.5) * PI;\n    S.RW[p] = 0.3 + 0.9 * random();\n    S.RP[p] = 2 * PI * random();\n  }\n  params.s = S;\n}\n\n// A second bar has strength |Magnet|. Below 0 it lies beside the first, 0.9\n// of the depth away and poles reversed, for a double line; above 0 it lies\n// across the first, for a star.\n\nfunction magnets(S) {\n  const sp = S.t, d = 10 + 30 * S.depth;\n  const cx = 32 + 15 * sin((2 * PI * sp) / 7), cy = 64 + 16 * sin((2 * PI * sp) / 11 + 1);\n  const ang = 0.3 * sin((2 * PI * sp) / 17);\n  // Along the bar (down the panel) and across it.\n  const lx = -sin(ang), ly = cos(ang), mx = cos(ang), my = sin(ang);\n  const k = S.mag, away = 1 + 3 * S.pull, dip = S.dip;\n  S.nd = 0;\n  const bar = (x, y, ax, ay, ex, ey, st) => {\n    for (let i = 0; i \u003c PTS; i++) {\n      const u = (i / (PTS - 1) - 0.5) * BAR, o = 6 * S.nd++;\n      dip[o] = x + u * ax;\n      dip[o + 1] = y + u * ay;\n      dip[o + 2] = d * away;\n      dip[o + 3] = ex;\n      dip[o + 4] = ey;\n      dip[o + 5] = st / PTS;\n    }\n  };\n  if (k \u003c 0) {\n    const s = 0.9 * d * -k;\n    bar(cx - s * mx, cy - s * my, lx, ly, mx, my, 1);\n    bar(cx + s * mx, cy + s * my, lx, ly, -mx, -my, -k);\n  } else {\n    bar(cx, cy, lx, ly, mx, my, 1);\n    if (k > 0) bar(cx, cy, mx, my, -lx, -ly, k);\n  }\n  // The field at the surface right over the middle of one bar at this depth\n  // is the scale the flakes answer to.\n  let ref = 0;\n  for (let i = 0; i \u003c PTS; i++) {\n    const u = (i / (PTS - 1) - 0.5) * BAR, r2 = u * u + d * d, ir = 1 / sqrt(r2);\n    ref += (ir * ir * ir) / PTS;\n  }\n  S.ref = ref;\n}\n\nfunction step(S, dt) {\n  const sp = S.speed / 2, ds = dt * sp;\n  S.t += ds;\n  if (S.pullT >= 0) {\n    // Away in 0.3 s, held 2.5 s, back in 0.5 s.\n    S.pullT += ds;\n    const u = S.pullT;\n    S.pull = u \u003c 0.3 ? u / 0.3 : u \u003c 2.8 ? 1 : u \u003c 3.3 ? 1 - (u - 2.8) / 0.5 : 0;\n    if (u >= 3.3) S.pullT = -1;\n  }\n  magnets(S);\n  const { A, TH, dip } = S, iref = 1 / S.ref, nd = S.nd;\n  const kOn = 1 - exp(-ds / 0.15), kOff = 1 - exp(-ds / 1.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let bx = 0, by = 0, bz = 0;\n      for (let o = 0; o \u003c 6 * nd; o += 6) {\n        const ex = dip[o + 3], ey = dip[o + 4], st = dip[o + 5];\n        const rx = x + 0.5 - dip[o], ry = y + 0.5 - dip[o + 1], rz = dip[o + 2];\n        const r2 = rx * rx + ry * ry + rz * rz, ir = 1 / sqrt(r2), i3 = st * ir * ir * ir, md = 3 * (ex * rx + ey * ry) * ir * ir;\n        bx += i3 * (md * rx - ex);\n        by += i3 * (md * ry - ey);\n        bz += i3 * md * rz;\n      }\n      const bh = sqrt(bx * bx + by * by), b = sqrt(bh * bh + bz * bz) * iref;\n      const p = y * W + x, at = 1 - exp(-b / 0.25);\n      A[p] += (at - A[p]) * (at > A[p] ? kOn : kOff);\n      // Tilt of the field from the surface, -pi/2..pi/2; a flake's axis is a\n      // line, so tilts half a turn apart are the same.\n      const tt = atan2(bz, bh);\n      let dlt = tt - TH[p];\n      if (dlt > PI / 2) dlt -= PI;\n      else if (dlt \u003c -PI / 2) dlt += PI;\n      TH[p] += dlt * (1 - exp(-ds * (1 + 10 * at) / 0.6));\n      if (TH[p] > PI / 2) TH[p] -= PI;\n      else if (TH[p] \u003c -PI / 2) TH[p] += PI;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.mag = cl(k[2], -1, 1);\n  S.depth = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on flakes that have followed the magnet for two seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 60; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.pullT \u003c 0) S.pullT = 0;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { A, TH, JIT, TEX, SZ, R0, RW, RP } = S, h = S.hue + 0.74, t = S.t;\n  // Orange and yellow jelly at level 40 reads brown on the panel. Round\n  // there (hue 0.0 to 0.22) the base sinks toward black, as a gold cat eye\n  // over a black base coat, and the band's glow turns paler and brighter.\n  const hh = h - floor(h), wy = max(0, 1 - ((hh - 0.11) / 0.12) ** 2);\n  const body = [0, 0, 0], glint = [0, 0, 0], vel = [0, 0, 0];\n  hsv(h, 0.95 - 0.2 * wy, 1 - 0.7 * wy, body);\n  hsv(h + 0.02, 0.25 - 0.1 * wy, 1, glint);\n  hsv(h + 0.01, 0.6 - 0.25 * wy, 1 + 0.4 * wy, vel);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, a = A[p], th = TH[p], s2 = sin(th) * sin(th);\n      // Where the flake points: along the field as far as it is aligned,\n      // otherwise its own slow tumble.\n      const free = 6 * (R0[p] + 0.7 * sin(RW[p] * t + RP[p]));\n      const phi = a * (th + JIT[p]) + (1 - a) * free;\n      const g = exp(-(phi * phi) / (2 * 0.12 * 0.12));\n      const v = a * a * exp(-(th * th) / (2 * 0.5 * 0.5));\n      const lb = 40 * TEX[p] * (1 - 0.5 * a * s2), lg = 255 * g * (a + 0.3 * (1 - a) * SZ[p]), lv = 150 * v;\n      const r = body[0] * lb + glint[0] * lg + vel[0] * lv;\n      const gg = body[1] * lb + glint[1] * lg + vel[1] * lv;\n      const bb = body[2] * lb + glint[2] * lg + vel[2] * lv;\n      display.setPixel(x, y, round(min(255, r)), round(min(255, gg)), round(min(255, bb)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Magnet","min":-1,"max":1,"about":"At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star."},{"name":"Depth","min":0,"max":1,"about":"How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide."}],"start":[0,2,0,0.06],"measures":{"motion":0.3686,"detail":0.0762,"edges":0.2839,"complexity":2.114,"coverage":0.9599,"colour":0.1236,"drift":0.1602},"knobResponse":[0.1875,0.1414,0.1895,0.1794]},{"slug":"cat-map","title":"Cat Map","family":"noise","round":31,"note":"패널을 토러스로 보고 아르놀트의 고양이 사상을 두 번의 밀기로 나눠 움직여요. 과녁 무늬가 사선 줄무늬로 늘어나다 잡음이 되고, 한 바퀴의 절반쯤에 줄이 엇갈린 유령이 지나간 뒤 30초에 처음 그림으로 정확히 돌아와요. K1 을 누르면 돌아오기 네 걸음 앞으로 건너뛰어요.","idea":"The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.","buttons":"K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.","code":"// ===== Patternflow pattern =====\n// Title:   Cat Map\n// Family:  noise\n// Idea:    The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold's cat map (Vladimir Arnold, 1967), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3\n//\n// Knob 1: Hue. Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc.\n// Knob 2: Speed. At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long.\n// Knob 3: Twist. The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps.\n// Knob 4: Picture. The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays.\n// Buttons: K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, abs, sqrt, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mod = (v, m) => ((v % m) + m) % m;\n\n// One full step of the map on a permutation: perm[p] is the source LED whose\n// colour now sits at p. The first shear moves what sits at (x, y) to\n// (x + a y, y), the second moves (x, y) to (x, y + 2b x), so together\n// (x, y) -> (x + a y, 2b x + (1 + 2ab) y), determinant 1, exact on Z64 x Z128.\nfunction shearRows(a, from, to) {\n  for (let y = 0; y \u003c H; y++) {\n    const s = mod(a * y, W), o = y * W;\n    for (let x = 0; x \u003c W; x++) to[o + x] = from[o + ((x - s + W) & 63)];\n  }\n}\nfunction shearCols(b, from, to) {\n  for (let x = 0; x \u003c W; x++) {\n    const s = mod(2 * b * x, H);\n    for (let y = 0; y \u003c H; y++) to[y * W + x] = from[((y - s + H) & 127) * W + x];\n  }\n}\n\n// The four pictures as region numbers: 0 and 1 are the two main colours, 2\n// the light one. Each fills the whole panel.\nconst REG = [];\n{\n  for (let k = 0; k \u003c 4; k++) REG.push(new Uint8Array(N));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = x - 31.5, dy = y - 63.5, r = sqrt(dx * dx + dy * dy);\n      // Rings 7 LEDs wide round a disc, and a band corner to corner where\n      // the two ring colours trade places.\n      let g = r \u003c 9 ? 2 : floor((r - 9) / 7) & 1;\n      if (g \u003c 2 && abs(2 * dx + dy) / sqrt(5) \u003c 6) g = 1 - g;\n      REG[0][p] = g;\n      // Nested diamonds, 8 LEDs a band down the long axis, a light core.\n      const dd = abs(dx) + abs(dy) / 2;\n      REG[1][p] = dd \u003c 7 ? 2 : floor((dd - 7) / 6) & 1;\n      // Four quarters round a disc that swaps them, with a light rim.\n      const q = (dx \u003c 0) !== (dy \u003c 0) ? 1 : 0;\n      REG[2][p] = r \u003c 21 ? 1 - q : r \u003c 25 ? 2 : q;\n      // Twelve rays round a light disc and a light ring.\n      const ray = floor(((atan2(dy, dx) + PI) / (2 * PI)) * 12) & 1;\n      REG[3][p] = r \u003c 8 || (r > 30 && r \u003c 34) ? 2 : ray;\n    }\n}\n\n// How much of the picture survives after n steps of each twist, from the\n// rings picture: 0 for the whole picture, about 0.5 for static. It slows the\n// steps and holds the frames where something can be seen.\nfunction survey(t) {\n  let perm = new Int32Array(N), mid = new Int32Array(N), nxt = new Int32Array(N);\n  for (let i = 0; i \u003c N; i++) perm[i] = i;\n  const g = REG[0], out = [0];\n  for (let n = 1; n \u003c= 200; n++) {\n    shearRows(t, perm, mid);\n    shearCols(t, mid, nxt);\n    [perm, nxt] = [nxt, perm];\n    let d = 0, id = true;\n    for (let p = 0; p \u003c N; p++) {\n      const v = g[perm[p]] & 1;\n      if ((p & 63) \u003c 63) d += v !== (g[perm[p + 1]] & 1) ? 1 : 0;\n      if (p \u003c N - W) d += v !== (g[perm[p + W]] & 1) ? 1 : 0;\n      if (perm[p] !== p) id = false;\n    }\n    if (id) break;\n    out.push(d / (2 * N));\n  }\n  // out has one entry per state 0..P-1.\n  return out.map((v) => 1 - cl((v - 0.1) / 0.3, 0, 1));\n}\nconst SURVEY = [null, null, null, null, null];\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N);\n  params.s = {\n    perm: I(), mid: I(), nxt: I(), twist: 0, P: 64, st: null, n: 0, mode: 0, t: 0, first: true,\n    hue: -1, pic: -1, pal: new Float32Array(9), src: new Float32Array(N * 3), sh1: new Int32Array(H), sh2: new Int32Array(W), sp: 2,\n  };\n}\n\nfunction reset(S) {\n  for (let i = 0; i \u003c N; i++) S.perm[i] = i;\n  S.n = 0;\n  S.mode = 0;\n  S.t = 0;\n}\n\n// Seconds for the step out of state n, and for the hold at state n.\nfunction stepTime(S, n) {\n  const st = S.st, P = S.P, base = 1.2 / S.sp;\n  const s = max(st[n], st[(n + 1) % P]);\n  return base * (0.45 + 1.6 * s) * (1 + 1.5 * Math.exp(-(P - 1 - n) / 1.5));\n}\nfunction holdTime(S, n) {\n  const base = 1.2 / S.sp, s = S.st[n];\n  if (n === 0) return base * (S.first ? 2.3 : 4);\n  // The stretched stripes after one step and the ghost halfway hold for\n  // about half a second at Speed 2; frames of static do not hold at all.\n  return base * 3 * s * sqrt(s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.sp = cl(k[1], 0.2, 3);\n  S.hueK = k[0] || 0;\n  S.picK = cl(round(k[3]), 0, 3);\n  const tw = cl(round(k[2]), 1, 4);\n  if (tw !== S.twist) {\n    // A new twist is a new map: the picture comes back whole and starts over.\n    S.twist = tw;\n    S.st = SURVEY[tw] || (SURVEY[tw] = survey(tw));\n    S.P = S.st.length;\n    for (let y = 0; y \u003c H; y++) S.sh1[y] = tw * (y - 64);\n    for (let x = 0; x \u003c W; x++) S.sh2[x] = mod(2 * tw * x + 64, H) - 64;\n    reset(S);\n  }\n  const b = input.btnPressed || [];\n  if (b[0]) {\n    // Four steps short of the return, by running the map from the picture.\n    reset(S);\n    for (let n = 0; n \u003c S.P - 4; n++) {\n      shearRows(tw, S.perm, S.mid);\n      shearCols(tw, S.mid, S.perm);\n    }\n    S.n = S.P - 4;\n    S.first = false;\n  }\n  S.t += d;\n  if (S.mode === 0) {\n    if (S.t >= holdTime(S, S.n)) {\n      S.t = 0;\n      S.mode = 1;\n      shearRows(tw, S.perm, S.mid);\n    }\n  } else if (S.t >= stepTime(S, S.n)) {\n    shearCols(tw, S.mid, S.nxt);\n    [S.perm, S.nxt] = [S.nxt, S.perm];\n    S.n = (S.n + 1) % S.P;\n    if (S.n === 0) {\n      reset(S);\n      S.first = false;\n    }\n    S.t = 0;\n    S.mode = 0;\n  }\n}\n\n// Three colours: two strong ones half a turn apart and a light cream, the\n// strong pair kept close in brightness so the static stays soft.\nfunction paint(S) {\n  const h = S.hueK + 0.5, pal = S.pal;\n  hsv(h, 0.66, 1, pal, 0);\n  // A dark orange or yellow reads brown or olive, so the second colour\n  // lifts its light where its hue passes through them.\n  let h2 = h + 0.4;\n  h2 -= floor(h2);\n  hsv(h2, 0.6, 0.72 + 0.26 * max(0, 1 - abs(h2 - 0.13) / 0.11), pal, 3);\n  hsv(h + 0.62, 0.2, 1, pal, 6);\n  const g = REG[S.picK], src = S.src;\n  for (let p = 0; p \u003c N; p++) {\n    const c = g[p] * 3;\n    src[p * 3] = pal[c];\n    src[p * 3 + 1] = pal[c + 1];\n    src[p * 3 + 2] = pal[c + 2];\n  }\n  S.hue = S.hueK;\n  S.pic = S.picK;\n}\n\nconst ease = (u) => u * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.st) return;\n  if (S.hue !== S.hueK || S.pic !== S.picK) paint(S);\n  const src = S.src;\n  if (S.mode === 0) {\n    const perm = S.perm;\n    for (let y = 0, p = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, p++) {\n        const o = perm[p] * 3;\n        display.setPixel(x, y, src[o], src[o + 1], src[o + 2]);\n      }\n    return;\n  }\n  const u = S.t / stepTime(S, S.n);\n  if (u \u003c 0.5) {\n    // The rows slide: row y by a (y - 64), pivoting on the middle row, so the\n    // picture leans; each LED reads between the two it lies between.\n    const s = ease(u * 2), perm = S.perm;\n    for (let y = 0; y \u003c H; y++) {\n      const sh = s * S.sh1[y], o = y * W;\n      for (let x = 0; x \u003c W; x++) {\n        const pos = x - sh, i0 = floor(pos), f = pos - i0;\n        const A = perm[o + (i0 & 63)] * 3, B = perm[o + ((i0 + 1) & 63)] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  } else {\n    // The columns slide: column x by 2b x, wrapped to the nearer way round.\n    const s = ease(u * 2 - 1), mid = S.mid;\n    for (let x = 0; x \u003c W; x++) {\n      const sh = s * S.sh2[x];\n      for (let y = 0; y \u003c H; y++) {\n        const pos = y - sh, i0 = floor(pos), f = pos - i0;\n        const A = mid[(i0 & 127) * W + x] * 3, B = mid[((i0 + 1) & 127) * W + x] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-cat-map","type":"code","name":"cat-map","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cat Map\n// Family:  noise\n// Idea:    The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold's cat map (Vladimir Arnold, 1967), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3\n//\n// Knob 1: Hue. Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc.\n// Knob 2: Speed. At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long.\n// Knob 3: Twist. The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps.\n// Knob 4: Picture. The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays.\n// Buttons: K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, abs, sqrt, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mod = (v, m) => ((v % m) + m) % m;\n\n// One full step of the map on a permutation: perm[p] is the source LED whose\n// colour now sits at p. The first shear moves what sits at (x, y) to\n// (x + a y, y), the second moves (x, y) to (x, y + 2b x), so together\n// (x, y) -> (x + a y, 2b x + (1 + 2ab) y), determinant 1, exact on Z64 x Z128.\nfunction shearRows(a, from, to) {\n  for (let y = 0; y \u003c H; y++) {\n    const s = mod(a * y, W), o = y * W;\n    for (let x = 0; x \u003c W; x++) to[o + x] = from[o + ((x - s + W) & 63)];\n  }\n}\nfunction shearCols(b, from, to) {\n  for (let x = 0; x \u003c W; x++) {\n    const s = mod(2 * b * x, H);\n    for (let y = 0; y \u003c H; y++) to[y * W + x] = from[((y - s + H) & 127) * W + x];\n  }\n}\n\n// The four pictures as region numbers: 0 and 1 are the two main colours, 2\n// the light one. Each fills the whole panel.\nconst REG = [];\n{\n  for (let k = 0; k \u003c 4; k++) REG.push(new Uint8Array(N));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = x - 31.5, dy = y - 63.5, r = sqrt(dx * dx + dy * dy);\n      // Rings 7 LEDs wide round a disc, and a band corner to corner where\n      // the two ring colours trade places.\n      let g = r \u003c 9 ? 2 : floor((r - 9) / 7) & 1;\n      if (g \u003c 2 && abs(2 * dx + dy) / sqrt(5) \u003c 6) g = 1 - g;\n      REG[0][p] = g;\n      // Nested diamonds, 8 LEDs a band down the long axis, a light core.\n      const dd = abs(dx) + abs(dy) / 2;\n      REG[1][p] = dd \u003c 7 ? 2 : floor((dd - 7) / 6) & 1;\n      // Four quarters round a disc that swaps them, with a light rim.\n      const q = (dx \u003c 0) !== (dy \u003c 0) ? 1 : 0;\n      REG[2][p] = r \u003c 21 ? 1 - q : r \u003c 25 ? 2 : q;\n      // Twelve rays round a light disc and a light ring.\n      const ray = floor(((atan2(dy, dx) + PI) / (2 * PI)) * 12) & 1;\n      REG[3][p] = r \u003c 8 || (r > 30 && r \u003c 34) ? 2 : ray;\n    }\n}\n\n// How much of the picture survives after n steps of each twist, from the\n// rings picture: 0 for the whole picture, about 0.5 for static. It slows the\n// steps and holds the frames where something can be seen.\nfunction survey(t) {\n  let perm = new Int32Array(N), mid = new Int32Array(N), nxt = new Int32Array(N);\n  for (let i = 0; i \u003c N; i++) perm[i] = i;\n  const g = REG[0], out = [0];\n  for (let n = 1; n \u003c= 200; n++) {\n    shearRows(t, perm, mid);\n    shearCols(t, mid, nxt);\n    [perm, nxt] = [nxt, perm];\n    let d = 0, id = true;\n    for (let p = 0; p \u003c N; p++) {\n      const v = g[perm[p]] & 1;\n      if ((p & 63) \u003c 63) d += v !== (g[perm[p + 1]] & 1) ? 1 : 0;\n      if (p \u003c N - W) d += v !== (g[perm[p + W]] & 1) ? 1 : 0;\n      if (perm[p] !== p) id = false;\n    }\n    if (id) break;\n    out.push(d / (2 * N));\n  }\n  // out has one entry per state 0..P-1.\n  return out.map((v) => 1 - cl((v - 0.1) / 0.3, 0, 1));\n}\nconst SURVEY = [null, null, null, null, null];\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N);\n  params.s = {\n    perm: I(), mid: I(), nxt: I(), twist: 0, P: 64, st: null, n: 0, mode: 0, t: 0, first: true,\n    hue: -1, pic: -1, pal: new Float32Array(9), src: new Float32Array(N * 3), sh1: new Int32Array(H), sh2: new Int32Array(W), sp: 2,\n  };\n}\n\nfunction reset(S) {\n  for (let i = 0; i \u003c N; i++) S.perm[i] = i;\n  S.n = 0;\n  S.mode = 0;\n  S.t = 0;\n}\n\n// Seconds for the step out of state n, and for the hold at state n.\nfunction stepTime(S, n) {\n  const st = S.st, P = S.P, base = 1.2 / S.sp;\n  const s = max(st[n], st[(n + 1) % P]);\n  return base * (0.45 + 1.6 * s) * (1 + 1.5 * Math.exp(-(P - 1 - n) / 1.5));\n}\nfunction holdTime(S, n) {\n  const base = 1.2 / S.sp, s = S.st[n];\n  if (n === 0) return base * (S.first ? 2.3 : 4);\n  // The stretched stripes after one step and the ghost halfway hold for\n  // about half a second at Speed 2; frames of static do not hold at all.\n  return base * 3 * s * sqrt(s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.sp = cl(k[1], 0.2, 3);\n  S.hueK = k[0] || 0;\n  S.picK = cl(round(k[3]), 0, 3);\n  const tw = cl(round(k[2]), 1, 4);\n  if (tw !== S.twist) {\n    // A new twist is a new map: the picture comes back whole and starts over.\n    S.twist = tw;\n    S.st = SURVEY[tw] || (SURVEY[tw] = survey(tw));\n    S.P = S.st.length;\n    for (let y = 0; y \u003c H; y++) S.sh1[y] = tw * (y - 64);\n    for (let x = 0; x \u003c W; x++) S.sh2[x] = mod(2 * tw * x + 64, H) - 64;\n    reset(S);\n  }\n  const b = input.btnPressed || [];\n  if (b[0]) {\n    // Four steps short of the return, by running the map from the picture.\n    reset(S);\n    for (let n = 0; n \u003c S.P - 4; n++) {\n      shearRows(tw, S.perm, S.mid);\n      shearCols(tw, S.mid, S.perm);\n    }\n    S.n = S.P - 4;\n    S.first = false;\n  }\n  S.t += d;\n  if (S.mode === 0) {\n    if (S.t >= holdTime(S, S.n)) {\n      S.t = 0;\n      S.mode = 1;\n      shearRows(tw, S.perm, S.mid);\n    }\n  } else if (S.t >= stepTime(S, S.n)) {\n    shearCols(tw, S.mid, S.nxt);\n    [S.perm, S.nxt] = [S.nxt, S.perm];\n    S.n = (S.n + 1) % S.P;\n    if (S.n === 0) {\n      reset(S);\n      S.first = false;\n    }\n    S.t = 0;\n    S.mode = 0;\n  }\n}\n\n// Three colours: two strong ones half a turn apart and a light cream, the\n// strong pair kept close in brightness so the static stays soft.\nfunction paint(S) {\n  const h = S.hueK + 0.5, pal = S.pal;\n  hsv(h, 0.66, 1, pal, 0);\n  // A dark orange or yellow reads brown or olive, so the second colour\n  // lifts its light where its hue passes through them.\n  let h2 = h + 0.4;\n  h2 -= floor(h2);\n  hsv(h2, 0.6, 0.72 + 0.26 * max(0, 1 - abs(h2 - 0.13) / 0.11), pal, 3);\n  hsv(h + 0.62, 0.2, 1, pal, 6);\n  const g = REG[S.picK], src = S.src;\n  for (let p = 0; p \u003c N; p++) {\n    const c = g[p] * 3;\n    src[p * 3] = pal[c];\n    src[p * 3 + 1] = pal[c + 1];\n    src[p * 3 + 2] = pal[c + 2];\n  }\n  S.hue = S.hueK;\n  S.pic = S.picK;\n}\n\nconst ease = (u) => u * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.st) return;\n  if (S.hue !== S.hueK || S.pic !== S.picK) paint(S);\n  const src = S.src;\n  if (S.mode === 0) {\n    const perm = S.perm;\n    for (let y = 0, p = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, p++) {\n        const o = perm[p] * 3;\n        display.setPixel(x, y, src[o], src[o + 1], src[o + 2]);\n      }\n    return;\n  }\n  const u = S.t / stepTime(S, S.n);\n  if (u \u003c 0.5) {\n    // The rows slide: row y by a (y - 64), pivoting on the middle row, so the\n    // picture leans; each LED reads between the two it lies between.\n    const s = ease(u * 2), perm = S.perm;\n    for (let y = 0; y \u003c H; y++) {\n      const sh = s * S.sh1[y], o = y * W;\n      for (let x = 0; x \u003c W; x++) {\n        const pos = x - sh, i0 = floor(pos), f = pos - i0;\n        const A = perm[o + (i0 & 63)] * 3, B = perm[o + ((i0 + 1) & 63)] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  } else {\n    // The columns slide: column x by 2b x, wrapped to the nearer way round.\n    const s = ease(u * 2 - 1), mid = S.mid;\n    for (let x = 0; x \u003c W; x++) {\n      const sh = s * S.sh2[x];\n      for (let y = 0; y \u003c H; y++) {\n        const pos = y - sh, i0 = floor(pos), f = pos - i0;\n        const A = mid[(i0 & 127) * W + x] * 3, B = mid[((i0 + 1) & 127) * W + x] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long."},{"name":"Twist","min":1,"max":4,"about":"The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps."},{"name":"Picture","min":0,"max":3,"about":"The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays."}],"start":[0,2,1,0.06],"measures":{"motion":2.7145,"detail":0.107,"edges":0.6749,"complexity":0.5255,"coverage":1,"colour":0.5686,"drift":0.058},"knobResponse":[0.4614,0.2648,0.264,0.2979]},{"slug":"catastrophe-machine","title":"Catastrophe Machine","family":"physics","round":36,"note":"원판 테두리의 한 점에 고무줄 둘을 묶어 하나는 위의 고정점에, 하나는 아래를 좌우로 오가는 점 B 에 걸었어요. B 가 뾰족점 넷인 마름모, 곧 원판이 설 자리가 둘인 곳을 빠져나가는 순간 원판이 120도쯤 반대로 튀어서, B 의 자취가 가는 길과 오는 길에서 다른 색으로 남아요. K3 은 고무줄의 자연 길이를 줄여 마름모를 작게 하다가 1 에서 없애고, K1 을 누르면 B 가 축 건너편으로 건너뛰어요.","idea":"Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.","buttons":"K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.","code":"// ===== Patternflow pattern =====\n// Title:   Catastrophe Machine\n// Family:  physics\n// Idea:    Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Zeeman's catastrophe machine (Christopher Zeeman, 1972), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1\n//\n// Knob 1: Hue. Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown.\n// Knob 2: Speed. At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Tension. The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B.\n// Knob 4: Depth. The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all.\n// Buttons: K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.\n\nconst W = 64, H = 128, N = W * H;\n// The machine in disc radii: pivot O at the origin, anchor A at (0, AD),\n// bands of rest length L. On the panel one radius is SC LEDs, O sits at row\n// OY, and the anchor 5 rows from the top.\nconst AD = 2.5, L0 = 1, SC = 18.6, OX = 32, OY = 5 + SC * AD, NF = 360, NT = 180, TRAIL = 180, SNAPS = 24;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst toX = (x) => OX + SC * x, toY = (y) => OY - SC * y;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The energy V(t) = (|P-A| - L)+^2 / 2 + (|P-B| - L)+^2 / 2, P = (cos t, sin t),\n// a band pulling only while it is stretched, and its derivative in t: each\n// band adds its tension times the component of its direction along the rim.\nfunction energy(t, L, bx, by) {\n  const px = cos(t), py = sin(t);\n  const ea = max(0, sqrt(px * px + (py - AD) * (py - AD)) - L), eb = max(0, sqrt((px - bx) ** 2 + (py - by) ** 2) - L);\n  return 0.5 * (ea * ea + eb * eb);\n}\nfunction torque(t, L, bx, by) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), ux = px - bx, uy = py - by, db = sqrt(ux * ux + uy * uy);\n  return (max(0, da - L) * (ax * tx + ay * ty)) / da + (max(0, db - L) * (ux * tx + uy * ty)) / (db || 1e-9);\n}\n\n// The bifurcation set. At a fold the disc angle t is an equilibrium (V' = 0)\n// that is about to stop being a minimum (V'' = 0). For each t the band to B\n// leaves P along some direction u; V' = 0 fixes how far B must be, and the\n// direction is found where V'' changes sign. One point per t, so the 360\n// points run round the diamond in order, through its four cusps.\nfunction foldAt(t, L, be) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), uax = ax / da, uay = ay / da;\n  const ca = uax * tx + uay * ty, sa = uax * px + uay * py, ea = max(0, da - L);\n  const M = ea * ca, K = (da > L ? ca * ca : 0) + ea * ((1 - ca * ca) / da - sa);\n  const ux = cos(be), uy = sin(be), c = ux * tx + uy * ty, s = ux * px + uy * py;\n  if (abs(c) \u003c 1e-9) return null;\n  const e = -M / c;\n  if (e \u003c= 0) return null;\n  const d = L + e;\n  return [K + c * c + e * ((1 - c * c) / d - s), px - d * ux, py - d * uy, d];\n}\nfunction fold(S, L) {\n  S.L = L;\n  S.nf = 0;\n  if (L \u003c 0.02) return;\n  let guess = -1;\n  for (let i = 0; i \u003c NF; i++) {\n    const t = (2 * PI * i) / NF;\n    let found = null;\n    // Look near the last direction first, then all the way round.\n    const tries = guess \u003c 0 ? [[0, 2 * PI, 1440]] : [[guess - 0.25, guess + 0.25, 50], [0, 2 * PI, 1440]];\n    for (const [b0, b1, k] of tries) {\n      let prev = foldAt(t, L, b0), pb = b0;\n      for (let j = 1; j \u003c= k && !found; j++) {\n        const be = b0 + ((b1 - b0) * j) / k, cur = foldAt(t, L, be);\n        if (prev && cur && prev[0] * cur[0] \u003c= 0 && abs(cur[3] - prev[3]) \u003c 0.3 && cur[3] \u003c 8) {\n          let lo = pb, hi = be, flo = prev[0];\n          for (let q = 0; q \u003c 40; q++) {\n            const mid = (lo + hi) / 2, m = foldAt(t, L, mid);\n            if (!m) break;\n            if (m[0] * flo > 0) (lo = mid), (flo = m[0]);\n            else hi = mid;\n          }\n          found = foldAt(t, L, (lo + hi) / 2);\n          guess = (lo + hi) / 2;\n        }\n        prev = cur;\n        pb = be;\n      }\n      if (found) break;\n    }\n    if (found) {\n      S.FX[S.nf] = found[1];\n      S.FY[S.nf] = found[2];\n      S.nf++;\n    }\n  }\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c S.nf; i++) {\n    x0 = min(x0, S.FX[i]);\n    x1 = max(x1, S.FX[i]);\n    y0 = min(y0, S.FY[i]);\n    y1 = max(y1, S.FY[i]);\n  }\n  S.fx0 = x0;\n  S.fx1 = x1;\n  S.fy0 = y0;\n  S.fy1 = y1;\n  // The side cusps are the leftmost and rightmost points.\n  let iL = 0;\n  for (let i = 0; i \u003c S.nf; i++) if (S.FX[i] \u003c S.FX[iL]) iL = i;\n  S.ySide = S.nf ? S.FY[iL] : -2.5;\n}\n\n// Local minima of V over the rim, from 180 samples, each polished by a few\n// steps of descent. Returns how many; their angles land in S.mins.\nfunction minima(S, bx, by) {\n  const L = S.L, E = S.E;\n  for (let i = 0; i \u003c NT; i++) E[i] = energy((2 * PI * i) / NT, L, bx, by);\n  let n = 0;\n  for (let i = 0; i \u003c NT && n \u003c 4; i++) {\n    const a = E[(i + NT - 1) % NT], b = E[(i + 1) % NT];\n    if (E[i] \u003c a && E[i] \u003c= b) {\n      let t = (2 * PI * i) / NT;\n      for (let k = 0; k \u003c 30; k++) t -= 0.5 * torque(t, L, bx, by);\n      S.mins[n++] = t;\n    }\n  }\n  return n;\n}\n\n// Follow the local minimum the disc sits in: the nearest place within half a\n// radian where V' turns from negative to positive, refined by bisection.\n// When there is none, that minimum has gone, which is the snap.\nfunction track(S, t) {\n  const L = S.L, bx = S.bx, by = S.by;\n  let best = NaN, bd = 1e9, prev = torque(t - 0.5, L, bx, by);\n  for (let i = 1; i \u003c= 96; i++) {\n    const a = t - 0.5 + i / 96, cur = torque(a, L, bx, by);\n    if (prev \u003c 0 && cur >= 0) {\n      let lo = a - 1 / 96, hi = a;\n      for (let q = 0; q \u003c 30; q++) {\n        const m = (lo + hi) / 2;\n        if (torque(m, L, bx, by) \u003c 0) lo = m;\n        else hi = m;\n      }\n      const r = (lo + hi) / 2;\n      if (abs(r - t) \u003c bd) (bd = abs(r - t)), (best = r);\n    }\n    prev = cur;\n  }\n  return best;\n}\n\nfunction setup(params) {\n  params.s = {\n    t: 0, w: 0, L: -1, nf: 0, FX: new Float64Array(NF), FY: new Float64Array(NF), fx0: 0, fx1: 0, fy0: 0, fy1: 0, ySide: -2.4,\n    E: new Float64Array(NT), mins: new Float64Array(4), nm: 1, ghost: 0, ghostA: 0,\n    ph: -PI / 2, wph: 0, bx: -1.35, by: -2.4, depth: 0.06, hue: 0, speed: 2,\n    TX: new Float32Array(TRAIL), TY: new Float32Array(TRAIL), TB: new Float32Array(TRAIL), tn: 0, th: 0, tacc: 0,\n    SX: new Float32Array(SNAPS), SY: new Float32Array(SNAPS), SA: new Float32Array(SNAPS).fill(99), sh: 0,\n    tm: 0, flash: 0, fbx: 0, fby: 0, warm: false,\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N), cov: new Float32Array(N),\n    xs: new Float32Array(4 * H * 16), xn: new Int32Array(4 * H), col: new Float32Array(24),\n  };\n}\n\n// B's path: across the panel and back, 1.35 radii either side of the axis,\n// at the height Depth picks between the side cusps and the bottom cusp,\n// wandering up and down a quarter of that height. From Depth 0.8 on it\n// never enters the diamond.\nfunction place(S) {\n  const ys = S.nf ? S.ySide : -2.5, yb = S.nf ? S.fy0 : -2.6;\n  S.bx = 1.35 * sin(S.ph);\n  S.by = ys + (0.3 + 1.2 * S.depth + 0.25 * sin(S.wph)) * (yb - ys);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.depth = cl(k[3], 0, 1);\n  const L = L0 * (1 - cl(k[2], 0, 1));\n  if (abs(L - S.L) > 0.002) fold(S, L);\n  const beat = (d * S.speed) / 2;\n  const jump = !!(input.btnPressed && input.btnPressed[0]);\n  if (jump) S.ph = -S.ph;\n  // A crossing of the panel every 4 beats; the wander is slower.\n  S.ph += (beat * PI) / 4;\n  S.wph += beat * 0.53;\n  place(S);\n  S.nm = minima(S, S.bx, S.by);\n  if (!S.warm) {\n    // Start in the deepest minimum.\n    let best = 0;\n    for (let i = 1; i \u003c S.nm; i++) if (energy(S.mins[i], S.L, S.bx, S.by) \u003c energy(S.mins[best], S.L, S.bx, S.by)) best = i;\n    S.t = S.tm = S.mins[best];\n    S.warm = true;\n  }\n  // The snap: the minimum the disc was in is gone. B is then at most one\n  // frame's travel past the edge of the diamond, and the mark goes there,\n  // unless K1 threw B across.\n  const tm = track(S, S.tm);\n  if (tm === tm) S.tm = tm;\n  else {\n    let far = 0, fd = -1;\n    for (let i = 0; i \u003c S.nm; i++) {\n      const dd = abs(atan2(sin(S.mins[i] - S.tm), cos(S.mins[i] - S.tm)));\n      if (dd > fd) (fd = dd), (far = i);\n    }\n    S.tm = S.mins[far];\n    S.flash = 1;\n    S.fbx = S.bx;\n    S.fby = S.by;\n    if (!jump) {\n      S.SX[S.sh] = S.bx;\n      S.SY[S.sh] = S.by;\n      S.SA[S.sh] = 0;\n      S.sh = (S.sh + 1) % SNAPS;\n    }\n  }\n  // Overdamped: the disc turns at 30 times the torque per beat, in eight\n  // small steps a frame.\n  const h = beat / 8, t0 = S.t;\n  for (let i = 0; i \u003c 8; i++) S.t -= 30 * h * torque(S.t, S.L, S.bx, S.by);\n  S.w = beat > 0 ? abs(S.t - t0) / beat : S.w;\n  S.flash = max(0, S.flash - beat / 0.5);\n  for (let i = 0; i \u003c SNAPS; i++) S.SA[i] += beat;\n  // The other minimum, when there is one, shows as a ghost on the rim.\n  let gi = -1, gd = 0;\n  for (let i = 0; i \u003c S.nm; i++) {\n    const dd = abs(atan2(sin(S.mins[i] - S.t), cos(S.mins[i] - S.t)));\n    if (dd > 0.3 && dd > gd) (gd = dd), (gi = i);\n  }\n  if (gi >= 0) S.ghost = S.mins[gi];\n  S.ghostA += ((gi >= 0 ? 1 : 0) - S.ghostA) * min(1, beat * 8);\n  // The trail: 15 samples a beat, 12 beats long, each with the side of the\n  // disc P was on.\n  S.tacc += beat * 15;\n  while (S.tacc >= 1) {\n    S.tacc -= 1;\n    S.TX[S.th] = S.bx;\n    S.TY[S.th] = S.by;\n    S.TB[S.th] = cos(S.t);\n    S.th = (S.th + 1) % TRAIL;\n    S.tn = min(TRAIL, S.tn + 1);\n  }\n}\n\n// ---- Drawing ----\n\nfunction plot(S, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  S.R[p] = max(S.R[p], r);\n  S.G[p] = max(S.G[p], g);\n  S.B[p] = max(S.B[p], b);\n}\n\n// A line in panel coordinates, about 1.4 LEDs wide, kept at the brighter.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, v = cl((wide - sqrt(qx * qx + qy * qy)) / 0.55, 0, 1);\n      if (v > 0) plot(S, x, y, cr * v, cg * v, cb * v);\n    }\n}\n\nfunction disc(S, cx, cy, r, cr, cg, cb, add) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c= min(H - 1, floor(cy + r + 1)); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c= min(W - 1, floor(cx + r + 1)); x++) {\n      const v = cl(r + 0.5 - sqrt((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2), 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      if (add) (S.R[p] += cr * v), (S.G[p] += cg * v), (S.B[p] += cb * v);\n      else (S.R[p] = S.R[p] * (1 - v) + cr * v), (S.G[p] = S.G[p] * (1 - v) + cg * v), (S.B[p] = S.B[p] * (1 - v) + cb * v);\n    }\n}\n\n// Coverage of the inside of the diamond: four scanlines a row.\nfunction fill(S) {\n  const { xs, xn, cov, FX, FY } = S, n = S.nf, SUB = 4, CAP = 16;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = (i + 1) % n;\n    let x0 = toX(FX[i]), y0 = toY(FY[i]), x1 = toX(FX[j]), y1 = toY(FY[j]);\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const c = xn[s];\n      if (c \u003c CAP) (xs[s * CAP + c] = x0 + (((s + 0.5) / SUB - y0) * (x1 - x0)) / (y1 - y0)), (xn[s] = c + 1);\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h = S.hue + 0.78, fl = S.flash;\n  // Round yellow the diamond's shading would go olive, so there it is paler\n  // and brighter.\n  const hh = h - floor(h), warm = sm(1 - abs(hh - 0.16) / 0.12);\n  hsv(h, 0.75 - 0.5 * warm, 1, col, 0); // accent: the diamond and the anchor\n  hsv(h + 0.35, 0.85, 1, col, 3); // the trail while P is on the left\n  hsv(h + 0.72, 0.8, 1, col, 6); // the trail while P is on the right\n  const hd = h + 0.8 - floor(h + 0.8), warmD = sm(1 - abs(hd - 0.12) / 0.13);\n  hsv(h + 0.8, 0.6 - 0.3 * warmD, 1 + 0.6 * warmD, col, 9); // the disc, never brown\n  const shade = 66 + 74 * warm;\n  // The bistable region, softly lit, and its cusped edge.\n  if (S.nf > 2) {\n    fill(S);\n    for (let p = 0; p \u003c N; p++) {\n      const c = min(1, cov[p]) * shade;\n      if (c > 0) (R[p] += col[0] * c), (G[p] += col[1] * c), (B[p] += col[2] * c);\n    }\n  }\n  // The trail, oldest first, in the colour of P's side.\n  for (let k = S.tn - 1; k >= 2; k--) {\n    const i = (S.th - k + TRAIL) % TRAIL, j = (i + 1) % TRAIL, age = k / TRAIL;\n    const u = (1 + cl(S.TB[i] * 2, -1, 1)) / 2, v = 230 * (1 - age) * (1 - age) + 25;\n    line(S, toX(S.TX[i]), toY(S.TY[i]), toX(S.TX[j]), toY(S.TY[j]), v * (col[3] * (1 - u) + col[6] * u), v * (col[4] * (1 - u) + col[7] * u), v * (col[5] * (1 - u) + col[8] * u), 0.75);\n  }\n  if (S.nf > 2) {\n    const e = 200 + 55 * fl;\n    for (let i = 0; i \u003c S.nf; i++) {\n      const j = (i + 1) % S.nf;\n      line(S, toX(S.FX[i]), toY(S.FY[i]), toX(S.FX[j]), toY(S.FY[j]), col[0] * e, col[1] * e, col[2] * e, 0.7);\n    }\n  }\n  // Where the snaps happened: white marks that fade over 25 beats.\n  for (let i = 0; i \u003c SNAPS; i++) {\n    if (S.SA[i] > 25) continue;\n    const v = 255 * (1 - S.SA[i] / 25);\n    disc(S, toX(S.SX[i]), toY(S.SY[i]), 0.9, v, v, v, false);\n  }\n  // The disc: a face of six soft sectors that turns with it, so a snap shows\n  // as the whole wheel whirling round; a rim that flashes white; the pivot.\n  const ox = toX(0), oy = toY(0), px = cos(S.t), py = sin(S.t), spin = 1 + 1.6 * cl(S.w / 8, 0, 1);\n  for (let y = max(0, floor(oy - SC - 1)); y \u003c= min(H - 1, floor(oy + SC + 1)); y++)\n    for (let x = max(0, floor(ox - SC - 1)); x \u003c= min(W - 1, floor(ox + SC + 1)); x++) {\n      const dx = x + 0.5 - ox, dy = oy - y - 0.5, r = sqrt(dx * dx + dy * dy), e = cl(SC + 0.5 - r, 0, 1);\n      if (e \u003c= 0) continue;\n      const a = atan2(dy, dx) - S.t, v = e * spin * (48 + 30 * cos(6 * a) * cl(r / 4, 0, 1)), p = y * W + x;\n      R[p] = col[9] * v;\n      G[p] = col[10] * v;\n      B[p] = col[11] * v;\n    }\n  for (let i = 0; i \u003c 96; i++) {\n    const a0 = (2 * PI * i) / 96, a1 = (2 * PI * (i + 1)) / 96, e = 120 + 135 * fl;\n    line(S, ox + SC * cos(a0), oy - SC * sin(a0), ox + SC * cos(a1), oy - SC * sin(a1), col[9] * e + 255 * fl * 0.5, col[10] * e + 255 * fl * 0.5, col[11] * e + 255 * fl * 0.5, 0.7);\n  }\n  line(S, ox, oy, toX(px), toY(py), col[9] * 110, col[10] * 110, col[11] * 110, 0.6);\n  disc(S, ox, oy, 1.3, 200, 200, 200, false);\n  // The other stable angle, while B is inside the diamond.\n  if (S.ghostA > 0.02) {\n    const g = 150 * S.ghostA, u = cos(S.ghost) > 0 ? 1 : 0;\n    disc(S, toX(cos(S.ghost)), toY(sin(S.ghost)), 1.4, g * (col[3] * (1 - u) + col[6] * u), g * (col[4] * (1 - u) + col[7] * u), g * (col[5] * (1 - u) + col[8] * u), false);\n  }\n  // The bands, brighter the harder they pull.\n  const ta = max(0, sqrt(px * px + (py - AD) ** 2) - S.L), tb = max(0, sqrt((px - S.bx) ** 2 + (py - S.by) ** 2) - S.L);\n  const va = 70 + 185 * cl(ta / 2.6, 0, 1), vb = 70 + 185 * cl(tb / 2.6, 0, 1) + 60 * fl;\n  line(S, toX(0), toY(AD), toX(px), toY(py), va, va * 0.93, va * 0.82, 0.75);\n  line(S, toX(px), toY(py), toX(S.bx), toY(S.by), vb, vb * 0.93, vb * 0.82, 0.75);\n  // The anchor, P on the rim, and B.\n  disc(S, toX(0), toY(AD), 1.6, col[0] * 255, col[1] * 255, col[2] * 255, false);\n  const u = (1 + cl(px * 2, -1, 1)) / 2;\n  disc(S, toX(px), toY(py), 2.3, 255 * (col[3] * (1 - u) + col[6] * u), 255 * (col[4] * (1 - u) + col[7] * u), 255 * (col[5] * (1 - u) + col[8] * u), false);\n  disc(S, toX(px), toY(py), 1, 255, 255, 255, false);\n  disc(S, toX(S.bx), toY(S.by), 1.5, 255, 255, 255, false);\n  // A ring opening round B at each snap.\n  if (fl > 0) {\n    const r = 2 + 9 * (1 - fl * fl), v = 255 * sm(fl * 1.6);\n    for (let i = 0; i \u003c 40; i++) {\n      const a0 = (2 * PI * i) / 40, a1 = (2 * PI * (i + 1)) / 40;\n      line(S, toX(S.fbx) + r * cos(a0), toY(S.fby) + r * sin(a0), toX(S.fbx) + r * cos(a1), toY(S.fby) + r * sin(a1), v, v, v, 0.95);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-catastrophe-machine","type":"code","name":"catastrophe-machine","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Catastrophe Machine\n// Family:  physics\n// Idea:    Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Zeeman's catastrophe machine (Christopher Zeeman, 1972), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1\n//\n// Knob 1: Hue. Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown.\n// Knob 2: Speed. At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Tension. The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B.\n// Knob 4: Depth. The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all.\n// Buttons: K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.\n\nconst W = 64, H = 128, N = W * H;\n// The machine in disc radii: pivot O at the origin, anchor A at (0, AD),\n// bands of rest length L. On the panel one radius is SC LEDs, O sits at row\n// OY, and the anchor 5 rows from the top.\nconst AD = 2.5, L0 = 1, SC = 18.6, OX = 32, OY = 5 + SC * AD, NF = 360, NT = 180, TRAIL = 180, SNAPS = 24;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst toX = (x) => OX + SC * x, toY = (y) => OY - SC * y;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The energy V(t) = (|P-A| - L)+^2 / 2 + (|P-B| - L)+^2 / 2, P = (cos t, sin t),\n// a band pulling only while it is stretched, and its derivative in t: each\n// band adds its tension times the component of its direction along the rim.\nfunction energy(t, L, bx, by) {\n  const px = cos(t), py = sin(t);\n  const ea = max(0, sqrt(px * px + (py - AD) * (py - AD)) - L), eb = max(0, sqrt((px - bx) ** 2 + (py - by) ** 2) - L);\n  return 0.5 * (ea * ea + eb * eb);\n}\nfunction torque(t, L, bx, by) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), ux = px - bx, uy = py - by, db = sqrt(ux * ux + uy * uy);\n  return (max(0, da - L) * (ax * tx + ay * ty)) / da + (max(0, db - L) * (ux * tx + uy * ty)) / (db || 1e-9);\n}\n\n// The bifurcation set. At a fold the disc angle t is an equilibrium (V' = 0)\n// that is about to stop being a minimum (V'' = 0). For each t the band to B\n// leaves P along some direction u; V' = 0 fixes how far B must be, and the\n// direction is found where V'' changes sign. One point per t, so the 360\n// points run round the diamond in order, through its four cusps.\nfunction foldAt(t, L, be) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), uax = ax / da, uay = ay / da;\n  const ca = uax * tx + uay * ty, sa = uax * px + uay * py, ea = max(0, da - L);\n  const M = ea * ca, K = (da > L ? ca * ca : 0) + ea * ((1 - ca * ca) / da - sa);\n  const ux = cos(be), uy = sin(be), c = ux * tx + uy * ty, s = ux * px + uy * py;\n  if (abs(c) \u003c 1e-9) return null;\n  const e = -M / c;\n  if (e \u003c= 0) return null;\n  const d = L + e;\n  return [K + c * c + e * ((1 - c * c) / d - s), px - d * ux, py - d * uy, d];\n}\nfunction fold(S, L) {\n  S.L = L;\n  S.nf = 0;\n  if (L \u003c 0.02) return;\n  let guess = -1;\n  for (let i = 0; i \u003c NF; i++) {\n    const t = (2 * PI * i) / NF;\n    let found = null;\n    // Look near the last direction first, then all the way round.\n    const tries = guess \u003c 0 ? [[0, 2 * PI, 1440]] : [[guess - 0.25, guess + 0.25, 50], [0, 2 * PI, 1440]];\n    for (const [b0, b1, k] of tries) {\n      let prev = foldAt(t, L, b0), pb = b0;\n      for (let j = 1; j \u003c= k && !found; j++) {\n        const be = b0 + ((b1 - b0) * j) / k, cur = foldAt(t, L, be);\n        if (prev && cur && prev[0] * cur[0] \u003c= 0 && abs(cur[3] - prev[3]) \u003c 0.3 && cur[3] \u003c 8) {\n          let lo = pb, hi = be, flo = prev[0];\n          for (let q = 0; q \u003c 40; q++) {\n            const mid = (lo + hi) / 2, m = foldAt(t, L, mid);\n            if (!m) break;\n            if (m[0] * flo > 0) (lo = mid), (flo = m[0]);\n            else hi = mid;\n          }\n          found = foldAt(t, L, (lo + hi) / 2);\n          guess = (lo + hi) / 2;\n        }\n        prev = cur;\n        pb = be;\n      }\n      if (found) break;\n    }\n    if (found) {\n      S.FX[S.nf] = found[1];\n      S.FY[S.nf] = found[2];\n      S.nf++;\n    }\n  }\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c S.nf; i++) {\n    x0 = min(x0, S.FX[i]);\n    x1 = max(x1, S.FX[i]);\n    y0 = min(y0, S.FY[i]);\n    y1 = max(y1, S.FY[i]);\n  }\n  S.fx0 = x0;\n  S.fx1 = x1;\n  S.fy0 = y0;\n  S.fy1 = y1;\n  // The side cusps are the leftmost and rightmost points.\n  let iL = 0;\n  for (let i = 0; i \u003c S.nf; i++) if (S.FX[i] \u003c S.FX[iL]) iL = i;\n  S.ySide = S.nf ? S.FY[iL] : -2.5;\n}\n\n// Local minima of V over the rim, from 180 samples, each polished by a few\n// steps of descent. Returns how many; their angles land in S.mins.\nfunction minima(S, bx, by) {\n  const L = S.L, E = S.E;\n  for (let i = 0; i \u003c NT; i++) E[i] = energy((2 * PI * i) / NT, L, bx, by);\n  let n = 0;\n  for (let i = 0; i \u003c NT && n \u003c 4; i++) {\n    const a = E[(i + NT - 1) % NT], b = E[(i + 1) % NT];\n    if (E[i] \u003c a && E[i] \u003c= b) {\n      let t = (2 * PI * i) / NT;\n      for (let k = 0; k \u003c 30; k++) t -= 0.5 * torque(t, L, bx, by);\n      S.mins[n++] = t;\n    }\n  }\n  return n;\n}\n\n// Follow the local minimum the disc sits in: the nearest place within half a\n// radian where V' turns from negative to positive, refined by bisection.\n// When there is none, that minimum has gone, which is the snap.\nfunction track(S, t) {\n  const L = S.L, bx = S.bx, by = S.by;\n  let best = NaN, bd = 1e9, prev = torque(t - 0.5, L, bx, by);\n  for (let i = 1; i \u003c= 96; i++) {\n    const a = t - 0.5 + i / 96, cur = torque(a, L, bx, by);\n    if (prev \u003c 0 && cur >= 0) {\n      let lo = a - 1 / 96, hi = a;\n      for (let q = 0; q \u003c 30; q++) {\n        const m = (lo + hi) / 2;\n        if (torque(m, L, bx, by) \u003c 0) lo = m;\n        else hi = m;\n      }\n      const r = (lo + hi) / 2;\n      if (abs(r - t) \u003c bd) (bd = abs(r - t)), (best = r);\n    }\n    prev = cur;\n  }\n  return best;\n}\n\nfunction setup(params) {\n  params.s = {\n    t: 0, w: 0, L: -1, nf: 0, FX: new Float64Array(NF), FY: new Float64Array(NF), fx0: 0, fx1: 0, fy0: 0, fy1: 0, ySide: -2.4,\n    E: new Float64Array(NT), mins: new Float64Array(4), nm: 1, ghost: 0, ghostA: 0,\n    ph: -PI / 2, wph: 0, bx: -1.35, by: -2.4, depth: 0.06, hue: 0, speed: 2,\n    TX: new Float32Array(TRAIL), TY: new Float32Array(TRAIL), TB: new Float32Array(TRAIL), tn: 0, th: 0, tacc: 0,\n    SX: new Float32Array(SNAPS), SY: new Float32Array(SNAPS), SA: new Float32Array(SNAPS).fill(99), sh: 0,\n    tm: 0, flash: 0, fbx: 0, fby: 0, warm: false,\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N), cov: new Float32Array(N),\n    xs: new Float32Array(4 * H * 16), xn: new Int32Array(4 * H), col: new Float32Array(24),\n  };\n}\n\n// B's path: across the panel and back, 1.35 radii either side of the axis,\n// at the height Depth picks between the side cusps and the bottom cusp,\n// wandering up and down a quarter of that height. From Depth 0.8 on it\n// never enters the diamond.\nfunction place(S) {\n  const ys = S.nf ? S.ySide : -2.5, yb = S.nf ? S.fy0 : -2.6;\n  S.bx = 1.35 * sin(S.ph);\n  S.by = ys + (0.3 + 1.2 * S.depth + 0.25 * sin(S.wph)) * (yb - ys);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.depth = cl(k[3], 0, 1);\n  const L = L0 * (1 - cl(k[2], 0, 1));\n  if (abs(L - S.L) > 0.002) fold(S, L);\n  const beat = (d * S.speed) / 2;\n  const jump = !!(input.btnPressed && input.btnPressed[0]);\n  if (jump) S.ph = -S.ph;\n  // A crossing of the panel every 4 beats; the wander is slower.\n  S.ph += (beat * PI) / 4;\n  S.wph += beat * 0.53;\n  place(S);\n  S.nm = minima(S, S.bx, S.by);\n  if (!S.warm) {\n    // Start in the deepest minimum.\n    let best = 0;\n    for (let i = 1; i \u003c S.nm; i++) if (energy(S.mins[i], S.L, S.bx, S.by) \u003c energy(S.mins[best], S.L, S.bx, S.by)) best = i;\n    S.t = S.tm = S.mins[best];\n    S.warm = true;\n  }\n  // The snap: the minimum the disc was in is gone. B is then at most one\n  // frame's travel past the edge of the diamond, and the mark goes there,\n  // unless K1 threw B across.\n  const tm = track(S, S.tm);\n  if (tm === tm) S.tm = tm;\n  else {\n    let far = 0, fd = -1;\n    for (let i = 0; i \u003c S.nm; i++) {\n      const dd = abs(atan2(sin(S.mins[i] - S.tm), cos(S.mins[i] - S.tm)));\n      if (dd > fd) (fd = dd), (far = i);\n    }\n    S.tm = S.mins[far];\n    S.flash = 1;\n    S.fbx = S.bx;\n    S.fby = S.by;\n    if (!jump) {\n      S.SX[S.sh] = S.bx;\n      S.SY[S.sh] = S.by;\n      S.SA[S.sh] = 0;\n      S.sh = (S.sh + 1) % SNAPS;\n    }\n  }\n  // Overdamped: the disc turns at 30 times the torque per beat, in eight\n  // small steps a frame.\n  const h = beat / 8, t0 = S.t;\n  for (let i = 0; i \u003c 8; i++) S.t -= 30 * h * torque(S.t, S.L, S.bx, S.by);\n  S.w = beat > 0 ? abs(S.t - t0) / beat : S.w;\n  S.flash = max(0, S.flash - beat / 0.5);\n  for (let i = 0; i \u003c SNAPS; i++) S.SA[i] += beat;\n  // The other minimum, when there is one, shows as a ghost on the rim.\n  let gi = -1, gd = 0;\n  for (let i = 0; i \u003c S.nm; i++) {\n    const dd = abs(atan2(sin(S.mins[i] - S.t), cos(S.mins[i] - S.t)));\n    if (dd > 0.3 && dd > gd) (gd = dd), (gi = i);\n  }\n  if (gi >= 0) S.ghost = S.mins[gi];\n  S.ghostA += ((gi >= 0 ? 1 : 0) - S.ghostA) * min(1, beat * 8);\n  // The trail: 15 samples a beat, 12 beats long, each with the side of the\n  // disc P was on.\n  S.tacc += beat * 15;\n  while (S.tacc >= 1) {\n    S.tacc -= 1;\n    S.TX[S.th] = S.bx;\n    S.TY[S.th] = S.by;\n    S.TB[S.th] = cos(S.t);\n    S.th = (S.th + 1) % TRAIL;\n    S.tn = min(TRAIL, S.tn + 1);\n  }\n}\n\n// ---- Drawing ----\n\nfunction plot(S, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  S.R[p] = max(S.R[p], r);\n  S.G[p] = max(S.G[p], g);\n  S.B[p] = max(S.B[p], b);\n}\n\n// A line in panel coordinates, about 1.4 LEDs wide, kept at the brighter.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, v = cl((wide - sqrt(qx * qx + qy * qy)) / 0.55, 0, 1);\n      if (v > 0) plot(S, x, y, cr * v, cg * v, cb * v);\n    }\n}\n\nfunction disc(S, cx, cy, r, cr, cg, cb, add) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c= min(H - 1, floor(cy + r + 1)); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c= min(W - 1, floor(cx + r + 1)); x++) {\n      const v = cl(r + 0.5 - sqrt((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2), 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      if (add) (S.R[p] += cr * v), (S.G[p] += cg * v), (S.B[p] += cb * v);\n      else (S.R[p] = S.R[p] * (1 - v) + cr * v), (S.G[p] = S.G[p] * (1 - v) + cg * v), (S.B[p] = S.B[p] * (1 - v) + cb * v);\n    }\n}\n\n// Coverage of the inside of the diamond: four scanlines a row.\nfunction fill(S) {\n  const { xs, xn, cov, FX, FY } = S, n = S.nf, SUB = 4, CAP = 16;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = (i + 1) % n;\n    let x0 = toX(FX[i]), y0 = toY(FY[i]), x1 = toX(FX[j]), y1 = toY(FY[j]);\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const c = xn[s];\n      if (c \u003c CAP) (xs[s * CAP + c] = x0 + (((s + 0.5) / SUB - y0) * (x1 - x0)) / (y1 - y0)), (xn[s] = c + 1);\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h = S.hue + 0.78, fl = S.flash;\n  // Round yellow the diamond's shading would go olive, so there it is paler\n  // and brighter.\n  const hh = h - floor(h), warm = sm(1 - abs(hh - 0.16) / 0.12);\n  hsv(h, 0.75 - 0.5 * warm, 1, col, 0); // accent: the diamond and the anchor\n  hsv(h + 0.35, 0.85, 1, col, 3); // the trail while P is on the left\n  hsv(h + 0.72, 0.8, 1, col, 6); // the trail while P is on the right\n  const hd = h + 0.8 - floor(h + 0.8), warmD = sm(1 - abs(hd - 0.12) / 0.13);\n  hsv(h + 0.8, 0.6 - 0.3 * warmD, 1 + 0.6 * warmD, col, 9); // the disc, never brown\n  const shade = 66 + 74 * warm;\n  // The bistable region, softly lit, and its cusped edge.\n  if (S.nf > 2) {\n    fill(S);\n    for (let p = 0; p \u003c N; p++) {\n      const c = min(1, cov[p]) * shade;\n      if (c > 0) (R[p] += col[0] * c), (G[p] += col[1] * c), (B[p] += col[2] * c);\n    }\n  }\n  // The trail, oldest first, in the colour of P's side.\n  for (let k = S.tn - 1; k >= 2; k--) {\n    const i = (S.th - k + TRAIL) % TRAIL, j = (i + 1) % TRAIL, age = k / TRAIL;\n    const u = (1 + cl(S.TB[i] * 2, -1, 1)) / 2, v = 230 * (1 - age) * (1 - age) + 25;\n    line(S, toX(S.TX[i]), toY(S.TY[i]), toX(S.TX[j]), toY(S.TY[j]), v * (col[3] * (1 - u) + col[6] * u), v * (col[4] * (1 - u) + col[7] * u), v * (col[5] * (1 - u) + col[8] * u), 0.75);\n  }\n  if (S.nf > 2) {\n    const e = 200 + 55 * fl;\n    for (let i = 0; i \u003c S.nf; i++) {\n      const j = (i + 1) % S.nf;\n      line(S, toX(S.FX[i]), toY(S.FY[i]), toX(S.FX[j]), toY(S.FY[j]), col[0] * e, col[1] * e, col[2] * e, 0.7);\n    }\n  }\n  // Where the snaps happened: white marks that fade over 25 beats.\n  for (let i = 0; i \u003c SNAPS; i++) {\n    if (S.SA[i] > 25) continue;\n    const v = 255 * (1 - S.SA[i] / 25);\n    disc(S, toX(S.SX[i]), toY(S.SY[i]), 0.9, v, v, v, false);\n  }\n  // The disc: a face of six soft sectors that turns with it, so a snap shows\n  // as the whole wheel whirling round; a rim that flashes white; the pivot.\n  const ox = toX(0), oy = toY(0), px = cos(S.t), py = sin(S.t), spin = 1 + 1.6 * cl(S.w / 8, 0, 1);\n  for (let y = max(0, floor(oy - SC - 1)); y \u003c= min(H - 1, floor(oy + SC + 1)); y++)\n    for (let x = max(0, floor(ox - SC - 1)); x \u003c= min(W - 1, floor(ox + SC + 1)); x++) {\n      const dx = x + 0.5 - ox, dy = oy - y - 0.5, r = sqrt(dx * dx + dy * dy), e = cl(SC + 0.5 - r, 0, 1);\n      if (e \u003c= 0) continue;\n      const a = atan2(dy, dx) - S.t, v = e * spin * (48 + 30 * cos(6 * a) * cl(r / 4, 0, 1)), p = y * W + x;\n      R[p] = col[9] * v;\n      G[p] = col[10] * v;\n      B[p] = col[11] * v;\n    }\n  for (let i = 0; i \u003c 96; i++) {\n    const a0 = (2 * PI * i) / 96, a1 = (2 * PI * (i + 1)) / 96, e = 120 + 135 * fl;\n    line(S, ox + SC * cos(a0), oy - SC * sin(a0), ox + SC * cos(a1), oy - SC * sin(a1), col[9] * e + 255 * fl * 0.5, col[10] * e + 255 * fl * 0.5, col[11] * e + 255 * fl * 0.5, 0.7);\n  }\n  line(S, ox, oy, toX(px), toY(py), col[9] * 110, col[10] * 110, col[11] * 110, 0.6);\n  disc(S, ox, oy, 1.3, 200, 200, 200, false);\n  // The other stable angle, while B is inside the diamond.\n  if (S.ghostA > 0.02) {\n    const g = 150 * S.ghostA, u = cos(S.ghost) > 0 ? 1 : 0;\n    disc(S, toX(cos(S.ghost)), toY(sin(S.ghost)), 1.4, g * (col[3] * (1 - u) + col[6] * u), g * (col[4] * (1 - u) + col[7] * u), g * (col[5] * (1 - u) + col[8] * u), false);\n  }\n  // The bands, brighter the harder they pull.\n  const ta = max(0, sqrt(px * px + (py - AD) ** 2) - S.L), tb = max(0, sqrt((px - S.bx) ** 2 + (py - S.by) ** 2) - S.L);\n  const va = 70 + 185 * cl(ta / 2.6, 0, 1), vb = 70 + 185 * cl(tb / 2.6, 0, 1) + 60 * fl;\n  line(S, toX(0), toY(AD), toX(px), toY(py), va, va * 0.93, va * 0.82, 0.75);\n  line(S, toX(px), toY(py), toX(S.bx), toY(S.by), vb, vb * 0.93, vb * 0.82, 0.75);\n  // The anchor, P on the rim, and B.\n  disc(S, toX(0), toY(AD), 1.6, col[0] * 255, col[1] * 255, col[2] * 255, false);\n  const u = (1 + cl(px * 2, -1, 1)) / 2;\n  disc(S, toX(px), toY(py), 2.3, 255 * (col[3] * (1 - u) + col[6] * u), 255 * (col[4] * (1 - u) + col[7] * u), 255 * (col[5] * (1 - u) + col[8] * u), false);\n  disc(S, toX(px), toY(py), 1, 255, 255, 255, false);\n  disc(S, toX(S.bx), toY(S.by), 1.5, 255, 255, 255, false);\n  // A ring opening round B at each snap.\n  if (fl > 0) {\n    const r = 2 + 9 * (1 - fl * fl), v = 255 * sm(fl * 1.6);\n    for (let i = 0; i \u003c 40; i++) {\n      const a0 = (2 * PI * i) / 40, a1 = (2 * PI * (i + 1)) / 40;\n      line(S, toX(S.fbx) + r * cos(a0), toY(S.fby) + r * sin(a0), toX(S.fbx) + r * cos(a1), toY(S.fby) + r * sin(a1), v, v, v, 0.95);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again."},{"name":"Tension","min":0,"max":1,"about":"The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B."},{"name":"Depth","min":0,"max":1,"about":"The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all."}],"start":[0,2,0,0.06],"measures":{"motion":0.213,"detail":0.0332,"edges":0.4458,"complexity":0.4561,"coverage":0.1952,"colour":0.1001,"drift":0.0525},"knobResponse":[0.0365,0.0378,0.0477,0.0428]},{"slug":"center-pivot","title":"Center Pivot","family":"farm","round":27,"note":"비행기 창으로 내려다본 들판이에요. 흙길로 나뉜 황토색 땅에 원형 밭이 두 줄로 넷씩 놓이고, 은빛 스프링클러 팔이 돌며 지나간 부채꼴을 짙게 적셨다가 말려요. 금빛 밀밭은 콤바인이 바깥부터 베어 들어가요. K1 이 봄에서 늦가을까지 철을 돌리고, 누르면 모든 팔이 한 바퀴 돌아요.","idea":"The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.","buttons":"K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.","code":"// ===== Patternflow pattern =====\n// Title:   Center Pivot\n// Family:  farm\n// Idea:    The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after center-pivot irrigation seen from the air over Kansas and the Saudi desert\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1\n//\n// Knob 1: Season. Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown.\n// Knob 2: Speed. At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster.\n// Knob 3: Fields. How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it.\n// Knob 4: Clouds. A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun.\n// Buttons: K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.\n\nconst W = 64, H = 128, N = W * H, SEC = 32, RW = 14, BAND = 3.2, TD = 4.5;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nconst md = (v) => v - floor(v / TAU) * TAU;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n\n// A crop's year in stages. The last number of each is how strongly the planted rings show.\nconst KEY = [\n  0, 84, 66, 50, 0.14, 0.1, 92, 76, 52, 0.18, 0.22, 116, 150, 64, 0.2, 0.36, 66, 136, 54, 0.12,\n  0.48, 34, 104, 48, 0.08, 0.56, 126, 132, 54, 0.08, 0.63, 222, 186, 64, 0.05, 0.7, 234, 200, 98, 0.05,\n  0.78, 224, 210, 158, 0.08, 0.89, 180, 168, 136, 0.08, 0.96, 116, 92, 68, 0.14, 1.01, 84, 66, 50, 0.14,\n];\nfunction stageCol(v, o) {\n  let a = 0;\n  while (KEY[a + 5] \u003c v) a += 5;\n  const u = sm(KEY[a], KEY[a + 5], v);\n  for (let j = 1; j \u003c 4; j++) o[j - 1] = mix(KEY[a + j], KEY[a + 5 + j], u);\n  return mix(KEY[a + 4], KEY[a + 9], u);\n}\n// Corn and soybeans run from ploughing to stubble, alfalfa stays green. Winter wheat is gold by June and sown again in autumn.\nfunction stageOf(crop, k, off) {\n  if (crop === 2) return fr(0.6 + 0.72 * k + off);\n  if (crop === 3) return 0.38 + 0.06 * sin(k * 9 + off * 20) + 0.14 * sm(0.75, 1, k);\n  return cl(0.86 * k + off - (crop ? 0.06 : 0), 0, 0.985);\n}\n\n// The river, in section units (an LED each at Fields 2), and the signed distance across it.\nconst rx = (y) => -39 + 13 * exp(-(((y - 16) / 24) ** 2)) + 2.5 * sin(y * 0.09 + 1) + 0.06 * y;\nfunction rd(wx, wy) {\n  const s = rx(wy + 0.5) - rx(wy - 0.5);\n  return (wx - rx(wy)) / sqrt(1 + s * s);\n}\n// The eight sections in view at the start, left then right, top down. Each is a crop, how far ahead it is,\n// a second crop on the other half and how far ahead that is, and the corner of the farmstead (-1 for none).\nconst OPEN = [\n  [0, 0.2, -1, 0, -1], [3, 0, -1, 0, 2], [2, 0.02, -1, 0, -1], [0, 0.19, 1, 0, -1],\n  [0, 0.32, -1, 0, -1], [1, 0, -1, 0, 1], [3, 0.3, 2, 0.06, 2], [1, 0.18, -1, 0, -1],\n];\nfunction spec(ci, cj) {\n  if (ci >= -1 && ci \u003c= 0 && cj >= -2 && cj \u003c= 1) {\n    const o = OPEN[(cj + 2) * 2 + ci + 1];\n    return { strips: 0, crop: o[0], off: o[1], crop2: o[2], off2: o[3], farm: o[4] };\n  }\n  const h = (k) => hash(ci * 31 + k, cj * 17 + 5);\n  return { strips: h(1) \u003c 0.14, crop: floor(h(2) * 4), off: h(3) * 0.3, crop2: h(4) \u003c 0.25 ? floor(h(5) * 4) : -1, off2: h(6) * 0.3, farm: h(7) \u003c 0.45 ? floor(h(8) * 4) : -1 };\n}\n\n// Per LED: its field, angle and distance from that pivot, how much of it is field; field LEDs grouped by field.\nconst FID = new Int16Array(N), ANG = new Float32Array(N), RAD = new Float32Array(N), COV = new Float32Array(N), FP = new Int32Array(N);\nconst BASE = new Float32Array(N * 3), ALT = new Float32Array(N * 3), WET = new Float32Array(N), F = new Float32Array(N * 3), C3 = new Float64Array(3);\n// Cloud noise that tiles every 64.\nconst CN = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = k & 63, y = k >> 6;\n  CN[k] = 0.55 * vn(x / 8, y / 8, 8) + 0.3 * vn(x / 4 + 9, y / 4, 16) + 0.15 * vn(x / 2, y / 2 + 7, 32);\n}\nfunction cloud(u, v) {\n  const x0 = floor(u), y0 = floor(v), fx = u - x0, fy = v - y0, a = x0 & 63, a1 = (x0 + 1) & 63, b = (y0 & 63) \u003c\u003c 6, b1 = ((y0 + 1) & 63) \u003c\u003c 6;\n  return mix(mix(CN[b + a], CN[b + a1], fx), mix(CN[b1 + a], CN[b1 + a1], fx), fy);\n}\n\nexport function setup(params) {\n  params.s = { z: -1, k1: -1, t: 0, rt: 0, ox: 20, oy: 30, mist: 0, fields: [], sec: new Map(), tr: [], dust: [], duster: null, spray: [] };\n}\n\nfunction sectionAt(S, wx, wy) {\n  const ci = floor(wx / SEC), cj = floor(wy / SEC), key = ci * 1000 + cj;\n  let s = S.sec.get(key);\n  if (!s) {\n    const sp = spec(ci, cj), cx = ci * SEC + 16, cy = cj * SEC + 16, sd = rd(cx, cy);\n    s = { ci, cj, sp, f: -1, cx, cy, sd };\n    S.sec.set(key, s);\n  }\n  return s;\n}\n\n// The fields for this height, and each LED's place in them.\nfunction layout(S, k3) {\n  const z = (S.z = k3 / 2), fs = (S.fields = []);\n  S.sec.clear();\n  for (let cj = floor(-2 * z) - 1; cj \u003c= ceil(2 * z); cj++)\n    for (let ci = floor(-z) - 1; ci \u003c= ceil(z); ci++) {\n      const s = sectionAt(S, ci * SEC + 1, cj * SEC + 1), sp = s.sp;\n      if (sp.strips || abs(s.sd) \u003c 6.5) continue;\n      const id = fs.length, sg = s.sd > 0 ? 1 : -1, h = (k) => hash(ci * 13 + k, cj * 7 + 3);\n      // Where the river and its trees cut the circle, the arm swings to and fro over what is left.\n      let run = 0, best = 0, start = 0, first = -1;\n      const ok = (k) => rd(s.cx + RW * 0.97 * cos((k * TAU) / 96), s.cy + RW * 0.97 * sin((k * TAU) / 96)) * sg > 4.8;\n      for (let k = 0; k \u003c 192; k++) {\n        if (ok(k % 96)) {\n          if (!run) start = k;\n          if (++run > best && run \u003c= 96) (best = run), (first = start);\n        } else run = 0;\n      }\n      if (best \u003c 16) continue;\n      const f = { id, s, sg, cx: 32.5 + s.cx / z, cy: 64.5 + s.cy / z, R: RW / z, crop: sp.crop, off: sp.off, crop2: sp.crop2, off2: sp.off2, sa: h(1) * TAU };\n      Object.assign(f, { sd: h(2) \u003c 0.5 ? 1 : -1, om: TAU / (16 + 10 * h(3)), a: h(4) * TAU, tint: 0.93 + 0.12 * h(5), boost: 0, wipe: 0, a0: 0, span: TAU, rel: 0 });\n      Object.assign(f, { harv: 0, h: 0, h0: 0.3 + 0.4 * h(6), hs: h(7) * TAU, hd: h(8) \u003c 0.5 ? 1 : -1, hst: 0, ht: 0, g: 1, n0: 0, n1: 0, grow: 0 });\n      if (best \u003c 96) Object.assign(f, { wipe: 1, a0: ((first + 1) * TAU) / 96, span: ((best - 2) * TAU) / 96, rel: h(4) * ((best - 2) * TAU) / 96 }), (f.a = f.a0 + f.rel);\n      s.f = id;\n      fs.push(f);\n    }\n  for (let i = 0; i \u003c N; i++) {\n    const wx = ((i & 63) - 32) * z, wy = ((i >> 6) - 64) * z, s = sectionAt(S, wx, wy);\n    FID[i] = -1;\n    COV[i] = 0;\n    if (s.f \u003c 0) continue;\n    const f = fs[s.f], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy);\n    const c = cl((RW - dr) / z + 0.5, 0, 1) * cl((rd(wx, wy) * f.sg - 4.6) / z + 0.5, 0, 1);\n    if (c \u003c= 0) continue;\n    (FID[i] = f.id), (COV[i] = c), (ANG[i] = md(atan2(dy, dx))), (RAD[i] = dr / z);\n  }\n  for (const f of fs) f.n1 = 0;\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) fs[FID[i]].n1++;\n  let n = 0;\n  for (const f of fs) (f.n0 = n), (n += f.n1), (f.n1 = f.n0);\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) FP[fs[FID[i]].n1++] = i;\n  const vr = [], hr = [];\n  for (let m = -4; m \u003c= 4; m++) {\n    const x = 32.5 + (m * SEC) / z, y = 64.5 + (m * SEC) / z;\n    if (x > 2 && x \u003c 62) vr.push(x);\n    if (y > 2 && y \u003c 126) hr.push(y);\n  }\n  S.tr = [0, 1].map((k) => ({ v: k === 0, c: k ? hr[min(hr.length - 1, 2)] : vr[floor(vr.length / 2)], p: k ? 20 : 100, d: k ? 1 : -1, acc: 0 }));\n  S.dust = [];\n}\n\n// What stands on the land: trees along the river and in the farmsteads' windbreaks (1), or a farmhouse roof (2)\n// with its grain bins (3). 0 is open ground.\nfunction objAt(S, wx, wy) {\n  const r = abs(rd(wx, wy));\n  if (r > 1.1 && r \u003c 4.4 && vn(wx * 0.55 + 5, wy * 0.55) > 0.22 + 0.11 * r) return 1;\n  const s = sectionAt(S, wx, wy), c = s.sp.farm;\n  if (c \u003c 0 || s.sp.strips) return 0;\n  const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, u = c & 1 ? SEC - lx : lx, v = c & 2 ? SEC - ly : ly;\n  if (u \u003c 1 || v \u003c 1) return 0;\n  if ((u \u003c 8.6 && v \u003c 2.7) || (u \u003c 2.7 && v \u003c 8.6)) return hash(floor(u * 1.4), floor(v * 1.4) + c) \u003c 0.85 ? 1 : 0;\n  if (u > 3.4 && u \u003c 5.3 && v > 3.4 && v \u003c 5.1) return 2;\n  if ((u - 6.4) ** 2 + (v - 3.7) ** 2 \u003c 0.7 || (u - 3.7) ** 2 + (v - 6.4) ** 2 \u003c 0.7) return 3;\n  return 0;\n}\n\n// Round bales lying on the windrows of a stubble field.\nfunction bale(f, wx, wy) {\n  const dx = wx - f.s.cx, dy = wy - f.s.cy, dr = sqrt(dx * dx + dy * dy);\n  if (dr > RW - 1 || dr \u003c 2) return 0;\n  const q = dr / 3.5, k = floor(q), arc = md(atan2(dy, dx) - f.sa) * dr, c = floor(arc / 4.5);\n  return abs(q - k - 0.5) * 3.5 \u003c 0.55 && abs(arc / 4.5 - c - 0.5) * 4.5 \u003c 0.6 && arc \u003c 4.2 * dr && hash(k, c + f.id * 50) \u003c 0.75 ? 1 : 0;\n}\n\n// The picture that stays put between knob turns: land, roads, river, farmsteads and each field at its point in the season.\nfunction paint(S, k1) {\n  const z = S.z, fs = S.fields, C = C3, L = [mix(156, 172, sm(0, 0.4, k1)), mix(146, 148, k1), mix(100, 106, k1)];\n  const leaf = [mix(34, 132, sm(0.72, 0.92, k1)), mix(66, 102, sm(0.72, 0.92, k1)), 38];\n  for (const f of fs) {\n    f.v = stageOf(f.crop, k1, f.off);\n    f.v2 = f.crop2 \u003c 0 ? f.v : stageOf(f.crop2, k1, f.off2);\n    f.c1 = [0, 0, 0];\n    f.c2 = [0, 0, 0];\n    f.a1 = stageCol(f.v, f.c1);\n    f.a2 = stageCol(f.v2, f.c2);\n    f.grow = (f.v > 0.1 && f.v \u003c 0.57) || (f.v2 > 0.1 && f.v2 \u003c 0.57) ? 1 : 0;\n    const hv = f.crop2 \u003c 0 && f.v > 0.6 && f.v \u003c 0.77 ? 1 : 0;\n    if (hv !== f.harv) Object.assign(f, { harv: hv, h: f.h0, hst: 0, g: 1 });\n  }\n  const ringA = sm(1.9, 2.6, 3 / z);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, wx = (x - 32) * z, wy = (y - 64) * z, s = sectionAt(S, wx, wy), sp = s.sp, r = rd(wx, wy), gr = 0.93 + 0.1 * vn(wx * 0.4, wy * 0.4) + 0.04 * hash(x, y);\n    for (let j = 0; j \u003c 3; j++) C[j] = L[j] * gr;\n    if (abs(r) \u003c 11) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], PASTURE[j] * gr, sm(11, 5, abs(r)) * 0.7);\n    if (sp.strips) {\n      const q = hash(s.ci, s.cj + 3) \u003c 0.5 ? wx : wy, st = floor(q / 4.5) & 1;\n      stageCol(st ? stageOf(2, k1, sp.off) : 0.86, C3);\n      for (let j = 0; j \u003c 3; j++) C[j] *= gr;\n    }\n    const fi = FID[i];\n    if (fi >= 0) {\n      const f = fs[fi], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy), cv = COV[i];\n      const side = f.crop2 \u003c 0 ? 0 : cl((dx * sin(f.sa) - dy * cos(f.sa)) / z + 0.5, 0, 1);\n      const amp = mix(f.a1, f.a2, side) * ringA, tk = abs(fr((dr * 5) / RW + 0.5) - 0.5) * (RW / 5 / z);\n      let m = f.tint * (1 + amp * cos((dr * TAU) / 3)) * (0.95 + 0.1 * vn(wx * 0.3 + f.id * 7, wy * 0.3));\n      if (dr > RW * 0.12) m *= 1 - 0.2 * cl(1 - tk * 1.6, 0, 1);\n      m *= 1 - 0.15 * cl(1 - abs(dr - RW + 0.5) / z, 0, 1);\n      const v = side > 0.5 ? f.v2 : f.v, wr = v > 0.76 && v \u003c 0.92 ? cl(1 - abs(fr(dr / 3.5) - 0.5) * (3.5 / z) * 1.8, 0, 1) : 0;\n      for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], mix(f.c1[j], f.c2[j], side) * m * (1 - 0.14 * wr), cv);\n      if (v > 0.76 && v \u003c 0.92) {\n        if (bale(f, wx, wy)) (C[0] = 196), (C[1] = 158), (C[2] = 76);\n        else if (bale(f, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.55;\n      }\n      if (dr \u003c 0.9) (C[0] = 170), (C[1] = 172), (C[2] = 164);\n      // Cut stubble, for a field the combine is in: paler, with a windrow down the middle of each pass.\n      if (f.harv) {\n        const kb = (RW - dr) / BAND, w2 = cl(1 - abs(fr(kb) - 0.5) * (BAND / z) * 1.6, 0, 1), m2 = f.tint * (0.96 + 0.08 * vn(wx * 0.5, wy * 0.5)) * (1 - 0.18 * w2) * (dr > RW * 0.12 ? 1 - 0.15 * cl(1 - tk * 1.6, 0, 1) : 1);\n        ALT[o] = 230 * m2;\n        ALT[o + 1] = 216 * m2;\n        ALT[o + 2] = 166 * m2;\n      }\n    }\n    const ob = objAt(S, wx, wy);\n    if (!ob && objAt(S, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.6;\n    if (ob === 1) for (let j = 0; j \u003c 3; j++) C[j] = leaf[j] * (0.8 + 0.4 * vn(wx * 1.3, wy * 1.3));\n    else if (ob === 2) (C[0] = 214), (C[1] = 208), (C[2] = 198);\n    else if (ob === 3) (C[0] = 196), (C[1] = 202), (C[2] = 206);\n    const aw = cl(1.25 - abs(r) / z, 0, 1);\n    if (aw > 0) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], WATER[j], aw);\n    const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, dp = min(lx, SEC - lx, ly, SEC - ly) / z, rc = x && y ? cl(0.6 / z + 0.5 - dp, 0, 1) : 0;\n    for (let j = 0; j \u003c 3; j++) BASE[o + j] = mix(C[j], GRAVEL[j], rc);\n  }\n}\n\nfunction startWet(S) {\n  for (const f of S.fields)\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let age = 99;\n      if (f.grow) {\n        if (!f.wipe) age = md((f.a - ANG[i]) * f.sd) / f.om;\n        else {\n          const r = md(ANG[i] - f.a0), p = f.rel;\n          if (r \u003c= f.span) age = (f.sd > 0 ? (r \u003c= p ? p - r : p + r) : r >= p ? r - p : 2 * f.span - r - p) / f.om;\n        }\n      }\n      WET[i] = exp(-age / TD);\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 2, 4), ts = cl(k[1], 0.2, 3) / 2, rt = cl(dt || 0, 0, 0.1), d = rt * ts;\n  let fresh = 0;\n  if (abs(k3 / 2 - S.z) > 0.004) layout(S, k3), (fresh = 1);\n  if (fresh || abs(k1 - S.k1) > 0.002) paint(S, k1), (S.k1 = k1);\n  if (fresh) startWet(S);\n  (S.k4 = cl(k[3], 0, 1)), (S.t += d), (S.rt += rt);\n  const bp = input.btnPressed || [];\n  if (bp[0]) {\n    for (const f of S.fields) f.boost = f.wipe ? 2 * f.span : TAU;\n    S.mist = 3;\n  }\n  if (bp[1] && !S.duster) {\n    const xs = S.fields.map((f) => f.cx).filter((x) => x > 4 && x \u003c 60), x = xs.length ? xs[floor(rnd() * xs.length)] + (rnd() - 0.5) * 6 : 32, dn = rnd() \u003c 0.5;\n    S.duster = { x, y: dn ? -8 : H + 8, vy: dn ? 30 : -30, acc: 0 };\n  }\n  S.mist = max(0, S.mist - rt);\n  (S.ox += 2 * d), (S.oy += 1.4 * d);\n  const dec = exp(-d / TD);\n  for (const f of S.fields) {\n    const on = f.grow || f.boost > 0, D = f.om * d;\n    if (on) f.boost -= D;\n    let lo = 1, hi = 0;\n    if (on && !f.wipe) (lo = f.a), (f.a = md(f.a + f.sd * D));\n    else if (on) {\n      const p = f.rel;\n      let q = p + f.sd * D;\n      (lo = min(p, q)), (hi = max(p, q));\n      if (q > f.span) (q = 2 * f.span - q), (f.sd = -1), (lo = min(p, q)), (hi = f.span);\n      if (q \u003c 0) (q = -q), (f.sd = 1), (lo = 0), (hi = max(p, q));\n      (f.rel = q), (f.a = f.a0 + q);\n    }\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let w = WET[i] * dec;\n      if (on) {\n        if (!f.wipe) {\n          if (md((ANG[i] - lo) * f.sd) \u003c= D) w = 1;\n        } else {\n          const r = md(ANG[i] - f.a0);\n          if (r >= lo && r \u003c= hi) w = 1;\n        }\n      }\n      WET[i] = w;\n    }\n    // The combine goes round at a steady walk, so the inner rings take less time.\n    if (f.harv) {\n      if (f.hst === 0) {\n        const rh = max(1.5, f.R - (BAND / S.z) * (floor(f.h) + 0.5));\n        f.h += (d * 5) / (TAU * rh * S.z);\n        if (f.h >= ceil(RW / BAND)) (f.hst = 1), (f.ht = 14);\n      } else if (f.hst === 1) {\n        if ((f.ht -= d) \u003c= 0) f.hst = 2;\n      } else if ((f.g -= d / 3) \u003c= 0) Object.assign(f, { hst: 0, h: 0, g: 1 });\n    }\n  }\n  // Trucks on the gravel roads and the dust they leave hanging.\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    tr.p += tr.d * 6 * d;\n    const lim = tr.v ? H : W;\n    if (tr.p > lim + 30) tr.p = -30;\n    if (tr.p \u003c -30) tr.p = lim + 30;\n    if ((tr.acc += d) > 0.1) {\n      tr.acc = 0;\n      S.dust.push({ x: tr.v ? tr.c : tr.p, y: tr.v ? tr.p : tr.c, t: S.t });\n    }\n  }\n  S.dust = S.dust.filter((p) => S.t - p.t \u003c 3.5);\n  const du = S.duster;\n  if (du) {\n    du.y += du.vy * rt;\n    if ((du.acc += rt) > 0.04) (du.acc = 0), S.spray.push({ x: du.x, y: du.y - Math.sign(du.vy) * 3, t: S.rt });\n    if (du.y \u003c -20 || du.y > H + 20) S.duster = null;\n  }\n  S.spray = S.spray.filter((p) => S.rt - p.t \u003c 4);\n}\n\nfunction blend(x, y, c, a) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], min(1, a));\n}\nfunction shade(x, y, k) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] *= k;\n}\n// A soft dot spread over the four LEDs around it.\nfunction puff(x, y, c, a) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  blend(x0, y0, c, a * (1 - fx) * (1 - fy)), blend(x0 + 1, y0, c, a * fx * (1 - fy)), blend(x0, y0 + 1, c, a * (1 - fx) * fy), blend(x0 + 1, y0 + 1, c, a * fx * fy);\n}\n\nconst SILVER = [214, 220, 226], MIST = [236, 242, 248], DUST = [246, 238, 216], RED = [204, 52, 36], YEL = [244, 212, 46], WHITE = [246, 248, 250], TANK = [236, 224, 196], TRUCK = [56, 64, 84];\nconst PLANE = [0, 1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, 0, -1, 0, -2, -1, -2, 1, -2], BODY = [250, 226, 80];\nconst PASTURE = [96, 118, 70], WATER = [84, 120, 146], GRAVEL = [206, 196, 168], CLOUD = [250, 250, 248], CLOUD_SH = [150, 160, 182];\n// How close a point along an arm of length R is to one of its towers.\nconst tw = (u, R) => cl(1 - abs(fr((u * 5) / R + 0.5) - 0.5) * (R / 5) * 1.5, 0, 1) * (u > R * 0.12 ? 1 : 0);\n// The arm and its shadow, its towers, the mist trailing it and the end gun's spray.\nfunction arm(S, f) {\n  const R = f.R, ca = cos(f.a), sa = sin(f.a), on = f.grow || f.boost > 0, ms = (on ? 1 : 0) * (1 + (S.mist > 0 ? 1.2 : 0)), tf = floor(S.rt * 7);\n  const x0 = max(0, floor(min(f.cx, f.cx + R * ca) - 3)), x1 = min(W - 1, ceil(max(f.cx, f.cx + R * ca) + 3));\n  const y0 = max(0, floor(min(f.cy, f.cy + R * sa) - 3)), y1 = min(H - 1, ceil(max(f.cy, f.cy + R * sa) + 3));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const qx = x + 0.5 - f.cx, qy = y + 0.5 - f.cy, t = qx * ca + qy * sa, c = qy * ca - qx * sa, ts = t - ca - sa, cs = c - ca + sa;\n      const o = (y * W + x) * 3, as = ts > -0.5 && ts \u003c R + 0.5 ? cl(1 - abs(cs), 0, 1) : 0, aa = t > -0.5 && t \u003c R + 0.3 ? cl(1.1 - abs(c), 0, 1) : 0;\n      if (as > 0) for (let j = 0; j \u003c 3; j++) F[o + j] *= 1 - 0.4 * as * (1 + 0.5 * tw(ts, R));\n      if (ms > 0 && t > R * 0.15 && t \u003c R + 2.5 && c * f.sd \u003c -0.3 && c * f.sd > (t > R ? -2.2 : -1.8)) {\n        const sp = hash(x * 31 + y, tf + f.id * 977);\n        blend(x, y, MIST, ms * (0.13 + (sp > 0.74 ? 0.5 : 0)) * (t > R ? 1.3 : 1));\n      }\n      if (aa > 0) {\n        const e = 0.6 * tw(t, R);\n        for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(SILVER[j], 250, e), 0.9 * aa);\n      }\n    }\n  // The wheeled towers, each with its short shadow.\n  for (let k = 1; k \u003c= 5; k++) {\n    const x = f.cx + ((R * k) / 5 - 0.3) * ca, y = f.cy + ((R * k) / 5 - 0.3) * sa;\n    shade(x + 1, y + 1, 0.55), blend(x, y, WHITE, 0.85);\n  }\n  blend(f.cx, f.cy, WHITE, 1);\n  shade(f.cx + 1, f.cy + 1, 0.55);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.z \u003c 0) return;\n  const fs = S.fields;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const fi = FID[i];\n    let g = 0;\n    if (fi >= 0) {\n      const f = fs[fi];\n      if (f.harv && f.hst) g = f.g;\n      else if (f.harv) {\n        const rel = md((ANG[i] - f.hs) * f.hd) / TAU;\n        if (floor((f.R - RAD[i]) / (BAND / S.z)) + rel \u003c f.h) g = 1;\n      }\n    }\n    const w = WET[i] > 0.004 ? WET[i] ** 0.8 * (fi >= 0 ? COV[i] : 0) : 0, k = 1 - 0.5 * w;\n    for (let j = 0; j \u003c 3; j++) {\n      let c = BASE[o + j];\n      if (g > 0) c = mix(c, ALT[o + j], g * COV[i]);\n      F[o + j] = c * k * (1 + (j - 1) * 0.08 * w);\n    }\n  }\n  for (const f of fs) {\n    if (f.harv && f.hst === 0) {\n      const z = S.z, rh = max(1.5, f.R - (BAND / z) * (floor(f.h) + 0.5)), th = f.hs + f.hd * fr(f.h) * TAU, x = f.cx + rh * cos(th), y = f.cy + rh * sin(th);\n      for (let j = 1; j \u003c 9; j++) {\n        const b = th - f.hd * (j * 0.7) / rh;\n        puff(f.cx + rh * cos(b) + 0.3 * j, f.cy + rh * sin(b) + 0.4 * j, DUST, 0.32 * (1 - j / 9));\n      }\n      shade(x + 1, y + 1, 0.5), shade(x + 2, y + 1, 0.6);\n      blend(x, y, RED, 1), blend(x + 1, y, TANK, 1);\n    }\n  }\n  for (const f of fs) arm(S, f);\n  for (const p of S.dust) {\n    const a = S.t - p.t;\n    const e = 0.8 * exp(-a / 1.7), sp = 0.4 + 0.6 * a, x = p.x + a * 1.7, y = p.y + a * 1.2;\n    puff(x, y, DUST, e), puff(x + sp, y + sp * 0.5, DUST, e * 0.6), puff(x - sp * 0.5, y + sp, DUST, e * 0.6);\n  }\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    const x = tr.v ? tr.c : tr.p, y = tr.v ? tr.p : tr.c;\n    shade(x + 1, y + 1, 0.55);\n    blend(x, y, TRUCK, 1);\n  }\n  for (const p of S.spray) {\n    const a = S.rt - p.t;\n    const e = 0.6 * exp(-a / 1.5), sp = 1.2 + 0.9 * a, x = p.x + a * 1.2, y = p.y + a * 0.8;\n    puff(x, y, MIST, e * 0.7), puff(x - sp, y, MIST, e), puff(x + sp, y, MIST, e);\n  }\n  const du = S.duster;\n  if (du) {\n    // A biplane seen from above: nose, wings, body and tail, with its shadow close by.\n    const sy = Math.sign(du.vy), X = floor(du.x), Y = floor(du.y);\n    for (let k = 0; k \u003c 20; k += 2) shade(X + PLANE[k] + 3, Y + PLANE[k + 1] * sy + 4, 0.55);\n    for (let k = 0; k \u003c 20; k += 2) blend(X + PLANE[k], Y + PLANE[k + 1] * sy, PLANE[k + 1] === 0 && PLANE[k] ? YEL : BODY, 1);\n  }\n  // Clouds and their shadows, lit from the upper left.\n  const thr = 0.69 - 0.2 * S.k4, ox = S.ox, oy = S.oy;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, u = (x - ox) * 0.3, v = (y - oy) * 0.27;\n    const sh = sm(thr, thr + 0.06, cloud(u - 1.8, v - 2.4)), n = cloud(u, v), ca = sm(thr, thr + 0.05, n);\n    let k = 1 - 0.45 * sh;\n    for (let j = 0; j \u003c 3; j++) F[o + j] *= k * (j === 2 ? 1 + 0.05 * sh : 1);\n    if (ca > 0) {\n      const lit = cl(0.7 - (n - cloud(u + 0.5, v + 0.5)) * 12 + 2 * (n - thr), 0, 1);\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(CLOUD_SH[j], CLOUD[j], lit), 0.92 * ca);\n    }\n    const lt = 1.02 - 0.09 * (x / W) - 0.07 * (y / H);\n    display.setPixel(x, y, min(255, F[o] * lt + 8) | 0, min(255, F[o + 1] * lt * 0.98 + 8) | 0, min(255, F[o + 2] * lt * 0.95 + 10) | 0);\n  }\n}\n","layer":{"id":"layer-center-pivot","type":"code","name":"center-pivot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Center Pivot\n// Family:  farm\n// Idea:    The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after center-pivot irrigation seen from the air over Kansas and the Saudi desert\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1\n//\n// Knob 1: Season. Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown.\n// Knob 2: Speed. At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster.\n// Knob 3: Fields. How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it.\n// Knob 4: Clouds. A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun.\n// Buttons: K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.\n\nconst W = 64, H = 128, N = W * H, SEC = 32, RW = 14, BAND = 3.2, TD = 4.5;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nconst md = (v) => v - floor(v / TAU) * TAU;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n\n// A crop's year in stages. The last number of each is how strongly the planted rings show.\nconst KEY = [\n  0, 84, 66, 50, 0.14, 0.1, 92, 76, 52, 0.18, 0.22, 116, 150, 64, 0.2, 0.36, 66, 136, 54, 0.12,\n  0.48, 34, 104, 48, 0.08, 0.56, 126, 132, 54, 0.08, 0.63, 222, 186, 64, 0.05, 0.7, 234, 200, 98, 0.05,\n  0.78, 224, 210, 158, 0.08, 0.89, 180, 168, 136, 0.08, 0.96, 116, 92, 68, 0.14, 1.01, 84, 66, 50, 0.14,\n];\nfunction stageCol(v, o) {\n  let a = 0;\n  while (KEY[a + 5] \u003c v) a += 5;\n  const u = sm(KEY[a], KEY[a + 5], v);\n  for (let j = 1; j \u003c 4; j++) o[j - 1] = mix(KEY[a + j], KEY[a + 5 + j], u);\n  return mix(KEY[a + 4], KEY[a + 9], u);\n}\n// Corn and soybeans run from ploughing to stubble, alfalfa stays green. Winter wheat is gold by June and sown again in autumn.\nfunction stageOf(crop, k, off) {\n  if (crop === 2) return fr(0.6 + 0.72 * k + off);\n  if (crop === 3) return 0.38 + 0.06 * sin(k * 9 + off * 20) + 0.14 * sm(0.75, 1, k);\n  return cl(0.86 * k + off - (crop ? 0.06 : 0), 0, 0.985);\n}\n\n// The river, in section units (an LED each at Fields 2), and the signed distance across it.\nconst rx = (y) => -39 + 13 * exp(-(((y - 16) / 24) ** 2)) + 2.5 * sin(y * 0.09 + 1) + 0.06 * y;\nfunction rd(wx, wy) {\n  const s = rx(wy + 0.5) - rx(wy - 0.5);\n  return (wx - rx(wy)) / sqrt(1 + s * s);\n}\n// The eight sections in view at the start, left then right, top down. Each is a crop, how far ahead it is,\n// a second crop on the other half and how far ahead that is, and the corner of the farmstead (-1 for none).\nconst OPEN = [\n  [0, 0.2, -1, 0, -1], [3, 0, -1, 0, 2], [2, 0.02, -1, 0, -1], [0, 0.19, 1, 0, -1],\n  [0, 0.32, -1, 0, -1], [1, 0, -1, 0, 1], [3, 0.3, 2, 0.06, 2], [1, 0.18, -1, 0, -1],\n];\nfunction spec(ci, cj) {\n  if (ci >= -1 && ci \u003c= 0 && cj >= -2 && cj \u003c= 1) {\n    const o = OPEN[(cj + 2) * 2 + ci + 1];\n    return { strips: 0, crop: o[0], off: o[1], crop2: o[2], off2: o[3], farm: o[4] };\n  }\n  const h = (k) => hash(ci * 31 + k, cj * 17 + 5);\n  return { strips: h(1) \u003c 0.14, crop: floor(h(2) * 4), off: h(3) * 0.3, crop2: h(4) \u003c 0.25 ? floor(h(5) * 4) : -1, off2: h(6) * 0.3, farm: h(7) \u003c 0.45 ? floor(h(8) * 4) : -1 };\n}\n\n// Per LED: its field, angle and distance from that pivot, how much of it is field; field LEDs grouped by field.\nconst FID = new Int16Array(N), ANG = new Float32Array(N), RAD = new Float32Array(N), COV = new Float32Array(N), FP = new Int32Array(N);\nconst BASE = new Float32Array(N * 3), ALT = new Float32Array(N * 3), WET = new Float32Array(N), F = new Float32Array(N * 3), C3 = new Float64Array(3);\n// Cloud noise that tiles every 64.\nconst CN = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = k & 63, y = k >> 6;\n  CN[k] = 0.55 * vn(x / 8, y / 8, 8) + 0.3 * vn(x / 4 + 9, y / 4, 16) + 0.15 * vn(x / 2, y / 2 + 7, 32);\n}\nfunction cloud(u, v) {\n  const x0 = floor(u), y0 = floor(v), fx = u - x0, fy = v - y0, a = x0 & 63, a1 = (x0 + 1) & 63, b = (y0 & 63) \u003c\u003c 6, b1 = ((y0 + 1) & 63) \u003c\u003c 6;\n  return mix(mix(CN[b + a], CN[b + a1], fx), mix(CN[b1 + a], CN[b1 + a1], fx), fy);\n}\n\nexport function setup(params) {\n  params.s = { z: -1, k1: -1, t: 0, rt: 0, ox: 20, oy: 30, mist: 0, fields: [], sec: new Map(), tr: [], dust: [], duster: null, spray: [] };\n}\n\nfunction sectionAt(S, wx, wy) {\n  const ci = floor(wx / SEC), cj = floor(wy / SEC), key = ci * 1000 + cj;\n  let s = S.sec.get(key);\n  if (!s) {\n    const sp = spec(ci, cj), cx = ci * SEC + 16, cy = cj * SEC + 16, sd = rd(cx, cy);\n    s = { ci, cj, sp, f: -1, cx, cy, sd };\n    S.sec.set(key, s);\n  }\n  return s;\n}\n\n// The fields for this height, and each LED's place in them.\nfunction layout(S, k3) {\n  const z = (S.z = k3 / 2), fs = (S.fields = []);\n  S.sec.clear();\n  for (let cj = floor(-2 * z) - 1; cj \u003c= ceil(2 * z); cj++)\n    for (let ci = floor(-z) - 1; ci \u003c= ceil(z); ci++) {\n      const s = sectionAt(S, ci * SEC + 1, cj * SEC + 1), sp = s.sp;\n      if (sp.strips || abs(s.sd) \u003c 6.5) continue;\n      const id = fs.length, sg = s.sd > 0 ? 1 : -1, h = (k) => hash(ci * 13 + k, cj * 7 + 3);\n      // Where the river and its trees cut the circle, the arm swings to and fro over what is left.\n      let run = 0, best = 0, start = 0, first = -1;\n      const ok = (k) => rd(s.cx + RW * 0.97 * cos((k * TAU) / 96), s.cy + RW * 0.97 * sin((k * TAU) / 96)) * sg > 4.8;\n      for (let k = 0; k \u003c 192; k++) {\n        if (ok(k % 96)) {\n          if (!run) start = k;\n          if (++run > best && run \u003c= 96) (best = run), (first = start);\n        } else run = 0;\n      }\n      if (best \u003c 16) continue;\n      const f = { id, s, sg, cx: 32.5 + s.cx / z, cy: 64.5 + s.cy / z, R: RW / z, crop: sp.crop, off: sp.off, crop2: sp.crop2, off2: sp.off2, sa: h(1) * TAU };\n      Object.assign(f, { sd: h(2) \u003c 0.5 ? 1 : -1, om: TAU / (16 + 10 * h(3)), a: h(4) * TAU, tint: 0.93 + 0.12 * h(5), boost: 0, wipe: 0, a0: 0, span: TAU, rel: 0 });\n      Object.assign(f, { harv: 0, h: 0, h0: 0.3 + 0.4 * h(6), hs: h(7) * TAU, hd: h(8) \u003c 0.5 ? 1 : -1, hst: 0, ht: 0, g: 1, n0: 0, n1: 0, grow: 0 });\n      if (best \u003c 96) Object.assign(f, { wipe: 1, a0: ((first + 1) * TAU) / 96, span: ((best - 2) * TAU) / 96, rel: h(4) * ((best - 2) * TAU) / 96 }), (f.a = f.a0 + f.rel);\n      s.f = id;\n      fs.push(f);\n    }\n  for (let i = 0; i \u003c N; i++) {\n    const wx = ((i & 63) - 32) * z, wy = ((i >> 6) - 64) * z, s = sectionAt(S, wx, wy);\n    FID[i] = -1;\n    COV[i] = 0;\n    if (s.f \u003c 0) continue;\n    const f = fs[s.f], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy);\n    const c = cl((RW - dr) / z + 0.5, 0, 1) * cl((rd(wx, wy) * f.sg - 4.6) / z + 0.5, 0, 1);\n    if (c \u003c= 0) continue;\n    (FID[i] = f.id), (COV[i] = c), (ANG[i] = md(atan2(dy, dx))), (RAD[i] = dr / z);\n  }\n  for (const f of fs) f.n1 = 0;\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) fs[FID[i]].n1++;\n  let n = 0;\n  for (const f of fs) (f.n0 = n), (n += f.n1), (f.n1 = f.n0);\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) FP[fs[FID[i]].n1++] = i;\n  const vr = [], hr = [];\n  for (let m = -4; m \u003c= 4; m++) {\n    const x = 32.5 + (m * SEC) / z, y = 64.5 + (m * SEC) / z;\n    if (x > 2 && x \u003c 62) vr.push(x);\n    if (y > 2 && y \u003c 126) hr.push(y);\n  }\n  S.tr = [0, 1].map((k) => ({ v: k === 0, c: k ? hr[min(hr.length - 1, 2)] : vr[floor(vr.length / 2)], p: k ? 20 : 100, d: k ? 1 : -1, acc: 0 }));\n  S.dust = [];\n}\n\n// What stands on the land: trees along the river and in the farmsteads' windbreaks (1), or a farmhouse roof (2)\n// with its grain bins (3). 0 is open ground.\nfunction objAt(S, wx, wy) {\n  const r = abs(rd(wx, wy));\n  if (r > 1.1 && r \u003c 4.4 && vn(wx * 0.55 + 5, wy * 0.55) > 0.22 + 0.11 * r) return 1;\n  const s = sectionAt(S, wx, wy), c = s.sp.farm;\n  if (c \u003c 0 || s.sp.strips) return 0;\n  const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, u = c & 1 ? SEC - lx : lx, v = c & 2 ? SEC - ly : ly;\n  if (u \u003c 1 || v \u003c 1) return 0;\n  if ((u \u003c 8.6 && v \u003c 2.7) || (u \u003c 2.7 && v \u003c 8.6)) return hash(floor(u * 1.4), floor(v * 1.4) + c) \u003c 0.85 ? 1 : 0;\n  if (u > 3.4 && u \u003c 5.3 && v > 3.4 && v \u003c 5.1) return 2;\n  if ((u - 6.4) ** 2 + (v - 3.7) ** 2 \u003c 0.7 || (u - 3.7) ** 2 + (v - 6.4) ** 2 \u003c 0.7) return 3;\n  return 0;\n}\n\n// Round bales lying on the windrows of a stubble field.\nfunction bale(f, wx, wy) {\n  const dx = wx - f.s.cx, dy = wy - f.s.cy, dr = sqrt(dx * dx + dy * dy);\n  if (dr > RW - 1 || dr \u003c 2) return 0;\n  const q = dr / 3.5, k = floor(q), arc = md(atan2(dy, dx) - f.sa) * dr, c = floor(arc / 4.5);\n  return abs(q - k - 0.5) * 3.5 \u003c 0.55 && abs(arc / 4.5 - c - 0.5) * 4.5 \u003c 0.6 && arc \u003c 4.2 * dr && hash(k, c + f.id * 50) \u003c 0.75 ? 1 : 0;\n}\n\n// The picture that stays put between knob turns: land, roads, river, farmsteads and each field at its point in the season.\nfunction paint(S, k1) {\n  const z = S.z, fs = S.fields, C = C3, L = [mix(156, 172, sm(0, 0.4, k1)), mix(146, 148, k1), mix(100, 106, k1)];\n  const leaf = [mix(34, 132, sm(0.72, 0.92, k1)), mix(66, 102, sm(0.72, 0.92, k1)), 38];\n  for (const f of fs) {\n    f.v = stageOf(f.crop, k1, f.off);\n    f.v2 = f.crop2 \u003c 0 ? f.v : stageOf(f.crop2, k1, f.off2);\n    f.c1 = [0, 0, 0];\n    f.c2 = [0, 0, 0];\n    f.a1 = stageCol(f.v, f.c1);\n    f.a2 = stageCol(f.v2, f.c2);\n    f.grow = (f.v > 0.1 && f.v \u003c 0.57) || (f.v2 > 0.1 && f.v2 \u003c 0.57) ? 1 : 0;\n    const hv = f.crop2 \u003c 0 && f.v > 0.6 && f.v \u003c 0.77 ? 1 : 0;\n    if (hv !== f.harv) Object.assign(f, { harv: hv, h: f.h0, hst: 0, g: 1 });\n  }\n  const ringA = sm(1.9, 2.6, 3 / z);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, wx = (x - 32) * z, wy = (y - 64) * z, s = sectionAt(S, wx, wy), sp = s.sp, r = rd(wx, wy), gr = 0.93 + 0.1 * vn(wx * 0.4, wy * 0.4) + 0.04 * hash(x, y);\n    for (let j = 0; j \u003c 3; j++) C[j] = L[j] * gr;\n    if (abs(r) \u003c 11) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], PASTURE[j] * gr, sm(11, 5, abs(r)) * 0.7);\n    if (sp.strips) {\n      const q = hash(s.ci, s.cj + 3) \u003c 0.5 ? wx : wy, st = floor(q / 4.5) & 1;\n      stageCol(st ? stageOf(2, k1, sp.off) : 0.86, C3);\n      for (let j = 0; j \u003c 3; j++) C[j] *= gr;\n    }\n    const fi = FID[i];\n    if (fi >= 0) {\n      const f = fs[fi], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy), cv = COV[i];\n      const side = f.crop2 \u003c 0 ? 0 : cl((dx * sin(f.sa) - dy * cos(f.sa)) / z + 0.5, 0, 1);\n      const amp = mix(f.a1, f.a2, side) * ringA, tk = abs(fr((dr * 5) / RW + 0.5) - 0.5) * (RW / 5 / z);\n      let m = f.tint * (1 + amp * cos((dr * TAU) / 3)) * (0.95 + 0.1 * vn(wx * 0.3 + f.id * 7, wy * 0.3));\n      if (dr > RW * 0.12) m *= 1 - 0.2 * cl(1 - tk * 1.6, 0, 1);\n      m *= 1 - 0.15 * cl(1 - abs(dr - RW + 0.5) / z, 0, 1);\n      const v = side > 0.5 ? f.v2 : f.v, wr = v > 0.76 && v \u003c 0.92 ? cl(1 - abs(fr(dr / 3.5) - 0.5) * (3.5 / z) * 1.8, 0, 1) : 0;\n      for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], mix(f.c1[j], f.c2[j], side) * m * (1 - 0.14 * wr), cv);\n      if (v > 0.76 && v \u003c 0.92) {\n        if (bale(f, wx, wy)) (C[0] = 196), (C[1] = 158), (C[2] = 76);\n        else if (bale(f, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.55;\n      }\n      if (dr \u003c 0.9) (C[0] = 170), (C[1] = 172), (C[2] = 164);\n      // Cut stubble, for a field the combine is in: paler, with a windrow down the middle of each pass.\n      if (f.harv) {\n        const kb = (RW - dr) / BAND, w2 = cl(1 - abs(fr(kb) - 0.5) * (BAND / z) * 1.6, 0, 1), m2 = f.tint * (0.96 + 0.08 * vn(wx * 0.5, wy * 0.5)) * (1 - 0.18 * w2) * (dr > RW * 0.12 ? 1 - 0.15 * cl(1 - tk * 1.6, 0, 1) : 1);\n        ALT[o] = 230 * m2;\n        ALT[o + 1] = 216 * m2;\n        ALT[o + 2] = 166 * m2;\n      }\n    }\n    const ob = objAt(S, wx, wy);\n    if (!ob && objAt(S, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.6;\n    if (ob === 1) for (let j = 0; j \u003c 3; j++) C[j] = leaf[j] * (0.8 + 0.4 * vn(wx * 1.3, wy * 1.3));\n    else if (ob === 2) (C[0] = 214), (C[1] = 208), (C[2] = 198);\n    else if (ob === 3) (C[0] = 196), (C[1] = 202), (C[2] = 206);\n    const aw = cl(1.25 - abs(r) / z, 0, 1);\n    if (aw > 0) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], WATER[j], aw);\n    const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, dp = min(lx, SEC - lx, ly, SEC - ly) / z, rc = x && y ? cl(0.6 / z + 0.5 - dp, 0, 1) : 0;\n    for (let j = 0; j \u003c 3; j++) BASE[o + j] = mix(C[j], GRAVEL[j], rc);\n  }\n}\n\nfunction startWet(S) {\n  for (const f of S.fields)\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let age = 99;\n      if (f.grow) {\n        if (!f.wipe) age = md((f.a - ANG[i]) * f.sd) / f.om;\n        else {\n          const r = md(ANG[i] - f.a0), p = f.rel;\n          if (r \u003c= f.span) age = (f.sd > 0 ? (r \u003c= p ? p - r : p + r) : r >= p ? r - p : 2 * f.span - r - p) / f.om;\n        }\n      }\n      WET[i] = exp(-age / TD);\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 2, 4), ts = cl(k[1], 0.2, 3) / 2, rt = cl(dt || 0, 0, 0.1), d = rt * ts;\n  let fresh = 0;\n  if (abs(k3 / 2 - S.z) > 0.004) layout(S, k3), (fresh = 1);\n  if (fresh || abs(k1 - S.k1) > 0.002) paint(S, k1), (S.k1 = k1);\n  if (fresh) startWet(S);\n  (S.k4 = cl(k[3], 0, 1)), (S.t += d), (S.rt += rt);\n  const bp = input.btnPressed || [];\n  if (bp[0]) {\n    for (const f of S.fields) f.boost = f.wipe ? 2 * f.span : TAU;\n    S.mist = 3;\n  }\n  if (bp[1] && !S.duster) {\n    const xs = S.fields.map((f) => f.cx).filter((x) => x > 4 && x \u003c 60), x = xs.length ? xs[floor(rnd() * xs.length)] + (rnd() - 0.5) * 6 : 32, dn = rnd() \u003c 0.5;\n    S.duster = { x, y: dn ? -8 : H + 8, vy: dn ? 30 : -30, acc: 0 };\n  }\n  S.mist = max(0, S.mist - rt);\n  (S.ox += 2 * d), (S.oy += 1.4 * d);\n  const dec = exp(-d / TD);\n  for (const f of S.fields) {\n    const on = f.grow || f.boost > 0, D = f.om * d;\n    if (on) f.boost -= D;\n    let lo = 1, hi = 0;\n    if (on && !f.wipe) (lo = f.a), (f.a = md(f.a + f.sd * D));\n    else if (on) {\n      const p = f.rel;\n      let q = p + f.sd * D;\n      (lo = min(p, q)), (hi = max(p, q));\n      if (q > f.span) (q = 2 * f.span - q), (f.sd = -1), (lo = min(p, q)), (hi = f.span);\n      if (q \u003c 0) (q = -q), (f.sd = 1), (lo = 0), (hi = max(p, q));\n      (f.rel = q), (f.a = f.a0 + q);\n    }\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let w = WET[i] * dec;\n      if (on) {\n        if (!f.wipe) {\n          if (md((ANG[i] - lo) * f.sd) \u003c= D) w = 1;\n        } else {\n          const r = md(ANG[i] - f.a0);\n          if (r >= lo && r \u003c= hi) w = 1;\n        }\n      }\n      WET[i] = w;\n    }\n    // The combine goes round at a steady walk, so the inner rings take less time.\n    if (f.harv) {\n      if (f.hst === 0) {\n        const rh = max(1.5, f.R - (BAND / S.z) * (floor(f.h) + 0.5));\n        f.h += (d * 5) / (TAU * rh * S.z);\n        if (f.h >= ceil(RW / BAND)) (f.hst = 1), (f.ht = 14);\n      } else if (f.hst === 1) {\n        if ((f.ht -= d) \u003c= 0) f.hst = 2;\n      } else if ((f.g -= d / 3) \u003c= 0) Object.assign(f, { hst: 0, h: 0, g: 1 });\n    }\n  }\n  // Trucks on the gravel roads and the dust they leave hanging.\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    tr.p += tr.d * 6 * d;\n    const lim = tr.v ? H : W;\n    if (tr.p > lim + 30) tr.p = -30;\n    if (tr.p \u003c -30) tr.p = lim + 30;\n    if ((tr.acc += d) > 0.1) {\n      tr.acc = 0;\n      S.dust.push({ x: tr.v ? tr.c : tr.p, y: tr.v ? tr.p : tr.c, t: S.t });\n    }\n  }\n  S.dust = S.dust.filter((p) => S.t - p.t \u003c 3.5);\n  const du = S.duster;\n  if (du) {\n    du.y += du.vy * rt;\n    if ((du.acc += rt) > 0.04) (du.acc = 0), S.spray.push({ x: du.x, y: du.y - Math.sign(du.vy) * 3, t: S.rt });\n    if (du.y \u003c -20 || du.y > H + 20) S.duster = null;\n  }\n  S.spray = S.spray.filter((p) => S.rt - p.t \u003c 4);\n}\n\nfunction blend(x, y, c, a) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], min(1, a));\n}\nfunction shade(x, y, k) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] *= k;\n}\n// A soft dot spread over the four LEDs around it.\nfunction puff(x, y, c, a) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  blend(x0, y0, c, a * (1 - fx) * (1 - fy)), blend(x0 + 1, y0, c, a * fx * (1 - fy)), blend(x0, y0 + 1, c, a * (1 - fx) * fy), blend(x0 + 1, y0 + 1, c, a * fx * fy);\n}\n\nconst SILVER = [214, 220, 226], MIST = [236, 242, 248], DUST = [246, 238, 216], RED = [204, 52, 36], YEL = [244, 212, 46], WHITE = [246, 248, 250], TANK = [236, 224, 196], TRUCK = [56, 64, 84];\nconst PLANE = [0, 1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, 0, -1, 0, -2, -1, -2, 1, -2], BODY = [250, 226, 80];\nconst PASTURE = [96, 118, 70], WATER = [84, 120, 146], GRAVEL = [206, 196, 168], CLOUD = [250, 250, 248], CLOUD_SH = [150, 160, 182];\n// How close a point along an arm of length R is to one of its towers.\nconst tw = (u, R) => cl(1 - abs(fr((u * 5) / R + 0.5) - 0.5) * (R / 5) * 1.5, 0, 1) * (u > R * 0.12 ? 1 : 0);\n// The arm and its shadow, its towers, the mist trailing it and the end gun's spray.\nfunction arm(S, f) {\n  const R = f.R, ca = cos(f.a), sa = sin(f.a), on = f.grow || f.boost > 0, ms = (on ? 1 : 0) * (1 + (S.mist > 0 ? 1.2 : 0)), tf = floor(S.rt * 7);\n  const x0 = max(0, floor(min(f.cx, f.cx + R * ca) - 3)), x1 = min(W - 1, ceil(max(f.cx, f.cx + R * ca) + 3));\n  const y0 = max(0, floor(min(f.cy, f.cy + R * sa) - 3)), y1 = min(H - 1, ceil(max(f.cy, f.cy + R * sa) + 3));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const qx = x + 0.5 - f.cx, qy = y + 0.5 - f.cy, t = qx * ca + qy * sa, c = qy * ca - qx * sa, ts = t - ca - sa, cs = c - ca + sa;\n      const o = (y * W + x) * 3, as = ts > -0.5 && ts \u003c R + 0.5 ? cl(1 - abs(cs), 0, 1) : 0, aa = t > -0.5 && t \u003c R + 0.3 ? cl(1.1 - abs(c), 0, 1) : 0;\n      if (as > 0) for (let j = 0; j \u003c 3; j++) F[o + j] *= 1 - 0.4 * as * (1 + 0.5 * tw(ts, R));\n      if (ms > 0 && t > R * 0.15 && t \u003c R + 2.5 && c * f.sd \u003c -0.3 && c * f.sd > (t > R ? -2.2 : -1.8)) {\n        const sp = hash(x * 31 + y, tf + f.id * 977);\n        blend(x, y, MIST, ms * (0.13 + (sp > 0.74 ? 0.5 : 0)) * (t > R ? 1.3 : 1));\n      }\n      if (aa > 0) {\n        const e = 0.6 * tw(t, R);\n        for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(SILVER[j], 250, e), 0.9 * aa);\n      }\n    }\n  // The wheeled towers, each with its short shadow.\n  for (let k = 1; k \u003c= 5; k++) {\n    const x = f.cx + ((R * k) / 5 - 0.3) * ca, y = f.cy + ((R * k) / 5 - 0.3) * sa;\n    shade(x + 1, y + 1, 0.55), blend(x, y, WHITE, 0.85);\n  }\n  blend(f.cx, f.cy, WHITE, 1);\n  shade(f.cx + 1, f.cy + 1, 0.55);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.z \u003c 0) return;\n  const fs = S.fields;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const fi = FID[i];\n    let g = 0;\n    if (fi >= 0) {\n      const f = fs[fi];\n      if (f.harv && f.hst) g = f.g;\n      else if (f.harv) {\n        const rel = md((ANG[i] - f.hs) * f.hd) / TAU;\n        if (floor((f.R - RAD[i]) / (BAND / S.z)) + rel \u003c f.h) g = 1;\n      }\n    }\n    const w = WET[i] > 0.004 ? WET[i] ** 0.8 * (fi >= 0 ? COV[i] : 0) : 0, k = 1 - 0.5 * w;\n    for (let j = 0; j \u003c 3; j++) {\n      let c = BASE[o + j];\n      if (g > 0) c = mix(c, ALT[o + j], g * COV[i]);\n      F[o + j] = c * k * (1 + (j - 1) * 0.08 * w);\n    }\n  }\n  for (const f of fs) {\n    if (f.harv && f.hst === 0) {\n      const z = S.z, rh = max(1.5, f.R - (BAND / z) * (floor(f.h) + 0.5)), th = f.hs + f.hd * fr(f.h) * TAU, x = f.cx + rh * cos(th), y = f.cy + rh * sin(th);\n      for (let j = 1; j \u003c 9; j++) {\n        const b = th - f.hd * (j * 0.7) / rh;\n        puff(f.cx + rh * cos(b) + 0.3 * j, f.cy + rh * sin(b) + 0.4 * j, DUST, 0.32 * (1 - j / 9));\n      }\n      shade(x + 1, y + 1, 0.5), shade(x + 2, y + 1, 0.6);\n      blend(x, y, RED, 1), blend(x + 1, y, TANK, 1);\n    }\n  }\n  for (const f of fs) arm(S, f);\n  for (const p of S.dust) {\n    const a = S.t - p.t;\n    const e = 0.8 * exp(-a / 1.7), sp = 0.4 + 0.6 * a, x = p.x + a * 1.7, y = p.y + a * 1.2;\n    puff(x, y, DUST, e), puff(x + sp, y + sp * 0.5, DUST, e * 0.6), puff(x - sp * 0.5, y + sp, DUST, e * 0.6);\n  }\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    const x = tr.v ? tr.c : tr.p, y = tr.v ? tr.p : tr.c;\n    shade(x + 1, y + 1, 0.55);\n    blend(x, y, TRUCK, 1);\n  }\n  for (const p of S.spray) {\n    const a = S.rt - p.t;\n    const e = 0.6 * exp(-a / 1.5), sp = 1.2 + 0.9 * a, x = p.x + a * 1.2, y = p.y + a * 0.8;\n    puff(x, y, MIST, e * 0.7), puff(x - sp, y, MIST, e), puff(x + sp, y, MIST, e);\n  }\n  const du = S.duster;\n  if (du) {\n    // A biplane seen from above: nose, wings, body and tail, with its shadow close by.\n    const sy = Math.sign(du.vy), X = floor(du.x), Y = floor(du.y);\n    for (let k = 0; k \u003c 20; k += 2) shade(X + PLANE[k] + 3, Y + PLANE[k + 1] * sy + 4, 0.55);\n    for (let k = 0; k \u003c 20; k += 2) blend(X + PLANE[k], Y + PLANE[k + 1] * sy, PLANE[k + 1] === 0 && PLANE[k] ? YEL : BODY, 1);\n  }\n  // Clouds and their shadows, lit from the upper left.\n  const thr = 0.69 - 0.2 * S.k4, ox = S.ox, oy = S.oy;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, u = (x - ox) * 0.3, v = (y - oy) * 0.27;\n    const sh = sm(thr, thr + 0.06, cloud(u - 1.8, v - 2.4)), n = cloud(u, v), ca = sm(thr, thr + 0.05, n);\n    let k = 1 - 0.45 * sh;\n    for (let j = 0; j \u003c 3; j++) F[o + j] *= k * (j === 2 ? 1 + 0.05 * sh : 1);\n    if (ca > 0) {\n      const lit = cl(0.7 - (n - cloud(u + 0.5, v + 0.5)) * 12 + 2 * (n - thr), 0, 1);\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(CLOUD_SH[j], CLOUD[j], lit), 0.92 * ca);\n    }\n    const lt = 1.02 - 0.09 * (x / W) - 0.07 * (y / H);\n    display.setPixel(x, y, min(255, F[o] * lt + 8) | 0, min(255, F[o + 1] * lt * 0.98 + 8) | 0, min(255, F[o + 2] * lt * 0.95 + 10) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster."},{"name":"Fields","min":2,"max":4,"about":"How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it."},{"name":"Clouds","min":0,"max":1,"about":"A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun."}],"start":[0,2,2,0.06],"measures":{"motion":0.0527,"detail":0.0683,"edges":0.2287,"complexity":2.4956,"coverage":1,"colour":0.1929,"drift":0.0389},"knobResponse":[0.1272,0.0462,0.1999,0.1865]},{"slug":"change-ringing","title":"Change Ringing","family":"rhythm","round":20,"note":"종탑 종실에서 종들이 바퀴째 한 바퀴씩 돌며 칠 때마다 번쩍이고, 그 아래로 종마다 제 색의 선이 체인지 한 줄에 한 칸씩 Plain Bob 을 따라 지그재그로 흘러내려요. 트레블의 선만 빨강이고, K1 을 누르면 「Bob!」을 불러 다음 리드 엔드에서 2번 자리 대신 4번 자리를 만들어요.","idea":"In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.","buttons":"K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.","code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-change-ringing","type":"code","name":"change-ringing","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lines","min":0,"max":1,"about":"Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one."},{"name":"Speed","min":0.25,"max":3,"about":"The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row."},{"name":"Bells","min":4,"max":8,"about":"How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds."},{"name":"Method","min":-1,"max":1,"about":"-1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice."}],"start":[0,2,4,0.06],"measures":{"motion":0.4844,"detail":0.08,"edges":0.458,"complexity":1.2457,"coverage":0.5293,"colour":0.2305,"drift":0.0504},"knobResponse":[0.0499,0.1129,0.1732,0.0613]},{"slug":"chemical-garden","title":"Chemical Garden","family":"chemistry","round":21,"note":"물유리 용액을 채운 키 큰 유리컵 모래 위에 금속염 결정을 떨어뜨리면 코발트의 청보라나 철의 녹슨 주황 같은 속 빈 광물 관이 흔들리며 수면까지 자라요. 컵이 차면 빈 컵이 밀려 들어와 다시 자라요.","idea":"Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.","buttons":"K1 tap slides the glass away and brings in a fresh one.","code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","layer":{"id":"layer-chemical-garden","type":"code","name":"chemical-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salts","min":0,"max":4,"about":"What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps."},{"name":"Crystals","min":5,"max":20,"about":"How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once."},{"name":"Strength","min":-1,"max":1,"about":"How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches."}],"start":[0,2,5,0.06],"measures":{"motion":0.044,"detail":0.0682,"edges":0.4036,"complexity":2.0411,"coverage":0.7726,"colour":0.152,"drift":0.0448},"knobResponse":[0.0762,0.0506,0.0924,0.0773]},{"slug":"chimera-state","title":"Chimera State","family":"rhythm","round":35,"note":"똑같은 위상 진동자 256개가 고리에 앉아 서로 당기는데, 고리가 발맞춰 도는 30% 와 위상이 흩어진 나머지로 갈라져요. 위 20줄은 진동자마다 위상을 제자리에 점으로 찍어 매끈한 호 옆에 흩뿌린 점을 보이고, 그 아래로 한 줄이 한 순간이라 가운데로 하늘색 띠가 곧게 흐르고 양옆은 한 바퀴씩 뒤처지는 진동자의 어두운 획으로 채워져요. K3 은 위상 지연을 80도에서 88도로 돌려 발맞춘 띠를 19열에서 9열로 좁히고, K1 을 누르면 새 무작위 출발에서 키메라가 다시 자라요.","idea":"256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.","buttons":"K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.","code":"// ===== Patternflow pattern =====\n// Title:   Chimera State\n// Family:  rhythm\n// Idea:    256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Chimera states (Yoshiki Kuramoto and Dorjsuren Battogtokh, 2002)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4\n//\n// Knob 1: Hue. Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green.\n// Knob 2: Speed. Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second.\n// Knob 3: Lag. The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls.\n// Knob 4: Stride. Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle.\n// Buttons: K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.\n\n// The ring form is Daniel Abrams and Steven Strogatz's (2004): N identical\n// phase oscillators at x_j = -pi + 2 pi j / N, each pulled by all the others\n// through the kernel G(x) = (1 + A cos x) / 2 pi and a phase lag alpha,\n//   dθ_j/dt = ω - (2 pi / N) Σ_k G(x_j - x_k) sin(θ_j - θ_k + α),\n// their A = 0.995 and their start θ_j = 6 r_j exp(-0.76 x_j²), r_j uniform\n// in [-1/2, 1/2]. Every oscillator obeys the same law, yet the ring splits\n// into a stretch that moves in step and a stretch whose phases scatter.\nconst W = 64, H = 128, N = 256, PER = N / W, TOP = 20, Y0 = TOP + 1, ROWS = H - Y0;\nconst A = 0.995, STEP = 0.1, MAXSTEPS = 30, RATE = 4, HUE0 = 0.55;\nconst { min, floor, round, sqrt, sin, cos, exp, atan2, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (v, m) => v - m * round(v / m);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A new random draw of the Abrams-Strogatz start, its scattered hump at x0.\n// The part in step forms on the calm side, opposite x0; on the first draw\n// the columns are set to put it in the middle of the panel.\nfunction seed(P, x0, place) {\n  for (let j = 0; j \u003c N; j++) {\n    const d = wrap(-PI + (TAU * j) / N - x0, TAU);\n    P.th[j] = 6 * (Math.random() - 0.5) * exp(-0.76 * d * d);\n  }\n  if (place) {\n    P.xs = ((x0 + 2 * PI) / TAU) * W;\n    P.xs -= W * floor(P.xs / W);\n    P.col = round(P.xs) % W;\n  }\n  P.dead = 0;\n  P.age = 0;\n  P.lag = 84;\n}\n\n// The sum over k is the local field R_j e^{iΘ_j} = (1/N) Σ_k (1 + A cos(x_j\n// - x_k)) e^{iθ_k}, and with cos(x_j - x_k) = cos x_j cos x_k + sin x_j sin\n// x_k it is three sums over the ring, Σ e^{iθ}, Σ cos x e^{iθ} and\n// Σ sin x e^{iθ}, read off at each x_j: O(N) a step instead of O(N²). Then\n// dθ_j/dt = ω - R_j sin(θ_j - Θ_j + α).\nfunction deriv(P, t, d, frame) {\n  const { cx, sx, c: C, s: S } = P;\n  let p0r = 0, p0i = 0, pcr = 0, pci = 0, psr = 0, psi = 0;\n  for (let k = 0; k \u003c N; k++) {\n    const c = cos(t[k]), s = sin(t[k]);\n    C[k] = c;\n    S[k] = s;\n    p0r += c;\n    p0i += s;\n    pcr += cx[k] * c;\n    pci += cx[k] * s;\n    psr += sx[k] * c;\n    psi += sx[k] * s;\n  }\n  const ca = P.ca, sa = P.sa;\n  let wx = 0, wy = 0;\n  for (let j = 0; j \u003c N; j++) {\n    const rr = (p0r + A * (cx[j] * pcr + sx[j] * psr)) / N, ri = (p0i + A * (cx[j] * pci + sx[j] * psi)) / N;\n    const c = C[j], s = S[j];\n    d[j] = -((s * ca + c * sa) * rr - (c * ca - s * sa) * ri);\n    if (frame) {\n      const r2 = rr * rr + ri * ri;\n      wx += r2 * cx[j];\n      wy += r2 * sx[j];\n    }\n  }\n  if (frame) {\n    // The field is strongest over the part in step. Its centre xc, and the\n    // field's phase there, give the frame that turns with that part.\n    const xc = atan2(wy, wx), cc = cos(xc), sc = sin(xc);\n    P.xc = xc;\n    P.phi = atan2(p0i + A * (cc * pci + sc * psi), p0r + A * (cc * pcr + sc * psr));\n    P.z = sqrt(p0r * p0r + p0i * p0i) / N;\n  }\n}\n\n// One RK4 step of 0.1. The right side is never more than 1 + A in size, so\n// the step is far inside RK4's reach at every Lag. Before it the whole ring\n// is turned back by the phase of the part in step, which the equation does\n// not see (every oscillator is the same, so ω is free): that part's phases\n// stand still and only the scattered ones move.\nfunction step(P) {\n  const { th, k1, k2, k3, k4, tmp } = P, h = STEP;\n  // Each draw grows at 84 degrees for 100 time units, and only then does\n  // the lag move to the knob, a tenth of a degree per time unit. From the\n  // Abrams-Strogatz start right at 80 degrees, 6 draws in 30 fell into step\n  // everywhere within 65 time units; grown at 84 and brought down to 80 (or\n  // up to 88) after, none of 30 did in 1000. A sudden jump from 88 to 80 on\n  // a grown chimera ended 1 of 20, hence the slow turn.\n  P.age += h;\n  const want = P.age \u003c 100 ? 84 : P.lagKnob;\n  P.lag += cl(want - P.lag, -0.01, 0.01);\n  P.ca = cos((P.lag * PI) / 180);\n  P.sa = sin((P.lag * PI) / 180);\n  deriv(P, th, k1, true);\n  const phi = P.phi;\n  for (let j = 0; j \u003c N; j++) th[j] -= phi;\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k1[j];\n  deriv(P, tmp, k2, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k2[j];\n  deriv(P, tmp, k3, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + h * k3[j];\n  deriv(P, tmp, k4, false);\n  for (let j = 0; j \u003c N; j++) th[j] = wrap(th[j] + (h / 6) * (k1[j] + 2 * k2[j] + 2 * k3[j] + k4[j]), TAU);\n  // With 256 oscillators the chimera wanders round the ring, a few columns\n  // in a thousand time units. The history keeps the ring's own columns, so\n  // the wandering shows as a lean in the band; the panel as a whole slides\n  // a column after it once the part in step is three columns off the middle.\n  P.xs = wrap(P.xs + 0.002 * wrap(((P.xc + PI) / TAU) * W - P.xs, W), W);\n  if (abs(wrap(P.xs - P.col, W)) > 3) P.col = ((round(P.xs) % W) + W) % W;\n  // A draw can still fall into step everywhere, the other state this ring\n  // can rest in. After 30 time units of that, a new draw.\n  P.dead = P.z > 0.99 ? P.dead + h : 0;\n  if (P.dead > 30) seed(P, (TAU * P.col) / W, false);\n}\n\nconst osc = (P, c, k) => ((((P.col - W / 2 + c) * PER + k) % N) + N) % N;\n\n// A row of the history keeps one oscillator of every four, in the ring's\n// own columns.\nfunction record(P) {\n  P.head = (P.head + ROWS - 1) % ROWS;\n  const o = P.head * W;\n  for (let c = 0; c \u003c W; c++) P.hist[o + c] = P.th[c * PER + 1];\n}\n\nexport function setup(params) {\n  const cx = new Float64Array(N), sx = new Float64Array(N);\n  for (let j = 0; j \u003c N; j++) (cx[j] = cos(-PI + (TAU * j) / N)), (sx[j] = sin(-PI + (TAU * j) / N));\n  const f = () => new Float64Array(N);\n  params.s = {\n    cx, sx, th: f(), k1: f(), k2: f(), k3: f(), k4: f(), tmp: f(), c: f(), s: f(),\n    ca: 0, sa: 1, lag: 84, lagKnob: 80, age: 0, xc: PI, phi: 0, z: 0, xs: 0, col: 0, dead: 0,\n    hist: new Float32Array(ROWS * W), head: 0, clock: 0, since: 0, fresh: true,\n    hue: 0, speed: 2, stride: 1, pal: new Float32Array(256 * 3), dot: new Float32Array(256 * 3), palHue: NaN,\n    acc: new Float32Array(W * TOP * 3),\n  };\n  seed(params.s, 0, true);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 80, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.lagKnob = cl(k[2], 80, 88);\n  P.stride = cl(k[3], 0.8, 4);\n  if (P.fresh) {\n    // 150 time units to grow and reach the knob's lag; a draw that still\n    // falls into step is drawn again. Then the whole history is run once so\n    // the panel opens full: 5,780 steps at Stride 4, about 0.3 s once.\n    for (let tries = 0; tries \u003c 8; tries++) {\n      if (tries) seed(P, 0, true);\n      for (let i = 0; i \u003c 1500; i++) step(P);\n      if (P.z \u003c 0.9) break;\n    }\n    for (let r = 0; r \u003c ROWS; r++) {\n      for (let t = 0; t \u003c P.stride - 1e-9; t += STEP) step(P);\n      record(P);\n    }\n    P.fresh = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) seed(P, (TAU * P.col) / W, false);\n  P.clock += d * RATE * P.speed;\n  let n = 0;\n  for (; P.clock >= STEP && n \u003c MAXSTEPS; n++) {\n    step(P);\n    P.clock -= STEP;\n    P.since += STEP;\n    if (P.since >= P.stride - 1e-9) {\n      record(P);\n      P.since -= P.stride;\n    }\n  }\n  if (n === MAXSTEPS) P.clock = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pal, dot, hist, th, acc } = P;\n  if (P.palHue !== P.hue) {\n    // Phase round the colour wheel. In the history the brightness also\n    // follows the phase, full at the phase of the part in step and dark\n    // half a turn away, so each slip of a scattered oscillator is a dark\n    // stroke through its column.\n    for (let i = 0; i \u003c 256; i++) {\n      const t = (i / 256) * TAU;\n      hsv(P.hue + HUE0 + i / 256, 0.85, 0.5 + 0.5 * cos(t), pal, i * 3);\n      hsv(P.hue + HUE0 + i / 256, 0.75, 1, dot, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The present, in the top 20 rows: every oscillator a dot, its phase up\n  // and down against its place on the ring.\n  acc.fill(0);\n  for (let c = 0; c \u003c W; c++)\n    for (let k = 0; k \u003c PER; k++) {\n      const t = th[osc(P, c, k)], y = TOP / 2 - 0.5 + (t / PI) * (TOP / 2 - 0.5), y0 = floor(y), f = y - y0;\n      const q = (floor((t / TAU + 1) * 256) & 255) * 3;\n      if (y0 >= 0) {\n        const o = (y0 * W + c) * 3, a = 0.7 * (1 - f);\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n      if (y0 + 1 \u003c TOP) {\n        const o = ((y0 + 1) * W + c) * 3, a = 0.7 * f;\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n    }\n  for (let y = 0, o = 0; y \u003c TOP; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, acc[o] * 255), min(255, acc[o + 1] * 255), min(255, acc[o + 2] * 255));\n  for (let x = 0; x \u003c W; x++) display.setPixel(x, TOP, 0, 0, 0);\n  // The past: one row per moment, the newest at the top.\n  for (let r = 0; r \u003c ROWS; r++) {\n    const o = ((P.head + r) % ROWS) * W, c0 = P.col + W / 2;\n    for (let x = 0; x \u003c W; x++) {\n      const q = (floor((hist[o + ((c0 + x) % W)] / TAU + 1) * 256) & 255) * 3;\n      display.setPixel(x, Y0 + r, pal[q] * 255, pal[q + 1] * 255, pal[q + 2] * 255);\n    }\n  }\n}\n","layer":{"id":"layer-chimera-state","type":"code","name":"chimera-state","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chimera State\n// Family:  rhythm\n// Idea:    256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Chimera states (Yoshiki Kuramoto and Dorjsuren Battogtokh, 2002)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4\n//\n// Knob 1: Hue. Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green.\n// Knob 2: Speed. Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second.\n// Knob 3: Lag. The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls.\n// Knob 4: Stride. Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle.\n// Buttons: K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.\n\n// The ring form is Daniel Abrams and Steven Strogatz's (2004): N identical\n// phase oscillators at x_j = -pi + 2 pi j / N, each pulled by all the others\n// through the kernel G(x) = (1 + A cos x) / 2 pi and a phase lag alpha,\n//   dθ_j/dt = ω - (2 pi / N) Σ_k G(x_j - x_k) sin(θ_j - θ_k + α),\n// their A = 0.995 and their start θ_j = 6 r_j exp(-0.76 x_j²), r_j uniform\n// in [-1/2, 1/2]. Every oscillator obeys the same law, yet the ring splits\n// into a stretch that moves in step and a stretch whose phases scatter.\nconst W = 64, H = 128, N = 256, PER = N / W, TOP = 20, Y0 = TOP + 1, ROWS = H - Y0;\nconst A = 0.995, STEP = 0.1, MAXSTEPS = 30, RATE = 4, HUE0 = 0.55;\nconst { min, floor, round, sqrt, sin, cos, exp, atan2, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (v, m) => v - m * round(v / m);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A new random draw of the Abrams-Strogatz start, its scattered hump at x0.\n// The part in step forms on the calm side, opposite x0; on the first draw\n// the columns are set to put it in the middle of the panel.\nfunction seed(P, x0, place) {\n  for (let j = 0; j \u003c N; j++) {\n    const d = wrap(-PI + (TAU * j) / N - x0, TAU);\n    P.th[j] = 6 * (Math.random() - 0.5) * exp(-0.76 * d * d);\n  }\n  if (place) {\n    P.xs = ((x0 + 2 * PI) / TAU) * W;\n    P.xs -= W * floor(P.xs / W);\n    P.col = round(P.xs) % W;\n  }\n  P.dead = 0;\n  P.age = 0;\n  P.lag = 84;\n}\n\n// The sum over k is the local field R_j e^{iΘ_j} = (1/N) Σ_k (1 + A cos(x_j\n// - x_k)) e^{iθ_k}, and with cos(x_j - x_k) = cos x_j cos x_k + sin x_j sin\n// x_k it is three sums over the ring, Σ e^{iθ}, Σ cos x e^{iθ} and\n// Σ sin x e^{iθ}, read off at each x_j: O(N) a step instead of O(N²). Then\n// dθ_j/dt = ω - R_j sin(θ_j - Θ_j + α).\nfunction deriv(P, t, d, frame) {\n  const { cx, sx, c: C, s: S } = P;\n  let p0r = 0, p0i = 0, pcr = 0, pci = 0, psr = 0, psi = 0;\n  for (let k = 0; k \u003c N; k++) {\n    const c = cos(t[k]), s = sin(t[k]);\n    C[k] = c;\n    S[k] = s;\n    p0r += c;\n    p0i += s;\n    pcr += cx[k] * c;\n    pci += cx[k] * s;\n    psr += sx[k] * c;\n    psi += sx[k] * s;\n  }\n  const ca = P.ca, sa = P.sa;\n  let wx = 0, wy = 0;\n  for (let j = 0; j \u003c N; j++) {\n    const rr = (p0r + A * (cx[j] * pcr + sx[j] * psr)) / N, ri = (p0i + A * (cx[j] * pci + sx[j] * psi)) / N;\n    const c = C[j], s = S[j];\n    d[j] = -((s * ca + c * sa) * rr - (c * ca - s * sa) * ri);\n    if (frame) {\n      const r2 = rr * rr + ri * ri;\n      wx += r2 * cx[j];\n      wy += r2 * sx[j];\n    }\n  }\n  if (frame) {\n    // The field is strongest over the part in step. Its centre xc, and the\n    // field's phase there, give the frame that turns with that part.\n    const xc = atan2(wy, wx), cc = cos(xc), sc = sin(xc);\n    P.xc = xc;\n    P.phi = atan2(p0i + A * (cc * pci + sc * psi), p0r + A * (cc * pcr + sc * psr));\n    P.z = sqrt(p0r * p0r + p0i * p0i) / N;\n  }\n}\n\n// One RK4 step of 0.1. The right side is never more than 1 + A in size, so\n// the step is far inside RK4's reach at every Lag. Before it the whole ring\n// is turned back by the phase of the part in step, which the equation does\n// not see (every oscillator is the same, so ω is free): that part's phases\n// stand still and only the scattered ones move.\nfunction step(P) {\n  const { th, k1, k2, k3, k4, tmp } = P, h = STEP;\n  // Each draw grows at 84 degrees for 100 time units, and only then does\n  // the lag move to the knob, a tenth of a degree per time unit. From the\n  // Abrams-Strogatz start right at 80 degrees, 6 draws in 30 fell into step\n  // everywhere within 65 time units; grown at 84 and brought down to 80 (or\n  // up to 88) after, none of 30 did in 1000. A sudden jump from 88 to 80 on\n  // a grown chimera ended 1 of 20, hence the slow turn.\n  P.age += h;\n  const want = P.age \u003c 100 ? 84 : P.lagKnob;\n  P.lag += cl(want - P.lag, -0.01, 0.01);\n  P.ca = cos((P.lag * PI) / 180);\n  P.sa = sin((P.lag * PI) / 180);\n  deriv(P, th, k1, true);\n  const phi = P.phi;\n  for (let j = 0; j \u003c N; j++) th[j] -= phi;\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k1[j];\n  deriv(P, tmp, k2, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k2[j];\n  deriv(P, tmp, k3, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + h * k3[j];\n  deriv(P, tmp, k4, false);\n  for (let j = 0; j \u003c N; j++) th[j] = wrap(th[j] + (h / 6) * (k1[j] + 2 * k2[j] + 2 * k3[j] + k4[j]), TAU);\n  // With 256 oscillators the chimera wanders round the ring, a few columns\n  // in a thousand time units. The history keeps the ring's own columns, so\n  // the wandering shows as a lean in the band; the panel as a whole slides\n  // a column after it once the part in step is three columns off the middle.\n  P.xs = wrap(P.xs + 0.002 * wrap(((P.xc + PI) / TAU) * W - P.xs, W), W);\n  if (abs(wrap(P.xs - P.col, W)) > 3) P.col = ((round(P.xs) % W) + W) % W;\n  // A draw can still fall into step everywhere, the other state this ring\n  // can rest in. After 30 time units of that, a new draw.\n  P.dead = P.z > 0.99 ? P.dead + h : 0;\n  if (P.dead > 30) seed(P, (TAU * P.col) / W, false);\n}\n\nconst osc = (P, c, k) => ((((P.col - W / 2 + c) * PER + k) % N) + N) % N;\n\n// A row of the history keeps one oscillator of every four, in the ring's\n// own columns.\nfunction record(P) {\n  P.head = (P.head + ROWS - 1) % ROWS;\n  const o = P.head * W;\n  for (let c = 0; c \u003c W; c++) P.hist[o + c] = P.th[c * PER + 1];\n}\n\nexport function setup(params) {\n  const cx = new Float64Array(N), sx = new Float64Array(N);\n  for (let j = 0; j \u003c N; j++) (cx[j] = cos(-PI + (TAU * j) / N)), (sx[j] = sin(-PI + (TAU * j) / N));\n  const f = () => new Float64Array(N);\n  params.s = {\n    cx, sx, th: f(), k1: f(), k2: f(), k3: f(), k4: f(), tmp: f(), c: f(), s: f(),\n    ca: 0, sa: 1, lag: 84, lagKnob: 80, age: 0, xc: PI, phi: 0, z: 0, xs: 0, col: 0, dead: 0,\n    hist: new Float32Array(ROWS * W), head: 0, clock: 0, since: 0, fresh: true,\n    hue: 0, speed: 2, stride: 1, pal: new Float32Array(256 * 3), dot: new Float32Array(256 * 3), palHue: NaN,\n    acc: new Float32Array(W * TOP * 3),\n  };\n  seed(params.s, 0, true);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 80, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.lagKnob = cl(k[2], 80, 88);\n  P.stride = cl(k[3], 0.8, 4);\n  if (P.fresh) {\n    // 150 time units to grow and reach the knob's lag; a draw that still\n    // falls into step is drawn again. Then the whole history is run once so\n    // the panel opens full: 5,780 steps at Stride 4, about 0.3 s once.\n    for (let tries = 0; tries \u003c 8; tries++) {\n      if (tries) seed(P, 0, true);\n      for (let i = 0; i \u003c 1500; i++) step(P);\n      if (P.z \u003c 0.9) break;\n    }\n    for (let r = 0; r \u003c ROWS; r++) {\n      for (let t = 0; t \u003c P.stride - 1e-9; t += STEP) step(P);\n      record(P);\n    }\n    P.fresh = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) seed(P, (TAU * P.col) / W, false);\n  P.clock += d * RATE * P.speed;\n  let n = 0;\n  for (; P.clock >= STEP && n \u003c MAXSTEPS; n++) {\n    step(P);\n    P.clock -= STEP;\n    P.since += STEP;\n    if (P.since >= P.stride - 1e-9) {\n      record(P);\n      P.since -= P.stride;\n    }\n  }\n  if (n === MAXSTEPS) P.clock = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pal, dot, hist, th, acc } = P;\n  if (P.palHue !== P.hue) {\n    // Phase round the colour wheel. In the history the brightness also\n    // follows the phase, full at the phase of the part in step and dark\n    // half a turn away, so each slip of a scattered oscillator is a dark\n    // stroke through its column.\n    for (let i = 0; i \u003c 256; i++) {\n      const t = (i / 256) * TAU;\n      hsv(P.hue + HUE0 + i / 256, 0.85, 0.5 + 0.5 * cos(t), pal, i * 3);\n      hsv(P.hue + HUE0 + i / 256, 0.75, 1, dot, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The present, in the top 20 rows: every oscillator a dot, its phase up\n  // and down against its place on the ring.\n  acc.fill(0);\n  for (let c = 0; c \u003c W; c++)\n    for (let k = 0; k \u003c PER; k++) {\n      const t = th[osc(P, c, k)], y = TOP / 2 - 0.5 + (t / PI) * (TOP / 2 - 0.5), y0 = floor(y), f = y - y0;\n      const q = (floor((t / TAU + 1) * 256) & 255) * 3;\n      if (y0 >= 0) {\n        const o = (y0 * W + c) * 3, a = 0.7 * (1 - f);\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n      if (y0 + 1 \u003c TOP) {\n        const o = ((y0 + 1) * W + c) * 3, a = 0.7 * f;\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n    }\n  for (let y = 0, o = 0; y \u003c TOP; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, acc[o] * 255), min(255, acc[o + 1] * 255), min(255, acc[o + 2] * 255));\n  for (let x = 0; x \u003c W; x++) display.setPixel(x, TOP, 0, 0, 0);\n  // The past: one row per moment, the newest at the top.\n  for (let r = 0; r \u003c ROWS; r++) {\n    const o = ((P.head + r) % ROWS) * W, c0 = P.col + W / 2;\n    for (let x = 0; x \u003c W; x++) {\n      const q = (floor((hist[o + ((c0 + x) % W)] / TAU + 1) * 256) & 255) * 3;\n      display.setPixel(x, Y0 + r, pal[q] * 255, pal[q + 1] * 255, pal[q + 2] * 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green."},{"name":"Speed","min":0.2,"max":3,"about":"Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second."},{"name":"Lag","min":80,"max":88,"about":"The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls."},{"name":"Stride","min":0.8,"max":4,"about":"Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle."}],"start":[0,2,80,0.8],"measures":{"motion":0.871,"detail":0.1412,"edges":0.5685,"complexity":1.5664,"coverage":0.8292,"colour":0.6214,"drift":0.032},"knobResponse":[0.5105,0.2386,0.2458,0.1784]},{"slug":"chladni","title":"Chladni","family":"wave","round":16,"note":"세운 놋쇠 판에 뿌린 모래가 떨리는 자리에서 튀어 나가 가만히 있는 마디선에 모여 클라드니 도형을 그려요. 5초마다 활을 다시 그으면 모래가 흩어졌다가 새 모드의 도형을 찾아가고, K4 를 올리면 석송 가루가 배 자리마다 둥근 노란 더미로 모여요.","idea":"Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.","buttons":"K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.","code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","layer":{"id":"layer-chladni","type":"code","name":"chladni","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plate","min":0,"max":1,"about":"What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel."},{"name":"Drive","min":0.8,"max":3,"about":"How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard."},{"name":"Pitch","min":-1,"max":1,"about":"Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells."},{"name":"Powder","min":0,"max":1,"about":"How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found."}],"start":[0,2,0,0.06],"measures":{"motion":0.4769,"detail":0.0916,"edges":0.6144,"complexity":1.6152,"coverage":0.9904,"colour":0.0973,"drift":0.0566},"knobResponse":[0.0837,0.1502,0.16,0.131]},{"slug":"chromatography","title":"Chromatography","family":"chemistry","round":20,"note":"실험대 위 유리 수조에 거름종이 띠가 매달려 발끝을 용매에 담그고, 젖은 앞선이 올라가는 동안 연필 출발선의 잉크 점이 색 띠로 갈라져 저마다 다른 빠르기로 올라가요. K1 을 누르면 띠를 들어 올리고 새 띠를 걸어요.","idea":"Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.","buttons":"K1 tap lifts the strips out of the tank now and hangs fresh ones.","code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","layer":{"id":"layer-chromatography","type":"code","name":"chromatography","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps."},{"name":"Strips","min":3,"max":6,"about":"How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6."},{"name":"Solvent","min":-1,"max":1,"about":"How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker."}],"start":[0,2,3,0.06],"measures":{"motion":0.0352,"detail":0.0646,"edges":0.3051,"complexity":1.2207,"coverage":0.7347,"colour":0.2232,"drift":0.0399},"knobResponse":[0.0454,0.0548,0.2236,0.048]},{"slug":"chrome-powder","title":"Chrome Powder","family":"cosmetic","round":32,"note":"판 전체가 크롬 파우더를 얹은 젤 한 면이에요. 보이지 않는 어플리케이터가 작은 원을 그리며 위에서 아래로 문지르면 무광 회색 가루가 로즈골드 거울로 바뀌고, 거울에는 소프트박스의 흰 띠와 검은 반사판 띠가 물결지며 비쳐요. 다 덮이면 빛이 비스듬히 한 번 쓸고, 새 가루가 위에서부터 다시 덮여요.","idea":"The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.","buttons":"K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.","code":"// ===== Patternflow pattern =====\n// Title:   Chrome Powder\n// Family:  cosmetic\n// Idea:    The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after chrome powder buffed onto a gel top coat and the softbox reflections of product photography\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1\n//\n// Knob 1: Hue. The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac.\n// Knob 2: Speed. At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast.\n// Knob 3: Holo. At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own.\n// Knob 4: Grain. The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1.\n// Buttons: K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, exp, abs, min, max, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// Smooth value noise on a coarse grid of random numbers, sampled per LED.\nfunction field(cell, amp) {\n  const gw = floor(W / cell) + 3, gh = floor(H / cell) + 3, g = new Float32Array(gw * gh);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      tx = tx * tx * (3 - 2 * tx);\n      ty = ty * ty * (3 - 2 * ty);\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = amp * (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty);\n    }\n  return out;\n}\n\n// The coat's surface: bowed across the panel and a little down it, with a\n// low waviness of the gel, so the horizon is one wavy line across. Stored as the reflected direction a level eye\n// sees in it, rx across and ry down, and a soft light term for the powder.\nfunction surface(P) {\n  const w1 = field(22, 1), w2 = field(9, 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const u = (x - 31.5) / 32, v = (y - 63.5) / 64;\n      let sx = 0.44 * u + 0.03 * sin(y * 0.07);\n      let sy = 0.2 * v + 0.008 * sin(x * 0.24 + y * 0.05);\n      const xr = min(x + 1, W - 1), yr = min(y + 1, H - 1);\n      sx += 0.09 * (w1[y * W + xr] - w1[i]) * 22 / 4 + 0.05 * (w2[y * W + xr] - w2[i]) * 9 / 4;\n      // Down the panel the waviness is kept small so the horizon stays one line.\n      sy += 0.015 * (w1[yr * W + x] - w1[i]) * 22 / 4 + 0.01 * (w2[yr * W + x] - w2[i]) * 9 / 4;\n      P.rx[i] = 2 * sx;\n      P.ry[i] = 2 * sy;\n      P.lam[i] = cl(0.78 - 0.5 * sx + 0.35 * sy, 0.35, 1);\n    }\n}\n\nconst edge = (t) => cl(t / 0.025 + 0.5, 0, 1);\nconst box = (u, a, b, v, c, d) => edge(u - a) * edge(b - u) * edge(v - c) * edge(d - v);\n\n// The studio the mirror sees, the way chrome is shot: a pale sweep of wall,\n// lighter towards the horizon, with a tall softbox, black flags beside it\n// and two strip lights, all sharp at their edges; below the horizon a dark\n// floor with faint copies of the lights. u wraps every 2.4 as the lights\n// slide.\nconst HZ = 0.22;\nfunction env(u, v) {\n  u -= 2.4 * floor(u / 2.4 + 0.5);\n  if (v > HZ) return 0.1 + 0.05 * (1 - sm(HZ, 0.7, v)) + 0.14 * box(u, -0.18, 0.12, v, HZ, 1) + 0.1 * box(u, 0.45, 0.5, v, HZ, 1);\n  let I = (0.56 + 0.22 * sm(-0.8, HZ, v)) * (0.88 + 0.12 * cos(u * 2.6));\n  // Black flags: one wide beside the softbox, two narrow further out.\n  I *= 1 - 0.94 * box(u, 0.12, 0.3, v, -2, 2);\n  I *= 1 - 0.94 * box(u, -0.5, -0.42, v, -2, 2);\n  I *= 1 - 0.9 * box(u, 0.7, 0.76, v, -2, 2);\n  I += 0.7 * box(u, -0.18, 0.12, v, -2, HZ - 0.06) * (0.85 + 0.15 * cos((u + 0.03) * 10));\n  I += 0.6 * box(u, 0.45, 0.5, v, -2, HZ - 0.03);\n  I += 0.6 * box(u, -0.66, -0.62, v, -2, HZ - 0.03);\n  I += 0.55 * box(u, 0.92, 1.12, v, -0.75, HZ - 0.08);\n  I += 0.4 * box(u, -2, 2, v, -0.62, -0.55);\n  return I;\n}\n\nexport function setup(params) {\n  const P = {\n    T: 0, phase: 0, pt: 0, hue: NaN, holo: 0, grain: 0.06, speed: 2, drift: 0,\n    rx: new Float32Array(N), ry: new Float32Array(N), lam: new Float32Array(N),\n    B: new Float32Array(N), g1: new Float32Array(N), g2: null, g3: null, clump: null, soft: null, ih: new Float32Array(N), spk: new Float32Array(N), res: new Float32Array(N),\n    ax: 32, ay: -8, tint: new Float32Array(3), dust: new Float32Array(3), sweep: -1, recoat: -1,\n  };\n  surface(P);\n  for (let i = 0; i \u003c N; i++) (P.g1[i] = random() * 2 - 1), (P.spk[i] = random()), (P.res[i] = random());\n  P.g2 = field(2, 1.3);\n  P.g3 = field(3.5, 1.5);\n  P.clump = field(2.5, 1);\n  P.soft = field(16, 1);\n  for (let i = 0; i \u003c N; i++) P.ih[i] = random() * 2 - 1;\n  params.s = P;\n}\n\n// The applicator: a sponge tip 10 LEDs in radius that rubs circles 5 LEDs\n// in radius, a little under four to a crossing so they never line up, while\n// it crosses the panel and back and works down it, 12 LEDs a crossing. A\n// crossing buffs an LED about two thirds of the way; the next one finishes\n// it.\nconst COAT = 17, SWEEP = 6, RECOAT = 3, R = 10, CROSS = 1.4;\nfunction rub(P, dT) {\n  const steps = 6;\n  for (let s = 0; s \u003c steps; s++) {\n    P.pt += dT / steps;\n    const t = P.pt, ph = t / CROSS, tri = 1 - abs(1 - 2 * (ph / 2 - floor(ph / 2))) * 2;\n    const a = t * 2 * PI * 2.37;\n    const cx = 32 - 38 * tri + 5 * cos(a), cy = -12 + (172 * t) / COAT + 5 * sin(a);\n    P.ax = cx;\n    P.ay = cy;\n    const x0 = max(0, floor(cx - R)), x1 = min(W - 1, floor(cx + R) + 1), y0 = max(0, floor(cy - R)), y1 = min(H - 1, floor(cy + R) + 1);\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - cx, dy = y - cy, d2 = (dx * dx + dy * dy) / (R * R);\n        if (d2 >= 1) continue;\n        const i = y * W + x;\n        P.B[i] = min(1, P.B[i] + 2.4 * (1 - d2 * d2) * (dT / steps) * (0.7 + 0.6 * P.res[i]));\n      }\n  }\n  // It goes back over what it missed: from 18 rows above the tip up, the\n  // last patches of powder turn too.\n  const yb = min(H, floor(P.ay - 18));\n  for (let y = max(0, yb - 24); y \u003c yb; y++) {\n    const m = sm(yb, yb - 24, y) * dT * 1.5;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) P.B[i] = min(1, P.B[i] + m);\n  }\n  for (let i = 0, e = max(0, yb - 24) * W; i \u003c e; i++) P.B[i] = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  P.holo = cl(k[2], 0, 1);\n  P.grain = cl(k[3], 0, 1);\n  const dT = d * P.speed;\n  P.T += dT;\n  P.drift += dT * 0.035;\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== 2) (P.phase = 2), (P.recoat = 0);\n  if (P.phase === 0) {\n    rub(P, dT);\n    if (P.pt >= COAT) {\n      P.phase = 1;\n      P.sweep = 0;\n      P.B.fill(1);\n    }\n  } else if (P.phase === 1) {\n    P.sweep += dT / SWEEP;\n    if (P.sweep >= 1) (P.phase = 2), (P.recoat = 0), (P.sweep = -1);\n  } else {\n    // The new coat is dusted on from the top down.\n    P.recoat += dT / RECOAT;\n    const fy = -10 + 150 * P.recoat;\n    for (let y = 0; y \u003c H; y++) {\n      if (y > fy + 6) break;\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x, e = fy + 5 * P.res[i] - y;\n        if (e > 0) P.B[i] = min(P.B[i], max(0, 1 - e / 4));\n      }\n    }\n    if (P.recoat >= 1) {\n      P.B.fill(0);\n      P.phase = 0;\n      P.pt = 0;\n      P.recoat = -1;\n    }\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hsv(k[0] + 0.025, 0.4, 1, P.tint, 0);\n    hsv(k[0] + 0.025, 0.16, 1, P.dust, 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { rx, ry, lam, B, g1, g2, g3, spk, tint, dust } = P;\n  const gr = P.grain, holo = P.holo, hue = P.hue, du = P.drift;\n  const gA = 0.05 + 0.21 * gr, gm2 = sm(0.15, 0.6, gr), gm3 = sm(0.55, 1, gr);\n  const sw = P.sweep, c = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, b = B[i];\n      // The matte powder: a pale tint of the metal, lit softly, with grain.\n      let pr = 0, pg = 0, pb = 0;\n      // Each grain turns to mirror at its own point in the buffing, so the\n      // edge of the mirror is speckled, and powder that has been pressed but\n      // not yet turned takes a satin sheen.\n      // Turning Grain up also leaves clumps of powder on the finished mirror.\n      const th = 0.3 + 0.5 * P.res[i], left = gr * sm(0.35, 0.6, P.clump[i]);\n      const mir = sm(th - 0.1, th + 0.1, b) * (1 - 0.75 * left);\n      if (mir \u003c 1) {\n        const g = g1[i] * (1 - gm2) + g2[i] * gm2 * (1 - gm3) + g3[i] * gm3;\n        let v = (0.56 + 0.05 * P.soft[i] + 0.1 * sm(0.03, 0.4, b)) * lam[i] * (1 + gA * g * (1 - 0.6 * sm(0.03, 0.4, b)));\n        if (spk[i] > 0.985 - 0.02 * gr) v += 0.12 * (0.5 + 0.5 * sin(P.T * 3 + spk[i] * 400));\n        (pr = dust[0] * v), (pg = dust[1] * v), (pb = dust[2] * v);\n        if (holo > 0) {\n          // Holographic powder: every grain carries its own colour.\n          hsv(hue + 0.665 + 0.25 * P.ih[i], 0.55, v * 1.15, c, 0);\n          const hm = holo * 0.8;\n          (pr += (c[0] - pr) * hm), (pg += (c[1] - pg) * hm), (pb += (c[2] - pb) * hm);\n        }\n      }\n      let mr = 0, mg = 0, mb = 0;\n      if (mir > 0) {\n        const u = rx[i] + du, v = ry[i];\n        let I = env(u, v);\n        if (sw >= 0) {\n          const p = x * 0.6 + y - (-50 + 230 * sw);\n          I += 0.9 * exp(-(p * p) / 60);\n        }\n        // Silver-bright where the light is strong, the tint in the mids,\n        // nearly black in the floor.\n        let tr = tint[0], tg = tint[1], tb = tint[2];\n        if (holo > 0) {\n          // Aurora chrome: the tint gives way to a colour that turns with\n          // the angle of the surface, over the cool side of the wheel from\n          // the tint, so it runs violet, blue and aqua and never through the\n          // olive a dim yellow-green would be.\n          const s = sin(2.6 * rx[i] + 5 * ry[i] + 0.7 * sin(y * 0.05) + du * 4);\n          hsv(hue + 0.025 + 0.64 + 0.2 * s, 0.5, 1, c, 0);\n          (tr += (c[0] - tr) * holo), (tg += (c[1] - tg) * holo), (tb += (c[2] - tb) * holo);\n        }\n        const hi = sm(0.85, 1.3, I), L = min(1.2, I);\n        mr = L * (tr + (1 - tr) * hi);\n        mg = L * (tg + (1 - tg) * hi);\n        mb = L * (tb + (1 - tb) * hi);\n      }\n      const r = pr * (1 - mir) + mr * mir, g = pg * (1 - mir) + mg * mir, bl = pb * (1 - mir) + mb * mir;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","layer":{"id":"layer-chrome-powder","type":"code","name":"chrome-powder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chrome Powder\n// Family:  cosmetic\n// Idea:    The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after chrome powder buffed onto a gel top coat and the softbox reflections of product photography\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1\n//\n// Knob 1: Hue. The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac.\n// Knob 2: Speed. At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast.\n// Knob 3: Holo. At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own.\n// Knob 4: Grain. The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1.\n// Buttons: K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, exp, abs, min, max, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// Smooth value noise on a coarse grid of random numbers, sampled per LED.\nfunction field(cell, amp) {\n  const gw = floor(W / cell) + 3, gh = floor(H / cell) + 3, g = new Float32Array(gw * gh);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      tx = tx * tx * (3 - 2 * tx);\n      ty = ty * ty * (3 - 2 * ty);\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = amp * (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty);\n    }\n  return out;\n}\n\n// The coat's surface: bowed across the panel and a little down it, with a\n// low waviness of the gel, so the horizon is one wavy line across. Stored as the reflected direction a level eye\n// sees in it, rx across and ry down, and a soft light term for the powder.\nfunction surface(P) {\n  const w1 = field(22, 1), w2 = field(9, 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const u = (x - 31.5) / 32, v = (y - 63.5) / 64;\n      let sx = 0.44 * u + 0.03 * sin(y * 0.07);\n      let sy = 0.2 * v + 0.008 * sin(x * 0.24 + y * 0.05);\n      const xr = min(x + 1, W - 1), yr = min(y + 1, H - 1);\n      sx += 0.09 * (w1[y * W + xr] - w1[i]) * 22 / 4 + 0.05 * (w2[y * W + xr] - w2[i]) * 9 / 4;\n      // Down the panel the waviness is kept small so the horizon stays one line.\n      sy += 0.015 * (w1[yr * W + x] - w1[i]) * 22 / 4 + 0.01 * (w2[yr * W + x] - w2[i]) * 9 / 4;\n      P.rx[i] = 2 * sx;\n      P.ry[i] = 2 * sy;\n      P.lam[i] = cl(0.78 - 0.5 * sx + 0.35 * sy, 0.35, 1);\n    }\n}\n\nconst edge = (t) => cl(t / 0.025 + 0.5, 0, 1);\nconst box = (u, a, b, v, c, d) => edge(u - a) * edge(b - u) * edge(v - c) * edge(d - v);\n\n// The studio the mirror sees, the way chrome is shot: a pale sweep of wall,\n// lighter towards the horizon, with a tall softbox, black flags beside it\n// and two strip lights, all sharp at their edges; below the horizon a dark\n// floor with faint copies of the lights. u wraps every 2.4 as the lights\n// slide.\nconst HZ = 0.22;\nfunction env(u, v) {\n  u -= 2.4 * floor(u / 2.4 + 0.5);\n  if (v > HZ) return 0.1 + 0.05 * (1 - sm(HZ, 0.7, v)) + 0.14 * box(u, -0.18, 0.12, v, HZ, 1) + 0.1 * box(u, 0.45, 0.5, v, HZ, 1);\n  let I = (0.56 + 0.22 * sm(-0.8, HZ, v)) * (0.88 + 0.12 * cos(u * 2.6));\n  // Black flags: one wide beside the softbox, two narrow further out.\n  I *= 1 - 0.94 * box(u, 0.12, 0.3, v, -2, 2);\n  I *= 1 - 0.94 * box(u, -0.5, -0.42, v, -2, 2);\n  I *= 1 - 0.9 * box(u, 0.7, 0.76, v, -2, 2);\n  I += 0.7 * box(u, -0.18, 0.12, v, -2, HZ - 0.06) * (0.85 + 0.15 * cos((u + 0.03) * 10));\n  I += 0.6 * box(u, 0.45, 0.5, v, -2, HZ - 0.03);\n  I += 0.6 * box(u, -0.66, -0.62, v, -2, HZ - 0.03);\n  I += 0.55 * box(u, 0.92, 1.12, v, -0.75, HZ - 0.08);\n  I += 0.4 * box(u, -2, 2, v, -0.62, -0.55);\n  return I;\n}\n\nexport function setup(params) {\n  const P = {\n    T: 0, phase: 0, pt: 0, hue: NaN, holo: 0, grain: 0.06, speed: 2, drift: 0,\n    rx: new Float32Array(N), ry: new Float32Array(N), lam: new Float32Array(N),\n    B: new Float32Array(N), g1: new Float32Array(N), g2: null, g3: null, clump: null, soft: null, ih: new Float32Array(N), spk: new Float32Array(N), res: new Float32Array(N),\n    ax: 32, ay: -8, tint: new Float32Array(3), dust: new Float32Array(3), sweep: -1, recoat: -1,\n  };\n  surface(P);\n  for (let i = 0; i \u003c N; i++) (P.g1[i] = random() * 2 - 1), (P.spk[i] = random()), (P.res[i] = random());\n  P.g2 = field(2, 1.3);\n  P.g3 = field(3.5, 1.5);\n  P.clump = field(2.5, 1);\n  P.soft = field(16, 1);\n  for (let i = 0; i \u003c N; i++) P.ih[i] = random() * 2 - 1;\n  params.s = P;\n}\n\n// The applicator: a sponge tip 10 LEDs in radius that rubs circles 5 LEDs\n// in radius, a little under four to a crossing so they never line up, while\n// it crosses the panel and back and works down it, 12 LEDs a crossing. A\n// crossing buffs an LED about two thirds of the way; the next one finishes\n// it.\nconst COAT = 17, SWEEP = 6, RECOAT = 3, R = 10, CROSS = 1.4;\nfunction rub(P, dT) {\n  const steps = 6;\n  for (let s = 0; s \u003c steps; s++) {\n    P.pt += dT / steps;\n    const t = P.pt, ph = t / CROSS, tri = 1 - abs(1 - 2 * (ph / 2 - floor(ph / 2))) * 2;\n    const a = t * 2 * PI * 2.37;\n    const cx = 32 - 38 * tri + 5 * cos(a), cy = -12 + (172 * t) / COAT + 5 * sin(a);\n    P.ax = cx;\n    P.ay = cy;\n    const x0 = max(0, floor(cx - R)), x1 = min(W - 1, floor(cx + R) + 1), y0 = max(0, floor(cy - R)), y1 = min(H - 1, floor(cy + R) + 1);\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - cx, dy = y - cy, d2 = (dx * dx + dy * dy) / (R * R);\n        if (d2 >= 1) continue;\n        const i = y * W + x;\n        P.B[i] = min(1, P.B[i] + 2.4 * (1 - d2 * d2) * (dT / steps) * (0.7 + 0.6 * P.res[i]));\n      }\n  }\n  // It goes back over what it missed: from 18 rows above the tip up, the\n  // last patches of powder turn too.\n  const yb = min(H, floor(P.ay - 18));\n  for (let y = max(0, yb - 24); y \u003c yb; y++) {\n    const m = sm(yb, yb - 24, y) * dT * 1.5;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) P.B[i] = min(1, P.B[i] + m);\n  }\n  for (let i = 0, e = max(0, yb - 24) * W; i \u003c e; i++) P.B[i] = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  P.holo = cl(k[2], 0, 1);\n  P.grain = cl(k[3], 0, 1);\n  const dT = d * P.speed;\n  P.T += dT;\n  P.drift += dT * 0.035;\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== 2) (P.phase = 2), (P.recoat = 0);\n  if (P.phase === 0) {\n    rub(P, dT);\n    if (P.pt >= COAT) {\n      P.phase = 1;\n      P.sweep = 0;\n      P.B.fill(1);\n    }\n  } else if (P.phase === 1) {\n    P.sweep += dT / SWEEP;\n    if (P.sweep >= 1) (P.phase = 2), (P.recoat = 0), (P.sweep = -1);\n  } else {\n    // The new coat is dusted on from the top down.\n    P.recoat += dT / RECOAT;\n    const fy = -10 + 150 * P.recoat;\n    for (let y = 0; y \u003c H; y++) {\n      if (y > fy + 6) break;\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x, e = fy + 5 * P.res[i] - y;\n        if (e > 0) P.B[i] = min(P.B[i], max(0, 1 - e / 4));\n      }\n    }\n    if (P.recoat >= 1) {\n      P.B.fill(0);\n      P.phase = 0;\n      P.pt = 0;\n      P.recoat = -1;\n    }\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hsv(k[0] + 0.025, 0.4, 1, P.tint, 0);\n    hsv(k[0] + 0.025, 0.16, 1, P.dust, 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { rx, ry, lam, B, g1, g2, g3, spk, tint, dust } = P;\n  const gr = P.grain, holo = P.holo, hue = P.hue, du = P.drift;\n  const gA = 0.05 + 0.21 * gr, gm2 = sm(0.15, 0.6, gr), gm3 = sm(0.55, 1, gr);\n  const sw = P.sweep, c = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, b = B[i];\n      // The matte powder: a pale tint of the metal, lit softly, with grain.\n      let pr = 0, pg = 0, pb = 0;\n      // Each grain turns to mirror at its own point in the buffing, so the\n      // edge of the mirror is speckled, and powder that has been pressed but\n      // not yet turned takes a satin sheen.\n      // Turning Grain up also leaves clumps of powder on the finished mirror.\n      const th = 0.3 + 0.5 * P.res[i], left = gr * sm(0.35, 0.6, P.clump[i]);\n      const mir = sm(th - 0.1, th + 0.1, b) * (1 - 0.75 * left);\n      if (mir \u003c 1) {\n        const g = g1[i] * (1 - gm2) + g2[i] * gm2 * (1 - gm3) + g3[i] * gm3;\n        let v = (0.56 + 0.05 * P.soft[i] + 0.1 * sm(0.03, 0.4, b)) * lam[i] * (1 + gA * g * (1 - 0.6 * sm(0.03, 0.4, b)));\n        if (spk[i] > 0.985 - 0.02 * gr) v += 0.12 * (0.5 + 0.5 * sin(P.T * 3 + spk[i] * 400));\n        (pr = dust[0] * v), (pg = dust[1] * v), (pb = dust[2] * v);\n        if (holo > 0) {\n          // Holographic powder: every grain carries its own colour.\n          hsv(hue + 0.665 + 0.25 * P.ih[i], 0.55, v * 1.15, c, 0);\n          const hm = holo * 0.8;\n          (pr += (c[0] - pr) * hm), (pg += (c[1] - pg) * hm), (pb += (c[2] - pb) * hm);\n        }\n      }\n      let mr = 0, mg = 0, mb = 0;\n      if (mir > 0) {\n        const u = rx[i] + du, v = ry[i];\n        let I = env(u, v);\n        if (sw >= 0) {\n          const p = x * 0.6 + y - (-50 + 230 * sw);\n          I += 0.9 * exp(-(p * p) / 60);\n        }\n        // Silver-bright where the light is strong, the tint in the mids,\n        // nearly black in the floor.\n        let tr = tint[0], tg = tint[1], tb = tint[2];\n        if (holo > 0) {\n          // Aurora chrome: the tint gives way to a colour that turns with\n          // the angle of the surface, over the cool side of the wheel from\n          // the tint, so it runs violet, blue and aqua and never through the\n          // olive a dim yellow-green would be.\n          const s = sin(2.6 * rx[i] + 5 * ry[i] + 0.7 * sin(y * 0.05) + du * 4);\n          hsv(hue + 0.025 + 0.64 + 0.2 * s, 0.5, 1, c, 0);\n          (tr += (c[0] - tr) * holo), (tg += (c[1] - tg) * holo), (tb += (c[2] - tb) * holo);\n        }\n        const hi = sm(0.85, 1.3, I), L = min(1.2, I);\n        mr = L * (tr + (1 - tr) * hi);\n        mg = L * (tg + (1 - tg) * hi);\n        mb = L * (tb + (1 - tb) * hi);\n      }\n      const r = pr * (1 - mir) + mr * mir, g = pg * (1 - mir) + mg * mir, bl = pb * (1 - mir) + mb * mir;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast."},{"name":"Holo","min":0,"max":1,"about":"At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own."},{"name":"Grain","min":0,"max":1,"about":"The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.1725,"detail":0.0415,"edges":0.2939,"complexity":1.5841,"coverage":0.922,"colour":0.1297,"drift":0.2833},"knobResponse":[0.0785,0.1385,0.1031,0.0512]},{"slug":"circuit-board","title":"Circuit Board","family":"circuit","round":17,"note":"회로 기판이 패널을 다 채우고, Lee 의 미로 라우터가 프로세서와 메모리 둘, 플래시, 크리스털, 금도금 단자 사이에 구리 선 47개를 곧게, 또 45도로 깔아요. 버스에는 펄스 열이 나란히 달리고 바쁜 선은 신호 색으로 데워지며, K1 을 누르면 기판이 꺼졌다가 부팅해요.","idea":"A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.","buttons":"K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.","code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","layer":{"id":"layer-circuit-board","type":"code","name":"circuit-board","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mask","min":0,"max":1,"about":"The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1."},{"name":"Clock","min":0.5,"max":4,"about":"How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice."},{"name":"Traffic","min":0,"max":1,"about":"At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back."},{"name":"Glow","min":0,"max":1,"about":"How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three."}],"start":[0,2,0,0.06],"measures":{"motion":0.2002,"detail":0.119,"edges":0.678,"complexity":0.7577,"coverage":0.9814,"colour":0.2535,"drift":0.0471},"knobResponse":[0.2116,0.0618,0.0696,0.0621]},{"slug":"circulation","title":"Circulation","family":"body","round":22,"note":"해부도처럼 머리부터 발끝까지 선 사람이에요. 심장이 뛸 때마다 붉은 피의 맥이 동맥을 타고 머리와 손발 끝까지 번져 가고, 푸른 정맥혈은 심장 쪽으로 거슬러 올라오며 폐가 박동과 숨에 분홍빛으로 물들어요. 발치의 모니터에는 심전도와 맥박 수가 떠요.","idea":"A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.","buttons":"K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","layer":{"id":"layer-circulation","type":"code","name":"circulation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Chart","min":0,"max":1,"about":"The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1."},{"name":"Rate","min":1,"max":5,"about":"The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other."},{"name":"Detail","min":1,"max":4,"about":"How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4."},{"name":"Effort","min":0,"max":1,"about":"From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood."}],"start":[0,2,1,0.06],"measures":{"motion":0.3125,"detail":0.0474,"edges":0.3512,"complexity":1.0533,"coverage":0.3719,"colour":0.2033,"drift":0.0315},"knobResponse":[0.1504,0.046,0.0247,0.0525]},{"slug":"clay-mask","title":"Clay Mask","family":"cosmetic","round":32,"note":"판 전체에 스패출러로 바른 로즈 클레이가 얇은 곳부터 말라 들어가요. 짙은 라즈베리색 윤이 먼저 빠지고 옅은 블러시색 무광이 섬처럼 번지다가, 두꺼운 결만 마지막까지 짙은 줄로 남아요. 8초쯤 다 마르면 물 띠가 위에서 아래로 2초 동안 지나가며 다시 적셔요.","idea":"A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.","buttons":"K1 tap sends the band of water down the panel now, unless one is already on its way.","code":"// ===== Patternflow pattern =====\n// Title:   Clay Mask\n// Family:  cosmetic\n// Idea:    A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the clay face mask that pales as it dries\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet.\n// Knob 2: Speed. At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower.\n// Knob 3: Thickness. At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds.\n// Knob 4: Gloss. Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch.\n// Buttons: K1 tap sends the band of water down the panel now, unless one is already on its way.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, 0..1.\nfunction vn(x, y, s) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  const u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(i, j, s), b = hash(i + 1, j, s), c = hash(i, j + 1, s), d = hash(i + 1, j + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The clay as it was laid on: a base coat and spatula strokes across it,\n// each piling a ridge at its edges and scraping fine lines along its length.\n// Baked once: thickness, its slope, the order the LEDs dry in, the delay of\n// the rewetting sweep and the dry grain.\nfunction lay(P) {\n  const R = Math.random;\n  const h = new Float32Array(N), hb = new Float32Array(N), key = new Float32Array(N);\n  const strokes = [];\n  for (let k = 0; k \u003c 7; k++) {\n    const th = 1.05 + (R() - 0.5) * 0.5;\n    strokes.push({\n      tx: cos(th), ty: sin(th), nx: -sin(th), ny: cos(th),\n      c: -62 + k * 20 + (R() - 0.5) * 8, w: 24 + R() * 10, t: 0.45 + R() * 0.2, tilt: (R() - 0.5) * 0.3,\n      f1: 0.9 + R() * 0.6, f2: 2.1 + R() * 0.9, p1: R() * 6.3, p2: R() * 6.3, e1: R() * 6.3, e2: R() * 6.3, run: 0.0025 + R() * 0.002,\n    });\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5, py = y - 63.5;\n      let v = 0.42 + 0.12 * vn(x / 9, y / 9, 3), sc = 0;\n      for (const s of strokes) {\n        const a = px * s.tx + py * s.ty, n = px * s.nx + py * s.ny;\n        const edge = s.w / 2 + 2.2 * sin(a * 0.08 + s.e1) + 1.2 * sin(a * 0.21 + s.e2);\n        const off = abs(n - s.c);\n        if (off > edge) continue;\n        const u = (n - s.c) / edge, rim = edge - off;\n        v = s.t + s.tilt * u - s.run * a + 0.32 * exp(-(rim * rim) / 3.2);\n        sc = 0.027 * sin(n * s.f1 + s.p1) * (0.6 + 0.4 * sin(a * 0.05 + s.p2)) + 0.014 * sin(n * s.f2 + s.p2);\n      }\n      hb[y * W + x] = v;\n      h[y * W + x] = v + sc + 0.05 * (vn(x / 4, y / 4, 5) - 0.5);\n    }\n  // The order of drying follows the thickness blurred over a few LEDs, so the\n  // front creeps round the ridges instead of fraying along every scrape.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sum = 0, n = 0;\n      for (let j = -2; j \u003c= 2; j++)\n        for (let i = -2; i \u003c= 2; i++) {\n          const xx = x + i, yy = y + j;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          sum += hb[yy * W + xx];\n          n++;\n        }\n      key[y * W + x] = 0.5 * sum / n + 0.5 * hb[y * W + x] + 0.16 * (vn(x / 7, y / 7, 9) - 0.5) + 0.06 * (vn(x / 2.5, y / 2.5, 10) - 0.5);\n    }\n  const gx = new Float32Array(N), gy = new Float32Array(N), rank = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (h[y * W + min(W - 1, x + 1)] - h[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (h[min(H - 1, y + 1) * W + x] - h[max(0, y - 1) * W + x]) / 2;\n    }\n  // Thin clay dries first: the LEDs in order of thickness, as a rank 0..1.\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => key[a] - key[b]);\n  order.forEach((i, r) => (rank[i] = r / (N - 1)));\n  const delay = new Float32Array(N), grain = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      delay[i] = (y + 4 + 3 * sin(x * 0.13 + 1.1) + 3 * vn(x / 5, y / 5, 11)) / (H + 10);\n      grain[i] = 0.6 * (R() - 0.5) + 0.4 * (vn(x / 1.7, y / 1.7, 13) - 0.5);\n    }\n  // Three hairline cracks, each a short wandering line from a thick spot,\n  // numbered 0..1 along its length so it opens from one end.\n  const crack = new Float32Array(N);\n  for (let n = 0; n \u003c 3; n++) {\n    let best = 0, bi = 0;\n    for (let t = 0; t \u003c 60; t++) {\n      const i = floor(R() * N);\n      if (h[i] > best && !crack[i]) (best = h[i]), (bi = i);\n    }\n    let x = bi % W, y = floor(bi / W), a = R() * 2 * PI;\n    const len = 14 + floor(R() * 12);\n    for (let s = 0; s \u003c len; s++) {\n      const i = floor(y) * W + floor(x);\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) break;\n      crack[i] = max(crack[i], 0.02 + s / len);\n      a += (R() - 0.5) * 0.9;\n      x += cos(a) * 0.9;\n      y += sin(a) * 0.9;\n    }\n  }\n  Object.assign(P, { h, gx, gy, rank, delay, grain, crack });\n}\n\nexport function setup(params) {\n  params.s = {\n    c: 0, hue: 0, speed: 2, thick: 0, gloss: 0.06, ts: -0.5, tk: 0, ps: -0.5, pk: 0,\n  };\n  lay(params.s);\n}\n\n// Drying times in clock seconds (one a second at Speed 2): an LED of rank r\n// starts to dry at age A0 + r * span and is dry after band more.\nconst A0 = 1.0, SWEEP = 2.2, HOLD = 1.2;\nconst spanOf = (t) => 6 + (t \u003c 0 ? 3.5 * t : 5 * t);\nconst bandOf = (t) => 1.6 + (t \u003c 0 ? -1.2 * t : -0.6 * t);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], -1, 1);\n  P.gloss = cl(k[3], -1, 1);\n  P.c += d * P.speed * 0.5;\n  const span = spanOf(P.thick), band = bandOf(P.thick);\n  const sweeping = P.c \u003c P.ts + P.tk * SWEEP;\n  const allDry = P.c - (P.ts + P.tk * SWEEP) > A0 + span + band + HOLD;\n  if (!sweeping && (allDry || (input.btnPressed && input.btnPressed[0]))) {\n    (P.ps = P.ts), (P.pk = P.tk), (P.ts = P.c), (P.tk = 1);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { h, gx, gy, rank, delay, grain, crack } = P;\n  const span = spanOf(P.thick), band = bandOf(P.thick), c = P.c;\n  const relief = 2.4 + 1.6 * P.thick, g = P.gloss;\n  // A lamp above the panel drifts slowly, and the wet clay mirrors it as a\n  // soft spot that the ridges and scrapes break into streaks.\n  const la = 0.3 * c;\n  const Lx = 32 + 46 * sin(la), Ly = 60 + 70 * sin(0.63 * la + 1.2), Lz = 150;\n  const Ex = 32, Ey = 70, Ez = 260;\n  const shin = 14 + 30 * (g + 1), specK = 0.25 + 0.5 * (g + 1) / 2;\n  const hue = P.hue + 0.935;\n  const wet = [0, 0, 0], dry = [0, 0, 0], deep = [0, 0, 0];\n  hsv(hue, 0.64 + 0.08 * g, 0.56 - 0.05 * g, wet, 0);\n  hsv(hue + 0.01, 0.12, 0.92, dry, 0);\n  hsv(hue + 0.005, 0.3, 0.84, deep, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const tNew = P.ts + P.tk * SWEEP * delay[i];\n      const fresh = c >= tNew;\n      const tw = fresh ? tNew : P.ps + P.pk * SWEEP * delay[i];\n      const age = c - tw;\n      const D = cl((age - A0 - rank[i] * span) / band, 0, 1);\n      const nx = -gx[i] * relief, ny = -gy[i] * relief, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n      let lx = Lx - x, ly = Ly - y, lz = Lz;\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const dif = (nx * lx + ny * ly + lz) * nl;\n      const nh = max(0, (nx * hx + ny * hy + hz) * hi * nl);\n      // Wet: deep colour shaded by the relief, with the sheen. The sheen\n      // goes first as the surface turns matte, then the colour lifts.\n      const shiny = 1 - sm(0, 0.3, D), lift = sm(0.12, 1, D);\n      // Behind the rewetting band the clay carries a film of water, with a\n      // bright line where the band's edge is.\n      const water = fresh && P.tk ? sm(1.1, 0, age) : 0, rim = fresh && P.tk ? sm(0.06, 0, age) : 0;\n      const spec = (specK * shiny * nh ** shin + water * (0.35 * nh ** 90 + 0.05) + 0.3 * rim) * 255;\n      const shade = (0.62 + 0.45 * dif) * (1 - 0.18 * water);\n      // Dry: pale and chalky, the thick ridges keeping a little more colour.\n      const th = sm(0.45, 0.85, h[i]), gr = 1 + 0.13 * grain[i], ds = (0.84 + 0.2 * dif) * gr;\n      let dr = (dry[0] + (deep[0] - dry[0]) * th) * ds, dg = (dry[1] + (deep[1] - dry[1]) * th) * ds, db = (dry[2] + (deep[2] - dry[2]) * th) * ds;\n      // A hairline crack opens where a crack runs, once that spot is dry.\n      const ck = crack[i];\n      if (ck > 0) {\n        const k = sm(0.6 + 1.4 * ck, 0.9 + 1.4 * ck, age - A0 - rank[i] * span - band);\n        const f = 0.55 * k;\n        (dr += (deep[0] * 0.7 - dr) * f), (dg += (deep[1] * 0.7 - dg) * f), (db += (deep[2] * 0.7 - db) * f);\n      }\n      const wr = wet[0] * shade, wg = wet[1] * shade, wb = wet[2] * shade;\n      const r = wr + (dr - wr) * lift + spec;\n      const gg = wg + (dg - wg) * lift + spec;\n      const b = wb + (db - wb) * lift + spec * 0.96;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","layer":{"id":"layer-clay-mask","type":"code","name":"clay-mask","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Clay Mask\n// Family:  cosmetic\n// Idea:    A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the clay face mask that pales as it dries\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet.\n// Knob 2: Speed. At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower.\n// Knob 3: Thickness. At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds.\n// Knob 4: Gloss. Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch.\n// Buttons: K1 tap sends the band of water down the panel now, unless one is already on its way.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, 0..1.\nfunction vn(x, y, s) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  const u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(i, j, s), b = hash(i + 1, j, s), c = hash(i, j + 1, s), d = hash(i + 1, j + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The clay as it was laid on: a base coat and spatula strokes across it,\n// each piling a ridge at its edges and scraping fine lines along its length.\n// Baked once: thickness, its slope, the order the LEDs dry in, the delay of\n// the rewetting sweep and the dry grain.\nfunction lay(P) {\n  const R = Math.random;\n  const h = new Float32Array(N), hb = new Float32Array(N), key = new Float32Array(N);\n  const strokes = [];\n  for (let k = 0; k \u003c 7; k++) {\n    const th = 1.05 + (R() - 0.5) * 0.5;\n    strokes.push({\n      tx: cos(th), ty: sin(th), nx: -sin(th), ny: cos(th),\n      c: -62 + k * 20 + (R() - 0.5) * 8, w: 24 + R() * 10, t: 0.45 + R() * 0.2, tilt: (R() - 0.5) * 0.3,\n      f1: 0.9 + R() * 0.6, f2: 2.1 + R() * 0.9, p1: R() * 6.3, p2: R() * 6.3, e1: R() * 6.3, e2: R() * 6.3, run: 0.0025 + R() * 0.002,\n    });\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5, py = y - 63.5;\n      let v = 0.42 + 0.12 * vn(x / 9, y / 9, 3), sc = 0;\n      for (const s of strokes) {\n        const a = px * s.tx + py * s.ty, n = px * s.nx + py * s.ny;\n        const edge = s.w / 2 + 2.2 * sin(a * 0.08 + s.e1) + 1.2 * sin(a * 0.21 + s.e2);\n        const off = abs(n - s.c);\n        if (off > edge) continue;\n        const u = (n - s.c) / edge, rim = edge - off;\n        v = s.t + s.tilt * u - s.run * a + 0.32 * exp(-(rim * rim) / 3.2);\n        sc = 0.027 * sin(n * s.f1 + s.p1) * (0.6 + 0.4 * sin(a * 0.05 + s.p2)) + 0.014 * sin(n * s.f2 + s.p2);\n      }\n      hb[y * W + x] = v;\n      h[y * W + x] = v + sc + 0.05 * (vn(x / 4, y / 4, 5) - 0.5);\n    }\n  // The order of drying follows the thickness blurred over a few LEDs, so the\n  // front creeps round the ridges instead of fraying along every scrape.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sum = 0, n = 0;\n      for (let j = -2; j \u003c= 2; j++)\n        for (let i = -2; i \u003c= 2; i++) {\n          const xx = x + i, yy = y + j;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          sum += hb[yy * W + xx];\n          n++;\n        }\n      key[y * W + x] = 0.5 * sum / n + 0.5 * hb[y * W + x] + 0.16 * (vn(x / 7, y / 7, 9) - 0.5) + 0.06 * (vn(x / 2.5, y / 2.5, 10) - 0.5);\n    }\n  const gx = new Float32Array(N), gy = new Float32Array(N), rank = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (h[y * W + min(W - 1, x + 1)] - h[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (h[min(H - 1, y + 1) * W + x] - h[max(0, y - 1) * W + x]) / 2;\n    }\n  // Thin clay dries first: the LEDs in order of thickness, as a rank 0..1.\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => key[a] - key[b]);\n  order.forEach((i, r) => (rank[i] = r / (N - 1)));\n  const delay = new Float32Array(N), grain = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      delay[i] = (y + 4 + 3 * sin(x * 0.13 + 1.1) + 3 * vn(x / 5, y / 5, 11)) / (H + 10);\n      grain[i] = 0.6 * (R() - 0.5) + 0.4 * (vn(x / 1.7, y / 1.7, 13) - 0.5);\n    }\n  // Three hairline cracks, each a short wandering line from a thick spot,\n  // numbered 0..1 along its length so it opens from one end.\n  const crack = new Float32Array(N);\n  for (let n = 0; n \u003c 3; n++) {\n    let best = 0, bi = 0;\n    for (let t = 0; t \u003c 60; t++) {\n      const i = floor(R() * N);\n      if (h[i] > best && !crack[i]) (best = h[i]), (bi = i);\n    }\n    let x = bi % W, y = floor(bi / W), a = R() * 2 * PI;\n    const len = 14 + floor(R() * 12);\n    for (let s = 0; s \u003c len; s++) {\n      const i = floor(y) * W + floor(x);\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) break;\n      crack[i] = max(crack[i], 0.02 + s / len);\n      a += (R() - 0.5) * 0.9;\n      x += cos(a) * 0.9;\n      y += sin(a) * 0.9;\n    }\n  }\n  Object.assign(P, { h, gx, gy, rank, delay, grain, crack });\n}\n\nexport function setup(params) {\n  params.s = {\n    c: 0, hue: 0, speed: 2, thick: 0, gloss: 0.06, ts: -0.5, tk: 0, ps: -0.5, pk: 0,\n  };\n  lay(params.s);\n}\n\n// Drying times in clock seconds (one a second at Speed 2): an LED of rank r\n// starts to dry at age A0 + r * span and is dry after band more.\nconst A0 = 1.0, SWEEP = 2.2, HOLD = 1.2;\nconst spanOf = (t) => 6 + (t \u003c 0 ? 3.5 * t : 5 * t);\nconst bandOf = (t) => 1.6 + (t \u003c 0 ? -1.2 * t : -0.6 * t);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], -1, 1);\n  P.gloss = cl(k[3], -1, 1);\n  P.c += d * P.speed * 0.5;\n  const span = spanOf(P.thick), band = bandOf(P.thick);\n  const sweeping = P.c \u003c P.ts + P.tk * SWEEP;\n  const allDry = P.c - (P.ts + P.tk * SWEEP) > A0 + span + band + HOLD;\n  if (!sweeping && (allDry || (input.btnPressed && input.btnPressed[0]))) {\n    (P.ps = P.ts), (P.pk = P.tk), (P.ts = P.c), (P.tk = 1);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { h, gx, gy, rank, delay, grain, crack } = P;\n  const span = spanOf(P.thick), band = bandOf(P.thick), c = P.c;\n  const relief = 2.4 + 1.6 * P.thick, g = P.gloss;\n  // A lamp above the panel drifts slowly, and the wet clay mirrors it as a\n  // soft spot that the ridges and scrapes break into streaks.\n  const la = 0.3 * c;\n  const Lx = 32 + 46 * sin(la), Ly = 60 + 70 * sin(0.63 * la + 1.2), Lz = 150;\n  const Ex = 32, Ey = 70, Ez = 260;\n  const shin = 14 + 30 * (g + 1), specK = 0.25 + 0.5 * (g + 1) / 2;\n  const hue = P.hue + 0.935;\n  const wet = [0, 0, 0], dry = [0, 0, 0], deep = [0, 0, 0];\n  hsv(hue, 0.64 + 0.08 * g, 0.56 - 0.05 * g, wet, 0);\n  hsv(hue + 0.01, 0.12, 0.92, dry, 0);\n  hsv(hue + 0.005, 0.3, 0.84, deep, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const tNew = P.ts + P.tk * SWEEP * delay[i];\n      const fresh = c >= tNew;\n      const tw = fresh ? tNew : P.ps + P.pk * SWEEP * delay[i];\n      const age = c - tw;\n      const D = cl((age - A0 - rank[i] * span) / band, 0, 1);\n      const nx = -gx[i] * relief, ny = -gy[i] * relief, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n      let lx = Lx - x, ly = Ly - y, lz = Lz;\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const dif = (nx * lx + ny * ly + lz) * nl;\n      const nh = max(0, (nx * hx + ny * hy + hz) * hi * nl);\n      // Wet: deep colour shaded by the relief, with the sheen. The sheen\n      // goes first as the surface turns matte, then the colour lifts.\n      const shiny = 1 - sm(0, 0.3, D), lift = sm(0.12, 1, D);\n      // Behind the rewetting band the clay carries a film of water, with a\n      // bright line where the band's edge is.\n      const water = fresh && P.tk ? sm(1.1, 0, age) : 0, rim = fresh && P.tk ? sm(0.06, 0, age) : 0;\n      const spec = (specK * shiny * nh ** shin + water * (0.35 * nh ** 90 + 0.05) + 0.3 * rim) * 255;\n      const shade = (0.62 + 0.45 * dif) * (1 - 0.18 * water);\n      // Dry: pale and chalky, the thick ridges keeping a little more colour.\n      const th = sm(0.45, 0.85, h[i]), gr = 1 + 0.13 * grain[i], ds = (0.84 + 0.2 * dif) * gr;\n      let dr = (dry[0] + (deep[0] - dry[0]) * th) * ds, dg = (dry[1] + (deep[1] - dry[1]) * th) * ds, db = (dry[2] + (deep[2] - dry[2]) * th) * ds;\n      // A hairline crack opens where a crack runs, once that spot is dry.\n      const ck = crack[i];\n      if (ck > 0) {\n        const k = sm(0.6 + 1.4 * ck, 0.9 + 1.4 * ck, age - A0 - rank[i] * span - band);\n        const f = 0.55 * k;\n        (dr += (deep[0] * 0.7 - dr) * f), (dg += (deep[1] * 0.7 - dg) * f), (db += (deep[2] * 0.7 - db) * f);\n      }\n      const wr = wet[0] * shade, wg = wet[1] * shade, wb = wet[2] * shade;\n      const r = wr + (dr - wr) * lift + spec;\n      const gg = wg + (dg - wg) * lift + spec;\n      const b = wb + (db - wb) * lift + spec * 0.96;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower."},{"name":"Thickness","min":-1,"max":1,"about":"At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds."},{"name":"Gloss","min":-1,"max":1,"about":"Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch."}],"start":[0,2,0,0.06],"measures":{"motion":0.0642,"detail":0.0418,"edges":0.1071,"complexity":2.3182,"coverage":1,"colour":0.1574,"drift":0.2242},"knobResponse":[0.2918,0.1358,0.0941,0.1324]},{"slug":"cleansing-balm","title":"Cleansing Balm","family":"cosmetic","round":33,"note":"서리 낀 셔벗 밤이 무광으로 판을 채우고, 아래에서 올라오는 온기와 보이지 않는 손끝이 닿은 곳마다 밤이 녹아 맑은 광택 오일이 돼요. 오일은 흘러내려 바닥에 고이고, 다 녹으면 위에서 새 밤이 다시 휘핑돼요. K3 은 녹는 빠르기와 높이를 정하고, K1 을 누르면 손끝 하나가 지름 20 LED 를 한 번에 녹여요.","idea":"A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.","buttons":"K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.","code":"// ===== Patternflow pattern =====\n// Title:   Cleansing Balm\n// Family:  cosmetic\n// Idea:    A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a sherbet cleansing balm melting into oil\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1\n//\n// Knob 1: Hue. The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown.\n// Knob 2: Speed. At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower.\n// Knob 3: Warmth. How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s.\n// Knob 4: Grain. The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting.\n// Buttons: K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Pink sherbet at Hue 0.\nconst H0 = 0.95;\n// A melted LED gives REL of oil. A film FILM thick clings where it is; above\n// that the oil runs down, faster the thicker it is, and a cell holds at most\n// CAP, so the pool fills up from the bottom row.\nconst REL = 0.42, FILM = 0.07, CAP = 1, KFLOW = 9;\n\n// Smooth noise in a 128 x 128 tile, three octaves of 4, 8 and 16 cells.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = rnd() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The frost: a fine grain, one value per LED, and a coarse one, the same\n// values blurred over 3 x 3 LEDs and scaled back up, so its crystals are two\n// or three LEDs across. SPK picks the sparkling specks.\nconst GF = Float32Array.from({ length: N }, (_, i) => hash(i + 77) * 2 - 1);\nconst GC = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) s += GF[((y + dy + H) % H) * W + ((x + dx + W) % W)];\n    GC[y * W + x] = s / 3;\n  }\nconst SPK = Float32Array.from({ length: N }, (_, i) => hash(i + 991));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  buildTex();\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    Hb: F(N), mb: F(N), nz: F(N), Hn: F(N), mbN: F(N), nzN: F(N),\n    m: F(N), F: F(N), age: F(N), Ho: F(N), Hs: F(N), wo: F(N),\n    phase: 0, Yf: H + 10, Yl: -10, row: 0, hold: 0, T: 0, next: 1, fingers: [], dir: 1,\n    hue: 0, speed: 2, warm: 0, grain: 0.06, wm: 0, started: false, col: F(7 * 3), colHue: NaN,\n  };\n}\n\n// A fresh layer of balm. A soft whip of lumps, then fifteen spoon scoops, each\n// an oval hollow 15 to 25 LEDs long with faint rings where the spoon's edge\n// dragged and a lip of balm piled up at the end the spoon left by. nz is how\n// long each LED holds out against warmth, and mk is the sherbet's marbling.\nfunction lay(Hh, mk, nz) {\n  const ox = rnd() * T, oy = rnd() * T;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      Hh[i] = 0.3 * tap(x * 1.7 + ox, y * 1.7 + oy);\n      mk[i] = tap(x * 0.55 + oy, y * 0.38 + ox + 40);\n      nz[i] = 0.9 * tap(x * 2.6 + ox + 60, y * 2.6 + oy);\n    }\n  for (let k = 0; k \u003c 15; k++) {\n    const L = 15 + rnd() * 10, Wd = L * (0.5 + 0.15 * rnd()), a = rnd() * 2 * PI, ca = cos(a), sa = sin(a);\n    const cx = rnd() * W, cy = -6 + rnd() * (H + 12), E = L * 1.4;\n    for (let y = max(0, floor(cy - E)); y \u003c= min(H - 1, floor(cy + E)); y++)\n      for (let x = max(0, floor(cx - E)); x \u003c= min(W - 1, floor(cx + E)); x++) {\n        const dx = x + 0.5 - cx, dy = y + 0.5 - cy, u = (dx * ca + dy * sa) / L, v = (-dx * sa + dy * ca) / Wd;\n        const rho = sqrt(u * u + v * v);\n        if (rho > 1.4) continue;\n        const i = y * W + x, wgt = 1 - sm((rho - 0.82) / 0.3);\n        const dish = rho \u003c 1 ? -0.75 * (1 - rho * rho) + 0.025 * sin(rho * 19) : 0;\n        const lip = 0.55 * exp(-(((rho - 1.02) / 0.14) ** 2)) * (0.4 + 0.6 * sm((u + 1) / 2));\n        Hh[i] = Hh[i] * (1 - wgt) + dish * wgt + lip;\n      }\n  }\n}\n\n// A fingertip: it comes down at (x, y) and its warm print spreads to radius R\n// over `grow` seconds, melting what it covers.\nfunction finger(S, big) {\n  let x = 8 + rnd() * (W - 16), y = 0;\n  // Into the balm, above the front.\n  const hiY = min(H - 10, S.Yf - 14);\n  if (hiY > 12) y = 8 + rnd() * (hiY - 8);\n  else y = 10 + rnd() * (H - 20);\n  if (big) x = 14 + rnd() * (W - 28);\n  S.fingers.push({ x, y, R: big ? 10 : 6 + rnd() * 4 + 3 * S.warm, grow: big ? 0.25 : 0.8, t: 0, r: 0 });\n}\n\nfunction step(S, st) {\n  const { m, F, age, Hb, nz } = S;\n  S.T += st;\n  if (S.phase === 0) {\n    S.Yf -= st * (5 + 7 * S.warm);\n    S.next -= st;\n    if (S.next \u003c= 0) {\n      S.next = (3.2 - 1.8 * S.warm) * (0.7 + 0.6 * rnd());\n      finger(S, false);\n    }\n    if (S.Yf \u003c H - (0.57 + 0.5 * S.warm) * (H + 12)) {\n      S.phase = 1;\n      S.hold = 0;\n    }\n  } else if (S.phase === 1) {\n    S.hold += st;\n    if (S.hold > 1.5) {\n      // Whip a fresh layer on from the top.\n      S.phase = 2;\n      S.Yl = -6;\n      S.row = 0;\n      S.Yf = H + 1000;\n      lay(S.Hn, S.mbN, S.nzN);\n    }\n  } else {\n    S.Yl += st * 46;\n    const to = min(H, floor(S.Yl));\n    for (; S.row \u003c to; S.row++)\n      for (let x = 0, i = S.row * W; x \u003c W; x++, i++) {\n        Hb[i] = S.Hn[i];\n        S.mb[i] = S.mbN[i];\n        nz[i] = S.nzN[i];\n        m[i] = 0;\n        F[i] = 0;\n        age[i] = 0;\n      }\n    if (S.Yl > H + 8) {\n      S.phase = 0;\n      S.Yf = H + 10;\n      S.next = 0.6;\n      S.fingers.length = 0;\n    }\n  }\n  // The front: LEDs below it melt, ridges and the lumps of nz holding out a\n  // few rows longer, so it climbs ragged. Once an LED starts it melts through\n  // in about 0.4 s, and that band is the wet rim.\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const wf = (y - S.Yf) / 4;\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (m[i] >= 1) {\n        age[i] += st;\n        continue;\n      }\n      if (m[i] > 0 || wf > 0.9 * Hb[i] + nz[i]) {\n        const dm = min(1 - m[i], st * 2.4);\n        m[i] += dm;\n        F[i] += dm * REL;\n      }\n    }\n  }\n  const fs = S.fingers;\n  for (let k = fs.length - 1; k >= 0; k--) {\n    const f = fs[k];\n    f.t += st;\n    f.r = f.R * sm(f.t / f.grow);\n    const E = f.R + 3;\n    for (let y = max(0, floor(f.y - E)); y \u003c= min(H - 1, floor(f.y + E)); y++)\n      for (let x = max(0, floor(f.x - E)); x \u003c= min(W - 1, floor(f.x + E)); x++) {\n        const i = y * W + x;\n        if (m[i] > 0) continue;\n        const d = Math.hypot(x + 0.5 - f.x, y + 0.5 - f.y);\n        if (d \u003c f.r - 1.5 * (0.9 * Hb[i] + nz[i])) m[i] = 0.01;\n      }\n    if (f.t > f.grow + 0.5) fs.splice(k, 1);\n  }\n  // The oil runs down a row at a time, bottom row first so nothing moves two\n  // rows in one step.\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      // Unmelted balm soaks up a little, so oil only trickles over it.\n      const mob = F[i] - (m[i] > 0 ? FILM : 0.22);\n      if (mob \u003c= 0) continue;\n      const j = i + W;\n      let fl = min(mob, st * KFLOW * mob * (0.25 + F[i]));\n      fl = min(fl, CAP - F[j]);\n      if (fl \u003c= 0) continue;\n      F[i] -= fl;\n      F[j] += fl;\n    }\n  // The oil levels out sideways, quickly where it is deep, so the pool's top\n  // is flat and a film does not keep the stripes it ran down in.\n  S.dir = -S.dir;\n  for (let y = 0; y \u003c H; y++) {\n    const r0 = y * W;\n    for (let n = 0; n \u003c W - 1; n++) {\n      const x = S.dir > 0 ? n : W - 2 - n, i = r0 + x, d = F[i] - F[i + 1];\n      if (F[i] \u003c FILM && F[i + 1] \u003c FILM) continue;\n      const mv = d * (F[i] > 0.3 || F[i + 1] > 0.3 ? 0.35 : 0.15);\n      F[i] -= mv;\n      F[i + 1] += mv;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.warm = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    lay(S.Hb, S.mb, S.nz);\n    // Open with the bottom fifth already melted and a fingertip or two in.\n    S.Yf = H - 12;\n    S.next = 0.3;\n    for (let i = 0; i \u003c 70; i++) step(S, 1 / 20);\n  }\n  if (input.btnPressed && input.btnPressed[0]) finger(S, true);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours: the sherbet, its creamy marbling, the glow under the oil, the\n// oil's own tint, the wet rim and the frost's specks.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0, hf = h - floor(h);\n  // Orange and gold go brown at middle light on the LEDs, so round them\n  // everything is lifted and paled: apricot, peach and butter.\n  const dw = abs(hf - 0.13), wm = sm(1.5 - min(dw, 1 - dw) / 0.12);\n  hsv(h, 0.44 - 0.14 * wm, 0.98, c, 0);\n  hsv(h - 0.015, 0.22 - 0.06 * wm, 1, c, 3);\n  hsv(h - 0.02, 0.32 - 0.1 * wm, 1, c, 6);\n  hsv(h + 0.015, 0.78 - 0.38 * wm, 0.62 + 0.36 * wm, c, 9);\n  hsv(h, 0.22, 1, c, 12);\n  hsv(h + 0.05, 0.08, 1, c, 15);\n  S.wm = wm;\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.colHue !== S.hue) palette(S);\n  const { Hb, mb, m, F, age, Ho, Hs, col } = S, t = S.T;\n  // How much of each LED is oil: all of it once melted, and a wet film\n  // where oil runs down over balm that has not melted yet.\n  const wo = S.wo;\n  for (let i = 0; i \u003c N; i++) wo[i] = max(m[i], 0.7 * sm((F[i] - 0.12) / 0.3));\n  // The oil's surface: what is left of the balm's shape as it slumps flat in\n  // the two seconds after melting, the oil's own depth, and slow ripples\n  // carried down the panel at about 6 LEDs a second, then softened over\n  // 3 x 3 LEDs so the oil has no grain at all.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (wo[i] \u003c= 0) {\n        Ho[i] = Hb[i] * 0.7;\n        continue;\n      }\n      const sl = m[i] > 0 ? max(0, 1 - age[i] / 2) : 1, f = min(F[i], 1.2);\n      Ho[i] = 0.7 * Hb[i] * sl + 1.2 * f + 0.35 * tap(x * 1.1 + 20, y * 0.7 - t * 5) * (0.4 + f);\n    }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Hs[i] = (Ho[i - (x > 0 ? 1 : 0)] + 2 * Ho[i] + Ho[i + (x \u003c W - 1 ? 1 : 0)]) * 0.25;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Ho[i] = (Hs[i - (y > 0 ? W : 0)] + 2 * Hs[i] + Hs[i + (y \u003c H - 1 ? W : 0)]) * 0.25;\n  const g = S.grain, gA = 0.04 + 0.17 * g, spD = 0.03 + 0.09 * g, spV = 0.09 + 0.08 * g, lumps = 1 + 0.35 * g;\n  // A small light 60 degrees off the face of the panel wanders round the top\n  // left, so flat oil never catches it and only the slopes of ripples,\n  // slumping lumps and the pool's edge glint. Two long reflections of strip\n  // lights sweep across the oil and back every 18 s at Speed 2.\n  const az = -2.2 + 0.7 * sin(t * 0.37), lx = 0.866 * cos(az), ly = 0.866 * sin(az), lz = 0.5;\n  const hx0 = lx, hy0 = ly, hz0 = lz + 1, hl = Math.hypot(hx0, hy0, hz0);\n  const hx = hx0 / hl, hy = hy0 / hl, hz = hz0 / hl;\n  const band = 1.1 * sin(t * 0.35), band2 = band + (band > 0 ? -1.4 : 1.4);\n  // Warm oil at middle light is brown, so round orange and gold the oil\n  // glows brighter and turns to honey.\n  const lift = 1 + 0.32 * S.wm, tk = 0.85 + 0.25 * S.wm;\n  // The edge of a fresh layer being whipped on stands up as a rolled ridge.\n  const whip = S.phase === 2, Yl = S.Yl;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0;\n    const roll = whip ? 0.9 * exp(-(((y - Yl + 2.5) / 2.6) ** 2)) : 0, rollU = whip ? 0.9 * exp(-(((y - 1 - Yl + 2.5) / 2.6) ** 2)) : 0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const lf = x > 0 ? -1 : 0, rt = x \u003c W - 1 ? 1 : 0;\n      const mm = m[i], w = wo[i];\n      let r = 0, gg = 0, b = 0;\n      if (mm \u003c 1) {\n        // Matte balm: soft light from the top left, a little darker deep in\n        // the hollows, the marbling between sherbet and cream, and frost.\n        const ddx = (Hb[i + rt] - Hb[i + lf]) * 2.2 * lumps, ddy = (Hb[i + dn] - Hb[i + up]) * 2.2 * lumps + (roll - rollU) * 3;\n        const dif = (0.45 * ddx + 0.62 * ddy + 0.64) / sqrt(ddx * ddx + ddy * ddy + 1);\n        const sh = 0.8 + 0.22 * dif + 0.05 * cl(Hb[i] + roll, -0.8, 0.6);\n        const mk = sm(0.5 + 1.2 * sin(mb[i] * 11 + 0.8));\n        const f = sh * (1 + gA * (GF[i] * (1 - g) + GC[i] * g));\n        const sp = SPK[i] > 1 - spD ? spV : 0;\n        r = (col[0] + (col[3] - col[0]) * mk) * f + sp;\n        gg = (col[1] + (col[4] - col[1]) * mk) * f + sp;\n        b = (col[2] + (col[5] - col[2]) * mk) * f + sp;\n      }\n      if (w > 0) {\n        // Oil: the glow under it seen through a tint that deepens with the\n        // oil's depth, a sharp highlight from the small light, and the strip\n        // light's long reflection.\n        const nx = -(Ho[i + rt] - Ho[i + lf]) * 3.5, ny = -(Ho[i + dn] - Ho[i + up]) * 3.5, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        const nd = (nx * hx + ny * hy + hz) * nl;\n        const spec = nd > 0.9 ? ((nd - 0.9) / 0.1) ** 2 : 0;\n        const e = 2 * nl * (nx * 0.5 + ny * 0.85) * nl + (x - 32) / 90 + (y - 64) / 70, q = (e - band) / 0.14, q2 = (e - band2) / 0.1;\n        const s = min(1, spec) + 0.42 * exp(-q * q) + 0.28 * exp(-q2 * q2);\n        const dep = 0.3 + F[i], a = 1 - exp(-1.1 * dep);\n        const glow = (0.55 + 0.3 * tap(x * 0.6 + 70, y * 0.4 - t * 1.5)) * lift;\n        const orr = col[6] * glow * (1 - a) + col[9] * a * tk + s;\n        const og = col[7] * glow * (1 - a) + col[10] * a * tk + s;\n        const ob = col[8] * glow * (1 - a) + col[11] * a * tk + s;\n        r = r * (1 - w) + orr * w;\n        gg = gg * (1 - w) + og * w;\n        b = b * (1 - w) + ob * w;\n        // The wet rim: the band where the balm is turning, and the oil's\n        // edge against balm, a pale glassy line with a glint.\n        let rim = mm > 0 && mm \u003c 1 ? 4 * mm * (1 - mm) : 0;\n        if (mm >= 1 && (m[i + lf] \u003c 0.5 || m[i + rt] \u003c 0.5 || m[i + up] \u003c 0.5 || m[i + dn] \u003c 0.5)) rim = 0.8;\n        if (rim > 0) {\n          const k = 0.45 * rim;\n          r += (col[12] - r) * k + 0.1 * rim;\n          gg += (col[13] - gg) * k + 0.1 * rim;\n          b += (col[14] - b) * k + 0.1 * rim;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-cleansing-balm","type":"code","name":"cleansing-balm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cleansing Balm\n// Family:  cosmetic\n// Idea:    A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a sherbet cleansing balm melting into oil\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1\n//\n// Knob 1: Hue. The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown.\n// Knob 2: Speed. At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower.\n// Knob 3: Warmth. How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s.\n// Knob 4: Grain. The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting.\n// Buttons: K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Pink sherbet at Hue 0.\nconst H0 = 0.95;\n// A melted LED gives REL of oil. A film FILM thick clings where it is; above\n// that the oil runs down, faster the thicker it is, and a cell holds at most\n// CAP, so the pool fills up from the bottom row.\nconst REL = 0.42, FILM = 0.07, CAP = 1, KFLOW = 9;\n\n// Smooth noise in a 128 x 128 tile, three octaves of 4, 8 and 16 cells.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = rnd() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The frost: a fine grain, one value per LED, and a coarse one, the same\n// values blurred over 3 x 3 LEDs and scaled back up, so its crystals are two\n// or three LEDs across. SPK picks the sparkling specks.\nconst GF = Float32Array.from({ length: N }, (_, i) => hash(i + 77) * 2 - 1);\nconst GC = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) s += GF[((y + dy + H) % H) * W + ((x + dx + W) % W)];\n    GC[y * W + x] = s / 3;\n  }\nconst SPK = Float32Array.from({ length: N }, (_, i) => hash(i + 991));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  buildTex();\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    Hb: F(N), mb: F(N), nz: F(N), Hn: F(N), mbN: F(N), nzN: F(N),\n    m: F(N), F: F(N), age: F(N), Ho: F(N), Hs: F(N), wo: F(N),\n    phase: 0, Yf: H + 10, Yl: -10, row: 0, hold: 0, T: 0, next: 1, fingers: [], dir: 1,\n    hue: 0, speed: 2, warm: 0, grain: 0.06, wm: 0, started: false, col: F(7 * 3), colHue: NaN,\n  };\n}\n\n// A fresh layer of balm. A soft whip of lumps, then fifteen spoon scoops, each\n// an oval hollow 15 to 25 LEDs long with faint rings where the spoon's edge\n// dragged and a lip of balm piled up at the end the spoon left by. nz is how\n// long each LED holds out against warmth, and mk is the sherbet's marbling.\nfunction lay(Hh, mk, nz) {\n  const ox = rnd() * T, oy = rnd() * T;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      Hh[i] = 0.3 * tap(x * 1.7 + ox, y * 1.7 + oy);\n      mk[i] = tap(x * 0.55 + oy, y * 0.38 + ox + 40);\n      nz[i] = 0.9 * tap(x * 2.6 + ox + 60, y * 2.6 + oy);\n    }\n  for (let k = 0; k \u003c 15; k++) {\n    const L = 15 + rnd() * 10, Wd = L * (0.5 + 0.15 * rnd()), a = rnd() * 2 * PI, ca = cos(a), sa = sin(a);\n    const cx = rnd() * W, cy = -6 + rnd() * (H + 12), E = L * 1.4;\n    for (let y = max(0, floor(cy - E)); y \u003c= min(H - 1, floor(cy + E)); y++)\n      for (let x = max(0, floor(cx - E)); x \u003c= min(W - 1, floor(cx + E)); x++) {\n        const dx = x + 0.5 - cx, dy = y + 0.5 - cy, u = (dx * ca + dy * sa) / L, v = (-dx * sa + dy * ca) / Wd;\n        const rho = sqrt(u * u + v * v);\n        if (rho > 1.4) continue;\n        const i = y * W + x, wgt = 1 - sm((rho - 0.82) / 0.3);\n        const dish = rho \u003c 1 ? -0.75 * (1 - rho * rho) + 0.025 * sin(rho * 19) : 0;\n        const lip = 0.55 * exp(-(((rho - 1.02) / 0.14) ** 2)) * (0.4 + 0.6 * sm((u + 1) / 2));\n        Hh[i] = Hh[i] * (1 - wgt) + dish * wgt + lip;\n      }\n  }\n}\n\n// A fingertip: it comes down at (x, y) and its warm print spreads to radius R\n// over `grow` seconds, melting what it covers.\nfunction finger(S, big) {\n  let x = 8 + rnd() * (W - 16), y = 0;\n  // Into the balm, above the front.\n  const hiY = min(H - 10, S.Yf - 14);\n  if (hiY > 12) y = 8 + rnd() * (hiY - 8);\n  else y = 10 + rnd() * (H - 20);\n  if (big) x = 14 + rnd() * (W - 28);\n  S.fingers.push({ x, y, R: big ? 10 : 6 + rnd() * 4 + 3 * S.warm, grow: big ? 0.25 : 0.8, t: 0, r: 0 });\n}\n\nfunction step(S, st) {\n  const { m, F, age, Hb, nz } = S;\n  S.T += st;\n  if (S.phase === 0) {\n    S.Yf -= st * (5 + 7 * S.warm);\n    S.next -= st;\n    if (S.next \u003c= 0) {\n      S.next = (3.2 - 1.8 * S.warm) * (0.7 + 0.6 * rnd());\n      finger(S, false);\n    }\n    if (S.Yf \u003c H - (0.57 + 0.5 * S.warm) * (H + 12)) {\n      S.phase = 1;\n      S.hold = 0;\n    }\n  } else if (S.phase === 1) {\n    S.hold += st;\n    if (S.hold > 1.5) {\n      // Whip a fresh layer on from the top.\n      S.phase = 2;\n      S.Yl = -6;\n      S.row = 0;\n      S.Yf = H + 1000;\n      lay(S.Hn, S.mbN, S.nzN);\n    }\n  } else {\n    S.Yl += st * 46;\n    const to = min(H, floor(S.Yl));\n    for (; S.row \u003c to; S.row++)\n      for (let x = 0, i = S.row * W; x \u003c W; x++, i++) {\n        Hb[i] = S.Hn[i];\n        S.mb[i] = S.mbN[i];\n        nz[i] = S.nzN[i];\n        m[i] = 0;\n        F[i] = 0;\n        age[i] = 0;\n      }\n    if (S.Yl > H + 8) {\n      S.phase = 0;\n      S.Yf = H + 10;\n      S.next = 0.6;\n      S.fingers.length = 0;\n    }\n  }\n  // The front: LEDs below it melt, ridges and the lumps of nz holding out a\n  // few rows longer, so it climbs ragged. Once an LED starts it melts through\n  // in about 0.4 s, and that band is the wet rim.\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const wf = (y - S.Yf) / 4;\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (m[i] >= 1) {\n        age[i] += st;\n        continue;\n      }\n      if (m[i] > 0 || wf > 0.9 * Hb[i] + nz[i]) {\n        const dm = min(1 - m[i], st * 2.4);\n        m[i] += dm;\n        F[i] += dm * REL;\n      }\n    }\n  }\n  const fs = S.fingers;\n  for (let k = fs.length - 1; k >= 0; k--) {\n    const f = fs[k];\n    f.t += st;\n    f.r = f.R * sm(f.t / f.grow);\n    const E = f.R + 3;\n    for (let y = max(0, floor(f.y - E)); y \u003c= min(H - 1, floor(f.y + E)); y++)\n      for (let x = max(0, floor(f.x - E)); x \u003c= min(W - 1, floor(f.x + E)); x++) {\n        const i = y * W + x;\n        if (m[i] > 0) continue;\n        const d = Math.hypot(x + 0.5 - f.x, y + 0.5 - f.y);\n        if (d \u003c f.r - 1.5 * (0.9 * Hb[i] + nz[i])) m[i] = 0.01;\n      }\n    if (f.t > f.grow + 0.5) fs.splice(k, 1);\n  }\n  // The oil runs down a row at a time, bottom row first so nothing moves two\n  // rows in one step.\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      // Unmelted balm soaks up a little, so oil only trickles over it.\n      const mob = F[i] - (m[i] > 0 ? FILM : 0.22);\n      if (mob \u003c= 0) continue;\n      const j = i + W;\n      let fl = min(mob, st * KFLOW * mob * (0.25 + F[i]));\n      fl = min(fl, CAP - F[j]);\n      if (fl \u003c= 0) continue;\n      F[i] -= fl;\n      F[j] += fl;\n    }\n  // The oil levels out sideways, quickly where it is deep, so the pool's top\n  // is flat and a film does not keep the stripes it ran down in.\n  S.dir = -S.dir;\n  for (let y = 0; y \u003c H; y++) {\n    const r0 = y * W;\n    for (let n = 0; n \u003c W - 1; n++) {\n      const x = S.dir > 0 ? n : W - 2 - n, i = r0 + x, d = F[i] - F[i + 1];\n      if (F[i] \u003c FILM && F[i + 1] \u003c FILM) continue;\n      const mv = d * (F[i] > 0.3 || F[i + 1] > 0.3 ? 0.35 : 0.15);\n      F[i] -= mv;\n      F[i + 1] += mv;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.warm = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    lay(S.Hb, S.mb, S.nz);\n    // Open with the bottom fifth already melted and a fingertip or two in.\n    S.Yf = H - 12;\n    S.next = 0.3;\n    for (let i = 0; i \u003c 70; i++) step(S, 1 / 20);\n  }\n  if (input.btnPressed && input.btnPressed[0]) finger(S, true);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours: the sherbet, its creamy marbling, the glow under the oil, the\n// oil's own tint, the wet rim and the frost's specks.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0, hf = h - floor(h);\n  // Orange and gold go brown at middle light on the LEDs, so round them\n  // everything is lifted and paled: apricot, peach and butter.\n  const dw = abs(hf - 0.13), wm = sm(1.5 - min(dw, 1 - dw) / 0.12);\n  hsv(h, 0.44 - 0.14 * wm, 0.98, c, 0);\n  hsv(h - 0.015, 0.22 - 0.06 * wm, 1, c, 3);\n  hsv(h - 0.02, 0.32 - 0.1 * wm, 1, c, 6);\n  hsv(h + 0.015, 0.78 - 0.38 * wm, 0.62 + 0.36 * wm, c, 9);\n  hsv(h, 0.22, 1, c, 12);\n  hsv(h + 0.05, 0.08, 1, c, 15);\n  S.wm = wm;\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.colHue !== S.hue) palette(S);\n  const { Hb, mb, m, F, age, Ho, Hs, col } = S, t = S.T;\n  // How much of each LED is oil: all of it once melted, and a wet film\n  // where oil runs down over balm that has not melted yet.\n  const wo = S.wo;\n  for (let i = 0; i \u003c N; i++) wo[i] = max(m[i], 0.7 * sm((F[i] - 0.12) / 0.3));\n  // The oil's surface: what is left of the balm's shape as it slumps flat in\n  // the two seconds after melting, the oil's own depth, and slow ripples\n  // carried down the panel at about 6 LEDs a second, then softened over\n  // 3 x 3 LEDs so the oil has no grain at all.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (wo[i] \u003c= 0) {\n        Ho[i] = Hb[i] * 0.7;\n        continue;\n      }\n      const sl = m[i] > 0 ? max(0, 1 - age[i] / 2) : 1, f = min(F[i], 1.2);\n      Ho[i] = 0.7 * Hb[i] * sl + 1.2 * f + 0.35 * tap(x * 1.1 + 20, y * 0.7 - t * 5) * (0.4 + f);\n    }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Hs[i] = (Ho[i - (x > 0 ? 1 : 0)] + 2 * Ho[i] + Ho[i + (x \u003c W - 1 ? 1 : 0)]) * 0.25;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Ho[i] = (Hs[i - (y > 0 ? W : 0)] + 2 * Hs[i] + Hs[i + (y \u003c H - 1 ? W : 0)]) * 0.25;\n  const g = S.grain, gA = 0.04 + 0.17 * g, spD = 0.03 + 0.09 * g, spV = 0.09 + 0.08 * g, lumps = 1 + 0.35 * g;\n  // A small light 60 degrees off the face of the panel wanders round the top\n  // left, so flat oil never catches it and only the slopes of ripples,\n  // slumping lumps and the pool's edge glint. Two long reflections of strip\n  // lights sweep across the oil and back every 18 s at Speed 2.\n  const az = -2.2 + 0.7 * sin(t * 0.37), lx = 0.866 * cos(az), ly = 0.866 * sin(az), lz = 0.5;\n  const hx0 = lx, hy0 = ly, hz0 = lz + 1, hl = Math.hypot(hx0, hy0, hz0);\n  const hx = hx0 / hl, hy = hy0 / hl, hz = hz0 / hl;\n  const band = 1.1 * sin(t * 0.35), band2 = band + (band > 0 ? -1.4 : 1.4);\n  // Warm oil at middle light is brown, so round orange and gold the oil\n  // glows brighter and turns to honey.\n  const lift = 1 + 0.32 * S.wm, tk = 0.85 + 0.25 * S.wm;\n  // The edge of a fresh layer being whipped on stands up as a rolled ridge.\n  const whip = S.phase === 2, Yl = S.Yl;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0;\n    const roll = whip ? 0.9 * exp(-(((y - Yl + 2.5) / 2.6) ** 2)) : 0, rollU = whip ? 0.9 * exp(-(((y - 1 - Yl + 2.5) / 2.6) ** 2)) : 0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const lf = x > 0 ? -1 : 0, rt = x \u003c W - 1 ? 1 : 0;\n      const mm = m[i], w = wo[i];\n      let r = 0, gg = 0, b = 0;\n      if (mm \u003c 1) {\n        // Matte balm: soft light from the top left, a little darker deep in\n        // the hollows, the marbling between sherbet and cream, and frost.\n        const ddx = (Hb[i + rt] - Hb[i + lf]) * 2.2 * lumps, ddy = (Hb[i + dn] - Hb[i + up]) * 2.2 * lumps + (roll - rollU) * 3;\n        const dif = (0.45 * ddx + 0.62 * ddy + 0.64) / sqrt(ddx * ddx + ddy * ddy + 1);\n        const sh = 0.8 + 0.22 * dif + 0.05 * cl(Hb[i] + roll, -0.8, 0.6);\n        const mk = sm(0.5 + 1.2 * sin(mb[i] * 11 + 0.8));\n        const f = sh * (1 + gA * (GF[i] * (1 - g) + GC[i] * g));\n        const sp = SPK[i] > 1 - spD ? spV : 0;\n        r = (col[0] + (col[3] - col[0]) * mk) * f + sp;\n        gg = (col[1] + (col[4] - col[1]) * mk) * f + sp;\n        b = (col[2] + (col[5] - col[2]) * mk) * f + sp;\n      }\n      if (w > 0) {\n        // Oil: the glow under it seen through a tint that deepens with the\n        // oil's depth, a sharp highlight from the small light, and the strip\n        // light's long reflection.\n        const nx = -(Ho[i + rt] - Ho[i + lf]) * 3.5, ny = -(Ho[i + dn] - Ho[i + up]) * 3.5, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        const nd = (nx * hx + ny * hy + hz) * nl;\n        const spec = nd > 0.9 ? ((nd - 0.9) / 0.1) ** 2 : 0;\n        const e = 2 * nl * (nx * 0.5 + ny * 0.85) * nl + (x - 32) / 90 + (y - 64) / 70, q = (e - band) / 0.14, q2 = (e - band2) / 0.1;\n        const s = min(1, spec) + 0.42 * exp(-q * q) + 0.28 * exp(-q2 * q2);\n        const dep = 0.3 + F[i], a = 1 - exp(-1.1 * dep);\n        const glow = (0.55 + 0.3 * tap(x * 0.6 + 70, y * 0.4 - t * 1.5)) * lift;\n        const orr = col[6] * glow * (1 - a) + col[9] * a * tk + s;\n        const og = col[7] * glow * (1 - a) + col[10] * a * tk + s;\n        const ob = col[8] * glow * (1 - a) + col[11] * a * tk + s;\n        r = r * (1 - w) + orr * w;\n        gg = gg * (1 - w) + og * w;\n        b = b * (1 - w) + ob * w;\n        // The wet rim: the band where the balm is turning, and the oil's\n        // edge against balm, a pale glassy line with a glint.\n        let rim = mm > 0 && mm \u003c 1 ? 4 * mm * (1 - mm) : 0;\n        if (mm >= 1 && (m[i + lf] \u003c 0.5 || m[i + rt] \u003c 0.5 || m[i + up] \u003c 0.5 || m[i + dn] \u003c 0.5)) rim = 0.8;\n        if (rim > 0) {\n          const k = 0.45 * rim;\n          r += (col[12] - r) * k + 0.1 * rim;\n          gg += (col[13] - gg) * k + 0.1 * rim;\n          b += (col[14] - b) * k + 0.1 * rim;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower."},{"name":"Warmth","min":0,"max":1,"about":"How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s."},{"name":"Grain","min":0,"max":1,"about":"The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting."}],"start":[0,2,0,0.06],"measures":{"motion":0.1343,"detail":0.0375,"edges":0.1005,"complexity":2.1868,"coverage":1,"colour":0.1701,"drift":0.1197},"knobResponse":[0.2675,0.0873,0.1368,0.0422]},{"slug":"climber","title":"Climber","family":"pixel","round":2,"note":"빨간 목도리를 맨 꼬마가 혼자서 끝없는 탑의 턱을 뛰어올라요. K4 를 돌리면 한낮에서 노을을 지나 횃불 켜진 밤이 돼요.","idea":"A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.","buttons":"K1 tap makes the climber jump now, and again in the air.","code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","layer":{"id":"layer-climber","type":"code","name":"climber","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The stone of the tower and its ledges; the climber keeps its own colours."},{"name":"Speed","min":0.3,"max":3.5,"about":"How fast the climber runs and jumps, and with it how fast the tower goes by."},{"name":"Gap","min":16,"max":34,"about":"How far apart the ledges are, from quick hops to long leaps with the climber high in the air."},{"name":"Sky","min":0,"max":1,"about":"The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit."}],"start":[0,2,16,0.06],"measures":{"motion":1.5193,"detail":0.0867,"edges":0.9308,"complexity":0.2662,"coverage":0.7278,"colour":0.1488,"drift":0.118},"knobResponse":[0.0827,0.1542,0.146,0.1338]},{"slug":"climbing-wall","title":"Climbing Wall","family":"sport","round":27,"note":"체육관의 리드 벽을 정면에서 봐요. 합판에 색깔별 루트가 박혀 있고, 클라이머가 스폿 빛을 받으며 손발을 하나씩 옮겨 오르다 퀵드로마다 로프를 걸어요. 꼭대기 앵커를 걸면 빌레이어가 내려 주고 둘이 자리를 바꿔요. K3 은 셋까지 나란히 오르게 하고, 누르면 클라이머가 떨어져 로프에 걸려요.","idea":"A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.","buttons":"K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.","code":"// ===== Patternflow pattern =====\n// Title:   Climbing Wall\n// Family:  sport\n// Idea:    A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after an indoor lead-climbing wall\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1\n//\n// Knob 1: Route. The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour.\n// Knob 2: Speed. At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall.\n// Knob 3: Climbers. One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour.\n// Knob 4: Light. House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes.\n// Buttons: K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.\n\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (u) => ((u = cl(u, 0, 1)), u * u * (3 - 2 * u));\nconst hyp = (x, y) => sqrt(x * x + y * y), F32 = (n) => new Float32Array(n);\nconst hex = (h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));\nconst blend = (o, c, k, a) => {\n  for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] * k - F[o + j]) * a;\n};\nconst hash = (i, j) => ((Math.imul(i * 7919 + j * 104729 + 17, 2654435761) >>> 8) & 1023) / 1024;\n\n// Rows of the mat and the kickboard. Each lane's bolt line LX: eight quickdraws\n// (the rope runs CLP under the bolt) and a lower-off ring.\nconst FL = 121, FT = FL - 0.5, KICK = 117, LX = [11, 32, 53], BOLT = [95, 84, 73, 62, 51, 40, 29, 18], CLP = 3.5, RING = 11;\n// A route: NH hand holds HS rows apart, left and right in turn, a foot chip\n// CHIP rows under each. A lane has two routes, one each side of its bolts.\nconst NH = 20, HY0 = 105, HS = 5, CHIP = 15;\n// The body in LEDs: arm, forearm, thigh, shin, hip to shoulders; hips standing.\nconst UA = 4.1, FA = 4.1, TH = 4.8, SN = 4.8, TOR = 6, STAND = FL - 10.05;\n// Route colours in Route's order with the lane and side each is set on.\nconst RC = \"3ceb6e ffd41e 288cff ff46aa ff7614 af5fff\".split(\" \").map(hex);\nconst RL = [1, 2, 0, 1, 2, 0], RS = [-1, -1, -1, 1, 1, 1], ROUTE = [[2, 5], [0, 3], [1, 4]];\nconst rcx = (r) => LX[RL[r]] + 0.5 + RS[r] * 5;\nconst lane = (P) => LX[P.l] + 0.5, bxOf = (P) => lane(P) - RS[P.r] * 3.5;\n// A rope a lane, two people a party: skin, hair, top, tights, harness, shoes,\n// chalk bag, 1 for a ponytail.\nconst ROPE = \"46d7ff ff7828 beff46\".split(\" \").map(hex);\nconst OUT = [\n  \"ecac84 c86032 ff6054 968cc4 ffc81e 8246d2 e6283c 1\", \"c88c64 ebc878 f5f5f0 3c60b4 96e628 f05a28 2878e6 0\",\n  \"ecb088 60301a 1ec8cd acb2c4 ff4696 464650 fad228 1\", \"a06e50 bebec4 facd32 466ed2 e63278 3c8cf0 3cb450 0\",\n  \"ecac84 f0dcaa 965ff0 c8c8ce ffc81e 288cf0 f0f0f0 1\", \"be825f 281e1a 46c864 a03c54 ff5a28 ebebeb c83cc8 0\",\n].map((s) => s.split(\" \").map((h, i) => (i \u003c 7 ? hex(h) : +h)));\n\n// The wall is built once, with the house light on it in L0.\nconst AL = F32(N * 3), EM = F32(N * 3), L0 = F32(N), MK = new Uint8Array(N);\nconst HX = F32(6 * NH), HY = F32(6 * NH), CX = F32(6 * NH), CY = F32(6 * NH);\n// Jug, crimp, sloper, pinch, big jug: LEDs as digit pairs, column + 2, row + 1.\nconst SHAPES = [\"112131122232\", \"112131\", \"2011213122\", \"203021312232\", \"1020300111213141122232\"];\n// Volumes, pyramids on a diamond: middle, half width, half height, colour.\nconst VOL = [[21.5, 46, 4.5, 7, \"9698a2\"], [43, 84, 4.5, 6.5, \"3c969c\"], [21.5, 100, 4, 5, \"c49664\"], [43, 26, 4, 6, \"d6d6dc\"], [1, 70, 3.5, 8, \"785496\"], [63, 52, 3.5, 7, \"9698a2\"]];\nconst STEEL = \"bebec8 ece8de dcd8d0 aab0bc\".split(\" \").map(hex);\n// Colour c times k on the wall, e of it glowing under UV.\nfunction px(x, y, c, k, e) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) (AL[o + j] = min(255, c[j] * k)), (EM[o + j] = AL[o + j] * e);\n  MK[y * W + x] = 1;\n}\nfunction shade(x, y, k) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL || MK[y * W + x]) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) AL[o + c] *= k;\n}\n// A hold, lit from above, and its shadow.\nfunction hold(x, y, t, c) {\n  const S = SHAPES[t];\n  for (let j = 0; j \u003c S.length; j += 2) shade(x + +S[j] - 2, y + +S[j + 1], 0.5), shade(x + +S[j] - 1, y + +S[j + 1], 0.72);\n  for (let j = 0; j \u003c S.length; j += 2) px(x + +S[j] - 2, y + +S[j + 1] - 1, c, [1.22, 1.08, 0.78][S[j + 1]] - 0.06 * (S[j] - 2), 0.55);\n}\n(function build() {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3;\n      let r, g, b, L = 0.85, e = 0;\n      if (y \u003c 4) {\n        // The ceiling: a truss, a lamp over each lane that is also a UV tube.\n        r = g = b = y === 1 ? ((x + 1) % 6 \u003c 2 ? 56 : 32) : y ? 9 : 14;\n        for (const l of LX) if ((y === 2 && abs(x - l) \u003c 2) || (y === 3 && x === l)) (e = x === l ? 1 : 0.6), (r = 255 * e), (g = 238 * e), (b = 210 * e);\n        (L = 1.47), (EM[o] = 175 * e), (EM[o + 1] = 100 * e), (EM[o + 2] = 255 * e);\n      } else if (y \u003c FL) {\n        // Plywood sheets 12 by 23, grain running up them. Seams and T-nuts darken it.\n        const qx = floor((x + 6) / 12), qy = floor((y - 4) / 23);\n        let k = (0.86 + 0.18 * hash(qx + 3, qy + 7)) * (0.9 + 0.14 * hash(x, qy) * (0.6 + 0.4 * sin(y * 0.2 + x)));\n        if ((x + 6) % 12 === 0 || (y - 4) % 23 === 22) k *= 0.62;\n        if (y % 4 === 1 && (x + (y >> 2) * 2) % 4 === 0) k *= 0.84;\n        if (y >= KICK) (k = y === KICK ? 0.7 : 1), (r = 50 * k), (g = 50 * k), (b = 56 * k);\n        else (r = 132 * k), (g = 101 * k), (b = 70 * k);\n        // Lamp light fanning down from the top, a wash over the floor.\n        L = 0.62 + 0.4 * ease((y - 86) / 34);\n        for (const l of LX) L += 0.95 * exp(-(((x - l) / (1.5 + 0.28 * y)) ** 2) - (y - 4) / 34) * ease((y - 3) / 6);\n      } else {\n        // Blue foam mats with seams; the front lip catches the light.\n        const k = (x % 16 === 7 ? 0.6 : 1) * (y === FL ? 1.35 : 0.88 + 0.03 * (y - FL));\n        (r = 34 * k), (g = 62 * k), (b = 140 * k);\n      }\n      (AL[o] = r), (AL[o + 1] = g), (AL[o + 2] = b), (L0[i] = L);\n    }\n  for (const [cx, cy, w, h, c] of VOL)\n    for (let y = floor(cy - h); y \u003c= cy + h; y++)\n      for (let x = floor(cx - w); x \u003c= cx + w; x++) {\n        const dx = (x + 0.5 - cx) / w, dy = (y + 0.5 - cy) / h;\n        if (abs(dx) + abs(dy) \u003c= 1) px(x, y, hex(c), (dy \u003c 0 ? 1.1 : 0.62) + (dx \u003c 0 ? 0.08 : -0.12), 0.08);\n      }\n  for (let y = FL - 1; y > 4; y--) for (let x = 0; x \u003c W; x++) if (MK[(y - 1) * W + x] && !MK[y * W + x]) shade(x, y, 0.55);\n  MK.fill(0);\n  for (let k = 0; k \u003c 6 * NH; k++) {\n    const r = floor(k / NH), i = k % NH, s = i & 1 ? 1 : -1, c = RC[r];\n    HX[k] = round(rcx(r) - 0.5 + s * (s === RS[r] ? 3.4 + 1.2 * hash(r, i) : 3 + 0.5 * hash(r, i)));\n    HY[k] = round(HY0 - HS * i + (hash(r + 5, i) - 0.5) * 1.6);\n    (CX[k] = round(HX[k] + s * 0.6 - 0.5)), (CY[k] = HY[k] + CHIP);\n    // The two start holds are taped.\n    hold(HX[k], HY[k], i \u003c 2 ? 0 : i === NH - 1 ? 4 : floor(hash(k, 11) * 5), c);\n    if (i \u003c 2) for (let j = 2; j \u003c 4; j++) px(HX[k] + s * j, HY[k] + j - 1, c, 0.8, 0.5);\n  }\n  // Quickdraws, a white sling between hanger and carabiner, and the anchors.\n  for (const l of LX) {\n    for (const b of BOLT) for (let j = 0; j \u003c 4; j++) px(l, b + j, STEEL[j], 1, j % 3 ? 0.7 : 0.1);\n    px(l - 1, 8, STEEL[0], 1, 0.1), px(l + 1, 8, STEEL[0], 1, 0.1), px(l, 9, STEEL[3], 1, 0.1), px(l, 10, STEEL[1], 1, 0.4);\n  }\n})();\n\n// A plan step: limb (hands 0 1, feet 2 3, 4 waits), target, which, seconds,\n// then what; LOOP brings the rope up with the hand.\nconst HOLD = 0, CHIPT = 1, BAG = 2, HARN = 3, DRAW = 4, ANCHOR = 5;\nconst PUFF = 1, CLIP = 2, ANCH = 3, GRAB = 4, LOOP = 5;\nconst START = 0, CLIMB = 1, LOWER = 2, LAND = 3, PULL = 4, SWAP = 5, FALL = 6;\nconst PC = 96, PRE = [17, 31, 4.5], SRX = 17, SRY = 28, TG = F32(2);\n\nconst party = (l) => ({ l, r: ROUTE[l][0], on: 0, c: 0, pt: 0, lhx: 0, lvx: 0, E: F32(8), plan: [], bl: 0, feed: 0, len: 0, pa: 0, pv: 0 });\n\nexport function setup(params) {\n  params.s = { P: [0, 1, 2].map(party), F: F32(N * 3), LB: F32(N * 3), pc: F32(PC * 5), init: 0, k4: 0.06, r0: 0, t: 0 };\n}\n\nfunction target(P, kind, k) {\n  const R = P.r * NH + k;\n  if (kind === HOLD) (TG[0] = HX[R] + 0.5), (TG[1] = HY[R] + 0.2);\n  else if (kind === CHIPT) (TG[0] = CX[R] + 1), (TG[1] = CY[R] + 0.1);\n  else if (kind \u003c DRAW) (TG[0] = P.hx + (kind === BAG ? 0.4 : 0)), (TG[1] = P.hy - (kind === BAG ? 0.6 : 1.2));\n  else (TG[0] = lane(P)), (TG[1] = kind === DRAW ? BOLT[k] + CLP : RING);\n}\nfunction aim(E, k, ...T) {\n  for (let j = 0; j \u003c 8; j++) E[j] += (T[j] - E[j]) * k;\n}\n\nfunction enter(P, ph) {\n  (P.ph = ph), (P.pt = 0), (P.plan.length = 0), (P.mv = -1);\n  if (ph !== START) return;\n  // Chalk each hand and set it on a taped start hold, then step on.\n  Object.assign(P, { hx: rcx(P.r), hy: STAND, iL: 0, iR: 1, seq: 0, nc: 0, anc: 0, loop: 0, hm: 0, vx: 0, vy: 0 });\n  P.E.set([P.hx - 2.5, STAND + 1, P.hx + 2.5, STAND + 1, P.hx - 1.15, FT, P.hx + 1.15, FT]);\n  for (const h of [0, 1]) P.plan.push([h, BAG, 0, 0.3], [4, 0, 0, 0.22, PUFF], [h, HOLD, h, 0.42, GRAB]);\n  P.plan.push([2, CHIPT, 0, 0.32], [3, CHIPT, 1, 0.32], [4, 0, 0, 0.2]);\n}\n\nfunction puff(S, x, y, n, sp) {\n  const p = S.pc, R = Math.random;\n  for (let k = 0; k \u003c PC * 5 && n > 0; k += 5) if (p[k + 4] \u003c= 0) (p[k] = x), (p[k + 1] = y), (p[k + 2] = (R() - 0.5) * 8 * sp), (p[k + 3] = (R() - 0.75) * 5 * sp), (p[k + 4] = 0.6 + 0.6 * R()), n--;\n}\n\nfunction advance(S, P, d) {\n  const E = P.E, m = P.mv, te = P.te;\n  P.u += d / P.dur;\n  if (m \u003c 4) {\n    target(P, P.mk, P.mi);\n    const e = ease(P.u), a = sin(PI * min(1, P.u));\n    E[m * 2] = mix(P.m0x, TG[0], e) + (m & 1 ? a : -a) * (m \u003c 2 ? 0.9 : 1.4);\n    E[m * 2 + 1] = mix(P.m0y, TG[1], e) - a * 0.7;\n  }\n  if (P.u \u003c 1) return;\n  P.mv = -1;\n  if (te === PUFF) puff(S, P.hx + 0.4, P.hy - 0.8, 8, 1);\n  else if (te === GRAB && Math.random() \u003c 0.4) puff(S, E[m * 2], E[m * 2 + 1], 2, 0.4);\n  else if (te === CLIP) P.nc++, (P.loop = 0);\n  else if (te === ANCH) (P.anc = 1), (P.loop = 0), enter(P, LOWER);\n}\n\n// Clip a draw level with her chest or the anchor at the top; else step a foot\n// up, then reach with that side's hand.\nfunction decide(P) {\n  const R = P.r * NH, pl = P.plan;\n  if (P.nc \u003c 8 && BOLT[P.nc] + CLP > P.hy - TOR - 1.5) {\n    const h = HY[R + P.iL] > HY[R + P.iR] ? 0 : 1;\n    pl.push([h, HARN, 0, 0.22], [h, DRAW, P.nc, 0.3, 0, LOOP], [4, 0, 0, 0.16, CLIP], [h, HOLD, h ? P.iR : P.iL, 0.24, GRAB]);\n  } else if (P.iL + 2 >= NH && P.iR + 2 >= NH) pl.push([1, HARN, 0, 0.22], [1, ANCHOR, 0, 0.36, 0, LOOP], [4, 0, 0, 0.3, ANCH]);\n  else {\n    const q = P.seq, h = q \u003c 2 ? 0 : 1, k = (h ? P.iR : P.iL) + 2;\n    P.seq = (q + 1) & 3;\n    if (k >= NH) return;\n    if (!(q & 1)) return pl.push([2 + h, CHIPT, k, 0.28], [4, 0, 0, 0.06]);\n    if (P.hm++ % 3 === 2) pl.push([h, BAG, 0, 0.24], [4, 0, 0, 0.22, PUFF]);\n    pl.push([h, HOLD, k, 0.34, GRAB], [4, 0, 0, 0.08]);\n    h ? (P.iR = k) : (P.iL = k);\n  }\n}\n\n// Back on after a fall or a change of route: the holds nearest her hips.\nfunction rejoin(P) {\n  const R = P.r * NH;\n  let i = 0;\n  for (let j = 2; j + 1 \u003c NH; j += 2) if (abs(CY[R + j] + CY[R + j + 1] - 12 - 2 * P.hy) \u003c abs(CY[R + i] + CY[R + i + 1] - 12 - 2 * P.hy)) i = j;\n  enter(P, CLIMB);\n  Object.assign(P, { iL: i, iR: i + 1, seq: 0, loop: 0, vx: 0, vy: 0 });\n  P.plan.push([1, HOLD, i + 1, 0.45, GRAB], [0, HOLD, i, 0.45, GRAB], [3, CHIPT, i + 1, 0.35], [2, CHIPT, i, 0.35], [4, 0, 0, 0.3]);\n}\nfunction fall(P) {\n  if (P.ph !== CLIMB) return;\n  P.R = P.nc ? hyp(P.hx - LX[P.l] - 0.5, P.hy - 1 - BOLT[P.nc - 1] - CLP) + 3 + (P.loop ? 4 : 0) : 0;\n  enter(P, FALL);\n  (P.vy = -8), (P.vx = 0), (P.loop = 0);\n}\n\n// The rope from the guide hand through the clipped draws to the climber.\nconst RP = F32(48);\nlet RLEN = 0;\nfunction path(P, gx, gy) {\n  let n = 0;\n  RLEN = 0;\n  const put = (x, y) => ((RP[n++] = x), (RP[n++] = y));\n  put(gx, gy);\n  for (let j = 0; j \u003c P.nc; j++) put(lane(P), BOLT[j] + CLP);\n  if (P.anc) put(lane(P), RING);\n  if (P.ph === PULL) put(P.ex, P.ey);\n  else {\n    if (P.loop) put(P.E[P.loop * 2 - 2], P.E[P.loop * 2 - 1]);\n    put(P.hx, P.hy - 1);\n  }\n  for (let j = 2; j \u003c n; j += 2) RLEN += hyp(RP[j] - RP[j - 2], RP[j + 1] - RP[j - 1]);\n  return n >> 1;\n}\n\nfunction stepParty(S, P, d) {\n  P.pt += d;\n  const E = P.E, ph = P.ph, x = P.hx, y = P.hy, k = 1 - exp(-d * 9);\n  if (ph \u003c= CLIMB) {\n    if (P.mv >= 0) advance(S, P, d);\n    if (P.mv \u003c 0 && P.ph === ph) {\n      const it = P.plan.shift();\n      if (it) {\n        (P.mv = it[0]), (P.mk = it[1]), (P.mi = it[2]), (P.dur = it[3]), (P.te = it[4] || 0), (P.u = 0);\n        if (P.mv \u003c 4) (P.m0x = E[P.mv * 2]), (P.m0y = E[P.mv * 2 + 1]);\n        if (it[5] === LOOP) P.loop = P.mv + 1;\n      } else if (ph === START) P.ph = CLIMB;\n      else decide(P);\n    }\n    // Hips where all four limbs reach, hanging on the arms and off the moving one.\n    const lo = max(E[5], E[7]) - 9.3, hi = min(E[1], E[3]) + 8 + TOR;\n    let ty = ((E[5] + E[7]) / 2 - 7 + hi) / 2, tx = 0.55 * ((E[4] + E[6]) / 2) + 0.45 * ((E[0] + E[2]) / 2);\n    ty = lo \u003c= hi ? cl(ty, lo, hi) : (lo + hi) / 2;\n    if (P.mv >= 0 && P.mv \u003c 4) tx -= (P.mv & 1 ? 1 : -1) * 0.7;\n    if (P.ph === ph) (P.hx += (tx - x) * k), (P.hy += (ty - y) * k);\n  } else if (ph === LOWER) {\n    // Sat in her harness and walking her feet down the wall.\n    P.hy = min(STAND, y + 12 * d * ease(P.pt * 1.5));\n    P.hx += (rcx(P.r) - x) * (1 - exp(-d * 1.5));\n    const f = P.hy * 0.45;\n    aim(E, k, x - 0.4, y - TOR - 1.8, x + 0.6, y - TOR - 3.6, x - 3.2, y + 5.3 - 1.6 * max(0, sin(f)), x + 3.2, y + 5.3 - 1.6 * max(0, -sin(f)));\n    if (P.hy >= STAND - 0.01) enter(P, LAND);\n  } else if (ph === LAND || ph === PULL) {\n    // Down, she unties and the belayer pulls the rope through.\n    P.hy += (STAND - y) * k;\n    const u = ph === LAND && P.pt > 0.5 && P.pt \u003c 1.3;\n    aim(E, k, x + (u ? -0.8 : -2.5), y + (u ? -1 : 1), x + (u ? 0.8 : 2.5), y + (u ? -1.3 : 1), x - 1.15, FT, x + 1.15, FT);\n    if (ph === LAND && P.pt > 1.4) enter(P, PULL), (P.ex = x), (P.ey = y - 1), (P.pull = 0);\n    if (ph === PULL && (P.pull += 110 * d) > P.len + 2) enter(P, SWAP);\n  } else if (ph === SWAP) {\n    if (P.pt > 1.6) (P.c ^= 1), enter(P, START);\n  } else {\n    // Falling until the rope from the last draw comes tight, a stretchy catch.\n    P.vy += 150 * d;\n    if (P.nc) {\n      const dx = x - LX[P.l] - 0.5, dy = y - 1 - BOLT[P.nc - 1] - CLP, L = hyp(dx, dy) + 1e-6, e = L - P.R;\n      if (e > 0) {\n        const ux = dx / L, uy = dy / L, f = (80 * e + 8 * (P.vx * ux + P.vy * uy)) * d;\n        (P.vx -= f * ux), (P.vy -= f * uy), (P.bl = max(P.bl, min(3, e)));\n      }\n    }\n    (P.hx += P.vx * d), (P.hy += P.vy * d);\n    if (P.hy >= STAND) {\n      (P.hy = STAND), (P.vy = P.vx = 0);\n      if (!P.nc) return enter(P, START);\n    }\n    const fl = P.pt \u003c 0.45, X = P.hx, Y = P.hy - TOR;\n    aim(E, 1 - exp(-d * (fl ? 6 : 4)), X - (fl ? 3.2 : 0.4), Y - (fl ? 4.5 : 2.5), X + (fl ? 3.2 : 0.5), Y - (fl ? 4.5 : 4.2), X - 2.7, P.hy + (fl ? 7.5 : 4.4), X + 2.7, P.hy + (fl ? 7 : 4.4));\n    if (P.pt > 2.4) rejoin(P);\n  }\n  P.bl *= exp(-d * 1.8);\n  // Rope paid out moves the belayer's guide hand; the ponytail swings.\n  const L = (path(P, bxOf(P), STAND - 4), RLEN), vx = (P.hx - P.lhx) / max(d, 1e-4);\n  if (P.ph \u003c= CLIMB) P.feed += abs(L - P.len);\n  if (P.ph !== PULL) P.len = L;\n  P.pv += (-28 * P.pa - 2.6 * P.pv) * d - cl(vx - P.lvx, -20, 20) * 0.04;\n  (P.pa = cl(P.pa + P.pv * d, -1, 1)), (P.lhx = P.hx), (P.lvx = vx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const r0 = min(5, floor(cl(k[0], 0, 1) * 6)), np = round(cl(k[2], 1, 3)), l0 = RL[r0], sp = cl(k[1], 0.2, 3);\n  (S.k4 = cl(k[3], -1, 1)), (S.r0 = r0);\n  for (const P of S.P) {\n    const r = P.l === l0 ? r0 : ROUTE[P.l][RS[r0] > 0 ? 1 : 0], j = (P.l - l0 + 3) % 3;\n    if (j >= np) P.on = 0;\n    else if (!P.on) {\n      (P.on = 1), (P.r = r), enter(P, START);\n      // Each party opens some way into its climb, further at a faster Speed.\n      if (!S.init) for (let n = PRE[j] * 30; n > 0; n--) stepParty(S, P, (sp / 2) ** 1.6 / 30);\n    } else if (P.r !== r) (P.r = r), P.ph === CLIMB ? rejoin(P) : P.ph === START && enter(P, START);\n  }\n  if (!S.init) S.pc.fill(0), (S.init = 1);\n  if (input.btnPressed && input.btnPressed[0]) fall(S.P[l0]);\n  const d = (cl(dt || 0, 0, 0.1) * sp) / 2, p = S.pc;\n  S.t += d;\n  for (const P of S.P) if (P.on) stepParty(S, P, d);\n  for (let j = 0, e = exp(-2 * d); j \u003c PC * 5; j += 5) if (p[j + 4] > 0) (p[j] += p[j + 2] * d), (p[j + 1] += p[j + 3] * d), (p[j + 2] *= e), (p[j + 3] = p[j + 3] * e + 2 * d), (p[j + 4] -= 0.6 * d);\n}\n\nlet F = null, LB = null;\nfunction splat(x, y, c, k, a) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1);\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) blend((yy * W + xx) * 3, c, k, (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy) * a);\n  }\n}\nconst lightAt = (x, y) => {\n  const o = (cl(floor(y), 0, H - 1) * W + cl(floor(x), 0, W - 1)) * 3;\n  return cl(0.3 + 0.35 * (LB[o] + LB[o + 1]), 0.62, 1.2);\n};\n// A rope span, slack spans sagging; the weave's flecks ride with the rope.\nfunction span(x0, y0, x1, y1, sag, s0, lim, rc, lf) {\n  const L = hyp(x1 - x0, y1 - y0), n = ceil(L * 2.2) + 1, mx = (x0 + x1) / 2 + sag * 0.3, my = (y0 + y1) / 2 + sag * 2;\n  for (let i = 0; i \u003c= n; i++) {\n    const u = i / n, s = s0 + u * L, q = s - lim + 1000, a = (1 - u) * (1 - u), b = 2 * u * (1 - u), c = u * u;\n    if (s > lim) break;\n    const w = q * 0.2 - floor(q * 0.2) \u003c 0.16;\n    splat(a * x0 + b * mx + c * x1, a * y0 + b * my + c * y1, w ? STEEL[1] : rc, w ? lf : (0.74 + 0.26 * cos(q * 2.3)) * lf, 0.9);\n  }\n  return s0 + L;\n}\n\n// A person from behind, facing the wall: hips at hx, hy, hands and feet in E.\nconst PT = F32(30 * 6), BE = F32(8);\nlet NP = 0, KX = 0, KY = 0, EX = 0, EY = 0;\nconst cap = (...a) => (PT.set(a, NP * 6), NP++);\n// Two-bone reach; elbows bend out and down, knees out and up.\nfunction ik(ax, ay, bx, by, l1, l2, sg, up) {\n  let dx = bx - ax, dy = by - ay, L = hyp(dx, dy) + 1e-6;\n  const Lm = l1 + l2 - 0.05;\n  if (L > Lm) (bx = ax + (dx / L) * Lm), (by = ay + (dy / L) * Lm), (dx = bx - ax), (dy = by - ay), (L = Lm);\n  const a = (l1 * l1 - l2 * l2 + L * L) / (2 * L), h = sqrt(max(0, l1 * l1 - a * a)), ux = dx / L, uy = dy / L, f = -uy * sg + up * 0.3 * ux \u003c 0 ? -h : h;\n  (KX = ax + ux * a - uy * f), (KY = ay + uy * a + ux * f), (EX = bx), (EY = by);\n}\nfunction person(hx, hy, E, o, lf, pa) {\n  NP = 0;\n  const sx = hx + 0.2 * ((E[0] + E[2]) / 2 - hx), sy = hy - TOR;\n  for (let s = -1; s \u003c 2; s += 2) {\n    const j = s + 1;\n    ik(hx + s * 1.15, hy + 0.4, E[4 + j], E[5 + j], TH, SN, s, -1);\n    cap(hx + s * 1.15, hy + 0.4, KX, KY, 1.1, 3), cap(KX, KY, EX, EY, 0.83, 3), cap(EX, EY, EX + s * 0.9, EY + 0.3, 0.7, 5);\n  }\n  cap(hx - 1.1, hy, hx + 1.1, hy, 1.25, 3), cap(hx, hy - 1, sx, sy + 1, 1.95, 2), cap(sx - 2.2, sy + 0.7, sx + 2.2, sy + 0.7, 1.15, 2);\n  cap(hx - 1.8, hy - 1.1, hx + 1.8, hy - 1.1, 0.55, 4), cap(hx + 0.3, hy - 1.2, hx + 0.3, hy - 0.1, 0.8, 6);\n  for (let s = -1; s \u003c 2; s += 2) {\n    ik(sx + s * 2.3, sy + 0.8, E[s + 1], E[s + 2], UA, FA, s, 1);\n    cap(sx + s * 2.3, sy + 0.8, KX, KY, 0.76, 0), cap(KX, KY, EX, EY, 0.64, 0), cap(EX, EY, EX, EY - 0.2, 0.75, 0);\n  }\n  cap(sx, sy + 0.2, sx, sy - 1.2, 0.7, 0), cap(sx, sy - 3, sx, sy - 3.1, 1.95, 1);\n  if (o[7]) cap(sx, sy - 3, sx + 3.7 * sin(pa), sy - 3 + 4.1 * cos(pa), 0.63, 1);\n  // A dark rim round her, holds near her greyed, then her.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let y = max(0, floor(hy - 21)); y \u003c min(H, hy + 16); y++)\n      for (let x = max(0, floor(hx - 13)); x \u003c min(W, hx + 14); x++) {\n        const qx = x + 0.5, qy = y + 0.5, i = (y * W + x) * 3;\n        let dm = 9;\n        for (let j = 0; j \u003c NP * 6; j += 6) {\n          const ax = PT[j], ay = PT[j + 1], dx = PT[j + 2] - ax, dy = PT[j + 3] - ay, r = PT[j + 4];\n          if (abs(qx - ax - dx / 2) > abs(dx) / 2 + r + 3 || abs(qy - ay - dy / 2) > abs(dy) / 2 + r + 3) continue;\n          const tt = cl(((qx - ax) * dx + (qy - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1), e = hyp(qx - ax - dx * tt, qy - ay - dy * tt) - r;\n          if (pass && e \u003c 0.5) blend(i, o[PT[j + 5]], lf, min(1, 0.5 - e));\n          dm = min(dm, e);\n        }\n        const g = ease((dm - 1.3) / 1.4), m = ((F[i] + F[i + 1] + F[i + 2]) / 3) * 0.6;\n        if (!pass && g \u003c 1) for (let c = 0; c \u003c 3; c++) F[i + c] = mix(m, F[i + c], g) * (0.25 + 0.75 * g);\n      }\n}\nfunction walk(x, ph, o, lf) {\n  const y = STAND - 0.3 * abs(sin(ph)), s = sin(ph), s2 = sin(ph + 1.6);\n  BE.set([x - 2.5 - 0.6 * s, y + 0.8, x + 2.5 - 0.6 * s, y + 0.8, x - 1.3 + 0.8 * s, FT - 1.2 * max(0, cos(ph)), x + 1.3 + 0.8 * s2, FT - 1.2 * max(0, cos(ph + 1.6))]);\n  person(x, y, BE, o, lf, 0);\n}\n\n// A party: rope pile, rope, climber, then the belayer in front.\nfunction scene(S, P, t) {\n  const gs = RS[P.r], bx = bxOf(P), cx = rcx(P.r), A = OUT[P.l * 2 + P.c], B = OUT[P.l * 2 + 1 - P.c], rc = ROPE[P.l];\n  const lfB = lightAt(bx, FL - 10), px0 = bx - gs * 2.6;\n  for (let j = 0; j \u003c 22; j++) splat(px0 + 2.4 * cos(j * 0.6) * (1 - j * 0.02), FL + 3.2 + 0.9 * sin(j * 0.6), rc, 0.8 * lfB, 0.8);\n  if (P.ph === SWAP) {\n    const e = ease(P.pt / 1.6), ph = P.pt * 9;\n    return walk(mix(cx, bx, e), ph, A, lfB), walk(mix(bx, cx, e), ph + PI, B, lfB);\n  }\n  // The belayer: guide hand up the rope feeding it out, brake hand low.\n  const hy = STAND - P.bl, hx = bx + gs * P.bl * 0.4, gi = gs > 0 ? 2 : 0, bi = 2 - gi;\n  let gy = hy - 3.4 - 1.8 * abs(sin(P.feed * 0.35)), by = hy + 0.8;\n  if (P.ph === PULL) (gy = hy - 3 - 2.6 * abs(sin(t * 6))), (by = hy - 3 - 2.6 * abs(cos(t * 6)));\n  else if (P.ph === LOWER) by = hy + 0.6 + 0.8 * sin(t * 5);\n  (BE[gi] = hx + gs * 0.7), (BE[gi + 1] = gy), (BE[bi] = hx - gs * 2.2), (BE[bi + 1] = by);\n  (BE[4] = hx - 1.15), (BE[6] = hx + 1.15), (BE[5] = BE[7] = min(FT, hy + 9.5));\n  span(BE[bi], by, px0, FL + 2.5, 1.2, 0, 1e9, rc, lightAt(BE[bi], by + 2));\n  const n = path(P, BE[gi], gy), lim = RLEN - (P.ph === PULL ? P.pull : 0), taut = P.ph === FALL || P.ph === LOWER || P.ph === PULL;\n  for (let j = 1, s = 0; j \u003c n; j++) {\n    const sag = j === 1 ? (n === 2 && !taut ? 2.5 : 1.5) : j === n - 1 && !taut ? 1 : 0;\n    s = span(RP[j * 2 - 2], RP[j * 2 - 1], RP[j * 2], RP[j * 2 + 1], sag, s, lim, rc, lightAt(RP[j * 2], RP[j * 2 + 1]));\n  }\n  person(P.hx, P.hy, P.E, A, lightAt(P.hx, P.hy - 4), P.pa);\n  person(hx, hy, BE, B, lfB, 0.2);\n}\n\n// House light tinted by the route, a follow spot with a gel on each climber.\nfunction light(S) {\n  const k = S.k4, hs = k \u003c 0 ? mix(0.68, 1.12, -k) : mix(0.68, 0.06, k), lv = k \u003c 0 ? mix(1, 0.35, -k) : mix(1, 1.2, k), u = max(0, k);\n  const T = [1, 0.95, 0.86].map((w, j) => mix(w, RC[S.r0][j] / 255, 0.14) * hs), V = [0.1 * u, 0.04 * u, 0.24 * u];\n  for (let o = 0; o \u003c N * 3; o++) LB[o] = L0[(o / 3) | 0] * T[o % 3];\n  for (const P of S.P) {\n    if (!P.on) continue;\n    const sx = P.hx, sy = P.hy - 4, G = [1, 0.96, 0.9].map((w, j) => lv * mix(w, RC[P.r][j] / 255, 0.35));\n    for (let y = max(4, floor(sy - SRY)); y \u003c min(FL, sy + SRY); y++)\n      for (let x = max(0, floor(sx - SRX)); x \u003c min(W, sx + SRX); x++) {\n        const q = ((y + 0.5 - sy) / SRY) ** 2 + ((x + 0.5 - sx) / SRX) ** 2, o = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3 && q \u003c 1; c++) LB[o + c] += (1 - q) * (1 - q) * G[c];\n      }\n  }\n  for (let o = 0; o \u003c N * 3; o++) F[o] = AL[o] * (LB[o] + V[o % 3]) + EM[o] * u;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  (F = S.F), (LB = S.LB);\n  light(S);\n  for (const P of S.P) if (P.on) scene(S, P, S.t);\n  const p = S.pc, u = max(0, S.k4);\n  for (let j = 0, C = [240, 240 - 40 * u, 236 + 19 * u]; j \u003c PC * 5; j += 5) if (p[j + 4] > 0) splat(p[j], p[j + 1], C, 1, min(1, p[j + 4]) * 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-climbing-wall","type":"code","name":"climbing-wall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Climbing Wall\n// Family:  sport\n// Idea:    A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after an indoor lead-climbing wall\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1\n//\n// Knob 1: Route. The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour.\n// Knob 2: Speed. At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall.\n// Knob 3: Climbers. One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour.\n// Knob 4: Light. House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes.\n// Buttons: K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.\n\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (u) => ((u = cl(u, 0, 1)), u * u * (3 - 2 * u));\nconst hyp = (x, y) => sqrt(x * x + y * y), F32 = (n) => new Float32Array(n);\nconst hex = (h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));\nconst blend = (o, c, k, a) => {\n  for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] * k - F[o + j]) * a;\n};\nconst hash = (i, j) => ((Math.imul(i * 7919 + j * 104729 + 17, 2654435761) >>> 8) & 1023) / 1024;\n\n// Rows of the mat and the kickboard. Each lane's bolt line LX: eight quickdraws\n// (the rope runs CLP under the bolt) and a lower-off ring.\nconst FL = 121, FT = FL - 0.5, KICK = 117, LX = [11, 32, 53], BOLT = [95, 84, 73, 62, 51, 40, 29, 18], CLP = 3.5, RING = 11;\n// A route: NH hand holds HS rows apart, left and right in turn, a foot chip\n// CHIP rows under each. A lane has two routes, one each side of its bolts.\nconst NH = 20, HY0 = 105, HS = 5, CHIP = 15;\n// The body in LEDs: arm, forearm, thigh, shin, hip to shoulders; hips standing.\nconst UA = 4.1, FA = 4.1, TH = 4.8, SN = 4.8, TOR = 6, STAND = FL - 10.05;\n// Route colours in Route's order with the lane and side each is set on.\nconst RC = \"3ceb6e ffd41e 288cff ff46aa ff7614 af5fff\".split(\" \").map(hex);\nconst RL = [1, 2, 0, 1, 2, 0], RS = [-1, -1, -1, 1, 1, 1], ROUTE = [[2, 5], [0, 3], [1, 4]];\nconst rcx = (r) => LX[RL[r]] + 0.5 + RS[r] * 5;\nconst lane = (P) => LX[P.l] + 0.5, bxOf = (P) => lane(P) - RS[P.r] * 3.5;\n// A rope a lane, two people a party: skin, hair, top, tights, harness, shoes,\n// chalk bag, 1 for a ponytail.\nconst ROPE = \"46d7ff ff7828 beff46\".split(\" \").map(hex);\nconst OUT = [\n  \"ecac84 c86032 ff6054 968cc4 ffc81e 8246d2 e6283c 1\", \"c88c64 ebc878 f5f5f0 3c60b4 96e628 f05a28 2878e6 0\",\n  \"ecb088 60301a 1ec8cd acb2c4 ff4696 464650 fad228 1\", \"a06e50 bebec4 facd32 466ed2 e63278 3c8cf0 3cb450 0\",\n  \"ecac84 f0dcaa 965ff0 c8c8ce ffc81e 288cf0 f0f0f0 1\", \"be825f 281e1a 46c864 a03c54 ff5a28 ebebeb c83cc8 0\",\n].map((s) => s.split(\" \").map((h, i) => (i \u003c 7 ? hex(h) : +h)));\n\n// The wall is built once, with the house light on it in L0.\nconst AL = F32(N * 3), EM = F32(N * 3), L0 = F32(N), MK = new Uint8Array(N);\nconst HX = F32(6 * NH), HY = F32(6 * NH), CX = F32(6 * NH), CY = F32(6 * NH);\n// Jug, crimp, sloper, pinch, big jug: LEDs as digit pairs, column + 2, row + 1.\nconst SHAPES = [\"112131122232\", \"112131\", \"2011213122\", \"203021312232\", \"1020300111213141122232\"];\n// Volumes, pyramids on a diamond: middle, half width, half height, colour.\nconst VOL = [[21.5, 46, 4.5, 7, \"9698a2\"], [43, 84, 4.5, 6.5, \"3c969c\"], [21.5, 100, 4, 5, \"c49664\"], [43, 26, 4, 6, \"d6d6dc\"], [1, 70, 3.5, 8, \"785496\"], [63, 52, 3.5, 7, \"9698a2\"]];\nconst STEEL = \"bebec8 ece8de dcd8d0 aab0bc\".split(\" \").map(hex);\n// Colour c times k on the wall, e of it glowing under UV.\nfunction px(x, y, c, k, e) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) (AL[o + j] = min(255, c[j] * k)), (EM[o + j] = AL[o + j] * e);\n  MK[y * W + x] = 1;\n}\nfunction shade(x, y, k) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL || MK[y * W + x]) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) AL[o + c] *= k;\n}\n// A hold, lit from above, and its shadow.\nfunction hold(x, y, t, c) {\n  const S = SHAPES[t];\n  for (let j = 0; j \u003c S.length; j += 2) shade(x + +S[j] - 2, y + +S[j + 1], 0.5), shade(x + +S[j] - 1, y + +S[j + 1], 0.72);\n  for (let j = 0; j \u003c S.length; j += 2) px(x + +S[j] - 2, y + +S[j + 1] - 1, c, [1.22, 1.08, 0.78][S[j + 1]] - 0.06 * (S[j] - 2), 0.55);\n}\n(function build() {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3;\n      let r, g, b, L = 0.85, e = 0;\n      if (y \u003c 4) {\n        // The ceiling: a truss, a lamp over each lane that is also a UV tube.\n        r = g = b = y === 1 ? ((x + 1) % 6 \u003c 2 ? 56 : 32) : y ? 9 : 14;\n        for (const l of LX) if ((y === 2 && abs(x - l) \u003c 2) || (y === 3 && x === l)) (e = x === l ? 1 : 0.6), (r = 255 * e), (g = 238 * e), (b = 210 * e);\n        (L = 1.47), (EM[o] = 175 * e), (EM[o + 1] = 100 * e), (EM[o + 2] = 255 * e);\n      } else if (y \u003c FL) {\n        // Plywood sheets 12 by 23, grain running up them. Seams and T-nuts darken it.\n        const qx = floor((x + 6) / 12), qy = floor((y - 4) / 23);\n        let k = (0.86 + 0.18 * hash(qx + 3, qy + 7)) * (0.9 + 0.14 * hash(x, qy) * (0.6 + 0.4 * sin(y * 0.2 + x)));\n        if ((x + 6) % 12 === 0 || (y - 4) % 23 === 22) k *= 0.62;\n        if (y % 4 === 1 && (x + (y >> 2) * 2) % 4 === 0) k *= 0.84;\n        if (y >= KICK) (k = y === KICK ? 0.7 : 1), (r = 50 * k), (g = 50 * k), (b = 56 * k);\n        else (r = 132 * k), (g = 101 * k), (b = 70 * k);\n        // Lamp light fanning down from the top, a wash over the floor.\n        L = 0.62 + 0.4 * ease((y - 86) / 34);\n        for (const l of LX) L += 0.95 * exp(-(((x - l) / (1.5 + 0.28 * y)) ** 2) - (y - 4) / 34) * ease((y - 3) / 6);\n      } else {\n        // Blue foam mats with seams; the front lip catches the light.\n        const k = (x % 16 === 7 ? 0.6 : 1) * (y === FL ? 1.35 : 0.88 + 0.03 * (y - FL));\n        (r = 34 * k), (g = 62 * k), (b = 140 * k);\n      }\n      (AL[o] = r), (AL[o + 1] = g), (AL[o + 2] = b), (L0[i] = L);\n    }\n  for (const [cx, cy, w, h, c] of VOL)\n    for (let y = floor(cy - h); y \u003c= cy + h; y++)\n      for (let x = floor(cx - w); x \u003c= cx + w; x++) {\n        const dx = (x + 0.5 - cx) / w, dy = (y + 0.5 - cy) / h;\n        if (abs(dx) + abs(dy) \u003c= 1) px(x, y, hex(c), (dy \u003c 0 ? 1.1 : 0.62) + (dx \u003c 0 ? 0.08 : -0.12), 0.08);\n      }\n  for (let y = FL - 1; y > 4; y--) for (let x = 0; x \u003c W; x++) if (MK[(y - 1) * W + x] && !MK[y * W + x]) shade(x, y, 0.55);\n  MK.fill(0);\n  for (let k = 0; k \u003c 6 * NH; k++) {\n    const r = floor(k / NH), i = k % NH, s = i & 1 ? 1 : -1, c = RC[r];\n    HX[k] = round(rcx(r) - 0.5 + s * (s === RS[r] ? 3.4 + 1.2 * hash(r, i) : 3 + 0.5 * hash(r, i)));\n    HY[k] = round(HY0 - HS * i + (hash(r + 5, i) - 0.5) * 1.6);\n    (CX[k] = round(HX[k] + s * 0.6 - 0.5)), (CY[k] = HY[k] + CHIP);\n    // The two start holds are taped.\n    hold(HX[k], HY[k], i \u003c 2 ? 0 : i === NH - 1 ? 4 : floor(hash(k, 11) * 5), c);\n    if (i \u003c 2) for (let j = 2; j \u003c 4; j++) px(HX[k] + s * j, HY[k] + j - 1, c, 0.8, 0.5);\n  }\n  // Quickdraws, a white sling between hanger and carabiner, and the anchors.\n  for (const l of LX) {\n    for (const b of BOLT) for (let j = 0; j \u003c 4; j++) px(l, b + j, STEEL[j], 1, j % 3 ? 0.7 : 0.1);\n    px(l - 1, 8, STEEL[0], 1, 0.1), px(l + 1, 8, STEEL[0], 1, 0.1), px(l, 9, STEEL[3], 1, 0.1), px(l, 10, STEEL[1], 1, 0.4);\n  }\n})();\n\n// A plan step: limb (hands 0 1, feet 2 3, 4 waits), target, which, seconds,\n// then what; LOOP brings the rope up with the hand.\nconst HOLD = 0, CHIPT = 1, BAG = 2, HARN = 3, DRAW = 4, ANCHOR = 5;\nconst PUFF = 1, CLIP = 2, ANCH = 3, GRAB = 4, LOOP = 5;\nconst START = 0, CLIMB = 1, LOWER = 2, LAND = 3, PULL = 4, SWAP = 5, FALL = 6;\nconst PC = 96, PRE = [17, 31, 4.5], SRX = 17, SRY = 28, TG = F32(2);\n\nconst party = (l) => ({ l, r: ROUTE[l][0], on: 0, c: 0, pt: 0, lhx: 0, lvx: 0, E: F32(8), plan: [], bl: 0, feed: 0, len: 0, pa: 0, pv: 0 });\n\nexport function setup(params) {\n  params.s = { P: [0, 1, 2].map(party), F: F32(N * 3), LB: F32(N * 3), pc: F32(PC * 5), init: 0, k4: 0.06, r0: 0, t: 0 };\n}\n\nfunction target(P, kind, k) {\n  const R = P.r * NH + k;\n  if (kind === HOLD) (TG[0] = HX[R] + 0.5), (TG[1] = HY[R] + 0.2);\n  else if (kind === CHIPT) (TG[0] = CX[R] + 1), (TG[1] = CY[R] + 0.1);\n  else if (kind \u003c DRAW) (TG[0] = P.hx + (kind === BAG ? 0.4 : 0)), (TG[1] = P.hy - (kind === BAG ? 0.6 : 1.2));\n  else (TG[0] = lane(P)), (TG[1] = kind === DRAW ? BOLT[k] + CLP : RING);\n}\nfunction aim(E, k, ...T) {\n  for (let j = 0; j \u003c 8; j++) E[j] += (T[j] - E[j]) * k;\n}\n\nfunction enter(P, ph) {\n  (P.ph = ph), (P.pt = 0), (P.plan.length = 0), (P.mv = -1);\n  if (ph !== START) return;\n  // Chalk each hand and set it on a taped start hold, then step on.\n  Object.assign(P, { hx: rcx(P.r), hy: STAND, iL: 0, iR: 1, seq: 0, nc: 0, anc: 0, loop: 0, hm: 0, vx: 0, vy: 0 });\n  P.E.set([P.hx - 2.5, STAND + 1, P.hx + 2.5, STAND + 1, P.hx - 1.15, FT, P.hx + 1.15, FT]);\n  for (const h of [0, 1]) P.plan.push([h, BAG, 0, 0.3], [4, 0, 0, 0.22, PUFF], [h, HOLD, h, 0.42, GRAB]);\n  P.plan.push([2, CHIPT, 0, 0.32], [3, CHIPT, 1, 0.32], [4, 0, 0, 0.2]);\n}\n\nfunction puff(S, x, y, n, sp) {\n  const p = S.pc, R = Math.random;\n  for (let k = 0; k \u003c PC * 5 && n > 0; k += 5) if (p[k + 4] \u003c= 0) (p[k] = x), (p[k + 1] = y), (p[k + 2] = (R() - 0.5) * 8 * sp), (p[k + 3] = (R() - 0.75) * 5 * sp), (p[k + 4] = 0.6 + 0.6 * R()), n--;\n}\n\nfunction advance(S, P, d) {\n  const E = P.E, m = P.mv, te = P.te;\n  P.u += d / P.dur;\n  if (m \u003c 4) {\n    target(P, P.mk, P.mi);\n    const e = ease(P.u), a = sin(PI * min(1, P.u));\n    E[m * 2] = mix(P.m0x, TG[0], e) + (m & 1 ? a : -a) * (m \u003c 2 ? 0.9 : 1.4);\n    E[m * 2 + 1] = mix(P.m0y, TG[1], e) - a * 0.7;\n  }\n  if (P.u \u003c 1) return;\n  P.mv = -1;\n  if (te === PUFF) puff(S, P.hx + 0.4, P.hy - 0.8, 8, 1);\n  else if (te === GRAB && Math.random() \u003c 0.4) puff(S, E[m * 2], E[m * 2 + 1], 2, 0.4);\n  else if (te === CLIP) P.nc++, (P.loop = 0);\n  else if (te === ANCH) (P.anc = 1), (P.loop = 0), enter(P, LOWER);\n}\n\n// Clip a draw level with her chest or the anchor at the top; else step a foot\n// up, then reach with that side's hand.\nfunction decide(P) {\n  const R = P.r * NH, pl = P.plan;\n  if (P.nc \u003c 8 && BOLT[P.nc] + CLP > P.hy - TOR - 1.5) {\n    const h = HY[R + P.iL] > HY[R + P.iR] ? 0 : 1;\n    pl.push([h, HARN, 0, 0.22], [h, DRAW, P.nc, 0.3, 0, LOOP], [4, 0, 0, 0.16, CLIP], [h, HOLD, h ? P.iR : P.iL, 0.24, GRAB]);\n  } else if (P.iL + 2 >= NH && P.iR + 2 >= NH) pl.push([1, HARN, 0, 0.22], [1, ANCHOR, 0, 0.36, 0, LOOP], [4, 0, 0, 0.3, ANCH]);\n  else {\n    const q = P.seq, h = q \u003c 2 ? 0 : 1, k = (h ? P.iR : P.iL) + 2;\n    P.seq = (q + 1) & 3;\n    if (k >= NH) return;\n    if (!(q & 1)) return pl.push([2 + h, CHIPT, k, 0.28], [4, 0, 0, 0.06]);\n    if (P.hm++ % 3 === 2) pl.push([h, BAG, 0, 0.24], [4, 0, 0, 0.22, PUFF]);\n    pl.push([h, HOLD, k, 0.34, GRAB], [4, 0, 0, 0.08]);\n    h ? (P.iR = k) : (P.iL = k);\n  }\n}\n\n// Back on after a fall or a change of route: the holds nearest her hips.\nfunction rejoin(P) {\n  const R = P.r * NH;\n  let i = 0;\n  for (let j = 2; j + 1 \u003c NH; j += 2) if (abs(CY[R + j] + CY[R + j + 1] - 12 - 2 * P.hy) \u003c abs(CY[R + i] + CY[R + i + 1] - 12 - 2 * P.hy)) i = j;\n  enter(P, CLIMB);\n  Object.assign(P, { iL: i, iR: i + 1, seq: 0, loop: 0, vx: 0, vy: 0 });\n  P.plan.push([1, HOLD, i + 1, 0.45, GRAB], [0, HOLD, i, 0.45, GRAB], [3, CHIPT, i + 1, 0.35], [2, CHIPT, i, 0.35], [4, 0, 0, 0.3]);\n}\nfunction fall(P) {\n  if (P.ph !== CLIMB) return;\n  P.R = P.nc ? hyp(P.hx - LX[P.l] - 0.5, P.hy - 1 - BOLT[P.nc - 1] - CLP) + 3 + (P.loop ? 4 : 0) : 0;\n  enter(P, FALL);\n  (P.vy = -8), (P.vx = 0), (P.loop = 0);\n}\n\n// The rope from the guide hand through the clipped draws to the climber.\nconst RP = F32(48);\nlet RLEN = 0;\nfunction path(P, gx, gy) {\n  let n = 0;\n  RLEN = 0;\n  const put = (x, y) => ((RP[n++] = x), (RP[n++] = y));\n  put(gx, gy);\n  for (let j = 0; j \u003c P.nc; j++) put(lane(P), BOLT[j] + CLP);\n  if (P.anc) put(lane(P), RING);\n  if (P.ph === PULL) put(P.ex, P.ey);\n  else {\n    if (P.loop) put(P.E[P.loop * 2 - 2], P.E[P.loop * 2 - 1]);\n    put(P.hx, P.hy - 1);\n  }\n  for (let j = 2; j \u003c n; j += 2) RLEN += hyp(RP[j] - RP[j - 2], RP[j + 1] - RP[j - 1]);\n  return n >> 1;\n}\n\nfunction stepParty(S, P, d) {\n  P.pt += d;\n  const E = P.E, ph = P.ph, x = P.hx, y = P.hy, k = 1 - exp(-d * 9);\n  if (ph \u003c= CLIMB) {\n    if (P.mv >= 0) advance(S, P, d);\n    if (P.mv \u003c 0 && P.ph === ph) {\n      const it = P.plan.shift();\n      if (it) {\n        (P.mv = it[0]), (P.mk = it[1]), (P.mi = it[2]), (P.dur = it[3]), (P.te = it[4] || 0), (P.u = 0);\n        if (P.mv \u003c 4) (P.m0x = E[P.mv * 2]), (P.m0y = E[P.mv * 2 + 1]);\n        if (it[5] === LOOP) P.loop = P.mv + 1;\n      } else if (ph === START) P.ph = CLIMB;\n      else decide(P);\n    }\n    // Hips where all four limbs reach, hanging on the arms and off the moving one.\n    const lo = max(E[5], E[7]) - 9.3, hi = min(E[1], E[3]) + 8 + TOR;\n    let ty = ((E[5] + E[7]) / 2 - 7 + hi) / 2, tx = 0.55 * ((E[4] + E[6]) / 2) + 0.45 * ((E[0] + E[2]) / 2);\n    ty = lo \u003c= hi ? cl(ty, lo, hi) : (lo + hi) / 2;\n    if (P.mv >= 0 && P.mv \u003c 4) tx -= (P.mv & 1 ? 1 : -1) * 0.7;\n    if (P.ph === ph) (P.hx += (tx - x) * k), (P.hy += (ty - y) * k);\n  } else if (ph === LOWER) {\n    // Sat in her harness and walking her feet down the wall.\n    P.hy = min(STAND, y + 12 * d * ease(P.pt * 1.5));\n    P.hx += (rcx(P.r) - x) * (1 - exp(-d * 1.5));\n    const f = P.hy * 0.45;\n    aim(E, k, x - 0.4, y - TOR - 1.8, x + 0.6, y - TOR - 3.6, x - 3.2, y + 5.3 - 1.6 * max(0, sin(f)), x + 3.2, y + 5.3 - 1.6 * max(0, -sin(f)));\n    if (P.hy >= STAND - 0.01) enter(P, LAND);\n  } else if (ph === LAND || ph === PULL) {\n    // Down, she unties and the belayer pulls the rope through.\n    P.hy += (STAND - y) * k;\n    const u = ph === LAND && P.pt > 0.5 && P.pt \u003c 1.3;\n    aim(E, k, x + (u ? -0.8 : -2.5), y + (u ? -1 : 1), x + (u ? 0.8 : 2.5), y + (u ? -1.3 : 1), x - 1.15, FT, x + 1.15, FT);\n    if (ph === LAND && P.pt > 1.4) enter(P, PULL), (P.ex = x), (P.ey = y - 1), (P.pull = 0);\n    if (ph === PULL && (P.pull += 110 * d) > P.len + 2) enter(P, SWAP);\n  } else if (ph === SWAP) {\n    if (P.pt > 1.6) (P.c ^= 1), enter(P, START);\n  } else {\n    // Falling until the rope from the last draw comes tight, a stretchy catch.\n    P.vy += 150 * d;\n    if (P.nc) {\n      const dx = x - LX[P.l] - 0.5, dy = y - 1 - BOLT[P.nc - 1] - CLP, L = hyp(dx, dy) + 1e-6, e = L - P.R;\n      if (e > 0) {\n        const ux = dx / L, uy = dy / L, f = (80 * e + 8 * (P.vx * ux + P.vy * uy)) * d;\n        (P.vx -= f * ux), (P.vy -= f * uy), (P.bl = max(P.bl, min(3, e)));\n      }\n    }\n    (P.hx += P.vx * d), (P.hy += P.vy * d);\n    if (P.hy >= STAND) {\n      (P.hy = STAND), (P.vy = P.vx = 0);\n      if (!P.nc) return enter(P, START);\n    }\n    const fl = P.pt \u003c 0.45, X = P.hx, Y = P.hy - TOR;\n    aim(E, 1 - exp(-d * (fl ? 6 : 4)), X - (fl ? 3.2 : 0.4), Y - (fl ? 4.5 : 2.5), X + (fl ? 3.2 : 0.5), Y - (fl ? 4.5 : 4.2), X - 2.7, P.hy + (fl ? 7.5 : 4.4), X + 2.7, P.hy + (fl ? 7 : 4.4));\n    if (P.pt > 2.4) rejoin(P);\n  }\n  P.bl *= exp(-d * 1.8);\n  // Rope paid out moves the belayer's guide hand; the ponytail swings.\n  const L = (path(P, bxOf(P), STAND - 4), RLEN), vx = (P.hx - P.lhx) / max(d, 1e-4);\n  if (P.ph \u003c= CLIMB) P.feed += abs(L - P.len);\n  if (P.ph !== PULL) P.len = L;\n  P.pv += (-28 * P.pa - 2.6 * P.pv) * d - cl(vx - P.lvx, -20, 20) * 0.04;\n  (P.pa = cl(P.pa + P.pv * d, -1, 1)), (P.lhx = P.hx), (P.lvx = vx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const r0 = min(5, floor(cl(k[0], 0, 1) * 6)), np = round(cl(k[2], 1, 3)), l0 = RL[r0], sp = cl(k[1], 0.2, 3);\n  (S.k4 = cl(k[3], -1, 1)), (S.r0 = r0);\n  for (const P of S.P) {\n    const r = P.l === l0 ? r0 : ROUTE[P.l][RS[r0] > 0 ? 1 : 0], j = (P.l - l0 + 3) % 3;\n    if (j >= np) P.on = 0;\n    else if (!P.on) {\n      (P.on = 1), (P.r = r), enter(P, START);\n      // Each party opens some way into its climb, further at a faster Speed.\n      if (!S.init) for (let n = PRE[j] * 30; n > 0; n--) stepParty(S, P, (sp / 2) ** 1.6 / 30);\n    } else if (P.r !== r) (P.r = r), P.ph === CLIMB ? rejoin(P) : P.ph === START && enter(P, START);\n  }\n  if (!S.init) S.pc.fill(0), (S.init = 1);\n  if (input.btnPressed && input.btnPressed[0]) fall(S.P[l0]);\n  const d = (cl(dt || 0, 0, 0.1) * sp) / 2, p = S.pc;\n  S.t += d;\n  for (const P of S.P) if (P.on) stepParty(S, P, d);\n  for (let j = 0, e = exp(-2 * d); j \u003c PC * 5; j += 5) if (p[j + 4] > 0) (p[j] += p[j + 2] * d), (p[j + 1] += p[j + 3] * d), (p[j + 2] *= e), (p[j + 3] = p[j + 3] * e + 2 * d), (p[j + 4] -= 0.6 * d);\n}\n\nlet F = null, LB = null;\nfunction splat(x, y, c, k, a) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1);\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) blend((yy * W + xx) * 3, c, k, (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy) * a);\n  }\n}\nconst lightAt = (x, y) => {\n  const o = (cl(floor(y), 0, H - 1) * W + cl(floor(x), 0, W - 1)) * 3;\n  return cl(0.3 + 0.35 * (LB[o] + LB[o + 1]), 0.62, 1.2);\n};\n// A rope span, slack spans sagging; the weave's flecks ride with the rope.\nfunction span(x0, y0, x1, y1, sag, s0, lim, rc, lf) {\n  const L = hyp(x1 - x0, y1 - y0), n = ceil(L * 2.2) + 1, mx = (x0 + x1) / 2 + sag * 0.3, my = (y0 + y1) / 2 + sag * 2;\n  for (let i = 0; i \u003c= n; i++) {\n    const u = i / n, s = s0 + u * L, q = s - lim + 1000, a = (1 - u) * (1 - u), b = 2 * u * (1 - u), c = u * u;\n    if (s > lim) break;\n    const w = q * 0.2 - floor(q * 0.2) \u003c 0.16;\n    splat(a * x0 + b * mx + c * x1, a * y0 + b * my + c * y1, w ? STEEL[1] : rc, w ? lf : (0.74 + 0.26 * cos(q * 2.3)) * lf, 0.9);\n  }\n  return s0 + L;\n}\n\n// A person from behind, facing the wall: hips at hx, hy, hands and feet in E.\nconst PT = F32(30 * 6), BE = F32(8);\nlet NP = 0, KX = 0, KY = 0, EX = 0, EY = 0;\nconst cap = (...a) => (PT.set(a, NP * 6), NP++);\n// Two-bone reach; elbows bend out and down, knees out and up.\nfunction ik(ax, ay, bx, by, l1, l2, sg, up) {\n  let dx = bx - ax, dy = by - ay, L = hyp(dx, dy) + 1e-6;\n  const Lm = l1 + l2 - 0.05;\n  if (L > Lm) (bx = ax + (dx / L) * Lm), (by = ay + (dy / L) * Lm), (dx = bx - ax), (dy = by - ay), (L = Lm);\n  const a = (l1 * l1 - l2 * l2 + L * L) / (2 * L), h = sqrt(max(0, l1 * l1 - a * a)), ux = dx / L, uy = dy / L, f = -uy * sg + up * 0.3 * ux \u003c 0 ? -h : h;\n  (KX = ax + ux * a - uy * f), (KY = ay + uy * a + ux * f), (EX = bx), (EY = by);\n}\nfunction person(hx, hy, E, o, lf, pa) {\n  NP = 0;\n  const sx = hx + 0.2 * ((E[0] + E[2]) / 2 - hx), sy = hy - TOR;\n  for (let s = -1; s \u003c 2; s += 2) {\n    const j = s + 1;\n    ik(hx + s * 1.15, hy + 0.4, E[4 + j], E[5 + j], TH, SN, s, -1);\n    cap(hx + s * 1.15, hy + 0.4, KX, KY, 1.1, 3), cap(KX, KY, EX, EY, 0.83, 3), cap(EX, EY, EX + s * 0.9, EY + 0.3, 0.7, 5);\n  }\n  cap(hx - 1.1, hy, hx + 1.1, hy, 1.25, 3), cap(hx, hy - 1, sx, sy + 1, 1.95, 2), cap(sx - 2.2, sy + 0.7, sx + 2.2, sy + 0.7, 1.15, 2);\n  cap(hx - 1.8, hy - 1.1, hx + 1.8, hy - 1.1, 0.55, 4), cap(hx + 0.3, hy - 1.2, hx + 0.3, hy - 0.1, 0.8, 6);\n  for (let s = -1; s \u003c 2; s += 2) {\n    ik(sx + s * 2.3, sy + 0.8, E[s + 1], E[s + 2], UA, FA, s, 1);\n    cap(sx + s * 2.3, sy + 0.8, KX, KY, 0.76, 0), cap(KX, KY, EX, EY, 0.64, 0), cap(EX, EY, EX, EY - 0.2, 0.75, 0);\n  }\n  cap(sx, sy + 0.2, sx, sy - 1.2, 0.7, 0), cap(sx, sy - 3, sx, sy - 3.1, 1.95, 1);\n  if (o[7]) cap(sx, sy - 3, sx + 3.7 * sin(pa), sy - 3 + 4.1 * cos(pa), 0.63, 1);\n  // A dark rim round her, holds near her greyed, then her.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let y = max(0, floor(hy - 21)); y \u003c min(H, hy + 16); y++)\n      for (let x = max(0, floor(hx - 13)); x \u003c min(W, hx + 14); x++) {\n        const qx = x + 0.5, qy = y + 0.5, i = (y * W + x) * 3;\n        let dm = 9;\n        for (let j = 0; j \u003c NP * 6; j += 6) {\n          const ax = PT[j], ay = PT[j + 1], dx = PT[j + 2] - ax, dy = PT[j + 3] - ay, r = PT[j + 4];\n          if (abs(qx - ax - dx / 2) > abs(dx) / 2 + r + 3 || abs(qy - ay - dy / 2) > abs(dy) / 2 + r + 3) continue;\n          const tt = cl(((qx - ax) * dx + (qy - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1), e = hyp(qx - ax - dx * tt, qy - ay - dy * tt) - r;\n          if (pass && e \u003c 0.5) blend(i, o[PT[j + 5]], lf, min(1, 0.5 - e));\n          dm = min(dm, e);\n        }\n        const g = ease((dm - 1.3) / 1.4), m = ((F[i] + F[i + 1] + F[i + 2]) / 3) * 0.6;\n        if (!pass && g \u003c 1) for (let c = 0; c \u003c 3; c++) F[i + c] = mix(m, F[i + c], g) * (0.25 + 0.75 * g);\n      }\n}\nfunction walk(x, ph, o, lf) {\n  const y = STAND - 0.3 * abs(sin(ph)), s = sin(ph), s2 = sin(ph + 1.6);\n  BE.set([x - 2.5 - 0.6 * s, y + 0.8, x + 2.5 - 0.6 * s, y + 0.8, x - 1.3 + 0.8 * s, FT - 1.2 * max(0, cos(ph)), x + 1.3 + 0.8 * s2, FT - 1.2 * max(0, cos(ph + 1.6))]);\n  person(x, y, BE, o, lf, 0);\n}\n\n// A party: rope pile, rope, climber, then the belayer in front.\nfunction scene(S, P, t) {\n  const gs = RS[P.r], bx = bxOf(P), cx = rcx(P.r), A = OUT[P.l * 2 + P.c], B = OUT[P.l * 2 + 1 - P.c], rc = ROPE[P.l];\n  const lfB = lightAt(bx, FL - 10), px0 = bx - gs * 2.6;\n  for (let j = 0; j \u003c 22; j++) splat(px0 + 2.4 * cos(j * 0.6) * (1 - j * 0.02), FL + 3.2 + 0.9 * sin(j * 0.6), rc, 0.8 * lfB, 0.8);\n  if (P.ph === SWAP) {\n    const e = ease(P.pt / 1.6), ph = P.pt * 9;\n    return walk(mix(cx, bx, e), ph, A, lfB), walk(mix(bx, cx, e), ph + PI, B, lfB);\n  }\n  // The belayer: guide hand up the rope feeding it out, brake hand low.\n  const hy = STAND - P.bl, hx = bx + gs * P.bl * 0.4, gi = gs > 0 ? 2 : 0, bi = 2 - gi;\n  let gy = hy - 3.4 - 1.8 * abs(sin(P.feed * 0.35)), by = hy + 0.8;\n  if (P.ph === PULL) (gy = hy - 3 - 2.6 * abs(sin(t * 6))), (by = hy - 3 - 2.6 * abs(cos(t * 6)));\n  else if (P.ph === LOWER) by = hy + 0.6 + 0.8 * sin(t * 5);\n  (BE[gi] = hx + gs * 0.7), (BE[gi + 1] = gy), (BE[bi] = hx - gs * 2.2), (BE[bi + 1] = by);\n  (BE[4] = hx - 1.15), (BE[6] = hx + 1.15), (BE[5] = BE[7] = min(FT, hy + 9.5));\n  span(BE[bi], by, px0, FL + 2.5, 1.2, 0, 1e9, rc, lightAt(BE[bi], by + 2));\n  const n = path(P, BE[gi], gy), lim = RLEN - (P.ph === PULL ? P.pull : 0), taut = P.ph === FALL || P.ph === LOWER || P.ph === PULL;\n  for (let j = 1, s = 0; j \u003c n; j++) {\n    const sag = j === 1 ? (n === 2 && !taut ? 2.5 : 1.5) : j === n - 1 && !taut ? 1 : 0;\n    s = span(RP[j * 2 - 2], RP[j * 2 - 1], RP[j * 2], RP[j * 2 + 1], sag, s, lim, rc, lightAt(RP[j * 2], RP[j * 2 + 1]));\n  }\n  person(P.hx, P.hy, P.E, A, lightAt(P.hx, P.hy - 4), P.pa);\n  person(hx, hy, BE, B, lfB, 0.2);\n}\n\n// House light tinted by the route, a follow spot with a gel on each climber.\nfunction light(S) {\n  const k = S.k4, hs = k \u003c 0 ? mix(0.68, 1.12, -k) : mix(0.68, 0.06, k), lv = k \u003c 0 ? mix(1, 0.35, -k) : mix(1, 1.2, k), u = max(0, k);\n  const T = [1, 0.95, 0.86].map((w, j) => mix(w, RC[S.r0][j] / 255, 0.14) * hs), V = [0.1 * u, 0.04 * u, 0.24 * u];\n  for (let o = 0; o \u003c N * 3; o++) LB[o] = L0[(o / 3) | 0] * T[o % 3];\n  for (const P of S.P) {\n    if (!P.on) continue;\n    const sx = P.hx, sy = P.hy - 4, G = [1, 0.96, 0.9].map((w, j) => lv * mix(w, RC[P.r][j] / 255, 0.35));\n    for (let y = max(4, floor(sy - SRY)); y \u003c min(FL, sy + SRY); y++)\n      for (let x = max(0, floor(sx - SRX)); x \u003c min(W, sx + SRX); x++) {\n        const q = ((y + 0.5 - sy) / SRY) ** 2 + ((x + 0.5 - sx) / SRX) ** 2, o = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3 && q \u003c 1; c++) LB[o + c] += (1 - q) * (1 - q) * G[c];\n      }\n  }\n  for (let o = 0; o \u003c N * 3; o++) F[o] = AL[o] * (LB[o] + V[o % 3]) + EM[o] * u;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  (F = S.F), (LB = S.LB);\n  light(S);\n  for (const P of S.P) if (P.on) scene(S, P, S.t);\n  const p = S.pc, u = max(0, S.k4);\n  for (let j = 0, C = [240, 240 - 40 * u, 236 + 19 * u]; j \u003c PC * 5; j += 5) if (p[j + 4] > 0) splat(p[j], p[j + 1], C, 1, min(1, p[j + 4]) * 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Route","min":0,"max":1,"about":"The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall."},{"name":"Climbers","min":1,"max":3,"about":"One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour."},{"name":"Light","min":-1,"max":1,"about":"House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes."}],"start":[0,2,1,0.06],"measures":{"motion":0.067,"detail":0.0707,"edges":0.3416,"complexity":1.7869,"coverage":0.9212,"colour":0.1755,"drift":0.0209},"knobResponse":[0.0608,0.0368,0.048,0.1959]},{"slug":"cloth","title":"Cloth","family":"physics","round":2,"note":"12×22 매듭 천이 나무 봉의 집게에 걸려 있고, 뒤에서 부는 돌풍이 천을 앞으로 들어 올려요. LED 마다 그 자리 천이 빛에서 기운 만큼 밝아서 주름이 등고선처럼 읽혀요.","idea":"A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.","buttons":"K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.","code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","layer":{"id":"layer-cloth","type":"code","name":"cloth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the cloth; its stripes and its paler wrong side follow."},{"name":"Wind","min":0,"max":3,"about":"From still air, where it only sways, to gusts that throw the hem up past the rod."},{"name":"Stiffness","min":0,"max":1,"about":"Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones."},{"name":"Pins","min":2,"max":12,"about":"How many clips hold it to the rod, from two corners with a swag between them to every knot along the top."}],"start":[0,2,0,2],"measures":{"motion":0.5789,"detail":0.0244,"edges":0.3966,"complexity":0.9079,"coverage":0.5904,"colour":0.3319,"drift":0.4132},"knobResponse":[0.2963,0.322,0.2371,0.2837]},{"slug":"cloud-chamber","title":"Cloud Chamber","family":"particle","round":27,"note":"과학관의 확산 안개상자를 유리 뚜껑 위에서 내려다봐요. 등줄 빛을 받은 검은 펠트 위로 우주선 뮤온이 가는 직선을 패널 끝까지 긋고, 알파 입자는 짧고 굵은 막대를, 전자는 흐린 실을 남겨요. 자취는 한순간에 맺혔다가 대류를 따라 흘러가며 몇 초 만에 번져 사라져요. K3 은 토륨 막대를 세워 알파 부채를 뿜게 하고, K4 는 자기장으로 전자를 나선으로 감아요.","idea":"A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.","buttons":"K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.","code":"// ===== Patternflow pattern =====\n// Title:   Cloud Chamber\n// Family:  particle\n// Idea:    A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the continuously sensitive diffusion cloud chamber Alexander Langsdorf described in 1939, a descendant of C. T. R. Wilson's expansion cloud chamber\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1\n//\n// Knob 1: Light. The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white.\n// Knob 2: Speed. How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often.\n// Knob 3: Source. A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point.\n// Knob 4: Field. A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way.\n// Buttons: K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.\n\nconst W = 64, H = 128, N = W * H, CAP = 16384, ND = 170, DS = 0.6, SQ = Math.sqrt(DS);\nconst { min, max, floor, ceil, sqrt, exp, sin, cos, log, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst gauss = () => (rnd() + rnd() + rnd() - 1.5) * 2;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p, a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// The mist's sheen: a 64 by 64 tile of soft noise that wraps both ways.\nconst NZ = new Float32Array(4096).map((_, k) => 0.65 * vn((k & 63) / 8, (k >> 6) / 8, 8) + 0.35 * vn((k & 63) / 4, (k >> 6) / 4, 16));\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, x0 = xi & 63, y0 = (yi & 63) \u003c\u003c 6, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) \u003c\u003c 6;\n  return mix(mix(NZ[y0 + x0], NZ[y0 + x1], u), mix(NZ[y1 + x0], NZ[y1 + x1], u), v);\n}\n// A droplet is a round Gaussian; GL holds exp(-q / 32) out to where it is under 3%.\nconst GN = 112, GL = new Float32Array(GN).map((_, q) => exp(-q / 32));\n// The lamp lights the wall side best; a trail across the chamber is about 0.55 as bright.\nconst LIT = new Float32Array(W).map((_, x) => 0.48 + 0.52 * exp(-x / 30));\nconst STRIP = new Float32Array(H).map((_, y) => 0.86 + 0.14 * hash(y >> 2, 3));\n\n// Lamps: colour, near glow, its width in LEDs, far glow, drizzle, trails.\n// The laser sheet lights only the sensitive layer, so its trails stand out hardest.\nconst LAMPS = [\n  [0.6, 0.8, 1, 0.28, 6, 0.035, 1, 1],\n  [1, 0.9, 0.72, 0.3, 13, 0.1, 0.9, 0.9],\n  [0.4, 1, 0.6, 0.15, 3.5, 0.03, 1.3, 1.25],\n  [0.7, 0.46, 1, 0.3, 8, 0.08, 1.15, 0.9],\n];\n\n// Trail kinds: droplet radius, line brightness, life in seconds, how fast the\n// trail spreads (LED squared a second), bending radius in a full field,\n// scatter, bead spread, missing droplets, brightening toward the end, whether\n// it slows to a stop (curling tighter), delta rays per LED.\nconst kind = (sig, I, life, D, R, sc, bead, gap, br, slow, dl) => ({ sig, I, life, D, R, sc, bead, gap, br, slow, dl });\nconst MU = kind(0.5, 0.85, 3.4, 0.16, 380, 0.004, 0.55, 0.08, 0, 0, 1 / 170);\nconst BE = kind(0.46, 0.7, 2.9, 0.2, 16, 0.085, 0.7, 0.28, 0.9, 1, 0);\nconst DE = kind(0.44, 0.65, 2.6, 0.2, 5, 0.12, 0.6, 0.2, 0.7, 1, 0);\nconst AL = kind(0.7, 1.9, 4, 0.14, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\n// Source alphas are a touch thinner and go sooner, so the fan reads ray by ray.\nconst AS = kind(0.6, 1.6, 2.6, 0.12, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\nconst PR = kind(0.6, 1.3, 3.8, 0.18, 900, 0.01, 0.3, 0.02, 0.35, 0, 1 / 90);\n// The thoriated rod's tip.\nconst SX = 40.5, SY = 117.5;\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  params.s = {\n    T: F(N), U: F(153), V: F(153), PX: F(CAP), PY: F(CAP), PU: F(CAP), PV: F(CAP), PB: D(CAP), PL: F(CAP), PS: F(CAP), PK: F(CAP), PD: F(CAP),\n    DX: F(ND), DY: F(ND), DB: D(ND), DL: F(ND), DA: F(ND), head: 0, tail: 0, tf: 0, td: 0, wr: 99, tw: -99, ox: 0, oy: 0,\n    tsf: 1, tsd: 1, field: 0.06, src: 0, lamp: [...LAMPS[0]], k1: -1, live: 0, pend: [], cnt: [0, 0, 0, 0, 0, 0, 0].map(() => -log(1 - rnd())),\n  };\n  const S = params.s;\n  for (let j = 0; j \u003c ND; j++) drop(S, j, -rnd() * 1.4);\n}\n\nfunction puff(S, x, y, sig, I, life, D) {\n  const i = S.head++ & (CAP - 1), a = rnd() * 6.283, v = 0.1 + 0.35 * rnd();\n  if (S.head - S.tail > CAP) S.tail = S.head - CAP;\n  S.PX[i] = x;\n  S.PY[i] = y;\n  // Each droplet wanders a little on its own, so an old trail frays.\n  S.PU[i] = v * cos(a);\n  S.PV[i] = v * sin(a);\n  S.PB[i] = S.tf;\n  S.PL[i] = life * (0.85 + 0.3 * rnd());\n  S.PS[i] = 2 * sig * sig;\n  // Scaled so a line of droplets DS apart peaks at I.\n  S.PK[i] = I * sig * DS * 0.798;\n  S.PD[i] = D;\n}\n\n// Lays a trail of droplets from x, y heading th. A charge q bends it in the\n// field; a slowing particle bends tighter and scatters more toward its end.\n// With clip set it starts outside and stops once it has crossed the panel.\nfunction trail(S, x, y, th, len, k, q, R0, clip, I = k.I) {\n  const n = max(1, ceil(len / DS)), f = S.field, life = k.life * (0.85 + 0.3 * rnd());\n  let inside = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const rem = 1 - j / n, inn = x > -2 && x \u003c W + 2 && y > -2 && y \u003c H + 2;\n    if (clip) {\n      if (inn) inside = 1;\n      else if (inside) break;\n    }\n    if (inn && rnd() >= k.gap) puff(S, x, y, k.sig * (1 + 0.3 * k.br * (1 - rem) ** 2), I * (1 + k.bead * (rnd() * 2 - 1)) * (1 + k.br * (1 - rem) ** 2), life, k.D);\n    // A knock-on electron kicked sideways out of the trail.\n    if (k.dl && inn && rnd() \u003c k.dl * DS) {\n      const s = rnd() \u003c 0.5 ? -1 : 1;\n      trail(S, x, y, th + s * (0.9 + 0.6 * rnd()), 3 + 11 * rnd(), DE, -1, 2 + 5 * rnd(), 0);\n    }\n    const R = R0 * (k.slow ? sqrt(rem + 0.03) : 1);\n    th += q * min(0.5, (f * DS) / R) + (k.sc * gauss() * SQ) / (k.slow ? sqrt(rem + 0.12) : 1);\n    x += cos(th) * DS;\n    y += sin(th) * DS;\n  }\n  return [x, y, th];\n}\n\nconst beta = (S, x, y, th, len) => trail(S, x, y, th, len, BE, rnd() \u003c 0.9 ? -1 : 1, 8 + 22 * rnd(), 0);\n\n// A muon through a point of the chamber; most cross it the long way.\nfunction muon(S, px, py, th) {\n  const stop = rnd() \u003c 0.1, len = stop ? 170 + 60 * rnd() : 400;\n  const e = trail(S, px - cos(th) * 170, py - sin(th) * 170, th, len, MU, rnd() \u003c 0.55 ? 1 : -1, 220 + 380 * rnd(), 1);\n  // One that stops in the chamber decays: an electron leaves its end at an angle.\n  if (stop && e[0] > 0 && e[0] \u003c W && e[1] > 0 && e[1] \u003c H) beta(S, e[0], e[1], e[2] + (rnd() \u003c 0.5 ? -1 : 1) * (0.6 + 1.8 * rnd()), 30 + 30 * rnd());\n}\nconst steep = () => (rnd() \u003c 0.62 ? PI / 2 + 0.45 * gauss() + (rnd() \u003c 0.5 ? PI : 0) : rnd() * 2 * PI);\n\n// An alpha: short, thick, dead straight, thickest at its end. Now and then it\n// glances off a nucleus near its end and the recoil leaves a stub: a fork.\nfunction alpha(S, x, y, th, len) {\n  if (rnd() \u003c 0.14 && len > 7) {\n    const e = trail(S, x, y, th, len * 0.75, AL, 1, 6000, 0, AL.I * 0.9), s = rnd() \u003c 0.5 ? -1 : 1;\n    trail(S, e[0], e[1], e[2] + s * (0.4 + 0.6 * rnd()), len * 0.3, AL, 1, 6000, 0);\n    trail(S, e[0], e[1], e[2] - s * (0.9 + 0.6 * rnd()), 1.5 + 2 * rnd(), AL, 1, 6000, 0, AL.I * 1.3);\n  } else trail(S, x, y, th, len, AL, 1, 6000, 0);\n}\n\n// A cosmic proton breaks up a nucleus: a thin track in and a star of thick prongs.\nfunction star(S) {\n  const x = 10 + 44 * rnd(), y = 16 + 96 * rnd(), th = steep();\n  trail(S, x - cos(th) * 90, y - sin(th) * 90, th, 90, MU, 1, 600, 0);\n  for (let j = 0, n = 2 + floor(rnd() * 3); j \u003c n; j++) trail(S, x, y, rnd() * 2 * PI, 5 + 16 * rnd(), PR, 1, 900, 0);\n  if (rnd() \u003c 0.5) trail(S, x, y, th + gauss() * 0.6, 40 + 40 * rnd(), MU, rnd() \u003c 0.5 ? 1 : -1, 300, 1);\n}\n\n// A shower: one direction for all, muons in parallel and electrons beside them.\nfunction shower(S) {\n  const th = steep(), c = cos(th), s = sin(th), n = 7 + floor(rnd() * 5);\n  for (let j = 0; j \u003c n; j++) {\n    const o = (rnd() * 2 - 1) * 34;\n    muon(S, 32 - s * o + c * gauss() * 20, 64 + c * o + s * gauss() * 20, th + 0.012 * gauss());\n  }\n  for (let j = 0, m = 3 + floor(rnd() * 4); j \u003c m; j++) {\n    const o = (rnd() * 2 - 1) * 30, a = (rnd() * 2 - 1) * 50;\n    beta(S, 32 - s * o + c * a, 64 + c * o + s * a, th + 0.2 * gauss(), 25 + 40 * rnd());\n  }\n}\n\nfunction spawn(S, k) {\n  const src = S.src;\n  if (k === 0) muon(S, rnd() * W, rnd() * H, steep());\n  // A steep muon crosses the thin sensitive layer in a few LEDs.\n  else if (k === 1) trail(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd(), MU, 1, 400, 0);\n  else if (k === 2) beta(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 18 + 55 * rnd());\n  // Radon in the air: an alpha anywhere, foreshortened when it leaves the layer.\n  else if (k === 3) alpha(S, 3 + rnd() * (W - 3), rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd() ** 0.7);\n  else if (k === 4) star(S);\n  else if (k === 5) {\n    const t = -PI / 2 + (rnd() * 2 - 1) * 1.35;\n    trail(S, SX + cos(t) * 1.5, SY + 1 + sin(t) * 1.5, t, 11 + 18 * rnd(), AS, 1, 6000, 0);\n  } else if (k === 6 && src > 0.02) {\n    // Thoron off the rod; its daughter decays a fraction of a second later from the same point.\n    const x = cl(SX + gauss() * 13, 4, W - 2), y = SY - 6 - 40 * rnd() ** 1.5;\n    alpha(S, x, y, rnd() * 2 * PI, 6 + 10 * rnd());\n    S.pend.push([S.tf + 0.1 + 0.3 * rnd(), x, y]);\n  }\n}\n\n// The vapour's slow convection on a grid of 9 by 17 nodes, 8 LEDs apart: the\n// curl of a few drifting waves, so it neither piles up nor thins out, and a\n// gentle drift that turns round over a minute or two.\nconst MODES = [[0.09, 0.05, 0.11, 0, 9], [-0.06, 0.08, -0.09, 2, 8], [0.13, -0.11, 0.13, 4, 4], [0.03, 0.12, 0.07, 1.3, 6]];\nfunction flow(S) {\n  const t = S.td, mu = 0.45 * cos(t * 0.05), mv = 0.45 * sin(t * 0.07 + 1);\n  for (let j = 0; j \u003c 17; j++)\n    for (let i = 0; i \u003c 9; i++) {\n      let u = mu, v = mv;\n      for (const [kx, ky, w, p, a] of MODES) {\n        const c = a * cos(kx * i * 8 + ky * j * 8 + w * t + p);\n        u += ky * c;\n        v -= kx * c;\n      }\n      S.U[j * 9 + i] = u;\n      S.V[j * 9 + i] = v;\n    }\n  return [mu, mv];\n}\nfunction vel(S, x, y, out) {\n  const gx = cl(x / 8, 0, 7.999), gy = cl(y / 8, 0, 15.999), i = floor(gx), j = floor(gy), u = gx - i, v = gy - j, k = j * 9 + i;\n  out[0] = mix(mix(S.U[k], S.U[k + 1], u), mix(S.U[k + 9], S.U[k + 10], u), v);\n  out[1] = mix(mix(S.V[k], S.V[k + 1], u), mix(S.V[k + 9], S.V[k + 10], u), v);\n}\n\n// The drizzle: droplets raining out of the mist, seen as they cross the light.\nfunction drop(S, j, b) {\n  S.DX[j] = rnd() * W;\n  S.DY[j] = rnd() * H;\n  S.DB[j] = S.tf + b;\n  S.DL[j] = 0.45 + 1.1 * rnd();\n  S.DA[j] = 0.08 + 0.28 * rnd();\n}\n\nconst UV = new Float32Array(2);\nfunction step(S, d) {\n  const df = d * S.tsf, dd = d * S.tsd;\n  (S.tf += df), (S.td += dd), (S.wr += d);\n  const [mu, mv] = flow(S);\n  (S.ox += mu * dd), (S.oy += mv * dd);\n  // Births run on the fade clock, so the chamber holds as many trails at any speed.\n  if (S.wr > 1.2) {\n    const rate = [0.75, 1.1, 2.4, 0.9, 0.05, 5 * S.src ** 1.5, 0.6 * S.src];\n    for (let k = 0; k \u003c 7; k++) for (S.cnt[k] -= rate[k] * df; S.cnt[k] \u003c= 0; S.cnt[k] -= log(1 - rnd())) spawn(S, k);\n  }\n  for (const p of S.pend) if (p[0] \u003c= S.tf) alpha(S, p[1], p[2], rnd() * 2 * PI, 6 + 10 * rnd()), (p[0] = -1);\n  S.pend = S.pend.filter((p) => p[0] > 0);\n  const { PX, PY, PU, PV, PB, PL } = S;\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1);\n    if (S.tf - PB[i] > PL[i]) continue;\n    vel(S, PX[i], PY[i], UV);\n    PX[i] += (UV[0] + PU[i]) * dd;\n    PY[i] += (UV[1] + PV[i]) * dd;\n  }\n  while (S.tail \u003c S.head && S.tf - PB[S.tail & (CAP - 1)] > PL[S.tail & (CAP - 1)]) S.tail++;\n  for (let j = 0; j \u003c ND; j++) {\n    if (S.tf - S.DB[j] > S.DL[j]) drop(S, j, 0);\n    vel(S, S.DX[j], S.DY[j], UV);\n    S.DX[j] += UV[0] * dd;\n    S.DY[j] += UV[1] * dd;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2, k1 = cl(k[0], 0, 1);\n  (S.field = cl(k[3], 0, 1)), (S.src = cl(k[2], 0, 1)), (S.tsd = sp), (S.tsf = sp ** 0.6);\n  if (k1 !== S.k1) {\n    const f = k1 * 3, a = min(2, floor(f)), u = sm(0, 1, f - a);\n    for (let j = 0; j \u003c 8; j++) S.lamp[j] = mix(LAMPS[a][j], LAMPS[a + 1][j], u);\n    S.k1 = k1;\n  }\n  // Start with the chamber already running.\n  for (; !S.live; S.live = 1) while (S.tf \u003c 4.5) step(S, 1 / 30);\n  const b = input.btnPressed || [];\n  if (b[0]) shower(S);\n  if (b[1] && S.wr > 0.3) (S.tw = S.tf), (S.wr = 0);\n  step(S, cl(dt || 0, 0, 0.1));\n}\n\nfunction splat(T, x, y, s2, a) {\n  const r = sqrt(3.5 * s2), k = 32 / s2, x0 = max(0, ceil(x - 0.5 - r)), x1 = min(W - 1, floor(x - 0.5 + r)), y0 = max(0, ceil(y - 0.5 - r)), y1 = min(H - 1, floor(y - 0.5 + r));\n  for (let py = y0; py \u003c= y1; py++) {\n    const dy = py + 0.5 - y, d2 = dy * dy, o = py * W;\n    for (let px = x0; px \u003c= x1; px++) {\n      const dx = px + 0.5 - x, q = ((dx * dx + d2) * k) | 0;\n      if (q \u003c GN) T[o + px] += a * GL[q];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.live) return;\n  const { T, PX, PY, PB, PL, PS, PK, PD, lamp } = S, tf = S.tf, tin = 0.07 * S.tsf;\n  // After a clear the old trails blur and fade within a second; the mist dims and comes back.\n  const wq = exp(-S.wr / 0.3), wipe = S.wr \u003c 2.5 ? sm(0, 0.25, S.wr) * exp(-S.wr / 1.1) : 0;\n  T.fill(0);\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1), a = tf - PB[i], L = PL[i];\n    if (a > L) continue;\n    const old = PB[i] \u003c S.tw;\n    if (old && S.wr > 2) continue;\n    // Fresh droplets catch the light hardest for the first half second.\n    let s2 = PS[i] + 2 * PD[i] * a, e = min(1, a / tin) * (1 - sm(0.12, 1, a / L)) * (1 + 0.6 * exp(-a / 0.4));\n    if (old) (s2 += 3 * (1 - wq)), (e *= wq);\n    // Once a trail has spread wider than the droplet spacing, every second\n    // or fourth droplet stands for its neighbours.\n    let m = 1;\n    if (s2 > 5) {\n      if (n & 3) continue;\n      m = 4;\n    } else if (s2 > 2.2) {\n      if (n & 1) continue;\n      m = 2;\n    }\n    if (e > 0.004) splat(T, PX[i], PY[i], s2, (m * PK[i] * e) / s2);\n  }\n  // Drizzle, brightest in the light near the wall, heavier just after a clear.\n  const dz = lamp[6] * (1 + 2.5 * wipe);\n  for (let j = 0; j \u003c ND; j++) {\n    const u = (tf - S.DB[j]) / S.DL[j];\n    if (u \u003c= 0 || u >= 1) continue;\n    const x = S.DX[j] - 0.5, y = S.DY[j] - 0.5, xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n    const a = dz * S.DA[j] * sin(u * PI) ** 2 * (0.3 + 0.7 * exp(-S.DX[j] / 16));\n    if (xi \u003c 0 || yi \u003c 0 || xi >= W - 1 || yi >= H - 1) continue;\n    const o = yi * W + xi;\n    T[o] += a * (1 - fx) * (1 - fy);\n    T[o + 1] += a * fx * (1 - fy);\n    T[o + W] += a * (1 - fx) * fy;\n    T[o + W + 1] += a * fx * fy;\n  }\n  const [cr, cg, cb, g1, w1, g2, , tg] = lamp, rod = sm(0.01, 0.06, S.src), mist = 1 - 0.7 * wipe, ox = S.ox, oy = S.oy;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (x === 0) {\n        // The lamp strip itself, through the glass at the chamber's rim.\n        const v = 0.92 * STRIP[y] * (1 - 0.3 * wipe);\n        display.setPixel(0, y, 255 * v * mix(cr, 1, 0.4), 255 * v * mix(cg, 1, 0.4), 255 * v * mix(cb, 1, 0.4));\n        continue;\n      }\n      const n = 0.6 * nz(x * 0.9 - ox * 0.9, y * 0.55 - oy * 0.55) + 0.4 * nz(x * 1.7 - ox * 1.6 + 17, y * 1.1 - oy * 1.4 + 29);\n      const h = (g1 * exp(-(x - 1) / w1) + g2 * exp(-x / 40)) * (1.7 * n * n) * mist;\n      let t = T[i] * LIT[x] * tg, g = 0;\n      // The rod: dull metal lit from the lamp side.\n      if (rod > 0 && y > SY - 0.5 && x > SX - 2 && x \u003c SX + 1) g = rod * (x \u003c SX - 0.5 ? 0.42 : 0.24) * (y \u003c SY + 0.5 ? 1.25 : 1);\n      const v = min(1, (1 - exp(-1.6 * (t + h + g))) * 1.25), wf = 0.8 * sm(0.1, 0.8, t) + 0.6 * g;\n      display.setPixel(x, y, 255 * v * mix(cr, 1, wf), 255 * v * mix(cg, 1, wf), 255 * v * mix(cb, 1, wf));\n    }\n  }\n}\n","layer":{"id":"layer-cloud-chamber","type":"code","name":"cloud-chamber","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cloud Chamber\n// Family:  particle\n// Idea:    A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the continuously sensitive diffusion cloud chamber Alexander Langsdorf described in 1939, a descendant of C. T. R. Wilson's expansion cloud chamber\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1\n//\n// Knob 1: Light. The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white.\n// Knob 2: Speed. How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often.\n// Knob 3: Source. A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point.\n// Knob 4: Field. A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way.\n// Buttons: K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.\n\nconst W = 64, H = 128, N = W * H, CAP = 16384, ND = 170, DS = 0.6, SQ = Math.sqrt(DS);\nconst { min, max, floor, ceil, sqrt, exp, sin, cos, log, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst gauss = () => (rnd() + rnd() + rnd() - 1.5) * 2;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p, a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// The mist's sheen: a 64 by 64 tile of soft noise that wraps both ways.\nconst NZ = new Float32Array(4096).map((_, k) => 0.65 * vn((k & 63) / 8, (k >> 6) / 8, 8) + 0.35 * vn((k & 63) / 4, (k >> 6) / 4, 16));\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, x0 = xi & 63, y0 = (yi & 63) \u003c\u003c 6, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) \u003c\u003c 6;\n  return mix(mix(NZ[y0 + x0], NZ[y0 + x1], u), mix(NZ[y1 + x0], NZ[y1 + x1], u), v);\n}\n// A droplet is a round Gaussian; GL holds exp(-q / 32) out to where it is under 3%.\nconst GN = 112, GL = new Float32Array(GN).map((_, q) => exp(-q / 32));\n// The lamp lights the wall side best; a trail across the chamber is about 0.55 as bright.\nconst LIT = new Float32Array(W).map((_, x) => 0.48 + 0.52 * exp(-x / 30));\nconst STRIP = new Float32Array(H).map((_, y) => 0.86 + 0.14 * hash(y >> 2, 3));\n\n// Lamps: colour, near glow, its width in LEDs, far glow, drizzle, trails.\n// The laser sheet lights only the sensitive layer, so its trails stand out hardest.\nconst LAMPS = [\n  [0.6, 0.8, 1, 0.28, 6, 0.035, 1, 1],\n  [1, 0.9, 0.72, 0.3, 13, 0.1, 0.9, 0.9],\n  [0.4, 1, 0.6, 0.15, 3.5, 0.03, 1.3, 1.25],\n  [0.7, 0.46, 1, 0.3, 8, 0.08, 1.15, 0.9],\n];\n\n// Trail kinds: droplet radius, line brightness, life in seconds, how fast the\n// trail spreads (LED squared a second), bending radius in a full field,\n// scatter, bead spread, missing droplets, brightening toward the end, whether\n// it slows to a stop (curling tighter), delta rays per LED.\nconst kind = (sig, I, life, D, R, sc, bead, gap, br, slow, dl) => ({ sig, I, life, D, R, sc, bead, gap, br, slow, dl });\nconst MU = kind(0.5, 0.85, 3.4, 0.16, 380, 0.004, 0.55, 0.08, 0, 0, 1 / 170);\nconst BE = kind(0.46, 0.7, 2.9, 0.2, 16, 0.085, 0.7, 0.28, 0.9, 1, 0);\nconst DE = kind(0.44, 0.65, 2.6, 0.2, 5, 0.12, 0.6, 0.2, 0.7, 1, 0);\nconst AL = kind(0.7, 1.9, 4, 0.14, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\n// Source alphas are a touch thinner and go sooner, so the fan reads ray by ray.\nconst AS = kind(0.6, 1.6, 2.6, 0.12, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\nconst PR = kind(0.6, 1.3, 3.8, 0.18, 900, 0.01, 0.3, 0.02, 0.35, 0, 1 / 90);\n// The thoriated rod's tip.\nconst SX = 40.5, SY = 117.5;\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  params.s = {\n    T: F(N), U: F(153), V: F(153), PX: F(CAP), PY: F(CAP), PU: F(CAP), PV: F(CAP), PB: D(CAP), PL: F(CAP), PS: F(CAP), PK: F(CAP), PD: F(CAP),\n    DX: F(ND), DY: F(ND), DB: D(ND), DL: F(ND), DA: F(ND), head: 0, tail: 0, tf: 0, td: 0, wr: 99, tw: -99, ox: 0, oy: 0,\n    tsf: 1, tsd: 1, field: 0.06, src: 0, lamp: [...LAMPS[0]], k1: -1, live: 0, pend: [], cnt: [0, 0, 0, 0, 0, 0, 0].map(() => -log(1 - rnd())),\n  };\n  const S = params.s;\n  for (let j = 0; j \u003c ND; j++) drop(S, j, -rnd() * 1.4);\n}\n\nfunction puff(S, x, y, sig, I, life, D) {\n  const i = S.head++ & (CAP - 1), a = rnd() * 6.283, v = 0.1 + 0.35 * rnd();\n  if (S.head - S.tail > CAP) S.tail = S.head - CAP;\n  S.PX[i] = x;\n  S.PY[i] = y;\n  // Each droplet wanders a little on its own, so an old trail frays.\n  S.PU[i] = v * cos(a);\n  S.PV[i] = v * sin(a);\n  S.PB[i] = S.tf;\n  S.PL[i] = life * (0.85 + 0.3 * rnd());\n  S.PS[i] = 2 * sig * sig;\n  // Scaled so a line of droplets DS apart peaks at I.\n  S.PK[i] = I * sig * DS * 0.798;\n  S.PD[i] = D;\n}\n\n// Lays a trail of droplets from x, y heading th. A charge q bends it in the\n// field; a slowing particle bends tighter and scatters more toward its end.\n// With clip set it starts outside and stops once it has crossed the panel.\nfunction trail(S, x, y, th, len, k, q, R0, clip, I = k.I) {\n  const n = max(1, ceil(len / DS)), f = S.field, life = k.life * (0.85 + 0.3 * rnd());\n  let inside = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const rem = 1 - j / n, inn = x > -2 && x \u003c W + 2 && y > -2 && y \u003c H + 2;\n    if (clip) {\n      if (inn) inside = 1;\n      else if (inside) break;\n    }\n    if (inn && rnd() >= k.gap) puff(S, x, y, k.sig * (1 + 0.3 * k.br * (1 - rem) ** 2), I * (1 + k.bead * (rnd() * 2 - 1)) * (1 + k.br * (1 - rem) ** 2), life, k.D);\n    // A knock-on electron kicked sideways out of the trail.\n    if (k.dl && inn && rnd() \u003c k.dl * DS) {\n      const s = rnd() \u003c 0.5 ? -1 : 1;\n      trail(S, x, y, th + s * (0.9 + 0.6 * rnd()), 3 + 11 * rnd(), DE, -1, 2 + 5 * rnd(), 0);\n    }\n    const R = R0 * (k.slow ? sqrt(rem + 0.03) : 1);\n    th += q * min(0.5, (f * DS) / R) + (k.sc * gauss() * SQ) / (k.slow ? sqrt(rem + 0.12) : 1);\n    x += cos(th) * DS;\n    y += sin(th) * DS;\n  }\n  return [x, y, th];\n}\n\nconst beta = (S, x, y, th, len) => trail(S, x, y, th, len, BE, rnd() \u003c 0.9 ? -1 : 1, 8 + 22 * rnd(), 0);\n\n// A muon through a point of the chamber; most cross it the long way.\nfunction muon(S, px, py, th) {\n  const stop = rnd() \u003c 0.1, len = stop ? 170 + 60 * rnd() : 400;\n  const e = trail(S, px - cos(th) * 170, py - sin(th) * 170, th, len, MU, rnd() \u003c 0.55 ? 1 : -1, 220 + 380 * rnd(), 1);\n  // One that stops in the chamber decays: an electron leaves its end at an angle.\n  if (stop && e[0] > 0 && e[0] \u003c W && e[1] > 0 && e[1] \u003c H) beta(S, e[0], e[1], e[2] + (rnd() \u003c 0.5 ? -1 : 1) * (0.6 + 1.8 * rnd()), 30 + 30 * rnd());\n}\nconst steep = () => (rnd() \u003c 0.62 ? PI / 2 + 0.45 * gauss() + (rnd() \u003c 0.5 ? PI : 0) : rnd() * 2 * PI);\n\n// An alpha: short, thick, dead straight, thickest at its end. Now and then it\n// glances off a nucleus near its end and the recoil leaves a stub: a fork.\nfunction alpha(S, x, y, th, len) {\n  if (rnd() \u003c 0.14 && len > 7) {\n    const e = trail(S, x, y, th, len * 0.75, AL, 1, 6000, 0, AL.I * 0.9), s = rnd() \u003c 0.5 ? -1 : 1;\n    trail(S, e[0], e[1], e[2] + s * (0.4 + 0.6 * rnd()), len * 0.3, AL, 1, 6000, 0);\n    trail(S, e[0], e[1], e[2] - s * (0.9 + 0.6 * rnd()), 1.5 + 2 * rnd(), AL, 1, 6000, 0, AL.I * 1.3);\n  } else trail(S, x, y, th, len, AL, 1, 6000, 0);\n}\n\n// A cosmic proton breaks up a nucleus: a thin track in and a star of thick prongs.\nfunction star(S) {\n  const x = 10 + 44 * rnd(), y = 16 + 96 * rnd(), th = steep();\n  trail(S, x - cos(th) * 90, y - sin(th) * 90, th, 90, MU, 1, 600, 0);\n  for (let j = 0, n = 2 + floor(rnd() * 3); j \u003c n; j++) trail(S, x, y, rnd() * 2 * PI, 5 + 16 * rnd(), PR, 1, 900, 0);\n  if (rnd() \u003c 0.5) trail(S, x, y, th + gauss() * 0.6, 40 + 40 * rnd(), MU, rnd() \u003c 0.5 ? 1 : -1, 300, 1);\n}\n\n// A shower: one direction for all, muons in parallel and electrons beside them.\nfunction shower(S) {\n  const th = steep(), c = cos(th), s = sin(th), n = 7 + floor(rnd() * 5);\n  for (let j = 0; j \u003c n; j++) {\n    const o = (rnd() * 2 - 1) * 34;\n    muon(S, 32 - s * o + c * gauss() * 20, 64 + c * o + s * gauss() * 20, th + 0.012 * gauss());\n  }\n  for (let j = 0, m = 3 + floor(rnd() * 4); j \u003c m; j++) {\n    const o = (rnd() * 2 - 1) * 30, a = (rnd() * 2 - 1) * 50;\n    beta(S, 32 - s * o + c * a, 64 + c * o + s * a, th + 0.2 * gauss(), 25 + 40 * rnd());\n  }\n}\n\nfunction spawn(S, k) {\n  const src = S.src;\n  if (k === 0) muon(S, rnd() * W, rnd() * H, steep());\n  // A steep muon crosses the thin sensitive layer in a few LEDs.\n  else if (k === 1) trail(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd(), MU, 1, 400, 0);\n  else if (k === 2) beta(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 18 + 55 * rnd());\n  // Radon in the air: an alpha anywhere, foreshortened when it leaves the layer.\n  else if (k === 3) alpha(S, 3 + rnd() * (W - 3), rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd() ** 0.7);\n  else if (k === 4) star(S);\n  else if (k === 5) {\n    const t = -PI / 2 + (rnd() * 2 - 1) * 1.35;\n    trail(S, SX + cos(t) * 1.5, SY + 1 + sin(t) * 1.5, t, 11 + 18 * rnd(), AS, 1, 6000, 0);\n  } else if (k === 6 && src > 0.02) {\n    // Thoron off the rod; its daughter decays a fraction of a second later from the same point.\n    const x = cl(SX + gauss() * 13, 4, W - 2), y = SY - 6 - 40 * rnd() ** 1.5;\n    alpha(S, x, y, rnd() * 2 * PI, 6 + 10 * rnd());\n    S.pend.push([S.tf + 0.1 + 0.3 * rnd(), x, y]);\n  }\n}\n\n// The vapour's slow convection on a grid of 9 by 17 nodes, 8 LEDs apart: the\n// curl of a few drifting waves, so it neither piles up nor thins out, and a\n// gentle drift that turns round over a minute or two.\nconst MODES = [[0.09, 0.05, 0.11, 0, 9], [-0.06, 0.08, -0.09, 2, 8], [0.13, -0.11, 0.13, 4, 4], [0.03, 0.12, 0.07, 1.3, 6]];\nfunction flow(S) {\n  const t = S.td, mu = 0.45 * cos(t * 0.05), mv = 0.45 * sin(t * 0.07 + 1);\n  for (let j = 0; j \u003c 17; j++)\n    for (let i = 0; i \u003c 9; i++) {\n      let u = mu, v = mv;\n      for (const [kx, ky, w, p, a] of MODES) {\n        const c = a * cos(kx * i * 8 + ky * j * 8 + w * t + p);\n        u += ky * c;\n        v -= kx * c;\n      }\n      S.U[j * 9 + i] = u;\n      S.V[j * 9 + i] = v;\n    }\n  return [mu, mv];\n}\nfunction vel(S, x, y, out) {\n  const gx = cl(x / 8, 0, 7.999), gy = cl(y / 8, 0, 15.999), i = floor(gx), j = floor(gy), u = gx - i, v = gy - j, k = j * 9 + i;\n  out[0] = mix(mix(S.U[k], S.U[k + 1], u), mix(S.U[k + 9], S.U[k + 10], u), v);\n  out[1] = mix(mix(S.V[k], S.V[k + 1], u), mix(S.V[k + 9], S.V[k + 10], u), v);\n}\n\n// The drizzle: droplets raining out of the mist, seen as they cross the light.\nfunction drop(S, j, b) {\n  S.DX[j] = rnd() * W;\n  S.DY[j] = rnd() * H;\n  S.DB[j] = S.tf + b;\n  S.DL[j] = 0.45 + 1.1 * rnd();\n  S.DA[j] = 0.08 + 0.28 * rnd();\n}\n\nconst UV = new Float32Array(2);\nfunction step(S, d) {\n  const df = d * S.tsf, dd = d * S.tsd;\n  (S.tf += df), (S.td += dd), (S.wr += d);\n  const [mu, mv] = flow(S);\n  (S.ox += mu * dd), (S.oy += mv * dd);\n  // Births run on the fade clock, so the chamber holds as many trails at any speed.\n  if (S.wr > 1.2) {\n    const rate = [0.75, 1.1, 2.4, 0.9, 0.05, 5 * S.src ** 1.5, 0.6 * S.src];\n    for (let k = 0; k \u003c 7; k++) for (S.cnt[k] -= rate[k] * df; S.cnt[k] \u003c= 0; S.cnt[k] -= log(1 - rnd())) spawn(S, k);\n  }\n  for (const p of S.pend) if (p[0] \u003c= S.tf) alpha(S, p[1], p[2], rnd() * 2 * PI, 6 + 10 * rnd()), (p[0] = -1);\n  S.pend = S.pend.filter((p) => p[0] > 0);\n  const { PX, PY, PU, PV, PB, PL } = S;\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1);\n    if (S.tf - PB[i] > PL[i]) continue;\n    vel(S, PX[i], PY[i], UV);\n    PX[i] += (UV[0] + PU[i]) * dd;\n    PY[i] += (UV[1] + PV[i]) * dd;\n  }\n  while (S.tail \u003c S.head && S.tf - PB[S.tail & (CAP - 1)] > PL[S.tail & (CAP - 1)]) S.tail++;\n  for (let j = 0; j \u003c ND; j++) {\n    if (S.tf - S.DB[j] > S.DL[j]) drop(S, j, 0);\n    vel(S, S.DX[j], S.DY[j], UV);\n    S.DX[j] += UV[0] * dd;\n    S.DY[j] += UV[1] * dd;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2, k1 = cl(k[0], 0, 1);\n  (S.field = cl(k[3], 0, 1)), (S.src = cl(k[2], 0, 1)), (S.tsd = sp), (S.tsf = sp ** 0.6);\n  if (k1 !== S.k1) {\n    const f = k1 * 3, a = min(2, floor(f)), u = sm(0, 1, f - a);\n    for (let j = 0; j \u003c 8; j++) S.lamp[j] = mix(LAMPS[a][j], LAMPS[a + 1][j], u);\n    S.k1 = k1;\n  }\n  // Start with the chamber already running.\n  for (; !S.live; S.live = 1) while (S.tf \u003c 4.5) step(S, 1 / 30);\n  const b = input.btnPressed || [];\n  if (b[0]) shower(S);\n  if (b[1] && S.wr > 0.3) (S.tw = S.tf), (S.wr = 0);\n  step(S, cl(dt || 0, 0, 0.1));\n}\n\nfunction splat(T, x, y, s2, a) {\n  const r = sqrt(3.5 * s2), k = 32 / s2, x0 = max(0, ceil(x - 0.5 - r)), x1 = min(W - 1, floor(x - 0.5 + r)), y0 = max(0, ceil(y - 0.5 - r)), y1 = min(H - 1, floor(y - 0.5 + r));\n  for (let py = y0; py \u003c= y1; py++) {\n    const dy = py + 0.5 - y, d2 = dy * dy, o = py * W;\n    for (let px = x0; px \u003c= x1; px++) {\n      const dx = px + 0.5 - x, q = ((dx * dx + d2) * k) | 0;\n      if (q \u003c GN) T[o + px] += a * GL[q];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.live) return;\n  const { T, PX, PY, PB, PL, PS, PK, PD, lamp } = S, tf = S.tf, tin = 0.07 * S.tsf;\n  // After a clear the old trails blur and fade within a second; the mist dims and comes back.\n  const wq = exp(-S.wr / 0.3), wipe = S.wr \u003c 2.5 ? sm(0, 0.25, S.wr) * exp(-S.wr / 1.1) : 0;\n  T.fill(0);\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1), a = tf - PB[i], L = PL[i];\n    if (a > L) continue;\n    const old = PB[i] \u003c S.tw;\n    if (old && S.wr > 2) continue;\n    // Fresh droplets catch the light hardest for the first half second.\n    let s2 = PS[i] + 2 * PD[i] * a, e = min(1, a / tin) * (1 - sm(0.12, 1, a / L)) * (1 + 0.6 * exp(-a / 0.4));\n    if (old) (s2 += 3 * (1 - wq)), (e *= wq);\n    // Once a trail has spread wider than the droplet spacing, every second\n    // or fourth droplet stands for its neighbours.\n    let m = 1;\n    if (s2 > 5) {\n      if (n & 3) continue;\n      m = 4;\n    } else if (s2 > 2.2) {\n      if (n & 1) continue;\n      m = 2;\n    }\n    if (e > 0.004) splat(T, PX[i], PY[i], s2, (m * PK[i] * e) / s2);\n  }\n  // Drizzle, brightest in the light near the wall, heavier just after a clear.\n  const dz = lamp[6] * (1 + 2.5 * wipe);\n  for (let j = 0; j \u003c ND; j++) {\n    const u = (tf - S.DB[j]) / S.DL[j];\n    if (u \u003c= 0 || u >= 1) continue;\n    const x = S.DX[j] - 0.5, y = S.DY[j] - 0.5, xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n    const a = dz * S.DA[j] * sin(u * PI) ** 2 * (0.3 + 0.7 * exp(-S.DX[j] / 16));\n    if (xi \u003c 0 || yi \u003c 0 || xi >= W - 1 || yi >= H - 1) continue;\n    const o = yi * W + xi;\n    T[o] += a * (1 - fx) * (1 - fy);\n    T[o + 1] += a * fx * (1 - fy);\n    T[o + W] += a * (1 - fx) * fy;\n    T[o + W + 1] += a * fx * fy;\n  }\n  const [cr, cg, cb, g1, w1, g2, , tg] = lamp, rod = sm(0.01, 0.06, S.src), mist = 1 - 0.7 * wipe, ox = S.ox, oy = S.oy;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (x === 0) {\n        // The lamp strip itself, through the glass at the chamber's rim.\n        const v = 0.92 * STRIP[y] * (1 - 0.3 * wipe);\n        display.setPixel(0, y, 255 * v * mix(cr, 1, 0.4), 255 * v * mix(cg, 1, 0.4), 255 * v * mix(cb, 1, 0.4));\n        continue;\n      }\n      const n = 0.6 * nz(x * 0.9 - ox * 0.9, y * 0.55 - oy * 0.55) + 0.4 * nz(x * 1.7 - ox * 1.6 + 17, y * 1.1 - oy * 1.4 + 29);\n      const h = (g1 * exp(-(x - 1) / w1) + g2 * exp(-x / 40)) * (1.7 * n * n) * mist;\n      let t = T[i] * LIT[x] * tg, g = 0;\n      // The rod: dull metal lit from the lamp side.\n      if (rod > 0 && y > SY - 0.5 && x > SX - 2 && x \u003c SX + 1) g = rod * (x \u003c SX - 0.5 ? 0.42 : 0.24) * (y \u003c SY + 0.5 ? 1.25 : 1);\n      const v = min(1, (1 - exp(-1.6 * (t + h + g))) * 1.25), wf = 0.8 * sm(0.1, 0.8, t) + 0.6 * g;\n      display.setPixel(x, y, 255 * v * mix(cr, 1, wf), 255 * v * mix(cg, 1, wf), 255 * v * mix(cb, 1, wf));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often."},{"name":"Source","min":0,"max":1,"about":"A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point."},{"name":"Field","min":0,"max":1,"about":"A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way."}],"start":[0,2,0,0.06],"measures":{"motion":0.104,"detail":0.0456,"edges":0.3473,"complexity":1.374,"coverage":0.2504,"colour":0.0521,"drift":0.0923},"knobResponse":[0.046,0.1102,0.1287,0.0714]},{"slug":"constant-width","title":"Constant Width","family":"geometry","round":35,"note":"너비 62 LED 의 통로를 폭이 일정한 곡선이 위아래로 맞닿아 쌓인 채 내려가요. 뢸로 삼각형과 오각형, 칠각형, 홀수 배음으로 지은 매끈한 곡선과 원이 저마다 다른 빠르기로 도는데도 늘 두 벽과 위아래 경계선에 닿고, 닿은 자리마다 흰 점이 서요. K3 은 곡선마다 같은 너비의 원을 섞어 둘레 194.8 은 그대로 두고 삼각형의 넓이 2709 LED 를 원의 3019 까지 부풀리고, K1 을 누르면 꼭짓점이 지나간 길이 금색으로 남아 삼각형이 귀만 둥근 정사각형을 그려요.","idea":"A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.","buttons":"K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.","code":"// ===== Patternflow pattern =====\n// Title:   Constant Width\n// Family:  geometry\n// Idea:    A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Curves of constant width, the Reuleaux polygons (Franz Reuleaux, 1876), and Barbier's theorem that they all have perimeter pi times their width (Joseph-Émile Barbier, 1860)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1\n//\n// Knob 1: Hue. Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive.\n// Knob 2: Speed. How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100.\n// Knob 3: Round. Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way.\n// Knob 4: Spin. How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that.\n// Buttons: K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.\n\nconst W = 64, H = 128, WD = 62, N = 256, CYCLE = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The eight curves of the cycle, all of width WD. A Reuleaux n-gon is the\n// intersection of the n disks of radius WD centred on the corners of a\n// regular n-gon whose corner-to-far-corner distance is WD. A harmonic curve\n// has support function h = WD/2 + sum a cos(k t + c) over odd k from 3 up:\n// odd k is what makes h(t) + h(t + pi) = WD, the width in every direction,\n// and the radius of curvature h + h'' = WD/2 - sum a (k^2 - 1) cos(k t + c)\n// stays above 0, so it is convex. The amplitudes below keep that radius at\n// least 2 LEDs.\nconst SHAPES = [\n  { n: 3 },\n  { harm: [[3, 3.6, 0]] },\n  { n: 5 },\n  { harm: [[3, 2.2, 0], [5, 0.5, 1.1]] },\n  { n: 7 },\n  { disc: true },\n  { n: 3 },\n  { harm: [[3, 2.6, 0], [7, 0.16, 2.0]] },\n];\n// Base hue and brightness for each place in the cycle. The sharp curves are\n// lit brighter than the smooth ones, so the column reads as light and deep\n// shapes taking turns as it slides. The map's drift comes mostly from the\n// dark corners of each square, which swing round as the curves turn: with\n// all eight at one brightness it reads 0.263, with these 0.277.\nconst BASE = [[0.13, 0.86], [0.76, 0.55], [0.95, 0.86], [0.6, 0.55], [0.48, 0.86], [0.68, 0.55], [0.3, 0.86], [0.54, 0.55]];\n// The body angles each curve's trace follows: the n corners of a Reuleaux\n// polygon and the k peaks of a curve with one harmonic, which all run round\n// the same path, and for a curve of two harmonics the one point where its\n// support function peaks, since its corners are not alike and each would\n// draw a path of its own.\nfor (const s of SHAPES) {\n  if (s.n) s.tr = Array.from({ length: s.n }, (_, c) => (TAU * c) / s.n);\n  else if (s.harm && s.harm.length === 1) {\n    const [k, , c0] = s.harm[0];\n    s.tr = Array.from({ length: k }, (_, m) => (TAU * m - c0) / k);\n  } else if (s.harm) {\n    let best = -1e9, at = 0;\n    for (let i = 0; i \u003c 3600; i++) {\n      const b = (TAU * i) / 3600;\n      let h = 0;\n      for (const [k, a, c] of s.harm) h += a * cos(k * b + c);\n      if (h > best) (best = h), (at = b);\n    }\n    s.tr = [at];\n  } else s.tr = [0];\n}\n\n// Support function h and its derivative at body angle b, for a curve mixed\n// a share t of the way to the disc.\nfunction support(s, b, t, out) {\n  let h, d;\n  if (s.n) {\n    const n = s.n, R = WD / (2 * cos(PI / (2 * n))), step = TAU / n, half = PI / (2 * n);\n    let del = b - round(b / step) * step;\n    if (abs(del) \u003c= half) (h = R * cos(del)), (d = -R * sin(del));\n    else {\n      // The opposite direction falls in a corner's cone, so here the curve\n      // is the arc of radius WD round that corner.\n      const b2 = b + PI;\n      del = b2 - round(b2 / step) * step;\n      (h = WD - R * cos(del)), (d = R * sin(del));\n    }\n  } else if (s.harm) {\n    (h = WD / 2), (d = 0);\n    for (const [k, a, c] of s.harm) (h += a * cos(k * b + c)), (d -= a * k * sin(k * b + c));\n  } else (h = WD / 2), (d = 0);\n  out[0] = (1 - t) * h + (t * WD) / 2;\n  out[1] = (1 - t) * d;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, round: 0, spin: 0.06,\n    // The column's slide in rows and the spin clock in radians.\n    slide: 15, clock: 0,\n    trace: false, traces: new Map(),\n    px: new Float32Array(N), py: new Float32Array(N),\n    xl: new Float32Array(H), xr: new Float32Array(H),\n    lab: new Int8Array(W * H), rgb: new Float32Array(W * H * 3),\n    col: new Float32Array(CYCLE * 6), colHue: NaN, sup: new Float32Array(2),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.round = cl(k[2], 0, 1);\n  P.spin = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.trace = !P.trace;\n    P.traces.clear();\n  }\n  P.slide += d * P.speed * 3;\n  P.clock += d * (0.4 + 2.6 * P.spin);\n}\n\n// The angle a curve in slot j has turned to: neighbours turn opposite ways,\n// each at a rate between 0.7 and 1.3 times the clock, from a start of its own.\nconst angle = (j, clock) => hash(j * 3 + 1) * TAU + (j & 1 ? -1 : 1) * (0.7 + 0.6 * hash(j * 3 + 2)) * clock;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { px, py, xl, xr, lab, rgb, col, sup, traces } = P;\n  if (P.colHue !== P.hue) {\n    // Fill and rim colours for each place in the cycle. The rim is the fill\n    // pushed to full brightness and halfway to white, at least 40 levels\n    // above every fill so it reads as a hard line.\n    // A deep fill from orange round to lime reads as brown or olive, so in\n    // that band the deep curves are lifted toward the light ones' level and\n    // paled a little.\n    for (let c = 0; c \u003c CYCLE; c++) {\n      const h = P.hue + BASE[c][0], hf = h - floor(h), band = BASE[c][1] \u003c 0.7 ? max(0, 1 - abs(hf - 0.14) / 0.15) : 0;\n      hsv(h, 0.8 - 0.22 * band, (BASE[c][1] + 0.3 * band) * 0.94, col, c * 6);\n      hsv(h, 0.45, 1, col, c * 6 + 3);\n    }\n    P.colHue = P.hue;\n  }\n  lab.fill(0);\n  rgb.fill(0);\n  // Slot j's top line sits at row slide - j * WD: the slots stack upward\n  // with j and the column slides down as slide grows.\n  const jLo = floor((P.slide - H) / WD), jHi = ceil(P.slide / WD);\n  const vis = [];\n  for (let j = jLo; j \u003c= jHi; j++) {\n    const top = P.slide - j * WD;\n    if (top >= H || top + WD \u003c= 0) continue;\n    const shape = SHAPES[((j % CYCLE) + CYCLE) % CYCLE], phi = angle(j, P.clock);\n    // Boundary points from the support function, panel direction a = 2 pi i\n    // / N: the point is h u(a) + h' u'(a) with the body angle a - phi. The\n    // panel's y runs down, so i = N/2 faces the left wall and 3N/4 faces up.\n    for (let i = 0; i \u003c N; i++) {\n      const a = (TAU * i) / N, ca = cos(a), sa = sin(a);\n      support(shape, a - phi, P.round, sup);\n      px[i] = sup[0] * ca - sup[1] * sa;\n      py[i] = sup[0] * sa + sup[1] * ca;\n    }\n    // The left support line on the inner face of the left wall, x = 1, and\n    // the top one on the slot's top line. The width is WD in every\n    // direction, so the right one lands on x = 63 and the bottom one on the\n    // next slot's top line without being placed there.\n    const ox = 1 - px[N / 2], oy = top - py[(3 * N) / 4];\n    const label = vis.length + 1;\n    xl.fill(1e9);\n    xr.fill(-1e9);\n    for (let i = 0; i \u003c N; i++) {\n      const xa = px[i] + ox, ya = py[i] + oy, i2 = (i + 1) % N, xb = px[i2] + ox, yb = py[i2] + oy;\n      if (ya === yb) continue;\n      const r0 = max(0, ceil(min(ya, yb) - 0.5)), r1 = min(H - 1, floor(max(ya, yb) - 0.5));\n      for (let r = r0; r \u003c= r1; r++) {\n        const x = xa + ((r + 0.5 - ya) * (xb - xa)) / (yb - ya);\n        if (x \u003c xl[r]) xl[r] = x;\n        if (x > xr[r]) xr[r] = x;\n      }\n    }\n    for (let r = max(0, floor(top)); r \u003c= min(H - 1, ceil(top + WD)); r++) {\n      if (xr[r] \u003c xl[r]) continue;\n      const x0 = max(1, ceil(xl[r] - 0.5)), x1 = min(W - 2, floor(xr[r] - 0.5));\n      for (let x = x0; x \u003c= x1; x++) lab[r * W + x] = label;\n    }\n    vis.push({\n      j, top, c: ((j % CYCLE) + CYCLE) % CYCLE, shape, phi, ox, oy,\n      left: py[N / 2] + oy, right: py[0] + oy, upX: px[(3 * N) / 4] + ox, downX: px[N / 4] + ox,\n    });\n  }\n  // Fill, with a rim wherever a 4-neighbour belongs to something else.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, l = lab[p];\n      if (!l) continue;\n      const rim = lab[p - 1] !== l || lab[p + 1] !== l || (y > 0 && lab[p - W] !== l) || (y \u003c H - 1 && lab[p + W] !== l);\n      const o = vis[l - 1].c * 6 + (rim ? 3 : 0), q = p * 3;\n      (rgb[q] = col[o]), (rgb[q + 1] = col[o + 1]), (rgb[q + 2] = col[o + 2]);\n    }\n  // The walls: dim slate, brighter where a slot's line meets them, and white\n  // over five rows where a curve touches them.\n  for (let y = 0; y \u003c H; y++)\n    for (const x of [0, W - 1]) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = 0.14), (rgb[q + 1] = 0.18), (rgb[q + 2] = 0.24);\n    }\n  const dot = (x, y, r, g, b) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    (rgb[q] = r), (rgb[q + 1] = g), (rgb[q + 2] = b);\n  };\n  for (const v of vis) {\n    const ty = floor(v.top);\n    for (const x of [0, W - 1]) dot(x, ty, 0.55, 0.6, 0.7);\n    for (let e = -2; e \u003c= 2; e++) dot(0, floor(v.left) + e, 1, 1, 1), dot(W - 1, floor(v.right) + e, 1, 1, 1);\n    // Above and below: a small white cross where the curve meets the line.\n    for (const [cx, cy] of [[v.upX, v.top], [v.downX, v.top + WD]]) {\n      const x = floor(cx), y = floor(cy - (cy === v.top ? 0 : 1e-3));\n      dot(x, y, 1, 1, 1), dot(x - 1, y, 1, 1, 1), dot(x + 1, y, 1, 1, 1), dot(x, y - 1, 1, 1, 1), dot(x, y + 1, 1, 1, 1);\n    }\n  }\n  // The corner trace, kept in each slot's own square so it slides with it.\n  if (P.trace) {\n    const seen = new Set();\n    for (const v of vis) {\n      seen.add(v.j);\n      let t = traces.get(v.j);\n      if (!t) traces.set(v.j, (t = { xs: [], ys: [], last: null }));\n      const tr = v.shape.tr, m = tr.length, now = [];\n      for (let c = 0; c \u003c m; c++) {\n        // At a peak of the support function h' is 0, so the point is h times\n        // the unit vector there.\n        const a = tr[c] + v.phi;\n        support(v.shape, tr[c], P.round, sup);\n        const ca = cos(a), sa = sin(a);\n        now.push([sup[0] * ca - sup[1] * sa + v.ox, sup[0] * sa + sup[1] * ca + v.oy - v.top]);\n      }\n      if (t.xs.length \u003c 12000)\n        for (let c = 0; c \u003c m; c++) {\n          const [x1, y1] = now[c], [x0, y0] = t.last ? t.last[c] : now[c];\n          const steps = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.7));\n          for (let s = 1; s \u003c= steps; s++) t.xs.push(x0 + ((x1 - x0) * s) / steps), t.ys.push(y0 + ((y1 - y0) * s) / steps);\n        }\n      t.last = now;\n      for (let i = 0; i \u003c t.xs.length; i++) dot(floor(t.xs[i]), floor(t.ys[i] + v.top), 1, 0.78, 0.25);\n    }\n    for (const j of traces.keys()) if (!seen.has(j)) traces.delete(j);\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-constant-width","type":"code","name":"constant-width","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Constant Width\n// Family:  geometry\n// Idea:    A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Curves of constant width, the Reuleaux polygons (Franz Reuleaux, 1876), and Barbier's theorem that they all have perimeter pi times their width (Joseph-Émile Barbier, 1860)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1\n//\n// Knob 1: Hue. Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive.\n// Knob 2: Speed. How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100.\n// Knob 3: Round. Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way.\n// Knob 4: Spin. How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that.\n// Buttons: K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.\n\nconst W = 64, H = 128, WD = 62, N = 256, CYCLE = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The eight curves of the cycle, all of width WD. A Reuleaux n-gon is the\n// intersection of the n disks of radius WD centred on the corners of a\n// regular n-gon whose corner-to-far-corner distance is WD. A harmonic curve\n// has support function h = WD/2 + sum a cos(k t + c) over odd k from 3 up:\n// odd k is what makes h(t) + h(t + pi) = WD, the width in every direction,\n// and the radius of curvature h + h'' = WD/2 - sum a (k^2 - 1) cos(k t + c)\n// stays above 0, so it is convex. The amplitudes below keep that radius at\n// least 2 LEDs.\nconst SHAPES = [\n  { n: 3 },\n  { harm: [[3, 3.6, 0]] },\n  { n: 5 },\n  { harm: [[3, 2.2, 0], [5, 0.5, 1.1]] },\n  { n: 7 },\n  { disc: true },\n  { n: 3 },\n  { harm: [[3, 2.6, 0], [7, 0.16, 2.0]] },\n];\n// Base hue and brightness for each place in the cycle. The sharp curves are\n// lit brighter than the smooth ones, so the column reads as light and deep\n// shapes taking turns as it slides. The map's drift comes mostly from the\n// dark corners of each square, which swing round as the curves turn: with\n// all eight at one brightness it reads 0.263, with these 0.277.\nconst BASE = [[0.13, 0.86], [0.76, 0.55], [0.95, 0.86], [0.6, 0.55], [0.48, 0.86], [0.68, 0.55], [0.3, 0.86], [0.54, 0.55]];\n// The body angles each curve's trace follows: the n corners of a Reuleaux\n// polygon and the k peaks of a curve with one harmonic, which all run round\n// the same path, and for a curve of two harmonics the one point where its\n// support function peaks, since its corners are not alike and each would\n// draw a path of its own.\nfor (const s of SHAPES) {\n  if (s.n) s.tr = Array.from({ length: s.n }, (_, c) => (TAU * c) / s.n);\n  else if (s.harm && s.harm.length === 1) {\n    const [k, , c0] = s.harm[0];\n    s.tr = Array.from({ length: k }, (_, m) => (TAU * m - c0) / k);\n  } else if (s.harm) {\n    let best = -1e9, at = 0;\n    for (let i = 0; i \u003c 3600; i++) {\n      const b = (TAU * i) / 3600;\n      let h = 0;\n      for (const [k, a, c] of s.harm) h += a * cos(k * b + c);\n      if (h > best) (best = h), (at = b);\n    }\n    s.tr = [at];\n  } else s.tr = [0];\n}\n\n// Support function h and its derivative at body angle b, for a curve mixed\n// a share t of the way to the disc.\nfunction support(s, b, t, out) {\n  let h, d;\n  if (s.n) {\n    const n = s.n, R = WD / (2 * cos(PI / (2 * n))), step = TAU / n, half = PI / (2 * n);\n    let del = b - round(b / step) * step;\n    if (abs(del) \u003c= half) (h = R * cos(del)), (d = -R * sin(del));\n    else {\n      // The opposite direction falls in a corner's cone, so here the curve\n      // is the arc of radius WD round that corner.\n      const b2 = b + PI;\n      del = b2 - round(b2 / step) * step;\n      (h = WD - R * cos(del)), (d = R * sin(del));\n    }\n  } else if (s.harm) {\n    (h = WD / 2), (d = 0);\n    for (const [k, a, c] of s.harm) (h += a * cos(k * b + c)), (d -= a * k * sin(k * b + c));\n  } else (h = WD / 2), (d = 0);\n  out[0] = (1 - t) * h + (t * WD) / 2;\n  out[1] = (1 - t) * d;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, round: 0, spin: 0.06,\n    // The column's slide in rows and the spin clock in radians.\n    slide: 15, clock: 0,\n    trace: false, traces: new Map(),\n    px: new Float32Array(N), py: new Float32Array(N),\n    xl: new Float32Array(H), xr: new Float32Array(H),\n    lab: new Int8Array(W * H), rgb: new Float32Array(W * H * 3),\n    col: new Float32Array(CYCLE * 6), colHue: NaN, sup: new Float32Array(2),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.round = cl(k[2], 0, 1);\n  P.spin = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.trace = !P.trace;\n    P.traces.clear();\n  }\n  P.slide += d * P.speed * 3;\n  P.clock += d * (0.4 + 2.6 * P.spin);\n}\n\n// The angle a curve in slot j has turned to: neighbours turn opposite ways,\n// each at a rate between 0.7 and 1.3 times the clock, from a start of its own.\nconst angle = (j, clock) => hash(j * 3 + 1) * TAU + (j & 1 ? -1 : 1) * (0.7 + 0.6 * hash(j * 3 + 2)) * clock;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { px, py, xl, xr, lab, rgb, col, sup, traces } = P;\n  if (P.colHue !== P.hue) {\n    // Fill and rim colours for each place in the cycle. The rim is the fill\n    // pushed to full brightness and halfway to white, at least 40 levels\n    // above every fill so it reads as a hard line.\n    // A deep fill from orange round to lime reads as brown or olive, so in\n    // that band the deep curves are lifted toward the light ones' level and\n    // paled a little.\n    for (let c = 0; c \u003c CYCLE; c++) {\n      const h = P.hue + BASE[c][0], hf = h - floor(h), band = BASE[c][1] \u003c 0.7 ? max(0, 1 - abs(hf - 0.14) / 0.15) : 0;\n      hsv(h, 0.8 - 0.22 * band, (BASE[c][1] + 0.3 * band) * 0.94, col, c * 6);\n      hsv(h, 0.45, 1, col, c * 6 + 3);\n    }\n    P.colHue = P.hue;\n  }\n  lab.fill(0);\n  rgb.fill(0);\n  // Slot j's top line sits at row slide - j * WD: the slots stack upward\n  // with j and the column slides down as slide grows.\n  const jLo = floor((P.slide - H) / WD), jHi = ceil(P.slide / WD);\n  const vis = [];\n  for (let j = jLo; j \u003c= jHi; j++) {\n    const top = P.slide - j * WD;\n    if (top >= H || top + WD \u003c= 0) continue;\n    const shape = SHAPES[((j % CYCLE) + CYCLE) % CYCLE], phi = angle(j, P.clock);\n    // Boundary points from the support function, panel direction a = 2 pi i\n    // / N: the point is h u(a) + h' u'(a) with the body angle a - phi. The\n    // panel's y runs down, so i = N/2 faces the left wall and 3N/4 faces up.\n    for (let i = 0; i \u003c N; i++) {\n      const a = (TAU * i) / N, ca = cos(a), sa = sin(a);\n      support(shape, a - phi, P.round, sup);\n      px[i] = sup[0] * ca - sup[1] * sa;\n      py[i] = sup[0] * sa + sup[1] * ca;\n    }\n    // The left support line on the inner face of the left wall, x = 1, and\n    // the top one on the slot's top line. The width is WD in every\n    // direction, so the right one lands on x = 63 and the bottom one on the\n    // next slot's top line without being placed there.\n    const ox = 1 - px[N / 2], oy = top - py[(3 * N) / 4];\n    const label = vis.length + 1;\n    xl.fill(1e9);\n    xr.fill(-1e9);\n    for (let i = 0; i \u003c N; i++) {\n      const xa = px[i] + ox, ya = py[i] + oy, i2 = (i + 1) % N, xb = px[i2] + ox, yb = py[i2] + oy;\n      if (ya === yb) continue;\n      const r0 = max(0, ceil(min(ya, yb) - 0.5)), r1 = min(H - 1, floor(max(ya, yb) - 0.5));\n      for (let r = r0; r \u003c= r1; r++) {\n        const x = xa + ((r + 0.5 - ya) * (xb - xa)) / (yb - ya);\n        if (x \u003c xl[r]) xl[r] = x;\n        if (x > xr[r]) xr[r] = x;\n      }\n    }\n    for (let r = max(0, floor(top)); r \u003c= min(H - 1, ceil(top + WD)); r++) {\n      if (xr[r] \u003c xl[r]) continue;\n      const x0 = max(1, ceil(xl[r] - 0.5)), x1 = min(W - 2, floor(xr[r] - 0.5));\n      for (let x = x0; x \u003c= x1; x++) lab[r * W + x] = label;\n    }\n    vis.push({\n      j, top, c: ((j % CYCLE) + CYCLE) % CYCLE, shape, phi, ox, oy,\n      left: py[N / 2] + oy, right: py[0] + oy, upX: px[(3 * N) / 4] + ox, downX: px[N / 4] + ox,\n    });\n  }\n  // Fill, with a rim wherever a 4-neighbour belongs to something else.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, l = lab[p];\n      if (!l) continue;\n      const rim = lab[p - 1] !== l || lab[p + 1] !== l || (y > 0 && lab[p - W] !== l) || (y \u003c H - 1 && lab[p + W] !== l);\n      const o = vis[l - 1].c * 6 + (rim ? 3 : 0), q = p * 3;\n      (rgb[q] = col[o]), (rgb[q + 1] = col[o + 1]), (rgb[q + 2] = col[o + 2]);\n    }\n  // The walls: dim slate, brighter where a slot's line meets them, and white\n  // over five rows where a curve touches them.\n  for (let y = 0; y \u003c H; y++)\n    for (const x of [0, W - 1]) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = 0.14), (rgb[q + 1] = 0.18), (rgb[q + 2] = 0.24);\n    }\n  const dot = (x, y, r, g, b) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    (rgb[q] = r), (rgb[q + 1] = g), (rgb[q + 2] = b);\n  };\n  for (const v of vis) {\n    const ty = floor(v.top);\n    for (const x of [0, W - 1]) dot(x, ty, 0.55, 0.6, 0.7);\n    for (let e = -2; e \u003c= 2; e++) dot(0, floor(v.left) + e, 1, 1, 1), dot(W - 1, floor(v.right) + e, 1, 1, 1);\n    // Above and below: a small white cross where the curve meets the line.\n    for (const [cx, cy] of [[v.upX, v.top], [v.downX, v.top + WD]]) {\n      const x = floor(cx), y = floor(cy - (cy === v.top ? 0 : 1e-3));\n      dot(x, y, 1, 1, 1), dot(x - 1, y, 1, 1, 1), dot(x + 1, y, 1, 1, 1), dot(x, y - 1, 1, 1, 1), dot(x, y + 1, 1, 1, 1);\n    }\n  }\n  // The corner trace, kept in each slot's own square so it slides with it.\n  if (P.trace) {\n    const seen = new Set();\n    for (const v of vis) {\n      seen.add(v.j);\n      let t = traces.get(v.j);\n      if (!t) traces.set(v.j, (t = { xs: [], ys: [], last: null }));\n      const tr = v.shape.tr, m = tr.length, now = [];\n      for (let c = 0; c \u003c m; c++) {\n        // At a peak of the support function h' is 0, so the point is h times\n        // the unit vector there.\n        const a = tr[c] + v.phi;\n        support(v.shape, tr[c], P.round, sup);\n        const ca = cos(a), sa = sin(a);\n        now.push([sup[0] * ca - sup[1] * sa + v.ox, sup[0] * sa + sup[1] * ca + v.oy - v.top]);\n      }\n      if (t.xs.length \u003c 12000)\n        for (let c = 0; c \u003c m; c++) {\n          const [x1, y1] = now[c], [x0, y0] = t.last ? t.last[c] : now[c];\n          const steps = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.7));\n          for (let s = 1; s \u003c= steps; s++) t.xs.push(x0 + ((x1 - x0) * s) / steps), t.ys.push(y0 + ((y1 - y0) * s) / steps);\n        }\n      t.last = now;\n      for (let i = 0; i \u003c t.xs.length; i++) dot(floor(t.xs[i]), floor(t.ys[i] + v.top), 1, 0.78, 0.25);\n    }\n    for (const j of traces.keys()) if (!seen.has(j)) traces.delete(j);\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100."},{"name":"Round","min":0,"max":1,"about":"Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way."},{"name":"Spin","min":0,"max":1,"about":"How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that."}],"start":[0,2,0,0.06],"measures":{"motion":0.4094,"detail":0.0438,"edges":1,"complexity":0.0838,"coverage":0.7349,"colour":0.4286,"drift":0.2768},"knobResponse":[0.306,0.2393,0.1029,0.1377]},{"slug":"contour","title":"Contour Map","family":"data","round":2,"note":"천천히 솟고 가라앉는 땅의 지형도예요. 다섯째 등고선마다 밝고, 바닷물이 차오르면 선은 땅에 그대로 남은 채 물 밑으로 들어가요.","idea":"A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","layer":{"id":"layer-contour","type":"code","name":"contour","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink."},{"name":"Morph","min":0,"max":6,"about":"How fast the land rises and sinks; 0 holds the map still."},{"name":"Interval","min":50,"max":200,"about":"Metres between contour lines, from a dense survey at 50 to a few wide rings at 200."},{"name":"Sea level","min":-300,"max":600,"about":"Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water."}],"start":[0,2,50,0.06],"measures":{"motion":0.059,"detail":0.1124,"edges":0.4216,"complexity":2.7352,"coverage":1,"colour":0.2347,"drift":0.0329},"knobResponse":[0.3087,0.1314,0.1058,0.2222]},{"slug":"couette-shimmer","title":"Couette Shimmer","family":"cosmetic","round":38,"note":"두 원통 사이에 든 펄 세럼을 옆에서 봐요. 안쪽 원통이 빨라지면 옆으로 흐르던 결이 테일러 소용돌이의 밝고 어두운 띠로 128줄을 쌓고, 더 빨라지면 띠가 물결치며 원통을 돌아요. K3 은 띠를 다섯 쌍에서 열네 쌍으로 늘려 가는 골로 만들고, K4 는 바깥 원통을 거꾸로 돌려 띠를 나선으로 기울여요.","idea":"A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Couette Shimmer\n// Family:  cosmetic\n// Idea:    A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after shimmer serum stirred between two cylinders as rheoscopic fluid shows it (Paul Matisse's Kalliroscope), with the Taylor vortices of Taylor-Couette flow (G. I. Taylor, 1923)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive.\n// Knob 2: Spin. How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in.\n// Knob 3: Rolls. How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing.\n// Knob 4: Counter. How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986).\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, asin, exp, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The cylinder seen from the side: column x looks at angle TH[x] round it,\n// the front half from -1.29 to 1.29 radians, so a thing going round slows\n// and narrows toward the panel's edges. ARC is the distance round the\n// surface in LEDs, the cylinder 32 LEDs in radius.\nconst TH = new Float32Array(W), ARC = new Float32Array(W), SHADE = new Float32Array(W), SPEC = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const xn = (x + 0.5) / 32 - 1, th = asin(0.96 * xn);\n  TH[x] = th;\n  ARC[x] = th * 32;\n  // Light from the front and a little to the left: the serum dims toward\n  // the cylinder's edges, and a soft upright highlight sits left of centre.\n  SHADE[x] = 0.62 + 0.38 * cos(th + 0.2);\n  SPEC[x] = exp(-(((th + 0.42) / 0.32) ** 2));\n}\n\n// What the aligned mica reflects across one pair of rolls, phase 0 to 2 pi:\n// the outflow boundary at 0, where the serum leaves the inner cylinder and\n// spreads against the outer one; the inflow boundary at pi. In one roll\n// the serum at the outer wall runs up, in the next down, so the flakes there\n// lean one way and then the other and the light catches one roll and not\n// the next. A thin dark line marks the outflow, where the flakes stand on\n// edge, and a thin bright one the inflow.\nconst NR = 512, REFL = new Float32Array(NR);\nfor (let i = 0; i \u003c NR; i++) {\n  const ph = (i / NR) * TAU, s = sin(ph);\n  const d0 = min(ph, TAU - ph), dp = abs(ph - PI);\n  REFL[i] = cl(0.5 + 0.34 * (s >= 0 ? s ** 0.6 : -((-s) ** 0.6)) - 0.42 * exp(-((d0 / 0.3) ** 2)) + 0.3 * exp(-((dp / 0.22) ** 2)), 0, 1);\n}\nconst refl = (ph) => {\n  const u = (ph / TAU) % 1;\n  return REFL[((u \u003c 0 ? u + 1 : u) * NR) | 0];\n};\n\n// Streak texture: random values on a 64 by 128 grid, read stretched 6 times\n// sideways, so the flakes the flow has lined up show as long streaks.\nconst NU = 64, NV = 128;\n\nexport function setup(params) {\n  const noise = new Float32Array(NU * NV);\n  for (let i = 0; i \u003c noise.length; i++) noise[i] = random();\n  const rate = new Float32Array(H);\n  for (let y = 0; y \u003c H; y++) rate[y] = 0.85 + 0.3 * random();\n  const glints = [];\n  for (let i = 0; i \u003c 220; i++) glints.push({ a: random() * 2.6 - 1.3, y: random() * H, ph: random() * TAU, w: 0.6 + 0.8 * random() });\n  params.s = {\n    hue: 0, spin: 2, rolls: 5, counter: 0, warm: 0, t: 0, ang: 0, wave: 0, spiral: 0, su: 0, begun: false,\n    noise, rate, glints, glow: new Float32Array(N), CA: new Float32Array(W), CB: new Float32Array(W), RA: new Float32Array(H), RB: new Float32Array(H), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n}\n\nfunction nz(S, u, v) {\n  const n = S.noise, fu = floor(u), fv = floor(v), au = u - fu, av = v - fv;\n  const i0 = ((fu % NU) + NU) % NU, i1 = (i0 + 1) % NU, j0 = ((fv % NV) + NV) % NV, j1 = (j0 + 1) % NV;\n  const a = n[j0 * NU + i0] + (n[j0 * NU + i1] - n[j0 * NU + i0]) * au;\n  const b = n[j1 * NU + i0] + (n[j1 * NU + i1] - n[j1 * NU + i0]) * au;\n  return a + (b - a) * av;\n}\n\n// The regimes Spin walks through, as weights 0..1.\nfunction regimes(s) {\n  return {\n    // Taylor vortices from the critical speed 1, full by 1.25.\n    rolls: sqrt(sm(1, 1.25, s)),\n    // Waves on the rolls from 1.2, full by 1.8; quieter again toward 4.\n    waves: sqrt(sm(1.2, 1.8, s)) * (1 - 0.6 * sm(3, 4, s)),\n    // A second, slower wave that modulates the first, from 2.6.\n    modulate: sm(2.6, 3.4, s),\n    // Turbulence inside the rolls from 3.\n    turb: sm(3, 4, s),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.spin = cl(k[1], 0.5, 4);\n  S.rolls = cl(k[2], 5, 14);\n  S.counter = cl(k[3], 0, 1);\n  step(S, d);\n  if (!S.begun) {\n    // Open as if the serum had been turning a while.\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n}\n\nfunction step(S, d) {\n  const s = S.spin;\n  S.t += d;\n  // The streaks run round at 5 LEDs a second per unit of Spin; the inner\n  // cylinder turns at twice that, 0.31 radians a second per unit; the\n  // waves go round at 0.34 of the inner cylinder's rate, as Coles measured.\n  S.su += d * 5 * s;\n  S.ang += d * 0.3125 * s;\n  S.wave += d * 0.34 * 0.3125 * s;\n  S.spiral += d * 0.3125 * s * 0.5;\n  // Glints ride the flow: round with the streaks, and up or down the roll\n  // they are in toward its inflow boundary, where they dive and come back.\n  const R = regimes(s), kk = (TAU * S.rolls) / H;\n  for (const g of S.glints) {\n    g.a += (d * 5 * s) / 32;\n    if (g.a > 1.3) g.a -= 2.6;\n    const ph = kk * (g.y - 63.5);\n    g.y += d * R.rolls * 1.2 * s * sin(ph);\n    if (g.y \u003c 0) g.y += H;\n    if (g.y >= H) g.y -= H;\n    // At the inflow boundary the serum turns in toward the inner cylinder\n    // and the flake goes with it; another comes out somewhere else.\n    if (R.rolls > 0.3 && cos(ph) \u003c -0.93) {\n      g.y = random() * H;\n      g.a = random() * 2.6 - 1.3;\n    }\n    // Tumbling: a flake turns over faster in faster shear.\n    g.ph += d * g.w * (1.2 + 1.6 * s);\n  }\n}\n\nfunction palette(S) {\n  const h = S.hue + 0.74, hh = h - floor(h);\n  // From red through orange and yellow to lime a deep tone reads brown or\n  // olive on the panel, so there the rolls keep their brightness and differ\n  // by saturation instead: full from 0.03 to 0.23 round the wheel, none\n  // beyond 0.96 and 0.3.\n  const dw = abs(((hh - 0.13 + 1.5) % 1) - 0.5), warm = 1 - sm(0.1, 0.17, dw);\n  const c = S.col;\n  // Deep, body, pearl and the highlight that leans round the wheel.\n  hsv(h - 0.02 * warm, 0.82 + 0.06 * warm, 0.3 + 0.55 * warm, c[0]);\n  hsv(h + 0.01, 0.6 - 0.15 * warm, 0.72 + 0.26 * warm, c[1]);\n  hsv(h + 0.12, 0.26 - 0.08 * warm, 1, c[2]);\n  hsv(h - 0.1, 0.12, 1, c[3]);\n  S.warm = warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const R = regimes(S.spin), kk = (TAU * S.rolls) / H, lam = H / S.rolls;\n  // Counter-rotating outer cylinder: from 0.15 the rolls lean into a spiral\n  // that runs down the panel as it turns; from 0.6 a second spiral of the\n  // other hand, turning the same way and so running up, comes in across it.\n  const cr = S.counter, sp1 = 3 * sm(0.15, 0.6, cr), sp2 = sm(0.6, 1, cr);\n  const wv = R.waves * (1 - sm(0.15, 0.45, cr));\n  const m = 6, aw = 0.13 * lam * kk;\n  const c = S.col, glow = S.glow, { CA, CB, RA, RB } = S;\n  // The rolls are not all equally strong: two slow waves of strength, one\n  // drifting round with the serum, cross each other over the panel.\n  for (let x = 0; x \u003c W; x++) {\n    CA[x] = sin(0.09 * ARC[x] - 0.8 * S.ang);\n    CB[x] = cos(0.21 * ARC[x] + 0.5 * S.ang);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    RA[y] = cos(0.045 * y + 0.13 * S.t);\n    RB[y] = sin(0.083 * y - 0.21 * S.t);\n  }\n  glow.fill(0);\n  // Glints: a flake flashes as it turns face on to the light.\n  for (const g of S.glints) {\n    const cw = cos(g.ph);\n    if (cw \u003c 0.85) continue;\n    const xs = (sin(g.a) / 0.96 + 1) * 32 - 0.5, xi = round(xs), yi = round(g.y) % H;\n    if (xi \u003c 0 || xi >= W) continue;\n    const b = ((cw - 0.85) / 0.15) ** 2 * 1.3;\n    glow[yi * W + xi] += b;\n    if (xi > 0) glow[yi * W + xi - 1] += b * 0.3;\n    if (xi \u003c W - 1) glow[yi * W + xi + 1] += b * 0.3;\n    if (yi > 0) glow[(yi - 1) * W + xi] += b * 0.3;\n    if (yi \u003c H - 1) glow[(yi + 1) * W + xi] += b * 0.3;\n  }\n  // The streak texture flows along each roll toward its inflow boundary;\n  // two copies, three seconds apart, take turns so it never smears.\n  const TL = 3, t0 = S.t % TL, t1 = (S.t + TL / 2) % TL, w0 = 1 - abs((2 * t0) / TL - 1);\n  const vz = R.rolls * 1.2 * S.spin;\n  const turbU = 1 + 2 * R.turb;\n  for (let x = 0; x \u003c W; x++) {\n    const th = TH[x], arc = ARC[x];\n    // Axial displacement of the rolls here: the travelling wave, and in the\n    // modulated regime a slower second wave riding on it.\n    const wph = m * (th - S.wave);\n    const wave = aw * wv * sin(wph) * (1 + 0.5 * R.modulate * sin(2 * th - 0.4 * S.wave * m));\n    const spiral1 = sp1 * (th - S.spiral), spiral2 = 3 * sp2 * (th - S.spiral);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let ph = kk * (y - 63.5) + wave;\n      if (R.turb > 0) ph += R.turb * 1.4 * (nz(S, arc / 5 - S.su * 0.4, y * 0.35 + S.t * 0.7) - 0.5);\n      let rf = refl(ph + spiral1);\n      if (sp2 > 0) rf = rf * (1 - 0.5 * sp2) + refl(ph - spiral2) * 0.5 * sp2;\n      const rb = 0.5 + R.rolls * (rf - 0.5) * (1 + 0.16 * CA[x] * RA[y] + 0.1 * CB[x] * RB[y]);\n      // Streaks: the texture moved round with the serum and along the roll.\n      const az = sin(ph + spiral1) * vz, su = S.su * S.rate[y];\n      const a0 = nz(S, ((arc - su) / 10) * turbU, (y - az * t0) * 0.75), a1 = nz(S, ((arc - su) / 10) * turbU + 17, (y - az * t1) * 0.75);\n      const tex = a0 * w0 + a1 * (1 - w0) - 0.5;\n      const sh = SHADE[x], spc = SPEC[x];\n      // Light: the serum's body by the cylinder's shading and the rolls,\n      // the streaks over it, the highlight strongest on the rolls that\n      // catch the light, and the glints.\n      const L = sh * (0.18 + 0.72 * rb) + (0.4 - 0.1 * R.rolls) * tex * sh;\n      const hi = spc * (0.15 + 0.85 * rb * rb) * 0.75 + glow[p];\n      // Deep to body to pearl by L; the highlight toward white.\n      let r, g, b;\n      if (L \u003c 0.5) {\n        const f = cl(L / 0.5, 0, 1);\n        r = c[0][0] + (c[1][0] - c[0][0]) * f;\n        g = c[0][1] + (c[1][1] - c[0][1]) * f;\n        b = c[0][2] + (c[1][2] - c[0][2]) * f;\n      } else {\n        const f = cl((L - 0.5) / 0.45, 0, 1);\n        r = c[1][0] + (c[2][0] - c[1][0]) * f;\n        g = c[1][1] + (c[2][1] - c[1][1]) * f;\n        b = c[1][2] + (c[2][2] - c[1][2]) * f;\n      }\n      const lo = 1 - (1 - cl(L / 0.2, 0, 1)) * (1 - 0.7 * S.warm), hm = min(1, hi);\n      r *= lo;\n      g *= lo;\n      b *= lo;\n      r += (c[3][0] - r) * hm;\n      g += (c[3][1] - g) * hm;\n      b += (c[3][2] - b) * hm;\n      display.setPixel(x, y, round(255 * cl(r, 0, 1)), round(255 * cl(g, 0, 1)), round(255 * cl(b, 0, 1)));\n    }\n  }\n}\n","layer":{"id":"layer-couette-shimmer","type":"code","name":"couette-shimmer","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Couette Shimmer\n// Family:  cosmetic\n// Idea:    A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after shimmer serum stirred between two cylinders as rheoscopic fluid shows it (Paul Matisse's Kalliroscope), with the Taylor vortices of Taylor-Couette flow (G. I. Taylor, 1923)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive.\n// Knob 2: Spin. How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in.\n// Knob 3: Rolls. How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing.\n// Knob 4: Counter. How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986).\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, asin, exp, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The cylinder seen from the side: column x looks at angle TH[x] round it,\n// the front half from -1.29 to 1.29 radians, so a thing going round slows\n// and narrows toward the panel's edges. ARC is the distance round the\n// surface in LEDs, the cylinder 32 LEDs in radius.\nconst TH = new Float32Array(W), ARC = new Float32Array(W), SHADE = new Float32Array(W), SPEC = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const xn = (x + 0.5) / 32 - 1, th = asin(0.96 * xn);\n  TH[x] = th;\n  ARC[x] = th * 32;\n  // Light from the front and a little to the left: the serum dims toward\n  // the cylinder's edges, and a soft upright highlight sits left of centre.\n  SHADE[x] = 0.62 + 0.38 * cos(th + 0.2);\n  SPEC[x] = exp(-(((th + 0.42) / 0.32) ** 2));\n}\n\n// What the aligned mica reflects across one pair of rolls, phase 0 to 2 pi:\n// the outflow boundary at 0, where the serum leaves the inner cylinder and\n// spreads against the outer one; the inflow boundary at pi. In one roll\n// the serum at the outer wall runs up, in the next down, so the flakes there\n// lean one way and then the other and the light catches one roll and not\n// the next. A thin dark line marks the outflow, where the flakes stand on\n// edge, and a thin bright one the inflow.\nconst NR = 512, REFL = new Float32Array(NR);\nfor (let i = 0; i \u003c NR; i++) {\n  const ph = (i / NR) * TAU, s = sin(ph);\n  const d0 = min(ph, TAU - ph), dp = abs(ph - PI);\n  REFL[i] = cl(0.5 + 0.34 * (s >= 0 ? s ** 0.6 : -((-s) ** 0.6)) - 0.42 * exp(-((d0 / 0.3) ** 2)) + 0.3 * exp(-((dp / 0.22) ** 2)), 0, 1);\n}\nconst refl = (ph) => {\n  const u = (ph / TAU) % 1;\n  return REFL[((u \u003c 0 ? u + 1 : u) * NR) | 0];\n};\n\n// Streak texture: random values on a 64 by 128 grid, read stretched 6 times\n// sideways, so the flakes the flow has lined up show as long streaks.\nconst NU = 64, NV = 128;\n\nexport function setup(params) {\n  const noise = new Float32Array(NU * NV);\n  for (let i = 0; i \u003c noise.length; i++) noise[i] = random();\n  const rate = new Float32Array(H);\n  for (let y = 0; y \u003c H; y++) rate[y] = 0.85 + 0.3 * random();\n  const glints = [];\n  for (let i = 0; i \u003c 220; i++) glints.push({ a: random() * 2.6 - 1.3, y: random() * H, ph: random() * TAU, w: 0.6 + 0.8 * random() });\n  params.s = {\n    hue: 0, spin: 2, rolls: 5, counter: 0, warm: 0, t: 0, ang: 0, wave: 0, spiral: 0, su: 0, begun: false,\n    noise, rate, glints, glow: new Float32Array(N), CA: new Float32Array(W), CB: new Float32Array(W), RA: new Float32Array(H), RB: new Float32Array(H), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n}\n\nfunction nz(S, u, v) {\n  const n = S.noise, fu = floor(u), fv = floor(v), au = u - fu, av = v - fv;\n  const i0 = ((fu % NU) + NU) % NU, i1 = (i0 + 1) % NU, j0 = ((fv % NV) + NV) % NV, j1 = (j0 + 1) % NV;\n  const a = n[j0 * NU + i0] + (n[j0 * NU + i1] - n[j0 * NU + i0]) * au;\n  const b = n[j1 * NU + i0] + (n[j1 * NU + i1] - n[j1 * NU + i0]) * au;\n  return a + (b - a) * av;\n}\n\n// The regimes Spin walks through, as weights 0..1.\nfunction regimes(s) {\n  return {\n    // Taylor vortices from the critical speed 1, full by 1.25.\n    rolls: sqrt(sm(1, 1.25, s)),\n    // Waves on the rolls from 1.2, full by 1.8; quieter again toward 4.\n    waves: sqrt(sm(1.2, 1.8, s)) * (1 - 0.6 * sm(3, 4, s)),\n    // A second, slower wave that modulates the first, from 2.6.\n    modulate: sm(2.6, 3.4, s),\n    // Turbulence inside the rolls from 3.\n    turb: sm(3, 4, s),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.spin = cl(k[1], 0.5, 4);\n  S.rolls = cl(k[2], 5, 14);\n  S.counter = cl(k[3], 0, 1);\n  step(S, d);\n  if (!S.begun) {\n    // Open as if the serum had been turning a while.\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n}\n\nfunction step(S, d) {\n  const s = S.spin;\n  S.t += d;\n  // The streaks run round at 5 LEDs a second per unit of Spin; the inner\n  // cylinder turns at twice that, 0.31 radians a second per unit; the\n  // waves go round at 0.34 of the inner cylinder's rate, as Coles measured.\n  S.su += d * 5 * s;\n  S.ang += d * 0.3125 * s;\n  S.wave += d * 0.34 * 0.3125 * s;\n  S.spiral += d * 0.3125 * s * 0.5;\n  // Glints ride the flow: round with the streaks, and up or down the roll\n  // they are in toward its inflow boundary, where they dive and come back.\n  const R = regimes(s), kk = (TAU * S.rolls) / H;\n  for (const g of S.glints) {\n    g.a += (d * 5 * s) / 32;\n    if (g.a > 1.3) g.a -= 2.6;\n    const ph = kk * (g.y - 63.5);\n    g.y += d * R.rolls * 1.2 * s * sin(ph);\n    if (g.y \u003c 0) g.y += H;\n    if (g.y >= H) g.y -= H;\n    // At the inflow boundary the serum turns in toward the inner cylinder\n    // and the flake goes with it; another comes out somewhere else.\n    if (R.rolls > 0.3 && cos(ph) \u003c -0.93) {\n      g.y = random() * H;\n      g.a = random() * 2.6 - 1.3;\n    }\n    // Tumbling: a flake turns over faster in faster shear.\n    g.ph += d * g.w * (1.2 + 1.6 * s);\n  }\n}\n\nfunction palette(S) {\n  const h = S.hue + 0.74, hh = h - floor(h);\n  // From red through orange and yellow to lime a deep tone reads brown or\n  // olive on the panel, so there the rolls keep their brightness and differ\n  // by saturation instead: full from 0.03 to 0.23 round the wheel, none\n  // beyond 0.96 and 0.3.\n  const dw = abs(((hh - 0.13 + 1.5) % 1) - 0.5), warm = 1 - sm(0.1, 0.17, dw);\n  const c = S.col;\n  // Deep, body, pearl and the highlight that leans round the wheel.\n  hsv(h - 0.02 * warm, 0.82 + 0.06 * warm, 0.3 + 0.55 * warm, c[0]);\n  hsv(h + 0.01, 0.6 - 0.15 * warm, 0.72 + 0.26 * warm, c[1]);\n  hsv(h + 0.12, 0.26 - 0.08 * warm, 1, c[2]);\n  hsv(h - 0.1, 0.12, 1, c[3]);\n  S.warm = warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const R = regimes(S.spin), kk = (TAU * S.rolls) / H, lam = H / S.rolls;\n  // Counter-rotating outer cylinder: from 0.15 the rolls lean into a spiral\n  // that runs down the panel as it turns; from 0.6 a second spiral of the\n  // other hand, turning the same way and so running up, comes in across it.\n  const cr = S.counter, sp1 = 3 * sm(0.15, 0.6, cr), sp2 = sm(0.6, 1, cr);\n  const wv = R.waves * (1 - sm(0.15, 0.45, cr));\n  const m = 6, aw = 0.13 * lam * kk;\n  const c = S.col, glow = S.glow, { CA, CB, RA, RB } = S;\n  // The rolls are not all equally strong: two slow waves of strength, one\n  // drifting round with the serum, cross each other over the panel.\n  for (let x = 0; x \u003c W; x++) {\n    CA[x] = sin(0.09 * ARC[x] - 0.8 * S.ang);\n    CB[x] = cos(0.21 * ARC[x] + 0.5 * S.ang);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    RA[y] = cos(0.045 * y + 0.13 * S.t);\n    RB[y] = sin(0.083 * y - 0.21 * S.t);\n  }\n  glow.fill(0);\n  // Glints: a flake flashes as it turns face on to the light.\n  for (const g of S.glints) {\n    const cw = cos(g.ph);\n    if (cw \u003c 0.85) continue;\n    const xs = (sin(g.a) / 0.96 + 1) * 32 - 0.5, xi = round(xs), yi = round(g.y) % H;\n    if (xi \u003c 0 || xi >= W) continue;\n    const b = ((cw - 0.85) / 0.15) ** 2 * 1.3;\n    glow[yi * W + xi] += b;\n    if (xi > 0) glow[yi * W + xi - 1] += b * 0.3;\n    if (xi \u003c W - 1) glow[yi * W + xi + 1] += b * 0.3;\n    if (yi > 0) glow[(yi - 1) * W + xi] += b * 0.3;\n    if (yi \u003c H - 1) glow[(yi + 1) * W + xi] += b * 0.3;\n  }\n  // The streak texture flows along each roll toward its inflow boundary;\n  // two copies, three seconds apart, take turns so it never smears.\n  const TL = 3, t0 = S.t % TL, t1 = (S.t + TL / 2) % TL, w0 = 1 - abs((2 * t0) / TL - 1);\n  const vz = R.rolls * 1.2 * S.spin;\n  const turbU = 1 + 2 * R.turb;\n  for (let x = 0; x \u003c W; x++) {\n    const th = TH[x], arc = ARC[x];\n    // Axial displacement of the rolls here: the travelling wave, and in the\n    // modulated regime a slower second wave riding on it.\n    const wph = m * (th - S.wave);\n    const wave = aw * wv * sin(wph) * (1 + 0.5 * R.modulate * sin(2 * th - 0.4 * S.wave * m));\n    const spiral1 = sp1 * (th - S.spiral), spiral2 = 3 * sp2 * (th - S.spiral);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let ph = kk * (y - 63.5) + wave;\n      if (R.turb > 0) ph += R.turb * 1.4 * (nz(S, arc / 5 - S.su * 0.4, y * 0.35 + S.t * 0.7) - 0.5);\n      let rf = refl(ph + spiral1);\n      if (sp2 > 0) rf = rf * (1 - 0.5 * sp2) + refl(ph - spiral2) * 0.5 * sp2;\n      const rb = 0.5 + R.rolls * (rf - 0.5) * (1 + 0.16 * CA[x] * RA[y] + 0.1 * CB[x] * RB[y]);\n      // Streaks: the texture moved round with the serum and along the roll.\n      const az = sin(ph + spiral1) * vz, su = S.su * S.rate[y];\n      const a0 = nz(S, ((arc - su) / 10) * turbU, (y - az * t0) * 0.75), a1 = nz(S, ((arc - su) / 10) * turbU + 17, (y - az * t1) * 0.75);\n      const tex = a0 * w0 + a1 * (1 - w0) - 0.5;\n      const sh = SHADE[x], spc = SPEC[x];\n      // Light: the serum's body by the cylinder's shading and the rolls,\n      // the streaks over it, the highlight strongest on the rolls that\n      // catch the light, and the glints.\n      const L = sh * (0.18 + 0.72 * rb) + (0.4 - 0.1 * R.rolls) * tex * sh;\n      const hi = spc * (0.15 + 0.85 * rb * rb) * 0.75 + glow[p];\n      // Deep to body to pearl by L; the highlight toward white.\n      let r, g, b;\n      if (L \u003c 0.5) {\n        const f = cl(L / 0.5, 0, 1);\n        r = c[0][0] + (c[1][0] - c[0][0]) * f;\n        g = c[0][1] + (c[1][1] - c[0][1]) * f;\n        b = c[0][2] + (c[1][2] - c[0][2]) * f;\n      } else {\n        const f = cl((L - 0.5) / 0.45, 0, 1);\n        r = c[1][0] + (c[2][0] - c[1][0]) * f;\n        g = c[1][1] + (c[2][1] - c[1][1]) * f;\n        b = c[1][2] + (c[2][2] - c[1][2]) * f;\n      }\n      const lo = 1 - (1 - cl(L / 0.2, 0, 1)) * (1 - 0.7 * S.warm), hm = min(1, hi);\n      r *= lo;\n      g *= lo;\n      b *= lo;\n      r += (c[3][0] - r) * hm;\n      g += (c[3][1] - g) * hm;\n      b += (c[3][2] - b) * hm;\n      display.setPixel(x, y, round(255 * cl(r, 0, 1)), round(255 * cl(g, 0, 1)), round(255 * cl(b, 0, 1)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive."},{"name":"Spin","min":0.5,"max":4,"about":"How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in."},{"name":"Rolls","min":5,"max":14,"about":"How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing."},{"name":"Counter","min":0,"max":1,"about":"How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986)."}],"start":[0,2,5,0.06],"measures":{"motion":0.2097,"detail":0.0404,"edges":0.1149,"complexity":2.5766,"coverage":0.9999,"colour":0.1504,"drift":0.059},"knobResponse":[0.3171,0.1536,0.1747,0.1924]},{"slug":"crackle-polish","title":"Crackle Polish","family":"cosmetic","round":39,"note":"형광 분홍 바탕 위의 검은 크래클 탑코트가 마르며 갈라져요. 긴 금이 먼저 패널을 가로지르고, 짧은 금이 옛 금에서 직각으로 나와 다른 금에 직각으로 닿고, 틈이 벌어지며 조각이 광택 테를 두른 구슬이 돼요. 다 갈라지면 새 코트를 위에서 칠해 내려와요.","idea":"A glossy colour fills the panel, a dark top coat is brushed over it from the top down, and as the coat dries it splits, first in long cracks across the panel and then in shorter and shorter cracks that each start on an older one at a right angle, while the gaps widen and the islands of coat shrink into rounded beads with a gloss on their edges and the colour glowing up through the network, until a fresh coat goes on.","buttons":"K1 tap brushes a fresh coat on now.","code":"// ===== Patternflow pattern =====\n// Title:   Crackle Polish\n// Family:  cosmetic\n// Idea:    A glossy colour fills the panel, a dark top coat is brushed over it from the top down, and as the coat dries it splits, first in long cracks across the panel and then in shorter and shorter cracks that each start on an older one at a right angle, while the gaps widen and the islands of coat shrink into rounded beads with a gloss on their edges and the colour glowing up through the network, until a fresh coat goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after crackle nail polish, a top coat that shrinks as it dries, and the hierarchical crack patterns that form by successive division of domains (Steffen Bohn, Ludovic Pauchard and Yves Couder, 2005)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Craze=0..1, Coat=0..1\n//\n// Knob 1: Hue. Turns the base colour round the whole wheel: at 0 hot pink, 0.1 red, 0.15 orange, 0.22 yellow, 0.3 lime, 0.4 green, 0.55 aqua, 0.65 azure, 0.75 blue, 0.85 violet, 0.95 magenta. Orange and yellow bases are paled a little, lit to full and shaded less beside the islands, so no gap turns brown.\n// Knob 2: Speed. At 2 the coat goes on in 1.2 s, the first crack opens 0.6 s later and runs across the panel in about a second, the last starts about 4.5 s after the first, and when the gaps have finished widening the crackle holds until a new coat goes on, about 11 s after the last. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Craze. How far the coat keeps splitting. At 0 a domain stops splitting once it is under about 20 LEDs long, which leaves about 50 islands, most of them 9 to 18 LEDs across; at 1 under about 11, about 155 islands of 5 to 10, and the gaps open half as wide.\n// Knob 4: Coat. The colour of the top coat: black lacquer at 0, a deep jewel tone opposite the base on the wheel at 0.5, a pale pearl at 1. On the dark coats the gloss is a white rim on the edges facing the light; on the pearl the edges turned away fall into a cool grey-lilac shade, as a pearl pigment shifts with the angle.\n// Buttons: K1 tap brushes a fresh coat on now.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n// The cycle, in seconds at Speed 2: the brush crosses the panel in LAY, the\n// first crack opens at T1 and the last near T2, and a new coat comes HOLD\n// after the last. The run opens at START, with the first crack running.\nconst LAY = 1.2, T1 = 1.8, T2 = 6, HOLD = 5, START = 2.4;\n// Crack tips run at VTIP LEDs a second; a gap opens with time constant TAU.\nconst VTIP = 70, TAU = 1.3;\n// Towards the light, x right and y down: up and to the left.\nconst LX = -0.6, LY = -0.8;\n// Opening hue: hot pink.\nconst H0 = 0.93;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The domains are worked out on a grid of half-LED cells: each cell holds\n// the domain it belongs to, or -1 on a crack.\nconst FW = 2 * W, FH = 2 * H;\n// A crack tip moves STEP LEDs at a time, and within BEND LEDs of an older\n// crack it turns to meet it square.\nconst STEP = 0.25, BEND = 3;\n// Gap pixels are listed out to REACH LEDs from a crack's line.\nconst REACH = 7;\n\n// The whole crackle of one coat, worked out when it goes on. The panel is\n// one domain. A domain splits across its long axis: a crack starts on its\n// rim, square to the older crack it leaves, runs across, and turns to meet\n// the crack on the far side square. Each half splits the same way until it\n// is too short; bigger domains crack sooner.\nfunction crackle(craze) {\n  const stop = 20 - 9 * craze, span = log((W * H) / (0.45 * stop * stop));\n  const lab = new Int32Array(FW * FH), cracks = [];\n  const wall = (x, y) => {\n    const i = floor(2 * x), j = floor(2 * y);\n    return i \u003c 0 || j \u003c 0 || i >= FW || j >= FH || lab[j * FW + i] \u003c 0;\n  };\n  let ids = 1;\n  const todo = [{ id: 0, b: [0, 0, FW - 1, FH - 1], ready: 0 }];\n  while (todo.length) {\n    const d = todo.pop(), [i0, j0, i1, j1] = d.b;\n    let n = 0, sx = 0, sy = 0, sxx = 0, syy = 0, sxy = 0;\n    const nb = [FW, FH, 0, 0];\n    for (let j = j0; j \u003c= j1; j++)\n      for (let i = i0; i \u003c= i1; i++)\n        if (lab[j * FW + i] === d.id) {\n          const x = (i + 0.5) / 2, y = (j + 0.5) / 2;\n          n++;\n          sx += x;\n          sy += y;\n          sxx += x * x;\n          syy += y * y;\n          sxy += x * y;\n          nb[0] = min(nb[0], i);\n          nb[1] = min(nb[1], j);\n          nb[2] = max(nb[2], i);\n          nb[3] = max(nb[3], j);\n        }\n    if (n \u003c 8) continue;\n    const mx = sx / n, my = sy / n, vxx = sxx / n - mx * mx, vyy = syy / n - my * my, vxy = sxy / n - mx * my;\n    const ang = 0.5 * Math.atan2(2 * vxy, vxx - vyy);\n    // A bar of length L has variance L^2 / 12 along its axis.\n    const long = sqrt(12 * (vxx * cos(ang) ** 2 + 2 * vxy * cos(ang) * sin(ang) + vyy * sin(ang) ** 2));\n    // The cut is turned up to 20 degrees off square; its ends bend square anyway.\n    const tu = ang + (random() - 0.5) * 0.7, ux = cos(tu), uy = sin(tu);\n    if (long \u003c stop * (0.85 + 0.3 * random())) continue;\n    // Where the cut line, across the long axis near the middle, meets the rim.\n    const off = (random() - 0.5) * 0.36 * long, cx = mx + ux * off, cy = my + uy * off;\n    if (wall(cx, cy)) continue;\n    const ends = [-1, 1].map((sg) => {\n      let x = cx, y = cy;\n      while (!wall(x - sg * uy * STEP, y + sg * ux * STEP)) {\n        x -= sg * uy * STEP;\n        y += sg * ux * STEP;\n      }\n      return [x, y, sg];\n    });\n    const [sx0, sy0, sg] = ends[random() \u003c 0.5 ? 0 : 1];\n    // Heading: across, toward the other end; it starts square off its rim.\n    const hx = sg * uy, hy = -sg * ux;\n    let x = sx0, y = sy0, dx = hx, dy = hy, run = 0, ok = false;\n    const pts = [[x, y]], cells = [];\n    for (let k = 0; k \u003c (4 * long) / STEP; k++) {\n      // The nearest older crack (or the panel's edge) within BEND, and the\n      // way square off it, from all its cells nearby.\n      let best = BEND * BEND, gx = 0, gy = 0;\n      const ci = floor(2 * x), cj = floor(2 * y), r = 2 * BEND;\n      for (let j = cj - r; j \u003c= cj + r; j++)\n        for (let i = ci - r; i \u003c= ci + r; i++) {\n          if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] >= 0) continue;\n          const ex = x - (cl(i, -1, FW) + 0.5) / 2, ey = y - (cl(j, -1, FH) + 0.5) / 2, e2 = ex * ex + ey * ey;\n          best = min(best, e2);\n          if (e2 \u003c 4) {\n            const wt = exp(-e2);\n            gx += ex * wt;\n            gy += ey * wt;\n          }\n        }\n      const dist = sqrt(best), gl = sqrt(gx * gx + gy * gy);\n      let calm = 1;\n      if (best \u003c BEND * BEND && gl > 0) {\n        gx /= gl;\n        gy /= gl;\n        // Leaving its own rim: square off it. Coming up on another: turn square into it.\n        const into = run \u003c 1.2 ? -0.5 : dx * gx + dy * gy \u003c 0 ? 0.6 * (1 - dist / BEND) : 0;\n        if (into) {\n          dx -= into * gx;\n          dy -= into * gy;\n          calm = dist / BEND;\n        }\n      }\n      const tw = (random() - 0.5) * 0.22 * calm;\n      dx += 0.05 * hx * calm - tw * dy;\n      dy += 0.05 * hy * calm + tw * dx;\n      const dl = sqrt(dx * dx + dy * dy);\n      dx /= dl;\n      dy /= dl;\n      x += dx * STEP;\n      y += dy * STEP;\n      run += STEP;\n      const ci2 = floor(2 * x), cj2 = floor(2 * y), last = cells[cells.length - 1];\n      // Cells of the crack, joined edge to edge so nothing leaks past it.\n      if (last && last[0] !== ci2 && last[1] !== cj2) cells.push([ci2, last[1]]);\n      if (!last || last[0] !== ci2 || last[1] !== cj2) cells.push([ci2, cj2]);\n      if (wall(x, y)) {\n        pts.push([x, y]);\n        ok = run > 2;\n        break;\n      }\n      if (k % 4 === 3) pts.push([x, y]);\n    }\n    if (!ok) continue;\n    for (const [i, j] of cells) if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] === d.id) lab[j * FW + i] = -1;\n    // Fill one side with a new domain.\n    const m = pts[pts.length >> 1], q = pts[(pts.length >> 1) + 1] || pts[pts.length - 1];\n    const tx = q[0] - m[0], ty = q[1] - m[1], tl = Math.hypot(tx, ty) || 1;\n    const si = floor(2 * (m[0] - (ty / tl) * 0.8)), sj = floor(2 * (m[1] + (tx / tl) * 0.8));\n    if (si \u003c 0 || sj \u003c 0 || si >= FW || sj >= FH || lab[sj * FW + si] !== d.id) continue;\n    const nid = ids++, stack = [sj * FW + si];\n    lab[sj * FW + si] = nid;\n    while (stack.length) {\n      const c = stack.pop(), i = c % FW, j = (c - i) / FW;\n      for (const e of [i > 0 ? c - 1 : -1, i \u003c FW - 1 ? c + 1 : -1, j > 0 ? c - FW : -1, j \u003c FH - 1 ? c + FW : -1])\n        if (e >= 0 && lab[e] === d.id) {\n          lab[e] = nid;\n          stack.push(e);\n        }\n    }\n    let len = 0;\n    for (let k = 1; k \u003c pts.length; k++) len += Math.hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n    const age = cl(log((W * H) / (n / 4)) / span, 0, 1), t = max(d.ready + 0.06, T1 + (T2 - T1) * age);\n    // Final half-width: the first cracks open widest.\n    cracks.push({ pts, len, t, w: 1.5 - 0.85 * age });\n    const ready = t + len / VTIP;\n    todo.push({ id: d.id, b: nb, ready }, { id: nid, b: nb, ready });\n  }\n  return gapLists(cracks);\n}\n\n// For each crack, every pixel within REACH of its line: how far from it,\n// and how far along the crack the nearest point lies.\nfunction gapLists(cracks) {\n  const dist = new Float32Array(N), along = new Float32Array(N), seen = new Int32Array(N).fill(-1);\n  cracks.forEach((c, ci) => {\n    const idx = [];\n    let u0 = 0;\n    for (let k = 1; k \u003c c.pts.length; k++) {\n      const [ax, ay] = c.pts[k - 1], [bx, by] = c.pts[k], ex = bx - ax, ey = by - ay, el = sqrt(ex * ex + ey * ey) || 1e-6;\n      for (let y = max(0, floor(min(ay, by) - REACH)); y \u003c= min(H - 1, floor(max(ay, by) + REACH)); y++)\n        for (let x = max(0, floor(min(ax, bx) - REACH)); x \u003c= min(W - 1, floor(max(ax, bx) + REACH)); x++) {\n          const px = x + 0.5 - ax, py = y + 0.5 - ay, f = cl((px * ex + py * ey) / (el * el), 0, 1);\n          const qx = px - f * ex, qy = py - f * ey, dd = sqrt(qx * qx + qy * qy), p = y * W + x;\n          if (dd > REACH) continue;\n          if (seen[p] !== ci) {\n            seen[p] = ci;\n            idx.push(p);\n            dist[p] = 1e9;\n          }\n          if (dd \u003c dist[p]) {\n            dist[p] = dd;\n            along[p] = u0 + f * el;\n          }\n        }\n      u0 += el;\n    }\n    c.idx = Int32Array.from(idx);\n    c.d = Float32Array.from(idx, (p) => dist[p]);\n    c.u = Float32Array.from(idx, (p) => along[p]);\n    c.pts = null;\n  });\n  return cracks;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, craze: 0, coat: 0.06, begun: false, t: START, end: 0, cracks: [], old: null, brush: new Float32Array(W),\n    G: new Float32Array(N),\n    base: [0, 0, 0], ink: [0, 0, 0], a: [0, 0, 0], b: [0, 0, 0], cool: [0, 0, 0],\n  };\n}\n\nfunction newCoat(S, t0) {\n  S.old = S.cracks;\n  // The brush's bristles: a mark per column, softened.\n  let m = random();\n  for (let x = 0; x \u003c W; x++) S.brush[x] = 0.07 * (m = 0.55 * m + 0.45 * random());\n  S.cracks = crackle(S.craze);\n  let last = 0;\n  for (const c of S.cracks) last = max(last, c.t);\n  S.end = last + HOLD;\n  S.t = t0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.craze = cl(k[2], 0, 1);\n  S.coat = cl(k[3], 0, 1);\n  if (!S.begun) {\n    newCoat(S, START);\n    S.old = null;\n    S.begun = true;\n  }\n  S.t += (cl(dt || 0, 0, 0.1) * S.speed) / 2;\n  if (S.t > S.end || (input.btnPressed && input.btnPressed[0])) newCoat(S, 0);\n}\n\n// Polynomial smooth minimum: where two gaps come within k of each other\n// they merge in a fillet, which rounds the island's corner between them.\nfunction smin(a, b, k) {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n}\n\n// G: signed distance to the open gaps, in LEDs, positive on the coat. Each\n// crack is a gap round its line as far as its tip, its half-width growing\n// from a hairline as it opens, and the corners it makes with older cracks\n// rounding as the coat dries.\nfunction field(S, list, t) {\n  const G = S.G;\n  G.fill(9);\n  const narrow = 1 - 0.5 * S.craze;\n  for (const c of list) {\n    const age = t - c.t;\n    if (age \u003c= 0) continue;\n    const reach = min(c.len, age * VTIP), open = 1 - exp(-age / TAU), run = reach \u003c c.len;\n    const hw = 0.42 + (c.w * narrow - 0.42) * open, k = (0.5 + 2.3 * open) * narrow, { idx, d, u } = c;\n    for (let e = 0; e \u003c idx.length; e++) {\n      const over = u[e] - reach;\n      if (over > REACH) continue;\n      const dd = over > 0 ? sqrt(d[e] * d[e] + over * over) : d[e];\n      // A running tip is sharp.\n      const tip = run ? min(1, 0.35 + max(0, -over) / 5) : 1;\n      G[idx[e]] = smin(G[idx[e]], dd - hw * tip, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const t = S.t, h = S.hue + H0, hh = h - floor(h), cz = S.coat;\n  // While the brush is on its way down, the old crackle shows below it.\n  const laying = t \u003c LAY && S.old, front = -6 + ((H + 12) * t) / LAY;\n  field(S, laying ? S.old : S.cracks, laying ? 1e9 : t);\n  const G = S.G, { base, ink, a, b } = S;\n  // Orange and yellow bases go brown at the dim edge of a gap: paled a\n  // little and lit to full.\n  const warm = cl(1.5 - abs(hh - 0.13) / 0.07, 0, 1);\n  hsv(h, 0.82 - 0.2 * warm, 0.9 + 0.1 * warm, base);\n  // The coat: black lacquer, a jewel tone opposite the base, pearl.\n  const hc = h + 0.5, wc = cl(1.5 - abs(hc - floor(hc) - 0.13) / 0.07, 0, 1);\n  if (cz \u003c 0.5) {\n    hsv(hc, 0.5, 0.05, a);\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, b);\n  } else {\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, a);\n    hsv(h + 0.04, 0.12, 0.9, b);\n  }\n  const f = sm(0, 1, cz \u003c 0.5 ? cz * 2 : cz * 2 - 1);\n  for (let c = 0; c \u003c 3; c++) ink[c] = a[c] + (b[c] - a[c]) * f;\n  const pearl = sm(0.5, 1, cz), dark = 1 - sm(0, 0.6, cz), cool = S.cool;\n  hsv(h + 0.55, 0.28, 0.72, cool);\n  // A strip light reflected in the gloss, sliding down the panel once a\n  // coat, starting as the brush leaves it.\n  const sheen = (((t - LAY) * 24 + 280) % 280) - 5;\n  // The fresh coat is wet: a stronger reflection, brush marks running down\n  // it and the base colour faintly through it, all gone a second after it is on.\n  const dry = laying ? 0 : exp(-(t - LAY) / 0.9);\n  // Above the brush's front the coat is fresh and whole.\n  const at = (x, y) => {\n    const v = G[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)];\n    return laying ? max(v, (front - y) * 3) : v;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = at(x, y);\n      const gx = min(at(x + 1, y), 3) - min(at(x - 1, y), 3), gy = min(at(x, y + 1), 3) - min(at(x, y - 1), 3);\n      const gl = sqrt(gx * gx + gy * gy) + 1e-6, face = -(gx * LX + gy * LY) / gl;\n      const band = exp(-(((x * 0.5 + y - sheen) / 13) ** 2));\n      // The base through the gaps, in the shade of the island on its lit side.\n      const shade = 1 - (0.45 - 0.3 * warm) * sm(-0.5, 0.8, at(x - 1, y - 2));\n      const bl = 0.3 * band;\n      let r = (base[0] + (1 - base[0]) * bl) * shade, g = (base[1] + (1 - base[1]) * bl) * shade, bb = (base[2] + (1 - base[2]) * bl) * shade;\n      // The island: how far inside its edge, as the height of a bead. Its\n      // cover falls off as a square root at the edge, so the base glows up\n      // through a hairline crack near full instead of as a dim line.\n      const cov = 1 - (1 - sm(-0.55, 0.55, v)) ** 0.5, hgt = cl(v / 2.5, 0, 1);\n      if (cov > 0) {\n        const edge = 1 - sm(0.15, 0.75, hgt), lit = max(0, face) * edge, away = max(0, -face) * edge;\n        // Dark coats: a white gloss on the lit rim and the strip light on\n        // the top.\n        const wet = laying ? 1 - sm(front - 2, front, y) : dry;\n        const brush = wet * S.brush[x] * (0.8 + 0.2 * sin(y * 0.09 + x));\n        const gloss = (dark * 0.75 + 0.35 * (1 - dark)) * lit * lit + (0.12 + 0.18 * dark + 0.3 * wet) * band * sm(0.3, 0.9, hgt) + brush;\n        const tint = 0.14 * wet * dark;\n        // Pearl shifts toward a cool interference tint on the rim turned away.\n        const dim = 1 - 0.3 * pearl * away - 0.08 * pearl * (1 - hgt), sh = 0.6 * pearl * away;\n        const ir = (ink[0] + (cool[0] - ink[0]) * sh) * dim + (1 - ink[0]) * gloss + base[0] * tint;\n        const ig = (ink[1] + (cool[1] - ink[1]) * sh) * dim + (1 - ink[1]) * gloss + base[1] * tint;\n        const ib = (ink[2] + (cool[2] - ink[2]) * sh) * dim + (1 - ink[2]) * gloss + base[2] * tint;\n        r += (ir - r) * cov;\n        g += (ig - g) * cov;\n        bb += (ib - bb) * cov;\n      }\n      if (laying) {\n        // The wet bead along the brush's edge.\n        const bead = 0.55 * exp(-(((y - front - 0.6 * sin(x * 0.4 + t * 3)) / 1.1) ** 2));\n        r += (1 - r) * bead;\n        g += (1 - g) * bead;\n        bb += (1 - bb) * bead;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, bb)));\n    }\n}\n","layer":{"id":"layer-crackle-polish","type":"code","name":"crackle-polish","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Crackle Polish\n// Family:  cosmetic\n// Idea:    A glossy colour fills the panel, a dark top coat is brushed over it from the top down, and as the coat dries it splits, first in long cracks across the panel and then in shorter and shorter cracks that each start on an older one at a right angle, while the gaps widen and the islands of coat shrink into rounded beads with a gloss on their edges and the colour glowing up through the network, until a fresh coat goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after crackle nail polish, a top coat that shrinks as it dries, and the hierarchical crack patterns that form by successive division of domains (Steffen Bohn, Ludovic Pauchard and Yves Couder, 2005)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Craze=0..1, Coat=0..1\n//\n// Knob 1: Hue. Turns the base colour round the whole wheel: at 0 hot pink, 0.1 red, 0.15 orange, 0.22 yellow, 0.3 lime, 0.4 green, 0.55 aqua, 0.65 azure, 0.75 blue, 0.85 violet, 0.95 magenta. Orange and yellow bases are paled a little, lit to full and shaded less beside the islands, so no gap turns brown.\n// Knob 2: Speed. At 2 the coat goes on in 1.2 s, the first crack opens 0.6 s later and runs across the panel in about a second, the last starts about 4.5 s after the first, and when the gaps have finished widening the crackle holds until a new coat goes on, about 11 s after the last. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Craze. How far the coat keeps splitting. At 0 a domain stops splitting once it is under about 20 LEDs long, which leaves about 50 islands, most of them 9 to 18 LEDs across; at 1 under about 11, about 155 islands of 5 to 10, and the gaps open half as wide.\n// Knob 4: Coat. The colour of the top coat: black lacquer at 0, a deep jewel tone opposite the base on the wheel at 0.5, a pale pearl at 1. On the dark coats the gloss is a white rim on the edges facing the light; on the pearl the edges turned away fall into a cool grey-lilac shade, as a pearl pigment shifts with the angle.\n// Buttons: K1 tap brushes a fresh coat on now.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n// The cycle, in seconds at Speed 2: the brush crosses the panel in LAY, the\n// first crack opens at T1 and the last near T2, and a new coat comes HOLD\n// after the last. The run opens at START, with the first crack running.\nconst LAY = 1.2, T1 = 1.8, T2 = 6, HOLD = 5, START = 2.4;\n// Crack tips run at VTIP LEDs a second; a gap opens with time constant TAU.\nconst VTIP = 70, TAU = 1.3;\n// Towards the light, x right and y down: up and to the left.\nconst LX = -0.6, LY = -0.8;\n// Opening hue: hot pink.\nconst H0 = 0.93;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The domains are worked out on a grid of half-LED cells: each cell holds\n// the domain it belongs to, or -1 on a crack.\nconst FW = 2 * W, FH = 2 * H;\n// A crack tip moves STEP LEDs at a time, and within BEND LEDs of an older\n// crack it turns to meet it square.\nconst STEP = 0.25, BEND = 3;\n// Gap pixels are listed out to REACH LEDs from a crack's line.\nconst REACH = 7;\n\n// The whole crackle of one coat, worked out when it goes on. The panel is\n// one domain. A domain splits across its long axis: a crack starts on its\n// rim, square to the older crack it leaves, runs across, and turns to meet\n// the crack on the far side square. Each half splits the same way until it\n// is too short; bigger domains crack sooner.\nfunction crackle(craze) {\n  const stop = 20 - 9 * craze, span = log((W * H) / (0.45 * stop * stop));\n  const lab = new Int32Array(FW * FH), cracks = [];\n  const wall = (x, y) => {\n    const i = floor(2 * x), j = floor(2 * y);\n    return i \u003c 0 || j \u003c 0 || i >= FW || j >= FH || lab[j * FW + i] \u003c 0;\n  };\n  let ids = 1;\n  const todo = [{ id: 0, b: [0, 0, FW - 1, FH - 1], ready: 0 }];\n  while (todo.length) {\n    const d = todo.pop(), [i0, j0, i1, j1] = d.b;\n    let n = 0, sx = 0, sy = 0, sxx = 0, syy = 0, sxy = 0;\n    const nb = [FW, FH, 0, 0];\n    for (let j = j0; j \u003c= j1; j++)\n      for (let i = i0; i \u003c= i1; i++)\n        if (lab[j * FW + i] === d.id) {\n          const x = (i + 0.5) / 2, y = (j + 0.5) / 2;\n          n++;\n          sx += x;\n          sy += y;\n          sxx += x * x;\n          syy += y * y;\n          sxy += x * y;\n          nb[0] = min(nb[0], i);\n          nb[1] = min(nb[1], j);\n          nb[2] = max(nb[2], i);\n          nb[3] = max(nb[3], j);\n        }\n    if (n \u003c 8) continue;\n    const mx = sx / n, my = sy / n, vxx = sxx / n - mx * mx, vyy = syy / n - my * my, vxy = sxy / n - mx * my;\n    const ang = 0.5 * Math.atan2(2 * vxy, vxx - vyy);\n    // A bar of length L has variance L^2 / 12 along its axis.\n    const long = sqrt(12 * (vxx * cos(ang) ** 2 + 2 * vxy * cos(ang) * sin(ang) + vyy * sin(ang) ** 2));\n    // The cut is turned up to 20 degrees off square; its ends bend square anyway.\n    const tu = ang + (random() - 0.5) * 0.7, ux = cos(tu), uy = sin(tu);\n    if (long \u003c stop * (0.85 + 0.3 * random())) continue;\n    // Where the cut line, across the long axis near the middle, meets the rim.\n    const off = (random() - 0.5) * 0.36 * long, cx = mx + ux * off, cy = my + uy * off;\n    if (wall(cx, cy)) continue;\n    const ends = [-1, 1].map((sg) => {\n      let x = cx, y = cy;\n      while (!wall(x - sg * uy * STEP, y + sg * ux * STEP)) {\n        x -= sg * uy * STEP;\n        y += sg * ux * STEP;\n      }\n      return [x, y, sg];\n    });\n    const [sx0, sy0, sg] = ends[random() \u003c 0.5 ? 0 : 1];\n    // Heading: across, toward the other end; it starts square off its rim.\n    const hx = sg * uy, hy = -sg * ux;\n    let x = sx0, y = sy0, dx = hx, dy = hy, run = 0, ok = false;\n    const pts = [[x, y]], cells = [];\n    for (let k = 0; k \u003c (4 * long) / STEP; k++) {\n      // The nearest older crack (or the panel's edge) within BEND, and the\n      // way square off it, from all its cells nearby.\n      let best = BEND * BEND, gx = 0, gy = 0;\n      const ci = floor(2 * x), cj = floor(2 * y), r = 2 * BEND;\n      for (let j = cj - r; j \u003c= cj + r; j++)\n        for (let i = ci - r; i \u003c= ci + r; i++) {\n          if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] >= 0) continue;\n          const ex = x - (cl(i, -1, FW) + 0.5) / 2, ey = y - (cl(j, -1, FH) + 0.5) / 2, e2 = ex * ex + ey * ey;\n          best = min(best, e2);\n          if (e2 \u003c 4) {\n            const wt = exp(-e2);\n            gx += ex * wt;\n            gy += ey * wt;\n          }\n        }\n      const dist = sqrt(best), gl = sqrt(gx * gx + gy * gy);\n      let calm = 1;\n      if (best \u003c BEND * BEND && gl > 0) {\n        gx /= gl;\n        gy /= gl;\n        // Leaving its own rim: square off it. Coming up on another: turn square into it.\n        const into = run \u003c 1.2 ? -0.5 : dx * gx + dy * gy \u003c 0 ? 0.6 * (1 - dist / BEND) : 0;\n        if (into) {\n          dx -= into * gx;\n          dy -= into * gy;\n          calm = dist / BEND;\n        }\n      }\n      const tw = (random() - 0.5) * 0.22 * calm;\n      dx += 0.05 * hx * calm - tw * dy;\n      dy += 0.05 * hy * calm + tw * dx;\n      const dl = sqrt(dx * dx + dy * dy);\n      dx /= dl;\n      dy /= dl;\n      x += dx * STEP;\n      y += dy * STEP;\n      run += STEP;\n      const ci2 = floor(2 * x), cj2 = floor(2 * y), last = cells[cells.length - 1];\n      // Cells of the crack, joined edge to edge so nothing leaks past it.\n      if (last && last[0] !== ci2 && last[1] !== cj2) cells.push([ci2, last[1]]);\n      if (!last || last[0] !== ci2 || last[1] !== cj2) cells.push([ci2, cj2]);\n      if (wall(x, y)) {\n        pts.push([x, y]);\n        ok = run > 2;\n        break;\n      }\n      if (k % 4 === 3) pts.push([x, y]);\n    }\n    if (!ok) continue;\n    for (const [i, j] of cells) if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] === d.id) lab[j * FW + i] = -1;\n    // Fill one side with a new domain.\n    const m = pts[pts.length >> 1], q = pts[(pts.length >> 1) + 1] || pts[pts.length - 1];\n    const tx = q[0] - m[0], ty = q[1] - m[1], tl = Math.hypot(tx, ty) || 1;\n    const si = floor(2 * (m[0] - (ty / tl) * 0.8)), sj = floor(2 * (m[1] + (tx / tl) * 0.8));\n    if (si \u003c 0 || sj \u003c 0 || si >= FW || sj >= FH || lab[sj * FW + si] !== d.id) continue;\n    const nid = ids++, stack = [sj * FW + si];\n    lab[sj * FW + si] = nid;\n    while (stack.length) {\n      const c = stack.pop(), i = c % FW, j = (c - i) / FW;\n      for (const e of [i > 0 ? c - 1 : -1, i \u003c FW - 1 ? c + 1 : -1, j > 0 ? c - FW : -1, j \u003c FH - 1 ? c + FW : -1])\n        if (e >= 0 && lab[e] === d.id) {\n          lab[e] = nid;\n          stack.push(e);\n        }\n    }\n    let len = 0;\n    for (let k = 1; k \u003c pts.length; k++) len += Math.hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n    const age = cl(log((W * H) / (n / 4)) / span, 0, 1), t = max(d.ready + 0.06, T1 + (T2 - T1) * age);\n    // Final half-width: the first cracks open widest.\n    cracks.push({ pts, len, t, w: 1.5 - 0.85 * age });\n    const ready = t + len / VTIP;\n    todo.push({ id: d.id, b: nb, ready }, { id: nid, b: nb, ready });\n  }\n  return gapLists(cracks);\n}\n\n// For each crack, every pixel within REACH of its line: how far from it,\n// and how far along the crack the nearest point lies.\nfunction gapLists(cracks) {\n  const dist = new Float32Array(N), along = new Float32Array(N), seen = new Int32Array(N).fill(-1);\n  cracks.forEach((c, ci) => {\n    const idx = [];\n    let u0 = 0;\n    for (let k = 1; k \u003c c.pts.length; k++) {\n      const [ax, ay] = c.pts[k - 1], [bx, by] = c.pts[k], ex = bx - ax, ey = by - ay, el = sqrt(ex * ex + ey * ey) || 1e-6;\n      for (let y = max(0, floor(min(ay, by) - REACH)); y \u003c= min(H - 1, floor(max(ay, by) + REACH)); y++)\n        for (let x = max(0, floor(min(ax, bx) - REACH)); x \u003c= min(W - 1, floor(max(ax, bx) + REACH)); x++) {\n          const px = x + 0.5 - ax, py = y + 0.5 - ay, f = cl((px * ex + py * ey) / (el * el), 0, 1);\n          const qx = px - f * ex, qy = py - f * ey, dd = sqrt(qx * qx + qy * qy), p = y * W + x;\n          if (dd > REACH) continue;\n          if (seen[p] !== ci) {\n            seen[p] = ci;\n            idx.push(p);\n            dist[p] = 1e9;\n          }\n          if (dd \u003c dist[p]) {\n            dist[p] = dd;\n            along[p] = u0 + f * el;\n          }\n        }\n      u0 += el;\n    }\n    c.idx = Int32Array.from(idx);\n    c.d = Float32Array.from(idx, (p) => dist[p]);\n    c.u = Float32Array.from(idx, (p) => along[p]);\n    c.pts = null;\n  });\n  return cracks;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, craze: 0, coat: 0.06, begun: false, t: START, end: 0, cracks: [], old: null, brush: new Float32Array(W),\n    G: new Float32Array(N),\n    base: [0, 0, 0], ink: [0, 0, 0], a: [0, 0, 0], b: [0, 0, 0], cool: [0, 0, 0],\n  };\n}\n\nfunction newCoat(S, t0) {\n  S.old = S.cracks;\n  // The brush's bristles: a mark per column, softened.\n  let m = random();\n  for (let x = 0; x \u003c W; x++) S.brush[x] = 0.07 * (m = 0.55 * m + 0.45 * random());\n  S.cracks = crackle(S.craze);\n  let last = 0;\n  for (const c of S.cracks) last = max(last, c.t);\n  S.end = last + HOLD;\n  S.t = t0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.craze = cl(k[2], 0, 1);\n  S.coat = cl(k[3], 0, 1);\n  if (!S.begun) {\n    newCoat(S, START);\n    S.old = null;\n    S.begun = true;\n  }\n  S.t += (cl(dt || 0, 0, 0.1) * S.speed) / 2;\n  if (S.t > S.end || (input.btnPressed && input.btnPressed[0])) newCoat(S, 0);\n}\n\n// Polynomial smooth minimum: where two gaps come within k of each other\n// they merge in a fillet, which rounds the island's corner between them.\nfunction smin(a, b, k) {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n}\n\n// G: signed distance to the open gaps, in LEDs, positive on the coat. Each\n// crack is a gap round its line as far as its tip, its half-width growing\n// from a hairline as it opens, and the corners it makes with older cracks\n// rounding as the coat dries.\nfunction field(S, list, t) {\n  const G = S.G;\n  G.fill(9);\n  const narrow = 1 - 0.5 * S.craze;\n  for (const c of list) {\n    const age = t - c.t;\n    if (age \u003c= 0) continue;\n    const reach = min(c.len, age * VTIP), open = 1 - exp(-age / TAU), run = reach \u003c c.len;\n    const hw = 0.42 + (c.w * narrow - 0.42) * open, k = (0.5 + 2.3 * open) * narrow, { idx, d, u } = c;\n    for (let e = 0; e \u003c idx.length; e++) {\n      const over = u[e] - reach;\n      if (over > REACH) continue;\n      const dd = over > 0 ? sqrt(d[e] * d[e] + over * over) : d[e];\n      // A running tip is sharp.\n      const tip = run ? min(1, 0.35 + max(0, -over) / 5) : 1;\n      G[idx[e]] = smin(G[idx[e]], dd - hw * tip, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const t = S.t, h = S.hue + H0, hh = h - floor(h), cz = S.coat;\n  // While the brush is on its way down, the old crackle shows below it.\n  const laying = t \u003c LAY && S.old, front = -6 + ((H + 12) * t) / LAY;\n  field(S, laying ? S.old : S.cracks, laying ? 1e9 : t);\n  const G = S.G, { base, ink, a, b } = S;\n  // Orange and yellow bases go brown at the dim edge of a gap: paled a\n  // little and lit to full.\n  const warm = cl(1.5 - abs(hh - 0.13) / 0.07, 0, 1);\n  hsv(h, 0.82 - 0.2 * warm, 0.9 + 0.1 * warm, base);\n  // The coat: black lacquer, a jewel tone opposite the base, pearl.\n  const hc = h + 0.5, wc = cl(1.5 - abs(hc - floor(hc) - 0.13) / 0.07, 0, 1);\n  if (cz \u003c 0.5) {\n    hsv(hc, 0.5, 0.05, a);\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, b);\n  } else {\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, a);\n    hsv(h + 0.04, 0.12, 0.9, b);\n  }\n  const f = sm(0, 1, cz \u003c 0.5 ? cz * 2 : cz * 2 - 1);\n  for (let c = 0; c \u003c 3; c++) ink[c] = a[c] + (b[c] - a[c]) * f;\n  const pearl = sm(0.5, 1, cz), dark = 1 - sm(0, 0.6, cz), cool = S.cool;\n  hsv(h + 0.55, 0.28, 0.72, cool);\n  // A strip light reflected in the gloss, sliding down the panel once a\n  // coat, starting as the brush leaves it.\n  const sheen = (((t - LAY) * 24 + 280) % 280) - 5;\n  // The fresh coat is wet: a stronger reflection, brush marks running down\n  // it and the base colour faintly through it, all gone a second after it is on.\n  const dry = laying ? 0 : exp(-(t - LAY) / 0.9);\n  // Above the brush's front the coat is fresh and whole.\n  const at = (x, y) => {\n    const v = G[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)];\n    return laying ? max(v, (front - y) * 3) : v;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = at(x, y);\n      const gx = min(at(x + 1, y), 3) - min(at(x - 1, y), 3), gy = min(at(x, y + 1), 3) - min(at(x, y - 1), 3);\n      const gl = sqrt(gx * gx + gy * gy) + 1e-6, face = -(gx * LX + gy * LY) / gl;\n      const band = exp(-(((x * 0.5 + y - sheen) / 13) ** 2));\n      // The base through the gaps, in the shade of the island on its lit side.\n      const shade = 1 - (0.45 - 0.3 * warm) * sm(-0.5, 0.8, at(x - 1, y - 2));\n      const bl = 0.3 * band;\n      let r = (base[0] + (1 - base[0]) * bl) * shade, g = (base[1] + (1 - base[1]) * bl) * shade, bb = (base[2] + (1 - base[2]) * bl) * shade;\n      // The island: how far inside its edge, as the height of a bead. Its\n      // cover falls off as a square root at the edge, so the base glows up\n      // through a hairline crack near full instead of as a dim line.\n      const cov = 1 - (1 - sm(-0.55, 0.55, v)) ** 0.5, hgt = cl(v / 2.5, 0, 1);\n      if (cov > 0) {\n        const edge = 1 - sm(0.15, 0.75, hgt), lit = max(0, face) * edge, away = max(0, -face) * edge;\n        // Dark coats: a white gloss on the lit rim and the strip light on\n        // the top.\n        const wet = laying ? 1 - sm(front - 2, front, y) : dry;\n        const brush = wet * S.brush[x] * (0.8 + 0.2 * sin(y * 0.09 + x));\n        const gloss = (dark * 0.75 + 0.35 * (1 - dark)) * lit * lit + (0.12 + 0.18 * dark + 0.3 * wet) * band * sm(0.3, 0.9, hgt) + brush;\n        const tint = 0.14 * wet * dark;\n        // Pearl shifts toward a cool interference tint on the rim turned away.\n        const dim = 1 - 0.3 * pearl * away - 0.08 * pearl * (1 - hgt), sh = 0.6 * pearl * away;\n        const ir = (ink[0] + (cool[0] - ink[0]) * sh) * dim + (1 - ink[0]) * gloss + base[0] * tint;\n        const ig = (ink[1] + (cool[1] - ink[1]) * sh) * dim + (1 - ink[1]) * gloss + base[1] * tint;\n        const ib = (ink[2] + (cool[2] - ink[2]) * sh) * dim + (1 - ink[2]) * gloss + base[2] * tint;\n        r += (ir - r) * cov;\n        g += (ig - g) * cov;\n        bb += (ib - bb) * cov;\n      }\n      if (laying) {\n        // The wet bead along the brush's edge.\n        const bead = 0.55 * exp(-(((y - front - 0.6 * sin(x * 0.4 + t * 3)) / 1.1) ** 2));\n        r += (1 - r) * bead;\n        g += (1 - g) * bead;\n        bb += (1 - bb) * bead;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, bb)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Craze=0..1, Coat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the base colour round the whole wheel: at 0 hot pink, 0.1 red, 0.15 orange, 0.22 yellow, 0.3 lime, 0.4 green, 0.55 aqua, 0.65 azure, 0.75 blue, 0.85 violet, 0.95 magenta. Orange and yellow bases are paled a little, lit to full and shaded less beside the islands, so no gap turns brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the coat goes on in 1.2 s, the first crack opens 0.6 s later and runs across the panel in about a second, the last starts about 4.5 s after the first, and when the gaps have finished widening the crackle holds until a new coat goes on, about 11 s after the last. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Craze","min":0,"max":1,"about":"How far the coat keeps splitting. At 0 a domain stops splitting once it is under about 20 LEDs long, which leaves about 50 islands, most of them 9 to 18 LEDs across; at 1 under about 11, about 155 islands of 5 to 10, and the gaps open half as wide."},{"name":"Coat","min":0,"max":1,"about":"The colour of the top coat: black lacquer at 0, a deep jewel tone opposite the base on the wheel at 0.5, a pale pearl at 1. On the dark coats the gloss is a white rim on the edges facing the light; on the pearl the edges turned away fall into a cool grey-lilac shade, as a pearl pigment shifts with the angle."}],"start":[0,2,0,0.06],"measures":{"motion":0.0606,"detail":0.0894,"edges":0.5269,"complexity":1.379,"coverage":0.5043,"colour":0.2853,"drift":0.1556},"knobResponse":[0.1036,0.1543,0.0671,0.6128]},{"slug":"cream-swirl","title":"Cream Swirl","family":"cosmetic","round":29,"note":"보이지 않는 팔레트 나이프가 크림을 S자와 소용돌이로 펴 바르며 매끈한 띠와 윤기 나는 둔덕을 남기고, 떨어진 색 크림 덩이를 길쭉한 리본으로 끌고 가요. 부드러운 빛이 7초에 한 번 좌우로 오가며 결 위로 윤이 미끄러져요. K3 을 올리면 섞이는 색조가 셋까지 늘고, 누르면 가장 진한 색 덩이가 칼 앞에 떨어져요.","idea":"An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.","buttons":"K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.","code":"// ===== Patternflow pattern =====\n// Title:   Cream Swirl\n// Family:  cosmetic\n// Idea:    An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the swatch of face cream spread with a spatula in a macro product film\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1\n//\n// Knob 1: Hue. Turns the cream and its tints round the whole colour wheel together, opening on rose.\n// Knob 2: Speed. How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges.\n// Knob 3: Tones. How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path.\n// Knob 4: Gloss. At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight.\n// Buttons: K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The knife's edge is cut into NB bins. Each bin carries the cream it has\n// scraped up and that cream's tint, so a dollop picked up at one end of the\n// blade is laid down as a ribbon behind that end, not across the whole band.\nconst NB = 16;\n// Path points are half an LED apart.\nconst STEP = 0.5, PMAX = 1200;\n// How fast a bin's tint turns to the cream it scrapes, per unit of height\n// scraped; how much of the band's skin is the cream the blade carries; what\n// share of each bin's load slides on to the next bin along the angled blade\n// for each LED travelled.\nconst PICK = 0.3, FILM = 0.45, SLIP = 1.05;\n// The share of the dragged skin left behind for each LED travelled.\nconst DRAG = 0.03;\n// The ridge the spill builds stands at RS height per LED on its flanks, and\n// is never taller than RMAX.\nconst RS = 0.4, RMAX = 3.6;\n// How deep the roll of cream in front of the blade is, in LEDs.\nconst ROLL = 6;\n// How deep the visible skin is: scraping this much off shows the bed.\nconst SKIN = 0.8;\n// The opening hue: rose, not red.\nconst H0 = 0.93;\n\n// A soft light low over the top left, its height LZ and where it sits round\n// the panel, LA radians; it glides LS either way of that and back over SWING\n// seconds at Speed 2, so the sheen slides along the ridges between strokes.\nconst LZ = 0.5, LA = -2.34, LS = 0.9, SWING = 7;\n// How tall the height field looks: a slope of 1 tilts the surface 56 degrees.\nconst KZ = 1.8;\n// The light is a big soft box: it wraps a little way round the cream, so a\n// slope turned from it shades off gently instead of dropping into shadow.\nconst WRAP = 0.3;\n// How much a fold darkens and a crest brightens, per unit of height.\nconst CAV = 0.5;\n// Cream the knife has just laid down holds a wet film that lifts it by this\n// much, fading as it dulls.\nconst GLINT = 26;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The tint concentrations a dollop can come in, for one, two and three tints.\nconst DOSE = [[0.55], [0.4, 0.88], [0.3, 0.62, 1]];\n// Where the colour ramp steps between tints, so folded cream shows distinct\n// bands rather than one blurred pink: thresholds and the level each band shows.\nconst STEPS = [\n  [[0.22], [0, 0.55]],\n  [[0.18, 0.6], [0, 0.42, 0.88]],\n  [[0.14, 0.44, 0.78], [0, 0.3, 0.62, 1]],\n];\nfunction band(c, n) {\n  const [th, lv] = STEPS[n];\n  let v = lv[0];\n  for (let i = 0; i \u003c th.length; i++) v += (lv[i + 1] - lv[i]) * sm((c - th[i]) / 0.1 + 0.5);\n  return v;\n}\n\nexport function setup(params) {\n  params.s = {\n    // Height, the tint of the skin, the tint of the bed under it.\n    hf: new Float32Array(N), tn: new Float32Array(N), ut: new Float32Array(N),\n    dh: new Float32Array(N), dt: new Float32Array(N), bl: new Float32Array(N), av: new Float32Array(N),\n    stamp: new Int32Array(N).fill(-999), sub: 0, fr: new Float32Array(N),\n    path: new Float32Array(PMAX * 2), plen: 0, pos: 0, type: 0, done: 0,\n    m: new Float32Array(NB), c: new Float32Array(NB), ft: new Float32Array(NB), fm: new Float32Array(NB), bm: 0, bc: 0,\n    L: 24, ca: 1, sa: 0, B: 0, tilt: 0, gPh: 0, cc: 0, cA: 0, cP: 8, cB: 0, slip: 1, rh: 0,\n    sp: new Float32Array(8), pause: 0, live: false, force: 1, lt: 0,\n    dol: [], hue: 0, tones: 1, gloss: 0.06, ready: false,\n    lut: new Float32Array(64 * 3), lus: new Float32Array(64 * 3),\n    kx: 0, ky: 0, dx: 0, dy: 1, tx: 1, ty: 0,\n  };\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\n// A round dollop: a soft mound of tint c with a peak where it left the spoon. It is all skin, so a knife that\n// scrapes it away finds the cream it was dropped on.\n// Its colour goes on with the first of it, as deep as the whole dollop will\n// be thick: its thin rim only half covers what it landed on, so a knife that\n// scrapes it off leaves no ring.\nfunction dollop(P, x0, y0, r, ht, c, f, first) {\n  const x1 = max(0, floor(x0 - r)), x2 = min(W - 1, floor(x0 + r) + 1);\n  const y1 = max(0, floor(y0 - r)), y2 = min(H - 1, floor(y0 + r) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const d = ((x - x0) ** 2 + (y - y0) ** 2) / (r * r);\n      if (d >= 1) continue;\n      const p = y * W + x, a = ht * (1 - sqrt(d)) * (1 - d * 0.5);\n      P.hf[p] += a * f;\n      if (first) P.tn[p] += (c - P.tn[p]) * min(1, a / 1.2);\n    }\n}\n\n// The stroke's path as a function of u from 0 to 1, from the parameters\n// startStroke puts in P.sp.\nfunction pathAt(P, u, o) {\n  const s = P.sp;\n  if (P.type === 0) {\n    // An S down (or up) the panel.\n    o[0] = s[0] + s[1] * sin(2 * PI * s[2] * u + s[3]);\n    o[1] = s[4] + (s[5] - s[4]) * u;\n  } else if (P.type === 1) {\n    // A spiral in to a point: the swirl on top of a jar.\n    const a = s[3] + s[4] * u * 2 * PI, r = s[5] + (s[6] - s[5]) * (1 - (1 - u) * (1 - u));\n    o[0] = s[0] + r * cos(a);\n    o[1] = s[1] + r * sin(a) * 1.15;\n  } else {\n    // A bowed smear from off one side to the middle, or right across.\n    const v = 1 - u, mx = (s[0] + s[2]) / 2 + s[4], my = (s[1] + s[3]) / 2 + s[5];\n    o[0] = v * v * s[0] + 2 * v * u * mx + u * u * s[2];\n    o[1] = v * v * s[1] + 2 * v * u * my + u * u * s[3];\n  }\n}\n\nconst TMP = [0, 0];\nfunction startStroke(P, k3) {\n  const s = P.sp, r = rnd(), hf = P.hf;\n  // Heights only matter against each other: keep the cream's mean level at\n  // 0, and cut every band below it, so each stroke has cream to push.\n  let mean = 0;\n  for (let p = 0; p \u003c N; p++) mean += hf[p];\n  mean /= N;\n  for (let p = 0; p \u003c N; p++) hf[p] -= mean;\n  P.type = r \u003c 0.5 ? 0 : r \u003c 0.8 ? 1 : 2;\n  if (P.type === 0) {\n    const down = rnd() \u003c 0.5;\n    s[0] = 22 + rnd() * 20;\n    s[1] = 10 + rnd() * 10;\n    s[2] = 0.6 + rnd() * 0.5;\n    s[3] = rnd() * 2 * PI;\n    s[4] = down ? -14 : H + 14;\n    s[5] = down ? H + 14 : -14;\n    P.L = 34 + rnd() * 10;\n    P.B = -0.9 + rnd() * 0.5;\n  } else if (P.type === 1) {\n    s[0] = 26 + rnd() * 12;\n    s[1] = 36 + rnd() * 56;\n    s[3] = rnd() * 2 * PI;\n    s[4] = (rnd() \u003c 0.5 ? -1 : 1) * (1.3 + rnd() * 0.5);\n    s[5] = 25 + rnd() * 6;\n    s[6] = 3;\n    P.L = 18 + rnd() * 5;\n    P.B = -0.6 + rnd() * 0.4;\n  } else {\n    const across = rnd() \u003c 0.4, side = rnd() \u003c 0.5 ? -1 : 1;\n    if (across) {\n      s[0] = side \u003c 0 ? -14 : W + 14;\n      s[2] = side \u003c 0 ? W + 14 : -14;\n      s[1] = 14 + rnd() * 100;\n      s[3] = cl(s[1] + (rnd() - 0.5) * 40, 10, H - 10);\n    } else {\n      s[0] = 32 + side * (34 + rnd() * 6);\n      s[1] = 10 + rnd() * 108;\n      s[2] = 32 - side * (rnd() * 10);\n      s[3] = cl(s[1] + (rnd() - 0.5) * 70, 18, H - 18);\n    }\n    s[4] = 0;\n    s[5] = (rnd() - 0.5) * 36;\n    P.L = 28 + rnd() * 8;\n    P.B = -0.8 + rnd() * 0.5;\n  }\n  // Lay the path down half an LED a point.\n  const path = P.path;\n  pathAt(P, 0, TMP);\n  let px = TMP[0], py = TMP[1], n = 1;\n  path[0] = px;\n  path[1] = py;\n  for (let i = 1; i \u003c= 4000 && n \u003c PMAX; i++) {\n    pathAt(P, i / 4000, TMP);\n    const d = sqrt((TMP[0] - px) ** 2 + (TMP[1] - py) ** 2);\n    if (d >= STEP) {\n      px += ((TMP[0] - px) * STEP) / d;\n      py += ((TMP[1] - py) * STEP) / d;\n      path[n * 2] = px;\n      path[n * 2 + 1] = py;\n      n++;\n    }\n  }\n  P.plen = (n - 1) * STEP;\n  P.pos = 0;\n  // The blade sits at an angle to its track, tilted a little and bowed, so\n  // the band is a shallow trough, and it chatters as it goes, leaving soft\n  // folds across the band. A slow knife glides and cuts shallow; a fast one\n  // chatters harder and digs deeper, so it throws a taller ridge.\n  const al = (rnd() - 0.5) * 0.6;\n  P.ca = cos(al);\n  P.sa = sin(al);\n  P.tilt = (rnd() - 0.5) * 0.6;\n  P.cc = 0.2 + rnd() * 0.4;\n  P.cA = (0.13 + rnd() * 0.1) * (0.35 + 0.65 * P.force);\n  P.B -= 0.35 * (P.force - 1);\n  P.cP = 11 + rnd() * 5;\n  P.cB = (rnd() \u003c 0.5 ? -1 : 1) * (3 + rnd() * 4);\n  P.gPh = rnd() * 2 * PI;\n  P.slip = rnd() \u003c 0.5 ? -1 : 1;\n  if (P.type === 1) {\n    // A swirl throws its cream outwards.\n    locate(P, 6);\n    P.slip = P.tx * (P.kx - s[0]) + P.ty * (P.ky - s[1]) > 0 ? 1 : -1;\n  }\n  P.m.fill(0);\n  P.c.fill(0);\n  P.ft.fill(0);\n  P.fm.fill(0);\n  P.rh = 0;\n  P.live = true;\n  // Every stroke goes through fresh dollops dropped a little way along: one\n  // for one tint, two or three when three tints are folded in.\n  const nd = k3 === 1 ? 1 : k3 === 2 ? (rnd() \u003c 0.5 ? 2 : 1) : rnd() \u003c 0.4 ? 3 : 2;\n  for (let i = 0; i \u003c nd; i++) plan(P, 0.1 + rnd() * 0.45, rnd() \u003c 0.4 ? 0 : DOSE[k3 - 1][floor(rnd() * k3)], (10 + rnd() * 3) / sqrt(nd));\n}\n\n// A dollop waiting to fall at a point on the path ahead of the knife.\nfunction plan(P, u, c, r) {\n  if (P.dol.length > 3) return;\n  const i = floor((P.pos + (P.plen - P.pos) * u) / STEP);\n  const x = P.path[i * 2], y = P.path[i * 2 + 1];\n  P.dol.push({ x: cl(x + (rnd() - 0.5) * 6, 6, W - 7), y: cl(y + (rnd() - 0.5) * 6, 8, H - 9), r, h: 2.6 + rnd() * 0.6, c, f: 0 });\n}\n\n// The knife's point, its direction of travel and the blade's direction.\nfunction locate(P, pos) {\n  const path = P.path, last = floor(P.plen / STEP);\n  const i = cl(floor(pos / STEP), 0, last - 1), f = cl(pos / STEP - i, 0, 1);\n  P.kx = path[i * 2] + (path[i * 2 + 2] - path[i * 2]) * f;\n  P.ky = path[i * 2 + 1] + (path[i * 2 + 3] - path[i * 2 + 1]) * f;\n  const a = max(0, i - 3), b = min(last, i + 4);\n  let dx = path[b * 2] - path[a * 2], dy = path[b * 2 + 1] - path[a * 2 + 1];\n  const d = sqrt(dx * dx + dy * dy) || 1;\n  dx /= d;\n  dy /= d;\n  P.dx = dx;\n  P.dy = dy;\n  P.tx = -dy * P.ca - dx * P.sa;\n  P.ty = dx * P.ca - dy * P.sa;\n}\n\n// The load of the blade at a point a along it and the tint it drags there,\n// read between the bins so what it lays down has no seams.\nfunction load(P, a) {\n  const fb = cl(((a + P.L / 2) / P.L) * NB - 0.5, 0, NB - 1), j = min(NB - 2, floor(fb)), f = fb - j;\n  P.bm = P.m[j] + (P.m[j + 1] - P.m[j]) * f;\n  P.bc = P.ft[j] + (P.ft[j + 1] - P.ft[j]) * f;\n}\n\n// The ridge across its width r (0 at the band's edge, 1 at its foot): a\n// steep inner face where the blade cut it, a long outer slope.\nconst ridge = (r) => (r \u003c 0.3 ? sm(r / 0.3) : 1 - sm((r - 0.3) / 0.7));\n\n// One move of the knife by ds LEDs. Each LED is worked once a pass, as the\n// back of the blade leaves it: what stood above the blade goes into the\n// bin over it, and the band, the ridge beside it and their tints are laid\n// down.\nfunction knife(P, ds) {\n  P.pos += ds;\n  P.sub++;\n  if (P.pos >= P.plen) return lift(P);\n  locate(P, P.pos);\n  const { hf, tn, ut, m, c, ft, fm, stamp, L } = P, hl = L / 2, sl = P.slip;\n  for (let j = 0; j \u003c NB; j++) fm[j] *= 1 - DRAG * ds;\n  const kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  // Pressure comes on over the first 8 LEDs and goes off over the last 6.\n  const pr = sm(P.pos / 8) * sm((P.plen - P.pos) / 6);\n  const rw = max(3, (2 * P.rh) / RS), end = sl > 0 ? NB - 1 : 0, lvEnd = P.B + P.tilt * sl + P.cc;\n  const rx = abs(tx) * (hl + rw) + 3, ry = abs(ty) * (hl + rw) + 3;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, s = (tx * oy - ty * ox) / det;\n      // On a curve the LEDs on the outside move further than ds, so the\n      // strip is wider than a step and the stamp keeps it to once a pass.\n      if (s \u003c -3 - ds || s >= -0.3) continue;\n      const a = (ox * dy - oy * dx) / det, as = a * sl, p = y * W + x;\n      if (as \u003c= -hl - 1.5 || as >= hl + rw || P.sub - stamp[p] \u003c 40) continue;\n      stamp[p] = P.sub;\n      const ho = hf[p], to = tn[p];\n      if (as \u003c hl && as > -hl) {\n        // The chatter marks bow back towards the blade's ends, as a flexible\n        // blade leaves them, and come and go along it.\n        const u = a / hl, w = (2 * PI * (P.pos + P.cB * u * u)) / P.cP;\n        const lv = P.B + P.tilt * u + P.cc * u * u + P.cA * (0.65 + 0.35 * sin(a * 0.31 + P.gPh)) * (sin(w) + 0.5 * sin(w * 1.63 + 1.3)), e = ho - lv;\n        const j = cl(floor(((a + hl) / L) * NB), 0, NB - 1);\n        if (e > 0) {\n          m[j] += e * pr;\n          c[j] += (to - c[j]) * min(1, e * PICK * pr);\n          // The skin of tint the blade drags stays in its own lane and is\n          // mixed by how much of each colour it gathered, so a dollop\n          // becomes a long ribbon that pales as white cream dilutes it.\n          fm[j] += e * pr;\n          ft[j] += ((to - ft[j]) * e * pr) / fm[j];\n        }\n        // Under what was scraped off lies the bed; over it the blade leaves a\n        // film of the cream it carries.\n        const ex = e > 0 ? to + (ut[p] - to) * min(1, e / SKIN) : to;\n        load(P, a);\n        const tw = ex + (P.bc - ex) * FILM * min(1, P.bm);\n        hf[p] = ho + (lv - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (tw - to) * pr;\n        ut[p] += (tw - ut[p]) * pr * 0.4;\n      } else {\n        // Beside the band: the ridge on the spill side, a thin lip of\n        // squeezed cream on the other.\n        const hr = as > 0 ? lvEnd + P.rh * ridge((as - hl) / rw) : P.B - P.tilt * sl + 0.2 * P.rh * ridge((-as - hl) / 1.5);\n        if (hr \u003c= ho) continue;\n        const k = pr * min(1, (hr - ho) / SKIN), ce = as > 0 ? c[end] : to;\n        hf[p] = ho + (hr - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (ce - to) * k;\n        ut[p] += (ce - ut[p]) * k;\n      }\n    }\n  // The load slides along the angled blade and spills off its end, and the\n  // ridge stands as tall as the cream spilling into it.\n  const f = min(0.9, SLIP * ds);\n  for (let k = 1; k \u003c NB; k++) {\n    const j = sl > 0 ? NB - 1 - k : k, to = j + sl, a = m[j] * f;\n    if (a \u003c= 0) continue;\n    c[to] = (c[to] * m[to] + c[j] * a) / (m[to] + a);\n    m[to] += a;\n    m[j] -= a;\n  }\n  const spill = m[end] * f;\n  m[end] -= spill;\n  const target = min(RMAX, sqrt(0.75 * (spill / ds) * RS));\n  P.rh += (target - P.rh) * min(1, ds * 0.25);\n}\n\n// The knife lifts: what it still carries stays where it stopped, a raised\n// lip across the end of the band.\nfunction lift(P) {\n  locate(P, P.plen);\n  roll(P, P.hf, P.tn, P.ut);\n  P.live = false;\n  P.done++;\n  P.pause = 0.15 + rnd() * 0.2;\n}\n\n// The cream on the blade's face as a rounded roll in front of it, laid into\n// (h, t): for the picture while the knife moves, for good when it lifts.\nfunction roll(P, h, t, u) {\n  const hl = P.L / 2, kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  const rx = abs(tx) * hl + ROLL + 2, ry = abs(ty) * hl + ROLL + 2;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, a = (ox * dy - oy * dx) / det, s = (tx * oy - ty * ox) / det;\n      if (s \u003c= -0.3 || s >= ROLL || a \u003c= -hl || a >= hl) continue;\n      load(P, a);\n      // A bin's load spread as a mound ROLL deep, rounded off at the blade's\n      // ends: as tall as that much cream stands, and never a wall.\n      const ht = min(2.4, sqrt((P.bm * NB) / P.L) * 0.7) * sin((PI * (s + 0.3)) / (ROLL + 0.3)) * sqrt(sin((PI * (a + hl)) / P.L));\n      const p = y * W + x;\n      if (P.B + ht \u003c= h[p]) continue;\n      const k = min(1, (P.B + ht - h[p]) / SKIN);\n      h[p] = P.B + ht;\n      t[p] += (P.bc - t[p]) * k;\n      if (u) u[p] += (P.bc - u[p]) * k;\n    }\n}\n\n// One frame of the studio: the pause between strokes, dollops falling, the knife.\nfunction tick(P, dt, speed, k3) {\n  for (const d of P.dol) {\n    if (d.f >= 1) continue;\n    const g = min(1 - d.f, dt * 2.5 * max(0.6, speed / 2));\n    dollop(P, d.x, d.y, d.r, d.h, d.c, g, d.f === 0);\n    d.f += g;\n  }\n  // Freshly worked cream glistens; left alone it dulls to a satin over\n  // about ten seconds at Speed 2.\n  P.lt += dt * speed * 0.5;\n  const fr = P.fr, k = 1 - dt * 0.07 * max(0.5, speed);\n  for (let p = 0; p \u003c N; p++) fr[p] *= k;\n  if (!P.live) {\n    P.pause -= dt * max(0.5, speed / 2);\n    if (P.pause \u003c= 0) startStroke(P, k3);\n  } else {\n    let ds = dt * speed * 10;\n    while (ds > 1e-6) {\n      const st = min(ds, 0.5);\n      knife(P, st);\n      ds -= st;\n      if (!P.live) break;\n    }\n  }\n  // A dollop is forgotten once it has fallen and the knife has gone on.\n  if (P.dol.length && P.dol[0].f >= 1 && (!P.live || P.dol.length > 2)) P.dol.shift();\n}\n\n// The first frame already shows cream that has been worked: a level layer\n// and three strokes through dollops of tint.\nfunction prime(P, k3) {\n  const { hf } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hf[y * W + x] = 0.3 * sin(x * 0.11 + y * 0.05) * sin(y * 0.07 - x * 0.04);\n  P.pause = 0;\n  while (P.done \u003c 3) tick(P, 1 / 30, 2, k3);\n  while (!P.live) tick(P, 1 / 30, 2, k3);\n  // Start the live stroke a fifth of the way along, its dollops down.\n  for (const d of P.dol) if (d.f \u003c 1) (dollop(P, d.x, d.y, d.r, d.h, d.c, 1 - d.f, d.f === 0), (d.f = 1));\n  while (P.live && P.pos \u003c P.plen * 0.2) tick(P, 1 / 30, 2, k3);\n  P.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.tones = cl(k[2], 1, 3);\n  P.gloss = cl(k[3], 0, 1);\n  const k3 = cl(Math.round(P.tones), 1, 3);\n  P.force = cl(k[1], 0.2, 3) / 2;\n  if (!P.ready) prime(P, k3);\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fresh dollop in the deepest tint, where the knife will reach it.\n    if (P.live && P.plen - P.pos > 40) plan(P, 0.25 + rnd() * 0.2, DOSE[k3 - 1][k3 - 1], 9);\n    else P.dol.push({ x: 14 + rnd() * 36, y: 20 + rnd() * 88, r: 12, h: 3.2, c: DOSE[k3 - 1][k3 - 1], f: 0 });\n  }\n  tick(P, d, cl(k[1], 0.2, 3), k3);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  const { dh, dt, lut, lus } = P;\n  dh.set(P.hf);\n  dt.set(P.tn);\n  // The cream riding on the blade's face shows where the unseen knife is.\n  if (P.live) roll(P, dh, dt, null);\n  // The light reads the surface and its colour through a small blur, so the\n  // LED steps of the height field do not show as grain.\n  blur(dh, P.bl);\n  // A wide blur of the surface: cream that stands above it is a crest and\n  // catches more light, cream below it lies in a fold and gets less.\n  const av = P.av;\n  av.set(dh);\n  for (let i = 0; i \u003c 4; i++) blur(av, P.bl);\n  blur(dt, P.bl);\n  // The colour of each tint concentration: white cream at 0, the deepest\n  // tint at 1, stepped into the bands Tones asks for. Light goes a little\n  // way into cream, so its shadows are a deeper tint rather than grey.\n  // Wet cream (Gloss up) is a little deeper in colour, as anything wet is.\n  // The deeper tints also darken, so three of them stay apart, except round\n  // orange and yellow, where darker reads as brown and olive on LEDs.\n  const t = P.tones, n0 = floor(t) - 1, ft = t - floor(t), n1 = min(2, n0 + 1), hue = H0 + P.hue, g = P.gloss;\n  const hw = (hue - floor(hue) + 0.38) % 1, dk = 0.3 * min(1, abs(hw - 0.5) / 0.11);\n  for (let i = 0; i \u003c 64; i++) {\n    const c = i / 63, v = band(c, n0) + (band(c, n1) - band(c, n0)) * ft;\n    hsv(hue, 0.22 + 0.72 * v + 0.06 * g, (1 - 0.06 * v - dk * v * v) * (1 - 0.1 * g), lut, i * 3);\n    hsv(hue, min(1, 0.4 + 0.6 * v + 0.1 * g), 0.58 - 0.08 * v - 0.14 * g, lus, i * 3);\n  }\n  // The sheen is measured from what a level surface would show, so level\n  // cream stays its colour and only the slopes turned to the light shine.\n  const la = LA + LS * sin((2 * PI * P.lt) / SWING), lr = sqrt(1 - LZ * LZ), LX = lr * cos(la), LY = lr * sin(la);\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  // A broad satin sheen is always there; Gloss adds a narrow wet one on top.\n  const shin = 10 + 70 * g * g, ks = 0.95 * g * 255, s0 = pow(HZ, shin), sk = ks / (1 - s0), fr = P.fr;\n  const b0 = pow(HZ, 6), bk = (0.4 * 255) / (1 - b0);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = y > 0 ? -W : 0, yd = y \u003c H - 1 ? W : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (dh[x \u003c W - 1 ? p + 1 : p] - dh[x > 0 ? p - 1 : p]) * 0.5 * KZ;\n      const gy = (dh[p + yd] - dh[p + yu]) * 0.5 * KZ;\n      const il = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * il, ny = -gy * il, nz = il;\n      const df = nx * LX + ny * LY + nz * LZ, nh = nx * HX + ny * HY + nz * HZ;\n      const f = (df > -WRAP ? (0.85 * (df + WRAP)) / (LZ + WRAP) : 0) * (1 + cl((dh[p] - av[p]) * CAV, -0.45, 0.25)), n2 = nh * nh, sp = (nh > HZ ? ((g > 0.01 ? (pow(nh, shin) - s0) * sk : 0) + (n2 * n2 * n2 - b0) * bk) * (0.5 + 0.5 * fr[p]) : 0) + fr[p] * GLINT;\n      const o = cl(floor(dt[p] * 63 + 0.5), 0, 63) * 3, r = lus[o], gg = lus[o + 1], b = lus[o + 2];\n      display.setPixel(x, y, min(255, r + (lut[o] - r) * f + sp), min(255, gg + (lut[o + 1] - gg) * f + sp * 0.97), min(255, b + (lut[o + 2] - b) * f + sp * 0.92));\n    }\n  }\n}\n","layer":{"id":"layer-cream-swirl","type":"code","name":"cream-swirl","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cream Swirl\n// Family:  cosmetic\n// Idea:    An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the swatch of face cream spread with a spatula in a macro product film\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1\n//\n// Knob 1: Hue. Turns the cream and its tints round the whole colour wheel together, opening on rose.\n// Knob 2: Speed. How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges.\n// Knob 3: Tones. How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path.\n// Knob 4: Gloss. At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight.\n// Buttons: K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The knife's edge is cut into NB bins. Each bin carries the cream it has\n// scraped up and that cream's tint, so a dollop picked up at one end of the\n// blade is laid down as a ribbon behind that end, not across the whole band.\nconst NB = 16;\n// Path points are half an LED apart.\nconst STEP = 0.5, PMAX = 1200;\n// How fast a bin's tint turns to the cream it scrapes, per unit of height\n// scraped; how much of the band's skin is the cream the blade carries; what\n// share of each bin's load slides on to the next bin along the angled blade\n// for each LED travelled.\nconst PICK = 0.3, FILM = 0.45, SLIP = 1.05;\n// The share of the dragged skin left behind for each LED travelled.\nconst DRAG = 0.03;\n// The ridge the spill builds stands at RS height per LED on its flanks, and\n// is never taller than RMAX.\nconst RS = 0.4, RMAX = 3.6;\n// How deep the roll of cream in front of the blade is, in LEDs.\nconst ROLL = 6;\n// How deep the visible skin is: scraping this much off shows the bed.\nconst SKIN = 0.8;\n// The opening hue: rose, not red.\nconst H0 = 0.93;\n\n// A soft light low over the top left, its height LZ and where it sits round\n// the panel, LA radians; it glides LS either way of that and back over SWING\n// seconds at Speed 2, so the sheen slides along the ridges between strokes.\nconst LZ = 0.5, LA = -2.34, LS = 0.9, SWING = 7;\n// How tall the height field looks: a slope of 1 tilts the surface 56 degrees.\nconst KZ = 1.8;\n// The light is a big soft box: it wraps a little way round the cream, so a\n// slope turned from it shades off gently instead of dropping into shadow.\nconst WRAP = 0.3;\n// How much a fold darkens and a crest brightens, per unit of height.\nconst CAV = 0.5;\n// Cream the knife has just laid down holds a wet film that lifts it by this\n// much, fading as it dulls.\nconst GLINT = 26;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The tint concentrations a dollop can come in, for one, two and three tints.\nconst DOSE = [[0.55], [0.4, 0.88], [0.3, 0.62, 1]];\n// Where the colour ramp steps between tints, so folded cream shows distinct\n// bands rather than one blurred pink: thresholds and the level each band shows.\nconst STEPS = [\n  [[0.22], [0, 0.55]],\n  [[0.18, 0.6], [0, 0.42, 0.88]],\n  [[0.14, 0.44, 0.78], [0, 0.3, 0.62, 1]],\n];\nfunction band(c, n) {\n  const [th, lv] = STEPS[n];\n  let v = lv[0];\n  for (let i = 0; i \u003c th.length; i++) v += (lv[i + 1] - lv[i]) * sm((c - th[i]) / 0.1 + 0.5);\n  return v;\n}\n\nexport function setup(params) {\n  params.s = {\n    // Height, the tint of the skin, the tint of the bed under it.\n    hf: new Float32Array(N), tn: new Float32Array(N), ut: new Float32Array(N),\n    dh: new Float32Array(N), dt: new Float32Array(N), bl: new Float32Array(N), av: new Float32Array(N),\n    stamp: new Int32Array(N).fill(-999), sub: 0, fr: new Float32Array(N),\n    path: new Float32Array(PMAX * 2), plen: 0, pos: 0, type: 0, done: 0,\n    m: new Float32Array(NB), c: new Float32Array(NB), ft: new Float32Array(NB), fm: new Float32Array(NB), bm: 0, bc: 0,\n    L: 24, ca: 1, sa: 0, B: 0, tilt: 0, gPh: 0, cc: 0, cA: 0, cP: 8, cB: 0, slip: 1, rh: 0,\n    sp: new Float32Array(8), pause: 0, live: false, force: 1, lt: 0,\n    dol: [], hue: 0, tones: 1, gloss: 0.06, ready: false,\n    lut: new Float32Array(64 * 3), lus: new Float32Array(64 * 3),\n    kx: 0, ky: 0, dx: 0, dy: 1, tx: 1, ty: 0,\n  };\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\n// A round dollop: a soft mound of tint c with a peak where it left the spoon. It is all skin, so a knife that\n// scrapes it away finds the cream it was dropped on.\n// Its colour goes on with the first of it, as deep as the whole dollop will\n// be thick: its thin rim only half covers what it landed on, so a knife that\n// scrapes it off leaves no ring.\nfunction dollop(P, x0, y0, r, ht, c, f, first) {\n  const x1 = max(0, floor(x0 - r)), x2 = min(W - 1, floor(x0 + r) + 1);\n  const y1 = max(0, floor(y0 - r)), y2 = min(H - 1, floor(y0 + r) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const d = ((x - x0) ** 2 + (y - y0) ** 2) / (r * r);\n      if (d >= 1) continue;\n      const p = y * W + x, a = ht * (1 - sqrt(d)) * (1 - d * 0.5);\n      P.hf[p] += a * f;\n      if (first) P.tn[p] += (c - P.tn[p]) * min(1, a / 1.2);\n    }\n}\n\n// The stroke's path as a function of u from 0 to 1, from the parameters\n// startStroke puts in P.sp.\nfunction pathAt(P, u, o) {\n  const s = P.sp;\n  if (P.type === 0) {\n    // An S down (or up) the panel.\n    o[0] = s[0] + s[1] * sin(2 * PI * s[2] * u + s[3]);\n    o[1] = s[4] + (s[5] - s[4]) * u;\n  } else if (P.type === 1) {\n    // A spiral in to a point: the swirl on top of a jar.\n    const a = s[3] + s[4] * u * 2 * PI, r = s[5] + (s[6] - s[5]) * (1 - (1 - u) * (1 - u));\n    o[0] = s[0] + r * cos(a);\n    o[1] = s[1] + r * sin(a) * 1.15;\n  } else {\n    // A bowed smear from off one side to the middle, or right across.\n    const v = 1 - u, mx = (s[0] + s[2]) / 2 + s[4], my = (s[1] + s[3]) / 2 + s[5];\n    o[0] = v * v * s[0] + 2 * v * u * mx + u * u * s[2];\n    o[1] = v * v * s[1] + 2 * v * u * my + u * u * s[3];\n  }\n}\n\nconst TMP = [0, 0];\nfunction startStroke(P, k3) {\n  const s = P.sp, r = rnd(), hf = P.hf;\n  // Heights only matter against each other: keep the cream's mean level at\n  // 0, and cut every band below it, so each stroke has cream to push.\n  let mean = 0;\n  for (let p = 0; p \u003c N; p++) mean += hf[p];\n  mean /= N;\n  for (let p = 0; p \u003c N; p++) hf[p] -= mean;\n  P.type = r \u003c 0.5 ? 0 : r \u003c 0.8 ? 1 : 2;\n  if (P.type === 0) {\n    const down = rnd() \u003c 0.5;\n    s[0] = 22 + rnd() * 20;\n    s[1] = 10 + rnd() * 10;\n    s[2] = 0.6 + rnd() * 0.5;\n    s[3] = rnd() * 2 * PI;\n    s[4] = down ? -14 : H + 14;\n    s[5] = down ? H + 14 : -14;\n    P.L = 34 + rnd() * 10;\n    P.B = -0.9 + rnd() * 0.5;\n  } else if (P.type === 1) {\n    s[0] = 26 + rnd() * 12;\n    s[1] = 36 + rnd() * 56;\n    s[3] = rnd() * 2 * PI;\n    s[4] = (rnd() \u003c 0.5 ? -1 : 1) * (1.3 + rnd() * 0.5);\n    s[5] = 25 + rnd() * 6;\n    s[6] = 3;\n    P.L = 18 + rnd() * 5;\n    P.B = -0.6 + rnd() * 0.4;\n  } else {\n    const across = rnd() \u003c 0.4, side = rnd() \u003c 0.5 ? -1 : 1;\n    if (across) {\n      s[0] = side \u003c 0 ? -14 : W + 14;\n      s[2] = side \u003c 0 ? W + 14 : -14;\n      s[1] = 14 + rnd() * 100;\n      s[3] = cl(s[1] + (rnd() - 0.5) * 40, 10, H - 10);\n    } else {\n      s[0] = 32 + side * (34 + rnd() * 6);\n      s[1] = 10 + rnd() * 108;\n      s[2] = 32 - side * (rnd() * 10);\n      s[3] = cl(s[1] + (rnd() - 0.5) * 70, 18, H - 18);\n    }\n    s[4] = 0;\n    s[5] = (rnd() - 0.5) * 36;\n    P.L = 28 + rnd() * 8;\n    P.B = -0.8 + rnd() * 0.5;\n  }\n  // Lay the path down half an LED a point.\n  const path = P.path;\n  pathAt(P, 0, TMP);\n  let px = TMP[0], py = TMP[1], n = 1;\n  path[0] = px;\n  path[1] = py;\n  for (let i = 1; i \u003c= 4000 && n \u003c PMAX; i++) {\n    pathAt(P, i / 4000, TMP);\n    const d = sqrt((TMP[0] - px) ** 2 + (TMP[1] - py) ** 2);\n    if (d >= STEP) {\n      px += ((TMP[0] - px) * STEP) / d;\n      py += ((TMP[1] - py) * STEP) / d;\n      path[n * 2] = px;\n      path[n * 2 + 1] = py;\n      n++;\n    }\n  }\n  P.plen = (n - 1) * STEP;\n  P.pos = 0;\n  // The blade sits at an angle to its track, tilted a little and bowed, so\n  // the band is a shallow trough, and it chatters as it goes, leaving soft\n  // folds across the band. A slow knife glides and cuts shallow; a fast one\n  // chatters harder and digs deeper, so it throws a taller ridge.\n  const al = (rnd() - 0.5) * 0.6;\n  P.ca = cos(al);\n  P.sa = sin(al);\n  P.tilt = (rnd() - 0.5) * 0.6;\n  P.cc = 0.2 + rnd() * 0.4;\n  P.cA = (0.13 + rnd() * 0.1) * (0.35 + 0.65 * P.force);\n  P.B -= 0.35 * (P.force - 1);\n  P.cP = 11 + rnd() * 5;\n  P.cB = (rnd() \u003c 0.5 ? -1 : 1) * (3 + rnd() * 4);\n  P.gPh = rnd() * 2 * PI;\n  P.slip = rnd() \u003c 0.5 ? -1 : 1;\n  if (P.type === 1) {\n    // A swirl throws its cream outwards.\n    locate(P, 6);\n    P.slip = P.tx * (P.kx - s[0]) + P.ty * (P.ky - s[1]) > 0 ? 1 : -1;\n  }\n  P.m.fill(0);\n  P.c.fill(0);\n  P.ft.fill(0);\n  P.fm.fill(0);\n  P.rh = 0;\n  P.live = true;\n  // Every stroke goes through fresh dollops dropped a little way along: one\n  // for one tint, two or three when three tints are folded in.\n  const nd = k3 === 1 ? 1 : k3 === 2 ? (rnd() \u003c 0.5 ? 2 : 1) : rnd() \u003c 0.4 ? 3 : 2;\n  for (let i = 0; i \u003c nd; i++) plan(P, 0.1 + rnd() * 0.45, rnd() \u003c 0.4 ? 0 : DOSE[k3 - 1][floor(rnd() * k3)], (10 + rnd() * 3) / sqrt(nd));\n}\n\n// A dollop waiting to fall at a point on the path ahead of the knife.\nfunction plan(P, u, c, r) {\n  if (P.dol.length > 3) return;\n  const i = floor((P.pos + (P.plen - P.pos) * u) / STEP);\n  const x = P.path[i * 2], y = P.path[i * 2 + 1];\n  P.dol.push({ x: cl(x + (rnd() - 0.5) * 6, 6, W - 7), y: cl(y + (rnd() - 0.5) * 6, 8, H - 9), r, h: 2.6 + rnd() * 0.6, c, f: 0 });\n}\n\n// The knife's point, its direction of travel and the blade's direction.\nfunction locate(P, pos) {\n  const path = P.path, last = floor(P.plen / STEP);\n  const i = cl(floor(pos / STEP), 0, last - 1), f = cl(pos / STEP - i, 0, 1);\n  P.kx = path[i * 2] + (path[i * 2 + 2] - path[i * 2]) * f;\n  P.ky = path[i * 2 + 1] + (path[i * 2 + 3] - path[i * 2 + 1]) * f;\n  const a = max(0, i - 3), b = min(last, i + 4);\n  let dx = path[b * 2] - path[a * 2], dy = path[b * 2 + 1] - path[a * 2 + 1];\n  const d = sqrt(dx * dx + dy * dy) || 1;\n  dx /= d;\n  dy /= d;\n  P.dx = dx;\n  P.dy = dy;\n  P.tx = -dy * P.ca - dx * P.sa;\n  P.ty = dx * P.ca - dy * P.sa;\n}\n\n// The load of the blade at a point a along it and the tint it drags there,\n// read between the bins so what it lays down has no seams.\nfunction load(P, a) {\n  const fb = cl(((a + P.L / 2) / P.L) * NB - 0.5, 0, NB - 1), j = min(NB - 2, floor(fb)), f = fb - j;\n  P.bm = P.m[j] + (P.m[j + 1] - P.m[j]) * f;\n  P.bc = P.ft[j] + (P.ft[j + 1] - P.ft[j]) * f;\n}\n\n// The ridge across its width r (0 at the band's edge, 1 at its foot): a\n// steep inner face where the blade cut it, a long outer slope.\nconst ridge = (r) => (r \u003c 0.3 ? sm(r / 0.3) : 1 - sm((r - 0.3) / 0.7));\n\n// One move of the knife by ds LEDs. Each LED is worked once a pass, as the\n// back of the blade leaves it: what stood above the blade goes into the\n// bin over it, and the band, the ridge beside it and their tints are laid\n// down.\nfunction knife(P, ds) {\n  P.pos += ds;\n  P.sub++;\n  if (P.pos >= P.plen) return lift(P);\n  locate(P, P.pos);\n  const { hf, tn, ut, m, c, ft, fm, stamp, L } = P, hl = L / 2, sl = P.slip;\n  for (let j = 0; j \u003c NB; j++) fm[j] *= 1 - DRAG * ds;\n  const kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  // Pressure comes on over the first 8 LEDs and goes off over the last 6.\n  const pr = sm(P.pos / 8) * sm((P.plen - P.pos) / 6);\n  const rw = max(3, (2 * P.rh) / RS), end = sl > 0 ? NB - 1 : 0, lvEnd = P.B + P.tilt * sl + P.cc;\n  const rx = abs(tx) * (hl + rw) + 3, ry = abs(ty) * (hl + rw) + 3;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, s = (tx * oy - ty * ox) / det;\n      // On a curve the LEDs on the outside move further than ds, so the\n      // strip is wider than a step and the stamp keeps it to once a pass.\n      if (s \u003c -3 - ds || s >= -0.3) continue;\n      const a = (ox * dy - oy * dx) / det, as = a * sl, p = y * W + x;\n      if (as \u003c= -hl - 1.5 || as >= hl + rw || P.sub - stamp[p] \u003c 40) continue;\n      stamp[p] = P.sub;\n      const ho = hf[p], to = tn[p];\n      if (as \u003c hl && as > -hl) {\n        // The chatter marks bow back towards the blade's ends, as a flexible\n        // blade leaves them, and come and go along it.\n        const u = a / hl, w = (2 * PI * (P.pos + P.cB * u * u)) / P.cP;\n        const lv = P.B + P.tilt * u + P.cc * u * u + P.cA * (0.65 + 0.35 * sin(a * 0.31 + P.gPh)) * (sin(w) + 0.5 * sin(w * 1.63 + 1.3)), e = ho - lv;\n        const j = cl(floor(((a + hl) / L) * NB), 0, NB - 1);\n        if (e > 0) {\n          m[j] += e * pr;\n          c[j] += (to - c[j]) * min(1, e * PICK * pr);\n          // The skin of tint the blade drags stays in its own lane and is\n          // mixed by how much of each colour it gathered, so a dollop\n          // becomes a long ribbon that pales as white cream dilutes it.\n          fm[j] += e * pr;\n          ft[j] += ((to - ft[j]) * e * pr) / fm[j];\n        }\n        // Under what was scraped off lies the bed; over it the blade leaves a\n        // film of the cream it carries.\n        const ex = e > 0 ? to + (ut[p] - to) * min(1, e / SKIN) : to;\n        load(P, a);\n        const tw = ex + (P.bc - ex) * FILM * min(1, P.bm);\n        hf[p] = ho + (lv - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (tw - to) * pr;\n        ut[p] += (tw - ut[p]) * pr * 0.4;\n      } else {\n        // Beside the band: the ridge on the spill side, a thin lip of\n        // squeezed cream on the other.\n        const hr = as > 0 ? lvEnd + P.rh * ridge((as - hl) / rw) : P.B - P.tilt * sl + 0.2 * P.rh * ridge((-as - hl) / 1.5);\n        if (hr \u003c= ho) continue;\n        const k = pr * min(1, (hr - ho) / SKIN), ce = as > 0 ? c[end] : to;\n        hf[p] = ho + (hr - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (ce - to) * k;\n        ut[p] += (ce - ut[p]) * k;\n      }\n    }\n  // The load slides along the angled blade and spills off its end, and the\n  // ridge stands as tall as the cream spilling into it.\n  const f = min(0.9, SLIP * ds);\n  for (let k = 1; k \u003c NB; k++) {\n    const j = sl > 0 ? NB - 1 - k : k, to = j + sl, a = m[j] * f;\n    if (a \u003c= 0) continue;\n    c[to] = (c[to] * m[to] + c[j] * a) / (m[to] + a);\n    m[to] += a;\n    m[j] -= a;\n  }\n  const spill = m[end] * f;\n  m[end] -= spill;\n  const target = min(RMAX, sqrt(0.75 * (spill / ds) * RS));\n  P.rh += (target - P.rh) * min(1, ds * 0.25);\n}\n\n// The knife lifts: what it still carries stays where it stopped, a raised\n// lip across the end of the band.\nfunction lift(P) {\n  locate(P, P.plen);\n  roll(P, P.hf, P.tn, P.ut);\n  P.live = false;\n  P.done++;\n  P.pause = 0.15 + rnd() * 0.2;\n}\n\n// The cream on the blade's face as a rounded roll in front of it, laid into\n// (h, t): for the picture while the knife moves, for good when it lifts.\nfunction roll(P, h, t, u) {\n  const hl = P.L / 2, kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  const rx = abs(tx) * hl + ROLL + 2, ry = abs(ty) * hl + ROLL + 2;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, a = (ox * dy - oy * dx) / det, s = (tx * oy - ty * ox) / det;\n      if (s \u003c= -0.3 || s >= ROLL || a \u003c= -hl || a >= hl) continue;\n      load(P, a);\n      // A bin's load spread as a mound ROLL deep, rounded off at the blade's\n      // ends: as tall as that much cream stands, and never a wall.\n      const ht = min(2.4, sqrt((P.bm * NB) / P.L) * 0.7) * sin((PI * (s + 0.3)) / (ROLL + 0.3)) * sqrt(sin((PI * (a + hl)) / P.L));\n      const p = y * W + x;\n      if (P.B + ht \u003c= h[p]) continue;\n      const k = min(1, (P.B + ht - h[p]) / SKIN);\n      h[p] = P.B + ht;\n      t[p] += (P.bc - t[p]) * k;\n      if (u) u[p] += (P.bc - u[p]) * k;\n    }\n}\n\n// One frame of the studio: the pause between strokes, dollops falling, the knife.\nfunction tick(P, dt, speed, k3) {\n  for (const d of P.dol) {\n    if (d.f >= 1) continue;\n    const g = min(1 - d.f, dt * 2.5 * max(0.6, speed / 2));\n    dollop(P, d.x, d.y, d.r, d.h, d.c, g, d.f === 0);\n    d.f += g;\n  }\n  // Freshly worked cream glistens; left alone it dulls to a satin over\n  // about ten seconds at Speed 2.\n  P.lt += dt * speed * 0.5;\n  const fr = P.fr, k = 1 - dt * 0.07 * max(0.5, speed);\n  for (let p = 0; p \u003c N; p++) fr[p] *= k;\n  if (!P.live) {\n    P.pause -= dt * max(0.5, speed / 2);\n    if (P.pause \u003c= 0) startStroke(P, k3);\n  } else {\n    let ds = dt * speed * 10;\n    while (ds > 1e-6) {\n      const st = min(ds, 0.5);\n      knife(P, st);\n      ds -= st;\n      if (!P.live) break;\n    }\n  }\n  // A dollop is forgotten once it has fallen and the knife has gone on.\n  if (P.dol.length && P.dol[0].f >= 1 && (!P.live || P.dol.length > 2)) P.dol.shift();\n}\n\n// The first frame already shows cream that has been worked: a level layer\n// and three strokes through dollops of tint.\nfunction prime(P, k3) {\n  const { hf } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hf[y * W + x] = 0.3 * sin(x * 0.11 + y * 0.05) * sin(y * 0.07 - x * 0.04);\n  P.pause = 0;\n  while (P.done \u003c 3) tick(P, 1 / 30, 2, k3);\n  while (!P.live) tick(P, 1 / 30, 2, k3);\n  // Start the live stroke a fifth of the way along, its dollops down.\n  for (const d of P.dol) if (d.f \u003c 1) (dollop(P, d.x, d.y, d.r, d.h, d.c, 1 - d.f, d.f === 0), (d.f = 1));\n  while (P.live && P.pos \u003c P.plen * 0.2) tick(P, 1 / 30, 2, k3);\n  P.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.tones = cl(k[2], 1, 3);\n  P.gloss = cl(k[3], 0, 1);\n  const k3 = cl(Math.round(P.tones), 1, 3);\n  P.force = cl(k[1], 0.2, 3) / 2;\n  if (!P.ready) prime(P, k3);\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fresh dollop in the deepest tint, where the knife will reach it.\n    if (P.live && P.plen - P.pos > 40) plan(P, 0.25 + rnd() * 0.2, DOSE[k3 - 1][k3 - 1], 9);\n    else P.dol.push({ x: 14 + rnd() * 36, y: 20 + rnd() * 88, r: 12, h: 3.2, c: DOSE[k3 - 1][k3 - 1], f: 0 });\n  }\n  tick(P, d, cl(k[1], 0.2, 3), k3);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  const { dh, dt, lut, lus } = P;\n  dh.set(P.hf);\n  dt.set(P.tn);\n  // The cream riding on the blade's face shows where the unseen knife is.\n  if (P.live) roll(P, dh, dt, null);\n  // The light reads the surface and its colour through a small blur, so the\n  // LED steps of the height field do not show as grain.\n  blur(dh, P.bl);\n  // A wide blur of the surface: cream that stands above it is a crest and\n  // catches more light, cream below it lies in a fold and gets less.\n  const av = P.av;\n  av.set(dh);\n  for (let i = 0; i \u003c 4; i++) blur(av, P.bl);\n  blur(dt, P.bl);\n  // The colour of each tint concentration: white cream at 0, the deepest\n  // tint at 1, stepped into the bands Tones asks for. Light goes a little\n  // way into cream, so its shadows are a deeper tint rather than grey.\n  // Wet cream (Gloss up) is a little deeper in colour, as anything wet is.\n  // The deeper tints also darken, so three of them stay apart, except round\n  // orange and yellow, where darker reads as brown and olive on LEDs.\n  const t = P.tones, n0 = floor(t) - 1, ft = t - floor(t), n1 = min(2, n0 + 1), hue = H0 + P.hue, g = P.gloss;\n  const hw = (hue - floor(hue) + 0.38) % 1, dk = 0.3 * min(1, abs(hw - 0.5) / 0.11);\n  for (let i = 0; i \u003c 64; i++) {\n    const c = i / 63, v = band(c, n0) + (band(c, n1) - band(c, n0)) * ft;\n    hsv(hue, 0.22 + 0.72 * v + 0.06 * g, (1 - 0.06 * v - dk * v * v) * (1 - 0.1 * g), lut, i * 3);\n    hsv(hue, min(1, 0.4 + 0.6 * v + 0.1 * g), 0.58 - 0.08 * v - 0.14 * g, lus, i * 3);\n  }\n  // The sheen is measured from what a level surface would show, so level\n  // cream stays its colour and only the slopes turned to the light shine.\n  const la = LA + LS * sin((2 * PI * P.lt) / SWING), lr = sqrt(1 - LZ * LZ), LX = lr * cos(la), LY = lr * sin(la);\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  // A broad satin sheen is always there; Gloss adds a narrow wet one on top.\n  const shin = 10 + 70 * g * g, ks = 0.95 * g * 255, s0 = pow(HZ, shin), sk = ks / (1 - s0), fr = P.fr;\n  const b0 = pow(HZ, 6), bk = (0.4 * 255) / (1 - b0);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = y > 0 ? -W : 0, yd = y \u003c H - 1 ? W : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (dh[x \u003c W - 1 ? p + 1 : p] - dh[x > 0 ? p - 1 : p]) * 0.5 * KZ;\n      const gy = (dh[p + yd] - dh[p + yu]) * 0.5 * KZ;\n      const il = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * il, ny = -gy * il, nz = il;\n      const df = nx * LX + ny * LY + nz * LZ, nh = nx * HX + ny * HY + nz * HZ;\n      const f = (df > -WRAP ? (0.85 * (df + WRAP)) / (LZ + WRAP) : 0) * (1 + cl((dh[p] - av[p]) * CAV, -0.45, 0.25)), n2 = nh * nh, sp = (nh > HZ ? ((g > 0.01 ? (pow(nh, shin) - s0) * sk : 0) + (n2 * n2 * n2 - b0) * bk) * (0.5 + 0.5 * fr[p]) : 0) + fr[p] * GLINT;\n      const o = cl(floor(dt[p] * 63 + 0.5), 0, 63) * 3, r = lus[o], gg = lus[o + 1], b = lus[o + 2];\n      display.setPixel(x, y, min(255, r + (lut[o] - r) * f + sp), min(255, gg + (lut[o + 1] - gg) * f + sp * 0.97), min(255, b + (lut[o + 2] - b) * f + sp * 0.92));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the cream and its tints round the whole colour wheel together, opening on rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges."},{"name":"Tones","min":1,"max":3,"about":"How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path."},{"name":"Gloss","min":0,"max":1,"about":"At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight."}],"start":[0,2,1,0.06],"measures":{"motion":0.0374,"detail":0.0161,"edges":0.0277,"complexity":1.8116,"coverage":1,"colour":0.1658,"drift":0.0429},"knobResponse":[0.2103,0.0689,0.1027,0.1086]},{"slug":"crossroads","title":"Crossroads","family":"city","round":17,"note":"드론으로 곧장 내려다본 밤 네거리예요. 차는 전조등과 미등으로만 보이고, 나트륨등 웅덩이 사이에서 신호가 줄을 세웠다 풀며, 모든 차가 서면 사람들이 건널목 넷을 한꺼번에 건너요.","idea":"A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","layer":{"id":"layer-crossroads","type":"code","name":"crossroads","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads."},{"name":"Pace","min":0.2,"max":3,"about":"The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps."},{"name":"Hour","min":0,"max":1,"about":"At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets."},{"name":"Rain","min":0,"max":1,"about":"Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas."}],"start":[0,2,0,0.06],"measures":{"motion":0.2133,"detail":0.0621,"edges":0.4808,"complexity":0.9935,"coverage":0.2564,"colour":0.385,"drift":0.0485},"knobResponse":[0.05,0.0417,0.0482,0.062]},{"slug":"curve-shortening","title":"Curve Shortening","family":"line","round":36,"note":"굵은 나선이나 접힌 지렁이, 팔 여럿인 별 같은 닫힌 곡선 하나가 점마다 곡률만큼의 빠르기로 법선을 따라 움직여요. 곡선은 제 몸에 한 번도 닿지 않고 풀려 둥글어진 뒤 한 점으로 사라지고, 넓이는 모양과 상관없이 흐름 시간 1 에 2π 씩 줄며, 흰 점으로 찍힌 변곡점은 둘씩 만나 함께 없어져요. K3 은 나선을 2바퀴에서 3.5바퀴까지 감고, K1 을 누르면 남은 흐름이 0.6초 만에 끝나요.","idea":"One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.","buttons":"K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.","code":"// ===== Patternflow pattern =====\n// Title:   Curve Shortening\n// Family:  line\n// Idea:    One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: curve-shortening flow, Grayson's theorem (Matthew Grayson, 1987), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1\n//\n// Knob 1: Hue. The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it.\n// Knob 2: Speed. At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long.\n// Knob 3: Wind. How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve.\n// Knob 4: Trace. At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline.\n// Buttons: K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.\n\nconst W = 64, H = 128, NMAX = 1500, NMIN = 28, SNAPS = 10, SNAPN = 180;\n// Flow time is in LEDs squared: the area falls 2 pi of them per unit. A curve\n// lives LIFE beats of the clock; a beat is a second at Speed 2.\nconst LIFE = 5.6, DRAW0 = 1.9, DRAW = 0.95, FLASH = 0.6, DS = 1.3;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, random, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// ---- Shapes. Each is a centre line with a band width, or a polygon. ----\n\nfunction seg(out, x0, y0, x1, y1) {\n  const k = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.5));\n  for (let i = 0; i \u003c k; i++) out.push(x0 + ((x1 - x0) * i) / k, y0 + ((y1 - y0) * i) / k);\n}\n\n// A spiral on a stadium: half turns over the top and under the bottom, 2h\n// apart, joined by straight runs. Each half turn is a true semicircle, the\n// top ones centred on cx with radius r0 + k p, the bottom ones half a pitch\n// to the right with radius r0 + (k + 1/2) p, so the arcs meet the runs with\n// no corner and the band gains p every turn. It uses the tall panel the way\n// a round spiral cannot.\nfunction spiral(T) {\n  const p = 57 / (2 * T + 0.2), w = 0.45 * p, r0 = w / 2 + 1.5, h = 30, cx = 32, cy = 64, C = [];\n  const halves = 2 * T;\n  seg(C, cx + r0, cy + h, cx + r0, cy - h);\n  for (let k = 0; k \u003c halves; k++) {\n    const top = k % 2 === 0, R = r0 + (k * p) / 2, xc = top ? cx : cx + p / 2, yc = top ? cy - h : cy + h;\n    const f1 = min(PI, (halves - k) * PI);\n    for (let f = 0; f \u003c f1; f += 0.6 / R) C.push(xc + (top ? 1 : -1) * R * cos(f), yc + (top ? -1 : 1) * R * sin(f));\n    const x = xc + (top ? 1 : -1) * R * cos(f1);\n    if (f1 \u003c PI) C.push(x, yc + (top ? -1 : 1) * R * sin(f1));\n    else seg(C, x, yc, x, top ? cy + h : cy - h);\n  }\n  return { C, w };\n}\n\n// Two round spirals, one over the other, joined through the middle of the\n// panel as an S: the outer end of the upper one meets its mirror image there.\nfunction coils(T) {\n  const k = T \u003c 2.5 ? 2 : 3, p = 28.5 / (k + 0.55), w = 0.62 * p, r0 = 0.3 * p + 1.5, F = 2 * PI * k + PI / 2;\n  const Rm = r0 + (p * F) / (2 * PI), cyA = 64 - Rm, A = [];\n  for (let f = 0; f \u003c F; f += 0.03) {\n    const r = r0 + (p * f) / (2 * PI);\n    A.push(32 + r * cos(f), cyA + r * sin(f));\n  }\n  const C = A.slice();\n  C.push(32, 64);\n  for (let i = A.length - 2; i >= 0; i -= 2) C.push(64 - A[i], 128 - A[i + 1]);\n  return { C, w };\n}\n\n// A worm folded into m runs across the panel, joined by hairpin bends.\nfunction worm(T) {\n  const m = 2 + round(2 * T), p = 118 / m, w = 0.6 * p, xl = 3 + p / 2 + w / 2, xr = 61 - p / 2 - w / 2, C = [];\n  for (let j = 0; j \u003c m; j++) {\n    const y = 5 + p / 2 + j * p, right = j % 2 === 0;\n    seg(C, right ? xl : xr, y, right ? xr : xl, y);\n    if (j === m - 1) {\n      C.push(right ? xr : xl, y);\n      break;\n    }\n    const xc = right ? xr : xl, yc = y + p / 2;\n    for (let a = 0; a \u003c PI; a += 0.06) C.push(xc + (right ? 1 : -1) * (p / 2) * sin(a), yc - (p / 2) * cos(a));\n  }\n  return { C, w };\n}\n\n// A star: r(t) = R (0.34 + 0.66 g(k t)), one arm per lobe of g, stretched\n// 1.45 times up the panel. Being a graph over the angle, before and after the\n// stretch, it cannot cross itself.\nfunction star(T) {\n  const k = 2 + round(2 * T), R = 29.5, P = [];\n  for (let i = 0; i \u003c 2400; i++) {\n    const t = (2 * PI * i) / 2400, g = ((1 + cos(k * t)) / 2) ** 1.7, r = R * (0.34 + 0.66 * g);\n    P.push(32 + r * sin(t), 64 - 1.45 * r * cos(t));\n  }\n  return P;\n}\n\n// The outline of a band of width w round a centre line, with round ends.\nfunction band(C, w) {\n  const m = C.length >> 1, L = [], Rt = [], hw = w / 2;\n  const nrm = (i) => {\n    const a = max(0, i - 1), b = min(m - 1, i + 1);\n    let tx = C[2 * b] - C[2 * a], ty = C[2 * b + 1] - C[2 * a + 1];\n    const l = sqrt(tx * tx + ty * ty) || 1;\n    return [tx / l, ty / l];\n  };\n  for (let i = 0; i \u003c m; i++) {\n    const [tx, ty] = nrm(i);\n    L.push(C[2 * i] - ty * hw, C[2 * i + 1] + tx * hw);\n    Rt.push(C[2 * i] + ty * hw, C[2 * i + 1] - tx * hw);\n  }\n  const P = L.slice();\n  const cap = (i, s) => {\n    const [tx, ty] = nrm(i), nx = -ty, ny = tx;\n    for (let a = 0.12; a \u003c PI; a += 0.12) {\n      const c = cos(a), d = sin(a);\n      P.push(C[2 * i] + s * hw * (c * nx + d * tx), C[2 * i + 1] + s * hw * (c * ny + d * ty));\n    }\n  };\n  cap(m - 1, 1);\n  for (let i = m - 1; i >= 0; i--) P.push(Rt[2 * i], Rt[2 * i + 1]);\n  cap(0, -1);\n  return P;\n}\n\nfunction area(X, Y, n) {\n  let a = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) a += X[j] * Y[i] - X[i] * Y[j];\n  return a / 2;\n}\n\n// Put n points round the closed polygon P at equal steps of arc length,\n// wound so that the area comes out positive.\nfunction resample(P, np, X, Y, n) {\n  const m = np, len = new Float64Array(m + 1);\n  for (let i = 0; i \u003c m; i++) {\n    const j = (i + 1) % m;\n    len[i + 1] = len[i] + sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  const L = len[m];\n  let s = 0;\n  for (let k = 0; k \u003c n; k++) {\n    const target = (L * k) / n;\n    while (s \u003c m - 1 && len[s + 1] \u003c target) s++;\n    const j = (s + 1) % m, u = (target - len[s]) / (len[s + 1] - len[s] || 1);\n    X[k] = P[2 * s] + u * (P[2 * j] - P[2 * s]);\n    Y[k] = P[2 * s + 1] + u * (P[2 * j + 1] - P[2 * s + 1]);\n  }\n  if (area(X, Y, n) \u003c 0)\n    for (let a = 0, b = n - 1; a \u003c b; a++, b--) {\n      let t = X[a];\n      X[a] = X[b];\n      X[b] = t;\n      t = Y[a];\n      Y[a] = Y[b];\n      Y[b] = t;\n    }\n  return L;\n}\n\nfunction perimeter(X, Y, n) {\n  let L = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) L += sqrt((X[i] - X[j]) ** 2 + (Y[i] - Y[j]) ** 2);\n  return L;\n}\n\n// A new curve: the spiral first, then any of the four but the one just\n// shown, at 70 to 100% size somewhere on the panel, mirrored at random.\nfunction build(S, wind, first) {\n  let kind = 0;\n  if (!first) {\n    kind = floor(random() * 4);\n    if (kind === S.kind) kind = (kind + 1 + floor(random() * 3)) % 4;\n  }\n  S.kind = kind;\n  S.wind = wind;\n  let P;\n  if (kind === 1) P = star(wind);\n  else {\n    const { C, w } = kind === 0 ? spiral(wind) : kind === 2 ? worm(wind) : coils(wind);\n    P = band(C, w);\n  }\n  const sc = first ? 1 : 0.7 + 0.3 * random(), fx = random() \u003c 0.5 ? -1 : 1, fy = random() \u003c 0.5 ? -1 : 1;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c P.length; i += 2) {\n    P[i] = 32 + fx * sc * (P[i] - 32);\n    P[i + 1] = 64 + fy * sc * (P[i + 1] - 64);\n    x0 = min(x0, P[i]);\n    x1 = max(x1, P[i]);\n    y0 = min(y0, P[i + 1]);\n    y1 = max(y1, P[i + 1]);\n  }\n  // The first curve stands in the middle; later ones slide anywhere they\n  // still fit between 1.5 and 62.5 across, 1.5 and 126.5 down.\n  const dx = first ? 32 - (x0 + x1) / 2 : 1.5 - x0 + random() * max(0, 61 - (x1 - x0));\n  const dy = first ? 64 - (y0 + y1) / 2 : 1.5 - y0 + random() * max(0, 125 - (y1 - y0));\n  for (let i = 0; i \u003c P.length; i += 2) (P[i] += dx), (P[i + 1] += dy);\n  const np = P.length >> 1;\n  let L = 0;\n  for (let i = 0; i \u003c np; i++) {\n    const j = (i + 1) % np;\n    L += sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  S.n = min(NMAX, max(NMIN, round(L / DS)));\n  resample(P, np, S.X, S.Y, S.n);\n  S.A0 = area(S.X, S.Y, S.n);\n  S.flowT = 0;\n  S.phase = 0;\n  S.pt = 0;\n  S.dur = first ? DRAW0 : DRAW;\n  S.ns = 0;\n  S.rush = 0;\n  curvature(S);\n}\n\n// One explicit step of the flow. Vertex i moves along the normal of the\n// chord from i-1 to i+1 by 2 phi / |chord| per unit time, phi the turning\n// angle at i: that is the curvature, and it makes the area fall by exactly\n// phi, so the whole polygon loses sum(phi) = 2 pi per unit time. A small\n// slide along the same chord evens out the spacing and leaves the area alone.\n// The step is at most 0.3 of the square of the shortest half chord, under the\n// 0.5 where the explicit scheme starts to ring. Returns the time it took.\nfunction step(S, todo) {\n  const { X, Y, VX, VY, TX, TY } = S, n = S.n;\n  let mc = 1e9, ml = 1e9, Ml = 0, L = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    const phi = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n    const cx = X[b] - X[a], cy = Y[b] - Y[a], c2 = cx * cx + cy * cy || 1e-12;\n    const l1 = sqrt(ex * ex + ey * ey), l2 = sqrt(fx * fx + fy * fy), g = (0.3 * (l2 - l1)) / sqrt(c2);\n    VX[i] = (-2 * phi * cy) / c2;\n    VY[i] = (2 * phi * cx) / c2;\n    TX[i] = g * cx;\n    TY[i] = g * cy;\n    if (c2 \u003c mc) mc = c2;\n    if (l2 \u003c ml) ml = l2;\n    if (l2 > Ml) Ml = l2;\n    L += l2;\n  }\n  const h = min(todo, 0.075 * mc);\n  for (let i = 0; i \u003c n; i++) {\n    X[i] += h * VX[i] + TX[i];\n    Y[i] += h * VY[i] + TY[i];\n  }\n  S.ml = ml;\n  S.Ml = Ml;\n  S.L = L;\n  return h;\n}\n\n// Fresh points at even spacing. Points laid on the old edges cut the corners\n// and lose a little area, so every point then steps out along its normal by\n// the area lost over half the sum of the chords, which puts it back to first\n// order: a remesh must not move the area clock. When the curve has shrunk\n// there are fewer points, the spacing near DS until the curve is down to NMIN\n// points; edges squeezed under 0.45 of the spacing at a retracting tip, or\n// stretched past 1.8 along an arc pushing outward, force one.\nfunction remesh(S, force) {\n  const { X, Y } = S, L = perimeter(X, Y, S.n), want = max(NMIN, min(NMAX, round(L / DS)));\n  if (!force && want >= 0.8 * S.n && want \u003c= 1.25 * S.n) return;\n  const A = area(X, Y, S.n), P = S.P, np = S.n;\n  for (let i = 0; i \u003c np; i++) (P[2 * i] = X[i]), (P[2 * i + 1] = Y[i]);\n  S.n = want;\n  resample(P, np, X, Y, want);\n  const n = want, VX = S.VX, VY = S.VY;\n  let half = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0, cx = X[b] - X[a], cy = Y[b] - Y[a], c = sqrt(cx * cx + cy * cy) || 1e-9;\n    VX[i] = cy / c;\n    VY[i] = -cx / c;\n    half += c / 2;\n  }\n  const off = (A - area(X, Y, n)) / half;\n  for (let i = 0; i \u003c n; i++) (X[i] += off * VX[i]), (Y[i] += off * VY[i]);\n  S.ml = S.Ml = L / n;\n}\n\n// Signed curvature, summed over seven neighbours so that straight runs read\n// as zero, and the inflection points: where a run of clearly convex points\n// meets a run of clearly concave ones. Runs that never pass 0.06 radians of\n// turning do not count, so a nearly straight stretch does not flicker.\nfunction curvature(S) {\n  const { X, Y, K, PH } = S, n = S.n;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    PH[i] = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n  }\n  let s = 0;\n  for (let j = -3; j \u003c= 3; j++) s += PH[(j + n) % n];\n  for (let i = 0; i \u003c n; i++) {\n    K[i] = s;\n    s += PH[(i + 4) % n] - PH[(i - 3 + n) % n];\n  }\n  // Runs of one sign, starting where the sign changes.\n  const sg = (v) => (v > 0.025 ? 1 : v \u003c -0.025 ? -1 : 0);\n  let start = -1;\n  for (let i = 0; i \u003c n; i++)\n    if (sg(K[i]) && sg(K[i]) !== sg(K[(i - 1 + n) % n])) {\n      start = i;\n      break;\n    }\n  S.ni = 0;\n  if (start \u003c 0) return;\n  const runs = [];\n  let i = 0;\n  while (i \u003c n) {\n    const p = (start + i) % n, v = sg(K[p]);\n    if (!v) {\n      i++;\n      continue;\n    }\n    let j = i, peak = 0;\n    while (j \u003c n && sg(K[(start + j) % n]) === v) (peak = max(peak, abs(K[(start + j) % n]))), j++;\n    if (peak > 0.06) {\n      const last = runs[runs.length - 1];\n      if (last && last.v === v) last.e = j - 1;\n      else runs.push({ v, b: i, e: j - 1 });\n    }\n    i = j;\n  }\n  if (runs.length > 1 && runs[0].v === runs[runs.length - 1].v) {\n    runs[0].b = runs[runs.length - 1].b - n;\n    runs.pop();\n  }\n  if (runs.length \u003c 2) return;\n  for (let r = 0; r \u003c runs.length && S.ni \u003c 64; r++) {\n    const A = runs[r], B = runs[(r + 1) % runs.length];\n    let e = A.e, b = B.b;\n    if (b \u003c= e) b += n;\n    // The zero crossing between the end of one run and the start of the next.\n    let q = e;\n    for (let t = e; t \u003c b; t++) if (K[(start + t) % n] * A.v > 0 && K[(start + t + 1) % n] * A.v \u003c= 0) q = t;\n    const p0 = (start + q + n) % n, p1 = (p0 + 1) % n, k0 = K[p0], k1 = K[p1];\n    const u = k0 !== k1 ? cl(k0 / (k0 - k1), 0, 1) : 0.5;\n    S.IX[S.ni] = X[p0] + u * (X[p1] - X[p0]);\n    S.IY[S.ni] = Y[p0] + u * (Y[p1] - Y[p0]);\n    S.IQ[S.ni++] = p0;\n  }\n}\n\nfunction snapshot(S) {\n  if (S.ns >= SNAPS) return;\n  const k = max(1, ceil(S.n / SNAPN)), o = S.ns * SNAPN * 2;\n  let m = 0;\n  for (let i = 0; i \u003c S.n && m \u003c SNAPN; i += k, m++) (S.SN[o + 2 * m] = S.X[i]), (S.SN[o + 2 * m + 1] = S.Y[i]);\n  S.SM[S.ns++] = m;\n}\n\nfunction setup(params) {\n  params.s = {\n    X: new Float64Array(NMAX), Y: new Float64Array(NMAX), VX: new Float64Array(NMAX), VY: new Float64Array(NMAX),\n    TX: new Float64Array(NMAX), TY: new Float64Array(NMAX), P: new Float64Array(2 * NMAX), ml: 1, Ml: 1, L: 1,\n    K: new Float64Array(NMAX), PH: new Float64Array(NMAX), IX: new Float64Array(64), IY: new Float64Array(64), IQ: new Int32Array(64), ni: 0,\n    SN: new Float64Array(SNAPS * SNAPN * 2), SM: new Int32Array(SNAPS), ns: 0, rush: 0,\n    n: 0, A0: 1, flowT: 0, phase: 0, pt: 0, dur: DRAW0, kind: -1, wind: 1.5, fx: 32, fy: 64, warm: false,\n    hue: 0, trace: 0.06, speed: 2,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), cov: new Float32Array(W * H),\n    xs: new Float32Array(4 * H * 48), xn: new Int32Array(4 * H), col: new Float32Array(12),\n  };\n}\n\nfunction finish(S) {\n  let cx = 0, cy = 0;\n  for (let i = 0; i \u003c S.n; i++) (cx += S.X[i]), (cy += S.Y[i]);\n  S.fx = cx / S.n;\n  S.fy = cy / S.n;\n  S.phase = 2;\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trace = cl(k[3], 0, 1);\n  const wind = cl(k[2], 2, 3.5);\n  if (!S.warm) {\n    build(S, wind, true);\n    S.warm = true;\n  } else if (abs(wind - S.wind) > 0.2 && S.phase !== 2) build(S, wind, false);\n  // K1: the rest of the flow in 0.6 beats, at a rate fixed when pressed.\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== 2) {\n    if (S.phase === 0) (S.phase = 1), (S.pt = 0), snapshot(S);\n    S.rush = area(S.X, S.Y, S.n) / (2 * PI * 0.6);\n  }\n  const beat = (d * S.speed) / 2;\n  S.pt += beat;\n  if (S.phase === 0 && S.pt >= S.dur) {\n    S.phase = 1;\n    S.pt = 0;\n    snapshot(S);\n  }\n  if (S.phase === 1) {\n    // The area clock: A0 / 2 pi units of flow time spread over LIFE beats.\n    let todo = beat * max(S.A0 / (2 * PI * LIFE), S.rush), guard = 0;\n    while (todo > 1e-9 && guard++ \u003c 400) {\n      const h = step(S, todo), ds = S.L / S.n;\n      todo -= h;\n      S.flowT += h;\n      if (S.ml \u003c 0.45 * ds || S.Ml > 1.8 * ds) remesh(S, true);\n      else if (guard % 10 === 0) remesh(S, false);\n      if (guard % 4 === 0 && area(S.X, S.Y, S.n) \u003c 1.5) break;\n    }\n    remesh(S, false);\n    while (S.ns \u003c SNAPS && S.flowT >= (S.ns * S.A0) / (2 * PI * SNAPS)) snapshot(S);\n    if (area(S.X, S.Y, S.n) \u003c 1.5) finish(S);\n  }\n  if (S.phase !== 2) curvature(S);\n  else if (S.pt >= FLASH) build(S, wind, false);\n}\n\n// Coverage of the inside, anti-aliased: four scanlines per row, each\n// crossing interval added to the LEDs it spans in exact fractions.\nfunction fill(S) {\n  const { X, Y, xs, xn, cov } = S, n = S.n, SUB = 4, CAP = 48;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = i + 1 \u003c n ? i + 1 : 0;\n    let x0 = X[i], y0 = Y[i], x1 = X[j], y1 = Y[j];\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const ys = (s + 0.5) / SUB, c = xn[s];\n      if (c \u003c CAP) {\n        xs[s * CAP + c] = x0 + ((ys - y0) * (x1 - x0)) / (y1 - y0);\n        xn[s] = c + 1;\n      }\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\n// A line from (ax, ay) to (bx, by), about 1.6 LEDs wide, kept at the brighter\n// of its colour and what is already there.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const { R, G, B } = S, dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, dd = sqrt(qx * qx + qy * qy);\n      const v = cl((wide - dd) / 0.55, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      R[p] = max(R[p], cr * v);\n      G[p] = max(G[p], cg * v);\n      B[p] = max(B[p], cb * v);\n    }\n}\n\nfunction dot(S, x, y, r, cr, cg, cb) {\n  const { R, G, B } = S;\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, floor(y + r + 1)); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, floor(x + r + 1)); xx++) {\n      const dd = sqrt((xx + 0.5 - x) ** 2 + (yy + 0.5 - y) ** 2), v = cl((r + 0.5 - dd) / 0.7, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = yy * W + xx;\n      R[p] = R[p] * (1 - v) + cr * v;\n      G[p] = G[p] * (1 - v) + cg * v;\n      B[p] = B[p] * (1 - v) + cb * v;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col, X, Y, K } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // Fill, convex rim, concave rim. Orange to lime fills are kept bright so\n  // they read as colour and not brown or olive.\n  const h = S.hue + 0.58;\n  hsv(h, 0.88, 0.9, col, 0);\n  hsv(h - 0.03, 0.3, 1, col, 3);\n  hsv(h + 0.55, 0.85, 1, col, 6);\n  const tr = S.trace, fillLv = 255 * (1 - 0.82 * tr);\n  if (S.phase === 2) {\n    // The round point: a white ring that opens and fades.\n    const u = S.pt / FLASH, r = 1 + 9 * sm(u), a = 255 * (1 - u) * (1 - u);\n    for (let i = 0; i \u003c 48; i++) {\n      const t0 = (2 * PI * i) / 48, t1 = (2 * PI * (i + 1)) / 48;\n      line(S, S.fx + r * cos(t0), S.fy + r * sin(t0), S.fx + r * cos(t1), S.fy + r * sin(t1), a, a, a * 0.95, 0.9);\n    }\n    if (u \u003c 0.3) dot(S, S.fx, S.fy, 1.2, 255, 255, 255);\n  } else {\n    const drawing = S.phase === 0, u = drawing ? S.pt / S.dur : 1;\n    const shown = drawing ? floor(n * sm(u / 0.72)) : n, fa = drawing ? sm((u - 0.55) / 0.4) : 1;\n    // Earlier outlines, the chronophotograph that Trace keeps.\n    if (tr > 0.1 && S.phase === 1) {\n      const lv = 255 * 0.75 * sm((tr - 0.1) / 0.5);\n      for (let s = 0; s \u003c S.ns; s++) {\n        const m = S.SM[s], o = s * SNAPN * 2, f = 0.3 + (0.7 * (s + 1)) / S.ns;\n        for (let i = 0; i \u003c m; i++) {\n          const j = (i + 1) % m;\n          line(S, S.SN[o + 2 * i], S.SN[o + 2 * i + 1], S.SN[o + 2 * j], S.SN[o + 2 * j + 1], col[3] * lv * f * 0.75, col[4] * lv * f * 0.75, col[5] * lv * f * 0.75, 0.75);\n        }\n      }\n    }\n    if (fa > 0) {\n      fill(S);\n      for (let p = 0; p \u003c W * H; p++) {\n        const c = min(1, cov[p]) * fa * fillLv;\n        if (c \u003c= 0) continue;\n        R[p] += col[0] * c;\n        G[p] += col[1] * c;\n        B[p] += col[2] * c;\n      }\n    }\n    // The rim: pale where the curve bends outward, the second colour where\n    // it bends inward. The inflection points sit where the two meet.\n    for (let i = 0; i \u003c shown; i++) {\n      const j = i + 1 \u003c n ? i + 1 : 0, t = cl((K[i] + K[j]) * 6, -1, 1), a = (1 + t) / 2;\n      const cr = 255 * (col[3] * a + col[6] * (1 - a)), cg = 255 * (col[4] * a + col[7] * (1 - a)), cb = 255 * (col[5] * a + col[8] * (1 - a));\n      line(S, X[i], Y[i], X[j], Y[j], cr, cg, cb, drawing && i > shown - 6 ? 1.2 : 0.9);\n    }\n    // White marks at the inflection points: a dark ring round a white core.\n    for (let q = 0; q \u003c S.ni; q++) {\n      if (S.IQ[q] >= shown) continue;\n      dot(S, S.IX[q], S.IY[q], 1.6, 0, 0, 0);\n      dot(S, S.IX[q], S.IY[q], 0.8, 255, 255, 255);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-curve-shortening","type":"code","name":"curve-shortening","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Curve Shortening\n// Family:  line\n// Idea:    One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: curve-shortening flow, Grayson's theorem (Matthew Grayson, 1987), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1\n//\n// Knob 1: Hue. The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it.\n// Knob 2: Speed. At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long.\n// Knob 3: Wind. How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve.\n// Knob 4: Trace. At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline.\n// Buttons: K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.\n\nconst W = 64, H = 128, NMAX = 1500, NMIN = 28, SNAPS = 10, SNAPN = 180;\n// Flow time is in LEDs squared: the area falls 2 pi of them per unit. A curve\n// lives LIFE beats of the clock; a beat is a second at Speed 2.\nconst LIFE = 5.6, DRAW0 = 1.9, DRAW = 0.95, FLASH = 0.6, DS = 1.3;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, random, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// ---- Shapes. Each is a centre line with a band width, or a polygon. ----\n\nfunction seg(out, x0, y0, x1, y1) {\n  const k = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.5));\n  for (let i = 0; i \u003c k; i++) out.push(x0 + ((x1 - x0) * i) / k, y0 + ((y1 - y0) * i) / k);\n}\n\n// A spiral on a stadium: half turns over the top and under the bottom, 2h\n// apart, joined by straight runs. Each half turn is a true semicircle, the\n// top ones centred on cx with radius r0 + k p, the bottom ones half a pitch\n// to the right with radius r0 + (k + 1/2) p, so the arcs meet the runs with\n// no corner and the band gains p every turn. It uses the tall panel the way\n// a round spiral cannot.\nfunction spiral(T) {\n  const p = 57 / (2 * T + 0.2), w = 0.45 * p, r0 = w / 2 + 1.5, h = 30, cx = 32, cy = 64, C = [];\n  const halves = 2 * T;\n  seg(C, cx + r0, cy + h, cx + r0, cy - h);\n  for (let k = 0; k \u003c halves; k++) {\n    const top = k % 2 === 0, R = r0 + (k * p) / 2, xc = top ? cx : cx + p / 2, yc = top ? cy - h : cy + h;\n    const f1 = min(PI, (halves - k) * PI);\n    for (let f = 0; f \u003c f1; f += 0.6 / R) C.push(xc + (top ? 1 : -1) * R * cos(f), yc + (top ? -1 : 1) * R * sin(f));\n    const x = xc + (top ? 1 : -1) * R * cos(f1);\n    if (f1 \u003c PI) C.push(x, yc + (top ? -1 : 1) * R * sin(f1));\n    else seg(C, x, yc, x, top ? cy + h : cy - h);\n  }\n  return { C, w };\n}\n\n// Two round spirals, one over the other, joined through the middle of the\n// panel as an S: the outer end of the upper one meets its mirror image there.\nfunction coils(T) {\n  const k = T \u003c 2.5 ? 2 : 3, p = 28.5 / (k + 0.55), w = 0.62 * p, r0 = 0.3 * p + 1.5, F = 2 * PI * k + PI / 2;\n  const Rm = r0 + (p * F) / (2 * PI), cyA = 64 - Rm, A = [];\n  for (let f = 0; f \u003c F; f += 0.03) {\n    const r = r0 + (p * f) / (2 * PI);\n    A.push(32 + r * cos(f), cyA + r * sin(f));\n  }\n  const C = A.slice();\n  C.push(32, 64);\n  for (let i = A.length - 2; i >= 0; i -= 2) C.push(64 - A[i], 128 - A[i + 1]);\n  return { C, w };\n}\n\n// A worm folded into m runs across the panel, joined by hairpin bends.\nfunction worm(T) {\n  const m = 2 + round(2 * T), p = 118 / m, w = 0.6 * p, xl = 3 + p / 2 + w / 2, xr = 61 - p / 2 - w / 2, C = [];\n  for (let j = 0; j \u003c m; j++) {\n    const y = 5 + p / 2 + j * p, right = j % 2 === 0;\n    seg(C, right ? xl : xr, y, right ? xr : xl, y);\n    if (j === m - 1) {\n      C.push(right ? xr : xl, y);\n      break;\n    }\n    const xc = right ? xr : xl, yc = y + p / 2;\n    for (let a = 0; a \u003c PI; a += 0.06) C.push(xc + (right ? 1 : -1) * (p / 2) * sin(a), yc - (p / 2) * cos(a));\n  }\n  return { C, w };\n}\n\n// A star: r(t) = R (0.34 + 0.66 g(k t)), one arm per lobe of g, stretched\n// 1.45 times up the panel. Being a graph over the angle, before and after the\n// stretch, it cannot cross itself.\nfunction star(T) {\n  const k = 2 + round(2 * T), R = 29.5, P = [];\n  for (let i = 0; i \u003c 2400; i++) {\n    const t = (2 * PI * i) / 2400, g = ((1 + cos(k * t)) / 2) ** 1.7, r = R * (0.34 + 0.66 * g);\n    P.push(32 + r * sin(t), 64 - 1.45 * r * cos(t));\n  }\n  return P;\n}\n\n// The outline of a band of width w round a centre line, with round ends.\nfunction band(C, w) {\n  const m = C.length >> 1, L = [], Rt = [], hw = w / 2;\n  const nrm = (i) => {\n    const a = max(0, i - 1), b = min(m - 1, i + 1);\n    let tx = C[2 * b] - C[2 * a], ty = C[2 * b + 1] - C[2 * a + 1];\n    const l = sqrt(tx * tx + ty * ty) || 1;\n    return [tx / l, ty / l];\n  };\n  for (let i = 0; i \u003c m; i++) {\n    const [tx, ty] = nrm(i);\n    L.push(C[2 * i] - ty * hw, C[2 * i + 1] + tx * hw);\n    Rt.push(C[2 * i] + ty * hw, C[2 * i + 1] - tx * hw);\n  }\n  const P = L.slice();\n  const cap = (i, s) => {\n    const [tx, ty] = nrm(i), nx = -ty, ny = tx;\n    for (let a = 0.12; a \u003c PI; a += 0.12) {\n      const c = cos(a), d = sin(a);\n      P.push(C[2 * i] + s * hw * (c * nx + d * tx), C[2 * i + 1] + s * hw * (c * ny + d * ty));\n    }\n  };\n  cap(m - 1, 1);\n  for (let i = m - 1; i >= 0; i--) P.push(Rt[2 * i], Rt[2 * i + 1]);\n  cap(0, -1);\n  return P;\n}\n\nfunction area(X, Y, n) {\n  let a = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) a += X[j] * Y[i] - X[i] * Y[j];\n  return a / 2;\n}\n\n// Put n points round the closed polygon P at equal steps of arc length,\n// wound so that the area comes out positive.\nfunction resample(P, np, X, Y, n) {\n  const m = np, len = new Float64Array(m + 1);\n  for (let i = 0; i \u003c m; i++) {\n    const j = (i + 1) % m;\n    len[i + 1] = len[i] + sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  const L = len[m];\n  let s = 0;\n  for (let k = 0; k \u003c n; k++) {\n    const target = (L * k) / n;\n    while (s \u003c m - 1 && len[s + 1] \u003c target) s++;\n    const j = (s + 1) % m, u = (target - len[s]) / (len[s + 1] - len[s] || 1);\n    X[k] = P[2 * s] + u * (P[2 * j] - P[2 * s]);\n    Y[k] = P[2 * s + 1] + u * (P[2 * j + 1] - P[2 * s + 1]);\n  }\n  if (area(X, Y, n) \u003c 0)\n    for (let a = 0, b = n - 1; a \u003c b; a++, b--) {\n      let t = X[a];\n      X[a] = X[b];\n      X[b] = t;\n      t = Y[a];\n      Y[a] = Y[b];\n      Y[b] = t;\n    }\n  return L;\n}\n\nfunction perimeter(X, Y, n) {\n  let L = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) L += sqrt((X[i] - X[j]) ** 2 + (Y[i] - Y[j]) ** 2);\n  return L;\n}\n\n// A new curve: the spiral first, then any of the four but the one just\n// shown, at 70 to 100% size somewhere on the panel, mirrored at random.\nfunction build(S, wind, first) {\n  let kind = 0;\n  if (!first) {\n    kind = floor(random() * 4);\n    if (kind === S.kind) kind = (kind + 1 + floor(random() * 3)) % 4;\n  }\n  S.kind = kind;\n  S.wind = wind;\n  let P;\n  if (kind === 1) P = star(wind);\n  else {\n    const { C, w } = kind === 0 ? spiral(wind) : kind === 2 ? worm(wind) : coils(wind);\n    P = band(C, w);\n  }\n  const sc = first ? 1 : 0.7 + 0.3 * random(), fx = random() \u003c 0.5 ? -1 : 1, fy = random() \u003c 0.5 ? -1 : 1;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c P.length; i += 2) {\n    P[i] = 32 + fx * sc * (P[i] - 32);\n    P[i + 1] = 64 + fy * sc * (P[i + 1] - 64);\n    x0 = min(x0, P[i]);\n    x1 = max(x1, P[i]);\n    y0 = min(y0, P[i + 1]);\n    y1 = max(y1, P[i + 1]);\n  }\n  // The first curve stands in the middle; later ones slide anywhere they\n  // still fit between 1.5 and 62.5 across, 1.5 and 126.5 down.\n  const dx = first ? 32 - (x0 + x1) / 2 : 1.5 - x0 + random() * max(0, 61 - (x1 - x0));\n  const dy = first ? 64 - (y0 + y1) / 2 : 1.5 - y0 + random() * max(0, 125 - (y1 - y0));\n  for (let i = 0; i \u003c P.length; i += 2) (P[i] += dx), (P[i + 1] += dy);\n  const np = P.length >> 1;\n  let L = 0;\n  for (let i = 0; i \u003c np; i++) {\n    const j = (i + 1) % np;\n    L += sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  S.n = min(NMAX, max(NMIN, round(L / DS)));\n  resample(P, np, S.X, S.Y, S.n);\n  S.A0 = area(S.X, S.Y, S.n);\n  S.flowT = 0;\n  S.phase = 0;\n  S.pt = 0;\n  S.dur = first ? DRAW0 : DRAW;\n  S.ns = 0;\n  S.rush = 0;\n  curvature(S);\n}\n\n// One explicit step of the flow. Vertex i moves along the normal of the\n// chord from i-1 to i+1 by 2 phi / |chord| per unit time, phi the turning\n// angle at i: that is the curvature, and it makes the area fall by exactly\n// phi, so the whole polygon loses sum(phi) = 2 pi per unit time. A small\n// slide along the same chord evens out the spacing and leaves the area alone.\n// The step is at most 0.3 of the square of the shortest half chord, under the\n// 0.5 where the explicit scheme starts to ring. Returns the time it took.\nfunction step(S, todo) {\n  const { X, Y, VX, VY, TX, TY } = S, n = S.n;\n  let mc = 1e9, ml = 1e9, Ml = 0, L = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    const phi = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n    const cx = X[b] - X[a], cy = Y[b] - Y[a], c2 = cx * cx + cy * cy || 1e-12;\n    const l1 = sqrt(ex * ex + ey * ey), l2 = sqrt(fx * fx + fy * fy), g = (0.3 * (l2 - l1)) / sqrt(c2);\n    VX[i] = (-2 * phi * cy) / c2;\n    VY[i] = (2 * phi * cx) / c2;\n    TX[i] = g * cx;\n    TY[i] = g * cy;\n    if (c2 \u003c mc) mc = c2;\n    if (l2 \u003c ml) ml = l2;\n    if (l2 > Ml) Ml = l2;\n    L += l2;\n  }\n  const h = min(todo, 0.075 * mc);\n  for (let i = 0; i \u003c n; i++) {\n    X[i] += h * VX[i] + TX[i];\n    Y[i] += h * VY[i] + TY[i];\n  }\n  S.ml = ml;\n  S.Ml = Ml;\n  S.L = L;\n  return h;\n}\n\n// Fresh points at even spacing. Points laid on the old edges cut the corners\n// and lose a little area, so every point then steps out along its normal by\n// the area lost over half the sum of the chords, which puts it back to first\n// order: a remesh must not move the area clock. When the curve has shrunk\n// there are fewer points, the spacing near DS until the curve is down to NMIN\n// points; edges squeezed under 0.45 of the spacing at a retracting tip, or\n// stretched past 1.8 along an arc pushing outward, force one.\nfunction remesh(S, force) {\n  const { X, Y } = S, L = perimeter(X, Y, S.n), want = max(NMIN, min(NMAX, round(L / DS)));\n  if (!force && want >= 0.8 * S.n && want \u003c= 1.25 * S.n) return;\n  const A = area(X, Y, S.n), P = S.P, np = S.n;\n  for (let i = 0; i \u003c np; i++) (P[2 * i] = X[i]), (P[2 * i + 1] = Y[i]);\n  S.n = want;\n  resample(P, np, X, Y, want);\n  const n = want, VX = S.VX, VY = S.VY;\n  let half = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0, cx = X[b] - X[a], cy = Y[b] - Y[a], c = sqrt(cx * cx + cy * cy) || 1e-9;\n    VX[i] = cy / c;\n    VY[i] = -cx / c;\n    half += c / 2;\n  }\n  const off = (A - area(X, Y, n)) / half;\n  for (let i = 0; i \u003c n; i++) (X[i] += off * VX[i]), (Y[i] += off * VY[i]);\n  S.ml = S.Ml = L / n;\n}\n\n// Signed curvature, summed over seven neighbours so that straight runs read\n// as zero, and the inflection points: where a run of clearly convex points\n// meets a run of clearly concave ones. Runs that never pass 0.06 radians of\n// turning do not count, so a nearly straight stretch does not flicker.\nfunction curvature(S) {\n  const { X, Y, K, PH } = S, n = S.n;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    PH[i] = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n  }\n  let s = 0;\n  for (let j = -3; j \u003c= 3; j++) s += PH[(j + n) % n];\n  for (let i = 0; i \u003c n; i++) {\n    K[i] = s;\n    s += PH[(i + 4) % n] - PH[(i - 3 + n) % n];\n  }\n  // Runs of one sign, starting where the sign changes.\n  const sg = (v) => (v > 0.025 ? 1 : v \u003c -0.025 ? -1 : 0);\n  let start = -1;\n  for (let i = 0; i \u003c n; i++)\n    if (sg(K[i]) && sg(K[i]) !== sg(K[(i - 1 + n) % n])) {\n      start = i;\n      break;\n    }\n  S.ni = 0;\n  if (start \u003c 0) return;\n  const runs = [];\n  let i = 0;\n  while (i \u003c n) {\n    const p = (start + i) % n, v = sg(K[p]);\n    if (!v) {\n      i++;\n      continue;\n    }\n    let j = i, peak = 0;\n    while (j \u003c n && sg(K[(start + j) % n]) === v) (peak = max(peak, abs(K[(start + j) % n]))), j++;\n    if (peak > 0.06) {\n      const last = runs[runs.length - 1];\n      if (last && last.v === v) last.e = j - 1;\n      else runs.push({ v, b: i, e: j - 1 });\n    }\n    i = j;\n  }\n  if (runs.length > 1 && runs[0].v === runs[runs.length - 1].v) {\n    runs[0].b = runs[runs.length - 1].b - n;\n    runs.pop();\n  }\n  if (runs.length \u003c 2) return;\n  for (let r = 0; r \u003c runs.length && S.ni \u003c 64; r++) {\n    const A = runs[r], B = runs[(r + 1) % runs.length];\n    let e = A.e, b = B.b;\n    if (b \u003c= e) b += n;\n    // The zero crossing between the end of one run and the start of the next.\n    let q = e;\n    for (let t = e; t \u003c b; t++) if (K[(start + t) % n] * A.v > 0 && K[(start + t + 1) % n] * A.v \u003c= 0) q = t;\n    const p0 = (start + q + n) % n, p1 = (p0 + 1) % n, k0 = K[p0], k1 = K[p1];\n    const u = k0 !== k1 ? cl(k0 / (k0 - k1), 0, 1) : 0.5;\n    S.IX[S.ni] = X[p0] + u * (X[p1] - X[p0]);\n    S.IY[S.ni] = Y[p0] + u * (Y[p1] - Y[p0]);\n    S.IQ[S.ni++] = p0;\n  }\n}\n\nfunction snapshot(S) {\n  if (S.ns >= SNAPS) return;\n  const k = max(1, ceil(S.n / SNAPN)), o = S.ns * SNAPN * 2;\n  let m = 0;\n  for (let i = 0; i \u003c S.n && m \u003c SNAPN; i += k, m++) (S.SN[o + 2 * m] = S.X[i]), (S.SN[o + 2 * m + 1] = S.Y[i]);\n  S.SM[S.ns++] = m;\n}\n\nfunction setup(params) {\n  params.s = {\n    X: new Float64Array(NMAX), Y: new Float64Array(NMAX), VX: new Float64Array(NMAX), VY: new Float64Array(NMAX),\n    TX: new Float64Array(NMAX), TY: new Float64Array(NMAX), P: new Float64Array(2 * NMAX), ml: 1, Ml: 1, L: 1,\n    K: new Float64Array(NMAX), PH: new Float64Array(NMAX), IX: new Float64Array(64), IY: new Float64Array(64), IQ: new Int32Array(64), ni: 0,\n    SN: new Float64Array(SNAPS * SNAPN * 2), SM: new Int32Array(SNAPS), ns: 0, rush: 0,\n    n: 0, A0: 1, flowT: 0, phase: 0, pt: 0, dur: DRAW0, kind: -1, wind: 1.5, fx: 32, fy: 64, warm: false,\n    hue: 0, trace: 0.06, speed: 2,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), cov: new Float32Array(W * H),\n    xs: new Float32Array(4 * H * 48), xn: new Int32Array(4 * H), col: new Float32Array(12),\n  };\n}\n\nfunction finish(S) {\n  let cx = 0, cy = 0;\n  for (let i = 0; i \u003c S.n; i++) (cx += S.X[i]), (cy += S.Y[i]);\n  S.fx = cx / S.n;\n  S.fy = cy / S.n;\n  S.phase = 2;\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trace = cl(k[3], 0, 1);\n  const wind = cl(k[2], 2, 3.5);\n  if (!S.warm) {\n    build(S, wind, true);\n    S.warm = true;\n  } else if (abs(wind - S.wind) > 0.2 && S.phase !== 2) build(S, wind, false);\n  // K1: the rest of the flow in 0.6 beats, at a rate fixed when pressed.\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== 2) {\n    if (S.phase === 0) (S.phase = 1), (S.pt = 0), snapshot(S);\n    S.rush = area(S.X, S.Y, S.n) / (2 * PI * 0.6);\n  }\n  const beat = (d * S.speed) / 2;\n  S.pt += beat;\n  if (S.phase === 0 && S.pt >= S.dur) {\n    S.phase = 1;\n    S.pt = 0;\n    snapshot(S);\n  }\n  if (S.phase === 1) {\n    // The area clock: A0 / 2 pi units of flow time spread over LIFE beats.\n    let todo = beat * max(S.A0 / (2 * PI * LIFE), S.rush), guard = 0;\n    while (todo > 1e-9 && guard++ \u003c 400) {\n      const h = step(S, todo), ds = S.L / S.n;\n      todo -= h;\n      S.flowT += h;\n      if (S.ml \u003c 0.45 * ds || S.Ml > 1.8 * ds) remesh(S, true);\n      else if (guard % 10 === 0) remesh(S, false);\n      if (guard % 4 === 0 && area(S.X, S.Y, S.n) \u003c 1.5) break;\n    }\n    remesh(S, false);\n    while (S.ns \u003c SNAPS && S.flowT >= (S.ns * S.A0) / (2 * PI * SNAPS)) snapshot(S);\n    if (area(S.X, S.Y, S.n) \u003c 1.5) finish(S);\n  }\n  if (S.phase !== 2) curvature(S);\n  else if (S.pt >= FLASH) build(S, wind, false);\n}\n\n// Coverage of the inside, anti-aliased: four scanlines per row, each\n// crossing interval added to the LEDs it spans in exact fractions.\nfunction fill(S) {\n  const { X, Y, xs, xn, cov } = S, n = S.n, SUB = 4, CAP = 48;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = i + 1 \u003c n ? i + 1 : 0;\n    let x0 = X[i], y0 = Y[i], x1 = X[j], y1 = Y[j];\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const ys = (s + 0.5) / SUB, c = xn[s];\n      if (c \u003c CAP) {\n        xs[s * CAP + c] = x0 + ((ys - y0) * (x1 - x0)) / (y1 - y0);\n        xn[s] = c + 1;\n      }\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\n// A line from (ax, ay) to (bx, by), about 1.6 LEDs wide, kept at the brighter\n// of its colour and what is already there.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const { R, G, B } = S, dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, dd = sqrt(qx * qx + qy * qy);\n      const v = cl((wide - dd) / 0.55, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      R[p] = max(R[p], cr * v);\n      G[p] = max(G[p], cg * v);\n      B[p] = max(B[p], cb * v);\n    }\n}\n\nfunction dot(S, x, y, r, cr, cg, cb) {\n  const { R, G, B } = S;\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, floor(y + r + 1)); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, floor(x + r + 1)); xx++) {\n      const dd = sqrt((xx + 0.5 - x) ** 2 + (yy + 0.5 - y) ** 2), v = cl((r + 0.5 - dd) / 0.7, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = yy * W + xx;\n      R[p] = R[p] * (1 - v) + cr * v;\n      G[p] = G[p] * (1 - v) + cg * v;\n      B[p] = B[p] * (1 - v) + cb * v;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col, X, Y, K } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // Fill, convex rim, concave rim. Orange to lime fills are kept bright so\n  // they read as colour and not brown or olive.\n  const h = S.hue + 0.58;\n  hsv(h, 0.88, 0.9, col, 0);\n  hsv(h - 0.03, 0.3, 1, col, 3);\n  hsv(h + 0.55, 0.85, 1, col, 6);\n  const tr = S.trace, fillLv = 255 * (1 - 0.82 * tr);\n  if (S.phase === 2) {\n    // The round point: a white ring that opens and fades.\n    const u = S.pt / FLASH, r = 1 + 9 * sm(u), a = 255 * (1 - u) * (1 - u);\n    for (let i = 0; i \u003c 48; i++) {\n      const t0 = (2 * PI * i) / 48, t1 = (2 * PI * (i + 1)) / 48;\n      line(S, S.fx + r * cos(t0), S.fy + r * sin(t0), S.fx + r * cos(t1), S.fy + r * sin(t1), a, a, a * 0.95, 0.9);\n    }\n    if (u \u003c 0.3) dot(S, S.fx, S.fy, 1.2, 255, 255, 255);\n  } else {\n    const drawing = S.phase === 0, u = drawing ? S.pt / S.dur : 1;\n    const shown = drawing ? floor(n * sm(u / 0.72)) : n, fa = drawing ? sm((u - 0.55) / 0.4) : 1;\n    // Earlier outlines, the chronophotograph that Trace keeps.\n    if (tr > 0.1 && S.phase === 1) {\n      const lv = 255 * 0.75 * sm((tr - 0.1) / 0.5);\n      for (let s = 0; s \u003c S.ns; s++) {\n        const m = S.SM[s], o = s * SNAPN * 2, f = 0.3 + (0.7 * (s + 1)) / S.ns;\n        for (let i = 0; i \u003c m; i++) {\n          const j = (i + 1) % m;\n          line(S, S.SN[o + 2 * i], S.SN[o + 2 * i + 1], S.SN[o + 2 * j], S.SN[o + 2 * j + 1], col[3] * lv * f * 0.75, col[4] * lv * f * 0.75, col[5] * lv * f * 0.75, 0.75);\n        }\n      }\n    }\n    if (fa > 0) {\n      fill(S);\n      for (let p = 0; p \u003c W * H; p++) {\n        const c = min(1, cov[p]) * fa * fillLv;\n        if (c \u003c= 0) continue;\n        R[p] += col[0] * c;\n        G[p] += col[1] * c;\n        B[p] += col[2] * c;\n      }\n    }\n    // The rim: pale where the curve bends outward, the second colour where\n    // it bends inward. The inflection points sit where the two meet.\n    for (let i = 0; i \u003c shown; i++) {\n      const j = i + 1 \u003c n ? i + 1 : 0, t = cl((K[i] + K[j]) * 6, -1, 1), a = (1 + t) / 2;\n      const cr = 255 * (col[3] * a + col[6] * (1 - a)), cg = 255 * (col[4] * a + col[7] * (1 - a)), cb = 255 * (col[5] * a + col[8] * (1 - a));\n      line(S, X[i], Y[i], X[j], Y[j], cr, cg, cb, drawing && i > shown - 6 ? 1.2 : 0.9);\n    }\n    // White marks at the inflection points: a dark ring round a white core.\n    for (let q = 0; q \u003c S.ni; q++) {\n      if (S.IQ[q] >= shown) continue;\n      dot(S, S.IX[q], S.IY[q], 1.6, 0, 0, 0);\n      dot(S, S.IX[q], S.IY[q], 0.8, 255, 255, 255);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long."},{"name":"Wind","min":2,"max":3.5,"about":"How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve."},{"name":"Trace","min":0,"max":1,"about":"At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline."}],"start":[0,2,2,0.06],"measures":{"motion":0.2037,"detail":0.0249,"edges":0.5796,"complexity":0.2104,"coverage":0.1942,"colour":0.2439,"drift":0.3752},"knobResponse":[0.229,0.2408,0.2872,0.1241]},{"slug":"cushion-mesh","title":"Cushion Mesh","family":"cosmetic","round":32,"note":"쿠션 팩트의 망사를 몇 밀리미터 앞에서 봐요. 1 LED 마다 검은 실과 장밋빛 구멍이 번갈아 서고, 보이지 않는 퍼프가 0.5초마다 지름 28 LED 쯤의 자국을 찍으면 그 안의 구멍 78% 에 흰 파운데이션 방울이 맺혀요. 방울은 연어색으로 물들었다가 자국 가장자리부터 빨려 들어가고, 판에는 늘 769개가 남아요.","idea":"The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.","buttons":"K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Cushion Mesh\n// Family:  cosmetic\n// Idea:    The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the mesh net of a cushion compact\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1\n//\n// Knob 1: Hue. The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac.\n// Knob 2: Speed. At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s.\n// Knob 3: Press. How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel.\n// Knob 4: Puff. The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width.\n// Buttons: K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, exp, atan2, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The mesh is a one-LED checker: the threads (x + y odd) are black, the\n// holes show the soaked sponge at level 40, and a bead is a hole at 255. So\n// every pair of neighbours is a thread and a hole, 40 apart or 255 apart, and\n// the share of beads alone sets the measured edges: 769 beads give 0.190.\n// Beads only form off the panel's edge, where each has four threads round it.\nconst HOLES = [];\nfor (let y = 1; y \u003c H - 1; y++) for (let x = 2 - (y & 1); x \u003c W - 1; x += 2) HOLES.push(y * W + x);\nconst BEADS = 769;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, press: 0, puff: 0.06, warm: false, flood: 0, extra: 0, clock: 0,\n    dabT: 99, dab: null,\n    thr: new Float32Array(N), life: new Float32Array(N), life0: new Float32Array(N), wet: new Float32Array(N),\n    P: new Float32Array(N), bead: new Uint8Array(N), list: [], c: [0, 0, 0],\n  };\n  const S = params.s;\n  // How readily each hole lets the foundation through.\n  for (const p of HOLES) S.thr[p] = random();\n}\n\nfunction newDab(S) {\n  // The puff goes where the mesh is driest: the best of ten tries, scored by\n  // the beads and wet holes under it.\n  const r = 13 + 14 * S.puff;\n  let bx = 32, by = 64, best = 1e9;\n  for (let k = 0; k \u003c 10; k++) {\n    const x = r * 0.5 + random() * (W - r), y = r * 0.5 + random() * (H - r);\n    let score = 0;\n    for (let v = -r; v \u003c= r; v += 3)\n      for (let u = -r; u \u003c= r; u += 3) {\n        const px = round(x + u), py = round(y + v);\n        if (u * u + v * v > r * r || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n        const q = py * W + px - ((px + py) & 1);\n        score += S.bead[q] + 0.3 * S.wet[q];\n      }\n    if (score \u003c best) (best = score), (bx = x), (by = y);\n  }\n  S.dab = { x: bx, y: by, r, w1: random() * 6.28, w2: random() * 6.28 };\n  S.dabT = 0;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.dabT += ds;\n  if (S.dabT >= 0.5) newDab(S);\n  const t = S.dabT, a = t \u003c 0.12 ? sm(0, 0.12, t) : t \u003c 0.34 ? 1 : 1 - sm(0.34, 0.46, t);\n  const P = S.P;\n  P.fill(0);\n  if (S.dab && a > 0) {\n    // The mark spreads from three quarters of its size as the puff lands,\n    // with a soft rim that wobbles round the edge.\n    const { x: cx, y: cy, r: r0, w1, w2 } = S.dab, r = r0 * (0.75 + 0.25 * a);\n    for (let y = max(1, floor(cy - r - 2)); y \u003c= min(H - 2, cy + r + 2); y++)\n      for (let x = max(1, floor(cx - r - 2)); x \u003c= min(W - 2, cx + r + 2); x++) {\n        const dx = x - cx, dy = y - cy, th = atan2(dy, dx);\n        const e = r * (1 + 0.08 * sin(3 * th + w1) + 0.05 * sin(5 * th + w2));\n        const v = a * (1 - sm(0.7 * e, e, sqrt(dx * dx + dy * dy)));\n        if (v > 0) P[y * W + x] = v;\n      }\n  }\n  if (S.flood > 0) {\n    S.flood = max(0, S.flood - ds);\n    const v = 0.9 * sm(0.5, 0.42, S.flood) * sm(0, 0.08, S.flood);\n    for (const p of HOLES) P[p] = max(P[p], v);\n    if (S.flood === 0) S.extra = 1;\n  } else S.extra = max(0, S.extra - ds / 2.5);\n  const rho = 0.78 * 1.25 ** S.press, L = 4.5 * 1.4 ** S.press, list = S.list;\n  list.length = 0;\n  for (const p of HOLES) {\n    const pv = P[p];\n    if (pv > 0) S.wet[p] = max(S.wet[p], pv);\n    S.wet[p] = max(0, S.wet[p] - ds / 1.5);\n    if (S.bead[p]) {\n      // A bead under the puff is fed; once the puff lifts it waits its turn.\n      if (pv \u003c 0.05) S.life[p] -= ds;\n      if (S.life[p] \u003c= 0) {\n        S.bead[p] = 0;\n        S.wet[p] = 1;\n        continue;\n      }\n      list.push(p);\n    } else if (pv * rho > S.thr[p]) {\n      let q = 1;\n      if (S.dab) {\n        const dx = (p % W) - S.dab.x, dy = floor(p / W) - S.dab.y;\n        q = cl(sqrt(dx * dx + dy * dy) / S.dab.r, 0, 1);\n      }\n      S.bead[p] = 1;\n      S.life[p] = S.life0[p] = L * (0.35 + 0.65 * (1 - q) + 0.25 * random());\n      list.push(p);\n    }\n  }\n  // The mesh holds only so much liquid at the surface. Past that, the beads\n  // nearest their time go back in first, so a mark drains from its rim.\n  const flood = S.flood > 0 ? sm(0.5, 0.42, S.flood) : S.extra;\n  const target = round(BEADS * 2.2 ** S.press * (1 + 2.6 * flood));\n  if (list.length > target) {\n    list.sort((u, v) => S.life[u] - S.life[v]);\n    for (let i = 0; i \u003c list.length - target; i++) {\n      S.bead[list[i]] = 0;\n      S.wet[list[i]] = 1;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.press = cl(k[2], -1, 1);\n  S.puff = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a compact that has been dabbed for three seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.flood === 0) S.flood = 0.5;\n  S.clock += d * S.speed;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, h = S.hue + 0.03;\n  // A band of light slides down across the mesh every 7 s at Speed 2 and\n  // turns the beads in it white; it changes colour only, never level.\n  const u0 = -24 + 196 * ((S.clock / 14) % 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if ((x + y) & 1) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const p = y * W + x, du = (x * 0.8 + y * 0.6 - u0) / 7, g = exp(-du * du);\n      if (S.bead[p]) {\n        const age = cl(1 - S.life[p] / S.life0[p], 0, 1);\n        hsv(h, (0.16 + 0.48 * age) * (1 - 0.85 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n      } else {\n        const w = S.wet[p];\n        hsv(h - 0.02 * w, (0.45 + 0.45 * w) * (1 - 0.6 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 40), round(c[1] * 40), round(c[2] * 40));\n      }\n    }\n}\n","layer":{"id":"layer-cushion-mesh","type":"code","name":"cushion-mesh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cushion Mesh\n// Family:  cosmetic\n// Idea:    The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the mesh net of a cushion compact\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1\n//\n// Knob 1: Hue. The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac.\n// Knob 2: Speed. At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s.\n// Knob 3: Press. How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel.\n// Knob 4: Puff. The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width.\n// Buttons: K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, exp, atan2, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The mesh is a one-LED checker: the threads (x + y odd) are black, the\n// holes show the soaked sponge at level 40, and a bead is a hole at 255. So\n// every pair of neighbours is a thread and a hole, 40 apart or 255 apart, and\n// the share of beads alone sets the measured edges: 769 beads give 0.190.\n// Beads only form off the panel's edge, where each has four threads round it.\nconst HOLES = [];\nfor (let y = 1; y \u003c H - 1; y++) for (let x = 2 - (y & 1); x \u003c W - 1; x += 2) HOLES.push(y * W + x);\nconst BEADS = 769;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, press: 0, puff: 0.06, warm: false, flood: 0, extra: 0, clock: 0,\n    dabT: 99, dab: null,\n    thr: new Float32Array(N), life: new Float32Array(N), life0: new Float32Array(N), wet: new Float32Array(N),\n    P: new Float32Array(N), bead: new Uint8Array(N), list: [], c: [0, 0, 0],\n  };\n  const S = params.s;\n  // How readily each hole lets the foundation through.\n  for (const p of HOLES) S.thr[p] = random();\n}\n\nfunction newDab(S) {\n  // The puff goes where the mesh is driest: the best of ten tries, scored by\n  // the beads and wet holes under it.\n  const r = 13 + 14 * S.puff;\n  let bx = 32, by = 64, best = 1e9;\n  for (let k = 0; k \u003c 10; k++) {\n    const x = r * 0.5 + random() * (W - r), y = r * 0.5 + random() * (H - r);\n    let score = 0;\n    for (let v = -r; v \u003c= r; v += 3)\n      for (let u = -r; u \u003c= r; u += 3) {\n        const px = round(x + u), py = round(y + v);\n        if (u * u + v * v > r * r || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n        const q = py * W + px - ((px + py) & 1);\n        score += S.bead[q] + 0.3 * S.wet[q];\n      }\n    if (score \u003c best) (best = score), (bx = x), (by = y);\n  }\n  S.dab = { x: bx, y: by, r, w1: random() * 6.28, w2: random() * 6.28 };\n  S.dabT = 0;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.dabT += ds;\n  if (S.dabT >= 0.5) newDab(S);\n  const t = S.dabT, a = t \u003c 0.12 ? sm(0, 0.12, t) : t \u003c 0.34 ? 1 : 1 - sm(0.34, 0.46, t);\n  const P = S.P;\n  P.fill(0);\n  if (S.dab && a > 0) {\n    // The mark spreads from three quarters of its size as the puff lands,\n    // with a soft rim that wobbles round the edge.\n    const { x: cx, y: cy, r: r0, w1, w2 } = S.dab, r = r0 * (0.75 + 0.25 * a);\n    for (let y = max(1, floor(cy - r - 2)); y \u003c= min(H - 2, cy + r + 2); y++)\n      for (let x = max(1, floor(cx - r - 2)); x \u003c= min(W - 2, cx + r + 2); x++) {\n        const dx = x - cx, dy = y - cy, th = atan2(dy, dx);\n        const e = r * (1 + 0.08 * sin(3 * th + w1) + 0.05 * sin(5 * th + w2));\n        const v = a * (1 - sm(0.7 * e, e, sqrt(dx * dx + dy * dy)));\n        if (v > 0) P[y * W + x] = v;\n      }\n  }\n  if (S.flood > 0) {\n    S.flood = max(0, S.flood - ds);\n    const v = 0.9 * sm(0.5, 0.42, S.flood) * sm(0, 0.08, S.flood);\n    for (const p of HOLES) P[p] = max(P[p], v);\n    if (S.flood === 0) S.extra = 1;\n  } else S.extra = max(0, S.extra - ds / 2.5);\n  const rho = 0.78 * 1.25 ** S.press, L = 4.5 * 1.4 ** S.press, list = S.list;\n  list.length = 0;\n  for (const p of HOLES) {\n    const pv = P[p];\n    if (pv > 0) S.wet[p] = max(S.wet[p], pv);\n    S.wet[p] = max(0, S.wet[p] - ds / 1.5);\n    if (S.bead[p]) {\n      // A bead under the puff is fed; once the puff lifts it waits its turn.\n      if (pv \u003c 0.05) S.life[p] -= ds;\n      if (S.life[p] \u003c= 0) {\n        S.bead[p] = 0;\n        S.wet[p] = 1;\n        continue;\n      }\n      list.push(p);\n    } else if (pv * rho > S.thr[p]) {\n      let q = 1;\n      if (S.dab) {\n        const dx = (p % W) - S.dab.x, dy = floor(p / W) - S.dab.y;\n        q = cl(sqrt(dx * dx + dy * dy) / S.dab.r, 0, 1);\n      }\n      S.bead[p] = 1;\n      S.life[p] = S.life0[p] = L * (0.35 + 0.65 * (1 - q) + 0.25 * random());\n      list.push(p);\n    }\n  }\n  // The mesh holds only so much liquid at the surface. Past that, the beads\n  // nearest their time go back in first, so a mark drains from its rim.\n  const flood = S.flood > 0 ? sm(0.5, 0.42, S.flood) : S.extra;\n  const target = round(BEADS * 2.2 ** S.press * (1 + 2.6 * flood));\n  if (list.length > target) {\n    list.sort((u, v) => S.life[u] - S.life[v]);\n    for (let i = 0; i \u003c list.length - target; i++) {\n      S.bead[list[i]] = 0;\n      S.wet[list[i]] = 1;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.press = cl(k[2], -1, 1);\n  S.puff = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a compact that has been dabbed for three seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.flood === 0) S.flood = 0.5;\n  S.clock += d * S.speed;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, h = S.hue + 0.03;\n  // A band of light slides down across the mesh every 7 s at Speed 2 and\n  // turns the beads in it white; it changes colour only, never level.\n  const u0 = -24 + 196 * ((S.clock / 14) % 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if ((x + y) & 1) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const p = y * W + x, du = (x * 0.8 + y * 0.6 - u0) / 7, g = exp(-du * du);\n      if (S.bead[p]) {\n        const age = cl(1 - S.life[p] / S.life0[p], 0, 1);\n        hsv(h, (0.16 + 0.48 * age) * (1 - 0.85 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n      } else {\n        const w = S.wet[p];\n        hsv(h - 0.02 * w, (0.45 + 0.45 * w) * (1 - 0.6 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 40), round(c[1] * 40), round(c[2] * 40));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s."},{"name":"Press","min":-1,"max":1,"about":"How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel."},{"name":"Puff","min":0,"max":1,"about":"The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width."}],"start":[0,2,0,0.06],"measures":{"motion":0.0612,"detail":0.3133,"edges":0.19,"complexity":0.3734,"coverage":0.5,"colour":0.1055,"drift":0.1322},"knobResponse":[0.0477,0.1254,0.1656,0.1397]},{"slug":"cyanotype","title":"Cyanotype","family":"print","round":19,"note":"철염을 바른 종이에 고사리와 깃털, 민들레 씨앗, 레이스를 놓고 햇빛에 구운 뒤 물로 씻어 내리면 프러시안 블루 인화가 드러나요. 마르며 짙어진 인화가 옆으로 밀려 나가면 다음 장이 깔려요.","idea":"A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","layer":{"id":"layer-cyanotype","type":"code","name":"cyanotype","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tone","min":0,"max":1,"about":"The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes."},{"name":"Specimen","min":0,"max":4,"about":"What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order."},{"name":"Exposure","min":-1,"max":1,"about":"How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through."}],"start":[0,2,0,0.06],"measures":{"motion":0.2407,"detail":0.0234,"edges":0.2171,"complexity":1.3748,"coverage":1,"colour":0.239,"drift":0.1842},"knobResponse":[0.1554,0.128,0.0957,0.1334]},{"slug":"dandelin-spheres","title":"Dandelin Spheres","family":"geometry","round":33,"note":"유리 원뿔을 평면이 자른 원뿔곡선 위아래로 당들랭 구 둘이 원뿔에 끼어 평면에 닿아 있어요. 곡선을 도는 점에서 두 초점까지의 거리와 원뿔 모선 위 두 토막이 금색과 분홍으로 짝지어 같은 길이로 보여요. K3 은 평면 기울기로 30도의 타원에서 74도의 포물선을 지나 쌍곡선까지 가고, K1 을 누르면 평면이 11초 동안 똑바로 섰다가 돌아와요.","idea":"A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.","buttons":"K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Dandelin Spheres\n// Family:  geometry\n// Idea:    A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dandelin spheres (Germinal Pierre Dandelin, 1822), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34\n//\n// Knob 1: Hue. Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink.\n// Knob 2: Speed. At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50.\n// Knob 4: Cone. The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34.\n// Buttons: K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, tan, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst RAD = PI / 180;\n\n// World units: the apex at the origin, y up the axis. The plane turns about\n// the horizontal line through (XP, YP) along z, so at 90 degrees it stands\n// 0.3 off the axis and still cuts a hyperbola instead of two crossing lines.\nconst XP = -0.3, YP = 0.95;\n// The cone is cut off at these heights.\nconst YTOP = 2.25, YBOT = -2.4;\n// The plane is drawn where |x| and |z| are under this.\nconst PX = 1.05;\n// Camera: this far from the point it looks at, this many degrees above it.\nconst DIST = 9, ELEV = 28 * RAD;\n// Five lines of the cone, round its axis.\nconst GEN = 5;\n// The opening hue sits here on the wheel: teal.\nconst H0 = 0.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n// How far a hue sits in the orange and yellow that turn brown when shaded.\nconst warm = (h) => {\n  h -= floor(h);\n  return max(0, 1 - abs(h - 0.11) / 0.1);\n};\n\nexport function setup(params) {\n  params.s = {\n    th: 0.6, ph: 0, sw: -1, hue: 0, tilt: 30, cone: 16, speed: 2, lo: -0.25,\n    base: new Float32Array(N * 3), lin: new Float32Array(N * 3),\n    zO: new Float32Array(N), zC: new Float32Array(N), zP: new Float32Array(N),\n    col: new Float32Array(8 * 3), colHue: NaN, sc: {},\n  };\n}\n\n// The scene for a tilt and half-angle in radians: the plane n.p = h with\n// n = (-sin b, cos b, 0), and the two spheres on the axis at heights s with\n// radius |s| sin a. A sphere at s is tangent to the cone, and tangent to the\n// plane when |cos b s - h| = |s| sin a, so s = h / (cos b + sin a), the one\n// between the apex and the plane, and s = h / (cos b - sin a), past the plane\n// while cos b > sin a (an ellipse), at infinity when they are equal (a\n// parabola), and below the apex in the other nappe once sin a is the larger\n// (a hyperbola).\nfunction scene(S, b, a) {\n  const sa = sin(a), ca = cos(a), sb = sin(b), cb = cos(b), h = cb * YP - sb * XP;\n  const sc = S.sc;\n  sc.sa = sa;\n  sc.ca = ca;\n  sc.k = sa / ca;\n  sc.nx = -sb;\n  sc.ny = cb;\n  sc.h = h;\n  sc.s1 = h / (cb + sa);\n  const den = cb - sa;\n  sc.s2 = abs(den) > 1e-4 ? h / den : 1e9;\n  sc.r1 = abs(sc.s1) * sa;\n  sc.r2 = abs(sc.s2) * sa;\n  // A focus is the foot of the perpendicular from a sphere's centre to the\n  // plane; a contact circle is where the sphere meets the cone, at height\n  // s cos^2 a. Along a line of the cone it sits s cos a from the apex.\n  for (const [s, k] of [[sc.s1, 1], [sc.s2, 2]]) {\n    const d = cb * s - h;\n    sc[\"fx\" + k] = -d * sc.nx;\n    sc[\"fy\" + k] = s - d * sc.ny;\n    sc[\"g\" + k] = s * ca;\n  }\n  sc.e = sb / ca;\n}\n\n// The conic as a curve over the cone's azimuth phi: the line of the cone at\n// phi, t (sin a cos phi, cos a, sin a sin phi), meets the plane at\n// t = h / (cos b cos a - sin b sin a cos phi). On a hyperbola t changes sign\n// where that denominator does, and the point crosses to the other nappe.\nfunction conicT(sc, phi) {\n  const den = sc.ny * sc.ca + sc.nx * sc.sa * cos(phi);\n  return abs(den) \u003c 1e-6 ? 1e9 : sc.h / den;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[2], 30, 90);\n  S.cone = cl(k[3], 16, 34);\n  const sp = S.speed / 2;\n  if (input.btnPressed && input.btnPressed[0]) S.sw = 0;\n  let tilt = S.tilt;\n  if (S.sw >= 0) {\n    // Up to upright in 4.5 s, a 2 s rest, and back in 4.5 s, at Speed 2.\n    S.sw += (d * sp) / 11;\n    const u = S.sw, up = u \u003c 0.41 ? sm(u / 0.41) : u \u003c 0.59 ? 1 : 1 - sm((u - 0.59) / 0.41);\n    tilt += (90 - tilt) * up;\n    if (S.sw >= 1) S.sw = -1;\n  }\n  scene(S, tilt * RAD, S.cone * RAD);\n  const sc = S.sc;\n  // The view: level with the ellipse case's spheres while the cut is an\n  // ellipse, widening downwards to take in the other nappe as the eccentricity\n  // passes 0.8 on its way to the hyperbola.\n  const lo = -0.25 - 1.95 * sm((sc.e - 0.8) / 0.3);\n  S.lo += (lo - S.lo) * min(1, d * 3);\n  // The turn hurries past the azimuths where the camera sees the plane edge\n  // on and the conic flattens to a line, and lingers where it lies open.\n  const edgeOn = abs(sc.nx * cos(ELEV) * sin(S.th) + sc.ny * sin(ELEV));\n  S.th += d * sp * ((2 * PI) / 36) * (0.6 + 1.8 * exp(-((edgeOn / 0.18) ** 2)));\n  // The point moves at about 0.55 units a second along the conic. Off the\n  // drawn part of a hyperbola or parabola it skips ahead to where it comes\n  // back in.\n  let left = d * sp * 0.55, guard = 0;\n  while (left > 0 && guard++ \u003c 40) {\n    const t0 = conicT(sc, S.ph), t1 = conicT(sc, S.ph + 0.01);\n    const y0 = t0 * sc.ca;\n    if (y0 > YTOP || y0 \u003c YBOT + 0.1) {\n      S.ph += 0.05;\n      continue;\n    }\n    const x0 = t0 * sc.sa * cos(S.ph), z0 = t0 * sc.sa * sin(S.ph);\n    const x1 = t1 * sc.sa * cos(S.ph + 0.01), z1 = t1 * sc.sa * sin(S.ph + 0.01), y1 = t1 * sc.ca;\n    const ds = Math.hypot(x1 - x0, y1 - y0, z1 - z0) / 0.01;\n    const step = min(left / max(ds, 1e-3), 0.3);\n    S.ph += step;\n    left -= step * ds;\n  }\n  S.ph %= 2 * PI;\n}\n\n// Colours: lower sphere, upper sphere, cone, plane, conic, the two\n// segment colours, white.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0;\n  // The cone and the plane are seen faint, where a warm hue reads olive, so\n  // they lose more of their colour there than the bright parts do.\n  const set = (i, hh, s, v) => {\n    const w = warm(hh);\n    hsv(hh, s * (1 - (i === 2 || i === 3 ? 0.7 : 0.35) * w), v, c, i * 3);\n  };\n  set(0, h, 0.72, 1);\n  set(1, h + 0.2, 0.62, 1);\n  set(2, h + 0.1, 0.55, 1);\n  set(3, h + 0.04, 0.5, 1);\n  set(4, h + 0.62, 0.14, 1);\n  set(5, h + 0.62, 0.6, 1);\n  set(6, h + 0.42, 0.55, 1);\n  set(7, 0, 0, 1);\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.sc.h === undefined) return;\n  if (S.colHue !== S.hue) palette(S);\n  const sc = S.sc, col = S.col, base = S.base, lin = S.lin, zO = S.zO, zC = S.zC, zP = S.zP;\n  const hi = YTOP, lo = S.lo, ty = (hi + lo) / 2;\n  // A wider cone pulls the camera back, by the square root of how much\n  // wider it is than the 16 degree one, so a wide ellipse still fits.\n  const f = (128 * DIST) / ((hi - lo) * cos(ELEV) * sqrt(sc.k / tan(16 * RAD)));\n  // Camera basis. fwd looks at (0, ty, 0) from DIST away, ELEV above.\n  const ce = cos(ELEV), se = sin(ELEV), st = sin(S.th), ct = cos(S.th);\n  const ox = DIST * ce * st, oy = ty + DIST * se, oz = DIST * ce * ct;\n  const fx = -ce * st, fy = -se, fz = -ce * ct;\n  const rx = ct, rz = -st; // right = fwd x up, level\n  const ux = -fy * rz, uy = rz * fx - rx * fz, uz = fy * rx;\n  // The light hangs above and to the left of the camera.\n  let lx = -0.55 * rx + 0.75 * ux - 0.5 * fx, ly = 0.75 * uy - 0.5 * fy, lz = -0.55 * rz + 0.75 * uz - 0.5 * fz;\n  const ll = Math.hypot(lx, ly, lz);\n  lx /= ll;\n  ly /= ll;\n  lz /= ll;\n  const k2 = sc.k * sc.k, nx = sc.nx, ny = sc.ny, h = sc.h;\n  // Each sphere: height, radius, palette slot, and how warm its hue is.\n  const sph = [\n    [sc.s1, sc.r1, 0, warm(S.hue + H0)],\n    [sc.s2, sc.r2, 3, warm(S.hue + H0 + 0.2)],\n  ];\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const v = (63.5 - py) / f, bg = 0.025 + 0.02 * (py / H);\n    for (let px = 0; px \u003c W; px++, p++) {\n      const u = (px - 31.5) / f;\n      const dx = fx + u * rx + v * ux, dy = fy + v * uy, dz = fz + u * rz + v * uz;\n      const dd = dx * dx + dy * dy + dz * dz, il = 1 / sqrt(dd);\n      let r = bg * 0.6, g = bg * 0.75, b = bg * 1.5, tO = 1e9;\n      // The spheres, opaque and lit. They are drawn whole even where they\n      // rise past the cut cone, a ball sitting in a cup.\n      for (let q = 0; q \u003c 2; q++) {\n        const s = sph[q][0], rad = sph[q][1];\n        if (rad \u003c= 0 || abs(s) > 60) continue;\n        const ocy = oy - s, bb = ox * dx + ocy * dy + oz * dz, cc = ox * ox + ocy * ocy + oz * oz - rad * rad, disc = bb * bb - dd * cc;\n        if (disc \u003c= 0) continue;\n        const t = (-bb - sqrt(disc)) / dd;\n        if (t \u003c= 0 || t >= tO) continue;\n        tO = t;\n        const o = sph[q][2];\n        const hx = (ox + t * dx) / rad, hy = (oy + t * dy - s) / rad, hz = (oz + t * dz) / rad;\n        const di = max(0, hx * lx + hy * ly + hz * lz);\n        // Blinn highlight on the half vector between the light and the eye.\n        const vx = lx - dx * il, vy = ly - dy * il, vz = lz - dz * il;\n        const vl = Math.hypot(vx, vy, vz);\n        const hs = max(0, (hx * vx + hy * vy + hz * vz) / vl), spec = hs ** 28 * 0.75;\n        const rim = -(hx * dx + hy * dy + hz * dz) * il;\n        // Orange and yellow go brown in shade, so a warm sphere gets more\n        // fill light and stays gold.\n        const wq = sph[q][3], lit = 0.12 + 0.3 * wq + (0.8 - 0.2 * wq) * di * (0.55 + 0.45 * rim);\n        r = col[o] * lit + spec;\n        g = col[o + 1] * lit + spec;\n        b = col[o + 2] * lit + spec;\n      }\n      zO[p] = tO;\n      // The cone: x^2 + z^2 = k^2 y^2, both nappes. Glass, so each crossing\n      // adds a little light, more where the surface is seen edge on.\n      const A = dx * dx + dz * dz - k2 * dy * dy, B = 2 * (ox * dx + oz * dz - k2 * oy * dy), C = ox * ox + oz * oz - k2 * oy * oy;\n      let tc1 = 1e9, tc2 = 1e9;\n      const disc = B * B - 4 * A * C;\n      if (disc > 0 && abs(A) > 1e-9) {\n        const sq = sqrt(disc);\n        let ta = (-B - sq) / (2 * A), tb = (-B + sq) / (2 * A);\n        if (ta > tb) [ta, tb] = [tb, ta];\n        for (const t of [ta, tb]) {\n          const y = oy + t * dy;\n          if (t > 0 && y \u003c YTOP && y > YBOT) {\n            if (tc1 > 1e8) tc1 = t;\n            else tc2 = t;\n          }\n        }\n      }\n      zC[p] = tc1;\n      // The plane, clipped to a square in x and z and to the cone's height.\n      // It is brighter inside the cone, where it is the conic's own disc, and\n      // lit along its edges.\n      let tp = 1e9, pin = false, pm = 0;\n      const nd = nx * dx + ny * dy;\n      if (abs(nd) > 1e-6) {\n        const t = (h - nx * ox - ny * oy) / nd;\n        if (t > 0 && t \u003c tO) {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz;\n          const m = min(PX - abs(x), PX - abs(z), y - YBOT, YTOP - y);\n          if (m > 0) {\n            tp = t;\n            pin = x * x + z * z \u003c k2 * y * y;\n            pm = (m * f) / t;\n          }\n        }\n      }\n      zP[p] = tp;\n      // The glass layers in front of the opaque hit, far to near: the far\n      // wall of the cone, then the near wall, with the plane wherever it falls.\n      const pa = pin ? 0.2 : 0.12, pe = (pin ? 0.3 : 0.08) + 0.5 * exp(-pm * pm * 0.8);\n      const pos = tp > tc2 ? 0 : tp > tc1 ? 1 : 2;\n      for (let L = 0; L \u003c 3; L++) {\n        const isP = L === pos, t = isP ? tp : (L \u003c pos ? L : L - 1) === 0 ? tc2 : tc1;\n        if (t >= tO || t > 1e8) continue;\n        let a, e, o;\n        if (isP) {\n          a = pa;\n          e = pe;\n          o = 9;\n        } else {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz, gy = -k2 * y, gl = Math.hypot(x, gy, z) || 1;\n          const ci = abs((x * dx + gy * dy + z * dz) / gl) * il, fr = (1 - ci) * (1 - ci);\n          a = 0.06 + 0.2 * fr;\n          e = 0.07 + 0.42 * fr;\n          o = 6;\n        }\n        r = r * (1 - a) + col[o] * e;\n        g = g * (1 - a) + col[o + 1] * e;\n        b = b * (1 - a) + col[o + 2] * e;\n      }\n      base[p * 3] = r;\n      base[p * 3 + 1] = g;\n      base[p * 3 + 2] = b;\n    }\n  }\n\n  // Lines and points, splatted over the shading. Behind a sphere they show\n  // through dimmed, behind the cone's near wall or the plane a little dimmer.\n  lin.fill(0);\n  const ssa = sc.sa, sca = sc.ca;\n  let cr = 0, cg = 0, cb = 0, cw = 0;\n  // A thick line is laid as two strands half an LED either side of its\n  // path on the screen, (tox, toy) apart.\n  let thick = false, tox = 0, toy = 0;\n  const put = (sx, sy, k) => {\n    const ix = floor(sx), iy = floor(sy), ax = sx - ix, ay = sy - iy;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = ix + (j & 1), Y = iy + (j >> 1);\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const wt = k * (j & 1 ? ax : 1 - ax) * (j >> 1 ? ay : 1 - ay), o = (Y * W + X) * 3;\n      lin[o] += cr * wt;\n      lin[o + 1] += cg * wt;\n      lin[o + 2] += cb * wt;\n    }\n  };\n  const splat = (x, y, z, w) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = qx * fx + qy * fy + qz * fz;\n    if (zz \u003c 0.1) return;\n    const sx = 31.5 + (f * (qx * rx + qz * rz)) / zz, sy = 63.5 - (f * (qx * ux + qy * uy + qz * uz)) / zz;\n    if (sx \u003c -2 || sx > W + 1 || sy \u003c -2 || sy > H + 1) return;\n    const ni = cl(Math.round(sy), 0, H - 1) * W + cl(Math.round(sx), 0, W - 1);\n    let k = w;\n    if (zz > zO[ni] + 0.04) k *= 0.38;\n    if (zz > zC[ni] + 0.04) k *= 0.62;\n    if (zz > zP[ni] + 0.03) k *= 0.75;\n    if (!thick) put(sx, sy, k);\n    else {\n      put(sx + tox, sy + toy, k * 0.62);\n      put(sx - tox, sy - toy, k * 0.62);\n    }\n  };\n  const proj = (x, y, z) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = max(0.1, qx * fx + qy * fy + qz * fz);\n    return [(f * (qx * rx + qz * rz)) / zz, (f * (qx * ux + qy * uy + qz * uz)) / zz];\n  };\n  const seg = (ax, ay, az, bx, by, bz) => {\n    const [sx0, sy0] = proj(ax, ay, az), [sx1, sy1] = proj(bx, by, bz);\n    const L = Math.hypot(sx1 - sx0, sy1 - sy0), n = max(1, Math.ceil(L / 0.6)), w = (L / n) * cw;\n    tox = L > 0 ? (-(sy1 - sy0) / L) * 0.55 : 0;\n    toy = L > 0 ? ((sx1 - sx0) / L) * 0.55 : 0;\n    for (let i = 0; i \u003c= n; i++) {\n      const t = i / n;\n      splat(ax + (bx - ax) * t, ay + (by - ay) * t, az + (bz - az) * t, i === 0 || i === n ? w / 2 : w);\n    }\n  };\n  const use = (o, w) => {\n    cr = col[o * 3];\n    cg = col[o * 3 + 1];\n    cb = col[o * 3 + 2];\n    cw = w;\n  };\n  // A point on the line of the cone at azimuth phi, t along it.\n  const gp = (phi, t) => [t * ssa * cos(phi), t * sca, t * ssa * sin(phi)];\n  // The cone's lines through the apex and its two rims.\n  use(2, 0.3);\n  const tTop = YTOP / sca, tBot = YBOT / sca;\n  for (let i = 0; i \u003c GEN; i++) {\n    const phi = (i * 2 * PI) / GEN + 0.3;\n    seg(...gp(phi, tTop), 0, 0, 0);\n    seg(0, 0, 0, ...gp(phi, tBot));\n  }\n  const ring = (y, rad, n) => {\n    let px = rad, pz = 0;\n    for (let i = 1; i \u003c= n; i++) {\n      const a = (i * 2 * PI) / n, qx = rad * cos(a), qz = rad * sin(a);\n      seg(px, y, pz, qx, y, qz);\n      px = qx;\n      pz = qz;\n    }\n  };\n  use(2, 0.5);\n  ring(YTOP, YTOP * sc.k, 72);\n  ring(YBOT, -YBOT * sc.k, 72);\n  // The contact circles, in each sphere's colour, brighter.\n  const okS = (s, r) => r > 0 && abs(s) \u003c 60;\n  use(0, 0.95);\n  if (okS(sc.s1, sc.r1)) ring(sc.g1 * sca, abs(sc.g1 * ssa), 64);\n  use(1, 0.95);\n  if (okS(sc.s2, sc.r2) && sc.g2 * sca \u003c YTOP && sc.g2 * sca > YBOT) ring(sc.g2 * sca, abs(sc.g2 * ssa), 64);\n  // The conic, drawn in pieces wherever it lies inside the cut cone.\n  use(4, 1.35);\n  const NPH = 240;\n  let prev = null;\n  for (let i = 0; i \u003c= NPH; i++) {\n    const phi = (i * 2 * PI) / NPH, t = conicT(sc, phi), y = t * sca;\n    const okp = y \u003c YTOP && y > YBOT;\n    const cur = okp ? gp(phi, t) : null;\n    if (cur && prev && abs(cur[1] - prev[1]) \u003c 1.2) seg(...prev, ...cur);\n    prev = cur;\n  }\n  // The point, its two distances to the foci and the line of the cone\n  // through it, cut where it meets the two contact circles. Each pair in one\n  // colour: PF1 equals the stretch to circle 1, PF2 the stretch to circle 2.\n  const tP = conicT(sc, S.ph), yP = tP * sca;\n  if (yP \u003c YTOP && yP > YBOT) {\n    const [Px, Py, Pz] = gp(S.ph, tP);\n    const clipT = (t) => cl(t, tBot, tTop);\n    thick = true;\n    use(5, 1.5);\n    if (okS(sc.s1, sc.r1)) {\n      seg(Px, Py, Pz, sc.fx1, sc.fy1, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g1)));\n    }\n    use(6, 1.5);\n    if (okS(sc.s2, sc.r2)) {\n      seg(Px, Py, Pz, sc.fx2, sc.fy2, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g2)));\n    } else seg(Px, Py, Pz, ...gp(S.ph, sc.g2 > 0 ? tTop : tBot));\n    thick = false;\n    use(7, 2.2);\n    for (const [ddx, ddy] of [[0, 0], [0.012, 0], [-0.012, 0], [0, 0.012], [0, -0.012]]) splat(Px + ddx, Py + ddy, Pz, 1);\n  }\n  // The foci, white points where the spheres touch the plane.\n  use(7, 1.6);\n  for (const [s, r, fxx, fyy] of [[sc.s1, sc.r1, sc.fx1, sc.fy1], [sc.s2, sc.r2, sc.fx2, sc.fy2]]) {\n    if (!okS(s, r) || fyy > YTOP || fyy \u003c YBOT) continue;\n    for (const [ddx, ddy] of [[0, 0], [0.014, 0], [-0.014, 0], [0, 0.014], [0, -0.014]]) splat(fxx + ddx, fyy + ddy, 0, 1);\n  }\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3;\n      display.setPixel(x, y, cl((base[o] + lin[o]) * 255, 0, 255), cl((base[o + 1] + lin[o + 1]) * 255, 0, 255), cl((base[o + 2] + lin[o + 2]) * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-dandelin-spheres","type":"code","name":"dandelin-spheres","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dandelin Spheres\n// Family:  geometry\n// Idea:    A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dandelin spheres (Germinal Pierre Dandelin, 1822), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34\n//\n// Knob 1: Hue. Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink.\n// Knob 2: Speed. At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50.\n// Knob 4: Cone. The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34.\n// Buttons: K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, tan, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst RAD = PI / 180;\n\n// World units: the apex at the origin, y up the axis. The plane turns about\n// the horizontal line through (XP, YP) along z, so at 90 degrees it stands\n// 0.3 off the axis and still cuts a hyperbola instead of two crossing lines.\nconst XP = -0.3, YP = 0.95;\n// The cone is cut off at these heights.\nconst YTOP = 2.25, YBOT = -2.4;\n// The plane is drawn where |x| and |z| are under this.\nconst PX = 1.05;\n// Camera: this far from the point it looks at, this many degrees above it.\nconst DIST = 9, ELEV = 28 * RAD;\n// Five lines of the cone, round its axis.\nconst GEN = 5;\n// The opening hue sits here on the wheel: teal.\nconst H0 = 0.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n// How far a hue sits in the orange and yellow that turn brown when shaded.\nconst warm = (h) => {\n  h -= floor(h);\n  return max(0, 1 - abs(h - 0.11) / 0.1);\n};\n\nexport function setup(params) {\n  params.s = {\n    th: 0.6, ph: 0, sw: -1, hue: 0, tilt: 30, cone: 16, speed: 2, lo: -0.25,\n    base: new Float32Array(N * 3), lin: new Float32Array(N * 3),\n    zO: new Float32Array(N), zC: new Float32Array(N), zP: new Float32Array(N),\n    col: new Float32Array(8 * 3), colHue: NaN, sc: {},\n  };\n}\n\n// The scene for a tilt and half-angle in radians: the plane n.p = h with\n// n = (-sin b, cos b, 0), and the two spheres on the axis at heights s with\n// radius |s| sin a. A sphere at s is tangent to the cone, and tangent to the\n// plane when |cos b s - h| = |s| sin a, so s = h / (cos b + sin a), the one\n// between the apex and the plane, and s = h / (cos b - sin a), past the plane\n// while cos b > sin a (an ellipse), at infinity when they are equal (a\n// parabola), and below the apex in the other nappe once sin a is the larger\n// (a hyperbola).\nfunction scene(S, b, a) {\n  const sa = sin(a), ca = cos(a), sb = sin(b), cb = cos(b), h = cb * YP - sb * XP;\n  const sc = S.sc;\n  sc.sa = sa;\n  sc.ca = ca;\n  sc.k = sa / ca;\n  sc.nx = -sb;\n  sc.ny = cb;\n  sc.h = h;\n  sc.s1 = h / (cb + sa);\n  const den = cb - sa;\n  sc.s2 = abs(den) > 1e-4 ? h / den : 1e9;\n  sc.r1 = abs(sc.s1) * sa;\n  sc.r2 = abs(sc.s2) * sa;\n  // A focus is the foot of the perpendicular from a sphere's centre to the\n  // plane; a contact circle is where the sphere meets the cone, at height\n  // s cos^2 a. Along a line of the cone it sits s cos a from the apex.\n  for (const [s, k] of [[sc.s1, 1], [sc.s2, 2]]) {\n    const d = cb * s - h;\n    sc[\"fx\" + k] = -d * sc.nx;\n    sc[\"fy\" + k] = s - d * sc.ny;\n    sc[\"g\" + k] = s * ca;\n  }\n  sc.e = sb / ca;\n}\n\n// The conic as a curve over the cone's azimuth phi: the line of the cone at\n// phi, t (sin a cos phi, cos a, sin a sin phi), meets the plane at\n// t = h / (cos b cos a - sin b sin a cos phi). On a hyperbola t changes sign\n// where that denominator does, and the point crosses to the other nappe.\nfunction conicT(sc, phi) {\n  const den = sc.ny * sc.ca + sc.nx * sc.sa * cos(phi);\n  return abs(den) \u003c 1e-6 ? 1e9 : sc.h / den;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[2], 30, 90);\n  S.cone = cl(k[3], 16, 34);\n  const sp = S.speed / 2;\n  if (input.btnPressed && input.btnPressed[0]) S.sw = 0;\n  let tilt = S.tilt;\n  if (S.sw >= 0) {\n    // Up to upright in 4.5 s, a 2 s rest, and back in 4.5 s, at Speed 2.\n    S.sw += (d * sp) / 11;\n    const u = S.sw, up = u \u003c 0.41 ? sm(u / 0.41) : u \u003c 0.59 ? 1 : 1 - sm((u - 0.59) / 0.41);\n    tilt += (90 - tilt) * up;\n    if (S.sw >= 1) S.sw = -1;\n  }\n  scene(S, tilt * RAD, S.cone * RAD);\n  const sc = S.sc;\n  // The view: level with the ellipse case's spheres while the cut is an\n  // ellipse, widening downwards to take in the other nappe as the eccentricity\n  // passes 0.8 on its way to the hyperbola.\n  const lo = -0.25 - 1.95 * sm((sc.e - 0.8) / 0.3);\n  S.lo += (lo - S.lo) * min(1, d * 3);\n  // The turn hurries past the azimuths where the camera sees the plane edge\n  // on and the conic flattens to a line, and lingers where it lies open.\n  const edgeOn = abs(sc.nx * cos(ELEV) * sin(S.th) + sc.ny * sin(ELEV));\n  S.th += d * sp * ((2 * PI) / 36) * (0.6 + 1.8 * exp(-((edgeOn / 0.18) ** 2)));\n  // The point moves at about 0.55 units a second along the conic. Off the\n  // drawn part of a hyperbola or parabola it skips ahead to where it comes\n  // back in.\n  let left = d * sp * 0.55, guard = 0;\n  while (left > 0 && guard++ \u003c 40) {\n    const t0 = conicT(sc, S.ph), t1 = conicT(sc, S.ph + 0.01);\n    const y0 = t0 * sc.ca;\n    if (y0 > YTOP || y0 \u003c YBOT + 0.1) {\n      S.ph += 0.05;\n      continue;\n    }\n    const x0 = t0 * sc.sa * cos(S.ph), z0 = t0 * sc.sa * sin(S.ph);\n    const x1 = t1 * sc.sa * cos(S.ph + 0.01), z1 = t1 * sc.sa * sin(S.ph + 0.01), y1 = t1 * sc.ca;\n    const ds = Math.hypot(x1 - x0, y1 - y0, z1 - z0) / 0.01;\n    const step = min(left / max(ds, 1e-3), 0.3);\n    S.ph += step;\n    left -= step * ds;\n  }\n  S.ph %= 2 * PI;\n}\n\n// Colours: lower sphere, upper sphere, cone, plane, conic, the two\n// segment colours, white.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0;\n  // The cone and the plane are seen faint, where a warm hue reads olive, so\n  // they lose more of their colour there than the bright parts do.\n  const set = (i, hh, s, v) => {\n    const w = warm(hh);\n    hsv(hh, s * (1 - (i === 2 || i === 3 ? 0.7 : 0.35) * w), v, c, i * 3);\n  };\n  set(0, h, 0.72, 1);\n  set(1, h + 0.2, 0.62, 1);\n  set(2, h + 0.1, 0.55, 1);\n  set(3, h + 0.04, 0.5, 1);\n  set(4, h + 0.62, 0.14, 1);\n  set(5, h + 0.62, 0.6, 1);\n  set(6, h + 0.42, 0.55, 1);\n  set(7, 0, 0, 1);\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.sc.h === undefined) return;\n  if (S.colHue !== S.hue) palette(S);\n  const sc = S.sc, col = S.col, base = S.base, lin = S.lin, zO = S.zO, zC = S.zC, zP = S.zP;\n  const hi = YTOP, lo = S.lo, ty = (hi + lo) / 2;\n  // A wider cone pulls the camera back, by the square root of how much\n  // wider it is than the 16 degree one, so a wide ellipse still fits.\n  const f = (128 * DIST) / ((hi - lo) * cos(ELEV) * sqrt(sc.k / tan(16 * RAD)));\n  // Camera basis. fwd looks at (0, ty, 0) from DIST away, ELEV above.\n  const ce = cos(ELEV), se = sin(ELEV), st = sin(S.th), ct = cos(S.th);\n  const ox = DIST * ce * st, oy = ty + DIST * se, oz = DIST * ce * ct;\n  const fx = -ce * st, fy = -se, fz = -ce * ct;\n  const rx = ct, rz = -st; // right = fwd x up, level\n  const ux = -fy * rz, uy = rz * fx - rx * fz, uz = fy * rx;\n  // The light hangs above and to the left of the camera.\n  let lx = -0.55 * rx + 0.75 * ux - 0.5 * fx, ly = 0.75 * uy - 0.5 * fy, lz = -0.55 * rz + 0.75 * uz - 0.5 * fz;\n  const ll = Math.hypot(lx, ly, lz);\n  lx /= ll;\n  ly /= ll;\n  lz /= ll;\n  const k2 = sc.k * sc.k, nx = sc.nx, ny = sc.ny, h = sc.h;\n  // Each sphere: height, radius, palette slot, and how warm its hue is.\n  const sph = [\n    [sc.s1, sc.r1, 0, warm(S.hue + H0)],\n    [sc.s2, sc.r2, 3, warm(S.hue + H0 + 0.2)],\n  ];\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const v = (63.5 - py) / f, bg = 0.025 + 0.02 * (py / H);\n    for (let px = 0; px \u003c W; px++, p++) {\n      const u = (px - 31.5) / f;\n      const dx = fx + u * rx + v * ux, dy = fy + v * uy, dz = fz + u * rz + v * uz;\n      const dd = dx * dx + dy * dy + dz * dz, il = 1 / sqrt(dd);\n      let r = bg * 0.6, g = bg * 0.75, b = bg * 1.5, tO = 1e9;\n      // The spheres, opaque and lit. They are drawn whole even where they\n      // rise past the cut cone, a ball sitting in a cup.\n      for (let q = 0; q \u003c 2; q++) {\n        const s = sph[q][0], rad = sph[q][1];\n        if (rad \u003c= 0 || abs(s) > 60) continue;\n        const ocy = oy - s, bb = ox * dx + ocy * dy + oz * dz, cc = ox * ox + ocy * ocy + oz * oz - rad * rad, disc = bb * bb - dd * cc;\n        if (disc \u003c= 0) continue;\n        const t = (-bb - sqrt(disc)) / dd;\n        if (t \u003c= 0 || t >= tO) continue;\n        tO = t;\n        const o = sph[q][2];\n        const hx = (ox + t * dx) / rad, hy = (oy + t * dy - s) / rad, hz = (oz + t * dz) / rad;\n        const di = max(0, hx * lx + hy * ly + hz * lz);\n        // Blinn highlight on the half vector between the light and the eye.\n        const vx = lx - dx * il, vy = ly - dy * il, vz = lz - dz * il;\n        const vl = Math.hypot(vx, vy, vz);\n        const hs = max(0, (hx * vx + hy * vy + hz * vz) / vl), spec = hs ** 28 * 0.75;\n        const rim = -(hx * dx + hy * dy + hz * dz) * il;\n        // Orange and yellow go brown in shade, so a warm sphere gets more\n        // fill light and stays gold.\n        const wq = sph[q][3], lit = 0.12 + 0.3 * wq + (0.8 - 0.2 * wq) * di * (0.55 + 0.45 * rim);\n        r = col[o] * lit + spec;\n        g = col[o + 1] * lit + spec;\n        b = col[o + 2] * lit + spec;\n      }\n      zO[p] = tO;\n      // The cone: x^2 + z^2 = k^2 y^2, both nappes. Glass, so each crossing\n      // adds a little light, more where the surface is seen edge on.\n      const A = dx * dx + dz * dz - k2 * dy * dy, B = 2 * (ox * dx + oz * dz - k2 * oy * dy), C = ox * ox + oz * oz - k2 * oy * oy;\n      let tc1 = 1e9, tc2 = 1e9;\n      const disc = B * B - 4 * A * C;\n      if (disc > 0 && abs(A) > 1e-9) {\n        const sq = sqrt(disc);\n        let ta = (-B - sq) / (2 * A), tb = (-B + sq) / (2 * A);\n        if (ta > tb) [ta, tb] = [tb, ta];\n        for (const t of [ta, tb]) {\n          const y = oy + t * dy;\n          if (t > 0 && y \u003c YTOP && y > YBOT) {\n            if (tc1 > 1e8) tc1 = t;\n            else tc2 = t;\n          }\n        }\n      }\n      zC[p] = tc1;\n      // The plane, clipped to a square in x and z and to the cone's height.\n      // It is brighter inside the cone, where it is the conic's own disc, and\n      // lit along its edges.\n      let tp = 1e9, pin = false, pm = 0;\n      const nd = nx * dx + ny * dy;\n      if (abs(nd) > 1e-6) {\n        const t = (h - nx * ox - ny * oy) / nd;\n        if (t > 0 && t \u003c tO) {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz;\n          const m = min(PX - abs(x), PX - abs(z), y - YBOT, YTOP - y);\n          if (m > 0) {\n            tp = t;\n            pin = x * x + z * z \u003c k2 * y * y;\n            pm = (m * f) / t;\n          }\n        }\n      }\n      zP[p] = tp;\n      // The glass layers in front of the opaque hit, far to near: the far\n      // wall of the cone, then the near wall, with the plane wherever it falls.\n      const pa = pin ? 0.2 : 0.12, pe = (pin ? 0.3 : 0.08) + 0.5 * exp(-pm * pm * 0.8);\n      const pos = tp > tc2 ? 0 : tp > tc1 ? 1 : 2;\n      for (let L = 0; L \u003c 3; L++) {\n        const isP = L === pos, t = isP ? tp : (L \u003c pos ? L : L - 1) === 0 ? tc2 : tc1;\n        if (t >= tO || t > 1e8) continue;\n        let a, e, o;\n        if (isP) {\n          a = pa;\n          e = pe;\n          o = 9;\n        } else {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz, gy = -k2 * y, gl = Math.hypot(x, gy, z) || 1;\n          const ci = abs((x * dx + gy * dy + z * dz) / gl) * il, fr = (1 - ci) * (1 - ci);\n          a = 0.06 + 0.2 * fr;\n          e = 0.07 + 0.42 * fr;\n          o = 6;\n        }\n        r = r * (1 - a) + col[o] * e;\n        g = g * (1 - a) + col[o + 1] * e;\n        b = b * (1 - a) + col[o + 2] * e;\n      }\n      base[p * 3] = r;\n      base[p * 3 + 1] = g;\n      base[p * 3 + 2] = b;\n    }\n  }\n\n  // Lines and points, splatted over the shading. Behind a sphere they show\n  // through dimmed, behind the cone's near wall or the plane a little dimmer.\n  lin.fill(0);\n  const ssa = sc.sa, sca = sc.ca;\n  let cr = 0, cg = 0, cb = 0, cw = 0;\n  // A thick line is laid as two strands half an LED either side of its\n  // path on the screen, (tox, toy) apart.\n  let thick = false, tox = 0, toy = 0;\n  const put = (sx, sy, k) => {\n    const ix = floor(sx), iy = floor(sy), ax = sx - ix, ay = sy - iy;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = ix + (j & 1), Y = iy + (j >> 1);\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const wt = k * (j & 1 ? ax : 1 - ax) * (j >> 1 ? ay : 1 - ay), o = (Y * W + X) * 3;\n      lin[o] += cr * wt;\n      lin[o + 1] += cg * wt;\n      lin[o + 2] += cb * wt;\n    }\n  };\n  const splat = (x, y, z, w) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = qx * fx + qy * fy + qz * fz;\n    if (zz \u003c 0.1) return;\n    const sx = 31.5 + (f * (qx * rx + qz * rz)) / zz, sy = 63.5 - (f * (qx * ux + qy * uy + qz * uz)) / zz;\n    if (sx \u003c -2 || sx > W + 1 || sy \u003c -2 || sy > H + 1) return;\n    const ni = cl(Math.round(sy), 0, H - 1) * W + cl(Math.round(sx), 0, W - 1);\n    let k = w;\n    if (zz > zO[ni] + 0.04) k *= 0.38;\n    if (zz > zC[ni] + 0.04) k *= 0.62;\n    if (zz > zP[ni] + 0.03) k *= 0.75;\n    if (!thick) put(sx, sy, k);\n    else {\n      put(sx + tox, sy + toy, k * 0.62);\n      put(sx - tox, sy - toy, k * 0.62);\n    }\n  };\n  const proj = (x, y, z) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = max(0.1, qx * fx + qy * fy + qz * fz);\n    return [(f * (qx * rx + qz * rz)) / zz, (f * (qx * ux + qy * uy + qz * uz)) / zz];\n  };\n  const seg = (ax, ay, az, bx, by, bz) => {\n    const [sx0, sy0] = proj(ax, ay, az), [sx1, sy1] = proj(bx, by, bz);\n    const L = Math.hypot(sx1 - sx0, sy1 - sy0), n = max(1, Math.ceil(L / 0.6)), w = (L / n) * cw;\n    tox = L > 0 ? (-(sy1 - sy0) / L) * 0.55 : 0;\n    toy = L > 0 ? ((sx1 - sx0) / L) * 0.55 : 0;\n    for (let i = 0; i \u003c= n; i++) {\n      const t = i / n;\n      splat(ax + (bx - ax) * t, ay + (by - ay) * t, az + (bz - az) * t, i === 0 || i === n ? w / 2 : w);\n    }\n  };\n  const use = (o, w) => {\n    cr = col[o * 3];\n    cg = col[o * 3 + 1];\n    cb = col[o * 3 + 2];\n    cw = w;\n  };\n  // A point on the line of the cone at azimuth phi, t along it.\n  const gp = (phi, t) => [t * ssa * cos(phi), t * sca, t * ssa * sin(phi)];\n  // The cone's lines through the apex and its two rims.\n  use(2, 0.3);\n  const tTop = YTOP / sca, tBot = YBOT / sca;\n  for (let i = 0; i \u003c GEN; i++) {\n    const phi = (i * 2 * PI) / GEN + 0.3;\n    seg(...gp(phi, tTop), 0, 0, 0);\n    seg(0, 0, 0, ...gp(phi, tBot));\n  }\n  const ring = (y, rad, n) => {\n    let px = rad, pz = 0;\n    for (let i = 1; i \u003c= n; i++) {\n      const a = (i * 2 * PI) / n, qx = rad * cos(a), qz = rad * sin(a);\n      seg(px, y, pz, qx, y, qz);\n      px = qx;\n      pz = qz;\n    }\n  };\n  use(2, 0.5);\n  ring(YTOP, YTOP * sc.k, 72);\n  ring(YBOT, -YBOT * sc.k, 72);\n  // The contact circles, in each sphere's colour, brighter.\n  const okS = (s, r) => r > 0 && abs(s) \u003c 60;\n  use(0, 0.95);\n  if (okS(sc.s1, sc.r1)) ring(sc.g1 * sca, abs(sc.g1 * ssa), 64);\n  use(1, 0.95);\n  if (okS(sc.s2, sc.r2) && sc.g2 * sca \u003c YTOP && sc.g2 * sca > YBOT) ring(sc.g2 * sca, abs(sc.g2 * ssa), 64);\n  // The conic, drawn in pieces wherever it lies inside the cut cone.\n  use(4, 1.35);\n  const NPH = 240;\n  let prev = null;\n  for (let i = 0; i \u003c= NPH; i++) {\n    const phi = (i * 2 * PI) / NPH, t = conicT(sc, phi), y = t * sca;\n    const okp = y \u003c YTOP && y > YBOT;\n    const cur = okp ? gp(phi, t) : null;\n    if (cur && prev && abs(cur[1] - prev[1]) \u003c 1.2) seg(...prev, ...cur);\n    prev = cur;\n  }\n  // The point, its two distances to the foci and the line of the cone\n  // through it, cut where it meets the two contact circles. Each pair in one\n  // colour: PF1 equals the stretch to circle 1, PF2 the stretch to circle 2.\n  const tP = conicT(sc, S.ph), yP = tP * sca;\n  if (yP \u003c YTOP && yP > YBOT) {\n    const [Px, Py, Pz] = gp(S.ph, tP);\n    const clipT = (t) => cl(t, tBot, tTop);\n    thick = true;\n    use(5, 1.5);\n    if (okS(sc.s1, sc.r1)) {\n      seg(Px, Py, Pz, sc.fx1, sc.fy1, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g1)));\n    }\n    use(6, 1.5);\n    if (okS(sc.s2, sc.r2)) {\n      seg(Px, Py, Pz, sc.fx2, sc.fy2, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g2)));\n    } else seg(Px, Py, Pz, ...gp(S.ph, sc.g2 > 0 ? tTop : tBot));\n    thick = false;\n    use(7, 2.2);\n    for (const [ddx, ddy] of [[0, 0], [0.012, 0], [-0.012, 0], [0, 0.012], [0, -0.012]]) splat(Px + ddx, Py + ddy, Pz, 1);\n  }\n  // The foci, white points where the spheres touch the plane.\n  use(7, 1.6);\n  for (const [s, r, fxx, fyy] of [[sc.s1, sc.r1, sc.fx1, sc.fy1], [sc.s2, sc.r2, sc.fx2, sc.fy2]]) {\n    if (!okS(s, r) || fyy > YTOP || fyy \u003c YBOT) continue;\n    for (const [ddx, ddy] of [[0, 0], [0.014, 0], [-0.014, 0], [0, 0.014], [0, -0.014]]) splat(fxx + ddx, fyy + ddy, 0, 1);\n  }\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3;\n      display.setPixel(x, y, cl((base[o] + lin[o]) * 255, 0, 255), cl((base[o + 1] + lin[o + 1]) * 255, 0, 255), cl((base[o + 2] + lin[o + 2]) * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower."},{"name":"Tilt","min":30,"max":90,"about":"The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50."},{"name":"Cone","min":16,"max":34,"about":"The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34."}],"start":[0,2,30,16],"measures":{"motion":0.1793,"detail":0.0495,"edges":0.3572,"complexity":1.3922,"coverage":0.6125,"colour":0.1958,"drift":0.0301},"knobResponse":[0.1111,0.0383,0.2036,0.1906]},{"slug":"dark-field","title":"Dark Field","family":"microbe","round":26,"note":"암시야 현미경 속 연못물 한 방울이에요. 볼복스와 짚신벌레, 돌말, 해캄 실 위의 종벌레가 검은 바탕에 흩은 빛으로만 빛나요. K1 이 라인베르크와 위상차로 조명을 바꾸고, 누르면 종벌레 자루가 용수철처럼 감겨요.","idea":"A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.","buttons":"K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.","code":"// ===== Patternflow pattern =====\n// Title:   Dark Field\n// Family:  microbe\n// Idea:    A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after dark-field and Rheinberg illumination in the light microscope\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1\n//\n// Knob 1: Light. At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos.\n// Knob 2: Speed. At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower.\n// Knob 3: Crowd. At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in.\n// Knob 4: Focus. Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit.\n// Buttons: K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.\n\nconst W = 64, H = 128, N = W * H, HW = 32, HH = 64;\nconst { min, max, floor, round, ceil, sin, cos, sqrt, exp, abs, PI, atan2 } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rr = (a, b) => a + (b - a) * rnd();\nfunction h32(a, b) {\n  let h = Math.imul(a ^ Math.imul(b, 0x27d4eb2d), 0x9e3779b1);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca77);\n  h ^= h >>> 13;\n  return (h ^ (h >>> 16)) >>> 0;\n}\n\n// Small things live on a torus a little larger than the view, so what leaves\n// one side comes back at the other out of sight. Big swimmers turn back\n// toward the middle near an edge.\nconst wrap = (o, m = 12) => ((o.x -= (W + 2 * m) * floor((o.x + m) / (W + 2 * m))), (o.y -= (H + 2 * m) * floor((o.y + m) / (H + 2 * m))));\nconst go = (o, v) => ((o.x += cos(o.h) * v), (o.y += sin(o.h) * v));\nfunction swim(o, d) {\n  if ((o.z += o.vz * d) > 1 || o.z \u003c -1) o.vz = -o.vz;\n  if (o.x > 8 && o.x \u003c 56 && o.y > 12 && o.y \u003c 116) return;\n  let e = atan2(64 - o.y, 32 - o.x) - o.h;\n  o.h += cl(e - TAU * round(e / TAU), -1, 1) * 1.2 * d;\n}\n// Colours each thing scatters in dark field.\nconst C = {\n  cell: [110, 255, 118], vrim: [175, 255, 165], dau: [64, 255, 92], par: [200, 222, 255], gran: [255, 236, 196], dia: [255, 194, 72],\n  vor: [222, 236, 255], rot: [255, 226, 186], eug: [132, 255, 140], amb: [255, 184, 100], gry: [212, 206, 198], wall: [205, 242, 182],\n  chl: [84, 236, 90], osc: [120, 250, 222],\n};\n// Rheinberg: an annular filter yellow at its sides and red top and bottom, so\n// an edge's colour follows the way it faces (q = nx² - ny²), on a blue field.\nconst RA = [255, 220, 46], RB = [255, 44, 40];\nconst RM = RA.map((v, i) => (v + RB[i]) / 2), RH = RA.map((v, i) => (v - RB[i]) / 2);\nconst FIELD = [4, 16, 60], PHASE = [74, 82, 72];\n\n// The algal thread, a Spirogyra filament across the lower third: its centre\n// at arc length s and its unit tangent.\nconst FL = 136;\nlet fx = 0, fy = 0, ftx = 1, fty = 0;\nfunction fil(s) {\n  const dy = -0.2 + 0.225 * cos(s * 0.045 + 0.3), l = sqrt(1 + dy * dy);\n  (fx = s - 30), (fy = 109 - 0.2 * s + 5 * sin(s * 0.045 + 0.3)), (ftx = 1 / l), (fty = dy / l);\n}\n\n// Light goes into a sharp buffer and, by how far the thing lies from the\n// focal plane, into a halo buffer at half resolution that is blurred and\n// spread back over the LEDs.\nlet S, Q, ox = 0, oy = 0, foc = 0, m1 = 0, wS = 1, wQ = 0, lastP = -1;\nconst K0 = [0, 0, 0], K1 = [0, 0, 0];\nfunction col(c, g = 1) {\n  for (let i = 0; i \u003c 3; i++) (K0[i] = (g * (c[i] + m1 * (RM[i] - c[i]))) / 255), (K1[i] = (g * m1 * RH[i]) / 255);\n}\nfunction dep(z) {\n  const b = max(0, abs(z - foc) - 0.15) * 2.4;\n  wS = max(0, 1 - b);\n  wQ = min(1, b) / (1 + 0.5 * max(0, b - 1));\n}\nfunction put(x, y, s, q = 0) {\n  const xi = round(x - ox), yi = round(y - oy), o = (yi * W + xi) * 3;\n  if (xi \u003c 0 || yi \u003c 0 || xi >= W || yi >= H || o === lastP) return;\n  lastP = o;\n  const r = s * (K0[0] + q * K1[0]), g = s * (K0[1] + q * K1[1]), b = s * (K0[2] + q * K1[2]), h = ((yi >> 1) * HW + (xi >> 1)) * 3;\n  if (wS) (S[o] += r * wS), (S[o + 1] += g * wS), (S[o + 2] += b * wS);\n  if (wQ) (Q[h] += r * wQ), (Q[h + 1] += g * wQ), (Q[h + 2] += b * wQ);\n}\n// A point: small things lose themselves out of focus, so less goes to the halo.\nfunction dot(x, y, s, q = 0) {\n  const k = wQ;\n  (lastP = -1), (wQ *= 0.4);\n  put(x, y, s, q);\n  wQ = k;\n}\nfunction line(x0, y0, x1, y1, s) {\n  const dx = x1 - x0, dy = y1 - y0, n = max(1, ceil(max(abs(dx), abs(dy)))), q = (dy * dy - dx * dx) / (dx * dx + dy * dy + 1e-6);\n  for (let k = 0; k \u003c n; k++) put(x0 + (dx * k) / n, y0 + (dy * k) / n, s, q);\n}\nfunction ring(cx, cy, r, s) {\n  lastP = -1;\n  for (let k = 0, n = max(8, ceil(TAU * r * 1.4)); k \u003c n; k++) {\n    const c = cos((k / n) * TAU), sn = sin((k / n) * TAU);\n    put(cx + r * c, cy + r * sn, s, c * c - sn * sn);\n  }\n}\n// A body's own frame: at(u, v) is u along its axis and v across it.\nlet FX = 0, FY = 0, FC = 1, FS = 0;\nconst frame = (x, y, a) => ((FX = x), (FY = y), (FC = cos(a)), (FS = sin(a)));\nconst at = (u, v, s, f = put, q = FS * FS - FC * FC) => f(FX + u * FC - v * FS, FY + u * FS + v * FC, s, q);\n// A three-wide box blur run twice, on the half-resolution grid.\nfunction blur(A, T) {\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [a, b, s, n] = pass & 1 ? [T, A, HW * 3, HH] : [A, T, 3, HW];\n    for (let y = 0, o = 0; y \u003c HH; y++)\n      for (let x = 0; x \u003c HW; x++)\n        for (let c = 0, i = pass & 1 ? y : x; c \u003c 3; c++, o++) b[o] = (a[o - (i > 0 ? s : 0)] + a[o] + a[o + (i \u003c n - 1 ? s : 0)]) / 3;\n  }\n}\n// Light to LED level: black below 0.1, a gain of 3, a soft shoulder above 0.8.\nconst LUT = Float32Array.from({ length: 1024 }, (_, i) => {\n  const v = max(0, i / 256 - 0.1) * 3;\n  return 255 * (v \u003c 0.8 ? v : 1 - 0.2 * exp(-(v - 0.8) / 0.2));\n});\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), side = () => (rnd() \u003c 0.5 ? -1 : 1), A = (n, f) => Array.from({ length: n }, (_, i) => ({ x: rr(-12, 76), y: rr(-12, 140), h: rnd() * TAU, ...f(i) }));\n  const P = (params.s = { t: 0, S: F(N * 3), Q: F(HW * HH * 3), T: F(HW * HH * 3), QS: F(HW * HH), L: F(N), V: F(N), OP: F(140), nx: 0, ny: 0, ex: 0, ey: 0, nt: 3.2, ja: 0, jt: 9, jx: 0, jy: 0, s1: rnd() * 7, s2: rnd() * 7 });\n  // The round field stop of the eyepiece clips the panel's two ends.\n  for (let p = 0; p \u003c N; p++) P.V[p] = sm(67.5, 62, sqrt(((p & 63) - 31.5) ** 2 + (((p >> 6) - 63.5) * 1.02) ** 2));\n  // Volvox: cells on a sphere (a Fibonacci spiral) and daughter colonies inside.\n  P.vol = [[0.18, 12, 21], [-0.8, 9, 57], [0.2, 9.5, 112], [0.62, 11, 80]].map(([z, R, y]) => {\n    const n = round(0.7 * R * R), pts = F(n * 3), d = [];\n    for (let k = 0; k \u003c n; k++) {\n      const yv = 1 - (2 * k + 1) / n, q = sqrt(1 - yv * yv);\n      pts.set([cos(k * 2.4) * q, yv, sin(k * 2.4) * q], k * 3);\n    }\n    for (let k = 0, m = 3 + rnd() * 3; k \u003c m; k++) {\n      const a = rnd() * TAU, b = rr(-1, 1), r = rr(0.2, 0.52), q = sqrt(1 - b * b) * r;\n      d.push([cos(a) * q, b * r, sin(a) * q, rr(0.17, 0.25) * R]);\n    }\n    return { x: rr(16, 48), y: y + rr(-9, 9), z, vz: rr(-0.025, 0.025), R, h: rnd() * TAU, v: rr(1.6, 2.8), ph: 0, w: rr(0.4, 0.7) * side(), pts, d };\n  });\n  // Paramecia: slippers with an oral groove that swaps sides as they spin.\n  P.par = [[0.05, 42], [0.14, 115], [-0.12, 70], [0.75, 20], [-0.85, 92]].map(([z, y]) => ({\n    x: rr(14, 50), y: y + rr(-10, 10), z, vz: rr(-0.05, 0.05), h: rnd() * TAU, v: rr(8, 11), a: rr(11.5, 13.5), B: rr(4.4, 5.2), spin: 0, ws: rr(1.6, 2.4),\n    rev: 0, tt: rr(3, 8), cy: 0, cv: [rnd(), rnd()],\n  }));\n  // Diatoms: two glide along the thread, two on floating debris, the rest on\n  // the slide's glass, deeper down.\n  P.dia = A(9, (i) => ({ z: i \u003c 2 ? 0 : i \u003c 4 ? rr(-0.05, 0.2) : rr(0.75, 0.92), a: rr(6, 9), B: rr(2.1, 2.6), go: rnd() \u003c 0.6, tt: rr(0.5, 3), dir: side(), v: rr(3.5, 6), f: i \u003c 2 ? 44 + 34 * i + rr(-6, 6) : -1 }));\n  // Oscillatoria: blue-green threads that glide along their length and wave both ends.\n  P.osc = [[18, 17, -0.04], [46, 40, 0.1], [30, 117, 0.3]].map(([x, y, z], i) => ({ x: x + rr(-9, 9), y: y + rr(-9, 9), z, h: rr(-0.6, 0.6) + (i & 1) * PI, L: 2 * round(rr(17, 24)), k: rr(-0.015, 0.015), ph: rnd() * 7, v: rr(1.2, 2.2) }));\n  // Vorticella bells on the thread: anchor, lean, stalk length. Bell 0 snaps first.\n  P.vor = [[46, -0.22, 46], [50, 0.16, 36], [41, -0.55, 30], [56, 0.45, 42], [36, -0.05, 52], [62, 0.1, 28], [30, -0.4, 40]].map(([s, a, L], i) => ({ s, a: a - PI / 2, L, ext: 1, st: 0, tt: i ? rr(9, 18) : 4.1, cp: 0 }));\n  P.rot = [[84, -2.05], [16, -1.15]].map(([s, a]) => ({ s, a, L: 21, ext: 1, st: 0, tt: rr(7, 12), cp: 0, sw: rnd() * 7 }));\n  P.fla = A(44, (i) => ({ z: rr(-0.9, 0.9), v: rr(6, 18), tt: 0, k: i % 3, ph: rnd() * 7 }));\n  // Detritus: grains and glittering flakes, amber plant matter or grey grit,\n  // a third of it settled on the slide. Bacteria: points crowding near the\n  // thread they feed on, most jiggling, some swimming.\n  P.det = A(48, (i) => {\n    const pts = [], m = 1 + floor(rnd() * rnd() * 9), e = m > 3 ? 2 : 1;\n    for (let k = 0; k \u003c m; k++) pts.push([e * round(rr(-1.5, 1.5)), e * round(rr(-1.5, 1.5)), rr(0.35, 0.8)]);\n    return { z: i % 3 ? rr(-1, 1) * rnd() : rr(0.8, 1), pts, k: rnd() \u003c 0.55 };\n  });\n  P.bac = A(580, () => ({ z: rr(-1, 1) * rnd(), s: rr(0.4, 0.8), m: rnd() \u003c 0.3 }));\n}\n\n// Knocking the slide.\nfunction knock(P) {\n  const a = rnd() * TAU;\n  (P.ja = 3.5), (P.jt = 0), (P.jx = cos(a)), (P.jy = sin(a));\n  for (const o of [...P.vor, ...P.rot]) if (o.st !== 1) o.st = 1;\n  for (const o of P.par) (o.rev = 0.6), (o.tr = rr(-3, 3));\n  for (const o of [...P.vol, ...P.fla, ...P.det]) (o.x += P.jx * rr(1, 4)), (o.y += P.jy * rr(1, 4));\n}\n\n// A stalk or body that waits and snaps in to lo. It holds there, then stretches out again.\nfunction cycle(o, d, down, lo, up, hold, wait) {\n  if (o.st === 0 && (o.tt -= d) \u003c 0) o.st = 1;\n  else if (o.st === 1 && (o.ext -= d * down) \u003c= lo) (o.ext = lo), (o.st = 2), (o.tt = hold * rr(1, 2));\n  else if (o.st === 2 && (o.tt -= d) \u003c 0) o.st = 3;\n  else if (o.st === 3 && (o.ext += d * up * (1.12 - o.ext)) >= 1) (o.ext = 1), (o.st = 0), (o.tt = wait * rr(1, 2.2));\n}\n\nfunction life(P, d, crowd, first) {\n  // Each kind fades its members in and out by the Crowd knob.\n  const each = (L, k, f) =>\n    L.forEach((o, i) => {\n      const tg = i \u003c k ? 1 : 0;\n      o.p = first ? tg : o.p + (tg - o.p) * min(1, d * 2.5);\n      f(o, i);\n    });\n  const t = P.t;\n  each(P.vol, 3 + round(crowd), (o, i) => {\n    o.h += sin(t * 0.21 + i * 2) * 0.15 * d;\n    go(o, o.v * d);\n    o.ph += o.w * d;\n    swim(o, d);\n  });\n  each(P.par, 3 + round(2 * crowd), (o, i) => {\n    o.spin += o.ws * d;\n    if (o.rev > 0) (o.rev -= d), (o.h += o.tr * d), go(o, -o.v * 0.5 * d);\n    else {\n      o.h += sin(t * 0.5 + i * 2.3) * 0.25 * d;\n      if ((o.tt -= d) \u003c 0) (o.rev = 0.7), (o.tr = rr(-3, 3)), (o.tt = rr(4, 9));\n      go(o, o.v * d);\n    }\n    o.cy += d * 0.7;\n    (o.cv[0] = (o.cv[0] + d * 0.24) % 1), (o.cv[1] = (o.cv[1] + d * 0.21) % 1);\n    swim(o, d);\n  });\n  // Diatoms glide on their raphe and stop. Then they set off again, often backwards.\n  each(P.dia, 5 + round(4 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.go = !o.go), (o.tt = o.go ? rr(2, 4) : rr(0.8, 2.2)), o.go && rnd() \u003c 0.4 && (o.dir = -o.dir);\n    const v = o.go ? o.v * o.dir * d * sm(0, 0.4, o.tt) : 0;\n    if (o.f \u003c 0) go(o, v), wrap(o);\n    else if ((o.f += v) \u003c 8 || o.f > FL - 8) (o.dir = -o.dir), (o.f = cl(o.f, 8, FL - 8));\n  });\n  // Oscillatoria reverse when their front end runs out toward an edge.\n  each(P.osc, 2 + round(crowd), (o) => {\n    o.ph += d * 1.4;\n    go(o, o.v * d);\n    if ((o.x \u003c 6 || o.x > 58 || o.y \u003c 8 || o.y > 120) && cos(o.h) * (32 - o.x) + sin(o.h) * (64 - o.y) \u003c 0) o.h += PI;\n  });\n  each(P.vor, 5 + round(2 * crowd), (b) => ((b.cp += d * 7), cycle(b, d, 14, 0.13, 0.38, 0.5, 8)));\n  each(P.rot, 1 + round(crowd), (r) => ((r.cp += d * 9), cycle(r, d, 4, 0.5, 1.3, 1, 6)));\n  each(P.fla, 20 + round(24 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.h += rr(-2, 2)), (o.v = rr(5, 20)), (o.tt = rr(0.25, 1.4));\n    o.h += sin(o.ph + t * 3) * d * 1.2;\n    go(o, o.v * d);\n    wrap(o);\n  });\n  // The slow current carries grit and bacteria up and to the right, fastest\n  // midway between the coverslip (z -1) and the slide (z 1).\n  const j = sqrt(d * 30);\n  for (const [L, k, jj] of [[P.det, 28 + round(20 * crowd), 0.06], [P.bac, 460 + round(120 * crowd), 0.5]])\n    each(L, k, (o) => {\n      const f = 1 - o.z * o.z;\n      o.x += 1.7 * f * d + (rnd() - 0.5) * jj * j;\n      o.y -= f * d + (rnd() - 0.5) * jj * j;\n      if (o.m) rnd() \u003c d * 0.8 && (o.h += rr(-2.5, 2.5)), go(o, 9 * d);\n      wrap(o);\n    });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = (rd * cl(k[1], 0.2, 3)) / 2, l = cl(k[0], 0, 1);\n  (P.m1 = cl(l * 2, 0, 1)), (P.m2 = cl(l * 2 - 1, 0, 1)), (P.foc = cl(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) knock(P);\n  const t = (P.t += d);\n  // The stage is never quite still: a slow creep, a nudge now and then, and\n  // the shake of a knock.\n  if ((P.nt -= d) \u003c 0) (P.nt = rr(6, 11)), (P.nx = cl(P.nx + rr(-6, 6), -5, 5)), (P.ny = cl(P.ny + rr(-8, 8), -7, 7));\n  const e = min(1, d * 3), sh = P.ja * exp(-(P.jt += rd) * 5) * sin(P.jt * 40);\n  (P.ex += (P.nx - P.ex) * e), (P.ey += (P.ny - P.ey) * e);\n  P.ox = 2.5 * sin(t * 0.13 + P.s1) + 1.2 * sin(t * 0.31 + 2) + P.ex + sh * P.jx;\n  P.oy = 3.5 * sin(t * 0.09 + P.s2) + 1.5 * sin(t * 0.23) + P.ey + sh * P.jy;\n  life(P, d, cl(k[2], 0, 1), !P.init);\n  P.init = true;\n}\n\nfunction thread() {\n  dep(0);\n  col(C.wall);\n  for (const sd of [-2.6, 2.6]) {\n    lastP = -1;\n    for (let s = 0; s \u003c= FL; s += 0.7) fil(s), put(fx - fty * sd, fy + ftx * sd, 0.62, fty * fty - ftx * ftx);\n  }\n  for (let s = 5; s \u003c FL; s += 9) fil(s), line(fx - fty * 1.6, fy + ftx * 1.6, fx + fty * 1.6, fy - ftx * 1.6, 0.3);\n  // The chloroplast, a green ribbon winding round inside the cell wall.\n  col(C.chl);\n  for (let s = 0; s \u003c= FL; s += 1.3) fil(s), dot(fx - fty * 1.7 * sin(s * 0.5), fy + ftx * 1.7 * sin(s * 0.5), 0.5 + 0.25 * cos(s * 0.5));\n}\n\n// Frames a thing standing on the thread at arc length s, leaning by a.\nfunction foot(s, a) {\n  fil(s);\n  frame(fx + fty * 2.6, fy - ftx * 2.6, a);\n}\n\nfunction vorticella(b, i, t) {\n  foot(b.s, b.a + 0.07 * sin(t * 0.6 + i * 1.7));\n  const L = b.L * b.ext, amp = 2 * (1 - b.ext) ** 0.6, bend = 3 * sin(t * 0.45 + i) * b.ext, m = ceil(L * 1.5) + 4;\n  dep(0);\n  col(C.par, b.p);\n  // The stalk, straight while it feeds and a tight coil when it has snapped.\n  let x = FX, y = FY;\n  for (let j = 1; j \u003c= m; j++) {\n    const u = (j / m) * L, v = bend * sin((PI * j) / m) + amp * sin((j / m) * 6 * TAU), X = FX + u * FC - v * FS, Y = FY + u * FS + v * FC;\n    line(x, y, X, Y, 0.5);\n    (x = X), (y = Y);\n  }\n  // The bell, a cup that closes to a ball when the stalk snaps; the cilia\n  // whirl round its lip while it feeds.\n  frame(x, y, atan2(FS, FC));\n  const open = sm(0.55, 0.95, b.ext), lb = 6 + 2 * open;\n  const hwOf = (u) => {\n    const ball = 3.1 * sqrt(max(0, 1 - ((2 * u) / lb - 1) ** 2));\n    return ball + (0.8 + 4 * (u / lb) ** 0.9 - ball) * open;\n  };\n  col(C.vor, b.p);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= lb; u += 0.5) at(u, hwOf(u) * sd, 0.75);\n  }\n  for (let k = -1; k \u003c 2; k++) at(4.1 + k * 1.6, k * 1.2, 0.4, dot);\n  const hw = hwOf(lb);\n  if (open \u003c 0.1) return;\n  lastP = -1;\n  for (let k = 0; k \u003c 24; k++) at(lb + 1.3 * sin((k / 24) * TAU), hw * cos((k / 24) * TAU), 0.55 * open);\n  for (let k = 0; k \u003c 9; k++) {\n    const th = (k / 9) * TAU + b.cp, s = sin(th);\n    at(lb + 2.3 + 0.9 * s, (hw + 0.9) * cos(th), (s > 0 ? 0.85 : 0.35) * open, dot);\n  }\n}\n\nfunction rotifer(r, i, t) {\n  foot(r.s, r.a + 0.22 * sin(t * 0.4 + r.sw));\n  const L = r.L * r.ext, g = r.p, cr = sm(0.82, 0.97, r.ext);\n  dep(0);\n  col(C.rot, g);\n  // A foot of three telescoping joints, a swollen trunk, a neck, the head,\n  // and inside it the jaws of the mastax, chewing.\n  const hwOf = (u) => (u \u003c 0.36 ? 0.9 + 0.4 * floor(u / 0.12) : u \u003c 0.8 ? 2.1 + 2.5 * sin((PI * (u - 0.36)) / 0.44) : u \u003c 0.88 ? 2 : 2.9);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= L; u += 0.5) at(u, hwOf(u / L) * sd, 0.75);\n    at(-1.2, sd * 1.3, 0.7, dot);\n    at(0.72 * L, sd * (0.6 + 0.5 * sin(r.cp * 0.45)), 0.85, dot);\n  }\n  for (let k = 0; k \u003c 7; k++) at(L * (0.42 + 0.05 * k), 1.8 * sin(k * 2.4 + t * 0.6), 0.38 + 0.2 * sin(k * 1.7 + t * 2), dot);\n  // The crown: two discs of cilia whirling the opposite way to each other.\n  lastP = -1;\n  if (cr \u003c 0.02) for (let v = -2.8; v \u003c= 2.8; v += 0.7) at(L, v, 0.6);\n  else\n    for (const sd of [-1, 1]) {\n      const cx = FX + FC * (L + 1.8) - FS * sd * 2.9, cy = FY + FS * (L + 1.8) + FC * sd * 2.9;\n      ring(cx, cy, 2.4 * cr, 0.3 * cr);\n      for (let k = 0; k \u003c 10; k++) {\n        const th = (k / 10) * TAU + sd * r.cp;\n        dot(cx + cos(th) * 3.2 * cr, cy + sin(th) * 3.2 * cr, (0.55 + 0.45 * sin(th * 3 + t * 5)) * cr * g);\n      }\n    }\n}\n\nfunction volvox(o) {\n  const { x, y, R, pts } = o, g = o.p, ax = cos(o.h), ay = sin(o.h), c = cos(o.ph), s = sin(o.ph), c1 = 1 - c;\n  // Rolling about its swimming axis, which lies in the view plane (Rodrigues).\n  const rot = (px, py, pz, k) => {\n    const kd = (ax * px + ay * py) * c1, u = px * c + ay * pz * s + ax * kd, v = py * c - ax * pz * s + ay * kd;\n    return k ? dot(x + R * u, y + R * v, pz * c + (ax * py - ay * px) * s > 0 ? 0.85 : 0.5, u * u - v * v) : frame(x + R * u, y + R * v, 0);\n  };\n  dep(o.z);\n  col(C.cell, g);\n  for (let k = 0; k \u003c pts.length; k += 3) rot(pts[k], pts[k + 1], pts[k + 2], 1);\n  col(C.vrim, g);\n  ring(x, y, R + 0.4, 0.55);\n  // The faint diffraction fringe outside the rim.\n  ring(x, y, R + 2.6, 0.3);\n  col(C.dau, g);\n  for (const [px, py, pz, r] of o.d) rot(px, py, pz, 0), ring(FX, FY, r, 0.95), dot(FX, FY, 0.7);\n}\n\nfunction paramecium(o, i, t) {\n  const { a, B } = o, gs = cos(o.spin), n = ceil(TAU * sqrt((a * a + B * B) / 2) * 1.3);\n  frame(o.x, o.y, o.h);\n  dep(o.z);\n  col(C.par, o.p);\n  // Outline and cilia: a metachronal wave runs back along the body.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const th = (k / n) * TAU, ct = cos(th), st = sin(th), bw = B * (1 + 0.16 * ct - 0.08 * ct * ct), wv = sin(th * 9 - t * 10);\n      let nu = ct / a, nv = st / bw, nl = sqrt(nu * nu + nv * nv);\n      const nx = nu * FC - nv * FS, ny = nu * FS + nv * FC, q = (nx * nx - ny * ny) / (nl * nl);\n      (nu = (1.5 * nu) / nl), (nv = (1.5 * nv) / nl);\n      if (!pass) at(a * ct, bw * st, 0.62 + 0.25 * wv, put, q);\n      else if (wv > 0.2) at(a * ct + nu, bw * st + nv, 0.6 * wv, dot, q);\n    }\n  }\n  // The oral groove, a bright furrow from the front to the middle that swaps\n  // sides as the cell spins on its long axis.\n  lastP = -1;\n  for (let u = 0.05; u \u003c 0.62; u += 0.06) at(u * a, gs * B * (0.3 + 0.75 * u) * (u \u003c 0.5 ? 1 : 1 - (u - 0.5) * 6), 0.5 * abs(gs) + 0.12, put, 0);\n  // Granules and food vacuoles carried round by cyclosis, and the two\n  // contractile vacuoles filling and emptying.\n  col(C.gran, o.p);\n  for (let k = 0; k \u003c 23; k++) {\n    const th = k * 2.4 + o.cy * (k % 3 ? 0.6 : 1), r = 0.25 + 0.6 * ((k * 0.618) % 1);\n    at(0.8 * a * r * cos(th), 0.62 * B * r * sin(th), k % 3 ? 0.36 + 0.16 * sin(t * 3 + k) : 0.6, dot, 0);\n  }\n  col(C.par, o.p);\n  o.cv.forEach((c, j) => c > 0.31 && c \u003c 0.85 && ring(FX + (j ? -0.55 : 0.55) * a * FC, FY + (j ? -0.55 : 0.55) * a * FS, 1.6 * c, 0.55));\n}\n\nfunction diatom(o) {\n  const { a, B } = o;\n  if (o.f \u003c 0) frame(o.x, o.y, o.h);\n  else fil(o.f), frame(fx + fty * (3.4 + B), fy - ftx * (3.4 + B), atan2(fty, ftx));\n  dep(o.z);\n  col(C.dia, o.p);\n  // The rim glints at each stria; the raphe runs down the middle, broken at\n  // the central nodule.\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = -a; u \u003c= a; u += 0.6) at(u, sd * B * (1 - (u / a) ** 2) ** 0.75, 0.62 + 0.3 * cos(u * PI));\n  }\n  for (let u = -0.8 * a; u \u003c= 0.8 * a; u += 1.6) if (abs(u) > 1) at(u, 0, 0.6, dot);\n  at(0, 0, 0.8, dot);\n}\n\nfunction oscillatoria(o, i, t, OP) {\n  const n = o.L, hl = n / 2;\n  // The centre line, from the middle out to each end, bending as the ends wave.\n  for (const sd of [-1, 1]) {\n    let x = o.x, y = o.y;\n    for (let s = 1; s \u003c= hl; s++) {\n      const a = o.h + o.k * s * sd + 0.6 * sin(o.ph + sd) * (s / hl) ** 3;\n      (x += cos(a) * sd), (y += sin(a) * sd), (OP[(hl + s * sd) * 2] = x), (OP[(hl + s * sd) * 2 + 1] = y);\n    }\n  }\n  (OP[n] = o.x), (OP[n + 1] = o.y);\n  dep(o.z);\n  col(C.osc, o.p);\n  for (const e of [-1.2, 1.2]) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const x = OP[k * 2], y = OP[k * 2 + 1], dx = OP[k * 2 + 2] - x, dy = OP[k * 2 + 3] - y;\n      put(x - dy * e, y + dx * e, 0.6, dy * dy - dx * dx);\n    }\n  }\n  // Cross walls between the cells.\n  for (let k = 1; k \u003c n; k += 2) dot(OP[k * 2], OP[k * 2 + 1], 0.4);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  (S = P.S), (Q = P.Q), (ox = P.ox), (oy = P.oy), (foc = P.foc), (m1 = P.m1);\n  S.fill(0);\n  Q.fill(0);\n  const t = P.t, show = (L, f) => L.forEach((o, i) => o.p > 0.02 && f(o, i, t, P.OP));\n  thread();\n  show(P.vor, vorticella);\n  show(P.rot, rotifer);\n  show(P.dia, diatom);\n  show(P.osc, oscillatoria);\n  show(P.vol, volvox);\n  show(P.par, paramecium);\n  show(P.fla, (o) => {\n    const c = cos(o.h), s = sin(o.h);\n    dep(o.z);\n    col(o.k ? C.par : C.eug, o.p);\n    dot(o.x, o.y, 0.9);\n    dot(o.x - c * 1.2, o.y - s * 1.2, 0.55);\n    for (let k = 1; k \u003c= 3; k++) dot(o.x + c * (1 + k) - s * sin(t * 20 + k * 1.3) * 0.7, o.y + s * (1 + k) + c * sin(t * 20 + k * 1.3) * 0.7, 0.3);\n  });\n  show(P.det, (o) => {\n    dep(o.z);\n    col(o.k ? C.amb : C.gry, o.p);\n    for (const [dx, dy, s] of o.pts) dot(o.x + dx, o.y + dy, s);\n  });\n  col(C.par);\n  show(P.bac, (o) => (dep(o.z), dot(o.x, o.y, o.s * o.p)));\n  blur(Q, P.T);\n  // Light into LEDs, toned by the brightest channel so a green stays green,\n  // each lit LED with a grain of its own, and under it all the still grain\n  // of particles too small to resolve, below 24/255. The grain stays put:\n  // drawn anew every frame it was static, and it took the motion from 1.38\n  // to 2.31.\n  const m2 = P.m2, { V, L, QS } = P, c3 = K0;\n  for (let i = 0; i \u003c HW * HH; i++) QS[i] = Q[i * 3] + Q[i * 3 + 1] + Q[i * 3 + 2];\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      // The halo cell under the LED and its neighbours toward it, bilinear.\n      const o = p * 3, i = x >> 1, j = (y >> 1) * HW, i2 = cl(i + (x & 1) * 2 - 1, 0, HW - 1), j2 = cl((y >> 1) + (y & 1) * 2 - 1, 0, HH - 1) * HW;\n      const A = j + i, B = j + i2, c = j2 + i, e = j2 + i2, hl = QS[A] + QS[B] + QS[c] + QS[e] > 0, hh = h32(p, 7), sh = hh >>> 24;\n      for (let n = 0; n \u003c 3; n++) c3[n] = S[o + n] + (hl ? 0.17 * Q[A * 3 + n] + 0.056 * (Q[B * 3 + n] + Q[c * 3 + n]) + 0.019 * Q[e * 3 + n] : 0);\n      const mx = max(c3[0], c3[1], c3[2]), k = mx > 0.001 ? (LUT[min(1023, (mx * 256) | 0)] / mx) * (0.8 + sh / 640) : 0, l = (mx * k) / 255;\n      for (let n = 0, hb; n \u003c 3; n++) (hb = (hh >>> (n * 8)) & 255), (c3[n] = V[p] * (c3[n] * k * (1 + hb / 2200) + sh * (0.062 + (hb & 15) / 500) + m1 * FIELD[n]));\n      // Phase contrast: the field grey, each body darker than it, and a\n      // bright halo on the LEDs beside it.\n      if (m2) {\n        const dk = 1 - 0.8 * cl(l * 1.6, 0, 1), ha = max(0, max(L[p - (x > 0)], L[p + (x \u003c 63)], L[p - (y > 0) * W], L[p + (y \u003c 127) * W]) - l) * 160;\n        for (let n = 0; n \u003c 3; n++) c3[n] += m2 * (V[p] * (PHASE[n] * dk + ha + ((hh >>> (n * 8 + 3)) & 15)) - c3[n]);\n      }\n      L[p] = l;\n      display.setPixel(x, y, min(255, c3[0]) | 0, min(255, c3[1]) | 0, min(255, c3[2]) | 0);\n    }\n}\n","layer":{"id":"layer-dark-field","type":"code","name":"dark-field","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dark Field\n// Family:  microbe\n// Idea:    A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after dark-field and Rheinberg illumination in the light microscope\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1\n//\n// Knob 1: Light. At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos.\n// Knob 2: Speed. At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower.\n// Knob 3: Crowd. At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in.\n// Knob 4: Focus. Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit.\n// Buttons: K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.\n\nconst W = 64, H = 128, N = W * H, HW = 32, HH = 64;\nconst { min, max, floor, round, ceil, sin, cos, sqrt, exp, abs, PI, atan2 } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rr = (a, b) => a + (b - a) * rnd();\nfunction h32(a, b) {\n  let h = Math.imul(a ^ Math.imul(b, 0x27d4eb2d), 0x9e3779b1);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca77);\n  h ^= h >>> 13;\n  return (h ^ (h >>> 16)) >>> 0;\n}\n\n// Small things live on a torus a little larger than the view, so what leaves\n// one side comes back at the other out of sight. Big swimmers turn back\n// toward the middle near an edge.\nconst wrap = (o, m = 12) => ((o.x -= (W + 2 * m) * floor((o.x + m) / (W + 2 * m))), (o.y -= (H + 2 * m) * floor((o.y + m) / (H + 2 * m))));\nconst go = (o, v) => ((o.x += cos(o.h) * v), (o.y += sin(o.h) * v));\nfunction swim(o, d) {\n  if ((o.z += o.vz * d) > 1 || o.z \u003c -1) o.vz = -o.vz;\n  if (o.x > 8 && o.x \u003c 56 && o.y > 12 && o.y \u003c 116) return;\n  let e = atan2(64 - o.y, 32 - o.x) - o.h;\n  o.h += cl(e - TAU * round(e / TAU), -1, 1) * 1.2 * d;\n}\n// Colours each thing scatters in dark field.\nconst C = {\n  cell: [110, 255, 118], vrim: [175, 255, 165], dau: [64, 255, 92], par: [200, 222, 255], gran: [255, 236, 196], dia: [255, 194, 72],\n  vor: [222, 236, 255], rot: [255, 226, 186], eug: [132, 255, 140], amb: [255, 184, 100], gry: [212, 206, 198], wall: [205, 242, 182],\n  chl: [84, 236, 90], osc: [120, 250, 222],\n};\n// Rheinberg: an annular filter yellow at its sides and red top and bottom, so\n// an edge's colour follows the way it faces (q = nx² - ny²), on a blue field.\nconst RA = [255, 220, 46], RB = [255, 44, 40];\nconst RM = RA.map((v, i) => (v + RB[i]) / 2), RH = RA.map((v, i) => (v - RB[i]) / 2);\nconst FIELD = [4, 16, 60], PHASE = [74, 82, 72];\n\n// The algal thread, a Spirogyra filament across the lower third: its centre\n// at arc length s and its unit tangent.\nconst FL = 136;\nlet fx = 0, fy = 0, ftx = 1, fty = 0;\nfunction fil(s) {\n  const dy = -0.2 + 0.225 * cos(s * 0.045 + 0.3), l = sqrt(1 + dy * dy);\n  (fx = s - 30), (fy = 109 - 0.2 * s + 5 * sin(s * 0.045 + 0.3)), (ftx = 1 / l), (fty = dy / l);\n}\n\n// Light goes into a sharp buffer and, by how far the thing lies from the\n// focal plane, into a halo buffer at half resolution that is blurred and\n// spread back over the LEDs.\nlet S, Q, ox = 0, oy = 0, foc = 0, m1 = 0, wS = 1, wQ = 0, lastP = -1;\nconst K0 = [0, 0, 0], K1 = [0, 0, 0];\nfunction col(c, g = 1) {\n  for (let i = 0; i \u003c 3; i++) (K0[i] = (g * (c[i] + m1 * (RM[i] - c[i]))) / 255), (K1[i] = (g * m1 * RH[i]) / 255);\n}\nfunction dep(z) {\n  const b = max(0, abs(z - foc) - 0.15) * 2.4;\n  wS = max(0, 1 - b);\n  wQ = min(1, b) / (1 + 0.5 * max(0, b - 1));\n}\nfunction put(x, y, s, q = 0) {\n  const xi = round(x - ox), yi = round(y - oy), o = (yi * W + xi) * 3;\n  if (xi \u003c 0 || yi \u003c 0 || xi >= W || yi >= H || o === lastP) return;\n  lastP = o;\n  const r = s * (K0[0] + q * K1[0]), g = s * (K0[1] + q * K1[1]), b = s * (K0[2] + q * K1[2]), h = ((yi >> 1) * HW + (xi >> 1)) * 3;\n  if (wS) (S[o] += r * wS), (S[o + 1] += g * wS), (S[o + 2] += b * wS);\n  if (wQ) (Q[h] += r * wQ), (Q[h + 1] += g * wQ), (Q[h + 2] += b * wQ);\n}\n// A point: small things lose themselves out of focus, so less goes to the halo.\nfunction dot(x, y, s, q = 0) {\n  const k = wQ;\n  (lastP = -1), (wQ *= 0.4);\n  put(x, y, s, q);\n  wQ = k;\n}\nfunction line(x0, y0, x1, y1, s) {\n  const dx = x1 - x0, dy = y1 - y0, n = max(1, ceil(max(abs(dx), abs(dy)))), q = (dy * dy - dx * dx) / (dx * dx + dy * dy + 1e-6);\n  for (let k = 0; k \u003c n; k++) put(x0 + (dx * k) / n, y0 + (dy * k) / n, s, q);\n}\nfunction ring(cx, cy, r, s) {\n  lastP = -1;\n  for (let k = 0, n = max(8, ceil(TAU * r * 1.4)); k \u003c n; k++) {\n    const c = cos((k / n) * TAU), sn = sin((k / n) * TAU);\n    put(cx + r * c, cy + r * sn, s, c * c - sn * sn);\n  }\n}\n// A body's own frame: at(u, v) is u along its axis and v across it.\nlet FX = 0, FY = 0, FC = 1, FS = 0;\nconst frame = (x, y, a) => ((FX = x), (FY = y), (FC = cos(a)), (FS = sin(a)));\nconst at = (u, v, s, f = put, q = FS * FS - FC * FC) => f(FX + u * FC - v * FS, FY + u * FS + v * FC, s, q);\n// A three-wide box blur run twice, on the half-resolution grid.\nfunction blur(A, T) {\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [a, b, s, n] = pass & 1 ? [T, A, HW * 3, HH] : [A, T, 3, HW];\n    for (let y = 0, o = 0; y \u003c HH; y++)\n      for (let x = 0; x \u003c HW; x++)\n        for (let c = 0, i = pass & 1 ? y : x; c \u003c 3; c++, o++) b[o] = (a[o - (i > 0 ? s : 0)] + a[o] + a[o + (i \u003c n - 1 ? s : 0)]) / 3;\n  }\n}\n// Light to LED level: black below 0.1, a gain of 3, a soft shoulder above 0.8.\nconst LUT = Float32Array.from({ length: 1024 }, (_, i) => {\n  const v = max(0, i / 256 - 0.1) * 3;\n  return 255 * (v \u003c 0.8 ? v : 1 - 0.2 * exp(-(v - 0.8) / 0.2));\n});\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), side = () => (rnd() \u003c 0.5 ? -1 : 1), A = (n, f) => Array.from({ length: n }, (_, i) => ({ x: rr(-12, 76), y: rr(-12, 140), h: rnd() * TAU, ...f(i) }));\n  const P = (params.s = { t: 0, S: F(N * 3), Q: F(HW * HH * 3), T: F(HW * HH * 3), QS: F(HW * HH), L: F(N), V: F(N), OP: F(140), nx: 0, ny: 0, ex: 0, ey: 0, nt: 3.2, ja: 0, jt: 9, jx: 0, jy: 0, s1: rnd() * 7, s2: rnd() * 7 });\n  // The round field stop of the eyepiece clips the panel's two ends.\n  for (let p = 0; p \u003c N; p++) P.V[p] = sm(67.5, 62, sqrt(((p & 63) - 31.5) ** 2 + (((p >> 6) - 63.5) * 1.02) ** 2));\n  // Volvox: cells on a sphere (a Fibonacci spiral) and daughter colonies inside.\n  P.vol = [[0.18, 12, 21], [-0.8, 9, 57], [0.2, 9.5, 112], [0.62, 11, 80]].map(([z, R, y]) => {\n    const n = round(0.7 * R * R), pts = F(n * 3), d = [];\n    for (let k = 0; k \u003c n; k++) {\n      const yv = 1 - (2 * k + 1) / n, q = sqrt(1 - yv * yv);\n      pts.set([cos(k * 2.4) * q, yv, sin(k * 2.4) * q], k * 3);\n    }\n    for (let k = 0, m = 3 + rnd() * 3; k \u003c m; k++) {\n      const a = rnd() * TAU, b = rr(-1, 1), r = rr(0.2, 0.52), q = sqrt(1 - b * b) * r;\n      d.push([cos(a) * q, b * r, sin(a) * q, rr(0.17, 0.25) * R]);\n    }\n    return { x: rr(16, 48), y: y + rr(-9, 9), z, vz: rr(-0.025, 0.025), R, h: rnd() * TAU, v: rr(1.6, 2.8), ph: 0, w: rr(0.4, 0.7) * side(), pts, d };\n  });\n  // Paramecia: slippers with an oral groove that swaps sides as they spin.\n  P.par = [[0.05, 42], [0.14, 115], [-0.12, 70], [0.75, 20], [-0.85, 92]].map(([z, y]) => ({\n    x: rr(14, 50), y: y + rr(-10, 10), z, vz: rr(-0.05, 0.05), h: rnd() * TAU, v: rr(8, 11), a: rr(11.5, 13.5), B: rr(4.4, 5.2), spin: 0, ws: rr(1.6, 2.4),\n    rev: 0, tt: rr(3, 8), cy: 0, cv: [rnd(), rnd()],\n  }));\n  // Diatoms: two glide along the thread, two on floating debris, the rest on\n  // the slide's glass, deeper down.\n  P.dia = A(9, (i) => ({ z: i \u003c 2 ? 0 : i \u003c 4 ? rr(-0.05, 0.2) : rr(0.75, 0.92), a: rr(6, 9), B: rr(2.1, 2.6), go: rnd() \u003c 0.6, tt: rr(0.5, 3), dir: side(), v: rr(3.5, 6), f: i \u003c 2 ? 44 + 34 * i + rr(-6, 6) : -1 }));\n  // Oscillatoria: blue-green threads that glide along their length and wave both ends.\n  P.osc = [[18, 17, -0.04], [46, 40, 0.1], [30, 117, 0.3]].map(([x, y, z], i) => ({ x: x + rr(-9, 9), y: y + rr(-9, 9), z, h: rr(-0.6, 0.6) + (i & 1) * PI, L: 2 * round(rr(17, 24)), k: rr(-0.015, 0.015), ph: rnd() * 7, v: rr(1.2, 2.2) }));\n  // Vorticella bells on the thread: anchor, lean, stalk length. Bell 0 snaps first.\n  P.vor = [[46, -0.22, 46], [50, 0.16, 36], [41, -0.55, 30], [56, 0.45, 42], [36, -0.05, 52], [62, 0.1, 28], [30, -0.4, 40]].map(([s, a, L], i) => ({ s, a: a - PI / 2, L, ext: 1, st: 0, tt: i ? rr(9, 18) : 4.1, cp: 0 }));\n  P.rot = [[84, -2.05], [16, -1.15]].map(([s, a]) => ({ s, a, L: 21, ext: 1, st: 0, tt: rr(7, 12), cp: 0, sw: rnd() * 7 }));\n  P.fla = A(44, (i) => ({ z: rr(-0.9, 0.9), v: rr(6, 18), tt: 0, k: i % 3, ph: rnd() * 7 }));\n  // Detritus: grains and glittering flakes, amber plant matter or grey grit,\n  // a third of it settled on the slide. Bacteria: points crowding near the\n  // thread they feed on, most jiggling, some swimming.\n  P.det = A(48, (i) => {\n    const pts = [], m = 1 + floor(rnd() * rnd() * 9), e = m > 3 ? 2 : 1;\n    for (let k = 0; k \u003c m; k++) pts.push([e * round(rr(-1.5, 1.5)), e * round(rr(-1.5, 1.5)), rr(0.35, 0.8)]);\n    return { z: i % 3 ? rr(-1, 1) * rnd() : rr(0.8, 1), pts, k: rnd() \u003c 0.55 };\n  });\n  P.bac = A(580, () => ({ z: rr(-1, 1) * rnd(), s: rr(0.4, 0.8), m: rnd() \u003c 0.3 }));\n}\n\n// Knocking the slide.\nfunction knock(P) {\n  const a = rnd() * TAU;\n  (P.ja = 3.5), (P.jt = 0), (P.jx = cos(a)), (P.jy = sin(a));\n  for (const o of [...P.vor, ...P.rot]) if (o.st !== 1) o.st = 1;\n  for (const o of P.par) (o.rev = 0.6), (o.tr = rr(-3, 3));\n  for (const o of [...P.vol, ...P.fla, ...P.det]) (o.x += P.jx * rr(1, 4)), (o.y += P.jy * rr(1, 4));\n}\n\n// A stalk or body that waits and snaps in to lo. It holds there, then stretches out again.\nfunction cycle(o, d, down, lo, up, hold, wait) {\n  if (o.st === 0 && (o.tt -= d) \u003c 0) o.st = 1;\n  else if (o.st === 1 && (o.ext -= d * down) \u003c= lo) (o.ext = lo), (o.st = 2), (o.tt = hold * rr(1, 2));\n  else if (o.st === 2 && (o.tt -= d) \u003c 0) o.st = 3;\n  else if (o.st === 3 && (o.ext += d * up * (1.12 - o.ext)) >= 1) (o.ext = 1), (o.st = 0), (o.tt = wait * rr(1, 2.2));\n}\n\nfunction life(P, d, crowd, first) {\n  // Each kind fades its members in and out by the Crowd knob.\n  const each = (L, k, f) =>\n    L.forEach((o, i) => {\n      const tg = i \u003c k ? 1 : 0;\n      o.p = first ? tg : o.p + (tg - o.p) * min(1, d * 2.5);\n      f(o, i);\n    });\n  const t = P.t;\n  each(P.vol, 3 + round(crowd), (o, i) => {\n    o.h += sin(t * 0.21 + i * 2) * 0.15 * d;\n    go(o, o.v * d);\n    o.ph += o.w * d;\n    swim(o, d);\n  });\n  each(P.par, 3 + round(2 * crowd), (o, i) => {\n    o.spin += o.ws * d;\n    if (o.rev > 0) (o.rev -= d), (o.h += o.tr * d), go(o, -o.v * 0.5 * d);\n    else {\n      o.h += sin(t * 0.5 + i * 2.3) * 0.25 * d;\n      if ((o.tt -= d) \u003c 0) (o.rev = 0.7), (o.tr = rr(-3, 3)), (o.tt = rr(4, 9));\n      go(o, o.v * d);\n    }\n    o.cy += d * 0.7;\n    (o.cv[0] = (o.cv[0] + d * 0.24) % 1), (o.cv[1] = (o.cv[1] + d * 0.21) % 1);\n    swim(o, d);\n  });\n  // Diatoms glide on their raphe and stop. Then they set off again, often backwards.\n  each(P.dia, 5 + round(4 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.go = !o.go), (o.tt = o.go ? rr(2, 4) : rr(0.8, 2.2)), o.go && rnd() \u003c 0.4 && (o.dir = -o.dir);\n    const v = o.go ? o.v * o.dir * d * sm(0, 0.4, o.tt) : 0;\n    if (o.f \u003c 0) go(o, v), wrap(o);\n    else if ((o.f += v) \u003c 8 || o.f > FL - 8) (o.dir = -o.dir), (o.f = cl(o.f, 8, FL - 8));\n  });\n  // Oscillatoria reverse when their front end runs out toward an edge.\n  each(P.osc, 2 + round(crowd), (o) => {\n    o.ph += d * 1.4;\n    go(o, o.v * d);\n    if ((o.x \u003c 6 || o.x > 58 || o.y \u003c 8 || o.y > 120) && cos(o.h) * (32 - o.x) + sin(o.h) * (64 - o.y) \u003c 0) o.h += PI;\n  });\n  each(P.vor, 5 + round(2 * crowd), (b) => ((b.cp += d * 7), cycle(b, d, 14, 0.13, 0.38, 0.5, 8)));\n  each(P.rot, 1 + round(crowd), (r) => ((r.cp += d * 9), cycle(r, d, 4, 0.5, 1.3, 1, 6)));\n  each(P.fla, 20 + round(24 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.h += rr(-2, 2)), (o.v = rr(5, 20)), (o.tt = rr(0.25, 1.4));\n    o.h += sin(o.ph + t * 3) * d * 1.2;\n    go(o, o.v * d);\n    wrap(o);\n  });\n  // The slow current carries grit and bacteria up and to the right, fastest\n  // midway between the coverslip (z -1) and the slide (z 1).\n  const j = sqrt(d * 30);\n  for (const [L, k, jj] of [[P.det, 28 + round(20 * crowd), 0.06], [P.bac, 460 + round(120 * crowd), 0.5]])\n    each(L, k, (o) => {\n      const f = 1 - o.z * o.z;\n      o.x += 1.7 * f * d + (rnd() - 0.5) * jj * j;\n      o.y -= f * d + (rnd() - 0.5) * jj * j;\n      if (o.m) rnd() \u003c d * 0.8 && (o.h += rr(-2.5, 2.5)), go(o, 9 * d);\n      wrap(o);\n    });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = (rd * cl(k[1], 0.2, 3)) / 2, l = cl(k[0], 0, 1);\n  (P.m1 = cl(l * 2, 0, 1)), (P.m2 = cl(l * 2 - 1, 0, 1)), (P.foc = cl(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) knock(P);\n  const t = (P.t += d);\n  // The stage is never quite still: a slow creep, a nudge now and then, and\n  // the shake of a knock.\n  if ((P.nt -= d) \u003c 0) (P.nt = rr(6, 11)), (P.nx = cl(P.nx + rr(-6, 6), -5, 5)), (P.ny = cl(P.ny + rr(-8, 8), -7, 7));\n  const e = min(1, d * 3), sh = P.ja * exp(-(P.jt += rd) * 5) * sin(P.jt * 40);\n  (P.ex += (P.nx - P.ex) * e), (P.ey += (P.ny - P.ey) * e);\n  P.ox = 2.5 * sin(t * 0.13 + P.s1) + 1.2 * sin(t * 0.31 + 2) + P.ex + sh * P.jx;\n  P.oy = 3.5 * sin(t * 0.09 + P.s2) + 1.5 * sin(t * 0.23) + P.ey + sh * P.jy;\n  life(P, d, cl(k[2], 0, 1), !P.init);\n  P.init = true;\n}\n\nfunction thread() {\n  dep(0);\n  col(C.wall);\n  for (const sd of [-2.6, 2.6]) {\n    lastP = -1;\n    for (let s = 0; s \u003c= FL; s += 0.7) fil(s), put(fx - fty * sd, fy + ftx * sd, 0.62, fty * fty - ftx * ftx);\n  }\n  for (let s = 5; s \u003c FL; s += 9) fil(s), line(fx - fty * 1.6, fy + ftx * 1.6, fx + fty * 1.6, fy - ftx * 1.6, 0.3);\n  // The chloroplast, a green ribbon winding round inside the cell wall.\n  col(C.chl);\n  for (let s = 0; s \u003c= FL; s += 1.3) fil(s), dot(fx - fty * 1.7 * sin(s * 0.5), fy + ftx * 1.7 * sin(s * 0.5), 0.5 + 0.25 * cos(s * 0.5));\n}\n\n// Frames a thing standing on the thread at arc length s, leaning by a.\nfunction foot(s, a) {\n  fil(s);\n  frame(fx + fty * 2.6, fy - ftx * 2.6, a);\n}\n\nfunction vorticella(b, i, t) {\n  foot(b.s, b.a + 0.07 * sin(t * 0.6 + i * 1.7));\n  const L = b.L * b.ext, amp = 2 * (1 - b.ext) ** 0.6, bend = 3 * sin(t * 0.45 + i) * b.ext, m = ceil(L * 1.5) + 4;\n  dep(0);\n  col(C.par, b.p);\n  // The stalk, straight while it feeds and a tight coil when it has snapped.\n  let x = FX, y = FY;\n  for (let j = 1; j \u003c= m; j++) {\n    const u = (j / m) * L, v = bend * sin((PI * j) / m) + amp * sin((j / m) * 6 * TAU), X = FX + u * FC - v * FS, Y = FY + u * FS + v * FC;\n    line(x, y, X, Y, 0.5);\n    (x = X), (y = Y);\n  }\n  // The bell, a cup that closes to a ball when the stalk snaps; the cilia\n  // whirl round its lip while it feeds.\n  frame(x, y, atan2(FS, FC));\n  const open = sm(0.55, 0.95, b.ext), lb = 6 + 2 * open;\n  const hwOf = (u) => {\n    const ball = 3.1 * sqrt(max(0, 1 - ((2 * u) / lb - 1) ** 2));\n    return ball + (0.8 + 4 * (u / lb) ** 0.9 - ball) * open;\n  };\n  col(C.vor, b.p);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= lb; u += 0.5) at(u, hwOf(u) * sd, 0.75);\n  }\n  for (let k = -1; k \u003c 2; k++) at(4.1 + k * 1.6, k * 1.2, 0.4, dot);\n  const hw = hwOf(lb);\n  if (open \u003c 0.1) return;\n  lastP = -1;\n  for (let k = 0; k \u003c 24; k++) at(lb + 1.3 * sin((k / 24) * TAU), hw * cos((k / 24) * TAU), 0.55 * open);\n  for (let k = 0; k \u003c 9; k++) {\n    const th = (k / 9) * TAU + b.cp, s = sin(th);\n    at(lb + 2.3 + 0.9 * s, (hw + 0.9) * cos(th), (s > 0 ? 0.85 : 0.35) * open, dot);\n  }\n}\n\nfunction rotifer(r, i, t) {\n  foot(r.s, r.a + 0.22 * sin(t * 0.4 + r.sw));\n  const L = r.L * r.ext, g = r.p, cr = sm(0.82, 0.97, r.ext);\n  dep(0);\n  col(C.rot, g);\n  // A foot of three telescoping joints, a swollen trunk, a neck, the head,\n  // and inside it the jaws of the mastax, chewing.\n  const hwOf = (u) => (u \u003c 0.36 ? 0.9 + 0.4 * floor(u / 0.12) : u \u003c 0.8 ? 2.1 + 2.5 * sin((PI * (u - 0.36)) / 0.44) : u \u003c 0.88 ? 2 : 2.9);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= L; u += 0.5) at(u, hwOf(u / L) * sd, 0.75);\n    at(-1.2, sd * 1.3, 0.7, dot);\n    at(0.72 * L, sd * (0.6 + 0.5 * sin(r.cp * 0.45)), 0.85, dot);\n  }\n  for (let k = 0; k \u003c 7; k++) at(L * (0.42 + 0.05 * k), 1.8 * sin(k * 2.4 + t * 0.6), 0.38 + 0.2 * sin(k * 1.7 + t * 2), dot);\n  // The crown: two discs of cilia whirling the opposite way to each other.\n  lastP = -1;\n  if (cr \u003c 0.02) for (let v = -2.8; v \u003c= 2.8; v += 0.7) at(L, v, 0.6);\n  else\n    for (const sd of [-1, 1]) {\n      const cx = FX + FC * (L + 1.8) - FS * sd * 2.9, cy = FY + FS * (L + 1.8) + FC * sd * 2.9;\n      ring(cx, cy, 2.4 * cr, 0.3 * cr);\n      for (let k = 0; k \u003c 10; k++) {\n        const th = (k / 10) * TAU + sd * r.cp;\n        dot(cx + cos(th) * 3.2 * cr, cy + sin(th) * 3.2 * cr, (0.55 + 0.45 * sin(th * 3 + t * 5)) * cr * g);\n      }\n    }\n}\n\nfunction volvox(o) {\n  const { x, y, R, pts } = o, g = o.p, ax = cos(o.h), ay = sin(o.h), c = cos(o.ph), s = sin(o.ph), c1 = 1 - c;\n  // Rolling about its swimming axis, which lies in the view plane (Rodrigues).\n  const rot = (px, py, pz, k) => {\n    const kd = (ax * px + ay * py) * c1, u = px * c + ay * pz * s + ax * kd, v = py * c - ax * pz * s + ay * kd;\n    return k ? dot(x + R * u, y + R * v, pz * c + (ax * py - ay * px) * s > 0 ? 0.85 : 0.5, u * u - v * v) : frame(x + R * u, y + R * v, 0);\n  };\n  dep(o.z);\n  col(C.cell, g);\n  for (let k = 0; k \u003c pts.length; k += 3) rot(pts[k], pts[k + 1], pts[k + 2], 1);\n  col(C.vrim, g);\n  ring(x, y, R + 0.4, 0.55);\n  // The faint diffraction fringe outside the rim.\n  ring(x, y, R + 2.6, 0.3);\n  col(C.dau, g);\n  for (const [px, py, pz, r] of o.d) rot(px, py, pz, 0), ring(FX, FY, r, 0.95), dot(FX, FY, 0.7);\n}\n\nfunction paramecium(o, i, t) {\n  const { a, B } = o, gs = cos(o.spin), n = ceil(TAU * sqrt((a * a + B * B) / 2) * 1.3);\n  frame(o.x, o.y, o.h);\n  dep(o.z);\n  col(C.par, o.p);\n  // Outline and cilia: a metachronal wave runs back along the body.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const th = (k / n) * TAU, ct = cos(th), st = sin(th), bw = B * (1 + 0.16 * ct - 0.08 * ct * ct), wv = sin(th * 9 - t * 10);\n      let nu = ct / a, nv = st / bw, nl = sqrt(nu * nu + nv * nv);\n      const nx = nu * FC - nv * FS, ny = nu * FS + nv * FC, q = (nx * nx - ny * ny) / (nl * nl);\n      (nu = (1.5 * nu) / nl), (nv = (1.5 * nv) / nl);\n      if (!pass) at(a * ct, bw * st, 0.62 + 0.25 * wv, put, q);\n      else if (wv > 0.2) at(a * ct + nu, bw * st + nv, 0.6 * wv, dot, q);\n    }\n  }\n  // The oral groove, a bright furrow from the front to the middle that swaps\n  // sides as the cell spins on its long axis.\n  lastP = -1;\n  for (let u = 0.05; u \u003c 0.62; u += 0.06) at(u * a, gs * B * (0.3 + 0.75 * u) * (u \u003c 0.5 ? 1 : 1 - (u - 0.5) * 6), 0.5 * abs(gs) + 0.12, put, 0);\n  // Granules and food vacuoles carried round by cyclosis, and the two\n  // contractile vacuoles filling and emptying.\n  col(C.gran, o.p);\n  for (let k = 0; k \u003c 23; k++) {\n    const th = k * 2.4 + o.cy * (k % 3 ? 0.6 : 1), r = 0.25 + 0.6 * ((k * 0.618) % 1);\n    at(0.8 * a * r * cos(th), 0.62 * B * r * sin(th), k % 3 ? 0.36 + 0.16 * sin(t * 3 + k) : 0.6, dot, 0);\n  }\n  col(C.par, o.p);\n  o.cv.forEach((c, j) => c > 0.31 && c \u003c 0.85 && ring(FX + (j ? -0.55 : 0.55) * a * FC, FY + (j ? -0.55 : 0.55) * a * FS, 1.6 * c, 0.55));\n}\n\nfunction diatom(o) {\n  const { a, B } = o;\n  if (o.f \u003c 0) frame(o.x, o.y, o.h);\n  else fil(o.f), frame(fx + fty * (3.4 + B), fy - ftx * (3.4 + B), atan2(fty, ftx));\n  dep(o.z);\n  col(C.dia, o.p);\n  // The rim glints at each stria; the raphe runs down the middle, broken at\n  // the central nodule.\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = -a; u \u003c= a; u += 0.6) at(u, sd * B * (1 - (u / a) ** 2) ** 0.75, 0.62 + 0.3 * cos(u * PI));\n  }\n  for (let u = -0.8 * a; u \u003c= 0.8 * a; u += 1.6) if (abs(u) > 1) at(u, 0, 0.6, dot);\n  at(0, 0, 0.8, dot);\n}\n\nfunction oscillatoria(o, i, t, OP) {\n  const n = o.L, hl = n / 2;\n  // The centre line, from the middle out to each end, bending as the ends wave.\n  for (const sd of [-1, 1]) {\n    let x = o.x, y = o.y;\n    for (let s = 1; s \u003c= hl; s++) {\n      const a = o.h + o.k * s * sd + 0.6 * sin(o.ph + sd) * (s / hl) ** 3;\n      (x += cos(a) * sd), (y += sin(a) * sd), (OP[(hl + s * sd) * 2] = x), (OP[(hl + s * sd) * 2 + 1] = y);\n    }\n  }\n  (OP[n] = o.x), (OP[n + 1] = o.y);\n  dep(o.z);\n  col(C.osc, o.p);\n  for (const e of [-1.2, 1.2]) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const x = OP[k * 2], y = OP[k * 2 + 1], dx = OP[k * 2 + 2] - x, dy = OP[k * 2 + 3] - y;\n      put(x - dy * e, y + dx * e, 0.6, dy * dy - dx * dx);\n    }\n  }\n  // Cross walls between the cells.\n  for (let k = 1; k \u003c n; k += 2) dot(OP[k * 2], OP[k * 2 + 1], 0.4);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  (S = P.S), (Q = P.Q), (ox = P.ox), (oy = P.oy), (foc = P.foc), (m1 = P.m1);\n  S.fill(0);\n  Q.fill(0);\n  const t = P.t, show = (L, f) => L.forEach((o, i) => o.p > 0.02 && f(o, i, t, P.OP));\n  thread();\n  show(P.vor, vorticella);\n  show(P.rot, rotifer);\n  show(P.dia, diatom);\n  show(P.osc, oscillatoria);\n  show(P.vol, volvox);\n  show(P.par, paramecium);\n  show(P.fla, (o) => {\n    const c = cos(o.h), s = sin(o.h);\n    dep(o.z);\n    col(o.k ? C.par : C.eug, o.p);\n    dot(o.x, o.y, 0.9);\n    dot(o.x - c * 1.2, o.y - s * 1.2, 0.55);\n    for (let k = 1; k \u003c= 3; k++) dot(o.x + c * (1 + k) - s * sin(t * 20 + k * 1.3) * 0.7, o.y + s * (1 + k) + c * sin(t * 20 + k * 1.3) * 0.7, 0.3);\n  });\n  show(P.det, (o) => {\n    dep(o.z);\n    col(o.k ? C.amb : C.gry, o.p);\n    for (const [dx, dy, s] of o.pts) dot(o.x + dx, o.y + dy, s);\n  });\n  col(C.par);\n  show(P.bac, (o) => (dep(o.z), dot(o.x, o.y, o.s * o.p)));\n  blur(Q, P.T);\n  // Light into LEDs, toned by the brightest channel so a green stays green,\n  // each lit LED with a grain of its own, and under it all the still grain\n  // of particles too small to resolve, below 24/255. The grain stays put:\n  // drawn anew every frame it was static, and it took the motion from 1.38\n  // to 2.31.\n  const m2 = P.m2, { V, L, QS } = P, c3 = K0;\n  for (let i = 0; i \u003c HW * HH; i++) QS[i] = Q[i * 3] + Q[i * 3 + 1] + Q[i * 3 + 2];\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      // The halo cell under the LED and its neighbours toward it, bilinear.\n      const o = p * 3, i = x >> 1, j = (y >> 1) * HW, i2 = cl(i + (x & 1) * 2 - 1, 0, HW - 1), j2 = cl((y >> 1) + (y & 1) * 2 - 1, 0, HH - 1) * HW;\n      const A = j + i, B = j + i2, c = j2 + i, e = j2 + i2, hl = QS[A] + QS[B] + QS[c] + QS[e] > 0, hh = h32(p, 7), sh = hh >>> 24;\n      for (let n = 0; n \u003c 3; n++) c3[n] = S[o + n] + (hl ? 0.17 * Q[A * 3 + n] + 0.056 * (Q[B * 3 + n] + Q[c * 3 + n]) + 0.019 * Q[e * 3 + n] : 0);\n      const mx = max(c3[0], c3[1], c3[2]), k = mx > 0.001 ? (LUT[min(1023, (mx * 256) | 0)] / mx) * (0.8 + sh / 640) : 0, l = (mx * k) / 255;\n      for (let n = 0, hb; n \u003c 3; n++) (hb = (hh >>> (n * 8)) & 255), (c3[n] = V[p] * (c3[n] * k * (1 + hb / 2200) + sh * (0.062 + (hb & 15) / 500) + m1 * FIELD[n]));\n      // Phase contrast: the field grey, each body darker than it, and a\n      // bright halo on the LEDs beside it.\n      if (m2) {\n        const dk = 1 - 0.8 * cl(l * 1.6, 0, 1), ha = max(0, max(L[p - (x > 0)], L[p + (x \u003c 63)], L[p - (y > 0) * W], L[p + (y \u003c 127) * W]) - l) * 160;\n        for (let n = 0; n \u003c 3; n++) c3[n] += m2 * (V[p] * (PHASE[n] * dk + ha + ((hh >>> (n * 8 + 3)) & 15)) - c3[n]);\n      }\n      L[p] = l;\n      display.setPixel(x, y, min(255, c3[0]) | 0, min(255, c3[1]) | 0, min(255, c3[2]) | 0);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower."},{"name":"Crowd","min":0,"max":1,"about":"At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in."},{"name":"Focus","min":-1,"max":1,"about":"Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit."}],"start":[0,2,0,0.06],"measures":{"motion":1.3814,"detail":0.2217,"edges":0.4142,"complexity":2.0815,"coverage":0.2631,"colour":0.1726,"drift":0.1456},"knobResponse":[0.5278,0.261,0.0556,0.1832]},{"slug":"datamosh","title":"Datamosh","family":"glitch","round":15,"note":"키프레임을 잃은 영상이에요. 노을과 격자 바닥이 제 움직임대로 블록째 밀려 녹아 흐르고, 장면이 바뀌면 새 그림이 옛 움직임을 따라 부서져요.","idea":"A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.","buttons":"K1 tap drops a whole clean keyframe, which then melts.","code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","layer":{"id":"layer-datamosh","type":"code","name":"datamosh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second."},{"name":"Block","min":8,"max":16,"about":"The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame."},{"name":"Mosh","min":0,"max":1,"about":"How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1."}],"start":[0,2,8,0.06],"measures":{"motion":0.3661,"detail":0.0404,"edges":0.6611,"complexity":0.3641,"coverage":1,"colour":0.4625,"drift":0.1386},"knobResponse":[0.3092,0.1339,0.1128,0.1158]},{"slug":"day-cycle","title":"Day and Night","family":"weather","round":2,"note":"호수 위 작은 집이 하루를 지켜봐요. 해가 언덕 뒤로 지면 하늘이 노을을 지나 별과 달로 넘어가고 창에 하나씩 불이 켜져요.","idea":"A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","layer":{"id":"layer-day-cycle","type":"code","name":"day-cycle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof."},{"name":"Time","min":0.2,"max":8,"about":"How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts."},{"name":"Clouds","min":0.15,"max":1,"about":"From a few small clouds to a sky that is nearly overcast."},{"name":"Sun path","min":-1,"max":1,"about":"How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.0549,"detail":0.0184,"edges":0.5425,"complexity":0.6376,"coverage":1,"colour":0.3226,"drift":0.2553},"knobResponse":[0.2229,0.2763,0.1419,0.1052]},{"slug":"domain-warp","title":"Domain Warp","family":"noise","round":1,"note":"노이즈가 제 자신을 비틀어서 어두운 쪽빛 돌에 금빛 결이 흘러요. 대리석을 붓는 것처럼 천천히 뒤섞여요.","idea":"Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n// @ramp oklab wrap 0:#05030f 0.16:#0e1450 0.22:#2a7ac0 0.27:#100c44 0.5:#2c1478 0.62:#c83888 0.68:#ffd890 0.74:#ff6a3a 0.84:#4a0a3a 1:#05030f\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","layer":{"id":"layer-domain-warp","type":"code","name":"domain-warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#05030f","alpha":1},{"position":0.16,"color":"#0e1450","alpha":1},{"position":0.22,"color":"#2a7ac0","alpha":1},{"position":0.27,"color":"#100c44","alpha":1},{"position":0.5,"color":"#2c1478","alpha":1},{"position":0.62,"color":"#c83888","alpha":1},{"position":0.68,"color":"#ffd890","alpha":1},{"position":0.74,"color":"#ff6a3a","alpha":1},{"position":0.84,"color":"#4a0a3a","alpha":1},{"position":1,"color":"#05030f","alpha":1}],"mode":"oklab","wrap":true},"recolor":false,"knobsAnnotationRaw":"// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Cycle","min":0,"max":1,"about":"Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back."},{"name":"Speed","min":0,"max":5,"about":"How fast the marble pours; 0 holds it still."},{"name":"Warp","min":1,"max":6,"about":"How hard the noise is folded into itself, from loose marble to tight swirls."},{"name":"Zoom","min":0.035,"max":0.095,"about":"Size of the stone; low is a few big swirls, high is fine grain."}],"start":[0,2,1,0.06],"measures":{"motion":0.2428,"detail":0.0806,"edges":0.2816,"complexity":1.8069,"coverage":0.9604,"colour":0.3247,"drift":0.15},"knobResponse":[0.3352,0.1929,0.1917,0.2107]},{"slug":"domino-run","title":"Domino Run","family":"physics","round":16,"note":"여섯 선반과 나선 계단 다섯을 잇는 도미노 마흔 개를 손끝이 밀면, 물결이 제 물리 빠르기로 내려가고 낮은 램프 빛을 받던 상아색 면이 쓰러지는 대로 어두워져요. 다 쓰러지면 필름이 거꾸로 돌아 줄을 다시 세워요. 줄이 달리는 동안 K1 을 누르면 아직 서 있는 선반 머리에서 두 번째 물결이 떠나요.","idea":"A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.","buttons":"K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.","code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","layer":{"id":"layer-domino-run","type":"code","name":"domino-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed."},{"name":"Spacing","min":-1,"max":1,"about":"The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall."},{"name":"Angle","min":-1,"max":1,"about":"Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves."}],"start":[0,2,0,0.06],"measures":{"motion":0.1541,"detail":0.079,"edges":0.5891,"complexity":0.4474,"coverage":0.2699,"colour":0.0868,"drift":0.2609},"knobResponse":[0.2214,0.1713,0.2211,0.2694]},{"slug":"dragon","title":"Dragon Fold","family":"fractal","round":2,"note":"종이띠를 반으로 접기를 열 번 되풀이하면 헤이웨이 드래곤이 돼요. 세대마다 선 전체의 복사본이 끝점을 축으로 90도 돌아 나오고, 다 접히면 거꾸로 닫혀요.","idea":"A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.","buttons":"K1 tap turns the folding round, so it closes up or opens out from where it is.","code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-dragon","type":"code","name":"dragon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour that runs along the line starts."},{"name":"Fold Speed","min":0.5,"max":6,"about":"How quickly one generation swings out of the last."},{"name":"Generations","min":8,"max":10,"about":"How many folds before it holds, from 256 segments to 1024."},{"name":"Dragons","min":1,"max":4,"about":"One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point."}],"start":[0,2,8,1],"measures":{"motion":0.7649,"detail":0.0834,"edges":0.9552,"complexity":0.1947,"coverage":0.1168,"colour":0.2214,"drift":0.0797},"knobResponse":[0.0573,0.0725,0.0977,0.1563]},{"slug":"dripstone","title":"Dripstone","family":"mineral","round":19,"note":"석회동굴 단면이 128줄을 다 써요. 종유석 끝에서 물방울이 부풀다 떨어져 석순을 한 방울씩 키우고 웅덩이에 동심원을 그리는 사이, 쇼케이브 조명이 청록과 보라, 흰빛으로 번갈아 바뀌고 동굴 탐험가의 헤드램프가 옆으로 훑고 지나가요.","idea":"A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","layer":{"id":"layer-dripstone","type":"code","name":"dripstone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row."},{"name":"Age","min":0,"max":1,"about":"How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool."},{"name":"Damp","min":0,"max":1,"about":"How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall."}],"start":[0,2,0,0.06],"measures":{"motion":0.113,"detail":0.0548,"edges":0.2063,"complexity":2.555,"coverage":0.9702,"colour":0.163,"drift":0.1125},"knobResponse":[0.0618,0.1355,0.0996,0.0869]},{"slug":"drop-tower","title":"Drop Tower","family":"fair","round":18,"note":"밤 놀이공원의 드롭 타워가 128줄을 다 써요. 링에 탄 여덟 사람을 꼭대기까지 끌어올려 매달아 두었다가 탑 높이에 맞춘 중력으로 떨어뜨리고, 자석 브레이크에서 번쩍이며 세워요. K1 을 누르면 오르는 중에도 바로 떨어뜨려요.","idea":"A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.","buttons":"K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.","code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","layer":{"id":"layer-drop-tower","type":"code","name":"drop-tower","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Height","min":50,"max":110,"about":"The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m."},{"name":"Thrill","min":0,"max":1,"about":"How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g."}],"start":[0,2,50,0.06],"measures":{"motion":0.437,"detail":0.0668,"edges":0.5494,"complexity":1.5352,"coverage":0.8276,"colour":0.1705,"drift":0.1633},"knobResponse":[0.0483,0.0875,0.0709,0.0567]},{"slug":"drying-mud","title":"Drying Mud","family":"cells","round":16,"note":"젖은 흙이 마르며 금이 직각으로 갈라져 T 자로 만나고, 오래된 금은 넓고 깊어지며 조각 테두리가 밝게 말려 올라가요. K1 을 누르면 소나기가 와서 금이 물에 잠겨 닫히고 흙이 다시 말라요.","idea":"Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.","buttons":"K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.","code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","layer":{"id":"layer-drying-mud","type":"code","name":"drying-mud","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Clay","min":0,"max":1,"about":"What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay."},{"name":"Sun","min":0.3,"max":3,"about":"How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider."},{"name":"Cracks","min":0,"max":1,"about":"How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across."},{"name":"Curl","min":0,"max":1,"about":"How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip."}],"start":[0,2,0,0.06],"measures":{"motion":0.0652,"detail":0.0775,"edges":0.2652,"complexity":2.4007,"coverage":0.991,"colour":0.1598,"drift":0.1523},"knobResponse":[0.1914,0.2254,0.1497,0.0607]},{"slug":"dust-motes","title":"Dust Motes","family":"particle","round":19,"note":"어두운 방, 높은 창에서 내려온 햇살 한 줄기 안에서만 먼지가 반짝이며 떠돌고, 커튼이 흔들리면 빛줄기가 좁아졌다 넓어져요. K1 을 누르면 사람이 방을 가로질러 빛줄기에 그림자를 내고, 발치에서 먼지가 빛 속으로 피어올라요.","idea":"A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.","buttons":"K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.","code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","layer":{"id":"layer-dust-motes","type":"code","name":"dust-motes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten."},{"name":"Dust","min":1,"max":4,"about":"How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself."},{"name":"Draft","min":-1,"max":1,"about":"Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade."}],"start":[0,2,1,0.06],"measures":{"motion":0.0301,"detail":0.0213,"edges":0.2348,"complexity":0.703,"coverage":0.3211,"colour":0.0688,"drift":0.0337},"knobResponse":[0.0562,0.0401,0.0354,0.0362]},{"slug":"dyson-gas","title":"Dyson Gas","family":"particle","round":29,"note":"고유값 열 개가 맨 위 줄에 구슬로 떨며 서로 밀어내고, 그 지나온 길이 실이 되어 아래로 흘러요. 실은 가운데에 빽빽하고 가장자리로 갈수록 성기며 서로 건너지 않아요. K3 은 행렬 크기(10~28)이고, K1 을 누르면 밀어내는 힘이 3초쯤 꺼져 실이 엉키며 건너요.","idea":"The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.","buttons":"K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.","code":"// ===== Patternflow pattern =====\n// Title:   Dyson Gas\n// Family:  particle\n// Idea:    The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dyson Brownian motion (Freeman Dyson, 1962), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9\n//\n// Knob 1: Hue. Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it.\n// Knob 2: Speed. How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder.\n// Knob 3: Count. The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28.\n// Knob 4: Beta. The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal.\n// Buttons: K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.\n\nconst W = 64, H = 128, N = W * H, NMAX = 28, CX = 31.5;\nconst { min, max, floor, round, sqrt, abs, asin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\n// A normal sample from four uniforms: bounded, which keeps a substep small.\nconst gauss = () => (rnd() + rnd() + rnd() + rnd() - 2) * 1.7320508;\n\n// The process, in Dyson's units with an Ornstein-Uhlenbeck pull:\n//   d lambda_i = sum_j 1 / (lambda_i - lambda_j) dt - lambda_i / 2 dt + sqrt(2 / beta) dB_i\n// Its resting state is the Gaussian beta ensemble, whose eigenvalues fill\n// Wigner's semicircle on [-2 sqrt(n), 2 sqrt(n)] whatever beta is; beta only\n// sets how hard the noise shakes them. The semicircle's edge sits RPX LEDs\n// either side of the middle.\nconst RPX = 29.5;\n// The longest substep. Near a close pair the step shrinks with the square of\n// the gap, so the pair is pushed apart before the noise can carry it across.\n// A frame takes at most SUBMAX substeps; right after a pinch, when the gaps\n// are tiny, the rest of that frame's time is let go and the fan opens a\n// little slower for a few frames.\nconst DTMAX = 0.004, SUBMAX = 500;\n// History rows kept, one more than the panel so the scroll can interpolate.\nconst HB = H + 2;\n// Where the rainbow starts at Hue 0 (sea green) and how much of the wheel it\n// spans, so the highest eigenvalue is pink.\nconst H0 = 0.42, SPAN = 0.52;\n// The beads ride on this row; the threads hang from it.\nconst TOP = 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Where the k-th of n eigenvalues sits in the semicircle, as a fraction of\n// its radius: the inverse of F(u) = 1/2 + (u sqrt(1 - u^2) + asin u) / pi.\nfunction quantile(q) {\n  let a = -1, b = 1;\n  for (let it = 0; it \u003c 40; it++) {\n    const u = (a + b) / 2;\n    if (0.5 + (u * sqrt(1 - u * u) + asin(u)) / PI \u003c q) a = u;\n    else b = u;\n  }\n  return (a + b) / 2;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    n: 10, beta: 1, sp: 2, hue: -1, started: false,\n    lam: new Float64Array(NMAX), sm: new Float64Array(NMAX), f: new Float64Array(NMAX), ord: new Int8Array(NMAX), hc: new Float32Array(NMAX),\n    hx: new Float32Array(HB * NMAX), hh: new Float32Array(HB * NMAX), hn: new Uint8Array(HB), he: new Uint16Array(HB),\n    head: 0, acc: 0, ep: 0, free: 0, pinch: -1, snap: new Float64Array(NMAX),\n    X: new Float32Array((H + 1) * NMAX), XH: new Float32Array((H + 1) * NMAX), Xn: new Uint8Array(H + 1), Xe: new Uint16Array(H + 1),\n    buf: new Float32Array(N * 3), lut: new Float32Array(256 * 3),\n  });\n  paint(P, 0);\n  fill(P);\n}\n\n// The rainbow for this Hue, 256 steps from the lowest eigenvalue's colour to\n// the highest's.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let j = 0; j \u003c 256; j++) hsv(hue + H0 + (SPAN * j) / 255, 0.82, 255, P.lut, j * 3);\n}\n\n// A fresh matrix of the current size, already at rest, with a full panel of\n// history behind it so the first frame shows the threads.\nfunction fill(P) {\n  const n = P.n, R = 2 * sqrt(n);\n  P.ep++;\n  for (let i = 0; i \u003c n; i++) (P.lam[i] = R * quantile((i + 0.5) / n)), (P.ord[i] = i), (P.hc[i] = n > 1 ? i / (n - 1) : 0.5);\n  P.free = 0, P.pinch = -1, P.acc = 0;\n  step(P, 2);\n  P.sm.set(P.lam);\n  const tr = rowTau(P.sp);\n  for (let k = 0; k \u003c HB; k++) step(P, tr), look(P, 1), push(P);\n}\n\n// The threads are drawn through a short exposure: each one follows its\n// eigenvalue with a lag of SMOOTH rows. An average of ordered positions is\n// still ordered, so the drawn threads cannot cross where the eigenvalues\n// do not.\nconst SMOOTH = 3;\nfunction look(P, rows) {\n  const a = 1 - Math.exp(-rows / SMOOTH);\n  for (let i = 0; i \u003c P.n; i++) P.sm[i] += (P.lam[i] - P.sm[i]) * a;\n}\n\n// Rows a second and stretch of the process per row, both from Speed.\nconst rowRate = (s) => 5 + 7.5 * s;\nconst rowTau = (s) => 0.01 + 0.01 * s;\n\nfunction push(P) {\n  const n = P.n, sc = RPX / (2 * sqrt(n));\n  P.head = (P.head + 1) % HB;\n  const o = P.head * NMAX;\n  for (let i = 0; i \u003c n; i++) (P.hx[o + i] = CX + P.sm[i] * sc), (P.hh[o + i] = P.hc[i]);\n  P.hn[P.head] = n, P.he[P.head] = P.ep;\n}\n\n// Advance the process by T. With the repulsion on, the eigenvalues keep the\n// order they had when it came on: ord lists them left to right, and if a\n// substep ever lets a pair overtake, the two swap places rather than cross.\nfunction step(P, T) {\n  const n = P.n, lam = P.lam, f = P.f, ord = P.ord, rep = P.free \u003c= 0, sd0 = sqrt(2 / P.beta);\n  let left = T;\n  for (let it = 0; it \u003c SUBMAX && left > 1e-9; it++) {\n    for (let i = 0; i \u003c n; i++) f[i] = -0.5 * lam[i];\n    let dt = DTMAX;\n    if (rep) {\n      for (let i = 0; i \u003c n; i++)\n        for (let j = i + 1; j \u003c n; j++) {\n          let d = lam[i] - lam[j];\n          if (abs(d) \u003c 1e-6) d = d \u003c 0 ? -1e-6 : 1e-6;\n          const q = 1 / d;\n          (f[i] += q), (f[j] -= q);\n        }\n      // No eigenvalue may move more than a fifth of the closest gap in one\n      // substep, by the push or by the noise.\n      let g = 1e9, fm = 1e-9;\n      for (let r = 0; r + 1 \u003c n; r++) g = min(g, lam[ord[r + 1]] - lam[ord[r]]);\n      for (let i = 0; i \u003c n; i++) fm = max(fm, abs(f[i]));\n      g = max(g, 1e-6);\n      dt = min(DTMAX, 0.2 * g * g, (0.2 * g) / fm);\n    }\n    if (dt > left) dt = left;\n    const sd = sd0 * sqrt(dt);\n    for (let i = 0; i \u003c n; i++) lam[i] += f[i] * dt + sd * gauss();\n    if (rep)\n      for (let r = 0; r + 1 \u003c n; r++) {\n        const a = ord[r], b = ord[r + 1];\n        if (lam[b] \u003c lam[a]) {\n          const t = lam[a];\n          (lam[a] = lam[b]), (lam[b] = t);\n        }\n      }\n    left -= dt;\n  }\n}\n\n// When the repulsion comes back, the eigenvalues are ranked where they\n// stand and each colour starts drifting back to its rank's place in the\n// rainbow.\nfunction rank(P) {\n  const n = P.n, ord = P.ord, lam = P.lam;\n  for (let i = 0; i \u003c n; i++) ord[i] = i;\n  for (let i = 1; i \u003c n; i++) {\n    const v = ord[i];\n    let j = i - 1;\n    while (j >= 0 && lam[ord[j]] > lam[v]) (ord[j + 1] = ord[j]), j--;\n    ord[j + 1] = v;\n  }\n}\n\n// A new size keeps the picture: the new eigenvalues take the old ones'\n// quantiles, scaled to the new semicircle.\nfunction resize(P, n) {\n  const m = P.n, ord = P.ord, lam = P.lam, u = new Float64Array(m);\n  rank(P);\n  for (let r = 0; r \u003c m; r++) u[r] = lam[ord[r]] / (2 * sqrt(m));\n  P.n = n, P.ep++, P.free = 0, P.pinch = -1;\n  for (let i = 0; i \u003c n; i++) {\n    const q = n > 1 ? (i / (n - 1)) * (m - 1) : (m - 1) / 2, a = floor(q), b = min(m - 1, a + 1);\n    lam[i] = (u[a] + (u[b] - u[a]) * (q - a)) * 2 * sqrt(n);\n    ord[i] = i, P.hc[i] = n > 1 ? i / (n - 1) : 0.5;\n  }\n  P.sm.set(lam);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 1], d = cl(dt || 0, 0, 0.1);\n  const pr = input.btnPressed || [];\n  if (k[0] !== P.hue) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  P.beta = cl(k[3], 1, 9);\n  const n = round(cl(k[2], 10, NMAX));\n  // The first frame's history is made again with the knobs as they stand.\n  if (!P.started) (P.started = true), (P.n = n), fill(P);\n  else if (n !== P.n) resize(P, n);\n\n  if (pr[0] && P.pinch \u003c 0) P.free = 2;\n  if (pr[1] && P.pinch \u003c 0) {\n    P.pinch = 0, P.free = 0;\n    for (let i = 0; i \u003c P.n; i++) P.snap[i] = P.lam[i];\n  }\n\n  const tau = d * rowRate(P.sp) * rowTau(P.sp);\n  if (P.pinch >= 0) {\n    // The matrix scaled down to nothing: every eigenvalue scales with it, so\n    // the threads run straight into the middle. At a thirtieth of its size it\n    // is let go and the repulsion fans it out again.\n    P.pinch += d;\n    const t = cl(P.pinch / 0.55, 0, 1), s = 0.03 + 0.97 * (1 - t * t * (3 - 2 * t));\n    for (let i = 0; i \u003c P.n; i++) P.lam[i] = P.snap[i] * s;\n    if (t >= 1) (P.pinch = -1), rank(P);\n  } else if (P.free > 0) {\n    step(P, tau);\n    P.free -= tau;\n    if (P.free \u003c= 0) rank(P);\n  } else step(P, tau);\n\n  // Colours ease back to their rank's place once the order is settled again.\n  if (P.free \u003c= 0) {\n    const n1 = max(1, P.n - 1), e = min(1, d * 1.2);\n    for (let r = 0; r \u003c P.n; r++) P.hc[P.ord[r]] += (r / n1 - P.hc[P.ord[r]]) * e;\n  }\n  look(P, d * rowRate(P.sp));\n  P.acc += d * rowRate(P.sp);\n  while (P.acc >= 1) (P.acc -= 1), push(P);\n}\n\n// One thread's light on one row: a 1-LED core across the span it moves\n// through between this row and the next, and a soft halo either side.\nfunction span(buf, y, a, b, r, g, bl) {\n  const x0 = max(0, floor(a - 2.5)), x1 = min(W - 1, floor(b + 2.5)), o = y * W;\n  for (let x = x0; x \u003c= x1; x++) {\n    const c = x + 0.5, dd = c \u003c a ? a - c : c > b ? c - b : 0;\n    let w = 1 - dd;\n    const h = 0.3 / (1 + dd * dd * 1.6);\n    if (w \u003c h) w = h;\n    const q = (o + x) * 3;\n    buf[q] += r * w, buf[q + 1] += g * w, buf[q + 2] += bl * w;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, sc = RPX / (2 * sqrt(n)), X = P.X, XH = P.XH, Xn = P.Xn, Xe = P.Xe, buf = P.buf, lut = P.lut, L = H - TOP;\n  // History row 0 is now, on the beads; the newest stored row is acc rows\n  // down, the next one a row further. Each drawn row interpolates between\n  // the two stored rows it falls between, so the scroll glides.\n  for (let y = 0; y \u003c= L; y++) {\n    const o = y * NMAX;\n    let ia, ib, t;\n    if (y \u003c P.acc) (ia = -1), (ib = P.head), (t = y / P.acc);\n    else {\n      const u = y - P.acc, kk = floor(u);\n      (ia = (P.head - kk + HB * 2) % HB), (ib = (ia - 1 + HB) % HB), (t = u - kk);\n    }\n    const ea = ia \u003c 0 ? P.ep : P.he[ia], eb = P.he[ib], na = ia \u003c 0 ? n : P.hn[ia], nb = P.hn[ib];\n    if (ea === eb && na === nb) {\n      for (let i = 0; i \u003c na; i++) {\n        const xa = ia \u003c 0 ? CX + P.sm[i] * sc : P.hx[ia * NMAX + i], ha = ia \u003c 0 ? P.hc[i] : P.hh[ia * NMAX + i];\n        X[o + i] = xa + (P.hx[ib * NMAX + i] - xa) * t;\n        XH[o + i] = ha + (P.hh[ib * NMAX + i] - ha) * t;\n      }\n      (Xn[y] = na), (Xe[y] = ea);\n    } else {\n      // A row from before Count was turned: no thread joins across it.\n      const s = t \u003c 0.5 && ia >= 0 ? ia : ib;\n      for (let i = 0; i \u003c P.hn[s]; i++) (X[o + i] = P.hx[s * NMAX + i]), (XH[o + i] = P.hh[s * NMAX + i]);\n      (Xn[y] = P.hn[s]), (Xe[y] = P.he[s]);\n    }\n  }\n  buf.fill(0);\n  for (let y = 0; y \u003c L; y++) {\n    const o = y * NMAX, m = Xn[y];\n    const okU = y > 0 && Xe[y - 1] === Xe[y] && Xn[y - 1] === m, okD = Xe[y + 1] === Xe[y] && Xn[y + 1] === m;\n    // The past dims a little toward the bottom; the newest rows burn\n    // brighter and whiter.\n    const fade = 1 - 0.42 * (y / L), hot = y \u003c 5 ? 0.35 * (1 - y / 5) : 0, f1 = fade * (1 + hot), wh = 90 * hot;\n    for (let i = 0; i \u003c m; i++) {\n      const x = X[o + i], xu = okU ? (X[o - NMAX + i] + x) / 2 : x, xd = okD ? (X[o + NMAX + i] + x) / 2 : x;\n      const q = round(cl(XH[o + i], 0, 1) * 255) * 3;\n      span(buf, y + TOP, min(x, xu, xd), max(x, xu, xd), lut[q] * f1 + wh, lut[q + 1] * f1 + wh, lut[q + 2] * f1 + wh);\n    }\n  }\n  // The eigenvalues themselves: a bead on the top of each thread, white at\n  // the heart and its own colour round the rim.\n  for (let i = 0; i \u003c n; i++) {\n    const x = X[i], q = round(cl(P.hc[i], 0, 1) * 255) * 3;\n    const r = lut[q] * 0.7 + 76, g = lut[q + 1] * 0.7 + 76, b = lut[q + 2] * 0.7 + 76;\n    for (let yy = 0; yy \u003c TOP + 4; yy++)\n      for (let xx = max(0, floor(x - 2.5)); xx \u003c= min(W - 1, floor(x + 2.5)); xx++) {\n        const dx = xx + 0.5 - x, dy = yy - TOP, r2 = dx * dx + dy * dy * 1.2, w = 1.35 / (1 + r2 * 0.9) - 0.14, p = (yy * W + xx) * 3;\n        if (w \u003c= 0) continue;\n        const wc = 140 * w * w;\n        (buf[p] += r * w + wc), (buf[p + 1] += g * w + wc), (buf[p + 2] += b * w + wc);\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-dyson-gas","type":"code","name":"dyson-gas","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dyson Gas\n// Family:  particle\n// Idea:    The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dyson Brownian motion (Freeman Dyson, 1962), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9\n//\n// Knob 1: Hue. Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it.\n// Knob 2: Speed. How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder.\n// Knob 3: Count. The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28.\n// Knob 4: Beta. The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal.\n// Buttons: K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.\n\nconst W = 64, H = 128, N = W * H, NMAX = 28, CX = 31.5;\nconst { min, max, floor, round, sqrt, abs, asin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\n// A normal sample from four uniforms: bounded, which keeps a substep small.\nconst gauss = () => (rnd() + rnd() + rnd() + rnd() - 2) * 1.7320508;\n\n// The process, in Dyson's units with an Ornstein-Uhlenbeck pull:\n//   d lambda_i = sum_j 1 / (lambda_i - lambda_j) dt - lambda_i / 2 dt + sqrt(2 / beta) dB_i\n// Its resting state is the Gaussian beta ensemble, whose eigenvalues fill\n// Wigner's semicircle on [-2 sqrt(n), 2 sqrt(n)] whatever beta is; beta only\n// sets how hard the noise shakes them. The semicircle's edge sits RPX LEDs\n// either side of the middle.\nconst RPX = 29.5;\n// The longest substep. Near a close pair the step shrinks with the square of\n// the gap, so the pair is pushed apart before the noise can carry it across.\n// A frame takes at most SUBMAX substeps; right after a pinch, when the gaps\n// are tiny, the rest of that frame's time is let go and the fan opens a\n// little slower for a few frames.\nconst DTMAX = 0.004, SUBMAX = 500;\n// History rows kept, one more than the panel so the scroll can interpolate.\nconst HB = H + 2;\n// Where the rainbow starts at Hue 0 (sea green) and how much of the wheel it\n// spans, so the highest eigenvalue is pink.\nconst H0 = 0.42, SPAN = 0.52;\n// The beads ride on this row; the threads hang from it.\nconst TOP = 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Where the k-th of n eigenvalues sits in the semicircle, as a fraction of\n// its radius: the inverse of F(u) = 1/2 + (u sqrt(1 - u^2) + asin u) / pi.\nfunction quantile(q) {\n  let a = -1, b = 1;\n  for (let it = 0; it \u003c 40; it++) {\n    const u = (a + b) / 2;\n    if (0.5 + (u * sqrt(1 - u * u) + asin(u)) / PI \u003c q) a = u;\n    else b = u;\n  }\n  return (a + b) / 2;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    n: 10, beta: 1, sp: 2, hue: -1, started: false,\n    lam: new Float64Array(NMAX), sm: new Float64Array(NMAX), f: new Float64Array(NMAX), ord: new Int8Array(NMAX), hc: new Float32Array(NMAX),\n    hx: new Float32Array(HB * NMAX), hh: new Float32Array(HB * NMAX), hn: new Uint8Array(HB), he: new Uint16Array(HB),\n    head: 0, acc: 0, ep: 0, free: 0, pinch: -1, snap: new Float64Array(NMAX),\n    X: new Float32Array((H + 1) * NMAX), XH: new Float32Array((H + 1) * NMAX), Xn: new Uint8Array(H + 1), Xe: new Uint16Array(H + 1),\n    buf: new Float32Array(N * 3), lut: new Float32Array(256 * 3),\n  });\n  paint(P, 0);\n  fill(P);\n}\n\n// The rainbow for this Hue, 256 steps from the lowest eigenvalue's colour to\n// the highest's.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let j = 0; j \u003c 256; j++) hsv(hue + H0 + (SPAN * j) / 255, 0.82, 255, P.lut, j * 3);\n}\n\n// A fresh matrix of the current size, already at rest, with a full panel of\n// history behind it so the first frame shows the threads.\nfunction fill(P) {\n  const n = P.n, R = 2 * sqrt(n);\n  P.ep++;\n  for (let i = 0; i \u003c n; i++) (P.lam[i] = R * quantile((i + 0.5) / n)), (P.ord[i] = i), (P.hc[i] = n > 1 ? i / (n - 1) : 0.5);\n  P.free = 0, P.pinch = -1, P.acc = 0;\n  step(P, 2);\n  P.sm.set(P.lam);\n  const tr = rowTau(P.sp);\n  for (let k = 0; k \u003c HB; k++) step(P, tr), look(P, 1), push(P);\n}\n\n// The threads are drawn through a short exposure: each one follows its\n// eigenvalue with a lag of SMOOTH rows. An average of ordered positions is\n// still ordered, so the drawn threads cannot cross where the eigenvalues\n// do not.\nconst SMOOTH = 3;\nfunction look(P, rows) {\n  const a = 1 - Math.exp(-rows / SMOOTH);\n  for (let i = 0; i \u003c P.n; i++) P.sm[i] += (P.lam[i] - P.sm[i]) * a;\n}\n\n// Rows a second and stretch of the process per row, both from Speed.\nconst rowRate = (s) => 5 + 7.5 * s;\nconst rowTau = (s) => 0.01 + 0.01 * s;\n\nfunction push(P) {\n  const n = P.n, sc = RPX / (2 * sqrt(n));\n  P.head = (P.head + 1) % HB;\n  const o = P.head * NMAX;\n  for (let i = 0; i \u003c n; i++) (P.hx[o + i] = CX + P.sm[i] * sc), (P.hh[o + i] = P.hc[i]);\n  P.hn[P.head] = n, P.he[P.head] = P.ep;\n}\n\n// Advance the process by T. With the repulsion on, the eigenvalues keep the\n// order they had when it came on: ord lists them left to right, and if a\n// substep ever lets a pair overtake, the two swap places rather than cross.\nfunction step(P, T) {\n  const n = P.n, lam = P.lam, f = P.f, ord = P.ord, rep = P.free \u003c= 0, sd0 = sqrt(2 / P.beta);\n  let left = T;\n  for (let it = 0; it \u003c SUBMAX && left > 1e-9; it++) {\n    for (let i = 0; i \u003c n; i++) f[i] = -0.5 * lam[i];\n    let dt = DTMAX;\n    if (rep) {\n      for (let i = 0; i \u003c n; i++)\n        for (let j = i + 1; j \u003c n; j++) {\n          let d = lam[i] - lam[j];\n          if (abs(d) \u003c 1e-6) d = d \u003c 0 ? -1e-6 : 1e-6;\n          const q = 1 / d;\n          (f[i] += q), (f[j] -= q);\n        }\n      // No eigenvalue may move more than a fifth of the closest gap in one\n      // substep, by the push or by the noise.\n      let g = 1e9, fm = 1e-9;\n      for (let r = 0; r + 1 \u003c n; r++) g = min(g, lam[ord[r + 1]] - lam[ord[r]]);\n      for (let i = 0; i \u003c n; i++) fm = max(fm, abs(f[i]));\n      g = max(g, 1e-6);\n      dt = min(DTMAX, 0.2 * g * g, (0.2 * g) / fm);\n    }\n    if (dt > left) dt = left;\n    const sd = sd0 * sqrt(dt);\n    for (let i = 0; i \u003c n; i++) lam[i] += f[i] * dt + sd * gauss();\n    if (rep)\n      for (let r = 0; r + 1 \u003c n; r++) {\n        const a = ord[r], b = ord[r + 1];\n        if (lam[b] \u003c lam[a]) {\n          const t = lam[a];\n          (lam[a] = lam[b]), (lam[b] = t);\n        }\n      }\n    left -= dt;\n  }\n}\n\n// When the repulsion comes back, the eigenvalues are ranked where they\n// stand and each colour starts drifting back to its rank's place in the\n// rainbow.\nfunction rank(P) {\n  const n = P.n, ord = P.ord, lam = P.lam;\n  for (let i = 0; i \u003c n; i++) ord[i] = i;\n  for (let i = 1; i \u003c n; i++) {\n    const v = ord[i];\n    let j = i - 1;\n    while (j >= 0 && lam[ord[j]] > lam[v]) (ord[j + 1] = ord[j]), j--;\n    ord[j + 1] = v;\n  }\n}\n\n// A new size keeps the picture: the new eigenvalues take the old ones'\n// quantiles, scaled to the new semicircle.\nfunction resize(P, n) {\n  const m = P.n, ord = P.ord, lam = P.lam, u = new Float64Array(m);\n  rank(P);\n  for (let r = 0; r \u003c m; r++) u[r] = lam[ord[r]] / (2 * sqrt(m));\n  P.n = n, P.ep++, P.free = 0, P.pinch = -1;\n  for (let i = 0; i \u003c n; i++) {\n    const q = n > 1 ? (i / (n - 1)) * (m - 1) : (m - 1) / 2, a = floor(q), b = min(m - 1, a + 1);\n    lam[i] = (u[a] + (u[b] - u[a]) * (q - a)) * 2 * sqrt(n);\n    ord[i] = i, P.hc[i] = n > 1 ? i / (n - 1) : 0.5;\n  }\n  P.sm.set(lam);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 1], d = cl(dt || 0, 0, 0.1);\n  const pr = input.btnPressed || [];\n  if (k[0] !== P.hue) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  P.beta = cl(k[3], 1, 9);\n  const n = round(cl(k[2], 10, NMAX));\n  // The first frame's history is made again with the knobs as they stand.\n  if (!P.started) (P.started = true), (P.n = n), fill(P);\n  else if (n !== P.n) resize(P, n);\n\n  if (pr[0] && P.pinch \u003c 0) P.free = 2;\n  if (pr[1] && P.pinch \u003c 0) {\n    P.pinch = 0, P.free = 0;\n    for (let i = 0; i \u003c P.n; i++) P.snap[i] = P.lam[i];\n  }\n\n  const tau = d * rowRate(P.sp) * rowTau(P.sp);\n  if (P.pinch >= 0) {\n    // The matrix scaled down to nothing: every eigenvalue scales with it, so\n    // the threads run straight into the middle. At a thirtieth of its size it\n    // is let go and the repulsion fans it out again.\n    P.pinch += d;\n    const t = cl(P.pinch / 0.55, 0, 1), s = 0.03 + 0.97 * (1 - t * t * (3 - 2 * t));\n    for (let i = 0; i \u003c P.n; i++) P.lam[i] = P.snap[i] * s;\n    if (t >= 1) (P.pinch = -1), rank(P);\n  } else if (P.free > 0) {\n    step(P, tau);\n    P.free -= tau;\n    if (P.free \u003c= 0) rank(P);\n  } else step(P, tau);\n\n  // Colours ease back to their rank's place once the order is settled again.\n  if (P.free \u003c= 0) {\n    const n1 = max(1, P.n - 1), e = min(1, d * 1.2);\n    for (let r = 0; r \u003c P.n; r++) P.hc[P.ord[r]] += (r / n1 - P.hc[P.ord[r]]) * e;\n  }\n  look(P, d * rowRate(P.sp));\n  P.acc += d * rowRate(P.sp);\n  while (P.acc >= 1) (P.acc -= 1), push(P);\n}\n\n// One thread's light on one row: a 1-LED core across the span it moves\n// through between this row and the next, and a soft halo either side.\nfunction span(buf, y, a, b, r, g, bl) {\n  const x0 = max(0, floor(a - 2.5)), x1 = min(W - 1, floor(b + 2.5)), o = y * W;\n  for (let x = x0; x \u003c= x1; x++) {\n    const c = x + 0.5, dd = c \u003c a ? a - c : c > b ? c - b : 0;\n    let w = 1 - dd;\n    const h = 0.3 / (1 + dd * dd * 1.6);\n    if (w \u003c h) w = h;\n    const q = (o + x) * 3;\n    buf[q] += r * w, buf[q + 1] += g * w, buf[q + 2] += bl * w;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, sc = RPX / (2 * sqrt(n)), X = P.X, XH = P.XH, Xn = P.Xn, Xe = P.Xe, buf = P.buf, lut = P.lut, L = H - TOP;\n  // History row 0 is now, on the beads; the newest stored row is acc rows\n  // down, the next one a row further. Each drawn row interpolates between\n  // the two stored rows it falls between, so the scroll glides.\n  for (let y = 0; y \u003c= L; y++) {\n    const o = y * NMAX;\n    let ia, ib, t;\n    if (y \u003c P.acc) (ia = -1), (ib = P.head), (t = y / P.acc);\n    else {\n      const u = y - P.acc, kk = floor(u);\n      (ia = (P.head - kk + HB * 2) % HB), (ib = (ia - 1 + HB) % HB), (t = u - kk);\n    }\n    const ea = ia \u003c 0 ? P.ep : P.he[ia], eb = P.he[ib], na = ia \u003c 0 ? n : P.hn[ia], nb = P.hn[ib];\n    if (ea === eb && na === nb) {\n      for (let i = 0; i \u003c na; i++) {\n        const xa = ia \u003c 0 ? CX + P.sm[i] * sc : P.hx[ia * NMAX + i], ha = ia \u003c 0 ? P.hc[i] : P.hh[ia * NMAX + i];\n        X[o + i] = xa + (P.hx[ib * NMAX + i] - xa) * t;\n        XH[o + i] = ha + (P.hh[ib * NMAX + i] - ha) * t;\n      }\n      (Xn[y] = na), (Xe[y] = ea);\n    } else {\n      // A row from before Count was turned: no thread joins across it.\n      const s = t \u003c 0.5 && ia >= 0 ? ia : ib;\n      for (let i = 0; i \u003c P.hn[s]; i++) (X[o + i] = P.hx[s * NMAX + i]), (XH[o + i] = P.hh[s * NMAX + i]);\n      (Xn[y] = P.hn[s]), (Xe[y] = P.he[s]);\n    }\n  }\n  buf.fill(0);\n  for (let y = 0; y \u003c L; y++) {\n    const o = y * NMAX, m = Xn[y];\n    const okU = y > 0 && Xe[y - 1] === Xe[y] && Xn[y - 1] === m, okD = Xe[y + 1] === Xe[y] && Xn[y + 1] === m;\n    // The past dims a little toward the bottom; the newest rows burn\n    // brighter and whiter.\n    const fade = 1 - 0.42 * (y / L), hot = y \u003c 5 ? 0.35 * (1 - y / 5) : 0, f1 = fade * (1 + hot), wh = 90 * hot;\n    for (let i = 0; i \u003c m; i++) {\n      const x = X[o + i], xu = okU ? (X[o - NMAX + i] + x) / 2 : x, xd = okD ? (X[o + NMAX + i] + x) / 2 : x;\n      const q = round(cl(XH[o + i], 0, 1) * 255) * 3;\n      span(buf, y + TOP, min(x, xu, xd), max(x, xu, xd), lut[q] * f1 + wh, lut[q + 1] * f1 + wh, lut[q + 2] * f1 + wh);\n    }\n  }\n  // The eigenvalues themselves: a bead on the top of each thread, white at\n  // the heart and its own colour round the rim.\n  for (let i = 0; i \u003c n; i++) {\n    const x = X[i], q = round(cl(P.hc[i], 0, 1) * 255) * 3;\n    const r = lut[q] * 0.7 + 76, g = lut[q + 1] * 0.7 + 76, b = lut[q + 2] * 0.7 + 76;\n    for (let yy = 0; yy \u003c TOP + 4; yy++)\n      for (let xx = max(0, floor(x - 2.5)); xx \u003c= min(W - 1, floor(x + 2.5)); xx++) {\n        const dx = xx + 0.5 - x, dy = yy - TOP, r2 = dx * dx + dy * dy * 1.2, w = 1.35 / (1 + r2 * 0.9) - 0.14, p = (yy * W + xx) * 3;\n        if (w \u003c= 0) continue;\n        const wc = 140 * w * w;\n        (buf[p] += r * w + wc), (buf[p + 1] += g * w + wc), (buf[p + 2] += b * w + wc);\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder."},{"name":"Count","min":10,"max":28,"about":"The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28."},{"name":"Beta","min":1,"max":9,"about":"The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal."}],"start":[0,2,10,1],"measures":{"motion":1.3286,"detail":0.1297,"edges":0.5413,"complexity":1.7541,"coverage":0.3748,"colour":0.2639,"drift":0.1193},"knobResponse":[0.1261,0.1507,0.2251,0.1306]},{"slug":"elephant-toothpaste","title":"Elephant Toothpaste","family":"chemistry","round":23,"note":"보라색 장갑을 낀 손이 실험대 위 눈금실린더에 아이오딘화 칼륨을 부으면, 유리 안쪽에 그어 둔 식용 색소 줄무늬를 두른 거품 기둥이 입구에서 솟아 패널 꼭대기까지 올라요. 기둥은 한쪽으로 꺾여 실린더 옆을 타고 흘러내려 김 나는 더미로 쌓이고, 더미가 굳어 바래면 손이 닦아 내고 새 실린더를 내려놓아요.","idea":"A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.","buttons":"K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.","code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","layer":{"id":"layer-elephant-toothpaste","type":"code","name":"elephant-toothpaste","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower."},{"name":"Stripes","min":1,"max":4,"about":"How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4."},{"name":"Strength","min":0,"max":1,"about":"How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap."}],"start":[0,2,1,0.06],"measures":{"motion":0.1815,"detail":0.029,"edges":0.1765,"complexity":0.9251,"coverage":0.367,"colour":0.1801,"drift":0.102},"knobResponse":[0.0441,0.1137,0.0453,0.0773]},{"slug":"elliptic-chords","title":"Elliptic Chords","family":"number","round":36,"note":"위에는 실수 곡선 y² = x³ − 6x 가, 아래에는 같은 곡선을 61 로 나눈 나머지로 푼 61×61 판이 있어요. G 와 kG 를 지나는 직선이 곡선과 세 번째로 만나는 점을 x축에 뒤집으면 (k+1)G 이고, 아래에서는 그 직선이 판을 감아 도는 점 61개가 되어 곡선의 점 셋에서만 하얗게 빛나며 배수들이 방문 순서대로 무지개색으로 켜져요. K3 은 상수 b 를 바꿔 알 모양 고리를 키우다 긴 가지에 붙이고, K1 을 누르면 새 생성원 G 로 O 에서 다시 세요.","idea":"The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.","buttons":"K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Elliptic Chords\n// Family:  number\n// Idea:    The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: elliptic curve group law, chord and tangent (Henri Poincaré, 1901), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1\n//\n// Knob 1: Hue. Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky.\n// Knob 2: Speed. Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44.\n// Knob 3: Curve. The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points.\n// Knob 4: Trail. Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below.\n// Buttons: K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.\n\nconst W = 64, H = 128, P = 61, A = -6, CMIN = -4, CMAX = 8;\n// The real window: x from -3.15 to 4.45 over the 64 columns, y from -7.75 to\n// 7.75 over rows 0..62, with y = 0 on row 31. Lines stay lines under this\n// stretch, and the mirror in the x-axis stays a vertical move.\nconst TOPH = 63, X0 = -3.15, X1 = 4.45, SX = W / (X1 - X0), YM = 7.75, SY = TOPH / (2 * YM), YC = 31;\n// The F_61 board: element (x, y) is column BX + x, row BY - y; O sits on row OROW above it.\nconst BX = 1, BY = 126, OROW = 64;\n// Phases of one group step: the line, the mirror, the landing.\nconst T_LINE = 0.5, T_MIR0 = 0.55, T_MIR1 = 0.78;\nconst NT = 1024;\n// Group steps a second for each unit of Speed.\nconst RATE = 0.75;\nconst { floor, min, max, abs, sqrt, sin, cos, tan, acos, cbrt, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (v) => ((v % P) + P) % P;\nconst NB = [[1, 0], [-1, 0], [0, 1], [0, -1]];\nconst NB2 = [[2, 0], [-2, 0], [0, 2], [0, -2], [1, 1], [1, -1], [-1, 1], [-1, -1]];\n\n// Inverses mod 61, by Fermat.\nconst INV = new Int32Array(P);\nfor (let i = 1; i \u003c P; i++) {\n  let r = 1, e = P - 2, q = i;\n  while (e) {\n    if (e & 1) r = (r * q) % P;\n    q = (q * q) % P;\n    e >>= 1;\n  }\n  INV[i] = r;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// ---- F_61 -------------------------------------------------------------------\n// A point is [x, y] with entries 0..60, or null for O.\nfunction fpAdd(p, q, b) {\n  if (!p) return q;\n  if (!q) return p;\n  if (p[0] === q[0] && md(p[1] + q[1]) === 0) return null;\n  const m = p[0] === q[0] ? md((3 * p[0] * p[0] + A) * INV[md(2 * p[1])]) : md((q[1] - p[1]) * INV[md(q[0] - p[0])]);\n  const x = md(m * m - p[0] - q[0]);\n  return [x, md(m * (p[0] - x) - p[1])];\n}\n\nfunction fpOrder(g, b) {\n  let q = g, n = 1;\n  while (q && n \u003c 200) {\n    q = fpAdd(q, g, b);\n    n++;\n  }\n  return n;\n}\n\n// ---- the real curve -----------------------------------------------------------\n// The roots of x^3 - 6x + b, largest first: three when 27 b^2 \u003c 864, so\n// when |b| \u003c 5.66, and then the curve has an egg over [e3, e2].\nfunction roots(b) {\n  if (4 * A * A * A + 27 * b * b \u003c 0) {\n    const r = 2 * sqrt(-A / 3), th = acos(((3 * b) / (2 * A)) * sqrt(-3 / A)) / 3;\n    return [0, 1, 2].map((k) => r * cos(th - (2 * PI * k) / 3)).sort((p, q) => q - p);\n  }\n  const s = sqrt((b * b) / 4 + (A * A * A) / 27);\n  let x = cbrt(-b / 2 + s) + cbrt(-b / 2 - s);\n  for (let i = 0; i \u003c 6; i++) x -= (x * x * x + A * x + b) / (3 * x * x + A);\n  return [x];\n}\n\n// The real points of the curve as a group are a circle, R/wZ, times {0, 1}\n// when the egg is there. The circle is measured by the invariant\n// differential dx/y: on the long branch u(x) = int_x^inf dt/sqrt(f), with\n// t = e1 + tan^2(phi), and on the egg v(x) = int_e3^x dt/sqrt(f), with\n// t = e3 + (e2 - e3) sin^2(theta), both free of the square-root ends. Both\n// halves of the circle come to the same w/2. Checked against the chord rule\n// in a scratch script: main(u1) + main(u2) = main(u1 + u2), main(u) + egg(v)\n// = egg(u + v) and egg(v1) + egg(v2) = main(v1 + v2), to 2e-6 in the window.\nfunction realCurve(b) {\n  const R = roots(b), e1 = R[0], c = e1 * e1 + A;\n  const U = new Float64Array(NT + 1), h = PI / 2 / NT;\n  const gm = (ph) => {\n    if (ph >= PI / 2 - 1e-12) return 2;\n    const s = tan(ph), t = e1 + s * s, co = cos(ph);\n    return 2 / sqrt(t * t + e1 * t + c) / (co * co);\n  };\n  for (let i = NT - 1; i >= 0; i--) U[i] = U[i + 1] + (h / 6) * (gm(i * h) + 4 * gm((i + 0.5) * h) + gm((i + 1) * h));\n  const C = { b, R, U, w: 2 * U[0], egg: null };\n  if (R.length === 3) {\n    const e2 = R[1], e3 = R[2], V = new Float64Array(NT + 1);\n    const ge = (th) => 2 / sqrt(e1 - e3 - (e2 - e3) * sin(th) ** 2);\n    for (let i = 0; i \u003c NT; i++) V[i + 1] = V[i] + (h / 6) * (ge(i * h) + 4 * ge((i + 0.5) * h) + ge((i + 1) * h));\n    C.egg = { V, e2, e3 };\n  }\n  return C;\n}\n\nconst f = (x, b) => x * x * x + A * x + b;\n\n// Fractional index where the monotone table T meets the value t.\nfunction seek(T, t, rising) {\n  let lo = 0, hi = NT;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (T[m] \u003c t === rising) lo = m;\n    else hi = m;\n  }\n  return lo + (t - T[lo]) / (T[hi] - T[lo] || 1);\n}\n\n// The real point at parameter u on the branch (s = 0) or the egg (s = 1);\n// null for O.\nfunction realPoint(C, u, s) {\n  const w = C.w;\n  u -= floor(u / w) * w;\n  if (s === 0 && (u \u003c 1e-9 || w - u \u003c 1e-9)) return null;\n  const up = u \u003c= w / 2, q = up ? u : w - u;\n  let x;\n  if (s === 0) {\n    const ph = (seek(C.U, q, false) * PI) / 2 / NT;\n    x = C.R[0] + tan(ph) ** 2;\n  } else {\n    const { V, e2, e3 } = C.egg, th = (seek(V, q, true) * PI) / 2 / NT;\n    x = e3 + (e2 - e3) * sin(th) ** 2;\n  }\n  const y = sqrt(max(0, f(x, C.b)));\n  // The egg runs the other way round, so that main(u) + egg(v) = egg(u + v).\n  return [x, (up ? 1 : -1) * (s === 0 ? 1 : -1) * y];\n}\n\n// ---- one curve: both halves ---------------------------------------------------\nfunction buildCurve(b) {\n  const pts = [];\n  for (let x = 0; x \u003c P; x++) for (let y = 0; y \u003c P; y++) if (md(y * y - f(x, b)) === 0) pts.push([x, y]);\n  let N = 0, gens = [];\n  for (const p of pts) {\n    const o = fpOrder(p, b);\n    if (o > N) (N = o), (gens = []);\n    if (o === N) gens.push(p);\n  }\n  const C = realCurve(b);\n  const onBoard = new Uint8Array(P * P);\n  for (const [x, y] of pts) onBoard[x * P + y] = 1;\n  // The static picture of the real curve: a 1.4-LED line where y^2 = f(x),\n  // found by the distance |y^2 - f| / |gradient| in LEDs, and a soft fill on\n  // the side where f(x) > y^2, the inside of the egg and of the branch.\n  const line = new Float32Array(W * TOPH), fill = new Float32Array(W * TOPH);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      let acc = 0, inside = 0;\n      for (let sy = 0; sy \u003c 3; sy++)\n        for (let sx = 0; sx \u003c 3; sx++) {\n          const x = X0 + (col + (sx + 0.5) / 3) / SX, y = (YC + 0.5 - (r + (sy + 0.5) / 3)) / SY;\n          const F = y * y - f(x, b), gx = (3 * x * x + A) / SX, gy = (2 * y) / SY;\n          const d = abs(F) / (sqrt(gx * gx + gy * gy) + 1e-9);\n          acc += cl(1.15 - d, 0, 1);\n          if (F \u003c 0) inside++;\n        }\n      line[r * W + col] = acc / 9;\n      fill[r * W + col] = inside / 9;\n    }\n  return { b, pts, N, gens, C, onBoard, line, fill };\n}\n\n// ---- the cycle ----------------------------------------------------------------\n// Q_k = kG. Step k goes from Q_k to Q_k+1 = Q_k + G: the line through G and\n// Q_k (the tangent at G when k = 1, the vertical through G when Q_k is O or\n// -G), its third point R, and R mirrored. The real generator is a point of\n// the same order N: on the egg at parameter jw/N when there is an egg and N\n// is even, so the odd multiples land on the egg and the even ones on the\n// branch, otherwise on the branch.\nfunction startCycle(S, fresh) {\n  const K = S.curve, N = K.N, C = K.C;\n  S.g = K.gens[floor(random() * K.gens.length)];\n  S.side = C.egg && N % 2 === 0 ? 1 : 0;\n  const js = [];\n  for (let j = 1; j \u003c N; j++) {\n    let a = j, bb = N;\n    while (bb) [a, bb] = [bb, a % bb];\n    if (a !== 1) continue;\n    const g = realPoint(C, (j * C.w) / N, S.side);\n    if (g && g[0] > X0 + 0.3 && g[0] \u003c X1 - 0.3 && abs(g[1]) \u003c YM - 0.4) js.push(j);\n  }\n  S.j = js.length ? js[floor(random() * js.length)] : 1;\n  S.gr = realPoint(C, (S.j * C.w) / N, S.side);\n  for (const t of S.trail) t.ghost = t.ghost || 1e-6;\n  if (fresh) {\n    // The opening shows the cycle already under way: 80% of it lit.\n    const k0 = round(0.8 * N);\n    let q = null;\n    for (let k = 1; k \u003c= k0; k++) {\n      q = fpAdd(q, S.g, K.b);\n      S.trail.push({ k, gs: S.gs - (k0 - k), fp: q, re: realK(S, k), ghost: 0 });\n    }\n    S.k = k0;\n    S.q = q;\n  } else {\n    S.k = 0;\n    S.q = null;\n  }\n  planStep(S);\n}\n\nconst realK = (S, k) => realPoint(S.curve.C, (k * S.j * S.curve.C.w) / S.curve.N, (k * S.side) & 1);\n\n// The F_61 line y = mx + c is the lattice of points (t, mt) mod 61 shifted\n// to one of them. Its shortest vector, found by Lagrange's reduction of the\n// basis (1, m), (0, 61), is never more than 8.4 long, and stepping by it still\n// visits all 61 points, so the walk runs along short streaks that wrap round\n// the square instead of jumping m rows at a time.\nfunction shortStep(m) {\n  let ax = 1, ay = m > P / 2 ? m - P : m, bx = 0, by = P;\n  const n2 = (x, y) => x * x + y * y;\n  for (let i = 0; i \u003c 20; i++) {\n    if (n2(bx, by) \u003c n2(ax, ay)) [ax, ay, bx, by] = [bx, by, ax, ay];\n    const mu = round((ax * bx + ay * by) / n2(ax, ay));\n    if (mu === 0) break;\n    bx -= mu * ax;\n    by -= mu * ay;\n  }\n  return [md(ax), md(ay)];\n}\n\nfunction planStep(S) {\n  const K = S.curve, N = K.N, k = S.k, g = S.g, q = S.q;\n  const st = { k, vert: false, m: 0, start: q || g, third: null, next: null, rm: 0, rx: 0, ry: 0, rv: false, r3: null, rn: null, tR: -1 };\n  // F_61: the line's slope, its 61 dots from Q_k (from G when Q_k is O), and\n  // how many steps along it the third point falls.\n  if (!q || (q[0] === g[0] && md(q[1] + g[1]) === 0)) st.vert = true;\n  else st.m = q[0] === g[0] ? md((3 * g[0] * g[0] + A) * INV[md(2 * g[1])]) : md((q[1] - g[1]) * INV[md(q[0] - g[0])]);\n  st.next = fpAdd(q, g, K.b);\n  st.third = st.next ? [st.next[0], md(-st.next[1])] : null;\n  [st.dx, st.dy] = st.vert ? [0, 1] : shortStep(st.m);\n  const s0 = st.start, stepT = (pt) => (st.vert ? md(pt[1] - s0[1]) : md((pt[0] - s0[0]) * INV[st.dx]));\n  st.tR = st.third ? stepT(st.third) : P - 1;\n  // The real line, through G_r with slope rm or vertical.\n  const G = S.gr, Q = k === 0 ? null : realK(S, k);\n  if (k === 0 || k === N - 1) st.rv = true;\n  else if (k === 1) st.rm = (3 * G[0] * G[0] + A) / (2 * G[1]);\n  else if (Q) st.rm = (Q[1] - G[1]) / (Q[0] - G[0]);\n  else st.rm = 0;\n  st.rx = G[0];\n  st.ry = G[1];\n  if (k === N - 1) st.r3 = null;\n  else if (k === 0) st.r3 = [G[0], -G[1]];\n  else {\n    const x3 = st.rm * st.rm - G[0] - (Q ? Q[0] : G[0]);\n    st.r3 = [x3, G[1] + st.rm * (x3 - G[0])];\n  }\n  st.rn = st.r3 ? [st.r3[0], -st.r3[1]] : null;\n  S.step = st;\n}\n\nfunction finishStep(S) {\n  const st = S.step, N = S.curve.N;\n  S.past.push({ st, gs: S.gs + 1 });\n  S.gs++;\n  S.k = (S.k + 1) % N;\n  S.q = st.next;\n  if (st.next) S.trail.push({ k: S.k, gs: S.gs, fp: st.next, re: st.rn, ghost: 0 });\n  planStep(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trailK: 0.06, b: null, curve: null, curves: {}, g: null, gr: null, j: 1, side: 0,\n    k: 0, q: null, gs: 0, tau: 0, step: null, trail: [], past: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0];\n  S.speed = cl(kv[1], 0.2, 3);\n  S.trailK = cl(kv[3], 0, 1);\n  const b = round(cl(kv[2], CMIN, CMAX));\n  if (b !== S.b) {\n    S.b = b;\n    S.curve = S.curves[b] || (S.curves[b] = buildCurve(b));\n    S.trail.length = 0;\n    S.past.length = 0;\n    S.tau = 0;\n    startCycle(S, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.tau = 0;\n    startCycle(S, false);\n  }\n  S.tau += d * S.speed * RATE;\n  while (S.tau >= 1) {\n    S.tau -= 1;\n    finishStep(S);\n  }\n  // Ghosts of an old cycle fade out over 1.5 seconds.\n  for (const t of S.trail) if (t.ghost) t.ghost += d / 1.5;\n  const L = trailLen(S);\n  S.trail = S.trail.filter((t) => (t.ghost ? t.ghost \u003c 1 : S.gs + S.tau - t.gs \u003c L + 1));\n  S.past = S.past.filter((q) => S.gs + S.tau - q.gs \u003c linger(S));\n}\n\n// Past lines linger, fading: 1.6 steps at Trail 0, 8 steps at 1. They all\n// pass through G.\nconst linger = (S) => 1.6 + 6.4 * S.trailK ** 1.2;\n\nconst trailLen = (S) => 2 + (S.curve.N - 2) * (1 - S.trailK) ** 1.5;\n\n// ---- drawing ------------------------------------------------------------------\nfunction add(S, x, y, col, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0) return;\n  const p = y * W + x;\n  S.R[p] += col[0] * v;\n  S.G[p] += col[1] * v;\n  S.B[p] += col[2] * v;\n}\n\n// Real coordinates to LED coordinates (LED centres at whole numbers).\nconst px = (x) => (x - X0) * SX - 0.5;\nconst py = (y) => YC - y * SY;\n\nfunction disc(S, x, y, rad, col, v) {\n  const cx = px(x), cy = py(y);\n  for (let r = floor(cy - rad - 1); r \u003c= cy + rad + 1; r++)\n    for (let c = floor(cx - rad - 1); c \u003c= cx + rad + 1; c++) {\n      if (r \u003c 0 || r >= TOPH) continue;\n      const dd = sqrt((c - cx) ** 2 + (r - cy) ** 2);\n      add(S, c, r, col, v * cl(rad + 0.5 - dd, 0, 1));\n    }\n}\n\n// The real line through (x0, y0) with slope m, or the vertical through x0,\n// clipped to the window: one LED wide with a soft LED of glow either side.\nfunction realLine(S, x0, y0, m, vert, col, v) {\n  const k = vert ? 0 : (-m * SY) / SX, ax = px(x0), ay = py(y0);\n  if (!vert && abs(k) \u003c= 1) {\n    // Shallow: walk the columns, spread across rows.\n    for (let c = 0; c \u003c W; c++) {\n      const r = ay + k * (c - ax), r0 = floor(r);\n      for (let q = r0 - 1; q \u003c= r0 + 2; q++) if (q >= 0 && q \u003c TOPH) add(S, c, q, col, v * glow(abs(q - r)));\n    }\n  } else {\n    for (let r = 0; r \u003c TOPH; r++) {\n      const c = vert ? ax : ax + (r - ay) / k, c0 = floor(c);\n      for (let q = c0 - 1; q \u003c= c0 + 2; q++) add(S, q, r, col, v * glow(abs(q - c)));\n    }\n  }\n}\nconst glow = (d) => (d \u003c 1 ? 1 - 0.7 * d : d \u003c 2 ? 0.3 * (2 - d) : 0);\n\nconst inWin = (p) => p && p[0] > X0 - 0.2 && p[0] \u003c X1 + 0.2 && abs(p[1]) \u003c YM + 0.3;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.curve) return;\n  const { R, G, B, c } = S, K = S.curve, N = K.N, st = S.step, tau = S.tau;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h0 = S.hue + 0.6;\n  // The plane inside the real curve and the board are dim tints.\n  const plane = [0, 0, 0], ink = [0, 0, 0], board = [0, 0, 0], chord = [0, 0, 0], white = [1, 1, 1], base = [0, 0, 0];\n  // Round orange and yellow the dim tints lose most of their colour, or\n  // they would read brown and olive.\n  const hw = h0 + 0.03 - floor(h0 + 0.03), warm = cl(1 - abs(hw - 0.12) / 0.1, 0, 1);\n  hsv(h0, 0.75 - 0.5 * warm, 0.16, plane);\n  hsv(h0 - 0.02, 0.32, 0.92, ink);\n  hsv(h0 + 0.03, 0.6 - 0.4 * warm, 0.115, board);\n  hsv(h0 + 0.5, 0.42, 1, chord);\n  hsv(h0, 0.2, 0.34, base);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      const p = r * W + col, ln = K.line[p], fl = K.fill[p];\n      R[p] = (plane[0] * fl + ink[0] * ln) * 255;\n      G[p] = (plane[1] * fl + ink[1] * ln) * 255;\n      B[p] = (plane[2] * fl + ink[2] * ln) * 255;\n    }\n  for (let y = 0; y \u003c P; y++)\n    for (let x = 0; x \u003c P; x++) {\n      const p = (BY - y) * W + BX + x;\n      R[p] = board[0] * 255;\n      G[p] = board[1] * 255;\n      B[p] = board[2] * 255;\n    }\n  for (const [x, y] of K.pts) add(S, BX + x, BY - y, base, 255);\n\n  // The lines of the last few steps, fading: a pencil of lines through G.\n  for (const q of S.past) {\n    const w = 1 - (S.gs + tau - q.gs) / linger(S);\n    if (w \u003c= 0) continue;\n    const ps = q.st, s0 = ps.start;\n    realLine(S, ps.rx, ps.ry, ps.rm, ps.rv, chord, 130 * w);\n    for (let t = 0; t \u003c P; t++) {\n      const x = md(s0[0] + ps.dx * t), y = md(s0[1] + ps.dy * t);\n      add(S, BX + x, BY - y, chord, 55 * w);\n    }\n  }\n\n  // The trail: each multiple in its order's hue, the whole cycle once round\n  // the wheel, held for most of the trail and then let go.\n  const L = trailLen(S), now = S.gs + tau;\n  for (const t of S.trail) {\n    const age = now - t.gs;\n    let v = age \u003c 0.6 * L ? 1 : cl((L - age) / (0.4 * L), 0, 1);\n    if (t.ghost) v *= cl(1 - t.ghost, 0, 1);\n    if (v \u003c= 0.01) continue;\n    hsv(h0 + 0.42 + t.k / N, 0.88, 1, c);\n    add(S, BX + t.fp[0], BY - t.fp[1], c, 255 * v);\n    if (inWin(t.re)) disc(S, t.re[0], t.re[1], 1.5, c, 235 * v);\n    for (const [dx, dy] of NB) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 95 * v);\n    // A fresh landing blooms for a step and a half.\n    const bl = 1 - age / 1.5;\n    if (bl > 0 && !t.ghost) {\n      for (const [dx, dy] of NB2) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 110 * bl);\n      if (inWin(t.re)) disc(S, t.re[0], t.re[1], 2.6, c, 90 * bl);\n    }\n  }\n\n  // The step under way.\n  const lineV = tau \u003c 0.08 ? tau / 0.08 : tau > 0.88 ? (1 - tau) / 0.12 : 1;\n  // Real: the line, the third point, the mirror, the new point.\n  realLine(S, st.rx, st.ry, st.rm, st.rv, chord, 190 * lineV);\n  const mir = cl((tau - T_MIR0) / (T_MIR1 - T_MIR0), 0, 1);\n  if (tau > T_LINE * 0.9) {\n    if (st.r3 && inWin(st.r3)) disc(S, st.r3[0], st.r3[1], 1.3, white, 200 * lineV);\n    if (!st.r3) for (let r = 0; r \u003c 2; r++) add(S, round(px(st.rx)), r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.r3) {\n    const ya = py(st.r3[1]), yb = py(st.rn[1]), cc = round(px(st.r3[0]));\n    const yt = ya + (yb - ya) * mir;\n    for (let r = max(0, round(min(ya, yt))); r \u003c= min(TOPH - 1, round(max(ya, yt))); r++) if (r % 2 === 0) add(S, cc, r, white, 150 * lineV);\n  }\n  if (tau > T_MIR1 && st.rn && inWin(st.rn)) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.6, 1, c);\n    disc(S, st.rn[0], st.rn[1], 1.5, c, 255);\n  }\n  // F_61: the line's dots from Q_k, the head brightest, then the mirror.\n  const head = (min(tau, T_LINE) / T_LINE) * (P - 1), s0 = st.start;\n  for (let t = 0; t \u003c= head; t++) {\n    const x = md(s0[0] + st.dx * t), y = md(s0[1] + st.dy * t);\n    const on = K.onBoard[x * P + y];\n    const v = head - t \u003c 1 ? 1 : 0.85 + (on ? 0.15 : 0);\n    add(S, BX + x, BY - y, on ? white : chord, 230 * v * lineV);\n  }\n  if (head >= st.tR) {\n    if (st.third) {\n      const x = BX + st.third[0], y = BY - st.third[1];\n      for (const [dx, dy] of NB) add(S, x + dx, y + dy, white, 150 * lineV);\n    } else for (let r = OROW - 1; r \u003c= OROW; r++) add(S, BX + st.start[0], r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.third) {\n    const x = BX + st.third[0], ya = BY - st.third[1], yb = BY - st.next[1], yt = ya + (yb - ya) * mir;\n    for (let r = round(min(ya, yt)); r \u003c= round(max(ya, yt)); r++) if (r % 2 === 0) add(S, x, r, white, 120 * lineV);\n  }\n  if (tau > T_MIR1 && st.next) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.5, 1, c);\n    const x = BX + st.next[0], y = BY - st.next[1];\n    add(S, x, y, c, 255);\n    for (const [dx, dy] of NB) add(S, x + dx, y + dy, c, 140);\n  }\n  // G on both halves: white, with a dark ring round it on the real curve.\n  const gx = BX + S.g[0], gy = BY - S.g[1];\n  add(S, gx, gy, white, 255);\n  for (const [dx, dy] of NB) add(S, gx + dx, gy + dy, white, 120);\n  if (inWin(S.gr)) {\n    const cx = px(S.gr[0]), cy = py(S.gr[1]);\n    for (let r = floor(cy - 3); r \u003c= cy + 3; r++)\n      for (let q = floor(cx - 3); q \u003c= cx + 3; q++) {\n        if (r \u003c 0 || r >= TOPH || q \u003c 0 || q >= W) continue;\n        const dd = sqrt((q - cx) ** 2 + (r - cy) ** 2), p = r * W + q;\n        if (dd \u003c 2.6) {\n          const k = dd \u003c 1.4 ? 1 : 0.15;\n          R[p] = 255 * k;\n          G[p] = 255 * k;\n          B[p] = 255 * k;\n        }\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-elliptic-chords","type":"code","name":"elliptic-chords","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Elliptic Chords\n// Family:  number\n// Idea:    The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: elliptic curve group law, chord and tangent (Henri Poincaré, 1901), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1\n//\n// Knob 1: Hue. Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky.\n// Knob 2: Speed. Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44.\n// Knob 3: Curve. The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points.\n// Knob 4: Trail. Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below.\n// Buttons: K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.\n\nconst W = 64, H = 128, P = 61, A = -6, CMIN = -4, CMAX = 8;\n// The real window: x from -3.15 to 4.45 over the 64 columns, y from -7.75 to\n// 7.75 over rows 0..62, with y = 0 on row 31. Lines stay lines under this\n// stretch, and the mirror in the x-axis stays a vertical move.\nconst TOPH = 63, X0 = -3.15, X1 = 4.45, SX = W / (X1 - X0), YM = 7.75, SY = TOPH / (2 * YM), YC = 31;\n// The F_61 board: element (x, y) is column BX + x, row BY - y; O sits on row OROW above it.\nconst BX = 1, BY = 126, OROW = 64;\n// Phases of one group step: the line, the mirror, the landing.\nconst T_LINE = 0.5, T_MIR0 = 0.55, T_MIR1 = 0.78;\nconst NT = 1024;\n// Group steps a second for each unit of Speed.\nconst RATE = 0.75;\nconst { floor, min, max, abs, sqrt, sin, cos, tan, acos, cbrt, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (v) => ((v % P) + P) % P;\nconst NB = [[1, 0], [-1, 0], [0, 1], [0, -1]];\nconst NB2 = [[2, 0], [-2, 0], [0, 2], [0, -2], [1, 1], [1, -1], [-1, 1], [-1, -1]];\n\n// Inverses mod 61, by Fermat.\nconst INV = new Int32Array(P);\nfor (let i = 1; i \u003c P; i++) {\n  let r = 1, e = P - 2, q = i;\n  while (e) {\n    if (e & 1) r = (r * q) % P;\n    q = (q * q) % P;\n    e >>= 1;\n  }\n  INV[i] = r;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// ---- F_61 -------------------------------------------------------------------\n// A point is [x, y] with entries 0..60, or null for O.\nfunction fpAdd(p, q, b) {\n  if (!p) return q;\n  if (!q) return p;\n  if (p[0] === q[0] && md(p[1] + q[1]) === 0) return null;\n  const m = p[0] === q[0] ? md((3 * p[0] * p[0] + A) * INV[md(2 * p[1])]) : md((q[1] - p[1]) * INV[md(q[0] - p[0])]);\n  const x = md(m * m - p[0] - q[0]);\n  return [x, md(m * (p[0] - x) - p[1])];\n}\n\nfunction fpOrder(g, b) {\n  let q = g, n = 1;\n  while (q && n \u003c 200) {\n    q = fpAdd(q, g, b);\n    n++;\n  }\n  return n;\n}\n\n// ---- the real curve -----------------------------------------------------------\n// The roots of x^3 - 6x + b, largest first: three when 27 b^2 \u003c 864, so\n// when |b| \u003c 5.66, and then the curve has an egg over [e3, e2].\nfunction roots(b) {\n  if (4 * A * A * A + 27 * b * b \u003c 0) {\n    const r = 2 * sqrt(-A / 3), th = acos(((3 * b) / (2 * A)) * sqrt(-3 / A)) / 3;\n    return [0, 1, 2].map((k) => r * cos(th - (2 * PI * k) / 3)).sort((p, q) => q - p);\n  }\n  const s = sqrt((b * b) / 4 + (A * A * A) / 27);\n  let x = cbrt(-b / 2 + s) + cbrt(-b / 2 - s);\n  for (let i = 0; i \u003c 6; i++) x -= (x * x * x + A * x + b) / (3 * x * x + A);\n  return [x];\n}\n\n// The real points of the curve as a group are a circle, R/wZ, times {0, 1}\n// when the egg is there. The circle is measured by the invariant\n// differential dx/y: on the long branch u(x) = int_x^inf dt/sqrt(f), with\n// t = e1 + tan^2(phi), and on the egg v(x) = int_e3^x dt/sqrt(f), with\n// t = e3 + (e2 - e3) sin^2(theta), both free of the square-root ends. Both\n// halves of the circle come to the same w/2. Checked against the chord rule\n// in a scratch script: main(u1) + main(u2) = main(u1 + u2), main(u) + egg(v)\n// = egg(u + v) and egg(v1) + egg(v2) = main(v1 + v2), to 2e-6 in the window.\nfunction realCurve(b) {\n  const R = roots(b), e1 = R[0], c = e1 * e1 + A;\n  const U = new Float64Array(NT + 1), h = PI / 2 / NT;\n  const gm = (ph) => {\n    if (ph >= PI / 2 - 1e-12) return 2;\n    const s = tan(ph), t = e1 + s * s, co = cos(ph);\n    return 2 / sqrt(t * t + e1 * t + c) / (co * co);\n  };\n  for (let i = NT - 1; i >= 0; i--) U[i] = U[i + 1] + (h / 6) * (gm(i * h) + 4 * gm((i + 0.5) * h) + gm((i + 1) * h));\n  const C = { b, R, U, w: 2 * U[0], egg: null };\n  if (R.length === 3) {\n    const e2 = R[1], e3 = R[2], V = new Float64Array(NT + 1);\n    const ge = (th) => 2 / sqrt(e1 - e3 - (e2 - e3) * sin(th) ** 2);\n    for (let i = 0; i \u003c NT; i++) V[i + 1] = V[i] + (h / 6) * (ge(i * h) + 4 * ge((i + 0.5) * h) + ge((i + 1) * h));\n    C.egg = { V, e2, e3 };\n  }\n  return C;\n}\n\nconst f = (x, b) => x * x * x + A * x + b;\n\n// Fractional index where the monotone table T meets the value t.\nfunction seek(T, t, rising) {\n  let lo = 0, hi = NT;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (T[m] \u003c t === rising) lo = m;\n    else hi = m;\n  }\n  return lo + (t - T[lo]) / (T[hi] - T[lo] || 1);\n}\n\n// The real point at parameter u on the branch (s = 0) or the egg (s = 1);\n// null for O.\nfunction realPoint(C, u, s) {\n  const w = C.w;\n  u -= floor(u / w) * w;\n  if (s === 0 && (u \u003c 1e-9 || w - u \u003c 1e-9)) return null;\n  const up = u \u003c= w / 2, q = up ? u : w - u;\n  let x;\n  if (s === 0) {\n    const ph = (seek(C.U, q, false) * PI) / 2 / NT;\n    x = C.R[0] + tan(ph) ** 2;\n  } else {\n    const { V, e2, e3 } = C.egg, th = (seek(V, q, true) * PI) / 2 / NT;\n    x = e3 + (e2 - e3) * sin(th) ** 2;\n  }\n  const y = sqrt(max(0, f(x, C.b)));\n  // The egg runs the other way round, so that main(u) + egg(v) = egg(u + v).\n  return [x, (up ? 1 : -1) * (s === 0 ? 1 : -1) * y];\n}\n\n// ---- one curve: both halves ---------------------------------------------------\nfunction buildCurve(b) {\n  const pts = [];\n  for (let x = 0; x \u003c P; x++) for (let y = 0; y \u003c P; y++) if (md(y * y - f(x, b)) === 0) pts.push([x, y]);\n  let N = 0, gens = [];\n  for (const p of pts) {\n    const o = fpOrder(p, b);\n    if (o > N) (N = o), (gens = []);\n    if (o === N) gens.push(p);\n  }\n  const C = realCurve(b);\n  const onBoard = new Uint8Array(P * P);\n  for (const [x, y] of pts) onBoard[x * P + y] = 1;\n  // The static picture of the real curve: a 1.4-LED line where y^2 = f(x),\n  // found by the distance |y^2 - f| / |gradient| in LEDs, and a soft fill on\n  // the side where f(x) > y^2, the inside of the egg and of the branch.\n  const line = new Float32Array(W * TOPH), fill = new Float32Array(W * TOPH);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      let acc = 0, inside = 0;\n      for (let sy = 0; sy \u003c 3; sy++)\n        for (let sx = 0; sx \u003c 3; sx++) {\n          const x = X0 + (col + (sx + 0.5) / 3) / SX, y = (YC + 0.5 - (r + (sy + 0.5) / 3)) / SY;\n          const F = y * y - f(x, b), gx = (3 * x * x + A) / SX, gy = (2 * y) / SY;\n          const d = abs(F) / (sqrt(gx * gx + gy * gy) + 1e-9);\n          acc += cl(1.15 - d, 0, 1);\n          if (F \u003c 0) inside++;\n        }\n      line[r * W + col] = acc / 9;\n      fill[r * W + col] = inside / 9;\n    }\n  return { b, pts, N, gens, C, onBoard, line, fill };\n}\n\n// ---- the cycle ----------------------------------------------------------------\n// Q_k = kG. Step k goes from Q_k to Q_k+1 = Q_k + G: the line through G and\n// Q_k (the tangent at G when k = 1, the vertical through G when Q_k is O or\n// -G), its third point R, and R mirrored. The real generator is a point of\n// the same order N: on the egg at parameter jw/N when there is an egg and N\n// is even, so the odd multiples land on the egg and the even ones on the\n// branch, otherwise on the branch.\nfunction startCycle(S, fresh) {\n  const K = S.curve, N = K.N, C = K.C;\n  S.g = K.gens[floor(random() * K.gens.length)];\n  S.side = C.egg && N % 2 === 0 ? 1 : 0;\n  const js = [];\n  for (let j = 1; j \u003c N; j++) {\n    let a = j, bb = N;\n    while (bb) [a, bb] = [bb, a % bb];\n    if (a !== 1) continue;\n    const g = realPoint(C, (j * C.w) / N, S.side);\n    if (g && g[0] > X0 + 0.3 && g[0] \u003c X1 - 0.3 && abs(g[1]) \u003c YM - 0.4) js.push(j);\n  }\n  S.j = js.length ? js[floor(random() * js.length)] : 1;\n  S.gr = realPoint(C, (S.j * C.w) / N, S.side);\n  for (const t of S.trail) t.ghost = t.ghost || 1e-6;\n  if (fresh) {\n    // The opening shows the cycle already under way: 80% of it lit.\n    const k0 = round(0.8 * N);\n    let q = null;\n    for (let k = 1; k \u003c= k0; k++) {\n      q = fpAdd(q, S.g, K.b);\n      S.trail.push({ k, gs: S.gs - (k0 - k), fp: q, re: realK(S, k), ghost: 0 });\n    }\n    S.k = k0;\n    S.q = q;\n  } else {\n    S.k = 0;\n    S.q = null;\n  }\n  planStep(S);\n}\n\nconst realK = (S, k) => realPoint(S.curve.C, (k * S.j * S.curve.C.w) / S.curve.N, (k * S.side) & 1);\n\n// The F_61 line y = mx + c is the lattice of points (t, mt) mod 61 shifted\n// to one of them. Its shortest vector, found by Lagrange's reduction of the\n// basis (1, m), (0, 61), is never more than 8.4 long, and stepping by it still\n// visits all 61 points, so the walk runs along short streaks that wrap round\n// the square instead of jumping m rows at a time.\nfunction shortStep(m) {\n  let ax = 1, ay = m > P / 2 ? m - P : m, bx = 0, by = P;\n  const n2 = (x, y) => x * x + y * y;\n  for (let i = 0; i \u003c 20; i++) {\n    if (n2(bx, by) \u003c n2(ax, ay)) [ax, ay, bx, by] = [bx, by, ax, ay];\n    const mu = round((ax * bx + ay * by) / n2(ax, ay));\n    if (mu === 0) break;\n    bx -= mu * ax;\n    by -= mu * ay;\n  }\n  return [md(ax), md(ay)];\n}\n\nfunction planStep(S) {\n  const K = S.curve, N = K.N, k = S.k, g = S.g, q = S.q;\n  const st = { k, vert: false, m: 0, start: q || g, third: null, next: null, rm: 0, rx: 0, ry: 0, rv: false, r3: null, rn: null, tR: -1 };\n  // F_61: the line's slope, its 61 dots from Q_k (from G when Q_k is O), and\n  // how many steps along it the third point falls.\n  if (!q || (q[0] === g[0] && md(q[1] + g[1]) === 0)) st.vert = true;\n  else st.m = q[0] === g[0] ? md((3 * g[0] * g[0] + A) * INV[md(2 * g[1])]) : md((q[1] - g[1]) * INV[md(q[0] - g[0])]);\n  st.next = fpAdd(q, g, K.b);\n  st.third = st.next ? [st.next[0], md(-st.next[1])] : null;\n  [st.dx, st.dy] = st.vert ? [0, 1] : shortStep(st.m);\n  const s0 = st.start, stepT = (pt) => (st.vert ? md(pt[1] - s0[1]) : md((pt[0] - s0[0]) * INV[st.dx]));\n  st.tR = st.third ? stepT(st.third) : P - 1;\n  // The real line, through G_r with slope rm or vertical.\n  const G = S.gr, Q = k === 0 ? null : realK(S, k);\n  if (k === 0 || k === N - 1) st.rv = true;\n  else if (k === 1) st.rm = (3 * G[0] * G[0] + A) / (2 * G[1]);\n  else if (Q) st.rm = (Q[1] - G[1]) / (Q[0] - G[0]);\n  else st.rm = 0;\n  st.rx = G[0];\n  st.ry = G[1];\n  if (k === N - 1) st.r3 = null;\n  else if (k === 0) st.r3 = [G[0], -G[1]];\n  else {\n    const x3 = st.rm * st.rm - G[0] - (Q ? Q[0] : G[0]);\n    st.r3 = [x3, G[1] + st.rm * (x3 - G[0])];\n  }\n  st.rn = st.r3 ? [st.r3[0], -st.r3[1]] : null;\n  S.step = st;\n}\n\nfunction finishStep(S) {\n  const st = S.step, N = S.curve.N;\n  S.past.push({ st, gs: S.gs + 1 });\n  S.gs++;\n  S.k = (S.k + 1) % N;\n  S.q = st.next;\n  if (st.next) S.trail.push({ k: S.k, gs: S.gs, fp: st.next, re: st.rn, ghost: 0 });\n  planStep(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trailK: 0.06, b: null, curve: null, curves: {}, g: null, gr: null, j: 1, side: 0,\n    k: 0, q: null, gs: 0, tau: 0, step: null, trail: [], past: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0];\n  S.speed = cl(kv[1], 0.2, 3);\n  S.trailK = cl(kv[3], 0, 1);\n  const b = round(cl(kv[2], CMIN, CMAX));\n  if (b !== S.b) {\n    S.b = b;\n    S.curve = S.curves[b] || (S.curves[b] = buildCurve(b));\n    S.trail.length = 0;\n    S.past.length = 0;\n    S.tau = 0;\n    startCycle(S, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.tau = 0;\n    startCycle(S, false);\n  }\n  S.tau += d * S.speed * RATE;\n  while (S.tau >= 1) {\n    S.tau -= 1;\n    finishStep(S);\n  }\n  // Ghosts of an old cycle fade out over 1.5 seconds.\n  for (const t of S.trail) if (t.ghost) t.ghost += d / 1.5;\n  const L = trailLen(S);\n  S.trail = S.trail.filter((t) => (t.ghost ? t.ghost \u003c 1 : S.gs + S.tau - t.gs \u003c L + 1));\n  S.past = S.past.filter((q) => S.gs + S.tau - q.gs \u003c linger(S));\n}\n\n// Past lines linger, fading: 1.6 steps at Trail 0, 8 steps at 1. They all\n// pass through G.\nconst linger = (S) => 1.6 + 6.4 * S.trailK ** 1.2;\n\nconst trailLen = (S) => 2 + (S.curve.N - 2) * (1 - S.trailK) ** 1.5;\n\n// ---- drawing ------------------------------------------------------------------\nfunction add(S, x, y, col, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0) return;\n  const p = y * W + x;\n  S.R[p] += col[0] * v;\n  S.G[p] += col[1] * v;\n  S.B[p] += col[2] * v;\n}\n\n// Real coordinates to LED coordinates (LED centres at whole numbers).\nconst px = (x) => (x - X0) * SX - 0.5;\nconst py = (y) => YC - y * SY;\n\nfunction disc(S, x, y, rad, col, v) {\n  const cx = px(x), cy = py(y);\n  for (let r = floor(cy - rad - 1); r \u003c= cy + rad + 1; r++)\n    for (let c = floor(cx - rad - 1); c \u003c= cx + rad + 1; c++) {\n      if (r \u003c 0 || r >= TOPH) continue;\n      const dd = sqrt((c - cx) ** 2 + (r - cy) ** 2);\n      add(S, c, r, col, v * cl(rad + 0.5 - dd, 0, 1));\n    }\n}\n\n// The real line through (x0, y0) with slope m, or the vertical through x0,\n// clipped to the window: one LED wide with a soft LED of glow either side.\nfunction realLine(S, x0, y0, m, vert, col, v) {\n  const k = vert ? 0 : (-m * SY) / SX, ax = px(x0), ay = py(y0);\n  if (!vert && abs(k) \u003c= 1) {\n    // Shallow: walk the columns, spread across rows.\n    for (let c = 0; c \u003c W; c++) {\n      const r = ay + k * (c - ax), r0 = floor(r);\n      for (let q = r0 - 1; q \u003c= r0 + 2; q++) if (q >= 0 && q \u003c TOPH) add(S, c, q, col, v * glow(abs(q - r)));\n    }\n  } else {\n    for (let r = 0; r \u003c TOPH; r++) {\n      const c = vert ? ax : ax + (r - ay) / k, c0 = floor(c);\n      for (let q = c0 - 1; q \u003c= c0 + 2; q++) add(S, q, r, col, v * glow(abs(q - c)));\n    }\n  }\n}\nconst glow = (d) => (d \u003c 1 ? 1 - 0.7 * d : d \u003c 2 ? 0.3 * (2 - d) : 0);\n\nconst inWin = (p) => p && p[0] > X0 - 0.2 && p[0] \u003c X1 + 0.2 && abs(p[1]) \u003c YM + 0.3;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.curve) return;\n  const { R, G, B, c } = S, K = S.curve, N = K.N, st = S.step, tau = S.tau;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h0 = S.hue + 0.6;\n  // The plane inside the real curve and the board are dim tints.\n  const plane = [0, 0, 0], ink = [0, 0, 0], board = [0, 0, 0], chord = [0, 0, 0], white = [1, 1, 1], base = [0, 0, 0];\n  // Round orange and yellow the dim tints lose most of their colour, or\n  // they would read brown and olive.\n  const hw = h0 + 0.03 - floor(h0 + 0.03), warm = cl(1 - abs(hw - 0.12) / 0.1, 0, 1);\n  hsv(h0, 0.75 - 0.5 * warm, 0.16, plane);\n  hsv(h0 - 0.02, 0.32, 0.92, ink);\n  hsv(h0 + 0.03, 0.6 - 0.4 * warm, 0.115, board);\n  hsv(h0 + 0.5, 0.42, 1, chord);\n  hsv(h0, 0.2, 0.34, base);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      const p = r * W + col, ln = K.line[p], fl = K.fill[p];\n      R[p] = (plane[0] * fl + ink[0] * ln) * 255;\n      G[p] = (plane[1] * fl + ink[1] * ln) * 255;\n      B[p] = (plane[2] * fl + ink[2] * ln) * 255;\n    }\n  for (let y = 0; y \u003c P; y++)\n    for (let x = 0; x \u003c P; x++) {\n      const p = (BY - y) * W + BX + x;\n      R[p] = board[0] * 255;\n      G[p] = board[1] * 255;\n      B[p] = board[2] * 255;\n    }\n  for (const [x, y] of K.pts) add(S, BX + x, BY - y, base, 255);\n\n  // The lines of the last few steps, fading: a pencil of lines through G.\n  for (const q of S.past) {\n    const w = 1 - (S.gs + tau - q.gs) / linger(S);\n    if (w \u003c= 0) continue;\n    const ps = q.st, s0 = ps.start;\n    realLine(S, ps.rx, ps.ry, ps.rm, ps.rv, chord, 130 * w);\n    for (let t = 0; t \u003c P; t++) {\n      const x = md(s0[0] + ps.dx * t), y = md(s0[1] + ps.dy * t);\n      add(S, BX + x, BY - y, chord, 55 * w);\n    }\n  }\n\n  // The trail: each multiple in its order's hue, the whole cycle once round\n  // the wheel, held for most of the trail and then let go.\n  const L = trailLen(S), now = S.gs + tau;\n  for (const t of S.trail) {\n    const age = now - t.gs;\n    let v = age \u003c 0.6 * L ? 1 : cl((L - age) / (0.4 * L), 0, 1);\n    if (t.ghost) v *= cl(1 - t.ghost, 0, 1);\n    if (v \u003c= 0.01) continue;\n    hsv(h0 + 0.42 + t.k / N, 0.88, 1, c);\n    add(S, BX + t.fp[0], BY - t.fp[1], c, 255 * v);\n    if (inWin(t.re)) disc(S, t.re[0], t.re[1], 1.5, c, 235 * v);\n    for (const [dx, dy] of NB) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 95 * v);\n    // A fresh landing blooms for a step and a half.\n    const bl = 1 - age / 1.5;\n    if (bl > 0 && !t.ghost) {\n      for (const [dx, dy] of NB2) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 110 * bl);\n      if (inWin(t.re)) disc(S, t.re[0], t.re[1], 2.6, c, 90 * bl);\n    }\n  }\n\n  // The step under way.\n  const lineV = tau \u003c 0.08 ? tau / 0.08 : tau > 0.88 ? (1 - tau) / 0.12 : 1;\n  // Real: the line, the third point, the mirror, the new point.\n  realLine(S, st.rx, st.ry, st.rm, st.rv, chord, 190 * lineV);\n  const mir = cl((tau - T_MIR0) / (T_MIR1 - T_MIR0), 0, 1);\n  if (tau > T_LINE * 0.9) {\n    if (st.r3 && inWin(st.r3)) disc(S, st.r3[0], st.r3[1], 1.3, white, 200 * lineV);\n    if (!st.r3) for (let r = 0; r \u003c 2; r++) add(S, round(px(st.rx)), r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.r3) {\n    const ya = py(st.r3[1]), yb = py(st.rn[1]), cc = round(px(st.r3[0]));\n    const yt = ya + (yb - ya) * mir;\n    for (let r = max(0, round(min(ya, yt))); r \u003c= min(TOPH - 1, round(max(ya, yt))); r++) if (r % 2 === 0) add(S, cc, r, white, 150 * lineV);\n  }\n  if (tau > T_MIR1 && st.rn && inWin(st.rn)) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.6, 1, c);\n    disc(S, st.rn[0], st.rn[1], 1.5, c, 255);\n  }\n  // F_61: the line's dots from Q_k, the head brightest, then the mirror.\n  const head = (min(tau, T_LINE) / T_LINE) * (P - 1), s0 = st.start;\n  for (let t = 0; t \u003c= head; t++) {\n    const x = md(s0[0] + st.dx * t), y = md(s0[1] + st.dy * t);\n    const on = K.onBoard[x * P + y];\n    const v = head - t \u003c 1 ? 1 : 0.85 + (on ? 0.15 : 0);\n    add(S, BX + x, BY - y, on ? white : chord, 230 * v * lineV);\n  }\n  if (head >= st.tR) {\n    if (st.third) {\n      const x = BX + st.third[0], y = BY - st.third[1];\n      for (const [dx, dy] of NB) add(S, x + dx, y + dy, white, 150 * lineV);\n    } else for (let r = OROW - 1; r \u003c= OROW; r++) add(S, BX + st.start[0], r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.third) {\n    const x = BX + st.third[0], ya = BY - st.third[1], yb = BY - st.next[1], yt = ya + (yb - ya) * mir;\n    for (let r = round(min(ya, yt)); r \u003c= round(max(ya, yt)); r++) if (r % 2 === 0) add(S, x, r, white, 120 * lineV);\n  }\n  if (tau > T_MIR1 && st.next) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.5, 1, c);\n    const x = BX + st.next[0], y = BY - st.next[1];\n    add(S, x, y, c, 255);\n    for (const [dx, dy] of NB) add(S, x + dx, y + dy, c, 140);\n  }\n  // G on both halves: white, with a dark ring round it on the real curve.\n  const gx = BX + S.g[0], gy = BY - S.g[1];\n  add(S, gx, gy, white, 255);\n  for (const [dx, dy] of NB) add(S, gx + dx, gy + dy, white, 120);\n  if (inWin(S.gr)) {\n    const cx = px(S.gr[0]), cy = py(S.gr[1]);\n    for (let r = floor(cy - 3); r \u003c= cy + 3; r++)\n      for (let q = floor(cx - 3); q \u003c= cx + 3; q++) {\n        if (r \u003c 0 || r >= TOPH || q \u003c 0 || q >= W) continue;\n        const dd = sqrt((q - cx) ** 2 + (r - cy) ** 2), p = r * W + q;\n        if (dd \u003c 2.6) {\n          const k = dd \u003c 1.4 ? 1 : 0.15;\n          R[p] = 255 * k;\n          G[p] = 255 * k;\n          B[p] = 255 * k;\n        }\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky."},{"name":"Speed","min":0.2,"max":3,"about":"Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44."},{"name":"Curve","min":-4,"max":8,"about":"The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points."},{"name":"Trail","min":0,"max":1,"about":"Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below."}],"start":[0,2,0,0.06],"measures":{"motion":0.0496,"detail":0.0598,"edges":0.5832,"complexity":0.5264,"coverage":0.6226,"colour":0.1255,"drift":0.0238},"knobResponse":[0.0592,0.0309,0.1041,0.0281]},{"slug":"embossed-glow","title":"Embossed Glow","family":"cosmetic","round":37,"note":"엠보싱한 하이라이터의 눌린 면이 패널을 채우고, 떠도는 작은 램프를 향한 비탈이 부드러운 띠로 빛나요. 반짝이 알갱이는 면이 램프 쪽으로 7도 안에 설 때만 빛나서 반짝임이 능선을 타고 옮겨 가요. 6.5초마다 보이지 않는 손끝이 홈을 쓸어 엠보싱을 새틴 띠로 눌러 펴고, 네 번 쓸면 판이 다시 눌려요. K3 은 물결과 퀼팅 마름모, 갈매기, 비늘 무늬를 고르고, 누르면 판을 바로 다시 눌러요.","idea":"The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.","buttons":"K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.","code":"// ===== Patternflow pattern =====\n// Title:   Embossed Glow\n// Family:  cosmetic\n// Idea:    The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after embossed baked highlighters and pressed powder compacts\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1\n//\n// Knob 1: Hue. The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive.\n// Knob 2: Speed. At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again.\n// Knob 3: Relief. The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3.\n// Knob 4: Lamp. How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin.\n// Buttons: K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, abs, min, max, pow, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst fr = (v) => v - floor(v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The four reliefs as heights from 0 (the floor of a groove) to 1 (a crest),\n// in LEDs from the top left. Each repeats every 9 to 24 LEDs, wide enough\n// that a slope spans three or more LEDs and its band reads.\nfunction relief(kind, x, y) {\n  if (kind === 0) {\n    // Ripples round the middle, 9 LEDs apart, crests a little sharper than\n    // the troughs.\n    const r = hypot(x - 31.5, y - 63.5), c = 0.5 + 0.5 * cos((2 * PI * r) / 9);\n    return pow(c, 0.8) * sm(0, 4, r) + (1 - sm(0, 4, r)) * 0.8;\n  }\n  if (kind === 1) {\n    // Quilted diamonds 16 wide and 24 tall: each a pillow, stitched down\n    // along its edges.\n    const u = x / 16 + y / 24, v = x / 16 - y / 24, fu = fr(u) - 0.5, fv = fr(v) - 0.5;\n    return pow(cos(PI * fu) * cos(PI * fv), 0.55);\n  }\n  if (kind === 2) {\n    // Chevrons 16 LEDs a V, stacked every 10 rows, with a sharp crest and a\n    // long back slope like a pressed rib.\n    const yv = y + 8 * abs(2 * fr(x / 16 + 0.5) - 1), t = fr(yv / 10);\n    return t \u003c 0.3 ? sm(0, 0.3, t) : 1 - sm(0.3, 1, t);\n  }\n  // Scales 14 wide in rows 9 apart, each row overlapping the one above,\n  // every scale rising to a rounded lip at its lower edge.\n  const j = floor(y / 9 + 0.5);\n  let best = -1, hh = 0;\n  for (let jj = j + 1; jj >= j - 1; jj--) {\n    const off = jj & 1 ? 7 : 0, i = round((x - off) / 14), cx = i * 14 + off, cy = jj * 9 - 4;\n    const d = hypot(x - cx, (y - cy) * 1.05) / 9;\n    if (d \u003c 1 && y >= cy) {\n      best = jj;\n      hh = 0.2 + 0.8 * sm(0.1, 0.85, d) * (1 - sm(0.9, 1, d));\n      break;\n    }\n  }\n  return best \u003c 0 ? 0 : hh;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, kind: -1, lamp: 0.06, clock: 0, started: false,\n    rel: new Float32Array(N), wipe: new Float32Array(N), hgt: new Float32Array(N),\n    gx: new Float32Array(N), gy: new Float32Array(N), gw: new Float32Array(N), gt: new Uint8Array(N),\n    swipe: null, nextSwipe: 2.2, swipes: 0, press: -1, pal: new Float32Array(16), palHue: NaN,\n  });\n  // A shimmer grain under every LED: its facet leans up to 13 degrees off\n  // the surface, every way, so the glints gather where the surface itself\n  // nearly faces the half vector, along the lit flank of each ridge. Half the\n  // grains are bright enough to glint and one in three of those flips to the\n  // second tint.\n  for (let p = 0; p \u003c N; p++) {\n    const a = random() * 2 * PI, t = 0.23 * sqrt(random());\n    S.gx[p] = t * cos(a);\n    S.gy[p] = t * sin(a);\n    const g = random();\n    S.gw[p] = g \u003c 0.5 ? 0.5 + 0.5 * random() : 0.1 * random();\n    S.gt[p] = random() \u003c 0.33 ? 1 : 0;\n  }\n}\n\nfunction setRelief(S, kind) {\n  S.kind = kind;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) S.rel[y * W + x] = relief(kind, x, y);\n}\n\n// A swipe: a slightly bent stroke 9 to 13 LEDs wide, mostly up or down the\n// panel, entering and leaving near the edges.\nfunction newSwipe() {\n  const down = random() \u003c 0.5, x0 = 8 + random() * 48, x1 = 8 + random() * 48;\n  const y0 = down ? -6 : H + 6, y1 = down ? 30 + random() * 80 : 98 - random() * 80;\n  return {\n    x0, y0, x1, y1, bx: (x0 + x1) / 2 + (random() - 0.5) * 40, by: (y0 + y1) / 2,\n    r: 4.5 + random() * 2, t: 0, last: 0,\n  };\n}\n\nfunction stamp(S, x, y, r) {\n  for (let yy = max(0, floor(y - r - 2)); yy \u003c= min(H - 1, y + r + 2); yy++)\n    for (let xx = max(0, floor(x - r - 2)); xx \u003c= min(W - 1, x + r + 2); xx++) {\n      const d = hypot(xx - x, yy - y), w = 1 - sm(r - 1.5, r + 1.5, d), p = yy * W + xx;\n      if (w > S.wipe[p]) S.wipe[p] = w;\n    }\n}\n\nfunction stepSwipe(S, ds) {\n  const sw = S.swipe;\n  sw.t = min(1, sw.t + ds / 0.7);\n  // Ease in and out: the fingertip lands, drags and lifts.\n  const e = sm(0, 1, sw.t);\n  const n = max(1, Math.ceil((e - sw.last) * 120));\n  for (let i = 1; i \u003c= n; i++) {\n    const u = sw.last + ((e - sw.last) * i) / n, v = 1 - u;\n    stamp(S, v * v * sw.x0 + 2 * u * v * sw.bx + u * u * sw.x1, v * v * sw.y0 + 2 * u * v * sw.by + u * u * sw.y1, sw.r * (0.75 + 0.25 * sin(PI * min(1, u * 1.4))));\n  }\n  sw.last = e;\n  if (sw.t >= 1) S.swipe = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.lamp = cl(k[3], -1, 1);\n  const kind = cl(round(k[2]), 0, 3);\n  if (kind !== S.kind) setRelief(S, kind);\n  if (!S.started) {\n    // Open on a pan that has had one swipe already.\n    S.swipe = newSwipe();\n    S.swipe.x0 = 14;\n    S.swipe.x1 = 50;\n    S.swipe.y0 = -6;\n    S.swipe.y1 = 92;\n    S.swipe.bx = 6;\n    while (S.swipe) stepSwipe(S, 0.05);\n    S.started = true;\n  }\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  if (input.btnPressed && input.btnPressed[0] && S.press \u003c 0) S.press = 0;\n  if (S.press >= 0) {\n    // The pressing edge runs down from the top in 2.4 s, or 4.8 s at Speed\n    // 1 and below, so a tap is never a long wait. Above it every trough is\n    // gone; the last 12 rows over it are part way.\n    S.press += d * max(0.5, S.speed / 2);\n    const y1 = (S.press / 2.4) * (H + 24) - 12;\n    for (let y = 0; y \u003c min(H, y1); y++) {\n      const keep = sm(y1 - 12, y1, y);\n      for (let x = 0; x \u003c W; x++) if (S.wipe[y * W + x] > keep) S.wipe[y * W + x] = keep;\n    }\n    if (y1 > H + 12) S.press = -1;\n  }\n  if (S.swipe) stepSwipe(S, ds);\n  else if (S.clock >= S.nextSwipe) {\n    S.nextSwipe = S.clock + 6.5;\n    S.swipes++;\n    if (S.swipes % 5 === 0 && S.press \u003c 0) S.press = 0;\n    else S.swipe = newSwipe();\n  }\n}\n\nfunction palette(S) {\n  // At Hue 0 a pink pearl. Where the hue comes round to orange, gold and\n  // lime the body is laid paler and brighter and its shaded side leans to\n  // rose, as at half light those hues read brown or olive. Elsewhere the\n  // shaded side is the same hue a little deeper. The sheen is a pale tint a\n  // fourteenth of the wheel on, and the glints come in two tints, the\n  // shade's own and one a tenth on, as pearl pigment flips.\n  const h = S.hue + 0.9, hh = fr(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.03, hw) * (1 - sm(0.26, 0.38, hw));\n  hsv(h, 0.42 - 0.14 * warm, 0.94 + 0.05 * warm, S.pal, 0);\n  hsv(h - 0.12 * warm, 0.56 - 0.04 * warm, 1, S.pal, 3);\n  hsv(h + 0.07, 0.3, 1, S.pal, 6);\n  hsv(h, 0.22, 1, S.pal, 9);\n  hsv(h + 0.1, 0.3, 1, S.pal, 12);\n  S.pal[15] = warm;\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const { rel, wipe, hgt, gx, gy, gw, gt, pal } = S;\n  // The lamp wanders on a slow Lissajous path over the whole panel, 9 LEDs\n  // above it at Lamp -1, 32 at 0.06 and 64 at 1.\n  const t = S.clock, lx = 32 + 24 * sin(t * 0.37 + 1.1), ly = 64 + 44 * sin(t * 0.23 + 0.4);\n  const lh = 32 + (S.lamp >= 0.06 ? ((S.lamp - 0.06) / 0.94) * 32 : ((S.lamp - 0.06) / 1.06) * 23);\n  // Above 0.06 the room light comes up too: a light straight overhead, 2.4\n  // times the lamp at Lamp 1, which lights every flank alike and evens out\n  // the pool.\n  const up = S.lamp > 0.06 ? (S.lamp - 0.06) / 0.94 : 0, over = 2.4 * up, poolLift = 0.4 * up;\n  // The eye sways 1.5 degrees, as a shopper's would, so the glints twinkle\n  // even while the lamp holds still.\n  let ex = 0.026 * sin(t * 2.1), ey = 0.026 * sin(t * 1.7 + 2);\n  const en = 1 / sqrt(ex * ex + ey * ey + 1);\n  ex *= en;\n  ey *= en;\n  const ez = en;\n  // Height in LEDs: crests stand 2 above the grooves. Under a swipe the\n  // emboss is flattened to a trough 0.2 below the grooves, with a low lip of\n  // pushed powder at its edge. Under the pressing edge the emboss is pushed\n  // down to a sixth over a band 20 rows tall and springs back behind it.\n  const py1 = S.press >= 0 ? (S.press / 2.4) * (H + 24) - 12 : -1e9;\n  for (let y = 0; y \u003c H; y++) {\n    const rise = 1 - 0.85 * (1 - sm(0, 10, abs(y - py1 + 4)));\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, w = wipe[p];\n      hgt[p] = 2 * (rel[p] * rise * (1 - w) - 0.11 * w + 0.5 * w * (1 - w));\n    }\n  }\n  const warm = pal[15], amb = 0.22 + 0.36 * warm, COSG = cos((7 * PI) / 180);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, h = hgt[p];\n      const hx = (x \u003c W - 1 ? hgt[p + 1] : h) - (x > 0 ? hgt[p - 1] : h), hy = (y \u003c H - 1 ? hgt[p + W] : h) - (y > 0 ? hgt[p - W] : h);\n      let nx = -hx * 0.5, ny = -hy * 0.5, nz = 1;\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1);\n      nx *= nn;\n      ny *= nn;\n      nz *= nn;\n      let ldx = lx - x, ldy = ly - y, ldz = lh - h;\n      const flat2 = ldx * ldx + ldy * ldy;\n      let li = 1 / sqrt(flat2 + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz = ldz * li + over;\n      li = 1 / sqrt(ldx * ldx + ldy * ldy + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz *= li;\n      let hvx = ldx + ex, hvy = ldy + ey, hvz = ldz + ez;\n      const hn = 1 / sqrt(hvx * hvx + hvy * hvy + hvz * hvz);\n      hvx *= hn;\n      hvy *= hn;\n      hvz *= hn;\n      // The lamp's pool: full under it, half 40 LEDs out, never under 0.3.\n      const pool = 0.3 + 0.7 / (1 + flat2 / 1600) + poolLift, w = wipe[p];\n      // A slope lights by how much more it faces the lamp than the flat\n      // powder does (Lambert over the flat's own Lambert), so a low lamp\n      // rakes the whole pan, up to 1.7 times the flat on a facing flank and\n      // down to a fifth on the far one, while light from overhead lights\n      // every flank nearly alike. Rose, orange and yellow keep only 55% of\n      // that range, so their dark side never browns.\n      const fl = cl((0.7 * (nx * ldx + ny * ldy + nz * ldz)) / max(ldz, 0.12), 0.14, 1.2);\n      const lit = pool * (fl + (0.75 - fl) * 0.45 * warm);\n      // Satin sheen: broad on the grainy powder and broader still in a\n      // trough, where the finger has pressed it smooth and it glows as one.\n      const nh = max(0, nx * hvx + ny * hvy + nz * hvz), sheen = pow(nh, 12 - 6 * w) * (0.55 + 0.08 * w) * pool;\n      // A grain glints when its facet is within 7 degrees of the half vector.\n      const mx = nx + gx[p], my = ny + gy[p], mz = nz, md = (mx * hvx + my * hvy + mz * hvz) / sqrt(mx * mx + my * my + mz * mz);\n      let gl = 0;\n      if (md > COSG) {\n        const q = (md - COSG) / (1 - COSG);\n        gl = gw[p] * q * q * (1 - w) * (1 - w) * (0.5 + 0.7 * pool) * 1.6;\n      }\n      const body = (amb + (1 - amb) * lit) * (0.94 + 0.12 * gw[p]), o = gt[p] ? 12 : 9;\n      // Lit faces take the body colour, shaded ones the shade colour, and a\n      // trough leans a third of the way to the shade colour.\n      const u = cl(lit, 0, 1) * (1 - 0.35 * w), v = 1 - u;\n      let r = (pal[0] * u + pal[3] * v) * body + pal[6] * sheen + pal[o] * gl;\n      let g = (pal[1] * u + pal[4] * v) * body + pal[7] * sheen + pal[o + 1] * gl;\n      let b = (pal[2] * u + pal[5] * v) * body + pal[8] * sheen + pal[o + 2] * gl;\n      // Past full brightness the colour is scaled down whole rather than\n      // clipped channel by channel, so a glint stays a tint and not white.\n      const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (m > 1) (r /= m), (g /= m), (b /= m);\n      display.setPixel(x, y, 255 * r, 255 * g, 255 * b);\n    }\n}\n","layer":{"id":"layer-embossed-glow","type":"code","name":"embossed-glow","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Embossed Glow\n// Family:  cosmetic\n// Idea:    The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after embossed baked highlighters and pressed powder compacts\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1\n//\n// Knob 1: Hue. The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive.\n// Knob 2: Speed. At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again.\n// Knob 3: Relief. The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3.\n// Knob 4: Lamp. How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin.\n// Buttons: K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, abs, min, max, pow, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst fr = (v) => v - floor(v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The four reliefs as heights from 0 (the floor of a groove) to 1 (a crest),\n// in LEDs from the top left. Each repeats every 9 to 24 LEDs, wide enough\n// that a slope spans three or more LEDs and its band reads.\nfunction relief(kind, x, y) {\n  if (kind === 0) {\n    // Ripples round the middle, 9 LEDs apart, crests a little sharper than\n    // the troughs.\n    const r = hypot(x - 31.5, y - 63.5), c = 0.5 + 0.5 * cos((2 * PI * r) / 9);\n    return pow(c, 0.8) * sm(0, 4, r) + (1 - sm(0, 4, r)) * 0.8;\n  }\n  if (kind === 1) {\n    // Quilted diamonds 16 wide and 24 tall: each a pillow, stitched down\n    // along its edges.\n    const u = x / 16 + y / 24, v = x / 16 - y / 24, fu = fr(u) - 0.5, fv = fr(v) - 0.5;\n    return pow(cos(PI * fu) * cos(PI * fv), 0.55);\n  }\n  if (kind === 2) {\n    // Chevrons 16 LEDs a V, stacked every 10 rows, with a sharp crest and a\n    // long back slope like a pressed rib.\n    const yv = y + 8 * abs(2 * fr(x / 16 + 0.5) - 1), t = fr(yv / 10);\n    return t \u003c 0.3 ? sm(0, 0.3, t) : 1 - sm(0.3, 1, t);\n  }\n  // Scales 14 wide in rows 9 apart, each row overlapping the one above,\n  // every scale rising to a rounded lip at its lower edge.\n  const j = floor(y / 9 + 0.5);\n  let best = -1, hh = 0;\n  for (let jj = j + 1; jj >= j - 1; jj--) {\n    const off = jj & 1 ? 7 : 0, i = round((x - off) / 14), cx = i * 14 + off, cy = jj * 9 - 4;\n    const d = hypot(x - cx, (y - cy) * 1.05) / 9;\n    if (d \u003c 1 && y >= cy) {\n      best = jj;\n      hh = 0.2 + 0.8 * sm(0.1, 0.85, d) * (1 - sm(0.9, 1, d));\n      break;\n    }\n  }\n  return best \u003c 0 ? 0 : hh;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, kind: -1, lamp: 0.06, clock: 0, started: false,\n    rel: new Float32Array(N), wipe: new Float32Array(N), hgt: new Float32Array(N),\n    gx: new Float32Array(N), gy: new Float32Array(N), gw: new Float32Array(N), gt: new Uint8Array(N),\n    swipe: null, nextSwipe: 2.2, swipes: 0, press: -1, pal: new Float32Array(16), palHue: NaN,\n  });\n  // A shimmer grain under every LED: its facet leans up to 13 degrees off\n  // the surface, every way, so the glints gather where the surface itself\n  // nearly faces the half vector, along the lit flank of each ridge. Half the\n  // grains are bright enough to glint and one in three of those flips to the\n  // second tint.\n  for (let p = 0; p \u003c N; p++) {\n    const a = random() * 2 * PI, t = 0.23 * sqrt(random());\n    S.gx[p] = t * cos(a);\n    S.gy[p] = t * sin(a);\n    const g = random();\n    S.gw[p] = g \u003c 0.5 ? 0.5 + 0.5 * random() : 0.1 * random();\n    S.gt[p] = random() \u003c 0.33 ? 1 : 0;\n  }\n}\n\nfunction setRelief(S, kind) {\n  S.kind = kind;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) S.rel[y * W + x] = relief(kind, x, y);\n}\n\n// A swipe: a slightly bent stroke 9 to 13 LEDs wide, mostly up or down the\n// panel, entering and leaving near the edges.\nfunction newSwipe() {\n  const down = random() \u003c 0.5, x0 = 8 + random() * 48, x1 = 8 + random() * 48;\n  const y0 = down ? -6 : H + 6, y1 = down ? 30 + random() * 80 : 98 - random() * 80;\n  return {\n    x0, y0, x1, y1, bx: (x0 + x1) / 2 + (random() - 0.5) * 40, by: (y0 + y1) / 2,\n    r: 4.5 + random() * 2, t: 0, last: 0,\n  };\n}\n\nfunction stamp(S, x, y, r) {\n  for (let yy = max(0, floor(y - r - 2)); yy \u003c= min(H - 1, y + r + 2); yy++)\n    for (let xx = max(0, floor(x - r - 2)); xx \u003c= min(W - 1, x + r + 2); xx++) {\n      const d = hypot(xx - x, yy - y), w = 1 - sm(r - 1.5, r + 1.5, d), p = yy * W + xx;\n      if (w > S.wipe[p]) S.wipe[p] = w;\n    }\n}\n\nfunction stepSwipe(S, ds) {\n  const sw = S.swipe;\n  sw.t = min(1, sw.t + ds / 0.7);\n  // Ease in and out: the fingertip lands, drags and lifts.\n  const e = sm(0, 1, sw.t);\n  const n = max(1, Math.ceil((e - sw.last) * 120));\n  for (let i = 1; i \u003c= n; i++) {\n    const u = sw.last + ((e - sw.last) * i) / n, v = 1 - u;\n    stamp(S, v * v * sw.x0 + 2 * u * v * sw.bx + u * u * sw.x1, v * v * sw.y0 + 2 * u * v * sw.by + u * u * sw.y1, sw.r * (0.75 + 0.25 * sin(PI * min(1, u * 1.4))));\n  }\n  sw.last = e;\n  if (sw.t >= 1) S.swipe = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.lamp = cl(k[3], -1, 1);\n  const kind = cl(round(k[2]), 0, 3);\n  if (kind !== S.kind) setRelief(S, kind);\n  if (!S.started) {\n    // Open on a pan that has had one swipe already.\n    S.swipe = newSwipe();\n    S.swipe.x0 = 14;\n    S.swipe.x1 = 50;\n    S.swipe.y0 = -6;\n    S.swipe.y1 = 92;\n    S.swipe.bx = 6;\n    while (S.swipe) stepSwipe(S, 0.05);\n    S.started = true;\n  }\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  if (input.btnPressed && input.btnPressed[0] && S.press \u003c 0) S.press = 0;\n  if (S.press >= 0) {\n    // The pressing edge runs down from the top in 2.4 s, or 4.8 s at Speed\n    // 1 and below, so a tap is never a long wait. Above it every trough is\n    // gone; the last 12 rows over it are part way.\n    S.press += d * max(0.5, S.speed / 2);\n    const y1 = (S.press / 2.4) * (H + 24) - 12;\n    for (let y = 0; y \u003c min(H, y1); y++) {\n      const keep = sm(y1 - 12, y1, y);\n      for (let x = 0; x \u003c W; x++) if (S.wipe[y * W + x] > keep) S.wipe[y * W + x] = keep;\n    }\n    if (y1 > H + 12) S.press = -1;\n  }\n  if (S.swipe) stepSwipe(S, ds);\n  else if (S.clock >= S.nextSwipe) {\n    S.nextSwipe = S.clock + 6.5;\n    S.swipes++;\n    if (S.swipes % 5 === 0 && S.press \u003c 0) S.press = 0;\n    else S.swipe = newSwipe();\n  }\n}\n\nfunction palette(S) {\n  // At Hue 0 a pink pearl. Where the hue comes round to orange, gold and\n  // lime the body is laid paler and brighter and its shaded side leans to\n  // rose, as at half light those hues read brown or olive. Elsewhere the\n  // shaded side is the same hue a little deeper. The sheen is a pale tint a\n  // fourteenth of the wheel on, and the glints come in two tints, the\n  // shade's own and one a tenth on, as pearl pigment flips.\n  const h = S.hue + 0.9, hh = fr(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.03, hw) * (1 - sm(0.26, 0.38, hw));\n  hsv(h, 0.42 - 0.14 * warm, 0.94 + 0.05 * warm, S.pal, 0);\n  hsv(h - 0.12 * warm, 0.56 - 0.04 * warm, 1, S.pal, 3);\n  hsv(h + 0.07, 0.3, 1, S.pal, 6);\n  hsv(h, 0.22, 1, S.pal, 9);\n  hsv(h + 0.1, 0.3, 1, S.pal, 12);\n  S.pal[15] = warm;\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const { rel, wipe, hgt, gx, gy, gw, gt, pal } = S;\n  // The lamp wanders on a slow Lissajous path over the whole panel, 9 LEDs\n  // above it at Lamp -1, 32 at 0.06 and 64 at 1.\n  const t = S.clock, lx = 32 + 24 * sin(t * 0.37 + 1.1), ly = 64 + 44 * sin(t * 0.23 + 0.4);\n  const lh = 32 + (S.lamp >= 0.06 ? ((S.lamp - 0.06) / 0.94) * 32 : ((S.lamp - 0.06) / 1.06) * 23);\n  // Above 0.06 the room light comes up too: a light straight overhead, 2.4\n  // times the lamp at Lamp 1, which lights every flank alike and evens out\n  // the pool.\n  const up = S.lamp > 0.06 ? (S.lamp - 0.06) / 0.94 : 0, over = 2.4 * up, poolLift = 0.4 * up;\n  // The eye sways 1.5 degrees, as a shopper's would, so the glints twinkle\n  // even while the lamp holds still.\n  let ex = 0.026 * sin(t * 2.1), ey = 0.026 * sin(t * 1.7 + 2);\n  const en = 1 / sqrt(ex * ex + ey * ey + 1);\n  ex *= en;\n  ey *= en;\n  const ez = en;\n  // Height in LEDs: crests stand 2 above the grooves. Under a swipe the\n  // emboss is flattened to a trough 0.2 below the grooves, with a low lip of\n  // pushed powder at its edge. Under the pressing edge the emboss is pushed\n  // down to a sixth over a band 20 rows tall and springs back behind it.\n  const py1 = S.press >= 0 ? (S.press / 2.4) * (H + 24) - 12 : -1e9;\n  for (let y = 0; y \u003c H; y++) {\n    const rise = 1 - 0.85 * (1 - sm(0, 10, abs(y - py1 + 4)));\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, w = wipe[p];\n      hgt[p] = 2 * (rel[p] * rise * (1 - w) - 0.11 * w + 0.5 * w * (1 - w));\n    }\n  }\n  const warm = pal[15], amb = 0.22 + 0.36 * warm, COSG = cos((7 * PI) / 180);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, h = hgt[p];\n      const hx = (x \u003c W - 1 ? hgt[p + 1] : h) - (x > 0 ? hgt[p - 1] : h), hy = (y \u003c H - 1 ? hgt[p + W] : h) - (y > 0 ? hgt[p - W] : h);\n      let nx = -hx * 0.5, ny = -hy * 0.5, nz = 1;\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1);\n      nx *= nn;\n      ny *= nn;\n      nz *= nn;\n      let ldx = lx - x, ldy = ly - y, ldz = lh - h;\n      const flat2 = ldx * ldx + ldy * ldy;\n      let li = 1 / sqrt(flat2 + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz = ldz * li + over;\n      li = 1 / sqrt(ldx * ldx + ldy * ldy + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz *= li;\n      let hvx = ldx + ex, hvy = ldy + ey, hvz = ldz + ez;\n      const hn = 1 / sqrt(hvx * hvx + hvy * hvy + hvz * hvz);\n      hvx *= hn;\n      hvy *= hn;\n      hvz *= hn;\n      // The lamp's pool: full under it, half 40 LEDs out, never under 0.3.\n      const pool = 0.3 + 0.7 / (1 + flat2 / 1600) + poolLift, w = wipe[p];\n      // A slope lights by how much more it faces the lamp than the flat\n      // powder does (Lambert over the flat's own Lambert), so a low lamp\n      // rakes the whole pan, up to 1.7 times the flat on a facing flank and\n      // down to a fifth on the far one, while light from overhead lights\n      // every flank nearly alike. Rose, orange and yellow keep only 55% of\n      // that range, so their dark side never browns.\n      const fl = cl((0.7 * (nx * ldx + ny * ldy + nz * ldz)) / max(ldz, 0.12), 0.14, 1.2);\n      const lit = pool * (fl + (0.75 - fl) * 0.45 * warm);\n      // Satin sheen: broad on the grainy powder and broader still in a\n      // trough, where the finger has pressed it smooth and it glows as one.\n      const nh = max(0, nx * hvx + ny * hvy + nz * hvz), sheen = pow(nh, 12 - 6 * w) * (0.55 + 0.08 * w) * pool;\n      // A grain glints when its facet is within 7 degrees of the half vector.\n      const mx = nx + gx[p], my = ny + gy[p], mz = nz, md = (mx * hvx + my * hvy + mz * hvz) / sqrt(mx * mx + my * my + mz * mz);\n      let gl = 0;\n      if (md > COSG) {\n        const q = (md - COSG) / (1 - COSG);\n        gl = gw[p] * q * q * (1 - w) * (1 - w) * (0.5 + 0.7 * pool) * 1.6;\n      }\n      const body = (amb + (1 - amb) * lit) * (0.94 + 0.12 * gw[p]), o = gt[p] ? 12 : 9;\n      // Lit faces take the body colour, shaded ones the shade colour, and a\n      // trough leans a third of the way to the shade colour.\n      const u = cl(lit, 0, 1) * (1 - 0.35 * w), v = 1 - u;\n      let r = (pal[0] * u + pal[3] * v) * body + pal[6] * sheen + pal[o] * gl;\n      let g = (pal[1] * u + pal[4] * v) * body + pal[7] * sheen + pal[o + 1] * gl;\n      let b = (pal[2] * u + pal[5] * v) * body + pal[8] * sheen + pal[o + 2] * gl;\n      // Past full brightness the colour is scaled down whole rather than\n      // clipped channel by channel, so a glint stays a tint and not white.\n      const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (m > 1) (r /= m), (g /= m), (b /= m);\n      display.setPixel(x, y, 255 * r, 255 * g, 255 * b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again."},{"name":"Relief","min":0,"max":3,"about":"The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3."},{"name":"Lamp","min":-1,"max":1,"about":"How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin."}],"start":[0,2,0,0.06],"measures":{"motion":0.0374,"detail":0.0733,"edges":0.2266,"complexity":2.4899,"coverage":1,"colour":0.1712,"drift":0.1081},"knobResponse":[0.3063,0.0963,0.1554,0.2659]},{"slug":"emergence","title":"Emergence","family":"mammal","round":24,"note":"해 질 녘 메마른 언덕의 동굴 입구에서 박쥐 떼가 검은 리본처럼 쏟아져 나와, 노을 하늘을 비틀며 패널 꼭대기까지 기둥으로 올라가요. 기둥은 두 가닥으로 갈라졌다 다시 붙고, 매가 내리꽂히면 박쥐들이 고리처럼 물러났다가 구멍이 닫혀요. K1 을 끝까지 돌리면 밤이 되어 박쥐가 보름달 앞을 지나가요.","idea":"At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.","buttons":"K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Emergence\n// Family:  mammal\n// Idea:    At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the summer evening emergence of Mexican free-tailed bats (Tadarida brasiliensis) from the caves of the Texas Hill Country\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes.\n// Knob 2: Speed. The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Bats. How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave.\n// Knob 4: Wind. A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right.\n// Buttons: K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The cave mouth: its middle column, floor row, half width and height.\nconst [CX, CB, CW, CH] = [27, 121, 9, 9.5];\n// The row where the bats come out, the most bats the knob asks for, the\n// spine's length in rows, and a bat's climb at Speed 2 in LEDs a second.\nconst [CY, MAXB, HM, V0] = [115, 1400, 118, 28];\n// The column's front at the start, and the length of one trip.\nconst [F0, LT] = [90, 150];\n\n// The sky from the top (0) to the horizon (1): afterglow, late dusk, night.\nconst SKIES = [\n  [[0, 30, 26, 98], [0.2, 66, 46, 138], [0.42, 160, 70, 134], [0.62, 236, 104, 100], [0.8, 255, 146, 72], [1, 255, 196, 112]],\n  [[0, 12, 14, 62], [0.3, 30, 30, 100], [0.6, 94, 52, 116], [0.84, 190, 84, 78], [1, 228, 126, 66]],\n  [[0, 5, 9, 32], [0.45, 10, 18, 56], [0.8, 22, 30, 74], [1, 44, 42, 84]],\n];\n// Rock, far hills, scrub and the lit undersides of the clouds at each hour.\nconst LAND = [\n  [92, 64, 54, 116, 72, 96, 34, 36, 24, 255, 178, 150],\n  [56, 40, 46, 64, 44, 80, 24, 26, 22, 140, 66, 96],\n  [28, 28, 40, 30, 30, 60, 14, 18, 22, 18, 20, 38],\n];\n// A bat against the light, and the hawk.\nconst BAT = [14, 10, 12];\n\nfunction ramp(S, g, c) {\n  let j = 0;\n  while (j \u003c S.length - 2 && g > S[j + 1][0]) j++;\n  const a = S[j], b = S[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, bg: F(N * 3), f: F(N * 3), D: F(N), key: -1, co: 0, hk: null, ring: null, nh: 3.4,\n    S: F(MAXB), V: F(MAXB), A: F(MAXB), B: F(MAXB), TU: F(MAXB), RH: F(MAXB), DR: F(MAXB), JF: F(MAXB), JP: F(MAXB),\n    FR: F(MAXB), FP: F(MAXB), OX: F(MAXB), OY: F(MAXB), VX: F(MAXB), VY: F(MAXB), BX: F(MAXB), BY: F(MAXB), Z: F(MAXB),\n    SX: F(HM), SR: F(HM), SP: F(HM), SS: F(HM), RID: F(W), FAR: F(W), CT: F(128 * 72),\n  });\n  // The near hill climbs over the cave; a flat mesa stands far off on the right.\n  for (let x = 0; x \u003c W; x++) {\n    P.RID[x] = 99 + 0.07 * x - 10 * exp(-(((x - 23) / 15) ** 2)) + 2 * vn(x * 0.13, 3) + 1.2 * vn(x * 0.4, 9) - 1.6;\n    P.FAR[x] = 90 + 2.5 * vn(x * 0.09, 1) + 1.5 * vn(x * 0.3, 2) - 7 * sm(38, 43, x) * (1 - sm(57, 61, x)) - 2 * exp(-(((x - 8) / 9) ** 2));\n  }\n  // Scrub: juniper and mesquite clumps on the slope and along the skyline.\n  P.bush = [];\n  for (let n = 0; n \u003c 34; n++) {\n    const x = rnd() * W, top = n \u003c 10, r = top ? 1 + rnd() * 1.2 : 0.8 + rnd() * 1.3;\n    const y = top ? P.RID[floor(x)] - r * 0.4 : P.RID[floor(x)] + 2 + rnd() * (H - P.RID[floor(x)] - 2);\n    if (((x - CX) / (CW + 3)) ** 2 + ((CB - y) / (CH + 3)) ** 2 > 1 || y > CB + 2) P.bush.push([x, y, r]);\n  }\n  P.stars = Array.from({ length: 80 }, () => [floor(rnd() * W), floor(rnd() * 86), 0.4 + rnd() * 0.6, rnd() * 7, 1 + rnd() * 3]);\n  // Thin streaks of high cloud, wrapping every 128 columns.\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const f = (X) => 0.6 * vn(X * 0.035, y * 0.3) + 0.4 * vn(X * 0.11, y * 0.5 + 7);\n      const band = sm(0, 10, y) * (1 - sm(56, 72, y)) * (0.5 + 0.5 * sin(y * 0.21 + 1));\n      P.CT[y * 128 + x] = sm(0.5, 0.75, mix(f(x), f(x + 128), x / 128)) * band;\n    }\n}\n\n// Where a bat turns off the column, how wide it swings and which way.\nfunction route(P, i) {\n  const top = rnd() \u003c 0.16;\n  P.TU[i] = top ? 98 + 14 * rnd() : P.tu + 13 * rnd();\n  P.RH[i] = top ? 30 : 15 + 7 * rnd();\n  P.DR[i] = rnd() \u003c cl(0.72 + 0.6 * P.w, 0.04, 0.96) ? 1 : -1;\n}\n\nfunction place(P, M) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    const a = rnd() * 2 - 1;\n    P.A[i] = (a \u003c 0 ? -1 : 1) * abs(a) ** 0.8;\n    P.B[i] = (rnd() - 0.5) * 1.2;\n    P.V[i] = V0 * (0.8 + 0.4 * rnd());\n    P.JF[i] = 1.4 + rnd() * 2.4;\n    P.JP[i] = rnd() * 7;\n    P.FR[i] = 4 + rnd() * 2.6;\n    P.FP[i] = rnd();\n    route(P, i);\n    P.S[i] = i \u003c M ? F0 - rnd() * LT : -1 - rnd() * LT;\n  }\n  P.init = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), M = round(cl(k[2], 400, 1400));\n  P.k1 = cl(k[0], 0, 1);\n  P.w = cl(k[3], -1, 1);\n  const T = (P.t += d);\n  // The height where the stream peels off wanders slowly.\n  P.tu = 80 + 8 * sin(T * 0.23 + 1);\n  if (!P.init) place(P, M);\n  const w = P.w, { SX, SR, SP, SS } = P;\n  P.co += d * (1.2 + 4 * w);\n\n  // The spine of the column: it leans downwind, corkscrews and breathes, and\n  // now and then tears in two along its middle and closes again higher up.\n  const Rk = 5 + (5 * (M - 400)) / 1000, ph = (T - 2.4) % 12, split = T \u003c 2.4 ? 0 : sm(0, 1.4, ph) * (1 - sm(4.6, 6.2, ph));\n  for (let h = 0; h \u003c HM; h++) {\n    const A = 1 + 7.5 * sm(4, 92, h);\n    SX[h] = CX + w * (0.17 * h + 0.0009 * h * h) + A * (sin(0.052 * h - 1.3 * T) + 0.4 * sin(0.12 * h + 0.75 * T + 2));\n    SR[h] = Rk * (1.25 - 0.55 * sm(0, 26, h) + 0.3 * sm(20, 50, h)) * (1 + 0.005 * h) * (1 + 0.3 * sin(0.075 * h - 2.1 * T));\n    SP[h] = 0.055 * h - 1.7 * T;\n    SS[h] = h > 18 && h \u003c 96 ? split * 9 * sin((PI * (h - 18)) / 78) : 0;\n  }\n\n  // The hawk: a stoop through the column on a curve, out the other side.\n  if (input.btnPressed && input.btnPressed[0] && !P.hk) P.nh = 0;\n  if (!P.hk && (P.nh -= d) \u003c= 0) {\n    const s = rnd() \u003c 0.5 ? 1 : -1, ht = floor(46 + rnd() * 26), tx = SX[ht], ty = CY - ht, x0 = 32 + s * 46, y0 = -12, x2 = 32 - s * 52, y2 = ty - 34;\n    P.hk = { t: 0, x0, y0, x2, y2, cx: 2 * tx - (x0 + x2) / 2, cy: 2 * ty - (y0 + y2) / 2, hit: false };\n  }\n  const hk = P.hk;\n  if (hk) {\n    const u = (hk.t += d) / 2.3, v = 1 - u;\n    if (u >= 1) (P.hk = null), (P.nh = 12 + rnd() * 6);\n    else {\n      hk.x = v * v * hk.x0 + 2 * u * v * hk.cx + u * u * hk.x2;\n      hk.y = v * v * hk.y0 + 2 * u * v * hk.cy + u * u * hk.y2;\n      const dx = v * (hk.cx - hk.x0) + u * (hk.x2 - hk.cx), dy = v * (hk.cy - hk.y0) + u * (hk.y2 - hk.cy), l = hyp(dx, dy) || 1;\n      (hk.ux = dx / l), (hk.uy = dy / l), (hk.u = u);\n      if (!hk.hit && u >= 0.5) (hk.hit = true), (P.ring = { x: hk.x, y: hk.y, t: 0 });\n    }\n  }\n  const rg = P.ring;\n  if (rg && (rg.t += d) > 1.4) P.ring = null;\n  const hx = P.hk ? P.hk.x : -999, hy = P.hk ? P.hk.y : -999, rr = rg ? 4 + 26 * rg.t : 0, ra = rg ? 1 - rg.t / 1.4 : 0;\n\n  const { S, V, A, B, TU, RH, DR, JF, JP, OX, OY, VX, VY, BX, BY, Z } = P;\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (S[i] \u003c 0 && i >= M) continue;\n    // Fast out of the mouth, then the steady climb.\n    const s = (S[i] += V[i] * d * (S[i] \u003c 40 ? 1.6 - 0.015 * S[i] : 1));\n    if (s \u003c 0) continue;\n    const hh = min(s, TU[i]), j = min(HM - 2, floor(hh)), f = hh - j;\n    const r = mix(SR[j], SR[j + 1], f), p = mix(SP[j], SP[j + 1], f), ca = cos(p), sa = sin(p), a = A[i], b = B[i] * (1.9 - 0.9 * sm(0, 30, hh));\n    let x = mix(SX[j], SX[j + 1], f) + r * (a * ca - b * sa) + (a \u003c 0 ? -1 : 1) * mix(SS[j], SS[j + 1], f) + 1.1 * sin(T * JF[i] + JP[i]);\n    let y = CY - hh + 0.8 * sin(T * JF[i] * 1.3 + JP[i] * 2);\n    Z[i] = a * sa + b * ca;\n    if (s > TU[i]) {\n      // Off the top of the column in a curve, then straight out sideways.\n      const u = s - TU[i], rho = RH[i], al = min(u / rho, 1.25), st = max(0, u - rho * 1.25);\n      x += DR[i] * (rho * (1 - cos(al)) + st * 0.949);\n      y -= rho * sin(al) + st * 0.315;\n    }\n    // Away from the hawk and the ring it sends out, then back into the stream.\n    let ax = -18 * OX[i] - 6 * VX[i], ay = -18 * OY[i] - 6 * VY[i], dx = x + OX[i] - hx, dy = y + OY[i] - hy, q = dx * dx + dy * dy;\n    if (q \u003c 196) {\n      const e = sqrt(q) + 0.3, g = (1700 * (1 - e / 14) ** 2) / e;\n      (ax += g * dx), (ay += g * dy);\n    }\n    if (rg) {\n      (dx = x + OX[i] - rg.x), (dy = y + OY[i] - rg.y);\n      const e = hyp(dx, dy) + 0.5, wv = e - rr;\n      if (wv * wv \u003c 30) {\n        const g = (480 * ra * exp((-wv * wv) / 6)) / e;\n        (ax += g * dx), (ay += g * dy);\n      }\n    }\n    VX[i] += ax * d;\n    VY[i] += ay * d;\n    OX[i] = cl(OX[i] + VX[i] * d, -16, 16);\n    OY[i] = cl(OY[i] + VY[i] * d, -16, 16);\n    x += OX[i];\n    y += OY[i];\n    if (x \u003c -3 || x > W + 2 || y \u003c -3) {\n      // Out of sight: back to the cave mouth for another trip.\n      S[i] = i \u003c M ? -rnd() * 4 : -1 - rnd() * LT;\n      OX[i] = OY[i] = VX[i] = VY[i] = 0;\n      route(P, i);\n      continue;\n    }\n    BX[i] = x;\n    BY[i] = y;\n  }\n}\n\n// The sky, the moon, the hills and the cave, kept until the hour moves.\nfunction backdrop(P, k) {\n  const B = P.bg, i0 = k \u003c 0.5 ? 0 : 1, f = k \u003c 0.5 ? k * 2 : k * 2 - 1;\n  const L = LAND[i0].map((v, c) => mix(v, LAND[i0 + 1][c], f));\n  const glow = 1 - sm(0.2, 0.9, k), mx = 37, my = 134 - 88 * sm(0.12, 1, k), mr = 8.5, mc = [mix(250, 246, sm(100, 60, my)), mix(184, 240, sm(100, 60, my)), mix(124, 220, sm(100, 60, my))];\n  P.cc = L.slice(9, 12);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / 100, sky = [0, 1, 2].map((c) => mix(ramp(SKIES[i0], g, c), ramp(SKIES[i0 + 1], g, c), f));\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, rid = P.RID[x];\n      let col;\n      if (y \u003c rid) {\n        // Brighter where the sun went down, behind the far mesa.\n        const wg = 1 + 0.2 * glow * exp(-(((x - 50) / 20) ** 2)) * sm(0.3, 1, g);\n        col = sky.map((v) => v * wg);\n        const md = hyp(x + 0.5 - mx, y + 0.5 - my);\n        if (md \u003c mr) {\n          const ma = 0.82 + 0.18 * sm(0.35, 0.65, vn(x * 0.4 + 3, y * 0.4)) - 0.12 * (md / mr) ** 4;\n          col = mc.map((v) => v * ma);\n        } else col = col.map((v, c) => v + mc[c] * sm(0.25, 0.8, k) * (0.22 * exp(-(md - mr) / 4) + 0.1 * exp(-(md - mr) / 14)));\n        if (y >= P.FAR[x]) {\n          const fv = 0.86 + 0.14 * vn(x * 0.3, y * 0.3);\n          col = col.map((v, c) => mix(v, L[3 + c] * fv, 0.8));\n        }\n      } else {\n        // Limestone with darker strata, catching light along the skyline.\n        const n = vn(x * 0.22, y * 0.45), n2 = vn(x * 0.07 + 5, y * 0.16);\n        let v = (0.6 + 0.4 * n + 0.25 * sm(0.55, 0.7, n2)) * (1 + 0.3 * exp(-(y - rid) / 2.5)) * (1 - (0.28 * (y - 92)) / 36);\n        if (((y + 4 * vn(x * 0.05, 7)) % 6) \u003c 1) v *= 0.72;\n        const e = (abs((x + 0.5 - CX) / CW) ** 2.4 + abs((CB - y - 0.5) / CH) ** 2.4) ** (1 / 2.4) * (0.96 + 0.09 * vn(x * 0.7, y * 0.7));\n        // The pale outcrop the cave opens in, cracked, with a ledge on top.\n        const ot = CB - CH - 6 + 2.5 * vn(x * 0.2, 4), ow = 16 + 4 * vn(y * 0.2, 6) - 6 * sm(CB - 3, CB - CH - 6, y);\n        if (y >= ot && y \u003c CB + 1 && abs(x + 0.5 - CX) \u003c ow) {\n          v = (1.05 + 0.3 * n) * (y \u003c ot + 1 ? 1.3 : 1) * (vn(x * 0.9, y * 0.1) \u003c 0.28 ? 0.66 : 1) * (1 - 0.25 * sm(ow - 3, ow, abs(x + 0.5 - CX)));\n          if (e \u003c 1.35) v *= 0.75 + 0.25 * sm(1, 1.35, e);\n        }\n        if (y \u003c CB && e \u003c 1) {\n          // The mouth, black inside and a little lit at the lip.\n          const lip = sm(0.75, 1, e);\n          col = [3 + 12 * lip, 2 + 8 * lip, 3 + 8 * lip];\n        } else {\n          if (y >= CB) v *= (1.1 + 0.25 * hash(x, y)) * (1 - 0.45 * exp(-(((x - CX) / CW) ** 2)) * sm(CB + 5, CB, y));\n          col = L.slice(0, 3).map((c) => c * v);\n        }\n      }\n      (B[o] = col[0]), (B[o + 1] = col[1]), (B[o + 2] = col[2]);\n    }\n  }\n  for (const [bx, by, br] of P.bush)\n    for (let y = floor(by - br); y \u003c= by + br; y++)\n      for (let x = floor(bx - br); x \u003c= bx + br; x++) {\n        const e = hyp(x + 0.5 - bx, (y + 0.5 - by) * 1.2) / br;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || e > 1) continue;\n        const o = (y * W + x) * 3, v = (0.8 + 0.4 * hash(x, y + 50)) * (y + 0.5 \u003c by - br * 0.3 ? 1.45 : 1);\n        for (let c = 0; c \u003c 3; c++) B[o + c] = L[6 + c] * v;\n      }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const k = P.k1, key = round(k * 400);\n  if (key !== P.key) backdrop(P, k), (P.key = key);\n  const F = P.f, D = P.D, T = P.t;\n  F.set(P.bg);\n  // Stars come out as the glow goes, behind the cloud streaks.\n  const sk = sm(0.4, 0.95, k);\n  if (sk > 0)\n    for (const [x, y, b, ph, fq] of P.stars) {\n      if (y >= P.FAR[x] - 1) continue;\n      const o = (y * W + x) * 3, v = sk * b * (0.75 + 0.25 * sin(T * fq + ph));\n      (F[o] += 190 * v), (F[o + 1] += 190 * v), (F[o + 2] += 210 * v);\n    }\n  // High cloud drifts with the wind, lit from below by the sun that has set.\n  const cc = P.cc, sh = floor(P.co);\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = P.CT[y * 128 + ((x - sh) & 127)];\n      if (a \u003c 0.02 || y >= P.FAR[x]) continue;\n      const o = (y * W + x) * 3, g = 0.55 + y / 110, al = 0.55 * a;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], cc[c] * g, al);\n    }\n\n  // Bats and the hawk as darkness laid over the light.\n  D.fill(0);\n  const put = (x, y, a) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) D[y * W + x] += a;\n  };\n  const M = P.S.length;\n  for (let i = 0; i \u003c M; i++) {\n    if (P.S[i] \u003c 0) continue;\n    const x = round(P.BX[i]), y = round(P.BY[i]), near = P.Z[i] > -0.3, q = floor(((T * P.FR[i] + P.FP[i]) % 1) * 3) - 1;\n    if (near) put(x, y, 0.95), put(x - 1, y + q, 0.8), put(x + 1, y + q, 0.8);\n    else put(x, y, 0.6), put(x + (q ? 1 : -1), y + q, 0.35);\n  }\n  const hk = P.hk;\n  if (hk && hk.x !== undefined) {\n    const { x, y, ux, uy, u } = hk, nx = -uy, ny = ux;\n    const seg = (x0, y0, x1, y1, r) => {\n      const n = 2 * hyp(x1 - x0, y1 - y0) + 1;\n      for (let s = 0; s \u003c= n; s++) {\n        const px = mix(x0, x1, s / n), py = mix(y0, y1, s / n);\n        for (let yy = floor(py - r); yy \u003c= py + r; yy++) for (let xx = floor(px - r); xx \u003c= px + r; xx++) if (hyp(xx + 0.5 - px, yy + 0.5 - py) \u003c= r + 0.25) put(xx, yy, 0.6);\n      }\n    };\n    seg(x + 2.2 * ux, y + 2.2 * uy, x - 3 * ux, y - 3 * uy, 1);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux + 0.9 * nx, y - 4.6 * uy + 0.9 * ny, 0.6);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux - 0.9 * nx, y - 4.6 * uy - 0.9 * ny, 0.6);\n    if (u > 0.14 && u \u003c 0.5) {\n      // Wings folded back in the stoop.\n      for (const sg of [1, -1]) seg(x + 0.8 * ux + sg * nx, y + 0.8 * uy + sg * ny, x - 4 * ux + sg * 2.4 * nx, y - 4 * uy + sg * 2.4 * ny, 0.6);\n    } else {\n      // Spread and beating as it climbs away.\n      const fl = 1.6 * sin(hk.t * 15);\n      for (const sg of [1, -1]) {\n        const wx = x + sg * 3.2 * nx + 1.1 * ux, wy = y + sg * 3.2 * ny + 1.1 * uy;\n        seg(x + 0.5 * ux, y + 0.5 * uy, wx, wy, 0.9);\n        seg(wx, wy, x + sg * 6.2 * nx - (0.6 + fl) * ux, y + sg * 6.2 * ny - (0.6 + fl) * uy, 0.55);\n      }\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = min(1, D[i]), b = 1 - a;\n    display.setPixel(i & 63, i >> 6, min(255, F[o] * b + BAT[0] * a) | 0, min(255, F[o + 1] * b + BAT[1] * a) | 0, min(255, F[o + 2] * b + BAT[2] * a) | 0);\n  }\n}\n","layer":{"id":"layer-emergence","type":"code","name":"emergence","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Emergence\n// Family:  mammal\n// Idea:    At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the summer evening emergence of Mexican free-tailed bats (Tadarida brasiliensis) from the caves of the Texas Hill Country\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes.\n// Knob 2: Speed. The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Bats. How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave.\n// Knob 4: Wind. A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right.\n// Buttons: K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The cave mouth: its middle column, floor row, half width and height.\nconst [CX, CB, CW, CH] = [27, 121, 9, 9.5];\n// The row where the bats come out, the most bats the knob asks for, the\n// spine's length in rows, and a bat's climb at Speed 2 in LEDs a second.\nconst [CY, MAXB, HM, V0] = [115, 1400, 118, 28];\n// The column's front at the start, and the length of one trip.\nconst [F0, LT] = [90, 150];\n\n// The sky from the top (0) to the horizon (1): afterglow, late dusk, night.\nconst SKIES = [\n  [[0, 30, 26, 98], [0.2, 66, 46, 138], [0.42, 160, 70, 134], [0.62, 236, 104, 100], [0.8, 255, 146, 72], [1, 255, 196, 112]],\n  [[0, 12, 14, 62], [0.3, 30, 30, 100], [0.6, 94, 52, 116], [0.84, 190, 84, 78], [1, 228, 126, 66]],\n  [[0, 5, 9, 32], [0.45, 10, 18, 56], [0.8, 22, 30, 74], [1, 44, 42, 84]],\n];\n// Rock, far hills, scrub and the lit undersides of the clouds at each hour.\nconst LAND = [\n  [92, 64, 54, 116, 72, 96, 34, 36, 24, 255, 178, 150],\n  [56, 40, 46, 64, 44, 80, 24, 26, 22, 140, 66, 96],\n  [28, 28, 40, 30, 30, 60, 14, 18, 22, 18, 20, 38],\n];\n// A bat against the light, and the hawk.\nconst BAT = [14, 10, 12];\n\nfunction ramp(S, g, c) {\n  let j = 0;\n  while (j \u003c S.length - 2 && g > S[j + 1][0]) j++;\n  const a = S[j], b = S[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, bg: F(N * 3), f: F(N * 3), D: F(N), key: -1, co: 0, hk: null, ring: null, nh: 3.4,\n    S: F(MAXB), V: F(MAXB), A: F(MAXB), B: F(MAXB), TU: F(MAXB), RH: F(MAXB), DR: F(MAXB), JF: F(MAXB), JP: F(MAXB),\n    FR: F(MAXB), FP: F(MAXB), OX: F(MAXB), OY: F(MAXB), VX: F(MAXB), VY: F(MAXB), BX: F(MAXB), BY: F(MAXB), Z: F(MAXB),\n    SX: F(HM), SR: F(HM), SP: F(HM), SS: F(HM), RID: F(W), FAR: F(W), CT: F(128 * 72),\n  });\n  // The near hill climbs over the cave; a flat mesa stands far off on the right.\n  for (let x = 0; x \u003c W; x++) {\n    P.RID[x] = 99 + 0.07 * x - 10 * exp(-(((x - 23) / 15) ** 2)) + 2 * vn(x * 0.13, 3) + 1.2 * vn(x * 0.4, 9) - 1.6;\n    P.FAR[x] = 90 + 2.5 * vn(x * 0.09, 1) + 1.5 * vn(x * 0.3, 2) - 7 * sm(38, 43, x) * (1 - sm(57, 61, x)) - 2 * exp(-(((x - 8) / 9) ** 2));\n  }\n  // Scrub: juniper and mesquite clumps on the slope and along the skyline.\n  P.bush = [];\n  for (let n = 0; n \u003c 34; n++) {\n    const x = rnd() * W, top = n \u003c 10, r = top ? 1 + rnd() * 1.2 : 0.8 + rnd() * 1.3;\n    const y = top ? P.RID[floor(x)] - r * 0.4 : P.RID[floor(x)] + 2 + rnd() * (H - P.RID[floor(x)] - 2);\n    if (((x - CX) / (CW + 3)) ** 2 + ((CB - y) / (CH + 3)) ** 2 > 1 || y > CB + 2) P.bush.push([x, y, r]);\n  }\n  P.stars = Array.from({ length: 80 }, () => [floor(rnd() * W), floor(rnd() * 86), 0.4 + rnd() * 0.6, rnd() * 7, 1 + rnd() * 3]);\n  // Thin streaks of high cloud, wrapping every 128 columns.\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const f = (X) => 0.6 * vn(X * 0.035, y * 0.3) + 0.4 * vn(X * 0.11, y * 0.5 + 7);\n      const band = sm(0, 10, y) * (1 - sm(56, 72, y)) * (0.5 + 0.5 * sin(y * 0.21 + 1));\n      P.CT[y * 128 + x] = sm(0.5, 0.75, mix(f(x), f(x + 128), x / 128)) * band;\n    }\n}\n\n// Where a bat turns off the column, how wide it swings and which way.\nfunction route(P, i) {\n  const top = rnd() \u003c 0.16;\n  P.TU[i] = top ? 98 + 14 * rnd() : P.tu + 13 * rnd();\n  P.RH[i] = top ? 30 : 15 + 7 * rnd();\n  P.DR[i] = rnd() \u003c cl(0.72 + 0.6 * P.w, 0.04, 0.96) ? 1 : -1;\n}\n\nfunction place(P, M) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    const a = rnd() * 2 - 1;\n    P.A[i] = (a \u003c 0 ? -1 : 1) * abs(a) ** 0.8;\n    P.B[i] = (rnd() - 0.5) * 1.2;\n    P.V[i] = V0 * (0.8 + 0.4 * rnd());\n    P.JF[i] = 1.4 + rnd() * 2.4;\n    P.JP[i] = rnd() * 7;\n    P.FR[i] = 4 + rnd() * 2.6;\n    P.FP[i] = rnd();\n    route(P, i);\n    P.S[i] = i \u003c M ? F0 - rnd() * LT : -1 - rnd() * LT;\n  }\n  P.init = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), M = round(cl(k[2], 400, 1400));\n  P.k1 = cl(k[0], 0, 1);\n  P.w = cl(k[3], -1, 1);\n  const T = (P.t += d);\n  // The height where the stream peels off wanders slowly.\n  P.tu = 80 + 8 * sin(T * 0.23 + 1);\n  if (!P.init) place(P, M);\n  const w = P.w, { SX, SR, SP, SS } = P;\n  P.co += d * (1.2 + 4 * w);\n\n  // The spine of the column: it leans downwind, corkscrews and breathes, and\n  // now and then tears in two along its middle and closes again higher up.\n  const Rk = 5 + (5 * (M - 400)) / 1000, ph = (T - 2.4) % 12, split = T \u003c 2.4 ? 0 : sm(0, 1.4, ph) * (1 - sm(4.6, 6.2, ph));\n  for (let h = 0; h \u003c HM; h++) {\n    const A = 1 + 7.5 * sm(4, 92, h);\n    SX[h] = CX + w * (0.17 * h + 0.0009 * h * h) + A * (sin(0.052 * h - 1.3 * T) + 0.4 * sin(0.12 * h + 0.75 * T + 2));\n    SR[h] = Rk * (1.25 - 0.55 * sm(0, 26, h) + 0.3 * sm(20, 50, h)) * (1 + 0.005 * h) * (1 + 0.3 * sin(0.075 * h - 2.1 * T));\n    SP[h] = 0.055 * h - 1.7 * T;\n    SS[h] = h > 18 && h \u003c 96 ? split * 9 * sin((PI * (h - 18)) / 78) : 0;\n  }\n\n  // The hawk: a stoop through the column on a curve, out the other side.\n  if (input.btnPressed && input.btnPressed[0] && !P.hk) P.nh = 0;\n  if (!P.hk && (P.nh -= d) \u003c= 0) {\n    const s = rnd() \u003c 0.5 ? 1 : -1, ht = floor(46 + rnd() * 26), tx = SX[ht], ty = CY - ht, x0 = 32 + s * 46, y0 = -12, x2 = 32 - s * 52, y2 = ty - 34;\n    P.hk = { t: 0, x0, y0, x2, y2, cx: 2 * tx - (x0 + x2) / 2, cy: 2 * ty - (y0 + y2) / 2, hit: false };\n  }\n  const hk = P.hk;\n  if (hk) {\n    const u = (hk.t += d) / 2.3, v = 1 - u;\n    if (u >= 1) (P.hk = null), (P.nh = 12 + rnd() * 6);\n    else {\n      hk.x = v * v * hk.x0 + 2 * u * v * hk.cx + u * u * hk.x2;\n      hk.y = v * v * hk.y0 + 2 * u * v * hk.cy + u * u * hk.y2;\n      const dx = v * (hk.cx - hk.x0) + u * (hk.x2 - hk.cx), dy = v * (hk.cy - hk.y0) + u * (hk.y2 - hk.cy), l = hyp(dx, dy) || 1;\n      (hk.ux = dx / l), (hk.uy = dy / l), (hk.u = u);\n      if (!hk.hit && u >= 0.5) (hk.hit = true), (P.ring = { x: hk.x, y: hk.y, t: 0 });\n    }\n  }\n  const rg = P.ring;\n  if (rg && (rg.t += d) > 1.4) P.ring = null;\n  const hx = P.hk ? P.hk.x : -999, hy = P.hk ? P.hk.y : -999, rr = rg ? 4 + 26 * rg.t : 0, ra = rg ? 1 - rg.t / 1.4 : 0;\n\n  const { S, V, A, B, TU, RH, DR, JF, JP, OX, OY, VX, VY, BX, BY, Z } = P;\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (S[i] \u003c 0 && i >= M) continue;\n    // Fast out of the mouth, then the steady climb.\n    const s = (S[i] += V[i] * d * (S[i] \u003c 40 ? 1.6 - 0.015 * S[i] : 1));\n    if (s \u003c 0) continue;\n    const hh = min(s, TU[i]), j = min(HM - 2, floor(hh)), f = hh - j;\n    const r = mix(SR[j], SR[j + 1], f), p = mix(SP[j], SP[j + 1], f), ca = cos(p), sa = sin(p), a = A[i], b = B[i] * (1.9 - 0.9 * sm(0, 30, hh));\n    let x = mix(SX[j], SX[j + 1], f) + r * (a * ca - b * sa) + (a \u003c 0 ? -1 : 1) * mix(SS[j], SS[j + 1], f) + 1.1 * sin(T * JF[i] + JP[i]);\n    let y = CY - hh + 0.8 * sin(T * JF[i] * 1.3 + JP[i] * 2);\n    Z[i] = a * sa + b * ca;\n    if (s > TU[i]) {\n      // Off the top of the column in a curve, then straight out sideways.\n      const u = s - TU[i], rho = RH[i], al = min(u / rho, 1.25), st = max(0, u - rho * 1.25);\n      x += DR[i] * (rho * (1 - cos(al)) + st * 0.949);\n      y -= rho * sin(al) + st * 0.315;\n    }\n    // Away from the hawk and the ring it sends out, then back into the stream.\n    let ax = -18 * OX[i] - 6 * VX[i], ay = -18 * OY[i] - 6 * VY[i], dx = x + OX[i] - hx, dy = y + OY[i] - hy, q = dx * dx + dy * dy;\n    if (q \u003c 196) {\n      const e = sqrt(q) + 0.3, g = (1700 * (1 - e / 14) ** 2) / e;\n      (ax += g * dx), (ay += g * dy);\n    }\n    if (rg) {\n      (dx = x + OX[i] - rg.x), (dy = y + OY[i] - rg.y);\n      const e = hyp(dx, dy) + 0.5, wv = e - rr;\n      if (wv * wv \u003c 30) {\n        const g = (480 * ra * exp((-wv * wv) / 6)) / e;\n        (ax += g * dx), (ay += g * dy);\n      }\n    }\n    VX[i] += ax * d;\n    VY[i] += ay * d;\n    OX[i] = cl(OX[i] + VX[i] * d, -16, 16);\n    OY[i] = cl(OY[i] + VY[i] * d, -16, 16);\n    x += OX[i];\n    y += OY[i];\n    if (x \u003c -3 || x > W + 2 || y \u003c -3) {\n      // Out of sight: back to the cave mouth for another trip.\n      S[i] = i \u003c M ? -rnd() * 4 : -1 - rnd() * LT;\n      OX[i] = OY[i] = VX[i] = VY[i] = 0;\n      route(P, i);\n      continue;\n    }\n    BX[i] = x;\n    BY[i] = y;\n  }\n}\n\n// The sky, the moon, the hills and the cave, kept until the hour moves.\nfunction backdrop(P, k) {\n  const B = P.bg, i0 = k \u003c 0.5 ? 0 : 1, f = k \u003c 0.5 ? k * 2 : k * 2 - 1;\n  const L = LAND[i0].map((v, c) => mix(v, LAND[i0 + 1][c], f));\n  const glow = 1 - sm(0.2, 0.9, k), mx = 37, my = 134 - 88 * sm(0.12, 1, k), mr = 8.5, mc = [mix(250, 246, sm(100, 60, my)), mix(184, 240, sm(100, 60, my)), mix(124, 220, sm(100, 60, my))];\n  P.cc = L.slice(9, 12);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / 100, sky = [0, 1, 2].map((c) => mix(ramp(SKIES[i0], g, c), ramp(SKIES[i0 + 1], g, c), f));\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, rid = P.RID[x];\n      let col;\n      if (y \u003c rid) {\n        // Brighter where the sun went down, behind the far mesa.\n        const wg = 1 + 0.2 * glow * exp(-(((x - 50) / 20) ** 2)) * sm(0.3, 1, g);\n        col = sky.map((v) => v * wg);\n        const md = hyp(x + 0.5 - mx, y + 0.5 - my);\n        if (md \u003c mr) {\n          const ma = 0.82 + 0.18 * sm(0.35, 0.65, vn(x * 0.4 + 3, y * 0.4)) - 0.12 * (md / mr) ** 4;\n          col = mc.map((v) => v * ma);\n        } else col = col.map((v, c) => v + mc[c] * sm(0.25, 0.8, k) * (0.22 * exp(-(md - mr) / 4) + 0.1 * exp(-(md - mr) / 14)));\n        if (y >= P.FAR[x]) {\n          const fv = 0.86 + 0.14 * vn(x * 0.3, y * 0.3);\n          col = col.map((v, c) => mix(v, L[3 + c] * fv, 0.8));\n        }\n      } else {\n        // Limestone with darker strata, catching light along the skyline.\n        const n = vn(x * 0.22, y * 0.45), n2 = vn(x * 0.07 + 5, y * 0.16);\n        let v = (0.6 + 0.4 * n + 0.25 * sm(0.55, 0.7, n2)) * (1 + 0.3 * exp(-(y - rid) / 2.5)) * (1 - (0.28 * (y - 92)) / 36);\n        if (((y + 4 * vn(x * 0.05, 7)) % 6) \u003c 1) v *= 0.72;\n        const e = (abs((x + 0.5 - CX) / CW) ** 2.4 + abs((CB - y - 0.5) / CH) ** 2.4) ** (1 / 2.4) * (0.96 + 0.09 * vn(x * 0.7, y * 0.7));\n        // The pale outcrop the cave opens in, cracked, with a ledge on top.\n        const ot = CB - CH - 6 + 2.5 * vn(x * 0.2, 4), ow = 16 + 4 * vn(y * 0.2, 6) - 6 * sm(CB - 3, CB - CH - 6, y);\n        if (y >= ot && y \u003c CB + 1 && abs(x + 0.5 - CX) \u003c ow) {\n          v = (1.05 + 0.3 * n) * (y \u003c ot + 1 ? 1.3 : 1) * (vn(x * 0.9, y * 0.1) \u003c 0.28 ? 0.66 : 1) * (1 - 0.25 * sm(ow - 3, ow, abs(x + 0.5 - CX)));\n          if (e \u003c 1.35) v *= 0.75 + 0.25 * sm(1, 1.35, e);\n        }\n        if (y \u003c CB && e \u003c 1) {\n          // The mouth, black inside and a little lit at the lip.\n          const lip = sm(0.75, 1, e);\n          col = [3 + 12 * lip, 2 + 8 * lip, 3 + 8 * lip];\n        } else {\n          if (y >= CB) v *= (1.1 + 0.25 * hash(x, y)) * (1 - 0.45 * exp(-(((x - CX) / CW) ** 2)) * sm(CB + 5, CB, y));\n          col = L.slice(0, 3).map((c) => c * v);\n        }\n      }\n      (B[o] = col[0]), (B[o + 1] = col[1]), (B[o + 2] = col[2]);\n    }\n  }\n  for (const [bx, by, br] of P.bush)\n    for (let y = floor(by - br); y \u003c= by + br; y++)\n      for (let x = floor(bx - br); x \u003c= bx + br; x++) {\n        const e = hyp(x + 0.5 - bx, (y + 0.5 - by) * 1.2) / br;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || e > 1) continue;\n        const o = (y * W + x) * 3, v = (0.8 + 0.4 * hash(x, y + 50)) * (y + 0.5 \u003c by - br * 0.3 ? 1.45 : 1);\n        for (let c = 0; c \u003c 3; c++) B[o + c] = L[6 + c] * v;\n      }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const k = P.k1, key = round(k * 400);\n  if (key !== P.key) backdrop(P, k), (P.key = key);\n  const F = P.f, D = P.D, T = P.t;\n  F.set(P.bg);\n  // Stars come out as the glow goes, behind the cloud streaks.\n  const sk = sm(0.4, 0.95, k);\n  if (sk > 0)\n    for (const [x, y, b, ph, fq] of P.stars) {\n      if (y >= P.FAR[x] - 1) continue;\n      const o = (y * W + x) * 3, v = sk * b * (0.75 + 0.25 * sin(T * fq + ph));\n      (F[o] += 190 * v), (F[o + 1] += 190 * v), (F[o + 2] += 210 * v);\n    }\n  // High cloud drifts with the wind, lit from below by the sun that has set.\n  const cc = P.cc, sh = floor(P.co);\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = P.CT[y * 128 + ((x - sh) & 127)];\n      if (a \u003c 0.02 || y >= P.FAR[x]) continue;\n      const o = (y * W + x) * 3, g = 0.55 + y / 110, al = 0.55 * a;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], cc[c] * g, al);\n    }\n\n  // Bats and the hawk as darkness laid over the light.\n  D.fill(0);\n  const put = (x, y, a) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) D[y * W + x] += a;\n  };\n  const M = P.S.length;\n  for (let i = 0; i \u003c M; i++) {\n    if (P.S[i] \u003c 0) continue;\n    const x = round(P.BX[i]), y = round(P.BY[i]), near = P.Z[i] > -0.3, q = floor(((T * P.FR[i] + P.FP[i]) % 1) * 3) - 1;\n    if (near) put(x, y, 0.95), put(x - 1, y + q, 0.8), put(x + 1, y + q, 0.8);\n    else put(x, y, 0.6), put(x + (q ? 1 : -1), y + q, 0.35);\n  }\n  const hk = P.hk;\n  if (hk && hk.x !== undefined) {\n    const { x, y, ux, uy, u } = hk, nx = -uy, ny = ux;\n    const seg = (x0, y0, x1, y1, r) => {\n      const n = 2 * hyp(x1 - x0, y1 - y0) + 1;\n      for (let s = 0; s \u003c= n; s++) {\n        const px = mix(x0, x1, s / n), py = mix(y0, y1, s / n);\n        for (let yy = floor(py - r); yy \u003c= py + r; yy++) for (let xx = floor(px - r); xx \u003c= px + r; xx++) if (hyp(xx + 0.5 - px, yy + 0.5 - py) \u003c= r + 0.25) put(xx, yy, 0.6);\n      }\n    };\n    seg(x + 2.2 * ux, y + 2.2 * uy, x - 3 * ux, y - 3 * uy, 1);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux + 0.9 * nx, y - 4.6 * uy + 0.9 * ny, 0.6);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux - 0.9 * nx, y - 4.6 * uy - 0.9 * ny, 0.6);\n    if (u > 0.14 && u \u003c 0.5) {\n      // Wings folded back in the stoop.\n      for (const sg of [1, -1]) seg(x + 0.8 * ux + sg * nx, y + 0.8 * uy + sg * ny, x - 4 * ux + sg * 2.4 * nx, y - 4 * uy + sg * 2.4 * ny, 0.6);\n    } else {\n      // Spread and beating as it climbs away.\n      const fl = 1.6 * sin(hk.t * 15);\n      for (const sg of [1, -1]) {\n        const wx = x + sg * 3.2 * nx + 1.1 * ux, wy = y + sg * 3.2 * ny + 1.1 * uy;\n        seg(x + 0.5 * ux, y + 0.5 * uy, wx, wy, 0.9);\n        seg(wx, wy, x + sg * 6.2 * nx - (0.6 + fl) * ux, y + sg * 6.2 * ny - (0.6 + fl) * uy, 0.55);\n      }\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = min(1, D[i]), b = 1 - a;\n    display.setPixel(i & 63, i >> 6, min(255, F[o] * b + BAT[0] * a) | 0, min(255, F[o + 1] * b + BAT[1] * a) | 0, min(255, F[o + 2] * b + BAT[2] * a) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower."},{"name":"Bats","min":400,"max":1400,"about":"How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave."},{"name":"Wind","min":-1,"max":1,"about":"A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right."}],"start":[0,2,400,0.06],"measures":{"motion":1.359,"detail":0.0665,"edges":0.4877,"complexity":1.5604,"coverage":0.9427,"colour":0.3555,"drift":0.0712},"knobResponse":[0.2525,0.0481,0.0669,0.0629]},{"slug":"eruption","title":"Eruption","family":"volcano","round":25,"note":"해 질 녘 성층화산을 세로로 잘라 봐요. 아래 마그마 방에서 떠난 가스 덩어리가 황토와 잿빛 지층 사이 화도를 타고 올라 분화구에서 터지면, 화산탄이 포물선을 그리며 떨어지고 재 기둥은 패널 꼭대기까지 올라 번개를 품어요. K1 이 스트롬볼리식에서 하와이식 용암 분수를 지나 플리니식 재 기둥까지 분출을 바꾸고, K1 을 누르면 큰 폭발이 나요.","idea":"A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.","buttons":"K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.","code":"// ===== Patternflow pattern =====\n// Title:   Eruption\n// Family:  volcano\n// Idea:    A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the cutaway drawing of a stratovolcano in a geology textbook\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1\n//\n// Knob 1: Style. Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks.\n// Knob 2: Speed. At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower.\n// Knob 3: Pressure. How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own.\n// Knob 4: Wind. Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it.\n// Buttons: K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The axis, the crater rim's half width and crest row, the crater floor, the\n// old ground the cone was built on, the chamber's centre row, gravity in rows\n// per second squared, and the cells of lava down each flank.\nconst [C, RIM, RIMY, FLOOR, BASE, CHY, G, NL] = [32, 6, 53, 58, 86, 113, 34, 26];\n// The flank below the rim: steep at the summit, flattening to the panel's edge at row 84.\nconst flank = (dx) => RIMY + 31 * cl((dx - RIM) / 26, 0, 2) ** 0.8;\nconst SURF = new Float32Array(W + 1);\nfor (let x = 0; x \u003c= W; x++) {\n  const dx = abs(x - C);\n  SURF[x] = dx \u003c RIM ? FLOOR - (FLOOR - RIMY) * (dx / RIM) ** 2 : flank(dx) + 1.1 * (vn(x * 0.3, 7.5) - 0.5) * sm(RIM, RIM + 4, dx);\n}\nconst sAt = (X) => ((X = cl(X, 0, W - 0.001)), mix(SURF[floor(X)], SURF[floor(X) + 1], X - floor(X)));\n// The conduit's centre on each row, wandering a little on its way up.\nconst CXA = new Float32Array(H).map((_, y) => C + 1.3 * sin((y - FLOOR) * 0.11));\n// The dike leaves the conduit at row 99 and reaches the right flank here.\nconst VX = CXA[99] + 20;\n// How the older beds arch up over the chamber, column by column.\nconst BEND = new Float32Array(W).map((_, x) => exp(-(((x + 0.5 - C) / 15) ** 2)));\n\n// The cone's beds (lava, ochre tephra, ash, red scoria, pale pumice) and the\n// older rock under it (soil, sandstone, shale, red beds, limestone, dark\n// shale), each as colour index and thickness from the top down.\nconst CC = [[56, 50, 68], [134, 92, 40], [100, 96, 94], [112, 48, 32], [150, 130, 94]];\nconst BC = [[72, 48, 32], [142, 104, 50], [74, 74, 88], [118, 54, 36], [140, 130, 108], [46, 46, 62]];\nconst beds = (seq) => {\n  const out = [];\n  while (out.length \u003c 96) for (let i = 0; i \u003c seq.length; i += 2) for (let j = 0; j \u003c seq[i + 1]; j++) out.push(seq[i]);\n  return out;\n};\nconst CB = beds([0, 2, 1, 2, 2, 1, 0, 3, 3, 2, 1, 3, 4, 1, 0, 2, 2, 2, 3, 2, 0, 3, 1, 2, 2, 2, 4, 2, 0, 2, 3, 3, 1, 2]);\nconst BB = beds([0, 2, 1, 4, 2, 3, 3, 4, 4, 3, 5, 3, 1, 5, 3, 3, 2, 4, 4, 4, 5, 3, 1, 4, 3, 4, 2, 5]);\n\n// Magma from crust-dark red to white heat, as 256 steps over 0..1.25.\nconst LUT = new Float32Array(256 * 3);\n{\n  const K = [[0, 40, 6, 4], [0.2, 120, 14, 4], [0.4, 205, 46, 6], [0.6, 255, 110, 16], [0.78, 255, 182, 48], [0.95, 255, 236, 140], [1.15, 255, 255, 230]];\n  for (let i = 0; i \u003c 256; i++) {\n    const T = (i / 255) * 1.25;\n    let k = 0;\n    while (k \u003c K.length - 2 && T > K[k + 1][0]) k++;\n    const u = cl((T - K[k][0]) / (K[k + 1][0] - K[k][0]), 0, 1);\n    for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(K[k][c + 1], K[k + 1][c + 1], u);\n  }\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n\n// Sky rows: navy overhead, violet, and the last of the dusk low behind the flanks.\nconst SKY = [[0, 6, 9, 38], [40, 18, 20, 64], [64, 48, 26, 80], [86, 150, 64, 70]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), st: new Uint8ClampedArray(N * 3), kind: new Uint8Array(N), off: F32(N), gr: F32(N), vg: F32(N), sd: F32(N), A: F32(N), hot: F32(N),\n    t: 0, warm: 0, next: 0.5, slugs: [], parts: [], puffs: [], bolts: [], bub: [], glow: 0, fl: 0, flx: C, fly: 30, pr: 0.5, boost: 0, nf: 0, nv: 0, ndg: 0, npd: 1.5, lake: 0.5, pend: 0,\n    lv: [0, 1].map(() => ({ v: F32(NL), T: F32(NL), ph: 0 })),\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, dx = abs(X - C), s = sAt(X);\n    S.vg[i] = exp(-hypot(X - C, (Y - FLOOR + 1) * 0.8) / 15);\n    S.gr[i] = [0.86, 0.95, 1, 1.08][floor(hash(x, y + 77) * 4)];\n    S.sd[i] = Y - s;\n    if (Y \u003c s) {\n      // Sky, with a few stars high up.\n      let k = 0;\n      while (k \u003c SKY.length - 2 && Y > SKY[k + 1][0]) k++;\n      const u = sm(SKY[k][0], SKY[k + 1][0], Y), st = y \u003c 48 && hash(x, y) \u003c 0.014 ? 50 + 110 * hash(y, x) : 0;\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = mix(SKY[k][c + 1], SKY[k + 1][c + 1], u) + st * (c ? 1 : 0.9);\n    } else if (Y \u003c BASE - 3 * exp(-(((X - C) / 15) ** 2))) {\n      // The cone: beds laid parallel to the flanks, peaked over the old summit the crater blew away.\n      S.kind[i] = 1;\n      const ls = dx >= RIM ? flank(dx) : RIMY - (RIM - sqrt(dx * dx + 0.6)) * 0.8;\n      const d = cl(floor(Y - ls + 1.6 * (vn(x * 0.16, y * 0.09 + 30) - 0.5)), 0, 95), c0 = Y - s \u003c 1.4 ? [52, 44, 50] : CC[CB[d]];\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = c0[c] * S.gr[i];\n    } else {\n      S.kind[i] = 2;\n      S.off[i] = 1.6 * (vn(x * 0.11, y * 0.07 + 60) - 0.5);\n    }\n  }\n  for (let k = 0; k \u003c 14; k++) S.bub.push(bubble(0));\n}\n\n// A gas bubble somewhere low in the chamber.\nfunction bubble(P) {\n  return { x: C + (rnd() - 0.5) * (16 + 7 * P) * 1.4, y: CHY + rnd() * (7.5 + 2.5 * P) * 0.6 };\n}\n\nfunction puff(S, x, y, vy, r, a, tv, ny, fade, hot = 0.6, g = 0) {\n  // The oldest puff gives way when there are too many.\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vx: 0, vy, rx: r, ry: r, a, tv, ny, fade, hot, g, u: 22 });\n}\n\nfunction bolt(S) {\n  const c = S.puffs.filter((p) => !p.g && p.y \u003c 50 && p.rx > 3.5 && p.a > 0.25);\n  if (!c.length) return;\n  const p = c[floor(rnd() * c.length)], pts = [];\n  let x = p.x + (rnd() - 0.5) * p.rx, y = p.y - p.ry * 0.4;\n  const n = 5 + floor(rnd() * 8);\n  for (let j = 0; j \u003c n; j++) pts.push([x, y]), (x += (rnd() - 0.5) * 4), (y += 1.5 + rnd() * 1.5);\n  const m = pts[floor(n / 2)], br = [m];\n  for (let j = 0, bx = m[0], by = m[1], s = rnd() \u003c 0.5 ? -1 : 1; j \u003c 3; j++) br.push([(bx += s * (1 + rnd() * 2)), (by += 1 + rnd())]);\n  S.bolts.push({ pts, br, life: 0.24 });\n  [S.flx, S.fly] = pts[floor(n / 2)];\n}\n\n// A burst in the crater, its bombs, its ash and its light.\nfunction burst(S, str, haw) {\n  S.glow = min(2.2, S.glow + 0.9 * str);\n  S.boost += haw * 1.5;\n  // Bombs fly wide; a fan of finer spatter goes up steeper and falls back round the crater.\n  const nb = round((14 + 20 * str) * (1 - 0.6 * haw));\n  for (let n = 0; n \u003c nb; n++) {\n    const b = n % 3 ? 0 : 1, v = (b ? 24 + 22 * rnd() : 20 + 20 * rnd()) * sqrt(str) * (1 + 0.25 * S.P), a = (rnd() - 0.5) * (b ? 1.15 : 0.6);\n    fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, v, a, b);\n  }\n  for (let n = 0; n \u003c 2 + (str > 0.8 ? 1 : 0); n++) puff(S, C + (rnd() - 0.5) * 3, FLOOR - 3 - n * 3, -(14 + 10 * str), 3.5 + rnd(), 1 + 0.3 * str, -8, 2 + rnd() * 12, 0.04);\n  // Most bursts charge the fresh ash enough for a bolt a moment later.\n  if (rnd() \u003c 0.25 + 0.5 * str) S.pend = 0.5 + 0.4 * rnd();\n}\n\n// One bomb (b 1) or blob of spatter thrown from x, y at speed v, a radians off vertical.\nconst fling = (S, x, y, v, a, b = 0, vx = 0) => S.parts.push({ x, y, vx: v * sin(a) + vx, vy: -v * cos(a), T: 1, m: 0, b });\n\n// Lava poured into one flank's cell k: volume v at temperature T.\nfunction pour(L, k, v, T = 1) {\n  k = cl(k, 0, NL - 1);\n  L.T[k] = (L.T[k] * L.v[k] + T * v) / (L.v[k] + v + 1e-6);\n  L.v[k] += v;\n}\n\nfunction step(S, d) {\n  const s1 = S.k1, P = S.P, w = S.wind;\n  const strom = 1 - sm(0.2, 0.5, s1), haw = sm(0.15, 0.45, s1) * (1 - sm(0.6, 0.85, s1)), plin = sm(0.55, 0.9, s1);\n  Object.assign(S, { strom, haw, plin });\n  S.t += d;\n  const ax = 16 + 7 * P, ay = 7.5 + 2.5 * P, top = CHY - ay;\n  // Pressure builds in the chamber, and a slug of gas leaves for the conduit when it is ready.\n  S.pr = min(1, S.pr + d * (0.3 + 0.4 * P));\n  // A Plinian column draws on the chamber in long surges instead.\n  if (plin > 0) S.pr = mix(S.pr, 0.5 + 0.5 * sin(S.t * 1.6), min(1, plin * d * 3));\n  if ((S.next -= d) \u003c= 0 && plin \u003c 0.8) {\n    S.slugs.push({ y: top + 1, str: 0.6 + 0.4 * rnd() + 0.3 * P });\n    S.pr = max(0, S.pr - 0.6);\n    S.next = mix((1.3 + 1.7 * rnd()) / (1 + 0.7 * P), 0.5 + 0.5 * rnd(), max(haw, plin));\n  }\n  for (const g of S.slugs) {\n    // It speeds up as it expands near the top.\n    const u = cl((g.y - FLOOR) / (top - FLOOR), 0, 1);\n    g.y -= (16 + 30 * (1 - u)) * (1 + 0.5 * P) * d;\n    if (g.y \u003c= FLOOR + 1) (g.done = 1), burst(S, g.str * (strom + 0.35 * haw + 0.25 * plin), haw);\n  }\n  S.slugs = S.slugs.filter((g) => !g.done);\n  // Bubbles rise through the chamber and gather under its roof by the conduit's mouth.\n  for (const b of S.bub) {\n    const ex = C - b.x, v = (3 + 4 * P + 3 * S.pr) * d;\n    b.x += cl(ex, -1, 1) * v * 0.5 + sin(S.t * 2.3 + b.y) * 0.3 * v;\n    b.y -= v;\n    if (((b.x - C) / ax) ** 2 + ((b.y - CHY) / ay) ** 2 > 0.8) Object.assign(b, bubble(P));\n  }\n  // The fountain: a steady jet of spatter in Hawaiian style, surging after each slug,\n  // and a smaller one from the flank vent once the dike has broken out.\n  S.nf += d * haw * (60 + 50 * min(1, S.boost)) * (1 + 0.5 * P);\n  for (; S.nf >= 1; S.nf--) fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, (24 + 16 * rnd()) * (0.85 + 0.3 * P) * (1 + 0.3 * min(1, S.boost)), (rnd() - 0.5) * 0.45);\n  S.nv += d * 14 * sm(0.88, 1, P);\n  for (; S.nv >= 1; S.nv--) fling(S, VX + (rnd() - 0.5) * 2, sAt(VX) - 1, 10 + 8 * rnd(), (rnd() - 0.5) * 0.6, 0, 3);\n  S.boost = max(0, S.boost - d * 1.2);\n  // Gas and ash: a thin plume always, a roaring column in Plinian style.\n  S.ndg += d * (2.2 + 1.5 * haw + 11 * plin * (0.4 + S.pr));\n  for (; S.ndg >= 1; S.ndg--)\n    if (rnd() \u003c plin) puff(S, C + (rnd() - 0.5) * 5, FLOOR - 3, -(30 + 14 * rnd()), 5.5, 1, -20, 3 + 7 * rnd(), 0.04, 0.4);\n    else puff(S, C + (rnd() - 0.5) * 3, FLOOR - 2, -7, 3, 0.45 + 0.2 * haw, -6, 4 + 14 * rnd(), 0.045, 0.3);\n  // Plinian: part of the column collapses and pours down a flank.\n  if (plin > 0.3 && (S.npd -= d * plin) \u003c= 0) {\n    S.npd = 2 + 2 * rnd();\n    const g = rnd() \u003c 0.5 ? -1 : 1;\n    for (let n = 0; n \u003c 4; n++) puff(S, C + g * (RIM + 2 * n), RIMY + 2 * n, 0, 4, 1, 0, 0, 0.05, 1.2, g), (S.puffs[S.puffs.length - 1].u = 24 - 3 * n);\n  }\n  for (const p of S.puffs) {\n    if (p.g) {\n      // An avalanche of hot ash hugging the flank, slowing as it spreads, then lifting off.\n      p.x += p.g * p.u * d;\n      p.u = max(3, p.u - 3 * d);\n      p.rx += d * 2.5;\n      p.ry = min(8, p.ry + d * 1.5);\n      p.y = sAt(p.x) - p.ry * 0.35;\n      if (p.u \u003c 5 || p.x \u003c 1 || p.x > W - 1) Object.assign(p, { g: 0, vy: -3, tv: -5, ny: 14 + 10 * rnd(), fade: 0.06 });\n    } else {\n      const rise = sm(p.ny - 2, p.ny + 14, p.y);\n      p.vy += (p.tv * rise - p.vy) * 1.6 * d;\n      p.y += p.vy * d;\n      p.rx = min(30, p.rx + d * (0.8 + 0.12 * abs(p.vy) + 3.5 * (1 - rise) * p.a));\n      p.ry = min(12, p.ry + d * (0.6 + 0.05 * abs(p.vy)));\n    }\n    p.x += (p.vx + w * (4 + 18 * cl(1 - p.y / 60, 0, 1))) * d;\n    p.a -= d * p.fade;\n    p.hot = max(0, p.hot - d * 0.7);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.04 && p.x + p.rx > -4 && p.x - p.rx \u003c W + 4 && p.y + p.ry > -8);\n  // Bombs and spatter fly, land, roll and cool.\n  for (const q of S.parts) {\n    if (!q.m) {\n      q.vy += G * d;\n      q.vx += w * 7 * d;\n      q.x += q.vx * d;\n      q.y += q.vy * d;\n      q.T -= d * (q.b ? 0.16 : 0.35);\n      if (q.vy > 0 && q.y >= sAt(q.x)) {\n        const dx = abs(q.x - C);\n        if (dx \u003c RIM - 0.5) q.dead = 1;\n        else if (!q.b) (q.dead = 1), pour(S.lv[q.x > C ? 1 : 0], floor(dx - RIM), 0.05, max(0.5, q.T));\n        else Object.assign(q, { m: 1, u: 5 + abs(q.vx) * 0.3, s: q.x > C ? 1 : -1 });\n      }\n    } else {\n      q.x += q.s * q.u * d;\n      q.u = max(0, q.u - 6 * d);\n      q.y = sAt(q.x) - 0.5;\n      q.T -= d * 0.3;\n    }\n    if (q.T \u003c= 0 || q.x \u003c -2 || q.x > W + 2) q.dead = 1;\n  }\n  S.parts = S.parts.filter((q) => !q.dead);\n  if (S.parts.length > 400) S.parts.splice(0, S.parts.length - 400);\n  // Lava over the rim and down the flanks, slower as it cools and crusts.\n  const eff = (0.45 + 0.6 * P + 1.2 * haw) * (1 - 0.6 * plin);\n  for (let s = 0; s \u003c 2; s++) {\n    const L = S.lv[s], v = L.v, T = L.T;\n    pour(L, 0, eff * (s ? 0.55 : 1) * d);\n    if (s && P > 0.88) pour(L, floor(VX - C - RIM), 1.4 * sm(0.88, 1, P) * d);\n    L.ph += d * (1 + 2 * T[2]);\n    for (let k = NL - 1; k >= 0; k--) {\n      const f = min(v[k], v[k] * (0.2 + 2.2 * T[k] * T[k]) * (k \u003c 6 ? 1.6 : 0.9) * d);\n      v[k] -= f;\n      if (k \u003c NL - 1) pour(L, k + 1, f, T[k]);\n      T[k] = max(0, T[k] - d * (0.03 + 0.015 / (v[k] + 0.2)));\n      if (T[k] \u003c 0.1) v[k] = max(0, v[k] - d * 0.03);\n    }\n  }\n  S.lake = mix(S.lake, (1.2 + 1.2 * P + 4 * haw) * (1 - plin), min(1, d * 2));\n  // Lightning in the ash.\n  if (rnd() \u003c d * (0.2 + 1.3 * plin + 0.4 * S.glow)) bolt(S);\n  if (S.pend > 0 && (S.pend -= d) \u003c= 0) bolt(S);\n  for (const b of S.bolts) b.life -= d;\n  S.bolts = S.bolts.filter((b) => b.life > 0);\n  S.fl = S.bolts.reduce((m, b) => max(m, floor(b.life * 40) % 3 === 1 ? 0.35 : 1), 0);\n  S.glow *= exp(-d * 2.5);\n}\n\n// K1 tap: the big one.\nfunction blast(S) {\n  S.slugs.length = 0;\n  S.pr = 0;\n  burst(S, 2.4, 0);\n  S.glow = 2.2;\n  for (let n = 0; n \u003c 5; n++) puff(S, C + (rnd() - 0.5) * 6, FLOOR - 4, -(26 + 12 * rnd()), 4 + rnd() * 2, 1, -10, 2 + 8 * rnd(), 0.04, 1);\n  for (let s = 0; s \u003c 2; s++) pour(S.lv[s], 0, 1.6);\n  S.pend = 0.15;\n  S.next = 1.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2;\n  S.k1 = cl(k[0], 0, 1);\n  S.P = cl(k[2], 0, 1);\n  S.wind = cl(k[3], -1, 1);\n  // The volcano has been going for a while before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    for (let n = round(60 + 120 * sp); n-- > 0; ) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) blast(S);\n  step(S, cl(dt || 0, 0, 0.1) * sp);\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst lc = (T) => ((T = lut(T)), [LUT[T], LUT[T + 1], LUT[T + 2]]);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 === undefined) return;\n  F = S.f;\n  const { P, t, haw, plin, kind, st, A, hot, vg, wind } = S;\n  const ax = 16 + 7 * P + 0.8 * S.pr, ay = 7.5 + 2.5 * P + 0.5 * S.pr, top = CHY - ay, bamp = 3 + 6 * P + 1.4 * S.pr, bend = BEND.map((v) => v * bamp);\n  const L = 0.3 + 0.7 * S.glow + 0.6 * haw + 0.5 * plin, fl = S.fl;\n\n  // Sky, cone and the older beds bent up over the chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * 3, kd = kind[i];\n    if (kd === 0) {\n      const g = L * vg[i];\n      (F[o] = st[o] + 150 * g + 7 * fl), (F[o + 1] = st[o + 1] + 48 * g + 8 * fl), (F[o + 2] = st[o + 2] + 16 * g + 18 * fl);\n    } else if (kd === 1) {\n      const g = L * vg[i] * (S.sd[i] \u003c 2.5 ? 1 : 0.2);\n      (F[o] = st[o] + 120 * g), (F[o + 1] = st[o + 1] + 40 * g), (F[o + 2] = st[o + 2] + 10 * g);\n    } else {\n      const d = cl((i >> 6) + 0.5 - BASE + bend[i & 63] + S.off[i], 0, 94), d0 = floor(d), u = d - d0;\n      const a = BC[BB[d0]], b = BC[BB[d0 + 1]], gr = S.gr[i];\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(a[c], b[c], u) * gr;\n    }\n  }\n\n  // The magma: chamber, the feeder below it, the conduit, the dike and the sill, with the rock round them glowing.\n  const glowRock = (o, g) => {\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [210, 50, 16][c], min(0.85, g));\n  };\n  const melt = (o, T) => {\n    const k = lut(T);\n    (F[o] = LUT[k]), (F[o + 1] = LUT[k + 1]), (F[o + 2] = LUT[k + 2]);\n  };\n  for (let y = max(BASE, floor(top - 6)); y \u003c H; y++)\n    for (let x = max(0, floor(C - ax - 7)); x \u003c min(W, C + ax + 7); x++) {\n      const X = x + 0.5, Y = y + 0.5, e = hypot((X - C) / ax, (Y - CHY) / ay), o = (y * W + x) * 3;\n      if (e \u003c 1) {\n        const T = 0.28 + 0.38 * vn(X * 0.17 + 0.7 * sin(Y * 0.17 + t * 0.5), Y * 0.3 + t * 1.2) + 0.2 * (1 - e * e) - 0.25 * sm(0.72, 1, e) + 0.16 * S.pr + 0.1 * P + 0.35 * exp(-((X - C) ** 2) / 9 - ((Y - top) ** 2) / 6) * S.pr;\n        melt(o, T);\n      } else if (Y > CHY && abs(X - C - 1.5 * sin(y * 0.2)) \u003c 1.3) melt(o, 0.38 + 0.08 * sin(y * 0.5 - t * 3));\n      else glowRock(o, exp(-((e - 1) * ay) / 2.4) * (0.5 + 0.4 * S.pr + 0.2 * P));\n    }\n  for (const b of S.bub) put(b.x, b.y, lc(1.05));\n  const slug = (y) => S.slugs.reduce((m, g) => max(m, exp(-(((y - g.y) / 2.6) ** 2))), 0);\n  for (let y = FLOOR; y \u003c= top + 1; y++) {\n    const cx = CXA[y], sg = slug(y), hw = 1.35 + 1.3 * sg + 0.6 * plin;\n    for (let x = max(0, floor(cx - hw - 5)); x \u003c min(W, cx + hw + 5); x++) {\n      const o = (y * W + x) * 3, q = abs(x + 0.5 - cx);\n      if (q \u003c hw) {\n        const ves = hash(x, floor(y + t * 14)) \u003c 0.12 ? 0.25 : 0;\n        melt(o, mix(0.58 + 0.12 * sin(y * 0.45 + t * 7) + ves + 0.5 * sg, 0.5 + 0.6 * vn(x * 0.6, (y + t * 45) * 0.25), plin));\n      } else if (kind[y * W + x]) glowRock(o, exp(-(q - hw) / 1.5) * (0.4 + 0.5 * sg + 0.3 * plin));\n    }\n  }\n  // The dike towards the right flank, and the sill along the beds on the left.\n  const dk = sm(0.2, 0.9, P), sl = sm(0.45, 1, P);\n  for (let j = 0; j \u003c 46 * dk; j++) {\n    const u = j / 46, x = CXA[99] + (VX - CXA[99]) * u, y = 99 - (99 - sAt(VX)) * u;\n    put(x, y, lc(0.55 + 0.1 * sin(j * 0.6 - t * 5)));\n    put(x + 1, y, [210, 50, 16], 0.45);\n  }\n  for (let j = 0; j \u003c 20 * sl; j++) {\n    const x = CXA[93] - 2 - j, y = 93 + 0.006 * j * j + 2 * sin(j * 0.15);\n    put(x, y, lc(0.5 + 0.08 * sin(j * 0.7 + t * 4)));\n    if (j \u003c 14 * sl) put(x, y + 1, lc(0.42));\n  }\n\n  // The ash: every puff summed, then shaded over the sky.\n  A.fill(0);\n  hot.fill(0);\n  for (const p of S.puffs) {\n    const x0 = max(0, floor(p.x - p.rx)), x1 = min(W - 1, floor(p.x + p.rx)), y0 = max(0, floor(p.y - p.ry)), y1 = min(H - 1, floor(p.y + p.ry));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = (y + 0.5 - p.y) / p.ry;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = (x + 0.5 - p.x) / p.rx, q = 1 - dx * dx - dy * dy;\n        if (q > 0) (A[y * W + x] += p.a * q * q), (hot[y * W + x] += p.hot * q * q);\n      }\n    }\n  }\n  // Ash falling out of the plume aloft, slanting downwind as it falls.\n  const col = new Float32Array(W);\n  for (const p of S.puffs)\n    if (!p.g && p.y \u003c 45 && p.rx > 4) for (let x = max(0, floor(p.x - p.rx)); x \u003c min(W, p.x + p.rx); x++) col[x] += p.a * max(0, 1 - ((x + 0.5 - p.x) / p.rx) ** 2);\n  for (let y = 14; y \u003c 84; y++) {\n    const f = 0.11 * sm(12, 30, y) * (1 - sm(56, 84, y)), sh = wind * (y - 14) * 0.55;\n    for (let x = 0; x \u003c W; x++) {\n      const c = col[cl(round(x - sh), 0, W - 1)];\n      if (c > 0.05) A[y * W + x] += f * min(1.5, c) * (0.3 + vn(x * 0.9, y * 0.12 - t * 3));\n    }\n  }\n  const { flx, fly } = S;\n  for (let i = 0; i \u003c N; i++) {\n    if (A[i] \u003c 0.01 || kind[i]) continue;\n    const x = i & 63, y = i >> 6, o = i * 3, tex = vn(x * 0.22 - t * wind * 0.5, y * 0.2 + t * 0.7);\n    const al = min(0.94, 1 - exp(-A[i] * (1.3 + 1.7 * tex))), sh = 0.55 + 0.6 * tex, vl = 0.8 * L * vg[i] + 0.6 * hot[i], fy = fl * exp(-hypot(x - flx, (y - fly) * 0.7) / 16);\n    F[o] = mix(F[o], 104 * sh + 255 * vl + 130 * fy, al);\n    F[o + 1] = mix(F[o + 1], 98 * sh + 100 * vl + 140 * fy, al);\n    F[o + 2] = mix(F[o + 2], 100 * sh + 34 * vl + 210 * fy, al);\n  }\n\n  // The crater: the vent, the lava lake, and the flash of a burst.\n  const ll = FLOOR + 0.6 - S.lake;\n  for (let y = RIMY - 1; y \u003c= FLOOR + 1; y++)\n    for (let x = C - RIM; x \u003c C + RIM; x++) {\n      const i = y * W + x;\n      if (!kind[i] && y + 0.5 > ll) melt(i * 3, 0.55 + 0.3 * vn(x * 0.6 + t, y * 0.8) + 0.2 * S.glow - 0.12 * (y + 0.5 - ll \u003c 1 ? 1 : 0));\n    }\n  if (S.glow > 0.02)\n    for (let y = FLOOR - 14; y \u003c= FLOOR + 3; y++)\n      for (let x = C - 12; x \u003c C + 12; x++) {\n        const o = (y * W + x) * 3, g = S.glow * exp(-hypot(x + 0.5 - C, y + 0.5 - FLOOR + 1) / 3.2);\n        (F[o] += 255 * g), (F[o + 1] += 190 * g), (F[o + 2] += 90 * g);\n      }\n\n  // Lava down the flanks: hot and bright near the rim, crusting dark as it cools.\n  for (let s = 0; s \u003c 2; s++) {\n    const { v, T, ph } = S.lv[s];\n    for (let k = 0; k \u003c NL; k++) {\n      if (v[k] \u003c 0.01) continue;\n      const x = s ? C + RIM + k : C - RIM - 1 - k, y0 = min(SURF[x], SURF[x + 1]), y1 = max(SURF[x], SURF[x + 1]), th = min(4, v[k] * 3.2), al = min(1, v[k] * 8);\n      // Its glow on the air just above it.\n      for (let j = 1; j \u003c= 3; j++) put(x, y0 - th - j, [255, 90, 20], (0.35 * al * T[k]) / j);\n      for (let y = floor(y0 - th); y \u003c= floor(y1); y++) {\n        const n = vn(k * 0.7 - ph * 2, y * 0.6), tt = T[k], c = lc(0.22 + 0.62 * tt + 0.18 * n);\n        const cr = max(sm(0.75, 0.25, tt) * sm(0.3, 0.6, vn(k * 1.3 - ph * 2, y * 1.1 + 9)), sm(0.12, 0.02, tt)), g = S.gr[(y * W + x) & 8191];\n        put(x, y, [mix(c[0], 64 * g, cr), mix(c[1], 52 * g, cr), mix(c[2], 54 * g, cr)], al);\n      }\n    }\n  }\n\n  // Bombs and spatter, with a short trail while they fly.\n  for (const q of S.parts) {\n    const c = lc(0.25 + 0.85 * q.T);\n    if (!q.m) for (let j = 1; j \u003c= 3; j++) put(q.x - q.vx * 0.022 * j, q.y - q.vy * 0.022 * j, c, 0.5 / j);\n    put(q.x, q.y, c);\n    if (q.b && q.T > 0.3) put(q.x + 1, q.y, c, 0.6);\n  }\n\n  // Lightning.\n  for (const b of S.bolts) {\n    if (floor(b.life * 40) % 3 === 1) continue;\n    for (const pts of [b.pts, b.br])\n      for (let j = 1; j \u003c pts.length; j++) {\n        const [x0, y0] = pts[j - 1], [x1, y1] = pts[j], m = max(abs(x1 - x0), abs(y1 - y0)) * 1.5 + 1;\n        for (let u = 0; u \u003c= m; u++) {\n          const x = mix(x0, x1, u / m), y = mix(y0, y1, u / m);\n          put(x - 1, y, [120, 110, 255], 0.35), put(x + 1, y, [120, 110, 255], 0.35), put(x, y, [240, 240, 255]);\n        }\n      }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-eruption","type":"code","name":"eruption","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Eruption\n// Family:  volcano\n// Idea:    A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the cutaway drawing of a stratovolcano in a geology textbook\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1\n//\n// Knob 1: Style. Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks.\n// Knob 2: Speed. At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower.\n// Knob 3: Pressure. How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own.\n// Knob 4: Wind. Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it.\n// Buttons: K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The axis, the crater rim's half width and crest row, the crater floor, the\n// old ground the cone was built on, the chamber's centre row, gravity in rows\n// per second squared, and the cells of lava down each flank.\nconst [C, RIM, RIMY, FLOOR, BASE, CHY, G, NL] = [32, 6, 53, 58, 86, 113, 34, 26];\n// The flank below the rim: steep at the summit, flattening to the panel's edge at row 84.\nconst flank = (dx) => RIMY + 31 * cl((dx - RIM) / 26, 0, 2) ** 0.8;\nconst SURF = new Float32Array(W + 1);\nfor (let x = 0; x \u003c= W; x++) {\n  const dx = abs(x - C);\n  SURF[x] = dx \u003c RIM ? FLOOR - (FLOOR - RIMY) * (dx / RIM) ** 2 : flank(dx) + 1.1 * (vn(x * 0.3, 7.5) - 0.5) * sm(RIM, RIM + 4, dx);\n}\nconst sAt = (X) => ((X = cl(X, 0, W - 0.001)), mix(SURF[floor(X)], SURF[floor(X) + 1], X - floor(X)));\n// The conduit's centre on each row, wandering a little on its way up.\nconst CXA = new Float32Array(H).map((_, y) => C + 1.3 * sin((y - FLOOR) * 0.11));\n// The dike leaves the conduit at row 99 and reaches the right flank here.\nconst VX = CXA[99] + 20;\n// How the older beds arch up over the chamber, column by column.\nconst BEND = new Float32Array(W).map((_, x) => exp(-(((x + 0.5 - C) / 15) ** 2)));\n\n// The cone's beds (lava, ochre tephra, ash, red scoria, pale pumice) and the\n// older rock under it (soil, sandstone, shale, red beds, limestone, dark\n// shale), each as colour index and thickness from the top down.\nconst CC = [[56, 50, 68], [134, 92, 40], [100, 96, 94], [112, 48, 32], [150, 130, 94]];\nconst BC = [[72, 48, 32], [142, 104, 50], [74, 74, 88], [118, 54, 36], [140, 130, 108], [46, 46, 62]];\nconst beds = (seq) => {\n  const out = [];\n  while (out.length \u003c 96) for (let i = 0; i \u003c seq.length; i += 2) for (let j = 0; j \u003c seq[i + 1]; j++) out.push(seq[i]);\n  return out;\n};\nconst CB = beds([0, 2, 1, 2, 2, 1, 0, 3, 3, 2, 1, 3, 4, 1, 0, 2, 2, 2, 3, 2, 0, 3, 1, 2, 2, 2, 4, 2, 0, 2, 3, 3, 1, 2]);\nconst BB = beds([0, 2, 1, 4, 2, 3, 3, 4, 4, 3, 5, 3, 1, 5, 3, 3, 2, 4, 4, 4, 5, 3, 1, 4, 3, 4, 2, 5]);\n\n// Magma from crust-dark red to white heat, as 256 steps over 0..1.25.\nconst LUT = new Float32Array(256 * 3);\n{\n  const K = [[0, 40, 6, 4], [0.2, 120, 14, 4], [0.4, 205, 46, 6], [0.6, 255, 110, 16], [0.78, 255, 182, 48], [0.95, 255, 236, 140], [1.15, 255, 255, 230]];\n  for (let i = 0; i \u003c 256; i++) {\n    const T = (i / 255) * 1.25;\n    let k = 0;\n    while (k \u003c K.length - 2 && T > K[k + 1][0]) k++;\n    const u = cl((T - K[k][0]) / (K[k + 1][0] - K[k][0]), 0, 1);\n    for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(K[k][c + 1], K[k + 1][c + 1], u);\n  }\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n\n// Sky rows: navy overhead, violet, and the last of the dusk low behind the flanks.\nconst SKY = [[0, 6, 9, 38], [40, 18, 20, 64], [64, 48, 26, 80], [86, 150, 64, 70]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), st: new Uint8ClampedArray(N * 3), kind: new Uint8Array(N), off: F32(N), gr: F32(N), vg: F32(N), sd: F32(N), A: F32(N), hot: F32(N),\n    t: 0, warm: 0, next: 0.5, slugs: [], parts: [], puffs: [], bolts: [], bub: [], glow: 0, fl: 0, flx: C, fly: 30, pr: 0.5, boost: 0, nf: 0, nv: 0, ndg: 0, npd: 1.5, lake: 0.5, pend: 0,\n    lv: [0, 1].map(() => ({ v: F32(NL), T: F32(NL), ph: 0 })),\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, dx = abs(X - C), s = sAt(X);\n    S.vg[i] = exp(-hypot(X - C, (Y - FLOOR + 1) * 0.8) / 15);\n    S.gr[i] = [0.86, 0.95, 1, 1.08][floor(hash(x, y + 77) * 4)];\n    S.sd[i] = Y - s;\n    if (Y \u003c s) {\n      // Sky, with a few stars high up.\n      let k = 0;\n      while (k \u003c SKY.length - 2 && Y > SKY[k + 1][0]) k++;\n      const u = sm(SKY[k][0], SKY[k + 1][0], Y), st = y \u003c 48 && hash(x, y) \u003c 0.014 ? 50 + 110 * hash(y, x) : 0;\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = mix(SKY[k][c + 1], SKY[k + 1][c + 1], u) + st * (c ? 1 : 0.9);\n    } else if (Y \u003c BASE - 3 * exp(-(((X - C) / 15) ** 2))) {\n      // The cone: beds laid parallel to the flanks, peaked over the old summit the crater blew away.\n      S.kind[i] = 1;\n      const ls = dx >= RIM ? flank(dx) : RIMY - (RIM - sqrt(dx * dx + 0.6)) * 0.8;\n      const d = cl(floor(Y - ls + 1.6 * (vn(x * 0.16, y * 0.09 + 30) - 0.5)), 0, 95), c0 = Y - s \u003c 1.4 ? [52, 44, 50] : CC[CB[d]];\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = c0[c] * S.gr[i];\n    } else {\n      S.kind[i] = 2;\n      S.off[i] = 1.6 * (vn(x * 0.11, y * 0.07 + 60) - 0.5);\n    }\n  }\n  for (let k = 0; k \u003c 14; k++) S.bub.push(bubble(0));\n}\n\n// A gas bubble somewhere low in the chamber.\nfunction bubble(P) {\n  return { x: C + (rnd() - 0.5) * (16 + 7 * P) * 1.4, y: CHY + rnd() * (7.5 + 2.5 * P) * 0.6 };\n}\n\nfunction puff(S, x, y, vy, r, a, tv, ny, fade, hot = 0.6, g = 0) {\n  // The oldest puff gives way when there are too many.\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vx: 0, vy, rx: r, ry: r, a, tv, ny, fade, hot, g, u: 22 });\n}\n\nfunction bolt(S) {\n  const c = S.puffs.filter((p) => !p.g && p.y \u003c 50 && p.rx > 3.5 && p.a > 0.25);\n  if (!c.length) return;\n  const p = c[floor(rnd() * c.length)], pts = [];\n  let x = p.x + (rnd() - 0.5) * p.rx, y = p.y - p.ry * 0.4;\n  const n = 5 + floor(rnd() * 8);\n  for (let j = 0; j \u003c n; j++) pts.push([x, y]), (x += (rnd() - 0.5) * 4), (y += 1.5 + rnd() * 1.5);\n  const m = pts[floor(n / 2)], br = [m];\n  for (let j = 0, bx = m[0], by = m[1], s = rnd() \u003c 0.5 ? -1 : 1; j \u003c 3; j++) br.push([(bx += s * (1 + rnd() * 2)), (by += 1 + rnd())]);\n  S.bolts.push({ pts, br, life: 0.24 });\n  [S.flx, S.fly] = pts[floor(n / 2)];\n}\n\n// A burst in the crater, its bombs, its ash and its light.\nfunction burst(S, str, haw) {\n  S.glow = min(2.2, S.glow + 0.9 * str);\n  S.boost += haw * 1.5;\n  // Bombs fly wide; a fan of finer spatter goes up steeper and falls back round the crater.\n  const nb = round((14 + 20 * str) * (1 - 0.6 * haw));\n  for (let n = 0; n \u003c nb; n++) {\n    const b = n % 3 ? 0 : 1, v = (b ? 24 + 22 * rnd() : 20 + 20 * rnd()) * sqrt(str) * (1 + 0.25 * S.P), a = (rnd() - 0.5) * (b ? 1.15 : 0.6);\n    fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, v, a, b);\n  }\n  for (let n = 0; n \u003c 2 + (str > 0.8 ? 1 : 0); n++) puff(S, C + (rnd() - 0.5) * 3, FLOOR - 3 - n * 3, -(14 + 10 * str), 3.5 + rnd(), 1 + 0.3 * str, -8, 2 + rnd() * 12, 0.04);\n  // Most bursts charge the fresh ash enough for a bolt a moment later.\n  if (rnd() \u003c 0.25 + 0.5 * str) S.pend = 0.5 + 0.4 * rnd();\n}\n\n// One bomb (b 1) or blob of spatter thrown from x, y at speed v, a radians off vertical.\nconst fling = (S, x, y, v, a, b = 0, vx = 0) => S.parts.push({ x, y, vx: v * sin(a) + vx, vy: -v * cos(a), T: 1, m: 0, b });\n\n// Lava poured into one flank's cell k: volume v at temperature T.\nfunction pour(L, k, v, T = 1) {\n  k = cl(k, 0, NL - 1);\n  L.T[k] = (L.T[k] * L.v[k] + T * v) / (L.v[k] + v + 1e-6);\n  L.v[k] += v;\n}\n\nfunction step(S, d) {\n  const s1 = S.k1, P = S.P, w = S.wind;\n  const strom = 1 - sm(0.2, 0.5, s1), haw = sm(0.15, 0.45, s1) * (1 - sm(0.6, 0.85, s1)), plin = sm(0.55, 0.9, s1);\n  Object.assign(S, { strom, haw, plin });\n  S.t += d;\n  const ax = 16 + 7 * P, ay = 7.5 + 2.5 * P, top = CHY - ay;\n  // Pressure builds in the chamber, and a slug of gas leaves for the conduit when it is ready.\n  S.pr = min(1, S.pr + d * (0.3 + 0.4 * P));\n  // A Plinian column draws on the chamber in long surges instead.\n  if (plin > 0) S.pr = mix(S.pr, 0.5 + 0.5 * sin(S.t * 1.6), min(1, plin * d * 3));\n  if ((S.next -= d) \u003c= 0 && plin \u003c 0.8) {\n    S.slugs.push({ y: top + 1, str: 0.6 + 0.4 * rnd() + 0.3 * P });\n    S.pr = max(0, S.pr - 0.6);\n    S.next = mix((1.3 + 1.7 * rnd()) / (1 + 0.7 * P), 0.5 + 0.5 * rnd(), max(haw, plin));\n  }\n  for (const g of S.slugs) {\n    // It speeds up as it expands near the top.\n    const u = cl((g.y - FLOOR) / (top - FLOOR), 0, 1);\n    g.y -= (16 + 30 * (1 - u)) * (1 + 0.5 * P) * d;\n    if (g.y \u003c= FLOOR + 1) (g.done = 1), burst(S, g.str * (strom + 0.35 * haw + 0.25 * plin), haw);\n  }\n  S.slugs = S.slugs.filter((g) => !g.done);\n  // Bubbles rise through the chamber and gather under its roof by the conduit's mouth.\n  for (const b of S.bub) {\n    const ex = C - b.x, v = (3 + 4 * P + 3 * S.pr) * d;\n    b.x += cl(ex, -1, 1) * v * 0.5 + sin(S.t * 2.3 + b.y) * 0.3 * v;\n    b.y -= v;\n    if (((b.x - C) / ax) ** 2 + ((b.y - CHY) / ay) ** 2 > 0.8) Object.assign(b, bubble(P));\n  }\n  // The fountain: a steady jet of spatter in Hawaiian style, surging after each slug,\n  // and a smaller one from the flank vent once the dike has broken out.\n  S.nf += d * haw * (60 + 50 * min(1, S.boost)) * (1 + 0.5 * P);\n  for (; S.nf >= 1; S.nf--) fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, (24 + 16 * rnd()) * (0.85 + 0.3 * P) * (1 + 0.3 * min(1, S.boost)), (rnd() - 0.5) * 0.45);\n  S.nv += d * 14 * sm(0.88, 1, P);\n  for (; S.nv >= 1; S.nv--) fling(S, VX + (rnd() - 0.5) * 2, sAt(VX) - 1, 10 + 8 * rnd(), (rnd() - 0.5) * 0.6, 0, 3);\n  S.boost = max(0, S.boost - d * 1.2);\n  // Gas and ash: a thin plume always, a roaring column in Plinian style.\n  S.ndg += d * (2.2 + 1.5 * haw + 11 * plin * (0.4 + S.pr));\n  for (; S.ndg >= 1; S.ndg--)\n    if (rnd() \u003c plin) puff(S, C + (rnd() - 0.5) * 5, FLOOR - 3, -(30 + 14 * rnd()), 5.5, 1, -20, 3 + 7 * rnd(), 0.04, 0.4);\n    else puff(S, C + (rnd() - 0.5) * 3, FLOOR - 2, -7, 3, 0.45 + 0.2 * haw, -6, 4 + 14 * rnd(), 0.045, 0.3);\n  // Plinian: part of the column collapses and pours down a flank.\n  if (plin > 0.3 && (S.npd -= d * plin) \u003c= 0) {\n    S.npd = 2 + 2 * rnd();\n    const g = rnd() \u003c 0.5 ? -1 : 1;\n    for (let n = 0; n \u003c 4; n++) puff(S, C + g * (RIM + 2 * n), RIMY + 2 * n, 0, 4, 1, 0, 0, 0.05, 1.2, g), (S.puffs[S.puffs.length - 1].u = 24 - 3 * n);\n  }\n  for (const p of S.puffs) {\n    if (p.g) {\n      // An avalanche of hot ash hugging the flank, slowing as it spreads, then lifting off.\n      p.x += p.g * p.u * d;\n      p.u = max(3, p.u - 3 * d);\n      p.rx += d * 2.5;\n      p.ry = min(8, p.ry + d * 1.5);\n      p.y = sAt(p.x) - p.ry * 0.35;\n      if (p.u \u003c 5 || p.x \u003c 1 || p.x > W - 1) Object.assign(p, { g: 0, vy: -3, tv: -5, ny: 14 + 10 * rnd(), fade: 0.06 });\n    } else {\n      const rise = sm(p.ny - 2, p.ny + 14, p.y);\n      p.vy += (p.tv * rise - p.vy) * 1.6 * d;\n      p.y += p.vy * d;\n      p.rx = min(30, p.rx + d * (0.8 + 0.12 * abs(p.vy) + 3.5 * (1 - rise) * p.a));\n      p.ry = min(12, p.ry + d * (0.6 + 0.05 * abs(p.vy)));\n    }\n    p.x += (p.vx + w * (4 + 18 * cl(1 - p.y / 60, 0, 1))) * d;\n    p.a -= d * p.fade;\n    p.hot = max(0, p.hot - d * 0.7);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.04 && p.x + p.rx > -4 && p.x - p.rx \u003c W + 4 && p.y + p.ry > -8);\n  // Bombs and spatter fly, land, roll and cool.\n  for (const q of S.parts) {\n    if (!q.m) {\n      q.vy += G * d;\n      q.vx += w * 7 * d;\n      q.x += q.vx * d;\n      q.y += q.vy * d;\n      q.T -= d * (q.b ? 0.16 : 0.35);\n      if (q.vy > 0 && q.y >= sAt(q.x)) {\n        const dx = abs(q.x - C);\n        if (dx \u003c RIM - 0.5) q.dead = 1;\n        else if (!q.b) (q.dead = 1), pour(S.lv[q.x > C ? 1 : 0], floor(dx - RIM), 0.05, max(0.5, q.T));\n        else Object.assign(q, { m: 1, u: 5 + abs(q.vx) * 0.3, s: q.x > C ? 1 : -1 });\n      }\n    } else {\n      q.x += q.s * q.u * d;\n      q.u = max(0, q.u - 6 * d);\n      q.y = sAt(q.x) - 0.5;\n      q.T -= d * 0.3;\n    }\n    if (q.T \u003c= 0 || q.x \u003c -2 || q.x > W + 2) q.dead = 1;\n  }\n  S.parts = S.parts.filter((q) => !q.dead);\n  if (S.parts.length > 400) S.parts.splice(0, S.parts.length - 400);\n  // Lava over the rim and down the flanks, slower as it cools and crusts.\n  const eff = (0.45 + 0.6 * P + 1.2 * haw) * (1 - 0.6 * plin);\n  for (let s = 0; s \u003c 2; s++) {\n    const L = S.lv[s], v = L.v, T = L.T;\n    pour(L, 0, eff * (s ? 0.55 : 1) * d);\n    if (s && P > 0.88) pour(L, floor(VX - C - RIM), 1.4 * sm(0.88, 1, P) * d);\n    L.ph += d * (1 + 2 * T[2]);\n    for (let k = NL - 1; k >= 0; k--) {\n      const f = min(v[k], v[k] * (0.2 + 2.2 * T[k] * T[k]) * (k \u003c 6 ? 1.6 : 0.9) * d);\n      v[k] -= f;\n      if (k \u003c NL - 1) pour(L, k + 1, f, T[k]);\n      T[k] = max(0, T[k] - d * (0.03 + 0.015 / (v[k] + 0.2)));\n      if (T[k] \u003c 0.1) v[k] = max(0, v[k] - d * 0.03);\n    }\n  }\n  S.lake = mix(S.lake, (1.2 + 1.2 * P + 4 * haw) * (1 - plin), min(1, d * 2));\n  // Lightning in the ash.\n  if (rnd() \u003c d * (0.2 + 1.3 * plin + 0.4 * S.glow)) bolt(S);\n  if (S.pend > 0 && (S.pend -= d) \u003c= 0) bolt(S);\n  for (const b of S.bolts) b.life -= d;\n  S.bolts = S.bolts.filter((b) => b.life > 0);\n  S.fl = S.bolts.reduce((m, b) => max(m, floor(b.life * 40) % 3 === 1 ? 0.35 : 1), 0);\n  S.glow *= exp(-d * 2.5);\n}\n\n// K1 tap: the big one.\nfunction blast(S) {\n  S.slugs.length = 0;\n  S.pr = 0;\n  burst(S, 2.4, 0);\n  S.glow = 2.2;\n  for (let n = 0; n \u003c 5; n++) puff(S, C + (rnd() - 0.5) * 6, FLOOR - 4, -(26 + 12 * rnd()), 4 + rnd() * 2, 1, -10, 2 + 8 * rnd(), 0.04, 1);\n  for (let s = 0; s \u003c 2; s++) pour(S.lv[s], 0, 1.6);\n  S.pend = 0.15;\n  S.next = 1.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2;\n  S.k1 = cl(k[0], 0, 1);\n  S.P = cl(k[2], 0, 1);\n  S.wind = cl(k[3], -1, 1);\n  // The volcano has been going for a while before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    for (let n = round(60 + 120 * sp); n-- > 0; ) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) blast(S);\n  step(S, cl(dt || 0, 0, 0.1) * sp);\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst lc = (T) => ((T = lut(T)), [LUT[T], LUT[T + 1], LUT[T + 2]]);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 === undefined) return;\n  F = S.f;\n  const { P, t, haw, plin, kind, st, A, hot, vg, wind } = S;\n  const ax = 16 + 7 * P + 0.8 * S.pr, ay = 7.5 + 2.5 * P + 0.5 * S.pr, top = CHY - ay, bamp = 3 + 6 * P + 1.4 * S.pr, bend = BEND.map((v) => v * bamp);\n  const L = 0.3 + 0.7 * S.glow + 0.6 * haw + 0.5 * plin, fl = S.fl;\n\n  // Sky, cone and the older beds bent up over the chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * 3, kd = kind[i];\n    if (kd === 0) {\n      const g = L * vg[i];\n      (F[o] = st[o] + 150 * g + 7 * fl), (F[o + 1] = st[o + 1] + 48 * g + 8 * fl), (F[o + 2] = st[o + 2] + 16 * g + 18 * fl);\n    } else if (kd === 1) {\n      const g = L * vg[i] * (S.sd[i] \u003c 2.5 ? 1 : 0.2);\n      (F[o] = st[o] + 120 * g), (F[o + 1] = st[o + 1] + 40 * g), (F[o + 2] = st[o + 2] + 10 * g);\n    } else {\n      const d = cl((i >> 6) + 0.5 - BASE + bend[i & 63] + S.off[i], 0, 94), d0 = floor(d), u = d - d0;\n      const a = BC[BB[d0]], b = BC[BB[d0 + 1]], gr = S.gr[i];\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(a[c], b[c], u) * gr;\n    }\n  }\n\n  // The magma: chamber, the feeder below it, the conduit, the dike and the sill, with the rock round them glowing.\n  const glowRock = (o, g) => {\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [210, 50, 16][c], min(0.85, g));\n  };\n  const melt = (o, T) => {\n    const k = lut(T);\n    (F[o] = LUT[k]), (F[o + 1] = LUT[k + 1]), (F[o + 2] = LUT[k + 2]);\n  };\n  for (let y = max(BASE, floor(top - 6)); y \u003c H; y++)\n    for (let x = max(0, floor(C - ax - 7)); x \u003c min(W, C + ax + 7); x++) {\n      const X = x + 0.5, Y = y + 0.5, e = hypot((X - C) / ax, (Y - CHY) / ay), o = (y * W + x) * 3;\n      if (e \u003c 1) {\n        const T = 0.28 + 0.38 * vn(X * 0.17 + 0.7 * sin(Y * 0.17 + t * 0.5), Y * 0.3 + t * 1.2) + 0.2 * (1 - e * e) - 0.25 * sm(0.72, 1, e) + 0.16 * S.pr + 0.1 * P + 0.35 * exp(-((X - C) ** 2) / 9 - ((Y - top) ** 2) / 6) * S.pr;\n        melt(o, T);\n      } else if (Y > CHY && abs(X - C - 1.5 * sin(y * 0.2)) \u003c 1.3) melt(o, 0.38 + 0.08 * sin(y * 0.5 - t * 3));\n      else glowRock(o, exp(-((e - 1) * ay) / 2.4) * (0.5 + 0.4 * S.pr + 0.2 * P));\n    }\n  for (const b of S.bub) put(b.x, b.y, lc(1.05));\n  const slug = (y) => S.slugs.reduce((m, g) => max(m, exp(-(((y - g.y) / 2.6) ** 2))), 0);\n  for (let y = FLOOR; y \u003c= top + 1; y++) {\n    const cx = CXA[y], sg = slug(y), hw = 1.35 + 1.3 * sg + 0.6 * plin;\n    for (let x = max(0, floor(cx - hw - 5)); x \u003c min(W, cx + hw + 5); x++) {\n      const o = (y * W + x) * 3, q = abs(x + 0.5 - cx);\n      if (q \u003c hw) {\n        const ves = hash(x, floor(y + t * 14)) \u003c 0.12 ? 0.25 : 0;\n        melt(o, mix(0.58 + 0.12 * sin(y * 0.45 + t * 7) + ves + 0.5 * sg, 0.5 + 0.6 * vn(x * 0.6, (y + t * 45) * 0.25), plin));\n      } else if (kind[y * W + x]) glowRock(o, exp(-(q - hw) / 1.5) * (0.4 + 0.5 * sg + 0.3 * plin));\n    }\n  }\n  // The dike towards the right flank, and the sill along the beds on the left.\n  const dk = sm(0.2, 0.9, P), sl = sm(0.45, 1, P);\n  for (let j = 0; j \u003c 46 * dk; j++) {\n    const u = j / 46, x = CXA[99] + (VX - CXA[99]) * u, y = 99 - (99 - sAt(VX)) * u;\n    put(x, y, lc(0.55 + 0.1 * sin(j * 0.6 - t * 5)));\n    put(x + 1, y, [210, 50, 16], 0.45);\n  }\n  for (let j = 0; j \u003c 20 * sl; j++) {\n    const x = CXA[93] - 2 - j, y = 93 + 0.006 * j * j + 2 * sin(j * 0.15);\n    put(x, y, lc(0.5 + 0.08 * sin(j * 0.7 + t * 4)));\n    if (j \u003c 14 * sl) put(x, y + 1, lc(0.42));\n  }\n\n  // The ash: every puff summed, then shaded over the sky.\n  A.fill(0);\n  hot.fill(0);\n  for (const p of S.puffs) {\n    const x0 = max(0, floor(p.x - p.rx)), x1 = min(W - 1, floor(p.x + p.rx)), y0 = max(0, floor(p.y - p.ry)), y1 = min(H - 1, floor(p.y + p.ry));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = (y + 0.5 - p.y) / p.ry;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = (x + 0.5 - p.x) / p.rx, q = 1 - dx * dx - dy * dy;\n        if (q > 0) (A[y * W + x] += p.a * q * q), (hot[y * W + x] += p.hot * q * q);\n      }\n    }\n  }\n  // Ash falling out of the plume aloft, slanting downwind as it falls.\n  const col = new Float32Array(W);\n  for (const p of S.puffs)\n    if (!p.g && p.y \u003c 45 && p.rx > 4) for (let x = max(0, floor(p.x - p.rx)); x \u003c min(W, p.x + p.rx); x++) col[x] += p.a * max(0, 1 - ((x + 0.5 - p.x) / p.rx) ** 2);\n  for (let y = 14; y \u003c 84; y++) {\n    const f = 0.11 * sm(12, 30, y) * (1 - sm(56, 84, y)), sh = wind * (y - 14) * 0.55;\n    for (let x = 0; x \u003c W; x++) {\n      const c = col[cl(round(x - sh), 0, W - 1)];\n      if (c > 0.05) A[y * W + x] += f * min(1.5, c) * (0.3 + vn(x * 0.9, y * 0.12 - t * 3));\n    }\n  }\n  const { flx, fly } = S;\n  for (let i = 0; i \u003c N; i++) {\n    if (A[i] \u003c 0.01 || kind[i]) continue;\n    const x = i & 63, y = i >> 6, o = i * 3, tex = vn(x * 0.22 - t * wind * 0.5, y * 0.2 + t * 0.7);\n    const al = min(0.94, 1 - exp(-A[i] * (1.3 + 1.7 * tex))), sh = 0.55 + 0.6 * tex, vl = 0.8 * L * vg[i] + 0.6 * hot[i], fy = fl * exp(-hypot(x - flx, (y - fly) * 0.7) / 16);\n    F[o] = mix(F[o], 104 * sh + 255 * vl + 130 * fy, al);\n    F[o + 1] = mix(F[o + 1], 98 * sh + 100 * vl + 140 * fy, al);\n    F[o + 2] = mix(F[o + 2], 100 * sh + 34 * vl + 210 * fy, al);\n  }\n\n  // The crater: the vent, the lava lake, and the flash of a burst.\n  const ll = FLOOR + 0.6 - S.lake;\n  for (let y = RIMY - 1; y \u003c= FLOOR + 1; y++)\n    for (let x = C - RIM; x \u003c C + RIM; x++) {\n      const i = y * W + x;\n      if (!kind[i] && y + 0.5 > ll) melt(i * 3, 0.55 + 0.3 * vn(x * 0.6 + t, y * 0.8) + 0.2 * S.glow - 0.12 * (y + 0.5 - ll \u003c 1 ? 1 : 0));\n    }\n  if (S.glow > 0.02)\n    for (let y = FLOOR - 14; y \u003c= FLOOR + 3; y++)\n      for (let x = C - 12; x \u003c C + 12; x++) {\n        const o = (y * W + x) * 3, g = S.glow * exp(-hypot(x + 0.5 - C, y + 0.5 - FLOOR + 1) / 3.2);\n        (F[o] += 255 * g), (F[o + 1] += 190 * g), (F[o + 2] += 90 * g);\n      }\n\n  // Lava down the flanks: hot and bright near the rim, crusting dark as it cools.\n  for (let s = 0; s \u003c 2; s++) {\n    const { v, T, ph } = S.lv[s];\n    for (let k = 0; k \u003c NL; k++) {\n      if (v[k] \u003c 0.01) continue;\n      const x = s ? C + RIM + k : C - RIM - 1 - k, y0 = min(SURF[x], SURF[x + 1]), y1 = max(SURF[x], SURF[x + 1]), th = min(4, v[k] * 3.2), al = min(1, v[k] * 8);\n      // Its glow on the air just above it.\n      for (let j = 1; j \u003c= 3; j++) put(x, y0 - th - j, [255, 90, 20], (0.35 * al * T[k]) / j);\n      for (let y = floor(y0 - th); y \u003c= floor(y1); y++) {\n        const n = vn(k * 0.7 - ph * 2, y * 0.6), tt = T[k], c = lc(0.22 + 0.62 * tt + 0.18 * n);\n        const cr = max(sm(0.75, 0.25, tt) * sm(0.3, 0.6, vn(k * 1.3 - ph * 2, y * 1.1 + 9)), sm(0.12, 0.02, tt)), g = S.gr[(y * W + x) & 8191];\n        put(x, y, [mix(c[0], 64 * g, cr), mix(c[1], 52 * g, cr), mix(c[2], 54 * g, cr)], al);\n      }\n    }\n  }\n\n  // Bombs and spatter, with a short trail while they fly.\n  for (const q of S.parts) {\n    const c = lc(0.25 + 0.85 * q.T);\n    if (!q.m) for (let j = 1; j \u003c= 3; j++) put(q.x - q.vx * 0.022 * j, q.y - q.vy * 0.022 * j, c, 0.5 / j);\n    put(q.x, q.y, c);\n    if (q.b && q.T > 0.3) put(q.x + 1, q.y, c, 0.6);\n  }\n\n  // Lightning.\n  for (const b of S.bolts) {\n    if (floor(b.life * 40) % 3 === 1) continue;\n    for (const pts of [b.pts, b.br])\n      for (let j = 1; j \u003c pts.length; j++) {\n        const [x0, y0] = pts[j - 1], [x1, y1] = pts[j], m = max(abs(x1 - x0), abs(y1 - y0)) * 1.5 + 1;\n        for (let u = 0; u \u003c= m; u++) {\n          const x = mix(x0, x1, u / m), y = mix(y0, y1, u / m);\n          put(x - 1, y, [120, 110, 255], 0.35), put(x + 1, y, [120, 110, 255], 0.35), put(x, y, [240, 240, 255]);\n        }\n      }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Style","min":0,"max":1,"about":"Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower."},{"name":"Pressure","min":0,"max":1,"about":"How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own."},{"name":"Wind","min":-1,"max":1,"about":"Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.3557,"detail":0.0525,"edges":0.231,"complexity":2.1856,"coverage":1,"colour":0.2971,"drift":0.0844},"knobResponse":[0.082,0.0543,0.0923,0.0549]},{"slug":"essence-drop","title":"Essence Drop","family":"cosmetic","round":33,"note":"맑은 물빛 에센스에 짙은 색 방울이 느린 화면으로 떨어져 손가락 아홉 개의 왕관을 세우고, 파인 자리가 닫히며 솟은 기둥 끝에서 구슬이 떨어져 나가요. 방울의 짙은 색은 소용돌이 고리로 말려 가라앉으며 웅덩이에 풀려요. K3 을 올리면 왕관과 구슬이 사라지고 젤처럼 무겁게 잠기며, K1 은 색상환을 다 돌고 누르면 방울이 바로 떨어져요.","idea":"In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.","buttons":"K1 tap lets a drop fall now.","code":"// ===== Patternflow pattern =====\n// Title:   Essence Drop\n// Family:  cosmetic\n// Idea:    In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after slow-motion film of a drop falling into clear essence\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1\n//\n// Knob 1: Hue. The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker.\n// Knob 2: Speed. How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower.\n// Knob 3: Viscosity. Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume.\n// Knob 4: Size. The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs.\n// Buttons: K1 tap lets a drop fall now.\n\nconst W = 64, H = 128, N = W * H, Y0 = 66;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k) => {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n};\n// Light comes from the upper left.\nconst LX = -0.55, LY = -0.835;\nconst MAXP = 2000;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, visc: 0, size: 0.06, next: 0.4, T: 0,\n    ev: [], dye: new Float32Array(N), deep: new Float32Array(N), dt2: new Float32Array(N), sdf: new Float32Array(N), rip: new Float32Array(W),\n    px: new Float32Array(MAXP), py: new Float32Array(MAXP), pa: new Float32Array(MAXP), pe: new Int32Array(MAXP), np: 0,\n    circ: [], caps: [], pal: new Float32Array(13), palKey: NaN,\n  };\n}\n\nfunction spawn(S) {\n  const r = 3.4 + 4.2 * S.size, R = Math.random;\n  const x = 32 + (R() - 0.5) * 10;\n  // Nine fingers round the front of the crown, each its own length, and the\n  // beads they throw each their own speed, so the spray fans out.\n  const fing = [];\n  for (let j = 0; j \u003c 9; j++) fing.push([PI * (j + 0.5 + 0.35 * (R() - 0.5)) / 9, 0.6 + 0.65 * R(), 7 + 6 * R(), 4 + 5 * R()]);\n  S.ev.push({ id: (S.idn = (S.idn || 0) + 1), x, r, te: 0, Tf: 1.4 * (1 + 0.5 * S.visc), dyed: false, ga: 0, a: 0, yv: 0, fing });\n  if (S.ev.length > 4) S.ev.shift();\n}\n\n// The phases of one splash, as functions of tau, the seconds since impact on\n// the film's own clock: the cavity opens and shuts by 0.9, the crown stands\n// by 0.35 and falls by 1.1, the jet rises from 0.85 and is gone by 2.35.\nconst TC = 0.9, TCR = 1.1, TJ0 = 0.85, TJ = 1.5, TPINCH = 0.42;\nfunction slowOf(v) {\n  return 1 + 1.3 * v;\n}\n\n// The dye: when the drop goes under, a blob of particles is set in the\n// velocity field of a vortex pair, the cross-section of a vortex ring. The\n// pair moves down at U = G / (4 pi a), slowing as G decays and widening as it\n// slows, and the particles wind into its two curls and trail a stem.\nfunction stepDye(S, dts) {\n  const v = S.visc;\n  for (const e of S.ev) {\n    const tau = (e.te - e.Tf) / slowOf(v);\n    if (tau \u003c 0.08) continue;\n    if (!e.dyed) {\n      e.dyed = true;\n      e.a = 1.7 * e.r;\n      e.yv = Y0 + 2 * e.r;\n      e.ga = 4 * PI * e.a * (13 + 1.4 * e.r) * (1 - 0.55 * v);\n      const n = floor(160 + 40 * e.r);\n      for (let i = 0; i \u003c n; i++) {\n        if (S.np >= MAXP) break;\n        const ang = Math.random() * 2 * PI, rad = sqrt(Math.random()) * 1.9 * e.r;\n        S.px[S.np] = e.x + cos(ang) * rad;\n        S.py[S.np] = Y0 + 1.6 * e.r + sin(ang) * rad * 0.8;\n        S.pa[S.np] = 0;\n        S.pe[S.np] = e.id;\n        S.np++;\n      }\n    }\n    // Viscosity eats the ring: its spin decays over 2.8 s in water, 1.5 s in gel.\n    e.ga *= exp(-dts / (2.8 - 1.3 * v));\n    const U = e.ga / (4 * PI * e.a);\n    e.yv += U * dts;\n    e.a += 0.3 * e.r * dts * (1 - 0.6 * v);\n  }\n  const dye = S.dye;\n  let k = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    let e = null;\n    for (const f of S.ev) if (f.id === S.pe[i]) e = f;\n    let x = S.px[i], y = S.py[i];\n    const age = (S.pa[i] += dts);\n    if (!e || age > 12) continue;\n    // Two Lamb-Oseen cores, opposite spins, the fluid between them going down.\n    let ux = 0, uy = 0;\n    const d2 = (0.85 * e.a) ** 2;\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const dx = x - (e.x + s * e.a), dy = y - e.yv, g = (-s * e.ga) / (2 * PI * (dx * dx + dy * dy + d2));\n      ux += -g * dy;\n      uy += g * dx;\n    }\n    x += (ux + (Math.random() - 0.5) * 7) * dts;\n    y += (uy + (Math.random() - 0.5) * 7) * dts;\n    x = cl(x, 0.5, W - 1.5);\n    y = cl(y, Y0 + 1, H - 1.5);\n    // Each particle leaves colour where it passes, less as it ages, so the\n    // curls show where it went and the old colour spreads out.\n    const w = dts * 1.4 * exp(-age / 5), ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix;\n    dye[o] += w * (1 - fx) * (1 - fy);\n    dye[o + 1] += w * fx * (1 - fy);\n    dye[o + W] += w * (1 - fx) * fy;\n    dye[o + W + 1] += w * fx * fy;\n    S.px[k] = x;\n    S.py[k] = y;\n    S.pa[k] = age;\n    S.pe[k] = S.pe[i];\n    k++;\n  }\n  S.np = k;\n  // Diffusion and a slow fade into the pool: a gel holds the colour longer.\n  const t2 = S.dt2, kap = cl(dts * (1.6 - 1.1 * v), 0, 0.24), fade = exp(-dts / (7 + 5 * v));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, c = dye[i];\n      const l = (x > 0 ? dye[i - 1] : c) + (x \u003c W - 1 ? dye[i + 1] : c) + (y > 0 ? dye[i - W] : c) + (y \u003c H - 1 ? dye[i + W] : c) - 4 * c;\n      t2[i] = (c + kap * l) * fade;\n    }\n  dye.set(t2);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.visc = cl(k[2] || 0, 0, 1);\n  S.size = cl(k[3], 0, 1);\n  const dts = (d * S.speed) / 2;\n  S.T += dts;\n  if (input.btnPressed && input.btnPressed[0]) spawn(S);\n  S.next -= dts;\n  if (S.next \u003c= 0) {\n    spawn(S);\n    S.next += 5.5 * (1 + 0.4 * S.visc);\n  }\n  for (const e of S.ev) e.te += dts;\n  S.ev = S.ev.filter((e) => e.te - e.Tf \u003c 16 * slowOf(S.visc));\n  stepDye(S, dts);\n}\n\n// Shapes for the frame: circles and tapered capsules, each smooth-joined to\n// the pool so a bead touching the surface melts into it.\nfunction build(S) {\n  const C = (S.circ = []), K = (S.caps = []), v = S.visc, rip = S.rip;\n  rip.fill(0);\n  S.cav = [];\n  S.crowns = [];\n  for (const e of S.ev) {\n    const r = e.r, x0 = e.x;\n    if (e.te \u003c e.Tf) {\n      // Falling, faster and faster. The drop hangs from a thread out of the\n      // top; the thread stretches, breaks (later the thicker the essence) and\n      // its lower end balls up into a small bead that trails the drop.\n      const u = e.te / e.Tf, yb = -2 * r - 4 + (Y0 + 2 * r + 4) * (0.3 * u + 0.7 * u * u), cy = yb - r;\n      C.push([x0, cy, r, 1.4, 1]);\n      const tb = 0.45 + 0.42 * v;\n      if (u \u003c tb) K.push([x0, cy - 0.5 * r, x0, -6, 0.42 * r, 0.12 * r * (1 + v), 1.6, 1]);\n      else {\n        const f = (u - tb) / (1 - tb), sy = cy - r - 2 - (6 + 14 * v) * sqrt(f);\n        C.push([x0, sy, 0.32 * r, 1, 1]);\n        K.push([x0, -6, x0, -6 + (cy - 12 + 6) * max(0, 1 - 3 * f), 0.15 * r, 0.12 * r, 1, 1]);\n      }\n      continue;\n    }\n    const tau = (e.te - e.Tf) / slowOf(v);\n    // The drop sinks into the surface instead of vanishing at the touch: in a\n    // gel it takes 0.75 s and a thick neck joins it to the pool.\n    const ts = 0.15 + 0.6 * v;\n    if (tau \u003c ts) C.push([x0, Y0 - r + 2.2 * r * (tau / ts), r * (1 - 0.3 * (tau / ts)), 1.4 + 3 * v, 1]);\n    // Ripples: a packet from the impact and a smaller one when the jet falls,\n    // running out along the surface at 9 LEDs a second, 4 in a gel, about\n    // nine LEDs from crest to crest.\n    for (const [t0, a0] of [[0, 0.9 * (1 - 0.6 * v)], [TJ0 + TJ * 0.8, 0.45 * (1 - 0.7 * v)]]) {\n      const tt = tau - t0;\n      if (tt \u003c= 0) continue;\n      const c = 9 - 5 * v, A = (a0 * r * exp(-tt / 1.8)) / 3.6;\n      for (let x = 0; x \u003c W; x++) {\n        const s = abs(x + 0.5 - x0) - c * tt - 2, en = exp(-(s * s) / 60);\n        if (en > 0.01) rip[x] += A * en * sin(s * 0.7);\n      }\n    }\n    // The cavity: an air pocket pushed down under the surface.\n    if (tau \u003c TC) {\n      const Rc = r * (1.2 + 1.3 * (1 - exp(-tau / 0.18))) * (1 - 0.3 * v), Dc = r * 2.5 * (1 - 0.55 * v) * sin((PI * tau) / TC);\n      if (Dc > 0.3) S.cav.push([x0, Rc, Dc]);\n    }\n    // The crown: two thin walls leaning out, a translucent sheet between\n    // them, and fingers round the rim whose beads fly off at 0.42.\n    const hc = r * 3.1 * max(0, 1 - v / 0.7), R = r * (1.4 + 1.5 * (1 - exp(-min(tau, TCR) / 0.25)));\n    if (hc > 0.2 && tau \u003c TCR) {\n      const Hc = hc * Math.pow(sin((PI * tau) / TCR), 0.6), fl = 0.35 * Hc;\n      if (Hc > 0.5) {\n        for (let s = -1; s \u003c= 1; s += 2) K.push([x0 + s * R, Y0 + 1, x0 + s * (R + fl), Y0 - Hc, 0.75, 0.5, 1.2]);\n        S.crowns.push([x0, R, fl, Hc]);\n        if (tau \u003c 0.42 && v \u003c 0.5) {\n          const g = sm(tau / 0.3) * (1 - v / 0.5);\n          for (const [ph, lk] of e.fing) {\n            const cs = cos(ph), bx = x0 + (R + fl) * cs, lf = lk * 0.55 * hc * g, tx = bx + 0.35 * lf * cs, ty = Y0 - Hc - lf;\n            K.push([bx, Y0 - Hc + 0.5, tx, ty, 0.5, 0.3, 0.9]);\n            C.push([tx, ty, 0.26 * r, 0.9]);\n          }\n        }\n      }\n    }\n    if (tau >= 0.42 && v \u003c 0.5) {\n      // The beads thrown from the fingers fly out and up, then slow and drop back.\n      const t = tau - 0.42, Hp = hc * Math.pow(sin((PI * 0.42) / TCR), 0.6), Rp = r * (1.4 + 1.5 * (1 - exp(-0.42 / 0.25))) + 0.35 * Hp;\n      for (const [ph, lk, vy, vx] of e.fing) {\n        const cs = cos(ph), lf = lk * 0.55 * hc * (1 - v / 0.5);\n        const y = Y0 - Hp - lf - vy * t + 16 * t * t, x = x0 + (Rp + 0.35 * lf) * cs + vx * cs * t;\n        if (y \u003c Y0 + 2) C.push([x, y, 0.26 * r * (1 - v / 0.5), 0.9]);\n      }\n    }\n    // The jet: when the cavity snaps shut a column climbs out of the middle;\n    // in water its tip pinches off into a bead that flies on and falls back.\n    if (tau > TJ0) {\n      const s = (tau - TJ0) / TJ, hj = min(48, r * 8.5) * (1 - 0.8 * v), rb = 0.85 * r * (1 + 0.8 * v), pinch = v \u003c 0.55;\n      if (s \u003c 1) {\n        const Hj = hj * sin(PI * s);\n        const top = Y0 - Hj;\n        K.push([x0, Y0 + 3, x0, top, rb, (0.5 + 0.5 * v) * r, 2.5 + 2.5 * v]);\n        if (!pinch || s \u003c TPINCH) C.push([x0, top - 0.3 * r, (0.7 + 0.3 * v) * r, 1.3 + 2 * v]);\n      }\n      if (pinch && s >= TPINCH) {\n        const t = (s - TPINCH) * TJ, Hp = hj * sin(PI * TPINCH), y = Y0 - Hp - 0.9 * r - 7 * t + 18 * t * t;\n        if (y \u003c Y0 + 2) C.push([x0, y, 0.68 * r, 1.3]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  build(S);\n  const sdf = S.sdf, rip = S.rip, v = S.visc, deep = S.deep;\n  // The liquid's signed distance: negative inside. The pool's surface,\n  // minus the cavities, then every shape joined on smoothly. The falling drop\n  // is the concentrated essence, so where it is the colour is deep.\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i++) sdf[i] = Y0 + rip[x] - (y + 0.5);\n  deep.fill(0);\n  for (const [cx, R, D] of S.cav)\n    for (let y = Y0 - 2; y \u003c min(H, Y0 + D + 3); y++)\n      for (let x = max(0, floor(cx - R - 3)); x \u003c min(W, cx + R + 3); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - Y0) / D, da = (sqrt(dx * dx + dy * dy) - 1) * min(R, D), i = y * W + x;\n        sdf[i] = -smin(-sdf[i], da, 1.5);\n      }\n  for (const [ax, ay, bx, by, ra, rb, k, dp] of S.caps) {\n    const x0 = max(0, floor(min(ax, bx) - ra - k - 1)), x1 = min(W - 1, floor(max(ax, bx) + ra + k + 1));\n    const y0 = max(0, floor(min(ay, by) - ra - k - 1)), y1 = min(H - 1, floor(max(ay, by) + ra + k + 1));\n    const ex = bx - ax, ey = by - ay, ll = ex * ex + ey * ey || 1;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * ex + qy * ey) / ll, 0, 1);\n        const dd = Math.hypot(qx - ex * t, qy - ey * t) - (ra + (rb - ra) * t), i = y * W + x;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  for (const [cx, cy, r, k, dp] of S.circ) {\n    const x0 = max(0, floor(cx - r - k - 1)), x1 = min(W - 1, floor(cx + r + k + 1)), y0 = max(0, floor(cy - r - k - 1)), y1 = min(H - 1, floor(cy + r + k + 1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const i = y * W + x, dd = Math.hypot(x + 0.5 - cx, y + 0.5 - cy) - r;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  // Palette: backdrop, essence, and the deep colour the drop carries. A\n  // thicker essence holds more colour. From rose through orange and gold to\n  // lime, hue -0.12 to 0.35, any of these at half brightness reads brown,\n  // khaki or olive on the LEDs, so there everything is lifted towards cream\n  // and paled: the backdrop to 200 of 255 or more with a shallow vignette, the\n  // pool to about 215, and the deep colour goes brighter than the pool\n  // instead of darker.\n  const pal = S.pal, h = S.hue + 0.52, hf = h - floor(h), key = hf + 7 * v;\n  if (S.palKey !== key) {\n    const hw = hf > 0.5 ? hf - 1 : hf, wm = sm((hw + 0.12) / 0.06) * (1 - sm((hw - 0.28) / 0.07));\n    hsv(h + 0.02, 0.14 - 0.06 * wm, 1, pal, 0);\n    hsv(h + 0.06 * (1 - wm), 0.4 - 0.3 * wm, 1, pal, 10);\n    hsv(h, (0.38 + 0.22 * v) * (1 - 0.5 * wm), 1, pal, 3);\n    hsv(h + 0.015, 0.92 - 0.3 * wm, 1, pal, 6);\n    pal[9] = wm;\n    S.palKey = key;\n  }\n  const wm = pal[9], dv = 0.46 + 0.5 * wm, dye = S.dye, T = S.T;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const below = y + 0.5 - Y0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const d = sdf[i];\n      // The backdrop: a soft key light high in the middle, deepening towards\n      // the surface.\n      const gx = (x + 0.5 - 32) / 32, gy = (y - 14) / 46;\n      const gl = exp(-(gx * gx + gy * gy)), bv = min(1, 0.4 + 0.46 * gl + wm * (0.36 - 0.26 * gl));\n      let r = (pal[10] + (pal[0] - pal[10]) * gl) * bv, g = (pal[11] + (pal[1] - pal[11]) * gl) * bv, b = (pal[12] + (pal[2] - pal[12]) * gl) * bv;\n      // The crown's sheet: thin film between its walls, brighter at the two\n      // sides where the eye looks along it, and along the lip.\n      for (const [cx, R, fl, Hc] of S.crowns) {\n        const hgt = -below;\n        if (hgt \u003c -0.5 || hgt > Hc) continue;\n        const Rh = R + (fl * hgt) / Hc, u = abs(x + 0.5 - cx) / Rh;\n        if (u >= 1) continue;\n        const a = 0.16 + 0.3 * min(1, 1 / sqrt(1 - u * u) - 1) + 0.4 * exp(-((hgt - Hc + 0.6) ** 2));\n        r += (pal[3] * 0.92 - r) * a;\n        g += (pal[4] * 0.92 - g) * a;\n        b += (pal[5] * 0.92 - b) * a;\n      }\n      // The open surface, seen edge on: a gloss line along it, glinting white\n      // where a ripple tilts it towards the light. It is drawn across the\n      // boundary, so it does not flicker as the surface moves by a fraction.\n      const pd = Y0 + rip[x] - (y + 0.5), open = abs(d - pd) \u003c 0.02;\n      let spec = 0;\n      if (open && abs(pd) \u003c 2.5) {\n        const sl = ((x \u003c W - 1 ? rip[x + 1] : rip[x]) - (x > 0 ? rip[x - 1] : rip[x])) / 2, nd = (sl * LX - LY) / sqrt(1 + sl * sl);\n        spec = exp(-((pd + 0.3) ** 2) / 0.45) * (0.16 + 0.85 * Math.pow(max(0, nd), 12));\n      }\n      if (d \u003c 0.5) {\n        const cov = cl(0.5 - d, 0, 1);\n        // Inside the liquid: the essence, brighter just under the surface and\n        // deeper towards the bottom, slow shafts of light from the surface\n        // swaying through it, and the deep colour where the drop has gone.\n        const depth = cl(below / (H - Y0), 0, 1);\n        let lv = below \u003c 0 ? 0.88 + 0.09 * wm : 0.8 - 0.36 * depth + wm * (0.15 + 0.16 * depth);\n        if (below >= 0) {\n          const sx = x + 0.4 * below;\n          lv += 0.16 * (1 - depth) * (0.5 + 0.5 * sin(0.3 * sx - 0.7 * T + 1.3 * sin(0.11 * sx + 0.23 * T)));\n        }\n        lv = min(1, lv);\n        let lr = pal[3] * lv, lg = pal[4] * lv, lb = pal[5] * lv;\n        const da = max(deep[i] * 0.9, 1 - exp(-dye[i] * 0.9));\n        if (da > 0.003) {\n          lr += (pal[6] * dv - lr) * da;\n          lg += (pal[7] * dv - lg) * da;\n          lb += (pal[8] * dv - lb) * da;\n        }\n        let rim = 0, inner = 0;\n        if (!open) {\n          // Everything but the open surface: the normal from the distance\n          // field, a white highlight where it faces the light, a gloss on what\n          // faces up, a darker rim on the far side and light gathered inside\n          // the bottom of a bead.\n          const xm = x > 0 ? sdf[i - 1] : d, xp = x \u003c W - 1 ? sdf[i + 1] : d, ym = y > 0 ? sdf[i - W] : d, yp = y \u003c H - 1 ? sdf[i + W] : d;\n          let nx = xp - xm, ny = yp - ym;\n          const nl = Math.hypot(nx, ny) || 1;\n          nx /= nl;\n          ny /= nl;\n          const edge = cl(1 + d / 1.6, 0, 1), nd = nx * LX + ny * LY;\n          spec += edge * (0.9 * Math.pow(max(0, nd), 7) + 0.22 * max(0, -ny));\n          rim = edge * 0.35 * (1 - max(0, nd));\n          inner = cl((-d - 0.6) / 1.2, 0, 1) * cl((3 + d) / 1.5, 0, 1) * Math.pow(max(0, -nd), 2) * (below \u003c 1 ? 0.6 : 0);\n        }\n        lr = lr * (1 - rim) + inner * pal[3];\n        lg = lg * (1 - rim) + inner * pal[4];\n        lb = lb * (1 - rim) + inner * pal[5];\n        r += (lr - r) * cov;\n        g += (lg - g) * cov;\n        b += (lb - b) * cov;\n      }\n      r += spec;\n      g += spec;\n      b += spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","layer":{"id":"layer-essence-drop","type":"code","name":"essence-drop","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Essence Drop\n// Family:  cosmetic\n// Idea:    In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after slow-motion film of a drop falling into clear essence\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1\n//\n// Knob 1: Hue. The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker.\n// Knob 2: Speed. How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower.\n// Knob 3: Viscosity. Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume.\n// Knob 4: Size. The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs.\n// Buttons: K1 tap lets a drop fall now.\n\nconst W = 64, H = 128, N = W * H, Y0 = 66;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k) => {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n};\n// Light comes from the upper left.\nconst LX = -0.55, LY = -0.835;\nconst MAXP = 2000;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, visc: 0, size: 0.06, next: 0.4, T: 0,\n    ev: [], dye: new Float32Array(N), deep: new Float32Array(N), dt2: new Float32Array(N), sdf: new Float32Array(N), rip: new Float32Array(W),\n    px: new Float32Array(MAXP), py: new Float32Array(MAXP), pa: new Float32Array(MAXP), pe: new Int32Array(MAXP), np: 0,\n    circ: [], caps: [], pal: new Float32Array(13), palKey: NaN,\n  };\n}\n\nfunction spawn(S) {\n  const r = 3.4 + 4.2 * S.size, R = Math.random;\n  const x = 32 + (R() - 0.5) * 10;\n  // Nine fingers round the front of the crown, each its own length, and the\n  // beads they throw each their own speed, so the spray fans out.\n  const fing = [];\n  for (let j = 0; j \u003c 9; j++) fing.push([PI * (j + 0.5 + 0.35 * (R() - 0.5)) / 9, 0.6 + 0.65 * R(), 7 + 6 * R(), 4 + 5 * R()]);\n  S.ev.push({ id: (S.idn = (S.idn || 0) + 1), x, r, te: 0, Tf: 1.4 * (1 + 0.5 * S.visc), dyed: false, ga: 0, a: 0, yv: 0, fing });\n  if (S.ev.length > 4) S.ev.shift();\n}\n\n// The phases of one splash, as functions of tau, the seconds since impact on\n// the film's own clock: the cavity opens and shuts by 0.9, the crown stands\n// by 0.35 and falls by 1.1, the jet rises from 0.85 and is gone by 2.35.\nconst TC = 0.9, TCR = 1.1, TJ0 = 0.85, TJ = 1.5, TPINCH = 0.42;\nfunction slowOf(v) {\n  return 1 + 1.3 * v;\n}\n\n// The dye: when the drop goes under, a blob of particles is set in the\n// velocity field of a vortex pair, the cross-section of a vortex ring. The\n// pair moves down at U = G / (4 pi a), slowing as G decays and widening as it\n// slows, and the particles wind into its two curls and trail a stem.\nfunction stepDye(S, dts) {\n  const v = S.visc;\n  for (const e of S.ev) {\n    const tau = (e.te - e.Tf) / slowOf(v);\n    if (tau \u003c 0.08) continue;\n    if (!e.dyed) {\n      e.dyed = true;\n      e.a = 1.7 * e.r;\n      e.yv = Y0 + 2 * e.r;\n      e.ga = 4 * PI * e.a * (13 + 1.4 * e.r) * (1 - 0.55 * v);\n      const n = floor(160 + 40 * e.r);\n      for (let i = 0; i \u003c n; i++) {\n        if (S.np >= MAXP) break;\n        const ang = Math.random() * 2 * PI, rad = sqrt(Math.random()) * 1.9 * e.r;\n        S.px[S.np] = e.x + cos(ang) * rad;\n        S.py[S.np] = Y0 + 1.6 * e.r + sin(ang) * rad * 0.8;\n        S.pa[S.np] = 0;\n        S.pe[S.np] = e.id;\n        S.np++;\n      }\n    }\n    // Viscosity eats the ring: its spin decays over 2.8 s in water, 1.5 s in gel.\n    e.ga *= exp(-dts / (2.8 - 1.3 * v));\n    const U = e.ga / (4 * PI * e.a);\n    e.yv += U * dts;\n    e.a += 0.3 * e.r * dts * (1 - 0.6 * v);\n  }\n  const dye = S.dye;\n  let k = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    let e = null;\n    for (const f of S.ev) if (f.id === S.pe[i]) e = f;\n    let x = S.px[i], y = S.py[i];\n    const age = (S.pa[i] += dts);\n    if (!e || age > 12) continue;\n    // Two Lamb-Oseen cores, opposite spins, the fluid between them going down.\n    let ux = 0, uy = 0;\n    const d2 = (0.85 * e.a) ** 2;\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const dx = x - (e.x + s * e.a), dy = y - e.yv, g = (-s * e.ga) / (2 * PI * (dx * dx + dy * dy + d2));\n      ux += -g * dy;\n      uy += g * dx;\n    }\n    x += (ux + (Math.random() - 0.5) * 7) * dts;\n    y += (uy + (Math.random() - 0.5) * 7) * dts;\n    x = cl(x, 0.5, W - 1.5);\n    y = cl(y, Y0 + 1, H - 1.5);\n    // Each particle leaves colour where it passes, less as it ages, so the\n    // curls show where it went and the old colour spreads out.\n    const w = dts * 1.4 * exp(-age / 5), ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix;\n    dye[o] += w * (1 - fx) * (1 - fy);\n    dye[o + 1] += w * fx * (1 - fy);\n    dye[o + W] += w * (1 - fx) * fy;\n    dye[o + W + 1] += w * fx * fy;\n    S.px[k] = x;\n    S.py[k] = y;\n    S.pa[k] = age;\n    S.pe[k] = S.pe[i];\n    k++;\n  }\n  S.np = k;\n  // Diffusion and a slow fade into the pool: a gel holds the colour longer.\n  const t2 = S.dt2, kap = cl(dts * (1.6 - 1.1 * v), 0, 0.24), fade = exp(-dts / (7 + 5 * v));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, c = dye[i];\n      const l = (x > 0 ? dye[i - 1] : c) + (x \u003c W - 1 ? dye[i + 1] : c) + (y > 0 ? dye[i - W] : c) + (y \u003c H - 1 ? dye[i + W] : c) - 4 * c;\n      t2[i] = (c + kap * l) * fade;\n    }\n  dye.set(t2);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.visc = cl(k[2] || 0, 0, 1);\n  S.size = cl(k[3], 0, 1);\n  const dts = (d * S.speed) / 2;\n  S.T += dts;\n  if (input.btnPressed && input.btnPressed[0]) spawn(S);\n  S.next -= dts;\n  if (S.next \u003c= 0) {\n    spawn(S);\n    S.next += 5.5 * (1 + 0.4 * S.visc);\n  }\n  for (const e of S.ev) e.te += dts;\n  S.ev = S.ev.filter((e) => e.te - e.Tf \u003c 16 * slowOf(S.visc));\n  stepDye(S, dts);\n}\n\n// Shapes for the frame: circles and tapered capsules, each smooth-joined to\n// the pool so a bead touching the surface melts into it.\nfunction build(S) {\n  const C = (S.circ = []), K = (S.caps = []), v = S.visc, rip = S.rip;\n  rip.fill(0);\n  S.cav = [];\n  S.crowns = [];\n  for (const e of S.ev) {\n    const r = e.r, x0 = e.x;\n    if (e.te \u003c e.Tf) {\n      // Falling, faster and faster. The drop hangs from a thread out of the\n      // top; the thread stretches, breaks (later the thicker the essence) and\n      // its lower end balls up into a small bead that trails the drop.\n      const u = e.te / e.Tf, yb = -2 * r - 4 + (Y0 + 2 * r + 4) * (0.3 * u + 0.7 * u * u), cy = yb - r;\n      C.push([x0, cy, r, 1.4, 1]);\n      const tb = 0.45 + 0.42 * v;\n      if (u \u003c tb) K.push([x0, cy - 0.5 * r, x0, -6, 0.42 * r, 0.12 * r * (1 + v), 1.6, 1]);\n      else {\n        const f = (u - tb) / (1 - tb), sy = cy - r - 2 - (6 + 14 * v) * sqrt(f);\n        C.push([x0, sy, 0.32 * r, 1, 1]);\n        K.push([x0, -6, x0, -6 + (cy - 12 + 6) * max(0, 1 - 3 * f), 0.15 * r, 0.12 * r, 1, 1]);\n      }\n      continue;\n    }\n    const tau = (e.te - e.Tf) / slowOf(v);\n    // The drop sinks into the surface instead of vanishing at the touch: in a\n    // gel it takes 0.75 s and a thick neck joins it to the pool.\n    const ts = 0.15 + 0.6 * v;\n    if (tau \u003c ts) C.push([x0, Y0 - r + 2.2 * r * (tau / ts), r * (1 - 0.3 * (tau / ts)), 1.4 + 3 * v, 1]);\n    // Ripples: a packet from the impact and a smaller one when the jet falls,\n    // running out along the surface at 9 LEDs a second, 4 in a gel, about\n    // nine LEDs from crest to crest.\n    for (const [t0, a0] of [[0, 0.9 * (1 - 0.6 * v)], [TJ0 + TJ * 0.8, 0.45 * (1 - 0.7 * v)]]) {\n      const tt = tau - t0;\n      if (tt \u003c= 0) continue;\n      const c = 9 - 5 * v, A = (a0 * r * exp(-tt / 1.8)) / 3.6;\n      for (let x = 0; x \u003c W; x++) {\n        const s = abs(x + 0.5 - x0) - c * tt - 2, en = exp(-(s * s) / 60);\n        if (en > 0.01) rip[x] += A * en * sin(s * 0.7);\n      }\n    }\n    // The cavity: an air pocket pushed down under the surface.\n    if (tau \u003c TC) {\n      const Rc = r * (1.2 + 1.3 * (1 - exp(-tau / 0.18))) * (1 - 0.3 * v), Dc = r * 2.5 * (1 - 0.55 * v) * sin((PI * tau) / TC);\n      if (Dc > 0.3) S.cav.push([x0, Rc, Dc]);\n    }\n    // The crown: two thin walls leaning out, a translucent sheet between\n    // them, and fingers round the rim whose beads fly off at 0.42.\n    const hc = r * 3.1 * max(0, 1 - v / 0.7), R = r * (1.4 + 1.5 * (1 - exp(-min(tau, TCR) / 0.25)));\n    if (hc > 0.2 && tau \u003c TCR) {\n      const Hc = hc * Math.pow(sin((PI * tau) / TCR), 0.6), fl = 0.35 * Hc;\n      if (Hc > 0.5) {\n        for (let s = -1; s \u003c= 1; s += 2) K.push([x0 + s * R, Y0 + 1, x0 + s * (R + fl), Y0 - Hc, 0.75, 0.5, 1.2]);\n        S.crowns.push([x0, R, fl, Hc]);\n        if (tau \u003c 0.42 && v \u003c 0.5) {\n          const g = sm(tau / 0.3) * (1 - v / 0.5);\n          for (const [ph, lk] of e.fing) {\n            const cs = cos(ph), bx = x0 + (R + fl) * cs, lf = lk * 0.55 * hc * g, tx = bx + 0.35 * lf * cs, ty = Y0 - Hc - lf;\n            K.push([bx, Y0 - Hc + 0.5, tx, ty, 0.5, 0.3, 0.9]);\n            C.push([tx, ty, 0.26 * r, 0.9]);\n          }\n        }\n      }\n    }\n    if (tau >= 0.42 && v \u003c 0.5) {\n      // The beads thrown from the fingers fly out and up, then slow and drop back.\n      const t = tau - 0.42, Hp = hc * Math.pow(sin((PI * 0.42) / TCR), 0.6), Rp = r * (1.4 + 1.5 * (1 - exp(-0.42 / 0.25))) + 0.35 * Hp;\n      for (const [ph, lk, vy, vx] of e.fing) {\n        const cs = cos(ph), lf = lk * 0.55 * hc * (1 - v / 0.5);\n        const y = Y0 - Hp - lf - vy * t + 16 * t * t, x = x0 + (Rp + 0.35 * lf) * cs + vx * cs * t;\n        if (y \u003c Y0 + 2) C.push([x, y, 0.26 * r * (1 - v / 0.5), 0.9]);\n      }\n    }\n    // The jet: when the cavity snaps shut a column climbs out of the middle;\n    // in water its tip pinches off into a bead that flies on and falls back.\n    if (tau > TJ0) {\n      const s = (tau - TJ0) / TJ, hj = min(48, r * 8.5) * (1 - 0.8 * v), rb = 0.85 * r * (1 + 0.8 * v), pinch = v \u003c 0.55;\n      if (s \u003c 1) {\n        const Hj = hj * sin(PI * s);\n        const top = Y0 - Hj;\n        K.push([x0, Y0 + 3, x0, top, rb, (0.5 + 0.5 * v) * r, 2.5 + 2.5 * v]);\n        if (!pinch || s \u003c TPINCH) C.push([x0, top - 0.3 * r, (0.7 + 0.3 * v) * r, 1.3 + 2 * v]);\n      }\n      if (pinch && s >= TPINCH) {\n        const t = (s - TPINCH) * TJ, Hp = hj * sin(PI * TPINCH), y = Y0 - Hp - 0.9 * r - 7 * t + 18 * t * t;\n        if (y \u003c Y0 + 2) C.push([x0, y, 0.68 * r, 1.3]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  build(S);\n  const sdf = S.sdf, rip = S.rip, v = S.visc, deep = S.deep;\n  // The liquid's signed distance: negative inside. The pool's surface,\n  // minus the cavities, then every shape joined on smoothly. The falling drop\n  // is the concentrated essence, so where it is the colour is deep.\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i++) sdf[i] = Y0 + rip[x] - (y + 0.5);\n  deep.fill(0);\n  for (const [cx, R, D] of S.cav)\n    for (let y = Y0 - 2; y \u003c min(H, Y0 + D + 3); y++)\n      for (let x = max(0, floor(cx - R - 3)); x \u003c min(W, cx + R + 3); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - Y0) / D, da = (sqrt(dx * dx + dy * dy) - 1) * min(R, D), i = y * W + x;\n        sdf[i] = -smin(-sdf[i], da, 1.5);\n      }\n  for (const [ax, ay, bx, by, ra, rb, k, dp] of S.caps) {\n    const x0 = max(0, floor(min(ax, bx) - ra - k - 1)), x1 = min(W - 1, floor(max(ax, bx) + ra + k + 1));\n    const y0 = max(0, floor(min(ay, by) - ra - k - 1)), y1 = min(H - 1, floor(max(ay, by) + ra + k + 1));\n    const ex = bx - ax, ey = by - ay, ll = ex * ex + ey * ey || 1;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * ex + qy * ey) / ll, 0, 1);\n        const dd = Math.hypot(qx - ex * t, qy - ey * t) - (ra + (rb - ra) * t), i = y * W + x;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  for (const [cx, cy, r, k, dp] of S.circ) {\n    const x0 = max(0, floor(cx - r - k - 1)), x1 = min(W - 1, floor(cx + r + k + 1)), y0 = max(0, floor(cy - r - k - 1)), y1 = min(H - 1, floor(cy + r + k + 1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const i = y * W + x, dd = Math.hypot(x + 0.5 - cx, y + 0.5 - cy) - r;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  // Palette: backdrop, essence, and the deep colour the drop carries. A\n  // thicker essence holds more colour. From rose through orange and gold to\n  // lime, hue -0.12 to 0.35, any of these at half brightness reads brown,\n  // khaki or olive on the LEDs, so there everything is lifted towards cream\n  // and paled: the backdrop to 200 of 255 or more with a shallow vignette, the\n  // pool to about 215, and the deep colour goes brighter than the pool\n  // instead of darker.\n  const pal = S.pal, h = S.hue + 0.52, hf = h - floor(h), key = hf + 7 * v;\n  if (S.palKey !== key) {\n    const hw = hf > 0.5 ? hf - 1 : hf, wm = sm((hw + 0.12) / 0.06) * (1 - sm((hw - 0.28) / 0.07));\n    hsv(h + 0.02, 0.14 - 0.06 * wm, 1, pal, 0);\n    hsv(h + 0.06 * (1 - wm), 0.4 - 0.3 * wm, 1, pal, 10);\n    hsv(h, (0.38 + 0.22 * v) * (1 - 0.5 * wm), 1, pal, 3);\n    hsv(h + 0.015, 0.92 - 0.3 * wm, 1, pal, 6);\n    pal[9] = wm;\n    S.palKey = key;\n  }\n  const wm = pal[9], dv = 0.46 + 0.5 * wm, dye = S.dye, T = S.T;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const below = y + 0.5 - Y0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const d = sdf[i];\n      // The backdrop: a soft key light high in the middle, deepening towards\n      // the surface.\n      const gx = (x + 0.5 - 32) / 32, gy = (y - 14) / 46;\n      const gl = exp(-(gx * gx + gy * gy)), bv = min(1, 0.4 + 0.46 * gl + wm * (0.36 - 0.26 * gl));\n      let r = (pal[10] + (pal[0] - pal[10]) * gl) * bv, g = (pal[11] + (pal[1] - pal[11]) * gl) * bv, b = (pal[12] + (pal[2] - pal[12]) * gl) * bv;\n      // The crown's sheet: thin film between its walls, brighter at the two\n      // sides where the eye looks along it, and along the lip.\n      for (const [cx, R, fl, Hc] of S.crowns) {\n        const hgt = -below;\n        if (hgt \u003c -0.5 || hgt > Hc) continue;\n        const Rh = R + (fl * hgt) / Hc, u = abs(x + 0.5 - cx) / Rh;\n        if (u >= 1) continue;\n        const a = 0.16 + 0.3 * min(1, 1 / sqrt(1 - u * u) - 1) + 0.4 * exp(-((hgt - Hc + 0.6) ** 2));\n        r += (pal[3] * 0.92 - r) * a;\n        g += (pal[4] * 0.92 - g) * a;\n        b += (pal[5] * 0.92 - b) * a;\n      }\n      // The open surface, seen edge on: a gloss line along it, glinting white\n      // where a ripple tilts it towards the light. It is drawn across the\n      // boundary, so it does not flicker as the surface moves by a fraction.\n      const pd = Y0 + rip[x] - (y + 0.5), open = abs(d - pd) \u003c 0.02;\n      let spec = 0;\n      if (open && abs(pd) \u003c 2.5) {\n        const sl = ((x \u003c W - 1 ? rip[x + 1] : rip[x]) - (x > 0 ? rip[x - 1] : rip[x])) / 2, nd = (sl * LX - LY) / sqrt(1 + sl * sl);\n        spec = exp(-((pd + 0.3) ** 2) / 0.45) * (0.16 + 0.85 * Math.pow(max(0, nd), 12));\n      }\n      if (d \u003c 0.5) {\n        const cov = cl(0.5 - d, 0, 1);\n        // Inside the liquid: the essence, brighter just under the surface and\n        // deeper towards the bottom, slow shafts of light from the surface\n        // swaying through it, and the deep colour where the drop has gone.\n        const depth = cl(below / (H - Y0), 0, 1);\n        let lv = below \u003c 0 ? 0.88 + 0.09 * wm : 0.8 - 0.36 * depth + wm * (0.15 + 0.16 * depth);\n        if (below >= 0) {\n          const sx = x + 0.4 * below;\n          lv += 0.16 * (1 - depth) * (0.5 + 0.5 * sin(0.3 * sx - 0.7 * T + 1.3 * sin(0.11 * sx + 0.23 * T)));\n        }\n        lv = min(1, lv);\n        let lr = pal[3] * lv, lg = pal[4] * lv, lb = pal[5] * lv;\n        const da = max(deep[i] * 0.9, 1 - exp(-dye[i] * 0.9));\n        if (da > 0.003) {\n          lr += (pal[6] * dv - lr) * da;\n          lg += (pal[7] * dv - lg) * da;\n          lb += (pal[8] * dv - lb) * da;\n        }\n        let rim = 0, inner = 0;\n        if (!open) {\n          // Everything but the open surface: the normal from the distance\n          // field, a white highlight where it faces the light, a gloss on what\n          // faces up, a darker rim on the far side and light gathered inside\n          // the bottom of a bead.\n          const xm = x > 0 ? sdf[i - 1] : d, xp = x \u003c W - 1 ? sdf[i + 1] : d, ym = y > 0 ? sdf[i - W] : d, yp = y \u003c H - 1 ? sdf[i + W] : d;\n          let nx = xp - xm, ny = yp - ym;\n          const nl = Math.hypot(nx, ny) || 1;\n          nx /= nl;\n          ny /= nl;\n          const edge = cl(1 + d / 1.6, 0, 1), nd = nx * LX + ny * LY;\n          spec += edge * (0.9 * Math.pow(max(0, nd), 7) + 0.22 * max(0, -ny));\n          rim = edge * 0.35 * (1 - max(0, nd));\n          inner = cl((-d - 0.6) / 1.2, 0, 1) * cl((3 + d) / 1.5, 0, 1) * Math.pow(max(0, -nd), 2) * (below \u003c 1 ? 0.6 : 0);\n        }\n        lr = lr * (1 - rim) + inner * pal[3];\n        lg = lg * (1 - rim) + inner * pal[4];\n        lb = lb * (1 - rim) + inner * pal[5];\n        r += (lr - r) * cov;\n        g += (lg - g) * cov;\n        b += (lb - b) * cov;\n      }\n      r += spec;\n      g += spec;\n      b += spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker."},{"name":"Speed","min":0.2,"max":3,"about":"How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower."},{"name":"Viscosity","min":0,"max":1,"about":"Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume."},{"name":"Size","min":0,"max":1,"about":"The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs."}],"start":[0,2,0,0.06],"measures":{"motion":0.0508,"detail":0.0106,"edges":0.2549,"complexity":1.4637,"coverage":1,"colour":0.1457,"drift":0.0297},"knobResponse":[0.2403,0.0329,0.0375,0.0322]},{"slug":"euclid-pulse","title":"Euclid Pulse","family":"rhythm","round":1,"note":"유클리드 리듬 셋이 고리 셋에서 함께 돌아요. 바깥 두 고리의 박은 고리 밖 제 조각을 따라 빛으로 퍼져서 세운 패널의 위아래 끝까지 닿아요. 처음은 E(3,8) 이에요.","idea":"Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.","buttons":"K3 tap turns the outer rhythm one step later.","code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","layer":{"id":"layer-euclid-pulse","type":"code","name":"euclid-pulse","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three rings around the colour wheel together."},{"name":"Tempo","min":80,"max":180,"about":"Beats per minute; the hand goes round once every four beats."},{"name":"Pulses","min":3,"max":13,"about":"Hits on the outer ring; the middle ring takes about half as many."},{"name":"Steps","min":8,"max":16,"about":"Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams."}],"start":[0,80,3,8],"measures":{"motion":0.5845,"detail":0.0325,"edges":0.366,"complexity":0.4817,"coverage":0.4069,"colour":0.1498,"drift":0.1272},"knobResponse":[0.0702,0.0945,0.0699,0.0495]},{"slug":"excavation","title":"Excavation","family":"construction","round":25,"note":"도심 빌딩 사이의 깊은 터파기를 세로로 잘라 봐요. 굴착기가 바닥에 쌓은 흙을 갠트리의 클램셸이 100줄 위 덤프트럭까지 끌어올리고, 바닥이 한 단 깊어지면 흙막이 벽 사이에 강철 버팀보가 한 단 더 용접돼 걸려요. K1 을 돌리면 데크 틈으로 떨어지던 햇빛 기둥이 기울다가 밤의 나트륨등으로 바뀌고, 누르면 경고등 뒤에 발파가 일어나 바닥에 먼지가 차요.","idea":"A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.","buttons":"K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.","code":"// ===== Patternflow pattern =====\n// Title:   Excavation\n// Family:  construction\n// Idea:    A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the strutted basement excavations dug between city buildings\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1\n//\n// Knob 1: Hour. Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit.\n// Knob 2: Speed. At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too.\n// Knob 3: Depth. How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot.\n// Knob 4: Water. Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades.\n// Buttons: K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, acos, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street, the pit's inside, the opening's edge, the heap, the truck bed, the last stage.\nconst [GL, PL, PR, OR, HX, TT, FIN] = [20, 10, 53, 33, 21, 43, 11];\nconst strutY = (k) => 18 + 9 * k, floorY = (k) => 23 + 9 * k;\nconst KP = [29, 41], EXP = [37, 41, 44, 41];\n// Fill, clay, sand and gravel, weathered rock, rock, and the rows they end at.\nconst STRATA = [[96, 84, 78], [186, 106, 58], [206, 186, 142], [154, 138, 94], [118, 126, 146]];\nconst BOT = [27, 45, 64, 101, 999];\nconst layer = (x, y) => {\n  let i = 0;\n  while (i \u003c 4 && y >= BOT[i] + 5 * (vn(x * 0.09, i * 5.3) - 0.5)) i++;\n  return i;\n};\n// Noon, afternoon, dusk, night: sky top, horizon, sun, ambient, buildings.\nconst KEYS = [\n  [50, 116, 222, 168, 206, 240, 1, 0.95, 0.84, 0.92, 0.95, 1, 150, 158, 176],\n  [56, 100, 196, 232, 200, 160, 1, 0.82, 0.56, 0.8, 0.75, 0.72, 140, 128, 132],\n  [34, 32, 90, 236, 110, 70, 0.9, 0.5, 0.26, 0.5, 0.42, 0.5, 80, 66, 90],\n  [5, 7, 26, 22, 26, 60, 0, 0, 0, 0.13, 0.14, 0.22, 30, 32, 48],\n];\nconst WIN = [255, 196, 120], CAP = [176, 172, 166], DECK = [124, 118, 110], ROAD = [74, 74, 80], RAIN = [190, 210, 240], FLOOD = [1, 0.97, 0.9];\nconst WALLS = [[8, [120, 86, 54]], [9, [96, 104, 118]], [54, [96, 104, 118]], [55, [120, 86, 54]]];\nconst YEL = [250, 178, 26], GAN = [244, 204, 50], GRAB = [246, 142, 30], STEEL = [150, 160, 178], HOSE = [50, 80, 170];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F32(N * 3), lm: F32(N * 3), so: F32(N * 3), bw: F32(N * 3), sn: F32(N * 3), st: F32(N), shf: F32(N), sh: F32(200), rs: F32(H), srf: F32(W), dig: F32(W),\n    t: 0, rt: 0, nk: -1, cx: 42, du: [], pa: [], sl: -1, bl: -1, dust: 0.3, arc: 0, tx: 0, tv: 0, tph: 0, load: 2, tgo: 0,\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, L = layer(x, y), hh = hash(x, y), pd = hypot(x - 3, y - 24.5), px = (x - PL) % 7;\n    // The ground in section, each layer with its grain; a water main and ducts.\n    let k = 0.86 + 0.22 * hh, c = STRATA[L];\n    if (L === 0 && hh > 0.88) c = [150, 146, 140];\n    else if (L === 1) k = 0.9 + 0.14 * vn(x * 0.4, y * 0.7);\n    else if (L === 2 && hash(x >> 1, y >> 1) \u003c 0.2) c = [136, 132, 128];\n    else if (L === 3 && abs(vn(x * 0.3, y * 0.3) - 0.5) \u003c 0.04) k = 0.55;\n    else if (L === 4 && (x + y * 0.7 + 5 * vn(x * 0.2, y * 0.1)) % 13 \u003c 0.9) k = 0.6;\n    if (pd \u003c 2.2) (c = pd > 1.2 ? [96, 120, 150] : [26, 30, 36]), (k = 1);\n    if (x > 57 && x \u003c 63 && (y === 23 || y === 24) && x & 1) (c = [230, 120, 40]), (k = 1);\n    // The far wall: H-piles and lagging, shotcrete and rock bolts lower down.\n    const q = 0.8 + 0.35 * hash(floor((y - GL) / 3), floor((x - PL) / 7)), r = 0.84 + 0.22 * vn(x * 0.3, y * 0.3);\n    const b = y \u003c GL + 2 ? CAP : !px ? [86, 92, 104] : y > 65 ? (px === 3 && y % 8 === 4 ? [60, 60, 66] : [136 * r, 132 * r, 126 * r]) : (y - GL) % 3 > 1 ? [44, 34, 28] : [132 * q, 94 * q, 60 * q];\n    for (let j = 0; j \u003c 3; j++) (P.so[o + j] = c[j] * k), (P.bw[o + j] = b[j]);\n    P.st[i] = sm(0.42, 0.72, vn(x * 0.8, y * 0.06));\n  }\n  skyline(P);\n}\n\nfunction skyline(P) {\n  P.bd = [];\n  for (let x = 0, w, s; x \u003c W; x += w) (s = !x || x > 50), (w = !x ? 8 : s ? W - x : min(4 + floor(rnd() * 5), 56 - x)), P.bd.push([x, x + w - 1, s ? floor(rnd() * 3) : 6 + floor(rnd() * 8), rnd(), s]);\n}\n\n// A new lot, dug to stage k, with the grab already on its way down.\nfunction lot(P, k) {\n  Object.assign(P, { k, fy: floorY(k) + 2.5, hv: 64, wx: -1, mat: -1, ex: 41, ei: 1, sc: 1, ec: 0, full: 0, E: { p: [7, -9, 0] }, C: { p: [HX, 30, 1] } });\n  P.dig.fill(0);\n  go(P.E, 0, 0.7, [12, -3, 0]), go(P.C, 1, (P.fy - 43) / 46, [HX, P.fy - 13, 1]);\n}\n// A move eases a pose to b; the step functions chain moves.\nconst go = (m, ph, dur, b) => Object.assign(m, { ph, t: 0, dur: max(0.15, dur), a: m.p.slice(), b });\nfunction tick(m, d) {\n  const u = sm(0, 1, (m.t += d) / m.dur);\n  for (let i = 0; i \u003c 3; i++) m.p[i] = mix(m.a[i], m.b[i], u);\n  return u;\n}\nconst heapH = (P) => min(13, sqrt(1.1 * P.hv));\nconst heapTop = (P) => P.fy - heapH(P);\nconst matCol = (P) => STRATA[layer(30, P.fy + 2)];\nfunction puff(P, x, y, n, a, s = 1) {\n  for (let i = 0; i \u003c n; i++) P.du.push([x + (rnd() - 0.5) * 6 * s, y - rnd() * 2 * s, (1.5 + rnd() * 2) * s, a, (rnd() - 0.5) * 3 * s, -(2 + rnd() * 3) * s]);\n  P.dust = min(1, P.dust + 0.05 * n * a);\n}\n\n// Excavator: dig, lift, swing, drop it on the heap, swing back.\nfunction eStep(P, E) {\n  const ph = E.ph, up = [7, -9, 0];\n  if (ph === 0) go(E, 1, 1, [8, 1.5, 0]);\n  else if (ph === 1) {\n    const bx = round(P.ex + 8);\n    for (let i = -3; i \u003c= 3; i++) if (bx + i \u003c= PR) P.dig[bx + i] = max(P.dig[bx + i], 2.2 * cos(i * 0.39));\n    (P.fy += 32 / 44), (P.ec = 1), puff(P, bx, P.fy, 1, 0.3);\n    if (P.fy >= floorY(P.k + 1)) (P.fy = floorY(++P.k)), P.k \u003c FIN ? (P.wx = PL) : (P.mat = 0);\n    go(E, 2, 0.6, up);\n  } else if (ph === 2) go(E, 3, 1, [7, -9, PI]);\n  else if (ph === 3) go(E, 4, 0.6, [cl(P.ex - HX - 3, 6, 15), -heapH(P) * 0.7 - 3, PI]);\n  else if (ph === 4) (P.hv += 32), (P.ec = 0), puff(P, P.ex - E.p[0], heapTop(P), 2, 0.3), go(E, 5, 1.1, up);\n  else if (P.wx >= 0 || P.k >= FIN || P.hv > 150) go(E, 7, 0.5, up);\n  else if (ph === 5 && ++P.sc % 3 === 0) (P.ex0 = P.ex), (P.exT = EXP[(P.ei = (P.ei + 1) % 4)]), go(E, 6, 1.4, up);\n  else go(E, 0, 0.7, [12, -3, 0]);\n}\n\n// Grab: down open, close, haul up, over the truck, open.\nfunction cStep(P, C) {\n  const ph = C.ph, top = heapTop(P), up = [HX, 7, 0];\n  if (ph === 0) P.hv > 14 ? go(C, 1, 0.3 + (top - 12 - C.p[1]) / 46, [HX, top - 5, 1]) : go(C, 0, 0.3, up);\n  else if (ph === 1) go(C, 2, 0.7, [HX, top - 4, 0]);\n  else if (ph === 2) {\n    const g = min(P.hv, 60);\n    (P.hv -= g), (P.full = g > 4), puff(P, HX, top, 2, 0.3), go(C, 3, 0.4 + (C.p[1] - 7) / 36, up);\n  } else if (ph \u003c 5) P.tph === 0 && P.load \u003c 3 ? go(C, 5, 1.2, [TT, 7, 0]) : go(C, 4, 0.3, up);\n  else if (ph === 5) {\n    if (P.full) {\n      (P.load++), (P.full = 0), puff(P, TT, 11, 3, 0.5), P.load > 2 && (P.tgo = 0.6);\n      for (let i = 0; i \u003c 10; i++) P.pa.push([TT + (rnd() - 0.5) * 6, 13, 0, 4, 0.3, 2]);\n    }\n    go(C, 6, 0.6, [TT, 7, 1]);\n  } else go(C, ph === 6 ? 7 : 0, ph === 6 ? 1.1 : 0.2, up);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nk = round(cl(k[2], 8, 10)), h = (P.h = cl(k[0], 0, 1)), wt = (P.wt = cl(k[3], 0, 1));\n  if (nk !== P.nk) lot(P, (P.nk = nk));\n  (P.t += d), (P.rt += rd), (P.cx += 3.6 * d);\n  Object.assign(P, { dayF: 1 - sm(0.55, 0.92, h), sunI: (1 - sm(0.6, 0.85, h)) * (1 - 0.9 * sm(0.3, 0.85, wt)), slope: 0.12 + 0.95 * sm(0, 0.8, h), lampK: sm(0.45, 0.8, h) });\n  // K1 tap: the warning lamp, then the blast at the face.\n  if (input.btnPressed && input.btnPressed[0] && P.bl \u003c 0) P.bl = 0;\n  if (P.bl >= 0 && (P.bl += rd) >= 0.8 && !P.fired) {\n    P.fired = 1;\n    for (let i = 0; i \u003c 26; i++) P.pa.push([40 + (rnd() - 0.5) * 10, P.fy - 1, (rnd() - 0.5) * 30, -10 - rnd() * 22, 1.6, 2]);\n    for (let i = PL; i \u003c= PR; i++) P.dig[i] += 1.4 * exp(-(((i - 40) / 9) ** 2));\n    puff(P, 40, P.fy, 9, 1.2, 2), (P.fy += 0.8), (P.hv += 30), (P.dust = 1);\n  }\n  if (P.bl > 1.5) (P.bl = -1), (P.fired = 0);\n  const { E, C } = P, u = tick(E, d);\n  if (E.ph === 6) {\n    const nx = mix(P.ex0, P.exT, u);\n    (P.trk += nx - P.ex), (P.ex = nx);\n  }\n  if (u >= 1) eStep(P, E);\n  if (tick(C, d) >= 1) cStep(P, C);\n  if (P.full && C.ph === 3 && rnd() \u003c 4 * d) P.pa.push([C.p[0] + (rnd() - 0.5) * 5, C.p[1] + 7, 0, 2, 2, 2]);\n  // A truck leaves with three grabs and an empty one backs in.\n  if (P.tph === 0 && P.load > 2 && (P.tgo -= d) \u003c= 0) (P.tph = 1), (P.tv = 0);\n  if (P.tph === 1 && (P.tx += (P.tv = min(18, P.tv + 10 * d)) * d) > 30) (P.tph = 2), (P.load = 0);\n  if (P.tph === 2 && (P.tx -= (1.5 + 0.8 * P.tx) * d) \u003c= 0) (P.tx = 0), (P.tph = 0);\n  // The new strut is welded in from wall to wall.\n  if (P.wx >= 0) {\n    P.arc = rnd() \u003c 0.85 ? 0.5 + 0.5 * rnd() : 0;\n    if (rnd() \u003c 14 * d) P.pa.push([P.wx, strutY(P.k) + 2, (rnd() - 0.5) * 10, -2 - rnd() * 4, 0.6 + rnd() * 0.5, 0]);\n    if ((P.wx += 7 * d) > PR + 1) (P.wx = -1), (P.arc = 0);\n  }\n  // At the bottom: the blinding concrete, then on to the next lot.\n  if (P.k >= FIN && P.hv \u003c 15 && (P.mat += d / 6) > 1.4 && P.sl \u003c 0) (P.snap = 1), (P.sl = 0), lot(P, P.nk), skyline(P);\n  if (P.sl >= 0 && (P.sl += rd / 2.2) >= 1) P.sl = -1;\n  // Seepage drips below the water table.\n  const wtY = 78 - 34 * wt, e = exp(-0.25 * d);\n  if (P.fy > wtY + 6 && rnd() \u003c 6 * wt * d) P.pa.push([PL + 1 + rnd() * 42, wtY + rnd() * (P.fy - wtY - 5), 0, 0, 3, 1]);\n  for (let i = PL; i \u003c= PR; i++) P.dig[i] *= e;\n  P.dust = max(0.1, P.dust * e);\n  P.du = P.du.filter((p) => ((p[0] += p[4] * d), (p[1] += p[5] * d), (p[2] += 2.2 * d), (p[3] -= 0.22 * d) > 0));\n  P.pa = P.pa.filter((p) => ((p[3] += 40 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), (p[4] -= d) > 0 && p[1] \u003c (p[0] >= PL && p[0] \u003c= PR ? P.fy : H)));\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.3 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\nconst cloudA = (P, x, y) => cl((0.6 * vn((x + P.cx) * 0.07, y * 0.18) + 0.4 * vn((x + P.cx) * 0.19, y * 0.4 + 5) - 0.6 + 0.3 * P.wt) * 5, 0, 1);\n\nfunction lamp(x0, y0, r2, k, c) {\n  const R = Math.ceil(sqrt(r2 * 4.6)), gx = [];\n  for (let x = max(0, x0 - R); x \u003c= min(W - 1, x0 + R); x++) gx.push(x, k * exp(-((x - x0) ** 2) / r2));\n  for (let y = max(0, y0 - R); y \u003c= min(H - 1, y0 + R); y++)\n    for (let i = 0, g = exp(-((y - y0) ** 2) / r2); i \u003c gx.length; i += 2) for (let j = 0, o = (y * W + gx[i]) * 3; j \u003c 3; j++) LM[o + j] += c[j] * gx[i + 1] * g;\n}\n\n// Daylight with cloud shadows, the shaft of sun, the lamps.\nfunction light(P, K) {\n  const { sunI: sI, slope: s, rs, sh, shf, k: pk, lampK: nl } = P, ks = min(pk, FIN - 1);\n  for (let i = 0; i \u003c 200; i++) sh[i] = 1 - 0.85 * cloudA(P, i - 96, 7);\n  rs.fill(1);\n  for (let j = 1, y; j \u003c= ks; j++) (y = strutY(j)), (rs[y + 2] = rs[y + 4] = 0.6), (rs[y + 3] = 0.4);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, x0 = x - s * (y - GL), out = y \u003c GL + 2;\n    const a = out ? 1 : (0.62 - 0.003 * (y - GL)) * (x > OR ? 0.75 : 1);\n    const l = out ? 0.5 * sI * sh[x + 80] : sI > 0 && x0 > PL - 1.5 && x0 \u003c OR + 1.5 ? sI * sm(PL - 1.5, PL + 1, x0) * (1 - sm(OR - 1, OR + 1.5, x0)) * sh[floor(x0) + 80] * rs[y] * (1 - 0.0025 * (y - GL)) : 0;\n    shf[i] = out ? 0 : l;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[9 + c] * a + K[6 + c] * l * 0.95;\n  }\n  // Floods on the lowest strut; sodium lamps after dark.\n  lamp(17, strutY(ks) + 2, 260, 0.7, FLOOD), lamp(47, strutY(ks) + 2, 260, 0.7, FLOOD);\n  if (nl > 0) for (let j = 1; j \u003c= ks; j++) lamp(j & 1 ? 12 : 51, strutY(j) + 2, 60, 1.3 * nl, [1, 0.62, 0.24]);\n  if (P.arc > 0) lamp(round(P.wx), strutY(pk) + 1, 70, 1.4 * P.arc, [0.7, 0.85, 1]);\n  if (P.bl > 0.8) lamp(40, round(P.fy) - 3, 260, 1.8 * (1 - sm(0.8, 1.2, P.bl)), [1, 0.8, 0.5]);\n  const tx = P.C.p[0];\n  if (nl > 0)\n    for (let y = 8; y \u003c min(H, P.fy + 2); y++)\n      for (let hw = 1.5 + 0.16 * (y - 7), x = max(0, floor(tx - hw)); x \u003c= min(W - 1, tx + hw); x++)\n        for (let c = 0, e = ((0.9 * nl) / (1 + (y - 7) / 70)) * (1 - abs(x - tx) / hw); c \u003c 3; c++) LM[(y * W + x) * 3 + c] += e * (c > 1 ? 0.92 : 1);\n}\n\nfunction sky(P, K) {\n  const ov = 0.75 * sm(0.2, 1, P.wt), day = P.dayF, dk = 0.3 + 0.7 * day, cc = [0, 1, 2].map((c) => mix(mix(K[3 + c], 255, 0.55) * dk, 130 * dk, ov));\n  for (let i = 0; i \u003c GL * W; i++) {\n    const x = i & 63, y = i >> 6, u = y / (GL - 1), a = cloudA(P, x, y) * (0.9 - 0.4 * u);\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = mix(mix(mix(K[c], K[3 + c], u * u), 120 * (0.25 + 0.75 * day), ov), cc[c], a);\n  }\n  // The street's buildings, the two beside the pit tall.\n  for (const [x0, x1, top, v, side] of P.bd)\n    for (let y = top; y \u003c GL; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const win = (x - x0) % 3 === 1 && (y - top) % 3 === 1 && x \u003c x1, lit = hash(x * 7, y + floor(v * 99)) \u003c 0.45 && day \u003c 0.7;\n        for (let c = 0, b; c \u003c 3; c++) (b = K[12 + c] * (0.78 + 0.3 * v) * (x === x0 ? 0.8 : 1)), (b = win ? (lit ? WIN[c] * (1 - day) : b * 0.55 + 18 * c * day) : b), (F[(y * W + x) * 3 + c] = side ? b : mix(b, K[3 + c], 0.3));\n      }\n}\n\nfunction ground(P) {\n  const { so, bw, srf, wt, st, fy } = P, wtY = 78 - 34 * wt, sec = 0.42 + 0.52 * P.dayF, mc = matCol(P), hh = heapH(P), kc = STEEL.map((v) => v * 0.5 * sec);\n  for (let x = PL; x \u003c= PR; x++) srf[x] = fy + P.dig[x] + 0.6 * (hash(x, 7) - 0.5);\n  for (let i = GL * W; i \u003c N; i++) {\n    // Pavement, deck and caps; far wall and heap; the ground in section.\n    const x = i & 63, y = i >> 6, o = i * 3, pit = x >= PL && x \u003c= PR;\n    let A = so, a = o, L = 0, k = sec;\n    if (y \u003c GL + 2 && !(pit && x \u003c= OR)) (A = (x > 6 && x \u003c PL) || (x > PR && x \u003c 57) ? CAP : x > OR && x \u003c 56 ? DECK : ROAD), (a = 0), (L = 1), (k = y === GL ? 1.18 : A === DECK && (x + y) & 1 ? 0.86 : 1);\n    else if (pit && y \u003c srf[x]) (L = 1), y >= srf[x] - max(0, hh - abs(x - HX) * 1.1) ? ((A = mc), (a = 0), (k = 0.85 + 0.3 * hash(x, y))) : ((A = bw), (k = y > wtY ? 1 - 0.5 * wt * st[i] : 1));\n    else if (pit && y \u003c srf[x] + 1) (L = 1), (k = 1.15);\n    else if (!pit && y > wtY + 4) k *= 1 - 0.12 * wt;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = A[a + c] * k * (L ? LM[o + c] : 1);\n  }\n  // Walls and king posts down to their toes; the deck's beams.\n  for (let y = GL + 2; y \u003c 126; y++) {\n    for (const [x, c] of WALLS) for (let i = 0; i \u003c 3; i++) F[(y * W + x) * 3 + i] = c[i] * sec;\n    for (const x of KP) for (let i = 0; i \u003c 2; i++) y \u003c srf[x] ? sur(x + i, y, ...STEEL, 0.62 + 0.23 * i) : put(x + i, y, kc);\n  }\n  for (let x = OR + 1; x \u003c= PR; x++) sur(x, GL + 2, 70, 74, 84), sur(x, GL + 3, 90, 94, 104, x % 6 ? 0.7 : 1.2);\n  // Struts with wales and jacks.\n  for (let j = 1; j \u003c= min(P.k, FIN - 1); j++) {\n    const y = strutY(j), end = j === P.k && P.wx >= 0 ? P.wx : PR;\n    for (let x = PL; x \u003c= end; x++) sur(x, y, ...STEEL, x % 11 === 3 ? 0.8 : 1.25), sur(x, y + 1, ...STEEL, 0.75);\n    for (let i = -1; i \u003c= 2; i++) {\n      for (const x of [PL, PL + 1, PR - 1, PR]) sur(x, y + i, 80, 84, 96);\n      if (end >= PR) for (let x = 46; x \u003c= 48; x++) surc(x, y + i, YEL, i \u003c 0 || i > 1 ? 0.7 : 1);\n    }\n  }\n  // Blinding concrete on the last floor.\n  const me = PL + min(1, P.mat) * (P.ex - PL - 8);\n  if (P.mat > 0) for (let x = PL; x \u003c= me; x++) for (let j = 0, o; j \u003c 3; j++) (o = at(x, srf[x] - j)), put(x, srf[x] - j, [0, 1, 2].map((c) => 200 * max(0.55, LM[o + c]) * (j ? 0.9 : 1.1)));\n  if (P.mat > 0 && P.mat \u003c 1) line(30, GL + 1, me, fy - 3, [96, 96, 104]);\n  // The pump's pool, and its hose up the wall to the tank.\n  for (let x = 45; x \u003c= PR; x++)\n    for (let y = round(fy - 0.4 - 2.6 * wt), g; y \u003c srf[x]; y++) (g = 0.5 + 0.5 * sin(x * 1.3 + P.t * 5 + y * 2)), sur(x, y, 60 + 60 * g, 96 + 60 * g, 132 + 50 * g);\n  for (let j = 1; j \u003c= 2; j++) sur(51, fy - j, ...HOSE), sur(52, fy - j, ...HOSE);\n  for (let y = fy - 2; y > GL - 2; y--) surc(PR, y, HOSE);\n  for (let x = PR; x \u003c 60; x++) surc(x, GL - 2, HOSE);\n  for (let x = 59; x \u003c= 62; x++) for (let y = 16; y \u003c GL; y++) sur(x, y, 120, 140, 160, y === 16 ? 1.2 : 0.8);\n  if (wt > 0.03) for (let j = 0; j \u003c 2; j++) put(59 + j, GL - 2 + j, RAIN, min(1, wt * 6) * (0.5 + 0.5 * sin(P.t * 20 + j)));\n}\n\nfunction excavator(P) {\n  const ex = P.ex, gy = round(P.fy), [bu, bv, ph] = P.E.p, f = cos(ph), X = (u) => ex + u * f, hw = 4.5 * abs(f) + 3.2 * abs(sin(ph)), nl = P.lampK;\n  for (let i = -6; i \u003c= 6; i++) for (let j = 1; j \u003c= 3; j++) (abs(i) \u003c 6 || j === 2) && sur(ex + i, gy - j, ...(j !== 2 && (i + floor(P.trk)) & 1 ? [92, 92, 96] : [46, 46, 50]));\n  for (let i = -3; i \u003c= 3; i++) sur(ex + i, gy - 4, 52, 50, 48);\n  for (let j = 5; j \u003c= 7; j++) for (let x = round(ex - hw); x \u003c= round(ex + hw); x++) surc(x, gy - j, YEL, j === 5 ? 0.7 : (x - ex) * f \u003c -2.5 ? 0.82 : 1);\n  const ca = round(min(X(0.5), X(3.5))), cb = max(ca + 1, round(max(X(0.5), X(3.5))));\n  for (let j = 8; j \u003c= 11; j++) for (let x = ca; x \u003c= cb; x++) j === 11 || x === (f >= 0 ? ca : cb) ? surc(x, gy - j, YEL) : (sur(x, gy - j, 110, 150, 180, 0.9), add(x, gy - j, WIN, 0.5 * nl));\n  // Boom and arm reach the bucket by two-link IK.\n  const [pu, pv, L1, L2] = [3, -6, 9, 8.5];\n  let tu = bu - pu, tv = bv - pv;\n  const dd = hypot(tu, tv) || 1, dc = cl(dd, 2, L1 + L2 - 0.05);\n  (tu *= dc / dd), (tv *= dc / dd);\n  const t1 = atan2(tv, tu) - acos(cl((L1 * L1 + dc * dc - L2 * L2) / (2 * L1 * dc), -1, 1)), eu = pu + L1 * cos(t1), ev = pv + L1 * sin(t1), bx = X(pu + tu), by = gy + pv + tv;\n  line(X(pu), gy + pv, X(eu), gy + ev, YEL), line(X(pu), gy + pv + 1, X(eu), gy + ev + 1, YEL, 0.75);\n  line(X(4), gy - 5, X(pu + (eu - pu) * 0.55), gy + pv + (ev - pv) * 0.55 + 1, [150, 150, 156]);\n  line(X(eu), gy + ev, bx, by, YEL, 0.9);\n  for (let i = 0; i \u003c= 2; i++) sur(bx - i * f, by, 74, 74, 80), sur(bx - i * f, by + 1, 74, 74, 80, 0.8), P.ec && surc(bx - i * f, by - 1, matCol(P), 1.1);\n  add(X(4.5), gy - 9, FLOOD, 255 * nl);\n}\n\n// A worker in hi-vis, feet on row y; a headlamp after dusk.\nfunction man(P, x, y, arm) {\n  sur(x, y, 40, 48, 90), sur(x, y - 1, 255, 128, 20), sur(x, y - 2, 255, 255, 240), arm && sur(x + 1, y - 2 - (arm > 0.5), 255, 128, 20);\n  add(x, y - 2, FLOOD, 200 * P.lampK);\n}\n\nfunction grab(P) {\n  const [tx, by, op] = P.C.p, X = round(tx), Y = round(by), HW = [3, 3.4, 3.4, 3, 2];\n  for (let y = 7; y \u003c Y; y++) sur(X - 1, y, 200, 200, 210), sur(X + 1, y, 200, 200, 210);\n  for (let i = -1; i \u003c= 1; i++) surc(X + i, Y, GAN, 1.2), surc(X + i, Y + 1, GAN, 0.85);\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = -6, a; i \u003c= 6; i++) (a = abs(i)) >= op * (0.4 + 0.9 * j) - 0.01 && a \u003c= HW[j] + op * 0.9 * j && (j === 4 || (op \u003c 0.3 && !i) ? sur(X + i, Y + 2 + j, 96, 100, 110) : surc(X + i, Y + 2 + j, GRAB, j ? 1 : 1.2));\n  if (P.full && op \u003c 0.5) for (let i = -2; i \u003c= 2; i++) surc(X + i, Y + 2, matCol(P), 1.2);\n  for (let i = -3; i \u003c= 3; i++) sur(X + i, 5, 70, 74, 84), surc(X + i, 6, GAN, abs(i) \u003c 2 ? 0.6 : 1);\n}\n\nfunction gantry(P) {\n  for (let y = 2; y \u003c GL; y++) for (const x of [4, 58]) surc(x, y, GAN), (y + (x >> 2)) % 3 && surc(x + 1, y, GAN, 0.7);\n  for (let x = 3; x \u003c= 60; x++) surc(x, 2, GAN, 1.1), surc(x, 4, GAN), (x + 1) % 3 || surc(x, 3, GAN, 0.8);\n  put(32, 1, P.rt % 1.4 \u003c 0.7 ? [255, 40, 30] : [90, 16, 14]);\n  // The railing, and the signalman at the edge.\n  for (let x = 8; x \u003c= OR; x++) sur(x, 17, ...((x >> 1) & 1 ? [230, 60, 50] : [236, 236, 236])), x % 6 === 2 && (sur(x, 18, 200, 200, 200), sur(x, 19, 200, 200, 200));\n  man(P, 35, GL - 1, P.C.ph \u003c 3 ? (P.rt * 2) % 1 : 0);\n}\n\nfunction truck(P) {\n  const o = round(P.tx), mc = matCol(P), hL = [0, 1.6, 2.7, 3.7][min(3, P.load)];\n  if (o > 30) return;\n  for (let x = 37; x \u003c= 50; x++)\n    for (let y = 9; y \u003c= 16; y++)\n      y > 12 ? sur(x + o, y, 196, 56, 44, y === 13 ? 1.25 : (x - 37) % 4 ? 1 : 0.75) : y > 12 - hL * (1 - ((x - 43.5) / 7) ** 2) && surc(x + o, y, mc, 0.85 + 0.3 * hash(x, y));\n  for (let x = 51; x \u003c= 56; x++) for (let y = 10; y \u003c= 16; y++) (y > 10 || x > 51) && (y \u003c 14 && y > 10 && x > 52 ? sur(x + o, y, 60, 90, 120) : sur(x + o, y, 50, 96, 200));\n  for (let x = 37; x \u003c= 56; x++) sur(x + o, 17, 50, 50, 54);\n  for (const x of [39, 43, 53]) sur(x + o, 18, 30, 30, 34), sur(x + o + 1, 18, 30, 30, 34), sur(x + o, 19, 120, 120, 126), sur(x + o + 1, 19, 30, 30, 34);\n  add(57 + o, 15, FLOOD, 255 * P.lampK), add(36 + o, 16, [255, 30, 20], P.lampK);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  if (P.snap) P.sn.set(F), (P.snap = 0);\n  const hh = P.h * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0)), mc = matCol(P), fy = round(P.fy);\n  light(P, K), sky(P, K), gantry(P), ground(P), excavator(P);\n  man(P, 12, round(P.srf[12] - max(0, heapH(P) - 9.9)) - 1, 0);\n  if (P.wx >= 0) man(P, round(P.wx) - 1, fy - 1, 1);\n  truck(P), grab(P);\n  // Sparks, drips, spoil and dust.\n  for (const [x, y, , , l, k] of P.pa) k ? (k > 1 ? surc(x, y, mc, 1.3) : put(x, y, [170, 210, 255], 0.8)) : put(x, y, [255, 200, 90], min(1, l * 2));\n  for (const [px, py, r, a] of P.du) {\n    const o0 = at(cl(px, 0, 63), cl(py, 0, 127)), R = Math.ceil(r), pc = mc.map((v, c) => mix(v, 210, 0.5) * min(1.3, 0.3 + LM[o0 + c]));\n    for (let y = round(py) - R; y \u003c= py + R; y++)\n      for (let x = round(px) - R, q; x \u003c= px + R; x++) (q = 1 - ((x - px) ** 2 + (y - py) ** 2) / (r * r)) > 0 && put(x, y, pc, min(1, a * q * q * 0.9));\n  }\n  // Haze in the shaft, thicker with dust.\n  for (let i = 0, hz = 8 + 30 * P.dust; i \u003c N; i++) if (P.shf[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += K[6 + c] * P.shf[i] * hz;\n  if (P.arc > 0) add(round(P.wx), strutY(P.k) + 1, FLOOD, 500);\n  if (P.bl >= 0 && P.bl \u003c 0.8 && P.bl % 0.3 \u003c 0.15) put(34, GL - 4, [255, 170, 30]), add(34, GL - 3, [255, 140, 20], 0.6);\n  // Rain past halfway, not under the deck.\n  for (let i = 0, rain = sm(0.45, 1, P.wt); i \u003c 160 * rain; i++) {\n    const y = ((hash(i, 2) * 150 + P.t * 70) % 150) - 10, x = (hash(i, 1) * 80 + y * 0.25) % 64;\n    if (x \u003c= OR + 0.5 || x >= PR + 1 || y \u003c= GL + 1) for (let j = 0; j \u003c 3; j++) put(x - j * 0.25, y - j, RAIN, 0.6 * (1 - j / 3) * (0.4 + 0.6 * P.dayF));\n  }\n  const off = P.sl >= 0 ? round(64 * sm(0, 1, P.sl)) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const xs = x + off, B = xs \u003c W && off ? P.sn : F, o = (y * W + (xs % W)) * 3;\n      display.setPixel(x, y, min(255, B[o]) | 0, min(255, B[o + 1]) | 0, min(255, B[o + 2]) | 0);\n    }\n}\n","layer":{"id":"layer-excavation","type":"code","name":"excavation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Excavation\n// Family:  construction\n// Idea:    A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the strutted basement excavations dug between city buildings\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1\n//\n// Knob 1: Hour. Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit.\n// Knob 2: Speed. At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too.\n// Knob 3: Depth. How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot.\n// Knob 4: Water. Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades.\n// Buttons: K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, acos, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street, the pit's inside, the opening's edge, the heap, the truck bed, the last stage.\nconst [GL, PL, PR, OR, HX, TT, FIN] = [20, 10, 53, 33, 21, 43, 11];\nconst strutY = (k) => 18 + 9 * k, floorY = (k) => 23 + 9 * k;\nconst KP = [29, 41], EXP = [37, 41, 44, 41];\n// Fill, clay, sand and gravel, weathered rock, rock, and the rows they end at.\nconst STRATA = [[96, 84, 78], [186, 106, 58], [206, 186, 142], [154, 138, 94], [118, 126, 146]];\nconst BOT = [27, 45, 64, 101, 999];\nconst layer = (x, y) => {\n  let i = 0;\n  while (i \u003c 4 && y >= BOT[i] + 5 * (vn(x * 0.09, i * 5.3) - 0.5)) i++;\n  return i;\n};\n// Noon, afternoon, dusk, night: sky top, horizon, sun, ambient, buildings.\nconst KEYS = [\n  [50, 116, 222, 168, 206, 240, 1, 0.95, 0.84, 0.92, 0.95, 1, 150, 158, 176],\n  [56, 100, 196, 232, 200, 160, 1, 0.82, 0.56, 0.8, 0.75, 0.72, 140, 128, 132],\n  [34, 32, 90, 236, 110, 70, 0.9, 0.5, 0.26, 0.5, 0.42, 0.5, 80, 66, 90],\n  [5, 7, 26, 22, 26, 60, 0, 0, 0, 0.13, 0.14, 0.22, 30, 32, 48],\n];\nconst WIN = [255, 196, 120], CAP = [176, 172, 166], DECK = [124, 118, 110], ROAD = [74, 74, 80], RAIN = [190, 210, 240], FLOOD = [1, 0.97, 0.9];\nconst WALLS = [[8, [120, 86, 54]], [9, [96, 104, 118]], [54, [96, 104, 118]], [55, [120, 86, 54]]];\nconst YEL = [250, 178, 26], GAN = [244, 204, 50], GRAB = [246, 142, 30], STEEL = [150, 160, 178], HOSE = [50, 80, 170];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F32(N * 3), lm: F32(N * 3), so: F32(N * 3), bw: F32(N * 3), sn: F32(N * 3), st: F32(N), shf: F32(N), sh: F32(200), rs: F32(H), srf: F32(W), dig: F32(W),\n    t: 0, rt: 0, nk: -1, cx: 42, du: [], pa: [], sl: -1, bl: -1, dust: 0.3, arc: 0, tx: 0, tv: 0, tph: 0, load: 2, tgo: 0,\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, L = layer(x, y), hh = hash(x, y), pd = hypot(x - 3, y - 24.5), px = (x - PL) % 7;\n    // The ground in section, each layer with its grain; a water main and ducts.\n    let k = 0.86 + 0.22 * hh, c = STRATA[L];\n    if (L === 0 && hh > 0.88) c = [150, 146, 140];\n    else if (L === 1) k = 0.9 + 0.14 * vn(x * 0.4, y * 0.7);\n    else if (L === 2 && hash(x >> 1, y >> 1) \u003c 0.2) c = [136, 132, 128];\n    else if (L === 3 && abs(vn(x * 0.3, y * 0.3) - 0.5) \u003c 0.04) k = 0.55;\n    else if (L === 4 && (x + y * 0.7 + 5 * vn(x * 0.2, y * 0.1)) % 13 \u003c 0.9) k = 0.6;\n    if (pd \u003c 2.2) (c = pd > 1.2 ? [96, 120, 150] : [26, 30, 36]), (k = 1);\n    if (x > 57 && x \u003c 63 && (y === 23 || y === 24) && x & 1) (c = [230, 120, 40]), (k = 1);\n    // The far wall: H-piles and lagging, shotcrete and rock bolts lower down.\n    const q = 0.8 + 0.35 * hash(floor((y - GL) / 3), floor((x - PL) / 7)), r = 0.84 + 0.22 * vn(x * 0.3, y * 0.3);\n    const b = y \u003c GL + 2 ? CAP : !px ? [86, 92, 104] : y > 65 ? (px === 3 && y % 8 === 4 ? [60, 60, 66] : [136 * r, 132 * r, 126 * r]) : (y - GL) % 3 > 1 ? [44, 34, 28] : [132 * q, 94 * q, 60 * q];\n    for (let j = 0; j \u003c 3; j++) (P.so[o + j] = c[j] * k), (P.bw[o + j] = b[j]);\n    P.st[i] = sm(0.42, 0.72, vn(x * 0.8, y * 0.06));\n  }\n  skyline(P);\n}\n\nfunction skyline(P) {\n  P.bd = [];\n  for (let x = 0, w, s; x \u003c W; x += w) (s = !x || x > 50), (w = !x ? 8 : s ? W - x : min(4 + floor(rnd() * 5), 56 - x)), P.bd.push([x, x + w - 1, s ? floor(rnd() * 3) : 6 + floor(rnd() * 8), rnd(), s]);\n}\n\n// A new lot, dug to stage k, with the grab already on its way down.\nfunction lot(P, k) {\n  Object.assign(P, { k, fy: floorY(k) + 2.5, hv: 64, wx: -1, mat: -1, ex: 41, ei: 1, sc: 1, ec: 0, full: 0, E: { p: [7, -9, 0] }, C: { p: [HX, 30, 1] } });\n  P.dig.fill(0);\n  go(P.E, 0, 0.7, [12, -3, 0]), go(P.C, 1, (P.fy - 43) / 46, [HX, P.fy - 13, 1]);\n}\n// A move eases a pose to b; the step functions chain moves.\nconst go = (m, ph, dur, b) => Object.assign(m, { ph, t: 0, dur: max(0.15, dur), a: m.p.slice(), b });\nfunction tick(m, d) {\n  const u = sm(0, 1, (m.t += d) / m.dur);\n  for (let i = 0; i \u003c 3; i++) m.p[i] = mix(m.a[i], m.b[i], u);\n  return u;\n}\nconst heapH = (P) => min(13, sqrt(1.1 * P.hv));\nconst heapTop = (P) => P.fy - heapH(P);\nconst matCol = (P) => STRATA[layer(30, P.fy + 2)];\nfunction puff(P, x, y, n, a, s = 1) {\n  for (let i = 0; i \u003c n; i++) P.du.push([x + (rnd() - 0.5) * 6 * s, y - rnd() * 2 * s, (1.5 + rnd() * 2) * s, a, (rnd() - 0.5) * 3 * s, -(2 + rnd() * 3) * s]);\n  P.dust = min(1, P.dust + 0.05 * n * a);\n}\n\n// Excavator: dig, lift, swing, drop it on the heap, swing back.\nfunction eStep(P, E) {\n  const ph = E.ph, up = [7, -9, 0];\n  if (ph === 0) go(E, 1, 1, [8, 1.5, 0]);\n  else if (ph === 1) {\n    const bx = round(P.ex + 8);\n    for (let i = -3; i \u003c= 3; i++) if (bx + i \u003c= PR) P.dig[bx + i] = max(P.dig[bx + i], 2.2 * cos(i * 0.39));\n    (P.fy += 32 / 44), (P.ec = 1), puff(P, bx, P.fy, 1, 0.3);\n    if (P.fy >= floorY(P.k + 1)) (P.fy = floorY(++P.k)), P.k \u003c FIN ? (P.wx = PL) : (P.mat = 0);\n    go(E, 2, 0.6, up);\n  } else if (ph === 2) go(E, 3, 1, [7, -9, PI]);\n  else if (ph === 3) go(E, 4, 0.6, [cl(P.ex - HX - 3, 6, 15), -heapH(P) * 0.7 - 3, PI]);\n  else if (ph === 4) (P.hv += 32), (P.ec = 0), puff(P, P.ex - E.p[0], heapTop(P), 2, 0.3), go(E, 5, 1.1, up);\n  else if (P.wx >= 0 || P.k >= FIN || P.hv > 150) go(E, 7, 0.5, up);\n  else if (ph === 5 && ++P.sc % 3 === 0) (P.ex0 = P.ex), (P.exT = EXP[(P.ei = (P.ei + 1) % 4)]), go(E, 6, 1.4, up);\n  else go(E, 0, 0.7, [12, -3, 0]);\n}\n\n// Grab: down open, close, haul up, over the truck, open.\nfunction cStep(P, C) {\n  const ph = C.ph, top = heapTop(P), up = [HX, 7, 0];\n  if (ph === 0) P.hv > 14 ? go(C, 1, 0.3 + (top - 12 - C.p[1]) / 46, [HX, top - 5, 1]) : go(C, 0, 0.3, up);\n  else if (ph === 1) go(C, 2, 0.7, [HX, top - 4, 0]);\n  else if (ph === 2) {\n    const g = min(P.hv, 60);\n    (P.hv -= g), (P.full = g > 4), puff(P, HX, top, 2, 0.3), go(C, 3, 0.4 + (C.p[1] - 7) / 36, up);\n  } else if (ph \u003c 5) P.tph === 0 && P.load \u003c 3 ? go(C, 5, 1.2, [TT, 7, 0]) : go(C, 4, 0.3, up);\n  else if (ph === 5) {\n    if (P.full) {\n      (P.load++), (P.full = 0), puff(P, TT, 11, 3, 0.5), P.load > 2 && (P.tgo = 0.6);\n      for (let i = 0; i \u003c 10; i++) P.pa.push([TT + (rnd() - 0.5) * 6, 13, 0, 4, 0.3, 2]);\n    }\n    go(C, 6, 0.6, [TT, 7, 1]);\n  } else go(C, ph === 6 ? 7 : 0, ph === 6 ? 1.1 : 0.2, up);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nk = round(cl(k[2], 8, 10)), h = (P.h = cl(k[0], 0, 1)), wt = (P.wt = cl(k[3], 0, 1));\n  if (nk !== P.nk) lot(P, (P.nk = nk));\n  (P.t += d), (P.rt += rd), (P.cx += 3.6 * d);\n  Object.assign(P, { dayF: 1 - sm(0.55, 0.92, h), sunI: (1 - sm(0.6, 0.85, h)) * (1 - 0.9 * sm(0.3, 0.85, wt)), slope: 0.12 + 0.95 * sm(0, 0.8, h), lampK: sm(0.45, 0.8, h) });\n  // K1 tap: the warning lamp, then the blast at the face.\n  if (input.btnPressed && input.btnPressed[0] && P.bl \u003c 0) P.bl = 0;\n  if (P.bl >= 0 && (P.bl += rd) >= 0.8 && !P.fired) {\n    P.fired = 1;\n    for (let i = 0; i \u003c 26; i++) P.pa.push([40 + (rnd() - 0.5) * 10, P.fy - 1, (rnd() - 0.5) * 30, -10 - rnd() * 22, 1.6, 2]);\n    for (let i = PL; i \u003c= PR; i++) P.dig[i] += 1.4 * exp(-(((i - 40) / 9) ** 2));\n    puff(P, 40, P.fy, 9, 1.2, 2), (P.fy += 0.8), (P.hv += 30), (P.dust = 1);\n  }\n  if (P.bl > 1.5) (P.bl = -1), (P.fired = 0);\n  const { E, C } = P, u = tick(E, d);\n  if (E.ph === 6) {\n    const nx = mix(P.ex0, P.exT, u);\n    (P.trk += nx - P.ex), (P.ex = nx);\n  }\n  if (u >= 1) eStep(P, E);\n  if (tick(C, d) >= 1) cStep(P, C);\n  if (P.full && C.ph === 3 && rnd() \u003c 4 * d) P.pa.push([C.p[0] + (rnd() - 0.5) * 5, C.p[1] + 7, 0, 2, 2, 2]);\n  // A truck leaves with three grabs and an empty one backs in.\n  if (P.tph === 0 && P.load > 2 && (P.tgo -= d) \u003c= 0) (P.tph = 1), (P.tv = 0);\n  if (P.tph === 1 && (P.tx += (P.tv = min(18, P.tv + 10 * d)) * d) > 30) (P.tph = 2), (P.load = 0);\n  if (P.tph === 2 && (P.tx -= (1.5 + 0.8 * P.tx) * d) \u003c= 0) (P.tx = 0), (P.tph = 0);\n  // The new strut is welded in from wall to wall.\n  if (P.wx >= 0) {\n    P.arc = rnd() \u003c 0.85 ? 0.5 + 0.5 * rnd() : 0;\n    if (rnd() \u003c 14 * d) P.pa.push([P.wx, strutY(P.k) + 2, (rnd() - 0.5) * 10, -2 - rnd() * 4, 0.6 + rnd() * 0.5, 0]);\n    if ((P.wx += 7 * d) > PR + 1) (P.wx = -1), (P.arc = 0);\n  }\n  // At the bottom: the blinding concrete, then on to the next lot.\n  if (P.k >= FIN && P.hv \u003c 15 && (P.mat += d / 6) > 1.4 && P.sl \u003c 0) (P.snap = 1), (P.sl = 0), lot(P, P.nk), skyline(P);\n  if (P.sl >= 0 && (P.sl += rd / 2.2) >= 1) P.sl = -1;\n  // Seepage drips below the water table.\n  const wtY = 78 - 34 * wt, e = exp(-0.25 * d);\n  if (P.fy > wtY + 6 && rnd() \u003c 6 * wt * d) P.pa.push([PL + 1 + rnd() * 42, wtY + rnd() * (P.fy - wtY - 5), 0, 0, 3, 1]);\n  for (let i = PL; i \u003c= PR; i++) P.dig[i] *= e;\n  P.dust = max(0.1, P.dust * e);\n  P.du = P.du.filter((p) => ((p[0] += p[4] * d), (p[1] += p[5] * d), (p[2] += 2.2 * d), (p[3] -= 0.22 * d) > 0));\n  P.pa = P.pa.filter((p) => ((p[3] += 40 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), (p[4] -= d) > 0 && p[1] \u003c (p[0] >= PL && p[0] \u003c= PR ? P.fy : H)));\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.3 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\nconst cloudA = (P, x, y) => cl((0.6 * vn((x + P.cx) * 0.07, y * 0.18) + 0.4 * vn((x + P.cx) * 0.19, y * 0.4 + 5) - 0.6 + 0.3 * P.wt) * 5, 0, 1);\n\nfunction lamp(x0, y0, r2, k, c) {\n  const R = Math.ceil(sqrt(r2 * 4.6)), gx = [];\n  for (let x = max(0, x0 - R); x \u003c= min(W - 1, x0 + R); x++) gx.push(x, k * exp(-((x - x0) ** 2) / r2));\n  for (let y = max(0, y0 - R); y \u003c= min(H - 1, y0 + R); y++)\n    for (let i = 0, g = exp(-((y - y0) ** 2) / r2); i \u003c gx.length; i += 2) for (let j = 0, o = (y * W + gx[i]) * 3; j \u003c 3; j++) LM[o + j] += c[j] * gx[i + 1] * g;\n}\n\n// Daylight with cloud shadows, the shaft of sun, the lamps.\nfunction light(P, K) {\n  const { sunI: sI, slope: s, rs, sh, shf, k: pk, lampK: nl } = P, ks = min(pk, FIN - 1);\n  for (let i = 0; i \u003c 200; i++) sh[i] = 1 - 0.85 * cloudA(P, i - 96, 7);\n  rs.fill(1);\n  for (let j = 1, y; j \u003c= ks; j++) (y = strutY(j)), (rs[y + 2] = rs[y + 4] = 0.6), (rs[y + 3] = 0.4);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, x0 = x - s * (y - GL), out = y \u003c GL + 2;\n    const a = out ? 1 : (0.62 - 0.003 * (y - GL)) * (x > OR ? 0.75 : 1);\n    const l = out ? 0.5 * sI * sh[x + 80] : sI > 0 && x0 > PL - 1.5 && x0 \u003c OR + 1.5 ? sI * sm(PL - 1.5, PL + 1, x0) * (1 - sm(OR - 1, OR + 1.5, x0)) * sh[floor(x0) + 80] * rs[y] * (1 - 0.0025 * (y - GL)) : 0;\n    shf[i] = out ? 0 : l;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[9 + c] * a + K[6 + c] * l * 0.95;\n  }\n  // Floods on the lowest strut; sodium lamps after dark.\n  lamp(17, strutY(ks) + 2, 260, 0.7, FLOOD), lamp(47, strutY(ks) + 2, 260, 0.7, FLOOD);\n  if (nl > 0) for (let j = 1; j \u003c= ks; j++) lamp(j & 1 ? 12 : 51, strutY(j) + 2, 60, 1.3 * nl, [1, 0.62, 0.24]);\n  if (P.arc > 0) lamp(round(P.wx), strutY(pk) + 1, 70, 1.4 * P.arc, [0.7, 0.85, 1]);\n  if (P.bl > 0.8) lamp(40, round(P.fy) - 3, 260, 1.8 * (1 - sm(0.8, 1.2, P.bl)), [1, 0.8, 0.5]);\n  const tx = P.C.p[0];\n  if (nl > 0)\n    for (let y = 8; y \u003c min(H, P.fy + 2); y++)\n      for (let hw = 1.5 + 0.16 * (y - 7), x = max(0, floor(tx - hw)); x \u003c= min(W - 1, tx + hw); x++)\n        for (let c = 0, e = ((0.9 * nl) / (1 + (y - 7) / 70)) * (1 - abs(x - tx) / hw); c \u003c 3; c++) LM[(y * W + x) * 3 + c] += e * (c > 1 ? 0.92 : 1);\n}\n\nfunction sky(P, K) {\n  const ov = 0.75 * sm(0.2, 1, P.wt), day = P.dayF, dk = 0.3 + 0.7 * day, cc = [0, 1, 2].map((c) => mix(mix(K[3 + c], 255, 0.55) * dk, 130 * dk, ov));\n  for (let i = 0; i \u003c GL * W; i++) {\n    const x = i & 63, y = i >> 6, u = y / (GL - 1), a = cloudA(P, x, y) * (0.9 - 0.4 * u);\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = mix(mix(mix(K[c], K[3 + c], u * u), 120 * (0.25 + 0.75 * day), ov), cc[c], a);\n  }\n  // The street's buildings, the two beside the pit tall.\n  for (const [x0, x1, top, v, side] of P.bd)\n    for (let y = top; y \u003c GL; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const win = (x - x0) % 3 === 1 && (y - top) % 3 === 1 && x \u003c x1, lit = hash(x * 7, y + floor(v * 99)) \u003c 0.45 && day \u003c 0.7;\n        for (let c = 0, b; c \u003c 3; c++) (b = K[12 + c] * (0.78 + 0.3 * v) * (x === x0 ? 0.8 : 1)), (b = win ? (lit ? WIN[c] * (1 - day) : b * 0.55 + 18 * c * day) : b), (F[(y * W + x) * 3 + c] = side ? b : mix(b, K[3 + c], 0.3));\n      }\n}\n\nfunction ground(P) {\n  const { so, bw, srf, wt, st, fy } = P, wtY = 78 - 34 * wt, sec = 0.42 + 0.52 * P.dayF, mc = matCol(P), hh = heapH(P), kc = STEEL.map((v) => v * 0.5 * sec);\n  for (let x = PL; x \u003c= PR; x++) srf[x] = fy + P.dig[x] + 0.6 * (hash(x, 7) - 0.5);\n  for (let i = GL * W; i \u003c N; i++) {\n    // Pavement, deck and caps; far wall and heap; the ground in section.\n    const x = i & 63, y = i >> 6, o = i * 3, pit = x >= PL && x \u003c= PR;\n    let A = so, a = o, L = 0, k = sec;\n    if (y \u003c GL + 2 && !(pit && x \u003c= OR)) (A = (x > 6 && x \u003c PL) || (x > PR && x \u003c 57) ? CAP : x > OR && x \u003c 56 ? DECK : ROAD), (a = 0), (L = 1), (k = y === GL ? 1.18 : A === DECK && (x + y) & 1 ? 0.86 : 1);\n    else if (pit && y \u003c srf[x]) (L = 1), y >= srf[x] - max(0, hh - abs(x - HX) * 1.1) ? ((A = mc), (a = 0), (k = 0.85 + 0.3 * hash(x, y))) : ((A = bw), (k = y > wtY ? 1 - 0.5 * wt * st[i] : 1));\n    else if (pit && y \u003c srf[x] + 1) (L = 1), (k = 1.15);\n    else if (!pit && y > wtY + 4) k *= 1 - 0.12 * wt;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = A[a + c] * k * (L ? LM[o + c] : 1);\n  }\n  // Walls and king posts down to their toes; the deck's beams.\n  for (let y = GL + 2; y \u003c 126; y++) {\n    for (const [x, c] of WALLS) for (let i = 0; i \u003c 3; i++) F[(y * W + x) * 3 + i] = c[i] * sec;\n    for (const x of KP) for (let i = 0; i \u003c 2; i++) y \u003c srf[x] ? sur(x + i, y, ...STEEL, 0.62 + 0.23 * i) : put(x + i, y, kc);\n  }\n  for (let x = OR + 1; x \u003c= PR; x++) sur(x, GL + 2, 70, 74, 84), sur(x, GL + 3, 90, 94, 104, x % 6 ? 0.7 : 1.2);\n  // Struts with wales and jacks.\n  for (let j = 1; j \u003c= min(P.k, FIN - 1); j++) {\n    const y = strutY(j), end = j === P.k && P.wx >= 0 ? P.wx : PR;\n    for (let x = PL; x \u003c= end; x++) sur(x, y, ...STEEL, x % 11 === 3 ? 0.8 : 1.25), sur(x, y + 1, ...STEEL, 0.75);\n    for (let i = -1; i \u003c= 2; i++) {\n      for (const x of [PL, PL + 1, PR - 1, PR]) sur(x, y + i, 80, 84, 96);\n      if (end >= PR) for (let x = 46; x \u003c= 48; x++) surc(x, y + i, YEL, i \u003c 0 || i > 1 ? 0.7 : 1);\n    }\n  }\n  // Blinding concrete on the last floor.\n  const me = PL + min(1, P.mat) * (P.ex - PL - 8);\n  if (P.mat > 0) for (let x = PL; x \u003c= me; x++) for (let j = 0, o; j \u003c 3; j++) (o = at(x, srf[x] - j)), put(x, srf[x] - j, [0, 1, 2].map((c) => 200 * max(0.55, LM[o + c]) * (j ? 0.9 : 1.1)));\n  if (P.mat > 0 && P.mat \u003c 1) line(30, GL + 1, me, fy - 3, [96, 96, 104]);\n  // The pump's pool, and its hose up the wall to the tank.\n  for (let x = 45; x \u003c= PR; x++)\n    for (let y = round(fy - 0.4 - 2.6 * wt), g; y \u003c srf[x]; y++) (g = 0.5 + 0.5 * sin(x * 1.3 + P.t * 5 + y * 2)), sur(x, y, 60 + 60 * g, 96 + 60 * g, 132 + 50 * g);\n  for (let j = 1; j \u003c= 2; j++) sur(51, fy - j, ...HOSE), sur(52, fy - j, ...HOSE);\n  for (let y = fy - 2; y > GL - 2; y--) surc(PR, y, HOSE);\n  for (let x = PR; x \u003c 60; x++) surc(x, GL - 2, HOSE);\n  for (let x = 59; x \u003c= 62; x++) for (let y = 16; y \u003c GL; y++) sur(x, y, 120, 140, 160, y === 16 ? 1.2 : 0.8);\n  if (wt > 0.03) for (let j = 0; j \u003c 2; j++) put(59 + j, GL - 2 + j, RAIN, min(1, wt * 6) * (0.5 + 0.5 * sin(P.t * 20 + j)));\n}\n\nfunction excavator(P) {\n  const ex = P.ex, gy = round(P.fy), [bu, bv, ph] = P.E.p, f = cos(ph), X = (u) => ex + u * f, hw = 4.5 * abs(f) + 3.2 * abs(sin(ph)), nl = P.lampK;\n  for (let i = -6; i \u003c= 6; i++) for (let j = 1; j \u003c= 3; j++) (abs(i) \u003c 6 || j === 2) && sur(ex + i, gy - j, ...(j !== 2 && (i + floor(P.trk)) & 1 ? [92, 92, 96] : [46, 46, 50]));\n  for (let i = -3; i \u003c= 3; i++) sur(ex + i, gy - 4, 52, 50, 48);\n  for (let j = 5; j \u003c= 7; j++) for (let x = round(ex - hw); x \u003c= round(ex + hw); x++) surc(x, gy - j, YEL, j === 5 ? 0.7 : (x - ex) * f \u003c -2.5 ? 0.82 : 1);\n  const ca = round(min(X(0.5), X(3.5))), cb = max(ca + 1, round(max(X(0.5), X(3.5))));\n  for (let j = 8; j \u003c= 11; j++) for (let x = ca; x \u003c= cb; x++) j === 11 || x === (f >= 0 ? ca : cb) ? surc(x, gy - j, YEL) : (sur(x, gy - j, 110, 150, 180, 0.9), add(x, gy - j, WIN, 0.5 * nl));\n  // Boom and arm reach the bucket by two-link IK.\n  const [pu, pv, L1, L2] = [3, -6, 9, 8.5];\n  let tu = bu - pu, tv = bv - pv;\n  const dd = hypot(tu, tv) || 1, dc = cl(dd, 2, L1 + L2 - 0.05);\n  (tu *= dc / dd), (tv *= dc / dd);\n  const t1 = atan2(tv, tu) - acos(cl((L1 * L1 + dc * dc - L2 * L2) / (2 * L1 * dc), -1, 1)), eu = pu + L1 * cos(t1), ev = pv + L1 * sin(t1), bx = X(pu + tu), by = gy + pv + tv;\n  line(X(pu), gy + pv, X(eu), gy + ev, YEL), line(X(pu), gy + pv + 1, X(eu), gy + ev + 1, YEL, 0.75);\n  line(X(4), gy - 5, X(pu + (eu - pu) * 0.55), gy + pv + (ev - pv) * 0.55 + 1, [150, 150, 156]);\n  line(X(eu), gy + ev, bx, by, YEL, 0.9);\n  for (let i = 0; i \u003c= 2; i++) sur(bx - i * f, by, 74, 74, 80), sur(bx - i * f, by + 1, 74, 74, 80, 0.8), P.ec && surc(bx - i * f, by - 1, matCol(P), 1.1);\n  add(X(4.5), gy - 9, FLOOD, 255 * nl);\n}\n\n// A worker in hi-vis, feet on row y; a headlamp after dusk.\nfunction man(P, x, y, arm) {\n  sur(x, y, 40, 48, 90), sur(x, y - 1, 255, 128, 20), sur(x, y - 2, 255, 255, 240), arm && sur(x + 1, y - 2 - (arm > 0.5), 255, 128, 20);\n  add(x, y - 2, FLOOD, 200 * P.lampK);\n}\n\nfunction grab(P) {\n  const [tx, by, op] = P.C.p, X = round(tx), Y = round(by), HW = [3, 3.4, 3.4, 3, 2];\n  for (let y = 7; y \u003c Y; y++) sur(X - 1, y, 200, 200, 210), sur(X + 1, y, 200, 200, 210);\n  for (let i = -1; i \u003c= 1; i++) surc(X + i, Y, GAN, 1.2), surc(X + i, Y + 1, GAN, 0.85);\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = -6, a; i \u003c= 6; i++) (a = abs(i)) >= op * (0.4 + 0.9 * j) - 0.01 && a \u003c= HW[j] + op * 0.9 * j && (j === 4 || (op \u003c 0.3 && !i) ? sur(X + i, Y + 2 + j, 96, 100, 110) : surc(X + i, Y + 2 + j, GRAB, j ? 1 : 1.2));\n  if (P.full && op \u003c 0.5) for (let i = -2; i \u003c= 2; i++) surc(X + i, Y + 2, matCol(P), 1.2);\n  for (let i = -3; i \u003c= 3; i++) sur(X + i, 5, 70, 74, 84), surc(X + i, 6, GAN, abs(i) \u003c 2 ? 0.6 : 1);\n}\n\nfunction gantry(P) {\n  for (let y = 2; y \u003c GL; y++) for (const x of [4, 58]) surc(x, y, GAN), (y + (x >> 2)) % 3 && surc(x + 1, y, GAN, 0.7);\n  for (let x = 3; x \u003c= 60; x++) surc(x, 2, GAN, 1.1), surc(x, 4, GAN), (x + 1) % 3 || surc(x, 3, GAN, 0.8);\n  put(32, 1, P.rt % 1.4 \u003c 0.7 ? [255, 40, 30] : [90, 16, 14]);\n  // The railing, and the signalman at the edge.\n  for (let x = 8; x \u003c= OR; x++) sur(x, 17, ...((x >> 1) & 1 ? [230, 60, 50] : [236, 236, 236])), x % 6 === 2 && (sur(x, 18, 200, 200, 200), sur(x, 19, 200, 200, 200));\n  man(P, 35, GL - 1, P.C.ph \u003c 3 ? (P.rt * 2) % 1 : 0);\n}\n\nfunction truck(P) {\n  const o = round(P.tx), mc = matCol(P), hL = [0, 1.6, 2.7, 3.7][min(3, P.load)];\n  if (o > 30) return;\n  for (let x = 37; x \u003c= 50; x++)\n    for (let y = 9; y \u003c= 16; y++)\n      y > 12 ? sur(x + o, y, 196, 56, 44, y === 13 ? 1.25 : (x - 37) % 4 ? 1 : 0.75) : y > 12 - hL * (1 - ((x - 43.5) / 7) ** 2) && surc(x + o, y, mc, 0.85 + 0.3 * hash(x, y));\n  for (let x = 51; x \u003c= 56; x++) for (let y = 10; y \u003c= 16; y++) (y > 10 || x > 51) && (y \u003c 14 && y > 10 && x > 52 ? sur(x + o, y, 60, 90, 120) : sur(x + o, y, 50, 96, 200));\n  for (let x = 37; x \u003c= 56; x++) sur(x + o, 17, 50, 50, 54);\n  for (const x of [39, 43, 53]) sur(x + o, 18, 30, 30, 34), sur(x + o + 1, 18, 30, 30, 34), sur(x + o, 19, 120, 120, 126), sur(x + o + 1, 19, 30, 30, 34);\n  add(57 + o, 15, FLOOD, 255 * P.lampK), add(36 + o, 16, [255, 30, 20], P.lampK);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  if (P.snap) P.sn.set(F), (P.snap = 0);\n  const hh = P.h * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0)), mc = matCol(P), fy = round(P.fy);\n  light(P, K), sky(P, K), gantry(P), ground(P), excavator(P);\n  man(P, 12, round(P.srf[12] - max(0, heapH(P) - 9.9)) - 1, 0);\n  if (P.wx >= 0) man(P, round(P.wx) - 1, fy - 1, 1);\n  truck(P), grab(P);\n  // Sparks, drips, spoil and dust.\n  for (const [x, y, , , l, k] of P.pa) k ? (k > 1 ? surc(x, y, mc, 1.3) : put(x, y, [170, 210, 255], 0.8)) : put(x, y, [255, 200, 90], min(1, l * 2));\n  for (const [px, py, r, a] of P.du) {\n    const o0 = at(cl(px, 0, 63), cl(py, 0, 127)), R = Math.ceil(r), pc = mc.map((v, c) => mix(v, 210, 0.5) * min(1.3, 0.3 + LM[o0 + c]));\n    for (let y = round(py) - R; y \u003c= py + R; y++)\n      for (let x = round(px) - R, q; x \u003c= px + R; x++) (q = 1 - ((x - px) ** 2 + (y - py) ** 2) / (r * r)) > 0 && put(x, y, pc, min(1, a * q * q * 0.9));\n  }\n  // Haze in the shaft, thicker with dust.\n  for (let i = 0, hz = 8 + 30 * P.dust; i \u003c N; i++) if (P.shf[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += K[6 + c] * P.shf[i] * hz;\n  if (P.arc > 0) add(round(P.wx), strutY(P.k) + 1, FLOOD, 500);\n  if (P.bl >= 0 && P.bl \u003c 0.8 && P.bl % 0.3 \u003c 0.15) put(34, GL - 4, [255, 170, 30]), add(34, GL - 3, [255, 140, 20], 0.6);\n  // Rain past halfway, not under the deck.\n  for (let i = 0, rain = sm(0.45, 1, P.wt); i \u003c 160 * rain; i++) {\n    const y = ((hash(i, 2) * 150 + P.t * 70) % 150) - 10, x = (hash(i, 1) * 80 + y * 0.25) % 64;\n    if (x \u003c= OR + 0.5 || x >= PR + 1 || y \u003c= GL + 1) for (let j = 0; j \u003c 3; j++) put(x - j * 0.25, y - j, RAIN, 0.6 * (1 - j / 3) * (0.4 + 0.6 * P.dayF));\n  }\n  const off = P.sl >= 0 ? round(64 * sm(0, 1, P.sl)) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const xs = x + off, B = xs \u003c W && off ? P.sn : F, o = (y * W + (xs % W)) * 3;\n      display.setPixel(x, y, min(255, B[o]) | 0, min(255, B[o + 1]) | 0, min(255, B[o + 2]) | 0);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too."},{"name":"Depth","min":8,"max":10,"about":"How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot."},{"name":"Water","min":0,"max":1,"about":"Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades."}],"start":[0,2,8,0.06],"measures":{"motion":0.0546,"detail":0.0796,"edges":0.3258,"complexity":1.9604,"coverage":0.986,"colour":0.2478,"drift":0.0543},"knobResponse":[0.2505,0.0522,0.0454,0.0762]},{"slug":"explicit-formula","title":"Explicit Formula","family":"number","round":39,"note":"소수 거듭제곱마다 log p 씩 뛰는 계단 ψ(x) 를 제타 함수의 영점으로 다시 지어요. x 가 아래로, ψ 가 옆으로 가고, 영점이 한 쌍씩 더해질 때마다 매끈한 선 x 에 물결이 붙다가 계단으로 날카로워지고, 제자리를 찾은 계단 띠부터 켜져요. 오른쪽 끝 세 열이 임계선이라 더해진 영점이 제 높이에서 켜져요.","idea":"The prime staircase psi(x), x running down the rows and psi across, is rebuilt from the zeros of the zeta function one pair at a time: the bare line x - log 2 pi grows waves that sharpen into steps, each step snapping onto its prime power and its band lighting up as it does, while the zeros taken so far light up one by one down a strip at the right and a count at the top.","buttons":"K1 tap takes every zero out and starts adding them again from the first.","code":"// ===== Patternflow pattern =====\n// Title:   Explicit Formula\n// Family:  number\n// Idea:    The prime staircase psi(x), x running down the rows and psi across, is rebuilt from the zeros of the zeta function one pair at a time: the bare line x - log 2 pi grows waves that sharpen into steps, each step snapping onto its prime power and its band lighting up as it does, while the zeros taken so far light up one by one down a strip at the right and a count at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Riemann's explicit formula (Bernhard Riemann, 1859), in von Mangoldt's form for the Chebyshev function psi (Hans von Mangoldt, 1895), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Reach=24..144, Tilt=0..1\n//\n// Knob 1: Hue. Turns the fill round the wheel, the shortfall colour a quarter turn on; gold stays gold. At 0 azure fill, violet where the sum falls short of the staircase and gold where it runs past; at 0.25 violet with orange, at 0.5 pale orange with green, at 0.75 green with azure. Orange and yellow fill is paled and dims less in its shaded bands, so it never reads brown.\n// Knob 2: Speed. How fast the zeros come in, each a little faster than the last: at 2 the first is in after 0.7 s, 10 by 4.2 s, 100 by 10.9 s and all 200 by 13.1 s; the staircase holds for 4 s, the zeros are taken out again in 1.9 s and the bare line rests 1 s, 20 s round. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Reach. How far x runs down the 128 rows, from 1 to Reach, with psi = 0 on column 3 and psi = Reach on column 57. At 24, the start, 13 prime powers, 5.6 rows to each unit of x and steps 1.6 to 7 LEDs wide; at 84 33 of them; at 144 47, the steps under 2 LEDs, and the staircase leans on the line x as the prime number theorem says it must. The 200 zeros resolve the staircase less sharply the further x runs.\n// Knob 4: Tilt. Takes Tilt times x away from both curves and widens the scale to match. Up to 0.06 the staircase itself; at 1 only psi(x) - x is left, a sawtooth that slides left one unit for each unit of x and jumps right by log p at each prime power, drawn 5 LEDs to the unit at Reach 24: the part of psi that the zeros alone make, their waves summing to the teeth.\n// Buttons: K1 tap takes every zero out and starts adding them again from the first.\n\nconst W = 64, H = 128, SS = 4, NS = H * SS, NZ = 200;\n// The imaginary parts of the first 200 zeros of the zeta function on the\n// critical line, rho = 1/2 + i gamma, to six places. 14.134725 is the first,\n// 396.381854 the 200th.\nconst GAM = [\n  14.134725, 21.022040, 25.010858, 30.424876, 32.935062, 37.586178, 40.918719, 43.327073, 48.005151, 49.773832,\n  52.970321, 56.446248, 59.347044, 60.831779, 65.112544, 67.079811, 69.546402, 72.067158, 75.704691, 77.144840,\n  79.337375, 82.910381, 84.735493, 87.425275, 88.809111, 92.491899, 94.651344, 95.870634, 98.831194, 101.317851,\n  103.725538, 105.446623, 107.168611, 111.029536, 111.874659, 114.320221, 116.226680, 118.790783, 121.370125, 122.946829,\n  124.256819, 127.516684, 129.578704, 131.087689, 133.497737, 134.756510, 138.116042, 139.736209, 141.123707, 143.111846,\n  146.000982, 147.422765, 150.053520, 150.925258, 153.024694, 156.112909, 157.597592, 158.849988, 161.188964, 163.030710,\n  165.537069, 167.184440, 169.094515, 169.911976, 173.411537, 174.754192, 176.441434, 178.377408, 179.916484, 182.207078,\n  184.874468, 185.598784, 187.228923, 189.416159, 192.026656, 193.079727, 195.265397, 196.876482, 198.015310, 201.264752,\n  202.493595, 204.189672, 205.394697, 207.906259, 209.576510, 211.690863, 213.347919, 214.547045, 216.169539, 219.067596,\n  220.714919, 221.430706, 224.007000, 224.983325, 227.421444, 229.337413, 231.250189, 231.987235, 233.693404, 236.524230,\n  237.769820, 239.555478, 241.049158, 242.823272, 244.070898, 247.136990, 248.101990, 249.573690, 251.014948, 253.069987,\n  255.306256, 256.380714, 258.610439, 259.874407, 260.805085, 263.573894, 265.557852, 266.614974, 267.921915, 269.970449,\n  271.494056, 273.459609, 275.587493, 276.452050, 278.250744, 279.229251, 282.465115, 283.211186, 284.835964, 286.667445,\n  287.911921, 289.579855, 291.846291, 293.558434, 294.965370, 295.573255, 297.979277, 299.840326, 301.649325, 302.696750,\n  304.864371, 305.728913, 307.219496, 310.109463, 311.165142, 312.427801, 313.985286, 315.475616, 317.734806, 318.853104,\n  321.160134, 322.144559, 323.466970, 324.862866, 327.443901, 329.033072, 329.953240, 331.474468, 333.645379, 334.211355,\n  336.841850, 338.339993, 339.858217, 341.042261, 342.054878, 344.661703, 346.347871, 347.272678, 349.316261, 350.408419,\n  351.878649, 353.488900, 356.017575, 357.151302, 357.952685, 359.743755, 361.289362, 363.331331, 364.736024, 366.212710,\n  367.993575, 368.968438, 370.050919, 373.061928, 373.864874, 375.825913, 376.324092, 378.436680, 379.872975, 381.484469,\n  383.443529, 384.956117, 385.861301, 387.222890, 388.846128, 391.456084, 392.245083, 393.427744, 395.582870, 396.381854,\n];\n// psi = 0 sits on column C0 and psi = Reach on column C0 + CW. The critical\n// line runs down columns ZC..ZC + 2, gamma 0 to GTOP over the 128 rows.\nconst C0 = 3, CW = 54, ZC = 61, GTOP = 400;\n// Zeros come in at dz/dt = ZB (ZA + z) a second at Speed 2: the first after\n// 0.7 s, 10 by 4.2 s, 100 by 10.9 s, all 200 by 13.1 s. Then they hold for\n// HOLD seconds, go out BACK times as fast and the bare line rests REST.\nconst ZA = 4, ZB = 0.3, HOLD = 4, BACK = 7, REST = 1;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst LOG2PI = Math.log(2 * Math.PI);\nconst { floor, min, max, abs, sqrt, log, exp, sin, cos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = [\n  0b111101101101111, 0b010110010010111, 0b111001111100111, 0b111001111001111, 0b101101111001001,\n  0b111100111001111, 0b111100111101111, 0b111001001001001, 0b111101111101111, 0b111101111001111,\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The prime powers p^k up to X, each with log p and k.\nfunction primePowers(X) {\n  const out = [];\n  for (let n = 2; n \u003c= X; n++) {\n    let p = 2;\n    while (n % p) p++;\n    let m = n, k = 0;\n    while (m % p === 0) (m /= p), k++;\n    if (m === 1) out.push([n, log(p), k]);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, reach: 0, tilt: 0, z: 0, stage: 0, clock: 0, nIn: 0,\n    xs: new Float64Array(NS), band: new Uint8Array(NS), base: new Float64Array(NS), tru: new Float64Array(NS), A: new Float64Array(NS),\n    v: new Float64Array(NS), lit: new Float32Array(64), err: new Float64Array(64), cnt: new Float64Array(64), bx: new Float64Array(64), cN: new Float32Array(SS), cT: new Float32Array(SS), pp: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    fill0: [0, 0, 0], fill1: [0, 0, 0], bg: [0, 0, 0], rim: [0, 0, 0], dot: [0, 0, 0], over: [0, 0, 0], short: [0, 0, 0],\n  };\n}\n\n// The pair rho, its conjugate at sample j: 2 Re(x^rho / rho)\n// = 2 sqrt(x) (cos(g L) / 2 + g sin(g L)) / (1/4 + g^2), L = log x.\nfunction term(S, n, j) {\n  const g = GAM[n], x = S.xs[j], L = log(x);\n  return (2 * sqrt(x) * (0.5 * cos(g * L) + g * sin(g * L))) / (0.25 + g * g);\n}\n\n// Zero n fully in (sign 1) or taken out (sign -1).\nfunction addZero(S, n, sign) {\n  for (let j = 0; j \u003c NS; j++) S.A[j] += sign * term(S, n, j);\n}\n\nfunction setReach(S, X) {\n  S.reach = X;\n  S.pp = primePowers(X);\n  for (let j = 0; j \u003c NS; j++) {\n    // Row y holds x from 1 + y (X - 1) / 128 to one row further on.\n    const x = 1 + ((j + 0.5) / NS) * (X - 1);\n    S.xs[j] = x;\n    S.base[j] = x - LOG2PI - 0.5 * log(1 - 1 / (x * x));\n    let p = 0, c = 0;\n    for (const q of S.pp) if (q[0] \u003c= x) (p += q[1]), c++;\n    S.tru[j] = p;\n    S.band[j] = c;\n  }\n  S.A.fill(0);\n  S.lit.fill(0);\n  for (let n = 0; n \u003c S.nIn; n++) addZero(S, n, 1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 24, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  // Up to 0.06 upright as it is, so the opening shows the staircase itself.\n  S.tilt = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const X = round(cl(k[2], 24, 144));\n  if (X !== S.reach) setReach(S, X);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.stage = 0;\n    S.z = 0;\n  }\n  const sp = (d * S.speed) / 2;\n  if (S.stage === 0) {\n    S.z += sp * ZB * (ZA + S.z);\n    if (S.z >= NZ) (S.z = NZ), (S.stage = 1), (S.clock = 0);\n  } else if (S.stage === 1) {\n    S.clock += sp;\n    if (S.clock > HOLD) S.stage = 2;\n  } else if (S.stage === 2) {\n    S.z -= sp * ZB * BACK * (ZA + S.z);\n    if (S.z \u003c= 0) (S.z = 0), (S.stage = 3), (S.clock = 0);\n  } else {\n    S.clock += sp;\n    if (S.clock > REST) S.stage = 0;\n  }\n  const n = min(NZ, floor(S.z));\n  while (S.nIn \u003c n) addZero(S, S.nIn++, 1);\n  while (S.nIn > n) addZero(S, --S.nIn, -1);\n  // The sum at every sample, the fading zero in by its fraction.\n  const { v, xs, base, tru, A, err, cnt, bx, band, lit } = S, f = n \u003c NZ ? S.z - n : 0;\n  for (let j = 0; j \u003c NS; j++) v[j] = base[j] - A[j] - (f > 0 ? f * term(S, n, j) : 0);\n  // A band has snapped onto its step when the sum's mean distance from the\n  // staircase across it is under 0.04 sqrt(x); it starts to light at 0.12.\n  const nb = S.pp.length + 1;\n  err.fill(0, 0, nb);\n  cnt.fill(0, 0, nb);\n  bx.fill(0, 0, nb);\n  for (let j = 0; j \u003c NS; j++) {\n    const q = band[j];\n    err[q] += abs(v[j] - tru[j]);\n    bx[q] += xs[j];\n    cnt[q]++;\n  }\n  const ease = 1 - exp(-d / 0.3);\n  for (let q = 0; q \u003c nb; q++) {\n    const r = cnt[q] ? err[q] / cnt[q] / sqrt(bx[q] / cnt[q]) : 1, u = cl((0.12 - r) / 0.08, 0, 1);\n    lit[q] += (u * u * (3 - 2 * u) - lit[q]) * ease;\n  }\n}\n\n// A colour that would read brown or olive, a dark orange or yellow, is\n// paled toward grey and lifted.\nfunction tone(h, s, v, out) {\n  const hh = h - floor(h), warm = cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1) * (1 - v);\n  hsv(h, s * (1 - 0.9 * warm), v * (1 + 1.1 * warm), out);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, v, xs, tru, cN, cT, fill0, fill1, bg, rim, dot, over, short } = S;\n  const X = S.reach, n = S.nIn, f = n \u003c NZ ? S.z - n : 0, t = S.tilt;\n  // Columns: psi - t x, so at Tilt 1 only what the zeros add is left, the\n  // scale closing in from the whole of psi to about 2.2 sqrt(Reach).\n  const sc = CW / ((1 - t) * X + t * 2.2 * sqrt(X)), c0 = C0 + 35 * t;\n\n  // Orange and yellow fill dims less, so its shaded bands never read brown.\n  const h = S.hue + H0, hh = h - floor(h), keep = 1 - 0.7 * cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1);\n  tone(h, 0.8, 0.6, fill0);\n  tone(h + 0.05, 0.75, 1, fill1);\n  hsv(0.64, 0.45, 0.15, bg);\n  tone(h + 0.25, 0.65, 0.8, short);\n  hsv(h - 0.03, 0.2, 1, rim);\n  hsv(h, 0.35, 1, dot);\n  over[0] = 1;\n  over[1] = 0.8;\n  over[2] = 0.45;\n  // The newest zero's wave, faintly in the fill while it comes in.\n  const wave = n \u003c NZ ? 0.1 * sin(PI * f) * sqrt(GAM[0] / GAM[n]) : 0, gw = n \u003c NZ ? GAM[n] : 0;\n\n  let prevC = c0 + (v[0] - t * xs[0]) * sc;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1);\n    const fr = fill0[0] + (fill1[0] - fill0[0]) * u, fg = fill0[1] + (fill1[1] - fill0[1]) * u, fb = fill0[2] + (fill1[2] - fill0[2]) * u;\n    const bk = 0.8 + 0.4 * u;\n    // Where the curve runs in this row: the span between the last sample of\n    // the row above and every sample of this one.\n    let lo = prevC, hi = prevC;\n    for (let q = 0; q \u003c SS; q++) {\n      const j = y * SS + q, cc = c0 + (v[j] - t * xs[j]) * sc;\n      cN[q] = cc;\n      cT[q] = c0 + (tru[j] - t * xs[j]) * sc;\n      if (cc \u003c lo) lo = cc;\n      if (cc > hi) hi = cc;\n      prevC = cc;\n    }\n    // Between one prime power and the next the fill is a band, every other\n    // band a little lighter, so the gaps between them show as band heights,\n    // and a band stays dim until the sum has snapped onto its step.\n    const bq = S.band[y * SS + 2];\n    const wv = (1 + wave * sin(gw * log(xs[y * SS + 2]))) * (bq & 1 ? 1.08 : 0.92) * (0.45 + 0.55 * S.lit[bq]);\n    const edge = (cN[0] + cN[1] + cN[2] + cN[3]) / 4;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Under both the sum and the staircase: the fill. Under the sum alone,\n      // where it runs past the staircase: gold. Under the staircase alone,\n      // where the sum falls short: the second colour. Under neither: dark.\n      let both = 0, ov = 0, sh = 0;\n      for (let q = 0; q \u003c SS; q++) {\n        const a = cl(cN[q] - x, 0, 1), b = cl(cT[q] - x, 0, 1), m = a \u003c b ? a : b;\n        both += m;\n        ov += a - m;\n        sh += b - m;\n      }\n      both /= SS;\n      ov /= SS;\n      sh /= SS;\n      const no = 1 - both - ov - sh, gl = 1 - (1 - wv * (0.55 + 0.45 * exp((x - edge) / 9))) * keep;\n      let r = bg[0] * bk * no + fr * gl * both + over[0] * ov + short[0] * sh;\n      let g = bg[1] * bk * no + fg * gl * both + over[1] * ov + short[1] * sh;\n      let b = bg[2] * bk * no + fb * gl * both + over[2] * ov + short[2] * sh;\n      // The curve itself: every LED its span touches.\n      const rr = cl(1 - max(lo - (x + 1), x - hi), 0, 1) * 0.75;\n      r += (rim[0] - r) * rr;\n      g += (rim[1] - g) * rr;\n      b += (rim[2] - b) * rr;\n      R[p] = r;\n      G[p] = g;\n      B[p] = b;\n    }\n  }\n  // Ticks down the left edge at each prime power: three LEDs for a prime,\n  // two for a square, one for a higher power.\n  for (const q of S.pp) {\n    const y = floor(((q[0] - 1) / (X - 1)) * H);\n    if (y \u003c 0 || y >= H) continue;\n    const len = q[2] === 1 ? 3 : q[2] === 2 ? 2 : 1;\n    for (let x = 0; x \u003c len; x++) {\n      const p = y * W + x;\n      R[p] = over[0];\n      G[p] = over[1];\n      B[p] = over[2];\n    }\n  }\n  // The critical line: every zero a dot at its height, dim until it is in.\n  for (let x = ZC; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      R[p] *= 0.5;\n      G[p] *= 0.5;\n      B[p] *= 0.5;\n    }\n  for (let m = 0; m \u003c NZ; m++) {\n    const yy = (GAM[m] / GTOP) * H - 0.5, y0 = floor(yy), fy = yy - y0;\n    const a = m \u003c n ? 1 : m === n ? 0.15 + 0.85 * f : 0.15, flash = m === n ? 1 : m === n - 1 ? 1 - f : 0;\n    for (let x = ZC; x \u003c W; x++)\n      for (let e = 0; e \u003c 2; e++) {\n        const y = y0 + e, wgt = e ? fy : 1 - fy;\n        if (y \u003c 0 || y >= H) continue;\n        const p = y * W + x;\n        R[p] += wgt * a * (dot[0] + flash);\n        G[p] += wgt * a * (dot[1] + flash);\n        B[p] += wgt * a * (dot[2] + flash);\n      }\n  }\n  // How many zeros are in, at the top right.\n  const digits = String(min(NZ, round(S.z)));\n  let x0 = ZC - 3 - (digits.length * 8 - 2);\n  for (const ch of digits) {\n    const bits = FONT[+ch];\n    for (let r = 0; r \u003c 5; r++)\n      for (let cc = 0; cc \u003c 3; cc++)\n        if ((bits >> (14 - r * 3 - cc)) & 1)\n          for (let a = 0; a \u003c 4; a++) {\n            const p = (3 + r * 2 + (a >> 1)) * W + x0 + cc * 2 + (a & 1);\n            R[p] = dot[0];\n            G[p] = dot[1];\n            B[p] = dot[2];\n          }\n    x0 += 8;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","layer":{"id":"layer-explicit-formula","type":"code","name":"explicit-formula","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Explicit Formula\n// Family:  number\n// Idea:    The prime staircase psi(x), x running down the rows and psi across, is rebuilt from the zeros of the zeta function one pair at a time: the bare line x - log 2 pi grows waves that sharpen into steps, each step snapping onto its prime power and its band lighting up as it does, while the zeros taken so far light up one by one down a strip at the right and a count at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Riemann's explicit formula (Bernhard Riemann, 1859), in von Mangoldt's form for the Chebyshev function psi (Hans von Mangoldt, 1895), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Reach=24..144, Tilt=0..1\n//\n// Knob 1: Hue. Turns the fill round the wheel, the shortfall colour a quarter turn on; gold stays gold. At 0 azure fill, violet where the sum falls short of the staircase and gold where it runs past; at 0.25 violet with orange, at 0.5 pale orange with green, at 0.75 green with azure. Orange and yellow fill is paled and dims less in its shaded bands, so it never reads brown.\n// Knob 2: Speed. How fast the zeros come in, each a little faster than the last: at 2 the first is in after 0.7 s, 10 by 4.2 s, 100 by 10.9 s and all 200 by 13.1 s; the staircase holds for 4 s, the zeros are taken out again in 1.9 s and the bare line rests 1 s, 20 s round. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Reach. How far x runs down the 128 rows, from 1 to Reach, with psi = 0 on column 3 and psi = Reach on column 57. At 24, the start, 13 prime powers, 5.6 rows to each unit of x and steps 1.6 to 7 LEDs wide; at 84 33 of them; at 144 47, the steps under 2 LEDs, and the staircase leans on the line x as the prime number theorem says it must. The 200 zeros resolve the staircase less sharply the further x runs.\n// Knob 4: Tilt. Takes Tilt times x away from both curves and widens the scale to match. Up to 0.06 the staircase itself; at 1 only psi(x) - x is left, a sawtooth that slides left one unit for each unit of x and jumps right by log p at each prime power, drawn 5 LEDs to the unit at Reach 24: the part of psi that the zeros alone make, their waves summing to the teeth.\n// Buttons: K1 tap takes every zero out and starts adding them again from the first.\n\nconst W = 64, H = 128, SS = 4, NS = H * SS, NZ = 200;\n// The imaginary parts of the first 200 zeros of the zeta function on the\n// critical line, rho = 1/2 + i gamma, to six places. 14.134725 is the first,\n// 396.381854 the 200th.\nconst GAM = [\n  14.134725, 21.022040, 25.010858, 30.424876, 32.935062, 37.586178, 40.918719, 43.327073, 48.005151, 49.773832,\n  52.970321, 56.446248, 59.347044, 60.831779, 65.112544, 67.079811, 69.546402, 72.067158, 75.704691, 77.144840,\n  79.337375, 82.910381, 84.735493, 87.425275, 88.809111, 92.491899, 94.651344, 95.870634, 98.831194, 101.317851,\n  103.725538, 105.446623, 107.168611, 111.029536, 111.874659, 114.320221, 116.226680, 118.790783, 121.370125, 122.946829,\n  124.256819, 127.516684, 129.578704, 131.087689, 133.497737, 134.756510, 138.116042, 139.736209, 141.123707, 143.111846,\n  146.000982, 147.422765, 150.053520, 150.925258, 153.024694, 156.112909, 157.597592, 158.849988, 161.188964, 163.030710,\n  165.537069, 167.184440, 169.094515, 169.911976, 173.411537, 174.754192, 176.441434, 178.377408, 179.916484, 182.207078,\n  184.874468, 185.598784, 187.228923, 189.416159, 192.026656, 193.079727, 195.265397, 196.876482, 198.015310, 201.264752,\n  202.493595, 204.189672, 205.394697, 207.906259, 209.576510, 211.690863, 213.347919, 214.547045, 216.169539, 219.067596,\n  220.714919, 221.430706, 224.007000, 224.983325, 227.421444, 229.337413, 231.250189, 231.987235, 233.693404, 236.524230,\n  237.769820, 239.555478, 241.049158, 242.823272, 244.070898, 247.136990, 248.101990, 249.573690, 251.014948, 253.069987,\n  255.306256, 256.380714, 258.610439, 259.874407, 260.805085, 263.573894, 265.557852, 266.614974, 267.921915, 269.970449,\n  271.494056, 273.459609, 275.587493, 276.452050, 278.250744, 279.229251, 282.465115, 283.211186, 284.835964, 286.667445,\n  287.911921, 289.579855, 291.846291, 293.558434, 294.965370, 295.573255, 297.979277, 299.840326, 301.649325, 302.696750,\n  304.864371, 305.728913, 307.219496, 310.109463, 311.165142, 312.427801, 313.985286, 315.475616, 317.734806, 318.853104,\n  321.160134, 322.144559, 323.466970, 324.862866, 327.443901, 329.033072, 329.953240, 331.474468, 333.645379, 334.211355,\n  336.841850, 338.339993, 339.858217, 341.042261, 342.054878, 344.661703, 346.347871, 347.272678, 349.316261, 350.408419,\n  351.878649, 353.488900, 356.017575, 357.151302, 357.952685, 359.743755, 361.289362, 363.331331, 364.736024, 366.212710,\n  367.993575, 368.968438, 370.050919, 373.061928, 373.864874, 375.825913, 376.324092, 378.436680, 379.872975, 381.484469,\n  383.443529, 384.956117, 385.861301, 387.222890, 388.846128, 391.456084, 392.245083, 393.427744, 395.582870, 396.381854,\n];\n// psi = 0 sits on column C0 and psi = Reach on column C0 + CW. The critical\n// line runs down columns ZC..ZC + 2, gamma 0 to GTOP over the 128 rows.\nconst C0 = 3, CW = 54, ZC = 61, GTOP = 400;\n// Zeros come in at dz/dt = ZB (ZA + z) a second at Speed 2: the first after\n// 0.7 s, 10 by 4.2 s, 100 by 10.9 s, all 200 by 13.1 s. Then they hold for\n// HOLD seconds, go out BACK times as fast and the bare line rests REST.\nconst ZA = 4, ZB = 0.3, HOLD = 4, BACK = 7, REST = 1;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst LOG2PI = Math.log(2 * Math.PI);\nconst { floor, min, max, abs, sqrt, log, exp, sin, cos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = [\n  0b111101101101111, 0b010110010010111, 0b111001111100111, 0b111001111001111, 0b101101111001001,\n  0b111100111001111, 0b111100111101111, 0b111001001001001, 0b111101111101111, 0b111101111001111,\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The prime powers p^k up to X, each with log p and k.\nfunction primePowers(X) {\n  const out = [];\n  for (let n = 2; n \u003c= X; n++) {\n    let p = 2;\n    while (n % p) p++;\n    let m = n, k = 0;\n    while (m % p === 0) (m /= p), k++;\n    if (m === 1) out.push([n, log(p), k]);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, reach: 0, tilt: 0, z: 0, stage: 0, clock: 0, nIn: 0,\n    xs: new Float64Array(NS), band: new Uint8Array(NS), base: new Float64Array(NS), tru: new Float64Array(NS), A: new Float64Array(NS),\n    v: new Float64Array(NS), lit: new Float32Array(64), err: new Float64Array(64), cnt: new Float64Array(64), bx: new Float64Array(64), cN: new Float32Array(SS), cT: new Float32Array(SS), pp: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    fill0: [0, 0, 0], fill1: [0, 0, 0], bg: [0, 0, 0], rim: [0, 0, 0], dot: [0, 0, 0], over: [0, 0, 0], short: [0, 0, 0],\n  };\n}\n\n// The pair rho, its conjugate at sample j: 2 Re(x^rho / rho)\n// = 2 sqrt(x) (cos(g L) / 2 + g sin(g L)) / (1/4 + g^2), L = log x.\nfunction term(S, n, j) {\n  const g = GAM[n], x = S.xs[j], L = log(x);\n  return (2 * sqrt(x) * (0.5 * cos(g * L) + g * sin(g * L))) / (0.25 + g * g);\n}\n\n// Zero n fully in (sign 1) or taken out (sign -1).\nfunction addZero(S, n, sign) {\n  for (let j = 0; j \u003c NS; j++) S.A[j] += sign * term(S, n, j);\n}\n\nfunction setReach(S, X) {\n  S.reach = X;\n  S.pp = primePowers(X);\n  for (let j = 0; j \u003c NS; j++) {\n    // Row y holds x from 1 + y (X - 1) / 128 to one row further on.\n    const x = 1 + ((j + 0.5) / NS) * (X - 1);\n    S.xs[j] = x;\n    S.base[j] = x - LOG2PI - 0.5 * log(1 - 1 / (x * x));\n    let p = 0, c = 0;\n    for (const q of S.pp) if (q[0] \u003c= x) (p += q[1]), c++;\n    S.tru[j] = p;\n    S.band[j] = c;\n  }\n  S.A.fill(0);\n  S.lit.fill(0);\n  for (let n = 0; n \u003c S.nIn; n++) addZero(S, n, 1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 24, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  // Up to 0.06 upright as it is, so the opening shows the staircase itself.\n  S.tilt = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const X = round(cl(k[2], 24, 144));\n  if (X !== S.reach) setReach(S, X);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.stage = 0;\n    S.z = 0;\n  }\n  const sp = (d * S.speed) / 2;\n  if (S.stage === 0) {\n    S.z += sp * ZB * (ZA + S.z);\n    if (S.z >= NZ) (S.z = NZ), (S.stage = 1), (S.clock = 0);\n  } else if (S.stage === 1) {\n    S.clock += sp;\n    if (S.clock > HOLD) S.stage = 2;\n  } else if (S.stage === 2) {\n    S.z -= sp * ZB * BACK * (ZA + S.z);\n    if (S.z \u003c= 0) (S.z = 0), (S.stage = 3), (S.clock = 0);\n  } else {\n    S.clock += sp;\n    if (S.clock > REST) S.stage = 0;\n  }\n  const n = min(NZ, floor(S.z));\n  while (S.nIn \u003c n) addZero(S, S.nIn++, 1);\n  while (S.nIn > n) addZero(S, --S.nIn, -1);\n  // The sum at every sample, the fading zero in by its fraction.\n  const { v, xs, base, tru, A, err, cnt, bx, band, lit } = S, f = n \u003c NZ ? S.z - n : 0;\n  for (let j = 0; j \u003c NS; j++) v[j] = base[j] - A[j] - (f > 0 ? f * term(S, n, j) : 0);\n  // A band has snapped onto its step when the sum's mean distance from the\n  // staircase across it is under 0.04 sqrt(x); it starts to light at 0.12.\n  const nb = S.pp.length + 1;\n  err.fill(0, 0, nb);\n  cnt.fill(0, 0, nb);\n  bx.fill(0, 0, nb);\n  for (let j = 0; j \u003c NS; j++) {\n    const q = band[j];\n    err[q] += abs(v[j] - tru[j]);\n    bx[q] += xs[j];\n    cnt[q]++;\n  }\n  const ease = 1 - exp(-d / 0.3);\n  for (let q = 0; q \u003c nb; q++) {\n    const r = cnt[q] ? err[q] / cnt[q] / sqrt(bx[q] / cnt[q]) : 1, u = cl((0.12 - r) / 0.08, 0, 1);\n    lit[q] += (u * u * (3 - 2 * u) - lit[q]) * ease;\n  }\n}\n\n// A colour that would read brown or olive, a dark orange or yellow, is\n// paled toward grey and lifted.\nfunction tone(h, s, v, out) {\n  const hh = h - floor(h), warm = cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1) * (1 - v);\n  hsv(h, s * (1 - 0.9 * warm), v * (1 + 1.1 * warm), out);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, v, xs, tru, cN, cT, fill0, fill1, bg, rim, dot, over, short } = S;\n  const X = S.reach, n = S.nIn, f = n \u003c NZ ? S.z - n : 0, t = S.tilt;\n  // Columns: psi - t x, so at Tilt 1 only what the zeros add is left, the\n  // scale closing in from the whole of psi to about 2.2 sqrt(Reach).\n  const sc = CW / ((1 - t) * X + t * 2.2 * sqrt(X)), c0 = C0 + 35 * t;\n\n  // Orange and yellow fill dims less, so its shaded bands never read brown.\n  const h = S.hue + H0, hh = h - floor(h), keep = 1 - 0.7 * cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1);\n  tone(h, 0.8, 0.6, fill0);\n  tone(h + 0.05, 0.75, 1, fill1);\n  hsv(0.64, 0.45, 0.15, bg);\n  tone(h + 0.25, 0.65, 0.8, short);\n  hsv(h - 0.03, 0.2, 1, rim);\n  hsv(h, 0.35, 1, dot);\n  over[0] = 1;\n  over[1] = 0.8;\n  over[2] = 0.45;\n  // The newest zero's wave, faintly in the fill while it comes in.\n  const wave = n \u003c NZ ? 0.1 * sin(PI * f) * sqrt(GAM[0] / GAM[n]) : 0, gw = n \u003c NZ ? GAM[n] : 0;\n\n  let prevC = c0 + (v[0] - t * xs[0]) * sc;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1);\n    const fr = fill0[0] + (fill1[0] - fill0[0]) * u, fg = fill0[1] + (fill1[1] - fill0[1]) * u, fb = fill0[2] + (fill1[2] - fill0[2]) * u;\n    const bk = 0.8 + 0.4 * u;\n    // Where the curve runs in this row: the span between the last sample of\n    // the row above and every sample of this one.\n    let lo = prevC, hi = prevC;\n    for (let q = 0; q \u003c SS; q++) {\n      const j = y * SS + q, cc = c0 + (v[j] - t * xs[j]) * sc;\n      cN[q] = cc;\n      cT[q] = c0 + (tru[j] - t * xs[j]) * sc;\n      if (cc \u003c lo) lo = cc;\n      if (cc > hi) hi = cc;\n      prevC = cc;\n    }\n    // Between one prime power and the next the fill is a band, every other\n    // band a little lighter, so the gaps between them show as band heights,\n    // and a band stays dim until the sum has snapped onto its step.\n    const bq = S.band[y * SS + 2];\n    const wv = (1 + wave * sin(gw * log(xs[y * SS + 2]))) * (bq & 1 ? 1.08 : 0.92) * (0.45 + 0.55 * S.lit[bq]);\n    const edge = (cN[0] + cN[1] + cN[2] + cN[3]) / 4;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Under both the sum and the staircase: the fill. Under the sum alone,\n      // where it runs past the staircase: gold. Under the staircase alone,\n      // where the sum falls short: the second colour. Under neither: dark.\n      let both = 0, ov = 0, sh = 0;\n      for (let q = 0; q \u003c SS; q++) {\n        const a = cl(cN[q] - x, 0, 1), b = cl(cT[q] - x, 0, 1), m = a \u003c b ? a : b;\n        both += m;\n        ov += a - m;\n        sh += b - m;\n      }\n      both /= SS;\n      ov /= SS;\n      sh /= SS;\n      const no = 1 - both - ov - sh, gl = 1 - (1 - wv * (0.55 + 0.45 * exp((x - edge) / 9))) * keep;\n      let r = bg[0] * bk * no + fr * gl * both + over[0] * ov + short[0] * sh;\n      let g = bg[1] * bk * no + fg * gl * both + over[1] * ov + short[1] * sh;\n      let b = bg[2] * bk * no + fb * gl * both + over[2] * ov + short[2] * sh;\n      // The curve itself: every LED its span touches.\n      const rr = cl(1 - max(lo - (x + 1), x - hi), 0, 1) * 0.75;\n      r += (rim[0] - r) * rr;\n      g += (rim[1] - g) * rr;\n      b += (rim[2] - b) * rr;\n      R[p] = r;\n      G[p] = g;\n      B[p] = b;\n    }\n  }\n  // Ticks down the left edge at each prime power: three LEDs for a prime,\n  // two for a square, one for a higher power.\n  for (const q of S.pp) {\n    const y = floor(((q[0] - 1) / (X - 1)) * H);\n    if (y \u003c 0 || y >= H) continue;\n    const len = q[2] === 1 ? 3 : q[2] === 2 ? 2 : 1;\n    for (let x = 0; x \u003c len; x++) {\n      const p = y * W + x;\n      R[p] = over[0];\n      G[p] = over[1];\n      B[p] = over[2];\n    }\n  }\n  // The critical line: every zero a dot at its height, dim until it is in.\n  for (let x = ZC; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      R[p] *= 0.5;\n      G[p] *= 0.5;\n      B[p] *= 0.5;\n    }\n  for (let m = 0; m \u003c NZ; m++) {\n    const yy = (GAM[m] / GTOP) * H - 0.5, y0 = floor(yy), fy = yy - y0;\n    const a = m \u003c n ? 1 : m === n ? 0.15 + 0.85 * f : 0.15, flash = m === n ? 1 : m === n - 1 ? 1 - f : 0;\n    for (let x = ZC; x \u003c W; x++)\n      for (let e = 0; e \u003c 2; e++) {\n        const y = y0 + e, wgt = e ? fy : 1 - fy;\n        if (y \u003c 0 || y >= H) continue;\n        const p = y * W + x;\n        R[p] += wgt * a * (dot[0] + flash);\n        G[p] += wgt * a * (dot[1] + flash);\n        B[p] += wgt * a * (dot[2] + flash);\n      }\n  }\n  // How many zeros are in, at the top right.\n  const digits = String(min(NZ, round(S.z)));\n  let x0 = ZC - 3 - (digits.length * 8 - 2);\n  for (const ch of digits) {\n    const bits = FONT[+ch];\n    for (let r = 0; r \u003c 5; r++)\n      for (let cc = 0; cc \u003c 3; cc++)\n        if ((bits >> (14 - r * 3 - cc)) & 1)\n          for (let a = 0; a \u003c 4; a++) {\n            const p = (3 + r * 2 + (a >> 1)) * W + x0 + cc * 2 + (a & 1);\n            R[p] = dot[0];\n            G[p] = dot[1];\n            B[p] = dot[2];\n          }\n    x0 += 8;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Reach=24..144, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the fill round the wheel, the shortfall colour a quarter turn on; gold stays gold. At 0 azure fill, violet where the sum falls short of the staircase and gold where it runs past; at 0.25 violet with orange, at 0.5 pale orange with green, at 0.75 green with azure. Orange and yellow fill is paled and dims less in its shaded bands, so it never reads brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the zeros come in, each a little faster than the last: at 2 the first is in after 0.7 s, 10 by 4.2 s, 100 by 10.9 s and all 200 by 13.1 s; the staircase holds for 4 s, the zeros are taken out again in 1.9 s and the bare line rests 1 s, 20 s round. At 0.2 ten times slower, at 3 one and a half times faster."},{"name":"Reach","min":24,"max":144,"about":"How far x runs down the 128 rows, from 1 to Reach, with psi = 0 on column 3 and psi = Reach on column 57. At 24, the start, 13 prime powers, 5.6 rows to each unit of x and steps 1.6 to 7 LEDs wide; at 84 33 of them; at 144 47, the steps under 2 LEDs, and the staircase leans on the line x as the prime number theorem says it must. The 200 zeros resolve the staircase less sharply the further x runs."},{"name":"Tilt","min":0,"max":1,"about":"Takes Tilt times x away from both curves and widens the scale to match. Up to 0.06 the staircase itself; at 1 only psi(x) - x is left, a sawtooth that slides left one unit for each unit of x and jumps right by log p at each prime power, drawn 5 LEDs to the unit at Reach 24: the part of psi that the zeros alone make, their waves summing to the teeth."}],"start":[0,2,24,0.06],"measures":{"motion":0.0929,"detail":0.028,"edges":0.4504,"complexity":0.7997,"coverage":0.9982,"colour":0.172,"drift":0.1028},"knobResponse":[0.141,0.0429,0.064,0.081]},{"slug":"ferris-wheel","title":"Ferris Wheel","family":"fair","round":25,"note":"밤 호숫가에서 지름 59 LED 의 관람차가 돌고, 곤돌라는 바퀴가 돌아도 늘 똑바로 매달려 있어요. 살과 테두리의 불빛이 쇼 여섯 가지를 6.5초씩 이어 가고, 호수가 바퀴와 불빛을 일렁이며 비춰요. K4 Wind 를 올리면 구름이 몰려오고 물그림자가 긴 빛줄기로 부서지며, 버튼은 다음 쇼로 넘겨요.","idea":"A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.","buttons":"K1 tap starts the next show at once.","code":"// ===== Patternflow pattern =====\n// Title:   Ferris Wheel\n// Family:  fair\n// Idea:    A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the light shows of the observation wheels on lake and river fronts\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1\n//\n// Knob 1: Lights. Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet.\n// Knob 2: Speed. How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower.\n// Knob 3: Spokes. How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one.\n// Knob 4: Wind. Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light.\n// Buttons: K1 tap starts the next show at once.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst fr = (v) => v - floor(v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The wheel: hub, outer rim with the lights, inner rim, and the truss between.\nconst CX = 32, CY = 38.5, R = 29.5, RI = 26.3, HUB = 3.6;\n// The first row of the lake, which is the line the scene mirrors in, the\n// promenade the legs stand on, and how much the reflection is squeezed.\nconst SEA = 87, FOOT = 84, SQ = 0.72;\n// Light bins along each spoke and round the rim; the shows paint these.\nconst NB = 24, NR = 120;\nconst SHOWS = 6, DUR = 6.5, FADE = 0.35;\nconst CLOUD = [12, 14, 28], LAKE = [3, 7, 22], TINT = [0.85, 0.92, 1];\n// A sine table for the ripples, which take five sines an LED.\nconst SN = F32(1024).map((_, i) => sin((i * TAU) / 1024));\nconst sn = (v) => SN[(v * 162.97) & 1023];\nconst STEEL = [26, 28, 42], LEG = [22, 24, 38], WARM = [255, 214, 150], WHITE = [255, 250, 240];\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, wt: 0, co: 0, rot: 0.2, st: 0, sh: 0, prev: -1, ps: 0, ns: 12, ng: 12, wind: 0.06, h: 0.53,\n    f: F32(N * 3), cn: F32(256 * 76), sky: F32(SEA * W * 3), gm: F32(SEA * W), fg: F32(N * 3), fm: F32(N), ga: F32(N * 3),\n    sp: F32(32 * NB * 3), rm: F32(NR * 3), hb: [0, 0, 0], sp2: F32(32 * NB * 3), rm2: F32(NR * 3), hb2: [0, 0, 0],\n    stars: [], people: [], cab: [],\n  });\n  // Night sky, paler towards the horizon, and the hills behind the far shore\n  // with a few houses lit.\n  for (let y = 0; y \u003c SEA; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y / SEA, o = (y * W + x) * 3, hy = 77 + 2.4 * sin(x * 0.11 + 0.7) + 1.4 * sin(x * 0.29 + 2);\n      let c = [3 + 14 * v * v, 5 + 18 * v * v, 22 + 46 * v * v];\n      if (y > hy) c = [7, 8, 18];\n      if (y > hy + 1 && hash(x, y) \u003c 0.025) c = [120, 96, 60];\n      P.sky.set(c, o);\n      // Where the wheel's light lands on the haze: round the wheel and low over the shore.\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2);\n      P.gm[y * W + x] = 0.75 * exp(-(max(0, r - 18) ** 2) / 420) + 0.45 * exp(-(SEA - y) / 22);\n    }\n  // Cloud: three octaves of value noise 256 wide, so it can scroll round.\n  const seed = floor(rnd() * 999);\n  const vn = (x, y, cx, cy, s) => {\n    const nx = 256 / cx, gx = x / cx, gy = y / cy, ix = floor(gx), iy = floor(gy), u = sm(0, 1, gx - ix), v = sm(0, 1, gy - iy);\n    const h = (i, j) => hash(((ix + i) % nx) + s, iy + j);\n    return mix(mix(h(0, 0), h(1, 0), u), mix(h(0, 1), h(1, 1), u), v);\n  };\n  for (let y = 0; y \u003c 76; y++) for (let x = 0; x \u003c 256; x++) P.cn[y * 256 + x] = 0.55 * vn(x, y, 32, 9, seed) + 0.3 * vn(x, y, 16, 5, seed + 7) + 0.15 * vn(x, y, 8, 3, seed + 13);\n  for (let i = 0; i \u003c 36; i++) P.stars.push([floor(rnd() * W), floor(rnd() * 46), 40 + rnd() * 70, rnd() * TAU, 0.6 + rnd()]);\n  // The promenade, the boarding platform with its stairs, two lamps and the\n  // ticket booth, kept as one layer with its own coverage.\n  const fg = (x, y, c, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    P.fg.set(c, (y * W + x) * 3);\n    P.fm[y * W + x] = a;\n  };\n  const glow = (gx, gy, c, k, s) => {\n    for (let y = max(0, gy - 12); y \u003c min(SEA, gy + 12); y++)\n      for (let x = max(0, gx - 12); x \u003c min(W, gx + 12); x++) {\n        const g = k * exp(-((x - gx) ** 2 + (y - gy) ** 2) / s);\n        for (let n = 0; n \u003c 3; n++) P.ga[(y * W + x) * 3 + n] += c[n] * g;\n      }\n  };\n  for (let x = 0; x \u003c W; x++) {\n    fg(x, 84, [34, 28, 32]);\n    fg(x, 85, [28, 24, 30]);\n    fg(x, 86, [64, 60, 70]);\n  }\n  for (let x = 22; x \u003c= 42; x++) fg(x, 77, [78, 74, 92]), fg(x, 78, [30, 30, 42]);\n  for (const x of [24, 32, 40]) for (let y = 79; y \u003c 84; y++) fg(x, y, [22, 22, 32]);\n  for (let i = 0; i \u003c 6; i++) fg(21 - i, 78 + i, [60, 56, 70]), fg(21 - i, 79 + i, [26, 24, 34]);\n  for (const lx of [5, 46]) {\n    for (let y = 76; y \u003c 84; y++) fg(lx, y, [36, 36, 48]);\n    fg(lx, 75, [255, 230, 180]);\n    fg(lx - 1, 75, [120, 100, 70]);\n    fg(lx + 1, 75, [120, 100, 70]);\n    glow(lx, 76, WARM, 0.32, 14);\n  }\n  for (let x = 53; x \u003c= 62; x++) {\n    const st = ((x - 53) >> 1) & 1 ? [226, 218, 206] : [200, 36, 56];\n    fg(x, 72, st);\n    if (!(x & 1)) fg(x, 73, st);\n    for (let y = 74; y \u003c 84; y++) fg(x, y, x === 53 || x === 62 ? [40, 22, 30] : [70, 34, 46]);\n  }\n  for (let y = 75; y \u003c= 78; y++) for (let x = 55; x \u003c= 60; x++) fg(x, y, [255, 196, 120].map((v) => v * (0.85 - 0.08 * (y - 75))));\n  for (const [x, y] of [[58, 76], [57, 78], [58, 78], [59, 78]]) fg(x, y, [40, 24, 24]);\n  fg(58, 77, [56, 32, 30]);\n  for (let x = 54; x \u003c= 61; x++) fg(x, 79, [160, 116, 70]), fg(x, 81, (x & 1) ? [240, 200, 90] : [110, 70, 40]);\n  glow(58, 80, [255, 180, 100], 0.28, 18);\n  // People on the promenade, a queue at the foot of the stairs and two who walk.\n  for (const [x, w] of [[9, 0], [14, 0], [17, 0], [49, 0], [27, 2.2], [40, -1.6]])\n    P.people.push({ x: x + 0.5, w, c: hsv(rnd(), 0.5, 0.25 + 0.15 * rnd()), sk: rnd() \u003c 0.5 });\n  for (let i = 0; i \u003c 32; i++) P.cab.push([0.55 + 0.45 * rnd(), rnd() \u003c 0.4]);\n}\n\nfunction next(P) {\n  P.prev = P.sh;\n  P.ps = P.st;\n  P.sh = (P.sh + 1) % SHOWS;\n  P.st = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  const v = cl(k[1], 0.2, 3) / 2;\n  let ns = round(cl(k[2], 12, 32));\n  if (ns > 18) ns += ns & 1;\n  Object.assign(P, { h: fr(0.53 + cl(k[0], 0, 1)), ns, ng: ns > 18 ? ns / 2 : ns, wind: cl(k[3], 0, 1) });\n  P.t += dt;\n  P.wt += dt * v * (0.7 + 1.5 * P.wind);\n  P.co += dt * v * (1 + 10 * P.wind);\n  P.rot += (dt * v * TAU) / 40;\n  P.st += dt * v;\n  if ((input.btnPressed && input.btnPressed[0]) || P.st >= DUR) next(P);\n  for (const q of P.people)\n    if (q.w) {\n      q.x += q.w * dt * v;\n      if (q.x > W + 3) q.x = -3;\n      if (q.x \u003c -3) q.x = W + 3;\n    }\n}\n\n// One show at its time s paints the spoke bins, the rim bins and the hub.\nfunction paint(P, sh, s, SP, RM, HB) {\n  const ns = P.ns, [A, B, C] = P.pal, rot = P.rot;\n  const spk = (k, b, c, I) => {\n    const o = (k * NB + b) * 3;\n    (SP[o] = c[0] * I), (SP[o + 1] = c[1] * I), (SP[o + 2] = c[2] * I);\n  };\n  const rim = (j, c, I) => ((RM[j * 3] = c[0] * I), (RM[j * 3 + 1] = c[1] * I), (RM[j * 3 + 2] = c[2] * I));\n  const lerp = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n  const hub = (c, I) => ((HB[0] = c[0] * I), (HB[1] = c[1] * I), (HB[2] = c[2] * I));\n  const uB = (b) => (b + 0.5) / NB;\n  if (sh === 0) {\n    // Light runs out along the spokes, brightest where a beam sweeps round\n    // against the turn; marquee bulbs chase round the rim and three white\n    // comets run through them.\n    const sw = fr(-s * 0.3), mq = floor(s * 9);\n    for (let k = 0; k \u003c ns; k++) {\n      const dl = fr(k / ns - sw), bm = exp(-dl / 0.22), wt = 0.5 * exp(-dl * ns * 1.5);\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), ds = exp(-(((fr(u * 2 - s * 1.1) - 0.5) / 0.17) ** 2));\n        spk(k, b, lerp(lerp(C, A, u), WHITE, wt), 0.14 + 0.25 * bm + 0.61 * ds * (0.45 + 0.55 * bm));\n      }\n    }\n    for (let j = 0; j \u003c NR; j++) {\n      let I = 0;\n      for (let m = 0; m \u003c 3; m++) I = max(I, exp(-fr(fr(s * 0.42 + m / 3) - j / NR) / 0.04));\n      rim(j, lerp(B, WHITE, I), max(I, (floor(j / 2) + mq) % 3 ? 0.22 : 0.9));\n    }\n    hub(A, 0.8);\n  } else if (sh === 1) {\n    // A colour wipe across the whole wheel, lit full, with a white front.\n    const X = CX + 35 * cos((PI * s) / 3.25), f0 = 0.88 * sm(0, 0.5, s);\n    const col = (x) => lerp(lerp(A, B, sm(X - 2.5, X + 2.5, x)), WHITE, 0.7 * exp(-(((x - X) / 2.2) ** 2)));\n    for (let k = 0; k \u003c ns; k++) {\n      const c = cos(rot + (TAU * k) / ns);\n      for (let b = 0; b \u003c NB; b++) spk(k, b, col(CX + (HUB + uB(b) * (R - HUB)) * c), f0);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, col(CX + R * cos(rot + (TAU * (j + 0.5)) / NR)), f0);\n    hub(col(CX), f0);\n  } else if (sh === 2) {\n    // A spiral arm winds out from the hub and round the wheel.\n    for (let k = 0; k \u003c ns; k++)\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), v = fr(u * 0.9 + k / ns - s * 0.45);\n        spk(k, b, lerp(B, C, u), 0.07 + 0.93 * exp(-(((v - 0.5) / 0.2) ** 2)));\n      }\n    for (let j = 0; j \u003c NR; j++) rim(j, A, fr((j / NR) * ns * 0.5 - s * 0.9) \u003c 0.5 ? 0.95 : 0.12);\n    hub(B, 0.9);\n  } else if (sh === 3) {\n    // Spoke after spoke lights up round the wheel and holds before it blinks out.\n    const n = (s / 3.6) * ns, blink = s > 4.8 && fr((s - 4.8) * 2.6) > 0.5;\n    for (let k = 0; k \u003c ns; k++) {\n      const I = blink ? 0.04 : k \u003c floor(n) ? 0.9 : k === floor(n) ? fr(n) : 0.05;\n      for (let b = 0; b \u003c NB; b++) spk(k, b, k === floor(n) ? WHITE : k & 1 ? B : A, I);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, C, blink ? 0.04 : j / NR \u003c n / ns ? 0.95 : 0.08);\n    hub(WHITE, blink ? 0.1 : 0.85);\n  } else if (sh === 4) {\n    // Rings run out from the hub, each a colour, and flash the rim on arriving.\n    SP.fill(0, 0, ns * NB * 3);\n    let Ir = 0.08, Ih = 0.2, cr = A;\n    for (let m = 0; m \u003c 3; m++) {\n      // Rings are born in the order A, C, B, so each takes the next colour.\n      const f = fr(s * 0.4 + m / 3), c = P.pal[m], e = exp(-(((1 - f) / 0.06) ** 2));\n      for (let k = 0; k \u003c ns; k++)\n        for (let b = 0; b \u003c NB; b++) {\n          const I = exp(-(((uB(b) - f) / 0.07) ** 2)), o = (k * NB + b) * 3;\n          for (let n = 0; n \u003c 3; n++) SP[o + n] += c[n] * I;\n        }\n      if (e > Ir) (Ir = e), (cr = c);\n      Ih = max(Ih, exp(-((f / 0.08) ** 2)));\n    }\n    for (let k = 0; k \u003c ns * NB * 3; k++) SP[k] += 14;\n    for (let j = 0; j \u003c NR; j++) rim(j, cr, max(0.1, Ir));\n    hub(WHITE, Ih);\n  } else {\n    // Every spoke its own colour, the rainbow turning round, with sparkles.\n    const tw = floor(s * 7);\n    for (let k = 0; k \u003c ns; k++) {\n      const c = hsv(P.h + fr(k / ns + s * 0.12), 0.85, 1);\n      for (let b = 0; b \u003c NB; b++) hash(k * NB + b, tw) \u003c 0.07 ? spk(k, b, WHITE, 1) : spk(k, b, c, 0.72);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, hsv(P.h + fr(j / NR - s * 0.25), 0.8, 1), 0.75);\n    hub(WHITE, 0.8);\n  }\n}\n\nlet F;\nconst add = (x, y, c, k) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] += c[n] * k;\n};\nconst put = (x, y, c, k = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// A leg of the A-frame from the hub to the promenade, a dark girder.\nfunction leg(ax, ay, bx, by, hw, edge) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy;\n  for (let y = floor(ay); y \u003c= by; y++)\n    for (let x = max(0, floor(min(ax, bx) - 2)); x \u003c= min(W - 1, max(ax, bx) + 2); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, d = sqrt(ex * ex + ey * ey);\n      const w = cl(hw + 0.5 - d, 0, 1);\n      if (w \u003c= 0) continue;\n      const o = (y * W + x) * 3, lit = 0.5 + 0.5 * cl((d - hw + 0.6) * 1.5, 0, 1);\n      const fl = 0.32 * exp(-(FOOT - y) / 9);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], LEG[n] + edge[n] * lit + WARM[n] * fl, w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.f) return;\n  F = P.f;\n  const ns = P.ns, rot = P.rot, t = P.t;\n  P.pal = [hsv(P.h, 0.85, 1), hsv(P.h + 0.42, 0.8, 1), hsv(P.h + 0.2, 0.75, 1)];\n  const SP = P.sp, RM = P.rm, HB = P.hb;\n  paint(P, P.sh, P.st, SP, RM, HB);\n  if (P.prev >= 0 && P.st \u003c FADE) {\n    const q = P.st / FADE;\n    paint(P, P.prev, P.ps + P.st, P.sp2, P.rm2, P.hb2);\n    for (let i = 0; i \u003c ns * NB * 3; i++) SP[i] = mix(P.sp2[i], SP[i], q);\n    for (let i = 0; i \u003c NR * 3; i++) RM[i] = mix(P.rm2[i], RM[i], q);\n    for (let n = 0; n \u003c 3; n++) HB[n] = mix(P.hb2[n], HB[n], q);\n  }\n  // The wheel's light in the haze: the mean colour of every bin.\n  const gc = [0, 0, 0], ws = ((R - HUB) / NB) * ns, wr = (TAU * R) / NR;\n  for (let i = 0; i \u003c ns * NB; i++) for (let n = 0; n \u003c 3; n++) gc[n] += SP[i * 3 + n] * ws;\n  for (let j = 0; j \u003c NR; j++) for (let n = 0; n \u003c 3; n++) gc[n] += RM[j * 3 + n] * wr * ns;\n  for (let n = 0; n \u003c 3; n++) gc[n] /= ns * NB * ws + NR * wr * ns;\n  // The haze takes a dim show nearly whole and a bright one by less.\n  const gk = 0.62 / (1 + (1.6 * max(...gc)) / 255);\n  for (let n = 0; n \u003c 3; n++) gc[n] *= gk;\n\n  // Sky, haze, stars and a thin moon.\n  for (let i = 0, o = 0; i \u003c SEA * W; i++, o += 3) {\n    const g = P.gm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = P.sky[o + n] + gc[n] * g;\n  }\n  for (const [x, y, b, ph, sp] of P.stars) add(x, y, [1, 1, 1.15], b * (0.65 + 0.35 * sin(t * sp + ph)));\n  for (let y = 3; y \u003c 11; y++)\n    for (let x = 51; x \u003c 60; x++) {\n      const a = (x + 0.5 - 55) ** 2 + (y + 0.5 - 7) ** 2, b = (x + 0.5 - 56.6) ** 2 + (y + 0.5 - 6) ** 2;\n      const k = cl(3.4 - sqrt(a), 0, 1) * cl(sqrt(b) - 2.9, 0, 1);\n      if (k > 0) add(x, y, [236, 228, 196], k);\n    }\n  // Clouds come in on the wind, lit from below by the wheel.\n  const wd = P.wind, th = 0.68 - 0.4 * wd, co = floor(P.co), cf = P.co - co;\n  for (let y = 0; y \u003c 76; y++) {\n    const hf = sm(76, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const c0 = y * 256, n = mix(P.cn[c0 + ((x + co) & 255)], P.cn[c0 + ((x + co + 1) & 255)], cf), dn = sm(th - 0.04, th + 0.22, n) * hf * 0.7;\n      if (dn \u003c= 0) continue;\n      const i = y * W + x, o = i * 3, g = 3 * (P.gm[i] + 0.2);\n      for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], CLOUD[k] + gc[k] * g, dn);\n    }\n  }\n\n  // Spokes, truss and rims, lit from the show's bins.\n  const st = STEEL.map((v, n) => v + gc[n] * 0.5);\n  for (let y = 7; y \u003c= 70; y++) {\n    const dy = y + 0.5 - CY;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - CX, r2 = dx * dx + dy * dy;\n      if (r2 > (R + 1.4) ** 2) continue;\n      const r = sqrt(r2), o = (y * W + x) * 3;\n      let a = (atan2(dy, dx) - rot) / TAU;\n      a -= floor(a);\n      const q = a * ns, kk = round(q), d = (abs(q - kk) * TAU * r) / ns;\n      const wsp = r > HUB && r \u003c R ? cl(1.25 - 1.5 * d, 0, 1) : 0;\n      const wrm = cl(1.25 - 1.5 * abs(r - R), 0, 1);\n      let wst = cl(1 - 1.6 * abs(r - RI), 0, 1) * 0.8;\n      if (r > RI && r \u003c R) {\n        const z = abs(fr(a * ns * 2) - 0.5) * 2, tt = (r - RI) / (R - RI);\n        wst = max(wst, cl(1 - 2.2 * abs(z - tt), 0, 1) * 0.7);\n      }\n      const occ = max(wsp, wrm, wst);\n      if (occ \u003c= 0) continue;\n      const so = ((kk % ns) * NB + min(NB - 1, floor(((r - HUB) / (R - HUB)) * NB))) * 3, ro = (floor(a * NR) % NR) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = F[o + n] * (1 - 0.85 * occ) + st[n] * occ + SP[so + n] * wsp + RM[ro + n] * wrm;\n    }\n  }\n\n  // The gondolas hang level from the rim, swinging in the wind.\n  const [A, B, C] = P.pal, step = ns / P.ng;\n  for (let i = 0; i \u003c P.ng; i++) {\n    const ang = rot + (TAU * i * step) / ns, px = CX + R * cos(ang), py = CY + R * sin(ang);\n    const sw = wd * (0.45 * sin(t * 1.8 + i * 1.1) + 0.25 * sin(t * 3.1 + i * 2.3)) + 0.05 * sin(t * 1.4 + i);\n    const gx = round(px - 0.5), gy = round(py - 0.5), cx = round(px - 0.5 + 3.2 * sin(sw)), [wk, empty] = P.cab[i];\n    const body = [A, B, C][i % 3].map((v, n) => v * 0.62 + gc[n]);\n    put(gx, gy, [150, 150, 170]);\n    put(round(px - 0.5 + 1.2 * sin(sw)), gy + 1, [60, 60, 76]);\n    for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + 2, body), put(cx + dx, gy + 5, body, 0.75);\n    for (let dy = 3; dy \u003c= 4; dy++) {\n      put(cx - 2, gy + dy, body, 0.85);\n      put(cx + 2, gy + dy, body, 0.85);\n      for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + dy, WARM, (empty || dx || dy > 3 ? 0.78 : 0.2) * wk);\n    }\n  }\n\n  // The A-frame in front of the wheel, and the hub on it.\n  const edge = gc.map((v) => v * 1.4);\n  leg(CX, CY, 12, FOOT, 0.85, edge);\n  leg(CX, CY, 52, FOOT, 0.85, edge);\n  for (let y = 33; y \u003c= 44; y++)\n    for (let x = 26; x \u003c= 38; x++) {\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2), k = cl(HUB + 0.5 - r, 0, 1);\n      if (k \u003c= 0) continue;\n      const o = (y * W + x) * 3, core = exp(-(r * r) / 2.5);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], 30 + HB[n] * (1 - r / 6) + WHITE[n] * core * 0.6, k);\n    }\n\n  // The shore: promenade, platform, lamps, booth, the warm light they throw.\n  for (let i = 70 * W, o = i * 3; i \u003c SEA * W; i++, o += 3) {\n    const m = P.fm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], P.fg[o + n], m) + P.ga[o + n];\n  }\n  for (let x = 23; x \u003c= 41; x += 2) put(x, 76, B, floor(t * 4 - x / 2) % 3 ? 0.35 : 0.85);\n  for (let x = 53; x \u003c= 62; x += 2) put(x, 71, WARM, floor(t * 5 + x / 2) % 2 ? 0.3 : 1);\n  for (const q of P.people) {\n    const x = floor(q.x), gait = q.w ? floor(q.x * 1.5) & 1 : 0;\n    put(x, 79, q.sk ? [150, 110, 86] : [70, 52, 44]);\n    for (let y = 80; y \u003c= 82; y++) put(x, y, q.c), put(x + 1, y, q.c, 0.8);\n    put(x + gait, 83, [16, 16, 24]);\n    put(x + 1 - gait, 83, [16, 16, 24], 0.7);\n  }\n\n  // The lake: the scene above, mirrored, squeezed and broken by the ripples.\n  const wt = P.wt, gw = 0.55 + 0.35 * wd, pw = 3 - 1.2 * wd, sp = 0.5 + 6 * wd;\n  const row = (ys, sx) => (cl(round(ys), 0, SEA - 1) * W + sx) * 3;\n  for (let y = SEA; y \u003c H; y++) {\n    const d = y + 0.5 - SEA, dn = d / (H - SEA), amp = (0.35 + 1.9 * wd) * (0.45 + dn), rf = 0.7 - 0.3 * dn;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = amp * (0.6 * sn(d * 0.75 - wt * 1.9 + x * 0.04) + 0.4 * sn(d * 2.3 + x * 0.37 - wt * 3.3));\n      const ys = SEA - 0.5 - d / SQ + amp * 0.45 * sn(x * 0.45 + d * 1.1 - wt * 2.6), sx = cl(round(x + ox), 0, W - 1);\n      const hl = (0.5 + 0.5 * sn(d * 1.7 - wt * 1.4 + 1.6 * sn(x * 0.15 + d * 0.3 + wt * 0.5))) ** pw, o = (y * W + x) * 3;\n      // Choppy water stretches each light into a streak: the brightest of the\n      // rows a wave face can show here, above the mirror point and below it.\n      const s1 = row(ys, sx), s0 = row(ys - sp, sx), s2 = row(ys + sp, sx), s3 = row(ys - sp / 2, sx), s4 = row(ys + sp / 2, sx);\n      for (let n = 0; n \u003c 3; n++)\n        F[o + n] = LAKE[n] * (1 + dn * 0.5) + gc[n] * gw * hl + (0.55 * F[s1 + n] + 0.5 * max(F[s0 + n], F[s2 + n], F[s3 + n], F[s4 + n])) * rf * TINT[n];\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-ferris-wheel","type":"code","name":"ferris-wheel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ferris Wheel\n// Family:  fair\n// Idea:    A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the light shows of the observation wheels on lake and river fronts\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1\n//\n// Knob 1: Lights. Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet.\n// Knob 2: Speed. How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower.\n// Knob 3: Spokes. How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one.\n// Knob 4: Wind. Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light.\n// Buttons: K1 tap starts the next show at once.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst fr = (v) => v - floor(v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The wheel: hub, outer rim with the lights, inner rim, and the truss between.\nconst CX = 32, CY = 38.5, R = 29.5, RI = 26.3, HUB = 3.6;\n// The first row of the lake, which is the line the scene mirrors in, the\n// promenade the legs stand on, and how much the reflection is squeezed.\nconst SEA = 87, FOOT = 84, SQ = 0.72;\n// Light bins along each spoke and round the rim; the shows paint these.\nconst NB = 24, NR = 120;\nconst SHOWS = 6, DUR = 6.5, FADE = 0.35;\nconst CLOUD = [12, 14, 28], LAKE = [3, 7, 22], TINT = [0.85, 0.92, 1];\n// A sine table for the ripples, which take five sines an LED.\nconst SN = F32(1024).map((_, i) => sin((i * TAU) / 1024));\nconst sn = (v) => SN[(v * 162.97) & 1023];\nconst STEEL = [26, 28, 42], LEG = [22, 24, 38], WARM = [255, 214, 150], WHITE = [255, 250, 240];\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, wt: 0, co: 0, rot: 0.2, st: 0, sh: 0, prev: -1, ps: 0, ns: 12, ng: 12, wind: 0.06, h: 0.53,\n    f: F32(N * 3), cn: F32(256 * 76), sky: F32(SEA * W * 3), gm: F32(SEA * W), fg: F32(N * 3), fm: F32(N), ga: F32(N * 3),\n    sp: F32(32 * NB * 3), rm: F32(NR * 3), hb: [0, 0, 0], sp2: F32(32 * NB * 3), rm2: F32(NR * 3), hb2: [0, 0, 0],\n    stars: [], people: [], cab: [],\n  });\n  // Night sky, paler towards the horizon, and the hills behind the far shore\n  // with a few houses lit.\n  for (let y = 0; y \u003c SEA; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y / SEA, o = (y * W + x) * 3, hy = 77 + 2.4 * sin(x * 0.11 + 0.7) + 1.4 * sin(x * 0.29 + 2);\n      let c = [3 + 14 * v * v, 5 + 18 * v * v, 22 + 46 * v * v];\n      if (y > hy) c = [7, 8, 18];\n      if (y > hy + 1 && hash(x, y) \u003c 0.025) c = [120, 96, 60];\n      P.sky.set(c, o);\n      // Where the wheel's light lands on the haze: round the wheel and low over the shore.\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2);\n      P.gm[y * W + x] = 0.75 * exp(-(max(0, r - 18) ** 2) / 420) + 0.45 * exp(-(SEA - y) / 22);\n    }\n  // Cloud: three octaves of value noise 256 wide, so it can scroll round.\n  const seed = floor(rnd() * 999);\n  const vn = (x, y, cx, cy, s) => {\n    const nx = 256 / cx, gx = x / cx, gy = y / cy, ix = floor(gx), iy = floor(gy), u = sm(0, 1, gx - ix), v = sm(0, 1, gy - iy);\n    const h = (i, j) => hash(((ix + i) % nx) + s, iy + j);\n    return mix(mix(h(0, 0), h(1, 0), u), mix(h(0, 1), h(1, 1), u), v);\n  };\n  for (let y = 0; y \u003c 76; y++) for (let x = 0; x \u003c 256; x++) P.cn[y * 256 + x] = 0.55 * vn(x, y, 32, 9, seed) + 0.3 * vn(x, y, 16, 5, seed + 7) + 0.15 * vn(x, y, 8, 3, seed + 13);\n  for (let i = 0; i \u003c 36; i++) P.stars.push([floor(rnd() * W), floor(rnd() * 46), 40 + rnd() * 70, rnd() * TAU, 0.6 + rnd()]);\n  // The promenade, the boarding platform with its stairs, two lamps and the\n  // ticket booth, kept as one layer with its own coverage.\n  const fg = (x, y, c, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    P.fg.set(c, (y * W + x) * 3);\n    P.fm[y * W + x] = a;\n  };\n  const glow = (gx, gy, c, k, s) => {\n    for (let y = max(0, gy - 12); y \u003c min(SEA, gy + 12); y++)\n      for (let x = max(0, gx - 12); x \u003c min(W, gx + 12); x++) {\n        const g = k * exp(-((x - gx) ** 2 + (y - gy) ** 2) / s);\n        for (let n = 0; n \u003c 3; n++) P.ga[(y * W + x) * 3 + n] += c[n] * g;\n      }\n  };\n  for (let x = 0; x \u003c W; x++) {\n    fg(x, 84, [34, 28, 32]);\n    fg(x, 85, [28, 24, 30]);\n    fg(x, 86, [64, 60, 70]);\n  }\n  for (let x = 22; x \u003c= 42; x++) fg(x, 77, [78, 74, 92]), fg(x, 78, [30, 30, 42]);\n  for (const x of [24, 32, 40]) for (let y = 79; y \u003c 84; y++) fg(x, y, [22, 22, 32]);\n  for (let i = 0; i \u003c 6; i++) fg(21 - i, 78 + i, [60, 56, 70]), fg(21 - i, 79 + i, [26, 24, 34]);\n  for (const lx of [5, 46]) {\n    for (let y = 76; y \u003c 84; y++) fg(lx, y, [36, 36, 48]);\n    fg(lx, 75, [255, 230, 180]);\n    fg(lx - 1, 75, [120, 100, 70]);\n    fg(lx + 1, 75, [120, 100, 70]);\n    glow(lx, 76, WARM, 0.32, 14);\n  }\n  for (let x = 53; x \u003c= 62; x++) {\n    const st = ((x - 53) >> 1) & 1 ? [226, 218, 206] : [200, 36, 56];\n    fg(x, 72, st);\n    if (!(x & 1)) fg(x, 73, st);\n    for (let y = 74; y \u003c 84; y++) fg(x, y, x === 53 || x === 62 ? [40, 22, 30] : [70, 34, 46]);\n  }\n  for (let y = 75; y \u003c= 78; y++) for (let x = 55; x \u003c= 60; x++) fg(x, y, [255, 196, 120].map((v) => v * (0.85 - 0.08 * (y - 75))));\n  for (const [x, y] of [[58, 76], [57, 78], [58, 78], [59, 78]]) fg(x, y, [40, 24, 24]);\n  fg(58, 77, [56, 32, 30]);\n  for (let x = 54; x \u003c= 61; x++) fg(x, 79, [160, 116, 70]), fg(x, 81, (x & 1) ? [240, 200, 90] : [110, 70, 40]);\n  glow(58, 80, [255, 180, 100], 0.28, 18);\n  // People on the promenade, a queue at the foot of the stairs and two who walk.\n  for (const [x, w] of [[9, 0], [14, 0], [17, 0], [49, 0], [27, 2.2], [40, -1.6]])\n    P.people.push({ x: x + 0.5, w, c: hsv(rnd(), 0.5, 0.25 + 0.15 * rnd()), sk: rnd() \u003c 0.5 });\n  for (let i = 0; i \u003c 32; i++) P.cab.push([0.55 + 0.45 * rnd(), rnd() \u003c 0.4]);\n}\n\nfunction next(P) {\n  P.prev = P.sh;\n  P.ps = P.st;\n  P.sh = (P.sh + 1) % SHOWS;\n  P.st = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  const v = cl(k[1], 0.2, 3) / 2;\n  let ns = round(cl(k[2], 12, 32));\n  if (ns > 18) ns += ns & 1;\n  Object.assign(P, { h: fr(0.53 + cl(k[0], 0, 1)), ns, ng: ns > 18 ? ns / 2 : ns, wind: cl(k[3], 0, 1) });\n  P.t += dt;\n  P.wt += dt * v * (0.7 + 1.5 * P.wind);\n  P.co += dt * v * (1 + 10 * P.wind);\n  P.rot += (dt * v * TAU) / 40;\n  P.st += dt * v;\n  if ((input.btnPressed && input.btnPressed[0]) || P.st >= DUR) next(P);\n  for (const q of P.people)\n    if (q.w) {\n      q.x += q.w * dt * v;\n      if (q.x > W + 3) q.x = -3;\n      if (q.x \u003c -3) q.x = W + 3;\n    }\n}\n\n// One show at its time s paints the spoke bins, the rim bins and the hub.\nfunction paint(P, sh, s, SP, RM, HB) {\n  const ns = P.ns, [A, B, C] = P.pal, rot = P.rot;\n  const spk = (k, b, c, I) => {\n    const o = (k * NB + b) * 3;\n    (SP[o] = c[0] * I), (SP[o + 1] = c[1] * I), (SP[o + 2] = c[2] * I);\n  };\n  const rim = (j, c, I) => ((RM[j * 3] = c[0] * I), (RM[j * 3 + 1] = c[1] * I), (RM[j * 3 + 2] = c[2] * I));\n  const lerp = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n  const hub = (c, I) => ((HB[0] = c[0] * I), (HB[1] = c[1] * I), (HB[2] = c[2] * I));\n  const uB = (b) => (b + 0.5) / NB;\n  if (sh === 0) {\n    // Light runs out along the spokes, brightest where a beam sweeps round\n    // against the turn; marquee bulbs chase round the rim and three white\n    // comets run through them.\n    const sw = fr(-s * 0.3), mq = floor(s * 9);\n    for (let k = 0; k \u003c ns; k++) {\n      const dl = fr(k / ns - sw), bm = exp(-dl / 0.22), wt = 0.5 * exp(-dl * ns * 1.5);\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), ds = exp(-(((fr(u * 2 - s * 1.1) - 0.5) / 0.17) ** 2));\n        spk(k, b, lerp(lerp(C, A, u), WHITE, wt), 0.14 + 0.25 * bm + 0.61 * ds * (0.45 + 0.55 * bm));\n      }\n    }\n    for (let j = 0; j \u003c NR; j++) {\n      let I = 0;\n      for (let m = 0; m \u003c 3; m++) I = max(I, exp(-fr(fr(s * 0.42 + m / 3) - j / NR) / 0.04));\n      rim(j, lerp(B, WHITE, I), max(I, (floor(j / 2) + mq) % 3 ? 0.22 : 0.9));\n    }\n    hub(A, 0.8);\n  } else if (sh === 1) {\n    // A colour wipe across the whole wheel, lit full, with a white front.\n    const X = CX + 35 * cos((PI * s) / 3.25), f0 = 0.88 * sm(0, 0.5, s);\n    const col = (x) => lerp(lerp(A, B, sm(X - 2.5, X + 2.5, x)), WHITE, 0.7 * exp(-(((x - X) / 2.2) ** 2)));\n    for (let k = 0; k \u003c ns; k++) {\n      const c = cos(rot + (TAU * k) / ns);\n      for (let b = 0; b \u003c NB; b++) spk(k, b, col(CX + (HUB + uB(b) * (R - HUB)) * c), f0);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, col(CX + R * cos(rot + (TAU * (j + 0.5)) / NR)), f0);\n    hub(col(CX), f0);\n  } else if (sh === 2) {\n    // A spiral arm winds out from the hub and round the wheel.\n    for (let k = 0; k \u003c ns; k++)\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), v = fr(u * 0.9 + k / ns - s * 0.45);\n        spk(k, b, lerp(B, C, u), 0.07 + 0.93 * exp(-(((v - 0.5) / 0.2) ** 2)));\n      }\n    for (let j = 0; j \u003c NR; j++) rim(j, A, fr((j / NR) * ns * 0.5 - s * 0.9) \u003c 0.5 ? 0.95 : 0.12);\n    hub(B, 0.9);\n  } else if (sh === 3) {\n    // Spoke after spoke lights up round the wheel and holds before it blinks out.\n    const n = (s / 3.6) * ns, blink = s > 4.8 && fr((s - 4.8) * 2.6) > 0.5;\n    for (let k = 0; k \u003c ns; k++) {\n      const I = blink ? 0.04 : k \u003c floor(n) ? 0.9 : k === floor(n) ? fr(n) : 0.05;\n      for (let b = 0; b \u003c NB; b++) spk(k, b, k === floor(n) ? WHITE : k & 1 ? B : A, I);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, C, blink ? 0.04 : j / NR \u003c n / ns ? 0.95 : 0.08);\n    hub(WHITE, blink ? 0.1 : 0.85);\n  } else if (sh === 4) {\n    // Rings run out from the hub, each a colour, and flash the rim on arriving.\n    SP.fill(0, 0, ns * NB * 3);\n    let Ir = 0.08, Ih = 0.2, cr = A;\n    for (let m = 0; m \u003c 3; m++) {\n      // Rings are born in the order A, C, B, so each takes the next colour.\n      const f = fr(s * 0.4 + m / 3), c = P.pal[m], e = exp(-(((1 - f) / 0.06) ** 2));\n      for (let k = 0; k \u003c ns; k++)\n        for (let b = 0; b \u003c NB; b++) {\n          const I = exp(-(((uB(b) - f) / 0.07) ** 2)), o = (k * NB + b) * 3;\n          for (let n = 0; n \u003c 3; n++) SP[o + n] += c[n] * I;\n        }\n      if (e > Ir) (Ir = e), (cr = c);\n      Ih = max(Ih, exp(-((f / 0.08) ** 2)));\n    }\n    for (let k = 0; k \u003c ns * NB * 3; k++) SP[k] += 14;\n    for (let j = 0; j \u003c NR; j++) rim(j, cr, max(0.1, Ir));\n    hub(WHITE, Ih);\n  } else {\n    // Every spoke its own colour, the rainbow turning round, with sparkles.\n    const tw = floor(s * 7);\n    for (let k = 0; k \u003c ns; k++) {\n      const c = hsv(P.h + fr(k / ns + s * 0.12), 0.85, 1);\n      for (let b = 0; b \u003c NB; b++) hash(k * NB + b, tw) \u003c 0.07 ? spk(k, b, WHITE, 1) : spk(k, b, c, 0.72);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, hsv(P.h + fr(j / NR - s * 0.25), 0.8, 1), 0.75);\n    hub(WHITE, 0.8);\n  }\n}\n\nlet F;\nconst add = (x, y, c, k) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] += c[n] * k;\n};\nconst put = (x, y, c, k = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// A leg of the A-frame from the hub to the promenade, a dark girder.\nfunction leg(ax, ay, bx, by, hw, edge) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy;\n  for (let y = floor(ay); y \u003c= by; y++)\n    for (let x = max(0, floor(min(ax, bx) - 2)); x \u003c= min(W - 1, max(ax, bx) + 2); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, d = sqrt(ex * ex + ey * ey);\n      const w = cl(hw + 0.5 - d, 0, 1);\n      if (w \u003c= 0) continue;\n      const o = (y * W + x) * 3, lit = 0.5 + 0.5 * cl((d - hw + 0.6) * 1.5, 0, 1);\n      const fl = 0.32 * exp(-(FOOT - y) / 9);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], LEG[n] + edge[n] * lit + WARM[n] * fl, w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.f) return;\n  F = P.f;\n  const ns = P.ns, rot = P.rot, t = P.t;\n  P.pal = [hsv(P.h, 0.85, 1), hsv(P.h + 0.42, 0.8, 1), hsv(P.h + 0.2, 0.75, 1)];\n  const SP = P.sp, RM = P.rm, HB = P.hb;\n  paint(P, P.sh, P.st, SP, RM, HB);\n  if (P.prev >= 0 && P.st \u003c FADE) {\n    const q = P.st / FADE;\n    paint(P, P.prev, P.ps + P.st, P.sp2, P.rm2, P.hb2);\n    for (let i = 0; i \u003c ns * NB * 3; i++) SP[i] = mix(P.sp2[i], SP[i], q);\n    for (let i = 0; i \u003c NR * 3; i++) RM[i] = mix(P.rm2[i], RM[i], q);\n    for (let n = 0; n \u003c 3; n++) HB[n] = mix(P.hb2[n], HB[n], q);\n  }\n  // The wheel's light in the haze: the mean colour of every bin.\n  const gc = [0, 0, 0], ws = ((R - HUB) / NB) * ns, wr = (TAU * R) / NR;\n  for (let i = 0; i \u003c ns * NB; i++) for (let n = 0; n \u003c 3; n++) gc[n] += SP[i * 3 + n] * ws;\n  for (let j = 0; j \u003c NR; j++) for (let n = 0; n \u003c 3; n++) gc[n] += RM[j * 3 + n] * wr * ns;\n  for (let n = 0; n \u003c 3; n++) gc[n] /= ns * NB * ws + NR * wr * ns;\n  // The haze takes a dim show nearly whole and a bright one by less.\n  const gk = 0.62 / (1 + (1.6 * max(...gc)) / 255);\n  for (let n = 0; n \u003c 3; n++) gc[n] *= gk;\n\n  // Sky, haze, stars and a thin moon.\n  for (let i = 0, o = 0; i \u003c SEA * W; i++, o += 3) {\n    const g = P.gm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = P.sky[o + n] + gc[n] * g;\n  }\n  for (const [x, y, b, ph, sp] of P.stars) add(x, y, [1, 1, 1.15], b * (0.65 + 0.35 * sin(t * sp + ph)));\n  for (let y = 3; y \u003c 11; y++)\n    for (let x = 51; x \u003c 60; x++) {\n      const a = (x + 0.5 - 55) ** 2 + (y + 0.5 - 7) ** 2, b = (x + 0.5 - 56.6) ** 2 + (y + 0.5 - 6) ** 2;\n      const k = cl(3.4 - sqrt(a), 0, 1) * cl(sqrt(b) - 2.9, 0, 1);\n      if (k > 0) add(x, y, [236, 228, 196], k);\n    }\n  // Clouds come in on the wind, lit from below by the wheel.\n  const wd = P.wind, th = 0.68 - 0.4 * wd, co = floor(P.co), cf = P.co - co;\n  for (let y = 0; y \u003c 76; y++) {\n    const hf = sm(76, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const c0 = y * 256, n = mix(P.cn[c0 + ((x + co) & 255)], P.cn[c0 + ((x + co + 1) & 255)], cf), dn = sm(th - 0.04, th + 0.22, n) * hf * 0.7;\n      if (dn \u003c= 0) continue;\n      const i = y * W + x, o = i * 3, g = 3 * (P.gm[i] + 0.2);\n      for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], CLOUD[k] + gc[k] * g, dn);\n    }\n  }\n\n  // Spokes, truss and rims, lit from the show's bins.\n  const st = STEEL.map((v, n) => v + gc[n] * 0.5);\n  for (let y = 7; y \u003c= 70; y++) {\n    const dy = y + 0.5 - CY;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - CX, r2 = dx * dx + dy * dy;\n      if (r2 > (R + 1.4) ** 2) continue;\n      const r = sqrt(r2), o = (y * W + x) * 3;\n      let a = (atan2(dy, dx) - rot) / TAU;\n      a -= floor(a);\n      const q = a * ns, kk = round(q), d = (abs(q - kk) * TAU * r) / ns;\n      const wsp = r > HUB && r \u003c R ? cl(1.25 - 1.5 * d, 0, 1) : 0;\n      const wrm = cl(1.25 - 1.5 * abs(r - R), 0, 1);\n      let wst = cl(1 - 1.6 * abs(r - RI), 0, 1) * 0.8;\n      if (r > RI && r \u003c R) {\n        const z = abs(fr(a * ns * 2) - 0.5) * 2, tt = (r - RI) / (R - RI);\n        wst = max(wst, cl(1 - 2.2 * abs(z - tt), 0, 1) * 0.7);\n      }\n      const occ = max(wsp, wrm, wst);\n      if (occ \u003c= 0) continue;\n      const so = ((kk % ns) * NB + min(NB - 1, floor(((r - HUB) / (R - HUB)) * NB))) * 3, ro = (floor(a * NR) % NR) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = F[o + n] * (1 - 0.85 * occ) + st[n] * occ + SP[so + n] * wsp + RM[ro + n] * wrm;\n    }\n  }\n\n  // The gondolas hang level from the rim, swinging in the wind.\n  const [A, B, C] = P.pal, step = ns / P.ng;\n  for (let i = 0; i \u003c P.ng; i++) {\n    const ang = rot + (TAU * i * step) / ns, px = CX + R * cos(ang), py = CY + R * sin(ang);\n    const sw = wd * (0.45 * sin(t * 1.8 + i * 1.1) + 0.25 * sin(t * 3.1 + i * 2.3)) + 0.05 * sin(t * 1.4 + i);\n    const gx = round(px - 0.5), gy = round(py - 0.5), cx = round(px - 0.5 + 3.2 * sin(sw)), [wk, empty] = P.cab[i];\n    const body = [A, B, C][i % 3].map((v, n) => v * 0.62 + gc[n]);\n    put(gx, gy, [150, 150, 170]);\n    put(round(px - 0.5 + 1.2 * sin(sw)), gy + 1, [60, 60, 76]);\n    for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + 2, body), put(cx + dx, gy + 5, body, 0.75);\n    for (let dy = 3; dy \u003c= 4; dy++) {\n      put(cx - 2, gy + dy, body, 0.85);\n      put(cx + 2, gy + dy, body, 0.85);\n      for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + dy, WARM, (empty || dx || dy > 3 ? 0.78 : 0.2) * wk);\n    }\n  }\n\n  // The A-frame in front of the wheel, and the hub on it.\n  const edge = gc.map((v) => v * 1.4);\n  leg(CX, CY, 12, FOOT, 0.85, edge);\n  leg(CX, CY, 52, FOOT, 0.85, edge);\n  for (let y = 33; y \u003c= 44; y++)\n    for (let x = 26; x \u003c= 38; x++) {\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2), k = cl(HUB + 0.5 - r, 0, 1);\n      if (k \u003c= 0) continue;\n      const o = (y * W + x) * 3, core = exp(-(r * r) / 2.5);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], 30 + HB[n] * (1 - r / 6) + WHITE[n] * core * 0.6, k);\n    }\n\n  // The shore: promenade, platform, lamps, booth, the warm light they throw.\n  for (let i = 70 * W, o = i * 3; i \u003c SEA * W; i++, o += 3) {\n    const m = P.fm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], P.fg[o + n], m) + P.ga[o + n];\n  }\n  for (let x = 23; x \u003c= 41; x += 2) put(x, 76, B, floor(t * 4 - x / 2) % 3 ? 0.35 : 0.85);\n  for (let x = 53; x \u003c= 62; x += 2) put(x, 71, WARM, floor(t * 5 + x / 2) % 2 ? 0.3 : 1);\n  for (const q of P.people) {\n    const x = floor(q.x), gait = q.w ? floor(q.x * 1.5) & 1 : 0;\n    put(x, 79, q.sk ? [150, 110, 86] : [70, 52, 44]);\n    for (let y = 80; y \u003c= 82; y++) put(x, y, q.c), put(x + 1, y, q.c, 0.8);\n    put(x + gait, 83, [16, 16, 24]);\n    put(x + 1 - gait, 83, [16, 16, 24], 0.7);\n  }\n\n  // The lake: the scene above, mirrored, squeezed and broken by the ripples.\n  const wt = P.wt, gw = 0.55 + 0.35 * wd, pw = 3 - 1.2 * wd, sp = 0.5 + 6 * wd;\n  const row = (ys, sx) => (cl(round(ys), 0, SEA - 1) * W + sx) * 3;\n  for (let y = SEA; y \u003c H; y++) {\n    const d = y + 0.5 - SEA, dn = d / (H - SEA), amp = (0.35 + 1.9 * wd) * (0.45 + dn), rf = 0.7 - 0.3 * dn;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = amp * (0.6 * sn(d * 0.75 - wt * 1.9 + x * 0.04) + 0.4 * sn(d * 2.3 + x * 0.37 - wt * 3.3));\n      const ys = SEA - 0.5 - d / SQ + amp * 0.45 * sn(x * 0.45 + d * 1.1 - wt * 2.6), sx = cl(round(x + ox), 0, W - 1);\n      const hl = (0.5 + 0.5 * sn(d * 1.7 - wt * 1.4 + 1.6 * sn(x * 0.15 + d * 0.3 + wt * 0.5))) ** pw, o = (y * W + x) * 3;\n      // Choppy water stretches each light into a streak: the brightest of the\n      // rows a wave face can show here, above the mirror point and below it.\n      const s1 = row(ys, sx), s0 = row(ys - sp, sx), s2 = row(ys + sp, sx), s3 = row(ys - sp / 2, sx), s4 = row(ys + sp / 2, sx);\n      for (let n = 0; n \u003c 3; n++)\n        F[o + n] = LAKE[n] * (1 + dn * 0.5) + gc[n] * gw * hl + (0.55 * F[s1 + n] + 0.5 * max(F[s0 + n], F[s2 + n], F[s3 + n], F[s4 + n])) * rf * TINT[n];\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower."},{"name":"Spokes","min":12,"max":32,"about":"How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one."},{"name":"Wind","min":0,"max":1,"about":"Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light."}],"start":[0,2,12,0.06],"measures":{"motion":0.2782,"detail":0.0637,"edges":0.3285,"complexity":1.8086,"coverage":0.9981,"colour":0.1705,"drift":0.1001},"knobResponse":[0.0444,0.0524,0.0479,0.0788]},{"slug":"fiddlehead","title":"Fiddlehead","family":"growth","round":21,"note":"봄 숲 바닥의 타임랩스예요. 털 덮인 고사리 순이 지난해 낙엽을 뚫고 올라와 아래부터 풀리며 패널 꼭대기에서 휘는 잎이 되고, 그사이 늙은 잎은 누렇게 시들어 쓰러지고 숲 지붕 틈으로 든 빛살이 그 위를 미끄러져요.","idea":"A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-fiddlehead","type":"code","name":"fiddlehead","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fern","min":0,"max":3,"about":"Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps."},{"name":"Fronds","min":6,"max":18,"about":"How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18."},{"name":"Breeze","min":-1,"max":1,"about":"Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster."}],"start":[0,2,6,0.06],"measures":{"motion":0.2772,"detail":0.0937,"edges":0.4428,"complexity":2.2973,"coverage":0.9858,"colour":0.1938,"drift":0.0784},"knobResponse":[0.0694,0.0969,0.0478,0.0882]},{"slug":"figure-eight-orbit","title":"Figure-Eight Orbit","family":"physics","round":38,"note":"같은 질량 셋이 뉴턴 중력으로 패널 높이만 한 8자 하나를 3분의 1주기씩 떨어져 돌아요. 식으로 그린 곡선이 아니라 한 걸음씩 푼 궤도라서, K4 로 처음 속도를 밀면 8자가 흔들리다가 더 밀면 둘이 짝을 짓고 하나가 패널 밖으로 튕겨 나가요. K3 은 꼬리를 늘려 세 혜성을 겹친 8자 띠로 바꾸고, K1 을 누르면 도는 궤도를 살짝 밀어요.","idea":"Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.","buttons":"K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Figure-Eight Orbit\n// Family:  physics\n// Idea:    Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: figure-eight solution of the three-body problem (Cris Moore, 1993; Alain Chenciner and Richard Montgomery, 2000), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1\n//\n// Knob 1: Hue. Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive.\n// Knob 2: Speed. At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2.\n// Knob 3: Trail. How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2.\n// Knob 4: Kick. Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest.\n// Buttons: K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, abs, hypot, round, cbrt, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Chenciner and Montgomery's starting values, G = m = 1: body 3 at the\n// crossing, bodies 1 and 2 opposite each other, both moving at half body 3's\n// velocity the other way. The period is 6.32591398.\nconst X1 = 0.97000436, Y1 = -0.24308753, VX3 = -0.93240737, VY3 = -0.86473146, PERIOD = 6.32591398;\n// Orbit to panel: the eight's long axis down the panel, SC LEDs to the unit.\n// It reaches 1.081 along that axis and 0.358 across, so 115 by 38 LEDs.\nconst SC = 53, CX = 31.5, CY = 63.5;\n// Under RS the pull is that of a uniform ball, so a close pass of a binary\n// stays finite. The eight never comes closer than 0.69, so it never feels it.\nconst RS = 0.05;\n// Step in orbit time: Yoshida's fourth-order leapfrog at H0, shortened by\n// (r / 0.5)^1.5 when two bodies are closer than 0.5.\nconst H0 = 1 / 128;\nconst YW1 = 1 / (2 - cbrt(2)), YW0 = -cbrt(2) * YW1;\nconst YC = [YW1 / 2, (YW0 + YW1) / 2, (YW0 + YW1) / 2, YW1 / 2], YD = [YW1, YW0, YW1];\n// Tail half-width at the head, in LEDs, and how far a body glows.\nconst HW = 3.6, GLOW = 6;\n// Opening hues: azure, rose, lime.\nconst HUE0 = 0.58;\n// Longest tail, in periods, and so the history the pattern keeps.\nconst LMAX = 2;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trail: 0.33, kick: 0, kickSet: -1, kickWait: 0, begun: false,\n    p: new Float64Array(6), v: new Float64Array(6), a: new Float64Array(6),\n    clock: 0, carry: 0, out: 0, fade: 1, phase: 0, nudges: 0,\n    // Per body and LED: when the body last passed (orbit time) and how close.\n    tv: new Float32Array(3 * N).fill(-1e9), td: new Float32Array(3 * N).fill(99),\n    lx: new Float32Array(3), ly: new Float32Array(3), warm: [0, 0, 0],\n    ref: new Float32Array(N), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n  drawReference(params.s);\n}\n\n// Pull on each body; under RS the force grows linearly from the centre.\nfunction accel(p, a) {\n  a.fill(0);\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) {\n      const dx = p[2 * j] - p[2 * i], dy = p[2 * j + 1] - p[2 * i + 1], r = sqrt(dx * dx + dy * dy), q = max(r, RS);\n      const f = 1 / (q * q * q);\n      a[2 * i] += dx * f;\n      a[2 * i + 1] += dy * f;\n      a[2 * j] -= dx * f;\n      a[2 * j + 1] -= dy * f;\n    }\n}\n\nfunction closest(p) {\n  let m = 1e9;\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) m = min(m, hypot(p[2 * j] - p[2 * i], p[2 * j + 1] - p[2 * i + 1]));\n  return m;\n}\n\n// One step of Yoshida's fourth-order symplectic integrator: three leapfrogs\n// of h w1, h w0, h w1, with w0 negative.\nfunction step(p, v, a, h) {\n  for (let s = 0; s \u003c 3; s++) {\n    for (let i = 0; i \u003c 6; i++) p[i] += YC[s] * h * v[i];\n    accel(p, a);\n    for (let i = 0; i \u003c 6; i++) v[i] += YD[s] * h * a[i];\n  }\n  for (let i = 0; i \u003c 6; i++) p[i] += YC[3] * h * v[i];\n}\n\nconst stepLength = (p) => H0 * min(1, (max(closest(p), RS) / 0.5) ** 1.5);\n\n// The kick: bodies i and j pushed apart along the line between them, each\n// by eps, and then every velocity scaled back to the kinetic energy before\n// the push. Positions do not move, so the energy stays what it was; the\n// momentum stays zero and the angular momentum stays zero too, as for the\n// eight itself, so only the shape of the motion changes.\nfunction push(S, i, j, eps) {\n  const { p, v } = S, dx = p[2 * i] - p[2 * j], dy = p[2 * i + 1] - p[2 * j + 1], r = hypot(dx, dy) || 1;\n  let k0 = 0, k1 = 0;\n  for (let n = 0; n \u003c 6; n++) k0 += v[n] * v[n];\n  v[2 * i] += (eps * dx) / r;\n  v[2 * i + 1] += (eps * dy) / r;\n  v[2 * j] -= (eps * dx) / r;\n  v[2 * j + 1] -= (eps * dy) / r;\n  for (let n = 0; n \u003c 6; n++) k1 += v[n] * v[n];\n  const f = sqrt(k0 / k1);\n  for (let n = 0; n \u003c 6; n++) v[n] *= f;\n}\n\n// Kick 0..1 to eps: nothing up to 0.06, then up to 0.45.\nconst epsOf = (k) => 0.45 * (max(0, k - 0.06) / 0.94) ** 1.2;\n\nfunction initial(S) {\n  const { p, v } = S;\n  p.set([X1, Y1, -X1, -Y1, 0, 0]);\n  v.set([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]);\n  push(S, 0, 1, epsOf(S.kick));\n  S.kickSet = S.kick;\n}\n\nconst toCol = (y) => CX + y * SC, toRow = (x) => CY - x * SC;\n\n// A tail at an LED: age a in orbit time, distance d in LEDs, tail length L.\n// It narrows from HW at the head to nothing at its end, and dims from full\n// at the head to 0.6 a third of a period behind it and 0.55 after that.\nfunction tailCover(a, d, L) {\n  if (a \u003c 0 || a >= L) return 0;\n  return cl((HW + 0.5) * (1 - a / L) ** 1.5 - d + 0.5, 0, 1);\n}\nconst tailBright = (a) => 0.55 + 0.45 * exp(-a / (0.15 * PERIOD));\nconst tailValue = (a, d, L) => tailCover(a, d, L) * tailBright(a);\n\n// Mark the LEDs round body k at orbit time t. Within one pass the closest\n// approach is kept; a later pass takes the LED when it would light it more.\nfunction deposit(S, k, t) {\n  const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]), R = HW + 1.5, L = LMAX * PERIOD;\n  if (bx \u003c -R || bx > W + R || by \u003c -R || by > H + R) return;\n  const o = k * N, tv = S.tv, td = S.td;\n  for (let y = max(0, floor(by - R)); y \u003c= min(H - 1, floor(by + R)); y++)\n    for (let x = max(0, floor(bx - R)); x \u003c= min(W - 1, floor(bx + R)); x++) {\n      const d = hypot(x + 0.5 - bx, y + 0.5 - by);\n      if (d > R) continue;\n      const q = o + y * W + x, t0 = tv[q];\n      if (abs(t - t0) \u003c 0.3) {\n        if (d \u003c td[q]) {\n          tv[q] = t;\n          td[q] = d;\n        }\n        continue;\n      }\n      const ref = max(t, t0), vNew = tailValue(ref - t, d, L), vOld = tailValue(ref - t0, td[q], L);\n      if (vNew > vOld || (vNew === vOld && t > t0)) {\n        tv[q] = t;\n        td[q] = d;\n      }\n    }\n}\n\n// Deposit body k if it has moved half an LED since it last did.\nfunction trace(S, t) {\n  for (let k = 0; k \u003c 3; k++) {\n    const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]);\n    if (hypot(bx - S.lx[k], by - S.ly[k]) \u003c 0.5) continue;\n    S.lx[k] = bx;\n    S.ly[k] = by;\n    deposit(S, k, t);\n  }\n}\n\nconst farthest = (p) => max(hypot(p[0], p[1]), hypot(p[2], p[3]), hypot(p[4], p[5]));\n\n// Start (or start again): the starting line-up with the current kick, and\n// its own past drawn behind it by running the orbit backward for up to LMAX\n// periods, or until a body would come in from off the panel.\nfunction restart(S) {\n  S.tv.fill(-1e9);\n  S.td.fill(99);\n  S.clock = 0;\n  S.carry = 0;\n  S.out = 0;\n  initial(S);\n  const { p, v, a } = S;\n  const p0 = Float64Array.from(p), v0 = Float64Array.from(v);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  let t = 0;\n  while (t > -LMAX * PERIOD && farthest(p) \u003c 1.4) {\n    trace(S, t);\n    const h = stepLength(p);\n    step(p, v, a, -h);\n    t -= h;\n  }\n  p.set(p0);\n  v.set(v0);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  trace(S, 0);\n}\n\n// Whole steps only, the remainder carried to the next frame, so at the\n// opening the step never changes and the integrator stays symplectic.\nfunction advance(S, dt) {\n  const { p, v, a } = S;\n  S.carry += dt;\n  for (let h = stepLength(p); S.carry >= h; h = stepLength(p)) {\n    step(p, v, a, h);\n    S.carry -= h;\n    S.clock += h;\n    trace(S, S.clock);\n  }\n}\n\n// The exact eight, sampled over one period, as a faint line under the tails.\nfunction drawReference(S) {\n  const p = Float64Array.from([X1, Y1, -X1, -Y1, 0, 0]);\n  const v = Float64Array.from([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]), a = new Float64Array(6);\n  const n = 1600, h = PERIOD / n, ref = S.ref;\n  for (let s = 0; s \u003c n; s++) {\n    const bx = toCol(p[1]), by = toRow(p[0]);\n    for (let y = max(0, floor(by - 1)); y \u003c= min(H - 1, floor(by + 1)); y++)\n      for (let x = max(0, floor(bx - 1)); x \u003c= min(W - 1, floor(bx + 1)); x++) {\n        const c = cl(1.1 - hypot(x + 0.5 - bx, y + 0.5 - by), 0, 1);\n        if (c > ref[y * W + x]) ref[y * W + x] = c;\n      }\n    step(p, v, a, h);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.33, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trail = cl(k[2], 0.33, 2);\n  S.kick = cl(k[3], 0, 1);\n  if (!S.begun) {\n    restart(S);\n    S.begun = true;\n  }\n  // A turned Kick starts the three again once the knob has rested 0.4 s,\n  // fading the old orbit out over 0.5 s and the new one in.\n  if (abs(S.kick - S.kickSet) > 0.004) {\n    S.kickWait += d;\n    if (S.kickWait > 0.4 && S.phase === 0) S.phase = -1;\n  } else S.kickWait = 0;\n  if (input.btnPressed && input.btnPressed[0] && S.phase === 0) {\n    const pair = S.nudges++ % 3;\n    push(S, pair, (pair + 1) % 3, max(0.05, epsOf(S.kick)));\n  }\n  // At Speed 2 the orbit's clock runs 1 unit a second.\n  advance(S, d * S.speed * 0.5);\n  // Off the panel: a body more than 1.35 from the centre.\n  if (farthest(S.p) > 1.35) S.out += d;\n  else S.out = max(0, S.out - d);\n  if ((S.out > 3 || farthest(S.p) > 8) && S.phase === 0) S.phase = -1;\n  if (S.phase \u003c 0) {\n    S.fade -= d / 0.5;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      restart(S);\n      S.kickWait = 0;\n      S.phase = 1;\n    }\n  } else if (S.phase > 0) {\n    S.fade += d / 0.5;\n    if (S.fade >= 1) {\n      S.fade = 1;\n      S.phase = 0;\n    }\n  }\n}\n\nfunction palette(S) {\n  for (let k = 0; k \u003c 3; k++) {\n    const h = S.hue + HUE0 + k / 3, hh = h - floor(h);\n    // Orange to yellow-green: paler and kept at full value, so a tail never\n    // reads brown or olive.\n    const warm = sm(0.02, 0.08, hh) * (1 - sm(0.2, 0.27, hh));\n    hsv(h, 0.85 - 0.3 * warm, 1, S.col[k]);\n    S.warm[k] = warm;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { tv, td, ref, col, clock, fade } = S, L = S.trail * PERIOD;\n  const bx = [0, 0, 0], by = [0, 0, 0];\n  for (let k = 0; k \u003c 3; k++) {\n    bx[k] = toCol(S.p[2 * k + 1]);\n    by[k] = toRow(S.p[2 * k]);\n  }\n  const ord = [0, 1, 2], ag = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The faint reference eight, then the tails painted oldest first, so\n      // the newest pass lies on top.\n      let r = 0.13 * ref[p], g = 0.13 * ref[p], b = 0.16 * ref[p];\n      for (let k = 0; k \u003c 3; k++) ag[k] = clock - tv[k * N + p];\n      ord[0] = 0;\n      ord[1] = 1;\n      ord[2] = 2;\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      if (ag[ord[1]] \u003c ag[ord[2]]) [ord[1], ord[2]] = [ord[2], ord[1]];\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      for (let n = 0; n \u003c 3; n++) {\n        const k = ord[n], age = ag[k], d = td[k * N + p], al = tailCover(age, d, L) * fade;\n        if (al \u003c= 0) continue;\n        const c = col[k], lv = 1 - (1 - tailBright(age)) * (1 - 0.8 * S.warm[k]), wh = 0.5 * (1 - age / L) ** 8 * cl(1 - d / HW, 0, 1);\n        r += ((c[0] + (1 - c[0]) * wh) * lv - r) * al;\n        g += ((c[1] + (1 - c[1]) * wh) * lv - g) * al;\n        b += ((c[2] + (1 - c[2]) * wh) * lv - b) * al;\n      }\n      // The bodies: a white core in a glow of the body's colour.\n      for (let k = 0; k \u003c 3; k++) {\n        const dx = x + 0.5 - bx[k], dy = y + 0.5 - by[k], d2 = dx * dx + dy * dy;\n        if (d2 >= GLOW * GLOW) continue;\n        const dd = sqrt(d2), halo = 0.7 * fade * (1 - dd / GLOW) ** 1.5, core = sm(2.8, 1.4, dd) * fade, c = col[k];\n        r = 1 - (1 - r) * (1 - c[0] * halo);\n        g = 1 - (1 - g) * (1 - c[1] * halo);\n        b = 1 - (1 - b) * (1 - c[2] * halo);\n        r += (1 - r) * core;\n        g += (1 - g) * core;\n        b += (1 - b) * core;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n\n","layer":{"id":"layer-figure-eight-orbit","type":"code","name":"figure-eight-orbit","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Figure-Eight Orbit\n// Family:  physics\n// Idea:    Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: figure-eight solution of the three-body problem (Cris Moore, 1993; Alain Chenciner and Richard Montgomery, 2000), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1\n//\n// Knob 1: Hue. Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive.\n// Knob 2: Speed. At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2.\n// Knob 3: Trail. How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2.\n// Knob 4: Kick. Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest.\n// Buttons: K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, abs, hypot, round, cbrt, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Chenciner and Montgomery's starting values, G = m = 1: body 3 at the\n// crossing, bodies 1 and 2 opposite each other, both moving at half body 3's\n// velocity the other way. The period is 6.32591398.\nconst X1 = 0.97000436, Y1 = -0.24308753, VX3 = -0.93240737, VY3 = -0.86473146, PERIOD = 6.32591398;\n// Orbit to panel: the eight's long axis down the panel, SC LEDs to the unit.\n// It reaches 1.081 along that axis and 0.358 across, so 115 by 38 LEDs.\nconst SC = 53, CX = 31.5, CY = 63.5;\n// Under RS the pull is that of a uniform ball, so a close pass of a binary\n// stays finite. The eight never comes closer than 0.69, so it never feels it.\nconst RS = 0.05;\n// Step in orbit time: Yoshida's fourth-order leapfrog at H0, shortened by\n// (r / 0.5)^1.5 when two bodies are closer than 0.5.\nconst H0 = 1 / 128;\nconst YW1 = 1 / (2 - cbrt(2)), YW0 = -cbrt(2) * YW1;\nconst YC = [YW1 / 2, (YW0 + YW1) / 2, (YW0 + YW1) / 2, YW1 / 2], YD = [YW1, YW0, YW1];\n// Tail half-width at the head, in LEDs, and how far a body glows.\nconst HW = 3.6, GLOW = 6;\n// Opening hues: azure, rose, lime.\nconst HUE0 = 0.58;\n// Longest tail, in periods, and so the history the pattern keeps.\nconst LMAX = 2;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trail: 0.33, kick: 0, kickSet: -1, kickWait: 0, begun: false,\n    p: new Float64Array(6), v: new Float64Array(6), a: new Float64Array(6),\n    clock: 0, carry: 0, out: 0, fade: 1, phase: 0, nudges: 0,\n    // Per body and LED: when the body last passed (orbit time) and how close.\n    tv: new Float32Array(3 * N).fill(-1e9), td: new Float32Array(3 * N).fill(99),\n    lx: new Float32Array(3), ly: new Float32Array(3), warm: [0, 0, 0],\n    ref: new Float32Array(N), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n  drawReference(params.s);\n}\n\n// Pull on each body; under RS the force grows linearly from the centre.\nfunction accel(p, a) {\n  a.fill(0);\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) {\n      const dx = p[2 * j] - p[2 * i], dy = p[2 * j + 1] - p[2 * i + 1], r = sqrt(dx * dx + dy * dy), q = max(r, RS);\n      const f = 1 / (q * q * q);\n      a[2 * i] += dx * f;\n      a[2 * i + 1] += dy * f;\n      a[2 * j] -= dx * f;\n      a[2 * j + 1] -= dy * f;\n    }\n}\n\nfunction closest(p) {\n  let m = 1e9;\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) m = min(m, hypot(p[2 * j] - p[2 * i], p[2 * j + 1] - p[2 * i + 1]));\n  return m;\n}\n\n// One step of Yoshida's fourth-order symplectic integrator: three leapfrogs\n// of h w1, h w0, h w1, with w0 negative.\nfunction step(p, v, a, h) {\n  for (let s = 0; s \u003c 3; s++) {\n    for (let i = 0; i \u003c 6; i++) p[i] += YC[s] * h * v[i];\n    accel(p, a);\n    for (let i = 0; i \u003c 6; i++) v[i] += YD[s] * h * a[i];\n  }\n  for (let i = 0; i \u003c 6; i++) p[i] += YC[3] * h * v[i];\n}\n\nconst stepLength = (p) => H0 * min(1, (max(closest(p), RS) / 0.5) ** 1.5);\n\n// The kick: bodies i and j pushed apart along the line between them, each\n// by eps, and then every velocity scaled back to the kinetic energy before\n// the push. Positions do not move, so the energy stays what it was; the\n// momentum stays zero and the angular momentum stays zero too, as for the\n// eight itself, so only the shape of the motion changes.\nfunction push(S, i, j, eps) {\n  const { p, v } = S, dx = p[2 * i] - p[2 * j], dy = p[2 * i + 1] - p[2 * j + 1], r = hypot(dx, dy) || 1;\n  let k0 = 0, k1 = 0;\n  for (let n = 0; n \u003c 6; n++) k0 += v[n] * v[n];\n  v[2 * i] += (eps * dx) / r;\n  v[2 * i + 1] += (eps * dy) / r;\n  v[2 * j] -= (eps * dx) / r;\n  v[2 * j + 1] -= (eps * dy) / r;\n  for (let n = 0; n \u003c 6; n++) k1 += v[n] * v[n];\n  const f = sqrt(k0 / k1);\n  for (let n = 0; n \u003c 6; n++) v[n] *= f;\n}\n\n// Kick 0..1 to eps: nothing up to 0.06, then up to 0.45.\nconst epsOf = (k) => 0.45 * (max(0, k - 0.06) / 0.94) ** 1.2;\n\nfunction initial(S) {\n  const { p, v } = S;\n  p.set([X1, Y1, -X1, -Y1, 0, 0]);\n  v.set([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]);\n  push(S, 0, 1, epsOf(S.kick));\n  S.kickSet = S.kick;\n}\n\nconst toCol = (y) => CX + y * SC, toRow = (x) => CY - x * SC;\n\n// A tail at an LED: age a in orbit time, distance d in LEDs, tail length L.\n// It narrows from HW at the head to nothing at its end, and dims from full\n// at the head to 0.6 a third of a period behind it and 0.55 after that.\nfunction tailCover(a, d, L) {\n  if (a \u003c 0 || a >= L) return 0;\n  return cl((HW + 0.5) * (1 - a / L) ** 1.5 - d + 0.5, 0, 1);\n}\nconst tailBright = (a) => 0.55 + 0.45 * exp(-a / (0.15 * PERIOD));\nconst tailValue = (a, d, L) => tailCover(a, d, L) * tailBright(a);\n\n// Mark the LEDs round body k at orbit time t. Within one pass the closest\n// approach is kept; a later pass takes the LED when it would light it more.\nfunction deposit(S, k, t) {\n  const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]), R = HW + 1.5, L = LMAX * PERIOD;\n  if (bx \u003c -R || bx > W + R || by \u003c -R || by > H + R) return;\n  const o = k * N, tv = S.tv, td = S.td;\n  for (let y = max(0, floor(by - R)); y \u003c= min(H - 1, floor(by + R)); y++)\n    for (let x = max(0, floor(bx - R)); x \u003c= min(W - 1, floor(bx + R)); x++) {\n      const d = hypot(x + 0.5 - bx, y + 0.5 - by);\n      if (d > R) continue;\n      const q = o + y * W + x, t0 = tv[q];\n      if (abs(t - t0) \u003c 0.3) {\n        if (d \u003c td[q]) {\n          tv[q] = t;\n          td[q] = d;\n        }\n        continue;\n      }\n      const ref = max(t, t0), vNew = tailValue(ref - t, d, L), vOld = tailValue(ref - t0, td[q], L);\n      if (vNew > vOld || (vNew === vOld && t > t0)) {\n        tv[q] = t;\n        td[q] = d;\n      }\n    }\n}\n\n// Deposit body k if it has moved half an LED since it last did.\nfunction trace(S, t) {\n  for (let k = 0; k \u003c 3; k++) {\n    const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]);\n    if (hypot(bx - S.lx[k], by - S.ly[k]) \u003c 0.5) continue;\n    S.lx[k] = bx;\n    S.ly[k] = by;\n    deposit(S, k, t);\n  }\n}\n\nconst farthest = (p) => max(hypot(p[0], p[1]), hypot(p[2], p[3]), hypot(p[4], p[5]));\n\n// Start (or start again): the starting line-up with the current kick, and\n// its own past drawn behind it by running the orbit backward for up to LMAX\n// periods, or until a body would come in from off the panel.\nfunction restart(S) {\n  S.tv.fill(-1e9);\n  S.td.fill(99);\n  S.clock = 0;\n  S.carry = 0;\n  S.out = 0;\n  initial(S);\n  const { p, v, a } = S;\n  const p0 = Float64Array.from(p), v0 = Float64Array.from(v);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  let t = 0;\n  while (t > -LMAX * PERIOD && farthest(p) \u003c 1.4) {\n    trace(S, t);\n    const h = stepLength(p);\n    step(p, v, a, -h);\n    t -= h;\n  }\n  p.set(p0);\n  v.set(v0);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  trace(S, 0);\n}\n\n// Whole steps only, the remainder carried to the next frame, so at the\n// opening the step never changes and the integrator stays symplectic.\nfunction advance(S, dt) {\n  const { p, v, a } = S;\n  S.carry += dt;\n  for (let h = stepLength(p); S.carry >= h; h = stepLength(p)) {\n    step(p, v, a, h);\n    S.carry -= h;\n    S.clock += h;\n    trace(S, S.clock);\n  }\n}\n\n// The exact eight, sampled over one period, as a faint line under the tails.\nfunction drawReference(S) {\n  const p = Float64Array.from([X1, Y1, -X1, -Y1, 0, 0]);\n  const v = Float64Array.from([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]), a = new Float64Array(6);\n  const n = 1600, h = PERIOD / n, ref = S.ref;\n  for (let s = 0; s \u003c n; s++) {\n    const bx = toCol(p[1]), by = toRow(p[0]);\n    for (let y = max(0, floor(by - 1)); y \u003c= min(H - 1, floor(by + 1)); y++)\n      for (let x = max(0, floor(bx - 1)); x \u003c= min(W - 1, floor(bx + 1)); x++) {\n        const c = cl(1.1 - hypot(x + 0.5 - bx, y + 0.5 - by), 0, 1);\n        if (c > ref[y * W + x]) ref[y * W + x] = c;\n      }\n    step(p, v, a, h);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.33, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trail = cl(k[2], 0.33, 2);\n  S.kick = cl(k[3], 0, 1);\n  if (!S.begun) {\n    restart(S);\n    S.begun = true;\n  }\n  // A turned Kick starts the three again once the knob has rested 0.4 s,\n  // fading the old orbit out over 0.5 s and the new one in.\n  if (abs(S.kick - S.kickSet) > 0.004) {\n    S.kickWait += d;\n    if (S.kickWait > 0.4 && S.phase === 0) S.phase = -1;\n  } else S.kickWait = 0;\n  if (input.btnPressed && input.btnPressed[0] && S.phase === 0) {\n    const pair = S.nudges++ % 3;\n    push(S, pair, (pair + 1) % 3, max(0.05, epsOf(S.kick)));\n  }\n  // At Speed 2 the orbit's clock runs 1 unit a second.\n  advance(S, d * S.speed * 0.5);\n  // Off the panel: a body more than 1.35 from the centre.\n  if (farthest(S.p) > 1.35) S.out += d;\n  else S.out = max(0, S.out - d);\n  if ((S.out > 3 || farthest(S.p) > 8) && S.phase === 0) S.phase = -1;\n  if (S.phase \u003c 0) {\n    S.fade -= d / 0.5;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      restart(S);\n      S.kickWait = 0;\n      S.phase = 1;\n    }\n  } else if (S.phase > 0) {\n    S.fade += d / 0.5;\n    if (S.fade >= 1) {\n      S.fade = 1;\n      S.phase = 0;\n    }\n  }\n}\n\nfunction palette(S) {\n  for (let k = 0; k \u003c 3; k++) {\n    const h = S.hue + HUE0 + k / 3, hh = h - floor(h);\n    // Orange to yellow-green: paler and kept at full value, so a tail never\n    // reads brown or olive.\n    const warm = sm(0.02, 0.08, hh) * (1 - sm(0.2, 0.27, hh));\n    hsv(h, 0.85 - 0.3 * warm, 1, S.col[k]);\n    S.warm[k] = warm;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { tv, td, ref, col, clock, fade } = S, L = S.trail * PERIOD;\n  const bx = [0, 0, 0], by = [0, 0, 0];\n  for (let k = 0; k \u003c 3; k++) {\n    bx[k] = toCol(S.p[2 * k + 1]);\n    by[k] = toRow(S.p[2 * k]);\n  }\n  const ord = [0, 1, 2], ag = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The faint reference eight, then the tails painted oldest first, so\n      // the newest pass lies on top.\n      let r = 0.13 * ref[p], g = 0.13 * ref[p], b = 0.16 * ref[p];\n      for (let k = 0; k \u003c 3; k++) ag[k] = clock - tv[k * N + p];\n      ord[0] = 0;\n      ord[1] = 1;\n      ord[2] = 2;\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      if (ag[ord[1]] \u003c ag[ord[2]]) [ord[1], ord[2]] = [ord[2], ord[1]];\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      for (let n = 0; n \u003c 3; n++) {\n        const k = ord[n], age = ag[k], d = td[k * N + p], al = tailCover(age, d, L) * fade;\n        if (al \u003c= 0) continue;\n        const c = col[k], lv = 1 - (1 - tailBright(age)) * (1 - 0.8 * S.warm[k]), wh = 0.5 * (1 - age / L) ** 8 * cl(1 - d / HW, 0, 1);\n        r += ((c[0] + (1 - c[0]) * wh) * lv - r) * al;\n        g += ((c[1] + (1 - c[1]) * wh) * lv - g) * al;\n        b += ((c[2] + (1 - c[2]) * wh) * lv - b) * al;\n      }\n      // The bodies: a white core in a glow of the body's colour.\n      for (let k = 0; k \u003c 3; k++) {\n        const dx = x + 0.5 - bx[k], dy = y + 0.5 - by[k], d2 = dx * dx + dy * dy;\n        if (d2 >= GLOW * GLOW) continue;\n        const dd = sqrt(d2), halo = 0.7 * fade * (1 - dd / GLOW) ** 1.5, core = sm(2.8, 1.4, dd) * fade, c = col[k];\n        r = 1 - (1 - r) * (1 - c[0] * halo);\n        g = 1 - (1 - g) * (1 - c[1] * halo);\n        b = 1 - (1 - b) * (1 - c[2] * halo);\n        r += (1 - r) * core;\n        g += (1 - g) * core;\n        b += (1 - b) * core;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2."},{"name":"Trail","min":0.33,"max":2,"about":"How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2."},{"name":"Kick","min":0,"max":1,"about":"Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest."}],"start":[0,2,0.33,0.06],"measures":{"motion":0.2677,"detail":0.0329,"edges":0.6811,"complexity":0.5694,"coverage":0.1522,"colour":0.2009,"drift":0.1349},"knobResponse":[0.0772,0.0891,0.0607,0.1032]},{"slug":"final-approach","title":"Final Approach","family":"flight","round":23,"note":"밤에 내려앉는 여객기 조종석에서 앞을 봐요. 활주로 등과 진입등이 도시 불빛이 깔린 지평선 아래로 모이고, 래빗 섬광등이 1초에 두 번 활주로 쪽으로 달려가요. 왼쪽 PAPI 가 흰 둘 빨강 둘을 보이다가, 플레어와 접지 뒤에는 중심선 등이 발밑으로 쏟아져 지나가요. K1 을 누르면 복행해요.","idea":"From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.","buttons":"K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.","code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","layer":{"id":"layer-final-approach","type":"code","name":"final-approach","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower."},{"name":"Weather","min":0,"max":3,"about":"A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late."},{"name":"Crosswind","min":-1,"max":1,"about":"The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare."}],"start":[0,2,0,0.06],"measures":{"motion":1.2895,"detail":0.0365,"edges":0.3949,"complexity":1.2312,"coverage":0.4908,"colour":0.0984,"drift":0.1085},"knobResponse":[0.0373,0.0632,0.3041,0.0884]},{"slug":"fire","title":"Fire","family":"sim","round":1,"note":"데모신의 불이에요. 바닥의 열이 올라가며 식고, K1 을 돌리면 나무 불에서 가스 불, 붕소 불까지 색이 바뀌어요.","idea":"The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.","buttons":"K1 tap drops a log on, and the fire flares and throws sparks.","code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-fire","type":"code","name":"fire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"What is burning: wood, then potassium lilac, gas blue, copper teal and boron green."},{"name":"Height","min":0.6,"max":4,"about":"How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the flames stand up; either way they lean and the gusts come with it."},{"name":"Crackle","min":0,"max":1,"about":"Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower."}],"start":[0,2,0,0.06],"measures":{"motion":0.9647,"detail":0.0218,"edges":0.1201,"complexity":0.8283,"coverage":0.5059,"colour":0.4964,"drift":0.2161},"knobResponse":[0.3207,0.2786,0.0846,0.0537]},{"slug":"fireflies","title":"Fireflies","family":"insect","round":16,"note":"풀밭 위 반딧불이 200마리가 따로 깜박이다가 서로의 깜박임을 보고 박자를 맞춰, 한꺼번에 깜박이는 무리와 어두운 쉼이 번갈아 와요. K4 가 결합의 세기이고, K1 을 누르면 손전등이 지나가며 박자를 흩어요.","idea":"Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.","buttons":"K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.","code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","layer":{"id":"layer-fireflies","type":"code","name":"fireflies","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Moon","min":0,"max":1,"about":"At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon."},{"name":"Pace","min":0.5,"max":4,"about":"At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it."},{"name":"Fireflies","min":200,"max":480,"about":"How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge."},{"name":"Coupling","min":0,"max":0.25,"about":"How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst."}],"start":[0,2,200,0.06],"measures":{"motion":0.3823,"detail":0.021,"edges":0.1814,"complexity":0.404,"coverage":0.3382,"colour":0.0994,"drift":0.0945},"knobResponse":[0.0808,0.0516,0.0623,0.0425]},{"slug":"flame-test","title":"Flame Test","family":"chemistry","round":22,"note":"분젠 버너의 파란 불꽃에 손이 니크롬 고리를 넣으면 불꽃이 그 염의 색으로 터져요. 구리는 청록, 나트륨은 짙은 노랑으로 타고 알갱이가 튀다가 파랗게 돌아오면, 고리를 염산에 씻어 이름표 붙은 다음 시계접시로 가요.","idea":"On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.","buttons":"K1 tap sends the loop to the next salt now.","code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-flame-test","type":"code","name":"flame-test","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salt","min":0,"max":8,"about":"Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker."},{"name":"Room","min":0,"max":1,"about":"The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand."},{"name":"Air","min":-1,"max":1,"about":"The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0593,"detail":0.0588,"edges":0.4458,"complexity":1.5027,"coverage":0.9519,"colour":0.1298,"drift":0.0434},"knobResponse":[0.0735,0.0457,0.2666,0.1163]},{"slug":"flip-clock","title":"Flip Clock","family":"time","round":2,"note":"세워 둔 넘김 시계예요. 위에 시, 아래에 분 카드가 있고, 바뀔 때마다 옛 카드의 윗장이 앞으로 넘어가 그 뒷면이 새 카드의 아랫장으로 내려앉아요.","idea":"A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.","buttons":"K1 tap sets the clock back to 09:58, and the flaps spin round to get there.","code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","layer":{"id":"layer-flip-clock","type":"code","name":"flip-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"The colour of the digits; the dark cards take a little of it."},{"name":"Rate","min":0,"max":3,"about":"From real time at 0 to a minute every second at 3, a minute every four seconds where it starts."},{"name":"Seconds","min":0,"max":1,"about":"Turn it up and a seconds card joins below, growing until all three are one size."},{"name":"Light","min":0,"max":1,"about":"How hard the light falls on the cards, from flat to a deep shadow under each falling flap."}],"start":[0,2,0,0.06],"measures":{"motion":0.0975,"detail":0.0443,"edges":0.7774,"complexity":0.213,"coverage":0.7633,"colour":0.1458,"drift":0.128},"knobResponse":[0.0983,0.1045,0.1894,0.032]},{"slug":"flipdot","title":"Flipdot","family":"type","round":22,"note":"버스 앞에 다는 형광 노랑 플립 디스크 행선판을 세워 놓았어요. 위 칸에 노선 번호, 아래 칸에 행선지가 7줄 점 글꼴로 서고, 쪽이 바뀔 때마다 디스크가 한 줄씩 넘어가며 판 전체를 노랗게 뒤집었다가 반전된 경유지 쪽을 써요. 넘어가는 동안의 디스크는 가는 모서리로 보여요.","idea":"A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.","buttons":"K1 tap ends the page now and the next wave starts.","code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","layer":{"id":"layer-flipdot","type":"code","name":"flipdot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Disc","min":0,"max":1,"about":"The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second."},{"name":"Route","min":0,"max":3,"about":"Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall."},{"name":"Wipe","min":0,"max":3,"about":"How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3."}],"start":[0,2,0,0.06],"measures":{"motion":0.1111,"detail":0.2452,"edges":0.47,"complexity":0.3774,"coverage":0.3252,"colour":0.3924,"drift":0.2652},"knobResponse":[0.0968,0.1699,0.0516,0.048]},{"slug":"flock","title":"Flock","family":"particle","round":1,"note":"새 90마리가 가까운 이웃만 보고 날아요. 보이지 않는 매가 무리를 쫓아 자꾸 갈라놓아요.","idea":"Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.","buttons":"K1 tap sends the unseen hawk diving into the flock.","code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","layer":{"id":"layer-flock","type":"code","name":"flock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flock's colours around the wheel; birds flying up and down sit either side of it."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the birds fly, and so how long their streaks are."},{"name":"Scatter","min":-1,"max":1,"about":"Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats."},{"name":"Trail","min":0.3,"max":2.5,"about":"How long a streak lasts; long trails leave the flock's recent path woven across the panel."}],"start":[0,2,0,0.3],"measures":{"motion":0.7954,"detail":0.0794,"edges":0.4039,"complexity":1.2562,"coverage":0.2957,"colour":0.1808,"drift":0.1151},"knobResponse":[0.0754,0.1076,0.0932,0.1053]},{"slug":"fluoroscope","title":"Fluoroscope","family":"body","round":27,"note":"형광 투시 화면의 어두운 판 위에서 해골이 러닝머신을 옆모습으로 걸어요. 정수리에서 발가락까지 128줄을 다 쓰고, 먼 쪽 다리와 팔은 흐리며 움직이는 뼈 뒤에 인광이 잠깐 남아요. K3 은 걸음을 두 발이 뜨는 달리기로 바꾸고, 누르면 돌아서서 앞모습으로 손을 흔들어요.","idea":"On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.","buttons":"K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.","code":"// ===== Patternflow pattern =====\n// Title:   Fluoroscope\n// Family:  body\n// Idea:    On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after cineradiography, the X-ray motion pictures of the 1950s\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1\n//\n// Knob 1: Screen. The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour.\n// Knob 2: Speed. The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower.\n// Knob 3: Gait. A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps.\n// Knob 4: Dose. The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body.\n// Buttons: K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, sqrt, exp, floor, ceil, atan2, hypot, PI } = Math;\nconst D = PI / 180;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// A figure 114 LEDs tall: limb lengths and half spans of hips and shoulders.\n// FLOOR is the top of the belt. Bones are drawn half again as thick as life.\nconst LT = 27.5, LS = 27.5, LU = 20.5, LF = 16, HZ = 5.2, SZ = 12.4, FLOOR = 122.5;\n\n// For the walk (toe-off at 60%) and then the run (toe-off at 40%), the thigh's\n// angle from vertical and the flexion of knee and ankle, in degrees every 10%\n// of a stride from heel strike, after clinical gait curves.\nconst GT = [\n  [24, 20, 12, 3, -6, -14, -10, 6, 19, 25],\n  [4, 16, 18, 10, 5, 14, 38, 60, 45, 15],\n  [0, -5, 3, 6, 8, 0, -16, -10, -2, 1],\n  [30, 18, 5, -5, -12, -6, 12, 30, 42, 40],\n  [20, 38, 40, 28, 18, 50, 90, 104, 76, 36],\n  [6, 16, 20, 10, -18, -14, -2, 6, 8, 6],\n];\n// A periodic Catmull-Rom spline through a row.\nfunction curve(r, p) {\n  const f = (p - floor(p)) * 10, i = floor(f) % 10, u = f - floor(f);\n  const a = r[(i + 9) % 10], b = r[i], c = r[(i + 1) % 10], d = r[(i + 2) % 10];\n  return b + 0.5 * u * (c - a + u * (2 * a - 5 * b + 4 * c - d + u * (3 * (b - c) + d - a)));\n}\nconst ang = (k, q, g) => mix(curve(GT[k], q), curve(GT[k + 3], q), g);\n// The jump, keyed in seconds: thigh, knee, ankle, shoulder, elbow, lean.\nconst JT = [0, 0.3, 0.46, 0.7, 0.9, 1.1, 1.5];\nconst JK = [\n  [0, 50, 2, 30, 10, 42, 0],\n  [0, 95, 4, 58, 16, 76, 0],\n  [0, 24, -34, -18, -6, 20, 0],\n  [0, -40, 58, 50, 25, 10, 0],\n  [10, 15, 45, 50, 35, 30, 10],\n  [0, 24, 2, 4, 8, 20, 0],\n];\nfunction key(r, u) {\n  let i = 0;\n  while (i \u003c 5 && u > JT[i + 1]) i++;\n  return mix(r[i], r[i + 1], sm(JT[i], JT[i + 1], u));\n}\n\n// The spine's curve in the trunk's frame (x forward, y down from the hips).\nconst CY = [-41, -36.5, -32.5, -28, -23.5, -19, -15.5, -11.5, -7.5, -4.5];\nconst CX = [-2.2, -1.9, -3, -4.6, -5.3, -4.8, -3.8, -2.4, -2, -2.8];\nfunction spx(y) {\n  let i = 0;\n  while (i \u003c 8 && y > CY[i + 1]) i++;\n  return mix(CX[i], CX[i + 1], (y - CY[i]) / (CY[i + 1] - CY[i]));\n}\n// 24 vertebral bodies from the neck down: x, y, half sizes, tilt.\nconst VT = new Float64Array(144);\nfor (let v = 0, y = -40.8; v \u003c 24; v++) {\n  const k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2, h = [1.25, 1.3, 2.3][k], c = y + h / 2;\n  VT.set([spx(c), c, [1.3, 1.6, 2.2][k], h * 0.4, [1.6, 1.9, 2.6][k], -atan2(spx(c + 0.5) - spx(c - 0.5), 1)], v * 6);\n  y += h;\n}\n// Seven ribs stand for twelve. Each row gives the half depth and width of the\n// cage, the drop of the front end and its sag. The last number is how far\n// round the bone goes before the cartilage, which the beam passes through.\nconst RIB = [\n  [4, 5.5, 4, 0.6, 0.95], [5.4, 8.2, 6.2, 0.9, 0.92], [6.1, 10, 7.6, 1.1, 0.88], [6.6, 11.2, 8.4, 1.2, 0.82],\n  [6.7, 11.6, 8.6, 1.2, 0.75], [6.5, 11.4, 8.2, 1.1, 0.64], [6, 10.6, 7, 1, 0.5],\n];\n// The hip bone as lines split by NaN: the iliac crest, the front border down\n// to the socket, the back border, the brim from sacrum to pubis.\nconst IL = [\n  -6.6, -5.5, 4, -5.6, -9.4, 6.2, -3.6, -11.6, 7.8, -1, -11.8, 8.8, 1.8, -10.4, 9.2, 3.8, -8, 9, 4.2, -7.4, 9, 3, -3.6, 7.5, 1.8, -2.6, 6,\n  NaN, 0, 0, -6.6, -5.5, 4, -5.4, -2.6, 4.6, -4.6, -1.2, 4.8, -3.2, 1.2, 4.2, -2.8, 4, 4.2, -2.4, 6.4, 4.2,\n  NaN, 0, 0, -4.2, -3.4, 3.6, -1.6, -1.6, 4.4, 0.5, -1, 4.6, 2.6, 0.6, 3.6, 4.4, 3, 1.2,\n];\n// Gas pockets in the gut: x, y, z, size.\nconst GAS = [2.6, -13.6, -5, 1.4, 3.2, -7, 3, 1, -0.4, -5, -2.4, 0.9, 4.4, -3.6, -4.4, 0.85];\n// Fingers: offset across the palm and length; the share of each phalanx.\nconst FO = [1.25, 0.42, -0.42, -1.2], FLN = [5.4, 6, 5.6, 4.6], PHL = [0.45, 0.32, 0.23];\n// Phosphors: the glow and its afterglow.\nconst PAL = [\n  [0.45, 0.7, 1, 0.35, 1, 0.55],\n  [0.3, 1, 0.4, 0.15, 0.7, 0.25],\n  [1, 0.62, 0.18, 0.9, 0.3, 0.05],\n  [0.72, 0.38, 1, 0.35, 0.3, 1],\n];\n\n// Bone and flesh add up apart as path length along the beam; G is afterglow.\nconst B = new Float32Array(N), T = new Float32Array(N), G = new Float32Array(N), GB = new Float32Array(N);\nconst LA = new Float64Array(6), AR = new Float64Array(4), PC = new Float64Array(6), MO = new Float64Array(6), MI = new Float64Array(6);\nconst FR = new Float64Array(13), AV = new Float64Array(9);\nlet TG = B;\nlet PSI = 0, CP = 1, SP = 0, OX = 25, OY = 63, LAM = 0, LC = 1, LSN = 0;\nlet HX = 0, HY = 0, ETA = 0, HC = 1, HS = 0, JA = 0, JC = 1, JS = 0;\nlet gx = 0, gy = 0, gz = 0, qx = 0, qy = 0, qz = 0, FROT = 0;\nlet e1x = 1, e1y = 0, e1z = 0, e2x = 0, e2y = 1, e2z = 0, e3x = 0, e3z = 1;\n\n// Frames: body, with x forward and y down, trunk, head, jaw, and a limb's\n// own, whose first axis runs along the bone.\nconst FB = (x, y, z) => ((gx = x), (gy = y), (gz = z), (FROT = 0));\nconst FT = (x, y, z) => ((gx = x * LC - y * LSN), (gy = x * LSN + y * LC), (gz = z), (FROT = LAM));\nconst FH = (x, y, z) => ((gx = HX + x * HC - y * HS), (gy = HY + x * HS + y * HC), (gz = z), (FROT = ETA));\nconst FL = (u, v, w) => (\n  (gx = FR[0] + FR[3] * u + FR[6] * v + FR[9] * w), (gy = FR[1] + FR[4] * u + FR[7] * v + FR[10] * w), (gz = FR[2] + FR[5] * u + FR[8] * v + FR[11] * w), (FROT = FR[12])\n);\nfunction FJ(x, y, z) {\n  const dx = x - 1.3, dy = y + 2.6;\n  FH(1.3 + dx * JC - dy * JS, -2.6 + dx * JS + dy * JC, z);\n  FROT += JA;\n}\nfunction P() {\n  qx = OX + gx * CP - gz * SP;\n  qy = OY + gy;\n  qz = gx * SP + gz * CP;\n}\n\n// A tapered rod, hollow when sh > 0: the chord through a tube of cortex.\nfunction tube(ax, ay, bx, by, ra, rb, w, sh) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6, m = max(ra, rb) + 0.8;\n  const x0 = max(0, ceil(min(ax, bx) - m)), x1 = min(W - 1, floor(max(ax, bx) + m));\n  const y0 = max(0, ceil(min(ay, by) - m)), y1 = min(H - 1, floor(max(ay, by) + m));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const ux = x - ax, uy = y - ay, t = cl((ux * dx + uy * dy) / l2, 0, 1);\n      const ex = ux - t * dx, ey = uy - t * dy, d2 = ex * ex + ey * ey, R = ra + (rb - ra) * t + 0.3, o = R * R - d2;\n      if (o \u003c= 0) continue;\n      const ri = R - 0.85, i = ri * ri - d2;\n      TG[y * W + x] += 2 * w * (sqrt(o) - (sh && ri > 0 && i > 0 ? sh * sqrt(i) : 0));\n    }\n}\n// An ellipsoid seen along the beam: its quadric, and the chord through it.\nfunction quad(M, a, b, c) {\n  const A = 1 / (a * a), Bq = 1 / (b * b), C = 1 / (c * c);\n  M[0] = e1x * e1x * A + e2x * e2x * Bq + e3x * e3x * C;\n  M[1] = e1x * e1y * A + e2x * e2y * Bq;\n  M[2] = e1y * e1y * A + e2y * e2y * Bq;\n  M[3] = e1x * e1z * A + e2x * e2z * Bq + e3x * e3z * C;\n  M[4] = e1y * e1z * A + e2y * e2z * Bq;\n  M[5] = e1z * e1z * A + e2z * e2z * Bq + e3z * e3z * C;\n}\nfunction chord(M, u, v) {\n  const b = M[3] * u + M[4] * v, d = b * b - M[5] * (M[0] * u * u + 2 * M[1] * u * v + M[2] * v * v - 1);\n  return d > 0 ? (2 * sqrt(d)) / M[5] : 0;\n}\n// Tilted th in the side plane, turned yaw about the vertical. With a shell t\n// the inside counts k less, so a skull's edge glows brighter than its face.\nfunction ell(cx, cy, a, b, c, th, yaw, w, t, k) {\n  (a += 0.3), (b += 0.3), (c += 0.3);\n  const ph = PSI + yaw, cp = cos(ph), sp = sin(ph), ct = cos(th), st = sin(th);\n  (e1x = ct * cp), (e1y = st), (e1z = ct * sp), (e2x = -st * cp), (e2y = ct), (e2z = -st * sp), (e3x = -sp), (e3z = cp);\n  quad(MO, a, b, c);\n  if (t) quad(MI, a - t, b - t, c - t);\n  const rx = hypot(e1x * a, e2x * b, e3x * c) + 0.5, ry = hypot(e1y * a, e2y * b) + 0.5;\n  const x0 = max(0, ceil(cx - rx)), x1 = min(W - 1, floor(cx + rx)), y0 = max(0, ceil(cy - ry)), y1 = min(H - 1, floor(cy + ry));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      let s = chord(MO, x - cx, y - cy);\n      if (s > 0 && t) s -= k * chord(MI, x - cx, y - cy);\n      if (s > 0) TG[y * W + x] += s * w;\n    }\n}\n// The far side of the body glows dimmer than the near side.\nconst wz = () => (TG === B ? cl(1 + 0.09 * qz, 0.45, 1.15) : 1);\nfunction E(F, x, y, z, a, b, c, th, yaw, w, t = 0, k = 0) {\n  F(x, y, z);\n  P();\n  ell(qx, qy, a, b, c, th + FROT, yaw, w * wz(), t, k);\n}\nfunction Tb(F, x1, y1, z1, x2, y2, z2, ra, rb, w, sh = 0) {\n  F(x1, y1, z1);\n  P();\n  const ax = qx, ay = qy, az = qz;\n  F(x2, y2, z2);\n  P();\n  qz = (qz + az) / 2;\n  tube(ax, ay, qx, qy, ra, rb, w * wz(), sh);\n}\n\nexport function setup(params) {\n  const bg = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x - 31.5) / 36, v = (y - 63.5) / 72;\n      bg[y * W + x] = (0.03 + 0.025 * Math.random()) * max(0, 1 - 0.8 * (u * u + v * v) ** 2);\n    }\n  params.s = { ph: 0.05, br: 0, belt: 0, turn: -1, jump: -1, dt: 1 / 30, scr: 0, spd: 2, gait: 0, dose: 0.06, amp: 1, bg };\n  G.fill(0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], b = input.btnPressed || [];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dt = dt || 1 / 30;\n  S.scr = cl(k[0], 0, 1);\n  S.spd = cl(k[1], 0.2, 3);\n  const g = (S.gait = cl(k[2], 0, 1));\n  S.dose = cl(k[3], 0, 1);\n  if (b[0] && S.turn \u003c 0) S.turn = 0;\n  if (b[1] && S.jump \u003c 0) S.jump = 0;\n  if (S.turn >= 0 && (S.turn += dt) > 5) S.turn = -1;\n  if (S.jump >= 0 && (S.jump += dt) > 1.5) S.jump = -1;\n  const a = (S.amp = S.turn \u003c 0 ? 1 : 1 - sm(0, 0.7, S.turn) * (1 - sm(4.3, 5, S.turn)));\n  const f = (mix(0.93, 1.4, g) * S.spd) / 2, to = mix(0.6, 0.4, g);\n  S.ph = (S.ph + dt * f * a) % 1;\n  // The belt runs as fast as the foot on it goes back, from strike to toe-off.\n  const ax = (q) => LT * sin(ang(0, q, g) * D) + LS * sin((ang(0, q, g) - ang(1, q, g)) * D);\n  S.belt += (dt * a * a * f * (ax(0) - ax(to))) / to;\n  S.br = (S.br + dt * mix(0.25, 0.5, g)) % 1;\n}\n\nfunction treadmill(belt) {\n  const y = FLOOR + 1.7, an = -belt / 2.3, c = 1.8 * cos(an), s = 1.8 * sin(an);\n  tube(4.5, y, 59.5, y, 0.8, 0.8, 0.45, 0.5);\n  tube(4.5, FLOOR + 0.1, 59.5, FLOOR + 0.1, 0.2, 0.2, 0.3, 0);\n  for (let x = 4.5; x \u003c 60; x += 55) {\n    ell(x, y, 2.1, 2.1, 2.1, 0, 0, 0.45, 0.6, 1);\n    tube(x - c, y - s, x + c, y + s, 0.35, 0.35, 0.5, 0);\n  }\n  for (let j = 0; j \u003c 8; j++) {\n    const x = 5 + ((((j * 7 - belt) % 56) + 56) % 56);\n    tube(x, FLOOR - 0.2, x + 1, FLOOR - 0.2, 0.3, 0.3, 0.5, 0);\n  }\n}\n\nfunction skull() {\n  // The vault, upper jaw, chin and hollow eye sockets; then the dense bone of\n  // the ear, the cheekbone, the teeth and the jaw.\n  E(FH, 1.8, -7.2, 0, 7, 6.1, 5.8, -0.12, 0, 0.7, 0.5, 1);\n  E(FH, 6.4, -1.6, 0, 2.6, 1.6, 3.4, 0.1, 0, 0.4, 0.5, 0.5);\n  E(FJ, 7.9, 3.2, 0, 1.4, 1.3, 2, 0, 0, 0.7, 0.5, 0.5);\n  Tb(FH, 7.6, -5.6, 0, 8.7, -3, 0, 0.45, 0.4, 0.9);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    E(FH, 6.2, -4.6, s * 2.7, 1.9, 2, 1.4, 0, s * 0.5, 0.7, 0.55, 1);\n    E(FH, 6, -4.6, s * 2.4, 1.6, 1.7, 1.6, 0, 0, -0.35);\n    E(FH, 6.2, -1.9, s * 2, 1.5, 1.1, 1.4, 0, 0, -0.3);\n    E(FH, 0.3, -3.4, s * 3.4, 1.7, 1.3, 1.4, 0.3, 0, 0.8);\n    Tb(FH, 2.2, -2.4, s * 5, 6.2, -2.9, s * 4.2, 0.55, 0.65, 0.8);\n    Tb(FH, 8.6, 0.1, 0, 7.4, 0.1, s * 2.3, 0.75, 0.7, 1);\n    Tb(FH, 7.4, 0.1, s * 2.3, 4.6, 0.2, s * 3.2, 0.7, 0.75, 1);\n    Tb(FJ, 8.2, 1.3, 0, 7.2, 1.3, s * 2.3, 0.7, 0.65, 1);\n    Tb(FJ, 7.2, 1.3, s * 2.3, 4.6, 1.2, s * 3.1, 0.65, 0.7, 1);\n    Tb(FJ, 8.3, 3.7, 0, 6.6, 3.5, s * 2.8, 1, 0.9, 0.9, 0.5);\n    Tb(FJ, 6.6, 3.5, s * 2.8, 2, 3.1, s * 4.7, 0.9, 0.85, 0.9, 0.5);\n    Tb(FJ, 2, 3.1, s * 4.7, 1.3, -2.2, s * 4.7, 0.85, 0.7, 0.9, 0.4);\n    Tb(FJ, 2.7, 0.8, s * 4.5, 3.5, -1.8, s * 4.3, 0.55, 0.35, 0.8);\n  }\n}\n\nfunction trunk(b) {\n  // Vertebrae, sacrum, tailbone, and the breastbone moving out on the breath.\n  for (let v = 0; v \u003c 24; v++) {\n    const o = v * 6, x = VT[o], y = VT[o + 1], a = VT[o + 2], k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2;\n    E(FT, x, y, 0, a, VT[o + 3], VT[o + 4], VT[o + 5], 0, 0.55, 0.45, 0.7);\n    Tb(FT, x - a + 0.2, y, 0, x - a - (v === 6 ? 3.6 : [2.2, 3, 3.4][k]), y + [0.5, 1.6, 0.4][k], 0, 0.45, 0.3, k === 1 ? 0.4 : 0.7);\n  }\n  Tb(FT, -3.6, -4.8, 0, -6.6, 2.6, 0, 2.5, 1, 0.8, 0.5);\n  Tb(FT, -6.6, 2.6, 0, -5.2, 5.6, 0, 0.8, 0.45, 0.8);\n  const sb = 0.5 * b;\n  Tb(FT, 5 + sb, -31, 0, 6.6 + sb, -23.5, 0, 1.2, 0.9, 0.9, 0.5);\n  Tb(FT, 6.6 + sb, -23.5, 0, 7 + sb, -19.5, 0, 0.9, 0.45, 0.8);\n  E(FT, 5.2 + sb, -29.8, 0, 1.3, 1.9, 2.4, -0.2, 0, 0.7, 0.5, 0.6);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    // Hip bone: faint wing, its lines, socket, obturator ring.\n    E(FT, -1.5, -6.5, s * 6, 5.4, 4.8, 2.6, -0.35, s * 0.55, 0.2, 0.5, 1);\n    for (let i = 3; i \u003c IL.length; i += 3)\n      if (IL[i] === IL[i] && IL[i - 3] === IL[i - 3]) Tb(FT, IL[i - 3], IL[i - 2], s * IL[i - 1], IL[i], IL[i + 1], s * IL[i + 2], 0.45, 0.45, 0.85);\n    E(FT, 0, 0, s * HZ, 3.2, 3.2, 3, 0, 0, 0.4, 0.6, 1);\n    E(FT, 1, 4.6, s * 3.8, 3.2, 2.2, 1.6, 0.3, s * 0.3, 0.4, 0.5, 1);\n    // Collarbone, shoulder blade, the spine of the blade and the coracoid.\n    Tb(FT, 4.6, -32.2, s * 1.6, 2.2, -33.3, s * 7.4, 0.85, 0.8, 0.9, 0.4);\n    Tb(FT, 2.2, -33.3, s * 7.4, -1, -34.6, s * 12, 0.8, 0.9, 0.9, 0.4);\n    E(FT, -5.6, -27.5, s * 8.3, 2, 6.2, 4.6, 0.1, s * 0.6, 0.2, 0.4, 1);\n    Tb(FT, -7.4, -30.6, s * 5.4, -1.4, -35, s * 11.6, 0.6, 0.75, 0.9);\n    Tb(FT, 0.4, -32.4, s * 10, 2.4, -31.6, s * 9, 0.5, 0.45, 0.8);\n    // The ribs swing up and out on the breath.\n    for (let i = 0; i \u003c 7; i++) {\n      const r = RIB[i], ya = -31.5 + 2.4 * i, xa = spx(ya) - 1.3, rx = r[0] * (1 + 0.06 * b), rz = r[1] * (1 + 0.04 * b), dr = r[2] - 1.3 * b;\n      let px = xa, py = ya, pz = s * 1.6;\n      for (let j = 1; j \u003c= 5; j++) {\n        const al = (r[4] * PI * j) / 5, ca = 1 - cos(al), x = xa + rx * ca, y = ya + (dr * ca) / 2 + r[3] * sin(al), z = s * (1.6 + rz * sin(al));\n        Tb(FT, px, py, pz, x, y, z, 0.3, 0.25, 0.9);\n        (px = x), (py = y), (pz = z);\n      }\n    }\n  }\n}\n\nfunction flesh(b) {\n  E(FH, 2.4, -6, 0, 8, 8.4, 6.8, -0.1, 0, 1);\n  Tb(FT, -1.6, -31, 0, -0.6, -41, 0, 4.6, 4.2, 1);\n  E(FT, -0.2 + 0.3 * b, -23.5, 0, 9.4 + 0.4 * b, 11.5, 12.6, 0.05, 0, 1);\n  E(FT, 1.4, -9.5, 0, 8.8, 8.6, 11.4, 0, 0, 1);\n  E(FT, -1.6, -0.8, 0, 8.8, 8, 12.4, 0, 0, 1);\n  // Air in the lungs and windpipe and in the gut; heart and liver a little denser.\n  for (let s = -1; s \u003c= 1; s += 2) E(FT, -0.3, -24.4 + 0.6 * b, s * 5.8, 5.6 + 0.3 * b, 8 + 0.5 * b, 5.4, 0.1, s * 0.15, -1);\n  Tb(FT, 2.4, -40.5, 0, 0.8, -28.6, 0, 1, 1, -1);\n  E(FT, 3.6, -19.4, -1.6, 4, 4.6, 4.2, 0.6, 0, 0.55);\n  E(FT, 1.4, -12.6, 3.2, 6, 4.2, 6.8, 0.3, 0, 0.3);\n  for (let i = 0; i \u003c 16; i += 4) E(FT, GAS[i], GAS[i + 1], GAS[i + 2], 1.8 * GAS[i + 3], 1.4 * GAS[i + 3], 1.8 * GAS[i + 3], 0, 0, -0.8);\n}\n\nfunction leg(i, s) {\n  const t1 = LA[i * 3], t2 = LA[i * 3 + 1], t3 = LA[i * 3 + 2], z = s * HZ, bone = TG === B;\n  const dx = sin(t1), dy = cos(t1), kx = LT * dx, ky = LT * dy, ex = sin(t2), ey = cos(t2), ax = kx + LS * ex, ay = ky + LS * ey, fx = cos(t3), fy = -sin(t3);\n  // Femur: head in its socket, neck, greater trochanter, shaft, condyles.\n  FR.set([0, 0, z, dx, dy, 0, dy, -dx, 0, 0, 0, s, -t1]);\n  if (!bone) Tb(FL, -1, 0, 0, LT, 0, 0, 6.4, 4.4, 1);\n  else {\n    E(FL, 0, 0, 0, 2.3, 2.3, 2.3, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 0, 0, 0, 2.6, 0, 2.6, 1.3, 1.4, 0.6);\n    E(FL, 1.6, -1.5, 3.2, 1.7, 2.1, 1.5, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 2.8, 0, 2.6, LT - 2.4, 0, 0.4, 1.75, 1.6, 1, 0.85);\n    E(FL, LT - 1.2, -0.3, 0, 2.5, 2.4, 3.4, 0, 0, 0.7, 0.6, 0.6);\n    // The kneecap rides over the joint, halfway between thigh and shank.\n    const h = (t1 + t2) / 2;\n    E(FB, kx + cos(h) * 3.2, ky - sin(h) * 3.2, z, 1, 1.8, 1.5, -h, 0, 0.85, 0.45, 0.5);\n  }\n  // Tibia and the thinner fibula behind it.\n  FR.set([kx, ky, z, ex, ey, 0, ey, -ex, 0, 0, 0, s, -t2]);\n  if (!bone) Tb(FL, 0, 0, 0, LS, 0, 0, 4.2, 2.4, 1), E(FL, 8, -1.6, 0, 3, 6.5, 3.2, 0, 0, 1);\n  else {\n    E(FL, 1.9, 0, 0, 2.8, 1.4, 3.3, 0, 0, 0.7, 0.5, 0.5);\n    Tb(FL, 3, 0.3, 0, LS - 1.8, 0, 0, 1.75, 1.2, 1, 0.85);\n    E(FL, LS - 1, 0, -0.4, 1.6, 1.7, 2.2, 0, 0, 0.75, 0.5, 0.4);\n    E(FL, 3.6, -1.9, 2, 1, 1, 1, 0, 0, 0.8);\n    Tb(FL, 4, -1.9, 2, LS - 0.8, -1, 2.4, 0.7, 0.6, 0.95, 0.3);\n    E(FL, LS + 0.3, -1, 2.6, 1, 1.5, 1, 0, 0, 0.8);\n  }\n  // Foot: talus, heel, arch, two metatarsals for five, and toes that stay flat\n  // on the belt as the heel lifts.\n  FR.set([ax, ay, z, fx, fy, 0, -fy, fx, 0, 0, 0, s, -t3]);\n  if (!bone) return Tb(FL, -3, 2.6, 0, 10, 3, 0, 2.3, 1.6, 1);\n  E(FL, 0.6, 1, 0, 2.2, 1.5, 1.6, 0, 0, 0.8, 0.5, 0.5);\n  E(FL, -2.4, 2.9, 0, 3.3, 1.8, 1.6, -0.3, 0, 0.8, 0.6, 0.55);\n  E(FL, 3.3, 1.7, 0, 1.5, 1.3, 1.8, 0, 0, 0.85);\n  E(FL, 2.6, 3.1, 0, 1.2, 1, 1.2, 0, 0, 0.8);\n  Tb(FL, 4.4, 1.9, 0, 9.2, 3.5, 0, 0.65, 0.6, 1, 0.3);\n  Tb(FL, 3.6, 3.4, 1, 8.4, 3.9, 1, 0.55, 0.5, 0.9);\n  FL(9.2, 3.5, 0);\n  const d = t3 \u003c 0 ? -t3 * (1 - sm(0.4, 3, FLOOR - OY - gy - 1.1)) : 0, c = cos(d), n = -sin(d);\n  Tb(FL, 9.2, 3.5, 0, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 0.5, 0.45, 0.95);\n  Tb(FL, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 9.2 + c * 4.2, 3.5 + n * 4.2, 0, 0.45, 0.4, 0.9);\n}\n\nfunction arm(s, sig, eps, k, wv) {\n  FT(-1, -33, s * SZ);\n  const sx = gx, sy = gy, sz = gz, au = sig + LAM, af = au + eps, V = AV;\n  // Axes of the upper arm and forearm, and the thumb side of the hand. In the\n  // wave the elbow goes out to the side and the forearm up, palm to you.\n  V.set([sin(au), cos(au), s * 0.1, sin(af), cos(af), s * 0.04, cos(af), -sin(af), 0]);\n  if (k > 0) {\n    const A = [0.2, 0.62, s * 0.76, 0.15, -cos(wv), s * (sin(wv) - 0.1), 0, 0, -s];\n    for (let j = 0; j \u003c 9; j++) V[j] = mix(V[j], A[j], k);\n  }\n  for (let j = 0; j \u003c 9; j += 3) {\n    const d = j === 6 ? V[6] * V[3] + V[7] * V[4] + V[8] * V[5] : 0;\n    for (let c = 0; c \u003c 3; c++) V[j + c] -= d * V[3 + c];\n    const l = hypot(V[j], V[j + 1], V[j + 2]) || 1;\n    for (let c = 0; c \u003c 3; c++) V[j + c] /= l;\n  }\n  const [ux, uy, uz, fx, fy, fz, px, py, pz] = V, ex = sx + LU * ux, ey = sy + LU * uy, ez = sz + LU * uz;\n  // The forearm's frame from the elbow, its third axis toward the palm.\n  FR.set([ex, ey, ez, fx, fy, fz, px, py, pz, s * (fy * pz - fz * py), s * (fz * px - fx * pz), s * (fx * py - fy * px), -af]);\n  if (TG === T) {\n    Tb(FB, sx, sy, sz, ex, ey, ez, 2.8, 2.2, 1);\n    Tb(FL, 0, 0, 0, LF, 0, 0, 2.2, 1.6, 1);\n    return Tb(FL, LF, 0, 0, LF + 7, 0, 0, 1.5, 1.1, 1);\n  }\n  // Humerus, ulna with the point of the elbow, radius, wrist, four fingers\n  // curled a little toward the palm, thumb.\n  E(FB, sx, sy, sz, 2.2, 2.2, 2.2, 0, 0, 0.8, 0.7, 0.5);\n  Tb(FB, sx + ux * 1.8, sy + uy * 1.8, sz + uz * 1.8, ex - ux * 1.3, ey - uy * 1.3, ez - uz * 1.3, 1.35, 1.15, 1, 0.85);\n  E(FB, ex - ux * 0.8, ey - uy * 0.8, ez - uz * 0.8, 1.3, 1.5, 2.5, -au, 0, 0.8, 0.5, 0.5);\n  E(FL, 0.3, -1, 0, 1, 1, 1, 0, 0, 0.9);\n  Tb(FL, 0.8, -0.5, 0, LF, -0.5, 0, 0.75, 0.55, 1, 0.5);\n  Tb(FL, 1.2, 0.5, 0, LF, 0.55, 0, 0.6, 0.95, 1, 0.5);\n  E(FL, LF + 1.4, 0, 0, 1.5, 1.3, 1.5, 0, 0, 0.9, 0.5, 0.4);\n  const c0 = mix(0.3, 0.06, k);\n  for (let j = 0; j \u003c 5; j++) {\n    const th = j > 3, o = th ? 2.2 : FO[j];\n    let x = LF + (th ? 3.2 : 5.8), y = o, z = 0, c = 0;\n    Tb(FL, LF + (th ? 1 : 2.2), th ? 0.9 : o / 2, 0, x, y, z, 0.5, 0.45, 0.95);\n    for (let m = 0; m \u003c (th ? 2 : 3); m++) {\n      c += c0;\n      const L = th ? 2 - 0.4 * m : FLN[j] * PHL[m], X = x + cos(c) * L, Y = y + (th ? 0.7 * L : 0), Z = z + sin(c) * L;\n      Tb(FL, x, y, z, X, Y, Z, 0.42, 0.36, 0.9);\n      (x = X), (y = Y), (z = Z);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const g = S.gait, a = S.amp, p = S.ph, u = S.jump, tt = S.turn, b = sin(2 * PI * S.br);\n  const wj = u \u003c 0 ? 0 : sm(0, 0.2, u) * (1 - sm(1.15, 1.5, u));\n  const tf = tt \u003c 0 ? 0 : sm(0.5, 1.4, tt) * (1 - sm(3.8, 4.7, tt));\n  const wave = tt \u003c 0 ? 0 : sm(1.4, 1.9, tt) * (1 - sm(3.3, 3.8, tt));\n  PSI = (PI / 2) * tf;\n  (CP = cos(PSI)), (SP = sin(PSI));\n  LAM = (mix(4, 11, g) * a + (wj ? key(JK[5], u) * wj : 0)) * D;\n  (LC = cos(LAM)), (LSN = sin(LAM));\n  // Legs half a stride apart, arms swinging against them; the lowest heel or\n  // ball stands on the belt.\n  let low = 0;\n  for (let i = 0; i \u003c 2; i++) {\n    const q = p + 0.5 * i, c = cos(2 * PI * q);\n    let th = ang(0, q, g) * a, kn = ang(1, q, g) * a + 3, an = ang(2, q, g) * a;\n    let sg = mix(-5 - 17 * c, -12 - 28 * c, g) * a, ep = mix(8, mix(14 + 8 * (1 - c), 80 + 9 * (1 - c), g), a);\n    if (wj) {\n      (th = mix(th, key(JK[0], u), wj)), (kn = mix(kn, key(JK[1], u), wj)), (an = mix(an, key(JK[2], u), wj));\n      (sg = mix(sg, key(JK[3], u), wj)), (ep = mix(ep, key(JK[4], u), wj));\n    }\n    const t1 = (LA[i * 3] = th * D), t2 = (LA[i * 3 + 1] = (th - kn) * D), t3 = (LA[i * 3 + 2] = (th - kn + an) * D);\n    const ay = LT * cos(t1) + LS * cos(t2);\n    low = max(low, ay + 4 * sin(t3) + 4.9 * cos(t3), ay - 9.2 * sin(t3) + 4.6 * cos(t3));\n    (AR[i * 2] = sg * D), (AR[i * 2 + 1] = ep * D);\n  }\n  // A run leaves the belt between steps; a jump leaves it higher.\n  const fl = g * g * a * 3.2 * max(0, (cos(4 * PI * (p - 0.45)) - 0.75) * 4) ** 1.5;\n  const v = (u - 0.46) / 0.44;\n  OY = FLOOR - low - fl - (v > 0 && v \u003c 1 ? 32 * v * (1 - v) : 0);\n  OX = mix(26.5 + 2.5 * g, 35, tf);\n  FT(-2.1, -41.4, 0);\n  (HX = gx), (HY = gy);\n  ETA = -LAM * 0.85 + 0.035 * sin(4 * PI * p) * a;\n  (HC = cos(ETA)), (HS = sin(ETA));\n  JA = 0.2 * wave * (0.6 + 0.4 * sin(tt * 9));\n  (JC = cos(JA)), (JS = sin(JA));\n  const wv = 0.3 * sin((tt - 1.9) * 2 * PI * 1.7) * sm(1.6, 2, tt);\n\n  B.fill(0);\n  T.fill(0);\n  TG = B;\n  treadmill(S.belt);\n  skull();\n  trunk(b);\n  for (let r = 0; r \u003c 2; r++) {\n    TG = r ? T : B;\n    leg(0, 1);\n    leg(1, -1);\n    arm(1, AR[0], AR[1], wave, wv);\n    arm(-1, AR[2], AR[3], 0, 0);\n  }\n  if (S.dose > 0.001) flesh(b);\n\n  // The screen turns bone and flesh to light. An afterglow fades behind what\n  // moves, and bright bone blooms a little.\n  const x3 = S.scr * 3, pi = min(2, floor(x3));\n  for (let j = 0; j \u003c 6; j++) PC[j] = mix(PAL[pi][j], PAL[pi + 1][j], x3 - pi);\n  const dec = exp(-S.dt / 0.07), gd = 0.62 * sqrt(S.dose), bg = S.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) GB[r + x] = 0.5 * G[r + x] + 0.25 * (G[r + (x ? x - 1 : x)] + G[r + (x \u003c W - 1 ? x + 1 : x)]);\n  for (let q = 0; q \u003c N; q++) {\n    const e = B[q] > 0 ? (1 - exp(-0.3 * B[q])) ** 1.35 : 0, t = T[q] > 0 ? gd * (1 - exp(-T[q] / 12)) : 0;\n    B[q] = e + t * (1 - e);\n    G[q] = max(B[q], GB[q] * dec);\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += B[r + cl(x + d, 0, W - 1)];\n      T[r + x] = a / 5;\n    }\n  const ch = (j, lv, w, ag) => min(255, 255 * (lv * (PC[j] + (1 - PC[j]) * w) + ag * PC[j + 3]));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += T[cl(y + d, 0, H - 1) * W + x];\n      const q = y * W + x, L = B[q], ag = (G[q] - L) * 0.3, lv = L + bg[q] + 0.045 * a, w = L * L * L * 0.75;\n      display.setPixel(x, y, ch(0, lv, w, ag), ch(1, lv, w, ag), ch(2, lv, w, ag));\n    }\n}\n","layer":{"id":"layer-fluoroscope","type":"code","name":"fluoroscope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fluoroscope\n// Family:  body\n// Idea:    On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after cineradiography, the X-ray motion pictures of the 1950s\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1\n//\n// Knob 1: Screen. The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour.\n// Knob 2: Speed. The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower.\n// Knob 3: Gait. A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps.\n// Knob 4: Dose. The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body.\n// Buttons: K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, sqrt, exp, floor, ceil, atan2, hypot, PI } = Math;\nconst D = PI / 180;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// A figure 114 LEDs tall: limb lengths and half spans of hips and shoulders.\n// FLOOR is the top of the belt. Bones are drawn half again as thick as life.\nconst LT = 27.5, LS = 27.5, LU = 20.5, LF = 16, HZ = 5.2, SZ = 12.4, FLOOR = 122.5;\n\n// For the walk (toe-off at 60%) and then the run (toe-off at 40%), the thigh's\n// angle from vertical and the flexion of knee and ankle, in degrees every 10%\n// of a stride from heel strike, after clinical gait curves.\nconst GT = [\n  [24, 20, 12, 3, -6, -14, -10, 6, 19, 25],\n  [4, 16, 18, 10, 5, 14, 38, 60, 45, 15],\n  [0, -5, 3, 6, 8, 0, -16, -10, -2, 1],\n  [30, 18, 5, -5, -12, -6, 12, 30, 42, 40],\n  [20, 38, 40, 28, 18, 50, 90, 104, 76, 36],\n  [6, 16, 20, 10, -18, -14, -2, 6, 8, 6],\n];\n// A periodic Catmull-Rom spline through a row.\nfunction curve(r, p) {\n  const f = (p - floor(p)) * 10, i = floor(f) % 10, u = f - floor(f);\n  const a = r[(i + 9) % 10], b = r[i], c = r[(i + 1) % 10], d = r[(i + 2) % 10];\n  return b + 0.5 * u * (c - a + u * (2 * a - 5 * b + 4 * c - d + u * (3 * (b - c) + d - a)));\n}\nconst ang = (k, q, g) => mix(curve(GT[k], q), curve(GT[k + 3], q), g);\n// The jump, keyed in seconds: thigh, knee, ankle, shoulder, elbow, lean.\nconst JT = [0, 0.3, 0.46, 0.7, 0.9, 1.1, 1.5];\nconst JK = [\n  [0, 50, 2, 30, 10, 42, 0],\n  [0, 95, 4, 58, 16, 76, 0],\n  [0, 24, -34, -18, -6, 20, 0],\n  [0, -40, 58, 50, 25, 10, 0],\n  [10, 15, 45, 50, 35, 30, 10],\n  [0, 24, 2, 4, 8, 20, 0],\n];\nfunction key(r, u) {\n  let i = 0;\n  while (i \u003c 5 && u > JT[i + 1]) i++;\n  return mix(r[i], r[i + 1], sm(JT[i], JT[i + 1], u));\n}\n\n// The spine's curve in the trunk's frame (x forward, y down from the hips).\nconst CY = [-41, -36.5, -32.5, -28, -23.5, -19, -15.5, -11.5, -7.5, -4.5];\nconst CX = [-2.2, -1.9, -3, -4.6, -5.3, -4.8, -3.8, -2.4, -2, -2.8];\nfunction spx(y) {\n  let i = 0;\n  while (i \u003c 8 && y > CY[i + 1]) i++;\n  return mix(CX[i], CX[i + 1], (y - CY[i]) / (CY[i + 1] - CY[i]));\n}\n// 24 vertebral bodies from the neck down: x, y, half sizes, tilt.\nconst VT = new Float64Array(144);\nfor (let v = 0, y = -40.8; v \u003c 24; v++) {\n  const k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2, h = [1.25, 1.3, 2.3][k], c = y + h / 2;\n  VT.set([spx(c), c, [1.3, 1.6, 2.2][k], h * 0.4, [1.6, 1.9, 2.6][k], -atan2(spx(c + 0.5) - spx(c - 0.5), 1)], v * 6);\n  y += h;\n}\n// Seven ribs stand for twelve. Each row gives the half depth and width of the\n// cage, the drop of the front end and its sag. The last number is how far\n// round the bone goes before the cartilage, which the beam passes through.\nconst RIB = [\n  [4, 5.5, 4, 0.6, 0.95], [5.4, 8.2, 6.2, 0.9, 0.92], [6.1, 10, 7.6, 1.1, 0.88], [6.6, 11.2, 8.4, 1.2, 0.82],\n  [6.7, 11.6, 8.6, 1.2, 0.75], [6.5, 11.4, 8.2, 1.1, 0.64], [6, 10.6, 7, 1, 0.5],\n];\n// The hip bone as lines split by NaN: the iliac crest, the front border down\n// to the socket, the back border, the brim from sacrum to pubis.\nconst IL = [\n  -6.6, -5.5, 4, -5.6, -9.4, 6.2, -3.6, -11.6, 7.8, -1, -11.8, 8.8, 1.8, -10.4, 9.2, 3.8, -8, 9, 4.2, -7.4, 9, 3, -3.6, 7.5, 1.8, -2.6, 6,\n  NaN, 0, 0, -6.6, -5.5, 4, -5.4, -2.6, 4.6, -4.6, -1.2, 4.8, -3.2, 1.2, 4.2, -2.8, 4, 4.2, -2.4, 6.4, 4.2,\n  NaN, 0, 0, -4.2, -3.4, 3.6, -1.6, -1.6, 4.4, 0.5, -1, 4.6, 2.6, 0.6, 3.6, 4.4, 3, 1.2,\n];\n// Gas pockets in the gut: x, y, z, size.\nconst GAS = [2.6, -13.6, -5, 1.4, 3.2, -7, 3, 1, -0.4, -5, -2.4, 0.9, 4.4, -3.6, -4.4, 0.85];\n// Fingers: offset across the palm and length; the share of each phalanx.\nconst FO = [1.25, 0.42, -0.42, -1.2], FLN = [5.4, 6, 5.6, 4.6], PHL = [0.45, 0.32, 0.23];\n// Phosphors: the glow and its afterglow.\nconst PAL = [\n  [0.45, 0.7, 1, 0.35, 1, 0.55],\n  [0.3, 1, 0.4, 0.15, 0.7, 0.25],\n  [1, 0.62, 0.18, 0.9, 0.3, 0.05],\n  [0.72, 0.38, 1, 0.35, 0.3, 1],\n];\n\n// Bone and flesh add up apart as path length along the beam; G is afterglow.\nconst B = new Float32Array(N), T = new Float32Array(N), G = new Float32Array(N), GB = new Float32Array(N);\nconst LA = new Float64Array(6), AR = new Float64Array(4), PC = new Float64Array(6), MO = new Float64Array(6), MI = new Float64Array(6);\nconst FR = new Float64Array(13), AV = new Float64Array(9);\nlet TG = B;\nlet PSI = 0, CP = 1, SP = 0, OX = 25, OY = 63, LAM = 0, LC = 1, LSN = 0;\nlet HX = 0, HY = 0, ETA = 0, HC = 1, HS = 0, JA = 0, JC = 1, JS = 0;\nlet gx = 0, gy = 0, gz = 0, qx = 0, qy = 0, qz = 0, FROT = 0;\nlet e1x = 1, e1y = 0, e1z = 0, e2x = 0, e2y = 1, e2z = 0, e3x = 0, e3z = 1;\n\n// Frames: body, with x forward and y down, trunk, head, jaw, and a limb's\n// own, whose first axis runs along the bone.\nconst FB = (x, y, z) => ((gx = x), (gy = y), (gz = z), (FROT = 0));\nconst FT = (x, y, z) => ((gx = x * LC - y * LSN), (gy = x * LSN + y * LC), (gz = z), (FROT = LAM));\nconst FH = (x, y, z) => ((gx = HX + x * HC - y * HS), (gy = HY + x * HS + y * HC), (gz = z), (FROT = ETA));\nconst FL = (u, v, w) => (\n  (gx = FR[0] + FR[3] * u + FR[6] * v + FR[9] * w), (gy = FR[1] + FR[4] * u + FR[7] * v + FR[10] * w), (gz = FR[2] + FR[5] * u + FR[8] * v + FR[11] * w), (FROT = FR[12])\n);\nfunction FJ(x, y, z) {\n  const dx = x - 1.3, dy = y + 2.6;\n  FH(1.3 + dx * JC - dy * JS, -2.6 + dx * JS + dy * JC, z);\n  FROT += JA;\n}\nfunction P() {\n  qx = OX + gx * CP - gz * SP;\n  qy = OY + gy;\n  qz = gx * SP + gz * CP;\n}\n\n// A tapered rod, hollow when sh > 0: the chord through a tube of cortex.\nfunction tube(ax, ay, bx, by, ra, rb, w, sh) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6, m = max(ra, rb) + 0.8;\n  const x0 = max(0, ceil(min(ax, bx) - m)), x1 = min(W - 1, floor(max(ax, bx) + m));\n  const y0 = max(0, ceil(min(ay, by) - m)), y1 = min(H - 1, floor(max(ay, by) + m));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const ux = x - ax, uy = y - ay, t = cl((ux * dx + uy * dy) / l2, 0, 1);\n      const ex = ux - t * dx, ey = uy - t * dy, d2 = ex * ex + ey * ey, R = ra + (rb - ra) * t + 0.3, o = R * R - d2;\n      if (o \u003c= 0) continue;\n      const ri = R - 0.85, i = ri * ri - d2;\n      TG[y * W + x] += 2 * w * (sqrt(o) - (sh && ri > 0 && i > 0 ? sh * sqrt(i) : 0));\n    }\n}\n// An ellipsoid seen along the beam: its quadric, and the chord through it.\nfunction quad(M, a, b, c) {\n  const A = 1 / (a * a), Bq = 1 / (b * b), C = 1 / (c * c);\n  M[0] = e1x * e1x * A + e2x * e2x * Bq + e3x * e3x * C;\n  M[1] = e1x * e1y * A + e2x * e2y * Bq;\n  M[2] = e1y * e1y * A + e2y * e2y * Bq;\n  M[3] = e1x * e1z * A + e2x * e2z * Bq + e3x * e3z * C;\n  M[4] = e1y * e1z * A + e2y * e2z * Bq;\n  M[5] = e1z * e1z * A + e2z * e2z * Bq + e3z * e3z * C;\n}\nfunction chord(M, u, v) {\n  const b = M[3] * u + M[4] * v, d = b * b - M[5] * (M[0] * u * u + 2 * M[1] * u * v + M[2] * v * v - 1);\n  return d > 0 ? (2 * sqrt(d)) / M[5] : 0;\n}\n// Tilted th in the side plane, turned yaw about the vertical. With a shell t\n// the inside counts k less, so a skull's edge glows brighter than its face.\nfunction ell(cx, cy, a, b, c, th, yaw, w, t, k) {\n  (a += 0.3), (b += 0.3), (c += 0.3);\n  const ph = PSI + yaw, cp = cos(ph), sp = sin(ph), ct = cos(th), st = sin(th);\n  (e1x = ct * cp), (e1y = st), (e1z = ct * sp), (e2x = -st * cp), (e2y = ct), (e2z = -st * sp), (e3x = -sp), (e3z = cp);\n  quad(MO, a, b, c);\n  if (t) quad(MI, a - t, b - t, c - t);\n  const rx = hypot(e1x * a, e2x * b, e3x * c) + 0.5, ry = hypot(e1y * a, e2y * b) + 0.5;\n  const x0 = max(0, ceil(cx - rx)), x1 = min(W - 1, floor(cx + rx)), y0 = max(0, ceil(cy - ry)), y1 = min(H - 1, floor(cy + ry));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      let s = chord(MO, x - cx, y - cy);\n      if (s > 0 && t) s -= k * chord(MI, x - cx, y - cy);\n      if (s > 0) TG[y * W + x] += s * w;\n    }\n}\n// The far side of the body glows dimmer than the near side.\nconst wz = () => (TG === B ? cl(1 + 0.09 * qz, 0.45, 1.15) : 1);\nfunction E(F, x, y, z, a, b, c, th, yaw, w, t = 0, k = 0) {\n  F(x, y, z);\n  P();\n  ell(qx, qy, a, b, c, th + FROT, yaw, w * wz(), t, k);\n}\nfunction Tb(F, x1, y1, z1, x2, y2, z2, ra, rb, w, sh = 0) {\n  F(x1, y1, z1);\n  P();\n  const ax = qx, ay = qy, az = qz;\n  F(x2, y2, z2);\n  P();\n  qz = (qz + az) / 2;\n  tube(ax, ay, qx, qy, ra, rb, w * wz(), sh);\n}\n\nexport function setup(params) {\n  const bg = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x - 31.5) / 36, v = (y - 63.5) / 72;\n      bg[y * W + x] = (0.03 + 0.025 * Math.random()) * max(0, 1 - 0.8 * (u * u + v * v) ** 2);\n    }\n  params.s = { ph: 0.05, br: 0, belt: 0, turn: -1, jump: -1, dt: 1 / 30, scr: 0, spd: 2, gait: 0, dose: 0.06, amp: 1, bg };\n  G.fill(0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], b = input.btnPressed || [];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dt = dt || 1 / 30;\n  S.scr = cl(k[0], 0, 1);\n  S.spd = cl(k[1], 0.2, 3);\n  const g = (S.gait = cl(k[2], 0, 1));\n  S.dose = cl(k[3], 0, 1);\n  if (b[0] && S.turn \u003c 0) S.turn = 0;\n  if (b[1] && S.jump \u003c 0) S.jump = 0;\n  if (S.turn >= 0 && (S.turn += dt) > 5) S.turn = -1;\n  if (S.jump >= 0 && (S.jump += dt) > 1.5) S.jump = -1;\n  const a = (S.amp = S.turn \u003c 0 ? 1 : 1 - sm(0, 0.7, S.turn) * (1 - sm(4.3, 5, S.turn)));\n  const f = (mix(0.93, 1.4, g) * S.spd) / 2, to = mix(0.6, 0.4, g);\n  S.ph = (S.ph + dt * f * a) % 1;\n  // The belt runs as fast as the foot on it goes back, from strike to toe-off.\n  const ax = (q) => LT * sin(ang(0, q, g) * D) + LS * sin((ang(0, q, g) - ang(1, q, g)) * D);\n  S.belt += (dt * a * a * f * (ax(0) - ax(to))) / to;\n  S.br = (S.br + dt * mix(0.25, 0.5, g)) % 1;\n}\n\nfunction treadmill(belt) {\n  const y = FLOOR + 1.7, an = -belt / 2.3, c = 1.8 * cos(an), s = 1.8 * sin(an);\n  tube(4.5, y, 59.5, y, 0.8, 0.8, 0.45, 0.5);\n  tube(4.5, FLOOR + 0.1, 59.5, FLOOR + 0.1, 0.2, 0.2, 0.3, 0);\n  for (let x = 4.5; x \u003c 60; x += 55) {\n    ell(x, y, 2.1, 2.1, 2.1, 0, 0, 0.45, 0.6, 1);\n    tube(x - c, y - s, x + c, y + s, 0.35, 0.35, 0.5, 0);\n  }\n  for (let j = 0; j \u003c 8; j++) {\n    const x = 5 + ((((j * 7 - belt) % 56) + 56) % 56);\n    tube(x, FLOOR - 0.2, x + 1, FLOOR - 0.2, 0.3, 0.3, 0.5, 0);\n  }\n}\n\nfunction skull() {\n  // The vault, upper jaw, chin and hollow eye sockets; then the dense bone of\n  // the ear, the cheekbone, the teeth and the jaw.\n  E(FH, 1.8, -7.2, 0, 7, 6.1, 5.8, -0.12, 0, 0.7, 0.5, 1);\n  E(FH, 6.4, -1.6, 0, 2.6, 1.6, 3.4, 0.1, 0, 0.4, 0.5, 0.5);\n  E(FJ, 7.9, 3.2, 0, 1.4, 1.3, 2, 0, 0, 0.7, 0.5, 0.5);\n  Tb(FH, 7.6, -5.6, 0, 8.7, -3, 0, 0.45, 0.4, 0.9);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    E(FH, 6.2, -4.6, s * 2.7, 1.9, 2, 1.4, 0, s * 0.5, 0.7, 0.55, 1);\n    E(FH, 6, -4.6, s * 2.4, 1.6, 1.7, 1.6, 0, 0, -0.35);\n    E(FH, 6.2, -1.9, s * 2, 1.5, 1.1, 1.4, 0, 0, -0.3);\n    E(FH, 0.3, -3.4, s * 3.4, 1.7, 1.3, 1.4, 0.3, 0, 0.8);\n    Tb(FH, 2.2, -2.4, s * 5, 6.2, -2.9, s * 4.2, 0.55, 0.65, 0.8);\n    Tb(FH, 8.6, 0.1, 0, 7.4, 0.1, s * 2.3, 0.75, 0.7, 1);\n    Tb(FH, 7.4, 0.1, s * 2.3, 4.6, 0.2, s * 3.2, 0.7, 0.75, 1);\n    Tb(FJ, 8.2, 1.3, 0, 7.2, 1.3, s * 2.3, 0.7, 0.65, 1);\n    Tb(FJ, 7.2, 1.3, s * 2.3, 4.6, 1.2, s * 3.1, 0.65, 0.7, 1);\n    Tb(FJ, 8.3, 3.7, 0, 6.6, 3.5, s * 2.8, 1, 0.9, 0.9, 0.5);\n    Tb(FJ, 6.6, 3.5, s * 2.8, 2, 3.1, s * 4.7, 0.9, 0.85, 0.9, 0.5);\n    Tb(FJ, 2, 3.1, s * 4.7, 1.3, -2.2, s * 4.7, 0.85, 0.7, 0.9, 0.4);\n    Tb(FJ, 2.7, 0.8, s * 4.5, 3.5, -1.8, s * 4.3, 0.55, 0.35, 0.8);\n  }\n}\n\nfunction trunk(b) {\n  // Vertebrae, sacrum, tailbone, and the breastbone moving out on the breath.\n  for (let v = 0; v \u003c 24; v++) {\n    const o = v * 6, x = VT[o], y = VT[o + 1], a = VT[o + 2], k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2;\n    E(FT, x, y, 0, a, VT[o + 3], VT[o + 4], VT[o + 5], 0, 0.55, 0.45, 0.7);\n    Tb(FT, x - a + 0.2, y, 0, x - a - (v === 6 ? 3.6 : [2.2, 3, 3.4][k]), y + [0.5, 1.6, 0.4][k], 0, 0.45, 0.3, k === 1 ? 0.4 : 0.7);\n  }\n  Tb(FT, -3.6, -4.8, 0, -6.6, 2.6, 0, 2.5, 1, 0.8, 0.5);\n  Tb(FT, -6.6, 2.6, 0, -5.2, 5.6, 0, 0.8, 0.45, 0.8);\n  const sb = 0.5 * b;\n  Tb(FT, 5 + sb, -31, 0, 6.6 + sb, -23.5, 0, 1.2, 0.9, 0.9, 0.5);\n  Tb(FT, 6.6 + sb, -23.5, 0, 7 + sb, -19.5, 0, 0.9, 0.45, 0.8);\n  E(FT, 5.2 + sb, -29.8, 0, 1.3, 1.9, 2.4, -0.2, 0, 0.7, 0.5, 0.6);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    // Hip bone: faint wing, its lines, socket, obturator ring.\n    E(FT, -1.5, -6.5, s * 6, 5.4, 4.8, 2.6, -0.35, s * 0.55, 0.2, 0.5, 1);\n    for (let i = 3; i \u003c IL.length; i += 3)\n      if (IL[i] === IL[i] && IL[i - 3] === IL[i - 3]) Tb(FT, IL[i - 3], IL[i - 2], s * IL[i - 1], IL[i], IL[i + 1], s * IL[i + 2], 0.45, 0.45, 0.85);\n    E(FT, 0, 0, s * HZ, 3.2, 3.2, 3, 0, 0, 0.4, 0.6, 1);\n    E(FT, 1, 4.6, s * 3.8, 3.2, 2.2, 1.6, 0.3, s * 0.3, 0.4, 0.5, 1);\n    // Collarbone, shoulder blade, the spine of the blade and the coracoid.\n    Tb(FT, 4.6, -32.2, s * 1.6, 2.2, -33.3, s * 7.4, 0.85, 0.8, 0.9, 0.4);\n    Tb(FT, 2.2, -33.3, s * 7.4, -1, -34.6, s * 12, 0.8, 0.9, 0.9, 0.4);\n    E(FT, -5.6, -27.5, s * 8.3, 2, 6.2, 4.6, 0.1, s * 0.6, 0.2, 0.4, 1);\n    Tb(FT, -7.4, -30.6, s * 5.4, -1.4, -35, s * 11.6, 0.6, 0.75, 0.9);\n    Tb(FT, 0.4, -32.4, s * 10, 2.4, -31.6, s * 9, 0.5, 0.45, 0.8);\n    // The ribs swing up and out on the breath.\n    for (let i = 0; i \u003c 7; i++) {\n      const r = RIB[i], ya = -31.5 + 2.4 * i, xa = spx(ya) - 1.3, rx = r[0] * (1 + 0.06 * b), rz = r[1] * (1 + 0.04 * b), dr = r[2] - 1.3 * b;\n      let px = xa, py = ya, pz = s * 1.6;\n      for (let j = 1; j \u003c= 5; j++) {\n        const al = (r[4] * PI * j) / 5, ca = 1 - cos(al), x = xa + rx * ca, y = ya + (dr * ca) / 2 + r[3] * sin(al), z = s * (1.6 + rz * sin(al));\n        Tb(FT, px, py, pz, x, y, z, 0.3, 0.25, 0.9);\n        (px = x), (py = y), (pz = z);\n      }\n    }\n  }\n}\n\nfunction flesh(b) {\n  E(FH, 2.4, -6, 0, 8, 8.4, 6.8, -0.1, 0, 1);\n  Tb(FT, -1.6, -31, 0, -0.6, -41, 0, 4.6, 4.2, 1);\n  E(FT, -0.2 + 0.3 * b, -23.5, 0, 9.4 + 0.4 * b, 11.5, 12.6, 0.05, 0, 1);\n  E(FT, 1.4, -9.5, 0, 8.8, 8.6, 11.4, 0, 0, 1);\n  E(FT, -1.6, -0.8, 0, 8.8, 8, 12.4, 0, 0, 1);\n  // Air in the lungs and windpipe and in the gut; heart and liver a little denser.\n  for (let s = -1; s \u003c= 1; s += 2) E(FT, -0.3, -24.4 + 0.6 * b, s * 5.8, 5.6 + 0.3 * b, 8 + 0.5 * b, 5.4, 0.1, s * 0.15, -1);\n  Tb(FT, 2.4, -40.5, 0, 0.8, -28.6, 0, 1, 1, -1);\n  E(FT, 3.6, -19.4, -1.6, 4, 4.6, 4.2, 0.6, 0, 0.55);\n  E(FT, 1.4, -12.6, 3.2, 6, 4.2, 6.8, 0.3, 0, 0.3);\n  for (let i = 0; i \u003c 16; i += 4) E(FT, GAS[i], GAS[i + 1], GAS[i + 2], 1.8 * GAS[i + 3], 1.4 * GAS[i + 3], 1.8 * GAS[i + 3], 0, 0, -0.8);\n}\n\nfunction leg(i, s) {\n  const t1 = LA[i * 3], t2 = LA[i * 3 + 1], t3 = LA[i * 3 + 2], z = s * HZ, bone = TG === B;\n  const dx = sin(t1), dy = cos(t1), kx = LT * dx, ky = LT * dy, ex = sin(t2), ey = cos(t2), ax = kx + LS * ex, ay = ky + LS * ey, fx = cos(t3), fy = -sin(t3);\n  // Femur: head in its socket, neck, greater trochanter, shaft, condyles.\n  FR.set([0, 0, z, dx, dy, 0, dy, -dx, 0, 0, 0, s, -t1]);\n  if (!bone) Tb(FL, -1, 0, 0, LT, 0, 0, 6.4, 4.4, 1);\n  else {\n    E(FL, 0, 0, 0, 2.3, 2.3, 2.3, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 0, 0, 0, 2.6, 0, 2.6, 1.3, 1.4, 0.6);\n    E(FL, 1.6, -1.5, 3.2, 1.7, 2.1, 1.5, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 2.8, 0, 2.6, LT - 2.4, 0, 0.4, 1.75, 1.6, 1, 0.85);\n    E(FL, LT - 1.2, -0.3, 0, 2.5, 2.4, 3.4, 0, 0, 0.7, 0.6, 0.6);\n    // The kneecap rides over the joint, halfway between thigh and shank.\n    const h = (t1 + t2) / 2;\n    E(FB, kx + cos(h) * 3.2, ky - sin(h) * 3.2, z, 1, 1.8, 1.5, -h, 0, 0.85, 0.45, 0.5);\n  }\n  // Tibia and the thinner fibula behind it.\n  FR.set([kx, ky, z, ex, ey, 0, ey, -ex, 0, 0, 0, s, -t2]);\n  if (!bone) Tb(FL, 0, 0, 0, LS, 0, 0, 4.2, 2.4, 1), E(FL, 8, -1.6, 0, 3, 6.5, 3.2, 0, 0, 1);\n  else {\n    E(FL, 1.9, 0, 0, 2.8, 1.4, 3.3, 0, 0, 0.7, 0.5, 0.5);\n    Tb(FL, 3, 0.3, 0, LS - 1.8, 0, 0, 1.75, 1.2, 1, 0.85);\n    E(FL, LS - 1, 0, -0.4, 1.6, 1.7, 2.2, 0, 0, 0.75, 0.5, 0.4);\n    E(FL, 3.6, -1.9, 2, 1, 1, 1, 0, 0, 0.8);\n    Tb(FL, 4, -1.9, 2, LS - 0.8, -1, 2.4, 0.7, 0.6, 0.95, 0.3);\n    E(FL, LS + 0.3, -1, 2.6, 1, 1.5, 1, 0, 0, 0.8);\n  }\n  // Foot: talus, heel, arch, two metatarsals for five, and toes that stay flat\n  // on the belt as the heel lifts.\n  FR.set([ax, ay, z, fx, fy, 0, -fy, fx, 0, 0, 0, s, -t3]);\n  if (!bone) return Tb(FL, -3, 2.6, 0, 10, 3, 0, 2.3, 1.6, 1);\n  E(FL, 0.6, 1, 0, 2.2, 1.5, 1.6, 0, 0, 0.8, 0.5, 0.5);\n  E(FL, -2.4, 2.9, 0, 3.3, 1.8, 1.6, -0.3, 0, 0.8, 0.6, 0.55);\n  E(FL, 3.3, 1.7, 0, 1.5, 1.3, 1.8, 0, 0, 0.85);\n  E(FL, 2.6, 3.1, 0, 1.2, 1, 1.2, 0, 0, 0.8);\n  Tb(FL, 4.4, 1.9, 0, 9.2, 3.5, 0, 0.65, 0.6, 1, 0.3);\n  Tb(FL, 3.6, 3.4, 1, 8.4, 3.9, 1, 0.55, 0.5, 0.9);\n  FL(9.2, 3.5, 0);\n  const d = t3 \u003c 0 ? -t3 * (1 - sm(0.4, 3, FLOOR - OY - gy - 1.1)) : 0, c = cos(d), n = -sin(d);\n  Tb(FL, 9.2, 3.5, 0, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 0.5, 0.45, 0.95);\n  Tb(FL, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 9.2 + c * 4.2, 3.5 + n * 4.2, 0, 0.45, 0.4, 0.9);\n}\n\nfunction arm(s, sig, eps, k, wv) {\n  FT(-1, -33, s * SZ);\n  const sx = gx, sy = gy, sz = gz, au = sig + LAM, af = au + eps, V = AV;\n  // Axes of the upper arm and forearm, and the thumb side of the hand. In the\n  // wave the elbow goes out to the side and the forearm up, palm to you.\n  V.set([sin(au), cos(au), s * 0.1, sin(af), cos(af), s * 0.04, cos(af), -sin(af), 0]);\n  if (k > 0) {\n    const A = [0.2, 0.62, s * 0.76, 0.15, -cos(wv), s * (sin(wv) - 0.1), 0, 0, -s];\n    for (let j = 0; j \u003c 9; j++) V[j] = mix(V[j], A[j], k);\n  }\n  for (let j = 0; j \u003c 9; j += 3) {\n    const d = j === 6 ? V[6] * V[3] + V[7] * V[4] + V[8] * V[5] : 0;\n    for (let c = 0; c \u003c 3; c++) V[j + c] -= d * V[3 + c];\n    const l = hypot(V[j], V[j + 1], V[j + 2]) || 1;\n    for (let c = 0; c \u003c 3; c++) V[j + c] /= l;\n  }\n  const [ux, uy, uz, fx, fy, fz, px, py, pz] = V, ex = sx + LU * ux, ey = sy + LU * uy, ez = sz + LU * uz;\n  // The forearm's frame from the elbow, its third axis toward the palm.\n  FR.set([ex, ey, ez, fx, fy, fz, px, py, pz, s * (fy * pz - fz * py), s * (fz * px - fx * pz), s * (fx * py - fy * px), -af]);\n  if (TG === T) {\n    Tb(FB, sx, sy, sz, ex, ey, ez, 2.8, 2.2, 1);\n    Tb(FL, 0, 0, 0, LF, 0, 0, 2.2, 1.6, 1);\n    return Tb(FL, LF, 0, 0, LF + 7, 0, 0, 1.5, 1.1, 1);\n  }\n  // Humerus, ulna with the point of the elbow, radius, wrist, four fingers\n  // curled a little toward the palm, thumb.\n  E(FB, sx, sy, sz, 2.2, 2.2, 2.2, 0, 0, 0.8, 0.7, 0.5);\n  Tb(FB, sx + ux * 1.8, sy + uy * 1.8, sz + uz * 1.8, ex - ux * 1.3, ey - uy * 1.3, ez - uz * 1.3, 1.35, 1.15, 1, 0.85);\n  E(FB, ex - ux * 0.8, ey - uy * 0.8, ez - uz * 0.8, 1.3, 1.5, 2.5, -au, 0, 0.8, 0.5, 0.5);\n  E(FL, 0.3, -1, 0, 1, 1, 1, 0, 0, 0.9);\n  Tb(FL, 0.8, -0.5, 0, LF, -0.5, 0, 0.75, 0.55, 1, 0.5);\n  Tb(FL, 1.2, 0.5, 0, LF, 0.55, 0, 0.6, 0.95, 1, 0.5);\n  E(FL, LF + 1.4, 0, 0, 1.5, 1.3, 1.5, 0, 0, 0.9, 0.5, 0.4);\n  const c0 = mix(0.3, 0.06, k);\n  for (let j = 0; j \u003c 5; j++) {\n    const th = j > 3, o = th ? 2.2 : FO[j];\n    let x = LF + (th ? 3.2 : 5.8), y = o, z = 0, c = 0;\n    Tb(FL, LF + (th ? 1 : 2.2), th ? 0.9 : o / 2, 0, x, y, z, 0.5, 0.45, 0.95);\n    for (let m = 0; m \u003c (th ? 2 : 3); m++) {\n      c += c0;\n      const L = th ? 2 - 0.4 * m : FLN[j] * PHL[m], X = x + cos(c) * L, Y = y + (th ? 0.7 * L : 0), Z = z + sin(c) * L;\n      Tb(FL, x, y, z, X, Y, Z, 0.42, 0.36, 0.9);\n      (x = X), (y = Y), (z = Z);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const g = S.gait, a = S.amp, p = S.ph, u = S.jump, tt = S.turn, b = sin(2 * PI * S.br);\n  const wj = u \u003c 0 ? 0 : sm(0, 0.2, u) * (1 - sm(1.15, 1.5, u));\n  const tf = tt \u003c 0 ? 0 : sm(0.5, 1.4, tt) * (1 - sm(3.8, 4.7, tt));\n  const wave = tt \u003c 0 ? 0 : sm(1.4, 1.9, tt) * (1 - sm(3.3, 3.8, tt));\n  PSI = (PI / 2) * tf;\n  (CP = cos(PSI)), (SP = sin(PSI));\n  LAM = (mix(4, 11, g) * a + (wj ? key(JK[5], u) * wj : 0)) * D;\n  (LC = cos(LAM)), (LSN = sin(LAM));\n  // Legs half a stride apart, arms swinging against them; the lowest heel or\n  // ball stands on the belt.\n  let low = 0;\n  for (let i = 0; i \u003c 2; i++) {\n    const q = p + 0.5 * i, c = cos(2 * PI * q);\n    let th = ang(0, q, g) * a, kn = ang(1, q, g) * a + 3, an = ang(2, q, g) * a;\n    let sg = mix(-5 - 17 * c, -12 - 28 * c, g) * a, ep = mix(8, mix(14 + 8 * (1 - c), 80 + 9 * (1 - c), g), a);\n    if (wj) {\n      (th = mix(th, key(JK[0], u), wj)), (kn = mix(kn, key(JK[1], u), wj)), (an = mix(an, key(JK[2], u), wj));\n      (sg = mix(sg, key(JK[3], u), wj)), (ep = mix(ep, key(JK[4], u), wj));\n    }\n    const t1 = (LA[i * 3] = th * D), t2 = (LA[i * 3 + 1] = (th - kn) * D), t3 = (LA[i * 3 + 2] = (th - kn + an) * D);\n    const ay = LT * cos(t1) + LS * cos(t2);\n    low = max(low, ay + 4 * sin(t3) + 4.9 * cos(t3), ay - 9.2 * sin(t3) + 4.6 * cos(t3));\n    (AR[i * 2] = sg * D), (AR[i * 2 + 1] = ep * D);\n  }\n  // A run leaves the belt between steps; a jump leaves it higher.\n  const fl = g * g * a * 3.2 * max(0, (cos(4 * PI * (p - 0.45)) - 0.75) * 4) ** 1.5;\n  const v = (u - 0.46) / 0.44;\n  OY = FLOOR - low - fl - (v > 0 && v \u003c 1 ? 32 * v * (1 - v) : 0);\n  OX = mix(26.5 + 2.5 * g, 35, tf);\n  FT(-2.1, -41.4, 0);\n  (HX = gx), (HY = gy);\n  ETA = -LAM * 0.85 + 0.035 * sin(4 * PI * p) * a;\n  (HC = cos(ETA)), (HS = sin(ETA));\n  JA = 0.2 * wave * (0.6 + 0.4 * sin(tt * 9));\n  (JC = cos(JA)), (JS = sin(JA));\n  const wv = 0.3 * sin((tt - 1.9) * 2 * PI * 1.7) * sm(1.6, 2, tt);\n\n  B.fill(0);\n  T.fill(0);\n  TG = B;\n  treadmill(S.belt);\n  skull();\n  trunk(b);\n  for (let r = 0; r \u003c 2; r++) {\n    TG = r ? T : B;\n    leg(0, 1);\n    leg(1, -1);\n    arm(1, AR[0], AR[1], wave, wv);\n    arm(-1, AR[2], AR[3], 0, 0);\n  }\n  if (S.dose > 0.001) flesh(b);\n\n  // The screen turns bone and flesh to light. An afterglow fades behind what\n  // moves, and bright bone blooms a little.\n  const x3 = S.scr * 3, pi = min(2, floor(x3));\n  for (let j = 0; j \u003c 6; j++) PC[j] = mix(PAL[pi][j], PAL[pi + 1][j], x3 - pi);\n  const dec = exp(-S.dt / 0.07), gd = 0.62 * sqrt(S.dose), bg = S.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) GB[r + x] = 0.5 * G[r + x] + 0.25 * (G[r + (x ? x - 1 : x)] + G[r + (x \u003c W - 1 ? x + 1 : x)]);\n  for (let q = 0; q \u003c N; q++) {\n    const e = B[q] > 0 ? (1 - exp(-0.3 * B[q])) ** 1.35 : 0, t = T[q] > 0 ? gd * (1 - exp(-T[q] / 12)) : 0;\n    B[q] = e + t * (1 - e);\n    G[q] = max(B[q], GB[q] * dec);\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += B[r + cl(x + d, 0, W - 1)];\n      T[r + x] = a / 5;\n    }\n  const ch = (j, lv, w, ag) => min(255, 255 * (lv * (PC[j] + (1 - PC[j]) * w) + ag * PC[j + 3]));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += T[cl(y + d, 0, H - 1) * W + x];\n      const q = y * W + x, L = B[q], ag = (G[q] - L) * 0.3, lv = L + bg[q] + 0.045 * a, w = L * L * L * 0.75;\n      display.setPixel(x, y, ch(0, lv, w, ag), ch(1, lv, w, ag), ch(2, lv, w, ag));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Screen","min":0,"max":1,"about":"The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour."},{"name":"Speed","min":0.2,"max":3,"about":"The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower."},{"name":"Gait","min":0,"max":1,"about":"A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps."},{"name":"Dose","min":0,"max":1,"about":"The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body."}],"start":[0,2,0,0.06],"measures":{"motion":0.988,"detail":0.0374,"edges":0.3589,"complexity":1.506,"coverage":0.2562,"colour":0.1011,"drift":0.06},"knobResponse":[0.0534,0.0544,0.0908,0.0578]},{"slug":"flying-trapeze","title":"Flying Trapeze","family":"stage","round":24,"note":"밤의 서커스 천막 꼭대기를 올려다봐요. 빨강과 크림 줄무늬 천 아래에서 플라이어가 공중그네를 타고 나가 공중제비를 돌고, 무릎으로 매달린 캐처가 손을 잡아요. 팔로 스폿 셋이 연무 속에 빛줄기를 그으며 따라가고, 차례가 끝나면 그물로 떨어져 튀어 올라요. K1 을 누르면 북이 울리고 세 바퀴 공중제비가 나와요.","idea":"Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.","buttons":"K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.","code":"// ===== Patternflow pattern =====\n// Title:   Flying Trapeze\n// Family:  stage\n// Idea:    Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the flying trapeze act Jules Léotard first flew at the Cirque Napoléon in 1859\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1\n//\n// Knob 1: Lights. The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them.\n// Knob 2: Speed. How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Turns. The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer.\n// Knob 4: Haze. How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels.\n// Buttons: K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, ceil, round, atan2, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (s) => s - sin(TAU * s) * (0.8 / TAU);\nconst rnd = () => Math.random();\n// A swing of the fly bar out and back, in seconds at Speed 2.\nconst PB = 2.4;\nconst OM = TAU / PB;\n// The fly bar's crane and rope; the catcher's cradle, rope and swing.\nconst [PFX, PFY, LF] = [24, 30, 34];\nconst [PCX, PCY, LC, B] = [57, 30, 20, 0.18];\n// The board's top, where the next flyer waits on it, and the rope ladder.\nconst [BY, WX, LX] = [68, 1.2, 2.6];\n// Hips above feet, hands above hips, gravity, and the time of the flight back to the bar.\nconst [LEG, HL, G, TR] = [3.8, 5.7, 90, 0.45];\n// Follow spots below the panel behind the crowd, and how fast their cones open.\nconst SPOT = [[-14, 166], [78, 166], [32, 186]];\nconst TA = 0.046;\n// Gels by the Lights knob: house wash (0..1), three spots, two flyers and the catcher.\nconst PAL = [\n  [[1, 0.8, 0.52], [255, 226, 170], [255, 244, 222], [255, 206, 120], [255, 182, 36], [205, 222, 255], [70, 120, 255]],\n  [[1, 0.64, 0.5], [255, 182, 120], [255, 150, 150], [255, 208, 150], [255, 96, 112], [255, 206, 60], [250, 240, 230]],\n  [[0.82, 0.52, 0.86], [255, 122, 196], [186, 142, 255], [255, 166, 214], [255, 62, 196], [160, 104, 255], [110, 236, 214]],\n  [[0.46, 0.44, 1], [255, 76, 170], [66, 128, 255], [172, 96, 255], [255, 44, 156], [36, 150, 255], [245, 245, 255]],\n];\nconst [SKIN, STEEL, ROPE, BAR] = [[255, 196, 156], [170, 176, 190], [150, 138, 116], [215, 215, 225]];\nconst ONNET = { drop: 1, net: 1, up: 1, tada: 1 };\n\nconst mkF = (c) => ({ m: 'wait', x: WX, y: BY - LEG, ph: 0, fs: 1, a1: 2.9, a2: 2.9, l1: 0, l2: 0, k1: 0, k2: 0, hx: null, T: 0, sx: 0, sy: 0, c });\n// Thighs, knees and arms of a figure, both sides.\nconst lim = (f, l1, l2, k1, k2, a1, a2) => Object.assign(f, { l1, l2, k1, k2, a1, a2 });\nconst rest = (f) => ((f.hx = null), lim(f, 0, 0, 0, 0, 2.9, 2.9));\nconst barAt = (th) => [PFX + LF * sin(th), PFY + LF * cos(th)];\nconst netY = (x) => 98.5 + 1.6 * sin((PI * cl(x, 0, 63)) / 63);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = {\n    t: 0, started: false, F: F32(N * 3), LT: F32(N * 3), CA: F32(N * 3), CI: F32(N), AUD: F32(N), ROW: new Int8Array(N).fill(-1), POOL: F32(H),\n    bar: 'free', A: 0.55, phc: 0, fl: [mkF(4), mkF(5)], star: 0,\n    sp: SPOT.map(([sx, sy]) => ({ sx, sy, ax: 30, ay: 50, ux: 0, uy: -1, D: 110 })),\n    drum: 0, drumB: 0, pop: 0, wash: 1, trip: false, nextFin: true, turns: 1, net: { s: 0, v: 0, x: 32 }, fx: [], phones: [], P: PAL[0].map((c) => c.slice()), hz: 0.3,\n  };\n  // The canvas: red and cream panels running down from the peak, each billowing between its seams.\n  for (let y = 0; y \u003c H; y++) {\n    S.POOL[y] = exp(-(((y - 17) / 15) ** 2));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, dx = x - 32, dy = y - 5, a = atan2(dx, dy);\n      const red = 0.5 + 0.5 * cl(sin(a * 7) * 4, -1, 1);\n      const k = (0.84 - 0.16 * cos(a * 14)) * sm(2.5, 6, sqrt(dx * dx + dy * dy));\n      S.CA[i * 3] = mix(0.95, 0.88, red) * k;\n      S.CA[i * 3 + 1] = mix(0.86, 0.12, red) * k;\n      S.CA[i * 3 + 2] = mix(0.68, 0.12, red) * k;\n      S.CI[i] = (0.3 + 0.7 * exp(-((dx * dx) / 900 + (dy * dy) / 300))) * sm(40, 20, y);\n    }\n  }\n  // The crowd: rows of heads and shoulders, bigger towards the front, each row a solid band below.\n  [[108.5, 1.9, 4.6], [114, 2.3, 5.4], [120.5, 2.8, 6.4], [127.5, 3.4, 7.6]].forEach(([base, r, gap], k) => {\n    for (let cx = -2 + rnd() * gap; cx \u003c W + 3; cx += gap * (0.8 + 0.4 * rnd())) {\n      const hy = base - r * 1.15 + (rnd() - 0.5) * 1.2, hx = cx + rnd() - 0.5;\n      for (let y = max(0, floor(hy - r - 1)); y \u003c H; y++)\n        for (let x = max(0, floor(hx - r * 2.4)); x \u003c= min(W - 1, ceil(hx + r * 2.4)); x++) {\n          const hd = r + 0.5 - sqrt((x - hx) ** 2 + (y - hy) ** 2);\n          const sh = 1 - sqrt(((x - hx) / (r * 2.2)) ** 2 + ((y - base) / (r * 0.9)) ** 2);\n          const c = y >= base ? 1 : cl(max(hd, sh * r * 2), 0, 1), i = y * W + x;\n          if (c > S.AUD[i]) S.AUD[i] = c;\n          if (c > 0.5) S.ROW[i] = k;\n        }\n      if (rnd() \u003c 0.09) S.phones.push([round(hx + 1), round(hy - r - 1)]);\n    }\n  });\n  params.s = S;\n}\n\n// The catcher at swing angle psi: knees over the bar, body hanging, arms reaching for the flyer.\nfunction cpose(psi) {\n  const ps = psi * 1.2, bx = PCX + LC * sin(psi), by = PCY + LC * cos(psi), sx = sin(ps), sy = cos(ps);\n  const hx = bx + 1.9 * sx, hy = by + 1.9 * sy;\n  const ax = sx * cos(0.2) - sy * sin(0.2), ay = sy * cos(0.2) + sx * sin(0.2);\n  return { bx, by, x: hx, y: hy, ph: PI - ps, fs: 1, l1: 0, l2: 0, k1: 1.5, k2: 1.3, hx: hx + 3 * sx + 2.7 * ax, hy: hy + 3 * sy + 2.7 * ay };\n}\n\nfunction newRound(S, go, who) {\n  const trip = S.trip, turns = trip ? 3 : S.turns, fin = trip || S.nextFin, tf = 0.75 + 0.25 * turns, tr = go + 1.5 * PB;\n  S.trip = false;\n  S.nextFin = !fin;\n  S.rd = { turns, fin, tf, h: 8 + 3 * turns, tg: go, tr, tc: tr + tf, rel: false, A0: S.A, A: 0.55 + 0.03 * (turns - 1), t0: S.t, over: false };\n  S.star = who;\n  // The catcher times his swing to be out at the front of it when she arrives.\n  const dt = max(0.3, S.rd.tc - S.t);\n  let k = round((S.phc + OM * dt) / TAU);\n  if ((TAU * k - S.phc) / dt \u003c 0.6 * OM) k++;\n  S.ct = { ph: TAU * k, t: S.rd.tc, ev: 0 };\n}\n\nconst burst = (S, n) => {\n  for (let i = 0; i \u003c n; i++) S.fx.push({ x: 2 + rnd() * 60, y: 106 + rnd() * 20, a: 1, w: rnd() * 0.25 });\n};\n\nfunction catcherEvent(S, ev) {\n  const rd = S.rd, f = S.fl[S.star];\n  f.T = 0;\n  f.ph0 = f.ph;\n  if (ev === 0) {\n    // The catch: the house comes up and the crowd's cameras go off.\n    if (f.m === 'fly') f.m = 'caught';\n    burst(S, 7, (S.pop = 1));\n    S.ct = rd.fin ? { ph: S.phc + 1.5 * PI, t: S.t + 2.4, ev: 2 } : { ph: S.phc + TAU, t: rd.tg + 3.5 * PB - TR, ev: 1 };\n  } else if (ev === 1) [f.m, f.sx, f.sy] = ['ret', f.x, f.y];\n  else {\n    // He lets her go on the swing back, and she falls turning over into the net.\n    [f.m, f.vx, f.vy] = ['drop', f.vx0, f.vy0];\n    const dy = netY(f.x + f.vx * 0.9) - 1 - f.y;\n    f.TF = (-f.vy + sqrt(f.vy * f.vy + 2 * G * max(1, dy))) / G;\n    rd.over = true;\n  }\n}\n\nfunction stepFlyer(S, f, d, i) {\n  const rd = S.rd, t = S.t, th = S.th, [hbx, hby] = barAt(-S.A), [bx, by] = barAt(th), nt = S.net;\n  f.T += d;\n  switch (f.m) {\n    case 'wait':\n    case 'hold': {\n      // Standing on the board; the one whose turn it is steps up and takes the bar.\n      const h = f.m === 'hold', gx = h ? hbx - 1 : WX;\n      rest(f);\n      f.x += cl(gx - f.x, -7 * d, 7 * d);\n      [f.fs, f.y, f.ph] = [1, BY - LEG, h ? 0.12 * sm(3, 0.5, abs(gx - f.x)) : 0.04 * sin(t * 1.3 + i)];\n      if (!h) break;\n      if (abs(gx - f.x) \u003c 1.5) [f.hx, f.hy] = [hbx, hby];\n      if (t >= rd.tg) [S.bar, f.m, f.T, f.sx, f.sy] = ['free', 'swing', 0, f.x, f.y];\n      break;\n    }\n    case 'swing':\n    case 'ride': {\n      f.fs = f.m === 'ride' ? -1 : 1;\n      const k = f.m === 'swing' ? sm(0, 0.3, f.T) : 1, u = (f.fs * th) / S.A;\n      [f.x, f.y, f.ph] = [mix(f.sx, bx + HL * sin(th), k), mix(f.sy, by + HL * cos(th), k), -th * k];\n      // Legs lead at the front of each swing and trail at the back.\n      const l = (0.95 * max(0, u) + 0.35 * min(0, u)) * k;\n      lim(f, l, l, 0.25 * max(0, -u) * k, 0.25 * max(0, -u) * k, f.a1, f.a2);\n      [f.hx, f.hy] = [bx, by];\n      if (f.m === 'swing' && !rd.rel && t >= rd.tr) {\n        // Let go at the top of the swing, aimed at where the catcher's hands will be.\n        const c = cpose(-B);\n        rd.rel = true;\n        Object.assign(f, { m: 'fly', Rx: f.x, Ry: f.y, Cx: c.hx + HL * sin(-0.8 * B), Cy: c.hy + HL * cos(-0.8 * B), phR: f.ph, pkR: f.l1, hx: null });\n      }\n      if (f.m === 'ride' && t >= rd.tg + 4 * PB) {\n        // Home on the board. The flyer who was waiting takes the bar next.\n        S.bar = 'hook';\n        rd.over = true;\n        [f.m, f.T, f.sx, f.sy] = ['land', 0, f.x, f.y];\n        const o = S.fl[1 - i];\n        if (o.m === 'wait') o.m = 'hold';\n        f.next = o.m === 'hold' ? 'wait' : 'hold';\n        newRound(S, t + 1.1, o.m === 'hold' ? 1 - i : i);\n      }\n      break;\n    }\n    case 'fly': {\n      const s = cl((t - rd.tr) / rd.tf, 0, 1), u = sm(0.04, 0.22, s) * (1 - sm(0.7, 0.9, s));\n      [f.x, f.y, f.ph] = [mix(f.Rx, f.Cx, s), mix(f.Ry, f.Cy, s) - 4 * rd.h * s * (1 - s), mix(f.phR, 0.8 * B - TAU * rd.turns, ease(s))];\n      const l = max(f.pkR * (1 - sm(0, 0.12, s)), 2.2 * u);\n      lim(f, l, l, 2.4 * u, 2.4 * u, 2 * u, 2 * u);\n      break;\n    }\n    case 'caught': {\n      const c = S.cp, tp = S.psi * 0.8;\n      [f.x, f.y, f.ph, f.fs, f.hx, f.hy] = [c.hx + HL * sin(tp), c.hy + HL * cos(tp), -tp, 1, c.hx, c.hy];\n      lim(f, 0.4 * sin(S.phc + 0.6), 0.4 * sin(S.phc + 0.6), 0, 0, 0, 0);\n      break;\n    }\n    case 'ret': {\n      // A half turn in the air and back to the fly bar, which comes out to meet her.\n      const s = cl(f.T / TR, 0, 1), [ex, ey] = barAt(rd.A);\n      [f.x, f.y, f.ph, f.fs] = [mix(f.sx, ex + HL * sin(rd.A), s), mix(f.sy, ey + HL * cos(rd.A), s) - 18 * s * (1 - s), mix(f.ph0, -rd.A, s), s \u003c 0.5 ? 1 : -1];\n      const a = sin(PI * s);\n      f.hx = null;\n      lim(f, 0.3 * a, 0.3 * a, 0, 0, 1.3 * a, -1.3 * a);\n      if (s >= 1) f.m = 'ride';\n      break;\n    }\n    case 'land': {\n      const k = sm(0, 0.35, f.T);\n      rest(f);\n      [f.x, f.y, f.ph, f.hx, f.hy] = [mix(f.sx, hbx - 1, k), mix(f.sy, BY - LEG, k), mix(f.ph, 0, k), hbx, hby];\n      if (f.T > 0.4) f.m = f.next;\n      break;\n    }\n    case 'drop': {\n      f.vy += G * d;\n      [f.x, f.y] = [f.x + f.vx * d, f.y + f.vy * d];\n      const s = cl(f.T / f.TF, 0, 1), u = sm(0.1, 0.3, s) * (1 - sm(0.62, 0.85, s));\n      f.ph = mix(f.ph0, -PI / 2 - TAU, ease(s));\n      lim(f, 2.2 * u, 2.2 * u, 2.4 * u, 2.4 * u, 0.6 + 1.4 * u, 0.6 + 1.4 * u).hx = null;\n      if (f.y >= netY(f.x) - 1) {\n        [f.m, f.T, nt.x] = ['net', 0, f.x];\n        S.pop = max(S.pop, 0.8);\n        burst(S, 6);\n      }\n      break;\n    }\n    case 'net': {\n      // Bouncing on her back: a stiff spring while she is in the net, a fall while she is out.\n      const n = max(1, ceil(d / 0.006)), h = d / n;\n      for (let j = 0; j \u003c n; j++) {\n        const pen = f.y - (netY(f.x) - 1);\n        f.vy += (G - (pen > 0 ? 420 * pen + 7 * f.vy : 0)) * h;\n        [f.y, f.x, f.vx] = [f.y + f.vy * h, f.x + f.vx * h, f.vx * (1 - 2.5 * h)];\n        if (pen > 0) [nt.s, nt.v] = [pen, f.vy];\n        else (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s += nt.v * h);\n      }\n      [nt.x, nt.hold, f.ph] = [f.x, true, -PI / 2];\n      lim(f, 0.6, 0.6, 0.4, 0.4, 1.6 + 0.5 * sin(f.T * 9), 1.6 - 0.5 * sin(f.T * 9));\n      if (f.T > 2.6) [f.m, f.T, f.sy] = ['up', 0, f.y];\n      break;\n    }\n    case 'up':\n    case 'tada':\n    case 'walk': {\n      nt.s += (1.5 - nt.s) * min(1, d * 8);\n      [nt.v, nt.x, nt.hold] = [0, f.x, true];\n      const top = netY(f.x) + nt.s - LEG - 0.6;\n      if (f.m === 'up') {\n        const k = sm(0, 0.5, f.T);\n        rest(f);\n        [f.ph, f.y] = [mix(-PI / 2, 0, k), mix(f.sy, top, k)];\n        if (f.T > 0.55) [f.m, f.T] = ['tada', 0];\n      } else if (f.m === 'tada') {\n        // Arms up for the crowd.\n        [f.ph, f.y] = [0, top];\n        lim(f, 0, 0, 0, 0, 0.55, -0.55);\n        if (f.T > 0.8) [f.m, f.T] = ['walk', 0];\n      } else {\n        // Bouncing along the net to the ladder.\n        const w = sin(f.T * 8);\n        [f.fs, f.x, f.y, f.ph] = [-1, f.x - 13 * d, top - 1.1 * abs(w), 0];\n        lim(f, 0.5 * w, -0.5 * w, 0, 0, PI - 0.5 * w, PI + 0.5 * w);\n        if (f.x \u003c= LX) [f.m, f.T] = ['climb', 0];\n      }\n      break;\n    }\n    case 'climb': {\n      // Up the rope ladder to the board.\n      const w = sin(f.T * 9);\n      [f.x, f.y, f.fs, f.ph, f.hx] = [LX, f.y - 12 * d, -1, 0, null];\n      const p = max(0, w), q = max(0, -w);\n      lim(f, 0.9 * p, 0.9 * q, 1.5 * p, 1.5 * q, 0.35 + 0.45 * w, 0.35 - 0.45 * w);\n      if (f.y \u003c= BY - LEG) [f.y, f.m] = [BY - LEG, 'wait'];\n      break;\n    }\n  }\n  if (d > 0) [f.vx0, f.vy0] = [(f.x - f.px) / d, (f.y - f.py) / d];\n  [f.px, f.py] = [f.x, f.y];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], rdt = cl(dt || 0, 0, 0.1), d = rdt * (cl(kv[1], 0.2, 3) / 2);\n  const u = cl(kv[0], 0, 1) * 3, pi = min(2, floor(u));\n  for (let j = 0; j \u003c 7; j++) for (let c = 0; c \u003c 3; c++) S.P[j][c] = mix(PAL[pi][j][c], PAL[pi + 1][j][c], u - pi);\n  [S.turns, S.hz] = [cl(round(kv[2]), 1, 3), 0.26 + 0.74 * cl(kv[3], 0, 1)];\n  if (!S.started) {\n    // Open mid-act: the first flyer is already out on her first swing.\n    [S.started, S.fl[0].m, S.fl[0].T] = [true, 'swing', 1];\n    newRound(S, -0.9, 0);\n    [S.A, S.phc] = [S.rd.A, S.ct.ph - OM * S.rd.tc];\n  }\n  const tp = S.t, t = (S.t += d), rd = S.rd;\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drum roll: this trick becomes the triple if she has not let go yet, else the next one.\n    S.drumB = 1;\n    if (!rd.rel && !rd.over) {\n      Object.assign(rd, { turns: 3, fin: true, tf: 1.5, h: 17, tc: rd.tr + 1.5 });\n      S.nextFin = false;\n      if (S.ct && S.ct.ev === 0) S.ct.t = rd.tc;\n    } else S.trip = true;\n  }\n  S.A = S.bar === 'hook' && !rd.over ? mix(rd.A0, rd.A, sm(rd.t0, rd.tg, t)) : rd.A;\n  S.th = S.bar === 'hook' ? -S.A : -S.A * cos(OM * (t - rd.tg));\n  // The catcher, phase-locked to the next thing he has to be on time for.\n  const ct = S.ct, rem = ct ? ct.t - tp : 0;\n  S.phc = ct ? (rem \u003c= d ? ct.ph : S.phc + ((ct.ph - S.phc) * d) / rem) : S.phc + OM * d;\n  S.cp = cpose((S.psi = -B * cos(S.phc)));\n  if (ct && rem \u003c= d) (S.ct = null), catcherEvent(S, ct.ev);\n  const nt = S.net, h = min(d, 0.02);\n  nt.hold = false;\n  S.fl.forEach((f, i) => stepFlyer(S, f, d, i));\n  // An empty net rings and settles.\n  if (!nt.hold) (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s = (nt.s + nt.v * h) * exp(-d * 3));\n  // After a drop the bar swings empty until it comes back to the board and the next flyer hooks it.\n  const R = S.rd;\n  const w = S.fl.findIndex((f) => f.m === 'wait');\n  if (R.over && S.bar === 'free' && w >= 0 && floor((t - R.tg) / PB) > floor((tp - R.tg) / PB)) [S.bar, S.fl[w].m] = ['hook', 'hold'], newRound(S, t + 0.7, w);\n  // Light cues: the house dims for the drum roll, more for a bigger trick, and comes up on the catch.\n  const r = S.rd, star = S.fl[S.star];\n  const roll = (!r.rel && t > r.tg + 0.5 * PB) || star.m === 'fly' || S.drumB > 0 ? 1 : 0;\n  S.drum += (roll - S.drum) * (1 - exp(-d * 4));\n  S.drumB = max(0, S.drumB - rdt * 0.4);\n  S.pop *= exp(-d * 0.9);\n  S.wash = (1 - S.drum * (0.3 + 0.22 * (r.turns - 1))) * (1 + 0.8 * S.pop);\n  // The follow spots: two on the flyer, the third on the catcher unless the trick is big.\n  const fin = S.fl.find((f) => ONNET[f.m]);\n  const tg = [fin || star, fin && t \u003c r.tg + 0.4 ? fin : star, S.drum > 0.5 && r.turns >= 2 ? star : { x: S.cp.x, y: S.cp.y + 3 }];\n  const k = 1 - exp(-d * 8);\n  S.sp.forEach((s, j) => {\n    const vx = (s.ax += (tg[j].x - s.ax) * k) - s.sx, vy = (s.ay += (tg[j].y - 1 - s.ay) * k) - s.sy, D = (s.D = sqrt(vx * vx + vy * vy));\n    [s.ux, s.uy] = [vx / D, vy / D];\n  });\n  // Camera flashes in the crowd.\n  if (rnd() \u003c rdt * 0.9) burst(S, 1);\n  for (const e of S.fx) e.a -= rdt * 9;\n  S.fx = S.fx.filter((e) => e.a > 0);\n}\n\n// A stroke lit by the light field, with optional sequin sparkle.\nfunction seg(S, ax, ay, bx, by, r, c, sp) {\n  const { F, LT } = S, dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6;\n  const x1 = min(W - 1, ceil(max(ax, bx) + r + 1)), y1 = min(H - 1, ceil(max(ay, by) + r + 1));\n  for (let y = max(0, floor(min(ay, by) - r - 1)); y \u003c= y1; y++)\n    for (let x = max(0, floor(min(ax, bx) - r - 1)); x \u003c= x1; x++) {\n      const t = cl(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1), ex = x - ax - dx * t, ey = y - ay - dy * t;\n      const a = cl(r + 0.5 - sqrt(ex * ex + ey * ey), 0, 1);\n      if (a \u003c= 0) continue;\n      const q = (y * W + x) * 3, s = sp ? 0.72 + 0.56 * rnd() : 1;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += (c[j] * LT[q + j] * s - F[q + j]) * a;\n    }\n}\n\nfunction glow(F, x, y, r, c, k) {\n  for (let yy = max(0, floor(y - r)); yy \u003c= min(H - 1, ceil(y + r)); yy++)\n    for (let xx = max(0, floor(x - r)); xx \u003c= min(W - 1, ceil(x + r)); xx++) {\n      const g = k * exp(-((xx - x) ** 2 + (yy - y) ** 2) / (0.25 * r * r)), q = (yy * W + xx) * 3;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += c[j] * g;\n    }\n}\n\n// A stick figure: hips at (x, y), body angle ph (0 is head up), facing fs.\nfunction fig(S, f, col) {\n  const bx = sin(f.ph), by = -cos(f.ph), nx = cos(f.ph) * f.fs, ny = sin(f.ph) * f.fs;\n  const dv = (a, l) => [(bx * cos(a) + nx * sin(a)) * l, (by * cos(a) + ny * sin(a)) * l];\n  const shx = f.x + bx * 3, shy = f.y + by * 3;\n  for (const [l, k] of [[f.l1, f.k1], [f.l2, f.k2]]) {\n    const [kx, ky] = dv(PI - l, 1.9), [fx, fy] = dv(PI - l + k, 1.9);\n    seg(S, f.x, f.y, f.x + kx, f.y + ky, 0.6, col, 1);\n    seg(S, f.x + kx, f.y + ky, f.x + kx + fx, f.y + ky + fy, 0.5, col, 1);\n  }\n  seg(S, f.x, f.y, shx, shy, 0.8, col, 1);\n  for (const a of [f.a1, f.a2]) {\n    const [ax, ay] = dv(a, 2.7);\n    seg(S, shx, shy, f.hx === null ? shx + ax : f.hx, f.hx === null ? shy + ay : f.hy, 0.42, SKIN, 0);\n  }\n  seg(S, shx + bx * 1.45, shy + by * 1.45, shx + bx * 1.55, shy + by * 1.55, 0.75, SKIN, 0);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { F, LT, CA, CI, AUD, ROW, POOL, P, wash, hz } = S, wc = P[0];\n  const hzA = hz * (0.7 - 0.22 * hz), halo = hz * hz * 0.18, hl = log(max(1, halo * 400));\n  const am = wc.map((v) => v * (0.12 + 0.12 * wash)), kc = 0.48 * 255 * wash, air = 9 * hz * wash;\n  const sp = S.sp.map((s, j) => [s.sx, s.sy, s.ux, s.uy, s.D, ...P[1 + j].map((v) => v / 255)]);\n  for (let y = 0; y \u003c H; y++) {\n    // The ring below the net glows in the house light behind the crowd.\n    const pb = POOL[y], ring = 50 * sm(117, 104, y) * sm(100, 104, y) * wash + air;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3, ci = CI[i] * kc;\n      let r = 4 + wc[0] * ring + CA[q] * wc[0] * ci, g = 4 + wc[1] * ring + CA[q + 1] * wc[1] * ci, b = 9 + wc[2] * ring + CA[q + 2] * wc[2] * ci;\n      let lr = 0, lg = 0, lb = 0;\n      const cv = CI[i] > 0.02 ? 0.9 * pb * sm(0, 0.3, CI[i]) * 255 : 0;\n      for (const s of sp) {\n        const vx = x - s[0], vy = y - s[1], al = vx * s[2] + vy * s[3], pp = abs(vx * s[3] - vy * s[2]), R = 0.8 + al * TA;\n        if (pp \u003c R) {\n          // Lit air along the beam, and past the flyer a pool where it lands on the canvas.\n          const p = sm(R, R * 0.45, pp), k = ((p * (al > s[4] ? 0.8 : 1) * 1.3) / (1 + (al / 110) ** 2)) * hzA * 255, c = cv > 0 && al > s[4] ? cv * p : 0;\n          (lr += s[5] * p), (lg += s[6] * p), (lb += s[7] * p);\n          (r += s[5] * (k + CA[q] * c)), (g += s[6] * (k + CA[q + 1] * c)), (b += s[7] * (k + CA[q + 2] * c));\n        }\n        // Haze scatters a wide glow round each beam.\n        if (pp \u003c (R + 9) * hl) {\n          const h = halo * exp(-pp / (R + 9)) * 255;\n          (r += s[5] * h), (g += s[6] * h), (b += s[7] * h);\n        }\n      }\n      (F[q] = r), (F[q + 1] = g), (F[q + 2] = b);\n      (LT[q] = min(1.25, lr * 1.2 + am[0])), (LT[q + 1] = min(1.25, lg * 1.2 + am[1])), (LT[q + 2] = min(1.25, lb * 1.2 + am[2]));\n    }\n  }\n  const t = S.t;\n  // The king pole, the ring of bulbs round the peak, which chase in a drum roll, and the bale ring.\n  seg(S, 32, 7, 32, 29, 0.7, STEEL, 0);\n  for (let j = 0; j \u003c 22; j++) {\n    const a = (TAU * j) / 22, x = 32 + 20 * sin(a), y = 6.5 + 5 * cos(a), ch = (((j / 22 - t * 0.9) % 1) + 1) % 1 \u003c 0.22 ? 1 : 0;\n    const v = (mix(0.75 + 0.15 * sin(t * 3 + j * 2.1), 0.3 + 0.9 * ch, S.drum) + 0.5 * S.pop) * (0.85 + 0.15 * cos(a));\n    glow(F, x, y, 3.2, [255, 196, 110], 0.42 * v);\n    const q = (round(y) * W + round(x)) * 3;\n    for (let k = 0; k \u003c 3; k++) F[q + k] += [200, 160, 90][k] * v;\n  }\n  seg(S, 30, 5, 34, 5, 1.1, [60, 62, 70], 0);\n  // The rig: a truss under the peak, guy lines, the uprights, the board and the ladder.\n  seg(S, 3, PFY - 2, 61, PFY - 2, 0.4, STEEL, 0);\n  seg(S, 3, PFY, 61, PFY, 0.35, STEEL, 0);\n  for (let x = 5; x \u003c 61; x += 4) seg(S, x, PFY - 2, x + 2, PFY, 0.25, STEEL, 0);\n  seg(S, 4, PFY - 2, 24, 7, 0.25, ROPE, 0);\n  seg(S, 60, PFY - 2, 40, 7, 0.25, ROPE, 0);\n  seg(S, 62, PFY - 2, 62, 103, 0.35, ROPE, 0);\n  seg(S, 0, PFY - 2, 0, BY, 0.35, ROPE, 0);\n  seg(S, 0, BY + 0.6, barAt(-S.rd.A)[0] + 0.4, BY + 0.6, 0.55, [190, 160, 120], 0);\n  seg(S, 1, BY + 1, 1, 97, 0.3, ROPE, 0);\n  seg(S, 4.2, BY + 1, 4.2, 97, 0.3, ROPE, 0);\n  for (let y = BY + 3; y \u003c 97; y += 3) seg(S, 1, y, 4.2, y, 0.25, ROPE, 0);\n  // The safety net, a sagging diamond mesh, dented where a flyer is in it.\n  const nt = S.net;\n  for (let x = 0; x \u003c W; x++) {\n    const dn = nt.s * exp(-(((x - nt.x) / 8) ** 2)), far = 94.5 + 1.2 * sin((PI * x) / 63) + 0.6 * dn, near = 103 + 2 * sin((PI * x) / 63) + dn;\n    for (let y = max(0, floor(far - 1)); y \u003c= min(H - 1, ceil(near + 1)); y++) {\n      const v = (y - far) / (near - far), fa = x * 0.34 + v * 3, fb = x * 0.34 - v * 3;\n      let ln = v > -0.06 && v \u003c 1.06 ? max(sm(0.3, 0.48, abs((fa % 1) - 0.5)), sm(0.3, 0.48, abs((((fb % 1) + 1) % 1) - 0.5))) : 0;\n      ln = max(ln, sm(0.9, 0.2, abs(y - far)), sm(0.9, 0.2, abs(y - near))) * 0.8;\n      const q = (y * W + x) * 3;\n      if (ln > 0) for (let j = 0; j \u003c 3; j++) F[q + j] += ([205, 196, 176][j] * LT[q + j] - F[q + j]) * ln;\n    }\n  }\n  // The fly bar on its ropes, the catcher's cradle, the catcher and the flyers.\n  const [bx, by] = barAt(S.th), c = S.cp;\n  for (const [px, py, x, y] of [[PFX, PFY, bx, by], [PCX, PCY, c.bx, c.by]]) {\n    seg(S, px - 1.2, py, x - 1.2, y, 0.28, ROPE, 0);\n    seg(S, px + 1.2, py, x + 1.2, y, 0.28, ROPE, 0);\n    seg(S, x - 1.8, y, x + 1.8, y, 0.45, BAR, 0);\n  }\n  fig(S, c, P[6]);\n  for (const f of S.fl) fig(S, f, P[f.c]);\n  // The crowd in front of it all, a dark sea, each head rimmed by the light behind it.\n  for (let i = W; i \u003c N; i++) {\n    const a = AUD[i];\n    if (a \u003c= 0) continue;\n    const q = i * 3, k = ROW[i], rim = k > ROW[i - W] ? (1 - 0.2 * k) * a : 0;\n    for (let j = 0; j \u003c 3; j++) F[q + j] += ((12 - 2.5 * k) * wc[j] - F[q + j]) * a + rim * (16 * wash * wc[j] + 60 * max(0, LT[q + j] - 0.3));\n  }\n  // Phones held up to film, and camera flashes.\n  for (const [x, y] of S.phones) if (x >= 0 && x \u003c W - 1) for (let j = 0; j \u003c 6; j++) F[(y * W + x) * 3 + j] += [70, 92, 130][j % 3];\n  for (const e of S.fx) glow(F, e.x, e.y, 2.2, [255, 250, 240], e.a * e.a * (1 - e.w));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-flying-trapeze","type":"code","name":"flying-trapeze","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flying Trapeze\n// Family:  stage\n// Idea:    Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the flying trapeze act Jules Léotard first flew at the Cirque Napoléon in 1859\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1\n//\n// Knob 1: Lights. The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them.\n// Knob 2: Speed. How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Turns. The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer.\n// Knob 4: Haze. How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels.\n// Buttons: K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, ceil, round, atan2, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (s) => s - sin(TAU * s) * (0.8 / TAU);\nconst rnd = () => Math.random();\n// A swing of the fly bar out and back, in seconds at Speed 2.\nconst PB = 2.4;\nconst OM = TAU / PB;\n// The fly bar's crane and rope; the catcher's cradle, rope and swing.\nconst [PFX, PFY, LF] = [24, 30, 34];\nconst [PCX, PCY, LC, B] = [57, 30, 20, 0.18];\n// The board's top, where the next flyer waits on it, and the rope ladder.\nconst [BY, WX, LX] = [68, 1.2, 2.6];\n// Hips above feet, hands above hips, gravity, and the time of the flight back to the bar.\nconst [LEG, HL, G, TR] = [3.8, 5.7, 90, 0.45];\n// Follow spots below the panel behind the crowd, and how fast their cones open.\nconst SPOT = [[-14, 166], [78, 166], [32, 186]];\nconst TA = 0.046;\n// Gels by the Lights knob: house wash (0..1), three spots, two flyers and the catcher.\nconst PAL = [\n  [[1, 0.8, 0.52], [255, 226, 170], [255, 244, 222], [255, 206, 120], [255, 182, 36], [205, 222, 255], [70, 120, 255]],\n  [[1, 0.64, 0.5], [255, 182, 120], [255, 150, 150], [255, 208, 150], [255, 96, 112], [255, 206, 60], [250, 240, 230]],\n  [[0.82, 0.52, 0.86], [255, 122, 196], [186, 142, 255], [255, 166, 214], [255, 62, 196], [160, 104, 255], [110, 236, 214]],\n  [[0.46, 0.44, 1], [255, 76, 170], [66, 128, 255], [172, 96, 255], [255, 44, 156], [36, 150, 255], [245, 245, 255]],\n];\nconst [SKIN, STEEL, ROPE, BAR] = [[255, 196, 156], [170, 176, 190], [150, 138, 116], [215, 215, 225]];\nconst ONNET = { drop: 1, net: 1, up: 1, tada: 1 };\n\nconst mkF = (c) => ({ m: 'wait', x: WX, y: BY - LEG, ph: 0, fs: 1, a1: 2.9, a2: 2.9, l1: 0, l2: 0, k1: 0, k2: 0, hx: null, T: 0, sx: 0, sy: 0, c });\n// Thighs, knees and arms of a figure, both sides.\nconst lim = (f, l1, l2, k1, k2, a1, a2) => Object.assign(f, { l1, l2, k1, k2, a1, a2 });\nconst rest = (f) => ((f.hx = null), lim(f, 0, 0, 0, 0, 2.9, 2.9));\nconst barAt = (th) => [PFX + LF * sin(th), PFY + LF * cos(th)];\nconst netY = (x) => 98.5 + 1.6 * sin((PI * cl(x, 0, 63)) / 63);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = {\n    t: 0, started: false, F: F32(N * 3), LT: F32(N * 3), CA: F32(N * 3), CI: F32(N), AUD: F32(N), ROW: new Int8Array(N).fill(-1), POOL: F32(H),\n    bar: 'free', A: 0.55, phc: 0, fl: [mkF(4), mkF(5)], star: 0,\n    sp: SPOT.map(([sx, sy]) => ({ sx, sy, ax: 30, ay: 50, ux: 0, uy: -1, D: 110 })),\n    drum: 0, drumB: 0, pop: 0, wash: 1, trip: false, nextFin: true, turns: 1, net: { s: 0, v: 0, x: 32 }, fx: [], phones: [], P: PAL[0].map((c) => c.slice()), hz: 0.3,\n  };\n  // The canvas: red and cream panels running down from the peak, each billowing between its seams.\n  for (let y = 0; y \u003c H; y++) {\n    S.POOL[y] = exp(-(((y - 17) / 15) ** 2));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, dx = x - 32, dy = y - 5, a = atan2(dx, dy);\n      const red = 0.5 + 0.5 * cl(sin(a * 7) * 4, -1, 1);\n      const k = (0.84 - 0.16 * cos(a * 14)) * sm(2.5, 6, sqrt(dx * dx + dy * dy));\n      S.CA[i * 3] = mix(0.95, 0.88, red) * k;\n      S.CA[i * 3 + 1] = mix(0.86, 0.12, red) * k;\n      S.CA[i * 3 + 2] = mix(0.68, 0.12, red) * k;\n      S.CI[i] = (0.3 + 0.7 * exp(-((dx * dx) / 900 + (dy * dy) / 300))) * sm(40, 20, y);\n    }\n  }\n  // The crowd: rows of heads and shoulders, bigger towards the front, each row a solid band below.\n  [[108.5, 1.9, 4.6], [114, 2.3, 5.4], [120.5, 2.8, 6.4], [127.5, 3.4, 7.6]].forEach(([base, r, gap], k) => {\n    for (let cx = -2 + rnd() * gap; cx \u003c W + 3; cx += gap * (0.8 + 0.4 * rnd())) {\n      const hy = base - r * 1.15 + (rnd() - 0.5) * 1.2, hx = cx + rnd() - 0.5;\n      for (let y = max(0, floor(hy - r - 1)); y \u003c H; y++)\n        for (let x = max(0, floor(hx - r * 2.4)); x \u003c= min(W - 1, ceil(hx + r * 2.4)); x++) {\n          const hd = r + 0.5 - sqrt((x - hx) ** 2 + (y - hy) ** 2);\n          const sh = 1 - sqrt(((x - hx) / (r * 2.2)) ** 2 + ((y - base) / (r * 0.9)) ** 2);\n          const c = y >= base ? 1 : cl(max(hd, sh * r * 2), 0, 1), i = y * W + x;\n          if (c > S.AUD[i]) S.AUD[i] = c;\n          if (c > 0.5) S.ROW[i] = k;\n        }\n      if (rnd() \u003c 0.09) S.phones.push([round(hx + 1), round(hy - r - 1)]);\n    }\n  });\n  params.s = S;\n}\n\n// The catcher at swing angle psi: knees over the bar, body hanging, arms reaching for the flyer.\nfunction cpose(psi) {\n  const ps = psi * 1.2, bx = PCX + LC * sin(psi), by = PCY + LC * cos(psi), sx = sin(ps), sy = cos(ps);\n  const hx = bx + 1.9 * sx, hy = by + 1.9 * sy;\n  const ax = sx * cos(0.2) - sy * sin(0.2), ay = sy * cos(0.2) + sx * sin(0.2);\n  return { bx, by, x: hx, y: hy, ph: PI - ps, fs: 1, l1: 0, l2: 0, k1: 1.5, k2: 1.3, hx: hx + 3 * sx + 2.7 * ax, hy: hy + 3 * sy + 2.7 * ay };\n}\n\nfunction newRound(S, go, who) {\n  const trip = S.trip, turns = trip ? 3 : S.turns, fin = trip || S.nextFin, tf = 0.75 + 0.25 * turns, tr = go + 1.5 * PB;\n  S.trip = false;\n  S.nextFin = !fin;\n  S.rd = { turns, fin, tf, h: 8 + 3 * turns, tg: go, tr, tc: tr + tf, rel: false, A0: S.A, A: 0.55 + 0.03 * (turns - 1), t0: S.t, over: false };\n  S.star = who;\n  // The catcher times his swing to be out at the front of it when she arrives.\n  const dt = max(0.3, S.rd.tc - S.t);\n  let k = round((S.phc + OM * dt) / TAU);\n  if ((TAU * k - S.phc) / dt \u003c 0.6 * OM) k++;\n  S.ct = { ph: TAU * k, t: S.rd.tc, ev: 0 };\n}\n\nconst burst = (S, n) => {\n  for (let i = 0; i \u003c n; i++) S.fx.push({ x: 2 + rnd() * 60, y: 106 + rnd() * 20, a: 1, w: rnd() * 0.25 });\n};\n\nfunction catcherEvent(S, ev) {\n  const rd = S.rd, f = S.fl[S.star];\n  f.T = 0;\n  f.ph0 = f.ph;\n  if (ev === 0) {\n    // The catch: the house comes up and the crowd's cameras go off.\n    if (f.m === 'fly') f.m = 'caught';\n    burst(S, 7, (S.pop = 1));\n    S.ct = rd.fin ? { ph: S.phc + 1.5 * PI, t: S.t + 2.4, ev: 2 } : { ph: S.phc + TAU, t: rd.tg + 3.5 * PB - TR, ev: 1 };\n  } else if (ev === 1) [f.m, f.sx, f.sy] = ['ret', f.x, f.y];\n  else {\n    // He lets her go on the swing back, and she falls turning over into the net.\n    [f.m, f.vx, f.vy] = ['drop', f.vx0, f.vy0];\n    const dy = netY(f.x + f.vx * 0.9) - 1 - f.y;\n    f.TF = (-f.vy + sqrt(f.vy * f.vy + 2 * G * max(1, dy))) / G;\n    rd.over = true;\n  }\n}\n\nfunction stepFlyer(S, f, d, i) {\n  const rd = S.rd, t = S.t, th = S.th, [hbx, hby] = barAt(-S.A), [bx, by] = barAt(th), nt = S.net;\n  f.T += d;\n  switch (f.m) {\n    case 'wait':\n    case 'hold': {\n      // Standing on the board; the one whose turn it is steps up and takes the bar.\n      const h = f.m === 'hold', gx = h ? hbx - 1 : WX;\n      rest(f);\n      f.x += cl(gx - f.x, -7 * d, 7 * d);\n      [f.fs, f.y, f.ph] = [1, BY - LEG, h ? 0.12 * sm(3, 0.5, abs(gx - f.x)) : 0.04 * sin(t * 1.3 + i)];\n      if (!h) break;\n      if (abs(gx - f.x) \u003c 1.5) [f.hx, f.hy] = [hbx, hby];\n      if (t >= rd.tg) [S.bar, f.m, f.T, f.sx, f.sy] = ['free', 'swing', 0, f.x, f.y];\n      break;\n    }\n    case 'swing':\n    case 'ride': {\n      f.fs = f.m === 'ride' ? -1 : 1;\n      const k = f.m === 'swing' ? sm(0, 0.3, f.T) : 1, u = (f.fs * th) / S.A;\n      [f.x, f.y, f.ph] = [mix(f.sx, bx + HL * sin(th), k), mix(f.sy, by + HL * cos(th), k), -th * k];\n      // Legs lead at the front of each swing and trail at the back.\n      const l = (0.95 * max(0, u) + 0.35 * min(0, u)) * k;\n      lim(f, l, l, 0.25 * max(0, -u) * k, 0.25 * max(0, -u) * k, f.a1, f.a2);\n      [f.hx, f.hy] = [bx, by];\n      if (f.m === 'swing' && !rd.rel && t >= rd.tr) {\n        // Let go at the top of the swing, aimed at where the catcher's hands will be.\n        const c = cpose(-B);\n        rd.rel = true;\n        Object.assign(f, { m: 'fly', Rx: f.x, Ry: f.y, Cx: c.hx + HL * sin(-0.8 * B), Cy: c.hy + HL * cos(-0.8 * B), phR: f.ph, pkR: f.l1, hx: null });\n      }\n      if (f.m === 'ride' && t >= rd.tg + 4 * PB) {\n        // Home on the board. The flyer who was waiting takes the bar next.\n        S.bar = 'hook';\n        rd.over = true;\n        [f.m, f.T, f.sx, f.sy] = ['land', 0, f.x, f.y];\n        const o = S.fl[1 - i];\n        if (o.m === 'wait') o.m = 'hold';\n        f.next = o.m === 'hold' ? 'wait' : 'hold';\n        newRound(S, t + 1.1, o.m === 'hold' ? 1 - i : i);\n      }\n      break;\n    }\n    case 'fly': {\n      const s = cl((t - rd.tr) / rd.tf, 0, 1), u = sm(0.04, 0.22, s) * (1 - sm(0.7, 0.9, s));\n      [f.x, f.y, f.ph] = [mix(f.Rx, f.Cx, s), mix(f.Ry, f.Cy, s) - 4 * rd.h * s * (1 - s), mix(f.phR, 0.8 * B - TAU * rd.turns, ease(s))];\n      const l = max(f.pkR * (1 - sm(0, 0.12, s)), 2.2 * u);\n      lim(f, l, l, 2.4 * u, 2.4 * u, 2 * u, 2 * u);\n      break;\n    }\n    case 'caught': {\n      const c = S.cp, tp = S.psi * 0.8;\n      [f.x, f.y, f.ph, f.fs, f.hx, f.hy] = [c.hx + HL * sin(tp), c.hy + HL * cos(tp), -tp, 1, c.hx, c.hy];\n      lim(f, 0.4 * sin(S.phc + 0.6), 0.4 * sin(S.phc + 0.6), 0, 0, 0, 0);\n      break;\n    }\n    case 'ret': {\n      // A half turn in the air and back to the fly bar, which comes out to meet her.\n      const s = cl(f.T / TR, 0, 1), [ex, ey] = barAt(rd.A);\n      [f.x, f.y, f.ph, f.fs] = [mix(f.sx, ex + HL * sin(rd.A), s), mix(f.sy, ey + HL * cos(rd.A), s) - 18 * s * (1 - s), mix(f.ph0, -rd.A, s), s \u003c 0.5 ? 1 : -1];\n      const a = sin(PI * s);\n      f.hx = null;\n      lim(f, 0.3 * a, 0.3 * a, 0, 0, 1.3 * a, -1.3 * a);\n      if (s >= 1) f.m = 'ride';\n      break;\n    }\n    case 'land': {\n      const k = sm(0, 0.35, f.T);\n      rest(f);\n      [f.x, f.y, f.ph, f.hx, f.hy] = [mix(f.sx, hbx - 1, k), mix(f.sy, BY - LEG, k), mix(f.ph, 0, k), hbx, hby];\n      if (f.T > 0.4) f.m = f.next;\n      break;\n    }\n    case 'drop': {\n      f.vy += G * d;\n      [f.x, f.y] = [f.x + f.vx * d, f.y + f.vy * d];\n      const s = cl(f.T / f.TF, 0, 1), u = sm(0.1, 0.3, s) * (1 - sm(0.62, 0.85, s));\n      f.ph = mix(f.ph0, -PI / 2 - TAU, ease(s));\n      lim(f, 2.2 * u, 2.2 * u, 2.4 * u, 2.4 * u, 0.6 + 1.4 * u, 0.6 + 1.4 * u).hx = null;\n      if (f.y >= netY(f.x) - 1) {\n        [f.m, f.T, nt.x] = ['net', 0, f.x];\n        S.pop = max(S.pop, 0.8);\n        burst(S, 6);\n      }\n      break;\n    }\n    case 'net': {\n      // Bouncing on her back: a stiff spring while she is in the net, a fall while she is out.\n      const n = max(1, ceil(d / 0.006)), h = d / n;\n      for (let j = 0; j \u003c n; j++) {\n        const pen = f.y - (netY(f.x) - 1);\n        f.vy += (G - (pen > 0 ? 420 * pen + 7 * f.vy : 0)) * h;\n        [f.y, f.x, f.vx] = [f.y + f.vy * h, f.x + f.vx * h, f.vx * (1 - 2.5 * h)];\n        if (pen > 0) [nt.s, nt.v] = [pen, f.vy];\n        else (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s += nt.v * h);\n      }\n      [nt.x, nt.hold, f.ph] = [f.x, true, -PI / 2];\n      lim(f, 0.6, 0.6, 0.4, 0.4, 1.6 + 0.5 * sin(f.T * 9), 1.6 - 0.5 * sin(f.T * 9));\n      if (f.T > 2.6) [f.m, f.T, f.sy] = ['up', 0, f.y];\n      break;\n    }\n    case 'up':\n    case 'tada':\n    case 'walk': {\n      nt.s += (1.5 - nt.s) * min(1, d * 8);\n      [nt.v, nt.x, nt.hold] = [0, f.x, true];\n      const top = netY(f.x) + nt.s - LEG - 0.6;\n      if (f.m === 'up') {\n        const k = sm(0, 0.5, f.T);\n        rest(f);\n        [f.ph, f.y] = [mix(-PI / 2, 0, k), mix(f.sy, top, k)];\n        if (f.T > 0.55) [f.m, f.T] = ['tada', 0];\n      } else if (f.m === 'tada') {\n        // Arms up for the crowd.\n        [f.ph, f.y] = [0, top];\n        lim(f, 0, 0, 0, 0, 0.55, -0.55);\n        if (f.T > 0.8) [f.m, f.T] = ['walk', 0];\n      } else {\n        // Bouncing along the net to the ladder.\n        const w = sin(f.T * 8);\n        [f.fs, f.x, f.y, f.ph] = [-1, f.x - 13 * d, top - 1.1 * abs(w), 0];\n        lim(f, 0.5 * w, -0.5 * w, 0, 0, PI - 0.5 * w, PI + 0.5 * w);\n        if (f.x \u003c= LX) [f.m, f.T] = ['climb', 0];\n      }\n      break;\n    }\n    case 'climb': {\n      // Up the rope ladder to the board.\n      const w = sin(f.T * 9);\n      [f.x, f.y, f.fs, f.ph, f.hx] = [LX, f.y - 12 * d, -1, 0, null];\n      const p = max(0, w), q = max(0, -w);\n      lim(f, 0.9 * p, 0.9 * q, 1.5 * p, 1.5 * q, 0.35 + 0.45 * w, 0.35 - 0.45 * w);\n      if (f.y \u003c= BY - LEG) [f.y, f.m] = [BY - LEG, 'wait'];\n      break;\n    }\n  }\n  if (d > 0) [f.vx0, f.vy0] = [(f.x - f.px) / d, (f.y - f.py) / d];\n  [f.px, f.py] = [f.x, f.y];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], rdt = cl(dt || 0, 0, 0.1), d = rdt * (cl(kv[1], 0.2, 3) / 2);\n  const u = cl(kv[0], 0, 1) * 3, pi = min(2, floor(u));\n  for (let j = 0; j \u003c 7; j++) for (let c = 0; c \u003c 3; c++) S.P[j][c] = mix(PAL[pi][j][c], PAL[pi + 1][j][c], u - pi);\n  [S.turns, S.hz] = [cl(round(kv[2]), 1, 3), 0.26 + 0.74 * cl(kv[3], 0, 1)];\n  if (!S.started) {\n    // Open mid-act: the first flyer is already out on her first swing.\n    [S.started, S.fl[0].m, S.fl[0].T] = [true, 'swing', 1];\n    newRound(S, -0.9, 0);\n    [S.A, S.phc] = [S.rd.A, S.ct.ph - OM * S.rd.tc];\n  }\n  const tp = S.t, t = (S.t += d), rd = S.rd;\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drum roll: this trick becomes the triple if she has not let go yet, else the next one.\n    S.drumB = 1;\n    if (!rd.rel && !rd.over) {\n      Object.assign(rd, { turns: 3, fin: true, tf: 1.5, h: 17, tc: rd.tr + 1.5 });\n      S.nextFin = false;\n      if (S.ct && S.ct.ev === 0) S.ct.t = rd.tc;\n    } else S.trip = true;\n  }\n  S.A = S.bar === 'hook' && !rd.over ? mix(rd.A0, rd.A, sm(rd.t0, rd.tg, t)) : rd.A;\n  S.th = S.bar === 'hook' ? -S.A : -S.A * cos(OM * (t - rd.tg));\n  // The catcher, phase-locked to the next thing he has to be on time for.\n  const ct = S.ct, rem = ct ? ct.t - tp : 0;\n  S.phc = ct ? (rem \u003c= d ? ct.ph : S.phc + ((ct.ph - S.phc) * d) / rem) : S.phc + OM * d;\n  S.cp = cpose((S.psi = -B * cos(S.phc)));\n  if (ct && rem \u003c= d) (S.ct = null), catcherEvent(S, ct.ev);\n  const nt = S.net, h = min(d, 0.02);\n  nt.hold = false;\n  S.fl.forEach((f, i) => stepFlyer(S, f, d, i));\n  // An empty net rings and settles.\n  if (!nt.hold) (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s = (nt.s + nt.v * h) * exp(-d * 3));\n  // After a drop the bar swings empty until it comes back to the board and the next flyer hooks it.\n  const R = S.rd;\n  const w = S.fl.findIndex((f) => f.m === 'wait');\n  if (R.over && S.bar === 'free' && w >= 0 && floor((t - R.tg) / PB) > floor((tp - R.tg) / PB)) [S.bar, S.fl[w].m] = ['hook', 'hold'], newRound(S, t + 0.7, w);\n  // Light cues: the house dims for the drum roll, more for a bigger trick, and comes up on the catch.\n  const r = S.rd, star = S.fl[S.star];\n  const roll = (!r.rel && t > r.tg + 0.5 * PB) || star.m === 'fly' || S.drumB > 0 ? 1 : 0;\n  S.drum += (roll - S.drum) * (1 - exp(-d * 4));\n  S.drumB = max(0, S.drumB - rdt * 0.4);\n  S.pop *= exp(-d * 0.9);\n  S.wash = (1 - S.drum * (0.3 + 0.22 * (r.turns - 1))) * (1 + 0.8 * S.pop);\n  // The follow spots: two on the flyer, the third on the catcher unless the trick is big.\n  const fin = S.fl.find((f) => ONNET[f.m]);\n  const tg = [fin || star, fin && t \u003c r.tg + 0.4 ? fin : star, S.drum > 0.5 && r.turns >= 2 ? star : { x: S.cp.x, y: S.cp.y + 3 }];\n  const k = 1 - exp(-d * 8);\n  S.sp.forEach((s, j) => {\n    const vx = (s.ax += (tg[j].x - s.ax) * k) - s.sx, vy = (s.ay += (tg[j].y - 1 - s.ay) * k) - s.sy, D = (s.D = sqrt(vx * vx + vy * vy));\n    [s.ux, s.uy] = [vx / D, vy / D];\n  });\n  // Camera flashes in the crowd.\n  if (rnd() \u003c rdt * 0.9) burst(S, 1);\n  for (const e of S.fx) e.a -= rdt * 9;\n  S.fx = S.fx.filter((e) => e.a > 0);\n}\n\n// A stroke lit by the light field, with optional sequin sparkle.\nfunction seg(S, ax, ay, bx, by, r, c, sp) {\n  const { F, LT } = S, dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6;\n  const x1 = min(W - 1, ceil(max(ax, bx) + r + 1)), y1 = min(H - 1, ceil(max(ay, by) + r + 1));\n  for (let y = max(0, floor(min(ay, by) - r - 1)); y \u003c= y1; y++)\n    for (let x = max(0, floor(min(ax, bx) - r - 1)); x \u003c= x1; x++) {\n      const t = cl(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1), ex = x - ax - dx * t, ey = y - ay - dy * t;\n      const a = cl(r + 0.5 - sqrt(ex * ex + ey * ey), 0, 1);\n      if (a \u003c= 0) continue;\n      const q = (y * W + x) * 3, s = sp ? 0.72 + 0.56 * rnd() : 1;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += (c[j] * LT[q + j] * s - F[q + j]) * a;\n    }\n}\n\nfunction glow(F, x, y, r, c, k) {\n  for (let yy = max(0, floor(y - r)); yy \u003c= min(H - 1, ceil(y + r)); yy++)\n    for (let xx = max(0, floor(x - r)); xx \u003c= min(W - 1, ceil(x + r)); xx++) {\n      const g = k * exp(-((xx - x) ** 2 + (yy - y) ** 2) / (0.25 * r * r)), q = (yy * W + xx) * 3;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += c[j] * g;\n    }\n}\n\n// A stick figure: hips at (x, y), body angle ph (0 is head up), facing fs.\nfunction fig(S, f, col) {\n  const bx = sin(f.ph), by = -cos(f.ph), nx = cos(f.ph) * f.fs, ny = sin(f.ph) * f.fs;\n  const dv = (a, l) => [(bx * cos(a) + nx * sin(a)) * l, (by * cos(a) + ny * sin(a)) * l];\n  const shx = f.x + bx * 3, shy = f.y + by * 3;\n  for (const [l, k] of [[f.l1, f.k1], [f.l2, f.k2]]) {\n    const [kx, ky] = dv(PI - l, 1.9), [fx, fy] = dv(PI - l + k, 1.9);\n    seg(S, f.x, f.y, f.x + kx, f.y + ky, 0.6, col, 1);\n    seg(S, f.x + kx, f.y + ky, f.x + kx + fx, f.y + ky + fy, 0.5, col, 1);\n  }\n  seg(S, f.x, f.y, shx, shy, 0.8, col, 1);\n  for (const a of [f.a1, f.a2]) {\n    const [ax, ay] = dv(a, 2.7);\n    seg(S, shx, shy, f.hx === null ? shx + ax : f.hx, f.hx === null ? shy + ay : f.hy, 0.42, SKIN, 0);\n  }\n  seg(S, shx + bx * 1.45, shy + by * 1.45, shx + bx * 1.55, shy + by * 1.55, 0.75, SKIN, 0);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { F, LT, CA, CI, AUD, ROW, POOL, P, wash, hz } = S, wc = P[0];\n  const hzA = hz * (0.7 - 0.22 * hz), halo = hz * hz * 0.18, hl = log(max(1, halo * 400));\n  const am = wc.map((v) => v * (0.12 + 0.12 * wash)), kc = 0.48 * 255 * wash, air = 9 * hz * wash;\n  const sp = S.sp.map((s, j) => [s.sx, s.sy, s.ux, s.uy, s.D, ...P[1 + j].map((v) => v / 255)]);\n  for (let y = 0; y \u003c H; y++) {\n    // The ring below the net glows in the house light behind the crowd.\n    const pb = POOL[y], ring = 50 * sm(117, 104, y) * sm(100, 104, y) * wash + air;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3, ci = CI[i] * kc;\n      let r = 4 + wc[0] * ring + CA[q] * wc[0] * ci, g = 4 + wc[1] * ring + CA[q + 1] * wc[1] * ci, b = 9 + wc[2] * ring + CA[q + 2] * wc[2] * ci;\n      let lr = 0, lg = 0, lb = 0;\n      const cv = CI[i] > 0.02 ? 0.9 * pb * sm(0, 0.3, CI[i]) * 255 : 0;\n      for (const s of sp) {\n        const vx = x - s[0], vy = y - s[1], al = vx * s[2] + vy * s[3], pp = abs(vx * s[3] - vy * s[2]), R = 0.8 + al * TA;\n        if (pp \u003c R) {\n          // Lit air along the beam, and past the flyer a pool where it lands on the canvas.\n          const p = sm(R, R * 0.45, pp), k = ((p * (al > s[4] ? 0.8 : 1) * 1.3) / (1 + (al / 110) ** 2)) * hzA * 255, c = cv > 0 && al > s[4] ? cv * p : 0;\n          (lr += s[5] * p), (lg += s[6] * p), (lb += s[7] * p);\n          (r += s[5] * (k + CA[q] * c)), (g += s[6] * (k + CA[q + 1] * c)), (b += s[7] * (k + CA[q + 2] * c));\n        }\n        // Haze scatters a wide glow round each beam.\n        if (pp \u003c (R + 9) * hl) {\n          const h = halo * exp(-pp / (R + 9)) * 255;\n          (r += s[5] * h), (g += s[6] * h), (b += s[7] * h);\n        }\n      }\n      (F[q] = r), (F[q + 1] = g), (F[q + 2] = b);\n      (LT[q] = min(1.25, lr * 1.2 + am[0])), (LT[q + 1] = min(1.25, lg * 1.2 + am[1])), (LT[q + 2] = min(1.25, lb * 1.2 + am[2]));\n    }\n  }\n  const t = S.t;\n  // The king pole, the ring of bulbs round the peak, which chase in a drum roll, and the bale ring.\n  seg(S, 32, 7, 32, 29, 0.7, STEEL, 0);\n  for (let j = 0; j \u003c 22; j++) {\n    const a = (TAU * j) / 22, x = 32 + 20 * sin(a), y = 6.5 + 5 * cos(a), ch = (((j / 22 - t * 0.9) % 1) + 1) % 1 \u003c 0.22 ? 1 : 0;\n    const v = (mix(0.75 + 0.15 * sin(t * 3 + j * 2.1), 0.3 + 0.9 * ch, S.drum) + 0.5 * S.pop) * (0.85 + 0.15 * cos(a));\n    glow(F, x, y, 3.2, [255, 196, 110], 0.42 * v);\n    const q = (round(y) * W + round(x)) * 3;\n    for (let k = 0; k \u003c 3; k++) F[q + k] += [200, 160, 90][k] * v;\n  }\n  seg(S, 30, 5, 34, 5, 1.1, [60, 62, 70], 0);\n  // The rig: a truss under the peak, guy lines, the uprights, the board and the ladder.\n  seg(S, 3, PFY - 2, 61, PFY - 2, 0.4, STEEL, 0);\n  seg(S, 3, PFY, 61, PFY, 0.35, STEEL, 0);\n  for (let x = 5; x \u003c 61; x += 4) seg(S, x, PFY - 2, x + 2, PFY, 0.25, STEEL, 0);\n  seg(S, 4, PFY - 2, 24, 7, 0.25, ROPE, 0);\n  seg(S, 60, PFY - 2, 40, 7, 0.25, ROPE, 0);\n  seg(S, 62, PFY - 2, 62, 103, 0.35, ROPE, 0);\n  seg(S, 0, PFY - 2, 0, BY, 0.35, ROPE, 0);\n  seg(S, 0, BY + 0.6, barAt(-S.rd.A)[0] + 0.4, BY + 0.6, 0.55, [190, 160, 120], 0);\n  seg(S, 1, BY + 1, 1, 97, 0.3, ROPE, 0);\n  seg(S, 4.2, BY + 1, 4.2, 97, 0.3, ROPE, 0);\n  for (let y = BY + 3; y \u003c 97; y += 3) seg(S, 1, y, 4.2, y, 0.25, ROPE, 0);\n  // The safety net, a sagging diamond mesh, dented where a flyer is in it.\n  const nt = S.net;\n  for (let x = 0; x \u003c W; x++) {\n    const dn = nt.s * exp(-(((x - nt.x) / 8) ** 2)), far = 94.5 + 1.2 * sin((PI * x) / 63) + 0.6 * dn, near = 103 + 2 * sin((PI * x) / 63) + dn;\n    for (let y = max(0, floor(far - 1)); y \u003c= min(H - 1, ceil(near + 1)); y++) {\n      const v = (y - far) / (near - far), fa = x * 0.34 + v * 3, fb = x * 0.34 - v * 3;\n      let ln = v > -0.06 && v \u003c 1.06 ? max(sm(0.3, 0.48, abs((fa % 1) - 0.5)), sm(0.3, 0.48, abs((((fb % 1) + 1) % 1) - 0.5))) : 0;\n      ln = max(ln, sm(0.9, 0.2, abs(y - far)), sm(0.9, 0.2, abs(y - near))) * 0.8;\n      const q = (y * W + x) * 3;\n      if (ln > 0) for (let j = 0; j \u003c 3; j++) F[q + j] += ([205, 196, 176][j] * LT[q + j] - F[q + j]) * ln;\n    }\n  }\n  // The fly bar on its ropes, the catcher's cradle, the catcher and the flyers.\n  const [bx, by] = barAt(S.th), c = S.cp;\n  for (const [px, py, x, y] of [[PFX, PFY, bx, by], [PCX, PCY, c.bx, c.by]]) {\n    seg(S, px - 1.2, py, x - 1.2, y, 0.28, ROPE, 0);\n    seg(S, px + 1.2, py, x + 1.2, y, 0.28, ROPE, 0);\n    seg(S, x - 1.8, y, x + 1.8, y, 0.45, BAR, 0);\n  }\n  fig(S, c, P[6]);\n  for (const f of S.fl) fig(S, f, P[f.c]);\n  // The crowd in front of it all, a dark sea, each head rimmed by the light behind it.\n  for (let i = W; i \u003c N; i++) {\n    const a = AUD[i];\n    if (a \u003c= 0) continue;\n    const q = i * 3, k = ROW[i], rim = k > ROW[i - W] ? (1 - 0.2 * k) * a : 0;\n    for (let j = 0; j \u003c 3; j++) F[q + j] += ((12 - 2.5 * k) * wc[j] - F[q + j]) * a + rim * (16 * wash * wc[j] + 60 * max(0, LT[q + j] - 0.3));\n  }\n  // Phones held up to film, and camera flashes.\n  for (const [x, y] of S.phones) if (x >= 0 && x \u003c W - 1) for (let j = 0; j \u003c 6; j++) F[(y * W + x) * 3 + j] += [70, 92, 130][j % 3];\n  for (const e of S.fx) glow(F, e.x, e.y, 2.2, [255, 250, 240], e.a * e.a * (1 - e.w));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower."},{"name":"Turns","min":1,"max":3,"about":"The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer."},{"name":"Haze","min":0,"max":1,"about":"How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels."}],"start":[0,2,1,0.06],"measures":{"motion":0.3174,"detail":0.0396,"edges":0.2107,"complexity":1.4663,"coverage":0.506,"colour":0.1821,"drift":0.1332},"knobResponse":[0.0514,0.1017,0.0609,0.161]},{"slug":"foam-lather","title":"Foam Lather","family":"cosmetic","round":31,"note":"거품 클렌저를 낸 거품 사백 개가 패널을 채우고, 작은 거품은 줄어 사라지고 벽이 터지며 둘이 합쳐져요. 위로 갈수록 마른 벌집이 되고 아래는 물기 머금은 둥근 거품이에요. K1 은 색상환을 다 돌고, 누르면 아래에서 고운 거품을 새로 쳐 올려요.","idea":"Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.","buttons":"K1 tap whips a fresh batch of fine lather in from the bottom.","code":"// ===== Patternflow pattern =====\n// Title:   Foam Lather\n// Family:  cosmetic\n// Idea:    Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after cleansing foam whipped into lather\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1\n//\n// Knob 1: Hue. The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white.\n// Knob 2: Speed. How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower.\n// Knob 3: Size. The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up.\n// Knob 4: Wetness. How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid.\n// Buttons: K1 tap whips a fresh batch of fine lather in from the bottom.\n\nconst W = 64, H = 128;\nconst { min, max, floor, sqrt, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: sky blue.\nconst H0 = 0.57;\n// The foam is worked out over a margin M past every edge of the panel, so\n// bubbles at the edge have all their neighbours and the edge is no wall.\nconst M = 6, EW = W + 2 * M, EH = H + 2 * M, EN = EW * EH;\n// At most NB bubbles, each with up to NN neighbours on record.\nconst NB = 1100, NN = 16;\n// Gas through the walls: a bubble's area changes by K*(n - 6) LED^2 a second\n// at Speed 2, n its number of neighbours (von Neumann's law for 2D foam). The\n// 6 is the mean count of the bubbles on the panel, which comes out at 5.9 to\n// 6.1, and the dry foam at the top runs 1.2 times as fast.\nconst K = 1.6;\n// The foam rises RISE rows a second; a batch of lather comes every BATCH\n// seconds and pushes it up BOOST rows a second faster for two seconds.\nconst RISE = 1.2, BATCH = 15, BOOST = 14;\n// Packing grid for the bubbles, CS LEDs a cell.\nconst CS = 6, GX = Math.ceil(EW / CS) + 1, GY = Math.ceil(EH / CS) + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(NB), y: F(NB), r: F(NB), a: F(NB), tone: F(NB), n: 0, dead: new Uint8Array(NB),\n    nb: new Int16Array(NB * NN), nc: new Uint8Array(NB), edge: new Uint8Array(NB), fresh: true,\n    l1: new Int16Array(EN), l2: new Int16Array(EN), p1: F(EN), p2: F(EN),\n    head: new Int16Array(GX * GY), next: new Int16Array(NB),\n    fl: F(32 * 8), nfl: 0, dr: F(96 * 5), ndr: 0,\n    T: 0, since: 0, boost: 0, acc: 0, rate: 1, size: 0, wet: 0.06, hue: 0, started: false,\n    col: F(18), buf: F(W * H * 3),\n  };\n}\n\n// The radius of fresh lather.\nconst fresh = (S) => 2.1 + 3.2 * S.size;\n\nfunction add(S, x, y, r) {\n  if (S.n >= NB) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.r[i] = r;\n  S.a[i] = PI * r * r;\n  S.tone[i] = rnd();\n  S.dead[i] = 0;\n  S.nc[i] = 0;\n  S.edge[i] = 1;\n}\n\n// Liquid fraction at height y: it drains, so the foam is wettest at the\n// bottom; Wetness raises it everywhere.\nfunction liquid(S, y) {\n  const b = cl(y / H, 0, 1), dr = b ** 4;\n  return cl(0.02 + 0.3 * S.wet + (0.2 + 0.1 * S.wet) * dr, 0, 0.4);\n}\n\n// The panel filled with lather that has already risen and coarsened: fine\n// bubbles at the bottom, two and a half times as big at the top.\nfunction fill(S) {\n  S.n = 0;\n  const f = fresh(S);\n  let y = EH - M - f;\n  while (y > -M - 2) {\n    const rr = f * (1 + 1.5 * cl((H - y) / H, 0, 1) ** 1.2);\n    for (let x = -M + rnd() * rr; x \u003c W + M; ) {\n      const r = rr * (0.65 + 0.7 * rnd());\n      add(S, x, y + (rnd() - 0.5) * rr * 0.6, r);\n      x += r * 1.75 + rr * 0.15;\n    }\n    y -= rr * 1.6;\n  }\n  for (let k = 0; k \u003c 60; k++) pack(S, 0.6);\n}\n\n// Bubbles push apart wherever their discs overlap, the small ones giving\n// way more, so the foam stays packed and its cells polygonal.\nfunction pack(S, k) {\n  const { x, y, r, a, head, next } = S;\n  head.fill(-1);\n  let rmax = 0;\n  for (let i = 0; i \u003c S.n; i++) {\n    const gx = cl(floor((x[i] + M) / CS), 0, GX - 1), gy = cl(floor((y[i] + M) / CS), 0, GY - 1), c = gy * GX + gx;\n    next[i] = head[c];\n    head[c] = i;\n    if (r[i] > rmax) rmax = r[i];\n  }\n  for (let i = 0; i \u003c S.n; i++) {\n    const xi = x[i], yi = y[i], ri = r[i], reach = Math.ceil((ri + rmax) / CS);\n    const gx = cl(floor((xi + M) / CS), 0, GX - 1), gy = cl(floor((yi + M) / CS), 0, GY - 1);\n    for (let cy = max(0, gy - reach); cy \u003c= min(GY - 1, gy + reach); cy++)\n      for (let cx = max(0, gx - reach); cx \u003c= min(GX - 1, gx + reach); cx++)\n        for (let j = head[cy * GX + cx]; j >= 0; j = next[j]) {\n          if (j \u003c= i) continue;\n          const dx = x[j] - xi, dy = y[j] - yi, want = (ri + r[j]) * 0.96, d2 = dx * dx + dy * dy;\n          if (d2 >= want * want) continue;\n          const d = sqrt(d2) + 1e-4, push = ((want - d) / d) * k, wi = a[j] / (a[i] + a[j]);\n          x[i] -= dx * push * wi;\n          y[i] -= dy * push * wi;\n          x[j] += dx * push * (1 - wi);\n          y[j] += dy * push * (1 - wi);\n        }\n  }\n  // Soft walls just past the margin at the sides and the bottom.\n  for (let i = 0; i \u003c S.n; i++) {\n    const lo = -M + r[i] * 0.4, hi = W + M - r[i] * 0.4, bot = H + M - r[i] * 0.6;\n    if (x[i] \u003c lo) x[i] += (lo - x[i]) * 0.5;\n    if (x[i] > hi) x[i] += (hi - x[i]) * 0.5;\n    if (y[i] > bot) y[i] += (bot - y[i]) * 0.5;\n  }\n}\n\n// Every LED of the margined grid takes the bubble whose power distance\n// d^2 - r^2 is least (a Laguerre cell, which is how a 2D foam of mixed\n// sizes divides the plane), and remembers the runner-up for the wall.\nfunction label(S) {\n  const { x, y, r, l1, l2, p1, p2 } = S;\n  l1.fill(-1);\n  l2.fill(-1);\n  p1.fill(1e9);\n  p2.fill(1e9);\n  for (let i = 0; i \u003c S.n; i++) {\n    const R = max(r[i] * 1.4 + 1.3, r[i] * 1.8), w = r[i] * r[i], cx = x[i] + M, cy = y[i] + M;\n    const x0 = max(0, floor(cx - R)), x1 = min(EW - 1, floor(cx + R)), y0 = max(0, floor(cy - R)), y1 = min(EH - 1, floor(cy + R));\n    for (let Y = y0; Y \u003c= y1; Y++) {\n      const dy = Y + 0.5 - cy, dy2 = dy * dy - w;\n      for (let X = x0, p = Y * EW + x0; X \u003c= x1; X++, p++) {\n        const dx = X + 0.5 - cx, pd = dx * dx + dy2;\n        if (pd \u003c p1[p]) {\n          p2[p] = p1[p];\n          l2[p] = l1[p];\n          p1[p] = pd;\n          l1[p] = i;\n        } else if (pd \u003c p2[p]) {\n          p2[p] = pd;\n          l2[p] = i;\n        }\n      }\n    }\n  }\n  // Who touches whom: two cells are neighbours where their LEDs meet.\n  const { nb, nc, edge } = S;\n  nc.fill(0, 0, S.n);\n  for (let i = 0; i \u003c S.n; i++) edge[i] = x[i] - r[i] * 1.6 \u003c -M + 1 || x[i] + r[i] * 1.6 > W + M - 1 || y[i] - r[i] * 1.6 \u003c -M + 1 || y[i] + r[i] * 1.6 > H + M - 1 ? 1 : 0;\n  for (let Y = 0; Y \u003c EH - 1; Y++)\n    for (let X = 0, p = Y * EW; X \u003c EW - 1; X++, p++) {\n      const a = l1[p];\n      if (a \u003c 0) continue;\n      const b = l1[p + 1], c = l1[p + EW];\n      if (b >= 0 && b !== a) link(nb, nc, a, b);\n      if (c >= 0 && c !== a && c !== b) link(nb, nc, a, c);\n    }\n  S.fresh = true;\n}\n\nfunction link(nb, nc, a, b) {\n  const oa = a * NN;\n  for (let k = 0; k \u003c nc[a]; k++) if (nb[oa + k] === b) return;\n  if (nc[a] \u003c NN) nb[oa + nc[a]++] = b;\n  const ob = b * NN;\n  for (let k = 0; k \u003c nc[b]; k++) if (nb[ob + k] === a) return;\n  if (nc[b] \u003c NN) nb[ob + nc[b]++] = a;\n}\n\n// A wall bursts: a flash along it and a few droplets thrown off, and the\n// two bubbles become one with both their areas.\nfunction burst(S, i, j) {\n  const { x, y, r, a } = S;\n  const dx = x[j] - x[i], dy = y[j] - y[i], d = sqrt(dx * dx + dy * dy) + 1e-4;\n  const t = (d * d + r[i] * r[i] - r[j] * r[j]) / (2 * d * d), mx = x[i] + dx * t, my = y[i] + dy * t;\n  const half = min(r[i], r[j]) * 0.75, ux = -dy / d, uy = dx / d;\n  for (let k = 0; k \u003c 3 && S.ndr \u003c 96; k++) {\n    const o = S.ndr++ * 5, s = (rnd() - 0.5) * 2, sp = 10 + 14 * rnd(), side = rnd() \u003c 0.5 ? -1 : 1;\n    S.dr[o] = mx + ux * half * s;\n    S.dr[o + 1] = my + uy * half * s;\n    S.dr[o + 2] = (dx / d) * sp * side + ux * 4 * s;\n    S.dr[o + 3] = (dy / d) * sp * side + uy * 4 * s - 6;\n    S.dr[o + 4] = 1;\n  }\n  const A = a[i] + a[j];\n  x[i] = (x[i] * a[i] + x[j] * a[j]) / A;\n  y[i] = (y[i] * a[i] + y[j] * a[j]) / A;\n  a[i] = A;\n  r[i] = sqrt(A / PI);\n  S.dead[j] = 1;\n  if (S.nfl \u003c 32) {\n    const o = S.nfl++ * 8, f = S.fl;\n    f[o] = mx - ux * half;\n    f[o + 1] = my - uy * half;\n    f[o + 2] = mx + ux * half;\n    f[o + 3] = my + uy * half;\n    f[o + 4] = 1;\n    f[o + 5] = r[i];\n    f[o + 6] = x[i];\n    f[o + 7] = y[i];\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= BATCH) (S.since = 0), (S.boost = 2);\n  const { x, y, r, a, nb, nc, edge, dead } = S;\n  const n = S.n;\n  if (S.fresh) {\n    S.fresh = false;\n    // Gas runs from bubbles with fewer than six sides to those with more.\n    // The mean is taken over the bubbles away from the margin's edge, and\n    // those at the edge keep their size.\n    let sum = 0, cnt = 0;\n    for (let i = 0; i \u003c n; i++) if (!edge[i]) (sum += nc[i]), cnt++;\n    const mean = cnt ? sum / cnt : 6;\n    for (let i = 0; i \u003c n; i++) {\n      if (edge[i] || dead[i]) continue;\n      // A dry foam coarsens faster: its walls are thinner.\n      const dry = 1.3 - 2.5 * liquid(S, y[i]);\n      a[i] += K * (nc[i] - mean) * dry * st;\n      if (a[i] \u003c 2.5) {\n        dead[i] = 1;\n        continue;\n      }\n      r[i] = sqrt(a[i] / PI);\n    }\n    // Walls burst more often the drier and bigger the bubbles.\n    for (let i = 0; i \u003c n; i++) {\n      if (dead[i] || edge[i] || !nc[i]) continue;\n      const dry = cl(1 - liquid(S, y[i]) / 0.2, 0, 1);\n      if (rnd() > st * 0.014 * dry * (r[i] / 3) ** 2) continue;\n      const j = nb[i * NN + floor(rnd() * nc[i])];\n      if (j >= 0 && j \u003c n && !dead[j] && !edge[j]) burst(S, i, j);\n    }\n  }\n  // The foam rises; whatever leaves the top is gone.\n  const up = (RISE + (S.boost > 0 ? BOOST * sm(0, 0.4, S.boost) : 0)) * st;\n  S.boost = max(0, S.boost - st);\n  for (let i = 0; i \u003c n; i++) {\n    y[i] -= up;\n    if (y[i] + r[i] \u003c -M) dead[i] = 1;\n  }\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    if (dead[i]) continue;\n    if (k !== i) {\n      x[k] = x[i];\n      y[k] = y[i];\n      r[k] = r[i];\n      a[k] = a[i];\n      S.tone[k] = S.tone[i];\n    }\n    dead[k] = 0;\n    k++;\n  }\n  S.n = k;\n  // New lather comes in under the bottom edge as fast as the foam rises, a\n  // fresh batch finer still.\n  const f = fresh(S) * (S.boost > 0 ? 0.85 : 1);\n  S.acc += up * EW;\n  while (S.acc > 0 && S.n \u003c NB) {\n    const rr = f * (0.7 + 0.6 * rnd());\n    S.acc -= PI * rr * rr * 0.95;\n    add(S, -M + rnd() * EW, H + M - rr * (0.6 + rnd()), rr);\n  }\n  pack(S, 0.7);\n  // Flashes fade in a third of a second; droplets fly and fall.\n  for (let i = S.nfl - 1; i >= 0; i--) {\n    const o = i * 8;\n    S.fl[o + 4] -= st * 3;\n    if (S.fl[o + 4] \u003c= 0) {\n      const l = --S.nfl * 8;\n      for (let c = 0; c \u003c 8; c++) S.fl[o + c] = S.fl[l + c];\n    }\n  }\n  for (let i = S.ndr - 1; i >= 0; i--) {\n    const o = i * 5;\n    S.dr[o] += S.dr[o + 2] * st;\n    S.dr[o + 1] += S.dr[o + 3] * st;\n    S.dr[o + 3] += 60 * st;\n    S.dr[o + 4] -= st * 3;\n    if (S.dr[o + 4] \u003c= 0) {\n      const l = --S.ndr * 5;\n      for (let c = 0; c \u003c 5; c++) S.dr[o + c] = S.dr[l + c];\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.size = cl(k[2], 0, 1);\n  S.wet = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    fill(S);\n    for (let i = 0; i \u003c 30; i++) {\n      label(S);\n      step(S, 1 / 30);\n    }\n    S.since = 6;\n  }\n  if (input.btnPressed && input.btnPressed[0]) (S.boost = 2), (S.since = 0);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  label(S);\n  const { x, y, r, l1, l2, p1, p2, col, buf, tone } = S;\n  const hue = H0 + S.hue;\n  // Inside a bubble, its rim, the wall, the liquid between bubbles. Orange\n  // and yellow kept dim read brown and olive on LEDs, so near those hues\n  // the inside of a bubble is lit brighter.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.17) / 0.17);\n  hsv(hue, 0.5 - 0.12 * am, 0.52 + 0.34 * am, col, 0);\n  hsv(hue - 0.02, 0.4 - 0.05 * am, 0.85 + 0.13 * am, col, 3);\n  hsv(hue + 0.03, 0.12, 0.98, col, 6);\n  hsv(hue, 0.3, 0.72 + 0.16 * am, col, 9);\n  for (let Y = 0; Y \u003c H; Y++) {\n    const phi = liquid(S, Y), sd = 0.88 + 0.9 * (1 - min(1, phi / 0.36)) ** 2;\n    for (let X = 0; X \u003c W; X++) {\n      const p = (Y + M) * EW + X + M, i = l1[p], q = (Y * W + X) * 3;\n      if (i \u003c 0) {\n        buf[q] = col[9];\n        buf[q + 1] = col[10];\n        buf[q + 2] = col[11];\n        continue;\n      }\n      const px = X + 0.5, py = Y + 0.5, dx = px - x[i], dy = py - y[i], d = sqrt(dx * dx + dy * dy);\n      const j = l2[p];\n      let dw = 9;\n      if (j >= 0) {\n        const ex = x[j] - x[i], ey = y[j] - y[i];\n        dw = (p2[p] - p1[p]) / (2 * sqrt(ex * ex + ey * ey) + 1e-4);\n      }\n      // A bubble is its cell clipped to a disc: in a dry foam the disc\n      // covers the cell and the bubble is a polygon; in a wet one it is\n      // round, sitting in liquid that fills the corners between bubbles.\n      const ed = r[i] * sd - d, e = min(dw, ed);\n      let R, G, B;\n      if (e \u003c 0) {\n        // Liquid: milky, brightest against the bubbles it wets.\n        const k = exp(e * 0.9) * 0.35;\n        R = col[9] + (col[6] - col[9]) * k;\n        G = col[10] + (col[7] - col[10]) * k;\n        B = col[11] + (col[8] - col[11]) * k;\n      } else {\n        // The dome: dim through its middle, brighter round its rim as the\n        // film turns edge on and low on the right where the light that came\n        // in through it gathers, a thin bright wall, and a point of light up\n        // and to the left.\n        const u = d / (d + e + 1e-4), rr = r[i], gx = dx - rr * 0.3, gy = dy - rr * 0.34;\n        const g2 = 1 - (gx * gx + gy * gy) / (1.6 * rr * rr), lens = g2 > 0 ? g2 * g2 * 0.45 : 0, rim = max(u * u * u, lens);\n        const v = 0.85 + 0.3 * tone[i];\n        R = (col[0] * (1 - rim) + col[3] * rim) * v;\n        G = (col[1] * (1 - rim) + col[4] * rim) * v;\n        B = (col[2] * (1 - rim) + col[5] * rim) * v;\n        const s = 0.32 + 0.1 * rr, hx = dx + rr * 0.36, hy = dy + rr * 0.4, h2 = (hx * hx + hy * hy) / (2 * s * s);\n        const h5 = 1 - h2 * 0.2, hl = h5 > 0 ? h5 * h5 * h5 * h5 * h5 * 255 : 0;\n        // The wall, about 1.3 LEDs across: (1 - (e/1.3)^2)^2.\n        const w2 = 1 - e * e * 0.6, wl = w2 > 0 ? w2 * w2 * (ed \u003c dw ? 0.75 : 1) : 0;\n        R += (col[6] - R) * wl + hl;\n        G += (col[7] - G) * wl + hl;\n        B += (col[8] - B) * wl + hl;\n      }\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  }\n  // A burst wall flashes white along its length, and for a moment the new\n  // bubble it leaves is lit through.\n  for (let f = 0; f \u003c S.nfl; f++) {\n    const o = f * 8, fl = S.fl, life = fl[o + 4], len = Math.hypot(fl[o + 2] - fl[o], fl[o + 3] - fl[o + 1]);\n    const steps = max(2, Math.ceil(len * 2)), lf = life * life;\n    for (let k = 0; k \u003c= steps; k++) {\n      const t = k / steps;\n      spot(buf, fl[o] + (fl[o + 2] - fl[o]) * t, fl[o + 1] + (fl[o + 3] - fl[o + 1]) * t, lf * 200 * (1 - 0.6 * abs(t - 0.5)));\n    }\n    const rm = fl[o + 5] * 0.85, cx = fl[o + 6], cy = fl[o + 7];\n    for (let Y = max(0, floor(cy - rm)); Y \u003c= min(H - 1, floor(cy + rm)); Y++)\n      for (let X = max(0, floor(cx - rm)); X \u003c= min(W - 1, floor(cx + rm)); X++) {\n        const d2 = ((X + 0.5 - cx) ** 2 + (Y + 0.5 - cy) ** 2) / (rm * rm);\n        if (d2 >= 1) continue;\n        const w = (1 - d2) * lf * 0.7, q = (Y * W + X) * 3;\n        buf[q] += (col[6] - buf[q] * 0.5) * w;\n        buf[q + 1] += (col[7] - buf[q + 1] * 0.5) * w;\n        buf[q + 2] += (col[8] - buf[q + 2] * 0.5) * w;\n      }\n  }\n  for (let k = 0; k \u003c S.ndr; k++) {\n    const o = k * 5;\n    spot(buf, S.dr[o], S.dr[o + 1], S.dr[o + 4] * 200);\n  }\n  for (let p = 0, Y = 0; Y \u003c H; Y++) for (let X = 0; X \u003c W; X++, p += 3) display.setPixel(X, Y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// White light v shared over the four LEDs round x, y.\nfunction spot(buf, x, y, v) {\n  const X = floor(x - 0.5), Y = floor(y - 0.5), fx = x - 0.5 - X, fy = y - 0.5 - Y;\n  for (let k = 0; k \u003c 4; k++) {\n    const xx = X + (k & 1), yy = Y + (k >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const w = (k & 1 ? fx : 1 - fx) * (k >> 1 ? fy : 1 - fy) * v, q = (yy * W + xx) * 3;\n    buf[q] += w;\n    buf[q + 1] += w;\n    buf[q + 2] += w;\n  }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-foam-lather","type":"code","name":"foam-lather","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Foam Lather\n// Family:  cosmetic\n// Idea:    Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after cleansing foam whipped into lather\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1\n//\n// Knob 1: Hue. The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white.\n// Knob 2: Speed. How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower.\n// Knob 3: Size. The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up.\n// Knob 4: Wetness. How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid.\n// Buttons: K1 tap whips a fresh batch of fine lather in from the bottom.\n\nconst W = 64, H = 128;\nconst { min, max, floor, sqrt, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: sky blue.\nconst H0 = 0.57;\n// The foam is worked out over a margin M past every edge of the panel, so\n// bubbles at the edge have all their neighbours and the edge is no wall.\nconst M = 6, EW = W + 2 * M, EH = H + 2 * M, EN = EW * EH;\n// At most NB bubbles, each with up to NN neighbours on record.\nconst NB = 1100, NN = 16;\n// Gas through the walls: a bubble's area changes by K*(n - 6) LED^2 a second\n// at Speed 2, n its number of neighbours (von Neumann's law for 2D foam). The\n// 6 is the mean count of the bubbles on the panel, which comes out at 5.9 to\n// 6.1, and the dry foam at the top runs 1.2 times as fast.\nconst K = 1.6;\n// The foam rises RISE rows a second; a batch of lather comes every BATCH\n// seconds and pushes it up BOOST rows a second faster for two seconds.\nconst RISE = 1.2, BATCH = 15, BOOST = 14;\n// Packing grid for the bubbles, CS LEDs a cell.\nconst CS = 6, GX = Math.ceil(EW / CS) + 1, GY = Math.ceil(EH / CS) + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(NB), y: F(NB), r: F(NB), a: F(NB), tone: F(NB), n: 0, dead: new Uint8Array(NB),\n    nb: new Int16Array(NB * NN), nc: new Uint8Array(NB), edge: new Uint8Array(NB), fresh: true,\n    l1: new Int16Array(EN), l2: new Int16Array(EN), p1: F(EN), p2: F(EN),\n    head: new Int16Array(GX * GY), next: new Int16Array(NB),\n    fl: F(32 * 8), nfl: 0, dr: F(96 * 5), ndr: 0,\n    T: 0, since: 0, boost: 0, acc: 0, rate: 1, size: 0, wet: 0.06, hue: 0, started: false,\n    col: F(18), buf: F(W * H * 3),\n  };\n}\n\n// The radius of fresh lather.\nconst fresh = (S) => 2.1 + 3.2 * S.size;\n\nfunction add(S, x, y, r) {\n  if (S.n >= NB) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.r[i] = r;\n  S.a[i] = PI * r * r;\n  S.tone[i] = rnd();\n  S.dead[i] = 0;\n  S.nc[i] = 0;\n  S.edge[i] = 1;\n}\n\n// Liquid fraction at height y: it drains, so the foam is wettest at the\n// bottom; Wetness raises it everywhere.\nfunction liquid(S, y) {\n  const b = cl(y / H, 0, 1), dr = b ** 4;\n  return cl(0.02 + 0.3 * S.wet + (0.2 + 0.1 * S.wet) * dr, 0, 0.4);\n}\n\n// The panel filled with lather that has already risen and coarsened: fine\n// bubbles at the bottom, two and a half times as big at the top.\nfunction fill(S) {\n  S.n = 0;\n  const f = fresh(S);\n  let y = EH - M - f;\n  while (y > -M - 2) {\n    const rr = f * (1 + 1.5 * cl((H - y) / H, 0, 1) ** 1.2);\n    for (let x = -M + rnd() * rr; x \u003c W + M; ) {\n      const r = rr * (0.65 + 0.7 * rnd());\n      add(S, x, y + (rnd() - 0.5) * rr * 0.6, r);\n      x += r * 1.75 + rr * 0.15;\n    }\n    y -= rr * 1.6;\n  }\n  for (let k = 0; k \u003c 60; k++) pack(S, 0.6);\n}\n\n// Bubbles push apart wherever their discs overlap, the small ones giving\n// way more, so the foam stays packed and its cells polygonal.\nfunction pack(S, k) {\n  const { x, y, r, a, head, next } = S;\n  head.fill(-1);\n  let rmax = 0;\n  for (let i = 0; i \u003c S.n; i++) {\n    const gx = cl(floor((x[i] + M) / CS), 0, GX - 1), gy = cl(floor((y[i] + M) / CS), 0, GY - 1), c = gy * GX + gx;\n    next[i] = head[c];\n    head[c] = i;\n    if (r[i] > rmax) rmax = r[i];\n  }\n  for (let i = 0; i \u003c S.n; i++) {\n    const xi = x[i], yi = y[i], ri = r[i], reach = Math.ceil((ri + rmax) / CS);\n    const gx = cl(floor((xi + M) / CS), 0, GX - 1), gy = cl(floor((yi + M) / CS), 0, GY - 1);\n    for (let cy = max(0, gy - reach); cy \u003c= min(GY - 1, gy + reach); cy++)\n      for (let cx = max(0, gx - reach); cx \u003c= min(GX - 1, gx + reach); cx++)\n        for (let j = head[cy * GX + cx]; j >= 0; j = next[j]) {\n          if (j \u003c= i) continue;\n          const dx = x[j] - xi, dy = y[j] - yi, want = (ri + r[j]) * 0.96, d2 = dx * dx + dy * dy;\n          if (d2 >= want * want) continue;\n          const d = sqrt(d2) + 1e-4, push = ((want - d) / d) * k, wi = a[j] / (a[i] + a[j]);\n          x[i] -= dx * push * wi;\n          y[i] -= dy * push * wi;\n          x[j] += dx * push * (1 - wi);\n          y[j] += dy * push * (1 - wi);\n        }\n  }\n  // Soft walls just past the margin at the sides and the bottom.\n  for (let i = 0; i \u003c S.n; i++) {\n    const lo = -M + r[i] * 0.4, hi = W + M - r[i] * 0.4, bot = H + M - r[i] * 0.6;\n    if (x[i] \u003c lo) x[i] += (lo - x[i]) * 0.5;\n    if (x[i] > hi) x[i] += (hi - x[i]) * 0.5;\n    if (y[i] > bot) y[i] += (bot - y[i]) * 0.5;\n  }\n}\n\n// Every LED of the margined grid takes the bubble whose power distance\n// d^2 - r^2 is least (a Laguerre cell, which is how a 2D foam of mixed\n// sizes divides the plane), and remembers the runner-up for the wall.\nfunction label(S) {\n  const { x, y, r, l1, l2, p1, p2 } = S;\n  l1.fill(-1);\n  l2.fill(-1);\n  p1.fill(1e9);\n  p2.fill(1e9);\n  for (let i = 0; i \u003c S.n; i++) {\n    const R = max(r[i] * 1.4 + 1.3, r[i] * 1.8), w = r[i] * r[i], cx = x[i] + M, cy = y[i] + M;\n    const x0 = max(0, floor(cx - R)), x1 = min(EW - 1, floor(cx + R)), y0 = max(0, floor(cy - R)), y1 = min(EH - 1, floor(cy + R));\n    for (let Y = y0; Y \u003c= y1; Y++) {\n      const dy = Y + 0.5 - cy, dy2 = dy * dy - w;\n      for (let X = x0, p = Y * EW + x0; X \u003c= x1; X++, p++) {\n        const dx = X + 0.5 - cx, pd = dx * dx + dy2;\n        if (pd \u003c p1[p]) {\n          p2[p] = p1[p];\n          l2[p] = l1[p];\n          p1[p] = pd;\n          l1[p] = i;\n        } else if (pd \u003c p2[p]) {\n          p2[p] = pd;\n          l2[p] = i;\n        }\n      }\n    }\n  }\n  // Who touches whom: two cells are neighbours where their LEDs meet.\n  const { nb, nc, edge } = S;\n  nc.fill(0, 0, S.n);\n  for (let i = 0; i \u003c S.n; i++) edge[i] = x[i] - r[i] * 1.6 \u003c -M + 1 || x[i] + r[i] * 1.6 > W + M - 1 || y[i] - r[i] * 1.6 \u003c -M + 1 || y[i] + r[i] * 1.6 > H + M - 1 ? 1 : 0;\n  for (let Y = 0; Y \u003c EH - 1; Y++)\n    for (let X = 0, p = Y * EW; X \u003c EW - 1; X++, p++) {\n      const a = l1[p];\n      if (a \u003c 0) continue;\n      const b = l1[p + 1], c = l1[p + EW];\n      if (b >= 0 && b !== a) link(nb, nc, a, b);\n      if (c >= 0 && c !== a && c !== b) link(nb, nc, a, c);\n    }\n  S.fresh = true;\n}\n\nfunction link(nb, nc, a, b) {\n  const oa = a * NN;\n  for (let k = 0; k \u003c nc[a]; k++) if (nb[oa + k] === b) return;\n  if (nc[a] \u003c NN) nb[oa + nc[a]++] = b;\n  const ob = b * NN;\n  for (let k = 0; k \u003c nc[b]; k++) if (nb[ob + k] === a) return;\n  if (nc[b] \u003c NN) nb[ob + nc[b]++] = a;\n}\n\n// A wall bursts: a flash along it and a few droplets thrown off, and the\n// two bubbles become one with both their areas.\nfunction burst(S, i, j) {\n  const { x, y, r, a } = S;\n  const dx = x[j] - x[i], dy = y[j] - y[i], d = sqrt(dx * dx + dy * dy) + 1e-4;\n  const t = (d * d + r[i] * r[i] - r[j] * r[j]) / (2 * d * d), mx = x[i] + dx * t, my = y[i] + dy * t;\n  const half = min(r[i], r[j]) * 0.75, ux = -dy / d, uy = dx / d;\n  for (let k = 0; k \u003c 3 && S.ndr \u003c 96; k++) {\n    const o = S.ndr++ * 5, s = (rnd() - 0.5) * 2, sp = 10 + 14 * rnd(), side = rnd() \u003c 0.5 ? -1 : 1;\n    S.dr[o] = mx + ux * half * s;\n    S.dr[o + 1] = my + uy * half * s;\n    S.dr[o + 2] = (dx / d) * sp * side + ux * 4 * s;\n    S.dr[o + 3] = (dy / d) * sp * side + uy * 4 * s - 6;\n    S.dr[o + 4] = 1;\n  }\n  const A = a[i] + a[j];\n  x[i] = (x[i] * a[i] + x[j] * a[j]) / A;\n  y[i] = (y[i] * a[i] + y[j] * a[j]) / A;\n  a[i] = A;\n  r[i] = sqrt(A / PI);\n  S.dead[j] = 1;\n  if (S.nfl \u003c 32) {\n    const o = S.nfl++ * 8, f = S.fl;\n    f[o] = mx - ux * half;\n    f[o + 1] = my - uy * half;\n    f[o + 2] = mx + ux * half;\n    f[o + 3] = my + uy * half;\n    f[o + 4] = 1;\n    f[o + 5] = r[i];\n    f[o + 6] = x[i];\n    f[o + 7] = y[i];\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= BATCH) (S.since = 0), (S.boost = 2);\n  const { x, y, r, a, nb, nc, edge, dead } = S;\n  const n = S.n;\n  if (S.fresh) {\n    S.fresh = false;\n    // Gas runs from bubbles with fewer than six sides to those with more.\n    // The mean is taken over the bubbles away from the margin's edge, and\n    // those at the edge keep their size.\n    let sum = 0, cnt = 0;\n    for (let i = 0; i \u003c n; i++) if (!edge[i]) (sum += nc[i]), cnt++;\n    const mean = cnt ? sum / cnt : 6;\n    for (let i = 0; i \u003c n; i++) {\n      if (edge[i] || dead[i]) continue;\n      // A dry foam coarsens faster: its walls are thinner.\n      const dry = 1.3 - 2.5 * liquid(S, y[i]);\n      a[i] += K * (nc[i] - mean) * dry * st;\n      if (a[i] \u003c 2.5) {\n        dead[i] = 1;\n        continue;\n      }\n      r[i] = sqrt(a[i] / PI);\n    }\n    // Walls burst more often the drier and bigger the bubbles.\n    for (let i = 0; i \u003c n; i++) {\n      if (dead[i] || edge[i] || !nc[i]) continue;\n      const dry = cl(1 - liquid(S, y[i]) / 0.2, 0, 1);\n      if (rnd() > st * 0.014 * dry * (r[i] / 3) ** 2) continue;\n      const j = nb[i * NN + floor(rnd() * nc[i])];\n      if (j >= 0 && j \u003c n && !dead[j] && !edge[j]) burst(S, i, j);\n    }\n  }\n  // The foam rises; whatever leaves the top is gone.\n  const up = (RISE + (S.boost > 0 ? BOOST * sm(0, 0.4, S.boost) : 0)) * st;\n  S.boost = max(0, S.boost - st);\n  for (let i = 0; i \u003c n; i++) {\n    y[i] -= up;\n    if (y[i] + r[i] \u003c -M) dead[i] = 1;\n  }\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    if (dead[i]) continue;\n    if (k !== i) {\n      x[k] = x[i];\n      y[k] = y[i];\n      r[k] = r[i];\n      a[k] = a[i];\n      S.tone[k] = S.tone[i];\n    }\n    dead[k] = 0;\n    k++;\n  }\n  S.n = k;\n  // New lather comes in under the bottom edge as fast as the foam rises, a\n  // fresh batch finer still.\n  const f = fresh(S) * (S.boost > 0 ? 0.85 : 1);\n  S.acc += up * EW;\n  while (S.acc > 0 && S.n \u003c NB) {\n    const rr = f * (0.7 + 0.6 * rnd());\n    S.acc -= PI * rr * rr * 0.95;\n    add(S, -M + rnd() * EW, H + M - rr * (0.6 + rnd()), rr);\n  }\n  pack(S, 0.7);\n  // Flashes fade in a third of a second; droplets fly and fall.\n  for (let i = S.nfl - 1; i >= 0; i--) {\n    const o = i * 8;\n    S.fl[o + 4] -= st * 3;\n    if (S.fl[o + 4] \u003c= 0) {\n      const l = --S.nfl * 8;\n      for (let c = 0; c \u003c 8; c++) S.fl[o + c] = S.fl[l + c];\n    }\n  }\n  for (let i = S.ndr - 1; i >= 0; i--) {\n    const o = i * 5;\n    S.dr[o] += S.dr[o + 2] * st;\n    S.dr[o + 1] += S.dr[o + 3] * st;\n    S.dr[o + 3] += 60 * st;\n    S.dr[o + 4] -= st * 3;\n    if (S.dr[o + 4] \u003c= 0) {\n      const l = --S.ndr * 5;\n      for (let c = 0; c \u003c 5; c++) S.dr[o + c] = S.dr[l + c];\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.size = cl(k[2], 0, 1);\n  S.wet = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    fill(S);\n    for (let i = 0; i \u003c 30; i++) {\n      label(S);\n      step(S, 1 / 30);\n    }\n    S.since = 6;\n  }\n  if (input.btnPressed && input.btnPressed[0]) (S.boost = 2), (S.since = 0);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  label(S);\n  const { x, y, r, l1, l2, p1, p2, col, buf, tone } = S;\n  const hue = H0 + S.hue;\n  // Inside a bubble, its rim, the wall, the liquid between bubbles. Orange\n  // and yellow kept dim read brown and olive on LEDs, so near those hues\n  // the inside of a bubble is lit brighter.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.17) / 0.17);\n  hsv(hue, 0.5 - 0.12 * am, 0.52 + 0.34 * am, col, 0);\n  hsv(hue - 0.02, 0.4 - 0.05 * am, 0.85 + 0.13 * am, col, 3);\n  hsv(hue + 0.03, 0.12, 0.98, col, 6);\n  hsv(hue, 0.3, 0.72 + 0.16 * am, col, 9);\n  for (let Y = 0; Y \u003c H; Y++) {\n    const phi = liquid(S, Y), sd = 0.88 + 0.9 * (1 - min(1, phi / 0.36)) ** 2;\n    for (let X = 0; X \u003c W; X++) {\n      const p = (Y + M) * EW + X + M, i = l1[p], q = (Y * W + X) * 3;\n      if (i \u003c 0) {\n        buf[q] = col[9];\n        buf[q + 1] = col[10];\n        buf[q + 2] = col[11];\n        continue;\n      }\n      const px = X + 0.5, py = Y + 0.5, dx = px - x[i], dy = py - y[i], d = sqrt(dx * dx + dy * dy);\n      const j = l2[p];\n      let dw = 9;\n      if (j >= 0) {\n        const ex = x[j] - x[i], ey = y[j] - y[i];\n        dw = (p2[p] - p1[p]) / (2 * sqrt(ex * ex + ey * ey) + 1e-4);\n      }\n      // A bubble is its cell clipped to a disc: in a dry foam the disc\n      // covers the cell and the bubble is a polygon; in a wet one it is\n      // round, sitting in liquid that fills the corners between bubbles.\n      const ed = r[i] * sd - d, e = min(dw, ed);\n      let R, G, B;\n      if (e \u003c 0) {\n        // Liquid: milky, brightest against the bubbles it wets.\n        const k = exp(e * 0.9) * 0.35;\n        R = col[9] + (col[6] - col[9]) * k;\n        G = col[10] + (col[7] - col[10]) * k;\n        B = col[11] + (col[8] - col[11]) * k;\n      } else {\n        // The dome: dim through its middle, brighter round its rim as the\n        // film turns edge on and low on the right where the light that came\n        // in through it gathers, a thin bright wall, and a point of light up\n        // and to the left.\n        const u = d / (d + e + 1e-4), rr = r[i], gx = dx - rr * 0.3, gy = dy - rr * 0.34;\n        const g2 = 1 - (gx * gx + gy * gy) / (1.6 * rr * rr), lens = g2 > 0 ? g2 * g2 * 0.45 : 0, rim = max(u * u * u, lens);\n        const v = 0.85 + 0.3 * tone[i];\n        R = (col[0] * (1 - rim) + col[3] * rim) * v;\n        G = (col[1] * (1 - rim) + col[4] * rim) * v;\n        B = (col[2] * (1 - rim) + col[5] * rim) * v;\n        const s = 0.32 + 0.1 * rr, hx = dx + rr * 0.36, hy = dy + rr * 0.4, h2 = (hx * hx + hy * hy) / (2 * s * s);\n        const h5 = 1 - h2 * 0.2, hl = h5 > 0 ? h5 * h5 * h5 * h5 * h5 * 255 : 0;\n        // The wall, about 1.3 LEDs across: (1 - (e/1.3)^2)^2.\n        const w2 = 1 - e * e * 0.6, wl = w2 > 0 ? w2 * w2 * (ed \u003c dw ? 0.75 : 1) : 0;\n        R += (col[6] - R) * wl + hl;\n        G += (col[7] - G) * wl + hl;\n        B += (col[8] - B) * wl + hl;\n      }\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  }\n  // A burst wall flashes white along its length, and for a moment the new\n  // bubble it leaves is lit through.\n  for (let f = 0; f \u003c S.nfl; f++) {\n    const o = f * 8, fl = S.fl, life = fl[o + 4], len = Math.hypot(fl[o + 2] - fl[o], fl[o + 3] - fl[o + 1]);\n    const steps = max(2, Math.ceil(len * 2)), lf = life * life;\n    for (let k = 0; k \u003c= steps; k++) {\n      const t = k / steps;\n      spot(buf, fl[o] + (fl[o + 2] - fl[o]) * t, fl[o + 1] + (fl[o + 3] - fl[o + 1]) * t, lf * 200 * (1 - 0.6 * abs(t - 0.5)));\n    }\n    const rm = fl[o + 5] * 0.85, cx = fl[o + 6], cy = fl[o + 7];\n    for (let Y = max(0, floor(cy - rm)); Y \u003c= min(H - 1, floor(cy + rm)); Y++)\n      for (let X = max(0, floor(cx - rm)); X \u003c= min(W - 1, floor(cx + rm)); X++) {\n        const d2 = ((X + 0.5 - cx) ** 2 + (Y + 0.5 - cy) ** 2) / (rm * rm);\n        if (d2 >= 1) continue;\n        const w = (1 - d2) * lf * 0.7, q = (Y * W + X) * 3;\n        buf[q] += (col[6] - buf[q] * 0.5) * w;\n        buf[q + 1] += (col[7] - buf[q + 1] * 0.5) * w;\n        buf[q + 2] += (col[8] - buf[q + 2] * 0.5) * w;\n      }\n  }\n  for (let k = 0; k \u003c S.ndr; k++) {\n    const o = k * 5;\n    spot(buf, S.dr[o], S.dr[o + 1], S.dr[o + 4] * 200);\n  }\n  for (let p = 0, Y = 0; Y \u003c H; Y++) for (let X = 0; X \u003c W; X++, p += 3) display.setPixel(X, Y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// White light v shared over the four LEDs round x, y.\nfunction spot(buf, x, y, v) {\n  const X = floor(x - 0.5), Y = floor(y - 0.5), fx = x - 0.5 - X, fy = y - 0.5 - Y;\n  for (let k = 0; k \u003c 4; k++) {\n    const xx = X + (k & 1), yy = Y + (k >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const w = (k & 1 ? fx : 1 - fx) * (k >> 1 ? fy : 1 - fy) * v, q = (yy * W + xx) * 3;\n    buf[q] += w;\n    buf[q + 1] += w;\n    buf[q + 2] += w;\n  }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower."},{"name":"Size","min":0,"max":1,"about":"The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up."},{"name":"Wetness","min":0,"max":1,"about":"How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid."}],"start":[0,2,0,0.06],"measures":{"motion":0.1524,"detail":0.0833,"edges":0.3017,"complexity":2.5679,"coverage":1,"colour":0.1471,"drift":0.0328},"knobResponse":[0.1783,0.2037,0.1967,0.1202]},{"slug":"ford-circles","title":"Ford Circles","family":"number","round":28,"note":"세운 왼쪽 가장자리가 실수선이고, 분수 p/q 마다 반지름 1/(2q²) 인 원이 그 자리에 기대 서요. 화면은 황금비로 끝없이 들어가고, 맞닿은 두 원 사이의 중간수 자리에 더 작은 원이 자꾸 나와요. K3 이 과녁을 √2, √3, e, π 로 바꾸고, 누르면 스턴-브로코 나무를 따라 과녁까지 내려가는 길이 켜져요.","idea":"The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.","buttons":"K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.","code":"// ===== Patternflow pattern =====\n// Title:   Ford Circles\n// Family:  number\n// Idea:    The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ford circles (Lester R. Ford, 1938) and the Farey sequence (John Farey, 1816), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long.\n// Knob 3: Target. The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one.\n// Knob 4: Fill. Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid.\n// Buttons: K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, log, sin, abs, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Screen rows run down the real line with larger numbers at the top; the\n// target sits in the middle of row 64. Circles narrower than RMIN LEDs are\n// left out, and the window jumps to the next convergent with MARG to spare.\nconst CY = 64.5, TROW = 64, RMIN = 0.28, MARG = 1.08, MAXC = 1200, S0 = 132;\n\n// The continued fractions of the targets, a(i) for i = 0, 1, 2, ... The\n// golden ratio is [1; 1, 1, ...], the square roots of 2 and 3 repeat, e runs\n// [2; 1, 2, 1, 1, 4, 1, 1, 6, ...] and pi is written out to 50 terms. After\n// term 39 for e and 49 for pi the terms start over, so the number the zoom\n// falls into agrees with e and pi to more than 30 decimal places.\nconst PIC = [3, 7, 15, 1, 292, 1, 1, 1, 2, 1, 3, 1, 14, 2, 1, 1, 2, 2, 2, 2, 1, 84, 2, 1, 1, 15, 3, 13, 1, 4, 2, 6, 6, 99, 1, 2, 2, 6, 3, 5, 1, 1, 6, 8, 1, 7, 1, 2, 3, 7];\nconst TG = [\n  () => 1,\n  (i) => (i ? 2 : 1),\n  (i) => (i ? 2 - (i & 1) : 1),\n  (i) => {\n    if (!i) return 2;\n    i = 1 + ((i - 1) % 39);\n    return i % 3 === 2 ? (2 * (i + 1)) / 3 : 1;\n  },\n  (i) => PIC[i \u003c 50 ? i : 1 + ((i - 1) % 49)],\n];\n// [a(i); a(i+1), a(i+2), ...] to double precision.\nfunction tail(a, i) {\n  let v = a(i + 26);\n  for (let j = i + 25; j >= i; j--) v = a(j) + 1 / v;\n  return v;\n}\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\nconst smooth = (a, b, v) => {\n  const u = cl((v - a) / (b - a), 0, 1);\n  return u * u * (3 - 2 * u);\n};\n\n// The window is kept in the frame of the convergents p/q (index n) and\n// p'/q' (index n-1) of the target alpha. The map X -> (pX + p')/(qX + q')\n// sends the Ford circles onto themselves, sends 1/0 and 0/1 to p/q and p'/q',\n// and sends the tail t = [a(n+1); a(n+2), ...] to alpha. A fraction P/Q in\n// that frame lands on the LEDs at s(p/q - alpha) = sig D (P - tQ) / ((P + kQ)(t + k))\n// with radius sig / (2 (P + kQ)^2), where k = q'/q, D = pq' - p'q = +-1 and\n// sig = s/q^2. All of these stay small however deep the zoom goes, so it\n// can run for ever in double precision.\nfunction start(S, tgt) {\n  const a = TG[tgt];\n  S.tgt = tgt;\n  S.a = a;\n  S.n = 0;\n  S.k = 0;\n  S.D = -1;\n  S.lnq = 0;\n  S.t = tail(a, 1);\n  S.sig = max(S0, 64 * MARG * S.t + 1);\n  // p, q, p' and q' modulo 2^32, for each circle's own twinkle.\n  S.pn = a(0);\n  S.pm = 1;\n  S.qn = 1;\n  S.qm = 0;\n  S.fade = 0;\n}\n// The next convergent's frame is used as soon as the window sits wholly\n// between it and the one before: both tangent points off the panel, and the\n// two circles touching beyond the right edge.\nfunction advance(S) {\n  for (let g = 0; g \u003c 8; g++) {\n    const an = S.a(S.n + 1), k2 = 1 / (an + S.k), t2 = tail(S.a, S.n + 2);\n    if (S.sig * k2 * k2 \u003c= 64 * MARG * (t2 + k2)) return;\n    S.sig *= k2 * k2;\n    S.lnq -= log(k2);\n    S.k = k2;\n    S.t = t2;\n    S.D = -S.D;\n    S.n++;\n    const pn = (Math.imul(an, S.pn) + S.pm) | 0, qn = (Math.imul(an, S.qn) + S.qm) | 0;\n    S.pm = S.pn;\n    S.qm = S.qn;\n    S.pn = pn;\n    S.qn = qn;\n  }\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    time: 0, wave: -1, hue: 0, glow: 0.55, depth: 1.8, flat: 0.05,\n    Y: new Float64Array(MAXC), R: new Float64Array(MAXC), Wt: new Float64Array(MAXC),\n    PP: new Int32Array(MAXC), QQ: new Int32Array(MAXC), PA: new Int32Array(MAXC), PB: new Int32Array(MAXC),\n    CV: new Uint8Array(MAXC), PH: new Uint8Array(MAXC), stack: new Int32Array(MAXC * 4), conv: new Float64Array(96),\n    buf: new Float32Array(N * 3), col: [0, 0, 0],\n  });\n  start(S, 0);\n  S.tgt = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.time += d;\n  S.hue = k[0];\n  // Fill lights the inside of each circle in from its rim: a glow a few\n  // LEDs deep at first, then a flat fill under it up to a solid disc.\n  const u = cl(k[3], 0, 1), fk = sqrt(u);\n  S.glow = min(0.55, 2.4 * fk);\n  S.depth = 0.8 + 4 * fk;\n  S.flat = 0.85 * u;\n  const tgt = cl(round(k[2]), 0, 4);\n  if (tgt !== S.tgt) {\n    const first = S.tgt \u003c 0;\n    start(S, tgt);\n    if (first) S.fade = 1;\n  }\n  S.fade = min(1, S.fade + d * 2.5);\n  S.sig *= exp(d * cl(k[1], 0.2, 3) * 0.165);\n  advance(S);\n  if (S.wave >= 0) {\n    S.wave += d;\n    if (S.wave > WT) S.wave = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.wave = 0;\n}\n\n// Every circle that reaches the panel: the two convergents framing the\n// window, then the Stern-Brocot tree between them, each new fraction the\n// mediant of two that touch. A gap whose two tangent points both lie off one\n// end of the panel holds nothing on it, and a mediant too small to see has\n// only smaller ones below it.\nfunction circles(S) {\n  const { Y, R, Wt, PP, QQ, PA, PB, CV, PH, stack, conv } = S;\n  const sig = S.sig, k = S.k, t = S.t, D = S.D, tk = t + k, wmax = sqrt(sig / (2 * RMIN));\n  // The convergents of the tail are the convergents of the target.\n  let nc = 0;\n  for (let j = 0, h1 = 1, k1 = 0, h0 = S.a(S.n + 1), k0 = 1; j \u003c 40 && h0 + k * k0 \u003c= wmax; j++) {\n    conv[nc++] = h0;\n    conv[nc++] = k0;\n    const a = S.a(S.n + 2 + j), h2 = a * h0 + h1, k2 = a * k0 + k1;\n    (h1 = h0), (k1 = k0), (h0 = h2), (k0 = k2);\n  }\n  PP[0] = 0, QQ[0] = 1, Wt[0] = k, CV[0] = 1, PH[0] = 1;\n  if (k > 0) (R[0] = sig / (2 * k * k)), (Y[0] = CY + (D * sig * t) / (k * tk));\n  else (R[0] = 0), (Y[0] = CY + D * 1e30);\n  PP[1] = 1, QQ[1] = 0, Wt[1] = 1, CV[1] = 1, PH[1] = 1, R[1] = sig / 2, Y[1] = CY - (D * sig) / tk;\n  let n = 2, sp = 0;\n  stack[sp++] = 0;\n  stack[sp++] = 1;\n  while (sp > 0 && n \u003c MAXC) {\n    const b = stack[--sp], a = stack[--sp], ya = Y[a], yb = Y[b];\n    if ((ya \u003c -1 && yb \u003c -1) || (ya > H + 1 && yb > H + 1)) continue;\n    const P = PP[a] + PP[b], Q = QQ[a] + QQ[b], w = P + k * Q;\n    if (w > wmax) continue;\n    PP[n] = P, QQ[n] = Q, Wt[n] = w, PA[n] = a, PB[n] = b;\n    R[n] = sig / (2 * w * w);\n    Y[n] = CY - (D * sig * (P - t * Q)) / (w * tk);\n    let c = 0;\n    for (let j = 0; j \u003c nc; j += 2) if (conv[j] === P && conv[j + 1] === Q) c = 1;\n    CV[n] = c;\n    // On the descent to the target: the target lies between the parents.\n    PH[n] = (PP[a] - t * QQ[a]) * (PP[b] - t * QQ[b]) \u003c 0 ? 1 : 0;\n    stack[sp++] = a;\n    stack[sp++] = n;\n    stack[sp++] = n;\n    stack[sp++] = b;\n    n++;\n  }\n  return n;\n}\n\n// The rim is RW LEDs either side of the circle's edge.\nconst RW = 0.85;\n// Colour by denominator: the hue walks HA round the wheel and back as ln q\n// climbs by HL and HL again, so the circles stay on the cool side of the\n// wheel (teal, blue, violet, pink at the start) however deep the zoom goes.\nconst HA = 0.36, HL = 4;\n// The descent's front runs WV units of ln(size) a second; a tap lasts WT s.\nconst WV = 1.8, WT = 5;\nfunction disc(buf, r, yc, cr, cg, cb, ra, ga, gl, fa, cw) {\n  const y0 = max(0, floor(yc - r - 1)), y1 = min(H - 1, floor(yc + r + 1)), x1 = min(W - 1, floor(2 * r + 1)), rw = RW * cw;\n  for (let y = y0; y \u003c= y1; y++) {\n    const dy = y + 0.5 - yc, dy2 = dy * dy;\n    const ady = abs(dy), xs = ady \u003c= r ? dy2 / (r + sqrt(r * r - dy2)) : r;\n    for (let x = max(0, floor(xs - 2)); x \u003c= x1; x++) {\n      const X = x + 0.5, dist = sqrt((X - r) * (X - r) + dy2), d = (X * X - 2 * X * r + dy2) / (dist + r);\n      if (d > rw) {\n        if (X > r) break;\n        continue;\n      }\n      let v = ra * (d > -rw ? 1 - abs(d) / rw : 0);\n      if (d \u003c 0.5) v += cl(0.5 - d, 0, 1) * (fa + ga * exp(d / gl) + (y === TROW ? 0.32 : 0));\n      const p = (y * W + x) * 3;\n      buf[p] += cr * v;\n      buf[p + 1] += cg * v;\n      buf[p + 2] += cb * v;\n    }\n  }\n}\nfunction dot(buf, x, y, v, cr, cg, cb) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = xi + i, py = yi + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = v * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), p = (py * W + px) * 3;\n      buf[p] += cr * w;\n      buf[p + 1] += cg * w;\n      buf[p + 2] += cb * w;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const buf = S.buf, col = S.col, n = circles(S), { Y, R, Wt, PP, QQ, PA, PB, CV, PH } = S;\n  buf.fill(0);\n  // The target's ray. A circle the row through alpha crosses has\n  // |alpha - p/q| \u003c 1/(2q^2), and by Legendre's theorem that makes p/q a\n  // convergent of alpha: the zoom passes through convergents and nothing\n  // else. Convergents get whiter, wider rims; the row lights inside them.\n  for (let x = 0; x \u003c W; x++) {\n    const p = (TROW * W + x) * 3, v = 0.13 * (1 - x / 90);\n    buf[p] += 255 * v;\n    buf[p + 1] += 240 * v;\n    buf[p + 2] += 200 * v;\n  }\n  // After a K1 tap the Stern-Brocot descent into the target lights up: a\n  // front runs from the biggest circles to the smallest and lights each\n  // fraction whose two parents hold the target between them, so the light\n  // hops mediant by mediant, each circle touching the last, down to the\n  // spark on the line. The rest of the window dims while it runs.\n  const on = S.wave >= 0, wf = S.wave * WV - 1.2, wd = on ? smooth(0, 0.3, S.wave) * min(1, (WT - S.wave) / 0.9) : 0;\n  for (let i = 0; i \u003c n; i++) {\n    const r = R[i];\n    if (r \u003c RMIN || (i === 0 && S.k === 0)) continue;\n    const lq = (S.lnq + log(Wt[i])) / HL;\n    hsv(S.hue + 0.5 + HA * abs(lq - 2 * floor(lq / 2 + 0.5)), 0.82, 1, col);\n    let cr = col[0], cg = col[1], cb = col[2], ra = 0.9, cw = 1, ga = S.glow, fa = S.flat;\n    let vis = smooth(RMIN, 1.6, r);\n    if (CV[i]) (cr = cr * 0.65 + 89), (cg = cg * 0.65 + 84), (cb = cb * 0.65 + 70), (ra = 1), (cw = 1.3);\n    if (on && PH[i]) {\n      const lv = log(64 / r), fr = exp(-(((wf - lv) / 0.35) ** 2)), lit = smooth(-0.25, 0.25, wf - lv) * wd;\n      (cr += (255 - cr) * (0.25 * lit + 0.5 * fr)), (cg += (255 - cg) * (0.25 * lit + 0.5 * fr)), (cb += (255 - cb) * (0.25 * lit + 0.5 * fr));\n      (ra += 0.4 * lit + fr), (ga += 0.4 * lit), (fa += 0.12 * lit + 0.35 * fr), (cw += 0.4 * lit);\n    } else vis *= 1 - 0.55 * wd;\n    disc(buf, r, Y[i], cr, cg, cb, ra * vis, ga * vis, S.depth * (1 + 0.1 * min(r, 90)), fa * vis, cw);\n  }\n  // The points where circles touch glint, each at its own pace. Every\n  // tangency on the panel is a mediant touching one of its two parents.\n  const { pn, pm, qn, qm } = S;\n  for (let i = 2; i \u003c n; i++) {\n    const rm = R[i];\n    if (rm \u003c 1.2) continue;\n    const pa = Math.imul(pn, PP[i]) + Math.imul(pm, QQ[i]), qa = Math.imul(qn, PP[i]) + Math.imul(qm, QQ[i]);\n    const fr = on && PH[i] ? 2 * exp(-(((wf - log(64 / rm)) / 0.35) ** 2)) : 0;\n    for (let e = 0; e \u003c 2; e++) {\n      const j = e ? PB[i] : PA[i], rp = R[j];\n      if (j === 0 && S.k === 0) continue;\n      const tx = (2 * rp * rm) / (rp + rm), ty = Y[i] + (Y[j] > Y[i] ? 1 : -1) * ((2 * rm * sqrt(rp * rm)) / (rp + rm));\n      if (tx > W || ty \u003c -1 || ty > H) continue;\n      const h = hash(pa ^ (Math.imul(pn, PP[j]) + Math.imul(pm, QQ[j])), qa ^ (Math.imul(qn, PP[j]) + Math.imul(qm, QQ[j])));\n      const sn = sin(S.time * (1.1 + h * 1.7) + h * 40), g = (0.3 + 0.9 * sn ** 6 + fr) * smooth(1.2, 4, rm);\n      dot(buf, tx - 0.5, ty - 0.5, g * 1.6, 255, 245, 225);\n    }\n  }\n  // The target itself, a spark on the line.\n  dot(buf, 0.25, TROW, 1.4, 255, 250, 235);\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p] * f), min(255, buf[p + 1] * f), min(255, buf[p + 2] * f));\n}\n","layer":{"id":"layer-ford-circles","type":"code","name":"ford-circles","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ford Circles\n// Family:  number\n// Idea:    The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ford circles (Lester R. Ford, 1938) and the Farey sequence (John Farey, 1816), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long.\n// Knob 3: Target. The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one.\n// Knob 4: Fill. Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid.\n// Buttons: K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, log, sin, abs, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Screen rows run down the real line with larger numbers at the top; the\n// target sits in the middle of row 64. Circles narrower than RMIN LEDs are\n// left out, and the window jumps to the next convergent with MARG to spare.\nconst CY = 64.5, TROW = 64, RMIN = 0.28, MARG = 1.08, MAXC = 1200, S0 = 132;\n\n// The continued fractions of the targets, a(i) for i = 0, 1, 2, ... The\n// golden ratio is [1; 1, 1, ...], the square roots of 2 and 3 repeat, e runs\n// [2; 1, 2, 1, 1, 4, 1, 1, 6, ...] and pi is written out to 50 terms. After\n// term 39 for e and 49 for pi the terms start over, so the number the zoom\n// falls into agrees with e and pi to more than 30 decimal places.\nconst PIC = [3, 7, 15, 1, 292, 1, 1, 1, 2, 1, 3, 1, 14, 2, 1, 1, 2, 2, 2, 2, 1, 84, 2, 1, 1, 15, 3, 13, 1, 4, 2, 6, 6, 99, 1, 2, 2, 6, 3, 5, 1, 1, 6, 8, 1, 7, 1, 2, 3, 7];\nconst TG = [\n  () => 1,\n  (i) => (i ? 2 : 1),\n  (i) => (i ? 2 - (i & 1) : 1),\n  (i) => {\n    if (!i) return 2;\n    i = 1 + ((i - 1) % 39);\n    return i % 3 === 2 ? (2 * (i + 1)) / 3 : 1;\n  },\n  (i) => PIC[i \u003c 50 ? i : 1 + ((i - 1) % 49)],\n];\n// [a(i); a(i+1), a(i+2), ...] to double precision.\nfunction tail(a, i) {\n  let v = a(i + 26);\n  for (let j = i + 25; j >= i; j--) v = a(j) + 1 / v;\n  return v;\n}\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\nconst smooth = (a, b, v) => {\n  const u = cl((v - a) / (b - a), 0, 1);\n  return u * u * (3 - 2 * u);\n};\n\n// The window is kept in the frame of the convergents p/q (index n) and\n// p'/q' (index n-1) of the target alpha. The map X -> (pX + p')/(qX + q')\n// sends the Ford circles onto themselves, sends 1/0 and 0/1 to p/q and p'/q',\n// and sends the tail t = [a(n+1); a(n+2), ...] to alpha. A fraction P/Q in\n// that frame lands on the LEDs at s(p/q - alpha) = sig D (P - tQ) / ((P + kQ)(t + k))\n// with radius sig / (2 (P + kQ)^2), where k = q'/q, D = pq' - p'q = +-1 and\n// sig = s/q^2. All of these stay small however deep the zoom goes, so it\n// can run for ever in double precision.\nfunction start(S, tgt) {\n  const a = TG[tgt];\n  S.tgt = tgt;\n  S.a = a;\n  S.n = 0;\n  S.k = 0;\n  S.D = -1;\n  S.lnq = 0;\n  S.t = tail(a, 1);\n  S.sig = max(S0, 64 * MARG * S.t + 1);\n  // p, q, p' and q' modulo 2^32, for each circle's own twinkle.\n  S.pn = a(0);\n  S.pm = 1;\n  S.qn = 1;\n  S.qm = 0;\n  S.fade = 0;\n}\n// The next convergent's frame is used as soon as the window sits wholly\n// between it and the one before: both tangent points off the panel, and the\n// two circles touching beyond the right edge.\nfunction advance(S) {\n  for (let g = 0; g \u003c 8; g++) {\n    const an = S.a(S.n + 1), k2 = 1 / (an + S.k), t2 = tail(S.a, S.n + 2);\n    if (S.sig * k2 * k2 \u003c= 64 * MARG * (t2 + k2)) return;\n    S.sig *= k2 * k2;\n    S.lnq -= log(k2);\n    S.k = k2;\n    S.t = t2;\n    S.D = -S.D;\n    S.n++;\n    const pn = (Math.imul(an, S.pn) + S.pm) | 0, qn = (Math.imul(an, S.qn) + S.qm) | 0;\n    S.pm = S.pn;\n    S.qm = S.qn;\n    S.pn = pn;\n    S.qn = qn;\n  }\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    time: 0, wave: -1, hue: 0, glow: 0.55, depth: 1.8, flat: 0.05,\n    Y: new Float64Array(MAXC), R: new Float64Array(MAXC), Wt: new Float64Array(MAXC),\n    PP: new Int32Array(MAXC), QQ: new Int32Array(MAXC), PA: new Int32Array(MAXC), PB: new Int32Array(MAXC),\n    CV: new Uint8Array(MAXC), PH: new Uint8Array(MAXC), stack: new Int32Array(MAXC * 4), conv: new Float64Array(96),\n    buf: new Float32Array(N * 3), col: [0, 0, 0],\n  });\n  start(S, 0);\n  S.tgt = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.time += d;\n  S.hue = k[0];\n  // Fill lights the inside of each circle in from its rim: a glow a few\n  // LEDs deep at first, then a flat fill under it up to a solid disc.\n  const u = cl(k[3], 0, 1), fk = sqrt(u);\n  S.glow = min(0.55, 2.4 * fk);\n  S.depth = 0.8 + 4 * fk;\n  S.flat = 0.85 * u;\n  const tgt = cl(round(k[2]), 0, 4);\n  if (tgt !== S.tgt) {\n    const first = S.tgt \u003c 0;\n    start(S, tgt);\n    if (first) S.fade = 1;\n  }\n  S.fade = min(1, S.fade + d * 2.5);\n  S.sig *= exp(d * cl(k[1], 0.2, 3) * 0.165);\n  advance(S);\n  if (S.wave >= 0) {\n    S.wave += d;\n    if (S.wave > WT) S.wave = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.wave = 0;\n}\n\n// Every circle that reaches the panel: the two convergents framing the\n// window, then the Stern-Brocot tree between them, each new fraction the\n// mediant of two that touch. A gap whose two tangent points both lie off one\n// end of the panel holds nothing on it, and a mediant too small to see has\n// only smaller ones below it.\nfunction circles(S) {\n  const { Y, R, Wt, PP, QQ, PA, PB, CV, PH, stack, conv } = S;\n  const sig = S.sig, k = S.k, t = S.t, D = S.D, tk = t + k, wmax = sqrt(sig / (2 * RMIN));\n  // The convergents of the tail are the convergents of the target.\n  let nc = 0;\n  for (let j = 0, h1 = 1, k1 = 0, h0 = S.a(S.n + 1), k0 = 1; j \u003c 40 && h0 + k * k0 \u003c= wmax; j++) {\n    conv[nc++] = h0;\n    conv[nc++] = k0;\n    const a = S.a(S.n + 2 + j), h2 = a * h0 + h1, k2 = a * k0 + k1;\n    (h1 = h0), (k1 = k0), (h0 = h2), (k0 = k2);\n  }\n  PP[0] = 0, QQ[0] = 1, Wt[0] = k, CV[0] = 1, PH[0] = 1;\n  if (k > 0) (R[0] = sig / (2 * k * k)), (Y[0] = CY + (D * sig * t) / (k * tk));\n  else (R[0] = 0), (Y[0] = CY + D * 1e30);\n  PP[1] = 1, QQ[1] = 0, Wt[1] = 1, CV[1] = 1, PH[1] = 1, R[1] = sig / 2, Y[1] = CY - (D * sig) / tk;\n  let n = 2, sp = 0;\n  stack[sp++] = 0;\n  stack[sp++] = 1;\n  while (sp > 0 && n \u003c MAXC) {\n    const b = stack[--sp], a = stack[--sp], ya = Y[a], yb = Y[b];\n    if ((ya \u003c -1 && yb \u003c -1) || (ya > H + 1 && yb > H + 1)) continue;\n    const P = PP[a] + PP[b], Q = QQ[a] + QQ[b], w = P + k * Q;\n    if (w > wmax) continue;\n    PP[n] = P, QQ[n] = Q, Wt[n] = w, PA[n] = a, PB[n] = b;\n    R[n] = sig / (2 * w * w);\n    Y[n] = CY - (D * sig * (P - t * Q)) / (w * tk);\n    let c = 0;\n    for (let j = 0; j \u003c nc; j += 2) if (conv[j] === P && conv[j + 1] === Q) c = 1;\n    CV[n] = c;\n    // On the descent to the target: the target lies between the parents.\n    PH[n] = (PP[a] - t * QQ[a]) * (PP[b] - t * QQ[b]) \u003c 0 ? 1 : 0;\n    stack[sp++] = a;\n    stack[sp++] = n;\n    stack[sp++] = n;\n    stack[sp++] = b;\n    n++;\n  }\n  return n;\n}\n\n// The rim is RW LEDs either side of the circle's edge.\nconst RW = 0.85;\n// Colour by denominator: the hue walks HA round the wheel and back as ln q\n// climbs by HL and HL again, so the circles stay on the cool side of the\n// wheel (teal, blue, violet, pink at the start) however deep the zoom goes.\nconst HA = 0.36, HL = 4;\n// The descent's front runs WV units of ln(size) a second; a tap lasts WT s.\nconst WV = 1.8, WT = 5;\nfunction disc(buf, r, yc, cr, cg, cb, ra, ga, gl, fa, cw) {\n  const y0 = max(0, floor(yc - r - 1)), y1 = min(H - 1, floor(yc + r + 1)), x1 = min(W - 1, floor(2 * r + 1)), rw = RW * cw;\n  for (let y = y0; y \u003c= y1; y++) {\n    const dy = y + 0.5 - yc, dy2 = dy * dy;\n    const ady = abs(dy), xs = ady \u003c= r ? dy2 / (r + sqrt(r * r - dy2)) : r;\n    for (let x = max(0, floor(xs - 2)); x \u003c= x1; x++) {\n      const X = x + 0.5, dist = sqrt((X - r) * (X - r) + dy2), d = (X * X - 2 * X * r + dy2) / (dist + r);\n      if (d > rw) {\n        if (X > r) break;\n        continue;\n      }\n      let v = ra * (d > -rw ? 1 - abs(d) / rw : 0);\n      if (d \u003c 0.5) v += cl(0.5 - d, 0, 1) * (fa + ga * exp(d / gl) + (y === TROW ? 0.32 : 0));\n      const p = (y * W + x) * 3;\n      buf[p] += cr * v;\n      buf[p + 1] += cg * v;\n      buf[p + 2] += cb * v;\n    }\n  }\n}\nfunction dot(buf, x, y, v, cr, cg, cb) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = xi + i, py = yi + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = v * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), p = (py * W + px) * 3;\n      buf[p] += cr * w;\n      buf[p + 1] += cg * w;\n      buf[p + 2] += cb * w;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const buf = S.buf, col = S.col, n = circles(S), { Y, R, Wt, PP, QQ, PA, PB, CV, PH } = S;\n  buf.fill(0);\n  // The target's ray. A circle the row through alpha crosses has\n  // |alpha - p/q| \u003c 1/(2q^2), and by Legendre's theorem that makes p/q a\n  // convergent of alpha: the zoom passes through convergents and nothing\n  // else. Convergents get whiter, wider rims; the row lights inside them.\n  for (let x = 0; x \u003c W; x++) {\n    const p = (TROW * W + x) * 3, v = 0.13 * (1 - x / 90);\n    buf[p] += 255 * v;\n    buf[p + 1] += 240 * v;\n    buf[p + 2] += 200 * v;\n  }\n  // After a K1 tap the Stern-Brocot descent into the target lights up: a\n  // front runs from the biggest circles to the smallest and lights each\n  // fraction whose two parents hold the target between them, so the light\n  // hops mediant by mediant, each circle touching the last, down to the\n  // spark on the line. The rest of the window dims while it runs.\n  const on = S.wave >= 0, wf = S.wave * WV - 1.2, wd = on ? smooth(0, 0.3, S.wave) * min(1, (WT - S.wave) / 0.9) : 0;\n  for (let i = 0; i \u003c n; i++) {\n    const r = R[i];\n    if (r \u003c RMIN || (i === 0 && S.k === 0)) continue;\n    const lq = (S.lnq + log(Wt[i])) / HL;\n    hsv(S.hue + 0.5 + HA * abs(lq - 2 * floor(lq / 2 + 0.5)), 0.82, 1, col);\n    let cr = col[0], cg = col[1], cb = col[2], ra = 0.9, cw = 1, ga = S.glow, fa = S.flat;\n    let vis = smooth(RMIN, 1.6, r);\n    if (CV[i]) (cr = cr * 0.65 + 89), (cg = cg * 0.65 + 84), (cb = cb * 0.65 + 70), (ra = 1), (cw = 1.3);\n    if (on && PH[i]) {\n      const lv = log(64 / r), fr = exp(-(((wf - lv) / 0.35) ** 2)), lit = smooth(-0.25, 0.25, wf - lv) * wd;\n      (cr += (255 - cr) * (0.25 * lit + 0.5 * fr)), (cg += (255 - cg) * (0.25 * lit + 0.5 * fr)), (cb += (255 - cb) * (0.25 * lit + 0.5 * fr));\n      (ra += 0.4 * lit + fr), (ga += 0.4 * lit), (fa += 0.12 * lit + 0.35 * fr), (cw += 0.4 * lit);\n    } else vis *= 1 - 0.55 * wd;\n    disc(buf, r, Y[i], cr, cg, cb, ra * vis, ga * vis, S.depth * (1 + 0.1 * min(r, 90)), fa * vis, cw);\n  }\n  // The points where circles touch glint, each at its own pace. Every\n  // tangency on the panel is a mediant touching one of its two parents.\n  const { pn, pm, qn, qm } = S;\n  for (let i = 2; i \u003c n; i++) {\n    const rm = R[i];\n    if (rm \u003c 1.2) continue;\n    const pa = Math.imul(pn, PP[i]) + Math.imul(pm, QQ[i]), qa = Math.imul(qn, PP[i]) + Math.imul(qm, QQ[i]);\n    const fr = on && PH[i] ? 2 * exp(-(((wf - log(64 / rm)) / 0.35) ** 2)) : 0;\n    for (let e = 0; e \u003c 2; e++) {\n      const j = e ? PB[i] : PA[i], rp = R[j];\n      if (j === 0 && S.k === 0) continue;\n      const tx = (2 * rp * rm) / (rp + rm), ty = Y[i] + (Y[j] > Y[i] ? 1 : -1) * ((2 * rm * sqrt(rp * rm)) / (rp + rm));\n      if (tx > W || ty \u003c -1 || ty > H) continue;\n      const h = hash(pa ^ (Math.imul(pn, PP[j]) + Math.imul(pm, QQ[j])), qa ^ (Math.imul(qn, PP[j]) + Math.imul(qm, QQ[j])));\n      const sn = sin(S.time * (1.1 + h * 1.7) + h * 40), g = (0.3 + 0.9 * sn ** 6 + fr) * smooth(1.2, 4, rm);\n      dot(buf, tx - 0.5, ty - 0.5, g * 1.6, 255, 245, 225);\n    }\n  }\n  // The target itself, a spark on the line.\n  dot(buf, 0.25, TROW, 1.4, 255, 250, 235);\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p] * f), min(255, buf[p + 1] * f), min(255, buf[p + 2] * f));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long."},{"name":"Target","min":0,"max":4,"about":"The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one."},{"name":"Fill","min":0,"max":1,"about":"Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid."}],"start":[0,2,0,0.06],"measures":{"motion":0.6649,"detail":0.0489,"edges":0.4057,"complexity":1.3917,"coverage":0.8005,"colour":0.1799,"drift":0.1998},"knobResponse":[0.1431,0.2105,0.195,0.7368]},{"slug":"fortune-sweep","title":"Fortune's Sweep","family":"algo","round":37,"note":"금색 쓸기 선이 1초에 22줄씩 내려가고, 선 위로 포천의 해변선이 지나간 자리부터 보로노이 그림이 확정돼요. 해변선은 사이트 하나에 포물선 호 하나씩 이어진 목걸이라서, 선이 사이트를 지나면 호가 가시처럼 돋고 세 사이트를 지나는 빈 원이 선에 닿으면 가운데 호가 사라지며 꼭짓점이 금색 점으로 남아요. 지난 그림은 40% 밝기로 아래에서 기다려요. K4 는 가중치를 걸어 모서리를 쌍곡선으로 휘고, 누르면 새 사이트로 바로 다시 쓸어요.","idea":"A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.","buttons":"K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.","code":"// ===== Patternflow pattern =====\n// Title:   Fortune's Sweep\n// Family:  algo\n// Idea:    A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Fortune's sweep-line algorithm for Voronoi diagrams (Steven Fortune, 1986), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1\n//\n// Knob 1: Hue. Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green.\n// Knob 2: Speed. Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s.\n// Knob 3: Sites. How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77.\n// Knob 4: Weights. Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle.\n// Buttons: K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.\n\n// The picture is drawn per LED with no event queue. For a point p above the\n// sweep line at height L (y grows down), let D1(p) be the distance to its\n// nearest site, weighted when Weights is up. p is certain when D1(p) \u003c= L - p.y: no site the line has\n// not reached yet can come closer to p than the line itself. The beach line\n// is D1(p) = L - p.y, and on it the nearest site is always one the line has\n// passed, so the global nearest site is the right one and the diagram's\n// tables are built once a sweep. Only L changes from frame to frame.\n//\n// The circle events come from the diagram's vertices: a point v at weighted\n// distance r from three sites and no nearer to any other. Its event falls\n// at L = v.y + r, when the circle round v touches the sweep line from above.\n// Checked in a scratch script against the beach line worked out from the\n// parabolas themselves, each site's arc being the parabola with the site\n// for focus and y = L + w for directrix: 24 diagrams, four each of 16, 32\n// and 48 sites, unweighted and at full weight, 1,176 events. 26 fell within\n// 0.002 rows of the third site's own arrival or of a neighbouring event and\n// were left out. At each of the other 1,150, just before the event the\n// three sites' arcs lie side by side on the beach line, and just after it\n// the middle one is gone and the other two meet. Half a row before, the\n// arc about to vanish is at most 3 LEDs wide.\n\nconst W = 64, H = 128, N = W * H, MAXS = 48;\nconst { floor, min, max, sqrt, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Rows a second per unit of Speed.\nconst ROWS = 11;\n// The finished diagram holds this long before the next sweep, in seconds.\nconst HOLD = 0.6;\n// A circle event flashes this long, in seconds.\nconst FLASH = 0.6;\n// The last diagram fades to this share of its brightness as the next sweep starts.\nconst DIM = 0.4;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction newSet() {\n  return {\n    sx: new Float32Array(MAXS), sy: new Float32Array(MAXS), sr: new Float32Array(MAXS), sw: new Float32Array(MAXS),\n    pref: new Uint8Array(MAXS), tone: new Uint8Array(MAXS), gh: new Float32Array(MAXS * 3),\n    d1: new Float32Array(N), own: new Uint8Array(N), ed: new Float32Array(N), g1: new Float32Array(N),\n    adj: new Uint8Array(MAXS * MAXS), col: new Float32Array(MAXS * 3), tint: new Float32Array(MAXS * 3),\n    n: 0, wk: -1, hue: NaN, ev: [], evi: 0, lStart: -3, lEnd: 150,\n  };\n}\n\n// Best-candidate sampling, twelve tries a site: every prefix of the 48 is\n// spread about evenly, so Sites can take the first n.\nfunction scatter(S) {\n  for (let i = 0; i \u003c MAXS; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let t = 0, tries = i === 0 ? 1 : 12; t \u003c tries; t++) {\n      const x = 2 + random() * 60, y = 2 + random() * 124;\n      let d = 1e9;\n      for (let j = 0; j \u003c i; j++) {\n        const dx = x - S.sx[j], dy = y - S.sy[j];\n        d = min(d, dx * dx + dy * dy);\n      }\n      if (d > bd) (bd = d), (bx = x), (by = y);\n    }\n    S.sx[i] = bx;\n    S.sy[i] = by;\n    S.sr[i] = random();\n    S.pref[i] = floor(random() * 4);\n  }\n  S.n = 0;\n  S.hue = NaN;\n}\n\n// The vertices of the additively weighted diagram: |v - s| = r + w for the\n// three sites. Subtracting the squared equations pairwise leaves v linear in\n// r, and the first one then gives a quadratic in r. With no weights it is\n// the circumcircle.\nfunction vertices(S, a, b, c, out) {\n  const { sx, sy, sw } = S;\n  const ax = sx[a], ay = sy[a], wa = sw[a];\n  const m11 = 2 * (ax - sx[b]), m12 = 2 * (ay - sy[b]), m21 = 2 * (ax - sx[c]), m22 = 2 * (ay - sy[c]);\n  const det = m11 * m22 - m12 * m21;\n  if (abs(det) \u003c 1e-6) return 0;\n  const aa = ax * ax + ay * ay;\n  const k1 = sw[b] * sw[b] - wa * wa - sx[b] * sx[b] - sy[b] * sy[b] + aa, q1 = 2 * (sw[b] - wa);\n  const k2 = sw[c] * sw[c] - wa * wa - sx[c] * sx[c] - sy[c] * sy[c] + aa, q2 = 2 * (sw[c] - wa);\n  // v = P + Q r\n  const px = (k1 * m22 - m12 * k2) / det, py = (m11 * k2 - k1 * m21) / det;\n  const qx = (q1 * m22 - m12 * q2) / det, qy = (m11 * q2 - q1 * m21) / det;\n  const dx = px - ax, dy = py - ay;\n  const A = qx * qx + qy * qy - 1, B = 2 * (dx * qx + dy * qy - wa), C = dx * dx + dy * dy - wa * wa;\n  let k = 0;\n  const rs = [];\n  if (abs(A) \u003c 1e-9) {\n    if (abs(B) > 1e-9) rs.push(-C / B);\n  } else {\n    const disc = B * B - 4 * A * C;\n    if (disc \u003c 0) return 0;\n    const sq = sqrt(disc);\n    rs.push((-B - sq) / (2 * A), (-B + sq) / (2 * A));\n  }\n  const wmin = min(wa, sw[b], sw[c]);\n  for (const r of rs) {\n    if (r + wmin \u003c -1e-6) continue;\n    const vx = px + qx * r, vy = py + qy * r;\n    let empty = true;\n    for (let l = 0; l \u003c S.n && empty; l++) {\n      if (l === a || l === b || l === c) continue;\n      const ex = vx - sx[l], ey = vy - sy[l];\n      if (sqrt(ex * ex + ey * ey) - sw[l] \u003c r - 1e-4) empty = false;\n    }\n    if (!empty) continue;\n    // Only circles that reach the panel.\n    if (vx + r \u003c 0 || vx - r > W - 1 || vy + r \u003c 0 || vy - r > H - 1) continue;\n    out.push({ t: vy + r, x: vx, y: vy, r, fired: -1e9 });\n    k++;\n  }\n  return k;\n}\n\n// The tables of one diagram: nearest weighted distance, its site, the\n// distance in LEDs to the nearest edge and the slope of D1(p) - (L - p.y),\n// which turns the beach line's level into a distance in LEDs too.\nfunction build(S, n, wk) {\n  S.n = n;\n  S.wk = wk;\n  const wmax = 0.5 * sqrt(N / n) * wk;\n  const { sx, sy, sw, d1, own, ed, g1, adj } = S;\n  for (let i = 0; i \u003c n; i++) sw[i] = wmax * S.sr[i];\n  adj.fill(0);\n  let lEnd = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p - x) / W;\n    let b1 = 1e9, b2 = 1e9, i1 = 0, i2 = 0, r1 = 1, r2 = 1;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = x - sx[i], dy = y - sy[i], r = sqrt(dx * dx + dy * dy), d = r - sw[i];\n      if (d \u003c b1) (b2 = b1), (i2 = i1), (r2 = r1), (b1 = d), (i1 = i), (r1 = r);\n      else if (d \u003c b2) (b2 = d), (i2 = i), (r2 = r);\n    }\n    d1[p] = b1;\n    own[p] = i1;\n    r1 = max(r1, 1e-3);\n    r2 = max(r2, 1e-3);\n    const ux = (x - sx[i1]) / r1, uy = (y - sy[i1]) / r1, vx = (x - sx[i2]) / r2, vy = (y - sy[i2]) / r2;\n    const ge = sqrt((ux - vx) * (ux - vx) + (uy - vy) * (uy - vy));\n    ed[p] = (b2 - b1) / max(0.3, ge);\n    g1[p] = sqrt(ux * ux + (uy + 1) * (uy + 1));\n    if (ed[p] \u003c 1.5) adj[i1 * MAXS + i2] = adj[i2 * MAXS + i1] = 1;\n    if (y + b1 > lEnd) lEnd = y + b1;\n  }\n  S.lEnd = lEnd + 1.5;\n  let ls = -3;\n  for (let i = 0; i \u003c n; i++) ls = min(ls, sy[i] - sw[i] - 1);\n  S.lStart = ls;\n  // Four tones, neighbours apart where the greedy pass manages it.\n  for (let i = 0; i \u003c n; i++) {\n    let used = 0;\n    for (let j = 0; j \u003c i; j++) if (adj[i * MAXS + j]) used |= 1 \u003c\u003c S.tone[j];\n    let t = S.pref[i];\n    for (let k = 0; k \u003c 4; k++) if (!(used & (1 \u003c\u003c ((S.pref[i] + k) & 3)))) {\n      t = (S.pref[i] + k) & 3;\n      break;\n    }\n    S.tone[i] = t;\n  }\n  const ev = [];\n  for (let a = 0; a \u003c n; a++) for (let b = a + 1; b \u003c n; b++) for (let c = b + 1; c \u003c n; c++) vertices(S, a, b, c, ev);\n  // Off-panel vertices whose circle would only touch the line after the\n  // last LED is certain never fire: about one in twelve.\n  S.ev = ev.filter((e) => e.t \u003c= S.lEnd).sort((u, v) => u.t - v.t);\n  S.evi = 0;\n  S.hue = NaN;\n}\n\n// Calm tones round the base hue. Where a tone lands on red, orange or\n// yellow it is paled and lifted, as a dark orange cell reads brown and a\n// dark yellow one olive on the panel; yellow is lifted most.\nconst TONES = [[0, 0.72, 0.52], [0.075, 0.6, 0.46], [-0.085, 0.62, 0.5], [0.025, 0.42, 0.6]];\nconst band = (v, a, b, e) => cl((v - a) / e, 0, 1) * cl((b - v) / e, 0, 1);\nfunction paint(S, hue) {\n  for (let i = 0; i \u003c S.n; i++) {\n    const tn = TONES[S.tone[i]], h = hue + 0.56 + tn[0], hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh;\n    const warm = band(hw, -0.06, 0.3, 0.05), yel = band(hw, 0.08, 0.32, 0.05);\n    hsv(h, tn[1] * (1 - 0.3 * warm - 0.15 * yel), tn[2] + 0.28 * warm + 0.14 * yel, S.col, i * 3);\n    hsv(h, 0.32, 1, S.tint, i * 3);\n    // The waiting diagram is the same tone at 40%, except that a dim\n    // orange or yellow is brown and a dim lime is olive whatever is done to\n    // it, so those ghosts lean to wine below the yellow and to green above.\n    // The turn is a jump: a blend of the two goes through olive again.\n    const gw = band(hw, -0.07, 0.33, 0.04);\n    hsv(h + gw * ((hw \u003c 0.11 ? -0.03 : 0.36) - hw), tn[1] * 0.85, tn[2] * DIM * 1.05, S.gh, i * 3);\n  }\n  S.hue = hue;\n}\n\nfunction startSweep(st) {\n  const t = st.old;\n  st.old = st.cur;\n  st.cur = t;\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  st.L = st.cur.lStart;\n  st.fade = 1;\n  st.hold = 0;\n}\n\nexport function setup(params) {\n  const st = (params.s = {\n    cur: newSet(), old: newSet(), n: 16, wk: 0.06, hue: 0, speed: 2, L: 0, fade: 0, hold: 0, clock: 0,\n    buf: new Float32Array(N * 3), acc: new Float32Array(3), edge: new Float32Array(3), pale: new Float32Array(3),\n  });\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  startSweep(st);\n  // Open a third of the way down a sweep, with the first diagram waiting below.\n  st.L = 36;\n  st.fade = 0;\n  for (const e of st.cur.ev) if (e.t \u003c= st.L) e.fired = -1e9;\n  while (st.cur.evi \u003c st.cur.ev.length && st.cur.ev[st.cur.evi].t \u003c= st.L) st.cur.evi++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const st = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  st.hue = k[0];\n  st.speed = cl(k[1], 0.2, 3);\n  st.clock += d;\n  const n = round(cl(k[2], 16, 48)), wk = cl(k[3], 0, 1);\n  if (n !== st.n || abs(wk - st.wk) > 0.002) {\n    st.n = n;\n    st.wk = wk;\n    // The diagram changes under the sweep: rebuild both, and treat the\n    // events the line has already passed as fixed, without a flash.\n    for (const S of [st.cur, st.old]) build(S, n, wk);\n    const C = st.cur;\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.evi++;\n    st.L = max(st.L, C.lStart);\n  }\n  if (input.btnPressed && input.btnPressed[0]) startSweep(st);\n  const C = st.cur;\n  if (st.fade > 0) st.fade = max(0, st.fade - d / 0.9);\n  if (st.L \u003c C.lEnd) {\n    st.L = min(C.lEnd, st.L + d * st.speed * ROWS);\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.ev[C.evi++].fired = st.clock;\n  } else if ((st.hold += d) >= HOLD) startSweep(st);\n}\n\nexport function draw(display, params) {\n  const st = params.s;\n  if (!st) return;\n  const C = st.cur, O = st.old, L = st.L, buf = st.buf, acc = st.acc, edge = st.edge, pale = st.pale;\n  if (C.hue !== st.hue) paint(C, st.hue);\n  if (O.hue !== st.hue) paint(O, st.hue);\n  // Gold for the line and the circles at Hue 0, opposite the cells.\n  const ah = st.hue + 0.125, ahh = ah - floor(ah);\n  hsv(ah, 0.62 - 0.2 * cl((ahh - 0.2) / 0.1, 0, 1) * cl((0.4 - ahh) / 0.1, 0, 1), 1, acc, 0);\n  hsv(st.hue + 0.56, 0.18, 1, edge, 0);\n  hsv(st.hue + 0.56, 0.1, 1, pale, 0);\n  const fd = st.fade, ok = DIM + (1 - DIM) * fd;\n  const Cc = C.col, Ct = C.tint, Oc = O.col, Og = O.gh;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    // Between the beach line and the sweep line nothing is known yet: the\n    // old diagram shows there at two thirds of its waiting level.\n    const zone = y \u003c L ? 0.62 : 1;\n    // The line is a full row at any L, with a soft second row as it moves.\n    const sw = cl(1 - (abs(y - L) - 0.5) / 0.6, 0, 1);\n    for (let x = 0; x \u003c W; x++, p++) {\n      const oo = O.own[p] * 3, oe = cl(1 - O.ed[p] / 0.9, 0, 1) * 0.75;\n      let r = ((Og[oo] + (Oc[oo] - Og[oo]) * fd) * (1 - oe) + edge[0] * oe * ok) * zone;\n      let g = ((Og[oo + 1] + (Oc[oo + 1] - Og[oo + 1]) * fd) * (1 - oe) + edge[1] * oe * ok) * zone;\n      let b = ((Og[oo + 2] + (Oc[oo + 2] - Og[oo + 2]) * fd) * (1 - oe) + edge[2] * oe * ok) * zone;\n      const f = C.d1[p] - (L - y), dist = f / max(0.5, C.g1[p]);\n      if (dist \u003c 1.2) {\n        const co = C.own[p] * 3, m = cl(0.5 - dist, 0, 1);\n        // Fresh ground just behind the beach line glows and settles over\n        // about four rows.\n        const glow = 0.5 * exp(-max(0, -dist) / 3.5);\n        let nr = Cc[co] + (Ct[co] - Cc[co]) * glow, ng = Cc[co + 1] + (Ct[co + 1] - Cc[co + 1]) * glow, nb = Cc[co + 2] + (Ct[co + 2] - Cc[co + 2]) * glow;\n        const e = cl(1 - C.ed[p] / 0.9, 0, 1) * 0.92;\n        nr += (edge[0] - nr) * e;\n        ng += (edge[1] - ng) * e;\n        nb += (edge[2] - nb) * e;\n        r += (nr - r) * m;\n        g += (ng - g) * m;\n        b += (nb - b) * m;\n        // The arc itself, a pale bright tint of its own site, whitening where\n        // an edge meets it: those meeting points are the breakpoints that\n        // trace the edges down.\n        const a = cl(1 - abs(dist) / 0.8, 0, 1);\n        if (a > 0) {\n          const wh = e * 0.8;\n          r += (Ct[co] + (pale[0] - Ct[co]) * wh - r) * a;\n          g += (Ct[co + 1] + (pale[1] - Ct[co + 1]) * wh - g) * a;\n          b += (Ct[co + 2] + (pale[2] - Ct[co + 2]) * wh - b) * a;\n        }\n      }\n      if (sw > 0) {\n        r += (acc[0] - r) * sw;\n        g += (acc[1] - g) * sw;\n        b += (acc[2] - b) * sw;\n      }\n      buf[p * 3] = r;\n      buf[p * 3 + 1] = g;\n      buf[p * 3 + 2] = b;\n    }\n  }\n  const put = (x, y, r, g, b, a) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    buf[o] += (r - buf[o]) * a;\n    buf[o + 1] += (g - buf[o + 1]) * a;\n    buf[o + 2] += (b - buf[o + 2]) * a;\n  };\n  // Weight circles, faint, for sites that carry more than 1.5 LEDs.\n  for (let i = 0; i \u003c C.n; i++) {\n    const w = C.sw[i];\n    if (w \u003c 1.5) continue;\n    const seen = C.sy[i] - w \u003c= L, a = seen ? 0.3 : 0.22;\n    for (let y = max(0, floor(C.sy[i] - w - 1)); y \u003c= min(H - 1, C.sy[i] + w + 1); y++)\n      for (let x = max(0, floor(C.sx[i] - w - 1)); x \u003c= min(W - 1, C.sx[i] + w + 1); x++) {\n        const dx = x - C.sx[i], dy = y - C.sy[i], q = 1 - abs(sqrt(dx * dx + dy * dy) - w) / 0.6;\n        if (q > 0) put(x, y, pale[0], pale[1], pale[2], a * q);\n      }\n  }\n  // Circle events: the empty circle flashes in the line's colour, touching\n  // the line at its foot, and the vertex it fixes keeps a gold point.\n  for (let j = 0; j \u003c C.evi; j++) {\n    const e = C.ev[j], age = st.clock - e.fired;\n    put(round(e.x), round(e.y), acc[0], acc[1], acc[2], 0.85);\n    if (age >= FLASH) continue;\n    const fa = (1 - age / FLASH) * (1 - age / FLASH), R = e.r;\n    put(round(e.x), round(e.y), 1, 1, 1, fa);\n    for (let y = max(0, floor(e.y - R - 1)); y \u003c= min(H - 1, e.y + R + 1); y++)\n      for (let x = max(0, floor(e.x - R - 1)); x \u003c= min(W - 1, e.x + R + 1); x++) {\n        const dx = x - e.x, dy = y - e.y, q = 1 - abs(sqrt(dx * dx + dy * dy) - R) / 0.65;\n        if (q > 0) put(x, y, acc[0], acc[1], acc[2], q * fa * 0.9);\n      }\n  }\n  // Sites: white once the line has reached them, a dim grey point before.\n  for (let i = 0; i \u003c C.n; i++) {\n    const x = round(C.sx[i]), y = round(C.sy[i]);\n    if (C.sy[i] - C.sw[i] \u003c= L) {\n      put(x, y, 1, 1, 1, 1);\n      put(x - 1, y, 1, 1, 1, 0.35);\n      put(x + 1, y, 1, 1, 1, 0.35);\n      put(x, y - 1, 1, 1, 1, 0.35);\n      put(x, y + 1, 1, 1, 1, 0.35);\n    } else put(x, y, 0.5, 0.5, 0.5, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, round(255 * min(1, buf[p * 3])), round(255 * min(1, buf[p * 3 + 1])), round(255 * min(1, buf[p * 3 + 2])));\n}\n","layer":{"id":"layer-fortune-sweep","type":"code","name":"fortune-sweep","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fortune's Sweep\n// Family:  algo\n// Idea:    A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Fortune's sweep-line algorithm for Voronoi diagrams (Steven Fortune, 1986), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1\n//\n// Knob 1: Hue. Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green.\n// Knob 2: Speed. Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s.\n// Knob 3: Sites. How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77.\n// Knob 4: Weights. Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle.\n// Buttons: K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.\n\n// The picture is drawn per LED with no event queue. For a point p above the\n// sweep line at height L (y grows down), let D1(p) be the distance to its\n// nearest site, weighted when Weights is up. p is certain when D1(p) \u003c= L - p.y: no site the line has\n// not reached yet can come closer to p than the line itself. The beach line\n// is D1(p) = L - p.y, and on it the nearest site is always one the line has\n// passed, so the global nearest site is the right one and the diagram's\n// tables are built once a sweep. Only L changes from frame to frame.\n//\n// The circle events come from the diagram's vertices: a point v at weighted\n// distance r from three sites and no nearer to any other. Its event falls\n// at L = v.y + r, when the circle round v touches the sweep line from above.\n// Checked in a scratch script against the beach line worked out from the\n// parabolas themselves, each site's arc being the parabola with the site\n// for focus and y = L + w for directrix: 24 diagrams, four each of 16, 32\n// and 48 sites, unweighted and at full weight, 1,176 events. 26 fell within\n// 0.002 rows of the third site's own arrival or of a neighbouring event and\n// were left out. At each of the other 1,150, just before the event the\n// three sites' arcs lie side by side on the beach line, and just after it\n// the middle one is gone and the other two meet. Half a row before, the\n// arc about to vanish is at most 3 LEDs wide.\n\nconst W = 64, H = 128, N = W * H, MAXS = 48;\nconst { floor, min, max, sqrt, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Rows a second per unit of Speed.\nconst ROWS = 11;\n// The finished diagram holds this long before the next sweep, in seconds.\nconst HOLD = 0.6;\n// A circle event flashes this long, in seconds.\nconst FLASH = 0.6;\n// The last diagram fades to this share of its brightness as the next sweep starts.\nconst DIM = 0.4;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction newSet() {\n  return {\n    sx: new Float32Array(MAXS), sy: new Float32Array(MAXS), sr: new Float32Array(MAXS), sw: new Float32Array(MAXS),\n    pref: new Uint8Array(MAXS), tone: new Uint8Array(MAXS), gh: new Float32Array(MAXS * 3),\n    d1: new Float32Array(N), own: new Uint8Array(N), ed: new Float32Array(N), g1: new Float32Array(N),\n    adj: new Uint8Array(MAXS * MAXS), col: new Float32Array(MAXS * 3), tint: new Float32Array(MAXS * 3),\n    n: 0, wk: -1, hue: NaN, ev: [], evi: 0, lStart: -3, lEnd: 150,\n  };\n}\n\n// Best-candidate sampling, twelve tries a site: every prefix of the 48 is\n// spread about evenly, so Sites can take the first n.\nfunction scatter(S) {\n  for (let i = 0; i \u003c MAXS; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let t = 0, tries = i === 0 ? 1 : 12; t \u003c tries; t++) {\n      const x = 2 + random() * 60, y = 2 + random() * 124;\n      let d = 1e9;\n      for (let j = 0; j \u003c i; j++) {\n        const dx = x - S.sx[j], dy = y - S.sy[j];\n        d = min(d, dx * dx + dy * dy);\n      }\n      if (d > bd) (bd = d), (bx = x), (by = y);\n    }\n    S.sx[i] = bx;\n    S.sy[i] = by;\n    S.sr[i] = random();\n    S.pref[i] = floor(random() * 4);\n  }\n  S.n = 0;\n  S.hue = NaN;\n}\n\n// The vertices of the additively weighted diagram: |v - s| = r + w for the\n// three sites. Subtracting the squared equations pairwise leaves v linear in\n// r, and the first one then gives a quadratic in r. With no weights it is\n// the circumcircle.\nfunction vertices(S, a, b, c, out) {\n  const { sx, sy, sw } = S;\n  const ax = sx[a], ay = sy[a], wa = sw[a];\n  const m11 = 2 * (ax - sx[b]), m12 = 2 * (ay - sy[b]), m21 = 2 * (ax - sx[c]), m22 = 2 * (ay - sy[c]);\n  const det = m11 * m22 - m12 * m21;\n  if (abs(det) \u003c 1e-6) return 0;\n  const aa = ax * ax + ay * ay;\n  const k1 = sw[b] * sw[b] - wa * wa - sx[b] * sx[b] - sy[b] * sy[b] + aa, q1 = 2 * (sw[b] - wa);\n  const k2 = sw[c] * sw[c] - wa * wa - sx[c] * sx[c] - sy[c] * sy[c] + aa, q2 = 2 * (sw[c] - wa);\n  // v = P + Q r\n  const px = (k1 * m22 - m12 * k2) / det, py = (m11 * k2 - k1 * m21) / det;\n  const qx = (q1 * m22 - m12 * q2) / det, qy = (m11 * q2 - q1 * m21) / det;\n  const dx = px - ax, dy = py - ay;\n  const A = qx * qx + qy * qy - 1, B = 2 * (dx * qx + dy * qy - wa), C = dx * dx + dy * dy - wa * wa;\n  let k = 0;\n  const rs = [];\n  if (abs(A) \u003c 1e-9) {\n    if (abs(B) > 1e-9) rs.push(-C / B);\n  } else {\n    const disc = B * B - 4 * A * C;\n    if (disc \u003c 0) return 0;\n    const sq = sqrt(disc);\n    rs.push((-B - sq) / (2 * A), (-B + sq) / (2 * A));\n  }\n  const wmin = min(wa, sw[b], sw[c]);\n  for (const r of rs) {\n    if (r + wmin \u003c -1e-6) continue;\n    const vx = px + qx * r, vy = py + qy * r;\n    let empty = true;\n    for (let l = 0; l \u003c S.n && empty; l++) {\n      if (l === a || l === b || l === c) continue;\n      const ex = vx - sx[l], ey = vy - sy[l];\n      if (sqrt(ex * ex + ey * ey) - sw[l] \u003c r - 1e-4) empty = false;\n    }\n    if (!empty) continue;\n    // Only circles that reach the panel.\n    if (vx + r \u003c 0 || vx - r > W - 1 || vy + r \u003c 0 || vy - r > H - 1) continue;\n    out.push({ t: vy + r, x: vx, y: vy, r, fired: -1e9 });\n    k++;\n  }\n  return k;\n}\n\n// The tables of one diagram: nearest weighted distance, its site, the\n// distance in LEDs to the nearest edge and the slope of D1(p) - (L - p.y),\n// which turns the beach line's level into a distance in LEDs too.\nfunction build(S, n, wk) {\n  S.n = n;\n  S.wk = wk;\n  const wmax = 0.5 * sqrt(N / n) * wk;\n  const { sx, sy, sw, d1, own, ed, g1, adj } = S;\n  for (let i = 0; i \u003c n; i++) sw[i] = wmax * S.sr[i];\n  adj.fill(0);\n  let lEnd = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p - x) / W;\n    let b1 = 1e9, b2 = 1e9, i1 = 0, i2 = 0, r1 = 1, r2 = 1;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = x - sx[i], dy = y - sy[i], r = sqrt(dx * dx + dy * dy), d = r - sw[i];\n      if (d \u003c b1) (b2 = b1), (i2 = i1), (r2 = r1), (b1 = d), (i1 = i), (r1 = r);\n      else if (d \u003c b2) (b2 = d), (i2 = i), (r2 = r);\n    }\n    d1[p] = b1;\n    own[p] = i1;\n    r1 = max(r1, 1e-3);\n    r2 = max(r2, 1e-3);\n    const ux = (x - sx[i1]) / r1, uy = (y - sy[i1]) / r1, vx = (x - sx[i2]) / r2, vy = (y - sy[i2]) / r2;\n    const ge = sqrt((ux - vx) * (ux - vx) + (uy - vy) * (uy - vy));\n    ed[p] = (b2 - b1) / max(0.3, ge);\n    g1[p] = sqrt(ux * ux + (uy + 1) * (uy + 1));\n    if (ed[p] \u003c 1.5) adj[i1 * MAXS + i2] = adj[i2 * MAXS + i1] = 1;\n    if (y + b1 > lEnd) lEnd = y + b1;\n  }\n  S.lEnd = lEnd + 1.5;\n  let ls = -3;\n  for (let i = 0; i \u003c n; i++) ls = min(ls, sy[i] - sw[i] - 1);\n  S.lStart = ls;\n  // Four tones, neighbours apart where the greedy pass manages it.\n  for (let i = 0; i \u003c n; i++) {\n    let used = 0;\n    for (let j = 0; j \u003c i; j++) if (adj[i * MAXS + j]) used |= 1 \u003c\u003c S.tone[j];\n    let t = S.pref[i];\n    for (let k = 0; k \u003c 4; k++) if (!(used & (1 \u003c\u003c ((S.pref[i] + k) & 3)))) {\n      t = (S.pref[i] + k) & 3;\n      break;\n    }\n    S.tone[i] = t;\n  }\n  const ev = [];\n  for (let a = 0; a \u003c n; a++) for (let b = a + 1; b \u003c n; b++) for (let c = b + 1; c \u003c n; c++) vertices(S, a, b, c, ev);\n  // Off-panel vertices whose circle would only touch the line after the\n  // last LED is certain never fire: about one in twelve.\n  S.ev = ev.filter((e) => e.t \u003c= S.lEnd).sort((u, v) => u.t - v.t);\n  S.evi = 0;\n  S.hue = NaN;\n}\n\n// Calm tones round the base hue. Where a tone lands on red, orange or\n// yellow it is paled and lifted, as a dark orange cell reads brown and a\n// dark yellow one olive on the panel; yellow is lifted most.\nconst TONES = [[0, 0.72, 0.52], [0.075, 0.6, 0.46], [-0.085, 0.62, 0.5], [0.025, 0.42, 0.6]];\nconst band = (v, a, b, e) => cl((v - a) / e, 0, 1) * cl((b - v) / e, 0, 1);\nfunction paint(S, hue) {\n  for (let i = 0; i \u003c S.n; i++) {\n    const tn = TONES[S.tone[i]], h = hue + 0.56 + tn[0], hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh;\n    const warm = band(hw, -0.06, 0.3, 0.05), yel = band(hw, 0.08, 0.32, 0.05);\n    hsv(h, tn[1] * (1 - 0.3 * warm - 0.15 * yel), tn[2] + 0.28 * warm + 0.14 * yel, S.col, i * 3);\n    hsv(h, 0.32, 1, S.tint, i * 3);\n    // The waiting diagram is the same tone at 40%, except that a dim\n    // orange or yellow is brown and a dim lime is olive whatever is done to\n    // it, so those ghosts lean to wine below the yellow and to green above.\n    // The turn is a jump: a blend of the two goes through olive again.\n    const gw = band(hw, -0.07, 0.33, 0.04);\n    hsv(h + gw * ((hw \u003c 0.11 ? -0.03 : 0.36) - hw), tn[1] * 0.85, tn[2] * DIM * 1.05, S.gh, i * 3);\n  }\n  S.hue = hue;\n}\n\nfunction startSweep(st) {\n  const t = st.old;\n  st.old = st.cur;\n  st.cur = t;\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  st.L = st.cur.lStart;\n  st.fade = 1;\n  st.hold = 0;\n}\n\nexport function setup(params) {\n  const st = (params.s = {\n    cur: newSet(), old: newSet(), n: 16, wk: 0.06, hue: 0, speed: 2, L: 0, fade: 0, hold: 0, clock: 0,\n    buf: new Float32Array(N * 3), acc: new Float32Array(3), edge: new Float32Array(3), pale: new Float32Array(3),\n  });\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  startSweep(st);\n  // Open a third of the way down a sweep, with the first diagram waiting below.\n  st.L = 36;\n  st.fade = 0;\n  for (const e of st.cur.ev) if (e.t \u003c= st.L) e.fired = -1e9;\n  while (st.cur.evi \u003c st.cur.ev.length && st.cur.ev[st.cur.evi].t \u003c= st.L) st.cur.evi++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const st = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  st.hue = k[0];\n  st.speed = cl(k[1], 0.2, 3);\n  st.clock += d;\n  const n = round(cl(k[2], 16, 48)), wk = cl(k[3], 0, 1);\n  if (n !== st.n || abs(wk - st.wk) > 0.002) {\n    st.n = n;\n    st.wk = wk;\n    // The diagram changes under the sweep: rebuild both, and treat the\n    // events the line has already passed as fixed, without a flash.\n    for (const S of [st.cur, st.old]) build(S, n, wk);\n    const C = st.cur;\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.evi++;\n    st.L = max(st.L, C.lStart);\n  }\n  if (input.btnPressed && input.btnPressed[0]) startSweep(st);\n  const C = st.cur;\n  if (st.fade > 0) st.fade = max(0, st.fade - d / 0.9);\n  if (st.L \u003c C.lEnd) {\n    st.L = min(C.lEnd, st.L + d * st.speed * ROWS);\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.ev[C.evi++].fired = st.clock;\n  } else if ((st.hold += d) >= HOLD) startSweep(st);\n}\n\nexport function draw(display, params) {\n  const st = params.s;\n  if (!st) return;\n  const C = st.cur, O = st.old, L = st.L, buf = st.buf, acc = st.acc, edge = st.edge, pale = st.pale;\n  if (C.hue !== st.hue) paint(C, st.hue);\n  if (O.hue !== st.hue) paint(O, st.hue);\n  // Gold for the line and the circles at Hue 0, opposite the cells.\n  const ah = st.hue + 0.125, ahh = ah - floor(ah);\n  hsv(ah, 0.62 - 0.2 * cl((ahh - 0.2) / 0.1, 0, 1) * cl((0.4 - ahh) / 0.1, 0, 1), 1, acc, 0);\n  hsv(st.hue + 0.56, 0.18, 1, edge, 0);\n  hsv(st.hue + 0.56, 0.1, 1, pale, 0);\n  const fd = st.fade, ok = DIM + (1 - DIM) * fd;\n  const Cc = C.col, Ct = C.tint, Oc = O.col, Og = O.gh;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    // Between the beach line and the sweep line nothing is known yet: the\n    // old diagram shows there at two thirds of its waiting level.\n    const zone = y \u003c L ? 0.62 : 1;\n    // The line is a full row at any L, with a soft second row as it moves.\n    const sw = cl(1 - (abs(y - L) - 0.5) / 0.6, 0, 1);\n    for (let x = 0; x \u003c W; x++, p++) {\n      const oo = O.own[p] * 3, oe = cl(1 - O.ed[p] / 0.9, 0, 1) * 0.75;\n      let r = ((Og[oo] + (Oc[oo] - Og[oo]) * fd) * (1 - oe) + edge[0] * oe * ok) * zone;\n      let g = ((Og[oo + 1] + (Oc[oo + 1] - Og[oo + 1]) * fd) * (1 - oe) + edge[1] * oe * ok) * zone;\n      let b = ((Og[oo + 2] + (Oc[oo + 2] - Og[oo + 2]) * fd) * (1 - oe) + edge[2] * oe * ok) * zone;\n      const f = C.d1[p] - (L - y), dist = f / max(0.5, C.g1[p]);\n      if (dist \u003c 1.2) {\n        const co = C.own[p] * 3, m = cl(0.5 - dist, 0, 1);\n        // Fresh ground just behind the beach line glows and settles over\n        // about four rows.\n        const glow = 0.5 * exp(-max(0, -dist) / 3.5);\n        let nr = Cc[co] + (Ct[co] - Cc[co]) * glow, ng = Cc[co + 1] + (Ct[co + 1] - Cc[co + 1]) * glow, nb = Cc[co + 2] + (Ct[co + 2] - Cc[co + 2]) * glow;\n        const e = cl(1 - C.ed[p] / 0.9, 0, 1) * 0.92;\n        nr += (edge[0] - nr) * e;\n        ng += (edge[1] - ng) * e;\n        nb += (edge[2] - nb) * e;\n        r += (nr - r) * m;\n        g += (ng - g) * m;\n        b += (nb - b) * m;\n        // The arc itself, a pale bright tint of its own site, whitening where\n        // an edge meets it: those meeting points are the breakpoints that\n        // trace the edges down.\n        const a = cl(1 - abs(dist) / 0.8, 0, 1);\n        if (a > 0) {\n          const wh = e * 0.8;\n          r += (Ct[co] + (pale[0] - Ct[co]) * wh - r) * a;\n          g += (Ct[co + 1] + (pale[1] - Ct[co + 1]) * wh - g) * a;\n          b += (Ct[co + 2] + (pale[2] - Ct[co + 2]) * wh - b) * a;\n        }\n      }\n      if (sw > 0) {\n        r += (acc[0] - r) * sw;\n        g += (acc[1] - g) * sw;\n        b += (acc[2] - b) * sw;\n      }\n      buf[p * 3] = r;\n      buf[p * 3 + 1] = g;\n      buf[p * 3 + 2] = b;\n    }\n  }\n  const put = (x, y, r, g, b, a) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    buf[o] += (r - buf[o]) * a;\n    buf[o + 1] += (g - buf[o + 1]) * a;\n    buf[o + 2] += (b - buf[o + 2]) * a;\n  };\n  // Weight circles, faint, for sites that carry more than 1.5 LEDs.\n  for (let i = 0; i \u003c C.n; i++) {\n    const w = C.sw[i];\n    if (w \u003c 1.5) continue;\n    const seen = C.sy[i] - w \u003c= L, a = seen ? 0.3 : 0.22;\n    for (let y = max(0, floor(C.sy[i] - w - 1)); y \u003c= min(H - 1, C.sy[i] + w + 1); y++)\n      for (let x = max(0, floor(C.sx[i] - w - 1)); x \u003c= min(W - 1, C.sx[i] + w + 1); x++) {\n        const dx = x - C.sx[i], dy = y - C.sy[i], q = 1 - abs(sqrt(dx * dx + dy * dy) - w) / 0.6;\n        if (q > 0) put(x, y, pale[0], pale[1], pale[2], a * q);\n      }\n  }\n  // Circle events: the empty circle flashes in the line's colour, touching\n  // the line at its foot, and the vertex it fixes keeps a gold point.\n  for (let j = 0; j \u003c C.evi; j++) {\n    const e = C.ev[j], age = st.clock - e.fired;\n    put(round(e.x), round(e.y), acc[0], acc[1], acc[2], 0.85);\n    if (age >= FLASH) continue;\n    const fa = (1 - age / FLASH) * (1 - age / FLASH), R = e.r;\n    put(round(e.x), round(e.y), 1, 1, 1, fa);\n    for (let y = max(0, floor(e.y - R - 1)); y \u003c= min(H - 1, e.y + R + 1); y++)\n      for (let x = max(0, floor(e.x - R - 1)); x \u003c= min(W - 1, e.x + R + 1); x++) {\n        const dx = x - e.x, dy = y - e.y, q = 1 - abs(sqrt(dx * dx + dy * dy) - R) / 0.65;\n        if (q > 0) put(x, y, acc[0], acc[1], acc[2], q * fa * 0.9);\n      }\n  }\n  // Sites: white once the line has reached them, a dim grey point before.\n  for (let i = 0; i \u003c C.n; i++) {\n    const x = round(C.sx[i]), y = round(C.sy[i]);\n    if (C.sy[i] - C.sw[i] \u003c= L) {\n      put(x, y, 1, 1, 1, 1);\n      put(x - 1, y, 1, 1, 1, 0.35);\n      put(x + 1, y, 1, 1, 1, 0.35);\n      put(x, y - 1, 1, 1, 1, 0.35);\n      put(x, y + 1, 1, 1, 1, 0.35);\n    } else put(x, y, 0.5, 0.5, 0.5, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, round(255 * min(1, buf[p * 3])), round(255 * min(1, buf[p * 3 + 1])), round(255 * min(1, buf[p * 3 + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green."},{"name":"Speed","min":0.2,"max":3,"about":"Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s."},{"name":"Sites","min":16,"max":48,"about":"How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77."},{"name":"Weights","min":0,"max":1,"about":"Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle."}],"start":[0,2,16,0.06],"measures":{"motion":0.3617,"detail":0.032,"edges":0.4248,"complexity":0.6651,"coverage":1,"colour":0.1845,"drift":0.1987},"knobResponse":[0.2392,0.1674,0.1095,0.0757]},{"slug":"foxfire","title":"Foxfire","family":"fungi","round":19,"note":"밤 숲 바닥 단면에서 뽕나무버섯 균사가 그루터기와 통나무, 흙 속을 기어가며 갈라지고 실을 따라 연둣빛 펄스가 흘러요. 버섯 무리가 돋았다 시들며 숨 쉬듯 빛나고 포자가 위로 떠올라요. K1 을 누르면 피어 있는 갓이 한꺼번에 포자를 뿜어요.","idea":"A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.","buttons":"K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.","code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","layer":{"id":"layer-foxfire","type":"code","name":"foxfire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower."},{"name":"Spores","min":0,"max":1,"about":"How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel."},{"name":"Damp","min":0,"max":1,"about":"How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them."}],"start":[0,2,0,0.06],"measures":{"motion":0.0552,"detail":0.062,"edges":0.4422,"complexity":2.0011,"coverage":0.1963,"colour":0.1249,"drift":0.0326},"knobResponse":[0.0328,0.0383,0.0467,0.0368]},{"slug":"frost","title":"Frost","family":"fractal","round":17,"note":"밤 유리창에 서리 고사리가 아래 틀과 창틀에서 자라 들어와요. 가지는 대각선으로 곧게 뻗어 깃털처럼 곁가지를 내며 반짝이고, 유리 너머로 가로등과 눈발이 흐리게 비치다가 방이 데워지면 가운데부터 녹아 다시 자라요. K1 을 누르면 입김이 가운데를 닦아요.","idea":"Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.","buttons":"K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.","code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","layer":{"id":"layer-frost","type":"code","name":"frost","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun."},{"name":"Rime","min":0,"max":1,"about":"How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame."},{"name":"Glitter","min":0,"max":1,"about":"How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling."}],"start":[0,2,0,0.06],"measures":{"motion":0.0377,"detail":0.1373,"edges":0.4636,"complexity":2.383,"coverage":0.4303,"colour":0.1004,"drift":0.0382},"knobResponse":[0.0509,0.1276,0.1564,0.0602]},{"slug":"funicular","title":"Funicular","family":"rail","round":27,"note":"해 질 녘 산비탈에서 계단꼴 객차 둘이 케이블 하나에 매달려 오르내려요. 호숫가 마을의 역을 떠난 빨간 객차가 오르는 동안 꼭대기 기관실의 큰 바퀴가 돌며 파란 객차가 내려오고, 둘은 중턱의 압트 교행 구간에서 갈라진 선로로 비켜 지나가요. K1 을 끝까지 돌리면 창이 켜진 밤이 되고, 누르면 객차가 바로 떠나요.","idea":"Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.","buttons":"K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.","code":"// ===== Patternflow pattern =====\n// Title:   Funicular\n// Family:  rail\n// Idea:    Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the two-car funicular with an Abt passing loop\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1\n//\n// Knob 1: Dusk. Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit.\n// Knob 2: Speed. At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower.\n// Knob 3: Grade. How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher.\n// Knob 4: Snow. A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel.\n// Buttons: K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i | 0, 374761393) + Math.imul(j | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nconst ridge = (t, s) => 1 - abs(2 * vn(t, s) - 1);\n// True draws only the line: track, cable, cars and stations.\nconst BARE = false;\n\n// Rows of the valley end and the summit end of the track and of the quay. The bullwheel's radius.\nconst YA = 112, YB = 30, QY = 121, R = 5.5;\n// Seconds a run and a stop take at Speed 1.\nconst RUN = 16, DWELL = 6;\n\n// Each colour from blue hour, its first three numbers, to night, its last three.\nconst PAL = {\n  s0:[12,26,82,5,11,42,1,3,12], s1:[44,70,150,14,28,80,3,8,26], s2:[134,118,180,46,52,112,8,16,40],\n  s3:[240,164,124,116,76,100,20,26,52], far:[62,68,122,26,30,70,8,11,28], haze:[112,100,152,46,44,86,12,15,34],\n  fsn:[240,184,198,120,112,160,40,46,76], fsd:[140,144,196,66,70,122,24,30,56], far2:[36,48,90,14,20,50,4,7,18],\n  trL:[44,84,70,22,42,46,9,18,22], trD:[20,44,48,10,22,30,5,10,16], und:[9,22,26,5,11,16,2,5,9],\n  rock:[100,96,126,48,50,80,17,19,30], rockD:[46,46,76,22,24,46,7,9,17], snow:[236,206,222,140,140,180,54,60,88],\n  snowD:[146,156,206,76,84,136,28,34,60], bed:[56,52,54,30,28,32,12,12,15], rail:[190,188,200,120,120,140,70,70,84],\n  slp:[38,32,32,20,17,19,8,7,9], roof:[70,62,66,34,30,36,14,12,16], conc:[120,116,120,60,58,64,26,26,30],\n  stone:[130,122,116,64,60,62,26,24,28], lake:[26,38,92,10,14,40,2,4,12], cLo:[236,150,140,104,72,104,18,20,34],\n  cHi:[98,90,146,34,36,74,8,10,22],\n};\n// Town walls: cream, ochre, pink, blue-grey, white.\nconst HOUSE = [[178, 152, 112], [192, 132, 62], [184, 106, 112], [84, 132, 140], [184, 180, 188]];\nconst WARM = [255, 196, 108], LAMP = [255, 226, 168], STEEL = [224, 220, 206];\nconst LIV = [[206, 34, 30], [34, 84, 196]], DK = [40, 40, 44], TILE = [128, 60, 46];\nconst lerp3 = (p, k, i = k \u003c 0.5 ? 0 : 3, f = k * 2 - i / 3) => [0, 1, 2].map((c) => mix(p[i + c], p[i + 3 + c], f));\n\n// The line for a grade: its ends, its direction u, the normal n to its lower\n// right, the passing loop, and the shape of a car column by column.\nfunction geom(g) {\n  const xA = mix(8, 17, g), xB = mix(50, 43, g), L = hypot(xB - xA, YB - YA);\n  const ux = (xB - xA) / L, uy = (YB - YA) / L, tp = -uy / ux, hb = round(3 * tp + 3.2);\n  const Lca = 10 / ux, aLo = Lca / 2 + 1.5, aHi = L - Lca / 2 - 1.5;\n  const G = { xA, L, ux, uy, nx: -uy, ny: ux, tp, hb, Lca, aLo, aHi, aM: (aLo + aHi) / 2, hs: Lca / 2 + 2, lt: 13, WL: 4.6 };\n  // Columns 0..9: three compartments of three and the end wall, each floor level, so the car climbs in steps.\n  for (const k of [\"ct\", \"cf\", \"cr\"]) G[k] = new Int8Array(10);\n  let vr = 0;\n  for (let c = 0; c \u003c 10; c++) {\n    const fl = floor(-((c > 8 ? 2 : floor(c / 3)) * 3 - 2) * tp) - 2;\n    G.cf[c] = fl; G.ct[c] = fl - hb + 1; G.cr[c] = round(-(c - 4.5) * tp - 0.5);\n    vr = max(vr, -(c - 4.5) * tp - G.ct[c]);\n  }\n  G.VR = vr + 2;\n  // The bullwheel: the cable runs off the top of the track onto its left side.\n  G.wx = xB + 3 * ux + R * G.nx; G.wy = YB + 3 * uy + R * G.ny; G.px = xB - 5;\n  return G;\n}\nconst bump = (G, a) => sm(G.aM - G.hs - G.lt, G.aM - G.hs, a) * (1 - sm(G.aM + G.hs, G.aM + G.hs + G.lt, a));\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F(N * 3), bg: F(N * 3), A: F(N), D: F(N), SK: new Uint8Array(N), tk: new Int32Array(N), ntk: 0,\n    win: new Int32Array(900), wth: F(900), nw: 0, lamp: [], k1: -1, g: -1, k4: -1, G: null, c: {},\n    run: 0, tm: 1, dir: 1, pa: 0, wh: 0, flash: 0, lampsOn: 1, lampF: 300, t: 0, stars: [], fl: [], cx: 40, cl: F(128 * 64), houses: [],\n  });\n  // Clouds: streaks of soft noise in a strip that wraps every 128 columns.\n  const n = (X, y) => 0.6 * vn(X * 0.045, y * 0.22) + 0.4 * vn(X * 0.12 + 5, y * 0.45);\n  for (let i = 0; i \u003c 8192; i++) S.cl[i] = mix(n(i & 127, i >> 7), n((i & 127) + 128, i >> 7), (i & 127) / 128);\n  for (let i = 0; i \u003c 110; i++) S.stars.push({ x: floor(rnd() * W), y: floor(rnd() * 100), b: 0.25 + 0.75 * rnd() ** 2, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 260; i++) S.fl.push({ x: rnd() * W, y: rnd() * H, v: 0.6 + 0.8 * rnd(), ph: rnd() * TAU, z: rnd() });\n  // The town: a row of taller houses up the bank with a church, and a lower row on the quay.\n  for (const [b, i0, h0, hr] of [[QY - 6, 0, 7, 7], [QY - 1, 50, 4, 4]])\n    for (let x = i0 ? -2 : 0, i = i0; x \u003c W; i++) {\n      const ch = !i0 && x > 38 && !S.ch, w = ch ? 5 : 4 + floor(hash(i, 1) * 4);\n      if (ch) S.ch = 1;\n      S.houses.push({ x, b, w, h: ch ? 16 : h0 + floor(hash(i, 2) * hr), c: floor(hash(i, 3) * 5), ch, gab: hash(i, 4) \u003c 0.75 });\n      x += w + (i0 ? 1 + floor(hash(i, 5) * 3) : hash(i, 5) \u003c 0.2 ? 1 : 0);\n    }\n}\n\nfunction build(S, k1, g, k4) {\n  S.k1 = k1; S.g = g; S.k4 = k4; S.nw = 0; S.lamp.length = 0;\n  const G = (S.G = geom(g)), C = S.c, bg = S.bg, o = [0, 0, 0];\n  for (const key in PAL) C[key] = lerp3(PAL[key], k1);\n  const amb = mix(1, 0.3, k1), snl = 30 + 112 * k4 ** 0.75;\n  let ntk = 0;\n  const setc = (c, m = 1) => ((o[0] = c[0] * m), (o[1] = c[1] * m), (o[2] = c[2] * m));\n  const blend = (c, t) => ((o[0] = mix(o[0], c[0], t)), (o[1] = mix(o[1], c[1], t)), (o[2] = mix(o[2], c[2], t)));\n  const ad = (px, py) => [(px - G.xA) * G.ux + (py - YA) * G.uy, (px - G.xA) * G.nx + (py - YA) * G.ny];\n  const dg = (a) => 7 + 6 * bump(G, a) + 1.6 * vn(a * 0.2, 4);\n  const inBed = (a, d, of = G.WL * bump(G, a)) => a >= -1.5 && a \u003c= G.L + 1 && (abs(d + of) \u003c 2.7 || abs(d - of) \u003c 2.7);\n  const f1 = (x) => 46 + 22 * (1 - ridge(x * 0.07 + 3.3, 1.7)) + 3 * vn(x * 0.4, 5);\n  const f2 = (x) => 74 + 12 * (1 - ridge(x * 0.1 + 11, 2.3)) + 2 * vn(x * 0.5, 8);\n  const pk = (x) => 2 + (x \u003c G.px ? (G.px - x) * 2.6 : (x - G.px) * 1.7) + 4 * (vn(x * 0.3, 9) - 0.5);\n  const tl = (x) => 50 + 8 * (vn(x * 0.12, 2) - 0.5);\n  const face = (a, d) => d > -dg(a);\n  // Rock with strata and snow lying in the gullies.\n  const rock = (px, py, side) => {\n    const fa = vn(px * 0.16 + 3, py * 0.07), lit = side > 0 ? fa > 0.32 : fa > 0.72;\n    setc(lit ? C.rock : C.rockD, 0.82 + 0.3 * vn(px * 0.4, py * 0.2));\n    const st = ((py * 0.8 - px * 0.5 + 4 * vn(px * 0.08, py * 0.08)) / 5) % 1;\n    if (st \u003c 0.16) blend(C.rockD, 0.7);\n    const sn = sm(0.56, 0.66, 0.6 * vn(px * 0.3 + 5, py * 0.12) + 0.4 * vn(px * 0.8, py * 0.35) + (snl - py) / 160 + k4 * 0.5 - (st \u003c 0.3 ? 0.1 : 0));\n    if (sn > 0) blend(lit ? C.snow : C.snowD, sn);\n  };\n  // Firs on a jittered grid of cells three wide and four tall, the nearest in front.\n  const tree = (px, py) => {\n    const cx = floor(px / 3), cy = floor(py / 4);\n    let best = -1, tx = 0, ty = 0, th = 0;\n    for (let j = 0; j \u003c 3; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const X = cx + i, Y = cy - j, ax = (X + 0.2 + 0.6 * hash(X, Y)) * 3, ay = (Y + hash(Y, X + 7)) * 4, hh = 4 + 3 * hash(X + 3, Y);\n        if (py \u003c ay || py > ay + hh || abs(px - ax) > (py - ay) * 0.45 + 0.35 || ay + hh \u003c= best) continue;\n        const [ra, rd] = ad(ax, ay + hh);\n        if (!face(ra, rd) || inBed(ra, rd) || ay + hh \u003c tl(ax) || ay + hh > QY - 6) continue;\n        (best = ay + hh), (tx = ax), (ty = ay), (th = hh);\n      }\n    if (best \u003c 0) return 0;\n    setc(px \u003c tx ? C.trL : C.trD, 0.85 + 0.3 * hash(floor(tx), floor(ty)));\n    if (ty + th \u003c snl + 6 * (hash(floor(tx), 3) - 0.5) && py - ty \u003c th * 0.55) blend(C.snow, 0.75);\n    return 1;\n  };\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = y * W + x, px = x + 0.5, py = y + 0.5, [a, d] = ad(px, py);\n      S.A[k] = a; S.D[k] = d; S.SK[k] = 0;\n      // Sky: blue overhead going lavender lower down, with a peach glow behind the far peaks in the west.\n      const t = py / 104, s = t \u003c 0.4 ? 0 : t \u003c 0.76 ? 1 : 2, ft = s ? (t - [0, 0.4, 0.76][s]) / (s > 1 ? 0.24 : 0.36) : t / 0.4;\n      const sa = [C.s0, C.s1, C.s2][s], sb = [C.s1, C.s2, C.s3][s];\n      for (let c = 0; c \u003c 3; c++) o[c] = mix(sa[c], sb[c], sm(0, 1, ft));\n      blend(C.s3, 0.35 * exp(-max(0, 100 - py) / 18) * (1 - px / 90));\n      let sky = 1;\n      if (py >= f1(px)) {\n        // The far range in haze, snow on the peaks that stand highest.\n        const top = f1(px), lit = f1(px + 1) >= f1(px - 1);\n        setc(C.far); blend(C.haze, cl((py - top) / 28, 0, 0.8));\n        const sd = sm(0.5, 0.62, 0.55 * vn(px * 0.7, py * 0.3) + 0.45 * vn(px * 1.6, py * 0.8) + (54 - py) / 14 + k4 * 0.5);\n        if (sd > 0) blend(lit ? C.fsn : C.fsd, sd);\n        sky = 0;\n      }\n      if (py >= f2(px)) {\n        setc(C.far2, 0.85 + 0.25 * vn(px * 0.6, py * 0.6));\n        blend(C.haze, cl((py - f2(px)) / 30, 0, 0.35));\n        if (k4 > 0.3 && py \u003c f2(px) + 3 * k4 + 1) blend(C.snowD, 0.6 * k4);\n        sky = 0;\n      }\n      if (py >= pk(px)) (sky = 0), rock(px, py, px \u003c G.px ? 1 : -1);\n      if (face(a, d) && py \u003c QY) {\n        sky = 0;\n        if (py \u003c tl(px)) rock(px, py, d \u003c 2 || vn(px * 0.2, py * 0.2) > 0.5 ? 1 : -1);\n        else if (!tree(px, py)) setc(C.und, 0.8 + 0.4 * hash(x, y)), blend(C.snowD, 0.75 * sm(4, -4, py - snl + 6 * vn(px * 0.3, py * 0.1)));\n      } else if (py \u003c QY && py > 30 && d > -dg(a) - 8 && tree(px, py)) sky = 0;\n      S.SK[k] = sky;\n      if (BARE) setc(o, 0);\n      // The track bed: gravel, sleepers, two rails a track, rollers between them.\n      if (inBed(a, d)) {\n        const of = G.WL * bump(G, a), best = min(abs(d - of), abs(d + of));\n        setc(C.bed, 0.94 + 0.12 * hash(x * 7, y * 3));\n        if (best \u003c 2.2 && (a / 2.4) % 1 \u003c 0.4) blend(C.slp, 0.4);\n        if (best \u003c 0.6 && (a / 6) % 1 \u003c 0.2) setc(C.rail, 0.35);\n        if (abs(abs(d - of) - 1.8) \u003c 0.56 || abs(abs(d + of) - 1.8) \u003c 0.56) setc(C.rail, 0.9 + 0.1 * hash(x, y));\n        S.tk[ntk++] = k;\n      }\n      bg[k * 3] = o[0]; bg[k * 3 + 1] = o[1]; bg[k * 3 + 2] = o[2];\n    }\n  S.ntk = ntk;\n  const put = (x, y, c, t = 1, m = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    for (let i = 0, k = (y * W + x) * 3; i \u003c 3; i++) bg[k + i] = mix(bg[k + i], c[i] * m, t);\n  };\n  const glow = (x, y, s) => {\n    for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) put(x + i, y + j, LAMP, s * exp(-(i * i + j * j) / 1.44));\n    put(x, y, LAMP);\n  };\n  // A crescent moon once it is dark.\n  const mo = sm(0.45, 0.85, k1);\n  if (mo > 0 && !BARE)\n    for (let y = 6; y \u003c 22; y++)\n      for (let x = 6; x \u003c 22; x++) {\n        const r1 = hypot(x + 0.5 - 14, y + 0.5 - 13), m = cl(4.3 - r1, 0, 1) * cl(hypot(x + 0.5 - 16.2, y + 0.5 - 11.8) - 3.6, 0, 1);\n        if (!S.SK[y * W + x]) continue;\n        if (m > 0) put(x, y, [236, 230, 196], m * mo);\n        else if (r1 \u003c 10) put(x, y, [70, 76, 110], 0.5 * mo * exp(-(r1 - 4) / 2.5));\n      }\n\n  // The town, the back row stopping short of the valley station.\n  const town = (front) => {\n    if (BARE) return;\n    for (const h of S.houses) {\n      if ((h.b === QY - 1) !== front || (h.x + h.w > G.xA - 9 && h.x \u003c (front ? G.xA - 1 : G.xA + (G.Lca + 6) * G.ux))) continue;\n      const base = h.b, top = base - h.h, m = amb * (front ? 0.88 : 0.7), sn = snl > base - 3;\n      for (let x = h.x; x \u003c min(W, h.x + h.w); x++) {\n        for (let y = top; y \u003c= base; y++) put(x, y, HOUSE[h.c], 1, m * (x === h.x + h.w - 1 ? 0.72 : 1));\n        const rr = h.gab ? h.w / 2 + 0.5 - abs(x + 0.5 - (h.x + h.w / 2)) : 1;\n        for (let y = floor(top - rr); y \u003c top; y++) put(x, y, sn ? C.snow : h.c & 1 ? TILE : [64, 68, 88], 1, sn ? 1 : m);\n      }\n      if (h.ch) {\n        for (let y = top - 9; y \u003c top - 2; y++) for (let i = -1; i \u003c 2; i++) (!i || y > top - 6) && put(h.x + 2 + i, y, C.roof, 1, 1.4);\n        put(h.x + 2, top + 2, [250, 236, 190], 1, 0.9);\n      }\n      for (let wy = base - 2; wy > top + 1 + (h.ch ? 3 : 0); wy -= 3)\n        for (let wx = h.x + 1; wx \u003c h.x + h.w - 1; wx += 2) if (S.nw \u003c 900) (S.win[S.nw] = wy * W + wx), (S.wth[S.nw++] = hash(wx, wy)), put(wx, wy, [30, 24, 30], 1, amb + 0.3);\n    }\n  };\n  town(false);\n  // Stations: a tiled roof on pillars over the platform where a car stands, lit underneath.\n  const yT = (px) => YA - (px - G.xA) * G.tp;\n  const shed = (a0, a1) => {\n    const x0 = floor(G.xA + a0 * G.ux), x1 = ceil(G.xA + a1 * G.ux);\n    for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n      const px = x + 0.5, ac = (px - G.xA) / G.ux, ty = yT(px), end = x === x0 || x === x1 || x === round((x0 + x1) / 2);\n      if (ac \u003c a0 || ac > a1) continue;\n      for (let y = floor(ty - G.VR - 4); y \u003c= ceil(ty + 6); y++) {\n        const v = ty - (y + 0.5);\n        if (v > G.VR && v \u003c= G.VR + 3.4) v > G.VR + 2.3 ? put(x, y, y \u003c snl ? C.snow : [150, 76, 58], 1, y \u003c snl ? 1.1 : amb) : put(x, y, [118, 54, 42], 1, amb * (v > G.VR + 1.2 ? 1 : 0.55));\n        else if (v > 0.6 && v \u003c= G.VR) end ? put(x, y, [46, 42, 46]) : put(x, y, LAMP, 0.06 + 0.3 * exp(-(G.VR - v) / 4));\n        else if (v \u003c= 0.6 && v > -5.5 && !inBed(...ad(px, y + 0.5))) put(x, y, y % 3 ? C.conc : C.roof), put(x, y, LAMP, 0.18 + 0.12 * k1);\n      }\n    }\n    for (const f of [0.3, 0.72]) {\n      const px = G.xA + mix(a0, a1, f) * G.ux;\n      glow(floor(px), floor(yT(px) - G.VR + 1), 0.3 + 0.3 * k1);\n    }\n  };\n  shed(-2.5, G.Lca + 4.5);\n  shed(G.L - G.Lca - 4.5, G.L + 1.5);\n  // The valley station hall left of the track, an arched window over a lit door on the quay.\n  const vx0 = max(0, floor(G.xA - 9)), vx1 = floor(G.xA) - 1, vy0 = YA - 12, vc = (vx1 + 1 + max(vx0, G.xA - 9)) / 2;\n  for (let x = vx0; x \u003c= vx1; x++) {\n    for (let y = vy0; y \u003c QY; y++) put(x, y, HOUSE[0], 1, amb * (x === vx1 ? 0.7 : 0.95));\n    for (let y = floor(vy0 - 5.5 + abs(x + 0.5 - vc) * 1.2); y \u003c vy0; y++) put(x, y, y \u003c snl ? C.snow : TILE, 1, y \u003c snl ? 1 : amb);\n  }\n  for (let y = vy0 + 2; y \u003c QY; y++)\n    for (let x = floor(vc - 1.5); x \u003c vc + 1.5; x++)\n      if (y \u003c vy0 + 9 ? y > vy0 + 2 || abs(x + 0.5 - vc) \u003c 1 : y >= QY - 4 && abs(x + 0.5 - vc) \u003c 1) put(x, y, WARM, 0.92, mix(0.85, 1, k1));\n  town(true);\n\n  // The engine house on the summit, with the bullwheel behind its lit round window.\n  const ex0 = floor(G.wx - 8), ey0 = floor(G.wy - 8);\n  for (let y = ey0 - 6; y \u003c= G.wy + 8; y++)\n    for (let x = ex0; x \u003c W; x++) {\n      const rh = y - (ey0 - 6 + abs(x + 0.5 - G.wx) * 0.62), r = hypot(x + 0.5 - G.wx, y + 0.5 - G.wy);\n      if (r \u003c R + 1.2) put(x, y, [255, 200, 120], 1, mix(0.9, 1, k1) * (1 - 0.15 * r / R));\n      else if (y \u003c ey0) rh >= 0 && put(x, y, k4 > 0.05 && rh \u003c 1.2 ? C.snow : C.roof, 1, 1.2);\n      else put(x, y, C.stone, 1, (0.85 + 0.15 * (((y >> 1) + (x >> 2)) & 1)) * (x === ex0 ? 0.6 : 1));\n    }\n  // Lamps on posts beside the line, every nine steps.\n  for (let a = 7; a \u003c G.L - 6; a += 9) {\n    const of = G.WL * bump(G, a) + 5.6, lx = floor(G.xA + a * G.ux + of * G.nx), ly = floor(YA + a * G.uy + of * G.ny);\n    put(lx, ly + 1, DK), put(lx, ly + 2, DK), S.lamp.push(lx, ly, a);\n  }\n  if (!BARE)\n    for (let x = 0; x \u003c W; x++) {\n      put(x, QY, C.stone, 1, 0.8);\n      if (x % 8 === 4) put(x, QY - 1, DK), put(x, QY - 2, DK), glow(x, QY - 3, 0.12 + 0.25 * k1);\n    }\n}\n\n// Along a run the cars speed up for the first seventh and slow down for the last.\nfunction prof(t) {\n  const ta = 0.14, v = 1 / (1 - ta);\n  return t \u003c ta ? (v * t * t) / (2 * ta) : t \u003c 1 - ta ? v * (t - ta / 2) : 1 - (v * (1 - t) * (1 - t)) / (2 * ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues, h = min(dt, 0.1), sp = cl(kv[1], 0.2, 3) / 2, bp = input.btnPressed;\n  const k1 = cl(kv[0], 0, 1), g = cl(kv[2], 0, 1), k4 = cl(kv[3], 0, 1);\n  if (abs(k1 - S.k1) > 0.003 || abs(g - S.g) > 0.003 || abs(k4 - S.k4) > 0.003) build(S, k1, g, k4);\n  if (bp[0]) S.run ? (S.flash = 1) : (S.tm = min(S.tm, 0.8));\n  if (bp[1]) (S.lampsOn = 1 - S.lampsOn), (S.lampF = -10);\n  S.lampF += h * 40;\n  S.cx += h * sp * 3.6;\n  S.flash = max(0, S.flash - h);\n  S.t += h * sp;\n  const was = S.pa;\n  if (!S.run) {\n    S.tm -= h * sp * 2;\n    if (S.tm \u003c= 0) (S.run = 1), (S.tm = 0);\n  } else {\n    S.tm = min(1, S.tm + (h * sp * 2) / RUN);\n    S.pa = S.dir > 0 ? prof(S.tm) : 1 - prof(S.tm);\n    if (S.tm >= 1) (S.run = 0), (S.tm = DWELL), (S.dir = -S.dir);\n  }\n  S.wh += ((S.pa - was) * (S.G.aHi - S.G.aLo)) / R;\n  for (const q of S.fl) {\n    q.y += h * (6 + 12 * q.z) * q.v;\n    q.x = (q.x + h * (2.5 * sin(S.t * 0.7 + q.ph) - 1.5) + W) % W;\n    if (q.y > H) (q.y -= H + 2), (q.x = rnd() * W);\n  }\n}\n\nfunction drawCar(S, f, ac, side, liv, up, k1) {\n  const G = S.G, o = side * G.WL * bump(G, ac), Px = G.xA + ac * G.ux + o * G.nx, Py = YA + ac * G.uy + o * G.ny;\n  const x0 = round(Px - 5), ay = round(Py - (x0 + 5 - Px) * G.tp), hb = G.hb, lm = mix(1, 0.5, k1), fl = S.flash > 0 && (S.flash * 6) % 1 \u003c 0.5;\n  for (let c = 0; c \u003c 10; c++) {\n    const x = x0 + c, glass = c % 3 && c \u003c 9, b = c > 8 ? 2 : floor(c / 3);\n    if (x \u003c 0 || x >= W) continue;\n    for (let r = G.ct[c]; r \u003c= G.cr[c]; r++) {\n      const y = ay + r, rr = r - G.ct[c], q = (y * W + x) * 3;\n      if (y \u003c 0 || y >= H) continue;\n      let [cr, cg, cb] = liv, m = lm;\n      if (r === G.cr[c]) (cr = cg = cb = c === 1 || c === 8 ? 20 : 68);\n      else if (r > G.cf[c]) m *= 0.62;\n      else if (rr === 0) (cr = 210), (cg = 206), (cb = 196);\n      else if (rr === hb - 3) {\n        (cr = 228), (cg = 214), (cb = 180);\n        if (c === (up ? 9 : 0)) (cr = 255), (cg = 250), (cb = fl ? 120 : 220), (m = 1);\n        if (c === (up ? 0 : 9)) (cr = 255), (cg = 30), (cb = 20), (m = 1);\n      } else if (glass && rr >= 2 && rr \u003c= hb - 4) {\n        // Lit windows, a passenger's head and shoulders in some.\n        const head = rr >= hb - 5 && c % 3 === 1 + (hash(b, liv[2]) \u003c 0.5) && hash(b * 3, liv[2]) \u003c 0.7;\n        (cr = head ? 60 : 255), (cg = head ? 40 : 214), (cb = head ? 36 : 150), (m = 1);\n      }\n      f[q] = cr * m; f[q + 1] = cg * m; f[q + 2] = cb * m;\n    }\n  }\n  // The headlamp's beam on the track ahead.\n  const dr = up ? 1 : -1, ae = ac + (dr * G.Lca) / 2, bs = mix(0.16, 0.36, k1) * (fl ? 2.5 : 1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], s = (S.A[k] - ae) * dr, w = abs(S.D[k] - side * G.WL * bump(G, S.A[k])) - 0.8 - s * 0.08, e = bs * (1 - s / 15) ** 2 * cl(1 - w, 0, 1);\n    if (s >= 0 && s \u003c 15) (f[k * 3] += 255 * e), (f[k * 3 + 1] += 236 * e), (f[k * 3 + 2] += 190 * e);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S.G) build(S, 0, 0, 0.06);\n  const G = S.G, f = S.f, k1 = S.k1, k4 = S.k4, t = S.t, C = S.c;\n  f.set(S.bg);\n  if (!BARE) {\n    // Stars come out as it gets dark; the evening star is there from the start.\n    const sv = sm(0.1, 0.7, k1);\n    for (const s of S.stars) {\n      const k = s.y * W + s.x, e = sv * s.b * (0.7 + 0.3 * sin(time * (2 + s.ph / 3) + s.ph)) * (1 - s.y / 130);\n      if (S.SK[k]) (f[k * 3] += 220 * e), (f[k * 3 + 1] += 224 * e), (f[k * 3 + 2] += 240 * e);\n    }\n    // Two bands of cloud drifting east, lit underneath while the glow lasts.\n    const ox = floor(S.cx), fx = S.cx - ox;\n    for (let y = 2; y \u003c 62; y++) {\n      const band = exp(-(((y - 12) / 7) ** 2)) + 0.9 * exp(-(((y - 38) / 8) ** 2)), i0 = y * 128;\n      for (let x = 0; x \u003c W; x++) {\n        if (!S.SK[y * W + x] || band \u003c 0.05) continue;\n        const d0 = mix(S.cl[i0 + ((x - ox) & 127)], S.cl[i0 + ((x - ox - 1) & 127)], fx), d1 = S.cl[min(63, y + 2) * 128 + ((x - ox) & 127)];\n        const e = sm(0.44, 0.68, d0 * 0.8 + band * 0.44 - 0.1) * 0.9, lit = cl(0.45 + (d0 - d1) * 3 + (y - 30) / 60, 0, 1), q = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) f[q + c] = mix(f[q + c], mix(C.cHi[c], C.cLo[c], lit), e);\n      }\n    }\n    const vk = (52 * W + 11) * 3;\n    if (S.SK[vk / 3]) (f[vk] += 255), (f[vk + 1] += 246), (f[vk + 2] += 220);\n    // Windows in town: more lit as night comes, now and then one going on or off.\n    const pl = mix(0.42, 0.86, k1);\n    for (let i = 0; i \u003c S.nw; i++) {\n      const th = S.wth[i], k = S.win[i] * 3, m = 0.8 + 0.2 * hash(i, 9);\n      if (th \u003c pl + 0.05 * sin(t * 0.4 + th * 60)) (f[k] = WARM[0] * m), (f[k + 1] = WARM[1] * m), (f[k + 2] = WARM[2] * m);\n    }\n  }\n  // Lamps along the line.\n  for (let i = 0; i \u003c S.lamp.length; i += 3) {\n    const [x, y, a] = S.lamp.slice(i, i + 3), e = mix(0.55, 1, k1) * (S.lampsOn ? cl((S.lampF - a) / 4, 0, 1) : 1 - cl((S.lampF - G.L + a) / 4, 0, 1));\n    for (let j = -2; j \u003c= 2; j++)\n      for (let ii = -2, q = ((y + j) * W + x - 2) * 3; ii \u003c= 2; ii++, q += 3) {\n        const g = j || ii ? e * 0.35 * mix(0.3, 1, k1) * exp(-(ii * ii + j * j) / 2) : e;\n        if (x + ii >= 0 && x + ii \u003c W) for (let c = 0; c \u003c 3; c++) f[q + c] += LAMP[c] * g;\n      }\n  }\n  // The cable: a strand from each car up to the bullwheel, its lay sliding with it.\n  const aA = mix(G.aLo, G.aHi, S.pa), aB = G.aLo + G.aHi - aA, lm = mix(1, 0.55, k1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], a = S.A[k], d = S.D[k], of = G.WL * bump(G, a);\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const ac = s \u003c 0 ? aA : aB;\n      if (a \u003c ac + G.Lca / 2 - 0.5 || a > G.L + 2 || abs(d - s * of - s * 0.25) >= 0.55) continue;\n      const tx = (0.5 + 0.5 * cos((TAU * (a - ac)) / 3)) ** 2;\n      for (let c = 0; c \u003c 3; c++) f[k * 3 + c] = mix([78, 72, 70][c], STEEL[c], tx) * lm;\n      break;\n    }\n  }\n  // The cars: red on the upper track of the loop, blue on the lower.\n  const upA = S.run ? S.dir > 0 : S.dir \u003c 0;\n  drawCar(S, f, aA, -1, LIV[0], upA, k1);\n  drawCar(S, f, aB, 1, LIV[1], !upA, k1);\n  // The bullwheel turning behind the round window, six spokes on a hub.\n  for (let y = floor(G.wy - R - 1); y \u003c= G.wy + R + 1; y++)\n    for (let x = floor(G.wx - R - 1); x \u003c= min(W - 1, G.wx + R + 1); x++) {\n      const dx = x + 0.5 - G.wx, dy = y + 0.5 - G.wy, r = hypot(dx, dy), an = atan2(dy, dx) - S.wh;\n      const m = ((an % (PI / 3)) + PI / 3) % (PI / 3), sd = r * sin(min(m, PI / 3 - m));\n      if (r \u003c= R + 0.6 && (abs(r - R + 0.7) \u003c 0.75 || (r \u003c R - 1 && sd \u003c 0.5) || r \u003c 1.4)) f.set([34, 28, 30], (y * W + x) * 3);\n    }\n  // The lake: the quay and the town upside down, rippling.\n  if (!BARE)\n    for (let y = QY + 1; y \u003c H; y++) {\n      const dy = y - QY, sh = round(0.8 * sin(t * 0.9 + y * 1.3)), m = (0.95 - dy * 0.08) / 255;\n      for (let x = 0; x \u003c W; x++) for (let c = 0, q = (y * W + x) * 3, p = ((QY - dy) * W + cl(x + sh, 0, W - 1)) * 3; c \u003c 3; c++) f[q + c] = C.lake[c] * (1 + (y & 1) * 0.2) + f[p + c] ** 2 * m;\n    }\n  // Falling snow.\n  const nf = floor(cl((k4 - 0.1) / 0.9, 0, 1) * 260), sc = mix(235, 120, k1);\n  for (let i = 0; i \u003c nf; i++) {\n    const q0 = S.fl[i], q = (floor(q0.y) * W + floor(q0.x)) * 3, e = 0.45 + 0.55 * q0.z;\n    if (q0.y >= 0 && q0.y \u003c H) (f[q] = mix(f[q], sc, e)), (f[q + 1] = mix(f[q + 1], sc, e)), (f[q + 2] = mix(f[q + 2], sc * 1.06, e));\n  }\n  for (let k = 0, j = 0; k \u003c N; k++, j += 3) display.setPixel(k & 63, k >> 6, cl(f[j], 0, 255) | 0, cl(f[j + 1], 0, 255) | 0, cl(f[j + 2], 0, 255) | 0);\n}\n","layer":{"id":"layer-funicular","type":"code","name":"funicular","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Funicular\n// Family:  rail\n// Idea:    Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the two-car funicular with an Abt passing loop\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1\n//\n// Knob 1: Dusk. Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit.\n// Knob 2: Speed. At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower.\n// Knob 3: Grade. How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher.\n// Knob 4: Snow. A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel.\n// Buttons: K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i | 0, 374761393) + Math.imul(j | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nconst ridge = (t, s) => 1 - abs(2 * vn(t, s) - 1);\n// True draws only the line: track, cable, cars and stations.\nconst BARE = false;\n\n// Rows of the valley end and the summit end of the track and of the quay. The bullwheel's radius.\nconst YA = 112, YB = 30, QY = 121, R = 5.5;\n// Seconds a run and a stop take at Speed 1.\nconst RUN = 16, DWELL = 6;\n\n// Each colour from blue hour, its first three numbers, to night, its last three.\nconst PAL = {\n  s0:[12,26,82,5,11,42,1,3,12], s1:[44,70,150,14,28,80,3,8,26], s2:[134,118,180,46,52,112,8,16,40],\n  s3:[240,164,124,116,76,100,20,26,52], far:[62,68,122,26,30,70,8,11,28], haze:[112,100,152,46,44,86,12,15,34],\n  fsn:[240,184,198,120,112,160,40,46,76], fsd:[140,144,196,66,70,122,24,30,56], far2:[36,48,90,14,20,50,4,7,18],\n  trL:[44,84,70,22,42,46,9,18,22], trD:[20,44,48,10,22,30,5,10,16], und:[9,22,26,5,11,16,2,5,9],\n  rock:[100,96,126,48,50,80,17,19,30], rockD:[46,46,76,22,24,46,7,9,17], snow:[236,206,222,140,140,180,54,60,88],\n  snowD:[146,156,206,76,84,136,28,34,60], bed:[56,52,54,30,28,32,12,12,15], rail:[190,188,200,120,120,140,70,70,84],\n  slp:[38,32,32,20,17,19,8,7,9], roof:[70,62,66,34,30,36,14,12,16], conc:[120,116,120,60,58,64,26,26,30],\n  stone:[130,122,116,64,60,62,26,24,28], lake:[26,38,92,10,14,40,2,4,12], cLo:[236,150,140,104,72,104,18,20,34],\n  cHi:[98,90,146,34,36,74,8,10,22],\n};\n// Town walls: cream, ochre, pink, blue-grey, white.\nconst HOUSE = [[178, 152, 112], [192, 132, 62], [184, 106, 112], [84, 132, 140], [184, 180, 188]];\nconst WARM = [255, 196, 108], LAMP = [255, 226, 168], STEEL = [224, 220, 206];\nconst LIV = [[206, 34, 30], [34, 84, 196]], DK = [40, 40, 44], TILE = [128, 60, 46];\nconst lerp3 = (p, k, i = k \u003c 0.5 ? 0 : 3, f = k * 2 - i / 3) => [0, 1, 2].map((c) => mix(p[i + c], p[i + 3 + c], f));\n\n// The line for a grade: its ends, its direction u, the normal n to its lower\n// right, the passing loop, and the shape of a car column by column.\nfunction geom(g) {\n  const xA = mix(8, 17, g), xB = mix(50, 43, g), L = hypot(xB - xA, YB - YA);\n  const ux = (xB - xA) / L, uy = (YB - YA) / L, tp = -uy / ux, hb = round(3 * tp + 3.2);\n  const Lca = 10 / ux, aLo = Lca / 2 + 1.5, aHi = L - Lca / 2 - 1.5;\n  const G = { xA, L, ux, uy, nx: -uy, ny: ux, tp, hb, Lca, aLo, aHi, aM: (aLo + aHi) / 2, hs: Lca / 2 + 2, lt: 13, WL: 4.6 };\n  // Columns 0..9: three compartments of three and the end wall, each floor level, so the car climbs in steps.\n  for (const k of [\"ct\", \"cf\", \"cr\"]) G[k] = new Int8Array(10);\n  let vr = 0;\n  for (let c = 0; c \u003c 10; c++) {\n    const fl = floor(-((c > 8 ? 2 : floor(c / 3)) * 3 - 2) * tp) - 2;\n    G.cf[c] = fl; G.ct[c] = fl - hb + 1; G.cr[c] = round(-(c - 4.5) * tp - 0.5);\n    vr = max(vr, -(c - 4.5) * tp - G.ct[c]);\n  }\n  G.VR = vr + 2;\n  // The bullwheel: the cable runs off the top of the track onto its left side.\n  G.wx = xB + 3 * ux + R * G.nx; G.wy = YB + 3 * uy + R * G.ny; G.px = xB - 5;\n  return G;\n}\nconst bump = (G, a) => sm(G.aM - G.hs - G.lt, G.aM - G.hs, a) * (1 - sm(G.aM + G.hs, G.aM + G.hs + G.lt, a));\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F(N * 3), bg: F(N * 3), A: F(N), D: F(N), SK: new Uint8Array(N), tk: new Int32Array(N), ntk: 0,\n    win: new Int32Array(900), wth: F(900), nw: 0, lamp: [], k1: -1, g: -1, k4: -1, G: null, c: {},\n    run: 0, tm: 1, dir: 1, pa: 0, wh: 0, flash: 0, lampsOn: 1, lampF: 300, t: 0, stars: [], fl: [], cx: 40, cl: F(128 * 64), houses: [],\n  });\n  // Clouds: streaks of soft noise in a strip that wraps every 128 columns.\n  const n = (X, y) => 0.6 * vn(X * 0.045, y * 0.22) + 0.4 * vn(X * 0.12 + 5, y * 0.45);\n  for (let i = 0; i \u003c 8192; i++) S.cl[i] = mix(n(i & 127, i >> 7), n((i & 127) + 128, i >> 7), (i & 127) / 128);\n  for (let i = 0; i \u003c 110; i++) S.stars.push({ x: floor(rnd() * W), y: floor(rnd() * 100), b: 0.25 + 0.75 * rnd() ** 2, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 260; i++) S.fl.push({ x: rnd() * W, y: rnd() * H, v: 0.6 + 0.8 * rnd(), ph: rnd() * TAU, z: rnd() });\n  // The town: a row of taller houses up the bank with a church, and a lower row on the quay.\n  for (const [b, i0, h0, hr] of [[QY - 6, 0, 7, 7], [QY - 1, 50, 4, 4]])\n    for (let x = i0 ? -2 : 0, i = i0; x \u003c W; i++) {\n      const ch = !i0 && x > 38 && !S.ch, w = ch ? 5 : 4 + floor(hash(i, 1) * 4);\n      if (ch) S.ch = 1;\n      S.houses.push({ x, b, w, h: ch ? 16 : h0 + floor(hash(i, 2) * hr), c: floor(hash(i, 3) * 5), ch, gab: hash(i, 4) \u003c 0.75 });\n      x += w + (i0 ? 1 + floor(hash(i, 5) * 3) : hash(i, 5) \u003c 0.2 ? 1 : 0);\n    }\n}\n\nfunction build(S, k1, g, k4) {\n  S.k1 = k1; S.g = g; S.k4 = k4; S.nw = 0; S.lamp.length = 0;\n  const G = (S.G = geom(g)), C = S.c, bg = S.bg, o = [0, 0, 0];\n  for (const key in PAL) C[key] = lerp3(PAL[key], k1);\n  const amb = mix(1, 0.3, k1), snl = 30 + 112 * k4 ** 0.75;\n  let ntk = 0;\n  const setc = (c, m = 1) => ((o[0] = c[0] * m), (o[1] = c[1] * m), (o[2] = c[2] * m));\n  const blend = (c, t) => ((o[0] = mix(o[0], c[0], t)), (o[1] = mix(o[1], c[1], t)), (o[2] = mix(o[2], c[2], t)));\n  const ad = (px, py) => [(px - G.xA) * G.ux + (py - YA) * G.uy, (px - G.xA) * G.nx + (py - YA) * G.ny];\n  const dg = (a) => 7 + 6 * bump(G, a) + 1.6 * vn(a * 0.2, 4);\n  const inBed = (a, d, of = G.WL * bump(G, a)) => a >= -1.5 && a \u003c= G.L + 1 && (abs(d + of) \u003c 2.7 || abs(d - of) \u003c 2.7);\n  const f1 = (x) => 46 + 22 * (1 - ridge(x * 0.07 + 3.3, 1.7)) + 3 * vn(x * 0.4, 5);\n  const f2 = (x) => 74 + 12 * (1 - ridge(x * 0.1 + 11, 2.3)) + 2 * vn(x * 0.5, 8);\n  const pk = (x) => 2 + (x \u003c G.px ? (G.px - x) * 2.6 : (x - G.px) * 1.7) + 4 * (vn(x * 0.3, 9) - 0.5);\n  const tl = (x) => 50 + 8 * (vn(x * 0.12, 2) - 0.5);\n  const face = (a, d) => d > -dg(a);\n  // Rock with strata and snow lying in the gullies.\n  const rock = (px, py, side) => {\n    const fa = vn(px * 0.16 + 3, py * 0.07), lit = side > 0 ? fa > 0.32 : fa > 0.72;\n    setc(lit ? C.rock : C.rockD, 0.82 + 0.3 * vn(px * 0.4, py * 0.2));\n    const st = ((py * 0.8 - px * 0.5 + 4 * vn(px * 0.08, py * 0.08)) / 5) % 1;\n    if (st \u003c 0.16) blend(C.rockD, 0.7);\n    const sn = sm(0.56, 0.66, 0.6 * vn(px * 0.3 + 5, py * 0.12) + 0.4 * vn(px * 0.8, py * 0.35) + (snl - py) / 160 + k4 * 0.5 - (st \u003c 0.3 ? 0.1 : 0));\n    if (sn > 0) blend(lit ? C.snow : C.snowD, sn);\n  };\n  // Firs on a jittered grid of cells three wide and four tall, the nearest in front.\n  const tree = (px, py) => {\n    const cx = floor(px / 3), cy = floor(py / 4);\n    let best = -1, tx = 0, ty = 0, th = 0;\n    for (let j = 0; j \u003c 3; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const X = cx + i, Y = cy - j, ax = (X + 0.2 + 0.6 * hash(X, Y)) * 3, ay = (Y + hash(Y, X + 7)) * 4, hh = 4 + 3 * hash(X + 3, Y);\n        if (py \u003c ay || py > ay + hh || abs(px - ax) > (py - ay) * 0.45 + 0.35 || ay + hh \u003c= best) continue;\n        const [ra, rd] = ad(ax, ay + hh);\n        if (!face(ra, rd) || inBed(ra, rd) || ay + hh \u003c tl(ax) || ay + hh > QY - 6) continue;\n        (best = ay + hh), (tx = ax), (ty = ay), (th = hh);\n      }\n    if (best \u003c 0) return 0;\n    setc(px \u003c tx ? C.trL : C.trD, 0.85 + 0.3 * hash(floor(tx), floor(ty)));\n    if (ty + th \u003c snl + 6 * (hash(floor(tx), 3) - 0.5) && py - ty \u003c th * 0.55) blend(C.snow, 0.75);\n    return 1;\n  };\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = y * W + x, px = x + 0.5, py = y + 0.5, [a, d] = ad(px, py);\n      S.A[k] = a; S.D[k] = d; S.SK[k] = 0;\n      // Sky: blue overhead going lavender lower down, with a peach glow behind the far peaks in the west.\n      const t = py / 104, s = t \u003c 0.4 ? 0 : t \u003c 0.76 ? 1 : 2, ft = s ? (t - [0, 0.4, 0.76][s]) / (s > 1 ? 0.24 : 0.36) : t / 0.4;\n      const sa = [C.s0, C.s1, C.s2][s], sb = [C.s1, C.s2, C.s3][s];\n      for (let c = 0; c \u003c 3; c++) o[c] = mix(sa[c], sb[c], sm(0, 1, ft));\n      blend(C.s3, 0.35 * exp(-max(0, 100 - py) / 18) * (1 - px / 90));\n      let sky = 1;\n      if (py >= f1(px)) {\n        // The far range in haze, snow on the peaks that stand highest.\n        const top = f1(px), lit = f1(px + 1) >= f1(px - 1);\n        setc(C.far); blend(C.haze, cl((py - top) / 28, 0, 0.8));\n        const sd = sm(0.5, 0.62, 0.55 * vn(px * 0.7, py * 0.3) + 0.45 * vn(px * 1.6, py * 0.8) + (54 - py) / 14 + k4 * 0.5);\n        if (sd > 0) blend(lit ? C.fsn : C.fsd, sd);\n        sky = 0;\n      }\n      if (py >= f2(px)) {\n        setc(C.far2, 0.85 + 0.25 * vn(px * 0.6, py * 0.6));\n        blend(C.haze, cl((py - f2(px)) / 30, 0, 0.35));\n        if (k4 > 0.3 && py \u003c f2(px) + 3 * k4 + 1) blend(C.snowD, 0.6 * k4);\n        sky = 0;\n      }\n      if (py >= pk(px)) (sky = 0), rock(px, py, px \u003c G.px ? 1 : -1);\n      if (face(a, d) && py \u003c QY) {\n        sky = 0;\n        if (py \u003c tl(px)) rock(px, py, d \u003c 2 || vn(px * 0.2, py * 0.2) > 0.5 ? 1 : -1);\n        else if (!tree(px, py)) setc(C.und, 0.8 + 0.4 * hash(x, y)), blend(C.snowD, 0.75 * sm(4, -4, py - snl + 6 * vn(px * 0.3, py * 0.1)));\n      } else if (py \u003c QY && py > 30 && d > -dg(a) - 8 && tree(px, py)) sky = 0;\n      S.SK[k] = sky;\n      if (BARE) setc(o, 0);\n      // The track bed: gravel, sleepers, two rails a track, rollers between them.\n      if (inBed(a, d)) {\n        const of = G.WL * bump(G, a), best = min(abs(d - of), abs(d + of));\n        setc(C.bed, 0.94 + 0.12 * hash(x * 7, y * 3));\n        if (best \u003c 2.2 && (a / 2.4) % 1 \u003c 0.4) blend(C.slp, 0.4);\n        if (best \u003c 0.6 && (a / 6) % 1 \u003c 0.2) setc(C.rail, 0.35);\n        if (abs(abs(d - of) - 1.8) \u003c 0.56 || abs(abs(d + of) - 1.8) \u003c 0.56) setc(C.rail, 0.9 + 0.1 * hash(x, y));\n        S.tk[ntk++] = k;\n      }\n      bg[k * 3] = o[0]; bg[k * 3 + 1] = o[1]; bg[k * 3 + 2] = o[2];\n    }\n  S.ntk = ntk;\n  const put = (x, y, c, t = 1, m = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    for (let i = 0, k = (y * W + x) * 3; i \u003c 3; i++) bg[k + i] = mix(bg[k + i], c[i] * m, t);\n  };\n  const glow = (x, y, s) => {\n    for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) put(x + i, y + j, LAMP, s * exp(-(i * i + j * j) / 1.44));\n    put(x, y, LAMP);\n  };\n  // A crescent moon once it is dark.\n  const mo = sm(0.45, 0.85, k1);\n  if (mo > 0 && !BARE)\n    for (let y = 6; y \u003c 22; y++)\n      for (let x = 6; x \u003c 22; x++) {\n        const r1 = hypot(x + 0.5 - 14, y + 0.5 - 13), m = cl(4.3 - r1, 0, 1) * cl(hypot(x + 0.5 - 16.2, y + 0.5 - 11.8) - 3.6, 0, 1);\n        if (!S.SK[y * W + x]) continue;\n        if (m > 0) put(x, y, [236, 230, 196], m * mo);\n        else if (r1 \u003c 10) put(x, y, [70, 76, 110], 0.5 * mo * exp(-(r1 - 4) / 2.5));\n      }\n\n  // The town, the back row stopping short of the valley station.\n  const town = (front) => {\n    if (BARE) return;\n    for (const h of S.houses) {\n      if ((h.b === QY - 1) !== front || (h.x + h.w > G.xA - 9 && h.x \u003c (front ? G.xA - 1 : G.xA + (G.Lca + 6) * G.ux))) continue;\n      const base = h.b, top = base - h.h, m = amb * (front ? 0.88 : 0.7), sn = snl > base - 3;\n      for (let x = h.x; x \u003c min(W, h.x + h.w); x++) {\n        for (let y = top; y \u003c= base; y++) put(x, y, HOUSE[h.c], 1, m * (x === h.x + h.w - 1 ? 0.72 : 1));\n        const rr = h.gab ? h.w / 2 + 0.5 - abs(x + 0.5 - (h.x + h.w / 2)) : 1;\n        for (let y = floor(top - rr); y \u003c top; y++) put(x, y, sn ? C.snow : h.c & 1 ? TILE : [64, 68, 88], 1, sn ? 1 : m);\n      }\n      if (h.ch) {\n        for (let y = top - 9; y \u003c top - 2; y++) for (let i = -1; i \u003c 2; i++) (!i || y > top - 6) && put(h.x + 2 + i, y, C.roof, 1, 1.4);\n        put(h.x + 2, top + 2, [250, 236, 190], 1, 0.9);\n      }\n      for (let wy = base - 2; wy > top + 1 + (h.ch ? 3 : 0); wy -= 3)\n        for (let wx = h.x + 1; wx \u003c h.x + h.w - 1; wx += 2) if (S.nw \u003c 900) (S.win[S.nw] = wy * W + wx), (S.wth[S.nw++] = hash(wx, wy)), put(wx, wy, [30, 24, 30], 1, amb + 0.3);\n    }\n  };\n  town(false);\n  // Stations: a tiled roof on pillars over the platform where a car stands, lit underneath.\n  const yT = (px) => YA - (px - G.xA) * G.tp;\n  const shed = (a0, a1) => {\n    const x0 = floor(G.xA + a0 * G.ux), x1 = ceil(G.xA + a1 * G.ux);\n    for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n      const px = x + 0.5, ac = (px - G.xA) / G.ux, ty = yT(px), end = x === x0 || x === x1 || x === round((x0 + x1) / 2);\n      if (ac \u003c a0 || ac > a1) continue;\n      for (let y = floor(ty - G.VR - 4); y \u003c= ceil(ty + 6); y++) {\n        const v = ty - (y + 0.5);\n        if (v > G.VR && v \u003c= G.VR + 3.4) v > G.VR + 2.3 ? put(x, y, y \u003c snl ? C.snow : [150, 76, 58], 1, y \u003c snl ? 1.1 : amb) : put(x, y, [118, 54, 42], 1, amb * (v > G.VR + 1.2 ? 1 : 0.55));\n        else if (v > 0.6 && v \u003c= G.VR) end ? put(x, y, [46, 42, 46]) : put(x, y, LAMP, 0.06 + 0.3 * exp(-(G.VR - v) / 4));\n        else if (v \u003c= 0.6 && v > -5.5 && !inBed(...ad(px, y + 0.5))) put(x, y, y % 3 ? C.conc : C.roof), put(x, y, LAMP, 0.18 + 0.12 * k1);\n      }\n    }\n    for (const f of [0.3, 0.72]) {\n      const px = G.xA + mix(a0, a1, f) * G.ux;\n      glow(floor(px), floor(yT(px) - G.VR + 1), 0.3 + 0.3 * k1);\n    }\n  };\n  shed(-2.5, G.Lca + 4.5);\n  shed(G.L - G.Lca - 4.5, G.L + 1.5);\n  // The valley station hall left of the track, an arched window over a lit door on the quay.\n  const vx0 = max(0, floor(G.xA - 9)), vx1 = floor(G.xA) - 1, vy0 = YA - 12, vc = (vx1 + 1 + max(vx0, G.xA - 9)) / 2;\n  for (let x = vx0; x \u003c= vx1; x++) {\n    for (let y = vy0; y \u003c QY; y++) put(x, y, HOUSE[0], 1, amb * (x === vx1 ? 0.7 : 0.95));\n    for (let y = floor(vy0 - 5.5 + abs(x + 0.5 - vc) * 1.2); y \u003c vy0; y++) put(x, y, y \u003c snl ? C.snow : TILE, 1, y \u003c snl ? 1 : amb);\n  }\n  for (let y = vy0 + 2; y \u003c QY; y++)\n    for (let x = floor(vc - 1.5); x \u003c vc + 1.5; x++)\n      if (y \u003c vy0 + 9 ? y > vy0 + 2 || abs(x + 0.5 - vc) \u003c 1 : y >= QY - 4 && abs(x + 0.5 - vc) \u003c 1) put(x, y, WARM, 0.92, mix(0.85, 1, k1));\n  town(true);\n\n  // The engine house on the summit, with the bullwheel behind its lit round window.\n  const ex0 = floor(G.wx - 8), ey0 = floor(G.wy - 8);\n  for (let y = ey0 - 6; y \u003c= G.wy + 8; y++)\n    for (let x = ex0; x \u003c W; x++) {\n      const rh = y - (ey0 - 6 + abs(x + 0.5 - G.wx) * 0.62), r = hypot(x + 0.5 - G.wx, y + 0.5 - G.wy);\n      if (r \u003c R + 1.2) put(x, y, [255, 200, 120], 1, mix(0.9, 1, k1) * (1 - 0.15 * r / R));\n      else if (y \u003c ey0) rh >= 0 && put(x, y, k4 > 0.05 && rh \u003c 1.2 ? C.snow : C.roof, 1, 1.2);\n      else put(x, y, C.stone, 1, (0.85 + 0.15 * (((y >> 1) + (x >> 2)) & 1)) * (x === ex0 ? 0.6 : 1));\n    }\n  // Lamps on posts beside the line, every nine steps.\n  for (let a = 7; a \u003c G.L - 6; a += 9) {\n    const of = G.WL * bump(G, a) + 5.6, lx = floor(G.xA + a * G.ux + of * G.nx), ly = floor(YA + a * G.uy + of * G.ny);\n    put(lx, ly + 1, DK), put(lx, ly + 2, DK), S.lamp.push(lx, ly, a);\n  }\n  if (!BARE)\n    for (let x = 0; x \u003c W; x++) {\n      put(x, QY, C.stone, 1, 0.8);\n      if (x % 8 === 4) put(x, QY - 1, DK), put(x, QY - 2, DK), glow(x, QY - 3, 0.12 + 0.25 * k1);\n    }\n}\n\n// Along a run the cars speed up for the first seventh and slow down for the last.\nfunction prof(t) {\n  const ta = 0.14, v = 1 / (1 - ta);\n  return t \u003c ta ? (v * t * t) / (2 * ta) : t \u003c 1 - ta ? v * (t - ta / 2) : 1 - (v * (1 - t) * (1 - t)) / (2 * ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues, h = min(dt, 0.1), sp = cl(kv[1], 0.2, 3) / 2, bp = input.btnPressed;\n  const k1 = cl(kv[0], 0, 1), g = cl(kv[2], 0, 1), k4 = cl(kv[3], 0, 1);\n  if (abs(k1 - S.k1) > 0.003 || abs(g - S.g) > 0.003 || abs(k4 - S.k4) > 0.003) build(S, k1, g, k4);\n  if (bp[0]) S.run ? (S.flash = 1) : (S.tm = min(S.tm, 0.8));\n  if (bp[1]) (S.lampsOn = 1 - S.lampsOn), (S.lampF = -10);\n  S.lampF += h * 40;\n  S.cx += h * sp * 3.6;\n  S.flash = max(0, S.flash - h);\n  S.t += h * sp;\n  const was = S.pa;\n  if (!S.run) {\n    S.tm -= h * sp * 2;\n    if (S.tm \u003c= 0) (S.run = 1), (S.tm = 0);\n  } else {\n    S.tm = min(1, S.tm + (h * sp * 2) / RUN);\n    S.pa = S.dir > 0 ? prof(S.tm) : 1 - prof(S.tm);\n    if (S.tm >= 1) (S.run = 0), (S.tm = DWELL), (S.dir = -S.dir);\n  }\n  S.wh += ((S.pa - was) * (S.G.aHi - S.G.aLo)) / R;\n  for (const q of S.fl) {\n    q.y += h * (6 + 12 * q.z) * q.v;\n    q.x = (q.x + h * (2.5 * sin(S.t * 0.7 + q.ph) - 1.5) + W) % W;\n    if (q.y > H) (q.y -= H + 2), (q.x = rnd() * W);\n  }\n}\n\nfunction drawCar(S, f, ac, side, liv, up, k1) {\n  const G = S.G, o = side * G.WL * bump(G, ac), Px = G.xA + ac * G.ux + o * G.nx, Py = YA + ac * G.uy + o * G.ny;\n  const x0 = round(Px - 5), ay = round(Py - (x0 + 5 - Px) * G.tp), hb = G.hb, lm = mix(1, 0.5, k1), fl = S.flash > 0 && (S.flash * 6) % 1 \u003c 0.5;\n  for (let c = 0; c \u003c 10; c++) {\n    const x = x0 + c, glass = c % 3 && c \u003c 9, b = c > 8 ? 2 : floor(c / 3);\n    if (x \u003c 0 || x >= W) continue;\n    for (let r = G.ct[c]; r \u003c= G.cr[c]; r++) {\n      const y = ay + r, rr = r - G.ct[c], q = (y * W + x) * 3;\n      if (y \u003c 0 || y >= H) continue;\n      let [cr, cg, cb] = liv, m = lm;\n      if (r === G.cr[c]) (cr = cg = cb = c === 1 || c === 8 ? 20 : 68);\n      else if (r > G.cf[c]) m *= 0.62;\n      else if (rr === 0) (cr = 210), (cg = 206), (cb = 196);\n      else if (rr === hb - 3) {\n        (cr = 228), (cg = 214), (cb = 180);\n        if (c === (up ? 9 : 0)) (cr = 255), (cg = 250), (cb = fl ? 120 : 220), (m = 1);\n        if (c === (up ? 0 : 9)) (cr = 255), (cg = 30), (cb = 20), (m = 1);\n      } else if (glass && rr >= 2 && rr \u003c= hb - 4) {\n        // Lit windows, a passenger's head and shoulders in some.\n        const head = rr >= hb - 5 && c % 3 === 1 + (hash(b, liv[2]) \u003c 0.5) && hash(b * 3, liv[2]) \u003c 0.7;\n        (cr = head ? 60 : 255), (cg = head ? 40 : 214), (cb = head ? 36 : 150), (m = 1);\n      }\n      f[q] = cr * m; f[q + 1] = cg * m; f[q + 2] = cb * m;\n    }\n  }\n  // The headlamp's beam on the track ahead.\n  const dr = up ? 1 : -1, ae = ac + (dr * G.Lca) / 2, bs = mix(0.16, 0.36, k1) * (fl ? 2.5 : 1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], s = (S.A[k] - ae) * dr, w = abs(S.D[k] - side * G.WL * bump(G, S.A[k])) - 0.8 - s * 0.08, e = bs * (1 - s / 15) ** 2 * cl(1 - w, 0, 1);\n    if (s >= 0 && s \u003c 15) (f[k * 3] += 255 * e), (f[k * 3 + 1] += 236 * e), (f[k * 3 + 2] += 190 * e);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S.G) build(S, 0, 0, 0.06);\n  const G = S.G, f = S.f, k1 = S.k1, k4 = S.k4, t = S.t, C = S.c;\n  f.set(S.bg);\n  if (!BARE) {\n    // Stars come out as it gets dark; the evening star is there from the start.\n    const sv = sm(0.1, 0.7, k1);\n    for (const s of S.stars) {\n      const k = s.y * W + s.x, e = sv * s.b * (0.7 + 0.3 * sin(time * (2 + s.ph / 3) + s.ph)) * (1 - s.y / 130);\n      if (S.SK[k]) (f[k * 3] += 220 * e), (f[k * 3 + 1] += 224 * e), (f[k * 3 + 2] += 240 * e);\n    }\n    // Two bands of cloud drifting east, lit underneath while the glow lasts.\n    const ox = floor(S.cx), fx = S.cx - ox;\n    for (let y = 2; y \u003c 62; y++) {\n      const band = exp(-(((y - 12) / 7) ** 2)) + 0.9 * exp(-(((y - 38) / 8) ** 2)), i0 = y * 128;\n      for (let x = 0; x \u003c W; x++) {\n        if (!S.SK[y * W + x] || band \u003c 0.05) continue;\n        const d0 = mix(S.cl[i0 + ((x - ox) & 127)], S.cl[i0 + ((x - ox - 1) & 127)], fx), d1 = S.cl[min(63, y + 2) * 128 + ((x - ox) & 127)];\n        const e = sm(0.44, 0.68, d0 * 0.8 + band * 0.44 - 0.1) * 0.9, lit = cl(0.45 + (d0 - d1) * 3 + (y - 30) / 60, 0, 1), q = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) f[q + c] = mix(f[q + c], mix(C.cHi[c], C.cLo[c], lit), e);\n      }\n    }\n    const vk = (52 * W + 11) * 3;\n    if (S.SK[vk / 3]) (f[vk] += 255), (f[vk + 1] += 246), (f[vk + 2] += 220);\n    // Windows in town: more lit as night comes, now and then one going on or off.\n    const pl = mix(0.42, 0.86, k1);\n    for (let i = 0; i \u003c S.nw; i++) {\n      const th = S.wth[i], k = S.win[i] * 3, m = 0.8 + 0.2 * hash(i, 9);\n      if (th \u003c pl + 0.05 * sin(t * 0.4 + th * 60)) (f[k] = WARM[0] * m), (f[k + 1] = WARM[1] * m), (f[k + 2] = WARM[2] * m);\n    }\n  }\n  // Lamps along the line.\n  for (let i = 0; i \u003c S.lamp.length; i += 3) {\n    const [x, y, a] = S.lamp.slice(i, i + 3), e = mix(0.55, 1, k1) * (S.lampsOn ? cl((S.lampF - a) / 4, 0, 1) : 1 - cl((S.lampF - G.L + a) / 4, 0, 1));\n    for (let j = -2; j \u003c= 2; j++)\n      for (let ii = -2, q = ((y + j) * W + x - 2) * 3; ii \u003c= 2; ii++, q += 3) {\n        const g = j || ii ? e * 0.35 * mix(0.3, 1, k1) * exp(-(ii * ii + j * j) / 2) : e;\n        if (x + ii >= 0 && x + ii \u003c W) for (let c = 0; c \u003c 3; c++) f[q + c] += LAMP[c] * g;\n      }\n  }\n  // The cable: a strand from each car up to the bullwheel, its lay sliding with it.\n  const aA = mix(G.aLo, G.aHi, S.pa), aB = G.aLo + G.aHi - aA, lm = mix(1, 0.55, k1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], a = S.A[k], d = S.D[k], of = G.WL * bump(G, a);\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const ac = s \u003c 0 ? aA : aB;\n      if (a \u003c ac + G.Lca / 2 - 0.5 || a > G.L + 2 || abs(d - s * of - s * 0.25) >= 0.55) continue;\n      const tx = (0.5 + 0.5 * cos((TAU * (a - ac)) / 3)) ** 2;\n      for (let c = 0; c \u003c 3; c++) f[k * 3 + c] = mix([78, 72, 70][c], STEEL[c], tx) * lm;\n      break;\n    }\n  }\n  // The cars: red on the upper track of the loop, blue on the lower.\n  const upA = S.run ? S.dir > 0 : S.dir \u003c 0;\n  drawCar(S, f, aA, -1, LIV[0], upA, k1);\n  drawCar(S, f, aB, 1, LIV[1], !upA, k1);\n  // The bullwheel turning behind the round window, six spokes on a hub.\n  for (let y = floor(G.wy - R - 1); y \u003c= G.wy + R + 1; y++)\n    for (let x = floor(G.wx - R - 1); x \u003c= min(W - 1, G.wx + R + 1); x++) {\n      const dx = x + 0.5 - G.wx, dy = y + 0.5 - G.wy, r = hypot(dx, dy), an = atan2(dy, dx) - S.wh;\n      const m = ((an % (PI / 3)) + PI / 3) % (PI / 3), sd = r * sin(min(m, PI / 3 - m));\n      if (r \u003c= R + 0.6 && (abs(r - R + 0.7) \u003c 0.75 || (r \u003c R - 1 && sd \u003c 0.5) || r \u003c 1.4)) f.set([34, 28, 30], (y * W + x) * 3);\n    }\n  // The lake: the quay and the town upside down, rippling.\n  if (!BARE)\n    for (let y = QY + 1; y \u003c H; y++) {\n      const dy = y - QY, sh = round(0.8 * sin(t * 0.9 + y * 1.3)), m = (0.95 - dy * 0.08) / 255;\n      for (let x = 0; x \u003c W; x++) for (let c = 0, q = (y * W + x) * 3, p = ((QY - dy) * W + cl(x + sh, 0, W - 1)) * 3; c \u003c 3; c++) f[q + c] = C.lake[c] * (1 + (y & 1) * 0.2) + f[p + c] ** 2 * m;\n    }\n  // Falling snow.\n  const nf = floor(cl((k4 - 0.1) / 0.9, 0, 1) * 260), sc = mix(235, 120, k1);\n  for (let i = 0; i \u003c nf; i++) {\n    const q0 = S.fl[i], q = (floor(q0.y) * W + floor(q0.x)) * 3, e = 0.45 + 0.55 * q0.z;\n    if (q0.y >= 0 && q0.y \u003c H) (f[q] = mix(f[q], sc, e)), (f[q + 1] = mix(f[q + 1], sc, e)), (f[q + 2] = mix(f[q + 2], sc * 1.06, e));\n  }\n  for (let k = 0, j = 0; k \u003c N; k++, j += 3) display.setPixel(k & 63, k >> 6, cl(f[j], 0, 255) | 0, cl(f[j + 1], 0, 255) | 0, cl(f[j + 2], 0, 255) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower."},{"name":"Grade","min":0,"max":1,"about":"How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher."},{"name":"Snow","min":0,"max":1,"about":"A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel."}],"start":[0,2,0,0.06],"measures":{"motion":0.0963,"detail":0.0901,"edges":0.4693,"complexity":1.617,"coverage":0.9811,"colour":0.2158,"drift":0.0259},"knobResponse":[0.2342,0.0427,0.0962,0.1569]},{"slug":"galilean-moons","title":"Galilean Moons","family":"celestial","round":22,"note":"목성의 네 위성을 관측 도표로 그려요. 위쪽 접안렌즈에서는 줄무늬 목성이 돌고 이오의 그림자가 원반을 지나가며, 아래 도표에서는 위성마다 제 사인 곡선을 그리며 날짜가 위로 올라와요.","idea":"Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.","buttons":"K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.","code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","layer":{"id":"layer-galilean-moons","type":"code","name":"galilean-moons","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sky","min":0,"max":1,"about":"The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1."},{"name":"Speed","min":0.5,"max":24,"about":"Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second."},{"name":"Power","min":0,"max":1,"about":"The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits."},{"name":"Seeing","min":0,"max":1,"about":"Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0779,"detail":0.0747,"edges":0.5632,"complexity":0.743,"coverage":0.7778,"colour":0.1926,"drift":0.0306},"knobResponse":[0.5122,0.1178,0.1493,0.0539]},{"slug":"galton","title":"Galton Board","family":"data","round":2,"note":"깔때기에서 떨어진 공이 못마다 동전 던지듯 왼쪽이나 오른쪽으로 튀어 칸에 쌓이고, 종 모양이 서요. 칸 색은 가운데에서 표준편차 몇 개만큼 떨어졌는지를 보여 줘요.","idea":"Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.","buttons":"K1 tap opens the floor, the bins drain and the hopper fills again.","code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-galton","type":"code","name":"galton","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart."},{"name":"Rate","min":30,"max":240,"about":"Balls let through the neck each second, from a trickle to a pour."},{"name":"Bias","min":-0.3,"max":0.3,"about":"The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight."},{"name":"Rows","min":8,"max":15,"about":"Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins."}],"start":[0,30,0,8],"measures":{"motion":0.2909,"detail":0.0577,"edges":0.7232,"complexity":0.5234,"coverage":0.2361,"colour":0.1843,"drift":0.0246},"knobResponse":[0.0536,0.0477,0.0979,0.0715]},{"slug":"gaussian-moat","title":"Gaussian Moat","family":"number","round":31,"note":"LED 하나가 가우스 정수 하나라 가우스 소수가 옅은 점으로 깔리고, 1 + i 에서 걸음 √k 안의 소수로만 번지는 물길이 산호처럼 가지를 쳐요. 물길이 해자에 막히면 기슭이 깜박이고 k 가 커져 건너가요. K1 을 누르면 k 를 바로 한 칸 올려요.","idea":"Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.","buttons":"K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.","code":"// ===== Patternflow pattern =====\n// Title:   Gaussian Moat\n// Family:  number\n// Idea:    Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Gaussian moat problem (Basil Gordon, 1962), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1\n//\n// Knob 1: Hue. Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots.\n// Knob 2: Speed. At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower.\n// Knob 3: Step. The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go.\n// Knob 4: Reach. Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back.\n// Buttons: K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, abs, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The squared lengths a step between two Gaussian integers can have: the\n// sums of two squares, 1 left out since no two odd primes sit 1 apart.\nconst KS = [];\nfor (let n = 2; n \u003c= 50; n++) {\n  let ok = false;\n  for (let a = 0; a * a \u003c= n && !ok; a++) {\n    const b = Math.round(sqrt(n - a * a));\n    if (a * a + b * b === n) ok = true;\n  }\n  if (ok) KS.push(n);\n}\nconst KMAX = 50;\n\n// Every offset with dx^2 + dy^2 \u003c= 50, nearest first. A flood with step k\n// scans the first NK[k] of them; the moat line reads the first R49.\nconst OD = [];\nfor (let dy = -7; dy \u003c= 7; dy++)\n  for (let dx = -7; dx \u003c= 7; dx++) {\n    const d = dx * dx + dy * dy;\n    if (d \u003c= KMAX) OD.push([d, dx, dy]);\n  }\nOD.sort((p, q) => p[0] - q[0] || p[2] - q[2] || p[1] - q[1]);\nconst ODX = new Int8Array(OD.length), ODY = new Int8Array(OD.length), ODD = new Uint8Array(OD.length);\nOD.forEach((o, i) => {\n  ODD[i] = o[0];\n  ODX[i] = o[1];\n  ODY[i] = o[2];\n});\nconst NK = new Uint16Array(KMAX + 1);\nfor (let k = 0; k \u003c= KMAX; k++) {\n  let n = 0;\n  while (n \u003c OD.length && ODD[n] \u003c= k) n++;\n  NK[k] = n;\n}\nlet R49 = 0;\nwhile (R49 \u003c OD.length && ODD[R49] \u003c= 49) R49++;\n\n// Rational primes up to 7300 by a sieve, enough to test norms up to\n// 2 * 5072^2 by trial division, the far corner at Reach 1 plus the cycle.\nconst SP = [];\n{\n  const M = 7300, c = new Uint8Array(M + 1);\n  for (let i = 2; i \u003c= M; i++) {\n    if (c[i]) continue;\n    SP.push(i);\n    for (let j = i * i; j \u003c= M; j += i) c[j] = 1;\n  }\n}\nfunction isPrime(n) {\n  if (n \u003c 2) return false;\n  for (let i = 0; i \u003c SP.length; i++) {\n    const p = SP[i];\n    if (p * p > n) return true;\n    if (n % p === 0) return n === p;\n  }\n  return true;\n}\n// a + bi with a, b >= 0 is a Gaussian prime when its norm is a prime, or when\n// it lies on an axis and is a prime of the form 4n + 3.\nfunction gaussPrime(a, b) {\n  if (a === 0) return b % 4 === 3 && isPrime(b);\n  if (b === 0) return a % 4 === 3 && isPrime(a);\n  return isPrime(a * a + b * b);\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\n// Reach: the corner stays at the origin up to 0.1, then moves out along the\n// diagonal from 8 + 8i to 4800 + 4800i on a log scale. Each restart adds the\n// next of CYCLE, so the window wanders out where primes thin and comes back.\nconst reachOf = (u) => (u \u003c= 0.1 ? 0 : Math.round(8 * 600 ** ((u - 0.1) / 0.9)));\nconst CYCLE = [0, 24, 140];\n// The first k for a Step: the largest step length squared that fits.\nfunction firstK(step) {\n  let k = KS[0];\n  for (const q of KS) if (q \u003c= step * step + 1e-9) k = q;\n  return k;\n}\nconst nextK = (k) => {\n  for (const q of KS) if (q > k) return q;\n  return KMAX + 1;\n};\n\nconst DMAX = 1024;\n\nexport function setup(params) {\n  params.s = {\n    pr: new Uint8Array(N), dep: new Int16Array(N), par: new Int32Array(N), q: new Int32Array(N), born: new Float32Array(N),\n    ea: new Float32Array(N), ed: new Uint16Array(N), wa: new Float32Array(N), wash: new Float32Array(3), moat: new Float32Array(N), shore: [], grow: [], tg: 0.3, sp: 2, hueK: 0, startT: -1,\n    nPrime: 0, qlen: 0, lastQ: 0, plen: 1, head: 0, scan: 0, k: 2, k0: 2, off: -1, base: -1, stage: 0,\n    mode: 0, timer: 0, acc: 0, T: 0, fade: 1, moatA: 0,\n    hue: -1, pal: new Float32Array(DMAX * 3), dot: new Float32Array(3), buf: new Float32Array(N * 3),\n  };\n}\n\n// Lays out the window with its corner at off + off*i and seeds the flood at\n// the prime nearest the corner: 1 + i when the corner is the origin.\nfunction build(S, off) {\n  S.off = off;\n  S.nPrime = 0;\n  let seed = -1, best = 1e9;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, b = H - 1 - y, g = gaussPrime(x + off, b + off) ? 1 : 0;\n      S.pr[p] = g;\n      if (g) {\n        S.nPrime++;\n        const d = x * x + b * b;\n        if (d \u003c best) (best = d), (seed = p);\n      }\n    }\n  S.dep.fill(-1);\n  S.born.fill(-10);\n  S.ea.fill(0);\n  S.wa.fill(0);\n  S.moat.fill(0);\n  S.grow.length = 0;\n  S.shore = [];\n  S.qlen = 0;\n  S.head = 0;\n  S.scan = 0;\n  S.k = S.k0;\n  S.mode = 0;\n  S.timer = 0;\n  S.acc = 0;\n  S.moatA = 0;\n  S.lastQ = 0;\n  // A restart fades in over 0.6 s; the first window is there at once.\n  S.startT = S.T > 0 ? S.T : -1;\n  if (seed >= 0) {\n    S.dep[seed] = 0;\n    S.par[seed] = seed;\n    S.born[seed] = S.T;\n    S.q[S.qlen++] = seed;\n    soak(S, seed);\n  }\n}\n\n// The next prime the flood reaches: breadth first over the cluster, each\n// prime scanning its neighbours nearest first out to distance sqrt(k).\n// Only primes inside the window count, so a moat here is a moat of the\n// window: a prime just outside it could bridge one.\nfunction pull(S) {\n  const n = NK[min(S.k, KMAX)], pr = S.pr, dep = S.dep;\n  while (S.head \u003c S.qlen) {\n    const p = S.q[S.head], x = p & 63, y = p >> 6;\n    while (S.scan \u003c n) {\n      const i = S.scan++, X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        dep[c] = min(DMAX - 1, dep[p] + 1);\n        S.par[c] = p;\n        S.born[c] = S.T;\n        S.q[S.qlen++] = c;\n        return c;\n      }\n    }\n    S.head++;\n    S.scan = 0;\n  }\n  return -1;\n}\n\n// A segment a LED wide, soft at its sides, into the edge layer: each LED keeps\n// the strongest cover and the depth of the edge that gave it.\nfunction stamp(S, x0, y0, x1, y1, d, ea, ed) {\n  const vx = x1 - x0, vy = y1 - y0, L2 = vx * vx + vy * vy || 1;\n  const xa = max(0, floor(min(x0, x1)) - 1), xb = min(W - 1, Math.ceil(max(x0, x1)) + 1);\n  const ya = max(0, floor(min(y0, y1)) - 1), yb = min(H - 1, Math.ceil(max(y0, y1)) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const t = cl(((x - x0) * vx + (y - y0) * vy) / L2, 0, 1), ex = x0 + vx * t - x, ey = y0 + vy * t - y;\n      const a = 1 - sqrt(ex * ex + ey * ey) * 1.1;\n      if (a \u003c= 0) continue;\n      const p = y * W + x;\n      if (a > ea[p]) {\n        ea[p] = a;\n        if (ed) ed[p] = d;\n      }\n    }\n}\n\n// The ground the flood holds: a faint wash out to 2 LEDs round each reached\n// prime, so a moat shows as the dark band between the wash and the dots.\nfunction soak(S, p) {\n  const x0 = p & 63, y0 = p >> 6, wa = S.wa;\n  for (let dy = -2; dy \u003c= 2; dy++)\n    for (let dx = -2; dx \u003c= 2; dx++) {\n      const x = x0 + dx, y = y0 + dy;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const a = cl(1.15 - sqrt(dx * dx + dy * dy) * 0.38, 0, 1), q = y * W + x;\n      if (a > wa[q]) wa[q] = a;\n    }\n}\n\n// The flood has run out. The shore is every reached prime with an unreached\n// one within the next step; the moat line runs where the nearest reached\n// prime and the nearest unreached one are equally far.\nfunction meetMoat(S) {\n  const kn = min(nextK(S.k), KMAX), nk = NK[kn], pr = S.pr, dep = S.dep;\n  S.shore = [];\n  for (let h = 0; h \u003c S.qlen; h++) {\n    const p = S.q[h], x = p & 63, y = p >> 6;\n    for (let i = 1; i \u003c nk; i++) {\n      const X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        S.shore.push(p);\n        break;\n      }\n    }\n  }\n  const m = S.moat;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let dr = -1, du = -1;\n      for (let i = 0; i \u003c R49 && (dr \u003c 0 || du \u003c 0); i++) {\n        const X = x + ODX[i], Y = y + ODY[i];\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const c = Y * W + X;\n        if (!pr[c]) continue;\n        if (dep[c] >= 0) {\n          if (dr \u003c 0) dr = ODD[i];\n        } else if (du \u003c 0) du = ODD[i];\n      }\n      m[y * W + x] = dr > 0 && du > 0 ? max(0, 1 - abs(sqrt(dr) - sqrt(du)) * 0.8) : 0;\n    }\n  // A step that crossed nothing pulses for a third as long, so a prime\n  // trapped in a corner runs through its empty steps quickly.\n  S.plen = S.qlen > S.lastQ ? 1 : 0.35;\n  S.lastQ = S.qlen;\n}\n\nfunction raise(S) {\n  S.k = nextK(S.k);\n  S.head = 0;\n  S.scan = 0;\n  S.mode = S.k > KMAX ? 2 : 0;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 1.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(kv[1], 0.2, 3), k0 = firstK(cl(kv[2], 1.5, 4.5)), base = reachOf(cl(kv[3], 0, 1));\n  S.T += d;\n  S.hueK = kv[0] || 0;\n  if (base !== S.base) {\n    S.base = base;\n    S.stage = 0;\n    S.k0 = k0;\n    build(S, base);\n  } else if (k0 !== S.k0) {\n    // A longer first step carries on from here; a shorter one starts over.\n    const up = k0 > S.k0;\n    S.k0 = k0;\n    if (!up) build(S, S.off);\n    else if (S.mode \u003c 2 && k0 > S.k) {\n      S.k = k0;\n      S.head = 0;\n      S.scan = 0;\n      S.mode = 0;\n    }\n  }\n  const b = input.btnPressed || [];\n  if (b[0] && S.mode \u003c 2) raise(S);\n\n  // Each new edge grows from its parent for 0.3 s at Speed 2.\n  const tg = 0.6 / sp;\n  for (let i = S.grow.length - 1; i >= 0; i--) {\n    const c = S.grow[i];\n    if (S.T - S.born[c] >= tg) {\n      const p = S.par[c];\n      stamp(S, p & 63, p >> 6, c & 63, c >> 6, S.dep[c], S.ea, S.ed);\n      soak(S, c);\n      S.grow[i] = S.grow[S.grow.length - 1];\n      S.grow.pop();\n    }\n  }\n  S.tg = tg;\n\n  if (S.mode === 0) {\n    // A few dozen primes a second, more as the frontier (the primes queued\n    // but not yet scanned) widens: 56 a second at Speed 2 near 1 + i.\n    S.acc += d * sp * min(90, 28 + (S.qlen - S.head));\n    while (S.acc >= 1) {\n      S.acc -= 1;\n      const c = pull(S);\n      if (c >= 0) {\n        S.grow.push(c);\n        continue;\n      }\n      S.acc = 0;\n      if (S.qlen >= S.nPrime) {\n        S.mode = 2;\n        S.timer = 0;\n      } else {\n        meetMoat(S);\n        S.mode = 1;\n        S.timer = 0;\n      }\n      break;\n    }\n  } else if (S.mode === 1) {\n    // The moat: 0.7 s at Speed 2 of the shore pulsing, then k goes up.\n    S.timer += (d * sp * 0.72) / S.plen;\n    if (S.timer >= 1) raise(S);\n  } else {\n    // Filled: the coral holds for 3 s, fades for 1.5 s, and the next window\n    // in the cycle starts.\n    S.timer += d * sp * 0.5;\n    if (S.timer >= 4.5) {\n      S.stage = (S.stage + 1) % CYCLE.length;\n      build(S, S.base + CYCLE[S.stage]);\n    }\n  }\n  S.fade = S.mode === 2 ? cl((4.5 - S.timer) / 1.5, 0, 1) : cl((S.T - S.startT) / 0.6, 0, 1);\n  S.moatA = S.mode === 1 ? sin(PI * S.timer) : max(0, S.moatA - d * sp * 1.2);\n  S.sp = sp;\n}\n\n// Colours by depth: the hue runs out and back along a band of the wheel\n// every 72 steps of depth, so each breadth-first layer reads as a ring.\nfunction palette(S) {\n  const h0 = S.hueK + 0.13;\n  for (let i = 0; i \u003c DMAX; i++) {\n    let u = (i % 72) / 36;\n    if (u > 1) u = 2 - u;\n    hsv(h0 + 0.42 * u * u * (3 - 2 * u), 0.78, 1, S.pal, i * 3);\n  }\n  hsv(h0 + 0.5, 0.6, 0.3, S.dot, 0);\n  hsv(h0 + 0.47, 0.9, 0.26, S.wash, 0);\n  S.hue = S.hueK;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.hue !== S.hueK) palette(S);\n  const buf = S.buf, pal = S.pal, dot = S.dot, pr = S.pr, dep = S.dep, ea = S.ea, ed = S.ed, wa = S.wa, wash = S.wash, born = S.born, T = S.T;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const w = wa[p];\n    let r = wash[0] * w, g = wash[1] * w, b = wash[2] * w;\n    const a = ea[p];\n    if (a > 0) {\n      const c = ed[p] * 3, v = a * 0.62;\n      r = max(r, pal[c] * v);\n      g = max(g, pal[c + 1] * v);\n      b = max(b, pal[c + 2] * v);\n    }\n    if (pr[p]) {\n      const dd = dep[p];\n      if (dd \u003c 0) {\n        r = max(r, dot[0]);\n        g = max(g, dot[1]);\n        b = max(b, dot[2]);\n      } else {\n        // A new node flashes white and settles into its colour.\n        const c = dd * 3, fl = cl(1 - (T - born[p]) * 2.5, 0, 1);\n        r = pal[c] + (255 - pal[c]) * fl;\n        g = pal[c + 1] + (255 - pal[c + 1]) * fl;\n        b = pal[c + 2] + (255 - pal[c + 2]) * fl;\n      }\n    }\n    buf[o] = r;\n    buf[o + 1] = g;\n    buf[o + 2] = b;\n  }\n  // Edges still growing, from the parent toward the new prime.\n  if (S.grow.length) {\n    const tmp = S.tmp || (S.tmp = new Float32Array(N));\n    for (const c of S.grow) {\n      const p = S.par[c], t = cl((T - born[c]) / S.tg, 0, 1), x0 = p & 63, y0 = p >> 6, x1 = c & 63, y1 = c >> 6;\n      const xe = x0 + (x1 - x0) * t, ye = y0 + (y1 - y0) * t;\n      stamp(S, x0, y0, xe, ye, 0, tmp, null);\n      const xa = max(0, min(x0, x1) - 1), xb = min(W - 1, max(x0, x1) + 1), ya = max(0, min(y0, y1) - 1), yb = min(H - 1, max(y0, y1) + 1);\n      const cc = dep[c] * 3;\n      for (let y = ya; y \u003c= yb; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const q = y * W + x, v = tmp[q] * 0.8;\n          if (v \u003c= 0) continue;\n          tmp[q] = 0;\n          const o = q * 3;\n          buf[o] = max(buf[o], pal[cc] * v + 60 * v);\n          buf[o + 1] = max(buf[o + 1], pal[cc + 1] * v + 60 * v);\n          buf[o + 2] = max(buf[o + 2], pal[cc + 2] * v + 60 * v);\n        }\n    }\n  }\n  // The moat: its middle line glows pale and the shore primes pulse white.\n  if (S.moatA > 0.01) {\n    const m = S.moat, A = S.moatA;\n    for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n      const v = m[p] * A * 0.9;\n      if (v \u003c= 0) continue;\n      buf[o] += (170 - buf[o]) * v;\n      buf[o + 1] += (215 - buf[o + 1]) * v;\n      buf[o + 2] += (255 - buf[o + 2]) * v;\n    }\n    const pulse = 0.5 + 0.5 * sin(T * S.sp * 9);\n    for (const p of S.shore) {\n      const x = p & 63, y = p >> 6;\n      for (let dy = -1; dy \u003c= 1; dy++)\n        for (let dx = -1; dx \u003c= 1; dx++) {\n          const X = x + dx, Y = y + dy;\n          if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n          const o = (Y * W + X) * 3, v = A * (dx || dy ? 0.35 * pulse : 0.5 + 0.5 * pulse);\n          buf[o] += (255 - buf[o]) * v;\n          buf[o + 1] += (255 - buf[o + 1]) * v;\n          buf[o + 2] += (255 - buf[o + 2]) * v;\n        }\n    }\n  }\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * f, buf[p + 1] * f, buf[p + 2] * f);\n}\n","layer":{"id":"layer-gaussian-moat","type":"code","name":"gaussian-moat","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gaussian Moat\n// Family:  number\n// Idea:    Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Gaussian moat problem (Basil Gordon, 1962), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1\n//\n// Knob 1: Hue. Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots.\n// Knob 2: Speed. At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower.\n// Knob 3: Step. The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go.\n// Knob 4: Reach. Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back.\n// Buttons: K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, abs, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The squared lengths a step between two Gaussian integers can have: the\n// sums of two squares, 1 left out since no two odd primes sit 1 apart.\nconst KS = [];\nfor (let n = 2; n \u003c= 50; n++) {\n  let ok = false;\n  for (let a = 0; a * a \u003c= n && !ok; a++) {\n    const b = Math.round(sqrt(n - a * a));\n    if (a * a + b * b === n) ok = true;\n  }\n  if (ok) KS.push(n);\n}\nconst KMAX = 50;\n\n// Every offset with dx^2 + dy^2 \u003c= 50, nearest first. A flood with step k\n// scans the first NK[k] of them; the moat line reads the first R49.\nconst OD = [];\nfor (let dy = -7; dy \u003c= 7; dy++)\n  for (let dx = -7; dx \u003c= 7; dx++) {\n    const d = dx * dx + dy * dy;\n    if (d \u003c= KMAX) OD.push([d, dx, dy]);\n  }\nOD.sort((p, q) => p[0] - q[0] || p[2] - q[2] || p[1] - q[1]);\nconst ODX = new Int8Array(OD.length), ODY = new Int8Array(OD.length), ODD = new Uint8Array(OD.length);\nOD.forEach((o, i) => {\n  ODD[i] = o[0];\n  ODX[i] = o[1];\n  ODY[i] = o[2];\n});\nconst NK = new Uint16Array(KMAX + 1);\nfor (let k = 0; k \u003c= KMAX; k++) {\n  let n = 0;\n  while (n \u003c OD.length && ODD[n] \u003c= k) n++;\n  NK[k] = n;\n}\nlet R49 = 0;\nwhile (R49 \u003c OD.length && ODD[R49] \u003c= 49) R49++;\n\n// Rational primes up to 7300 by a sieve, enough to test norms up to\n// 2 * 5072^2 by trial division, the far corner at Reach 1 plus the cycle.\nconst SP = [];\n{\n  const M = 7300, c = new Uint8Array(M + 1);\n  for (let i = 2; i \u003c= M; i++) {\n    if (c[i]) continue;\n    SP.push(i);\n    for (let j = i * i; j \u003c= M; j += i) c[j] = 1;\n  }\n}\nfunction isPrime(n) {\n  if (n \u003c 2) return false;\n  for (let i = 0; i \u003c SP.length; i++) {\n    const p = SP[i];\n    if (p * p > n) return true;\n    if (n % p === 0) return n === p;\n  }\n  return true;\n}\n// a + bi with a, b >= 0 is a Gaussian prime when its norm is a prime, or when\n// it lies on an axis and is a prime of the form 4n + 3.\nfunction gaussPrime(a, b) {\n  if (a === 0) return b % 4 === 3 && isPrime(b);\n  if (b === 0) return a % 4 === 3 && isPrime(a);\n  return isPrime(a * a + b * b);\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\n// Reach: the corner stays at the origin up to 0.1, then moves out along the\n// diagonal from 8 + 8i to 4800 + 4800i on a log scale. Each restart adds the\n// next of CYCLE, so the window wanders out where primes thin and comes back.\nconst reachOf = (u) => (u \u003c= 0.1 ? 0 : Math.round(8 * 600 ** ((u - 0.1) / 0.9)));\nconst CYCLE = [0, 24, 140];\n// The first k for a Step: the largest step length squared that fits.\nfunction firstK(step) {\n  let k = KS[0];\n  for (const q of KS) if (q \u003c= step * step + 1e-9) k = q;\n  return k;\n}\nconst nextK = (k) => {\n  for (const q of KS) if (q > k) return q;\n  return KMAX + 1;\n};\n\nconst DMAX = 1024;\n\nexport function setup(params) {\n  params.s = {\n    pr: new Uint8Array(N), dep: new Int16Array(N), par: new Int32Array(N), q: new Int32Array(N), born: new Float32Array(N),\n    ea: new Float32Array(N), ed: new Uint16Array(N), wa: new Float32Array(N), wash: new Float32Array(3), moat: new Float32Array(N), shore: [], grow: [], tg: 0.3, sp: 2, hueK: 0, startT: -1,\n    nPrime: 0, qlen: 0, lastQ: 0, plen: 1, head: 0, scan: 0, k: 2, k0: 2, off: -1, base: -1, stage: 0,\n    mode: 0, timer: 0, acc: 0, T: 0, fade: 1, moatA: 0,\n    hue: -1, pal: new Float32Array(DMAX * 3), dot: new Float32Array(3), buf: new Float32Array(N * 3),\n  };\n}\n\n// Lays out the window with its corner at off + off*i and seeds the flood at\n// the prime nearest the corner: 1 + i when the corner is the origin.\nfunction build(S, off) {\n  S.off = off;\n  S.nPrime = 0;\n  let seed = -1, best = 1e9;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, b = H - 1 - y, g = gaussPrime(x + off, b + off) ? 1 : 0;\n      S.pr[p] = g;\n      if (g) {\n        S.nPrime++;\n        const d = x * x + b * b;\n        if (d \u003c best) (best = d), (seed = p);\n      }\n    }\n  S.dep.fill(-1);\n  S.born.fill(-10);\n  S.ea.fill(0);\n  S.wa.fill(0);\n  S.moat.fill(0);\n  S.grow.length = 0;\n  S.shore = [];\n  S.qlen = 0;\n  S.head = 0;\n  S.scan = 0;\n  S.k = S.k0;\n  S.mode = 0;\n  S.timer = 0;\n  S.acc = 0;\n  S.moatA = 0;\n  S.lastQ = 0;\n  // A restart fades in over 0.6 s; the first window is there at once.\n  S.startT = S.T > 0 ? S.T : -1;\n  if (seed >= 0) {\n    S.dep[seed] = 0;\n    S.par[seed] = seed;\n    S.born[seed] = S.T;\n    S.q[S.qlen++] = seed;\n    soak(S, seed);\n  }\n}\n\n// The next prime the flood reaches: breadth first over the cluster, each\n// prime scanning its neighbours nearest first out to distance sqrt(k).\n// Only primes inside the window count, so a moat here is a moat of the\n// window: a prime just outside it could bridge one.\nfunction pull(S) {\n  const n = NK[min(S.k, KMAX)], pr = S.pr, dep = S.dep;\n  while (S.head \u003c S.qlen) {\n    const p = S.q[S.head], x = p & 63, y = p >> 6;\n    while (S.scan \u003c n) {\n      const i = S.scan++, X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        dep[c] = min(DMAX - 1, dep[p] + 1);\n        S.par[c] = p;\n        S.born[c] = S.T;\n        S.q[S.qlen++] = c;\n        return c;\n      }\n    }\n    S.head++;\n    S.scan = 0;\n  }\n  return -1;\n}\n\n// A segment a LED wide, soft at its sides, into the edge layer: each LED keeps\n// the strongest cover and the depth of the edge that gave it.\nfunction stamp(S, x0, y0, x1, y1, d, ea, ed) {\n  const vx = x1 - x0, vy = y1 - y0, L2 = vx * vx + vy * vy || 1;\n  const xa = max(0, floor(min(x0, x1)) - 1), xb = min(W - 1, Math.ceil(max(x0, x1)) + 1);\n  const ya = max(0, floor(min(y0, y1)) - 1), yb = min(H - 1, Math.ceil(max(y0, y1)) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const t = cl(((x - x0) * vx + (y - y0) * vy) / L2, 0, 1), ex = x0 + vx * t - x, ey = y0 + vy * t - y;\n      const a = 1 - sqrt(ex * ex + ey * ey) * 1.1;\n      if (a \u003c= 0) continue;\n      const p = y * W + x;\n      if (a > ea[p]) {\n        ea[p] = a;\n        if (ed) ed[p] = d;\n      }\n    }\n}\n\n// The ground the flood holds: a faint wash out to 2 LEDs round each reached\n// prime, so a moat shows as the dark band between the wash and the dots.\nfunction soak(S, p) {\n  const x0 = p & 63, y0 = p >> 6, wa = S.wa;\n  for (let dy = -2; dy \u003c= 2; dy++)\n    for (let dx = -2; dx \u003c= 2; dx++) {\n      const x = x0 + dx, y = y0 + dy;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const a = cl(1.15 - sqrt(dx * dx + dy * dy) * 0.38, 0, 1), q = y * W + x;\n      if (a > wa[q]) wa[q] = a;\n    }\n}\n\n// The flood has run out. The shore is every reached prime with an unreached\n// one within the next step; the moat line runs where the nearest reached\n// prime and the nearest unreached one are equally far.\nfunction meetMoat(S) {\n  const kn = min(nextK(S.k), KMAX), nk = NK[kn], pr = S.pr, dep = S.dep;\n  S.shore = [];\n  for (let h = 0; h \u003c S.qlen; h++) {\n    const p = S.q[h], x = p & 63, y = p >> 6;\n    for (let i = 1; i \u003c nk; i++) {\n      const X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        S.shore.push(p);\n        break;\n      }\n    }\n  }\n  const m = S.moat;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let dr = -1, du = -1;\n      for (let i = 0; i \u003c R49 && (dr \u003c 0 || du \u003c 0); i++) {\n        const X = x + ODX[i], Y = y + ODY[i];\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const c = Y * W + X;\n        if (!pr[c]) continue;\n        if (dep[c] >= 0) {\n          if (dr \u003c 0) dr = ODD[i];\n        } else if (du \u003c 0) du = ODD[i];\n      }\n      m[y * W + x] = dr > 0 && du > 0 ? max(0, 1 - abs(sqrt(dr) - sqrt(du)) * 0.8) : 0;\n    }\n  // A step that crossed nothing pulses for a third as long, so a prime\n  // trapped in a corner runs through its empty steps quickly.\n  S.plen = S.qlen > S.lastQ ? 1 : 0.35;\n  S.lastQ = S.qlen;\n}\n\nfunction raise(S) {\n  S.k = nextK(S.k);\n  S.head = 0;\n  S.scan = 0;\n  S.mode = S.k > KMAX ? 2 : 0;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 1.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(kv[1], 0.2, 3), k0 = firstK(cl(kv[2], 1.5, 4.5)), base = reachOf(cl(kv[3], 0, 1));\n  S.T += d;\n  S.hueK = kv[0] || 0;\n  if (base !== S.base) {\n    S.base = base;\n    S.stage = 0;\n    S.k0 = k0;\n    build(S, base);\n  } else if (k0 !== S.k0) {\n    // A longer first step carries on from here; a shorter one starts over.\n    const up = k0 > S.k0;\n    S.k0 = k0;\n    if (!up) build(S, S.off);\n    else if (S.mode \u003c 2 && k0 > S.k) {\n      S.k = k0;\n      S.head = 0;\n      S.scan = 0;\n      S.mode = 0;\n    }\n  }\n  const b = input.btnPressed || [];\n  if (b[0] && S.mode \u003c 2) raise(S);\n\n  // Each new edge grows from its parent for 0.3 s at Speed 2.\n  const tg = 0.6 / sp;\n  for (let i = S.grow.length - 1; i >= 0; i--) {\n    const c = S.grow[i];\n    if (S.T - S.born[c] >= tg) {\n      const p = S.par[c];\n      stamp(S, p & 63, p >> 6, c & 63, c >> 6, S.dep[c], S.ea, S.ed);\n      soak(S, c);\n      S.grow[i] = S.grow[S.grow.length - 1];\n      S.grow.pop();\n    }\n  }\n  S.tg = tg;\n\n  if (S.mode === 0) {\n    // A few dozen primes a second, more as the frontier (the primes queued\n    // but not yet scanned) widens: 56 a second at Speed 2 near 1 + i.\n    S.acc += d * sp * min(90, 28 + (S.qlen - S.head));\n    while (S.acc >= 1) {\n      S.acc -= 1;\n      const c = pull(S);\n      if (c >= 0) {\n        S.grow.push(c);\n        continue;\n      }\n      S.acc = 0;\n      if (S.qlen >= S.nPrime) {\n        S.mode = 2;\n        S.timer = 0;\n      } else {\n        meetMoat(S);\n        S.mode = 1;\n        S.timer = 0;\n      }\n      break;\n    }\n  } else if (S.mode === 1) {\n    // The moat: 0.7 s at Speed 2 of the shore pulsing, then k goes up.\n    S.timer += (d * sp * 0.72) / S.plen;\n    if (S.timer >= 1) raise(S);\n  } else {\n    // Filled: the coral holds for 3 s, fades for 1.5 s, and the next window\n    // in the cycle starts.\n    S.timer += d * sp * 0.5;\n    if (S.timer >= 4.5) {\n      S.stage = (S.stage + 1) % CYCLE.length;\n      build(S, S.base + CYCLE[S.stage]);\n    }\n  }\n  S.fade = S.mode === 2 ? cl((4.5 - S.timer) / 1.5, 0, 1) : cl((S.T - S.startT) / 0.6, 0, 1);\n  S.moatA = S.mode === 1 ? sin(PI * S.timer) : max(0, S.moatA - d * sp * 1.2);\n  S.sp = sp;\n}\n\n// Colours by depth: the hue runs out and back along a band of the wheel\n// every 72 steps of depth, so each breadth-first layer reads as a ring.\nfunction palette(S) {\n  const h0 = S.hueK + 0.13;\n  for (let i = 0; i \u003c DMAX; i++) {\n    let u = (i % 72) / 36;\n    if (u > 1) u = 2 - u;\n    hsv(h0 + 0.42 * u * u * (3 - 2 * u), 0.78, 1, S.pal, i * 3);\n  }\n  hsv(h0 + 0.5, 0.6, 0.3, S.dot, 0);\n  hsv(h0 + 0.47, 0.9, 0.26, S.wash, 0);\n  S.hue = S.hueK;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.hue !== S.hueK) palette(S);\n  const buf = S.buf, pal = S.pal, dot = S.dot, pr = S.pr, dep = S.dep, ea = S.ea, ed = S.ed, wa = S.wa, wash = S.wash, born = S.born, T = S.T;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const w = wa[p];\n    let r = wash[0] * w, g = wash[1] * w, b = wash[2] * w;\n    const a = ea[p];\n    if (a > 0) {\n      const c = ed[p] * 3, v = a * 0.62;\n      r = max(r, pal[c] * v);\n      g = max(g, pal[c + 1] * v);\n      b = max(b, pal[c + 2] * v);\n    }\n    if (pr[p]) {\n      const dd = dep[p];\n      if (dd \u003c 0) {\n        r = max(r, dot[0]);\n        g = max(g, dot[1]);\n        b = max(b, dot[2]);\n      } else {\n        // A new node flashes white and settles into its colour.\n        const c = dd * 3, fl = cl(1 - (T - born[p]) * 2.5, 0, 1);\n        r = pal[c] + (255 - pal[c]) * fl;\n        g = pal[c + 1] + (255 - pal[c + 1]) * fl;\n        b = pal[c + 2] + (255 - pal[c + 2]) * fl;\n      }\n    }\n    buf[o] = r;\n    buf[o + 1] = g;\n    buf[o + 2] = b;\n  }\n  // Edges still growing, from the parent toward the new prime.\n  if (S.grow.length) {\n    const tmp = S.tmp || (S.tmp = new Float32Array(N));\n    for (const c of S.grow) {\n      const p = S.par[c], t = cl((T - born[c]) / S.tg, 0, 1), x0 = p & 63, y0 = p >> 6, x1 = c & 63, y1 = c >> 6;\n      const xe = x0 + (x1 - x0) * t, ye = y0 + (y1 - y0) * t;\n      stamp(S, x0, y0, xe, ye, 0, tmp, null);\n      const xa = max(0, min(x0, x1) - 1), xb = min(W - 1, max(x0, x1) + 1), ya = max(0, min(y0, y1) - 1), yb = min(H - 1, max(y0, y1) + 1);\n      const cc = dep[c] * 3;\n      for (let y = ya; y \u003c= yb; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const q = y * W + x, v = tmp[q] * 0.8;\n          if (v \u003c= 0) continue;\n          tmp[q] = 0;\n          const o = q * 3;\n          buf[o] = max(buf[o], pal[cc] * v + 60 * v);\n          buf[o + 1] = max(buf[o + 1], pal[cc + 1] * v + 60 * v);\n          buf[o + 2] = max(buf[o + 2], pal[cc + 2] * v + 60 * v);\n        }\n    }\n  }\n  // The moat: its middle line glows pale and the shore primes pulse white.\n  if (S.moatA > 0.01) {\n    const m = S.moat, A = S.moatA;\n    for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n      const v = m[p] * A * 0.9;\n      if (v \u003c= 0) continue;\n      buf[o] += (170 - buf[o]) * v;\n      buf[o + 1] += (215 - buf[o + 1]) * v;\n      buf[o + 2] += (255 - buf[o + 2]) * v;\n    }\n    const pulse = 0.5 + 0.5 * sin(T * S.sp * 9);\n    for (const p of S.shore) {\n      const x = p & 63, y = p >> 6;\n      for (let dy = -1; dy \u003c= 1; dy++)\n        for (let dx = -1; dx \u003c= 1; dx++) {\n          const X = x + dx, Y = y + dy;\n          if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n          const o = (Y * W + X) * 3, v = A * (dx || dy ? 0.35 * pulse : 0.5 + 0.5 * pulse);\n          buf[o] += (255 - buf[o]) * v;\n          buf[o + 1] += (255 - buf[o + 1]) * v;\n          buf[o + 2] += (255 - buf[o + 2]) * v;\n        }\n    }\n  }\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * f, buf[p + 1] * f, buf[p + 2] * f);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower."},{"name":"Step","min":1.5,"max":4.5,"about":"The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go."},{"name":"Reach","min":0,"max":1,"about":"Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back."}],"start":[0,2,1.5,0.06],"measures":{"motion":0.0332,"detail":0.138,"edges":0.7904,"complexity":0.3035,"coverage":0.2952,"colour":0.1811,"drift":0.1107},"knobResponse":[0.0371,0.0267,0.0437,0.056]},{"slug":"gear-train","title":"Gear Train","family":"machine","round":8,"note":"패널 발치의 크랭크가 색 톱니바퀴를 돌려요. 바퀴마다 아래 바퀴와 톱니를 맞물려 꼭대기까지 이어지고, 작은 바퀴일수록 빨리 돌아요. K4 를 올리면 모든 바퀴가 톱니 하나씩 딸깍 걸려 나가요.","idea":"A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.","buttons":"K1 tap reverses the crank; the train slows, stops and runs the other way.","code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-gear-train","type":"code","name":"gear-train","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second."},{"name":"Gears","min":4,"max":9,"about":"How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel."},{"name":"Tick","min":0,"max":1,"about":"Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet."}],"start":[0,2,4,0.06],"measures":{"motion":0.8362,"detail":0.0922,"edges":0.4218,"complexity":1.1517,"coverage":0.8876,"colour":0.5762,"drift":0.1048},"knobResponse":[0.3786,0.1249,0.2931,0.0655]},{"slug":"geyser","title":"Geyser","family":"volcano","round":26,"note":"눈 덮인 지열 지대의 간헐천을 땅속까지 잘라 봐요. 화도에 기포가 차면 청록 웅덩이가 유리 돔으로 부풀다 흰 물기둥으로 터지고, 김 구름이 바람에 흘러가요. K1 은 정오에서 오로라 밤까지 빛을 바꾸고, 누르면 바로 분출해요.","idea":"A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.","buttons":"K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.","code":"// ===== Patternflow pattern =====\n// Title:   Geyser\n// Family:  volcano\n// Idea:    A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after Strokkur in the Haukadalur geothermal field, Iceland\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1\n//\n// Knob 1: Light. A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing.\n// Knob 2: Speed. At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer.\n// Knob 3: Power. At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows.\n// Knob 4: Wind. At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it.\n// Buttons: K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst sc = (c, k) => c.map((v, n) => v * (k.length ? k[n] : k));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the pool's brim, the bowl's floor, the snow on the flat, the horizon,\n// the drained water level; the vent's column; the chamber's centre and radii.\nconst [BRIM, BOWL, GY, HZ, LOW, C] = [71, 80, 75, 61, 103, 32];\nconst [KX, KY, KRX, KRY] = [30.5, 116, 10, 6.5];\n// Gravity in rows per second squared.\nconst G = 150;\n// Seconds at Speed 2: refill, the big bubble's climb, the dome, the drain.\nconst [HEAT, RISE, DOME, FALL] = [7.5, 0.7, 0.45, 3.5];\n\n// The ground: the bowl, the sinter mound with a lip at the brim, the flat.\nconst SURF = new Float32Array(W).map((_, x) => {\n  const dx = abs(x + 0.5 - C);\n  if (dx \u003c 12) return BRIM + (BOWL - BRIM) * (1 - (dx / 12) ** 2) ** 0.7;\n  if (dx \u003c 27) return BRIM - 0.8 * (1 - sm(12, 16, dx)) + (GY - BRIM) * sm(14, 27, dx);\n  return GY + 0.8 * (vn(x * 0.2, 3) - 0.5);\n});\n// The conduit wanders a little and narrows at row 95.\nconst CXA = new Float32Array(H).map((_, y) => C - 0.5 + 0.8 * sin(y * 0.23) + 0.4 * sin(y * 0.61 + 1));\nconst CHW = new Float32Array(H).map((_, y) => 2 + 0.4 * sin(y * 0.37) - 0.6 * exp(-(((y - 95) / 3) ** 2)));\n// The hill behind the field on the right, the ice cap on the horizon at the left.\nconst HILL = new Float32Array(W).map((_, x) => HZ - 20 * sm(30, 66, x) ** 0.9 - 1.2 * vn(x * 0.35, 4));\nconst CAP = new Float32Array(W).map((_, x) => HZ - 1.5 - 2.6 * sqrt(max(0, 1 - ((x + 0.5 - 13) / 17) ** 2)));\n// Cracks feeding ground water to the chamber.\nconst FIS = [[[0, 94], [7, 98], [15, 104], [22, 112]], [[63, 103], [55, 108], [47, 113], [40, 117]]];\n// The beds, top down, colour and rows: sinter, geyserite, ochre, sinter, rust,\n// sulphur, grey clay, ochre, dark rust, tuff, sulphur, dark clay, basalt.\nconst LAY = [[206, 200, 186, 3], [176, 172, 166, 2], [172, 122, 54, 2], [196, 188, 172, 2], [150, 70, 40, 3], [206, 182, 62, 1], [126, 116, 108, 4], [162, 112, 52, 2], [120, 56, 36, 2], [104, 92, 84, 4], [200, 176, 64, 1], [84, 74, 72, 5], [58, 58, 68, 99]];\nconst SULF = [214, 190, 70], RUST = [158, 76, 42], LINE = [214, 210, 196], SNOW = [214, 222, 236];\nconst MAT = [[96, 116, 52], [214, 112, 38], [212, 186, 70]];\nconst COOL = [24, 62, 150], HOT = [44, 176, 204], FOAM = [212, 232, 236];\nconst JACK = [[200, 46, 40], [232, 192, 44], [40, 92, 200], [44, 44, 52], [58, 140, 92], [222, 112, 34], [150, 60, 150]];\n\n// Noon, blue hour, night: sky overhead and at the horizon, daylight, steam lit\n// and in shade, the cut rock, the water.\nconst LIGHT = [\n  [0, [20, 62, 152], [122, 156, 198], [0.95, 0.93, 0.88], [236, 234, 226], [118, 134, 168], 1, 1],\n  [0.5, [10, 24, 74], [66, 88, 148], [0.42, 0.48, 0.7], [158, 168, 212], [50, 60, 108], 0.85, 0.78],\n  [1, [3, 7, 24], [12, 26, 54], [0.24, 0.3, 0.42], [132, 154, 168], [30, 42, 70], 0.62, 0.6],\n];\nfunction lightAt(g) {\n  const a = LIGHT[g > 0.5 ? 1 : 0], b = LIGHT[g > 0.5 ? 2 : 1], u = (g - a[0]) / (b[0] - a[0]);\n  const m = (k) => (a[k].length ? a[k].map((v, c) => mix(v, b[k][c], u)) : mix(a[k], b[k], u));\n  return { top: m(1), low: m(2), amb: m(3), lit: m(4), dark: m(5), rock: m(6), water: m(7), sun: 1 - sm(0, 0.4, g), ag: sm(0.15, 0.45, g) * (1 - sm(0.55, 0.85, g)), moon: sm(0.6, 0.95, g), stars: sm(0.4, 0.85, g), aur: sm(0.6, 0.95, g) };\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), bg: F32(N * 3), rock: F32(N * 3), kind: new Uint8Array(N), sky: new Uint8Array(N), fu: F32(N), D: F32(N), CB: F32(N),\n    t: 0, ph: 0, pt: HEAT - 1.25, wl: BRIM, wl0: LOW, T: 0.9, T0: 0.25, hv: 0, dh: 0, bw: 6, key: -1, ca: 99, ja: 99,\n    bub: [], par: [], spr: [], puffs: [], pop: 0, nb: 0, np: 0, ns: 0, nv: 0, ox: 0, oy: 0, big: -1,\n  });\n  const { kind, fu, rock } = S;\n  // Kinds: 0 the view, 1 the bowl, 2 rock, 3 conduit, 4 crack, 5 chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5;\n    let k = Y >= SURF[x] ? 2 : abs(X - C) \u003c 12 && Y >= BRIM ? 1 : 0;\n    if (k === 2 && ((X - KX) / KRX) ** 2 + ((Y - KY) / KRY) ** 2 \u003c 1 + 0.5 * (vn(X * 0.35, Y * 0.35) - 0.5)) k = 5;\n    else if (k === 2 && y \u003c KY && abs(X - CXA[y]) \u003c CHW[y]) k = 3;\n    kind[i] = k;\n    if (!k && Y \u003c min(HILL[x], CAP[x])) S.sky[i] = 1;\n  }\n  for (const p of FIS)\n    for (let j = 1, len = 0; j \u003c p.length; j++) {\n      const [x0, y0] = p[j - 1], [x1, y1] = p[j], n = hypot(x1 - x0, y1 - y0) * 3;\n      for (let u = 0; u \u003c= n; u++) {\n        const i = floor(mix(y0, y1, u / n)) * W + floor(mix(x0, x1, u / n));\n        if (kind[i] === 2) (kind[i] = 4), (fu[i] = len + u / 3);\n      }\n      len += n / 3;\n    }\n  // The cut rock: beds bend with the ground, a silica lining and sulphur and\n  // rust stains round every water way, columnar basalt below, bacterial mats\n  // on the mound and snow on the flat.\n  const cav = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, dx = abs(X - C), s = SURF[x];\n    if (kind[i] >= 3) cav.push(i);\n    if (kind[i] !== 2) continue;\n    let d = Y - s + 2.4 * (vn(x * 0.08, y * 0.06 + 9) - 0.5) + 0.05 * (X - C), j = 0, dist = 9, gr = 0.9 + 0.18 * hash(x, y + 77);\n    while (d > LAY[j][3] && j \u003c LAY.length - 1) (d -= LAY[j][3]), j++;\n    let c = LAY[j];\n    if (j === LAY.length - 1) {\n      const jx = (X + 3 * vn(1.7, Y * 0.12)) / 6;\n      gr *= (jx - floor(jx) \u003c 0.17 ? 0.6 : 1) * (0.85 + 0.3 * hash(floor(jx), 5));\n    }\n    for (let v = -5; v \u003c= 5; v++)\n      for (let u = -5; u \u003c= 5; u++) {\n        const xx = x + u, yy = y + v, k = xx >= 0 && xx \u003c W && yy \u003c H ? kind[yy * W + xx] : 2;\n        if (k !== 2 && k) dist = min(dist, hypot(u, v) * (k === 4 ? 2.5 : 1));\n      }\n    if (dist \u003c 1.5) c = LINE;\n    else if (dist \u003c 5) c = c.map((v, n) => mix(v, (dist \u003c 3 ? SULF : RUST)[n], (5 - dist) * 0.17));\n    if (dx > 13 && dx \u003c 26 && Y - s \u003c 1.4) c = MAT[floor(cl(vn(X * 0.45, 2) * 2.2 - 0.3, 0, 2.99))];\n    if (dx >= 26 && Y - s \u003c 1.5) c = SNOW;\n    for (let n = 0; n \u003c 3; n++) rock[i * 3 + n] = c[n] * gr;\n  }\n  S.cav = Int32Array.from(cav);\n  // Visitors behind the rope on both sides, in their parkas.\n  S.ppl = [];\n  for (const [x0, x1] of [[2, 18], [46, 62]])\n    for (let x = x0 + rnd() * 2; x \u003c x1; x += 2.2 + rnd() * 2.4)\n      S.ppl.push({ x: floor(x), h: rnd() \u003c 0.3 ? 5 : 4, c: JACK[floor(rnd() * 7)], hat: rnd() \u003c 0.5, dl: rnd() * 0.9, up: rnd() \u003c 0.7 });\n}\n\n// The breeze in columns per second at row y, stronger aloft.\nconst wind = (S, y) => (6 + 16 * S.w) * (0.35 + 0.65 * sm(80, 8, y));\nfunction puff(S, x, y, r, a, vy, life, gr, rmax) {\n  if (S.puffs.length > 210) S.puffs.shift();\n  S.puffs.push({ x, y, r, a, vy, rise: -(1 + 2.5 * rnd()), life, gr, rmax, age: 0, ph: rnd() * 7 });\n}\nconst spray = (S, x, y, vx, vy) => S.spr.length \u003c 700 && S.spr.push({ x, y, vx, vy, life: 2.5 });\n\nfunction enter(S, ph) {\n  Object.assign(S, { ph, pt: 0, wl0: S.wl, T0: S.T });\n  if (ph === 2) S.ca = 0;\n  if (ph === 3) {\n    // The dome tears open in a ring of spray.\n    S.ja = 0;\n    for (let n = 0; n \u003c 40; n++) spray(S, C + (rnd() - 0.5) * S.bw * 1.6, BRIM - S.dh * rnd(), (rnd() - 0.5) * 70, -(40 + 90 * rnd()));\n    for (let n = 0; n \u003c 6; n++) puff(S, C + (rnd() - 0.5) * 12, BRIM - 3 - 4 * rnd(), 3 + rnd() * 2, 0.6, -(10 + 10 * rnd()), 8 + 3 * rnd(), 1.5, 12 + 6 * S.P);\n  }\n}\n\nfunction step(S, d, hold) {\n  const P = S.P, Dj = 1.1 + 1.1 * P, Rl = RISE - 0.35 * P, Dl = DOME - 0.2 * P, t = (S.t += d);\n  if (!hold) (S.pt += d), (S.ca += d), (S.ja += d);\n  if (S.pt >= [HEAT, Rl, Dl, Dj, FALL][S.ph]) enter(S, (S.ph + 1) % 5);\n  const { ph, pt } = S;\n  // The water level and how hot the water is.\n  if (ph === 0) (S.wl = mix(S.wl0, BRIM, sm(0, 6, pt))), (S.T = mix(S.T0, 1, sm(0, HEAT, pt)));\n  else if (ph === 1) (S.wl = mix(S.wl0, BRIM, sm(0, 0.5, pt))), (S.T = mix(S.T0, 1, sm(0, 0.4, pt)));\n  else if (ph === 2) S.wl = BRIM;\n  else if (ph === 3) (S.wl = BRIM), (S.T = 1 - 0.65 * sm(0, Dj, pt));\n  else (S.wl = mix(S.wl0, LOW, sm(0.2, 2.6, pt)) + 1.6 * exp(-pt * 1.1) * sin(pt * 10) * sm(0.3, 0.8, pt)), (S.T = mix(S.T0, 0.25, sm(0, FALL, pt)));\n  // The pool heaves before it goes, the big bubble climbs, the dome swells.\n  S.hv = ph === 0 ? (1.1 + P) * sm(4.5, 7.5, pt) * sin(t * 4.2) ** 2 : ph === 1 ? 1 + (2.2 + P) * sm(0, Rl, pt) : 0;\n  S.big = ph === 1 ? mix(KY - KRY + 1, BOWL - 2, sm(0, Rl, pt) ** 1.4) : -1;\n  S.bw = 7.5 + 4 * P;\n  S.dh = ph === 2 ? (9 + 7 * P) * sm(0, Dl, pt) ** 0.8 + 0.5 * sin(pt * 30) : 0;\n\n  // Steam bubbles grow as they climb from the chamber's floor. They collapse\n  // in cooler water; once it is hot through they reach the pool and pop.\n  for (S.nb += d * (1.5 + 18 * S.T * S.T) * (ph === 3 ? 3 : ph === 4 ? 0.3 : 1) * (1 + 0.8 * P); S.nb >= 1; S.nb--)\n    if (S.bub.length \u003c 160) S.bub.push({ x: KX + (rnd() - 0.5) * KRX * 1.3, y: KY + KRY * (0.25 + 0.5 * rnd()), r: 0.4, v: 3 + 4 * rnd() });\n  const cr = ph > 0 && ph \u003c 4 ? -9 : mix(106, BOWL - 4, sm(0.35, 0.92, S.T));\n  for (const b of S.bub) {\n    const yi = cl(floor(b.y), 0, H - 1), inC = b.y \u003c KY - KRY + 1.5;\n    if (inC) (b.x += (CXA[yi] + 0.5 - b.x) * min(1, d * 8)), (b.v = min(32, b.v + 26 * d));\n    else (b.x += (KX - b.x) * d * 0.4 * sm(KY, KY - KRY, b.y) + sin(t * 3 + b.y) * d), (b.v = min(14, b.v + 8 * d));\n    b.y -= b.v * d * (ph === 3 ? 1.8 : 1);\n    b.r = min(inC ? (b.y \u003c BOWL ? 1.2 : CHW[yi] - 0.3) : 2.3, b.r + d * (0.3 + 0.7 * S.T));\n    if (b.y \u003c cr || (S.big > 0 && b.y > S.big && b.y \u003c S.big + 10)) b.dead = 1;\n    else if (b.y \u003c= S.wl + 0.5) {\n      b.dead = 1;\n      if (S.wl \u003c BOWL) {\n        S.pop = min(1.5, S.pop + 0.15 * b.r);\n        if (rnd() \u003c 0.5) puff(S, b.x + (rnd() - 0.5) * 8, S.wl - 2, 1.8, 0.3, -6, 3 + 2 * rnd(), 1, 5);\n      }\n    }\n  }\n  S.bub = S.bub.filter((b) => !b.dead);\n  S.pop *= exp(-3 * d);\n\n  // The jet: slabs of water fly up and spread; past the top they break up.\n  if (ph === 3) {\n    const u = pt / Dj, v = sqrt(2 * G * (64 + 46 * P)) * (1 - 0.25 * sm(0.7, 1, u)) * (1 - 0.6 * sm(0.45, 0.8, P) * exp(-(((u - 0.48) / 0.09) ** 2)));\n    for (S.np += d * v * 0.6; S.np >= 1; S.np--) S.par.push({ x: C + (rnd() - 0.5) * 1.2, y: BRIM - 1 - v * d * rnd(), vy: -v * (0.95 + 0.1 * rnd()), w: (3.5 + 3.5 * P) * (0.85 + 0.3 * rnd()), a: 1, ap: 0 });\n  }\n  for (const q of S.par) {\n    q.vy += G * d;\n    q.y += q.vy * d;\n    q.x += wind(S, q.y) * 0.35 * d;\n    q.w += d * (4.5 + 4.5 * P) * (q.ap ? 2 : 1);\n    if (!q.ap && q.vy > -25) {\n      q.ap = 1;\n      for (let n = 0; n \u003c 2; n++) spray(S, q.x + (rnd() - 0.5) * q.w * 2, q.y, (rnd() - 0.5) * 64, q.vy + (rnd() - 0.6) * 30);\n    }\n    if (rnd() \u003c d * 3) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      spray(S, q.x + sd * q.w, q.y, sd * (8 + 26 * rnd()), q.vy * 0.75);\n    }\n    if (q.ap) q.a -= d * 1.6;\n    if (q.y > BRIM || q.a \u003c= 0) q.dead = 1;\n  }\n  S.par = S.par.filter((q) => !q.dead);\n  // Steam boils off the column while it stands and a little after.\n  if (S.ja \u003c Dj + 0.8 && S.par.length)\n    for (S.ns += d * (40 + 40 * P); S.ns >= 1; S.ns--) {\n      const q = S.par[floor(rnd() * S.par.length)];\n      puff(S, q.x + (rnd() - 0.5) * q.w * 1.8, q.y, 2.5 + q.w * 0.6, 0.55 + 0.25 * rnd(), max(-30, q.vy * 0.3), 10 + 4 * rnd() + 3 * P, 2 + 1.5 * rnd(), 17 + 7 * P);\n    }\n  for (const s of S.spr) {\n    s.vy = min(90, s.vy + G * 0.85 * d);\n    s.vx *= 1 - 0.5 * d;\n    s.x += (s.vx + wind(S, s.y) * 0.5) * d;\n    s.y += s.vy * d;\n    s.life -= d;\n    const x = floor(s.x), y = floor(s.y);\n    if (s.life \u003c 0 || x \u003c 0 || x >= W || y >= H || (y >= 0 && S.kind[y * W + x] && s.vy > 0)) s.dead = 1;\n  }\n  S.spr = S.spr.filter((s) => !s.dead);\n\n  // Gentle steam off the pool, and from small vents out on the field.\n  const wet = S.wl \u003c BOWL - 1;\n  for (S.nv += d * (2 + (wet ? 4 + 5 * S.T : 1) * (1 + P)); S.nv >= 1; S.nv--)\n    if (rnd() \u003c 0.7) puff(S, C + (rnd() - 0.5) * (wet ? 20 : 6), (wet ? S.wl : BOWL) - 1, 1.6 + rnd(), 0.22 + 0.2 * rnd(), -(5 + 3 * rnd()), 4 + 2 * rnd(), 1, 6);\n    else {\n      const v = [[7, 67], [52, 64], [21, 63], [60, 70]][floor(rnd() * 4)];\n      puff(S, v[0] + rnd() - 0.5, v[1], 1.1, 0.3, -(4 + 2 * rnd()), 3.5 + 2 * rnd(), 0.8, 4);\n    }\n  for (const q of S.puffs) {\n    q.age += d;\n    q.vy += (q.rise - q.vy) * 1.2 * d;\n    q.y += q.vy * d;\n    q.x += (wind(S, q.y) + 1.2 * sin(q.age * 1.1 + q.ph)) * d;\n    q.r = min(q.rmax, q.r + q.gr * d);\n  }\n  S.puffs = S.puffs.filter((q) => q.age \u003c q.life && q.y + q.r > -6 && q.x > -26 && q.x \u003c W + 26);\n  S.ox += wind(S, 25) * 0.2 * d;\n  S.oy -= 0.6 * d;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.g, S.P, S.w] = [cl(k[0], 0, 1), cl(k[2], 0, 1), cl(k[3], -1, 1)];\n  if (!S.init) {\n    // Open on a steaming field with the last cloud still high up; the pool holds its phase.\n    for (let n = 0; n \u003c 18; n++) puff(S, -10 + n * 4 + rnd() * 4, 8 + 24 * rnd(), 6 + 4 * rnd(), 0.4 + 0.15 * rnd(), -2, 15 + 4 * rnd(), 0.8, 16), (S.puffs[n].age = 2 + 4 * rnd());\n    for (let n = 0; n \u003c 150; n++) step(S, 1 / 30, 1);\n    S.bub.length = S.pop = S.t = 0;\n    S.init = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === 0 || S.ph === 4)) enter(S, 1);\n  step(S, (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2);\n}\n\n// The view and the cut rock, kept until the light changes.\nfunction backdrop(S) {\n  const L = (S.L = lightAt(S.g)), BG = S.bg, R = S.rock, { amb, top, low } = L;\n  S.key = round(S.g * 60);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, k = S.kind[i];\n    let c;\n    if (k >= 2) c = k === 2 ? [R[o], R[o + 1], R[o + 2]] : [26, 28, 36];\n    else if (k === 1) {\n      // The far wall of the bowl, wet sinter.\n      const v = (0.75 + 0.3 * hash(x, y)) * (0.8 + 0.25 * vn(X * 0.5, Y * 0.9));\n      c = [62 * v, 86 * v, 90 * v];\n    }\n    if (c) c = sc(c, L.rock);\n    else if (S.sky[i]) {\n      const sd = hypot(X - 9, Y - 53), md = hypot(X - 13, Y - 15), v = (Y / HZ) ** 1.3;\n      const sg = L.sun * (0.6 * exp(-sd / 9) + (sd \u003c 1.7 ? 1.1 : 0)), ag = L.ag * exp(-(((Y - 58) / 9) ** 2)) * (1 - X / 80);\n      const mg = L.moon * ((md \u003c 2.4 ? 0.9 : 0) + 0.12 * exp(-md / 5)), st = hash(x, y) \u003c 0.013 && Y \u003c 52 ? L.stars * (90 + 140 * hash(y, x)) : 0;\n      c = top.map((a, n) => mix(a, low[n], v) + sg * [255, 206, 130][n] + ag * [110, 92, 168][n] + mg * [228, 230, 238][n] + st * [0.85, 0.9, 1][n]);\n    } else if (Y \u003c HZ) {\n      // The ice cap; snow and scree on the hill.\n      const sn = vn(x * 0.16, y * 0.3) + 0.35 * vn(x * 0.5, y * 0.8) - 0.01 * (Y - HILL[x]) > 0.55;\n      c = Y \u003c HILL[x] ? [222, 232, 246].map((a, n) => a * amb[n] * 0.92 + low[n] * 0.1) : sc(sn ? sc(SNOW, 0.74 + 0.004 * x) : [64, 60, 62], amb);\n    } else if (Y \u003c HZ + 1.5) c = sc([92, 100, 118], amb);\n    else {\n      // The flat field: snow, and bare warm ground near the springs.\n      const f = (Y - HZ) / (GY - HZ), b = 0.7 * sm(0.6, 0.66, vn((X * 0.1) / (0.35 + f), y * 0.6)) * sm(27, 10, abs(X - C));\n      c = SNOW.map((a, n) => mix(a * (0.8 + 0.2 * f), [112, 92, 70][n], b) * amb[n]);\n    }\n    for (let n = 0; n \u003c 3; n++) BG[o + n] = c[n];\n  }\n}\n\n// Add an elliptical blob to a density field.\nfunction splat(A, cx, cy, rx, ry, a) {\n  const y1 = min(H - 1, cy + ry), x0 = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx);\n  for (let y = max(0, floor(cy - ry)); y \u003c= y1; y++) {\n    const dy = (y + 0.5 - cy) / ry, dd = 1 - dy * dy;\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = (x + 0.5 - cx) / rx, e = dd - dx * dx;\n      if (e > 0) A[y * W + x] += a * e;\n    }\n  }\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], c[n], a);\n}\n\n// Shade a density field over the frame, lit on the side facing the light.\nfunction shade(S, A, k0, lit, dark, tint, jet) {\n  for (let i = 0; i \u003c N; i++) {\n    const v = A[i];\n    if (v \u003c 0.015) continue;\n    const x = i & 63, y = i >> 6, o = i * 3;\n    const tex = jet ? vn(x * 0.5, (y + S.t * 10) * 0.25) : vn(x * 0.18 - S.ox, y * 0.18 - S.oy);\n    const al = min(0.95, 1 - exp(-v * (k0 + 1.6 * tex))), gx = v - A[x > 1 && y > 1 ? i - (jet ? 2 : 2 * W + 2) : i];\n    const sh = cl(0.52 + (jet ? 0.9 : 0.5) * gx + 0.45 * (tex - 0.5), 0.12, 1.02), tt = jet ? sm(BRIM - 16, BRIM, y) * 0.6 : 0;\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], mix(mix(dark[n], lit[n], sh), jet ? tint[n] : 0, tt), al);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  if (S.key !== round(S.g * 60)) backdrop(S);\n  F = S.f;\n  F.set(S.bg);\n  const L = S.L, { t, kind, D, CB, ph, wl, T, P } = S, amb = L.amb, Lw = L.water, Lr = L.rock;\n\n  // Aurora: a green hem, rays rising into violet.\n  if (L.aur > 0.01)\n    for (let k = 0; k \u003c 2; k++)\n      for (let x = 0; x \u003c W; x++) {\n        const yb = 30 + 8 * k + 5 * sin(x * 0.08 + t * 0.22 + k * 2.1) + 8 * (vn(x * 0.07 + t * 0.12, k * 7) - 0.5);\n        const I = L.aur * sm(0.3, 0.75, vn(x * 0.09 - t * 0.1 + k * 3, t * 0.04 + k)) * (0.5 + 0.5 * vn(x * 0.7 + t * 0.5, k * 11 + t * 0.3));\n        if (I \u003c 0.02) continue;\n        for (let y = max(0, floor(yb - 26)); y \u003c= yb; y++) {\n          const i = y * W + x, u = (yb - y) / 26, e = I * (u \u003c 0.08 ? u / 0.08 : exp(-u * 2.2)) * 0.9, v = sm(0.35, 1, u);\n          if (S.sky[i]) (F[i * 3] += mix(40, 96, v) * e), (F[i * 3 + 1] += mix(214, 60, v) * e), (F[i * 3 + 2] += mix(120, 176, v) * e);\n        }\n      }\n\n  // The visitors behind the rope; once the dome rises most hold up a phone.\n  for (const p of S.ppl) {\n    const hy = GY - p.h, jc = sc(p.c, amb);\n    put(p.x, GY - 1, sc([30, 30, 36], amb));\n    for (let y = hy + 1; y \u003c GY - 1; y++) put(p.x, y, jc);\n    put(p.x, hy, p.hat ? jc : sc([226, 186, 160], amb));\n    if (p.up && S.ca > p.dl && S.ca \u003c 6 + p.dl) put(p.x + 1, hy, jc), put(p.x + 1, hy - 1, L.stars > 0.3 ? [180, 210, 255] : [40, 40, 50]);\n  }\n  for (const x of [1, 8, 15, 49, 56, 63]) for (let y = GY - 3; y \u003c GY; y++) put(x, y, sc([70, 56, 40], amb));\n  for (let x = 1; x \u003c 64; x++) if (x \u003c 16 || x > 48) put(x, GY - 3 + (sin(((x - 1) / 7) * Math.PI) > 0.2 ? 1 : 0), sc([214, 184, 64], amb), 0.8);\n\n  // All the steam, summed and shaded.\n  D.fill(0);\n  for (const q of S.puffs) {\n    const a = q.a * sm(0, 0.4, q.age) * (1 - sm(q.life * 0.45, q.life, q.age));\n    if (a > 0.01) splat(D, q.x, q.y, q.r, q.r, a);\n  }\n  shade(S, D, 1.1, L.lit, L.dark);\n\n  // The pool in section, its heave, ripples and dome.\n  const foam = ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1.2, S.pt) : 0;\n  for (let x = 20; x \u003c 44; x++) {\n    const dx = x + 0.5 - C;\n    let top = wl - S.hv * max(0, 1 - (dx / 10) ** 2) + S.pop * sin(x * 1.3 - t * 14) * 0.6 + foam * 1.5 * (hash(x, floor(t * 20)) - 0.5);\n    const dome = S.dh > 0 && abs(dx) \u003c S.bw ? S.dh * (1 - (dx / S.bw) ** 2) ** 0.75 : 0;\n    if (dome) top = min(top, BRIM - dome);\n    for (let y = max(0, floor(top)); y \u003c SURF[x]; y++) {\n      const z = y + 0.5 - top;\n      if (z \u003c 0 || (kind[y * W + x] !== 1 && y >= BRIM)) continue;\n      let c;\n      if (dome && y \u003c BRIM) {\n        const nx = dx / S.bw, ny = (BRIM - y) / (S.dh + 0.1), sp = exp(-((nx + 0.42) ** 2) / 0.03 - (ny - 0.6) ** 2 / 0.08);\n        c = [40, 150, 176].map((v, n) => (mix(v, [110, 226, 230][n], ny * 0.8 + 0.3 * abs(nx)) * (0.85 + 0.25 * vn(x * 0.5, y * 0.5 - t * 6)) + 150 * sp + (z \u003c 1 ? 70 : 0)) * Lw);\n      } else if (z \u003c 1) c = sc([150, 224, 226], Lw);\n      else c = [60, 190, 200].map((v, n) => mix(v, [18, 70, 140][n], sm(0, 10, z)) * Lw * (0.88 + 0.24 * vn(x * 0.45 + t * 0.6, y * 0.7 - t * 0.4)));\n      if (foam && z \u003c 3 && hash(x, y + floor(t * 25)) \u003c 0.6 * foam) c = sc(FOAM, Lw);\n      put(x, y, c);\n    }\n  }\n\n  // The column and its spray.\n  CB.fill(0);\n  for (const q of S.par) splat(CB, q.x, q.y, q.w, 2.8, q.a);\n  if (S.par.length) shade(S, CB, 1.8, L.lit.map((v) => min(240, v * 1.04)), L.dark, [70 * Lw, 200 * Lw, 212 * Lw], 1);\n  for (const s of S.spr) {\n    const a = min(1, s.life * 1.5) * 0.85;\n    put(s.x - s.vx * 0.02, s.y - s.vy * 0.02, L.lit, a * 0.35);\n    put(s.x, s.y, L.lit, a);\n  }\n\n  // Under the ground: the conduit, the chamber and the cracks feeding it.\n  const froth = ph === 3 ? 1 - 0.5 * sm(0.6, 1, S.pt / (1.1 + 1.1 * P)) : ph === 2 ? 0.3 : ph === 1 ? 0.12 : 0;\n  const inflow = ph === 0 ? 1 - sm(4, 6.5, S.pt) * 0.8 : ph === 4 ? sm(1, 3, S.pt) : 0.2;\n  for (const i of S.cav) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = kind[i];\n    let r, g, b;\n    if (k === 4) {\n      const p = inflow * sm(0.55, 1, sin(S.fu[i] * 0.7 - t * 7));\n      (r = 20 + 80 * p), (g = 46 + 130 * p), (b = 104 + 110 * p);\n    } else if (k === 3 && y + 0.5 \u003c wl) {\n      // Drained: wet walls with a film running down.\n      const f = ph === 4 && hash(x, floor(y - t * 26)) \u003c 0.12;\n      (r = f ? 70 : 30), (g = f ? 104 : 33), (b = f ? 124 : 42);\n    } else if (froth && hash(x, floor(y + t * 80)) \u003c froth * (k === 5 ? 0.4 : 0.55)) [r, g, b] = FOAM;\n    else {\n      // Cool water blue, hot water turquoise.\n      const Tl = cl(T * (0.7 + 0.3 * sm(BOWL, KY + KRY, y)) + (k === 5 ? 0.08 : 0), 0, 1), sh = (0.86 + 0.28 * vn(x * 0.6, y * 0.3 + t * 2)) * (k === 3 && y === floor(wl) ? 1.3 : 1);\n      (r = mix(COOL[0], HOT[0], Tl) * sh), (g = mix(COOL[1], HOT[1], Tl) * sh), (b = mix(COOL[2], HOT[2], Tl) * sh);\n    }\n    (F[o] = r * Lr), (F[o + 1] = g * Lr), (F[o + 2] = b * Lr);\n  }\n  for (const { x, y, r } of S.bub)\n    if (r \u003c 0.9) put(x, y, FOAM, 0.85);\n    else\n      for (let v = floor(y - r); v \u003c= y + r; v++)\n        for (let u = floor(x - r); u \u003c= x + r; u++) {\n          const e = hypot(u + 0.5 - x, v + 0.5 - y) / r;\n          if (e \u003c 1) put(u, v, e > 0.6 ? [150, 220, 230] : FOAM, 0.9);\n        }\n  if (S.big > 0)\n    for (let y = floor(S.big); y \u003c S.big + 10; y++) {\n      const cx = CXA[y] + 0.5, hw = CHW[y] * min(1, 0.5 + 0.5 * (y + 1 - S.big)) - 0.3;\n      for (let x = floor(cx - hw); x \u003c cx + hw; x++) put(x, y, abs(x + 0.5 - cx) > hw - 1 ? [160, 236, 240] : [236, 246, 248], 0.97);\n    }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-geyser","type":"code","name":"geyser","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Geyser\n// Family:  volcano\n// Idea:    A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after Strokkur in the Haukadalur geothermal field, Iceland\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1\n//\n// Knob 1: Light. A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing.\n// Knob 2: Speed. At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer.\n// Knob 3: Power. At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows.\n// Knob 4: Wind. At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it.\n// Buttons: K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst sc = (c, k) => c.map((v, n) => v * (k.length ? k[n] : k));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the pool's brim, the bowl's floor, the snow on the flat, the horizon,\n// the drained water level; the vent's column; the chamber's centre and radii.\nconst [BRIM, BOWL, GY, HZ, LOW, C] = [71, 80, 75, 61, 103, 32];\nconst [KX, KY, KRX, KRY] = [30.5, 116, 10, 6.5];\n// Gravity in rows per second squared.\nconst G = 150;\n// Seconds at Speed 2: refill, the big bubble's climb, the dome, the drain.\nconst [HEAT, RISE, DOME, FALL] = [7.5, 0.7, 0.45, 3.5];\n\n// The ground: the bowl, the sinter mound with a lip at the brim, the flat.\nconst SURF = new Float32Array(W).map((_, x) => {\n  const dx = abs(x + 0.5 - C);\n  if (dx \u003c 12) return BRIM + (BOWL - BRIM) * (1 - (dx / 12) ** 2) ** 0.7;\n  if (dx \u003c 27) return BRIM - 0.8 * (1 - sm(12, 16, dx)) + (GY - BRIM) * sm(14, 27, dx);\n  return GY + 0.8 * (vn(x * 0.2, 3) - 0.5);\n});\n// The conduit wanders a little and narrows at row 95.\nconst CXA = new Float32Array(H).map((_, y) => C - 0.5 + 0.8 * sin(y * 0.23) + 0.4 * sin(y * 0.61 + 1));\nconst CHW = new Float32Array(H).map((_, y) => 2 + 0.4 * sin(y * 0.37) - 0.6 * exp(-(((y - 95) / 3) ** 2)));\n// The hill behind the field on the right, the ice cap on the horizon at the left.\nconst HILL = new Float32Array(W).map((_, x) => HZ - 20 * sm(30, 66, x) ** 0.9 - 1.2 * vn(x * 0.35, 4));\nconst CAP = new Float32Array(W).map((_, x) => HZ - 1.5 - 2.6 * sqrt(max(0, 1 - ((x + 0.5 - 13) / 17) ** 2)));\n// Cracks feeding ground water to the chamber.\nconst FIS = [[[0, 94], [7, 98], [15, 104], [22, 112]], [[63, 103], [55, 108], [47, 113], [40, 117]]];\n// The beds, top down, colour and rows: sinter, geyserite, ochre, sinter, rust,\n// sulphur, grey clay, ochre, dark rust, tuff, sulphur, dark clay, basalt.\nconst LAY = [[206, 200, 186, 3], [176, 172, 166, 2], [172, 122, 54, 2], [196, 188, 172, 2], [150, 70, 40, 3], [206, 182, 62, 1], [126, 116, 108, 4], [162, 112, 52, 2], [120, 56, 36, 2], [104, 92, 84, 4], [200, 176, 64, 1], [84, 74, 72, 5], [58, 58, 68, 99]];\nconst SULF = [214, 190, 70], RUST = [158, 76, 42], LINE = [214, 210, 196], SNOW = [214, 222, 236];\nconst MAT = [[96, 116, 52], [214, 112, 38], [212, 186, 70]];\nconst COOL = [24, 62, 150], HOT = [44, 176, 204], FOAM = [212, 232, 236];\nconst JACK = [[200, 46, 40], [232, 192, 44], [40, 92, 200], [44, 44, 52], [58, 140, 92], [222, 112, 34], [150, 60, 150]];\n\n// Noon, blue hour, night: sky overhead and at the horizon, daylight, steam lit\n// and in shade, the cut rock, the water.\nconst LIGHT = [\n  [0, [20, 62, 152], [122, 156, 198], [0.95, 0.93, 0.88], [236, 234, 226], [118, 134, 168], 1, 1],\n  [0.5, [10, 24, 74], [66, 88, 148], [0.42, 0.48, 0.7], [158, 168, 212], [50, 60, 108], 0.85, 0.78],\n  [1, [3, 7, 24], [12, 26, 54], [0.24, 0.3, 0.42], [132, 154, 168], [30, 42, 70], 0.62, 0.6],\n];\nfunction lightAt(g) {\n  const a = LIGHT[g > 0.5 ? 1 : 0], b = LIGHT[g > 0.5 ? 2 : 1], u = (g - a[0]) / (b[0] - a[0]);\n  const m = (k) => (a[k].length ? a[k].map((v, c) => mix(v, b[k][c], u)) : mix(a[k], b[k], u));\n  return { top: m(1), low: m(2), amb: m(3), lit: m(4), dark: m(5), rock: m(6), water: m(7), sun: 1 - sm(0, 0.4, g), ag: sm(0.15, 0.45, g) * (1 - sm(0.55, 0.85, g)), moon: sm(0.6, 0.95, g), stars: sm(0.4, 0.85, g), aur: sm(0.6, 0.95, g) };\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), bg: F32(N * 3), rock: F32(N * 3), kind: new Uint8Array(N), sky: new Uint8Array(N), fu: F32(N), D: F32(N), CB: F32(N),\n    t: 0, ph: 0, pt: HEAT - 1.25, wl: BRIM, wl0: LOW, T: 0.9, T0: 0.25, hv: 0, dh: 0, bw: 6, key: -1, ca: 99, ja: 99,\n    bub: [], par: [], spr: [], puffs: [], pop: 0, nb: 0, np: 0, ns: 0, nv: 0, ox: 0, oy: 0, big: -1,\n  });\n  const { kind, fu, rock } = S;\n  // Kinds: 0 the view, 1 the bowl, 2 rock, 3 conduit, 4 crack, 5 chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5;\n    let k = Y >= SURF[x] ? 2 : abs(X - C) \u003c 12 && Y >= BRIM ? 1 : 0;\n    if (k === 2 && ((X - KX) / KRX) ** 2 + ((Y - KY) / KRY) ** 2 \u003c 1 + 0.5 * (vn(X * 0.35, Y * 0.35) - 0.5)) k = 5;\n    else if (k === 2 && y \u003c KY && abs(X - CXA[y]) \u003c CHW[y]) k = 3;\n    kind[i] = k;\n    if (!k && Y \u003c min(HILL[x], CAP[x])) S.sky[i] = 1;\n  }\n  for (const p of FIS)\n    for (let j = 1, len = 0; j \u003c p.length; j++) {\n      const [x0, y0] = p[j - 1], [x1, y1] = p[j], n = hypot(x1 - x0, y1 - y0) * 3;\n      for (let u = 0; u \u003c= n; u++) {\n        const i = floor(mix(y0, y1, u / n)) * W + floor(mix(x0, x1, u / n));\n        if (kind[i] === 2) (kind[i] = 4), (fu[i] = len + u / 3);\n      }\n      len += n / 3;\n    }\n  // The cut rock: beds bend with the ground, a silica lining and sulphur and\n  // rust stains round every water way, columnar basalt below, bacterial mats\n  // on the mound and snow on the flat.\n  const cav = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, dx = abs(X - C), s = SURF[x];\n    if (kind[i] >= 3) cav.push(i);\n    if (kind[i] !== 2) continue;\n    let d = Y - s + 2.4 * (vn(x * 0.08, y * 0.06 + 9) - 0.5) + 0.05 * (X - C), j = 0, dist = 9, gr = 0.9 + 0.18 * hash(x, y + 77);\n    while (d > LAY[j][3] && j \u003c LAY.length - 1) (d -= LAY[j][3]), j++;\n    let c = LAY[j];\n    if (j === LAY.length - 1) {\n      const jx = (X + 3 * vn(1.7, Y * 0.12)) / 6;\n      gr *= (jx - floor(jx) \u003c 0.17 ? 0.6 : 1) * (0.85 + 0.3 * hash(floor(jx), 5));\n    }\n    for (let v = -5; v \u003c= 5; v++)\n      for (let u = -5; u \u003c= 5; u++) {\n        const xx = x + u, yy = y + v, k = xx >= 0 && xx \u003c W && yy \u003c H ? kind[yy * W + xx] : 2;\n        if (k !== 2 && k) dist = min(dist, hypot(u, v) * (k === 4 ? 2.5 : 1));\n      }\n    if (dist \u003c 1.5) c = LINE;\n    else if (dist \u003c 5) c = c.map((v, n) => mix(v, (dist \u003c 3 ? SULF : RUST)[n], (5 - dist) * 0.17));\n    if (dx > 13 && dx \u003c 26 && Y - s \u003c 1.4) c = MAT[floor(cl(vn(X * 0.45, 2) * 2.2 - 0.3, 0, 2.99))];\n    if (dx >= 26 && Y - s \u003c 1.5) c = SNOW;\n    for (let n = 0; n \u003c 3; n++) rock[i * 3 + n] = c[n] * gr;\n  }\n  S.cav = Int32Array.from(cav);\n  // Visitors behind the rope on both sides, in their parkas.\n  S.ppl = [];\n  for (const [x0, x1] of [[2, 18], [46, 62]])\n    for (let x = x0 + rnd() * 2; x \u003c x1; x += 2.2 + rnd() * 2.4)\n      S.ppl.push({ x: floor(x), h: rnd() \u003c 0.3 ? 5 : 4, c: JACK[floor(rnd() * 7)], hat: rnd() \u003c 0.5, dl: rnd() * 0.9, up: rnd() \u003c 0.7 });\n}\n\n// The breeze in columns per second at row y, stronger aloft.\nconst wind = (S, y) => (6 + 16 * S.w) * (0.35 + 0.65 * sm(80, 8, y));\nfunction puff(S, x, y, r, a, vy, life, gr, rmax) {\n  if (S.puffs.length > 210) S.puffs.shift();\n  S.puffs.push({ x, y, r, a, vy, rise: -(1 + 2.5 * rnd()), life, gr, rmax, age: 0, ph: rnd() * 7 });\n}\nconst spray = (S, x, y, vx, vy) => S.spr.length \u003c 700 && S.spr.push({ x, y, vx, vy, life: 2.5 });\n\nfunction enter(S, ph) {\n  Object.assign(S, { ph, pt: 0, wl0: S.wl, T0: S.T });\n  if (ph === 2) S.ca = 0;\n  if (ph === 3) {\n    // The dome tears open in a ring of spray.\n    S.ja = 0;\n    for (let n = 0; n \u003c 40; n++) spray(S, C + (rnd() - 0.5) * S.bw * 1.6, BRIM - S.dh * rnd(), (rnd() - 0.5) * 70, -(40 + 90 * rnd()));\n    for (let n = 0; n \u003c 6; n++) puff(S, C + (rnd() - 0.5) * 12, BRIM - 3 - 4 * rnd(), 3 + rnd() * 2, 0.6, -(10 + 10 * rnd()), 8 + 3 * rnd(), 1.5, 12 + 6 * S.P);\n  }\n}\n\nfunction step(S, d, hold) {\n  const P = S.P, Dj = 1.1 + 1.1 * P, Rl = RISE - 0.35 * P, Dl = DOME - 0.2 * P, t = (S.t += d);\n  if (!hold) (S.pt += d), (S.ca += d), (S.ja += d);\n  if (S.pt >= [HEAT, Rl, Dl, Dj, FALL][S.ph]) enter(S, (S.ph + 1) % 5);\n  const { ph, pt } = S;\n  // The water level and how hot the water is.\n  if (ph === 0) (S.wl = mix(S.wl0, BRIM, sm(0, 6, pt))), (S.T = mix(S.T0, 1, sm(0, HEAT, pt)));\n  else if (ph === 1) (S.wl = mix(S.wl0, BRIM, sm(0, 0.5, pt))), (S.T = mix(S.T0, 1, sm(0, 0.4, pt)));\n  else if (ph === 2) S.wl = BRIM;\n  else if (ph === 3) (S.wl = BRIM), (S.T = 1 - 0.65 * sm(0, Dj, pt));\n  else (S.wl = mix(S.wl0, LOW, sm(0.2, 2.6, pt)) + 1.6 * exp(-pt * 1.1) * sin(pt * 10) * sm(0.3, 0.8, pt)), (S.T = mix(S.T0, 0.25, sm(0, FALL, pt)));\n  // The pool heaves before it goes, the big bubble climbs, the dome swells.\n  S.hv = ph === 0 ? (1.1 + P) * sm(4.5, 7.5, pt) * sin(t * 4.2) ** 2 : ph === 1 ? 1 + (2.2 + P) * sm(0, Rl, pt) : 0;\n  S.big = ph === 1 ? mix(KY - KRY + 1, BOWL - 2, sm(0, Rl, pt) ** 1.4) : -1;\n  S.bw = 7.5 + 4 * P;\n  S.dh = ph === 2 ? (9 + 7 * P) * sm(0, Dl, pt) ** 0.8 + 0.5 * sin(pt * 30) : 0;\n\n  // Steam bubbles grow as they climb from the chamber's floor. They collapse\n  // in cooler water; once it is hot through they reach the pool and pop.\n  for (S.nb += d * (1.5 + 18 * S.T * S.T) * (ph === 3 ? 3 : ph === 4 ? 0.3 : 1) * (1 + 0.8 * P); S.nb >= 1; S.nb--)\n    if (S.bub.length \u003c 160) S.bub.push({ x: KX + (rnd() - 0.5) * KRX * 1.3, y: KY + KRY * (0.25 + 0.5 * rnd()), r: 0.4, v: 3 + 4 * rnd() });\n  const cr = ph > 0 && ph \u003c 4 ? -9 : mix(106, BOWL - 4, sm(0.35, 0.92, S.T));\n  for (const b of S.bub) {\n    const yi = cl(floor(b.y), 0, H - 1), inC = b.y \u003c KY - KRY + 1.5;\n    if (inC) (b.x += (CXA[yi] + 0.5 - b.x) * min(1, d * 8)), (b.v = min(32, b.v + 26 * d));\n    else (b.x += (KX - b.x) * d * 0.4 * sm(KY, KY - KRY, b.y) + sin(t * 3 + b.y) * d), (b.v = min(14, b.v + 8 * d));\n    b.y -= b.v * d * (ph === 3 ? 1.8 : 1);\n    b.r = min(inC ? (b.y \u003c BOWL ? 1.2 : CHW[yi] - 0.3) : 2.3, b.r + d * (0.3 + 0.7 * S.T));\n    if (b.y \u003c cr || (S.big > 0 && b.y > S.big && b.y \u003c S.big + 10)) b.dead = 1;\n    else if (b.y \u003c= S.wl + 0.5) {\n      b.dead = 1;\n      if (S.wl \u003c BOWL) {\n        S.pop = min(1.5, S.pop + 0.15 * b.r);\n        if (rnd() \u003c 0.5) puff(S, b.x + (rnd() - 0.5) * 8, S.wl - 2, 1.8, 0.3, -6, 3 + 2 * rnd(), 1, 5);\n      }\n    }\n  }\n  S.bub = S.bub.filter((b) => !b.dead);\n  S.pop *= exp(-3 * d);\n\n  // The jet: slabs of water fly up and spread; past the top they break up.\n  if (ph === 3) {\n    const u = pt / Dj, v = sqrt(2 * G * (64 + 46 * P)) * (1 - 0.25 * sm(0.7, 1, u)) * (1 - 0.6 * sm(0.45, 0.8, P) * exp(-(((u - 0.48) / 0.09) ** 2)));\n    for (S.np += d * v * 0.6; S.np >= 1; S.np--) S.par.push({ x: C + (rnd() - 0.5) * 1.2, y: BRIM - 1 - v * d * rnd(), vy: -v * (0.95 + 0.1 * rnd()), w: (3.5 + 3.5 * P) * (0.85 + 0.3 * rnd()), a: 1, ap: 0 });\n  }\n  for (const q of S.par) {\n    q.vy += G * d;\n    q.y += q.vy * d;\n    q.x += wind(S, q.y) * 0.35 * d;\n    q.w += d * (4.5 + 4.5 * P) * (q.ap ? 2 : 1);\n    if (!q.ap && q.vy > -25) {\n      q.ap = 1;\n      for (let n = 0; n \u003c 2; n++) spray(S, q.x + (rnd() - 0.5) * q.w * 2, q.y, (rnd() - 0.5) * 64, q.vy + (rnd() - 0.6) * 30);\n    }\n    if (rnd() \u003c d * 3) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      spray(S, q.x + sd * q.w, q.y, sd * (8 + 26 * rnd()), q.vy * 0.75);\n    }\n    if (q.ap) q.a -= d * 1.6;\n    if (q.y > BRIM || q.a \u003c= 0) q.dead = 1;\n  }\n  S.par = S.par.filter((q) => !q.dead);\n  // Steam boils off the column while it stands and a little after.\n  if (S.ja \u003c Dj + 0.8 && S.par.length)\n    for (S.ns += d * (40 + 40 * P); S.ns >= 1; S.ns--) {\n      const q = S.par[floor(rnd() * S.par.length)];\n      puff(S, q.x + (rnd() - 0.5) * q.w * 1.8, q.y, 2.5 + q.w * 0.6, 0.55 + 0.25 * rnd(), max(-30, q.vy * 0.3), 10 + 4 * rnd() + 3 * P, 2 + 1.5 * rnd(), 17 + 7 * P);\n    }\n  for (const s of S.spr) {\n    s.vy = min(90, s.vy + G * 0.85 * d);\n    s.vx *= 1 - 0.5 * d;\n    s.x += (s.vx + wind(S, s.y) * 0.5) * d;\n    s.y += s.vy * d;\n    s.life -= d;\n    const x = floor(s.x), y = floor(s.y);\n    if (s.life \u003c 0 || x \u003c 0 || x >= W || y >= H || (y >= 0 && S.kind[y * W + x] && s.vy > 0)) s.dead = 1;\n  }\n  S.spr = S.spr.filter((s) => !s.dead);\n\n  // Gentle steam off the pool, and from small vents out on the field.\n  const wet = S.wl \u003c BOWL - 1;\n  for (S.nv += d * (2 + (wet ? 4 + 5 * S.T : 1) * (1 + P)); S.nv >= 1; S.nv--)\n    if (rnd() \u003c 0.7) puff(S, C + (rnd() - 0.5) * (wet ? 20 : 6), (wet ? S.wl : BOWL) - 1, 1.6 + rnd(), 0.22 + 0.2 * rnd(), -(5 + 3 * rnd()), 4 + 2 * rnd(), 1, 6);\n    else {\n      const v = [[7, 67], [52, 64], [21, 63], [60, 70]][floor(rnd() * 4)];\n      puff(S, v[0] + rnd() - 0.5, v[1], 1.1, 0.3, -(4 + 2 * rnd()), 3.5 + 2 * rnd(), 0.8, 4);\n    }\n  for (const q of S.puffs) {\n    q.age += d;\n    q.vy += (q.rise - q.vy) * 1.2 * d;\n    q.y += q.vy * d;\n    q.x += (wind(S, q.y) + 1.2 * sin(q.age * 1.1 + q.ph)) * d;\n    q.r = min(q.rmax, q.r + q.gr * d);\n  }\n  S.puffs = S.puffs.filter((q) => q.age \u003c q.life && q.y + q.r > -6 && q.x > -26 && q.x \u003c W + 26);\n  S.ox += wind(S, 25) * 0.2 * d;\n  S.oy -= 0.6 * d;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.g, S.P, S.w] = [cl(k[0], 0, 1), cl(k[2], 0, 1), cl(k[3], -1, 1)];\n  if (!S.init) {\n    // Open on a steaming field with the last cloud still high up; the pool holds its phase.\n    for (let n = 0; n \u003c 18; n++) puff(S, -10 + n * 4 + rnd() * 4, 8 + 24 * rnd(), 6 + 4 * rnd(), 0.4 + 0.15 * rnd(), -2, 15 + 4 * rnd(), 0.8, 16), (S.puffs[n].age = 2 + 4 * rnd());\n    for (let n = 0; n \u003c 150; n++) step(S, 1 / 30, 1);\n    S.bub.length = S.pop = S.t = 0;\n    S.init = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === 0 || S.ph === 4)) enter(S, 1);\n  step(S, (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2);\n}\n\n// The view and the cut rock, kept until the light changes.\nfunction backdrop(S) {\n  const L = (S.L = lightAt(S.g)), BG = S.bg, R = S.rock, { amb, top, low } = L;\n  S.key = round(S.g * 60);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, k = S.kind[i];\n    let c;\n    if (k >= 2) c = k === 2 ? [R[o], R[o + 1], R[o + 2]] : [26, 28, 36];\n    else if (k === 1) {\n      // The far wall of the bowl, wet sinter.\n      const v = (0.75 + 0.3 * hash(x, y)) * (0.8 + 0.25 * vn(X * 0.5, Y * 0.9));\n      c = [62 * v, 86 * v, 90 * v];\n    }\n    if (c) c = sc(c, L.rock);\n    else if (S.sky[i]) {\n      const sd = hypot(X - 9, Y - 53), md = hypot(X - 13, Y - 15), v = (Y / HZ) ** 1.3;\n      const sg = L.sun * (0.6 * exp(-sd / 9) + (sd \u003c 1.7 ? 1.1 : 0)), ag = L.ag * exp(-(((Y - 58) / 9) ** 2)) * (1 - X / 80);\n      const mg = L.moon * ((md \u003c 2.4 ? 0.9 : 0) + 0.12 * exp(-md / 5)), st = hash(x, y) \u003c 0.013 && Y \u003c 52 ? L.stars * (90 + 140 * hash(y, x)) : 0;\n      c = top.map((a, n) => mix(a, low[n], v) + sg * [255, 206, 130][n] + ag * [110, 92, 168][n] + mg * [228, 230, 238][n] + st * [0.85, 0.9, 1][n]);\n    } else if (Y \u003c HZ) {\n      // The ice cap; snow and scree on the hill.\n      const sn = vn(x * 0.16, y * 0.3) + 0.35 * vn(x * 0.5, y * 0.8) - 0.01 * (Y - HILL[x]) > 0.55;\n      c = Y \u003c HILL[x] ? [222, 232, 246].map((a, n) => a * amb[n] * 0.92 + low[n] * 0.1) : sc(sn ? sc(SNOW, 0.74 + 0.004 * x) : [64, 60, 62], amb);\n    } else if (Y \u003c HZ + 1.5) c = sc([92, 100, 118], amb);\n    else {\n      // The flat field: snow, and bare warm ground near the springs.\n      const f = (Y - HZ) / (GY - HZ), b = 0.7 * sm(0.6, 0.66, vn((X * 0.1) / (0.35 + f), y * 0.6)) * sm(27, 10, abs(X - C));\n      c = SNOW.map((a, n) => mix(a * (0.8 + 0.2 * f), [112, 92, 70][n], b) * amb[n]);\n    }\n    for (let n = 0; n \u003c 3; n++) BG[o + n] = c[n];\n  }\n}\n\n// Add an elliptical blob to a density field.\nfunction splat(A, cx, cy, rx, ry, a) {\n  const y1 = min(H - 1, cy + ry), x0 = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx);\n  for (let y = max(0, floor(cy - ry)); y \u003c= y1; y++) {\n    const dy = (y + 0.5 - cy) / ry, dd = 1 - dy * dy;\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = (x + 0.5 - cx) / rx, e = dd - dx * dx;\n      if (e > 0) A[y * W + x] += a * e;\n    }\n  }\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], c[n], a);\n}\n\n// Shade a density field over the frame, lit on the side facing the light.\nfunction shade(S, A, k0, lit, dark, tint, jet) {\n  for (let i = 0; i \u003c N; i++) {\n    const v = A[i];\n    if (v \u003c 0.015) continue;\n    const x = i & 63, y = i >> 6, o = i * 3;\n    const tex = jet ? vn(x * 0.5, (y + S.t * 10) * 0.25) : vn(x * 0.18 - S.ox, y * 0.18 - S.oy);\n    const al = min(0.95, 1 - exp(-v * (k0 + 1.6 * tex))), gx = v - A[x > 1 && y > 1 ? i - (jet ? 2 : 2 * W + 2) : i];\n    const sh = cl(0.52 + (jet ? 0.9 : 0.5) * gx + 0.45 * (tex - 0.5), 0.12, 1.02), tt = jet ? sm(BRIM - 16, BRIM, y) * 0.6 : 0;\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], mix(mix(dark[n], lit[n], sh), jet ? tint[n] : 0, tt), al);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  if (S.key !== round(S.g * 60)) backdrop(S);\n  F = S.f;\n  F.set(S.bg);\n  const L = S.L, { t, kind, D, CB, ph, wl, T, P } = S, amb = L.amb, Lw = L.water, Lr = L.rock;\n\n  // Aurora: a green hem, rays rising into violet.\n  if (L.aur > 0.01)\n    for (let k = 0; k \u003c 2; k++)\n      for (let x = 0; x \u003c W; x++) {\n        const yb = 30 + 8 * k + 5 * sin(x * 0.08 + t * 0.22 + k * 2.1) + 8 * (vn(x * 0.07 + t * 0.12, k * 7) - 0.5);\n        const I = L.aur * sm(0.3, 0.75, vn(x * 0.09 - t * 0.1 + k * 3, t * 0.04 + k)) * (0.5 + 0.5 * vn(x * 0.7 + t * 0.5, k * 11 + t * 0.3));\n        if (I \u003c 0.02) continue;\n        for (let y = max(0, floor(yb - 26)); y \u003c= yb; y++) {\n          const i = y * W + x, u = (yb - y) / 26, e = I * (u \u003c 0.08 ? u / 0.08 : exp(-u * 2.2)) * 0.9, v = sm(0.35, 1, u);\n          if (S.sky[i]) (F[i * 3] += mix(40, 96, v) * e), (F[i * 3 + 1] += mix(214, 60, v) * e), (F[i * 3 + 2] += mix(120, 176, v) * e);\n        }\n      }\n\n  // The visitors behind the rope; once the dome rises most hold up a phone.\n  for (const p of S.ppl) {\n    const hy = GY - p.h, jc = sc(p.c, amb);\n    put(p.x, GY - 1, sc([30, 30, 36], amb));\n    for (let y = hy + 1; y \u003c GY - 1; y++) put(p.x, y, jc);\n    put(p.x, hy, p.hat ? jc : sc([226, 186, 160], amb));\n    if (p.up && S.ca > p.dl && S.ca \u003c 6 + p.dl) put(p.x + 1, hy, jc), put(p.x + 1, hy - 1, L.stars > 0.3 ? [180, 210, 255] : [40, 40, 50]);\n  }\n  for (const x of [1, 8, 15, 49, 56, 63]) for (let y = GY - 3; y \u003c GY; y++) put(x, y, sc([70, 56, 40], amb));\n  for (let x = 1; x \u003c 64; x++) if (x \u003c 16 || x > 48) put(x, GY - 3 + (sin(((x - 1) / 7) * Math.PI) > 0.2 ? 1 : 0), sc([214, 184, 64], amb), 0.8);\n\n  // All the steam, summed and shaded.\n  D.fill(0);\n  for (const q of S.puffs) {\n    const a = q.a * sm(0, 0.4, q.age) * (1 - sm(q.life * 0.45, q.life, q.age));\n    if (a > 0.01) splat(D, q.x, q.y, q.r, q.r, a);\n  }\n  shade(S, D, 1.1, L.lit, L.dark);\n\n  // The pool in section, its heave, ripples and dome.\n  const foam = ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1.2, S.pt) : 0;\n  for (let x = 20; x \u003c 44; x++) {\n    const dx = x + 0.5 - C;\n    let top = wl - S.hv * max(0, 1 - (dx / 10) ** 2) + S.pop * sin(x * 1.3 - t * 14) * 0.6 + foam * 1.5 * (hash(x, floor(t * 20)) - 0.5);\n    const dome = S.dh > 0 && abs(dx) \u003c S.bw ? S.dh * (1 - (dx / S.bw) ** 2) ** 0.75 : 0;\n    if (dome) top = min(top, BRIM - dome);\n    for (let y = max(0, floor(top)); y \u003c SURF[x]; y++) {\n      const z = y + 0.5 - top;\n      if (z \u003c 0 || (kind[y * W + x] !== 1 && y >= BRIM)) continue;\n      let c;\n      if (dome && y \u003c BRIM) {\n        const nx = dx / S.bw, ny = (BRIM - y) / (S.dh + 0.1), sp = exp(-((nx + 0.42) ** 2) / 0.03 - (ny - 0.6) ** 2 / 0.08);\n        c = [40, 150, 176].map((v, n) => (mix(v, [110, 226, 230][n], ny * 0.8 + 0.3 * abs(nx)) * (0.85 + 0.25 * vn(x * 0.5, y * 0.5 - t * 6)) + 150 * sp + (z \u003c 1 ? 70 : 0)) * Lw);\n      } else if (z \u003c 1) c = sc([150, 224, 226], Lw);\n      else c = [60, 190, 200].map((v, n) => mix(v, [18, 70, 140][n], sm(0, 10, z)) * Lw * (0.88 + 0.24 * vn(x * 0.45 + t * 0.6, y * 0.7 - t * 0.4)));\n      if (foam && z \u003c 3 && hash(x, y + floor(t * 25)) \u003c 0.6 * foam) c = sc(FOAM, Lw);\n      put(x, y, c);\n    }\n  }\n\n  // The column and its spray.\n  CB.fill(0);\n  for (const q of S.par) splat(CB, q.x, q.y, q.w, 2.8, q.a);\n  if (S.par.length) shade(S, CB, 1.8, L.lit.map((v) => min(240, v * 1.04)), L.dark, [70 * Lw, 200 * Lw, 212 * Lw], 1);\n  for (const s of S.spr) {\n    const a = min(1, s.life * 1.5) * 0.85;\n    put(s.x - s.vx * 0.02, s.y - s.vy * 0.02, L.lit, a * 0.35);\n    put(s.x, s.y, L.lit, a);\n  }\n\n  // Under the ground: the conduit, the chamber and the cracks feeding it.\n  const froth = ph === 3 ? 1 - 0.5 * sm(0.6, 1, S.pt / (1.1 + 1.1 * P)) : ph === 2 ? 0.3 : ph === 1 ? 0.12 : 0;\n  const inflow = ph === 0 ? 1 - sm(4, 6.5, S.pt) * 0.8 : ph === 4 ? sm(1, 3, S.pt) : 0.2;\n  for (const i of S.cav) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = kind[i];\n    let r, g, b;\n    if (k === 4) {\n      const p = inflow * sm(0.55, 1, sin(S.fu[i] * 0.7 - t * 7));\n      (r = 20 + 80 * p), (g = 46 + 130 * p), (b = 104 + 110 * p);\n    } else if (k === 3 && y + 0.5 \u003c wl) {\n      // Drained: wet walls with a film running down.\n      const f = ph === 4 && hash(x, floor(y - t * 26)) \u003c 0.12;\n      (r = f ? 70 : 30), (g = f ? 104 : 33), (b = f ? 124 : 42);\n    } else if (froth && hash(x, floor(y + t * 80)) \u003c froth * (k === 5 ? 0.4 : 0.55)) [r, g, b] = FOAM;\n    else {\n      // Cool water blue, hot water turquoise.\n      const Tl = cl(T * (0.7 + 0.3 * sm(BOWL, KY + KRY, y)) + (k === 5 ? 0.08 : 0), 0, 1), sh = (0.86 + 0.28 * vn(x * 0.6, y * 0.3 + t * 2)) * (k === 3 && y === floor(wl) ? 1.3 : 1);\n      (r = mix(COOL[0], HOT[0], Tl) * sh), (g = mix(COOL[1], HOT[1], Tl) * sh), (b = mix(COOL[2], HOT[2], Tl) * sh);\n    }\n    (F[o] = r * Lr), (F[o + 1] = g * Lr), (F[o + 2] = b * Lr);\n  }\n  for (const { x, y, r } of S.bub)\n    if (r \u003c 0.9) put(x, y, FOAM, 0.85);\n    else\n      for (let v = floor(y - r); v \u003c= y + r; v++)\n        for (let u = floor(x - r); u \u003c= x + r; u++) {\n          const e = hypot(u + 0.5 - x, v + 0.5 - y) / r;\n          if (e \u003c 1) put(u, v, e > 0.6 ? [150, 220, 230] : FOAM, 0.9);\n        }\n  if (S.big > 0)\n    for (let y = floor(S.big); y \u003c S.big + 10; y++) {\n      const cx = CXA[y] + 0.5, hw = CHW[y] * min(1, 0.5 + 0.5 * (y + 1 - S.big)) - 0.3;\n      for (let x = floor(cx - hw); x \u003c cx + hw; x++) put(x, y, abs(x + 0.5 - cx) > hw - 1 ? [160, 236, 240] : [236, 246, 248], 0.97);\n    }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer."},{"name":"Power","min":0,"max":1,"about":"At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows."},{"name":"Wind","min":-1,"max":1,"about":"At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.1931,"detail":0.0478,"edges":0.2475,"complexity":2.0465,"coverage":1,"colour":0.26,"drift":0.0438},"knobResponse":[0.2681,0.0644,0.048,0.0484]},{"slug":"gibbs-phenomenon","title":"Gibbs Phenomenon","family":"wave","round":36,"note":"사각파 한 주기가 가로로 놓이고, 아래로 내려갈수록 푸리에 부분합의 항이 늘어 맨 위 1항에서 맨 아래 32항까지 25줄마다 두 배가 돼요. 합이 파형을 넘어선 곳은 흰 금색으로 타서 점프마다 양옆에 뿔이 서고, 뿔은 아래로 갈수록 점프에 붙지만 높이는 언제나 점프의 8.95% 예요. K3 은 사각파를 톱니파를 거쳐 삼각파로 바꿔 점프와 함께 뿔을 지우고, K1 을 누르면 맨 아래 줄이 256항까지 달리며 그 합의 그래프가 금색 눈금에 닿아요.","idea":"One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.","buttons":"K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.","code":"// ===== Patternflow pattern =====\n// Title:   Gibbs Phenomenon\n// Family:  wave\n// Idea:    One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gibbs phenomenon (Henry Wilbraham, 1848; J. Willard Gibbs, 1899), with Fejér's means (Lipót Fejér, 1900), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1\n//\n// Knob 1: Hue. Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive.\n// Knob 2: Speed. How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows.\n// Knob 3: Shape. Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn.\n// Knob 4: Fejer. Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too.\n// Buttons: K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.\n\nconst W = 64, H = 128, NMAX = 32, RACE = 8;\n// Subsamples per column: four, and 24 in a column within one LED of a jump.\nconst SS = 4, SSJ = 24;\n// How far either side of a point the wave's own range is read, in radians:\n// a sum is past the wave where it leaves [min, max] of the wave over x +- DEL.\nconst DEL = 0.12;\n// The limit of the overshoot: (1/pi) int_0^pi sin t / t dt - 1/2 of the jump.\nconst GIBBS = 0.0894899;\n// The graph the button draws: value v at row GY - GS v.\nconst GY = 24, GS = 16;\nconst { floor, min, max, abs, sin, cos, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The three waves on [0, 2 pi), all between -1 and 1. The square is 1 on\n// (0, pi) and -1 on (pi, 2 pi); the sawtooth rises as x / pi from -1 just past\n// pi to 1 just before it; the triangle peaks at 1 at pi/2.\nconst sq = (x) => (x \u003c PI ? 1 : -1);\nconst saw = (x) => (x \u003c PI ? x / PI : x / PI - 2);\nconst tri = (x) => (x \u003c PI / 2 ? (2 * x) / PI : x \u003c (3 * PI) / 2 ? 2 - (2 * x) / PI : (2 * x) / PI - 4);\n// Their sine coefficients: 4 / (pi k) on odd k; 2 (-1)^(k+1) / (pi k);\n// 8 (-1)^((k-1)/2) / (pi k)^2 on odd k.\nconst bSq = (k) => (k & 1 ? 4 / (PI * k) : 0);\nconst bSaw = (k) => ((k & 1 ? 2 : -2) / (PI * k));\nconst bTri = (k) => (k & 1 ? ((k & 2 ? -8 : 8) / (PI * PI * k * k)) : 0);\n\n// Shape 0..1 as weights on square, sawtooth and triangle.\nfunction weights(s) {\n  return s \u003c 0.5 ? [1 - 2 * s, 2 * s, 0] : [0, 2 - 2 * s, 2 * s - 1];\n}\n\nconst wave = (x, w) => w[0] * sq(x) + w[1] * saw(x) + w[2] * tri(x);\n\n// The wave's range over [x - DEL, x + DEL]: the ends, and both sides of any\n// jump or corner inside.\nconst SPECIAL = [0, PI / 2, PI, (3 * PI) / 2, TAU];\nconst waveAt = (t, w) => wave(t - floor(t / TAU) * TAU, w);\nfunction localRange(x, w, out) {\n  let lo = waveAt(x - DEL, w), hi = lo, v = waveAt(x + DEL, w);\n  if (v \u003c lo) lo = v;\n  if (v > hi) hi = v;\n  for (let n = -1; n \u003c= 1; n++)\n    for (let j = 0; j \u003c SPECIAL.length; j++) {\n      const t = SPECIAL[j] + n * TAU;\n      if (t \u003c= x - DEL || t >= x + DEL) continue;\n      for (const u of [t - 1e-9, t + 1e-9]) {\n        v = waveAt(u, w);\n        if (v \u003c lo) lo = v;\n        if (v > hi) hi = v;\n      }\n    }\n  out[0] = lo;\n  out[1] = hi;\n}\n\nexport function setup(params) {\n  const NS = W * SSJ;\n  params.s = {\n    hue: 0, speed: 2, shape: 0, fejer: 0, phase: 0, race: -1, bo: new Float64Array(RACE * NMAX + 2), bs: new Float64Array(RACE * NMAX + 2),\n    sx: new Float64Array(NS), sl: new Float64Array(NS), sh: new Float64Array(NS),\n    sum: new Float32Array(H), ex: new Float32Array(H), gmin: new Float32Array(W), gmax: new Float32Array(W), rk: new Float64Array(H),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), rr: [0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.shape = cl(k[2], 0, 1);\n  // Up to 0.06 the plain sums, so the opening shows the full 8.95%.\n  S.fejer = (max(0, cl(k[3], 0, 1) - 0.06) / 0.94) ** 2;\n  // At Speed 2 the wave slides 0.4 radians a second.\n  S.phase = (S.phase + d * S.speed * 0.2) % TAU;\n  if (input.btnPressed && input.btnPressed[0] && S.race \u003c 0) S.race = 0;\n  if (S.race >= 0) {\n    S.race += d;\n    if (S.race > 6) S.race = -1;\n  }\n}\n\n// The race: the bottom row's count of terms is multiplied by up to 8, rising\n// over 2.5 seconds, holding for 2 and coming back in 1.5.\nfunction raceFactor(t) {\n  if (t \u003c 0) return 1;\n  const u = t \u003c 2.5 ? t / 2.5 : t \u003c 4.5 ? 1 : max(0, (6 - t) / 1.5);\n  const e = u * u * (3 - 2 * u);\n  return RACE ** e;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, sx, sl, sh, sum, ex, rk, rr } = S;\n  const w = weights(S.shape), lam = S.fejer, nTop = NMAX * raceFactor(S.race);\n  const NN = Math.ceil(nTop);\n  // Row r sums the first n = 32^(r / 127) terms of each series, so the count\n  // doubles every 25 rows, continuous in n: between n and n + 1 the next\n  // term comes in by the fraction. The square and the triangle have only odd\n  // harmonics, so their n-th term is harmonic 2n - 1; the sawtooth's is n.\n  for (let r = 0; r \u003c H; r++) rk[r] = nTop ** (r / (H - 1));\n  const { bo, bs } = S;\n  for (let n = 1; n \u003c= NN; n++) {\n    bo[n] = w[0] * bSq(2 * n - 1) + w[2] * bTri(2 * n - 1);\n    bs[n] = w[1] * bSaw(n);\n  }\n  // The jumps of the wave, where it has any, set where the columns go fine.\n  const jumpAt = [];\n  if (w[0] > 0.001) jumpAt.push(0);\n  if (w[0] + w[1] > 0.001) jumpAt.push(PI);\n  // The overshoot the rulers stand at: the larger jump, the one at pi, is\n  // 2 (w0 + w1) tall, from -(w0 + w1) to w0 + w1.\n  const top = w[0] + w[1], ruler = top * (1 + 2 * GIBBS);\n\n  const cp = [0, 0, 0], cn = [0, 0, 0], gold = [1, 0.85, 0.52];\n  // Round orange and yellow a half is lifted, up to 1.8 times, and paled a\n  // little, so it reads amber or butter and not brown or olive.\n  for (const [h, out] of [[S.hue + 0.56, cp], [S.hue + 0.8, cn]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.1, 0, 1);\n    hsv(h, 0.85 - 0.25 * warm, 1 + 0.8 * warm, out);\n  }\n  const graph = S.race >= 0;\n  for (let col = 0; col \u003c W; col++) {\n    // Wave coordinate of the column's left edge.\n    const x0 = (col / W) * TAU - S.phase;\n    let near = false;\n    for (const j of jumpAt) {\n      const dj = ((((x0 + PI / W - j) % TAU) + TAU + PI) % TAU) - PI;\n      if (abs(dj) \u003c (1.6 * TAU) / W) near = true;\n    }\n    const ns = near ? SSJ : SS;\n    let fbar = 0;\n    for (let i = 0; i \u003c ns; i++) {\n      let x = x0 + ((i + 0.5) / ns) * (TAU / W);\n      x -= floor(x / TAU) * TAU;\n      sx[i] = x;\n      fbar += wave(x, w) / ns;\n      localRange(x, w, rr);\n      sl[i] = rr[0];\n      sh[i] = rr[1];\n    }\n    sum.fill(0);\n    ex.fill(0);\n    let gmin = Infinity, gmax = -Infinity;\n    for (let i = 0; i \u003c ns; i++) {\n      const x = sx[i], c1 = 2 * cos(x), c2 = 2 * cos(2 * x), lo = sl[i], hi = sh[i];\n      // sin(nx) and sin((2n - 1)x) by the Chebyshev recurrence.\n      let a0 = 0, a1 = sin(x), o0 = -sin(x), o1 = sin(x);\n      // Plain sums and Fejer means of the odd series and of the sawtooth.\n      // Fejer averages the partial sums over the harmonic index: S_0..S_K\n      // over K + 1, so the odd series adds its unchanged even-index sum too.\n      let So = 0, To = 0, fo = 0, Ss = 0, Ts = 0, fs = 0, r = 0, last = 0;\n      for (let n = 1; n \u003c= NN && r \u003c H; n++) {\n        const So0 = So, fo0 = fo, Ss0 = Ss, fs0 = fs;\n        To += So;\n        So += bo[n] * o1;\n        To += So;\n        fo = To / (2 * n);\n        Ss += bs[n] * a1;\n        Ts += Ss;\n        fs = Ts / (n + 1);\n        while (r \u003c H && rk[r] \u003c= n + 1e-9) {\n          const q = rk[r] - (n - 1);\n          const plain = So0 + q * (So - So0) + Ss0 + q * (Ss - Ss0), mean = fo0 + q * (fo - fo0) + fs0 + q * (fs - fs0);\n          // Past the wave: above its local top where the sum is positive, below\n          // its local bottom where negative. Falling short is not overshoot.\n          const v = (1 - lam) * plain + lam * mean, e = v > 0 ? v - hi : lo - v;\n          sum[r] += v;\n          if (e > ex[r]) ex[r] = e;\n          if (r === H - 1) last = v;\n          r++;\n        }\n        const a2 = c1 * a1 - a0;\n        a0 = a1;\n        a1 = a2;\n        const o2 = c2 * o1 - o0;\n        o0 = o1;\n        o1 = o2;\n      }\n      // The bottom row's sum, for the graph.\n      if (last \u003c gmin) gmin = last;\n      if (last > gmax) gmax = last;\n    }\n    S.gmin[col] = gmin;\n    S.gmax[col] = gmax;\n    for (let r = 0; r \u003c H; r++) {\n      const v = sum[r] / ns, c = v >= 0 ? cp : cn;\n      // The wave's own halves: 0.1 plus 0.32 times the size of the sum, and\n      // 1.8 times how far the sum is past the wave (outward) or short of it,\n      // so the fringes beside each jump show as light and dark bands.\n      const lv = cl(0.1 + 0.32 * min(1, abs(v)) + 1.8 * (v >= 0 ? v - fbar : fbar - v), 0, 0.8);\n      // Past the wave: white-gold, full from about 80% of the overshoot's\n      // limit, so the horns burn and the ripples of the first rows glow.\n      const g = sm(0.25, 0.85, ex[r] / (2 * GIBBS)), p = r * W + col;\n      R[p] = 255 * (c[0] * lv * (1 - g) + gold[0] * g);\n      G[p] = 255 * (c[1] * lv * (1 - g) + gold[1] * g);\n      B[p] = 255 * (c[2] * lv * (1 - g) + gold[2] * g);\n    }\n  }\n\n  if (graph) {\n    // The bottom row's sum as a graph over the top of the panel, with dim\n    // rulers at the wave's top and bottom and gold ones 8.95% of the jump\n    // past them.\n    const t = S.race, fade = min(1, t / 0.3, (6 - t) / 0.5);\n    const rows = GY + GS * 1.45;\n    for (let r = 0; r \u003c= rows; r++)\n      for (let col = 0; col \u003c W; col++) {\n        const p = r * W + col, k = 1 - 0.8 * fade;\n        R[p] *= k;\n        G[p] *= k;\n        B[p] *= k;\n      }\n    const rule = (v, col3, lv) => {\n      const r = round(GY - GS * v);\n      for (let x = 0; x \u003c W; x += 2) {\n        const p = r * W + x;\n        R[p] += col3[0] * lv * fade;\n        G[p] += col3[1] * lv * fade;\n        B[p] += col3[2] * lv * fade;\n      }\n    };\n    rule(top, [1, 1, 1], 70);\n    rule(-top, [1, 1, 1], 70);\n    rule(ruler, gold, 220);\n    rule(-ruler, gold, 220);\n    for (let col = 0; col \u003c W; col++) {\n      const ra = round(GY - GS * S.gmax[col]), rb = round(GY - GS * S.gmin[col]);\n      for (let r = max(0, ra); r \u003c= min(H - 1, rb); r++) {\n        const p = r * W + col;\n        R[p] = 255 * fade + R[p] * (1 - fade);\n        G[p] = 255 * fade + G[p] * (1 - fade);\n        B[p] = 255 * fade + B[p] * (1 - fade);\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-gibbs-phenomenon","type":"code","name":"gibbs-phenomenon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gibbs Phenomenon\n// Family:  wave\n// Idea:    One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gibbs phenomenon (Henry Wilbraham, 1848; J. Willard Gibbs, 1899), with Fejér's means (Lipót Fejér, 1900), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1\n//\n// Knob 1: Hue. Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive.\n// Knob 2: Speed. How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows.\n// Knob 3: Shape. Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn.\n// Knob 4: Fejer. Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too.\n// Buttons: K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.\n\nconst W = 64, H = 128, NMAX = 32, RACE = 8;\n// Subsamples per column: four, and 24 in a column within one LED of a jump.\nconst SS = 4, SSJ = 24;\n// How far either side of a point the wave's own range is read, in radians:\n// a sum is past the wave where it leaves [min, max] of the wave over x +- DEL.\nconst DEL = 0.12;\n// The limit of the overshoot: (1/pi) int_0^pi sin t / t dt - 1/2 of the jump.\nconst GIBBS = 0.0894899;\n// The graph the button draws: value v at row GY - GS v.\nconst GY = 24, GS = 16;\nconst { floor, min, max, abs, sin, cos, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The three waves on [0, 2 pi), all between -1 and 1. The square is 1 on\n// (0, pi) and -1 on (pi, 2 pi); the sawtooth rises as x / pi from -1 just past\n// pi to 1 just before it; the triangle peaks at 1 at pi/2.\nconst sq = (x) => (x \u003c PI ? 1 : -1);\nconst saw = (x) => (x \u003c PI ? x / PI : x / PI - 2);\nconst tri = (x) => (x \u003c PI / 2 ? (2 * x) / PI : x \u003c (3 * PI) / 2 ? 2 - (2 * x) / PI : (2 * x) / PI - 4);\n// Their sine coefficients: 4 / (pi k) on odd k; 2 (-1)^(k+1) / (pi k);\n// 8 (-1)^((k-1)/2) / (pi k)^2 on odd k.\nconst bSq = (k) => (k & 1 ? 4 / (PI * k) : 0);\nconst bSaw = (k) => ((k & 1 ? 2 : -2) / (PI * k));\nconst bTri = (k) => (k & 1 ? ((k & 2 ? -8 : 8) / (PI * PI * k * k)) : 0);\n\n// Shape 0..1 as weights on square, sawtooth and triangle.\nfunction weights(s) {\n  return s \u003c 0.5 ? [1 - 2 * s, 2 * s, 0] : [0, 2 - 2 * s, 2 * s - 1];\n}\n\nconst wave = (x, w) => w[0] * sq(x) + w[1] * saw(x) + w[2] * tri(x);\n\n// The wave's range over [x - DEL, x + DEL]: the ends, and both sides of any\n// jump or corner inside.\nconst SPECIAL = [0, PI / 2, PI, (3 * PI) / 2, TAU];\nconst waveAt = (t, w) => wave(t - floor(t / TAU) * TAU, w);\nfunction localRange(x, w, out) {\n  let lo = waveAt(x - DEL, w), hi = lo, v = waveAt(x + DEL, w);\n  if (v \u003c lo) lo = v;\n  if (v > hi) hi = v;\n  for (let n = -1; n \u003c= 1; n++)\n    for (let j = 0; j \u003c SPECIAL.length; j++) {\n      const t = SPECIAL[j] + n * TAU;\n      if (t \u003c= x - DEL || t >= x + DEL) continue;\n      for (const u of [t - 1e-9, t + 1e-9]) {\n        v = waveAt(u, w);\n        if (v \u003c lo) lo = v;\n        if (v > hi) hi = v;\n      }\n    }\n  out[0] = lo;\n  out[1] = hi;\n}\n\nexport function setup(params) {\n  const NS = W * SSJ;\n  params.s = {\n    hue: 0, speed: 2, shape: 0, fejer: 0, phase: 0, race: -1, bo: new Float64Array(RACE * NMAX + 2), bs: new Float64Array(RACE * NMAX + 2),\n    sx: new Float64Array(NS), sl: new Float64Array(NS), sh: new Float64Array(NS),\n    sum: new Float32Array(H), ex: new Float32Array(H), gmin: new Float32Array(W), gmax: new Float32Array(W), rk: new Float64Array(H),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), rr: [0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.shape = cl(k[2], 0, 1);\n  // Up to 0.06 the plain sums, so the opening shows the full 8.95%.\n  S.fejer = (max(0, cl(k[3], 0, 1) - 0.06) / 0.94) ** 2;\n  // At Speed 2 the wave slides 0.4 radians a second.\n  S.phase = (S.phase + d * S.speed * 0.2) % TAU;\n  if (input.btnPressed && input.btnPressed[0] && S.race \u003c 0) S.race = 0;\n  if (S.race >= 0) {\n    S.race += d;\n    if (S.race > 6) S.race = -1;\n  }\n}\n\n// The race: the bottom row's count of terms is multiplied by up to 8, rising\n// over 2.5 seconds, holding for 2 and coming back in 1.5.\nfunction raceFactor(t) {\n  if (t \u003c 0) return 1;\n  const u = t \u003c 2.5 ? t / 2.5 : t \u003c 4.5 ? 1 : max(0, (6 - t) / 1.5);\n  const e = u * u * (3 - 2 * u);\n  return RACE ** e;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, sx, sl, sh, sum, ex, rk, rr } = S;\n  const w = weights(S.shape), lam = S.fejer, nTop = NMAX * raceFactor(S.race);\n  const NN = Math.ceil(nTop);\n  // Row r sums the first n = 32^(r / 127) terms of each series, so the count\n  // doubles every 25 rows, continuous in n: between n and n + 1 the next\n  // term comes in by the fraction. The square and the triangle have only odd\n  // harmonics, so their n-th term is harmonic 2n - 1; the sawtooth's is n.\n  for (let r = 0; r \u003c H; r++) rk[r] = nTop ** (r / (H - 1));\n  const { bo, bs } = S;\n  for (let n = 1; n \u003c= NN; n++) {\n    bo[n] = w[0] * bSq(2 * n - 1) + w[2] * bTri(2 * n - 1);\n    bs[n] = w[1] * bSaw(n);\n  }\n  // The jumps of the wave, where it has any, set where the columns go fine.\n  const jumpAt = [];\n  if (w[0] > 0.001) jumpAt.push(0);\n  if (w[0] + w[1] > 0.001) jumpAt.push(PI);\n  // The overshoot the rulers stand at: the larger jump, the one at pi, is\n  // 2 (w0 + w1) tall, from -(w0 + w1) to w0 + w1.\n  const top = w[0] + w[1], ruler = top * (1 + 2 * GIBBS);\n\n  const cp = [0, 0, 0], cn = [0, 0, 0], gold = [1, 0.85, 0.52];\n  // Round orange and yellow a half is lifted, up to 1.8 times, and paled a\n  // little, so it reads amber or butter and not brown or olive.\n  for (const [h, out] of [[S.hue + 0.56, cp], [S.hue + 0.8, cn]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.1, 0, 1);\n    hsv(h, 0.85 - 0.25 * warm, 1 + 0.8 * warm, out);\n  }\n  const graph = S.race >= 0;\n  for (let col = 0; col \u003c W; col++) {\n    // Wave coordinate of the column's left edge.\n    const x0 = (col / W) * TAU - S.phase;\n    let near = false;\n    for (const j of jumpAt) {\n      const dj = ((((x0 + PI / W - j) % TAU) + TAU + PI) % TAU) - PI;\n      if (abs(dj) \u003c (1.6 * TAU) / W) near = true;\n    }\n    const ns = near ? SSJ : SS;\n    let fbar = 0;\n    for (let i = 0; i \u003c ns; i++) {\n      let x = x0 + ((i + 0.5) / ns) * (TAU / W);\n      x -= floor(x / TAU) * TAU;\n      sx[i] = x;\n      fbar += wave(x, w) / ns;\n      localRange(x, w, rr);\n      sl[i] = rr[0];\n      sh[i] = rr[1];\n    }\n    sum.fill(0);\n    ex.fill(0);\n    let gmin = Infinity, gmax = -Infinity;\n    for (let i = 0; i \u003c ns; i++) {\n      const x = sx[i], c1 = 2 * cos(x), c2 = 2 * cos(2 * x), lo = sl[i], hi = sh[i];\n      // sin(nx) and sin((2n - 1)x) by the Chebyshev recurrence.\n      let a0 = 0, a1 = sin(x), o0 = -sin(x), o1 = sin(x);\n      // Plain sums and Fejer means of the odd series and of the sawtooth.\n      // Fejer averages the partial sums over the harmonic index: S_0..S_K\n      // over K + 1, so the odd series adds its unchanged even-index sum too.\n      let So = 0, To = 0, fo = 0, Ss = 0, Ts = 0, fs = 0, r = 0, last = 0;\n      for (let n = 1; n \u003c= NN && r \u003c H; n++) {\n        const So0 = So, fo0 = fo, Ss0 = Ss, fs0 = fs;\n        To += So;\n        So += bo[n] * o1;\n        To += So;\n        fo = To / (2 * n);\n        Ss += bs[n] * a1;\n        Ts += Ss;\n        fs = Ts / (n + 1);\n        while (r \u003c H && rk[r] \u003c= n + 1e-9) {\n          const q = rk[r] - (n - 1);\n          const plain = So0 + q * (So - So0) + Ss0 + q * (Ss - Ss0), mean = fo0 + q * (fo - fo0) + fs0 + q * (fs - fs0);\n          // Past the wave: above its local top where the sum is positive, below\n          // its local bottom where negative. Falling short is not overshoot.\n          const v = (1 - lam) * plain + lam * mean, e = v > 0 ? v - hi : lo - v;\n          sum[r] += v;\n          if (e > ex[r]) ex[r] = e;\n          if (r === H - 1) last = v;\n          r++;\n        }\n        const a2 = c1 * a1 - a0;\n        a0 = a1;\n        a1 = a2;\n        const o2 = c2 * o1 - o0;\n        o0 = o1;\n        o1 = o2;\n      }\n      // The bottom row's sum, for the graph.\n      if (last \u003c gmin) gmin = last;\n      if (last > gmax) gmax = last;\n    }\n    S.gmin[col] = gmin;\n    S.gmax[col] = gmax;\n    for (let r = 0; r \u003c H; r++) {\n      const v = sum[r] / ns, c = v >= 0 ? cp : cn;\n      // The wave's own halves: 0.1 plus 0.32 times the size of the sum, and\n      // 1.8 times how far the sum is past the wave (outward) or short of it,\n      // so the fringes beside each jump show as light and dark bands.\n      const lv = cl(0.1 + 0.32 * min(1, abs(v)) + 1.8 * (v >= 0 ? v - fbar : fbar - v), 0, 0.8);\n      // Past the wave: white-gold, full from about 80% of the overshoot's\n      // limit, so the horns burn and the ripples of the first rows glow.\n      const g = sm(0.25, 0.85, ex[r] / (2 * GIBBS)), p = r * W + col;\n      R[p] = 255 * (c[0] * lv * (1 - g) + gold[0] * g);\n      G[p] = 255 * (c[1] * lv * (1 - g) + gold[1] * g);\n      B[p] = 255 * (c[2] * lv * (1 - g) + gold[2] * g);\n    }\n  }\n\n  if (graph) {\n    // The bottom row's sum as a graph over the top of the panel, with dim\n    // rulers at the wave's top and bottom and gold ones 8.95% of the jump\n    // past them.\n    const t = S.race, fade = min(1, t / 0.3, (6 - t) / 0.5);\n    const rows = GY + GS * 1.45;\n    for (let r = 0; r \u003c= rows; r++)\n      for (let col = 0; col \u003c W; col++) {\n        const p = r * W + col, k = 1 - 0.8 * fade;\n        R[p] *= k;\n        G[p] *= k;\n        B[p] *= k;\n      }\n    const rule = (v, col3, lv) => {\n      const r = round(GY - GS * v);\n      for (let x = 0; x \u003c W; x += 2) {\n        const p = r * W + x;\n        R[p] += col3[0] * lv * fade;\n        G[p] += col3[1] * lv * fade;\n        B[p] += col3[2] * lv * fade;\n      }\n    };\n    rule(top, [1, 1, 1], 70);\n    rule(-top, [1, 1, 1], 70);\n    rule(ruler, gold, 220);\n    rule(-ruler, gold, 220);\n    for (let col = 0; col \u003c W; col++) {\n      const ra = round(GY - GS * S.gmax[col]), rb = round(GY - GS * S.gmin[col]);\n      for (let r = max(0, ra); r \u003c= min(H - 1, rb); r++) {\n        const p = r * W + col;\n        R[p] = 255 * fade + R[p] * (1 - fade);\n        G[p] = 255 * fade + G[p] * (1 - fade);\n        B[p] = 255 * fade + B[p] * (1 - fade);\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows."},{"name":"Shape","min":0,"max":1,"about":"Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn."},{"name":"Fejer","min":0,"max":1,"about":"Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too."}],"start":[0,2,0,0.06],"measures":{"motion":0.5169,"detail":0.0632,"edges":0.2237,"complexity":1.7176,"coverage":0.871,"colour":0.3287,"drift":0.2332},"knobResponse":[0.1974,0.2792,0.2184,0.2064]},{"slug":"gilbreath-table","title":"Gilbreath Table","family":"number","round":32,"note":"맨 윗줄은 소수 2, 3, 5, 7, …이고, 그 아래 줄마다 윗줄 이웃끼리 뺀 차의 절댓값이 내려와요. 소수 간격이 분홍과 흰빛으로 남은 위 열 줄은 붙박혀 있고, 그 아래는 0 과 2 가 만드는 삼각형 무늬로 표를 따라 내려가요. 왼쪽 끝 금빛 1 의 열은 1만 줄 아래에서도 끊기지 않아요.","idea":"The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.","buttons":"K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.","code":"// ===== Patternflow pattern =====\n// Title:   Gilbreath Table\n// Family:  number\n// Idea:    The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbreath's conjecture (Norman Gilbreath, 1958; first noted by François Proth, 1878), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white.\n// Knob 2: Speed. At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times.\n// Knob 3: Depth. Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2.\n// Knob 4: Zoom. LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells.\n// Buttons: K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.\n\nconst W = 64, H = 128, LIM = 200000, K0 = 96, RW = 128, LOOK = 16, DMAX = 10000, PRIME = 255;\nconst { floor, log, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The same, lifted and paled around orange and yellow, which go brown or\n// olive on the panel when they are dim.\nfunction hsvL(h, s, v, out, o) {\n  const a = h - floor(h), u = cl(1 - Math.abs(a - 0.12) / 0.11, 0, 1);\n  hsv(h, s * (1 - 0.25 * u), min(1, v * (1 + 0.45 * u)), out, o);\n}\n\n// Row 0: the 17984 primes below 200000, by a sieve.\nfunction primes() {\n  const comp = new Uint8Array(LIM + 1), out = [];\n  for (let i = 2; i \u003c= LIM; i++) {\n    if (comp[i]) continue;\n    out.push(i);\n    for (let j = i * i; j \u003c= LIM; j += i) comp[j] = 1;\n  }\n  return Int32Array.from(out);\n}\n\n// One row down: each cell becomes |next - this|, and the row loses a cell.\nfunction step(P) {\n  const a = P.work, n = --P.len;\n  for (let i = 0; i \u003c n; i++) {\n    const d = a[i + 1] - a[i];\n    a[i] = d \u003c 0 ? -d : d;\n  }\n  P.k++;\n}\n\n// Put the working row at row k >= 1. Down to row K0 by plain steps. By row\n// K0 every cell but the first is 0 or 2 (setup checks), so |a - b| is a XOR,\n// and by Lucas's theorem 2^s rows down cell n is cell n XOR cell n + 2^s: a\n// jump of thousands of rows is one pass a bit. The first cell stays\n// |cell 1 - 1| = 1 at each of those rows, which is the conjecture holding.\nfunction seek(P, k) {\n  if (k \u003c= K0) {\n    const g = P.work, p = P.pr;\n    for (let i = 0; i \u003c P.N - 1; i++) g[i] = p[i + 1] - p[i];\n    P.len = P.N - 1;\n    P.k = 1;\n    while (P.k \u003c k) step(P);\n    return;\n  }\n  P.work.set(P.base);\n  P.len = P.N - K0;\n  const m = k - K0;\n  for (let s = 14; s >= 0; s--) {\n    const j = 1 \u003c\u003c s;\n    if (!(m & j)) continue;\n    const a = P.work, n = P.len - j;\n    for (let i = 1; i \u003c n; i++) a[i] ^= a[i + j];\n    P.len = n;\n  }\n  P.k = k;\n}\n\n// Copy a row into a table at slot o, with a number for each cell: for a 0,\n// how many cells there are to the end of its run of 0s, which is how many\n// more rows it stays 0, since a run of 0s loses its last cell every row\n// down; for a 2, the length of its run of 2s. A run of 2s is the lid of a\n// triangle of 0s one shorter, so a long run is the top of a big triangle.\nfunction keep(src, ring, run, o) {\n  ring.set(src.subarray(0, RW), o);\n  for (let i = RW - 1, d = LOOK; i >= 0; i--) {\n    d = ring[o + i] === 0 ? min(LOOK, d + 1) : 0;\n    run[o + i] = d;\n  }\n  for (let i = 0; i \u003c RW; ) {\n    if (ring[o + i] !== 2) {\n      i++;\n      continue;\n    }\n    let j = i;\n    while (j \u003c RW && ring[o + j] === 2) j++;\n    run.fill(min(LOOK, j - i), o + i, o + j);\n    i = j;\n  }\n}\n\nconst keepBody = (P) => keep(P.work, P.ring, P.run, (P.k % H) * RW);\n\nfunction fill(P, r) {\n  r = cl(floor(r), 1, P.N - RW - H - 2);\n  P.top = r;\n  seek(P, r);\n  keepBody(P);\n  while (P.k \u003c r + H - 1) {\n    step(P);\n    keepBody(P);\n  }\n}\n\nexport function setup(params) {\n  const pr = primes(), N = pr.length;\n  const P = {\n    pr, N, work: new Uint8Array(N), base: null, len: 0, k: 0, top: 0, pos: 0, start: 0, pin: 11,\n    ring: new Uint8Array(H * RW), run: new Uint8Array(H * RW),\n    head: new Uint8Array((K0 + 1) * RW), hrun: new Uint8Array((K0 + 1) * RW),\n    hue: NaN, speed: 2, cell: -1, depth: -1, front: -1, rows: H,\n    lut: new Float32Array(256 * 3), zlut: new Float32Array((LOOK + 1) * 3), tlut: new Float32Array((LOOK + 1) * 3),\n  };\n  // The first K0 + 1 rows, kept for the pinned top; row 0 is drawn as primes.\n  P.head.fill(PRIME, 0, RW);\n  seek(P, 1);\n  for (;;) {\n    keep(P.work, P.head, P.hrun, P.k * RW);\n    if (P.k === K0) break;\n    step(P);\n  }\n  for (let i = 1; i \u003c P.len; i++) if (P.work[i] > 2) throw new Error(\"row \" + K0 + \" still holds \" + P.work[i]);\n  P.base = P.work.slice();\n  params.s = P;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  const cell = round(2 ** (cl(k[3], -1, 1) + 1)), depth = cl(k[2], 0, 1);\n  let refill = false;\n  if (cell !== P.cell) {\n    // Pin every row down to the last one that still holds a value above 2\n    // in the columns on show: 0 to 10 for 64 columns, 0 to 4 for 16.\n    P.cell = cell;\n    const cols = Math.ceil(W / cell);\n    let last = 1;\n    for (let r = 1; r \u003c= K0; r++)\n      for (let n = 1; n \u003c cols; n++) if (P.head[r * RW + n] > 2) last = r;\n    P.pin = last + 1;\n    P.rows = P.pin + Math.ceil((H - P.pin * cell - 1) / cell);\n    refill = true;\n  }\n  if (depth !== P.depth) (P.depth = depth), (refill = true);\n  if (refill || (input.btnPressed && input.btnPressed[0])) {\n    P.start = P.pin + floor(DMAX * P.depth * P.depth * P.depth);\n    P.pos = P.start;\n    fill(P, P.pos);\n    P.front = P.front \u003c 0 ? 0 : min(P.front, P.pin);\n  }\n  // The front works out 12 rows a second at Speed 1 until it reaches the\n  // bottom; from then on the lower part goes down the table 1.5 a second.\n  if (P.front \u003c P.rows) P.front += d * P.speed * 12;\n  else {\n    P.front = P.rows + 1;\n    P.pos += d * P.speed * 1.5;\n  }\n  // At the far end of the computed table the lower part starts over at Depth.\n  if (P.pos > P.N - RW - H - 2) (P.pos = P.start), fill(P, P.pos);\n  while (P.top \u003c floor(P.pos)) {\n    P.top++;\n    step(P);\n    keepBody(P);\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    const h = k[0], lut = P.lut, zl = P.zlut, tl = P.tlut;\n    hsv(h + 0.12, 0.8, 1, lut, 3);\n    for (let v = 3; v \u003c 256; v++) {\n      // 4 pink, 6 coral, then warmer and whiter up to the widest gaps.\n      const u = cl((log(v) - log(4)) / (log(40) - log(4)), 0, 1);\n      hsv(h + 0.9 + 0.1 * u, 0.7 * (1 - u) + 0.08, 0.84 + 0.16 * u, lut, v * 3);\n    }\n    hsv(h + 0.1, 0.06, 1, lut, PRIME * 3);\n    for (let z = 0; z \u003c= LOOK; z++) {\n      // A 0 is brighter near the slanted side of its triangle and deeper\n      // inside; a 2 is brighter the longer its run, so big triangles have a\n      // bright lid.\n      const u = cl((z - 1) / 7, 0, 1), w = cl((z - 1) / 6, 0, 1);\n      hsvL(h + 0.62 + 0.08 * u, 0.8, 0.32 - 0.18 * u, zl, z * 3);\n      hsvL(h + 0.5 - 0.04 * w, 0.8 - 0.3 * w, 0.54 + 0.4 * w, tl, z * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.depth \u003c 0) return;\n  const lut = P.lut, zl = P.zlut, tl = P.tlut, c = P.cell, split = P.pin * c, f = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    // The pinned rows, one dark LED row with the column of 1s going through\n    // it, then the moving part. Rows past the front are not worked out yet;\n    // the newest ones glow.\n    let r, z, o, j;\n    if (y \u003c split) (j = floor(y / c)), (r = P.head), (z = P.hrun), (o = j * RW);\n    else if (y === split) {\n      for (let x = 0; x \u003c W; x++) {\n        const g = x \u003c (c > 2 ? c - 1 : c) && f > P.pin ? 0.8 : 0;\n        display.setPixel(x, y, lut[3] * g, lut[4] * g, lut[5] * g);\n      }\n      continue;\n    } else {\n      const b = floor((y - split - 1) / c);\n      (j = P.pin + b), (r = P.ring), (z = P.run), (o = ((P.top + b) % H) * RW);\n    }\n    if (j >= f) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const glow = 0.75 * Math.exp(-(f - j) / 2.5);\n    const edgeY = c > 2 && (y \u003c split ? y % c : (y - split - 1) % c) === c - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const n = floor(x / c), v = r[o + n];\n      let R, G, B;\n      if (v === 0 || v === 2) {\n        const q = z[o + n] * 3, t = v ? tl : zl;\n        (R = t[q]), (G = t[q + 1]), (B = t[q + 2]);\n      } else {\n        const q = v * 3;\n        (R = lut[q]), (G = lut[q + 1]), (B = lut[q + 2]);\n      }\n      if (glow > 0.01) (R += (255 - R) * glow), (G += (255 - G) * glow), (B += (255 - B) * glow);\n      if (edgeY || (c > 2 && x % c === c - 1)) (R *= 0.45), (G *= 0.45), (B *= 0.45);\n      display.setPixel(x, y, R, G, B);\n    }\n  }\n}\n","layer":{"id":"layer-gilbreath-table","type":"code","name":"gilbreath-table","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gilbreath Table\n// Family:  number\n// Idea:    The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbreath's conjecture (Norman Gilbreath, 1958; first noted by François Proth, 1878), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white.\n// Knob 2: Speed. At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times.\n// Knob 3: Depth. Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2.\n// Knob 4: Zoom. LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells.\n// Buttons: K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.\n\nconst W = 64, H = 128, LIM = 200000, K0 = 96, RW = 128, LOOK = 16, DMAX = 10000, PRIME = 255;\nconst { floor, log, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The same, lifted and paled around orange and yellow, which go brown or\n// olive on the panel when they are dim.\nfunction hsvL(h, s, v, out, o) {\n  const a = h - floor(h), u = cl(1 - Math.abs(a - 0.12) / 0.11, 0, 1);\n  hsv(h, s * (1 - 0.25 * u), min(1, v * (1 + 0.45 * u)), out, o);\n}\n\n// Row 0: the 17984 primes below 200000, by a sieve.\nfunction primes() {\n  const comp = new Uint8Array(LIM + 1), out = [];\n  for (let i = 2; i \u003c= LIM; i++) {\n    if (comp[i]) continue;\n    out.push(i);\n    for (let j = i * i; j \u003c= LIM; j += i) comp[j] = 1;\n  }\n  return Int32Array.from(out);\n}\n\n// One row down: each cell becomes |next - this|, and the row loses a cell.\nfunction step(P) {\n  const a = P.work, n = --P.len;\n  for (let i = 0; i \u003c n; i++) {\n    const d = a[i + 1] - a[i];\n    a[i] = d \u003c 0 ? -d : d;\n  }\n  P.k++;\n}\n\n// Put the working row at row k >= 1. Down to row K0 by plain steps. By row\n// K0 every cell but the first is 0 or 2 (setup checks), so |a - b| is a XOR,\n// and by Lucas's theorem 2^s rows down cell n is cell n XOR cell n + 2^s: a\n// jump of thousands of rows is one pass a bit. The first cell stays\n// |cell 1 - 1| = 1 at each of those rows, which is the conjecture holding.\nfunction seek(P, k) {\n  if (k \u003c= K0) {\n    const g = P.work, p = P.pr;\n    for (let i = 0; i \u003c P.N - 1; i++) g[i] = p[i + 1] - p[i];\n    P.len = P.N - 1;\n    P.k = 1;\n    while (P.k \u003c k) step(P);\n    return;\n  }\n  P.work.set(P.base);\n  P.len = P.N - K0;\n  const m = k - K0;\n  for (let s = 14; s >= 0; s--) {\n    const j = 1 \u003c\u003c s;\n    if (!(m & j)) continue;\n    const a = P.work, n = P.len - j;\n    for (let i = 1; i \u003c n; i++) a[i] ^= a[i + j];\n    P.len = n;\n  }\n  P.k = k;\n}\n\n// Copy a row into a table at slot o, with a number for each cell: for a 0,\n// how many cells there are to the end of its run of 0s, which is how many\n// more rows it stays 0, since a run of 0s loses its last cell every row\n// down; for a 2, the length of its run of 2s. A run of 2s is the lid of a\n// triangle of 0s one shorter, so a long run is the top of a big triangle.\nfunction keep(src, ring, run, o) {\n  ring.set(src.subarray(0, RW), o);\n  for (let i = RW - 1, d = LOOK; i >= 0; i--) {\n    d = ring[o + i] === 0 ? min(LOOK, d + 1) : 0;\n    run[o + i] = d;\n  }\n  for (let i = 0; i \u003c RW; ) {\n    if (ring[o + i] !== 2) {\n      i++;\n      continue;\n    }\n    let j = i;\n    while (j \u003c RW && ring[o + j] === 2) j++;\n    run.fill(min(LOOK, j - i), o + i, o + j);\n    i = j;\n  }\n}\n\nconst keepBody = (P) => keep(P.work, P.ring, P.run, (P.k % H) * RW);\n\nfunction fill(P, r) {\n  r = cl(floor(r), 1, P.N - RW - H - 2);\n  P.top = r;\n  seek(P, r);\n  keepBody(P);\n  while (P.k \u003c r + H - 1) {\n    step(P);\n    keepBody(P);\n  }\n}\n\nexport function setup(params) {\n  const pr = primes(), N = pr.length;\n  const P = {\n    pr, N, work: new Uint8Array(N), base: null, len: 0, k: 0, top: 0, pos: 0, start: 0, pin: 11,\n    ring: new Uint8Array(H * RW), run: new Uint8Array(H * RW),\n    head: new Uint8Array((K0 + 1) * RW), hrun: new Uint8Array((K0 + 1) * RW),\n    hue: NaN, speed: 2, cell: -1, depth: -1, front: -1, rows: H,\n    lut: new Float32Array(256 * 3), zlut: new Float32Array((LOOK + 1) * 3), tlut: new Float32Array((LOOK + 1) * 3),\n  };\n  // The first K0 + 1 rows, kept for the pinned top; row 0 is drawn as primes.\n  P.head.fill(PRIME, 0, RW);\n  seek(P, 1);\n  for (;;) {\n    keep(P.work, P.head, P.hrun, P.k * RW);\n    if (P.k === K0) break;\n    step(P);\n  }\n  for (let i = 1; i \u003c P.len; i++) if (P.work[i] > 2) throw new Error(\"row \" + K0 + \" still holds \" + P.work[i]);\n  P.base = P.work.slice();\n  params.s = P;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  const cell = round(2 ** (cl(k[3], -1, 1) + 1)), depth = cl(k[2], 0, 1);\n  let refill = false;\n  if (cell !== P.cell) {\n    // Pin every row down to the last one that still holds a value above 2\n    // in the columns on show: 0 to 10 for 64 columns, 0 to 4 for 16.\n    P.cell = cell;\n    const cols = Math.ceil(W / cell);\n    let last = 1;\n    for (let r = 1; r \u003c= K0; r++)\n      for (let n = 1; n \u003c cols; n++) if (P.head[r * RW + n] > 2) last = r;\n    P.pin = last + 1;\n    P.rows = P.pin + Math.ceil((H - P.pin * cell - 1) / cell);\n    refill = true;\n  }\n  if (depth !== P.depth) (P.depth = depth), (refill = true);\n  if (refill || (input.btnPressed && input.btnPressed[0])) {\n    P.start = P.pin + floor(DMAX * P.depth * P.depth * P.depth);\n    P.pos = P.start;\n    fill(P, P.pos);\n    P.front = P.front \u003c 0 ? 0 : min(P.front, P.pin);\n  }\n  // The front works out 12 rows a second at Speed 1 until it reaches the\n  // bottom; from then on the lower part goes down the table 1.5 a second.\n  if (P.front \u003c P.rows) P.front += d * P.speed * 12;\n  else {\n    P.front = P.rows + 1;\n    P.pos += d * P.speed * 1.5;\n  }\n  // At the far end of the computed table the lower part starts over at Depth.\n  if (P.pos > P.N - RW - H - 2) (P.pos = P.start), fill(P, P.pos);\n  while (P.top \u003c floor(P.pos)) {\n    P.top++;\n    step(P);\n    keepBody(P);\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    const h = k[0], lut = P.lut, zl = P.zlut, tl = P.tlut;\n    hsv(h + 0.12, 0.8, 1, lut, 3);\n    for (let v = 3; v \u003c 256; v++) {\n      // 4 pink, 6 coral, then warmer and whiter up to the widest gaps.\n      const u = cl((log(v) - log(4)) / (log(40) - log(4)), 0, 1);\n      hsv(h + 0.9 + 0.1 * u, 0.7 * (1 - u) + 0.08, 0.84 + 0.16 * u, lut, v * 3);\n    }\n    hsv(h + 0.1, 0.06, 1, lut, PRIME * 3);\n    for (let z = 0; z \u003c= LOOK; z++) {\n      // A 0 is brighter near the slanted side of its triangle and deeper\n      // inside; a 2 is brighter the longer its run, so big triangles have a\n      // bright lid.\n      const u = cl((z - 1) / 7, 0, 1), w = cl((z - 1) / 6, 0, 1);\n      hsvL(h + 0.62 + 0.08 * u, 0.8, 0.32 - 0.18 * u, zl, z * 3);\n      hsvL(h + 0.5 - 0.04 * w, 0.8 - 0.3 * w, 0.54 + 0.4 * w, tl, z * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.depth \u003c 0) return;\n  const lut = P.lut, zl = P.zlut, tl = P.tlut, c = P.cell, split = P.pin * c, f = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    // The pinned rows, one dark LED row with the column of 1s going through\n    // it, then the moving part. Rows past the front are not worked out yet;\n    // the newest ones glow.\n    let r, z, o, j;\n    if (y \u003c split) (j = floor(y / c)), (r = P.head), (z = P.hrun), (o = j * RW);\n    else if (y === split) {\n      for (let x = 0; x \u003c W; x++) {\n        const g = x \u003c (c > 2 ? c - 1 : c) && f > P.pin ? 0.8 : 0;\n        display.setPixel(x, y, lut[3] * g, lut[4] * g, lut[5] * g);\n      }\n      continue;\n    } else {\n      const b = floor((y - split - 1) / c);\n      (j = P.pin + b), (r = P.ring), (z = P.run), (o = ((P.top + b) % H) * RW);\n    }\n    if (j >= f) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const glow = 0.75 * Math.exp(-(f - j) / 2.5);\n    const edgeY = c > 2 && (y \u003c split ? y % c : (y - split - 1) % c) === c - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const n = floor(x / c), v = r[o + n];\n      let R, G, B;\n      if (v === 0 || v === 2) {\n        const q = z[o + n] * 3, t = v ? tl : zl;\n        (R = t[q]), (G = t[q + 1]), (B = t[q + 2]);\n      } else {\n        const q = v * 3;\n        (R = lut[q]), (G = lut[q + 1]), (B = lut[q + 2]);\n      }\n      if (glow > 0.01) (R += (255 - R) * glow), (G += (255 - G) * glow), (B += (255 - B) * glow);\n      if (edgeY || (c > 2 && x % c === c - 1)) (R *= 0.45), (G *= 0.45), (B *= 0.45);\n      display.setPixel(x, y, R, G, B);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times."},{"name":"Depth","min":0,"max":1,"about":"Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2."},{"name":"Zoom","min":-1,"max":1,"about":"LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells."}],"start":[0,2,0,0.06],"measures":{"motion":0.5182,"detail":0.0975,"edges":0.6797,"complexity":0.1987,"coverage":0.9794,"colour":0.3745,"drift":0.1585},"knobResponse":[0.3124,0.3276,0.151,0.2734]},{"slug":"gilded-cream","title":"Gilded Cream","family":"cosmetic","round":35,"note":"금박 조각 여섯 개가 든 아이보리 크림을 옆에서 본 단면이 제빵사의 반죽처럼 두 배로 늘어나 제 위로 접혀요. 접을 때마다 조각이 길게 늘어 금빛 결이 되고, 다섯 번 접으면 서른두 겹의 가는 금선이 반짝임만 남기고 크림에 녹아든 뒤 새 조각이 떨어져요. K3 은 한 번에 세 겹이나 네 겹으로 접게 하고, K1 은 크림을 색상환 한 바퀴로 물들이며 누르면 한 번을 네 배 빠르게 접어요.","idea":"A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.","buttons":"K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Gilded Cream\n// Family:  cosmetic\n// Idea:    A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after the folded baker's map of ergodic theory and gold-leaf cream in white and gold packaging\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1\n//\n// Knob 1: Hue. Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold.\n// Knob 2: Speed. At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower.\n// Knob 3: Fold. How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer.\n// Knob 4: Gold. How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1.\n// Buttons: K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x5bd1e995, 0x27d4eb2d);\n  h = Math.imul(h ^ (h >>> 15), 0x165667b1);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the cream's own soft relief.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 17 + o * 6007) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\n// The cream as it was before any fold, in its own coordinates: u along the\n// slab, 0 to 1 across the panel, and v up through it, 0 at the bottom to 1\n// at the top. A raster of RU x RV holds where the gold is, which flake it\n// belongs to and how each crumpled facet of the leaf is tilted.\nconst RU = 256, RV = 256;\nconst MAXF = 17;\n\nfunction scatter(P) {\n  const { GC, GI, GX, GY } = P;\n  GC.fill(0);\n  GI.fill(-1);\n  const n = 6 + floor(11 * P.gold + 0.5), sf = 1 + 0.5 * P.gold, R = P.round * 977;\n  const vx = new Float32Array(10), vy = new Float32Array(10), va = new Float32Array(11);\n  for (let i = 0; i \u003c n; i++) {\n    const s = R + i * 53;\n    // Half sizes in LEDs: across the slab and up through it.\n    const a = (2.8 + 2.2 * hash(s)) * sf, b = (4 + 3.4 * hash(s + 1)) * sf;\n    const cu = 0.1 + 0.8 * hash(s + 2), cv = 0.08 + 0.84 * hash(s + 3), rot = (hash(s + 4) - 0.5) * 1.2;\n    // A torn flake: 6 to 9 corners at their own distances round the middle.\n    const k = 6 + floor(4 * hash(s + 5));\n    for (let m = 0; m \u003c k; m++) {\n      const an = (2 * PI * (m + 0.35 * (hash(s + 11 + m) - 0.5))) / k, r = 0.6 + 0.45 * hash(s + 23 + m);\n      va[m] = an;\n      vx[m] = r * cos(an);\n      vy[m] = r * sin(an);\n    }\n    va[k] = va[0] + 2 * PI;\n    const cr = cos(rot), sr = sin(rot), ext = max(a, b) * 1.1;\n    const i0 = max(0, floor((cu - ext / W) * RU)), i1 = min(RU - 1, floor((cu + ext / W) * RU));\n    const j0 = max(0, floor((cv - ext / H) * RV)), j1 = min(RV - 1, floor((cv + ext / H) * RV));\n    for (let j = j0; j \u003c= j1; j++)\n      for (let q0 = i0; q0 \u003c= i1; q0++) {\n        const dx = ((q0 + 0.5) / RU - cu) * W, dy = ((j + 0.5) / RV - cv) * H;\n        const lx = dx * cr + dy * sr, ly = -dx * sr + dy * cr, ex = lx / a, ey = ly / b, d = sqrt(ex * ex + ey * ey);\n        let th = Math.atan2(ey, ex);\n        if (th \u003c va[0]) th += 2 * PI;\n        let m = 0;\n        while (m \u003c k - 1 && th > va[m + 1]) m++;\n        // Where the ray from the middle meets the outline between corners m\n        // and m + 1.\n        const m1 = (m + 1) % k, ax = vx[m], ay = vy[m], bx = vx[m1] - ax, by = vy[m1] - ay;\n        const dc = cos(th) * by - sin(th) * bx, re = abs(dc) > 1e-6 ? (ax * by - ay * bx) / dc : 1;\n        const cov = cl((re - d) * min(a, b) * 2, 0, 1);\n        const q = j * RU + q0;\n        if (cov \u003c= GC[q]) continue;\n        GC[q] = cov;\n        GI[q] = i;\n        // Crumple facets about 2.5 LEDs across, each tilted its own way.\n        const fx = floor(lx / 2.5 + 50), fy = floor(ly / 2.5 + 50);\n        GX[q] = hash(s * 31 + fx * 7 + fy * 131) - 0.5;\n        GY[q] = hash(s * 37 + fx * 11 + fy * 173) - 0.5;\n      }\n    P.land[i] = 0.08 + 0.55 * hash(s + 9);\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    c: 0, hue: 0, speed: 2, k3: 2, gold: 0.06, goldBuilt: -1,\n    round: 0, folds: [], fk: 2, p: 0, ph: 0, pt: 0, fast: false,\n    GC: new Float32Array(RU * RV), GI: new Int8Array(RU * RV), GX: new Float32Array(RU * RV), GY: new Float32Array(RU * RV),\n    land: new Float32Array(MAXF),\n    hgt: new Float32Array(N), surf: new Float32Array(N), gcov: new Float32Array(N), gfx: new Float32Array(N), gfy: new Float32Array(N), gfl: new Float32Array(N),\n    hole: new Float32Array(N), lipd: new Float32Array(N), ob: new Float32Array(N), pal: new Float32Array(12), lastHue: NaN,\n  };\n}\n\n// The round, in seconds at Speed 2: the flakes land, then folds one after\n// another with a rest between, then the cream settles smooth.\nconst LAND = 0, FOLD = 1, REST = 2, SETTLE = 3;\nconst LAND_T = 0.7, FOLD_T = 2.0, REST_T = 0.7, SETTLE_T = 1.8;\n// Folds a round: until the leaf has been stretched past twenty times.\nconst foldsFor = (k) => (k === 2 ? 5 : 3);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.k3 = floor(cl(k[2], 2, 4) + 0.5);\n  P.gold = cl(k[3], 0, 1);\n  if (abs(P.gold - P.goldBuilt) > 0.004) (scatter(P), (P.goldBuilt = P.gold));\n  P.c += d;\n  // A tap waits for the next fold if none is under way.\n  if (input.btnPressed && input.btnPressed[0]) P.fast = true;\n  P.pt += P.ph === FOLD && P.fast ? d * 4 : d;\n  if (P.ph === LAND && P.pt >= LAND_T) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === REST && (P.pt >= REST_T || P.fast)) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === FOLD && P.pt >= FOLD_T) {\n    P.folds.push(P.fk);\n    P.pt = 0;\n    P.fast = false;\n    P.ph = P.folds.length >= foldsFor(P.fk) ? SETTLE : REST;\n  } else if (P.ph === SETTLE && P.pt >= SETTLE_T) {\n    // Fresh cream: the folds are forgotten and new flakes fall in.\n    P.round++;\n    P.folds = [];\n    P.ph = LAND;\n    P.pt = 0;\n    scatter(P);\n  }\n  P.p = P.ph === FOLD ? sm(P.pt / FOLD_T) : 0;\n}\n\n// Sub-samples down each LED: the folds pack the layers thinner than an LED.\nconst SUB = 4;\n// The sliding layer's end is rounded like a rolled lip, LIP LEDs deep.\nconst LIP = 4.5;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { GC, GI, GX, GY, hgt, surf, gcov, gfx, gfy, gfl, hole, lipd, ob, pal, folds, land } = P;\n  if (P.lastHue !== P.hue) {\n    // The cream's tint. Round blush, peach, ivory and pistachio it stays\n    // pale and light, where a deeper cream reads beige or khaki beside the\n    // gold.\n    let h = P.hue + 0.11;\n    h -= floor(h);\n    const warm = sm((h + 0.03) / 0.07) * (1 - sm((h - 0.22) / 0.08));\n    hsv(h, 0.27 - 0.13 * warm, 0.93 + 0.03 * warm, pal, 0);\n    // The same cream in its folds' shade: a little deeper, never grey.\n    hsv(h - 0.01, 0.36 - 0.14 * warm, 0.74 + 0.1 * warm, pal, 3);\n    // The cream down in the gap under a layer still sliding over.\n    hsv(h - 0.01, 0.31 - 0.15 * warm, 0.82 + 0.07 * warm, pal, 6);\n    P.lastHue = P.hue;\n  }\n  const c = P.c, L = 1 + (P.fk - 1) * P.p, nF = folds.length, folding = P.ph === FOLD;\n  // Mid-fold the slab's far end stands inside the panel.\n  const open = folding && L - floor(L) > 0.001;\n  // Settling: the layers' relief and the leaf fade away and the cream lies\n  // smooth; then the new flakes land one by one and the relief comes back.\n  const settle = P.ph === SETTLE ? sm(P.pt / (SETTLE_T * 0.8)) : 0;\n  const keep = P.ph === LAND ? sm(P.pt / LAND_T) : 1 - settle;\n  // How deep the groove between layers is for each fold, newest first: the\n  // newest folds show, the older ones knit together.\n  const amp = [];\n  let th = H / L;\n  amp.push(folding ? 2 * min(1.6, 0.1 * th) * sm(P.p * 3) : 0);\n  for (let i = nF - 1; i >= 0; i--) {\n    th /= folds[i];\n    amp.push(2 * min(1.6, 0.1 * th) * 0.62 ** (nF - 1 - i + P.p));\n  }\n  const landT = P.ph === LAND ? P.pt : 99;\n\n  for (let x = 0; x \u003c W; x++) {\n    const ux = (x + 0.5) / W;\n    // Under the lip the top of the layer below swells a little, unevenly.\n    const bul = (2 + 1.3 * sin(ux * 7.5 + 0.6 * c) + 0.7 * sin(ux * 17 - c)) / H;\n    for (let y = 0; y \u003c H; y++) {\n      let g = 0, gx = 0, gy = 0, fl = 0, hh = 0, emp = 0, nS = 0, dl = 99;\n      for (let sI = 0; sI \u003c SUB; sI++) {\n        let u = ux, v = (H - y - (sI + 0.5) / SUB) / H;\n        let rel = 0;\n        // The fold under way: the slab stretched to L times its length and\n        // as much thinner, laid back and forth across the panel from the\n        // bottom up, each layer the other way up from the one below.\n        {\n          let j = floor(v * L), w = v * L - j, s = j + (j & 1 ? 1 - u : u);\n          if (open && j + 1 > L) {\n            const send = L - ((1 - 2 * sqrt(w * (1 - w))) * LIP) / W;\n            let cv = cl((send - s) * W + 0.5, 0, 1);\n            if (cv \u003c 1 && j > 0 && v - j / L \u003c bul) {\n              cv = 1;\n              j -= 1;\n              w = 0.999;\n              s = j + (j & 1 ? 1 - u : u);\n            }\n            emp += (1 - cv) / SUB;\n            if (cv \u003c= 0) {\n              dl = min(dl, (s - send) * W);\n              continue;\n            }\n          }\n          // Each layer is rounded across its thickness, so a groove runs\n          // between it and the next.\n          if (amp[0] > 0) rel += amp[0] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / L;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The folds already made, newest first, back to the cream as it was.\n        for (let i = nF - 1, lv = 1; i >= 0; i--, lv++) {\n          const k = folds[i], j = min(k - 1, floor(v * k)), w = v * k - j, s = j + (j & 1 ? 1 - u : u);\n          rel += amp[lv] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / k;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The cream's own soft relief, drawn out with it, read once an LED.\n        if (nS === 0) hh += 0.55 * SUB * tap(u * 40, v * 64 + 17);\n        hh += rel;\n        nS++;\n        // The leaf.\n        const fu = cl(u * RU - 0.5, 0, RU - 1.001), fv = cl(v * RV - 0.5, 0, RV - 1.001);\n        const i0 = floor(fu), j0 = floor(fv), q = j0 * RU + i0;\n        const c00 = GC[q], c10 = GC[q + 1], c01 = GC[q + RU], c11 = GC[q + RU + 1];\n        if (c00 + c10 + c01 + c11 > 0) {\n          const tx = fu - i0, ty = fv - j0;\n          let cc = c00 + (c10 - c00) * tx + (c01 - c00) * ty + (c00 - c10 - c01 + c11) * tx * ty;\n          const qq = ty \u003c 0.5 ? (tx \u003c 0.5 ? q : q + 1) : tx \u003c 0.5 ? q + RU : q + RU + 1, id = GI[qq];\n          if (id >= 0 && landT \u003c 99) {\n            // A flake that is landing grows in with a flash.\n            const t = (landT - land[id]) / 0.18;\n            cc *= sm(t);\n            fl = max(fl, t > 0 ? exp(-((t - 1) ** 2) * 1.5) : 0);\n          }\n          g += cc;\n          gx += GX[qq] * cc;\n          gy += GY[qq] * cc;\n        }\n      }\n      const p = y * W + x;\n      hgt[p] = nS ? (hh / nS) * keep : 0;\n      gcov[p] = nS ? g / nS : 0;\n      gfx[p] = g > 0 ? gx / g : 0;\n      gfy[p] = g > 0 ? gy / g : 0;\n      gfl[p] = fl;\n      hole[p] = emp;\n      lipd[p] = dl;\n    }\n  }\n  // The gap, softened over a few LEDs: the cream rounds down into it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += hole[y * W + cl(x + d, 0, W - 1)] * (3 - abs(d));\n      surf[y * W + x] = a / 9;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += surf[cl(y + d, 0, H - 1) * W + x] * (3 - abs(d));\n      ob[y * W + x] = a / 9;\n    }\n  for (let p = 0; p \u003c N; p++) surf[p] = hgt[p] * (1 - hole[p]) - 2.6 * ob[p];\n\n  // A small lamp drifts over the cream; the cream answers with a soft satin\n  // sheen and the leaf with a sharp glint off whichever facets face it.\n  const Lx = 32 + 38 * sin(0.29 * c + 0.4), Ly = 64 + 58 * sin(0.21 * c + 1.1), Lz = 55;\n  const Ex = 32, Ey = 64, Ez = 220;\n  const cr = pal[0], cg = pal[1], cb = pal[2], dr = pal[3], dg = pal[4], db = pal[5], pr = pal[6], pg = pal[7], pb = pal[8];\n  // The leaf fades into the cream as it settles.\n  const gk = 1 - settle;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, ow = hole[p];\n      const zx = (surf[y * W + min(W - 1, x + 1)] - surf[y * W + max(0, x - 1)]) / 2;\n      const zy = (surf[min(H - 1, y + 1) * W + x] - surf[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - surf[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      (hx *= hi), (hy *= hi), (hz *= hi);\n      const dif = nx * lx + ny * ly + nz * lz;\n      // The cream: lit against a level surface, its folds a deeper tint and\n      // a little shade where it rounds down into the gap.\n      const sh = cl(1 + 1.1 * (dif - lz) - 0.25 * ob[p], 0, 1.3);\n      const dk = 1 - sm(sh), lift = max(0, sh - 1);\n      let r = cr + (dr - cr) * dk + lift * 0.25, gg = cg + (dg - cg) * dk + lift * 0.25, b = cb + (db - cb) * dk + lift * 0.25;\n      const nh = max(0, nx * hx + ny * hy + nz * hz);\n      const n2 = nh * nh, n4 = n2 * n2, n8 = n4 * n4, n16 = n8 * n8;\n      const sat = 0.1 * n8 * n4 * n2 + 0.12 * n16 * n16 * n16 * n8 * n4;\n      r += sat;\n      gg += sat;\n      b += sat;\n      // The leaf: deep gold turned from the lamp, bright gold towards it,\n      // and a white-gold glint where a facet mirrors it.\n      const gc = gcov[p] * gk;\n      if (gc > 0.002) {\n        const tx = gfx[p] * 0.9, ty = gfy[p] * 0.9;\n        const fnx = nx + tx, fny = ny + ty, fnz = nz, fn = 1 / sqrt(fnx * fnx + fny * fny + fnz * fnz);\n        const fd = max(0, (fnx * lx + fny * ly + fnz * lz) * fn), fh = max(0, (fnx * hx + fny * hy + fnz * hz) * fn);\n        const f2 = fh * fh, f8 = f2 * f2 * f2 * f2, f32 = f8 * f8 * f8 * f8;\n        const lit = 0.5 + 0.62 * fd, gl = 1.3 * f32 * f8 + 0.6 * gfl[p];\n        // A vein thinner than an LED still reads as a line of gold.\n        const a = min(1, gc * (1.25 + 0.3 * nF));\n        r += (0.9 * lit + gl - r) * a;\n        gg += (0.62 * lit + gl * 0.92 - gg) * a;\n        b += (0.16 * lit + gl * 0.7 - b) * a;\n      }\n      // Down in the gap: the cream below in its own shade.\n      if (ow > 0) {\n        // The sliding layer's lip shades the cream just past it.\n        const gs = cl(0.92 + 0.5 * (dif - lz), 0.76, 1.05) * (0.84 + 0.16 * sm(lipd[p] / 9));\n        r += (pr * gs - r) * ow;\n        gg += (pg * gs - gg) * ow;\n        b += (pb * gs - b) * ow;\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-gilded-cream","type":"code","name":"gilded-cream","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gilded Cream\n// Family:  cosmetic\n// Idea:    A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after the folded baker's map of ergodic theory and gold-leaf cream in white and gold packaging\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1\n//\n// Knob 1: Hue. Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold.\n// Knob 2: Speed. At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower.\n// Knob 3: Fold. How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer.\n// Knob 4: Gold. How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1.\n// Buttons: K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x5bd1e995, 0x27d4eb2d);\n  h = Math.imul(h ^ (h >>> 15), 0x165667b1);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the cream's own soft relief.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 17 + o * 6007) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\n// The cream as it was before any fold, in its own coordinates: u along the\n// slab, 0 to 1 across the panel, and v up through it, 0 at the bottom to 1\n// at the top. A raster of RU x RV holds where the gold is, which flake it\n// belongs to and how each crumpled facet of the leaf is tilted.\nconst RU = 256, RV = 256;\nconst MAXF = 17;\n\nfunction scatter(P) {\n  const { GC, GI, GX, GY } = P;\n  GC.fill(0);\n  GI.fill(-1);\n  const n = 6 + floor(11 * P.gold + 0.5), sf = 1 + 0.5 * P.gold, R = P.round * 977;\n  const vx = new Float32Array(10), vy = new Float32Array(10), va = new Float32Array(11);\n  for (let i = 0; i \u003c n; i++) {\n    const s = R + i * 53;\n    // Half sizes in LEDs: across the slab and up through it.\n    const a = (2.8 + 2.2 * hash(s)) * sf, b = (4 + 3.4 * hash(s + 1)) * sf;\n    const cu = 0.1 + 0.8 * hash(s + 2), cv = 0.08 + 0.84 * hash(s + 3), rot = (hash(s + 4) - 0.5) * 1.2;\n    // A torn flake: 6 to 9 corners at their own distances round the middle.\n    const k = 6 + floor(4 * hash(s + 5));\n    for (let m = 0; m \u003c k; m++) {\n      const an = (2 * PI * (m + 0.35 * (hash(s + 11 + m) - 0.5))) / k, r = 0.6 + 0.45 * hash(s + 23 + m);\n      va[m] = an;\n      vx[m] = r * cos(an);\n      vy[m] = r * sin(an);\n    }\n    va[k] = va[0] + 2 * PI;\n    const cr = cos(rot), sr = sin(rot), ext = max(a, b) * 1.1;\n    const i0 = max(0, floor((cu - ext / W) * RU)), i1 = min(RU - 1, floor((cu + ext / W) * RU));\n    const j0 = max(0, floor((cv - ext / H) * RV)), j1 = min(RV - 1, floor((cv + ext / H) * RV));\n    for (let j = j0; j \u003c= j1; j++)\n      for (let q0 = i0; q0 \u003c= i1; q0++) {\n        const dx = ((q0 + 0.5) / RU - cu) * W, dy = ((j + 0.5) / RV - cv) * H;\n        const lx = dx * cr + dy * sr, ly = -dx * sr + dy * cr, ex = lx / a, ey = ly / b, d = sqrt(ex * ex + ey * ey);\n        let th = Math.atan2(ey, ex);\n        if (th \u003c va[0]) th += 2 * PI;\n        let m = 0;\n        while (m \u003c k - 1 && th > va[m + 1]) m++;\n        // Where the ray from the middle meets the outline between corners m\n        // and m + 1.\n        const m1 = (m + 1) % k, ax = vx[m], ay = vy[m], bx = vx[m1] - ax, by = vy[m1] - ay;\n        const dc = cos(th) * by - sin(th) * bx, re = abs(dc) > 1e-6 ? (ax * by - ay * bx) / dc : 1;\n        const cov = cl((re - d) * min(a, b) * 2, 0, 1);\n        const q = j * RU + q0;\n        if (cov \u003c= GC[q]) continue;\n        GC[q] = cov;\n        GI[q] = i;\n        // Crumple facets about 2.5 LEDs across, each tilted its own way.\n        const fx = floor(lx / 2.5 + 50), fy = floor(ly / 2.5 + 50);\n        GX[q] = hash(s * 31 + fx * 7 + fy * 131) - 0.5;\n        GY[q] = hash(s * 37 + fx * 11 + fy * 173) - 0.5;\n      }\n    P.land[i] = 0.08 + 0.55 * hash(s + 9);\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    c: 0, hue: 0, speed: 2, k3: 2, gold: 0.06, goldBuilt: -1,\n    round: 0, folds: [], fk: 2, p: 0, ph: 0, pt: 0, fast: false,\n    GC: new Float32Array(RU * RV), GI: new Int8Array(RU * RV), GX: new Float32Array(RU * RV), GY: new Float32Array(RU * RV),\n    land: new Float32Array(MAXF),\n    hgt: new Float32Array(N), surf: new Float32Array(N), gcov: new Float32Array(N), gfx: new Float32Array(N), gfy: new Float32Array(N), gfl: new Float32Array(N),\n    hole: new Float32Array(N), lipd: new Float32Array(N), ob: new Float32Array(N), pal: new Float32Array(12), lastHue: NaN,\n  };\n}\n\n// The round, in seconds at Speed 2: the flakes land, then folds one after\n// another with a rest between, then the cream settles smooth.\nconst LAND = 0, FOLD = 1, REST = 2, SETTLE = 3;\nconst LAND_T = 0.7, FOLD_T = 2.0, REST_T = 0.7, SETTLE_T = 1.8;\n// Folds a round: until the leaf has been stretched past twenty times.\nconst foldsFor = (k) => (k === 2 ? 5 : 3);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.k3 = floor(cl(k[2], 2, 4) + 0.5);\n  P.gold = cl(k[3], 0, 1);\n  if (abs(P.gold - P.goldBuilt) > 0.004) (scatter(P), (P.goldBuilt = P.gold));\n  P.c += d;\n  // A tap waits for the next fold if none is under way.\n  if (input.btnPressed && input.btnPressed[0]) P.fast = true;\n  P.pt += P.ph === FOLD && P.fast ? d * 4 : d;\n  if (P.ph === LAND && P.pt >= LAND_T) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === REST && (P.pt >= REST_T || P.fast)) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === FOLD && P.pt >= FOLD_T) {\n    P.folds.push(P.fk);\n    P.pt = 0;\n    P.fast = false;\n    P.ph = P.folds.length >= foldsFor(P.fk) ? SETTLE : REST;\n  } else if (P.ph === SETTLE && P.pt >= SETTLE_T) {\n    // Fresh cream: the folds are forgotten and new flakes fall in.\n    P.round++;\n    P.folds = [];\n    P.ph = LAND;\n    P.pt = 0;\n    scatter(P);\n  }\n  P.p = P.ph === FOLD ? sm(P.pt / FOLD_T) : 0;\n}\n\n// Sub-samples down each LED: the folds pack the layers thinner than an LED.\nconst SUB = 4;\n// The sliding layer's end is rounded like a rolled lip, LIP LEDs deep.\nconst LIP = 4.5;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { GC, GI, GX, GY, hgt, surf, gcov, gfx, gfy, gfl, hole, lipd, ob, pal, folds, land } = P;\n  if (P.lastHue !== P.hue) {\n    // The cream's tint. Round blush, peach, ivory and pistachio it stays\n    // pale and light, where a deeper cream reads beige or khaki beside the\n    // gold.\n    let h = P.hue + 0.11;\n    h -= floor(h);\n    const warm = sm((h + 0.03) / 0.07) * (1 - sm((h - 0.22) / 0.08));\n    hsv(h, 0.27 - 0.13 * warm, 0.93 + 0.03 * warm, pal, 0);\n    // The same cream in its folds' shade: a little deeper, never grey.\n    hsv(h - 0.01, 0.36 - 0.14 * warm, 0.74 + 0.1 * warm, pal, 3);\n    // The cream down in the gap under a layer still sliding over.\n    hsv(h - 0.01, 0.31 - 0.15 * warm, 0.82 + 0.07 * warm, pal, 6);\n    P.lastHue = P.hue;\n  }\n  const c = P.c, L = 1 + (P.fk - 1) * P.p, nF = folds.length, folding = P.ph === FOLD;\n  // Mid-fold the slab's far end stands inside the panel.\n  const open = folding && L - floor(L) > 0.001;\n  // Settling: the layers' relief and the leaf fade away and the cream lies\n  // smooth; then the new flakes land one by one and the relief comes back.\n  const settle = P.ph === SETTLE ? sm(P.pt / (SETTLE_T * 0.8)) : 0;\n  const keep = P.ph === LAND ? sm(P.pt / LAND_T) : 1 - settle;\n  // How deep the groove between layers is for each fold, newest first: the\n  // newest folds show, the older ones knit together.\n  const amp = [];\n  let th = H / L;\n  amp.push(folding ? 2 * min(1.6, 0.1 * th) * sm(P.p * 3) : 0);\n  for (let i = nF - 1; i >= 0; i--) {\n    th /= folds[i];\n    amp.push(2 * min(1.6, 0.1 * th) * 0.62 ** (nF - 1 - i + P.p));\n  }\n  const landT = P.ph === LAND ? P.pt : 99;\n\n  for (let x = 0; x \u003c W; x++) {\n    const ux = (x + 0.5) / W;\n    // Under the lip the top of the layer below swells a little, unevenly.\n    const bul = (2 + 1.3 * sin(ux * 7.5 + 0.6 * c) + 0.7 * sin(ux * 17 - c)) / H;\n    for (let y = 0; y \u003c H; y++) {\n      let g = 0, gx = 0, gy = 0, fl = 0, hh = 0, emp = 0, nS = 0, dl = 99;\n      for (let sI = 0; sI \u003c SUB; sI++) {\n        let u = ux, v = (H - y - (sI + 0.5) / SUB) / H;\n        let rel = 0;\n        // The fold under way: the slab stretched to L times its length and\n        // as much thinner, laid back and forth across the panel from the\n        // bottom up, each layer the other way up from the one below.\n        {\n          let j = floor(v * L), w = v * L - j, s = j + (j & 1 ? 1 - u : u);\n          if (open && j + 1 > L) {\n            const send = L - ((1 - 2 * sqrt(w * (1 - w))) * LIP) / W;\n            let cv = cl((send - s) * W + 0.5, 0, 1);\n            if (cv \u003c 1 && j > 0 && v - j / L \u003c bul) {\n              cv = 1;\n              j -= 1;\n              w = 0.999;\n              s = j + (j & 1 ? 1 - u : u);\n            }\n            emp += (1 - cv) / SUB;\n            if (cv \u003c= 0) {\n              dl = min(dl, (s - send) * W);\n              continue;\n            }\n          }\n          // Each layer is rounded across its thickness, so a groove runs\n          // between it and the next.\n          if (amp[0] > 0) rel += amp[0] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / L;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The folds already made, newest first, back to the cream as it was.\n        for (let i = nF - 1, lv = 1; i >= 0; i--, lv++) {\n          const k = folds[i], j = min(k - 1, floor(v * k)), w = v * k - j, s = j + (j & 1 ? 1 - u : u);\n          rel += amp[lv] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / k;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The cream's own soft relief, drawn out with it, read once an LED.\n        if (nS === 0) hh += 0.55 * SUB * tap(u * 40, v * 64 + 17);\n        hh += rel;\n        nS++;\n        // The leaf.\n        const fu = cl(u * RU - 0.5, 0, RU - 1.001), fv = cl(v * RV - 0.5, 0, RV - 1.001);\n        const i0 = floor(fu), j0 = floor(fv), q = j0 * RU + i0;\n        const c00 = GC[q], c10 = GC[q + 1], c01 = GC[q + RU], c11 = GC[q + RU + 1];\n        if (c00 + c10 + c01 + c11 > 0) {\n          const tx = fu - i0, ty = fv - j0;\n          let cc = c00 + (c10 - c00) * tx + (c01 - c00) * ty + (c00 - c10 - c01 + c11) * tx * ty;\n          const qq = ty \u003c 0.5 ? (tx \u003c 0.5 ? q : q + 1) : tx \u003c 0.5 ? q + RU : q + RU + 1, id = GI[qq];\n          if (id >= 0 && landT \u003c 99) {\n            // A flake that is landing grows in with a flash.\n            const t = (landT - land[id]) / 0.18;\n            cc *= sm(t);\n            fl = max(fl, t > 0 ? exp(-((t - 1) ** 2) * 1.5) : 0);\n          }\n          g += cc;\n          gx += GX[qq] * cc;\n          gy += GY[qq] * cc;\n        }\n      }\n      const p = y * W + x;\n      hgt[p] = nS ? (hh / nS) * keep : 0;\n      gcov[p] = nS ? g / nS : 0;\n      gfx[p] = g > 0 ? gx / g : 0;\n      gfy[p] = g > 0 ? gy / g : 0;\n      gfl[p] = fl;\n      hole[p] = emp;\n      lipd[p] = dl;\n    }\n  }\n  // The gap, softened over a few LEDs: the cream rounds down into it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += hole[y * W + cl(x + d, 0, W - 1)] * (3 - abs(d));\n      surf[y * W + x] = a / 9;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += surf[cl(y + d, 0, H - 1) * W + x] * (3 - abs(d));\n      ob[y * W + x] = a / 9;\n    }\n  for (let p = 0; p \u003c N; p++) surf[p] = hgt[p] * (1 - hole[p]) - 2.6 * ob[p];\n\n  // A small lamp drifts over the cream; the cream answers with a soft satin\n  // sheen and the leaf with a sharp glint off whichever facets face it.\n  const Lx = 32 + 38 * sin(0.29 * c + 0.4), Ly = 64 + 58 * sin(0.21 * c + 1.1), Lz = 55;\n  const Ex = 32, Ey = 64, Ez = 220;\n  const cr = pal[0], cg = pal[1], cb = pal[2], dr = pal[3], dg = pal[4], db = pal[5], pr = pal[6], pg = pal[7], pb = pal[8];\n  // The leaf fades into the cream as it settles.\n  const gk = 1 - settle;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, ow = hole[p];\n      const zx = (surf[y * W + min(W - 1, x + 1)] - surf[y * W + max(0, x - 1)]) / 2;\n      const zy = (surf[min(H - 1, y + 1) * W + x] - surf[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - surf[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      (hx *= hi), (hy *= hi), (hz *= hi);\n      const dif = nx * lx + ny * ly + nz * lz;\n      // The cream: lit against a level surface, its folds a deeper tint and\n      // a little shade where it rounds down into the gap.\n      const sh = cl(1 + 1.1 * (dif - lz) - 0.25 * ob[p], 0, 1.3);\n      const dk = 1 - sm(sh), lift = max(0, sh - 1);\n      let r = cr + (dr - cr) * dk + lift * 0.25, gg = cg + (dg - cg) * dk + lift * 0.25, b = cb + (db - cb) * dk + lift * 0.25;\n      const nh = max(0, nx * hx + ny * hy + nz * hz);\n      const n2 = nh * nh, n4 = n2 * n2, n8 = n4 * n4, n16 = n8 * n8;\n      const sat = 0.1 * n8 * n4 * n2 + 0.12 * n16 * n16 * n16 * n8 * n4;\n      r += sat;\n      gg += sat;\n      b += sat;\n      // The leaf: deep gold turned from the lamp, bright gold towards it,\n      // and a white-gold glint where a facet mirrors it.\n      const gc = gcov[p] * gk;\n      if (gc > 0.002) {\n        const tx = gfx[p] * 0.9, ty = gfy[p] * 0.9;\n        const fnx = nx + tx, fny = ny + ty, fnz = nz, fn = 1 / sqrt(fnx * fnx + fny * fny + fnz * fnz);\n        const fd = max(0, (fnx * lx + fny * ly + fnz * lz) * fn), fh = max(0, (fnx * hx + fny * hy + fnz * hz) * fn);\n        const f2 = fh * fh, f8 = f2 * f2 * f2 * f2, f32 = f8 * f8 * f8 * f8;\n        const lit = 0.5 + 0.62 * fd, gl = 1.3 * f32 * f8 + 0.6 * gfl[p];\n        // A vein thinner than an LED still reads as a line of gold.\n        const a = min(1, gc * (1.25 + 0.3 * nF));\n        r += (0.9 * lit + gl - r) * a;\n        gg += (0.62 * lit + gl * 0.92 - gg) * a;\n        b += (0.16 * lit + gl * 0.7 - b) * a;\n      }\n      // Down in the gap: the cream below in its own shade.\n      if (ow > 0) {\n        // The sliding layer's lip shades the cream just past it.\n        const gs = cl(0.92 + 0.5 * (dif - lz), 0.76, 1.05) * (0.84 + 0.16 * sm(lipd[p] / 9));\n        r += (pr * gs - r) * ow;\n        gg += (pg * gs - gg) * ow;\n        b += (pb * gs - b) * ow;\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower."},{"name":"Fold","min":2,"max":4,"about":"How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer."},{"name":"Gold","min":0,"max":1,"about":"How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1."}],"start":[0,2,2,0.06],"measures":{"motion":0.2739,"detail":0.0073,"edges":0.2093,"complexity":0.5765,"coverage":1,"colour":0.1255,"drift":0.0414},"knobResponse":[0.2092,0.0648,0.051,0.0463]},{"slug":"giraffe","title":"Giraffe","family":"mammal","round":23,"note":"우산 아카시아의 납작한 수관 밑에서 그물무늬기린이 보라색 혀로 잔가지를 감아 잎을 훑고, 소등쪼기새가 목을 타고 뛰어다녀요. 가끔 앞다리를 A 자로 벌리고 목을 내려 웅덩이 물을 마시면 물에 동그란 물결이 퍼져요. K3 을 돌리면 무늬가 마사이기린이나 로스차일드기린의 것으로 바뀌고, 끝에는 흰 기린이 서요.","idea":"Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.","buttons":"K1 tap sends the giraffe down to drink now.","code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-giraffe","type":"code","name":"giraffe","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare."},{"name":"Coat","min":0,"max":3,"about":"Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand."},{"name":"Wind","min":0,"max":1,"about":"Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy."}],"start":[0,2,0,0.06],"measures":{"motion":0.123,"detail":0.074,"edges":0.4044,"complexity":1.9181,"coverage":0.9853,"colour":0.3367,"drift":0.0426},"knobResponse":[0.2454,0.0494,0.078,0.0609]},{"slug":"glassblower","title":"Glassblower","family":"glass","round":27,"note":"어두운 스윙 피트 위 발판에서 가퍼가 블로파이프 끝의 유리 덩어리를 진자처럼 흔들면, 덩어리가 아래로 늘어나 긴 화병이 되며 노랑에서 주황을 지나 진홍으로 식어요. 글로리 홀에서 다시 달궈 불고 또 흔든 뒤 잘라 내면 바닥의 컬릿 더미에 떨어져 부서져요. K1 이 코발트나 호박 같은 유리 색을 고르고, 버튼은 다시 달구기와 불기예요.","idea":"A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.","buttons":"K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.","code":"// ===== Patternflow pattern =====\n// Title:   Glassblower\n// Family:  glass\n// Idea:    A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the swing pit of a glass studio, where a gather is stretched long\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1\n//\n// Knob 1: Glass. The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same.\n// Knob 2: Speed. At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower.\n// Knob 3: Length. How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1.\n// Knob 4: Heat. How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter.\n// Buttons: K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.\n\nconst W = 64, H = 128, N = W * H, NN = 40;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, cbrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// Distance to a segment; TT is how far along it.\nlet TT = 0, QX = 0, QY = 0;\nfunction seg(px, py, ex, ey) {\n  TT = cl((px * ex + py * ey) / (ex * ex + ey * ey + 1e-6), 0, 1);\n  (QX = px - TT * ex), (QY = py - TT * ey);\n  return sqrt(QX * QX + QY * QY);\n}\n\n// Black body, 0..1: dark red, red, orange, yellow, near white.\nconst BBK = [0, 0, 0, 0, 0.12, 46, 3, 0, 0.25, 118, 10, 0, 0.38, 196, 34, 0, 0.5, 245, 80, 6, 0.62, 255, 132, 22, 0.75, 255, 180, 62, 0.87, 255, 222, 132, 1, 255, 246, 216];\nconst BB = new Float32Array(513 * 3);\nfor (let q = 0, k = 0; q \u003c= 512; q++) {\n  const T = q / 512;\n  while (k \u003c 28 && T > BBK[k + 4]) k += 4;\n  for (let c = 0; c \u003c 3; c++) BB[q * 3 + c] = mix(BBK[k + 1 + c], BBK[k + 5 + c], (T - BBK[k]) / (BBK[k + 4] - BBK[k]));\n}\nconst bq = (T) => (((T \u003c 0 ? 0 : T > 1 ? 1 : T) * 512 + 0.5) | 0) * 3;\n// Clear, cobalt, amber, green, ruby: colour and body when cold, then what passes of the glow.\nconst GLASS = [\n  [150, 212, 204, 0.3, 1, 0.97, 0.9], [34, 72, 238, 1, 0.3, 0.38, 1], [238, 138, 24, 1, 1, 0.62, 0.2],\n  [40, 208, 88, 1, 0.42, 1, 0.5], [228, 18, 70, 1, 1, 0.18, 0.4],\n];\n// As the glow fades the glass filters it, and the colour comes through.\nconst flt = (T) => 0.95 * (1 - sm(0.45, 0.85, T));\n\n// Deck, floor, the pit's opening, the glory hole (a drum seen end on at a slant), hands and pipe.\nconst DK = 26, FL = 31, PT = 35, OX0 = 19, OX1 = 47;\nconst MX = 49, MY = 15, MRX = 3.6, MRY = 7, FRX = 6.5, FRY = 11;\nconst PIPE = 27, BACK = 8, TH0 = 0.34, HX = 24.5, HY = 19.5, HX2 = 25.5, HY2 = 17.5;\nconst THF = atan2(MX - HX2, MY - HY2);\nconst GATHER = 0, OUT = 1, BLOW = 2, SWING = 3, LIFT = 4, REHEAT = 5, CUT = 6, EMPTY = 7;\nconst DUR = [1.3, 1, 0.8, 5, 0.9, 1.8, 1.4, 0.9];\nconst V0 = 1300, OM = (2 * PI) / 2.3, START = 13.6, FS = new Float32Array(NN), CP = new Float32Array(80);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), piece = () => ({ X: F(NN), Y: F(NN), R: F(NN), B: F(NN), T: F(NN), on: 0, dy: 0, vy: 0 });\n  const S = (params.s = {\n    t: 0, th: THF, rho: 1, sw: 0, be: 0, bv: 0, vx: 0, tx: 0, ty: 0, l: 4, R0: 3, bl: 9, rot: 0, pT: 0, boom: 0, tmax: 0.8, live: 0, k1: -1, gl: [0, 0, 0, 1, 1, 1, 1], pc: piece(), fall: piece(), sp: [], lt: F(84),\n    fa: F(N), se: F(N), ci: new Uint8Array(N), hc: F(256), cx: F(256), cn: F(256), top: F(W),\n    f: F(N * 3), lr: F(N), lg: F(N), lb: F(N), mat: new Uint8Array(N), al: F(N * 3), gm: F(N),\n    gd: F(N).fill(99), gs: F(N), gr: F(N), gu: F(N), gb: F(N), gt: F(N),\n  });\n  maps(S);\n  go(S, GATHER);\n}\n\nfunction maps(S) {\n  const M = S.mat, A = S.al, HG = S.top;\n  for (let x = 0; x \u003c W; x++) HG[x] = 122 - 10 * ((x + 0.5 - 33) / 31) ** 2 + 2 * (vn(x * 0.3, 5) - 0.5);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, gr = 0.85 + 0.3 * hash(x, y);\n    let m = 0, a = 0, c = [1, 0.9, 0.8];\n    if (((px - MX) / MRX) ** 2 + ((py - MY) / MRY) ** 2 \u003c 1) m = 3;\n    else if (((px - MX) / FRX) ** 2 + ((py - MY) / FRY) ** 2 \u003c 1) (m = 2), (a = 0.5 * (0.8 + 0.3 * hash(x, y + 7))), (c = [1, 0.84, 0.7]);\n    else if (x > MX && y \u003c FL && y > MY - FRY - 1) {\n      // The drum with a rim on top and two bands, a dark stand below.\n      m = 1;\n      a = y \u003c MY + FRY ? (y === MY - FRY ? 0.9 : 0.3 * (0.35 + 0.65 * cos(((py - MY) / FRY) * 1.45))) * (x === 56 || x === 61 ? 1.8 : 1) : y === MY + FRY ? 0.7 : 0.12;\n      c = [0.9, 0.93, 1];\n    } else if (y >= FL && y \u003c PT && (x \u003c OX0 || x > OX1)) (m = 4), (a = y === FL ? 0.8 : 0.3 * gr * (0.8 + 0.4 * hash(x >> 1, y))), (c = [1, 0.95, 0.88]);\n    else if ((y >= DK && y \u003c DK + 2 && x \u003c 23) || ((x === 3 || x === 19) && y >= DK && y \u003c FL)) (m = 5), (a = y === DK ? 0.9 : 0.35), (c = [0.9, 0.93, 1]);\n    else if (py >= HG[x]) {\n      // Broken glass: facets on a jittered grid, dark seams between them.\n      m = 7;\n      let d1 = 9, d2 = 9, id = 0, ci = 0;\n      for (let j = 0; j \u003c 9; j++) {\n        const cx = floor(x / 3) + (j % 3) - 1, cy = floor(y / 2.5) + floor(j / 3) - 1, d = (px - (cx + hash(cx, cy)) * 3) ** 2 + (py - (cy + hash(cy, cx + 9)) * 2.5) ** 2;\n        if (d \u003c d1) (d2 = d1), (d1 = d), (id = hash(cx + 31, cy)), (ci = cl((cy - 42) * 24 + cx + 1, 0, 254));\n        else if (d \u003c d2) d2 = d;\n      }\n      (S.ci[i] = ci), (S.cx[ci] += px), S.cn[ci]++;\n      (S.fa[i] = id), (S.se[i] = sm(0.9, 0.2, sqrt(d2) - sqrt(d1)) * 0.7 + (py - HG[x] \u003c 1 ? -0.3 : 0));\n    } else if (y >= FL) {\n      // Firebrick courses, sooted in clouds.\n      m = 6;\n      const r = floor(y / 3), sx = x + (r & 1) * 3;\n      a = y % 3 === 2 || sx % 7 === 6 ? 0.1 : 0.5 * (0.7 + 0.6 * hash(floor(sx / 7), r)) * (0.45 + 0.7 * vn(x * 0.11, y * 0.045)) * gr * (x \u003c 2 || x > 61 ? 0.45 : 1);\n      c = [1, 0.76, 0.58];\n    } else {\n      // Corrugated sheeting behind the shop.\n      a = 0.5 * (0.88 + 0.12 * cos(px * PI * 0.5)) * (x % 16 === 15 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 0.07, y * 0.15));\n      c = [0.95, 0.9, 0.85];\n    }\n    M[i] = m;\n    for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = a * c[j];\n  }\n}\n// Heat left in the heap where hot glass lands, shard by shard.\nfunction heat(S, x, y, T, r) {\n  for (let j = floor(y - r); j \u003c= y + r; j++)\n    for (let i = floor(x - r); i \u003c= x + r; i++) {\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || S.mat[j * W + i] !== 7) continue;\n      const c = S.ci[j * W + i];\n      S.hc[c] = max(S.hc[c], T * sm(r + 0.5, r * 0.3, sqrt((i + 0.5 - x) ** 2 + (j + 0.5 - y) ** 2)));\n    }\n}\n\nfunction go(S, ph) {\n  (S.ph = ph), (S.pt = 0), (S.th1 = S.th);\n  if (ph === GATHER) (S.pc.on = 1), (S.V = 60), (S.b = S.bt = 0), (S.sb = S.sbt = 0.3), (S.pass = 1), S.pc.T.fill(S.tmax);\n  else if (ph === BLOW) blow(S, S.pass > 1 ? 0.1 : 0.4);\n  else if (ph === SWING) S.sw = 0;\n}\nfunction next(S) {\n  const p = S.ph;\n  go(S, p === SWING ? (S.pass > 1 ? CUT : LIFT) : p === REHEAT ? OUT : p === EMPTY ? GATHER : p + 1);\n  if (p === REHEAT) S.pass++;\n}\nfunction blow(S, db) {\n  (S.bt = min(0.74, S.b + db)), (S.sbt = min(0.84, S.pass > 1 ? S.sb + 0.12 : 0.55)), (S.bl = 0);\n}\nconst live = (S) => S.pc.on && (S.ph === BLOW || S.ph === SWING || (S.ph === CUT && S.pt \u003c 0.4));\n\n// Radius from volume and length: a neck, a body narrowing down, a round end.\nfunction shape(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1);\n  let R = max(1, S.R0);\n  for (let it = 0; it \u003c 3; it++) {\n    let sum = 0;\n    for (let i = 0; i \u003c NN; i++) {\n      const s = i / (NN - 1), a = s * l, ct = 1 - min(1, (a + 0.25 * R) / (1.1 * R)), cb = 1 - min(1, (l - a) / (0.62 * R));\n      FS[i] = (1 - 0.38 * s) * sqrt(1 - ct * ct) * sqrt(max(0, 1 - cb * cb));\n      sum += FS[i] * FS[i];\n    }\n    R = max(1, sqrt(S.V / (PI * dl * max(1e-3, sum))));\n  }\n  S.R0 = R;\n  for (let i = 0; i \u003c NN; i++) {\n    const q = (i / (NN - 1) - 0.05) / (S.sb - 0.05), B = q > 0 && q \u003c 1 ? S.b * sqrt(1 - (2 * q - 1) ** 2) : 0;\n    (P.B[i] = B), (P.R[i] = (R * FS[i]) / sqrt(1 - B * B));\n  }\n}\n// Off the pipe along its axis, then hanging and trailing the swing; straight when lifted.\nfunction line(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1), th = S.th, w0 = 0.8 * S.R0 + 1.5;\n  let x = S.tx - sin(th) * 1.2, y = S.ty - cos(th) * 1.2;\n  for (let i = 0; i \u003c NN; i++) {\n    (P.X[i] = x), (P.Y[i] = y);\n    const s = i / (NN - 1), w = exp((-s * l) / w0), a = mix(th * w + (1 - w) * S.be * s ** 0.8, th, S.rho);\n    (x += sin(a) * dl), (y += cos(a) * dl);\n  }\n}\n// Radiative cooling, faster where the glass is thin.\nconst cool = (T, R, d) => T - ((0.22 * (T + 0.1)) / max(2.2, R) ** 0.7) * d;\n\nfunction step(S, d) {\n  (S.t += d), (S.pt += d);\n  const dur = () => (S.ph === SWING ? (S.pass > 1 ? 6.5 : 5) : DUR[S.ph]);\n  if (S.pt >= dur()) next(S);\n  const ph = S.ph, pt = S.pt, D = dur(), u = sm(0, 1, pt / D), P = S.pc, F = S.fall, HG = S.top;\n  let th = S.th, rho = S.rho, inH = 0;\n  S.env = 0;\n  if (ph === GATHER || ph === REHEAT) (th = THF + 0.015 * sin(S.t * 3)), (rho = inH = 1);\n  else if (ph === OUT) (th = mix(S.th1, TH0, u)), (rho = 1 - sm(0.3, 0.9, pt / D)), (inH = 1 - sm(0, 0.25, pt / D));\n  else if (ph === BLOW) (th = TH0 + 0.03 * sin(pt * 4)), (rho = 0);\n  else if (ph === SWING) {\n    S.env = sm(0, 1.4, pt) * (1 - sm(D - 1.1, D, pt));\n    S.sw += d * OM * sqrt(62 / S.L) * (1 - 0.15 * (S.l / S.L));\n    (th = TH0 + S.A * S.env * sin(S.sw)), (rho = 0);\n  } else if (ph === LIFT || ph === EMPTY) (th = mix(S.th1, THF, u)), (rho = sm(0, 0.3, pt / D)), (inH = sm(0.75, 1, pt / D));\n  else {\n    (th = mix(S.th1, TH0, sm(0, 0.4, pt))), (rho = 0);\n    if (P.on && pt >= 0.4) cut(S);\n  }\n  const q = cl((th - TH0) / (THF - TH0), 0, 1);\n  (S.th = th), (S.rho = rho), (S.hx = mix(HX, HX2, q)), (S.hy = mix(HY, HY2, q));\n  const tx = S.hx + PIPE * sin(th), ty = S.hy + PIPE * cos(th), vx = (tx - S.tx) / d, ax = cl((vx - S.vx) / d, -400, 400), Le = max(10, 0.55 * S.l);\n  (S.tx = tx), (S.ty = ty), (S.vx = vx);\n  // The hanging part is a pendulum on a moving pivot.\n  if (rho > 0.5) S.be = S.bv = 0;\n  else (S.bv += ((-190 / Le) * sin(S.be) - 1.3 * S.bv - (ax / Le) * cos(S.be)) * d), (S.be = cl(S.be + S.bv * d, -0.7, 0.7));\n  (S.b += (S.bt - S.b) * min(1, d * 4)), (S.sb += (S.sbt - S.sb) * min(1, d * 4)), (S.bl += d), (S.rot += d * (3 + 5 * inH));\n  if (P.on) {\n    if (ph === GATHER) (S.V = max(60, V0 * (S.L / 62) * sm(0, 1.1, pt))), (S.l = 1.9 * cbrt((3 * S.V) / (4 * PI)));\n    let tm = 0;\n    for (let i = 0; i \u003c NN; i++) tm += P.T[i] / NN;\n    if (rho \u003c 0.5) S.l += 0.42 * sm(0.15, 0.55, tm) * max(0, (S.pass > 1 ? S.L : 0.64 * S.L) - S.l) * (0.3 + 0.7 * S.env) * d;\n    shape(S), line(S);\n    // The glory hole brings it all back up.\n    for (let i = 0; i \u003c NN; i++) {\n      const T = P.T[i] + (S.tmax - P.T[i]) * (1 - exp(-1.9 * d)) * inH;\n      P.T[i] = mix(T, cool(T, P.R[i], d), 1 - inH);\n    }\n    (S.pT = mix(S.pT, P.T[0] * 0.7, min(1, d * 2))), (S.gx = P.X[NN >> 1]), (S.gy = P.Y[NN >> 1]);\n  } else S.pT *= exp(-d * 0.5);\n  if (F.on) {\n    (F.vy += 300 * d), (F.dy += F.vy * d), (S.gx = F.X[NN >> 1]), (S.gy = F.Y[NN >> 1] + F.dy);\n    for (let i = 0; i \u003c NN; i++) F.T[i] = cool(F.T[i], F.R[i], d);\n    // It hits the heap and goes to pieces.\n    const bx = F.X[NN - 1], hy = HG[cl(bx | 0, 0, W - 1)];\n    if (F.Y[NN - 1] + F.dy > hy - 1) {\n      heat(S, bx, hy + 1, F.T[NN - 1] + 0.1, 3.5);\n      for (let i = 0; i \u003c NN * 2; i++) {\n        const j = i >> 1;\n        S.sp.push({ x: F.X[j] + (rnd() - 0.5) * F.R[j], y: F.Y[j] + F.dy, vx: (rnd() - 0.5) * 60, vy: F.vy * (0.5 + 0.4 * rnd()) - 30 * rnd(), l: 9, T: F.T[j] });\n      }\n      (F.on = 0), (S.boom = 1), (S.bx = bx);\n    }\n  }\n  for (let c = 0; c \u003c 255; c++) if (S.hc[c] > 0) S.hc[c] -= 0.03 * (S.hc[c] + 0.08) * d;\n  S.boom = max(0, S.boom - d * 2.5);\n  for (const p of S.sp) {\n    (p.vy += 200 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 1.2);\n    if (p.x \u003c 0.5 || p.x > W - 0.5) (p.vx *= -0.5), (p.x = cl(p.x, 0.5, W - 0.5));\n    // A shard bounces, then settles into the heap and leaves its heat there.\n    if (p.l > 5 && p.y > HG[p.x | 0]) p.vy > 70 ? ((p.vy *= -0.35), (p.vx *= 0.6), (p.y = HG[p.x | 0])) : (heat(S, p.x, p.y + 1, p.T, 1.3 + rnd()), (p.l = 0));\n  }\n  S.sp = S.sp.filter((p) => p.l > 0 && p.y \u003c H + 2);\n}\n\n// The jacks score the neck and the piece drops away into the pit.\nfunction cut(S) {\n  const P = S.pc, F = S.fall;\n  for (const k of \"XYRBT\") F[k].set(P[k]);\n  (F.on = 1), (F.dy = F.vy = P.on = 0), (S.pT = 0.75), (S.l = 4), (S.V = 60);\n  for (let k = 0; k \u003c 14; k++) S.sp.push({ x: S.tx, y: S.ty + 1, vx: (rnd() - 0.5) * 34, vy: -10 - 28 * rnd(), l: 0.6 + 0.4 * rnd(), T: 0.8 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], -1, 1), k4 = cl(k[3], 0, 1);\n  if (k1 !== S.k1) {\n    const u = k1 * 4, i = min(3, floor(u)), f = sm(0.25, 0.75, u - i);\n    for (let c = 0; c \u003c 7; c++) S.gl[c] = mix(GLASS[i][c], GLASS[i + 1][c], f);\n    S.k1 = k1;\n  }\n  (S.L = 62 + 18 * k3), (S.A = 0.29 + 0.15 * k3), (S.hot = 0.84 + 0.16 * k4), (S.tmax = 0.86 + 0.18 * k4), (S.fI = 1 + 0.55 * k4);\n  if (!S.live) {\n    while (!S.live) step(S, 1 / 30), (S.live = S.t >= START ? 1 : 0);\n    // The last piece lies broken in the heap, still red.\n    heat(S, 31 + 6 * rnd(), 125, 0.44, 5);\n    for (let k = 0; k \u003c 7; k++) heat(S, 2 + 60 * rnd(), 112 + 16 * rnd(), 0.18 + 0.14 * rnd(), 1.5 + 2 * rnd());\n  }\n  const bp = input.btnPressed || [];\n  if (bp[0] && live(S)) go(S, LIFT);\n  if (bp[1] && live(S)) blow(S, 0.14);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\n// Lights: the glory hole, seven points along the gather, the heap's embers, the crash.\nfunction lights(S) {\n  const LT = S.lt, M = S.mat, HC = S.hc, GL = S.gl;\n  let n = 0;\n  const add = (x, y, T, w, sg, g = 0) => {\n    const o = n++ * 6, b = bq(T), f = g * flt(T);\n    (LT[o] = x), (LT[o + 1] = y), (LT[o + 5] = 1 / (sg * sg));\n    for (let c = 0; c \u003c 3; c++) LT[o + 2 + c] = (BB[b + c] / 255) * w * (1 - f + f * GL[4 + c]);\n  };\n  add(MX - 2.5, MY + 0.5, S.hot, S.fI * (0.92 + 0.12 * vn(S.t * 4, 3)), 13);\n  for (const P of [S.pc, S.fall]) {\n    if (!P.on) continue;\n    for (let i = 3; i \u003c NN; i += 6) {\n      const x = P.X[i], y = P.Y[i] + P.dy, m = x >= 0 && x \u003c W && y >= 0 && y \u003c H ? M[(y | 0) * W + (x | 0)] : 0;\n      if (y \u003c H + 12) add(x, y, P.T[i], 0.32 * min(2, P.R[i] / 3) * (m === 1 || m === 2 ? 0.15 : 1), 10 + 1.4 * P.R[i], 1);\n    }\n  }\n  for (let h = 0; h \u003c 2; h++) {\n    let w = 0, T = 0, sx = 0;\n    for (let c = 0; c \u003c 255; c++) {\n      const e = (HC[c] - 0.15) * S.cn[c], x = S.cx[c] / S.cn[c];\n      if (e > 0 && x \u003c 32 === !h) (w += e), (sx += e * x), (T = max(T, HC[c]));\n    }\n    if (w > 0) add(sx / w, 118, T, min(3, w * 0.12), 20, 0.7);\n  }\n  if (S.boom > 0) add(S.bx, 112, 0.75, S.boom * 1.6, 18);\n  return n;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  const F = S.f, M = S.mat, A = S.al, LR = S.lr, LG = S.lg, LB = S.lb, LT = S.lt, GM = S.gm, t = S.t, hot = S.hot, n = lights(S);\n  const lx = LT[0], ly = LT[1], fw = LT[2] / (BB[bq(hot)] / 255), gc = bq(hot * 0.6);\n  figure(S);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, o = i * 3, m = M[i], ds = (px - lx) ** 2 + (py - ly) ** 2, qa = 1 / (1 + ds * LT[5]);\n    // The glory hole's near pool and long reach; below the floor, only through the opening.\n    let fq = qa * qa + 0.62 / (1 + ds / 500);\n    if (y > FL + 1) {\n      const xc = lx + ((px - lx) * (FL - ly)) / (py - ly);\n      fq *= 0.06 + 0.94 * sm(OX0 - 3, OX0 + 3, xc) * sm(OX1 + 3, OX1 - 3, xc) * exp(-(py - FL) / 40);\n    }\n    let r = 0.004 + LT[2] * fq, g = 0.003 + LT[3] * fq, b = 0.003 + LT[4] * fq;\n    for (let j = 6; j \u003c n * 6; j += 6) {\n      const dx = px - LT[j], dy = py - LT[j + 1];\n      let q = 1 / (1 + (dx * dx + dy * dy) * LT[j + 5]);\n      q *= q;\n      (r += LT[j + 2] * q), (g += LT[j + 3] * q), (b += LT[j + 4] * q);\n    }\n    (LR[i] = r), (LG[i] = g), (LB[i] = b);\n    const ex = (px - MX) / MRX, ey = (py - MY) / MRY, e2 = ex * ex + ey * ey;\n    if (m === 3) {\n      // The mouth, hottest in the middle, the fire churning.\n      const c = bq(hot * (1 - 0.2 * e2) + 0.07 * (vn(x * 0.6, y * 0.5 - t * 5) - 0.5));\n      for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j];\n      continue;\n    }\n    // The refractory round the mouth glows from the heat.\n    const gw = m === 2 ? exp(-(sqrt(e2) - 1) * 2.4) * 0.9 * fw : 0;\n    (F[o] = A[o] * r * 255 + BB[gc] * gw), (F[o + 1] = A[o + 1] * g * 255 + BB[gc + 1] * gw), (F[o + 2] = A[o + 2] * b * 255 + BB[gc + 2] * gw);\n    // The gaffer, a silhouette with a rim of light.\n    const c = GM[i];\n    if (c > 0) {\n      const rim = max(1 - GM[i + 1], 0.6 * (1 - GM[i + W]), 0.4 * (1 - GM[i - W])) * 330;\n      (F[o] = mix(F[o], 5 + r * rim, c)), (F[o + 1] = mix(F[o + 1], 4 + g * rim, c)), (F[o + 2] = mix(F[o + 2], 4 + b * rim, c));\n    }\n  }\n  heap(S);\n  if (S.pc.on) glass(S, S.pc);\n  if (S.fall.on) glass(S, S.fall);\n  flames(S);\n  pipe(S);\n  for (const p of S.sp) {\n    const c = bq(p.l > 5 ? p.T + 0.1 : 0.55 + 0.4 * p.l), a = p.l > 5 ? 1 : min(1, p.l * 1.5);\n    put(F, p.x, p.y, c, a), put(F, p.x - p.vx * 0.025, p.y - p.vy * 0.025, c, a * 0.5);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction put(F, x, y, c, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j], a);\n}\n\n// The cullet heap: hot shards glow, cool ones show their colour and glint.\nfunction heap(S) {\n  const { f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL, hc: HC, ci: CI, fa: FA, se: SE } = S;\n  for (let i = 108 * W; i \u003c N; i++) {\n    if (M[i] !== 7) continue;\n    const o = i * 3, fa = FA[i], se = SE[i], T = HC[CI[i]] * (0.94 + 0.12 * fa), v = 1 - sm(0.1, 0.34, T), lum = (LR[i] + LG[i] + LB[i]) / 3;\n    const gl = max(0, cos(fa * 12.6 - 2 * atan2(S.gy - (i >> 6), S.gx - (i & 63)))) ** 10 * lum * 2.4 * v * (1 - se);\n    const b = (0.3 + 3 * lum) * (0.35 + 0.8 * fa) * (1 - se) * v * GL[3], c = bq(T), f = 0.7 * flt(T);\n    for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j] * (0.95 - 0.4 * se) * (1 - f + f * GL[4 + j]) + GL[j] * b + gl * (100 + GL[j]);\n  }\n}\n\n// The glass as capsules between nodes, the nearest one winning each LED.\nfunction glass(S, P) {\n  const { gd: GD, gs: GS, gr: GR, gu: GU, gb: GB, gt: GT, f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL } = S, oy = P.dy;\n  let X0 = W, X1 = -1, Y0 = H, Y1 = -1;\n  for (let i = 0; i \u003c NN - 1; i++) {\n    const ax = P.X[i], ay = P.Y[i] + oy, bx = P.X[i + 1], by = P.Y[i + 1] + oy, ra = P.R[i], rb = P.R[i + 1], rr = max(ra, rb) + 1;\n    const x0 = max(0, floor(min(ax, bx) - rr)), x1 = min(W - 1, ceil(max(ax, bx) + rr)), y0 = max(0, floor(min(ay, by) - rr)), y1 = min(H - 1, ceil(max(ay, by) + rr));\n    (X0 = min(X0, x0)), (X1 = max(X1, x1)), (Y0 = min(Y0, y0)), (Y1 = max(Y1, y1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const k = y * W + x, dd = seg(x + 0.5 - ax, y + 0.5 - ay, bx - ax, by - ay), r = ra + (rb - ra) * TT;\n        if (dd - r \u003c GD[k]) (GD[k] = dd - r), (GS[k] = (i + TT) / (NN - 1)), (GR[k] = r), (GU[k] = QX * (by - ay) - QY * (bx - ax) >= 0 ? dd : -dd), (GB[k] = mix(P.B[i], P.B[i + 1], TT)), (GT[k] = mix(P.T[i], P.T[i + 1], TT));\n      }\n  }\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const k = y * W + x, sd = GD[k], m = M[k];\n      if (sd >= 0.5) continue;\n      GD[k] = 99;\n      if (m === 1 || m === 2) continue;\n      const a = cl(0.5 - sd, 0, 1), r = max(0.5, GR[k]), d = GU[k], u = cl(d / r, -1, 1), ad = abs(d), rb = GB[k] * r, o = k * 3;\n      const ib = rb > 0.6 ? sm(0, 0.8, rb - ad) : 0, ch = 2 * r * sqrt(1 - u * u) * (1 - 0.5 * ib);\n      // More glow through more glass, less through the bubble; the skin cools first.\n      const e = 1 - exp(-0.3 * ch), T = GT[k] - 0.16 * u * u, st = sin(GS[k] * S.l * 0.55 - S.rot + u * 2.4);\n      const c = bq(T * (0.62 + 0.38 * e) * (1 + 0.05 * st) + 0.06 * (1 - u * u) - 0.08 * ib), dim = 1 - 0.28 * ib, v = 1 - sm(0.14, 0.42, T), f = flt(T);\n      // Cool glass shows its colour and a highlight.\n      const lum = (LR[k] + LG[k] + LB[k]) / 3, bod = (0.25 + 1.2 * lum) * (0.55 + 0.45 * (1 - u * u)) * (0.85 + 0.15 * st) * (1 - 0.35 * ib) * GL[3];\n      const sp = exp(-(((u - 0.45) / 0.2) ** 2)) * (0.25 + 1.3 * lum) * 160 * v;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j] * dim * (1 - f + f * GL[4 + j]) + v * (GL[j] * bod + sp), a);\n    }\n}\n\n// Fire licks out over the top lip of the glory hole.\nfunction flames(S) {\n  const F = S.f, t = S.t, amt = 1.5 + 3 * (S.hot - 0.84), top = MY - MRY + 2;\n  for (let y = max(0, top - 15); y \u003c top; y++) {\n    const h = (top - y) / 15;\n    for (let x = MX - 7; x \u003c MX + 6; x++) {\n      const dx = (x + 0.5 - (MX - 0.8 + 2.5 * h + sin(t * 3 + y * 0.4) * h)) / (4.4 * (1 - 0.35 * h));\n      const dens = sm(0.2, 0.55, vn(x * 0.3, y * 0.25 + t * 7) * (1.2 - h) * exp(-dx * dx) * amt), c = bq(0.48 + 0.36 * dens);\n      for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += BB[c + j] * dens;\n    }\n  }\n}\n\n// The gaffer: capsules for head, cap, body and limbs, posed by the pipe.\nfunction figure(S) {\n  const GM = S.gm, q = cl((S.th - TH0) / (THF - TH0), 0, 1), lean = (1 - q) * (0.9 + 1.4 * (S.th - TH0)), bob = 0.8 * sin(PI * cl(S.bl / 0.8, 0, 1));\n  const hpx = 14.5 + 0.5 * lean, hpy = 16.6, shx = 16 + lean, shy = 9.8 + 0.4 * lean, hx = S.hx, hy = S.hy;\n  const hdx = mix(16.8 + 1.2 * lean, hx - BACK * sin(S.th) - 2, bob), hdy = mix(5.4 + 0.3 * lean, hy - BACK * cos(S.th) - 2.4, bob);\n  const ebx = shx + 0.4 * (hx - shx) - 0.5, eby = shy + 0.62 * (hy - shy) + 1.8;\n  let n = 0;\n  const cap = (a, b, c, d, r) => ((CP[n] = a), (CP[n + 1] = b), (CP[n + 2] = c - a), (CP[n + 3] = d - b), (CP[n + 4] = r), (n += 5));\n  // Body, apron, neck, capped head, arm, legs, feet.\n  cap(hpx, hpy, shx, shy, 2.9), cap(hpx - 0.3, hpy + 1.5, hpx + 1.2, hpy + 3.2, 2.4), cap(shx, shy, hdx, hdy, 1.2), cap(hdx, hdy, hdx, hdy, 2.5), cap(hdx - 1.2, hdy - 1.7, hdx + 3.4, hdy - 1.3, 0.9);\n  cap(shx, shy, ebx, eby, 1.4), cap(ebx, eby, hx, hy, 1.2);\n  cap(hpx, hpy + 2, 12.2, 21.6, 1.7), cap(12.2, 21.6, 10.6, 25.4, 1.4), cap(hpx + 0.6, hpy + 2, 17.6, 21.2, 1.7), cap(17.6, 21.2, 18.4, 25.4, 1.4);\n  cap(10.2, 25.6, 12.4, 25.6, 0.9), cap(18.2, 25.6, 20.4, 25.6, 0.9);\n  for (let y = 0; y \u003c DK + 1; y++)\n    for (let x = 5; x \u003c 32; x++) {\n      let c = 0;\n      for (let j = 0; j \u003c n; j += 5) c = max(c, cl(CP[j + 4] + 0.5 - seg(x + 0.5 - CP[j], y + 0.5 - CP[j + 1], CP[j + 2], CP[j + 3]), 0, 1));\n      GM[y * W + x] = c;\n    }\n}\n\n// The blowpipe, steel, its far end hot from the glass.\nfunction pipe(S) {\n  const F = S.f, M = S.mat, st = sin(S.th), ct = cos(S.th), L = PIPE + BACK, ax = S.hx - BACK * st, ay = S.hy - BACK * ct, ex = L * st, ey = L * ct;\n  for (let y = max(0, floor(min(ay, ay + ey) - 1)); y \u003c= min(H - 1, max(ay, ay + ey) + 1); y++)\n    for (let x = max(0, floor(min(ax, ax + ex) - 1)); x \u003c= min(W - 1, max(ax, ax + ex) + 1); x++) {\n      const k = y * W + x, c = cl(1.1 - seg(x + 0.5 - ax, y + 0.5 - ay, ex, ey), 0, 1), hb = bq(S.pT * sm(PIPE - 7, PIPE + 1, TT * L - BACK)), o = k * 3;\n      if (c \u003c= 0 || M[k] === 1) continue;\n      (F[o] = mix(F[o], 26 + S.lr[k] * 190 + BB[hb], c)), (F[o + 1] = mix(F[o + 1], 26 + S.lg[k] * 190 + BB[hb + 1], c)), (F[o + 2] = mix(F[o + 2], 30 + S.lb[k] * 200 + BB[hb + 2], c));\n    }\n}\n","layer":{"id":"layer-glassblower","type":"code","name":"glassblower","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glassblower\n// Family:  glass\n// Idea:    A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the swing pit of a glass studio, where a gather is stretched long\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1\n//\n// Knob 1: Glass. The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same.\n// Knob 2: Speed. At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower.\n// Knob 3: Length. How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1.\n// Knob 4: Heat. How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter.\n// Buttons: K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.\n\nconst W = 64, H = 128, N = W * H, NN = 40;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, cbrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// Distance to a segment; TT is how far along it.\nlet TT = 0, QX = 0, QY = 0;\nfunction seg(px, py, ex, ey) {\n  TT = cl((px * ex + py * ey) / (ex * ex + ey * ey + 1e-6), 0, 1);\n  (QX = px - TT * ex), (QY = py - TT * ey);\n  return sqrt(QX * QX + QY * QY);\n}\n\n// Black body, 0..1: dark red, red, orange, yellow, near white.\nconst BBK = [0, 0, 0, 0, 0.12, 46, 3, 0, 0.25, 118, 10, 0, 0.38, 196, 34, 0, 0.5, 245, 80, 6, 0.62, 255, 132, 22, 0.75, 255, 180, 62, 0.87, 255, 222, 132, 1, 255, 246, 216];\nconst BB = new Float32Array(513 * 3);\nfor (let q = 0, k = 0; q \u003c= 512; q++) {\n  const T = q / 512;\n  while (k \u003c 28 && T > BBK[k + 4]) k += 4;\n  for (let c = 0; c \u003c 3; c++) BB[q * 3 + c] = mix(BBK[k + 1 + c], BBK[k + 5 + c], (T - BBK[k]) / (BBK[k + 4] - BBK[k]));\n}\nconst bq = (T) => (((T \u003c 0 ? 0 : T > 1 ? 1 : T) * 512 + 0.5) | 0) * 3;\n// Clear, cobalt, amber, green, ruby: colour and body when cold, then what passes of the glow.\nconst GLASS = [\n  [150, 212, 204, 0.3, 1, 0.97, 0.9], [34, 72, 238, 1, 0.3, 0.38, 1], [238, 138, 24, 1, 1, 0.62, 0.2],\n  [40, 208, 88, 1, 0.42, 1, 0.5], [228, 18, 70, 1, 1, 0.18, 0.4],\n];\n// As the glow fades the glass filters it, and the colour comes through.\nconst flt = (T) => 0.95 * (1 - sm(0.45, 0.85, T));\n\n// Deck, floor, the pit's opening, the glory hole (a drum seen end on at a slant), hands and pipe.\nconst DK = 26, FL = 31, PT = 35, OX0 = 19, OX1 = 47;\nconst MX = 49, MY = 15, MRX = 3.6, MRY = 7, FRX = 6.5, FRY = 11;\nconst PIPE = 27, BACK = 8, TH0 = 0.34, HX = 24.5, HY = 19.5, HX2 = 25.5, HY2 = 17.5;\nconst THF = atan2(MX - HX2, MY - HY2);\nconst GATHER = 0, OUT = 1, BLOW = 2, SWING = 3, LIFT = 4, REHEAT = 5, CUT = 6, EMPTY = 7;\nconst DUR = [1.3, 1, 0.8, 5, 0.9, 1.8, 1.4, 0.9];\nconst V0 = 1300, OM = (2 * PI) / 2.3, START = 13.6, FS = new Float32Array(NN), CP = new Float32Array(80);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), piece = () => ({ X: F(NN), Y: F(NN), R: F(NN), B: F(NN), T: F(NN), on: 0, dy: 0, vy: 0 });\n  const S = (params.s = {\n    t: 0, th: THF, rho: 1, sw: 0, be: 0, bv: 0, vx: 0, tx: 0, ty: 0, l: 4, R0: 3, bl: 9, rot: 0, pT: 0, boom: 0, tmax: 0.8, live: 0, k1: -1, gl: [0, 0, 0, 1, 1, 1, 1], pc: piece(), fall: piece(), sp: [], lt: F(84),\n    fa: F(N), se: F(N), ci: new Uint8Array(N), hc: F(256), cx: F(256), cn: F(256), top: F(W),\n    f: F(N * 3), lr: F(N), lg: F(N), lb: F(N), mat: new Uint8Array(N), al: F(N * 3), gm: F(N),\n    gd: F(N).fill(99), gs: F(N), gr: F(N), gu: F(N), gb: F(N), gt: F(N),\n  });\n  maps(S);\n  go(S, GATHER);\n}\n\nfunction maps(S) {\n  const M = S.mat, A = S.al, HG = S.top;\n  for (let x = 0; x \u003c W; x++) HG[x] = 122 - 10 * ((x + 0.5 - 33) / 31) ** 2 + 2 * (vn(x * 0.3, 5) - 0.5);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, gr = 0.85 + 0.3 * hash(x, y);\n    let m = 0, a = 0, c = [1, 0.9, 0.8];\n    if (((px - MX) / MRX) ** 2 + ((py - MY) / MRY) ** 2 \u003c 1) m = 3;\n    else if (((px - MX) / FRX) ** 2 + ((py - MY) / FRY) ** 2 \u003c 1) (m = 2), (a = 0.5 * (0.8 + 0.3 * hash(x, y + 7))), (c = [1, 0.84, 0.7]);\n    else if (x > MX && y \u003c FL && y > MY - FRY - 1) {\n      // The drum with a rim on top and two bands, a dark stand below.\n      m = 1;\n      a = y \u003c MY + FRY ? (y === MY - FRY ? 0.9 : 0.3 * (0.35 + 0.65 * cos(((py - MY) / FRY) * 1.45))) * (x === 56 || x === 61 ? 1.8 : 1) : y === MY + FRY ? 0.7 : 0.12;\n      c = [0.9, 0.93, 1];\n    } else if (y >= FL && y \u003c PT && (x \u003c OX0 || x > OX1)) (m = 4), (a = y === FL ? 0.8 : 0.3 * gr * (0.8 + 0.4 * hash(x >> 1, y))), (c = [1, 0.95, 0.88]);\n    else if ((y >= DK && y \u003c DK + 2 && x \u003c 23) || ((x === 3 || x === 19) && y >= DK && y \u003c FL)) (m = 5), (a = y === DK ? 0.9 : 0.35), (c = [0.9, 0.93, 1]);\n    else if (py >= HG[x]) {\n      // Broken glass: facets on a jittered grid, dark seams between them.\n      m = 7;\n      let d1 = 9, d2 = 9, id = 0, ci = 0;\n      for (let j = 0; j \u003c 9; j++) {\n        const cx = floor(x / 3) + (j % 3) - 1, cy = floor(y / 2.5) + floor(j / 3) - 1, d = (px - (cx + hash(cx, cy)) * 3) ** 2 + (py - (cy + hash(cy, cx + 9)) * 2.5) ** 2;\n        if (d \u003c d1) (d2 = d1), (d1 = d), (id = hash(cx + 31, cy)), (ci = cl((cy - 42) * 24 + cx + 1, 0, 254));\n        else if (d \u003c d2) d2 = d;\n      }\n      (S.ci[i] = ci), (S.cx[ci] += px), S.cn[ci]++;\n      (S.fa[i] = id), (S.se[i] = sm(0.9, 0.2, sqrt(d2) - sqrt(d1)) * 0.7 + (py - HG[x] \u003c 1 ? -0.3 : 0));\n    } else if (y >= FL) {\n      // Firebrick courses, sooted in clouds.\n      m = 6;\n      const r = floor(y / 3), sx = x + (r & 1) * 3;\n      a = y % 3 === 2 || sx % 7 === 6 ? 0.1 : 0.5 * (0.7 + 0.6 * hash(floor(sx / 7), r)) * (0.45 + 0.7 * vn(x * 0.11, y * 0.045)) * gr * (x \u003c 2 || x > 61 ? 0.45 : 1);\n      c = [1, 0.76, 0.58];\n    } else {\n      // Corrugated sheeting behind the shop.\n      a = 0.5 * (0.88 + 0.12 * cos(px * PI * 0.5)) * (x % 16 === 15 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 0.07, y * 0.15));\n      c = [0.95, 0.9, 0.85];\n    }\n    M[i] = m;\n    for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = a * c[j];\n  }\n}\n// Heat left in the heap where hot glass lands, shard by shard.\nfunction heat(S, x, y, T, r) {\n  for (let j = floor(y - r); j \u003c= y + r; j++)\n    for (let i = floor(x - r); i \u003c= x + r; i++) {\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || S.mat[j * W + i] !== 7) continue;\n      const c = S.ci[j * W + i];\n      S.hc[c] = max(S.hc[c], T * sm(r + 0.5, r * 0.3, sqrt((i + 0.5 - x) ** 2 + (j + 0.5 - y) ** 2)));\n    }\n}\n\nfunction go(S, ph) {\n  (S.ph = ph), (S.pt = 0), (S.th1 = S.th);\n  if (ph === GATHER) (S.pc.on = 1), (S.V = 60), (S.b = S.bt = 0), (S.sb = S.sbt = 0.3), (S.pass = 1), S.pc.T.fill(S.tmax);\n  else if (ph === BLOW) blow(S, S.pass > 1 ? 0.1 : 0.4);\n  else if (ph === SWING) S.sw = 0;\n}\nfunction next(S) {\n  const p = S.ph;\n  go(S, p === SWING ? (S.pass > 1 ? CUT : LIFT) : p === REHEAT ? OUT : p === EMPTY ? GATHER : p + 1);\n  if (p === REHEAT) S.pass++;\n}\nfunction blow(S, db) {\n  (S.bt = min(0.74, S.b + db)), (S.sbt = min(0.84, S.pass > 1 ? S.sb + 0.12 : 0.55)), (S.bl = 0);\n}\nconst live = (S) => S.pc.on && (S.ph === BLOW || S.ph === SWING || (S.ph === CUT && S.pt \u003c 0.4));\n\n// Radius from volume and length: a neck, a body narrowing down, a round end.\nfunction shape(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1);\n  let R = max(1, S.R0);\n  for (let it = 0; it \u003c 3; it++) {\n    let sum = 0;\n    for (let i = 0; i \u003c NN; i++) {\n      const s = i / (NN - 1), a = s * l, ct = 1 - min(1, (a + 0.25 * R) / (1.1 * R)), cb = 1 - min(1, (l - a) / (0.62 * R));\n      FS[i] = (1 - 0.38 * s) * sqrt(1 - ct * ct) * sqrt(max(0, 1 - cb * cb));\n      sum += FS[i] * FS[i];\n    }\n    R = max(1, sqrt(S.V / (PI * dl * max(1e-3, sum))));\n  }\n  S.R0 = R;\n  for (let i = 0; i \u003c NN; i++) {\n    const q = (i / (NN - 1) - 0.05) / (S.sb - 0.05), B = q > 0 && q \u003c 1 ? S.b * sqrt(1 - (2 * q - 1) ** 2) : 0;\n    (P.B[i] = B), (P.R[i] = (R * FS[i]) / sqrt(1 - B * B));\n  }\n}\n// Off the pipe along its axis, then hanging and trailing the swing; straight when lifted.\nfunction line(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1), th = S.th, w0 = 0.8 * S.R0 + 1.5;\n  let x = S.tx - sin(th) * 1.2, y = S.ty - cos(th) * 1.2;\n  for (let i = 0; i \u003c NN; i++) {\n    (P.X[i] = x), (P.Y[i] = y);\n    const s = i / (NN - 1), w = exp((-s * l) / w0), a = mix(th * w + (1 - w) * S.be * s ** 0.8, th, S.rho);\n    (x += sin(a) * dl), (y += cos(a) * dl);\n  }\n}\n// Radiative cooling, faster where the glass is thin.\nconst cool = (T, R, d) => T - ((0.22 * (T + 0.1)) / max(2.2, R) ** 0.7) * d;\n\nfunction step(S, d) {\n  (S.t += d), (S.pt += d);\n  const dur = () => (S.ph === SWING ? (S.pass > 1 ? 6.5 : 5) : DUR[S.ph]);\n  if (S.pt >= dur()) next(S);\n  const ph = S.ph, pt = S.pt, D = dur(), u = sm(0, 1, pt / D), P = S.pc, F = S.fall, HG = S.top;\n  let th = S.th, rho = S.rho, inH = 0;\n  S.env = 0;\n  if (ph === GATHER || ph === REHEAT) (th = THF + 0.015 * sin(S.t * 3)), (rho = inH = 1);\n  else if (ph === OUT) (th = mix(S.th1, TH0, u)), (rho = 1 - sm(0.3, 0.9, pt / D)), (inH = 1 - sm(0, 0.25, pt / D));\n  else if (ph === BLOW) (th = TH0 + 0.03 * sin(pt * 4)), (rho = 0);\n  else if (ph === SWING) {\n    S.env = sm(0, 1.4, pt) * (1 - sm(D - 1.1, D, pt));\n    S.sw += d * OM * sqrt(62 / S.L) * (1 - 0.15 * (S.l / S.L));\n    (th = TH0 + S.A * S.env * sin(S.sw)), (rho = 0);\n  } else if (ph === LIFT || ph === EMPTY) (th = mix(S.th1, THF, u)), (rho = sm(0, 0.3, pt / D)), (inH = sm(0.75, 1, pt / D));\n  else {\n    (th = mix(S.th1, TH0, sm(0, 0.4, pt))), (rho = 0);\n    if (P.on && pt >= 0.4) cut(S);\n  }\n  const q = cl((th - TH0) / (THF - TH0), 0, 1);\n  (S.th = th), (S.rho = rho), (S.hx = mix(HX, HX2, q)), (S.hy = mix(HY, HY2, q));\n  const tx = S.hx + PIPE * sin(th), ty = S.hy + PIPE * cos(th), vx = (tx - S.tx) / d, ax = cl((vx - S.vx) / d, -400, 400), Le = max(10, 0.55 * S.l);\n  (S.tx = tx), (S.ty = ty), (S.vx = vx);\n  // The hanging part is a pendulum on a moving pivot.\n  if (rho > 0.5) S.be = S.bv = 0;\n  else (S.bv += ((-190 / Le) * sin(S.be) - 1.3 * S.bv - (ax / Le) * cos(S.be)) * d), (S.be = cl(S.be + S.bv * d, -0.7, 0.7));\n  (S.b += (S.bt - S.b) * min(1, d * 4)), (S.sb += (S.sbt - S.sb) * min(1, d * 4)), (S.bl += d), (S.rot += d * (3 + 5 * inH));\n  if (P.on) {\n    if (ph === GATHER) (S.V = max(60, V0 * (S.L / 62) * sm(0, 1.1, pt))), (S.l = 1.9 * cbrt((3 * S.V) / (4 * PI)));\n    let tm = 0;\n    for (let i = 0; i \u003c NN; i++) tm += P.T[i] / NN;\n    if (rho \u003c 0.5) S.l += 0.42 * sm(0.15, 0.55, tm) * max(0, (S.pass > 1 ? S.L : 0.64 * S.L) - S.l) * (0.3 + 0.7 * S.env) * d;\n    shape(S), line(S);\n    // The glory hole brings it all back up.\n    for (let i = 0; i \u003c NN; i++) {\n      const T = P.T[i] + (S.tmax - P.T[i]) * (1 - exp(-1.9 * d)) * inH;\n      P.T[i] = mix(T, cool(T, P.R[i], d), 1 - inH);\n    }\n    (S.pT = mix(S.pT, P.T[0] * 0.7, min(1, d * 2))), (S.gx = P.X[NN >> 1]), (S.gy = P.Y[NN >> 1]);\n  } else S.pT *= exp(-d * 0.5);\n  if (F.on) {\n    (F.vy += 300 * d), (F.dy += F.vy * d), (S.gx = F.X[NN >> 1]), (S.gy = F.Y[NN >> 1] + F.dy);\n    for (let i = 0; i \u003c NN; i++) F.T[i] = cool(F.T[i], F.R[i], d);\n    // It hits the heap and goes to pieces.\n    const bx = F.X[NN - 1], hy = HG[cl(bx | 0, 0, W - 1)];\n    if (F.Y[NN - 1] + F.dy > hy - 1) {\n      heat(S, bx, hy + 1, F.T[NN - 1] + 0.1, 3.5);\n      for (let i = 0; i \u003c NN * 2; i++) {\n        const j = i >> 1;\n        S.sp.push({ x: F.X[j] + (rnd() - 0.5) * F.R[j], y: F.Y[j] + F.dy, vx: (rnd() - 0.5) * 60, vy: F.vy * (0.5 + 0.4 * rnd()) - 30 * rnd(), l: 9, T: F.T[j] });\n      }\n      (F.on = 0), (S.boom = 1), (S.bx = bx);\n    }\n  }\n  for (let c = 0; c \u003c 255; c++) if (S.hc[c] > 0) S.hc[c] -= 0.03 * (S.hc[c] + 0.08) * d;\n  S.boom = max(0, S.boom - d * 2.5);\n  for (const p of S.sp) {\n    (p.vy += 200 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 1.2);\n    if (p.x \u003c 0.5 || p.x > W - 0.5) (p.vx *= -0.5), (p.x = cl(p.x, 0.5, W - 0.5));\n    // A shard bounces, then settles into the heap and leaves its heat there.\n    if (p.l > 5 && p.y > HG[p.x | 0]) p.vy > 70 ? ((p.vy *= -0.35), (p.vx *= 0.6), (p.y = HG[p.x | 0])) : (heat(S, p.x, p.y + 1, p.T, 1.3 + rnd()), (p.l = 0));\n  }\n  S.sp = S.sp.filter((p) => p.l > 0 && p.y \u003c H + 2);\n}\n\n// The jacks score the neck and the piece drops away into the pit.\nfunction cut(S) {\n  const P = S.pc, F = S.fall;\n  for (const k of \"XYRBT\") F[k].set(P[k]);\n  (F.on = 1), (F.dy = F.vy = P.on = 0), (S.pT = 0.75), (S.l = 4), (S.V = 60);\n  for (let k = 0; k \u003c 14; k++) S.sp.push({ x: S.tx, y: S.ty + 1, vx: (rnd() - 0.5) * 34, vy: -10 - 28 * rnd(), l: 0.6 + 0.4 * rnd(), T: 0.8 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], -1, 1), k4 = cl(k[3], 0, 1);\n  if (k1 !== S.k1) {\n    const u = k1 * 4, i = min(3, floor(u)), f = sm(0.25, 0.75, u - i);\n    for (let c = 0; c \u003c 7; c++) S.gl[c] = mix(GLASS[i][c], GLASS[i + 1][c], f);\n    S.k1 = k1;\n  }\n  (S.L = 62 + 18 * k3), (S.A = 0.29 + 0.15 * k3), (S.hot = 0.84 + 0.16 * k4), (S.tmax = 0.86 + 0.18 * k4), (S.fI = 1 + 0.55 * k4);\n  if (!S.live) {\n    while (!S.live) step(S, 1 / 30), (S.live = S.t >= START ? 1 : 0);\n    // The last piece lies broken in the heap, still red.\n    heat(S, 31 + 6 * rnd(), 125, 0.44, 5);\n    for (let k = 0; k \u003c 7; k++) heat(S, 2 + 60 * rnd(), 112 + 16 * rnd(), 0.18 + 0.14 * rnd(), 1.5 + 2 * rnd());\n  }\n  const bp = input.btnPressed || [];\n  if (bp[0] && live(S)) go(S, LIFT);\n  if (bp[1] && live(S)) blow(S, 0.14);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\n// Lights: the glory hole, seven points along the gather, the heap's embers, the crash.\nfunction lights(S) {\n  const LT = S.lt, M = S.mat, HC = S.hc, GL = S.gl;\n  let n = 0;\n  const add = (x, y, T, w, sg, g = 0) => {\n    const o = n++ * 6, b = bq(T), f = g * flt(T);\n    (LT[o] = x), (LT[o + 1] = y), (LT[o + 5] = 1 / (sg * sg));\n    for (let c = 0; c \u003c 3; c++) LT[o + 2 + c] = (BB[b + c] / 255) * w * (1 - f + f * GL[4 + c]);\n  };\n  add(MX - 2.5, MY + 0.5, S.hot, S.fI * (0.92 + 0.12 * vn(S.t * 4, 3)), 13);\n  for (const P of [S.pc, S.fall]) {\n    if (!P.on) continue;\n    for (let i = 3; i \u003c NN; i += 6) {\n      const x = P.X[i], y = P.Y[i] + P.dy, m = x >= 0 && x \u003c W && y >= 0 && y \u003c H ? M[(y | 0) * W + (x | 0)] : 0;\n      if (y \u003c H + 12) add(x, y, P.T[i], 0.32 * min(2, P.R[i] / 3) * (m === 1 || m === 2 ? 0.15 : 1), 10 + 1.4 * P.R[i], 1);\n    }\n  }\n  for (let h = 0; h \u003c 2; h++) {\n    let w = 0, T = 0, sx = 0;\n    for (let c = 0; c \u003c 255; c++) {\n      const e = (HC[c] - 0.15) * S.cn[c], x = S.cx[c] / S.cn[c];\n      if (e > 0 && x \u003c 32 === !h) (w += e), (sx += e * x), (T = max(T, HC[c]));\n    }\n    if (w > 0) add(sx / w, 118, T, min(3, w * 0.12), 20, 0.7);\n  }\n  if (S.boom > 0) add(S.bx, 112, 0.75, S.boom * 1.6, 18);\n  return n;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  const F = S.f, M = S.mat, A = S.al, LR = S.lr, LG = S.lg, LB = S.lb, LT = S.lt, GM = S.gm, t = S.t, hot = S.hot, n = lights(S);\n  const lx = LT[0], ly = LT[1], fw = LT[2] / (BB[bq(hot)] / 255), gc = bq(hot * 0.6);\n  figure(S);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, o = i * 3, m = M[i], ds = (px - lx) ** 2 + (py - ly) ** 2, qa = 1 / (1 + ds * LT[5]);\n    // The glory hole's near pool and long reach; below the floor, only through the opening.\n    let fq = qa * qa + 0.62 / (1 + ds / 500);\n    if (y > FL + 1) {\n      const xc = lx + ((px - lx) * (FL - ly)) / (py - ly);\n      fq *= 0.06 + 0.94 * sm(OX0 - 3, OX0 + 3, xc) * sm(OX1 + 3, OX1 - 3, xc) * exp(-(py - FL) / 40);\n    }\n    let r = 0.004 + LT[2] * fq, g = 0.003 + LT[3] * fq, b = 0.003 + LT[4] * fq;\n    for (let j = 6; j \u003c n * 6; j += 6) {\n      const dx = px - LT[j], dy = py - LT[j + 1];\n      let q = 1 / (1 + (dx * dx + dy * dy) * LT[j + 5]);\n      q *= q;\n      (r += LT[j + 2] * q), (g += LT[j + 3] * q), (b += LT[j + 4] * q);\n    }\n    (LR[i] = r), (LG[i] = g), (LB[i] = b);\n    const ex = (px - MX) / MRX, ey = (py - MY) / MRY, e2 = ex * ex + ey * ey;\n    if (m === 3) {\n      // The mouth, hottest in the middle, the fire churning.\n      const c = bq(hot * (1 - 0.2 * e2) + 0.07 * (vn(x * 0.6, y * 0.5 - t * 5) - 0.5));\n      for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j];\n      continue;\n    }\n    // The refractory round the mouth glows from the heat.\n    const gw = m === 2 ? exp(-(sqrt(e2) - 1) * 2.4) * 0.9 * fw : 0;\n    (F[o] = A[o] * r * 255 + BB[gc] * gw), (F[o + 1] = A[o + 1] * g * 255 + BB[gc + 1] * gw), (F[o + 2] = A[o + 2] * b * 255 + BB[gc + 2] * gw);\n    // The gaffer, a silhouette with a rim of light.\n    const c = GM[i];\n    if (c > 0) {\n      const rim = max(1 - GM[i + 1], 0.6 * (1 - GM[i + W]), 0.4 * (1 - GM[i - W])) * 330;\n      (F[o] = mix(F[o], 5 + r * rim, c)), (F[o + 1] = mix(F[o + 1], 4 + g * rim, c)), (F[o + 2] = mix(F[o + 2], 4 + b * rim, c));\n    }\n  }\n  heap(S);\n  if (S.pc.on) glass(S, S.pc);\n  if (S.fall.on) glass(S, S.fall);\n  flames(S);\n  pipe(S);\n  for (const p of S.sp) {\n    const c = bq(p.l > 5 ? p.T + 0.1 : 0.55 + 0.4 * p.l), a = p.l > 5 ? 1 : min(1, p.l * 1.5);\n    put(F, p.x, p.y, c, a), put(F, p.x - p.vx * 0.025, p.y - p.vy * 0.025, c, a * 0.5);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction put(F, x, y, c, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j], a);\n}\n\n// The cullet heap: hot shards glow, cool ones show their colour and glint.\nfunction heap(S) {\n  const { f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL, hc: HC, ci: CI, fa: FA, se: SE } = S;\n  for (let i = 108 * W; i \u003c N; i++) {\n    if (M[i] !== 7) continue;\n    const o = i * 3, fa = FA[i], se = SE[i], T = HC[CI[i]] * (0.94 + 0.12 * fa), v = 1 - sm(0.1, 0.34, T), lum = (LR[i] + LG[i] + LB[i]) / 3;\n    const gl = max(0, cos(fa * 12.6 - 2 * atan2(S.gy - (i >> 6), S.gx - (i & 63)))) ** 10 * lum * 2.4 * v * (1 - se);\n    const b = (0.3 + 3 * lum) * (0.35 + 0.8 * fa) * (1 - se) * v * GL[3], c = bq(T), f = 0.7 * flt(T);\n    for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j] * (0.95 - 0.4 * se) * (1 - f + f * GL[4 + j]) + GL[j] * b + gl * (100 + GL[j]);\n  }\n}\n\n// The glass as capsules between nodes, the nearest one winning each LED.\nfunction glass(S, P) {\n  const { gd: GD, gs: GS, gr: GR, gu: GU, gb: GB, gt: GT, f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL } = S, oy = P.dy;\n  let X0 = W, X1 = -1, Y0 = H, Y1 = -1;\n  for (let i = 0; i \u003c NN - 1; i++) {\n    const ax = P.X[i], ay = P.Y[i] + oy, bx = P.X[i + 1], by = P.Y[i + 1] + oy, ra = P.R[i], rb = P.R[i + 1], rr = max(ra, rb) + 1;\n    const x0 = max(0, floor(min(ax, bx) - rr)), x1 = min(W - 1, ceil(max(ax, bx) + rr)), y0 = max(0, floor(min(ay, by) - rr)), y1 = min(H - 1, ceil(max(ay, by) + rr));\n    (X0 = min(X0, x0)), (X1 = max(X1, x1)), (Y0 = min(Y0, y0)), (Y1 = max(Y1, y1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const k = y * W + x, dd = seg(x + 0.5 - ax, y + 0.5 - ay, bx - ax, by - ay), r = ra + (rb - ra) * TT;\n        if (dd - r \u003c GD[k]) (GD[k] = dd - r), (GS[k] = (i + TT) / (NN - 1)), (GR[k] = r), (GU[k] = QX * (by - ay) - QY * (bx - ax) >= 0 ? dd : -dd), (GB[k] = mix(P.B[i], P.B[i + 1], TT)), (GT[k] = mix(P.T[i], P.T[i + 1], TT));\n      }\n  }\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const k = y * W + x, sd = GD[k], m = M[k];\n      if (sd >= 0.5) continue;\n      GD[k] = 99;\n      if (m === 1 || m === 2) continue;\n      const a = cl(0.5 - sd, 0, 1), r = max(0.5, GR[k]), d = GU[k], u = cl(d / r, -1, 1), ad = abs(d), rb = GB[k] * r, o = k * 3;\n      const ib = rb > 0.6 ? sm(0, 0.8, rb - ad) : 0, ch = 2 * r * sqrt(1 - u * u) * (1 - 0.5 * ib);\n      // More glow through more glass, less through the bubble; the skin cools first.\n      const e = 1 - exp(-0.3 * ch), T = GT[k] - 0.16 * u * u, st = sin(GS[k] * S.l * 0.55 - S.rot + u * 2.4);\n      const c = bq(T * (0.62 + 0.38 * e) * (1 + 0.05 * st) + 0.06 * (1 - u * u) - 0.08 * ib), dim = 1 - 0.28 * ib, v = 1 - sm(0.14, 0.42, T), f = flt(T);\n      // Cool glass shows its colour and a highlight.\n      const lum = (LR[k] + LG[k] + LB[k]) / 3, bod = (0.25 + 1.2 * lum) * (0.55 + 0.45 * (1 - u * u)) * (0.85 + 0.15 * st) * (1 - 0.35 * ib) * GL[3];\n      const sp = exp(-(((u - 0.45) / 0.2) ** 2)) * (0.25 + 1.3 * lum) * 160 * v;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j] * dim * (1 - f + f * GL[4 + j]) + v * (GL[j] * bod + sp), a);\n    }\n}\n\n// Fire licks out over the top lip of the glory hole.\nfunction flames(S) {\n  const F = S.f, t = S.t, amt = 1.5 + 3 * (S.hot - 0.84), top = MY - MRY + 2;\n  for (let y = max(0, top - 15); y \u003c top; y++) {\n    const h = (top - y) / 15;\n    for (let x = MX - 7; x \u003c MX + 6; x++) {\n      const dx = (x + 0.5 - (MX - 0.8 + 2.5 * h + sin(t * 3 + y * 0.4) * h)) / (4.4 * (1 - 0.35 * h));\n      const dens = sm(0.2, 0.55, vn(x * 0.3, y * 0.25 + t * 7) * (1.2 - h) * exp(-dx * dx) * amt), c = bq(0.48 + 0.36 * dens);\n      for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += BB[c + j] * dens;\n    }\n  }\n}\n\n// The gaffer: capsules for head, cap, body and limbs, posed by the pipe.\nfunction figure(S) {\n  const GM = S.gm, q = cl((S.th - TH0) / (THF - TH0), 0, 1), lean = (1 - q) * (0.9 + 1.4 * (S.th - TH0)), bob = 0.8 * sin(PI * cl(S.bl / 0.8, 0, 1));\n  const hpx = 14.5 + 0.5 * lean, hpy = 16.6, shx = 16 + lean, shy = 9.8 + 0.4 * lean, hx = S.hx, hy = S.hy;\n  const hdx = mix(16.8 + 1.2 * lean, hx - BACK * sin(S.th) - 2, bob), hdy = mix(5.4 + 0.3 * lean, hy - BACK * cos(S.th) - 2.4, bob);\n  const ebx = shx + 0.4 * (hx - shx) - 0.5, eby = shy + 0.62 * (hy - shy) + 1.8;\n  let n = 0;\n  const cap = (a, b, c, d, r) => ((CP[n] = a), (CP[n + 1] = b), (CP[n + 2] = c - a), (CP[n + 3] = d - b), (CP[n + 4] = r), (n += 5));\n  // Body, apron, neck, capped head, arm, legs, feet.\n  cap(hpx, hpy, shx, shy, 2.9), cap(hpx - 0.3, hpy + 1.5, hpx + 1.2, hpy + 3.2, 2.4), cap(shx, shy, hdx, hdy, 1.2), cap(hdx, hdy, hdx, hdy, 2.5), cap(hdx - 1.2, hdy - 1.7, hdx + 3.4, hdy - 1.3, 0.9);\n  cap(shx, shy, ebx, eby, 1.4), cap(ebx, eby, hx, hy, 1.2);\n  cap(hpx, hpy + 2, 12.2, 21.6, 1.7), cap(12.2, 21.6, 10.6, 25.4, 1.4), cap(hpx + 0.6, hpy + 2, 17.6, 21.2, 1.7), cap(17.6, 21.2, 18.4, 25.4, 1.4);\n  cap(10.2, 25.6, 12.4, 25.6, 0.9), cap(18.2, 25.6, 20.4, 25.6, 0.9);\n  for (let y = 0; y \u003c DK + 1; y++)\n    for (let x = 5; x \u003c 32; x++) {\n      let c = 0;\n      for (let j = 0; j \u003c n; j += 5) c = max(c, cl(CP[j + 4] + 0.5 - seg(x + 0.5 - CP[j], y + 0.5 - CP[j + 1], CP[j + 2], CP[j + 3]), 0, 1));\n      GM[y * W + x] = c;\n    }\n}\n\n// The blowpipe, steel, its far end hot from the glass.\nfunction pipe(S) {\n  const F = S.f, M = S.mat, st = sin(S.th), ct = cos(S.th), L = PIPE + BACK, ax = S.hx - BACK * st, ay = S.hy - BACK * ct, ex = L * st, ey = L * ct;\n  for (let y = max(0, floor(min(ay, ay + ey) - 1)); y \u003c= min(H - 1, max(ay, ay + ey) + 1); y++)\n    for (let x = max(0, floor(min(ax, ax + ex) - 1)); x \u003c= min(W - 1, max(ax, ax + ex) + 1); x++) {\n      const k = y * W + x, c = cl(1.1 - seg(x + 0.5 - ax, y + 0.5 - ay, ex, ey), 0, 1), hb = bq(S.pT * sm(PIPE - 7, PIPE + 1, TT * L - BACK)), o = k * 3;\n      if (c \u003c= 0 || M[k] === 1) continue;\n      (F[o] = mix(F[o], 26 + S.lr[k] * 190 + BB[hb], c)), (F[o + 1] = mix(F[o + 1], 26 + S.lg[k] * 190 + BB[hb + 1], c)), (F[o + 2] = mix(F[o + 2], 30 + S.lb[k] * 200 + BB[hb + 2], c));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glass","min":0,"max":1,"about":"The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower."},{"name":"Length","min":-1,"max":1,"about":"How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1."},{"name":"Heat","min":0,"max":1,"about":"How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter."}],"start":[0,2,0,0.06],"measures":{"motion":0.2176,"detail":0.046,"edges":0.1956,"complexity":1.533,"coverage":0.4076,"colour":0.1924,"drift":0.0806},"knobResponse":[0.0366,0.0488,0.0315,0.0412]},{"slug":"glitter-fall","title":"Glitter Fall","family":"cosmetic","round":29,"note":"검은 화면 위로 분홍 글리터가 흔들리는 줄기로 쏟아지고, 육각 조각 하나하나가 제 박자로 돌다가 면이 빛을 향할 때 반짝여요. 바닥에 쌓인 더미는 바닥 틈으로 모래시계처럼 빠져요. K1 은 색상환을 다 돌고, 누르면 더미 윗층이 공중으로 튀어 올라요.","idea":"Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.","buttons":"K1 tap throws the top of the heap up into the air, and it flashes all the way back down.","code":"// ===== Patternflow pattern =====\n// Title:   Glitter Fall\n// Family:  cosmetic\n// Idea:    Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after loose cosmetic glitter poured under a display lamp\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1\n//\n// Knob 1: Hue. The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall.\n// Knob 2: Speed. How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower.\n// Knob 3: Amount. How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast.\n// Knob 4: Size. The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble.\n// Buttons: K1 tap throws the top of the heap up into the air, and it flashes all the way back down.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, abs, sqrt, log, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Every flake carries one of NS seeds, which fix its colour class, how it lies\n// once it has landed and how bright it is. A grain in the heap keeps its seed,\n// so the heap's texture and glints stay put while the lamp moves.\nconst NS = 1024;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst TX = new Float32Array(NS), TY = new Float32Array(NS), JIT = new Float32Array(NS), CLS = new Uint8Array(NS);\nfor (let i = 0; i \u003c NS; i++) {\n  // A landed flake lies roughly flat: its tilt is a small Gaussian.\n  const r = sqrt(-2 * log(hash(i * 4) + 1e-6)) * 0.3, a = 2 * PI * hash(i * 4 + 1);\n  TX[i] = r * cos(a);\n  TY[i] = r * sin(a);\n  JIT[i] = hash(i * 4 + 2);\n  const c = hash(i * 4 + 3);\n  // Main colour, a lighter tint, a deeper shade, and silver.\n  CLS[i] = c \u003c 0.5 ? 0 : c \u003c 0.7 ? 1 : c \u003c 0.85 ? 2 : 3;\n}\n// Hue offset, saturation and value of each class, and how much of the hue a\n// flash keeps. Silver keeps a breath of the hue so it sits in the same mix.\nconst PAL = [\n  [0, 0.85, 0.8, 0.45],\n  [-0.03, 0.55, 0.95, 0.35],\n  [0.03, 1, 0.65, 0.55],\n  [0, 0.1, 0.5, 0.08],\n];\n\n// The heap's grains sit one to an LED, stacked in columns from the floor up.\n// HEAP is how many grains make the floor open, LOW how many it keeps.\nconst HEAP = 2600, LOW = 1150;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), ph: F(MAXP), om: F(MAXP), al: F(MAXP), sw: F(MAXP), vt: F(MAXP), sd: new Uint16Array(MAXP),\n    n: 0, G: new Int16Array(N).fill(-1), h: new Int16Array(W), grains: 0, T: 0, acc: 0, ca: 0, dir: 1,\n    drain: 0, dx0: 0, dx1: 0, dtime: 0, started: false,\n    buf: F(N * 3), base: F(12), fl: F(12), hue: 0, amount: 1, size: 0.06, lx: 32, ly: 80,\n  };\n}\n\n// One flake into the air at x, y.\nfunction spawn(S, x, y, vx, vy, seed) {\n  if (S.n >= MAXP) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  // Its own spin: phase and rate, so each flash is a smooth function of time.\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.6 + 3 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n  S.al[i] = Math.random() * PI;\n  S.sw[i] = Math.random() * 2 * PI;\n  S.vt[i] = 12 + 6 * Math.random();\n  S.sd[i] = seed;\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.al[i] = S.al[j];\n  S.sw[i] = S.sw[j];\n  S.vt[i] = S.vt[j];\n  S.sd[i] = S.sd[j];\n}\n\n// Where the stream comes down: a centre that wanders the width of the panel.\nconst pour = (T) => 32 + 20 * sin(T * 0.19) + 7 * sin(T * 0.47 + 1.3);\n\n// Moves the top grain of column a onto the top of column b.\nfunction slide(S, a, b) {\n  const h = S.h, G = S.G, from = (H - h[a]) * W + a;\n  h[b]++;\n  G[(H - h[b]) * W + b] = G[from];\n  G[from] = -1;\n  h[a]--;\n}\n\n// The heap settles like sand: wherever a column stands two or more grains\n// above its neighbour, grains slip from its top down onto the neighbour's, at\n// most three a step, so a wall slumps to the angle of repose within a few\n// frames and the slope can be seen running.\nfunction settle(S) {\n  const h = S.h, G = S.G;\n  S.dir = -S.dir;\n  for (let k = 0; k \u003c W - 1; k++) {\n    const x = S.dir > 0 ? k : W - 2 - k;\n    let d = h[x] - h[x + 1];\n    // Some steps hold at 45 degrees and some do not, which roughens the slopes.\n    const lim = Math.random() \u003c 0.5 ? 2 : 3;\n    if (d >= lim) for (let n = min(3, d >> 1); n > 0; n--) slide(S, x, x + 1);\n    else if (-d >= lim) for (let n = min(3, -d >> 1); n > 0; n--) slide(S, x + 1, x);\n  }\n  // An open floor lets the grains over the slot fall out of the bottom: the\n  // whole column sinks by one, so its glitter is seen running down.\n  if (S.drain)\n    for (let x = S.dx0; x \u003c= S.dx1; x++) {\n      if (h[x] \u003c= 0 || Math.random() > 0.8) continue;\n      for (let y = H - 1; y > H - h[x]; y--) G[y * W + x] = G[(y - 1) * W + x];\n      G[(H - h[x]) * W + x] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\n// Lands a falling flake on top of column cx.\nfunction land(S, cx, seed) {\n  if (S.h[cx] >= H - 1) return;\n  S.h[cx]++;\n  S.G[(H - S.h[cx]) * W + cx] = seed;\n  S.grains++;\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const T = S.T;\n  // The lamp drifts round the lower two thirds of the panel.\n  S.lx = 32 + 34 * sin(T * 0.29);\n  S.ly = 84 + 34 * sin(T * 0.21 + 0.7);\n  // Pouring: a little over half the glitter comes down in the stream, the\n  // rest is sprinkled across the whole width.\n  S.acc += st * 80 * S.amount;\n  const c = pour(T);\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    const x = Math.random() \u003c 0.55 ? c + (Math.random() + Math.random() - 1) * 9 : Math.random() * W;\n    spawn(S, cl(x, 0, W - 0.01), -2 * Math.random(), 0, 12, floor(Math.random() * NS));\n  }\n  // Glitter falls slowly, rocking from side to side on its way down.\n  const k = min(1, 1.5 * st), air = 3 * sin(T * 0.37);\n  for (let i = S.n - 1; i >= 0; i--) {\n    S.sw[i] += st * 2;\n    S.vy[i] += (S.vt[i] - S.vy[i]) * k;\n    S.vx[i] += (air + 5 * sin(S.sw[i]) - S.vx[i]) * k;\n    S.ph[i] += S.om[i] * st;\n    const oy = S.y[i];\n    let x = S.x[i] + S.vx[i] * st;\n    const y = oy + S.vy[i] * st;\n    if (x \u003c 0) (x = -x), (S.vx[i] = abs(S.vx[i]));\n    if (x >= W) (x = 2 * W - 0.01 - x), (S.vx[i] = -abs(S.vx[i]));\n    S.x[i] = x;\n    S.y[i] = y;\n    if (S.vy[i] \u003c= 0 || y \u003c 0) continue;\n    // It lands once it reaches the top of the heap in its column.\n    const cx = floor(x);\n    if (y >= H - S.h[cx] - 0.5) {\n      land(S, cx, S.sd[i]);\n      kill(S, i);\n    }\n  }\n  S.ca += st * 30;\n  while (S.ca >= 1) {\n    S.ca -= 1;\n    settle(S);\n  }\n  // A deep heap opens the floor under where the stream has been piling it;\n  // the floor closes once about half of it has run out or after twelve seconds.\n  // The slot widens with the pour so it always drains faster than it fills.\n  if (!S.drain && S.grains > HEAP) {\n    const m = round(cl(c, 12, W - 13)), w = round(4 + 2 * S.amount);\n    S.drain = 1;\n    S.dx0 = m - w;\n    S.dx1 = m + w;\n    S.dtime = 0;\n  } else if (S.drain) {\n    S.dtime += st;\n    if (S.grains \u003c LOW || S.dtime > 12) S.drain = 0;\n  }\n}\n\n// K1: the top layer of the heap leaps into the air.\nfunction burst(S) {\n  const G = S.G, h = S.h;\n  for (let x = 0; x \u003c W; x++)\n    for (let got = 0; got \u003c 6 && h[x] > 2; got++) {\n      const i = (H - h[x]) * W + x;\n      spawn(S, x + Math.random(), H - h[x] + Math.random(), (x - 32) * 0.4 + (Math.random() - 0.5) * 30, -75 - 95 * Math.random(), G[i]);\n      G[i] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.amount = cl(k[2], 1, 3);\n  S.size = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open on a heap already lying in dunes and the stream already falling.\n    for (let x = 0; x \u003c W; x++) {\n      const h = round(17 + 6 * sin(x * 0.09 + 1) + 4 * sin(x * 0.23));\n      for (let y = H - h; y \u003c H; y++) S.G[y * W + x] = floor(Math.random() * NS);\n      S.h[x] = h;\n      S.grains += h;\n    }\n    for (let i = 0; i \u003c 300; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, d * rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, base = S.base, fl = S.fl, G = S.G, lx = S.lx, ly = S.ly;\n  const hue = S.hue + 0.92;\n  for (let c = 0; c \u003c 4; c++) {\n    const p = PAL[c];\n    hsv(hue + p[0], p[1], p[2] * 255, base, c * 3);\n    hsv(hue + p[0], p[3], 255, fl, c * 3);\n  }\n  // A deep field, warmed a little round the lamp but kept under what an LED\n  // shows as lit, so every flake reads against black.\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) {\n      const g = 9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 1800);\n      buf[q] = (4 + g) * (0.4 + base[0] / 425);\n      buf[q + 1] = (3 + g) * (0.4 + base[1] / 425);\n      buf[q + 2] = (6 + g) * (0.4 + base[2] / 425);\n    }\n  // The heap: each grain its seed's colour, lit by the lamp and shaded with\n  // depth. A grain glints when its tilt sends the lamp to the eye: the tilt\n  // needed changes across the heap and the lamp moves, so the glints travel.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = H - S.h[x]; y \u003c H; y++) {\n      const i = y * W + x, g = G[i];\n      if (g \u003c 0) continue;\n      // Silver grains in the heap take the light tint: grey ones read as grit.\n      const dep = y - H + S.h[x], ex = x - lx, ey = y - ly, c = CLS[g] * 3, cb = c === 9 ? 3 : c;\n      const lamp = 0.6 + 0.5 * exp(-(ex * ex + ey * ey) / 900);\n      const v = (0.6 + 0.25 * JIT[g]) * lamp * (dep \u003c 1 ? 1.25 : max(0.6, 1 - 0.01 * dep));\n      const hx = TX[g] - ex * 0.0105, hy = TY[g] - ey * 0.0105;\n      const gl = exp(-(hx * hx + hy * hy) / 0.016) * (dep \u003c 6 ? 1 : 0.6);\n      const q = i * 3;\n      buf[q] += base[cb] * v + fl[c] * gl * 1.4;\n      buf[q + 1] += base[cb + 1] * v + fl[c + 1] * gl * 1.4;\n      buf[q + 2] += base[cb + 2] * v + fl[c + 2] * gl * 1.4;\n      if (gl > 0.35) star(buf, x + 0.5, y + 0.5, fl, c, gl * 0.8, 1 + S.size * 2);\n    }\n  // The falling flakes: a hexagon turned in the plane and thinned as it\n  // tumbles, flashing when its face swings through the angle that sends the\n  // lamp's light to the eye: once a turn, the back being matt.\n  const r0 = 0.55 + 1.05 * S.size;\n  for (let i = 0; i \u003c S.n; i++) {\n    const x = S.x[i], y = S.y[i];\n    if (y \u003c -3 || y > H + 3) continue;\n    const g = S.sd[i], c = CLS[g] * 3, a = S.ph[i];\n    const sq = max(0.22, abs(cos(a))), f = exp((cos(a - (x - lx) * 0.006 - (y - ly) * 0.003) - 1) / 0.035);\n    // A big flake is dimmer per LED, so a heavy stream of them does not burn white.\n    const r = r0 * (0.8 + 0.4 * JIT[g]), v = ((0.5 + 0.35 * JIT[g]) * (0.55 + 0.45 * sq)) / (0.7 + 0.3 * r0);\n    const ca = cos(S.al[i]), sa = sin(S.al[i]), e = r + 1.2;\n    // Small flakes keep their light when they land between LEDs.\n    const norm = r \u003c 1 ? 1.15 / (0.35 + r) : 1;\n    for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n      for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n        const px = X + 0.5 - x, py = Y + 0.5 - y;\n        const u = abs(px * ca + py * sa) / sq, w = abs(py * ca - px * sa);\n        const dh = max(w, w * 0.5 + u * 0.866) - r;\n        const cov = cl(0.5 - dh, 0, 1) * norm;\n        if (cov \u003c= 0) continue;\n        const q = (Y * W + X) * 3, b = cov * v, h = (cov * f * 1.5) / (0.6 + 0.4 * r0);\n        buf[q] += base[c] * b + fl[c] * h;\n        buf[q + 1] += base[c + 1] * b + fl[c + 1] * h;\n        buf[q + 2] += base[c + 2] * b + fl[c + 2] * h;\n      }\n    if (f > 0.3) star(buf, x, y, fl, c, f, 1.5 + r0 * 1.5);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// A flash spills its light into a four-pointed star round the flake, the arms\n// fading out over len LEDs, with a breath on the diagonals.\nfunction star(buf, x, y, fl, c, f, len) {\n  const cx = floor(x), cy = floor(y), n = Math.ceil(len);\n  for (let k = 1; k \u003c= n; k++) {\n    const w = f * 0.75 * (1 - (k - 1) / (len + 0.5)) ** 2;\n    if (w \u003c= 0.01) break;\n    add(buf, cx + k, cy, fl, c, w);\n    add(buf, cx - k, cy, fl, c, w);\n    add(buf, cx, cy + k, fl, c, w);\n    add(buf, cx, cy - k, fl, c, w);\n  }\n  const dw = f * 0.22;\n  add(buf, cx + 1, cy + 1, fl, c, dw);\n  add(buf, cx - 1, cy + 1, fl, c, dw);\n  add(buf, cx + 1, cy - 1, fl, c, dw);\n  add(buf, cx - 1, cy - 1, fl, c, dw);\n}\nfunction add(buf, x, y, fl, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const q = (y * W + x) * 3;\n  buf[q] += fl[c] * w;\n  buf[q + 1] += fl[c + 1] * w;\n  buf[q + 2] += fl[c + 2] * w;\n}\n\n// Bright pile-ups roll off toward white instead of clipping flat.\nfunction knee(v) {\n  return v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65);\n}\n","layer":{"id":"layer-glitter-fall","type":"code","name":"glitter-fall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glitter Fall\n// Family:  cosmetic\n// Idea:    Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after loose cosmetic glitter poured under a display lamp\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1\n//\n// Knob 1: Hue. The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall.\n// Knob 2: Speed. How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower.\n// Knob 3: Amount. How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast.\n// Knob 4: Size. The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble.\n// Buttons: K1 tap throws the top of the heap up into the air, and it flashes all the way back down.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, abs, sqrt, log, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Every flake carries one of NS seeds, which fix its colour class, how it lies\n// once it has landed and how bright it is. A grain in the heap keeps its seed,\n// so the heap's texture and glints stay put while the lamp moves.\nconst NS = 1024;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst TX = new Float32Array(NS), TY = new Float32Array(NS), JIT = new Float32Array(NS), CLS = new Uint8Array(NS);\nfor (let i = 0; i \u003c NS; i++) {\n  // A landed flake lies roughly flat: its tilt is a small Gaussian.\n  const r = sqrt(-2 * log(hash(i * 4) + 1e-6)) * 0.3, a = 2 * PI * hash(i * 4 + 1);\n  TX[i] = r * cos(a);\n  TY[i] = r * sin(a);\n  JIT[i] = hash(i * 4 + 2);\n  const c = hash(i * 4 + 3);\n  // Main colour, a lighter tint, a deeper shade, and silver.\n  CLS[i] = c \u003c 0.5 ? 0 : c \u003c 0.7 ? 1 : c \u003c 0.85 ? 2 : 3;\n}\n// Hue offset, saturation and value of each class, and how much of the hue a\n// flash keeps. Silver keeps a breath of the hue so it sits in the same mix.\nconst PAL = [\n  [0, 0.85, 0.8, 0.45],\n  [-0.03, 0.55, 0.95, 0.35],\n  [0.03, 1, 0.65, 0.55],\n  [0, 0.1, 0.5, 0.08],\n];\n\n// The heap's grains sit one to an LED, stacked in columns from the floor up.\n// HEAP is how many grains make the floor open, LOW how many it keeps.\nconst HEAP = 2600, LOW = 1150;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), ph: F(MAXP), om: F(MAXP), al: F(MAXP), sw: F(MAXP), vt: F(MAXP), sd: new Uint16Array(MAXP),\n    n: 0, G: new Int16Array(N).fill(-1), h: new Int16Array(W), grains: 0, T: 0, acc: 0, ca: 0, dir: 1,\n    drain: 0, dx0: 0, dx1: 0, dtime: 0, started: false,\n    buf: F(N * 3), base: F(12), fl: F(12), hue: 0, amount: 1, size: 0.06, lx: 32, ly: 80,\n  };\n}\n\n// One flake into the air at x, y.\nfunction spawn(S, x, y, vx, vy, seed) {\n  if (S.n >= MAXP) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  // Its own spin: phase and rate, so each flash is a smooth function of time.\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.6 + 3 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n  S.al[i] = Math.random() * PI;\n  S.sw[i] = Math.random() * 2 * PI;\n  S.vt[i] = 12 + 6 * Math.random();\n  S.sd[i] = seed;\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.al[i] = S.al[j];\n  S.sw[i] = S.sw[j];\n  S.vt[i] = S.vt[j];\n  S.sd[i] = S.sd[j];\n}\n\n// Where the stream comes down: a centre that wanders the width of the panel.\nconst pour = (T) => 32 + 20 * sin(T * 0.19) + 7 * sin(T * 0.47 + 1.3);\n\n// Moves the top grain of column a onto the top of column b.\nfunction slide(S, a, b) {\n  const h = S.h, G = S.G, from = (H - h[a]) * W + a;\n  h[b]++;\n  G[(H - h[b]) * W + b] = G[from];\n  G[from] = -1;\n  h[a]--;\n}\n\n// The heap settles like sand: wherever a column stands two or more grains\n// above its neighbour, grains slip from its top down onto the neighbour's, at\n// most three a step, so a wall slumps to the angle of repose within a few\n// frames and the slope can be seen running.\nfunction settle(S) {\n  const h = S.h, G = S.G;\n  S.dir = -S.dir;\n  for (let k = 0; k \u003c W - 1; k++) {\n    const x = S.dir > 0 ? k : W - 2 - k;\n    let d = h[x] - h[x + 1];\n    // Some steps hold at 45 degrees and some do not, which roughens the slopes.\n    const lim = Math.random() \u003c 0.5 ? 2 : 3;\n    if (d >= lim) for (let n = min(3, d >> 1); n > 0; n--) slide(S, x, x + 1);\n    else if (-d >= lim) for (let n = min(3, -d >> 1); n > 0; n--) slide(S, x + 1, x);\n  }\n  // An open floor lets the grains over the slot fall out of the bottom: the\n  // whole column sinks by one, so its glitter is seen running down.\n  if (S.drain)\n    for (let x = S.dx0; x \u003c= S.dx1; x++) {\n      if (h[x] \u003c= 0 || Math.random() > 0.8) continue;\n      for (let y = H - 1; y > H - h[x]; y--) G[y * W + x] = G[(y - 1) * W + x];\n      G[(H - h[x]) * W + x] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\n// Lands a falling flake on top of column cx.\nfunction land(S, cx, seed) {\n  if (S.h[cx] >= H - 1) return;\n  S.h[cx]++;\n  S.G[(H - S.h[cx]) * W + cx] = seed;\n  S.grains++;\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const T = S.T;\n  // The lamp drifts round the lower two thirds of the panel.\n  S.lx = 32 + 34 * sin(T * 0.29);\n  S.ly = 84 + 34 * sin(T * 0.21 + 0.7);\n  // Pouring: a little over half the glitter comes down in the stream, the\n  // rest is sprinkled across the whole width.\n  S.acc += st * 80 * S.amount;\n  const c = pour(T);\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    const x = Math.random() \u003c 0.55 ? c + (Math.random() + Math.random() - 1) * 9 : Math.random() * W;\n    spawn(S, cl(x, 0, W - 0.01), -2 * Math.random(), 0, 12, floor(Math.random() * NS));\n  }\n  // Glitter falls slowly, rocking from side to side on its way down.\n  const k = min(1, 1.5 * st), air = 3 * sin(T * 0.37);\n  for (let i = S.n - 1; i >= 0; i--) {\n    S.sw[i] += st * 2;\n    S.vy[i] += (S.vt[i] - S.vy[i]) * k;\n    S.vx[i] += (air + 5 * sin(S.sw[i]) - S.vx[i]) * k;\n    S.ph[i] += S.om[i] * st;\n    const oy = S.y[i];\n    let x = S.x[i] + S.vx[i] * st;\n    const y = oy + S.vy[i] * st;\n    if (x \u003c 0) (x = -x), (S.vx[i] = abs(S.vx[i]));\n    if (x >= W) (x = 2 * W - 0.01 - x), (S.vx[i] = -abs(S.vx[i]));\n    S.x[i] = x;\n    S.y[i] = y;\n    if (S.vy[i] \u003c= 0 || y \u003c 0) continue;\n    // It lands once it reaches the top of the heap in its column.\n    const cx = floor(x);\n    if (y >= H - S.h[cx] - 0.5) {\n      land(S, cx, S.sd[i]);\n      kill(S, i);\n    }\n  }\n  S.ca += st * 30;\n  while (S.ca >= 1) {\n    S.ca -= 1;\n    settle(S);\n  }\n  // A deep heap opens the floor under where the stream has been piling it;\n  // the floor closes once about half of it has run out or after twelve seconds.\n  // The slot widens with the pour so it always drains faster than it fills.\n  if (!S.drain && S.grains > HEAP) {\n    const m = round(cl(c, 12, W - 13)), w = round(4 + 2 * S.amount);\n    S.drain = 1;\n    S.dx0 = m - w;\n    S.dx1 = m + w;\n    S.dtime = 0;\n  } else if (S.drain) {\n    S.dtime += st;\n    if (S.grains \u003c LOW || S.dtime > 12) S.drain = 0;\n  }\n}\n\n// K1: the top layer of the heap leaps into the air.\nfunction burst(S) {\n  const G = S.G, h = S.h;\n  for (let x = 0; x \u003c W; x++)\n    for (let got = 0; got \u003c 6 && h[x] > 2; got++) {\n      const i = (H - h[x]) * W + x;\n      spawn(S, x + Math.random(), H - h[x] + Math.random(), (x - 32) * 0.4 + (Math.random() - 0.5) * 30, -75 - 95 * Math.random(), G[i]);\n      G[i] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.amount = cl(k[2], 1, 3);\n  S.size = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open on a heap already lying in dunes and the stream already falling.\n    for (let x = 0; x \u003c W; x++) {\n      const h = round(17 + 6 * sin(x * 0.09 + 1) + 4 * sin(x * 0.23));\n      for (let y = H - h; y \u003c H; y++) S.G[y * W + x] = floor(Math.random() * NS);\n      S.h[x] = h;\n      S.grains += h;\n    }\n    for (let i = 0; i \u003c 300; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, d * rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, base = S.base, fl = S.fl, G = S.G, lx = S.lx, ly = S.ly;\n  const hue = S.hue + 0.92;\n  for (let c = 0; c \u003c 4; c++) {\n    const p = PAL[c];\n    hsv(hue + p[0], p[1], p[2] * 255, base, c * 3);\n    hsv(hue + p[0], p[3], 255, fl, c * 3);\n  }\n  // A deep field, warmed a little round the lamp but kept under what an LED\n  // shows as lit, so every flake reads against black.\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) {\n      const g = 9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 1800);\n      buf[q] = (4 + g) * (0.4 + base[0] / 425);\n      buf[q + 1] = (3 + g) * (0.4 + base[1] / 425);\n      buf[q + 2] = (6 + g) * (0.4 + base[2] / 425);\n    }\n  // The heap: each grain its seed's colour, lit by the lamp and shaded with\n  // depth. A grain glints when its tilt sends the lamp to the eye: the tilt\n  // needed changes across the heap and the lamp moves, so the glints travel.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = H - S.h[x]; y \u003c H; y++) {\n      const i = y * W + x, g = G[i];\n      if (g \u003c 0) continue;\n      // Silver grains in the heap take the light tint: grey ones read as grit.\n      const dep = y - H + S.h[x], ex = x - lx, ey = y - ly, c = CLS[g] * 3, cb = c === 9 ? 3 : c;\n      const lamp = 0.6 + 0.5 * exp(-(ex * ex + ey * ey) / 900);\n      const v = (0.6 + 0.25 * JIT[g]) * lamp * (dep \u003c 1 ? 1.25 : max(0.6, 1 - 0.01 * dep));\n      const hx = TX[g] - ex * 0.0105, hy = TY[g] - ey * 0.0105;\n      const gl = exp(-(hx * hx + hy * hy) / 0.016) * (dep \u003c 6 ? 1 : 0.6);\n      const q = i * 3;\n      buf[q] += base[cb] * v + fl[c] * gl * 1.4;\n      buf[q + 1] += base[cb + 1] * v + fl[c + 1] * gl * 1.4;\n      buf[q + 2] += base[cb + 2] * v + fl[c + 2] * gl * 1.4;\n      if (gl > 0.35) star(buf, x + 0.5, y + 0.5, fl, c, gl * 0.8, 1 + S.size * 2);\n    }\n  // The falling flakes: a hexagon turned in the plane and thinned as it\n  // tumbles, flashing when its face swings through the angle that sends the\n  // lamp's light to the eye: once a turn, the back being matt.\n  const r0 = 0.55 + 1.05 * S.size;\n  for (let i = 0; i \u003c S.n; i++) {\n    const x = S.x[i], y = S.y[i];\n    if (y \u003c -3 || y > H + 3) continue;\n    const g = S.sd[i], c = CLS[g] * 3, a = S.ph[i];\n    const sq = max(0.22, abs(cos(a))), f = exp((cos(a - (x - lx) * 0.006 - (y - ly) * 0.003) - 1) / 0.035);\n    // A big flake is dimmer per LED, so a heavy stream of them does not burn white.\n    const r = r0 * (0.8 + 0.4 * JIT[g]), v = ((0.5 + 0.35 * JIT[g]) * (0.55 + 0.45 * sq)) / (0.7 + 0.3 * r0);\n    const ca = cos(S.al[i]), sa = sin(S.al[i]), e = r + 1.2;\n    // Small flakes keep their light when they land between LEDs.\n    const norm = r \u003c 1 ? 1.15 / (0.35 + r) : 1;\n    for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n      for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n        const px = X + 0.5 - x, py = Y + 0.5 - y;\n        const u = abs(px * ca + py * sa) / sq, w = abs(py * ca - px * sa);\n        const dh = max(w, w * 0.5 + u * 0.866) - r;\n        const cov = cl(0.5 - dh, 0, 1) * norm;\n        if (cov \u003c= 0) continue;\n        const q = (Y * W + X) * 3, b = cov * v, h = (cov * f * 1.5) / (0.6 + 0.4 * r0);\n        buf[q] += base[c] * b + fl[c] * h;\n        buf[q + 1] += base[c + 1] * b + fl[c + 1] * h;\n        buf[q + 2] += base[c + 2] * b + fl[c + 2] * h;\n      }\n    if (f > 0.3) star(buf, x, y, fl, c, f, 1.5 + r0 * 1.5);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// A flash spills its light into a four-pointed star round the flake, the arms\n// fading out over len LEDs, with a breath on the diagonals.\nfunction star(buf, x, y, fl, c, f, len) {\n  const cx = floor(x), cy = floor(y), n = Math.ceil(len);\n  for (let k = 1; k \u003c= n; k++) {\n    const w = f * 0.75 * (1 - (k - 1) / (len + 0.5)) ** 2;\n    if (w \u003c= 0.01) break;\n    add(buf, cx + k, cy, fl, c, w);\n    add(buf, cx - k, cy, fl, c, w);\n    add(buf, cx, cy + k, fl, c, w);\n    add(buf, cx, cy - k, fl, c, w);\n  }\n  const dw = f * 0.22;\n  add(buf, cx + 1, cy + 1, fl, c, dw);\n  add(buf, cx - 1, cy + 1, fl, c, dw);\n  add(buf, cx + 1, cy - 1, fl, c, dw);\n  add(buf, cx - 1, cy - 1, fl, c, dw);\n}\nfunction add(buf, x, y, fl, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const q = (y * W + x) * 3;\n  buf[q] += fl[c] * w;\n  buf[q + 1] += fl[c + 1] * w;\n  buf[q + 2] += fl[c + 2] * w;\n}\n\n// Bright pile-ups roll off toward white instead of clipping flat.\nfunction knee(v) {\n  return v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower."},{"name":"Amount","min":1,"max":3,"about":"How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast."},{"name":"Size","min":0,"max":1,"about":"The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble."}],"start":[0,2,1,0.06],"measures":{"motion":1.3817,"detail":0.0894,"edges":0.4622,"complexity":1.3664,"coverage":0.3835,"colour":0.1675,"drift":0.0908},"knobResponse":[0.0974,0.131,0.1719,0.0961]},{"slug":"glyph-rain","title":"Glyph Rain","family":"type","round":1,"note":"3×5 글자가 줄마다 떨어지며 바뀌어요. 비가 지나간 글자는 옛 단말기의 초록 형광처럼 몇 초 남아 흐려져서, 아무 말도 하지 않는 글이 화면을 채워요.","idea":"Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.","buttons":"K4 tap switches between small glyphs and double-size ones.","code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-glyph-rain","type":"code","name":"glyph-rain","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rain around the colour wheel from phosphor green; the heads stay close to white."},{"name":"Fall","min":0.3,"max":6,"about":"How fast the columns fall, each at its own pace around this one."},{"name":"Density","min":0,"max":1,"about":"How many columns run and how long their tails hang, up to a full wall of text."},{"name":"Mutate","min":0,"max":1,"about":"How often a glyph already written turns into another; turned all the way, the whole wall boils."}],"start":[0,2,0,0.06],"measures":{"motion":0.2257,"detail":0.0998,"edges":0.7469,"complexity":0.2343,"coverage":0.2152,"colour":0.1998,"drift":0.0956},"knobResponse":[0.0655,0.0718,0.1045,0.0664]},{"slug":"gold-leaf","title":"Gold Leaf","family":"cosmetic","round":33,"note":"맑은 세럼에 구겨진 금박 조각 마흔 개가 떠서 위아래 두 대류 칸을 따라 천천히 돌 뿐 가라앉지 않아요. 조각이 뒤집힐 때마다 빛을 향한 면이 흰 금빛으로 번쩍이고 돌아선 면은 짙은 금으로 내려가며, 먼 조각은 작고 흐려요. K1 은 색상환을 다 돌아 금박을 장밋빛 금이나 푸른 박으로 바꾸고, 누르면 세럼을 저어 조각이 느린 소용돌이로 돌며 다섯 배 빨리 뒤집혀요.","idea":"Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.","buttons":"K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.","code":"// ===== Patternflow pattern =====\n// Title:   Gold Leaf\n// Family:  cosmetic\n// Idea:    Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a serum with flakes of gold leaf floating in it\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1\n//\n// Knob 1: Hue. Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown.\n// Knob 2: Speed. How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Flakes. How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil.\n// Knob 4: Size. How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one.\n// Buttons: K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXF = 120, SS = 3;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// The light: from the upper left and in front. Y runs down the panel, the\n// viewer looks along -z.\nconst LX = -0.4, LY = -0.7, LZ = 0.6, LN = sqrt(LX * LX + LY * LY + LZ * LZ);\nconst L = [LX / LN, LY / LN, LZ / LN];\nconst HV = [L[0], L[1], L[2] + 1], HN = sqrt(HV[0] ** 2 + HV[1] ** 2 + HV[2] ** 2);\nconst HH = [HV[0] / HN, HV[1] / HN, HV[2] / HN];\n\n// A torn flake: 6 to 9 points round a ragged outline, each pushed up or down\n// a little, fanned from an off-centre middle point into facets. The heights\n// are the crumple: every facet tilts its own way.\nfunction makeFlake() {\n  const rnd = Math.random, k = 6 + floor(rnd() * 4), e = 0.6 + 0.4 * rnd(), ea = rnd() * PI;\n  const v = [(rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3];\n  for (let i = 0; i \u003c k; i++) {\n    const a = (2 * PI * (i + 0.7 * (rnd() - 0.5))) / k, r = 0.55 + 0.45 * rnd();\n    const x = r * cos(a), y = r * sin(a) * e;\n    v.push(x * cos(ea) - y * sin(ea), x * sin(ea) + y * cos(ea), (rnd() - 0.5) * 0.8);\n  }\n  const nrm = [];\n  for (let i = 0; i \u003c k; i++) {\n    const a = 1 + i, b = 1 + ((i + 1) % k);\n    const ux = v[a * 3] - v[0], uy = v[a * 3 + 1] - v[1], uz = v[a * 3 + 2] - v[2];\n    const wx = v[b * 3] - v[0], wy = v[b * 3 + 1] - v[1], wz = v[b * 3 + 2] - v[2];\n    let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n    const l = sqrt(nx * nx + ny * ny + nz * nz) || 1;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    nrm.push(nx / l, ny / l, nz / l);\n  }\n  const ax = rnd() - 0.5, ay = rnd() - 0.5, az = rnd() - 0.5, al = sqrt(ax * ax + ay * ay + az * az) || 1;\n  const q0 = [rnd() - 0.5, rnd() - 0.5, rnd() - 0.5, rnd() - 0.5], ql = sqrt(q0.reduce((s, c) => s + c * c, 0)) || 1;\n  return {\n    k, v: new Float32Array(v), n: new Float32Array(nrm),\n    x: 3 + rnd() * (W - 6), y: 3 + rnd() * (H - 6), z: rnd(), sz: 0.75 + 0.5 * rnd(),\n    q: q0.map((c) => c / ql), axis: [ax / al, ay / al, az / al], spin: (0.5 + rnd()) * (rnd() \u003c 0.5 ? -1 : 1), ph: rnd() * 2 * PI,\n  };\n}\n\nexport function setup(params) {\n  const flakes = [];\n  for (let i = 0; i \u003c MAXF; i++) flakes.push(makeFlake());\n  params.s = {\n    flakes, t: 0, stir: 0, stirT: -1, hue: 0, count: 40, size: 0.06,\n    far: new Float32Array(N * 4), tmp: new Float32Array(N * 4), frame: new Float32Array(N * 3),\n    sub: new Int16Array(64 * 64 * SS * SS), lut: new Float32Array(256 * 3), lutHue: NaN, serum: [],\n  };\n}\n\n// The current: two slow convection cells stacked in the panel, from the\n// stream function sin(pi x/W) sin(2 pi y/H), which is zero on all four walls,\n// so the flakes go round and never leave. A weaker mode of smaller cells\n// swells and fades over a minute, so no flake runs the same loop twice.\n// Nothing pulls them down: the flakes float, they never settle.\nfunction flow(x, y, t, out) {\n  const X = (PI * x) / W, Y = (2 * PI * y) / H, s = 0.35 * sin(t * 0.11);\n  out[0] = sin(X) * cos(Y) + s * sin(2 * X) * 1.5 * cos(1.5 * Y) * 0.5;\n  out[1] = -cos(X) * sin(Y) - s * 2 * cos(2 * X) * sin(1.5 * Y) * 0.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 40, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.hue = k[0];\n  P.count = floor(cl(k[2], 40, 120));\n  P.size = cl(k[3], 0, 1);\n  P.t += d;\n  if (input.btnPressed && input.btnPressed[0]) P.stirT = 0;\n  // The stir: a second to wind up, then it dies away over about eight.\n  if (P.stirT >= 0) {\n    P.stirT += d;\n    P.stir = P.stirT \u003c 1 ? sm(0, 1, P.stirT) : exp(-(P.stirT - 1) / 3.5);\n    if (P.stirT > 20) (P.stirT = -1), (P.stir = 0);\n  }\n  const v = [0, 0], S = P.stir;\n  for (let i = 0; i \u003c MAXF; i++) {\n    const f = P.flakes[i];\n    flow(f.x, f.y, P.t, v);\n    // Near flakes move faster across the panel than far ones.\n    const par = 0.6 + 0.6 * f.z, sp = 2.6 * par;\n    let vx = v[0] * sp + 0.4 * sin(P.t * 0.5 + f.ph), vy = v[1] * sp + 0.4 * cos(P.t * 0.37 + f.ph * 1.3);\n    if (S > 0) {\n      // The vortex runs round ellipses the shape of the panel, fastest\n      // half way out, so the flakes swing round without piling on a wall.\n      const ex = (f.x - W / 2) / (W / 2), ey = (f.y - H / 2) / (H / 2), r = sqrt(ex * ex + ey * ey);\n      const g = S * 1.6 * cl(1.15 - r, 0, 1) * par;\n      vx += g * -0.5 * (f.y - H / 2);\n      vy += g * 2 * (f.x - W / 2);\n    }\n    f.x = cl(f.x + vx * d, 1, W - 2);\n    f.y = cl(f.y + vy * d, 1, H - 2);\n    // Tumble: turn about the flake's own axis, which wanders slowly.\n    const ang = f.spin * (1 + 4 * S) * d, a = f.axis;\n    a[0] += 0.3 * sin(P.t * 0.23 + f.ph) * d;\n    a[1] += 0.3 * cos(P.t * 0.19 + f.ph * 2) * d;\n    const al = sqrt(a[0] * a[0] + a[1] * a[1] + a[2] * a[2]);\n    a[0] /= al;\n    a[1] /= al;\n    a[2] /= al;\n    const sh = sin(ang / 2), ch = cos(ang / 2), dq = [ch, a[0] * sh, a[1] * sh, a[2] * sh], q = f.q;\n    const n0 = dq[0] * q[0] - dq[1] * q[1] - dq[2] * q[2] - dq[3] * q[3];\n    const n1 = dq[0] * q[1] + dq[1] * q[0] + dq[2] * q[3] - dq[3] * q[2];\n    const n2 = dq[0] * q[2] - dq[1] * q[3] + dq[2] * q[0] + dq[3] * q[1];\n    const n3 = dq[0] * q[3] + dq[1] * q[2] - dq[2] * q[1] + dq[3] * q[0];\n    const ql = sqrt(n0 * n0 + n1 * n1 + n2 * n2 + n3 * n3);\n    q[0] = n0 / ql;\n    q[1] = n1 / ql;\n    q[2] = n2 / ql;\n    q[3] = n3 / ql;\n  }\n}\n\n// The foil's colour against its light, 0 to 1.3 over 256 steps: deep, gold,\n// pale gold, white-gold.\nfunction buildLut(P) {\n  const h = P.hue + 0.115 - floor(P.hue + 0.115);\n  // Round orange and yellow the deep end stays bright and saturated so it\n  // reads as dark gold, not brown; round red and pink the foil is paler, rose\n  // gold rather than red.\n  const warm = sm(0.0, 0.05, h) * (1 - sm(0.17, 0.24, h)), rose = 1 - sm(0.02, 0.07, abs(h - 0.995 + (h \u003c 0.5 ? 1 : 0)));\n  const sat = 1 - 0.4 * rose, lift = max(warm, rose);\n  const stops = [\n    [0, hsv(h - 0.025, 0.95 * sat, 0.4 + 0.18 * lift)],\n    [0.35, hsv(h - 0.01, 0.88 * sat, 0.72 + 0.12 * lift)],\n    [0.7, hsv(h + 0.005, 0.68 * sat, 1)],\n    [1.0, hsv(h + 0.01, 0.34 * sat, 1)],\n    [1.3, hsv(h + 0.01, 0.06, 1)],\n  ];\n  for (let i = 0; i \u003c 256; i++) {\n    const b = (i / 255) * 1.3;\n    let j = 0;\n    while (j \u003c stops.length - 2 && b > stops[j + 1][0]) j++;\n    const [b0, c0] = stops[j], [b1, c1] = stops[j + 1], f = cl((b - b0) / (b1 - b0), 0, 1);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = (c0[c] + (c1[c] - c0[c]) * f) * 255;\n  }\n  // The serum: the foil's hue, faint and greyed, lighter at the top.\n  const top = hsv(h - 0.02, (0.5 - 0.2 * warm) * sat, 0.11), bot = hsv(h - 0.02, (0.6 - 0.2 * warm) * sat, 0.025);\n  const lit = hsv(h + 0.01, 0.3 * sat, 1);\n  P.serum = [top[0] * 255, top[1] * 255, top[2] * 255, bot[0] * 255, bot[1] * 255, bot[2] * 255, lit[0] * 255, lit[1] * 255, lit[2] * 255];\n  P.lutHue = P.hue;\n}\n\nconst rot = new Float32Array(9);\nfunction quatMat(q) {\n  const [w, x, y, z] = q;\n  rot[0] = 1 - 2 * (y * y + z * z); rot[1] = 2 * (x * y - w * z); rot[2] = 2 * (x * z + w * y);\n  rot[3] = 2 * (x * y + w * z); rot[4] = 1 - 2 * (x * x + z * z); rot[5] = 2 * (y * z - w * x);\n  rot[6] = 2 * (x * z - w * y); rot[7] = 2 * (y * z + w * x); rot[8] = 1 - 2 * (x * x + y * y);\n}\n\nconst PX = new Float32Array(10 * 3), FC = new Float32Array(9 * 4), ORD = [];\n\n// One flake into buffer buf (RGB, or RGBA premultiplied when far), over what\n// is there. Each LED takes 3 x 3 samples, 2 x 2 on a big flake; a facet\n// nearer the viewer covers the ones behind it, and the share of samples a\n// flake covers is how much of the LED it takes.\nfunction drawFlake(P, f, buf, rgba, dim, glints) {\n  quatMat(f.q);\n  const s = (6.5 + 6 * P.size) * f.sz * (0.5 + 0.7 * f.z), k = f.k, v = f.v, n = f.n, lut = P.lut;\n  let x0 = W, x1 = 0, y0 = H, y1 = 0;\n  for (let i = 0; i \u003c= k; i++) {\n    const a = v[i * 3], b = v[i * 3 + 1], c = v[i * 3 + 2];\n    const X = f.x + s * (rot[0] * a + rot[1] * b + rot[2] * c), Y = f.y + s * (rot[3] * a + rot[4] * b + rot[5] * c);\n    PX[i * 3] = X;\n    PX[i * 3 + 1] = Y;\n    PX[i * 3 + 2] = rot[6] * a + rot[7] * b + rot[8] * c;\n    x0 = min(x0, X);\n    x1 = max(x1, X);\n    y0 = min(y0, Y);\n    y1 = max(y1, Y);\n  }\n  // Big flakes need fewer samples to an LED for the same smooth edge.\n  const ss = s > 7 ? 2 : SS;\n  const bx = max(0, floor(x0)), by = max(0, floor(y0)), bw = min(W, floor(x1) + 1) - bx, bh = min(H, floor(y1) + 1) - by;\n  if (bw \u003c= 0 || bh \u003c= 0 || bw > 64 || bh > 64) return;\n  const sw = bw * ss, sub = P.sub;\n  sub.fill(-1, 0, sw * bh * ss);\n  ORD.length = 0;\n  for (let i = 0; i \u003c k; i++) {\n    // The facet's normal turned with the flake, towards the viewer: foil\n    // shines from both faces.\n    const a = n[i * 3], b = n[i * 3 + 1], c = n[i * 3 + 2];\n    let nx = rot[0] * a + rot[1] * b + rot[2] * c, ny = rot[3] * a + rot[4] * b + rot[5] * c, nz = rot[6] * a + rot[7] * b + rot[8] * c;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    const spec = max(0, nx * HH[0] + ny * HH[1] + nz * HH[2]) ** 18, diff = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n    // A little base light, the lamp's diffuse share, the glow of the serum\n    // above for facets tipped up, and a narrow highlight, cos^18, half\n    // strength 16 degrees off the mirror angle: a facet flashes as it\n    // sweeps through and its neighbours, tilted their own ways, stay deep.\n    const env = 0.5 - 0.5 * ny;\n    const br = (0.1 + 0.45 * diff + 0.25 * env + 0.95 * spec) * dim;\n    FC[i * 4] = cl(floor((br / 1.3) * 255), 0, 255);\n    FC[i * 4 + 1] = spec;\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    FC[i * 4 + 2] = (PX[2] + PX[j1 * 3 + 2] + PX[j2 * 3 + 2]) / 3;\n    ORD.push(i);\n  }\n  ORD.sort((a, b) => FC[a * 4 + 2] - FC[b * 4 + 2]);\n  for (const i of ORD) {\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    const ax = PX[0], ay = PX[1], bxx = PX[j1 * 3], byy = PX[j1 * 3 + 1], cx = PX[j2 * 3], cy = PX[j2 * 3 + 1];\n    const area = (bxx - ax) * (cy - ay) - (byy - ay) * (cx - ax);\n    if (abs(area) \u003c 1e-4) continue;\n    const sg = area > 0 ? 1 : -1;\n    const sx0 = max(0, floor((min(ax, bxx, cx) - bx) * ss)), sx1 = min(sw - 1, floor((max(ax, bxx, cx) - bx) * ss));\n    const sy0 = max(0, floor((min(ay, byy, cy) - by) * ss)), sy1 = min(bh * ss - 1, floor((max(ay, byy, cy) - by) * ss));\n    for (let sy = sy0; sy \u003c= sy1; sy++) {\n      const py = by + (sy + 0.5) / ss;\n      for (let sx = sx0; sx \u003c= sx1; sx++) {\n        const px = bx + (sx + 0.5) / ss;\n        const e0 = ((bxx - ax) * (py - ay) - (byy - ay) * (px - ax)) * sg;\n        const e1 = ((cx - bxx) * (py - byy) - (cy - byy) * (px - bxx)) * sg;\n        const e2 = ((ax - cx) * (py - cy) - (ay - cy) * (px - cx)) * sg;\n        if (e0 >= 0 && e1 >= 0 && e2 >= 0) sub[sy * sw + sx] = i;\n      }\n    }\n    if (glints && FC[i * 4 + 1] > 0.6) glints.push((ax + bxx + cx) / 3, (ay + byy + cy) / 3, FC[i * 4 + 1]);\n  }\n  for (let y = 0; y \u003c bh; y++)\n    for (let x = 0; x \u003c bw; x++) {\n      let r = 0, g = 0, b = 0, c = 0;\n      for (let u = 0; u \u003c ss; u++)\n        for (let w = 0; w \u003c ss; w++) {\n          const i = sub[(y * ss + u) * sw + x * ss + w];\n          if (i \u003c 0) continue;\n          const li = FC[i * 4] * 3;\n          r += lut[li];\n          g += lut[li + 1];\n          b += lut[li + 2];\n          c++;\n        }\n      if (!c) continue;\n      const al = c / (ss * ss), p = (by + y) * W + bx + x;\n      if (rgba) {\n        const o = p * 4;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n        buf[o + 3] = buf[o + 3] * (1 - al) + al;\n      } else {\n        const o = p * 3;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const fr = P.frame, far = P.far, tmp = P.tmp, t = P.t, sv = P.serum;\n  // The serum: a soft gradient and a slow caustic shimmer that fades with\n  // depth, light let in from the top.\n  const colw = P.colw || (P.colw = new Float32Array(W));\n  for (let x = 0; x \u003c W; x++) colw[x] = 1.5 * sin(x * 0.17 - t * 0.31);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / (H - 1), dep = exp(-y / 70), roww = 1.7 * sin(y * 0.11 + t * 0.4) + t * 0.23;\n    for (let x = 0; x \u003c W; x++) {\n      const a = sin(x * 0.19 + roww), b = sin(y * 0.13 + colw[x] - t * 0.17);\n      const c = a + b, caus = exp(-c * c * 6) * 0.9 * dep, o = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) fr[o + ch] = sv[ch] * (1 - g) + sv[3 + ch] * g + caus * 0.07 * sv[6 + ch];\n    }\n  }\n  const fl = P.flakes.slice(0, P.count).sort((a, b) => a.z - b.z);\n  far.fill(0);\n  let i = 0;\n  // Far flakes, dimmer, into their own layer, softened by a 1-2-1 blur.\n  for (; i \u003c fl.length && fl[i].z \u003c 0.35; i++) drawFlake(P, fl[i], far, true, 0.6 + 0.6 * fl[i].z, null);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) tmp[o + c] = (far[l + c] + 2 * far[o + c] + far[r + c]) / 4;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, u = y > 0 ? o - W * 4 : o, dn = y \u003c H - 1 ? o + W * 4 : o, f3 = (y * W + x) * 3;\n      const a = (tmp[u + 3] + 2 * tmp[o + 3] + tmp[dn + 3]) / 4;\n      for (let c = 0; c \u003c 3; c++) fr[f3 + c] = fr[f3 + c] * (1 - a) + (tmp[u + c] + 2 * tmp[o + c] + tmp[dn + c]) / 4;\n    }\n  // Near flakes, sharp, over the top; their brightest facets throw a glint.\n  const glints = [];\n  for (; i \u003c fl.length; i++) drawFlake(P, fl[i], fr, false, 1, fl[i].z > 0.6 ? glints : null);\n  for (let g = 0; g \u003c glints.length; g += 3) {\n    const gx = floor(glints[g]), gy = floor(glints[g + 1]), s = (glints[g + 2] - 0.6) / 0.4;\n    for (let r = -2; r \u003c= 2; r++) {\n      const a = s * (r === 0 ? 1 : abs(r) === 1 ? 0.55 : 0.22);\n      for (const [x, y] of r === 0 ? [[gx, gy]] : [[gx + r, gy], [gx, gy + r]]) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const o = (y * W + x) * 3;\n        fr[o] += 255 * a;\n        fr[o + 1] += 250 * a;\n        fr[o + 2] += 225 * a;\n      }\n    }\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, fr[o]), min(255, fr[o + 1]), min(255, fr[o + 2]));\n}\n","layer":{"id":"layer-gold-leaf","type":"code","name":"gold-leaf","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gold Leaf\n// Family:  cosmetic\n// Idea:    Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a serum with flakes of gold leaf floating in it\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1\n//\n// Knob 1: Hue. Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown.\n// Knob 2: Speed. How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Flakes. How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil.\n// Knob 4: Size. How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one.\n// Buttons: K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXF = 120, SS = 3;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// The light: from the upper left and in front. Y runs down the panel, the\n// viewer looks along -z.\nconst LX = -0.4, LY = -0.7, LZ = 0.6, LN = sqrt(LX * LX + LY * LY + LZ * LZ);\nconst L = [LX / LN, LY / LN, LZ / LN];\nconst HV = [L[0], L[1], L[2] + 1], HN = sqrt(HV[0] ** 2 + HV[1] ** 2 + HV[2] ** 2);\nconst HH = [HV[0] / HN, HV[1] / HN, HV[2] / HN];\n\n// A torn flake: 6 to 9 points round a ragged outline, each pushed up or down\n// a little, fanned from an off-centre middle point into facets. The heights\n// are the crumple: every facet tilts its own way.\nfunction makeFlake() {\n  const rnd = Math.random, k = 6 + floor(rnd() * 4), e = 0.6 + 0.4 * rnd(), ea = rnd() * PI;\n  const v = [(rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3];\n  for (let i = 0; i \u003c k; i++) {\n    const a = (2 * PI * (i + 0.7 * (rnd() - 0.5))) / k, r = 0.55 + 0.45 * rnd();\n    const x = r * cos(a), y = r * sin(a) * e;\n    v.push(x * cos(ea) - y * sin(ea), x * sin(ea) + y * cos(ea), (rnd() - 0.5) * 0.8);\n  }\n  const nrm = [];\n  for (let i = 0; i \u003c k; i++) {\n    const a = 1 + i, b = 1 + ((i + 1) % k);\n    const ux = v[a * 3] - v[0], uy = v[a * 3 + 1] - v[1], uz = v[a * 3 + 2] - v[2];\n    const wx = v[b * 3] - v[0], wy = v[b * 3 + 1] - v[1], wz = v[b * 3 + 2] - v[2];\n    let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n    const l = sqrt(nx * nx + ny * ny + nz * nz) || 1;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    nrm.push(nx / l, ny / l, nz / l);\n  }\n  const ax = rnd() - 0.5, ay = rnd() - 0.5, az = rnd() - 0.5, al = sqrt(ax * ax + ay * ay + az * az) || 1;\n  const q0 = [rnd() - 0.5, rnd() - 0.5, rnd() - 0.5, rnd() - 0.5], ql = sqrt(q0.reduce((s, c) => s + c * c, 0)) || 1;\n  return {\n    k, v: new Float32Array(v), n: new Float32Array(nrm),\n    x: 3 + rnd() * (W - 6), y: 3 + rnd() * (H - 6), z: rnd(), sz: 0.75 + 0.5 * rnd(),\n    q: q0.map((c) => c / ql), axis: [ax / al, ay / al, az / al], spin: (0.5 + rnd()) * (rnd() \u003c 0.5 ? -1 : 1), ph: rnd() * 2 * PI,\n  };\n}\n\nexport function setup(params) {\n  const flakes = [];\n  for (let i = 0; i \u003c MAXF; i++) flakes.push(makeFlake());\n  params.s = {\n    flakes, t: 0, stir: 0, stirT: -1, hue: 0, count: 40, size: 0.06,\n    far: new Float32Array(N * 4), tmp: new Float32Array(N * 4), frame: new Float32Array(N * 3),\n    sub: new Int16Array(64 * 64 * SS * SS), lut: new Float32Array(256 * 3), lutHue: NaN, serum: [],\n  };\n}\n\n// The current: two slow convection cells stacked in the panel, from the\n// stream function sin(pi x/W) sin(2 pi y/H), which is zero on all four walls,\n// so the flakes go round and never leave. A weaker mode of smaller cells\n// swells and fades over a minute, so no flake runs the same loop twice.\n// Nothing pulls them down: the flakes float, they never settle.\nfunction flow(x, y, t, out) {\n  const X = (PI * x) / W, Y = (2 * PI * y) / H, s = 0.35 * sin(t * 0.11);\n  out[0] = sin(X) * cos(Y) + s * sin(2 * X) * 1.5 * cos(1.5 * Y) * 0.5;\n  out[1] = -cos(X) * sin(Y) - s * 2 * cos(2 * X) * sin(1.5 * Y) * 0.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 40, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.hue = k[0];\n  P.count = floor(cl(k[2], 40, 120));\n  P.size = cl(k[3], 0, 1);\n  P.t += d;\n  if (input.btnPressed && input.btnPressed[0]) P.stirT = 0;\n  // The stir: a second to wind up, then it dies away over about eight.\n  if (P.stirT >= 0) {\n    P.stirT += d;\n    P.stir = P.stirT \u003c 1 ? sm(0, 1, P.stirT) : exp(-(P.stirT - 1) / 3.5);\n    if (P.stirT > 20) (P.stirT = -1), (P.stir = 0);\n  }\n  const v = [0, 0], S = P.stir;\n  for (let i = 0; i \u003c MAXF; i++) {\n    const f = P.flakes[i];\n    flow(f.x, f.y, P.t, v);\n    // Near flakes move faster across the panel than far ones.\n    const par = 0.6 + 0.6 * f.z, sp = 2.6 * par;\n    let vx = v[0] * sp + 0.4 * sin(P.t * 0.5 + f.ph), vy = v[1] * sp + 0.4 * cos(P.t * 0.37 + f.ph * 1.3);\n    if (S > 0) {\n      // The vortex runs round ellipses the shape of the panel, fastest\n      // half way out, so the flakes swing round without piling on a wall.\n      const ex = (f.x - W / 2) / (W / 2), ey = (f.y - H / 2) / (H / 2), r = sqrt(ex * ex + ey * ey);\n      const g = S * 1.6 * cl(1.15 - r, 0, 1) * par;\n      vx += g * -0.5 * (f.y - H / 2);\n      vy += g * 2 * (f.x - W / 2);\n    }\n    f.x = cl(f.x + vx * d, 1, W - 2);\n    f.y = cl(f.y + vy * d, 1, H - 2);\n    // Tumble: turn about the flake's own axis, which wanders slowly.\n    const ang = f.spin * (1 + 4 * S) * d, a = f.axis;\n    a[0] += 0.3 * sin(P.t * 0.23 + f.ph) * d;\n    a[1] += 0.3 * cos(P.t * 0.19 + f.ph * 2) * d;\n    const al = sqrt(a[0] * a[0] + a[1] * a[1] + a[2] * a[2]);\n    a[0] /= al;\n    a[1] /= al;\n    a[2] /= al;\n    const sh = sin(ang / 2), ch = cos(ang / 2), dq = [ch, a[0] * sh, a[1] * sh, a[2] * sh], q = f.q;\n    const n0 = dq[0] * q[0] - dq[1] * q[1] - dq[2] * q[2] - dq[3] * q[3];\n    const n1 = dq[0] * q[1] + dq[1] * q[0] + dq[2] * q[3] - dq[3] * q[2];\n    const n2 = dq[0] * q[2] - dq[1] * q[3] + dq[2] * q[0] + dq[3] * q[1];\n    const n3 = dq[0] * q[3] + dq[1] * q[2] - dq[2] * q[1] + dq[3] * q[0];\n    const ql = sqrt(n0 * n0 + n1 * n1 + n2 * n2 + n3 * n3);\n    q[0] = n0 / ql;\n    q[1] = n1 / ql;\n    q[2] = n2 / ql;\n    q[3] = n3 / ql;\n  }\n}\n\n// The foil's colour against its light, 0 to 1.3 over 256 steps: deep, gold,\n// pale gold, white-gold.\nfunction buildLut(P) {\n  const h = P.hue + 0.115 - floor(P.hue + 0.115);\n  // Round orange and yellow the deep end stays bright and saturated so it\n  // reads as dark gold, not brown; round red and pink the foil is paler, rose\n  // gold rather than red.\n  const warm = sm(0.0, 0.05, h) * (1 - sm(0.17, 0.24, h)), rose = 1 - sm(0.02, 0.07, abs(h - 0.995 + (h \u003c 0.5 ? 1 : 0)));\n  const sat = 1 - 0.4 * rose, lift = max(warm, rose);\n  const stops = [\n    [0, hsv(h - 0.025, 0.95 * sat, 0.4 + 0.18 * lift)],\n    [0.35, hsv(h - 0.01, 0.88 * sat, 0.72 + 0.12 * lift)],\n    [0.7, hsv(h + 0.005, 0.68 * sat, 1)],\n    [1.0, hsv(h + 0.01, 0.34 * sat, 1)],\n    [1.3, hsv(h + 0.01, 0.06, 1)],\n  ];\n  for (let i = 0; i \u003c 256; i++) {\n    const b = (i / 255) * 1.3;\n    let j = 0;\n    while (j \u003c stops.length - 2 && b > stops[j + 1][0]) j++;\n    const [b0, c0] = stops[j], [b1, c1] = stops[j + 1], f = cl((b - b0) / (b1 - b0), 0, 1);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = (c0[c] + (c1[c] - c0[c]) * f) * 255;\n  }\n  // The serum: the foil's hue, faint and greyed, lighter at the top.\n  const top = hsv(h - 0.02, (0.5 - 0.2 * warm) * sat, 0.11), bot = hsv(h - 0.02, (0.6 - 0.2 * warm) * sat, 0.025);\n  const lit = hsv(h + 0.01, 0.3 * sat, 1);\n  P.serum = [top[0] * 255, top[1] * 255, top[2] * 255, bot[0] * 255, bot[1] * 255, bot[2] * 255, lit[0] * 255, lit[1] * 255, lit[2] * 255];\n  P.lutHue = P.hue;\n}\n\nconst rot = new Float32Array(9);\nfunction quatMat(q) {\n  const [w, x, y, z] = q;\n  rot[0] = 1 - 2 * (y * y + z * z); rot[1] = 2 * (x * y - w * z); rot[2] = 2 * (x * z + w * y);\n  rot[3] = 2 * (x * y + w * z); rot[4] = 1 - 2 * (x * x + z * z); rot[5] = 2 * (y * z - w * x);\n  rot[6] = 2 * (x * z - w * y); rot[7] = 2 * (y * z + w * x); rot[8] = 1 - 2 * (x * x + y * y);\n}\n\nconst PX = new Float32Array(10 * 3), FC = new Float32Array(9 * 4), ORD = [];\n\n// One flake into buffer buf (RGB, or RGBA premultiplied when far), over what\n// is there. Each LED takes 3 x 3 samples, 2 x 2 on a big flake; a facet\n// nearer the viewer covers the ones behind it, and the share of samples a\n// flake covers is how much of the LED it takes.\nfunction drawFlake(P, f, buf, rgba, dim, glints) {\n  quatMat(f.q);\n  const s = (6.5 + 6 * P.size) * f.sz * (0.5 + 0.7 * f.z), k = f.k, v = f.v, n = f.n, lut = P.lut;\n  let x0 = W, x1 = 0, y0 = H, y1 = 0;\n  for (let i = 0; i \u003c= k; i++) {\n    const a = v[i * 3], b = v[i * 3 + 1], c = v[i * 3 + 2];\n    const X = f.x + s * (rot[0] * a + rot[1] * b + rot[2] * c), Y = f.y + s * (rot[3] * a + rot[4] * b + rot[5] * c);\n    PX[i * 3] = X;\n    PX[i * 3 + 1] = Y;\n    PX[i * 3 + 2] = rot[6] * a + rot[7] * b + rot[8] * c;\n    x0 = min(x0, X);\n    x1 = max(x1, X);\n    y0 = min(y0, Y);\n    y1 = max(y1, Y);\n  }\n  // Big flakes need fewer samples to an LED for the same smooth edge.\n  const ss = s > 7 ? 2 : SS;\n  const bx = max(0, floor(x0)), by = max(0, floor(y0)), bw = min(W, floor(x1) + 1) - bx, bh = min(H, floor(y1) + 1) - by;\n  if (bw \u003c= 0 || bh \u003c= 0 || bw > 64 || bh > 64) return;\n  const sw = bw * ss, sub = P.sub;\n  sub.fill(-1, 0, sw * bh * ss);\n  ORD.length = 0;\n  for (let i = 0; i \u003c k; i++) {\n    // The facet's normal turned with the flake, towards the viewer: foil\n    // shines from both faces.\n    const a = n[i * 3], b = n[i * 3 + 1], c = n[i * 3 + 2];\n    let nx = rot[0] * a + rot[1] * b + rot[2] * c, ny = rot[3] * a + rot[4] * b + rot[5] * c, nz = rot[6] * a + rot[7] * b + rot[8] * c;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    const spec = max(0, nx * HH[0] + ny * HH[1] + nz * HH[2]) ** 18, diff = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n    // A little base light, the lamp's diffuse share, the glow of the serum\n    // above for facets tipped up, and a narrow highlight, cos^18, half\n    // strength 16 degrees off the mirror angle: a facet flashes as it\n    // sweeps through and its neighbours, tilted their own ways, stay deep.\n    const env = 0.5 - 0.5 * ny;\n    const br = (0.1 + 0.45 * diff + 0.25 * env + 0.95 * spec) * dim;\n    FC[i * 4] = cl(floor((br / 1.3) * 255), 0, 255);\n    FC[i * 4 + 1] = spec;\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    FC[i * 4 + 2] = (PX[2] + PX[j1 * 3 + 2] + PX[j2 * 3 + 2]) / 3;\n    ORD.push(i);\n  }\n  ORD.sort((a, b) => FC[a * 4 + 2] - FC[b * 4 + 2]);\n  for (const i of ORD) {\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    const ax = PX[0], ay = PX[1], bxx = PX[j1 * 3], byy = PX[j1 * 3 + 1], cx = PX[j2 * 3], cy = PX[j2 * 3 + 1];\n    const area = (bxx - ax) * (cy - ay) - (byy - ay) * (cx - ax);\n    if (abs(area) \u003c 1e-4) continue;\n    const sg = area > 0 ? 1 : -1;\n    const sx0 = max(0, floor((min(ax, bxx, cx) - bx) * ss)), sx1 = min(sw - 1, floor((max(ax, bxx, cx) - bx) * ss));\n    const sy0 = max(0, floor((min(ay, byy, cy) - by) * ss)), sy1 = min(bh * ss - 1, floor((max(ay, byy, cy) - by) * ss));\n    for (let sy = sy0; sy \u003c= sy1; sy++) {\n      const py = by + (sy + 0.5) / ss;\n      for (let sx = sx0; sx \u003c= sx1; sx++) {\n        const px = bx + (sx + 0.5) / ss;\n        const e0 = ((bxx - ax) * (py - ay) - (byy - ay) * (px - ax)) * sg;\n        const e1 = ((cx - bxx) * (py - byy) - (cy - byy) * (px - bxx)) * sg;\n        const e2 = ((ax - cx) * (py - cy) - (ay - cy) * (px - cx)) * sg;\n        if (e0 >= 0 && e1 >= 0 && e2 >= 0) sub[sy * sw + sx] = i;\n      }\n    }\n    if (glints && FC[i * 4 + 1] > 0.6) glints.push((ax + bxx + cx) / 3, (ay + byy + cy) / 3, FC[i * 4 + 1]);\n  }\n  for (let y = 0; y \u003c bh; y++)\n    for (let x = 0; x \u003c bw; x++) {\n      let r = 0, g = 0, b = 0, c = 0;\n      for (let u = 0; u \u003c ss; u++)\n        for (let w = 0; w \u003c ss; w++) {\n          const i = sub[(y * ss + u) * sw + x * ss + w];\n          if (i \u003c 0) continue;\n          const li = FC[i * 4] * 3;\n          r += lut[li];\n          g += lut[li + 1];\n          b += lut[li + 2];\n          c++;\n        }\n      if (!c) continue;\n      const al = c / (ss * ss), p = (by + y) * W + bx + x;\n      if (rgba) {\n        const o = p * 4;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n        buf[o + 3] = buf[o + 3] * (1 - al) + al;\n      } else {\n        const o = p * 3;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const fr = P.frame, far = P.far, tmp = P.tmp, t = P.t, sv = P.serum;\n  // The serum: a soft gradient and a slow caustic shimmer that fades with\n  // depth, light let in from the top.\n  const colw = P.colw || (P.colw = new Float32Array(W));\n  for (let x = 0; x \u003c W; x++) colw[x] = 1.5 * sin(x * 0.17 - t * 0.31);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / (H - 1), dep = exp(-y / 70), roww = 1.7 * sin(y * 0.11 + t * 0.4) + t * 0.23;\n    for (let x = 0; x \u003c W; x++) {\n      const a = sin(x * 0.19 + roww), b = sin(y * 0.13 + colw[x] - t * 0.17);\n      const c = a + b, caus = exp(-c * c * 6) * 0.9 * dep, o = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) fr[o + ch] = sv[ch] * (1 - g) + sv[3 + ch] * g + caus * 0.07 * sv[6 + ch];\n    }\n  }\n  const fl = P.flakes.slice(0, P.count).sort((a, b) => a.z - b.z);\n  far.fill(0);\n  let i = 0;\n  // Far flakes, dimmer, into their own layer, softened by a 1-2-1 blur.\n  for (; i \u003c fl.length && fl[i].z \u003c 0.35; i++) drawFlake(P, fl[i], far, true, 0.6 + 0.6 * fl[i].z, null);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) tmp[o + c] = (far[l + c] + 2 * far[o + c] + far[r + c]) / 4;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, u = y > 0 ? o - W * 4 : o, dn = y \u003c H - 1 ? o + W * 4 : o, f3 = (y * W + x) * 3;\n      const a = (tmp[u + 3] + 2 * tmp[o + 3] + tmp[dn + 3]) / 4;\n      for (let c = 0; c \u003c 3; c++) fr[f3 + c] = fr[f3 + c] * (1 - a) + (tmp[u + c] + 2 * tmp[o + c] + tmp[dn + c]) / 4;\n    }\n  // Near flakes, sharp, over the top; their brightest facets throw a glint.\n  const glints = [];\n  for (; i \u003c fl.length; i++) drawFlake(P, fl[i], fr, false, 1, fl[i].z > 0.6 ? glints : null);\n  for (let g = 0; g \u003c glints.length; g += 3) {\n    const gx = floor(glints[g]), gy = floor(glints[g + 1]), s = (glints[g + 2] - 0.6) / 0.4;\n    for (let r = -2; r \u003c= 2; r++) {\n      const a = s * (r === 0 ? 1 : abs(r) === 1 ? 0.55 : 0.22);\n      for (const [x, y] of r === 0 ? [[gx, gy]] : [[gx + r, gy], [gx, gy + r]]) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const o = (y * W + x) * 3;\n        fr[o] += 255 * a;\n        fr[o + 1] += 250 * a;\n        fr[o + 2] += 225 * a;\n      }\n    }\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, fr[o]), min(255, fr[o + 1]), min(255, fr[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower."},{"name":"Flakes","min":40,"max":120,"about":"How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil."},{"name":"Size","min":0,"max":1,"about":"How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one."}],"start":[0,2,40,0.06],"measures":{"motion":0.1468,"detail":0.0417,"edges":0.5435,"complexity":1.0218,"coverage":0.4003,"colour":0.1903,"drift":0.1193},"knobResponse":[0.0888,0.0967,0.0947,0.1201]},{"slug":"goldbach-comet","title":"Goldbach Comet","family":"number","round":33,"note":"짝수 n 을 두 소수의 합으로 쓰는 가짓수를 매끈한 예측값으로 나눠 가로로 찍고, n 은 아래로 커져요. n 이 3 이나 5 나 7 로 나뉘는지에 따라 여덟 줄기가 색으로 갈라지고, 아래로 갈수록 줄기가 가늘어지며 52만까지 가면 처음부터 다시 흘러요. K3 은 7 부터 소수 하나씩 줄기를 접어 한 줄로 모으고, K1 을 누르면 8초 동안 다 접었다 펴요.","idea":"Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.","buttons":"K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.","code":"// ===== Patternflow pattern =====\n// Title:   Goldbach Comet\n// Family:  number\n// Idea:    Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Goldbach's comet, the partition counts of Goldbach's conjecture (Christian Goldbach, 1742), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1\n//\n// Knob 1: Hue. Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue.\n// Knob 2: Speed. How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes.\n// Knob 3: Correction. Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel.\n// Knob 4: Smear. How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count.\n// Buttons: K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.\n\nconst W = 64, H = 128, LOGM = 19, M = 1 \u003c\u003c LOGM, HN = M >> 1;\nconst U0 = 9, U1 = LOGM, SPAN = 4, CAP = 160, XS = 40, X0 = 8, MID = 0.6;\nconst L3 = Math.log(2), L5 = Math.log(4 / 3), L7 = Math.log(6 / 5);\nconst C2 = 0.6601618158468696;\nconst { min, max, floor, ceil, log, exp, cos, sin, PI, LN2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Complex FFT of size n in place. tc/ts hold e^(-i pi k / half) at\n// half + k for every stage, so each stage reads its twiddles in a row.\nfunction fft(re, im, n, tc, ts, sign) {\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      (re[i] = re[j]), (re[j] = t);\n      (t = im[i]), (im[i] = im[j]), (im[j] = t);\n    }\n  }\n  for (let half = 1; half \u003c n; half \u003c\u003c= 1)\n    for (let i = 0, len = half \u003c\u003c 1; i \u003c n; i += len)\n      for (let k = 0; k \u003c half; k++) {\n        const cr = tc[half + k], ci = sign * ts[half + k], a = i + k, b = a + half;\n        const br = re[b], bi = im[b], xr = br * cr - bi * ci, xi = br * ci + bi * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n      }\n}\n\n// g(n) for every even n up to 2^19, the number of ways n = p + q with\n// primes p \u003c= q. Odd primes 2a + 1 make a 0/1 string over a \u003c 2^18, and\n// its square under convolution counts the ordered pairs with\n// a + b = n/2 - 1. The string is real, so it rides as one complex string\n// of half the length (even a in the real part, odd a in the imaginary)\n// and is pulled apart after the transform. Pairing up the 43,390 primes\n// below 2^19 one by one would be 512 million steps; this is 55 to 110 ms.\n// Checked against counting pairs one by one for every even n below 20,000\n// and every 997th one above, up to g(2^19) = 2367: no misses. Run to 2^20\n// it gave g(10^6) = 5402 with rounding errors under 2e-11, but took twice\n// as long.\nfunction goldbach(comp) {\n  const n = HN, tc = new Float64Array(M), ts = new Float64Array(M);\n  // The top stage by rotation, started afresh from cos and sin every 64\n  // steps: 4096 calls to them instead of 262,144.\n  const sr = cos(-PI / n), si = sin(-PI / n);\n  for (let k = 0; k \u003c n; k++) {\n    if ((k & 63) === 0) (tc[n + k] = cos((-PI * k) / n)), (ts[n + k] = sin((-PI * k) / n));\n    else {\n      const a = tc[n + k - 1], b = ts[n + k - 1];\n      (tc[n + k] = a * sr - b * si), (ts[n + k] = a * si + b * sr);\n    }\n  }\n  for (let half = n >> 1; half >= 1; half >>= 1)\n    for (let k = 0, st = n / half; k \u003c half; k++) (tc[half + k] = tc[n + k * st]), (ts[half + k] = ts[n + k * st]);\n  const zr = new Float64Array(n), zi = new Float64Array(n);\n  for (let a = 1; a \u003c n; a++) if (!comp[2 * a + 1]) (a & 1 ? zi : zr)[a >> 1] = 1;\n  fft(zr, zi, n, tc, ts, 1);\n  // X[k] and X[k + n] of the full string from Z[k] and Z[n - k]; square\n  // them; fold the squares back into one half-length string, pairs k and\n  // n - k together so it can be done in place.\n  const out = new Float64Array(4);\n  const fold = (k, j, o) => {\n    const ar = zr[k], ai = zi[k], br = zr[j], bi = -zi[j];\n    const er = (ar + br) / 2, ei = (ai + bi) / 2, odr = (ai - bi) / 2, odi = -(ar - br) / 2;\n    const wr = tc[n + k], wi = ts[n + k], tr = odr * wr - odi * wi, ti = odr * wi + odi * wr;\n    const x1r = er + tr, x1i = ei + ti, x2r = er - tr, x2i = ei - ti;\n    const y1r = x1r * x1r - x1i * x1i, y1i = 2 * x1r * x1i, y2r = x2r * x2r - x2i * x2i, y2i = 2 * x2r * x2i;\n    const sr = (y1r + y2r) / 2, si = (y1i + y2i) / 2, dr = (y1r - y2r) / 2, di = (y1i - y2i) / 2;\n    out[o] = sr - (di * wr - dr * wi);\n    out[o + 1] = si + (dr * wr + di * wi);\n  };\n  for (let k = 0; k \u003c= n >> 1; k++) {\n    const j = (n - k) & (n - 1);\n    fold(k, j, 0);\n    fold(j, k, 2);\n    (zr[k] = out[0]), (zi[k] = out[1]), (zr[j] = out[2]), (zi[j] = out[3]);\n  }\n  fft(zr, zi, n, tc, ts, -1);\n  const g = new Int32Array(HN + 1);\n  for (let k = 0; k + 1 \u003c= HN; k++) {\n    const h = k + 1, c = Math.round((k & 1 ? zi[k >> 1] : zr[k >> 1]) / n) + (h & 1 && h > 2 && !comp[h] ? 1 : 0);\n    g[h] = c >> 1;\n  }\n  g[2] = 1;\n  return g;\n}\n\n// The Hardy-Littlewood count without its singular series: C2 times the\n// integral of dt / (ln t ln(n - t)) from 2 to n - 2, on a table of 97\n// points from n = 2^8 to 2^20 and read between them in ln n. C2 n / ln^2 n\n// alone falls 23% short at n = 2000 and 15% at 500,000, and that drift\n// would tip the streaks four LEDs across the tape. With the integral, g(n)\n// over the whole prediction averages 0.953 at n = 2000, 0.982 at 20,000\n// and 0.997 at 500,000, spread 5.7%, 2.9% and 0.9% about it, so a streak\n// narrows from a spread of about two LEDs to a third of one.\nfunction hlTable() {\n  const t = new Float64Array(97);\n  for (let j = 0; j \u003c 97; j++) {\n    const n = 2 ** (8 + j / 8), a = log(2), b = log(n / 2), K = 200, h = (b - a) / K;\n    let s = 0;\n    for (let i = 0; i \u003c= K; i++) {\n      const u = a + i * h, x = exp(u);\n      s += ((i === 0 || i === K ? 1 : i & 1 ? 4 : 2) * x) / (u * log(n - x));\n    }\n    t[j] = log((2 * C2 * s * h) / 3);\n  }\n  return t;\n}\n\nexport function setup(params) {\n  const comp = new Uint8Array(M + 1);\n  for (let i = 3; i * i \u003c= M; i += 2) if (!comp[i]) for (let j = i * i; j \u003c= M; j += 2 * i) comp[j] = 1;\n  const g = goldbach(comp), hl = hlTable();\n  // For each even n = 2h: which of 3, 5, 7 and 11 divide it (bits 1, 2, 4\n  // and 8), and the log of the rest of its singular series, the product of\n  // (p - 1)/(p - 2) over the odd primes p from 11 up that divide it.\n  const bits = new Uint8Array(HN + 1), lr = new Float32Array(HN + 1), res = new Float32Array(HN + 1);\n  for (let p = 3; p \u003c= HN; p += 2) {\n    if (comp[p]) continue;\n    if (p > 7) {\n      const f = log((p - 1) / (p - 2));\n      for (let h = p; h \u003c= HN; h += p) lr[h] += f;\n    } else for (let h = p, b = p === 3 ? 1 : p === 5 ? 2 : 4; h \u003c= HN; h += p) bits[h] |= b;\n  }\n  for (let h = 11; h \u003c= HN; h += 11) bits[h] |= 8;\n  // res is how far g(n) sits from the whole prediction, in ln: 0 would be\n  // exactly Hardy-Littlewood. The prediction is read off the table once\n  // every 16 numbers and drawn straight between.\n  let hA = 0, hB = 0;\n  const hlAt = (h) => {\n    const z = cl((log(2 * h) / LN2 - 8) * 8, 0, 96), j = min(95, floor(z));\n    return hl[j] + (hl[j + 1] - hl[j]) * (z - j);\n  };\n  for (let h = 4; h \u003c= HN; h++) {\n    if (((h - 4) & 15) === 0) (hA = hlAt(h)), (hB = hlAt(h + 16));\n    const b = bits[h], small = (b & 1 ? L3 : 0) + (b & 2 ? L5 : 0) + (b & 4 ? L7 : 0);\n    res[h] = log(g[h]) - lr[h] - small - (hA + ((hB - hA) * ((h - 4) & 15)) / 16);\n  }\n  params.s = {\n    bits, lr, res, u: 10.6, hue: 0, speed: 2, kap: 0, smear: 0.06, bump: -1,\n    acc: new Float32Array(W * 4), pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(W * H * 3),\n    off: new Float32Array(16), cls: new Uint8Array(16),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.smear = cl(k[3], 0, 1);\n  const k3 = cl(k[2], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.bump = 0;\n  // The tap sends the correction to the far end from the knob and back:\n  // in for three seconds, held for two, out for three.\n  let kap = k3;\n  if (P.bump >= 0) {\n    P.bump += d / 8;\n    const b = P.bump \u003c 3 / 8 ? sm((P.bump * 8) / 3) : P.bump \u003c 5 / 8 ? 1 : sm(((1 - P.bump) * 8) / 3);\n    kap = k3 + ((k3 \u003c 0.5 ? 1 : 0) - k3) * b;\n    if (P.bump >= 1) P.bump = -1;\n  }\n  P.kap = kap;\n  P.u += d * P.speed * 0.12;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { bits, lr, res, acc, pal, rgb, off, cls } = P;\n  if (P.palHue !== P.hue) {\n    // Gold, green, pink, sky blue and pale blue at Hue 0. The gold is kept\n    // light so a thin streak of it does not read brown.\n    const base = [[0.13, 0.62], [0.36, 0.75], [0.9, 0.55], [0.55, 0.7], [0.62, 0.35]];\n    for (let c = 0; c \u003c 5; c++) hsv(P.hue + base[c][0], base[c][1], 1, pal, c * 3);\n    P.palHue = P.hue;\n  }\n  // The correction comes in a prime at a time: the first third of the knob\n  // folds the 7s onto the streaks beside them, the second the 5s, the last\n  // the 3s, while everything glides to meet in the middle.\n  const kap = P.kap * 3, w7 = sm(kap), w5 = sm(kap - 1), w3 = sm(kap - 2);\n  for (let b = 0; b \u003c 16; b++) {\n    off[b] = (b & 1 ? L3 * (1 - w3) : 0) + (b & 2 ? L5 * (1 - w5) : 0) + (b & 4 ? L7 * (1 - w7) : 0);\n    cls[b] = (b & 1 ? 0 : b & 2 ? 1 : b & 4 ? 2 : b & 8 ? 3 : 4) * 3;\n  }\n  // Smear leaves in the primes from 11 up. Each of them moves its\n  // multiples right by ln((p - 1)/(p - 2)), 0.105 for 11, 0.087 for 13,\n  // 0.065 for 17, so left in they fan every streak out four LEDs wide.\n  const shift = X0 + XS * MID * w3 - 0.5, keep = P.smear;\n  // The view is four octaves of n, a strip of ln2 n: row y holds\n  // [u + y du, u + (y + 1) du). The tape runs from 2^9 to 2^19 and starts\n  // over after ten dark rows.\n  const du = SPAN / H, u0 = U0, tape = U1 - u0 + 10 * du;\n  for (let y = 0; y \u003c H; y++) {\n    acc.fill(0);\n    let uu = u0 + ((((P.u - u0 + y * du) % tape) + tape) % tape);\n    if (uu + du \u003c= U1) {\n      const hlo = max(4, ceil(2 ** uu / 2)), hhi = min(HN + 1, ceil(2 ** (uu + du) / 2));\n      const count = hhi - hlo;\n      // Every n in the row while there are few, every s-th when there are\n      // more than CAP. s is a power of 2: a stride of 17 would keep only\n      // multiples of 17 and move every streak 2.3 LEDs right by its 16/15.\n      const s = count > CAP ? 2 ** ceil(Math.log2(count / CAP)) : 1;\n      for (let h = ceil(hlo / s) * s; h \u003c hhi; h += s) {\n        const b = bits[h], x = shift + XS * (res[h] + keep * lr[h] + off[b]), x0 = floor(x), f = x - x0, c = cls[b];\n        if (x0 >= 0 && x0 \u003c W) {\n          const o = x0 * 4, w = 1 - f;\n          (acc[o] += w), (acc[o + 1] += w * pal[c]), (acc[o + 2] += w * pal[c + 1]), (acc[o + 3] += w * pal[c + 2]);\n        }\n        if (x0 + 1 >= 0 && x0 + 1 \u003c W) {\n          const o = x0 * 4 + 4;\n          (acc[o] += f), (acc[o + 1] += f * pal[c]), (acc[o + 2] += f * pal[c + 1]), (acc[o + 3] += f * pal[c + 2]);\n        }\n      }\n    }\n    // Dots in one LED add up, on a log scale against the busiest LED of the\n    // row: full at 40% of it, and one dot lights an LED to about a third in\n    // a crowded row and to half in a sparse one, so a lone dot in a far\n    // tail stays faint and the core of a streak stands out. The colour is\n    // the mix of the classes that landed there.\n    let top = 0;\n    for (let x = 0; x \u003c W; x++) top = max(top, acc[x * 4]);\n    const norm = 1 / log(1 + 2 * max(4, 0.4 * top));\n    for (let x = 0; x \u003c W; x++) {\n      const o = x * 4, a = acc[o], q = (y * W + x) * 3;\n      if (a \u003c= 0) {\n        rgb[q] = rgb[q + 1] = rgb[q + 2] = 0;\n        continue;\n      }\n      const lev = min(1, log(1 + 2 * a) * norm) / a;\n      rgb[q] = acc[o + 1] * lev;\n      rgb[q + 1] = acc[o + 2] * lev;\n      rgb[q + 2] = acc[o + 3] * lev;\n    }\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-goldbach-comet","type":"code","name":"goldbach-comet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Goldbach Comet\n// Family:  number\n// Idea:    Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Goldbach's comet, the partition counts of Goldbach's conjecture (Christian Goldbach, 1742), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1\n//\n// Knob 1: Hue. Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue.\n// Knob 2: Speed. How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes.\n// Knob 3: Correction. Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel.\n// Knob 4: Smear. How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count.\n// Buttons: K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.\n\nconst W = 64, H = 128, LOGM = 19, M = 1 \u003c\u003c LOGM, HN = M >> 1;\nconst U0 = 9, U1 = LOGM, SPAN = 4, CAP = 160, XS = 40, X0 = 8, MID = 0.6;\nconst L3 = Math.log(2), L5 = Math.log(4 / 3), L7 = Math.log(6 / 5);\nconst C2 = 0.6601618158468696;\nconst { min, max, floor, ceil, log, exp, cos, sin, PI, LN2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Complex FFT of size n in place. tc/ts hold e^(-i pi k / half) at\n// half + k for every stage, so each stage reads its twiddles in a row.\nfunction fft(re, im, n, tc, ts, sign) {\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      (re[i] = re[j]), (re[j] = t);\n      (t = im[i]), (im[i] = im[j]), (im[j] = t);\n    }\n  }\n  for (let half = 1; half \u003c n; half \u003c\u003c= 1)\n    for (let i = 0, len = half \u003c\u003c 1; i \u003c n; i += len)\n      for (let k = 0; k \u003c half; k++) {\n        const cr = tc[half + k], ci = sign * ts[half + k], a = i + k, b = a + half;\n        const br = re[b], bi = im[b], xr = br * cr - bi * ci, xi = br * ci + bi * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n      }\n}\n\n// g(n) for every even n up to 2^19, the number of ways n = p + q with\n// primes p \u003c= q. Odd primes 2a + 1 make a 0/1 string over a \u003c 2^18, and\n// its square under convolution counts the ordered pairs with\n// a + b = n/2 - 1. The string is real, so it rides as one complex string\n// of half the length (even a in the real part, odd a in the imaginary)\n// and is pulled apart after the transform. Pairing up the 43,390 primes\n// below 2^19 one by one would be 512 million steps; this is 55 to 110 ms.\n// Checked against counting pairs one by one for every even n below 20,000\n// and every 997th one above, up to g(2^19) = 2367: no misses. Run to 2^20\n// it gave g(10^6) = 5402 with rounding errors under 2e-11, but took twice\n// as long.\nfunction goldbach(comp) {\n  const n = HN, tc = new Float64Array(M), ts = new Float64Array(M);\n  // The top stage by rotation, started afresh from cos and sin every 64\n  // steps: 4096 calls to them instead of 262,144.\n  const sr = cos(-PI / n), si = sin(-PI / n);\n  for (let k = 0; k \u003c n; k++) {\n    if ((k & 63) === 0) (tc[n + k] = cos((-PI * k) / n)), (ts[n + k] = sin((-PI * k) / n));\n    else {\n      const a = tc[n + k - 1], b = ts[n + k - 1];\n      (tc[n + k] = a * sr - b * si), (ts[n + k] = a * si + b * sr);\n    }\n  }\n  for (let half = n >> 1; half >= 1; half >>= 1)\n    for (let k = 0, st = n / half; k \u003c half; k++) (tc[half + k] = tc[n + k * st]), (ts[half + k] = ts[n + k * st]);\n  const zr = new Float64Array(n), zi = new Float64Array(n);\n  for (let a = 1; a \u003c n; a++) if (!comp[2 * a + 1]) (a & 1 ? zi : zr)[a >> 1] = 1;\n  fft(zr, zi, n, tc, ts, 1);\n  // X[k] and X[k + n] of the full string from Z[k] and Z[n - k]; square\n  // them; fold the squares back into one half-length string, pairs k and\n  // n - k together so it can be done in place.\n  const out = new Float64Array(4);\n  const fold = (k, j, o) => {\n    const ar = zr[k], ai = zi[k], br = zr[j], bi = -zi[j];\n    const er = (ar + br) / 2, ei = (ai + bi) / 2, odr = (ai - bi) / 2, odi = -(ar - br) / 2;\n    const wr = tc[n + k], wi = ts[n + k], tr = odr * wr - odi * wi, ti = odr * wi + odi * wr;\n    const x1r = er + tr, x1i = ei + ti, x2r = er - tr, x2i = ei - ti;\n    const y1r = x1r * x1r - x1i * x1i, y1i = 2 * x1r * x1i, y2r = x2r * x2r - x2i * x2i, y2i = 2 * x2r * x2i;\n    const sr = (y1r + y2r) / 2, si = (y1i + y2i) / 2, dr = (y1r - y2r) / 2, di = (y1i - y2i) / 2;\n    out[o] = sr - (di * wr - dr * wi);\n    out[o + 1] = si + (dr * wr + di * wi);\n  };\n  for (let k = 0; k \u003c= n >> 1; k++) {\n    const j = (n - k) & (n - 1);\n    fold(k, j, 0);\n    fold(j, k, 2);\n    (zr[k] = out[0]), (zi[k] = out[1]), (zr[j] = out[2]), (zi[j] = out[3]);\n  }\n  fft(zr, zi, n, tc, ts, -1);\n  const g = new Int32Array(HN + 1);\n  for (let k = 0; k + 1 \u003c= HN; k++) {\n    const h = k + 1, c = Math.round((k & 1 ? zi[k >> 1] : zr[k >> 1]) / n) + (h & 1 && h > 2 && !comp[h] ? 1 : 0);\n    g[h] = c >> 1;\n  }\n  g[2] = 1;\n  return g;\n}\n\n// The Hardy-Littlewood count without its singular series: C2 times the\n// integral of dt / (ln t ln(n - t)) from 2 to n - 2, on a table of 97\n// points from n = 2^8 to 2^20 and read between them in ln n. C2 n / ln^2 n\n// alone falls 23% short at n = 2000 and 15% at 500,000, and that drift\n// would tip the streaks four LEDs across the tape. With the integral, g(n)\n// over the whole prediction averages 0.953 at n = 2000, 0.982 at 20,000\n// and 0.997 at 500,000, spread 5.7%, 2.9% and 0.9% about it, so a streak\n// narrows from a spread of about two LEDs to a third of one.\nfunction hlTable() {\n  const t = new Float64Array(97);\n  for (let j = 0; j \u003c 97; j++) {\n    const n = 2 ** (8 + j / 8), a = log(2), b = log(n / 2), K = 200, h = (b - a) / K;\n    let s = 0;\n    for (let i = 0; i \u003c= K; i++) {\n      const u = a + i * h, x = exp(u);\n      s += ((i === 0 || i === K ? 1 : i & 1 ? 4 : 2) * x) / (u * log(n - x));\n    }\n    t[j] = log((2 * C2 * s * h) / 3);\n  }\n  return t;\n}\n\nexport function setup(params) {\n  const comp = new Uint8Array(M + 1);\n  for (let i = 3; i * i \u003c= M; i += 2) if (!comp[i]) for (let j = i * i; j \u003c= M; j += 2 * i) comp[j] = 1;\n  const g = goldbach(comp), hl = hlTable();\n  // For each even n = 2h: which of 3, 5, 7 and 11 divide it (bits 1, 2, 4\n  // and 8), and the log of the rest of its singular series, the product of\n  // (p - 1)/(p - 2) over the odd primes p from 11 up that divide it.\n  const bits = new Uint8Array(HN + 1), lr = new Float32Array(HN + 1), res = new Float32Array(HN + 1);\n  for (let p = 3; p \u003c= HN; p += 2) {\n    if (comp[p]) continue;\n    if (p > 7) {\n      const f = log((p - 1) / (p - 2));\n      for (let h = p; h \u003c= HN; h += p) lr[h] += f;\n    } else for (let h = p, b = p === 3 ? 1 : p === 5 ? 2 : 4; h \u003c= HN; h += p) bits[h] |= b;\n  }\n  for (let h = 11; h \u003c= HN; h += 11) bits[h] |= 8;\n  // res is how far g(n) sits from the whole prediction, in ln: 0 would be\n  // exactly Hardy-Littlewood. The prediction is read off the table once\n  // every 16 numbers and drawn straight between.\n  let hA = 0, hB = 0;\n  const hlAt = (h) => {\n    const z = cl((log(2 * h) / LN2 - 8) * 8, 0, 96), j = min(95, floor(z));\n    return hl[j] + (hl[j + 1] - hl[j]) * (z - j);\n  };\n  for (let h = 4; h \u003c= HN; h++) {\n    if (((h - 4) & 15) === 0) (hA = hlAt(h)), (hB = hlAt(h + 16));\n    const b = bits[h], small = (b & 1 ? L3 : 0) + (b & 2 ? L5 : 0) + (b & 4 ? L7 : 0);\n    res[h] = log(g[h]) - lr[h] - small - (hA + ((hB - hA) * ((h - 4) & 15)) / 16);\n  }\n  params.s = {\n    bits, lr, res, u: 10.6, hue: 0, speed: 2, kap: 0, smear: 0.06, bump: -1,\n    acc: new Float32Array(W * 4), pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(W * H * 3),\n    off: new Float32Array(16), cls: new Uint8Array(16),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.smear = cl(k[3], 0, 1);\n  const k3 = cl(k[2], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.bump = 0;\n  // The tap sends the correction to the far end from the knob and back:\n  // in for three seconds, held for two, out for three.\n  let kap = k3;\n  if (P.bump >= 0) {\n    P.bump += d / 8;\n    const b = P.bump \u003c 3 / 8 ? sm((P.bump * 8) / 3) : P.bump \u003c 5 / 8 ? 1 : sm(((1 - P.bump) * 8) / 3);\n    kap = k3 + ((k3 \u003c 0.5 ? 1 : 0) - k3) * b;\n    if (P.bump >= 1) P.bump = -1;\n  }\n  P.kap = kap;\n  P.u += d * P.speed * 0.12;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { bits, lr, res, acc, pal, rgb, off, cls } = P;\n  if (P.palHue !== P.hue) {\n    // Gold, green, pink, sky blue and pale blue at Hue 0. The gold is kept\n    // light so a thin streak of it does not read brown.\n    const base = [[0.13, 0.62], [0.36, 0.75], [0.9, 0.55], [0.55, 0.7], [0.62, 0.35]];\n    for (let c = 0; c \u003c 5; c++) hsv(P.hue + base[c][0], base[c][1], 1, pal, c * 3);\n    P.palHue = P.hue;\n  }\n  // The correction comes in a prime at a time: the first third of the knob\n  // folds the 7s onto the streaks beside them, the second the 5s, the last\n  // the 3s, while everything glides to meet in the middle.\n  const kap = P.kap * 3, w7 = sm(kap), w5 = sm(kap - 1), w3 = sm(kap - 2);\n  for (let b = 0; b \u003c 16; b++) {\n    off[b] = (b & 1 ? L3 * (1 - w3) : 0) + (b & 2 ? L5 * (1 - w5) : 0) + (b & 4 ? L7 * (1 - w7) : 0);\n    cls[b] = (b & 1 ? 0 : b & 2 ? 1 : b & 4 ? 2 : b & 8 ? 3 : 4) * 3;\n  }\n  // Smear leaves in the primes from 11 up. Each of them moves its\n  // multiples right by ln((p - 1)/(p - 2)), 0.105 for 11, 0.087 for 13,\n  // 0.065 for 17, so left in they fan every streak out four LEDs wide.\n  const shift = X0 + XS * MID * w3 - 0.5, keep = P.smear;\n  // The view is four octaves of n, a strip of ln2 n: row y holds\n  // [u + y du, u + (y + 1) du). The tape runs from 2^9 to 2^19 and starts\n  // over after ten dark rows.\n  const du = SPAN / H, u0 = U0, tape = U1 - u0 + 10 * du;\n  for (let y = 0; y \u003c H; y++) {\n    acc.fill(0);\n    let uu = u0 + ((((P.u - u0 + y * du) % tape) + tape) % tape);\n    if (uu + du \u003c= U1) {\n      const hlo = max(4, ceil(2 ** uu / 2)), hhi = min(HN + 1, ceil(2 ** (uu + du) / 2));\n      const count = hhi - hlo;\n      // Every n in the row while there are few, every s-th when there are\n      // more than CAP. s is a power of 2: a stride of 17 would keep only\n      // multiples of 17 and move every streak 2.3 LEDs right by its 16/15.\n      const s = count > CAP ? 2 ** ceil(Math.log2(count / CAP)) : 1;\n      for (let h = ceil(hlo / s) * s; h \u003c hhi; h += s) {\n        const b = bits[h], x = shift + XS * (res[h] + keep * lr[h] + off[b]), x0 = floor(x), f = x - x0, c = cls[b];\n        if (x0 >= 0 && x0 \u003c W) {\n          const o = x0 * 4, w = 1 - f;\n          (acc[o] += w), (acc[o + 1] += w * pal[c]), (acc[o + 2] += w * pal[c + 1]), (acc[o + 3] += w * pal[c + 2]);\n        }\n        if (x0 + 1 >= 0 && x0 + 1 \u003c W) {\n          const o = x0 * 4 + 4;\n          (acc[o] += f), (acc[o + 1] += f * pal[c]), (acc[o + 2] += f * pal[c + 1]), (acc[o + 3] += f * pal[c + 2]);\n        }\n      }\n    }\n    // Dots in one LED add up, on a log scale against the busiest LED of the\n    // row: full at 40% of it, and one dot lights an LED to about a third in\n    // a crowded row and to half in a sparse one, so a lone dot in a far\n    // tail stays faint and the core of a streak stands out. The colour is\n    // the mix of the classes that landed there.\n    let top = 0;\n    for (let x = 0; x \u003c W; x++) top = max(top, acc[x * 4]);\n    const norm = 1 / log(1 + 2 * max(4, 0.4 * top));\n    for (let x = 0; x \u003c W; x++) {\n      const o = x * 4, a = acc[o], q = (y * W + x) * 3;\n      if (a \u003c= 0) {\n        rgb[q] = rgb[q + 1] = rgb[q + 2] = 0;\n        continue;\n      }\n      const lev = min(1, log(1 + 2 * a) * norm) / a;\n      rgb[q] = acc[o + 1] * lev;\n      rgb[q + 1] = acc[o + 2] * lev;\n      rgb[q + 2] = acc[o + 3] * lev;\n    }\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes."},{"name":"Correction","min":0,"max":1,"about":"Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel."},{"name":"Smear","min":0,"max":1,"about":"How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count."}],"start":[0,2,0,0.06],"measures":{"motion":1.5227,"detail":0.1448,"edges":0.6539,"complexity":1.6402,"coverage":0.5247,"colour":0.2628,"drift":0.0876},"knobResponse":[0.139,0.1117,0.2621,0.1127]},{"slug":"gosset-polytope","title":"Gosset Polytope","family":"geometry","round":28,"note":"E8 의 근 240개와 그 사이 모서리 6720개, 고셋의 4₂₁ 다면체를 8차원에서 두 창에 비춰요. 위 창은 30개씩 고리 여덟이 서는 콕서터 평면에서 열려 E7, E6, D5, D4, D6 의 평면을 지나 돌아오고, 아래 창은 몇 평면 앞서가요. 누르면 둘 다 콕서터 평면으로 돌아가요.","idea":"The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.","buttons":"K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.","code":"// ===== Patternflow pattern =====\n// Title:   Gosset Polytope\n// Family:  geometry\n// Idea:    The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gosset's 4₂₁ polytope (Thorold Gosset, 1900) and the E8 root system (Wilhelm Killing 1888, Élie Cartan 1894), in Peter McMullen's Petrie projection, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5\n//\n// Knob 1: Hue. Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan.\n// Knob 2: Speed. At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes.\n// Knob 3: Edges. How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white.\n// Knob 4: Plane. How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind.\n// Buttons: K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.\n\n// Each window is 64 LEDs square; the polytope fills a circle of radius 29.5\n// in it, so the outer ring of the Coxeter plane picture has 30 vertices about\n// six LEDs apart and the inner one 30 on a circle of radius six.\nconst W = 64, HV = 64, CX = 31.5, RAD = 29.5;\nconst { max, floor, ceil, round, sqrt, cos, sin, abs, exp, atan2, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst dot = (a, b) => a.reduce((s, x, i) => s + x * b[i], 0);\n\n// The roots: every (±1, ±1, 0, 0, 0, 0, 0, 0) in any order, 112 of them,\n// and every (±1/2)^8 with an even number of minus signs, 128 more.\nconst ROOTS = [];\nfor (let i = 0; i \u003c 8; i++)\n  for (let j = i + 1; j \u003c 8; j++)\n    for (let s = 0; s \u003c 4; s++) {\n      const v = new Array(8).fill(0);\n      v[i] = s & 1 ? -1 : 1;\n      v[j] = s & 2 ? -1 : 1;\n      ROOTS.push(v);\n    }\nfor (let m = 0; m \u003c 256; m++) {\n  let neg = 0;\n  for (let k = 0; k \u003c 8; k++) neg += (m >> k) & 1;\n  if (neg % 2 === 0) ROOTS.push([...Array(8)].map((_, k) => ((m >> k) & 1 ? -0.5 : 0.5)));\n}\nconst NV = ROOTS.length;\nconst RF = new Float64Array(NV * 8);\nROOTS.forEach((r, i) => r.forEach((x, k) => (RF[i * 8 + k] = x)));\n\n// Two roots are joined when they stand sqrt 2 apart, when their dot product\n// is 1: 56 edges at each vertex, 6720 in all.\nconst EDGE = [];\nfor (let i = 0; i \u003c NV; i++) for (let j = i + 1; j \u003c NV; j++) if (dot(ROOTS[i], ROOTS[j]) === 1) EDGE.push(i, j);\nconst NE = EDGE.length / 2;\nconst EI = Uint16Array.from(EDGE);\n\n// The simple roots of E8 (Bourbaki's numbering): a1 is the spinor root, a2\n// hangs off a4, and a1 a3 a4 a5 a6 a7 a8 is the long arm.\nconst e = (i, s = 1, j = -1, t = 0) => [...Array(8)].map((_, k) => (k === i ? s : k === j ? t : 0));\nconst SIMPLE = [[0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5], e(0, 1, 1, 1), e(1, 1, 0, -1), e(2, 1, 1, -1), e(3, 1, 2, -1), e(4, 1, 3, -1), e(5, 1, 4, -1), e(6, 1, 5, -1)];\n\n// The Coxeter plane of a simply laced root system from its simple roots\n// (Steinberg): colour the Dynkin diagram black and white, take the\n// Perron-Frobenius vector x of the diagram, and the plane is spanned by the\n// sum of x_i a_i over the black roots and the same sum over the white ones.\n// The product of all the reflections turns it by one h-th of a turn.\nfunction coxeterPlane(S) {\n  const k = S.length, adj = S.map((a) => S.map((b) => (dot(a, b) === -1 ? 1 : 0)));\n  const col = new Array(k).fill(-1), stack = [0];\n  col[0] = 0;\n  while (stack.length) {\n    const i = stack.pop();\n    for (let j = 0; j \u003c k; j++) if (adj[i][j] && col[j] \u003c 0) (col[j] = 1 - col[i]), stack.push(j);\n  }\n  let x = new Array(k).fill(1), lam = 0;\n  for (let it = 0; it \u003c 600; it++) {\n    const y = x.map((xi, i) => 2 * xi + adj[i].reduce((s, a, j) => s + a * x[j], 0));\n    lam = sqrt(dot(y, y)) - 2;\n    x = y.map((v) => v / (lam + 2));\n  }\n  const u = new Array(8).fill(0), w = new Array(8).fill(0);\n  S.forEach((a, i) => a.forEach((ai, d) => ((col[i] ? w : u)[d] += x[i] * ai)));\n  const nu = sqrt(dot(u, u));\n  for (let d = 0; d \u003c 8; d++) u[d] /= nu;\n  const pr = dot(w, u);\n  for (let d = 0; d \u003c 8; d++) w[d] -= pr * u[d];\n  const nw = sqrt(dot(w, w));\n  // The diagram's largest eigenvalue is 2 cos(pi / h), h the Coxeter number.\n  return [u, w.map((v) => v / nw), round(PI / Math.acos(lam / 2))];\n}\n\n// The round: E8 (30-fold), then down the chain E8 > E7 > E6 > D5 > D4 one\n// node of the diagram at a time (18, 12, 8 and 6-fold), up through D6\n// (10-fold) and back.\nconst STOPS = [SIMPLE, SIMPLE.slice(0, 7), SIMPLE.slice(0, 6), SIMPLE.slice(1, 6), SIMPLE.slice(1, 5), SIMPLE.slice(1, 7)].map(coxeterPlane);\nconst NS = STOPS.length;\n\n// Each swing is the shortest way from one plane to the next (a geodesic in\n// the Grassmannian): the two principal angles between the planes, turned\n// through together. The frame carries its own turn within the plane from\n// one swing to the next, so the windows never jump.\nfunction svd2(a, b, c, d) {\n  const E = (a + d) / 2, F = (a - d) / 2, G = (c + b) / 2, H = (c - b) / 2;\n  const Q = hypot(E, H), R = hypot(F, G), a1 = atan2(G, F), a2 = atan2(H, E);\n  // C = rot(phi) diag(Q + R, Q - R) rot(theta)\n  return { s1: Q + R, s2: Q - R, phi: (a2 + a1) / 2, th: (a2 - a1) / 2 };\n}\nconst comb = (p, q, cp, cq) => p.map((x, i) => cp * x + cq * q[i]);\n// Each stop is shown turned so a vertex of its outer polygon points straight\n// up; the turn is picked among the h equal ones to be the nearest to the\n// last, and the swing eases from one to the next.\nfunction upright(u, v, h, near) {\n  let best = 0, a = 0;\n  for (const r of ROOTS) {\n    const x = dot(r, u), y = dot(r, v), q = hypot(x, y);\n    if (q > best + 1e-9) (best = q), (a = atan2(y, x));\n  }\n  const t = -PI / 2 - a, step = (2 * PI) / h;\n  return t + round((near - t) / step) * step;\n}\nconst SEG = [];\nlet F = STOPS[0], turn = upright(F[0], F[1], 30, 0);\nfor (let k = 0; k \u003c NS; k++) {\n  let [v1, v2, h] = STOPS[(k + 1) % NS];\n  const [f1, f2] = F;\n  if (dot(f1, v1) * dot(f2, v2) - dot(f1, v2) * dot(f2, v1) \u003c 0) v2 = v2.map((x) => -x);\n  const { s1, s2, phi, th } = svd2(dot(f1, v1), dot(f1, v2), dot(f2, v1), dot(f2, v2));\n  const ca = cos(phi), sa = sin(phi), cb = cos(-th), sb = sin(-th);\n  // Principal vectors: P = F rot(phi), Q = V rot(theta)^T.\n  const p = [comb(f1, f2, ca, sa), comb(f1, f2, -sa, ca)];\n  const q = [comb(v1, v2, cb, sb), comb(v1, v2, -sb, cb)];\n  const ang = [], n = [];\n  [s1, s2].forEach((s, i) => {\n    const t = comb(q[i], p[i], 1, -cl(s, -1, 1)), nt = sqrt(dot(t, t));\n    ang.push(Math.acos(cl(s, -1, 1)));\n    n.push(nt > 1e-9 ? t.map((x) => x / nt) : new Array(8).fill(0));\n  });\n  F = [comb(q[0], q[1], cos(phi), -sin(phi)), comb(q[0], q[1], sin(phi), cos(phi))];\n  // Back on the Coxeter plane the frame may come round mirrored; the\n  // picture there is symmetric under the mirror, so turning a vertex up\n  // closes the loop all the same.\n  const next = upright(F[0], F[1], h, turn);\n  SEG.push({ p, n, ang, phi, t0: turn, t1: next });\n  turn = next;\n}\n\n// Where the frame stands at phase s (in stops): hold 5/12 of each stop, then\n// swing to the next with a smooth start and end. Returns the turn.\nconst HOLD = 5 / 12;\nfunction frameAt(s, out) {\n  const n = ((s % NS) + NS) % NS, k = floor(n), f = n - k, G = SEG[k];\n  let m = cl((f - HOLD) / (1 - HOLD), 0, 1);\n  m = m * m * m * (m * (m * 6 - 15) + 10);\n  const c1 = cos(m * G.ang[0]), s1 = sin(m * G.ang[0]), c2 = cos(m * G.ang[1]), s2 = sin(m * G.ang[1]);\n  const cp = cos(G.phi), sp = sin(G.phi);\n  for (let d = 0; d \u003c 8; d++) {\n    const g1 = c1 * G.p[0][d] + s1 * G.n[0][d], g2 = c2 * G.p[1][d] + s2 * G.n[1][d];\n    out[d] = g1 * cp - g2 * sp;\n    out[8 + d] = g1 * sp + g2 * cp;\n  }\n  return G.t0 + (G.t1 - G.t0) * m;\n}\n\n// Eight rings of 30 on the Coxeter plane; each vertex keeps the colour of\n// its ring wherever the swings carry it.\nconst RING = new Uint8Array(NV);\n{\n  const [u, v] = STOPS[0], rr = ROOTS.map((r) => hypot(dot(r, u), dot(r, v)));\n  const sorted = [...rr].sort((a, b) => a - b), levels = sorted.filter((x, i) => i === 0 || x - sorted[i - 1] > 1e-3);\n  rr.forEach((x, i) => (RING[i] = levels.filter((l) => l \u003c x + 1e-3).length - 1));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = {\n    ph: 0, lead: 1, hue: -1, ew: 1, snap: null,\n    buf: new Float32Array(W * HV * 2 * 3), fr: new Float64Array(16),\n    px: new Float32Array(NV), py: new Float32Array(NV),\n    vc: new Float32Array(NV * 3), ec: new Float32Array(NE * 3), rc: new Float32Array(8 * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.lead = cl(k[3], 1, 5);\n  P.ew = cl(k[2], -1, 1);\n  const hue = k[0] || 0;\n  if (hue !== P.hue) {\n    P.hue = hue;\n    for (let r = 0; r \u003c 8; r++) hsv(0.15 + hue - r * 0.095, 0.95 - 0.02 * r, 1, P.rc, r * 3);\n    for (let i = 0; i \u003c NV; i++) for (let c = 0; c \u003c 3; c++) P.vc[i * 3 + c] = P.rc[RING[i] * 3 + c];\n    for (let j = 0; j \u003c NE; j++) for (let c = 0; c \u003c 3; c++) P.ec[j * 3 + c] = (P.vc[EI[2 * j] * 3 + c] + P.vc[EI[2 * j + 1] * 3 + c]) / 2;\n  }\n  if (P.snap) {\n    P.snap.t += d;\n    const u = cl(P.snap.t / P.snap.T, 0, 1), m = u * u * (3 - 2 * u);\n    P.ph = P.snap.a + (P.snap.b - P.snap.a) * m;\n    if (u >= 1) P.snap = null;\n  } else {\n    P.ph = (P.ph + (d * sp) / 12) % NS;\n    // K1: run back or on to the nearer Coxeter plane, 0.4 s a stop.\n    if (input.btnPressed && input.btnPressed[0]) {\n      const b = round(P.ph / NS) * NS;\n      P.snap = { a: P.ph, b, t: 0, T: max(0.8, abs(b - P.ph) * 0.4) };\n    }\n  }\n}\n\n// One window: project the 240 roots onto the plane, draw the 6720 edges as\n// additive light, then the vertices on top.\nfunction view(P, ph, y0) {\n  const fr = P.fr, buf = P.buf, px = P.px, py = P.py;\n  const a = frameAt(ph, fr), ca = cos(a), sa = sin(a);\n  let rmax = 0;\n  for (let i = 0; i \u003c NV; i++) {\n    let x = 0, y = 0;\n    for (let d = 0, o = i * 8; d \u003c 8; d++) (x += RF[o + d] * fr[d]), (y += RF[o + d] * fr[8 + d]);\n    px[i] = ca * x - sa * y;\n    py[i] = sa * x + ca * y;\n    rmax = max(rmax, px[i] * px[i] + py[i] * py[i]);\n  }\n  const sc = RAD / sqrt(rmax), cy = y0 + 31.5;\n  for (let i = 0; i \u003c NV; i++) (px[i] = CX + px[i] * sc - 0.5), (py[i] = cy + py[i] * sc - 0.5);\n  const ew = P.ew \u003c= -1 ? 0 : 0.012 * (P.ew + 1) * (P.ew + 1), ec = P.ec, W3 = W * 3;\n  // RAD keeps every point a pixel inside the window, so no line needs clipping.\n  if (ew > 0)\n    for (let j = 0; j \u003c NE; j++) {\n      const i0 = EI[2 * j], i1 = EI[2 * j + 1];\n      let x = px[i0], y = py[i0];\n      const dx = px[i1] - x, dy = py[i1] - y, adx = dx \u003c 0 ? -dx : dx, ady = dy \u003c 0 ? -dy : dy;\n      const n = ceil(adx > ady ? adx : ady) || 1, w = (ew * sqrt(dx * dx + dy * dy)) / n;\n      const r = ec[j * 3] * w, g = ec[j * 3 + 1] * w, b = ec[j * 3 + 2] * w, sx = dx / n, sy = dy / n;\n      for (let s = 0; s \u003c= n; s++, x += sx, y += sy) {\n        const xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n        const w11 = fx * fy, w10 = fx - w11, w01 = fy - w11, w00 = 1 - fx - w01;\n        buf[q] += r * w00;\n        buf[q + 1] += g * w00;\n        buf[q + 2] += b * w00;\n        buf[q + 3] += r * w10;\n        buf[q + 4] += g * w10;\n        buf[q + 5] += b * w10;\n        buf[q + W3] += r * w01;\n        buf[q + W3 + 1] += g * w01;\n        buf[q + W3 + 2] += b * w01;\n        buf[q + W3 + 3] += r * w11;\n        buf[q + W3 + 4] += g * w11;\n        buf[q + W3 + 5] += b * w11;\n      }\n    }\n  // With the web turned off the vertices burn brighter.\n  const vc = P.vc, vw = 0.6 + 0.5 * max(0, -P.ew);\n  for (let i = 0; i \u003c NV; i++) {\n    const x = px[i], y = py[i], xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n    const w11 = fx * fy * vw, w10 = fx * vw - w11, w01 = fy * vw - w11, w00 = vw - fx * vw - w01;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = vc[i * 3 + c];\n      buf[q + c] += v * w00;\n      buf[q + 3 + c] += v * w10;\n      buf[q + W3 + c] += v * w01;\n      buf[q + W3 + 3 + c] += v * w11;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf;\n  buf.fill(0);\n  view(P, P.ph, 0);\n  view(P, P.ph + P.lead, HV);\n  for (let p = 0, y = 0; y \u003c 2 * HV; y++)\n    for (let x = 0; x \u003c W; x++, p += 3)\n      display.setPixel(x, y, 255 * (1 - exp(-1.6 * buf[p])), 255 * (1 - exp(-1.6 * buf[p + 1])), 255 * (1 - exp(-1.6 * buf[p + 2])));\n}\n","layer":{"id":"layer-gosset-polytope","type":"code","name":"gosset-polytope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gosset Polytope\n// Family:  geometry\n// Idea:    The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gosset's 4₂₁ polytope (Thorold Gosset, 1900) and the E8 root system (Wilhelm Killing 1888, Élie Cartan 1894), in Peter McMullen's Petrie projection, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5\n//\n// Knob 1: Hue. Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan.\n// Knob 2: Speed. At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes.\n// Knob 3: Edges. How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white.\n// Knob 4: Plane. How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind.\n// Buttons: K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.\n\n// Each window is 64 LEDs square; the polytope fills a circle of radius 29.5\n// in it, so the outer ring of the Coxeter plane picture has 30 vertices about\n// six LEDs apart and the inner one 30 on a circle of radius six.\nconst W = 64, HV = 64, CX = 31.5, RAD = 29.5;\nconst { max, floor, ceil, round, sqrt, cos, sin, abs, exp, atan2, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst dot = (a, b) => a.reduce((s, x, i) => s + x * b[i], 0);\n\n// The roots: every (±1, ±1, 0, 0, 0, 0, 0, 0) in any order, 112 of them,\n// and every (±1/2)^8 with an even number of minus signs, 128 more.\nconst ROOTS = [];\nfor (let i = 0; i \u003c 8; i++)\n  for (let j = i + 1; j \u003c 8; j++)\n    for (let s = 0; s \u003c 4; s++) {\n      const v = new Array(8).fill(0);\n      v[i] = s & 1 ? -1 : 1;\n      v[j] = s & 2 ? -1 : 1;\n      ROOTS.push(v);\n    }\nfor (let m = 0; m \u003c 256; m++) {\n  let neg = 0;\n  for (let k = 0; k \u003c 8; k++) neg += (m >> k) & 1;\n  if (neg % 2 === 0) ROOTS.push([...Array(8)].map((_, k) => ((m >> k) & 1 ? -0.5 : 0.5)));\n}\nconst NV = ROOTS.length;\nconst RF = new Float64Array(NV * 8);\nROOTS.forEach((r, i) => r.forEach((x, k) => (RF[i * 8 + k] = x)));\n\n// Two roots are joined when they stand sqrt 2 apart, when their dot product\n// is 1: 56 edges at each vertex, 6720 in all.\nconst EDGE = [];\nfor (let i = 0; i \u003c NV; i++) for (let j = i + 1; j \u003c NV; j++) if (dot(ROOTS[i], ROOTS[j]) === 1) EDGE.push(i, j);\nconst NE = EDGE.length / 2;\nconst EI = Uint16Array.from(EDGE);\n\n// The simple roots of E8 (Bourbaki's numbering): a1 is the spinor root, a2\n// hangs off a4, and a1 a3 a4 a5 a6 a7 a8 is the long arm.\nconst e = (i, s = 1, j = -1, t = 0) => [...Array(8)].map((_, k) => (k === i ? s : k === j ? t : 0));\nconst SIMPLE = [[0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5], e(0, 1, 1, 1), e(1, 1, 0, -1), e(2, 1, 1, -1), e(3, 1, 2, -1), e(4, 1, 3, -1), e(5, 1, 4, -1), e(6, 1, 5, -1)];\n\n// The Coxeter plane of a simply laced root system from its simple roots\n// (Steinberg): colour the Dynkin diagram black and white, take the\n// Perron-Frobenius vector x of the diagram, and the plane is spanned by the\n// sum of x_i a_i over the black roots and the same sum over the white ones.\n// The product of all the reflections turns it by one h-th of a turn.\nfunction coxeterPlane(S) {\n  const k = S.length, adj = S.map((a) => S.map((b) => (dot(a, b) === -1 ? 1 : 0)));\n  const col = new Array(k).fill(-1), stack = [0];\n  col[0] = 0;\n  while (stack.length) {\n    const i = stack.pop();\n    for (let j = 0; j \u003c k; j++) if (adj[i][j] && col[j] \u003c 0) (col[j] = 1 - col[i]), stack.push(j);\n  }\n  let x = new Array(k).fill(1), lam = 0;\n  for (let it = 0; it \u003c 600; it++) {\n    const y = x.map((xi, i) => 2 * xi + adj[i].reduce((s, a, j) => s + a * x[j], 0));\n    lam = sqrt(dot(y, y)) - 2;\n    x = y.map((v) => v / (lam + 2));\n  }\n  const u = new Array(8).fill(0), w = new Array(8).fill(0);\n  S.forEach((a, i) => a.forEach((ai, d) => ((col[i] ? w : u)[d] += x[i] * ai)));\n  const nu = sqrt(dot(u, u));\n  for (let d = 0; d \u003c 8; d++) u[d] /= nu;\n  const pr = dot(w, u);\n  for (let d = 0; d \u003c 8; d++) w[d] -= pr * u[d];\n  const nw = sqrt(dot(w, w));\n  // The diagram's largest eigenvalue is 2 cos(pi / h), h the Coxeter number.\n  return [u, w.map((v) => v / nw), round(PI / Math.acos(lam / 2))];\n}\n\n// The round: E8 (30-fold), then down the chain E8 > E7 > E6 > D5 > D4 one\n// node of the diagram at a time (18, 12, 8 and 6-fold), up through D6\n// (10-fold) and back.\nconst STOPS = [SIMPLE, SIMPLE.slice(0, 7), SIMPLE.slice(0, 6), SIMPLE.slice(1, 6), SIMPLE.slice(1, 5), SIMPLE.slice(1, 7)].map(coxeterPlane);\nconst NS = STOPS.length;\n\n// Each swing is the shortest way from one plane to the next (a geodesic in\n// the Grassmannian): the two principal angles between the planes, turned\n// through together. The frame carries its own turn within the plane from\n// one swing to the next, so the windows never jump.\nfunction svd2(a, b, c, d) {\n  const E = (a + d) / 2, F = (a - d) / 2, G = (c + b) / 2, H = (c - b) / 2;\n  const Q = hypot(E, H), R = hypot(F, G), a1 = atan2(G, F), a2 = atan2(H, E);\n  // C = rot(phi) diag(Q + R, Q - R) rot(theta)\n  return { s1: Q + R, s2: Q - R, phi: (a2 + a1) / 2, th: (a2 - a1) / 2 };\n}\nconst comb = (p, q, cp, cq) => p.map((x, i) => cp * x + cq * q[i]);\n// Each stop is shown turned so a vertex of its outer polygon points straight\n// up; the turn is picked among the h equal ones to be the nearest to the\n// last, and the swing eases from one to the next.\nfunction upright(u, v, h, near) {\n  let best = 0, a = 0;\n  for (const r of ROOTS) {\n    const x = dot(r, u), y = dot(r, v), q = hypot(x, y);\n    if (q > best + 1e-9) (best = q), (a = atan2(y, x));\n  }\n  const t = -PI / 2 - a, step = (2 * PI) / h;\n  return t + round((near - t) / step) * step;\n}\nconst SEG = [];\nlet F = STOPS[0], turn = upright(F[0], F[1], 30, 0);\nfor (let k = 0; k \u003c NS; k++) {\n  let [v1, v2, h] = STOPS[(k + 1) % NS];\n  const [f1, f2] = F;\n  if (dot(f1, v1) * dot(f2, v2) - dot(f1, v2) * dot(f2, v1) \u003c 0) v2 = v2.map((x) => -x);\n  const { s1, s2, phi, th } = svd2(dot(f1, v1), dot(f1, v2), dot(f2, v1), dot(f2, v2));\n  const ca = cos(phi), sa = sin(phi), cb = cos(-th), sb = sin(-th);\n  // Principal vectors: P = F rot(phi), Q = V rot(theta)^T.\n  const p = [comb(f1, f2, ca, sa), comb(f1, f2, -sa, ca)];\n  const q = [comb(v1, v2, cb, sb), comb(v1, v2, -sb, cb)];\n  const ang = [], n = [];\n  [s1, s2].forEach((s, i) => {\n    const t = comb(q[i], p[i], 1, -cl(s, -1, 1)), nt = sqrt(dot(t, t));\n    ang.push(Math.acos(cl(s, -1, 1)));\n    n.push(nt > 1e-9 ? t.map((x) => x / nt) : new Array(8).fill(0));\n  });\n  F = [comb(q[0], q[1], cos(phi), -sin(phi)), comb(q[0], q[1], sin(phi), cos(phi))];\n  // Back on the Coxeter plane the frame may come round mirrored; the\n  // picture there is symmetric under the mirror, so turning a vertex up\n  // closes the loop all the same.\n  const next = upright(F[0], F[1], h, turn);\n  SEG.push({ p, n, ang, phi, t0: turn, t1: next });\n  turn = next;\n}\n\n// Where the frame stands at phase s (in stops): hold 5/12 of each stop, then\n// swing to the next with a smooth start and end. Returns the turn.\nconst HOLD = 5 / 12;\nfunction frameAt(s, out) {\n  const n = ((s % NS) + NS) % NS, k = floor(n), f = n - k, G = SEG[k];\n  let m = cl((f - HOLD) / (1 - HOLD), 0, 1);\n  m = m * m * m * (m * (m * 6 - 15) + 10);\n  const c1 = cos(m * G.ang[0]), s1 = sin(m * G.ang[0]), c2 = cos(m * G.ang[1]), s2 = sin(m * G.ang[1]);\n  const cp = cos(G.phi), sp = sin(G.phi);\n  for (let d = 0; d \u003c 8; d++) {\n    const g1 = c1 * G.p[0][d] + s1 * G.n[0][d], g2 = c2 * G.p[1][d] + s2 * G.n[1][d];\n    out[d] = g1 * cp - g2 * sp;\n    out[8 + d] = g1 * sp + g2 * cp;\n  }\n  return G.t0 + (G.t1 - G.t0) * m;\n}\n\n// Eight rings of 30 on the Coxeter plane; each vertex keeps the colour of\n// its ring wherever the swings carry it.\nconst RING = new Uint8Array(NV);\n{\n  const [u, v] = STOPS[0], rr = ROOTS.map((r) => hypot(dot(r, u), dot(r, v)));\n  const sorted = [...rr].sort((a, b) => a - b), levels = sorted.filter((x, i) => i === 0 || x - sorted[i - 1] > 1e-3);\n  rr.forEach((x, i) => (RING[i] = levels.filter((l) => l \u003c x + 1e-3).length - 1));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = {\n    ph: 0, lead: 1, hue: -1, ew: 1, snap: null,\n    buf: new Float32Array(W * HV * 2 * 3), fr: new Float64Array(16),\n    px: new Float32Array(NV), py: new Float32Array(NV),\n    vc: new Float32Array(NV * 3), ec: new Float32Array(NE * 3), rc: new Float32Array(8 * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.lead = cl(k[3], 1, 5);\n  P.ew = cl(k[2], -1, 1);\n  const hue = k[0] || 0;\n  if (hue !== P.hue) {\n    P.hue = hue;\n    for (let r = 0; r \u003c 8; r++) hsv(0.15 + hue - r * 0.095, 0.95 - 0.02 * r, 1, P.rc, r * 3);\n    for (let i = 0; i \u003c NV; i++) for (let c = 0; c \u003c 3; c++) P.vc[i * 3 + c] = P.rc[RING[i] * 3 + c];\n    for (let j = 0; j \u003c NE; j++) for (let c = 0; c \u003c 3; c++) P.ec[j * 3 + c] = (P.vc[EI[2 * j] * 3 + c] + P.vc[EI[2 * j + 1] * 3 + c]) / 2;\n  }\n  if (P.snap) {\n    P.snap.t += d;\n    const u = cl(P.snap.t / P.snap.T, 0, 1), m = u * u * (3 - 2 * u);\n    P.ph = P.snap.a + (P.snap.b - P.snap.a) * m;\n    if (u >= 1) P.snap = null;\n  } else {\n    P.ph = (P.ph + (d * sp) / 12) % NS;\n    // K1: run back or on to the nearer Coxeter plane, 0.4 s a stop.\n    if (input.btnPressed && input.btnPressed[0]) {\n      const b = round(P.ph / NS) * NS;\n      P.snap = { a: P.ph, b, t: 0, T: max(0.8, abs(b - P.ph) * 0.4) };\n    }\n  }\n}\n\n// One window: project the 240 roots onto the plane, draw the 6720 edges as\n// additive light, then the vertices on top.\nfunction view(P, ph, y0) {\n  const fr = P.fr, buf = P.buf, px = P.px, py = P.py;\n  const a = frameAt(ph, fr), ca = cos(a), sa = sin(a);\n  let rmax = 0;\n  for (let i = 0; i \u003c NV; i++) {\n    let x = 0, y = 0;\n    for (let d = 0, o = i * 8; d \u003c 8; d++) (x += RF[o + d] * fr[d]), (y += RF[o + d] * fr[8 + d]);\n    px[i] = ca * x - sa * y;\n    py[i] = sa * x + ca * y;\n    rmax = max(rmax, px[i] * px[i] + py[i] * py[i]);\n  }\n  const sc = RAD / sqrt(rmax), cy = y0 + 31.5;\n  for (let i = 0; i \u003c NV; i++) (px[i] = CX + px[i] * sc - 0.5), (py[i] = cy + py[i] * sc - 0.5);\n  const ew = P.ew \u003c= -1 ? 0 : 0.012 * (P.ew + 1) * (P.ew + 1), ec = P.ec, W3 = W * 3;\n  // RAD keeps every point a pixel inside the window, so no line needs clipping.\n  if (ew > 0)\n    for (let j = 0; j \u003c NE; j++) {\n      const i0 = EI[2 * j], i1 = EI[2 * j + 1];\n      let x = px[i0], y = py[i0];\n      const dx = px[i1] - x, dy = py[i1] - y, adx = dx \u003c 0 ? -dx : dx, ady = dy \u003c 0 ? -dy : dy;\n      const n = ceil(adx > ady ? adx : ady) || 1, w = (ew * sqrt(dx * dx + dy * dy)) / n;\n      const r = ec[j * 3] * w, g = ec[j * 3 + 1] * w, b = ec[j * 3 + 2] * w, sx = dx / n, sy = dy / n;\n      for (let s = 0; s \u003c= n; s++, x += sx, y += sy) {\n        const xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n        const w11 = fx * fy, w10 = fx - w11, w01 = fy - w11, w00 = 1 - fx - w01;\n        buf[q] += r * w00;\n        buf[q + 1] += g * w00;\n        buf[q + 2] += b * w00;\n        buf[q + 3] += r * w10;\n        buf[q + 4] += g * w10;\n        buf[q + 5] += b * w10;\n        buf[q + W3] += r * w01;\n        buf[q + W3 + 1] += g * w01;\n        buf[q + W3 + 2] += b * w01;\n        buf[q + W3 + 3] += r * w11;\n        buf[q + W3 + 4] += g * w11;\n        buf[q + W3 + 5] += b * w11;\n      }\n    }\n  // With the web turned off the vertices burn brighter.\n  const vc = P.vc, vw = 0.6 + 0.5 * max(0, -P.ew);\n  for (let i = 0; i \u003c NV; i++) {\n    const x = px[i], y = py[i], xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n    const w11 = fx * fy * vw, w10 = fx * vw - w11, w01 = fy * vw - w11, w00 = vw - fx * vw - w01;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = vc[i * 3 + c];\n      buf[q + c] += v * w00;\n      buf[q + 3 + c] += v * w10;\n      buf[q + W3 + c] += v * w01;\n      buf[q + W3 + 3 + c] += v * w11;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf;\n  buf.fill(0);\n  view(P, P.ph, 0);\n  view(P, P.ph + P.lead, HV);\n  for (let p = 0, y = 0; y \u003c 2 * HV; y++)\n    for (let x = 0; x \u003c W; x++, p += 3)\n      display.setPixel(x, y, 255 * (1 - exp(-1.6 * buf[p])), 255 * (1 - exp(-1.6 * buf[p + 1])), 255 * (1 - exp(-1.6 * buf[p + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes."},{"name":"Edges","min":-1,"max":1,"about":"How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white."},{"name":"Plane","min":1,"max":5,"about":"How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind."}],"start":[0,2,0,1],"measures":{"motion":0.1027,"detail":0.0626,"edges":0.2381,"complexity":1.7381,"coverage":0.5762,"colour":0.1523,"drift":0.0443},"knobResponse":[0.101,0.0579,0.4228,0.087]},{"slug":"guilloche","title":"Guilloché","family":"line","round":16,"note":"장미 기관으로 깎은 은판의 보리알 띠와 물결 띠가 패널 높이의 타원으로 서고, 등불이 돌면 그 쪽을 향한 홈만 금빛으로 번쩍여요. K1 을 누르면 칼끝이 귀퉁이에서 가운데로 들어오며 판을 새 무늬로 다시 깎아요.","idea":"An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.","buttons":"K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.","code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","layer":{"id":"layer-guilloche","type":"code","name":"guilloche","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"Silver at 0, then champagne, yellow gold and rose gold at the far end."},{"name":"Light","min":0,"max":4,"about":"How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift."},{"name":"Lobes","min":12,"max":36,"about":"Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer."},{"name":"Phasing","min":0,"max":0.5,"about":"How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn."}],"start":[0,2,12,0.06],"measures":{"motion":0.3271,"detail":0.2382,"edges":0.6848,"complexity":2.494,"coverage":1,"colour":0.0828,"drift":0.1447},"knobResponse":[0.1324,0.1841,0.2378,0.2082]},{"slug":"hair-gloss","title":"Hair Gloss","family":"cosmetic","round":34,"note":"판 전체에 윤기 나는 긴 머리카락 230가닥이 위에서 끝까지 늘어져 산들바람에 흔들려요. 가닥이 빛과 눈의 반벡터에 직각인 줄에 흰 광택 띠가 서고 그 아래로 머리색의 둘째 띠가 따라와 머리가 흔들릴 때마다 오르내리며, 9초마다 보이지 않는 빗이 내려가 빗살 자리를 가르고 지나간 자리를 더 매끄럽고 반짝이게 해요.","idea":"Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.","buttons":"K1 tap sends the comb through now.","code":"// ===== Patternflow pattern =====\n// Title:   Hair Gloss\n// Family:  cosmetic\n// Idea:    Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the shine band of glossy hair in haircare displays; the highlights are a fibre highlight (James Kajiya and Timothy Kay, 1989), the white one shifted toward the root and a tinted one toward the tip (Stephen Marschner and others, 2003)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1\n//\n// Knob 1: Hue. The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue.\n// Knob 2: Speed. At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Wave. At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1.\n// Knob 4: Shine. How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it.\n// Buttons: K1 tap sends the comb through now.\n\nconst W = 64, H = 128, N = 230, Y0 = -2, ROWS = 160;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The sheet of hair leans toward the eye by tz per row. The primary highlight\n// sits where a strand's tangent is square to the half vector, tz about 0.3.\nconst TZ0 = -HY / HZ;\n\n// A smooth wobble along one strand: three sines at random pitch.\nfunction wobble(out, o) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c ROWS; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, wave: 0, shine: 0, begun: false, t: 0,\n    comb: -10, combing: false, combWait: 1.2, teeth: 0,\n    X0: new Float32Array(N), B: new Float32Array(N), SL: new Float32Array(N), D: new Float32Array(N), END: new Float32Array(N), TO: new Float32Array(N),\n    NX: new Float32Array(N * ROWS), NT: new Float32Array(N * ROWS),\n    fz: new Float32Array(ROWS).fill(1), part: new Float32Array(ROWS),\n    sx: new Float32Array(ROWS), tz: new Float32Array(ROWS), ws: new Float32Array(ROWS), wc: new Float32Array(ROWS),\n    acc: new Float32Array(W * H * 3), wt: new Float32Array(W * H), c: [0, 0, 0], body: [0, 0, 0], tint: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let i = 0; i \u003c N; i++) {\n    S.X0[i] = -7 + (78 * (i + random())) / N;\n    S.B[i] = 0.28 + 0.72 * random() ** 0.6;\n    S.TO[i] = (random() - 0.5) * 0.12;\n    S.SL[i] = (random() - 0.5) * 0.025;\n    S.D[i] = (random() - 0.5) * 0.6;\n    S.END[i] = 112 + 40 * random();\n    wobble(S.NX, i * ROWS);\n    wobble(S.NT, i * ROWS);\n  }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.t += ds;\n  // The comb: every 9 s at Speed 2 it runs down from above the panel to past\n  // the ends in 2.4 s. Hair it has passed lies smooth and loosens again over\n  // about 6 s; the partings behind its teeth close over about 1.2 s.\n  const was = S.comb;\n  if (!S.combing) {\n    S.combWait -= ds;\n    if (S.combWait \u003c= 0) startComb(S);\n  } else {\n    S.comb += (ds * 170) / 2.4;\n    if (S.comb > 160) {\n      S.combing = false;\n      S.combWait = 6.6;\n    }\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0;\n    S.fz[r] += (1 - S.fz[r]) * (1 - exp(-ds / 6));\n    S.part[r] *= exp(-ds / 1.2);\n    // The teeth bite over the 8 rows behind the comb's edge.\n    if (S.combing && y \u003c S.comb) {\n      const a = sm(0, 8, S.comb - y);\n      S.fz[r] = min(S.fz[r], 1 - 0.55 * a);\n      S.part[r] = max(S.part[r], a * (y >= was - 9 ? 1 : 0));\n    }\n  }\n}\n\nfunction startComb(S) {\n  S.combing = true;\n  S.comb = -10;\n  S.teeth = random() * 7;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wave = cl(k[2], 0, 1);\n  S.shine = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open with the band a third of the way down and rising.\n    S.t = 1.5;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.combing) startComb(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { acc, wt, sx, tz, ws, wc, fz, part, NX, NT, X0, B, SL, D, END, c, body, tint } = S;\n  acc.fill(0);\n  wt.fill(0);\n  const t = S.t, wv = S.wave;\n  // Per row: the breeze, a wave running down the hair that grows toward the\n  // ends; the lean of the sheet, which puts the shine band where tz meets\n  // TZ0 and slides it up and down as the hair sways; and the waves of wavy\n  // hair, sideways and in depth a quarter turn apart.\n  const yb = 46 + 13 * sin(2 * PI * (t / 6.5)) + 4 * sin(2 * PI * (t / 2.9) + 1);\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0, reach = ((y + 30) / 160) ** 1.6;\n    sx[r] = 3.2 * reach * sin(2 * PI * (y / 120 - t / 4.6)) + 1.1 * reach * sin(2 * PI * (y / 45 - t / 2.3) + 2);\n    const a = (2 * PI * y) / 44;\n    tz[r] = TZ0 + 0.016 * (1 - 0.6 * wv) * (yb - y) + 0.3 * wv * sin(a + 0.6 * sin(2 * PI * (t / 7.3)));\n    ws[r] = 3 * wv * cos(a);\n    wc[r] = 3 * wv * -sin(a);\n  }\n  const sh = S.shine, p1 = 0.5 * 320 * 4 ** sh, k1 = 0.9 + 0.4 * sh, p2 = 0.4 * p1, k2 = 0.45 + 0.15 * sh, k0 = 0.24 * (1 - sh);\n  const teeth = S.teeth;\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * ROWS, cd = cos(D[i]), sd = sin(D[i]), end = END[i], b = B[i], to = S.TO[i], x0 = X0[i], sl = SL[i];\n    let px = 0;\n    const last = min(H - 1, floor(end));\n    for (let r = 0; r \u003c= last - Y0; r++) {\n      const y = r + Y0, f = fz[r];\n      let x = x0 + sl * y + sx[r] + ws[r] * cd + wc[r] * sd + 0.4 * f * NX[o + r];\n      // Behind the comb the strands part round its teeth, 7 LEDs apart: each\n      // gap of 7 closes to 5.7, leaving a dark parting 1.3 LEDs wide.\n      const m = part[r];\n      if (m > 0.01) {\n        const u = (x - teeth) / 7, e = u - floor(u) - 0.5;\n        x -= m * 1.3 * e;\n      }\n      const tx = x - px;\n      px = x;\n      if (y \u003c 0) continue;\n      const z = tz[r] + to * f + 0.06 * f * NT[o + r];\n      const inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv;\n      // The primary highlight is shifted toward the root, the secondary,\n      // tinted by the hair, toward the tip.\n      const t1 = th - 0.05, t2 = th + 0.11;\n      const smooth = 1 + 0.45 * (1 - f);\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      // A sharp band and, wider and weaker, the sheen round it that a duller\n      // finish spreads out.\n      const s1 = smooth * (k1 * exp(p1 * l1) + k0 * exp(5 * l1)), s2 = smooth * k2 * exp(p2 * log(max(1e-6, 1 - t2 * t2)));\n      const lam = (0.55 * z + 0.82) / sqrt(1 + z * z), dif = b * (0.3 + 0.7 * max(0, lam));\n      const tip = cl((end - y) / 7, 0, 1), w0 = tip * (0.4 + 0.6 * tip);\n      const xi = floor(x), fr = x - xi, q = y * W + xi;\n      if (xi >= 0 && xi \u003c W) {\n        const w = (1 - fr) * w0;\n        acc[q * 3] += dif * w;\n        acc[q * 3 + 1] += s2 * b * w;\n        acc[q * 3 + 2] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q] += w;\n      }\n      if (xi + 1 >= 0 && xi + 1 \u003c W) {\n        const w = fr * w0;\n        acc[q * 3 + 3] += dif * w;\n        acc[q * 3 + 4] += s2 * b * w;\n        acc[q * 3 + 5] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q + 1] += w;\n      }\n    }\n  }\n  // Each LED: the mean of the strands over it, darker where they are fewer\n  // than 2.4. Channel 0 holds the body, 1 the tinted secondary, 2 the white\n  // primary.\n  // Orange and yellow read brown and olive at mid level on the panel, so\n  // round hue 0.12 the hair is lifted toward copper and honey blonde.\n  const h = S.hue + 0.76, hh = h - floor(h), warm = max(0, 1 - Math.abs(hh - 0.12) / 0.11);\n  hsv(h, 0.78 - 0.18 * warm, 1 + 0.6 * warm, body);\n  hsv(h, 0.8 - 0.2 * warm, 1, tint);\n  const RHO = (N / 78) * 0.8;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO);\n      const dv = acc[q * 3] / n, s2 = acc[q * 3 + 1] / n, s1 = acc[q * 3 + 2] / n;\n      for (let ch = 0; ch \u003c 3; ch++) c[ch] = 0.52 * dv * body[ch] + 0.9 * s2 * tint[ch] + s1 * (0.8 + 0.2 * tint[ch]);\n      display.setPixel(x, y, round(255 * (1 - exp(-1.4 * c[0]))), round(255 * (1 - exp(-1.4 * c[1]))), round(255 * (1 - exp(-1.4 * c[2]))));\n    }\n}\n","layer":{"id":"layer-hair-gloss","type":"code","name":"hair-gloss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hair Gloss\n// Family:  cosmetic\n// Idea:    Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the shine band of glossy hair in haircare displays; the highlights are a fibre highlight (James Kajiya and Timothy Kay, 1989), the white one shifted toward the root and a tinted one toward the tip (Stephen Marschner and others, 2003)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1\n//\n// Knob 1: Hue. The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue.\n// Knob 2: Speed. At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Wave. At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1.\n// Knob 4: Shine. How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it.\n// Buttons: K1 tap sends the comb through now.\n\nconst W = 64, H = 128, N = 230, Y0 = -2, ROWS = 160;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The sheet of hair leans toward the eye by tz per row. The primary highlight\n// sits where a strand's tangent is square to the half vector, tz about 0.3.\nconst TZ0 = -HY / HZ;\n\n// A smooth wobble along one strand: three sines at random pitch.\nfunction wobble(out, o) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c ROWS; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, wave: 0, shine: 0, begun: false, t: 0,\n    comb: -10, combing: false, combWait: 1.2, teeth: 0,\n    X0: new Float32Array(N), B: new Float32Array(N), SL: new Float32Array(N), D: new Float32Array(N), END: new Float32Array(N), TO: new Float32Array(N),\n    NX: new Float32Array(N * ROWS), NT: new Float32Array(N * ROWS),\n    fz: new Float32Array(ROWS).fill(1), part: new Float32Array(ROWS),\n    sx: new Float32Array(ROWS), tz: new Float32Array(ROWS), ws: new Float32Array(ROWS), wc: new Float32Array(ROWS),\n    acc: new Float32Array(W * H * 3), wt: new Float32Array(W * H), c: [0, 0, 0], body: [0, 0, 0], tint: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let i = 0; i \u003c N; i++) {\n    S.X0[i] = -7 + (78 * (i + random())) / N;\n    S.B[i] = 0.28 + 0.72 * random() ** 0.6;\n    S.TO[i] = (random() - 0.5) * 0.12;\n    S.SL[i] = (random() - 0.5) * 0.025;\n    S.D[i] = (random() - 0.5) * 0.6;\n    S.END[i] = 112 + 40 * random();\n    wobble(S.NX, i * ROWS);\n    wobble(S.NT, i * ROWS);\n  }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.t += ds;\n  // The comb: every 9 s at Speed 2 it runs down from above the panel to past\n  // the ends in 2.4 s. Hair it has passed lies smooth and loosens again over\n  // about 6 s; the partings behind its teeth close over about 1.2 s.\n  const was = S.comb;\n  if (!S.combing) {\n    S.combWait -= ds;\n    if (S.combWait \u003c= 0) startComb(S);\n  } else {\n    S.comb += (ds * 170) / 2.4;\n    if (S.comb > 160) {\n      S.combing = false;\n      S.combWait = 6.6;\n    }\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0;\n    S.fz[r] += (1 - S.fz[r]) * (1 - exp(-ds / 6));\n    S.part[r] *= exp(-ds / 1.2);\n    // The teeth bite over the 8 rows behind the comb's edge.\n    if (S.combing && y \u003c S.comb) {\n      const a = sm(0, 8, S.comb - y);\n      S.fz[r] = min(S.fz[r], 1 - 0.55 * a);\n      S.part[r] = max(S.part[r], a * (y >= was - 9 ? 1 : 0));\n    }\n  }\n}\n\nfunction startComb(S) {\n  S.combing = true;\n  S.comb = -10;\n  S.teeth = random() * 7;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wave = cl(k[2], 0, 1);\n  S.shine = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open with the band a third of the way down and rising.\n    S.t = 1.5;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.combing) startComb(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { acc, wt, sx, tz, ws, wc, fz, part, NX, NT, X0, B, SL, D, END, c, body, tint } = S;\n  acc.fill(0);\n  wt.fill(0);\n  const t = S.t, wv = S.wave;\n  // Per row: the breeze, a wave running down the hair that grows toward the\n  // ends; the lean of the sheet, which puts the shine band where tz meets\n  // TZ0 and slides it up and down as the hair sways; and the waves of wavy\n  // hair, sideways and in depth a quarter turn apart.\n  const yb = 46 + 13 * sin(2 * PI * (t / 6.5)) + 4 * sin(2 * PI * (t / 2.9) + 1);\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0, reach = ((y + 30) / 160) ** 1.6;\n    sx[r] = 3.2 * reach * sin(2 * PI * (y / 120 - t / 4.6)) + 1.1 * reach * sin(2 * PI * (y / 45 - t / 2.3) + 2);\n    const a = (2 * PI * y) / 44;\n    tz[r] = TZ0 + 0.016 * (1 - 0.6 * wv) * (yb - y) + 0.3 * wv * sin(a + 0.6 * sin(2 * PI * (t / 7.3)));\n    ws[r] = 3 * wv * cos(a);\n    wc[r] = 3 * wv * -sin(a);\n  }\n  const sh = S.shine, p1 = 0.5 * 320 * 4 ** sh, k1 = 0.9 + 0.4 * sh, p2 = 0.4 * p1, k2 = 0.45 + 0.15 * sh, k0 = 0.24 * (1 - sh);\n  const teeth = S.teeth;\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * ROWS, cd = cos(D[i]), sd = sin(D[i]), end = END[i], b = B[i], to = S.TO[i], x0 = X0[i], sl = SL[i];\n    let px = 0;\n    const last = min(H - 1, floor(end));\n    for (let r = 0; r \u003c= last - Y0; r++) {\n      const y = r + Y0, f = fz[r];\n      let x = x0 + sl * y + sx[r] + ws[r] * cd + wc[r] * sd + 0.4 * f * NX[o + r];\n      // Behind the comb the strands part round its teeth, 7 LEDs apart: each\n      // gap of 7 closes to 5.7, leaving a dark parting 1.3 LEDs wide.\n      const m = part[r];\n      if (m > 0.01) {\n        const u = (x - teeth) / 7, e = u - floor(u) - 0.5;\n        x -= m * 1.3 * e;\n      }\n      const tx = x - px;\n      px = x;\n      if (y \u003c 0) continue;\n      const z = tz[r] + to * f + 0.06 * f * NT[o + r];\n      const inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv;\n      // The primary highlight is shifted toward the root, the secondary,\n      // tinted by the hair, toward the tip.\n      const t1 = th - 0.05, t2 = th + 0.11;\n      const smooth = 1 + 0.45 * (1 - f);\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      // A sharp band and, wider and weaker, the sheen round it that a duller\n      // finish spreads out.\n      const s1 = smooth * (k1 * exp(p1 * l1) + k0 * exp(5 * l1)), s2 = smooth * k2 * exp(p2 * log(max(1e-6, 1 - t2 * t2)));\n      const lam = (0.55 * z + 0.82) / sqrt(1 + z * z), dif = b * (0.3 + 0.7 * max(0, lam));\n      const tip = cl((end - y) / 7, 0, 1), w0 = tip * (0.4 + 0.6 * tip);\n      const xi = floor(x), fr = x - xi, q = y * W + xi;\n      if (xi >= 0 && xi \u003c W) {\n        const w = (1 - fr) * w0;\n        acc[q * 3] += dif * w;\n        acc[q * 3 + 1] += s2 * b * w;\n        acc[q * 3 + 2] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q] += w;\n      }\n      if (xi + 1 >= 0 && xi + 1 \u003c W) {\n        const w = fr * w0;\n        acc[q * 3 + 3] += dif * w;\n        acc[q * 3 + 4] += s2 * b * w;\n        acc[q * 3 + 5] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q + 1] += w;\n      }\n    }\n  }\n  // Each LED: the mean of the strands over it, darker where they are fewer\n  // than 2.4. Channel 0 holds the body, 1 the tinted secondary, 2 the white\n  // primary.\n  // Orange and yellow read brown and olive at mid level on the panel, so\n  // round hue 0.12 the hair is lifted toward copper and honey blonde.\n  const h = S.hue + 0.76, hh = h - floor(h), warm = max(0, 1 - Math.abs(hh - 0.12) / 0.11);\n  hsv(h, 0.78 - 0.18 * warm, 1 + 0.6 * warm, body);\n  hsv(h, 0.8 - 0.2 * warm, 1, tint);\n  const RHO = (N / 78) * 0.8;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO);\n      const dv = acc[q * 3] / n, s2 = acc[q * 3 + 1] / n, s1 = acc[q * 3 + 2] / n;\n      for (let ch = 0; ch \u003c 3; ch++) c[ch] = 0.52 * dv * body[ch] + 0.9 * s2 * tint[ch] + s1 * (0.8 + 0.2 * tint[ch]);\n      display.setPixel(x, y, round(255 * (1 - exp(-1.4 * c[0]))), round(255 * (1 - exp(-1.4 * c[1]))), round(255 * (1 - exp(-1.4 * c[2]))));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Wave","min":0,"max":1,"about":"At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1."},{"name":"Shine","min":-1,"max":1,"about":"How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it."}],"start":[0,2,0,0.06],"measures":{"motion":0.1831,"detail":0.0305,"edges":0.0431,"complexity":2.5214,"coverage":0.9825,"colour":0.1258,"drift":0.1122},"knobResponse":[0.2098,0.1537,0.1722,0.1466]},{"slug":"hair-oil","title":"Hair Oil","family":"cosmetic","round":37,"note":"청록 머리결이 위에서 아래까지 흘러내리며 두 번 갈라져 끝에서는 스무 묶음이 되고, 그 위를 카지야-케이 광택 띠가 오르내려요. 금색 오일 방울이 위쪽에 떨어져 가닥을 따라 미끄러지다 갈림길에서 둘로 나뉘고, 방울이 지나간 가닥은 한 톤 짙어지며 광택이 여섯 배 날카로워진 채 13초에 반쯤 흐려져요. K3 은 1초에 떨어지는 방울을 4개까지 늘리고, 누르면 방울 12개가 위에서 한꺼번에 흘러내려요.","idea":"A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.","buttons":"K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.","code":"// ===== Patternflow pattern =====\n// Title:   Hair Oil\n// Family:  cosmetic\n// Idea:    A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after hair oil serums, with the strands lit by the Kajiya-Kay model (James Kajiya and Timothy Kay, 1989)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1\n//\n// Knob 1: Hue. The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness.\n// Knob 2: Speed. At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Drops. Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in.\n// Knob 4: Wave. At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28.\n// Buttons: K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.\n\nconst W = 64, H = 128, NB = 110, NF = 150;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\nconst TZ0 = -HY / HZ;\n\n// Locks: five across the panel near the top, each parting in two at about\n// row 53 and again at about row 92, so 20 fine locks at the ends.\nconst F1 = [45, 62], F2 = [84, 100];\n// Oil: a drop's slide speed in rows a second at Speed 2 on a strand hanging\n// straight down, the oil it leaves per row, the volume below which it soaks\n// in, and how long the gloss takes to fall to 1/e.\nconst V0 = 40, LOSS = 0.0045, VMIN = 0.08, TAU = 12, PULL = 0.55;\n\nfunction wobble(out, o, n) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c n; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, rate: 0.5, wave: 0.06, t: 0, warm: false, acc: 0,\n    // Front strands, sorted by root position, with their locks at three levels.\n    fx0: new Float32Array(NF), k0: new Int32Array(NF), k1: new Int32Array(NF), k2: new Int32Array(NF),\n    fbr: new Float32Array(NF), fto: new Float32Array(NF), bp: new Int32Array(NF), bs: new Int32Array(NF),\n    c0: new Float32Array(5), c1: new Float32Array(10), c2: new Float32Array(20), lph: new Float32Array(5),\n    bx0: new Float32Array(NB), bb: new Float32Array(NB), bto: new Float32Array(NB),\n    NX: new Float32Array((NF + NB) * H), NT: new Float32Array((NF + NB) * H),\n    xs: new Float32Array(NF * H), zs: new Float32Array(NF * H), ty: new Float32Array(NF * H), G: new Float32Array(NF * H),\n    f1: new Float32Array(H), f2: new Float32Array(H), lph1: new Float32Array(10), lph2: new Float32Array(20),\n    sa: new Float32Array(20 * H), ca: new Float32Array(20 * H), reach: new Float32Array(H), pullr: new Float32Array(H),\n    sx: new Float32Array(H), tz: new Float32Array(H), ws: new Float32Array(H), wz: new Float32Array(H),\n    drops: [], born: [],\n    ab: new Float32Array(W * H * 5), wt: new Float32Array(W * H), gl: new Float32Array(W * H), fb: new Float32Array(W * H * 3),\n    body: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], oil: [0, 0, 0],\n  });\n  for (let i = 0; i \u003c NF; i++) S.fx0[i] = -4 + (72 * (i + random())) / NF;\n  for (let i = 0; i \u003c NF; i++) {\n    S.k0[i] = min(4, floor(((S.fx0[i] + 4) / 72) * 5));\n    S.fbr[i] = 0.35 + 0.65 * random() ** 0.6;\n    S.fto[i] = (random() - 0.5) * 0.1;\n    S.bs[i] = 8 + floor(random() * 4);\n    S.bp[i] = floor(random() * 11);\n  }\n  // Each lock parts into the halves of its strands, so a fork is a real fork.\n  const split = (kin, kout, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      const mem = [];\n      for (let i = 0; i \u003c NF; i++) if (kin[i] === k) mem.push(i);\n      const half = mem.length >> 1;\n      mem.forEach((i, m) => (kout[i] = 2 * k + (m \u003c half ? 0 : 1)));\n    }\n  };\n  split(S.k0, S.k1, 5);\n  split(S.k1, S.k2, 10);\n  const centre = (kk, c, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      let s = 0, m = 0;\n      for (let i = 0; i \u003c NF; i++) if (kk[i] === k) (s += S.fx0[i]), m++;\n      c[k] = m ? s / m : 0;\n    }\n  };\n  centre(S.k0, S.c0, 5);\n  centre(S.k1, S.c1, 10);\n  centre(S.k2, S.c2, 20);\n  for (let k = 0; k \u003c 5; k++) S.lph[k] = random() * 2 * PI;\n  for (let k = 0; k \u003c 10; k++) S.lph1[k] = S.lph[k >> 1] + (k & 1 ? 1 : -1) * (0.7 + 0.5 * random());\n  for (let k = 0; k \u003c 20; k++) S.lph2[k] = S.lph1[k >> 1] + (k & 1 ? 1 : -1) * (0.5 + 0.5 * random());\n  for (let i = 0; i \u003c NB; i++) {\n    S.bx0[i] = -5 + (74 * (i + random())) / NB;\n    S.bb[i] = 0.3 + 0.7 * random();\n    S.bto[i] = (random() - 0.5) * 0.14;\n  }\n  for (let i = 0; i \u003c NF + NB; i++) {\n    wobble(S.NX, i * H, H);\n    wobble(S.NT, i * H, H);\n  }\n}\n\n// Rows: the breeze running down the hair, the waves, and the lean of the\n// sheet toward the eye, which puts the shine band where tz meets TZ0.\nfunction rows(S) {\n  const t = S.t, wv = (S.wave + 1) / 2;\n  const yb = 44 + 12 * sin(2 * PI * (t / 7)) + 3 * sin(2 * PI * (t / 3.1) + 1);\n  for (let r = 0; r \u003c H; r++) {\n    const reach = ((r + 30) / 158) ** 1.6, a = (2 * PI * r) / 40;\n    S.sx[r] = 3 * reach * sin(2 * PI * (r / 120 - t / 4.6)) + reach * sin(2 * PI * (r / 45 - t / 2.3) + 2);\n    S.ws[r] = 4 * wv * sin(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.wz[r] = 0.32 * wv * cos(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.f1[r] = sm(F1[0], F1[1], r);\n    S.f2[r] = sm(F2[0], F2[1], r);\n    S.tz[r] = TZ0 + 0.015 * (1 - 0.5 * wv) * (yb - r);\n  }\n}\n\n// Where each front strand runs this frame, and how steeply.\n// Each lock waves in its own phase, and the two halves of a lock drift a\n// third of a turn apart past its fork, so the fork opens as a Y. The phase\n// of a strand depends only on its fine lock, so the sines are taken once a\n// row for each of the 20 fine locks.\nfunction geometry(S) {\n  const { xs, zs, ty, sx, tz, f1, f2, NX, NT, G, sa, ca, reach, pullr } = S, t = S.t, wv = (S.wave + 1) / 2, sway = 0.5 * sin(2 * PI * (t / 6.1));\n  for (let r = 0; r \u003c H; r++) {\n    reach[r] = ((r + 30) / 158) ** 1.6;\n    pullr[r] = PULL * sm(3, 32, r);\n  }\n  for (let k = 0; k \u003c 20; k++) {\n    const p0 = S.lph[k >> 2], p1 = S.lph1[k >> 1], p2 = S.lph2[k];\n    for (let r = 0; r \u003c H; r++) {\n      const a = (2 * PI * r) / 40 + sway + p0 + (p1 - p0) * f1[r] + (p2 - p1) * f2[r];\n      sa[k * H + r] = 4 * wv * sin(a);\n      ca[k * H + r] = 0.32 * wv * cos(a);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const x0 = S.fx0[i], c0 = S.c0[S.k0[i]], c1 = S.c1[S.k1[i]], c2 = S.c2[S.k2[i]], o = i * H, ko = S.k2[i] * H;\n    const lock = 1.2 * sin(2 * PI * (t / 3.7) + S.lph[S.k0[i]]), to = S.fto[i];\n    let px = 0;\n    for (let r = 0; r \u003c H; r++) {\n      const c = c0 + (c1 - c0) * f1[r] + (c2 - c1) * f2[r];\n      // Oil lays a strand smoother: its own wiggle shrinks by half.\n      const g = G[o + r], calm = g \u003c 0.06 ? 1 : 1 - 0.5 * sm(0.06, 0.6, g);\n      const x = x0 + pullr[r] * (c - x0) + sx[r] + sa[ko + r] + lock * reach[r] + 0.45 * calm * NX[o + r];\n      xs[o + r] = x;\n      const tx = r ? x - px : 0, z = tz[r] + ca[ko + r] + to + 0.07 * calm * NT[o + r];\n      zs[o + r] = z;\n      ty[o + r] = 1 / sqrt(tx * tx + 1 + z * z);\n      px = x;\n    }\n  }\n}\n\nfunction spawn(S, i, y, vol) {\n  if (S.drops.length \u003c 48) S.drops.push({ i, y, vol, v: 0, age: 0, soak: 0 });\n}\n\n// The front strand whose root lies nearest x.\nfunction strandAt(S, x) {\n  let best = 0, bd = 1e9;\n  for (let i = 0; i \u003c NF; i++) {\n    const d = abs(S.fx0[i] - x);\n    if (d \u003c bd) (bd = d), (best = i);\n  }\n  return best;\n}\n\n// A drop moves down its strand, wetting the strands within its radius on\n// every row it crosses; at a fork a drop with oil enough splits, half going\n// down the sibling lock.\nfunction slide(S, dp, ds) {\n  const { xs, ty, G } = S;\n  if (dp.soak > 0) {\n    dp.soak += ds;\n    return dp.soak \u003c 0.5;\n  }\n  dp.age += ds;\n  const r0 = cl(floor(dp.y), 0, H - 1);\n  const steep = ty[dp.i * H + r0] ** 4;\n  const vt = V0 * (0.45 + 0.55 * sqrt(dp.vol)) * steep * (dp.age \u003c 0.2 ? dp.age / 0.2 : 1);\n  dp.v += (vt - dp.v) * min(1, ds * 6);\n  const y1 = dp.y + dp.v * ds;\n  for (let r = floor(dp.y) + 1; r \u003c= floor(y1); r++) {\n    if (r >= H) break;\n    if (r \u003c 0) continue;\n    const xc = xs[dp.i * H + r], rad = 0.7 + 1.3 * dp.vol, wet = 0.55 + 0.45 * min(1, dp.vol);\n    const lo = max(0, dp.i - 12), hi = min(NF - 1, dp.i + 12);\n    for (let j = lo; j \u003c= hi; j++) {\n      const q = j * H + r;\n      if (abs(xs[q] - xc) \u003c rad && G[q] \u003c wet) G[q] = wet;\n    }\n    dp.vol -= LOSS;\n    // Forks: the first at row 50, the second at row 88.\n    if ((r === 50 || r === 88) && dp.vol > 0.3) {\n      const kk = r === 50 ? S.k1 : S.k2, sib = kk[dp.i] ^ 1;\n      let best = -1, bd = 1e9;\n      for (let j = max(0, dp.i - 20); j \u003c= min(NF - 1, dp.i + 20); j++)\n        if (kk[j] === sib && abs(j - dp.i) \u003c bd) (bd = abs(j - dp.i)), (best = j);\n      if (best >= 0) {\n        dp.vol *= 0.5;\n        S.born.push({ i: best, y: r, vol: dp.vol, v: dp.v, age: 1, soak: 0 });\n      }\n    }\n  }\n  dp.y = y1;\n  if (dp.vol \u003c VMIN) dp.soak = 0.001;\n  return dp.y \u003c H + 3;\n}\n\nfunction step(S, d) {\n  const ds = d * (S.speed / 2);\n  S.t += ds;\n  rows(S);\n  geometry(S);\n  const fade = exp(-ds / TAU), G = S.G;\n  for (let q = 0; q \u003c G.length; q++) G[q] *= fade;\n  S.acc += S.rate * ds;\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    spawn(S, floor(random() * NF), 2 + random() * 22, 0.6 + 0.6 * random());\n  }\n  // A drop born at a fork waits for the end of the pass: filter would drop it.\n  S.born.length = 0;\n  S.drops = S.drops.filter((dp) => slide(S, dp, ds)).concat(S.born);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 0.5, 4);\n  S.wave = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on hair that has had oil for 20 seconds at Speed 2.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 200; i++) step(S, 0.1);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c 12; c++) spawn(S, strandAt(S, 2.6 + c * 5.3 + (random() - 0.5) * 2), 2 + random() * 4, 0.9 + 0.3 * random());\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ab, wt, gl, fb, xs, zs, G, NX, NT, sx, ws, wz, tz, body, deep, tint, oil } = S;\n  ab.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  const t = S.t;\n  // Kajiya-Kay: the band where the tangent lies square to the half vector,\n  // the white one shifted toward the root and a tinted one toward the tip.\n  // Dry hair has a soft band; oil makes it six times sharper and twice as\n  // bright, and darkens the body a shade.\n  const splat = (x, r, w0, dif, s1, s2, oilw, s3) => {\n    const xi = floor(x), fr = x - xi, q = r * W + xi;\n    for (let e = 0; e \u003c 2; e++) {\n      const xx = xi + e;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = (e ? fr : 1 - fr) * w0, p = (q + e) * 5;\n      ab[p] += dif * (1 - oilw) * w;\n      ab[p + 1] += dif * oilw * w;\n      ab[p + 2] += s1 * w;\n      ab[p + 3] += s2 * w;\n      ab[p + 4] += s3 * w;\n      wt[q + e] += w;\n    }\n  };\n  // Back layer: a dim, even curtain behind the locks.\n  for (let i = 0; i \u003c NB; i++) {\n    const o = (NF + i) * H, x0 = S.bx0[i], b = S.bb[i];\n    let px = x0;\n    for (let r = 0; r \u003c H; r++) {\n      const x = x0 + 0.8 * sx[r] + ws[r] + 0.5 * NX[o + r], tx = r ? x - px : 0;\n      px = x;\n      const z = tz[r] + wz[r] + S.bto[i] + 0.08 * NT[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const s1 = 0.35 * exp(40 * log(max(1e-6, 1 - (th - 0.05) ** 2)));\n      splat(x, r, 0.8, 0.4 * b * (0.4 + 0.6 * dif), 0.6 * s1 * b, 0, 0, 0);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const o = i * H, b = S.fbr[i], bs = S.bs[i], bp = S.bp[i];\n    for (let r = 0; r \u003c H; r++) {\n      const x = xs[o + r], tx = r ? x - xs[o + r - 1] : 0, ge = sm(0.06, 0.6, G[o + r]);\n      const z = zs[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const p1 = 70 * (1 + 5 * ge), t1 = th - 0.05, t2 = th + 0.11;\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      const s1 = (0.8 + 1.0 * ge) * exp(0.5 * p1 * l1);\n      // The oil film also gives a broad sheen of its own colour along the\n      // whole strand, which is what draws the streak down the fall.\n      const s3 = ge * (0.2 + 0.4 * exp(5 * l1));\n      const s2 = 0.45 * exp(0.5 * 0.4 * p1 * log(max(1e-6, 1 - t2 * t2)));\n      splat(x, r, 1.5, b * (0.4 + 0.6 * dif), s1 * (0.4 + 0.6 * b), s2 * b, ge, s3);\n      // The oil film on a fibre breaks into a string of tiny beads (Plateau\n      // and Rayleigh), one every 8 to 11 rows here; each holds a point of\n      // light that twinkles as the strand sways.\n      if (ge > 0.02 && (r + bp) % bs === 0) {\n        const xi = round(x);\n        if (xi >= 0 && xi \u003c W) {\n          const tw = 0.5 + 0.5 * sin(2 * PI * (t / 1.7) + i * 2.3 + r * 0.7);\n          gl[r * W + xi] += 0.9 * ge * tw * tw * tw;\n        }\n      }\n    }\n  }\n  // Colours. Orange, yellow and yellow-green read brown and olive at mid\n  // level, so from hue 0 to 0.26 the hair is lifted and paled toward rose\n  // gold, champagne and sage; deep blue reads nearly black, so round hue\n  // 0.66 it is paled a little toward cornflower.\n  const h = S.hue + 0.47, hh = h - floor(h), warm = sm(-0.03, 0.03, hh) * (1 - sm(0.22, 0.3, hh)), blue = sm(0.56, 0.62, hh) * (1 - sm(0.7, 0.77, hh));\n  hsv(h, 0.82 - 0.25 * warm - 0.22 * blue, 1 + 0.35 * warm + 0.1 * blue, body);\n  hsv(h + 0.015, 1 - 0.2 * warm - 0.1 * blue, 0.8 + 0.3 * warm + 0.1 * blue, deep);\n  hsv(h, 0.7 - 0.25 * warm - 0.15 * blue, 1, tint);\n  // The oil is the accent: two thirds of the way round from the hair, gold\n  // on teal at 0, and always at full brightness so it never goes muddy.\n  const ho = h + 0.66, oo = ho - floor(ho), ow = max(0, 1 - abs(oo - 0.1) / 0.12);\n  hsv(ho, 0.62 - 0.17 * ow, 1, oil);\n  const RHO = ((NF * 1.5 + NB * 0.8) / 72) * 0.85;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO), p = q * 5;\n      const d0 = ab[p] / n, d1 = ab[p + 1] / n, s1 = ab[p + 2] / n, s2 = ab[p + 3] / n, s3 = ab[p + 4] / n, gv = gl[q];\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const v = 0.6 * d0 * body[ch] + 0.6 * d1 * deep[ch] + 0.8 * s2 * tint[ch] + s1 * (0.82 + 0.18 * tint[ch]) + s3 * (0.5 * oil[ch] + 0.5) + gv * (0.6 * oil[ch] + 0.4);\n        fb[q * 3 + ch] = 1 - exp(-1.4 * v);\n      }\n    }\n  // The drops: a clear bead in the oil's colour, brighter toward its foot\n  // where it gathers the light, with a dark rim and a white point of light\n  // up and to the left.\n  for (const dp of S.drops) {\n    const grow = min(1, dp.age / 0.15), shrink = dp.soak > 0 ? 1 - dp.soak / 0.5 : 1;\n    const rb = (1.5 + 1.2 * sqrt(dp.vol)) * grow * shrink, r0 = cl(round(dp.y), 0, H - 1), xc = xs[dp.i * H + r0] + 0.5, yc = dp.y;\n    if (rb \u003c 0.3) continue;\n    for (let yy = floor(yc - rb - 1); yy \u003c= yc + rb + 1; yy++)\n      for (let xx = floor(xc - rb - 1); xx \u003c= xc + rb + 1; xx++) {\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const ex = xx + 0.5 - xc, ey = yy + 0.5 - yc, e = sqrt(ex * ex + ey * ey), cov = cl(rb + 0.5 - e, 0, 1);\n        if (cov \u003c= 0) continue;\n        const rim = 0.8 * sm(rb - 1.1, rb - 0.1, e), lit = 0.7 + 0.35 * cl(ey / rb, -1, 1);\n        const hot = cl(1.3 - 1.6 * sqrt((ex + 0.4 * rb) ** 2 + (ey + 0.45 * rb) ** 2), 0, 1), q = (yy * W + xx) * 3;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          const v = oil[ch] * lit * (1 - rim) + 0.15 * oil[ch] * rim + hot;\n          fb[q + ch] += (cl(v, 0, 1) - fb[q + ch]) * cov;\n        }\n      }\n  }\n  for (let q = 0; q \u003c W * H; q++) display.setPixel(q % W, (q / W) | 0, round(255 * fb[q * 3]), round(255 * fb[q * 3 + 1]), round(255 * fb[q * 3 + 2]));\n}\n","layer":{"id":"layer-hair-oil","type":"code","name":"hair-oil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hair Oil\n// Family:  cosmetic\n// Idea:    A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after hair oil serums, with the strands lit by the Kajiya-Kay model (James Kajiya and Timothy Kay, 1989)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1\n//\n// Knob 1: Hue. The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness.\n// Knob 2: Speed. At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Drops. Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in.\n// Knob 4: Wave. At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28.\n// Buttons: K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.\n\nconst W = 64, H = 128, NB = 110, NF = 150;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\nconst TZ0 = -HY / HZ;\n\n// Locks: five across the panel near the top, each parting in two at about\n// row 53 and again at about row 92, so 20 fine locks at the ends.\nconst F1 = [45, 62], F2 = [84, 100];\n// Oil: a drop's slide speed in rows a second at Speed 2 on a strand hanging\n// straight down, the oil it leaves per row, the volume below which it soaks\n// in, and how long the gloss takes to fall to 1/e.\nconst V0 = 40, LOSS = 0.0045, VMIN = 0.08, TAU = 12, PULL = 0.55;\n\nfunction wobble(out, o, n) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c n; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, rate: 0.5, wave: 0.06, t: 0, warm: false, acc: 0,\n    // Front strands, sorted by root position, with their locks at three levels.\n    fx0: new Float32Array(NF), k0: new Int32Array(NF), k1: new Int32Array(NF), k2: new Int32Array(NF),\n    fbr: new Float32Array(NF), fto: new Float32Array(NF), bp: new Int32Array(NF), bs: new Int32Array(NF),\n    c0: new Float32Array(5), c1: new Float32Array(10), c2: new Float32Array(20), lph: new Float32Array(5),\n    bx0: new Float32Array(NB), bb: new Float32Array(NB), bto: new Float32Array(NB),\n    NX: new Float32Array((NF + NB) * H), NT: new Float32Array((NF + NB) * H),\n    xs: new Float32Array(NF * H), zs: new Float32Array(NF * H), ty: new Float32Array(NF * H), G: new Float32Array(NF * H),\n    f1: new Float32Array(H), f2: new Float32Array(H), lph1: new Float32Array(10), lph2: new Float32Array(20),\n    sa: new Float32Array(20 * H), ca: new Float32Array(20 * H), reach: new Float32Array(H), pullr: new Float32Array(H),\n    sx: new Float32Array(H), tz: new Float32Array(H), ws: new Float32Array(H), wz: new Float32Array(H),\n    drops: [], born: [],\n    ab: new Float32Array(W * H * 5), wt: new Float32Array(W * H), gl: new Float32Array(W * H), fb: new Float32Array(W * H * 3),\n    body: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], oil: [0, 0, 0],\n  });\n  for (let i = 0; i \u003c NF; i++) S.fx0[i] = -4 + (72 * (i + random())) / NF;\n  for (let i = 0; i \u003c NF; i++) {\n    S.k0[i] = min(4, floor(((S.fx0[i] + 4) / 72) * 5));\n    S.fbr[i] = 0.35 + 0.65 * random() ** 0.6;\n    S.fto[i] = (random() - 0.5) * 0.1;\n    S.bs[i] = 8 + floor(random() * 4);\n    S.bp[i] = floor(random() * 11);\n  }\n  // Each lock parts into the halves of its strands, so a fork is a real fork.\n  const split = (kin, kout, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      const mem = [];\n      for (let i = 0; i \u003c NF; i++) if (kin[i] === k) mem.push(i);\n      const half = mem.length >> 1;\n      mem.forEach((i, m) => (kout[i] = 2 * k + (m \u003c half ? 0 : 1)));\n    }\n  };\n  split(S.k0, S.k1, 5);\n  split(S.k1, S.k2, 10);\n  const centre = (kk, c, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      let s = 0, m = 0;\n      for (let i = 0; i \u003c NF; i++) if (kk[i] === k) (s += S.fx0[i]), m++;\n      c[k] = m ? s / m : 0;\n    }\n  };\n  centre(S.k0, S.c0, 5);\n  centre(S.k1, S.c1, 10);\n  centre(S.k2, S.c2, 20);\n  for (let k = 0; k \u003c 5; k++) S.lph[k] = random() * 2 * PI;\n  for (let k = 0; k \u003c 10; k++) S.lph1[k] = S.lph[k >> 1] + (k & 1 ? 1 : -1) * (0.7 + 0.5 * random());\n  for (let k = 0; k \u003c 20; k++) S.lph2[k] = S.lph1[k >> 1] + (k & 1 ? 1 : -1) * (0.5 + 0.5 * random());\n  for (let i = 0; i \u003c NB; i++) {\n    S.bx0[i] = -5 + (74 * (i + random())) / NB;\n    S.bb[i] = 0.3 + 0.7 * random();\n    S.bto[i] = (random() - 0.5) * 0.14;\n  }\n  for (let i = 0; i \u003c NF + NB; i++) {\n    wobble(S.NX, i * H, H);\n    wobble(S.NT, i * H, H);\n  }\n}\n\n// Rows: the breeze running down the hair, the waves, and the lean of the\n// sheet toward the eye, which puts the shine band where tz meets TZ0.\nfunction rows(S) {\n  const t = S.t, wv = (S.wave + 1) / 2;\n  const yb = 44 + 12 * sin(2 * PI * (t / 7)) + 3 * sin(2 * PI * (t / 3.1) + 1);\n  for (let r = 0; r \u003c H; r++) {\n    const reach = ((r + 30) / 158) ** 1.6, a = (2 * PI * r) / 40;\n    S.sx[r] = 3 * reach * sin(2 * PI * (r / 120 - t / 4.6)) + reach * sin(2 * PI * (r / 45 - t / 2.3) + 2);\n    S.ws[r] = 4 * wv * sin(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.wz[r] = 0.32 * wv * cos(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.f1[r] = sm(F1[0], F1[1], r);\n    S.f2[r] = sm(F2[0], F2[1], r);\n    S.tz[r] = TZ0 + 0.015 * (1 - 0.5 * wv) * (yb - r);\n  }\n}\n\n// Where each front strand runs this frame, and how steeply.\n// Each lock waves in its own phase, and the two halves of a lock drift a\n// third of a turn apart past its fork, so the fork opens as a Y. The phase\n// of a strand depends only on its fine lock, so the sines are taken once a\n// row for each of the 20 fine locks.\nfunction geometry(S) {\n  const { xs, zs, ty, sx, tz, f1, f2, NX, NT, G, sa, ca, reach, pullr } = S, t = S.t, wv = (S.wave + 1) / 2, sway = 0.5 * sin(2 * PI * (t / 6.1));\n  for (let r = 0; r \u003c H; r++) {\n    reach[r] = ((r + 30) / 158) ** 1.6;\n    pullr[r] = PULL * sm(3, 32, r);\n  }\n  for (let k = 0; k \u003c 20; k++) {\n    const p0 = S.lph[k >> 2], p1 = S.lph1[k >> 1], p2 = S.lph2[k];\n    for (let r = 0; r \u003c H; r++) {\n      const a = (2 * PI * r) / 40 + sway + p0 + (p1 - p0) * f1[r] + (p2 - p1) * f2[r];\n      sa[k * H + r] = 4 * wv * sin(a);\n      ca[k * H + r] = 0.32 * wv * cos(a);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const x0 = S.fx0[i], c0 = S.c0[S.k0[i]], c1 = S.c1[S.k1[i]], c2 = S.c2[S.k2[i]], o = i * H, ko = S.k2[i] * H;\n    const lock = 1.2 * sin(2 * PI * (t / 3.7) + S.lph[S.k0[i]]), to = S.fto[i];\n    let px = 0;\n    for (let r = 0; r \u003c H; r++) {\n      const c = c0 + (c1 - c0) * f1[r] + (c2 - c1) * f2[r];\n      // Oil lays a strand smoother: its own wiggle shrinks by half.\n      const g = G[o + r], calm = g \u003c 0.06 ? 1 : 1 - 0.5 * sm(0.06, 0.6, g);\n      const x = x0 + pullr[r] * (c - x0) + sx[r] + sa[ko + r] + lock * reach[r] + 0.45 * calm * NX[o + r];\n      xs[o + r] = x;\n      const tx = r ? x - px : 0, z = tz[r] + ca[ko + r] + to + 0.07 * calm * NT[o + r];\n      zs[o + r] = z;\n      ty[o + r] = 1 / sqrt(tx * tx + 1 + z * z);\n      px = x;\n    }\n  }\n}\n\nfunction spawn(S, i, y, vol) {\n  if (S.drops.length \u003c 48) S.drops.push({ i, y, vol, v: 0, age: 0, soak: 0 });\n}\n\n// The front strand whose root lies nearest x.\nfunction strandAt(S, x) {\n  let best = 0, bd = 1e9;\n  for (let i = 0; i \u003c NF; i++) {\n    const d = abs(S.fx0[i] - x);\n    if (d \u003c bd) (bd = d), (best = i);\n  }\n  return best;\n}\n\n// A drop moves down its strand, wetting the strands within its radius on\n// every row it crosses; at a fork a drop with oil enough splits, half going\n// down the sibling lock.\nfunction slide(S, dp, ds) {\n  const { xs, ty, G } = S;\n  if (dp.soak > 0) {\n    dp.soak += ds;\n    return dp.soak \u003c 0.5;\n  }\n  dp.age += ds;\n  const r0 = cl(floor(dp.y), 0, H - 1);\n  const steep = ty[dp.i * H + r0] ** 4;\n  const vt = V0 * (0.45 + 0.55 * sqrt(dp.vol)) * steep * (dp.age \u003c 0.2 ? dp.age / 0.2 : 1);\n  dp.v += (vt - dp.v) * min(1, ds * 6);\n  const y1 = dp.y + dp.v * ds;\n  for (let r = floor(dp.y) + 1; r \u003c= floor(y1); r++) {\n    if (r >= H) break;\n    if (r \u003c 0) continue;\n    const xc = xs[dp.i * H + r], rad = 0.7 + 1.3 * dp.vol, wet = 0.55 + 0.45 * min(1, dp.vol);\n    const lo = max(0, dp.i - 12), hi = min(NF - 1, dp.i + 12);\n    for (let j = lo; j \u003c= hi; j++) {\n      const q = j * H + r;\n      if (abs(xs[q] - xc) \u003c rad && G[q] \u003c wet) G[q] = wet;\n    }\n    dp.vol -= LOSS;\n    // Forks: the first at row 50, the second at row 88.\n    if ((r === 50 || r === 88) && dp.vol > 0.3) {\n      const kk = r === 50 ? S.k1 : S.k2, sib = kk[dp.i] ^ 1;\n      let best = -1, bd = 1e9;\n      for (let j = max(0, dp.i - 20); j \u003c= min(NF - 1, dp.i + 20); j++)\n        if (kk[j] === sib && abs(j - dp.i) \u003c bd) (bd = abs(j - dp.i)), (best = j);\n      if (best >= 0) {\n        dp.vol *= 0.5;\n        S.born.push({ i: best, y: r, vol: dp.vol, v: dp.v, age: 1, soak: 0 });\n      }\n    }\n  }\n  dp.y = y1;\n  if (dp.vol \u003c VMIN) dp.soak = 0.001;\n  return dp.y \u003c H + 3;\n}\n\nfunction step(S, d) {\n  const ds = d * (S.speed / 2);\n  S.t += ds;\n  rows(S);\n  geometry(S);\n  const fade = exp(-ds / TAU), G = S.G;\n  for (let q = 0; q \u003c G.length; q++) G[q] *= fade;\n  S.acc += S.rate * ds;\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    spawn(S, floor(random() * NF), 2 + random() * 22, 0.6 + 0.6 * random());\n  }\n  // A drop born at a fork waits for the end of the pass: filter would drop it.\n  S.born.length = 0;\n  S.drops = S.drops.filter((dp) => slide(S, dp, ds)).concat(S.born);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 0.5, 4);\n  S.wave = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on hair that has had oil for 20 seconds at Speed 2.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 200; i++) step(S, 0.1);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c 12; c++) spawn(S, strandAt(S, 2.6 + c * 5.3 + (random() - 0.5) * 2), 2 + random() * 4, 0.9 + 0.3 * random());\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ab, wt, gl, fb, xs, zs, G, NX, NT, sx, ws, wz, tz, body, deep, tint, oil } = S;\n  ab.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  const t = S.t;\n  // Kajiya-Kay: the band where the tangent lies square to the half vector,\n  // the white one shifted toward the root and a tinted one toward the tip.\n  // Dry hair has a soft band; oil makes it six times sharper and twice as\n  // bright, and darkens the body a shade.\n  const splat = (x, r, w0, dif, s1, s2, oilw, s3) => {\n    const xi = floor(x), fr = x - xi, q = r * W + xi;\n    for (let e = 0; e \u003c 2; e++) {\n      const xx = xi + e;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = (e ? fr : 1 - fr) * w0, p = (q + e) * 5;\n      ab[p] += dif * (1 - oilw) * w;\n      ab[p + 1] += dif * oilw * w;\n      ab[p + 2] += s1 * w;\n      ab[p + 3] += s2 * w;\n      ab[p + 4] += s3 * w;\n      wt[q + e] += w;\n    }\n  };\n  // Back layer: a dim, even curtain behind the locks.\n  for (let i = 0; i \u003c NB; i++) {\n    const o = (NF + i) * H, x0 = S.bx0[i], b = S.bb[i];\n    let px = x0;\n    for (let r = 0; r \u003c H; r++) {\n      const x = x0 + 0.8 * sx[r] + ws[r] + 0.5 * NX[o + r], tx = r ? x - px : 0;\n      px = x;\n      const z = tz[r] + wz[r] + S.bto[i] + 0.08 * NT[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const s1 = 0.35 * exp(40 * log(max(1e-6, 1 - (th - 0.05) ** 2)));\n      splat(x, r, 0.8, 0.4 * b * (0.4 + 0.6 * dif), 0.6 * s1 * b, 0, 0, 0);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const o = i * H, b = S.fbr[i], bs = S.bs[i], bp = S.bp[i];\n    for (let r = 0; r \u003c H; r++) {\n      const x = xs[o + r], tx = r ? x - xs[o + r - 1] : 0, ge = sm(0.06, 0.6, G[o + r]);\n      const z = zs[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const p1 = 70 * (1 + 5 * ge), t1 = th - 0.05, t2 = th + 0.11;\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      const s1 = (0.8 + 1.0 * ge) * exp(0.5 * p1 * l1);\n      // The oil film also gives a broad sheen of its own colour along the\n      // whole strand, which is what draws the streak down the fall.\n      const s3 = ge * (0.2 + 0.4 * exp(5 * l1));\n      const s2 = 0.45 * exp(0.5 * 0.4 * p1 * log(max(1e-6, 1 - t2 * t2)));\n      splat(x, r, 1.5, b * (0.4 + 0.6 * dif), s1 * (0.4 + 0.6 * b), s2 * b, ge, s3);\n      // The oil film on a fibre breaks into a string of tiny beads (Plateau\n      // and Rayleigh), one every 8 to 11 rows here; each holds a point of\n      // light that twinkles as the strand sways.\n      if (ge > 0.02 && (r + bp) % bs === 0) {\n        const xi = round(x);\n        if (xi >= 0 && xi \u003c W) {\n          const tw = 0.5 + 0.5 * sin(2 * PI * (t / 1.7) + i * 2.3 + r * 0.7);\n          gl[r * W + xi] += 0.9 * ge * tw * tw * tw;\n        }\n      }\n    }\n  }\n  // Colours. Orange, yellow and yellow-green read brown and olive at mid\n  // level, so from hue 0 to 0.26 the hair is lifted and paled toward rose\n  // gold, champagne and sage; deep blue reads nearly black, so round hue\n  // 0.66 it is paled a little toward cornflower.\n  const h = S.hue + 0.47, hh = h - floor(h), warm = sm(-0.03, 0.03, hh) * (1 - sm(0.22, 0.3, hh)), blue = sm(0.56, 0.62, hh) * (1 - sm(0.7, 0.77, hh));\n  hsv(h, 0.82 - 0.25 * warm - 0.22 * blue, 1 + 0.35 * warm + 0.1 * blue, body);\n  hsv(h + 0.015, 1 - 0.2 * warm - 0.1 * blue, 0.8 + 0.3 * warm + 0.1 * blue, deep);\n  hsv(h, 0.7 - 0.25 * warm - 0.15 * blue, 1, tint);\n  // The oil is the accent: two thirds of the way round from the hair, gold\n  // on teal at 0, and always at full brightness so it never goes muddy.\n  const ho = h + 0.66, oo = ho - floor(ho), ow = max(0, 1 - abs(oo - 0.1) / 0.12);\n  hsv(ho, 0.62 - 0.17 * ow, 1, oil);\n  const RHO = ((NF * 1.5 + NB * 0.8) / 72) * 0.85;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO), p = q * 5;\n      const d0 = ab[p] / n, d1 = ab[p + 1] / n, s1 = ab[p + 2] / n, s2 = ab[p + 3] / n, s3 = ab[p + 4] / n, gv = gl[q];\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const v = 0.6 * d0 * body[ch] + 0.6 * d1 * deep[ch] + 0.8 * s2 * tint[ch] + s1 * (0.82 + 0.18 * tint[ch]) + s3 * (0.5 * oil[ch] + 0.5) + gv * (0.6 * oil[ch] + 0.4);\n        fb[q * 3 + ch] = 1 - exp(-1.4 * v);\n      }\n    }\n  // The drops: a clear bead in the oil's colour, brighter toward its foot\n  // where it gathers the light, with a dark rim and a white point of light\n  // up and to the left.\n  for (const dp of S.drops) {\n    const grow = min(1, dp.age / 0.15), shrink = dp.soak > 0 ? 1 - dp.soak / 0.5 : 1;\n    const rb = (1.5 + 1.2 * sqrt(dp.vol)) * grow * shrink, r0 = cl(round(dp.y), 0, H - 1), xc = xs[dp.i * H + r0] + 0.5, yc = dp.y;\n    if (rb \u003c 0.3) continue;\n    for (let yy = floor(yc - rb - 1); yy \u003c= yc + rb + 1; yy++)\n      for (let xx = floor(xc - rb - 1); xx \u003c= xc + rb + 1; xx++) {\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const ex = xx + 0.5 - xc, ey = yy + 0.5 - yc, e = sqrt(ex * ex + ey * ey), cov = cl(rb + 0.5 - e, 0, 1);\n        if (cov \u003c= 0) continue;\n        const rim = 0.8 * sm(rb - 1.1, rb - 0.1, e), lit = 0.7 + 0.35 * cl(ey / rb, -1, 1);\n        const hot = cl(1.3 - 1.6 * sqrt((ex + 0.4 * rb) ** 2 + (ey + 0.45 * rb) ** 2), 0, 1), q = (yy * W + xx) * 3;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          const v = oil[ch] * lit * (1 - rim) + 0.15 * oil[ch] * rim + hot;\n          fb[q + ch] += (cl(v, 0, 1) - fb[q + ch]) * cov;\n        }\n      }\n  }\n  for (let q = 0; q \u003c W * H; q++) display.setPixel(q % W, (q / W) | 0, round(255 * fb[q * 3]), round(255 * fb[q * 3 + 1]), round(255 * fb[q * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Drops","min":0.5,"max":4,"about":"Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in."},{"name":"Wave","min":-1,"max":1,"about":"At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28."}],"start":[0,2,0.5,0.06],"measures":{"motion":0.3092,"detail":0.0865,"edges":0.3007,"complexity":2.6843,"coverage":0.7924,"colour":0.1708,"drift":0.1096},"knobResponse":[0.1623,0.2029,0.0681,0.2493]},{"slug":"hairy-ball","title":"Hairy Ball","family":"noise","round":28,"note":"위에는 털 난 공, 아래에는 털 난 도넛이 빛을 받으며 돌아요. 공은 어떻게 빗어도 털이 갈 데 없는 가마가 하나나 둘 금빛으로 남고, 도넛은 한 바퀴 매끈하게 빗겨요. 귀퉁이의 2 와 0 은 둘의 오일러 지표예요. 누르면 둘 다 다시 빗어서 가마가 다른 자리로 뛰어요.","idea":"A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.","buttons":"K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.","code":"// ===== Patternflow pattern =====\n// Title:   Hairy Ball\n// Family:  noise\n// Idea:    A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the hairy ball theorem (Henri Poincaré 1885, L. E. J. Brouwer 1912) and the Poincaré–Hopf index theorem (Heinz Hopf, 1926), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1\n//\n// Knob 1: Hue. Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together.\n// Knob 2: Speed. At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower.\n// Knob 3: Length. The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter.\n// Knob 4: Comb. How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them.\n// Buttons: K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The sphere sits in the top half, the doughnut in the bottom half.\nconst SX = 32, SY = 31, RS = 24.5;\nconst TX = 32, TY = 97, TR = 18, TQ = 8.2;\n// Roots spread evenly at the same density on both: the doughnut's area\n// 4 pi^2 R r against the sphere's 4 pi R^2.\nconst NS = 1100, NT = round((NS * PI * TR * TQ) / (RS * RS));\n\n// Fixed grain: a seeded generator used once, so the roots never move on the skin.\nlet seed = 0x9e3779b9;\nfunction rnd() {\n  seed = (seed + 0x6d2b79f5) | 0;\n  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\n// Sphere roots on a jittered Fibonacci spiral, unit vectors.\nconst SP = new Float32Array(NS * 3), SJ = new Float32Array(NS * 2);\nfor (let i = 0; i \u003c NS; i++) {\n  const y = 1 - (2 * (i + 0.2 + 0.6 * rnd())) / NS, r = sqrt(max(0, 1 - y * y)), a = i * 2.39996323 + (rnd() - 0.5) * 0.9 * (2 / sqrt(NS)) / max(r, 0.05);\n  SP[i * 3] = r * cos(a);\n  SP[i * 3 + 1] = y;\n  SP[i * 3 + 2] = r * sin(a);\n  SJ[i * 2] = 0.8 + 0.35 * rnd();\n  SJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// Doughnut roots: u round the ring, v round the tube, v drawn with density\n// R + r cos v so the hair is as thick inside the hole as outside.\nconst TP = new Float32Array(NT * 3), TN = new Float32Array(NT * 3), TU = new Float32Array(NT * 3), TV = new Float32Array(NT * 3), TJ = new Float32Array(NT * 2);\nfor (let i = 0; i \u003c NT; i++) {\n  const u = 2 * PI * ((i * 0.7548776662 + 0.3 * rnd() / NT * 40) % 1), F = (i * 0.5698402910 + 0.5 + (rnd() - 0.5) * 0.02) % 1;\n  let v = 2 * PI * F;\n  for (let k = 0; k \u003c 8; k++) v -= (TR * v + TQ * sin(v) - 2 * PI * TR * F) / (TR + TQ * cos(v));\n  const cu = cos(u), su = sin(u), cv = cos(v), sv = sin(v), rr = TR + TQ * cv, o = i * 3;\n  TP[o] = rr * cu, TP[o + 1] = rr * su, TP[o + 2] = TQ * sv;\n  TN[o] = cv * cu, TN[o + 1] = cv * su, TN[o + 2] = sv;\n  TU[o] = -su, TU[o + 1] = cu, TU[o + 2] = 0;\n  TV[o] = -sv * cu, TV[o + 1] = -sv * su, TV[o + 2] = cv;\n  TJ[i * 2] = 0.8 + 0.35 * rnd();\n  TJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// 3x3 rotations, row major.\nconst mul = (A, B) => {\n  const C = new Array(9);\n  for (let r = 0; r \u003c 3; r++) for (let c = 0; c \u003c 3; c++) C[r * 3 + c] = A[r * 3] * B[c] + A[r * 3 + 1] * B[3 + c] + A[r * 3 + 2] * B[6 + c];\n  return C;\n};\nconst rx = (a) => [1, 0, 0, 0, cos(a), -sin(a), 0, sin(a), cos(a)];\nconst ry = (a) => [cos(a), 0, sin(a), 0, 1, 0, -sin(a), 0, cos(a)];\nconst rz = (a) => [cos(a), -sin(a), 0, sin(a), cos(a), 0, 0, 0, 1];\n\n// Light from the upper left, in front; H halfway to the eye.\nconst LX = -0.45 / 0.996, LY = -0.55 / 0.996, LZ = 0.7 / 0.996;\nconst HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The combs the sphere goes through: how far apart its two cowlicks stand\n// (1 opposite each other, 0 merged into one zero of index 2) and the angle\n// of the doughnut's hair (0 along the ring, pi/2 along the tube).\nconst PROG = [[0.55, 0.12], [0, 0.85], [1, -0.55], [0.3, 0.4], [0, -0.9], [1, 0.25]];\n\n// The sphere's body turns about its own vertical axis, tipped toward the\n// eye; the field turns inside it on its own, from the angles a.\nconst bodyM = (T) => mul(rx(-0.42 + 0.12 * sin(T * 0.21)), ry(T * 0.6));\nconst fieldM = (a, T) => mul(rz(a[0] + T * 0.09), mul(rx(a[1] + 0.5 * sin(T * 0.05 + 1)), rz(a[2])));\n// The two zeros in field coordinates sit at w = +-t on the stereographic\n// plane, symmetric about the south pole; t = 1 puts them opposite. Out\n// come both as unit vectors in M's frame.\nfunction zeros(M, t) {\n  const t2 = t * t, Z = [];\n  for (const sg of [1, -1]) {\n    const fx = (2 * sg * t) / (1 + t2), fz = (t2 - 1) / (1 + t2);\n    Z.push(M[0] * fx + M[2] * fz, M[3] * fx + M[5] * fz, M[6] * fx + M[8] * fz);\n  }\n  return Z;\n}\n// A new comb is turned so that a cowlick faces the eye for most of the\n// seven units it lasts, both of them when they stand close enough.\nfunction aim(T, sep, from) {\n  let best = -9, pick = from;\n  for (let c = 0; c \u003c 40; c++) {\n    const a = from.map((v) => v + (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.3 * Math.random()));\n    let lo = 9, sum = 0;\n    for (let j = 0; j \u003c 5; j++) {\n      const Tj = T + 0.8 + j * 1.5, Z = zeros(mul(bodyM(Tj), fieldM(a, Tj)), sep), v = max(Z[2], Z[5]) + 0.5 * min(Z[2], Z[5]);\n      (lo = min(lo, v)), (sum += v);\n    }\n    const score = lo + sum / 5;\n    if (score > best) (best = score), (pick = a);\n  }\n  return pick;\n}\n\n// 3x5 digits, one row of three bits per line, top first.\nconst DIG2 = [7, 1, 7, 4, 7], DIG0 = [7, 5, 5, 5, 7];\nfunction digit(buf, rows, x0, y0, c) {\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++)\n      if ((rows[j] >> (2 - i)) & 1) {\n        const q = ((y0 + j) * W + x0 + i) * 3;\n        for (let k = 0; k \u003c 3; k++) buf[q + k] = 40 + 120 * c[k];\n      }\n}\n\nexport function setup(params) {\n  const a = aim(-0.8, PROG[0][0], [0, 0, 0]);\n  params.s = {\n    T: 0, clock: 0, step: 0, a: a.slice(), ta: a,\n    sep: PROG[0][0], al: PROG[0][1],\n    hue: 0, len: 8, th: PI / 4,\n    buf: new Float32Array(N * 3), zb: new Float32Array(N), zh: new Float32Array(N),\n    cs: new Float32Array(3), ct: new Float32Array(3), cg: new Float32Array(3),\n  };\n}\n\nfunction recomb(P) {\n  P.step = (P.step + 1) % PROG.length;\n  P.clock = 0;\n  P.ta = aim(P.T, PROG[P.step][0], P.ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.len = cl(k[2], 8, 13);\n  P.th = (PI / 4) * (1 + cl(k[3], -1, 1));\n  const dT = d * cl(k[1], 0.2, 3) * 0.5;\n  P.T += dT;\n  P.clock += dT;\n  if (input.btnPressed && input.btnPressed[0]) recomb(P);\n  else if (P.clock > 7) recomb(P);\n  const e = 1 - exp(-max(dT, d * 0.5) * 2.4), g = PROG[P.step];\n  for (let i = 0; i \u003c 3; i++) P.a[i] += (P.ta[i] - P.a[i]) * e;\n  P.sep += (g[0] - P.sep) * e;\n  P.al += (g[1] - P.al) * e;\n}\n\n// One hair: root (x, y, z) on screen, direction (hx, hy, hz) times its\n// length, colour (r, g, b) at the tip; the root end is darker.\nfunction hair(P, x, y, z, hx, hy, hz, r, g, b) {\n  const n = max(2, ceil(Math.hypot(hx, hy) * 1.4) + 1), buf = P.buf, zb = P.zb, zh = P.zh;\n  for (let j = 0; j \u003c n; j++) {\n    const s = j / (n - 1), X = floor(x + hx * s), Y = floor(y + hy * s);\n    if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n    const p = Y * W + X, Z = z + hz * s;\n    if (Z \u003c zb[p] - 1.2 || Z \u003c= zh[p]) continue;\n    zh[p] = Z;\n    const m = 0.22 + 0.78 * s * s, q = p * 3;\n    buf[q] = r * m, buf[q + 1] = g * m, buf[q + 2] = b * m;\n  }\n}\n\n// Hair light after Kajiya and Kay: a fibre is lit by how square it lies to\n// the light and shines where it lies square to the half vector.\nfunction shade(tx, ty, tz, nx, ny, nz) {\n  const tl = tx * LX + ty * LY + tz * LZ, th = tx * HX + ty * HY + tz * HZ, nl = nx * LX + ny * LY + nz * LZ;\n  const lam = 0.22 + 0.78 * max(0, nl), dif = sqrt(max(0, 1 - tl * tl)), sp = (1 - th * th) ** 12;\n  return [lam * (0.35 + 0.65 * dif), 0.75 * sp * max(0, nl + 0.2)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf, zb = P.zb, zh = P.zh, cs = P.cs, ct = P.ct, cg = P.cg, T = P.T;\n  buf.fill(0);\n  zb.fill(-1e9);\n  zh.fill(-1e9);\n  hsv(P.hue + 0.6, 0.75, 1, cs, 0);\n  hsv(P.hue + 0.47, 0.8, 1, ct, 0);\n  hsv(P.hue + 0.12, 0.6, 1, cg, 0);\n  const pulse = 0.85 + 0.15 * sin(T * 3.1);\n\n  // The sphere.\n  const Mb = bodyM(T), Rf = fieldM(P.a, T), M = mul(Mb, Rf), t = P.sep, t2 = t * t, Z = zeros(M, t);\n  // Skin: dark, with the cowlicks glowing through.\n  const R2 = RS * RS;\n  for (let y = max(0, floor(SY - RS)); y \u003c= min(H - 1, ceil(SY + RS)); y++)\n    for (let x = max(0, floor(SX - RS)); x \u003c= min(W - 1, ceil(SX + RS)); x++) {\n      const dx = x + 0.5 - SX, dy = y + 0.5 - SY, rr = dx * dx + dy * dy;\n      if (rr >= R2) continue;\n      const dz = sqrt(R2 - rr), nx = dx / RS, ny = dy / RS, nz = dz / RS, p = y * W + x, q = p * 3;\n      zb[p] = dz;\n      const lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      const gl = exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.05) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.05);\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * (cs[c] * lam + cg[c] * min(1, gl) * 0.9 * pulse);\n    }\n  // The field: v(w) = e^{i theta} (w^2 - t^2) on the plane, carried back to\n  // the sphere. Its only zeros are w = t and w = -t, each of index 1; at\n  // t = 0 they merge into one zero of index 2. There is always one.\n  const kc = cos(P.th), ks = sin(P.th), L = P.len, lb = 0.35 - 0.02 * (L - 8);\n  for (let i = 0; i \u003c NS; i++) {\n    const o = i * 3, bx = SP[o], by = SP[o + 1], bz = SP[o + 2];\n    const nx = Mb[0] * bx + Mb[1] * by + Mb[2] * bz, ny = Mb[3] * bx + Mb[4] * by + Mb[5] * bz, nz = Mb[6] * bx + Mb[7] * by + Mb[8] * bz;\n    if (nz \u003c -0.3) continue;\n    // Into field coordinates: f = Rf^T b.\n    const fx = Rf[0] * bx + Rf[3] * by + Rf[6] * bz, fy = Rf[1] * bx + Rf[4] * by + Rf[7] * bz, fz = Rf[2] * bx + Rf[5] * by + Rf[8] * bz;\n    const den = max(1e-7, 1 - fz), a = fx / den, b = fy / den, re = a * a - b * b - t2, im = 2 * a * b;\n    const va = kc * re - ks * im, vb = ks * re + kc * im, s = 1 + a * a + b * b, qq = (a * va + b * vb) / s;\n    let gx = va - 2 * a * qq, gy = vb - 2 * b * qq, gz = 2 * qq;\n    const gn = Math.hypot(gx, gy, gz) || 1;\n    gx /= gn, gy /= gn, gz /= gn;\n    // Field direction on screen.\n    const dx = M[0] * gx + M[1] * gy + M[2] * gz, dy = M[3] * gx + M[4] * gy + M[5] * gz, dz = M[6] * gx + M[7] * gy + M[8] * gz;\n    // Near a zero the hair stands up and glows.\n    const gl = min(1, exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.07) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.07));\n    const lift = lb + 0.8 * gl, cL = cos(lift), sL = sin(lift);\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * SJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * SJ[i * 2] * li, w = 255 * sp, gg = 255 * gl * pulse;\n    hair(P, SX + RS * nx, SY + RS * ny, RS * nz, hx * len, hy * len, hz * len,\n      cs[0] * br + w + cg[0] * gg, cs[1] * br + w + cg[1] * gg, cs[2] * br + w + cg[2] * gg);\n  }\n\n  // The doughnut, seen from about 40 degrees above, spinning on its\n  // own axis and swaying. Its hair lies along cos(al) e_u + sin(al) e_v: no\n  // zero anywhere, which the torus allows because its Euler characteristic is 0.\n  const Mt = mul(ry(0.3 * sin(T * 0.13)), mul(rx(0.84 + 0.08 * sin(T * 0.17)), rz(T * 0.5)));\n  const RO = TR + TQ, ox = Mt[6], oy = Mt[7], oz = Mt[8];\n  for (let y = max(0, floor(TY - RO)); y \u003c= min(H - 1, ceil(TY + RO)); y++)\n    for (let x = max(0, floor(TX - RO)); x \u003c= min(W - 1, ceil(TX + RO)); x++) {\n      const dx = x + 0.5 - TX, dy = y + 0.5 - TY;\n      if (dx * dx + dy * dy >= RO * RO) continue;\n      // March a ray into the doughnut's own coordinates.\n      const z0 = RO + 1;\n      const px0 = Mt[0] * dx + Mt[3] * dy + Mt[6] * z0, py0 = Mt[1] * dx + Mt[4] * dy + Mt[7] * z0, pz0 = Mt[2] * dx + Mt[5] * dy + Mt[8] * z0;\n      let tt = 0, hit = false, px = 0, py = 0, pz = 0;\n      for (let it = 0; it \u003c 40 && tt \u003c 2 * z0; it++) {\n        px = px0 - ox * tt, py = py0 - oy * tt, pz = pz0 - oz * tt;\n        const qd = sqrt(px * px + py * py) - TR, dd = sqrt(qd * qd + pz * pz) - TQ;\n        if (dd \u003c 0.03) {\n          hit = true;\n          break;\n        }\n        tt += dd;\n      }\n      if (!hit) continue;\n      const rl = sqrt(px * px + py * py) || 1, bx = (px - (TR * px) / rl) / TQ, by = (py - (TR * py) / rl) / TQ, bz = pz / TQ;\n      const nx = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, ny = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, nz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n      const p = y * W + x, q = p * 3, lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      zb[p] = z0 - tt;\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * ct[c] * lam;\n    }\n  const ca = cos(P.al), sa = sin(P.al), cL = cos(lb), sL = sin(lb);\n  for (let i = 0; i \u003c NT; i++) {\n    const o = i * 3, bnx = TN[o], bny = TN[o + 1], bnz = TN[o + 2];\n    const nx = Mt[0] * bnx + Mt[1] * bny + Mt[2] * bnz, ny = Mt[3] * bnx + Mt[4] * bny + Mt[5] * bnz, nz = Mt[6] * bnx + Mt[7] * bny + Mt[8] * bnz;\n    const gx = ca * TU[o] + sa * TV[o], gy = ca * TU[o + 1] + sa * TV[o + 1], gz = ca * TU[o + 2] + sa * TV[o + 2];\n    const dx = Mt[0] * gx + Mt[1] * gy + Mt[2] * gz, dy = Mt[3] * gx + Mt[4] * gy + Mt[5] * gz, dz = Mt[6] * gx + Mt[7] * gy + Mt[8] * gz;\n    const bx = TP[o], by = TP[o + 1], bz = TP[o + 2];\n    const X = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, Y = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, Zz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * TJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * TJ[i * 2] * li, w = 255 * sp;\n    hair(P, TX + X, TY + Y, Zz, hx * len, hy * len, hz * len, ct[0] * br + w, ct[1] * br + w, ct[2] * br + w);\n  }\n\n  // The Euler characteristic beside each: 2 for the sphere, 0 for the torus.\n  digit(buf, DIG2, 59, 2, cs);\n  digit(buf, DIG0, 59, 121, ct);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-hairy-ball","type":"code","name":"hairy-ball","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hairy Ball\n// Family:  noise\n// Idea:    A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the hairy ball theorem (Henri Poincaré 1885, L. E. J. Brouwer 1912) and the Poincaré–Hopf index theorem (Heinz Hopf, 1926), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1\n//\n// Knob 1: Hue. Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together.\n// Knob 2: Speed. At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower.\n// Knob 3: Length. The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter.\n// Knob 4: Comb. How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them.\n// Buttons: K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The sphere sits in the top half, the doughnut in the bottom half.\nconst SX = 32, SY = 31, RS = 24.5;\nconst TX = 32, TY = 97, TR = 18, TQ = 8.2;\n// Roots spread evenly at the same density on both: the doughnut's area\n// 4 pi^2 R r against the sphere's 4 pi R^2.\nconst NS = 1100, NT = round((NS * PI * TR * TQ) / (RS * RS));\n\n// Fixed grain: a seeded generator used once, so the roots never move on the skin.\nlet seed = 0x9e3779b9;\nfunction rnd() {\n  seed = (seed + 0x6d2b79f5) | 0;\n  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\n// Sphere roots on a jittered Fibonacci spiral, unit vectors.\nconst SP = new Float32Array(NS * 3), SJ = new Float32Array(NS * 2);\nfor (let i = 0; i \u003c NS; i++) {\n  const y = 1 - (2 * (i + 0.2 + 0.6 * rnd())) / NS, r = sqrt(max(0, 1 - y * y)), a = i * 2.39996323 + (rnd() - 0.5) * 0.9 * (2 / sqrt(NS)) / max(r, 0.05);\n  SP[i * 3] = r * cos(a);\n  SP[i * 3 + 1] = y;\n  SP[i * 3 + 2] = r * sin(a);\n  SJ[i * 2] = 0.8 + 0.35 * rnd();\n  SJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// Doughnut roots: u round the ring, v round the tube, v drawn with density\n// R + r cos v so the hair is as thick inside the hole as outside.\nconst TP = new Float32Array(NT * 3), TN = new Float32Array(NT * 3), TU = new Float32Array(NT * 3), TV = new Float32Array(NT * 3), TJ = new Float32Array(NT * 2);\nfor (let i = 0; i \u003c NT; i++) {\n  const u = 2 * PI * ((i * 0.7548776662 + 0.3 * rnd() / NT * 40) % 1), F = (i * 0.5698402910 + 0.5 + (rnd() - 0.5) * 0.02) % 1;\n  let v = 2 * PI * F;\n  for (let k = 0; k \u003c 8; k++) v -= (TR * v + TQ * sin(v) - 2 * PI * TR * F) / (TR + TQ * cos(v));\n  const cu = cos(u), su = sin(u), cv = cos(v), sv = sin(v), rr = TR + TQ * cv, o = i * 3;\n  TP[o] = rr * cu, TP[o + 1] = rr * su, TP[o + 2] = TQ * sv;\n  TN[o] = cv * cu, TN[o + 1] = cv * su, TN[o + 2] = sv;\n  TU[o] = -su, TU[o + 1] = cu, TU[o + 2] = 0;\n  TV[o] = -sv * cu, TV[o + 1] = -sv * su, TV[o + 2] = cv;\n  TJ[i * 2] = 0.8 + 0.35 * rnd();\n  TJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// 3x3 rotations, row major.\nconst mul = (A, B) => {\n  const C = new Array(9);\n  for (let r = 0; r \u003c 3; r++) for (let c = 0; c \u003c 3; c++) C[r * 3 + c] = A[r * 3] * B[c] + A[r * 3 + 1] * B[3 + c] + A[r * 3 + 2] * B[6 + c];\n  return C;\n};\nconst rx = (a) => [1, 0, 0, 0, cos(a), -sin(a), 0, sin(a), cos(a)];\nconst ry = (a) => [cos(a), 0, sin(a), 0, 1, 0, -sin(a), 0, cos(a)];\nconst rz = (a) => [cos(a), -sin(a), 0, sin(a), cos(a), 0, 0, 0, 1];\n\n// Light from the upper left, in front; H halfway to the eye.\nconst LX = -0.45 / 0.996, LY = -0.55 / 0.996, LZ = 0.7 / 0.996;\nconst HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The combs the sphere goes through: how far apart its two cowlicks stand\n// (1 opposite each other, 0 merged into one zero of index 2) and the angle\n// of the doughnut's hair (0 along the ring, pi/2 along the tube).\nconst PROG = [[0.55, 0.12], [0, 0.85], [1, -0.55], [0.3, 0.4], [0, -0.9], [1, 0.25]];\n\n// The sphere's body turns about its own vertical axis, tipped toward the\n// eye; the field turns inside it on its own, from the angles a.\nconst bodyM = (T) => mul(rx(-0.42 + 0.12 * sin(T * 0.21)), ry(T * 0.6));\nconst fieldM = (a, T) => mul(rz(a[0] + T * 0.09), mul(rx(a[1] + 0.5 * sin(T * 0.05 + 1)), rz(a[2])));\n// The two zeros in field coordinates sit at w = +-t on the stereographic\n// plane, symmetric about the south pole; t = 1 puts them opposite. Out\n// come both as unit vectors in M's frame.\nfunction zeros(M, t) {\n  const t2 = t * t, Z = [];\n  for (const sg of [1, -1]) {\n    const fx = (2 * sg * t) / (1 + t2), fz = (t2 - 1) / (1 + t2);\n    Z.push(M[0] * fx + M[2] * fz, M[3] * fx + M[5] * fz, M[6] * fx + M[8] * fz);\n  }\n  return Z;\n}\n// A new comb is turned so that a cowlick faces the eye for most of the\n// seven units it lasts, both of them when they stand close enough.\nfunction aim(T, sep, from) {\n  let best = -9, pick = from;\n  for (let c = 0; c \u003c 40; c++) {\n    const a = from.map((v) => v + (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.3 * Math.random()));\n    let lo = 9, sum = 0;\n    for (let j = 0; j \u003c 5; j++) {\n      const Tj = T + 0.8 + j * 1.5, Z = zeros(mul(bodyM(Tj), fieldM(a, Tj)), sep), v = max(Z[2], Z[5]) + 0.5 * min(Z[2], Z[5]);\n      (lo = min(lo, v)), (sum += v);\n    }\n    const score = lo + sum / 5;\n    if (score > best) (best = score), (pick = a);\n  }\n  return pick;\n}\n\n// 3x5 digits, one row of three bits per line, top first.\nconst DIG2 = [7, 1, 7, 4, 7], DIG0 = [7, 5, 5, 5, 7];\nfunction digit(buf, rows, x0, y0, c) {\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++)\n      if ((rows[j] >> (2 - i)) & 1) {\n        const q = ((y0 + j) * W + x0 + i) * 3;\n        for (let k = 0; k \u003c 3; k++) buf[q + k] = 40 + 120 * c[k];\n      }\n}\n\nexport function setup(params) {\n  const a = aim(-0.8, PROG[0][0], [0, 0, 0]);\n  params.s = {\n    T: 0, clock: 0, step: 0, a: a.slice(), ta: a,\n    sep: PROG[0][0], al: PROG[0][1],\n    hue: 0, len: 8, th: PI / 4,\n    buf: new Float32Array(N * 3), zb: new Float32Array(N), zh: new Float32Array(N),\n    cs: new Float32Array(3), ct: new Float32Array(3), cg: new Float32Array(3),\n  };\n}\n\nfunction recomb(P) {\n  P.step = (P.step + 1) % PROG.length;\n  P.clock = 0;\n  P.ta = aim(P.T, PROG[P.step][0], P.ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.len = cl(k[2], 8, 13);\n  P.th = (PI / 4) * (1 + cl(k[3], -1, 1));\n  const dT = d * cl(k[1], 0.2, 3) * 0.5;\n  P.T += dT;\n  P.clock += dT;\n  if (input.btnPressed && input.btnPressed[0]) recomb(P);\n  else if (P.clock > 7) recomb(P);\n  const e = 1 - exp(-max(dT, d * 0.5) * 2.4), g = PROG[P.step];\n  for (let i = 0; i \u003c 3; i++) P.a[i] += (P.ta[i] - P.a[i]) * e;\n  P.sep += (g[0] - P.sep) * e;\n  P.al += (g[1] - P.al) * e;\n}\n\n// One hair: root (x, y, z) on screen, direction (hx, hy, hz) times its\n// length, colour (r, g, b) at the tip; the root end is darker.\nfunction hair(P, x, y, z, hx, hy, hz, r, g, b) {\n  const n = max(2, ceil(Math.hypot(hx, hy) * 1.4) + 1), buf = P.buf, zb = P.zb, zh = P.zh;\n  for (let j = 0; j \u003c n; j++) {\n    const s = j / (n - 1), X = floor(x + hx * s), Y = floor(y + hy * s);\n    if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n    const p = Y * W + X, Z = z + hz * s;\n    if (Z \u003c zb[p] - 1.2 || Z \u003c= zh[p]) continue;\n    zh[p] = Z;\n    const m = 0.22 + 0.78 * s * s, q = p * 3;\n    buf[q] = r * m, buf[q + 1] = g * m, buf[q + 2] = b * m;\n  }\n}\n\n// Hair light after Kajiya and Kay: a fibre is lit by how square it lies to\n// the light and shines where it lies square to the half vector.\nfunction shade(tx, ty, tz, nx, ny, nz) {\n  const tl = tx * LX + ty * LY + tz * LZ, th = tx * HX + ty * HY + tz * HZ, nl = nx * LX + ny * LY + nz * LZ;\n  const lam = 0.22 + 0.78 * max(0, nl), dif = sqrt(max(0, 1 - tl * tl)), sp = (1 - th * th) ** 12;\n  return [lam * (0.35 + 0.65 * dif), 0.75 * sp * max(0, nl + 0.2)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf, zb = P.zb, zh = P.zh, cs = P.cs, ct = P.ct, cg = P.cg, T = P.T;\n  buf.fill(0);\n  zb.fill(-1e9);\n  zh.fill(-1e9);\n  hsv(P.hue + 0.6, 0.75, 1, cs, 0);\n  hsv(P.hue + 0.47, 0.8, 1, ct, 0);\n  hsv(P.hue + 0.12, 0.6, 1, cg, 0);\n  const pulse = 0.85 + 0.15 * sin(T * 3.1);\n\n  // The sphere.\n  const Mb = bodyM(T), Rf = fieldM(P.a, T), M = mul(Mb, Rf), t = P.sep, t2 = t * t, Z = zeros(M, t);\n  // Skin: dark, with the cowlicks glowing through.\n  const R2 = RS * RS;\n  for (let y = max(0, floor(SY - RS)); y \u003c= min(H - 1, ceil(SY + RS)); y++)\n    for (let x = max(0, floor(SX - RS)); x \u003c= min(W - 1, ceil(SX + RS)); x++) {\n      const dx = x + 0.5 - SX, dy = y + 0.5 - SY, rr = dx * dx + dy * dy;\n      if (rr >= R2) continue;\n      const dz = sqrt(R2 - rr), nx = dx / RS, ny = dy / RS, nz = dz / RS, p = y * W + x, q = p * 3;\n      zb[p] = dz;\n      const lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      const gl = exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.05) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.05);\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * (cs[c] * lam + cg[c] * min(1, gl) * 0.9 * pulse);\n    }\n  // The field: v(w) = e^{i theta} (w^2 - t^2) on the plane, carried back to\n  // the sphere. Its only zeros are w = t and w = -t, each of index 1; at\n  // t = 0 they merge into one zero of index 2. There is always one.\n  const kc = cos(P.th), ks = sin(P.th), L = P.len, lb = 0.35 - 0.02 * (L - 8);\n  for (let i = 0; i \u003c NS; i++) {\n    const o = i * 3, bx = SP[o], by = SP[o + 1], bz = SP[o + 2];\n    const nx = Mb[0] * bx + Mb[1] * by + Mb[2] * bz, ny = Mb[3] * bx + Mb[4] * by + Mb[5] * bz, nz = Mb[6] * bx + Mb[7] * by + Mb[8] * bz;\n    if (nz \u003c -0.3) continue;\n    // Into field coordinates: f = Rf^T b.\n    const fx = Rf[0] * bx + Rf[3] * by + Rf[6] * bz, fy = Rf[1] * bx + Rf[4] * by + Rf[7] * bz, fz = Rf[2] * bx + Rf[5] * by + Rf[8] * bz;\n    const den = max(1e-7, 1 - fz), a = fx / den, b = fy / den, re = a * a - b * b - t2, im = 2 * a * b;\n    const va = kc * re - ks * im, vb = ks * re + kc * im, s = 1 + a * a + b * b, qq = (a * va + b * vb) / s;\n    let gx = va - 2 * a * qq, gy = vb - 2 * b * qq, gz = 2 * qq;\n    const gn = Math.hypot(gx, gy, gz) || 1;\n    gx /= gn, gy /= gn, gz /= gn;\n    // Field direction on screen.\n    const dx = M[0] * gx + M[1] * gy + M[2] * gz, dy = M[3] * gx + M[4] * gy + M[5] * gz, dz = M[6] * gx + M[7] * gy + M[8] * gz;\n    // Near a zero the hair stands up and glows.\n    const gl = min(1, exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.07) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.07));\n    const lift = lb + 0.8 * gl, cL = cos(lift), sL = sin(lift);\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * SJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * SJ[i * 2] * li, w = 255 * sp, gg = 255 * gl * pulse;\n    hair(P, SX + RS * nx, SY + RS * ny, RS * nz, hx * len, hy * len, hz * len,\n      cs[0] * br + w + cg[0] * gg, cs[1] * br + w + cg[1] * gg, cs[2] * br + w + cg[2] * gg);\n  }\n\n  // The doughnut, seen from about 40 degrees above, spinning on its\n  // own axis and swaying. Its hair lies along cos(al) e_u + sin(al) e_v: no\n  // zero anywhere, which the torus allows because its Euler characteristic is 0.\n  const Mt = mul(ry(0.3 * sin(T * 0.13)), mul(rx(0.84 + 0.08 * sin(T * 0.17)), rz(T * 0.5)));\n  const RO = TR + TQ, ox = Mt[6], oy = Mt[7], oz = Mt[8];\n  for (let y = max(0, floor(TY - RO)); y \u003c= min(H - 1, ceil(TY + RO)); y++)\n    for (let x = max(0, floor(TX - RO)); x \u003c= min(W - 1, ceil(TX + RO)); x++) {\n      const dx = x + 0.5 - TX, dy = y + 0.5 - TY;\n      if (dx * dx + dy * dy >= RO * RO) continue;\n      // March a ray into the doughnut's own coordinates.\n      const z0 = RO + 1;\n      const px0 = Mt[0] * dx + Mt[3] * dy + Mt[6] * z0, py0 = Mt[1] * dx + Mt[4] * dy + Mt[7] * z0, pz0 = Mt[2] * dx + Mt[5] * dy + Mt[8] * z0;\n      let tt = 0, hit = false, px = 0, py = 0, pz = 0;\n      for (let it = 0; it \u003c 40 && tt \u003c 2 * z0; it++) {\n        px = px0 - ox * tt, py = py0 - oy * tt, pz = pz0 - oz * tt;\n        const qd = sqrt(px * px + py * py) - TR, dd = sqrt(qd * qd + pz * pz) - TQ;\n        if (dd \u003c 0.03) {\n          hit = true;\n          break;\n        }\n        tt += dd;\n      }\n      if (!hit) continue;\n      const rl = sqrt(px * px + py * py) || 1, bx = (px - (TR * px) / rl) / TQ, by = (py - (TR * py) / rl) / TQ, bz = pz / TQ;\n      const nx = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, ny = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, nz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n      const p = y * W + x, q = p * 3, lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      zb[p] = z0 - tt;\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * ct[c] * lam;\n    }\n  const ca = cos(P.al), sa = sin(P.al), cL = cos(lb), sL = sin(lb);\n  for (let i = 0; i \u003c NT; i++) {\n    const o = i * 3, bnx = TN[o], bny = TN[o + 1], bnz = TN[o + 2];\n    const nx = Mt[0] * bnx + Mt[1] * bny + Mt[2] * bnz, ny = Mt[3] * bnx + Mt[4] * bny + Mt[5] * bnz, nz = Mt[6] * bnx + Mt[7] * bny + Mt[8] * bnz;\n    const gx = ca * TU[o] + sa * TV[o], gy = ca * TU[o + 1] + sa * TV[o + 1], gz = ca * TU[o + 2] + sa * TV[o + 2];\n    const dx = Mt[0] * gx + Mt[1] * gy + Mt[2] * gz, dy = Mt[3] * gx + Mt[4] * gy + Mt[5] * gz, dz = Mt[6] * gx + Mt[7] * gy + Mt[8] * gz;\n    const bx = TP[o], by = TP[o + 1], bz = TP[o + 2];\n    const X = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, Y = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, Zz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * TJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * TJ[i * 2] * li, w = 255 * sp;\n    hair(P, TX + X, TY + Y, Zz, hx * len, hy * len, hz * len, ct[0] * br + w, ct[1] * br + w, ct[2] * br + w);\n  }\n\n  // The Euler characteristic beside each: 2 for the sphere, 0 for the torus.\n  digit(buf, DIG2, 59, 2, cs);\n  digit(buf, DIG0, 59, 121, ct);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower."},{"name":"Length","min":8,"max":13,"about":"The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter."},{"name":"Comb","min":-1,"max":1,"about":"How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them."}],"start":[0,2,8,0.06],"measures":{"motion":1.5705,"detail":0.1196,"edges":0.4915,"complexity":1.6126,"coverage":0.5237,"colour":0.1866,"drift":0.0881},"knobResponse":[0.0995,0.1196,0.1223,0.076]},{"slug":"halftone","title":"Halftone","family":"print","round":2,"note":"떠도는 등불 넷이 비추는 저녁 하늘을 잉크마다 각도가 다른 망점으로 찍어요. 점은 농도만큼 자라고 줄며, K1 이 CMY, 리소, 벤데이, 신문 잉크를 골라요.","idea":"A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.","buttons":"K1 tap knocks the plates out of register, and they settle back.","code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-halftone","type":"code","name":"halftone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint."},{"name":"Speed","min":0.1,"max":5,"about":"How fast the lights drift under the screens."},{"name":"Screen","min":8,"max":13,"about":"How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones."},{"name":"Turn","min":0,"max":30,"about":"Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot."}],"start":[0,2,8,0.06],"measures":{"motion":0.0294,"detail":0.0277,"edges":0.6406,"complexity":0.1753,"coverage":0.9983,"colour":0.4355,"drift":0.0403},"knobResponse":[0.2427,0.1303,0.1431,0.1473]},{"slug":"hammersley-lines","title":"Hammersley Lines","family":"algo","round":32,"note":"왼쪽 아래를 원점으로 점이 빗방울처럼 하나씩 떨어져 쌓여요. 원점에서 그 칸까지의 상자 안에서 오른쪽 위로 이어지는 가장 긴 점 사슬의 길이로 띠를 칠해서, 점마다 꺾이는 계단 등고선이 쌍곡선 xy = 일정 꼴로 모여요. 오른쪽 위 모서리까지 가장 긴 사슬은 금빛 길이에요.","idea":"Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.","buttons":"K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.","code":"// ===== Patternflow pattern =====\n// Title:   Hammersley Lines\n// Family:  algo\n// Idea:    Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ulam's problem and Hammersley's process (John Hammersley, 1972), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1\n//\n// Knob 1: Hue. Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white.\n// Knob 2: Speed. How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins.\n// Knob 3: Points. How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000.\n// Knob 4: Bands. How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler.\n// Buttons: K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.\n\nconst W = 64, H = 128, N = W * H, MAXN = 1100;\nconst { floor, exp, log, max, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Drops fall this many rows a second at Speed 2.\nconst FALL = 320;\nconst HOLD = 1.2;\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nfunction clear(P) {\n  P.n = 0;\n  P.nd = 0;\n  P.made = 0;\n  P.next = 0;\n  P.hold = -1;\n  P.top = 0;\n  P.M.fill(0);\n  P.prevM.fill(0);\n  P.glow.fill(0);\n  P.dirty = true;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    px: F(MAXN), py: F(MAXN), pt: F(MAXN), ell: I(MAXN), pred: I(MAXN), byX: I(MAXN), byY: I(MAXN), rank: I(MAXN), chain: I(MAXN),\n    dx: F(MAXN), dy: F(MAXN), dt0: F(MAXN),\n    fen: I(MAXN + 1), fenI: I(MAXN + 1), cell: I(N), M: I(N), prevM: I(N), glow: F(N),\n    gold: new Uint8Array(N), oldR: F(N), oldG: F(N), oldB: F(N), cr: F(N), cg: F(N), cb: F(N),\n    n: 0, nd: 0, made: 0, next: 0, hold: -1, clock: 0, oldA: 0, target: 200, hue: 0, speed: 2, fill: 0.3, top: 0, dirty: true,\n  };\n  clear(params.s);\n}\n\n// Puts point k into a list kept sorted by one coordinate.\nfunction insert(list, key, k) {\n  let lo = 0, hi = k;\n  while (lo \u003c hi) {\n    const m = (lo + hi) >> 1;\n    if (key[list[m]] \u003c key[k]) lo = m + 1;\n    else hi = m;\n  }\n  for (let j = k; j > lo; j--) list[j] = list[j - 1];\n  list[lo] = k;\n}\n\n// A drop lands and becomes a point.\nfunction land(P, x, y) {\n  const k = P.n++;\n  (P.px[k] = x), (P.py[k] = y), (P.pt[k] = P.clock);\n  insert(P.byX, P.px, k);\n  insert(P.byY, P.py, k);\n  P.dirty = true;\n}\n\n// Longest chains. Taking the points left to right, the longest chain ending at\n// a point is one more than the longest ending at any earlier point below it;\n// a Fenwick tree over the points' height ranks keeps the best so far below\n// every height.\n// Then L on the pixel grid: L(x, y) is the longest chain among the points in\n// the box from the origin to the pixel's top right corner.\nfunction chains(P) {\n  const { px, py, ell, pred, byX, byY, rank, fen, fenI, cell, M, chain } = P, n = P.n;\n  for (let a = 0; a \u003c n; a++) rank[byY[a]] = a;\n  fen.fill(0);\n  fenI.fill(-1);\n  let best = 0, bestI = -1;\n  for (let a = 0; a \u003c n; a++) {\n    const p = byX[a], b = rank[p];\n    let l = 0, li = -1;\n    for (let i = b; i > 0; i -= i & -i) if (fen[i] > l) (l = fen[i]), (li = fenI[i]);\n    ell[p] = l + 1;\n    pred[p] = li;\n    for (let i = b + 1; i \u003c= n; i += i & -i) if (fen[i] \u003c l + 1) (fen[i] = l + 1), (fenI[i] = p);\n    if (l + 1 > best) (best = l + 1), (bestI = p);\n  }\n  P.top = best;\n  let c = 0;\n  for (let p = bestI; p >= 0; p = pred[p]) chain[c++] = p;\n  cell.fill(0);\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]);\n    if (ell[p] > cell[i]) cell[i] = ell[p];\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let v = cell[i];\n      if (x > 0 && M[i - 1] > v) v = M[i - 1];\n      if (j > 0 && M[i - W] > v) v = M[i - W];\n      M[i] = v;\n    }\n  // The longest chain as a gold path from the origin through its points to\n  // the far corner.\n  const { gold } = P;\n  gold.fill(0);\n  if (!c) return;\n  let x0 = 0, y0 = 0;\n  for (let k = c - 1; k >= -1; k--) {\n    const x1 = k >= 0 ? px[chain[k]] : W - 0.5, y1 = k >= 0 ? py[chain[k]] : H - 0.5;\n    const steps = max(1, Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 2));\n    for (let s = 0; s \u003c= steps; s++) {\n      const u = s / steps, xx = floor(x0 + (x1 - x0) * u), yy = floor(y0 + (y1 - y0) * u);\n      gold[yy * W + xx] = 1;\n    }\n    (x0 = x1), (y0 = y1);\n  }\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  clear(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 200, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  P.target = floor(cl(kv[2], 200, 1000));\n  P.fill = 0.9 * cl(kv[3], 0, 1) ** 0.4;\n  P.clock += d;\n  P.oldA *= exp(-d / 0.4);\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  // Poisson arrivals at the top of the panel: target points in 12 / Speed\n  // seconds. Each falls straight down to its place and lands there.\n  const rate = (P.target * P.speed) / 12;\n  if (P.hold \u003c 0) {\n    P.next -= d;\n    while (P.next \u003c= 0 && P.made \u003c P.target) {\n      const k = P.nd++;\n      (P.dx[k] = Math.random() * W), (P.dy[k] = Math.random() * H), (P.dt0[k] = P.clock + P.next);\n      P.made++;\n      P.next += -log(1 - Math.random()) / rate;\n    }\n  }\n  // Drops: dy is the landing height from the bottom; a drop starts at the top.\n  let w = 0;\n  for (let k = 0; k \u003c P.nd; k++) {\n    const fallen = (P.clock - P.dt0[k]) * FALL * (0.6 + 0.2 * P.speed);\n    if (fallen >= H - P.dy[k]) land(P, P.dx[k], P.dy[k]);\n    else (P.dx[w] = P.dx[k]), (P.dy[w] = P.dy[k]), (P.dt0[w] = P.dt0[k]), w++;\n  }\n  P.nd = w;\n  if (P.dirty) {\n    P.prevM.set(P.M);\n    chains(P);\n    // A landing lifts L by one wherever the new point lengthens the best\n    // chain; the level lines there flash white as they move.\n    const { M, prevM, glow } = P;\n    for (let i = 0; i \u003c N; i++) if (M[i] !== prevM[i]) glow[i] = 1;\n    P.dirty = false;\n  }\n  const g = exp(-d / 0.35), { glow } = P;\n  for (let i = 0; i \u003c N; i++) glow[i] *= g;\n  if (P.hold \u003c 0 && P.made >= P.target && P.nd === 0) P.hold = 0;\n  else if (P.hold >= 0 && (P.hold += d) > HOLD) restart(P);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { M, glow, gold, px, py, pt, cr, cg, cb, oldR, oldG, oldB } = P;\n  const h0 = P.hue, fill = P.fill, oa = P.oldA, now = P.clock;\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, L = M[i];\n      let R = 0, G = 0, B = 0;\n      const line = (x > 0 && M[i - 1] !== L) || (j > 0 && M[i - W] !== L);\n      // Band colour swings between cyan and magenta and back every 24 levels.\n      const ph = (L / 24) % 1, hue = h0 + 0.5 + 0.38 * (ph \u003c 0.5 ? 2 * ph : 2 - 2 * ph);\n      if (L > 0) {\n        hsv(hue, 0.85, fill * (0.55 + 0.45 * (L & 1)));\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      if (line) {\n        const gw = glow[i];\n        hsv(hue, 0.5 - 0.2 * gw, 0.5 + 0.45 * gw);\n        (R = max(R, C[0])), (G = max(G, C[1])), (B = max(B, C[2]));\n      }\n      if (gold[i]) {\n        hsv(h0 + 0.12, 0.7, 1);\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      cr[i] = R * 255;\n      cg[i] = G * 255;\n      cb[i] = B * 255;\n    }\n  // Points: white, brightest on landing.\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]), v = 190 + 65 * exp(-(now - pt[p]) / 0.4);\n    (cr[i] = max(cr[i], v)), (cg[i] = max(cg[i], v)), (cb[i] = max(cb[i], v));\n  }\n  // Falling drops: a short streak above the head.\n  const sp = FALL * (0.6 + 0.2 * P.speed);\n  for (let k = 0; k \u003c P.nd; k++) {\n    const head = H - (now - P.dt0[k]) * sp, x = floor(P.dx[k]);\n    for (let s = 0; s \u003c 4; s++) {\n      const y = floor(head) + s;\n      if (y \u003c 0 || y >= H || y \u003c P.dy[k]) continue;\n      const i = y * W + x, v = 200 - 45 * s;\n      (cr[i] = max(cr[i], v * 0.8)), (cg[i] = max(cg[i], v * 0.9)), (cb[i] = max(cb[i], v));\n    }\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let R = cr[i], G = cg[i], B = cb[i];\n      if (oa > 0.01) (R = max(R, oldR[i] * oa)), (G = max(G, oldG[i] * oa)), (B = max(B, oldB[i] * oa));\n      display.setPixel(x, H - 1 - j, R, G, B);\n    }\n}\n","layer":{"id":"layer-hammersley-lines","type":"code","name":"hammersley-lines","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hammersley Lines\n// Family:  algo\n// Idea:    Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ulam's problem and Hammersley's process (John Hammersley, 1972), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1\n//\n// Knob 1: Hue. Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white.\n// Knob 2: Speed. How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins.\n// Knob 3: Points. How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000.\n// Knob 4: Bands. How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler.\n// Buttons: K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.\n\nconst W = 64, H = 128, N = W * H, MAXN = 1100;\nconst { floor, exp, log, max, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Drops fall this many rows a second at Speed 2.\nconst FALL = 320;\nconst HOLD = 1.2;\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nfunction clear(P) {\n  P.n = 0;\n  P.nd = 0;\n  P.made = 0;\n  P.next = 0;\n  P.hold = -1;\n  P.top = 0;\n  P.M.fill(0);\n  P.prevM.fill(0);\n  P.glow.fill(0);\n  P.dirty = true;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    px: F(MAXN), py: F(MAXN), pt: F(MAXN), ell: I(MAXN), pred: I(MAXN), byX: I(MAXN), byY: I(MAXN), rank: I(MAXN), chain: I(MAXN),\n    dx: F(MAXN), dy: F(MAXN), dt0: F(MAXN),\n    fen: I(MAXN + 1), fenI: I(MAXN + 1), cell: I(N), M: I(N), prevM: I(N), glow: F(N),\n    gold: new Uint8Array(N), oldR: F(N), oldG: F(N), oldB: F(N), cr: F(N), cg: F(N), cb: F(N),\n    n: 0, nd: 0, made: 0, next: 0, hold: -1, clock: 0, oldA: 0, target: 200, hue: 0, speed: 2, fill: 0.3, top: 0, dirty: true,\n  };\n  clear(params.s);\n}\n\n// Puts point k into a list kept sorted by one coordinate.\nfunction insert(list, key, k) {\n  let lo = 0, hi = k;\n  while (lo \u003c hi) {\n    const m = (lo + hi) >> 1;\n    if (key[list[m]] \u003c key[k]) lo = m + 1;\n    else hi = m;\n  }\n  for (let j = k; j > lo; j--) list[j] = list[j - 1];\n  list[lo] = k;\n}\n\n// A drop lands and becomes a point.\nfunction land(P, x, y) {\n  const k = P.n++;\n  (P.px[k] = x), (P.py[k] = y), (P.pt[k] = P.clock);\n  insert(P.byX, P.px, k);\n  insert(P.byY, P.py, k);\n  P.dirty = true;\n}\n\n// Longest chains. Taking the points left to right, the longest chain ending at\n// a point is one more than the longest ending at any earlier point below it;\n// a Fenwick tree over the points' height ranks keeps the best so far below\n// every height.\n// Then L on the pixel grid: L(x, y) is the longest chain among the points in\n// the box from the origin to the pixel's top right corner.\nfunction chains(P) {\n  const { px, py, ell, pred, byX, byY, rank, fen, fenI, cell, M, chain } = P, n = P.n;\n  for (let a = 0; a \u003c n; a++) rank[byY[a]] = a;\n  fen.fill(0);\n  fenI.fill(-1);\n  let best = 0, bestI = -1;\n  for (let a = 0; a \u003c n; a++) {\n    const p = byX[a], b = rank[p];\n    let l = 0, li = -1;\n    for (let i = b; i > 0; i -= i & -i) if (fen[i] > l) (l = fen[i]), (li = fenI[i]);\n    ell[p] = l + 1;\n    pred[p] = li;\n    for (let i = b + 1; i \u003c= n; i += i & -i) if (fen[i] \u003c l + 1) (fen[i] = l + 1), (fenI[i] = p);\n    if (l + 1 > best) (best = l + 1), (bestI = p);\n  }\n  P.top = best;\n  let c = 0;\n  for (let p = bestI; p >= 0; p = pred[p]) chain[c++] = p;\n  cell.fill(0);\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]);\n    if (ell[p] > cell[i]) cell[i] = ell[p];\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let v = cell[i];\n      if (x > 0 && M[i - 1] > v) v = M[i - 1];\n      if (j > 0 && M[i - W] > v) v = M[i - W];\n      M[i] = v;\n    }\n  // The longest chain as a gold path from the origin through its points to\n  // the far corner.\n  const { gold } = P;\n  gold.fill(0);\n  if (!c) return;\n  let x0 = 0, y0 = 0;\n  for (let k = c - 1; k >= -1; k--) {\n    const x1 = k >= 0 ? px[chain[k]] : W - 0.5, y1 = k >= 0 ? py[chain[k]] : H - 0.5;\n    const steps = max(1, Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 2));\n    for (let s = 0; s \u003c= steps; s++) {\n      const u = s / steps, xx = floor(x0 + (x1 - x0) * u), yy = floor(y0 + (y1 - y0) * u);\n      gold[yy * W + xx] = 1;\n    }\n    (x0 = x1), (y0 = y1);\n  }\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  clear(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 200, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  P.target = floor(cl(kv[2], 200, 1000));\n  P.fill = 0.9 * cl(kv[3], 0, 1) ** 0.4;\n  P.clock += d;\n  P.oldA *= exp(-d / 0.4);\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  // Poisson arrivals at the top of the panel: target points in 12 / Speed\n  // seconds. Each falls straight down to its place and lands there.\n  const rate = (P.target * P.speed) / 12;\n  if (P.hold \u003c 0) {\n    P.next -= d;\n    while (P.next \u003c= 0 && P.made \u003c P.target) {\n      const k = P.nd++;\n      (P.dx[k] = Math.random() * W), (P.dy[k] = Math.random() * H), (P.dt0[k] = P.clock + P.next);\n      P.made++;\n      P.next += -log(1 - Math.random()) / rate;\n    }\n  }\n  // Drops: dy is the landing height from the bottom; a drop starts at the top.\n  let w = 0;\n  for (let k = 0; k \u003c P.nd; k++) {\n    const fallen = (P.clock - P.dt0[k]) * FALL * (0.6 + 0.2 * P.speed);\n    if (fallen >= H - P.dy[k]) land(P, P.dx[k], P.dy[k]);\n    else (P.dx[w] = P.dx[k]), (P.dy[w] = P.dy[k]), (P.dt0[w] = P.dt0[k]), w++;\n  }\n  P.nd = w;\n  if (P.dirty) {\n    P.prevM.set(P.M);\n    chains(P);\n    // A landing lifts L by one wherever the new point lengthens the best\n    // chain; the level lines there flash white as they move.\n    const { M, prevM, glow } = P;\n    for (let i = 0; i \u003c N; i++) if (M[i] !== prevM[i]) glow[i] = 1;\n    P.dirty = false;\n  }\n  const g = exp(-d / 0.35), { glow } = P;\n  for (let i = 0; i \u003c N; i++) glow[i] *= g;\n  if (P.hold \u003c 0 && P.made >= P.target && P.nd === 0) P.hold = 0;\n  else if (P.hold >= 0 && (P.hold += d) > HOLD) restart(P);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { M, glow, gold, px, py, pt, cr, cg, cb, oldR, oldG, oldB } = P;\n  const h0 = P.hue, fill = P.fill, oa = P.oldA, now = P.clock;\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, L = M[i];\n      let R = 0, G = 0, B = 0;\n      const line = (x > 0 && M[i - 1] !== L) || (j > 0 && M[i - W] !== L);\n      // Band colour swings between cyan and magenta and back every 24 levels.\n      const ph = (L / 24) % 1, hue = h0 + 0.5 + 0.38 * (ph \u003c 0.5 ? 2 * ph : 2 - 2 * ph);\n      if (L > 0) {\n        hsv(hue, 0.85, fill * (0.55 + 0.45 * (L & 1)));\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      if (line) {\n        const gw = glow[i];\n        hsv(hue, 0.5 - 0.2 * gw, 0.5 + 0.45 * gw);\n        (R = max(R, C[0])), (G = max(G, C[1])), (B = max(B, C[2]));\n      }\n      if (gold[i]) {\n        hsv(h0 + 0.12, 0.7, 1);\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      cr[i] = R * 255;\n      cg[i] = G * 255;\n      cb[i] = B * 255;\n    }\n  // Points: white, brightest on landing.\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]), v = 190 + 65 * exp(-(now - pt[p]) / 0.4);\n    (cr[i] = max(cr[i], v)), (cg[i] = max(cg[i], v)), (cb[i] = max(cb[i], v));\n  }\n  // Falling drops: a short streak above the head.\n  const sp = FALL * (0.6 + 0.2 * P.speed);\n  for (let k = 0; k \u003c P.nd; k++) {\n    const head = H - (now - P.dt0[k]) * sp, x = floor(P.dx[k]);\n    for (let s = 0; s \u003c 4; s++) {\n      const y = floor(head) + s;\n      if (y \u003c 0 || y >= H || y \u003c P.dy[k]) continue;\n      const i = y * W + x, v = 200 - 45 * s;\n      (cr[i] = max(cr[i], v * 0.8)), (cg[i] = max(cg[i], v * 0.9)), (cb[i] = max(cb[i], v));\n    }\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let R = cr[i], G = cg[i], B = cb[i];\n      if (oa > 0.01) (R = max(R, oldR[i] * oa)), (G = max(G, oldG[i] * oa)), (B = max(B, oldB[i] * oa));\n      display.setPixel(x, H - 1 - j, R, G, B);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins."},{"name":"Points","min":200,"max":1000,"about":"How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000."},{"name":"Bands","min":0,"max":1,"about":"How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler."}],"start":[0,2,200,0.06],"measures":{"motion":0.4589,"detail":0.1005,"edges":0.9193,"complexity":0.242,"coverage":0.9226,"colour":0.2106,"drift":0.1453},"knobResponse":[0.1723,0.2043,0.2559,0.3087]},{"slug":"hanging-scroll","title":"Hanging Scroll","family":"paper","round":23,"note":"어두운 도코노마 벽의 못에 족자가 걸리고, 아래 굴대가 내려가며 비단 표구 속 상아빛 종이에 그린 먹 산수를 한 줄씩 드러내요. 안개 낀 봉우리 아래 소나무와 폭포, 초가와 쪽배가 있고 붉은 낙관이 찍혀 있어요. 외풍에 조금 흔들리다 아래부터 말려 올라가면 바람 맞는 대나무가 내려오고, 달 아래 홍매와 파도 위 학이 뒤를 이어요.","idea":"A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.","buttons":"K1 tap rolls the scroll up now and unrolls the next painting.","code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","layer":{"id":"layer-hanging-scroll","type":"code","name":"hanging-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half."},{"name":"Painting","min":0,"max":3,"about":"Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down."},{"name":"Ink","min":0,"max":1,"about":"How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.177,"detail":0.0295,"edges":0.2326,"complexity":1.3758,"coverage":0.4677,"colour":0.1211,"drift":0.2049},"knobResponse":[0.0845,0.2,0.0646,0.0324]},{"slug":"harmonograph","title":"Harmonograph","family":"line","round":1,"note":"단순한 비에서 조금씩 어긋난 진자 셋이 닫히지 않는 그림을 그리고, 멎어 가며 가운데로 감겨 들어가요.","idea":"Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.","buttons":"K1 tap gives the pendulums a fresh push.","code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","layer":{"id":"layer-harmonograph","type":"code","name":"harmonograph","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the fresh line; older line turns a little round the wheel as it fades."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the pen travels; a slow pen's line lasts longer."},{"name":"Ratio","min":0,"max":7,"about":"Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune."},{"name":"Damping","min":0.02,"max":0.4,"about":"How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds."}],"start":[0,2,0,0.06],"measures":{"motion":0.0325,"detail":0.0469,"edges":0.3334,"complexity":0.8432,"coverage":0.2444,"colour":0.1802,"drift":0.053},"knobResponse":[0.0712,0.0419,0.0758,0.0561]},{"slug":"harp","title":"Harp","family":"music","round":16,"note":"무대에 선 페달 하프가 패널 높이를 다 채우고, 보이지 않는 하프 주자가 뜯은 줄이 렌즈 꼴로 번졌다가 잦아들어요. K3 은 펼친화음, 굴린 화음, 하모닉스, 글리산도 가운데 하나를 고르고, K1 을 누르면 29줄을 다 훑는 글리산도가 올라갔다 내려와요.","idea":"A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.","buttons":"K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.","code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","layer":{"id":"layer-harp","type":"code","name":"harp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210."},{"name":"Figure","min":0,"max":3,"about":"What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass."},{"name":"Damp","min":0,"max":1,"about":"At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds."}],"start":[0,2,0,0.06],"measures":{"motion":0.151,"detail":0.0758,"edges":0.4257,"complexity":1.512,"coverage":0.8852,"colour":0.2261,"drift":0.0747},"knobResponse":[0.0708,0.0671,0.0617,0.0595]},{"slug":"heawood-torus","title":"Heawood Torus","family":"topology","round":36,"note":"세로로 긴 토러스가 천천히 돌며 헤우드의 지도를 보여 줘요. 일곱 나라가 저마다 나머지 여섯과 모두 맞닿아서, 구 위의 지도와 달리 이 지도는 일곱 색이 있어야 칠해져요. K3 은 구멍을 넓혀 굵은 관을 가는 고리로 만들고, K1 을 누르면 여섯 초 동안 일곱 수도와 그 사이 길 21개가 흰 선으로 그려져요.","idea":"A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.","buttons":"K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.","code":"// ===== Patternflow pattern =====\n// Title:   Heawood Torus\n// Family:  topology\n// Idea:    A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Heawood's seven-colour map on the torus (Percy Heawood, 1890), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1\n//\n// Knob 1: Hue. Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red.\n// Knob 2: Speed. How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s.\n// Knob 3: Hole. The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall.\n// Knob 4: Tilt. How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above.\n// Buttons: K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sin, cos, abs, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The plane tiled by hexagons, the hexagon at axial (a, b) coloured\n// (a + 3b) mod 7. Its six neighbours sit at (+-1, 0), (0, +-1) and\n// +-(1, -1), so their colours differ from its own by +-1, +-3 and +-2: all\n// six other colours, once each. The colouring repeats on the lattice L of\n// (a, b) with a + 3b = 0 mod 7, which has index 7, so the torus plane / L\n// holds exactly one hexagon of each colour, and each touches the other six.\n// L is spanned by E1 = (2, -3) and E2 = (1, 2) (determinant 7); of all the\n// bases of L these two shear the hexagons least on the long, thin parameter\n// square of this torus.\nconst E1A = 2, E1B = -3, E2A = 1, E2B = 2;\n\n// Samples round the core curve and round the tube; samples along each road.\nconst NU = 600, NV = 120, NS = NU * NV, NR = 200;\n// The outer half width of the torus in LEDs, and its half height before it leans.\nconst RO = 31, HALF = 63;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The country at fractional axial coordinates (qa, qb): round to the nearest\n// hexagon centre in cube coordinates, then colour it.\nfunction country(qa, qb) {\n  const x = qa, z = qb, y = -x - z;\n  let rx = round(x), ry = round(y), rz = round(z);\n  const dx = abs(rx - x), dy = abs(ry - y), dz = abs(rz - z);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  return (((rx + 3 * rz) % 7) + 7) % 7;\n}\n\n// The surface: a tube of radius r round a stadium, two half circles of\n// radius rc joined by straights 2 ly long, standing up in the x-y plane.\n// (U, V) in the unit square is the fraction of the way round the stadium and\n// round the tube. core() writes the point of the stadium at U and its\n// outward normal in the plane, (cx, cy, ox, oy), at out[o..o+3]; the surface\n// point is (cx + r cos v ox, cy + r cos v oy, r sin v) with v = 2 pi V, and\n// its normal (cos v ox, cos v oy, sin v).\nfunction core(S, U, out, o) {\n  const rc = S.rc, ly = S.ly;\n  let s = (U - floor(U)) * S.per, cx, cy, ox, oy;\n  if (s \u003c 2 * ly) (cx = rc), (cy = -ly + s), (ox = 1), (oy = 0);\n  else if ((s -= 2 * ly) \u003c PI * rc) {\n    const a = s / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = ly + rc * oy);\n  } else if ((s -= PI * rc) \u003c 2 * ly) (cx = -rc), (cy = ly - s), (ox = -1), (oy = 0);\n  else {\n    const a = PI + (s - 2 * ly) / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = -ly + rc * oy);\n  }\n  out[o] = cx;\n  out[o + 1] = cy;\n  out[o + 2] = ox;\n  out[o + 3] = oy;\n}\n\n// The plane point U E1 + V E2 is the one painted at (U, V), so the square's\n// sides go to E1 and E2 and the map closes up on the torus. Back the other\n// way, (qa, qb) lands at U = (2 qa - qb) / 7, V = (3 qa + 2 qb) / 7.\nfunction build(S) {\n  S.rc = RO / (1 + S.ratio);\n  S.r = S.rc * S.ratio;\n  S.ly = HALF - RO;\n  S.per = 4 * S.ly + TAU * S.rc;\n  const { cc, tc, ts, cid, road } = S;\n  for (let j = 0; j \u003c NV; j++) {\n    tc[j] = cos((TAU * (j + 0.5)) / NV);\n    ts[j] = sin((TAU * (j + 0.5)) / NV);\n  }\n  for (let i = 0; i \u003c NU; i++) {\n    const U = (i + 0.5) / NU;\n    core(S, U, cc, 4 * i);\n    for (let j = 0; j \u003c NV; j++) cid[i * NV + j] = country(U * E1A + (j + 0.5) / NV * E2A, U * E1B + (j + 0.5) / NV * E2B);\n  }\n  // The dual graph: the capital of country a sits at the hexagon (a, 0), and\n  // three roads leave it toward (a + 1, 0), (a, 1) and (a + 1, -1). Seven\n  // capitals times three is all 21 roads of K7, each crossing one border.\n  const q4 = [0, 0, 0, 0];\n  let n = 0;\n  for (let a = 0; a \u003c 7; a++)\n    for (const [da, db] of [[1, 0], [0, 1], [1, -1]])\n      for (let t = 0; t \u003c NR; t++, n++) {\n        const qa = a + (da * t) / (NR - 1), qb = (db * t) / (NR - 1), v = (TAU * (3 * qa + 2 * qb)) / 7, o = 3 * n;\n        core(S, (2 * qa - qb) / 7, q4, 0);\n        road[o] = q4[0] + S.r * cos(v) * q4[2];\n        road[o + 1] = q4[1] + S.r * cos(v) * q4[3];\n        road[o + 2] = S.r * sin(v);\n      }\n}\n\nexport function setup(params) {\n  // The turn starts 0.4 short of face-on, so at Speed 2 the torus faces you\n  // squarely one second in and stands edge-on five seconds in.\n  params.s = {\n    hue: 0, speed: 2, ratio: -1, tilt: 0.06, spin: -0.4, nod: 0, roads: -1, rc: 0, r: 0, ly: 0, per: 0,\n    cc: new Float32Array(4 * NU), tc: new Float32Array(NV), ts: new Float32Array(NV), cid: new Uint8Array(NS), road: new Float32Array(3 * 21 * NR),\n    zb: new Float32Array(N), ib: new Int32Array(N), ib2: new Int32Array(N), cb: new Uint8Array(N), rb: new Uint8Array(N), pal: new Float32Array(21),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[3], 0, 1);\n  const ratio = 0.85 - 0.45 * cl(k[2], 0, 1);\n  if (abs(ratio - S.ratio) > 1e-4) {\n    S.ratio = ratio;\n    build(S);\n  }\n  S.spin += d * S.speed * 0.2;\n  S.nod += d * S.speed * 0.11;\n  if (S.roads >= 0) {\n    S.roads += d;\n    if (S.roads > 7) S.roads = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.roads = S.roads \u003c 0 ? 0 : min(S.roads, 0.5);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { cc, tc, ts, cid, zb, ib, ib2, cb, rb, road, pal } = S, r = S.r;\n  // Spin about the torus's long axis, then lean the top of that axis toward\n  // the viewer, who looks along +z.\n  const ph = S.spin, cp = cos(ph), sp = sin(ph);\n  const la = -(0.1 + 0.6 * S.tilt + 0.05 * sin(S.nod)), cla = cos(la), sla = sin(la);\n  const m0 = cp, m2 = sp;\n  const m3 = sla * sp, m4 = cla, m5 = -sla * cp;\n  const m6 = -cla * sp, m7 = sla, m8 = cla * cp;\n  // Fit the leaning torus to the panel height.\n  const sc = min(1, 63.5 / (HALF * cla - RO * sla));\n  zb.fill(1e9);\n  ib.fill(-1);\n  // Each sample's screen x, y and depth are a column part plus cos v and\n  // sin v times a part, so the loop over the tube is a few multiplies.\n  const Xb = sc * m2 * r, Yb = -sc * m5 * r, Zb = m8 * r;\n  for (let i = 0; i \u003c NU; i++) {\n    const cx = cc[4 * i], cy = cc[4 * i + 1], ox = cc[4 * i + 2], oy = cc[4 * i + 3], A = m6 * ox + m7 * oy;\n    const X0 = 32 + sc * m0 * cx, Xa = sc * m0 * r * ox, Y0 = 64 - sc * (m3 * cx + m4 * cy), Ya = -sc * r * (m3 * ox + m4 * oy);\n    const Z0 = m6 * cx + m7 * cy, Za = r * A;\n    for (let j = 0, k = i * NV; j \u003c NV; j++, k++) {\n      const cv = tc[j], sv = ts[j];\n      // Facing away from the eye.\n      if (cv * A + sv * m8 > 0.05) continue;\n      const px = floor(X0 + cv * Xa + sv * Xb), py = floor(Y0 + cv * Ya + sv * Yb);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px, Z = Z0 + cv * Za + sv * Zb;\n      if (Z \u003c zb[p]) (zb[p] = Z), (ib[p] = k);\n    }\n  }\n  // Fill LEDs that no front sample reached, or where the back of the tube\n  // shows through between two front samples.\n  ib2.set(ib);\n  for (let y = 1; y \u003c H - 1; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, z = zb[p];\n      for (let q = 1; q \u003c= W; q += W - 1) {\n        const a = zb[p - q], b = zb[p + q];\n        if (a \u003c 1e8 && b \u003c 1e8 && abs(a - b) \u003c 4 && z > max(a, b) + 3) {\n          ib2[p] = a \u003c b ? ib[p - q] : ib[p + q];\n          break;\n        }\n      }\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const k = ib2[p];\n    cb[p] = k \u003c 0 ? 255 : cid[k];\n    if (k >= 0 && k !== ib[p]) {\n      const i = (k / NV) | 0, j = k - i * NV, o = 4 * i;\n      zb[p] = m6 * (cc[o] + r * tc[j] * cc[o + 2]) + m7 * (cc[o + 1] + r * tc[j] * cc[o + 3]) + m8 * r * ts[j];\n    }\n  }\n\n  // The roads, where they lie on the visible surface, and the capitals at\n  // their ends as 2 x 2 dots.\n  const e = S.roads \u003c 0 ? 0 : sm(S.roads / 0.5) * (1 - sm(S.roads - 6));\n  if (e > 0) {\n    rb.fill(0);\n    for (let i = 0, o = 0; i \u003c 21 * NR; i++, o += 3) {\n      const x = road[o], y = road[o + 1], z = road[o + 2];\n      const px = floor(32 + sc * (m0 * x + m2 * z)), py = floor(64 - sc * (m3 * x + m4 * y + m5 * z));\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      if (m6 * x + m7 * y + m8 * z > zb[p] + 1.5) continue;\n      rb[p] = 1;\n      if (i % NR === 0 && px \u003c W - 1 && py \u003c H - 1) rb[p + 1] = rb[p + W] = rb[p + W + 1] = 1;\n    }\n  }\n\n  // The seven colours, a seventh apart, opening off red.\n  const h0 = S.hue + 1 / 14;\n  for (let c = 0; c \u003c 7; c++) hsv(h0 + c / 7, 1, 1, pal, 3 * c);\n  // Light from the upper left, in front.\n  const lx = -0.45, ly = 0.6, lz = -0.66;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, c = cb[p];\n      if (c === 255) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const k = ib2[p], i = (k / NV) | 0, j = k - i * NV, nx = tc[j] * cc[4 * i + 2], ny = tc[j] * cc[4 * i + 3], nz = ts[j];\n      const vx = m0 * nx + m2 * nz, vy = m3 * nx + m4 * ny + m5 * nz, vz = m6 * nx + m7 * ny + m8 * nz;\n      const dif = max(0, vx * lx + vy * ly + vz * lz);\n      // Half vector of the light and the eye at -z, for a small shine.\n      let hv = max(0, (vx * lx + vy * ly + vz * (lz - 1)) / 1.82);\n      (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv);\n      const spec = hv * 0.5;\n      const lit = (0.6 + 0.55 * dif) * (1 - 0.2 * e);\n      let R = pal[3 * c] * lit + spec, G = pal[3 * c + 1] * lit + spec, B = pal[3 * c + 2] * lit + spec;\n      // A dark LED where the country changes to the right or below, and\n      // where the surface folds behind a nearer part of the tube.\n      const r = x \u003c W - 1 ? cb[p + 1] : 255, b = y \u003c H - 1 ? cb[p + W] : 255, zf = zb[p] - 6;\n      if ((r !== 255 && r !== c) || (b !== 255 && b !== c) ||\n        (x > 0 && cb[p - 1] !== 255 && zb[p - 1] \u003c zf) || (r !== 255 && zb[p + 1] \u003c zf) ||\n        (y > 0 && cb[p - W] !== 255 && zb[p - W] \u003c zf) || (b !== 255 && zb[p + W] \u003c zf)) (R *= 0.08), (G *= 0.08), (B *= 0.08);\n      if (e > 0 && rb[p]) {\n        R += (1 - R) * e;\n        G += (1 - G) * e;\n        B += (1 - B) * e;\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(B * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-heawood-torus","type":"code","name":"heawood-torus","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Heawood Torus\n// Family:  topology\n// Idea:    A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Heawood's seven-colour map on the torus (Percy Heawood, 1890), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1\n//\n// Knob 1: Hue. Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red.\n// Knob 2: Speed. How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s.\n// Knob 3: Hole. The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall.\n// Knob 4: Tilt. How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above.\n// Buttons: K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sin, cos, abs, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The plane tiled by hexagons, the hexagon at axial (a, b) coloured\n// (a + 3b) mod 7. Its six neighbours sit at (+-1, 0), (0, +-1) and\n// +-(1, -1), so their colours differ from its own by +-1, +-3 and +-2: all\n// six other colours, once each. The colouring repeats on the lattice L of\n// (a, b) with a + 3b = 0 mod 7, which has index 7, so the torus plane / L\n// holds exactly one hexagon of each colour, and each touches the other six.\n// L is spanned by E1 = (2, -3) and E2 = (1, 2) (determinant 7); of all the\n// bases of L these two shear the hexagons least on the long, thin parameter\n// square of this torus.\nconst E1A = 2, E1B = -3, E2A = 1, E2B = 2;\n\n// Samples round the core curve and round the tube; samples along each road.\nconst NU = 600, NV = 120, NS = NU * NV, NR = 200;\n// The outer half width of the torus in LEDs, and its half height before it leans.\nconst RO = 31, HALF = 63;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The country at fractional axial coordinates (qa, qb): round to the nearest\n// hexagon centre in cube coordinates, then colour it.\nfunction country(qa, qb) {\n  const x = qa, z = qb, y = -x - z;\n  let rx = round(x), ry = round(y), rz = round(z);\n  const dx = abs(rx - x), dy = abs(ry - y), dz = abs(rz - z);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  return (((rx + 3 * rz) % 7) + 7) % 7;\n}\n\n// The surface: a tube of radius r round a stadium, two half circles of\n// radius rc joined by straights 2 ly long, standing up in the x-y plane.\n// (U, V) in the unit square is the fraction of the way round the stadium and\n// round the tube. core() writes the point of the stadium at U and its\n// outward normal in the plane, (cx, cy, ox, oy), at out[o..o+3]; the surface\n// point is (cx + r cos v ox, cy + r cos v oy, r sin v) with v = 2 pi V, and\n// its normal (cos v ox, cos v oy, sin v).\nfunction core(S, U, out, o) {\n  const rc = S.rc, ly = S.ly;\n  let s = (U - floor(U)) * S.per, cx, cy, ox, oy;\n  if (s \u003c 2 * ly) (cx = rc), (cy = -ly + s), (ox = 1), (oy = 0);\n  else if ((s -= 2 * ly) \u003c PI * rc) {\n    const a = s / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = ly + rc * oy);\n  } else if ((s -= PI * rc) \u003c 2 * ly) (cx = -rc), (cy = ly - s), (ox = -1), (oy = 0);\n  else {\n    const a = PI + (s - 2 * ly) / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = -ly + rc * oy);\n  }\n  out[o] = cx;\n  out[o + 1] = cy;\n  out[o + 2] = ox;\n  out[o + 3] = oy;\n}\n\n// The plane point U E1 + V E2 is the one painted at (U, V), so the square's\n// sides go to E1 and E2 and the map closes up on the torus. Back the other\n// way, (qa, qb) lands at U = (2 qa - qb) / 7, V = (3 qa + 2 qb) / 7.\nfunction build(S) {\n  S.rc = RO / (1 + S.ratio);\n  S.r = S.rc * S.ratio;\n  S.ly = HALF - RO;\n  S.per = 4 * S.ly + TAU * S.rc;\n  const { cc, tc, ts, cid, road } = S;\n  for (let j = 0; j \u003c NV; j++) {\n    tc[j] = cos((TAU * (j + 0.5)) / NV);\n    ts[j] = sin((TAU * (j + 0.5)) / NV);\n  }\n  for (let i = 0; i \u003c NU; i++) {\n    const U = (i + 0.5) / NU;\n    core(S, U, cc, 4 * i);\n    for (let j = 0; j \u003c NV; j++) cid[i * NV + j] = country(U * E1A + (j + 0.5) / NV * E2A, U * E1B + (j + 0.5) / NV * E2B);\n  }\n  // The dual graph: the capital of country a sits at the hexagon (a, 0), and\n  // three roads leave it toward (a + 1, 0), (a, 1) and (a + 1, -1). Seven\n  // capitals times three is all 21 roads of K7, each crossing one border.\n  const q4 = [0, 0, 0, 0];\n  let n = 0;\n  for (let a = 0; a \u003c 7; a++)\n    for (const [da, db] of [[1, 0], [0, 1], [1, -1]])\n      for (let t = 0; t \u003c NR; t++, n++) {\n        const qa = a + (da * t) / (NR - 1), qb = (db * t) / (NR - 1), v = (TAU * (3 * qa + 2 * qb)) / 7, o = 3 * n;\n        core(S, (2 * qa - qb) / 7, q4, 0);\n        road[o] = q4[0] + S.r * cos(v) * q4[2];\n        road[o + 1] = q4[1] + S.r * cos(v) * q4[3];\n        road[o + 2] = S.r * sin(v);\n      }\n}\n\nexport function setup(params) {\n  // The turn starts 0.4 short of face-on, so at Speed 2 the torus faces you\n  // squarely one second in and stands edge-on five seconds in.\n  params.s = {\n    hue: 0, speed: 2, ratio: -1, tilt: 0.06, spin: -0.4, nod: 0, roads: -1, rc: 0, r: 0, ly: 0, per: 0,\n    cc: new Float32Array(4 * NU), tc: new Float32Array(NV), ts: new Float32Array(NV), cid: new Uint8Array(NS), road: new Float32Array(3 * 21 * NR),\n    zb: new Float32Array(N), ib: new Int32Array(N), ib2: new Int32Array(N), cb: new Uint8Array(N), rb: new Uint8Array(N), pal: new Float32Array(21),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[3], 0, 1);\n  const ratio = 0.85 - 0.45 * cl(k[2], 0, 1);\n  if (abs(ratio - S.ratio) > 1e-4) {\n    S.ratio = ratio;\n    build(S);\n  }\n  S.spin += d * S.speed * 0.2;\n  S.nod += d * S.speed * 0.11;\n  if (S.roads >= 0) {\n    S.roads += d;\n    if (S.roads > 7) S.roads = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.roads = S.roads \u003c 0 ? 0 : min(S.roads, 0.5);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { cc, tc, ts, cid, zb, ib, ib2, cb, rb, road, pal } = S, r = S.r;\n  // Spin about the torus's long axis, then lean the top of that axis toward\n  // the viewer, who looks along +z.\n  const ph = S.spin, cp = cos(ph), sp = sin(ph);\n  const la = -(0.1 + 0.6 * S.tilt + 0.05 * sin(S.nod)), cla = cos(la), sla = sin(la);\n  const m0 = cp, m2 = sp;\n  const m3 = sla * sp, m4 = cla, m5 = -sla * cp;\n  const m6 = -cla * sp, m7 = sla, m8 = cla * cp;\n  // Fit the leaning torus to the panel height.\n  const sc = min(1, 63.5 / (HALF * cla - RO * sla));\n  zb.fill(1e9);\n  ib.fill(-1);\n  // Each sample's screen x, y and depth are a column part plus cos v and\n  // sin v times a part, so the loop over the tube is a few multiplies.\n  const Xb = sc * m2 * r, Yb = -sc * m5 * r, Zb = m8 * r;\n  for (let i = 0; i \u003c NU; i++) {\n    const cx = cc[4 * i], cy = cc[4 * i + 1], ox = cc[4 * i + 2], oy = cc[4 * i + 3], A = m6 * ox + m7 * oy;\n    const X0 = 32 + sc * m0 * cx, Xa = sc * m0 * r * ox, Y0 = 64 - sc * (m3 * cx + m4 * cy), Ya = -sc * r * (m3 * ox + m4 * oy);\n    const Z0 = m6 * cx + m7 * cy, Za = r * A;\n    for (let j = 0, k = i * NV; j \u003c NV; j++, k++) {\n      const cv = tc[j], sv = ts[j];\n      // Facing away from the eye.\n      if (cv * A + sv * m8 > 0.05) continue;\n      const px = floor(X0 + cv * Xa + sv * Xb), py = floor(Y0 + cv * Ya + sv * Yb);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px, Z = Z0 + cv * Za + sv * Zb;\n      if (Z \u003c zb[p]) (zb[p] = Z), (ib[p] = k);\n    }\n  }\n  // Fill LEDs that no front sample reached, or where the back of the tube\n  // shows through between two front samples.\n  ib2.set(ib);\n  for (let y = 1; y \u003c H - 1; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, z = zb[p];\n      for (let q = 1; q \u003c= W; q += W - 1) {\n        const a = zb[p - q], b = zb[p + q];\n        if (a \u003c 1e8 && b \u003c 1e8 && abs(a - b) \u003c 4 && z > max(a, b) + 3) {\n          ib2[p] = a \u003c b ? ib[p - q] : ib[p + q];\n          break;\n        }\n      }\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const k = ib2[p];\n    cb[p] = k \u003c 0 ? 255 : cid[k];\n    if (k >= 0 && k !== ib[p]) {\n      const i = (k / NV) | 0, j = k - i * NV, o = 4 * i;\n      zb[p] = m6 * (cc[o] + r * tc[j] * cc[o + 2]) + m7 * (cc[o + 1] + r * tc[j] * cc[o + 3]) + m8 * r * ts[j];\n    }\n  }\n\n  // The roads, where they lie on the visible surface, and the capitals at\n  // their ends as 2 x 2 dots.\n  const e = S.roads \u003c 0 ? 0 : sm(S.roads / 0.5) * (1 - sm(S.roads - 6));\n  if (e > 0) {\n    rb.fill(0);\n    for (let i = 0, o = 0; i \u003c 21 * NR; i++, o += 3) {\n      const x = road[o], y = road[o + 1], z = road[o + 2];\n      const px = floor(32 + sc * (m0 * x + m2 * z)), py = floor(64 - sc * (m3 * x + m4 * y + m5 * z));\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      if (m6 * x + m7 * y + m8 * z > zb[p] + 1.5) continue;\n      rb[p] = 1;\n      if (i % NR === 0 && px \u003c W - 1 && py \u003c H - 1) rb[p + 1] = rb[p + W] = rb[p + W + 1] = 1;\n    }\n  }\n\n  // The seven colours, a seventh apart, opening off red.\n  const h0 = S.hue + 1 / 14;\n  for (let c = 0; c \u003c 7; c++) hsv(h0 + c / 7, 1, 1, pal, 3 * c);\n  // Light from the upper left, in front.\n  const lx = -0.45, ly = 0.6, lz = -0.66;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, c = cb[p];\n      if (c === 255) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const k = ib2[p], i = (k / NV) | 0, j = k - i * NV, nx = tc[j] * cc[4 * i + 2], ny = tc[j] * cc[4 * i + 3], nz = ts[j];\n      const vx = m0 * nx + m2 * nz, vy = m3 * nx + m4 * ny + m5 * nz, vz = m6 * nx + m7 * ny + m8 * nz;\n      const dif = max(0, vx * lx + vy * ly + vz * lz);\n      // Half vector of the light and the eye at -z, for a small shine.\n      let hv = max(0, (vx * lx + vy * ly + vz * (lz - 1)) / 1.82);\n      (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv);\n      const spec = hv * 0.5;\n      const lit = (0.6 + 0.55 * dif) * (1 - 0.2 * e);\n      let R = pal[3 * c] * lit + spec, G = pal[3 * c + 1] * lit + spec, B = pal[3 * c + 2] * lit + spec;\n      // A dark LED where the country changes to the right or below, and\n      // where the surface folds behind a nearer part of the tube.\n      const r = x \u003c W - 1 ? cb[p + 1] : 255, b = y \u003c H - 1 ? cb[p + W] : 255, zf = zb[p] - 6;\n      if ((r !== 255 && r !== c) || (b !== 255 && b !== c) ||\n        (x > 0 && cb[p - 1] !== 255 && zb[p - 1] \u003c zf) || (r !== 255 && zb[p + 1] \u003c zf) ||\n        (y > 0 && cb[p - W] !== 255 && zb[p - W] \u003c zf) || (b !== 255 && zb[p + W] \u003c zf)) (R *= 0.08), (G *= 0.08), (B *= 0.08);\n      if (e > 0 && rb[p]) {\n        R += (1 - R) * e;\n        G += (1 - G) * e;\n        B += (1 - B) * e;\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(B * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s."},{"name":"Hole","min":0,"max":1,"about":"The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall."},{"name":"Tilt","min":0,"max":1,"about":"How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above."}],"start":[0,2,0,0.06],"measures":{"motion":0.4823,"detail":0.0527,"edges":0.4488,"complexity":0.5038,"coverage":0.538,"colour":0.6204,"drift":0.3781},"knobResponse":[0.4775,0.281,0.1318,0.1492]},{"slug":"helter-skelter","title":"Helter Skelter","family":"fair","round":19,"note":"밤 장터의 헬터 스켈터가 128줄을 다 써요. 사람들이 탑 안 계단을 올라 작은 창에 비치고, 꼭대기에서 매트에 앉아 전구 체이스와 함께 탑을 돌아 미끄러져 내려온 뒤 매트를 들고 아래 문으로 돌아가요.","idea":"A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","layer":{"id":"layer-helter-skelter","type":"code","name":"helter-skelter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower."},{"name":"Turns","min":3,"max":6,"about":"How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside."},{"name":"Stripes","min":-1,"max":1,"about":"The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them."}],"start":[0,2,3,0.06],"measures":{"motion":0.1978,"detail":0.0529,"edges":0.4142,"complexity":1.5797,"coverage":0.8591,"colour":0.2542,"drift":0.0688},"knobResponse":[0.0829,0.0365,0.0808,0.0347]},{"slug":"hexatic-phase","title":"Hexatic Phase","family":"particle","round":37,"note":"단단한 원판 440개가 주기 경계 상자 안에서 사건 사슬 몬테카를로로 밀치고, 원판마다 둘레의 육각 격자가 가리키는 쪽에 따라 색을 입어요. 색상환 한 바퀴가 격자 회전 60도라서 결정 조각이 한 색 덩어리로 헤엄치고 합쳐지며 돌고, 이웃이 다섯인 원판은 흰 점, 일곱인 원판은 흰 고리로 결정 경계를 따라 줄지어요. K3 은 채움 몫을 0.68 의 액체에서 0.76 의 고체까지 올리고, 누르면 상자가 녹았다가 다시 굳어요.","idea":"440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.","buttons":"K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.","code":"// ===== Patternflow pattern =====\n// Title:   Hexatic Phase\n// Family:  particle\n// Idea:    440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: hexatic phase of two-dimensional melting (Bertrand Halperin and David Nelson, 1978), hard disks (Berni Alder and Thomas Wainwright, 1962), event-chain Monte Carlo (Etienne Bernard, Werner Krauth and David Wilson, 2009), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1\n//\n// Knob 1: Hue. Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together.\n// Knob 2: Speed. Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it.\n// Knob 3: Density. The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs.\n// Knob 4: Cells. From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring.\n// Buttons: K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.\n\nconst W = 64, H = 128, N = 440, CX = 14, CY = 28, C = W / CX, NC = CX * CY, CAP = 12;\nconst { floor, min, max, sqrt, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wx = (v) => (v \u003c -32 ? v + W : v >= 32 ? v - W : v);\nconst wy = (v) => (v \u003c -64 ? v + H : v >= 64 ? v - H : v);\n// Disk diameter for a packing fraction: eta = N pi d^2 / 4 / (W H).\nconst diam = (eta) => sqrt((4 * eta * W * H) / (N * PI));\n\n// Hard disks have no energy, only the packing fraction. Halperin and Nelson\n// (after Kosterlitz and Thouless) said a 2D crystal melts in two steps: bound\n// pairs of dislocations unbind into a hexatic phase that keeps the lattice's\n// orientation over long distances but not its rows, and then the hexatic\n// melts into a liquid when the dislocations split into free 5s and 7s.\n// Bernard and Krauth (2011) found that for hard disks the liquid to hexatic\n// step is first order: the two coexist from 0.700 to 0.716, the hexatic\n// holds to 0.720, and the solid starts there.\n//\n// Measured here, mean over seconds 10 to 40, of the edge-weighted psi6 of\n// single disks, and the share of disks without six Voronoi neighbours:\n//   0.68  |psi6| 0.60  off six 27%    0.70  |psi6| 0.69  off six 15%\n//   0.72  |psi6| 0.75  off six  9%    0.74  |psi6| 0.84  off six  2%\n// The whole box's |psi6| goes 0.16, 0.50, 0.63, 0.79: with 440 disks the\n// patches reach the box long before the solid does.\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction cellAt(x, y) {\n  let cx = floor(x / C), cy = floor(y / C);\n  if (cx >= CX) cx -= CX;\n  if (cy >= CY) cy -= CY;\n  return cy * CX + cx;\n}\nfunction put(S, i) {\n  const c = cellAt(S.x[i], S.y[i]), k = S.cnt[c]++;\n  S.slot[c * CAP + k] = i;\n  S.cell[i] = c;\n  S.pos[i] = k;\n}\nfunction take(S, i) {\n  const c = S.cell[i], k = S.pos[i], last = --S.cnt[c], j = S.slot[c * CAP + last];\n  S.slot[c * CAP + k] = j;\n  S.pos[j] = k;\n}\n\n// One straight event chain: disk i moves along direction dir until it\n// touches another disk, which takes over the rest of the length, and so on\n// until the length is spent. Each chain leaves the uniform distribution of\n// valid configurations as it was, so a random mix of the four directions\n// does too, and the mix keeps the whole box from drifting one way.\nfunction chain(S, i, dir, len) {\n  const d = S.d, d2 = d * d, ex = dir === 0 ? 1 : dir === 2 ? -1 : 0, ey = dir === 1 ? 1 : dir === 3 ? -1 : 0;\n  const X = S.x, Y = S.y, cnt = S.cnt, slot = S.slot;\n  let lifts = 0;\n  while (len > 1e-9 && lifts \u003c 200) {\n    const xi = X[i], yi = Y[i], look = len \u003c 2 * C ? len : 2 * C, kf = 1 + floor((look + d) / C);\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n    let best = look, hit = -1;\n    for (let a = 0; a \u003c= kf; a++)\n      for (let b = -1; b \u003c= 1; b++) {\n        let qx = ex ? cx + ex * a : cx + b, qy = ex ? cy + b : cy + ey * a;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = slot[q * CAP + m];\n          if (j === i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), along = rx * ex + ry * ey, perp = ex ? ry : rx;\n          if (along \u003c= 0 || perp * perp >= d2) continue;\n          let s = along - sqrt(d2 - perp * perp);\n          if (s \u003c 0) s = 0;\n          if (s \u003c best) (best = s), (hit = j);\n        }\n      }\n    take(S, i);\n    let nx = xi + ex * best, ny = yi + ey * best;\n    nx = nx \u003c 0 ? nx + W : nx >= W ? nx - W : nx;\n    ny = ny \u003c 0 ? ny + H : ny >= H ? ny - H : ny;\n    X[i] = nx;\n    Y[i] = ny;\n    put(S, i);\n    len -= best;\n    if (hit >= 0) (i = hit), lifts++;\n  }\n  return lifts;\n}\n\n// The closest pair in the box. Disks grow to it and no further, so the box\n// is compressed without one overlap.\nfunction closest(S) {\n  const X = S.x, Y = S.y;\n  let m2 = C * C;\n  for (let i = 0; i \u003c N; i++) {\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0, xi = X[i], yi = Y[i];\n    for (let b = -1; b \u003c= 1; b++)\n      for (let a = -1; a \u003c= 1; a++) {\n        let qx = cx + a, qy = cy + b;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = S.cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = S.slot[q * CAP + m];\n          if (j \u003c= i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n          if (r2 \u003c m2) m2 = r2;\n        }\n      }\n  }\n  return sqrt(m2);\n}\n\n// Growth by a step of `rate`, then pushes: every overlapping pair is moved\n// apart along its axis, a few passes over the box. What overlap is left\n// after that is taken back by shrinking the disks to the closest pair, so the\n// chains never see two disks overlap.\nfunction grow(S, rate) {\n  if (S.dT \u003c= S.d) {\n    S.d = S.dT;\n    return;\n  }\n  const d1 = min(S.dT, S.d * (1 + rate)), X = S.x, Y = S.y;\n  for (let pass = 0; pass \u003c 4; pass++) {\n    let moved = 0;\n    for (let i = 0; i \u003c N; i++) {\n      const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m];\n            if (j \u003c= i) continue;\n            const rx = wx(X[j] - X[i]), ry = wy(Y[j] - Y[i]), r2 = rx * rx + ry * ry;\n            if (r2 >= d1 * d1 || r2 === 0) continue;\n            const r = sqrt(r2), f = (0.5 * (d1 - r) + 1e-4) / r;\n            X[i] -= rx * f;\n            Y[i] -= ry * f;\n            X[j] += rx * f;\n            Y[j] += ry * f;\n            moved++;\n          }\n        }\n    }\n    for (let i = 0; i \u003c N; i++) {\n      X[i] = (X[i] + W) % W;\n      Y[i] = (Y[i] + H) % H;\n      if (cellAt(X[i], Y[i]) !== S.cell[i]) take(S, i), put(S, i);\n    }\n    if (!moved) break;\n  }\n  S.d = min(d1, closest(S) * (1 - 1e-9));\n}\n\n// A batch of chains, each 1.5 diameters long in total.\nfunction chains(S, n) {\n  let lifts = 0;\n  for (let k = 0; k \u003c n; k++) lifts += chain(S, floor(random() * N), floor(random() * 4), 1.5 * S.d);\n  return lifts;\n}\n\n// The Voronoi cell of disk i, by clipping a square with the bisector of each\n// nearby disk, nearest first. Its edges give the neighbours and how much each\n// one counts: psi6 = sum over edges of length * exp(6 i theta) / perimeter.\nconst PX = new Float64Array(40), PY = new Float64Array(40), PL = new Int32Array(40);\nconst QX = new Float64Array(40), QY = new Float64Array(40), QL = new Int32Array(40);\nconst CR = new Float64Array(64), CRX = new Float64Array(64), CRY = new Float64Array(64), CJ = new Int32Array(64);\nconst NBMAX = 12, CPS = 1500;\n// Density range, growth per second at Speed 2, melt time.\nconst ETA0 = 0.68, ETA1 = 0.76, GROW = 0.02, MELT = 1.2, EASE = 0.3;\n// The coarse-grained |psi6| that turns slate into full colour, and the slate.\nconst O0 = 0.35, O1 = 0.62, SL = [0.13, 0.14, 0.2];\n\nfunction voronoi(S, i) {\n  const X = S.x, Y = S.y, xi = X[i], yi = Y[i], c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n  let nc = 0;\n  for (let b = -2; b \u003c= 2; b++)\n    for (let a = -2; a \u003c= 2; a++) {\n      let qx = cx + a, qy = cy + b;\n      qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n      qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n      const q = qy * CX + qx, n = S.cnt[q];\n      for (let m = 0; m \u003c n && nc \u003c 64; m++) {\n        const j = S.slot[q * CAP + m];\n        if (j === i) continue;\n        const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n        // Insertion into the list sorted by distance.\n        let k = nc++;\n        while (k > 0 && CR[k - 1] > r2) {\n          CR[k] = CR[k - 1];\n          CRX[k] = CRX[k - 1];\n          CRY[k] = CRY[k - 1];\n          CJ[k] = CJ[k - 1];\n          k--;\n        }\n        CR[k] = r2;\n        CRX[k] = rx;\n        CRY[k] = ry;\n        CJ[k] = j;\n      }\n    }\n  const HS = 2 * C;\n  let px = PX, py = PY, pl = PL, qx = QX, qy = QY, ql = QL, nv = 4;\n  px[0] = -HS, py[0] = -HS, px[1] = HS, py[1] = -HS, px[2] = HS, py[2] = HS, px[3] = -HS, py[3] = HS;\n  pl[0] = pl[1] = pl[2] = pl[3] = -1;\n  let far2 = 2 * HS * HS;\n  for (let k = 0; k \u003c nc; k++) {\n    // A bisector farther out than every corner cannot cut the cell.\n    if (CR[k] > 4 * far2) break;\n    const ax = CRX[k], ay = CRY[k], h = CR[k] / 2;\n    let no = 0;\n    for (let v = 0; v \u003c nv; v++) {\n      const w = v + 1 \u003c nv ? v + 1 : 0, sv = ax * px[v] + ay * py[v] - h, sw = ax * px[w] + ay * py[w] - h;\n      if (sv \u003c= 0) {\n        qx[no] = px[v], qy[no] = py[v], ql[no++] = pl[v];\n        if (sw > 0) {\n          const t = sv / (sv - sw);\n          qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = k;\n        }\n      } else if (sw \u003c= 0) {\n        const t = sv / (sv - sw);\n        qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = pl[v];\n      }\n    }\n    if (no === nv) {\n      let same = true;\n      for (let v = 0; v \u003c nv && same; v++) if (ql[v] !== pl[v]) same = false;\n      if (same) continue;\n    }\n    let t = px;\n    (px = qx), (qx = t), (t = py), (py = qy), (qy = t);\n    const tl = pl;\n    (pl = ql), (ql = tl), (nv = no);\n    far2 = 0;\n    for (let v = 0; v \u003c nv; v++) far2 = max(far2, px[v] * px[v] + py[v] * py[v]);\n  }\n  // Edges: label pl[v] runs from vertex v to vertex v + 1.\n  let sr = 0, si = 0, sl = 0, nn = 0;\n  for (let v = 0; v \u003c nv; v++) {\n    const k = pl[v];\n    if (k \u003c 0) continue;\n    const w = v + 1 \u003c nv ? v + 1 : 0, len = sqrt((px[w] - px[v]) ** 2 + (py[w] - py[v]) ** 2);\n    const r = sqrt(CR[k]), ux = CRX[k] / r, uy = CRY[k] / r;\n    // (ux + i uy)^6\n    const a2r = ux * ux - uy * uy, a2i = 2 * ux * uy, a4r = a2r * a2r - a2i * a2i, a4i = 2 * a2r * a2i;\n    sr += len * (a4r * a2r - a4i * a2i);\n    si += len * (a4r * a2i + a4i * a2r);\n    sl += len;\n    if (len > 1e-6 && nn \u003c NBMAX) S.nb[i * NBMAX + nn++] = CJ[k];\n  }\n  S.pr[i] = sl > 0 ? sr / sl : 0;\n  S.pi[i] = sl > 0 ? si / sl : 0;\n  S.nn[i] = nn;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    x: new Float64Array(N), y: new Float64Array(N), cell: new Int32Array(N), pos: new Int32Array(N),\n    cnt: new Int32Array(NC), slot: new Int32Array(NC * CAP),\n    pr: new Float32Array(N), pi: new Float32Array(N), nn: new Uint8Array(N), nb: new Int32Array(N * NBMAX),\n    qr: new Float32Array(N), qi: new Float32Array(N), col: new Float32Array(N * 3), sx: new Float64Array(N), sy: new Float64Array(N),\n    buf: new Float32Array(W * H * 3),\n    d: 2.6, dT: diam(0.68), hue: 0, speed: 2, eta: 0.68, cells: 0.06, warm: false, melt: 0, acc: 0, lifts: 0,\n  });\n  // Random sequential placement at a small diameter, 0.24 packing.\n  for (let i = 0; i \u003c N; i++) {\n    for (let tries = 0; tries \u003c 2000; tries++) {\n      const x = random() * W, y = random() * H;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) {\n        const rx = wx(S.x[j] - x), ry = wy(S.y[j] - y);\n        if (rx * rx + ry * ry \u003c S.d * S.d) ok = false;\n      }\n      if (ok) {\n        S.x[i] = x;\n        S.y[i] = y;\n        break;\n      }\n    }\n    put(S, i);\n  }\n}\n\nfunction analyse(S, ease) {\n  for (let i = 0; i \u003c N; i++) voronoi(S, i);\n  // Coarse grain over the disk and its Voronoi neighbours, then ease in time.\n  for (let i = 0; i \u003c N; i++) {\n    let r = S.pr[i], m = S.pi[i];\n    const n = S.nn[i];\n    for (let k = 0; k \u003c n; k++) {\n      const j = S.nb[i * NBMAX + k];\n      r += S.pr[j];\n      m += S.pi[j];\n    }\n    r /= n + 1;\n    m /= n + 1;\n    S.qr[i] += (r - S.qr[i]) * ease;\n    S.qi[i] += (m - S.qi[i]) * ease;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.68, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.eta = cl(k[2], ETA0, ETA1);\n  S.cells = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) S.melt = MELT;\n  S.melt = max(0, S.melt - d * S.speed / 2);\n  S.dT = diam(S.melt > 0 ? 0.6 : S.eta);\n  if (!S.warm) {\n    for (let r = 0; r \u003c 600 && S.d \u003c S.dT; r++) {\n      chains(S, 40);\n      grow(S, 0.004);\n    }\n    for (let r = 0; r \u003c 60; r++) chains(S, 40);\n    analyse(S, 1);\n    S.sx.set(S.x);\n    S.sy.set(S.y);\n    S.warm = true;\n  }\n  // Chains this frame, in three batches with a growth step after each.\n  S.acc += S.speed * CPS * d;\n  const n = floor(S.acc);\n  S.acc -= n;\n  let lifts = 0;\n  for (let b = 0; b \u003c 3; b++) {\n    lifts += chains(S, floor(n / 3) + (b \u003c n % 3 ? 1 : 0));\n    grow(S, (GROW * d * S.speed) / 2 / 3);\n  }\n  S.lifts = lifts;\n  analyse(S, 0.35);\n  // The disks are drawn where they have been over the last few frames, not\n  // where the last chain left them: each one rattles in its cage by about\n  // 0.4 LED from frame to frame, which flickers on the panel.\n  for (let i = 0; i \u003c N; i++) {\n    S.sx[i] += wx(S.x[i] - S.sx[i]) * EASE;\n    S.sy[i] += wy(S.y[i] - S.sy[i]) * EASE;\n    S.sx[i] = (S.sx[i] + W) % W;\n    S.sy[i] = (S.sy[i] + H) % H;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, col, sx: X, sy: Y } = S;\n  buf.fill(0);\n  // Disk colours: hue from the phase of psi6, and from its size a blend\n  // from a dim slate (liquid) to the full colour (crystal).\n  for (let i = 0; i \u003c N; i++) {\n    const r = S.qr[i], m = S.qi[i], mag = sqrt(r * r + m * m), o = sm(O0, O1, mag), n = S.nn[i], c = i * 3;\n    if (n !== 6) {\n      const w = 0.5 + 0.5 * o;\n      col[c] = col[c + 1] = col[c + 2] = n \u003c 6 ? w : -w;\n      continue;\n    }\n    const h = S.hue + 0.47 + atan2(m, r) / (2 * PI), hh = h - floor(h);\n    // Orange and yellow at less than full brightness read brown and olive,\n    // so there the colour goes paler instead.\n    const warm = sm(0.0, 0.05, hh) * (1 - sm(0.17, 0.24, hh));\n    hsv(h, 0.88 - 0.38 * warm, 1, col, c);\n    col[c] = SL[0] + (col[c] - SL[0]) * o;\n    col[c + 1] = SL[1] + (col[c + 1] - SL[1]) * o;\n    col[c + 2] = SL[2] + (col[c + 2] - SL[2]) * o;\n  }\n  const R = S.d / 2 - 0.25, R7 = R - 0.95;\n  for (let i = 0; i \u003c N; i++) {\n    const xi = X[i], yi = Y[i], c = i * 3;\n    let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n    // A 7-neighbour disk is a ring with a dark core.\n    const ring = cr \u003c 0;\n    if (ring) cr = cg = cb = -cr;\n    for (let yy = floor(yi - R - 1); yy \u003c= yi + R + 1; yy++)\n      for (let xx = floor(xi - R - 1); xx \u003c= xi + R + 1; xx++) {\n        const ex = xx + 0.5 - xi, ey = yy + 0.5 - yi, e = sqrt(ex * ex + ey * ey);\n        let cov = cl(R + 0.5 - e, 0, 1);\n        if (ring) cov *= cl(e - R7, 0, 1);\n        if (cov \u003c= 0) continue;\n        const px = (xx + W) % W, py = (yy + H) % H, p = (py * W + px) * 3;\n        buf[p] = max(buf[p], cr * cov);\n        buf[p + 1] = max(buf[p + 1], cg * cov);\n        buf[p + 2] = max(buf[p + 2], cb * cov);\n      }\n  }\n  if (S.cells > 0.02) cells(S, buf, col);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, round(255 * buf[p]), round(255 * buf[p + 1]), round(255 * buf[p + 2]));\n}\n\n// The Voronoi field: each LED takes the colour of its nearest disk, darkened\n// where the second nearest is almost as near, which draws the cell edges.\nfunction cells(S, buf, col) {\n  const X = S.x, Y = S.y, lv = S.cells;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const fx = x + 0.5, fy = y + 0.5, cx = floor(fx / C), cy = floor(fy / C);\n      let b1 = 1e9, b2 = 1e9, j1 = 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m], rx = wx(X[j] - fx), ry = wy(Y[j] - fy), r2 = rx * rx + ry * ry;\n            if (r2 \u003c b1) (b2 = b1), (b1 = r2), (j1 = j);\n            else if (r2 \u003c b2) b2 = r2;\n          }\n        }\n      // Distance to the bisector of the two nearest is (r2^2 - r1^2) / 2 r12;\n      // with r12 about one spacing this is close enough for a seam.\n      const edge = sm(0.1, 0.7, (b2 - b1) / (2 * S.d)), c = j1 * 3;\n      let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n      if (cr \u003c 0) cr = cg = cb = 0.05;\n      const g = lv * edge;\n      buf[p] = max(buf[p], cr * g);\n      buf[p + 1] = max(buf[p + 1], cg * g);\n      buf[p + 2] = max(buf[p + 2], cb * g);\n    }\n}\n\nfunction sm(a, b, v) {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n","layer":{"id":"layer-hexatic-phase","type":"code","name":"hexatic-phase","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hexatic Phase\n// Family:  particle\n// Idea:    440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: hexatic phase of two-dimensional melting (Bertrand Halperin and David Nelson, 1978), hard disks (Berni Alder and Thomas Wainwright, 1962), event-chain Monte Carlo (Etienne Bernard, Werner Krauth and David Wilson, 2009), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1\n//\n// Knob 1: Hue. Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together.\n// Knob 2: Speed. Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it.\n// Knob 3: Density. The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs.\n// Knob 4: Cells. From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring.\n// Buttons: K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.\n\nconst W = 64, H = 128, N = 440, CX = 14, CY = 28, C = W / CX, NC = CX * CY, CAP = 12;\nconst { floor, min, max, sqrt, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wx = (v) => (v \u003c -32 ? v + W : v >= 32 ? v - W : v);\nconst wy = (v) => (v \u003c -64 ? v + H : v >= 64 ? v - H : v);\n// Disk diameter for a packing fraction: eta = N pi d^2 / 4 / (W H).\nconst diam = (eta) => sqrt((4 * eta * W * H) / (N * PI));\n\n// Hard disks have no energy, only the packing fraction. Halperin and Nelson\n// (after Kosterlitz and Thouless) said a 2D crystal melts in two steps: bound\n// pairs of dislocations unbind into a hexatic phase that keeps the lattice's\n// orientation over long distances but not its rows, and then the hexatic\n// melts into a liquid when the dislocations split into free 5s and 7s.\n// Bernard and Krauth (2011) found that for hard disks the liquid to hexatic\n// step is first order: the two coexist from 0.700 to 0.716, the hexatic\n// holds to 0.720, and the solid starts there.\n//\n// Measured here, mean over seconds 10 to 40, of the edge-weighted psi6 of\n// single disks, and the share of disks without six Voronoi neighbours:\n//   0.68  |psi6| 0.60  off six 27%    0.70  |psi6| 0.69  off six 15%\n//   0.72  |psi6| 0.75  off six  9%    0.74  |psi6| 0.84  off six  2%\n// The whole box's |psi6| goes 0.16, 0.50, 0.63, 0.79: with 440 disks the\n// patches reach the box long before the solid does.\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction cellAt(x, y) {\n  let cx = floor(x / C), cy = floor(y / C);\n  if (cx >= CX) cx -= CX;\n  if (cy >= CY) cy -= CY;\n  return cy * CX + cx;\n}\nfunction put(S, i) {\n  const c = cellAt(S.x[i], S.y[i]), k = S.cnt[c]++;\n  S.slot[c * CAP + k] = i;\n  S.cell[i] = c;\n  S.pos[i] = k;\n}\nfunction take(S, i) {\n  const c = S.cell[i], k = S.pos[i], last = --S.cnt[c], j = S.slot[c * CAP + last];\n  S.slot[c * CAP + k] = j;\n  S.pos[j] = k;\n}\n\n// One straight event chain: disk i moves along direction dir until it\n// touches another disk, which takes over the rest of the length, and so on\n// until the length is spent. Each chain leaves the uniform distribution of\n// valid configurations as it was, so a random mix of the four directions\n// does too, and the mix keeps the whole box from drifting one way.\nfunction chain(S, i, dir, len) {\n  const d = S.d, d2 = d * d, ex = dir === 0 ? 1 : dir === 2 ? -1 : 0, ey = dir === 1 ? 1 : dir === 3 ? -1 : 0;\n  const X = S.x, Y = S.y, cnt = S.cnt, slot = S.slot;\n  let lifts = 0;\n  while (len > 1e-9 && lifts \u003c 200) {\n    const xi = X[i], yi = Y[i], look = len \u003c 2 * C ? len : 2 * C, kf = 1 + floor((look + d) / C);\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n    let best = look, hit = -1;\n    for (let a = 0; a \u003c= kf; a++)\n      for (let b = -1; b \u003c= 1; b++) {\n        let qx = ex ? cx + ex * a : cx + b, qy = ex ? cy + b : cy + ey * a;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = slot[q * CAP + m];\n          if (j === i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), along = rx * ex + ry * ey, perp = ex ? ry : rx;\n          if (along \u003c= 0 || perp * perp >= d2) continue;\n          let s = along - sqrt(d2 - perp * perp);\n          if (s \u003c 0) s = 0;\n          if (s \u003c best) (best = s), (hit = j);\n        }\n      }\n    take(S, i);\n    let nx = xi + ex * best, ny = yi + ey * best;\n    nx = nx \u003c 0 ? nx + W : nx >= W ? nx - W : nx;\n    ny = ny \u003c 0 ? ny + H : ny >= H ? ny - H : ny;\n    X[i] = nx;\n    Y[i] = ny;\n    put(S, i);\n    len -= best;\n    if (hit >= 0) (i = hit), lifts++;\n  }\n  return lifts;\n}\n\n// The closest pair in the box. Disks grow to it and no further, so the box\n// is compressed without one overlap.\nfunction closest(S) {\n  const X = S.x, Y = S.y;\n  let m2 = C * C;\n  for (let i = 0; i \u003c N; i++) {\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0, xi = X[i], yi = Y[i];\n    for (let b = -1; b \u003c= 1; b++)\n      for (let a = -1; a \u003c= 1; a++) {\n        let qx = cx + a, qy = cy + b;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = S.cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = S.slot[q * CAP + m];\n          if (j \u003c= i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n          if (r2 \u003c m2) m2 = r2;\n        }\n      }\n  }\n  return sqrt(m2);\n}\n\n// Growth by a step of `rate`, then pushes: every overlapping pair is moved\n// apart along its axis, a few passes over the box. What overlap is left\n// after that is taken back by shrinking the disks to the closest pair, so the\n// chains never see two disks overlap.\nfunction grow(S, rate) {\n  if (S.dT \u003c= S.d) {\n    S.d = S.dT;\n    return;\n  }\n  const d1 = min(S.dT, S.d * (1 + rate)), X = S.x, Y = S.y;\n  for (let pass = 0; pass \u003c 4; pass++) {\n    let moved = 0;\n    for (let i = 0; i \u003c N; i++) {\n      const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m];\n            if (j \u003c= i) continue;\n            const rx = wx(X[j] - X[i]), ry = wy(Y[j] - Y[i]), r2 = rx * rx + ry * ry;\n            if (r2 >= d1 * d1 || r2 === 0) continue;\n            const r = sqrt(r2), f = (0.5 * (d1 - r) + 1e-4) / r;\n            X[i] -= rx * f;\n            Y[i] -= ry * f;\n            X[j] += rx * f;\n            Y[j] += ry * f;\n            moved++;\n          }\n        }\n    }\n    for (let i = 0; i \u003c N; i++) {\n      X[i] = (X[i] + W) % W;\n      Y[i] = (Y[i] + H) % H;\n      if (cellAt(X[i], Y[i]) !== S.cell[i]) take(S, i), put(S, i);\n    }\n    if (!moved) break;\n  }\n  S.d = min(d1, closest(S) * (1 - 1e-9));\n}\n\n// A batch of chains, each 1.5 diameters long in total.\nfunction chains(S, n) {\n  let lifts = 0;\n  for (let k = 0; k \u003c n; k++) lifts += chain(S, floor(random() * N), floor(random() * 4), 1.5 * S.d);\n  return lifts;\n}\n\n// The Voronoi cell of disk i, by clipping a square with the bisector of each\n// nearby disk, nearest first. Its edges give the neighbours and how much each\n// one counts: psi6 = sum over edges of length * exp(6 i theta) / perimeter.\nconst PX = new Float64Array(40), PY = new Float64Array(40), PL = new Int32Array(40);\nconst QX = new Float64Array(40), QY = new Float64Array(40), QL = new Int32Array(40);\nconst CR = new Float64Array(64), CRX = new Float64Array(64), CRY = new Float64Array(64), CJ = new Int32Array(64);\nconst NBMAX = 12, CPS = 1500;\n// Density range, growth per second at Speed 2, melt time.\nconst ETA0 = 0.68, ETA1 = 0.76, GROW = 0.02, MELT = 1.2, EASE = 0.3;\n// The coarse-grained |psi6| that turns slate into full colour, and the slate.\nconst O0 = 0.35, O1 = 0.62, SL = [0.13, 0.14, 0.2];\n\nfunction voronoi(S, i) {\n  const X = S.x, Y = S.y, xi = X[i], yi = Y[i], c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n  let nc = 0;\n  for (let b = -2; b \u003c= 2; b++)\n    for (let a = -2; a \u003c= 2; a++) {\n      let qx = cx + a, qy = cy + b;\n      qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n      qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n      const q = qy * CX + qx, n = S.cnt[q];\n      for (let m = 0; m \u003c n && nc \u003c 64; m++) {\n        const j = S.slot[q * CAP + m];\n        if (j === i) continue;\n        const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n        // Insertion into the list sorted by distance.\n        let k = nc++;\n        while (k > 0 && CR[k - 1] > r2) {\n          CR[k] = CR[k - 1];\n          CRX[k] = CRX[k - 1];\n          CRY[k] = CRY[k - 1];\n          CJ[k] = CJ[k - 1];\n          k--;\n        }\n        CR[k] = r2;\n        CRX[k] = rx;\n        CRY[k] = ry;\n        CJ[k] = j;\n      }\n    }\n  const HS = 2 * C;\n  let px = PX, py = PY, pl = PL, qx = QX, qy = QY, ql = QL, nv = 4;\n  px[0] = -HS, py[0] = -HS, px[1] = HS, py[1] = -HS, px[2] = HS, py[2] = HS, px[3] = -HS, py[3] = HS;\n  pl[0] = pl[1] = pl[2] = pl[3] = -1;\n  let far2 = 2 * HS * HS;\n  for (let k = 0; k \u003c nc; k++) {\n    // A bisector farther out than every corner cannot cut the cell.\n    if (CR[k] > 4 * far2) break;\n    const ax = CRX[k], ay = CRY[k], h = CR[k] / 2;\n    let no = 0;\n    for (let v = 0; v \u003c nv; v++) {\n      const w = v + 1 \u003c nv ? v + 1 : 0, sv = ax * px[v] + ay * py[v] - h, sw = ax * px[w] + ay * py[w] - h;\n      if (sv \u003c= 0) {\n        qx[no] = px[v], qy[no] = py[v], ql[no++] = pl[v];\n        if (sw > 0) {\n          const t = sv / (sv - sw);\n          qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = k;\n        }\n      } else if (sw \u003c= 0) {\n        const t = sv / (sv - sw);\n        qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = pl[v];\n      }\n    }\n    if (no === nv) {\n      let same = true;\n      for (let v = 0; v \u003c nv && same; v++) if (ql[v] !== pl[v]) same = false;\n      if (same) continue;\n    }\n    let t = px;\n    (px = qx), (qx = t), (t = py), (py = qy), (qy = t);\n    const tl = pl;\n    (pl = ql), (ql = tl), (nv = no);\n    far2 = 0;\n    for (let v = 0; v \u003c nv; v++) far2 = max(far2, px[v] * px[v] + py[v] * py[v]);\n  }\n  // Edges: label pl[v] runs from vertex v to vertex v + 1.\n  let sr = 0, si = 0, sl = 0, nn = 0;\n  for (let v = 0; v \u003c nv; v++) {\n    const k = pl[v];\n    if (k \u003c 0) continue;\n    const w = v + 1 \u003c nv ? v + 1 : 0, len = sqrt((px[w] - px[v]) ** 2 + (py[w] - py[v]) ** 2);\n    const r = sqrt(CR[k]), ux = CRX[k] / r, uy = CRY[k] / r;\n    // (ux + i uy)^6\n    const a2r = ux * ux - uy * uy, a2i = 2 * ux * uy, a4r = a2r * a2r - a2i * a2i, a4i = 2 * a2r * a2i;\n    sr += len * (a4r * a2r - a4i * a2i);\n    si += len * (a4r * a2i + a4i * a2r);\n    sl += len;\n    if (len > 1e-6 && nn \u003c NBMAX) S.nb[i * NBMAX + nn++] = CJ[k];\n  }\n  S.pr[i] = sl > 0 ? sr / sl : 0;\n  S.pi[i] = sl > 0 ? si / sl : 0;\n  S.nn[i] = nn;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    x: new Float64Array(N), y: new Float64Array(N), cell: new Int32Array(N), pos: new Int32Array(N),\n    cnt: new Int32Array(NC), slot: new Int32Array(NC * CAP),\n    pr: new Float32Array(N), pi: new Float32Array(N), nn: new Uint8Array(N), nb: new Int32Array(N * NBMAX),\n    qr: new Float32Array(N), qi: new Float32Array(N), col: new Float32Array(N * 3), sx: new Float64Array(N), sy: new Float64Array(N),\n    buf: new Float32Array(W * H * 3),\n    d: 2.6, dT: diam(0.68), hue: 0, speed: 2, eta: 0.68, cells: 0.06, warm: false, melt: 0, acc: 0, lifts: 0,\n  });\n  // Random sequential placement at a small diameter, 0.24 packing.\n  for (let i = 0; i \u003c N; i++) {\n    for (let tries = 0; tries \u003c 2000; tries++) {\n      const x = random() * W, y = random() * H;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) {\n        const rx = wx(S.x[j] - x), ry = wy(S.y[j] - y);\n        if (rx * rx + ry * ry \u003c S.d * S.d) ok = false;\n      }\n      if (ok) {\n        S.x[i] = x;\n        S.y[i] = y;\n        break;\n      }\n    }\n    put(S, i);\n  }\n}\n\nfunction analyse(S, ease) {\n  for (let i = 0; i \u003c N; i++) voronoi(S, i);\n  // Coarse grain over the disk and its Voronoi neighbours, then ease in time.\n  for (let i = 0; i \u003c N; i++) {\n    let r = S.pr[i], m = S.pi[i];\n    const n = S.nn[i];\n    for (let k = 0; k \u003c n; k++) {\n      const j = S.nb[i * NBMAX + k];\n      r += S.pr[j];\n      m += S.pi[j];\n    }\n    r /= n + 1;\n    m /= n + 1;\n    S.qr[i] += (r - S.qr[i]) * ease;\n    S.qi[i] += (m - S.qi[i]) * ease;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.68, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.eta = cl(k[2], ETA0, ETA1);\n  S.cells = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) S.melt = MELT;\n  S.melt = max(0, S.melt - d * S.speed / 2);\n  S.dT = diam(S.melt > 0 ? 0.6 : S.eta);\n  if (!S.warm) {\n    for (let r = 0; r \u003c 600 && S.d \u003c S.dT; r++) {\n      chains(S, 40);\n      grow(S, 0.004);\n    }\n    for (let r = 0; r \u003c 60; r++) chains(S, 40);\n    analyse(S, 1);\n    S.sx.set(S.x);\n    S.sy.set(S.y);\n    S.warm = true;\n  }\n  // Chains this frame, in three batches with a growth step after each.\n  S.acc += S.speed * CPS * d;\n  const n = floor(S.acc);\n  S.acc -= n;\n  let lifts = 0;\n  for (let b = 0; b \u003c 3; b++) {\n    lifts += chains(S, floor(n / 3) + (b \u003c n % 3 ? 1 : 0));\n    grow(S, (GROW * d * S.speed) / 2 / 3);\n  }\n  S.lifts = lifts;\n  analyse(S, 0.35);\n  // The disks are drawn where they have been over the last few frames, not\n  // where the last chain left them: each one rattles in its cage by about\n  // 0.4 LED from frame to frame, which flickers on the panel.\n  for (let i = 0; i \u003c N; i++) {\n    S.sx[i] += wx(S.x[i] - S.sx[i]) * EASE;\n    S.sy[i] += wy(S.y[i] - S.sy[i]) * EASE;\n    S.sx[i] = (S.sx[i] + W) % W;\n    S.sy[i] = (S.sy[i] + H) % H;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, col, sx: X, sy: Y } = S;\n  buf.fill(0);\n  // Disk colours: hue from the phase of psi6, and from its size a blend\n  // from a dim slate (liquid) to the full colour (crystal).\n  for (let i = 0; i \u003c N; i++) {\n    const r = S.qr[i], m = S.qi[i], mag = sqrt(r * r + m * m), o = sm(O0, O1, mag), n = S.nn[i], c = i * 3;\n    if (n !== 6) {\n      const w = 0.5 + 0.5 * o;\n      col[c] = col[c + 1] = col[c + 2] = n \u003c 6 ? w : -w;\n      continue;\n    }\n    const h = S.hue + 0.47 + atan2(m, r) / (2 * PI), hh = h - floor(h);\n    // Orange and yellow at less than full brightness read brown and olive,\n    // so there the colour goes paler instead.\n    const warm = sm(0.0, 0.05, hh) * (1 - sm(0.17, 0.24, hh));\n    hsv(h, 0.88 - 0.38 * warm, 1, col, c);\n    col[c] = SL[0] + (col[c] - SL[0]) * o;\n    col[c + 1] = SL[1] + (col[c + 1] - SL[1]) * o;\n    col[c + 2] = SL[2] + (col[c + 2] - SL[2]) * o;\n  }\n  const R = S.d / 2 - 0.25, R7 = R - 0.95;\n  for (let i = 0; i \u003c N; i++) {\n    const xi = X[i], yi = Y[i], c = i * 3;\n    let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n    // A 7-neighbour disk is a ring with a dark core.\n    const ring = cr \u003c 0;\n    if (ring) cr = cg = cb = -cr;\n    for (let yy = floor(yi - R - 1); yy \u003c= yi + R + 1; yy++)\n      for (let xx = floor(xi - R - 1); xx \u003c= xi + R + 1; xx++) {\n        const ex = xx + 0.5 - xi, ey = yy + 0.5 - yi, e = sqrt(ex * ex + ey * ey);\n        let cov = cl(R + 0.5 - e, 0, 1);\n        if (ring) cov *= cl(e - R7, 0, 1);\n        if (cov \u003c= 0) continue;\n        const px = (xx + W) % W, py = (yy + H) % H, p = (py * W + px) * 3;\n        buf[p] = max(buf[p], cr * cov);\n        buf[p + 1] = max(buf[p + 1], cg * cov);\n        buf[p + 2] = max(buf[p + 2], cb * cov);\n      }\n  }\n  if (S.cells > 0.02) cells(S, buf, col);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, round(255 * buf[p]), round(255 * buf[p + 1]), round(255 * buf[p + 2]));\n}\n\n// The Voronoi field: each LED takes the colour of its nearest disk, darkened\n// where the second nearest is almost as near, which draws the cell edges.\nfunction cells(S, buf, col) {\n  const X = S.x, Y = S.y, lv = S.cells;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const fx = x + 0.5, fy = y + 0.5, cx = floor(fx / C), cy = floor(fy / C);\n      let b1 = 1e9, b2 = 1e9, j1 = 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m], rx = wx(X[j] - fx), ry = wy(Y[j] - fy), r2 = rx * rx + ry * ry;\n            if (r2 \u003c b1) (b2 = b1), (b1 = r2), (j1 = j);\n            else if (r2 \u003c b2) b2 = r2;\n          }\n        }\n      // Distance to the bisector of the two nearest is (r2^2 - r1^2) / 2 r12;\n      // with r12 about one spacing this is close enough for a seam.\n      const edge = sm(0.1, 0.7, (b2 - b1) / (2 * S.d)), c = j1 * 3;\n      let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n      if (cr \u003c 0) cr = cg = cb = 0.05;\n      const g = lv * edge;\n      buf[p] = max(buf[p], cr * g);\n      buf[p + 1] = max(buf[p + 1], cg * g);\n      buf[p + 2] = max(buf[p + 2], cb * g);\n    }\n}\n\nfunction sm(a, b, v) {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together."},{"name":"Speed","min":0.2,"max":3,"about":"Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it."},{"name":"Density","min":0.68,"max":0.76,"about":"The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs."},{"name":"Cells","min":0,"max":1,"about":"From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring."}],"start":[0,2,0.68,0.06],"measures":{"motion":2.3076,"detail":0.1862,"edges":0.5515,"complexity":2.0903,"coverage":0.6781,"colour":0.3428,"drift":0.1672},"knobResponse":[0.1472,0.2305,0.3425,0.068]},{"slug":"high-dive","title":"High Dive","family":"sport","round":23,"note":"밤의 실내 다이빙장을 옆에서 봐요. 다이버가 콘크리트 타워의 지그재그 계단을 올라 10 m 플랫폼 조명 아래 서고, 1.6초 동안 공중제비를 돌며 떨어져 물에 들어가면 물속에 기포 기둥이 오르고 전광판에 심판 일곱 명의 점수가 떠요. K3 이 앞으로 뛰기부터 세 바퀴 반과 비틀기까지 다이빙을 골라요.","idea":"A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.","buttons":"K1 tap sends the waiting diver off now, or hurries the one on the stairs.","code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","layer":{"id":"layer-high-dive","type":"code","name":"high-dive","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Pool","min":0,"max":1,"about":"The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls."},{"name":"Speed","min":0.2,"max":3,"about":"Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2."},{"name":"Dive","min":0,"max":4,"about":"The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty."},{"name":"Lights","min":0,"max":1,"about":"From a dim night practice with only the tower lamps on to full competition lights."}],"start":[0,2,0,0.06],"measures":{"motion":0.3915,"detail":0.0721,"edges":0.2796,"complexity":1.8967,"coverage":0.7436,"colour":0.2296,"drift":0.0344},"knobResponse":[0.0986,0.0554,0.0399,0.1523]},{"slug":"high-striker","title":"High Striker","family":"fair","round":20,"note":"밤 장터의 하이 스트라이커가 128줄을 다 써요. 줄 선 사람들이 차례로 망치를 내리치면 퍽이 실제 중력으로 레일을 오르며 눈금을 켜다가 떨어지고, 세게 친 판이나 K1 을 누른 판에는 꼭대기 놋쇠 종이 울려 전구가 깜박이고 하늘이 밝아져요.","idea":"A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.","buttons":"K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.","code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-high-striker","type":"code","name":"high-striker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Strength","min":60,"max":130,"about":"How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder."},{"name":"Gravity","min":-1,"max":1,"about":"The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker."}],"start":[0,2,60,0.06],"measures":{"motion":0.2551,"detail":0.0819,"edges":0.4794,"complexity":1.4989,"coverage":0.8211,"colour":0.2622,"drift":0.1521},"knobResponse":[0.0547,0.0439,0.0765,0.0768]},{"slug":"hofstadter-butterfly","title":"Hofstadter Butterfly","family":"fractal","round":30,"note":"자기장 속 격자 전자의 에너지 띠를 가로에, 자속을 세로에 놓았어요. 띠 사이 틈마다 홀 전도도의 정수로 칠해 날개가 서고, 같은 밀도의 줄이 날개를 따라 흘러요.","idea":"The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.","buttons":"K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.","code":"// ===== Patternflow pattern =====\n// Title:   Hofstadter Butterfly\n// Family:  fractal\n// Idea:    The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hofstadter's butterfly (Douglas Hofstadter, 1976), coloured by the gap labels of Thouless, Kohmoto, Nightingale and den Nijs (1982), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1\n//\n// Knob 1: Hue. Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on.\n// Knob 2: Speed. At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower.\n// Knob 3: Depth. The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in.\n// Knob 4: Coupling. lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was.\n// Buttons: K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.\n\nconst W = 64, H = 128, S = 6, NS = W * S;\nconst { floor, round, cos, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst BAND = 127, TM = 40;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The nearest fraction p/q to a with q at most Q; on a tie the smaller q, so\n// p/q comes out in lowest terms.\nfunction nearest(a, Q) {\n  let bp = 0, bq = 1, bd = 9;\n  for (let q = 1; q \u003c= Q; q++) {\n    const p = round(a * q), d = abs(a - p / q);\n    if (d \u003c bd - 1e-12) (bd = d), (bp = p), (bq = q);\n  }\n  return [bp, bq];\n}\n\n// Harper's equation, psi(n+1) + psi(n-1) + 2 lambda cos(2 pi alpha n + nu)\n// psi(n) = E psi(n), at alpha = p/q. Row y has flux (127 - y) / 127, so 0 at\n// the bottom and 1 at the top; column x has energy across -(2 + 2 lambda) to\n// 2 + 2 lambda, six samples to an LED.\n//\n// For each sample: the trace D of the product of the q transfer matrices\n// [[E - V(n), -1], [1, 0]], taken at nu = pi / 2q. Chambers' relation says the\n// trace at any other nu is D - 2 lambda^q cos(q nu), so E is in the spectrum\n// at phase nu where |D - 2 lambda^q cos(q nu)| \u003c= 2, and at some phase where\n// |D| \u003c= 2 + 2 lambda^q. Both are checked against the one cached D, so the\n// phase turns every frame for nothing.\n//\n// In a gap, r bands lie below E. r comes from a Sturm count: the negative\n// pivots of the chain cut off at 3q sites count its levels below E, which are\n// 3r give or take one. The gap labelling theorem puts the density there at\n// N = r / q = s + t p / q with whole s and t, so r = t p mod q, and t is r times\n// the inverse of p mod q, taken between -q/2 and q/2. t is the Hall\n// conductance of a filled gap in units of e^2/h. t = 0 only below and above\n// the whole spectrum.\nconst V = new Float64Array(128);\nfunction buildRow(P, y) {\n  const a = (H - 1 - y) / (H - 1), [p, q] = nearest(a, P.Q), lam = P.lam;\n  if (P.rp[y] === p && P.rq[y] === q && P.rlam[y] === lam) return 0;\n  (P.rp[y] = p), (P.rq[y] = q), (P.rlam[y] = lam);\n  const Em = 2 + 2 * lam, lq = lam ** q, lim = 2 + 2 * lq;\n  let pin = 1;\n  while ((p * pin) % q !== 1 % q) pin++;\n  for (let n = 0; n \u003c q; n++) V[n] = 2 * lam * cos((2 * PI * p * (n + 1)) / q + PI / (2 * q));\n  P.rl[y] = 2 * lq;\n  const o = y * NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const E = -Em + ((j + 0.5) * 2 * Em) / NS;\n    let a0 = 1, b0 = 0, c0 = 0, d0 = 1;\n    for (let n = 0; n \u003c q; n++) {\n      const v = E - V[n], na = v * a0 - c0, nb = v * b0 - d0;\n      (c0 = a0), (d0 = b0), (a0 = na), (b0 = nb);\n    }\n    const D = a0 + d0;\n    P.D[o + j] = D;\n    if (abs(D) \u003c= lim) {\n      (P.T[o + j] = BAND), (P.R[o + j] = 255);\n      continue;\n    }\n    let cnt = 0, dp = 1e300;\n    for (let k = 0; k \u003c 3; k++)\n      for (let n = 0; n \u003c q; n++) {\n        let dd = V[n] - E - 1 / dp;\n        if (dd === 0) dd = 1e-300;\n        if (dd \u003c 0) cnt++;\n        dp = dd;\n      }\n    const r = round(cnt / 3);\n    let t = (r * pin) % q;\n    if (t > q / 2) t -= q;\n    P.T[o + j] = r === 0 || r === q ? 0 : t;\n    P.R[o + j] = r;\n  }\n  return 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    D: new Float64Array(H * NS), T: new Int8Array(H * NS), R: new Uint8Array(H * NS),\n    rp: new Int32Array(H).fill(-1), rq: new Int32Array(H), rlam: new Float64Array(H), rl: new Float64Array(H),\n    Q: -1, lam: -1, next: H, phi: 0, wave: 0, hue: NaN, bw: 0, hold: 0,\n    pal: new Float32Array((2 * TM + 1) * 3), M: new Float32Array(2 * TM + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  const Q = round(cl(k[2], 16, 64)), K4 = cl(k[3], -1, 1);\n  const lam = abs(K4) \u003c 0.08 ? 1 : 2 ** (round(K4 * 50) / 50);\n  // The first frame builds all 128 rows (9 ms at Depth 16, 40 at 64). After a\n  // turn of K3 or K4 the rows are built again from the bottom, about 512\n  // periods' worth a frame, so a full redraw takes half a second; a row whose\n  // fraction and lambda did not change is kept.\n  const first = P.Q \u003c 0;\n  if (Q !== P.Q || lam !== P.lam) (P.Q = Q), (P.lam = lam), (P.next = 0);\n  for (let budget = first ? 1e9 : 512; budget > 0 && P.next \u003c H; ) budget -= buildRow(P, H - 1 - P.next++) * P.Q;\n  const sp = cl(k[1], 0.2, 3);\n  P.phi += d * sp;\n  P.wave += d * sp * 0.125;\n  if (input.btnPressed && input.btnPressed[0]) P.hold = 6;\n  P.hold = max(0, P.hold - d);\n  P.bw = cl(P.bw + (P.hold > 0 ? d : -d) * 1.5, 0, 1);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    for (let t = -TM; t \u003c= TM; t++) {\n      const o = (t + TM) * 3, at = abs(t);\n      if (t === 0) (P.pal[o] = 0), (P.pal[o + 1] = 0), (P.pal[o + 2] = 0);\n      else hsv(k[0] + (t > 0 ? 0.5 : 0.85) - 0.05 * min(at - 1, 4), 0.82, max(0.32, 1 / (1 + 0.2 * (at - 1))), P.pal, o);\n    }\n  }\n}\n\n// In a gap with label t, the density N = s + t alpha climbs t whole units from\n// the bottom of the panel to the top (Streda's formula: dN / d alpha = t).\n// Each gap is lit by cos(2 pi (2 N - w)), which needs only t alpha because s is\n// whole: as w grows, the lines of equal N rise through a gap at 1 / t of the\n// pace of the t = 1 wings, and sink where t is negative.\nconst WK = 2;\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.Q \u003c 0) return;\n  const pal = P.pal, M = P.M, bw = P.bw, cw = 1 - bw;\n  for (let y = 0; y \u003c H; y++) {\n    const c = P.rl[y] * cos(P.phi), o = y * NS, al = (H - 1 - y) / (H - 1);\n    for (let t = -TM; t \u003c= TM; t++) M[t + TM] = cw * (0.7 + 0.3 * cos(2 * PI * (WK * t * al - P.wave)));\n    let prev = P.R[o];\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0, miss = 0;\n      for (let j = x * S; j \u003c x * S + S; j++) {\n        const t = P.T[o + j], rr = P.R[o + j];\n        if (t === BAND) {\n          // White where the band is at the present phase, grey where it is at\n          // some other phase. In the 0, 1/2 and 1 rows the white slides across.\n          const w = abs(P.D[o + j] - c) \u003c= 2 ? 255 : 110;\n          (r += w), (g += w), (b += w);\n        } else {\n          // r changed between two gap samples: bands thinner than a sample lie\n          // between them, and their count lights the LED.\n          if (prev !== 255 && rr !== prev) miss += abs(rr - prev);\n          const q = (t + TM) * 3, f = M[t + TM];\n          (r += pal[q] * f), (g += pal[q + 1] * f), (b += pal[q + 2] * f);\n        }\n        prev = rr;\n      }\n      const wm = min(1, miss * (0.2 + 0.5 * bw));\n      (r /= S), (g /= S), (b /= S);\n      display.setPixel(x, y, r + (210 - r) * wm, g + (210 - g) * wm, b + (210 - b) * wm);\n    }\n  }\n}\n","layer":{"id":"layer-hofstadter-butterfly","type":"code","name":"hofstadter-butterfly","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hofstadter Butterfly\n// Family:  fractal\n// Idea:    The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hofstadter's butterfly (Douglas Hofstadter, 1976), coloured by the gap labels of Thouless, Kohmoto, Nightingale and den Nijs (1982), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1\n//\n// Knob 1: Hue. Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on.\n// Knob 2: Speed. At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower.\n// Knob 3: Depth. The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in.\n// Knob 4: Coupling. lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was.\n// Buttons: K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.\n\nconst W = 64, H = 128, S = 6, NS = W * S;\nconst { floor, round, cos, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst BAND = 127, TM = 40;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The nearest fraction p/q to a with q at most Q; on a tie the smaller q, so\n// p/q comes out in lowest terms.\nfunction nearest(a, Q) {\n  let bp = 0, bq = 1, bd = 9;\n  for (let q = 1; q \u003c= Q; q++) {\n    const p = round(a * q), d = abs(a - p / q);\n    if (d \u003c bd - 1e-12) (bd = d), (bp = p), (bq = q);\n  }\n  return [bp, bq];\n}\n\n// Harper's equation, psi(n+1) + psi(n-1) + 2 lambda cos(2 pi alpha n + nu)\n// psi(n) = E psi(n), at alpha = p/q. Row y has flux (127 - y) / 127, so 0 at\n// the bottom and 1 at the top; column x has energy across -(2 + 2 lambda) to\n// 2 + 2 lambda, six samples to an LED.\n//\n// For each sample: the trace D of the product of the q transfer matrices\n// [[E - V(n), -1], [1, 0]], taken at nu = pi / 2q. Chambers' relation says the\n// trace at any other nu is D - 2 lambda^q cos(q nu), so E is in the spectrum\n// at phase nu where |D - 2 lambda^q cos(q nu)| \u003c= 2, and at some phase where\n// |D| \u003c= 2 + 2 lambda^q. Both are checked against the one cached D, so the\n// phase turns every frame for nothing.\n//\n// In a gap, r bands lie below E. r comes from a Sturm count: the negative\n// pivots of the chain cut off at 3q sites count its levels below E, which are\n// 3r give or take one. The gap labelling theorem puts the density there at\n// N = r / q = s + t p / q with whole s and t, so r = t p mod q, and t is r times\n// the inverse of p mod q, taken between -q/2 and q/2. t is the Hall\n// conductance of a filled gap in units of e^2/h. t = 0 only below and above\n// the whole spectrum.\nconst V = new Float64Array(128);\nfunction buildRow(P, y) {\n  const a = (H - 1 - y) / (H - 1), [p, q] = nearest(a, P.Q), lam = P.lam;\n  if (P.rp[y] === p && P.rq[y] === q && P.rlam[y] === lam) return 0;\n  (P.rp[y] = p), (P.rq[y] = q), (P.rlam[y] = lam);\n  const Em = 2 + 2 * lam, lq = lam ** q, lim = 2 + 2 * lq;\n  let pin = 1;\n  while ((p * pin) % q !== 1 % q) pin++;\n  for (let n = 0; n \u003c q; n++) V[n] = 2 * lam * cos((2 * PI * p * (n + 1)) / q + PI / (2 * q));\n  P.rl[y] = 2 * lq;\n  const o = y * NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const E = -Em + ((j + 0.5) * 2 * Em) / NS;\n    let a0 = 1, b0 = 0, c0 = 0, d0 = 1;\n    for (let n = 0; n \u003c q; n++) {\n      const v = E - V[n], na = v * a0 - c0, nb = v * b0 - d0;\n      (c0 = a0), (d0 = b0), (a0 = na), (b0 = nb);\n    }\n    const D = a0 + d0;\n    P.D[o + j] = D;\n    if (abs(D) \u003c= lim) {\n      (P.T[o + j] = BAND), (P.R[o + j] = 255);\n      continue;\n    }\n    let cnt = 0, dp = 1e300;\n    for (let k = 0; k \u003c 3; k++)\n      for (let n = 0; n \u003c q; n++) {\n        let dd = V[n] - E - 1 / dp;\n        if (dd === 0) dd = 1e-300;\n        if (dd \u003c 0) cnt++;\n        dp = dd;\n      }\n    const r = round(cnt / 3);\n    let t = (r * pin) % q;\n    if (t > q / 2) t -= q;\n    P.T[o + j] = r === 0 || r === q ? 0 : t;\n    P.R[o + j] = r;\n  }\n  return 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    D: new Float64Array(H * NS), T: new Int8Array(H * NS), R: new Uint8Array(H * NS),\n    rp: new Int32Array(H).fill(-1), rq: new Int32Array(H), rlam: new Float64Array(H), rl: new Float64Array(H),\n    Q: -1, lam: -1, next: H, phi: 0, wave: 0, hue: NaN, bw: 0, hold: 0,\n    pal: new Float32Array((2 * TM + 1) * 3), M: new Float32Array(2 * TM + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  const Q = round(cl(k[2], 16, 64)), K4 = cl(k[3], -1, 1);\n  const lam = abs(K4) \u003c 0.08 ? 1 : 2 ** (round(K4 * 50) / 50);\n  // The first frame builds all 128 rows (9 ms at Depth 16, 40 at 64). After a\n  // turn of K3 or K4 the rows are built again from the bottom, about 512\n  // periods' worth a frame, so a full redraw takes half a second; a row whose\n  // fraction and lambda did not change is kept.\n  const first = P.Q \u003c 0;\n  if (Q !== P.Q || lam !== P.lam) (P.Q = Q), (P.lam = lam), (P.next = 0);\n  for (let budget = first ? 1e9 : 512; budget > 0 && P.next \u003c H; ) budget -= buildRow(P, H - 1 - P.next++) * P.Q;\n  const sp = cl(k[1], 0.2, 3);\n  P.phi += d * sp;\n  P.wave += d * sp * 0.125;\n  if (input.btnPressed && input.btnPressed[0]) P.hold = 6;\n  P.hold = max(0, P.hold - d);\n  P.bw = cl(P.bw + (P.hold > 0 ? d : -d) * 1.5, 0, 1);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    for (let t = -TM; t \u003c= TM; t++) {\n      const o = (t + TM) * 3, at = abs(t);\n      if (t === 0) (P.pal[o] = 0), (P.pal[o + 1] = 0), (P.pal[o + 2] = 0);\n      else hsv(k[0] + (t > 0 ? 0.5 : 0.85) - 0.05 * min(at - 1, 4), 0.82, max(0.32, 1 / (1 + 0.2 * (at - 1))), P.pal, o);\n    }\n  }\n}\n\n// In a gap with label t, the density N = s + t alpha climbs t whole units from\n// the bottom of the panel to the top (Streda's formula: dN / d alpha = t).\n// Each gap is lit by cos(2 pi (2 N - w)), which needs only t alpha because s is\n// whole: as w grows, the lines of equal N rise through a gap at 1 / t of the\n// pace of the t = 1 wings, and sink where t is negative.\nconst WK = 2;\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.Q \u003c 0) return;\n  const pal = P.pal, M = P.M, bw = P.bw, cw = 1 - bw;\n  for (let y = 0; y \u003c H; y++) {\n    const c = P.rl[y] * cos(P.phi), o = y * NS, al = (H - 1 - y) / (H - 1);\n    for (let t = -TM; t \u003c= TM; t++) M[t + TM] = cw * (0.7 + 0.3 * cos(2 * PI * (WK * t * al - P.wave)));\n    let prev = P.R[o];\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0, miss = 0;\n      for (let j = x * S; j \u003c x * S + S; j++) {\n        const t = P.T[o + j], rr = P.R[o + j];\n        if (t === BAND) {\n          // White where the band is at the present phase, grey where it is at\n          // some other phase. In the 0, 1/2 and 1 rows the white slides across.\n          const w = abs(P.D[o + j] - c) \u003c= 2 ? 255 : 110;\n          (r += w), (g += w), (b += w);\n        } else {\n          // r changed between two gap samples: bands thinner than a sample lie\n          // between them, and their count lights the LED.\n          if (prev !== 255 && rr !== prev) miss += abs(rr - prev);\n          const q = (t + TM) * 3, f = M[t + TM];\n          (r += pal[q] * f), (g += pal[q + 1] * f), (b += pal[q + 2] * f);\n        }\n        prev = rr;\n      }\n      const wm = min(1, miss * (0.2 + 0.5 * bw));\n      (r /= S), (g /= S), (b /= S);\n      display.setPixel(x, y, r + (210 - r) * wm, g + (210 - g) * wm, b + (210 - b) * wm);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower."},{"name":"Depth","min":16,"max":64,"about":"The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in."},{"name":"Coupling","min":-1,"max":1,"about":"lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was."}],"start":[0,2,16,0.06],"measures":{"motion":0.216,"detail":0.0564,"edges":0.3637,"complexity":0.928,"coverage":0.7618,"colour":0.4337,"drift":0.1658},"knobResponse":[0.2654,0.1807,0.0682,0.2004]},{"slug":"hopf-fibration","title":"Hopf Fibration","family":"topology","round":29,"note":"3차원 구면을 채운 원들을 입체 사영해 원근으로 그려요. 같은 위도의 밑점에서 온 원들이 겹겹의 토러스로 소용돌이치고, 가운데 세로선이 무한을 지나는 원이에요. K3 은 토러스 수(5~7)이고, K1 을 누르면 두 원만 남아 한 번 얽힌 것이 보여요.","idea":"The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.","buttons":"K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.","code":"// ===== Patternflow pattern =====\n// Title:   Hopf Fibration\n// Family:  topology\n// Idea:    The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hopf fibration (Heinz Hopf, 1931), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17\n//\n// Knob 1: Hue. Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point.\n// Knob 2: Speed. How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks.\n// Knob 3: Rings. How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line.\n// Knob 4: Fibres. How many fibres each torus has, from 14 to 17.\n// Buttons: K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, acos, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// Points round one fibre, and the most fibres on show: seven tori of\n// seventeen, the ring and the line.\nconst NT = 96, MAXF = 7 * 17 + 2, MAXS = MAXF * NT;\nconst CT = new Float32Array(NT), ST = new Float32Array(NT);\nfor (let i = 0; i \u003c NT; i++) (CT[i] = cos((TAU * i) / NT)), (ST[i] = sin((TAU * i) / NT));\n\n// Camera distance from the middle of the ring and focal length in LEDs: the\n// ring, radius 1, is 16 LEDs from the line. Depth bins for the painter.\nconst D = 7, F = D * 16, CX = 31.5, CY = 64, NB = 64, NEAR = 0.4;\n// Polar angles of the innermost and outermost circle of base points.\nconst TH0 = 0.6, TH1 = 2.35;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), I32 = (n) => new Int32Array(n);\n  params.s = {\n    T: 0, tilt: 0, tiltTo: 0, pair: 0, hue: 0, rings: 5, fib: 14, ns: 0, cam: new Float64Array(8),\n    buf: F32(N * 3),\n    // Every fibre point on screen with its depth.\n    sx: F32(MAXS), sy: F32(MAXS), sz: F32(MAXS),\n    col: F32(MAXF * 3), lit: F32(MAXF), pp: F32(MAXF),\n    // Segments as (first point, last point), sorted far to near by depth bin.\n    sa: I32(MAXS), sb: I32(MAXS), key: new Uint8Array(MAXS), ord: I32(MAXS), bin: I32(NB + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  // 1.3 a second at Speed 2, so the strands sweep across the panel rather\n  // than drift.\n  P.T += d * cl(k[1], 0.2, 3) * 1.3;\n  P.rings = cl(k[2], 5, 7);\n  P.fib = cl(k[3], 14, 17);\n  const b = input.btnPressed || [];\n  if (b[0]) P.pair = 5;\n  if (b[1]) P.tiltTo = P.tiltTo ? 0 : 1;\n  P.pair = max(0, P.pair - d);\n  P.tilt += cl(P.tiltTo - P.tilt, -d * 0.5, d * 0.5);\n}\n\n// One fibre into the point arrays. The base point sits at polar angle th\n// from the pole whose fibre is the ring, at longitude ph; with a = th/2 its\n// fibre is (cos a e^{i(t+ph)}, sin a e^{it}) on the 3-sphere, projected\n// stereographically from (0,0,0,1) and then through the camera.\nfunction fibre(P, f, th, ph, cam) {\n  const a = th / 2, ca = cos(a), sa = sin(a), cp = cos(ph) * ca, sp = sin(ph) * ca;\n  const rx = cam[0], ry = cam[1], ux = cam[2], uy = cam[3], uz = cam[4], fx = cam[5], fy = cam[6], fz = cam[7];\n  const sx = P.sx, sy = P.sy, sz = P.sz;\n  for (let i = 0, o = f * NT; i \u003c NT; i++, o++) {\n    const c = CT[i], s = ST[i], q = 1 / (1 - sa * s + 1e-6);\n    const X = (c * cp - s * sp) * q, Y = (s * cp + c * sp) * q, Z = sa * c * q;\n    const iz = F / (D + X * fx + Y * fy + Z * fz);\n    sz[o] = F / iz;\n    sx[o] = CX + (X * rx + Y * ry) * iz;\n    sy[o] = CY - (X * ux + Y * uy + Z * uz) * iz;\n  }\n}\n\n// One segment: an antialiased core whose half width hw comes from depth, and\n// a faint halo hl wide of the same light. Each LED is pulled toward the\n// line's colour by its cover, so a near strand passes over a far one with a\n// thin dark seam: that seam is what shows which of two fibres is in front.\n// The segment is walked one LED at a time along its longer axis and owns the\n// LEDs whose centres fall in [start, end) there, so the segments of one\n// fibre meet without gaps or double cover.\nfunction line(buf, x0, y0, x1, y1, r, g, b, hw, hl, op) {\n  const dx = x1 - x0, dy = y1 - y0, E = hw + 0.5 + hl, flat = abs(dx) >= abs(dy);\n  if (abs(dx) + abs(dy) \u003c 1e-3) return;\n  // Along the major axis a, across it c; k is the slope, cs the cosine that\n  // turns a distance across into a distance from the line.\n  const a0 = flat ? x0 : y0, a1 = flat ? x1 : y1, c0 = flat ? y0 : x0, k = flat ? dy / dx : dx / dy;\n  const cs = 1 / sqrt(1 + k * k), ec = E / cs, na = flat ? W : H, nc = flat ? H : W, sa = flat ? 3 : W * 3, sc = flat ? W * 3 : 3;\n  const s0 = max(0, Math.ceil(min(a0, a1) - 0.5)), s1 = min(na - 1, Math.ceil(max(a0, a1) - 0.5) - 1);\n  for (let i = s0; i \u003c= s1; i++) {\n    const cc = c0 + (i + 0.5 - a0) * k, j0 = max(0, Math.ceil(cc - ec - 0.5)), j1 = min(nc - 1, floor(cc + ec - 0.5));\n    for (let j = j0, q = i * sa + j0 * sc; j \u003c= j1; j++, q += sc) {\n      const e = (j + 0.5 - cc) * cs, dd = (e \u003c 0 ? -e : e) - hw;\n      if (dd > E - hw) continue;\n      const w = (dd \u003c -0.5 ? 1 : dd \u003c 0.2 ? 0.5 - dd : dd \u003c 0.5 ? 0.3 : (0.3 * (E - hw - dd)) / hl) * op;\n      buf[q] += (r - buf[q]) * w;\n      buf[q + 1] += (g - buf[q + 1]) * w;\n      buf[q + 2] += (b - buf[q + 2]) * w;\n    }\n  }\n}\n\n// One segment into the depth bins, unless it is off the panel or stretched\n// across it by passing close to the camera.\nfunction emit(P, a, b) {\n  const { sx, sy, sz } = P, x0 = sx[a], y0 = sy[a], x1 = sx[b], y1 = sy[b];\n  if (abs(x1 - x0) + abs(y1 - y0) >= 70) return;\n  if ((x0 \u003c -3 && x1 \u003c -3) || (x0 > W + 3 && x1 > W + 3) || (y0 \u003c -3 && y1 \u003c -3) || (y0 > H + 3 && y1 > H + 3)) return;\n  const kb = cl(floor((((sz[a] + sz[b]) / 2 - (D - 4)) / 8) * NB), 0, NB - 1);\n  P.key[P.ns] = kb;\n  P.sa[P.ns] = a;\n  P.sb[P.ns++] = b;\n  P.bin[kb + 1]++;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const T = P.T, buf = P.buf, { sx, sy, sz, sa, sb, key, ord, bin, col, lit } = P;\n  buf.fill(0);\n  // The camera turns slowly round the line and rocks between looking across\n  // the tori and looking down into the ring.\n  const az = 0.5 + T * 0.05, el = 0.75 + 0.2 * sin(T * 0.11);\n  const ce = cos(el), se = sin(el), ca = cos(az), sn = sin(az);\n  const cam = P.cam;\n  cam[0] = -sn;\n  cam[1] = ca;\n  cam[2] = -se * ca;\n  cam[3] = -se * sn;\n  cam[4] = ce;\n  cam[5] = -ce * ca;\n  cam[6] = -ce * sn;\n  cam[7] = -se;\n  const nr = P.rings, n = floor(P.fib), tl = sm(P.tilt) * 1.1, ct = cos(tl), st = sin(tl);\n  // After a K1 tap one fibre of the innermost torus and one of the next stay\n  // lit and the rest dim to under a third.\n  const hi = sm(P.pair) * 0.7, pick0 = 0, pick1 = floor(n / 2) + 1;\n  let nf = 0;\n  for (let j = 0; j \u003c 7; j++) {\n    const on = cl(nr - j, 0, 1);\n    if (on \u003c= 0) break;\n    // Latitudes spread evenly from near the ring's pole to near the line's,\n    // each breathing on its own phase; a ring the knob is still bringing in\n    // fades up on the outermost one while the others close up.\n    const u = min(j, nr - 1) / (nr - 1), th0 = TH0 + (TH1 - TH0) * u + 0.1 * sin(T * 0.35 + j * 1.7), dir = j & 1 ? -1 : 1;\n    for (let i = 0; i \u003c n; i++) {\n      const ph = (TAU * i) / n + dir * T * 0.25 + j * 0.4;\n      // The base point, its circle of latitude tipped about the x axis.\n      const bx = sin(th0) * cos(ph), by0 = sin(th0) * sin(ph), bz0 = cos(th0);\n      const by = by0 * ct - bz0 * st, bz = by0 * st + bz0 * ct;\n      fibre(P, nf, acos(cl(bz, -1, 1)), atan2(by, bx), cam);\n      // Hue from longitude, and paler toward the ring's pole, deeper and\n      // darker toward the line's.\n      hsv(P.hue + 0.55 + i / n, 0.45 + 0.5 * u, on * (1 - 0.4 * u), col, nf * 3);\n      const picked = (j === 0 && i === pick0) || (j === 1 && i === pick1);\n      lit[nf] = picked ? 1 + hi : 1 - hi;\n      P.pp[nf] = ph + j * 1.3;\n      nf++;\n    }\n  }\n  // The ring, fibre over one pole, and the line through infinity, the fibre\n  // over the other: on the panel a vertical line through the middle.\n  const rl = 1 - hi * 0.6;\n  fibre(P, nf, 0, 0, cam);\n  P.pp[nf] = 0;\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  lit[nf++] = rl;\n  for (let i = 0, o = nf * NT; i \u003c NT; i++, o++) {\n    const Z = (i / (NT - 1) - 0.5) * 60, zc = D + Z * cam[7];\n    sz[o] = zc;\n    sx[o] = CX;\n    sy[o] = CY - (F * Z * cam[4]) / zc;\n  }\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  P.pp[nf] = 0;\n  lit[nf++] = rl;\n\n  // Cut each fibre into segments as long as they can be while the curve\n  // between their ends stays within 0.3 LED of the chord (and under 12 LEDs),\n  // skipping what lies behind the camera or off the panel; bin them by depth.\n  bin.fill(0);\n  P.ns = 0;\n  for (let f = 0; f \u003c nf; f++) {\n    const o = f * NT, end = f \u003c nf - 1 ? NT : NT - 1;\n    let ia = 0;\n    for (let i = 1; i \u003c= end; ) {\n      const a = o + ia, b = o + (i % NT), ok = sz[a] > NEAR && sz[b] > NEAR;\n      if (ok && i \u003c end && i - ia \u003c 16) {\n        const dx = sx[b] - sx[a], dy = sy[b] - sy[a], m = o + ((ia + i) >> 1);\n        const dev = abs(dx * (sy[m] - sy[a]) - dy * (sx[m] - sx[a])) / (sqrt(dx * dx + dy * dy) + 1e-6);\n        if (abs(dx) + abs(dy) \u003c 12 && dev \u003c 0.3) {\n          i++;\n          continue;\n        }\n        if (i - ia > 1) {\n          emit(P, a, b - 1);\n          ia = i - 1;\n          continue;\n        }\n      }\n      if (ok) emit(P, a, b);\n      ia = i++;\n    }\n  }\n  const ns = P.ns;\n  for (let i = 1; i \u003c= NB; i++) bin[i] += bin[i - 1];\n  for (let s = 0; s \u003c ns; s++) ord[bin[key[s]]++] = s;\n  // Far to near. A fibre is lit 1 near the camera and a quarter far off,\n  // and its core is two LEDs wide near and one far; even far off it keeps a\n  // quarter-LED halo, so thin strands fade into the dark instead of stepping\n  // off it. A slow swell of light runs round every fibre at the same rate:\n  // the circle action of the fibration, which moves each point of the\n  // 3-sphere along its own fibre.\n  // Each fibre's swell starts from its own longitude so the whole picture\n  // never dims at once.\n  for (let r = ns - 1; r >= 0; r--) {\n    const s = ord[r], a = sa[s], b = sb[s], f = floor(a / NT), c = f * 3, lf = lit[f];\n    const dn = cl(((sz[a] + sz[b]) / 2 - (D - 3)) / 6, 0, 1) * (lf > 1 ? 2 - lf : 1);\n    const v = (1 - 0.75 * dn) * lf * (0.72 + 0.28 * cos((TAU * (a % NT)) / NT + P.pp[f] - 1.6 * T));\n    line(buf, sx[a], sy[a], sx[b], sy[b], min(255, col[c] * v), min(255, col[c + 1] * v), min(255, col[c + 2] * v), 0.25 + 0.6 * (1 - dn), 0.25 + 0.65 * (1 - dn), lf \u003c 1 ? lf * lf : 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-hopf-fibration","type":"code","name":"hopf-fibration","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hopf Fibration\n// Family:  topology\n// Idea:    The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hopf fibration (Heinz Hopf, 1931), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17\n//\n// Knob 1: Hue. Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point.\n// Knob 2: Speed. How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks.\n// Knob 3: Rings. How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line.\n// Knob 4: Fibres. How many fibres each torus has, from 14 to 17.\n// Buttons: K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, acos, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// Points round one fibre, and the most fibres on show: seven tori of\n// seventeen, the ring and the line.\nconst NT = 96, MAXF = 7 * 17 + 2, MAXS = MAXF * NT;\nconst CT = new Float32Array(NT), ST = new Float32Array(NT);\nfor (let i = 0; i \u003c NT; i++) (CT[i] = cos((TAU * i) / NT)), (ST[i] = sin((TAU * i) / NT));\n\n// Camera distance from the middle of the ring and focal length in LEDs: the\n// ring, radius 1, is 16 LEDs from the line. Depth bins for the painter.\nconst D = 7, F = D * 16, CX = 31.5, CY = 64, NB = 64, NEAR = 0.4;\n// Polar angles of the innermost and outermost circle of base points.\nconst TH0 = 0.6, TH1 = 2.35;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), I32 = (n) => new Int32Array(n);\n  params.s = {\n    T: 0, tilt: 0, tiltTo: 0, pair: 0, hue: 0, rings: 5, fib: 14, ns: 0, cam: new Float64Array(8),\n    buf: F32(N * 3),\n    // Every fibre point on screen with its depth.\n    sx: F32(MAXS), sy: F32(MAXS), sz: F32(MAXS),\n    col: F32(MAXF * 3), lit: F32(MAXF), pp: F32(MAXF),\n    // Segments as (first point, last point), sorted far to near by depth bin.\n    sa: I32(MAXS), sb: I32(MAXS), key: new Uint8Array(MAXS), ord: I32(MAXS), bin: I32(NB + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  // 1.3 a second at Speed 2, so the strands sweep across the panel rather\n  // than drift.\n  P.T += d * cl(k[1], 0.2, 3) * 1.3;\n  P.rings = cl(k[2], 5, 7);\n  P.fib = cl(k[3], 14, 17);\n  const b = input.btnPressed || [];\n  if (b[0]) P.pair = 5;\n  if (b[1]) P.tiltTo = P.tiltTo ? 0 : 1;\n  P.pair = max(0, P.pair - d);\n  P.tilt += cl(P.tiltTo - P.tilt, -d * 0.5, d * 0.5);\n}\n\n// One fibre into the point arrays. The base point sits at polar angle th\n// from the pole whose fibre is the ring, at longitude ph; with a = th/2 its\n// fibre is (cos a e^{i(t+ph)}, sin a e^{it}) on the 3-sphere, projected\n// stereographically from (0,0,0,1) and then through the camera.\nfunction fibre(P, f, th, ph, cam) {\n  const a = th / 2, ca = cos(a), sa = sin(a), cp = cos(ph) * ca, sp = sin(ph) * ca;\n  const rx = cam[0], ry = cam[1], ux = cam[2], uy = cam[3], uz = cam[4], fx = cam[5], fy = cam[6], fz = cam[7];\n  const sx = P.sx, sy = P.sy, sz = P.sz;\n  for (let i = 0, o = f * NT; i \u003c NT; i++, o++) {\n    const c = CT[i], s = ST[i], q = 1 / (1 - sa * s + 1e-6);\n    const X = (c * cp - s * sp) * q, Y = (s * cp + c * sp) * q, Z = sa * c * q;\n    const iz = F / (D + X * fx + Y * fy + Z * fz);\n    sz[o] = F / iz;\n    sx[o] = CX + (X * rx + Y * ry) * iz;\n    sy[o] = CY - (X * ux + Y * uy + Z * uz) * iz;\n  }\n}\n\n// One segment: an antialiased core whose half width hw comes from depth, and\n// a faint halo hl wide of the same light. Each LED is pulled toward the\n// line's colour by its cover, so a near strand passes over a far one with a\n// thin dark seam: that seam is what shows which of two fibres is in front.\n// The segment is walked one LED at a time along its longer axis and owns the\n// LEDs whose centres fall in [start, end) there, so the segments of one\n// fibre meet without gaps or double cover.\nfunction line(buf, x0, y0, x1, y1, r, g, b, hw, hl, op) {\n  const dx = x1 - x0, dy = y1 - y0, E = hw + 0.5 + hl, flat = abs(dx) >= abs(dy);\n  if (abs(dx) + abs(dy) \u003c 1e-3) return;\n  // Along the major axis a, across it c; k is the slope, cs the cosine that\n  // turns a distance across into a distance from the line.\n  const a0 = flat ? x0 : y0, a1 = flat ? x1 : y1, c0 = flat ? y0 : x0, k = flat ? dy / dx : dx / dy;\n  const cs = 1 / sqrt(1 + k * k), ec = E / cs, na = flat ? W : H, nc = flat ? H : W, sa = flat ? 3 : W * 3, sc = flat ? W * 3 : 3;\n  const s0 = max(0, Math.ceil(min(a0, a1) - 0.5)), s1 = min(na - 1, Math.ceil(max(a0, a1) - 0.5) - 1);\n  for (let i = s0; i \u003c= s1; i++) {\n    const cc = c0 + (i + 0.5 - a0) * k, j0 = max(0, Math.ceil(cc - ec - 0.5)), j1 = min(nc - 1, floor(cc + ec - 0.5));\n    for (let j = j0, q = i * sa + j0 * sc; j \u003c= j1; j++, q += sc) {\n      const e = (j + 0.5 - cc) * cs, dd = (e \u003c 0 ? -e : e) - hw;\n      if (dd > E - hw) continue;\n      const w = (dd \u003c -0.5 ? 1 : dd \u003c 0.2 ? 0.5 - dd : dd \u003c 0.5 ? 0.3 : (0.3 * (E - hw - dd)) / hl) * op;\n      buf[q] += (r - buf[q]) * w;\n      buf[q + 1] += (g - buf[q + 1]) * w;\n      buf[q + 2] += (b - buf[q + 2]) * w;\n    }\n  }\n}\n\n// One segment into the depth bins, unless it is off the panel or stretched\n// across it by passing close to the camera.\nfunction emit(P, a, b) {\n  const { sx, sy, sz } = P, x0 = sx[a], y0 = sy[a], x1 = sx[b], y1 = sy[b];\n  if (abs(x1 - x0) + abs(y1 - y0) >= 70) return;\n  if ((x0 \u003c -3 && x1 \u003c -3) || (x0 > W + 3 && x1 > W + 3) || (y0 \u003c -3 && y1 \u003c -3) || (y0 > H + 3 && y1 > H + 3)) return;\n  const kb = cl(floor((((sz[a] + sz[b]) / 2 - (D - 4)) / 8) * NB), 0, NB - 1);\n  P.key[P.ns] = kb;\n  P.sa[P.ns] = a;\n  P.sb[P.ns++] = b;\n  P.bin[kb + 1]++;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const T = P.T, buf = P.buf, { sx, sy, sz, sa, sb, key, ord, bin, col, lit } = P;\n  buf.fill(0);\n  // The camera turns slowly round the line and rocks between looking across\n  // the tori and looking down into the ring.\n  const az = 0.5 + T * 0.05, el = 0.75 + 0.2 * sin(T * 0.11);\n  const ce = cos(el), se = sin(el), ca = cos(az), sn = sin(az);\n  const cam = P.cam;\n  cam[0] = -sn;\n  cam[1] = ca;\n  cam[2] = -se * ca;\n  cam[3] = -se * sn;\n  cam[4] = ce;\n  cam[5] = -ce * ca;\n  cam[6] = -ce * sn;\n  cam[7] = -se;\n  const nr = P.rings, n = floor(P.fib), tl = sm(P.tilt) * 1.1, ct = cos(tl), st = sin(tl);\n  // After a K1 tap one fibre of the innermost torus and one of the next stay\n  // lit and the rest dim to under a third.\n  const hi = sm(P.pair) * 0.7, pick0 = 0, pick1 = floor(n / 2) + 1;\n  let nf = 0;\n  for (let j = 0; j \u003c 7; j++) {\n    const on = cl(nr - j, 0, 1);\n    if (on \u003c= 0) break;\n    // Latitudes spread evenly from near the ring's pole to near the line's,\n    // each breathing on its own phase; a ring the knob is still bringing in\n    // fades up on the outermost one while the others close up.\n    const u = min(j, nr - 1) / (nr - 1), th0 = TH0 + (TH1 - TH0) * u + 0.1 * sin(T * 0.35 + j * 1.7), dir = j & 1 ? -1 : 1;\n    for (let i = 0; i \u003c n; i++) {\n      const ph = (TAU * i) / n + dir * T * 0.25 + j * 0.4;\n      // The base point, its circle of latitude tipped about the x axis.\n      const bx = sin(th0) * cos(ph), by0 = sin(th0) * sin(ph), bz0 = cos(th0);\n      const by = by0 * ct - bz0 * st, bz = by0 * st + bz0 * ct;\n      fibre(P, nf, acos(cl(bz, -1, 1)), atan2(by, bx), cam);\n      // Hue from longitude, and paler toward the ring's pole, deeper and\n      // darker toward the line's.\n      hsv(P.hue + 0.55 + i / n, 0.45 + 0.5 * u, on * (1 - 0.4 * u), col, nf * 3);\n      const picked = (j === 0 && i === pick0) || (j === 1 && i === pick1);\n      lit[nf] = picked ? 1 + hi : 1 - hi;\n      P.pp[nf] = ph + j * 1.3;\n      nf++;\n    }\n  }\n  // The ring, fibre over one pole, and the line through infinity, the fibre\n  // over the other: on the panel a vertical line through the middle.\n  const rl = 1 - hi * 0.6;\n  fibre(P, nf, 0, 0, cam);\n  P.pp[nf] = 0;\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  lit[nf++] = rl;\n  for (let i = 0, o = nf * NT; i \u003c NT; i++, o++) {\n    const Z = (i / (NT - 1) - 0.5) * 60, zc = D + Z * cam[7];\n    sz[o] = zc;\n    sx[o] = CX;\n    sy[o] = CY - (F * Z * cam[4]) / zc;\n  }\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  P.pp[nf] = 0;\n  lit[nf++] = rl;\n\n  // Cut each fibre into segments as long as they can be while the curve\n  // between their ends stays within 0.3 LED of the chord (and under 12 LEDs),\n  // skipping what lies behind the camera or off the panel; bin them by depth.\n  bin.fill(0);\n  P.ns = 0;\n  for (let f = 0; f \u003c nf; f++) {\n    const o = f * NT, end = f \u003c nf - 1 ? NT : NT - 1;\n    let ia = 0;\n    for (let i = 1; i \u003c= end; ) {\n      const a = o + ia, b = o + (i % NT), ok = sz[a] > NEAR && sz[b] > NEAR;\n      if (ok && i \u003c end && i - ia \u003c 16) {\n        const dx = sx[b] - sx[a], dy = sy[b] - sy[a], m = o + ((ia + i) >> 1);\n        const dev = abs(dx * (sy[m] - sy[a]) - dy * (sx[m] - sx[a])) / (sqrt(dx * dx + dy * dy) + 1e-6);\n        if (abs(dx) + abs(dy) \u003c 12 && dev \u003c 0.3) {\n          i++;\n          continue;\n        }\n        if (i - ia > 1) {\n          emit(P, a, b - 1);\n          ia = i - 1;\n          continue;\n        }\n      }\n      if (ok) emit(P, a, b);\n      ia = i++;\n    }\n  }\n  const ns = P.ns;\n  for (let i = 1; i \u003c= NB; i++) bin[i] += bin[i - 1];\n  for (let s = 0; s \u003c ns; s++) ord[bin[key[s]]++] = s;\n  // Far to near. A fibre is lit 1 near the camera and a quarter far off,\n  // and its core is two LEDs wide near and one far; even far off it keeps a\n  // quarter-LED halo, so thin strands fade into the dark instead of stepping\n  // off it. A slow swell of light runs round every fibre at the same rate:\n  // the circle action of the fibration, which moves each point of the\n  // 3-sphere along its own fibre.\n  // Each fibre's swell starts from its own longitude so the whole picture\n  // never dims at once.\n  for (let r = ns - 1; r >= 0; r--) {\n    const s = ord[r], a = sa[s], b = sb[s], f = floor(a / NT), c = f * 3, lf = lit[f];\n    const dn = cl(((sz[a] + sz[b]) / 2 - (D - 3)) / 6, 0, 1) * (lf > 1 ? 2 - lf : 1);\n    const v = (1 - 0.75 * dn) * lf * (0.72 + 0.28 * cos((TAU * (a % NT)) / NT + P.pp[f] - 1.6 * T));\n    line(buf, sx[a], sy[a], sx[b], sy[b], min(255, col[c] * v), min(255, col[c + 1] * v), min(255, col[c + 2] * v), 0.25 + 0.6 * (1 - dn), 0.25 + 0.65 * (1 - dn), lf \u003c 1 ? lf * lf : 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks."},{"name":"Rings","min":5,"max":7,"about":"How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line."},{"name":"Fibres","min":14,"max":17,"about":"How many fibres each torus has, from 14 to 17."}],"start":[0,2,5,14],"measures":{"motion":1.6067,"detail":0.0653,"edges":0.2066,"complexity":1.8736,"coverage":0.5881,"colour":0.1771,"drift":0.0635},"knobResponse":[0.0967,0.1134,0.1017,0.0832]},{"slug":"horse-in-motion","title":"Horse in Motion","family":"film","round":27,"note":"양쪽에 퍼포레이션이 뚫린 필름이 영사기 게이트를 한 칸씩 끊어 내려가고, 램프가 비추는 가운데 칸에서 머이브리지의 경주마가 열두 장의 사진으로 달려요. 위아래 칸은 어둠 속에 흐리게 다음 차례를 기다려요. K3 이 그레이하운드와 앵무새, 달리는 사람의 필름으로 갈아 끼우고, 누르면 필름이 게이트에 걸려 타요.","idea":"A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.","buttons":"K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.","code":"// ===== Patternflow pattern =====\n// Title:   Horse in Motion\n// Family:  film\n// Idea:    A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after Eadweard Muybridge, The Horse in Motion (1878)\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1\n//\n// Knob 1: Tint. The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white.\n// Knob 2: Speed. Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds.\n// Knob 3: Subject. Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice.\n// Knob 4: Lamp. How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box.\n// Buttons: K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.\n\nconst W = 64, H = 128;\n// The strip: a frame every P rows with a frame line FL rows deep at its top,\n// the picture IW by IH between the perforations from column IX, and the gate\n// framing the frame whose top is on row GY. Four perforations a frame.\nconst P = 32, FL = 3, IW = 46, IH = P - FL, IX = 9, GY = 48, NP = 12, NI = IW * IH, NS = 4;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, atan2, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst fr = (v) => v - floor(v);\nfunction hash(a, b) {\n  let h = (Math.imul(a | 0, 374761393) + Math.imul(b | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// ---- The photographs, drawn once into masks: how much of each picture LED\n// the subject covers, 1 for its near side and FAR for limbs on the far side.\nconst MASK = new Float32Array(NS * NP * NI);\nconst FAR = 0.8;\nlet MO = 0;\nfunction cap(ax, ay, bx, by, ra, rb, v) {\n  const x0 = max(0, floor(min(ax - ra, bx - rb) - 1)), x1 = min(IW - 1, ceil(max(ax + ra, bx + rb)));\n  const y0 = max(0, floor(min(ay - ra, by - rb) - 1)), y1 = min(IH - 1, ceil(max(ay + ra, by + rb)));\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay;\n      const t = cl((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx, ey = py - t * dy;\n      const c = cl(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1) * v;\n      const i = MO + y * IW + x;\n      if (c > MASK[i]) MASK[i] = c;\n    }\n}\nconst dot = (x, y, r, v) => cap(x, y, x, y, r, r, v);\n// The body's own frame: x forward, y down, turned by the pitch.\nlet BX = 0, BY = 0, BC = 1, BS = 0;\nconst frame = (x, y, a) => ((BX = x), (BY = y), (BC = cos(a)), (BS = sin(a)));\nconst wx = (x, y) => BX + x * BC - y * BS;\nconst wy = (x, y) => BY + x * BS + y * BC;\nconst bcap = (x1, y1, x2, y2, ra, rb, v) => cap(wx(x1, y1), wy(x1, y1), wx(x2, y2), wy(x2, y2), ra, rb, v);\nconst bdot = (x, y, r, v) => dot(wx(x, y), wy(x, y), r, v);\n\n// Two bones from (tx, ty) towards (fx, fy), the joint bent forward (s = 1)\n// or back (s = -1). Leaves the joint in JX, JY and the reached end in FX, FY.\nlet JX = 0, JY = 0, FX = 0, FY = 0;\nfunction ik(tx, ty, fx, fy, a, b, s) {\n  let dx = fx - tx, dy = fy - ty;\n  const d = sqrt(dx * dx + dy * dy) || 1e-6;\n  const dc = cl(d, abs(a - b) + 0.05, a + b - 0.02);\n  (dx /= d), (dy /= d);\n  const ca = (a * a + dc * dc - b * b) / (2 * a * dc), sa = sqrt(max(0, 1 - ca * ca));\n  JX = tx + a * (ca * dx + s * sa * dy);\n  JY = ty + a * (ca * dy - s * sa * dx);\n  FX = tx + dx * dc;\n  FY = ty + dy * dc;\n}\n\n// One leg of a galloping animal. c is the leg's phase from touchdown; for\n// the share D of the stride the hoof stands on the ground (row GR) while the\n// body passes over it, from G[0] ahead of the top joint to G[1] behind; then\n// it lifts by G[2], folding (G[3] pulls it further behind first), and swings\n// forward, reaching G[4] past where it lands. The top joint (tx, ty) rides a\n// quarter of the sweep, hanging from the shoulder or hip (ux, uy).\n// L = bones a and b with their bend, then four radii.\nconst GR = 26.6;\nfunction leg(c, D, G, tx, ty, ux, uy, L, v) {\n  let hx, lift = 0;\n  if (c \u003c D) hx = G[0] - ((G[0] + G[1]) * c) / D;\n  else {\n    const s = (c - D) / (1 - D), w = sin(PI * s);\n    hx = -G[1] + (G[0] + G[1]) * ease(s) - G[3] * w * (1 - s) + G[4] * w * s * s;\n    lift = G[2] * sin(PI * s ** 0.75);\n  }\n  const Tx = wx(tx + 0.25 * hx, ty), Ty = wy(tx + 0.25 * hx, ty);\n  ik(Tx, Ty, wx(tx, ty) + hx, GR - lift, L[0], L[1], L[2]);\n  cap(wx(ux, uy), wy(ux, uy), Tx, Ty, L[3], L[4], v);\n  cap(Tx, Ty, JX, JY, L[4], L[5], v);\n  dot(JX, JY, L[5], v);\n  cap(JX, JY, FX, FY, L[5] * 0.75, L[6] * 0.7, v);\n  cap(FX, FY, FX + 0.6, FY + 0.2, L[6], L[6] * 0.9, v);\n}\n\n// Sallie Gardner at a 1:40 gait, ridden by G. Domm, seen from her right.\n// A transverse gallop: left hind, right hind, left fore, right fore, then\n// all four hooves off the ground with the legs gathered under the belly.\nconst LFH = [5.2, 5.2, 1, 2.3, 1.3, 0.75, 0.8], LHH = [5.4, 5.6, -1, 3, 1.4, 0.75, 0.8];\nconst GFH = [6, 5, 6.5, 1.5, 2.5], GHH = [4, 7, 5.5, 0, 1.5];\nfunction horse(c) {\n  const pitch = 0.07 * sin(TAU * (c - 0.3));\n  frame(21, 13.8 - 0.7 * cos(TAU * (c - 0.9)), pitch);\n  const fore = (td, v) => leg(fr(c - td), 0.32, GFH, 5.4, 2.8, 6.6, -0.6, LFH, v);\n  const hind = (td, v) => leg(fr(c - td), 0.32, GHH, -5, 2.4, -6.6, -1, LHH, v);\n  hind(0, FAR);\n  fore(0.33, FAR);\n  // Barrel, chest, withers and quarters.\n  bcap(-5, 0.4, 4.5, 0.2, 3.2, 3.5, 1);\n  bdot(6.6, -0.2, 3.2, 1);\n  bcap(3, -2.4, 6.2, -2, 2.4, 2.4, 1);\n  bdot(-6.6, -0.8, 3.6, 1);\n  bdot(-4.6, -1.6, 2.8, 1);\n  // Neck stretched out and nodding, head, jaw and ear.\n  const al = 0.6 - 0.1 * sin(TAU * (c - 0.3));\n  const nx = wx(6.4, -2), ny = wy(6.4, -2);\n  const px = nx + 9.4 * cos(al), py = ny - 9.4 * sin(al);\n  cap(nx, ny, px, py, 2.8, 1.5, 1);\n  cap(wx(7.8, 0.6), wy(7.8, 0.6), px, py + 1, 2, 1.2, 1);\n  const ga = 0.85 + 0.08 * sin(TAU * (c - 0.5));\n  const mx = px + 6.2 * cos(ga), my = py + 6.2 * sin(ga);\n  cap(px, py, mx, my, 1.6, 0.95, 1);\n  dot(px + 1.2 * cos(ga) - 0.8 * sin(ga), py + 1.2 * sin(ga) + 0.8 * cos(ga), 1.55, 1);\n  cap(px - 0.3, py - 1.1, px - 1.1, py - 3, 0.55, 0.3, 1);\n  // The tail streaming out behind.\n  let tx = wx(-9.6, -2.2), ty = wy(-9.6, -2.2);\n  const T = [-3, 1.2, 1.1, 1.2, -2.8, 1.5, 1.2, 1.3, -2.4, 2, 1.3, 0.5];\n  for (let j = 0; j \u003c 12; j += 4) {\n    const ux = tx + T[j], uy = ty + T[j + 1] + (0.5 + 0.15 * j) * sin(TAU * c - j / 4);\n    cap(tx, ty, ux, uy, T[j + 2], T[j + 3], 1);\n    (tx = ux), (ty = uy);\n  }\n  hind(0.1, 1);\n  fore(0.45, 1);\n  // The jockey, crouched forward with short stirrups, hands on the neck.\n  const sx = wx(1.5, -4.4), sy = wy(1.5, -4.4), a = 0.62 + 0.05 * sin(TAU * c);\n  const hx = sx + 5.6 * sin(a), hy = sy - 5.6 * cos(a);\n  cap(sx, sy, hx, hy, 1.6, 1.5, 1);\n  dot(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), 1.4, 1);\n  cap(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), hx + 3.6 * sin(a - 0.1), hy - 1.9 * cos(a - 0.1), 0.6, 0.4, 1);\n  const kx = wx(4.8, -5.2), ky = wy(4.8, -5.2);\n  cap(sx, sy, kx, ky, 1.4, 1.1, 1);\n  cap(kx, ky, wx(3.6, -1.2), wy(3.6, -1.2), 1, 0.8, 1);\n  const ex = hx + 1.8, ey = hy + 2.6, dx = wx(8.6, -4.6), dy = wy(8.6, -4.6);\n  cap(hx, hy, ex, ey, 0.8, 0.7, 1);\n  cap(ex, ey, dx, dy, 0.7, 0.6, 1);\n  cap(dx, dy, mx - 0.5, my - 0.4, 0.3, 0.3, 0.7);\n}\n\n// A greyhound in the rotary gallop: forefeet, the gathered flight\n// with the back arched and the hind feet reaching past the fore, hind feet,\n// then the long flight stretched out flat.\nconst LFD = [5.2, 5.6, 1, 1.9, 1, 0.55, 0.65], LHD = [5.6, 6, -1, 2.6, 1.15, 0.55, 0.65];\nconst GFD = [6, 4.5, 6, 1.6, 2.5], GHD = [4, 6.5, 5, 0, 2];\nfunction dog(c) {\n  const f = cos(TAU * (c - 0.38)), hl = 6.6 - 1.4 * f;\n  frame(22, 13.2 - 0.6 * f, 0.04 * sin(TAU * (c - 0.1)));\n  const fore = (td, v) => leg(fr(c - td), 0.24, GFD, hl - 1.6, 2.4, hl - 0.8, -0.8, LFD, v);\n  const hind = (td, v) => leg(fr(c - td), 0.24, GHD, -hl + 2.6, 1.6, -hl + 1.4, -1.2, LHD, v);\n  fore(0, FAR);\n  hind(0.53, FAR);\n  // Deep chest, the waist tucked up high under an arching loin.\n  bdot(hl - 1.5, 0.2, 3.2, 1);\n  bcap(hl - 1.5, 0, hl - 5.5, -0.7, 3.2, 2.4, 1);\n  bcap(hl - 5.5, -1.1, -hl + 2.5, -1.9 - 0.8 * f, 1.8, 1.5, 1);\n  bcap(0.5, -2.3 - 1.1 * f, -hl + 2, -2.1 - 0.7 * f, 1.3, 1.3, 1);\n  bdot(-hl + 1.5, -1.5 - 0.6 * f, 2.3, 1);\n  // Long neck, narrow head with a pointed muzzle, ears folded back.\n  const nx = wx(hl, -1.5), ny = wy(hl, -1.5), al = 0.55 + 0.1 * f;\n  const px = nx + 5.4 * cos(al), py = ny - 5.4 * sin(al);\n  cap(nx, ny, px, py, 2, 1.25, 1);\n  cap(px, py, px + 5 * cos(0.42), py + 5 * sin(0.42), 1.45, 0.55, 1);\n  cap(px - 0.4, py - 0.8, px - 2, py - 1.2, 0.6, 0.35, 1);\n  // A long thin tail, curving down and up again.\n  const tx = wx(-hl, -1.8), ty = wy(-hl, -1.8), w = sin(TAU * c);\n  cap(tx, ty, tx - 3, ty + 2.2 + w * 0.5, 0.8, 0.6, 1);\n  cap(tx - 3, ty + 2.2 + w * 0.5, tx - 6, ty + 3 + w, 0.6, 0.45, 1);\n  cap(tx - 6, ty + 3 + w, tx - 8.4, ty + 1.8 + 1.4 * w, 0.45, 0.35, 1);\n  fore(0.07, 1);\n  hind(0.45, 1);\n}\n\n// A sulphur-crested cockatoo flying to the right. Each wing tapers from the\n// shoulder to a fan of primaries; seen from the side its span shows only as\n// much as it is raised or lowered, and on the upstroke the hand folds back.\nfunction bird(c) {\n  const th = 0.12 + 1.07 * cos(TAU * c), up = max(0, sin(TAU * c)), dn = max(0, -sin(TAU * c));\n  frame(22, 16 + 1.4 * sin(TAU * c + 0.6), -0.06);\n  const wing = (o, v) => {\n    const sx = wx(1 + o, -1.6), sy = wy(1 + o, -1.6), e = sin(th);\n    const ax = sx + 0.8 * dn - 2.3, ay = sy - 5 * e + 0.3;\n    const bx = ax + 1.2 * dn - 3.5 * up + 0.6, by = ay - 5.6 * e;\n    cap(sx - 2.3, sy + 0.3, ax, ay, 2.5, 2.1, v);\n    cap(ax, ay, bx, by, 2.1, 1.1, v);\n    for (let j = 0; j \u003c 4; j++) {\n      const a = th + 0.12 - 0.2 * j;\n      cap(bx + 0.4 - 0.7 * j, by, bx - 0.8 - 1.1 * j - 1.4 * up, by - 3.6 * sin(a), 0.6, 0.3, v);\n    }\n  };\n  wing(-0.8, FAR);\n  bcap(-4, 0.3, 4, -0.4, 2.3, 2.6, 1);\n  bdot(6.2, -1.2, 2.1, 1);\n  bcap(7.6, -1.6, 9.8, -0.4, 1, 0.4, 1);\n  bcap(9.4, -0.8, 9.6, 0.5, 0.45, 0.3, 1);\n  // The crest laid back in flight.\n  bcap(6, -3, 2.2, -4.6 + 0.4 * sin(TAU * c), 0.9, 0.35, 1);\n  const e = MO + round(wy(6.8, -1.6) - 0.5) * IW + round(wx(6.8, -1.6) - 0.5);\n  MASK[e] = 0.35;\n  bcap(-3.4, 0.5, -12.5, 1.4, 1.5, 0.9, 1);\n  bcap(-3.4, 1, -12, 2.9, 1.1, 0.6, FAR);\n  wing(0, 1);\n}\n\n// A man running. Hip and knee follow keyframes eight to a stride and the\n// arms swing against the legs. The figure is set down so the lower foot\n// stands on the floor, a little above it in the two moments of flight.\nconst THI = [0.42, 0.12, -0.22, -0.5, -0.35, 0.35, 0.85, 0.75], KNE = [0.12, 0.55, 0.4, 0.35, 1.5, 2.1, 1.3, 0.4];\nconst key = (K, p) => {\n  const q = fr(p) * 8, i = floor(q), f = q - i;\n  return K[i] + (K[(i + 1) & 7] - K[i]) * (1 - cos(PI * f)) * 0.5;\n};\nconst RJ = new Float32Array(24);\nfunction runner(c) {\n  let low = 0;\n  for (let s = 0; s \u003c 2; s++) {\n    const ph = c + 0.5 * s, t = key(THI, ph), k = t - key(KNE, ph), o = s * 12;\n    const ua = -0.75 * sin(TAU * (ph - 0.55));\n    RJ.set([6.4 * sin(t), 6.4 * cos(t)], o);\n    RJ.set([RJ[o] + 6.2 * sin(k), RJ[o + 1] + 6.2 * cos(k)], o + 2);\n    RJ.set([RJ[o + 2] + 2.2 * sin(k + 1.45), RJ[o + 3] + 2.2 * cos(k + 1.45)], o + 4);\n    RJ.set([4.3 * sin(ua), 4.3 * cos(ua)], o + 6);\n    RJ.set([RJ[o + 6] + 3.8 * sin(ua + 1.7), RJ[o + 7] + 3.8 * cos(ua + 1.7)], o + 8);\n    low = max(low, RJ[o + 3] + 0.5, RJ[o + 5]);\n  }\n  const fl = fr(c * 2), lift = fl > 0.375 && fl \u003c 0.5 ? 1.2 * sin((PI * (fl - 0.375)) / 0.125) : 0;\n  const hx = 21, hy = 26.6 - low - lift, sx = hx + 1.3, sy = hy - 7.1;\n  const limb = (s, v) => {\n    const o = s * 12;\n    cap(hx, hy, hx + RJ[o], hy + RJ[o + 1], 1.7, 1.15, v);\n    cap(hx + RJ[o], hy + RJ[o + 1], hx + RJ[o + 2], hy + RJ[o + 3], 1.15, 0.7, v);\n    cap(hx + RJ[o + 2], hy + RJ[o + 3], hx + RJ[o + 4], hy + RJ[o + 5], 0.7, 0.5, v);\n  };\n  const arm = (s, v) => {\n    const o = s * 12;\n    cap(sx, sy, sx + RJ[o + 6], sy + RJ[o + 7], 0.95, 0.75, v);\n    cap(sx + RJ[o + 6], sy + RJ[o + 7], sx + RJ[o + 8], sy + RJ[o + 9], 0.75, 0.6, v);\n    dot(sx + RJ[o + 8], sy + RJ[o + 9], 0.75, v);\n  };\n  arm(1, FAR);\n  limb(1, FAR);\n  cap(hx, hy, sx, sy, 1.9, 2.2, 1);\n  cap(sx, sy, sx + 0.8, sy - 2, 0.9, 0.9, 1);\n  dot(sx + 0.9, sy - 2.8, 1.75, 1);\n  limb(0, 1);\n  arm(0, 1);\n}\nconst FIGS = [horse, dog, bird, runner];\n\n// The grounds behind them. At Palo Alto a white wall ruled with upright lines\n// stands behind the track, and the horse's shadow lies on the track under\n// her. In Philadelphia black cloth strung with a white thread grid hangs\n// behind a pale floor.\nconst BD = new Float32Array(2 * NI);\nconst FIG = [0.04, 0.9, 0.9, 0.9];\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const i = y * IW + x;\n    let t = y \u003c 22 ? (x % 4 === 1 ? 0.6 : 0.9) : y \u003c 23 ? 0.32 : y \u003c 24 ? 0.55 : 0.8 - 0.02 * (y - 24);\n    const sx = (x + 0.5 - 21) / 10, sy = (y + 0.5 - 27.3) / 1.4;\n    if (sx * sx + sy * sy \u003c 1) t *= 0.6;\n    BD[i] = t;\n    BD[NI + i] = y > 26 ? 0.3 : x % 6 === 2 || y % 6 === 3 ? 0.34 : 0.05;\n  }\n// Old lenses: the corners of every plate fall off.\nconst VG = new Float32Array(NI);\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const u = (x + 0.5) / IW - 0.5, v = (y + 0.5) / IH - 0.5;\n    VG[y * IW + x] = (1 - 0.5 * u * u) * (1 - 0.4 * v * v);\n  }\n\n// Film stocks: a curve from each stock's black to its clear base, bent\n// through the grey in the middle of the row.\nconst STOCK = [\n  [0.05, 0.025, 0.012, 0.62, 0.38, 0.18, 1, 0.9, 0.7],\n  [0.05, 0.022, 0, 0.75, 0.42, 0.08, 1, 0.74, 0.3],\n  [0.05, 0.01, 0.02, 0.72, 0.26, 0.36, 1, 0.7, 0.76],\n  [0.01, 0.025, 0.07, 0.16, 0.36, 0.72, 0.72, 0.86, 1],\n  [0.01, 0.04, 0.02, 0.2, 0.52, 0.3, 0.62, 1, 0.68],\n];\nconst LAMP = [1, 0.94, 0.82];\n\n// Columns: -1 the gate's rails, -2 black film edge, -3 perforation, -4 the\n// corner column of a perforation, 0.. the picture.\nconst COL = new Int8Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const e = min(x, W - 1 - x);\n  COL[x] = e === 0 ? -1 : e >= IX ? x - IX : e >= 2 && e \u003c= 6 ? (e === 2 || e === 6 ? -4 : -3) : -2;\n}\n\nexport function setup(params) {\n  for (let s = 0; s \u003c NS; s++)\n    for (let p = 0; p \u003c NP; p++) {\n      MO = (s * NP + p) * NI;\n      FIGS[s](p / NP);\n    }\n  // Dust and a stray hair on sixteen frames that repeat along the reel, and\n  // grain on the film's own rows.\n  const DU = new Float32Array(16 * NI).fill(1);\n  for (let f = 0; f \u003c 16; f++) {\n    for (let j = 0; j \u003c 4; j++) {\n      const x = floor(Math.random() * IW), y = floor(Math.random() * IH);\n      DU[f * NI + y * IW + x] = 0.25;\n      if (Math.random() \u003c 0.4 && x + 1 \u003c IW) DU[f * NI + y * IW + x + 1] = 0.55;\n    }\n    if (f % 7 === 3) {\n      let x = 5 + Math.random() * 36, y = 4 + Math.random() * 20, a = Math.random() * TAU;\n      for (let j = 0; j \u003c 9; j++) {\n        DU[f * NI + floor(y) * IW + floor(x)] = 0.35;\n        a += Math.random() - 0.5;\n        x = cl(x + cos(a), 0, IW - 1);\n        y = cl(y + sin(a), 0, IH - 1);\n      }\n    }\n  }\n  const GN = new Float32Array(W * 256);\n  for (let i = 0; i \u003c GN.length; i++) GN[i] = 0.95 + 0.1 * Math.random();\n  params.s = {\n    DU, GN, n: 0, cyc: 0.5, pos: 1, shut: 1, fps: 3, sub: -1, base: 0, sp: [], tint: -1, lamp: -9,\n    lut: new Float32Array(3 * 65), LY: new Float32Array(H), SP: new Float32Array(H), LX: new Float32Array(W), burns: [], ask: false,\n  };\n  const S = params.s;\n  for (let x = 0; x \u003c W; x++) {\n    const c = COL[x];\n    S.LX[x] = c >= 0 ? 1 - 0.1 * ((c - 22.5) / 23) ** 2 : c === -1 ? 0.1 : c === -2 ? 0.35 : 0.5;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const d = y \u003c GY + FL ? GY + FL - y : y > GY + P - 1 ? y - GY - P + 1 : 0;\n    S.LY[y] = d === 0 ? 1 - 0.08 * ((y - GY - FL - IH / 2) / (IH / 2)) ** 2 : 0.5 * exp(-d * 0.9);\n  }\n}\n\nfunction tune(S, k) {\n  const tint = cl(k[0], 0, 1);\n  if (tint !== S.tint) {\n    S.tint = tint;\n    const q = tint * (STOCK.length - 1), i = min(STOCK.length - 2, floor(q)), f = q - i;\n    for (let j = 0; j \u003c= 64; j++) {\n      const t = j / 64, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const A = STOCK[i], B = STOCK[i + 1];\n        const g = (s) => a * s[ch] + b * s[ch + 3] + c * s[ch + 6];\n        S.lut[j * 3 + ch] = g(A) + (g(B) - g(A)) * f;\n      }\n    }\n  }\n  const lamp = cl(k[3], -1, 1);\n  if (lamp !== S.lamp) {\n    S.lamp = lamp;\n    const b = 0.05 + 0.36 * (lamp + 1);\n    for (let y = 0; y \u003c H; y++) S.SP[y] = b * (0.6 + 0.4 * exp(-(((y - 65) / 34) ** 2)));\n  }\n}\n\n// Where the strip stands: sI rows pulled since the start; frame k holds rows\n// GY + sI + k P onwards.\nconst rows = (S) => round(S.pos * P);\nconst frameAt = (S, y) => floor((y - GY - rows(S)) / P);\nfunction subOf(S, k) {\n  let s = S.base;\n  for (const sp of S.sp) if (k \u003c= sp.k) s = sp.s;\n  return s;\n}\n\nconst BURN = 1.9;\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  tune(S, k);\n  const sub = cl(round(k[2]), 0, NS - 1);\n  if (S.sub \u003c 0) S.base = sub;\n  else if (sub !== S.sub) S.sp.push({ k: frameAt(S, 0) - 1, s: sub });\n  S.sub = sub;\n  while (S.sp.length && frameAt(S, H - 1) \u003c= S.sp[0].k) S.base = S.sp.shift().s;\n  S.fps = 1.5 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0] && !S.burns.some((b) => b.t \u003c BURN + 0.5)) S.ask = true;\n  const tp = min(0.16, 0.32 / S.fps);\n  // The film stands still while a frame burns, and a burnt frame is\n  // forgotten once it has gone off the bottom of the panel.\n  let held = false;\n  for (const b of S.burns) if ((b.t += dt) \u003c BURN) held = true;\n  if (S.burns.length) S.burns = S.burns.filter((b) => frameAt(S, H - 1) >= b.k && b.t \u003c 60);\n  if (!held) {\n    S.cyc += dt * S.fps;\n    if (S.cyc >= 1) (S.cyc -= 1), S.n++;\n  }\n  const tau = S.cyc / S.fps;\n  if (tau \u003c tp) {\n    const u = tau / tp;\n    S.pos = S.n + (1 - cos(PI * u)) / 2;\n    S.shut = 1 - 0.45 * sin(PI * u);\n  } else {\n    S.pos = S.n + 1;\n    S.shut = 1;\n    if (S.ask) {\n      S.ask = false;\n      const h = [0, 1, 2].map(() => Math.random() * TAU), kg = frameAt(S, GY + FL);\n      S.burns = S.burns.filter((b) => b.k !== kg);\n      S.burns.push({ k: kg, t: 0, x: 14 + 18 * Math.random(), y: 9 + 10 * Math.random(), h });\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const sI = rows(S), { lut, DU, GN, LX, LY, SP, burns } = S;\n  // A burn: first a blister, then a hole opening in it with a glowing rim\n  // that cools once the film moves on.\n  for (const b of burns) {\n    b.rh = 9.5 * ease((b.t - 0.35) / 1.3);\n    b.rb = b.rh + 1.2 + 2.6 * ease(b.t / 0.5);\n    b.gl = b.t \u003c BURN ? 1 : max(0, 1 - (b.t - BURN) / 1.4);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const v = y - GY - sI, k = floor(v / P), r = v - k * P, iy = r - FL;\n    const sub = subOf(S, k), mo = (sub * NP + (((-k % NP) + NP) % NP)) * NI, bo = sub ? NI : 0, fg = FIG[sub];\n    const pr = r & 7, hole = pr >= 3 && pr \u003c= 6, hedge = pr === 3 || pr === 6;\n    const ex = 0.93 + 0.1 * hash(k, 7), du = (k & 15) * NI, gn = (v & 255) * W;\n    let splice = false;\n    if (iy \u003c 0) for (const sp of S.sp) if (sp.k === k - 1) splice = true;\n    // A scratch down the emulsion, one every few frames, fixed to the film.\n    const seg = floor(k / 5), hs = hash(seg, 11);\n    const scx = hs \u003c 0.55 ? floor(hash(seg, 12) * 40) + 3 + (((v >> 3) & 3) === 1 ? 1 : 0) : -9;\n    const sc0 = hash(seg, 13) * 5 * P, sc1 = sc0 + (0.3 + hash(seg, 14)) * 3 * P, vs = v - seg * 5 * P;\n    const scr = vs > sc0 && vs \u003c sc1 ? scx : -9;\n    const ly = LY[y] * S.shut, sp = SP[y];\n    let burn = null;\n    for (const b of burns) if (b.k === k) burn = b;\n    for (let x = 0; x \u003c W; x++) {\n      const c = COL[x];\n      const a = ly * LX[x], L = 0.95 * a + sp * (1 - 0.95 * a);\n      let R, G, Bl;\n      if (c \u003c -2 && hole) {\n        // A perforation: the lamp straight through, its corners rounded.\n        const e = c === -4 && hedge ? 0.45 : 1;\n        R = LAMP[0] * L * e;\n        G = LAMP[1] * L * e;\n        Bl = LAMP[2] * L * e;\n      } else if (c === -1) {\n        R = G = Bl = 0.12 * L;\n      } else {\n        let t = 0.03;\n        let br = 0;\n        if (c >= 0 && iy >= 0) {\n          const i = iy * IW + c;\n          t = (BD[bo + i] + (fg - BD[bo + i]) * MASK[mo + i]) * VG[i] * ex * DU[du + i];\n          if (c === scr) t = min(1, t + 0.22);\n          if (burn) {\n            const dx = c + 0.5 - burn.x, dy = iy + 0.5 - burn.y, an = atan2(dy, dx), h = burn.h;\n            const d = sqrt(dx * dx + dy * dy) / (1 + 0.18 * sin(3 * an + h[0]) + 0.1 * sin(5 * an + h[1]) + 0.06 * sin(11 * an + h[2]));\n            if (d \u003c burn.rh) br = 1;\n            else if (d \u003c burn.rh + 1.4 && burn.rh > 0) br = 2;\n            else if (d \u003c burn.rb) {\n              t *= 0.3 + 0.5 * hash(c >> 1, (iy >> 1) + k * 31);\n              br = 3;\n            }\n          }\n        } else if (splice && c >= 0) t = r === 1 ? 0.55 : 0.2;\n        if (br === 1) {\n          R = LAMP[0] * L;\n          G = LAMP[1] * L;\n          Bl = LAMP[2] * L;\n        } else {\n          const j = round(cl(t, 0, 1) * 64) * 3, g = L * GN[gn + x];\n          R = lut[j] * g;\n          G = lut[j + 1] * g;\n          Bl = lut[j + 2] * g;\n          if (br === 3) (R = R * 0.8 + 0.1 * L), (G *= 0.6), (Bl *= 0.4);\n          if (br === 2) (R += burn.gl), (G += 0.42 * burn.gl), (Bl += 0.06 * burn.gl);\n        }\n      }\n      display.setPixel(x, y, min(255, 255 * R), min(255, 255 * G), min(255, 255 * Bl));\n    }\n  }\n}\n","layer":{"id":"layer-horse-in-motion","type":"code","name":"horse-in-motion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Horse in Motion\n// Family:  film\n// Idea:    A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after Eadweard Muybridge, The Horse in Motion (1878)\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1\n//\n// Knob 1: Tint. The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white.\n// Knob 2: Speed. Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds.\n// Knob 3: Subject. Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice.\n// Knob 4: Lamp. How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box.\n// Buttons: K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.\n\nconst W = 64, H = 128;\n// The strip: a frame every P rows with a frame line FL rows deep at its top,\n// the picture IW by IH between the perforations from column IX, and the gate\n// framing the frame whose top is on row GY. Four perforations a frame.\nconst P = 32, FL = 3, IW = 46, IH = P - FL, IX = 9, GY = 48, NP = 12, NI = IW * IH, NS = 4;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, atan2, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst fr = (v) => v - floor(v);\nfunction hash(a, b) {\n  let h = (Math.imul(a | 0, 374761393) + Math.imul(b | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// ---- The photographs, drawn once into masks: how much of each picture LED\n// the subject covers, 1 for its near side and FAR for limbs on the far side.\nconst MASK = new Float32Array(NS * NP * NI);\nconst FAR = 0.8;\nlet MO = 0;\nfunction cap(ax, ay, bx, by, ra, rb, v) {\n  const x0 = max(0, floor(min(ax - ra, bx - rb) - 1)), x1 = min(IW - 1, ceil(max(ax + ra, bx + rb)));\n  const y0 = max(0, floor(min(ay - ra, by - rb) - 1)), y1 = min(IH - 1, ceil(max(ay + ra, by + rb)));\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay;\n      const t = cl((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx, ey = py - t * dy;\n      const c = cl(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1) * v;\n      const i = MO + y * IW + x;\n      if (c > MASK[i]) MASK[i] = c;\n    }\n}\nconst dot = (x, y, r, v) => cap(x, y, x, y, r, r, v);\n// The body's own frame: x forward, y down, turned by the pitch.\nlet BX = 0, BY = 0, BC = 1, BS = 0;\nconst frame = (x, y, a) => ((BX = x), (BY = y), (BC = cos(a)), (BS = sin(a)));\nconst wx = (x, y) => BX + x * BC - y * BS;\nconst wy = (x, y) => BY + x * BS + y * BC;\nconst bcap = (x1, y1, x2, y2, ra, rb, v) => cap(wx(x1, y1), wy(x1, y1), wx(x2, y2), wy(x2, y2), ra, rb, v);\nconst bdot = (x, y, r, v) => dot(wx(x, y), wy(x, y), r, v);\n\n// Two bones from (tx, ty) towards (fx, fy), the joint bent forward (s = 1)\n// or back (s = -1). Leaves the joint in JX, JY and the reached end in FX, FY.\nlet JX = 0, JY = 0, FX = 0, FY = 0;\nfunction ik(tx, ty, fx, fy, a, b, s) {\n  let dx = fx - tx, dy = fy - ty;\n  const d = sqrt(dx * dx + dy * dy) || 1e-6;\n  const dc = cl(d, abs(a - b) + 0.05, a + b - 0.02);\n  (dx /= d), (dy /= d);\n  const ca = (a * a + dc * dc - b * b) / (2 * a * dc), sa = sqrt(max(0, 1 - ca * ca));\n  JX = tx + a * (ca * dx + s * sa * dy);\n  JY = ty + a * (ca * dy - s * sa * dx);\n  FX = tx + dx * dc;\n  FY = ty + dy * dc;\n}\n\n// One leg of a galloping animal. c is the leg's phase from touchdown; for\n// the share D of the stride the hoof stands on the ground (row GR) while the\n// body passes over it, from G[0] ahead of the top joint to G[1] behind; then\n// it lifts by G[2], folding (G[3] pulls it further behind first), and swings\n// forward, reaching G[4] past where it lands. The top joint (tx, ty) rides a\n// quarter of the sweep, hanging from the shoulder or hip (ux, uy).\n// L = bones a and b with their bend, then four radii.\nconst GR = 26.6;\nfunction leg(c, D, G, tx, ty, ux, uy, L, v) {\n  let hx, lift = 0;\n  if (c \u003c D) hx = G[0] - ((G[0] + G[1]) * c) / D;\n  else {\n    const s = (c - D) / (1 - D), w = sin(PI * s);\n    hx = -G[1] + (G[0] + G[1]) * ease(s) - G[3] * w * (1 - s) + G[4] * w * s * s;\n    lift = G[2] * sin(PI * s ** 0.75);\n  }\n  const Tx = wx(tx + 0.25 * hx, ty), Ty = wy(tx + 0.25 * hx, ty);\n  ik(Tx, Ty, wx(tx, ty) + hx, GR - lift, L[0], L[1], L[2]);\n  cap(wx(ux, uy), wy(ux, uy), Tx, Ty, L[3], L[4], v);\n  cap(Tx, Ty, JX, JY, L[4], L[5], v);\n  dot(JX, JY, L[5], v);\n  cap(JX, JY, FX, FY, L[5] * 0.75, L[6] * 0.7, v);\n  cap(FX, FY, FX + 0.6, FY + 0.2, L[6], L[6] * 0.9, v);\n}\n\n// Sallie Gardner at a 1:40 gait, ridden by G. Domm, seen from her right.\n// A transverse gallop: left hind, right hind, left fore, right fore, then\n// all four hooves off the ground with the legs gathered under the belly.\nconst LFH = [5.2, 5.2, 1, 2.3, 1.3, 0.75, 0.8], LHH = [5.4, 5.6, -1, 3, 1.4, 0.75, 0.8];\nconst GFH = [6, 5, 6.5, 1.5, 2.5], GHH = [4, 7, 5.5, 0, 1.5];\nfunction horse(c) {\n  const pitch = 0.07 * sin(TAU * (c - 0.3));\n  frame(21, 13.8 - 0.7 * cos(TAU * (c - 0.9)), pitch);\n  const fore = (td, v) => leg(fr(c - td), 0.32, GFH, 5.4, 2.8, 6.6, -0.6, LFH, v);\n  const hind = (td, v) => leg(fr(c - td), 0.32, GHH, -5, 2.4, -6.6, -1, LHH, v);\n  hind(0, FAR);\n  fore(0.33, FAR);\n  // Barrel, chest, withers and quarters.\n  bcap(-5, 0.4, 4.5, 0.2, 3.2, 3.5, 1);\n  bdot(6.6, -0.2, 3.2, 1);\n  bcap(3, -2.4, 6.2, -2, 2.4, 2.4, 1);\n  bdot(-6.6, -0.8, 3.6, 1);\n  bdot(-4.6, -1.6, 2.8, 1);\n  // Neck stretched out and nodding, head, jaw and ear.\n  const al = 0.6 - 0.1 * sin(TAU * (c - 0.3));\n  const nx = wx(6.4, -2), ny = wy(6.4, -2);\n  const px = nx + 9.4 * cos(al), py = ny - 9.4 * sin(al);\n  cap(nx, ny, px, py, 2.8, 1.5, 1);\n  cap(wx(7.8, 0.6), wy(7.8, 0.6), px, py + 1, 2, 1.2, 1);\n  const ga = 0.85 + 0.08 * sin(TAU * (c - 0.5));\n  const mx = px + 6.2 * cos(ga), my = py + 6.2 * sin(ga);\n  cap(px, py, mx, my, 1.6, 0.95, 1);\n  dot(px + 1.2 * cos(ga) - 0.8 * sin(ga), py + 1.2 * sin(ga) + 0.8 * cos(ga), 1.55, 1);\n  cap(px - 0.3, py - 1.1, px - 1.1, py - 3, 0.55, 0.3, 1);\n  // The tail streaming out behind.\n  let tx = wx(-9.6, -2.2), ty = wy(-9.6, -2.2);\n  const T = [-3, 1.2, 1.1, 1.2, -2.8, 1.5, 1.2, 1.3, -2.4, 2, 1.3, 0.5];\n  for (let j = 0; j \u003c 12; j += 4) {\n    const ux = tx + T[j], uy = ty + T[j + 1] + (0.5 + 0.15 * j) * sin(TAU * c - j / 4);\n    cap(tx, ty, ux, uy, T[j + 2], T[j + 3], 1);\n    (tx = ux), (ty = uy);\n  }\n  hind(0.1, 1);\n  fore(0.45, 1);\n  // The jockey, crouched forward with short stirrups, hands on the neck.\n  const sx = wx(1.5, -4.4), sy = wy(1.5, -4.4), a = 0.62 + 0.05 * sin(TAU * c);\n  const hx = sx + 5.6 * sin(a), hy = sy - 5.6 * cos(a);\n  cap(sx, sy, hx, hy, 1.6, 1.5, 1);\n  dot(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), 1.4, 1);\n  cap(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), hx + 3.6 * sin(a - 0.1), hy - 1.9 * cos(a - 0.1), 0.6, 0.4, 1);\n  const kx = wx(4.8, -5.2), ky = wy(4.8, -5.2);\n  cap(sx, sy, kx, ky, 1.4, 1.1, 1);\n  cap(kx, ky, wx(3.6, -1.2), wy(3.6, -1.2), 1, 0.8, 1);\n  const ex = hx + 1.8, ey = hy + 2.6, dx = wx(8.6, -4.6), dy = wy(8.6, -4.6);\n  cap(hx, hy, ex, ey, 0.8, 0.7, 1);\n  cap(ex, ey, dx, dy, 0.7, 0.6, 1);\n  cap(dx, dy, mx - 0.5, my - 0.4, 0.3, 0.3, 0.7);\n}\n\n// A greyhound in the rotary gallop: forefeet, the gathered flight\n// with the back arched and the hind feet reaching past the fore, hind feet,\n// then the long flight stretched out flat.\nconst LFD = [5.2, 5.6, 1, 1.9, 1, 0.55, 0.65], LHD = [5.6, 6, -1, 2.6, 1.15, 0.55, 0.65];\nconst GFD = [6, 4.5, 6, 1.6, 2.5], GHD = [4, 6.5, 5, 0, 2];\nfunction dog(c) {\n  const f = cos(TAU * (c - 0.38)), hl = 6.6 - 1.4 * f;\n  frame(22, 13.2 - 0.6 * f, 0.04 * sin(TAU * (c - 0.1)));\n  const fore = (td, v) => leg(fr(c - td), 0.24, GFD, hl - 1.6, 2.4, hl - 0.8, -0.8, LFD, v);\n  const hind = (td, v) => leg(fr(c - td), 0.24, GHD, -hl + 2.6, 1.6, -hl + 1.4, -1.2, LHD, v);\n  fore(0, FAR);\n  hind(0.53, FAR);\n  // Deep chest, the waist tucked up high under an arching loin.\n  bdot(hl - 1.5, 0.2, 3.2, 1);\n  bcap(hl - 1.5, 0, hl - 5.5, -0.7, 3.2, 2.4, 1);\n  bcap(hl - 5.5, -1.1, -hl + 2.5, -1.9 - 0.8 * f, 1.8, 1.5, 1);\n  bcap(0.5, -2.3 - 1.1 * f, -hl + 2, -2.1 - 0.7 * f, 1.3, 1.3, 1);\n  bdot(-hl + 1.5, -1.5 - 0.6 * f, 2.3, 1);\n  // Long neck, narrow head with a pointed muzzle, ears folded back.\n  const nx = wx(hl, -1.5), ny = wy(hl, -1.5), al = 0.55 + 0.1 * f;\n  const px = nx + 5.4 * cos(al), py = ny - 5.4 * sin(al);\n  cap(nx, ny, px, py, 2, 1.25, 1);\n  cap(px, py, px + 5 * cos(0.42), py + 5 * sin(0.42), 1.45, 0.55, 1);\n  cap(px - 0.4, py - 0.8, px - 2, py - 1.2, 0.6, 0.35, 1);\n  // A long thin tail, curving down and up again.\n  const tx = wx(-hl, -1.8), ty = wy(-hl, -1.8), w = sin(TAU * c);\n  cap(tx, ty, tx - 3, ty + 2.2 + w * 0.5, 0.8, 0.6, 1);\n  cap(tx - 3, ty + 2.2 + w * 0.5, tx - 6, ty + 3 + w, 0.6, 0.45, 1);\n  cap(tx - 6, ty + 3 + w, tx - 8.4, ty + 1.8 + 1.4 * w, 0.45, 0.35, 1);\n  fore(0.07, 1);\n  hind(0.45, 1);\n}\n\n// A sulphur-crested cockatoo flying to the right. Each wing tapers from the\n// shoulder to a fan of primaries; seen from the side its span shows only as\n// much as it is raised or lowered, and on the upstroke the hand folds back.\nfunction bird(c) {\n  const th = 0.12 + 1.07 * cos(TAU * c), up = max(0, sin(TAU * c)), dn = max(0, -sin(TAU * c));\n  frame(22, 16 + 1.4 * sin(TAU * c + 0.6), -0.06);\n  const wing = (o, v) => {\n    const sx = wx(1 + o, -1.6), sy = wy(1 + o, -1.6), e = sin(th);\n    const ax = sx + 0.8 * dn - 2.3, ay = sy - 5 * e + 0.3;\n    const bx = ax + 1.2 * dn - 3.5 * up + 0.6, by = ay - 5.6 * e;\n    cap(sx - 2.3, sy + 0.3, ax, ay, 2.5, 2.1, v);\n    cap(ax, ay, bx, by, 2.1, 1.1, v);\n    for (let j = 0; j \u003c 4; j++) {\n      const a = th + 0.12 - 0.2 * j;\n      cap(bx + 0.4 - 0.7 * j, by, bx - 0.8 - 1.1 * j - 1.4 * up, by - 3.6 * sin(a), 0.6, 0.3, v);\n    }\n  };\n  wing(-0.8, FAR);\n  bcap(-4, 0.3, 4, -0.4, 2.3, 2.6, 1);\n  bdot(6.2, -1.2, 2.1, 1);\n  bcap(7.6, -1.6, 9.8, -0.4, 1, 0.4, 1);\n  bcap(9.4, -0.8, 9.6, 0.5, 0.45, 0.3, 1);\n  // The crest laid back in flight.\n  bcap(6, -3, 2.2, -4.6 + 0.4 * sin(TAU * c), 0.9, 0.35, 1);\n  const e = MO + round(wy(6.8, -1.6) - 0.5) * IW + round(wx(6.8, -1.6) - 0.5);\n  MASK[e] = 0.35;\n  bcap(-3.4, 0.5, -12.5, 1.4, 1.5, 0.9, 1);\n  bcap(-3.4, 1, -12, 2.9, 1.1, 0.6, FAR);\n  wing(0, 1);\n}\n\n// A man running. Hip and knee follow keyframes eight to a stride and the\n// arms swing against the legs. The figure is set down so the lower foot\n// stands on the floor, a little above it in the two moments of flight.\nconst THI = [0.42, 0.12, -0.22, -0.5, -0.35, 0.35, 0.85, 0.75], KNE = [0.12, 0.55, 0.4, 0.35, 1.5, 2.1, 1.3, 0.4];\nconst key = (K, p) => {\n  const q = fr(p) * 8, i = floor(q), f = q - i;\n  return K[i] + (K[(i + 1) & 7] - K[i]) * (1 - cos(PI * f)) * 0.5;\n};\nconst RJ = new Float32Array(24);\nfunction runner(c) {\n  let low = 0;\n  for (let s = 0; s \u003c 2; s++) {\n    const ph = c + 0.5 * s, t = key(THI, ph), k = t - key(KNE, ph), o = s * 12;\n    const ua = -0.75 * sin(TAU * (ph - 0.55));\n    RJ.set([6.4 * sin(t), 6.4 * cos(t)], o);\n    RJ.set([RJ[o] + 6.2 * sin(k), RJ[o + 1] + 6.2 * cos(k)], o + 2);\n    RJ.set([RJ[o + 2] + 2.2 * sin(k + 1.45), RJ[o + 3] + 2.2 * cos(k + 1.45)], o + 4);\n    RJ.set([4.3 * sin(ua), 4.3 * cos(ua)], o + 6);\n    RJ.set([RJ[o + 6] + 3.8 * sin(ua + 1.7), RJ[o + 7] + 3.8 * cos(ua + 1.7)], o + 8);\n    low = max(low, RJ[o + 3] + 0.5, RJ[o + 5]);\n  }\n  const fl = fr(c * 2), lift = fl > 0.375 && fl \u003c 0.5 ? 1.2 * sin((PI * (fl - 0.375)) / 0.125) : 0;\n  const hx = 21, hy = 26.6 - low - lift, sx = hx + 1.3, sy = hy - 7.1;\n  const limb = (s, v) => {\n    const o = s * 12;\n    cap(hx, hy, hx + RJ[o], hy + RJ[o + 1], 1.7, 1.15, v);\n    cap(hx + RJ[o], hy + RJ[o + 1], hx + RJ[o + 2], hy + RJ[o + 3], 1.15, 0.7, v);\n    cap(hx + RJ[o + 2], hy + RJ[o + 3], hx + RJ[o + 4], hy + RJ[o + 5], 0.7, 0.5, v);\n  };\n  const arm = (s, v) => {\n    const o = s * 12;\n    cap(sx, sy, sx + RJ[o + 6], sy + RJ[o + 7], 0.95, 0.75, v);\n    cap(sx + RJ[o + 6], sy + RJ[o + 7], sx + RJ[o + 8], sy + RJ[o + 9], 0.75, 0.6, v);\n    dot(sx + RJ[o + 8], sy + RJ[o + 9], 0.75, v);\n  };\n  arm(1, FAR);\n  limb(1, FAR);\n  cap(hx, hy, sx, sy, 1.9, 2.2, 1);\n  cap(sx, sy, sx + 0.8, sy - 2, 0.9, 0.9, 1);\n  dot(sx + 0.9, sy - 2.8, 1.75, 1);\n  limb(0, 1);\n  arm(0, 1);\n}\nconst FIGS = [horse, dog, bird, runner];\n\n// The grounds behind them. At Palo Alto a white wall ruled with upright lines\n// stands behind the track, and the horse's shadow lies on the track under\n// her. In Philadelphia black cloth strung with a white thread grid hangs\n// behind a pale floor.\nconst BD = new Float32Array(2 * NI);\nconst FIG = [0.04, 0.9, 0.9, 0.9];\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const i = y * IW + x;\n    let t = y \u003c 22 ? (x % 4 === 1 ? 0.6 : 0.9) : y \u003c 23 ? 0.32 : y \u003c 24 ? 0.55 : 0.8 - 0.02 * (y - 24);\n    const sx = (x + 0.5 - 21) / 10, sy = (y + 0.5 - 27.3) / 1.4;\n    if (sx * sx + sy * sy \u003c 1) t *= 0.6;\n    BD[i] = t;\n    BD[NI + i] = y > 26 ? 0.3 : x % 6 === 2 || y % 6 === 3 ? 0.34 : 0.05;\n  }\n// Old lenses: the corners of every plate fall off.\nconst VG = new Float32Array(NI);\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const u = (x + 0.5) / IW - 0.5, v = (y + 0.5) / IH - 0.5;\n    VG[y * IW + x] = (1 - 0.5 * u * u) * (1 - 0.4 * v * v);\n  }\n\n// Film stocks: a curve from each stock's black to its clear base, bent\n// through the grey in the middle of the row.\nconst STOCK = [\n  [0.05, 0.025, 0.012, 0.62, 0.38, 0.18, 1, 0.9, 0.7],\n  [0.05, 0.022, 0, 0.75, 0.42, 0.08, 1, 0.74, 0.3],\n  [0.05, 0.01, 0.02, 0.72, 0.26, 0.36, 1, 0.7, 0.76],\n  [0.01, 0.025, 0.07, 0.16, 0.36, 0.72, 0.72, 0.86, 1],\n  [0.01, 0.04, 0.02, 0.2, 0.52, 0.3, 0.62, 1, 0.68],\n];\nconst LAMP = [1, 0.94, 0.82];\n\n// Columns: -1 the gate's rails, -2 black film edge, -3 perforation, -4 the\n// corner column of a perforation, 0.. the picture.\nconst COL = new Int8Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const e = min(x, W - 1 - x);\n  COL[x] = e === 0 ? -1 : e >= IX ? x - IX : e >= 2 && e \u003c= 6 ? (e === 2 || e === 6 ? -4 : -3) : -2;\n}\n\nexport function setup(params) {\n  for (let s = 0; s \u003c NS; s++)\n    for (let p = 0; p \u003c NP; p++) {\n      MO = (s * NP + p) * NI;\n      FIGS[s](p / NP);\n    }\n  // Dust and a stray hair on sixteen frames that repeat along the reel, and\n  // grain on the film's own rows.\n  const DU = new Float32Array(16 * NI).fill(1);\n  for (let f = 0; f \u003c 16; f++) {\n    for (let j = 0; j \u003c 4; j++) {\n      const x = floor(Math.random() * IW), y = floor(Math.random() * IH);\n      DU[f * NI + y * IW + x] = 0.25;\n      if (Math.random() \u003c 0.4 && x + 1 \u003c IW) DU[f * NI + y * IW + x + 1] = 0.55;\n    }\n    if (f % 7 === 3) {\n      let x = 5 + Math.random() * 36, y = 4 + Math.random() * 20, a = Math.random() * TAU;\n      for (let j = 0; j \u003c 9; j++) {\n        DU[f * NI + floor(y) * IW + floor(x)] = 0.35;\n        a += Math.random() - 0.5;\n        x = cl(x + cos(a), 0, IW - 1);\n        y = cl(y + sin(a), 0, IH - 1);\n      }\n    }\n  }\n  const GN = new Float32Array(W * 256);\n  for (let i = 0; i \u003c GN.length; i++) GN[i] = 0.95 + 0.1 * Math.random();\n  params.s = {\n    DU, GN, n: 0, cyc: 0.5, pos: 1, shut: 1, fps: 3, sub: -1, base: 0, sp: [], tint: -1, lamp: -9,\n    lut: new Float32Array(3 * 65), LY: new Float32Array(H), SP: new Float32Array(H), LX: new Float32Array(W), burns: [], ask: false,\n  };\n  const S = params.s;\n  for (let x = 0; x \u003c W; x++) {\n    const c = COL[x];\n    S.LX[x] = c >= 0 ? 1 - 0.1 * ((c - 22.5) / 23) ** 2 : c === -1 ? 0.1 : c === -2 ? 0.35 : 0.5;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const d = y \u003c GY + FL ? GY + FL - y : y > GY + P - 1 ? y - GY - P + 1 : 0;\n    S.LY[y] = d === 0 ? 1 - 0.08 * ((y - GY - FL - IH / 2) / (IH / 2)) ** 2 : 0.5 * exp(-d * 0.9);\n  }\n}\n\nfunction tune(S, k) {\n  const tint = cl(k[0], 0, 1);\n  if (tint !== S.tint) {\n    S.tint = tint;\n    const q = tint * (STOCK.length - 1), i = min(STOCK.length - 2, floor(q)), f = q - i;\n    for (let j = 0; j \u003c= 64; j++) {\n      const t = j / 64, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const A = STOCK[i], B = STOCK[i + 1];\n        const g = (s) => a * s[ch] + b * s[ch + 3] + c * s[ch + 6];\n        S.lut[j * 3 + ch] = g(A) + (g(B) - g(A)) * f;\n      }\n    }\n  }\n  const lamp = cl(k[3], -1, 1);\n  if (lamp !== S.lamp) {\n    S.lamp = lamp;\n    const b = 0.05 + 0.36 * (lamp + 1);\n    for (let y = 0; y \u003c H; y++) S.SP[y] = b * (0.6 + 0.4 * exp(-(((y - 65) / 34) ** 2)));\n  }\n}\n\n// Where the strip stands: sI rows pulled since the start; frame k holds rows\n// GY + sI + k P onwards.\nconst rows = (S) => round(S.pos * P);\nconst frameAt = (S, y) => floor((y - GY - rows(S)) / P);\nfunction subOf(S, k) {\n  let s = S.base;\n  for (const sp of S.sp) if (k \u003c= sp.k) s = sp.s;\n  return s;\n}\n\nconst BURN = 1.9;\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  tune(S, k);\n  const sub = cl(round(k[2]), 0, NS - 1);\n  if (S.sub \u003c 0) S.base = sub;\n  else if (sub !== S.sub) S.sp.push({ k: frameAt(S, 0) - 1, s: sub });\n  S.sub = sub;\n  while (S.sp.length && frameAt(S, H - 1) \u003c= S.sp[0].k) S.base = S.sp.shift().s;\n  S.fps = 1.5 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0] && !S.burns.some((b) => b.t \u003c BURN + 0.5)) S.ask = true;\n  const tp = min(0.16, 0.32 / S.fps);\n  // The film stands still while a frame burns, and a burnt frame is\n  // forgotten once it has gone off the bottom of the panel.\n  let held = false;\n  for (const b of S.burns) if ((b.t += dt) \u003c BURN) held = true;\n  if (S.burns.length) S.burns = S.burns.filter((b) => frameAt(S, H - 1) >= b.k && b.t \u003c 60);\n  if (!held) {\n    S.cyc += dt * S.fps;\n    if (S.cyc >= 1) (S.cyc -= 1), S.n++;\n  }\n  const tau = S.cyc / S.fps;\n  if (tau \u003c tp) {\n    const u = tau / tp;\n    S.pos = S.n + (1 - cos(PI * u)) / 2;\n    S.shut = 1 - 0.45 * sin(PI * u);\n  } else {\n    S.pos = S.n + 1;\n    S.shut = 1;\n    if (S.ask) {\n      S.ask = false;\n      const h = [0, 1, 2].map(() => Math.random() * TAU), kg = frameAt(S, GY + FL);\n      S.burns = S.burns.filter((b) => b.k !== kg);\n      S.burns.push({ k: kg, t: 0, x: 14 + 18 * Math.random(), y: 9 + 10 * Math.random(), h });\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const sI = rows(S), { lut, DU, GN, LX, LY, SP, burns } = S;\n  // A burn: first a blister, then a hole opening in it with a glowing rim\n  // that cools once the film moves on.\n  for (const b of burns) {\n    b.rh = 9.5 * ease((b.t - 0.35) / 1.3);\n    b.rb = b.rh + 1.2 + 2.6 * ease(b.t / 0.5);\n    b.gl = b.t \u003c BURN ? 1 : max(0, 1 - (b.t - BURN) / 1.4);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const v = y - GY - sI, k = floor(v / P), r = v - k * P, iy = r - FL;\n    const sub = subOf(S, k), mo = (sub * NP + (((-k % NP) + NP) % NP)) * NI, bo = sub ? NI : 0, fg = FIG[sub];\n    const pr = r & 7, hole = pr >= 3 && pr \u003c= 6, hedge = pr === 3 || pr === 6;\n    const ex = 0.93 + 0.1 * hash(k, 7), du = (k & 15) * NI, gn = (v & 255) * W;\n    let splice = false;\n    if (iy \u003c 0) for (const sp of S.sp) if (sp.k === k - 1) splice = true;\n    // A scratch down the emulsion, one every few frames, fixed to the film.\n    const seg = floor(k / 5), hs = hash(seg, 11);\n    const scx = hs \u003c 0.55 ? floor(hash(seg, 12) * 40) + 3 + (((v >> 3) & 3) === 1 ? 1 : 0) : -9;\n    const sc0 = hash(seg, 13) * 5 * P, sc1 = sc0 + (0.3 + hash(seg, 14)) * 3 * P, vs = v - seg * 5 * P;\n    const scr = vs > sc0 && vs \u003c sc1 ? scx : -9;\n    const ly = LY[y] * S.shut, sp = SP[y];\n    let burn = null;\n    for (const b of burns) if (b.k === k) burn = b;\n    for (let x = 0; x \u003c W; x++) {\n      const c = COL[x];\n      const a = ly * LX[x], L = 0.95 * a + sp * (1 - 0.95 * a);\n      let R, G, Bl;\n      if (c \u003c -2 && hole) {\n        // A perforation: the lamp straight through, its corners rounded.\n        const e = c === -4 && hedge ? 0.45 : 1;\n        R = LAMP[0] * L * e;\n        G = LAMP[1] * L * e;\n        Bl = LAMP[2] * L * e;\n      } else if (c === -1) {\n        R = G = Bl = 0.12 * L;\n      } else {\n        let t = 0.03;\n        let br = 0;\n        if (c >= 0 && iy >= 0) {\n          const i = iy * IW + c;\n          t = (BD[bo + i] + (fg - BD[bo + i]) * MASK[mo + i]) * VG[i] * ex * DU[du + i];\n          if (c === scr) t = min(1, t + 0.22);\n          if (burn) {\n            const dx = c + 0.5 - burn.x, dy = iy + 0.5 - burn.y, an = atan2(dy, dx), h = burn.h;\n            const d = sqrt(dx * dx + dy * dy) / (1 + 0.18 * sin(3 * an + h[0]) + 0.1 * sin(5 * an + h[1]) + 0.06 * sin(11 * an + h[2]));\n            if (d \u003c burn.rh) br = 1;\n            else if (d \u003c burn.rh + 1.4 && burn.rh > 0) br = 2;\n            else if (d \u003c burn.rb) {\n              t *= 0.3 + 0.5 * hash(c >> 1, (iy >> 1) + k * 31);\n              br = 3;\n            }\n          }\n        } else if (splice && c >= 0) t = r === 1 ? 0.55 : 0.2;\n        if (br === 1) {\n          R = LAMP[0] * L;\n          G = LAMP[1] * L;\n          Bl = LAMP[2] * L;\n        } else {\n          const j = round(cl(t, 0, 1) * 64) * 3, g = L * GN[gn + x];\n          R = lut[j] * g;\n          G = lut[j + 1] * g;\n          Bl = lut[j + 2] * g;\n          if (br === 3) (R = R * 0.8 + 0.1 * L), (G *= 0.6), (Bl *= 0.4);\n          if (br === 2) (R += burn.gl), (G += 0.42 * burn.gl), (Bl += 0.06 * burn.gl);\n        }\n      }\n      display.setPixel(x, y, min(255, 255 * R), min(255, 255 * G), min(255, 255 * Bl));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white."},{"name":"Speed","min":0.2,"max":3,"about":"Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds."},{"name":"Subject","min":0,"max":3,"about":"Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice."},{"name":"Lamp","min":-1,"max":1,"about":"How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box."}],"start":[0,2,0,0.06],"measures":{"motion":1.0766,"detail":0.056,"edges":0.3551,"complexity":1.5938,"coverage":0.6083,"colour":0.0988,"drift":0.0453},"knobResponse":[0.0878,0.0582,0.1145,0.1659]},{"slug":"hourglass","title":"Hourglass","family":"time","round":2,"note":"LED 하나가 모래 한 알이에요. 두 LED 목으로 흘러 위 더미는 가운데부터 꺼지고 아래에는 원뿔이 쌓이며, 위가 비면 유리가 반 바퀴 돌아 뒤집혀요.","idea":"One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.","buttons":"K1 tap turns the glass over now.","code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-hourglass","type":"code","name":"hourglass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sand","min":0,"max":1,"about":"The colour of the sand."},{"name":"Flow","min":0.5,"max":4,"about":"How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range."},{"name":"Glass","min":0,"max":1,"about":"The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube."},{"name":"Layers","min":1,"max":6,"about":"Colours each grain by when in the run it passed the neck, so the heap below grows rings of time."}],"start":[0,2,0,1],"measures":{"motion":0.0687,"detail":0.0755,"edges":0.7242,"complexity":0.1856,"coverage":0.3468,"colour":0.2248,"drift":0.051},"knobResponse":[0.0656,0.0293,0.076,0.03]},{"slug":"hyperbolic-band","title":"Hyperbolic Band","family":"space","round":28,"note":"칠각형이 한 꼭짓점에 셋씩 모인 쌍곡 평면을 띠 모형으로 세웠어요. 패널 너비 64 LED 에 평면의 폭이 다 들어가고, 쪽매는 띠를 따라 끝없이 올라가며 양옆 가장자리에서 한없이 작아져요. K3 이 {8,3}, {5,4}, {4,5}, {3,7} 로 쪽매를 바꾸고, 누르면 반 바퀴 돌아 제 모습으로 내려앉아요.","idea":"The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.","buttons":"K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.","code":"// ===== Patternflow pattern =====\n// Title:   Hyperbolic Band\n// Family:  space\n// Idea:    The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the band model of the hyperbolic plane, with the Poincaré disk (Eugenio Beltrami 1868, Henri Poincaré 1882) and Coxeter's regular {p,q} tilings, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1\n//\n// Knob 1: Hue. Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges.\n// Knob 2: Speed. How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that.\n// Knob 3: Tiling. Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}.\n// Knob 4: Lines. At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth.\n// Buttons: K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, log, asinh, acosh, abs, tanh, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The band |Im w| \u003c 1 goes onto the Poincaré disk by z = tanh(pi w / 4). Here\n// Im w runs across the panel, one unit to 32 LEDs, and Re w up it, so the\n// middle line of the band is the disk's real diameter, a geodesic. Along it a\n// unit of w is pi / 2 of hyperbolic length; at a distance v off it, a LED is\n// 1 / cos(pi v / 2) times longer.\nconst ZX = new Float64Array(N), ZY = new Float64Array(N), RHO = new Float64Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const v = (x + 0.5 - W / 2) / 32;\n  RHO[x] = PI / 64 / cos((PI * v) / 2);\n  for (let y = 0; y \u003c H; y++) {\n    const u = (H / 2 - y - 0.5) / 32, a = (PI * u) / 2, b = (PI * v) / 2, d = Math.cosh(a) + cos(b);\n    ZX[y * W + x] = Math.sinh(a) / d;\n    ZY[y * W + x] = sin(b) / d;\n  }\n}\n\n// The tilings. For each, the fundamental triangle of its reflection group:\n// the corner at the origin (a tile's centre) with angle pi/p between the real\n// axis and the ray at pi/p, and the circle mirror (the tile's edge) crossing\n// the real axis square at distance a. a is the tile's inradius, R its\n// circumradius, e half an edge. T is the shortest translation along the real\n// axis that is a symmetry: twice the gap between the mirrors that cross the\n// axis square, which depends on what the axis meets on its way.\nconst TIL = [[7, 3], [8, 3], [5, 4], [4, 5], [3, 7]].map(([p, q]) => {\n  const a = acosh(cos(PI / q) / sin(PI / p)), R = acosh(1 / (Math.tan(PI / p) * Math.tan(PI / q))), e = acosh(cos(PI / p) / sin(PI / q));\n  const m = tanh(a / 2), C = (m + 1 / m) / 2, r = (1 / m - m) / 2;\n  const T = p % 2 === 0 ? 2 * a : q % 2 === 0 ? 4 * (a + R) : 2 * (a + R + e);\n  const rc = new Float64Array(p), rs = new Float64Array(p);\n  for (let k = 0; k \u003c p; k++) (rc[k] = cos((2 * PI * k) / p)), (rs[k] = sin((2 * PI * k) / p));\n  // The wedge number, p added, taken round to 0..p-1.\n  const wr = new Int8Array(3 * p).map((_, i) => i % p);\n  return { p, q, a, R, C, r, r2: r * r, Tb: (2 * T) / PI, m0: (2 * a) / PI, rc, rs, wr, sf: sin(PI / p), cf: cos(PI / p) };\n});\n\nconst MAXIT = 40;\nconst CODE = new Int8Array(MAXIT);\nlet lutHue = NaN;\nconst LUT = new Float32Array(1024 * 3);\nfunction hsv(h, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const rgb = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = { s: 0, hue: 0, til: 0, lines: 0.06, speed: 2, spin: -1, m: 0, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.til = cl(Math.round(k[2]), 0, TIL.length - 1);\n  P.lines = cl(k[3], 0, 1);\n  const G = TIL[P.til];\n  // Tiles climb: the point of the tiling under the panel's centre moves down\n  // the band. 12 LEDs a second at Speed 2.\n  const slow = P.spin >= 0 ? 1 - 0.8 * sin(PI * P.spin) : 1;\n  P.s -= d * P.speed * 0.1875 * slow;\n  P.s -= G.Tb * floor(P.s / G.Tb + 0.5);\n  if (P.spin >= 0) {\n    P.spin += d / 3;\n    if (P.spin >= 1) P.spin = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) {\n    // The nearest point where a mirror crosses the axis square: the middle of\n    // an edge, or for even p a tile's centre too.\n    const h = G.Tb / 2;\n    P.m = G.m0 + h * Math.round((P.s - G.m0) / h);\n    P.spin = 0;\n  }\n}\n\n// Complex 2x2 Möbius matrices as [ar, ai, br, bi, cr, ci, dr, di].\nfunction mul(A, B) {\n  const o = [];\n  for (let i = 0; i \u003c 2; i++)\n    for (let j = 0; j \u003c 2; j++) {\n      const p = A[i * 4], pi = A[i * 4 + 1], q = A[i * 4 + 2], qi = A[i * 4 + 3];\n      const u = B[j * 2], ui = B[j * 2 + 1], v = B[4 + j * 2], vi = B[5 + j * 2];\n      o.push(p * u - pi * ui + q * v - qi * vi, p * ui + pi * u + q * vi + qi * v);\n    }\n  return o;\n}\nconst trans = (wb) => {\n  const t = tanh((PI * wb) / 4);\n  return [1, 0, t, 0, t, 0, 1, 0];\n};\nconst rot = (th) => [cos(th / 2), sin(th / 2), 0, 0, 0, 0, cos(th / 2), -sin(th / 2)];\n\n// The colour of a point of the tiling from where it sits on the band: cyan\n// glass on the middle line going through blue and violet to magenta at the\n// edges, and swinging a little along the band with the period T. Both are\n// kept by the half turn of K1 about any point where a mirror crosses the axis\n// square, and by the slide of one period.\nfunction hueAt(G, x, y) {\n  const u = (1 / PI) * log(((1 + x) ** 2 + y * y) / ((1 - x) ** 2 + y * y)), v = (2 / PI) * atan2(2 * y, 1 - x * x - y * y);\n  const h = 0.5 + 0.06 * cos((2 * PI * (u - G.m0)) / G.Tb) + 0.3 * sqrt(abs(v));\n  return (((h - floor(h)) * 1024) | 0) * 3;\n}\n\n// atan2 to a hundred-thousandth of a radian, which is all the fold needs to\n// pick its wedge: a point that lands a hair across a straight mirror is on\n// that mirror either way.\nfunction fat(y, x) {\n  const ax = x \u003c 0 ? -x : x, ay = y \u003c 0 ? -y : y, a = (ax \u003c ay ? ax : ay) / ((ax \u003c ay ? ay : ax) + 1e-300), q = a * a;\n  let r = ((-0.0464964749 * q + 0.15931422) * q - 0.327622764) * q * a + a;\n  if (ay > ax) r = PI / 2 - r;\n  if (x \u003c 0) r = PI - r;\n  return y \u003c 0 ? -r : r;\n}\n\nconst PREV = new Int8Array(MAXIT);\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const G = TIL[P.til], { p, C, r, r2, rc, rs, sf, cf, wr, a: ina, R: circ } = G, pp = p / PI;\n  const buf = P.buf, L = P.lines;\n  // From the panel's disk to the tiling: slide s along the axis, and during\n  // the K1 half turn, turn by th about the crossing m on the way.\n  let M = trans(P.s), mir = 0;\n  if (P.spin >= 0) {\n    const u = P.spin, th = PI * u * u * (3 - 2 * u);\n    M = mul(trans(P.m), mul(rot(th), trans(P.s - P.m)));\n    mir = sin(PI * u);\n  }\n  const [ar, ai, br, bi, cr, ci, dr, di] = M;\n  if (lutHue !== P.hue) for (let i = 0; i \u003c 1024; i++) hsv(i / 1024 + (lutHue = P.hue), LUT, i * 3);\n  const glassV = 1 - 0.78 * L, haze = 0.62 * glassV + 0.12 * L;\n  const lineR = 255 * L, lineG = 245 * L, lineB = 225 * L;\n  // The leading and the mirrors are lines of fixed hyperbolic width, box\n  // filtered over the LED, so they thin out with the tiles.\n  const hw = 0.035, mw = 0.025;\n  // The haze comes in as a tile's inradius drops from about three LEDs to one.\n  for (let x = 0; x \u003c W; x++) {\n    const rho = RHO[x], fog = sm(0.3 * ina, 1.1 * ina, rho);\n    let pn = -1, po = 0;\n    for (let y = 0; y \u003c H; y++) {\n      const i = y * W + x, zx = ZX[i], zy = ZY[i];\n      const nx = ar * zx - ai * zy + br, ny = ar * zy + ai * zx + bi;\n      const dx = cr * zx - ci * zy + dr, dy = cr * zy + ci * zx + di;\n      const qd = 1 / (dx * dx + dy * dy);\n      let X = (nx * dx + ny * dy) * qd, Y = (ny * dx - nx * dy) * qd;\n      let R = 0, Gc = 0, B = 0;\n      // Where the tiles are smaller than a LED, the glass's average colour.\n      if (fog > 0) {\n        const o = hueAt(G, X, Y);\n        R = LUT[o] * 255 * haze;\n        Gc = LUT[o + 1] * 255 * haze;\n        B = LUT[o + 2] * 255 * haze;\n      }\n      if (fog \u003c 1) {\n        // Fold into the fundamental triangle: turn into the wedge of angle\n        // pi/p, then reflect in the edge circle, until the edge is not crossed.\n        // Each turn and whether it flipped is kept, to find the tile's centre.\n        let n = 0, par = 0, ok = 1;\n        for (;;) {\n          const m = floor(fat(Y, X) * pp), f = m & 1, jj = wr[((m + 1) >> 1) + p];\n          const c = rc[jj], s = rs[jj], X1 = X * c + Y * s;\n          Y = Y * c - X * s;\n          X = X1;\n          if (f) Y = -Y;\n          par ^= f;\n          const ex = X - C, e2 = ex * ex + Y * Y;\n          if (e2 >= r2) break;\n          if (n >= MAXIT) {\n            ok = 0;\n            break;\n          }\n          CODE[n++] = jj * 2 + f;\n          const g = r2 / e2;\n          X = C + ex * g;\n          Y *= g;\n          par ^= 1;\n        }\n        if (!ok) {\n          const o = hueAt(G, X, Y);\n          (R = LUT[o] * 255 * haze), (Gc = LUT[o + 1] * 255 * haze), (B = LUT[o + 2] * 255 * haze);\n        } else {\n          // The same steps as the LED above: the same tile.\n          let same = n === pn;\n          for (let k = 0; same && k \u003c n; k++) same = CODE[k] === PREV[k];\n          if (!same) {\n            // The tile's centre is the origin taken back through the steps.\n            let cx = 0, cy = 0;\n            if (n > 0) {\n              cx = 1 / C;\n              for (let k = n - 1; k >= 0; k--) {\n                const jj = CODE[k] >> 1;\n                if (CODE[k] & 1) cy = -cy;\n                const c = rc[jj], s = rs[jj], x1 = cx * c - cy * s;\n                cy = cx * s + cy * c;\n                cx = x1;\n                if (k > 0) {\n                  const ex = cx - C, e2 = ex * ex + cy * cy, g = r2 / e2;\n                  cx = C + ex * g;\n                  cy *= g;\n                }\n              }\n            }\n            po = hueAt(G, cx, cy);\n            pn = n;\n            for (let k = 0; k \u003c n; k++) PREV[k] = CODE[k];\n          }\n          // Distances in the triangle: to the tile's edge, its centre, and the\n          // two straight mirrors that cut the tile into 2p facets.\n          const z2 = X * X + Y * Y, den = 1 - z2, zr = sqrt(z2);\n          const de = asinh((1 + z2 - 2 * C * X) / (r * den)), dc = log((1 + zr) / (1 - zr));\n          const dm = min(2 * Y, 2 * (X * sf - Y * cf)) / den;\n          const facet = 1 + (par ? -0.09 : 0.09) * min(1, dm / rho);\n          const gl = (1 - 0.42 * (dc / circ) ** 2) * facet * glassV * 255;\n          let r0 = LUT[po] * gl, g0 = LUT[po + 1] * gl, b0 = LUT[po + 2] * gl;\n          const cov = cl((min(de + rho / 2, hw) - max(de - rho / 2, -hw)) / rho, 0, 1);\n          r0 += (lineR - r0) * cov;\n          g0 += (lineG - g0) * cov;\n          b0 += (lineB - b0) * cov;\n          if (mir > 0) {\n            const mc = cl((min(dm + rho / 2, mw) - max(dm - rho / 2, -mw)) / rho, 0, 1) * mir * 0.85;\n            r0 += (250 - r0) * mc;\n            g0 += (235 - g0) * mc;\n            b0 += (200 - b0) * mc;\n          }\n          R = R * fog + r0 * (1 - fog);\n          Gc = Gc * fog + g0 * (1 - fog);\n          B = B * fog + b0 * (1 - fog);\n        }\n      }\n      const q = i * 3;\n      buf[q] = R;\n      buf[q + 1] = Gc;\n      buf[q + 2] = B;\n    }\n  }\n  for (let q = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, buf[q], buf[q + 1], buf[q + 2]);\n}\n","layer":{"id":"layer-hyperbolic-band","type":"code","name":"hyperbolic-band","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hyperbolic Band\n// Family:  space\n// Idea:    The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the band model of the hyperbolic plane, with the Poincaré disk (Eugenio Beltrami 1868, Henri Poincaré 1882) and Coxeter's regular {p,q} tilings, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1\n//\n// Knob 1: Hue. Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges.\n// Knob 2: Speed. How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that.\n// Knob 3: Tiling. Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}.\n// Knob 4: Lines. At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth.\n// Buttons: K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, log, asinh, acosh, abs, tanh, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The band |Im w| \u003c 1 goes onto the Poincaré disk by z = tanh(pi w / 4). Here\n// Im w runs across the panel, one unit to 32 LEDs, and Re w up it, so the\n// middle line of the band is the disk's real diameter, a geodesic. Along it a\n// unit of w is pi / 2 of hyperbolic length; at a distance v off it, a LED is\n// 1 / cos(pi v / 2) times longer.\nconst ZX = new Float64Array(N), ZY = new Float64Array(N), RHO = new Float64Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const v = (x + 0.5 - W / 2) / 32;\n  RHO[x] = PI / 64 / cos((PI * v) / 2);\n  for (let y = 0; y \u003c H; y++) {\n    const u = (H / 2 - y - 0.5) / 32, a = (PI * u) / 2, b = (PI * v) / 2, d = Math.cosh(a) + cos(b);\n    ZX[y * W + x] = Math.sinh(a) / d;\n    ZY[y * W + x] = sin(b) / d;\n  }\n}\n\n// The tilings. For each, the fundamental triangle of its reflection group:\n// the corner at the origin (a tile's centre) with angle pi/p between the real\n// axis and the ray at pi/p, and the circle mirror (the tile's edge) crossing\n// the real axis square at distance a. a is the tile's inradius, R its\n// circumradius, e half an edge. T is the shortest translation along the real\n// axis that is a symmetry: twice the gap between the mirrors that cross the\n// axis square, which depends on what the axis meets on its way.\nconst TIL = [[7, 3], [8, 3], [5, 4], [4, 5], [3, 7]].map(([p, q]) => {\n  const a = acosh(cos(PI / q) / sin(PI / p)), R = acosh(1 / (Math.tan(PI / p) * Math.tan(PI / q))), e = acosh(cos(PI / p) / sin(PI / q));\n  const m = tanh(a / 2), C = (m + 1 / m) / 2, r = (1 / m - m) / 2;\n  const T = p % 2 === 0 ? 2 * a : q % 2 === 0 ? 4 * (a + R) : 2 * (a + R + e);\n  const rc = new Float64Array(p), rs = new Float64Array(p);\n  for (let k = 0; k \u003c p; k++) (rc[k] = cos((2 * PI * k) / p)), (rs[k] = sin((2 * PI * k) / p));\n  // The wedge number, p added, taken round to 0..p-1.\n  const wr = new Int8Array(3 * p).map((_, i) => i % p);\n  return { p, q, a, R, C, r, r2: r * r, Tb: (2 * T) / PI, m0: (2 * a) / PI, rc, rs, wr, sf: sin(PI / p), cf: cos(PI / p) };\n});\n\nconst MAXIT = 40;\nconst CODE = new Int8Array(MAXIT);\nlet lutHue = NaN;\nconst LUT = new Float32Array(1024 * 3);\nfunction hsv(h, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const rgb = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = { s: 0, hue: 0, til: 0, lines: 0.06, speed: 2, spin: -1, m: 0, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.til = cl(Math.round(k[2]), 0, TIL.length - 1);\n  P.lines = cl(k[3], 0, 1);\n  const G = TIL[P.til];\n  // Tiles climb: the point of the tiling under the panel's centre moves down\n  // the band. 12 LEDs a second at Speed 2.\n  const slow = P.spin >= 0 ? 1 - 0.8 * sin(PI * P.spin) : 1;\n  P.s -= d * P.speed * 0.1875 * slow;\n  P.s -= G.Tb * floor(P.s / G.Tb + 0.5);\n  if (P.spin >= 0) {\n    P.spin += d / 3;\n    if (P.spin >= 1) P.spin = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) {\n    // The nearest point where a mirror crosses the axis square: the middle of\n    // an edge, or for even p a tile's centre too.\n    const h = G.Tb / 2;\n    P.m = G.m0 + h * Math.round((P.s - G.m0) / h);\n    P.spin = 0;\n  }\n}\n\n// Complex 2x2 Möbius matrices as [ar, ai, br, bi, cr, ci, dr, di].\nfunction mul(A, B) {\n  const o = [];\n  for (let i = 0; i \u003c 2; i++)\n    for (let j = 0; j \u003c 2; j++) {\n      const p = A[i * 4], pi = A[i * 4 + 1], q = A[i * 4 + 2], qi = A[i * 4 + 3];\n      const u = B[j * 2], ui = B[j * 2 + 1], v = B[4 + j * 2], vi = B[5 + j * 2];\n      o.push(p * u - pi * ui + q * v - qi * vi, p * ui + pi * u + q * vi + qi * v);\n    }\n  return o;\n}\nconst trans = (wb) => {\n  const t = tanh((PI * wb) / 4);\n  return [1, 0, t, 0, t, 0, 1, 0];\n};\nconst rot = (th) => [cos(th / 2), sin(th / 2), 0, 0, 0, 0, cos(th / 2), -sin(th / 2)];\n\n// The colour of a point of the tiling from where it sits on the band: cyan\n// glass on the middle line going through blue and violet to magenta at the\n// edges, and swinging a little along the band with the period T. Both are\n// kept by the half turn of K1 about any point where a mirror crosses the axis\n// square, and by the slide of one period.\nfunction hueAt(G, x, y) {\n  const u = (1 / PI) * log(((1 + x) ** 2 + y * y) / ((1 - x) ** 2 + y * y)), v = (2 / PI) * atan2(2 * y, 1 - x * x - y * y);\n  const h = 0.5 + 0.06 * cos((2 * PI * (u - G.m0)) / G.Tb) + 0.3 * sqrt(abs(v));\n  return (((h - floor(h)) * 1024) | 0) * 3;\n}\n\n// atan2 to a hundred-thousandth of a radian, which is all the fold needs to\n// pick its wedge: a point that lands a hair across a straight mirror is on\n// that mirror either way.\nfunction fat(y, x) {\n  const ax = x \u003c 0 ? -x : x, ay = y \u003c 0 ? -y : y, a = (ax \u003c ay ? ax : ay) / ((ax \u003c ay ? ay : ax) + 1e-300), q = a * a;\n  let r = ((-0.0464964749 * q + 0.15931422) * q - 0.327622764) * q * a + a;\n  if (ay > ax) r = PI / 2 - r;\n  if (x \u003c 0) r = PI - r;\n  return y \u003c 0 ? -r : r;\n}\n\nconst PREV = new Int8Array(MAXIT);\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const G = TIL[P.til], { p, C, r, r2, rc, rs, sf, cf, wr, a: ina, R: circ } = G, pp = p / PI;\n  const buf = P.buf, L = P.lines;\n  // From the panel's disk to the tiling: slide s along the axis, and during\n  // the K1 half turn, turn by th about the crossing m on the way.\n  let M = trans(P.s), mir = 0;\n  if (P.spin >= 0) {\n    const u = P.spin, th = PI * u * u * (3 - 2 * u);\n    M = mul(trans(P.m), mul(rot(th), trans(P.s - P.m)));\n    mir = sin(PI * u);\n  }\n  const [ar, ai, br, bi, cr, ci, dr, di] = M;\n  if (lutHue !== P.hue) for (let i = 0; i \u003c 1024; i++) hsv(i / 1024 + (lutHue = P.hue), LUT, i * 3);\n  const glassV = 1 - 0.78 * L, haze = 0.62 * glassV + 0.12 * L;\n  const lineR = 255 * L, lineG = 245 * L, lineB = 225 * L;\n  // The leading and the mirrors are lines of fixed hyperbolic width, box\n  // filtered over the LED, so they thin out with the tiles.\n  const hw = 0.035, mw = 0.025;\n  // The haze comes in as a tile's inradius drops from about three LEDs to one.\n  for (let x = 0; x \u003c W; x++) {\n    const rho = RHO[x], fog = sm(0.3 * ina, 1.1 * ina, rho);\n    let pn = -1, po = 0;\n    for (let y = 0; y \u003c H; y++) {\n      const i = y * W + x, zx = ZX[i], zy = ZY[i];\n      const nx = ar * zx - ai * zy + br, ny = ar * zy + ai * zx + bi;\n      const dx = cr * zx - ci * zy + dr, dy = cr * zy + ci * zx + di;\n      const qd = 1 / (dx * dx + dy * dy);\n      let X = (nx * dx + ny * dy) * qd, Y = (ny * dx - nx * dy) * qd;\n      let R = 0, Gc = 0, B = 0;\n      // Where the tiles are smaller than a LED, the glass's average colour.\n      if (fog > 0) {\n        const o = hueAt(G, X, Y);\n        R = LUT[o] * 255 * haze;\n        Gc = LUT[o + 1] * 255 * haze;\n        B = LUT[o + 2] * 255 * haze;\n      }\n      if (fog \u003c 1) {\n        // Fold into the fundamental triangle: turn into the wedge of angle\n        // pi/p, then reflect in the edge circle, until the edge is not crossed.\n        // Each turn and whether it flipped is kept, to find the tile's centre.\n        let n = 0, par = 0, ok = 1;\n        for (;;) {\n          const m = floor(fat(Y, X) * pp), f = m & 1, jj = wr[((m + 1) >> 1) + p];\n          const c = rc[jj], s = rs[jj], X1 = X * c + Y * s;\n          Y = Y * c - X * s;\n          X = X1;\n          if (f) Y = -Y;\n          par ^= f;\n          const ex = X - C, e2 = ex * ex + Y * Y;\n          if (e2 >= r2) break;\n          if (n >= MAXIT) {\n            ok = 0;\n            break;\n          }\n          CODE[n++] = jj * 2 + f;\n          const g = r2 / e2;\n          X = C + ex * g;\n          Y *= g;\n          par ^= 1;\n        }\n        if (!ok) {\n          const o = hueAt(G, X, Y);\n          (R = LUT[o] * 255 * haze), (Gc = LUT[o + 1] * 255 * haze), (B = LUT[o + 2] * 255 * haze);\n        } else {\n          // The same steps as the LED above: the same tile.\n          let same = n === pn;\n          for (let k = 0; same && k \u003c n; k++) same = CODE[k] === PREV[k];\n          if (!same) {\n            // The tile's centre is the origin taken back through the steps.\n            let cx = 0, cy = 0;\n            if (n > 0) {\n              cx = 1 / C;\n              for (let k = n - 1; k >= 0; k--) {\n                const jj = CODE[k] >> 1;\n                if (CODE[k] & 1) cy = -cy;\n                const c = rc[jj], s = rs[jj], x1 = cx * c - cy * s;\n                cy = cx * s + cy * c;\n                cx = x1;\n                if (k > 0) {\n                  const ex = cx - C, e2 = ex * ex + cy * cy, g = r2 / e2;\n                  cx = C + ex * g;\n                  cy *= g;\n                }\n              }\n            }\n            po = hueAt(G, cx, cy);\n            pn = n;\n            for (let k = 0; k \u003c n; k++) PREV[k] = CODE[k];\n          }\n          // Distances in the triangle: to the tile's edge, its centre, and the\n          // two straight mirrors that cut the tile into 2p facets.\n          const z2 = X * X + Y * Y, den = 1 - z2, zr = sqrt(z2);\n          const de = asinh((1 + z2 - 2 * C * X) / (r * den)), dc = log((1 + zr) / (1 - zr));\n          const dm = min(2 * Y, 2 * (X * sf - Y * cf)) / den;\n          const facet = 1 + (par ? -0.09 : 0.09) * min(1, dm / rho);\n          const gl = (1 - 0.42 * (dc / circ) ** 2) * facet * glassV * 255;\n          let r0 = LUT[po] * gl, g0 = LUT[po + 1] * gl, b0 = LUT[po + 2] * gl;\n          const cov = cl((min(de + rho / 2, hw) - max(de - rho / 2, -hw)) / rho, 0, 1);\n          r0 += (lineR - r0) * cov;\n          g0 += (lineG - g0) * cov;\n          b0 += (lineB - b0) * cov;\n          if (mir > 0) {\n            const mc = cl((min(dm + rho / 2, mw) - max(dm - rho / 2, -mw)) / rho, 0, 1) * mir * 0.85;\n            r0 += (250 - r0) * mc;\n            g0 += (235 - g0) * mc;\n            b0 += (200 - b0) * mc;\n          }\n          R = R * fog + r0 * (1 - fog);\n          Gc = Gc * fog + g0 * (1 - fog);\n          B = B * fog + b0 * (1 - fog);\n        }\n      }\n      const q = i * 3;\n      buf[q] = R;\n      buf[q + 1] = Gc;\n      buf[q + 2] = B;\n    }\n  }\n  for (let q = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, buf[q], buf[q + 1], buf[q + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that."},{"name":"Tiling","min":0,"max":4,"about":"Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}."},{"name":"Lines","min":0,"max":1,"about":"At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth."}],"start":[0,2,0,0.06],"measures":{"motion":1.4373,"detail":0.1076,"edges":0.286,"complexity":2.1332,"coverage":0.9802,"colour":0.6419,"drift":0.0932},"knobResponse":[0.5855,0.187,0.2223,0.3482]},{"slug":"iceberg","title":"Iceberg","family":"polar","round":26,"note":"물높이에서 자른 빙산이 9분의 1만 물 위에 내밀고 펭귄을 얹은 채 너울에 흔들리다, 판이 떨어져 물보라를 일으켜요. 물 아래 몸은 푸른 얼음 줄무늬와 탄산처럼 오르는 거품 줄기로 패널 바닥까지 내려가요. K1 은 백야의 해에서 오로라 뜬 극야로, 버튼은 판을 떼어 내요.","idea":"An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.","buttons":"K1 tap breaks a slab off the berg now.","code":"// ===== Patternflow pattern =====\n// Title:   Iceberg\n// Family:  polar\n// Idea:    An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the schoolbook drawing of an iceberg with eight ninths of it under the water\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1\n//\n// Knob 1: Light. Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora.\n// Knob 2: Speed. At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower.\n// Knob 3: Shape. A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom.\n// Knob 4: Swell. How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea.\n// Buttons: K1 tap breaks a slab off the berg now.\n\nconst W = 64, H = 128, N = W * H;\n// Sea level, horizon, the berg's middle; its grid (u across, v down from sea level) turns about row PV.\nconst WL = 30, HZ = 26, BX = 28, BW = 64, BH = 128, U0 = -32, V0 = -28, PV = 34, NB = BW * BH;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Caustic noise; the colour the water leaves at each row.\nconst CT = new Float32Array(4096).map((_, k) => vn(((k & 63) * 20) / 64, ((k >> 6) * 20) / 64, 20));\nconst AT = new Float32Array(H * 3).map((_, q) => exp(-max(0, floor(q / 3) + 0.5 - WL) / [26, 75, 170][q % 3]));\n\n// The top: a snow plain with sheer cliffs, or two spires.\nconst PIN = [[-13.5, 1], [-12, -3], [-10, -6], [-7.5, -10], [-5.5, -16], [-3.5, -19.5], [-1.5, -17.5], [0.5, -11], [2.5, -7.5], [4.5, -8.5], [6.5, -13], [8, -16], [9.5, -15], [11.5, -8], [13, -2.5], [14, 1]];\nfunction topAt(u, s) {\n  let i = 1;\n  while (i \u003c PIN.length - 1 && u > PIN[i][0]) i++;\n  const [a, b] = PIN[i - 1], [c, e] = PIN[i], A = u > 0 ? u : -u * 1.05;\n  const tab = A \u003c 15 ? -11 + 0.8 * (vn(u * 0.3, 3) - 0.5) + 1.3 * sm(12.5, 15, A) : mix(-9.7, 1, cl((A - 15) / 1.1, 0, 1));\n  return mix(tab, b + (e - b) * cl((u - a) / (c - a), 0, 1), s);\n}\n// Half widths under the water, tabular and pinnacle, a little lopsided.\nconst CV = [0, 5, 12, 22, 34, 46, 58, 68, 76, 82, 86];\nconst WT = [16.6, 20.5, 22, 22.5, 21.5, 21, 19.5, 16.5, 12.5, 8, 0];\nconst WP = [13.6, 15.5, 16.5, 16.5, 15.5, 14, 12, 9.5, 7, 4, 0];\nconst J = (h) => CV.map((_, i) => (i ? 0.88 + 0.24 * hash(i, h) : 1.03)), JL = J(5), JR = J(9);\nfunction edgeAt(v, s) {\n  const q = v / (1 + 0.1 * s);\n  if (v \u003c 0 || q >= 86) return [0, 0];\n  let i = 0;\n  while (CV[i + 1] \u003c= q) i++;\n  const f = (q - CV[i]) / (CV[i + 1] - CV[i]), w = mix(mix(WT[i], WP[i], s), mix(WT[i + 1], WP[i + 1], s), f), c = 2 * sin(v * 0.05);\n  return [c - w * mix(JL[i], JL[i + 1], f), c + w * mix(JR[i], JR[i + 1], f)];\n}\n\n// Midnight sun, noon, twilight: sky stops, lit and shaded face, snow, water top\n// and bottom, cloud lit and dark, shafts, light's side, ice, caustics.\nconst KF = [\n  [[[0, 28, 50, 116], [10, 100, 104, 166], [19, 232, 158, 132], [26, 250, 200, 128]], [246, 206, 158], [70, 118, 196], [242, 226, 206], [14, 86, 114], [3, 12, 40], [250, 196, 168], [118, 104, 150], [1, 1, 1, 1]],\n  [[[0, 118, 130, 148], [10, 156, 164, 178], [19, 186, 192, 200], [26, 200, 205, 210]], [214, 220, 226], [148, 166, 192], [226, 230, 236], [28, 108, 132], [5, 20, 48], [212, 216, 222], [128, 134, 150], [0.35, 0, 1.05, 0.5]],\n  [[[0, 6, 12, 42], [10, 16, 30, 80], [19, 38, 62, 120], [26, 62, 94, 148]], [160, 188, 232], [58, 84, 148], [176, 198, 236], [8, 44, 80], [2, 6, 24], [70, 86, 130], [26, 34, 66], [0.45, -1, 0.62, 0.5]],\n].map((k) => Float64Array.from(k.flat(2)));\n// Glacier ice; the pinnacle is older ice, bluer all through.\nconst BASE = [92, 192, 226], PALE = [190, 234, 246], CLEAR = [30, 120, 214], VEIN = [12, 50, 172], RIM = [40, 64, 60], TINT = [0.7, 0.9, 1.06];\nconst BLK = [12, 14, 22], WHT = [226, 228, 236], SUN = [255, 214, 150], MOON = [224, 228, 214], AUR = [30, 190, 110], LT = [0.55, 0.92, 1];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), pen = () => Object.fromEntries(\"on h u f st tu x y vx vy tt nb lx ly lt\".split(\" \").map((k) => [k, 0.5]));\n  params.s = {\n    f: F32(N * 3), ba: F32(N), sf: F32(W), rt: F32(176), row: F32(H * 3), P: new Float64Array(41), ex: F32(BH * 2), TT: F32(BW * 4 + 1),\n    M: F32(NB), IC: [F32(NB), F32(NB), F32(NB)], SN: F32(NB), NX: F32(NB), AL: F32(NB), D: F32(NB),\n    s: -1, t: 0.01, th: 0.01, thv: 0.01, thq: 0.01, by: 0.01, byv: 0.01, A: 0.5, k1: -1, k4: 0.06, live: 0, kx: 49.5, ky: 112.5,\n    next: 3.4, nd: 0.5, pend: null, crack: 0.5, cuts: [], pieces: [], bubs: [], spray: [], rings: [], vacc: [0.5, 0.5, 0.5, 0.5, 0.5], dv: null,\n    cl: [0, 1, 2, 3].map((k) => ({ x: 6 + k * 17 + 6 * rnd(), y: 5 + ((k * 5) % 13) + 2 * rnd(), w: 7 + 5 * rnd(), h: 1.7 + rnd() })),\n    kr: Array.from({ length: 46 }, () => ({ p: rnd() * 6.3, q: rnd() * 6.3, w: 0.4 + 0.5 * rnd(), r: 1 + 6 * rnd() })),\n    pens: [0, 1, 2, 3, 4].map((i) => Object.assign(pen(), { f: i % 2 ? 1 : -1, st: 0 })),\n  };\n}\n\nconst toW = (S, u, v) => [BX + cos(S.th) * u - sin(S.th) * (v - PV), WL + PV + S.by + sin(S.th) * u + cos(S.th) * (v - PV)];\n// What the cuts leave at u, v. Cuts heal outward as the berg turns.\nfunction cutA(cuts, u, v) {\n  let a = 1;\n  for (const c of cuts) if (v \u003c 0.6 && (u - c.cx) ** 2 + (v - c.cy) ** 2 \u003c 225) a *= cl(0.5 - (c.nx * u + c.ny * v - c.d), 0, 1);\n  return a;\n}\nconst topB = (S, u) => S.TT[cl(round((u - U0) * 4), 0, BW * 4)];\nfunction edgeU(S, side) {\n  for (let a = 0; a \u003c 26; a += 0.5) if (topB(S, side * a) > -1.5 || cutA(S.cuts, side * a, topB(S, side * a) + 0.7) \u003c 0.5) return side * (a - 1);\n  return side * 12;\n}\nconst surf = (S, x) => S.sf[cl(round(x), 0, W - 1)];\n\nfunction build(S, s) {\n  S.s = s;\n  const { M, SN, NX, AL, D, TT, ex } = S, E = [], face = [];\n  for (let q = 0; q \u003c= BW * 4; q++) TT[q] = topAt(U0 + q / 4, s);\n  for (let q = 0; q \u003c BH * 4; q++) E.push(edgeAt(V0 + (q + 0.5) / 4, s));\n  for (let k = 0; k \u003c NB; k++) {\n    let n = 0;\n    for (let j = 0; j \u003c 16; j++) {\n      const qu = (k & 63) * 4 + (j & 3), qv = (k >> 6) * 4 + (j >> 2), u = U0 + (qu + 0.5) / 4, v = V0 + (qv + 0.5) / 4;\n      if (v \u003c 0 ? v >= TT[qu] : u > E[qv][0] && u \u003c E[qv][1]) n++;\n    }\n    M[k] = n / 16;\n  }\n  // Distance to open water: a glowing rim, a darker core.\n  for (let k = 0; k \u003c NB; k++) D[k] = M[k] \u003c 0.5 ? 0 : 20;\n  for (let k = BW + 1; k \u003c NB - 1; k++) D[k] = min(D[k], D[k - 1] + 1, D[k - BW] + 1, D[k - BW - 1] + 1.4, D[k - BW + 1] + 1.4);\n  for (let k = NB - BW - 2; k > 0; k--) D[k] = min(D[k], D[k + 1] + 1, D[k + BW] + 1, D[k + BW + 1] + 1.4, D[k + BW - 1] + 1.4);\n  for (let j = 0; j \u003c BH * 2; j++) ex[j] = j & 1 ? -99 : 99;\n  for (let k = 0; k \u003c NB; k++) {\n    const gu = k & 63, gv = k >> 6, u = U0 + gu + 0.5, v = V0 + gv + 0.5;\n    if (M[k] \u003c= 0) continue;\n    // Facets: lit or shaded in the air; below, melt scallops lit on their lower walls.\n    let bd = 1e9, id = 0, sv = 0;\n    for (let j = 0; j \u003c 9; j++) {\n      const cu = floor(u / 5) + (j % 3) - 1, cv = floor(v / 5) + floor(j / 3) - 1, w = (cv + hash(cv, cu + 50)) * 5, dd = (u - (cu + hash(cu, cv)) * 5) ** 2 + (v - w) ** 2;\n      if (dd \u003c bd) (bd = dd), (id = hash(cu + 99, cv)), (sv = w);\n    }\n    const qu = gu * 4 + 2, sl = TT[min(BW * 4, qu + 2)] - TT[max(0, qu - 2)], dep = v - TT[qu];\n    NX[k] = mix(sl / sqrt(1 + sl * sl), cl(u / 24 + 1.3 * (id - 0.5), -1, 1), sm(1, 3, dep));\n    SN[k] = sm(2.4, 1.3, dep) * sm(1.6, 0.8, abs(sl));\n    AL[k] = (0.86 + 0.14 * hash(gu, 7)) * (0.88 + 0.24 * id) * (v > -1.5 && v \u003c 0 ? 0.7 : 1);\n    // Layers of white and clear blue ice, dark veins of refrozen meltwater.\n    const f = (v + u * 0.14 + 7 * vn(u * 0.04, v * 0.025 + 9)) / 8, n = floor(f), band = f - n, h1 = hash(n, 5);\n    const mot = (0.84 + 0.3 * vn(u * 0.1 + 3, v * 0.07)) * (1 + 0.2 * cl((v - sv) / 3, -1, 1));\n    const pale = sm(0.5, 0.6, band) * (1 - sm(0.6 + 0.3 * h1, 0.7 + 0.3 * h1, band)) * sm(0.25, 0.5, hash(n, 6)), clear = (1 - sm(0.2, 0.45, band)) * sm(0.4, 0.8, h1);\n    const vein = max(sm(0.11, 0.03, abs(vn(u * 0.08 + 11, v * 0.045) * 2 - 1)), 0.8 * sm(0.1, 0.025, abs(vn(u * 0.045 + 31, v * 0.11 + 5) * 2 - 1))) * sm(0.25, 0.5, vn(u * 0.035 + 20, v * 0.03));\n    const dk = D[k], core = (0.5 + 0.5 * exp(-max(0, dk - 1) / 5)) * (gv > 1 && M[k - 2 * BW] \u003c 0.5 ? 1.3 : 1) * (gv \u003c BH - 2 && M[k + 2 * BW] \u003c 0.5 ? 0.76 : 1);\n    for (let c = 0; c \u003c 3; c++) S.IC[c][k] = mix(mix(mix(BASE[c] * mot, PALE[c], 0.8 * pale), CLEAR[c], 0.6 * clear), VEIN[c], 0.9 * vein) * core * mix(1, TINT[c], s) + exp(-dk / 1.2) * RIM[c];\n    if (v > 3 && v \u003c 80 && dk > 1.5) face.push([u, v]);\n    (ex[gv * 2] = min(ex[gv * 2], u)), (ex[gv * 2 + 1] = max(ex[gv * 2 + 1], u));\n  }\n  S.vents = [0, 1, 2, 3, 4].map((i) => face[floor(hash(i, 41) * face.length)]);\n  // Penguin places: flat, three columns apart, clear of the slabs.\n  const slots = [];\n  for (const u of [0.5, -6, 6.5, -3, 3.5, -8, 8, -1.5, 2, -4.5, 5]) {\n    const q = round((u - U0) * 4);\n    if (abs(TT[q + 6] - TT[q - 6]) \u003c 1.6 && TT[q] \u003c -2.5 && TT[q] > -15 && slots.length \u003c 5 && slots.every((w) => abs(w - u) > 2.9)) slots.push(u + 0.01);\n  }\n  S.pens.forEach((p, i) => ((p.on = i \u003c slots.length ? 1 : 0), p.on && (p.h = slots[i]), p.st || (p.u = p.h)));\n}\n\nconst bub = (S, x, y, vy = -(4.5 + 5 * rnd()), wb = 0.6) => S.bubs.length \u003c 260 && S.bubs.push({ x, y, vy, wb, ph: rnd() * 6.3, dead: 0 });\nfunction splash(S, x, v, g) {\n  const y = surf(S, x) - 0.5;\n  for (let k = 0; k \u003c 7 + 29 * g; k++) S.spray.push({ x: x + (rnd() - 0.5) * (2 + 3 * g), y, vx: (rnd() - 0.5) * (10 + 14 * g), vy: -(6 + rnd() * (9 + 17 * g)), l: 0.99 });\n  S.rings.push({ x, t: 0.01, a: g ? min(3.2, 0.1 * v + 1.4) : 0.6 });\n  for (let k = 0; k \u003c 8 + 22 * g; k++) bub(S, x + (rnd() - 0.5) * 6, y + 1 + rnd() * (5 + 9 * g));\n}\n\n// A crack opens behind a slab of outer ice; it goes half a second later.\nfunction calve(S) {\n  if (S.pend || S.pieces.some((p) => p.f)) return;\n  let side = rnd() \u003c 0.5 ? -1 : 1;\n  if (S.cuts.some((c) => c.side === side && c.age \u003c 40)) side = -side;\n  let ue = edgeU(S, side);\n  if (abs(ue) \u003c 12) (side = -side), (ue = edgeU(S, side));\n  if (abs(ue) \u003c 12) return;\n  const px = side * max(9, abs(ue) - 3.5 - 3 * rnd()), nx = side * 0.993, d = nx * px + 0.6;\n  const c = { nx, ny: -0.12, d, d0: d, cx: px, cy: -5, side, age: 0.01, bu: 0.5, bv: 0.5, ex: 0.5, hx: 0.5, hy: 0.5 };\n  let u0 = 99, u1 = -99, v0 = 99, v1 = -99;\n  for (let k = 0; k \u003c NB; k++) {\n    const u = U0 + (k & 63) + 0.5, v = V0 + (k >> 6) + 0.5;\n    if (S.M[k] > 0.5 && cutA([c], u, v) \u003c 0.5 && cutA(S.cuts, u, v) > 0.5) (u0 = min(u0, u)), (u1 = max(u1, u)), (v0 = min(v0, v)), (v1 = max(v1, v));\n  }\n  if (u1 - u0 \u003c 1.5) return;\n  Object.assign(c, { bu: (u0 + u1) / 2, bv: (v0 + v1) / 2, hx: (u1 - u0) / 2 + 0.5, hy: (v1 - v0) / 2 + 0.5 });\n  c.ex = hypot(c.hx, c.hy) + 1.5;\n  (S.pend = c), (S.crack = 0.5);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d), A = S.A, sf = S.sf;\n  // The swell, and rings running out from each splash.\n  const swell = (x) => A * (0.7 * sin(x * 0.15 - t * 1.4) + 0.3 * sin(x * 0.34 + t * 0.95 + 1));\n  for (let x = 0; x \u003c W; x++) {\n    sf[x] = WL + swell(x + 0.5);\n    for (const r of S.rings) {\n      const q = abs(x + 0.5 - r.x) - 11 * r.t;\n      sf[x] += r.a * exp(-r.t * 0.5 - (q / 5) ** 2) * sin(q * 0.9);\n    }\n  }\n  for (const r of S.rings) r.t += d;\n  S.rings = S.rings.filter((r) => r.t \u003c 7);\n  S.thv += (-2.4 * (S.th - S.thq - 0.022 * A * cos(BX * 0.15 - t * 1.4)) - 0.45 * S.thv) * d;\n  S.byv += (-3 * (S.by - 0.5 * swell(BX)) - 1.2 * S.byv) * d;\n  (S.th += S.thv * d), (S.by += S.byv * d), (S.thq *= exp(-d / 60));\n  for (const c of S.cl) (c.x += (0.7 + 3 * S.k4) * d) > W + c.w + 2 && (c.x = -c.w - 2);\n\n  if (S.live && (S.next -= d) \u003c= 0) calve(S), (S.next = 15 + 10 * rnd());\n  if (S.pend && (S.crack -= d) \u003c= 0) {\n    // The berg loses weight on that side, rocks and settles leaning a little.\n    const c = S.pend, [x, y] = toW(S, c.bu, c.bv);\n    S.cuts.push(c);\n    S.pieces.push({ c, x, y, vx: c.side * 2.5, vy: 0.5, a: S.th, va: c.side * (1.4 + rnd()), f: 1, ta: 0.5 });\n    (S.pend = null), (S.thv -= c.side * 0.1), (S.thq -= c.side * 0.012), (S.byv -= 1.6);\n  }\n  for (const c of S.cuts) (c.age += d) > 20 && (c.d += d * 0.12);\n  S.cuts = S.cuts.filter((c) => c.age \u003c 130);\n  for (const p of S.pieces) {\n    if (p.f) {\n      (p.vy += 45 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.a += p.va * d);\n      if (p.y > surf(S, p.x) - 1) splash(S, p.x, p.vy, 1), (p.f = 0), (p.vy *= 0.3), (p.ta = round(p.a / (PI / 2)) * (PI / 2));\n    } else {\n      const c = p.c, hy = abs(sin(p.a - S.th)) * c.hx + abs(cos(p.a - S.th)) * c.hy;\n      (p.vy += (-5 * (p.y - surf(S, p.x) - 0.75 * hy) - 1.8 * p.vy) * d), (p.va += (-4 * (p.a - p.ta) - 1.6 * p.va) * d);\n      (p.y += p.vy * d), (p.a += p.va * d), (p.x += c.side * 1.4 * d);\n    }\n  }\n  S.pieces = S.pieces.filter((p) => abs(p.x - W / 2) \u003c W / 2 + p.c.ex + 2);\n  S.vents.forEach((v, i) => {\n    if (sin(t * 0.6 + i * 2.1) > -0.2) for (S.vacc[i] += d * 3.5; S.vacc[i] >= 1; S.vacc[i]--) bub(S, ...toW(S, v[0], v[1]), -(5 + 0.6 * i + 1.2 * rnd()), 0.9);\n  });\n  for (const b of S.bubs) {\n    (b.y += b.vy * d), (b.x += sin(t * 6 + b.ph) * b.wb * d);\n    if (b.y \u003c surf(S, b.x) + 0.3 || b.x \u003c -1 || b.x > W + 1) b.dead = 1;\n  }\n  S.bubs = S.bubs.filter((b) => !b.dead);\n  for (const p of S.spray) (p.vy += 50 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 0.8);\n  S.spray = S.spray.filter((p) => p.l > 0 && !(p.vy > 0 && p.y > surf(S, p.x) + 0.5));\n  (S.kx = 49 + 8 * sin(t * 0.1)), (S.ky = 112 + 7 * sin(t * 0.13 + 1));\n  penguins(S, d, t);\n}\n\n// Now and then a penguin waddles to the edge, jumps, swims to the krill and leaps back.\nfunction penguins(S, d, t) {\n  for (const p of S.pens) if (!p.st && rnd() \u003c d * 0.2) p.f = -p.f;\n  let p = S.dv;\n  if (!p && S.live && (S.nd -= d) \u003c= 0) {\n    const free = S.pens.filter((q) => !q.st && q.on);\n    if (!free.length) return;\n    p = S.dv = free.reduce((a, q) => (q.u > a.u ? q : a));\n    Object.assign(p, { st: 1, tu: edgeU(S, 1) - 0.5 });\n  }\n  if (!p) return;\n  if (p.st === 1 || p.st === 5) {\n    const g = p.st === 1 ? p.tu : p.h;\n    p.f = g > p.u ? 1 : -1;\n    p.u += p.f * min(abs(g - p.u), 4 * d);\n    if (abs(g - p.u) \u003c 0.01) {\n      if (p.st === 5) (p.st = 0), (S.dv = null), (S.nd = 5 + 6 * rnd());\n      else ([p.x, p.y] = toW(S, p.u, topB(S, p.u) - 0.3)), Object.assign(p, { st: 2, vx: 7, vy: -9 });\n    }\n  } else if (p.st === 2) {\n    (p.vy += 40 * d), (p.x += p.vx * d), (p.y += p.vy * d);\n    if (p.vy > 0 && p.y > surf(S, p.x)) splash(S, p.x, 8, 0), Object.assign(p, { st: 3, vy: 12, vx: 3, tt: 0.01, nb: 0.01 });\n  } else if (p.st === 3) {\n    const back = (p.tt += d) > 5, dx = (back ? W - 6 : S.kx + 5 * cos(t * 2.2)) - p.x, dy = (back ? WL - 2 : S.ky + 3 * sin(t * 2.2)) - p.y, r = hypot(dx, dy) + 1e-6, sp = back ? 17 : 14;\n    (p.vx += ((dx / r) * sp - p.vx) * min(1, 2.2 * d)), (p.vy += ((dy / r) * sp - p.vy) * min(1, 2.2 * d));\n    (p.x = cl(p.x + p.vx * d, 1, W - 2)), (p.y = min(p.y + p.vy * d, H - 3));\n    if ((p.nb += d) > 0.07) (p.nb = 0), bub(S, p.x - p.vx * 0.12, p.y - p.vy * 0.12);\n    if (back && p.y \u003c surf(S, p.x) + 1.5) splash(S, p.x, 6, 0), Object.assign(p, { st: 4, lx: p.x, ly: p.y, lt: 0.01, u: edgeU(S, 1) - 1 });\n  } else {\n    const [lx, ly] = toW(S, p.u, topB(S, p.u) - 0.3), l = (p.lt = min(1, p.lt + d / 0.7));\n    (p.vx = lx - p.x), (p.vy = ly - p.y), (p.x = mix(p.lx, lx, l)), (p.y = mix(p.ly, ly, l) - 40 * l * (1 - l));\n    if (l >= 1) p.st = 5;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 0, 1);\n  if (abs(k3 - S.s) > 0.01) build(S, k3);\n  (S.k4 = cl(k[3], 0, 1)), (S.A = 0.45 + 3 * S.k4);\n  if (k1 !== S.k1) {\n    const [a, b, u] = k1 \u003c 0.5 ? [0, 1, sm(0, 0.5, k1)] : [1, 2, sm(0.5, 1, k1)];\n    for (let j = 0; j \u003c 41; j++) S.P[j] = mix(KF[a][j], KF[b][j], u);\n    S.k1 = k1;\n  }\n  for (; !S.live; S.live = S.t > 4 ? 1 : 0) step(S, 1 / 30);\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nlet F, G, PL, RT, LR, LS, LC;\nconst LA = [0, 0, 0, 0], C3 = new Float64Array(3);\n// Light under water: slanting shafts, and caustics on the ice (one noise twice, crossed).\nfunction glow(x, y, dep, b) {\n  const q = x + LS * (y - WL) + 56, q0 = cl(floor(q), 0, 174);\n  let L = LR * mix(RT[q0], RT[q0 + 1], q - q0) * exp(-dep / 36) * 64 * (1 + 0.5 * b);\n  if (b > 0 && dep \u003c 34) L += LC * sm(0.75, 1, 1 - abs(CT[((y + LA[1]) & 63) * 64 + ((x + LA[0]) & 63)] - CT[((x + LA[2]) & 63) * 64 + ((y + LA[3]) & 63)]) * 4) * exp(-dep / 12) * (80 * b + 22);\n  return L;\n}\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst bl = (A, k, fx, fy) => mix(mix(A[k], A[k + 1], fx), mix(A[k + BW], A[k + BW + 1], fx), fy);\n// One LED of the berg, or of slab q, read at body point u, v.\nfunction paint(x, y, u, v, q) {\n  const S = G, P = PL, gx = u - U0 - 0.5, gy = v - V0 - 0.5, x0 = floor(gx), y0 = floor(gy), i = y * W + x, o = i * 3, s = S.sf[x], c = C3, pc = S.pend;\n  if (x0 \u003c 0 || y0 \u003c 0 || x0 >= BW - 1 || y0 >= BH - 1 || (q && (v > 0.6 || (u - q.cx) ** 2 + (v - q.cy) ** 2 > 225))) return;\n  const k = y0 * BW + x0, fx = gx - x0, fy = gy - y0, a = bl(S.M, k, fx, fy) * (q ? cl(0.5 + (q.nx * u + q.ny * v - q.d0), 0, 1) : S.cuts.length && v \u003c 0.6 ? cutA(S.cuts, u, v) : 1);\n  if (a \u003c 0.02) return;\n  if (y + 0.5 \u003c s) {\n    const nx = bl(S.NX, k, fx, fy), sn = bl(S.SN, k, fx, fy), al = bl(S.AL, k, fx, fy), li = P[38] ? cl(0.5 + 0.8 * nx * P[38], 0, 1) : 0.6 + 0.25 * nx;\n    for (let j = 0; j \u003c 3; j++) c[j] = mix(mix(P[19 + j], P[16 + j], li), P[22 + j] * (0.88 + 0.12 * li), sn) * al;\n  } else {\n    const L = glow(x, y, y + 0.5 - s, 1);\n    for (let j = 0; j \u003c 3; j++) c[j] = bl(S.IC[j], k, fx, fy) * AT[y * 3 + j] * P[39] + 0.35 * S.row[y * 3 + j] + L * LT[j];\n  }\n  const ck = pc && v \u003c 0.6 && abs(pc.nx * u + pc.ny * v - pc.d) \u003c 0.6 ? 0.4 : 1;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(q ? F[o + j] : 0, c[j] * ck, q ? a : 1);\n  S.ba[i] = max(S.ba[i], a);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  F = S.f;\n  const { ba, sf, rt, row, t, P, k1, ex } = S;\n  const sunA = 1 - sm(0, 0.4, k1), moonA = sm(0.6, 1, k1), aur = sm(0.7, 1, k1), stars = sm(0.55, 0.9, k1);\n  for (let y = 0; y \u003c H; y++) {\n    let k = 0;\n    while (k \u003c 2 && y > P[k * 4 + 4]) k++;\n    const u = y \u003c= HZ ? sm(P[k * 4], P[k * 4 + 4], y) : cl((y - WL) / 97, 0, 1) ** 0.75;\n    for (let j = 0; j \u003c 3; j++) row[y * 3 + j] = y \u003c= HZ ? mix(P[k * 4 + 1 + j], P[k * 4 + 5 + j], u) : mix(P[25 + j], P[28 + j], u);\n  }\n  for (let q = 0; q \u003c 176; q++) rt[q] = sm(0.45, 0.82, vn((q - 56) * 0.13 - t * 0.3, t * 0.05 + 7));\n  (G = S), (PL = P), (RT = rt), (LR = P[37]), (LS = P[38] * 0.45), (LC = P[40] * (0.7 + 0.6 * S.k4));\n  [7, -5, -6, 4].forEach((v, j) => (LA[j] = floor(t * v)));\n\n  // The berg first, then the background where it shows, then the slabs.\n  ba.fill(0);\n  const ct = cos(S.th), st = sin(S.th), oy = WL + PV + S.by;\n  for (let y = 0; y \u003c H; y++) {\n    const dy = y + 0.5 - oy, g0 = floor(ct * dy + PV - V0 - 0.5);\n    let u0 = 99, u1 = -99;\n    for (let j = max(0, g0 - 3); j \u003c= min(BH - 1, g0 + 3); j++) (u0 = min(u0, ex[j * 2])), (u1 = max(u1, ex[j * 2 + 1]));\n    for (let x = max(0, floor(BX + u0 - st * dy - 2)); x \u003c min(W, BX + u1 - st * dy + 3); x++) {\n      const dx = x + 0.5 - BX;\n      paint(x, y, ct * dx + st * dy, -st * dx + ct * dy + PV, null);\n    }\n  }\n  const sx = 55, sy = 21.5, mx = 12, my = 8, c = C3;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, A = ba[i], dep = y + 0.5 - sf[x];\n    if (A > 0.995) continue;\n    let g = 0, e = 0;\n    if (y \u003c HZ) {\n      const ds = hypot(x + 0.5 - sx, (y + 0.5 - sy) * 1.1), dm = hypot(x + 0.5 - mx, y + 0.5 - my), cu = aur > 0 ? 0.5 + 0.5 * sin(x * 0.2 + 3 * vn(x * 0.05 + t * 0.06, 1) + t * 0.25) : 0;\n      g = moonA * (0.25 * exp(-dm / 5) + (dm \u003c 2.6 && hypot(x - 0.8 - mx, y + 1.1 - my) > 2.3 ? 0.9 : 0)) + (stars > 0 && hash(x, y + 11) \u003c 0.016 ? stars * (0.25 + 0.5 * hash(y, x)) * (0.7 + 0.3 * sin(t * 3 + x * y)) * sm(HZ, 8, y) : 0);\n      e = cu ? aur * sm(19, 6, y) * sm(0, 4, y) * cu * cu * vn(x * 0.6, t * 0.4) : 0;\n      const gs = ds \u003c 30 ? sunA * (0.55 * exp(-ds / 7) + (ds \u003c 2.6 ? 1.2 : 0)) : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = row[y * 3 + j] + SUN[j] * gs + MOON[j] * g + AUR[j] * e;\n      for (const q of S.cl) {\n        const qx = (x + 0.5 - q.x) / q.w, qy = (y + 0.5 - q.y) / q.h;\n        if (qx * qx + qy * qy > 2) continue;\n        const a = 0.92 * sm(0, 0.45, 1 - qx * qx - qy * qy + 0.45 * (vn(x * 0.35 + q.w, y * 0.6) - 0.5)), u = sm(-1, 1, qy);\n        for (let j = 0; j \u003c 3; j++) c[j] = mix(c[j], mix(P[34 + j], P[31 + j], u), a);\n      }\n    } else if (dep \u003c 0) {\n      // The far sea: the sun's glitter path, whitecaps.\n      g = sunA * (abs(x + 0.5 - sx) \u003c 1.5 + (y - HZ) * 1.2 && hash(x, y + floor(t * 7) * 64) \u003c 0.45 ? 0.75 : 0);\n      e = S.k4 > 0.35 && hash(x + floor(t * 2) * 7, y) \u003c (S.k4 - 0.35) * 0.3 ? 0.8 : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[36 + j] * 0.55 + row[90 + j] * 0.45 + SUN[j] * g, 230, e);\n    } else {\n      // The surface's silver underside.\n      (g = glow(x, y, dep, 0)), (e = dep \u003c 2.5 ? (1 - dep / 2.5) * 0.5 : 0);\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[y * 3 + j] + (j ? 90 : 60) * e + g * LT[j], row[78 + j] * 0.9, dep \u003c 1 ? 0.55 : 0);\n    }\n    for (let j = 0; j \u003c 3; j++) F[o + j] = mix(c[j], F[o + j], A);\n  }\n  for (const p of S.pieces) {\n    const ca = cos(p.a), sa = sin(p.a), e = p.c.ex;\n    for (let y = max(0, floor(p.y - e)); y \u003c min(H, p.y + e); y++)\n      for (let x = max(0, floor(p.x - e)); x \u003c min(W, p.x + e); x++) {\n        const dx = x + 0.5 - p.x, dy = y + 0.5 - p.y;\n        paint(x, y, p.c.bu + ca * dx + sa * dy, p.c.bv - sa * dx + ca * dy, p.c);\n      }\n  }\n  sprites(S, t, ba);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction sprites(S, t, ba) {\n  for (const k of S.kr) {\n    const x = S.kx + cos(k.p + t * k.w) * k.r * 1.3, y = S.ky + sin(k.q + t * k.w * 1.3) * k.r * 0.7, i = floor(y) * W + floor(x);\n    if (i >= 0 && i \u003c N && ba[i] \u003c 0.5) put(x, y, [255, 128, 118], (0.25 + 0.35 * S.P[39]) * (0.7 + 0.3 * sin(t * 4 + k.p * 9)));\n  }\n  for (const b of S.bubs) put(b.x, b.y, [214, 246, 255], 0.6);\n  for (const p of S.pens) {\n    if (!p.st && !p.on) continue;\n    if (p.st === 0 || p.st === 1 || p.st === 5) {\n      const [x, y] = toW(S, p.u, topB(S, p.u) - 0.3), f = p.f, B = round(x - 0.5) + (f > 0 ? 0 : 1), Y = floor(y) - (p.st && sin(t * 14) > 0 ? 1 : 0);\n      put(B, Y - 3, BLK), put(B + f, Y - 3, BLK), put(B + 2 * f, Y - 3, [240, 168, 60], 0.8);\n      for (let j = 0; j \u003c 3; j++) put(B, Y - j, BLK), put(B + f, Y - j, WHT);\n    } else {\n      const r = hypot(p.vx, p.vy) + 1e-6, ux = p.vx / r, uy = p.vy / r;\n      for (let j = -1.5; j \u003c= 1.5; j += 0.5) put(p.x + ux * j, p.y + uy * j, BLK), j \u003c 1 && put(p.x + ux * j - uy * (ux \u003c 0 ? -1 : 1), p.y + uy * j + abs(ux), WHT, 0.9);\n    }\n  }\n  for (const p of S.spray) put(p.x, p.y, [232, 240, 246], min(1, p.l * 1.3));\n}\n","layer":{"id":"layer-iceberg","type":"code","name":"iceberg","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Iceberg\n// Family:  polar\n// Idea:    An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the schoolbook drawing of an iceberg with eight ninths of it under the water\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1\n//\n// Knob 1: Light. Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora.\n// Knob 2: Speed. At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower.\n// Knob 3: Shape. A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom.\n// Knob 4: Swell. How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea.\n// Buttons: K1 tap breaks a slab off the berg now.\n\nconst W = 64, H = 128, N = W * H;\n// Sea level, horizon, the berg's middle; its grid (u across, v down from sea level) turns about row PV.\nconst WL = 30, HZ = 26, BX = 28, BW = 64, BH = 128, U0 = -32, V0 = -28, PV = 34, NB = BW * BH;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Caustic noise; the colour the water leaves at each row.\nconst CT = new Float32Array(4096).map((_, k) => vn(((k & 63) * 20) / 64, ((k >> 6) * 20) / 64, 20));\nconst AT = new Float32Array(H * 3).map((_, q) => exp(-max(0, floor(q / 3) + 0.5 - WL) / [26, 75, 170][q % 3]));\n\n// The top: a snow plain with sheer cliffs, or two spires.\nconst PIN = [[-13.5, 1], [-12, -3], [-10, -6], [-7.5, -10], [-5.5, -16], [-3.5, -19.5], [-1.5, -17.5], [0.5, -11], [2.5, -7.5], [4.5, -8.5], [6.5, -13], [8, -16], [9.5, -15], [11.5, -8], [13, -2.5], [14, 1]];\nfunction topAt(u, s) {\n  let i = 1;\n  while (i \u003c PIN.length - 1 && u > PIN[i][0]) i++;\n  const [a, b] = PIN[i - 1], [c, e] = PIN[i], A = u > 0 ? u : -u * 1.05;\n  const tab = A \u003c 15 ? -11 + 0.8 * (vn(u * 0.3, 3) - 0.5) + 1.3 * sm(12.5, 15, A) : mix(-9.7, 1, cl((A - 15) / 1.1, 0, 1));\n  return mix(tab, b + (e - b) * cl((u - a) / (c - a), 0, 1), s);\n}\n// Half widths under the water, tabular and pinnacle, a little lopsided.\nconst CV = [0, 5, 12, 22, 34, 46, 58, 68, 76, 82, 86];\nconst WT = [16.6, 20.5, 22, 22.5, 21.5, 21, 19.5, 16.5, 12.5, 8, 0];\nconst WP = [13.6, 15.5, 16.5, 16.5, 15.5, 14, 12, 9.5, 7, 4, 0];\nconst J = (h) => CV.map((_, i) => (i ? 0.88 + 0.24 * hash(i, h) : 1.03)), JL = J(5), JR = J(9);\nfunction edgeAt(v, s) {\n  const q = v / (1 + 0.1 * s);\n  if (v \u003c 0 || q >= 86) return [0, 0];\n  let i = 0;\n  while (CV[i + 1] \u003c= q) i++;\n  const f = (q - CV[i]) / (CV[i + 1] - CV[i]), w = mix(mix(WT[i], WP[i], s), mix(WT[i + 1], WP[i + 1], s), f), c = 2 * sin(v * 0.05);\n  return [c - w * mix(JL[i], JL[i + 1], f), c + w * mix(JR[i], JR[i + 1], f)];\n}\n\n// Midnight sun, noon, twilight: sky stops, lit and shaded face, snow, water top\n// and bottom, cloud lit and dark, shafts, light's side, ice, caustics.\nconst KF = [\n  [[[0, 28, 50, 116], [10, 100, 104, 166], [19, 232, 158, 132], [26, 250, 200, 128]], [246, 206, 158], [70, 118, 196], [242, 226, 206], [14, 86, 114], [3, 12, 40], [250, 196, 168], [118, 104, 150], [1, 1, 1, 1]],\n  [[[0, 118, 130, 148], [10, 156, 164, 178], [19, 186, 192, 200], [26, 200, 205, 210]], [214, 220, 226], [148, 166, 192], [226, 230, 236], [28, 108, 132], [5, 20, 48], [212, 216, 222], [128, 134, 150], [0.35, 0, 1.05, 0.5]],\n  [[[0, 6, 12, 42], [10, 16, 30, 80], [19, 38, 62, 120], [26, 62, 94, 148]], [160, 188, 232], [58, 84, 148], [176, 198, 236], [8, 44, 80], [2, 6, 24], [70, 86, 130], [26, 34, 66], [0.45, -1, 0.62, 0.5]],\n].map((k) => Float64Array.from(k.flat(2)));\n// Glacier ice; the pinnacle is older ice, bluer all through.\nconst BASE = [92, 192, 226], PALE = [190, 234, 246], CLEAR = [30, 120, 214], VEIN = [12, 50, 172], RIM = [40, 64, 60], TINT = [0.7, 0.9, 1.06];\nconst BLK = [12, 14, 22], WHT = [226, 228, 236], SUN = [255, 214, 150], MOON = [224, 228, 214], AUR = [30, 190, 110], LT = [0.55, 0.92, 1];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), pen = () => Object.fromEntries(\"on h u f st tu x y vx vy tt nb lx ly lt\".split(\" \").map((k) => [k, 0.5]));\n  params.s = {\n    f: F32(N * 3), ba: F32(N), sf: F32(W), rt: F32(176), row: F32(H * 3), P: new Float64Array(41), ex: F32(BH * 2), TT: F32(BW * 4 + 1),\n    M: F32(NB), IC: [F32(NB), F32(NB), F32(NB)], SN: F32(NB), NX: F32(NB), AL: F32(NB), D: F32(NB),\n    s: -1, t: 0.01, th: 0.01, thv: 0.01, thq: 0.01, by: 0.01, byv: 0.01, A: 0.5, k1: -1, k4: 0.06, live: 0, kx: 49.5, ky: 112.5,\n    next: 3.4, nd: 0.5, pend: null, crack: 0.5, cuts: [], pieces: [], bubs: [], spray: [], rings: [], vacc: [0.5, 0.5, 0.5, 0.5, 0.5], dv: null,\n    cl: [0, 1, 2, 3].map((k) => ({ x: 6 + k * 17 + 6 * rnd(), y: 5 + ((k * 5) % 13) + 2 * rnd(), w: 7 + 5 * rnd(), h: 1.7 + rnd() })),\n    kr: Array.from({ length: 46 }, () => ({ p: rnd() * 6.3, q: rnd() * 6.3, w: 0.4 + 0.5 * rnd(), r: 1 + 6 * rnd() })),\n    pens: [0, 1, 2, 3, 4].map((i) => Object.assign(pen(), { f: i % 2 ? 1 : -1, st: 0 })),\n  };\n}\n\nconst toW = (S, u, v) => [BX + cos(S.th) * u - sin(S.th) * (v - PV), WL + PV + S.by + sin(S.th) * u + cos(S.th) * (v - PV)];\n// What the cuts leave at u, v. Cuts heal outward as the berg turns.\nfunction cutA(cuts, u, v) {\n  let a = 1;\n  for (const c of cuts) if (v \u003c 0.6 && (u - c.cx) ** 2 + (v - c.cy) ** 2 \u003c 225) a *= cl(0.5 - (c.nx * u + c.ny * v - c.d), 0, 1);\n  return a;\n}\nconst topB = (S, u) => S.TT[cl(round((u - U0) * 4), 0, BW * 4)];\nfunction edgeU(S, side) {\n  for (let a = 0; a \u003c 26; a += 0.5) if (topB(S, side * a) > -1.5 || cutA(S.cuts, side * a, topB(S, side * a) + 0.7) \u003c 0.5) return side * (a - 1);\n  return side * 12;\n}\nconst surf = (S, x) => S.sf[cl(round(x), 0, W - 1)];\n\nfunction build(S, s) {\n  S.s = s;\n  const { M, SN, NX, AL, D, TT, ex } = S, E = [], face = [];\n  for (let q = 0; q \u003c= BW * 4; q++) TT[q] = topAt(U0 + q / 4, s);\n  for (let q = 0; q \u003c BH * 4; q++) E.push(edgeAt(V0 + (q + 0.5) / 4, s));\n  for (let k = 0; k \u003c NB; k++) {\n    let n = 0;\n    for (let j = 0; j \u003c 16; j++) {\n      const qu = (k & 63) * 4 + (j & 3), qv = (k >> 6) * 4 + (j >> 2), u = U0 + (qu + 0.5) / 4, v = V0 + (qv + 0.5) / 4;\n      if (v \u003c 0 ? v >= TT[qu] : u > E[qv][0] && u \u003c E[qv][1]) n++;\n    }\n    M[k] = n / 16;\n  }\n  // Distance to open water: a glowing rim, a darker core.\n  for (let k = 0; k \u003c NB; k++) D[k] = M[k] \u003c 0.5 ? 0 : 20;\n  for (let k = BW + 1; k \u003c NB - 1; k++) D[k] = min(D[k], D[k - 1] + 1, D[k - BW] + 1, D[k - BW - 1] + 1.4, D[k - BW + 1] + 1.4);\n  for (let k = NB - BW - 2; k > 0; k--) D[k] = min(D[k], D[k + 1] + 1, D[k + BW] + 1, D[k + BW + 1] + 1.4, D[k + BW - 1] + 1.4);\n  for (let j = 0; j \u003c BH * 2; j++) ex[j] = j & 1 ? -99 : 99;\n  for (let k = 0; k \u003c NB; k++) {\n    const gu = k & 63, gv = k >> 6, u = U0 + gu + 0.5, v = V0 + gv + 0.5;\n    if (M[k] \u003c= 0) continue;\n    // Facets: lit or shaded in the air; below, melt scallops lit on their lower walls.\n    let bd = 1e9, id = 0, sv = 0;\n    for (let j = 0; j \u003c 9; j++) {\n      const cu = floor(u / 5) + (j % 3) - 1, cv = floor(v / 5) + floor(j / 3) - 1, w = (cv + hash(cv, cu + 50)) * 5, dd = (u - (cu + hash(cu, cv)) * 5) ** 2 + (v - w) ** 2;\n      if (dd \u003c bd) (bd = dd), (id = hash(cu + 99, cv)), (sv = w);\n    }\n    const qu = gu * 4 + 2, sl = TT[min(BW * 4, qu + 2)] - TT[max(0, qu - 2)], dep = v - TT[qu];\n    NX[k] = mix(sl / sqrt(1 + sl * sl), cl(u / 24 + 1.3 * (id - 0.5), -1, 1), sm(1, 3, dep));\n    SN[k] = sm(2.4, 1.3, dep) * sm(1.6, 0.8, abs(sl));\n    AL[k] = (0.86 + 0.14 * hash(gu, 7)) * (0.88 + 0.24 * id) * (v > -1.5 && v \u003c 0 ? 0.7 : 1);\n    // Layers of white and clear blue ice, dark veins of refrozen meltwater.\n    const f = (v + u * 0.14 + 7 * vn(u * 0.04, v * 0.025 + 9)) / 8, n = floor(f), band = f - n, h1 = hash(n, 5);\n    const mot = (0.84 + 0.3 * vn(u * 0.1 + 3, v * 0.07)) * (1 + 0.2 * cl((v - sv) / 3, -1, 1));\n    const pale = sm(0.5, 0.6, band) * (1 - sm(0.6 + 0.3 * h1, 0.7 + 0.3 * h1, band)) * sm(0.25, 0.5, hash(n, 6)), clear = (1 - sm(0.2, 0.45, band)) * sm(0.4, 0.8, h1);\n    const vein = max(sm(0.11, 0.03, abs(vn(u * 0.08 + 11, v * 0.045) * 2 - 1)), 0.8 * sm(0.1, 0.025, abs(vn(u * 0.045 + 31, v * 0.11 + 5) * 2 - 1))) * sm(0.25, 0.5, vn(u * 0.035 + 20, v * 0.03));\n    const dk = D[k], core = (0.5 + 0.5 * exp(-max(0, dk - 1) / 5)) * (gv > 1 && M[k - 2 * BW] \u003c 0.5 ? 1.3 : 1) * (gv \u003c BH - 2 && M[k + 2 * BW] \u003c 0.5 ? 0.76 : 1);\n    for (let c = 0; c \u003c 3; c++) S.IC[c][k] = mix(mix(mix(BASE[c] * mot, PALE[c], 0.8 * pale), CLEAR[c], 0.6 * clear), VEIN[c], 0.9 * vein) * core * mix(1, TINT[c], s) + exp(-dk / 1.2) * RIM[c];\n    if (v > 3 && v \u003c 80 && dk > 1.5) face.push([u, v]);\n    (ex[gv * 2] = min(ex[gv * 2], u)), (ex[gv * 2 + 1] = max(ex[gv * 2 + 1], u));\n  }\n  S.vents = [0, 1, 2, 3, 4].map((i) => face[floor(hash(i, 41) * face.length)]);\n  // Penguin places: flat, three columns apart, clear of the slabs.\n  const slots = [];\n  for (const u of [0.5, -6, 6.5, -3, 3.5, -8, 8, -1.5, 2, -4.5, 5]) {\n    const q = round((u - U0) * 4);\n    if (abs(TT[q + 6] - TT[q - 6]) \u003c 1.6 && TT[q] \u003c -2.5 && TT[q] > -15 && slots.length \u003c 5 && slots.every((w) => abs(w - u) > 2.9)) slots.push(u + 0.01);\n  }\n  S.pens.forEach((p, i) => ((p.on = i \u003c slots.length ? 1 : 0), p.on && (p.h = slots[i]), p.st || (p.u = p.h)));\n}\n\nconst bub = (S, x, y, vy = -(4.5 + 5 * rnd()), wb = 0.6) => S.bubs.length \u003c 260 && S.bubs.push({ x, y, vy, wb, ph: rnd() * 6.3, dead: 0 });\nfunction splash(S, x, v, g) {\n  const y = surf(S, x) - 0.5;\n  for (let k = 0; k \u003c 7 + 29 * g; k++) S.spray.push({ x: x + (rnd() - 0.5) * (2 + 3 * g), y, vx: (rnd() - 0.5) * (10 + 14 * g), vy: -(6 + rnd() * (9 + 17 * g)), l: 0.99 });\n  S.rings.push({ x, t: 0.01, a: g ? min(3.2, 0.1 * v + 1.4) : 0.6 });\n  for (let k = 0; k \u003c 8 + 22 * g; k++) bub(S, x + (rnd() - 0.5) * 6, y + 1 + rnd() * (5 + 9 * g));\n}\n\n// A crack opens behind a slab of outer ice; it goes half a second later.\nfunction calve(S) {\n  if (S.pend || S.pieces.some((p) => p.f)) return;\n  let side = rnd() \u003c 0.5 ? -1 : 1;\n  if (S.cuts.some((c) => c.side === side && c.age \u003c 40)) side = -side;\n  let ue = edgeU(S, side);\n  if (abs(ue) \u003c 12) (side = -side), (ue = edgeU(S, side));\n  if (abs(ue) \u003c 12) return;\n  const px = side * max(9, abs(ue) - 3.5 - 3 * rnd()), nx = side * 0.993, d = nx * px + 0.6;\n  const c = { nx, ny: -0.12, d, d0: d, cx: px, cy: -5, side, age: 0.01, bu: 0.5, bv: 0.5, ex: 0.5, hx: 0.5, hy: 0.5 };\n  let u0 = 99, u1 = -99, v0 = 99, v1 = -99;\n  for (let k = 0; k \u003c NB; k++) {\n    const u = U0 + (k & 63) + 0.5, v = V0 + (k >> 6) + 0.5;\n    if (S.M[k] > 0.5 && cutA([c], u, v) \u003c 0.5 && cutA(S.cuts, u, v) > 0.5) (u0 = min(u0, u)), (u1 = max(u1, u)), (v0 = min(v0, v)), (v1 = max(v1, v));\n  }\n  if (u1 - u0 \u003c 1.5) return;\n  Object.assign(c, { bu: (u0 + u1) / 2, bv: (v0 + v1) / 2, hx: (u1 - u0) / 2 + 0.5, hy: (v1 - v0) / 2 + 0.5 });\n  c.ex = hypot(c.hx, c.hy) + 1.5;\n  (S.pend = c), (S.crack = 0.5);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d), A = S.A, sf = S.sf;\n  // The swell, and rings running out from each splash.\n  const swell = (x) => A * (0.7 * sin(x * 0.15 - t * 1.4) + 0.3 * sin(x * 0.34 + t * 0.95 + 1));\n  for (let x = 0; x \u003c W; x++) {\n    sf[x] = WL + swell(x + 0.5);\n    for (const r of S.rings) {\n      const q = abs(x + 0.5 - r.x) - 11 * r.t;\n      sf[x] += r.a * exp(-r.t * 0.5 - (q / 5) ** 2) * sin(q * 0.9);\n    }\n  }\n  for (const r of S.rings) r.t += d;\n  S.rings = S.rings.filter((r) => r.t \u003c 7);\n  S.thv += (-2.4 * (S.th - S.thq - 0.022 * A * cos(BX * 0.15 - t * 1.4)) - 0.45 * S.thv) * d;\n  S.byv += (-3 * (S.by - 0.5 * swell(BX)) - 1.2 * S.byv) * d;\n  (S.th += S.thv * d), (S.by += S.byv * d), (S.thq *= exp(-d / 60));\n  for (const c of S.cl) (c.x += (0.7 + 3 * S.k4) * d) > W + c.w + 2 && (c.x = -c.w - 2);\n\n  if (S.live && (S.next -= d) \u003c= 0) calve(S), (S.next = 15 + 10 * rnd());\n  if (S.pend && (S.crack -= d) \u003c= 0) {\n    // The berg loses weight on that side, rocks and settles leaning a little.\n    const c = S.pend, [x, y] = toW(S, c.bu, c.bv);\n    S.cuts.push(c);\n    S.pieces.push({ c, x, y, vx: c.side * 2.5, vy: 0.5, a: S.th, va: c.side * (1.4 + rnd()), f: 1, ta: 0.5 });\n    (S.pend = null), (S.thv -= c.side * 0.1), (S.thq -= c.side * 0.012), (S.byv -= 1.6);\n  }\n  for (const c of S.cuts) (c.age += d) > 20 && (c.d += d * 0.12);\n  S.cuts = S.cuts.filter((c) => c.age \u003c 130);\n  for (const p of S.pieces) {\n    if (p.f) {\n      (p.vy += 45 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.a += p.va * d);\n      if (p.y > surf(S, p.x) - 1) splash(S, p.x, p.vy, 1), (p.f = 0), (p.vy *= 0.3), (p.ta = round(p.a / (PI / 2)) * (PI / 2));\n    } else {\n      const c = p.c, hy = abs(sin(p.a - S.th)) * c.hx + abs(cos(p.a - S.th)) * c.hy;\n      (p.vy += (-5 * (p.y - surf(S, p.x) - 0.75 * hy) - 1.8 * p.vy) * d), (p.va += (-4 * (p.a - p.ta) - 1.6 * p.va) * d);\n      (p.y += p.vy * d), (p.a += p.va * d), (p.x += c.side * 1.4 * d);\n    }\n  }\n  S.pieces = S.pieces.filter((p) => abs(p.x - W / 2) \u003c W / 2 + p.c.ex + 2);\n  S.vents.forEach((v, i) => {\n    if (sin(t * 0.6 + i * 2.1) > -0.2) for (S.vacc[i] += d * 3.5; S.vacc[i] >= 1; S.vacc[i]--) bub(S, ...toW(S, v[0], v[1]), -(5 + 0.6 * i + 1.2 * rnd()), 0.9);\n  });\n  for (const b of S.bubs) {\n    (b.y += b.vy * d), (b.x += sin(t * 6 + b.ph) * b.wb * d);\n    if (b.y \u003c surf(S, b.x) + 0.3 || b.x \u003c -1 || b.x > W + 1) b.dead = 1;\n  }\n  S.bubs = S.bubs.filter((b) => !b.dead);\n  for (const p of S.spray) (p.vy += 50 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 0.8);\n  S.spray = S.spray.filter((p) => p.l > 0 && !(p.vy > 0 && p.y > surf(S, p.x) + 0.5));\n  (S.kx = 49 + 8 * sin(t * 0.1)), (S.ky = 112 + 7 * sin(t * 0.13 + 1));\n  penguins(S, d, t);\n}\n\n// Now and then a penguin waddles to the edge, jumps, swims to the krill and leaps back.\nfunction penguins(S, d, t) {\n  for (const p of S.pens) if (!p.st && rnd() \u003c d * 0.2) p.f = -p.f;\n  let p = S.dv;\n  if (!p && S.live && (S.nd -= d) \u003c= 0) {\n    const free = S.pens.filter((q) => !q.st && q.on);\n    if (!free.length) return;\n    p = S.dv = free.reduce((a, q) => (q.u > a.u ? q : a));\n    Object.assign(p, { st: 1, tu: edgeU(S, 1) - 0.5 });\n  }\n  if (!p) return;\n  if (p.st === 1 || p.st === 5) {\n    const g = p.st === 1 ? p.tu : p.h;\n    p.f = g > p.u ? 1 : -1;\n    p.u += p.f * min(abs(g - p.u), 4 * d);\n    if (abs(g - p.u) \u003c 0.01) {\n      if (p.st === 5) (p.st = 0), (S.dv = null), (S.nd = 5 + 6 * rnd());\n      else ([p.x, p.y] = toW(S, p.u, topB(S, p.u) - 0.3)), Object.assign(p, { st: 2, vx: 7, vy: -9 });\n    }\n  } else if (p.st === 2) {\n    (p.vy += 40 * d), (p.x += p.vx * d), (p.y += p.vy * d);\n    if (p.vy > 0 && p.y > surf(S, p.x)) splash(S, p.x, 8, 0), Object.assign(p, { st: 3, vy: 12, vx: 3, tt: 0.01, nb: 0.01 });\n  } else if (p.st === 3) {\n    const back = (p.tt += d) > 5, dx = (back ? W - 6 : S.kx + 5 * cos(t * 2.2)) - p.x, dy = (back ? WL - 2 : S.ky + 3 * sin(t * 2.2)) - p.y, r = hypot(dx, dy) + 1e-6, sp = back ? 17 : 14;\n    (p.vx += ((dx / r) * sp - p.vx) * min(1, 2.2 * d)), (p.vy += ((dy / r) * sp - p.vy) * min(1, 2.2 * d));\n    (p.x = cl(p.x + p.vx * d, 1, W - 2)), (p.y = min(p.y + p.vy * d, H - 3));\n    if ((p.nb += d) > 0.07) (p.nb = 0), bub(S, p.x - p.vx * 0.12, p.y - p.vy * 0.12);\n    if (back && p.y \u003c surf(S, p.x) + 1.5) splash(S, p.x, 6, 0), Object.assign(p, { st: 4, lx: p.x, ly: p.y, lt: 0.01, u: edgeU(S, 1) - 1 });\n  } else {\n    const [lx, ly] = toW(S, p.u, topB(S, p.u) - 0.3), l = (p.lt = min(1, p.lt + d / 0.7));\n    (p.vx = lx - p.x), (p.vy = ly - p.y), (p.x = mix(p.lx, lx, l)), (p.y = mix(p.ly, ly, l) - 40 * l * (1 - l));\n    if (l >= 1) p.st = 5;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 0, 1);\n  if (abs(k3 - S.s) > 0.01) build(S, k3);\n  (S.k4 = cl(k[3], 0, 1)), (S.A = 0.45 + 3 * S.k4);\n  if (k1 !== S.k1) {\n    const [a, b, u] = k1 \u003c 0.5 ? [0, 1, sm(0, 0.5, k1)] : [1, 2, sm(0.5, 1, k1)];\n    for (let j = 0; j \u003c 41; j++) S.P[j] = mix(KF[a][j], KF[b][j], u);\n    S.k1 = k1;\n  }\n  for (; !S.live; S.live = S.t > 4 ? 1 : 0) step(S, 1 / 30);\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nlet F, G, PL, RT, LR, LS, LC;\nconst LA = [0, 0, 0, 0], C3 = new Float64Array(3);\n// Light under water: slanting shafts, and caustics on the ice (one noise twice, crossed).\nfunction glow(x, y, dep, b) {\n  const q = x + LS * (y - WL) + 56, q0 = cl(floor(q), 0, 174);\n  let L = LR * mix(RT[q0], RT[q0 + 1], q - q0) * exp(-dep / 36) * 64 * (1 + 0.5 * b);\n  if (b > 0 && dep \u003c 34) L += LC * sm(0.75, 1, 1 - abs(CT[((y + LA[1]) & 63) * 64 + ((x + LA[0]) & 63)] - CT[((x + LA[2]) & 63) * 64 + ((y + LA[3]) & 63)]) * 4) * exp(-dep / 12) * (80 * b + 22);\n  return L;\n}\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst bl = (A, k, fx, fy) => mix(mix(A[k], A[k + 1], fx), mix(A[k + BW], A[k + BW + 1], fx), fy);\n// One LED of the berg, or of slab q, read at body point u, v.\nfunction paint(x, y, u, v, q) {\n  const S = G, P = PL, gx = u - U0 - 0.5, gy = v - V0 - 0.5, x0 = floor(gx), y0 = floor(gy), i = y * W + x, o = i * 3, s = S.sf[x], c = C3, pc = S.pend;\n  if (x0 \u003c 0 || y0 \u003c 0 || x0 >= BW - 1 || y0 >= BH - 1 || (q && (v > 0.6 || (u - q.cx) ** 2 + (v - q.cy) ** 2 > 225))) return;\n  const k = y0 * BW + x0, fx = gx - x0, fy = gy - y0, a = bl(S.M, k, fx, fy) * (q ? cl(0.5 + (q.nx * u + q.ny * v - q.d0), 0, 1) : S.cuts.length && v \u003c 0.6 ? cutA(S.cuts, u, v) : 1);\n  if (a \u003c 0.02) return;\n  if (y + 0.5 \u003c s) {\n    const nx = bl(S.NX, k, fx, fy), sn = bl(S.SN, k, fx, fy), al = bl(S.AL, k, fx, fy), li = P[38] ? cl(0.5 + 0.8 * nx * P[38], 0, 1) : 0.6 + 0.25 * nx;\n    for (let j = 0; j \u003c 3; j++) c[j] = mix(mix(P[19 + j], P[16 + j], li), P[22 + j] * (0.88 + 0.12 * li), sn) * al;\n  } else {\n    const L = glow(x, y, y + 0.5 - s, 1);\n    for (let j = 0; j \u003c 3; j++) c[j] = bl(S.IC[j], k, fx, fy) * AT[y * 3 + j] * P[39] + 0.35 * S.row[y * 3 + j] + L * LT[j];\n  }\n  const ck = pc && v \u003c 0.6 && abs(pc.nx * u + pc.ny * v - pc.d) \u003c 0.6 ? 0.4 : 1;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(q ? F[o + j] : 0, c[j] * ck, q ? a : 1);\n  S.ba[i] = max(S.ba[i], a);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  F = S.f;\n  const { ba, sf, rt, row, t, P, k1, ex } = S;\n  const sunA = 1 - sm(0, 0.4, k1), moonA = sm(0.6, 1, k1), aur = sm(0.7, 1, k1), stars = sm(0.55, 0.9, k1);\n  for (let y = 0; y \u003c H; y++) {\n    let k = 0;\n    while (k \u003c 2 && y > P[k * 4 + 4]) k++;\n    const u = y \u003c= HZ ? sm(P[k * 4], P[k * 4 + 4], y) : cl((y - WL) / 97, 0, 1) ** 0.75;\n    for (let j = 0; j \u003c 3; j++) row[y * 3 + j] = y \u003c= HZ ? mix(P[k * 4 + 1 + j], P[k * 4 + 5 + j], u) : mix(P[25 + j], P[28 + j], u);\n  }\n  for (let q = 0; q \u003c 176; q++) rt[q] = sm(0.45, 0.82, vn((q - 56) * 0.13 - t * 0.3, t * 0.05 + 7));\n  (G = S), (PL = P), (RT = rt), (LR = P[37]), (LS = P[38] * 0.45), (LC = P[40] * (0.7 + 0.6 * S.k4));\n  [7, -5, -6, 4].forEach((v, j) => (LA[j] = floor(t * v)));\n\n  // The berg first, then the background where it shows, then the slabs.\n  ba.fill(0);\n  const ct = cos(S.th), st = sin(S.th), oy = WL + PV + S.by;\n  for (let y = 0; y \u003c H; y++) {\n    const dy = y + 0.5 - oy, g0 = floor(ct * dy + PV - V0 - 0.5);\n    let u0 = 99, u1 = -99;\n    for (let j = max(0, g0 - 3); j \u003c= min(BH - 1, g0 + 3); j++) (u0 = min(u0, ex[j * 2])), (u1 = max(u1, ex[j * 2 + 1]));\n    for (let x = max(0, floor(BX + u0 - st * dy - 2)); x \u003c min(W, BX + u1 - st * dy + 3); x++) {\n      const dx = x + 0.5 - BX;\n      paint(x, y, ct * dx + st * dy, -st * dx + ct * dy + PV, null);\n    }\n  }\n  const sx = 55, sy = 21.5, mx = 12, my = 8, c = C3;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, A = ba[i], dep = y + 0.5 - sf[x];\n    if (A > 0.995) continue;\n    let g = 0, e = 0;\n    if (y \u003c HZ) {\n      const ds = hypot(x + 0.5 - sx, (y + 0.5 - sy) * 1.1), dm = hypot(x + 0.5 - mx, y + 0.5 - my), cu = aur > 0 ? 0.5 + 0.5 * sin(x * 0.2 + 3 * vn(x * 0.05 + t * 0.06, 1) + t * 0.25) : 0;\n      g = moonA * (0.25 * exp(-dm / 5) + (dm \u003c 2.6 && hypot(x - 0.8 - mx, y + 1.1 - my) > 2.3 ? 0.9 : 0)) + (stars > 0 && hash(x, y + 11) \u003c 0.016 ? stars * (0.25 + 0.5 * hash(y, x)) * (0.7 + 0.3 * sin(t * 3 + x * y)) * sm(HZ, 8, y) : 0);\n      e = cu ? aur * sm(19, 6, y) * sm(0, 4, y) * cu * cu * vn(x * 0.6, t * 0.4) : 0;\n      const gs = ds \u003c 30 ? sunA * (0.55 * exp(-ds / 7) + (ds \u003c 2.6 ? 1.2 : 0)) : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = row[y * 3 + j] + SUN[j] * gs + MOON[j] * g + AUR[j] * e;\n      for (const q of S.cl) {\n        const qx = (x + 0.5 - q.x) / q.w, qy = (y + 0.5 - q.y) / q.h;\n        if (qx * qx + qy * qy > 2) continue;\n        const a = 0.92 * sm(0, 0.45, 1 - qx * qx - qy * qy + 0.45 * (vn(x * 0.35 + q.w, y * 0.6) - 0.5)), u = sm(-1, 1, qy);\n        for (let j = 0; j \u003c 3; j++) c[j] = mix(c[j], mix(P[34 + j], P[31 + j], u), a);\n      }\n    } else if (dep \u003c 0) {\n      // The far sea: the sun's glitter path, whitecaps.\n      g = sunA * (abs(x + 0.5 - sx) \u003c 1.5 + (y - HZ) * 1.2 && hash(x, y + floor(t * 7) * 64) \u003c 0.45 ? 0.75 : 0);\n      e = S.k4 > 0.35 && hash(x + floor(t * 2) * 7, y) \u003c (S.k4 - 0.35) * 0.3 ? 0.8 : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[36 + j] * 0.55 + row[90 + j] * 0.45 + SUN[j] * g, 230, e);\n    } else {\n      // The surface's silver underside.\n      (g = glow(x, y, dep, 0)), (e = dep \u003c 2.5 ? (1 - dep / 2.5) * 0.5 : 0);\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[y * 3 + j] + (j ? 90 : 60) * e + g * LT[j], row[78 + j] * 0.9, dep \u003c 1 ? 0.55 : 0);\n    }\n    for (let j = 0; j \u003c 3; j++) F[o + j] = mix(c[j], F[o + j], A);\n  }\n  for (const p of S.pieces) {\n    const ca = cos(p.a), sa = sin(p.a), e = p.c.ex;\n    for (let y = max(0, floor(p.y - e)); y \u003c min(H, p.y + e); y++)\n      for (let x = max(0, floor(p.x - e)); x \u003c min(W, p.x + e); x++) {\n        const dx = x + 0.5 - p.x, dy = y + 0.5 - p.y;\n        paint(x, y, p.c.bu + ca * dx + sa * dy, p.c.bv - sa * dx + ca * dy, p.c);\n      }\n  }\n  sprites(S, t, ba);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction sprites(S, t, ba) {\n  for (const k of S.kr) {\n    const x = S.kx + cos(k.p + t * k.w) * k.r * 1.3, y = S.ky + sin(k.q + t * k.w * 1.3) * k.r * 0.7, i = floor(y) * W + floor(x);\n    if (i >= 0 && i \u003c N && ba[i] \u003c 0.5) put(x, y, [255, 128, 118], (0.25 + 0.35 * S.P[39]) * (0.7 + 0.3 * sin(t * 4 + k.p * 9)));\n  }\n  for (const b of S.bubs) put(b.x, b.y, [214, 246, 255], 0.6);\n  for (const p of S.pens) {\n    if (!p.st && !p.on) continue;\n    if (p.st === 0 || p.st === 1 || p.st === 5) {\n      const [x, y] = toW(S, p.u, topB(S, p.u) - 0.3), f = p.f, B = round(x - 0.5) + (f > 0 ? 0 : 1), Y = floor(y) - (p.st && sin(t * 14) > 0 ? 1 : 0);\n      put(B, Y - 3, BLK), put(B + f, Y - 3, BLK), put(B + 2 * f, Y - 3, [240, 168, 60], 0.8);\n      for (let j = 0; j \u003c 3; j++) put(B, Y - j, BLK), put(B + f, Y - j, WHT);\n    } else {\n      const r = hypot(p.vx, p.vy) + 1e-6, ux = p.vx / r, uy = p.vy / r;\n      for (let j = -1.5; j \u003c= 1.5; j += 0.5) put(p.x + ux * j, p.y + uy * j, BLK), j \u003c 1 && put(p.x + ux * j - uy * (ux \u003c 0 ? -1 : 1), p.y + uy * j + abs(ux), WHT, 0.9);\n    }\n  }\n  for (const p of S.spray) put(p.x, p.y, [232, 240, 246], min(1, p.l * 1.3));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower."},{"name":"Shape","min":0,"max":1,"about":"A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom."},{"name":"Swell","min":0,"max":1,"about":"How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea."}],"start":[0,2,0,0.06],"measures":{"motion":0.1332,"detail":0.0357,"edges":0.189,"complexity":1.9213,"coverage":0.9971,"colour":0.3059,"drift":0.0544},"knobResponse":[0.1811,0.05,0.05,0.0489]},{"slug":"implosion","title":"Implosion","family":"construction","round":26,"note":"새벽 하늘 아래 스무 층 아파트에 장약 섬광이 층마다 타고 내려오면, 탑이 꺾이며 제자리로 주저앉고 회황색 먼지구름이 꼭대기까지 끓어올라요. 타임랩스로 비계 속에 새 탑이 서고, K1 을 누르면 바로 발파해요.","idea":"An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.","buttons":"K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.","code":"// ===== Patternflow pattern =====\n// Title:   Implosion\n// Family:  construction\n// Idea:    An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the explosive demolitions of 1960s concrete tower blocks\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1\n//\n// Knob 1: Light. Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust.\n// Knob 2: Speed. At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower.\n// Knob 3: Storeys. Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel.\n// Knob 4: Wind. Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it.\n// Buttons: K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = (a = 1) => Math.random() * a;\nconst side = () => (rnd() \u003c 0.5 ? -1 : 1);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every cx by cy cells.\nfunction vn(x, y, cx = 1e4, cy = 1e4) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (i, j) => hash(((i % cx) + cx) % cx, ((j % cy) + cy) % cy);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + h(xi + 1, yi + 1)) * su * sv;\n}\n\n// Ground row; the tower's front face from x 19 (22 wide) and side face (6).\nconst G = 110, X0 = 19, TW = 28, CX = 33;\n// One round at Speed 2, in seconds.\nconst T_CH = 2.4, T_FALL = 3, T_EX = 11, T_TL = 19, T_CLR = 25, T_RISE = 26.5, T_UP = 32.5, CYC = 36;\nconst MP = 240, PF = 12;\n// Dawn, morning, overcast, night: sky top, mid, horizon; ambient; sun; lit windows; floods; cloud lit, dark; cover.\nconst KEYS = [\n  [16, 30, 86, 52, 84, 156, 214, 146, 150, 0.4, 0.45, 0.66, 0.55, 0.32, 0.3, 0.34, 0.35, 236, 156, 156, 58, 60, 108, 0.5],\n  [46, 108, 206, 110, 164, 228, 236, 206, 160, 0.55, 0.58, 0.68, 1, 0.86, 0.62, 0.06, 0, 255, 244, 226, 150, 160, 190, 0.38],\n  [96, 102, 112, 136, 140, 146, 170, 170, 168, 0.66, 0.66, 0.68, 0.08, 0.08, 0.08, 0.12, 0.12, 190, 192, 196, 100, 104, 112, 0.9],\n  [3, 5, 18, 8, 14, 38, 34, 32, 58, 0.14, 0.15, 0.24, 0, 0, 0, 0.5, 1, 40, 38, 58, 12, 14, 28, 0.45],\n];\nconst TILE = [80, 110, 170], BRICK = [170, 84, 56], PALE = [190, 176, 150], RUST = [150, 80, 50], AMBER = [255, 150, 30];\nconst COATS = [[30, 34, 56], [56, 30, 36], [34, 46, 34], [50, 44, 34], [250, 120, 20]], SIL = [12, 12, 16], PHONE = [150, 180, 240];\nconst WIN = [204, 150, 83], GLASS = [60, 84, 110], MID = [0, 0, 0], LAMP = [200, 190, 150], DARK = [30, 28, 28], HOLE = [14, 12, 12], RED = [255, 40, 30];\nconst CON = [160, 154, 144], WARM = [255, 188, 104], YEL = [242, 182, 32], DUST0 = [150, 147, 142], DUST1 = [190, 164, 120];\nlet F, L, P;\n\nexport function setup(params) {\n  const f = (n) => new Float32Array(n);\n  P = params.s = { F: f(N * 3), NT: f(N), BA: f(N * 3), BU: f(N), BK: new Uint8Array(N), FL: f(N), SKY: f(H * 3), pf: f(MP * PF), np: 0, cr: [], T: 0, rt: 0, S: 0, cyc: 0, co: 0, w: 0 };\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.NT[i] = 0.5 * vn(x / 16, y / 16, 4, 8) + 0.3 * vn(x / 8, y / 8, 8, 16) + 0.2 * vn(x / 4, y / 4, 16, 32);\n    // Two floodlight masts by the fence aim up the tower.\n    for (const lx of [2, 61]) {\n      const dx = x - lx, dy = y - 82, dd = sqrt(dx * dx + dy * dy) + 0.5, ax = CX - lx, c = (dx * ax - dy * 32) / (dd * sqrt(ax * ax + 1024));\n      P.FL[i] += exp(-(1 - c) * 32) / (1 + dd / 40) + 0.9 * exp((-dd * dd) / 5);\n    }\n  }\n  scenery();\n  for (let x = 2; x \u003c 63; x += 3 + floor(rnd(3))) if (rnd() \u003c 0.85) P.cr.push([x, 111 + floor(rnd(4)), 4 + floor(rnd(3)), rnd(), rnd(), P.cr.length % 7 === 3 ? 4 : floor(rnd(4))]);\n  newRound();\n}\n\n// Street, site, two low blocks, far skyline and spire, chimney, a water cannon on a roof.\nfunction scenery() {\n  const top = [];\n  for (let x = 0; x \u003c W; ) for (let j = 0, w = 3 + rnd(6), t = 72 + rnd(16); j \u003c w && x \u003c W; j++) top[x++] = t;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, hh = hash(x, y), q = (x - 50) & 3;\n    let k = 2, c = 0, v = 1;\n    if (y > 118) (c = [58, 58, 64]), (v = 0.9 + 0.2 * hh);\n    else if (y === 118) c = [120, 118, 112];\n    else if (y >= G) (c = [118, 104, 86]), (v = 0.8 + 0.35 * hh);\n    else if (x > 50 && x \u003c 56 && y > 84 && y \u003c 90) c = abs(x - 53) + abs(y - 86.5) \u003c 1.6 ? [40, 44, 50] : [116, 120, 128];\n    else if (x \u003c 15 && y > 81) {\n      (c = y \u003c 84 ? [170, 160, 150] : [148, 92, 70]), (v = y \u003c 84 ? 1 : 0.88 + 0.2 * hash(x >> 1, y));\n      if (y > 85 && y \u003c 106 && x & 3 && (x & 3) \u003c 3 && (y - 86) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 48 && y > 89) {\n      (c = y \u003c 92 ? [190, 182, 170] : [176, 162, 138]), (v = 0.9 + 0.15 * hash(x, y >> 2));\n      if (y > 93 && y \u003c 108 && q && q \u003c 3 && (y - 94) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 55 && x \u003c 60 && y > 43) c = y === 44 ? [180, 172, 160] : y > 46 && y \u003c 54 && y % 5 > 1 && y % 5 \u003c 4 ? [176, 70, 56] : [150, 138, 124];\n    else if (y >= top[x] || (y > 57 && abs(x - 9) \u003c= (y - 58) / 6)) (k = 1), (c = [60, 66, 86]), (v = 0.85 + 0.25 * hash(x >> 2, 3));\n    else k = 0;\n    P.BK[i] = k;\n    if (c) for (let j = 0; j \u003c 3; j++) P.BA[i * 3 + j] = c[j] * v;\n  }\n}\n\n// The facade for S storeys: a kind per cell, each window's chance to be lit.\nfunction facade(S) {\n  const p = min(4, 100 / S), BH = round(S * p), BT = BH + 16, n = TW * BT, st = [], chg = [];\n  const A = new Float32Array(n), K = new Uint8Array(n), U = new Float32Array(n), RS = new Int16Array(BT).fill(-1);\n  for (let s = 0; s \u003c= S; s++) st.push(round(s * p));\n  for (let b = 0, s = 0; b \u003c BT; b++) {\n    while (s \u003c S - 1 && st[s + 1] \u003c= b) s++;\n    const r = b - st[s], wr = r === 1 || r === 2;\n    if (b \u003c BH) RS[b] = s;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = b * TW + c, bay = (c - 1) >> 2;\n      let k = 0, a = 0.92 + 0.14 * hash(s * 7 + bay, 11);\n      if (b \u003c BH) {\n        if (c \u003c 22) (k = !r ? 3 : c && c \u003c 21 && ((c - 1) & 3) \u003c 3 && wr ? 2 : 1), (U[j] = hash(s * 13 + bay, 3));\n        else (k = c > 23 && c \u003c 26 && wr ? 5 : 4), (a = c === 22 ? 1.15 : a), (U[j] = hash(s * 17 + c, 9));\n        if (!r) a *= 0.8;\n      } else if (b === BH) k = c \u003c 22 ? 6 : 0;\n      else if (b \u003c= BH + 4 && ((c > 4 && c \u003c 15) || (c > 15 && c \u003c 20 && b \u003c= BH + 3))) (k = 6), (a = 0.82);\n      else if (c === 10) k = b \u003c BT - 1 ? 7 : 8;\n      else if ((b === BH + 9 && c > 7 && c \u003c 13) || (b === BH + 7 && c === 11)) k = 7;\n      (K[j] = k), (A[j] = a);\n    }\n  }\n  for (let s = round(S * 0.78); s >= 2; s -= 3) chg.push(s);\n  Object.assign(P, { S, BH, BT, st, fa: A, fk: K, fu: U, rs: RS, chg: chg.concat([1, 0]), fold: st[round(S * 0.42)], fls: new Float32Array(S), bl: new Uint8Array(S) });\n}\n\nfunction newRound() {\n  Object.assign(P, { cyc: P.cyc + 1, dir: side(), fi: 0, b0: 0, b1: 0, pd1: 0, pc2: 0, a1: 0, a2: 0, bd: [] });\n  P.bl?.fill(0);\n  for (let j = 0; j \u003c 8; j++) P.bd.push([0, 0, 0, 0, rnd(6.28), 7 + rnd(10), 0, rnd(6)]);\n}\n\n// The lower floors give first; the upper block then folds into them.\nconst yS = (s) => G - 1 - (P.st[s] + P.st[s + 1]) / 2;\nconst fall = (tc) => (tc \u003c= 0 ? [0, 0] : [11 * tc * tc, tc > 0.5 ? 6 * (tc - 0.5) ** 2 : 0]);\nconst puff = (x, y, vx, vy, r, g, a, life, rise) => P.np \u003c MP && P.pf.set([x, y, vx, vy, r, r, g, a, 0, life, rise, rnd()], P.np++ * PF);\n// Dust from crushed floors: most climbs, some rolls out along the ground.\nfunction basePuff(kind) {\n  const x = X0 + rnd(TW), out = x - CX, roll = kind \u003c 2 && rnd() \u003c 0.4;\n  puff(x, G - 1 - rnd(4), out * 0.8 + rnd(12) - 6 + (roll ? Math.sign(out || 1) * (10 + rnd(10)) : 0), roll ? -1 - rnd(3) : -5 - rnd(12) - (kind > 1 ? 14 : 0), 3 + rnd(3), 2 + rnd(2.5), 1 + rnd(0.5), roll ? 12 + rnd(5) : 8.5 + rnd(5), roll ? 1 + rnd(3) : 8 + rnd(kind > 1 ? 30 : 24));\n}\n// A charge on storey s: its windows blow out and spit dust.\nfunction fire(s) {\n  const y = yS(s);\n  P.bl[s] = 1;\n  for (let n = 0; n \u003c 10; n++) {\n    const sd = n & 1 ? 1 : -1, ex = sd \u003c 0 ? X0 - 1 : X0 + TW;\n    puff(n \u003c 4 ? ex : X0 + 2 + rnd(TW - 4), y + rnd(2) - 1, sd * (n \u003c 4 ? 10 + rnd(12) : rnd(3)), -rnd(), 1 + rnd(0.8), 1.2 + rnd(), 0.7, 1.6 + rnd(), 0.5);\n  }\n  if (P.fi === 1) for (const b of P.bd) (b[6] = 1), (b[2] = (b[0] - CX) * 2 + rnd(14) - 7 + P.w * 14), (b[3] = -8 - rnd(14));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  P = params.s;\n  const k = input.knobValues || [0, 2, 20, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), S = round(cl(k[2], 20, 30)), w = (P.w = cl(k[3], -1, 1));\n  if (S !== P.S) facade(S);\n  P.rt += rd;\n  if (input.btnPressed?.[0]) P.T \u003c T_CH - 0.7 ? (P.T = T_CH - 0.7) : P.T >= T_TL && (newRound(), (P.T = T_CH - 0.7));\n  if ((P.T += d) >= CYC) newRound(), (P.T -= CYC);\n  const T = P.T, tl = 0.85 * sm(T_TL, T_TL + 1.2, T) * (1 - sm(CYC - 2.5, CYC - 0.4, T)), tc = T - T_FALL, [d1, c2] = T \u003c T_TL ? fall(tc) : [0, 0], cons = min(P.BT, d1 + c2), phM = 10 + S * 0.6;\n  // Time-lapse: a day every 2 s, and the clouds race.\n  const u = (P.he = mix(cl(k[0], 0, 1), 0.5 - 0.5 * cos(PI * (T - T_TL)), tl)) * 3, i = min(2, floor(u));\n  P.L = KEYS[i].map((v, j) => mix(v, KEYS[i + 1][j], u - i));\n  P.co += (w * 2 + tl * (w \u003c 0 ? -24 : 24)) * d;\n\n  // Charges, top to bottom, then the shudder.\n  while (P.fi \u003c P.chg.length && T >= T_CH + P.fi * 0.09 && T \u003c T_TL) fire(P.chg[P.fi++]);\n  P.gfl = 0;\n  P.chg.forEach((s, n) => (P.gfl = max(P.gfl, (P.fls[s] = T >= T_CH + n * 0.09 ? exp(-(T - T_CH - n * 0.09) * 9) : 0))));\n  P.shk = T > T_CH && T \u003c T_FALL + 0.6 ? round((rnd() - 0.5) * 2.6 * (1 - sm(T_FALL, T_FALL + 0.6, T))) : 0;\n\n  // The fall: dust where floors are crushed, at the foot and the fold.\n  if (tc > 0 && T \u003c T_TL) {\n    if (!P.b0) for (let n = (P.b0 = 24); n--; ) basePuff(1);\n    const e1 = max(0, d1 - P.pd1), e2 = max(0, c2 - P.pc2);\n    if (d1 + c2 \u003c P.BT) (P.a1 += e1 * 1.1), (P.a2 += e2 * 0.35);\n    for (; P.a1 >= 1; P.a1--) basePuff(0);\n    for (let sd; P.a2 >= 1; P.a2--) (sd = side()), puff(CX + sd * (8 + rnd(8)), min(G - 2, G - 1 - P.fold + d1), sd * (8 + rnd(14)), -2 - rnd(6), 2 + rnd(1.5), 3 + rnd(3), 0.7, 8 + rnd(4), 4 + rnd(6));\n    if (!P.b1 && cons >= P.BT) for (let n = (P.b1 = 20); n--; ) basePuff(2);\n    (P.pd1 = d1), (P.pc2 = c2);\n  }\n  P.ph = T \u003c T_FALL ? 0 : T \u003c T_TL ? phM * sm(0, 1, cons / P.BT) : phM * (1 - sm(T_TL + 0.5, T_CLR - 0.5, T));\n\n  // Puffs rise, slow, swell and drift, faster aloft.\n  const pf = P.pf, ex = 1 - exp(-0.7 * d), ey = 1 - exp(-0.9 * d);\n  for (let p = 0, q, age; p \u003c P.np; p++) {\n    if ((age = pf[(q = p * PF) + 8] += d) > pf[q + 9]) {\n      if (p-- \u003c --P.np) pf.copyWithin(q, P.np * PF, P.np * PF + PF);\n      continue;\n    }\n    pf[q + 2] += (w * (3 + 9 * (1 - pf[q + 1] / H)) - pf[q + 2]) * ex;\n    pf[q + 3] += (-pf[q + 10] * exp(-age / 4) - pf[q + 3]) * ey;\n    (pf[q] += pf[q + 2] * d), (pf[q + 1] = min(G - 0.35 * pf[q + 4], pf[q + 1] + pf[q + 3] * d)), (pf[q + 4] += (pf[q + 6] * d) / (1 + 0.4 * age));\n  }\n  const fly = (a, g, keep) => a.filter((b) => ((b[3] += g * d), (b[0] += b[2] * d), (b[1] += b[3] * d), keep(b)));\n  // Pigeons circle the roof until the first charge, then scatter.\n  for (const b of P.bd)\n    if (b[6]) fly([b], -4, () => 1), (b[7] += 14 * d);\n    else (b[4] += 0.9 * d), (b[0] = CX + cos(b[4]) * b[5] * 1.3), (b[1] = G - P.BH - 10 + sin(b[4]) * b[5] * 0.35), (b[7] += 9 * d);\n}\n\nconst idx = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] - F[o + j]) * a;\n}\nfunction add(x, y, c, k, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += c[j] * k;\n}\nfunction glow(x, y, c, k, r) {\n  for (let j = -r; j \u003c= r; j++) for (let i = -r; i \u003c= r; i++) add(x + i, y + j, c, k * exp(-(i * i + j * j) / (0.3 * r * r)));\n}\nconst lit = (c, m = 1, s = 0.5, f = 0) => [0, 1, 2].map((j) => c[j] * (L[9 + j] * m + L[12 + j] * s + f));\nfunction line(x0, y0, x1, y1, c) {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c);\n}\nconst fq = (x, y) => P.FL[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)] * L[16];\n\nfunction back() {\n  const { BA, BU, BK, FL, NT, SKY } = P, aw = abs(P.w), sx = 0.6 - 0.3 * aw, sh = 0.85 * P.w, sy = 1 + 0.8 * aw, th = 0.5 + (0.5 - L[23] - 0.15 * aw) * 0.32;\n  const sunV = 280 * sm(0.12, 0.3, P.he) * (1 - sm(0.42, 0.58, P.he)), night = sm(0.78, 1, P.he), fld = L[16], lw = L[15];\n  for (let y = 0; y \u003c H; y++) for (let c = 0, t = min(1, y / 96); c \u003c 3; c++) SKY[y * 3 + c] = mix(mix(L[c], L[3 + c], sm(0, 0.6, t)), L[6 + c], sm(0.4, 1, t) ** 2);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = BK[i], fb = fld * FL[i], so = y * 3;\n    if (!k) {\n      // Round clouds when calm, slanting streaks in wind; sun, moon, stars.\n      const n = NT[((floor(y * sy + 40) & 127) \u003c\u003c 6) | (floor(x * sx + y * sh + P.co) & 63)], cd = max(0, sm(th - 0.06, th + 0.08, n) * (1 - sm(66, 96, y)) * 0.9), lb = cl(0.15 + y / 110 + (n - th) * 2, 0, 1);\n      let sg = sunV > 0 ? sunV * exp(-((x - 9) ** 2 + (y - 60) ** 2) / 12) : 0;\n      if (night > 0) sg += night * (((x - 52) ** 2 + (y - 20) ** 2 \u003c 6) * 220 + (y \u003c 70 && hash(x, y) > 0.985 ? 90 + 60 * sin(P.rt * 3 + x) : 0));\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(SKY[so + c], mix(L[20 + c], L[17 + c], lb), cd) + sg * (1 - 0.15 * c) + (56 + 5 * c) * fb;\n    } else if (k === 3 && BU[i] \u003c lw * 1.1) F.set(WIN, o);\n    else {\n      const m = k === 3 ? 0.25 : 1, f = (y \u003c 84 ? 0.35 : 0.5) * (x \u003c 15 || x > 55 ? 1 : 0.6), gl = k === 3 ? 0.2 : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = k === 1 ? mix(BA[o + c] * L[9 + c], SKY[so + c], 0.55 - y / 400) : SKY[so + c] * gl + BA[o + c] * m * (L[9 + c] + L[12 + c] * f + fb * 0.6);\n    }\n  }\n  // Light masts; chimney smoke bending with the wind.\n  for (const lx of [2, 61]) {\n    for (let y = 82; y \u003c G; y++) put(lx, y, [30, 30, 34]);\n    if (fld > 0.05) put(lx, 82, [255, 250, 230], min(1, fld * 1.5));\n  }\n  const sc = lit([176, 172, 168]), ph = (P.rt * 0.5) % 1;\n  for (let j = 0; j \u003c 12; j++) {\n    const s = j + ph, x = 57.5 + P.w * (s * 2.2 + s * s * 0.14) + sin(P.rt * 0.7 + j) * 0.6, y = 42 - s * 2.4 * (1 - 0.55 * aw), r = 1.4 + s * 0.42, a = 0.45 * (1 - s / 12.5) * min(1, s);\n    for (let v = -ceil(r); v \u003c= r; v++) for (let u = -ceil(r), q; u \u003c= r; u++) if ((q = 1 - (u * u + v * v) / (r * r)) > 0) put(x + u, y + v, sc, a * q);\n  }\n}\n\n// The tower as it stands or falls. During the rebuild it rises in scaffolding.\nfunction tower() {\n  const { fa: A, fk: K, fu: U, rs: RS, FL, SKY, T, BT, BH, fold: F0 } = P, tc = T - T_FALL;\n  if (T >= T_TL && T \u003c T_RISE) return;\n  const reb = T >= T_RISE, built = reb ? BH * sm(T_RISE, T_UP, T) : BT, strip = reb ? BT * (1 - sm(T_UP, CYC - 0.6, T)) : 0, lw = L[15], fld = L[16], tick = floor(T * 20);\n  const [d1, c2] = reb ? [0, 0] : fall(tc), l1 = reb ? 0 : P.dir * 3 * sm(0.1, 1.2, tc), l2 = reb ? 0 : -P.dir * 10 * sm(0.3, 1.6, tc);\n  const scaf = lit([184, 186, 178]), net = lit([64, 124, 104]), slab = lit([130, 126, 118]), mast = lit([120, 124, 132]);\n  for (let y = max(0, G - BT - 1); y \u003c G; y++) {\n    // The block above the fold or the one under it; both shear.\n    let b = G - 1 + d1 + c2 - y, xo, up = 1;\n    if (b >= F0 + c2 && b \u003c BT) xo = l1 + (l2 * (b - F0 - c2)) / (BT - F0);\n    else if ((b = G - 1 + d1 - y) >= 0 && b \u003c F0) (xo = (l1 * b) / F0), (up = 0);\n    else continue;\n    const bi = floor(b), xs = round(xo + P.shk), s = RS[bi], fl = s >= 0 ? P.fls[s] : 0, rag = tc > 0 && !reb && (G - y \u003c 3 || (up && c2 > 0 && b - F0 - c2 \u003c 2));\n    const top = sm(70, 25, y), hy = (y >> 1) * 3, f2 = rag ? 0.55 : 1;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = bi * TW + c, k = K[j], x = X0 + c + xs;\n      if (!k || x \u003c 0 || x >= W || (rag && hash(x * 13 + y, tick) \u003c 0.4)) continue;\n      const o = (y * W + x) * 3, sd = k === 4 || k === 5, fq = FL[y * W + x] * fld;\n      let col = MID;\n      if (reb && (bi \u003c strip || (k > 5 && strip > BH))) {\n        if (bi >= built || k > 5) continue;\n        col = c % 3 === 0 || bi % 3 === 0 ? scaf : hash(c >> 2, bi >> 3) \u003c 0.4 ? net : k === 3 ? slab : hash(c >> 1, s) \u003c 0.12 ? LAMP : DARK;\n      } else if (k === 2 || k === 5) {\n        const v = sd ? 0.65 : 1;\n        if (s >= 0 && P.bl[s]) col = HOLE;\n        else if (U[j] \u003c lw) for (let q = 0, u = (0.7 + 0.3 * sin(U[j] * 60)) * v; q \u003c 3; q++) MID[q] = WARM[q] * u;\n        else for (let q = 0; q \u003c 3; q++) MID[q] = (SKY[hy + q] * 0.45 + L[6 + q] * 0.12 + 76 * fq) * v;\n      } else if (k === 7) col = mast;\n      else if (k === 8) col = (P.rt * 1.5) % 1 \u003c 0.5 ? RED : HOLE;\n      else for (let q = 0, m = sd ? 0.6 : 1, sn = (sd ? 0.06 : 0.55) + top * 0.4; q \u003c 3; q++) MID[q] = CON[q] * A[j] * (L[9 + q] * m + L[12 + q] * sn + fq * 1.6);\n      (F[o] = col[0] * f2 + fl * 300), (F[o + 1] = col[1] * f2 + fl * 250), (F[o + 2] = col[2] * f2 + fl * 170);\n    }\n  }\n  // Each charge lights the air by its floor.\n  for (const s of P.chg) {\n    const fl = P.fls[s], yc = yS(s);\n    if (fl > 0.02) for (let y = -6; y \u003c= 6; y++) for (let x = X0 - 9, dx; x \u003c X0 + TW + 9; x++) if ((dx = x \u003c X0 ? X0 - x : max(0, x - X0 - TW + 1))) add(x, yc + y, [255, 196, 120], fl * exp(-(dx * dx) / 12 - (y * y) / 8));\n  }\n}\n\nfunction pileH(x) {\n  const u = (x - CX) / 22;\n  return abs(u) >= 1 || P.ph \u003c 0.3 ? 0 : P.ph * (1 - u * u) ** 0.8 * (0.8 + 0.4 * vn(x * 0.25, P.cyc * 7)) + (hash(x, P.cyc) - 0.5) * 1.6 * min(1, P.ph / 4);\n}\n// Rubble: broken slabs, gaps, rebar and bits of painted rooms.\nfunction pile() {\n  if (P.ph \u003c 0.3) return;\n  for (let x = CX - 22; x \u003c= CX + 22; x++) {\n    const hp = pileH(x), sn = cl(0.45 - 0.3 * (pileH(x + 1) - pileH(x - 1)), 0, 1);\n    for (let y = round(G - hp), y0 = y; y \u003c G + 3; y++) {\n      const cx = floor((x + (y >> 1) * 1.7) / 3), v = hash(cx, (y >> 1) + P.cyc * 97), c = v > 0.96 ? TILE : v \u003c 0.05 ? BRICK : v > 0.9 ? PALE : CON, o = (y * W + x) * 3, f = fq(x, y);\n      let m = (1 - 0.35 * sm(0, 12, y - y0)) * (c === CON ? (0.65 + 0.45 * v) * (y & 1 ? 0.86 : 1.18) : 1);\n      if (y === y0 && hash(x, 9) \u003c 0.3) m = -1;\n      else if (hash(cx * 7 + x, y * 3 + P.cyc) \u003c 0.1) m *= 0.22;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = m \u003c 0 ? RUST[j] * (L[9 + j] + 0.3) : c[j] * m * (L[9 + j] + L[12 + j] * sn + f);\n    }\n  }\n}\n\n// Two long-reach diggers climb the heap and pick it apart.\nfunction digger(x, f, ph) {\n  const g = round(G - max(0, pileH(x) - 1)), q = fq(x, g) + 0.32, Y = lit(YEL, 1, 0.6, q), Yd = Y.map((v) => v * 0.7), D = lit([70, 68, 66], 1, 0.5, q);\n  for (let i = -4; i \u003c= 4; i++) put(x + i, g - 1, D, i & 1 ? 1 : 0.4), put(x + i, g - 2, D);\n  for (let i = -5; i \u003c= 2; i++) for (let j = 3; j \u003c= 5; j++) put(x + i * f, g - j, i \u003c -3 ? Yd : Y);\n  for (let j = 6; j \u003c= 9; j++) for (let i = 1; i \u003c= 3; i++) put(x + i * f, g - j, i === 2 && j > 6 && j \u003c 9 ? GLASS : Y);\n  const a1 = 1 + 0.3 * sin(ph), bx = x + 2 * f, by = g - 5, ex = bx + f * cos(a1) * 11, ey = by - sin(a1) * 11, a2 = -1.2 + 0.5 * sin(ph + 1.3), kx = ex + f * cos(a2) * 8, ky = ey - sin(a2) * 8;\n  line(bx, by, ex, ey, Y), line(bx - f, by, ex - f, ey, Yd), line(ex, ey, kx, ky, Y);\n  for (let i = 0; i \u003c 2; i++) for (let j = 0; j \u003c 3; j++) put(kx + i * f, ky + j, D);\n  if ((P.rt * 1.6 + f * 0.25) % 1 \u003c 0.5) glow(x + 2 * f, g - 10, AMBER, 0.45, 2);\n}\nfunction machines() {\n  const T = P.T, out = sm(T_CLR - 1, T_CLR + 0.5, T);\n  if (T > T_EX && T \u003c T_CLR + 1)\n    for (const [x0, xa, f, j] of [[-10, CX - 13, 1, 0], [76, CX + 13, -1, 1]])\n      digger(round(mix(mix(x0, xa, sm(T_EX + j, T_EX + 2.5 + j, T)), x0, out)), f, T * (T > T_TL ? 9 : 2.2) + j * 2);\n}\n\n// Fence, mesh, barrier tape; siren lights on two posts.\nfunction fence() {\n  const mc = lit([150, 152, 158]), pc = lit([96, 98, 104]), tape = lit([250, 210, 40], 1, 0.5, 0.15);\n  for (let y = 102; y \u003c 118; y++) for (let x = 0; x \u003c W; x++) x % 12 === 5 || y === 102 ? put(x, y, pc) : ((x + y) % 3 === 0 || (x - y + 300) % 3 === 0) && put(x, y, mc, 0.28);\n  for (let x = 0; x \u003c W; x++) put(x, 107 + round(sin(x * 0.6 + P.rt * 5) * (0.3 + abs(P.w))), (x + 40) % 4 \u003c 2 ? tape : SIL);\n  for (const [x, s] of [[5, 0], [53, 0.5]]) {\n    const on = P.T \u003c T_FALL + 0.8 && (P.rt * 2.5 + s) % 1 \u003c 0.45;\n    put(x, 100, on ? [255, 190, 80] : [90, 50, 20]);\n    if (on) glow(x, 100, AMBER, 0.6, 5);\n  }\n}\n\n// Each puff is a grainy ball lit by sun and sky, laid over the last, so billows keep their edges.\nfunction dust() {\n  const { NT, pf, FL } = P, fld = L[16] * 1.8, gf = P.gfl * 0.6, [L9, L10, L11, L12, L13, L14] = L.slice(9, 15);\n  for (let p = 0; p \u003c P.np; p++) {\n    const q = p * PF, px = pf[q], py = pf[q + 1], r = pf[q + 4], age = pf[q + 8], life = pf[q + 9];\n    const a = pf[q + 7] * sm(0, 0.25, age) * (1 - sm(0.4 * life, life, age)) * (pf[q + 5] / r) ** 0.35;\n    if (a \u003c 0.01) continue;\n    const t = pf[q + 11], ox = (p * 23) & 63, oy = p * 41 + floor(age * 3), ir = 1 / r, pb = 0.85 + 0.3 * hash(p, P.cyc);\n    const [a0, a1, a2] = DUST0.map((v, c) => mix(v, DUST1[c], t) * pb);\n    for (let y = max(0, ceil(py - r)), y1 = min(H - 1, floor(py + r)); y \u003c= y1; y++) {\n      const dy = (y - py) * ir, dy2 = dy * dy, row = y * W, nr = ((y + oy) & 127) \u003c\u003c 6, sh = 0.45 + 0.55 * sm(G, 40, y), sk = 0.8 - 0.25 * dy;\n      for (let x = max(0, ceil(px - r)), x1 = min(W - 1, floor(px + r)); x \u003c= x1; x++) {\n        const dx = (x - px) * ir, d2 = dx * dx + dy2;\n        if (d2 >= 1) continue;\n        const n = NT[nr | ((x + ox) & 63)];\n        let e = 2 - d2 * (0.7 + 2.4 * n);\n        if (e \u003c= 0.02) continue;\n        if (e > 1) e = 1;\n        const k = min(0.95, a * e * e * (3 - 2 * e)), i = row + x, o = i * 3, l = -0.6 * dx - 0.5 * dy + 0.62 * sqrt(1 - d2);\n        const gr = 0.4 + 1.2 * n, sun = (0.25 + 0.8 * (l > 0 ? l : 0)) * sh * gr, sky = sk * (0.55 + 0.45 * gr), fl = FL[i] * fld + gf;\n        F[o] += (a0 * (L9 * sky + L12 * sun + fl) - F[o]) * k;\n        F[o + 1] += (a1 * (L10 * sky + L13 * sun + fl) - F[o + 1]) * k;\n        F[o + 2] += (a2 * (L11 * sky + L14 * sun + fl) - F[o + 2]) * k;\n      }\n    }\n  }\n}\n\n// The crowd: coats, marshals in hi-vis, phones up once the siren goes.\nfunction people() {\n  const T = P.T, ph = T > T_CH - 1.5 && T \u003c T_TL ? 0.6 : 0.12, vest = lit(COATS[4], 1, 0.5, 0.2), strip = lit([220, 220, 210], 1, 0.5, 0.3);\n  for (const [x, hy, w, r1, , cc] of P.cr) {\n    const hw = w >> 1, coat = lit(COATS[cc & 3], 0.5, 0.25, 0.1);\n    for (let y = hy + 3, e; y \u003c H; y++) for (let i = -hw + (e = y === hy + 3); i \u003c= hw - !(w & 1) - e; i++) put(x + i, y, cc > 3 && y > hy + 3 && y \u003c hy + 9 ? (y === hy + 6 ? strip : vest) : coat);\n    for (let j = 0; j \u003c 3; j++) for (let i = -1; i \u003c= 1; i++) if (j || !i) put(x + i, hy + j, SIL);\n    if (r1 \u003c ph) {\n      const sc = T > T_CH && T \u003c 11 && hash(floor(P.rt * 30), x) \u003c 0.015 ? [255, 255, 255] : PHONE;\n      for (let j = -2; j \u003c 3; j++) put(x + 2, hy + j, j \u003c 0 ? sc : SIL);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  P = params.s;\n  if (!P || !P.L || !P.fk) return;\n  (F = P.F), (L = P.L);\n  back();\n  tower();\n  pile();\n  machines();\n  fence();\n  const wl = lit([170, 190, 210], 1, 0.5, 0.2), bc = L[16] > 0.7 ? [140, 140, 150] : [24, 24, 30];\n  // The water cannon on the right roof wets the site.\n  for (let j = 0, t; j \u003c 60 && P.T > 1 && P.T \u003c T_TL; j++) (t = ((j * 0.618 + P.rt * 0.8) % 1) * 1.5), add(52 + (P.w * 6 - 15 - 6 * hash(j, 5)) * t, 86 - (10 + 5 * hash(j, 6)) * t + 13 * t * t, wl, 0.2);\n  dust();\n  for (const [x, y, , , , , , fp] of P.bd) for (let i = -1, up = sin(fp) > 0 ? -1 : 0; i \u003c 2; i++) put(x + i, y + (i ? up : 0), bc);\n  people();\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, cl(F[o], 0, 255) | 0, cl(F[o + 1], 0, 255) | 0, cl(F[o + 2], 0, 255) | 0);\n}\n","layer":{"id":"layer-implosion","type":"code","name":"implosion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Implosion\n// Family:  construction\n// Idea:    An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the explosive demolitions of 1960s concrete tower blocks\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1\n//\n// Knob 1: Light. Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust.\n// Knob 2: Speed. At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower.\n// Knob 3: Storeys. Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel.\n// Knob 4: Wind. Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it.\n// Buttons: K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = (a = 1) => Math.random() * a;\nconst side = () => (rnd() \u003c 0.5 ? -1 : 1);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every cx by cy cells.\nfunction vn(x, y, cx = 1e4, cy = 1e4) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (i, j) => hash(((i % cx) + cx) % cx, ((j % cy) + cy) % cy);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + h(xi + 1, yi + 1)) * su * sv;\n}\n\n// Ground row; the tower's front face from x 19 (22 wide) and side face (6).\nconst G = 110, X0 = 19, TW = 28, CX = 33;\n// One round at Speed 2, in seconds.\nconst T_CH = 2.4, T_FALL = 3, T_EX = 11, T_TL = 19, T_CLR = 25, T_RISE = 26.5, T_UP = 32.5, CYC = 36;\nconst MP = 240, PF = 12;\n// Dawn, morning, overcast, night: sky top, mid, horizon; ambient; sun; lit windows; floods; cloud lit, dark; cover.\nconst KEYS = [\n  [16, 30, 86, 52, 84, 156, 214, 146, 150, 0.4, 0.45, 0.66, 0.55, 0.32, 0.3, 0.34, 0.35, 236, 156, 156, 58, 60, 108, 0.5],\n  [46, 108, 206, 110, 164, 228, 236, 206, 160, 0.55, 0.58, 0.68, 1, 0.86, 0.62, 0.06, 0, 255, 244, 226, 150, 160, 190, 0.38],\n  [96, 102, 112, 136, 140, 146, 170, 170, 168, 0.66, 0.66, 0.68, 0.08, 0.08, 0.08, 0.12, 0.12, 190, 192, 196, 100, 104, 112, 0.9],\n  [3, 5, 18, 8, 14, 38, 34, 32, 58, 0.14, 0.15, 0.24, 0, 0, 0, 0.5, 1, 40, 38, 58, 12, 14, 28, 0.45],\n];\nconst TILE = [80, 110, 170], BRICK = [170, 84, 56], PALE = [190, 176, 150], RUST = [150, 80, 50], AMBER = [255, 150, 30];\nconst COATS = [[30, 34, 56], [56, 30, 36], [34, 46, 34], [50, 44, 34], [250, 120, 20]], SIL = [12, 12, 16], PHONE = [150, 180, 240];\nconst WIN = [204, 150, 83], GLASS = [60, 84, 110], MID = [0, 0, 0], LAMP = [200, 190, 150], DARK = [30, 28, 28], HOLE = [14, 12, 12], RED = [255, 40, 30];\nconst CON = [160, 154, 144], WARM = [255, 188, 104], YEL = [242, 182, 32], DUST0 = [150, 147, 142], DUST1 = [190, 164, 120];\nlet F, L, P;\n\nexport function setup(params) {\n  const f = (n) => new Float32Array(n);\n  P = params.s = { F: f(N * 3), NT: f(N), BA: f(N * 3), BU: f(N), BK: new Uint8Array(N), FL: f(N), SKY: f(H * 3), pf: f(MP * PF), np: 0, cr: [], T: 0, rt: 0, S: 0, cyc: 0, co: 0, w: 0 };\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.NT[i] = 0.5 * vn(x / 16, y / 16, 4, 8) + 0.3 * vn(x / 8, y / 8, 8, 16) + 0.2 * vn(x / 4, y / 4, 16, 32);\n    // Two floodlight masts by the fence aim up the tower.\n    for (const lx of [2, 61]) {\n      const dx = x - lx, dy = y - 82, dd = sqrt(dx * dx + dy * dy) + 0.5, ax = CX - lx, c = (dx * ax - dy * 32) / (dd * sqrt(ax * ax + 1024));\n      P.FL[i] += exp(-(1 - c) * 32) / (1 + dd / 40) + 0.9 * exp((-dd * dd) / 5);\n    }\n  }\n  scenery();\n  for (let x = 2; x \u003c 63; x += 3 + floor(rnd(3))) if (rnd() \u003c 0.85) P.cr.push([x, 111 + floor(rnd(4)), 4 + floor(rnd(3)), rnd(), rnd(), P.cr.length % 7 === 3 ? 4 : floor(rnd(4))]);\n  newRound();\n}\n\n// Street, site, two low blocks, far skyline and spire, chimney, a water cannon on a roof.\nfunction scenery() {\n  const top = [];\n  for (let x = 0; x \u003c W; ) for (let j = 0, w = 3 + rnd(6), t = 72 + rnd(16); j \u003c w && x \u003c W; j++) top[x++] = t;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, hh = hash(x, y), q = (x - 50) & 3;\n    let k = 2, c = 0, v = 1;\n    if (y > 118) (c = [58, 58, 64]), (v = 0.9 + 0.2 * hh);\n    else if (y === 118) c = [120, 118, 112];\n    else if (y >= G) (c = [118, 104, 86]), (v = 0.8 + 0.35 * hh);\n    else if (x > 50 && x \u003c 56 && y > 84 && y \u003c 90) c = abs(x - 53) + abs(y - 86.5) \u003c 1.6 ? [40, 44, 50] : [116, 120, 128];\n    else if (x \u003c 15 && y > 81) {\n      (c = y \u003c 84 ? [170, 160, 150] : [148, 92, 70]), (v = y \u003c 84 ? 1 : 0.88 + 0.2 * hash(x >> 1, y));\n      if (y > 85 && y \u003c 106 && x & 3 && (x & 3) \u003c 3 && (y - 86) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 48 && y > 89) {\n      (c = y \u003c 92 ? [190, 182, 170] : [176, 162, 138]), (v = 0.9 + 0.15 * hash(x, y >> 2));\n      if (y > 93 && y \u003c 108 && q && q \u003c 3 && (y - 94) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 55 && x \u003c 60 && y > 43) c = y === 44 ? [180, 172, 160] : y > 46 && y \u003c 54 && y % 5 > 1 && y % 5 \u003c 4 ? [176, 70, 56] : [150, 138, 124];\n    else if (y >= top[x] || (y > 57 && abs(x - 9) \u003c= (y - 58) / 6)) (k = 1), (c = [60, 66, 86]), (v = 0.85 + 0.25 * hash(x >> 2, 3));\n    else k = 0;\n    P.BK[i] = k;\n    if (c) for (let j = 0; j \u003c 3; j++) P.BA[i * 3 + j] = c[j] * v;\n  }\n}\n\n// The facade for S storeys: a kind per cell, each window's chance to be lit.\nfunction facade(S) {\n  const p = min(4, 100 / S), BH = round(S * p), BT = BH + 16, n = TW * BT, st = [], chg = [];\n  const A = new Float32Array(n), K = new Uint8Array(n), U = new Float32Array(n), RS = new Int16Array(BT).fill(-1);\n  for (let s = 0; s \u003c= S; s++) st.push(round(s * p));\n  for (let b = 0, s = 0; b \u003c BT; b++) {\n    while (s \u003c S - 1 && st[s + 1] \u003c= b) s++;\n    const r = b - st[s], wr = r === 1 || r === 2;\n    if (b \u003c BH) RS[b] = s;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = b * TW + c, bay = (c - 1) >> 2;\n      let k = 0, a = 0.92 + 0.14 * hash(s * 7 + bay, 11);\n      if (b \u003c BH) {\n        if (c \u003c 22) (k = !r ? 3 : c && c \u003c 21 && ((c - 1) & 3) \u003c 3 && wr ? 2 : 1), (U[j] = hash(s * 13 + bay, 3));\n        else (k = c > 23 && c \u003c 26 && wr ? 5 : 4), (a = c === 22 ? 1.15 : a), (U[j] = hash(s * 17 + c, 9));\n        if (!r) a *= 0.8;\n      } else if (b === BH) k = c \u003c 22 ? 6 : 0;\n      else if (b \u003c= BH + 4 && ((c > 4 && c \u003c 15) || (c > 15 && c \u003c 20 && b \u003c= BH + 3))) (k = 6), (a = 0.82);\n      else if (c === 10) k = b \u003c BT - 1 ? 7 : 8;\n      else if ((b === BH + 9 && c > 7 && c \u003c 13) || (b === BH + 7 && c === 11)) k = 7;\n      (K[j] = k), (A[j] = a);\n    }\n  }\n  for (let s = round(S * 0.78); s >= 2; s -= 3) chg.push(s);\n  Object.assign(P, { S, BH, BT, st, fa: A, fk: K, fu: U, rs: RS, chg: chg.concat([1, 0]), fold: st[round(S * 0.42)], fls: new Float32Array(S), bl: new Uint8Array(S) });\n}\n\nfunction newRound() {\n  Object.assign(P, { cyc: P.cyc + 1, dir: side(), fi: 0, b0: 0, b1: 0, pd1: 0, pc2: 0, a1: 0, a2: 0, bd: [] });\n  P.bl?.fill(0);\n  for (let j = 0; j \u003c 8; j++) P.bd.push([0, 0, 0, 0, rnd(6.28), 7 + rnd(10), 0, rnd(6)]);\n}\n\n// The lower floors give first; the upper block then folds into them.\nconst yS = (s) => G - 1 - (P.st[s] + P.st[s + 1]) / 2;\nconst fall = (tc) => (tc \u003c= 0 ? [0, 0] : [11 * tc * tc, tc > 0.5 ? 6 * (tc - 0.5) ** 2 : 0]);\nconst puff = (x, y, vx, vy, r, g, a, life, rise) => P.np \u003c MP && P.pf.set([x, y, vx, vy, r, r, g, a, 0, life, rise, rnd()], P.np++ * PF);\n// Dust from crushed floors: most climbs, some rolls out along the ground.\nfunction basePuff(kind) {\n  const x = X0 + rnd(TW), out = x - CX, roll = kind \u003c 2 && rnd() \u003c 0.4;\n  puff(x, G - 1 - rnd(4), out * 0.8 + rnd(12) - 6 + (roll ? Math.sign(out || 1) * (10 + rnd(10)) : 0), roll ? -1 - rnd(3) : -5 - rnd(12) - (kind > 1 ? 14 : 0), 3 + rnd(3), 2 + rnd(2.5), 1 + rnd(0.5), roll ? 12 + rnd(5) : 8.5 + rnd(5), roll ? 1 + rnd(3) : 8 + rnd(kind > 1 ? 30 : 24));\n}\n// A charge on storey s: its windows blow out and spit dust.\nfunction fire(s) {\n  const y = yS(s);\n  P.bl[s] = 1;\n  for (let n = 0; n \u003c 10; n++) {\n    const sd = n & 1 ? 1 : -1, ex = sd \u003c 0 ? X0 - 1 : X0 + TW;\n    puff(n \u003c 4 ? ex : X0 + 2 + rnd(TW - 4), y + rnd(2) - 1, sd * (n \u003c 4 ? 10 + rnd(12) : rnd(3)), -rnd(), 1 + rnd(0.8), 1.2 + rnd(), 0.7, 1.6 + rnd(), 0.5);\n  }\n  if (P.fi === 1) for (const b of P.bd) (b[6] = 1), (b[2] = (b[0] - CX) * 2 + rnd(14) - 7 + P.w * 14), (b[3] = -8 - rnd(14));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  P = params.s;\n  const k = input.knobValues || [0, 2, 20, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), S = round(cl(k[2], 20, 30)), w = (P.w = cl(k[3], -1, 1));\n  if (S !== P.S) facade(S);\n  P.rt += rd;\n  if (input.btnPressed?.[0]) P.T \u003c T_CH - 0.7 ? (P.T = T_CH - 0.7) : P.T >= T_TL && (newRound(), (P.T = T_CH - 0.7));\n  if ((P.T += d) >= CYC) newRound(), (P.T -= CYC);\n  const T = P.T, tl = 0.85 * sm(T_TL, T_TL + 1.2, T) * (1 - sm(CYC - 2.5, CYC - 0.4, T)), tc = T - T_FALL, [d1, c2] = T \u003c T_TL ? fall(tc) : [0, 0], cons = min(P.BT, d1 + c2), phM = 10 + S * 0.6;\n  // Time-lapse: a day every 2 s, and the clouds race.\n  const u = (P.he = mix(cl(k[0], 0, 1), 0.5 - 0.5 * cos(PI * (T - T_TL)), tl)) * 3, i = min(2, floor(u));\n  P.L = KEYS[i].map((v, j) => mix(v, KEYS[i + 1][j], u - i));\n  P.co += (w * 2 + tl * (w \u003c 0 ? -24 : 24)) * d;\n\n  // Charges, top to bottom, then the shudder.\n  while (P.fi \u003c P.chg.length && T >= T_CH + P.fi * 0.09 && T \u003c T_TL) fire(P.chg[P.fi++]);\n  P.gfl = 0;\n  P.chg.forEach((s, n) => (P.gfl = max(P.gfl, (P.fls[s] = T >= T_CH + n * 0.09 ? exp(-(T - T_CH - n * 0.09) * 9) : 0))));\n  P.shk = T > T_CH && T \u003c T_FALL + 0.6 ? round((rnd() - 0.5) * 2.6 * (1 - sm(T_FALL, T_FALL + 0.6, T))) : 0;\n\n  // The fall: dust where floors are crushed, at the foot and the fold.\n  if (tc > 0 && T \u003c T_TL) {\n    if (!P.b0) for (let n = (P.b0 = 24); n--; ) basePuff(1);\n    const e1 = max(0, d1 - P.pd1), e2 = max(0, c2 - P.pc2);\n    if (d1 + c2 \u003c P.BT) (P.a1 += e1 * 1.1), (P.a2 += e2 * 0.35);\n    for (; P.a1 >= 1; P.a1--) basePuff(0);\n    for (let sd; P.a2 >= 1; P.a2--) (sd = side()), puff(CX + sd * (8 + rnd(8)), min(G - 2, G - 1 - P.fold + d1), sd * (8 + rnd(14)), -2 - rnd(6), 2 + rnd(1.5), 3 + rnd(3), 0.7, 8 + rnd(4), 4 + rnd(6));\n    if (!P.b1 && cons >= P.BT) for (let n = (P.b1 = 20); n--; ) basePuff(2);\n    (P.pd1 = d1), (P.pc2 = c2);\n  }\n  P.ph = T \u003c T_FALL ? 0 : T \u003c T_TL ? phM * sm(0, 1, cons / P.BT) : phM * (1 - sm(T_TL + 0.5, T_CLR - 0.5, T));\n\n  // Puffs rise, slow, swell and drift, faster aloft.\n  const pf = P.pf, ex = 1 - exp(-0.7 * d), ey = 1 - exp(-0.9 * d);\n  for (let p = 0, q, age; p \u003c P.np; p++) {\n    if ((age = pf[(q = p * PF) + 8] += d) > pf[q + 9]) {\n      if (p-- \u003c --P.np) pf.copyWithin(q, P.np * PF, P.np * PF + PF);\n      continue;\n    }\n    pf[q + 2] += (w * (3 + 9 * (1 - pf[q + 1] / H)) - pf[q + 2]) * ex;\n    pf[q + 3] += (-pf[q + 10] * exp(-age / 4) - pf[q + 3]) * ey;\n    (pf[q] += pf[q + 2] * d), (pf[q + 1] = min(G - 0.35 * pf[q + 4], pf[q + 1] + pf[q + 3] * d)), (pf[q + 4] += (pf[q + 6] * d) / (1 + 0.4 * age));\n  }\n  const fly = (a, g, keep) => a.filter((b) => ((b[3] += g * d), (b[0] += b[2] * d), (b[1] += b[3] * d), keep(b)));\n  // Pigeons circle the roof until the first charge, then scatter.\n  for (const b of P.bd)\n    if (b[6]) fly([b], -4, () => 1), (b[7] += 14 * d);\n    else (b[4] += 0.9 * d), (b[0] = CX + cos(b[4]) * b[5] * 1.3), (b[1] = G - P.BH - 10 + sin(b[4]) * b[5] * 0.35), (b[7] += 9 * d);\n}\n\nconst idx = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] - F[o + j]) * a;\n}\nfunction add(x, y, c, k, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += c[j] * k;\n}\nfunction glow(x, y, c, k, r) {\n  for (let j = -r; j \u003c= r; j++) for (let i = -r; i \u003c= r; i++) add(x + i, y + j, c, k * exp(-(i * i + j * j) / (0.3 * r * r)));\n}\nconst lit = (c, m = 1, s = 0.5, f = 0) => [0, 1, 2].map((j) => c[j] * (L[9 + j] * m + L[12 + j] * s + f));\nfunction line(x0, y0, x1, y1, c) {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c);\n}\nconst fq = (x, y) => P.FL[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)] * L[16];\n\nfunction back() {\n  const { BA, BU, BK, FL, NT, SKY } = P, aw = abs(P.w), sx = 0.6 - 0.3 * aw, sh = 0.85 * P.w, sy = 1 + 0.8 * aw, th = 0.5 + (0.5 - L[23] - 0.15 * aw) * 0.32;\n  const sunV = 280 * sm(0.12, 0.3, P.he) * (1 - sm(0.42, 0.58, P.he)), night = sm(0.78, 1, P.he), fld = L[16], lw = L[15];\n  for (let y = 0; y \u003c H; y++) for (let c = 0, t = min(1, y / 96); c \u003c 3; c++) SKY[y * 3 + c] = mix(mix(L[c], L[3 + c], sm(0, 0.6, t)), L[6 + c], sm(0.4, 1, t) ** 2);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = BK[i], fb = fld * FL[i], so = y * 3;\n    if (!k) {\n      // Round clouds when calm, slanting streaks in wind; sun, moon, stars.\n      const n = NT[((floor(y * sy + 40) & 127) \u003c\u003c 6) | (floor(x * sx + y * sh + P.co) & 63)], cd = max(0, sm(th - 0.06, th + 0.08, n) * (1 - sm(66, 96, y)) * 0.9), lb = cl(0.15 + y / 110 + (n - th) * 2, 0, 1);\n      let sg = sunV > 0 ? sunV * exp(-((x - 9) ** 2 + (y - 60) ** 2) / 12) : 0;\n      if (night > 0) sg += night * (((x - 52) ** 2 + (y - 20) ** 2 \u003c 6) * 220 + (y \u003c 70 && hash(x, y) > 0.985 ? 90 + 60 * sin(P.rt * 3 + x) : 0));\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(SKY[so + c], mix(L[20 + c], L[17 + c], lb), cd) + sg * (1 - 0.15 * c) + (56 + 5 * c) * fb;\n    } else if (k === 3 && BU[i] \u003c lw * 1.1) F.set(WIN, o);\n    else {\n      const m = k === 3 ? 0.25 : 1, f = (y \u003c 84 ? 0.35 : 0.5) * (x \u003c 15 || x > 55 ? 1 : 0.6), gl = k === 3 ? 0.2 : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = k === 1 ? mix(BA[o + c] * L[9 + c], SKY[so + c], 0.55 - y / 400) : SKY[so + c] * gl + BA[o + c] * m * (L[9 + c] + L[12 + c] * f + fb * 0.6);\n    }\n  }\n  // Light masts; chimney smoke bending with the wind.\n  for (const lx of [2, 61]) {\n    for (let y = 82; y \u003c G; y++) put(lx, y, [30, 30, 34]);\n    if (fld > 0.05) put(lx, 82, [255, 250, 230], min(1, fld * 1.5));\n  }\n  const sc = lit([176, 172, 168]), ph = (P.rt * 0.5) % 1;\n  for (let j = 0; j \u003c 12; j++) {\n    const s = j + ph, x = 57.5 + P.w * (s * 2.2 + s * s * 0.14) + sin(P.rt * 0.7 + j) * 0.6, y = 42 - s * 2.4 * (1 - 0.55 * aw), r = 1.4 + s * 0.42, a = 0.45 * (1 - s / 12.5) * min(1, s);\n    for (let v = -ceil(r); v \u003c= r; v++) for (let u = -ceil(r), q; u \u003c= r; u++) if ((q = 1 - (u * u + v * v) / (r * r)) > 0) put(x + u, y + v, sc, a * q);\n  }\n}\n\n// The tower as it stands or falls. During the rebuild it rises in scaffolding.\nfunction tower() {\n  const { fa: A, fk: K, fu: U, rs: RS, FL, SKY, T, BT, BH, fold: F0 } = P, tc = T - T_FALL;\n  if (T >= T_TL && T \u003c T_RISE) return;\n  const reb = T >= T_RISE, built = reb ? BH * sm(T_RISE, T_UP, T) : BT, strip = reb ? BT * (1 - sm(T_UP, CYC - 0.6, T)) : 0, lw = L[15], fld = L[16], tick = floor(T * 20);\n  const [d1, c2] = reb ? [0, 0] : fall(tc), l1 = reb ? 0 : P.dir * 3 * sm(0.1, 1.2, tc), l2 = reb ? 0 : -P.dir * 10 * sm(0.3, 1.6, tc);\n  const scaf = lit([184, 186, 178]), net = lit([64, 124, 104]), slab = lit([130, 126, 118]), mast = lit([120, 124, 132]);\n  for (let y = max(0, G - BT - 1); y \u003c G; y++) {\n    // The block above the fold or the one under it; both shear.\n    let b = G - 1 + d1 + c2 - y, xo, up = 1;\n    if (b >= F0 + c2 && b \u003c BT) xo = l1 + (l2 * (b - F0 - c2)) / (BT - F0);\n    else if ((b = G - 1 + d1 - y) >= 0 && b \u003c F0) (xo = (l1 * b) / F0), (up = 0);\n    else continue;\n    const bi = floor(b), xs = round(xo + P.shk), s = RS[bi], fl = s >= 0 ? P.fls[s] : 0, rag = tc > 0 && !reb && (G - y \u003c 3 || (up && c2 > 0 && b - F0 - c2 \u003c 2));\n    const top = sm(70, 25, y), hy = (y >> 1) * 3, f2 = rag ? 0.55 : 1;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = bi * TW + c, k = K[j], x = X0 + c + xs;\n      if (!k || x \u003c 0 || x >= W || (rag && hash(x * 13 + y, tick) \u003c 0.4)) continue;\n      const o = (y * W + x) * 3, sd = k === 4 || k === 5, fq = FL[y * W + x] * fld;\n      let col = MID;\n      if (reb && (bi \u003c strip || (k > 5 && strip > BH))) {\n        if (bi >= built || k > 5) continue;\n        col = c % 3 === 0 || bi % 3 === 0 ? scaf : hash(c >> 2, bi >> 3) \u003c 0.4 ? net : k === 3 ? slab : hash(c >> 1, s) \u003c 0.12 ? LAMP : DARK;\n      } else if (k === 2 || k === 5) {\n        const v = sd ? 0.65 : 1;\n        if (s >= 0 && P.bl[s]) col = HOLE;\n        else if (U[j] \u003c lw) for (let q = 0, u = (0.7 + 0.3 * sin(U[j] * 60)) * v; q \u003c 3; q++) MID[q] = WARM[q] * u;\n        else for (let q = 0; q \u003c 3; q++) MID[q] = (SKY[hy + q] * 0.45 + L[6 + q] * 0.12 + 76 * fq) * v;\n      } else if (k === 7) col = mast;\n      else if (k === 8) col = (P.rt * 1.5) % 1 \u003c 0.5 ? RED : HOLE;\n      else for (let q = 0, m = sd ? 0.6 : 1, sn = (sd ? 0.06 : 0.55) + top * 0.4; q \u003c 3; q++) MID[q] = CON[q] * A[j] * (L[9 + q] * m + L[12 + q] * sn + fq * 1.6);\n      (F[o] = col[0] * f2 + fl * 300), (F[o + 1] = col[1] * f2 + fl * 250), (F[o + 2] = col[2] * f2 + fl * 170);\n    }\n  }\n  // Each charge lights the air by its floor.\n  for (const s of P.chg) {\n    const fl = P.fls[s], yc = yS(s);\n    if (fl > 0.02) for (let y = -6; y \u003c= 6; y++) for (let x = X0 - 9, dx; x \u003c X0 + TW + 9; x++) if ((dx = x \u003c X0 ? X0 - x : max(0, x - X0 - TW + 1))) add(x, yc + y, [255, 196, 120], fl * exp(-(dx * dx) / 12 - (y * y) / 8));\n  }\n}\n\nfunction pileH(x) {\n  const u = (x - CX) / 22;\n  return abs(u) >= 1 || P.ph \u003c 0.3 ? 0 : P.ph * (1 - u * u) ** 0.8 * (0.8 + 0.4 * vn(x * 0.25, P.cyc * 7)) + (hash(x, P.cyc) - 0.5) * 1.6 * min(1, P.ph / 4);\n}\n// Rubble: broken slabs, gaps, rebar and bits of painted rooms.\nfunction pile() {\n  if (P.ph \u003c 0.3) return;\n  for (let x = CX - 22; x \u003c= CX + 22; x++) {\n    const hp = pileH(x), sn = cl(0.45 - 0.3 * (pileH(x + 1) - pileH(x - 1)), 0, 1);\n    for (let y = round(G - hp), y0 = y; y \u003c G + 3; y++) {\n      const cx = floor((x + (y >> 1) * 1.7) / 3), v = hash(cx, (y >> 1) + P.cyc * 97), c = v > 0.96 ? TILE : v \u003c 0.05 ? BRICK : v > 0.9 ? PALE : CON, o = (y * W + x) * 3, f = fq(x, y);\n      let m = (1 - 0.35 * sm(0, 12, y - y0)) * (c === CON ? (0.65 + 0.45 * v) * (y & 1 ? 0.86 : 1.18) : 1);\n      if (y === y0 && hash(x, 9) \u003c 0.3) m = -1;\n      else if (hash(cx * 7 + x, y * 3 + P.cyc) \u003c 0.1) m *= 0.22;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = m \u003c 0 ? RUST[j] * (L[9 + j] + 0.3) : c[j] * m * (L[9 + j] + L[12 + j] * sn + f);\n    }\n  }\n}\n\n// Two long-reach diggers climb the heap and pick it apart.\nfunction digger(x, f, ph) {\n  const g = round(G - max(0, pileH(x) - 1)), q = fq(x, g) + 0.32, Y = lit(YEL, 1, 0.6, q), Yd = Y.map((v) => v * 0.7), D = lit([70, 68, 66], 1, 0.5, q);\n  for (let i = -4; i \u003c= 4; i++) put(x + i, g - 1, D, i & 1 ? 1 : 0.4), put(x + i, g - 2, D);\n  for (let i = -5; i \u003c= 2; i++) for (let j = 3; j \u003c= 5; j++) put(x + i * f, g - j, i \u003c -3 ? Yd : Y);\n  for (let j = 6; j \u003c= 9; j++) for (let i = 1; i \u003c= 3; i++) put(x + i * f, g - j, i === 2 && j > 6 && j \u003c 9 ? GLASS : Y);\n  const a1 = 1 + 0.3 * sin(ph), bx = x + 2 * f, by = g - 5, ex = bx + f * cos(a1) * 11, ey = by - sin(a1) * 11, a2 = -1.2 + 0.5 * sin(ph + 1.3), kx = ex + f * cos(a2) * 8, ky = ey - sin(a2) * 8;\n  line(bx, by, ex, ey, Y), line(bx - f, by, ex - f, ey, Yd), line(ex, ey, kx, ky, Y);\n  for (let i = 0; i \u003c 2; i++) for (let j = 0; j \u003c 3; j++) put(kx + i * f, ky + j, D);\n  if ((P.rt * 1.6 + f * 0.25) % 1 \u003c 0.5) glow(x + 2 * f, g - 10, AMBER, 0.45, 2);\n}\nfunction machines() {\n  const T = P.T, out = sm(T_CLR - 1, T_CLR + 0.5, T);\n  if (T > T_EX && T \u003c T_CLR + 1)\n    for (const [x0, xa, f, j] of [[-10, CX - 13, 1, 0], [76, CX + 13, -1, 1]])\n      digger(round(mix(mix(x0, xa, sm(T_EX + j, T_EX + 2.5 + j, T)), x0, out)), f, T * (T > T_TL ? 9 : 2.2) + j * 2);\n}\n\n// Fence, mesh, barrier tape; siren lights on two posts.\nfunction fence() {\n  const mc = lit([150, 152, 158]), pc = lit([96, 98, 104]), tape = lit([250, 210, 40], 1, 0.5, 0.15);\n  for (let y = 102; y \u003c 118; y++) for (let x = 0; x \u003c W; x++) x % 12 === 5 || y === 102 ? put(x, y, pc) : ((x + y) % 3 === 0 || (x - y + 300) % 3 === 0) && put(x, y, mc, 0.28);\n  for (let x = 0; x \u003c W; x++) put(x, 107 + round(sin(x * 0.6 + P.rt * 5) * (0.3 + abs(P.w))), (x + 40) % 4 \u003c 2 ? tape : SIL);\n  for (const [x, s] of [[5, 0], [53, 0.5]]) {\n    const on = P.T \u003c T_FALL + 0.8 && (P.rt * 2.5 + s) % 1 \u003c 0.45;\n    put(x, 100, on ? [255, 190, 80] : [90, 50, 20]);\n    if (on) glow(x, 100, AMBER, 0.6, 5);\n  }\n}\n\n// Each puff is a grainy ball lit by sun and sky, laid over the last, so billows keep their edges.\nfunction dust() {\n  const { NT, pf, FL } = P, fld = L[16] * 1.8, gf = P.gfl * 0.6, [L9, L10, L11, L12, L13, L14] = L.slice(9, 15);\n  for (let p = 0; p \u003c P.np; p++) {\n    const q = p * PF, px = pf[q], py = pf[q + 1], r = pf[q + 4], age = pf[q + 8], life = pf[q + 9];\n    const a = pf[q + 7] * sm(0, 0.25, age) * (1 - sm(0.4 * life, life, age)) * (pf[q + 5] / r) ** 0.35;\n    if (a \u003c 0.01) continue;\n    const t = pf[q + 11], ox = (p * 23) & 63, oy = p * 41 + floor(age * 3), ir = 1 / r, pb = 0.85 + 0.3 * hash(p, P.cyc);\n    const [a0, a1, a2] = DUST0.map((v, c) => mix(v, DUST1[c], t) * pb);\n    for (let y = max(0, ceil(py - r)), y1 = min(H - 1, floor(py + r)); y \u003c= y1; y++) {\n      const dy = (y - py) * ir, dy2 = dy * dy, row = y * W, nr = ((y + oy) & 127) \u003c\u003c 6, sh = 0.45 + 0.55 * sm(G, 40, y), sk = 0.8 - 0.25 * dy;\n      for (let x = max(0, ceil(px - r)), x1 = min(W - 1, floor(px + r)); x \u003c= x1; x++) {\n        const dx = (x - px) * ir, d2 = dx * dx + dy2;\n        if (d2 >= 1) continue;\n        const n = NT[nr | ((x + ox) & 63)];\n        let e = 2 - d2 * (0.7 + 2.4 * n);\n        if (e \u003c= 0.02) continue;\n        if (e > 1) e = 1;\n        const k = min(0.95, a * e * e * (3 - 2 * e)), i = row + x, o = i * 3, l = -0.6 * dx - 0.5 * dy + 0.62 * sqrt(1 - d2);\n        const gr = 0.4 + 1.2 * n, sun = (0.25 + 0.8 * (l > 0 ? l : 0)) * sh * gr, sky = sk * (0.55 + 0.45 * gr), fl = FL[i] * fld + gf;\n        F[o] += (a0 * (L9 * sky + L12 * sun + fl) - F[o]) * k;\n        F[o + 1] += (a1 * (L10 * sky + L13 * sun + fl) - F[o + 1]) * k;\n        F[o + 2] += (a2 * (L11 * sky + L14 * sun + fl) - F[o + 2]) * k;\n      }\n    }\n  }\n}\n\n// The crowd: coats, marshals in hi-vis, phones up once the siren goes.\nfunction people() {\n  const T = P.T, ph = T > T_CH - 1.5 && T \u003c T_TL ? 0.6 : 0.12, vest = lit(COATS[4], 1, 0.5, 0.2), strip = lit([220, 220, 210], 1, 0.5, 0.3);\n  for (const [x, hy, w, r1, , cc] of P.cr) {\n    const hw = w >> 1, coat = lit(COATS[cc & 3], 0.5, 0.25, 0.1);\n    for (let y = hy + 3, e; y \u003c H; y++) for (let i = -hw + (e = y === hy + 3); i \u003c= hw - !(w & 1) - e; i++) put(x + i, y, cc > 3 && y > hy + 3 && y \u003c hy + 9 ? (y === hy + 6 ? strip : vest) : coat);\n    for (let j = 0; j \u003c 3; j++) for (let i = -1; i \u003c= 1; i++) if (j || !i) put(x + i, hy + j, SIL);\n    if (r1 \u003c ph) {\n      const sc = T > T_CH && T \u003c 11 && hash(floor(P.rt * 30), x) \u003c 0.015 ? [255, 255, 255] : PHONE;\n      for (let j = -2; j \u003c 3; j++) put(x + 2, hy + j, j \u003c 0 ? sc : SIL);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  P = params.s;\n  if (!P || !P.L || !P.fk) return;\n  (F = P.F), (L = P.L);\n  back();\n  tower();\n  pile();\n  machines();\n  fence();\n  const wl = lit([170, 190, 210], 1, 0.5, 0.2), bc = L[16] > 0.7 ? [140, 140, 150] : [24, 24, 30];\n  // The water cannon on the right roof wets the site.\n  for (let j = 0, t; j \u003c 60 && P.T > 1 && P.T \u003c T_TL; j++) (t = ((j * 0.618 + P.rt * 0.8) % 1) * 1.5), add(52 + (P.w * 6 - 15 - 6 * hash(j, 5)) * t, 86 - (10 + 5 * hash(j, 6)) * t + 13 * t * t, wl, 0.2);\n  dust();\n  for (const [x, y, , , , , , fp] of P.bd) for (let i = -1, up = sin(fp) > 0 ? -1 : 0; i \u003c 2; i++) put(x + i, y + (i ? up : 0), bc);\n  people();\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, cl(F[o], 0, 255) | 0, cl(F[o + 1], 0, 255) | 0, cl(F[o + 2], 0, 255) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower."},{"name":"Storeys","min":20,"max":30,"about":"Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel."},{"name":"Wind","min":-1,"max":1,"about":"Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it."}],"start":[0,2,20,0.06],"measures":{"motion":0.3241,"detail":0.034,"edges":0.2245,"complexity":1.918,"coverage":0.9298,"colour":0.1876,"drift":0.0773},"knobResponse":[0.3233,0.0558,0.0577,0.0486]},{"slug":"incense","title":"Incense","family":"noise","round":15,"note":"향 연기가 실처럼 곧게 오르다 몇 줄 위에서 흔들리고, 곧 소용돌이로 흩어져 위로 퍼져요. 돌탑 위 역류 향꽂이에서는 무거운 연기가 돌을 타고 흘러내려 접시에 고여요.","idea":"A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.","buttons":"K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.","code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-incense","type":"code","name":"incense","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10."},{"name":"Sticks","min":1,"max":3,"about":"One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner."},{"name":"Breeze","min":-1,"max":1,"about":"A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish."}],"start":[0,2,1,0.06],"measures":{"motion":0.2464,"detail":0.0379,"edges":0.3304,"complexity":1.0761,"coverage":0.3311,"colour":0.0945,"drift":0.0442},"knobResponse":[0.0522,0.0616,0.0686,0.0518]},{"slug":"indras-pearls","title":"Indra's Pearls","family":"geometry","round":31,"note":"마스킷 조각의 클라인 군이 그리는 극한 집합이 두 흰 벽 사이로 128줄을 내려가요. 접한 원의 목걸이 사이로 진주가 세대마다 작아지고, μ 가 첨점 사이를 오가며 목이 조였다 풀리고 겹 소용돌이가 감겼다 풀려요. K1 을 누르면 진주가 세대 차례로 켜져요.","idea":"The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.","buttons":"K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.","code":"// ===== Patternflow pattern =====\n// Title:   Indra's Pearls\n// Family:  geometry\n// Idea:    The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: limit set of a Kleinian group (Henri Poincaré, 1883), the Maskit slice as drawn in Indra's Pearls (David Mumford, Caroline Series and David Wright, 2002), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal.\n// Knob 2: Speed. At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower.\n// Knob 3: Shape. Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall.\n// Knob 4: Zoom. Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past.\n// Buttons: K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Cusps of the Maskit slice, mu = Re + i Im, from the cusp 0/1 at 2i to 1/2.\n// Each is the root of tr W_p/q(mu) = 2 with the largest imaginary part,\n// found by the Farey recursion on traces (tr a = -i mu, tr b = 2,\n// tr ab = -i mu - 2i). Between two of them the slice's edge dips well below\n// the chord, so mu on the chord, or a little above, stays inside the slice.\nconst CUSP = [\n  [0, 2], [-0.0216, 1.9374], [-0.0363, 1.9134], [-0.0674, 1.8745], [-0.1427, 1.8103],\n  [-0.2201, 1.7667], [-0.3522, 1.7214], [-0.5812, 1.6939], [-1, 1.7321],\n];\nconst NC = CUSP.length - 1;\n\n// The strip 0 \u003c Im z \u003c Im mu spans this many of the 64 columns at Zoom 0,\n// which leaves three LEDs on each side for the dark half-planes. Im mu runs\n// from 1.69 to 2.06, so that is 28 to 34 LEDs per unit of the plane.\nconst SPAN = 58;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    scroll: 0, ph: 0, sw: 0, hue: 0, shape: 0, zoom: 0.06, wave: -1,\n    mr: 0, mi: 2, uz: SPAN / 2, cx: 0, cy: 1, buf: new Float32Array(N * 3), pal: new Float32Array(64 * 3), palHue: -1,\n  };\n}\n\n// mu for a place c on the cusp chain (0..NC, and negative for its mirror,\n// Re mu -> -Re mu, which the slice shares) lifted by l into the slice.\nfunction muAt(c, l, P) {\n  const m = c \u003c 0 ? -1 : 1;\n  c = min(abs(c), NC);\n  const i = min(floor(c), NC - 1), f = c - i;\n  P.mr = m * (CUSP[i][0] + (CUSP[i + 1][0] - CUSP[i][0]) * f);\n  P.mi = CUSP[i][1] + (CUSP[i + 1][1] - CUSP[i][1]) * f + l;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.shape = cl(k[2], 0, 1);\n  P.zoom = cl(k[3], 0, 1);\n  P.ph += d * sp * 0.05;\n  P.sw += d * sp * 0.03;\n  // The lift above the cusp chain breathes between 0, where the chain\n  // pinches into tangent discs, and 0.06, where the invariant component\n  // opens into one winding band, every ten seconds at Speed 2. Over about\n  // seventeen seconds mu also swings along the chain and back: at Shape 0\n  // from the cusp 1/10 through 2i to its mirror image, so the spirals at the\n  // necks wind up one way, unwind and wind up the other way.\n  const lift = 0.06 * (0.5 - 0.5 * Math.cos(P.ph * 2 * PI)) ** 1.5;\n  const c = P.shape * NC + Math.sin(P.sw * 2 * PI) * (1.9 - 1.1 * P.shape);\n  muAt(c, lift, P);\n  // LEDs per unit of the plane, and the slide: five LEDs a second at Speed 2\n  // at any zoom. The picture repeats every 2 along Re z.\n  P.uz = (SPAN / P.mi) * 4 ** P.zoom;\n  // The zoom closes in on a fixed point of a, (mu - sqrt(mu^2 + 4)) / 2, the\n  // one in the lower half of the strip. It lies on the limit set at a neck\n  // of the chain, where the small pearls spiral in; the slide carries it\n  // through the middle of the view once a period.\n  const ar = P.mr * P.mr - P.mi * P.mi + 4, ai = 2 * P.mr * P.mi, am = sqrt(ar * ar + ai * ai);\n  let sr = sqrt(max(0, (am + ar) / 2)), si = sqrt(max(0, (am - ar) / 2));\n  if (ai \u003c 0) si = -si;\n  if (si \u003c 0) {\n    sr = -sr;\n    si = -si;\n  }\n  const zs = (1 - 4 ** -P.zoom) / 0.75;\n  P.cx = ((P.mr - sr) / 2) * zs;\n  P.cy = P.mi / 2 + ((P.mi - si) / 2 - P.mi / 2) * zs;\n  P.scroll = (P.scroll + (d * sp * 2.5) / P.uz) % 2;\n  const b = input.btnPressed || [];\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 14 ? -1 : P.wave + d * 2.2;\n}\n\n// One point z = x + iy through Jos Leys's escape algorithm for the Maskit\n// group a(z) = mu + 1/z, b(z) = z + 2. Each step wraps z into the strip of b\n// (sheared along mu), turns it half round about mu/2 if it lies above the\n// separation line (that half turn maps the limit set onto itself and swaps a\n// with its inverse), then applies a. It stops when z leaves the strip\n// 0 \u003c Im z \u003c Im mu (it was in a pearl, a disc that some word of the group\n// sends onto a half-plane), or falls into a 2-cycle (it is in the invariant\n// component, or in one of the discs it pinches into at a cusp). OUT holds\n// the kind, the step count and a distance to the limit set in plane units.\nconst OUT = new Float64Array(3);\n// 1 - e^-v in steps of 1/32 up to v = 12, for the separation line.\nconst SEP = new Float64Array(385);\nfor (let j = 0; j \u003c 385; j++) SEP[j] = 1 - exp(-j / 32);\nfunction trace(x, y, mr, t, maxIt) {\n  if (y \u003c 0 || y > t) {\n    OUT[0] = 0;\n    OUT[1] = 0;\n    OUT[2] = y \u003c 0 ? -y : y - t;\n    return;\n  }\n  const sh = mr / t, f = mr > 0 ? -1 : mr \u003c 0 ? 1 : 0, lean = (f * (2 * t - 1.95)) / 4, kk = 7.2 - (1.95 - t) * 15, hm = mr / 2, ht = t / 2, al = abs(lean);\n  let lx = x + 9, ly = y, llx = x - 9, lly = y, der = 1;\n  for (let i = 0; i \u003c maxIt; i++) {\n    const s = x - sh * y;\n    if (s >= 1 || s \u003c -1) x -= 2 * floor((s + 1) * 0.5);\n    const u = x - hm;\n    let up = y >= ht + al;\n    if (!up && y >= ht - al) {\n      const v = kk * (u > 0 ? u : -u) * 32;\n      let sep = 1;\n      if (v \u003c 383) {\n        const j = v | 0;\n        sep = SEP[j] + (SEP[j + 1] - SEP[j]) * (v - j);\n      }\n      up = y >= ht + (u > 0 ? lean : -lean) * sep;\n    }\n    if (up) {\n      x = mr - x;\n      y = t - y;\n    }\n    const r = 1 / (x * x + y * y);\n    der *= r;\n    x = mr + x * r;\n    y = t - y * r;\n    if (y \u003c 0 || y > t) {\n      OUT[0] = 1;\n      OUT[1] = i + 1;\n      OUT[2] = (y \u003c 0 ? -y : y - t) / der;\n      return;\n    }\n    const ex = x - llx, ey = y - lly;\n    if (ex * ex + ey * ey \u003c 1e-8) {\n      // How far the cycling point lies from the nearest limit set close to\n      // the fundamental domain: the two walls and the pearls a^-1(H-) and\n      // a^2(H-) that touch them at 0 and mu. Divided by the stretch of the\n      // word that brought it there, that is the distance back where it\n      // started, to first order.\n      let s2 = x - sh * y;\n      s2 -= 2 * floor((s2 + 1) / 2);\n      x = s2 + sh * y;\n      const rr = 0.5 / t, dt2 = t - rr;\n      let dd = min(y, t - y);\n      dd = min(dd, sqrt(x * x + (y - rr) * (y - rr)) - rr, sqrt((x - mr) * (x - mr) + (y - dt2) * (y - dt2)) - rr);\n      OUT[0] = 2;\n      OUT[1] = i + 1;\n      OUT[2] = max(0, dd) / der;\n      return;\n    }\n    llx = lx;\n    lly = ly;\n    lx = x;\n    ly = y;\n  }\n  OUT[0] = 3;\n  OUT[1] = maxIt;\n  OUT[2] = 0;\n}\n\n// Colours: 0..31 the invariant component by step count, 32..63 the pearls\n// by generation.\nfunction palette(P) {\n  const pal = P.pal, h = P.hue + 0.6;\n  for (let i = 0; i \u003c 32; i++) {\n    const u = i / 31;\n    // A dark orange or olive reads as brown, so the discs lift their light\n    // where the hue passes through them and turn gold instead.\n    let hh = h + 0.07 * u * u;\n    hh -= floor(hh);\n    const lift = max(0, 1 - abs(hh - 0.1) / 0.16);\n    hsv(hh, 0.85 - 0.3 * u * u, 0.2 + 0.5 * u * u + 0.5 * lift * (1 - u * u), pal, i * 3);\n    // Generation 1 teal, then cyan, sky, lavender and pink, paler as they\n    // shrink.\n    const g = min(i, 6) / 6;\n    hsv(h - 0.12 + 0.36 * g, 0.72 - 0.32 * g, 0.72 + 0.24 * g, pal, (32 + i) * 3);\n  }\n  P.palHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const buf = P.buf, pal = P.pal, mr = P.mr, t = P.mi;\n  const uz = P.uz, su = 1 / uz, maxIt = 40 + ((40 * P.zoom) | 0);\n  const y0 = P.cy - (W / 2) * su, x0 = P.cx - P.scroll - (H / 2) * su;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const x = x0 + (py + 0.5) * su;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      trace(x, y0 + (px + 0.5) * su, mr, t, maxIt);\n      const kind = OUT[0], n = OUT[1], de = OUT[2] * uz;\n      let r, g, b;\n      if (kind === 0) {\n        r = 0.02;\n        g = 0.02;\n        b = 0.05;\n      } else if (kind === 1) {\n        const o = (32 + min(n - 1, 31)) * 3;\n        // A pearl is a little darker at its rim, so neighbours part.\n        const v = 0.55 + 0.45 * min(1, de / 2.5);\n        r = pal[o] * v;\n        g = pal[o + 1] * v;\n        b = pal[o + 2] * v;\n        if (P.wave >= 0) {\n          const dw = P.wave - n, fl = exp(-dw * dw * 2) * 0.8;\n          r += (1 - r) * fl;\n          g += (1 - g) * fl;\n          b += (1 - b) * fl;\n        }\n      } else if (kind === 2) {\n        // The invariant component glows in from the limit set, about five\n        // LEDs deep, over a dark core.\n        const o = min(31, (31 * exp(-de / 5)) | 0) * 3;\n        r = pal[o];\n        g = pal[o + 1];\n        b = pal[o + 2];\n      } else {\n        r = 0.7;\n        g = 0.72;\n        b = 0.8;\n      }\n      // The limit set: a white line a LED or so wide wherever the distance\n      // to it is under a LED.\n      if (kind !== 3) {\n        const w = 0.92 * exp(-de * de * 2.4);\n        r += (0.92 - r) * w;\n        g += (0.94 - g) * w;\n        b += (1 - b) * w;\n      }\n      buf[p] = r * 255;\n      buf[p + 1] = g * 255;\n      buf[p + 2] = b * 255;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-indras-pearls","type":"code","name":"indras-pearls","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Indra's Pearls\n// Family:  geometry\n// Idea:    The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: limit set of a Kleinian group (Henri Poincaré, 1883), the Maskit slice as drawn in Indra's Pearls (David Mumford, Caroline Series and David Wright, 2002), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal.\n// Knob 2: Speed. At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower.\n// Knob 3: Shape. Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall.\n// Knob 4: Zoom. Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past.\n// Buttons: K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Cusps of the Maskit slice, mu = Re + i Im, from the cusp 0/1 at 2i to 1/2.\n// Each is the root of tr W_p/q(mu) = 2 with the largest imaginary part,\n// found by the Farey recursion on traces (tr a = -i mu, tr b = 2,\n// tr ab = -i mu - 2i). Between two of them the slice's edge dips well below\n// the chord, so mu on the chord, or a little above, stays inside the slice.\nconst CUSP = [\n  [0, 2], [-0.0216, 1.9374], [-0.0363, 1.9134], [-0.0674, 1.8745], [-0.1427, 1.8103],\n  [-0.2201, 1.7667], [-0.3522, 1.7214], [-0.5812, 1.6939], [-1, 1.7321],\n];\nconst NC = CUSP.length - 1;\n\n// The strip 0 \u003c Im z \u003c Im mu spans this many of the 64 columns at Zoom 0,\n// which leaves three LEDs on each side for the dark half-planes. Im mu runs\n// from 1.69 to 2.06, so that is 28 to 34 LEDs per unit of the plane.\nconst SPAN = 58;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    scroll: 0, ph: 0, sw: 0, hue: 0, shape: 0, zoom: 0.06, wave: -1,\n    mr: 0, mi: 2, uz: SPAN / 2, cx: 0, cy: 1, buf: new Float32Array(N * 3), pal: new Float32Array(64 * 3), palHue: -1,\n  };\n}\n\n// mu for a place c on the cusp chain (0..NC, and negative for its mirror,\n// Re mu -> -Re mu, which the slice shares) lifted by l into the slice.\nfunction muAt(c, l, P) {\n  const m = c \u003c 0 ? -1 : 1;\n  c = min(abs(c), NC);\n  const i = min(floor(c), NC - 1), f = c - i;\n  P.mr = m * (CUSP[i][0] + (CUSP[i + 1][0] - CUSP[i][0]) * f);\n  P.mi = CUSP[i][1] + (CUSP[i + 1][1] - CUSP[i][1]) * f + l;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.shape = cl(k[2], 0, 1);\n  P.zoom = cl(k[3], 0, 1);\n  P.ph += d * sp * 0.05;\n  P.sw += d * sp * 0.03;\n  // The lift above the cusp chain breathes between 0, where the chain\n  // pinches into tangent discs, and 0.06, where the invariant component\n  // opens into one winding band, every ten seconds at Speed 2. Over about\n  // seventeen seconds mu also swings along the chain and back: at Shape 0\n  // from the cusp 1/10 through 2i to its mirror image, so the spirals at the\n  // necks wind up one way, unwind and wind up the other way.\n  const lift = 0.06 * (0.5 - 0.5 * Math.cos(P.ph * 2 * PI)) ** 1.5;\n  const c = P.shape * NC + Math.sin(P.sw * 2 * PI) * (1.9 - 1.1 * P.shape);\n  muAt(c, lift, P);\n  // LEDs per unit of the plane, and the slide: five LEDs a second at Speed 2\n  // at any zoom. The picture repeats every 2 along Re z.\n  P.uz = (SPAN / P.mi) * 4 ** P.zoom;\n  // The zoom closes in on a fixed point of a, (mu - sqrt(mu^2 + 4)) / 2, the\n  // one in the lower half of the strip. It lies on the limit set at a neck\n  // of the chain, where the small pearls spiral in; the slide carries it\n  // through the middle of the view once a period.\n  const ar = P.mr * P.mr - P.mi * P.mi + 4, ai = 2 * P.mr * P.mi, am = sqrt(ar * ar + ai * ai);\n  let sr = sqrt(max(0, (am + ar) / 2)), si = sqrt(max(0, (am - ar) / 2));\n  if (ai \u003c 0) si = -si;\n  if (si \u003c 0) {\n    sr = -sr;\n    si = -si;\n  }\n  const zs = (1 - 4 ** -P.zoom) / 0.75;\n  P.cx = ((P.mr - sr) / 2) * zs;\n  P.cy = P.mi / 2 + ((P.mi - si) / 2 - P.mi / 2) * zs;\n  P.scroll = (P.scroll + (d * sp * 2.5) / P.uz) % 2;\n  const b = input.btnPressed || [];\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 14 ? -1 : P.wave + d * 2.2;\n}\n\n// One point z = x + iy through Jos Leys's escape algorithm for the Maskit\n// group a(z) = mu + 1/z, b(z) = z + 2. Each step wraps z into the strip of b\n// (sheared along mu), turns it half round about mu/2 if it lies above the\n// separation line (that half turn maps the limit set onto itself and swaps a\n// with its inverse), then applies a. It stops when z leaves the strip\n// 0 \u003c Im z \u003c Im mu (it was in a pearl, a disc that some word of the group\n// sends onto a half-plane), or falls into a 2-cycle (it is in the invariant\n// component, or in one of the discs it pinches into at a cusp). OUT holds\n// the kind, the step count and a distance to the limit set in plane units.\nconst OUT = new Float64Array(3);\n// 1 - e^-v in steps of 1/32 up to v = 12, for the separation line.\nconst SEP = new Float64Array(385);\nfor (let j = 0; j \u003c 385; j++) SEP[j] = 1 - exp(-j / 32);\nfunction trace(x, y, mr, t, maxIt) {\n  if (y \u003c 0 || y > t) {\n    OUT[0] = 0;\n    OUT[1] = 0;\n    OUT[2] = y \u003c 0 ? -y : y - t;\n    return;\n  }\n  const sh = mr / t, f = mr > 0 ? -1 : mr \u003c 0 ? 1 : 0, lean = (f * (2 * t - 1.95)) / 4, kk = 7.2 - (1.95 - t) * 15, hm = mr / 2, ht = t / 2, al = abs(lean);\n  let lx = x + 9, ly = y, llx = x - 9, lly = y, der = 1;\n  for (let i = 0; i \u003c maxIt; i++) {\n    const s = x - sh * y;\n    if (s >= 1 || s \u003c -1) x -= 2 * floor((s + 1) * 0.5);\n    const u = x - hm;\n    let up = y >= ht + al;\n    if (!up && y >= ht - al) {\n      const v = kk * (u > 0 ? u : -u) * 32;\n      let sep = 1;\n      if (v \u003c 383) {\n        const j = v | 0;\n        sep = SEP[j] + (SEP[j + 1] - SEP[j]) * (v - j);\n      }\n      up = y >= ht + (u > 0 ? lean : -lean) * sep;\n    }\n    if (up) {\n      x = mr - x;\n      y = t - y;\n    }\n    const r = 1 / (x * x + y * y);\n    der *= r;\n    x = mr + x * r;\n    y = t - y * r;\n    if (y \u003c 0 || y > t) {\n      OUT[0] = 1;\n      OUT[1] = i + 1;\n      OUT[2] = (y \u003c 0 ? -y : y - t) / der;\n      return;\n    }\n    const ex = x - llx, ey = y - lly;\n    if (ex * ex + ey * ey \u003c 1e-8) {\n      // How far the cycling point lies from the nearest limit set close to\n      // the fundamental domain: the two walls and the pearls a^-1(H-) and\n      // a^2(H-) that touch them at 0 and mu. Divided by the stretch of the\n      // word that brought it there, that is the distance back where it\n      // started, to first order.\n      let s2 = x - sh * y;\n      s2 -= 2 * floor((s2 + 1) / 2);\n      x = s2 + sh * y;\n      const rr = 0.5 / t, dt2 = t - rr;\n      let dd = min(y, t - y);\n      dd = min(dd, sqrt(x * x + (y - rr) * (y - rr)) - rr, sqrt((x - mr) * (x - mr) + (y - dt2) * (y - dt2)) - rr);\n      OUT[0] = 2;\n      OUT[1] = i + 1;\n      OUT[2] = max(0, dd) / der;\n      return;\n    }\n    llx = lx;\n    lly = ly;\n    lx = x;\n    ly = y;\n  }\n  OUT[0] = 3;\n  OUT[1] = maxIt;\n  OUT[2] = 0;\n}\n\n// Colours: 0..31 the invariant component by step count, 32..63 the pearls\n// by generation.\nfunction palette(P) {\n  const pal = P.pal, h = P.hue + 0.6;\n  for (let i = 0; i \u003c 32; i++) {\n    const u = i / 31;\n    // A dark orange or olive reads as brown, so the discs lift their light\n    // where the hue passes through them and turn gold instead.\n    let hh = h + 0.07 * u * u;\n    hh -= floor(hh);\n    const lift = max(0, 1 - abs(hh - 0.1) / 0.16);\n    hsv(hh, 0.85 - 0.3 * u * u, 0.2 + 0.5 * u * u + 0.5 * lift * (1 - u * u), pal, i * 3);\n    // Generation 1 teal, then cyan, sky, lavender and pink, paler as they\n    // shrink.\n    const g = min(i, 6) / 6;\n    hsv(h - 0.12 + 0.36 * g, 0.72 - 0.32 * g, 0.72 + 0.24 * g, pal, (32 + i) * 3);\n  }\n  P.palHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const buf = P.buf, pal = P.pal, mr = P.mr, t = P.mi;\n  const uz = P.uz, su = 1 / uz, maxIt = 40 + ((40 * P.zoom) | 0);\n  const y0 = P.cy - (W / 2) * su, x0 = P.cx - P.scroll - (H / 2) * su;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const x = x0 + (py + 0.5) * su;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      trace(x, y0 + (px + 0.5) * su, mr, t, maxIt);\n      const kind = OUT[0], n = OUT[1], de = OUT[2] * uz;\n      let r, g, b;\n      if (kind === 0) {\n        r = 0.02;\n        g = 0.02;\n        b = 0.05;\n      } else if (kind === 1) {\n        const o = (32 + min(n - 1, 31)) * 3;\n        // A pearl is a little darker at its rim, so neighbours part.\n        const v = 0.55 + 0.45 * min(1, de / 2.5);\n        r = pal[o] * v;\n        g = pal[o + 1] * v;\n        b = pal[o + 2] * v;\n        if (P.wave >= 0) {\n          const dw = P.wave - n, fl = exp(-dw * dw * 2) * 0.8;\n          r += (1 - r) * fl;\n          g += (1 - g) * fl;\n          b += (1 - b) * fl;\n        }\n      } else if (kind === 2) {\n        // The invariant component glows in from the limit set, about five\n        // LEDs deep, over a dark core.\n        const o = min(31, (31 * exp(-de / 5)) | 0) * 3;\n        r = pal[o];\n        g = pal[o + 1];\n        b = pal[o + 2];\n      } else {\n        r = 0.7;\n        g = 0.72;\n        b = 0.8;\n      }\n      // The limit set: a white line a LED or so wide wherever the distance\n      // to it is under a LED.\n      if (kind !== 3) {\n        const w = 0.92 * exp(-de * de * 2.4);\n        r += (0.92 - r) * w;\n        g += (0.94 - g) * w;\n        b += (1 - b) * w;\n      }\n      buf[p] = r * 255;\n      buf[p + 1] = g * 255;\n      buf[p + 2] = b * 255;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower."},{"name":"Shape","min":0,"max":1,"about":"Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall."},{"name":"Zoom","min":0,"max":1,"about":"Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past."}],"start":[0,2,0,0.06],"measures":{"motion":0.5032,"detail":0.058,"edges":0.429,"complexity":0.897,"coverage":1,"colour":0.18,"drift":0.2157},"knobResponse":[0.3262,0.2178,0.2586,0.2575]},{"slug":"infinity-series","title":"Infinity Series","family":"rhythm","round":38,"note":"페르 뇌르고르의 무한 수열이 네 줄 피아노 롤에 한 박에 1, 2, 4, 8음으로 떨어져 타격선에 닿아요. 박마다 네 줄이 함께 닿는데, 4음 줄은 1음 줄과 같은 음에, 2음과 8음 줄은 그 거울상에 닿아요. K3 은 한 박의 줄 수를 8 에서 40 으로 늘려 음을 길게 펴고, K4 는 수열의 더 먼 자리에서 시작해요.","idea":"Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Infinity Series\n// Family:  rhythm\n// Idea:    Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Per Nørgård's infinity series (1959), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1\n//\n// Knob 1: Hue. Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white.\n// Knob 2: Speed. The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start.\n// Knob 3: Beat. Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five.\n// Knob 4: Start. Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge.\n\nconst W = 64, H = 128;\n// Lanes: four, 16 columns each; pitches -7..7 on columns 0..14 of the lane,\n// pitch 0 on column 7, column 15 dark between lanes.\nconst LANES = 4, LW = 16, PMAX = 7, RATE = [1, 2, 4, 8];\n// The strike line: notes fall onto row SY and fade out below it.\nconst SY = 104;\n// Brightness of the held note on the beat behind the faster lanes.\nconst HOLD = 0.34;\nconst NA = 1 \u003c\u003c 16;\nconst { floor, min, max, abs, round, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The series: a(0) = 0, a(2n) = -a(n), a(2n + 1) = a(n) + 1.\nconst A = new Int8Array(NA);\nfor (let n = 1; n \u003c NA; n++) A[n] = n & 1 ? A[n >> 1] + 1 : -A[n >> 1];\nconst ser = (n) => A[((n % NA) + NA) % NA];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, beat: 0, start: 0, speed: 2, rpb: 8, hue: 0,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    up: [0, 0, 0], dn: [0, 0, 0], upOff: [0, 0, 0], dnOff: [0, 0, 0], upHold: [0, 0, 0], dnHold: [0, 0, 0], warm: [0, 0],\n  };\n}\n\nfunction startBeat(k) {\n  // Up to 0.06 note 0; above, beat 16 to 496 in steps of 16.\n  const u = cl(k, 0, 1);\n  return u \u003c= 0.06 ? 0 : 16 * max(1, round(((u - 0.06) / 0.94) * 31));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rpb = 8 * cl(round(cl(k[2], 8, 40) / 8), 1, 5);\n  const st = startBeat(k[3]);\n  // The roll opens with the start beat 1.5 beats above the strike line; a\n  // new Start jumps there.\n  if (!S.init || st !== S.start) {\n    S.start = st;\n    S.beat = st - 1.5;\n    S.init = true;\n  }\n  S.beat += d * S.speed;\n  // After 512 beats the roll goes back to its start, so the fastest lane\n  // reads no further than note 8 x 1008 = 8064, and no more than one note in\n  // 30 lies past seven steps from the middle.\n  if (S.beat > S.start + 512) S.beat -= 512 + 1.5;\n}\n\n// Adds light to one LED; the dark column between lanes stays dark.\nfunction add(S, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0 || (x & 15) === 15) return;\n  const p = y * W + x;\n  S.R[p] += c[0] * v;\n  S.G[p] += c[1] * v;\n  S.B[p] += c[2] * v;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { R, G, B, up, dn, upOff, dnOff, upHold, dnHold, warm } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The melody as it is, the melody upside down, and the notes between beats.\n  hsv(S.hue + 0.57, 0.8, 1, up);\n  hsv(S.hue + 0.93, 0.62, 1, dn);\n  // How far each colour is into orange or yellow, 0 to 1. Those are lifted\n  // toward white so they read amber or butter, not brown or olive, most of\n  // all in the dim held notes.\n  [up, dn].forEach((c, i) => {\n    const w = cl(2.5 * (min(c[0], c[1]) - c[2]), 0, 1);\n    warm[i] = w;\n    for (let j = 0; j \u003c 3; j++) c[j] = c[j] + (1 - c[j]) * 0.3 * w;\n  });\n  for (let j = 0; j \u003c 3; j++) {\n    // The notes between the beats: the lane's colour taken 55% toward white.\n    upOff[j] = 0.55 + 0.45 * up[j];\n    dnOff[j] = 0.55 + 0.45 * dn[j];\n    // The held notes: the colour itself, or up to 45% toward white and 1.6\n    // times as bright in orange and yellow.\n    upHold[j] = (up[j] + (1 - up[j]) * 0.45 * warm[0]) * HOLD * (1 + 0.6 * warm[0]);\n    dnHold[j] = (dn[j] + (1 - dn[j]) * 0.45 * warm[1]) * HOLD * (1 + 0.6 * warm[1]);\n  }\n  const T = S.beat, rpb = S.rpb, white = [1, 1, 1];\n\n  // Guides: each lane's pitch 0, the mirror line, and a line on every beat.\n  const grey = [0.55, 0.6, 0.75];\n  for (let l = 0; l \u003c LANES; l++) for (let y = 0; y \u003c H; y++) add(S, l * LW + PMAX, y, grey, 0.1);\n  const b0 = floor(T - (H - SY) / rpb) - 1, b1 = floor(T + SY / rpb) + 1;\n  for (let b = b0; b \u003c= b1; b++) {\n    const y = round(SY - (b - T) * rpb);\n    for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, y, grey, 0.13);\n  }\n\n  for (let l = 0; l \u003c LANES; l++) {\n    const s = RATE[l], x0 = l * LW, len = rpb / s;\n    // Notes on the beat in this lane play +a(m) (rates 1, 4) or -a(m) (2, 8).\n    const onC = l & 1 ? dn : up, offC = l & 1 ? dnOff : upOff, holdC = l & 1 ? dnHold : upHold, lw = warm[l & 1];\n    // Behind the lane's own notes, each note on the beat is held dim for the\n    // whole beat: the series read at the lane's step, which lands on lane\n    // 1's note in the lanes of 4 and on its mirror image in the lanes of 2\n    // and 8.\n    if (s > 1)\n      for (let m = max(0, b0); m \u003c= b1; m++) {\n        const a = ser(s * m), px = x0 + PMAX + cl(a, -PMAX, PMAX), yb = SY - (m - T) * rpb;\n        const ye = round(yb);\n        for (let y = ye - rpb + 1; y \u003c ye; y++) {\n          if (y \u003c 0 || y >= H) continue;\n          const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n          add(S, px, y, holdC, fade);\n          add(S, px - 1, y, holdC, 0.75 * fade);\n          add(S, px + 1, y, holdC, 0.75 * fade);\n        }\n      }\n    const n0 = floor((T - (H - SY) / rpb) * s) - 1, n1 = floor((T + SY / rpb) * s) + 1;\n    for (let n = max(0, n0); n \u003c= n1; n++) {\n      const a = ser(n), px = x0 + PMAX + cl(a, -PMAX, PMAX), on = n % s === 0;\n      // Rows the note covers: its onset at the bottom, the next onset at the top.\n      const yb = SY - (n / s - T) * rpb, yt = yb - len;\n      const gap = len >= 3 ? 1 : 0;\n      const c = on ? onC : offC, core = on ? 0.95 : 0.42 * (1 + 0.4 * lw), side = on ? 0.7 : 0.2 * (1 + 0.4 * lw);\n      const clip = abs(a) > PMAX ? 0.55 : 1;\n      // How long since this note struck, in beats: a flash that dies in about\n      // a sixth of a beat, longer for a downbeat.\n      const age = T - n / s, flash = age >= 0 && age \u003c 1 ? exp(-age * (on ? 9 : 16)) : 0;\n      // Rows are rounded at both ends, so a note of one row never drops out.\n      const ye = round(yb);\n      for (let y = round(yt) + gap; y \u003c ye; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        // Below the strike line the note has sounded and fades out.\n        const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n        const lit = (y >= SY - 2 ? 1 + 1.6 * flash : 1) * fade * clip;\n        add(S, px, y, c, core * lit);\n        add(S, px - 1, y, c, side * lit);\n        add(S, px + 1, y, c, side * lit);\n        if (y >= SY - 2 && flash > 0) add(S, px, y, white, 0.5 * flash * fade);\n      }\n      // The struck key on the strike line, and its glow on either side.\n      if (flash > 0) {\n        for (let dx = -2; dx \u003c= 2; dx++) {\n          const g = (on ? 1 : 0.5) * flash * (dx === 0 ? 1 : abs(dx) === 1 ? 0.55 : 0.2);\n          add(S, px + dx, SY, white, 0.5 * g);\n          add(S, px + dx, SY, c, 0.8 * g);\n          add(S, px + dx, SY + 1, c, 0.35 * g);\n        }\n      }\n    }\n  }\n\n  // The strike line itself, a dim rule across each lane.\n  for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, SY, grey, 0.16);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","layer":{"id":"layer-infinity-series","type":"code","name":"infinity-series","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Infinity Series\n// Family:  rhythm\n// Idea:    Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Per Nørgård's infinity series (1959), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1\n//\n// Knob 1: Hue. Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white.\n// Knob 2: Speed. The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start.\n// Knob 3: Beat. Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five.\n// Knob 4: Start. Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge.\n\nconst W = 64, H = 128;\n// Lanes: four, 16 columns each; pitches -7..7 on columns 0..14 of the lane,\n// pitch 0 on column 7, column 15 dark between lanes.\nconst LANES = 4, LW = 16, PMAX = 7, RATE = [1, 2, 4, 8];\n// The strike line: notes fall onto row SY and fade out below it.\nconst SY = 104;\n// Brightness of the held note on the beat behind the faster lanes.\nconst HOLD = 0.34;\nconst NA = 1 \u003c\u003c 16;\nconst { floor, min, max, abs, round, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The series: a(0) = 0, a(2n) = -a(n), a(2n + 1) = a(n) + 1.\nconst A = new Int8Array(NA);\nfor (let n = 1; n \u003c NA; n++) A[n] = n & 1 ? A[n >> 1] + 1 : -A[n >> 1];\nconst ser = (n) => A[((n % NA) + NA) % NA];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, beat: 0, start: 0, speed: 2, rpb: 8, hue: 0,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    up: [0, 0, 0], dn: [0, 0, 0], upOff: [0, 0, 0], dnOff: [0, 0, 0], upHold: [0, 0, 0], dnHold: [0, 0, 0], warm: [0, 0],\n  };\n}\n\nfunction startBeat(k) {\n  // Up to 0.06 note 0; above, beat 16 to 496 in steps of 16.\n  const u = cl(k, 0, 1);\n  return u \u003c= 0.06 ? 0 : 16 * max(1, round(((u - 0.06) / 0.94) * 31));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rpb = 8 * cl(round(cl(k[2], 8, 40) / 8), 1, 5);\n  const st = startBeat(k[3]);\n  // The roll opens with the start beat 1.5 beats above the strike line; a\n  // new Start jumps there.\n  if (!S.init || st !== S.start) {\n    S.start = st;\n    S.beat = st - 1.5;\n    S.init = true;\n  }\n  S.beat += d * S.speed;\n  // After 512 beats the roll goes back to its start, so the fastest lane\n  // reads no further than note 8 x 1008 = 8064, and no more than one note in\n  // 30 lies past seven steps from the middle.\n  if (S.beat > S.start + 512) S.beat -= 512 + 1.5;\n}\n\n// Adds light to one LED; the dark column between lanes stays dark.\nfunction add(S, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0 || (x & 15) === 15) return;\n  const p = y * W + x;\n  S.R[p] += c[0] * v;\n  S.G[p] += c[1] * v;\n  S.B[p] += c[2] * v;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { R, G, B, up, dn, upOff, dnOff, upHold, dnHold, warm } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The melody as it is, the melody upside down, and the notes between beats.\n  hsv(S.hue + 0.57, 0.8, 1, up);\n  hsv(S.hue + 0.93, 0.62, 1, dn);\n  // How far each colour is into orange or yellow, 0 to 1. Those are lifted\n  // toward white so they read amber or butter, not brown or olive, most of\n  // all in the dim held notes.\n  [up, dn].forEach((c, i) => {\n    const w = cl(2.5 * (min(c[0], c[1]) - c[2]), 0, 1);\n    warm[i] = w;\n    for (let j = 0; j \u003c 3; j++) c[j] = c[j] + (1 - c[j]) * 0.3 * w;\n  });\n  for (let j = 0; j \u003c 3; j++) {\n    // The notes between the beats: the lane's colour taken 55% toward white.\n    upOff[j] = 0.55 + 0.45 * up[j];\n    dnOff[j] = 0.55 + 0.45 * dn[j];\n    // The held notes: the colour itself, or up to 45% toward white and 1.6\n    // times as bright in orange and yellow.\n    upHold[j] = (up[j] + (1 - up[j]) * 0.45 * warm[0]) * HOLD * (1 + 0.6 * warm[0]);\n    dnHold[j] = (dn[j] + (1 - dn[j]) * 0.45 * warm[1]) * HOLD * (1 + 0.6 * warm[1]);\n  }\n  const T = S.beat, rpb = S.rpb, white = [1, 1, 1];\n\n  // Guides: each lane's pitch 0, the mirror line, and a line on every beat.\n  const grey = [0.55, 0.6, 0.75];\n  for (let l = 0; l \u003c LANES; l++) for (let y = 0; y \u003c H; y++) add(S, l * LW + PMAX, y, grey, 0.1);\n  const b0 = floor(T - (H - SY) / rpb) - 1, b1 = floor(T + SY / rpb) + 1;\n  for (let b = b0; b \u003c= b1; b++) {\n    const y = round(SY - (b - T) * rpb);\n    for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, y, grey, 0.13);\n  }\n\n  for (let l = 0; l \u003c LANES; l++) {\n    const s = RATE[l], x0 = l * LW, len = rpb / s;\n    // Notes on the beat in this lane play +a(m) (rates 1, 4) or -a(m) (2, 8).\n    const onC = l & 1 ? dn : up, offC = l & 1 ? dnOff : upOff, holdC = l & 1 ? dnHold : upHold, lw = warm[l & 1];\n    // Behind the lane's own notes, each note on the beat is held dim for the\n    // whole beat: the series read at the lane's step, which lands on lane\n    // 1's note in the lanes of 4 and on its mirror image in the lanes of 2\n    // and 8.\n    if (s > 1)\n      for (let m = max(0, b0); m \u003c= b1; m++) {\n        const a = ser(s * m), px = x0 + PMAX + cl(a, -PMAX, PMAX), yb = SY - (m - T) * rpb;\n        const ye = round(yb);\n        for (let y = ye - rpb + 1; y \u003c ye; y++) {\n          if (y \u003c 0 || y >= H) continue;\n          const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n          add(S, px, y, holdC, fade);\n          add(S, px - 1, y, holdC, 0.75 * fade);\n          add(S, px + 1, y, holdC, 0.75 * fade);\n        }\n      }\n    const n0 = floor((T - (H - SY) / rpb) * s) - 1, n1 = floor((T + SY / rpb) * s) + 1;\n    for (let n = max(0, n0); n \u003c= n1; n++) {\n      const a = ser(n), px = x0 + PMAX + cl(a, -PMAX, PMAX), on = n % s === 0;\n      // Rows the note covers: its onset at the bottom, the next onset at the top.\n      const yb = SY - (n / s - T) * rpb, yt = yb - len;\n      const gap = len >= 3 ? 1 : 0;\n      const c = on ? onC : offC, core = on ? 0.95 : 0.42 * (1 + 0.4 * lw), side = on ? 0.7 : 0.2 * (1 + 0.4 * lw);\n      const clip = abs(a) > PMAX ? 0.55 : 1;\n      // How long since this note struck, in beats: a flash that dies in about\n      // a sixth of a beat, longer for a downbeat.\n      const age = T - n / s, flash = age >= 0 && age \u003c 1 ? exp(-age * (on ? 9 : 16)) : 0;\n      // Rows are rounded at both ends, so a note of one row never drops out.\n      const ye = round(yb);\n      for (let y = round(yt) + gap; y \u003c ye; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        // Below the strike line the note has sounded and fades out.\n        const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n        const lit = (y >= SY - 2 ? 1 + 1.6 * flash : 1) * fade * clip;\n        add(S, px, y, c, core * lit);\n        add(S, px - 1, y, c, side * lit);\n        add(S, px + 1, y, c, side * lit);\n        if (y >= SY - 2 && flash > 0) add(S, px, y, white, 0.5 * flash * fade);\n      }\n      // The struck key on the strike line, and its glow on either side.\n      if (flash > 0) {\n        for (let dx = -2; dx \u003c= 2; dx++) {\n          const g = (on ? 1 : 0.5) * flash * (dx === 0 ? 1 : abs(dx) === 1 ? 0.55 : 0.2);\n          add(S, px + dx, SY, white, 0.5 * g);\n          add(S, px + dx, SY, c, 0.8 * g);\n          add(S, px + dx, SY + 1, c, 0.35 * g);\n        }\n      }\n    }\n  }\n\n  // The strike line itself, a dim rule across each lane.\n  for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, SY, grey, 0.16);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white."},{"name":"Speed","min":0.2,"max":3,"about":"The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start."},{"name":"Beat","min":8,"max":40,"about":"Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five."},{"name":"Start","min":0,"max":1,"about":"Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge."}],"start":[0,2,8,0.06],"measures":{"motion":1.2502,"detail":0.083,"edges":0.4948,"complexity":0.2954,"coverage":0.3381,"colour":0.176,"drift":0.0581},"knobResponse":[0.067,0.12,0.1058,0.141]},{"slug":"invasion-percolation","title":"Invasion Percolation","family":"sim","round":32,"note":"바닥 가운데 한 칸으로 들어온 침입 유체가 경계에서 문턱이 가장 낮은 칸을 하나씩 차지하며 위로 자라요. 차지한 차례대로 청록에서 보라로 물들고, 맨 윗줄과 끊겨 갇힌 방어 유체는 장미색으로 굳어요. 맨 윗줄에 닿으면 입구에서 거기까지 가장 짧은 통로가 금색으로 켜지고 새 문턱으로 다시 시작해요.","idea":"Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.","buttons":"K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.","code":"// ===== Patternflow pattern =====\n// Title:   Invasion Percolation\n// Family:  sim\n// Idea:    Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: invasion percolation (David Wilkinson and Jorge Willemsen, 1983), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold.\n// Knob 2: Speed. How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst.\n// Knob 3: Gravity. Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100.\n// Knob 4: Grain. How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes.\n// Buttons: K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.\n\nconst W = 64, H = 128, N = W * H, OUT = N, BIG = 1 \u003c\u003c 30;\nconst { floor, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Threshold tilt from bottom to top at Gravity 1.\nconst GA = 0.7;\n// Seconds the finished cluster stands, its channel lighting in the first 0.6.\nconst HOLD = 1.1;\n// Site percolation threshold of the square lattice (Newman and Ziff, 2000).\n// Of the thresholds the invader takes, 0.4 to 2 in a hundred lie above it.\nconst PC = 0.592746;\nconst JUMP = 17;\nconst INLET = N - W + (W >> 1);\n\n// The normal distribution function, after Abramowitz and Stegun 7.1.26.\nfunction phi(z) {\n  const x = Math.abs(z) / Math.SQRT2, t = 1 / (1 + 0.3275911 * x);\n  const e = 1 - ((((1.061405429 * t - 1.453152027) * t + 1.421413741) * t - 0.284496736) * t + 0.254829592) * t * exp(-x * x);\n  return z \u003c 0 ? 0.5 - 0.5 * e : 0.5 + 0.5 * e;\n}\n\n// Three box blurs of radius 2, across and then down: close to a Gaussian of\n// 2.45 cells.\nfunction blur(a, b) {\n  for (let pass = 0; pass \u003c 6; pass++) {\n    const across = pass % 2 === 0;\n    for (let i = 0; i \u003c N; i++) {\n      const x = i % W, y = (i / W) | 0;\n      let s = 0, n = 0;\n      for (let d = -2; d \u003c= 2; d++) {\n        const xx = across ? x + d : x, yy = across ? y : y + d;\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) (s += a[yy * W + xx]), n++;\n      }\n      b[i] = s / n;\n    }\n    a.set(b);\n  }\n}\n\n// Thresholds: white Gaussian noise mixed with its own blur by Grain, then\n// sent through the normal distribution function, so every cell's threshold\n// is uniform on [0, 1) whatever the grain and only the correlation changes.\nfunction field(P) {\n  const { r, g0, g1 } = P, a = P.grain, b = Math.sqrt(1 - a * a);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const v = b * g0[i] + a * g1[i];\n    r[i] = v;\n    m += v;\n    q += v * v;\n  }\n  m /= N;\n  const sd = Math.sqrt(Math.max(q / N - m * m, 1e-12));\n  for (let i = 0; i \u003c N; i++) r[i] = phi((r[i] - m) / sd);\n}\n\nfunction lattice(P) {\n  const { g0, g1 } = P;\n  for (let i = 0; i \u003c N; i++) g0[i] = Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n  g1.set(g0);\n  blur(g1, P.re);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) (m += g1[i]), (q += g1[i] * g1[i]);\n  m /= N;\n  const sd = Math.sqrt(q / N - m * m);\n  for (let i = 0; i \u003c N; i++) g1[i] = (g1[i] - m) / sd;\n  P.grain = NaN;\n  P.k = 0;\n  P.K = 0;\n  P.budget = 0;\n  P.hold = -1;\n  P.ord.fill(-1);\n  P.trap.fill(BIG);\n  P.path.fill(-1);\n  P.pathLen = 0;\n  P.grav = NaN;\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N + 1), I = () => new Int32Array(N + 1);\n  params.s = {\n    r: F(), re: F(), g0: F(), g1: F(), stepT: F(), dur: F(), cr: F(), cg: F(), cb: F(), oldR: F(), oldG: F(), oldB: F(),\n    seq: I(), ord: I(), path: I(), prev: I(), trap: I(), heap: I(), tmp: I(), cnt: I(), par: I(), nxt: I(), tail: I(), size: I(), join: I(),\n    inv: new Uint8Array(N + 1), inH: new Uint8Array(N + 1), good: new Uint8Array(N + 1),\n    pathLen: 0, k: 0, K: 0, budget: 0, clock: 0, hold: -1, oldA: 0, grav: NaN, grain: NaN, hue: 0, speed: 2, flash: 0,\n  };\n  lattice(params.s);\n}\n\n// From the cells already invaded, runs invasion without trapping to the top\n// row, then walks the run backwards with union-find over the defending cells\n// to learn which steps trapping would have refused and when each pocket of\n// defender was cut off from the top row.\nfunction compute(P) {\n  const { r, re, seq, ord, trap, heap, tmp, cnt, par, nxt, tail, size, join, inv, inH, good } = P;\n  const from = P.k, g = P.grav * GA;\n  for (let i = 0; i \u003c N; i++) re[i] = r[i] - (g * (H - 1 - ((i / W) | 0))) / (H - 1);\n  inv.fill(0);\n  inH.fill(0);\n  for (let j = 0; j \u003c from; j++) inv[seq[j]] = 1;\n  for (let i = 0; i \u003c N; i++) if (!inv[i] && trap[i] > from) (trap[i] = BIG), (ord[i] = -1);\n  let n = 0;\n  const push = (i) => {\n    if (inv[i] || inH[i] || trap[i] \u003c= from) return;\n    inH[i] = 1;\n    const v = re[i];\n    let c = n++;\n    while (c > 0) {\n      const p = (c - 1) >> 1;\n      if (re[heap[p]] \u003c= v) break;\n      heap[c] = heap[p];\n      c = p;\n    }\n    heap[c] = i;\n  };\n  const pop = () => {\n    const top = heap[0], last = heap[--n], v = re[last];\n    let c = 0;\n    for (;;) {\n      let m = 2 * c + 1;\n      if (m >= n) break;\n      if (m + 1 \u003c n && re[heap[m + 1]] \u003c re[heap[m]]) m++;\n      if (re[heap[m]] >= v) break;\n      heap[c] = heap[m];\n      c = m;\n    }\n    heap[c] = last;\n    return top;\n  };\n  const around = (i, f) => {\n    const x = i % W;\n    if (x > 0) f(i - 1);\n    if (x \u003c W - 1) f(i + 1);\n    if (i >= W) f(i - W);\n    if (i \u003c N - W) f(i + W);\n  };\n  push(INLET);\n  for (let j = 0; j \u003c from; j++) around(seq[j], push);\n  let M = 0;\n  while (n > 0) {\n    const i = pop();\n    inH[i] = 0;\n    inv[i] = 2;\n    tmp[M++] = i;\n    if (i \u003c W) break;\n    around(i, push);\n  }\n\n  for (let i = 0; i \u003c= N; i++) (par[i] = i), (nxt[i] = -1), (tail[i] = i), (size[i] = 1), (join[i] = -1);\n  const find = (i) => {\n    while (par[i] !== i) (par[i] = par[par[i]]), (i = par[i]);\n    return i;\n  };\n  let t = M;\n  const unite = (a, b) => {\n    a = find(a);\n    b = find(b);\n    if (a === b) return;\n    if (b === OUT) (b = a), (a = OUT);\n    if (a === OUT) {\n      for (let m = b; m >= 0; m = nxt[m]) join[m] = t;\n      par[b] = OUT;\n      return;\n    }\n    if (size[a] \u003c size[b]) {\n      const s = a;\n      (a = b), (b = s);\n    }\n    par[b] = a;\n    size[a] += size[b];\n    nxt[tail[a]] = b;\n    tail[a] = tail[b];\n  };\n  // The defender joins across corners too: a diagonal gap between two\n  // invaded cells lets it through.\n  const around8 = (i, f) => {\n    const x = i % W, l = x > 0, rr = x \u003c W - 1;\n    if (l) f(i - 1);\n    if (rr) f(i + 1);\n    if (i >= W) {\n      f(i - W);\n      if (l) f(i - W - 1);\n      if (rr) f(i - W + 1);\n    }\n    if (i \u003c N - W) {\n      f(i + W);\n      if (l) f(i + W - 1);\n      if (rr) f(i + W + 1);\n    }\n  };\n  for (let i = 0; i \u003c N; i++) {\n    if (inv[i]) continue;\n    if (i \u003c W) unite(i, OUT);\n    around8(i, (j) => !inv[j] && unite(i, j));\n  }\n  for (t = M - 1; t >= 0; t--) {\n    const c = tmp[t];\n    inv[c] = 0;\n    if (c \u003c W) unite(c, OUT);\n    around8(c, (j) => !inv[j] && unite(c, j));\n    good[t] = find(c) === OUT ? 1 : 0;\n  }\n  let k = from;\n  for (t = 0; t \u003c M; t++) {\n    if (good[t]) (seq[k] = tmp[t]), (ord[tmp[t]] = k), k++;\n    cnt[t] = k;\n  }\n  P.K = k;\n  for (let i = 0; i \u003c N; i++) {\n    if (trap[i] !== BIG || ord[i] >= 0) continue;\n    const j = join[i];\n    if (j >= 0 && j \u003c M) trap[i] = cnt[j];\n  }\n  durations(P);\n}\n\nfunction durations(P) {\n  const { re, seq, dur } = P;\n  let s = 0;\n  for (let k = 0; k \u003c P.K; k++) {\n    dur[k] = exp(JUMP * Math.min(re[seq[k]] - PC, 0.03));\n    s += dur[k];\n  }\n  const m = P.K / Math.max(s, 1e-9);\n  for (let k = 0; k \u003c P.K; k++) dur[k] *= m;\n}\n\n// The channel the invader flows through once it breaks through: the shortest\n// path inside the cluster from the inlet to the cell that reached the top row,\n// found breadth first. Each cell on it keeps its place along the path.\nfunction channel(P) {\n  const { ord, prev, heap: queue, path, seq, K } = P;\n  prev.fill(-2);\n  const end = seq[K - 1];\n  let qh = 0, qt = 0;\n  queue[qt++] = INLET;\n  prev[INLET] = -1;\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i === end) break;\n    const x = i % W;\n    for (const j of [i - W, x > 0 ? i - 1 : -1, x \u003c W - 1 ? i + 1 : -1, i + W])\n      if (j >= 0 && j \u003c N && ord[j] >= 0 && ord[j] \u003c K && prev[j] === -2) (prev[j] = i), (queue[qt++] = j);\n  }\n  let n = 0;\n  for (let i = end; i >= 0; i = prev[i]) n++;\n  P.pathLen = n;\n  for (let i = end; i >= 0; i = prev[i]) path[i] = --n;\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  lattice(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const g = cl(kv[2], -1, 1), gr = cl(kv[3], 0, 1);\n  P.clock += d;\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  if (P.hold \u003c 0 && (g !== P.grav || gr !== P.grain)) {\n    if (gr !== P.grain) (P.grain = gr), field(P);\n    P.grav = g;\n    compute(P);\n  }\n  P.oldA *= exp(-d / 0.45);\n  P.flash *= exp(-d / 0.4);\n  if (P.hold \u003c 0) {\n    P.budget += (d * P.K * P.speed) / 11;\n    while (P.k \u003c P.K && P.budget >= P.dur[P.k]) (P.budget -= P.dur[P.k]), (P.stepT[P.k] = P.clock), P.k++;\n    if (P.k >= P.K) (P.hold = 0), (P.flash = 1), channel(P);\n  } else if ((P.hold += d) > HOLD) restart(P);\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { r, ord, trap, stepT, path, cr, cg, cb, oldR, oldG, oldB, k, K } = P;\n  const h0 = P.hue, now = P.clock, oa = P.oldA, fl = P.flash, hold = P.hold;\n  hsv(h0 + 0.13, 0.5, 1);\n  const gR = C[0], gG = C[1], gB = C[2];\n  for (let i = 0; i \u003c N; i++) {\n    const o = ord[i];\n    let R, G, B;\n    if (o >= 0 && o \u003c k) {\n      const f = o / K;\n      const age = now - stepT[o];\n      hsv(h0 + 0.45 + 0.28 * f, 0.8, 0.55 + 0.25 * f + 0.2 * fl);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-age / 0.3);\n      if (w > 0.003) (R += (1 - R) * w), (G += (1 - G) * w), (B += (0.95 - B) * w);\n      const j = path[i];\n      if (j >= 0) {\n        const u = cl(hold / 0.6 - j / P.pathLen, 0, 1);\n        if (u > 0) (R += (gR - R) * u), (G += (gG - G) * u), (B += (gB - B) * u);\n      }\n    } else if (trap[i] \u003c= k) {\n      hsv(h0 + 0.95, 0.6, 0.1 + 0.22 * (1 - r[i]));\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-(now - stepT[trap[i] - 1]) / 0.5);\n      if (w > 0.003) (R += (1 - R) * w * 0.6), (G += (0.6 - G) * w * 0.6), (B += (0.8 - B) * w * 0.6);\n    } else {\n      hsv(h0 + 0.08, 0.35, 0.035 + 0.1 * (1 - r[i]) ** 1.5);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    }\n    R *= 255;\n    G *= 255;\n    B *= 255;\n    if (oa > 0.01) (R = Math.max(R, oldR[i] * oa)), (G = Math.max(G, oldG[i] * oa)), (B = Math.max(B, oldB[i] * oa));\n    (cr[i] = R), (cg[i] = G), (cb[i] = B);\n    display.setPixel(i % W, (i / W) | 0, R, G, B);\n  }\n}\n","layer":{"id":"layer-invasion-percolation","type":"code","name":"invasion-percolation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Invasion Percolation\n// Family:  sim\n// Idea:    Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: invasion percolation (David Wilkinson and Jorge Willemsen, 1983), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold.\n// Knob 2: Speed. How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst.\n// Knob 3: Gravity. Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100.\n// Knob 4: Grain. How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes.\n// Buttons: K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.\n\nconst W = 64, H = 128, N = W * H, OUT = N, BIG = 1 \u003c\u003c 30;\nconst { floor, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Threshold tilt from bottom to top at Gravity 1.\nconst GA = 0.7;\n// Seconds the finished cluster stands, its channel lighting in the first 0.6.\nconst HOLD = 1.1;\n// Site percolation threshold of the square lattice (Newman and Ziff, 2000).\n// Of the thresholds the invader takes, 0.4 to 2 in a hundred lie above it.\nconst PC = 0.592746;\nconst JUMP = 17;\nconst INLET = N - W + (W >> 1);\n\n// The normal distribution function, after Abramowitz and Stegun 7.1.26.\nfunction phi(z) {\n  const x = Math.abs(z) / Math.SQRT2, t = 1 / (1 + 0.3275911 * x);\n  const e = 1 - ((((1.061405429 * t - 1.453152027) * t + 1.421413741) * t - 0.284496736) * t + 0.254829592) * t * exp(-x * x);\n  return z \u003c 0 ? 0.5 - 0.5 * e : 0.5 + 0.5 * e;\n}\n\n// Three box blurs of radius 2, across and then down: close to a Gaussian of\n// 2.45 cells.\nfunction blur(a, b) {\n  for (let pass = 0; pass \u003c 6; pass++) {\n    const across = pass % 2 === 0;\n    for (let i = 0; i \u003c N; i++) {\n      const x = i % W, y = (i / W) | 0;\n      let s = 0, n = 0;\n      for (let d = -2; d \u003c= 2; d++) {\n        const xx = across ? x + d : x, yy = across ? y : y + d;\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) (s += a[yy * W + xx]), n++;\n      }\n      b[i] = s / n;\n    }\n    a.set(b);\n  }\n}\n\n// Thresholds: white Gaussian noise mixed with its own blur by Grain, then\n// sent through the normal distribution function, so every cell's threshold\n// is uniform on [0, 1) whatever the grain and only the correlation changes.\nfunction field(P) {\n  const { r, g0, g1 } = P, a = P.grain, b = Math.sqrt(1 - a * a);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const v = b * g0[i] + a * g1[i];\n    r[i] = v;\n    m += v;\n    q += v * v;\n  }\n  m /= N;\n  const sd = Math.sqrt(Math.max(q / N - m * m, 1e-12));\n  for (let i = 0; i \u003c N; i++) r[i] = phi((r[i] - m) / sd);\n}\n\nfunction lattice(P) {\n  const { g0, g1 } = P;\n  for (let i = 0; i \u003c N; i++) g0[i] = Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n  g1.set(g0);\n  blur(g1, P.re);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) (m += g1[i]), (q += g1[i] * g1[i]);\n  m /= N;\n  const sd = Math.sqrt(q / N - m * m);\n  for (let i = 0; i \u003c N; i++) g1[i] = (g1[i] - m) / sd;\n  P.grain = NaN;\n  P.k = 0;\n  P.K = 0;\n  P.budget = 0;\n  P.hold = -1;\n  P.ord.fill(-1);\n  P.trap.fill(BIG);\n  P.path.fill(-1);\n  P.pathLen = 0;\n  P.grav = NaN;\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N + 1), I = () => new Int32Array(N + 1);\n  params.s = {\n    r: F(), re: F(), g0: F(), g1: F(), stepT: F(), dur: F(), cr: F(), cg: F(), cb: F(), oldR: F(), oldG: F(), oldB: F(),\n    seq: I(), ord: I(), path: I(), prev: I(), trap: I(), heap: I(), tmp: I(), cnt: I(), par: I(), nxt: I(), tail: I(), size: I(), join: I(),\n    inv: new Uint8Array(N + 1), inH: new Uint8Array(N + 1), good: new Uint8Array(N + 1),\n    pathLen: 0, k: 0, K: 0, budget: 0, clock: 0, hold: -1, oldA: 0, grav: NaN, grain: NaN, hue: 0, speed: 2, flash: 0,\n  };\n  lattice(params.s);\n}\n\n// From the cells already invaded, runs invasion without trapping to the top\n// row, then walks the run backwards with union-find over the defending cells\n// to learn which steps trapping would have refused and when each pocket of\n// defender was cut off from the top row.\nfunction compute(P) {\n  const { r, re, seq, ord, trap, heap, tmp, cnt, par, nxt, tail, size, join, inv, inH, good } = P;\n  const from = P.k, g = P.grav * GA;\n  for (let i = 0; i \u003c N; i++) re[i] = r[i] - (g * (H - 1 - ((i / W) | 0))) / (H - 1);\n  inv.fill(0);\n  inH.fill(0);\n  for (let j = 0; j \u003c from; j++) inv[seq[j]] = 1;\n  for (let i = 0; i \u003c N; i++) if (!inv[i] && trap[i] > from) (trap[i] = BIG), (ord[i] = -1);\n  let n = 0;\n  const push = (i) => {\n    if (inv[i] || inH[i] || trap[i] \u003c= from) return;\n    inH[i] = 1;\n    const v = re[i];\n    let c = n++;\n    while (c > 0) {\n      const p = (c - 1) >> 1;\n      if (re[heap[p]] \u003c= v) break;\n      heap[c] = heap[p];\n      c = p;\n    }\n    heap[c] = i;\n  };\n  const pop = () => {\n    const top = heap[0], last = heap[--n], v = re[last];\n    let c = 0;\n    for (;;) {\n      let m = 2 * c + 1;\n      if (m >= n) break;\n      if (m + 1 \u003c n && re[heap[m + 1]] \u003c re[heap[m]]) m++;\n      if (re[heap[m]] >= v) break;\n      heap[c] = heap[m];\n      c = m;\n    }\n    heap[c] = last;\n    return top;\n  };\n  const around = (i, f) => {\n    const x = i % W;\n    if (x > 0) f(i - 1);\n    if (x \u003c W - 1) f(i + 1);\n    if (i >= W) f(i - W);\n    if (i \u003c N - W) f(i + W);\n  };\n  push(INLET);\n  for (let j = 0; j \u003c from; j++) around(seq[j], push);\n  let M = 0;\n  while (n > 0) {\n    const i = pop();\n    inH[i] = 0;\n    inv[i] = 2;\n    tmp[M++] = i;\n    if (i \u003c W) break;\n    around(i, push);\n  }\n\n  for (let i = 0; i \u003c= N; i++) (par[i] = i), (nxt[i] = -1), (tail[i] = i), (size[i] = 1), (join[i] = -1);\n  const find = (i) => {\n    while (par[i] !== i) (par[i] = par[par[i]]), (i = par[i]);\n    return i;\n  };\n  let t = M;\n  const unite = (a, b) => {\n    a = find(a);\n    b = find(b);\n    if (a === b) return;\n    if (b === OUT) (b = a), (a = OUT);\n    if (a === OUT) {\n      for (let m = b; m >= 0; m = nxt[m]) join[m] = t;\n      par[b] = OUT;\n      return;\n    }\n    if (size[a] \u003c size[b]) {\n      const s = a;\n      (a = b), (b = s);\n    }\n    par[b] = a;\n    size[a] += size[b];\n    nxt[tail[a]] = b;\n    tail[a] = tail[b];\n  };\n  // The defender joins across corners too: a diagonal gap between two\n  // invaded cells lets it through.\n  const around8 = (i, f) => {\n    const x = i % W, l = x > 0, rr = x \u003c W - 1;\n    if (l) f(i - 1);\n    if (rr) f(i + 1);\n    if (i >= W) {\n      f(i - W);\n      if (l) f(i - W - 1);\n      if (rr) f(i - W + 1);\n    }\n    if (i \u003c N - W) {\n      f(i + W);\n      if (l) f(i + W - 1);\n      if (rr) f(i + W + 1);\n    }\n  };\n  for (let i = 0; i \u003c N; i++) {\n    if (inv[i]) continue;\n    if (i \u003c W) unite(i, OUT);\n    around8(i, (j) => !inv[j] && unite(i, j));\n  }\n  for (t = M - 1; t >= 0; t--) {\n    const c = tmp[t];\n    inv[c] = 0;\n    if (c \u003c W) unite(c, OUT);\n    around8(c, (j) => !inv[j] && unite(c, j));\n    good[t] = find(c) === OUT ? 1 : 0;\n  }\n  let k = from;\n  for (t = 0; t \u003c M; t++) {\n    if (good[t]) (seq[k] = tmp[t]), (ord[tmp[t]] = k), k++;\n    cnt[t] = k;\n  }\n  P.K = k;\n  for (let i = 0; i \u003c N; i++) {\n    if (trap[i] !== BIG || ord[i] >= 0) continue;\n    const j = join[i];\n    if (j >= 0 && j \u003c M) trap[i] = cnt[j];\n  }\n  durations(P);\n}\n\nfunction durations(P) {\n  const { re, seq, dur } = P;\n  let s = 0;\n  for (let k = 0; k \u003c P.K; k++) {\n    dur[k] = exp(JUMP * Math.min(re[seq[k]] - PC, 0.03));\n    s += dur[k];\n  }\n  const m = P.K / Math.max(s, 1e-9);\n  for (let k = 0; k \u003c P.K; k++) dur[k] *= m;\n}\n\n// The channel the invader flows through once it breaks through: the shortest\n// path inside the cluster from the inlet to the cell that reached the top row,\n// found breadth first. Each cell on it keeps its place along the path.\nfunction channel(P) {\n  const { ord, prev, heap: queue, path, seq, K } = P;\n  prev.fill(-2);\n  const end = seq[K - 1];\n  let qh = 0, qt = 0;\n  queue[qt++] = INLET;\n  prev[INLET] = -1;\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i === end) break;\n    const x = i % W;\n    for (const j of [i - W, x > 0 ? i - 1 : -1, x \u003c W - 1 ? i + 1 : -1, i + W])\n      if (j >= 0 && j \u003c N && ord[j] >= 0 && ord[j] \u003c K && prev[j] === -2) (prev[j] = i), (queue[qt++] = j);\n  }\n  let n = 0;\n  for (let i = end; i >= 0; i = prev[i]) n++;\n  P.pathLen = n;\n  for (let i = end; i >= 0; i = prev[i]) path[i] = --n;\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  lattice(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const g = cl(kv[2], -1, 1), gr = cl(kv[3], 0, 1);\n  P.clock += d;\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  if (P.hold \u003c 0 && (g !== P.grav || gr !== P.grain)) {\n    if (gr !== P.grain) (P.grain = gr), field(P);\n    P.grav = g;\n    compute(P);\n  }\n  P.oldA *= exp(-d / 0.45);\n  P.flash *= exp(-d / 0.4);\n  if (P.hold \u003c 0) {\n    P.budget += (d * P.K * P.speed) / 11;\n    while (P.k \u003c P.K && P.budget >= P.dur[P.k]) (P.budget -= P.dur[P.k]), (P.stepT[P.k] = P.clock), P.k++;\n    if (P.k >= P.K) (P.hold = 0), (P.flash = 1), channel(P);\n  } else if ((P.hold += d) > HOLD) restart(P);\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { r, ord, trap, stepT, path, cr, cg, cb, oldR, oldG, oldB, k, K } = P;\n  const h0 = P.hue, now = P.clock, oa = P.oldA, fl = P.flash, hold = P.hold;\n  hsv(h0 + 0.13, 0.5, 1);\n  const gR = C[0], gG = C[1], gB = C[2];\n  for (let i = 0; i \u003c N; i++) {\n    const o = ord[i];\n    let R, G, B;\n    if (o >= 0 && o \u003c k) {\n      const f = o / K;\n      const age = now - stepT[o];\n      hsv(h0 + 0.45 + 0.28 * f, 0.8, 0.55 + 0.25 * f + 0.2 * fl);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-age / 0.3);\n      if (w > 0.003) (R += (1 - R) * w), (G += (1 - G) * w), (B += (0.95 - B) * w);\n      const j = path[i];\n      if (j >= 0) {\n        const u = cl(hold / 0.6 - j / P.pathLen, 0, 1);\n        if (u > 0) (R += (gR - R) * u), (G += (gG - G) * u), (B += (gB - B) * u);\n      }\n    } else if (trap[i] \u003c= k) {\n      hsv(h0 + 0.95, 0.6, 0.1 + 0.22 * (1 - r[i]));\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-(now - stepT[trap[i] - 1]) / 0.5);\n      if (w > 0.003) (R += (1 - R) * w * 0.6), (G += (0.6 - G) * w * 0.6), (B += (0.8 - B) * w * 0.6);\n    } else {\n      hsv(h0 + 0.08, 0.35, 0.035 + 0.1 * (1 - r[i]) ** 1.5);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    }\n    R *= 255;\n    G *= 255;\n    B *= 255;\n    if (oa > 0.01) (R = Math.max(R, oldR[i] * oa)), (G = Math.max(G, oldG[i] * oa)), (B = Math.max(B, oldB[i] * oa));\n    (cr[i] = R), (cg[i] = G), (cb[i] = B);\n    display.setPixel(i % W, (i / W) | 0, R, G, B);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst."},{"name":"Gravity","min":-1,"max":1,"about":"Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100."},{"name":"Grain","min":0,"max":1,"about":"How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes."}],"start":[0,2,0,0.06],"measures":{"motion":0.1366,"detail":0.0909,"edges":0.2189,"complexity":1.5161,"coverage":0.4669,"colour":0.1889,"drift":0.1552},"knobResponse":[0.0576,0.0663,0.1297,0.1267]},{"slug":"isospectral-drums","title":"Isospectral Drums","family":"wave","round":39,"note":"모양이 다른 북 두 개가 위아래에서 같은 높이의 소리로 울려요. 반정사각형 일곱 장으로 지은 고든, 웹, 월퍼트의 북이라 고유값이 하나도 다르지 않고, 가운데 띠의 눈금이 그 고유값이에요. 북마다 제 노드선을 그리며 같은 박자로 떨어요.","idea":"Two drums of different shape, each glued from the same seven half-squares, one above the other, ring in the same eigenmode at the same frequency, one tone where the membrane is up and the opposite tone where it is down with dark nodal lines between, while a strip between them marks their one shared spectrum and the mode they play as they climb it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Isospectral Drums\n// Family:  wave\n// Idea:    Two drums of different shape, each glued from the same seven half-squares, one above the other, ring in the same eigenmode at the same frequency, one tone where the membrane is up and the opposite tone where it is down with dark nodal lines between, while a strip between them marks their one shared spectrum and the mode they play as they climb it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: isospectral drums (Carolyn Gordon, David Webb and Scott Wolpert, 1992), the answer to Mark Kac's \"Can one hear the shape of a drum?\" (1966); the drums built from the Fano plane as Peter Buser, John Conway, Peter Doyle and Klaus-Dieter Semmler did (1994), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Mode=0..24, Beat=0..1\n//\n// Knob 1: Hue. Turns the two tones round the wheel together, always half a turn apart: at 0 the membrane is rose where it is up and aqua where it is down, at 0.1 coral and sky blue, at 0.25 yellow-lime and indigo, at 0.5 aqua and rose, at 0.75 indigo and yellow-lime. Orange and yellow tones are paled a little and lifted up to 1.5 times, so the dim parts of a swing do not turn brown or olive.\n// Knob 2: Speed. At 2 the fundamental swings once in 2.5 s and the 24th mode, 3.3 times higher, in 0.76 s, and on its climb the pair holds each mode 5 s. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Mode. At 0 the drums climb their spectrum on their own from the 6th mode, a step every 5 s at Speed 2, back to the fundamental after the 24th. From 1 to 24 they hold that mode: 1 is a single dome; at 9 the nodal lines are exactly the seams between the seven half-squares, because that mode is the half-square's own lowest mode turned over at every seam; by 24 each drum is cut into eight to ten nodal domains, never laid out the same in the two.\n// Knob 4: Beat. Mixes in the mode three steps up, to half and half at 1. The two frequencies beat and the nodal lines sweep across both drums and come back in the same rhythm, because the two drums share every frequency; the strip lights both modes.\n\nconst W = 64, H = 128;\n// Leg of a half-square in LEDs. A drum spans three legs each way, 58 LEDs\n// with its rim; the lower drum's grid starts at row 70.\nconst S = 19, NG = 3 * S + 1, X0 = 3, TOP = [0, 70];\n// Modes found at setup, and the Lanczos steps that find them.\nconst K = 24, M = 64;\n// The spectrum strip, rows 59 to 68: its axis runs from 0 to 1.05 times the\n// 24th eigenvalue across the drums' width.\nconst AX = 1.05, TICK = [0.7, 0.8, 0.85];\n// Fundamental frequency in Hz at Speed 2; seconds a mode is held on the\n// climb, of which the last XF fade into the next; the mode the climb opens on.\nconst F1 = 0.4, DWELL = 5, XF = 1.2, FIRST = 6;\n// Membrane level where it is flat, so the drums stay in sight between swings.\nconst FLOOR = 0.18;\n// Opening hue: rose up, aqua down.\nconst H0 = 0.96;\nconst { floor, min, max, abs, sqrt, cos, round, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The Fano plane: its seven points are the nonzero vectors (x, y, z) of\n// F2^3, held as the numbers 1 to 7, and so are its seven lines, a line v\n// holding the points p with p.v = 0. Three involutions of PSL(3,2) act on\n// both: a swaps x and z, b swaps y and z, c adds z to x. On lines an element\n// acts by its inverse transpose, which for a and b is themselves and for c\n// adds x to z.\nconst bit = (v, k) => (v >> k) & 1, vec = (x, y, z) => (x \u003c\u003c 2) | (y \u003c\u003c 1) | z;\nconst swapXZ = (v) => vec(bit(v, 0), bit(v, 1), bit(v, 2)), swapYZ = (v) => vec(bit(v, 2), bit(v, 0), bit(v, 1));\nconst ON_POINTS = [swapXZ, swapYZ, (v) => vec(bit(v, 2) ^ bit(v, 0), bit(v, 1), bit(v, 0))];\nconst ON_LINES = [swapXZ, swapYZ, (v) => vec(bit(v, 2), bit(v, 1), bit(v, 2) ^ bit(v, 0))];\n\n// The base tile is the half-square (0,0), (1,0), (0,1); a and b are its\n// legs, c its hypotenuse. Reflection across each, as (x, y) -> (m0 x + m1 y\n// + m4, m2 x + m3 y + m5). Legs on the LED axes and the hypotenuse at 45\n// degrees, so every reflection maps the LED grid onto itself.\nconst REF = [[1, 0, 0, -1, 0, 0], [-1, 0, 0, 1, 0, 0], [0, -1, -1, 0, 1, 1]];\nconst comp = (g, h) => [g[0] * h[0] + g[1] * h[2], g[0] * h[1] + g[1] * h[3], g[2] * h[0] + g[3] * h[2], g[2] * h[1] + g[3] * h[3], g[0] * h[4] + g[1] * h[5] + g[4], g[2] * h[4] + g[3] * h[5] + g[5]];\n\n// Copy i of the tile is glued to copy a(i) across side a, and so on; a\n// side an involution fixes is the drum's rim. The gluings make a tree, so\n// unfolding it from copy 1 places every copy in the plane.\nfunction unfold(inv) {\n  const g = [];\n  g[1] = [1, 0, 0, 1, 0, 0];\n  const q = [1];\n  while (q.length) {\n    const i = q.pop();\n    for (let s = 0; s \u003c 3; s++) {\n      const j = inv[s](i);\n      if (j !== i && !g[j]) {\n        g[j] = comp(g[i], REF[s]);\n        q.push(j);\n      }\n    }\n  }\n  return g.slice(1);\n}\n\n// Each grid point of the drum: 0 outside, 1 on the rim, 2 inside. A point\n// is inside when a step into every one of the eight 45-degree wedges round\n// it stays on the drum; every tile edge runs along a wedge's side.\nfunction drumMask(tiles, flip) {\n  let mx = 1e9, my = 1e9;\n  for (const g of tiles)\n    for (const [u, v] of [[0, 0], [1, 0], [0, 1]]) {\n      mx = min(mx, g[0] * u + g[1] * v + g[4]);\n      my = min(my, g[2] * u + g[3] * v + g[5]);\n    }\n  const on = (x, y) => {\n    for (const g of tiles) {\n      const px = x / S + mx - g[4], py = y / S + my - g[5];\n      const u = g[0] * px + g[2] * py, v = g[1] * px + g[3] * py;\n      if (u > -1e-9 && v > -1e-9 && u + v \u003c 1 + 1e-9) return true;\n    }\n    return false;\n  };\n  const m = new Uint8Array(NG * NG);\n  for (let y = 0; y \u003c NG; y++)\n    for (let x = 0; x \u003c NG; x++) {\n      const gy = flip ? NG - 1 - y : y;\n      if (!on(x, gy)) continue;\n      let all = true;\n      for (const [dx, dy] of [[2, 1], [1, 2], [-1, 2], [-2, 1], [-2, -1], [-1, -2], [1, -2], [2, -1]]) if (!on(x + 0.05 * dx, gy + 0.05 * dy)) all = false;\n      m[y * NG + x] = all ? 2 : 1;\n    }\n  return m;\n}\n\n// Implicit QL on a symmetric tridiagonal matrix (EISPACK's tql2): d the\n// diagonal, e[1..n-1] below it; z starts as the identity and leaves holding\n// the eigenvectors in its columns.\nfunction tql2(n, d, e, z) {\n  for (let i = 1; i \u003c n; i++) e[i - 1] = e[i];\n  e[n - 1] = 0;\n  let f = 0, tst = 0;\n  for (let l = 0; l \u003c n; l++) {\n    tst = max(tst, abs(d[l]) + abs(e[l]));\n    let m = l;\n    while (m \u003c n && abs(e[m]) > 2.2e-16 * tst) m++;\n    if (m > l)\n      do {\n        let g = d[l], p = (d[l + 1] - g) / (2 * e[l]), r = hypot(p, 1);\n        if (p \u003c 0) r = -r;\n        d[l] = e[l] / (p + r);\n        d[l + 1] = e[l] * (p + r);\n        const dl1 = d[l + 1];\n        let h = g - d[l];\n        for (let i = l + 2; i \u003c n; i++) d[i] -= h;\n        f += h;\n        p = d[m];\n        let c = 1, c2 = 1, c3 = 1, s = 0, s2 = 0;\n        const el1 = e[l + 1];\n        for (let i = m - 1; i >= l; i--) {\n          c3 = c2;\n          c2 = c;\n          s2 = s;\n          g = c * e[i];\n          h = c * p;\n          r = hypot(p, e[i]);\n          e[i + 1] = s * r;\n          s = e[i] / r;\n          c = p / r;\n          p = c * d[i] - s * g;\n          d[i + 1] = h + s * (c * g + s * d[i]);\n          for (let k = 0; k \u003c n; k++) {\n            const a = z[k * n + i], b = z[k * n + i + 1];\n            z[k * n + i + 1] = s * a + c * b;\n            z[k * n + i] = c * a - s * b;\n          }\n        }\n        p = (-s * s2 * c3 * el1 * e[l]) / dl1;\n        e[l] = s * p;\n        d[l] = c * p;\n      } while (abs(e[l]) > 2.2e-16 * tst);\n    d[l] += f;\n    e[l] = 0;\n  }\n}\n\n// The lowest K eigenpairs of the 5-point Dirichlet Laplacian on the drum's\n// inside points: Lanczos on its inverse, applied by a banded Cholesky\n// factor, with full reorthogonalisation. Eigenvalues in units of one LED.\n// Every reflection of the gluing maps the LED grid onto itself, so the two\n// pixel drums are isospectral exactly, not only in the limit: both have\n// 1179 inside points and the same 1179 eigenvalues, and the lowest 24 found\n// here for each agree to 1e-11.\nfunction drumModes(mask) {\n  const id = new Int32Array(NG * NG).fill(-1), pos = [];\n  for (let p = 0; p \u003c NG * NG; p++) if (mask[p] === 2) id[p] = pos.push(p) - 1;\n  const n = pos.length;\n  let bw = 1;\n  for (let i = 0; i \u003c n; i++) if (id[pos[i] - NG] >= 0) bw = max(bw, i - id[pos[i] - NG]);\n  const B = bw + 1, L = new Float64Array(n * B);\n  for (let i = 0; i \u003c n; i++)\n    for (let j = max(0, i - bw); j \u003c= i; j++) {\n      const dp = pos[i] - pos[j];\n      let s = i === j ? 4 : dp === 1 || dp === NG ? -1 : 0;\n      for (let k = max(0, i - bw); k \u003c j; k++) s -= L[i * B + i - k] * L[j * B + j - k];\n      L[i * B + i - j] = i === j ? sqrt(s) : s / L[j * B];\n    }\n  const solve = (b, x) => {\n    for (let i = 0; i \u003c n; i++) {\n      let s = b[i];\n      for (let k = max(0, i - bw); k \u003c i; k++) s -= L[i * B + i - k] * x[k];\n      x[i] = s / L[i * B];\n    }\n    for (let i = n - 1; i >= 0; i--) {\n      let s = x[i];\n      for (let k = i + 1; k \u003c= min(n - 1, i + bw); k++) s -= L[k * B + k - i] * x[k];\n      x[i] = s / L[i * B];\n    }\n  };\n  const Q = new Float64Array(M * n), w = new Float64Array(n), d = new Float64Array(M), e = new Float64Array(M);\n  // A fixed start, so both drums and every run find the same modes.\n  let seed = 12345, nn = 0;\n  for (let i = 0; i \u003c n; i++) {\n    seed = (seed * 1103515245 + 12345) >>> 0;\n    Q[i] = seed / 4294967296 - 0.5;\n    nn += Q[i] * Q[i];\n  }\n  for (let i = 0; i \u003c n; i++) Q[i] /= sqrt(nn);\n  for (let j = 0; j \u003c M; j++) {\n    solve(Q.subarray(j * n, j * n + n), w);\n    for (let pass = 0; pass \u003c 2; pass++)\n      for (let i = 0; i \u003c= j; i++) {\n        let dot = 0;\n        for (let k = 0; k \u003c n; k++) dot += w[k] * Q[i * n + k];\n        if (!pass && i === j) d[j] = dot;\n        for (let k = 0; k \u003c n; k++) w[k] -= dot * Q[i * n + k];\n      }\n    let b = 0;\n    for (let k = 0; k \u003c n; k++) b += w[k] * w[k];\n    b = sqrt(b);\n    if (j + 1 \u003c M) {\n      e[j + 1] = b;\n      for (let k = 0; k \u003c n; k++) Q[(j + 1) * n + k] = w[k] / b;\n    }\n  }\n  const z = new Float64Array(M * M);\n  for (let i = 0; i \u003c M; i++) z[i * M + i] = 1;\n  tql2(M, d, e, z);\n  const order = [...d.keys()].sort((a, b) => d[b] - d[a]).slice(0, K);\n  const lam = new Float64Array(K), V = new Float32Array(K * n);\n  order.forEach((col, m) => {\n    lam[m] = 1 / d[col];\n    const v = new Float64Array(n);\n    for (let j = 0; j \u003c M; j++) {\n      const c = z[j * M + col];\n      for (let i = 0; i \u003c n; i++) v[i] += c * Q[j * n + i];\n    }\n    // The sign of a mode is free: its strongest antinode is taken as up.\n    let big = 0;\n    for (let i = 0; i \u003c n; i++) if (abs(v[i]) > abs(big)) big = v[i];\n    for (let i = 0; i \u003c n; i++) V[m * n + i] = v[i] / big;\n  });\n  return { n, pos, lam, V };\n}\n\nexport function setup(params) {\n  // Drum A: copies of the tile at the points; drum B: at the lines.\n  const masks = [drumMask(unfold(ON_POINTS), true), drumMask(unfold(ON_LINES), true)];\n  params.s = {\n    hue: 0, speed: 2, mode: 0, beat: 0.06, t: 0, tour: 0,\n    masks, drums: masks.map(drumModes), w: new Float32Array(K), swing: new Float32Array(K), U: new Float32Array(NG * NG), strip: new Float32Array(W * 10 * 3),\n    up: [0, 0, 0], down: [0, 0, 0], rim: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  S.hue = k[0];\n  S.mode = round(cl(k[2], 0, K));\n  S.beat = cl(k[3], 0, 1);\n  S.t += d;\n  // The modes playing and their shares: one held mode, or on the climb the\n  // mode of this step fading into the next.\n  const w = S.w, base = [];\n  w.fill(0);\n  if (S.mode > 0) base.push([S.mode - 1, 1]);\n  else {\n    S.tour += d;\n    const step = floor(S.tour / DWELL), x = sm(DWELL - XF, DWELL, S.tour - step * DWELL), m = (FIRST - 1 + step) % K;\n    base.push([m, 1 - x], [(m + 1) % K, x]);\n  }\n  // Beat shares each mode with the one three steps above it (below, for\n  // the top three).\n  for (const [m, s] of base) {\n    w[m] += s * (1 - S.beat / 2);\n    w[m + 3 \u003c K ? m + 3 : m - 3] += (s * S.beat) / 2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { up, down, rim, w, U, swing } = S;\n  const lam = S.drums[0].lam, h = S.hue + H0;\n  // Yellow and orange read olive and brown when dim: there the tone is paled\n  // a little and the membrane lifted up to 1.5 times.\n  const warm = (hh) => cl(1.5 - abs(hh - floor(hh) - 0.16) / 0.08, 0, 1), wu = warm(h), wd = warm(h + 0.5);\n  hsv(h, 0.72 - 0.14 * wu, 1, up);\n  hsv(h + 0.5, 0.78 - 0.14 * wd, 1, down);\n  const lift = [1 + 0.5 * wu, 1 + 0.5 * wd];\n  hsv(h + 0.25, 0.12, 0.62, rim);\n  // Each mode swings as cos(omega t), omega in proportion to the square root\n  // of its eigenvalue, and the same omega in both drums.\n  for (let m = 0; m \u003c K; m++) swing[m] = w[m] > 0.002 ? cos(2 * PI * F1 * sqrt(lam[m] / lam[0]) * S.t) : 0;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  S.drums.forEach((D, di) => {\n    const mask = S.masks[di], { n, pos, V } = D, y0 = TOP[di];\n    U.fill(0);\n    let scale = 0;\n    for (let m = 0; m \u003c K; m++) {\n      if (w[m] \u003c= 0.002) continue;\n      const a = w[m] * swing[m];\n      scale += w[m];\n      for (let i = 0; i \u003c n; i++) U[pos[i]] += a * V[m * n + i];\n    }\n    scale = max(scale, 1e-6);\n    for (let gy = 0; gy \u003c NG; gy++)\n      for (let gx = 0; gx \u003c NG; gx++) {\n        const p = gy * NG + gx, kind = mask[p];\n        if (!kind) continue;\n        let r, g, b;\n        if (kind === 1) [r, g, b] = rim;\n        else {\n          // How far the nearest nodal line is, in LEDs: the value over the\n          // slope, the same at every moment of a swing.\n          const u = U[p], sx = (U[p + 1] - U[p - 1]) / 2, sy = (U[p + NG] - U[p - NG]) / 2;\n          const dist = abs(u) / sqrt(sx * sx + sy * sy + 1e-30), node = sm(0.15, 0.85, dist);\n          const a = min(1, abs(u) / scale), tone = u >= 0 ? up : down, wh = 0.35 * a * a * a;\n          const lv = (FLOOR + (1 - FLOOR) * a ** 0.7) * node * lift[u >= 0 ? 0 : 1];\n          r = (tone[0] + (1 - tone[0]) * wh) * lv;\n          g = (tone[1] + (1 - tone[1]) * wh) * lv;\n          b = (tone[2] + (1 - tone[2]) * wh) * lv;\n        }\n        display.setPixel(X0 + gx, y0 + gy, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n      }\n  });\n  // The shared spectrum: a dim tick at every eigenvalue, and the modes\n  // playing lit the full height of the strip, brightest at the top of their\n  // swing and in the tone of the side it swings to.\n  const span = (NG - 1) / (AX * lam[K - 1]), st = S.strip;\n  st.fill(0);\n  for (let m = 0; m \u003c K; m++) {\n    const xf = X0 + lam[m] * span, xi = floor(xf), fr = xf - xi;\n    const tone = swing[m] >= 0 ? up : down, on = cl(w[m] * 1.4, 0, 1) * (0.45 + 0.55 * abs(swing[m]));\n    for (let j = 0; j \u003c 10; j++) {\n      const tick = j >= 2 && j \u003c= 7 ? 0.26 : 0, lit = on * (j === 0 || j === 9 ? 0.5 : 1);\n      for (const [xx, f] of [[xi, 1 - fr], [xi + 1, fr]]) {\n        const q = (j * W + xx) * 3;\n        for (let c = 0; c \u003c 3; c++) st[q + c] += (tick * (1 - lit) * TICK[c] + lit * (tone[c] + (1 - tone[c]) * 0.35)) * f;\n      }\n    }\n  }\n  for (let j = 0; j \u003c 10; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (j * W + x) * 3;\n      display.setPixel(x, 59 + j, round(255 * min(1, st[q])), round(255 * min(1, st[q + 1])), round(255 * min(1, st[q + 2])));\n    }\n}\n","layer":{"id":"layer-isospectral-drums","type":"code","name":"isospectral-drums","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Isospectral Drums\n// Family:  wave\n// Idea:    Two drums of different shape, each glued from the same seven half-squares, one above the other, ring in the same eigenmode at the same frequency, one tone where the membrane is up and the opposite tone where it is down with dark nodal lines between, while a strip between them marks their one shared spectrum and the mode they play as they climb it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: isospectral drums (Carolyn Gordon, David Webb and Scott Wolpert, 1992), the answer to Mark Kac's \"Can one hear the shape of a drum?\" (1966); the drums built from the Fano plane as Peter Buser, John Conway, Peter Doyle and Klaus-Dieter Semmler did (1994), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Mode=0..24, Beat=0..1\n//\n// Knob 1: Hue. Turns the two tones round the wheel together, always half a turn apart: at 0 the membrane is rose where it is up and aqua where it is down, at 0.1 coral and sky blue, at 0.25 yellow-lime and indigo, at 0.5 aqua and rose, at 0.75 indigo and yellow-lime. Orange and yellow tones are paled a little and lifted up to 1.5 times, so the dim parts of a swing do not turn brown or olive.\n// Knob 2: Speed. At 2 the fundamental swings once in 2.5 s and the 24th mode, 3.3 times higher, in 0.76 s, and on its climb the pair holds each mode 5 s. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Mode. At 0 the drums climb their spectrum on their own from the 6th mode, a step every 5 s at Speed 2, back to the fundamental after the 24th. From 1 to 24 they hold that mode: 1 is a single dome; at 9 the nodal lines are exactly the seams between the seven half-squares, because that mode is the half-square's own lowest mode turned over at every seam; by 24 each drum is cut into eight to ten nodal domains, never laid out the same in the two.\n// Knob 4: Beat. Mixes in the mode three steps up, to half and half at 1. The two frequencies beat and the nodal lines sweep across both drums and come back in the same rhythm, because the two drums share every frequency; the strip lights both modes.\n\nconst W = 64, H = 128;\n// Leg of a half-square in LEDs. A drum spans three legs each way, 58 LEDs\n// with its rim; the lower drum's grid starts at row 70.\nconst S = 19, NG = 3 * S + 1, X0 = 3, TOP = [0, 70];\n// Modes found at setup, and the Lanczos steps that find them.\nconst K = 24, M = 64;\n// The spectrum strip, rows 59 to 68: its axis runs from 0 to 1.05 times the\n// 24th eigenvalue across the drums' width.\nconst AX = 1.05, TICK = [0.7, 0.8, 0.85];\n// Fundamental frequency in Hz at Speed 2; seconds a mode is held on the\n// climb, of which the last XF fade into the next; the mode the climb opens on.\nconst F1 = 0.4, DWELL = 5, XF = 1.2, FIRST = 6;\n// Membrane level where it is flat, so the drums stay in sight between swings.\nconst FLOOR = 0.18;\n// Opening hue: rose up, aqua down.\nconst H0 = 0.96;\nconst { floor, min, max, abs, sqrt, cos, round, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The Fano plane: its seven points are the nonzero vectors (x, y, z) of\n// F2^3, held as the numbers 1 to 7, and so are its seven lines, a line v\n// holding the points p with p.v = 0. Three involutions of PSL(3,2) act on\n// both: a swaps x and z, b swaps y and z, c adds z to x. On lines an element\n// acts by its inverse transpose, which for a and b is themselves and for c\n// adds x to z.\nconst bit = (v, k) => (v >> k) & 1, vec = (x, y, z) => (x \u003c\u003c 2) | (y \u003c\u003c 1) | z;\nconst swapXZ = (v) => vec(bit(v, 0), bit(v, 1), bit(v, 2)), swapYZ = (v) => vec(bit(v, 2), bit(v, 0), bit(v, 1));\nconst ON_POINTS = [swapXZ, swapYZ, (v) => vec(bit(v, 2) ^ bit(v, 0), bit(v, 1), bit(v, 0))];\nconst ON_LINES = [swapXZ, swapYZ, (v) => vec(bit(v, 2), bit(v, 1), bit(v, 2) ^ bit(v, 0))];\n\n// The base tile is the half-square (0,0), (1,0), (0,1); a and b are its\n// legs, c its hypotenuse. Reflection across each, as (x, y) -> (m0 x + m1 y\n// + m4, m2 x + m3 y + m5). Legs on the LED axes and the hypotenuse at 45\n// degrees, so every reflection maps the LED grid onto itself.\nconst REF = [[1, 0, 0, -1, 0, 0], [-1, 0, 0, 1, 0, 0], [0, -1, -1, 0, 1, 1]];\nconst comp = (g, h) => [g[0] * h[0] + g[1] * h[2], g[0] * h[1] + g[1] * h[3], g[2] * h[0] + g[3] * h[2], g[2] * h[1] + g[3] * h[3], g[0] * h[4] + g[1] * h[5] + g[4], g[2] * h[4] + g[3] * h[5] + g[5]];\n\n// Copy i of the tile is glued to copy a(i) across side a, and so on; a\n// side an involution fixes is the drum's rim. The gluings make a tree, so\n// unfolding it from copy 1 places every copy in the plane.\nfunction unfold(inv) {\n  const g = [];\n  g[1] = [1, 0, 0, 1, 0, 0];\n  const q = [1];\n  while (q.length) {\n    const i = q.pop();\n    for (let s = 0; s \u003c 3; s++) {\n      const j = inv[s](i);\n      if (j !== i && !g[j]) {\n        g[j] = comp(g[i], REF[s]);\n        q.push(j);\n      }\n    }\n  }\n  return g.slice(1);\n}\n\n// Each grid point of the drum: 0 outside, 1 on the rim, 2 inside. A point\n// is inside when a step into every one of the eight 45-degree wedges round\n// it stays on the drum; every tile edge runs along a wedge's side.\nfunction drumMask(tiles, flip) {\n  let mx = 1e9, my = 1e9;\n  for (const g of tiles)\n    for (const [u, v] of [[0, 0], [1, 0], [0, 1]]) {\n      mx = min(mx, g[0] * u + g[1] * v + g[4]);\n      my = min(my, g[2] * u + g[3] * v + g[5]);\n    }\n  const on = (x, y) => {\n    for (const g of tiles) {\n      const px = x / S + mx - g[4], py = y / S + my - g[5];\n      const u = g[0] * px + g[2] * py, v = g[1] * px + g[3] * py;\n      if (u > -1e-9 && v > -1e-9 && u + v \u003c 1 + 1e-9) return true;\n    }\n    return false;\n  };\n  const m = new Uint8Array(NG * NG);\n  for (let y = 0; y \u003c NG; y++)\n    for (let x = 0; x \u003c NG; x++) {\n      const gy = flip ? NG - 1 - y : y;\n      if (!on(x, gy)) continue;\n      let all = true;\n      for (const [dx, dy] of [[2, 1], [1, 2], [-1, 2], [-2, 1], [-2, -1], [-1, -2], [1, -2], [2, -1]]) if (!on(x + 0.05 * dx, gy + 0.05 * dy)) all = false;\n      m[y * NG + x] = all ? 2 : 1;\n    }\n  return m;\n}\n\n// Implicit QL on a symmetric tridiagonal matrix (EISPACK's tql2): d the\n// diagonal, e[1..n-1] below it; z starts as the identity and leaves holding\n// the eigenvectors in its columns.\nfunction tql2(n, d, e, z) {\n  for (let i = 1; i \u003c n; i++) e[i - 1] = e[i];\n  e[n - 1] = 0;\n  let f = 0, tst = 0;\n  for (let l = 0; l \u003c n; l++) {\n    tst = max(tst, abs(d[l]) + abs(e[l]));\n    let m = l;\n    while (m \u003c n && abs(e[m]) > 2.2e-16 * tst) m++;\n    if (m > l)\n      do {\n        let g = d[l], p = (d[l + 1] - g) / (2 * e[l]), r = hypot(p, 1);\n        if (p \u003c 0) r = -r;\n        d[l] = e[l] / (p + r);\n        d[l + 1] = e[l] * (p + r);\n        const dl1 = d[l + 1];\n        let h = g - d[l];\n        for (let i = l + 2; i \u003c n; i++) d[i] -= h;\n        f += h;\n        p = d[m];\n        let c = 1, c2 = 1, c3 = 1, s = 0, s2 = 0;\n        const el1 = e[l + 1];\n        for (let i = m - 1; i >= l; i--) {\n          c3 = c2;\n          c2 = c;\n          s2 = s;\n          g = c * e[i];\n          h = c * p;\n          r = hypot(p, e[i]);\n          e[i + 1] = s * r;\n          s = e[i] / r;\n          c = p / r;\n          p = c * d[i] - s * g;\n          d[i + 1] = h + s * (c * g + s * d[i]);\n          for (let k = 0; k \u003c n; k++) {\n            const a = z[k * n + i], b = z[k * n + i + 1];\n            z[k * n + i + 1] = s * a + c * b;\n            z[k * n + i] = c * a - s * b;\n          }\n        }\n        p = (-s * s2 * c3 * el1 * e[l]) / dl1;\n        e[l] = s * p;\n        d[l] = c * p;\n      } while (abs(e[l]) > 2.2e-16 * tst);\n    d[l] += f;\n    e[l] = 0;\n  }\n}\n\n// The lowest K eigenpairs of the 5-point Dirichlet Laplacian on the drum's\n// inside points: Lanczos on its inverse, applied by a banded Cholesky\n// factor, with full reorthogonalisation. Eigenvalues in units of one LED.\n// Every reflection of the gluing maps the LED grid onto itself, so the two\n// pixel drums are isospectral exactly, not only in the limit: both have\n// 1179 inside points and the same 1179 eigenvalues, and the lowest 24 found\n// here for each agree to 1e-11.\nfunction drumModes(mask) {\n  const id = new Int32Array(NG * NG).fill(-1), pos = [];\n  for (let p = 0; p \u003c NG * NG; p++) if (mask[p] === 2) id[p] = pos.push(p) - 1;\n  const n = pos.length;\n  let bw = 1;\n  for (let i = 0; i \u003c n; i++) if (id[pos[i] - NG] >= 0) bw = max(bw, i - id[pos[i] - NG]);\n  const B = bw + 1, L = new Float64Array(n * B);\n  for (let i = 0; i \u003c n; i++)\n    for (let j = max(0, i - bw); j \u003c= i; j++) {\n      const dp = pos[i] - pos[j];\n      let s = i === j ? 4 : dp === 1 || dp === NG ? -1 : 0;\n      for (let k = max(0, i - bw); k \u003c j; k++) s -= L[i * B + i - k] * L[j * B + j - k];\n      L[i * B + i - j] = i === j ? sqrt(s) : s / L[j * B];\n    }\n  const solve = (b, x) => {\n    for (let i = 0; i \u003c n; i++) {\n      let s = b[i];\n      for (let k = max(0, i - bw); k \u003c i; k++) s -= L[i * B + i - k] * x[k];\n      x[i] = s / L[i * B];\n    }\n    for (let i = n - 1; i >= 0; i--) {\n      let s = x[i];\n      for (let k = i + 1; k \u003c= min(n - 1, i + bw); k++) s -= L[k * B + k - i] * x[k];\n      x[i] = s / L[i * B];\n    }\n  };\n  const Q = new Float64Array(M * n), w = new Float64Array(n), d = new Float64Array(M), e = new Float64Array(M);\n  // A fixed start, so both drums and every run find the same modes.\n  let seed = 12345, nn = 0;\n  for (let i = 0; i \u003c n; i++) {\n    seed = (seed * 1103515245 + 12345) >>> 0;\n    Q[i] = seed / 4294967296 - 0.5;\n    nn += Q[i] * Q[i];\n  }\n  for (let i = 0; i \u003c n; i++) Q[i] /= sqrt(nn);\n  for (let j = 0; j \u003c M; j++) {\n    solve(Q.subarray(j * n, j * n + n), w);\n    for (let pass = 0; pass \u003c 2; pass++)\n      for (let i = 0; i \u003c= j; i++) {\n        let dot = 0;\n        for (let k = 0; k \u003c n; k++) dot += w[k] * Q[i * n + k];\n        if (!pass && i === j) d[j] = dot;\n        for (let k = 0; k \u003c n; k++) w[k] -= dot * Q[i * n + k];\n      }\n    let b = 0;\n    for (let k = 0; k \u003c n; k++) b += w[k] * w[k];\n    b = sqrt(b);\n    if (j + 1 \u003c M) {\n      e[j + 1] = b;\n      for (let k = 0; k \u003c n; k++) Q[(j + 1) * n + k] = w[k] / b;\n    }\n  }\n  const z = new Float64Array(M * M);\n  for (let i = 0; i \u003c M; i++) z[i * M + i] = 1;\n  tql2(M, d, e, z);\n  const order = [...d.keys()].sort((a, b) => d[b] - d[a]).slice(0, K);\n  const lam = new Float64Array(K), V = new Float32Array(K * n);\n  order.forEach((col, m) => {\n    lam[m] = 1 / d[col];\n    const v = new Float64Array(n);\n    for (let j = 0; j \u003c M; j++) {\n      const c = z[j * M + col];\n      for (let i = 0; i \u003c n; i++) v[i] += c * Q[j * n + i];\n    }\n    // The sign of a mode is free: its strongest antinode is taken as up.\n    let big = 0;\n    for (let i = 0; i \u003c n; i++) if (abs(v[i]) > abs(big)) big = v[i];\n    for (let i = 0; i \u003c n; i++) V[m * n + i] = v[i] / big;\n  });\n  return { n, pos, lam, V };\n}\n\nexport function setup(params) {\n  // Drum A: copies of the tile at the points; drum B: at the lines.\n  const masks = [drumMask(unfold(ON_POINTS), true), drumMask(unfold(ON_LINES), true)];\n  params.s = {\n    hue: 0, speed: 2, mode: 0, beat: 0.06, t: 0, tour: 0,\n    masks, drums: masks.map(drumModes), w: new Float32Array(K), swing: new Float32Array(K), U: new Float32Array(NG * NG), strip: new Float32Array(W * 10 * 3),\n    up: [0, 0, 0], down: [0, 0, 0], rim: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  S.hue = k[0];\n  S.mode = round(cl(k[2], 0, K));\n  S.beat = cl(k[3], 0, 1);\n  S.t += d;\n  // The modes playing and their shares: one held mode, or on the climb the\n  // mode of this step fading into the next.\n  const w = S.w, base = [];\n  w.fill(0);\n  if (S.mode > 0) base.push([S.mode - 1, 1]);\n  else {\n    S.tour += d;\n    const step = floor(S.tour / DWELL), x = sm(DWELL - XF, DWELL, S.tour - step * DWELL), m = (FIRST - 1 + step) % K;\n    base.push([m, 1 - x], [(m + 1) % K, x]);\n  }\n  // Beat shares each mode with the one three steps above it (below, for\n  // the top three).\n  for (const [m, s] of base) {\n    w[m] += s * (1 - S.beat / 2);\n    w[m + 3 \u003c K ? m + 3 : m - 3] += (s * S.beat) / 2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { up, down, rim, w, U, swing } = S;\n  const lam = S.drums[0].lam, h = S.hue + H0;\n  // Yellow and orange read olive and brown when dim: there the tone is paled\n  // a little and the membrane lifted up to 1.5 times.\n  const warm = (hh) => cl(1.5 - abs(hh - floor(hh) - 0.16) / 0.08, 0, 1), wu = warm(h), wd = warm(h + 0.5);\n  hsv(h, 0.72 - 0.14 * wu, 1, up);\n  hsv(h + 0.5, 0.78 - 0.14 * wd, 1, down);\n  const lift = [1 + 0.5 * wu, 1 + 0.5 * wd];\n  hsv(h + 0.25, 0.12, 0.62, rim);\n  // Each mode swings as cos(omega t), omega in proportion to the square root\n  // of its eigenvalue, and the same omega in both drums.\n  for (let m = 0; m \u003c K; m++) swing[m] = w[m] > 0.002 ? cos(2 * PI * F1 * sqrt(lam[m] / lam[0]) * S.t) : 0;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  S.drums.forEach((D, di) => {\n    const mask = S.masks[di], { n, pos, V } = D, y0 = TOP[di];\n    U.fill(0);\n    let scale = 0;\n    for (let m = 0; m \u003c K; m++) {\n      if (w[m] \u003c= 0.002) continue;\n      const a = w[m] * swing[m];\n      scale += w[m];\n      for (let i = 0; i \u003c n; i++) U[pos[i]] += a * V[m * n + i];\n    }\n    scale = max(scale, 1e-6);\n    for (let gy = 0; gy \u003c NG; gy++)\n      for (let gx = 0; gx \u003c NG; gx++) {\n        const p = gy * NG + gx, kind = mask[p];\n        if (!kind) continue;\n        let r, g, b;\n        if (kind === 1) [r, g, b] = rim;\n        else {\n          // How far the nearest nodal line is, in LEDs: the value over the\n          // slope, the same at every moment of a swing.\n          const u = U[p], sx = (U[p + 1] - U[p - 1]) / 2, sy = (U[p + NG] - U[p - NG]) / 2;\n          const dist = abs(u) / sqrt(sx * sx + sy * sy + 1e-30), node = sm(0.15, 0.85, dist);\n          const a = min(1, abs(u) / scale), tone = u >= 0 ? up : down, wh = 0.35 * a * a * a;\n          const lv = (FLOOR + (1 - FLOOR) * a ** 0.7) * node * lift[u >= 0 ? 0 : 1];\n          r = (tone[0] + (1 - tone[0]) * wh) * lv;\n          g = (tone[1] + (1 - tone[1]) * wh) * lv;\n          b = (tone[2] + (1 - tone[2]) * wh) * lv;\n        }\n        display.setPixel(X0 + gx, y0 + gy, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n      }\n  });\n  // The shared spectrum: a dim tick at every eigenvalue, and the modes\n  // playing lit the full height of the strip, brightest at the top of their\n  // swing and in the tone of the side it swings to.\n  const span = (NG - 1) / (AX * lam[K - 1]), st = S.strip;\n  st.fill(0);\n  for (let m = 0; m \u003c K; m++) {\n    const xf = X0 + lam[m] * span, xi = floor(xf), fr = xf - xi;\n    const tone = swing[m] >= 0 ? up : down, on = cl(w[m] * 1.4, 0, 1) * (0.45 + 0.55 * abs(swing[m]));\n    for (let j = 0; j \u003c 10; j++) {\n      const tick = j >= 2 && j \u003c= 7 ? 0.26 : 0, lit = on * (j === 0 || j === 9 ? 0.5 : 1);\n      for (const [xx, f] of [[xi, 1 - fr], [xi + 1, fr]]) {\n        const q = (j * W + xx) * 3;\n        for (let c = 0; c \u003c 3; c++) st[q + c] += (tick * (1 - lit) * TICK[c] + lit * (tone[c] + (1 - tone[c]) * 0.35)) * f;\n      }\n    }\n  }\n  for (let j = 0; j \u003c 10; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (j * W + x) * 3;\n      display.setPixel(x, 59 + j, round(255 * min(1, st[q])), round(255 * min(1, st[q + 1])), round(255 * min(1, st[q + 2])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Mode=0..24, Beat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two tones round the wheel together, always half a turn apart: at 0 the membrane is rose where it is up and aqua where it is down, at 0.1 coral and sky blue, at 0.25 yellow-lime and indigo, at 0.5 aqua and rose, at 0.75 indigo and yellow-lime. Orange and yellow tones are paled a little and lifted up to 1.5 times, so the dim parts of a swing do not turn brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the fundamental swings once in 2.5 s and the 24th mode, 3.3 times higher, in 0.76 s, and on its climb the pair holds each mode 5 s. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Mode","min":0,"max":24,"about":"At 0 the drums climb their spectrum on their own from the 6th mode, a step every 5 s at Speed 2, back to the fundamental after the 24th. From 1 to 24 they hold that mode: 1 is a single dome; at 9 the nodal lines are exactly the seams between the seven half-squares, because that mode is the half-square's own lowest mode turned over at every seam; by 24 each drum is cut into eight to ten nodal domains, never laid out the same in the two."},{"name":"Beat","min":0,"max":1,"about":"Mixes in the mode three steps up, to half and half at 1. The two frequencies beat and the nodal lines sweep across both drums and come back in the same rhythm, because the two drums share every frequency; the strip lights both modes."}],"start":[0,2,0,0.06],"measures":{"motion":0.2952,"detail":0.0452,"edges":0.3635,"complexity":0.7651,"coverage":0.3333,"colour":0.1729,"drift":0.0914},"knobResponse":[0.0911,0.0611,0.0587,0.04]},{"slug":"ivy","title":"Ivy","family":"growth","round":15,"note":"돌담을 타고 담쟁이가 꼭대기까지 올라요. 바람이 잎을 뒤집어 옅은 뒷면이 물결치고, 가을이면 잎이 노랑에서 진홍으로 물들어 떨어져요. 겨울에는 맨 줄기에 검푸른 열매가 남아요.","idea":"Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.","buttons":"K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.","code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-ivy","type":"code","name":"ivy","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it."},{"name":"Vines","min":2,"max":6,"about":"How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither."},{"name":"Wind","min":-1,"max":1,"about":"Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away."}],"start":[0,2,2,0.06],"measures":{"motion":0.0893,"detail":0.1136,"edges":0.3366,"complexity":2.0732,"coverage":0.8558,"colour":0.304,"drift":0.0713},"knobResponse":[0.1737,0.0489,0.1412,0.1012]},{"slug":"j-invariant","title":"J-Invariant","family":"fractal","round":29,"note":"클라인의 j 함수를 위 반평면에 칠해요. j 가 위쪽 값으로 보내는 삼각형은 옅은 금색, 아래쪽 값으로 보내는 삼각형은 짙은 파랑이라 같은 타일이 패널 아래 실수축으로 갈수록 잘게 되풀이되고, j 의 크기를 나눈 등고선 띠가 영점마다 흘러나와요. K3 을 돌리면 실수축 쪽으로 여덟 배까지 다가가고, K1 을 누르면 빛이 맨 위 타일부터 세대마다 아래로 번져요.","idea":"Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.","buttons":"K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.","code":"// ===== Patternflow pattern =====\n// Title:   J-Invariant\n// Family:  fractal\n// Idea:    Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the modular j-invariant (Richard Dedekind, 1877; Felix Klein, 1878), drawn by domain colouring, pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue.\n// Knob 2: Speed. At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower.\n// Knob 3: Depth. Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel.\n// Knob 4: Bands. The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat.\n// Buttons: K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, atan2, sqrt, abs, round, asinh, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// Re units per LED at Depth 0, and how far below the bottom row the real\n// axis lies, in LEDs.\nconst S0 = 1 / 96, GAP = 0.5;\n\n// One point of the half-plane: it is carried into the fundamental domain\n// |Re t| \u003c= 1/2, |t| >= 1 by t -> t + n and t -> -1/t, and j is read off\n// there, where |q| = |e^(2 pi i t)| \u003c= e^(-pi sqrt 3) \u003c 0.0044, so five terms\n// of each q-series are exact to the last bit that shows. The results land in\n// OUT: log|j|, arg j, how fast log j turns per unit of the original t, how\n// many times t -> -1/t was taken (the tile's generation, counted down from\n// the top) and the point in the fundamental domain.\nconst OUT = new Float64Array(6);\nfunction jAt(x, y) {\n  const y0 = y;\n  let gen = 0;\n  for (; gen \u003c 60; gen++) {\n    x -= round(x);\n    const r2 = x * x + y * y;\n    if (r2 >= 1) break;\n    x = -x / r2;\n    y = y / r2;\n  }\n  // q = e^(2 pi i t); E4 and E6 by their divisor sums, and the log of the\n  // eta product as L = sum sigma(m)/m q^m, so Delta = q e^(-24 L) and\n  // j = E4^3 / Delta.\n  const m = exp(-TAU * y), qr = m * cos(TAU * x), qi = m * sin(TAU * x);\n  const q2r = qr * qr - qi * qi, q2i = 2 * qr * qi;\n  const q3r = q2r * qr - q2i * qi, q3i = q2r * qi + q2i * qr;\n  const q4r = q2r * q2r - q2i * q2i, q4i = 2 * q2r * q2i;\n  const q5r = q4r * qr - q4i * qi, q5i = q4r * qi + q4i * qr;\n  const e4r = 1 + 240 * (qr + 9 * q2r + 28 * q3r + 73 * q4r + 126 * q5r);\n  const e4i = 240 * (qi + 9 * q2i + 28 * q3i + 73 * q4i + 126 * q5i);\n  const e6r = 1 - 504 * (qr + 33 * q2r + 244 * q3r + 1057 * q4r + 3126 * q5r);\n  const e6i = -504 * (qi + 33 * q2i + 244 * q3i + 1057 * q4i + 3126 * q5i);\n  const Lr = qr + 1.5 * q2r + (4 / 3) * q3r + 1.75 * q4r + 1.2 * q5r;\n  const Li = qi + 1.5 * q2i + (4 / 3) * q3i + 1.75 * q4i + 1.2 * q5i;\n  const a4 = e4r * e4r + e4i * e4i + 1e-30;\n  OUT[0] = 1.5 * log(a4) + TAU * y + 24 * Lr;\n  OUT[1] = 3 * atan2(e4i, e4r) - TAU * x + 24 * Li;\n  // d log j / dt = -2 pi i E6 / E4 (Ramanujan's identities), and the map\n  // into the domain shrinks lengths by y / y0.\n  OUT[2] = TAU * sqrt((e6r * e6r + e6i * e6i) / a4) * (y / y0);\n  OUT[3] = gen;\n  OUT[4] = x;\n  OUT[5] = y;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The phase palette. Where j is real the half-plane is cut into Klein's\n// triangles, and j maps each triangle onto one half of the plane of values:\n// those onto Im j > 0 take the light family, those onto Im j \u003c 0 the dark\n// one, so the two alternate across every edge as in Klein's own figure.\n// Across a triangle the phase runs through pi; f runs along a family from the\n// edge where j > 0 to the edge where j \u003c 0. 64 steps each, then the mean\n// colour the two families blend to where the triangles are too small to draw.\nconst PN = 64;\nfunction palette(P) {\n  const t = P.pal;\n  for (let f = 0; f \u003c PN; f++) {\n    const u = f / (PN - 1);\n    hsv(P.hue + 0.13 - 0.11 * u, 0.5 + 0.25 * u, 1, t, f * 3);\n    // A dark orange or olive reads as brown, so the dark family lifts its\n    // light where its hue passes through them.\n    let h = P.hue + 0.58 + 0.16 * u;\n    h -= floor(h);\n    const lift = max(0, 1 - abs(h - 0.13) / 0.14);\n    hsv(h, 0.9, 0.5 + 0.08 * u + 0.38 * lift, t, (PN + f) * 3);\n  }\n  for (let c = 0; c \u003c 3; c++) {\n    let a = 0;\n    for (let f = 0; f \u003c 2 * PN; f++) a += t[f * 3 + c];\n    t[2 * PN * 3 + c] = a / (2 * PN);\n  }\n  P.palHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = { x: 0.18, flow: 0, hue: 0, depth: 0, bands: 0.06, gold: 0, g: 0, wave: -1, pal: new Float32Array((2 * PN + 1) * 3), palHue: -1, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.depth = cl(k[2], 0, 1);\n  P.bands = cl(k[3], 0, 1);\n  // The window slides about four LEDs a second at Speed 2, whatever the\n  // zoom. j repeats every 1 along the axis.\n  const s = S0 * 8 ** -P.depth;\n  P.x = (P.x + d * sp * 2 * s) % 1;\n  P.flow += d * sp * 0.22;\n  const b = input.btnPressed || [];\n  // K1 sends a wave of light down the generations, two and a half a\n  // second; K2 lays the gold edges on or takes them off.\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 30 ? -1 : P.wave + d * 2.5;\n  if (b[1]) P.gold = 1 - P.gold;\n  P.g += (P.gold - P.g) * min(1, d * 5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const s = S0 * 8 ** -P.depth, buf = P.buf, pal = P.pal, MEAN = 2 * PN * 3;\n  // Bands: nepers of |j| per band, how much of each band is ramp, and how\n  // dark a band starts.\n  const L = 2.2 * 0.18 ** P.bands, ramp = 0.85 - 0.6 * P.bands, lo = 0.6 - 0.32 * P.bands;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const y = (H - py - 0.5 + GAP) * s;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      jAt(P.x + (px + 0.5 - W / 2) * s, y);\n      // How fast log j turns per LED. Near an image of i it stalls while\n      // the tiles round it stay small, so the tile size at this height,\n      // about y, sets a floor; and the last rows above the axis, where every\n      // tile is a few LEDs at most, fade whatever it says.\n      const g = max(OUT[2] * s, (5 * s) / y), hf = sm(2.5, 9, y / s);\n      // A band or a phase turn per LED or more cannot be drawn; the colour\n      // there would be static. Contrast and colour fade as they crowd, and\n      // the light with them, so the cusps and the axis sink into the dark\n      // instead of shimmering.\n      const cb = (1 - sm(0.25, 0.55, g / L)) * hf, ch = (1 - sm(0.3, 0.7, g / PI)) * hf;\n      let u = OUT[0] / L - P.flow;\n      u -= floor(u);\n      // A sawtooth: each band brightens slowly and drops at its edge.\n      const saw = u \u003c ramp ? u / ramp : (1 - u) / (1 - ramp);\n      const v = ((lo + (1 - lo) * saw) * cb + 0.78 * (1 - cb)) * (0.3 + 0.7 * ch);\n      let a = OUT[1] / TAU;\n      a -= floor(a);\n      const up = a \u003c 0.5, f = up ? 2 * a : 2 - 2 * a, fi = (f * (PN - 1)) | 0, o = (up ? fi : PN + fi) * 3;\n      // Half an LED either side of a triangle edge the two families blend.\n      const e = (min(f, 1 - f) * PI) / g, w = e \u003c 0.5 ? 0.5 - e : 0, o2 = (up ? PN + fi : fi) * 3;\n      let r = pal[o] + (pal[o2] - pal[o]) * w, gg = pal[o + 1] + (pal[o2 + 1] - pal[o + 1]) * w, b = pal[o + 2] + (pal[o2 + 2] - pal[o + 2]) * w;\n      r = (r * ch + pal[MEAN] * (1 - ch)) * v * 255;\n      gg = (gg * ch + pal[MEAN + 1] * (1 - ch)) * v * 255;\n      b = (b * ch + pal[MEAN + 2] * (1 - ch)) * v * 255;\n      if (P.wave >= 0) {\n        // The wave: a tile flares as the front reaches its generation and\n        // keeps a little of the light for a while after.\n        const dw = P.wave - OUT[3], fl = max(exp(-dw * dw * 3), dw > 0 ? 0.35 * exp(-dw * 0.7) : 0) * (0.3 + 0.7 * ch);\n        r += (255 - r) * fl * 0.8;\n        gg += (250 - gg) * fl * 0.8;\n        b += (235 - b) * fl * 0.8;\n      }\n      if (P.g > 0.01) {\n        // The tile edges as gold geodesics a LED wide, faded where the\n        // tiles are too small to draw. The hyperbolic distance to the nearer\n        // of the walls Re = +-1/2 and the floor |t| = 1, times y, is the\n        // distance on the panel.\n        const X = OUT[4], Y = OUT[5], e2 = (asinh(min(0.5 - abs(X), (X * X + Y * Y - 1) / 2) / Y) * y) / s;\n        const w2 = cl(1.1 - e2, 0, 1) * P.g * ch;\n        r += (255 - r) * w2;\n        gg += (205 - gg) * w2;\n        b += (90 - b) * w2;\n      }\n      buf[p] = r;\n      buf[p + 1] = gg;\n      buf[p + 2] = b;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-j-invariant","type":"code","name":"j-invariant","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   J-Invariant\n// Family:  fractal\n// Idea:    Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the modular j-invariant (Richard Dedekind, 1877; Felix Klein, 1878), drawn by domain colouring, pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue.\n// Knob 2: Speed. At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower.\n// Knob 3: Depth. Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel.\n// Knob 4: Bands. The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat.\n// Buttons: K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, atan2, sqrt, abs, round, asinh, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// Re units per LED at Depth 0, and how far below the bottom row the real\n// axis lies, in LEDs.\nconst S0 = 1 / 96, GAP = 0.5;\n\n// One point of the half-plane: it is carried into the fundamental domain\n// |Re t| \u003c= 1/2, |t| >= 1 by t -> t + n and t -> -1/t, and j is read off\n// there, where |q| = |e^(2 pi i t)| \u003c= e^(-pi sqrt 3) \u003c 0.0044, so five terms\n// of each q-series are exact to the last bit that shows. The results land in\n// OUT: log|j|, arg j, how fast log j turns per unit of the original t, how\n// many times t -> -1/t was taken (the tile's generation, counted down from\n// the top) and the point in the fundamental domain.\nconst OUT = new Float64Array(6);\nfunction jAt(x, y) {\n  const y0 = y;\n  let gen = 0;\n  for (; gen \u003c 60; gen++) {\n    x -= round(x);\n    const r2 = x * x + y * y;\n    if (r2 >= 1) break;\n    x = -x / r2;\n    y = y / r2;\n  }\n  // q = e^(2 pi i t); E4 and E6 by their divisor sums, and the log of the\n  // eta product as L = sum sigma(m)/m q^m, so Delta = q e^(-24 L) and\n  // j = E4^3 / Delta.\n  const m = exp(-TAU * y), qr = m * cos(TAU * x), qi = m * sin(TAU * x);\n  const q2r = qr * qr - qi * qi, q2i = 2 * qr * qi;\n  const q3r = q2r * qr - q2i * qi, q3i = q2r * qi + q2i * qr;\n  const q4r = q2r * q2r - q2i * q2i, q4i = 2 * q2r * q2i;\n  const q5r = q4r * qr - q4i * qi, q5i = q4r * qi + q4i * qr;\n  const e4r = 1 + 240 * (qr + 9 * q2r + 28 * q3r + 73 * q4r + 126 * q5r);\n  const e4i = 240 * (qi + 9 * q2i + 28 * q3i + 73 * q4i + 126 * q5i);\n  const e6r = 1 - 504 * (qr + 33 * q2r + 244 * q3r + 1057 * q4r + 3126 * q5r);\n  const e6i = -504 * (qi + 33 * q2i + 244 * q3i + 1057 * q4i + 3126 * q5i);\n  const Lr = qr + 1.5 * q2r + (4 / 3) * q3r + 1.75 * q4r + 1.2 * q5r;\n  const Li = qi + 1.5 * q2i + (4 / 3) * q3i + 1.75 * q4i + 1.2 * q5i;\n  const a4 = e4r * e4r + e4i * e4i + 1e-30;\n  OUT[0] = 1.5 * log(a4) + TAU * y + 24 * Lr;\n  OUT[1] = 3 * atan2(e4i, e4r) - TAU * x + 24 * Li;\n  // d log j / dt = -2 pi i E6 / E4 (Ramanujan's identities), and the map\n  // into the domain shrinks lengths by y / y0.\n  OUT[2] = TAU * sqrt((e6r * e6r + e6i * e6i) / a4) * (y / y0);\n  OUT[3] = gen;\n  OUT[4] = x;\n  OUT[5] = y;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The phase palette. Where j is real the half-plane is cut into Klein's\n// triangles, and j maps each triangle onto one half of the plane of values:\n// those onto Im j > 0 take the light family, those onto Im j \u003c 0 the dark\n// one, so the two alternate across every edge as in Klein's own figure.\n// Across a triangle the phase runs through pi; f runs along a family from the\n// edge where j > 0 to the edge where j \u003c 0. 64 steps each, then the mean\n// colour the two families blend to where the triangles are too small to draw.\nconst PN = 64;\nfunction palette(P) {\n  const t = P.pal;\n  for (let f = 0; f \u003c PN; f++) {\n    const u = f / (PN - 1);\n    hsv(P.hue + 0.13 - 0.11 * u, 0.5 + 0.25 * u, 1, t, f * 3);\n    // A dark orange or olive reads as brown, so the dark family lifts its\n    // light where its hue passes through them.\n    let h = P.hue + 0.58 + 0.16 * u;\n    h -= floor(h);\n    const lift = max(0, 1 - abs(h - 0.13) / 0.14);\n    hsv(h, 0.9, 0.5 + 0.08 * u + 0.38 * lift, t, (PN + f) * 3);\n  }\n  for (let c = 0; c \u003c 3; c++) {\n    let a = 0;\n    for (let f = 0; f \u003c 2 * PN; f++) a += t[f * 3 + c];\n    t[2 * PN * 3 + c] = a / (2 * PN);\n  }\n  P.palHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = { x: 0.18, flow: 0, hue: 0, depth: 0, bands: 0.06, gold: 0, g: 0, wave: -1, pal: new Float32Array((2 * PN + 1) * 3), palHue: -1, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.depth = cl(k[2], 0, 1);\n  P.bands = cl(k[3], 0, 1);\n  // The window slides about four LEDs a second at Speed 2, whatever the\n  // zoom. j repeats every 1 along the axis.\n  const s = S0 * 8 ** -P.depth;\n  P.x = (P.x + d * sp * 2 * s) % 1;\n  P.flow += d * sp * 0.22;\n  const b = input.btnPressed || [];\n  // K1 sends a wave of light down the generations, two and a half a\n  // second; K2 lays the gold edges on or takes them off.\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 30 ? -1 : P.wave + d * 2.5;\n  if (b[1]) P.gold = 1 - P.gold;\n  P.g += (P.gold - P.g) * min(1, d * 5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const s = S0 * 8 ** -P.depth, buf = P.buf, pal = P.pal, MEAN = 2 * PN * 3;\n  // Bands: nepers of |j| per band, how much of each band is ramp, and how\n  // dark a band starts.\n  const L = 2.2 * 0.18 ** P.bands, ramp = 0.85 - 0.6 * P.bands, lo = 0.6 - 0.32 * P.bands;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const y = (H - py - 0.5 + GAP) * s;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      jAt(P.x + (px + 0.5 - W / 2) * s, y);\n      // How fast log j turns per LED. Near an image of i it stalls while\n      // the tiles round it stay small, so the tile size at this height,\n      // about y, sets a floor; and the last rows above the axis, where every\n      // tile is a few LEDs at most, fade whatever it says.\n      const g = max(OUT[2] * s, (5 * s) / y), hf = sm(2.5, 9, y / s);\n      // A band or a phase turn per LED or more cannot be drawn; the colour\n      // there would be static. Contrast and colour fade as they crowd, and\n      // the light with them, so the cusps and the axis sink into the dark\n      // instead of shimmering.\n      const cb = (1 - sm(0.25, 0.55, g / L)) * hf, ch = (1 - sm(0.3, 0.7, g / PI)) * hf;\n      let u = OUT[0] / L - P.flow;\n      u -= floor(u);\n      // A sawtooth: each band brightens slowly and drops at its edge.\n      const saw = u \u003c ramp ? u / ramp : (1 - u) / (1 - ramp);\n      const v = ((lo + (1 - lo) * saw) * cb + 0.78 * (1 - cb)) * (0.3 + 0.7 * ch);\n      let a = OUT[1] / TAU;\n      a -= floor(a);\n      const up = a \u003c 0.5, f = up ? 2 * a : 2 - 2 * a, fi = (f * (PN - 1)) | 0, o = (up ? fi : PN + fi) * 3;\n      // Half an LED either side of a triangle edge the two families blend.\n      const e = (min(f, 1 - f) * PI) / g, w = e \u003c 0.5 ? 0.5 - e : 0, o2 = (up ? PN + fi : fi) * 3;\n      let r = pal[o] + (pal[o2] - pal[o]) * w, gg = pal[o + 1] + (pal[o2 + 1] - pal[o + 1]) * w, b = pal[o + 2] + (pal[o2 + 2] - pal[o + 2]) * w;\n      r = (r * ch + pal[MEAN] * (1 - ch)) * v * 255;\n      gg = (gg * ch + pal[MEAN + 1] * (1 - ch)) * v * 255;\n      b = (b * ch + pal[MEAN + 2] * (1 - ch)) * v * 255;\n      if (P.wave >= 0) {\n        // The wave: a tile flares as the front reaches its generation and\n        // keeps a little of the light for a while after.\n        const dw = P.wave - OUT[3], fl = max(exp(-dw * dw * 3), dw > 0 ? 0.35 * exp(-dw * 0.7) : 0) * (0.3 + 0.7 * ch);\n        r += (255 - r) * fl * 0.8;\n        gg += (250 - gg) * fl * 0.8;\n        b += (235 - b) * fl * 0.8;\n      }\n      if (P.g > 0.01) {\n        // The tile edges as gold geodesics a LED wide, faded where the\n        // tiles are too small to draw. The hyperbolic distance to the nearer\n        // of the walls Re = +-1/2 and the floor |t| = 1, times y, is the\n        // distance on the panel.\n        const X = OUT[4], Y = OUT[5], e2 = (asinh(min(0.5 - abs(X), (X * X + Y * Y - 1) / 2) / Y) * y) / s;\n        const w2 = cl(1.1 - e2, 0, 1) * P.g * ch;\n        r += (255 - r) * w2;\n        gg += (205 - gg) * w2;\n        b += (90 - b) * w2;\n      }\n      buf[p] = r;\n      buf[p + 1] = gg;\n      buf[p + 2] = b;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower."},{"name":"Depth","min":0,"max":1,"about":"Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel."},{"name":"Bands","min":0,"max":1,"about":"The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat."}],"start":[0,2,0,0.06],"measures":{"motion":0.3718,"detail":0.0494,"edges":0.1733,"complexity":2.6926,"coverage":1,"colour":0.3996,"drift":0.1786},"knobResponse":[0.3542,0.2406,0.2621,0.0689]},{"slug":"jacobs-ladder","title":"Jacob's Ladder","family":"light","round":6,"note":"두 막대가 가장 가까운 목에서 보랏빛 아크가 튀어, 벌어지는 V 를 타고 막대 끝까지 올라가 끊어져요. 위의 아크가 끝에 닿기 전에 목에서 다음 아크가 튀고, K4 를 올리면 지나간 아크가 사다리 가로대로 쌓여요.","idea":"An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.","buttons":"K1 tap strikes a new arc now.","code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-jacobs-ladder","type":"code","name":"jacobs-ladder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the gas the arc burns in, starting from the violet of an arc in air."},{"name":"Power","min":0.3,"max":3,"about":"How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone."},{"name":"Spread","min":0,"max":1,"about":"How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down."},{"name":"Exposure","min":0,"max":1,"about":"How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder."}],"start":[0,2,0,0.06],"measures":{"motion":0.8103,"detail":0.0208,"edges":0.2771,"complexity":0.702,"coverage":0.2778,"colour":0.0843,"drift":0.105},"knobResponse":[0.0479,0.0767,0.0696,0.0781]},{"slug":"jacquard","title":"Jacquard Loom","family":"textile","round":4,"note":"구멍 뚫린 카드가 한 장씩 내려와 날실을 들어 올리면 북이 씨실을 끌고 지나가고, 바디가 그 씨실을 쳐 넣어요. 아래로 짜여 내려가는 천에 카드 구멍이 적어 둔 다이아몬드가 서요.","idea":"A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.","buttons":"K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.","code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-jacquard","type":"code","name":"jacquard","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green."},{"name":"Speed","min":0.5,"max":5,"about":"Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak."},{"name":"Card","min":1,"max":4,"about":"The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down."},{"name":"Stripes","min":0,"max":1,"about":"How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks."}],"start":[0,2,1,0.06],"measures":{"motion":1.0063,"detail":0.2005,"edges":0.8201,"complexity":0.1835,"coverage":0.8529,"colour":0.5431,"drift":0.0411},"knobResponse":[0.3764,0.209,0.2197,0.1447]},{"slug":"jelly","title":"Jelly","family":"physics","round":2,"note":"젤리마다 질량 18개를 용수철과 안쪽 압력으로 묶은 고리예요. 키 큰 병에 떨어져 눌린 채 쌓여 출렁이다가, 하나씩 통 튀어 올라 다른 젤리 위로 굴러떨어져요.","idea":"Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.","buttons":"K1 tap shakes the jar.","code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","layer":{"id":"layer-jelly","type":"code","name":"jelly","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match."},{"name":"Gravity","min":-1,"max":3,"about":"Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid."},{"name":"Softness","min":0,"max":1,"about":"Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other."},{"name":"Count","min":4,"max":12,"about":"How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room."}],"start":[0,2,0,4],"measures":{"motion":0.4127,"detail":0.0345,"edges":0.4341,"complexity":0.5229,"coverage":0.4923,"colour":0.4252,"drift":0.1653},"knobResponse":[0.2349,0.3804,0.1184,0.2314]},{"slug":"johnson-mehl","title":"Johnson-Mehl","family":"cells","round":37,"note":"결정이 아무 때나 아무 데서 태어나 같은 빠르기로 원처럼 자라고, LED 마다 먼저 닿은 결정의 것이 돼요. 늦게 난 결정은 작고 둥글게 남아서 먼저 난 결정과 곧은 선이 아니라 쌍곡선 호에서 만나고, 한 상이 판을 다 채우면 다음 상이 그 위로 자라요. 위 12줄은 바뀐 몫을 아브라미 곡선과 나란히 그려요. K4 를 1로 돌리면 결정이 한꺼번에 태어나 경계가 곧은 보로노이가 되고, 누르면 다음 상이 바로 시작해요.","idea":"Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.","buttons":"K1 tap starts the next phase at once, over whatever has turned so far.","code":"// ===== Patternflow pattern =====\n// Title:   Johnson-Mehl\n// Family:  cells\n// Idea:    Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Johnson-Mehl tessellation (William Johnson and Robert Mehl, 1939), with Avrami's law (Melvin Avrami, 1939), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1\n//\n// Knob 1: Hue. Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan.\n// Knob 2: Speed. The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s.\n// Knob 3: Rate. The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3.\n// Knob 4: Mode. How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2.\n// Buttons: K1 tap starts the next phase at once, over whatever has turned so far.\n\n// Johnson and Mehl, and Avrami in the same year, asked how much of a sample\n// has turned by time t when nuclei appear at random, at rate I on the ground\n// not yet turned, and every grain grows at speed V. In the plane the answer\n// is X(t) = 1 - exp(-(pi / 3) I V^2 t^3). The exponent counts the nuclei, real\n// or phantom, whose discs would have reached a point by t; the chance that\n// none has is its exponential. A nucleus that falls on turned ground is a\n// phantom and is dropped: nucleate() looks at its cell first.\n//\n// Checked on this field, 64 by 115 LEDs, averaged over 120 phases at the\n// start knobs: the share turned stays within 0.015 of Avrami's curve all the\n// way; in Mode 1 within 0.013, at Rate 80 within 0.009. One phase alone\n// strays more, a median of 0.094 at Rate 4 and 0.034 at Rate 80, and the\n// strip shows one phase. Without the margin below the edges of the field\n// starve, as no grain can come in from outside: the share lagged the curve\n// by up to 0.063, and a phase took 2.14 Avrami times to fill instead of 1.82.\n\n// The plot takes the top 12 rows, a dark row parts it from the field, and\n// the field is the other 115.\nconst W = 64, H = 128, TOP = 12, FY = TOP + 1, FH = H - FY, FN = W * FH;\n// The grains grow on a grid 24 LEDs wider than the field on every side, and\n// nuclei are born there too, so the field is a window on a larger sample.\nconst M = 24, GW = W + 2 * M, GH = FH + 2 * M, GN = GW * GH;\n// Growth speed in LEDs a second at Speed 1; rate in nuclei per 10,000 LEDs\n// a second at Speed 1. The rim is the last 0.8 s of growth, 1.6 LEDs.\nconst V = 2, RATE_UNIT = 1e-4, RIM = 0.8, CACHE = 4096;\nconst { floor, sqrt, exp, log, random, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst G43 = 0.89298; // Gamma(4/3)\n// The phases take turns in three hues, blue, gold and rose at Hue 0, so a\n// phase never grows over one of its own colour, not even after a tap has\n// left two phases showing underneath it.\nconst PHASE = [0.56, 0.1, 0.88];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\n// Two numbers in [0, 1) from a grain's id: its orientation and its shade.\nfunction hash(id, salt) {\n  let h = Math.imul(id ^ salt, 0x9e3779b1);\n  h ^= h >>> 15;\n  h = Math.imul(h, 0x85ebca6b);\n  h ^= h >>> 13;\n  return (h >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: 0, speed: 2, rate: 4, mode: 0.06,\n    clock: 0, gen: 0, nextId: 1, nextBirth: Infinity, lambda: 0, ns: 0,\n    T: new Float32Array(GN), O: new Int32Array(GN), U: new Int32Array(FN), UP: new Uint8Array(FN),\n    meas: new Float32Array(W), filled: 0, X: 0, tEnd: 1,\n    cId: new Int32Array(CACHE).fill(-1), cRGB: new Float32Array(CACHE * 3), cHue: NaN, rgb: new Float32Array(3),\n  };\n}\n\n// The rate of the continuous part and the density of the nuclei all born\n// at once. A pure Johnson-Mehl run with rate I ends with I Gamma(4/3) tau\n// grains per LED, tau = (3 / (pi I V^2))^(1/3) the time at which Avrami's\n// exponent reaches 1. Mode m moves that share m of them to time 0, so the\n// grain count stays about the same from one end of the knob to the other.\nfunction rates(S) {\n  const I = S.rate * RATE_UNIT, tau = Math.cbrt(3 / (PI * I * V * V));\n  return { I, cont: (1 - S.mode) * I, sat: S.mode * I * G43 * tau };\n}\n\nfunction nucleate(S, x, y, t) {\n  const { T, O } = S;\n  const cx = floor(x), cy = floor(y);\n  if (T[cy * GW + cx] \u003c= t) return false;\n  const id = S.nextId++;\n  // T_i(p) = t_i + |p - x_i| / V, kept where it is the earliest. Only as\n  // far as the front can get by 2.5 plot spans, five times Avrami's time;\n  // by then a cell is still open with odds of exp(-25) or less. At Rate 80\n  // in Mode 1 that cut the 400 nuclei born on one frame from 18 ms to 3.\n  const R = V * max(0, 2.5 * S.tEnd - t);\n  const i0 = max(0, floor(x - R)), i1 = min(GW - 1, floor(x + R)), j0 = max(0, floor(y - R)), j1 = min(GH - 1, floor(y + R));\n  for (let j = j0; j \u003c= j1; j++) {\n    const dy = j + 0.5 - y, dy2 = dy * dy;\n    for (let i = i0, c = j * GW + i0; i \u003c= i1; i++, c++) {\n      const dx = i + 0.5 - x, a = t + sqrt(dx * dx + dy2) / V;\n      if (a \u003c T[c]) {\n        T[c] = a;\n        O[c] = id;\n      }\n    }\n  }\n  return true;\n}\n\nfunction drawWait(S) {\n  S.nextBirth = S.lambda > 0 ? S.clock - log(1 - random()) / S.lambda : Infinity;\n}\n\n// A new phase: what shows now becomes the layer underneath, the grid is\n// cleared, and the site-saturated share is born at once.\nfunction nextPhase(S) {\n  const { T, O, U, UP } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      if (T[c] \u003c= S.clock && O[c] > 0) {\n        U[p] = O[c];\n        UP[p] = par;\n      }\n    }\n  S.gen++;\n  S.clock = 0;\n  T.fill(Infinity);\n  O.fill(0);\n  const r = rates(S);\n  S.ns = r.sat;\n  S.lambda = r.cont * GN;\n  // The span first: it sets how far each nucleus below is drawn.\n  theoryEnd(S);\n  // A Poisson count of nuclei at time 0, by inversion.\n  const mean = r.sat * GN;\n  let n = 0;\n  if (mean > 0) {\n    let L = exp(-min(mean, 600)), p = 1, u = random();\n    if (mean > 600) n = floor(mean);\n    else {\n      let acc = L;\n      while (u > acc && n \u003c 4000) {\n        n++;\n        p *= mean / n;\n        acc += L * p;\n      }\n    }\n  }\n  for (let i = 0; i \u003c n; i++) nucleate(S, random() * GW, random() * GH, 0);\n  drawWait(S);\n  S.meas.fill(0);\n  S.filled = 0;\n  S.X = 0;\n}\n\n// Avrami: X(t) = 1 - exp(-pi V^2 (Ns t^2 + (1 - m) I t^3 / 3)). The plot\n// runs to twice the time at which the exponent is 1.\nfunction avramiExp(S, t) {\n  const r = rates(S);\n  return PI * V * V * (S.ns * t * t + (r.cont * t * t * t) / 3);\n}\nfunction theoryEnd(S) {\n  let lo = 0, hi = 1;\n  while (avramiExp(S, hi) \u003c 1) hi *= 2;\n  for (let k = 0; k \u003c 40; k++) {\n    const mid = 0.5 * (lo + hi);\n    if (avramiExp(S, mid) \u003c 1) lo = mid;\n    else hi = mid;\n  }\n  S.tEnd = 2 * hi;\n}\n\n// Advance the clock by d, birthing the continuous nuclei in order, and\n// measure the share of the field turned.\nfunction advance(S, d) {\n  const target = S.clock + d;\n  while (S.nextBirth \u003c= target) {\n    S.clock = S.nextBirth;\n    nucleate(S, random() * GW, random() * GH, S.clock);\n    drawWait(S);\n  }\n  S.clock = target;\n  let n = 0;\n  const T = S.T;\n  for (let y = 0; y \u003c FH; y++) for (let c = (y + M) * GW + M, e = c + W; c \u003c e; c++) if (T[c] \u003c= target) n++;\n  S.X = n / FN;\n  return n === FN;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 4, 80);\n  S.mode = cl(k[3], 0, 1);\n  const lam = rates(S).cont * GN;\n  if (lam !== S.lambda) {\n    S.lambda = lam;\n    drawWait(S);\n    theoryEnd(S);\n  }\n  if (!S.ready) {\n    // The first phase grows to the end before the first frame, so the\n    // panel opens full and the second phase starts over it.\n    S.gen = 2;\n    nextPhase(S);\n    while (!advance(S, 0.25) && S.clock \u003c 3 * S.tEnd);\n    nextPhase(S);\n    S.ready = true;\n  }\n  const tap = input.btnPressed && input.btnPressed[0];\n  const full = advance(S, d * S.speed);\n  // The plot takes one column per 64th of its time span.\n  while (S.filled \u003c W && S.clock >= ((S.filled + 1) / W) * S.tEnd) S.meas[S.filled++] = S.X;\n  if (full || tap || S.clock > 3 * S.tEnd) nextPhase(S);\n}\n\nfunction grainRGB(S, id, par, out) {\n  const slot = id & (CACHE - 1), o = slot * 3;\n  if (S.cId[slot] === id * 3 + par) {\n    out[0] = S.cRGB[o];\n    out[1] = S.cRGB[o + 1];\n    out[2] = S.cRGB[o + 2];\n    return;\n  }\n  const th = hash(id, 0x51ed), q = hash(id, 0x2c1b);\n  let h = S.hue + PHASE[par] + (th - 0.5) * 0.1;\n  h -= floor(h);\n  // Red, orange, gold and yellow keep their brightness and change shade by\n  // saturation; a darker gold reads olive and a darker orange brown. The\n  // lift fades out over lime and over rose.\n  const warm = h \u003c 0.2 ? 1 : h \u003c 0.27 ? (0.27 - h) / 0.07 : h > 0.95 ? 1 : h > 0.89 ? (h - 0.89) / 0.06 : 0;\n  const s = 0.5 + 0.4 * q - 0.05 * warm, v = 0.6 + 0.4 * (1 - q) + warm * (0.32 - 0.32 * (1 - q));\n  hsv(h, s, v, S.cRGB, o);\n  S.cId[slot] = id * 3 + par;\n  out[0] = S.cRGB[o];\n  out[1] = S.cRGB[o + 1];\n  out[2] = S.cRGB[o + 2];\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  if (S.cHue !== S.hue) {\n    S.cId.fill(-1);\n    S.cHue = S.hue;\n  }\n  const { T, O, U, UP, clock, rgb } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      let r, g, b;\n      if (T[c] \u003c= clock) {\n        const id = O[c];\n        grainRGB(S, id, par, rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] \u003c= clock && O[c + 1] !== id) || (y + 1 \u003c FH && T[c + GW] \u003c= clock && O[c + GW] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n        else {\n          const age = clock - T[c];\n          if (age \u003c RIM) {\n            const w = 0.8 * (1 - age / RIM);\n            r += (255 - r) * w;\n            g += (255 - g) * w;\n            b += (255 - b) * w;\n          }\n        }\n      } else {\n        const id = U[p];\n        grainRGB(S, id, UP[p], rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] > clock && U[p + 1] !== id) || (y + 1 \u003c FH && T[c + GW] > clock && U[p + W] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n      }\n      display.setPixel(x, y + FY, r, g, b);\n    }\n  }\n  // The plot: the share of the field turned so far, one column per 64th of\n  // the span, filled in the new phase's colour on black, and Avrami's curve\n  // as a pale line across the whole width. A dim fill read brown in gold.\n  const newC = [0, 0, 0];\n  hsv(S.hue + PHASE[par], 0.75, 1, newC, 0);\n  let prev = -1;\n  for (let x = 0; x \u003c W; x++) {\n    const hgt = x \u003c S.filled ? S.meas[x] * TOP : 0;\n    for (let yy = 0; yy \u003c TOP; yy++) {\n      const f = cl(hgt - (TOP - 1 - yy), 0, 1);\n      if (f > 0) display.setPixel(x, yy, newC[0] * f, newC[1] * f, newC[2] * f);\n    }\n    const t = ((x + 1) / W) * S.tEnd, X = 1 - exp(-avramiExp(S, t)), row = cl(floor((1 - X) * TOP - 0.001), 0, TOP - 1);\n    const a = prev \u003c 0 ? row : min(prev, row), bnd = prev \u003c 0 ? row : max(prev, row);\n    for (let yy = a; yy \u003c= bnd; yy++) display.setPixel(x, yy, 235, 235, 235);\n    prev = row;\n  }\n}\n","layer":{"id":"layer-johnson-mehl","type":"code","name":"johnson-mehl","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Johnson-Mehl\n// Family:  cells\n// Idea:    Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Johnson-Mehl tessellation (William Johnson and Robert Mehl, 1939), with Avrami's law (Melvin Avrami, 1939), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1\n//\n// Knob 1: Hue. Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan.\n// Knob 2: Speed. The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s.\n// Knob 3: Rate. The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3.\n// Knob 4: Mode. How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2.\n// Buttons: K1 tap starts the next phase at once, over whatever has turned so far.\n\n// Johnson and Mehl, and Avrami in the same year, asked how much of a sample\n// has turned by time t when nuclei appear at random, at rate I on the ground\n// not yet turned, and every grain grows at speed V. In the plane the answer\n// is X(t) = 1 - exp(-(pi / 3) I V^2 t^3). The exponent counts the nuclei, real\n// or phantom, whose discs would have reached a point by t; the chance that\n// none has is its exponential. A nucleus that falls on turned ground is a\n// phantom and is dropped: nucleate() looks at its cell first.\n//\n// Checked on this field, 64 by 115 LEDs, averaged over 120 phases at the\n// start knobs: the share turned stays within 0.015 of Avrami's curve all the\n// way; in Mode 1 within 0.013, at Rate 80 within 0.009. One phase alone\n// strays more, a median of 0.094 at Rate 4 and 0.034 at Rate 80, and the\n// strip shows one phase. Without the margin below the edges of the field\n// starve, as no grain can come in from outside: the share lagged the curve\n// by up to 0.063, and a phase took 2.14 Avrami times to fill instead of 1.82.\n\n// The plot takes the top 12 rows, a dark row parts it from the field, and\n// the field is the other 115.\nconst W = 64, H = 128, TOP = 12, FY = TOP + 1, FH = H - FY, FN = W * FH;\n// The grains grow on a grid 24 LEDs wider than the field on every side, and\n// nuclei are born there too, so the field is a window on a larger sample.\nconst M = 24, GW = W + 2 * M, GH = FH + 2 * M, GN = GW * GH;\n// Growth speed in LEDs a second at Speed 1; rate in nuclei per 10,000 LEDs\n// a second at Speed 1. The rim is the last 0.8 s of growth, 1.6 LEDs.\nconst V = 2, RATE_UNIT = 1e-4, RIM = 0.8, CACHE = 4096;\nconst { floor, sqrt, exp, log, random, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst G43 = 0.89298; // Gamma(4/3)\n// The phases take turns in three hues, blue, gold and rose at Hue 0, so a\n// phase never grows over one of its own colour, not even after a tap has\n// left two phases showing underneath it.\nconst PHASE = [0.56, 0.1, 0.88];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\n// Two numbers in [0, 1) from a grain's id: its orientation and its shade.\nfunction hash(id, salt) {\n  let h = Math.imul(id ^ salt, 0x9e3779b1);\n  h ^= h >>> 15;\n  h = Math.imul(h, 0x85ebca6b);\n  h ^= h >>> 13;\n  return (h >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: 0, speed: 2, rate: 4, mode: 0.06,\n    clock: 0, gen: 0, nextId: 1, nextBirth: Infinity, lambda: 0, ns: 0,\n    T: new Float32Array(GN), O: new Int32Array(GN), U: new Int32Array(FN), UP: new Uint8Array(FN),\n    meas: new Float32Array(W), filled: 0, X: 0, tEnd: 1,\n    cId: new Int32Array(CACHE).fill(-1), cRGB: new Float32Array(CACHE * 3), cHue: NaN, rgb: new Float32Array(3),\n  };\n}\n\n// The rate of the continuous part and the density of the nuclei all born\n// at once. A pure Johnson-Mehl run with rate I ends with I Gamma(4/3) tau\n// grains per LED, tau = (3 / (pi I V^2))^(1/3) the time at which Avrami's\n// exponent reaches 1. Mode m moves that share m of them to time 0, so the\n// grain count stays about the same from one end of the knob to the other.\nfunction rates(S) {\n  const I = S.rate * RATE_UNIT, tau = Math.cbrt(3 / (PI * I * V * V));\n  return { I, cont: (1 - S.mode) * I, sat: S.mode * I * G43 * tau };\n}\n\nfunction nucleate(S, x, y, t) {\n  const { T, O } = S;\n  const cx = floor(x), cy = floor(y);\n  if (T[cy * GW + cx] \u003c= t) return false;\n  const id = S.nextId++;\n  // T_i(p) = t_i + |p - x_i| / V, kept where it is the earliest. Only as\n  // far as the front can get by 2.5 plot spans, five times Avrami's time;\n  // by then a cell is still open with odds of exp(-25) or less. At Rate 80\n  // in Mode 1 that cut the 400 nuclei born on one frame from 18 ms to 3.\n  const R = V * max(0, 2.5 * S.tEnd - t);\n  const i0 = max(0, floor(x - R)), i1 = min(GW - 1, floor(x + R)), j0 = max(0, floor(y - R)), j1 = min(GH - 1, floor(y + R));\n  for (let j = j0; j \u003c= j1; j++) {\n    const dy = j + 0.5 - y, dy2 = dy * dy;\n    for (let i = i0, c = j * GW + i0; i \u003c= i1; i++, c++) {\n      const dx = i + 0.5 - x, a = t + sqrt(dx * dx + dy2) / V;\n      if (a \u003c T[c]) {\n        T[c] = a;\n        O[c] = id;\n      }\n    }\n  }\n  return true;\n}\n\nfunction drawWait(S) {\n  S.nextBirth = S.lambda > 0 ? S.clock - log(1 - random()) / S.lambda : Infinity;\n}\n\n// A new phase: what shows now becomes the layer underneath, the grid is\n// cleared, and the site-saturated share is born at once.\nfunction nextPhase(S) {\n  const { T, O, U, UP } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      if (T[c] \u003c= S.clock && O[c] > 0) {\n        U[p] = O[c];\n        UP[p] = par;\n      }\n    }\n  S.gen++;\n  S.clock = 0;\n  T.fill(Infinity);\n  O.fill(0);\n  const r = rates(S);\n  S.ns = r.sat;\n  S.lambda = r.cont * GN;\n  // The span first: it sets how far each nucleus below is drawn.\n  theoryEnd(S);\n  // A Poisson count of nuclei at time 0, by inversion.\n  const mean = r.sat * GN;\n  let n = 0;\n  if (mean > 0) {\n    let L = exp(-min(mean, 600)), p = 1, u = random();\n    if (mean > 600) n = floor(mean);\n    else {\n      let acc = L;\n      while (u > acc && n \u003c 4000) {\n        n++;\n        p *= mean / n;\n        acc += L * p;\n      }\n    }\n  }\n  for (let i = 0; i \u003c n; i++) nucleate(S, random() * GW, random() * GH, 0);\n  drawWait(S);\n  S.meas.fill(0);\n  S.filled = 0;\n  S.X = 0;\n}\n\n// Avrami: X(t) = 1 - exp(-pi V^2 (Ns t^2 + (1 - m) I t^3 / 3)). The plot\n// runs to twice the time at which the exponent is 1.\nfunction avramiExp(S, t) {\n  const r = rates(S);\n  return PI * V * V * (S.ns * t * t + (r.cont * t * t * t) / 3);\n}\nfunction theoryEnd(S) {\n  let lo = 0, hi = 1;\n  while (avramiExp(S, hi) \u003c 1) hi *= 2;\n  for (let k = 0; k \u003c 40; k++) {\n    const mid = 0.5 * (lo + hi);\n    if (avramiExp(S, mid) \u003c 1) lo = mid;\n    else hi = mid;\n  }\n  S.tEnd = 2 * hi;\n}\n\n// Advance the clock by d, birthing the continuous nuclei in order, and\n// measure the share of the field turned.\nfunction advance(S, d) {\n  const target = S.clock + d;\n  while (S.nextBirth \u003c= target) {\n    S.clock = S.nextBirth;\n    nucleate(S, random() * GW, random() * GH, S.clock);\n    drawWait(S);\n  }\n  S.clock = target;\n  let n = 0;\n  const T = S.T;\n  for (let y = 0; y \u003c FH; y++) for (let c = (y + M) * GW + M, e = c + W; c \u003c e; c++) if (T[c] \u003c= target) n++;\n  S.X = n / FN;\n  return n === FN;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 4, 80);\n  S.mode = cl(k[3], 0, 1);\n  const lam = rates(S).cont * GN;\n  if (lam !== S.lambda) {\n    S.lambda = lam;\n    drawWait(S);\n    theoryEnd(S);\n  }\n  if (!S.ready) {\n    // The first phase grows to the end before the first frame, so the\n    // panel opens full and the second phase starts over it.\n    S.gen = 2;\n    nextPhase(S);\n    while (!advance(S, 0.25) && S.clock \u003c 3 * S.tEnd);\n    nextPhase(S);\n    S.ready = true;\n  }\n  const tap = input.btnPressed && input.btnPressed[0];\n  const full = advance(S, d * S.speed);\n  // The plot takes one column per 64th of its time span.\n  while (S.filled \u003c W && S.clock >= ((S.filled + 1) / W) * S.tEnd) S.meas[S.filled++] = S.X;\n  if (full || tap || S.clock > 3 * S.tEnd) nextPhase(S);\n}\n\nfunction grainRGB(S, id, par, out) {\n  const slot = id & (CACHE - 1), o = slot * 3;\n  if (S.cId[slot] === id * 3 + par) {\n    out[0] = S.cRGB[o];\n    out[1] = S.cRGB[o + 1];\n    out[2] = S.cRGB[o + 2];\n    return;\n  }\n  const th = hash(id, 0x51ed), q = hash(id, 0x2c1b);\n  let h = S.hue + PHASE[par] + (th - 0.5) * 0.1;\n  h -= floor(h);\n  // Red, orange, gold and yellow keep their brightness and change shade by\n  // saturation; a darker gold reads olive and a darker orange brown. The\n  // lift fades out over lime and over rose.\n  const warm = h \u003c 0.2 ? 1 : h \u003c 0.27 ? (0.27 - h) / 0.07 : h > 0.95 ? 1 : h > 0.89 ? (h - 0.89) / 0.06 : 0;\n  const s = 0.5 + 0.4 * q - 0.05 * warm, v = 0.6 + 0.4 * (1 - q) + warm * (0.32 - 0.32 * (1 - q));\n  hsv(h, s, v, S.cRGB, o);\n  S.cId[slot] = id * 3 + par;\n  out[0] = S.cRGB[o];\n  out[1] = S.cRGB[o + 1];\n  out[2] = S.cRGB[o + 2];\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  if (S.cHue !== S.hue) {\n    S.cId.fill(-1);\n    S.cHue = S.hue;\n  }\n  const { T, O, U, UP, clock, rgb } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      let r, g, b;\n      if (T[c] \u003c= clock) {\n        const id = O[c];\n        grainRGB(S, id, par, rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] \u003c= clock && O[c + 1] !== id) || (y + 1 \u003c FH && T[c + GW] \u003c= clock && O[c + GW] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n        else {\n          const age = clock - T[c];\n          if (age \u003c RIM) {\n            const w = 0.8 * (1 - age / RIM);\n            r += (255 - r) * w;\n            g += (255 - g) * w;\n            b += (255 - b) * w;\n          }\n        }\n      } else {\n        const id = U[p];\n        grainRGB(S, id, UP[p], rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] > clock && U[p + 1] !== id) || (y + 1 \u003c FH && T[c + GW] > clock && U[p + W] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n      }\n      display.setPixel(x, y + FY, r, g, b);\n    }\n  }\n  // The plot: the share of the field turned so far, one column per 64th of\n  // the span, filled in the new phase's colour on black, and Avrami's curve\n  // as a pale line across the whole width. A dim fill read brown in gold.\n  const newC = [0, 0, 0];\n  hsv(S.hue + PHASE[par], 0.75, 1, newC, 0);\n  let prev = -1;\n  for (let x = 0; x \u003c W; x++) {\n    const hgt = x \u003c S.filled ? S.meas[x] * TOP : 0;\n    for (let yy = 0; yy \u003c TOP; yy++) {\n      const f = cl(hgt - (TOP - 1 - yy), 0, 1);\n      if (f > 0) display.setPixel(x, yy, newC[0] * f, newC[1] * f, newC[2] * f);\n    }\n    const t = ((x + 1) / W) * S.tEnd, X = 1 - exp(-avramiExp(S, t)), row = cl(floor((1 - X) * TOP - 0.001), 0, TOP - 1);\n    const a = prev \u003c 0 ? row : min(prev, row), bnd = prev \u003c 0 ? row : max(prev, row);\n    for (let yy = a; yy \u003c= bnd; yy++) display.setPixel(x, yy, 235, 235, 235);\n    prev = row;\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan."},{"name":"Speed","min":0.2,"max":3,"about":"The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s."},{"name":"Rate","min":4,"max":80,"about":"The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3."},{"name":"Mode","min":0,"max":1,"about":"How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2."}],"start":[0,2,4,0.06],"measures":{"motion":0.0659,"detail":0.0824,"edges":0.8775,"complexity":0.3635,"coverage":0.9103,"colour":0.4567,"drift":0.1875},"knobResponse":[0.3746,0.1973,0.3888,0.3417]},{"slug":"joukowsky-airfoil","title":"Joukowsky Airfoil","family":"physics","round":35,"note":"주콥스키 사상으로 원을 지나는 이상 흐름을 날개를 지나는 흐름으로 옮겼어요. 44줄 길이의 날개 위로 1초마다 맨 윗줄에서 놓은 염료 줄이 내려와 앞전의 붉은 정체점에서 갈라지고, 오른쪽 흡입면으로 간 반쪽이 뒷전에 12.6줄 먼저 닿아요. K3 은 받음각을 0도에서 15도로 올려 그 앞섬을 46줄까지 늘리고, K1 을 누르면 순환을 10초 동안 빼서 두 반쪽이 거의 같이 닿아요.","idea":"A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.","buttons":"K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.","code":"// ===== Patternflow pattern =====\n// Title:   Joukowsky Airfoil\n// Family:  physics\n// Idea:    A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joukowsky airfoil (Nikolai Zhukovsky, 1910)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12\n//\n// Knob 1: Hue. Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it.\n// Knob 2: Speed. How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten.\n// Knob 3: Attack. The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose.\n// Knob 4: Camber. The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows.\n// Buttons: K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.\n\n// Ideal flow past a circle in the ζ-plane, carried to flow past an airfoil\n// by z = ζ + c²/ζ. The circle goes through ζ = c, which lands on the sharp\n// trailing edge at z = 2c, and its centre ζ0 = -ε + iδ sits left of the\n// origin for thickness and above it for camber. With U = 1,\n//   W(ζ) = ζ' e^{-iα} + R² e^{iα}/ζ' + (iΓ/2π) log ζ',   ζ' = ζ - ζ0,\n// and the Kutta condition, that the flow leaves the trailing edge smoothly,\n// fixes Γ = 4πR sin(α + β), β the angle of ζ0 seen from c. Lengths are in\n// LEDs: c = 11, so the chord is 44 rows, centred on the panel, and ε =\n// 0.12 c makes the wing 6 LEDs at its thickest, 14% of the chord. The free\n// stream runs down the panel at one LED per unit of time.\nconst W = 64, H = 128, NP = W * H, CX = 32, CY = 64;\nconst C = 11, EPS = 0.12 * C, LAM = 20, DUTY = 2.2 / 20, TMAX = 400, CHUNK = 768, SPACE = 6;\nconst { min, max, floor, round, sqrt, sin, cos, atan2, abs, exp, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// One flow: the circle, the angle of attack and the circulation.\nfunction makeFlow(alphaDeg, camber, kutta) {\n  const a = (alphaDeg * PI) / 180, d = camber * 2 * C;\n  const z0r = -EPS, z0i = d, R = sqrt((C + EPS) ** 2 + d * d), beta = atan2(d, C + EPS);\n  const gam = kutta ? 4 * PI * R * sin(a + beta) : 0;\n  return { a, ca: cos(a), sa: sin(a), z0r, z0i, R, R2: R * R, beta, gam, key: alphaDeg.toFixed(1) + \"/\" + camber.toFixed(3) + \"/\" + kutta };\n}\n\n// The flow at ζ: o[0], o[1] = dζ/dt, o[2] = speed on the panel, o[3] =\n// |dz/dζ|. dζ/dt = conj(dW/dζ) / |dz/dζ|². At the trailing edge dz/dζ is 0;\n// with the Kutta condition dW/dζ is 0 there too and the floor on |dz/dζ|²\n// only keeps 0/0 away, without it the speed there is capped at 6.\nfunction flowAt(F, zr, zi, o) {\n  const pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n  const ir = pr / r2, ii = -pi / r2, i2r = ir * ir - ii * ii, i2i = 2 * ir * ii;\n  const er = F.ca * i2r - F.sa * i2i, ei = F.ca * i2i + F.sa * i2r, g = F.gam / TAU;\n  const wr = F.ca - F.R2 * er - g * ii, wi = -F.sa - F.R2 * ei + g * ir;\n  const q2 = zr * zr + zi * zi, jr = zr / q2, ji = -zi / q2, j2r = jr * jr - ji * ji, j2i = 2 * jr * ji;\n  const dr = 1 - C * C * j2r, di = -C * C * j2i, J2 = max(1e-8, dr * dr + di * di);\n  let sp = sqrt((wr * wr + wi * wi) / J2), k = 1;\n  if (sp > 6) (k = 6 / sp), (sp = 6);\n  o[0] = (k * wr) / J2;\n  o[1] = (-k * wi) / J2;\n  o[2] = sp;\n  o[3] = sqrt(J2);\n}\n\n// ζ to the panel: z = ζ + c²/ζ, turned back by α so the free stream runs\n// down the panel and the suction side faces right. o[0] = X, o[1] = Y.\nfunction toPanel(F, zr, zi, o) {\n  const q2 = zr * zr + zi * zi, xr = zr + (C * C * zr) / q2, xi = zi - (C * C * zi) / q2;\n  o[0] = CX + xi * F.ca - xr * F.sa;\n  o[1] = CY + xr * F.ca + xi * F.sa;\n}\n\n// The panel to ζ: of the two roots of ζ² - zζ + c² = 0, the one outside\n// the circle. o[2] = |ζ'|²; less than R² means the LED is inside the wing.\nfunction toZeta(F, X, Y, o) {\n  const pr = Y - CY, pi = X - CX, zr = pr * F.ca - pi * F.sa, zi = pr * F.sa + pi * F.ca;\n  const wr = zr * zr - zi * zi - 4 * C * C, wi = 2 * zr * zi, m = sqrt(wr * wr + wi * wi);\n  const sr = sqrt(max(0, (m + wr) / 2)), si = (wi \u003c 0 ? -1 : 1) * sqrt(max(0, (m - wr) / 2));\n  const ar = (zr + sr) / 2, ai = (zi + si) / 2, br = (zr - sr) / 2, bi = (zi - si) / 2;\n  const da = (ar - F.z0r) ** 2 + (ai - F.z0i) ** 2, db = (br - F.z0r) ** 2 + (bi - F.z0i) ** 2;\n  if (da >= db) (o[0] = ar), (o[1] = ai), (o[2] = da);\n  else (o[0] = br), (o[1] = bi), (o[2] = db);\n}\n\n// When the fluid at an LED crossed the top row: back along its stream line,\n// in the ζ-plane where the wing is a circle and easy to keep out of, adding\n// up time. Midpoint steps of 0.35 LED by the surface, up to 3 LEDs and 3\n// time units away from it.\nfunction arrival(F, X, Y, f, pos) {\n  toZeta(F, X, Y, f);\n  if (f[2] \u003c F.R2) return -1;\n  let zr = f[0], zi = f[1], T = 0;\n  for (let it = 0; it \u003c 400; it++) {\n    flowAt(F, zr, zi, f);\n    const pr = zr - F.z0r, pi = zi - F.z0i, dist = (sqrt(pr * pr + pi * pi) - F.R) * f[3];\n    const dt = min(cl(0.35 + 0.3 * dist, 0.35, 3) / max(f[2], 1e-6), 3);\n    flowAt(F, zr - 0.5 * dt * f[0], zi - 0.5 * dt * f[1], f);\n    zr -= dt * f[0];\n    zi -= dt * f[1];\n    const qr = zr - F.z0r, qi = zi - F.z0i, q2 = qr * qr + qi * qi;\n    if (q2 \u003c F.R2) {\n      const s = (F.R * 1.0001) / sqrt(q2);\n      zr = F.z0r + qr * s;\n      zi = F.z0i + qi * s;\n    }\n    T += dt;\n    toPanel(F, zr, zi, pos);\n    // Past the top row: give back the part of the step beyond it.\n    if (pos[1] \u003c= 0) return max(0, T + pos[1] / max(0.3, f[2]));\n    if (T > TMAX) return TMAX;\n  }\n  return TMAX;\n}\n\nfunction newField(F) {\n  return { F, T: new Float32Array(NP), G: new Float32Array(NP), psi: new Float32Array(NP), sp: new Float32Array(NP), body: new Float32Array(NP), next: 0, st: [0, 0, 0, 0] };\n}\n\n// Arrival times for LEDs from..to of a field; the rest once they are all in.\nfunction fill(Fd, to) {\n  const { F, T, G, psi, sp, body } = Fd, f = new Float64Array(4), pos = [0, 0];\n  for (let p = Fd.next; p \u003c to; p++) T[p] = arrival(F, (p % W) + 0.5, floor(p / W) + 0.5, f, pos);\n  Fd.next = to;\n  if (to \u003c NP) return false;\n  for (let p = 0; p \u003c NP; p++) {\n    toZeta(F, (p % W) + 0.5, floor(p / W) + 0.5, f);\n    const zr = f[0], zi = f[1], pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n    flowAt(F, zr, zi, f);\n    sp[p] = f[2];\n    // Inside the wing or within half an LED of its edge, by the distance\n    // to the circle stretched by |dz/dζ|.\n    body[p] = cl(0.5 - (sqrt(r2) - F.R) * f[3], 0, 1);\n    // ψ = Im W.\n    psi[p] = pi * F.ca - pr * F.sa + (F.R2 * (F.sa * pr - F.ca * pi)) / r2 + (F.gam / (2 * TAU)) * log(r2);\n  }\n  // How fast the arrival time changes across one LED, from the smaller of\n  // the two one-sided steps, so the jump in the wake behind the trailing\n  // edge does not count as steep.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p], d = (q) => (T[q] \u003c 0 ? 50 : min(50, abs(T[q] - t)));\n      const gx = min(x > 0 ? d(p - 1) : 50, x \u003c W - 1 ? d(p + 1) : 50), gy = min(y > 0 ? d(p - W) : 50, y \u003c H - 1 ? d(p + W) : 50);\n      G[p] = sqrt(gx * gx + gy * gy);\n    }\n  // The two stagnation points, where sin(θ - α) = -Γ / 4πR on the circle.\n  const s0 = cl(-F.gam / (4 * PI * F.R), -1, 1), th = [F.a + Math.asin(s0), F.a + PI - Math.asin(s0)];\n  for (let i = 0; i \u003c 2; i++) {\n    toPanel(F, F.z0r + F.R * cos(th[i]), F.z0i + F.R * sin(th[i]), pos);\n    Fd.st[i * 2] = pos[0];\n    Fd.st[i * 2 + 1] = pos[1];\n  }\n  return true;\n}\n\nexport function setup(params) {\n  params.s = { cur: null, old: null, nxt: null, fade: 1, s: 0, hue: 0, speed: 2, off: 0, pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(NP * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  // K1 takes the circulation away for 10 s; a second tap gives it back.\n  if (input.btnPressed && input.btnPressed[0]) P.off = P.off > 0 ? 0 : 10;\n  P.off = max(0, P.off - d);\n  const want = makeFlow(cl(k[2], 0, 15), cl(k[3], 0, 0.12), P.off \u003c= 0);\n  if (!P.cur) {\n    P.cur = newField(want);\n    fill(P.cur, NP);\n  } else if (!P.nxt && want.key !== P.cur.F.key) P.nxt = newField(want);\n  // A new flow is worked out 768 LEDs a frame, eleven frames for the panel,\n  // then faded in over 0.4 s; a knob still turning starts the next one.\n  if (P.nxt && fill(P.nxt, min(NP, P.nxt.next + CHUNK))) {\n    P.old = P.cur;\n    P.cur = P.nxt;\n    P.nxt = null;\n    P.fade = 0;\n  }\n  P.fade = min(1, P.fade + d / 0.4);\n  P.s += d * 10 * P.speed;\n}\n\nfunction paint(P, Fd, wgt, rgb) {\n  const { T, G, psi, sp, body } = Fd, pal = P.pal;\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) {\n    let r = 0.012, g = 0.016, b = 0.05;\n    // Stream lines every 6 units of ψ, about one LED wide wherever they are.\n    const u = psi[p] / SPACE, du = (abs(u - round(u)) * SPACE) / max(0.05, sp[p]), sl = 0.15 * exp(-2 * du * du);\n    r += sl * 0.45;\n    g += sl * 0.55;\n    b += sl * 0.8;\n    const t = T[p];\n    if (t >= 0) {\n      // The dye: a puff across the top row every 20 time units, lasting 2.2\n      // of them, so in the free stream a line 2.2 LEDs thick. Where the flow\n      // slows the lines crowd and thin; a line thinner than 1.6 LEDs is drawn\n      // 1.6 wide and dimmer, and where they come closer than 4 LEDs they\n      // merge into the haze they would make, 2.2/20 of full.\n      const ph = (P.s - t) / LAM - DUTY / 2, kk = round(ph), per = LAM / max(0.02, G[p]);\n      const wpx = DUTY * per, hw = max(0.8, wpx / 2), dpx = abs(ph - kk) * per;\n      const line = cl(hw + 0.5 - dpx, 0, 1) * min(1, wpx / (2 * hw)), mix = cl((per - 4) / 4, 0, 1);\n      const c = (((kk % 4) + 4) % 4) * 3, dye = line * mix, haze = DUTY * (1 - mix);\n      r += dye * pal[c] + haze * pal[12];\n      g += dye * pal[c + 1] + haze * pal[13];\n      b += dye * pal[c + 2] + haze * pal[14];\n    }\n    const bo = body[p];\n    r += (0.82 - r) * bo;\n    g += (0.84 - g) * bo;\n    b += (0.9 - b) * bo;\n    rgb[o] += wgt * r;\n    rgb[o + 1] += wgt * g;\n    rgb[o + 2] += wgt * b;\n  }\n}\n\n// The two stagnation points, a red LED each on the wing's edge.\nfunction marks(Fd, wgt, rgb) {\n  for (let i = 0; i \u003c 2; i++) {\n    const x = round(Fd.st[i * 2] - 0.5), y = round(Fd.st[i * 2 + 1] - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    rgb[o] += (1 - rgb[o]) * wgt;\n    rgb[o + 1] += (0.12 - rgb[o + 1]) * wgt;\n    rgb[o + 2] += (0.1 - rgb[o + 2]) * wgt;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cur) return;\n  const { pal, rgb } = P;\n  if (P.palHue !== P.hue) {\n    // Four dyes in turn, so a line can be followed past the wing: gold,\n    // green, blue and pink at Hue 0. The haze is their mean.\n    pal.fill(0, 12);\n    for (let i = 0; i \u003c 4; i++) {\n      hsv(P.hue + 0.12 + i * 0.25, 0.7, 1, pal, i * 3);\n      for (let c = 0; c \u003c 3; c++) pal[12 + c] += pal[i * 3 + c] / 4;\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  if (P.old && P.fade \u003c 1) paint(P, P.old, 1 - P.fade, rgb);\n  const w = P.old && P.fade \u003c 1 ? P.fade : 1;\n  paint(P, P.cur, w, rgb);\n  if (w \u003c 1) marks(P.old, 1 - w, rgb);\n  marks(P.cur, w, rgb);\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) display.setPixel(p % W, floor(p / W), min(255, rgb[o] * 255), min(255, rgb[o + 1] * 255), min(255, rgb[o + 2] * 255));\n}\n","layer":{"id":"layer-joukowsky-airfoil","type":"code","name":"joukowsky-airfoil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Joukowsky Airfoil\n// Family:  physics\n// Idea:    A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joukowsky airfoil (Nikolai Zhukovsky, 1910)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12\n//\n// Knob 1: Hue. Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it.\n// Knob 2: Speed. How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten.\n// Knob 3: Attack. The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose.\n// Knob 4: Camber. The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows.\n// Buttons: K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.\n\n// Ideal flow past a circle in the ζ-plane, carried to flow past an airfoil\n// by z = ζ + c²/ζ. The circle goes through ζ = c, which lands on the sharp\n// trailing edge at z = 2c, and its centre ζ0 = -ε + iδ sits left of the\n// origin for thickness and above it for camber. With U = 1,\n//   W(ζ) = ζ' e^{-iα} + R² e^{iα}/ζ' + (iΓ/2π) log ζ',   ζ' = ζ - ζ0,\n// and the Kutta condition, that the flow leaves the trailing edge smoothly,\n// fixes Γ = 4πR sin(α + β), β the angle of ζ0 seen from c. Lengths are in\n// LEDs: c = 11, so the chord is 44 rows, centred on the panel, and ε =\n// 0.12 c makes the wing 6 LEDs at its thickest, 14% of the chord. The free\n// stream runs down the panel at one LED per unit of time.\nconst W = 64, H = 128, NP = W * H, CX = 32, CY = 64;\nconst C = 11, EPS = 0.12 * C, LAM = 20, DUTY = 2.2 / 20, TMAX = 400, CHUNK = 768, SPACE = 6;\nconst { min, max, floor, round, sqrt, sin, cos, atan2, abs, exp, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// One flow: the circle, the angle of attack and the circulation.\nfunction makeFlow(alphaDeg, camber, kutta) {\n  const a = (alphaDeg * PI) / 180, d = camber * 2 * C;\n  const z0r = -EPS, z0i = d, R = sqrt((C + EPS) ** 2 + d * d), beta = atan2(d, C + EPS);\n  const gam = kutta ? 4 * PI * R * sin(a + beta) : 0;\n  return { a, ca: cos(a), sa: sin(a), z0r, z0i, R, R2: R * R, beta, gam, key: alphaDeg.toFixed(1) + \"/\" + camber.toFixed(3) + \"/\" + kutta };\n}\n\n// The flow at ζ: o[0], o[1] = dζ/dt, o[2] = speed on the panel, o[3] =\n// |dz/dζ|. dζ/dt = conj(dW/dζ) / |dz/dζ|². At the trailing edge dz/dζ is 0;\n// with the Kutta condition dW/dζ is 0 there too and the floor on |dz/dζ|²\n// only keeps 0/0 away, without it the speed there is capped at 6.\nfunction flowAt(F, zr, zi, o) {\n  const pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n  const ir = pr / r2, ii = -pi / r2, i2r = ir * ir - ii * ii, i2i = 2 * ir * ii;\n  const er = F.ca * i2r - F.sa * i2i, ei = F.ca * i2i + F.sa * i2r, g = F.gam / TAU;\n  const wr = F.ca - F.R2 * er - g * ii, wi = -F.sa - F.R2 * ei + g * ir;\n  const q2 = zr * zr + zi * zi, jr = zr / q2, ji = -zi / q2, j2r = jr * jr - ji * ji, j2i = 2 * jr * ji;\n  const dr = 1 - C * C * j2r, di = -C * C * j2i, J2 = max(1e-8, dr * dr + di * di);\n  let sp = sqrt((wr * wr + wi * wi) / J2), k = 1;\n  if (sp > 6) (k = 6 / sp), (sp = 6);\n  o[0] = (k * wr) / J2;\n  o[1] = (-k * wi) / J2;\n  o[2] = sp;\n  o[3] = sqrt(J2);\n}\n\n// ζ to the panel: z = ζ + c²/ζ, turned back by α so the free stream runs\n// down the panel and the suction side faces right. o[0] = X, o[1] = Y.\nfunction toPanel(F, zr, zi, o) {\n  const q2 = zr * zr + zi * zi, xr = zr + (C * C * zr) / q2, xi = zi - (C * C * zi) / q2;\n  o[0] = CX + xi * F.ca - xr * F.sa;\n  o[1] = CY + xr * F.ca + xi * F.sa;\n}\n\n// The panel to ζ: of the two roots of ζ² - zζ + c² = 0, the one outside\n// the circle. o[2] = |ζ'|²; less than R² means the LED is inside the wing.\nfunction toZeta(F, X, Y, o) {\n  const pr = Y - CY, pi = X - CX, zr = pr * F.ca - pi * F.sa, zi = pr * F.sa + pi * F.ca;\n  const wr = zr * zr - zi * zi - 4 * C * C, wi = 2 * zr * zi, m = sqrt(wr * wr + wi * wi);\n  const sr = sqrt(max(0, (m + wr) / 2)), si = (wi \u003c 0 ? -1 : 1) * sqrt(max(0, (m - wr) / 2));\n  const ar = (zr + sr) / 2, ai = (zi + si) / 2, br = (zr - sr) / 2, bi = (zi - si) / 2;\n  const da = (ar - F.z0r) ** 2 + (ai - F.z0i) ** 2, db = (br - F.z0r) ** 2 + (bi - F.z0i) ** 2;\n  if (da >= db) (o[0] = ar), (o[1] = ai), (o[2] = da);\n  else (o[0] = br), (o[1] = bi), (o[2] = db);\n}\n\n// When the fluid at an LED crossed the top row: back along its stream line,\n// in the ζ-plane where the wing is a circle and easy to keep out of, adding\n// up time. Midpoint steps of 0.35 LED by the surface, up to 3 LEDs and 3\n// time units away from it.\nfunction arrival(F, X, Y, f, pos) {\n  toZeta(F, X, Y, f);\n  if (f[2] \u003c F.R2) return -1;\n  let zr = f[0], zi = f[1], T = 0;\n  for (let it = 0; it \u003c 400; it++) {\n    flowAt(F, zr, zi, f);\n    const pr = zr - F.z0r, pi = zi - F.z0i, dist = (sqrt(pr * pr + pi * pi) - F.R) * f[3];\n    const dt = min(cl(0.35 + 0.3 * dist, 0.35, 3) / max(f[2], 1e-6), 3);\n    flowAt(F, zr - 0.5 * dt * f[0], zi - 0.5 * dt * f[1], f);\n    zr -= dt * f[0];\n    zi -= dt * f[1];\n    const qr = zr - F.z0r, qi = zi - F.z0i, q2 = qr * qr + qi * qi;\n    if (q2 \u003c F.R2) {\n      const s = (F.R * 1.0001) / sqrt(q2);\n      zr = F.z0r + qr * s;\n      zi = F.z0i + qi * s;\n    }\n    T += dt;\n    toPanel(F, zr, zi, pos);\n    // Past the top row: give back the part of the step beyond it.\n    if (pos[1] \u003c= 0) return max(0, T + pos[1] / max(0.3, f[2]));\n    if (T > TMAX) return TMAX;\n  }\n  return TMAX;\n}\n\nfunction newField(F) {\n  return { F, T: new Float32Array(NP), G: new Float32Array(NP), psi: new Float32Array(NP), sp: new Float32Array(NP), body: new Float32Array(NP), next: 0, st: [0, 0, 0, 0] };\n}\n\n// Arrival times for LEDs from..to of a field; the rest once they are all in.\nfunction fill(Fd, to) {\n  const { F, T, G, psi, sp, body } = Fd, f = new Float64Array(4), pos = [0, 0];\n  for (let p = Fd.next; p \u003c to; p++) T[p] = arrival(F, (p % W) + 0.5, floor(p / W) + 0.5, f, pos);\n  Fd.next = to;\n  if (to \u003c NP) return false;\n  for (let p = 0; p \u003c NP; p++) {\n    toZeta(F, (p % W) + 0.5, floor(p / W) + 0.5, f);\n    const zr = f[0], zi = f[1], pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n    flowAt(F, zr, zi, f);\n    sp[p] = f[2];\n    // Inside the wing or within half an LED of its edge, by the distance\n    // to the circle stretched by |dz/dζ|.\n    body[p] = cl(0.5 - (sqrt(r2) - F.R) * f[3], 0, 1);\n    // ψ = Im W.\n    psi[p] = pi * F.ca - pr * F.sa + (F.R2 * (F.sa * pr - F.ca * pi)) / r2 + (F.gam / (2 * TAU)) * log(r2);\n  }\n  // How fast the arrival time changes across one LED, from the smaller of\n  // the two one-sided steps, so the jump in the wake behind the trailing\n  // edge does not count as steep.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p], d = (q) => (T[q] \u003c 0 ? 50 : min(50, abs(T[q] - t)));\n      const gx = min(x > 0 ? d(p - 1) : 50, x \u003c W - 1 ? d(p + 1) : 50), gy = min(y > 0 ? d(p - W) : 50, y \u003c H - 1 ? d(p + W) : 50);\n      G[p] = sqrt(gx * gx + gy * gy);\n    }\n  // The two stagnation points, where sin(θ - α) = -Γ / 4πR on the circle.\n  const s0 = cl(-F.gam / (4 * PI * F.R), -1, 1), th = [F.a + Math.asin(s0), F.a + PI - Math.asin(s0)];\n  for (let i = 0; i \u003c 2; i++) {\n    toPanel(F, F.z0r + F.R * cos(th[i]), F.z0i + F.R * sin(th[i]), pos);\n    Fd.st[i * 2] = pos[0];\n    Fd.st[i * 2 + 1] = pos[1];\n  }\n  return true;\n}\n\nexport function setup(params) {\n  params.s = { cur: null, old: null, nxt: null, fade: 1, s: 0, hue: 0, speed: 2, off: 0, pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(NP * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  // K1 takes the circulation away for 10 s; a second tap gives it back.\n  if (input.btnPressed && input.btnPressed[0]) P.off = P.off > 0 ? 0 : 10;\n  P.off = max(0, P.off - d);\n  const want = makeFlow(cl(k[2], 0, 15), cl(k[3], 0, 0.12), P.off \u003c= 0);\n  if (!P.cur) {\n    P.cur = newField(want);\n    fill(P.cur, NP);\n  } else if (!P.nxt && want.key !== P.cur.F.key) P.nxt = newField(want);\n  // A new flow is worked out 768 LEDs a frame, eleven frames for the panel,\n  // then faded in over 0.4 s; a knob still turning starts the next one.\n  if (P.nxt && fill(P.nxt, min(NP, P.nxt.next + CHUNK))) {\n    P.old = P.cur;\n    P.cur = P.nxt;\n    P.nxt = null;\n    P.fade = 0;\n  }\n  P.fade = min(1, P.fade + d / 0.4);\n  P.s += d * 10 * P.speed;\n}\n\nfunction paint(P, Fd, wgt, rgb) {\n  const { T, G, psi, sp, body } = Fd, pal = P.pal;\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) {\n    let r = 0.012, g = 0.016, b = 0.05;\n    // Stream lines every 6 units of ψ, about one LED wide wherever they are.\n    const u = psi[p] / SPACE, du = (abs(u - round(u)) * SPACE) / max(0.05, sp[p]), sl = 0.15 * exp(-2 * du * du);\n    r += sl * 0.45;\n    g += sl * 0.55;\n    b += sl * 0.8;\n    const t = T[p];\n    if (t >= 0) {\n      // The dye: a puff across the top row every 20 time units, lasting 2.2\n      // of them, so in the free stream a line 2.2 LEDs thick. Where the flow\n      // slows the lines crowd and thin; a line thinner than 1.6 LEDs is drawn\n      // 1.6 wide and dimmer, and where they come closer than 4 LEDs they\n      // merge into the haze they would make, 2.2/20 of full.\n      const ph = (P.s - t) / LAM - DUTY / 2, kk = round(ph), per = LAM / max(0.02, G[p]);\n      const wpx = DUTY * per, hw = max(0.8, wpx / 2), dpx = abs(ph - kk) * per;\n      const line = cl(hw + 0.5 - dpx, 0, 1) * min(1, wpx / (2 * hw)), mix = cl((per - 4) / 4, 0, 1);\n      const c = (((kk % 4) + 4) % 4) * 3, dye = line * mix, haze = DUTY * (1 - mix);\n      r += dye * pal[c] + haze * pal[12];\n      g += dye * pal[c + 1] + haze * pal[13];\n      b += dye * pal[c + 2] + haze * pal[14];\n    }\n    const bo = body[p];\n    r += (0.82 - r) * bo;\n    g += (0.84 - g) * bo;\n    b += (0.9 - b) * bo;\n    rgb[o] += wgt * r;\n    rgb[o + 1] += wgt * g;\n    rgb[o + 2] += wgt * b;\n  }\n}\n\n// The two stagnation points, a red LED each on the wing's edge.\nfunction marks(Fd, wgt, rgb) {\n  for (let i = 0; i \u003c 2; i++) {\n    const x = round(Fd.st[i * 2] - 0.5), y = round(Fd.st[i * 2 + 1] - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    rgb[o] += (1 - rgb[o]) * wgt;\n    rgb[o + 1] += (0.12 - rgb[o + 1]) * wgt;\n    rgb[o + 2] += (0.1 - rgb[o + 2]) * wgt;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cur) return;\n  const { pal, rgb } = P;\n  if (P.palHue !== P.hue) {\n    // Four dyes in turn, so a line can be followed past the wing: gold,\n    // green, blue and pink at Hue 0. The haze is their mean.\n    pal.fill(0, 12);\n    for (let i = 0; i \u003c 4; i++) {\n      hsv(P.hue + 0.12 + i * 0.25, 0.7, 1, pal, i * 3);\n      for (let c = 0; c \u003c 3; c++) pal[12 + c] += pal[i * 3 + c] / 4;\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  if (P.old && P.fade \u003c 1) paint(P, P.old, 1 - P.fade, rgb);\n  const w = P.old && P.fade \u003c 1 ? P.fade : 1;\n  paint(P, P.cur, w, rgb);\n  if (w \u003c 1) marks(P.old, 1 - w, rgb);\n  marks(P.cur, w, rgb);\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) display.setPixel(p % W, floor(p / W), min(255, rgb[o] * 255), min(255, rgb[o + 1] * 255), min(255, rgb[o + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten."},{"name":"Attack","min":0,"max":15,"about":"The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose."},{"name":"Camber","min":0,"max":0.12,"about":"The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows."}],"start":[0,2,0,0.06],"measures":{"motion":1.8048,"detail":0.0682,"edges":0.3096,"complexity":0.7976,"coverage":0.3578,"colour":0.2135,"drift":0.0573},"knobResponse":[0.061,0.1268,0.1391,0.1409]},{"slug":"kaleidoscope","title":"Kaleidoscope","family":"geometry","round":1,"note":"움직이는 선 세 벌이 유리 한 조각을 자르고 거울이 그 조각을 꽃으로 접어요. 조각 사이에 1 LED 검은 납선이 있어요.","idea":"Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.","buttons":"K1 tap reverses the turn.","code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","layer":{"id":"layer-kaleidoscope","type":"code","name":"kaleidoscope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the glass colours around the colour wheel."},{"name":"Speed","min":0.1,"max":4,"about":"How fast the shards slide and the mirrors turn."},{"name":"Segments","min":6,"max":16,"about":"How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette."},{"name":"Twist","min":-1,"max":1,"about":"Bends the wedges into a spiral, one way below 0 and the other way above."}],"start":[0,2,6,0.06],"measures":{"motion":0.9384,"detail":0.1125,"edges":0.4099,"complexity":1.6131,"coverage":0.5499,"colour":0.359,"drift":0.2217},"knobResponse":[0.1659,0.2298,0.1535,0.1426]},{"slug":"kari-culik","title":"Kari-Culik Tiles","family":"algo","round":35,"note":"카리의 왕 타일 14장이 되풀이 없이 판을 덮어요. 한 줄이 x 를 2 나 2/3 로 곱하는 긴 곱셈이라 위아래 변에는 비티 숫자가 파랑 마름모로, 옆 변에는 올림수가 초록이나 보라에서 금색까지의 마름모로 이어져요. K3 은 맨 윗줄의 x 를 바꿔 다른 타일링을 깔고, K1 을 누르면 3초 동안 타일이 4분의 1 칸씩 떨어져 한 장씩 보여요.","idea":"Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.","buttons":"K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.","code":"// ===== Patternflow pattern =====\n// Title:   Kari-Culik Tiles\n// Family:  algo\n// Idea:    Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aperiodic Wang tiles from Beatty sequences (Jarkko Kari, 1996; Karel Culik II, 1996), Kari's set of 14, pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3.\n// Knob 2: Speed. How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s.\n// Knob 3: Start. The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles.\n// Knob 4: Size. Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8.\n// Buttons: K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.\n\n// The rule behind the tiles. Write x by its Beatty digits\n// a_n = floor((n + 1) x) - floor(n x), n over all the integers. A tile in a\n// row that multiplies by q has a_n(x) on top, a_n(qx) underneath, the carry\n// s_n = q floor(n x) - floor(n q x) on its left and s_(n+1) on its right, and\n// q a_n + s_n = b_n + s_(n+1) holds for each one, so the row is a long\n// multiplication done digit by digit. Rows stack with x_(i+1) = T(x_i),\n// 2x on [2/3, 1) and 2x/3 on [1, 2); T maps [2/3, 2) onto itself one to one,\n// so the rows can run either way. Kari states T on [1/2, 2], but [1/2, 2/3)\n// has nothing above it, and a tiling that scrolls up for ever lives in\n// [2/3, 2). No product of 2s and 2/3s is 1, so no row ever comes back.\n//\n// Counted over 5,400 rows from nine starts and 800 columns each, with exact\n// arithmetic and the identity checked on every tile, the rows use exactly 14\n// tiles, Kari's set: 4 that multiply by 2 and 10 by 2/3. The same count over\n// Culik's rows (3x on [1/3, 2/3), x/2 on [2/3, 2)) gives 12, one of them the\n// tile with 0 on all four edges, which covers the plane by itself. An\n// aperiodic set cannot hold such a tile, so Culik's 13 are not this plain\n// count, and the picture uses Kari's.\n//\n// In the log of x, T is a turn by log 2 round a circle log 3 long, so the\n// kinds of row follow a Sturmian word: a times-2 row (37%, log 1.5 / log 3\n// of them) is never next to another, and one or two times-2/3 rows lie\n// between them.\n\nconst W = 64, H = 128;\nconst { floor, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst Z = BigInt(0), ONE = BigInt(1), TWO = BigInt(2), THREE = BigInt(3), FOUR = BigInt(4);\n// Start = 0 lands on the square root of 2.\nconst START = 0.5606601717798213;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each row keeps x as an exact fraction p/q of BigInts. With floats the\n// product drifts off the true 2x/3 in its last bit, and a test run that way\n// turned up tiles with a carry of 1, which no row can have. The fractions\n// grow by a bit a row: 10,000 rows up, seven hours at Speed 2, they are\n// 10,053 bits long and one floor(n x) takes 9 microseconds.\nfunction floorDiv(n, p, q) {\n  const v = BigInt(n) * p;\n  let d = v / q;\n  if (v \u003c Z && d * q !== v) d -= ONE;\n  return Number(d);\n}\n\nfunction reduce(r) {\n  while ((r.p & ONE) === Z && (r.q & ONE) === Z) (r.p >>= ONE), (r.q >>= ONE);\n  while (r.p % THREE === Z && r.q % THREE === Z) (r.p /= THREE), (r.q /= THREE);\n  // kind 0 multiplies by 2 (x \u003c 1), kind 1 by 2/3.\n  r.kind = r.p \u003c r.q ? 0 : 1;\n  r.F = new Map();\n  return r;\n}\nconst forward = (r) => reduce({ p: TWO * r.p, q: r.kind === 0 ? r.q : THREE * r.q });\n// The row above: y/2 when y is 4/3 or more (it came from a times-2 row),\n// 3y/2 below that (from a times-2/3 row).\nconst backward = (r) => reduce({ p: THREE * r.p >= FOUR * r.q ? r.p : THREE * r.p, q: TWO * r.q });\n\n// floor(n x) for a row, kept per column while the row is on the panel.\nfunction fx(r, n) {\n  let v = r.F.get(n);\n  if (v === undefined) r.F.set(n, (v = floorDiv(n, r.p, r.q)));\n  return v;\n}\n\n// A new tiling with x at row index `at`. x is a fraction over 2^52, so the\n// top row's digits repeat only after 2^52 columns.\nfunction build(P, u, at) {\n  const x = 2 / 3 + (4 / 3) * ((((u + START) % 1) + 1) % 1);\n  const K = 2 ** 52;\n  P.rows = new Map([[at, reduce({ p: BigInt(round(x * K)), q: BigInt(K) })]]);\n  P.lo = P.hi = at;\n  P.start = u;\n}\n\nfunction row(P, i) {\n  while (i \u003c P.lo) {\n    const r = backward(P.rows.get(P.lo));\n    P.rows.set(--P.lo, r);\n  }\n  while (i > P.hi) {\n    const r = forward(P.rows.get(P.hi));\n    P.rows.set(++P.hi, r);\n  }\n  return P.rows.get(i);\n}\n\n// Which part of a D x D tile each pixel shows: 0 top, 1 right, 2 bottom,\n// 3 left, or 4 for a pixel on a diagonal, left dark so the triangles stay\n// apart. Two triangles that meet across a tile edge always carry the same\n// label, so the dark diagonals are all that is seen of the tile grid. A\n// lifted tile stands alone in its gap and needs no seams: its diagonal\n// pixels go to the top and bottom triangles.\nfunction triangles(D, seams) {\n  const t = new Uint8Array(D * D);\n  for (let v = 0; v \u003c D; v++)\n    for (let u = 0; u \u003c D; u++) {\n      const dT = v, dB = D - 1 - v, dL = u, dR = D - 1 - u, m = min(dT, dB, dL, dR);\n      const ties = (dT === m) + (dB === m) + (dL === m) + (dR === m);\n      t[v * D + u] = seams && ties > 1 ? 4 : dT === m ? 0 : dB === m ? 2 : dR === m ? 1 : 3;\n    }\n  return t;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, size: 8, scroll: 0, pan: 0, lift: 0, liftT: -1,\n    pal: new Float32Array(9 * 3), palHue: NaN, tri: new Map(), lab: new Int8Array(4),\n  };\n  build(params.s, 0, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 8], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = 2 * round(cl(k[3], 8, 16) / 2);\n  // A turn of Start puts its x on the top row showing now, and the rest of\n  // the tiling grows from there.\n  const u = cl(k[2], 0, 1);\n  if (u !== P.start) build(P, u, floor(-floor(P.scroll) / P.size));\n  P.scroll += d * P.speed * 1.5;\n  P.pan += d * P.speed * 0.5;\n  if (input.btnPressed && input.btnPressed[0]) P.liftT = 0;\n  if (P.liftT >= 0) {\n    P.liftT += d;\n    const t = P.liftT;\n    P.lift = t \u003c 0.5 ? sm(t / 0.5) : t \u003c 3.5 ? 1 : sm((4 - t) / 0.5);\n    if (t >= 4) (P.liftT = -1), (P.lift = 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const S = P.size, pal = P.pal, lab = P.lab;\n  if (P.palHue !== P.hue) {\n    // Labels 0-2 are the digits, a ramp in one blue; 3-4 the carries 0 and\n    // -1 of the times-2 rows; 5-8 the carries -1/3, 0, 1/3, 2/3 of the\n    // times-2/3 rows. Where the hue knob turns the blues to red, orange or\n    // yellow the dark digits are laid lighter, as a dim orange reads brown.\n    const c = [\n      [0.62, 0.85, 0.45], [0.58, 0.62, 0.78], [0.53, 0.22, 1],\n      [0.25, 0.8, 1], [0.45, 0.7, 0.9],\n      [0.78, 0.7, 1], [0.92, 0.62, 1], [0.04, 0.72, 1], [0.12, 0.6, 1],\n    ];\n    for (let j = 0; j \u003c 9; j++) {\n      let [h, s, v] = c[j];\n      h += P.hue;\n      const hh = h - floor(h) > 0.9 ? h - floor(h) - 1 : h - floor(h), warm = sm((hh + 0.04) / 0.08) * sm((0.24 - hh) / 0.06);\n      if (j \u003c 2) (v += (0.85 - v) * warm), (s *= 1 - 0.25 * warm);\n      hsv(h, s, v, pal, j * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The lift opens a gap of up to a quarter tile, in whole LEDs, and draws\n  // each tile that much smaller in the middle of its cell.\n  const gap = round(P.lift * (S / 4)), D = S - gap, off = gap >> 1;\n  const key = 2 * D + (gap === 0 ? 1 : 0);\n  let tri = P.tri.get(key);\n  if (!tri) P.tri.set(key, (tri = triangles(D, gap === 0)));\n  const sy = floor(P.scroll), sx = floor(P.pan);\n  const i0 = floor(-sy / S), i1 = floor((H - 1 - sy) / S);\n  const n0 = floor(sx / S), n1 = floor((W - 1 + sx) / S);\n  for (let i = i0; i \u003c= i1; i++) {\n    const r = row(P, i), r2 = row(P, i + 1);\n    for (let n = n0; n \u003c= n1; n++) {\n      const f0 = fx(r, n), f1 = fx(r, n + 1), g0 = fx(r2, n), g1 = fx(r2, n + 1);\n      lab[0] = f1 - f0;\n      lab[2] = g1 - g0;\n      // Left and right carries: s = 2 floor(nx) - floor(2nx) is 0 or -1;\n      // 3s = 2 floor(nx) - 3 floor(2nx/3) is -1, 0, 1 or 2.\n      if (r.kind === 0) (lab[3] = 3 + g0 - 2 * f0), (lab[1] = 3 + g1 - 2 * f1);\n      else (lab[3] = 6 + 2 * f0 - 3 * g0), (lab[1] = 6 + 2 * f1 - 3 * g1);\n      const X0 = n * S - sx, Y0 = i * S + sy;\n      for (let v = 0; v \u003c S; v++) {\n        const Y = Y0 + v;\n        if (Y \u003c 0 || Y >= H) continue;\n        const tv = v - off;\n        for (let u = 0; u \u003c S; u++) {\n          const X = X0 + u;\n          if (X \u003c 0 || X >= W) continue;\n          const tu = u - off;\n          const t = tv \u003c 0 || tu \u003c 0 || tv >= D || tu >= D ? 4 : tri[tv * D + tu];\n          if (t === 4) {\n            display.setPixel(X, Y, 0, 0, 0);\n            continue;\n          }\n          const o = lab[t] * 3;\n          display.setPixel(X, Y, pal[o] * 255, pal[o + 1] * 255, pal[o + 2] * 255);\n        }\n      }\n    }\n  }\n  // Rows that have slid off the bottom are let go; the panel only ever\n  // needs the rows from i0 down to i1 + 1.\n  while (P.hi > i1 + 2) P.rows.delete(P.hi--);\n}\n","layer":{"id":"layer-kari-culik","type":"code","name":"kari-culik","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kari-Culik Tiles\n// Family:  algo\n// Idea:    Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aperiodic Wang tiles from Beatty sequences (Jarkko Kari, 1996; Karel Culik II, 1996), Kari's set of 14, pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3.\n// Knob 2: Speed. How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s.\n// Knob 3: Start. The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles.\n// Knob 4: Size. Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8.\n// Buttons: K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.\n\n// The rule behind the tiles. Write x by its Beatty digits\n// a_n = floor((n + 1) x) - floor(n x), n over all the integers. A tile in a\n// row that multiplies by q has a_n(x) on top, a_n(qx) underneath, the carry\n// s_n = q floor(n x) - floor(n q x) on its left and s_(n+1) on its right, and\n// q a_n + s_n = b_n + s_(n+1) holds for each one, so the row is a long\n// multiplication done digit by digit. Rows stack with x_(i+1) = T(x_i),\n// 2x on [2/3, 1) and 2x/3 on [1, 2); T maps [2/3, 2) onto itself one to one,\n// so the rows can run either way. Kari states T on [1/2, 2], but [1/2, 2/3)\n// has nothing above it, and a tiling that scrolls up for ever lives in\n// [2/3, 2). No product of 2s and 2/3s is 1, so no row ever comes back.\n//\n// Counted over 5,400 rows from nine starts and 800 columns each, with exact\n// arithmetic and the identity checked on every tile, the rows use exactly 14\n// tiles, Kari's set: 4 that multiply by 2 and 10 by 2/3. The same count over\n// Culik's rows (3x on [1/3, 2/3), x/2 on [2/3, 2)) gives 12, one of them the\n// tile with 0 on all four edges, which covers the plane by itself. An\n// aperiodic set cannot hold such a tile, so Culik's 13 are not this plain\n// count, and the picture uses Kari's.\n//\n// In the log of x, T is a turn by log 2 round a circle log 3 long, so the\n// kinds of row follow a Sturmian word: a times-2 row (37%, log 1.5 / log 3\n// of them) is never next to another, and one or two times-2/3 rows lie\n// between them.\n\nconst W = 64, H = 128;\nconst { floor, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst Z = BigInt(0), ONE = BigInt(1), TWO = BigInt(2), THREE = BigInt(3), FOUR = BigInt(4);\n// Start = 0 lands on the square root of 2.\nconst START = 0.5606601717798213;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each row keeps x as an exact fraction p/q of BigInts. With floats the\n// product drifts off the true 2x/3 in its last bit, and a test run that way\n// turned up tiles with a carry of 1, which no row can have. The fractions\n// grow by a bit a row: 10,000 rows up, seven hours at Speed 2, they are\n// 10,053 bits long and one floor(n x) takes 9 microseconds.\nfunction floorDiv(n, p, q) {\n  const v = BigInt(n) * p;\n  let d = v / q;\n  if (v \u003c Z && d * q !== v) d -= ONE;\n  return Number(d);\n}\n\nfunction reduce(r) {\n  while ((r.p & ONE) === Z && (r.q & ONE) === Z) (r.p >>= ONE), (r.q >>= ONE);\n  while (r.p % THREE === Z && r.q % THREE === Z) (r.p /= THREE), (r.q /= THREE);\n  // kind 0 multiplies by 2 (x \u003c 1), kind 1 by 2/3.\n  r.kind = r.p \u003c r.q ? 0 : 1;\n  r.F = new Map();\n  return r;\n}\nconst forward = (r) => reduce({ p: TWO * r.p, q: r.kind === 0 ? r.q : THREE * r.q });\n// The row above: y/2 when y is 4/3 or more (it came from a times-2 row),\n// 3y/2 below that (from a times-2/3 row).\nconst backward = (r) => reduce({ p: THREE * r.p >= FOUR * r.q ? r.p : THREE * r.p, q: TWO * r.q });\n\n// floor(n x) for a row, kept per column while the row is on the panel.\nfunction fx(r, n) {\n  let v = r.F.get(n);\n  if (v === undefined) r.F.set(n, (v = floorDiv(n, r.p, r.q)));\n  return v;\n}\n\n// A new tiling with x at row index `at`. x is a fraction over 2^52, so the\n// top row's digits repeat only after 2^52 columns.\nfunction build(P, u, at) {\n  const x = 2 / 3 + (4 / 3) * ((((u + START) % 1) + 1) % 1);\n  const K = 2 ** 52;\n  P.rows = new Map([[at, reduce({ p: BigInt(round(x * K)), q: BigInt(K) })]]);\n  P.lo = P.hi = at;\n  P.start = u;\n}\n\nfunction row(P, i) {\n  while (i \u003c P.lo) {\n    const r = backward(P.rows.get(P.lo));\n    P.rows.set(--P.lo, r);\n  }\n  while (i > P.hi) {\n    const r = forward(P.rows.get(P.hi));\n    P.rows.set(++P.hi, r);\n  }\n  return P.rows.get(i);\n}\n\n// Which part of a D x D tile each pixel shows: 0 top, 1 right, 2 bottom,\n// 3 left, or 4 for a pixel on a diagonal, left dark so the triangles stay\n// apart. Two triangles that meet across a tile edge always carry the same\n// label, so the dark diagonals are all that is seen of the tile grid. A\n// lifted tile stands alone in its gap and needs no seams: its diagonal\n// pixels go to the top and bottom triangles.\nfunction triangles(D, seams) {\n  const t = new Uint8Array(D * D);\n  for (let v = 0; v \u003c D; v++)\n    for (let u = 0; u \u003c D; u++) {\n      const dT = v, dB = D - 1 - v, dL = u, dR = D - 1 - u, m = min(dT, dB, dL, dR);\n      const ties = (dT === m) + (dB === m) + (dL === m) + (dR === m);\n      t[v * D + u] = seams && ties > 1 ? 4 : dT === m ? 0 : dB === m ? 2 : dR === m ? 1 : 3;\n    }\n  return t;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, size: 8, scroll: 0, pan: 0, lift: 0, liftT: -1,\n    pal: new Float32Array(9 * 3), palHue: NaN, tri: new Map(), lab: new Int8Array(4),\n  };\n  build(params.s, 0, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 8], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = 2 * round(cl(k[3], 8, 16) / 2);\n  // A turn of Start puts its x on the top row showing now, and the rest of\n  // the tiling grows from there.\n  const u = cl(k[2], 0, 1);\n  if (u !== P.start) build(P, u, floor(-floor(P.scroll) / P.size));\n  P.scroll += d * P.speed * 1.5;\n  P.pan += d * P.speed * 0.5;\n  if (input.btnPressed && input.btnPressed[0]) P.liftT = 0;\n  if (P.liftT >= 0) {\n    P.liftT += d;\n    const t = P.liftT;\n    P.lift = t \u003c 0.5 ? sm(t / 0.5) : t \u003c 3.5 ? 1 : sm((4 - t) / 0.5);\n    if (t >= 4) (P.liftT = -1), (P.lift = 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const S = P.size, pal = P.pal, lab = P.lab;\n  if (P.palHue !== P.hue) {\n    // Labels 0-2 are the digits, a ramp in one blue; 3-4 the carries 0 and\n    // -1 of the times-2 rows; 5-8 the carries -1/3, 0, 1/3, 2/3 of the\n    // times-2/3 rows. Where the hue knob turns the blues to red, orange or\n    // yellow the dark digits are laid lighter, as a dim orange reads brown.\n    const c = [\n      [0.62, 0.85, 0.45], [0.58, 0.62, 0.78], [0.53, 0.22, 1],\n      [0.25, 0.8, 1], [0.45, 0.7, 0.9],\n      [0.78, 0.7, 1], [0.92, 0.62, 1], [0.04, 0.72, 1], [0.12, 0.6, 1],\n    ];\n    for (let j = 0; j \u003c 9; j++) {\n      let [h, s, v] = c[j];\n      h += P.hue;\n      const hh = h - floor(h) > 0.9 ? h - floor(h) - 1 : h - floor(h), warm = sm((hh + 0.04) / 0.08) * sm((0.24 - hh) / 0.06);\n      if (j \u003c 2) (v += (0.85 - v) * warm), (s *= 1 - 0.25 * warm);\n      hsv(h, s, v, pal, j * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The lift opens a gap of up to a quarter tile, in whole LEDs, and draws\n  // each tile that much smaller in the middle of its cell.\n  const gap = round(P.lift * (S / 4)), D = S - gap, off = gap >> 1;\n  const key = 2 * D + (gap === 0 ? 1 : 0);\n  let tri = P.tri.get(key);\n  if (!tri) P.tri.set(key, (tri = triangles(D, gap === 0)));\n  const sy = floor(P.scroll), sx = floor(P.pan);\n  const i0 = floor(-sy / S), i1 = floor((H - 1 - sy) / S);\n  const n0 = floor(sx / S), n1 = floor((W - 1 + sx) / S);\n  for (let i = i0; i \u003c= i1; i++) {\n    const r = row(P, i), r2 = row(P, i + 1);\n    for (let n = n0; n \u003c= n1; n++) {\n      const f0 = fx(r, n), f1 = fx(r, n + 1), g0 = fx(r2, n), g1 = fx(r2, n + 1);\n      lab[0] = f1 - f0;\n      lab[2] = g1 - g0;\n      // Left and right carries: s = 2 floor(nx) - floor(2nx) is 0 or -1;\n      // 3s = 2 floor(nx) - 3 floor(2nx/3) is -1, 0, 1 or 2.\n      if (r.kind === 0) (lab[3] = 3 + g0 - 2 * f0), (lab[1] = 3 + g1 - 2 * f1);\n      else (lab[3] = 6 + 2 * f0 - 3 * g0), (lab[1] = 6 + 2 * f1 - 3 * g1);\n      const X0 = n * S - sx, Y0 = i * S + sy;\n      for (let v = 0; v \u003c S; v++) {\n        const Y = Y0 + v;\n        if (Y \u003c 0 || Y >= H) continue;\n        const tv = v - off;\n        for (let u = 0; u \u003c S; u++) {\n          const X = X0 + u;\n          if (X \u003c 0 || X >= W) continue;\n          const tu = u - off;\n          const t = tv \u003c 0 || tu \u003c 0 || tv >= D || tu >= D ? 4 : tri[tv * D + tu];\n          if (t === 4) {\n            display.setPixel(X, Y, 0, 0, 0);\n            continue;\n          }\n          const o = lab[t] * 3;\n          display.setPixel(X, Y, pal[o] * 255, pal[o + 1] * 255, pal[o + 2] * 255);\n        }\n      }\n    }\n  }\n  // Rows that have slid off the bottom are let go; the panel only ever\n  // needs the rows from i0 down to i1 + 1.\n  while (P.hi > i1 + 2) P.rows.delete(P.hi--);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s."},{"name":"Start","min":0,"max":1,"about":"The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles."},{"name":"Size","min":8,"max":16,"about":"Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8."}],"start":[0,2,0,8],"measures":{"motion":1.0596,"detail":0.333,"edges":1,"complexity":0.1114,"coverage":0.75,"colour":0.4775,"drift":0.0797},"knobResponse":[0.3661,0.4609,0.2299,0.3929]},{"slug":"karman-street","title":"Kármán Street","family":"sim","round":37,"note":"반대로 도는 점 소용돌이 두 줄이 반 간격씩 어긋난 채 128줄을 위에서 아래로 흘러가요. 왼쪽 줄은 아쿠아, 오른쪽 줄은 장밋빛 염료를 감아 나선을 만들고, 두 줄 사이 거리와 간격의 비가 폰 카르만의 0.2806 이면 거리가 버티며 두 염료가 금색으로 바뀌어요. 처음 비 0.34 에서는 보이지 않던 흔들림이 12~24초 만에 자라 소용돌이가 짝을 지어 흩어지고, 그 뒤에 새 거리가 깔려요. K4 는 그 비를 0.13 에서 0.53 까지 옮기고, 누르면 새 거리를 바로 깔아요.","idea":"Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.","buttons":"K1 tap lays a fresh street at once, with a new small wobble.","code":"// ===== Patternflow pattern =====\n// Title:   Kármán Street\n// Family:  sim\n// Idea:    Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kármán vortex street and its stability (Theodore von Kármán, 1911), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25\n//\n// Knob 1: Hue. Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose.\n// Knob 2: Speed. How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower.\n// Knob 3: Vortices. Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it.\n// Knob 4: Offset. The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides.\n// Buttons: K1 tap lays a fresh street at once, with a new small wobble.\n\n// Each vortex is a whole row of copies 128 rows apart, so the panel is one\n// period top to bottom. A vertical row of vortices of circulation G spaced L\n// has the complex velocity -(i G / 2L) coth(pi (z - z0) / L), which in x and\n// y is the kernel in velAt() below. The row of n vortices spaced a = 128 / n is\n// the same sum as von Kármán's infinite row, so with the columns h apart and\n// staggered by a / 2 the street moves as one at (G / 2a) tanh(pi h / a).\n//\n// Growth of a random wobble of 1e-7 a, with G = a, measured as the slope of\n// ln(wobble) in a 600 s run (per second):\n//   h/a      0.13   0.20   0.25   0.2806  0.31   0.34   0.45   0.53\n//   n = 4   0.016  0.0076 0.0009 -0.001  0.0012 0.0054 0.014  0.017\n//   n = 8   0.031  0.0175 0.0041  0.001  0.0057 0.0117 0.028  0.034\n// At 0.2806 it stays inside +-0.0013, which is the measuring noise: the\n// street is neutrally stable there. The more vortices a period holds, the\n// narrower the nearly stable band round it, because a period of n allows\n// only wobbles whose phase steps by a multiple of 2 pi / n from one vortex\n// to the next; with 3 a column h/a = 0.34 grows at 0.0017, a third of the\n// rate with 4, which is why Vortices starts at 4. The pattern runs at\n// G = 30 a, so at 0.34 with 4 a column the wobble grows e-fold every 6 s\n// and at 0.2 every 4.4 s. Laid with a 5% wobble, the street at 0.34 came\n// apart (one vortex 0.3 a off its column) after 11.5 to 24 s, median 15.5,\n// over 34 streets in three four-minute runs, and at the two ends of the\n// knob after 3 to 7 s; at 0.2806 it lasted 106 to 237 s in five runs, as a\n// wobble that size is no longer small and grows on its own terms.\n\nconst W = 64, H = 128, N = W * H, L = 128, K = (2 * Math.PI) / L;\nconst { floor, min, max, exp, sin, cos, tanh, abs, PI } = Math;\nconst random = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// von Kármán's ratio: cosh(pi h / a) = sqrt 2.\nconst STABLE = Math.log(Math.SQRT2 + 1) / PI;\nconst NT = 3600, MAXV = 16;\n// Circulation per LED of spacing, the wobble a fresh street is laid with\n// (as a share of a), the speed the street is shown sliding down, and the\n// seconds between two lines of dye from one vortex.\nconst GAM = 30, EPS = 0.05, VSHOW = 5, PULSE = 2.4;\n// Dye cores: a tracer within RC of a vortex goes round as a solid body.\nconst RCF = 0.09;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  const S = (params.s = {\n    hue: 0, speed: 2, n: 4, ratio: STABLE + 0.06, want: [4, STABLE + 0.06], pend: 0,\n    vx: D(MAXV), vy: D(MAXV), vg: D(MAXV), x0: D(MAXV), m: 0, a: 32, wy: 0,\n    // Stage positions of the vortices and their precomputed exp and trig.\n    sx: D(MAXV * 4), sy: D(MAXV * 4), ex: D(MAXV * 4), ix: D(MAXV * 4), cy: D(MAXV * 4), sn: D(MAXV * 4),\n    kv: D(MAXV * 8),\n    tx: F(NT), ty: F(NT), age: F(NT), pt: D(MAXV), pp: new Uint8Array(MAXV),\n    kx: F(NT * 4), ky: F(NT * 4),\n    A: F(N), B: F(N), T: F(N), col: F(6),\n    broken: 0, fade: 1, out: 0, warm: false,\n  });\n  lay(S, 4, STABLE + 0.06);\n}\n\nfunction lay(S, n, ratio) {\n  const a = L / n, h = ratio * a, G = GAM * a;\n  S.n = n;\n  S.ratio = ratio;\n  S.a = a;\n  S.m = 2 * n;\n  // The left column spins one way and the right one the other, the way a\n  // wake's shear layers roll up, so on its own the street would climb at U\n  // through still water. The water is given a downward flow of VSHOW + U, so\n  // the street slides down at VSHOW and the dye that leaves it streams down\n  // faster between the vortices.\n  const U = (G / (2 * a)) * tanh((PI * h) / a);\n  S.wy = VSHOW + U;\n  const y0 = random() * a;\n  for (let i = 0; i \u003c n; i++) {\n    S.vx[i] = 32 - h / 2;\n    S.vy[i] = y0 + i * a;\n    S.vg[i] = -G;\n    S.vx[n + i] = 32 + h / 2;\n    S.vy[n + i] = y0 + i * a + a / 2;\n    S.vg[n + i] = G;\n  }\n  // The wobble: each vortex moved up to EPS a either way, then each\n  // column's mean move taken out again. A column shifted as a whole along\n  // the street breaks the half-spacing stagger, and then both columns push\n  // each other the same way sideways: the street drifted 8 LEDs off centre\n  // in 20 s before this.\n  for (let i = 0; i \u003c 2 * n; i++) {\n    S.x0[i] = S.vx[i];\n    S.kv[2 * i] = (random() - 0.5) * 2 * EPS * a;\n    S.kv[2 * i + 1] = (random() - 0.5) * 2 * EPS * a;\n  }\n  for (let c = 0; c \u003c 2; c++) {\n    let mx = 0, my = 0;\n    for (let i = c * n; i \u003c c * n + n; i++) (mx += S.kv[2 * i]), (my += S.kv[2 * i + 1]);\n    for (let i = c * n; i \u003c c * n + n; i++) {\n      S.vx[i] += S.kv[2 * i] - mx / n;\n      S.vy[i] += S.kv[2 * i + 1] - my / n;\n    }\n  }\n  // No dye yet; the vortices start dropping it at staggered moments.\n  S.age.fill(-1);\n  for (let p = 0; p \u003c S.m; p++) S.pt[p] = PULSE * (((p * 0.618) % 1) * 0.8 + 0.2 * random());\n  S.broken = 0;\n}\n\n// Every PULSE seconds a vortex drops a straight line of dye across its core,\n// alternating between two sets of tracers, so each set lives two pulses.\n// A continuous drip was tried first: in a steady swirl every radius then\n// fills its whole ring and the core reads as a speckled disc. A line laid\n// at once winds into a spiral, the inside turning faster than the outside.\nfunction pulse(S, p) {\n  const m = S.m, per = floor(NT / m), C = per >> 1, par = (S.pp[p] ^= 1), R = 0.56 * S.a;\n  const th = (random() - 0.5) * 0.6, c = cos(th), s = sin(th);\n  for (let j = par; j \u003c 2 * C; j += 2) {\n    const i = j * m + p, r = R * ((((j >> 1) + 0.5) / C) * 2 - 1);\n    S.tx[i] = S.vx[p] + r * c;\n    S.ty[i] = S.vy[p] + r * s;\n    S.age[i] = 0;\n  }\n}\n\n// Velocity at (x, y) from the vortices of stage s, written to out[o], out[o+1].\n// exp(K (x - xv)) is exp(K x) exp(-K xv) and the angle difference comes from\n// the sum formulas, so a tracer costs one exp, one sin and one cos per stage\n// whatever the number of vortices.\nfunction velAt(S, s, x, y, dl, skip, out, o) {\n  const m = S.m, b = s * MAXV, c2 = 1 / (2 * L);\n  const et = exp(K * x), it = 1 / et, cyt = cos(K * y), syt = sin(K * y);\n  let u = 0, v = 0;\n  for (let i = 0; i \u003c m; i++) {\n    if (i === skip) continue;\n    const j = b + i, E = et * S.ix[j], iE = it * S.ex[j];\n    const cY = cyt * S.cy[j] + syt * S.sn[j], sY = syt * S.cy[j] - cyt * S.sn[j];\n    const q = (S.vg[i] * c2) / (0.5 * (E + iE) - cY + dl);\n    u -= q * sY;\n    v += q * 0.5 * (E - iE);\n  }\n  out[o] = u;\n  out[o + 1] = v + S.wy;\n}\n\nfunction prep(S, s) {\n  for (let i = 0, b = s * MAXV; i \u003c S.m; i++) {\n    const x = S.sx[b + i], y = S.sy[b + i];\n    S.ex[b + i] = exp(K * x);\n    S.ix[b + i] = 1 / S.ex[b + i];\n    S.cy[b + i] = cos(K * y);\n    S.sn[b + i] = sin(K * y);\n  }\n}\n\n// One RK4 step of the vortices and the dye together.\nfunction step(S, h) {\n  const m = S.m, kv = S.kv, kx = S.kx, ky = S.ky;\n  const dv = 0.5 * (K * 0.5) * (K * 0.5), rc = RCF * S.a, dt = 0.5 * (K * rc) * (K * rc);\n  const cf = [0, 0.5, 0.5, 1];\n  for (let s = 0; s \u003c 4; s++) {\n    const b = s * MAXV;\n    for (let i = 0; i \u003c m; i++) {\n      S.sx[b + i] = S.vx[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i] : 0);\n      S.sy[b + i] = S.vy[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i + 1] : 0);\n    }\n    prep(S, s);\n    for (let i = 0; i \u003c m; i++) velAt(S, s, S.sx[b + i], S.sy[b + i], dv, i, kv, s * MAXV * 2 + 2 * i);\n    const tmp = [0, 0];\n    for (let i = 0; i \u003c NT; i++) {\n      if (S.age[i] \u003c 0) continue;\n      const x = S.tx[i] + (s ? cf[s] * h * kx[(s - 1) * NT + i] : 0), y = S.ty[i] + (s ? cf[s] * h * ky[(s - 1) * NT + i] : 0);\n      velAt(S, s, x, y, dt, -1, tmp, 0);\n      kx[s * NT + i] = tmp[0];\n      ky[s * NT + i] = tmp[1];\n    }\n  }\n  for (let i = 0; i \u003c m; i++) {\n    const o = 2 * i, M = MAXV * 2;\n    S.vx[i] += (h / 6) * (kv[o] + 2 * kv[M + o] + 2 * kv[2 * M + o] + kv[3 * M + o]);\n    S.vy[i] += (h / 6) * (kv[o + 1] + 2 * kv[M + o + 1] + 2 * kv[2 * M + o + 1] + kv[3 * M + o + 1]);\n    S.vy[i] -= L * floor(S.vy[i] / L);\n  }\n  for (let i = 0; i \u003c NT; i++) {\n    if (S.age[i] \u003c 0) continue;\n    S.tx[i] += (h / 6) * (kx[i] + 2 * kx[NT + i] + 2 * kx[2 * NT + i] + kx[3 * NT + i]);\n    S.ty[i] += (h / 6) * (ky[i] + 2 * ky[NT + i] + 2 * ky[2 * NT + i] + ky[3 * NT + i]);\n    S.ty[i] -= L * floor(S.ty[i] / L);\n    S.age[i] += h;\n    if (S.age[i] > 2 * PULSE || abs(S.tx[i] - 32) > 70) S.age[i] = -1;\n  }\n  for (let p = 0; p \u003c m; p++) if ((S.pt[p] -= h) \u003c= 0) {\n    S.pt[p] += PULSE;\n    pulse(S, p);\n  }\n}\n\n// How far the street has come apart: the largest sideways move of one\n// vortex from its column, the whole street's sideways drift taken out.\nfunction wobble(S) {\n  let mean = 0, off = 0, dev = 0;\n  for (let i = 0; i \u003c S.m; i++) mean += S.vx[i] - S.x0[i];\n  mean /= S.m;\n  for (let i = 0; i \u003c S.m; i++) {\n    dev = max(dev, abs(S.vx[i] - S.x0[i] - mean));\n    if (S.vx[i] \u003c -8 || S.vx[i] > W + 8) off++;\n  }\n  return [dev / S.a, off];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  const n = floor(cl(k[2], 4, 8) + 0.5), ratio = STABLE + cl(k[3], -0.15, 0.25);\n  if (!S.warm) {\n    S.warm = true;\n    if (n !== S.n || abs(ratio - S.ratio) > 1e-6) lay(S, n, ratio);\n    // Open with six seconds of dye already wound.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n  }\n  // A turned knob lays a new street once it has rested a third of a second.\n  if (n !== S.n || abs(ratio - S.ratio) > 0.004) {\n    if (n !== S.want[0] || abs(ratio - S.want[1]) > 1e-6) {\n      S.want = [n, ratio];\n      S.pend = 0.35;\n    } else if (S.pend > 0 && (S.pend -= d) \u003c= 0 && !S.out) S.out = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.out) S.out = 1;\n  // A core turns at G / (2 pi RC^2) radians a second, 18 with 4 a column\n  // and 37 with 8; a step is kept under 0.7 radian of that, which RK4\n  // carries without the core's dye spiralling in or out.\n  const h = (d * S.speed) / 2;\n  const sub = max(1, Math.ceil(((GAM / (2 * PI * RCF * RCF * S.a)) * h) / 0.7));\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n  const [dev, off] = wobble(S);\n  if (dev > 0.3) S.broken += h;\n  // Broken for 7 s, or half the vortices gone off the sides: lay a new one.\n  if (!S.out && (S.broken > 7 || off >= S.n)) S.out = 1;\n  if (S.out) {\n    S.fade -= d / 0.4;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      S.out = 0;\n      lay(S, n, ratio);\n      S.want = [n, ratio];\n      // Every vortex drops its first line in the 2.4 s run here, while the\n      // panel is dark, so the new street comes up whole.\n      for (let i = 0; i \u003c 72; i++) step(S, 1 / 30);\n    }\n  } else S.fade = min(1, S.fade + d / 0.6);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const A = S.A, B = S.B, T = S.T, col = S.col;\n  A.fill(0);\n  B.fill(0);\n  for (let i = 0; i \u003c NT; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / (2 * PULSE), env = min(1, age / 0.35) * (1 - u) ** 0.7;\n    const buf = i % S.m \u003c S.n ? A : B;\n    const fx = S.tx[i] - 0.5, fy = S.ty[i] - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n    if (ix \u003c -1 || ix >= W) continue;\n    const y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    if (ix >= 0) {\n      buf[y0 * W + ix] += env * (1 - ax) * (1 - ay);\n      buf[y1 * W + ix] += env * (1 - ax) * ay;\n    }\n    if (ix + 1 \u003c W) {\n      buf[y0 * W + ix + 1] += env * ax * (1 - ay);\n      buf[y1 * W + ix + 1] += env * ax * ay;\n    }\n  }\n  blur(A, T);\n  blur(B, T);\n  // Dyes: aqua and rose at Hue 0. Near von Kármán's ratio both turn gold,\n  // the left column deep and the right one pale, the mark of the one street\n  // that holds: full gold within 0.005 of it, half at 0.01.\n  const gd = (S.ratio - STABLE) / 0.012, gold = exp(-gd * gd);\n  const hA = S.hue + 0.5, hB = S.hue + 0.92;\n  const wA = max(warmth(hA), gold), wB = max(warmth(hB), gold);\n  hsv(hA, 0.8 - 0.35 * warmth(hA), 1, col, 0);\n  hsv(hB, 0.62 - 0.25 * warmth(hB), 1, col, 3);\n  const G1 = [1, 0.74, 0.3], G2 = [1, 0.9, 0.62];\n  for (let c = 0; c \u003c 3; c++) {\n    col[c] += (G1[c] - col[c]) * 0.92 * gold;\n    col[3 + c] += (G2[c] - col[3 + c]) * 0.92 * gold;\n  }\n  // Warm dye climbs to full brightness sooner and its faint end is lifted,\n  // so an old spiral of gold reads pale rather than olive.\n  const kA = 0.55 + 0.4 * wA, kB = 0.55 + 0.4 * wB, gA = 1 - 0.35 * wA, gB = 1 - 0.35 * wB, f = S.fade * 255;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const a = (1 - exp(-A[p] * kA)) ** gA, b = (1 - exp(-B[p] * kB)) ** gB, hi = max(0, a + b - 1.1) * 0.6;\n      display.setPixel(x, y, (col[0] * a + col[3] * b + hi) * f, (col[1] * a + col[4] * b + hi) * f, (col[2] * a + col[5] * b + hi) * f);\n    }\n}\n\n// 1 where a hue is orange to yellow-green, which read brown and olive when\n// dim, so there the dye is paler and climbs to full brightness sooner.\nfunction warmth(h) {\n  const t = h - floor(h);\n  return sm(0.0, 0.05, t) * (1 - sm(0.17, 0.24, t));\n}\n\n// [1 2 1] along rows then columns, wrapping top to bottom.\nfunction blur(a, t) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++) t[o + x] = 0.5 * a[o + x] + 0.25 * (a[o + (x > 0 ? x - 1 : x)] + a[o + (x \u003c W - 1 ? x + 1 : x)]);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W, u = ((y + H - 1) % H) * W, dn = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) a[o + x] = 0.5 * t[o + x] + 0.25 * (t[u + x] + t[dn + x]);\n  }\n}\n","layer":{"id":"layer-karman-street","type":"code","name":"karman-street","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kármán Street\n// Family:  sim\n// Idea:    Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kármán vortex street and its stability (Theodore von Kármán, 1911), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25\n//\n// Knob 1: Hue. Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose.\n// Knob 2: Speed. How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower.\n// Knob 3: Vortices. Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it.\n// Knob 4: Offset. The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides.\n// Buttons: K1 tap lays a fresh street at once, with a new small wobble.\n\n// Each vortex is a whole row of copies 128 rows apart, so the panel is one\n// period top to bottom. A vertical row of vortices of circulation G spaced L\n// has the complex velocity -(i G / 2L) coth(pi (z - z0) / L), which in x and\n// y is the kernel in velAt() below. The row of n vortices spaced a = 128 / n is\n// the same sum as von Kármán's infinite row, so with the columns h apart and\n// staggered by a / 2 the street moves as one at (G / 2a) tanh(pi h / a).\n//\n// Growth of a random wobble of 1e-7 a, with G = a, measured as the slope of\n// ln(wobble) in a 600 s run (per second):\n//   h/a      0.13   0.20   0.25   0.2806  0.31   0.34   0.45   0.53\n//   n = 4   0.016  0.0076 0.0009 -0.001  0.0012 0.0054 0.014  0.017\n//   n = 8   0.031  0.0175 0.0041  0.001  0.0057 0.0117 0.028  0.034\n// At 0.2806 it stays inside +-0.0013, which is the measuring noise: the\n// street is neutrally stable there. The more vortices a period holds, the\n// narrower the nearly stable band round it, because a period of n allows\n// only wobbles whose phase steps by a multiple of 2 pi / n from one vortex\n// to the next; with 3 a column h/a = 0.34 grows at 0.0017, a third of the\n// rate with 4, which is why Vortices starts at 4. The pattern runs at\n// G = 30 a, so at 0.34 with 4 a column the wobble grows e-fold every 6 s\n// and at 0.2 every 4.4 s. Laid with a 5% wobble, the street at 0.34 came\n// apart (one vortex 0.3 a off its column) after 11.5 to 24 s, median 15.5,\n// over 34 streets in three four-minute runs, and at the two ends of the\n// knob after 3 to 7 s; at 0.2806 it lasted 106 to 237 s in five runs, as a\n// wobble that size is no longer small and grows on its own terms.\n\nconst W = 64, H = 128, N = W * H, L = 128, K = (2 * Math.PI) / L;\nconst { floor, min, max, exp, sin, cos, tanh, abs, PI } = Math;\nconst random = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// von Kármán's ratio: cosh(pi h / a) = sqrt 2.\nconst STABLE = Math.log(Math.SQRT2 + 1) / PI;\nconst NT = 3600, MAXV = 16;\n// Circulation per LED of spacing, the wobble a fresh street is laid with\n// (as a share of a), the speed the street is shown sliding down, and the\n// seconds between two lines of dye from one vortex.\nconst GAM = 30, EPS = 0.05, VSHOW = 5, PULSE = 2.4;\n// Dye cores: a tracer within RC of a vortex goes round as a solid body.\nconst RCF = 0.09;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  const S = (params.s = {\n    hue: 0, speed: 2, n: 4, ratio: STABLE + 0.06, want: [4, STABLE + 0.06], pend: 0,\n    vx: D(MAXV), vy: D(MAXV), vg: D(MAXV), x0: D(MAXV), m: 0, a: 32, wy: 0,\n    // Stage positions of the vortices and their precomputed exp and trig.\n    sx: D(MAXV * 4), sy: D(MAXV * 4), ex: D(MAXV * 4), ix: D(MAXV * 4), cy: D(MAXV * 4), sn: D(MAXV * 4),\n    kv: D(MAXV * 8),\n    tx: F(NT), ty: F(NT), age: F(NT), pt: D(MAXV), pp: new Uint8Array(MAXV),\n    kx: F(NT * 4), ky: F(NT * 4),\n    A: F(N), B: F(N), T: F(N), col: F(6),\n    broken: 0, fade: 1, out: 0, warm: false,\n  });\n  lay(S, 4, STABLE + 0.06);\n}\n\nfunction lay(S, n, ratio) {\n  const a = L / n, h = ratio * a, G = GAM * a;\n  S.n = n;\n  S.ratio = ratio;\n  S.a = a;\n  S.m = 2 * n;\n  // The left column spins one way and the right one the other, the way a\n  // wake's shear layers roll up, so on its own the street would climb at U\n  // through still water. The water is given a downward flow of VSHOW + U, so\n  // the street slides down at VSHOW and the dye that leaves it streams down\n  // faster between the vortices.\n  const U = (G / (2 * a)) * tanh((PI * h) / a);\n  S.wy = VSHOW + U;\n  const y0 = random() * a;\n  for (let i = 0; i \u003c n; i++) {\n    S.vx[i] = 32 - h / 2;\n    S.vy[i] = y0 + i * a;\n    S.vg[i] = -G;\n    S.vx[n + i] = 32 + h / 2;\n    S.vy[n + i] = y0 + i * a + a / 2;\n    S.vg[n + i] = G;\n  }\n  // The wobble: each vortex moved up to EPS a either way, then each\n  // column's mean move taken out again. A column shifted as a whole along\n  // the street breaks the half-spacing stagger, and then both columns push\n  // each other the same way sideways: the street drifted 8 LEDs off centre\n  // in 20 s before this.\n  for (let i = 0; i \u003c 2 * n; i++) {\n    S.x0[i] = S.vx[i];\n    S.kv[2 * i] = (random() - 0.5) * 2 * EPS * a;\n    S.kv[2 * i + 1] = (random() - 0.5) * 2 * EPS * a;\n  }\n  for (let c = 0; c \u003c 2; c++) {\n    let mx = 0, my = 0;\n    for (let i = c * n; i \u003c c * n + n; i++) (mx += S.kv[2 * i]), (my += S.kv[2 * i + 1]);\n    for (let i = c * n; i \u003c c * n + n; i++) {\n      S.vx[i] += S.kv[2 * i] - mx / n;\n      S.vy[i] += S.kv[2 * i + 1] - my / n;\n    }\n  }\n  // No dye yet; the vortices start dropping it at staggered moments.\n  S.age.fill(-1);\n  for (let p = 0; p \u003c S.m; p++) S.pt[p] = PULSE * (((p * 0.618) % 1) * 0.8 + 0.2 * random());\n  S.broken = 0;\n}\n\n// Every PULSE seconds a vortex drops a straight line of dye across its core,\n// alternating between two sets of tracers, so each set lives two pulses.\n// A continuous drip was tried first: in a steady swirl every radius then\n// fills its whole ring and the core reads as a speckled disc. A line laid\n// at once winds into a spiral, the inside turning faster than the outside.\nfunction pulse(S, p) {\n  const m = S.m, per = floor(NT / m), C = per >> 1, par = (S.pp[p] ^= 1), R = 0.56 * S.a;\n  const th = (random() - 0.5) * 0.6, c = cos(th), s = sin(th);\n  for (let j = par; j \u003c 2 * C; j += 2) {\n    const i = j * m + p, r = R * ((((j >> 1) + 0.5) / C) * 2 - 1);\n    S.tx[i] = S.vx[p] + r * c;\n    S.ty[i] = S.vy[p] + r * s;\n    S.age[i] = 0;\n  }\n}\n\n// Velocity at (x, y) from the vortices of stage s, written to out[o], out[o+1].\n// exp(K (x - xv)) is exp(K x) exp(-K xv) and the angle difference comes from\n// the sum formulas, so a tracer costs one exp, one sin and one cos per stage\n// whatever the number of vortices.\nfunction velAt(S, s, x, y, dl, skip, out, o) {\n  const m = S.m, b = s * MAXV, c2 = 1 / (2 * L);\n  const et = exp(K * x), it = 1 / et, cyt = cos(K * y), syt = sin(K * y);\n  let u = 0, v = 0;\n  for (let i = 0; i \u003c m; i++) {\n    if (i === skip) continue;\n    const j = b + i, E = et * S.ix[j], iE = it * S.ex[j];\n    const cY = cyt * S.cy[j] + syt * S.sn[j], sY = syt * S.cy[j] - cyt * S.sn[j];\n    const q = (S.vg[i] * c2) / (0.5 * (E + iE) - cY + dl);\n    u -= q * sY;\n    v += q * 0.5 * (E - iE);\n  }\n  out[o] = u;\n  out[o + 1] = v + S.wy;\n}\n\nfunction prep(S, s) {\n  for (let i = 0, b = s * MAXV; i \u003c S.m; i++) {\n    const x = S.sx[b + i], y = S.sy[b + i];\n    S.ex[b + i] = exp(K * x);\n    S.ix[b + i] = 1 / S.ex[b + i];\n    S.cy[b + i] = cos(K * y);\n    S.sn[b + i] = sin(K * y);\n  }\n}\n\n// One RK4 step of the vortices and the dye together.\nfunction step(S, h) {\n  const m = S.m, kv = S.kv, kx = S.kx, ky = S.ky;\n  const dv = 0.5 * (K * 0.5) * (K * 0.5), rc = RCF * S.a, dt = 0.5 * (K * rc) * (K * rc);\n  const cf = [0, 0.5, 0.5, 1];\n  for (let s = 0; s \u003c 4; s++) {\n    const b = s * MAXV;\n    for (let i = 0; i \u003c m; i++) {\n      S.sx[b + i] = S.vx[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i] : 0);\n      S.sy[b + i] = S.vy[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i + 1] : 0);\n    }\n    prep(S, s);\n    for (let i = 0; i \u003c m; i++) velAt(S, s, S.sx[b + i], S.sy[b + i], dv, i, kv, s * MAXV * 2 + 2 * i);\n    const tmp = [0, 0];\n    for (let i = 0; i \u003c NT; i++) {\n      if (S.age[i] \u003c 0) continue;\n      const x = S.tx[i] + (s ? cf[s] * h * kx[(s - 1) * NT + i] : 0), y = S.ty[i] + (s ? cf[s] * h * ky[(s - 1) * NT + i] : 0);\n      velAt(S, s, x, y, dt, -1, tmp, 0);\n      kx[s * NT + i] = tmp[0];\n      ky[s * NT + i] = tmp[1];\n    }\n  }\n  for (let i = 0; i \u003c m; i++) {\n    const o = 2 * i, M = MAXV * 2;\n    S.vx[i] += (h / 6) * (kv[o] + 2 * kv[M + o] + 2 * kv[2 * M + o] + kv[3 * M + o]);\n    S.vy[i] += (h / 6) * (kv[o + 1] + 2 * kv[M + o + 1] + 2 * kv[2 * M + o + 1] + kv[3 * M + o + 1]);\n    S.vy[i] -= L * floor(S.vy[i] / L);\n  }\n  for (let i = 0; i \u003c NT; i++) {\n    if (S.age[i] \u003c 0) continue;\n    S.tx[i] += (h / 6) * (kx[i] + 2 * kx[NT + i] + 2 * kx[2 * NT + i] + kx[3 * NT + i]);\n    S.ty[i] += (h / 6) * (ky[i] + 2 * ky[NT + i] + 2 * ky[2 * NT + i] + ky[3 * NT + i]);\n    S.ty[i] -= L * floor(S.ty[i] / L);\n    S.age[i] += h;\n    if (S.age[i] > 2 * PULSE || abs(S.tx[i] - 32) > 70) S.age[i] = -1;\n  }\n  for (let p = 0; p \u003c m; p++) if ((S.pt[p] -= h) \u003c= 0) {\n    S.pt[p] += PULSE;\n    pulse(S, p);\n  }\n}\n\n// How far the street has come apart: the largest sideways move of one\n// vortex from its column, the whole street's sideways drift taken out.\nfunction wobble(S) {\n  let mean = 0, off = 0, dev = 0;\n  for (let i = 0; i \u003c S.m; i++) mean += S.vx[i] - S.x0[i];\n  mean /= S.m;\n  for (let i = 0; i \u003c S.m; i++) {\n    dev = max(dev, abs(S.vx[i] - S.x0[i] - mean));\n    if (S.vx[i] \u003c -8 || S.vx[i] > W + 8) off++;\n  }\n  return [dev / S.a, off];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  const n = floor(cl(k[2], 4, 8) + 0.5), ratio = STABLE + cl(k[3], -0.15, 0.25);\n  if (!S.warm) {\n    S.warm = true;\n    if (n !== S.n || abs(ratio - S.ratio) > 1e-6) lay(S, n, ratio);\n    // Open with six seconds of dye already wound.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n  }\n  // A turned knob lays a new street once it has rested a third of a second.\n  if (n !== S.n || abs(ratio - S.ratio) > 0.004) {\n    if (n !== S.want[0] || abs(ratio - S.want[1]) > 1e-6) {\n      S.want = [n, ratio];\n      S.pend = 0.35;\n    } else if (S.pend > 0 && (S.pend -= d) \u003c= 0 && !S.out) S.out = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.out) S.out = 1;\n  // A core turns at G / (2 pi RC^2) radians a second, 18 with 4 a column\n  // and 37 with 8; a step is kept under 0.7 radian of that, which RK4\n  // carries without the core's dye spiralling in or out.\n  const h = (d * S.speed) / 2;\n  const sub = max(1, Math.ceil(((GAM / (2 * PI * RCF * RCF * S.a)) * h) / 0.7));\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n  const [dev, off] = wobble(S);\n  if (dev > 0.3) S.broken += h;\n  // Broken for 7 s, or half the vortices gone off the sides: lay a new one.\n  if (!S.out && (S.broken > 7 || off >= S.n)) S.out = 1;\n  if (S.out) {\n    S.fade -= d / 0.4;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      S.out = 0;\n      lay(S, n, ratio);\n      S.want = [n, ratio];\n      // Every vortex drops its first line in the 2.4 s run here, while the\n      // panel is dark, so the new street comes up whole.\n      for (let i = 0; i \u003c 72; i++) step(S, 1 / 30);\n    }\n  } else S.fade = min(1, S.fade + d / 0.6);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const A = S.A, B = S.B, T = S.T, col = S.col;\n  A.fill(0);\n  B.fill(0);\n  for (let i = 0; i \u003c NT; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / (2 * PULSE), env = min(1, age / 0.35) * (1 - u) ** 0.7;\n    const buf = i % S.m \u003c S.n ? A : B;\n    const fx = S.tx[i] - 0.5, fy = S.ty[i] - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n    if (ix \u003c -1 || ix >= W) continue;\n    const y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    if (ix >= 0) {\n      buf[y0 * W + ix] += env * (1 - ax) * (1 - ay);\n      buf[y1 * W + ix] += env * (1 - ax) * ay;\n    }\n    if (ix + 1 \u003c W) {\n      buf[y0 * W + ix + 1] += env * ax * (1 - ay);\n      buf[y1 * W + ix + 1] += env * ax * ay;\n    }\n  }\n  blur(A, T);\n  blur(B, T);\n  // Dyes: aqua and rose at Hue 0. Near von Kármán's ratio both turn gold,\n  // the left column deep and the right one pale, the mark of the one street\n  // that holds: full gold within 0.005 of it, half at 0.01.\n  const gd = (S.ratio - STABLE) / 0.012, gold = exp(-gd * gd);\n  const hA = S.hue + 0.5, hB = S.hue + 0.92;\n  const wA = max(warmth(hA), gold), wB = max(warmth(hB), gold);\n  hsv(hA, 0.8 - 0.35 * warmth(hA), 1, col, 0);\n  hsv(hB, 0.62 - 0.25 * warmth(hB), 1, col, 3);\n  const G1 = [1, 0.74, 0.3], G2 = [1, 0.9, 0.62];\n  for (let c = 0; c \u003c 3; c++) {\n    col[c] += (G1[c] - col[c]) * 0.92 * gold;\n    col[3 + c] += (G2[c] - col[3 + c]) * 0.92 * gold;\n  }\n  // Warm dye climbs to full brightness sooner and its faint end is lifted,\n  // so an old spiral of gold reads pale rather than olive.\n  const kA = 0.55 + 0.4 * wA, kB = 0.55 + 0.4 * wB, gA = 1 - 0.35 * wA, gB = 1 - 0.35 * wB, f = S.fade * 255;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const a = (1 - exp(-A[p] * kA)) ** gA, b = (1 - exp(-B[p] * kB)) ** gB, hi = max(0, a + b - 1.1) * 0.6;\n      display.setPixel(x, y, (col[0] * a + col[3] * b + hi) * f, (col[1] * a + col[4] * b + hi) * f, (col[2] * a + col[5] * b + hi) * f);\n    }\n}\n\n// 1 where a hue is orange to yellow-green, which read brown and olive when\n// dim, so there the dye is paler and climbs to full brightness sooner.\nfunction warmth(h) {\n  const t = h - floor(h);\n  return sm(0.0, 0.05, t) * (1 - sm(0.17, 0.24, t));\n}\n\n// [1 2 1] along rows then columns, wrapping top to bottom.\nfunction blur(a, t) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++) t[o + x] = 0.5 * a[o + x] + 0.25 * (a[o + (x > 0 ? x - 1 : x)] + a[o + (x \u003c W - 1 ? x + 1 : x)]);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W, u = ((y + H - 1) % H) * W, dn = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) a[o + x] = 0.5 * t[o + x] + 0.25 * (t[u + x] + t[dn + x]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower."},{"name":"Vortices","min":4,"max":8,"about":"Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it."},{"name":"Offset","min":-0.15,"max":0.25,"about":"The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides."}],"start":[0,2,4,0.06],"measures":{"motion":0.4917,"detail":0.0363,"edges":0.1472,"complexity":1.3625,"coverage":0.3791,"colour":0.1414,"drift":0.0598},"knobResponse":[0.1029,0.0901,0.0896,0.103]},{"slug":"kdv-solitons","title":"KdV Solitons","family":"wave","round":31,"note":"맨 윗줄이 지금의 물결이고 지난 줄이 아래로 흘러내려요. 자부스키와 크루스칼의 코사인이 반 초 만에 가파라지며 솔리톤 여덟으로 갈리고, 키 큰 솔리톤이 작은 것을 지나칠 때마다 마루가 옆으로 비켜요. K1 을 누르면 큰 솔리톤 하나가 떨어져 무리를 뚫고 달려요.","idea":"Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.","buttons":"K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.","code":"// ===== Patternflow pattern =====\n// Title:   KdV Solitons\n// Family:  wave\n// Idea:    Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: solitons of the Korteweg-de Vries equation (Norman Zabusky and Martin Kruskal, 1965), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1\n//\n// Knob 1: Hue. Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale.\n// Knob 2: Speed. How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower.\n// Knob 3: Dispersion. The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often.\n// Knob 4: Start. The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run.\n// Buttons: K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.\n\nconst W = 64, H = 128;\nconst { min, max, floor, abs, sqrt, cos, sin, exp, tanh, cosh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The equation u_t + u u_x + delta^2 u_xxx = 0 on a ring of length 2, held on\n// 256 points, four to an LED column.\nconst NX = 256, MK = NX - 1, DX = 2 / NX, SUB = NX / W;\n// Rows of the diagram per unit of time, and history rows kept.\nconst RPT = 40, HR = H + 2;\n// Robert-Asselin filter on the leapfrog's middle level: it damps the\n// odd-even mode that otherwise grows to overflow after about five time units,\n// and takes under one percent off a soliton over a whole run.\nconst NU = 0.001;\n// Colour table over the height above the troughs, from UL to UH.\nconst NL = 512, UL = -0.5, UH = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p) * 255;\n  out[o + 1] = (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p) * 255;\n  out[o + 2] = (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p) * 255;\n}\n\n// Dark troughs, the crest hue at the top of a soliton, pale at the very top.\n// Below the crest the hue leans away round the wheel, so the small solitons\n// and the ripples between read as deeper water rather than a dim copy of the\n// crests. A dim orange or yellow reads brown or olive, so for crests from\n// pink round to yellow the lean runs the other way, through violet,\n// magenta and red, and only the brightest tones reach the crest hue; the two\n// leans meet at a yellow green, where the middle tones change side.\nconst LH = [0, 0.08, 0.17, 0.27, 0.27, 0.33, 0.5, 0.67, 0.83, 0.92, 1];\nconst LL = [-0.3, -0.36, -0.42, -0.47, 0.53, 0.15, 0.12, 0.12, 0, -0.2, -0.3];\nfunction lean(h) {\n  h -= floor(h);\n  for (let i = 1; i \u003c LH.length; i++) if (h \u003c= LH[i] && LH[i] > LH[i - 1]) return LL[i - 1] + ((LL[i] - LL[i - 1]) * (h - LH[i - 1])) / (LH[i] - LH[i - 1]);\n  return LL[0];\n}\nfunction palette(P) {\n  const t = P.lut, h0 = P.hue + 0.5, L = lean(h0);\n  for (let i = 0; i \u003c NL; i++) {\n    const e = UL + ((UH - UL) * i) / (NL - 1);\n    const v = cl(e / 2.5, 0, 1), w = cl((e - 2.1) / 1.4, 0, 1), q = cl((e - 0.3) / 1.9, 0, 1);\n    hsv(h0 + L * (1 - q) ** 0.6, 0.9 - 0.8 * w * w, 0.04 + 0.96 * v ** 1.15, t, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\n// du/dt at point i in the scheme's own differences.\nfunction rhs(u, i, d2) {\n  const m2 = u[(i - 2) & MK], m1 = u[(i - 1) & MK], z = u[i], p1 = u[(i + 1) & MK], p2 = u[(i + 2) & MK];\n  return -((p1 + z + m1) * (p1 - m1)) / (6 * DX) - (d2 * (p2 - 2 * p1 + 2 * m1 - m2)) / (2 * DX * DX * DX);\n}\n\n// Leapfrog is stable while dt times the largest rate of the linear scheme\n// stays under 1: |u|/dx for the u u_x term and 2.6 delta^2/dx^3 for the\n// third derivative (its worst wave is three grid cells long). A new dt, or a\n// new wave, starts the leapfrog again with one step back by Euler.\nfunction restartLeap(P) {\n  const d2 = P.delta * P.delta;\n  P.dt = 0.85 / (P.umax / DX + (2.6 * d2) / (DX * DX * DX));\n  const a = P.ua, b = P.ub;\n  for (let i = 0; i \u003c NX; i++) a[i] = b[i] - P.dt * rhs(b, i, d2);\n}\n\n// A starting wave into out, mean zero. Places and heights for the humps,\n// the plateau and the random sum are drawn fresh each run.\nfunction makeWave(P, kind, phase, out) {\n  const R = P.rnd;\n  if (kind) {\n    R[0] = Math.random() * 2;\n    R[1] = R[0] + 0.7 + Math.random() * 0.6;\n    R[2] = 1.05 + Math.random() * 0.3;\n    R[3] = 0.6 + Math.random() * 0.3;\n    for (let k = 1; k \u003c= 5; k++) (R[3 + k] = (0.3 + Math.random()) / k), (R[8 + k] = Math.random() * 2 * PI);\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    const x = i * DX;\n    let v = 0;\n    if (kind === 0) v = cos(PI * (x - phase));\n    else if (kind === 1) {\n      // Two humps, about 1.2 and 0.75 high.\n      const d1 = ((x - R[0] + 3) % 2) - 1, d2 = ((x - R[1] + 3) % 2) - 1;\n      v = R[2] * exp(-((d1 / 0.3) ** 2)) + R[3] * exp(-((d2 / 0.22) ** 2));\n    } else if (kind === 2) {\n      // A plateau 1.1 high and 0.8 wide with soft edges.\n      const d = ((x - R[0] + 3) % 2) - 1;\n      v = 0.55 * (tanh((d + 0.4) / 0.05) - tanh((d - 0.4) / 0.05));\n    } else for (let k = 1; k \u003c= 5; k++) v += R[3 + k] * cos(PI * k * x + R[8 + k]);\n    out[i] = v;\n  }\n  let s = 0, mx = 0;\n  for (let i = 0; i \u003c NX; i++) s += out[i];\n  s /= NX;\n  for (let i = 0; i \u003c NX; i++) mx = max(mx, abs((out[i] -= s)));\n  // The random sum peaks at 1, like the cosine.\n  if (kind === 3) for (let i = 0; i \u003c NX; i++) out[i] /= mx;\n}\n\nfunction begin(P, kind) {\n  P.ub.set(P.tg);\n  P.kind = kind;\n  P.tau = 0;\n  P.rec = 0;\n  P.drops = 0;\n  P.umax = 3;\n  restartLeap(P);\n}\n\n// The wave into one row of 64 columns as height above the troughs: a\n// little more than half the brightest of a column's four points and the\n// rest their mean, so a thin crest keeps its peak. The trough level follows\n// the lowest point of the wave over about a quarter time unit; it is -1 for\n// the cosine and sinks to about -0.7 once the solitons have taken their mass.\nfunction sample(P, out, o) {\n  const u = P.ub, bg = P.bg;\n  for (let c = 0, i = 0; c \u003c W; c++) {\n    let mx = -9, s = 0;\n    for (let k = 0; k \u003c SUB; k++, i++) {\n      const v = u[i];\n      s += v;\n      if (v > mx) mx = v;\n    }\n    out[o + c] = 0.55 * mx + (0.45 * s) / SUB - bg;\n  }\n}\n\n// The share of the wave's energy in the first cosine mode, 1 for the cosine\n// itself, and where that mode's crest stands.\nfunction mode1(P) {\n  const u = P.ub;\n  let c1 = 0, s1 = 0, e = 0;\n  for (let i = 0; i \u003c NX; i++) {\n    const a = PI * i * DX;\n    c1 += u[i] * cos(a);\n    s1 += u[i] * sin(a);\n    e += u[i] * u[i];\n  }\n  P.phase = atan2(s1, c1) / PI;\n  return (2 * (c1 * c1 + s1 * s1)) / (NX * e + 1e-9);\n}\n\n// A soliton 4.4 high over the trough, in the lowest stretch of the wave. Its\n// mass is taken evenly off the rest so the mean stays zero, and the older\n// leapfrog level gets it one step back along its path.\nfunction drop(P) {\n  const u = P.ub, a = P.ua;\n  let best = 99, at = 0;\n  for (let i = 0; i \u003c NX; i += 4) {\n    let s = 0;\n    for (let k = -12; k \u003c= 12; k++) s += u[(i + k) & MK];\n    if (s \u003c best) (best = s), (at = i);\n  }\n  const A = 4.4, w = P.delta * sqrt(12 / A), c = best / 25 + A / 3;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const tgt = pass ? a : u, back = pass ? c * P.dt : 0;\n    let m = 0;\n    for (let i = 0; i \u003c NX; i++) {\n      const d = ((((i - at) * DX + back + 3) % 2) - 1) / w;\n      m += P.uc[i] = A / cosh(d) ** 2;\n    }\n    for (let i = 0; i \u003c NX; i++) tgt[i] += P.uc[i] - m / NX;\n    if (!pass) P.bg -= m / NX;\n  }\n}\n\nfunction step(P, n) {\n  const d2 = P.delta * P.delta, k1 = P.dt / (3 * DX), k2 = (d2 * P.dt) / (DX * DX * DX);\n  for (let s = 0; s \u003c n; s++) {\n    const a = P.ua, b = P.ub, c = P.uc;\n    for (let i = 0; i \u003c NX; i++) {\n      const m2 = b[(i - 2) & MK], m1 = b[(i - 1) & MK], z = b[i], p1 = b[(i + 1) & MK], p2 = b[(i + 2) & MK];\n      c[i] = a[i] - k1 * (p1 + z + m1) * (p1 - m1) - k2 * (p2 - 2 * p1 + 2 * m1 - m2);\n    }\n    for (let i = 0; i \u003c NX; i++) b[i] += NU * (a[i] - 2 * b[i] + c[i]);\n    P.ua = b;\n    P.ub = c;\n    P.uc = a;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    ua: new Float64Array(NX), ub: new Float64Array(NX), uc: new Float64Array(NX), tg: new Float64Array(NX),\n    hist: new Float32Array(HR * W), now: new Float32Array(W), head: 0, frac: 0,\n    lut: new Float32Array(NL * 3), lutHue: -1, hue: 0, speed: 2, delta: 0.022,\n    dt: 1e-4, umax: 3, tau: 0, kind: -1, want: 0, wantT: 0, rnd: new Float64Array(14),\n    f1: 0, rising: 0, rec: 0, phase: 1, reform: -1, toKind: 0, rem: 1, rlen: 1, bg: -1, drops: 0,\n  };\n}\n\n// One row of time has passed: store it, keep dt safe, and watch for the\n// moment to start a new run.\nfunction row(P) {\n  const u = P.ub;\n  let um = 0, lo = 9, bad = false;\n  for (let i = 0; i \u003c NX; i++) {\n    const v = u[i];\n    if (!(v === v) || abs(v) > 40) bad = true;\n    else if (abs(v) > um) um = abs(v);\n    if (v \u003c lo) lo = v;\n  }\n  if (bad) return makeWave(P, P.kind, 1, P.tg), begin(P, P.kind);\n  P.bg += (lo - P.bg) * 0.1;\n  P.head = (P.head + HR - 1) % HR;\n  sample(P, P.hist, P.head * W);\n  // A taller wave than dt was set for: a smaller dt, from here.\n  if (um > 0.9 * P.umax) (P.umax = um * 1.4), restartLeap(P);\n  const f = mode1(P), Tr = 0.21 / P.delta, rowT = 1 / RPT;\n  // Each time the train gathers back, the energy flows into the first mode\n  // and out again; a peak of that share over 0.6 is one return.\n  if (f > P.f1) P.rising = 1;\n  else if (P.rising && P.f1 > 0.6 && P.tau > 0.5 * Tr) (P.rising = 0), P.rec++;\n  else P.rising = 0;\n  P.f1 = f;\n  if (P.reform \u003c 0) {\n    // The cosine runs through one return and is drawn back onto an exact\n    // cosine at the second, where the returning one stands; other starts,\n    // and runs a dropped soliton keeps from returning, start a fresh wave\n    // after about as long.\n    if (P.kind === 0 ? P.rec >= 1 && P.rising && f > 0.55 : P.tau > 1.2 * Tr) newRun(P, P.kind, P.kind ? 1 : 0.4);\n    else if (P.tau > 2.6 * Tr) newRun(P, P.kind, 1);\n  }\n  if (P.reform >= 0) {\n    // Both leapfrog levels are drawn over to the new wave, the cosine target\n    // following the returning crest, so that what is left of the old wave\n    // falls along a smoothstep; then the run starts from the new one exactly.\n    const r = (P.reform = min(1, P.reform + rowT / P.rlen)), rem = 1 - r * r * (3 - 2 * r), g = P.rem > 0 ? 1 - rem / P.rem : 1;\n    P.rem = rem;\n    if (P.toKind === 0) for (let i = 0; i \u003c NX; i++) P.tg[i] = cos(PI * (i * DX - P.phase));\n    for (let i = 0; i \u003c NX; i++) (u[i] += (P.tg[i] - u[i]) * g), (P.ua[i] += (P.tg[i] - P.ua[i]) * g);\n    if (r >= 1) (P.reform = -1), begin(P, P.toKind);\n  }\n}\n\n// A new run toward a wave of this kind, drawn over in len time units: 0.4\n// for the cosine coming back to itself, a whole unit for a different wave.\nfunction newRun(P, kind, len) {\n  P.reform = 0;\n  P.rem = 1;\n  P.rlen = len;\n  P.toKind = kind;\n  makeWave(P, kind, P.phase, P.tg);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.2, 3);\n  // Delta from 0.022 to 0.06 on a log scale.\n  const delta = 0.022 * (0.06 / 0.022) ** cl(k[2], 0, 1);\n  const kind = min(3, floor(cl(k[3], 0, 1) * 4));\n  if (abs(delta - P.delta) > 1e-6) (P.delta = delta), restartLeap(P);\n  if (P.kind \u003c 0) {\n    // Before the first frame the panel shows the starting wave as if it had\n    // been held still, so the diagram falls out of it.\n    makeWave(P, kind, 1, P.tg);\n    begin(P, kind);\n    P.bg = 9;\n    for (let i = 0; i \u003c NX; i++) P.bg = min(P.bg, P.ub[i]);\n    sample(P, P.hist, 0);\n    for (let r = 1; r \u003c HR; r++) P.hist.copyWithin(r * W, 0, W);\n  }\n  // A new Start is taken once the knob has rested on it a quarter second,\n  // and the wave is drawn over into it like any new run.\n  if (kind === (P.reform >= 0 ? P.toKind : P.kind)) P.wantT = 0;\n  else {\n    if (kind !== P.want) (P.want = kind), (P.wantT = 0);\n    if ((P.wantT += d) > 0.25) newRun(P, kind, 1);\n  }\n  const b = input.btnPressed || [];\n  // Four drops a run at most; past that the train is lost in white.\n  if (b[0] && P.drops \u003c 4) P.drops++, drop(P);\n\n  // 0.6 time units a second at Speed 2; the cosine breaks at 1/pi.\n  let left = d * P.speed * 0.3;\n  const rowT = 1 / RPT;\n  while (left > 1e-12) {\n    const run = min(left, (1 - P.frac) * rowT);\n    step(P, min(4000, max(1, round(run / P.dt))));\n    P.tau += run;\n    left -= run;\n    P.frac += run / rowT;\n    if (P.frac >= 1 - 1e-9) (P.frac = 0), row(P);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.kind \u003c 0) return;\n  if (P.lutHue !== P.hue) palette(P);\n  const now = P.now, hist = P.hist, lut = P.lut, f = P.frac, sc = (NL - 1) / (UH - UL);\n  sample(P, now, 0);\n  for (let y = 0; y \u003c H; y++) {\n    // Row y is the wave y rows of time ago. The newest stored row is f rows\n    // old; the top row is the wave now.\n    let ra = hist, ia, ib, w;\n    if (y \u003c= f) (ra = now), (ia = 0), (ib = P.head * W), (w = f > 0 ? y / f : 0);\n    else {\n      const kk = floor(y - f);\n      ia = ((P.head + kk) % HR) * W;\n      ib = ((P.head + kk + 1) % HR) * W;\n      w = y - f - kk;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const u = ra[ia + x] + (hist[ib + x] - ra[ia + x]) * w;\n      const o = cl(round((u - UL) * sc), 0, NL - 1) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-kdv-solitons","type":"code","name":"kdv-solitons","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   KdV Solitons\n// Family:  wave\n// Idea:    Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: solitons of the Korteweg-de Vries equation (Norman Zabusky and Martin Kruskal, 1965), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1\n//\n// Knob 1: Hue. Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale.\n// Knob 2: Speed. How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower.\n// Knob 3: Dispersion. The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often.\n// Knob 4: Start. The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run.\n// Buttons: K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.\n\nconst W = 64, H = 128;\nconst { min, max, floor, abs, sqrt, cos, sin, exp, tanh, cosh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The equation u_t + u u_x + delta^2 u_xxx = 0 on a ring of length 2, held on\n// 256 points, four to an LED column.\nconst NX = 256, MK = NX - 1, DX = 2 / NX, SUB = NX / W;\n// Rows of the diagram per unit of time, and history rows kept.\nconst RPT = 40, HR = H + 2;\n// Robert-Asselin filter on the leapfrog's middle level: it damps the\n// odd-even mode that otherwise grows to overflow after about five time units,\n// and takes under one percent off a soliton over a whole run.\nconst NU = 0.001;\n// Colour table over the height above the troughs, from UL to UH.\nconst NL = 512, UL = -0.5, UH = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p) * 255;\n  out[o + 1] = (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p) * 255;\n  out[o + 2] = (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p) * 255;\n}\n\n// Dark troughs, the crest hue at the top of a soliton, pale at the very top.\n// Below the crest the hue leans away round the wheel, so the small solitons\n// and the ripples between read as deeper water rather than a dim copy of the\n// crests. A dim orange or yellow reads brown or olive, so for crests from\n// pink round to yellow the lean runs the other way, through violet,\n// magenta and red, and only the brightest tones reach the crest hue; the two\n// leans meet at a yellow green, where the middle tones change side.\nconst LH = [0, 0.08, 0.17, 0.27, 0.27, 0.33, 0.5, 0.67, 0.83, 0.92, 1];\nconst LL = [-0.3, -0.36, -0.42, -0.47, 0.53, 0.15, 0.12, 0.12, 0, -0.2, -0.3];\nfunction lean(h) {\n  h -= floor(h);\n  for (let i = 1; i \u003c LH.length; i++) if (h \u003c= LH[i] && LH[i] > LH[i - 1]) return LL[i - 1] + ((LL[i] - LL[i - 1]) * (h - LH[i - 1])) / (LH[i] - LH[i - 1]);\n  return LL[0];\n}\nfunction palette(P) {\n  const t = P.lut, h0 = P.hue + 0.5, L = lean(h0);\n  for (let i = 0; i \u003c NL; i++) {\n    const e = UL + ((UH - UL) * i) / (NL - 1);\n    const v = cl(e / 2.5, 0, 1), w = cl((e - 2.1) / 1.4, 0, 1), q = cl((e - 0.3) / 1.9, 0, 1);\n    hsv(h0 + L * (1 - q) ** 0.6, 0.9 - 0.8 * w * w, 0.04 + 0.96 * v ** 1.15, t, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\n// du/dt at point i in the scheme's own differences.\nfunction rhs(u, i, d2) {\n  const m2 = u[(i - 2) & MK], m1 = u[(i - 1) & MK], z = u[i], p1 = u[(i + 1) & MK], p2 = u[(i + 2) & MK];\n  return -((p1 + z + m1) * (p1 - m1)) / (6 * DX) - (d2 * (p2 - 2 * p1 + 2 * m1 - m2)) / (2 * DX * DX * DX);\n}\n\n// Leapfrog is stable while dt times the largest rate of the linear scheme\n// stays under 1: |u|/dx for the u u_x term and 2.6 delta^2/dx^3 for the\n// third derivative (its worst wave is three grid cells long). A new dt, or a\n// new wave, starts the leapfrog again with one step back by Euler.\nfunction restartLeap(P) {\n  const d2 = P.delta * P.delta;\n  P.dt = 0.85 / (P.umax / DX + (2.6 * d2) / (DX * DX * DX));\n  const a = P.ua, b = P.ub;\n  for (let i = 0; i \u003c NX; i++) a[i] = b[i] - P.dt * rhs(b, i, d2);\n}\n\n// A starting wave into out, mean zero. Places and heights for the humps,\n// the plateau and the random sum are drawn fresh each run.\nfunction makeWave(P, kind, phase, out) {\n  const R = P.rnd;\n  if (kind) {\n    R[0] = Math.random() * 2;\n    R[1] = R[0] + 0.7 + Math.random() * 0.6;\n    R[2] = 1.05 + Math.random() * 0.3;\n    R[3] = 0.6 + Math.random() * 0.3;\n    for (let k = 1; k \u003c= 5; k++) (R[3 + k] = (0.3 + Math.random()) / k), (R[8 + k] = Math.random() * 2 * PI);\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    const x = i * DX;\n    let v = 0;\n    if (kind === 0) v = cos(PI * (x - phase));\n    else if (kind === 1) {\n      // Two humps, about 1.2 and 0.75 high.\n      const d1 = ((x - R[0] + 3) % 2) - 1, d2 = ((x - R[1] + 3) % 2) - 1;\n      v = R[2] * exp(-((d1 / 0.3) ** 2)) + R[3] * exp(-((d2 / 0.22) ** 2));\n    } else if (kind === 2) {\n      // A plateau 1.1 high and 0.8 wide with soft edges.\n      const d = ((x - R[0] + 3) % 2) - 1;\n      v = 0.55 * (tanh((d + 0.4) / 0.05) - tanh((d - 0.4) / 0.05));\n    } else for (let k = 1; k \u003c= 5; k++) v += R[3 + k] * cos(PI * k * x + R[8 + k]);\n    out[i] = v;\n  }\n  let s = 0, mx = 0;\n  for (let i = 0; i \u003c NX; i++) s += out[i];\n  s /= NX;\n  for (let i = 0; i \u003c NX; i++) mx = max(mx, abs((out[i] -= s)));\n  // The random sum peaks at 1, like the cosine.\n  if (kind === 3) for (let i = 0; i \u003c NX; i++) out[i] /= mx;\n}\n\nfunction begin(P, kind) {\n  P.ub.set(P.tg);\n  P.kind = kind;\n  P.tau = 0;\n  P.rec = 0;\n  P.drops = 0;\n  P.umax = 3;\n  restartLeap(P);\n}\n\n// The wave into one row of 64 columns as height above the troughs: a\n// little more than half the brightest of a column's four points and the\n// rest their mean, so a thin crest keeps its peak. The trough level follows\n// the lowest point of the wave over about a quarter time unit; it is -1 for\n// the cosine and sinks to about -0.7 once the solitons have taken their mass.\nfunction sample(P, out, o) {\n  const u = P.ub, bg = P.bg;\n  for (let c = 0, i = 0; c \u003c W; c++) {\n    let mx = -9, s = 0;\n    for (let k = 0; k \u003c SUB; k++, i++) {\n      const v = u[i];\n      s += v;\n      if (v > mx) mx = v;\n    }\n    out[o + c] = 0.55 * mx + (0.45 * s) / SUB - bg;\n  }\n}\n\n// The share of the wave's energy in the first cosine mode, 1 for the cosine\n// itself, and where that mode's crest stands.\nfunction mode1(P) {\n  const u = P.ub;\n  let c1 = 0, s1 = 0, e = 0;\n  for (let i = 0; i \u003c NX; i++) {\n    const a = PI * i * DX;\n    c1 += u[i] * cos(a);\n    s1 += u[i] * sin(a);\n    e += u[i] * u[i];\n  }\n  P.phase = atan2(s1, c1) / PI;\n  return (2 * (c1 * c1 + s1 * s1)) / (NX * e + 1e-9);\n}\n\n// A soliton 4.4 high over the trough, in the lowest stretch of the wave. Its\n// mass is taken evenly off the rest so the mean stays zero, and the older\n// leapfrog level gets it one step back along its path.\nfunction drop(P) {\n  const u = P.ub, a = P.ua;\n  let best = 99, at = 0;\n  for (let i = 0; i \u003c NX; i += 4) {\n    let s = 0;\n    for (let k = -12; k \u003c= 12; k++) s += u[(i + k) & MK];\n    if (s \u003c best) (best = s), (at = i);\n  }\n  const A = 4.4, w = P.delta * sqrt(12 / A), c = best / 25 + A / 3;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const tgt = pass ? a : u, back = pass ? c * P.dt : 0;\n    let m = 0;\n    for (let i = 0; i \u003c NX; i++) {\n      const d = ((((i - at) * DX + back + 3) % 2) - 1) / w;\n      m += P.uc[i] = A / cosh(d) ** 2;\n    }\n    for (let i = 0; i \u003c NX; i++) tgt[i] += P.uc[i] - m / NX;\n    if (!pass) P.bg -= m / NX;\n  }\n}\n\nfunction step(P, n) {\n  const d2 = P.delta * P.delta, k1 = P.dt / (3 * DX), k2 = (d2 * P.dt) / (DX * DX * DX);\n  for (let s = 0; s \u003c n; s++) {\n    const a = P.ua, b = P.ub, c = P.uc;\n    for (let i = 0; i \u003c NX; i++) {\n      const m2 = b[(i - 2) & MK], m1 = b[(i - 1) & MK], z = b[i], p1 = b[(i + 1) & MK], p2 = b[(i + 2) & MK];\n      c[i] = a[i] - k1 * (p1 + z + m1) * (p1 - m1) - k2 * (p2 - 2 * p1 + 2 * m1 - m2);\n    }\n    for (let i = 0; i \u003c NX; i++) b[i] += NU * (a[i] - 2 * b[i] + c[i]);\n    P.ua = b;\n    P.ub = c;\n    P.uc = a;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    ua: new Float64Array(NX), ub: new Float64Array(NX), uc: new Float64Array(NX), tg: new Float64Array(NX),\n    hist: new Float32Array(HR * W), now: new Float32Array(W), head: 0, frac: 0,\n    lut: new Float32Array(NL * 3), lutHue: -1, hue: 0, speed: 2, delta: 0.022,\n    dt: 1e-4, umax: 3, tau: 0, kind: -1, want: 0, wantT: 0, rnd: new Float64Array(14),\n    f1: 0, rising: 0, rec: 0, phase: 1, reform: -1, toKind: 0, rem: 1, rlen: 1, bg: -1, drops: 0,\n  };\n}\n\n// One row of time has passed: store it, keep dt safe, and watch for the\n// moment to start a new run.\nfunction row(P) {\n  const u = P.ub;\n  let um = 0, lo = 9, bad = false;\n  for (let i = 0; i \u003c NX; i++) {\n    const v = u[i];\n    if (!(v === v) || abs(v) > 40) bad = true;\n    else if (abs(v) > um) um = abs(v);\n    if (v \u003c lo) lo = v;\n  }\n  if (bad) return makeWave(P, P.kind, 1, P.tg), begin(P, P.kind);\n  P.bg += (lo - P.bg) * 0.1;\n  P.head = (P.head + HR - 1) % HR;\n  sample(P, P.hist, P.head * W);\n  // A taller wave than dt was set for: a smaller dt, from here.\n  if (um > 0.9 * P.umax) (P.umax = um * 1.4), restartLeap(P);\n  const f = mode1(P), Tr = 0.21 / P.delta, rowT = 1 / RPT;\n  // Each time the train gathers back, the energy flows into the first mode\n  // and out again; a peak of that share over 0.6 is one return.\n  if (f > P.f1) P.rising = 1;\n  else if (P.rising && P.f1 > 0.6 && P.tau > 0.5 * Tr) (P.rising = 0), P.rec++;\n  else P.rising = 0;\n  P.f1 = f;\n  if (P.reform \u003c 0) {\n    // The cosine runs through one return and is drawn back onto an exact\n    // cosine at the second, where the returning one stands; other starts,\n    // and runs a dropped soliton keeps from returning, start a fresh wave\n    // after about as long.\n    if (P.kind === 0 ? P.rec >= 1 && P.rising && f > 0.55 : P.tau > 1.2 * Tr) newRun(P, P.kind, P.kind ? 1 : 0.4);\n    else if (P.tau > 2.6 * Tr) newRun(P, P.kind, 1);\n  }\n  if (P.reform >= 0) {\n    // Both leapfrog levels are drawn over to the new wave, the cosine target\n    // following the returning crest, so that what is left of the old wave\n    // falls along a smoothstep; then the run starts from the new one exactly.\n    const r = (P.reform = min(1, P.reform + rowT / P.rlen)), rem = 1 - r * r * (3 - 2 * r), g = P.rem > 0 ? 1 - rem / P.rem : 1;\n    P.rem = rem;\n    if (P.toKind === 0) for (let i = 0; i \u003c NX; i++) P.tg[i] = cos(PI * (i * DX - P.phase));\n    for (let i = 0; i \u003c NX; i++) (u[i] += (P.tg[i] - u[i]) * g), (P.ua[i] += (P.tg[i] - P.ua[i]) * g);\n    if (r >= 1) (P.reform = -1), begin(P, P.toKind);\n  }\n}\n\n// A new run toward a wave of this kind, drawn over in len time units: 0.4\n// for the cosine coming back to itself, a whole unit for a different wave.\nfunction newRun(P, kind, len) {\n  P.reform = 0;\n  P.rem = 1;\n  P.rlen = len;\n  P.toKind = kind;\n  makeWave(P, kind, P.phase, P.tg);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.2, 3);\n  // Delta from 0.022 to 0.06 on a log scale.\n  const delta = 0.022 * (0.06 / 0.022) ** cl(k[2], 0, 1);\n  const kind = min(3, floor(cl(k[3], 0, 1) * 4));\n  if (abs(delta - P.delta) > 1e-6) (P.delta = delta), restartLeap(P);\n  if (P.kind \u003c 0) {\n    // Before the first frame the panel shows the starting wave as if it had\n    // been held still, so the diagram falls out of it.\n    makeWave(P, kind, 1, P.tg);\n    begin(P, kind);\n    P.bg = 9;\n    for (let i = 0; i \u003c NX; i++) P.bg = min(P.bg, P.ub[i]);\n    sample(P, P.hist, 0);\n    for (let r = 1; r \u003c HR; r++) P.hist.copyWithin(r * W, 0, W);\n  }\n  // A new Start is taken once the knob has rested on it a quarter second,\n  // and the wave is drawn over into it like any new run.\n  if (kind === (P.reform >= 0 ? P.toKind : P.kind)) P.wantT = 0;\n  else {\n    if (kind !== P.want) (P.want = kind), (P.wantT = 0);\n    if ((P.wantT += d) > 0.25) newRun(P, kind, 1);\n  }\n  const b = input.btnPressed || [];\n  // Four drops a run at most; past that the train is lost in white.\n  if (b[0] && P.drops \u003c 4) P.drops++, drop(P);\n\n  // 0.6 time units a second at Speed 2; the cosine breaks at 1/pi.\n  let left = d * P.speed * 0.3;\n  const rowT = 1 / RPT;\n  while (left > 1e-12) {\n    const run = min(left, (1 - P.frac) * rowT);\n    step(P, min(4000, max(1, round(run / P.dt))));\n    P.tau += run;\n    left -= run;\n    P.frac += run / rowT;\n    if (P.frac >= 1 - 1e-9) (P.frac = 0), row(P);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.kind \u003c 0) return;\n  if (P.lutHue !== P.hue) palette(P);\n  const now = P.now, hist = P.hist, lut = P.lut, f = P.frac, sc = (NL - 1) / (UH - UL);\n  sample(P, now, 0);\n  for (let y = 0; y \u003c H; y++) {\n    // Row y is the wave y rows of time ago. The newest stored row is f rows\n    // old; the top row is the wave now.\n    let ra = hist, ia, ib, w;\n    if (y \u003c= f) (ra = now), (ia = 0), (ib = P.head * W), (w = f > 0 ? y / f : 0);\n    else {\n      const kk = floor(y - f);\n      ia = ((P.head + kk) % HR) * W;\n      ib = ((P.head + kk + 1) % HR) * W;\n      w = y - f - kk;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const u = ra[ia + x] + (hist[ib + x] - ra[ia + x]) * w;\n      const o = cl(round((u - UL) * sc), 0, NL - 1) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower."},{"name":"Dispersion","min":0,"max":1,"about":"The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often."},{"name":"Start","min":0,"max":1,"about":"The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run."}],"start":[0,2,0,0.06],"measures":{"motion":0.5261,"detail":0.0597,"edges":0.2382,"complexity":1.5547,"coverage":0.8045,"colour":0.3345,"drift":0.2583},"knobResponse":[0.2224,0.1099,0.0581,0.2182]},{"slug":"kelvin-wake","title":"Kelvin Wake","family":"wave","round":34,"note":"고요한 물 위로 흰 거품 한 점이 아래에서 위로 올라가고, 그 뒤로 켈빈의 배 물결이 펼쳐져요. 물길을 가로지르는 굽은 가로 물마루와 비스듬한 짧은 발산 물결이 반각 19.47° 쐐기의 두 팔에서 만나 가장 밝은 첨점 줄을 이루고, 쐐기는 원천이 얼마나 빠르든 원천 뒤 90 LED 에서 패널 양옆에 닿아요. K3 은 원천을 빠르게 해 물결을 길게 늘이지만 쐐기의 각은 그대로예요.","idea":"A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.","buttons":"K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.","code":"// ===== Patternflow pattern =====\n// Title:   Kelvin Wake\n// Family:  wave\n// Idea:    A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kelvin ship-wave pattern (William Thomson, Lord Kelvin, 1887), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1\n//\n// Knob 1: Hue. The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Velocity. The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests.\n// Knob 4: Patch. The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7.\n// Buttons: K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.\n\nconst W = 64, H = 128, YC = 32, DX = 0.5, N = 256;\n// The wake is drawn to 150 LEDs behind its source and fades over the last\n// 45; sources come 190 LEDs apart, so 40 LEDs of still water separate them.\nconst LT = 150, FADE = 45, GAP = 190, ROWS = Math.ceil(LT / DX) + 2;\nconst { floor, sqrt, sin, cos, exp, abs, round, min, max, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// In-place radix-2 FFT with the + sign.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// The steady wake in the source's frame, x LEDs behind it and y LEDs to the\n// side, from the classical integral over wave directions theta:\n//   zeta(x, y) = Im  int sec^3(theta) exp(-(k a)^2 / 4) exp(i k (x cos theta + y sin theta)) dtheta,\n// k = k0 sec^2(theta), k0 = g / U^2 = 2 pi / lambda. The imaginary part is\n// the sine form, which is zero at x = 0, so the wake starts from nothing at\n// the source. Changing variable to the cross-track wavenumber\n// ky = k0 sec(theta) tan(theta) makes each row x one Fourier sum over ky:\n// sec^2(theta) = (1 + sqrt(1 + 4 (ky / k0)^2)) / 2, the along-track\n// wavenumber is k0 sec(theta), and sec^3 dtheta = sec^2 / (k0 (2 sec^2 - 1)) dky.\n// Only the slopes are drawn, so a row is two 256-point FFTs across y: the\n// same sum times i kx and times i ky. 256 LEDs across hold the wedge out to\n// x = 150, where it is 106 wide, so the FFT's wrap never reaches the panel.\n// Fitting the brightest crest beside the axis, row by row out to x = 320, as\n// s x - c x^(1/3) (the Airy fringe sits inside the caustic by c x^(1/3)) puts\n// the cusp line at 19.25 to 19.46 degrees over the whole Velocity range;\n// Kelvin's angle is arcsin(1/3) = 19.47.\nfunction build(T, lambda, a) {\n  const k0 = (2 * PI) / lambda;\n  const { ky, kx, B, r1, i1, r2, i2, ZX, ZY } = T;\n  for (let j = 0; j \u003c N; j++) {\n    const q = (2 * PI * (j \u003c N / 2 ? j : j - N)) / N, u = q / k0;\n    const s2 = (1 + sqrt(1 + 4 * u * u)) / 2, k = k0 * s2, aq = abs(q);\n    // A soft roll-off before the LED grid's Nyquist limit.\n    const win = aq \u003c 0.6 * PI ? 1 : cos(((aq - 0.6 * PI) / (0.4 * PI)) * 0.5 * PI) ** 2;\n    B[j] = (s2 / (k0 * (2 * s2 - 1))) * exp(-(((k * a) / 2) ** 2)) * win;\n    ky[j] = q;\n    kx[j] = k0 * sqrt(s2);\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const x = r * DX;\n    for (let j = 0; j \u003c N; j++) {\n      // Columns sit at y = m + 0.5, so the track runs between the two middle columns.\n      const ph = kx[j] * x + ky[j] * 0.5, c = B[j] * cos(ph), s = B[j] * sin(ph);\n      r1[j] = -kx[j] * s;\n      i1[j] = kx[j] * c;\n      r2[j] = -ky[j] * s;\n      i2[j] = ky[j] * c;\n    }\n    fft(r1, i1);\n    fft(r2, i2);\n    // The far end of the wake fades out: a source that has run for a finite\n    // time has a wake of finite length.\n    const f = 1 - sm(LT - FADE, LT, x);\n    for (let m = 0; m \u003c YC; m++) {\n      ZX[r * YC + m] = i1[m] * f;\n      ZY[r * YC + m] = i2[m] * f;\n    }\n  }\n  // One scale for the shading: the 99th percentile of the lit slope over\n  // the stretch that fits on the panel, both sides of the track.\n  const vals = T.vals;\n  let n = 0;\n  for (let r = floor(4 / DX); r \u003c floor(128 / DX); r += 2)\n    for (let m = 0; m \u003c YC; m++) {\n      const gx = ZX[r * YC + m], gy = ZY[r * YC + m];\n      vals[n++] = abs(gy * T.lx + gx * T.ly);\n      vals[n++] = abs(-gy * T.lx + gx * T.ly);\n    }\n  const v = vals.subarray(0, n).sort();\n  T.scale = 1 / (v[floor(n * 0.99)] || 1);\n}\n\nexport function setup(params) {\n  // The light comes from the upper left, low over the water.\n  const lx = -0.45, ly = -0.89;\n  params.s = {\n    hue: 0, speed: 2, vel: 1, patch: 0.06, warm: false, key: \"\", foamT: 0,\n    src: [], foam: [], cache: new Map(), c: [0, 0, 0],\n    work: {\n      ky: new Float64Array(N), kx: new Float64Array(N), B: new Float64Array(N),\n      r1: new Float64Array(N), i1: new Float64Array(N), r2: new Float64Array(N), i2: new Float64Array(N),\n    },\n    lx, ly, GX: new Float32Array(W * H), GY: new Float32Array(W * H), F: new Float32Array(W * H), tab: null,\n  };\n}\n\nfunction table(S) {\n  // Tables are cached by the quantised knob pair: Velocity in steps of 0.02,\n  // Patch in steps of 0.02.\n  const qv = round(S.vel * 50) / 50, qp = round(S.patch * 50) / 50, key = qv + \",\" + qp;\n  if (key === S.key) return;\n  S.key = key;\n  let T = S.cache.get(key);\n  if (!T) {\n    T = {\n      ...S.work, lx: S.lx, ly: S.ly, scale: 1, vals: new Float32Array(2 * YC * 128),\n      ZX: new Float32Array(ROWS * YC), ZY: new Float32Array(ROWS * YC),\n    };\n    build(T, 12 * qv * qv, 1.2 + 4.8 * qp);\n    if (S.cache.size > 6) S.cache.delete(S.cache.keys().next().value);\n    S.cache.set(key, T);\n  }\n  S.tab = T;\n}\n\n// Rows climbed per second.\nconst rate = (S) => 15 * S.vel * S.speed;\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.vel = cl(k[2], 1, 1.7);\n  S.patch = cl(k[3], 0, 1);\n  table(S);\n  const v = rate(S);\n  if (!S.warm) {\n    // Open so that 2.4 seconds in, a source is 40 LEDs below the top with the\n    // one before it already gone past.\n    const y0 = 40 + 2.4 * v;\n    S.src = [y0 - GAP, y0];\n    S.warm = true;\n  }\n  for (let i = 0; i \u003c S.src.length; i++) S.src[i] -= v * d;\n  while (S.src.length && S.src[0] \u003c -LT - 4) S.src.shift();\n  const last = S.src[S.src.length - 1];\n  if (last === undefined || last \u003c H + 6 - GAP) S.src.push(H + 6);\n  else if (input.btnPressed && input.btnPressed[0] && last \u003c H - 24) S.src.push(H + 6);\n  // Foam shed by each source stays where it fell on the still water and\n  // fades in about 0.4 seconds.\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  S.foamT += d * 60 * S.speed / 2;\n  for (const f of S.foam) f.life -= (d * S.speed) / 2 / 0.4;\n  S.foam = S.foam.filter((f) => f.life > 0);\n  while (S.foamT >= 1) {\n    S.foamT -= 1;\n    for (const ys of S.src)\n      if (ys > -4 && ys \u003c H + 4) {\n        const ang = random() * 2 * PI, r = rf * sqrt(random());\n        S.foam.push({ x: 31.5 + r * cos(ang), y: ys + 0.6 * r * sin(ang) + 1, life: 0.6 + 0.4 * random() });\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tab) return;\n  const T = S.tab, { ZX, ZY } = T, GX = S.GX, GY = S.GY, F = S.F, c = S.c;\n  GX.fill(0);\n  GY.fill(0);\n  F.fill(0);\n  for (const f of S.foam) {\n    const x = round(f.x), y = round(f.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) F[y * W + x] = max(F[y * W + x], min(1, f.life) * 0.85);\n  }\n  // Each source lays its wake, row by row, from the table: x behind it,\n  // linear between table rows; the cross-track slope is odd in y.\n  for (const ys of S.src)\n    for (let y = max(0, Math.ceil(ys)); y \u003c H; y++) {\n      const fx = (y - ys) / DX;\n      if (fx >= ROWS - 1) break;\n      const r = floor(fx), w = fx - r, o0 = r * YC, o1 = o0 + YC;\n      for (let m = 0; m \u003c YC; m++) {\n        const gx = ZX[o0 + m] * (1 - w) + ZX[o1 + m] * w, gy = ZY[o0 + m] * (1 - w) + ZY[o1 + m] * w;\n        GY[y * W + 32 + m] += gx;\n        GX[y * W + 32 + m] += gy;\n        GY[y * W + 31 - m] += gx;\n        GX[y * W + 31 - m] -= gy;\n      }\n    }\n  const h0 = S.hue + 0.55, hh = h0 - floor(h0);\n  // Amber, gold and lime water read brown or olive at the calm level, so\n  // there the water is lifted to 0.74 and its shadow faces lean to crimson.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.22, 0.32, hh));\n  const base = 0.34 + 0.4 * warm, sat0 = 0.82 + 0.1 * warm;\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Lit where the surface tilts towards the light.\n      const sh = -(GX[p] * S.lx + GY[p] * S.ly) * T.scale;\n      const up = sh > 0 ? min(1.4, sh) : 0, dn = sh \u003c 0 ? min(1, -sh) : 0;\n      let v = base + (1 - base) * pow(min(1, up), 0.75) - (base - 0.08 - 0.12 * warm) * pow(dn, 0.7);\n      let s = sat0 * (1 - 0.7 * sm(0.55, 1.25, up));\n      let hue = h0 + 0.03 * up - (0.02 + 0.08 * warm) * dn;\n      // The foam patch over each source.\n      let foam = F[p];\n      for (const ys of S.src) {\n        const dx = x - 31.5, dy = (y - ys) * 1.4, r2 = dx * dx + dy * dy;\n        if (r2 \u003c (rf + 1.5) * (rf + 1.5)) foam = max(foam, 1 - sm(rf - 1, rf + 1.5, sqrt(r2)));\n      }\n      if (foam > 0) {\n        v = v + (1 - v) * foam;\n        s *= 1 - foam;\n      }\n      hsv(hue, s, v, c);\n      display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n    }\n}\n","layer":{"id":"layer-kelvin-wake","type":"code","name":"kelvin-wake","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kelvin Wake\n// Family:  wave\n// Idea:    A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kelvin ship-wave pattern (William Thomson, Lord Kelvin, 1887), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1\n//\n// Knob 1: Hue. The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Velocity. The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests.\n// Knob 4: Patch. The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7.\n// Buttons: K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.\n\nconst W = 64, H = 128, YC = 32, DX = 0.5, N = 256;\n// The wake is drawn to 150 LEDs behind its source and fades over the last\n// 45; sources come 190 LEDs apart, so 40 LEDs of still water separate them.\nconst LT = 150, FADE = 45, GAP = 190, ROWS = Math.ceil(LT / DX) + 2;\nconst { floor, sqrt, sin, cos, exp, abs, round, min, max, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// In-place radix-2 FFT with the + sign.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// The steady wake in the source's frame, x LEDs behind it and y LEDs to the\n// side, from the classical integral over wave directions theta:\n//   zeta(x, y) = Im  int sec^3(theta) exp(-(k a)^2 / 4) exp(i k (x cos theta + y sin theta)) dtheta,\n// k = k0 sec^2(theta), k0 = g / U^2 = 2 pi / lambda. The imaginary part is\n// the sine form, which is zero at x = 0, so the wake starts from nothing at\n// the source. Changing variable to the cross-track wavenumber\n// ky = k0 sec(theta) tan(theta) makes each row x one Fourier sum over ky:\n// sec^2(theta) = (1 + sqrt(1 + 4 (ky / k0)^2)) / 2, the along-track\n// wavenumber is k0 sec(theta), and sec^3 dtheta = sec^2 / (k0 (2 sec^2 - 1)) dky.\n// Only the slopes are drawn, so a row is two 256-point FFTs across y: the\n// same sum times i kx and times i ky. 256 LEDs across hold the wedge out to\n// x = 150, where it is 106 wide, so the FFT's wrap never reaches the panel.\n// Fitting the brightest crest beside the axis, row by row out to x = 320, as\n// s x - c x^(1/3) (the Airy fringe sits inside the caustic by c x^(1/3)) puts\n// the cusp line at 19.25 to 19.46 degrees over the whole Velocity range;\n// Kelvin's angle is arcsin(1/3) = 19.47.\nfunction build(T, lambda, a) {\n  const k0 = (2 * PI) / lambda;\n  const { ky, kx, B, r1, i1, r2, i2, ZX, ZY } = T;\n  for (let j = 0; j \u003c N; j++) {\n    const q = (2 * PI * (j \u003c N / 2 ? j : j - N)) / N, u = q / k0;\n    const s2 = (1 + sqrt(1 + 4 * u * u)) / 2, k = k0 * s2, aq = abs(q);\n    // A soft roll-off before the LED grid's Nyquist limit.\n    const win = aq \u003c 0.6 * PI ? 1 : cos(((aq - 0.6 * PI) / (0.4 * PI)) * 0.5 * PI) ** 2;\n    B[j] = (s2 / (k0 * (2 * s2 - 1))) * exp(-(((k * a) / 2) ** 2)) * win;\n    ky[j] = q;\n    kx[j] = k0 * sqrt(s2);\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const x = r * DX;\n    for (let j = 0; j \u003c N; j++) {\n      // Columns sit at y = m + 0.5, so the track runs between the two middle columns.\n      const ph = kx[j] * x + ky[j] * 0.5, c = B[j] * cos(ph), s = B[j] * sin(ph);\n      r1[j] = -kx[j] * s;\n      i1[j] = kx[j] * c;\n      r2[j] = -ky[j] * s;\n      i2[j] = ky[j] * c;\n    }\n    fft(r1, i1);\n    fft(r2, i2);\n    // The far end of the wake fades out: a source that has run for a finite\n    // time has a wake of finite length.\n    const f = 1 - sm(LT - FADE, LT, x);\n    for (let m = 0; m \u003c YC; m++) {\n      ZX[r * YC + m] = i1[m] * f;\n      ZY[r * YC + m] = i2[m] * f;\n    }\n  }\n  // One scale for the shading: the 99th percentile of the lit slope over\n  // the stretch that fits on the panel, both sides of the track.\n  const vals = T.vals;\n  let n = 0;\n  for (let r = floor(4 / DX); r \u003c floor(128 / DX); r += 2)\n    for (let m = 0; m \u003c YC; m++) {\n      const gx = ZX[r * YC + m], gy = ZY[r * YC + m];\n      vals[n++] = abs(gy * T.lx + gx * T.ly);\n      vals[n++] = abs(-gy * T.lx + gx * T.ly);\n    }\n  const v = vals.subarray(0, n).sort();\n  T.scale = 1 / (v[floor(n * 0.99)] || 1);\n}\n\nexport function setup(params) {\n  // The light comes from the upper left, low over the water.\n  const lx = -0.45, ly = -0.89;\n  params.s = {\n    hue: 0, speed: 2, vel: 1, patch: 0.06, warm: false, key: \"\", foamT: 0,\n    src: [], foam: [], cache: new Map(), c: [0, 0, 0],\n    work: {\n      ky: new Float64Array(N), kx: new Float64Array(N), B: new Float64Array(N),\n      r1: new Float64Array(N), i1: new Float64Array(N), r2: new Float64Array(N), i2: new Float64Array(N),\n    },\n    lx, ly, GX: new Float32Array(W * H), GY: new Float32Array(W * H), F: new Float32Array(W * H), tab: null,\n  };\n}\n\nfunction table(S) {\n  // Tables are cached by the quantised knob pair: Velocity in steps of 0.02,\n  // Patch in steps of 0.02.\n  const qv = round(S.vel * 50) / 50, qp = round(S.patch * 50) / 50, key = qv + \",\" + qp;\n  if (key === S.key) return;\n  S.key = key;\n  let T = S.cache.get(key);\n  if (!T) {\n    T = {\n      ...S.work, lx: S.lx, ly: S.ly, scale: 1, vals: new Float32Array(2 * YC * 128),\n      ZX: new Float32Array(ROWS * YC), ZY: new Float32Array(ROWS * YC),\n    };\n    build(T, 12 * qv * qv, 1.2 + 4.8 * qp);\n    if (S.cache.size > 6) S.cache.delete(S.cache.keys().next().value);\n    S.cache.set(key, T);\n  }\n  S.tab = T;\n}\n\n// Rows climbed per second.\nconst rate = (S) => 15 * S.vel * S.speed;\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.vel = cl(k[2], 1, 1.7);\n  S.patch = cl(k[3], 0, 1);\n  table(S);\n  const v = rate(S);\n  if (!S.warm) {\n    // Open so that 2.4 seconds in, a source is 40 LEDs below the top with the\n    // one before it already gone past.\n    const y0 = 40 + 2.4 * v;\n    S.src = [y0 - GAP, y0];\n    S.warm = true;\n  }\n  for (let i = 0; i \u003c S.src.length; i++) S.src[i] -= v * d;\n  while (S.src.length && S.src[0] \u003c -LT - 4) S.src.shift();\n  const last = S.src[S.src.length - 1];\n  if (last === undefined || last \u003c H + 6 - GAP) S.src.push(H + 6);\n  else if (input.btnPressed && input.btnPressed[0] && last \u003c H - 24) S.src.push(H + 6);\n  // Foam shed by each source stays where it fell on the still water and\n  // fades in about 0.4 seconds.\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  S.foamT += d * 60 * S.speed / 2;\n  for (const f of S.foam) f.life -= (d * S.speed) / 2 / 0.4;\n  S.foam = S.foam.filter((f) => f.life > 0);\n  while (S.foamT >= 1) {\n    S.foamT -= 1;\n    for (const ys of S.src)\n      if (ys > -4 && ys \u003c H + 4) {\n        const ang = random() * 2 * PI, r = rf * sqrt(random());\n        S.foam.push({ x: 31.5 + r * cos(ang), y: ys + 0.6 * r * sin(ang) + 1, life: 0.6 + 0.4 * random() });\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tab) return;\n  const T = S.tab, { ZX, ZY } = T, GX = S.GX, GY = S.GY, F = S.F, c = S.c;\n  GX.fill(0);\n  GY.fill(0);\n  F.fill(0);\n  for (const f of S.foam) {\n    const x = round(f.x), y = round(f.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) F[y * W + x] = max(F[y * W + x], min(1, f.life) * 0.85);\n  }\n  // Each source lays its wake, row by row, from the table: x behind it,\n  // linear between table rows; the cross-track slope is odd in y.\n  for (const ys of S.src)\n    for (let y = max(0, Math.ceil(ys)); y \u003c H; y++) {\n      const fx = (y - ys) / DX;\n      if (fx >= ROWS - 1) break;\n      const r = floor(fx), w = fx - r, o0 = r * YC, o1 = o0 + YC;\n      for (let m = 0; m \u003c YC; m++) {\n        const gx = ZX[o0 + m] * (1 - w) + ZX[o1 + m] * w, gy = ZY[o0 + m] * (1 - w) + ZY[o1 + m] * w;\n        GY[y * W + 32 + m] += gx;\n        GX[y * W + 32 + m] += gy;\n        GY[y * W + 31 - m] += gx;\n        GX[y * W + 31 - m] -= gy;\n      }\n    }\n  const h0 = S.hue + 0.55, hh = h0 - floor(h0);\n  // Amber, gold and lime water read brown or olive at the calm level, so\n  // there the water is lifted to 0.74 and its shadow faces lean to crimson.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.22, 0.32, hh));\n  const base = 0.34 + 0.4 * warm, sat0 = 0.82 + 0.1 * warm;\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Lit where the surface tilts towards the light.\n      const sh = -(GX[p] * S.lx + GY[p] * S.ly) * T.scale;\n      const up = sh > 0 ? min(1.4, sh) : 0, dn = sh \u003c 0 ? min(1, -sh) : 0;\n      let v = base + (1 - base) * pow(min(1, up), 0.75) - (base - 0.08 - 0.12 * warm) * pow(dn, 0.7);\n      let s = sat0 * (1 - 0.7 * sm(0.55, 1.25, up));\n      let hue = h0 + 0.03 * up - (0.02 + 0.08 * warm) * dn;\n      // The foam patch over each source.\n      let foam = F[p];\n      for (const ys of S.src) {\n        const dx = x - 31.5, dy = (y - ys) * 1.4, r2 = dx * dx + dy * dy;\n        if (r2 \u003c (rf + 1.5) * (rf + 1.5)) foam = max(foam, 1 - sm(rf - 1, rf + 1.5, sqrt(r2)));\n      }\n      if (foam > 0) {\n        v = v + (1 - v) * foam;\n        s *= 1 - foam;\n      }\n      hsv(hue, s, v, c);\n      display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again."},{"name":"Velocity","min":1,"max":1.7,"about":"The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests."},{"name":"Patch","min":0,"max":1,"about":"The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7."}],"start":[0,2,1,0.06],"measures":{"motion":1.1485,"detail":0.0308,"edges":0.1674,"complexity":1.0448,"coverage":0.995,"colour":0.1633,"drift":0.0493},"knobResponse":[0.3266,0.0627,0.0628,0.0605]},{"slug":"kettle","title":"Kettle","family":"kitchen","round":20,"note":"밤 부엌 조리대의 유리 전기 주전자가 128줄을 다 써요. 받침의 파란 LED 고리가 물을 밑에서 밝히는 동안 열판의 잔 기포가 떠올랐다 꺼지는 철을 지나 큰 기포가 들끓고, 김이 주둥이에서 패널 꼭대기까지 오르다가 스위치가 딸깍 꺼져요. K1 을 누르면 바로 켜거나 꺼요.","idea":"A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.","buttons":"K1 tap switches the kettle on or off now.","code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-kettle","type":"code","name":"kettle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower."},{"name":"Fill","min":1,"max":1.7,"about":"How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil."},{"name":"Cold","min":0,"max":1,"about":"How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it."}],"start":[0,2,1,0.06],"measures":{"motion":0.2843,"detail":0.0449,"edges":0.2669,"complexity":1.5413,"coverage":0.6281,"colour":0.1671,"drift":0.1681},"knobResponse":[0.1034,0.0699,0.0403,0.056]},{"slug":"kingfisher","title":"Kingfisher","family":"bird","round":20,"note":"강둑 단면이 오리나무 가지부터 강바닥 자갈까지 128줄을 다 써요. 물총새가 가지에서 머리를 까딱이며 물을 보다가 곧장 내리꽂혀 물보라와 거품 줄을 남기고, 피라미를 물고 올라와 가지에 두드린 뒤 삼켜요. K1 을 누르면 바로 뛰어들어요.","idea":"A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.","buttons":"K1 tap sends the kingfisher down now, or as soon as it is back on the branch.","code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","layer":{"id":"layer-kingfisher","type":"code","name":"kingfisher","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen."},{"name":"Fish","min":6,"max":60,"about":"How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner."},{"name":"Current","min":-1,"max":1,"about":"Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea."}],"start":[0,2,6,0.06],"measures":{"motion":0.0867,"detail":0.0496,"edges":0.2577,"complexity":2.0204,"coverage":0.9952,"colour":0.1732,"drift":0.0377},"knobResponse":[0.186,0.0476,0.0402,0.0555]},{"slug":"kingman-coalescent","title":"Kingman Coalescent","family":"data","round":39,"note":"64개체 모런 집단이 앞으로 살고, 패널은 지금 살아 있는 64개체의 가계도예요. 맨 아랫줄이 지금, 위로 갈수록 과거이고, 같은 조상의 자손이 붙어 서도록 열을 줄 세워서 좁은 블록이 위로 갈수록 합쳐지는 불꽃 그림이 돼요. 마지막 두 갈래가 만나는 데 걸리는 시간이 전체의 절반쯤이라 긴 이음매 하나가 위쪽을 가르고, 한 집안이 사라지면 공통 조상이 앞으로 뛰어요.","idea":"A Moran population of 64 runs forward one birth at a time while the panel draws the family tree of the living as a flame chart, now along the bottom row and the past going up, each LED in the colour of the ancestor its column came from at that time, so the narrow blocks at the bottom merge fast into a few wide ones, the last two take about as long to meet as all the others together, and when one of them dies out the common ancestor jumps forward and the panel takes the survivor's colours.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Kingman Coalescent\n// Family:  data\n// Idea:    A Moran population of 64 runs forward one birth at a time while the panel draws the family tree of the living as a flame chart, now along the bottom row and the past going up, each LED in the colour of the ancestor its column came from at that time, so the narrow blocks at the bottom merge fast into a few wide ones, the last two take about as long to meet as all the others together, and when one of them dies out the common ancestor jumps forward and the panel takes the survivor's colours.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kingman's coalescent (John Kingman, 1982), traced back through a Moran population (Patrick Moran, 1958)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Span=3..9, Speed=0.2..3, Width=1..4, Mutation=0..1\n//\n// Knob 1: Span. How far back the top row reaches, in units of Kingman time: N(N-1)/2 = 2016 Moran events, about 31 generations of the 64. At 3 a row is 48 events and the common ancestor of all 64 sits on average 1.97 units back, at row 83 of 128; at 6 at row 42; at 9 a row is 143 events, the tree crowds into the bottom 28 rows and above it the one line of ancestors shows its mutations as bands.\n// Knob 2: Speed. At 2 the population runs 0.06 units of Kingman time a second, 121 births, and the panel climbs 2.5 rows a second at Span 3; the common ancestor of all 64 moves forward on average every 17 seconds, by about 43 rows. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Width. LEDs for each traced individual. At 1 all 64 are traced, one column each, and a block gets its dark seam from two LEDs wide; at 2 the first 32 of the population's 64 places, at 3 the first 21, at 4 the first 16, each 4 LEDs with a seam. The common ancestor of a sample can also move back, when a newborn's line joins the sample's tree above it: at 4 it moves forward every 0.34 units of Kingman time and back every 0.5.\n// Knob 4: Mutation. The chance that a birth carries a mutation, which steps the child's hue 0.05 to 0.11 round the wheel either way. 0.03 at 0 and 0.066 at the start, about two along each line per unit of Kingman time, so the two families of the last split mostly differ in colour; at 1 0.63, nearly every row of every block steps and the blocks turn to stripes.\n\nconst W = 64, H = 128, N = 64;\n// One unit of Kingman time: N(N-1)/2 Moran events, in which a given pair of\n// lineages meets once on average going back.\nconst UNIT = (N * (N - 1)) / 2;\n// Every individual ever born gets an id, in order of birth; its parent, the\n// event it was born in and its hue sit in a ring of the last RING births.\nconst RING = 1 \u003c\u003c 16, MASK = RING - 1;\n// Kingman time run before the first frame, so the history covers the panel.\nconst BURN = 16;\n// Kingman time per second at Speed 1.\nconst RATE = 0.03;\nconst { floor, round, random, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, ev: 0, next: 0, acc: 0, n: 0, span: 3, speed: 2, mu: 0.05, shift: 0,\n    par: new Int32Array(RING), born: new Float64Array(RING), hue: new Float32Array(RING),\n    slot: new Int32Array(N), front: new Int32Array(N), tm: 0, order: new Int32Array(N), anc: new Int32Array(W * H),\n    c: [0, 0, 0],\n  };\n}\n\n// The founders: N individuals with no parent, born at event 0.\nfunction found(S) {\n  for (let i = 0; i \u003c N; i++) {\n    S.par[i] = -1;\n    S.born[i] = 0;\n    S.hue[i] = 0.58;\n    S.slot[i] = i;\n  }\n  S.next = N;\n  S.ev = 0;\n}\n\n// One Moran event: a parent picked at random has a child, which takes the\n// place of another individual picked at random, who dies.\nfunction event(S) {\n  const p = floor(random() * N);\n  let d = floor(random() * (N - 1));\n  if (d >= p) d++;\n  const id = S.next++, j = id & MASK, pa = S.slot[p];\n  S.ev++;\n  S.par[j] = pa;\n  S.born[j] = S.ev;\n  // A mutation, with chance mu: the hue steps a little either way.\n  let m = 0;\n  if (random() \u003c S.mu) m = (random() \u003c 0.5 ? -1 : 1) * (0.05 + 0.06 * random());\n  S.hue[j] = S.hue[pa & MASK] + m;\n  S.slot[d] = id;\n}\n\nconst parent = (S, a) => (a \u003c N || S.next - a > RING - 2 * N ? -1 : S.par[a & MASK]);\n\n// Going back from the first n slots, always stepping the youngest ancestor\n// to its parent, until one is left: returns that common ancestor and, in\n// S.tm, the Moran events back to the merge of the last two lineages.\nfunction mrca(S, n) {\n  const f = S.front;\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = S.slot[i];\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === a) dup = true;\n    if (!dup) f[k++] = a;\n  }\n  S.tm = 0;\n  while (k > 1) {\n    let m = 0;\n    for (let j = 1; j \u003c k; j++) if (f[j] > f[m]) m = j;\n    const a = f[m], q = parent(S, a);\n    if (q \u003c 0) return -1;\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === q) dup = true;\n    if (dup) {\n      f[m] = f[--k];\n      S.tm = S.ev - S.born[a & MASK] + 1;\n    } else f[m] = q;\n  }\n  return f[0];\n}\n\n// Order of two individuals in the flame chart: follow both lines back to\n// where they meet; the one that is that ancestor itself comes first,\n// otherwise the one whose line left it earlier. The order of two living\n// individuals never changes, so the chart only moves where they are born\n// and die.\nfunction cmp(S, a, b) {\n  let pa = -1, pb = -1;\n  while (a !== b) {\n    if (a > b) {\n      const q = parent(S, a);\n      if (q \u003c 0) return a - b;\n      pa = a;\n      a = q;\n    } else {\n      const q = parent(S, b);\n      if (q \u003c 0) return a - b;\n      pb = b;\n      b = q;\n    }\n  }\n  if (pa \u003c 0) return -1;\n  if (pb \u003c 0) return 1;\n  return pa - pb;\n}\n\nfunction sortOrder(S) {\n  const { order, slot } = S, n = S.n;\n  for (let i = 1; i \u003c n; i++) {\n    const v = order[i], id = slot[v];\n    let j = i - 1;\n    while (j >= 0 && cmp(S, slot[order[j]], id) > 0) {\n      order[j + 1] = order[j];\n      j--;\n    }\n    order[j + 1] = v;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.span = cl(k[0], 3, 9);\n  S.speed = cl(k[1], 0.2, 3);\n  const w = round(cl(k[2], 1, 4)), n = floor(W / w);\n  S.mu = 0.03 + 0.6 * cl(k[3], 0, 1);\n  if (!S.init) {\n    found(S);\n    for (let e = 0; e \u003c BURN * UNIT; e++) event(S);\n    // Run on until the traced tree is a typical one, its last merge between\n    // 0.8 and 1.3 times Kingman's mean 2(1 - 1/n) back, and turn the colours\n    // so that the common ancestor is azure.\n    const mean = 2 * (1 - 1 / n) * UNIT;\n    for (let tries = 0; tries \u003c 60; tries++) {\n      const a = mrca(S, n);\n      if (a >= 0 && S.tm > 0.8 * mean && S.tm \u003c 1.3 * mean) break;\n      for (let e = 0; e \u003c UNIT / 5; e++) event(S);\n    }\n    const a = mrca(S, n);\n    if (a >= 0) S.shift = 0.58 - S.hue[a & MASK];\n    S.init = true;\n  }\n  if (n !== S.n) {\n    S.n = n;\n    for (let i = 0; i \u003c n; i++) S.order[i] = i;\n  }\n  S.acc += d * S.speed * RATE * UNIT;\n  while (S.acc >= 1) {\n    event(S);\n    S.acc -= 1;\n  }\n  sortOrder(S);\n  // Each lineage's ancestor at each row's time. Rows sit on a grid of\n  // absolute times, so the picture climbs a whole row at a time.\n  const { anc, order, slot, born } = S, step = (S.span * UNIT) / (H - 1), K = floor(S.ev / step);\n  for (let i = 0; i \u003c n; i++) {\n    let a = slot[order[i]];\n    anc[i] = a;\n    for (let r = 1; r \u003c H; r++) {\n      const T = (K - r + 1) * step;\n      for (;;) {\n        if (born[a & MASK] \u003c= T) break;\n        const q = parent(S, a);\n        if (q \u003c 0) break;\n        a = q;\n      }\n      anc[r * W + i] = a;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { anc, hue, c } = S, n = S.n;\n  const col = new Int32Array(W);\n  for (let x = 0; x \u003c W; x++) col[x] = floor((x * n) / W);\n  let top = -1;\n  for (let r = 0; r \u003c H; r++) {\n    const row = r * W, y = H - 1 - r;\n    if (top \u003c 0 && anc[row] === anc[row + n - 1]) top = r;\n    const val = 1 - 0.12 * (r / (H - 1));\n    // Each block: a run of columns with one ancestor in this row. A dark\n    // seam takes its first column when it is two or more wide, and it is\n    // shaded round like a tube.\n    for (let x0 = 0; x0 \u003c W; ) {\n      const a = anc[row + col[x0]];\n      let x1 = x0 + 1;\n      while (x1 \u003c W && anc[row + col[x1]] === a) x1++;\n      const seam = x0 > 0 && x1 - x0 > 1 ? 1 : 0, l0 = x0 + seam, wd = x1 - l0;\n      hsv(hue[a & MASK] + S.shift, 0.68, val, c);\n      for (let x = x0; x \u003c x1; x++) {\n        if (x \u003c l0) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const sh = 0.66 + 0.34 * sin((PI * (x - l0 + 0.5)) / wd);\n        let R = c[0] * 255 * sh, G = c[1] * 255 * sh, B = c[2] * 255 * sh;\n        // A merge: two blocks of the row below meet here.\n        if (r > 0 && x > x0 && anc[row - W + col[x]] !== anc[row - W + col[x - 1]]) {\n          const g = r === top ? 0.95 : 0.7;\n          R += (255 - R) * g;\n          G += (255 - G) * g;\n          B += (255 - B) * g;\n        }\n        display.setPixel(x, y, round(R), round(G), round(B));\n      }\n      x0 = x1;\n    }\n  }\n}\n","layer":{"id":"layer-kingman-coalescent","type":"code","name":"kingman-coalescent","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kingman Coalescent\n// Family:  data\n// Idea:    A Moran population of 64 runs forward one birth at a time while the panel draws the family tree of the living as a flame chart, now along the bottom row and the past going up, each LED in the colour of the ancestor its column came from at that time, so the narrow blocks at the bottom merge fast into a few wide ones, the last two take about as long to meet as all the others together, and when one of them dies out the common ancestor jumps forward and the panel takes the survivor's colours.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kingman's coalescent (John Kingman, 1982), traced back through a Moran population (Patrick Moran, 1958)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Span=3..9, Speed=0.2..3, Width=1..4, Mutation=0..1\n//\n// Knob 1: Span. How far back the top row reaches, in units of Kingman time: N(N-1)/2 = 2016 Moran events, about 31 generations of the 64. At 3 a row is 48 events and the common ancestor of all 64 sits on average 1.97 units back, at row 83 of 128; at 6 at row 42; at 9 a row is 143 events, the tree crowds into the bottom 28 rows and above it the one line of ancestors shows its mutations as bands.\n// Knob 2: Speed. At 2 the population runs 0.06 units of Kingman time a second, 121 births, and the panel climbs 2.5 rows a second at Span 3; the common ancestor of all 64 moves forward on average every 17 seconds, by about 43 rows. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Width. LEDs for each traced individual. At 1 all 64 are traced, one column each, and a block gets its dark seam from two LEDs wide; at 2 the first 32 of the population's 64 places, at 3 the first 21, at 4 the first 16, each 4 LEDs with a seam. The common ancestor of a sample can also move back, when a newborn's line joins the sample's tree above it: at 4 it moves forward every 0.34 units of Kingman time and back every 0.5.\n// Knob 4: Mutation. The chance that a birth carries a mutation, which steps the child's hue 0.05 to 0.11 round the wheel either way. 0.03 at 0 and 0.066 at the start, about two along each line per unit of Kingman time, so the two families of the last split mostly differ in colour; at 1 0.63, nearly every row of every block steps and the blocks turn to stripes.\n\nconst W = 64, H = 128, N = 64;\n// One unit of Kingman time: N(N-1)/2 Moran events, in which a given pair of\n// lineages meets once on average going back.\nconst UNIT = (N * (N - 1)) / 2;\n// Every individual ever born gets an id, in order of birth; its parent, the\n// event it was born in and its hue sit in a ring of the last RING births.\nconst RING = 1 \u003c\u003c 16, MASK = RING - 1;\n// Kingman time run before the first frame, so the history covers the panel.\nconst BURN = 16;\n// Kingman time per second at Speed 1.\nconst RATE = 0.03;\nconst { floor, round, random, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, ev: 0, next: 0, acc: 0, n: 0, span: 3, speed: 2, mu: 0.05, shift: 0,\n    par: new Int32Array(RING), born: new Float64Array(RING), hue: new Float32Array(RING),\n    slot: new Int32Array(N), front: new Int32Array(N), tm: 0, order: new Int32Array(N), anc: new Int32Array(W * H),\n    c: [0, 0, 0],\n  };\n}\n\n// The founders: N individuals with no parent, born at event 0.\nfunction found(S) {\n  for (let i = 0; i \u003c N; i++) {\n    S.par[i] = -1;\n    S.born[i] = 0;\n    S.hue[i] = 0.58;\n    S.slot[i] = i;\n  }\n  S.next = N;\n  S.ev = 0;\n}\n\n// One Moran event: a parent picked at random has a child, which takes the\n// place of another individual picked at random, who dies.\nfunction event(S) {\n  const p = floor(random() * N);\n  let d = floor(random() * (N - 1));\n  if (d >= p) d++;\n  const id = S.next++, j = id & MASK, pa = S.slot[p];\n  S.ev++;\n  S.par[j] = pa;\n  S.born[j] = S.ev;\n  // A mutation, with chance mu: the hue steps a little either way.\n  let m = 0;\n  if (random() \u003c S.mu) m = (random() \u003c 0.5 ? -1 : 1) * (0.05 + 0.06 * random());\n  S.hue[j] = S.hue[pa & MASK] + m;\n  S.slot[d] = id;\n}\n\nconst parent = (S, a) => (a \u003c N || S.next - a > RING - 2 * N ? -1 : S.par[a & MASK]);\n\n// Going back from the first n slots, always stepping the youngest ancestor\n// to its parent, until one is left: returns that common ancestor and, in\n// S.tm, the Moran events back to the merge of the last two lineages.\nfunction mrca(S, n) {\n  const f = S.front;\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = S.slot[i];\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === a) dup = true;\n    if (!dup) f[k++] = a;\n  }\n  S.tm = 0;\n  while (k > 1) {\n    let m = 0;\n    for (let j = 1; j \u003c k; j++) if (f[j] > f[m]) m = j;\n    const a = f[m], q = parent(S, a);\n    if (q \u003c 0) return -1;\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === q) dup = true;\n    if (dup) {\n      f[m] = f[--k];\n      S.tm = S.ev - S.born[a & MASK] + 1;\n    } else f[m] = q;\n  }\n  return f[0];\n}\n\n// Order of two individuals in the flame chart: follow both lines back to\n// where they meet; the one that is that ancestor itself comes first,\n// otherwise the one whose line left it earlier. The order of two living\n// individuals never changes, so the chart only moves where they are born\n// and die.\nfunction cmp(S, a, b) {\n  let pa = -1, pb = -1;\n  while (a !== b) {\n    if (a > b) {\n      const q = parent(S, a);\n      if (q \u003c 0) return a - b;\n      pa = a;\n      a = q;\n    } else {\n      const q = parent(S, b);\n      if (q \u003c 0) return a - b;\n      pb = b;\n      b = q;\n    }\n  }\n  if (pa \u003c 0) return -1;\n  if (pb \u003c 0) return 1;\n  return pa - pb;\n}\n\nfunction sortOrder(S) {\n  const { order, slot } = S, n = S.n;\n  for (let i = 1; i \u003c n; i++) {\n    const v = order[i], id = slot[v];\n    let j = i - 1;\n    while (j >= 0 && cmp(S, slot[order[j]], id) > 0) {\n      order[j + 1] = order[j];\n      j--;\n    }\n    order[j + 1] = v;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.span = cl(k[0], 3, 9);\n  S.speed = cl(k[1], 0.2, 3);\n  const w = round(cl(k[2], 1, 4)), n = floor(W / w);\n  S.mu = 0.03 + 0.6 * cl(k[3], 0, 1);\n  if (!S.init) {\n    found(S);\n    for (let e = 0; e \u003c BURN * UNIT; e++) event(S);\n    // Run on until the traced tree is a typical one, its last merge between\n    // 0.8 and 1.3 times Kingman's mean 2(1 - 1/n) back, and turn the colours\n    // so that the common ancestor is azure.\n    const mean = 2 * (1 - 1 / n) * UNIT;\n    for (let tries = 0; tries \u003c 60; tries++) {\n      const a = mrca(S, n);\n      if (a >= 0 && S.tm > 0.8 * mean && S.tm \u003c 1.3 * mean) break;\n      for (let e = 0; e \u003c UNIT / 5; e++) event(S);\n    }\n    const a = mrca(S, n);\n    if (a >= 0) S.shift = 0.58 - S.hue[a & MASK];\n    S.init = true;\n  }\n  if (n !== S.n) {\n    S.n = n;\n    for (let i = 0; i \u003c n; i++) S.order[i] = i;\n  }\n  S.acc += d * S.speed * RATE * UNIT;\n  while (S.acc >= 1) {\n    event(S);\n    S.acc -= 1;\n  }\n  sortOrder(S);\n  // Each lineage's ancestor at each row's time. Rows sit on a grid of\n  // absolute times, so the picture climbs a whole row at a time.\n  const { anc, order, slot, born } = S, step = (S.span * UNIT) / (H - 1), K = floor(S.ev / step);\n  for (let i = 0; i \u003c n; i++) {\n    let a = slot[order[i]];\n    anc[i] = a;\n    for (let r = 1; r \u003c H; r++) {\n      const T = (K - r + 1) * step;\n      for (;;) {\n        if (born[a & MASK] \u003c= T) break;\n        const q = parent(S, a);\n        if (q \u003c 0) break;\n        a = q;\n      }\n      anc[r * W + i] = a;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { anc, hue, c } = S, n = S.n;\n  const col = new Int32Array(W);\n  for (let x = 0; x \u003c W; x++) col[x] = floor((x * n) / W);\n  let top = -1;\n  for (let r = 0; r \u003c H; r++) {\n    const row = r * W, y = H - 1 - r;\n    if (top \u003c 0 && anc[row] === anc[row + n - 1]) top = r;\n    const val = 1 - 0.12 * (r / (H - 1));\n    // Each block: a run of columns with one ancestor in this row. A dark\n    // seam takes its first column when it is two or more wide, and it is\n    // shaded round like a tube.\n    for (let x0 = 0; x0 \u003c W; ) {\n      const a = anc[row + col[x0]];\n      let x1 = x0 + 1;\n      while (x1 \u003c W && anc[row + col[x1]] === a) x1++;\n      const seam = x0 > 0 && x1 - x0 > 1 ? 1 : 0, l0 = x0 + seam, wd = x1 - l0;\n      hsv(hue[a & MASK] + S.shift, 0.68, val, c);\n      for (let x = x0; x \u003c x1; x++) {\n        if (x \u003c l0) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const sh = 0.66 + 0.34 * sin((PI * (x - l0 + 0.5)) / wd);\n        let R = c[0] * 255 * sh, G = c[1] * 255 * sh, B = c[2] * 255 * sh;\n        // A merge: two blocks of the row below meet here.\n        if (r > 0 && x > x0 && anc[row - W + col[x]] !== anc[row - W + col[x - 1]]) {\n          const g = r === top ? 0.95 : 0.7;\n          R += (255 - R) * g;\n          G += (255 - G) * g;\n          B += (255 - B) * g;\n        }\n        display.setPixel(x, y, round(R), round(G), round(B));\n      }\n      x0 = x1;\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Span=3..9, Speed=0.2..3, Width=1..4, Mutation=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Span","min":3,"max":9,"about":"How far back the top row reaches, in units of Kingman time: N(N-1)/2 = 2016 Moran events, about 31 generations of the 64. At 3 a row is 48 events and the common ancestor of all 64 sits on average 1.97 units back, at row 83 of 128; at 6 at row 42; at 9 a row is 143 events, the tree crowds into the bottom 28 rows and above it the one line of ancestors shows its mutations as bands."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the population runs 0.06 units of Kingman time a second, 121 births, and the panel climbs 2.5 rows a second at Span 3; the common ancestor of all 64 moves forward on average every 17 seconds, by about 43 rows. At 0.2 ten times slower, at 3 one and a half times faster."},{"name":"Width","min":1,"max":4,"about":"LEDs for each traced individual. At 1 all 64 are traced, one column each, and a block gets its dark seam from two LEDs wide; at 2 the first 32 of the population's 64 places, at 3 the first 21, at 4 the first 16, each 4 LEDs with a seam. The common ancestor of a sample can also move back, when a newborn's line joins the sample's tree above it: at 4 it moves forward every 0.34 units of Kingman time and back every 0.5."},{"name":"Mutation","min":0,"max":1,"about":"The chance that a birth carries a mutation, which steps the child's hue 0.05 to 0.11 round the wheel either way. 0.03 at 0 and 0.066 at the start, about two along each line per unit of Kingman time, so the two families of the last split mostly differ in colour; at 1 0.63, nearly every row of every block steps and the blocks turn to stripes."}],"start":[3,2,1,0.06],"measures":{"motion":1.2518,"detail":0.0417,"edges":0.3173,"complexity":1.0432,"coverage":0.967,"colour":0.4104,"drift":0.1027},"knobResponse":[0.1845,0.106,0.0643,0.2761]},{"slug":"kintsugi","title":"Kintsugi","family":"pottery","round":25,"note":"어두운 쪽빛 천 위의 청자 찻사발에 금이 가고, 조각들이 조금 벌어져 돌아요. 깨진 날에 붉은 옻과 금이 돈 다음 다시 붙어요. 위에 매달린 종이 등이 흔들리며 금빛 이음매에 반짝임을 지나가게 하고, K3 Mends 를 올릴수록 지나온 깨짐의 금빛 그물이 촘촘해져요. K1 을 누르면 사발이 바로 깨져요.","idea":"A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.","buttons":"K1 tap breaks the bowl now, while it stands whole.","code":"// ===== Patternflow pattern =====\n// Title:   Kintsugi\n// Family:  pottery\n// Idea:    A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after kintsugi, the Japanese mending of broken ware with urushi lacquer and powdered gold\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1\n//\n// Knob 1: Glaze. Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on.\n// Knob 2: Speed. At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower.\n// Knob 3: Mends. How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze.\n// Knob 4: Lamp. Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it.\n// Buttons: K1 tap breaks the bowl now, while it stands whole.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The bowl turned about x = CX, its foot on the cloth at FB, HT tall with a\n// rim RT across, seen a little from above: a circle r across shows E * r tall.\n// Its picture is kept in a band of rows from BY0, BH rows tall.\nconst CX = 32, FB = 104, HT = 40, E = 0.3, RT = 28, HORIZON = 84, BY0 = 52, BH = 58, NB = 64 * BH;\nconst R = (h) => (h \u003c 4 ? 11.5 : 13.6 + 14.4 * sin((min(1, (h - 4) / (HT - 4)) * PI) / 2) ** 0.75);\n\n// Each glaze and the colour it pools to, from celadon to raku black.\nconst GLAZE = [\n  [[112, 184, 150], [62, 134, 128]],\n  [[238, 230, 214], [238, 150, 96]],\n  [[240, 120, 44], [150, 60, 26]],\n  [[46, 42, 42], [92, 74, 62]],\n];\nconst CLAY = [206, 158, 116], BODY = [232, 212, 178], URUSHI = [184, 44, 30], GOLD = [255, 206, 86], OLDG = [236, 160, 64], GLINT = [255, 246, 216], SHEEN = [255, 238, 210];\nconst WALL = [92, 74, 56], WOOD = [104, 66, 40], CLOTH = [46, 62, 132];\n// Rest, crack, open, gild, close and shine, in seconds at Speed 2.\nconst DUR = [5, 0.45, 1.3, 2.4, 1.5, 1.2];\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, tau: 0, wd: 2.4, count: 0, mends: 2, glaze: 0, gs: 0, PX: 33, LX: 33, LY: 29, fade: 1, flare: 0,\n    mat: new Uint8Array(NB), nrm: F32(NB * 3), ao: F32(NB), mot: F32(NB), jit: F32(NB), sid: new Int32Array(NB), fid: new Int32Array(NB), off: new Uint8Array(16),\n    col: F32(NB * 3), f: F32(N * 3), bg: F32(N * 3), dust: [],\n  });\n  geometry(P);\n  // The breaks the bowl has already been through, oldest first.\n  for (let k = 0; k \u003c 8; k++) seams(P, crack(P, 4 + floor(rnd() * 3)), 1 + floor(rnd() * 3));\n  brk(P);\n  backdrop(P);\n  swing(P);\n}\n\n// Where each LED of the bowl's picture sits on it: outer wall, inside, lip or\n// foot, which way it faces, how much the bowl shades it, and the glaze's pooling.\nfunction geometry(P) {\n  const { mat, nrm, ao, mot, jit } = P;\n  for (let b = 0; b \u003c NB; b++) {\n    const x = b & 63, y = (b >> 6) + BY0, px = x + 0.5 - CX, h0 = FB - y - 0.5;\n    let h = h0, r = 0, u = 9, c = 0, n = null, m = 0, a = 1;\n    for (let it = 0; it \u003c 4; it++) {\n      r = R(h);\n      u = px / r;\n      c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n      h = h0 + E * r * c;\n    }\n    r = R(h);\n    u = px / r;\n    if (h >= 0 && h \u003c= HT && u * u \u003c 1) {\n      c = sqrt(1 - u * u);\n      const dR = (R(h + 0.6) - R(h - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = h \u003c 4 ? 4 : h > HT - 1.1 ? 3 : 1;\n      n = m === 3 ? [u * 0.5, 0.8, 0.35] : [u * nl, -dR * nl, c * nl];\n      a = m === 4 ? 0.8 : 1;\n    } else {\n      const ex = px / RT, ey = (y + 0.5 - (FB - HT)) / (E * RT), e2 = ex * ex + ey * ey;\n      if (e2 >= 1) continue;\n      // Inside: the far wall seen over the rim, darker the deeper it goes.\n      let hb = HT;\n      for (let it = 0; it \u003c 4; it++) {\n        r = R(hb);\n        u = cl(px / r, -1, 1);\n        c = sqrt(1 - u * u);\n        hb = cl(h0 - E * r * c, 4, HT);\n      }\n      const dR = (R(hb + 0.6) - R(hb - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = e2 > 0.84 && ey \u003c 0.2 ? 3 : 2;\n      n = m === 3 ? [ex * 0.5, 0.8, 0.35] : [-u * nl, dR * nl, c * nl];\n      a = m === 3 ? 1 : (0.3 + 0.7 * ((hb - 4) / (HT - 4)) ** 0.6) * (1 - 0.35 * sm(0.2, 0.95, ey));\n    }\n    mat[b] = m;\n    nrm.set(n, b * 3);\n    ao[b] = a;\n    mot[b] = sm(0.3, 0.85, 0.75 * vn(x / 4.5, y / 3.5) + 0.25 * hash(x, y + 999)) * (m === 2 ? 1 : 0.8);\n    jit[b] = (hash(x + 77, y) - 0.5) * 0.6;\n  }\n}\n\n// A break: the bowl's picture split into n shards with ragged edges, taller\n// than wide, like cracks that run down from the rim.\nfunction crack(P, n) {\n  const S = [], reg = new Uint8Array(NB), ox = rnd() * 400, oy = rnd() * 400;\n  while (S.length \u003c n) {\n    const b = floor(rnd() * NB);\n    if (P.mat[b]) S.push([(b & 63) + 0.5, (b >> 6) + 0.5]);\n  }\n  for (let b = 0; b \u003c NB; b++) {\n    if (!P.mat[b]) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + 0.5;\n    const wx = x + 5 * (vn(x / 7 + ox, y / 7 + oy) - 0.5) + 1.6 * (vn(x / 2 + oy, y / 2) - 0.5);\n    const wy = y + 5 * (vn(x / 7 + oy, y / 7 + ox + 50) - 0.5) + 1.6 * (vn(x / 2, y / 2 + ox) - 0.5);\n    let best = 1e9;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = wx - S[i][0], dy = (wy - S[i][1]) * 0.75, dd = dx * dx + dy * dy;\n      if (dd \u003c best) (best = dd), (reg[b] = i + 1);\n    }\n  }\n  // Most breaks also knock a chip out of the rim, and the gold fills it.\n  if (rnd() \u003c 0.8) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 3);\n    const r = 2.4 + rnd() * 1.8, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) if (reg[b] && ((b & 63) - cx) ** 2 + ((b >> 6) - cy) ** 2 \u003c r * r) reg[b] = 255;\n  }\n  // Some lose a shard for good, and a piece of another bowl is set in its\n  // place (yobitsugi).\n  if (rnd() \u003c 0.55) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 1 && P.mat[c] !== 2);\n    const r = 4.5 + rnd() * 2.5, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) {\n      const x = b & 63, y = b >> 6, dx = x - cx, dy = (y - cy) * 1.25;\n      if (reg[b] && reg[b] \u003c 255 && dx * dx + dy * dy \u003c (r * (0.75 + 0.5 * vn(x / 3 + ox, y / 3))) ** 2) reg[b] = 254;\n    }\n  }\n  return reg;\n}\n// One side of a crack (for the seam it leaves) or both (for the edges it opens).\nfunction edge(reg, b, both) {\n  const r = reg[b], x = b & 63;\n  if (!r) return false;\n  for (const nb of [x \u003c 63 ? b + 1 : -1, x > 0 ? b - 1 : -1, b + 64 \u003c NB ? b + 64 : -1, b - 64]) {\n    if (nb \u003c 0 || !reg[nb] || reg[nb] === r) continue;\n    if (both || reg[nb] > r) return true;\n  }\n  return false;\n}\n// A closed break becomes the newest seam, with its gold chip and the piece\n// from another bowl, glazed off glazes along.\nfunction seams(P, reg, off) {\n  const id = ++P.count;\n  P.off[id & 15] = off;\n  for (let b = 0; b \u003c NB; b++) {\n    if (reg[b] === 254) P.fid[b] = id;\n    if (reg[b] === 255 || edge(reg, b, 0)) P.sid[b] = id;\n  }\n}\n\n// The next break: its shards, which way each one drifts and turns, the\n// crack's run from where it is struck, and the order the gold goes round.\nfunction brk(P) {\n  const n = 4 + floor(rnd() * 3), reg = crack(P, n), S = [];\n  for (let i = 0; i \u003c n; i++) S.push({ cx: 0, cy: 0, c: 0, rad: 0, e: [] });\n  for (let b = 0; b \u003c NB; b++)\n    if (reg[b] && reg[b] \u003c 254) {\n      const s = S[reg[b] - 1];\n      (s.cx += (b & 63) + 0.5), (s.cy += (b >> 6) + BY0 + 0.5), s.c++;\n    }\n  for (const s of S) {\n    if (!s.c) continue;\n    (s.cx /= s.c), (s.cy /= s.c);\n    const dx = s.cx - CX, sg = dx \u003c 0 ? -1 : 1;\n    Object.assign(s, { tx: dx * 0.28 + sg * (1.5 + rnd() * 1.5), ty: (s.cy - 80) * 0.16 + 1 + rnd(), rot: (rnd() - 0.5) * 0.5, p: rnd() * TAU, o: rnd() });\n  }\n  const cb = new Uint8Array(NB), ce = new Uint8Array(NB), ga = F32(NB), cd = F32(NB);\n  let ib;\n  do ib = floor(rnd() * NB);\n  while (P.mat[ib] !== 1);\n  let md = 1;\n  for (let b = 0; b \u003c NB; b++) {\n    if (!reg[b] || reg[b] > 253) continue;\n    const s = S[reg[b] - 1], x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5;\n    const dx = s.cx - x, dy = s.cy - y;\n    s.rad = max(s.rad, sqrt(dx * dx + dy * dy) + 1.5);\n    if (edge(reg, b, 1)) (ce[b] = 1), s.e.push(b), (ga[b] = (atan2(dy, dx) / TAU + 0.5 + s.o) % 1);\n    if (edge(reg, b, 0)) (cb[b] = 1), (md = max(md, (cd[b] = sqrt((x - (ib & 63)) ** 2 + (y - (ib >> 6) - BY0) ** 2))));\n  }\n  for (let b = 0; b \u003c NB; b++) cd[b] /= md;\n  Object.assign(P, { reg, S, cb, ce, ga, cd, noff: 1 + floor(rnd() * 3), ix: (ib & 63) + 0.5, iy: (ib >> 6) + BY0 + 0.5 });\n}\n\n// The plaster wall with straw in it, the beam the lantern hangs from, and the\n// folded indigo cloth, before the lantern lights them.\nfunction backdrop(P) {\n  const B = P.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, q = hash(x, y);\n      let col, f;\n      if (y \u003c 3) (col = WOOD), (f = (y === 2 ? 0.55 : 0.9) * (0.85 + 0.15 * vn(x / 6, y)));\n      else if (y \u003c HORIZON) (col = WALL), (f = (0.86 + 0.2 * vn(x / 4, y / 4) + 0.04 * q) * (q > 0.985 ? 1.3 : 1));\n      else {\n        // Folds that run across the cloth and ease towards the front.\n        const v = 0.5 + 0.5 * sin(x * 0.11 - y * 0.17 + 2.2 * sin(y * 0.05 + x * 0.04)) * sin(x * 0.07 + y * 0.05 + 1);\n        (col = CLOTH), (f = (0.6 + 0.5 * v ** 1.4) * (0.94 + 0.06 * ((x + y) & 1)) * (y === HORIZON ? 1.35 : 1));\n      }\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f;\n    }\n}\n\nfunction swing(P) {\n  const w = (TAU / 6.5) * P.tau, a = 0.42 * sin(w) + 0.07 * sin(2.3 * w + 1);\n  P.LX = P.PX + 26 * sin(a);\n  P.LY = 3 + 26 * cos(a);\n}\n\nfunction go(P, ph) {\n  if (ph === 5) seams(P, P.reg, P.noff), brk(P);\n  if (ph === 0) P.wd = DUR[0];\n  P.ph = ph;\n  P.pt = 0;\n}\n\n// Where a shard is now: turned by th about its middle and moved by tx, ty.\nfunction place(P, s) {\n  const ph = P.ph, p = P.pt / DUR[ph], e = ph === 2 ? 1 - (1 - p) ** 3 : ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1, p) : 0;\n  const th = (s.rot + 0.05 * sin(P.tau * 1.1 + s.p)) * e;\n  return [cos(th), sin(th), s.cx + (s.tx + 0.8 * sin(P.tau * 1.7 + s.p)) * e, s.cy + (s.ty + 0.6 * cos(P.tau * 1.3 + s.p)) * e];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.glaze = cl(k[0], 0, 1);\n  P.mends = round(cl(k[2], 2, 8));\n  P.PX = 32 + 14 * cl(k[3], -1, 1);\n  P.tau += d;\n  if (input.btnPressed && input.btnPressed[0] && (P.ph === 0 || P.ph === 5)) go(P, 1);\n  if ((P.pt += d) >= (P.ph ? DUR[P.ph] : P.wd)) go(P, (P.ph + 1) % 6);\n  const p = P.pt / DUR[P.ph];\n  P.fade = P.ph === 3 ? 1 - sm(0.2, 1, p) : P.ph === 4 ? 0 : 1;\n  P.flare = P.ph === 5 ? 1 - p : 0;\n  swing(P);\n\n  // Gold powder dusted on the lacquer falls past the shards to the cloth.\n  if (P.ph === 3 && p > 0.3 && rnd() \u003c d * 16) {\n    const s = P.S[floor(rnd() * P.S.length)];\n    if (s.e.length) {\n      const b = s.e[floor(rnd() * s.e.length)], [co, si, tx, ty] = place(P, s), qx = (b & 63) + 0.5 - s.cx, qy = (b >> 6) + BY0 + 0.5 - s.cy;\n      P.dust.push([co * qx - si * qy + tx, si * qx + co * qy + ty, 0, FB + 5 + rnd() * 19, 1, rnd() * TAU]);\n    }\n  }\n  P.dust = P.dust.filter((q) => {\n    if (q[1] \u003c q[3]) (q[2] += 40 * d), (q[1] = min(q[3], q[1] + q[2] * d));\n    else q[4] -= d / 10;\n    return q[4] > 0;\n  });\n  if (P.dust.length > 90) P.dust.shift();\n}\n\n// The bowl's colours for this moment: glaze lit by the lantern, the seams of\n// the mends it carries, and the crack, the bare clay, the lacquer and the\n// gold of the break under way.\nfunction shade(P) {\n  // The bowl's glaze and the three others, round the ring of four.\n  const G = [0, 1, 2, 3].map((k) => {\n    const g = P.glaze * 3 + k, i = floor(g) % 4, f = g - floor(g);\n    return [0, 1].map((j) => GLAZE[i][j].map((v, n) => mix(v, GLAZE[(i + 1) % 4][j][n], f)));\n  });\n  const { mat, nrm, ao, mot, jit, sid, fid, col, LX, LY, ph, count, fade, flare } = P, lo = count - P.mends, p = P.pt / (ph ? DUR[ph] : P.wd);\n  const lac = ph === 3 ? sm(0, 0.5, p) * 1.05 : ph === 4 ? 2 : 0, gil = ph === 3 ? sm(0.3, 1, p) * 1.05 : ph === 4 ? 2 : 0, open = ph >= 2 && ph \u003c= 4;\n  const vis = (id) => (id > lo ? (id === lo + 1 ? fade : 1) : 0);\n  let gs = 0, r = 0, gg = 0, bb = 0, kg = 0, gl = 0;\n  const gold = (a, age, fl) => {\n    const t = min(1, age / 8);\n    gs += a * fl * (kg + gl);\n    r = mix(r, (mix(GOLD[0], OLDG[0], t) * kg + GLINT[0] * gl) * fl, a);\n    gg = mix(gg, (mix(GOLD[1], OLDG[1], t) * kg + GLINT[1] * gl) * fl, a);\n    bb = mix(bb, (mix(GOLD[2], OLDG[2], t) * kg + GLINT[2] * gl) * fl, a);\n  };\n  const flat = (c, k) => ((r = c[0] * k), (gg = c[1] * k), (bb = c[2] * k));\n  for (let b = 0; b \u003c NB; b++) {\n    const m = mat[b];\n    if (!m) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5, o = b * 3, nx = nrm[o], ny = nrm[o + 1], nz = nrm[o + 2];\n    let lx = LX - x, ly = y - LY, lz = 24;\n    const dd = lx * lx + ly * ly + lz * lz, il = 1 / sqrt(dd), fall = 0.55 + 0.6 * exp(-dd / 5000);\n    (lx *= il), (ly *= il), (lz *= il);\n    const hz = lz + 1, hl = 1 / sqrt(lx * lx + ly * ly + hz * hz), dif = max(0, nx * lx + ny * ly + nz * lz) * fall;\n    kg = 0.62 + 0.55 * dif;\n    gl = min(1.1, 1.7 * fall * max(0, ((nx + jit[b]) * lx + ny * ly + nz * hz) * hl) ** 30);\n    if (m === 4) flat(CLAY, (0.16 + 0.8 * dif) * ao[b]);\n    else {\n      // Glaze, or the piece of another bowl set into it.\n      const t = mot[b], fi = fid[b], nw = ph === 4 && P.reg[b] === 254, gk = nw ? P.noff : fi > lo ? P.off[fi & 15] : 0, ga = !nw && fi === lo + 1 ? fade : 1;\n      const k = (0.2 + 0.3 * max(0, -ny) + 0.95 * dif) * ao[b] * (m === 3 ? 1.15 : 1), sh = 0.6 * fall * max(0, (nx * lx + ny * ly + nz * hz) * hl) ** 24;\n      const A = G[0], B = G[gk];\n      r = mix(mix(A[0][0], A[1][0], t), mix(B[0][0], B[1][0], t), ga) * k + SHEEN[0] * sh;\n      gg = mix(mix(A[0][1], A[1][1], t), mix(B[0][1], B[1][1], t), ga) * k + SHEEN[1] * sh;\n      bb = mix(mix(A[0][2], A[1][2], t), mix(B[0][2], B[1][2], t), ga) * k + SHEEN[2] * sh;\n    }\n    const id = sid[b], a = vis(id);\n    if (open && P.ce[b]) {\n      // An opened edge: bare clay, then red lacquer, then gold.\n      const q = P.ga[b];\n      if (q \u003c gil) gold(1, 0, 1.15);\n      else if (q \u003c lac) flat(URUSHI, 0.5 + 0.6 * dif);\n      else flat(BODY, 0.45 + 0.7 * dif);\n    } else if (a > 0) gold(a, count - id, id === count ? 1 + 0.6 * flare : 1);\n    else if (flare > 0) {\n      // Fresh gold glows a little past the line it fills.\n      for (let j = 0; j \u003c 4; j++) {\n        const nb = b + (j === 0 ? 1 : j === 1 ? -1 : j === 2 ? 64 : -64);\n        if (nb >= 0 && nb \u003c NB && sid[nb] === count) {\n          gold(0.6 * flare, 0, 1);\n          break;\n        }\n      }\n    }\n    if (ph === 1 && P.cb[b] && P.cd[b] \u003c p * 1.6) (r *= 0.12), (gg *= 0.12), (bb *= 0.12);\n    (col[o] = r), (col[o + 1] = gg), (col[o + 2] = bb);\n  }\n  P.gs = gs;\n}\n\n// The wall and cloth lit by the lantern, the bowl's shadow thrown away from\n// it, and the warm light its gold throws down on the cloth.\nfunction back(P, F) {\n  const { LX, LY, bg } = P, sx = CX - (LX - CX) * 0.45, gx = CX + (LX - CX) * 0.3, gk = min(1.6, P.gs / 700);\n  // The glows fall off as a column term times a row term.\n  const X = [], Y = [];\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - LX) ** 2;\n    X.push([exp(-dx / 380), exp(-dx / 1400), exp(-dx / 1500), gk * exp(-((x + 0.5 - gx) ** 2) / 600)]);\n  }\n  for (let y = 0; y \u003c H; y++) Y.push([1.2 * exp(-((y + 0.5 - LY) ** 2) / 380), 0.3 * exp(-((y - LY) ** 2) / 4000), 0.9 * exp(-((y - 118) ** 2) / 700), exp(-((y - 111) ** 2) / 160)]);\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const [a, b, c, d] = Y[y], ey = (y + 0.5 - FB - 3) / 7;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const C = X[x];\n      if (y \u003c HORIZON) {\n        const k = 0.3 + a * C[0] + b * C[1];\n        (F[o] = bg[o] * k), (F[o + 1] = bg[o + 1] * k), (F[o + 2] = bg[o + 2] * k);\n        continue;\n      }\n      const ex = (x + 0.5 - sx) / 31, g = d * C[3] * (bg[o + 2] / CLOTH[2]);\n      let k = 0.42 + c * C[2];\n      if (ey * ey \u003c 1.4 && ex * ex \u003c 1.4) k *= 1 - 0.72 * sm(1.15, 0.55, sqrt(ex * ex + ey * ey));\n      k *= 1 + 0.7 * g;\n      (F[o] = bg[o] * k + 96 * g), (F[o + 1] = bg[o + 1] * k + 74 * g), (F[o + 2] = bg[o + 2] * k + 16 * g);\n    }\n  }\n}\n\nconst put = (F, x, y, c, k) => {\n  if ((x = floor(x)) >= 0 && x \u003c W && (y = floor(y)) >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// The paper lantern on its cord: ribs across the lit paper, black lacquer caps.\nfunction lantern(P, F) {\n  const { LX, LY, PX } = P;\n  for (let t = 0; t \u003c 1; t += 0.04) put(F, mix(PX, LX, t), mix(3, LY - 10, t), [70, 58, 46], 1);\n  for (let yy = -10; yy \u003c= 10; yy++) {\n    const y = round(LY) + yy, cap = yy \u003c= -9 || yy >= 9, w = cap ? 3.6 : 6.3 * sqrt(max(0, 1 - (yy / 9.6) ** 2)) + 0.4;\n    for (let x = floor(LX - w); x \u003c= LX + w; x++) {\n      const dx = x + 0.5 - LX, cov = cl(w - Math.abs(dx) + 0.5, 0, 1);\n      if (y \u003c 0 || x \u003c 0 || x >= W || !cov) continue;\n      const o = (y * W + x) * 3, q = dx / w, gl = 1 - q * q, rib = (yy + 9) % 3 ? 1 : 0.7;\n      for (let n = 0; n \u003c 3; n++) {\n        const c = cap ? [38, 30, 26][n] * (1.2 - 0.4 * q) : mix([236, 118, 44][n], [255, 226, 160][n], gl * (1 - (yy / 10) ** 2)) * rib;\n        F[o + n] = mix(F[o + n], c, cov);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.mat) return;\n  const F = P.f, { col, mat, ph } = P;\n  shade(P);\n  back(P, F);\n  lantern(P, F);\n  if (ph >= 2 && ph \u003c= 4) {\n    // Each shard drawn where it has drifted, read back through its turn.\n    for (let i = 0; i \u003c P.S.length; i++) {\n      const s = P.S[i];\n      if (!s.c) continue;\n      const [co, si, tx, ty] = place(P, s);\n      for (let y = max(0, floor(ty - s.rad)); y \u003c= min(H - 1, ty + s.rad); y++)\n        for (let x = max(0, floor(tx - s.rad)); x \u003c= min(W - 1, tx + s.rad); x++) {\n          const dx = x + 0.5 - tx, dy = y + 0.5 - ty, bx = floor(co * dx + si * dy + s.cx), by = floor(-si * dx + co * dy + s.cy) - BY0;\n          if (bx \u003c 0 || bx > 63 || by \u003c 0 || by >= BH) continue;\n          const b = by * 64 + bx, o = (y * W + x) * 3;\n          if (P.reg[b] === i + 1) (F[o] = col[b * 3]), (F[o + 1] = col[b * 3 + 1]), (F[o + 2] = col[b * 3 + 2]);\n        }\n    }\n    // The lost chip comes back as gold, and the lost shard as a piece of\n    // another bowl, as the shards close.\n    const a = ph === 4 ? sm(0.4, 1, P.pt / DUR[4]) : 0;\n    if (a) for (let b = 0, o = BY0 * W * 3; b \u003c NB; b++, o += 3) if (P.reg[b] > 253) for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], col[b * 3 + n], a);\n  } else for (let b = 0; b \u003c NB; b++) if (mat[b]) F.set(col.subarray(b * 3, b * 3 + 3), (BY0 * W + b) * 3);\n  // The ring of the strike.\n  if (ph === 1) {\n    const p = P.pt / DUR[1];\n    for (let y = -7; y \u003c= 7; y++)\n      for (let x = -7; x \u003c= 7; x++) {\n        const k = (1 - p) * exp(-(x * x + y * y) / (2 + 10 * p)), xx = floor(P.ix + x), yy = floor(P.iy + y);\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let n = 0, o = (yy * W + xx) * 3; n \u003c 3; n++) F[o + n] += 255 * k;\n      }\n  }\n  for (const q of P.dust) {\n    const x = floor(q[0]), y = floor(q[1]), k = q[1] \u003c q[3] ? 0.9 : q[4] * (0.25 + 0.75 * max(0, sin(q[5] + P.tau * 4)) ** 3);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = mix(F[o + n], GOLD[n], k);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-kintsugi","type":"code","name":"kintsugi","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kintsugi\n// Family:  pottery\n// Idea:    A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after kintsugi, the Japanese mending of broken ware with urushi lacquer and powdered gold\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1\n//\n// Knob 1: Glaze. Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on.\n// Knob 2: Speed. At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower.\n// Knob 3: Mends. How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze.\n// Knob 4: Lamp. Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it.\n// Buttons: K1 tap breaks the bowl now, while it stands whole.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The bowl turned about x = CX, its foot on the cloth at FB, HT tall with a\n// rim RT across, seen a little from above: a circle r across shows E * r tall.\n// Its picture is kept in a band of rows from BY0, BH rows tall.\nconst CX = 32, FB = 104, HT = 40, E = 0.3, RT = 28, HORIZON = 84, BY0 = 52, BH = 58, NB = 64 * BH;\nconst R = (h) => (h \u003c 4 ? 11.5 : 13.6 + 14.4 * sin((min(1, (h - 4) / (HT - 4)) * PI) / 2) ** 0.75);\n\n// Each glaze and the colour it pools to, from celadon to raku black.\nconst GLAZE = [\n  [[112, 184, 150], [62, 134, 128]],\n  [[238, 230, 214], [238, 150, 96]],\n  [[240, 120, 44], [150, 60, 26]],\n  [[46, 42, 42], [92, 74, 62]],\n];\nconst CLAY = [206, 158, 116], BODY = [232, 212, 178], URUSHI = [184, 44, 30], GOLD = [255, 206, 86], OLDG = [236, 160, 64], GLINT = [255, 246, 216], SHEEN = [255, 238, 210];\nconst WALL = [92, 74, 56], WOOD = [104, 66, 40], CLOTH = [46, 62, 132];\n// Rest, crack, open, gild, close and shine, in seconds at Speed 2.\nconst DUR = [5, 0.45, 1.3, 2.4, 1.5, 1.2];\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, tau: 0, wd: 2.4, count: 0, mends: 2, glaze: 0, gs: 0, PX: 33, LX: 33, LY: 29, fade: 1, flare: 0,\n    mat: new Uint8Array(NB), nrm: F32(NB * 3), ao: F32(NB), mot: F32(NB), jit: F32(NB), sid: new Int32Array(NB), fid: new Int32Array(NB), off: new Uint8Array(16),\n    col: F32(NB * 3), f: F32(N * 3), bg: F32(N * 3), dust: [],\n  });\n  geometry(P);\n  // The breaks the bowl has already been through, oldest first.\n  for (let k = 0; k \u003c 8; k++) seams(P, crack(P, 4 + floor(rnd() * 3)), 1 + floor(rnd() * 3));\n  brk(P);\n  backdrop(P);\n  swing(P);\n}\n\n// Where each LED of the bowl's picture sits on it: outer wall, inside, lip or\n// foot, which way it faces, how much the bowl shades it, and the glaze's pooling.\nfunction geometry(P) {\n  const { mat, nrm, ao, mot, jit } = P;\n  for (let b = 0; b \u003c NB; b++) {\n    const x = b & 63, y = (b >> 6) + BY0, px = x + 0.5 - CX, h0 = FB - y - 0.5;\n    let h = h0, r = 0, u = 9, c = 0, n = null, m = 0, a = 1;\n    for (let it = 0; it \u003c 4; it++) {\n      r = R(h);\n      u = px / r;\n      c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n      h = h0 + E * r * c;\n    }\n    r = R(h);\n    u = px / r;\n    if (h >= 0 && h \u003c= HT && u * u \u003c 1) {\n      c = sqrt(1 - u * u);\n      const dR = (R(h + 0.6) - R(h - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = h \u003c 4 ? 4 : h > HT - 1.1 ? 3 : 1;\n      n = m === 3 ? [u * 0.5, 0.8, 0.35] : [u * nl, -dR * nl, c * nl];\n      a = m === 4 ? 0.8 : 1;\n    } else {\n      const ex = px / RT, ey = (y + 0.5 - (FB - HT)) / (E * RT), e2 = ex * ex + ey * ey;\n      if (e2 >= 1) continue;\n      // Inside: the far wall seen over the rim, darker the deeper it goes.\n      let hb = HT;\n      for (let it = 0; it \u003c 4; it++) {\n        r = R(hb);\n        u = cl(px / r, -1, 1);\n        c = sqrt(1 - u * u);\n        hb = cl(h0 - E * r * c, 4, HT);\n      }\n      const dR = (R(hb + 0.6) - R(hb - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = e2 > 0.84 && ey \u003c 0.2 ? 3 : 2;\n      n = m === 3 ? [ex * 0.5, 0.8, 0.35] : [-u * nl, dR * nl, c * nl];\n      a = m === 3 ? 1 : (0.3 + 0.7 * ((hb - 4) / (HT - 4)) ** 0.6) * (1 - 0.35 * sm(0.2, 0.95, ey));\n    }\n    mat[b] = m;\n    nrm.set(n, b * 3);\n    ao[b] = a;\n    mot[b] = sm(0.3, 0.85, 0.75 * vn(x / 4.5, y / 3.5) + 0.25 * hash(x, y + 999)) * (m === 2 ? 1 : 0.8);\n    jit[b] = (hash(x + 77, y) - 0.5) * 0.6;\n  }\n}\n\n// A break: the bowl's picture split into n shards with ragged edges, taller\n// than wide, like cracks that run down from the rim.\nfunction crack(P, n) {\n  const S = [], reg = new Uint8Array(NB), ox = rnd() * 400, oy = rnd() * 400;\n  while (S.length \u003c n) {\n    const b = floor(rnd() * NB);\n    if (P.mat[b]) S.push([(b & 63) + 0.5, (b >> 6) + 0.5]);\n  }\n  for (let b = 0; b \u003c NB; b++) {\n    if (!P.mat[b]) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + 0.5;\n    const wx = x + 5 * (vn(x / 7 + ox, y / 7 + oy) - 0.5) + 1.6 * (vn(x / 2 + oy, y / 2) - 0.5);\n    const wy = y + 5 * (vn(x / 7 + oy, y / 7 + ox + 50) - 0.5) + 1.6 * (vn(x / 2, y / 2 + ox) - 0.5);\n    let best = 1e9;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = wx - S[i][0], dy = (wy - S[i][1]) * 0.75, dd = dx * dx + dy * dy;\n      if (dd \u003c best) (best = dd), (reg[b] = i + 1);\n    }\n  }\n  // Most breaks also knock a chip out of the rim, and the gold fills it.\n  if (rnd() \u003c 0.8) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 3);\n    const r = 2.4 + rnd() * 1.8, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) if (reg[b] && ((b & 63) - cx) ** 2 + ((b >> 6) - cy) ** 2 \u003c r * r) reg[b] = 255;\n  }\n  // Some lose a shard for good, and a piece of another bowl is set in its\n  // place (yobitsugi).\n  if (rnd() \u003c 0.55) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 1 && P.mat[c] !== 2);\n    const r = 4.5 + rnd() * 2.5, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) {\n      const x = b & 63, y = b >> 6, dx = x - cx, dy = (y - cy) * 1.25;\n      if (reg[b] && reg[b] \u003c 255 && dx * dx + dy * dy \u003c (r * (0.75 + 0.5 * vn(x / 3 + ox, y / 3))) ** 2) reg[b] = 254;\n    }\n  }\n  return reg;\n}\n// One side of a crack (for the seam it leaves) or both (for the edges it opens).\nfunction edge(reg, b, both) {\n  const r = reg[b], x = b & 63;\n  if (!r) return false;\n  for (const nb of [x \u003c 63 ? b + 1 : -1, x > 0 ? b - 1 : -1, b + 64 \u003c NB ? b + 64 : -1, b - 64]) {\n    if (nb \u003c 0 || !reg[nb] || reg[nb] === r) continue;\n    if (both || reg[nb] > r) return true;\n  }\n  return false;\n}\n// A closed break becomes the newest seam, with its gold chip and the piece\n// from another bowl, glazed off glazes along.\nfunction seams(P, reg, off) {\n  const id = ++P.count;\n  P.off[id & 15] = off;\n  for (let b = 0; b \u003c NB; b++) {\n    if (reg[b] === 254) P.fid[b] = id;\n    if (reg[b] === 255 || edge(reg, b, 0)) P.sid[b] = id;\n  }\n}\n\n// The next break: its shards, which way each one drifts and turns, the\n// crack's run from where it is struck, and the order the gold goes round.\nfunction brk(P) {\n  const n = 4 + floor(rnd() * 3), reg = crack(P, n), S = [];\n  for (let i = 0; i \u003c n; i++) S.push({ cx: 0, cy: 0, c: 0, rad: 0, e: [] });\n  for (let b = 0; b \u003c NB; b++)\n    if (reg[b] && reg[b] \u003c 254) {\n      const s = S[reg[b] - 1];\n      (s.cx += (b & 63) + 0.5), (s.cy += (b >> 6) + BY0 + 0.5), s.c++;\n    }\n  for (const s of S) {\n    if (!s.c) continue;\n    (s.cx /= s.c), (s.cy /= s.c);\n    const dx = s.cx - CX, sg = dx \u003c 0 ? -1 : 1;\n    Object.assign(s, { tx: dx * 0.28 + sg * (1.5 + rnd() * 1.5), ty: (s.cy - 80) * 0.16 + 1 + rnd(), rot: (rnd() - 0.5) * 0.5, p: rnd() * TAU, o: rnd() });\n  }\n  const cb = new Uint8Array(NB), ce = new Uint8Array(NB), ga = F32(NB), cd = F32(NB);\n  let ib;\n  do ib = floor(rnd() * NB);\n  while (P.mat[ib] !== 1);\n  let md = 1;\n  for (let b = 0; b \u003c NB; b++) {\n    if (!reg[b] || reg[b] > 253) continue;\n    const s = S[reg[b] - 1], x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5;\n    const dx = s.cx - x, dy = s.cy - y;\n    s.rad = max(s.rad, sqrt(dx * dx + dy * dy) + 1.5);\n    if (edge(reg, b, 1)) (ce[b] = 1), s.e.push(b), (ga[b] = (atan2(dy, dx) / TAU + 0.5 + s.o) % 1);\n    if (edge(reg, b, 0)) (cb[b] = 1), (md = max(md, (cd[b] = sqrt((x - (ib & 63)) ** 2 + (y - (ib >> 6) - BY0) ** 2))));\n  }\n  for (let b = 0; b \u003c NB; b++) cd[b] /= md;\n  Object.assign(P, { reg, S, cb, ce, ga, cd, noff: 1 + floor(rnd() * 3), ix: (ib & 63) + 0.5, iy: (ib >> 6) + BY0 + 0.5 });\n}\n\n// The plaster wall with straw in it, the beam the lantern hangs from, and the\n// folded indigo cloth, before the lantern lights them.\nfunction backdrop(P) {\n  const B = P.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, q = hash(x, y);\n      let col, f;\n      if (y \u003c 3) (col = WOOD), (f = (y === 2 ? 0.55 : 0.9) * (0.85 + 0.15 * vn(x / 6, y)));\n      else if (y \u003c HORIZON) (col = WALL), (f = (0.86 + 0.2 * vn(x / 4, y / 4) + 0.04 * q) * (q > 0.985 ? 1.3 : 1));\n      else {\n        // Folds that run across the cloth and ease towards the front.\n        const v = 0.5 + 0.5 * sin(x * 0.11 - y * 0.17 + 2.2 * sin(y * 0.05 + x * 0.04)) * sin(x * 0.07 + y * 0.05 + 1);\n        (col = CLOTH), (f = (0.6 + 0.5 * v ** 1.4) * (0.94 + 0.06 * ((x + y) & 1)) * (y === HORIZON ? 1.35 : 1));\n      }\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f;\n    }\n}\n\nfunction swing(P) {\n  const w = (TAU / 6.5) * P.tau, a = 0.42 * sin(w) + 0.07 * sin(2.3 * w + 1);\n  P.LX = P.PX + 26 * sin(a);\n  P.LY = 3 + 26 * cos(a);\n}\n\nfunction go(P, ph) {\n  if (ph === 5) seams(P, P.reg, P.noff), brk(P);\n  if (ph === 0) P.wd = DUR[0];\n  P.ph = ph;\n  P.pt = 0;\n}\n\n// Where a shard is now: turned by th about its middle and moved by tx, ty.\nfunction place(P, s) {\n  const ph = P.ph, p = P.pt / DUR[ph], e = ph === 2 ? 1 - (1 - p) ** 3 : ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1, p) : 0;\n  const th = (s.rot + 0.05 * sin(P.tau * 1.1 + s.p)) * e;\n  return [cos(th), sin(th), s.cx + (s.tx + 0.8 * sin(P.tau * 1.7 + s.p)) * e, s.cy + (s.ty + 0.6 * cos(P.tau * 1.3 + s.p)) * e];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.glaze = cl(k[0], 0, 1);\n  P.mends = round(cl(k[2], 2, 8));\n  P.PX = 32 + 14 * cl(k[3], -1, 1);\n  P.tau += d;\n  if (input.btnPressed && input.btnPressed[0] && (P.ph === 0 || P.ph === 5)) go(P, 1);\n  if ((P.pt += d) >= (P.ph ? DUR[P.ph] : P.wd)) go(P, (P.ph + 1) % 6);\n  const p = P.pt / DUR[P.ph];\n  P.fade = P.ph === 3 ? 1 - sm(0.2, 1, p) : P.ph === 4 ? 0 : 1;\n  P.flare = P.ph === 5 ? 1 - p : 0;\n  swing(P);\n\n  // Gold powder dusted on the lacquer falls past the shards to the cloth.\n  if (P.ph === 3 && p > 0.3 && rnd() \u003c d * 16) {\n    const s = P.S[floor(rnd() * P.S.length)];\n    if (s.e.length) {\n      const b = s.e[floor(rnd() * s.e.length)], [co, si, tx, ty] = place(P, s), qx = (b & 63) + 0.5 - s.cx, qy = (b >> 6) + BY0 + 0.5 - s.cy;\n      P.dust.push([co * qx - si * qy + tx, si * qx + co * qy + ty, 0, FB + 5 + rnd() * 19, 1, rnd() * TAU]);\n    }\n  }\n  P.dust = P.dust.filter((q) => {\n    if (q[1] \u003c q[3]) (q[2] += 40 * d), (q[1] = min(q[3], q[1] + q[2] * d));\n    else q[4] -= d / 10;\n    return q[4] > 0;\n  });\n  if (P.dust.length > 90) P.dust.shift();\n}\n\n// The bowl's colours for this moment: glaze lit by the lantern, the seams of\n// the mends it carries, and the crack, the bare clay, the lacquer and the\n// gold of the break under way.\nfunction shade(P) {\n  // The bowl's glaze and the three others, round the ring of four.\n  const G = [0, 1, 2, 3].map((k) => {\n    const g = P.glaze * 3 + k, i = floor(g) % 4, f = g - floor(g);\n    return [0, 1].map((j) => GLAZE[i][j].map((v, n) => mix(v, GLAZE[(i + 1) % 4][j][n], f)));\n  });\n  const { mat, nrm, ao, mot, jit, sid, fid, col, LX, LY, ph, count, fade, flare } = P, lo = count - P.mends, p = P.pt / (ph ? DUR[ph] : P.wd);\n  const lac = ph === 3 ? sm(0, 0.5, p) * 1.05 : ph === 4 ? 2 : 0, gil = ph === 3 ? sm(0.3, 1, p) * 1.05 : ph === 4 ? 2 : 0, open = ph >= 2 && ph \u003c= 4;\n  const vis = (id) => (id > lo ? (id === lo + 1 ? fade : 1) : 0);\n  let gs = 0, r = 0, gg = 0, bb = 0, kg = 0, gl = 0;\n  const gold = (a, age, fl) => {\n    const t = min(1, age / 8);\n    gs += a * fl * (kg + gl);\n    r = mix(r, (mix(GOLD[0], OLDG[0], t) * kg + GLINT[0] * gl) * fl, a);\n    gg = mix(gg, (mix(GOLD[1], OLDG[1], t) * kg + GLINT[1] * gl) * fl, a);\n    bb = mix(bb, (mix(GOLD[2], OLDG[2], t) * kg + GLINT[2] * gl) * fl, a);\n  };\n  const flat = (c, k) => ((r = c[0] * k), (gg = c[1] * k), (bb = c[2] * k));\n  for (let b = 0; b \u003c NB; b++) {\n    const m = mat[b];\n    if (!m) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5, o = b * 3, nx = nrm[o], ny = nrm[o + 1], nz = nrm[o + 2];\n    let lx = LX - x, ly = y - LY, lz = 24;\n    const dd = lx * lx + ly * ly + lz * lz, il = 1 / sqrt(dd), fall = 0.55 + 0.6 * exp(-dd / 5000);\n    (lx *= il), (ly *= il), (lz *= il);\n    const hz = lz + 1, hl = 1 / sqrt(lx * lx + ly * ly + hz * hz), dif = max(0, nx * lx + ny * ly + nz * lz) * fall;\n    kg = 0.62 + 0.55 * dif;\n    gl = min(1.1, 1.7 * fall * max(0, ((nx + jit[b]) * lx + ny * ly + nz * hz) * hl) ** 30);\n    if (m === 4) flat(CLAY, (0.16 + 0.8 * dif) * ao[b]);\n    else {\n      // Glaze, or the piece of another bowl set into it.\n      const t = mot[b], fi = fid[b], nw = ph === 4 && P.reg[b] === 254, gk = nw ? P.noff : fi > lo ? P.off[fi & 15] : 0, ga = !nw && fi === lo + 1 ? fade : 1;\n      const k = (0.2 + 0.3 * max(0, -ny) + 0.95 * dif) * ao[b] * (m === 3 ? 1.15 : 1), sh = 0.6 * fall * max(0, (nx * lx + ny * ly + nz * hz) * hl) ** 24;\n      const A = G[0], B = G[gk];\n      r = mix(mix(A[0][0], A[1][0], t), mix(B[0][0], B[1][0], t), ga) * k + SHEEN[0] * sh;\n      gg = mix(mix(A[0][1], A[1][1], t), mix(B[0][1], B[1][1], t), ga) * k + SHEEN[1] * sh;\n      bb = mix(mix(A[0][2], A[1][2], t), mix(B[0][2], B[1][2], t), ga) * k + SHEEN[2] * sh;\n    }\n    const id = sid[b], a = vis(id);\n    if (open && P.ce[b]) {\n      // An opened edge: bare clay, then red lacquer, then gold.\n      const q = P.ga[b];\n      if (q \u003c gil) gold(1, 0, 1.15);\n      else if (q \u003c lac) flat(URUSHI, 0.5 + 0.6 * dif);\n      else flat(BODY, 0.45 + 0.7 * dif);\n    } else if (a > 0) gold(a, count - id, id === count ? 1 + 0.6 * flare : 1);\n    else if (flare > 0) {\n      // Fresh gold glows a little past the line it fills.\n      for (let j = 0; j \u003c 4; j++) {\n        const nb = b + (j === 0 ? 1 : j === 1 ? -1 : j === 2 ? 64 : -64);\n        if (nb >= 0 && nb \u003c NB && sid[nb] === count) {\n          gold(0.6 * flare, 0, 1);\n          break;\n        }\n      }\n    }\n    if (ph === 1 && P.cb[b] && P.cd[b] \u003c p * 1.6) (r *= 0.12), (gg *= 0.12), (bb *= 0.12);\n    (col[o] = r), (col[o + 1] = gg), (col[o + 2] = bb);\n  }\n  P.gs = gs;\n}\n\n// The wall and cloth lit by the lantern, the bowl's shadow thrown away from\n// it, and the warm light its gold throws down on the cloth.\nfunction back(P, F) {\n  const { LX, LY, bg } = P, sx = CX - (LX - CX) * 0.45, gx = CX + (LX - CX) * 0.3, gk = min(1.6, P.gs / 700);\n  // The glows fall off as a column term times a row term.\n  const X = [], Y = [];\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - LX) ** 2;\n    X.push([exp(-dx / 380), exp(-dx / 1400), exp(-dx / 1500), gk * exp(-((x + 0.5 - gx) ** 2) / 600)]);\n  }\n  for (let y = 0; y \u003c H; y++) Y.push([1.2 * exp(-((y + 0.5 - LY) ** 2) / 380), 0.3 * exp(-((y - LY) ** 2) / 4000), 0.9 * exp(-((y - 118) ** 2) / 700), exp(-((y - 111) ** 2) / 160)]);\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const [a, b, c, d] = Y[y], ey = (y + 0.5 - FB - 3) / 7;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const C = X[x];\n      if (y \u003c HORIZON) {\n        const k = 0.3 + a * C[0] + b * C[1];\n        (F[o] = bg[o] * k), (F[o + 1] = bg[o + 1] * k), (F[o + 2] = bg[o + 2] * k);\n        continue;\n      }\n      const ex = (x + 0.5 - sx) / 31, g = d * C[3] * (bg[o + 2] / CLOTH[2]);\n      let k = 0.42 + c * C[2];\n      if (ey * ey \u003c 1.4 && ex * ex \u003c 1.4) k *= 1 - 0.72 * sm(1.15, 0.55, sqrt(ex * ex + ey * ey));\n      k *= 1 + 0.7 * g;\n      (F[o] = bg[o] * k + 96 * g), (F[o + 1] = bg[o + 1] * k + 74 * g), (F[o + 2] = bg[o + 2] * k + 16 * g);\n    }\n  }\n}\n\nconst put = (F, x, y, c, k) => {\n  if ((x = floor(x)) >= 0 && x \u003c W && (y = floor(y)) >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// The paper lantern on its cord: ribs across the lit paper, black lacquer caps.\nfunction lantern(P, F) {\n  const { LX, LY, PX } = P;\n  for (let t = 0; t \u003c 1; t += 0.04) put(F, mix(PX, LX, t), mix(3, LY - 10, t), [70, 58, 46], 1);\n  for (let yy = -10; yy \u003c= 10; yy++) {\n    const y = round(LY) + yy, cap = yy \u003c= -9 || yy >= 9, w = cap ? 3.6 : 6.3 * sqrt(max(0, 1 - (yy / 9.6) ** 2)) + 0.4;\n    for (let x = floor(LX - w); x \u003c= LX + w; x++) {\n      const dx = x + 0.5 - LX, cov = cl(w - Math.abs(dx) + 0.5, 0, 1);\n      if (y \u003c 0 || x \u003c 0 || x >= W || !cov) continue;\n      const o = (y * W + x) * 3, q = dx / w, gl = 1 - q * q, rib = (yy + 9) % 3 ? 1 : 0.7;\n      for (let n = 0; n \u003c 3; n++) {\n        const c = cap ? [38, 30, 26][n] * (1.2 - 0.4 * q) : mix([236, 118, 44][n], [255, 226, 160][n], gl * (1 - (yy / 10) ** 2)) * rib;\n        F[o + n] = mix(F[o + n], c, cov);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.mat) return;\n  const F = P.f, { col, mat, ph } = P;\n  shade(P);\n  back(P, F);\n  lantern(P, F);\n  if (ph >= 2 && ph \u003c= 4) {\n    // Each shard drawn where it has drifted, read back through its turn.\n    for (let i = 0; i \u003c P.S.length; i++) {\n      const s = P.S[i];\n      if (!s.c) continue;\n      const [co, si, tx, ty] = place(P, s);\n      for (let y = max(0, floor(ty - s.rad)); y \u003c= min(H - 1, ty + s.rad); y++)\n        for (let x = max(0, floor(tx - s.rad)); x \u003c= min(W - 1, tx + s.rad); x++) {\n          const dx = x + 0.5 - tx, dy = y + 0.5 - ty, bx = floor(co * dx + si * dy + s.cx), by = floor(-si * dx + co * dy + s.cy) - BY0;\n          if (bx \u003c 0 || bx > 63 || by \u003c 0 || by >= BH) continue;\n          const b = by * 64 + bx, o = (y * W + x) * 3;\n          if (P.reg[b] === i + 1) (F[o] = col[b * 3]), (F[o + 1] = col[b * 3 + 1]), (F[o + 2] = col[b * 3 + 2]);\n        }\n    }\n    // The lost chip comes back as gold, and the lost shard as a piece of\n    // another bowl, as the shards close.\n    const a = ph === 4 ? sm(0.4, 1, P.pt / DUR[4]) : 0;\n    if (a) for (let b = 0, o = BY0 * W * 3; b \u003c NB; b++, o += 3) if (P.reg[b] > 253) for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], col[b * 3 + n], a);\n  } else for (let b = 0; b \u003c NB; b++) if (mat[b]) F.set(col.subarray(b * 3, b * 3 + 3), (BY0 * W + b) * 3);\n  // The ring of the strike.\n  if (ph === 1) {\n    const p = P.pt / DUR[1];\n    for (let y = -7; y \u003c= 7; y++)\n      for (let x = -7; x \u003c= 7; x++) {\n        const k = (1 - p) * exp(-(x * x + y * y) / (2 + 10 * p)), xx = floor(P.ix + x), yy = floor(P.iy + y);\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let n = 0, o = (yy * W + xx) * 3; n \u003c 3; n++) F[o + n] += 255 * k;\n      }\n  }\n  for (const q of P.dust) {\n    const x = floor(q[0]), y = floor(q[1]), k = q[1] \u003c q[3] ? 0.9 : q[4] * (0.25 + 0.75 * max(0, sin(q[5] + P.tau * 4)) ** 3);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = mix(F[o + n], GOLD[n], k);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glaze","min":0,"max":1,"about":"Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower."},{"name":"Mends","min":2,"max":8,"about":"How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze."},{"name":"Lamp","min":-1,"max":1,"about":"Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it."}],"start":[0,2,2,0.06],"measures":{"motion":0.1906,"detail":0.0509,"edges":0.2812,"complexity":2.0844,"coverage":0.9972,"colour":0.1903,"drift":0.136},"knobResponse":[0.0565,0.1068,0.0529,0.1171]},{"slug":"kolakoski","title":"Kolakoski","family":"number","round":35,"note":"제 런 길이 부호와 같은 1 과 2 의 수열이 열 단의 고드름으로 매달려요. 맨 아래 단은 3,000번 항부터 64항이 LED 하나씩 금색 1 과 보라 2 로 서고, 그 위 단마다 아래 단의 런을 만든 항이 런 너비로 앉아 같은 수열이 단마다 3분의 2 로 줄며 왼쪽으로 한 항씩 흘러요. K3 은 단을 16 까지 늘리고, K1 을 누르면 창이 10만 항 뒤로 건너뛰어 맨 위 눈금이 1 이 4 개 앞선 자리에서 2 가 46 개 앞선 자리로 옮겨요.","idea":"The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.","buttons":"K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.","code":"// ===== Patternflow pattern =====\n// Title:   Kolakoski\n// Family:  number\n// Idea:    The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kolakoski sequence (William Kolakoski, 1965), pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1\n//\n// Knob 1: Hue. Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot.\n// Knob 2: Speed. Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s.\n// Knob 3: Bands. How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel.\n// Knob 4: Falloff. Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round.\n// Buttons: K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.\n\n// Term i of the sequence is the length of run i: 1, 2, 2, 1, 1, 2, 1 is a\n// run of one 1, one of two 2s, two 1s, one 2, one 1, ... and the runs\n// alternate 1s and 2s. So term k has K[k] children, the terms of run k,\n// and up[j] is the run that term j sits in: its parent. Term 0 and term 1\n// are their own parents, and every other term climbs to term 1, from term\n// 3,000 in 19 steps, from term 100,000 in 27.\n//\n// Rufus Oldenburger described it first in 1939; Kolakoski asked about it in\n// the American Mathematical Monthly in 1965. Keane's question, whether the\n// share of 1s tends to 1/2, is still open. Counted here: 49,972 1s in the\n// first 100,000 terms, 499,986 in the first million, and the 1s never run\n// more than 66 ahead of the 2s or behind them in all that way.\n\nconst W = 64, H = 128, N = 1 \u003c\u003c 20, W0 = 3000, JUMP = 100000, TOP = 3;\nconst { floor, max, round, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  // 2^20 terms, written by reading the sequence itself two terms behind the\n  // pen: 28 ms.\n  const K = new Uint8Array(N);\n  K[0] = 1;\n  K[1] = 2;\n  K[2] = 2;\n  for (let len = 3, read = 2, val = 1; len \u003c N; val = 3 - val)\n    for (let c = 0, r = K[read++]; c \u003c r && len \u003c N; c++) K[len++] = val;\n  const up = new Int32Array(N), ones = new Int32Array(N + 1);\n  for (let k = 0, pos = 0; pos \u003c N; k++) for (let c = 0; c \u003c K[k] && pos \u003c N; c++) up[pos++] = k;\n  for (let i = 0; i \u003c N; i++) ones[i + 1] = ones[i] + (K[i] === 1 ? 1 : 0);\n  params.s = {\n    K, up, ones, w: W0, acc: 0, hue: 0, speed: 2, bands: 10, fall: 0.06,\n    pal: new Float32Array(12), palHue: NaN, anc: new Int32Array(16 * W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.bands = round(cl(k[2], 10, 16));\n  P.fall = cl(k[3], -1, 1);\n  // Whole terms only: a window between two terms would smear every band.\n  P.acc += d * P.speed * 1.5;\n  while (P.acc >= 1) (P.acc -= 1), P.w++;\n  if (input.btnPressed && input.btnPressed[0]) P.w += JUMP;\n  if (P.w + W >= N) P.w = W0 + ((P.w - W0) % (N - W - W0));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { K, up, anc, pal } = P;\n  if (P.palHue !== P.hue) {\n    // Pale and full gold for the 1s, pale and deep violet for the 2s: each\n    // band runs from the first at its top row to the second at its foot.\n    // The gold keeps its brightness all the way down, as a darker gold\n    // reads olive, and where the knob turns the violet to red, orange or\n    // yellow it is lifted the same way.\n    const h2 = P.hue + 0.72 - floor(P.hue + 0.72), hw = h2 > 0.9 ? h2 - 1 : h2, warm = cl((hw + 0.06) / 0.08, 0, 1) * cl((0.32 - hw) / 0.08, 0, 1);\n    hsv(P.hue + 0.11, 0.28, 1, pal, 0);\n    hsv(P.hue + 0.11, 0.7, 1, pal, 3);\n    hsv(h2, 0.38, 0.8 + 0.15 * warm, pal, 6);\n    hsv(h2, 0.7, 0.56 + 0.36 * warm, pal, 9);\n    P.palHue = P.hue;\n  }\n  // anc[b W + x] is the ancestor b generations up of the term under column\n  // x. A band's term boundaries fall where this changes, so each term is\n  // exactly as wide as its descendants in the window.\n  const B = P.bands;\n  for (let x = 0; x \u003c W; x++)\n    for (let b = 0, j = P.w + x; b \u003c B; b++, j = up[j]) anc[b * W + x] = j;\n  // Band heights grow by `ratio` a band going up, with a dark row between\n  // bands; the top band takes what rounding leaves.\n  const avail = H - TOP - (B - 1), ratio = pow(1.3, P.fall);\n  let sum = 0;\n  for (let b = 0; b \u003c B; b++) sum += pow(ratio, b);\n  for (let b = 0, y = H; b \u003c B; b++) {\n    const hgt = b === B - 1 ? y - TOP : max(3, round((avail * pow(ratio, b)) / sum)), y0 = y - hgt, row = b * W;\n    for (let x = 0; x \u003c W; x++) {\n      const a = anc[row + x], v = K[a], o = (v - 1) * 6;\n      // Neighbours of different value part by colour. Two of the same, the\n      // two terms of one run, get a dark seam on the first column of the\n      // right one when it is two LEDs or more; two 1-LED terms run together\n      // and the band above tells them apart.\n      let g = 255;\n      if (x > 0 && anc[row + x - 1] !== a && K[anc[row + x - 1]] === v && x + 1 \u003c W && anc[row + x + 1] === a) g = 40;\n      for (let yy = y0; yy \u003c y; yy++) {\n        const t = hgt > 1 ? (yy - y0) / (hgt - 1) : 1, u = 1 - t;\n        display.setPixel(x, yy, (pal[o] * u + pal[o + 3] * t) * g, (pal[o + 1] * u + pal[o + 4] * t) * g, (pal[o + 2] * u + pal[o + 5] * t) * g);\n      }\n    }\n    if (y0 - 1 >= TOP) for (let x = 0; x \u003c W; x++) display.setPixel(x, y0 - 1, 0, 0, 0);\n    y = y0 - 1;\n  }\n  // The gauge: 1s minus 2s among the first w + 64 terms, half an LED a\n  // term from the middle, toward the gold side when the 1s are ahead. The\n  // track is dim violet on the left, dim gold on the right.\n  const n = P.w + W, lead = 2 * P.ones[n] - n, mx = cl(32 + round(lead / 2), 0, W - 1);\n  for (let x = 0; x \u003c W; x++) {\n    const o = x \u003c 32 ? 9 : 3, g = x === 32 ? 0 : 70;\n    for (let yy = 0; yy \u003c 2; yy++) {\n      if (x === mx) display.setPixel(x, yy, 255, 255, 255);\n      else if (g === 0) display.setPixel(x, yy, 110, 110, 110);\n      else display.setPixel(x, yy, pal[o] * g, pal[o + 1] * g, pal[o + 2] * g);\n    }\n    display.setPixel(x, 2, 0, 0, 0);\n  }\n}\n","layer":{"id":"layer-kolakoski","type":"code","name":"kolakoski","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kolakoski\n// Family:  number\n// Idea:    The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kolakoski sequence (William Kolakoski, 1965), pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1\n//\n// Knob 1: Hue. Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot.\n// Knob 2: Speed. Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s.\n// Knob 3: Bands. How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel.\n// Knob 4: Falloff. Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round.\n// Buttons: K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.\n\n// Term i of the sequence is the length of run i: 1, 2, 2, 1, 1, 2, 1 is a\n// run of one 1, one of two 2s, two 1s, one 2, one 1, ... and the runs\n// alternate 1s and 2s. So term k has K[k] children, the terms of run k,\n// and up[j] is the run that term j sits in: its parent. Term 0 and term 1\n// are their own parents, and every other term climbs to term 1, from term\n// 3,000 in 19 steps, from term 100,000 in 27.\n//\n// Rufus Oldenburger described it first in 1939; Kolakoski asked about it in\n// the American Mathematical Monthly in 1965. Keane's question, whether the\n// share of 1s tends to 1/2, is still open. Counted here: 49,972 1s in the\n// first 100,000 terms, 499,986 in the first million, and the 1s never run\n// more than 66 ahead of the 2s or behind them in all that way.\n\nconst W = 64, H = 128, N = 1 \u003c\u003c 20, W0 = 3000, JUMP = 100000, TOP = 3;\nconst { floor, max, round, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  // 2^20 terms, written by reading the sequence itself two terms behind the\n  // pen: 28 ms.\n  const K = new Uint8Array(N);\n  K[0] = 1;\n  K[1] = 2;\n  K[2] = 2;\n  for (let len = 3, read = 2, val = 1; len \u003c N; val = 3 - val)\n    for (let c = 0, r = K[read++]; c \u003c r && len \u003c N; c++) K[len++] = val;\n  const up = new Int32Array(N), ones = new Int32Array(N + 1);\n  for (let k = 0, pos = 0; pos \u003c N; k++) for (let c = 0; c \u003c K[k] && pos \u003c N; c++) up[pos++] = k;\n  for (let i = 0; i \u003c N; i++) ones[i + 1] = ones[i] + (K[i] === 1 ? 1 : 0);\n  params.s = {\n    K, up, ones, w: W0, acc: 0, hue: 0, speed: 2, bands: 10, fall: 0.06,\n    pal: new Float32Array(12), palHue: NaN, anc: new Int32Array(16 * W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.bands = round(cl(k[2], 10, 16));\n  P.fall = cl(k[3], -1, 1);\n  // Whole terms only: a window between two terms would smear every band.\n  P.acc += d * P.speed * 1.5;\n  while (P.acc >= 1) (P.acc -= 1), P.w++;\n  if (input.btnPressed && input.btnPressed[0]) P.w += JUMP;\n  if (P.w + W >= N) P.w = W0 + ((P.w - W0) % (N - W - W0));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { K, up, anc, pal } = P;\n  if (P.palHue !== P.hue) {\n    // Pale and full gold for the 1s, pale and deep violet for the 2s: each\n    // band runs from the first at its top row to the second at its foot.\n    // The gold keeps its brightness all the way down, as a darker gold\n    // reads olive, and where the knob turns the violet to red, orange or\n    // yellow it is lifted the same way.\n    const h2 = P.hue + 0.72 - floor(P.hue + 0.72), hw = h2 > 0.9 ? h2 - 1 : h2, warm = cl((hw + 0.06) / 0.08, 0, 1) * cl((0.32 - hw) / 0.08, 0, 1);\n    hsv(P.hue + 0.11, 0.28, 1, pal, 0);\n    hsv(P.hue + 0.11, 0.7, 1, pal, 3);\n    hsv(h2, 0.38, 0.8 + 0.15 * warm, pal, 6);\n    hsv(h2, 0.7, 0.56 + 0.36 * warm, pal, 9);\n    P.palHue = P.hue;\n  }\n  // anc[b W + x] is the ancestor b generations up of the term under column\n  // x. A band's term boundaries fall where this changes, so each term is\n  // exactly as wide as its descendants in the window.\n  const B = P.bands;\n  for (let x = 0; x \u003c W; x++)\n    for (let b = 0, j = P.w + x; b \u003c B; b++, j = up[j]) anc[b * W + x] = j;\n  // Band heights grow by `ratio` a band going up, with a dark row between\n  // bands; the top band takes what rounding leaves.\n  const avail = H - TOP - (B - 1), ratio = pow(1.3, P.fall);\n  let sum = 0;\n  for (let b = 0; b \u003c B; b++) sum += pow(ratio, b);\n  for (let b = 0, y = H; b \u003c B; b++) {\n    const hgt = b === B - 1 ? y - TOP : max(3, round((avail * pow(ratio, b)) / sum)), y0 = y - hgt, row = b * W;\n    for (let x = 0; x \u003c W; x++) {\n      const a = anc[row + x], v = K[a], o = (v - 1) * 6;\n      // Neighbours of different value part by colour. Two of the same, the\n      // two terms of one run, get a dark seam on the first column of the\n      // right one when it is two LEDs or more; two 1-LED terms run together\n      // and the band above tells them apart.\n      let g = 255;\n      if (x > 0 && anc[row + x - 1] !== a && K[anc[row + x - 1]] === v && x + 1 \u003c W && anc[row + x + 1] === a) g = 40;\n      for (let yy = y0; yy \u003c y; yy++) {\n        const t = hgt > 1 ? (yy - y0) / (hgt - 1) : 1, u = 1 - t;\n        display.setPixel(x, yy, (pal[o] * u + pal[o + 3] * t) * g, (pal[o + 1] * u + pal[o + 4] * t) * g, (pal[o + 2] * u + pal[o + 5] * t) * g);\n      }\n    }\n    if (y0 - 1 >= TOP) for (let x = 0; x \u003c W; x++) display.setPixel(x, y0 - 1, 0, 0, 0);\n    y = y0 - 1;\n  }\n  // The gauge: 1s minus 2s among the first w + 64 terms, half an LED a\n  // term from the middle, toward the gold side when the 1s are ahead. The\n  // track is dim violet on the left, dim gold on the right.\n  const n = P.w + W, lead = 2 * P.ones[n] - n, mx = cl(32 + round(lead / 2), 0, W - 1);\n  for (let x = 0; x \u003c W; x++) {\n    const o = x \u003c 32 ? 9 : 3, g = x === 32 ? 0 : 70;\n    for (let yy = 0; yy \u003c 2; yy++) {\n      if (x === mx) display.setPixel(x, yy, 255, 255, 255);\n      else if (g === 0) display.setPixel(x, yy, 110, 110, 110);\n      else display.setPixel(x, yy, pal[o] * g, pal[o + 1] * g, pal[o + 2] * g);\n    }\n    display.setPixel(x, 2, 0, 0, 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot."},{"name":"Speed","min":0.2,"max":3,"about":"Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s."},{"name":"Bands","min":10,"max":16,"about":"How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel."},{"name":"Falloff","min":-1,"max":1,"about":"Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round."}],"start":[0,2,10,0.06],"measures":{"motion":0.3357,"detail":0.1184,"edges":0.9202,"complexity":0.2363,"coverage":0.9144,"colour":0.3543,"drift":0.0962},"knobResponse":[0.3404,0.1812,0.286,0.2965]},{"slug":"kuramoto-sivashinsky","title":"Kuramoto-Sivashinsky","family":"noise","round":37,"note":"쿠라모토-시바신스키 방정식을 패널 폭만 한 고리에서 한 열에 격자점 하나씩 풀고, 새 순간이 맨 위로 들어와 아래로 흘러서 128줄이 시공간 그림이 돼요. u 가 양인 청록 줄기와 음인 자홍 줄기가 흔들리고 갈라지고 합쳐지며 땋이고, u 가 0을 지나는 곳은 검게 비어요. K3 은 고리 길이를 22에서 66으로 늘려 두 줄기를 일곱 줄기로 만들고, K4 의 분산 항은 혼돈을 한쪽으로 기우는 펄스 열로 가라앉혀요. 누르면 앞면이 한 군데 패여요.","idea":"The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.","buttons":"K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.","code":"// ===== Patternflow pattern =====\n// Title:   Kuramoto-Sivashinsky\n// Family:  noise\n// Idea:    The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kuramoto-Sivashinsky equation (Yoshiki Kuramoto, 1976; Gregory Sivashinsky, 1977), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1\n//\n// Knob 1: Hue. Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal.\n// Knob 2: Speed. Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s.\n// Knob 3: Length. The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge.\n// Knob 4: Dispersion. A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative.\n// Buttons: K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.\n\n// The solver is ETDRK4, the exponential time-differencing Runge-Kutta\n// scheme of Steven Cox and Paul Matthews (2002), with the coefficients\n// taken as means round a circle in the complex plane, the way Aly-Khan\n// Kassam and Lloyd Trefethen (2005) do it, so they hold for every mode from\n// the growing ones to the most damped. In Fourier space\n//   v_t = (k^2 - k^4 + i delta k^3) v - (i k / 2) FFT(u^2),\n// the linear part solved exactly and only u^2 stepped, 0.25 time units a\n// step, five steps a row, 40 FFTs of size 64 a frame at Speed 2. At 0.4\n// time units a row the streaks hardly bent in 128 rows; at 1.25 they braid.\n//\n// Checked over 10,000 time units from the same start at delta 0:\n// - The energy, the mean of u^2, stays bounded: it averages 1.41 at L 22\n//   and 1.71 at L 66, and never passes 3.13.\n// - The fastest-growing wavelength is 2 pi sqrt 2, so a ring of length L\n//   should hold about L / 8.89 cells. Counting the positive humps of u\n//   (with a 0.4 dead band) gives 2.26 at L 22 against 2.48, 3.66 at 36\n//   against 4.05, 5.34 at 50 against 5.63 and 6.89 at 66 against 7.43:\n//   always 91 to 93 percent of it.\n// - 64 grid points resolve the ring up to L 66, where the highest mode\n//   never carries more than 0.65 percent of the largest. At L 100 it\n//   reached 21 percent, so the knob stops at 66.\nconst W = 64, H = 128, N = 64, STEP = 0.25, ROW = 1.25, RATE = 15, MC = 32, PRERUN = 100;\nconst { floor, exp, cos, sin, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// A complex FFT of size 64: bit reversal, then six rounds of butterflies.\nconst BR = new Uint8Array(N), CS = new Float64Array(N / 2), SN = new Float64Array(N / 2);\nfor (let i = 0; i \u003c N; i++) {\n  let r = 0;\n  for (let b = 0, v = i; b \u003c 6; b++, v >>= 1) r = (r \u003c\u003c 1) | (v & 1);\n  BR[i] = r;\n}\nfor (let k = 0; k \u003c N / 2; k++) (CS[k] = cos((TAU * k) / N)), (SN[k] = sin((TAU * k) / N));\n\nfunction fft(re, im, sign) {\n  for (let i = 0; i \u003c N; i++) {\n    const j = BR[i];\n    if (j > i) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let size = 2; size \u003c= N; size \u003c\u003c= 1) {\n    const half = size >> 1, step = N / size;\n    for (let i = 0; i \u003c N; i += size)\n      for (let k = 0; k \u003c half; k++) {\n        const wr = CS[k * step], wi = sign * SN[k * step], a = i + k, b = a + half;\n        const tr = re[b] * wr - im[b] * wi, ti = re[b] * wi + im[b] * wr;\n        re[b] = re[a] - tr;\n        im[b] = im[a] - ti;\n        re[a] += tr;\n        im[a] += ti;\n      }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\nconst f64 = () => new Float64Array(N);\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: -1, speed: 2, L: -1, delta: NaN, acc: 0, head: 0,\n    vr: f64(), vi: f64(), g: f64(),\n    Er: f64(), Ei: f64(), E2r: f64(), E2i: f64(), Qr: f64(), Qi: f64(),\n    f1r: f64(), f1i: f64(), f2r: f64(), f2i: f64(), f3r: f64(), f3i: f64(),\n    ar: f64(), ai: f64(), br: f64(), bi: f64(), cr: f64(), ci: f64(),\n    Nvr: f64(), Nvi: f64(), Nar: f64(), Nai: f64(), Nbr: f64(), Nbi: f64(), Ncr: f64(), Nci: f64(),\n    tr: f64(), ti: f64(), u: f64(),\n    hist: new Float32Array(H * N), next: new Float32Array(N), lut: new Uint8Array(2 * 257 * 3),\n  };\n}\n\n// The ETDRK4 coefficients for ring length L and dispersion delta. Mode n\n// has wavenumber k = 2 pi n / L for n below 32 and 2 pi (n - 64) / L above;\n// the Nyquist mode, n = 32, gets the damping of its true wavenumber but no\n// share of the nonlinear term, as an odd derivative cannot be taken there.\nfunction coefficients(S) {\n  const { L, delta, g } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const kk = (TAU * (n \u003c N / 2 ? n : n - N)) / L, kn = n === N / 2 ? (TAU * (N / 2)) / L : kk;\n    g[n] = n === N / 2 ? 0 : -0.5 * kk;\n    const zr = STEP * (kn * kn - kn * kn * kn * kn), zi = n === N / 2 ? 0 : STEP * delta * kk * kk * kk;\n    let em = exp(zr);\n    S.Er[n] = em * cos(zi);\n    S.Ei[n] = em * sin(zi);\n    em = exp(zr / 2);\n    S.E2r[n] = em * cos(zi / 2);\n    S.E2i[n] = em * sin(zi / 2);\n    let qr = 0, qi = 0, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0;\n    for (let j = 0; j \u003c MC; j++) {\n      const th = (TAU * (j + 0.5)) / MC, lr = zr + cos(th), li = zi + sin(th);\n      const ex = exp(lr), er = ex * cos(li), ei = ex * sin(li);\n      const hx = exp(lr / 2), hr = hx * cos(li / 2), hi = hx * sin(li / 2);\n      const l2r = lr * lr - li * li, l2i = 2 * lr * li;\n      const l3r = l2r * lr - l2i * li, l3i = l2r * li + l2i * lr;\n      const d1 = lr * lr + li * li, d3 = l3r * l3r + l3i * l3i;\n      qr += ((hr - 1) * lr + hi * li) / d1;\n      qi += (hi * lr - (hr - 1) * li) / d1;\n      let pr = 4 - 3 * lr + l2r, pi = -3 * li + l2i;\n      let nr = -4 - lr + er * pr - ei * pi, ni = -li + er * pi + ei * pr;\n      a1 += (nr * l3r + ni * l3i) / d3;\n      b1 += (ni * l3r - nr * l3i) / d3;\n      pr = lr - 2;\n      pi = li;\n      nr = 2 + lr + er * pr - ei * pi;\n      ni = li + er * pi + ei * pr;\n      a2 += (nr * l3r + ni * l3i) / d3;\n      b2 += (ni * l3r - nr * l3i) / d3;\n      pr = 4 - lr;\n      pi = -li;\n      nr = -4 - 3 * lr - l2r + er * pr - ei * pi;\n      ni = -3 * li - l2i + er * pi + ei * pr;\n      a3 += (nr * l3r + ni * l3i) / d3;\n      b3 += (ni * l3r - nr * l3i) / d3;\n    }\n    const m = STEP / MC;\n    S.Qr[n] = qr * m;\n    S.Qi[n] = qi * m;\n    S.f1r[n] = a1 * m;\n    S.f1i[n] = b1 * m;\n    S.f2r[n] = a2 * m;\n    S.f2i[n] = b2 * m;\n    S.f3r[n] = a3 * m;\n    S.f3i[n] = b3 * m;\n  }\n}\n\n// N(v) = -(i k / 2) FFT(u^2), u the real part of the inverse FFT of v.\nfunction nonlinear(S, xr, xi, outr, outi) {\n  const { tr, ti, g } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = xr[n]), (ti[n] = xi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) {\n    const u = tr[j] / N;\n    tr[j] = u * u;\n    ti[j] = 0;\n  }\n  fft(tr, ti, -1);\n  for (let n = 0; n \u003c N; n++) {\n    outr[n] = -g[n] * ti[n];\n    outi[n] = g[n] * tr[n];\n  }\n}\n\nfunction step(S) {\n  const { vr, vi, ar, ai, br, bi, cr, ci, Nvr, Nvi, Nar, Nai, Nbr, Nbi, Ncr, Nci, E2r, E2i, Qr, Qi } = S;\n  nonlinear(S, vr, vi, Nvr, Nvi);\n  for (let n = 0; n \u003c N; n++) {\n    ar[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nvr[n] - Qi[n] * Nvi[n];\n    ai[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nvi[n] + Qi[n] * Nvr[n];\n  }\n  nonlinear(S, ar, ai, Nar, Nai);\n  for (let n = 0; n \u003c N; n++) {\n    br[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nar[n] - Qi[n] * Nai[n];\n    bi[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nai[n] + Qi[n] * Nar[n];\n  }\n  nonlinear(S, br, bi, Nbr, Nbi);\n  for (let n = 0; n \u003c N; n++) {\n    const xr = 2 * Nbr[n] - Nvr[n], xi = 2 * Nbi[n] - Nvi[n];\n    cr[n] = E2r[n] * ar[n] - E2i[n] * ai[n] + Qr[n] * xr - Qi[n] * xi;\n    ci[n] = E2r[n] * ai[n] + E2i[n] * ar[n] + Qr[n] * xi + Qi[n] * xr;\n  }\n  nonlinear(S, cr, ci, Ncr, Nci);\n  const { Er, Ei, f1r, f1i, f2r, f2i, f3r, f3i } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const sr = Nar[n] + Nbr[n], si = Nai[n] + Nbi[n];\n    const nr =\n      Er[n] * vr[n] - Ei[n] * vi[n] +\n      (Nvr[n] * f1r[n] - Nvi[n] * f1i[n]) + 2 * (sr * f2r[n] - si * f2i[n]) + (Ncr[n] * f3r[n] - Nci[n] * f3i[n]);\n    const ni =\n      Er[n] * vi[n] + Ei[n] * vr[n] +\n      (Nvr[n] * f1i[n] + Nvi[n] * f1r[n]) + 2 * (sr * f2i[n] + si * f2r[n]) + (Ncr[n] * f3i[n] + Nci[n] * f3r[n]);\n    vr[n] = nr;\n    vi[n] = ni;\n  }\n  // u is real, so v_(64-n) is the conjugate of v_n. Round-off breaks that,\n  // and the broken part is invisible to u^2, so nothing holds it down: it\n  // grew at the linear rate of modes 2 and 3, 0.19 a time unit at L = 22,\n  // and blew the run up at t = 340. Folding it back each step keeps it at 0.\n  for (let n = 1; n \u003c N / 2; n++) {\n    const a = 0.5 * (vr[n] + vr[N - n]), b = 0.5 * (vi[n] - vi[N - n]);\n    vr[n] = vr[N - n] = a;\n    vi[n] = b;\n    vi[N - n] = -b;\n  }\n  vr[0] = vi[0] = vi[N / 2] = 0;\n}\n\n// u on the 64 grid points, one per column.\nfunction physical(S, out) {\n  const { tr, ti } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = S.vr[n]), (ti[n] = S.vi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) out[j] = tr[j] / N;\n}\n\nfunction advanceRow(S) {\n  for (let s = 0, n = round(ROW / STEP); s \u003c n; s++) step(S);\n}\n\n// The row just computed goes in at the head; `next` is one row ahead of it,\n// so the top of the panel can slide between the two.\nfunction pushRow(S) {\n  S.head = (S.head + H - 1) % H;\n  S.hist.set(S.next, S.head * N);\n  advanceRow(S);\n  physical(S, S.next);\n}\n\n// u is the slope of Sivashinsky's flame front, so a dent pushed into the\n// front shows in u as a dipole, up on one side and down on the other: the\n// derivative of a Gaussian, 4 columns wide, peaks of +-amp. It has no mean.\n// A plain bump had one, and taking it off shifted the whole row by 0.78,\n// a hard line straight across the diagram.\nfunction kick(S, x0, amp) {\n  const u = S.u;\n  physical(S, u);\n  for (let j = 0; j \u003c N; j++) {\n    let d = j - x0;\n    if (d > N / 2) d -= N;\n    if (d \u003c -N / 2) d += N;\n    const q = d / 4;\n    S.tr[j] = u[j] + amp * 1.6487 * q * exp(-0.5 * q * q);\n    S.ti[j] = 0;\n  }\n  fft(S.tr, S.ti, -1);\n  for (let n = 0; n \u003c N; n++) (S.vr[n] = S.tr[n]), (S.vi[n] = S.ti[n]);\n  S.vr[0] = S.vi[0] = 0;\n}\n\nfunction start(S) {\n  // Low modes with random phases, then PRERUN time units so the first\n  // frame is already chaos, then a full panel of history.\n  for (let n = 0; n \u003c N; n++) S.vr[n] = S.vi[n] = 0;\n  for (let n = 1; n \u003c= 6; n++) {\n    const ph = random() * TAU, a = (0.3 * N) / n;\n    S.vr[n] = a * cos(ph);\n    S.vi[n] = a * sin(ph);\n    S.vr[N - n] = a * cos(ph);\n    S.vi[N - n] = -a * sin(ph);\n  }\n  for (let s = 0, n = round(PRERUN / STEP); s \u003c n; s++) step(S);\n  physical(S, S.next);\n  for (let r = 0; r \u003c H; r++) pushRow(S);\n  S.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 22, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const L = cl(k[2], 22, 66), delta = cl(k[3], -1, 1);\n  if (L !== S.L || delta !== S.delta) {\n    S.L = L;\n    S.delta = delta;\n    coefficients(S);\n  }\n  if (!S.ready) start(S);\n  if (input.btnPressed && input.btnPressed[0]) kick(S, random() * N, 4);\n  S.acc += d * S.speed * RATE;\n  // 30 rows a second at 30 frames lands on 0.9999...; a hair of slack\n  // keeps it one row a frame instead of none and then two.\n  while (S.acc >= 1 - 1e-6) {\n    S.acc = Math.max(0, S.acc - 1);\n    pushRow(S);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  const lut = S.lut;\n  if (S.lutHue !== S.hue) {\n    // Two ramps of 257 steps, positive u then negative: black at zero,\n    // rising straight to full colour at |u| = 2.64, then paling to a tint at\n    // 3.3. A straight ramp keeps the steps between neighbours soft; the\n    // first, steeper ramp put a hard step on 23 percent of them.\n    for (let side = 0; side \u003c 2; side++) {\n      const h = S.hue + (side === 0 ? 0.5 : 0.86);\n      for (let i = 0; i \u003c= 256; i++) {\n        const a = i / 256, f = cl(a / 0.8, 0, 1), w = cl((a - 0.8) / 0.2, 0, 1);\n        hsv(h + 0.05 * (f - 1), 1 - 0.55 * w, f, lut, (side * 257 + i) * 3);\n      }\n    }\n    S.lutHue = S.hue;\n  }\n  // Pulses grow with the dispersion, |u| up to 3.5 at delta 0 and 4.7 at\n  // delta 1, so the map stretches with it and the pulses do not wash out pale.\n  const { hist, next, head, acc } = S, inv = 256 / (3.3 * (1 + 0.4 * abs(S.delta)));\n  for (let y = 0; y \u003c H; y++) {\n    // Display row y is `acc` of the way from history row y - 1 to row y,\n    // where row -1 is the one computed ahead.\n    const a = y - acc, r0 = floor(a), t = a - r0;\n    const A = r0 \u003c 0 ? next : null, o0 = ((head + r0 + H) % H) * N, o1 = ((head + r0 + 1) % H) * N;\n    for (let x = 0; x \u003c W; x++) {\n      const u0 = A ? A[x] : hist[o0 + x], u1 = r0 + 1 \u003c H ? hist[o1 + x] : u0;\n      const u = u0 + (u1 - u0) * t, i = Math.min(256, round(abs(u) * inv)), o = ((u \u003c 0 ? 257 : 0) + i) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-kuramoto-sivashinsky","type":"code","name":"kuramoto-sivashinsky","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kuramoto-Sivashinsky\n// Family:  noise\n// Idea:    The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kuramoto-Sivashinsky equation (Yoshiki Kuramoto, 1976; Gregory Sivashinsky, 1977), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1\n//\n// Knob 1: Hue. Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal.\n// Knob 2: Speed. Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s.\n// Knob 3: Length. The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge.\n// Knob 4: Dispersion. A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative.\n// Buttons: K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.\n\n// The solver is ETDRK4, the exponential time-differencing Runge-Kutta\n// scheme of Steven Cox and Paul Matthews (2002), with the coefficients\n// taken as means round a circle in the complex plane, the way Aly-Khan\n// Kassam and Lloyd Trefethen (2005) do it, so they hold for every mode from\n// the growing ones to the most damped. In Fourier space\n//   v_t = (k^2 - k^4 + i delta k^3) v - (i k / 2) FFT(u^2),\n// the linear part solved exactly and only u^2 stepped, 0.25 time units a\n// step, five steps a row, 40 FFTs of size 64 a frame at Speed 2. At 0.4\n// time units a row the streaks hardly bent in 128 rows; at 1.25 they braid.\n//\n// Checked over 10,000 time units from the same start at delta 0:\n// - The energy, the mean of u^2, stays bounded: it averages 1.41 at L 22\n//   and 1.71 at L 66, and never passes 3.13.\n// - The fastest-growing wavelength is 2 pi sqrt 2, so a ring of length L\n//   should hold about L / 8.89 cells. Counting the positive humps of u\n//   (with a 0.4 dead band) gives 2.26 at L 22 against 2.48, 3.66 at 36\n//   against 4.05, 5.34 at 50 against 5.63 and 6.89 at 66 against 7.43:\n//   always 91 to 93 percent of it.\n// - 64 grid points resolve the ring up to L 66, where the highest mode\n//   never carries more than 0.65 percent of the largest. At L 100 it\n//   reached 21 percent, so the knob stops at 66.\nconst W = 64, H = 128, N = 64, STEP = 0.25, ROW = 1.25, RATE = 15, MC = 32, PRERUN = 100;\nconst { floor, exp, cos, sin, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// A complex FFT of size 64: bit reversal, then six rounds of butterflies.\nconst BR = new Uint8Array(N), CS = new Float64Array(N / 2), SN = new Float64Array(N / 2);\nfor (let i = 0; i \u003c N; i++) {\n  let r = 0;\n  for (let b = 0, v = i; b \u003c 6; b++, v >>= 1) r = (r \u003c\u003c 1) | (v & 1);\n  BR[i] = r;\n}\nfor (let k = 0; k \u003c N / 2; k++) (CS[k] = cos((TAU * k) / N)), (SN[k] = sin((TAU * k) / N));\n\nfunction fft(re, im, sign) {\n  for (let i = 0; i \u003c N; i++) {\n    const j = BR[i];\n    if (j > i) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let size = 2; size \u003c= N; size \u003c\u003c= 1) {\n    const half = size >> 1, step = N / size;\n    for (let i = 0; i \u003c N; i += size)\n      for (let k = 0; k \u003c half; k++) {\n        const wr = CS[k * step], wi = sign * SN[k * step], a = i + k, b = a + half;\n        const tr = re[b] * wr - im[b] * wi, ti = re[b] * wi + im[b] * wr;\n        re[b] = re[a] - tr;\n        im[b] = im[a] - ti;\n        re[a] += tr;\n        im[a] += ti;\n      }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\nconst f64 = () => new Float64Array(N);\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: -1, speed: 2, L: -1, delta: NaN, acc: 0, head: 0,\n    vr: f64(), vi: f64(), g: f64(),\n    Er: f64(), Ei: f64(), E2r: f64(), E2i: f64(), Qr: f64(), Qi: f64(),\n    f1r: f64(), f1i: f64(), f2r: f64(), f2i: f64(), f3r: f64(), f3i: f64(),\n    ar: f64(), ai: f64(), br: f64(), bi: f64(), cr: f64(), ci: f64(),\n    Nvr: f64(), Nvi: f64(), Nar: f64(), Nai: f64(), Nbr: f64(), Nbi: f64(), Ncr: f64(), Nci: f64(),\n    tr: f64(), ti: f64(), u: f64(),\n    hist: new Float32Array(H * N), next: new Float32Array(N), lut: new Uint8Array(2 * 257 * 3),\n  };\n}\n\n// The ETDRK4 coefficients for ring length L and dispersion delta. Mode n\n// has wavenumber k = 2 pi n / L for n below 32 and 2 pi (n - 64) / L above;\n// the Nyquist mode, n = 32, gets the damping of its true wavenumber but no\n// share of the nonlinear term, as an odd derivative cannot be taken there.\nfunction coefficients(S) {\n  const { L, delta, g } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const kk = (TAU * (n \u003c N / 2 ? n : n - N)) / L, kn = n === N / 2 ? (TAU * (N / 2)) / L : kk;\n    g[n] = n === N / 2 ? 0 : -0.5 * kk;\n    const zr = STEP * (kn * kn - kn * kn * kn * kn), zi = n === N / 2 ? 0 : STEP * delta * kk * kk * kk;\n    let em = exp(zr);\n    S.Er[n] = em * cos(zi);\n    S.Ei[n] = em * sin(zi);\n    em = exp(zr / 2);\n    S.E2r[n] = em * cos(zi / 2);\n    S.E2i[n] = em * sin(zi / 2);\n    let qr = 0, qi = 0, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0;\n    for (let j = 0; j \u003c MC; j++) {\n      const th = (TAU * (j + 0.5)) / MC, lr = zr + cos(th), li = zi + sin(th);\n      const ex = exp(lr), er = ex * cos(li), ei = ex * sin(li);\n      const hx = exp(lr / 2), hr = hx * cos(li / 2), hi = hx * sin(li / 2);\n      const l2r = lr * lr - li * li, l2i = 2 * lr * li;\n      const l3r = l2r * lr - l2i * li, l3i = l2r * li + l2i * lr;\n      const d1 = lr * lr + li * li, d3 = l3r * l3r + l3i * l3i;\n      qr += ((hr - 1) * lr + hi * li) / d1;\n      qi += (hi * lr - (hr - 1) * li) / d1;\n      let pr = 4 - 3 * lr + l2r, pi = -3 * li + l2i;\n      let nr = -4 - lr + er * pr - ei * pi, ni = -li + er * pi + ei * pr;\n      a1 += (nr * l3r + ni * l3i) / d3;\n      b1 += (ni * l3r - nr * l3i) / d3;\n      pr = lr - 2;\n      pi = li;\n      nr = 2 + lr + er * pr - ei * pi;\n      ni = li + er * pi + ei * pr;\n      a2 += (nr * l3r + ni * l3i) / d3;\n      b2 += (ni * l3r - nr * l3i) / d3;\n      pr = 4 - lr;\n      pi = -li;\n      nr = -4 - 3 * lr - l2r + er * pr - ei * pi;\n      ni = -3 * li - l2i + er * pi + ei * pr;\n      a3 += (nr * l3r + ni * l3i) / d3;\n      b3 += (ni * l3r - nr * l3i) / d3;\n    }\n    const m = STEP / MC;\n    S.Qr[n] = qr * m;\n    S.Qi[n] = qi * m;\n    S.f1r[n] = a1 * m;\n    S.f1i[n] = b1 * m;\n    S.f2r[n] = a2 * m;\n    S.f2i[n] = b2 * m;\n    S.f3r[n] = a3 * m;\n    S.f3i[n] = b3 * m;\n  }\n}\n\n// N(v) = -(i k / 2) FFT(u^2), u the real part of the inverse FFT of v.\nfunction nonlinear(S, xr, xi, outr, outi) {\n  const { tr, ti, g } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = xr[n]), (ti[n] = xi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) {\n    const u = tr[j] / N;\n    tr[j] = u * u;\n    ti[j] = 0;\n  }\n  fft(tr, ti, -1);\n  for (let n = 0; n \u003c N; n++) {\n    outr[n] = -g[n] * ti[n];\n    outi[n] = g[n] * tr[n];\n  }\n}\n\nfunction step(S) {\n  const { vr, vi, ar, ai, br, bi, cr, ci, Nvr, Nvi, Nar, Nai, Nbr, Nbi, Ncr, Nci, E2r, E2i, Qr, Qi } = S;\n  nonlinear(S, vr, vi, Nvr, Nvi);\n  for (let n = 0; n \u003c N; n++) {\n    ar[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nvr[n] - Qi[n] * Nvi[n];\n    ai[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nvi[n] + Qi[n] * Nvr[n];\n  }\n  nonlinear(S, ar, ai, Nar, Nai);\n  for (let n = 0; n \u003c N; n++) {\n    br[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nar[n] - Qi[n] * Nai[n];\n    bi[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nai[n] + Qi[n] * Nar[n];\n  }\n  nonlinear(S, br, bi, Nbr, Nbi);\n  for (let n = 0; n \u003c N; n++) {\n    const xr = 2 * Nbr[n] - Nvr[n], xi = 2 * Nbi[n] - Nvi[n];\n    cr[n] = E2r[n] * ar[n] - E2i[n] * ai[n] + Qr[n] * xr - Qi[n] * xi;\n    ci[n] = E2r[n] * ai[n] + E2i[n] * ar[n] + Qr[n] * xi + Qi[n] * xr;\n  }\n  nonlinear(S, cr, ci, Ncr, Nci);\n  const { Er, Ei, f1r, f1i, f2r, f2i, f3r, f3i } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const sr = Nar[n] + Nbr[n], si = Nai[n] + Nbi[n];\n    const nr =\n      Er[n] * vr[n] - Ei[n] * vi[n] +\n      (Nvr[n] * f1r[n] - Nvi[n] * f1i[n]) + 2 * (sr * f2r[n] - si * f2i[n]) + (Ncr[n] * f3r[n] - Nci[n] * f3i[n]);\n    const ni =\n      Er[n] * vi[n] + Ei[n] * vr[n] +\n      (Nvr[n] * f1i[n] + Nvi[n] * f1r[n]) + 2 * (sr * f2i[n] + si * f2r[n]) + (Ncr[n] * f3i[n] + Nci[n] * f3r[n]);\n    vr[n] = nr;\n    vi[n] = ni;\n  }\n  // u is real, so v_(64-n) is the conjugate of v_n. Round-off breaks that,\n  // and the broken part is invisible to u^2, so nothing holds it down: it\n  // grew at the linear rate of modes 2 and 3, 0.19 a time unit at L = 22,\n  // and blew the run up at t = 340. Folding it back each step keeps it at 0.\n  for (let n = 1; n \u003c N / 2; n++) {\n    const a = 0.5 * (vr[n] + vr[N - n]), b = 0.5 * (vi[n] - vi[N - n]);\n    vr[n] = vr[N - n] = a;\n    vi[n] = b;\n    vi[N - n] = -b;\n  }\n  vr[0] = vi[0] = vi[N / 2] = 0;\n}\n\n// u on the 64 grid points, one per column.\nfunction physical(S, out) {\n  const { tr, ti } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = S.vr[n]), (ti[n] = S.vi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) out[j] = tr[j] / N;\n}\n\nfunction advanceRow(S) {\n  for (let s = 0, n = round(ROW / STEP); s \u003c n; s++) step(S);\n}\n\n// The row just computed goes in at the head; `next` is one row ahead of it,\n// so the top of the panel can slide between the two.\nfunction pushRow(S) {\n  S.head = (S.head + H - 1) % H;\n  S.hist.set(S.next, S.head * N);\n  advanceRow(S);\n  physical(S, S.next);\n}\n\n// u is the slope of Sivashinsky's flame front, so a dent pushed into the\n// front shows in u as a dipole, up on one side and down on the other: the\n// derivative of a Gaussian, 4 columns wide, peaks of +-amp. It has no mean.\n// A plain bump had one, and taking it off shifted the whole row by 0.78,\n// a hard line straight across the diagram.\nfunction kick(S, x0, amp) {\n  const u = S.u;\n  physical(S, u);\n  for (let j = 0; j \u003c N; j++) {\n    let d = j - x0;\n    if (d > N / 2) d -= N;\n    if (d \u003c -N / 2) d += N;\n    const q = d / 4;\n    S.tr[j] = u[j] + amp * 1.6487 * q * exp(-0.5 * q * q);\n    S.ti[j] = 0;\n  }\n  fft(S.tr, S.ti, -1);\n  for (let n = 0; n \u003c N; n++) (S.vr[n] = S.tr[n]), (S.vi[n] = S.ti[n]);\n  S.vr[0] = S.vi[0] = 0;\n}\n\nfunction start(S) {\n  // Low modes with random phases, then PRERUN time units so the first\n  // frame is already chaos, then a full panel of history.\n  for (let n = 0; n \u003c N; n++) S.vr[n] = S.vi[n] = 0;\n  for (let n = 1; n \u003c= 6; n++) {\n    const ph = random() * TAU, a = (0.3 * N) / n;\n    S.vr[n] = a * cos(ph);\n    S.vi[n] = a * sin(ph);\n    S.vr[N - n] = a * cos(ph);\n    S.vi[N - n] = -a * sin(ph);\n  }\n  for (let s = 0, n = round(PRERUN / STEP); s \u003c n; s++) step(S);\n  physical(S, S.next);\n  for (let r = 0; r \u003c H; r++) pushRow(S);\n  S.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 22, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const L = cl(k[2], 22, 66), delta = cl(k[3], -1, 1);\n  if (L !== S.L || delta !== S.delta) {\n    S.L = L;\n    S.delta = delta;\n    coefficients(S);\n  }\n  if (!S.ready) start(S);\n  if (input.btnPressed && input.btnPressed[0]) kick(S, random() * N, 4);\n  S.acc += d * S.speed * RATE;\n  // 30 rows a second at 30 frames lands on 0.9999...; a hair of slack\n  // keeps it one row a frame instead of none and then two.\n  while (S.acc >= 1 - 1e-6) {\n    S.acc = Math.max(0, S.acc - 1);\n    pushRow(S);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  const lut = S.lut;\n  if (S.lutHue !== S.hue) {\n    // Two ramps of 257 steps, positive u then negative: black at zero,\n    // rising straight to full colour at |u| = 2.64, then paling to a tint at\n    // 3.3. A straight ramp keeps the steps between neighbours soft; the\n    // first, steeper ramp put a hard step on 23 percent of them.\n    for (let side = 0; side \u003c 2; side++) {\n      const h = S.hue + (side === 0 ? 0.5 : 0.86);\n      for (let i = 0; i \u003c= 256; i++) {\n        const a = i / 256, f = cl(a / 0.8, 0, 1), w = cl((a - 0.8) / 0.2, 0, 1);\n        hsv(h + 0.05 * (f - 1), 1 - 0.55 * w, f, lut, (side * 257 + i) * 3);\n      }\n    }\n    S.lutHue = S.hue;\n  }\n  // Pulses grow with the dispersion, |u| up to 3.5 at delta 0 and 4.7 at\n  // delta 1, so the map stretches with it and the pulses do not wash out pale.\n  const { hist, next, head, acc } = S, inv = 256 / (3.3 * (1 + 0.4 * abs(S.delta)));\n  for (let y = 0; y \u003c H; y++) {\n    // Display row y is `acc` of the way from history row y - 1 to row y,\n    // where row -1 is the one computed ahead.\n    const a = y - acc, r0 = floor(a), t = a - r0;\n    const A = r0 \u003c 0 ? next : null, o0 = ((head + r0 + H) % H) * N, o1 = ((head + r0 + 1) % H) * N;\n    for (let x = 0; x \u003c W; x++) {\n      const u0 = A ? A[x] : hist[o0 + x], u1 = r0 + 1 \u003c H ? hist[o1 + x] : u0;\n      const u = u0 + (u1 - u0) * t, i = Math.min(256, round(abs(u) * inv)), o = ((u \u003c 0 ? 257 : 0) + i) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal."},{"name":"Speed","min":0.2,"max":3,"about":"Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s."},{"name":"Length","min":22,"max":66,"about":"The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge."},{"name":"Dispersion","min":-1,"max":1,"about":"A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative."}],"start":[0,2,22,0.06],"measures":{"motion":2.1967,"detail":0.0813,"edges":0.1461,"complexity":1.9024,"coverage":0.8129,"colour":0.4992,"drift":0.2147},"knobResponse":[0.3397,0.3051,0.3397,0.3324]},{"slug":"lakes-of-wada","title":"Lakes of Wada","family":"topology","round":34,"note":"섬 안의 두 호수와 바다가 차례로 1 LED 운하를 파요. 마른 땅이 파는 물에서 32, 16, 8, … LED 안에 들 때까지 차례마다 거리를 반으로 줄여 파고 서로 다른 물은 끝내 닿지 않아서, 다 판 섬은 하늘색 바다와 분홍, 연두 호수 사이에 가는 땅 벽만 남은 미로가 돼요. K3 은 호수를 다섯까지 늘리고, K1 을 누르면 섬이 잠기고 새 섬이 솟아요.","idea":"An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.","buttons":"K1 tap floods the island now and raises a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Lakes of Wada\n// Family:  topology\n// Idea:    An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Lakes of Wada (Kunizō Yoneyama, 1917, after Takeo Wada), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1\n//\n// Knob 1: Hue. Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink.\n// Knob 2: Speed. At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds.\n// Knob 3: Lakes. How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters.\n// Knob 4: Wander. How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends.\n// Buttons: K1 tap floods the island now and raises a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst LAND = -1, BIG = 30000;\n// Canal heads digging at once for the water whose turn it is.\nconst TIPS = 3;\n// The first turn's distance; every later turn halves it, down to 1.\nconst D0 = 32;\n// LEDs dug a second for each unit of Speed.\nconst RATE = 110;\n// Distance searches a frame may run, so a late turn full of short canals\n// spreads over frames instead of stalling one.\nconst SEARCHES = 14;\n// LEDs a turn digs before it starts no new canal, a third of it once the\n// distance is 4 or less, so the water whose turn comes at a fine distance\n// cannot take the whole island.\nconst TURN_CAP = 160;\n// Hue of the sea at Hue 0; the lakes follow round the wheel.\nconst H0 = 0.56;\n// Seconds of digging before the first frame, and the waters' saturation.\n// Six seconds at a RATE of 80 and full colour put the study's colour at 0.723\n// and its motion at 0.017, both past the ends of their map axes, which\n// emptied six cells of the map.\nconst PRE = 3, SAT = 0.88;\nconst NB = [1, -1, W, -W], ANG = [0, PI, PI / 2, -PI / 2];\nconst wrap = (a) => a - 2 * PI * floor((a + PI) / (2 * PI));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, wander: 0.06, warm: false, clock: 0, acc: 0,\n    phase: \"dig\", pt: 0, stage: 0, turnDug: 0, roundDug: 0, roundTurns: 0, stageSteps: 0, searches: 0, rr: 0,\n    wat: new Int8Array(N), born: new Float32Array(N), give: new Uint8Array(N),\n    D: new Int16Array(N), C: new Int16Array(N), cw: -1, clr: 2, F: new Float32Array(N), FD: new Int16Array(N), fdMax: 1, fMax: 1,\n    Q: new Int32Array(N), tips: [], c: [0, 0, 0], next: null,\n  };\n  for (let k = 0; k \u003c TIPS; k++) params.s.tips.push({ on: false, sleep: false, pos: 0, tgt: 0, T: new Int16Array(N), steps: 0, cap: 0, h: 0 });\n}\n\n// ---------- the island ----------\n\n// A smooth random field on a coarse lattice, eased between lattice points.\nfunction field(gx, gy) {\n  const g = new Float32Array((gx + 1) * (gy + 1));\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / (W - 1)) * gx, v = (y / (H - 1)) * gy;\n      const i = min(gx - 1, floor(u)), j = min(gy - 1, floor(v));\n      const fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * (gx + 1) + i], b = g[j * (gx + 1) + i + 1], c = g[(j + 1) * (gx + 1) + i], d = g[(j + 1) * (gx + 1) + i + 1];\n      out[y * W + x] = (a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv;\n    }\n  return out;\n}\n\n// A new island with n - 1 lakes: water 0 is the sea, 1..n-1 the lakes.\n// Every water is kept at least two LEDs from every other, so no two touch\n// even at a corner.\nfunction makeIsland(n) {\n  const wat = new Int8Array(N), f = new Float32Array(N), Q = new Int32Array(N);\n  const a = field(5, 9), b = field(11, 21);\n  const rx = 29.5 + random() * 2, ry = 59 + random() * 3, cx = 31.5 + (random() - 0.5) * 3, cy = 63.5 + (random() - 0.5) * 6;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = (x - cx) / rx, dy = (y - cy) / ry;\n      // The coast bends away from the panel's rim instead of running along it.\n      const rim = min(x, W - 1 - x, y, H - 1 - y);\n      f[p] = 0.6 * (1 - dx * dx - dy * dy) + 0.32 * a[p] + 0.12 * b[p] - 0.5 * (1 - sm(1.5, 6, rim));\n      const edge = rim \u003c 2;\n      wat[p] = f[p] > 0 && !edge ? LAND : 0;\n    }\n  // Keep the largest piece of land, and fill any pond the field left in it.\n  const lab = new Int32Array(N).fill(-1);\n  let best = -1, bestSize = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (wat[s] !== LAND || lab[s] >= 0) continue;\n    let qh = 0, qt = 0;\n    Q[qt++] = s;\n    lab[s] = s;\n    while (qh \u003c qt) {\n      const p = Q[qh++], x = p % W;\n      for (let k = 0; k \u003c 4; k++) {\n        const q = p + NB[k];\n        if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n        if (wat[q] === LAND && lab[q] \u003c 0) (lab[q] = s), (Q[qt++] = q);\n      }\n    }\n    if (qt > bestSize) (bestSize = qt), (best = s);\n  }\n  for (let p = 0; p \u003c N; p++) if (wat[p] === LAND && lab[p] !== best) wat[p] = 0;\n  const sea = new Uint8Array(N);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0;\n    if ((x === 0 || y === 0 || x === W - 1 || y === H - 1) && wat[p] !== LAND) (sea[p] = 1), (Q[qt++] = p);\n  }\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (!sea[q] && wat[q] !== LAND) (sea[q] = 1), (Q[qt++] = q);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) if (!sea[p]) wat[p] = LAND;\n  // Distance from the coast, through the land.\n  const cd = new Int16Array(N).fill(BIG);\n  qh = qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (cd[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && cd[q] === BIG) (cd[q] = cd[p] + 1), (Q[qt++] = q);\n    }\n  }\n  // The lakes, spread over the island: each the best of 60 tries, as far as\n  // it can be from the lakes already placed.\n  const lakes = [];\n  for (let w = 1; w \u003c n; w++) {\n    const r = 4 + random() * 2;\n    let bx = -1, by = -1, bs = -1;\n    for (let k = 0; k \u003c 60; k++) {\n      const p = floor(random() * N);\n      if (wat[p] !== LAND || cd[p] \u003c r + 9) continue;\n      const x = p % W, y = (p / W) | 0;\n      let s = 200 + random();\n      for (const l of lakes) s = min(s, sqrt((x - l.x) ** 2 + (y - l.y) ** 2) - l.r - r);\n      if (s > bs) (bs = s), (bx = x), (by = y);\n    }\n    if (bx \u003c 0) continue;\n    lakes.push({ x: bx, y: by, r });\n    const ph = random() * 6.28;\n    for (let y = max(2, floor(by - r - 2)); y \u003c= min(H - 3, by + r + 2); y++)\n      for (let x = max(2, floor(bx - r - 2)); x \u003c= min(W - 3, bx + r + 2); x++) {\n        const p = y * W + x, dx = x - bx, dy = y - by;\n        if (wat[p] !== LAND || cd[p] \u003c 3) continue;\n        const th = atan2(dy, dx);\n        if (sqrt(dx * dx + dy * dy) > r * (1 + 0.12 * sin(2 * th + ph) + 0.1 * sin(3 * th + 2 * ph))) continue;\n        let ok = true;\n        for (let v = -2; v \u003c= 2 && ok; v++) for (let u = -2; u \u003c= 2; u++) if (wat[p + v * W + u] > 0 && wat[p + v * W + u] !== w) ok = false;\n        if (ok) wat[p] = w;\n      }\n  }\n  let fMax = 0;\n  for (let p = 0; p \u003c N; p++) fMax = max(fMax, f[p]);\n  return { wat, f, fMax };\n}\n\nfunction begin(S, isl) {\n  S.wat.set(isl.wat);\n  S.F.set(isl.f);\n  S.fMax = isl.fMax;\n  S.born.fill(-99);\n  S.give.fill(0);\n  S.stage = 0;\n  S.cw = -1;\n  S.turnDug = 0;\n  S.roundDug = 0;\n  S.roundTurns = 0;\n  S.stageSteps = 0;\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n}\n\n// ---------- digging ----------\n\nconst turnWater = (S) => (S.stage + 1) % S.n;\nconst turnDist = (S) => max(1, floor(D0 / 2 ** S.stage));\n// How far a canal keeps from the other waters: a quarter of the turn's\n// distance, and never closer than one LED of land between. A long early\n// canal that ran up to another water's shore would close the way past it.\nconst turnClear = (S) => max(2, floor(turnDist(S) / 4));\n\n// Chebyshev distance from every cell to the nearest water other than w,\n// into S.C. The others hold still during w's turn, so once a turn is enough.\nfunction clearance(S, w) {\n  const { wat, C, Q } = S;\n  C.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] !== LAND && wat[p] !== w) (C[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W, y = (p / W) | 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        const u = x + dx, v = y + dy;\n        if (u \u003c 0 || u >= W || v \u003c 0 || v >= H) continue;\n        const q = v * W + u;\n        if (C[q] === BIG) (C[q] = C[p] + 1), (Q[qt++] = q);\n      }\n  }\n  S.cw = w;\n}\n\n// Land a canal of w may take at all: inside the panel's rim and clear of\n// the other waters.\nconst free = (S, c) => S.wat[c] === LAND && S.C[c] >= S.clr && c % W > 0 && c % W \u003c W - 1 && c >= W && c \u003c N - W;\n\n// May water w dig land cell c, coming from its own cell t? Of c's eight\n// neighbours only t and the two cells beside t may be water, so a canal\n// never runs alongside itself or another canal of its own water.\nfunction canDig(S, c, t, w) {\n  if (!free(S, c)) return false;\n  const wat = S.wat, cx = c % W, cy = (c / W) | 0, ex = (t % W) - cx, ey = ((t / W) | 0) - cy;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      if ((!dx && !dy) || wat[c + dy * W + dx] === LAND) continue;\n      // t itself, or a cell beside t across the canal's line.\n      if ((ex !== 0 && dx === ex) || (ey !== 0 && dy === ey)) continue;\n      return false;\n    }\n  return true;\n}\n\n// Land with no water at all among its eight neighbours: a canal can pass.\nfunction open(S, c) {\n  if (!free(S, c)) return false;\n  const wat = S.wat;\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) if (wat[c + dy * W + dx] !== LAND) return false;\n  return true;\n}\n\n// Distance through the land from water w (and from the targets the other\n// heads are already digging toward), into S.D.\nfunction distances(S, w, mine) {\n  const { wat, D, Q } = S;\n  D.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === w) (D[p] = 0), (Q[qt++] = p);\n  for (const t of S.tips) if (t !== mine && t.on && D[t.tgt] === BIG) (D[t.tgt] = 0), (Q[qt++] = t.tgt);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && D[q] === BIG) (D[q] = D[p] + 1), (Q[qt++] = q);\n    }\n  }\n}\n\nfunction dig(S, c, w) {\n  S.wat[c] = w;\n  S.born[c] = S.clock;\n  S.turnDug++;\n}\n\nfunction finish(S, tip) {\n  tip.on = false;\n  S.give[tip.tgt] = 1;\n  for (const t of S.tips) t.sleep = false;\n}\n\n// A new canal for this head: the land farthest from the water whose turn it\n// is, and the nearest place on that water's shore to set out from.\n// Returns 1 if it dug, 0 if this turn has nothing left for it, -1 to retry.\nfunction startCanal(S, tip) {\n  const w = turnWater(S), d = turnDist(S), { D, give, Q } = S;\n  S.searches++;\n  if (S.cw !== w) clearance(S, w);\n  S.clr = turnClear(S);\n  distances(S, w, tip);\n  let m = d + 1, cnt = 0, X = -1;\n  for (let p = 0; p \u003c N; p++) {\n    const v = D[p];\n    if (v \u003c m || v === BIG || give[p] || !free(S, p)) continue;\n    if (v > m) (m = v), (cnt = 0);\n    if (random() * ++cnt \u003c 1) X = p;\n  }\n  if (X \u003c 0) return 0;\n  // Distance to X through land a canal can cross; the first cells reached\n  // that w can dig from its shore are where the canal may start.\n  const T = tip.T;\n  T.fill(BIG);\n  let qh = 0, qt = 0, start = -1, from = -1, tmin = BIG, seen = 0;\n  T[X] = 0;\n  Q[qt++] = X;\n  const tryStart = (c) => {\n    for (let k = 0; k \u003c 4; k++) {\n      const t = c + NB[k];\n      if (S.wat[t] === w && canDig(S, c, t, w) && random() * ++seen \u003c 1) (start = c), (from = t), (tmin = T[c]);\n    }\n  };\n  tryStart(X);\n  while (qh \u003c qt && T[Q[qh]] \u003c= tmin) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG) continue;\n      if (open(S, q)) {\n        T[q] = T[p] + 1;\n        Q[qt++] = q;\n      } else if (S.wat[q] === LAND) {\n        T[q] = T[p] + 1;\n        if (T[q] \u003c= tmin) tryStart(q);\n      }\n    }\n  }\n  if (start \u003c 0) {\n    // No way in from w's shore: none of this land counts for the turn.\n    for (let i = 0; i \u003c qt; i++) give[Q[i]] = 1;\n    give[X] = 1;\n    return -1;\n  }\n  // Finish the map past the start, so a wandering head still knows its way.\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG || !open(S, q)) continue;\n      T[q] = T[p] + 1;\n      Q[qt++] = q;\n    }\n  }\n  dig(S, start, w);\n  Object.assign(tip, { on: true, pos: start, tgt: X, steps: 1, cap: 2 * T[start] + 12 });\n  tip.h = atan2(((start / W) | 0) - ((from / W) | 0), (start % W) - (from % W));\n  if (T[start] === 0) finish(S, tip);\n  return 1;\n}\n\n// One LED more for an active head: toward X along the land map, with the\n// heading drifting as Wander allows.\nfunction extend(S, tip) {\n  const w = turnWater(S), t = tip.pos, T = tip.T, u = S.wander;\n  const beta = 3.2 - 2.4 * u, kap = 0.5 + 2.0 * u, noise = 0.12 + 1.1 * u;\n  let best = -1, bs = -1e9;\n  for (let k = 0; k \u003c 4; k++) {\n    const c = t + NB[k];\n    if (!canDig(S, c, t, w)) continue;\n    const dT = T[c] === BIG ? 3 : T[c] - T[t];\n    const s = -beta * dT + kap * cos(ANG[k] - tip.h) + noise * random();\n    if (s > bs) (bs = s), (best = k);\n  }\n  if (best \u003c 0) {\n    finish(S, tip);\n    return false;\n  }\n  const c = t + NB[best];\n  dig(S, c, w);\n  tip.pos = c;\n  tip.steps++;\n  const tx = tip.tgt % W, ty = (tip.tgt / W) | 0, cx = c % W, cy = (c / W) | 0;\n  tip.h += 0.25 * wrap(ANG[best] - tip.h) + 0.12 * (1 - u) * wrap(atan2(ty - cy, tx - cx) - tip.h) + (random() - 0.5) * 1.3 * u;\n  if (T[c] === 0 || tip.steps >= tip.cap) finish(S, tip);\n  return true;\n}\n\nfunction nextTurn(S) {\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n  S.give.fill(0);\n  S.cw = -1;\n  // A whole round of turns at distance 1 that found almost nothing to dig:\n  // the labyrinth is finished.\n  if (turnDist(S) === 1) {\n    S.roundDug += S.turnDug;\n    if (++S.roundTurns >= S.n) {\n      if (S.roundDug \u003c 4) {\n        S.phase = \"hold\";\n        S.pt = 0;\n      }\n      S.roundDug = 0;\n      S.roundTurns = 0;\n    }\n  }\n  S.stage++;\n  S.turnDug = 0;\n  S.stageSteps = 0;\n}\n\n// One step of digging: one LED for one head, round robin. Once the turn has\n// dug its share no new canal starts, but the heads finish the ones they are\n// on, so a long canal into the far land is not left half dug.\nfunction step(S, limited) {\n  if (++S.stageSteps > 1400) {\n    nextTurn(S);\n    return;\n  }\n  const full = S.turnDug >= (turnDist(S) > 4 ? TURN_CAP : TURN_CAP / 3);\n  for (let tries = 0; tries \u003c TIPS * 2; tries++) {\n    const tip = S.tips[(S.rr = (S.rr + 1) % TIPS)];\n    if (tip.on) {\n      if (extend(S, tip)) return;\n      continue;\n    }\n    if (tip.sleep || full) continue;\n    if (limited && S.searches >= SEARCHES) return;\n    const r = startCanal(S, tip);\n    if (r === 1) return;\n    if (r === 0) tip.sleep = true;\n  }\n  if (S.tips.every((t) => !t.on && (t.sleep || full))) nextTurn(S);\n}\n\n// ---------- flood ----------\n\n// Distance from the sea through everything else, for the flood front.\nfunction floodMap(S) {\n  const { wat, FD, Q } = S;\n  FD.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (FD[p] = 0), (Q[qt++] = p);\n  let m = 1;\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N || FD[q] !== BIG) continue;\n      FD[q] = FD[p] + 1;\n      m = max(m, FD[q]);\n      Q[qt++] = q;\n    }\n  }\n  S.fdMax = m;\n}\n\nfunction startFlood(S) {\n  floodMap(S);\n  for (const t of S.tips) t.on = false;\n  S.phase = \"flood\";\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wander = cl(k[3], 0, 1);\n  const n = round(cl(k[2], 3, 5));\n  if (!S.warm) {\n    S.n = n;\n    begin(S, makeIsland(n));\n    // Open on an island the waters have been digging for PRE seconds at\n    // this Speed.\n    const pre = round(PRE * S.speed * RATE);\n    for (let i = 0; i \u003c pre; i++) step(S, false);\n    S.clock = 10;\n    S.warm = true;\n  } else if (n !== S.n && S.phase !== \"flood\" && S.phase !== \"rise\") {\n    S.next = n;\n    startFlood(S);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== \"flood\" && S.phase !== \"rise\") startFlood(S);\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  S.pt += ds;\n  if (S.phase === \"dig\") {\n    S.acc += d * S.speed * RATE;\n    S.searches = 0;\n    let steps = 0;\n    while (S.acc >= 1 && steps \u003c 200 && S.phase === \"dig\") {\n      step(S, true);\n      S.acc -= 1;\n      steps++;\n      if (S.searches >= SEARCHES) {\n        S.acc = min(S.acc, 2);\n        break;\n      }\n    }\n  } else if (S.phase === \"hold\" && S.pt > 3) startFlood(S);\n  else if (S.phase === \"flood\" && S.pt > 1.2) {\n    if (S.next) (S.n = S.next), (S.next = null);\n    begin(S, makeIsland(S.n));\n    S.phase = \"rise\";\n    S.pt = 0;\n  } else if (S.phase === \"rise\" && S.pt > 1) {\n    S.phase = \"dig\";\n    S.pt = 0;\n    S.acc = 0;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { wat, born, c, n } = S;\n  const front = S.phase === \"flood\" ? S.fdMax * sm(0, 1.1, S.pt) : -1;\n  const level = S.phase === \"rise\" ? S.fMax * (1 - sm(0, 0.95, S.pt)) : -1;\n  const tipAt = new Set();\n  for (const t of S.tips) if (t.on) tipAt.add(t.pos);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let w = wat[p], glow = 0;\n      if (front >= 0 && S.FD[p] \u003c= front) {\n        w = 0;\n        if (S.FD[p] > 0) glow = 0.7 * sm(4, 0, front - S.FD[p]);\n      } else if (level >= 0 && S.F[p] \u003c= level) {\n        w = 0;\n        glow = 0.6 * sm(0.06, 0, level - S.F[p]) * (S.F[p] > 0 ? 1 : 0);\n      }\n      if (w === LAND) {\n        display.setPixel(x, y, 14, 12, 10);\n        continue;\n      }\n      if (front \u003c 0 && level \u003c 0) glow = tipAt.has(p) ? 1 : exp(-(S.clock - born[p]) / 0.22);\n      hsv(S.hue + H0 + w / n, SAT, 1, c);\n      const v = 255, s = 1 - 0.85 * glow;\n      display.setPixel(x, y, round(v * (c[0] * s + 1 - s)), round(v * (c[1] * s + 1 - s)), round(v * (c[2] * s + 1 - s)));\n    }\n}\n","layer":{"id":"layer-lakes-of-wada","type":"code","name":"lakes-of-wada","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lakes of Wada\n// Family:  topology\n// Idea:    An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Lakes of Wada (Kunizō Yoneyama, 1917, after Takeo Wada), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1\n//\n// Knob 1: Hue. Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink.\n// Knob 2: Speed. At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds.\n// Knob 3: Lakes. How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters.\n// Knob 4: Wander. How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends.\n// Buttons: K1 tap floods the island now and raises a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst LAND = -1, BIG = 30000;\n// Canal heads digging at once for the water whose turn it is.\nconst TIPS = 3;\n// The first turn's distance; every later turn halves it, down to 1.\nconst D0 = 32;\n// LEDs dug a second for each unit of Speed.\nconst RATE = 110;\n// Distance searches a frame may run, so a late turn full of short canals\n// spreads over frames instead of stalling one.\nconst SEARCHES = 14;\n// LEDs a turn digs before it starts no new canal, a third of it once the\n// distance is 4 or less, so the water whose turn comes at a fine distance\n// cannot take the whole island.\nconst TURN_CAP = 160;\n// Hue of the sea at Hue 0; the lakes follow round the wheel.\nconst H0 = 0.56;\n// Seconds of digging before the first frame, and the waters' saturation.\n// Six seconds at a RATE of 80 and full colour put the study's colour at 0.723\n// and its motion at 0.017, both past the ends of their map axes, which\n// emptied six cells of the map.\nconst PRE = 3, SAT = 0.88;\nconst NB = [1, -1, W, -W], ANG = [0, PI, PI / 2, -PI / 2];\nconst wrap = (a) => a - 2 * PI * floor((a + PI) / (2 * PI));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, wander: 0.06, warm: false, clock: 0, acc: 0,\n    phase: \"dig\", pt: 0, stage: 0, turnDug: 0, roundDug: 0, roundTurns: 0, stageSteps: 0, searches: 0, rr: 0,\n    wat: new Int8Array(N), born: new Float32Array(N), give: new Uint8Array(N),\n    D: new Int16Array(N), C: new Int16Array(N), cw: -1, clr: 2, F: new Float32Array(N), FD: new Int16Array(N), fdMax: 1, fMax: 1,\n    Q: new Int32Array(N), tips: [], c: [0, 0, 0], next: null,\n  };\n  for (let k = 0; k \u003c TIPS; k++) params.s.tips.push({ on: false, sleep: false, pos: 0, tgt: 0, T: new Int16Array(N), steps: 0, cap: 0, h: 0 });\n}\n\n// ---------- the island ----------\n\n// A smooth random field on a coarse lattice, eased between lattice points.\nfunction field(gx, gy) {\n  const g = new Float32Array((gx + 1) * (gy + 1));\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / (W - 1)) * gx, v = (y / (H - 1)) * gy;\n      const i = min(gx - 1, floor(u)), j = min(gy - 1, floor(v));\n      const fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * (gx + 1) + i], b = g[j * (gx + 1) + i + 1], c = g[(j + 1) * (gx + 1) + i], d = g[(j + 1) * (gx + 1) + i + 1];\n      out[y * W + x] = (a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv;\n    }\n  return out;\n}\n\n// A new island with n - 1 lakes: water 0 is the sea, 1..n-1 the lakes.\n// Every water is kept at least two LEDs from every other, so no two touch\n// even at a corner.\nfunction makeIsland(n) {\n  const wat = new Int8Array(N), f = new Float32Array(N), Q = new Int32Array(N);\n  const a = field(5, 9), b = field(11, 21);\n  const rx = 29.5 + random() * 2, ry = 59 + random() * 3, cx = 31.5 + (random() - 0.5) * 3, cy = 63.5 + (random() - 0.5) * 6;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = (x - cx) / rx, dy = (y - cy) / ry;\n      // The coast bends away from the panel's rim instead of running along it.\n      const rim = min(x, W - 1 - x, y, H - 1 - y);\n      f[p] = 0.6 * (1 - dx * dx - dy * dy) + 0.32 * a[p] + 0.12 * b[p] - 0.5 * (1 - sm(1.5, 6, rim));\n      const edge = rim \u003c 2;\n      wat[p] = f[p] > 0 && !edge ? LAND : 0;\n    }\n  // Keep the largest piece of land, and fill any pond the field left in it.\n  const lab = new Int32Array(N).fill(-1);\n  let best = -1, bestSize = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (wat[s] !== LAND || lab[s] >= 0) continue;\n    let qh = 0, qt = 0;\n    Q[qt++] = s;\n    lab[s] = s;\n    while (qh \u003c qt) {\n      const p = Q[qh++], x = p % W;\n      for (let k = 0; k \u003c 4; k++) {\n        const q = p + NB[k];\n        if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n        if (wat[q] === LAND && lab[q] \u003c 0) (lab[q] = s), (Q[qt++] = q);\n      }\n    }\n    if (qt > bestSize) (bestSize = qt), (best = s);\n  }\n  for (let p = 0; p \u003c N; p++) if (wat[p] === LAND && lab[p] !== best) wat[p] = 0;\n  const sea = new Uint8Array(N);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0;\n    if ((x === 0 || y === 0 || x === W - 1 || y === H - 1) && wat[p] !== LAND) (sea[p] = 1), (Q[qt++] = p);\n  }\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (!sea[q] && wat[q] !== LAND) (sea[q] = 1), (Q[qt++] = q);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) if (!sea[p]) wat[p] = LAND;\n  // Distance from the coast, through the land.\n  const cd = new Int16Array(N).fill(BIG);\n  qh = qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (cd[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && cd[q] === BIG) (cd[q] = cd[p] + 1), (Q[qt++] = q);\n    }\n  }\n  // The lakes, spread over the island: each the best of 60 tries, as far as\n  // it can be from the lakes already placed.\n  const lakes = [];\n  for (let w = 1; w \u003c n; w++) {\n    const r = 4 + random() * 2;\n    let bx = -1, by = -1, bs = -1;\n    for (let k = 0; k \u003c 60; k++) {\n      const p = floor(random() * N);\n      if (wat[p] !== LAND || cd[p] \u003c r + 9) continue;\n      const x = p % W, y = (p / W) | 0;\n      let s = 200 + random();\n      for (const l of lakes) s = min(s, sqrt((x - l.x) ** 2 + (y - l.y) ** 2) - l.r - r);\n      if (s > bs) (bs = s), (bx = x), (by = y);\n    }\n    if (bx \u003c 0) continue;\n    lakes.push({ x: bx, y: by, r });\n    const ph = random() * 6.28;\n    for (let y = max(2, floor(by - r - 2)); y \u003c= min(H - 3, by + r + 2); y++)\n      for (let x = max(2, floor(bx - r - 2)); x \u003c= min(W - 3, bx + r + 2); x++) {\n        const p = y * W + x, dx = x - bx, dy = y - by;\n        if (wat[p] !== LAND || cd[p] \u003c 3) continue;\n        const th = atan2(dy, dx);\n        if (sqrt(dx * dx + dy * dy) > r * (1 + 0.12 * sin(2 * th + ph) + 0.1 * sin(3 * th + 2 * ph))) continue;\n        let ok = true;\n        for (let v = -2; v \u003c= 2 && ok; v++) for (let u = -2; u \u003c= 2; u++) if (wat[p + v * W + u] > 0 && wat[p + v * W + u] !== w) ok = false;\n        if (ok) wat[p] = w;\n      }\n  }\n  let fMax = 0;\n  for (let p = 0; p \u003c N; p++) fMax = max(fMax, f[p]);\n  return { wat, f, fMax };\n}\n\nfunction begin(S, isl) {\n  S.wat.set(isl.wat);\n  S.F.set(isl.f);\n  S.fMax = isl.fMax;\n  S.born.fill(-99);\n  S.give.fill(0);\n  S.stage = 0;\n  S.cw = -1;\n  S.turnDug = 0;\n  S.roundDug = 0;\n  S.roundTurns = 0;\n  S.stageSteps = 0;\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n}\n\n// ---------- digging ----------\n\nconst turnWater = (S) => (S.stage + 1) % S.n;\nconst turnDist = (S) => max(1, floor(D0 / 2 ** S.stage));\n// How far a canal keeps from the other waters: a quarter of the turn's\n// distance, and never closer than one LED of land between. A long early\n// canal that ran up to another water's shore would close the way past it.\nconst turnClear = (S) => max(2, floor(turnDist(S) / 4));\n\n// Chebyshev distance from every cell to the nearest water other than w,\n// into S.C. The others hold still during w's turn, so once a turn is enough.\nfunction clearance(S, w) {\n  const { wat, C, Q } = S;\n  C.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] !== LAND && wat[p] !== w) (C[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W, y = (p / W) | 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        const u = x + dx, v = y + dy;\n        if (u \u003c 0 || u >= W || v \u003c 0 || v >= H) continue;\n        const q = v * W + u;\n        if (C[q] === BIG) (C[q] = C[p] + 1), (Q[qt++] = q);\n      }\n  }\n  S.cw = w;\n}\n\n// Land a canal of w may take at all: inside the panel's rim and clear of\n// the other waters.\nconst free = (S, c) => S.wat[c] === LAND && S.C[c] >= S.clr && c % W > 0 && c % W \u003c W - 1 && c >= W && c \u003c N - W;\n\n// May water w dig land cell c, coming from its own cell t? Of c's eight\n// neighbours only t and the two cells beside t may be water, so a canal\n// never runs alongside itself or another canal of its own water.\nfunction canDig(S, c, t, w) {\n  if (!free(S, c)) return false;\n  const wat = S.wat, cx = c % W, cy = (c / W) | 0, ex = (t % W) - cx, ey = ((t / W) | 0) - cy;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      if ((!dx && !dy) || wat[c + dy * W + dx] === LAND) continue;\n      // t itself, or a cell beside t across the canal's line.\n      if ((ex !== 0 && dx === ex) || (ey !== 0 && dy === ey)) continue;\n      return false;\n    }\n  return true;\n}\n\n// Land with no water at all among its eight neighbours: a canal can pass.\nfunction open(S, c) {\n  if (!free(S, c)) return false;\n  const wat = S.wat;\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) if (wat[c + dy * W + dx] !== LAND) return false;\n  return true;\n}\n\n// Distance through the land from water w (and from the targets the other\n// heads are already digging toward), into S.D.\nfunction distances(S, w, mine) {\n  const { wat, D, Q } = S;\n  D.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === w) (D[p] = 0), (Q[qt++] = p);\n  for (const t of S.tips) if (t !== mine && t.on && D[t.tgt] === BIG) (D[t.tgt] = 0), (Q[qt++] = t.tgt);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && D[q] === BIG) (D[q] = D[p] + 1), (Q[qt++] = q);\n    }\n  }\n}\n\nfunction dig(S, c, w) {\n  S.wat[c] = w;\n  S.born[c] = S.clock;\n  S.turnDug++;\n}\n\nfunction finish(S, tip) {\n  tip.on = false;\n  S.give[tip.tgt] = 1;\n  for (const t of S.tips) t.sleep = false;\n}\n\n// A new canal for this head: the land farthest from the water whose turn it\n// is, and the nearest place on that water's shore to set out from.\n// Returns 1 if it dug, 0 if this turn has nothing left for it, -1 to retry.\nfunction startCanal(S, tip) {\n  const w = turnWater(S), d = turnDist(S), { D, give, Q } = S;\n  S.searches++;\n  if (S.cw !== w) clearance(S, w);\n  S.clr = turnClear(S);\n  distances(S, w, tip);\n  let m = d + 1, cnt = 0, X = -1;\n  for (let p = 0; p \u003c N; p++) {\n    const v = D[p];\n    if (v \u003c m || v === BIG || give[p] || !free(S, p)) continue;\n    if (v > m) (m = v), (cnt = 0);\n    if (random() * ++cnt \u003c 1) X = p;\n  }\n  if (X \u003c 0) return 0;\n  // Distance to X through land a canal can cross; the first cells reached\n  // that w can dig from its shore are where the canal may start.\n  const T = tip.T;\n  T.fill(BIG);\n  let qh = 0, qt = 0, start = -1, from = -1, tmin = BIG, seen = 0;\n  T[X] = 0;\n  Q[qt++] = X;\n  const tryStart = (c) => {\n    for (let k = 0; k \u003c 4; k++) {\n      const t = c + NB[k];\n      if (S.wat[t] === w && canDig(S, c, t, w) && random() * ++seen \u003c 1) (start = c), (from = t), (tmin = T[c]);\n    }\n  };\n  tryStart(X);\n  while (qh \u003c qt && T[Q[qh]] \u003c= tmin) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG) continue;\n      if (open(S, q)) {\n        T[q] = T[p] + 1;\n        Q[qt++] = q;\n      } else if (S.wat[q] === LAND) {\n        T[q] = T[p] + 1;\n        if (T[q] \u003c= tmin) tryStart(q);\n      }\n    }\n  }\n  if (start \u003c 0) {\n    // No way in from w's shore: none of this land counts for the turn.\n    for (let i = 0; i \u003c qt; i++) give[Q[i]] = 1;\n    give[X] = 1;\n    return -1;\n  }\n  // Finish the map past the start, so a wandering head still knows its way.\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG || !open(S, q)) continue;\n      T[q] = T[p] + 1;\n      Q[qt++] = q;\n    }\n  }\n  dig(S, start, w);\n  Object.assign(tip, { on: true, pos: start, tgt: X, steps: 1, cap: 2 * T[start] + 12 });\n  tip.h = atan2(((start / W) | 0) - ((from / W) | 0), (start % W) - (from % W));\n  if (T[start] === 0) finish(S, tip);\n  return 1;\n}\n\n// One LED more for an active head: toward X along the land map, with the\n// heading drifting as Wander allows.\nfunction extend(S, tip) {\n  const w = turnWater(S), t = tip.pos, T = tip.T, u = S.wander;\n  const beta = 3.2 - 2.4 * u, kap = 0.5 + 2.0 * u, noise = 0.12 + 1.1 * u;\n  let best = -1, bs = -1e9;\n  for (let k = 0; k \u003c 4; k++) {\n    const c = t + NB[k];\n    if (!canDig(S, c, t, w)) continue;\n    const dT = T[c] === BIG ? 3 : T[c] - T[t];\n    const s = -beta * dT + kap * cos(ANG[k] - tip.h) + noise * random();\n    if (s > bs) (bs = s), (best = k);\n  }\n  if (best \u003c 0) {\n    finish(S, tip);\n    return false;\n  }\n  const c = t + NB[best];\n  dig(S, c, w);\n  tip.pos = c;\n  tip.steps++;\n  const tx = tip.tgt % W, ty = (tip.tgt / W) | 0, cx = c % W, cy = (c / W) | 0;\n  tip.h += 0.25 * wrap(ANG[best] - tip.h) + 0.12 * (1 - u) * wrap(atan2(ty - cy, tx - cx) - tip.h) + (random() - 0.5) * 1.3 * u;\n  if (T[c] === 0 || tip.steps >= tip.cap) finish(S, tip);\n  return true;\n}\n\nfunction nextTurn(S) {\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n  S.give.fill(0);\n  S.cw = -1;\n  // A whole round of turns at distance 1 that found almost nothing to dig:\n  // the labyrinth is finished.\n  if (turnDist(S) === 1) {\n    S.roundDug += S.turnDug;\n    if (++S.roundTurns >= S.n) {\n      if (S.roundDug \u003c 4) {\n        S.phase = \"hold\";\n        S.pt = 0;\n      }\n      S.roundDug = 0;\n      S.roundTurns = 0;\n    }\n  }\n  S.stage++;\n  S.turnDug = 0;\n  S.stageSteps = 0;\n}\n\n// One step of digging: one LED for one head, round robin. Once the turn has\n// dug its share no new canal starts, but the heads finish the ones they are\n// on, so a long canal into the far land is not left half dug.\nfunction step(S, limited) {\n  if (++S.stageSteps > 1400) {\n    nextTurn(S);\n    return;\n  }\n  const full = S.turnDug >= (turnDist(S) > 4 ? TURN_CAP : TURN_CAP / 3);\n  for (let tries = 0; tries \u003c TIPS * 2; tries++) {\n    const tip = S.tips[(S.rr = (S.rr + 1) % TIPS)];\n    if (tip.on) {\n      if (extend(S, tip)) return;\n      continue;\n    }\n    if (tip.sleep || full) continue;\n    if (limited && S.searches >= SEARCHES) return;\n    const r = startCanal(S, tip);\n    if (r === 1) return;\n    if (r === 0) tip.sleep = true;\n  }\n  if (S.tips.every((t) => !t.on && (t.sleep || full))) nextTurn(S);\n}\n\n// ---------- flood ----------\n\n// Distance from the sea through everything else, for the flood front.\nfunction floodMap(S) {\n  const { wat, FD, Q } = S;\n  FD.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (FD[p] = 0), (Q[qt++] = p);\n  let m = 1;\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N || FD[q] !== BIG) continue;\n      FD[q] = FD[p] + 1;\n      m = max(m, FD[q]);\n      Q[qt++] = q;\n    }\n  }\n  S.fdMax = m;\n}\n\nfunction startFlood(S) {\n  floodMap(S);\n  for (const t of S.tips) t.on = false;\n  S.phase = \"flood\";\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wander = cl(k[3], 0, 1);\n  const n = round(cl(k[2], 3, 5));\n  if (!S.warm) {\n    S.n = n;\n    begin(S, makeIsland(n));\n    // Open on an island the waters have been digging for PRE seconds at\n    // this Speed.\n    const pre = round(PRE * S.speed * RATE);\n    for (let i = 0; i \u003c pre; i++) step(S, false);\n    S.clock = 10;\n    S.warm = true;\n  } else if (n !== S.n && S.phase !== \"flood\" && S.phase !== \"rise\") {\n    S.next = n;\n    startFlood(S);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== \"flood\" && S.phase !== \"rise\") startFlood(S);\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  S.pt += ds;\n  if (S.phase === \"dig\") {\n    S.acc += d * S.speed * RATE;\n    S.searches = 0;\n    let steps = 0;\n    while (S.acc >= 1 && steps \u003c 200 && S.phase === \"dig\") {\n      step(S, true);\n      S.acc -= 1;\n      steps++;\n      if (S.searches >= SEARCHES) {\n        S.acc = min(S.acc, 2);\n        break;\n      }\n    }\n  } else if (S.phase === \"hold\" && S.pt > 3) startFlood(S);\n  else if (S.phase === \"flood\" && S.pt > 1.2) {\n    if (S.next) (S.n = S.next), (S.next = null);\n    begin(S, makeIsland(S.n));\n    S.phase = \"rise\";\n    S.pt = 0;\n  } else if (S.phase === \"rise\" && S.pt > 1) {\n    S.phase = \"dig\";\n    S.pt = 0;\n    S.acc = 0;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { wat, born, c, n } = S;\n  const front = S.phase === \"flood\" ? S.fdMax * sm(0, 1.1, S.pt) : -1;\n  const level = S.phase === \"rise\" ? S.fMax * (1 - sm(0, 0.95, S.pt)) : -1;\n  const tipAt = new Set();\n  for (const t of S.tips) if (t.on) tipAt.add(t.pos);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let w = wat[p], glow = 0;\n      if (front >= 0 && S.FD[p] \u003c= front) {\n        w = 0;\n        if (S.FD[p] > 0) glow = 0.7 * sm(4, 0, front - S.FD[p]);\n      } else if (level >= 0 && S.F[p] \u003c= level) {\n        w = 0;\n        glow = 0.6 * sm(0.06, 0, level - S.F[p]) * (S.F[p] > 0 ? 1 : 0);\n      }\n      if (w === LAND) {\n        display.setPixel(x, y, 14, 12, 10);\n        continue;\n      }\n      if (front \u003c 0 && level \u003c 0) glow = tipAt.has(p) ? 1 : exp(-(S.clock - born[p]) / 0.22);\n      hsv(S.hue + H0 + w / n, SAT, 1, c);\n      const v = 255, s = 1 - 0.85 * glow;\n      display.setPixel(x, y, round(v * (c[0] * s + 1 - s)), round(v * (c[1] * s + 1 - s)), round(v * (c[2] * s + 1 - s)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds."},{"name":"Lakes","min":3,"max":5,"about":"How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters."},{"name":"Wander","min":0,"max":1,"about":"How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends."}],"start":[0,2,3,0.06],"measures":{"motion":0.0225,"detail":0.2272,"edges":1,"complexity":0.1697,"coverage":0.5713,"colour":0.6325,"drift":0.1351},"knobResponse":[0.4015,0.1136,0.142,0.1216]},{"slug":"lap-pool","title":"Lap Pool","family":"sport","round":21,"note":"야외 25 m 수영장을 바로 위에서 내려다본 그림이 128줄을 다 써요. 색 수모를 쓴 사람들이 레인마다 제 속도로 오가다 벽에서 플립 턴을 하고, 뒤로 퍼지는 V자 물결이 빨강·하양·파랑 레인 로프를 흔들어요. 타일 바닥에는 햇빛이 만든 물결 그물이 흘러요.","idea":"A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","layer":{"id":"layer-lap-pool","type":"code","name":"lap-pool","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stroke","min":0,"max":3,"about":"What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20."},{"name":"Swimmers","min":4,"max":15,"about":"Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15."},{"name":"Sun","min":-1,"max":1,"about":"Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes."}],"start":[0,2,4,0.06],"measures":{"motion":0.3073,"detail":0.1425,"edges":0.4977,"complexity":2.1556,"coverage":0.9906,"colour":0.3817,"drift":0.0257},"knobResponse":[0.044,0.0596,0.0629,0.1105]},{"slug":"lava-lake","title":"Lava Lake","family":"volcano","round":27,"note":"화구 가장자리에서 용암 호수를 곧장 내려다봐요. 검은 지각 판들이 노랗게 벌어진 확장 균열에서 떨어져 나와 변환 단층을 끼고 위아래로 흘러가다, 계단진 화구 벽 밑에서 밝은 이음매를 그으며 가라앉아요. K1 은 틈을 주황 용암 강으로 넓히고, 누르면 큰 가스 거품이 터져 용암을 튀겨요.","idea":"Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.","buttons":"K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.","code":"// ===== Patternflow pattern =====\n// Title:   Lava Lake\n// Family:  volcano\n// Idea:    Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the lava lakes of Erta Ale and Nyiragongo seen from the crater rim\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1\n//\n// Knob 1: Heat. At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter.\n// Knob 2: Speed. At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower.\n// Knob 3: Plates. At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three.\n// Knob 4: Spatter. How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder.\n// Buttons: K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.\n\nconst W = 64, H = 128, N = W * H;\n// Sparks at most; plates are 1 / AX wider than tall, stretched along the\n// crack; the crust drifts V LEDs per second at Speed 2.\nconst MAXP = 700, AX = 0.72, V = 1.6;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction h32(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return (h ^ (h >>> 16)) >>> 0;\n}\nconst hash = (i, j) => h32(i, j) / 4294967296;\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Smooth noise on a 128 x 128 torus, features about eight texels across.\nconst NZ = new Float32Array(128 * 128).map((_, k) => 0.65 * vn((k & 127) / 8, (k >> 7) / 8, 16) + 0.35 * vn((k & 127) / 4 + 3, (k >> 7) / 4, 32));\nfunction nz(u, v) {\n  const xi = floor(u), yi = floor(v), fx = u - xi, fy = v - yi, x0 = xi & 127, y0 = (yi & 127) \u003c\u003c 7, x1 = (x0 + 1) & 127, y1 = ((yi + 1) & 127) \u003c\u003c 7;\n  const a = NZ[y0 + x0], b = NZ[y0 + x1], c = NZ[y1 + x0];\n  return a + (b - a) * fx + (c - a) * fy + (a - b - c + NZ[y1 + x1]) * fx * fy;\n}\n// Lava by temperature: dull red, cherry, orange, yellow, the white of a fresh tear.\nconst STOPS = [[0, 30, 1, 0], [0.2, 104, 7, 0], [0.4, 184, 27, 2], [0.6, 238, 82, 7], [0.8, 250, 158, 36], [1, 254, 230, 148]];\nconst LUT = new Float32Array(257 * 3);\nfor (let q = 0; q \u003c= 256; q++) {\n  const T = q / 256;\n  let k = 0;\n  while (k \u003c 4 && T > STOPS[k + 1][0]) k++;\n  const [a, b] = [STOPS[k], STOPS[k + 1]], u = (T - a[0]) / (b[0] - a[0]);\n  for (let c = 0; c \u003c 3; c++) LUT[q * 3 + c] = mix(a[c + 1], b[c + 1], u);\n}\nconst lut = (T) => round(cl(T, 0, 1) * 256) * 3;\n// exp(-v) for v >= 0, read from a table.\nconst EX = new Float32Array(1025).map((_, k) => exp(-k / 64)), ex = (v) => (v \u003c 16 ? EX[(v * 64) | 0] : 0);\n// sin, read from a table.\nconst SN = new Float32Array(1024).map((_, k) => sin((k * PI) / 512)), fsin = (a) => SN[(a * 162.97) & 1023];\n\n// The shore of the lake under each column, and where the crater rim is.\nconst ST = new Float32Array(W), SB = new Float32Array(W), RT = new Float32Array(W), RB = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  ST[x] = 17.5 + 2.2 * sin(x * 0.11 + 1) + 1.4 * sin(x * 0.29 + 4) + 1.6 * (vn(x * 0.35, 2, 64) - 0.5);\n  SB[x] = 109.5 + 2.4 * sin(x * 0.09 + 3) + 1.3 * sin(x * 0.31) + 1.6 * (vn(x * 0.35, 9, 64) - 0.5);\n  RT[x] = 4 + 1.6 * sin(x * 0.07 + 2) + 1.4 * vn(x * 0.4, 5, 64);\n  RB[x] = H - 4 - 1.5 * sin(x * 0.08) - 1.4 * vn(x * 0.4, 7, 64);\n}\n// The walls: old lava beds stacked up the crater, the lip of each catching\n// the lake's light, and the rim at the top; a dark grain everywhere.\nconst WG = new Float32Array(N * 3), WA = new Float32Array(N);\nfor (let i = 0; i \u003c N; i++) {\n  const x = i & 63, y = i >> 6, top = y \u003c 64, u = top ? ST[x] - y - 0.5 : y + 0.5 - SB[x], g = h32(i, 77);\n  const q = u * 0.27 + 0.7 * vn(x * 0.1, top ? 1 : 30, 64) + 0.25 * vn(x * 0.4, top ? 4 : 40, 64), k = floor(q) + (top ? 0 : 50), f = q - floor(q);\n  WG[i * 3] = (g & 31) * 0.78;\n  WG[i * 3 + 1] = ((g >> 5) & 31) * 0.78;\n  WG[i * 3 + 2] = ((g >> 10) & 31) * 0.78;\n  const rim = top ? RT[x] - y - 0.5 : y + 0.5 - RB[x];\n  WA[i] = rim > 0.5 ? 0 : (rim > -0.5 ? 0.9 : (0.5 + 0.5 * hash(k, 3)) * sm(0.34, 0.08, f) * sm(0.12, 0.32, vn(x * 0.25, k * 7, 64))) * (0.8 + 0.4 * hash(i, 5));\n}\n\n// The fumaroles, each as its column and its height above the shore; the\n// last number is 1 on the top wall.\nconst VENTS = [[6, 5, 1], [27, 8, 1], [44, 4.5, 1], [15, 4.5, 0], [36, 7, 0], [55, 5, 0]];\n// Where the spreading crack steps sideways, and by how much: one fault at\n// the start, two or three as the crust breaks up.\nconst FAULTS = [[27, 11], [17, 9, 45, -8], [12, 8, 31, -10, 50, 8]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  params.s = {\n    PX: F32(MAXP), PY: F32(MAXP), PVX: F32(MAXP), PVY: F32(MAXP), PF: F32(MAXP), PT: F32(MAXP), PG: new Int8Array(MAXP), np: 0,\n    t: 0, off: 0, k3: -1, heat: 0, spat: 0.06, c: 13, pm: 0.18, tf: FAULTS[0], rb: 50,\n    bubs: [], fl: [], hot: [], puffs: [], vt: [0, 0, 0, 0, 0, 0], fnd: null, fe: 0, next: 1.2, nfl: 0.5,\n  };\n}\n\nfunction ridge(S, x) {\n  let y = S.rb + 2.2 * sin(x * 0.085 + S.t * 0.05) + 1.3 * sin(x * 0.23 - S.t * 0.037 + 2);\n  for (let k = 0; k \u003c S.tf.length; k += 2) y += S.tf[k + 1] * (1 / (1 + exp(-(x - S.tf[k]) / 0.6)) - 0.5);\n  return y;\n}\n\n// The crust on each side of the crack is one rigid sheet sliding away from\n// it, so its plates are cells of a jittered grid in the sheet's own frame.\n// Each frame the grid points the panel can see are kept in a table (tab).\nconst CELL = { id: 0, px: 0, py: 0, e: 9, em: 9 }, TPX = new Float32Array(2048), TPY = new Float32Array(2048), TID = new Uint32Array(2048), GY0 = [0, 0];\nlet GX0 = 0, TW = 1;\nconst grid = (gx, gy, s) => h32(gx + s * 7919, gy);\nfunction table(off, c) {\n  (GX0 = floor((-3 * AX) / c) - 2), (TW = floor((67 * AX) / c) + 3 - GX0);\n  for (let s = 0; s \u003c 2; s++) {\n    const y0 = (s ? -off : off) + s * 300 - 3, n = floor((y0 + 134) / c) + 3 - (GY0[s] = floor(y0 / c) - 2);\n    for (let j = 0; j \u003c n * TW && j \u003c 1024; j++) {\n      const gx = GX0 + (j % TW), gy = GY0[s] + floor(j / TW), h = grid(gx, gy, s), q = s * 1024 + j;\n      (TID[q] = h), (TPX[q] = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (TPY[q] = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n    }\n  }\n}\nfunction cells(xx, ya, s, c, pm, tab) {\n  const u = (xx * AX) / c, v = ya / c, cu = floor(u), cv = floor(v);\n  let d1 = 99, d2 = 99, d3 = 99, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0, i1 = 0, i2 = 0, i3 = 0;\n  for (let gy = cv - 1; gy \u003c= cv + 1; gy++)\n    for (let gx = cu - 1; gx \u003c= cu + 1; gx++) {\n      let h, px, py;\n      if (tab) {\n        const q = s * 1024 + (gy - GY0[s]) * TW + gx - GX0;\n        (h = TID[q]), (px = TPX[q]), (py = TPY[q]);\n      } else (h = grid(gx, gy, s)), (px = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (py = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n      const d = (px - u) * (px - u) + (py - v) * (py - v);\n      if (d \u003c d1) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d1), (a2 = a1), (b2 = b1), (i2 = i1), (d1 = d), (a1 = px), (b1 = py), (i1 = h);\n      else if (d \u003c d2) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d), (a2 = px), (b2 = py), (i2 = h);\n      else if (d \u003c d3) (d3 = d), (a3 = px), (b3 = py), (i3 = h);\n    }\n  // Some neighbours have frozen together into one bigger, odd-shaped plate.\n  let e = (c * (d2 - d1)) / (2 * sqrt(AX * AX * (a1 - a2) ** 2 + (b1 - b2) ** 2) + 1e-6), em = 9;\n  if (hash(i1 ^ i2, 99) \u003c pm) {\n    em = e;\n    e = hash(i1 ^ i3, 99) \u003c pm ? 9 : (c * (d3 - d1)) / (2 * sqrt(AX * AX * (a1 - a3) ** 2 + (b1 - b3) ** 2) + 1e-6);\n  }\n  (CELL.id = i1), (CELL.px = (a1 * c) / AX), (CELL.py = b1 * c), (CELL.e = e), (CELL.em = em);\n  return CELL;\n}\n\nfunction bubble(S, big) {\n  const x = 4 + rnd() * 56, y = mix(ST[floor(x)] + 7, SB[floor(x)] - 7, 0.1 + 0.8 * rnd());\n  const sg = y \u003c ridge(S, x) ? -1 : 1;\n  S.bubs.push({ x, y, sg, t0: S.t, r: big ? 4.5 + 2 * rnd() : 1.2 + rnd() * (1.4 + 1.8 * S.spat), big: big ? 1 : rnd() \u003c S.spat * 0.4 ? 0.6 : 0, done: 0 });\n}\nfunction spark(S, x, y, sp, tf) {\n  if (S.np >= MAXP) return;\n  const i = S.np++, a = rnd() * 2 * PI;\n  (S.PX[i] = x), (S.PY[i] = y), (S.PVX[i] = cos(a) * sp), (S.PVY[i] = sin(a) * sp), (S.PF[i] = tf), (S.PT[i] = 0.62 + 0.3 * rnd()), (S.PG[i] = 0);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d);\n  S.off += V * d;\n  // Gas bubbles: a couple of seconds apart at the start, often and bigger with Spatter.\n  if ((S.next -= d * (0.35 + 2.2 * S.spat)) \u003c= 0) bubble(S, rnd() \u003c (S.spat - 0.55) * 0.5), (S.next = 0.4 + rnd());\n  for (const b of S.bubs) {\n    const a = t - b.t0;\n    b.y += b.sg * V * d;\n    if (a > 0.6 && !b.done) {\n      b.done = 1;\n      S.fe = max(S.fe, 0.25 + 0.9 * b.big + 0.05 * b.r);\n      for (let k = 0; k \u003c 5 + 7 * b.r + 40 * b.big; k++) spark(S, b.x, b.y, 3 + rnd() * (6 + 3 * b.r), 0.25 + rnd() * (0.4 + 0.8 * b.big));\n    }\n    // A big bubble keeps a fountain going for a while.\n    if (b.big && a > 0.6 && a \u003c 0.6 + 2 * b.big) for (let k = 0; k \u003c 2 + 4 * b.big; k++) spark(S, b.x + rnd() - 0.5, b.y + rnd() - 0.5, 2 + rnd() * 13 * b.big, 0.4 + rnd() * 1.1 * b.big);\n  }\n  S.bubs = S.bubs.filter((b) => t - b.t0 \u003c 5);\n  // Sparks fly out from the burst, land on the crust and ride it as they cool.\n  const { PX, PY, PVX, PVY, PF, PT, PG } = S;\n  let j = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    if (PF[i] > 0) {\n      (PX[i] += PVX[i] * d), (PY[i] += PVY[i] * d);\n      if ((PF[i] -= d) \u003c= 0) {\n        const x = floor(cl(PX[i], 0, W - 1));\n        PG[i] = PY[i] \u003c ST[x] || PY[i] > SB[x] ? 0 : PY[i] \u003c ridge(S, PX[i]) ? -1 : 1;\n      }\n    } else (PT[i] -= d * 0.28), (PY[i] += PG[i] * V * d);\n    if (PT[i] \u003c= 0 || PX[i] \u003c -2 || PX[i] > W + 2 || PY[i] \u003c -2 || PY[i] > H + 2) continue;\n    (PX[j] = PX[i]), (PY[j] = PY[i]), (PVX[j] = PVX[i]), (PVY[j] = PVY[i]), (PF[j] = PF[i]), (PT[j] = PT[i]), (PG[j] = PG[i]), j++;\n  }\n  S.np = j;\n  // Where plates dive under the walls the crust breaks with a flash.\n  if ((S.nfl -= d * V) \u003c= 0) S.fl.push({ x: rnd() * W, top: rnd() \u003c 0.4, t0: t, a: 0.4 + 0.6 * rnd() }), (S.nfl = 0.3 + 1.1 * rnd());\n  S.fl = S.fl.filter((f) => t - f.t0 \u003c 1.6);\n  // Fumaroles in the walls breathe out puffs that the wind takes along the rim.\n  VENTS.forEach(([x, u, top], k) => {\n    if ((S.vt[k] -= d * (1.6 + 3 * S.spat)) \u003c= 0) (S.vt[k] = 0.6 + 0.6 * rnd()), S.puffs.push({ x: x + rnd() - 0.5, u, top, t0: t, r: 1.4 + rnd() + 2 * S.spat });\n  });\n  for (const p of S.puffs) (p.x += (2.2 + 0.6 * sin(t * 0.3)) * d), (p.u += 1.1 * d);\n  S.puffs = S.puffs.filter((p) => t - p.t0 \u003c 4.5 && p.x \u003c W + 6);\n  S.fe *= exp(-d / 0.5);\n  // A foundering plate sinks for two seconds, then the hole crusts over.\n  const f = S.fnd;\n  if (f && t - f.t0 > 2.2) S.hot.push({ s: f.s, id: f.id, t }), (S.fnd = null);\n  S.hot = S.hot.filter((h) => t - h.t \u003c 7);\n}\n\nfunction founder(S) {\n  if (S.fnd) return;\n  const x = 16 + rnd() * 32, y = 72 + rnd() * 16, c = cells(x, y - S.off + 300, 1, S.c, S.pm);\n  S.fnd = { s: 1, id: c.id, t0: S.t };\n  S.fe = max(S.fe, 0.5);\n  for (let k = 0; k \u003c 24; k++) spark(S, x + (rnd() - 0.5) * S.c, y + (rnd() - 0.5) * S.c * 0.7, 2 + 5 * rnd(), 0.2 + 0.4 * rnd());\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k3 = cl(k[2], 0, 1);\n  S.heat = cl(k[0], 0, 1);\n  S.spat = cl(k[3], 0, 1);\n  if (abs(k3 - S.k3) > 0.005) (S.k3 = k3), (S.c = mix(13, 6, k3)), (S.pm = mix(0.18, 0.06, k3)), (S.tf = FAULTS[min(2, floor(k3 * 2.6))]), (S.fnd = null);\n  const p = input.btnPressed || [];\n  if (p[0]) bubble(S, 1), (S.bubs[S.bubs.length - 1].t0 -= 0.3);\n  if (p[1]) founder(S);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nconst F = new Float32Array(N * 3), SD = new Float32Array(N), RC = new Float32Array(W + 2), RMN = new Float32Array(W), RMX = new Float32Array(W);\nconst LAKE = [205, 80, 46], STEAM = [170, 112, 100], FL = new Float32Array(W * 2), SHN = new Float32Array(W * 2), WRN = new Float32Array(W), HS = new Int8Array(8), HI = new Uint32Array(8), HT = new Float32Array(8);\n\n// The distance from (x, y) to the crack, along its line through the column centres.\nlet STEEP = 0;\nfunction ridgeDist(x, xx, yy) {\n  let best = 1e9;\n  for (let c = max(0, x - 5); c \u003c min(W, x + 5); c++) {\n    const ax = c + 0.5, ay = RC[c], ey = RC[c + 1] - ay;\n    const u = cl((xx - ax + (yy - ay) * ey) / (1 + ey * ey), 0, 1), dx = xx - ax - u, dy = yy - ay - ey * u, d = dx * dx + dy * dy;\n    if (d \u003c best) (best = d), (STEEP = abs(ey));\n  }\n  return sqrt(best);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k3 \u003c 0) return;\n  const { t, heat, off, c: C } = S;\n  for (let x = 0; x \u003c W + 1; x++) RC[x] = ridge(S, x + 0.5);\n  for (let x = 0; x \u003c W; x++) {\n    let a = 1e9, b = -1e9;\n    for (let c = max(0, x - 5); c \u003c= min(W, x + 5); c++) (a = min(a, RC[c])), (b = max(b, RC[c]));\n    (RMN[x] = a), (RMX[x] = b), (WRN[x] = 0.5 + nz(x * 0.9 + 70, t * 0.7 + 20));\n    for (let s = 0; s \u003c 2; s++) SHN[x * 2 + s] = sm(0.3, 0.75, nz(x * 1.4 + 90 + s * 40, t * 0.5));\n  }\n  const LL = (0.5 + 0.75 * heat) * (0.92 + 0.08 * sin(t * 0.45)) + S.fe;\n  const ws0 = 0.42 + 2.5 * heat, wr0 = 0.8 + 3.4 * heat, Lc = 1.6 + 7 * heat, opA = 0.22 - 0.3 * heat;\n  table(off, C);\n  const fnd = S.fnd, fp = fnd ? cl((t - fnd.t0) / 2.2, 0, 1) : 0, nh = min(8, S.hot.length);\n  for (let k = 0; k \u003c nh; k++) (HS[k] = S.hot[k].s), (HI[k] = S.hot[k].id), (HT[k] = S.hot[k].t);\n  // Flashes along each shore, per column.\n  FL.fill(0);\n  for (const f of S.fl) for (let x = 0; x \u003c W; x++) FL[x * 2 + (f.top ? 0 : 1)] += f.a * exp(-(((x + 0.5 - f.x) / 2.6) ** 2)) * sm(0, 0.1, t - f.t0) * exp(-(t - f.t0) / 0.45);\n\n  for (let y = 0; y \u003c H; y++) {\n    const yy = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, xx = x + 0.5, st = ST[x], sb = SB[x];\n      if (yy \u003c st || yy > sb) {\n        // Crater wall, lit red from the lake below: its foot, then the lip of each bed.\n        const top = yy \u003c st, u = top ? st - yy : yy - sb, a = WA[i];\n        const lw = LL * (1.7 * ex(u / 1.6) * (0.6 + 0.6 * a) + 2.4 * a * ex(u / 11));\n        for (let c = 0; c \u003c 3; c++) F[o + c] = WG[o + c] + LAKE[c] * lw;\n        continue;\n      }\n      const up = yy \u003c RC[x], s = up ? 0 : 1, sg = up ? -1 : 1, ya = yy - sg * off + s * 300;\n      // Plate edges bend a little: the grid is read through a slow warp.\n      const n1 = nz(xx * 1.3, ya * 1.3), n2 = nz(xx * 0.6 + 40, ya * 0.6), P = cells(xx + 3 * (n2 - 0.5), ya + 2.6 * (n1 - 0.5), s, C, S.pm, 1), id = P.id, e = P.e, em = P.em, px = P.px, py = P.py;\n      STEEP = 0;\n      const dr = yy > RMN[x] - 7 && yy \u003c RMX[x] + 7 ? ridgeDist(x, xx, yy) : abs(yy - RC[x]) * 0.92, tf = sm(1.2, 3, STEEP);\n      const ds = up ? yy - st : sb - yy;\n\n      // The crust: black, its grain and ropes fixed to the plate.\n      const lx = xx - px, ly = (ya - py) * sg, g = h32(x + s * 131, round(ya) + 5003), pt = (id & 255) / 255;\n      const rope = fsin(ly * 1.9 + 0.05 * lx * lx + pt * 40) * (0.6 + 0.4 * fsin(lx * 0.4 + pt * 9)), tilt = 0.45 + 0.55 * sm(0, 4, ds);\n      let cr = ((g & 31) * 0.76 + rope * 1.5 + pt * 2) * tilt, cg = (((g >> 5) & 31) * 0.74 + rope * 2) * tilt, cb = (((g >> 10) & 31) * 0.76 + rope * 2.5 + pt * 2.5) * tilt;\n      // Young crust near the crack still glows through; so does a plate that foundered and froze over.\n      let Tc = 0.62 * ex(dr / Lc) * (0.65 + 0.7 * n1), hot = 99;\n      for (let k = 0; k \u003c nh; k++) if (HS[k] === s && HI[k] === id) hot = t - HT[k];\n      if (hot \u003c 7) Tc = max(Tc, 0.9 * exp(-hot / 0.7) * (0.75 + 0.5 * n2));\n      Tc = max(Tc, 0.22 * ex(e / 0.7) * (0.6 + heat));\n      if (Tc > 0.02) {\n        const L = lut(Tc), gl = sm(0, 0.5, Tc) * (0.75 + 0.03 * ((g >> 12) & 15));\n        (cr += LUT[L] * gl), (cg += LUT[L + 1] * gl), (cb += LUT[L + 2] * gl);\n      }\n      if (em \u003c 1.2) cr += 14 * sm(1.2, 0.2, em + 0.8 * (n1 - 0.5));\n      // Seams between plates: some open and red, some crusted shut; near the crack they spread wider.\n      const ws = ws0 * (0.4 + 1.2 * n1) * (1 + 0.7 * ex(dr / 6)), op = sm(opA, opA + 0.12, n1);\n      let A = e \u003c ws + 0.35 ? sm(ws + 0.35, ws - 0.25, e) * op : 0, T = 0.57 + 0.27 * heat + 0.12 * ex(dr / 8) + 0.36 * (n2 - 0.5);\n      // The spreading crack: the hottest lava, opening and closing along its length.\n      const wr = wr0 * WRN[x] * (1 - 0.6 * tf), ar = dr \u003c wr + 0.6 ? sm(wr + 0.6, wr - 0.4, dr) : 0;\n      if (ar > A) (A = ar), (T = 0.9 + 0.1 * heat - 0.3 * (dr / (wr + 0.6)) ** 2 + 0.25 * (n1 - 0.5) - 0.3 * tf);\n      // The shore where the crust dives under, flashing as it breaks.\n      const sh = ds \u003c 5 ? sm(1.7, 0.2, ds) * SHN[x * 2 + s] + 0.7 * ex(e / 1.2) * sm(5, 0.5, ds) + FL[x * 2 + s] * sm(4, 0.3, ds) : 0;\n      if (sh > A) (A = min(1, sh)), (T = 0.45 + 0.3 * heat + 0.3 * min(1, sh) + 0.2 * (n2 - 0.5));\n      // A foundering plate: its edges melt inward as it tilts and sinks.\n      if (fnd && fnd.s === s && fnd.id === id) {\n        const fa = sm(fp * 0.5 * C + 0.6, fp * 0.5 * C - 0.4, e);\n        (cr *= 1 - 0.6 * fp), (cg *= 1 - 0.6 * fp), (cb *= 1 - 0.6 * fp);\n        if (fa > A) (A = fa), (T = 0.62 + 0.3 * (1 - fp) + 0.2 * (n1 - 0.5));\n      }\n      if (hot \u003c 7) {\n        // The hole skins over in small new plates, their cracks narrowing and dimming.\n        const k = exp(-hot / 1.3), w = 0.3 + 3.5 * k * k * k, ha = sm(w + 0.5, w - 0.4, cells(xx, ya, s + 2, 4.5, 0).e) * sm(7, 4, hot);\n        if (ha > A) (A = ha), (T = 0.24 + 0.72 * k + 0.8 * k * (nz(xx * 2.4, ya * 2.4 + 9) - 0.5));\n      }\n      if (A > 0.003) {\n        // Open lava wrinkles a dark skin on itself as it cools.\n        const sw = hot \u003c 7 ? 0.8 : sm(0.2, 0.6, heat), sk = A > 0.5 && sw > 0 ? sm(0.07, 0.01, abs(nz(xx * 2.2 + 5, ya * 2.2) - 0.5)) * sw * 0.7 : 0;\n        const L = lut(T), b = A * (1 - sk);\n        (cr = mix(cr, LUT[L] + ((g >> 15) & 15) - 7.5, b)), (cg = mix(cg, LUT[L + 1] + ((g >> 19) & 31) * 0.8 - 12, b)), (cb = mix(cb, LUT[L + 2] + ((g >>> 24) & 31) * 0.8, b));\n      }\n      (F[o] = cr), (F[o + 1] = cg), (F[o + 2] = cb);\n    }\n  }\n  overlay(S, t);\n  // Exposed for the lava, as a night photograph of a lava lake is: what only\n  // glows faintly sinks back into the black of the crust.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const m = max(F[o], F[o + 1], F[o + 2]), k = m > 24 && m \u003c 60 ? (12 + (m - 24) * 1.333) / m : 1;\n    display.setPixel(i & 63, i >> 6, cl(F[o] * k, 0, 255) | 0, cl(F[o + 1] * k, 0, 255) | 0, cl(F[o + 2] * k, 0, 255) | 0);\n  }\n}\n\nfunction add(x, y, L, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], LUT[L + c], min(1, a));\n}\n\nfunction overlay(S, t) {\n  // Bubbles: the crust domes and cracks in a ring, then tears open and freezes over.\n  for (const b of S.bubs) {\n    const a = t - b.t0, R = b.r, E = R * 1.3 + 2, fnt = 2 * b.big;\n    for (let y = max(0, floor(b.y - E)); y \u003c min(H, b.y + E); y++)\n      for (let x = max(0, floor(b.x - E)); x \u003c min(W, b.x + E); x++) {\n        if (y \u003c ST[x] || y > SB[x]) continue;\n        const dx = x + 0.5 - b.x, dy = y + 0.5 - b.y, d = sqrt(dx * dx + dy * dy), o = (y * W + x) * 3;\n        let A, T;\n        if (a \u003c 0.6) {\n          // The crust domes up and cracks: a ring and spokes.\n          const p = a / 0.6, rr = R * (0.6 + 0.4 * p), sp = d \u003c rr ? sm(0.3, 0.08, abs(sin(Math.atan2(dy, dx) * 2.5 + b.r))) * sm(0.5, rr, d) : 0;\n          (A = p * max(sm(1, 0.2, abs(d - rr)), 0.8 * sp)), (T = 0.4 + 0.45 * p);\n        } else {\n          // Torn open: white-hot, churning while a fountain plays, then a skin\n          // closes over it in small plates, as over a foundered one.\n          const c = a - 0.6, hot = c \u003c fnt ? 1 : exp(-(c - fnt) / (0.4 + 0.2 * R)), sk = nz(x * 2.3 + b.r * 9, y * 2.3 + b.t0 * 7 + (c \u003c fnt ? c * 5 : 0));\n          const rr = R * (c \u003c fnt ? 0.6 : 1) * (0.7 + 0.8 * nz(x * 1.1 + b.r * 5, y * 1.1 + 40)), w = 0.3 + 3 * hot * hot * hot;\n          (A = sm(rr + 0.5, rr - 0.5, d) * sm(w + 0.5, w - 0.4, cells(dx + 40, dy + 40, 9 + floor(b.r * 97), 3.2, 0).e) * sm(0, 0.15, hot)), (T = 0.22 + 0.66 * hot - (0.2 * d) / R + 0.5 * (sk - 0.5) + (c \u003c fnt ? 0.25 * sm(R * 0.6, 0, d) : 0));\n          A = max(A, 0.9 * sm(1, 0.2, abs(d - R * 1.15)) * exp(-c / 0.35));\n        }\n        if (A > 0) {\n          const L = lut(T);\n          for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], LUT[L + k], min(1, A));\n        }\n      }\n  }\n  // Steam: soft puffs that swell and thin out, lit from the lake below.\n  SD.fill(0);\n  for (const p of S.puffs) {\n    const a = t - p.t0, r = p.r + 0.8 * a, al = sm(0, 0.5, a) * sm(4.5, 1.5, a);\n    const sx = p.top ? ST[cl(floor(p.x), 0, W - 1)] : SB[cl(floor(p.x), 0, W - 1)], yc = p.top ? sx - p.u : sx + p.u;\n    for (let y = max(0, floor(yc - r)); y \u003c min(H, yc + r + 1); y++) {\n      const u = p.top ? sx - y - 0.5 : y + 0.5 - sx, dy = (u - p.u) / 0.8;\n      if (abs(dy) > r) continue;\n      for (let x = max(0, floor(p.x - r)); x \u003c min(W, p.x + r); x++) {\n        const dx = x + 0.5 - p.x, q = 1 - (dx * dx + dy * dy) / (r * r);\n        if (q \u003c= 0) continue;\n        SD[y * W + x] += al * q * q * (0.45 + 0.55 * ex(max(0, u) / 7)) * (0.7 + 0.6 * nz(x * 1.7 + p.t0 * 13, y * 1.7));\n      }\n    }\n  }\n  const sl = min(1, (0.65 + 0.6 * S.spat) * (S.fe + 0.6 + 0.6 * S.heat));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (SD[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += STEAM[c] * sl * min(1, SD[i]) * (1 - F[o + c] / 255);\n  // Sparks: white-hot in the air, orange where they land, then dull red and gone.\n  const { PX, PY, PVX, PVY, PF, PT, np } = S;\n  for (let i = 0; i \u003c np; i++) {\n    if (PF[i] > 0) {\n      const L = lut(0.93 + 0.07 * sin(i));\n      add(PX[i], PY[i], L, 1), add(PX[i] - PVX[i] * 0.04, PY[i] - PVY[i] * 0.04, L, 0.5);\n    } else add(PX[i], PY[i], lut(PT[i] * 0.85), sm(0, 0.3, PT[i]));\n  }\n}\n","layer":{"id":"layer-lava-lake","type":"code","name":"lava-lake","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lava Lake\n// Family:  volcano\n// Idea:    Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the lava lakes of Erta Ale and Nyiragongo seen from the crater rim\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1\n//\n// Knob 1: Heat. At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter.\n// Knob 2: Speed. At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower.\n// Knob 3: Plates. At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three.\n// Knob 4: Spatter. How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder.\n// Buttons: K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.\n\nconst W = 64, H = 128, N = W * H;\n// Sparks at most; plates are 1 / AX wider than tall, stretched along the\n// crack; the crust drifts V LEDs per second at Speed 2.\nconst MAXP = 700, AX = 0.72, V = 1.6;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction h32(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return (h ^ (h >>> 16)) >>> 0;\n}\nconst hash = (i, j) => h32(i, j) / 4294967296;\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Smooth noise on a 128 x 128 torus, features about eight texels across.\nconst NZ = new Float32Array(128 * 128).map((_, k) => 0.65 * vn((k & 127) / 8, (k >> 7) / 8, 16) + 0.35 * vn((k & 127) / 4 + 3, (k >> 7) / 4, 32));\nfunction nz(u, v) {\n  const xi = floor(u), yi = floor(v), fx = u - xi, fy = v - yi, x0 = xi & 127, y0 = (yi & 127) \u003c\u003c 7, x1 = (x0 + 1) & 127, y1 = ((yi + 1) & 127) \u003c\u003c 7;\n  const a = NZ[y0 + x0], b = NZ[y0 + x1], c = NZ[y1 + x0];\n  return a + (b - a) * fx + (c - a) * fy + (a - b - c + NZ[y1 + x1]) * fx * fy;\n}\n// Lava by temperature: dull red, cherry, orange, yellow, the white of a fresh tear.\nconst STOPS = [[0, 30, 1, 0], [0.2, 104, 7, 0], [0.4, 184, 27, 2], [0.6, 238, 82, 7], [0.8, 250, 158, 36], [1, 254, 230, 148]];\nconst LUT = new Float32Array(257 * 3);\nfor (let q = 0; q \u003c= 256; q++) {\n  const T = q / 256;\n  let k = 0;\n  while (k \u003c 4 && T > STOPS[k + 1][0]) k++;\n  const [a, b] = [STOPS[k], STOPS[k + 1]], u = (T - a[0]) / (b[0] - a[0]);\n  for (let c = 0; c \u003c 3; c++) LUT[q * 3 + c] = mix(a[c + 1], b[c + 1], u);\n}\nconst lut = (T) => round(cl(T, 0, 1) * 256) * 3;\n// exp(-v) for v >= 0, read from a table.\nconst EX = new Float32Array(1025).map((_, k) => exp(-k / 64)), ex = (v) => (v \u003c 16 ? EX[(v * 64) | 0] : 0);\n// sin, read from a table.\nconst SN = new Float32Array(1024).map((_, k) => sin((k * PI) / 512)), fsin = (a) => SN[(a * 162.97) & 1023];\n\n// The shore of the lake under each column, and where the crater rim is.\nconst ST = new Float32Array(W), SB = new Float32Array(W), RT = new Float32Array(W), RB = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  ST[x] = 17.5 + 2.2 * sin(x * 0.11 + 1) + 1.4 * sin(x * 0.29 + 4) + 1.6 * (vn(x * 0.35, 2, 64) - 0.5);\n  SB[x] = 109.5 + 2.4 * sin(x * 0.09 + 3) + 1.3 * sin(x * 0.31) + 1.6 * (vn(x * 0.35, 9, 64) - 0.5);\n  RT[x] = 4 + 1.6 * sin(x * 0.07 + 2) + 1.4 * vn(x * 0.4, 5, 64);\n  RB[x] = H - 4 - 1.5 * sin(x * 0.08) - 1.4 * vn(x * 0.4, 7, 64);\n}\n// The walls: old lava beds stacked up the crater, the lip of each catching\n// the lake's light, and the rim at the top; a dark grain everywhere.\nconst WG = new Float32Array(N * 3), WA = new Float32Array(N);\nfor (let i = 0; i \u003c N; i++) {\n  const x = i & 63, y = i >> 6, top = y \u003c 64, u = top ? ST[x] - y - 0.5 : y + 0.5 - SB[x], g = h32(i, 77);\n  const q = u * 0.27 + 0.7 * vn(x * 0.1, top ? 1 : 30, 64) + 0.25 * vn(x * 0.4, top ? 4 : 40, 64), k = floor(q) + (top ? 0 : 50), f = q - floor(q);\n  WG[i * 3] = (g & 31) * 0.78;\n  WG[i * 3 + 1] = ((g >> 5) & 31) * 0.78;\n  WG[i * 3 + 2] = ((g >> 10) & 31) * 0.78;\n  const rim = top ? RT[x] - y - 0.5 : y + 0.5 - RB[x];\n  WA[i] = rim > 0.5 ? 0 : (rim > -0.5 ? 0.9 : (0.5 + 0.5 * hash(k, 3)) * sm(0.34, 0.08, f) * sm(0.12, 0.32, vn(x * 0.25, k * 7, 64))) * (0.8 + 0.4 * hash(i, 5));\n}\n\n// The fumaroles, each as its column and its height above the shore; the\n// last number is 1 on the top wall.\nconst VENTS = [[6, 5, 1], [27, 8, 1], [44, 4.5, 1], [15, 4.5, 0], [36, 7, 0], [55, 5, 0]];\n// Where the spreading crack steps sideways, and by how much: one fault at\n// the start, two or three as the crust breaks up.\nconst FAULTS = [[27, 11], [17, 9, 45, -8], [12, 8, 31, -10, 50, 8]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  params.s = {\n    PX: F32(MAXP), PY: F32(MAXP), PVX: F32(MAXP), PVY: F32(MAXP), PF: F32(MAXP), PT: F32(MAXP), PG: new Int8Array(MAXP), np: 0,\n    t: 0, off: 0, k3: -1, heat: 0, spat: 0.06, c: 13, pm: 0.18, tf: FAULTS[0], rb: 50,\n    bubs: [], fl: [], hot: [], puffs: [], vt: [0, 0, 0, 0, 0, 0], fnd: null, fe: 0, next: 1.2, nfl: 0.5,\n  };\n}\n\nfunction ridge(S, x) {\n  let y = S.rb + 2.2 * sin(x * 0.085 + S.t * 0.05) + 1.3 * sin(x * 0.23 - S.t * 0.037 + 2);\n  for (let k = 0; k \u003c S.tf.length; k += 2) y += S.tf[k + 1] * (1 / (1 + exp(-(x - S.tf[k]) / 0.6)) - 0.5);\n  return y;\n}\n\n// The crust on each side of the crack is one rigid sheet sliding away from\n// it, so its plates are cells of a jittered grid in the sheet's own frame.\n// Each frame the grid points the panel can see are kept in a table (tab).\nconst CELL = { id: 0, px: 0, py: 0, e: 9, em: 9 }, TPX = new Float32Array(2048), TPY = new Float32Array(2048), TID = new Uint32Array(2048), GY0 = [0, 0];\nlet GX0 = 0, TW = 1;\nconst grid = (gx, gy, s) => h32(gx + s * 7919, gy);\nfunction table(off, c) {\n  (GX0 = floor((-3 * AX) / c) - 2), (TW = floor((67 * AX) / c) + 3 - GX0);\n  for (let s = 0; s \u003c 2; s++) {\n    const y0 = (s ? -off : off) + s * 300 - 3, n = floor((y0 + 134) / c) + 3 - (GY0[s] = floor(y0 / c) - 2);\n    for (let j = 0; j \u003c n * TW && j \u003c 1024; j++) {\n      const gx = GX0 + (j % TW), gy = GY0[s] + floor(j / TW), h = grid(gx, gy, s), q = s * 1024 + j;\n      (TID[q] = h), (TPX[q] = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (TPY[q] = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n    }\n  }\n}\nfunction cells(xx, ya, s, c, pm, tab) {\n  const u = (xx * AX) / c, v = ya / c, cu = floor(u), cv = floor(v);\n  let d1 = 99, d2 = 99, d3 = 99, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0, i1 = 0, i2 = 0, i3 = 0;\n  for (let gy = cv - 1; gy \u003c= cv + 1; gy++)\n    for (let gx = cu - 1; gx \u003c= cu + 1; gx++) {\n      let h, px, py;\n      if (tab) {\n        const q = s * 1024 + (gy - GY0[s]) * TW + gx - GX0;\n        (h = TID[q]), (px = TPX[q]), (py = TPY[q]);\n      } else (h = grid(gx, gy, s)), (px = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (py = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n      const d = (px - u) * (px - u) + (py - v) * (py - v);\n      if (d \u003c d1) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d1), (a2 = a1), (b2 = b1), (i2 = i1), (d1 = d), (a1 = px), (b1 = py), (i1 = h);\n      else if (d \u003c d2) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d), (a2 = px), (b2 = py), (i2 = h);\n      else if (d \u003c d3) (d3 = d), (a3 = px), (b3 = py), (i3 = h);\n    }\n  // Some neighbours have frozen together into one bigger, odd-shaped plate.\n  let e = (c * (d2 - d1)) / (2 * sqrt(AX * AX * (a1 - a2) ** 2 + (b1 - b2) ** 2) + 1e-6), em = 9;\n  if (hash(i1 ^ i2, 99) \u003c pm) {\n    em = e;\n    e = hash(i1 ^ i3, 99) \u003c pm ? 9 : (c * (d3 - d1)) / (2 * sqrt(AX * AX * (a1 - a3) ** 2 + (b1 - b3) ** 2) + 1e-6);\n  }\n  (CELL.id = i1), (CELL.px = (a1 * c) / AX), (CELL.py = b1 * c), (CELL.e = e), (CELL.em = em);\n  return CELL;\n}\n\nfunction bubble(S, big) {\n  const x = 4 + rnd() * 56, y = mix(ST[floor(x)] + 7, SB[floor(x)] - 7, 0.1 + 0.8 * rnd());\n  const sg = y \u003c ridge(S, x) ? -1 : 1;\n  S.bubs.push({ x, y, sg, t0: S.t, r: big ? 4.5 + 2 * rnd() : 1.2 + rnd() * (1.4 + 1.8 * S.spat), big: big ? 1 : rnd() \u003c S.spat * 0.4 ? 0.6 : 0, done: 0 });\n}\nfunction spark(S, x, y, sp, tf) {\n  if (S.np >= MAXP) return;\n  const i = S.np++, a = rnd() * 2 * PI;\n  (S.PX[i] = x), (S.PY[i] = y), (S.PVX[i] = cos(a) * sp), (S.PVY[i] = sin(a) * sp), (S.PF[i] = tf), (S.PT[i] = 0.62 + 0.3 * rnd()), (S.PG[i] = 0);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d);\n  S.off += V * d;\n  // Gas bubbles: a couple of seconds apart at the start, often and bigger with Spatter.\n  if ((S.next -= d * (0.35 + 2.2 * S.spat)) \u003c= 0) bubble(S, rnd() \u003c (S.spat - 0.55) * 0.5), (S.next = 0.4 + rnd());\n  for (const b of S.bubs) {\n    const a = t - b.t0;\n    b.y += b.sg * V * d;\n    if (a > 0.6 && !b.done) {\n      b.done = 1;\n      S.fe = max(S.fe, 0.25 + 0.9 * b.big + 0.05 * b.r);\n      for (let k = 0; k \u003c 5 + 7 * b.r + 40 * b.big; k++) spark(S, b.x, b.y, 3 + rnd() * (6 + 3 * b.r), 0.25 + rnd() * (0.4 + 0.8 * b.big));\n    }\n    // A big bubble keeps a fountain going for a while.\n    if (b.big && a > 0.6 && a \u003c 0.6 + 2 * b.big) for (let k = 0; k \u003c 2 + 4 * b.big; k++) spark(S, b.x + rnd() - 0.5, b.y + rnd() - 0.5, 2 + rnd() * 13 * b.big, 0.4 + rnd() * 1.1 * b.big);\n  }\n  S.bubs = S.bubs.filter((b) => t - b.t0 \u003c 5);\n  // Sparks fly out from the burst, land on the crust and ride it as they cool.\n  const { PX, PY, PVX, PVY, PF, PT, PG } = S;\n  let j = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    if (PF[i] > 0) {\n      (PX[i] += PVX[i] * d), (PY[i] += PVY[i] * d);\n      if ((PF[i] -= d) \u003c= 0) {\n        const x = floor(cl(PX[i], 0, W - 1));\n        PG[i] = PY[i] \u003c ST[x] || PY[i] > SB[x] ? 0 : PY[i] \u003c ridge(S, PX[i]) ? -1 : 1;\n      }\n    } else (PT[i] -= d * 0.28), (PY[i] += PG[i] * V * d);\n    if (PT[i] \u003c= 0 || PX[i] \u003c -2 || PX[i] > W + 2 || PY[i] \u003c -2 || PY[i] > H + 2) continue;\n    (PX[j] = PX[i]), (PY[j] = PY[i]), (PVX[j] = PVX[i]), (PVY[j] = PVY[i]), (PF[j] = PF[i]), (PT[j] = PT[i]), (PG[j] = PG[i]), j++;\n  }\n  S.np = j;\n  // Where plates dive under the walls the crust breaks with a flash.\n  if ((S.nfl -= d * V) \u003c= 0) S.fl.push({ x: rnd() * W, top: rnd() \u003c 0.4, t0: t, a: 0.4 + 0.6 * rnd() }), (S.nfl = 0.3 + 1.1 * rnd());\n  S.fl = S.fl.filter((f) => t - f.t0 \u003c 1.6);\n  // Fumaroles in the walls breathe out puffs that the wind takes along the rim.\n  VENTS.forEach(([x, u, top], k) => {\n    if ((S.vt[k] -= d * (1.6 + 3 * S.spat)) \u003c= 0) (S.vt[k] = 0.6 + 0.6 * rnd()), S.puffs.push({ x: x + rnd() - 0.5, u, top, t0: t, r: 1.4 + rnd() + 2 * S.spat });\n  });\n  for (const p of S.puffs) (p.x += (2.2 + 0.6 * sin(t * 0.3)) * d), (p.u += 1.1 * d);\n  S.puffs = S.puffs.filter((p) => t - p.t0 \u003c 4.5 && p.x \u003c W + 6);\n  S.fe *= exp(-d / 0.5);\n  // A foundering plate sinks for two seconds, then the hole crusts over.\n  const f = S.fnd;\n  if (f && t - f.t0 > 2.2) S.hot.push({ s: f.s, id: f.id, t }), (S.fnd = null);\n  S.hot = S.hot.filter((h) => t - h.t \u003c 7);\n}\n\nfunction founder(S) {\n  if (S.fnd) return;\n  const x = 16 + rnd() * 32, y = 72 + rnd() * 16, c = cells(x, y - S.off + 300, 1, S.c, S.pm);\n  S.fnd = { s: 1, id: c.id, t0: S.t };\n  S.fe = max(S.fe, 0.5);\n  for (let k = 0; k \u003c 24; k++) spark(S, x + (rnd() - 0.5) * S.c, y + (rnd() - 0.5) * S.c * 0.7, 2 + 5 * rnd(), 0.2 + 0.4 * rnd());\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k3 = cl(k[2], 0, 1);\n  S.heat = cl(k[0], 0, 1);\n  S.spat = cl(k[3], 0, 1);\n  if (abs(k3 - S.k3) > 0.005) (S.k3 = k3), (S.c = mix(13, 6, k3)), (S.pm = mix(0.18, 0.06, k3)), (S.tf = FAULTS[min(2, floor(k3 * 2.6))]), (S.fnd = null);\n  const p = input.btnPressed || [];\n  if (p[0]) bubble(S, 1), (S.bubs[S.bubs.length - 1].t0 -= 0.3);\n  if (p[1]) founder(S);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nconst F = new Float32Array(N * 3), SD = new Float32Array(N), RC = new Float32Array(W + 2), RMN = new Float32Array(W), RMX = new Float32Array(W);\nconst LAKE = [205, 80, 46], STEAM = [170, 112, 100], FL = new Float32Array(W * 2), SHN = new Float32Array(W * 2), WRN = new Float32Array(W), HS = new Int8Array(8), HI = new Uint32Array(8), HT = new Float32Array(8);\n\n// The distance from (x, y) to the crack, along its line through the column centres.\nlet STEEP = 0;\nfunction ridgeDist(x, xx, yy) {\n  let best = 1e9;\n  for (let c = max(0, x - 5); c \u003c min(W, x + 5); c++) {\n    const ax = c + 0.5, ay = RC[c], ey = RC[c + 1] - ay;\n    const u = cl((xx - ax + (yy - ay) * ey) / (1 + ey * ey), 0, 1), dx = xx - ax - u, dy = yy - ay - ey * u, d = dx * dx + dy * dy;\n    if (d \u003c best) (best = d), (STEEP = abs(ey));\n  }\n  return sqrt(best);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k3 \u003c 0) return;\n  const { t, heat, off, c: C } = S;\n  for (let x = 0; x \u003c W + 1; x++) RC[x] = ridge(S, x + 0.5);\n  for (let x = 0; x \u003c W; x++) {\n    let a = 1e9, b = -1e9;\n    for (let c = max(0, x - 5); c \u003c= min(W, x + 5); c++) (a = min(a, RC[c])), (b = max(b, RC[c]));\n    (RMN[x] = a), (RMX[x] = b), (WRN[x] = 0.5 + nz(x * 0.9 + 70, t * 0.7 + 20));\n    for (let s = 0; s \u003c 2; s++) SHN[x * 2 + s] = sm(0.3, 0.75, nz(x * 1.4 + 90 + s * 40, t * 0.5));\n  }\n  const LL = (0.5 + 0.75 * heat) * (0.92 + 0.08 * sin(t * 0.45)) + S.fe;\n  const ws0 = 0.42 + 2.5 * heat, wr0 = 0.8 + 3.4 * heat, Lc = 1.6 + 7 * heat, opA = 0.22 - 0.3 * heat;\n  table(off, C);\n  const fnd = S.fnd, fp = fnd ? cl((t - fnd.t0) / 2.2, 0, 1) : 0, nh = min(8, S.hot.length);\n  for (let k = 0; k \u003c nh; k++) (HS[k] = S.hot[k].s), (HI[k] = S.hot[k].id), (HT[k] = S.hot[k].t);\n  // Flashes along each shore, per column.\n  FL.fill(0);\n  for (const f of S.fl) for (let x = 0; x \u003c W; x++) FL[x * 2 + (f.top ? 0 : 1)] += f.a * exp(-(((x + 0.5 - f.x) / 2.6) ** 2)) * sm(0, 0.1, t - f.t0) * exp(-(t - f.t0) / 0.45);\n\n  for (let y = 0; y \u003c H; y++) {\n    const yy = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, xx = x + 0.5, st = ST[x], sb = SB[x];\n      if (yy \u003c st || yy > sb) {\n        // Crater wall, lit red from the lake below: its foot, then the lip of each bed.\n        const top = yy \u003c st, u = top ? st - yy : yy - sb, a = WA[i];\n        const lw = LL * (1.7 * ex(u / 1.6) * (0.6 + 0.6 * a) + 2.4 * a * ex(u / 11));\n        for (let c = 0; c \u003c 3; c++) F[o + c] = WG[o + c] + LAKE[c] * lw;\n        continue;\n      }\n      const up = yy \u003c RC[x], s = up ? 0 : 1, sg = up ? -1 : 1, ya = yy - sg * off + s * 300;\n      // Plate edges bend a little: the grid is read through a slow warp.\n      const n1 = nz(xx * 1.3, ya * 1.3), n2 = nz(xx * 0.6 + 40, ya * 0.6), P = cells(xx + 3 * (n2 - 0.5), ya + 2.6 * (n1 - 0.5), s, C, S.pm, 1), id = P.id, e = P.e, em = P.em, px = P.px, py = P.py;\n      STEEP = 0;\n      const dr = yy > RMN[x] - 7 && yy \u003c RMX[x] + 7 ? ridgeDist(x, xx, yy) : abs(yy - RC[x]) * 0.92, tf = sm(1.2, 3, STEEP);\n      const ds = up ? yy - st : sb - yy;\n\n      // The crust: black, its grain and ropes fixed to the plate.\n      const lx = xx - px, ly = (ya - py) * sg, g = h32(x + s * 131, round(ya) + 5003), pt = (id & 255) / 255;\n      const rope = fsin(ly * 1.9 + 0.05 * lx * lx + pt * 40) * (0.6 + 0.4 * fsin(lx * 0.4 + pt * 9)), tilt = 0.45 + 0.55 * sm(0, 4, ds);\n      let cr = ((g & 31) * 0.76 + rope * 1.5 + pt * 2) * tilt, cg = (((g >> 5) & 31) * 0.74 + rope * 2) * tilt, cb = (((g >> 10) & 31) * 0.76 + rope * 2.5 + pt * 2.5) * tilt;\n      // Young crust near the crack still glows through; so does a plate that foundered and froze over.\n      let Tc = 0.62 * ex(dr / Lc) * (0.65 + 0.7 * n1), hot = 99;\n      for (let k = 0; k \u003c nh; k++) if (HS[k] === s && HI[k] === id) hot = t - HT[k];\n      if (hot \u003c 7) Tc = max(Tc, 0.9 * exp(-hot / 0.7) * (0.75 + 0.5 * n2));\n      Tc = max(Tc, 0.22 * ex(e / 0.7) * (0.6 + heat));\n      if (Tc > 0.02) {\n        const L = lut(Tc), gl = sm(0, 0.5, Tc) * (0.75 + 0.03 * ((g >> 12) & 15));\n        (cr += LUT[L] * gl), (cg += LUT[L + 1] * gl), (cb += LUT[L + 2] * gl);\n      }\n      if (em \u003c 1.2) cr += 14 * sm(1.2, 0.2, em + 0.8 * (n1 - 0.5));\n      // Seams between plates: some open and red, some crusted shut; near the crack they spread wider.\n      const ws = ws0 * (0.4 + 1.2 * n1) * (1 + 0.7 * ex(dr / 6)), op = sm(opA, opA + 0.12, n1);\n      let A = e \u003c ws + 0.35 ? sm(ws + 0.35, ws - 0.25, e) * op : 0, T = 0.57 + 0.27 * heat + 0.12 * ex(dr / 8) + 0.36 * (n2 - 0.5);\n      // The spreading crack: the hottest lava, opening and closing along its length.\n      const wr = wr0 * WRN[x] * (1 - 0.6 * tf), ar = dr \u003c wr + 0.6 ? sm(wr + 0.6, wr - 0.4, dr) : 0;\n      if (ar > A) (A = ar), (T = 0.9 + 0.1 * heat - 0.3 * (dr / (wr + 0.6)) ** 2 + 0.25 * (n1 - 0.5) - 0.3 * tf);\n      // The shore where the crust dives under, flashing as it breaks.\n      const sh = ds \u003c 5 ? sm(1.7, 0.2, ds) * SHN[x * 2 + s] + 0.7 * ex(e / 1.2) * sm(5, 0.5, ds) + FL[x * 2 + s] * sm(4, 0.3, ds) : 0;\n      if (sh > A) (A = min(1, sh)), (T = 0.45 + 0.3 * heat + 0.3 * min(1, sh) + 0.2 * (n2 - 0.5));\n      // A foundering plate: its edges melt inward as it tilts and sinks.\n      if (fnd && fnd.s === s && fnd.id === id) {\n        const fa = sm(fp * 0.5 * C + 0.6, fp * 0.5 * C - 0.4, e);\n        (cr *= 1 - 0.6 * fp), (cg *= 1 - 0.6 * fp), (cb *= 1 - 0.6 * fp);\n        if (fa > A) (A = fa), (T = 0.62 + 0.3 * (1 - fp) + 0.2 * (n1 - 0.5));\n      }\n      if (hot \u003c 7) {\n        // The hole skins over in small new plates, their cracks narrowing and dimming.\n        const k = exp(-hot / 1.3), w = 0.3 + 3.5 * k * k * k, ha = sm(w + 0.5, w - 0.4, cells(xx, ya, s + 2, 4.5, 0).e) * sm(7, 4, hot);\n        if (ha > A) (A = ha), (T = 0.24 + 0.72 * k + 0.8 * k * (nz(xx * 2.4, ya * 2.4 + 9) - 0.5));\n      }\n      if (A > 0.003) {\n        // Open lava wrinkles a dark skin on itself as it cools.\n        const sw = hot \u003c 7 ? 0.8 : sm(0.2, 0.6, heat), sk = A > 0.5 && sw > 0 ? sm(0.07, 0.01, abs(nz(xx * 2.2 + 5, ya * 2.2) - 0.5)) * sw * 0.7 : 0;\n        const L = lut(T), b = A * (1 - sk);\n        (cr = mix(cr, LUT[L] + ((g >> 15) & 15) - 7.5, b)), (cg = mix(cg, LUT[L + 1] + ((g >> 19) & 31) * 0.8 - 12, b)), (cb = mix(cb, LUT[L + 2] + ((g >>> 24) & 31) * 0.8, b));\n      }\n      (F[o] = cr), (F[o + 1] = cg), (F[o + 2] = cb);\n    }\n  }\n  overlay(S, t);\n  // Exposed for the lava, as a night photograph of a lava lake is: what only\n  // glows faintly sinks back into the black of the crust.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const m = max(F[o], F[o + 1], F[o + 2]), k = m > 24 && m \u003c 60 ? (12 + (m - 24) * 1.333) / m : 1;\n    display.setPixel(i & 63, i >> 6, cl(F[o] * k, 0, 255) | 0, cl(F[o + 1] * k, 0, 255) | 0, cl(F[o + 2] * k, 0, 255) | 0);\n  }\n}\n\nfunction add(x, y, L, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], LUT[L + c], min(1, a));\n}\n\nfunction overlay(S, t) {\n  // Bubbles: the crust domes and cracks in a ring, then tears open and freezes over.\n  for (const b of S.bubs) {\n    const a = t - b.t0, R = b.r, E = R * 1.3 + 2, fnt = 2 * b.big;\n    for (let y = max(0, floor(b.y - E)); y \u003c min(H, b.y + E); y++)\n      for (let x = max(0, floor(b.x - E)); x \u003c min(W, b.x + E); x++) {\n        if (y \u003c ST[x] || y > SB[x]) continue;\n        const dx = x + 0.5 - b.x, dy = y + 0.5 - b.y, d = sqrt(dx * dx + dy * dy), o = (y * W + x) * 3;\n        let A, T;\n        if (a \u003c 0.6) {\n          // The crust domes up and cracks: a ring and spokes.\n          const p = a / 0.6, rr = R * (0.6 + 0.4 * p), sp = d \u003c rr ? sm(0.3, 0.08, abs(sin(Math.atan2(dy, dx) * 2.5 + b.r))) * sm(0.5, rr, d) : 0;\n          (A = p * max(sm(1, 0.2, abs(d - rr)), 0.8 * sp)), (T = 0.4 + 0.45 * p);\n        } else {\n          // Torn open: white-hot, churning while a fountain plays, then a skin\n          // closes over it in small plates, as over a foundered one.\n          const c = a - 0.6, hot = c \u003c fnt ? 1 : exp(-(c - fnt) / (0.4 + 0.2 * R)), sk = nz(x * 2.3 + b.r * 9, y * 2.3 + b.t0 * 7 + (c \u003c fnt ? c * 5 : 0));\n          const rr = R * (c \u003c fnt ? 0.6 : 1) * (0.7 + 0.8 * nz(x * 1.1 + b.r * 5, y * 1.1 + 40)), w = 0.3 + 3 * hot * hot * hot;\n          (A = sm(rr + 0.5, rr - 0.5, d) * sm(w + 0.5, w - 0.4, cells(dx + 40, dy + 40, 9 + floor(b.r * 97), 3.2, 0).e) * sm(0, 0.15, hot)), (T = 0.22 + 0.66 * hot - (0.2 * d) / R + 0.5 * (sk - 0.5) + (c \u003c fnt ? 0.25 * sm(R * 0.6, 0, d) : 0));\n          A = max(A, 0.9 * sm(1, 0.2, abs(d - R * 1.15)) * exp(-c / 0.35));\n        }\n        if (A > 0) {\n          const L = lut(T);\n          for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], LUT[L + k], min(1, A));\n        }\n      }\n  }\n  // Steam: soft puffs that swell and thin out, lit from the lake below.\n  SD.fill(0);\n  for (const p of S.puffs) {\n    const a = t - p.t0, r = p.r + 0.8 * a, al = sm(0, 0.5, a) * sm(4.5, 1.5, a);\n    const sx = p.top ? ST[cl(floor(p.x), 0, W - 1)] : SB[cl(floor(p.x), 0, W - 1)], yc = p.top ? sx - p.u : sx + p.u;\n    for (let y = max(0, floor(yc - r)); y \u003c min(H, yc + r + 1); y++) {\n      const u = p.top ? sx - y - 0.5 : y + 0.5 - sx, dy = (u - p.u) / 0.8;\n      if (abs(dy) > r) continue;\n      for (let x = max(0, floor(p.x - r)); x \u003c min(W, p.x + r); x++) {\n        const dx = x + 0.5 - p.x, q = 1 - (dx * dx + dy * dy) / (r * r);\n        if (q \u003c= 0) continue;\n        SD[y * W + x] += al * q * q * (0.45 + 0.55 * ex(max(0, u) / 7)) * (0.7 + 0.6 * nz(x * 1.7 + p.t0 * 13, y * 1.7));\n      }\n    }\n  }\n  const sl = min(1, (0.65 + 0.6 * S.spat) * (S.fe + 0.6 + 0.6 * S.heat));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (SD[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += STEAM[c] * sl * min(1, SD[i]) * (1 - F[o + c] / 255);\n  // Sparks: white-hot in the air, orange where they land, then dull red and gone.\n  const { PX, PY, PVX, PVY, PF, PT, np } = S;\n  for (let i = 0; i \u003c np; i++) {\n    if (PF[i] > 0) {\n      const L = lut(0.93 + 0.07 * sin(i));\n      add(PX[i], PY[i], L, 1), add(PX[i] - PVX[i] * 0.04, PY[i] - PVY[i] * 0.04, L, 0.5);\n    } else add(PX[i], PY[i], lut(PT[i] * 0.85), sm(0, 0.3, PT[i]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Heat","min":0,"max":1,"about":"At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower."},{"name":"Plates","min":0,"max":1,"about":"At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three."},{"name":"Spatter","min":0,"max":1,"about":"How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder."}],"start":[0,2,0,0.06],"measures":{"motion":0.2026,"detail":0.1176,"edges":0.3894,"complexity":2.2223,"coverage":0.271,"colour":0.2444,"drift":0.0498},"knobResponse":[0.229,0.0729,0.0899,0.0472]},{"slug":"lava-lamp","title":"Lava Lamp","family":"sim","round":3,"note":"전구 위 웅덩이에서 데워진 왁스가 목을 늘이며 떨어져 나와 방울로 떠오르고, 위에서 식으면 다시 가라앉아요. 파란 물속에서 식은 왁스는 주황, 뜨거운 왁스는 노랑이에요.","idea":"A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.","buttons":"K1 tap flares the bulb, and the lowest drop heats through and lets go.","code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-lava-lamp","type":"code","name":"lava-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot."},{"name":"Heat","min":0.3,"max":3,"about":"How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top."},{"name":"Wax","min":4,"max":10,"about":"How many drops are loose in the lamp; drops past the count sink into the pool and melt into it."},{"name":"Stretch","min":0,"max":1,"about":"At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it."}],"start":[0,2,4,0.06],"measures":{"motion":0.1138,"detail":0.0147,"edges":0.1844,"complexity":1.5488,"coverage":1,"colour":0.5657,"drift":0.068},"knobResponse":[0.5599,0.1621,0.1504,0.0519]},{"slug":"lichtenberg","title":"Lichtenberg","family":"fractal","round":26,"note":"소다물을 바른 단풍나무 판의 위아래 전극에서 깃털 잔가지를 단 프랙탈 나무가 파란 플라스마와 주황 불씨를 달고 서로를 향해 타 들어가고, 만나면 아크가 번쩍여요. K1 이 판의 나무를 바꾸고, 누르면 다음 판이에요.","idea":"High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.","buttons":"K1 tap cuts the power and slides the next board in now.","code":"// ===== Patternflow pattern =====\n// Title:   Lichtenberg\n// Family:  fractal\n// Idea:    High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after fractal wood burning and the dielectric breakdown model (Niemeyer, Pietronero and Wiesmann, 1984)\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1\n//\n// Knob 1: Wood. Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash.\n// Knob 2: Speed. At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower.\n// Knob 3: Pull. The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders.\n// Knob 4: Lead. Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway.\n// Buttons: K1 tap cuts the power and slides the next board in now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, exp, sqrt, pow, sin, abs, log2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The board at rest fills columns X0..X1 and rows Y0..Y1; the electrodes\n// touch it at (TX, TY) and (BX, BY).\nconst X0 = 2, X1 = 61, Y0 = 3, Y1 = 124, TX = 32, TY = 9, BX = 31, BY = 118;\n// A board slides down this far for the next, with a few rows of rig between.\nconst SL = 131;\n// Seconds at Speed 2: wet board before the power, growth until the trees\n// meet, the arc, the embers dying, the slide.\nconst SOAK = 1.0, TG = 4.8, ARC = 0.5, COOL = 3, SLIDE = 1.6;\n// Cells each tree adds a second at the front when it keeps pace with its\n// schedule, and fringe twigs a second for every cell of its channels.\nconst RATE = 200, TWIG = 0.14;\n// A cell that joined the tree this recently is still plasma.\nconst TIP = 0.16;\nconst DIRS = [[1, 0], [1, 1], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1], [1, -1]];\n// How readily a channel, a twig and a twig's twig sprout a fringe twig,\n// and how far each new generation runs: three or four LEDs, two, then one.\nconst GEN = [1, 0.4, 0.25], LEN = [2, 1, 0];\n// A channel feeding this many cells beyond it burns a groove one, two,\n// three and four steps wider, with a brown scorch round it: the trunks\n// near the electrodes run thick and dark.\nconst WIDE = [12, 50, 160, 500];\n// How dark the curl's bands run, in grain darkness.\nconst CURL = 0.45;\nconst N4 = [-1, 1, -W, W], ND = [-W - 1, -W + 1, W - 1, W + 1], LUT = [0, 1, 16];\n\n// Board, grain, knot and char colours for maple, birch, walnut and\n// black-stained oak, where the burn leaves grey ash.\nconst WOODS = [\n  [[228, 196, 150], [160, 110, 66], [128, 76, 40], [30, 19, 14]],\n  [[244, 232, 204], [210, 186, 142], [120, 90, 58], [30, 19, 14]],\n  [[140, 90, 58], [88, 54, 34], [50, 30, 18], [26, 16, 12]],\n  [[50, 44, 46], [30, 26, 28], [18, 14, 14], [92, 86, 80]],\n];\nconst SMOKE = [196, 190, 184], RIG = [16, 17, 22];\n\n// One board's wood: grain darkness (above 1 in a knot), how wet the soda\n// wash left each spot, and a per-channel speckle.\nfunction wood() {\n  const g = F32(N), wet = F32(N), nz = new Int8Array(N * 3);\n  const ox = rnd() * 300, oy = rnd() * 300, per = 2.6 + rnd() * 0.6, tilt = (rnd() - 0.5) * 0.06;\n  const knots = [];\n  for (let k = 0, nk = 1 + floor(rnd() * 3); k \u003c nk; k++)\n    knots.push([X0 + 9 + rnd() * (X1 - X0 - 18), Y0 + 14 + rnd() * (Y1 - Y0 - 28), 1.6 + rnd() * 1.4]);\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let u = x + tilt * y + 9 * (vn(x / 26 + ox, y / 40 + oy) - 0.5) + 2 * (vn(x / 7 + oy, y / 11 + ox) - 0.5), kd = 0;\n      for (const [kx, ky, kr] of knots) {\n        const dx = x - kx, dy = (y - ky) / 2.2, d2 = dx * dx + dy * dy;\n        // The grain bends round a knot and crowds in close to it.\n        u += (kr * kr * 3 * dx) / (d2 + kr * kr);\n        kd = max(kd, 1 - sqrt(d2) / kr);\n      }\n      // Thin dark latewood lines, a pore streak here and there, and the curl\n      // of figured maple across the grain, a band every two rows or so.\n      const c = 0.5 + 0.5 * Math.cos((2 * Math.PI * u) / per);\n      let v = c ** 4 * (0.8 + 0.6 * vn(x / 5 + ox, y / 30)) + 0.22 * (hash(x, floor(y / 4) + 7) - 0.5);\n      v += CURL * (0.5 + 0.5 * Math.sin((2 * Math.PI * (y + 1.5 * vn(x / 6 + oy, y / 20))) / 2.3));\n      if (kd > 0) v = 1 + kd * 0.6;\n      g[i] = cl(v, 0, 1.6);\n      wet[i] = 0.5 + 0.5 * vn(x / 9 + oy, y / 9 + ox);\n      for (let ch = 0; ch \u003c 3; ch++) nz[i * 3 + ch] = round((rnd() - 0.5) * 4);\n    }\n  return { g, wet, nz, col: F32(N * 3), at: -1 };\n}\n\n// A board's colours for this K1: grain, knots, lamp, bevels and speckle.\nfunction paint(B, wood) {\n  const wv = wood * 3, wi = min(2, floor(wv)), wf = wv - wi, WC = [];\n  for (let j = 0; j \u003c 4; j++) WC.push([0, 1, 2].map((c) => WOODS[wi][j][c] + (WOODS[wi + 1][j][c] - WOODS[wi][j][c]) * wf));\n  B.ch = WC[3];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x, gv = B.g[i], lo = gv \u003c= 1 ? 0 : 1, t = gv \u003c= 1 ? gv : (gv - 1) / 0.6;\n      let lf = 1.02 - 0.12 * (y / H);\n      if (x === X0 || y === Y0) lf *= 1.08;\n      if (x === X1 || y === Y1) lf *= 0.7;\n      for (let c = 0; c \u003c 3; c++) B.col[i * 3 + c] = (WC[lo][c] + (WC[lo + 1][c] - WC[lo][c]) * t) * lf + B.nz[i * 3 + c];\n    }\n  B.at = wood;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    time: 0, ph: 0, pt: 0, tau: 0, power: 0, wood: 0, eta: 1, lead: 0, ym: 64,\n    own: new Uint8Array(N), twg: new Uint8Array(N), par: new Int32Array(N), cnt: new Int32Array(N), born: F32(N),\n    phi: F32(N), phi0: F32(N), chr: F32(N), sco: F32(N), ht: F32(N),\n    cand: [new Int32Array(N), new Int32Array(N)], cw: [F32(N), F32(N)], nc: [0, 0], acc: [0, 0], tac: [0, 0], tw: [], ntw: 0, cells: [new Int32Array(N), new Int32Array(N)], ncell: [1, 1], nsk: [1, 1],\n    fr: [TY, BY], meet: -1, meetQ: -1, path: new Int32Array(N), np: 0,\n    pl: F32(N), sm: F32(N), puffs: [], ring: new Int32Array(512), nr: 0, hot: new Int32Array(32), nh: 0, flash: 0,\n    wa: wood(), wb: wood(),\n  });\n  for (let k = 0; k \u003c 256; k++) P.tw.push({ left: 0 }), k \u003c 70 && P.puffs.push({ on: 0 });\n  // The field round the two bare electrodes, solved once from a straight ramp.\n  for (let y = Y0; y \u003c= Y1; y++) for (let x = X0; x \u003c= X1; x++) P.phi[y * W + x] = cl((y - TY) / (BY - TY), 0, 1);\n  (P.own[TY * W + TX] = 1), (P.phi[TY * W + TX] = 0), (P.own[BY * W + BX] = 2), (P.phi[BY * W + BX] = 1);\n  relax(P, 400);\n  P.phi0.set(P.phi);\n  fresh(P);\n}\n\n// A clean board under the electrodes, wet and unburnt.\nfunction fresh(P) {\n  for (const a of [P.own, P.twg, P.cnt, P.chr, P.sco, P.ht]) a.fill(0);\n  P.par.fill(-1);\n  P.born.fill(-9);\n  P.phi.set(P.phi0);\n  for (const t of P.tw) t.left = 0;\n  const t = TY * W + TX, b = BY * W + BX;\n  (P.own[t] = P.cnt[t] = P.cnt[b] = 1), (P.own[b] = 2), (P.cells[0][0] = t), (P.cells[1][0] = b);\n  Object.assign(P, { ncell: [1, 1], nsk: [1, 1], fr: [TY, BY], acc: [0, 0], tac: [0, 0], meet: -1, meetQ: -1, np: 0, tau: 0 });\n}\n\n// Red-black over-relaxation of Laplace's equation on the board: the top tree\n// held at 0, the bottom one at 1, the board's edges insulating.\nfunction relax(P, sweeps) {\n  const { own, phi } = P;\n  for (let s = 0; s \u003c sweeps; s++)\n    for (let c = 0; c \u003c 2; c++)\n      for (let y = Y0; y \u003c= Y1; y++) {\n        const r = y * W;\n        for (let x = X0 + ((y + c) & 1); x \u003c= X1; x += 2) {\n          const i = r + x;\n          if (own[i]) continue;\n          const v = phi[i];\n          const a = x > X0 ? phi[i - 1] : v, b = x \u003c X1 ? phi[i + 1] : v, u = y > Y0 ? phi[i - W] : v, d = y \u003c Y1 ? phi[i + W] : v;\n          phi[i] = v + 1.85 * ((a + b + u + d) * 0.25 - v);\n        }\n      }\n}\n\n// A wood cell beside one cell of a tree, or touching one at a corner, may\n// join it, with a chance that goes as the field there to the power eta.\n// Nothing off the board ever joins, so neighbours need no bounds checks.\nfunction scan(P, eta) {\n  const { own, phi, cand, cw } = P, n = [0, 0], t = [0, 0];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      if (own[i]) continue;\n      // Neighbours of each tree counted in one number, four bits a tree.\n      const s4 = LUT[own[i - 1]] + LUT[own[i + 1]] + LUT[own[i - W]] + LUT[own[i + W]];\n      const s8 = LUT[own[i - W - 1]] + LUT[own[i - W + 1]] + LUT[own[i + W - 1]] + LUT[own[i + W + 1]];\n      for (let k = 0; k \u003c 2; k++) {\n        const a = (s4 >> (4 * k)) & 15;\n        if (a > 1 || (!a && ((s8 >> (4 * k)) & 15) !== 1)) continue;\n        t[k] += pow(max(k ? 1 - phi[i] : phi[i], 1e-5), eta);\n        cand[k][n[k]] = i;\n        cw[k][n[k]++] = t[k];\n      }\n    }\n  P.nc = n;\n}\n\n// A cell joins tree k only if branches stay one LED wide: nothing of the\n// tree may touch it but the cell it grows from and that cell's neighbours.\n// Touching the other tree is the meeting.\nfunction join(P, c, k, tw = 0) {\n  const { own } = P;\n  if (own[c]) return false;\n  let p = -1, m = 0;\n  for (const o of N4) if (own[c + o] === k) (p = c + o), m++;\n  if (m > 1) return false;\n  if (p \u003c 0) for (const o of ND) if (own[c + o] === k && p \u003c 0) p = c + o;\n  if (p \u003c 0) return false;\n  const px = p & 63, py = p >> 6;\n  let other = -1;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const q = c + dy * W + dx;\n      if (q === c || q === p || !own[q]) continue;\n      if (own[q] !== k) {\n        // The trees may not close before their time.\n        if (P.tau \u003c TG - 0.25) return false;\n        other = q;\n      } else if (abs((q & 63) - px) > 1 || abs((q >> 6) - py) > 1) return false;\n    }\n  add(P, c, p, k, tw);\n  if (other >= 0) (P.meet = c), (P.meetQ = other);\n  return true;\n}\n\nfunction add(P, c, p, k, tw) {\n  const { cnt, par } = P, y = c >> 6, x = c & 63;\n  (P.own[c] = k), (P.twg[c] = tw), (par[c] = p), (cnt[c] = P.ht[c] = P.chr[c] = 1), (P.born[c] = P.time), (P.phi[c] = k - 1);\n  P.fr[k - 1] = k === 1 ? max(P.fr[0], y) : min(P.fr[1], y);\n  scorch(P, x, y, 1, 0.04);\n  P.ring[P.nr++ & 511] = c;\n  P.cells[k - 1][P.ncell[k - 1]++] = c;\n  if (!tw) P.nsk[k - 1]++;\n  // The current that feeds every cell beyond reaches it through all the\n  // cells back to the electrode, and the busiest burn into wide grooves.\n  for (let a = p; a >= 0; a = par[a]) {\n    const w = WIDE.indexOf(++cnt[a]);\n    if (w >= 0) {\n      const ax = a & 63, ay = a >> 6, r = 1 + 0.6 * w;\n      scorch(P, ax, ay, r, w ? 0.9 : 0.7, 1);\n      scorch(P, ax, ay, r + 2, 0.35);\n    }\n  }\n}\n\n// With burn set, char a groove of radius r round (x, y), still warm;\n// without, brown the wood within r by v, less towards the edge.\nfunction scorch(P, x, y, r, v, burn) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy, q = qy * W + qx;\n      if (d2 > r * r || qx \u003c X0 || qx > X1 || qy \u003c Y0 || qy > Y1) continue;\n      if (!burn) P.sco[q] = min(1, P.sco[q] + v * (1 - d2 / (r * r + 1)));\n      else (P.chr[q] = max(P.chr[q], v)), (P.ht[q] = max(P.ht[q], 0.5 * v));\n    }\n}\n\nfunction grow(P, d) {\n  relax(P, 3);\n  // Each tree has a front it should have reached by now, eased in so the\n  // growth speeds up as the trees close (a hard pull sends leaders racing\n  // out at once), and a cell budget that rises steeply when it lags.\n  const s = min(1, P.tau / TG) ** (1.35 - 0.15 * P.eta), late = max(0, P.tau - TG);\n  const lag = [TY + (P.ym - TY) * s - P.fr[0], P.fr[1] - (BY - (BY - P.ym) * s)];\n  // The leading electrode's tree takes the larger share of the front's\n  // cells; fringe twigs sprout as fast as there is channel to carry them,\n  // fewer the harder the pull.\n  for (let k = 0; k \u003c 2; k++) {\n    const f = exp(cl(lag[k] / 6, -2, 2.5)), sh = 1 + (k ? 0.85 : -0.85) * P.lead;\n    P.acc[k] += d * RATE * sh * f * (1 + 4 * late);\n    P.tac[k] += d * TWIG * P.nsk[k] * ((4.5 - P.eta) / 3.5) ** 2;\n  }\n  twigs(P);\n  if (P.acc[0] \u003c 1 && P.acc[1] \u003c 1 && P.tac[0] \u003c 1 && P.tac[1] \u003c 1) return;\n  scan(P, P.eta + 2 * late);\n  for (let k = 0; k \u003c 2; k++) {\n    const n = min(120, floor(P.acc[k])), C = P.cand[k], S = P.cw[k], m = P.nc[k];\n    P.acc[k] -= n;\n    if (!m) continue;\n    const tot = S[m - 1];\n    for (let t = 0, tries = 0; t \u003c n && tries \u003c 3 * n; tries++) {\n      const r = rnd() * tot;\n      let lo = 0;\n      for (let hi = m - 1, mid; lo \u003c hi; ) (mid = (lo + hi) >> 1), S[mid] \u003c r ? (lo = mid + 1) : (hi = mid);\n      if (join(P, C[lo], k + 1)) t++;\n      if (P.meet >= 0) return;\n    }\n  }\n  // A fringe twig sprouts off a burnt channel, an eighth of a turn off it\n  // or now and then a quarter, and runs a few LEDs, bending as it goes. A\n  // twig sprouts shorter twigs of its own, three generations deep.\n  for (let tries = 0, k = 0; tries \u003c 300; tries++) {\n    if (P.tac[k] \u003c 1) k = 1 - k;\n    if (P.tac[k] \u003c 1) break;\n    const a = P.cells[k][floor(rnd() * P.ncell[k])], g = P.twg[a];\n    if (P.par[a] \u003c 0 || g > 2 || rnd() > GEN[g]) continue;\n    // The branch's way here, read over four cells so one step cannot throw it.\n    let b = a;\n    for (let n = 0; n \u003c 4 && P.par[b] >= 0; n++) b = P.par[b];\n    const j = round((Math.atan2((a >> 6) - (b >> 6), (a & 63) - (b & 63)) * 4) / Math.PI) & 7;\n    const dir = (j + (rnd() \u003c 0.5 ? 1 : 7) * (rnd() \u003c 0.85 ? 1 : 2)) & 7;\n    const x = (a & 63) + DIRS[dir][0], y = (a >> 6) + DIRS[dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, k + 1, g + 1)) continue;\n    P.tac[k]--;\n    if (P.meet >= 0) return;\n    Object.assign(P.tw[P.ntw++ & 255], { c, d0: dir, dir, k: k + 1, g: g + 1, left: LEN[g] + floor(rnd() * LEN[g]) });\n  }\n  P.tac = P.tac.map((v) => min(v, 4));\n}\n\nfunction twigs(P) {\n  for (const t of P.tw) {\n    if (t.left \u003c= 0) continue;\n    t.left--;\n    // A twig wanders an eighth of a turn, never further off its way.\n    if (rnd() \u003c 0.25) {\n      const dir = (t.dir + (rnd() \u003c 0.5 ? 1 : 7)) & 7, off = (dir - t.d0 + 8) & 7;\n      if (off \u003c= 1 || off >= 7) t.dir = dir;\n    }\n    const x = (t.c & 63) + DIRS[t.dir][0], y = (t.c >> 6) + DIRS[t.dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, t.k, t.g)) {\n      t.left = 0;\n      continue;\n    }\n    t.c = c;\n    if (P.meet >= 0) return;\n  }\n}\n\n// The joined path, from the top electrode to the bottom one.\nfunction trace(P) {\n  const top = P.own[P.meet] === 1 ? P.meet : P.meetQ, bot = top === P.meet ? P.meetQ : P.meet;\n  let n = 0;\n  for (let a = top; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.path.subarray(0, n).reverse();\n  for (let a = bot; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.np = n;\n  for (let j = 0; j \u003c n; j++) {\n    const a = P.path[j], x = a & 63, y = a >> 6;\n    scorch(P, x, y, 2, 1, 1);\n    scorch(P, x, y, 4, 0.5);\n    P.ht[a] = 1;\n  }\n}\n\nfunction go(P, ph) {\n  (P.ph = ph), (P.pt = 0);\n  if (ph === 1) P.power = 1;\n  if (ph === 2) trace(P), (P.flash = 1);\n  if (ph > 2) P.power = 0;\n  if (ph === 0) ([P.wa, P.wb] = [P.wb, P.wa]), fresh(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  (P.wood = cl(k[0], 0, 1)), (P.eta = cl(k[2], 1, 4)), (P.lead = cl(k[3], -1, 1));\n  P.ym = (TY + BY) / 2 - 44 * P.lead;\n  (P.time += d), (P.pt += d);\n  if (input.btnPressed && input.btnPressed[0] && P.ph > 0 && P.ph \u003c 4) go(P, 4);\n  const ph = P.ph;\n  if (ph === 0 && P.pt >= SOAK) go(P, 1);\n  else if (ph === 1) {\n    P.tau += d;\n    grow(P, d);\n    // A board the trees cannot cross trips the breaker without an arc.\n    if (P.meet >= 0) go(P, 2);\n    else if (P.tau > TG + 3) go(P, 3);\n  } else if (ph === 2) {\n    // The arc keeps its path white hot.\n    for (let j = 0; j \u003c P.np; j++) P.ht[P.path[j]] = 1;\n    if (P.pt >= ARC) go(P, 3);\n  } else if (ph === 3 && P.pt >= COOL) go(P, 4);\n  else if (ph === 4 && P.pt >= SLIDE) go(P, 0), (P.wb = wood());\n  P.flash = max(0, P.flash - d * 9);\n  heat(P, d), smoke(P, d);\n}\n\n// Embers: fresh channels glow and cool to char, while the power is on the\n// busy trunks stay hot, and anything hot browns the wood round it.\nfunction heat(P, d) {\n  const { ht, own, cnt, sco, hot } = P, dec = exp(-d / (P.power ? 0.3 : 0.9));\n  let sum = 0, nh = 0;\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let h = ht[i];\n      if (h \u003c 0.004 && !own[i]) continue;\n      h *= dec;\n      if (P.power && own[i] && cnt[i] > 24) h = max(h, min(0.6, 0.12 * (log2(cnt[i]) - 3.5)) * (0.85 + 0.15 * rnd()));\n      ht[i] = h;\n      if (h > 0.2 && (cnt[i] > 12 || !own[i])) {\n        sum += h;\n        for (const o of N4) sco[i + o] = min(1, sco[i + o] + d * h * 0.3);\n        if (nh \u003c 32) hot[nh++] = i;\n        else if (rnd() \u003c 0.05) hot[floor(rnd() * 32)] = i;\n      }\n    }\n  P.nh = nh;\n  P.heatSum = sum;\n}\n\n// Smoke puffs rise off the hot channels, spread and thin out.\nfunction smoke(P, d) {\n  let want = (P.ph === 4 ? 0 : P.heatSum) * d * 0.22;\n  for (const s of P.puffs) {\n    if (s.on) {\n      if ((s.age += d) > s.life) {\n        s.on = 0;\n        continue;\n      }\n      s.x += (s.vx + 3 * sin(s.age * 2.3 + s.y * 0.1)) * d;\n      s.y += s.vy * d;\n      s.r += d * 1.6;\n      continue;\n    }\n    if (want > rnd() && P.nh) {\n      const i = P.hot[floor(rnd() * P.nh)];\n      Object.assign(s, { on: 1, x: i & 63, y: i >> 6, vx: (rnd() - 0.5) * 4, vy: -8 - rnd() * 8, r: 1, a: 0.16 + rnd() * 0.16, age: 0, life: 2.5 + rnd() * 2 });\n      want -= 1;\n    }\n  }\n}\n\n// Plasma at (x, y): how strongly it covers each LED round it.\nfunction plasma(L, x, y, r, v) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy;\n      if (qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c H && d2 \u003c= r * r) L[qy * W + qx] += v / (1 + d2 * 2.5);\n    }\n}\n\n// Ember colour by heat: dull red, orange, then yellow-white.\nconst EK = [0, 0.25, 0.6, 1], EC = [[0, 0, 0], [175, 35, 6], [255, 110, 20], [255, 220, 140]];\nfunction ember(h, out) {\n  const j = h \u003c 0.25 ? 0 : h \u003c 0.6 ? 1 : 2, t = (min(h, 1) - EK[j]) / (EK[j + 1] - EK[j]);\n  for (let c = 0; c \u003c 3; c++) out[c] = EC[j][c] + (EC[j + 1][c] - EC[j][c]) * t;\n}\n\nconst EM = [0, 0, 0];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { own, chr, sco, ht, born, pl, sm } = P;\n  pl.fill(0);\n  sm.fill(0);\n  if (P.wa.at !== P.wood) paint(P.wa, P.wood);\n  if (P.ph === 4 && P.wb.at !== P.wood) paint(P.wb, P.wood);\n  const off = P.ph === 4 ? SL * (1 - (1 + Math.cos((Math.PI * min(1, P.pt / SLIDE)))) / 2) : 0, oy = round(off);\n\n  // Plasma at the tips, and short streamers crackling ahead of them.\n  if (P.power) {\n    for (let j = 0; j \u003c 512 && j \u003c P.nr; j++) {\n      const c = P.ring[(P.nr - 1 - j) & 511], age = P.time - born[c];\n      if (age > TIP) break;\n      // Twigs behind the front only flash orange.\n      if (P.twg[c] && (own[c] === 1 ? (c >> 6) \u003c P.fr[0] - 14 : (c >> 6) > P.fr[1] + 14)) continue;\n      const f = (1 - age / TIP) * (0.5 + 0.5 * rnd()), x = c & 63, y = (c >> 6) + oy;\n      plasma(pl, x, y, 1.5, f);\n      if (rnd() \u003c 0.2)\n        for (let st = 0, sx = x, sy = y, len = 2 + floor(rnd() * 5); st \u003c len; st++) {\n          if (rnd() \u003c 0.6) sy += own[c] === 1 ? 1 : -1;\n          else sx += rnd() \u003c 0.5 ? -1 : 1;\n          if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n          pl[sy * W + sx] += 0.9 - st * 0.12;\n        }\n    }\n    // A blue corona at each electrode.\n    const z = 0.4 + 0.4 * rnd();\n    plasma(pl, TX, TY + oy, 2.5, z);\n    plasma(pl, BX, BY + oy, 2.5, z);\n  }\n  // The arc down the joined path, flickering sideways.\n  if (P.ph === 2) {\n    const f = (1 - 0.6 * (P.pt / ARC)) * (0.7 + 0.3 * rnd()), seed = rnd() * 99;\n    for (let j = 0; j \u003c P.np; j++) {\n      const a = P.path[j], x = (a & 63) + round(1.6 * (vn(j * 0.3, seed) - 0.5)), y = a >> 6;\n      if (j % 2 === 0) plasma(pl, x, y, 3.5, 0.35 * f);\n      pl[y * W + x] += 3 * f;\n    }\n  }\n  for (const s of P.puffs) {\n    if (!s.on) continue;\n    // A wisp, twice as tall as it is wide.\n    const a = s.a * sin((Math.PI * s.age) / s.life), R = Math.ceil(s.r), R2 = 2 * R;\n    for (let dy = -R2; dy \u003c= R2; dy++)\n      for (let dx = -R; dx \u003c= R; dx++) {\n        const qx = round(s.x) + dx, qy = round(s.y) + dy, d2 = (dx * dx + dy * dy * 0.25) / (s.r * s.r);\n        if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H || d2 >= 1) continue;\n        sm[qy * W + qx] += a * (1 - d2) * (1 - d2);\n      }\n  }\n\n  const fl = P.flash * 70, CH = P.wa.ch, dry = P.ph > 1 ? 1 : P.ph ? P.tau / (TG + 0.5) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r, g, b;\n      // Which board, if any, is under this LED.\n      let yb = y - oy, B = P.wa, burnt = 1;\n      if (P.ph === 4 && yb \u003c Y0) (yb += SL), (B = P.wb), (burnt = 0);\n      if (x >= X0 && x \u003c= X1 && yb >= Y0 && yb \u003c= Y1) {\n        const i = yb * W + x, C = B.col;\n        // The wet wash glosses the wood; the current steams it off the whole\n        // board and the burn dries it at once.\n        const s = burnt ? sco[i] : 0, lf = 0.86 + 0.28 * B.wet[i] * max(0, 1 - 3 * s - (burnt ? dry : 0));\n        (r = C[i * 3] * lf), (g = C[i * 3 + 1] * lf), (b = C[i * 3 + 2] * lf);\n        if (burnt) {\n          if (s > 0) (r *= 1 - 0.5 * s), (g *= 1 - 0.66 * s), (b *= 1 - 0.8 * s);\n          const c = chr[i];\n          if (c > 0) (r += (CH[0] - r) * c), (g += (CH[1] - g) * c), (b += (CH[2] - b) * c);\n          const h = ht[i];\n          if (h > 0.02 && c > 0.3) {\n            // Thick char glows only along its rim.\n            const rim = (x > X0 && chr[i - 1] \u003c 0.5) || (x \u003c X1 && chr[i + 1] \u003c 0.5) || chr[i - W] \u003c 0.5 || chr[i + W] \u003c 0.5;\n            ember(h * (rim ? 1 : 0.45), EM);\n            (r = max(r, EM[0])), (g = max(g, EM[1])), (b = max(b, EM[2]));\n          }\n        }\n        (r += fl), (g += fl), (b += fl * 1.2);\n      } else {\n        // The dark rig behind, with the board's shadow to its right.\n        const sh = x > X1 ? 0.55 : 1, q = hash(x, y);\n        (r = (RIG[0] + 6 * q) * sh), (g = (RIG[1] + 6 * hash(y, x)) * sh), (b = (RIG[2] + 6 * q) * sh);\n        if (x === 0 || x === 63) (r = 64 + 10 * q), (g = 66 + 10 * q), (b = 74 + 10 * q);\n      }\n      const m = min(0.7, sm[p]);\n      (r += (SMOKE[0] - r) * m), (g += (SMOKE[1] - g) * m), (b += (SMOKE[2] - b) * m);\n      // Plasma: deep blue where it is thin, blue-white where it is thick.\n      const t = pl[p];\n      if (t > 0.01) {\n        const u = min(1, t), w = min(1, t / 2.5);\n        (r += (90 + 160 * w - r) * u), (g += (120 + 130 * w - g) * u), (b += (255 - b) * u);\n      }\n      display.setPixel(x, y, cl(r, 0, 255) | 0, cl(g, 0, 255) | 0, cl(b, 0, 255) | 0);\n    }\n  electrodes(display, P);\n}\n\n// Brass clamps with their tips on the board, the red lead in from the top\n// and the black one from the bottom.\nfunction electrodes(display, P) {\n  for (let e = 0; e \u003c 2; e++) {\n    const cx = e ? BX : TX, s = e ? -1 : 1, y0 = e ? H - 1 : 0, lead = e ? [[96, 98, 110], [36, 36, 42]] : [[236, 84, 64], [172, 28, 22]];\n    for (let j = 0; j \u003c= 8; j++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const lit = j === 4 || dx === -3, dark = j === 7 || dx === 3;\n        let c = null;\n        if (j \u003c= 3 && abs(dx) \u003c= 1) c = lead[dx \u003c 0 ? 0 : 1];\n        else if (j >= 4 && j \u003c= 7) c = lit ? [236, 200, 110] : dark ? [130, 96, 40] : [196, 156, 70];\n        else if (j === 8 && !dx) c = P.power ? [210, 220, 255] : [240, 214, 130];\n        if (c) display.setPixel(cx + dx, y0 + s * j, c[0], c[1], c[2]);\n      }\n  }\n}\n","layer":{"id":"layer-lichtenberg","type":"code","name":"lichtenberg","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lichtenberg\n// Family:  fractal\n// Idea:    High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after fractal wood burning and the dielectric breakdown model (Niemeyer, Pietronero and Wiesmann, 1984)\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1\n//\n// Knob 1: Wood. Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash.\n// Knob 2: Speed. At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower.\n// Knob 3: Pull. The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders.\n// Knob 4: Lead. Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway.\n// Buttons: K1 tap cuts the power and slides the next board in now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, exp, sqrt, pow, sin, abs, log2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The board at rest fills columns X0..X1 and rows Y0..Y1; the electrodes\n// touch it at (TX, TY) and (BX, BY).\nconst X0 = 2, X1 = 61, Y0 = 3, Y1 = 124, TX = 32, TY = 9, BX = 31, BY = 118;\n// A board slides down this far for the next, with a few rows of rig between.\nconst SL = 131;\n// Seconds at Speed 2: wet board before the power, growth until the trees\n// meet, the arc, the embers dying, the slide.\nconst SOAK = 1.0, TG = 4.8, ARC = 0.5, COOL = 3, SLIDE = 1.6;\n// Cells each tree adds a second at the front when it keeps pace with its\n// schedule, and fringe twigs a second for every cell of its channels.\nconst RATE = 200, TWIG = 0.14;\n// A cell that joined the tree this recently is still plasma.\nconst TIP = 0.16;\nconst DIRS = [[1, 0], [1, 1], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1], [1, -1]];\n// How readily a channel, a twig and a twig's twig sprout a fringe twig,\n// and how far each new generation runs: three or four LEDs, two, then one.\nconst GEN = [1, 0.4, 0.25], LEN = [2, 1, 0];\n// A channel feeding this many cells beyond it burns a groove one, two,\n// three and four steps wider, with a brown scorch round it: the trunks\n// near the electrodes run thick and dark.\nconst WIDE = [12, 50, 160, 500];\n// How dark the curl's bands run, in grain darkness.\nconst CURL = 0.45;\nconst N4 = [-1, 1, -W, W], ND = [-W - 1, -W + 1, W - 1, W + 1], LUT = [0, 1, 16];\n\n// Board, grain, knot and char colours for maple, birch, walnut and\n// black-stained oak, where the burn leaves grey ash.\nconst WOODS = [\n  [[228, 196, 150], [160, 110, 66], [128, 76, 40], [30, 19, 14]],\n  [[244, 232, 204], [210, 186, 142], [120, 90, 58], [30, 19, 14]],\n  [[140, 90, 58], [88, 54, 34], [50, 30, 18], [26, 16, 12]],\n  [[50, 44, 46], [30, 26, 28], [18, 14, 14], [92, 86, 80]],\n];\nconst SMOKE = [196, 190, 184], RIG = [16, 17, 22];\n\n// One board's wood: grain darkness (above 1 in a knot), how wet the soda\n// wash left each spot, and a per-channel speckle.\nfunction wood() {\n  const g = F32(N), wet = F32(N), nz = new Int8Array(N * 3);\n  const ox = rnd() * 300, oy = rnd() * 300, per = 2.6 + rnd() * 0.6, tilt = (rnd() - 0.5) * 0.06;\n  const knots = [];\n  for (let k = 0, nk = 1 + floor(rnd() * 3); k \u003c nk; k++)\n    knots.push([X0 + 9 + rnd() * (X1 - X0 - 18), Y0 + 14 + rnd() * (Y1 - Y0 - 28), 1.6 + rnd() * 1.4]);\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let u = x + tilt * y + 9 * (vn(x / 26 + ox, y / 40 + oy) - 0.5) + 2 * (vn(x / 7 + oy, y / 11 + ox) - 0.5), kd = 0;\n      for (const [kx, ky, kr] of knots) {\n        const dx = x - kx, dy = (y - ky) / 2.2, d2 = dx * dx + dy * dy;\n        // The grain bends round a knot and crowds in close to it.\n        u += (kr * kr * 3 * dx) / (d2 + kr * kr);\n        kd = max(kd, 1 - sqrt(d2) / kr);\n      }\n      // Thin dark latewood lines, a pore streak here and there, and the curl\n      // of figured maple across the grain, a band every two rows or so.\n      const c = 0.5 + 0.5 * Math.cos((2 * Math.PI * u) / per);\n      let v = c ** 4 * (0.8 + 0.6 * vn(x / 5 + ox, y / 30)) + 0.22 * (hash(x, floor(y / 4) + 7) - 0.5);\n      v += CURL * (0.5 + 0.5 * Math.sin((2 * Math.PI * (y + 1.5 * vn(x / 6 + oy, y / 20))) / 2.3));\n      if (kd > 0) v = 1 + kd * 0.6;\n      g[i] = cl(v, 0, 1.6);\n      wet[i] = 0.5 + 0.5 * vn(x / 9 + oy, y / 9 + ox);\n      for (let ch = 0; ch \u003c 3; ch++) nz[i * 3 + ch] = round((rnd() - 0.5) * 4);\n    }\n  return { g, wet, nz, col: F32(N * 3), at: -1 };\n}\n\n// A board's colours for this K1: grain, knots, lamp, bevels and speckle.\nfunction paint(B, wood) {\n  const wv = wood * 3, wi = min(2, floor(wv)), wf = wv - wi, WC = [];\n  for (let j = 0; j \u003c 4; j++) WC.push([0, 1, 2].map((c) => WOODS[wi][j][c] + (WOODS[wi + 1][j][c] - WOODS[wi][j][c]) * wf));\n  B.ch = WC[3];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x, gv = B.g[i], lo = gv \u003c= 1 ? 0 : 1, t = gv \u003c= 1 ? gv : (gv - 1) / 0.6;\n      let lf = 1.02 - 0.12 * (y / H);\n      if (x === X0 || y === Y0) lf *= 1.08;\n      if (x === X1 || y === Y1) lf *= 0.7;\n      for (let c = 0; c \u003c 3; c++) B.col[i * 3 + c] = (WC[lo][c] + (WC[lo + 1][c] - WC[lo][c]) * t) * lf + B.nz[i * 3 + c];\n    }\n  B.at = wood;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    time: 0, ph: 0, pt: 0, tau: 0, power: 0, wood: 0, eta: 1, lead: 0, ym: 64,\n    own: new Uint8Array(N), twg: new Uint8Array(N), par: new Int32Array(N), cnt: new Int32Array(N), born: F32(N),\n    phi: F32(N), phi0: F32(N), chr: F32(N), sco: F32(N), ht: F32(N),\n    cand: [new Int32Array(N), new Int32Array(N)], cw: [F32(N), F32(N)], nc: [0, 0], acc: [0, 0], tac: [0, 0], tw: [], ntw: 0, cells: [new Int32Array(N), new Int32Array(N)], ncell: [1, 1], nsk: [1, 1],\n    fr: [TY, BY], meet: -1, meetQ: -1, path: new Int32Array(N), np: 0,\n    pl: F32(N), sm: F32(N), puffs: [], ring: new Int32Array(512), nr: 0, hot: new Int32Array(32), nh: 0, flash: 0,\n    wa: wood(), wb: wood(),\n  });\n  for (let k = 0; k \u003c 256; k++) P.tw.push({ left: 0 }), k \u003c 70 && P.puffs.push({ on: 0 });\n  // The field round the two bare electrodes, solved once from a straight ramp.\n  for (let y = Y0; y \u003c= Y1; y++) for (let x = X0; x \u003c= X1; x++) P.phi[y * W + x] = cl((y - TY) / (BY - TY), 0, 1);\n  (P.own[TY * W + TX] = 1), (P.phi[TY * W + TX] = 0), (P.own[BY * W + BX] = 2), (P.phi[BY * W + BX] = 1);\n  relax(P, 400);\n  P.phi0.set(P.phi);\n  fresh(P);\n}\n\n// A clean board under the electrodes, wet and unburnt.\nfunction fresh(P) {\n  for (const a of [P.own, P.twg, P.cnt, P.chr, P.sco, P.ht]) a.fill(0);\n  P.par.fill(-1);\n  P.born.fill(-9);\n  P.phi.set(P.phi0);\n  for (const t of P.tw) t.left = 0;\n  const t = TY * W + TX, b = BY * W + BX;\n  (P.own[t] = P.cnt[t] = P.cnt[b] = 1), (P.own[b] = 2), (P.cells[0][0] = t), (P.cells[1][0] = b);\n  Object.assign(P, { ncell: [1, 1], nsk: [1, 1], fr: [TY, BY], acc: [0, 0], tac: [0, 0], meet: -1, meetQ: -1, np: 0, tau: 0 });\n}\n\n// Red-black over-relaxation of Laplace's equation on the board: the top tree\n// held at 0, the bottom one at 1, the board's edges insulating.\nfunction relax(P, sweeps) {\n  const { own, phi } = P;\n  for (let s = 0; s \u003c sweeps; s++)\n    for (let c = 0; c \u003c 2; c++)\n      for (let y = Y0; y \u003c= Y1; y++) {\n        const r = y * W;\n        for (let x = X0 + ((y + c) & 1); x \u003c= X1; x += 2) {\n          const i = r + x;\n          if (own[i]) continue;\n          const v = phi[i];\n          const a = x > X0 ? phi[i - 1] : v, b = x \u003c X1 ? phi[i + 1] : v, u = y > Y0 ? phi[i - W] : v, d = y \u003c Y1 ? phi[i + W] : v;\n          phi[i] = v + 1.85 * ((a + b + u + d) * 0.25 - v);\n        }\n      }\n}\n\n// A wood cell beside one cell of a tree, or touching one at a corner, may\n// join it, with a chance that goes as the field there to the power eta.\n// Nothing off the board ever joins, so neighbours need no bounds checks.\nfunction scan(P, eta) {\n  const { own, phi, cand, cw } = P, n = [0, 0], t = [0, 0];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      if (own[i]) continue;\n      // Neighbours of each tree counted in one number, four bits a tree.\n      const s4 = LUT[own[i - 1]] + LUT[own[i + 1]] + LUT[own[i - W]] + LUT[own[i + W]];\n      const s8 = LUT[own[i - W - 1]] + LUT[own[i - W + 1]] + LUT[own[i + W - 1]] + LUT[own[i + W + 1]];\n      for (let k = 0; k \u003c 2; k++) {\n        const a = (s4 >> (4 * k)) & 15;\n        if (a > 1 || (!a && ((s8 >> (4 * k)) & 15) !== 1)) continue;\n        t[k] += pow(max(k ? 1 - phi[i] : phi[i], 1e-5), eta);\n        cand[k][n[k]] = i;\n        cw[k][n[k]++] = t[k];\n      }\n    }\n  P.nc = n;\n}\n\n// A cell joins tree k only if branches stay one LED wide: nothing of the\n// tree may touch it but the cell it grows from and that cell's neighbours.\n// Touching the other tree is the meeting.\nfunction join(P, c, k, tw = 0) {\n  const { own } = P;\n  if (own[c]) return false;\n  let p = -1, m = 0;\n  for (const o of N4) if (own[c + o] === k) (p = c + o), m++;\n  if (m > 1) return false;\n  if (p \u003c 0) for (const o of ND) if (own[c + o] === k && p \u003c 0) p = c + o;\n  if (p \u003c 0) return false;\n  const px = p & 63, py = p >> 6;\n  let other = -1;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const q = c + dy * W + dx;\n      if (q === c || q === p || !own[q]) continue;\n      if (own[q] !== k) {\n        // The trees may not close before their time.\n        if (P.tau \u003c TG - 0.25) return false;\n        other = q;\n      } else if (abs((q & 63) - px) > 1 || abs((q >> 6) - py) > 1) return false;\n    }\n  add(P, c, p, k, tw);\n  if (other >= 0) (P.meet = c), (P.meetQ = other);\n  return true;\n}\n\nfunction add(P, c, p, k, tw) {\n  const { cnt, par } = P, y = c >> 6, x = c & 63;\n  (P.own[c] = k), (P.twg[c] = tw), (par[c] = p), (cnt[c] = P.ht[c] = P.chr[c] = 1), (P.born[c] = P.time), (P.phi[c] = k - 1);\n  P.fr[k - 1] = k === 1 ? max(P.fr[0], y) : min(P.fr[1], y);\n  scorch(P, x, y, 1, 0.04);\n  P.ring[P.nr++ & 511] = c;\n  P.cells[k - 1][P.ncell[k - 1]++] = c;\n  if (!tw) P.nsk[k - 1]++;\n  // The current that feeds every cell beyond reaches it through all the\n  // cells back to the electrode, and the busiest burn into wide grooves.\n  for (let a = p; a >= 0; a = par[a]) {\n    const w = WIDE.indexOf(++cnt[a]);\n    if (w >= 0) {\n      const ax = a & 63, ay = a >> 6, r = 1 + 0.6 * w;\n      scorch(P, ax, ay, r, w ? 0.9 : 0.7, 1);\n      scorch(P, ax, ay, r + 2, 0.35);\n    }\n  }\n}\n\n// With burn set, char a groove of radius r round (x, y), still warm;\n// without, brown the wood within r by v, less towards the edge.\nfunction scorch(P, x, y, r, v, burn) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy, q = qy * W + qx;\n      if (d2 > r * r || qx \u003c X0 || qx > X1 || qy \u003c Y0 || qy > Y1) continue;\n      if (!burn) P.sco[q] = min(1, P.sco[q] + v * (1 - d2 / (r * r + 1)));\n      else (P.chr[q] = max(P.chr[q], v)), (P.ht[q] = max(P.ht[q], 0.5 * v));\n    }\n}\n\nfunction grow(P, d) {\n  relax(P, 3);\n  // Each tree has a front it should have reached by now, eased in so the\n  // growth speeds up as the trees close (a hard pull sends leaders racing\n  // out at once), and a cell budget that rises steeply when it lags.\n  const s = min(1, P.tau / TG) ** (1.35 - 0.15 * P.eta), late = max(0, P.tau - TG);\n  const lag = [TY + (P.ym - TY) * s - P.fr[0], P.fr[1] - (BY - (BY - P.ym) * s)];\n  // The leading electrode's tree takes the larger share of the front's\n  // cells; fringe twigs sprout as fast as there is channel to carry them,\n  // fewer the harder the pull.\n  for (let k = 0; k \u003c 2; k++) {\n    const f = exp(cl(lag[k] / 6, -2, 2.5)), sh = 1 + (k ? 0.85 : -0.85) * P.lead;\n    P.acc[k] += d * RATE * sh * f * (1 + 4 * late);\n    P.tac[k] += d * TWIG * P.nsk[k] * ((4.5 - P.eta) / 3.5) ** 2;\n  }\n  twigs(P);\n  if (P.acc[0] \u003c 1 && P.acc[1] \u003c 1 && P.tac[0] \u003c 1 && P.tac[1] \u003c 1) return;\n  scan(P, P.eta + 2 * late);\n  for (let k = 0; k \u003c 2; k++) {\n    const n = min(120, floor(P.acc[k])), C = P.cand[k], S = P.cw[k], m = P.nc[k];\n    P.acc[k] -= n;\n    if (!m) continue;\n    const tot = S[m - 1];\n    for (let t = 0, tries = 0; t \u003c n && tries \u003c 3 * n; tries++) {\n      const r = rnd() * tot;\n      let lo = 0;\n      for (let hi = m - 1, mid; lo \u003c hi; ) (mid = (lo + hi) >> 1), S[mid] \u003c r ? (lo = mid + 1) : (hi = mid);\n      if (join(P, C[lo], k + 1)) t++;\n      if (P.meet >= 0) return;\n    }\n  }\n  // A fringe twig sprouts off a burnt channel, an eighth of a turn off it\n  // or now and then a quarter, and runs a few LEDs, bending as it goes. A\n  // twig sprouts shorter twigs of its own, three generations deep.\n  for (let tries = 0, k = 0; tries \u003c 300; tries++) {\n    if (P.tac[k] \u003c 1) k = 1 - k;\n    if (P.tac[k] \u003c 1) break;\n    const a = P.cells[k][floor(rnd() * P.ncell[k])], g = P.twg[a];\n    if (P.par[a] \u003c 0 || g > 2 || rnd() > GEN[g]) continue;\n    // The branch's way here, read over four cells so one step cannot throw it.\n    let b = a;\n    for (let n = 0; n \u003c 4 && P.par[b] >= 0; n++) b = P.par[b];\n    const j = round((Math.atan2((a >> 6) - (b >> 6), (a & 63) - (b & 63)) * 4) / Math.PI) & 7;\n    const dir = (j + (rnd() \u003c 0.5 ? 1 : 7) * (rnd() \u003c 0.85 ? 1 : 2)) & 7;\n    const x = (a & 63) + DIRS[dir][0], y = (a >> 6) + DIRS[dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, k + 1, g + 1)) continue;\n    P.tac[k]--;\n    if (P.meet >= 0) return;\n    Object.assign(P.tw[P.ntw++ & 255], { c, d0: dir, dir, k: k + 1, g: g + 1, left: LEN[g] + floor(rnd() * LEN[g]) });\n  }\n  P.tac = P.tac.map((v) => min(v, 4));\n}\n\nfunction twigs(P) {\n  for (const t of P.tw) {\n    if (t.left \u003c= 0) continue;\n    t.left--;\n    // A twig wanders an eighth of a turn, never further off its way.\n    if (rnd() \u003c 0.25) {\n      const dir = (t.dir + (rnd() \u003c 0.5 ? 1 : 7)) & 7, off = (dir - t.d0 + 8) & 7;\n      if (off \u003c= 1 || off >= 7) t.dir = dir;\n    }\n    const x = (t.c & 63) + DIRS[t.dir][0], y = (t.c >> 6) + DIRS[t.dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, t.k, t.g)) {\n      t.left = 0;\n      continue;\n    }\n    t.c = c;\n    if (P.meet >= 0) return;\n  }\n}\n\n// The joined path, from the top electrode to the bottom one.\nfunction trace(P) {\n  const top = P.own[P.meet] === 1 ? P.meet : P.meetQ, bot = top === P.meet ? P.meetQ : P.meet;\n  let n = 0;\n  for (let a = top; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.path.subarray(0, n).reverse();\n  for (let a = bot; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.np = n;\n  for (let j = 0; j \u003c n; j++) {\n    const a = P.path[j], x = a & 63, y = a >> 6;\n    scorch(P, x, y, 2, 1, 1);\n    scorch(P, x, y, 4, 0.5);\n    P.ht[a] = 1;\n  }\n}\n\nfunction go(P, ph) {\n  (P.ph = ph), (P.pt = 0);\n  if (ph === 1) P.power = 1;\n  if (ph === 2) trace(P), (P.flash = 1);\n  if (ph > 2) P.power = 0;\n  if (ph === 0) ([P.wa, P.wb] = [P.wb, P.wa]), fresh(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  (P.wood = cl(k[0], 0, 1)), (P.eta = cl(k[2], 1, 4)), (P.lead = cl(k[3], -1, 1));\n  P.ym = (TY + BY) / 2 - 44 * P.lead;\n  (P.time += d), (P.pt += d);\n  if (input.btnPressed && input.btnPressed[0] && P.ph > 0 && P.ph \u003c 4) go(P, 4);\n  const ph = P.ph;\n  if (ph === 0 && P.pt >= SOAK) go(P, 1);\n  else if (ph === 1) {\n    P.tau += d;\n    grow(P, d);\n    // A board the trees cannot cross trips the breaker without an arc.\n    if (P.meet >= 0) go(P, 2);\n    else if (P.tau > TG + 3) go(P, 3);\n  } else if (ph === 2) {\n    // The arc keeps its path white hot.\n    for (let j = 0; j \u003c P.np; j++) P.ht[P.path[j]] = 1;\n    if (P.pt >= ARC) go(P, 3);\n  } else if (ph === 3 && P.pt >= COOL) go(P, 4);\n  else if (ph === 4 && P.pt >= SLIDE) go(P, 0), (P.wb = wood());\n  P.flash = max(0, P.flash - d * 9);\n  heat(P, d), smoke(P, d);\n}\n\n// Embers: fresh channels glow and cool to char, while the power is on the\n// busy trunks stay hot, and anything hot browns the wood round it.\nfunction heat(P, d) {\n  const { ht, own, cnt, sco, hot } = P, dec = exp(-d / (P.power ? 0.3 : 0.9));\n  let sum = 0, nh = 0;\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let h = ht[i];\n      if (h \u003c 0.004 && !own[i]) continue;\n      h *= dec;\n      if (P.power && own[i] && cnt[i] > 24) h = max(h, min(0.6, 0.12 * (log2(cnt[i]) - 3.5)) * (0.85 + 0.15 * rnd()));\n      ht[i] = h;\n      if (h > 0.2 && (cnt[i] > 12 || !own[i])) {\n        sum += h;\n        for (const o of N4) sco[i + o] = min(1, sco[i + o] + d * h * 0.3);\n        if (nh \u003c 32) hot[nh++] = i;\n        else if (rnd() \u003c 0.05) hot[floor(rnd() * 32)] = i;\n      }\n    }\n  P.nh = nh;\n  P.heatSum = sum;\n}\n\n// Smoke puffs rise off the hot channels, spread and thin out.\nfunction smoke(P, d) {\n  let want = (P.ph === 4 ? 0 : P.heatSum) * d * 0.22;\n  for (const s of P.puffs) {\n    if (s.on) {\n      if ((s.age += d) > s.life) {\n        s.on = 0;\n        continue;\n      }\n      s.x += (s.vx + 3 * sin(s.age * 2.3 + s.y * 0.1)) * d;\n      s.y += s.vy * d;\n      s.r += d * 1.6;\n      continue;\n    }\n    if (want > rnd() && P.nh) {\n      const i = P.hot[floor(rnd() * P.nh)];\n      Object.assign(s, { on: 1, x: i & 63, y: i >> 6, vx: (rnd() - 0.5) * 4, vy: -8 - rnd() * 8, r: 1, a: 0.16 + rnd() * 0.16, age: 0, life: 2.5 + rnd() * 2 });\n      want -= 1;\n    }\n  }\n}\n\n// Plasma at (x, y): how strongly it covers each LED round it.\nfunction plasma(L, x, y, r, v) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy;\n      if (qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c H && d2 \u003c= r * r) L[qy * W + qx] += v / (1 + d2 * 2.5);\n    }\n}\n\n// Ember colour by heat: dull red, orange, then yellow-white.\nconst EK = [0, 0.25, 0.6, 1], EC = [[0, 0, 0], [175, 35, 6], [255, 110, 20], [255, 220, 140]];\nfunction ember(h, out) {\n  const j = h \u003c 0.25 ? 0 : h \u003c 0.6 ? 1 : 2, t = (min(h, 1) - EK[j]) / (EK[j + 1] - EK[j]);\n  for (let c = 0; c \u003c 3; c++) out[c] = EC[j][c] + (EC[j + 1][c] - EC[j][c]) * t;\n}\n\nconst EM = [0, 0, 0];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { own, chr, sco, ht, born, pl, sm } = P;\n  pl.fill(0);\n  sm.fill(0);\n  if (P.wa.at !== P.wood) paint(P.wa, P.wood);\n  if (P.ph === 4 && P.wb.at !== P.wood) paint(P.wb, P.wood);\n  const off = P.ph === 4 ? SL * (1 - (1 + Math.cos((Math.PI * min(1, P.pt / SLIDE)))) / 2) : 0, oy = round(off);\n\n  // Plasma at the tips, and short streamers crackling ahead of them.\n  if (P.power) {\n    for (let j = 0; j \u003c 512 && j \u003c P.nr; j++) {\n      const c = P.ring[(P.nr - 1 - j) & 511], age = P.time - born[c];\n      if (age > TIP) break;\n      // Twigs behind the front only flash orange.\n      if (P.twg[c] && (own[c] === 1 ? (c >> 6) \u003c P.fr[0] - 14 : (c >> 6) > P.fr[1] + 14)) continue;\n      const f = (1 - age / TIP) * (0.5 + 0.5 * rnd()), x = c & 63, y = (c >> 6) + oy;\n      plasma(pl, x, y, 1.5, f);\n      if (rnd() \u003c 0.2)\n        for (let st = 0, sx = x, sy = y, len = 2 + floor(rnd() * 5); st \u003c len; st++) {\n          if (rnd() \u003c 0.6) sy += own[c] === 1 ? 1 : -1;\n          else sx += rnd() \u003c 0.5 ? -1 : 1;\n          if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n          pl[sy * W + sx] += 0.9 - st * 0.12;\n        }\n    }\n    // A blue corona at each electrode.\n    const z = 0.4 + 0.4 * rnd();\n    plasma(pl, TX, TY + oy, 2.5, z);\n    plasma(pl, BX, BY + oy, 2.5, z);\n  }\n  // The arc down the joined path, flickering sideways.\n  if (P.ph === 2) {\n    const f = (1 - 0.6 * (P.pt / ARC)) * (0.7 + 0.3 * rnd()), seed = rnd() * 99;\n    for (let j = 0; j \u003c P.np; j++) {\n      const a = P.path[j], x = (a & 63) + round(1.6 * (vn(j * 0.3, seed) - 0.5)), y = a >> 6;\n      if (j % 2 === 0) plasma(pl, x, y, 3.5, 0.35 * f);\n      pl[y * W + x] += 3 * f;\n    }\n  }\n  for (const s of P.puffs) {\n    if (!s.on) continue;\n    // A wisp, twice as tall as it is wide.\n    const a = s.a * sin((Math.PI * s.age) / s.life), R = Math.ceil(s.r), R2 = 2 * R;\n    for (let dy = -R2; dy \u003c= R2; dy++)\n      for (let dx = -R; dx \u003c= R; dx++) {\n        const qx = round(s.x) + dx, qy = round(s.y) + dy, d2 = (dx * dx + dy * dy * 0.25) / (s.r * s.r);\n        if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H || d2 >= 1) continue;\n        sm[qy * W + qx] += a * (1 - d2) * (1 - d2);\n      }\n  }\n\n  const fl = P.flash * 70, CH = P.wa.ch, dry = P.ph > 1 ? 1 : P.ph ? P.tau / (TG + 0.5) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r, g, b;\n      // Which board, if any, is under this LED.\n      let yb = y - oy, B = P.wa, burnt = 1;\n      if (P.ph === 4 && yb \u003c Y0) (yb += SL), (B = P.wb), (burnt = 0);\n      if (x >= X0 && x \u003c= X1 && yb >= Y0 && yb \u003c= Y1) {\n        const i = yb * W + x, C = B.col;\n        // The wet wash glosses the wood; the current steams it off the whole\n        // board and the burn dries it at once.\n        const s = burnt ? sco[i] : 0, lf = 0.86 + 0.28 * B.wet[i] * max(0, 1 - 3 * s - (burnt ? dry : 0));\n        (r = C[i * 3] * lf), (g = C[i * 3 + 1] * lf), (b = C[i * 3 + 2] * lf);\n        if (burnt) {\n          if (s > 0) (r *= 1 - 0.5 * s), (g *= 1 - 0.66 * s), (b *= 1 - 0.8 * s);\n          const c = chr[i];\n          if (c > 0) (r += (CH[0] - r) * c), (g += (CH[1] - g) * c), (b += (CH[2] - b) * c);\n          const h = ht[i];\n          if (h > 0.02 && c > 0.3) {\n            // Thick char glows only along its rim.\n            const rim = (x > X0 && chr[i - 1] \u003c 0.5) || (x \u003c X1 && chr[i + 1] \u003c 0.5) || chr[i - W] \u003c 0.5 || chr[i + W] \u003c 0.5;\n            ember(h * (rim ? 1 : 0.45), EM);\n            (r = max(r, EM[0])), (g = max(g, EM[1])), (b = max(b, EM[2]));\n          }\n        }\n        (r += fl), (g += fl), (b += fl * 1.2);\n      } else {\n        // The dark rig behind, with the board's shadow to its right.\n        const sh = x > X1 ? 0.55 : 1, q = hash(x, y);\n        (r = (RIG[0] + 6 * q) * sh), (g = (RIG[1] + 6 * hash(y, x)) * sh), (b = (RIG[2] + 6 * q) * sh);\n        if (x === 0 || x === 63) (r = 64 + 10 * q), (g = 66 + 10 * q), (b = 74 + 10 * q);\n      }\n      const m = min(0.7, sm[p]);\n      (r += (SMOKE[0] - r) * m), (g += (SMOKE[1] - g) * m), (b += (SMOKE[2] - b) * m);\n      // Plasma: deep blue where it is thin, blue-white where it is thick.\n      const t = pl[p];\n      if (t > 0.01) {\n        const u = min(1, t), w = min(1, t / 2.5);\n        (r += (90 + 160 * w - r) * u), (g += (120 + 130 * w - g) * u), (b += (255 - b) * u);\n      }\n      display.setPixel(x, y, cl(r, 0, 255) | 0, cl(g, 0, 255) | 0, cl(b, 0, 255) | 0);\n    }\n  electrodes(display, P);\n}\n\n// Brass clamps with their tips on the board, the red lead in from the top\n// and the black one from the bottom.\nfunction electrodes(display, P) {\n  for (let e = 0; e \u003c 2; e++) {\n    const cx = e ? BX : TX, s = e ? -1 : 1, y0 = e ? H - 1 : 0, lead = e ? [[96, 98, 110], [36, 36, 42]] : [[236, 84, 64], [172, 28, 22]];\n    for (let j = 0; j \u003c= 8; j++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const lit = j === 4 || dx === -3, dark = j === 7 || dx === 3;\n        let c = null;\n        if (j \u003c= 3 && abs(dx) \u003c= 1) c = lead[dx \u003c 0 ? 0 : 1];\n        else if (j >= 4 && j \u003c= 7) c = lit ? [236, 200, 110] : dark ? [130, 96, 40] : [196, 156, 70];\n        else if (j === 8 && !dx) c = P.power ? [210, 220, 255] : [240, 214, 130];\n        if (c) display.setPixel(cx + dx, y0 + s * j, c[0], c[1], c[2]);\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wood","min":0,"max":1,"about":"Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower."},{"name":"Pull","min":1,"max":4,"about":"The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders."},{"name":"Lead","min":-1,"max":1,"about":"Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway."}],"start":[0,2,1,0.06],"measures":{"motion":0.2052,"detail":0.13,"edges":0.3965,"complexity":2.6118,"coverage":0.9587,"colour":0.1893,"drift":0.2406},"knobResponse":[0.4635,0.1257,0.0391,0.0652]},{"slug":"life","title":"Life","family":"automata","round":1,"note":"같은 여덟 이웃에 법칙이 여섯이에요. 세포가 나이만큼 색을 입어서 법칙마다 무엇이 남는지 보여요.","idea":"The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.","buttons":"K1 tap sweeps a fresh soup down the whole panel.","code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-life","type":"code","name":"life","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole palette, newborn to old to ghost, around the colour wheel."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from one to about 24."},{"name":"Rule","min":0,"max":5,"about":"0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345."},{"name":"Ghosts","min":0,"max":1,"about":"How long a dead cell glows on, from a short smear to long exposure."}],"start":[0,2,0,0.06],"measures":{"motion":0.6935,"detail":0.1138,"edges":0.7121,"complexity":0.3343,"coverage":0.2193,"colour":0.2429,"drift":0.1393},"knobResponse":[0.1027,0.1531,0.303,0.0806]},{"slug":"liftoff","title":"Liftoff","family":"flight","round":22,"note":"새벽 물 건너 발사대에서 로켓이 하얀 산소 김을 흘리며 서 있다가 김구름 속에 불을 붙이고 솟아올라요. 카메라가 따라 고개를 들면 하늘이 파랑에서 별 뜬 검정으로 바뀌고, Max-Q 와 단 분리를 지나 밝은 점이 되면 새 로켓이 발사대에 서요.","idea":"A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.","buttons":"K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.","code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","layer":{"id":"layer-liftoff","type":"code","name":"liftoff","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Rocket","min":0,"max":3,"about":"A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer."},{"name":"Stages","min":1,"max":3,"about":"1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb."},{"name":"Time","min":0,"max":1,"about":"Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun."}],"start":[0,2,1,0.06],"measures":{"motion":0.3231,"detail":0.0267,"edges":0.3728,"complexity":1.8839,"coverage":0.9986,"colour":0.2838,"drift":0.1066},"knobResponse":[0.0489,0.062,0.0431,0.4667]},{"slug":"lip-gloss","title":"Lip Gloss","family":"cosmetic","round":31,"note":"맑은 글로스가 위에서 부어져 옅은 벽을 타고 흘러내리고, 앞머리가 길이 다른 방울 줄기로 갈라져 끝마다 빛 한 점을 문 구슬이 맺혀요. 바닥에 닿은 구슬은 떨어지고 글로스는 얇아지며 맑아져요. K1 은 색상환을 다 돌고, 누르면 위에 새로 부어요.","idea":"A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.","buttons":"K1 tap pours a fresh band along the top now.","code":"// ===== Patternflow pattern =====\n// Title:   Lip Gloss\n// Family:  cosmetic\n// Idea:    A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after clear lip gloss sliding down a tester wall\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it.\n// Knob 2: Speed. How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Pour. How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front.\n// Knob 4: Shimmer. Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly.\n// Buttons: K1 tap pours a fresh band along the top now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: rose, not red.\nconst H0 = 0.935;\n// The film moves under gravity with a flux C*h^3 (a viscous film on a wall,\n// speed going as thickness squared), so a film one unit thick runs C rows a\n// second at its front at Speed 2. A pour lasts POUR seconds, one starts\n// every CYCLE seconds.\nconst C = 30, POUR = 3, CYCLE = 11;\n// Flecks of mica for the Shimmer knob, at most MAXF at once.\nconst MAXF = 700;\n// Beads hanging from the bottom edge, at most MAXD; one lets go once it holds\n// DROP units of gloss.\nconst MAXD = 24, DROP = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    h: F(N), hr: F(N), q: F(H), m: F(W), front: new Int16Array(W), hf: F(W),\n    T: 0, since: 0, pourLeft: 0, flow: 0, out: F(W),\n    dx: F(MAXD), dv: F(MAXD), df: F(MAXD), dvy: F(MAXD), nd: 0,\n    bx: F(MAXD * 3), by: F(MAXD * 3), br: F(MAXD * 3), nb: 0,\n    fx: F(MAXF), fy: F(MAXF), fp: F(MAXF), fw: F(MAXF), nf: 0, cover: 0,\n    hue: 0, rate: 1, amount: 0, shim: 0.06, started: false,\n    tint: F(3), absb: F(3), wall: F(3), pear: F(3), gain: 1, dim: 0.27, buf: F(N * 3),\n  };\n}\n\n// A fresh pour: how much gloss comes down each column. A film running down\n// a wall breaks its front into fingers (Huppert 1982), the columns that get\n// ahead taking more of the flow. Here the fingers are laid into the pour: a\n// thin sheet across the whole width with bumps on it of different heights,\n// and since the front runs at a speed that goes as thickness squared, each\n// bump runs ahead as a drip of its own length.\nfunction newPour(S) {\n  const P = S.amount, m = S.m, nf = round(3 + 5 * P + rnd() * 0.8);\n  const base = 0.1 + 0.95 * P;\n  for (let x = 0; x \u003c W; x++) m[x] = base * (0.9 + 0.2 * rnd());\n  for (let k = 0; k \u003c nf; k++) {\n    const c = ((k + 0.5 + (rnd() - 0.5) * 0.7) / nf) * W, w = (1.6 + 1.3 * rnd()) * (1.3 - 0.4 * P);\n    const a = (0.6 + 1.0 * rnd()) * (1 - 0.55 * P);\n    for (let x = 0; x \u003c W; x++) m[x] += a * exp(-(((x + 0.5 - c) / w) ** 2));\n  }\n  S.pourLeft = POUR * (1 - 0.35 * P);\n  S.since = 0;\n  S.flow = C * (0.85 + 0.6 * P);\n}\n\nfunction flecks(S, st) {\n  // Mica hangs all through the gloss: new flecks turn up wherever the film is\n  // thick enough to hold them, as many as Shimmer asks for the film there is,\n  // and each rides down at the surface speed of the film under it, half as\n  // fast again as the film's mean.\n  const h = S.h, want = min(MAXF, S.shim * 1000 * S.cover);\n  for (let tries = 0; tries \u003c 60 && S.nf \u003c want; tries++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (h[floor(y) * W + floor(x)] \u003c 0.15) continue;\n    const i = S.nf++;\n    S.fx[i] = x;\n    S.fy[i] = y;\n    S.fp[i] = rnd() * 2 * PI;\n    S.fw[i] = (1.5 + 2.5 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  }\n  for (let i = S.nf - 1; i >= 0; i--) {\n    const hh = h[floor(S.fy[i]) * W + floor(S.fx[i])];\n    S.fy[i] += 1.5 * C * hh * hh * st;\n    S.fp[i] += S.fw[i] * st;\n    if (S.fy[i] >= H || hh \u003c 0.06 || S.nf > want + 20) {\n      const j = --S.nf;\n      S.fx[i] = S.fx[j];\n      S.fy[i] = S.fy[j];\n      S.fp[i] = S.fp[j];\n      S.fw[i] = S.fw[j];\n    }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= CYCLE) newPour(S);\n  const h = S.h, q = S.q, m = S.m;\n  // The pour feeds the top row; as it ends it tapers off over half a second.\n  if (S.pourLeft > 0) {\n    const f = S.flow * min(1, S.pourLeft * 2) * st;\n    for (let x = 0; x \u003c W; x++) h[x] += m[x] * f;\n    S.pourLeft -= st;\n  }\n  // Each column runs down with flux C*h^3, worked upwind in steps short\n  // enough for the fastest wave, which runs at 3*C*h^2.\n  let hm = 0;\n  for (let p = 0; p \u003c N; p++) if (h[p] > hm) hm = h[p];\n  const n = Math.ceil((st * 3 * C * hm * hm) / 0.8) || 1, dt = st / n;\n  for (let k = 0; k \u003c n; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      for (let y = 0, p = x; y \u003c H; y++, p += W) {\n        const v = h[p];\n        q[y] = C * v * v * v;\n      }\n      h[x] -= dt * q[0];\n      S.out[x] += dt * q[H - 1];\n      for (let y = 1, p = x + W; y \u003c H; y++, p += W) h[p] += dt * (q[y - 1] - q[y]);\n    }\n  }\n  // Surface tension pulls a little gloss sideways, so the drips stay round.\n  const D = min(0.2, 0.7 * st);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let prev = h[o];\n    for (let x = 0; x \u003c W; x++) {\n      const c = h[o + x], r = x \u003c W - 1 ? h[o + x + 1] : c;\n      h[o + x] = c + D * (prev + r - 2 * c);\n      prev = c;\n    }\n  }\n  // A film thinner than 0.45 slowly soaks away, the thinner the faster, so\n  // the wall clears from the top, where the draining film is thinnest, while\n  // the drips stay.\n  const fade = 0.075 * st;\n  let cover = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const v = h[p];\n    if (v \u003c 0.45) h[p] = max(0, v - fade * (1 - v / 0.45));\n    if (v > 0.15) cover++;\n  }\n  S.cover = cover / N;\n  flecks(S, st);\n  drops(S, st);\n}\n\n// What runs off the bottom row gathers into a bead hanging from the edge\n// under its drip; a full bead lets go and falls away.\nfunction drops(S, st) {\n  const out = S.out;\n  for (let x = 0; x \u003c W; x++) {\n    const v = out[x];\n    if (v \u003c= 0) continue;\n    out[x] = 0;\n    let b = -1, bd = 4.5;\n    for (let i = 0; i \u003c S.nd; i++) {\n      const d = abs(S.dx[i] - x - 0.5);\n      if (S.df[i] \u003c 0 && d \u003c bd) (bd = d), (b = i);\n    }\n    if (b \u003c 0) {\n      if (S.nd >= MAXD) continue;\n      b = S.nd++;\n      S.dx[b] = x + 0.5;\n      S.dv[b] = 0;\n      S.df[b] = -1;\n    }\n    const nv = S.dv[b] + v;\n    S.dx[b] = (S.dx[b] * S.dv[b] + (x + 0.5) * v) / nv;\n    S.dv[b] = nv;\n  }\n  for (let i = S.nd - 1; i >= 0; i--) {\n    if (S.df[i] \u003c 0) {\n      // A bead nothing feeds any more slowly soaks away like the film.\n      S.dv[i] -= 0.12 * st;\n      if (S.dv[i] > DROP) (S.df[i] = 0), (S.dvy[i] = 20);\n      else if (S.dv[i] \u003c 0.05) S.df[i] = 99;\n      continue;\n    }\n    S.dvy[i] += 500 * st;\n    S.df[i] += S.dvy[i] * st;\n    if (S.df[i] > 14) {\n      const j = --S.nd;\n      S.dx[i] = S.dx[j];\n      S.dv[i] = S.dv[j];\n      S.df[i] = S.df[j];\n      S.dvy[i] = S.dvy[j];\n    }\n  }\n}\n\n// Adds a round bead of gloss, radius r and height A, centred at cx, cy.\nfunction dome(S, cx, cy, r, A) {\n  const { hr, h } = S;\n  if (S.nb \u003c MAXD * 3) {\n    S.bx[S.nb] = cx;\n    S.by[S.nb] = cy;\n    S.br[S.nb++] = r;\n  }\n  for (let y = max(0, floor(cy - r)); y \u003c= min(H - 1, floor(cy + r)); y++)\n    for (let X = max(0, floor(cx - r)); X \u003c= min(W - 1, floor(cx + r)); X++) {\n      const dx = (X + 0.5 - cx) / r, dy = (y + 0.5 - cy) / r, d2 = dx * dx + dy * dy;\n      if (d2 \u003c 1) {\n        const p = y * W + X;\n        hr[p] = max(hr[p], h[p] + A * sqrt(1 - d2));\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.amount = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    newPour(S);\n    // Open a second and a half into the first pour.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) newPour(S);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { h, hr, front, hf, buf, tint, absb, wall } = S;\n  const hue = H0 + S.hue;\n  // How the gloss tints the light that goes through it: each channel is cut\n  // by exp(-a*h), a taken from the tint so thick gloss is the deep colour.\n  hsv(hue, 0.8, 1, tint, 0);\n  for (let c = 0; c \u003c 3; c++) absb[c] = -Math.log(max(0.2, tint[c])) * 0.95;\n  // Orange and yellow tints darkened read brown and olive on LEDs; the wall\n  // is bright enough that they stay clear, and they get a touch more light.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.11) / 0.1);\n  S.gain = 1 + 0.08 * am;\n  S.dim = 0.27 * (1 - 0.85 * max(0, 1 - abs(hw - 0.13) / 0.16));\n  // The wall: a pale warm white with a breath of the tint.\n  hsv(hue + 0.04, 0.07, 1, wall, 0);\n  // Each column's front and the rim behind it: walking up from the bottom,\n  // every step where the film thickens adds to a ridge that fades over three\n  // rows, the capillary ridge a running film piles up at its front.\n  const kr = exp(-1 / 2.6);\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0, f = -1, fh = 0;\n    for (let y = H - 1; y >= 0; y--) {\n      const p = y * W + x, below = y \u003c H - 1 ? h[p + W] : 0, jump = h[p] - below;\n      r *= kr;\n      if (jump > 0.02) r += jump * 0.9;\n      if (f \u003c 0 && h[p] > 0.1) (f = y), (fh = h[p]);\n      hr[p] = h[p] + r;\n    }\n    front[x] = f;\n    hf[x] = fh;\n  }\n  S.nb = 0;\n  // Beads: where a column's front runs further than its neighbours', the\n  // gloss gathers into a round bead at the tip of the drip.\n  for (let x = 0; x \u003c W; x++) {\n    const f = front[x];\n    if (f \u003c 6 || f > H - 5) continue;\n    let tip = true, lo = 1e9;\n    for (let d = -3; d \u003c= 3 && tip; d++) {\n      if (!d) continue;\n      const xx = x + d;\n      if (xx \u003c 0 || xx >= W) continue;\n      if (front[xx] > f || (front[xx] === f && d \u003c 0)) tip = false;\n      lo = min(lo, front[xx]);\n    }\n    if (!tip || f - lo \u003c 2) continue;\n    const r = 2 + 1.8 * min(1.2, hf[x]);\n    dome(S, x + 0.5, f + 0.6 - r * 0.55, r, 0.5 + 0.7 * min(1.2, hf[x]));\n  }\n  for (let i = 0; i \u003c S.nd; i++) {\n    const r = 1.3 + 1.2 * sqrt(S.dv[i]);\n    dome(S, S.dx[i], H - 0.3 - r + max(0, S.df[i]), r, 0.6 + 0.15 * r);\n  }\n  // The light: a soft bar above the wall that glides down it, seen in the\n  // gloss as a mirror image moved by the slope of the surface, and a small\n  // lamp to one side that puts a point of light on every bead.\n  const T = S.T, ys = ((T * 9) % (H + 60)) - 30, lxa = 0.25 * sin(T * 0.37), lya = -0.32 + 0.08 * sin(T * 0.23);\n  let hx = lxa, hy = lya, hz = 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hl;\n  hy /= hl;\n  hz /= hl;\n  const sh = S.shim, pear = S.pear;\n  hsv(hue - 0.04, 0.3, 245, pear, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t0 = hr[p], t = t0 / (1 + 0.25 * t0);\n      const wb = (0.8 + 0.07 * exp(-(((x - 32) / 40) ** 2 + ((y - ys * 0.5 - 30) / 90) ** 2))) * 255;\n      const film = sm(0.02, 0.14, t);\n      let R = wall[0] * wb, G = wall[1] * wb, B = wall[2] * wb;\n      if (film > 0) {\n        // Thick gloss also dims the wall a little in every channel, the band\n        // and the beads most, so the deep parts read deeper; less so for the\n        // warm tints, which dimmed turn brown and olive.\n        const g = S.gain * exp(-S.dim * t * t);\n        R *= exp(-absb[0] * t) * g;\n        G *= exp(-absb[1] * t) * g;\n        B *= exp(-absb[2] * t) * g;\n        // Mica scatters light back out of the gloss, a pearly haze of the\n        // tint over the film that grows with Shimmer.\n        const pe = 0.42 * sh * film;\n        R += (pear[0] - R) * pe;\n        G += (pear[1] - G) * pe;\n        B += (pear[2] - B) * pe;\n        const gx = (hr[x \u003c W - 1 ? p + 1 : p] - hr[x > 0 ? p - 1 : p]) * 0.5;\n        const gy = (hr[y \u003c H - 1 ? p + W : p] - hr[y > 0 ? p - W : p]) * 0.5;\n        let nx = -gx * 3, ny = -gy * 3, nz = 1;\n        const nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        nx *= nl;\n        ny *= nl;\n        nz *= nl;\n        // The bar seen in the gloss.\n        const yr = y - ny * 22 + (x - 32) * 0.15, bar = exp(-(((yr - ys) / 5) ** 2)) * 0.26 * film;\n        // The lamp: a sharp highlight where the surface faces half way\n        // between it and the eye.\n        const nd = max(0, nx * hx + ny * hy + nz * hz), spot = pow(nd, 200) * film;\n        const s = (bar + spot * 1.3 * sm(0.08, 0.35, t)) * 255;\n        R += s;\n        G += s;\n        B += s;\n      }\n      const q = p * 3;\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  // Every bead holds a point of light on the side towards the lamp, and the\n  // light it gathers lands as a glow of the tint low on the far side.\n  const pl = sqrt(hx * hx + hy * hy) || 1, ux = hx / pl, uy = hy / pl;\n  for (let i = 0; i \u003c S.nb; i++) {\n    const r = S.br[i], cx = S.bx[i], cy = S.by[i];\n    glow(buf, cx + ux * r * 0.42, cy + uy * r * 0.42, 0.55 + 0.04 * r, 235, 235, 235);\n    glow(buf, cx - ux * r * 0.35, cy - uy * r * 0.35 + r * 0.15, r * 0.38, 110 * tint[0], 110 * tint[1], 110 * tint[2]);\n  }\n  // Mica flecks: a pale glint of the tint, flashing white as they turn to\n  // the lamp, a bright flash spilling onto the four LEDs round it.\n  for (let i = 0; i \u003c S.nf; i++) {\n    const x = floor(S.fx[i]), y = floor(S.fy[i]);\n    const f = exp((cos(S.fp[i]) - 1) / 0.08), q = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[q + c] += 70 * (0.4 + 0.6 * tint[c]) + 200 * f;\n    if (f > 0.6)\n      for (let k = 0; k \u003c 4; k++) {\n        const X = x + (k === 0 ? 1 : k === 1 ? -1 : 0), Y = y + (k === 2 ? 1 : k === 3 ? -1 : 0);\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const o = (Y * W + X) * 3;\n        buf[o] += 90 * f;\n        buf[o + 1] += 90 * f;\n        buf[o + 2] += 90 * f;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    display.setPixel(p % W, (p / W) | 0, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n  }\n}\n\n// A soft round spot of light, sigma s LEDs, added at x, y.\nfunction glow(buf, x, y, s, r, g, b) {\n  const e = s * 2.5, k = 1 / (2 * s * s);\n  for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n    for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n      const w = exp(-((X + 0.5 - x) ** 2 + (Y + 0.5 - y) ** 2) * k), q = (Y * W + X) * 3;\n      buf[q] += r * w;\n      buf[q + 1] += g * w;\n      buf[q + 2] += b * w;\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-lip-gloss","type":"code","name":"lip-gloss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lip Gloss\n// Family:  cosmetic\n// Idea:    A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after clear lip gloss sliding down a tester wall\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it.\n// Knob 2: Speed. How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Pour. How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front.\n// Knob 4: Shimmer. Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly.\n// Buttons: K1 tap pours a fresh band along the top now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: rose, not red.\nconst H0 = 0.935;\n// The film moves under gravity with a flux C*h^3 (a viscous film on a wall,\n// speed going as thickness squared), so a film one unit thick runs C rows a\n// second at its front at Speed 2. A pour lasts POUR seconds, one starts\n// every CYCLE seconds.\nconst C = 30, POUR = 3, CYCLE = 11;\n// Flecks of mica for the Shimmer knob, at most MAXF at once.\nconst MAXF = 700;\n// Beads hanging from the bottom edge, at most MAXD; one lets go once it holds\n// DROP units of gloss.\nconst MAXD = 24, DROP = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    h: F(N), hr: F(N), q: F(H), m: F(W), front: new Int16Array(W), hf: F(W),\n    T: 0, since: 0, pourLeft: 0, flow: 0, out: F(W),\n    dx: F(MAXD), dv: F(MAXD), df: F(MAXD), dvy: F(MAXD), nd: 0,\n    bx: F(MAXD * 3), by: F(MAXD * 3), br: F(MAXD * 3), nb: 0,\n    fx: F(MAXF), fy: F(MAXF), fp: F(MAXF), fw: F(MAXF), nf: 0, cover: 0,\n    hue: 0, rate: 1, amount: 0, shim: 0.06, started: false,\n    tint: F(3), absb: F(3), wall: F(3), pear: F(3), gain: 1, dim: 0.27, buf: F(N * 3),\n  };\n}\n\n// A fresh pour: how much gloss comes down each column. A film running down\n// a wall breaks its front into fingers (Huppert 1982), the columns that get\n// ahead taking more of the flow. Here the fingers are laid into the pour: a\n// thin sheet across the whole width with bumps on it of different heights,\n// and since the front runs at a speed that goes as thickness squared, each\n// bump runs ahead as a drip of its own length.\nfunction newPour(S) {\n  const P = S.amount, m = S.m, nf = round(3 + 5 * P + rnd() * 0.8);\n  const base = 0.1 + 0.95 * P;\n  for (let x = 0; x \u003c W; x++) m[x] = base * (0.9 + 0.2 * rnd());\n  for (let k = 0; k \u003c nf; k++) {\n    const c = ((k + 0.5 + (rnd() - 0.5) * 0.7) / nf) * W, w = (1.6 + 1.3 * rnd()) * (1.3 - 0.4 * P);\n    const a = (0.6 + 1.0 * rnd()) * (1 - 0.55 * P);\n    for (let x = 0; x \u003c W; x++) m[x] += a * exp(-(((x + 0.5 - c) / w) ** 2));\n  }\n  S.pourLeft = POUR * (1 - 0.35 * P);\n  S.since = 0;\n  S.flow = C * (0.85 + 0.6 * P);\n}\n\nfunction flecks(S, st) {\n  // Mica hangs all through the gloss: new flecks turn up wherever the film is\n  // thick enough to hold them, as many as Shimmer asks for the film there is,\n  // and each rides down at the surface speed of the film under it, half as\n  // fast again as the film's mean.\n  const h = S.h, want = min(MAXF, S.shim * 1000 * S.cover);\n  for (let tries = 0; tries \u003c 60 && S.nf \u003c want; tries++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (h[floor(y) * W + floor(x)] \u003c 0.15) continue;\n    const i = S.nf++;\n    S.fx[i] = x;\n    S.fy[i] = y;\n    S.fp[i] = rnd() * 2 * PI;\n    S.fw[i] = (1.5 + 2.5 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  }\n  for (let i = S.nf - 1; i >= 0; i--) {\n    const hh = h[floor(S.fy[i]) * W + floor(S.fx[i])];\n    S.fy[i] += 1.5 * C * hh * hh * st;\n    S.fp[i] += S.fw[i] * st;\n    if (S.fy[i] >= H || hh \u003c 0.06 || S.nf > want + 20) {\n      const j = --S.nf;\n      S.fx[i] = S.fx[j];\n      S.fy[i] = S.fy[j];\n      S.fp[i] = S.fp[j];\n      S.fw[i] = S.fw[j];\n    }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= CYCLE) newPour(S);\n  const h = S.h, q = S.q, m = S.m;\n  // The pour feeds the top row; as it ends it tapers off over half a second.\n  if (S.pourLeft > 0) {\n    const f = S.flow * min(1, S.pourLeft * 2) * st;\n    for (let x = 0; x \u003c W; x++) h[x] += m[x] * f;\n    S.pourLeft -= st;\n  }\n  // Each column runs down with flux C*h^3, worked upwind in steps short\n  // enough for the fastest wave, which runs at 3*C*h^2.\n  let hm = 0;\n  for (let p = 0; p \u003c N; p++) if (h[p] > hm) hm = h[p];\n  const n = Math.ceil((st * 3 * C * hm * hm) / 0.8) || 1, dt = st / n;\n  for (let k = 0; k \u003c n; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      for (let y = 0, p = x; y \u003c H; y++, p += W) {\n        const v = h[p];\n        q[y] = C * v * v * v;\n      }\n      h[x] -= dt * q[0];\n      S.out[x] += dt * q[H - 1];\n      for (let y = 1, p = x + W; y \u003c H; y++, p += W) h[p] += dt * (q[y - 1] - q[y]);\n    }\n  }\n  // Surface tension pulls a little gloss sideways, so the drips stay round.\n  const D = min(0.2, 0.7 * st);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let prev = h[o];\n    for (let x = 0; x \u003c W; x++) {\n      const c = h[o + x], r = x \u003c W - 1 ? h[o + x + 1] : c;\n      h[o + x] = c + D * (prev + r - 2 * c);\n      prev = c;\n    }\n  }\n  // A film thinner than 0.45 slowly soaks away, the thinner the faster, so\n  // the wall clears from the top, where the draining film is thinnest, while\n  // the drips stay.\n  const fade = 0.075 * st;\n  let cover = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const v = h[p];\n    if (v \u003c 0.45) h[p] = max(0, v - fade * (1 - v / 0.45));\n    if (v > 0.15) cover++;\n  }\n  S.cover = cover / N;\n  flecks(S, st);\n  drops(S, st);\n}\n\n// What runs off the bottom row gathers into a bead hanging from the edge\n// under its drip; a full bead lets go and falls away.\nfunction drops(S, st) {\n  const out = S.out;\n  for (let x = 0; x \u003c W; x++) {\n    const v = out[x];\n    if (v \u003c= 0) continue;\n    out[x] = 0;\n    let b = -1, bd = 4.5;\n    for (let i = 0; i \u003c S.nd; i++) {\n      const d = abs(S.dx[i] - x - 0.5);\n      if (S.df[i] \u003c 0 && d \u003c bd) (bd = d), (b = i);\n    }\n    if (b \u003c 0) {\n      if (S.nd >= MAXD) continue;\n      b = S.nd++;\n      S.dx[b] = x + 0.5;\n      S.dv[b] = 0;\n      S.df[b] = -1;\n    }\n    const nv = S.dv[b] + v;\n    S.dx[b] = (S.dx[b] * S.dv[b] + (x + 0.5) * v) / nv;\n    S.dv[b] = nv;\n  }\n  for (let i = S.nd - 1; i >= 0; i--) {\n    if (S.df[i] \u003c 0) {\n      // A bead nothing feeds any more slowly soaks away like the film.\n      S.dv[i] -= 0.12 * st;\n      if (S.dv[i] > DROP) (S.df[i] = 0), (S.dvy[i] = 20);\n      else if (S.dv[i] \u003c 0.05) S.df[i] = 99;\n      continue;\n    }\n    S.dvy[i] += 500 * st;\n    S.df[i] += S.dvy[i] * st;\n    if (S.df[i] > 14) {\n      const j = --S.nd;\n      S.dx[i] = S.dx[j];\n      S.dv[i] = S.dv[j];\n      S.df[i] = S.df[j];\n      S.dvy[i] = S.dvy[j];\n    }\n  }\n}\n\n// Adds a round bead of gloss, radius r and height A, centred at cx, cy.\nfunction dome(S, cx, cy, r, A) {\n  const { hr, h } = S;\n  if (S.nb \u003c MAXD * 3) {\n    S.bx[S.nb] = cx;\n    S.by[S.nb] = cy;\n    S.br[S.nb++] = r;\n  }\n  for (let y = max(0, floor(cy - r)); y \u003c= min(H - 1, floor(cy + r)); y++)\n    for (let X = max(0, floor(cx - r)); X \u003c= min(W - 1, floor(cx + r)); X++) {\n      const dx = (X + 0.5 - cx) / r, dy = (y + 0.5 - cy) / r, d2 = dx * dx + dy * dy;\n      if (d2 \u003c 1) {\n        const p = y * W + X;\n        hr[p] = max(hr[p], h[p] + A * sqrt(1 - d2));\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.amount = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    newPour(S);\n    // Open a second and a half into the first pour.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) newPour(S);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { h, hr, front, hf, buf, tint, absb, wall } = S;\n  const hue = H0 + S.hue;\n  // How the gloss tints the light that goes through it: each channel is cut\n  // by exp(-a*h), a taken from the tint so thick gloss is the deep colour.\n  hsv(hue, 0.8, 1, tint, 0);\n  for (let c = 0; c \u003c 3; c++) absb[c] = -Math.log(max(0.2, tint[c])) * 0.95;\n  // Orange and yellow tints darkened read brown and olive on LEDs; the wall\n  // is bright enough that they stay clear, and they get a touch more light.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.11) / 0.1);\n  S.gain = 1 + 0.08 * am;\n  S.dim = 0.27 * (1 - 0.85 * max(0, 1 - abs(hw - 0.13) / 0.16));\n  // The wall: a pale warm white with a breath of the tint.\n  hsv(hue + 0.04, 0.07, 1, wall, 0);\n  // Each column's front and the rim behind it: walking up from the bottom,\n  // every step where the film thickens adds to a ridge that fades over three\n  // rows, the capillary ridge a running film piles up at its front.\n  const kr = exp(-1 / 2.6);\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0, f = -1, fh = 0;\n    for (let y = H - 1; y >= 0; y--) {\n      const p = y * W + x, below = y \u003c H - 1 ? h[p + W] : 0, jump = h[p] - below;\n      r *= kr;\n      if (jump > 0.02) r += jump * 0.9;\n      if (f \u003c 0 && h[p] > 0.1) (f = y), (fh = h[p]);\n      hr[p] = h[p] + r;\n    }\n    front[x] = f;\n    hf[x] = fh;\n  }\n  S.nb = 0;\n  // Beads: where a column's front runs further than its neighbours', the\n  // gloss gathers into a round bead at the tip of the drip.\n  for (let x = 0; x \u003c W; x++) {\n    const f = front[x];\n    if (f \u003c 6 || f > H - 5) continue;\n    let tip = true, lo = 1e9;\n    for (let d = -3; d \u003c= 3 && tip; d++) {\n      if (!d) continue;\n      const xx = x + d;\n      if (xx \u003c 0 || xx >= W) continue;\n      if (front[xx] > f || (front[xx] === f && d \u003c 0)) tip = false;\n      lo = min(lo, front[xx]);\n    }\n    if (!tip || f - lo \u003c 2) continue;\n    const r = 2 + 1.8 * min(1.2, hf[x]);\n    dome(S, x + 0.5, f + 0.6 - r * 0.55, r, 0.5 + 0.7 * min(1.2, hf[x]));\n  }\n  for (let i = 0; i \u003c S.nd; i++) {\n    const r = 1.3 + 1.2 * sqrt(S.dv[i]);\n    dome(S, S.dx[i], H - 0.3 - r + max(0, S.df[i]), r, 0.6 + 0.15 * r);\n  }\n  // The light: a soft bar above the wall that glides down it, seen in the\n  // gloss as a mirror image moved by the slope of the surface, and a small\n  // lamp to one side that puts a point of light on every bead.\n  const T = S.T, ys = ((T * 9) % (H + 60)) - 30, lxa = 0.25 * sin(T * 0.37), lya = -0.32 + 0.08 * sin(T * 0.23);\n  let hx = lxa, hy = lya, hz = 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hl;\n  hy /= hl;\n  hz /= hl;\n  const sh = S.shim, pear = S.pear;\n  hsv(hue - 0.04, 0.3, 245, pear, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t0 = hr[p], t = t0 / (1 + 0.25 * t0);\n      const wb = (0.8 + 0.07 * exp(-(((x - 32) / 40) ** 2 + ((y - ys * 0.5 - 30) / 90) ** 2))) * 255;\n      const film = sm(0.02, 0.14, t);\n      let R = wall[0] * wb, G = wall[1] * wb, B = wall[2] * wb;\n      if (film > 0) {\n        // Thick gloss also dims the wall a little in every channel, the band\n        // and the beads most, so the deep parts read deeper; less so for the\n        // warm tints, which dimmed turn brown and olive.\n        const g = S.gain * exp(-S.dim * t * t);\n        R *= exp(-absb[0] * t) * g;\n        G *= exp(-absb[1] * t) * g;\n        B *= exp(-absb[2] * t) * g;\n        // Mica scatters light back out of the gloss, a pearly haze of the\n        // tint over the film that grows with Shimmer.\n        const pe = 0.42 * sh * film;\n        R += (pear[0] - R) * pe;\n        G += (pear[1] - G) * pe;\n        B += (pear[2] - B) * pe;\n        const gx = (hr[x \u003c W - 1 ? p + 1 : p] - hr[x > 0 ? p - 1 : p]) * 0.5;\n        const gy = (hr[y \u003c H - 1 ? p + W : p] - hr[y > 0 ? p - W : p]) * 0.5;\n        let nx = -gx * 3, ny = -gy * 3, nz = 1;\n        const nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        nx *= nl;\n        ny *= nl;\n        nz *= nl;\n        // The bar seen in the gloss.\n        const yr = y - ny * 22 + (x - 32) * 0.15, bar = exp(-(((yr - ys) / 5) ** 2)) * 0.26 * film;\n        // The lamp: a sharp highlight where the surface faces half way\n        // between it and the eye.\n        const nd = max(0, nx * hx + ny * hy + nz * hz), spot = pow(nd, 200) * film;\n        const s = (bar + spot * 1.3 * sm(0.08, 0.35, t)) * 255;\n        R += s;\n        G += s;\n        B += s;\n      }\n      const q = p * 3;\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  // Every bead holds a point of light on the side towards the lamp, and the\n  // light it gathers lands as a glow of the tint low on the far side.\n  const pl = sqrt(hx * hx + hy * hy) || 1, ux = hx / pl, uy = hy / pl;\n  for (let i = 0; i \u003c S.nb; i++) {\n    const r = S.br[i], cx = S.bx[i], cy = S.by[i];\n    glow(buf, cx + ux * r * 0.42, cy + uy * r * 0.42, 0.55 + 0.04 * r, 235, 235, 235);\n    glow(buf, cx - ux * r * 0.35, cy - uy * r * 0.35 + r * 0.15, r * 0.38, 110 * tint[0], 110 * tint[1], 110 * tint[2]);\n  }\n  // Mica flecks: a pale glint of the tint, flashing white as they turn to\n  // the lamp, a bright flash spilling onto the four LEDs round it.\n  for (let i = 0; i \u003c S.nf; i++) {\n    const x = floor(S.fx[i]), y = floor(S.fy[i]);\n    const f = exp((cos(S.fp[i]) - 1) / 0.08), q = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[q + c] += 70 * (0.4 + 0.6 * tint[c]) + 200 * f;\n    if (f > 0.6)\n      for (let k = 0; k \u003c 4; k++) {\n        const X = x + (k === 0 ? 1 : k === 1 ? -1 : 0), Y = y + (k === 2 ? 1 : k === 3 ? -1 : 0);\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const o = (Y * W + X) * 3;\n        buf[o] += 90 * f;\n        buf[o + 1] += 90 * f;\n        buf[o + 2] += 90 * f;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    display.setPixel(p % W, (p / W) | 0, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n  }\n}\n\n// A soft round spot of light, sigma s LEDs, added at x, y.\nfunction glow(buf, x, y, s, r, g, b) {\n  const e = s * 2.5, k = 1 / (2 * s * s);\n  for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n    for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n      const w = exp(-((X + 0.5 - x) ** 2 + (Y + 0.5 - y) ** 2) * k), q = (Y * W + X) * 3;\n      buf[q] += r * w;\n      buf[q + 1] += g * w;\n      buf[q + 2] += b * w;\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower."},{"name":"Pour","min":0,"max":1,"about":"How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front."},{"name":"Shimmer","min":0,"max":1,"about":"Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly."}],"start":[0,2,0,0.06],"measures":{"motion":0.0402,"detail":0.004,"edges":0.0558,"complexity":1.0787,"coverage":1,"colour":0.1859,"drift":0.0271},"knobResponse":[0.1707,0.0957,0.1771,0.0458]},{"slug":"littlewood-roots","title":"Littlewood Roots","family":"fractal","round":31,"note":"계수가 다 ±1 인 13차 다항식 8192개의 근 106,496개가 단위원 둘레에 옅은 레이스로 번지고, 1의 거듭제곱근 자리마다 구멍이 나요. 그레이 부호로 계수 하나씩 뒤집는 지금 다항식의 근이 불티로 옮겨 다니며 레이스를 다시 밝혀요. K1 을 누르면 단위원이 번쩍여요.","idea":"Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.","buttons":"K1 tap flashes the unit circle the lace hugs.","code":"// ===== Patternflow pattern =====\n// Title:   Littlewood Roots\n// Family:  fractal\n// Idea:    Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: roots of Littlewood polynomials (John Edensor Littlewood, 1966), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1\n//\n// Knob 1: Hue. Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white.\n// Knob 2: Speed. How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs.\n// Knob 3: Degree. The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16.\n// Knob 4: Glow. How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit.\n// Buttons: K1 tap flashes the unit circle the lace hugs.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 44 LEDs per unit: Re z from 0 to 1.45 across, Im z from 1.45 down to\n// -1.45, so the unit circle runs from row 20 to row 108. The set is the same\n// under z -> -z and z -> conj z, so the left half folds onto the right; all\n// roots lie in 1/2 \u003c |z| \u003c 2, and those beyond 1.45 are few.\nconst S = 44;\n// Widths in LEDs of the fine blur, the wide blur the lace is compared with,\n// the sparks and the light they leave.\nconst FINE = 0.6, WIDE = 2.5, SPARK = 1.8, DEP = 1.4;\nconst px = (re) => abs(re) * S - 0.5, py = (im) => H / 2 - 0.5 - im * S;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Normalised Gaussian kernels, three widths each side.\nfunction kernel(sg) {\n  const R = Math.ceil(sg * 3), k = new Float32Array(2 * R + 1);\n  let s = 0;\n  for (let i = -R; i \u003c= R; i++) s += k[i + R] = exp((-i * i) / (2 * sg * sg));\n  for (let i = 0; i \u003c= 2 * R; i++) k[i] /= s;\n  return k;\n}\nconst KF = kernel(FINE), KW = kernel(WIDE);\n\nexport function setup(params) {\n  params.s = {\n    n: 0, M: 0, i: 0, c: null, re: null, im: null, pr: null, pi: null, built: 0,\n    dens: new Float32Array(N), lace: new Float32Array(N), tmp: new Float32Array(N), wide: new Float32Array(N), glow: new Float32Array(N),\n    step: 0, hue: 0, sp: 2, tau: 1, ring: 0, glw: 0.06, col: new Float32Array(12), colHue: -1,\n  };\n}\n\n// The polynomial z^n + z^(n-1) + c(n-2) z^(n-2) + ... + c0 with every c = +-1.\n// Fixing the top two coefficients loses nothing: -p(-z) has the other sign\n// of z^(n-1), and its roots are -z, which fold onto the conjugates of the\n// roots of p. The walk starts at all +1, whose roots are the (n+1)th roots\n// of unity other than 1.\nfunction start(P, n) {\n  P.n = n;\n  P.M = 1 \u003c\u003c (n - 1);\n  P.i = 0;\n  P.built = 0;\n  P.c = new Float64Array(n + 1).fill(1);\n  P.re = new Float64Array(n);\n  P.im = new Float64Array(n);\n  P.pr = new Float64Array(n);\n  P.pi = new Float64Array(n);\n  for (let k = 0; k \u003c n; k++) {\n    const a = (2 * PI * (k + 1)) / (n + 1);\n    P.re[k] = P.pr[k] = cos(a);\n    P.im[k] = P.pi[k] = sin(a);\n  }\n  P.dens.fill(0);\n  P.lace.fill(0);\n}\n\n// Durand-Kerner (Weierstrass) iteration: every root at once moves by\n// p(z_r) / prod (z_r - z_s). Started from the roots of the polynomial one\n// sign flip back, it settles in about eight rounds. Returns false if it has\n// not settled.\nfunction solve(P, rounds) {\n  const n = P.n, c = P.c, re = P.re, im = P.im;\n  for (let it = 0; it \u003c rounds; it++) {\n    let mx = 0;\n    for (let r = 0; r \u003c n; r++) {\n      const x = re[r], y = im[r];\n      let pr = 1, pi = 0;\n      for (let k = n - 1; k >= 0; k--) {\n        const t = pr * x - pi * y + c[k];\n        pi = pr * y + pi * x;\n        pr = t;\n      }\n      let dr = 1, di = 0;\n      for (let s = 0; s \u003c n; s++) {\n        if (s === r) continue;\n        const ux = x - re[s], uy = y - im[s], t = dr * ux - di * uy;\n        di = dr * uy + di * ux;\n        dr = t;\n      }\n      let dd = dr * dr + di * di;\n      if (!(dd > 1e-30)) dd = 1e-30;\n      const qr = (pr * dr + pi * di) / dd, qi = (pi * dr - pr * di) / dd;\n      re[r] = x - qr;\n      im[r] = y - qi;\n      const m = qr * qr + qi * qi;\n      if (m > mx) mx = m;\n    }\n    if (mx \u003c 1e-13) return true;\n  }\n  return false;\n}\n\n// One step along the Gray code: flip the coefficient its index says, then\n// find the new roots. If the warm start fails (two roots nearly meeting),\n// start again from a circle.\nfunction advance(P) {\n  P.i = (P.i + 1) % P.M;\n  let b = P.n - 2;\n  if (P.i) for (b = 0; !((P.i >> b) & 1); b++);\n  P.c[b] = -P.c[b];\n  if (solve(P, 24)) return;\n  for (let k = 0; k \u003c P.n; k++) {\n    P.re[k] = 1.1 * cos((2 * PI * k) / P.n + 0.4);\n    P.im[k] = 1.1 * sin((2 * PI * k) / P.n + 0.4);\n  }\n  solve(P, 80);\n}\n\n// Bilinear splat of the folded roots into the density. The fold puts the\n// mirror line Re z = 0 half a LED left of column 0, so weight that falls\n// into column -1 belongs to column 0.\nfunction splat(P) {\n  const re = P.re, im = P.im, d = P.dens;\n  for (let r = 0; r \u003c P.n; r++) {\n    const X = px(re[r]), Y = py(im[r]);\n    const x0 = floor(X), y0 = floor(Y), fx = X - x0, fy = Y - y0;\n    if (!(x0 >= -1 && x0 \u003c W && y0 >= 0 && y0 \u003c H - 1)) continue;\n    const xa = x0 \u003c 0 ? 0 : x0, xb = x0 + 1;\n    d[y0 * W + xa] += (1 - fx) * (1 - fy);\n    d[(y0 + 1) * W + xa] += (1 - fx) * fy;\n    if (xb \u003c W) {\n      d[y0 * W + xb] += fx * (1 - fy);\n      d[(y0 + 1) * W + xb] += fx * fy;\n    }\n  }\n}\n\n// Separable blur of src into out with kernel k; the column left of 0 is the\n// mirror of column 0, as the fold makes it.\nfunction blur(src, out, tmp, k) {\n  const R = (k.length - 1) / 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        let xx = x + i;\n        if (xx \u003c 0) xx = -1 - xx;\n        else if (xx >= W) continue;\n        a += src[y * W + xx] * k[i + R];\n      }\n      tmp[y * W + x] = a;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        const yy = y + i;\n        if (yy >= 0 && yy \u003c H) a += tmp[yy * W + x] * k[i + R];\n      }\n      out[y * W + x] = a;\n    }\n}\n\n// The lace level, 0..1: the finely blurred density, normalised by the number\n// of roots expected in all so the lace fades in while it builds, and\n// sharpened against its own wide blur, so the holes round the roots of unity\n// go dark and the knots of the fringe stand out of the band.\nfunction tone(P) {\n  const L = P.lace, Wd = P.wide;\n  blur(P.dens, L, P.tmp, KF);\n  blur(P.dens, Wd, P.tmp, KW);\n  // About 3600 LEDs of band at this scale, so this makes its mean density 1.\n  const norm = 3600 / (P.M * P.n);\n  for (let p = 0; p \u003c N; p++) {\n    const a = L[p], q = a / (Wd[p] + 1e-9);\n    L[p] = min(1, min(1, (a * norm) / 2.5) ** 1.2 * min(1.6, q * q));\n  }\n}\n\nfunction blob(G, X, Y, sg, amp) {\n  const R = Math.ceil(sg * 2.6), k = 1 / (2 * sg * sg);\n  const xa = max(0, floor(X - R)), xb = min(W - 1, floor(X + R) + 1), ya = max(0, floor(Y - R)), yb = min(H - 1, floor(Y + R) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - X, dy = y - Y;\n      // The mirror image across Re z = 0 for blobs near the left edge.\n      const dm = x + 1 + X;\n      G[y * W + x] += amp * (exp(-(dx * dx + dy * dy) * k) + (X \u003c R ? exp(-(dm * dm + dy * dy) * k) : 0));\n    }\n}\n\nfunction colours(P) {\n  const h = P.hue + 0.42, c = P.col;\n  // The lace deep where it is thin and paler where it is dense, the light\n  // the sparks leave a little bluer, and the sparks nearly white.\n  hsv(h, 0.85, 1, c, 0);\n  hsv(h + 0.03, 0.4, 1, c, 9);\n  hsv(h + 0.07, 0.5, 1, c, 3);\n  hsv(h + 0.03, 0.18, 1, c, 6);\n  P.colHue = P.hue;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  // About a second at Glow 0, eight at 1.\n  P.glw = cl(k[3], 0, 1);\n  P.tau = 1.2 * 8 ** P.glw;\n  const n = round(cl(k[2], 13, 16));\n  if (n !== P.n) start(P, n);\n  if (P.built \u003c P.M) {\n    // Build the lace: about 1.3 million root updates a frame, so degree 13\n    // takes six frames and degree 16 about two seconds.\n    const per = max(64, floor(1.3e6 / (9 * n * n)));\n    for (let j = 0; j \u003c per && P.built \u003c P.M; j++, P.built++) {\n      advance(P);\n      splat(P);\n    }\n    tone(P);\n    if (P.built >= P.M) {\n      P.step = 0;\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n    }\n  } else {\n    // The walk: 4 x Speed flips a second. A spark glides from where it was\n    // to its new root over the first half of the step and lights the lace\n    // where it lands.\n    P.step += d * 4 * P.sp;\n    while (P.step >= 1) {\n      P.step -= 1;\n      for (let r = 0; r \u003c P.n; r++) blob(P.glow, px(P.re[r]), py(P.im[r]), DEP + 2.2 * P.glw, 0.55);\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n      advance(P);\n    }\n  }\n  const g = P.glow, f = exp(-d / P.tau);\n  for (let p = 0; p \u003c N; p++) g[p] *= f;\n  const b = input.btnPressed || [];\n  if (b[0]) P.ring = 1;\n  P.ring = max(0, P.ring - d * 0.6);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.colHue !== P.hue) colours(P);\n  const L = P.lace, G = P.glow, T = P.tmp, c = P.col;\n  // The sparks into the scratch buffer, eased between their old and new\n  // roots.\n  T.fill(0);\n  if (P.built >= P.M) {\n    let e = cl(P.step * 2, 0, 1);\n    e = e * e * (3 - 2 * e);\n    for (let r = 0; r \u003c P.n; r++) {\n      const x = P.pr[r] + (P.re[r] - P.pr[r]) * e, y = P.pi[r] + (P.im[r] - P.pi[r]) * e;\n      blob(T, px(x), py(y), SPARK + 1.4 * P.glw, 0.36);\n    }\n  }\n  const ring = P.ring * P.ring;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const l = L[p], lace = l > 0.09 ? (0.6 * (l - 0.09)) / 0.91 : 0, sp0 = T[p], m = 0.5 * l * l;\n      // The glow saturates softly and only lights the lace, so a place lit\n      // again and again shows the lace's own grain.\n      const gl = 0.4 * l * (1 - exp(-G[p] * 1.2));\n      let sp = sp0;\n      if (ring > 0) {\n        const re = (x + 0.5) / S, im = (H / 2 - 0.5 - y) / S, dr = (sqrt(re * re + im * im) - 1) * S;\n        sp += 0.45 * ring * exp(-dr * dr * 0.18);\n      }\n      const v1 = lace, v2 = gl, v3 = min(0.5, sp);\n      const lr = c[0] + (c[9] - c[0]) * m, lg = c[1] + (c[10] - c[1]) * m, lb = c[2] + (c[11] - c[2]) * m;\n      const r = lr * v1 + c[3] * v2 + c[6] * v3, g = lg * v1 + c[4] * v2 + c[7] * v3, b = lb * v1 + c[5] * v2 + c[8] * v3;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, b * 255));\n    }\n}\n","layer":{"id":"layer-littlewood-roots","type":"code","name":"littlewood-roots","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Littlewood Roots\n// Family:  fractal\n// Idea:    Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: roots of Littlewood polynomials (John Edensor Littlewood, 1966), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1\n//\n// Knob 1: Hue. Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white.\n// Knob 2: Speed. How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs.\n// Knob 3: Degree. The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16.\n// Knob 4: Glow. How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit.\n// Buttons: K1 tap flashes the unit circle the lace hugs.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 44 LEDs per unit: Re z from 0 to 1.45 across, Im z from 1.45 down to\n// -1.45, so the unit circle runs from row 20 to row 108. The set is the same\n// under z -> -z and z -> conj z, so the left half folds onto the right; all\n// roots lie in 1/2 \u003c |z| \u003c 2, and those beyond 1.45 are few.\nconst S = 44;\n// Widths in LEDs of the fine blur, the wide blur the lace is compared with,\n// the sparks and the light they leave.\nconst FINE = 0.6, WIDE = 2.5, SPARK = 1.8, DEP = 1.4;\nconst px = (re) => abs(re) * S - 0.5, py = (im) => H / 2 - 0.5 - im * S;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Normalised Gaussian kernels, three widths each side.\nfunction kernel(sg) {\n  const R = Math.ceil(sg * 3), k = new Float32Array(2 * R + 1);\n  let s = 0;\n  for (let i = -R; i \u003c= R; i++) s += k[i + R] = exp((-i * i) / (2 * sg * sg));\n  for (let i = 0; i \u003c= 2 * R; i++) k[i] /= s;\n  return k;\n}\nconst KF = kernel(FINE), KW = kernel(WIDE);\n\nexport function setup(params) {\n  params.s = {\n    n: 0, M: 0, i: 0, c: null, re: null, im: null, pr: null, pi: null, built: 0,\n    dens: new Float32Array(N), lace: new Float32Array(N), tmp: new Float32Array(N), wide: new Float32Array(N), glow: new Float32Array(N),\n    step: 0, hue: 0, sp: 2, tau: 1, ring: 0, glw: 0.06, col: new Float32Array(12), colHue: -1,\n  };\n}\n\n// The polynomial z^n + z^(n-1) + c(n-2) z^(n-2) + ... + c0 with every c = +-1.\n// Fixing the top two coefficients loses nothing: -p(-z) has the other sign\n// of z^(n-1), and its roots are -z, which fold onto the conjugates of the\n// roots of p. The walk starts at all +1, whose roots are the (n+1)th roots\n// of unity other than 1.\nfunction start(P, n) {\n  P.n = n;\n  P.M = 1 \u003c\u003c (n - 1);\n  P.i = 0;\n  P.built = 0;\n  P.c = new Float64Array(n + 1).fill(1);\n  P.re = new Float64Array(n);\n  P.im = new Float64Array(n);\n  P.pr = new Float64Array(n);\n  P.pi = new Float64Array(n);\n  for (let k = 0; k \u003c n; k++) {\n    const a = (2 * PI * (k + 1)) / (n + 1);\n    P.re[k] = P.pr[k] = cos(a);\n    P.im[k] = P.pi[k] = sin(a);\n  }\n  P.dens.fill(0);\n  P.lace.fill(0);\n}\n\n// Durand-Kerner (Weierstrass) iteration: every root at once moves by\n// p(z_r) / prod (z_r - z_s). Started from the roots of the polynomial one\n// sign flip back, it settles in about eight rounds. Returns false if it has\n// not settled.\nfunction solve(P, rounds) {\n  const n = P.n, c = P.c, re = P.re, im = P.im;\n  for (let it = 0; it \u003c rounds; it++) {\n    let mx = 0;\n    for (let r = 0; r \u003c n; r++) {\n      const x = re[r], y = im[r];\n      let pr = 1, pi = 0;\n      for (let k = n - 1; k >= 0; k--) {\n        const t = pr * x - pi * y + c[k];\n        pi = pr * y + pi * x;\n        pr = t;\n      }\n      let dr = 1, di = 0;\n      for (let s = 0; s \u003c n; s++) {\n        if (s === r) continue;\n        const ux = x - re[s], uy = y - im[s], t = dr * ux - di * uy;\n        di = dr * uy + di * ux;\n        dr = t;\n      }\n      let dd = dr * dr + di * di;\n      if (!(dd > 1e-30)) dd = 1e-30;\n      const qr = (pr * dr + pi * di) / dd, qi = (pi * dr - pr * di) / dd;\n      re[r] = x - qr;\n      im[r] = y - qi;\n      const m = qr * qr + qi * qi;\n      if (m > mx) mx = m;\n    }\n    if (mx \u003c 1e-13) return true;\n  }\n  return false;\n}\n\n// One step along the Gray code: flip the coefficient its index says, then\n// find the new roots. If the warm start fails (two roots nearly meeting),\n// start again from a circle.\nfunction advance(P) {\n  P.i = (P.i + 1) % P.M;\n  let b = P.n - 2;\n  if (P.i) for (b = 0; !((P.i >> b) & 1); b++);\n  P.c[b] = -P.c[b];\n  if (solve(P, 24)) return;\n  for (let k = 0; k \u003c P.n; k++) {\n    P.re[k] = 1.1 * cos((2 * PI * k) / P.n + 0.4);\n    P.im[k] = 1.1 * sin((2 * PI * k) / P.n + 0.4);\n  }\n  solve(P, 80);\n}\n\n// Bilinear splat of the folded roots into the density. The fold puts the\n// mirror line Re z = 0 half a LED left of column 0, so weight that falls\n// into column -1 belongs to column 0.\nfunction splat(P) {\n  const re = P.re, im = P.im, d = P.dens;\n  for (let r = 0; r \u003c P.n; r++) {\n    const X = px(re[r]), Y = py(im[r]);\n    const x0 = floor(X), y0 = floor(Y), fx = X - x0, fy = Y - y0;\n    if (!(x0 >= -1 && x0 \u003c W && y0 >= 0 && y0 \u003c H - 1)) continue;\n    const xa = x0 \u003c 0 ? 0 : x0, xb = x0 + 1;\n    d[y0 * W + xa] += (1 - fx) * (1 - fy);\n    d[(y0 + 1) * W + xa] += (1 - fx) * fy;\n    if (xb \u003c W) {\n      d[y0 * W + xb] += fx * (1 - fy);\n      d[(y0 + 1) * W + xb] += fx * fy;\n    }\n  }\n}\n\n// Separable blur of src into out with kernel k; the column left of 0 is the\n// mirror of column 0, as the fold makes it.\nfunction blur(src, out, tmp, k) {\n  const R = (k.length - 1) / 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        let xx = x + i;\n        if (xx \u003c 0) xx = -1 - xx;\n        else if (xx >= W) continue;\n        a += src[y * W + xx] * k[i + R];\n      }\n      tmp[y * W + x] = a;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        const yy = y + i;\n        if (yy >= 0 && yy \u003c H) a += tmp[yy * W + x] * k[i + R];\n      }\n      out[y * W + x] = a;\n    }\n}\n\n// The lace level, 0..1: the finely blurred density, normalised by the number\n// of roots expected in all so the lace fades in while it builds, and\n// sharpened against its own wide blur, so the holes round the roots of unity\n// go dark and the knots of the fringe stand out of the band.\nfunction tone(P) {\n  const L = P.lace, Wd = P.wide;\n  blur(P.dens, L, P.tmp, KF);\n  blur(P.dens, Wd, P.tmp, KW);\n  // About 3600 LEDs of band at this scale, so this makes its mean density 1.\n  const norm = 3600 / (P.M * P.n);\n  for (let p = 0; p \u003c N; p++) {\n    const a = L[p], q = a / (Wd[p] + 1e-9);\n    L[p] = min(1, min(1, (a * norm) / 2.5) ** 1.2 * min(1.6, q * q));\n  }\n}\n\nfunction blob(G, X, Y, sg, amp) {\n  const R = Math.ceil(sg * 2.6), k = 1 / (2 * sg * sg);\n  const xa = max(0, floor(X - R)), xb = min(W - 1, floor(X + R) + 1), ya = max(0, floor(Y - R)), yb = min(H - 1, floor(Y + R) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - X, dy = y - Y;\n      // The mirror image across Re z = 0 for blobs near the left edge.\n      const dm = x + 1 + X;\n      G[y * W + x] += amp * (exp(-(dx * dx + dy * dy) * k) + (X \u003c R ? exp(-(dm * dm + dy * dy) * k) : 0));\n    }\n}\n\nfunction colours(P) {\n  const h = P.hue + 0.42, c = P.col;\n  // The lace deep where it is thin and paler where it is dense, the light\n  // the sparks leave a little bluer, and the sparks nearly white.\n  hsv(h, 0.85, 1, c, 0);\n  hsv(h + 0.03, 0.4, 1, c, 9);\n  hsv(h + 0.07, 0.5, 1, c, 3);\n  hsv(h + 0.03, 0.18, 1, c, 6);\n  P.colHue = P.hue;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  // About a second at Glow 0, eight at 1.\n  P.glw = cl(k[3], 0, 1);\n  P.tau = 1.2 * 8 ** P.glw;\n  const n = round(cl(k[2], 13, 16));\n  if (n !== P.n) start(P, n);\n  if (P.built \u003c P.M) {\n    // Build the lace: about 1.3 million root updates a frame, so degree 13\n    // takes six frames and degree 16 about two seconds.\n    const per = max(64, floor(1.3e6 / (9 * n * n)));\n    for (let j = 0; j \u003c per && P.built \u003c P.M; j++, P.built++) {\n      advance(P);\n      splat(P);\n    }\n    tone(P);\n    if (P.built >= P.M) {\n      P.step = 0;\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n    }\n  } else {\n    // The walk: 4 x Speed flips a second. A spark glides from where it was\n    // to its new root over the first half of the step and lights the lace\n    // where it lands.\n    P.step += d * 4 * P.sp;\n    while (P.step >= 1) {\n      P.step -= 1;\n      for (let r = 0; r \u003c P.n; r++) blob(P.glow, px(P.re[r]), py(P.im[r]), DEP + 2.2 * P.glw, 0.55);\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n      advance(P);\n    }\n  }\n  const g = P.glow, f = exp(-d / P.tau);\n  for (let p = 0; p \u003c N; p++) g[p] *= f;\n  const b = input.btnPressed || [];\n  if (b[0]) P.ring = 1;\n  P.ring = max(0, P.ring - d * 0.6);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.colHue !== P.hue) colours(P);\n  const L = P.lace, G = P.glow, T = P.tmp, c = P.col;\n  // The sparks into the scratch buffer, eased between their old and new\n  // roots.\n  T.fill(0);\n  if (P.built >= P.M) {\n    let e = cl(P.step * 2, 0, 1);\n    e = e * e * (3 - 2 * e);\n    for (let r = 0; r \u003c P.n; r++) {\n      const x = P.pr[r] + (P.re[r] - P.pr[r]) * e, y = P.pi[r] + (P.im[r] - P.pi[r]) * e;\n      blob(T, px(x), py(y), SPARK + 1.4 * P.glw, 0.36);\n    }\n  }\n  const ring = P.ring * P.ring;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const l = L[p], lace = l > 0.09 ? (0.6 * (l - 0.09)) / 0.91 : 0, sp0 = T[p], m = 0.5 * l * l;\n      // The glow saturates softly and only lights the lace, so a place lit\n      // again and again shows the lace's own grain.\n      const gl = 0.4 * l * (1 - exp(-G[p] * 1.2));\n      let sp = sp0;\n      if (ring > 0) {\n        const re = (x + 0.5) / S, im = (H / 2 - 0.5 - y) / S, dr = (sqrt(re * re + im * im) - 1) * S;\n        sp += 0.45 * ring * exp(-dr * dr * 0.18);\n      }\n      const v1 = lace, v2 = gl, v3 = min(0.5, sp);\n      const lr = c[0] + (c[9] - c[0]) * m, lg = c[1] + (c[10] - c[1]) * m, lb = c[2] + (c[11] - c[2]) * m;\n      const r = lr * v1 + c[3] * v2 + c[6] * v3, g = lg * v1 + c[4] * v2 + c[7] * v3, b = lb * v1 + c[5] * v2 + c[8] * v3;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, b * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs."},{"name":"Degree","min":13,"max":16,"about":"The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16."},{"name":"Glow","min":0,"max":1,"about":"How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit."}],"start":[0,2,13,0.06],"measures":{"motion":0.2172,"detail":0.0303,"edges":0.1403,"complexity":0.6238,"coverage":0.2539,"colour":0.1322,"drift":0.0228},"knobResponse":[0.0566,0.0256,0.0365,0.0521]},{"slug":"loewner-trace","title":"Loewner Trace","family":"line","round":28,"note":"브라운 운동이 모는 슈람-뢰브너 곡선이 패널만 한 골짜기를 기어오르고, 그 곡선을 푸는 등각 사상의 격자가 곡선 끝을 돌아 휘어요. 화면은 곡선을 따라 끝없이 위로 흘러가요. K3 이 κ 를 4 에서 8 까지 올리면 곡선이 제 몸과 벽에 닿아 가둔 땅을 삼키고, 8 에서는 다 메워요. 누르면 새 브라운 경로로 다시 자라요.","idea":"A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.","buttons":"K1 tap starts a fresh Brownian path from the floor of the channel.","code":"// ===== Patternflow pattern =====\n// Title:   Loewner Trace\n// Family:  line\n// Idea:    A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schramm-Loewner evolution (Oded Schramm, 2000) grown with Loewner's equation (Charles Loewner, 1923), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages.\n// Knob 2: Speed. Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower.\n// Knob 3: Kappa. The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip.\n// Knob 4: Trace. Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black.\n// Buttons: K1 tap starts a fresh Brownian path from the floor of the channel.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, log, atan2, exp, abs, sin, cos, PI, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The panel is a half-strip of the plane 65 LEDs wide, its walls and floor\n// one LED beyond the outer LEDs so that none sits on the boundary. sin()\n// carries the half-strip onto the upper half-plane, where the Loewner\n// equation lives: the floor goes to [-1, 1], the walls to the rest of the\n// real line, and the top of the channel, however far it scrolls, to\n// infinity. Each row up the channel is a factor e^(pi/65) further out.\n// Scale invariance of SLE makes that a channel the curve climbs for ever.\nconst PX = PI / 65;\nconst M = 12; // Laurent terms of g_t at infinity, for rows that scroll in\nconst CAP = 1 \u003c\u003c 16; // steps of driving function kept for the tip\nconst BACK = 6000; // steps walked back when finding the tip\nconst V = 0.025; // LEDs the curve climbs a step, on average\nconst RATE = 600; // steps a second at Speed 1\nconst NEAR = 0.6; // an LED this close to the curve is the curve\nconst KNEAR = 0.1; // the next slit against the w-distance of the LED nearest the tip\nconst TIPROW = 52; // the view scrolls to keep the tip at least this far down\n\nfunction zOf(s, x, py) {\n  const xi = (x - 31.5) * PX, eta = (127 - py + 1 + s.scroll) * PX;\n  const a = exp(eta - s.lnL) * 0.5, b = exp(-eta - s.lnL) * 0.5, il = exp(-s.lnL);\n  const ch = a + b, sh = a - b, c = cos(xi);\n  return [sin(xi) * ch, c * sh, PX * sqrt(c * c * il * il + sh * sh)];\n}\n\nfunction fresh(s) {\n  s.scroll = 0;\n  s.lnL = 0;\n  s.t = 0;\n  s.Wd = 0;\n  s.n = 0;\n  s.tau = 0;\n  s.near = Infinity;\n  s.b.fill(0);\n  s.mk.fill(0);\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const [zx, zy, S] = zOf(s, x, py);\n      s.wx[p] = zx;\n      s.wy[p] = zy;\n      s.d2[p] = S * S;\n    }\n  s.tipx = 31.5;\n  s.tipy = 128;\n}\n\nfunction gauss(s) {\n  if (s.spare !== null) {\n    const g = s.spare;\n    s.spare = null;\n    return g;\n  }\n  let u = Math.random();\n  if (u \u003c 1e-12) u = 1e-12;\n  const r = sqrt(-2 * log(u)), a = 2 * PI * Math.random();\n  s.spare = r * sin(a);\n  return r * cos(a);\n}\n\n// One Loewner step: the driving point jumps, then a vertical slit of\n// half-plane capacity 2 dt grows at it. Every LED's g_t(z) goes through the\n// slit map w -> W + sqrt((w - W)^2 + 4 dt), and so do the Laurent\n// coefficients of g_t at infinity.\nfunction step(s, kappa) {\n  const il2 = exp(-2 * s.lnL), t = s.t;\n  const base = V * PX * sqrt((t + 0.25 * PX * PX * il2) * (il2 + 4 * t));\n  // Where the tip sits in a sheltered passage a small slit at W unrolls\n  // into a long arc on the panel; the LEDs closest to the tip in the\n  // w-plane say how small the next slit must be to stay within one of them.\n  const dt = max(base * 0.02, min(base, s.near * KNEAR));\n  s.Wd += sqrt(kappa * dt) * gauss(s);\n  const Wk = s.Wd, c4 = 4 * dt, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, tau = s.tau;\n  const near2 = NEAR * NEAR;\n  let mmin = Infinity;\n  for (let p = 0; p \u003c N; p++) {\n    if (mk[p]) continue;\n    const ux = wx[p] - Wk, uy = wy[p];\n    const a = ux * ux - uy * uy + c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = b / (2 * re);\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    wx[p] = Wk + re;\n    wy[p] = im;\n    if (m \u003c mmin) mmin = m;\n    const g = (d2[p] *= (ux * ux + uy * uy) / m);\n    if (im * im \u003c near2 * g) (mk[p] = 1), (mt[p] = tau);\n  }\n  s.near = mmin;\n  // Laurent coefficients: g = z (1 + sum V_k z^-k), V_1 = -W, V_k = b_{k-1}.\n  const Vc = s.Vc, P = s.P, Q = s.Q, bb = s.b;\n  Vc[0] = 1;\n  Vc[1] = -Wk;\n  for (let k = 2; k \u003c= M + 1; k++) Vc[k] = bb[k - 1];\n  for (let k = 0; k \u003c= M + 1; k++) {\n    let acc = 0;\n    for (let j = 0; j \u003c= k; j++) acc += Vc[j] * Vc[k - j];\n    P[k] = acc + (k === 2 ? c4 : 0);\n  }\n  Q[0] = 1;\n  for (let k = 1; k \u003c= M + 1; k++) {\n    let acc = P[k];\n    for (let j = 1; j \u003c k; j++) acc -= Q[j] * Q[k - j];\n    Q[k] = acc * 0.5;\n  }\n  for (let n = 1; n \u003c= M; n++) bb[n] = Q[n + 1];\n  if (s.n === CAP) {\n    s.hw.copyWithin(0, CAP / 2);\n    s.ht.copyWithin(0, CAP / 2);\n    s.n = CAP / 2;\n  }\n  s.hw[s.n] = Wk;\n  s.ht[s.n] = dt;\n  s.n++;\n  s.t = t + dt;\n}\n\n// For kappa above 4 the curve hits itself and the walls, and whatever it\n// closes off from the top of the channel leaves the domain: an LED no path\n// of open LEDs joins to the top row is swallowed. At 4 and below SLE is a\n// simple curve that touches nothing, so nothing is filled there, even where\n// two strands pass within an LED of each other.\nfunction fill(s) {\n  const mk = s.mk, seen = s.seen, st = s.stack;\n  seen.fill(0);\n  let top = 0;\n  for (let x = 0; x \u003c W; x++) if (!mk[x]) (seen[x] = 1), (st[top++] = x);\n  while (top) {\n    const p = st[--top], x = p % W;\n    if (x > 0 && !mk[p - 1] && !seen[p - 1]) (seen[p - 1] = 1), (st[top++] = p - 1);\n    if (x \u003c W - 1 && !mk[p + 1] && !seen[p + 1]) (seen[p + 1] = 1), (st[top++] = p + 1);\n    if (p >= W && !mk[p - W] && !seen[p - W]) (seen[p - W] = 1), (st[top++] = p - W);\n    if (p \u003c N - W && !mk[p + W] && !seen[p + W]) (seen[p + W] = 1), (st[top++] = p + W);\n  }\n  for (let p = 0; p \u003c N; p++) if (!mk[p] && !seen[p]) (mk[p] = 2), (s.mt[p] = s.tau);\n}\n\n// The tip, g_t^{-1}(W_t): the slit maps undone newest first.\nfunction tip(s) {\n  const n = s.n;\n  if (!n) return [0, 0];\n  let zx = s.hw[n - 1], zy = 2 * sqrt(s.ht[n - 1]), T = s.t - s.ht[n - 1];\n  const stop = max(0, n - BACK);\n  for (let k = n - 2; k >= stop; k--) {\n    const Wk = s.hw[k], c4 = 4 * s.ht[k];\n    T -= s.ht[k];\n    const ux = zx - Wk, uy = zy;\n    const a = ux * ux - uy * uy - c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = re > 0 ? b / (2 * re) : 0;\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    zx = Wk + re;\n    zy = im;\n  }\n  // Whatever lies further back is small beside the tip: g^{-1}(w) ~ w - 2T/w.\n  if (stop > 0 && T > 0) {\n    const r2 = zx * zx + zy * zy;\n    zx -= (2 * T * zx) / r2;\n    zy += (2 * T * zy) / r2;\n  }\n  return [zx, zy];\n}\n\n// Where a point of the half-plane sits on the panel: arcsin back to the strip.\nfunction toPanel(s, zx, zy) {\n  const il2 = exp(-2 * s.lnL);\n  // q = -i z + sqrt(1/L^2 - z^2), the root of larger modulus.\n  const ax = il2 - (zx * zx - zy * zy), ay = -2 * zx * zy, m = sqrt(ax * ax + ay * ay);\n  let rx, ry;\n  if (ax >= 0) (rx = sqrt((m + ax) * 0.5)), (ry = rx > 0 ? ay / (2 * rx) : 0);\n  else (ry = sqrt((m - ax) * 0.5)), (rx = abs(ay) / (2 * ry)), (ry = ay \u003c 0 ? -ry : ry);\n  let qx = zy + rx, qy = -zx + ry;\n  const q2x = zy - rx, q2y = -zx - ry;\n  if (q2x * q2x + q2y * q2y > qx * qx + qy * qy) (qx = q2x), (qy = q2y);\n  const xi = -atan2(qy, qx), eta = s.lnL + 0.5 * log(qx * qx + qy * qy);\n  return [xi / PX + 31.5, 128 + s.scroll - eta / PX];\n}\n\n// A row scrolling in at the top, far above the hull, takes g_t from its\n// Laurent series at infinity.\nfunction newRow(s) {\n  const wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, bb = s.b;\n  wx.copyWithin(W, 0, N - W);\n  wy.copyWithin(W, 0, N - W);\n  d2.copyWithin(W, 0, N - W);\n  mk.copyWithin(W, 0, N - W);\n  s.mt.copyWithin(W, 0, N - W);\n  s.scroll++;\n  for (let x = 0; x \u003c W; x++) {\n    const [zx, zy, S] = zOf(s, x, 0);\n    const r2 = zx * zx + zy * zy, yx = zx / r2, yy = -zy / r2;\n    // sum b_n y^n and sum n b_n y^(n-1) by Horner.\n    let fx = bb[M], fy = 0, dx = M * bb[M], dy = 0;\n    for (let n = M - 1; n >= 1; n--) {\n      const tx = fx * yx - fy * yy + bb[n];\n      fy = fx * yy + fy * yx;\n      fx = tx;\n      const ex = dx * yx - dy * yy + n * bb[n];\n      dy = dx * yy + dy * yx;\n      dx = ex;\n    }\n    const gx = fx * yx - fy * yy, gy = fx * yy + fy * yx;\n    const y2x = yx * yx - yy * yy, y2y = 2 * yx * yy;\n    const hx = 1 - (dx * y2x - dy * y2y), hy = -(dx * y2y + dy * y2x);\n    wx[x] = zx + gx;\n    wy[x] = zy + gy;\n    d2[x] = (hx * hx + hy * hy) * S * S;\n    mk[x] = 0;\n  }\n  // Keep the numbers small: SLE does not see the scale.\n  if (s.scroll * PX - s.lnL > 9) renorm(s, 4);\n}\n\nfunction renorm(s, lnl) {\n  const l = exp(lnl), il = 1 / l;\n  s.lnL += lnl;\n  for (let p = 0; p \u003c N; p++) {\n    s.wx[p] *= il;\n    s.wy[p] *= il;\n    s.d2[p] *= il * il;\n  }\n  s.Wd *= il;\n  s.t *= il * il;\n  for (let k = 0; k \u003c s.n; k++) (s.hw[k] *= il), (s.ht[k] *= il * il);\n  s.near *= il * il;\n  let f = il;\n  for (let n = 1; n \u003c= M; n++) (f *= il), (s.b[n] *= f);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float64Array(n);\n  params.s = {\n    wx: F(N), wy: F(N), d2: F(N), mk: new Uint8Array(N), mt: F(N),\n    b: F(M + 1), Vc: F(M + 2), P: F(M + 2), Q: F(M + 2), hw: F(CAP), ht: F(CAP),\n    seen: new Uint8Array(N), stack: new Int32Array(N), spare: null, acc: 0, hue: 0, kappa: 4, trace: 0.06,\n    buf: new Float32Array(N * 3), tlut: new Float32Array(LUT * 3), blut: new Float32Array(LUT * 3),\n    side: new Float32Array(12), lutHue: NaN,\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  s.hue = k[0];\n  s.kappa = cl(k[2], 4, 8);\n  s.trace = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) fresh(s);\n  const sp = cl(k[1], 0.2, 3);\n  s.acc += d * sp * RATE;\n  let n = floor(s.acc);\n  s.acc -= n;\n  s.tau += d * sp;\n  while (n-- > 0) step(s, s.kappa);\n  if (s.kappa > 4) fill(s);\n  const [zx, zy] = tip(s);\n  const [px, py] = toPanel(s, zx, zy);\n  s.tipx = px;\n  s.tipy = py;\n  const rows = min(3, ceilPos(TIPROW - py));\n  for (let i = 0; i \u003c rows; i++) newRow(s);\n  s.tipy = py + rows;\n}\nconst ceilPos = (v) => (v > 0 ? Math.ceil(v) : 0);\n\n// Colour stops, turned round the colour wheel by Hue: the trace by its age,\n// new to old; swallowed ground by when it was swallowed; the field on the\n// right and on the left of the curve; the rays and the rings of the grid.\nconst TRACE = [[255, 238, 196], [255, 178, 84], [250, 92, 112], [206, 62, 196], [124, 76, 236]];\nconst BUBBLE = [[150, 40, 92], [112, 34, 128], [58, 40, 128], [96, 30, 70], [150, 40, 92]];\nconst RIGHT = [16, 32, 78], LEFT = [8, 50, 72], RAY = [52, 150, 172], RING = [96, 112, 206];\nconst LUT = 64;\nfunction ramp(stops, out, rot) {\n  const n = stops.length - 1;\n  for (let i = 0; i \u003c LUT; i++) {\n    const u = (i / (LUT - 1)) * n, j = min(n - 1, floor(u)), f = u - j;\n    const c = [0, 1, 2].map((k) => stops[j][k] + (stops[j + 1][k] - stops[j][k]) * f);\n    turn(c, rot, out, i * 3);\n  }\n}\n// A hue turn that keeps the grey axis: rotation about (1, 1, 1).\nfunction turn(c, a, out, o) {\n  const co = cos(a), si = sin(a), k = (1 - co) / 3, r = sqrt(1 / 3) * si;\n  const m0 = co + k, m1 = k - r, m2 = k + r;\n  out[o] = cl(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255);\n  out[o + 1] = cl(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255);\n  out[o + 2] = cl(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255);\n}\n\n// The grid is the conformal map log(g_t(z) - W_t), which unrolls what is\n// left of the channel into a straight strip with the tip at minus infinity:\n// its level lines are circles round the tip and the rays out of it. Where a\n// cell grows large a finer grid fades in, up to three halvings.\nconst DELTA = PI / 8, LEVELS = 4, LOG7 = log(DELTA / 7);\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s) return;\n  const buf = s.buf, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, Wk = s.Wd;\n  const fld = 1 - s.trace, tr = s.tlut, bu = s.blut, side = s.side;\n  if (s.lutHue !== s.hue) {\n    const rot = s.hue * 2 * PI;\n    ramp(TRACE, tr, rot);\n    ramp(BUBBLE, bu, rot);\n    turn(RIGHT, rot, side, 0);\n    turn(LEFT, rot, side, 3);\n    turn(RAY, rot, side, 6);\n    turn(RING, rot, side, 9);\n    s.lutHue = s.hue;\n  }\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (mk[p]) {\n        const age = max(0, s.tau - mt[p]);\n        if (mk[p] === 1) {\n          const i = min(LUT - 1, floor((age / 8) * (LUT - 1))) * 3;\n          buf[q] = tr[i];\n          buf[q + 1] = tr[i + 1];\n          buf[q + 2] = tr[i + 2];\n        } else {\n          // Swallowed ground keeps the colour of the moment it was cut off,\n          // and dims as it ages.\n          const u = mt[p] / 5, i = floor((u - floor(u)) * (LUT - 1)) * 3, v = 0.55 + 0.45 * exp(-age / 6);\n          const hat = ((x + (floor(u * 7) & 1 ? 1 : -1) * (py - s.scroll) + 4096) & 3) === 0 ? 1 : 0.5;\n          buf[q] = bu[i] * v * hat;\n          buf[q + 1] = bu[i + 1] * v * hat;\n          buf[q + 2] = bu[i + 2] * v * hat;\n        }\n        continue;\n      }\n      const ux = wx[p] - Wk, uy = wy[p], r2 = ux * ux + uy * uy, rr = sqrt(r2);\n      const lr = log(rr), th = atan2(uy, ux), lg = 0.5 * log(d2[p]);\n      const cell = DELTA * exp(lr - lg); // LEDs per grid cell here\n      const fa = lr / DELTA, fb = th / DELTA;\n      // Lines, coarse to fine.\n      let ring = 0, ray = 0, cj = cell, sa = fa, sb = fb, chk = 0;\n      const lc = cl((lr - lg + LOG7) * 1.4427, 0, LEVELS - 1.001), jc = floor(lc), fc = lc - jc;\n      for (let j = 0; j \u003c LEVELS && (j \u003c= jc + 1 || cj >= 6); j++) {\n        const ia = floor(sa), ib = floor(sb), nb = round(sb);\n        // The rays at angle 0 and pi are the boundary itself, not grid. The\n        // ray at pi/2 is the hyperbolic geodesic from the tip to the top of\n        // the channel, where the curve is bound, and burns brighter.\n        const da = min(sa - ia, ia + 1 - sa) * cj, db = nb > 0 && nb \u003c 8 \u003c\u003c j ? abs(sb - nb) * cj : 99;\n        const fade = j === 0 ? cl((cj - 2) / 3, 0, 1) : cl((cj - 6) / 6, 0, 1) * 0.6;\n        ring = max(ring, cl(1 - da / 0.8, 0, 1) * fade);\n        ray = max(ray, cl(1 - db / 0.8, 0, 1) * fade * (j === 0 && nb === 4 ? 1.6 : 1));\n        if (j === jc) chk += ((ia + ib) & 1) * (1 - fc);\n        if (j === jc + 1) chk += ((ia + ib) & 1) * fc;\n        cj *= 0.5;\n        sa *= 2;\n        sb *= 2;\n      }\n      // The two sides of the curve: th / pi is the chance that a Brownian\n      // walker from here leaves by the left-hand side.\n      const hs = th / PI, cf = (0.82 + 0.36 * chk * cl((cell - 2) / 3, 0, 1)) * (0.4 + 0.6 * sqrt(uy / rr));\n      let r = (side[0] + (side[3] - side[0]) * hs) * cf * fld;\n      let gg = (side[1] + (side[4] - side[1]) * hs) * cf * fld;\n      let bl = (side[2] + (side[5] - side[2]) * hs) * cf * fld;\n      let li = ring * fld;\n      r += (side[9] - r) * li;\n      gg += (side[10] - gg) * li;\n      bl += (side[11] - bl) * li;\n      li = min(1, ray) * fld;\n      const hot = max(0, ray - 1) * 1.6 * fld;\n      r += (side[6] - r) * li;\n      gg += (side[7] - gg) * li;\n      bl += (side[8] - bl) * li;\n      r += (210 - r) * hot;\n      gg += (240 - gg) * hot;\n      bl += (240 - bl) * hot;\n      buf[q] = r;\n      buf[q + 1] = gg;\n      buf[q + 2] = bl;\n    }\n  // The tip.\n  const tx = s.tipx, ty = s.tipy;\n  for (let y = max(0, floor(ty - 3)); y \u003c= min(H - 1, floor(ty + 3)); y++)\n    for (let x = max(0, floor(tx - 3)); x \u003c= min(W - 1, floor(tx + 3)); x++) {\n      const dd = (x - tx) ** 2 + (y - ty) ** 2, w = exp(-dd / 1.5);\n      const q = (y * W + x) * 3;\n      buf[q] += (255 - buf[q]) * w;\n      buf[q + 1] += (250 - buf[q + 1]) * w;\n      buf[q + 2] += (235 - buf[q + 2]) * w;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-loewner-trace","type":"code","name":"loewner-trace","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Loewner Trace\n// Family:  line\n// Idea:    A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schramm-Loewner evolution (Oded Schramm, 2000) grown with Loewner's equation (Charles Loewner, 1923), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages.\n// Knob 2: Speed. Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower.\n// Knob 3: Kappa. The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip.\n// Knob 4: Trace. Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black.\n// Buttons: K1 tap starts a fresh Brownian path from the floor of the channel.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, log, atan2, exp, abs, sin, cos, PI, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The panel is a half-strip of the plane 65 LEDs wide, its walls and floor\n// one LED beyond the outer LEDs so that none sits on the boundary. sin()\n// carries the half-strip onto the upper half-plane, where the Loewner\n// equation lives: the floor goes to [-1, 1], the walls to the rest of the\n// real line, and the top of the channel, however far it scrolls, to\n// infinity. Each row up the channel is a factor e^(pi/65) further out.\n// Scale invariance of SLE makes that a channel the curve climbs for ever.\nconst PX = PI / 65;\nconst M = 12; // Laurent terms of g_t at infinity, for rows that scroll in\nconst CAP = 1 \u003c\u003c 16; // steps of driving function kept for the tip\nconst BACK = 6000; // steps walked back when finding the tip\nconst V = 0.025; // LEDs the curve climbs a step, on average\nconst RATE = 600; // steps a second at Speed 1\nconst NEAR = 0.6; // an LED this close to the curve is the curve\nconst KNEAR = 0.1; // the next slit against the w-distance of the LED nearest the tip\nconst TIPROW = 52; // the view scrolls to keep the tip at least this far down\n\nfunction zOf(s, x, py) {\n  const xi = (x - 31.5) * PX, eta = (127 - py + 1 + s.scroll) * PX;\n  const a = exp(eta - s.lnL) * 0.5, b = exp(-eta - s.lnL) * 0.5, il = exp(-s.lnL);\n  const ch = a + b, sh = a - b, c = cos(xi);\n  return [sin(xi) * ch, c * sh, PX * sqrt(c * c * il * il + sh * sh)];\n}\n\nfunction fresh(s) {\n  s.scroll = 0;\n  s.lnL = 0;\n  s.t = 0;\n  s.Wd = 0;\n  s.n = 0;\n  s.tau = 0;\n  s.near = Infinity;\n  s.b.fill(0);\n  s.mk.fill(0);\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const [zx, zy, S] = zOf(s, x, py);\n      s.wx[p] = zx;\n      s.wy[p] = zy;\n      s.d2[p] = S * S;\n    }\n  s.tipx = 31.5;\n  s.tipy = 128;\n}\n\nfunction gauss(s) {\n  if (s.spare !== null) {\n    const g = s.spare;\n    s.spare = null;\n    return g;\n  }\n  let u = Math.random();\n  if (u \u003c 1e-12) u = 1e-12;\n  const r = sqrt(-2 * log(u)), a = 2 * PI * Math.random();\n  s.spare = r * sin(a);\n  return r * cos(a);\n}\n\n// One Loewner step: the driving point jumps, then a vertical slit of\n// half-plane capacity 2 dt grows at it. Every LED's g_t(z) goes through the\n// slit map w -> W + sqrt((w - W)^2 + 4 dt), and so do the Laurent\n// coefficients of g_t at infinity.\nfunction step(s, kappa) {\n  const il2 = exp(-2 * s.lnL), t = s.t;\n  const base = V * PX * sqrt((t + 0.25 * PX * PX * il2) * (il2 + 4 * t));\n  // Where the tip sits in a sheltered passage a small slit at W unrolls\n  // into a long arc on the panel; the LEDs closest to the tip in the\n  // w-plane say how small the next slit must be to stay within one of them.\n  const dt = max(base * 0.02, min(base, s.near * KNEAR));\n  s.Wd += sqrt(kappa * dt) * gauss(s);\n  const Wk = s.Wd, c4 = 4 * dt, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, tau = s.tau;\n  const near2 = NEAR * NEAR;\n  let mmin = Infinity;\n  for (let p = 0; p \u003c N; p++) {\n    if (mk[p]) continue;\n    const ux = wx[p] - Wk, uy = wy[p];\n    const a = ux * ux - uy * uy + c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = b / (2 * re);\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    wx[p] = Wk + re;\n    wy[p] = im;\n    if (m \u003c mmin) mmin = m;\n    const g = (d2[p] *= (ux * ux + uy * uy) / m);\n    if (im * im \u003c near2 * g) (mk[p] = 1), (mt[p] = tau);\n  }\n  s.near = mmin;\n  // Laurent coefficients: g = z (1 + sum V_k z^-k), V_1 = -W, V_k = b_{k-1}.\n  const Vc = s.Vc, P = s.P, Q = s.Q, bb = s.b;\n  Vc[0] = 1;\n  Vc[1] = -Wk;\n  for (let k = 2; k \u003c= M + 1; k++) Vc[k] = bb[k - 1];\n  for (let k = 0; k \u003c= M + 1; k++) {\n    let acc = 0;\n    for (let j = 0; j \u003c= k; j++) acc += Vc[j] * Vc[k - j];\n    P[k] = acc + (k === 2 ? c4 : 0);\n  }\n  Q[0] = 1;\n  for (let k = 1; k \u003c= M + 1; k++) {\n    let acc = P[k];\n    for (let j = 1; j \u003c k; j++) acc -= Q[j] * Q[k - j];\n    Q[k] = acc * 0.5;\n  }\n  for (let n = 1; n \u003c= M; n++) bb[n] = Q[n + 1];\n  if (s.n === CAP) {\n    s.hw.copyWithin(0, CAP / 2);\n    s.ht.copyWithin(0, CAP / 2);\n    s.n = CAP / 2;\n  }\n  s.hw[s.n] = Wk;\n  s.ht[s.n] = dt;\n  s.n++;\n  s.t = t + dt;\n}\n\n// For kappa above 4 the curve hits itself and the walls, and whatever it\n// closes off from the top of the channel leaves the domain: an LED no path\n// of open LEDs joins to the top row is swallowed. At 4 and below SLE is a\n// simple curve that touches nothing, so nothing is filled there, even where\n// two strands pass within an LED of each other.\nfunction fill(s) {\n  const mk = s.mk, seen = s.seen, st = s.stack;\n  seen.fill(0);\n  let top = 0;\n  for (let x = 0; x \u003c W; x++) if (!mk[x]) (seen[x] = 1), (st[top++] = x);\n  while (top) {\n    const p = st[--top], x = p % W;\n    if (x > 0 && !mk[p - 1] && !seen[p - 1]) (seen[p - 1] = 1), (st[top++] = p - 1);\n    if (x \u003c W - 1 && !mk[p + 1] && !seen[p + 1]) (seen[p + 1] = 1), (st[top++] = p + 1);\n    if (p >= W && !mk[p - W] && !seen[p - W]) (seen[p - W] = 1), (st[top++] = p - W);\n    if (p \u003c N - W && !mk[p + W] && !seen[p + W]) (seen[p + W] = 1), (st[top++] = p + W);\n  }\n  for (let p = 0; p \u003c N; p++) if (!mk[p] && !seen[p]) (mk[p] = 2), (s.mt[p] = s.tau);\n}\n\n// The tip, g_t^{-1}(W_t): the slit maps undone newest first.\nfunction tip(s) {\n  const n = s.n;\n  if (!n) return [0, 0];\n  let zx = s.hw[n - 1], zy = 2 * sqrt(s.ht[n - 1]), T = s.t - s.ht[n - 1];\n  const stop = max(0, n - BACK);\n  for (let k = n - 2; k >= stop; k--) {\n    const Wk = s.hw[k], c4 = 4 * s.ht[k];\n    T -= s.ht[k];\n    const ux = zx - Wk, uy = zy;\n    const a = ux * ux - uy * uy - c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = re > 0 ? b / (2 * re) : 0;\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    zx = Wk + re;\n    zy = im;\n  }\n  // Whatever lies further back is small beside the tip: g^{-1}(w) ~ w - 2T/w.\n  if (stop > 0 && T > 0) {\n    const r2 = zx * zx + zy * zy;\n    zx -= (2 * T * zx) / r2;\n    zy += (2 * T * zy) / r2;\n  }\n  return [zx, zy];\n}\n\n// Where a point of the half-plane sits on the panel: arcsin back to the strip.\nfunction toPanel(s, zx, zy) {\n  const il2 = exp(-2 * s.lnL);\n  // q = -i z + sqrt(1/L^2 - z^2), the root of larger modulus.\n  const ax = il2 - (zx * zx - zy * zy), ay = -2 * zx * zy, m = sqrt(ax * ax + ay * ay);\n  let rx, ry;\n  if (ax >= 0) (rx = sqrt((m + ax) * 0.5)), (ry = rx > 0 ? ay / (2 * rx) : 0);\n  else (ry = sqrt((m - ax) * 0.5)), (rx = abs(ay) / (2 * ry)), (ry = ay \u003c 0 ? -ry : ry);\n  let qx = zy + rx, qy = -zx + ry;\n  const q2x = zy - rx, q2y = -zx - ry;\n  if (q2x * q2x + q2y * q2y > qx * qx + qy * qy) (qx = q2x), (qy = q2y);\n  const xi = -atan2(qy, qx), eta = s.lnL + 0.5 * log(qx * qx + qy * qy);\n  return [xi / PX + 31.5, 128 + s.scroll - eta / PX];\n}\n\n// A row scrolling in at the top, far above the hull, takes g_t from its\n// Laurent series at infinity.\nfunction newRow(s) {\n  const wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, bb = s.b;\n  wx.copyWithin(W, 0, N - W);\n  wy.copyWithin(W, 0, N - W);\n  d2.copyWithin(W, 0, N - W);\n  mk.copyWithin(W, 0, N - W);\n  s.mt.copyWithin(W, 0, N - W);\n  s.scroll++;\n  for (let x = 0; x \u003c W; x++) {\n    const [zx, zy, S] = zOf(s, x, 0);\n    const r2 = zx * zx + zy * zy, yx = zx / r2, yy = -zy / r2;\n    // sum b_n y^n and sum n b_n y^(n-1) by Horner.\n    let fx = bb[M], fy = 0, dx = M * bb[M], dy = 0;\n    for (let n = M - 1; n >= 1; n--) {\n      const tx = fx * yx - fy * yy + bb[n];\n      fy = fx * yy + fy * yx;\n      fx = tx;\n      const ex = dx * yx - dy * yy + n * bb[n];\n      dy = dx * yy + dy * yx;\n      dx = ex;\n    }\n    const gx = fx * yx - fy * yy, gy = fx * yy + fy * yx;\n    const y2x = yx * yx - yy * yy, y2y = 2 * yx * yy;\n    const hx = 1 - (dx * y2x - dy * y2y), hy = -(dx * y2y + dy * y2x);\n    wx[x] = zx + gx;\n    wy[x] = zy + gy;\n    d2[x] = (hx * hx + hy * hy) * S * S;\n    mk[x] = 0;\n  }\n  // Keep the numbers small: SLE does not see the scale.\n  if (s.scroll * PX - s.lnL > 9) renorm(s, 4);\n}\n\nfunction renorm(s, lnl) {\n  const l = exp(lnl), il = 1 / l;\n  s.lnL += lnl;\n  for (let p = 0; p \u003c N; p++) {\n    s.wx[p] *= il;\n    s.wy[p] *= il;\n    s.d2[p] *= il * il;\n  }\n  s.Wd *= il;\n  s.t *= il * il;\n  for (let k = 0; k \u003c s.n; k++) (s.hw[k] *= il), (s.ht[k] *= il * il);\n  s.near *= il * il;\n  let f = il;\n  for (let n = 1; n \u003c= M; n++) (f *= il), (s.b[n] *= f);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float64Array(n);\n  params.s = {\n    wx: F(N), wy: F(N), d2: F(N), mk: new Uint8Array(N), mt: F(N),\n    b: F(M + 1), Vc: F(M + 2), P: F(M + 2), Q: F(M + 2), hw: F(CAP), ht: F(CAP),\n    seen: new Uint8Array(N), stack: new Int32Array(N), spare: null, acc: 0, hue: 0, kappa: 4, trace: 0.06,\n    buf: new Float32Array(N * 3), tlut: new Float32Array(LUT * 3), blut: new Float32Array(LUT * 3),\n    side: new Float32Array(12), lutHue: NaN,\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  s.hue = k[0];\n  s.kappa = cl(k[2], 4, 8);\n  s.trace = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) fresh(s);\n  const sp = cl(k[1], 0.2, 3);\n  s.acc += d * sp * RATE;\n  let n = floor(s.acc);\n  s.acc -= n;\n  s.tau += d * sp;\n  while (n-- > 0) step(s, s.kappa);\n  if (s.kappa > 4) fill(s);\n  const [zx, zy] = tip(s);\n  const [px, py] = toPanel(s, zx, zy);\n  s.tipx = px;\n  s.tipy = py;\n  const rows = min(3, ceilPos(TIPROW - py));\n  for (let i = 0; i \u003c rows; i++) newRow(s);\n  s.tipy = py + rows;\n}\nconst ceilPos = (v) => (v > 0 ? Math.ceil(v) : 0);\n\n// Colour stops, turned round the colour wheel by Hue: the trace by its age,\n// new to old; swallowed ground by when it was swallowed; the field on the\n// right and on the left of the curve; the rays and the rings of the grid.\nconst TRACE = [[255, 238, 196], [255, 178, 84], [250, 92, 112], [206, 62, 196], [124, 76, 236]];\nconst BUBBLE = [[150, 40, 92], [112, 34, 128], [58, 40, 128], [96, 30, 70], [150, 40, 92]];\nconst RIGHT = [16, 32, 78], LEFT = [8, 50, 72], RAY = [52, 150, 172], RING = [96, 112, 206];\nconst LUT = 64;\nfunction ramp(stops, out, rot) {\n  const n = stops.length - 1;\n  for (let i = 0; i \u003c LUT; i++) {\n    const u = (i / (LUT - 1)) * n, j = min(n - 1, floor(u)), f = u - j;\n    const c = [0, 1, 2].map((k) => stops[j][k] + (stops[j + 1][k] - stops[j][k]) * f);\n    turn(c, rot, out, i * 3);\n  }\n}\n// A hue turn that keeps the grey axis: rotation about (1, 1, 1).\nfunction turn(c, a, out, o) {\n  const co = cos(a), si = sin(a), k = (1 - co) / 3, r = sqrt(1 / 3) * si;\n  const m0 = co + k, m1 = k - r, m2 = k + r;\n  out[o] = cl(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255);\n  out[o + 1] = cl(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255);\n  out[o + 2] = cl(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255);\n}\n\n// The grid is the conformal map log(g_t(z) - W_t), which unrolls what is\n// left of the channel into a straight strip with the tip at minus infinity:\n// its level lines are circles round the tip and the rays out of it. Where a\n// cell grows large a finer grid fades in, up to three halvings.\nconst DELTA = PI / 8, LEVELS = 4, LOG7 = log(DELTA / 7);\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s) return;\n  const buf = s.buf, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, Wk = s.Wd;\n  const fld = 1 - s.trace, tr = s.tlut, bu = s.blut, side = s.side;\n  if (s.lutHue !== s.hue) {\n    const rot = s.hue * 2 * PI;\n    ramp(TRACE, tr, rot);\n    ramp(BUBBLE, bu, rot);\n    turn(RIGHT, rot, side, 0);\n    turn(LEFT, rot, side, 3);\n    turn(RAY, rot, side, 6);\n    turn(RING, rot, side, 9);\n    s.lutHue = s.hue;\n  }\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (mk[p]) {\n        const age = max(0, s.tau - mt[p]);\n        if (mk[p] === 1) {\n          const i = min(LUT - 1, floor((age / 8) * (LUT - 1))) * 3;\n          buf[q] = tr[i];\n          buf[q + 1] = tr[i + 1];\n          buf[q + 2] = tr[i + 2];\n        } else {\n          // Swallowed ground keeps the colour of the moment it was cut off,\n          // and dims as it ages.\n          const u = mt[p] / 5, i = floor((u - floor(u)) * (LUT - 1)) * 3, v = 0.55 + 0.45 * exp(-age / 6);\n          const hat = ((x + (floor(u * 7) & 1 ? 1 : -1) * (py - s.scroll) + 4096) & 3) === 0 ? 1 : 0.5;\n          buf[q] = bu[i] * v * hat;\n          buf[q + 1] = bu[i + 1] * v * hat;\n          buf[q + 2] = bu[i + 2] * v * hat;\n        }\n        continue;\n      }\n      const ux = wx[p] - Wk, uy = wy[p], r2 = ux * ux + uy * uy, rr = sqrt(r2);\n      const lr = log(rr), th = atan2(uy, ux), lg = 0.5 * log(d2[p]);\n      const cell = DELTA * exp(lr - lg); // LEDs per grid cell here\n      const fa = lr / DELTA, fb = th / DELTA;\n      // Lines, coarse to fine.\n      let ring = 0, ray = 0, cj = cell, sa = fa, sb = fb, chk = 0;\n      const lc = cl((lr - lg + LOG7) * 1.4427, 0, LEVELS - 1.001), jc = floor(lc), fc = lc - jc;\n      for (let j = 0; j \u003c LEVELS && (j \u003c= jc + 1 || cj >= 6); j++) {\n        const ia = floor(sa), ib = floor(sb), nb = round(sb);\n        // The rays at angle 0 and pi are the boundary itself, not grid. The\n        // ray at pi/2 is the hyperbolic geodesic from the tip to the top of\n        // the channel, where the curve is bound, and burns brighter.\n        const da = min(sa - ia, ia + 1 - sa) * cj, db = nb > 0 && nb \u003c 8 \u003c\u003c j ? abs(sb - nb) * cj : 99;\n        const fade = j === 0 ? cl((cj - 2) / 3, 0, 1) : cl((cj - 6) / 6, 0, 1) * 0.6;\n        ring = max(ring, cl(1 - da / 0.8, 0, 1) * fade);\n        ray = max(ray, cl(1 - db / 0.8, 0, 1) * fade * (j === 0 && nb === 4 ? 1.6 : 1));\n        if (j === jc) chk += ((ia + ib) & 1) * (1 - fc);\n        if (j === jc + 1) chk += ((ia + ib) & 1) * fc;\n        cj *= 0.5;\n        sa *= 2;\n        sb *= 2;\n      }\n      // The two sides of the curve: th / pi is the chance that a Brownian\n      // walker from here leaves by the left-hand side.\n      const hs = th / PI, cf = (0.82 + 0.36 * chk * cl((cell - 2) / 3, 0, 1)) * (0.4 + 0.6 * sqrt(uy / rr));\n      let r = (side[0] + (side[3] - side[0]) * hs) * cf * fld;\n      let gg = (side[1] + (side[4] - side[1]) * hs) * cf * fld;\n      let bl = (side[2] + (side[5] - side[2]) * hs) * cf * fld;\n      let li = ring * fld;\n      r += (side[9] - r) * li;\n      gg += (side[10] - gg) * li;\n      bl += (side[11] - bl) * li;\n      li = min(1, ray) * fld;\n      const hot = max(0, ray - 1) * 1.6 * fld;\n      r += (side[6] - r) * li;\n      gg += (side[7] - gg) * li;\n      bl += (side[8] - bl) * li;\n      r += (210 - r) * hot;\n      gg += (240 - gg) * hot;\n      bl += (240 - bl) * hot;\n      buf[q] = r;\n      buf[q + 1] = gg;\n      buf[q + 2] = bl;\n    }\n  // The tip.\n  const tx = s.tipx, ty = s.tipy;\n  for (let y = max(0, floor(ty - 3)); y \u003c= min(H - 1, floor(ty + 3)); y++)\n    for (let x = max(0, floor(tx - 3)); x \u003c= min(W - 1, floor(tx + 3)); x++) {\n      const dd = (x - tx) ** 2 + (y - ty) ** 2, w = exp(-dd / 1.5);\n      const q = (y * W + x) * 3;\n      buf[q] += (255 - buf[q]) * w;\n      buf[q + 1] += (250 - buf[q + 1]) * w;\n      buf[q + 2] += (235 - buf[q + 2]) * w;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages."},{"name":"Speed","min":0.2,"max":3,"about":"Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower."},{"name":"Kappa","min":4,"max":8,"about":"The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip."},{"name":"Trace","min":0,"max":1,"about":"Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black."}],"start":[0,2,4,0.06],"measures":{"motion":2.6307,"detail":0.0738,"edges":0.5207,"complexity":1.219,"coverage":0.8893,"colour":0.2244,"drift":0.1264},"knobResponse":[0.1533,0.1433,0.1845,0.1423]},{"slug":"longcase-clock","title":"Longcase Clock","family":"time","round":18,"note":"촛불 켠 밤 방에 128줄을 다 쓰는 괘종시계가 서 있어요. 줄의 유리문 안에서 황동 추가 1초에 한 번씩 흔들리고 무게추가 내려가며, 다이얼 아치의 달 원판이 돌고, 정시마다 꼭대기 종이 번쩍이며 울려요. K3 을 돌리면 촛불이 시계 왼쪽에서 앞을 지나 오른쪽으로 옮겨 가고, 벽에 진 그림자가 반대쪽으로 넘어가요.","idea":"A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","layer":{"id":"layer-longcase-clock","type":"code","name":"longcase-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wood","min":0,"max":1,"about":"The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1."},{"name":"Speed","min":0,"max":3,"about":"How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window."},{"name":"Candle","min":0,"max":1,"about":"Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side."},{"name":"Lamp","min":0,"max":1,"about":"The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.144,"detail":0.0765,"edges":0.4175,"complexity":2.1824,"coverage":0.9202,"colour":0.2877,"drift":0.0825},"knobResponse":[0.0907,0.1391,0.1097,0.2042]},{"slug":"look-and-say","title":"Look and Say","family":"data","round":28,"note":"콘웨이의 보고 말하기 수열이 한 줄씩 제 위 줄을 소리 내어 읽으며 쪽을 내려와요. 줄이 한 걸음에 1.3배씩 길어지면 글자가 3×5 숫자에서 막대로, LED 하나에 숫자 하나로 작아지고, 콘웨이의 원소 92개가 저마다 제 색이에요. K3 이 씨앗을 3, 312, 311311, 고정점 22 로 바꿔요.","idea":"Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.","buttons":"K1 tap starts the page again from the next seed.","code":"// ===== Patternflow pattern =====\n// Title:   Look and Say\n// Family:  data\n// Idea:    Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the look-and-say sequence and its audioactive decay into 92 elements (John Horton Conway, 1986), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream.\n// Knob 2: Speed. How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long.\n// Knob 3: Seed. The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s).\n// Knob 4: Digits. At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold.\n// Buttons: K1 tap starts the page again from the next seed.\n\nconst W = 64, H = 128;\nconst { min, max, floor, ceil, exp, pow, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Conway's 92 elements, H to U: the name, the digits, and what the element\n// becomes when it is read aloud. Every term of the sequence from the eighth\n// on is a row of these, and each element decays on its own.\nconst TABLE = `H 22 H|He 13112221133211322112211213322112 Hf.Pa.H.Ca.Li|Li 312211322212221121123222112 He|Be 111312211312113221133211322112211213322112 Ge.Ca.Li|B 1321132122211322212221121123222112 Be|C 3113112211322112211213322112 B|N 111312212221121123222112 C|O 132112211213322112 N|F 31121123222112 O|Ne 111213322112 F|Na 123222112 Ne|Mg 3113322112 Pm.Na|Al 1113222112 Mg|Si 1322112 Al|P 311311222112 Ho.Si|S 1113122112 P|Cl 132112 S|Ar 3112 Cl|K 1112 Ar|Ca 12 K|Sc 3113112221133112 Ho.Pa.H.Ca.Co|Ti 11131221131112 Sc|V 13211312 Ti|Cr 31132 V|Mn 111311222112 Cr.Si|Fe 13122112 Mn|Co 32112 Fe|Ni 11133112 Zn.Co|Cu 131112 Ni|Zn 312 Cu|Ga 13221133122211332 Eu.Ca.Ac.H.Ca.Zn|Ge 31131122211311122113222 Ho.Ga|As 11131221131211322113322112 Ge.Na|Se 13211321222113222112 As|Br 3113112211322112 Se|Kr 11131221222112 Br|Rb 1321122112 Kr|Sr 3112112 Rb|Y 1112133 Sr.U|Zr 12322211331222113112211 Y.H.Ca.Tc|Nb 1113122113322113111221131221 Er.Zr|Mo 13211322211312113211 Nb|Tc 311322113212221 Mo|Ru 132211331222113112211 Eu.Ca.Tc|Rh 311311222113111221131221 Ho.Ru|Pd 111312211312113211 Rh|Ag 132113212221 Pd|Cd 3113112211 Ag|In 11131221 Cd|Sn 13211 In|Sb 3112221 Pm.Sn|Te 1322113312211 Eu.Ca.Sb|I 311311222113111221 Ho.Te|Xe 11131221131211 I|Cs 13211321 Xe|Ba 311311 Cs|La 11131 Ba|Ce 1321133112 La.H.Ca.Co|Pr 31131112 Ce|Nd 111312 Pr|Pm 132 Nd|Sm 311332 Pm.Ca.Zn|Eu 1113222 Sm|Gd 13221133112 Eu.Ca.Co|Tb 3113112221131112 Ho.Gd|Dy 111312211312 Tb|Ho 1321132 Dy|Er 311311222 Ho.Pm|Tm 11131221133112 Er.Ca.Co|Yb 1321131112 Tm|Lu 311312 Yb|Hf 11132 Lu|Ta 13112221133211322112211213322113 Hf.Pa.H.Ca.W|W 312211322212221121123222113 Ta|Re 111312211312113221133211322112211213322113 Ge.Ca.W|Os 1321132122211322212221121123222113 Re|Ir 3113112211322112211213322113 Os|Pt 111312212221121123222113 Ir|Au 132112211213322113 Pt|Hg 31121123222113 Au|Tl 111213322113 Hg|Pb 123222113 Tl|Bi 3113322113 Pm.Pb|Po 1113222113 Bi|At 1322113 Po|Rn 311311222113 Ho.At|Fr 1113122113 Rn|Ra 132113 Fr|Ac 3113 Ra|Th 1113 Ac|Pa 13 Th|U 3 Pa`;\nconst ROWS = TABLE.split(\"|\").map((r) => r.split(\" \"));\nconst NAME = ROWS.map((r) => r[0]);\nconst LEN = ROWS.map((r) => r[1].length);\nconst DEC = ROWS.map((r) => r[2].split(\".\").map((n) => NAME.indexOf(n)));\nconst NONE = 92;\n\n// The seeds: the first row, the row from which it is a compound of elements,\n// and that compound. Seed 1 runs seven rows before it splits into Hf.Sn.\nconst SEEDS = [\n  [\"1\", 8, \"Hf.Sn\"],\n  [\"3\", 1, \"U\"],\n  [\"312\", 1, \"Zn\"],\n  [\"311311\", 1, \"Ba\"],\n  [\"22\", 1, \"H\"],\n];\n\n// The four prints: cell width and height, digits a line, blank lines between\n// rows, top margin, and how many lines the row read and the row typed may\n// fill together before the page steps down to the next print. Numerals\n// first, then bars one LED wide and as tall as the digit, so a run of equal\n// digits stands as a flat step; then one LED a digit, two LEDs tall, then\n// one.\nconst LV = [\n  { cw: 4, ch: 6, per: 16, gap: 0, top: 1, fit: 16 },\n  { cw: 1, ch: 4, per: 64, gap: 1, top: 0, fit: 24 },\n  { cw: 1, ch: 2, per: 64, gap: 1, top: 0, fit: 48 },\n  { cw: 1, ch: 1, per: 64, gap: 1, top: 0, fit: 999 },\n];\n// 3x5 numerals 1, 2 and 3, one octal digit a row from the top. No other\n// digit ever appears: no run in these seeds is longer than three.\nconst FONT = [0, 0o26227, 0o71747, 0o71317];\n// The largest row the finest print still holds, in lines of 64.\nconst LAST = 120;\n// Rows the page rattles off at the start before it settles to reading.\nconst BURST = 20;\n\nfunction say(d) {\n  const o = [];\n  for (let i = 0; i \u003c d.length; ) {\n    let j = i + 1;\n    while (j \u003c d.length && d[j] === d[i]) j++;\n    o.push(j - i, d[i]);\n    i = j;\n  }\n  return Uint8Array.from(o);\n}\n\nfunction build(P, si) {\n  const [s0, at, comp] = SEEDS[si];\n  const T = [];\n  let d = Uint8Array.from(s0, (c) => +c), E = null;\n  for (let n = 1; n \u003c= 48; n++) {\n    if (n === at) E = comp.split(\".\").map((x) => NAME.indexOf(x));\n    else if (E) E = E.flatMap((k) => DEC[k]);\n    const e = new Uint8Array(d.length).fill(NONE), end = new Uint8Array(d.length);\n    if (E) {\n      let p = 0;\n      for (const k of E) e.fill(k, p, (p += LEN[k])), (end[p - 1] = 1);\n    }\n    T.push({ d, e, end, n: d.length, ri: null });\n    const nx = say(d);\n    if (nx.length > LAST * 64) break;\n    d = nx;\n  }\n  P.si = si;\n  P.T = T;\n  P.lv = 0;\n  P.ls = lines(T, 0);\n  P.l0 = P.ls;\n  P.sc = 0;\n  P.n = 0;\n  P.st = 1;\n  P.w = 0.1;\n  P.r = 0;\n  // The seed is on the page from the start.\n  P.typed = T[0].n;\n  P.at = new Float32Array(T[0].n).fill(P.clock - 1);\n  P.u = 0;\n}\n\n// Where each row starts, in lines of a print.\nfunction lines(T, lv) {\n  const L = LV[lv], ls = new Int32Array(T.length + 1);\n  for (let k = 0; k \u003c T.length; k++) ls[k + 1] = ls[k] + ceil(T[k].n / L.per) + L.gap;\n  return ls;\n}\nconst rowLines = (P, k, lv) => ceil(P.T[k].n / LV[lv].per);\n\n// The runs of the row being read: for each digit, the number of its run.\nfunction runs(t) {\n  if (t.ri) return;\n  t.ri = new Int32Array(t.n);\n  t.rs = [];\n  for (let i = 0, r = -1; i \u003c t.n; i++) {\n    if (i === 0 || t.d[i] !== t.d[i - 1]) r++, t.rs.push(i);\n    t.ri[i] = r;\n  }\n}\n\n// How long a row takes to type: seconds for its runs at the Speed knob.\nfunction dur(P, k) {\n  const runsN = P.T[k].n / 2, f = 2 / P.sp;\n  if (P.l0[k] \u003c BURST) return 0.15 * pow(f, 0.5);\n  if (P.lv === 0) return f * (0.2 + 0.55 * pow(runsN, 0.5));\n  return f * (0.5 + 0.55 * pow(runsN, 0.3));\n}\n\n// The scroll that keeps the typing line at the foot of the panel and the\n// reading head on it.\nfunction want(P, lv, ls, typed) {\n  const L = LV[lv], n = P.n;\n  if (n >= P.T.length) return P.sc;\n  const tl = ls[n] + floor(min(typed, P.T[n].n - 1) / L.per);\n  let s = L.top + (tl + 1) * L.ch + 1 - H;\n  if (n > 0) {\n    const src = P.T[n - 1], i = src.rs ? src.rs[min(src.rs.length - 1, floor(P.r))] : 0;\n    s = min(s, L.top + (ls[n - 1] + floor(i / L.per)) * L.ch - 2);\n  }\n  return max(0, s);\n}\n\nfunction next(P) {\n  P.n++;\n  P.r = 0;\n  P.typed = 0;\n  if (P.n >= P.T.length) return void ((P.st = 3), (P.w = 3));\n  const t = P.T[P.n];\n  runs(P.T[P.n - 1]);\n  P.at = new Float32Array(t.n);\n  P.st = 0;\n  const lv = P.lv;\n  if (lv \u003c 3 && rowLines(P, P.n - 1, lv) + rowLines(P, P.n, lv) > LV[lv].fit) {\n    // Step down a print: every digit flies from its old place to its new one.\n    P.nl = lv + 1;\n    P.nls = lines(P.T, lv + 1);\n    P.nsc = want(P, lv + 1, P.nls, 0);\n    P.st = 2;\n    P.u = 0;\n  }\n}\n\nexport function setup(params) {\n  params.s = { si: 0, off: 0, sp: 2, hue: 0, dig: 0.06, col: new Float32Array(93 * 4 * 3), buf: new Float32Array(W * H * 3), clock: 0 };\n  build(params.s, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.dig = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.off++;\n  const si = (round(cl(k[2], 1, 5)) - 1 + P.off) % SEEDS.length;\n  if (si !== P.si) build(P, si);\n  P.clock += d;\n  if (P.st === 0) {\n    const t = P.T[P.n], rn = t.n / 2;\n    P.r = min(rn, P.r + (d * rn) / dur(P, P.n));\n    // The count is spoken as the run lights up, the digit just after.\n    while (P.typed \u003c t.n && (P.typed >> 1) + (P.typed & 1 ? 0.55 : 0.12) \u003c= P.r) P.at[P.typed++] = P.clock;\n    if (P.typed >= t.n) (P.st = 1), (P.w = P.l0[P.n] \u003c BURST ? 0.03 : 0.35 * (2 / P.sp));\n  } else if (P.st === 1) {\n    P.w -= d;\n    if (P.w \u003c= 0) next(P);\n  } else if (P.st === 2) {\n    P.u += d / 1.6;\n    if (P.u >= 1) (P.lv = P.nl), (P.ls = P.nls), (P.sc = P.nsc), (P.st = 0);\n  } else if (P.st === 3) {\n    P.w -= d;\n    if (P.w \u003c= 0) (P.st = 4), (P.u = 0);\n  } else if (P.st === 4) {\n    P.u += d / 0.8;\n    if (P.u >= 1) build(P, P.si);\n  }\n  if (P.st !== 2) P.sc += (want(P, P.lv, P.ls, P.typed) - P.sc) * (1 - exp(-d * 10));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\n// Colour of each element and digit: element hue by place in Conway's table,\n// from pink at hydrogen through violet and blue to green at uranium, so an\n// element and what it decays into are near in colour. The Digits knob mixes\n// toward a hue for each digit. Rows before the split into elements are pale.\nconst tmp = new Float32Array(6);\nfunction palette(P) {\n  const h0 = P.hue + 0.95, col = P.col, k = cl((P.dig - 0.3) / 0.4, 0, 1), g = k * k * (3 - 2 * k);\n  for (let e = 0; e \u003c= NONE; e++)\n    for (let dg = 1; dg \u003c= 3; dg++) {\n      if (e === NONE) hsv(h0 + 0.2, 0.3, 1, tmp, 0);\n      else hsv(h0 - 0.58 * (e / 91), 0.75, 1, tmp, 0);\n      hsv(h0 + [0, 0.56, 0.85, 0.19][dg], 0.8, 1, tmp, 3);\n      const o = (e * 4 + dg) * 3;\n      for (let c = 0; c \u003c 3; c++) col[o + c] = tmp[c] + (tmp[c + 3] - tmp[c]) * g;\n    }\n}\n\n// One digit onto the buffer in print lv at (x, y), the palette colour at o\n// scaled by v and whitened by w. Behind a numeral lies a strip of tint, open\n// after the last digit of an element; a bar at the end of an element is dimmer.\nfunction put(P, lv, x, y, dg, o, v, w, tint, end) {\n  const buf = P.buf, col = P.col;\n  const r = col[o] * v, g = col[o + 1] * v, b = col[o + 2] * v;\n  const R = r + (255 - r) * w, G = g + (255 - g) * w, B = b + (255 - b) * w;\n  if (lv === 0) {\n    const bits = FONT[dg], tw = end ? 3 : 4;\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const yy = y + gy;\n      if (yy \u003c 0 || yy >= H) continue;\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c tw; gx++) {\n        const xx = x + gx;\n        if (xx >= W) break;\n        const q = (yy * W + xx) * 3;\n        if (gx \u003c 3 && row & (4 >> gx)) (buf[q] = R), (buf[q + 1] = G), (buf[q + 2] = B);\n        else if (tint > 0) (buf[q] = col[o] * tint), (buf[q + 1] = col[o + 1] * tint), (buf[q + 2] = col[o + 2] * tint);\n      }\n    }\n    return;\n  }\n  const m = lv === 1 ? (end ? 0.6 : 1) : lv === 2 ? [0, 0.7, 0.86, 1][dg] : [0, 0.8, 0.9, 1][dg];\n  for (let yy = lv === 1 ? y + 3 - dg : y, y1 = lv === 1 ? y + 3 : y + LV[lv].ch; yy \u003c y1; yy++) {\n    if (yy \u003c 0 || yy >= H || x >= W) continue;\n    const q = (yy * W + x) * 3;\n    buf[q] = R * m;\n    buf[q + 1] = G * m;\n    buf[q + 2] = B * m;\n  }\n}\n\n// Brightness and whitening of digit i of row k: rows long read are dim, the\n// row being read dims behind the reading head, the run under the head lights\n// up, and a digit just typed flashes.\nconst OLD = 0.62, SRC = 0.95;\nfunction look(P, k, i, out) {\n  const n = P.n;\n  out[0] = OLD;\n  out[1] = 0;\n  if (k === n && P.st \u003c= 1) {\n    out[0] = 1;\n    out[1] = 0.85 * exp(-(P.clock - P.at[i]) / 0.22);\n  } else if (k === n - 1 && P.st \u003c= 1) {\n    const t = P.T[k], dr = P.r - t.ri[i];\n    if (dr \u003c 0) out[0] = SRC;\n    else {\n      const tau = dur(P, n) / (P.T[n].n / 2), s = dr \u003c 1 ? 0 : ((dr - 1) * tau) / 0.25;\n      out[1] = 0.8 * exp(-s);\n      out[0] = OLD + (SRC - OLD) * exp(-s * 0.3);\n    }\n  } else if (k === n - 1) out[0] = SRC;\n}\n\nconst lk = new Float32Array(2);\nfunction drawPage(P, lv, ls, sc) {\n  const L = LV[lv], top = L.top - round(sc), tintBase = (1 - P.dig) * 0.13;\n  const last = min(P.n, P.T.length - 1);\n  for (let k = 0; k \u003c= last; k++) {\n    const t = P.T[k], y0 = top + ls[k] * L.ch;\n    if (y0 >= H) break;\n    if (y0 + (ls[k + 1] - ls[k]) * L.ch \u003c 0) continue;\n    const cnt = k === P.n ? (P.st \u003c= 1 ? P.typed : 0) : t.n;\n    for (let i = 0; i \u003c cnt; i++) {\n      const y = y0 + floor(i / L.per) * L.ch;\n      if (y + L.ch \u003c= 0) {\n        i += L.per - 1 - (i % L.per);\n        continue;\n      }\n      if (y >= H) break;\n      look(P, k, i, lk);\n      const e = t.e[i], dg = t.d[i];\n      put(P, lv, (i % L.per) * L.cw, y, dg, (e * 4 + dg) * 3, lk[0], lk[1], e === NONE ? 0 : tintBase * (0.6 + 0.4 * lk[0]), t.end[i]);\n    }\n  }\n}\n\n// Stepping down a print: line by line from the top, each numeral drops to a\n// block and flies to its place in the finer print.\nfunction drawFlight(P) {\n  const A = LV[P.lv], B = LV[P.nl], u = P.u, tintBase = (1 - P.dig) * 0.13;\n  const ta = A.top - round(P.sc), tb = B.top - round(P.nsc);\n  for (let k = 0; k \u003c P.n; k++) {\n    const t = P.T[k];\n    for (let i = 0; i \u003c t.n; i++) {\n      const xa = (i % A.per) * A.cw, ya = ta + (P.ls[k] + floor(i / A.per)) * A.ch;\n      const xb = (i % B.per) * B.cw, yb = tb + (P.nls[k] + floor(i / B.per)) * B.ch;\n      if ((ya \u003c -6 || ya >= H) && (yb \u003c -6 || yb >= H)) continue;\n      const v = k === P.n - 1 ? SRC : OLD, e = t.e[i], dg = t.d[i], o = (e * 4 + dg) * 3;\n      const s = cl((u * 1.5 - 0.5 * cl(ya / H, 0, 1)) * 1.25, 0, 1);\n      if (s \u003c= 0) put(P, P.lv, xa, ya, dg, o, v, 0, e === NONE ? 0 : tintBase * (0.6 + 0.4 * v), t.end[i]);\n      else {\n        const f = s * s * (3 - 2 * s);\n        put(P, P.nl, round(xa + (xb - xa) * f), round(ya + (yb - ya) * f), dg, o, v, 0.5 * (1 - f), 0, t.end[i]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  palette(P);\n  const buf = P.buf;\n  buf.fill(0);\n  if (P.st === 2) drawFlight(P);\n  else drawPage(P, P.lv, P.ls, P.sc);\n  const fade = P.st === 4 ? 1 - P.u : 1;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * fade, buf[p + 1] * fade, buf[p + 2] * fade);\n}\n","layer":{"id":"layer-look-and-say","type":"code","name":"look-and-say","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Look and Say\n// Family:  data\n// Idea:    Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the look-and-say sequence and its audioactive decay into 92 elements (John Horton Conway, 1986), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream.\n// Knob 2: Speed. How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long.\n// Knob 3: Seed. The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s).\n// Knob 4: Digits. At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold.\n// Buttons: K1 tap starts the page again from the next seed.\n\nconst W = 64, H = 128;\nconst { min, max, floor, ceil, exp, pow, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Conway's 92 elements, H to U: the name, the digits, and what the element\n// becomes when it is read aloud. Every term of the sequence from the eighth\n// on is a row of these, and each element decays on its own.\nconst TABLE = `H 22 H|He 13112221133211322112211213322112 Hf.Pa.H.Ca.Li|Li 312211322212221121123222112 He|Be 111312211312113221133211322112211213322112 Ge.Ca.Li|B 1321132122211322212221121123222112 Be|C 3113112211322112211213322112 B|N 111312212221121123222112 C|O 132112211213322112 N|F 31121123222112 O|Ne 111213322112 F|Na 123222112 Ne|Mg 3113322112 Pm.Na|Al 1113222112 Mg|Si 1322112 Al|P 311311222112 Ho.Si|S 1113122112 P|Cl 132112 S|Ar 3112 Cl|K 1112 Ar|Ca 12 K|Sc 3113112221133112 Ho.Pa.H.Ca.Co|Ti 11131221131112 Sc|V 13211312 Ti|Cr 31132 V|Mn 111311222112 Cr.Si|Fe 13122112 Mn|Co 32112 Fe|Ni 11133112 Zn.Co|Cu 131112 Ni|Zn 312 Cu|Ga 13221133122211332 Eu.Ca.Ac.H.Ca.Zn|Ge 31131122211311122113222 Ho.Ga|As 11131221131211322113322112 Ge.Na|Se 13211321222113222112 As|Br 3113112211322112 Se|Kr 11131221222112 Br|Rb 1321122112 Kr|Sr 3112112 Rb|Y 1112133 Sr.U|Zr 12322211331222113112211 Y.H.Ca.Tc|Nb 1113122113322113111221131221 Er.Zr|Mo 13211322211312113211 Nb|Tc 311322113212221 Mo|Ru 132211331222113112211 Eu.Ca.Tc|Rh 311311222113111221131221 Ho.Ru|Pd 111312211312113211 Rh|Ag 132113212221 Pd|Cd 3113112211 Ag|In 11131221 Cd|Sn 13211 In|Sb 3112221 Pm.Sn|Te 1322113312211 Eu.Ca.Sb|I 311311222113111221 Ho.Te|Xe 11131221131211 I|Cs 13211321 Xe|Ba 311311 Cs|La 11131 Ba|Ce 1321133112 La.H.Ca.Co|Pr 31131112 Ce|Nd 111312 Pr|Pm 132 Nd|Sm 311332 Pm.Ca.Zn|Eu 1113222 Sm|Gd 13221133112 Eu.Ca.Co|Tb 3113112221131112 Ho.Gd|Dy 111312211312 Tb|Ho 1321132 Dy|Er 311311222 Ho.Pm|Tm 11131221133112 Er.Ca.Co|Yb 1321131112 Tm|Lu 311312 Yb|Hf 11132 Lu|Ta 13112221133211322112211213322113 Hf.Pa.H.Ca.W|W 312211322212221121123222113 Ta|Re 111312211312113221133211322112211213322113 Ge.Ca.W|Os 1321132122211322212221121123222113 Re|Ir 3113112211322112211213322113 Os|Pt 111312212221121123222113 Ir|Au 132112211213322113 Pt|Hg 31121123222113 Au|Tl 111213322113 Hg|Pb 123222113 Tl|Bi 3113322113 Pm.Pb|Po 1113222113 Bi|At 1322113 Po|Rn 311311222113 Ho.At|Fr 1113122113 Rn|Ra 132113 Fr|Ac 3113 Ra|Th 1113 Ac|Pa 13 Th|U 3 Pa`;\nconst ROWS = TABLE.split(\"|\").map((r) => r.split(\" \"));\nconst NAME = ROWS.map((r) => r[0]);\nconst LEN = ROWS.map((r) => r[1].length);\nconst DEC = ROWS.map((r) => r[2].split(\".\").map((n) => NAME.indexOf(n)));\nconst NONE = 92;\n\n// The seeds: the first row, the row from which it is a compound of elements,\n// and that compound. Seed 1 runs seven rows before it splits into Hf.Sn.\nconst SEEDS = [\n  [\"1\", 8, \"Hf.Sn\"],\n  [\"3\", 1, \"U\"],\n  [\"312\", 1, \"Zn\"],\n  [\"311311\", 1, \"Ba\"],\n  [\"22\", 1, \"H\"],\n];\n\n// The four prints: cell width and height, digits a line, blank lines between\n// rows, top margin, and how many lines the row read and the row typed may\n// fill together before the page steps down to the next print. Numerals\n// first, then bars one LED wide and as tall as the digit, so a run of equal\n// digits stands as a flat step; then one LED a digit, two LEDs tall, then\n// one.\nconst LV = [\n  { cw: 4, ch: 6, per: 16, gap: 0, top: 1, fit: 16 },\n  { cw: 1, ch: 4, per: 64, gap: 1, top: 0, fit: 24 },\n  { cw: 1, ch: 2, per: 64, gap: 1, top: 0, fit: 48 },\n  { cw: 1, ch: 1, per: 64, gap: 1, top: 0, fit: 999 },\n];\n// 3x5 numerals 1, 2 and 3, one octal digit a row from the top. No other\n// digit ever appears: no run in these seeds is longer than three.\nconst FONT = [0, 0o26227, 0o71747, 0o71317];\n// The largest row the finest print still holds, in lines of 64.\nconst LAST = 120;\n// Rows the page rattles off at the start before it settles to reading.\nconst BURST = 20;\n\nfunction say(d) {\n  const o = [];\n  for (let i = 0; i \u003c d.length; ) {\n    let j = i + 1;\n    while (j \u003c d.length && d[j] === d[i]) j++;\n    o.push(j - i, d[i]);\n    i = j;\n  }\n  return Uint8Array.from(o);\n}\n\nfunction build(P, si) {\n  const [s0, at, comp] = SEEDS[si];\n  const T = [];\n  let d = Uint8Array.from(s0, (c) => +c), E = null;\n  for (let n = 1; n \u003c= 48; n++) {\n    if (n === at) E = comp.split(\".\").map((x) => NAME.indexOf(x));\n    else if (E) E = E.flatMap((k) => DEC[k]);\n    const e = new Uint8Array(d.length).fill(NONE), end = new Uint8Array(d.length);\n    if (E) {\n      let p = 0;\n      for (const k of E) e.fill(k, p, (p += LEN[k])), (end[p - 1] = 1);\n    }\n    T.push({ d, e, end, n: d.length, ri: null });\n    const nx = say(d);\n    if (nx.length > LAST * 64) break;\n    d = nx;\n  }\n  P.si = si;\n  P.T = T;\n  P.lv = 0;\n  P.ls = lines(T, 0);\n  P.l0 = P.ls;\n  P.sc = 0;\n  P.n = 0;\n  P.st = 1;\n  P.w = 0.1;\n  P.r = 0;\n  // The seed is on the page from the start.\n  P.typed = T[0].n;\n  P.at = new Float32Array(T[0].n).fill(P.clock - 1);\n  P.u = 0;\n}\n\n// Where each row starts, in lines of a print.\nfunction lines(T, lv) {\n  const L = LV[lv], ls = new Int32Array(T.length + 1);\n  for (let k = 0; k \u003c T.length; k++) ls[k + 1] = ls[k] + ceil(T[k].n / L.per) + L.gap;\n  return ls;\n}\nconst rowLines = (P, k, lv) => ceil(P.T[k].n / LV[lv].per);\n\n// The runs of the row being read: for each digit, the number of its run.\nfunction runs(t) {\n  if (t.ri) return;\n  t.ri = new Int32Array(t.n);\n  t.rs = [];\n  for (let i = 0, r = -1; i \u003c t.n; i++) {\n    if (i === 0 || t.d[i] !== t.d[i - 1]) r++, t.rs.push(i);\n    t.ri[i] = r;\n  }\n}\n\n// How long a row takes to type: seconds for its runs at the Speed knob.\nfunction dur(P, k) {\n  const runsN = P.T[k].n / 2, f = 2 / P.sp;\n  if (P.l0[k] \u003c BURST) return 0.15 * pow(f, 0.5);\n  if (P.lv === 0) return f * (0.2 + 0.55 * pow(runsN, 0.5));\n  return f * (0.5 + 0.55 * pow(runsN, 0.3));\n}\n\n// The scroll that keeps the typing line at the foot of the panel and the\n// reading head on it.\nfunction want(P, lv, ls, typed) {\n  const L = LV[lv], n = P.n;\n  if (n >= P.T.length) return P.sc;\n  const tl = ls[n] + floor(min(typed, P.T[n].n - 1) / L.per);\n  let s = L.top + (tl + 1) * L.ch + 1 - H;\n  if (n > 0) {\n    const src = P.T[n - 1], i = src.rs ? src.rs[min(src.rs.length - 1, floor(P.r))] : 0;\n    s = min(s, L.top + (ls[n - 1] + floor(i / L.per)) * L.ch - 2);\n  }\n  return max(0, s);\n}\n\nfunction next(P) {\n  P.n++;\n  P.r = 0;\n  P.typed = 0;\n  if (P.n >= P.T.length) return void ((P.st = 3), (P.w = 3));\n  const t = P.T[P.n];\n  runs(P.T[P.n - 1]);\n  P.at = new Float32Array(t.n);\n  P.st = 0;\n  const lv = P.lv;\n  if (lv \u003c 3 && rowLines(P, P.n - 1, lv) + rowLines(P, P.n, lv) > LV[lv].fit) {\n    // Step down a print: every digit flies from its old place to its new one.\n    P.nl = lv + 1;\n    P.nls = lines(P.T, lv + 1);\n    P.nsc = want(P, lv + 1, P.nls, 0);\n    P.st = 2;\n    P.u = 0;\n  }\n}\n\nexport function setup(params) {\n  params.s = { si: 0, off: 0, sp: 2, hue: 0, dig: 0.06, col: new Float32Array(93 * 4 * 3), buf: new Float32Array(W * H * 3), clock: 0 };\n  build(params.s, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.dig = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.off++;\n  const si = (round(cl(k[2], 1, 5)) - 1 + P.off) % SEEDS.length;\n  if (si !== P.si) build(P, si);\n  P.clock += d;\n  if (P.st === 0) {\n    const t = P.T[P.n], rn = t.n / 2;\n    P.r = min(rn, P.r + (d * rn) / dur(P, P.n));\n    // The count is spoken as the run lights up, the digit just after.\n    while (P.typed \u003c t.n && (P.typed >> 1) + (P.typed & 1 ? 0.55 : 0.12) \u003c= P.r) P.at[P.typed++] = P.clock;\n    if (P.typed >= t.n) (P.st = 1), (P.w = P.l0[P.n] \u003c BURST ? 0.03 : 0.35 * (2 / P.sp));\n  } else if (P.st === 1) {\n    P.w -= d;\n    if (P.w \u003c= 0) next(P);\n  } else if (P.st === 2) {\n    P.u += d / 1.6;\n    if (P.u >= 1) (P.lv = P.nl), (P.ls = P.nls), (P.sc = P.nsc), (P.st = 0);\n  } else if (P.st === 3) {\n    P.w -= d;\n    if (P.w \u003c= 0) (P.st = 4), (P.u = 0);\n  } else if (P.st === 4) {\n    P.u += d / 0.8;\n    if (P.u >= 1) build(P, P.si);\n  }\n  if (P.st !== 2) P.sc += (want(P, P.lv, P.ls, P.typed) - P.sc) * (1 - exp(-d * 10));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\n// Colour of each element and digit: element hue by place in Conway's table,\n// from pink at hydrogen through violet and blue to green at uranium, so an\n// element and what it decays into are near in colour. The Digits knob mixes\n// toward a hue for each digit. Rows before the split into elements are pale.\nconst tmp = new Float32Array(6);\nfunction palette(P) {\n  const h0 = P.hue + 0.95, col = P.col, k = cl((P.dig - 0.3) / 0.4, 0, 1), g = k * k * (3 - 2 * k);\n  for (let e = 0; e \u003c= NONE; e++)\n    for (let dg = 1; dg \u003c= 3; dg++) {\n      if (e === NONE) hsv(h0 + 0.2, 0.3, 1, tmp, 0);\n      else hsv(h0 - 0.58 * (e / 91), 0.75, 1, tmp, 0);\n      hsv(h0 + [0, 0.56, 0.85, 0.19][dg], 0.8, 1, tmp, 3);\n      const o = (e * 4 + dg) * 3;\n      for (let c = 0; c \u003c 3; c++) col[o + c] = tmp[c] + (tmp[c + 3] - tmp[c]) * g;\n    }\n}\n\n// One digit onto the buffer in print lv at (x, y), the palette colour at o\n// scaled by v and whitened by w. Behind a numeral lies a strip of tint, open\n// after the last digit of an element; a bar at the end of an element is dimmer.\nfunction put(P, lv, x, y, dg, o, v, w, tint, end) {\n  const buf = P.buf, col = P.col;\n  const r = col[o] * v, g = col[o + 1] * v, b = col[o + 2] * v;\n  const R = r + (255 - r) * w, G = g + (255 - g) * w, B = b + (255 - b) * w;\n  if (lv === 0) {\n    const bits = FONT[dg], tw = end ? 3 : 4;\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const yy = y + gy;\n      if (yy \u003c 0 || yy >= H) continue;\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c tw; gx++) {\n        const xx = x + gx;\n        if (xx >= W) break;\n        const q = (yy * W + xx) * 3;\n        if (gx \u003c 3 && row & (4 >> gx)) (buf[q] = R), (buf[q + 1] = G), (buf[q + 2] = B);\n        else if (tint > 0) (buf[q] = col[o] * tint), (buf[q + 1] = col[o + 1] * tint), (buf[q + 2] = col[o + 2] * tint);\n      }\n    }\n    return;\n  }\n  const m = lv === 1 ? (end ? 0.6 : 1) : lv === 2 ? [0, 0.7, 0.86, 1][dg] : [0, 0.8, 0.9, 1][dg];\n  for (let yy = lv === 1 ? y + 3 - dg : y, y1 = lv === 1 ? y + 3 : y + LV[lv].ch; yy \u003c y1; yy++) {\n    if (yy \u003c 0 || yy >= H || x >= W) continue;\n    const q = (yy * W + x) * 3;\n    buf[q] = R * m;\n    buf[q + 1] = G * m;\n    buf[q + 2] = B * m;\n  }\n}\n\n// Brightness and whitening of digit i of row k: rows long read are dim, the\n// row being read dims behind the reading head, the run under the head lights\n// up, and a digit just typed flashes.\nconst OLD = 0.62, SRC = 0.95;\nfunction look(P, k, i, out) {\n  const n = P.n;\n  out[0] = OLD;\n  out[1] = 0;\n  if (k === n && P.st \u003c= 1) {\n    out[0] = 1;\n    out[1] = 0.85 * exp(-(P.clock - P.at[i]) / 0.22);\n  } else if (k === n - 1 && P.st \u003c= 1) {\n    const t = P.T[k], dr = P.r - t.ri[i];\n    if (dr \u003c 0) out[0] = SRC;\n    else {\n      const tau = dur(P, n) / (P.T[n].n / 2), s = dr \u003c 1 ? 0 : ((dr - 1) * tau) / 0.25;\n      out[1] = 0.8 * exp(-s);\n      out[0] = OLD + (SRC - OLD) * exp(-s * 0.3);\n    }\n  } else if (k === n - 1) out[0] = SRC;\n}\n\nconst lk = new Float32Array(2);\nfunction drawPage(P, lv, ls, sc) {\n  const L = LV[lv], top = L.top - round(sc), tintBase = (1 - P.dig) * 0.13;\n  const last = min(P.n, P.T.length - 1);\n  for (let k = 0; k \u003c= last; k++) {\n    const t = P.T[k], y0 = top + ls[k] * L.ch;\n    if (y0 >= H) break;\n    if (y0 + (ls[k + 1] - ls[k]) * L.ch \u003c 0) continue;\n    const cnt = k === P.n ? (P.st \u003c= 1 ? P.typed : 0) : t.n;\n    for (let i = 0; i \u003c cnt; i++) {\n      const y = y0 + floor(i / L.per) * L.ch;\n      if (y + L.ch \u003c= 0) {\n        i += L.per - 1 - (i % L.per);\n        continue;\n      }\n      if (y >= H) break;\n      look(P, k, i, lk);\n      const e = t.e[i], dg = t.d[i];\n      put(P, lv, (i % L.per) * L.cw, y, dg, (e * 4 + dg) * 3, lk[0], lk[1], e === NONE ? 0 : tintBase * (0.6 + 0.4 * lk[0]), t.end[i]);\n    }\n  }\n}\n\n// Stepping down a print: line by line from the top, each numeral drops to a\n// block and flies to its place in the finer print.\nfunction drawFlight(P) {\n  const A = LV[P.lv], B = LV[P.nl], u = P.u, tintBase = (1 - P.dig) * 0.13;\n  const ta = A.top - round(P.sc), tb = B.top - round(P.nsc);\n  for (let k = 0; k \u003c P.n; k++) {\n    const t = P.T[k];\n    for (let i = 0; i \u003c t.n; i++) {\n      const xa = (i % A.per) * A.cw, ya = ta + (P.ls[k] + floor(i / A.per)) * A.ch;\n      const xb = (i % B.per) * B.cw, yb = tb + (P.nls[k] + floor(i / B.per)) * B.ch;\n      if ((ya \u003c -6 || ya >= H) && (yb \u003c -6 || yb >= H)) continue;\n      const v = k === P.n - 1 ? SRC : OLD, e = t.e[i], dg = t.d[i], o = (e * 4 + dg) * 3;\n      const s = cl((u * 1.5 - 0.5 * cl(ya / H, 0, 1)) * 1.25, 0, 1);\n      if (s \u003c= 0) put(P, P.lv, xa, ya, dg, o, v, 0, e === NONE ? 0 : tintBase * (0.6 + 0.4 * v), t.end[i]);\n      else {\n        const f = s * s * (3 - 2 * s);\n        put(P, P.nl, round(xa + (xb - xa) * f), round(ya + (yb - ya) * f), dg, o, v, 0.5 * (1 - f), 0, t.end[i]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  palette(P);\n  const buf = P.buf;\n  buf.fill(0);\n  if (P.st === 2) drawFlight(P);\n  else drawPage(P, P.lv, P.ls, P.sc);\n  const fade = P.st === 4 ? 1 - P.u : 1;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * fade, buf[p + 1] * fade, buf[p + 2] * fade);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long."},{"name":"Seed","min":1,"max":5,"about":"The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s)."},{"name":"Digits","min":0,"max":1,"about":"At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold."}],"start":[0,2,1,0.06],"measures":{"motion":1.7275,"detail":0.2216,"edges":0.866,"complexity":0.242,"coverage":0.6191,"colour":0.2962,"drift":0.1823},"knobResponse":[0.1154,0.1635,0.2082,0.064]},{"slug":"loose-powder","title":"Loose Powder","family":"cosmetic","round":29,"note":"꽃 무늬가 눌린 분홍 압축 파우더 위로 보이지 않는 퍼프가 그림자로만 내려와 자국을 내고, 들릴 때 하얀 가루 구름이 운모 반짝임과 함께 피어 위로 흘러가요. K3 을 올리면 무늬 비탈에 새틴 광이 돌고, 누르면 퍼프가 바로 내려와요.","idea":"A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.","buttons":"K1 tap brings the puff down now, once the last one has lifted.","code":"// ===== Patternflow pattern =====\n// Title:   Loose Powder\n// Family:  cosmetic\n// Idea:    A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the embossed relief of pressed face powder and the puff lifted from it\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1\n//\n// Knob 1: Hue. The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are.\n// Knob 2: Speed. How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower.\n// Knob 3: Shimmer. How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica.\n// Knob 4: Air. How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself.\n// Buttons: K1 tap brings the puff down now, once the last one has lifted.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, sqrt, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The powder ends at row FLOOR, where a gold line edges a white band: the\n// packaging, the only part of it on show. The medallion sits centred above.\nconst FLOOR = 115, MY = 57;\n\n// The emboss, as a height: an eight-petalled flower with a raised rim round\n// each petal, a ring at its heart, a wide ring cut off by the panel's sides\n// and fine rays beyond it. GRAIN is each LED's fixed bit of powder texture and\n// TW the seed of the mica that may sit there.\nconst E = new Float32Array(N), GRAIN = new Float32Array(N), TW = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = x + 0.5 - 32, dy = y + 0.5 - MY, r = hypot(dx, dy), a = atan2(dy, dx);\n    const pet = 21 + 6 * cos(a * 8);\n    let h = cl((pet - r) / 3, 0, 1) * 0.6;\n    h += 0.4 * exp(-(((r - pet) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 8.5) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 42) / 1.3) ** 2));\n    if (r > 44) h += 0.25 * (0.5 + 0.5 * cos(a * 48));\n    const i = y * W + x;\n    E[i] = h;\n    GRAIN[i] = (hash(i) - 0.5) * 0.07;\n    TW[i] = hash(i + 77777);\n  }\n\n// The LEDs that could hold mica, in the order Shimmer turns them on.\nconst MICA = Int32Array.from({ length: FLOOR * W }, (_, i) => i)\n  .filter((i) => TW[i] \u003c 0.02)\n  .sort((a, b) => TW[a] - TW[b]);\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), z: F(MAXP), vx: F(MAXP), vy: F(MAXP), vz: F(MAXP), ph: F(MAXP), om: F(MAXP), mica: new Uint8Array(MAXP),\n    n: 0, dent: F(N), wear: F(N).fill(1), dust: F(N), prof: F(N), hm: F(N), den: F(N), sh: F(N), tmp: F(N), buf: F(N * 3),\n    T: 0, u: 99, wisp: 0, px: 32, py: 64, pz: 40, started: false, hue: 0, shim: 1, air: 0.06, az: 0, col: F(6),\n  };\n}\n\n// One grain of powder into the air at height z. When the air is full, it\n// takes the place of a grain already there.\nfunction emit(S, x, y, z, vx, vy, vz) {\n  let i = S.n;\n  if (i >= MAXP) i = floor(Math.random() * MAXP);\n  else S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.z[i] = z;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  S.vz[i] = vz;\n  // A mica flake turns at its own rate and flashes once a turn.\n  S.mica[i] = Math.random() \u003c 0.04 * S.shim ? 1 : 0;\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.5 + 3.5 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n}\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.z[i] = S.z[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.vz[i] = S.vz[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.mica[i] = S.mica[j];\n}\n\n// The puff's round, in seconds at Speed 2: it comes down, presses, lifts, and\n// the cloud has the rest. R is its radius in LEDs, ZTOP how high it waits.\nconst DOWN = 1.2, PRESS = 0.8, LIFT = 0.7, ROUND = 7, R = 16, ZTOP = 34;\n\n// A new round: the puff picks a spot, and the dent it will press is drawn up.\nfunction start(S) {\n  S.u = 0;\n  S.px = 18 + Math.random() * 28;\n  S.py = 22 + Math.random() * (FLOOR - 46);\n  const p = S.prof;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = hypot(x + 0.5 - S.px, y + 0.5 - S.py);\n      p[y * W + x] = 1 - sstep(R * 0.3, R, r);\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.az = 0.32 * sin(S.T * 0.21) + 0.12 * sin(S.T * 0.53 + 1);\n  if (S.u > ROUND) start(S);\n  const u0 = S.u;\n  S.u += st;\n  const u = S.u;\n  // Height of the puff above the powder, and how deep it is pressed.\n  if (u \u003c DOWN) S.pz = ZTOP * (1 - sstep(0, DOWN, u));\n  else if (u \u003c DOWN + PRESS) S.pz = 0;\n  else S.pz = ZTOP * sstep(DOWN + PRESS, DOWN + PRESS + LIFT * 1.6, u);\n  const press = u \u003c DOWN ? 0 : u \u003c DOWN + PRESS ? sstep(DOWN, DOWN + PRESS * 0.6, u) : 1;\n  // Pressing dents the powder and flattens the emboss under the puff. Both\n  // come back slowly as the cloud dusts the surface, so the round can repeat.\n  const dent = S.dent, wear = S.wear, dust = S.dust, prof = S.prof;\n  const fd = exp(-st / 7), fw = st / 9, fu = exp(-st / 5);\n  for (let i = 0; i \u003c N; i++) {\n    dent[i] *= fd;\n    wear[i] += (1 - wear[i]) * fw;\n    dust[i] *= fu;\n    if (press > 0 && u \u003c DOWN + PRESS + 0.05) {\n      const p = prof[i] * press;\n      if (p > dent[i]) dent[i] = p;\n      const w = 1 - 0.6 * p;\n      if (w \u003c wear[i]) wear[i] = w;\n    }\n  }\n  // Squeezed out at the rim as it presses in, lifted out of the dent as it rises.\n  if (u0 \u003c DOWN + 0.1 && u >= DOWN + 0.1)\n    for (let k = 0; k \u003c 420; k++) {\n      const a = Math.random() * 2 * PI, s = 10 + 22 * Math.random();\n      emit(S, S.px + cos(a) * R * 0.9, S.py + sin(a) * R * 0.9, 0.5 + Math.random() * 2, cos(a) * s, sin(a) * s, 4 + 8 * Math.random());\n    }\n  if (u > DOWN + PRESS && u \u003c DOWN + PRESS + LIFT) {\n    const n = floor((850 * st) / LIFT + Math.random());\n    for (let k = 0; k \u003c n; k++) {\n      const a = Math.random() * 2 * PI, r = R * sqrt(Math.random()) * 0.9, s = 3 + 9 * Math.random();\n      emit(S, S.px + cos(a) * r, S.py + sin(a) * r, Math.random() * 3, cos(a) * s, sin(a) * s, 8 + 12 * Math.random());\n    }\n  }\n  // The air: slow eddies and a drift up the panel, both stronger with Air.\n  // A strong draught lifts wisps of loose powder off the surface by itself.\n  const A = S.air, T = S.T, kd = min(1, 1.2 * st), kz = min(1, 0.9 * st);\n  S.wisp += st * 160 * A * A;\n  while (S.wisp >= 1) {\n    S.wisp -= 1;\n    emit(S, Math.random() * W, 10 + Math.random() * (FLOOR - 10), 0.2, 0, 0, 2 + 4 * Math.random());\n  }\n  for (let i = S.n - 1; i >= 0; i--) {\n    const x = S.x[i], y = S.y[i];\n    const ex = (1.5 + 6 * A) * sin(y * 0.06 + T * 0.4) + (1 + 3 * A) * sin(y * 0.13 - T * 0.3 + x * 0.05);\n    const ey = -(2 + 16 * A) + (1.5 + 4 * A) * sin(x * 0.09 - T * 0.33);\n    S.vx[i] += (ex - S.vx[i]) * kd;\n    S.vy[i] += (ey - S.vy[i]) * kd;\n    S.vz[i] += (-1.3 - S.vz[i]) * kz;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + S.vy[i] * st;\n    S.z[i] += S.vz[i] * st;\n    S.ph[i] += S.om[i] * st;\n    const nx = S.x[i], ny = S.y[i];\n    if (nx \u003c -4 || nx > W + 4 || ny \u003c -6 || ny > FLOOR + 4) {\n      kill(S, i);\n      continue;\n    }\n    if (S.z[i] \u003c= 0) {\n      // Settling: it dusts the powder where it lands.\n      const p = floor(ny) * W + floor(nx);\n      if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c FLOOR) dust[p] = min(1.5, dust[p] + 0.05);\n      kill(S, i);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.shim = cl(k[2], 1, 5);\n  S.air = cl(k[3], 0, 1);\n  // Open with the last round's cloud still in the air and the next puff a\n  // second and a half away.\n  if (!S.started) {\n    S.started = true;\n    start(S);\n    for (let i = 0; i \u003c 162; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.u > DOWN + PRESS + LIFT) start(S);\n  step(S, d * rate);\n}\n\n// Spreads a splat buffer over its neighbours, for a soft cloud.\nfunction blur(a, t, passes) {\n  for (let pass = 0; pass \u003c passes; pass++) {\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        t[i] = (a[i] * 2 + (x > 0 ? a[i - 1] : a[i]) + (x \u003c W - 1 ? a[i + 1] : a[i])) * 0.25;\n      }\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        a[i] = (t[i] * 2 + (y > 0 ? t[i - W] : t[i]) + (y \u003c H - 1 ? t[i + W] : t[i])) * 0.25;\n      }\n  }\n}\nfunction splat(a, x, y, w) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i, py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      a[py * W + px] += w * (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n    }\n}\n\n// The four LEDs beside one, as offsets into the colour buffer.\nconst NB = [-3, 3, -W * 3, W * 3];\n\n// The light comes low from the upper left, so the relief stands out, and sways\n// a little: the sheen and the glints move with it.\nconst LA = atan2(-0.65, -0.55), LZ = 0.5;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, hm = S.hm, den = S.den, sh = S.sh, col = S.col;\n  hsv(S.hue + 0.95, 0.5, 205, col, 0);\n  hsv(S.hue + 0.95, 0.07, 255, col, 3);\n  const la = LA + S.az, lx = cos(la), ly = sin(la);\n  const hl = hypot(lx * 0.894, ly * 0.894, 1.447), hx = (lx * 0.894) / hl, hy = (ly * 0.894) / hl, hz = 1.447 / hl;\n  const sheen = 0.1 + 0.45 * (S.shim - 1);\n  // The height of the surface, then the cloud's density and its shadow,\n  // thrown away from the light by each grain's height.\n  for (let i = 0; i \u003c N; i++) hm[i] = E[i] * S.wear[i] - 0.9 * S.dent[i] + 0.25 * S.dust[i];\n  den.fill(0);\n  sh.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const z = S.z[i];\n    splat(den, S.x[i], S.y[i], 0.55);\n    splat(sh, S.x[i] - lx * z * 0.8, S.y[i] - ly * z * 0.8, 0.35);\n  }\n  blur(den, S.tmp, 2);\n  blur(sh, S.tmp, 1);\n  // The puff's shadow, cast away from the light, softer the higher it is.\n  const sx = S.px - lx * S.pz * 0.8, sy = S.py - ly * S.pz * 0.8, soft = 1.5 + S.pz * 0.3, dark = 0.36 - 0.2 * (S.pz / ZTOP);\n  const sr = R * (1 + S.pz * 0.01);\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3;\n      const gx = (hm[y * W + min(W - 1, x + 1)] - hm[y * W + max(0, x - 1)]) * 1.6;\n      const gy = (hm[min(FLOOR - 1, y + 1) * W + x] - hm[max(0, y - 1) * W + x]) * 1.6;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1), lam = max(0, (-gx * lx - gy * ly + LZ) * inv) / LZ;\n      // Shimmer: a satin sheen on the slopes that face halfway between the\n      // light and the eye.\n      let sp = max(0, (-gx * hx - gy * hy + hz) * inv);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp = sp * sp * sp * sheen;\n      let v = (0.42 + 0.5 * lam) * (1 + GRAIN[i]);\n      // Fresh loose powder on top is paler; the pressed patch a touch deeper.\n      const du = min(1, S.dust[i]) * 0.3, pr = S.dent[i] * 0.1;\n      v *= 1 - pr;\n      const c = sh[i] * 1.4;\n      v *= 1 - (0.16 * c) / (1 + c);\n      const ddx = x + 0.5 - sx, ddy = y + 0.5 - sy, dd = ddx * ddx + ddy * ddy;\n      if (S.pz \u003c ZTOP * 0.99 && dd \u003c (sr + soft) ** 2) v *= 1 - dark * (1 - sstep(sr - soft, sr + soft, sqrt(dd)));\n      let r = col[0] * v + 250 * sp, g = col[1] * v + 240 * sp, b = col[2] * v + 225 * sp;\n      r += (col[3] * v - r) * du;\n      g += (col[4] * v - g) * du;\n      b += (col[5] * v - b) * du;\n      // The cloud in the air, lit and pale.\n      const e = den[i] * 1.8, a = min(0.9, e / (1 + e));\n      buf[q] = r + (col[3] - r) * a;\n      buf[q + 1] = g + (col[4] - g) * a;\n      buf[q + 2] = b + (col[5] - b) * a;\n    }\n  // The white band, and the gold line along its top with a highlight that\n  // slides along it as the light sways.\n  {\n    const gx = 32 + 110 * S.az;\n    for (let y = FLOOR; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const q = (y * W + x) * 3, gold = y === FLOOR ? 1 : y === FLOOR + 1 ? 0.35 : 0;\n        const hl = 0.8 + 0.45 * exp(-((x - gx) ** 2) / 50);\n        buf[q] = 222 + (240 * hl - 222) * gold;\n        buf[q + 1] = 216 + (178 * hl - 216) * gold;\n        buf[q + 2] = 208 + (70 * hl - 208) * gold;\n      }\n  }\n  // Mica pressed into the powder: a few LEDs, more with Shimmer, each glinting\n  // when the swaying light passes the angle of its face.\n  const lim = 0.004 * S.shim;\n  for (let k = 0; k \u003c MICA.length && TW[MICA[k]] \u003c lim; k++) {\n    const i = MICA[k];\n    const g = exp((cos(TW[i] * 1500 + S.az * 7) - 1) / 0.03) * (1 - min(1, S.dent[i]));\n    if (g \u003c 0.02) continue;\n    const q = i * 3, v = 230 * g;\n    buf[q] += v;\n    buf[q + 1] += v * 0.92;\n    buf[q + 2] += v * 0.8;\n  }\n  // Mica in the cloud: each flake turns and flashes as its face meets the light.\n  for (let i = 0; i \u003c S.n; i++) {\n    if (!S.mica[i]) continue;\n    const f = exp((cos(S.ph[i]) - 1) / 0.05), v = 40 + 260 * f;\n    const x = floor(S.x[i]), y = floor(S.y[i]);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= FLOOR - 1) continue;\n    const q = (y * W + x) * 3;\n    buf[q] += v;\n    buf[q + 1] += v * 0.95;\n    buf[q + 2] += v * 0.85;\n    // A flash spills a little onto the LEDs beside it, or it looks pinpricked.\n    if (f > 0.3)\n      for (const o of NB) {\n        buf[q + o] += v * 0.25;\n        buf[q + o + 1] += v * 0.24;\n        buf[q + o + 2] += v * 0.21;\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-loose-powder","type":"code","name":"loose-powder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Loose Powder\n// Family:  cosmetic\n// Idea:    A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the embossed relief of pressed face powder and the puff lifted from it\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1\n//\n// Knob 1: Hue. The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are.\n// Knob 2: Speed. How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower.\n// Knob 3: Shimmer. How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica.\n// Knob 4: Air. How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself.\n// Buttons: K1 tap brings the puff down now, once the last one has lifted.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, sqrt, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The powder ends at row FLOOR, where a gold line edges a white band: the\n// packaging, the only part of it on show. The medallion sits centred above.\nconst FLOOR = 115, MY = 57;\n\n// The emboss, as a height: an eight-petalled flower with a raised rim round\n// each petal, a ring at its heart, a wide ring cut off by the panel's sides\n// and fine rays beyond it. GRAIN is each LED's fixed bit of powder texture and\n// TW the seed of the mica that may sit there.\nconst E = new Float32Array(N), GRAIN = new Float32Array(N), TW = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = x + 0.5 - 32, dy = y + 0.5 - MY, r = hypot(dx, dy), a = atan2(dy, dx);\n    const pet = 21 + 6 * cos(a * 8);\n    let h = cl((pet - r) / 3, 0, 1) * 0.6;\n    h += 0.4 * exp(-(((r - pet) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 8.5) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 42) / 1.3) ** 2));\n    if (r > 44) h += 0.25 * (0.5 + 0.5 * cos(a * 48));\n    const i = y * W + x;\n    E[i] = h;\n    GRAIN[i] = (hash(i) - 0.5) * 0.07;\n    TW[i] = hash(i + 77777);\n  }\n\n// The LEDs that could hold mica, in the order Shimmer turns them on.\nconst MICA = Int32Array.from({ length: FLOOR * W }, (_, i) => i)\n  .filter((i) => TW[i] \u003c 0.02)\n  .sort((a, b) => TW[a] - TW[b]);\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), z: F(MAXP), vx: F(MAXP), vy: F(MAXP), vz: F(MAXP), ph: F(MAXP), om: F(MAXP), mica: new Uint8Array(MAXP),\n    n: 0, dent: F(N), wear: F(N).fill(1), dust: F(N), prof: F(N), hm: F(N), den: F(N), sh: F(N), tmp: F(N), buf: F(N * 3),\n    T: 0, u: 99, wisp: 0, px: 32, py: 64, pz: 40, started: false, hue: 0, shim: 1, air: 0.06, az: 0, col: F(6),\n  };\n}\n\n// One grain of powder into the air at height z. When the air is full, it\n// takes the place of a grain already there.\nfunction emit(S, x, y, z, vx, vy, vz) {\n  let i = S.n;\n  if (i >= MAXP) i = floor(Math.random() * MAXP);\n  else S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.z[i] = z;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  S.vz[i] = vz;\n  // A mica flake turns at its own rate and flashes once a turn.\n  S.mica[i] = Math.random() \u003c 0.04 * S.shim ? 1 : 0;\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.5 + 3.5 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n}\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.z[i] = S.z[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.vz[i] = S.vz[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.mica[i] = S.mica[j];\n}\n\n// The puff's round, in seconds at Speed 2: it comes down, presses, lifts, and\n// the cloud has the rest. R is its radius in LEDs, ZTOP how high it waits.\nconst DOWN = 1.2, PRESS = 0.8, LIFT = 0.7, ROUND = 7, R = 16, ZTOP = 34;\n\n// A new round: the puff picks a spot, and the dent it will press is drawn up.\nfunction start(S) {\n  S.u = 0;\n  S.px = 18 + Math.random() * 28;\n  S.py = 22 + Math.random() * (FLOOR - 46);\n  const p = S.prof;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = hypot(x + 0.5 - S.px, y + 0.5 - S.py);\n      p[y * W + x] = 1 - sstep(R * 0.3, R, r);\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.az = 0.32 * sin(S.T * 0.21) + 0.12 * sin(S.T * 0.53 + 1);\n  if (S.u > ROUND) start(S);\n  const u0 = S.u;\n  S.u += st;\n  const u = S.u;\n  // Height of the puff above the powder, and how deep it is pressed.\n  if (u \u003c DOWN) S.pz = ZTOP * (1 - sstep(0, DOWN, u));\n  else if (u \u003c DOWN + PRESS) S.pz = 0;\n  else S.pz = ZTOP * sstep(DOWN + PRESS, DOWN + PRESS + LIFT * 1.6, u);\n  const press = u \u003c DOWN ? 0 : u \u003c DOWN + PRESS ? sstep(DOWN, DOWN + PRESS * 0.6, u) : 1;\n  // Pressing dents the powder and flattens the emboss under the puff. Both\n  // come back slowly as the cloud dusts the surface, so the round can repeat.\n  const dent = S.dent, wear = S.wear, dust = S.dust, prof = S.prof;\n  const fd = exp(-st / 7), fw = st / 9, fu = exp(-st / 5);\n  for (let i = 0; i \u003c N; i++) {\n    dent[i] *= fd;\n    wear[i] += (1 - wear[i]) * fw;\n    dust[i] *= fu;\n    if (press > 0 && u \u003c DOWN + PRESS + 0.05) {\n      const p = prof[i] * press;\n      if (p > dent[i]) dent[i] = p;\n      const w = 1 - 0.6 * p;\n      if (w \u003c wear[i]) wear[i] = w;\n    }\n  }\n  // Squeezed out at the rim as it presses in, lifted out of the dent as it rises.\n  if (u0 \u003c DOWN + 0.1 && u >= DOWN + 0.1)\n    for (let k = 0; k \u003c 420; k++) {\n      const a = Math.random() * 2 * PI, s = 10 + 22 * Math.random();\n      emit(S, S.px + cos(a) * R * 0.9, S.py + sin(a) * R * 0.9, 0.5 + Math.random() * 2, cos(a) * s, sin(a) * s, 4 + 8 * Math.random());\n    }\n  if (u > DOWN + PRESS && u \u003c DOWN + PRESS + LIFT) {\n    const n = floor((850 * st) / LIFT + Math.random());\n    for (let k = 0; k \u003c n; k++) {\n      const a = Math.random() * 2 * PI, r = R * sqrt(Math.random()) * 0.9, s = 3 + 9 * Math.random();\n      emit(S, S.px + cos(a) * r, S.py + sin(a) * r, Math.random() * 3, cos(a) * s, sin(a) * s, 8 + 12 * Math.random());\n    }\n  }\n  // The air: slow eddies and a drift up the panel, both stronger with Air.\n  // A strong draught lifts wisps of loose powder off the surface by itself.\n  const A = S.air, T = S.T, kd = min(1, 1.2 * st), kz = min(1, 0.9 * st);\n  S.wisp += st * 160 * A * A;\n  while (S.wisp >= 1) {\n    S.wisp -= 1;\n    emit(S, Math.random() * W, 10 + Math.random() * (FLOOR - 10), 0.2, 0, 0, 2 + 4 * Math.random());\n  }\n  for (let i = S.n - 1; i >= 0; i--) {\n    const x = S.x[i], y = S.y[i];\n    const ex = (1.5 + 6 * A) * sin(y * 0.06 + T * 0.4) + (1 + 3 * A) * sin(y * 0.13 - T * 0.3 + x * 0.05);\n    const ey = -(2 + 16 * A) + (1.5 + 4 * A) * sin(x * 0.09 - T * 0.33);\n    S.vx[i] += (ex - S.vx[i]) * kd;\n    S.vy[i] += (ey - S.vy[i]) * kd;\n    S.vz[i] += (-1.3 - S.vz[i]) * kz;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + S.vy[i] * st;\n    S.z[i] += S.vz[i] * st;\n    S.ph[i] += S.om[i] * st;\n    const nx = S.x[i], ny = S.y[i];\n    if (nx \u003c -4 || nx > W + 4 || ny \u003c -6 || ny > FLOOR + 4) {\n      kill(S, i);\n      continue;\n    }\n    if (S.z[i] \u003c= 0) {\n      // Settling: it dusts the powder where it lands.\n      const p = floor(ny) * W + floor(nx);\n      if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c FLOOR) dust[p] = min(1.5, dust[p] + 0.05);\n      kill(S, i);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.shim = cl(k[2], 1, 5);\n  S.air = cl(k[3], 0, 1);\n  // Open with the last round's cloud still in the air and the next puff a\n  // second and a half away.\n  if (!S.started) {\n    S.started = true;\n    start(S);\n    for (let i = 0; i \u003c 162; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.u > DOWN + PRESS + LIFT) start(S);\n  step(S, d * rate);\n}\n\n// Spreads a splat buffer over its neighbours, for a soft cloud.\nfunction blur(a, t, passes) {\n  for (let pass = 0; pass \u003c passes; pass++) {\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        t[i] = (a[i] * 2 + (x > 0 ? a[i - 1] : a[i]) + (x \u003c W - 1 ? a[i + 1] : a[i])) * 0.25;\n      }\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        a[i] = (t[i] * 2 + (y > 0 ? t[i - W] : t[i]) + (y \u003c H - 1 ? t[i + W] : t[i])) * 0.25;\n      }\n  }\n}\nfunction splat(a, x, y, w) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i, py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      a[py * W + px] += w * (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n    }\n}\n\n// The four LEDs beside one, as offsets into the colour buffer.\nconst NB = [-3, 3, -W * 3, W * 3];\n\n// The light comes low from the upper left, so the relief stands out, and sways\n// a little: the sheen and the glints move with it.\nconst LA = atan2(-0.65, -0.55), LZ = 0.5;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, hm = S.hm, den = S.den, sh = S.sh, col = S.col;\n  hsv(S.hue + 0.95, 0.5, 205, col, 0);\n  hsv(S.hue + 0.95, 0.07, 255, col, 3);\n  const la = LA + S.az, lx = cos(la), ly = sin(la);\n  const hl = hypot(lx * 0.894, ly * 0.894, 1.447), hx = (lx * 0.894) / hl, hy = (ly * 0.894) / hl, hz = 1.447 / hl;\n  const sheen = 0.1 + 0.45 * (S.shim - 1);\n  // The height of the surface, then the cloud's density and its shadow,\n  // thrown away from the light by each grain's height.\n  for (let i = 0; i \u003c N; i++) hm[i] = E[i] * S.wear[i] - 0.9 * S.dent[i] + 0.25 * S.dust[i];\n  den.fill(0);\n  sh.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const z = S.z[i];\n    splat(den, S.x[i], S.y[i], 0.55);\n    splat(sh, S.x[i] - lx * z * 0.8, S.y[i] - ly * z * 0.8, 0.35);\n  }\n  blur(den, S.tmp, 2);\n  blur(sh, S.tmp, 1);\n  // The puff's shadow, cast away from the light, softer the higher it is.\n  const sx = S.px - lx * S.pz * 0.8, sy = S.py - ly * S.pz * 0.8, soft = 1.5 + S.pz * 0.3, dark = 0.36 - 0.2 * (S.pz / ZTOP);\n  const sr = R * (1 + S.pz * 0.01);\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3;\n      const gx = (hm[y * W + min(W - 1, x + 1)] - hm[y * W + max(0, x - 1)]) * 1.6;\n      const gy = (hm[min(FLOOR - 1, y + 1) * W + x] - hm[max(0, y - 1) * W + x]) * 1.6;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1), lam = max(0, (-gx * lx - gy * ly + LZ) * inv) / LZ;\n      // Shimmer: a satin sheen on the slopes that face halfway between the\n      // light and the eye.\n      let sp = max(0, (-gx * hx - gy * hy + hz) * inv);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp = sp * sp * sp * sheen;\n      let v = (0.42 + 0.5 * lam) * (1 + GRAIN[i]);\n      // Fresh loose powder on top is paler; the pressed patch a touch deeper.\n      const du = min(1, S.dust[i]) * 0.3, pr = S.dent[i] * 0.1;\n      v *= 1 - pr;\n      const c = sh[i] * 1.4;\n      v *= 1 - (0.16 * c) / (1 + c);\n      const ddx = x + 0.5 - sx, ddy = y + 0.5 - sy, dd = ddx * ddx + ddy * ddy;\n      if (S.pz \u003c ZTOP * 0.99 && dd \u003c (sr + soft) ** 2) v *= 1 - dark * (1 - sstep(sr - soft, sr + soft, sqrt(dd)));\n      let r = col[0] * v + 250 * sp, g = col[1] * v + 240 * sp, b = col[2] * v + 225 * sp;\n      r += (col[3] * v - r) * du;\n      g += (col[4] * v - g) * du;\n      b += (col[5] * v - b) * du;\n      // The cloud in the air, lit and pale.\n      const e = den[i] * 1.8, a = min(0.9, e / (1 + e));\n      buf[q] = r + (col[3] - r) * a;\n      buf[q + 1] = g + (col[4] - g) * a;\n      buf[q + 2] = b + (col[5] - b) * a;\n    }\n  // The white band, and the gold line along its top with a highlight that\n  // slides along it as the light sways.\n  {\n    const gx = 32 + 110 * S.az;\n    for (let y = FLOOR; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const q = (y * W + x) * 3, gold = y === FLOOR ? 1 : y === FLOOR + 1 ? 0.35 : 0;\n        const hl = 0.8 + 0.45 * exp(-((x - gx) ** 2) / 50);\n        buf[q] = 222 + (240 * hl - 222) * gold;\n        buf[q + 1] = 216 + (178 * hl - 216) * gold;\n        buf[q + 2] = 208 + (70 * hl - 208) * gold;\n      }\n  }\n  // Mica pressed into the powder: a few LEDs, more with Shimmer, each glinting\n  // when the swaying light passes the angle of its face.\n  const lim = 0.004 * S.shim;\n  for (let k = 0; k \u003c MICA.length && TW[MICA[k]] \u003c lim; k++) {\n    const i = MICA[k];\n    const g = exp((cos(TW[i] * 1500 + S.az * 7) - 1) / 0.03) * (1 - min(1, S.dent[i]));\n    if (g \u003c 0.02) continue;\n    const q = i * 3, v = 230 * g;\n    buf[q] += v;\n    buf[q + 1] += v * 0.92;\n    buf[q + 2] += v * 0.8;\n  }\n  // Mica in the cloud: each flake turns and flashes as its face meets the light.\n  for (let i = 0; i \u003c S.n; i++) {\n    if (!S.mica[i]) continue;\n    const f = exp((cos(S.ph[i]) - 1) / 0.05), v = 40 + 260 * f;\n    const x = floor(S.x[i]), y = floor(S.y[i]);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= FLOOR - 1) continue;\n    const q = (y * W + x) * 3;\n    buf[q] += v;\n    buf[q + 1] += v * 0.95;\n    buf[q + 2] += v * 0.85;\n    // A flash spills a little onto the LEDs beside it, or it looks pinpricked.\n    if (f > 0.3)\n      for (const o of NB) {\n        buf[q + o] += v * 0.25;\n        buf[q + o + 1] += v * 0.24;\n        buf[q + o + 2] += v * 0.21;\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower."},{"name":"Shimmer","min":1,"max":5,"about":"How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica."},{"name":"Air","min":0,"max":1,"about":"How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself."}],"start":[0,2,1,0.06],"measures":{"motion":0.0756,"detail":0.0494,"edges":0.1592,"complexity":2.3434,"coverage":1,"colour":0.2039,"drift":0.0525},"knobResponse":[0.2504,0.0583,0.0484,0.0614]},{"slug":"lotion-ribbon","title":"Lotion Ribbon","family":"cosmetic","round":36,"note":"위에서 굵은 로션 줄기가 쏟아지며 가늘어지고, 닿는 자리에서 꿀처럼 똬리를 틀어 접힌 더미를 쌓아요. K3 은 로션의 무게라서 묽은 세럼은 작은 고리로 빨리 감기고 바디 버터는 25 LED 너비의 고리로 천천히 접혀요. K1 을 누르면 줄기가 끊기고, 더미가 가라앉은 뒤 새 줄기가 내려와요.","idea":"A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.","buttons":"K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.","code":"// ===== Patternflow pattern =====\n// Title:   Lotion Ribbon\n// Family:  cosmetic\n// Idea:    A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after the slow pour of body lotion in skincare films; the coiling follows liquid rope coiling (Neil Ribe, 2004) and the heap spreads as a viscous gravity current (Herbert Huppert, 1982)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Thick. How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up.\n// Knob 4: Gloss. At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim.\n// Buttons: K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.\n\nconst W = 64, H = 128, N = W * H;\n// The counter under the heap, one cell an LED: x 0..63, z from -28 at the\n// back to 36 at the front, below the bottom edge.\nconst GX = 64, GZ = 64, ZC = 28, NG = GX * GZ;\n// The heap's bulk flows on cells two LEDs square; the fresh folds lie on the\n// LED cells above it.\nconst BX = GX / 2, BZ = GZ / 2, NB = BX * BZ;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, pow, round, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[0] = r;\n  out[1] = g;\n  out[2] = b;\n}\n\n// The camera looks down at the counter from EL radians above level. A point\n// x across, Y up and z toward the eye lands on screen row FY - Y*CE + z*SE,\n// and lies Y*SE + z*CE toward the eye.\nconst EL = 0.5, CE = cos(EL), SE = sin(EL);\nconst FY = 113, AX = 32;\n// The spout is just above the top edge.\nconst YN = (FY + 4) / CE;\n// Gravity and the speed the lotion leaves the spout, in LEDs and seconds at\n// Speed 2, and the spout's radius at Thick 0.\nconst G = 8, V0 = 14, A0 = 5.6;\n// Coiling rate: the gravitational regime of liquid rope coiling,\n// Omega = CW * (g Q^3 / (nu a1^8))^(1/4), Q the flux, nu the viscosity and a1\n// the rope's radius where it lands.\nconst CW = 0.144;\n// The coil bends out from the stream's axis over HC coil radii of height,\n// winding a quarter turn ahead of the point where it lands.\nconst HC = 1.5;\n// Slump: the heap flows as a thin viscous layer, dh/dt = div(K h^3 grad h),\n// K = KS / nu. A fresh loop holds its fold TF * nu^(1/4) seconds before it\n// melts into the heap.\nconst KS = 3e-2, TF = 3;\n// The coil does not land on one circle: its centre wanders up to EC coil\n// radii off the axis, round and back about every PW seconds, so the loops\n// cross and fold over each other.\nconst EC = 0.7, PW = 5.3;\n// One pour lasts POUR seconds; after the tail lands the heap settles SETTLE\n// seconds, then sinks SINK LEDs a second while the next pour falls.\nconst POUR = 16, SETTLE = 0.8, SINK = 5;\n// Little swellings ride down the stream FB times a second, BA of the radius.\nconst FB = 1.1, BA = 0.05;\n// Opening hue: pink, not red.\nconst H0 = 0.9;\n\n// Light from the upper left and a little in front, and the eye, in world\n// axes and in the camera's (x right, y up the screen, z toward the eye).\nconst nrm = (v) => {\n  const l = Math.hypot(v[0], v[1], v[2]);\n  return [v[0] / l, v[1] / l, v[2] / l];\n};\nconst LW = nrm([-0.5, 0.75, 0.45]);\nconst VW = [0, SE, CE];\nconst HW = nrm([LW[0] + VW[0], LW[1] + VW[1], LW[2] + VW[2]]);\nconst toCam = (v) => [v[0], v[1] * CE - v[2] * SE, v[1] * SE + v[2] * CE];\nconst LC = toCam(LW), HCm = toCam(HW);\n// A tall strip light to the left of the eye: on the falling rope it draws a\n// highlight down its whole length.\nconst HS = nrm([-0.3, 0, 1]);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, thick: 0, gloss: 0, warm: false,\n    t: 0, phi: 0, tPour: 0,\n    // top: height of the rope's upper end (YN while the spout runs); tip: its\n    // lower end while a fresh pour is still falling, or -1 once it has landed.\n    top: YN, topV: 0, tip: -1, tipV: 0, cut: false, gone: false, wait: 0, sinking: false,\n    h: new Float32Array(NG), b: new Float32Array(NB), f: new Float32Array(NG), dh: new Float32Array(NB),\n    blur: new Float32Array(NG), tmp: new Float32Array(NG), hs: new Float32Array(NG), cc: new Float32Array(NG * 3), fl: new Float32Array(NG),\n    hdep: new Float32Array(N), col: new Float32Array(N * 3),\n    rdep: new Float32Array(N), rcov: new Float32Array(N), rcol: new Float32Array(N * 3),\n    bg: new Float32Array(N),\n    lit: [0, 0, 0], dark: [0, 0, 0], wall: [0, 0, 0], pearl: [0, 0, 0], c: [0, 0, 0], up: [0, 0, 0],\n    spec: new Float32Array(SPN), specKey: null,\n  };\n  const S = params.s;\n  // A soft glow on the wall behind the stream, falling off to near black in\n  // the top corners.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = (x + 0.5 - AX) / 26, dy = (y - 78) / 70;\n      S.bg[y * W + x] = 0.12 + 0.88 * exp(-dx * dx - dy * dy);\n    }\n}\n\n// The lotion's make-up at the current Thick.\nfunction lotion(S) {\n  const nu = pow(4, S.thick), a0 = A0 * pow(1.25, S.thick);\n  return { nu, a0, Q: PI * a0 * a0 * V0, K: KS / nu, tf: TF * pow(nu, 0.25) };\n}\n\n// Free fall from the spout: speed at height Y, and the radius that keeps the\n// mass flux pi a^2 v the same all the way down.\nconst speedAt = (Y) => sqrt(V0 * V0 + 2 * G * max(0, YN - Y));\nconst radiusAt = (a0, Y) => a0 * sqrt(V0 / speedAt(Y));\n\n// The heap's height under a point, bilinear.\nfunction heightAt(S, x, z) {\n  const u = cl(x - 0.5, 0, GX - 1.001), v = cl(z + ZC - 0.5, 0, GZ - 1.001);\n  const i = floor(u), j = floor(v), fu = u - i, fv = v - j, h = S.h, p = j * GX + i;\n  return (h[p] * (1 - fu) + h[p + 1] * fu) * (1 - fv) + (h[p + GX] * (1 - fu) + h[p + GX + 1] * fu) * fv;\n}\n\n// Where the rope lands now: the coil's radius and rate and the surface under it.\nfunction coil(S, L) {\n  const R0 = 8;\n  // The surface a little ahead of the contact, where the rope is about to lie.\n  let Yc = heightAt(S, AX + R0 * cos(S.phi + 0.3), R0 * sin(S.phi + 0.3));\n  const U1 = speedAt(Yc), a1 = radiusAt(L.a0, Yc);\n  const om = CW * pow((G * L.Q * L.Q * L.Q) / (L.nu * pow(a1, 8)), 0.25);\n  const R = U1 / om, ps = (2 * PI * S.t) / PW, e = EC * R * (0.6 + 0.4 * sin(ps * 0.37 + 1));\n  const cx = AX + e * cos(ps), cz = e * sin(ps * 1.3);\n  Yc = heightAt(S, cx + R * cos(S.phi + a1 / R), cz + R * sin(S.phi + a1 / R));\n  return { Yc, U1, a1, om, R, cx, cz };\n}\n\n// Lay a short piece of rope at (x, z): its volume pi a^2 ds spread over the\n// cells under it, heaped in the middle.\nfunction deposit(S, x, z, a, ds) {\n  const h = S.f, vol = PI * a * a * ds;\n  const i0 = max(0, floor(x - a - 0.5)), i1 = min(GX - 1, ceil(x + a - 0.5));\n  const j0 = max(0, floor(z + ZC - a - 0.5)), j1 = min(GZ - 1, ceil(z + ZC + a - 0.5));\n  let sum = 0;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) sum += q;\n    }\n  if (sum \u003c= 0) return;\n  const k = vol / sum;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) h[j * GX + i] += k * q;\n    }\n}\n\n// The heap flows: flux K h^3 times the slope across every face between two\n// bulk cells, none out through the counter's edges, so no lotion is lost.\nfunction slump(S, L, dt) {\n  const h = S.b, d = S.dh, k = L.K / 4;\n  let left = dt;\n  while (left > 1e-6) {\n    let hm = 0;\n    for (let p = 0; p \u003c NB; p++) if (h[p] > hm) hm = h[p];\n    const st = min(left, 0.2 / (k * hm * hm * hm + 1e-6));\n    d.fill(0);\n    for (let j = 0; j \u003c BZ; j++)\n      for (let i = 0; i \u003c BX; i++) {\n        const p = j * BX + i, a = h[p];\n        if (i \u003c BX - 1) {\n          const b = h[p + 1], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + 1] += f;\n        }\n        if (j \u003c BZ - 1) {\n          const b = h[p + BX], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + BX] += f;\n        }\n      }\n    for (let p = 0; p \u003c NB; p++) h[p] = max(0, h[p] + d[p] * st);\n    left -= st;\n  }\n}\n\n// The bulk under an LED cell, bilinear between bulk cell centres.\nfunction bulkAt(b, i, j) {\n  const u = cl(i * 0.5 - 0.25, 0, BX - 1.001), v = cl(j * 0.5 - 0.25, 0, BZ - 1.001);\n  const I = floor(u), J = floor(v), fu = u - I, fv = v - J, p = J * BX + I;\n  return (b[p] * (1 - fu) + b[p + 1] * fu) * (1 - fv) + (b[p + BX] * (1 - fu) + b[p + BX + 1] * fu) * fv;\n}\n\nfunction breakStream(S) {\n  if (S.cut || S.gone || S.tip >= 0) return;\n  S.cut = true;\n  S.topV = V0;\n}\n\nfunction step(S, dt) {\n  const L = lotion(S);\n  S.t += dt;\n  const C = coil(S, L);\n  // A fresh pour falls until its front reaches the heap.\n  if (S.tip >= 0) {\n    S.tipV += G * dt;\n    S.tip -= S.tipV * dt;\n    if (S.tip \u003c= C.Yc + C.a1) S.tip = -1;\n  }\n  if (!S.cut && !S.gone) {\n    S.tPour += dt;\n    if (S.tPour > POUR) breakStream(S);\n  }\n  // A broken stream's tail falls in.\n  if (S.cut) {\n    S.topV += G * dt;\n    S.top -= S.topV * dt;\n    if (S.top \u003c= C.Yc + C.a1) {\n      S.cut = false;\n      S.gone = true;\n      S.wait = SETTLE;\n    }\n  }\n  if (S.gone) {\n    S.wait -= dt;\n    if (S.wait \u003c= 0 && !S.sinking) {\n      // The heap sinks away and the next pour starts from the spout.\n      S.sinking = true;\n      S.gone = false;\n      S.top = YN;\n      S.tip = YN;\n      S.tipV = V0;\n      S.tPour = 0;\n    }\n  }\n  const { b, f } = S;\n  const toBulk = (p) => ((p / GX) >> 1) * BX + ((p % GX) >> 1);\n  if (S.sinking) {\n    let any = false;\n    for (let p = 0; p \u003c NG; p++) {\n      b[toBulk(p)] += f[p] / 4;\n      f[p] = 0;\n    }\n    for (let p = 0; p \u003c NB; p++) {\n      b[p] = max(0, b[p] - SINK * dt);\n      if (b[p] > 0) any = true;\n    }\n    if (!any) S.sinking = false;\n  }\n  // The rope lays itself down along the coil at the speed it arrives, so the\n  // contact runs round at Omega = U1 / R.\n  if (!S.gone && S.tip \u003c 0) {\n    const dphi = C.om * dt, n = max(1, ceil((C.R * dphi) / 0.5));\n    for (let k = 0; k \u003c n; k++) {\n      const ph = S.phi + (dphi * (k + 0.5)) / n;\n      deposit(S, C.cx + C.R * cos(ph), C.cz + C.R * sin(ph), C.a1, (C.R * dphi) / n);\n    }\n    S.phi += dphi;\n  }\n  // Loops melt into the heap, which flows.\n  const m = 1 - exp(-dt / L.tf);\n  for (let p = 0; p \u003c NG; p++) {\n    const v = f[p] * m;\n    f[p] -= v;\n    b[toBulk(p)] += v / 4;\n  }\n  slump(S, L, dt);\n  for (let j = 0, p = 0; j \u003c GZ; j++) for (let i = 0; i \u003c GX; i++, p++) S.h[p] = bulkAt(b, i, j) + f[p];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.thick = cl(k[2], -1, 1);\n  S.gloss = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open six seconds into a pour.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breakStream(S);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours for the hue: the lit lotion, its shadow side and the wall.\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime go brown or olive when deep: there the lotion is\n  // paled to cream and the wall taken down almost to black.\n  const warm = sm(0.0, 0.08, hh) * (1 - sm(0.22, 0.32, hh));\n  // A wetter finish is a little deeper in colour.\n  const wet = 0.5 + 0.5 * S.gloss;\n  hsv(h, (0.38 + 0.14 * wet) * (1 - 0.4 * warm), 0.8 - 0.08 * wet + 0.06 * warm, S.lit);\n  hsv(h + 0.015, (0.6 + 0.2 * wet) * (1 - 0.35 * warm), 0.4 - 0.1 * wet + 0.2 * warm, S.dark);\n  hsv(h - 0.04, 0.85 - 0.5 * warm, 0.2 - 0.15 * warm, S.wall);\n  // The pearl in the lotion glints a cooler shade at grazing angles.\n  hsv(h - 0.12, 0.45 - 0.15 * warm, 1, S.pearl);\n}\n\n// The highlight against how squarely a surface faces the half vector,\n// tabled once per Gloss. Satin at -1: a broad dim sheen; wet at 1: a narrow\n// hot highlight.\nconst SPN = 1024;\nfunction specTable(S) {\n  if (S.specKey === S.gloss) return;\n  S.specKey = S.gloss;\n  const g = S.gloss, P = 28 * pow(5, g), KSp = 0.6 + 0.35 * g;\n  for (let i = 0; i \u003c SPN; i++) {\n    const n = i / (SPN - 1), n2 = n * n;\n    S.spec[i] = KSp * pow(n, P) + 0.16 * max(0, -g) * n2 * n2;\n  }\n}\n\nfunction shade(S, nx, ny, nz, vx, vy, vz, lx, ly, lz, hx, hy, hz, strip, ao, out) {\n  // A wet finish has a bright rim.\n  const KR = 0.25 + 0.3 * max(0, S.gloss);\n  const nl = nx * lx + ny * ly + nz * lz;\n  const dif = cl((nl + 0.25) / 1.25, 0, 1);\n  let nh = max(0, nx * hx + ny * hy + nz * hz);\n  // The strip light, seen in the rope: only the turn of the rope across\n  // matters, not along it.\n  if (strip) {\n    const l = sqrt(nx * nx + nz * nz) + 1e-6;\n    nh = max(nh, ((nx * HS[0] + nz * HS[2]) / l) * (0.75 + 0.25 * l));\n  }\n  const sp = S.spec[round(cl(nh, 0, 1) * (SPN - 1))], e = 1 - cl(nx * vx + ny * vy + nz * vz, 0, 1);\n  const rim = KR * e * e * e;\n  const lit = S.lit, dk = S.dark, pe = S.pearl;\n  for (let c = 0; c \u003c 3; c++) out[c] = (dk[c] + (lit[c] - dk[c]) * dif) * ao + sp + rim * pe[c];\n}\n\n// Highlights roll off softly instead of clipping: a table over 0..2.\nconst TONE = new Uint8Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) TONE[i] = round(min(255, 319 * (1 - exp((-1.6 * 2 * i) / 1024))));\nconst tone = (v) => TONE[v \u003c= 0 ? 0 : v >= 2 ? 1024 : (v * 512) | 0];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  specTable(S);\n  const L = lotion(S), C = coil(S, L);\n  const { h, hdep, col, rdep, rcov, rcol, bg, wall, c, blur, tmp } = S;\n  // The heap's height blurred over 5 cells, for its shadow on the counter:\n  // a running sum along x, then along z.\n  for (let j = 0; j \u003c GZ; j++) {\n    const o = j * GX;\n    let a = h[o] * 3 + h[o + 1] + h[o + 2];\n    for (let i = 0; i \u003c GX; i++) {\n      tmp[o + i] = a * 0.2;\n      a += h[o + min(GX - 1, i + 3)] - h[o + max(0, i - 2)];\n    }\n  }\n  for (let i = 0; i \u003c GX; i++) {\n    let a = tmp[i] * 3 + tmp[GX + i] + tmp[2 * GX + i];\n    for (let j = 0; j \u003c GZ; j++) {\n      blur[j * GX + i] = a * 0.2;\n      a += tmp[min(GZ - 1, j + 3) * GX + i] - tmp[max(0, j - 2) * GX + i];\n    }\n  }\n  // Heights smoothed 1-2-1 for the normals, so the steep rim of the heap\n  // does not break into a comb along the grid.\n  const hs = S.hs;\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, l = i > 0 ? p - 1 : p, r = i \u003c GX - 1 ? p + 1 : p;\n      tmp[p] = (h[l] + 2 * h[p] + h[r]) * 0.25;\n    }\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, b0 = j > 0 ? p - GX : p, f0 = j \u003c GZ - 1 ? p + GX : p;\n      hs[p] = (tmp[b0] + 2 * tmp[p] + tmp[f0]) * 0.25;\n    }\n  // The wall.\n  for (let p = 0; p \u003c N; p++) {\n    const v = bg[p];\n    col[p * 3] = wall[0] * v;\n    col[p * 3 + 1] = wall[1] * v;\n    col[p * 3 + 2] = wall[2] * v;\n    hdep[p] = -1e9;\n    rdep[p] = -1e9;\n    rcov[p] = 0;\n  }\n  // Each cell's colour: the lotion lit from its normal, valleys between\n  // folds a little darker; and the bare counter, a satin shelf a little\n  // lighter than the wall, in the shade of the heap beside it.\n  const cc = S.cc, up = S.up;\n  shade(S, 0, 1, 0, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1, up);\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, z = j + 0.5 - ZC;\n      S.fl[p] = (0.55 + 0.25 * sm(-28, 28, z)) * (1 - 0.6 * sm(0, 4, blur[p]));\n      if (hs[p] \u003c 1e-3) {\n        cc[p * 3] = up[0];\n        cc[p * 3 + 1] = up[1];\n        cc[p * 3 + 2] = up[2];\n        continue;\n      }\n      const hl = hs[p - (i > 0 ? 1 : 0)], hr = hs[p + (i \u003c GX - 1 ? 1 : 0)];\n      const hb = hs[p - (j > 0 ? GX : 0)], hf = hs[p + (j \u003c GZ - 1 ? GX : 0)];\n      const gx = (hr - hl) * 0.5, gz = (hf - hb) * 0.5, inv = 1 / sqrt(gx * gx + 1 + gz * gz);\n      const lap = hl + hr + hb + hf - 4 * hs[p];\n      shade(S, -gx * inv, inv, -gz * inv, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1 - 0.3 * cl(lap * 0.25, 0, 1), c);\n      cc[p * 3] = c[0];\n      cc[p * 3 + 1] = c[1];\n      cc[p * 3 + 2] = c[2];\n    }\n  // The counter and the heap, column by column from the front back in half\n  // cells, height and colour taken between cell centres, each sample filling\n  // the rows its top rises above the samples in front of it.\n  const FL = S.fl;\n  for (let i = 0; i \u003c GX; i++) {\n    let yb = H;\n    for (let v = GZ - 1; v >= 0; v -= 0.5) {\n      const j = floor(v), fv = v - j, p = j * GX + i, p2 = j \u003c GZ - 1 ? p + GX : p;\n      const Yv = h[p] + (h[p2] - h[p]) * fv, z = v + 0.5 - ZC;\n      const y0 = ceil(FY - Yv * CE + z * SE - 0.5);\n      if (y0 >= yb) continue;\n      // Thin lotion lets the counter show through.\n      const film = sm(0.05, 0.9, Yv), fl = (FL[p] + (FL[p2] - FL[p]) * fv) * (1 - film);\n      const r = (cc[p * 3] + (cc[p2 * 3] - cc[p * 3]) * fv) * film + wall[0] * fl;\n      const g = (cc[p * 3 + 1] + (cc[p2 * 3 + 1] - cc[p * 3 + 1]) * fv) * film + wall[1] * fl;\n      const b = (cc[p * 3 + 2] + (cc[p2 * 3 + 2] - cc[p * 3 + 2]) * fv) * film + wall[2] * fl;\n      const dep = Yv * SE + z * CE;\n      for (let y = max(0, y0); y \u003c yb; y++) {\n        const q = y * W + i;\n        col[q * 3] = r;\n        col[q * 3 + 1] = g;\n        col[q * 3 + 2] = b;\n        hdep[q] = dep;\n      }\n      yb = y0;\n    }\n  }\n  // The rope: a chain of balls half an LED apart, each a sphere, the nearest\n  // surface's normal kept at every LED.\n  const ropeOn = !S.gone;\n  if (ropeOn) {\n    const t = S.t, top = min(S.top, YN + 3);\n    const landed = S.tip \u003c 0;\n    const coilTop = C.Yc + C.a1 + HC * C.R;\n    const low = landed ? coilTop : S.tip;\n    const ball = (x, Y, z, a) => {\n      if (a \u003c 0.3) return;\n      const sx = x, sy = FY - Y * CE + z * SE, dd = Y * SE + z * CE;\n      const x0 = max(0, floor(sx - a - 1)), x1 = min(W - 1, ceil(sx + a)), y0 = max(0, floor(sy - a - 1)), y1 = min(H - 1, ceil(sy + a));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let xx = x0; xx \u003c= x1; xx++) {\n          const dx = xx + 0.5 - sx, dy = y + 0.5 - sy, r = sqrt(dx * dx + dy * dy);\n          const cov = cl(a - r + 0.5, 0, 1);\n          if (cov \u003c= 0) continue;\n          const q = y * W + xx, uz = sqrt(max(0, 1 - (r * r) / (a * a)));\n          const depth = dd + a * uz;\n          if (cov \u003c rcov[q] - 0.02 || (cov \u003c= rcov[q] + 0.02 && depth \u003c= rdep[q])) continue;\n          const m = 1 / max(a, r + 1e-6);\n          rcov[q] = cov;\n          rdep[q] = depth;\n          rcol[q * 3] = dx * m;\n          rcol[q * 3 + 1] = -dy * m;\n          rcol[q * 3 + 2] = uz;\n        }\n    };\n    // The falling stream, with swellings that left the spout at a steady\n    // beat and stretch apart as the lotion speeds up.\n    for (let Y = top; Y > low; Y -= 0.5) {\n      const v = speedAt(Y), age = (v - V0) / G;\n      let a = radiusAt(L.a0, Y) * (1 + BA * sin(2 * PI * FB * (t - age)));\n      // A broken stream's upper end narrows to a rounded tail.\n      if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n      ball(AX, Y, 0, a);\n    }\n    if (!landed) ball(AX, S.tip, 0, radiusAt(L.a0, S.tip) * 1.15);\n    else {\n      // The coil: from the axis at its top it bends out to radius R, winding\n      // a quarter turn as it comes down level onto the heap.\n      const len = HC * C.R + 2 * C.R, n = ceil(len / 0.5);\n      for (let k = n; k >= 0; k--) {\n        const s = k / n, Y = C.Yc + C.a1 + HC * C.R * s * s;\n        if (Y > top) continue;\n        const r = C.R * (1 - s * s) * (1 - s * s), th = S.phi + s * PI * 0.5, e = (1 - s) * (1 - s);\n        let a = radiusAt(L.a0, Y);\n        if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n        ball(AX + (C.cx - AX) * e + r * cos(th), Y, C.cz * e + r * sin(th), a);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let r = col[q * 3], g = col[q * 3 + 1], b = col[q * 3 + 2];\n      const cv = rcov[q];\n      if (cv > 0 && rdep[q] > hdep[q]) {\n        // The rope, lit from the normal its nearest ball left here.\n        shade(S, rcol[q * 3], rcol[q * 3 + 1], rcol[q * 3 + 2], 0, 0, 1, LC[0], LC[1], LC[2], HCm[0], HCm[1], HCm[2], true, 1, c);\n        r += (c[0] - r) * cv;\n        g += (c[1] - g) * cv;\n        b += (c[2] - b) * cv;\n      }\n      display.setPixel(x, y, tone(r), tone(g), tone(b));\n    }\n}\n","layer":{"id":"layer-lotion-ribbon","type":"code","name":"lotion-ribbon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lotion Ribbon\n// Family:  cosmetic\n// Idea:    A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after the slow pour of body lotion in skincare films; the coiling follows liquid rope coiling (Neil Ribe, 2004) and the heap spreads as a viscous gravity current (Herbert Huppert, 1982)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Thick. How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up.\n// Knob 4: Gloss. At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim.\n// Buttons: K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.\n\nconst W = 64, H = 128, N = W * H;\n// The counter under the heap, one cell an LED: x 0..63, z from -28 at the\n// back to 36 at the front, below the bottom edge.\nconst GX = 64, GZ = 64, ZC = 28, NG = GX * GZ;\n// The heap's bulk flows on cells two LEDs square; the fresh folds lie on the\n// LED cells above it.\nconst BX = GX / 2, BZ = GZ / 2, NB = BX * BZ;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, pow, round, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[0] = r;\n  out[1] = g;\n  out[2] = b;\n}\n\n// The camera looks down at the counter from EL radians above level. A point\n// x across, Y up and z toward the eye lands on screen row FY - Y*CE + z*SE,\n// and lies Y*SE + z*CE toward the eye.\nconst EL = 0.5, CE = cos(EL), SE = sin(EL);\nconst FY = 113, AX = 32;\n// The spout is just above the top edge.\nconst YN = (FY + 4) / CE;\n// Gravity and the speed the lotion leaves the spout, in LEDs and seconds at\n// Speed 2, and the spout's radius at Thick 0.\nconst G = 8, V0 = 14, A0 = 5.6;\n// Coiling rate: the gravitational regime of liquid rope coiling,\n// Omega = CW * (g Q^3 / (nu a1^8))^(1/4), Q the flux, nu the viscosity and a1\n// the rope's radius where it lands.\nconst CW = 0.144;\n// The coil bends out from the stream's axis over HC coil radii of height,\n// winding a quarter turn ahead of the point where it lands.\nconst HC = 1.5;\n// Slump: the heap flows as a thin viscous layer, dh/dt = div(K h^3 grad h),\n// K = KS / nu. A fresh loop holds its fold TF * nu^(1/4) seconds before it\n// melts into the heap.\nconst KS = 3e-2, TF = 3;\n// The coil does not land on one circle: its centre wanders up to EC coil\n// radii off the axis, round and back about every PW seconds, so the loops\n// cross and fold over each other.\nconst EC = 0.7, PW = 5.3;\n// One pour lasts POUR seconds; after the tail lands the heap settles SETTLE\n// seconds, then sinks SINK LEDs a second while the next pour falls.\nconst POUR = 16, SETTLE = 0.8, SINK = 5;\n// Little swellings ride down the stream FB times a second, BA of the radius.\nconst FB = 1.1, BA = 0.05;\n// Opening hue: pink, not red.\nconst H0 = 0.9;\n\n// Light from the upper left and a little in front, and the eye, in world\n// axes and in the camera's (x right, y up the screen, z toward the eye).\nconst nrm = (v) => {\n  const l = Math.hypot(v[0], v[1], v[2]);\n  return [v[0] / l, v[1] / l, v[2] / l];\n};\nconst LW = nrm([-0.5, 0.75, 0.45]);\nconst VW = [0, SE, CE];\nconst HW = nrm([LW[0] + VW[0], LW[1] + VW[1], LW[2] + VW[2]]);\nconst toCam = (v) => [v[0], v[1] * CE - v[2] * SE, v[1] * SE + v[2] * CE];\nconst LC = toCam(LW), HCm = toCam(HW);\n// A tall strip light to the left of the eye: on the falling rope it draws a\n// highlight down its whole length.\nconst HS = nrm([-0.3, 0, 1]);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, thick: 0, gloss: 0, warm: false,\n    t: 0, phi: 0, tPour: 0,\n    // top: height of the rope's upper end (YN while the spout runs); tip: its\n    // lower end while a fresh pour is still falling, or -1 once it has landed.\n    top: YN, topV: 0, tip: -1, tipV: 0, cut: false, gone: false, wait: 0, sinking: false,\n    h: new Float32Array(NG), b: new Float32Array(NB), f: new Float32Array(NG), dh: new Float32Array(NB),\n    blur: new Float32Array(NG), tmp: new Float32Array(NG), hs: new Float32Array(NG), cc: new Float32Array(NG * 3), fl: new Float32Array(NG),\n    hdep: new Float32Array(N), col: new Float32Array(N * 3),\n    rdep: new Float32Array(N), rcov: new Float32Array(N), rcol: new Float32Array(N * 3),\n    bg: new Float32Array(N),\n    lit: [0, 0, 0], dark: [0, 0, 0], wall: [0, 0, 0], pearl: [0, 0, 0], c: [0, 0, 0], up: [0, 0, 0],\n    spec: new Float32Array(SPN), specKey: null,\n  };\n  const S = params.s;\n  // A soft glow on the wall behind the stream, falling off to near black in\n  // the top corners.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = (x + 0.5 - AX) / 26, dy = (y - 78) / 70;\n      S.bg[y * W + x] = 0.12 + 0.88 * exp(-dx * dx - dy * dy);\n    }\n}\n\n// The lotion's make-up at the current Thick.\nfunction lotion(S) {\n  const nu = pow(4, S.thick), a0 = A0 * pow(1.25, S.thick);\n  return { nu, a0, Q: PI * a0 * a0 * V0, K: KS / nu, tf: TF * pow(nu, 0.25) };\n}\n\n// Free fall from the spout: speed at height Y, and the radius that keeps the\n// mass flux pi a^2 v the same all the way down.\nconst speedAt = (Y) => sqrt(V0 * V0 + 2 * G * max(0, YN - Y));\nconst radiusAt = (a0, Y) => a0 * sqrt(V0 / speedAt(Y));\n\n// The heap's height under a point, bilinear.\nfunction heightAt(S, x, z) {\n  const u = cl(x - 0.5, 0, GX - 1.001), v = cl(z + ZC - 0.5, 0, GZ - 1.001);\n  const i = floor(u), j = floor(v), fu = u - i, fv = v - j, h = S.h, p = j * GX + i;\n  return (h[p] * (1 - fu) + h[p + 1] * fu) * (1 - fv) + (h[p + GX] * (1 - fu) + h[p + GX + 1] * fu) * fv;\n}\n\n// Where the rope lands now: the coil's radius and rate and the surface under it.\nfunction coil(S, L) {\n  const R0 = 8;\n  // The surface a little ahead of the contact, where the rope is about to lie.\n  let Yc = heightAt(S, AX + R0 * cos(S.phi + 0.3), R0 * sin(S.phi + 0.3));\n  const U1 = speedAt(Yc), a1 = radiusAt(L.a0, Yc);\n  const om = CW * pow((G * L.Q * L.Q * L.Q) / (L.nu * pow(a1, 8)), 0.25);\n  const R = U1 / om, ps = (2 * PI * S.t) / PW, e = EC * R * (0.6 + 0.4 * sin(ps * 0.37 + 1));\n  const cx = AX + e * cos(ps), cz = e * sin(ps * 1.3);\n  Yc = heightAt(S, cx + R * cos(S.phi + a1 / R), cz + R * sin(S.phi + a1 / R));\n  return { Yc, U1, a1, om, R, cx, cz };\n}\n\n// Lay a short piece of rope at (x, z): its volume pi a^2 ds spread over the\n// cells under it, heaped in the middle.\nfunction deposit(S, x, z, a, ds) {\n  const h = S.f, vol = PI * a * a * ds;\n  const i0 = max(0, floor(x - a - 0.5)), i1 = min(GX - 1, ceil(x + a - 0.5));\n  const j0 = max(0, floor(z + ZC - a - 0.5)), j1 = min(GZ - 1, ceil(z + ZC + a - 0.5));\n  let sum = 0;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) sum += q;\n    }\n  if (sum \u003c= 0) return;\n  const k = vol / sum;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) h[j * GX + i] += k * q;\n    }\n}\n\n// The heap flows: flux K h^3 times the slope across every face between two\n// bulk cells, none out through the counter's edges, so no lotion is lost.\nfunction slump(S, L, dt) {\n  const h = S.b, d = S.dh, k = L.K / 4;\n  let left = dt;\n  while (left > 1e-6) {\n    let hm = 0;\n    for (let p = 0; p \u003c NB; p++) if (h[p] > hm) hm = h[p];\n    const st = min(left, 0.2 / (k * hm * hm * hm + 1e-6));\n    d.fill(0);\n    for (let j = 0; j \u003c BZ; j++)\n      for (let i = 0; i \u003c BX; i++) {\n        const p = j * BX + i, a = h[p];\n        if (i \u003c BX - 1) {\n          const b = h[p + 1], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + 1] += f;\n        }\n        if (j \u003c BZ - 1) {\n          const b = h[p + BX], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + BX] += f;\n        }\n      }\n    for (let p = 0; p \u003c NB; p++) h[p] = max(0, h[p] + d[p] * st);\n    left -= st;\n  }\n}\n\n// The bulk under an LED cell, bilinear between bulk cell centres.\nfunction bulkAt(b, i, j) {\n  const u = cl(i * 0.5 - 0.25, 0, BX - 1.001), v = cl(j * 0.5 - 0.25, 0, BZ - 1.001);\n  const I = floor(u), J = floor(v), fu = u - I, fv = v - J, p = J * BX + I;\n  return (b[p] * (1 - fu) + b[p + 1] * fu) * (1 - fv) + (b[p + BX] * (1 - fu) + b[p + BX + 1] * fu) * fv;\n}\n\nfunction breakStream(S) {\n  if (S.cut || S.gone || S.tip >= 0) return;\n  S.cut = true;\n  S.topV = V0;\n}\n\nfunction step(S, dt) {\n  const L = lotion(S);\n  S.t += dt;\n  const C = coil(S, L);\n  // A fresh pour falls until its front reaches the heap.\n  if (S.tip >= 0) {\n    S.tipV += G * dt;\n    S.tip -= S.tipV * dt;\n    if (S.tip \u003c= C.Yc + C.a1) S.tip = -1;\n  }\n  if (!S.cut && !S.gone) {\n    S.tPour += dt;\n    if (S.tPour > POUR) breakStream(S);\n  }\n  // A broken stream's tail falls in.\n  if (S.cut) {\n    S.topV += G * dt;\n    S.top -= S.topV * dt;\n    if (S.top \u003c= C.Yc + C.a1) {\n      S.cut = false;\n      S.gone = true;\n      S.wait = SETTLE;\n    }\n  }\n  if (S.gone) {\n    S.wait -= dt;\n    if (S.wait \u003c= 0 && !S.sinking) {\n      // The heap sinks away and the next pour starts from the spout.\n      S.sinking = true;\n      S.gone = false;\n      S.top = YN;\n      S.tip = YN;\n      S.tipV = V0;\n      S.tPour = 0;\n    }\n  }\n  const { b, f } = S;\n  const toBulk = (p) => ((p / GX) >> 1) * BX + ((p % GX) >> 1);\n  if (S.sinking) {\n    let any = false;\n    for (let p = 0; p \u003c NG; p++) {\n      b[toBulk(p)] += f[p] / 4;\n      f[p] = 0;\n    }\n    for (let p = 0; p \u003c NB; p++) {\n      b[p] = max(0, b[p] - SINK * dt);\n      if (b[p] > 0) any = true;\n    }\n    if (!any) S.sinking = false;\n  }\n  // The rope lays itself down along the coil at the speed it arrives, so the\n  // contact runs round at Omega = U1 / R.\n  if (!S.gone && S.tip \u003c 0) {\n    const dphi = C.om * dt, n = max(1, ceil((C.R * dphi) / 0.5));\n    for (let k = 0; k \u003c n; k++) {\n      const ph = S.phi + (dphi * (k + 0.5)) / n;\n      deposit(S, C.cx + C.R * cos(ph), C.cz + C.R * sin(ph), C.a1, (C.R * dphi) / n);\n    }\n    S.phi += dphi;\n  }\n  // Loops melt into the heap, which flows.\n  const m = 1 - exp(-dt / L.tf);\n  for (let p = 0; p \u003c NG; p++) {\n    const v = f[p] * m;\n    f[p] -= v;\n    b[toBulk(p)] += v / 4;\n  }\n  slump(S, L, dt);\n  for (let j = 0, p = 0; j \u003c GZ; j++) for (let i = 0; i \u003c GX; i++, p++) S.h[p] = bulkAt(b, i, j) + f[p];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.thick = cl(k[2], -1, 1);\n  S.gloss = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open six seconds into a pour.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breakStream(S);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours for the hue: the lit lotion, its shadow side and the wall.\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime go brown or olive when deep: there the lotion is\n  // paled to cream and the wall taken down almost to black.\n  const warm = sm(0.0, 0.08, hh) * (1 - sm(0.22, 0.32, hh));\n  // A wetter finish is a little deeper in colour.\n  const wet = 0.5 + 0.5 * S.gloss;\n  hsv(h, (0.38 + 0.14 * wet) * (1 - 0.4 * warm), 0.8 - 0.08 * wet + 0.06 * warm, S.lit);\n  hsv(h + 0.015, (0.6 + 0.2 * wet) * (1 - 0.35 * warm), 0.4 - 0.1 * wet + 0.2 * warm, S.dark);\n  hsv(h - 0.04, 0.85 - 0.5 * warm, 0.2 - 0.15 * warm, S.wall);\n  // The pearl in the lotion glints a cooler shade at grazing angles.\n  hsv(h - 0.12, 0.45 - 0.15 * warm, 1, S.pearl);\n}\n\n// The highlight against how squarely a surface faces the half vector,\n// tabled once per Gloss. Satin at -1: a broad dim sheen; wet at 1: a narrow\n// hot highlight.\nconst SPN = 1024;\nfunction specTable(S) {\n  if (S.specKey === S.gloss) return;\n  S.specKey = S.gloss;\n  const g = S.gloss, P = 28 * pow(5, g), KSp = 0.6 + 0.35 * g;\n  for (let i = 0; i \u003c SPN; i++) {\n    const n = i / (SPN - 1), n2 = n * n;\n    S.spec[i] = KSp * pow(n, P) + 0.16 * max(0, -g) * n2 * n2;\n  }\n}\n\nfunction shade(S, nx, ny, nz, vx, vy, vz, lx, ly, lz, hx, hy, hz, strip, ao, out) {\n  // A wet finish has a bright rim.\n  const KR = 0.25 + 0.3 * max(0, S.gloss);\n  const nl = nx * lx + ny * ly + nz * lz;\n  const dif = cl((nl + 0.25) / 1.25, 0, 1);\n  let nh = max(0, nx * hx + ny * hy + nz * hz);\n  // The strip light, seen in the rope: only the turn of the rope across\n  // matters, not along it.\n  if (strip) {\n    const l = sqrt(nx * nx + nz * nz) + 1e-6;\n    nh = max(nh, ((nx * HS[0] + nz * HS[2]) / l) * (0.75 + 0.25 * l));\n  }\n  const sp = S.spec[round(cl(nh, 0, 1) * (SPN - 1))], e = 1 - cl(nx * vx + ny * vy + nz * vz, 0, 1);\n  const rim = KR * e * e * e;\n  const lit = S.lit, dk = S.dark, pe = S.pearl;\n  for (let c = 0; c \u003c 3; c++) out[c] = (dk[c] + (lit[c] - dk[c]) * dif) * ao + sp + rim * pe[c];\n}\n\n// Highlights roll off softly instead of clipping: a table over 0..2.\nconst TONE = new Uint8Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) TONE[i] = round(min(255, 319 * (1 - exp((-1.6 * 2 * i) / 1024))));\nconst tone = (v) => TONE[v \u003c= 0 ? 0 : v >= 2 ? 1024 : (v * 512) | 0];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  specTable(S);\n  const L = lotion(S), C = coil(S, L);\n  const { h, hdep, col, rdep, rcov, rcol, bg, wall, c, blur, tmp } = S;\n  // The heap's height blurred over 5 cells, for its shadow on the counter:\n  // a running sum along x, then along z.\n  for (let j = 0; j \u003c GZ; j++) {\n    const o = j * GX;\n    let a = h[o] * 3 + h[o + 1] + h[o + 2];\n    for (let i = 0; i \u003c GX; i++) {\n      tmp[o + i] = a * 0.2;\n      a += h[o + min(GX - 1, i + 3)] - h[o + max(0, i - 2)];\n    }\n  }\n  for (let i = 0; i \u003c GX; i++) {\n    let a = tmp[i] * 3 + tmp[GX + i] + tmp[2 * GX + i];\n    for (let j = 0; j \u003c GZ; j++) {\n      blur[j * GX + i] = a * 0.2;\n      a += tmp[min(GZ - 1, j + 3) * GX + i] - tmp[max(0, j - 2) * GX + i];\n    }\n  }\n  // Heights smoothed 1-2-1 for the normals, so the steep rim of the heap\n  // does not break into a comb along the grid.\n  const hs = S.hs;\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, l = i > 0 ? p - 1 : p, r = i \u003c GX - 1 ? p + 1 : p;\n      tmp[p] = (h[l] + 2 * h[p] + h[r]) * 0.25;\n    }\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, b0 = j > 0 ? p - GX : p, f0 = j \u003c GZ - 1 ? p + GX : p;\n      hs[p] = (tmp[b0] + 2 * tmp[p] + tmp[f0]) * 0.25;\n    }\n  // The wall.\n  for (let p = 0; p \u003c N; p++) {\n    const v = bg[p];\n    col[p * 3] = wall[0] * v;\n    col[p * 3 + 1] = wall[1] * v;\n    col[p * 3 + 2] = wall[2] * v;\n    hdep[p] = -1e9;\n    rdep[p] = -1e9;\n    rcov[p] = 0;\n  }\n  // Each cell's colour: the lotion lit from its normal, valleys between\n  // folds a little darker; and the bare counter, a satin shelf a little\n  // lighter than the wall, in the shade of the heap beside it.\n  const cc = S.cc, up = S.up;\n  shade(S, 0, 1, 0, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1, up);\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, z = j + 0.5 - ZC;\n      S.fl[p] = (0.55 + 0.25 * sm(-28, 28, z)) * (1 - 0.6 * sm(0, 4, blur[p]));\n      if (hs[p] \u003c 1e-3) {\n        cc[p * 3] = up[0];\n        cc[p * 3 + 1] = up[1];\n        cc[p * 3 + 2] = up[2];\n        continue;\n      }\n      const hl = hs[p - (i > 0 ? 1 : 0)], hr = hs[p + (i \u003c GX - 1 ? 1 : 0)];\n      const hb = hs[p - (j > 0 ? GX : 0)], hf = hs[p + (j \u003c GZ - 1 ? GX : 0)];\n      const gx = (hr - hl) * 0.5, gz = (hf - hb) * 0.5, inv = 1 / sqrt(gx * gx + 1 + gz * gz);\n      const lap = hl + hr + hb + hf - 4 * hs[p];\n      shade(S, -gx * inv, inv, -gz * inv, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1 - 0.3 * cl(lap * 0.25, 0, 1), c);\n      cc[p * 3] = c[0];\n      cc[p * 3 + 1] = c[1];\n      cc[p * 3 + 2] = c[2];\n    }\n  // The counter and the heap, column by column from the front back in half\n  // cells, height and colour taken between cell centres, each sample filling\n  // the rows its top rises above the samples in front of it.\n  const FL = S.fl;\n  for (let i = 0; i \u003c GX; i++) {\n    let yb = H;\n    for (let v = GZ - 1; v >= 0; v -= 0.5) {\n      const j = floor(v), fv = v - j, p = j * GX + i, p2 = j \u003c GZ - 1 ? p + GX : p;\n      const Yv = h[p] + (h[p2] - h[p]) * fv, z = v + 0.5 - ZC;\n      const y0 = ceil(FY - Yv * CE + z * SE - 0.5);\n      if (y0 >= yb) continue;\n      // Thin lotion lets the counter show through.\n      const film = sm(0.05, 0.9, Yv), fl = (FL[p] + (FL[p2] - FL[p]) * fv) * (1 - film);\n      const r = (cc[p * 3] + (cc[p2 * 3] - cc[p * 3]) * fv) * film + wall[0] * fl;\n      const g = (cc[p * 3 + 1] + (cc[p2 * 3 + 1] - cc[p * 3 + 1]) * fv) * film + wall[1] * fl;\n      const b = (cc[p * 3 + 2] + (cc[p2 * 3 + 2] - cc[p * 3 + 2]) * fv) * film + wall[2] * fl;\n      const dep = Yv * SE + z * CE;\n      for (let y = max(0, y0); y \u003c yb; y++) {\n        const q = y * W + i;\n        col[q * 3] = r;\n        col[q * 3 + 1] = g;\n        col[q * 3 + 2] = b;\n        hdep[q] = dep;\n      }\n      yb = y0;\n    }\n  }\n  // The rope: a chain of balls half an LED apart, each a sphere, the nearest\n  // surface's normal kept at every LED.\n  const ropeOn = !S.gone;\n  if (ropeOn) {\n    const t = S.t, top = min(S.top, YN + 3);\n    const landed = S.tip \u003c 0;\n    const coilTop = C.Yc + C.a1 + HC * C.R;\n    const low = landed ? coilTop : S.tip;\n    const ball = (x, Y, z, a) => {\n      if (a \u003c 0.3) return;\n      const sx = x, sy = FY - Y * CE + z * SE, dd = Y * SE + z * CE;\n      const x0 = max(0, floor(sx - a - 1)), x1 = min(W - 1, ceil(sx + a)), y0 = max(0, floor(sy - a - 1)), y1 = min(H - 1, ceil(sy + a));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let xx = x0; xx \u003c= x1; xx++) {\n          const dx = xx + 0.5 - sx, dy = y + 0.5 - sy, r = sqrt(dx * dx + dy * dy);\n          const cov = cl(a - r + 0.5, 0, 1);\n          if (cov \u003c= 0) continue;\n          const q = y * W + xx, uz = sqrt(max(0, 1 - (r * r) / (a * a)));\n          const depth = dd + a * uz;\n          if (cov \u003c rcov[q] - 0.02 || (cov \u003c= rcov[q] + 0.02 && depth \u003c= rdep[q])) continue;\n          const m = 1 / max(a, r + 1e-6);\n          rcov[q] = cov;\n          rdep[q] = depth;\n          rcol[q * 3] = dx * m;\n          rcol[q * 3 + 1] = -dy * m;\n          rcol[q * 3 + 2] = uz;\n        }\n    };\n    // The falling stream, with swellings that left the spout at a steady\n    // beat and stretch apart as the lotion speeds up.\n    for (let Y = top; Y > low; Y -= 0.5) {\n      const v = speedAt(Y), age = (v - V0) / G;\n      let a = radiusAt(L.a0, Y) * (1 + BA * sin(2 * PI * FB * (t - age)));\n      // A broken stream's upper end narrows to a rounded tail.\n      if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n      ball(AX, Y, 0, a);\n    }\n    if (!landed) ball(AX, S.tip, 0, radiusAt(L.a0, S.tip) * 1.15);\n    else {\n      // The coil: from the axis at its top it bends out to radius R, winding\n      // a quarter turn as it comes down level onto the heap.\n      const len = HC * C.R + 2 * C.R, n = ceil(len / 0.5);\n      for (let k = n; k >= 0; k--) {\n        const s = k / n, Y = C.Yc + C.a1 + HC * C.R * s * s;\n        if (Y > top) continue;\n        const r = C.R * (1 - s * s) * (1 - s * s), th = S.phi + s * PI * 0.5, e = (1 - s) * (1 - s);\n        let a = radiusAt(L.a0, Y);\n        if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n        ball(AX + (C.cx - AX) * e + r * cos(th), Y, C.cz * e + r * sin(th), a);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let r = col[q * 3], g = col[q * 3 + 1], b = col[q * 3 + 2];\n      const cv = rcov[q];\n      if (cv > 0 && rdep[q] > hdep[q]) {\n        // The rope, lit from the normal its nearest ball left here.\n        shade(S, rcol[q * 3], rcol[q * 3 + 1], rcol[q * 3 + 2], 0, 0, 1, LC[0], LC[1], LC[2], HCm[0], HCm[1], HCm[2], true, 1, c);\n        r += (c[0] - r) * cv;\n        g += (c[1] - g) * cv;\n        b += (c[2] - b) * cv;\n      }\n      display.setPixel(x, y, tone(r), tone(g), tone(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Thick","min":-1,"max":1,"about":"How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up."},{"name":"Gloss","min":-1,"max":1,"about":"At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim."}],"start":[0,2,0,0.06],"measures":{"motion":0.0659,"detail":0.0182,"edges":0.2668,"complexity":1.0681,"coverage":0.9585,"colour":0.134,"drift":0.0362},"knobResponse":[0.16,0.0263,0.0576,0.0386]},{"slug":"lunation","title":"Lunation","family":"celestial","round":16,"note":"망원 렌즈로 본 한 달을 빠르게 돌려요. 패널 너비만 한 달이 지구조에 비친 초승달에서 보름달로 차오르며 달의 바다와 크레이터를 드러내고, 하늘도 같이 밝아져요. K1 을 누르면 다음 보름에 개기월식이 들어 달이 구릿빛이 돼요.","idea":"One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.","buttons":"K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.","code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-lunation","type":"code","name":"lunation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Latitude","min":-90,"max":90,"about":"Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down."},{"name":"Days","min":0.5,"max":4,"about":"Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4."},{"name":"Zoom","min":0,"max":1,"about":"The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame."},{"name":"Exposure","min":-2,"max":2,"about":"Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white."}],"start":[0,2,0,0.06],"measures":{"motion":0.058,"detail":0.023,"edges":0.2973,"complexity":1.178,"coverage":0.7526,"colour":0.083,"drift":0.3482},"knobResponse":[0.0549,0.1588,0.1276,0.2614]},{"slug":"mandelbrot","title":"Mandel Dive","family":"fractal","round":2,"note":"망델브로 집합 전체가 서 있다가 가장자리의 한 점으로 끝없이 떨어져 들어가요. 처음 자리는 안테나 위의 미니 망델브로라서, 다 들어가면 처음과 같은 그림으로 녹아들어 다시 떨어져요.","idea":"The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.","buttons":"K1 tap starts the next dive now.","code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-mandelbrot","type":"code","name":"mandelbrot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour bands around the wheel."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the view falls, from one doubling every eight seconds to two a second."},{"name":"Spot","min":0,"max":3,"about":"Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral."},{"name":"Bands","min":1,"max":3.5,"about":"How tightly the colour bands are packed, from slow washes to fine contour rings."}],"start":[0,2,0,1],"measures":{"motion":1.8353,"detail":0.0554,"edges":0.2209,"complexity":1.9032,"coverage":0.846,"colour":0.2924,"drift":0.4001},"knobResponse":[0.262,0.2907,0.2828,0.2216]},{"slug":"marble-run","title":"Marble Run","family":"toy","round":17,"note":"패널 높이의 구슬 굴리기 장난감이에요. 고양이눈 유리구슬이 깔때기를 돌고 지그재그 레일 셋과 나선, 실로폰을 지나 내려오면 옆의 나사 리프트가 다시 꼭대기로 올리고, 구슬이 지나는 플라스틱 조각에는 불이 들어와요. K1 을 누르면 구슬 여섯 개를 깔때기에 쏟아요.","idea":"Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.","buttons":"K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.","code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-marble-run","type":"code","name":"marble-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paint","min":0,"max":1,"about":"Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again."},{"name":"Marbles","min":6,"max":28,"about":"How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop."},{"name":"Tilt","min":0,"max":1,"about":"How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them."}],"start":[0,2,6,0.06],"measures":{"motion":0.4936,"detail":0.087,"edges":0.6482,"complexity":0.8353,"coverage":0.464,"colour":0.2101,"drift":0.042},"knobResponse":[0.0707,0.0515,0.0698,0.0736]},{"slug":"marbling","title":"Marbling","family":"print","round":15,"note":"물 위에 떨어진 잉크 방울이 과녁처럼 번지고, 빗이 지나가면 깃털과 갈매기 무늬로 끌려가요. 종이를 들어 올리면 물이 비고 다음 판에 다시 방울이 떨어져요.","idea":"Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.","buttons":"K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.","code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","layer":{"id":"layer-marbling","type":"code","name":"marbling","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top."},{"name":"Drops","min":3,"max":8,"about":"How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count."},{"name":"Comb","min":0,"max":1,"about":"How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10."}],"start":[0,2,3,0.06],"measures":{"motion":1.6459,"detail":0.1305,"edges":0.9605,"complexity":0.2799,"coverage":0.6371,"colour":0.5767,"drift":0.3773},"knobResponse":[0.3451,0.3454,0.3519,0.2984]},{"slug":"marionette","title":"Marionette","family":"stage","round":25,"note":"작은 인형극 무대에서 어릿광대 꼭두각시가 팔로 스폿을 받으며 지그를 춰요. 머리와 두 손, 두 무릎, 등에 맨 실 일곱이 꼭대기 다리에서 인형사가 쥔 십자 조종대까지 올라가서, 조종대가 기울면 실이 따라 기울고 팔과 무릎이 끌려 올라가요. K4 가 스폿을 옆으로 옮기면 인형과 실의 그림자가 반대쪽 배경막에 서고, K1 을 누르면 인형이 무릎을 접고 높이 뛰었다가 인사해요.","idea":"A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.","buttons":"K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.","code":"// ===== Patternflow pattern =====\n// Title:   Marionette\n// Family:  stage\n// Idea:    A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the string marionettes of the European puppet theatres\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1\n//\n// Knob 1: Costume. The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald.\n// Knob 2: Speed. The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower.\n// Knob 3: Number. The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order.\n// Knob 4: Spot. Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side.\n// Buttons: K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// Rows: bridge rail, grip, top of the backcloth, its foot, the ankles' floor, the apron.\nconst [RAIL, GRIP, CLOTH, BACK, FLOOR, APRON] = [3, 11, 28, 108, 117, 124];\n// Gravity in LEDs/s² (the 46 LED puppet is about 60 cm), damping per step, beats a second at Speed 2.\nconst [G, DAMP, BPS] = [700, 0.992, 2.4];\n// The puppet standing, x from its middle: temples, shoulders, hips, elbows, hands, knees, ankles.\nconst REST = [-3, 74, 3, 74, -5, 80, 5, 80, -3, 94, 3, 94, -6, 88, 6, 88, -7, 96, 7, 96, -3, 106, 3, 106, -3, 117, 3, 117];\n// Bones and their stiffness. The neck's diagonals are soft so the head can nod.\nconst BONES = \"01 02 13 03. 12. 23 45 24 35 25 34 26 68 37 79 4a ac 5b bd\".split(\" \").map((s) => [parseInt(s[0], 16), parseInt(s[1], 16), s[2] ? 0.2 : 1]);\n// The threads in the order of their anchors: temples, hands, the small of the back, knees.\nconst STR = [[0], [1], [8], [9], [4, 5], [10], [11]];\n// How low each particle may go.\nconst LIM = [3.5, 3.5, 2, 2, 2, 2, 1.5, 1.5, 1.3, 1.3, 1.6, 1.6, 0, 0].map((v) => FLOOR - v);\n// Beats in each number.\nconst LEN = [14, 8, 10, 10, 12];\n// Each number's light: wash, follow spot, its radius, footlights, pin spot, rail lamps.\nconst CUES = [\n  [0.5, 0.42, 0.34, 1, 0.9, 0.72, 21, 0.5, 0, 1],\n  [0.05, 0.05, 0.1, 0.3, 0.3, 0.34, 13, 0.12, 1, 0.8],\n  [0.12, 0.2, 0.42, 0.72, 0.84, 1, 20, 0.08, 0, 0.7],\n  [0.42, 0.1, 0.16, 1, 0.66, 0.36, 17, 1.2, 0, 1],\n  [0.58, 0.55, 0.46, 1, 1, 0.94, 25, 0.45, 0, 1],\n];\nconst WOOD = [205, 150, 95], FACE = [232, 194, 156], GOLD = [255, 200, 80], FT = [1, 0.72, 0.42], LM = [1, 0.78, 0.52], PK = [1, 0.97, 0.9];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    p: F32(42), q: F32(42), f: F32(N * 3), lt: F32(N * 3), m: F32(N), alb: F32(N * 3), pi: new Int8Array(N),\n    b: 0, num: 0, nk: -1, cue: CUES[0].slice(), leap: -1, walk: 0, sx: 32, sy: 92, bell: [38, 62, 0, 0], dust: [], k1: 0, s4: 0.06, flash: 0, stc: [0, 0],\n    C: { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0 },\n  });\n  for (let i = 0; i \u003c 14; i++) (P.p[i * 3] = P.q[i * 3] = 32 + REST[i * 2]), (P.p[i * 3 + 1] = P.q[i * 3 + 1] = REST[i * 2 + 1]);\n  const p = P.p, A = (P.A = anchors(P.C));\n  P.bl = BONES.map(([a, b]) => sqrt((p[a * 3] - p[b * 3]) ** 2 + (p[a * 3 + 1] - p[b * 3 + 1]) ** 2));\n  P.sl = STR.map((s, j) => {\n    const m = mid(p, s);\n    return sqrt((m[0] - A[j][0]) ** 2 + (m[1] - A[j][1]) ** 2 + (m[2] - A[j][2]) ** 2) + (j > 4 ? 2 : 1);\n  });\n  paint(P);\n  phys(P, A, A, 1 / 120, 150);\n}\n\nconst mid = (p, s) => [0, 1, 2].map((c) => (p[s[0] * 3 + c] + p[s[s.length - 1] * 3 + c]) / 2);\n\n// The cross: a stick from the grip with a bar across it. The leg bar is in the other hand below it.\nfunction anchors(C) {\n  const cp = cos(C.p), sp = sin(C.p), cr = cos(C.r), sr = sin(C.r), cw = cos(C.w), sw = sin(C.w);\n  const T = (lx, ly) => {\n    const y1 = ly * cp, z1 = ly * sp, x2 = lx * cr - y1 * sr, y2 = lx * sr + y1 * cr;\n    return [C.x + x2 * cw + z1 * sw, C.y + y2, -x2 * sw + z1 * cw];\n  };\n  const L = (s, k) => [C.x + s * 7 * cw, C.y + 19 - k, 3 - s * 7 * sw];\n  return [T(-4, 5), T(4, 5), T(-12, 5), T(12, 5), T(0, 16), L(-1, C.kL), L(1, C.kR), T(0, 0)];\n}\n\n// Verlet steps: gravity, bones, threads that pull only when taut, the floor.\nfunction phys(P, A0, A1, h, n) {\n  const p = P.p, q = P.q, C = P.C, h2 = h * h, d = [0, 0, 0];\n  for (let st = 0; st \u003c n; st++) {\n    const f = (st + 1) / n;\n    let rx = p[9] - p[6], rz = p[11] - p[8];\n    const rl = sqrt(rx * rx + rz * rz) || 1;\n    (rx /= rl), (rz /= rl);\n    for (let i = 0; i \u003c 14; i++) {\n      // Knees bend forward, elbows out and back, the head leans in a bow.\n      const sd = i & 1 ? 30 : -30, a = i > 9 && i \u003c 12 ? [-90 * rz, 90 * rx] : i === 6 || i === 7 ? [sd * rx + 25 * rz, sd * rz - 25 * rx] : i \u003c 2 ? [-C.lean * 400 * rz, C.lean * 400 * rx] : [0, 0];\n      for (let c = 0, o = i * 3; c \u003c 3; c++, o++) {\n        const v = (p[o] - q[o]) * DAMP;\n        (q[o] = p[o]), (p[o] += v + (c === 1 ? G : a[c >> 1]) * h2);\n      }\n    }\n    for (let it = 0; it \u003c 6; it++) {\n      BONES.forEach(([a, b, k], j) => {\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = p[b * 3 + c] - p[a * 3 + c]), (l += d[c] * d[c]);\n        const m = (1 - P.bl[j] / (sqrt(l) || 1e-6)) * 0.5 * k;\n        for (let c = 0; c \u003c 3; c++) (p[a * 3 + c] += d[c] * m), (p[b * 3 + c] -= d[c] * m);\n      });\n      for (let s = 0; s \u003c 7; s++) {\n        const m = mid(p, STR[s]), L = max(4, P.sl[s] + (s \u003c 2 ? C.sH : s === 2 ? -C.hL : s === 3 ? -C.hR : s === 4 ? C.sB : 0));\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = m[c] - mix(A0[s][c], A1[s][c], f)), (l += d[c] * d[c]);\n        if ((l = sqrt(l)) > L) for (const i of STR[s]) for (let c = 0; c \u003c 3; c++) p[i * 3 + c] -= (d[c] * (l - L)) / l;\n      }\n      for (let i = 0; i \u003c 14; i++) {\n        const o = i * 3;\n        if (p[o + 1] > LIM[i]) {\n          // A foot that comes down hard raises dust.\n          if (i > 11 && it === 0 && p[o + 1] - q[o + 1] > 0.45 && P.stc[i - 12] \u003c= 0) stamp(P, p[o], p[o + 1] - q[o + 1]), (P.stc[i - 12] = 0.25);\n          (p[o + 1] = q[o + 1] = LIM[i]), (q[o] = p[o] - (p[o] - q[o]) * 0.5), (q[o + 2] = p[o + 2] - (p[o + 2] - q[o + 2]) * 0.5);\n        }\n        (p[o] = cl(p[o], 3, 60)), (p[o + 2] = cl(p[o + 2], -14, 14));\n      }\n    }\n  }\n}\n\nfunction stamp(P, x, v) {\n  for (let i = 0; i \u003c 7; i++) P.dust.push([x + (Math.random() - 0.5) * 4, FLOOR + 1, (Math.random() - 0.5) * 40, -6 - Math.random() * 14 * v, 0.5 + Math.random() * 0.5]);\n}\n\n// What the puppeteer does with the cross in each number, beat by beat.\nfunction script(n, b) {\n  const T = { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0, au: 0 };\n  const ph = fr(b), bu = sin(PI * ph), odd = floor(b) & 1;\n  if (n === 0) {\n    // The jig: a hop on every beat, knees and arms up in turn, across and back.\n    const tr = (TAU * b) / 8, sw = sin((PI * b) / 2), e = 1 - sm(LEN[0] - 1.5, LEN[0], b);\n    (T.x = 32 + 10 * sin(tr) * e), (T.w = 0.5 * cos(tr) * e), (T.y -= 3.5 * bu * e), (T[odd ? \"kR\" : \"kL\"] = 9 * bu * bu * e);\n    (T.r = 0.3 * sw), (T.hL = 13 * max(0, sw) * e), (T.hR = 13 * max(0, -sw) * e);\n  } else if (n === 1) {\n    // The bow: the head threads let out, the back thread holds, the cross tips over.\n    const u = sm(1, 2.4, b) * (1 - sm(5, 6.6, b));\n    (T.y += u), (T.p = -0.5 * u), (T.sH = 11 * u), (T.sB = -3 * u), (T.lean = 1.3 * u), (T.w = 0.6 * u), (T.hR = 12 * sm(0.2, 1.2, b) * (1 - sm(4.6, 6.2, b))), (T.au = 1);\n  } else if (n === 2) {\n    // The flop: all let go, a heap on the floor, the head comes up to look round, lifted back up, a shake.\n    const dr = sm(0.8, 1.15, b) * (1 - sm(5.2, 6.8, b)), lk = sm(2.2, 2.9, b) * (1 - sm(4.4, 5, b));\n    (T.x = 27), (T.y += 26 * dr), (T.sH = -14 * lk * dr), (T.w = 0.7 * dr + 0.6 * sin((TAU * (b - 2.2)) / 2.2) * lk), (T.au = 1);\n    T.r = 0.35 * sin(TAU * b) * sm(6.8, 7.3, b) * (1 - sm(9, 9.8, b));\n  } else if (n === 3) {\n    // The stamp: a knee drawn up slowly and let drop hard on the beat.\n    (T.x = 37), (T[odd ? \"kR\" : \"kL\"] = 11 * sm(0.1, 0.6, ph) * (1 - sm(0.82, 0.9, ph))), (T.r = (odd ? 0.22 : -0.22) * bu);\n    (T.lean = -0.25), (T.hL = T.hR = 5), (T.w = 0.3 * sin((TAU * b) / 4)), (T.au = 1);\n  } else {\n    // The strut: across the stage and back, facing the way it goes.\n    const tr = (TAU * b) / 12;\n    (T.x = 32 + 12 * cos(tr)), (T.w = -0.8 * sin(tr)), (T.y -= 1.5 * bu), (T[odd ? \"kR\" : \"kL\"] = 6 * bu), (T.r = 0.25 * sin(PI * b)), (T.p = -0.1);\n  }\n  return T;\n}\n\n// K1's leap, in seconds: crouch, jerk up, fly, land, bow.\nfunction leap(P, T, rd) {\n  const u = P.leap, a = 1 - sm(2.7, 3.3, u), air = sm(0.25, 0.4, u) * (1 - sm(0.55, 0.95, u)), tuck = sm(0.3, 0.45, u) * (1 - sm(0.75, 0.95, u));\n  const bow = sm(1.2, 1.7, u) * (1 - sm(2.4, 3, u)), cr = sm(0, 0.2, u) * (1 - sm(0.22, 0.32, u));\n  (T.y = mix(T.y, GRIP + 4 * cr - 10 * air + 4 * bow, a)), (T.kL = T.kR = mix(T.kL, 7 * tuck, a)), (T.hL = T.hR = mix(T.hL, 15 * tuck, a));\n  (T.sH = mix(T.sH, 10 * bow, a)), (T.lean = mix(T.lean, bow, a)), (T.p = mix(T.p, -0.5 * bow, a)), (T.r *= 1 - a), (T.w *= 1 - a), (T.x = mix(T.x, P.C.x, a));\n  if (u \u003c 0.4 && u + rd >= 0.4) P.flash = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05), d = (rd * cl(k[1], 0.2, 3)) / 2;\n  (P.k1 = cl(k[0], 0, 1)), (P.s4 = cl(k[3], -1, 1));\n  const nk = round(cl(k[2], 0, 4));\n  if (nk !== P.nk) {\n    if (P.nk \u003c 0) P.cue = CUES[nk].slice();\n    (P.nk = P.num = nk), (P.b = 0);\n  }\n  if ((P.b += d * BPS) >= LEN[P.num]) (P.b -= LEN[P.num]), (P.num = (P.num + 1) % 5);\n  if (input.btnPressed && input.btnPressed[0] && P.leap \u003c 0) P.leap = 0;\n  const T = script(P.num, P.b), C = P.C, x0 = C.x;\n  if (P.leap >= 0 && (leap(P, T, rd), (P.leap += rd) > 3.3)) P.leap = -1;\n  const ex = min(1, rd / 0.45), e = min(1, rd / 0.05);\n  for (const key in C) C[key] = mix(C[key], T[key], key === \"x\" ? ex : e);\n  // Steps wherever the cross travels in a number without its own.\n  const dx = abs(C.x - x0);\n  P.walk += dx / 5;\n  if (T.au && rd > 0) {\n    const lift = min(1, dx / rd / 6) * 6 * sin(PI * fr(P.walk)) ** 2;\n    floor(P.walk) & 1 ? (C.kR = max(C.kR, lift)) : (C.kL = max(C.kL, lift));\n  }\n  const A = anchors(C), n = max(1, ceil(rd * 120 - 1e-6));\n  if (rd > 0) phys(P, P.A, A, rd / n, n);\n  P.A = A;\n  for (let i = 0; i \u003c 10; i++) P.cue[i] = mix(P.cue[i], CUES[P.num][i], min(1, rd * 2.2));\n  // The follow spot keeps to the body.\n  const p = P.p;\n  (P.sx = mix(P.sx, (p[6] + p[9] + p[12] + p[15]) / 4, min(1, rd * 3.5))), (P.sy = mix(P.sy, (p[7] + p[10] + p[13] + p[16]) / 4 + 3, min(1, rd * 2.5)));\n  // The bell on the cap swings after the head.\n  const hd = head(p), B = P.bell, gx = hd.x + hd.ux * 7 - hd.uy * 6, gy = hd.y + hd.uy * 7 + hd.ux * 6 + 2;\n  (B[2] += ((gx - B[0]) * 160 - B[2] * 7) * rd), (B[3] += ((gy - B[1]) * 160 - B[3] * 7 + 60) * rd), (B[0] += B[2] * rd), (B[1] += B[3] * rd);\n  (B[0] = cl(B[0], gx - 6, gx + 6)), (B[1] = cl(B[1], gy - 6, gy + 6));\n  P.dust = P.dust.filter((s) => ((s[3] += 50 * rd), (s[0] += s[2] * rd), (s[1] = min(FLOOR + 2, s[1] + s[3] * rd)), (s[4] -= rd) > 0));\n  (P.stc[0] -= rd), (P.stc[1] -= rd), (P.flash = max(0, P.flash - rd * 1.5));\n}\n\n// The head: its middle, which way is up, how far it is turned and nodded.\nfunction head(p) {\n  const x = (p[0] + p[3]) / 2, y = (p[1] + p[4]) / 2 - 0.5, z = (p[2] + p[5]) / 2, sx = (p[6] + p[9]) / 2, sy = (p[7] + p[10]) / 2, sz = (p[8] + p[11]) / 2;\n  const l = Math.hypot(x - sx, y - sy) || 1;\n  return { x, y, ux: (x - sx) / l, uy: (y - sy) / l, yaw: atan2(-(p[5] - p[2]), p[3] - p[0]), nod: (z - sz) / 6.3 };\n}\n\n// What does not move: velvet, rail, backcloth, boards, apron.\nfunction paint(P) {\n  const A = P.alb, I = P.pi;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.05, 0.045, 0.06];\n    I[i] = -1;\n    if (y >= RAIL && y \u003c= RAIL + 3) {\n      const g = (0.8 + 0.3 * hash(floor((x + y * 7) / 11), y)) * (y === RAIL ? 1.2 : y === RAIL + 3 ? 0.6 : 1) * (0.92 + 0.08 * n);\n      c = [0.55 * g, 0.36 * g, 0.22 * g];\n    } else if (y >= CLOTH - 2 && y \u003c CLOTH) c = [0.13, 0.1, 0.08];\n    else if (y >= CLOTH && y \u003c BACK) {\n      // Painted night: stars over two rows of hills, in soft folds.\n      const hf = 86 + 4 * sin(x * 0.09 + 0.5) + 2 * sin(x * 0.27 + 1), hn = 97 + 3 * sin(x * 0.13 + 2) + 1.5 * sin(x * 0.41);\n      const cx = floor(x / 7), cy = floor(y / 8), r = hash(cx, cy + 50), sx = cx * 7 + 1 + floor(r * 5), sy = cy * 8 + 1 + floor(hash(cx + 9, cy) * 6);\n      I[i] = y >= hn ? 2 : y >= hf ? 1 : r \u003c 0.5 && y \u003c hf - 3 ? (x === sx && y === sy ? 3 : abs(x - sx) + abs(y - sy) === 1 ? 4 : 0) : 0;\n      c = [(0.8 + 0.2 * (0.5 + 0.5 * sin(x * 0.95 + 0.6 * sin(y * 0.05)))) * (0.95 + 0.1 * n), 0, 0];\n    } else if (y >= BACK && y \u003c APRON) {\n      // Boards running towards you.\n      const u = (x - 31.5) / ((y - 30) / (APRON - 30)) / 6 + 0.5, bd = floor(u), g = (0.8 + 0.2 * hash(bd, 3)) * mix(0.45, 1, cl(min(fr(u), 1 - fr(u)) * 9 - 0.3, 0, 1)) * (y > APRON - 3 ? 1.12 : 1) * (0.92 + 0.14 * hash(x, bd * 31 + floor(y / 3)));\n      c = [0.6 * g, 0.42 * g, 0.27 * g];\n    } else if (y >= APRON) c = y === APRON ? [0.4, 0.28, 0.18] : [0.14, 0.09, 0.07];\n    (A[o] = c[0]), (A[o + 1] = c[1]), (A[o + 2] = c[2]);\n  }\n}\n\nlet F, L, M, MODE, SIDE;\n// One LED of the puppet or cross: the shadow mask, or its colour in the light there.\nfunction dot(x, y, c, nx = 0, flat = 0) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const i = y * W + x, o = i * 3;\n  if (MODE === 0) return void (M[i] = 1);\n  const k = 1 - 0.2 * nx * nx + 0.4 * SIDE * nx;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = c[j] * max(flat, L[o + j]) * k;\n}\n// A capsule; the colour may be a function of how far along.\nfunction seg(x0, y0, x1, y1, r, c, flat = 0) {\n  const dx = x1 - x0, dy = y1 - y0, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = floor(min(y0, y1) - r); y \u003c= ceil(max(y0, y1) + r); y++)\n    for (let x = floor(min(x0, x1) - r); x \u003c= ceil(max(x0, x1) + r); x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / l2, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      if (ex * ex + ey * ey \u003c= r * r) dot(x, y, typeof c === \"function\" ? c(t) : c, cl(ex / r, -1, 1), flat);\n    }\n}\nconst disc = (x, y, r, c, flat) => seg(x, y, x, y, r, c, flat);\n\n// A thread: one LED wide over two columns, a faint halo, a glint that slides as it tilts.\nfunction thread(ax, ay, bx, by, gl) {\n  const n = ceil(abs(by - ay)) + 1, tilt = (bx - ax) / (by - ay || 1), g0 = 0.5 + 6 * (tilt + SIDE * 0.06);\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n, x = mix(ax, bx, t), y = round(mix(ay, by, t)), x0 = floor(x), f = x - x0;\n    if (y \u003c 0 || y >= H) continue;\n    if (MODE === 0) {\n      if (x0 >= 0 && x0 \u003c W) M[y * W + x0] = max(M[y * W + x0], 0.45);\n      continue;\n    }\n    const o = (y * W + cl(x0, 0, W - 1)) * 3, gls = gl * 150 * exp(-((((t - g0) * n) / 5) ** 2));\n    for (let e = -1; e \u003c 3; e++) {\n      const xx = x0 + e, a = e \u003c 0 ? 0.12 - 0.12 * f : e ? (e > 1 ? 0.12 * f : 0.12 + 0.88 * f) : 1 - 0.88 * f, q = (y * W + xx) * 3;\n      if (xx \u003c 0 || xx >= W) continue;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += a * (24 + 64 * L[o + j] + gls);\n    }\n  }\n}\n\nfunction puppet(P, C1, C2) {\n  const p = P.p, X = (i) => p[i * 3], Y = (i) => p[i * 3 + 1], Z = (i) => p[i * 3 + 2], tz = (Z(2) + Z(3) + Z(4) + Z(5)) / 4;\n  const stock = (t) => (floor(t * 5) & 1 ? C1 : [235, 228, 210]);\n  const limb = (a, b, c, up, low, r1, r2) => {\n    seg(X(a), Y(a), X(b), Y(b), r1, up), seg(X(b), Y(b), X(c), Y(c), r2, low);\n  };\n  const arm = (s) => (limb(2 + s, 6 + s, 8 + s, C2, C1, 1.6, 1.2), disc(X(8 + s), Y(8 + s), 1.4, FACE));\n  const leg = (s) => {\n    limb(4 + s, 10 + s, 12 + s, C2, stock, 1.8, 1.2);\n    const fx = X(12 + s), fy = Y(12 + s) + 1.2, yw = atan2(-(Z(3) - Z(2)), X(3) - X(2));\n    seg(fx - 1.2, fy, fx + 1.2 + 2.4 * sin(yw), fy, 1.1, C2.map((v) => v * 0.55)), dot(round(fx + 2.4 + 2.6 * sin(yw)), round(fy - 1), GOLD);\n  };\n  const parts = [[(Z(6) + Z(8)) / 2, () => arm(0)], [(Z(7) + Z(9)) / 2, () => arm(1)], [(Z(10) + Z(12)) / 2, () => leg(0)], [(Z(11) + Z(13)) / 2, () => leg(1)]];\n  for (const [z, f] of parts) if (z \u003c tz - 1) f();\n  // The doublet in diamonds, flaring to a hem of points, with a belt.\n  const sx = (X(2) + X(3)) / 2, sy = (Y(2) + Y(3)) / 2, hx = (X(4) + X(5)) / 2, hy = (Y(4) + Y(5)) / 2, ax = hx - sx, ay = hy - sy, al = ax * ax + ay * ay || 1;\n  let ex = X(3) - X(2) + X(5) - X(4), ey = Y(3) - Y(2) + Y(5) - Y(4);\n  const el = Math.hypot(ex, ey) || 1, hwS = max(2.5, Math.hypot(X(3) - X(2), Y(3) - Y(2)) / 2), hwH = max(2.5, Math.hypot(X(5) - X(4), Y(5) - Y(4)) * 0.62);\n  (ex /= el), (ey /= el);\n  for (let y = floor(min(sy, hy) - 6); y \u003c= ceil(max(sy, hy) + 6); y++)\n    for (let x = floor(min(sx, hx) - 7); x \u003c= ceil(max(sx, hx) + 7); x++) {\n      const v = ((x - sx) * ax + (y - sy) * ay) / al, hw = mix(hwS, hwH, v), u = ((x - sx - ax * v) * ex + (y - sy - ay * v) * ey) / hw;\n      if (v \u003c -0.05 || abs(u) > 1 || v > 1.1 + 0.12 * abs(fr(u * 2.5) - 0.5) * 2) continue;\n      const belt = v > 0.84 && v \u003c 0.94, dia = (floor(u * 1.6 + v * 3.2) + floor(u * 1.6 - v * 3.2)) & 1;\n      dot(x, y, belt ? (abs(u) \u003c 0.22 ? GOLD : [60, 40, 30]) : dia ? C1 : C2, u);\n    }\n  for (const [z, f] of parts) if (z >= tz - 1) f();\n  // The ruff, the head, the face, the cap and its bell.\n  seg(X(2), Y(2) - 1, X(3), Y(3) - 1, 1.7, (t) => (floor(t * 9) & 1 ? [250, 246, 236] : [205, 200, 192]));\n  const hd = head(p), R = 4.3, px = -hd.uy, py = hd.ux;\n  disc(hd.x, hd.y, R, FACE);\n  if (MODE && hd.nod \u003c 0.7)\n    for (const [ph, hy, c] of [[0.5, -0.4, [30, 22, 34]], [0.8, 1.2, [240, 120, 110]], [0, 2.1, [150, 40, 46]], [-0.5, -0.4, [30, 22, 34]], [-0.8, 1.2, [240, 120, 110]]]) {\n      const a = ph + hd.yaw;\n      if (cos(a) > 0.25) dot(round(hd.x + R * 0.85 * sin(a)), round(hd.y + hy + hd.nod * 3), c);\n    }\n  const b0x = hd.x + hd.ux * 3.1, b0y = hd.y + hd.uy * 3.1, b1x = hd.x + hd.ux * 8 + px, b1y = hd.y + hd.uy * 8 + py, [bx, by] = P.bell;\n  for (let i = 0, lx = b0x, ly = b0y; i \u003c= 8; i++) {\n    const t = i / 8, x = mix(mix(b0x, b1x, t), mix(b1x, bx, t), t), y = mix(mix(b0y, b1y, t), mix(b1y, by, t), t);\n    seg(lx, ly, x, y, mix(3.3, 0.8, t), C1), (lx = x), (ly = y);\n  }\n  seg(hd.x + hd.ux * 2.3 - px * 4, hd.y + hd.uy * 2.3 - py * 4, hd.x + hd.ux * 2.3 + px * 4, hd.y + hd.uy * 2.3 + py * 4, 0.9, C2);\n  disc(bx, by, 1.3, GOLD);\n}\n\n// The puppeteer's sleeves and hands, the cross and the leg bar.\nfunction cross(P) {\n  const A = P.A, [gx, gy] = A[7], sleeve = [46, 38, 60], skin = [232, 176, 140], cuff = [236, 232, 222];\n  const arm = (x0, x1, y1) => seg(x0, -3, x1, y1, 2.6, (t) => (t > 0.84 ? cuff : sleeve), 0.32);\n  seg(A[5][0] - 1.5, A[5][1], A[6][0] + 1.5, A[6][1], 0.7, WOOD, 0.35);\n  seg(gx, gy, A[4][0], A[4][1], 0.9, WOOD, 0.35), seg(A[2][0], A[2][1], A[3][0], A[3][1], 0.8, WOOD, 0.35);\n  for (let j = 0; j \u003c 7; j++) dot(round(A[j][0]), round(A[j][1]), [220, 220, 230], 0, 0.5);\n  arm(gx + 17, gx + 1.5, gy - 1.5), disc(gx + 0.5, gy - 0.5, 2.2, skin, 0.4);\n  arm(A[5][0] - 22, A[5][0] - 2.5, A[5][1] - 1), disc(A[5][0] - 2, A[5][1] - 0.5, 2, skin, 0.4);\n}\n\nfunction stage(P, pal) {\n  const [wr, wg, wb, sr0, sg0, sb0, rad0, foot, pin, lamp] = P.cue, s = P.s4, A = P.alb, I = P.pi, p = P.p;\n  const fl = 1 + 0.5 * P.flash, rad = rad0 + 7 * P.flash, S = [sr0 * fl, sg0 * fl, sb0 * fl], WS = [wr, wg, wb];\n  const px = P.sx - s * 11, py = P.sy, rx = rad * (1 + 0.45 * abs(s)), ry = rad * 1.35, sdx = -s * 15, fx = (p[36] + p[39]) / 2, pinX = P.sx;\n  const lift = [0, 1].map((j) => 1 - sm(0, 8, FLOOR - p[37 + j * 3]));\n  for (let y = 0; y \u003c H; y++) {\n    const ft = y \u003c APRON ? foot * exp((y - APRON) / 14) : 0, wash = y \u003c CLOTH - 2 ? (y >= RAIL && y \u003c= RAIL + 3 ? 0.3 : 0.08) : 1, cw = 2 + (y + 12) * 0.085;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = (x - px) / rx, dy = (y - py) / ry, pool = 1 - sm(0.84, 1, sqrt(dx * dx + dy * dy));\n      const lm = lamp * (1 / (1 + ((x - 4.5) ** 2 + (y - 10) ** 2) / 260) + 1 / (1 + ((x - 59.5) ** 2 + (y - 10) ** 2) / 260));\n      let cone = 0;\n      if (pin > 0.01) cone = y >= BACK ? pin * (1 - sm(0.7, 1, sqrt(((x - pinX) / 12) ** 2 + ((y - FLOOR - 1) / 4) ** 2))) : pin * (1 - sm(0.6, 1, abs(x - pinX) / cw));\n      for (let j = 0; j \u003c 3; j++) L[o + j] = wash * WS[j] + pool * S[j] + ft * FT[j] + lm * LM[j] + cone * PK[j];\n      // The shadow stands up from the feet, larger, away from the spot.\n      let sh = 0, k = 1;\n      if (y >= CLOTH && y \u003c APRON && pool > 0) {\n        const mx = round(fx + (x - fx - sdx) / 1.12), my = round(FLOOR + (y - FLOOR + 3) / 1.12);\n        if (mx >= 0 && mx \u003c W && my >= 0 && my \u003c H) sh = M[my * W + mx] * pool * 0.8;\n      }\n      if (y > BACK && y \u003c APRON) for (let j = 0; j \u003c 2; j++) k *= 1 - 0.6 * lift[j] * exp(-1.5 * (((x - p[36 + j * 3]) / 3.5) ** 2 + ((y - FLOOR - 1.5) / 1.3) ** 2));\n      const c = I[i] >= 0 ? pal[I[i]] : null, f = c ? A[o] : 1, cf = c ? 0.8 * cone : 0;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = (c ? c[j] : A[o + j]) * f * k * (L[o + j] - sh * S[j] - cf * PK[j]) * 255;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  [F, L, M, SIDE] = [P.f, P.lt, P.m, P.s4];\n  const h = 0.36 + P.k1, hc = 0.61 + 0.3 * sin(TAU * P.k1), A = P.A, p = P.p;\n  const C1 = hsv(h, 0.8, 0.8).map((v) => v * 255), C2 = hsv(h + 0.06, 0.75, 0.42).map((v) => v * 255);\n  const sky = hsv(hc, 0.62, 0.34), star = [0.95, 0.78, 0.4], pal = [sky, hsv(hc + 0.06, 0.55, 0.46), hsv(hc + 0.12, 0.6, 0.58), star, sky.map((v, j) => mix(v, star[j], 0.4))];\n  const threads = (from, to) => {\n    for (let s = from; s \u003c to; s++) {\n      const m = mid(p, STR[s]), side = s \u003c 2 ? (s ? 2 : -2) * cos(head(p).yaw) : 0;\n      thread(A[s][0], A[s][1], m[0] + side, m[1] - (s \u003c 2 ? 1 : 0), s === 4 ? 0.4 : 1);\n    }\n  };\n  // The shadow first: the puppet and its threads as a mask.\n  M.fill(0), (MODE = 0), threads(0, 7), puppet(P, C1, C2);\n  (MODE = 1), stage(P, pal);\n  threads(0, 7), puppet(P, C1, C2), cross(P);\n  // Dust from the stamps, the haze in the pin beam, the footlights.\n  for (const [x, y, , , l] of P.dust) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) F[o + j] += [190, 160, 130][j] * l * 0.6 * max(0.4, L[o + j]);\n  }\n  const pin = P.cue[8];\n  if (pin > 0.01)\n    for (let y = 0; y \u003c BACK; y++) {\n      const cw = 2 + (y + 12) * 0.085;\n      for (let x = 0; x \u003c W; x++) {\n        const c = pin * 0.09 * (1 - sm(0.6, 1, abs(x - P.sx) / cw)) * 255;\n        for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += c * PK[j];\n      }\n    }\n  // The clip lamps on the rail and the footlights.\n  for (const x of [4.5, 59.5]) {\n    seg(x - 2, 7.5, x + 2, 7.5, 1.2, [40, 80, 58], 0.5), seg(x - 0.5, 9.2, x + 0.5, 9.2, 0.6, [255, 226, 170], P.cue[9]);\n    for (let i = -3; i \u003c 4; i++) for (let j = 0; j \u003c 3; j++) F[(10 * W + round(x + i)) * 3 + j] += (80 * P.cue[9] * LM[j]) / (1 + i * i);\n  }\n  const fb = min(1, P.cue[7] * 1.2 + 0.15);\n  for (const x of [6, 19, 32, 45, 57])\n    for (let i = -2; i \u003c= 3; i++) {\n      const a = i === 0 || i === 1 ? fb : fb * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[(125 * W + x + i) * 3 + j] += 255 * a * FT[j];\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","layer":{"id":"layer-marionette","type":"code","name":"marionette","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marionette\n// Family:  stage\n// Idea:    A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the string marionettes of the European puppet theatres\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1\n//\n// Knob 1: Costume. The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald.\n// Knob 2: Speed. The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower.\n// Knob 3: Number. The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order.\n// Knob 4: Spot. Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side.\n// Buttons: K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// Rows: bridge rail, grip, top of the backcloth, its foot, the ankles' floor, the apron.\nconst [RAIL, GRIP, CLOTH, BACK, FLOOR, APRON] = [3, 11, 28, 108, 117, 124];\n// Gravity in LEDs/s² (the 46 LED puppet is about 60 cm), damping per step, beats a second at Speed 2.\nconst [G, DAMP, BPS] = [700, 0.992, 2.4];\n// The puppet standing, x from its middle: temples, shoulders, hips, elbows, hands, knees, ankles.\nconst REST = [-3, 74, 3, 74, -5, 80, 5, 80, -3, 94, 3, 94, -6, 88, 6, 88, -7, 96, 7, 96, -3, 106, 3, 106, -3, 117, 3, 117];\n// Bones and their stiffness. The neck's diagonals are soft so the head can nod.\nconst BONES = \"01 02 13 03. 12. 23 45 24 35 25 34 26 68 37 79 4a ac 5b bd\".split(\" \").map((s) => [parseInt(s[0], 16), parseInt(s[1], 16), s[2] ? 0.2 : 1]);\n// The threads in the order of their anchors: temples, hands, the small of the back, knees.\nconst STR = [[0], [1], [8], [9], [4, 5], [10], [11]];\n// How low each particle may go.\nconst LIM = [3.5, 3.5, 2, 2, 2, 2, 1.5, 1.5, 1.3, 1.3, 1.6, 1.6, 0, 0].map((v) => FLOOR - v);\n// Beats in each number.\nconst LEN = [14, 8, 10, 10, 12];\n// Each number's light: wash, follow spot, its radius, footlights, pin spot, rail lamps.\nconst CUES = [\n  [0.5, 0.42, 0.34, 1, 0.9, 0.72, 21, 0.5, 0, 1],\n  [0.05, 0.05, 0.1, 0.3, 0.3, 0.34, 13, 0.12, 1, 0.8],\n  [0.12, 0.2, 0.42, 0.72, 0.84, 1, 20, 0.08, 0, 0.7],\n  [0.42, 0.1, 0.16, 1, 0.66, 0.36, 17, 1.2, 0, 1],\n  [0.58, 0.55, 0.46, 1, 1, 0.94, 25, 0.45, 0, 1],\n];\nconst WOOD = [205, 150, 95], FACE = [232, 194, 156], GOLD = [255, 200, 80], FT = [1, 0.72, 0.42], LM = [1, 0.78, 0.52], PK = [1, 0.97, 0.9];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    p: F32(42), q: F32(42), f: F32(N * 3), lt: F32(N * 3), m: F32(N), alb: F32(N * 3), pi: new Int8Array(N),\n    b: 0, num: 0, nk: -1, cue: CUES[0].slice(), leap: -1, walk: 0, sx: 32, sy: 92, bell: [38, 62, 0, 0], dust: [], k1: 0, s4: 0.06, flash: 0, stc: [0, 0],\n    C: { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0 },\n  });\n  for (let i = 0; i \u003c 14; i++) (P.p[i * 3] = P.q[i * 3] = 32 + REST[i * 2]), (P.p[i * 3 + 1] = P.q[i * 3 + 1] = REST[i * 2 + 1]);\n  const p = P.p, A = (P.A = anchors(P.C));\n  P.bl = BONES.map(([a, b]) => sqrt((p[a * 3] - p[b * 3]) ** 2 + (p[a * 3 + 1] - p[b * 3 + 1]) ** 2));\n  P.sl = STR.map((s, j) => {\n    const m = mid(p, s);\n    return sqrt((m[0] - A[j][0]) ** 2 + (m[1] - A[j][1]) ** 2 + (m[2] - A[j][2]) ** 2) + (j > 4 ? 2 : 1);\n  });\n  paint(P);\n  phys(P, A, A, 1 / 120, 150);\n}\n\nconst mid = (p, s) => [0, 1, 2].map((c) => (p[s[0] * 3 + c] + p[s[s.length - 1] * 3 + c]) / 2);\n\n// The cross: a stick from the grip with a bar across it. The leg bar is in the other hand below it.\nfunction anchors(C) {\n  const cp = cos(C.p), sp = sin(C.p), cr = cos(C.r), sr = sin(C.r), cw = cos(C.w), sw = sin(C.w);\n  const T = (lx, ly) => {\n    const y1 = ly * cp, z1 = ly * sp, x2 = lx * cr - y1 * sr, y2 = lx * sr + y1 * cr;\n    return [C.x + x2 * cw + z1 * sw, C.y + y2, -x2 * sw + z1 * cw];\n  };\n  const L = (s, k) => [C.x + s * 7 * cw, C.y + 19 - k, 3 - s * 7 * sw];\n  return [T(-4, 5), T(4, 5), T(-12, 5), T(12, 5), T(0, 16), L(-1, C.kL), L(1, C.kR), T(0, 0)];\n}\n\n// Verlet steps: gravity, bones, threads that pull only when taut, the floor.\nfunction phys(P, A0, A1, h, n) {\n  const p = P.p, q = P.q, C = P.C, h2 = h * h, d = [0, 0, 0];\n  for (let st = 0; st \u003c n; st++) {\n    const f = (st + 1) / n;\n    let rx = p[9] - p[6], rz = p[11] - p[8];\n    const rl = sqrt(rx * rx + rz * rz) || 1;\n    (rx /= rl), (rz /= rl);\n    for (let i = 0; i \u003c 14; i++) {\n      // Knees bend forward, elbows out and back, the head leans in a bow.\n      const sd = i & 1 ? 30 : -30, a = i > 9 && i \u003c 12 ? [-90 * rz, 90 * rx] : i === 6 || i === 7 ? [sd * rx + 25 * rz, sd * rz - 25 * rx] : i \u003c 2 ? [-C.lean * 400 * rz, C.lean * 400 * rx] : [0, 0];\n      for (let c = 0, o = i * 3; c \u003c 3; c++, o++) {\n        const v = (p[o] - q[o]) * DAMP;\n        (q[o] = p[o]), (p[o] += v + (c === 1 ? G : a[c >> 1]) * h2);\n      }\n    }\n    for (let it = 0; it \u003c 6; it++) {\n      BONES.forEach(([a, b, k], j) => {\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = p[b * 3 + c] - p[a * 3 + c]), (l += d[c] * d[c]);\n        const m = (1 - P.bl[j] / (sqrt(l) || 1e-6)) * 0.5 * k;\n        for (let c = 0; c \u003c 3; c++) (p[a * 3 + c] += d[c] * m), (p[b * 3 + c] -= d[c] * m);\n      });\n      for (let s = 0; s \u003c 7; s++) {\n        const m = mid(p, STR[s]), L = max(4, P.sl[s] + (s \u003c 2 ? C.sH : s === 2 ? -C.hL : s === 3 ? -C.hR : s === 4 ? C.sB : 0));\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = m[c] - mix(A0[s][c], A1[s][c], f)), (l += d[c] * d[c]);\n        if ((l = sqrt(l)) > L) for (const i of STR[s]) for (let c = 0; c \u003c 3; c++) p[i * 3 + c] -= (d[c] * (l - L)) / l;\n      }\n      for (let i = 0; i \u003c 14; i++) {\n        const o = i * 3;\n        if (p[o + 1] > LIM[i]) {\n          // A foot that comes down hard raises dust.\n          if (i > 11 && it === 0 && p[o + 1] - q[o + 1] > 0.45 && P.stc[i - 12] \u003c= 0) stamp(P, p[o], p[o + 1] - q[o + 1]), (P.stc[i - 12] = 0.25);\n          (p[o + 1] = q[o + 1] = LIM[i]), (q[o] = p[o] - (p[o] - q[o]) * 0.5), (q[o + 2] = p[o + 2] - (p[o + 2] - q[o + 2]) * 0.5);\n        }\n        (p[o] = cl(p[o], 3, 60)), (p[o + 2] = cl(p[o + 2], -14, 14));\n      }\n    }\n  }\n}\n\nfunction stamp(P, x, v) {\n  for (let i = 0; i \u003c 7; i++) P.dust.push([x + (Math.random() - 0.5) * 4, FLOOR + 1, (Math.random() - 0.5) * 40, -6 - Math.random() * 14 * v, 0.5 + Math.random() * 0.5]);\n}\n\n// What the puppeteer does with the cross in each number, beat by beat.\nfunction script(n, b) {\n  const T = { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0, au: 0 };\n  const ph = fr(b), bu = sin(PI * ph), odd = floor(b) & 1;\n  if (n === 0) {\n    // The jig: a hop on every beat, knees and arms up in turn, across and back.\n    const tr = (TAU * b) / 8, sw = sin((PI * b) / 2), e = 1 - sm(LEN[0] - 1.5, LEN[0], b);\n    (T.x = 32 + 10 * sin(tr) * e), (T.w = 0.5 * cos(tr) * e), (T.y -= 3.5 * bu * e), (T[odd ? \"kR\" : \"kL\"] = 9 * bu * bu * e);\n    (T.r = 0.3 * sw), (T.hL = 13 * max(0, sw) * e), (T.hR = 13 * max(0, -sw) * e);\n  } else if (n === 1) {\n    // The bow: the head threads let out, the back thread holds, the cross tips over.\n    const u = sm(1, 2.4, b) * (1 - sm(5, 6.6, b));\n    (T.y += u), (T.p = -0.5 * u), (T.sH = 11 * u), (T.sB = -3 * u), (T.lean = 1.3 * u), (T.w = 0.6 * u), (T.hR = 12 * sm(0.2, 1.2, b) * (1 - sm(4.6, 6.2, b))), (T.au = 1);\n  } else if (n === 2) {\n    // The flop: all let go, a heap on the floor, the head comes up to look round, lifted back up, a shake.\n    const dr = sm(0.8, 1.15, b) * (1 - sm(5.2, 6.8, b)), lk = sm(2.2, 2.9, b) * (1 - sm(4.4, 5, b));\n    (T.x = 27), (T.y += 26 * dr), (T.sH = -14 * lk * dr), (T.w = 0.7 * dr + 0.6 * sin((TAU * (b - 2.2)) / 2.2) * lk), (T.au = 1);\n    T.r = 0.35 * sin(TAU * b) * sm(6.8, 7.3, b) * (1 - sm(9, 9.8, b));\n  } else if (n === 3) {\n    // The stamp: a knee drawn up slowly and let drop hard on the beat.\n    (T.x = 37), (T[odd ? \"kR\" : \"kL\"] = 11 * sm(0.1, 0.6, ph) * (1 - sm(0.82, 0.9, ph))), (T.r = (odd ? 0.22 : -0.22) * bu);\n    (T.lean = -0.25), (T.hL = T.hR = 5), (T.w = 0.3 * sin((TAU * b) / 4)), (T.au = 1);\n  } else {\n    // The strut: across the stage and back, facing the way it goes.\n    const tr = (TAU * b) / 12;\n    (T.x = 32 + 12 * cos(tr)), (T.w = -0.8 * sin(tr)), (T.y -= 1.5 * bu), (T[odd ? \"kR\" : \"kL\"] = 6 * bu), (T.r = 0.25 * sin(PI * b)), (T.p = -0.1);\n  }\n  return T;\n}\n\n// K1's leap, in seconds: crouch, jerk up, fly, land, bow.\nfunction leap(P, T, rd) {\n  const u = P.leap, a = 1 - sm(2.7, 3.3, u), air = sm(0.25, 0.4, u) * (1 - sm(0.55, 0.95, u)), tuck = sm(0.3, 0.45, u) * (1 - sm(0.75, 0.95, u));\n  const bow = sm(1.2, 1.7, u) * (1 - sm(2.4, 3, u)), cr = sm(0, 0.2, u) * (1 - sm(0.22, 0.32, u));\n  (T.y = mix(T.y, GRIP + 4 * cr - 10 * air + 4 * bow, a)), (T.kL = T.kR = mix(T.kL, 7 * tuck, a)), (T.hL = T.hR = mix(T.hL, 15 * tuck, a));\n  (T.sH = mix(T.sH, 10 * bow, a)), (T.lean = mix(T.lean, bow, a)), (T.p = mix(T.p, -0.5 * bow, a)), (T.r *= 1 - a), (T.w *= 1 - a), (T.x = mix(T.x, P.C.x, a));\n  if (u \u003c 0.4 && u + rd >= 0.4) P.flash = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05), d = (rd * cl(k[1], 0.2, 3)) / 2;\n  (P.k1 = cl(k[0], 0, 1)), (P.s4 = cl(k[3], -1, 1));\n  const nk = round(cl(k[2], 0, 4));\n  if (nk !== P.nk) {\n    if (P.nk \u003c 0) P.cue = CUES[nk].slice();\n    (P.nk = P.num = nk), (P.b = 0);\n  }\n  if ((P.b += d * BPS) >= LEN[P.num]) (P.b -= LEN[P.num]), (P.num = (P.num + 1) % 5);\n  if (input.btnPressed && input.btnPressed[0] && P.leap \u003c 0) P.leap = 0;\n  const T = script(P.num, P.b), C = P.C, x0 = C.x;\n  if (P.leap >= 0 && (leap(P, T, rd), (P.leap += rd) > 3.3)) P.leap = -1;\n  const ex = min(1, rd / 0.45), e = min(1, rd / 0.05);\n  for (const key in C) C[key] = mix(C[key], T[key], key === \"x\" ? ex : e);\n  // Steps wherever the cross travels in a number without its own.\n  const dx = abs(C.x - x0);\n  P.walk += dx / 5;\n  if (T.au && rd > 0) {\n    const lift = min(1, dx / rd / 6) * 6 * sin(PI * fr(P.walk)) ** 2;\n    floor(P.walk) & 1 ? (C.kR = max(C.kR, lift)) : (C.kL = max(C.kL, lift));\n  }\n  const A = anchors(C), n = max(1, ceil(rd * 120 - 1e-6));\n  if (rd > 0) phys(P, P.A, A, rd / n, n);\n  P.A = A;\n  for (let i = 0; i \u003c 10; i++) P.cue[i] = mix(P.cue[i], CUES[P.num][i], min(1, rd * 2.2));\n  // The follow spot keeps to the body.\n  const p = P.p;\n  (P.sx = mix(P.sx, (p[6] + p[9] + p[12] + p[15]) / 4, min(1, rd * 3.5))), (P.sy = mix(P.sy, (p[7] + p[10] + p[13] + p[16]) / 4 + 3, min(1, rd * 2.5)));\n  // The bell on the cap swings after the head.\n  const hd = head(p), B = P.bell, gx = hd.x + hd.ux * 7 - hd.uy * 6, gy = hd.y + hd.uy * 7 + hd.ux * 6 + 2;\n  (B[2] += ((gx - B[0]) * 160 - B[2] * 7) * rd), (B[3] += ((gy - B[1]) * 160 - B[3] * 7 + 60) * rd), (B[0] += B[2] * rd), (B[1] += B[3] * rd);\n  (B[0] = cl(B[0], gx - 6, gx + 6)), (B[1] = cl(B[1], gy - 6, gy + 6));\n  P.dust = P.dust.filter((s) => ((s[3] += 50 * rd), (s[0] += s[2] * rd), (s[1] = min(FLOOR + 2, s[1] + s[3] * rd)), (s[4] -= rd) > 0));\n  (P.stc[0] -= rd), (P.stc[1] -= rd), (P.flash = max(0, P.flash - rd * 1.5));\n}\n\n// The head: its middle, which way is up, how far it is turned and nodded.\nfunction head(p) {\n  const x = (p[0] + p[3]) / 2, y = (p[1] + p[4]) / 2 - 0.5, z = (p[2] + p[5]) / 2, sx = (p[6] + p[9]) / 2, sy = (p[7] + p[10]) / 2, sz = (p[8] + p[11]) / 2;\n  const l = Math.hypot(x - sx, y - sy) || 1;\n  return { x, y, ux: (x - sx) / l, uy: (y - sy) / l, yaw: atan2(-(p[5] - p[2]), p[3] - p[0]), nod: (z - sz) / 6.3 };\n}\n\n// What does not move: velvet, rail, backcloth, boards, apron.\nfunction paint(P) {\n  const A = P.alb, I = P.pi;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.05, 0.045, 0.06];\n    I[i] = -1;\n    if (y >= RAIL && y \u003c= RAIL + 3) {\n      const g = (0.8 + 0.3 * hash(floor((x + y * 7) / 11), y)) * (y === RAIL ? 1.2 : y === RAIL + 3 ? 0.6 : 1) * (0.92 + 0.08 * n);\n      c = [0.55 * g, 0.36 * g, 0.22 * g];\n    } else if (y >= CLOTH - 2 && y \u003c CLOTH) c = [0.13, 0.1, 0.08];\n    else if (y >= CLOTH && y \u003c BACK) {\n      // Painted night: stars over two rows of hills, in soft folds.\n      const hf = 86 + 4 * sin(x * 0.09 + 0.5) + 2 * sin(x * 0.27 + 1), hn = 97 + 3 * sin(x * 0.13 + 2) + 1.5 * sin(x * 0.41);\n      const cx = floor(x / 7), cy = floor(y / 8), r = hash(cx, cy + 50), sx = cx * 7 + 1 + floor(r * 5), sy = cy * 8 + 1 + floor(hash(cx + 9, cy) * 6);\n      I[i] = y >= hn ? 2 : y >= hf ? 1 : r \u003c 0.5 && y \u003c hf - 3 ? (x === sx && y === sy ? 3 : abs(x - sx) + abs(y - sy) === 1 ? 4 : 0) : 0;\n      c = [(0.8 + 0.2 * (0.5 + 0.5 * sin(x * 0.95 + 0.6 * sin(y * 0.05)))) * (0.95 + 0.1 * n), 0, 0];\n    } else if (y >= BACK && y \u003c APRON) {\n      // Boards running towards you.\n      const u = (x - 31.5) / ((y - 30) / (APRON - 30)) / 6 + 0.5, bd = floor(u), g = (0.8 + 0.2 * hash(bd, 3)) * mix(0.45, 1, cl(min(fr(u), 1 - fr(u)) * 9 - 0.3, 0, 1)) * (y > APRON - 3 ? 1.12 : 1) * (0.92 + 0.14 * hash(x, bd * 31 + floor(y / 3)));\n      c = [0.6 * g, 0.42 * g, 0.27 * g];\n    } else if (y >= APRON) c = y === APRON ? [0.4, 0.28, 0.18] : [0.14, 0.09, 0.07];\n    (A[o] = c[0]), (A[o + 1] = c[1]), (A[o + 2] = c[2]);\n  }\n}\n\nlet F, L, M, MODE, SIDE;\n// One LED of the puppet or cross: the shadow mask, or its colour in the light there.\nfunction dot(x, y, c, nx = 0, flat = 0) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const i = y * W + x, o = i * 3;\n  if (MODE === 0) return void (M[i] = 1);\n  const k = 1 - 0.2 * nx * nx + 0.4 * SIDE * nx;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = c[j] * max(flat, L[o + j]) * k;\n}\n// A capsule; the colour may be a function of how far along.\nfunction seg(x0, y0, x1, y1, r, c, flat = 0) {\n  const dx = x1 - x0, dy = y1 - y0, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = floor(min(y0, y1) - r); y \u003c= ceil(max(y0, y1) + r); y++)\n    for (let x = floor(min(x0, x1) - r); x \u003c= ceil(max(x0, x1) + r); x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / l2, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      if (ex * ex + ey * ey \u003c= r * r) dot(x, y, typeof c === \"function\" ? c(t) : c, cl(ex / r, -1, 1), flat);\n    }\n}\nconst disc = (x, y, r, c, flat) => seg(x, y, x, y, r, c, flat);\n\n// A thread: one LED wide over two columns, a faint halo, a glint that slides as it tilts.\nfunction thread(ax, ay, bx, by, gl) {\n  const n = ceil(abs(by - ay)) + 1, tilt = (bx - ax) / (by - ay || 1), g0 = 0.5 + 6 * (tilt + SIDE * 0.06);\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n, x = mix(ax, bx, t), y = round(mix(ay, by, t)), x0 = floor(x), f = x - x0;\n    if (y \u003c 0 || y >= H) continue;\n    if (MODE === 0) {\n      if (x0 >= 0 && x0 \u003c W) M[y * W + x0] = max(M[y * W + x0], 0.45);\n      continue;\n    }\n    const o = (y * W + cl(x0, 0, W - 1)) * 3, gls = gl * 150 * exp(-((((t - g0) * n) / 5) ** 2));\n    for (let e = -1; e \u003c 3; e++) {\n      const xx = x0 + e, a = e \u003c 0 ? 0.12 - 0.12 * f : e ? (e > 1 ? 0.12 * f : 0.12 + 0.88 * f) : 1 - 0.88 * f, q = (y * W + xx) * 3;\n      if (xx \u003c 0 || xx >= W) continue;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += a * (24 + 64 * L[o + j] + gls);\n    }\n  }\n}\n\nfunction puppet(P, C1, C2) {\n  const p = P.p, X = (i) => p[i * 3], Y = (i) => p[i * 3 + 1], Z = (i) => p[i * 3 + 2], tz = (Z(2) + Z(3) + Z(4) + Z(5)) / 4;\n  const stock = (t) => (floor(t * 5) & 1 ? C1 : [235, 228, 210]);\n  const limb = (a, b, c, up, low, r1, r2) => {\n    seg(X(a), Y(a), X(b), Y(b), r1, up), seg(X(b), Y(b), X(c), Y(c), r2, low);\n  };\n  const arm = (s) => (limb(2 + s, 6 + s, 8 + s, C2, C1, 1.6, 1.2), disc(X(8 + s), Y(8 + s), 1.4, FACE));\n  const leg = (s) => {\n    limb(4 + s, 10 + s, 12 + s, C2, stock, 1.8, 1.2);\n    const fx = X(12 + s), fy = Y(12 + s) + 1.2, yw = atan2(-(Z(3) - Z(2)), X(3) - X(2));\n    seg(fx - 1.2, fy, fx + 1.2 + 2.4 * sin(yw), fy, 1.1, C2.map((v) => v * 0.55)), dot(round(fx + 2.4 + 2.6 * sin(yw)), round(fy - 1), GOLD);\n  };\n  const parts = [[(Z(6) + Z(8)) / 2, () => arm(0)], [(Z(7) + Z(9)) / 2, () => arm(1)], [(Z(10) + Z(12)) / 2, () => leg(0)], [(Z(11) + Z(13)) / 2, () => leg(1)]];\n  for (const [z, f] of parts) if (z \u003c tz - 1) f();\n  // The doublet in diamonds, flaring to a hem of points, with a belt.\n  const sx = (X(2) + X(3)) / 2, sy = (Y(2) + Y(3)) / 2, hx = (X(4) + X(5)) / 2, hy = (Y(4) + Y(5)) / 2, ax = hx - sx, ay = hy - sy, al = ax * ax + ay * ay || 1;\n  let ex = X(3) - X(2) + X(5) - X(4), ey = Y(3) - Y(2) + Y(5) - Y(4);\n  const el = Math.hypot(ex, ey) || 1, hwS = max(2.5, Math.hypot(X(3) - X(2), Y(3) - Y(2)) / 2), hwH = max(2.5, Math.hypot(X(5) - X(4), Y(5) - Y(4)) * 0.62);\n  (ex /= el), (ey /= el);\n  for (let y = floor(min(sy, hy) - 6); y \u003c= ceil(max(sy, hy) + 6); y++)\n    for (let x = floor(min(sx, hx) - 7); x \u003c= ceil(max(sx, hx) + 7); x++) {\n      const v = ((x - sx) * ax + (y - sy) * ay) / al, hw = mix(hwS, hwH, v), u = ((x - sx - ax * v) * ex + (y - sy - ay * v) * ey) / hw;\n      if (v \u003c -0.05 || abs(u) > 1 || v > 1.1 + 0.12 * abs(fr(u * 2.5) - 0.5) * 2) continue;\n      const belt = v > 0.84 && v \u003c 0.94, dia = (floor(u * 1.6 + v * 3.2) + floor(u * 1.6 - v * 3.2)) & 1;\n      dot(x, y, belt ? (abs(u) \u003c 0.22 ? GOLD : [60, 40, 30]) : dia ? C1 : C2, u);\n    }\n  for (const [z, f] of parts) if (z >= tz - 1) f();\n  // The ruff, the head, the face, the cap and its bell.\n  seg(X(2), Y(2) - 1, X(3), Y(3) - 1, 1.7, (t) => (floor(t * 9) & 1 ? [250, 246, 236] : [205, 200, 192]));\n  const hd = head(p), R = 4.3, px = -hd.uy, py = hd.ux;\n  disc(hd.x, hd.y, R, FACE);\n  if (MODE && hd.nod \u003c 0.7)\n    for (const [ph, hy, c] of [[0.5, -0.4, [30, 22, 34]], [0.8, 1.2, [240, 120, 110]], [0, 2.1, [150, 40, 46]], [-0.5, -0.4, [30, 22, 34]], [-0.8, 1.2, [240, 120, 110]]]) {\n      const a = ph + hd.yaw;\n      if (cos(a) > 0.25) dot(round(hd.x + R * 0.85 * sin(a)), round(hd.y + hy + hd.nod * 3), c);\n    }\n  const b0x = hd.x + hd.ux * 3.1, b0y = hd.y + hd.uy * 3.1, b1x = hd.x + hd.ux * 8 + px, b1y = hd.y + hd.uy * 8 + py, [bx, by] = P.bell;\n  for (let i = 0, lx = b0x, ly = b0y; i \u003c= 8; i++) {\n    const t = i / 8, x = mix(mix(b0x, b1x, t), mix(b1x, bx, t), t), y = mix(mix(b0y, b1y, t), mix(b1y, by, t), t);\n    seg(lx, ly, x, y, mix(3.3, 0.8, t), C1), (lx = x), (ly = y);\n  }\n  seg(hd.x + hd.ux * 2.3 - px * 4, hd.y + hd.uy * 2.3 - py * 4, hd.x + hd.ux * 2.3 + px * 4, hd.y + hd.uy * 2.3 + py * 4, 0.9, C2);\n  disc(bx, by, 1.3, GOLD);\n}\n\n// The puppeteer's sleeves and hands, the cross and the leg bar.\nfunction cross(P) {\n  const A = P.A, [gx, gy] = A[7], sleeve = [46, 38, 60], skin = [232, 176, 140], cuff = [236, 232, 222];\n  const arm = (x0, x1, y1) => seg(x0, -3, x1, y1, 2.6, (t) => (t > 0.84 ? cuff : sleeve), 0.32);\n  seg(A[5][0] - 1.5, A[5][1], A[6][0] + 1.5, A[6][1], 0.7, WOOD, 0.35);\n  seg(gx, gy, A[4][0], A[4][1], 0.9, WOOD, 0.35), seg(A[2][0], A[2][1], A[3][0], A[3][1], 0.8, WOOD, 0.35);\n  for (let j = 0; j \u003c 7; j++) dot(round(A[j][0]), round(A[j][1]), [220, 220, 230], 0, 0.5);\n  arm(gx + 17, gx + 1.5, gy - 1.5), disc(gx + 0.5, gy - 0.5, 2.2, skin, 0.4);\n  arm(A[5][0] - 22, A[5][0] - 2.5, A[5][1] - 1), disc(A[5][0] - 2, A[5][1] - 0.5, 2, skin, 0.4);\n}\n\nfunction stage(P, pal) {\n  const [wr, wg, wb, sr0, sg0, sb0, rad0, foot, pin, lamp] = P.cue, s = P.s4, A = P.alb, I = P.pi, p = P.p;\n  const fl = 1 + 0.5 * P.flash, rad = rad0 + 7 * P.flash, S = [sr0 * fl, sg0 * fl, sb0 * fl], WS = [wr, wg, wb];\n  const px = P.sx - s * 11, py = P.sy, rx = rad * (1 + 0.45 * abs(s)), ry = rad * 1.35, sdx = -s * 15, fx = (p[36] + p[39]) / 2, pinX = P.sx;\n  const lift = [0, 1].map((j) => 1 - sm(0, 8, FLOOR - p[37 + j * 3]));\n  for (let y = 0; y \u003c H; y++) {\n    const ft = y \u003c APRON ? foot * exp((y - APRON) / 14) : 0, wash = y \u003c CLOTH - 2 ? (y >= RAIL && y \u003c= RAIL + 3 ? 0.3 : 0.08) : 1, cw = 2 + (y + 12) * 0.085;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = (x - px) / rx, dy = (y - py) / ry, pool = 1 - sm(0.84, 1, sqrt(dx * dx + dy * dy));\n      const lm = lamp * (1 / (1 + ((x - 4.5) ** 2 + (y - 10) ** 2) / 260) + 1 / (1 + ((x - 59.5) ** 2 + (y - 10) ** 2) / 260));\n      let cone = 0;\n      if (pin > 0.01) cone = y >= BACK ? pin * (1 - sm(0.7, 1, sqrt(((x - pinX) / 12) ** 2 + ((y - FLOOR - 1) / 4) ** 2))) : pin * (1 - sm(0.6, 1, abs(x - pinX) / cw));\n      for (let j = 0; j \u003c 3; j++) L[o + j] = wash * WS[j] + pool * S[j] + ft * FT[j] + lm * LM[j] + cone * PK[j];\n      // The shadow stands up from the feet, larger, away from the spot.\n      let sh = 0, k = 1;\n      if (y >= CLOTH && y \u003c APRON && pool > 0) {\n        const mx = round(fx + (x - fx - sdx) / 1.12), my = round(FLOOR + (y - FLOOR + 3) / 1.12);\n        if (mx >= 0 && mx \u003c W && my >= 0 && my \u003c H) sh = M[my * W + mx] * pool * 0.8;\n      }\n      if (y > BACK && y \u003c APRON) for (let j = 0; j \u003c 2; j++) k *= 1 - 0.6 * lift[j] * exp(-1.5 * (((x - p[36 + j * 3]) / 3.5) ** 2 + ((y - FLOOR - 1.5) / 1.3) ** 2));\n      const c = I[i] >= 0 ? pal[I[i]] : null, f = c ? A[o] : 1, cf = c ? 0.8 * cone : 0;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = (c ? c[j] : A[o + j]) * f * k * (L[o + j] - sh * S[j] - cf * PK[j]) * 255;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  [F, L, M, SIDE] = [P.f, P.lt, P.m, P.s4];\n  const h = 0.36 + P.k1, hc = 0.61 + 0.3 * sin(TAU * P.k1), A = P.A, p = P.p;\n  const C1 = hsv(h, 0.8, 0.8).map((v) => v * 255), C2 = hsv(h + 0.06, 0.75, 0.42).map((v) => v * 255);\n  const sky = hsv(hc, 0.62, 0.34), star = [0.95, 0.78, 0.4], pal = [sky, hsv(hc + 0.06, 0.55, 0.46), hsv(hc + 0.12, 0.6, 0.58), star, sky.map((v, j) => mix(v, star[j], 0.4))];\n  const threads = (from, to) => {\n    for (let s = from; s \u003c to; s++) {\n      const m = mid(p, STR[s]), side = s \u003c 2 ? (s ? 2 : -2) * cos(head(p).yaw) : 0;\n      thread(A[s][0], A[s][1], m[0] + side, m[1] - (s \u003c 2 ? 1 : 0), s === 4 ? 0.4 : 1);\n    }\n  };\n  // The shadow first: the puppet and its threads as a mask.\n  M.fill(0), (MODE = 0), threads(0, 7), puppet(P, C1, C2);\n  (MODE = 1), stage(P, pal);\n  threads(0, 7), puppet(P, C1, C2), cross(P);\n  // Dust from the stamps, the haze in the pin beam, the footlights.\n  for (const [x, y, , , l] of P.dust) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) F[o + j] += [190, 160, 130][j] * l * 0.6 * max(0.4, L[o + j]);\n  }\n  const pin = P.cue[8];\n  if (pin > 0.01)\n    for (let y = 0; y \u003c BACK; y++) {\n      const cw = 2 + (y + 12) * 0.085;\n      for (let x = 0; x \u003c W; x++) {\n        const c = pin * 0.09 * (1 - sm(0.6, 1, abs(x - P.sx) / cw)) * 255;\n        for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += c * PK[j];\n      }\n    }\n  // The clip lamps on the rail and the footlights.\n  for (const x of [4.5, 59.5]) {\n    seg(x - 2, 7.5, x + 2, 7.5, 1.2, [40, 80, 58], 0.5), seg(x - 0.5, 9.2, x + 0.5, 9.2, 0.6, [255, 226, 170], P.cue[9]);\n    for (let i = -3; i \u003c 4; i++) for (let j = 0; j \u003c 3; j++) F[(10 * W + round(x + i)) * 3 + j] += (80 * P.cue[9] * LM[j]) / (1 + i * i);\n  }\n  const fb = min(1, P.cue[7] * 1.2 + 0.15);\n  for (const x of [6, 19, 32, 45, 57])\n    for (let i = -2; i \u003c= 3; i++) {\n      const a = i === 0 || i === 1 ? fb : fb * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[(125 * W + x + i) * 3 + j] += 255 * a * FT[j];\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Costume","min":0,"max":1,"about":"The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald."},{"name":"Speed","min":0.2,"max":3,"about":"The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower."},{"name":"Number","min":0,"max":4,"about":"The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order."},{"name":"Spot","min":-1,"max":1,"about":"Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side."}],"start":[0,2,0,0.06],"measures":{"motion":0.7728,"detail":0.0499,"edges":0.328,"complexity":1.7055,"coverage":0.7031,"colour":0.18,"drift":0.1687},"knobResponse":[0.0905,0.1199,0.1924,0.0547]},{"slug":"maze","title":"Maze","family":"algo","round":2,"note":"미로를 한 칸씩 파고 나면 입구에서 너비 우선 물결이 퍼져 복도마다 거리만큼 색을 입혀요. 가장 짧은 길이 밝게 그어지고, 미로가 부서진 자리에 다음 미로가 파여요.","idea":"A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.","buttons":"K1 tap crumbles the maze and carves a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-maze","type":"code","name":"maze","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it."},{"name":"Speed","min":0,"max":4,"about":"Carving, flood and trace together, from about 50 carving steps a second to about 1100."},{"name":"Cell","min":2,"max":4,"about":"Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25."},{"name":"Carver","min":0,"max":3,"about":"0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row."}],"start":[0,2,2,0.06],"measures":{"motion":0.0785,"detail":0.1747,"edges":0.9998,"complexity":0.1404,"coverage":0.6288,"colour":0.2889,"drift":0.1789},"knobResponse":[0.1257,0.2208,0.2744,0.1999]},{"slug":"meander","title":"Meander","family":"line","round":30,"note":"패널 한가운데 세로로 난 길을 12번에서 32번 건너는 닫힌 곡선 하나예요. 한쪽 아치들이 길 위로 누웠다가 새 짝으로 펴져도 곡선은 늘 하나로 닫혀요.","idea":"A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.","buttons":"K1 tap folds both sides at once and opens a fresh meander of the same order.","code":"// ===== Patternflow pattern =====\n// Title:   Meander\n// Family:  line\n// Idea:    A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: meanders (Vladimir Arnold, 1988), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1\n//\n// Knob 1: Hue. Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse.\n// Knob 2: Speed. At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again.\n// Knob 3: Crossings. How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander.\n// Knob 4: Hollow. At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left.\n// Buttons: K1 tap folds both sides at once and opens a fresh meander of the same order.\n\n// The road runs down the middle, between columns 31 and 32. The 2n crossings\n// sit evenly on it from row 2 to row 126, 4 LEDs apart at n = 16, and the\n// widest arc on a side reaches 28.5 LEDs out, so its line stays off the wall.\n// A meander of order n is a pair of non-crossing matchings of those points,\n// arcs on the left and arcs on the right, that join into one loop. Arnold\n// asked how many there are: 1, 2, 8, 42, 262, 1828, ..., each about ten\n// times the last by n = 16 and the ratio creeping up towards 12.26. No\n// formula is known.\nconst W = 64, H = 128, NP = W * H, MID = 32, WMAX = 28.5, TOP = 2, SPAN = 124;\nconst { min, max, floor, ceil, sqrt, cos, acos, abs, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n// The arc's distance from the road: its semicircle r, cut off softly at the\n// width w its nesting gives it. Both grow from an arc to any arc round it,\n// so nested arcs never touch.\nconst smin = (w, r) => (w \u003c= 0 || r \u003c= 0 ? 0 : (w * r) / sqrt(sqrt(w * w * w * w + r * r * r * r)));\n\n// A non-crossing perfect matching of 2n points as a uniform random Dyck word,\n// by the cycle lemma: shuffle n opens and n + 1 closes, start just after the\n// first lowest point of the walk, drop the last close.\nconst WALK = new Int8Array(33);\nfunction dyck(n, P) {\n  const m = 2 * n + 1, a = WALK;\n  for (let i = 0; i \u003c m; i++) a[i] = i \u003c n ? 1 : -1;\n  for (let i = m - 1; i > 0; i--) {\n    const j = floor(random() * (i + 1)), t = a[i];\n    (a[i] = a[j]), (a[j] = t);\n  }\n  let s = 0, lo = 0, at = 0;\n  for (let i = 0; i \u003c m; i++) if ((s += a[i]) \u003c lo) (lo = s), (at = i);\n  const st = [];\n  for (let k = 0; k \u003c 2 * n; k++) {\n    if (a[(at + 1 + k) % m] > 0) st.push(k);\n    else {\n      const o = st.pop();\n      (P[o] = k), (P[k] = o);\n    }\n  }\n}\n\n// Left arcs and right arcs together are one closed curve when walking left,\n// right, left, ... from point 0 meets every point before it comes back.\nfunction oneLoop(L, R, n2) {\n  let i = 0, c = 0;\n  do (i = R[L[i]]), (c += 2);\n  while (i !== 0 && c \u003c= n2);\n  return c === n2;\n}\n\n// Each arc's height: 0 when no arc lies inside it, else one more than the\n// highest arc directly inside. It sets the arc's width, so a nest of any\n// depth fits between the road and the wall.\nfunction heights(P, n2, h) {\n  const st = new Int8Array(n2 + 1);\n  let sp = 0;\n  st[0] = -1;\n  for (let i = 0; i \u003c n2; i++) {\n    if (P[i] > i) st[++sp] = -1;\n    else {\n      const v = st[sp--] + 1;\n      h[i] = h[P[i]] = v;\n      if (v > st[sp]) st[sp] = v;\n    }\n  }\n  return st[0];\n}\n\nfunction dress(n, L, R) {\n  const hL = new Int8Array(2 * n), hR = new Int8Array(2 * n);\n  return { n, L, R, hL, hR, HL: heights(L, 2 * n, hL), HR: heights(R, 2 * n, hR) };\n}\n\n// A uniform random meander of order n: draw both sides until they close into\n// one loop. About one pair in 10 does at n = 6 and one in 210 at n = 16.\nfunction meander(n) {\n  for (; n > 1; n--) {\n    const L = new Int8Array(2 * n), R = new Int8Array(2 * n);\n    for (let t = 0; t \u003c 4000; t++) {\n      dyck(n, L), dyck(n, R);\n      if (oneLoop(L, R, 2 * n)) return dress(n, L, R);\n    }\n  }\n  return dress(1, new Int8Array([1, 0]), new Int8Array([1, 0]));\n}\n\n// The same meander with side X drawn again, the other side kept.\nfunction reside(M, X) {\n  const n = M.n, Q = new Int8Array(2 * n);\n  for (let t = 0; t \u003c 4000; t++) {\n    dyck(n, Q);\n    if (X ? oneLoop(M.L, Q, 2 * n) : oneLoop(Q, M.R, 2 * n)) return X ? dress(n, M.L, Q) : dress(n, Q, M.R);\n  }\n  return M;\n}\n\nexport function setup(params) {\n  params.s = {\n    M: null, n2: 0, ph: 0, side: 2, u: 0, next: 0, both: false, flow: 0, ck: 0, cu: 0,\n    // the loop, arc by arc: from point, to point, side (0 left, 1 right)\n    AF: new Int8Array(32), AT: new Int8Array(32), AS: new Int8Array(32),\n    // each kept arc's place on the loop before the last swap, at its start and end\n    OS: new Float32Array(32), OE: new Float32Array(32), OK: new Uint8Array(32), old: 0,\n    len: new Float32Array(32), cum: new Float32Array(33),\n    gp: new Float32Array(32 * 6), D: new Float32Array(NP), LA: new Int8Array(NP), LT: new Float32Array(NP),\n    hue: 0, speed: 2, hollow: 0.06, nT: 6,\n  };\n}\n\n// Walk the loop from point a, first along side s.\nfunction order(P, a, s) {\n  const M = P.M;\n  for (let k = 0; k \u003c P.n2; k++) {\n    const b = s ? M.R[a] : M.L[a];\n    (P.AF[k] = a), (P.AT[k] = b), (P.AS[k] = s);\n    (a = b), (s ^= 1);\n  }\n}\n\n// Swap in new arcs while the side is flat on the road. A one-side swap keeps\n// the pulse on the kept arc it is on, or the next one, and lets every kept\n// arc carry its old colours over into the new loop's while the side opens.\nfunction swap(P) {\n  const X = P.side;\n  if (X === 2) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), floor(random() * 2));\n    (P.ck = 0), (P.cu = 0), (P.old = 0), (P.side = 2);\n    return;\n  }\n  const Q = 1 - X, n2 = P.n2, L = P.cum[n2] || 1;\n  const os = new Float32Array(n2), oe = new Float32Array(n2);\n  for (let k = 0; k \u003c n2; k++)\n    if (P.AS[k] === Q) {\n      const i = P.AF[k], j = P.AT[k];\n      (os[i] = P.cum[k] / L), (oe[i] = P.cum[k + 1] / L);\n      (os[j] = P.cum[k + 1] / L), (oe[j] = P.cum[k] / L);\n    }\n  let a = P.AF[P.ck];\n  if (P.AS[P.ck] !== Q) (a = P.AT[P.ck]), (P.cu = 0);\n  P.M = reside(P.M, X);\n  order(P, a, Q);\n  P.ck = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    P.OK[k] = P.AS[k] === Q ? 1 : 0;\n    (P.OS[k] = os[P.AF[k]]), (P.OE[k] = oe[P.AF[k]]);\n  }\n  P.old = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nT = cl(round(cl(k[2], 12, 32) / 2), 6, 16);\n  P.hollow = cl(k[3], 0, 1);\n  if (!P.M) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), 0);\n    (P.ph = 2), (P.side = 2), (P.u = 0);\n  }\n  const s = P.speed;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.both = true;\n    if (P.ph === 0) P.u = 1;\n  }\n  // 0 hold, 1 close, 2 open; in clock units that run at Speed a second.\n  if (P.ph === 0) {\n    P.u += (d * s) / 7;\n    if (P.M.n !== P.nT) P.u = 1;\n    if (P.u >= 1) {\n      P.side = P.both || P.M.n !== P.nT ? 2 : P.next;\n      if (P.side \u003c 2) P.next ^= 1;\n      (P.both = false), (P.ph = 1), (P.u = 0);\n    }\n  } else if (P.ph === 1) {\n    P.u += (d * s) / 1.2;\n    if (P.u >= 1) swap(P), (P.ph = 2), (P.u = 0);\n  } else {\n    P.u += (d * s) / 1.8;\n    if (P.u >= 1) (P.ph = 0), (P.u = 0), (P.old = 0);\n  }\n  P.flow += d * s * 0.04;\n  // The pulse: 40 LEDs of curve a second per unit of Speed.\n  P.cu += (d * s * 40) / max(4, P.len[P.ck]);\n  while (P.cu >= 1) (P.cu -= 1), (P.ck = (P.ck + 1) % P.n2);\n}\n\n// The colour wheel once round the loop, 1024 steps.\nconst LUT = new Float32Array(1024 * 3);\nfor (let i = 0; i \u003c 1024; i++) {\n  const h = (i / 1024) * 6, j = floor(h), f = h - j;\n  const c = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][j];\n  for (let q = 0; q \u003c 3; q++) LUT[i * 3 + q] = c[q] ** 0.9;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.M) return;\n  const M = P.M, n2 = P.n2, sp = SPAN / (n2 - 1), g = P.gp;\n  const open = P.ph === 0 ? 1 : P.ph === 1 ? 1 - ease(P.u) : ease(P.u);\n  const sL = P.side === 1 ? 1 : open, sR = P.side === 0 ? 1 : open;\n  const mix = P.old ? ease(P.ph === 2 ? P.u : 1) : 1;\n  // Each arc: top and bottom y, centre, radius, width, side sign. While a\n  // side folds, its arcs all lose width at one rate, so the innermost lie flat\n  // first and the nest never crosses itself; it opens outermost first.\n  for (let k = 0; k \u003c n2; k++) {\n    const a = P.AF[k], b = P.AT[k], side = P.AS[k];\n    const h = side ? M.hR[a] : M.hL[a], Hs = side ? M.HR : M.HL, so = side ? sR : sL;\n    const ya = TOP + a * sp, yb = TOP + b * sp, o = k * 6;\n    (g[o] = min(ya, yb)), (g[o + 1] = max(ya, yb));\n    (g[o + 2] = (ya + yb) / 2), (g[o + 3] = abs(yb - ya) / 2);\n    g[o + 4] = (WMAX / (Hs + 1)) * cl(so * (Hs + 1) - (Hs - h), 0, h + 1);\n    g[o + 5] = side ? 1 : -1;\n  }\n  // The curve: sample every arc in loop order, keep for each LED the nearest\n  // sample, which arc it was on and how far along.\n  const D = P.D, LA = P.LA, LT = P.LT;\n  D.fill(9);\n  P.cum[0] = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    const o = k * 6, c = g[o + 2], R = g[o + 3], w = g[o + 4], sg = g[o + 5];\n    const down = P.AF[k] \u003c P.AT[k], ns = max(4, ceil((PI * R) / 0.4));\n    let px = 0, py = 0, len = 0;\n    for (let j = 0; j \u003c= ns; j++) {\n      const t = (PI * j) / ns, X = MID + sg * smin(w, R * Math.sin(t)), Y = c - R * cos(t);\n      if (j) len += sqrt((X - px) ** 2 + (Y - py) ** 2);\n      (px = X), (py = Y);\n      const tau = down ? j / ns : 1 - j / ns;\n      for (let yy = ceil(Y - 2.3), y1 = floor(Y + 1.3); yy \u003c= y1; yy++) {\n        if (yy \u003c 0 || yy >= H) continue;\n        const ey = yy + 0.5 - Y;\n        for (let xx = ceil(X - 2.3), x1 = floor(X + 1.3); xx \u003c= x1; xx++) {\n          if (xx \u003c 0 || xx >= W) continue;\n          const ex = xx + 0.5 - X, dd = ex * ex + ey * ey, p = yy * W + xx;\n          if (dd \u003c D[p]) (D[p] = dd), (LA[p] = k), (LT[p] = tau);\n        }\n      }\n    }\n    P.len[k] = len;\n    P.cum[k + 1] = P.cum[k] + len;\n  }\n  const Ltot = P.cum[n2] || 1, head = P.cum[P.ck] + P.cu * P.len[P.ck];\n  // Where on the loop a point is, 0..1, with a kept arc's old place blended\n  // into its new one while its side opens.\n  const at = (k, tau) => {\n    let f = (P.cum[k] + tau * P.len[k]) / Ltot;\n    if (mix \u003c 1 && P.OK[k]) {\n      let e = P.OS[k] + tau * (P.OE[k] - P.OS[k]) - f;\n      e -= round(e);\n      f += (1 - mix) * e;\n    }\n    return f;\n  };\n  // The pulse's head, for the glow round it.\n  const ho = P.ck * 6, hr = g[ho + 3], ht = PI * (P.AF[P.ck] \u003c P.AT[P.ck] ? P.cu : 1 - P.cu);\n  const hx = MID + g[ho + 5] * smin(g[ho + 4], hr * Math.sin(ht)), hy = g[ho + 2] - hr * cos(ht);\n  const hue0 = P.hue + 0.55 - P.flow, fillV = 255 * 0.97 * (1 - P.hollow) ** 1.2;\n  const lineS = 0.5 + 0.35 * P.hollow;\n  // The inside by the even-odd rule, row by row: a LED is inside when a ray\n  // from it to the right wall crosses the curve an odd number of times. The\n  // arcs a row meets on one side are nested, so the band a LED sits in takes\n  // the colour of the arc just outside it, at this row.\n  const fl = new Float32Array(16), ka = new Int8Array(16), ta = new Float32Array(16);\n  const fr = new Float32Array(16), kb = new Int8Array(16), tb = new Float32Array(16);\n  for (let yy = 0; yy \u003c H; yy++) {\n    const yc = yy + 0.5;\n    let nl = 0, nr = 0;\n    for (let k = 0; k \u003c n2; k++) {\n      const o = k * 6;\n      if (!(g[o] \u003c yc && yc \u003c g[o + 1])) continue;\n      const c = g[o + 2], R = g[o + 3], dy = yc - c, f = smin(g[o + 4], sqrt(R * R - dy * dy));\n      const t = acos(cl(-dy / R, -1, 1)) / PI, tau = P.AF[k] \u003c P.AT[k] ? t : 1 - t;\n      const A = g[o + 5] > 0 ? fr : fl, KK = g[o + 5] > 0 ? kb : ka, T = g[o + 5] > 0 ? tb : ta;\n      let i = g[o + 5] > 0 ? nr++ : nl++;\n      while (i > 0 && A[i - 1] > f) (A[i] = A[i - 1]), (KK[i] = KK[i - 1]), (T[i] = T[i - 1]), i--;\n      (A[i] = f), (KK[i] = k), (T[i] = tau);\n    }\n    for (let half = 0; half \u003c 2; half++) {\n      const A = half ? fr : fl, KK = half ? kb : ka, T = half ? tb : ta, n = half ? nr : nl;\n      let i = 0;\n      for (let q = 0; q \u003c 32; q++) {\n        const xx = half ? MID + q : MID - 1 - q, dist = q + 0.5, p = yy * W + xx;\n        while (i \u003c n && A[i] \u003c dist) i++;\n        let r = 0, gg = 0, b = 0;\n        const inside = half ? (nr - i) & 1 : (i + nr) & 1;\n        if (inside && fillV > 0) {\n          const f = at(KK[i], T[i]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          (r = LUT[ix] * fillV), (gg = LUT[ix + 1] * fillV), (b = LUT[ix + 2] * fillV);\n        }\n        // The road, a faint line on the dark and a darker one through the colour.\n        if (q === 0) {\n          if (inside && fillV > 0) (r *= 0.6), (gg *= 0.6), (b *= 0.6);\n          else (r += 34), (gg += 36), (b += 44);\n        }\n        const dl = sqrt(D[p]);\n        if (dl \u003c 2.3) {\n          const k = LA[p], f = at(k, LT[p]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          let behind = (head - (P.cum[k] + LT[p] * P.len[k])) % Ltot;\n          if (behind \u003c 0) behind += Ltot;\n          const pulse = exp(-behind / 24) + (behind > Ltot - 3 ? (behind - Ltot + 3) / 3 : 0);\n          const I = cl(1.75 - dl * 1.1, 0, 1), J = cl(2 - dl * 0.75, 0, 1) * pulse, wh = 1 - lineS;\n          let lr = 255 * (wh + lineS * LUT[ix]), lg = 255 * (wh + lineS * LUT[ix + 1]), lb = 255 * (wh + lineS * LUT[ix + 2]);\n          const pv = min(1, pulse);\n          (lr += (255 - lr) * pv), (lg += (250 - lg) * pv), (lb += (235 - lb) * pv);\n          const m = max(I, J);\n          (r += (lr - r) * m), (gg += (lg - gg) * m), (b += (lb - b) * m);\n        }\n        const ex = xx + 0.5 - hx, ey = yc - hy, e2 = ex * ex + ey * ey;\n        if (e2 \u003c 30) {\n          const gl = 0.9 * exp(-e2 / 6);\n          (r += (255 - r) * gl), (gg += (250 - gg) * gl), (b += (235 - b) * gl);\n        }\n        display.setPixel(xx, yy, min(255, r), min(255, gg), min(255, b));\n      }\n    }\n  }\n}\n","layer":{"id":"layer-meander","type":"code","name":"meander","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Meander\n// Family:  line\n// Idea:    A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: meanders (Vladimir Arnold, 1988), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1\n//\n// Knob 1: Hue. Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse.\n// Knob 2: Speed. At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again.\n// Knob 3: Crossings. How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander.\n// Knob 4: Hollow. At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left.\n// Buttons: K1 tap folds both sides at once and opens a fresh meander of the same order.\n\n// The road runs down the middle, between columns 31 and 32. The 2n crossings\n// sit evenly on it from row 2 to row 126, 4 LEDs apart at n = 16, and the\n// widest arc on a side reaches 28.5 LEDs out, so its line stays off the wall.\n// A meander of order n is a pair of non-crossing matchings of those points,\n// arcs on the left and arcs on the right, that join into one loop. Arnold\n// asked how many there are: 1, 2, 8, 42, 262, 1828, ..., each about ten\n// times the last by n = 16 and the ratio creeping up towards 12.26. No\n// formula is known.\nconst W = 64, H = 128, NP = W * H, MID = 32, WMAX = 28.5, TOP = 2, SPAN = 124;\nconst { min, max, floor, ceil, sqrt, cos, acos, abs, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n// The arc's distance from the road: its semicircle r, cut off softly at the\n// width w its nesting gives it. Both grow from an arc to any arc round it,\n// so nested arcs never touch.\nconst smin = (w, r) => (w \u003c= 0 || r \u003c= 0 ? 0 : (w * r) / sqrt(sqrt(w * w * w * w + r * r * r * r)));\n\n// A non-crossing perfect matching of 2n points as a uniform random Dyck word,\n// by the cycle lemma: shuffle n opens and n + 1 closes, start just after the\n// first lowest point of the walk, drop the last close.\nconst WALK = new Int8Array(33);\nfunction dyck(n, P) {\n  const m = 2 * n + 1, a = WALK;\n  for (let i = 0; i \u003c m; i++) a[i] = i \u003c n ? 1 : -1;\n  for (let i = m - 1; i > 0; i--) {\n    const j = floor(random() * (i + 1)), t = a[i];\n    (a[i] = a[j]), (a[j] = t);\n  }\n  let s = 0, lo = 0, at = 0;\n  for (let i = 0; i \u003c m; i++) if ((s += a[i]) \u003c lo) (lo = s), (at = i);\n  const st = [];\n  for (let k = 0; k \u003c 2 * n; k++) {\n    if (a[(at + 1 + k) % m] > 0) st.push(k);\n    else {\n      const o = st.pop();\n      (P[o] = k), (P[k] = o);\n    }\n  }\n}\n\n// Left arcs and right arcs together are one closed curve when walking left,\n// right, left, ... from point 0 meets every point before it comes back.\nfunction oneLoop(L, R, n2) {\n  let i = 0, c = 0;\n  do (i = R[L[i]]), (c += 2);\n  while (i !== 0 && c \u003c= n2);\n  return c === n2;\n}\n\n// Each arc's height: 0 when no arc lies inside it, else one more than the\n// highest arc directly inside. It sets the arc's width, so a nest of any\n// depth fits between the road and the wall.\nfunction heights(P, n2, h) {\n  const st = new Int8Array(n2 + 1);\n  let sp = 0;\n  st[0] = -1;\n  for (let i = 0; i \u003c n2; i++) {\n    if (P[i] > i) st[++sp] = -1;\n    else {\n      const v = st[sp--] + 1;\n      h[i] = h[P[i]] = v;\n      if (v > st[sp]) st[sp] = v;\n    }\n  }\n  return st[0];\n}\n\nfunction dress(n, L, R) {\n  const hL = new Int8Array(2 * n), hR = new Int8Array(2 * n);\n  return { n, L, R, hL, hR, HL: heights(L, 2 * n, hL), HR: heights(R, 2 * n, hR) };\n}\n\n// A uniform random meander of order n: draw both sides until they close into\n// one loop. About one pair in 10 does at n = 6 and one in 210 at n = 16.\nfunction meander(n) {\n  for (; n > 1; n--) {\n    const L = new Int8Array(2 * n), R = new Int8Array(2 * n);\n    for (let t = 0; t \u003c 4000; t++) {\n      dyck(n, L), dyck(n, R);\n      if (oneLoop(L, R, 2 * n)) return dress(n, L, R);\n    }\n  }\n  return dress(1, new Int8Array([1, 0]), new Int8Array([1, 0]));\n}\n\n// The same meander with side X drawn again, the other side kept.\nfunction reside(M, X) {\n  const n = M.n, Q = new Int8Array(2 * n);\n  for (let t = 0; t \u003c 4000; t++) {\n    dyck(n, Q);\n    if (X ? oneLoop(M.L, Q, 2 * n) : oneLoop(Q, M.R, 2 * n)) return X ? dress(n, M.L, Q) : dress(n, Q, M.R);\n  }\n  return M;\n}\n\nexport function setup(params) {\n  params.s = {\n    M: null, n2: 0, ph: 0, side: 2, u: 0, next: 0, both: false, flow: 0, ck: 0, cu: 0,\n    // the loop, arc by arc: from point, to point, side (0 left, 1 right)\n    AF: new Int8Array(32), AT: new Int8Array(32), AS: new Int8Array(32),\n    // each kept arc's place on the loop before the last swap, at its start and end\n    OS: new Float32Array(32), OE: new Float32Array(32), OK: new Uint8Array(32), old: 0,\n    len: new Float32Array(32), cum: new Float32Array(33),\n    gp: new Float32Array(32 * 6), D: new Float32Array(NP), LA: new Int8Array(NP), LT: new Float32Array(NP),\n    hue: 0, speed: 2, hollow: 0.06, nT: 6,\n  };\n}\n\n// Walk the loop from point a, first along side s.\nfunction order(P, a, s) {\n  const M = P.M;\n  for (let k = 0; k \u003c P.n2; k++) {\n    const b = s ? M.R[a] : M.L[a];\n    (P.AF[k] = a), (P.AT[k] = b), (P.AS[k] = s);\n    (a = b), (s ^= 1);\n  }\n}\n\n// Swap in new arcs while the side is flat on the road. A one-side swap keeps\n// the pulse on the kept arc it is on, or the next one, and lets every kept\n// arc carry its old colours over into the new loop's while the side opens.\nfunction swap(P) {\n  const X = P.side;\n  if (X === 2) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), floor(random() * 2));\n    (P.ck = 0), (P.cu = 0), (P.old = 0), (P.side = 2);\n    return;\n  }\n  const Q = 1 - X, n2 = P.n2, L = P.cum[n2] || 1;\n  const os = new Float32Array(n2), oe = new Float32Array(n2);\n  for (let k = 0; k \u003c n2; k++)\n    if (P.AS[k] === Q) {\n      const i = P.AF[k], j = P.AT[k];\n      (os[i] = P.cum[k] / L), (oe[i] = P.cum[k + 1] / L);\n      (os[j] = P.cum[k + 1] / L), (oe[j] = P.cum[k] / L);\n    }\n  let a = P.AF[P.ck];\n  if (P.AS[P.ck] !== Q) (a = P.AT[P.ck]), (P.cu = 0);\n  P.M = reside(P.M, X);\n  order(P, a, Q);\n  P.ck = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    P.OK[k] = P.AS[k] === Q ? 1 : 0;\n    (P.OS[k] = os[P.AF[k]]), (P.OE[k] = oe[P.AF[k]]);\n  }\n  P.old = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nT = cl(round(cl(k[2], 12, 32) / 2), 6, 16);\n  P.hollow = cl(k[3], 0, 1);\n  if (!P.M) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), 0);\n    (P.ph = 2), (P.side = 2), (P.u = 0);\n  }\n  const s = P.speed;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.both = true;\n    if (P.ph === 0) P.u = 1;\n  }\n  // 0 hold, 1 close, 2 open; in clock units that run at Speed a second.\n  if (P.ph === 0) {\n    P.u += (d * s) / 7;\n    if (P.M.n !== P.nT) P.u = 1;\n    if (P.u >= 1) {\n      P.side = P.both || P.M.n !== P.nT ? 2 : P.next;\n      if (P.side \u003c 2) P.next ^= 1;\n      (P.both = false), (P.ph = 1), (P.u = 0);\n    }\n  } else if (P.ph === 1) {\n    P.u += (d * s) / 1.2;\n    if (P.u >= 1) swap(P), (P.ph = 2), (P.u = 0);\n  } else {\n    P.u += (d * s) / 1.8;\n    if (P.u >= 1) (P.ph = 0), (P.u = 0), (P.old = 0);\n  }\n  P.flow += d * s * 0.04;\n  // The pulse: 40 LEDs of curve a second per unit of Speed.\n  P.cu += (d * s * 40) / max(4, P.len[P.ck]);\n  while (P.cu >= 1) (P.cu -= 1), (P.ck = (P.ck + 1) % P.n2);\n}\n\n// The colour wheel once round the loop, 1024 steps.\nconst LUT = new Float32Array(1024 * 3);\nfor (let i = 0; i \u003c 1024; i++) {\n  const h = (i / 1024) * 6, j = floor(h), f = h - j;\n  const c = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][j];\n  for (let q = 0; q \u003c 3; q++) LUT[i * 3 + q] = c[q] ** 0.9;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.M) return;\n  const M = P.M, n2 = P.n2, sp = SPAN / (n2 - 1), g = P.gp;\n  const open = P.ph === 0 ? 1 : P.ph === 1 ? 1 - ease(P.u) : ease(P.u);\n  const sL = P.side === 1 ? 1 : open, sR = P.side === 0 ? 1 : open;\n  const mix = P.old ? ease(P.ph === 2 ? P.u : 1) : 1;\n  // Each arc: top and bottom y, centre, radius, width, side sign. While a\n  // side folds, its arcs all lose width at one rate, so the innermost lie flat\n  // first and the nest never crosses itself; it opens outermost first.\n  for (let k = 0; k \u003c n2; k++) {\n    const a = P.AF[k], b = P.AT[k], side = P.AS[k];\n    const h = side ? M.hR[a] : M.hL[a], Hs = side ? M.HR : M.HL, so = side ? sR : sL;\n    const ya = TOP + a * sp, yb = TOP + b * sp, o = k * 6;\n    (g[o] = min(ya, yb)), (g[o + 1] = max(ya, yb));\n    (g[o + 2] = (ya + yb) / 2), (g[o + 3] = abs(yb - ya) / 2);\n    g[o + 4] = (WMAX / (Hs + 1)) * cl(so * (Hs + 1) - (Hs - h), 0, h + 1);\n    g[o + 5] = side ? 1 : -1;\n  }\n  // The curve: sample every arc in loop order, keep for each LED the nearest\n  // sample, which arc it was on and how far along.\n  const D = P.D, LA = P.LA, LT = P.LT;\n  D.fill(9);\n  P.cum[0] = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    const o = k * 6, c = g[o + 2], R = g[o + 3], w = g[o + 4], sg = g[o + 5];\n    const down = P.AF[k] \u003c P.AT[k], ns = max(4, ceil((PI * R) / 0.4));\n    let px = 0, py = 0, len = 0;\n    for (let j = 0; j \u003c= ns; j++) {\n      const t = (PI * j) / ns, X = MID + sg * smin(w, R * Math.sin(t)), Y = c - R * cos(t);\n      if (j) len += sqrt((X - px) ** 2 + (Y - py) ** 2);\n      (px = X), (py = Y);\n      const tau = down ? j / ns : 1 - j / ns;\n      for (let yy = ceil(Y - 2.3), y1 = floor(Y + 1.3); yy \u003c= y1; yy++) {\n        if (yy \u003c 0 || yy >= H) continue;\n        const ey = yy + 0.5 - Y;\n        for (let xx = ceil(X - 2.3), x1 = floor(X + 1.3); xx \u003c= x1; xx++) {\n          if (xx \u003c 0 || xx >= W) continue;\n          const ex = xx + 0.5 - X, dd = ex * ex + ey * ey, p = yy * W + xx;\n          if (dd \u003c D[p]) (D[p] = dd), (LA[p] = k), (LT[p] = tau);\n        }\n      }\n    }\n    P.len[k] = len;\n    P.cum[k + 1] = P.cum[k] + len;\n  }\n  const Ltot = P.cum[n2] || 1, head = P.cum[P.ck] + P.cu * P.len[P.ck];\n  // Where on the loop a point is, 0..1, with a kept arc's old place blended\n  // into its new one while its side opens.\n  const at = (k, tau) => {\n    let f = (P.cum[k] + tau * P.len[k]) / Ltot;\n    if (mix \u003c 1 && P.OK[k]) {\n      let e = P.OS[k] + tau * (P.OE[k] - P.OS[k]) - f;\n      e -= round(e);\n      f += (1 - mix) * e;\n    }\n    return f;\n  };\n  // The pulse's head, for the glow round it.\n  const ho = P.ck * 6, hr = g[ho + 3], ht = PI * (P.AF[P.ck] \u003c P.AT[P.ck] ? P.cu : 1 - P.cu);\n  const hx = MID + g[ho + 5] * smin(g[ho + 4], hr * Math.sin(ht)), hy = g[ho + 2] - hr * cos(ht);\n  const hue0 = P.hue + 0.55 - P.flow, fillV = 255 * 0.97 * (1 - P.hollow) ** 1.2;\n  const lineS = 0.5 + 0.35 * P.hollow;\n  // The inside by the even-odd rule, row by row: a LED is inside when a ray\n  // from it to the right wall crosses the curve an odd number of times. The\n  // arcs a row meets on one side are nested, so the band a LED sits in takes\n  // the colour of the arc just outside it, at this row.\n  const fl = new Float32Array(16), ka = new Int8Array(16), ta = new Float32Array(16);\n  const fr = new Float32Array(16), kb = new Int8Array(16), tb = new Float32Array(16);\n  for (let yy = 0; yy \u003c H; yy++) {\n    const yc = yy + 0.5;\n    let nl = 0, nr = 0;\n    for (let k = 0; k \u003c n2; k++) {\n      const o = k * 6;\n      if (!(g[o] \u003c yc && yc \u003c g[o + 1])) continue;\n      const c = g[o + 2], R = g[o + 3], dy = yc - c, f = smin(g[o + 4], sqrt(R * R - dy * dy));\n      const t = acos(cl(-dy / R, -1, 1)) / PI, tau = P.AF[k] \u003c P.AT[k] ? t : 1 - t;\n      const A = g[o + 5] > 0 ? fr : fl, KK = g[o + 5] > 0 ? kb : ka, T = g[o + 5] > 0 ? tb : ta;\n      let i = g[o + 5] > 0 ? nr++ : nl++;\n      while (i > 0 && A[i - 1] > f) (A[i] = A[i - 1]), (KK[i] = KK[i - 1]), (T[i] = T[i - 1]), i--;\n      (A[i] = f), (KK[i] = k), (T[i] = tau);\n    }\n    for (let half = 0; half \u003c 2; half++) {\n      const A = half ? fr : fl, KK = half ? kb : ka, T = half ? tb : ta, n = half ? nr : nl;\n      let i = 0;\n      for (let q = 0; q \u003c 32; q++) {\n        const xx = half ? MID + q : MID - 1 - q, dist = q + 0.5, p = yy * W + xx;\n        while (i \u003c n && A[i] \u003c dist) i++;\n        let r = 0, gg = 0, b = 0;\n        const inside = half ? (nr - i) & 1 : (i + nr) & 1;\n        if (inside && fillV > 0) {\n          const f = at(KK[i], T[i]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          (r = LUT[ix] * fillV), (gg = LUT[ix + 1] * fillV), (b = LUT[ix + 2] * fillV);\n        }\n        // The road, a faint line on the dark and a darker one through the colour.\n        if (q === 0) {\n          if (inside && fillV > 0) (r *= 0.6), (gg *= 0.6), (b *= 0.6);\n          else (r += 34), (gg += 36), (b += 44);\n        }\n        const dl = sqrt(D[p]);\n        if (dl \u003c 2.3) {\n          const k = LA[p], f = at(k, LT[p]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          let behind = (head - (P.cum[k] + LT[p] * P.len[k])) % Ltot;\n          if (behind \u003c 0) behind += Ltot;\n          const pulse = exp(-behind / 24) + (behind > Ltot - 3 ? (behind - Ltot + 3) / 3 : 0);\n          const I = cl(1.75 - dl * 1.1, 0, 1), J = cl(2 - dl * 0.75, 0, 1) * pulse, wh = 1 - lineS;\n          let lr = 255 * (wh + lineS * LUT[ix]), lg = 255 * (wh + lineS * LUT[ix + 1]), lb = 255 * (wh + lineS * LUT[ix + 2]);\n          const pv = min(1, pulse);\n          (lr += (255 - lr) * pv), (lg += (250 - lg) * pv), (lb += (235 - lb) * pv);\n          const m = max(I, J);\n          (r += (lr - r) * m), (gg += (lg - gg) * m), (b += (lb - b) * m);\n        }\n        const ex = xx + 0.5 - hx, ey = yc - hy, e2 = ex * ex + ey * ey;\n        if (e2 \u003c 30) {\n          const gl = 0.9 * exp(-e2 / 6);\n          (r += (255 - r) * gl), (gg += (250 - gg) * gl), (b += (235 - b) * gl);\n        }\n        display.setPixel(xx, yy, min(255, r), min(255, gg), min(255, b));\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again."},{"name":"Crossings","min":12,"max":32,"about":"How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander."},{"name":"Hollow","min":0,"max":1,"about":"At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left."}],"start":[0,2,12,0.06],"measures":{"motion":0.1079,"detail":0.0446,"edges":0.5226,"complexity":0.7574,"coverage":0.4978,"colour":0.5487,"drift":0.1848},"knobResponse":[0.3105,0.2838,0.4218,0.1979]},{"slug":"metro-map","title":"Metro Map","family":"city","round":15,"note":"해리 벡 식 지하철 노선도예요. 색 노선 넷이 45도로 꺾이며 위아래로 달리고, 갈아타는 역은 흰 고리예요. 흰 열차가 역마다 섰다 떠나고 끝에서 되돌아가요. K1 을 누르면 급행이 지나가요.","idea":"A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.","buttons":"K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.","code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-metro-map","type":"code","name":"metro-map","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole line palette round the colour wheel together; the river stays blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21."},{"name":"Lines","min":4,"max":7,"about":"How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges."},{"name":"Rush","min":0,"max":1,"about":"The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds."}],"start":[0,2,4,0.06],"measures":{"motion":0.0316,"detail":0.0683,"edges":0.914,"complexity":0.1388,"coverage":0.2043,"colour":0.2301,"drift":0.035},"knobResponse":[0.0664,0.0514,0.0687,0.0629]},{"slug":"milk-ring","title":"Milk Ring","family":"cosmetic","round":38,"note":"우윳빛 크림 방울이 색을 띤 세럼에 떨어져 테두리가 밝은 소용돌이 고리가 돼요. 고리는 가라앉으며 부풀다 작은 방울 몇 개로 갈라지고, 그 방울이 다시 작은 고리가 되어 가는 크림 실에 매달린 나무처럼 패널 아래로 늘어져요. K3 은 한 고리가 갈라지는 방울 수를 셋에서 여섯으로 늘리고, K1 을 누르면 방울이 바로 떨어져요.","idea":"Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.","buttons":"K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Milk Ring\n// Family:  cosmetic\n// Idea:    Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after drops of cream let fall into clear serum, the vortex rings they form and the cascade in which each ring breaks into smaller rings (J. J. Thomson and H. F. Newall, 1885)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive.\n// Knob 2: Speed. At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Drops. How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117.\n// Knob 4: Gel. How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain.\n// Buttons: K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\n// The serum's surface, rows above it are the air the drop falls through.\nconst SURF = 5;\n// Seen from a little above: a ring of radius R is an ellipse R wide and\n// R * TILT tall, its near half lower on the panel.\nconst TILT = 0.4;\n// Per generation: starting radius, the radius it swells to, starting sink\n// speed in LEDs a second, how long it sinks before its rim breaks.\nconst GEN = [\n  { r0: 2.4, r1: 10, v0: 24, brk: 3.2 },\n  { r0: 1.4, r1: 5.2, v0: 18, brk: 2.8 },\n  { r0: 0.9, r1: 2.8, v0: 14, brk: 99 },\n];\n// Every sink speed falls toward VS with time constant TV; radii swell with TR.\nconst VS = 3.2, TV = 1.3, TR = 1.6;\n// Seconds between drops at Speed 2 and Gel 1, and the run before the first frame.\nconst PERIOD = 7, PREROLL = 9;\n// Opening hue: rose.\nconst H0 = 0.93;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, gel: 1, begun: false, t: 0, next: 0, tk: 1,\n    rings: [], falling: [], ripples: [],\n    D: new Float32Array(N), F: new Float32Array(N), T: new Float32Array(N), G: new Float32Array(N), tmp: new Float32Array(N),\n    deep: [0, 0, 0], light: [0, 0, 0], cream: [0, 0, 0],\n  };\n}\n\n// Soft dot of cream into a field, a Gaussian of width s.\nfunction splat(A, x, y, s, w) {\n  const r = Math.ceil(2.2 * s), xi = round(x), yi = round(y), k = -0.5 / (s * s);\n  for (let j = max(0, yi - r); j \u003c= min(H - 1, yi + r); j++) {\n    const dy = j - y, ey = dy * dy;\n    for (let i = max(0, xi - r); i \u003c= min(W - 1, xi + r); i++) {\n      const dx = i - x;\n      A[j * W + i] += w * exp((dx * dx + ey) * k);\n    }\n  }\n}\n\n// A thin thread point, bilinear into the trail.\nfunction dab(T, x, y, w) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  for (let b = 0; b \u003c 2; b++)\n    for (let a = 0; a \u003c 2; a++) {\n      const xx = i + a, yy = j + b;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      T[yy * W + xx] += w * (a ? fx : 1 - fx) * (b ? fy : 1 - fy);\n    }\n}\n\nfunction newRing(S, g, x, y, z, vx, vz) {\n  const G0 = GEN[g];\n  S.rings.push({ g, x, y, z, vx, vz, age: 0, R: G0.r0, amp: 1, broken: false, spin: random() * 2 * PI, v0: G0.v0 * (0.85 + 0.3 * random()) });\n}\n\nfunction drop(S) {\n  S.falling.push({ x: 18 + random() * 28, y: -4, z: (random() - 0.5) * 6 });\n}\n\n// Sim time, in seconds at Speed 2 and Gel 1; the gel stretches it.\nfunction step(S, dt) {\n  // A thicker gel slows everything, keeps the rings smaller and holds the\n  // threads longer.\n  const ts = S.gel ** 0.6, d = dt / ts, rs = S.gel ** -0.2;\n  S.t += d;\n  if (S.t >= S.next) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  // The drop falls through the air and goes in at the surface.\n  for (let i = S.falling.length - 1; i >= 0; i--) {\n    const f = S.falling[i];\n    f.y += 34 * d;\n    if (f.y >= SURF + 1) {\n      newRing(S, 0, f.x, SURF + 2.5, f.z, 0, 0);\n      S.ripples.push({ x: f.x, age: 0 });\n      S.falling.splice(i, 1);\n    }\n  }\n  for (const rp of S.ripples) rp.age += d;\n  S.ripples = S.ripples.filter((rp) => rp.age \u003c 3);\n  const T = S.T, born = [];\n  for (const r of S.rings) {\n    const G0 = GEN[r.g];\n    r.age += d;\n    r.R = (G0.r0 + (G0.r1 - G0.r0) * (1 - exp(-r.age / TR))) * rs;\n    const vy = r.v0 * exp(-r.age / TV) + VS, k = exp(-d / 0.8);\n    const x0 = r.x, y0 = r.y + r.z * TILT;\n    r.y += vy * d;\n    r.x += r.vx * d;\n    r.z += r.vz * d;\n    r.vx *= k;\n    r.vz *= k;\n    // The thread: the ring leaves cream behind it, the same for every LED\n    // of the way it goes.\n    const y1 = r.y + r.z * TILT, len = sqrt((r.x - x0) ** 2 + (y1 - y0) ** 2);\n    dab(T, r.x, y1, (r.g === 0 ? 0.75 : 0.55) * len * r.amp);\n    if (!r.broken && r.age > G0.brk) {\n      // The rim breaks into n drops round the ring, each thrown a little\n      // outward and down, and the ring itself is spent into them.\n      r.broken = true;\n      const n = S.n, ph = r.spin;\n      for (let j = 0; j \u003c n; j++) {\n        const a = ph + (2 * PI * j) / n, c = cos(a), s = sin(a);\n        born.push([r.g + 1, r.x + r.R * c, r.y + 0.5, r.z + r.R * s, 7 * c, 7 * s]);\n      }\n    }\n    if (r.broken) r.amp -= d / 0.7;\n    // The last generation dissolves into the serum after 4 s.\n    if (r.g === GEN.length - 1 && r.age > 4) r.amp -= d / 3;\n  }\n  for (const b of born) newRing(S, b[0], b[1], b[2], b[3], b[4], b[5]);\n  S.rings = S.rings.filter((r) => r.amp > 0.01 && r.y \u003c H + 12);\n  // Threads fade, the fade gathered up and laid on every few frames.\n  S.tk *= exp(-d / (4 * S.gel));\n  if (S.tk \u003c 0.98) {\n    for (let p = 0; p \u003c N; p++) T[p] *= S.tk;\n    S.tk = 1;\n  }\n}\n\n// Draw every ring into the cream field.\nfunction render(S) {\n  const D = S.D, F = S.F;\n  D.fill(0);\n  F.fill(0);\n  for (const r of S.rings) {\n    const form = cl(r.age / 0.6, 0, 1), R = r.R, amp = r.amp;\n    const cy = r.y + r.z * TILT;\n    // A fresh drop is a round blob that opens into the ring.\n    if (form \u003c 1) splat(D, r.x, cy, 0.55 * R + 0.5, 1.3 * (1 - form) * amp);\n    // The ring: its core is an eighth of its radius thick, at least 0.55\n    // LED, laid as dots along it so that a line of them peaks at the weight.\n    const core = max(0.55, 0.12 * R), m = max(10, round(2 * PI * R * 1.6)), ds = (2 * PI * R) / m;\n    for (let j = 0; j \u003c m; j++) {\n      const a = (2 * PI * j) / m, c = cos(a), s = sin(a);\n      // The near half (s > 0) lower on the panel and brighter than the far\n      // half seen through the ring.\n      const w = (0.85 + 0.45 * s) * form * amp * (ds / (core * 2.5066));\n      splat(D, r.x + R * c, cy + R * s * TILT, core, w);\n    }\n    // The bell of milky serum the ring carries above it.\n    splat(F, r.x, cy - 0.45 * R, 0.6 * R + 0.5, 0.4 * form * amp);\n  }\n  for (const f of S.falling) {\n    splat(D, f.x, f.y, 1.1, 1.4);\n    splat(D, f.x, f.y - 1.6, 0.7, 0.5);\n  }\n}\n\n// Box blur of radius r, horizontal then vertical, A into B.\nfunction blur(A, B, tmp, r) {\n  const k = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += A[y * W + cl(x + i, 0, W - 1)];\n      tmp[y * W + x] = s * k;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += tmp[cl(y + i, 0, H - 1) * W + x];\n      B[y * W + x] = s * k;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 3, 6));\n  S.gel = cl(k[3], 1, 5);\n  if (!S.begun) {\n    // The gel stretches the run before as it stretches everything.\n    const n = round(PREROLL * 30 * S.gel ** 0.6);\n    for (let i = 0; i \u003c n; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  render(S);\n  const { D, F, T, G, tmp, deep, light, cream } = S;\n  blur(D, G, tmp, 2);\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime serum goes brown or olive when deep: there it\n  // is lifted, so the bottom of the glass is as bright as the top elsewhere.\n  const warm = cl(1.3 - abs(hh - 0.13) / 0.13, 0, 1);\n  hsv(h, 0.7 - 0.2 * warm, 0.3 + 0.34 * warm, deep);\n  hsv(h + 0.03, 0.5 - 0.1 * warm, 0.62 + 0.14 * warm, light);\n  hsv(h + 0.02, 0.4, 1, cream);\n  const t = S.t;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1), lg = (1 - u) ** 1.6;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vig = 0.8 + 0.2 * sin((PI * (x + 0.5)) / W);\n      // The serum: light from above, and a slow shimmer of caustics.\n      const sh = 0.07 * sin(x * 0.31 + y * 0.07 + t * 0.6 + 1.7 * sin(x * 0.11 - y * 0.05 - t * 0.4)) * lg;\n      let r = deep[0] + (light[0] - deep[0]) * lg, g = deep[1] + (light[1] - deep[1]) * lg, b = deep[2] + (light[2] - deep[2]) * lg;\n      r *= (1 + sh) * vig;\n      g *= (1 + sh) * vig;\n      b *= (1 + sh) * vig;\n      if (y \u003c SURF) {\n        r *= 0.25;\n        g *= 0.25;\n        b *= 0.25;\n      }\n      // Cream: the rings, a soft glow round them, the bell and the threads,\n      // tinted where it is thin and white where it is thick.\n      const C = D[p] + 0.5 * G[p] + F[p] + T[p];\n      const c = 1 - exp(-1.2 * C), wh = c * sqrt(c);\n      const cr = cream[0] + (1 - cream[0]) * wh, cg = cream[1] + (1 - cream[1]) * wh, cb = cream[2] + (1 - cream[2]) * wh;\n      r = r * (1 - 0.85 * c) + cr * c;\n      g = g * (1 - 0.85 * c) + cg * c;\n      b = b * (1 - 0.85 * c) + cb * c;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n  // The surface: a bright line, rippled where a drop went in.\n  for (let x = 0; x \u003c W; x++) {\n    let off = 0;\n    for (const rp of S.ripples) {\n      const dx = abs(x - rp.x), front = rp.age * 14;\n      off += 1.2 * exp(-rp.age / 0.8) * sin(dx * 0.9 - rp.age * 12) * exp(-((dx - front) ** 2) / 30);\n    }\n    const y = cl(round(SURF + off), 0, H - 1);\n    display.setPixel(x, y, round(255 * min(1, light[0] * 0.5 + 0.5)), round(255 * min(1, light[1] * 0.5 + 0.5)), round(255 * min(1, light[2] * 0.5 + 0.5)));\n  }\n}\n","layer":{"id":"layer-milk-ring","type":"code","name":"milk-ring","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Milk Ring\n// Family:  cosmetic\n// Idea:    Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after drops of cream let fall into clear serum, the vortex rings they form and the cascade in which each ring breaks into smaller rings (J. J. Thomson and H. F. Newall, 1885)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive.\n// Knob 2: Speed. At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Drops. How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117.\n// Knob 4: Gel. How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain.\n// Buttons: K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\n// The serum's surface, rows above it are the air the drop falls through.\nconst SURF = 5;\n// Seen from a little above: a ring of radius R is an ellipse R wide and\n// R * TILT tall, its near half lower on the panel.\nconst TILT = 0.4;\n// Per generation: starting radius, the radius it swells to, starting sink\n// speed in LEDs a second, how long it sinks before its rim breaks.\nconst GEN = [\n  { r0: 2.4, r1: 10, v0: 24, brk: 3.2 },\n  { r0: 1.4, r1: 5.2, v0: 18, brk: 2.8 },\n  { r0: 0.9, r1: 2.8, v0: 14, brk: 99 },\n];\n// Every sink speed falls toward VS with time constant TV; radii swell with TR.\nconst VS = 3.2, TV = 1.3, TR = 1.6;\n// Seconds between drops at Speed 2 and Gel 1, and the run before the first frame.\nconst PERIOD = 7, PREROLL = 9;\n// Opening hue: rose.\nconst H0 = 0.93;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, gel: 1, begun: false, t: 0, next: 0, tk: 1,\n    rings: [], falling: [], ripples: [],\n    D: new Float32Array(N), F: new Float32Array(N), T: new Float32Array(N), G: new Float32Array(N), tmp: new Float32Array(N),\n    deep: [0, 0, 0], light: [0, 0, 0], cream: [0, 0, 0],\n  };\n}\n\n// Soft dot of cream into a field, a Gaussian of width s.\nfunction splat(A, x, y, s, w) {\n  const r = Math.ceil(2.2 * s), xi = round(x), yi = round(y), k = -0.5 / (s * s);\n  for (let j = max(0, yi - r); j \u003c= min(H - 1, yi + r); j++) {\n    const dy = j - y, ey = dy * dy;\n    for (let i = max(0, xi - r); i \u003c= min(W - 1, xi + r); i++) {\n      const dx = i - x;\n      A[j * W + i] += w * exp((dx * dx + ey) * k);\n    }\n  }\n}\n\n// A thin thread point, bilinear into the trail.\nfunction dab(T, x, y, w) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  for (let b = 0; b \u003c 2; b++)\n    for (let a = 0; a \u003c 2; a++) {\n      const xx = i + a, yy = j + b;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      T[yy * W + xx] += w * (a ? fx : 1 - fx) * (b ? fy : 1 - fy);\n    }\n}\n\nfunction newRing(S, g, x, y, z, vx, vz) {\n  const G0 = GEN[g];\n  S.rings.push({ g, x, y, z, vx, vz, age: 0, R: G0.r0, amp: 1, broken: false, spin: random() * 2 * PI, v0: G0.v0 * (0.85 + 0.3 * random()) });\n}\n\nfunction drop(S) {\n  S.falling.push({ x: 18 + random() * 28, y: -4, z: (random() - 0.5) * 6 });\n}\n\n// Sim time, in seconds at Speed 2 and Gel 1; the gel stretches it.\nfunction step(S, dt) {\n  // A thicker gel slows everything, keeps the rings smaller and holds the\n  // threads longer.\n  const ts = S.gel ** 0.6, d = dt / ts, rs = S.gel ** -0.2;\n  S.t += d;\n  if (S.t >= S.next) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  // The drop falls through the air and goes in at the surface.\n  for (let i = S.falling.length - 1; i >= 0; i--) {\n    const f = S.falling[i];\n    f.y += 34 * d;\n    if (f.y >= SURF + 1) {\n      newRing(S, 0, f.x, SURF + 2.5, f.z, 0, 0);\n      S.ripples.push({ x: f.x, age: 0 });\n      S.falling.splice(i, 1);\n    }\n  }\n  for (const rp of S.ripples) rp.age += d;\n  S.ripples = S.ripples.filter((rp) => rp.age \u003c 3);\n  const T = S.T, born = [];\n  for (const r of S.rings) {\n    const G0 = GEN[r.g];\n    r.age += d;\n    r.R = (G0.r0 + (G0.r1 - G0.r0) * (1 - exp(-r.age / TR))) * rs;\n    const vy = r.v0 * exp(-r.age / TV) + VS, k = exp(-d / 0.8);\n    const x0 = r.x, y0 = r.y + r.z * TILT;\n    r.y += vy * d;\n    r.x += r.vx * d;\n    r.z += r.vz * d;\n    r.vx *= k;\n    r.vz *= k;\n    // The thread: the ring leaves cream behind it, the same for every LED\n    // of the way it goes.\n    const y1 = r.y + r.z * TILT, len = sqrt((r.x - x0) ** 2 + (y1 - y0) ** 2);\n    dab(T, r.x, y1, (r.g === 0 ? 0.75 : 0.55) * len * r.amp);\n    if (!r.broken && r.age > G0.brk) {\n      // The rim breaks into n drops round the ring, each thrown a little\n      // outward and down, and the ring itself is spent into them.\n      r.broken = true;\n      const n = S.n, ph = r.spin;\n      for (let j = 0; j \u003c n; j++) {\n        const a = ph + (2 * PI * j) / n, c = cos(a), s = sin(a);\n        born.push([r.g + 1, r.x + r.R * c, r.y + 0.5, r.z + r.R * s, 7 * c, 7 * s]);\n      }\n    }\n    if (r.broken) r.amp -= d / 0.7;\n    // The last generation dissolves into the serum after 4 s.\n    if (r.g === GEN.length - 1 && r.age > 4) r.amp -= d / 3;\n  }\n  for (const b of born) newRing(S, b[0], b[1], b[2], b[3], b[4], b[5]);\n  S.rings = S.rings.filter((r) => r.amp > 0.01 && r.y \u003c H + 12);\n  // Threads fade, the fade gathered up and laid on every few frames.\n  S.tk *= exp(-d / (4 * S.gel));\n  if (S.tk \u003c 0.98) {\n    for (let p = 0; p \u003c N; p++) T[p] *= S.tk;\n    S.tk = 1;\n  }\n}\n\n// Draw every ring into the cream field.\nfunction render(S) {\n  const D = S.D, F = S.F;\n  D.fill(0);\n  F.fill(0);\n  for (const r of S.rings) {\n    const form = cl(r.age / 0.6, 0, 1), R = r.R, amp = r.amp;\n    const cy = r.y + r.z * TILT;\n    // A fresh drop is a round blob that opens into the ring.\n    if (form \u003c 1) splat(D, r.x, cy, 0.55 * R + 0.5, 1.3 * (1 - form) * amp);\n    // The ring: its core is an eighth of its radius thick, at least 0.55\n    // LED, laid as dots along it so that a line of them peaks at the weight.\n    const core = max(0.55, 0.12 * R), m = max(10, round(2 * PI * R * 1.6)), ds = (2 * PI * R) / m;\n    for (let j = 0; j \u003c m; j++) {\n      const a = (2 * PI * j) / m, c = cos(a), s = sin(a);\n      // The near half (s > 0) lower on the panel and brighter than the far\n      // half seen through the ring.\n      const w = (0.85 + 0.45 * s) * form * amp * (ds / (core * 2.5066));\n      splat(D, r.x + R * c, cy + R * s * TILT, core, w);\n    }\n    // The bell of milky serum the ring carries above it.\n    splat(F, r.x, cy - 0.45 * R, 0.6 * R + 0.5, 0.4 * form * amp);\n  }\n  for (const f of S.falling) {\n    splat(D, f.x, f.y, 1.1, 1.4);\n    splat(D, f.x, f.y - 1.6, 0.7, 0.5);\n  }\n}\n\n// Box blur of radius r, horizontal then vertical, A into B.\nfunction blur(A, B, tmp, r) {\n  const k = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += A[y * W + cl(x + i, 0, W - 1)];\n      tmp[y * W + x] = s * k;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += tmp[cl(y + i, 0, H - 1) * W + x];\n      B[y * W + x] = s * k;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 3, 6));\n  S.gel = cl(k[3], 1, 5);\n  if (!S.begun) {\n    // The gel stretches the run before as it stretches everything.\n    const n = round(PREROLL * 30 * S.gel ** 0.6);\n    for (let i = 0; i \u003c n; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  render(S);\n  const { D, F, T, G, tmp, deep, light, cream } = S;\n  blur(D, G, tmp, 2);\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime serum goes brown or olive when deep: there it\n  // is lifted, so the bottom of the glass is as bright as the top elsewhere.\n  const warm = cl(1.3 - abs(hh - 0.13) / 0.13, 0, 1);\n  hsv(h, 0.7 - 0.2 * warm, 0.3 + 0.34 * warm, deep);\n  hsv(h + 0.03, 0.5 - 0.1 * warm, 0.62 + 0.14 * warm, light);\n  hsv(h + 0.02, 0.4, 1, cream);\n  const t = S.t;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1), lg = (1 - u) ** 1.6;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vig = 0.8 + 0.2 * sin((PI * (x + 0.5)) / W);\n      // The serum: light from above, and a slow shimmer of caustics.\n      const sh = 0.07 * sin(x * 0.31 + y * 0.07 + t * 0.6 + 1.7 * sin(x * 0.11 - y * 0.05 - t * 0.4)) * lg;\n      let r = deep[0] + (light[0] - deep[0]) * lg, g = deep[1] + (light[1] - deep[1]) * lg, b = deep[2] + (light[2] - deep[2]) * lg;\n      r *= (1 + sh) * vig;\n      g *= (1 + sh) * vig;\n      b *= (1 + sh) * vig;\n      if (y \u003c SURF) {\n        r *= 0.25;\n        g *= 0.25;\n        b *= 0.25;\n      }\n      // Cream: the rings, a soft glow round them, the bell and the threads,\n      // tinted where it is thin and white where it is thick.\n      const C = D[p] + 0.5 * G[p] + F[p] + T[p];\n      const c = 1 - exp(-1.2 * C), wh = c * sqrt(c);\n      const cr = cream[0] + (1 - cream[0]) * wh, cg = cream[1] + (1 - cream[1]) * wh, cb = cream[2] + (1 - cream[2]) * wh;\n      r = r * (1 - 0.85 * c) + cr * c;\n      g = g * (1 - 0.85 * c) + cg * c;\n      b = b * (1 - 0.85 * c) + cb * c;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n  // The surface: a bright line, rippled where a drop went in.\n  for (let x = 0; x \u003c W; x++) {\n    let off = 0;\n    for (const rp of S.ripples) {\n      const dx = abs(x - rp.x), front = rp.age * 14;\n      off += 1.2 * exp(-rp.age / 0.8) * sin(dx * 0.9 - rp.age * 12) * exp(-((dx - front) ** 2) / 30);\n    }\n    const y = cl(round(SURF + off), 0, H - 1);\n    display.setPixel(x, y, round(255 * min(1, light[0] * 0.5 + 0.5)), round(255 * min(1, light[1] * 0.5 + 0.5)), round(255 * min(1, light[2] * 0.5 + 0.5)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Drops","min":3,"max":6,"about":"How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117."},{"name":"Gel","min":1,"max":5,"about":"How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain."}],"start":[0,2,3,1],"measures":{"motion":0.0728,"detail":0.0206,"edges":0.212,"complexity":1.5604,"coverage":1,"colour":0.1167,"drift":0.0533},"knobResponse":[0.2862,0.0564,0.077,0.0544]},{"slug":"millefiori","title":"Millefiori","family":"glass","round":20,"note":"무라노 밀레피오리 접시 위로 시야가 천천히 미끄러지며, 1 LED 고리와 꽃잎으로 된 유리 막대 조각 수백 개가 어두운 유리에 촘촘히 박혀 지나가요. K1 을 누르면 새로 뽑은 막대로 만든 접시가 오른쪽에서 밀려 들어와요.","idea":"The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.","buttons":"K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.","code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-millefiori","type":"code","name":"millefiori","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds."},{"name":"Canes","min":6,"max":12,"about":"How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals."},{"name":"Light","min":0,"max":1,"about":"How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim."}],"start":[0,2,6,0.06],"measures":{"motion":1.2091,"detail":0.3373,"edges":0.8101,"complexity":1.6267,"coverage":1,"colour":0.5579,"drift":0.0871},"knobResponse":[0.1882,0.3627,0.3509,0.1412]},{"slug":"mitosis","title":"Mitosis","family":"microbe","round":27,"note":"검은 바탕에 찍은 면역형광 사진 속 세포 배양이에요. DNA 는 파랑, 미세소관은 초록, 액틴은 빨강으로 물든 세포가 둥글게 말려 염색체를 두 방추극 사이에 세우고, 양쪽 극으로 끌어 나눈 뒤 빨간 수축 고리에서 잘록해져 둘이 돼요. K1 이 염료를 바꾸고, 누르면 가운데 세포가 바로 분열을 시작해요.","idea":"A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.","buttons":"K1 tap sends the interphase cell nearest the middle into prophase now.","code":"// ===== Patternflow pattern =====\n// Title:   Mitosis\n// Family:  microbe\n// Idea:    A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after immunofluorescence micrographs of dividing cells\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1\n//\n// Knob 1: Stain. The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA.\n// Knob 2: Speed. At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower.\n// Knob 3: Cells. How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in.\n// Knob 4: Zoom. The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show.\n// Buttons: K1 tap sends the interphase cell nearest the middle into prophase now.\n\nconst W = 64, H = 128, N = W * H, TAU = 2 * Math.PI, NCH = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// A 64x64 tile of value noise that wraps, for chromatin.\nconst NT = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = ((k & 63) * 16) / 64, y = ((k >> 6) * 16) / 64, xi = floor(x), yi = floor(y), u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), a = hash(xi, yi), b = hash((xi + 1) % 16, yi), c = hash(xi, (yi + 1) % 16), d = hash((xi + 1) % 16, (yi + 1) % 16);\n  NT[k] = a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, x0 = xi & 63, y0 = (yi & 63) * 64, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) * 64;\n  return mix(mix(NT[y0 + x0], NT[y0 + x1], fx), mix(NT[y1 + x0], NT[y1 + x1], fx), fy);\n}\n\n// The cycle, as fractions of it: daughters spread, interphase, prophase,\n// prometaphase, metaphase, anaphase, telophase to the split at 1.\nconst P1 = 0.1, P2 = 0.5, P3 = 0.6, P4 = 0.67, P5 = 0.79, P6 = 0.86;\n\n// Dye hues in degrees: DNA, tubulin, actin, centrosome.\nconst STAINS = [\n  [240, 120, 0, 55],\n  [228, 352, 125, 185],\n  [192, 305, 55, 120],\n  [262, 60, 318, 170],\n];\nconst hueRGB = (h, out, o) => {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (((5 - 2 * j) + h / 60) % 6 + 6) % 6;\n    out[o + j] = 1 - max(0, min(k, 4 - k, 1));\n  }\n};\n\n// One buffer per dye (actin, tubulin, DNA, centrosome) and one for the body\n// haze. LIN holds the merged colour and BL its blur for the glow; TMP is scratch.\nconst SA = new Float32Array(N), ST = new Float32Array(N), SD = new Float32Array(N), SC = new Float32Array(N), HZ = new Float32Array(N);\nconst LIN = new Float32Array(N * 3), BL = new Float32Array(N * 3), TMP = new Float32Array(N * 3);\nlet Z = 1, TT = 0;\n\nfunction newCell(x, y, p, B) {\n  const c = {\n    x, y, vx: 0, vy: 0, a: rnd() * PI, hd: rnd() * TAU, p, rate: 0.85 + 0.3 * rnd(), B: B || 12 + 2 * rnd(),\n    sd: floor(rnd() * 9973), w1: rnd() * TAU, w2: rnd() * TAU, w3: rnd() * TAU, nf: 22 + floor(rnd() * 7), cang: rnd() * TAU,\n    ox: rnd() * 64, oy: rnd() * 64, tilt: (rnd() - 0.5) * 0.4, al: 1, out: 0, br: 0, bx: 0, by: 0,\n    ca: 1, sa: 0, e: 0, rl: 5, kk: 2, pin: 0, wa: 0, hdl: 0, lam: 0, cx: 1, fur: 0, nS: 0, rn: 3, cond: 0, dense: 0, dS: 0, dr: 2,\n    Lp: 3, sp: 0, net: 0, ast: 0, chA: 0, sh: 0.5, pf: 0, ip: 0, ft: 0, fa: 0, cu: 0, cv: 0, dup: 0, rad: 10, p1u: 0, p1v: 0, p2u: 0, p2v: 0,\n    ch: new Float32Array(NCH * 4), wt: new Float32Array(64), fw: new Float32Array(64), gp: new Float32Array(64),\n  };\n  for (let j = 0; j \u003c NCH; j++) {\n    const r = 0.75 * sqrt(rnd()), q = rnd() * TAU;\n    c.ch[j * 4] = r * cos(q);\n    c.ch[j * 4 + 1] = r * sin(q);\n    c.ch[j * 4 + 2] = ((j + 0.5) / NCH) * 2 - 1 + (rnd() - 0.5) * 0.15;\n    c.ch[j * 4 + 3] = rnd() * PI;\n  }\n  return c;\n}\n\n// Where the cell is in its cycle decides its shape and what each dye shows.\nfunction geo(c) {\n  const p = c.p, B = c.B, Rm = 0.8 * B;\n  let rho = 1, R = Rm, f;\n  if (p \u003c P1) (f = sm(0, P1, p)), (rho = 1 - f), (R = mix(0.59 * B, 0.74 * B, f));\n  else if (p \u003c P2) (rho = 0), (R = mix(0.74 * B, B, (p - P1) / (P2 - P1)));\n  else if (p \u003c P3) (f = sm(P2, P3, p)), (rho = f), (R = mix(B, Rm, f));\n  const fa = (c.fa = sm(P5, P6, p)), ft = (c.ft = sm(P6, 1, p));\n  let e = 0.3 * R * (1 - rho);\n  if (p >= P5) e = p \u003c P6 ? 0.3 * Rm * fa : mix(0.3, 0.58, ft) * Rm;\n  c.e = e;\n  c.rl = R - 0.45 * e;\n  c.kk = (p >= P6 ? mix(0.5, 0.06, ft) : 0.5) * R;\n  c.pin = p >= P6 ? 3 * ft * sqrt(ft) : 0;\n  c.wa = 0.16 * (1 - rho) + 0.025;\n  c.lam = 1 - rho;\n  c.cx = mix(0.85, 1.2, rho);\n  c.fur = ft;\n  c.hdl = c.hd - c.a;\n  // Nucleus: whole until the envelope breaks early in prometaphase.\n  c.rn = 0.44 * R;\n  c.nS = p \u003c P3 ? 1 : 1 - sm(P3, P3 + 0.035, p);\n  c.cond = p \u003c P2 || p >= P6 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dense = p \u003c P1 ? 1 - sm(0, P1, p) : p >= P6 ? 1 : 0;\n  c.dS = sm(0.3, 0.8, ft);\n  c.dr = mix(0.13, 0.22, ft) * B;\n  // Chromosomes gather on the plate; in anaphase the sisters part for the poles.\n  c.pf = sm(P3, P4, p);\n  c.chA = p \u003c P3 ? 0 : sm(P3, P3 + 0.03, p) * (1 - sm(0.25, 0.7, ft));\n  const Lp0 = 0.58 * Rm;\n  c.Lp = p \u003c P5 ? Lp0 : p \u003c P6 ? Lp0 + 0.7 * e : mix(0.79, 0.86, ft) * Rm;\n  c.sh = p \u003c P5 ? 0.5 : p \u003c P6 ? mix(0.5, c.Lp - 1.4, fa) : c.Lp - 1.4;\n  c.sp = p \u003c P3 ? 0 : p \u003c P6 ? sm(P3, P4, p) : 1 - ft;\n  c.ip = p \u003c P5 ? 0 : p \u003c P6 ? fa : 1;\n  c.net = p \u003c P1 ? mix(0.45, 1, sm(0, P1, p)) : p \u003c P2 ? 1 : p \u003c P3 ? 1 - sm(P2, P3, p) : 0;\n  c.ast = p \u003c P2 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dup = p > 0.4 && p \u003c P3 ? 1 : 0;\n  // Centrosome beside the nucleus; in prophase the pair travels round it to the poles.\n  c.cu = (c.rn + 1) * cos(c.cang);\n  c.cv = (c.rn + 1) * sin(c.cang);\n  if (p >= P2) {\n    const g = p \u003c P3 ? sm(P2, P3, p) : 1;\n    c.p1u = mix(c.cu, -c.Lp, g);\n    c.p1v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n    c.p2u = mix(c.cu, c.Lp, g);\n    c.p2v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n  }\n  // The ruffled outline and the leading edge, as a table round the cell.\n  for (let k = 0; k \u003c 64; k++) {\n    const th = (k * PI) / 32 - PI, fr = max(0, cos(th - c.hdl)), F = fr * fr * c.lam;\n    c.fw[k] = F;\n    c.gp[k] = 1 - 0.9 * c.lam * sm(0.4, 0.5, 0.5 + 0.28 * sin(3 * th + 2 * c.w2) + 0.22 * sin(7 * th + c.w3));\n    c.wt[k] = c.rl * c.wa * (0.5 * sin(2 * th + c.w1) + 0.3 * sin(3 * th + c.w2) + 0.2 * sin(5 * th + c.w3 + TT * 0.35) + 0.9 * F);\n  }\n  c.rad = (c.e + c.rl * (1 + 1.6 * c.wa) + 2) * Z;\n  c.ca = cos(c.a);\n  c.sa = sin(c.a);\n}\n\n// What shapeD found at the last point it was asked about, kept for drawCell.\n// A typed array, so writing it for every LED makes no garbage.\nconst G = new Float64Array(3);\n// Signed distance to the cell's outline in its own frame: two discs joined\n// smoothly, ruffled, bulging at the leading edge, pinched at the furrow.\nfunction shapeD(c, u, v) {\n  const e = c.e, rl = c.rl, kk = c.kk;\n  const d1 = hypot(u - e, v) - rl, d2 = hypot(u + e, v) - rl, h = cl(0.5 + (0.5 * (d2 - d1)) / kk, 0, 1);\n  let d = mix(d2, d1, h) - kk * h * (1 - h);\n  const th = (G[1] = atan2(v, u)), q = (th + PI) * (32 / PI), k = floor(q), f = q - k, k0 = k & 63, k1 = (k + 1) & 63;\n  G[0] = mix(c.fw[k0], c.fw[k1], f);\n  G[2] = mix(c.gp[k0], c.gp[k1], f);\n  d -= mix(c.wt[k0], c.wt[k1], f);\n  if (c.pin > 0) d += c.pin * exp(-u * u * 0.4);\n  return d;\n}\n\nfunction put(B, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n    const i = y * W + x;\n    if (v > B[i]) B[i] = v;\n  }\n}\n// A soft dot at a world point; weights sharpened so lines stay one LED wide.\nfunction dot(B, wx, wy, a) {\n  const x = (wx - 32) * Z + 31.5, y = (wy - 64) * Z + 63.5, x0 = floor(x), y0 = floor(y);\n  let fx = x - x0, fy = y - y0;\n  (fx = fx * fx * (3 - 2 * fx)), (fy = fy * fy * (3 - 2 * fy));\n  put(B, x0, y0, a * (1 - fx) * (1 - fy));\n  put(B, x0 + 1, y0, a * fx * (1 - fy));\n  put(B, x0, y0 + 1, a * (1 - fx) * fy);\n  put(B, x0 + 1, y0 + 1, a * fx * fy);\n}\n// A curve in the cell's frame from (au, av) to (bu, bv) bowed through (mu, mv).\nfunction curve(B, c, au, av, mu, mv, bu, bv, a) {\n  const n = max(2, ceil((hypot(mu - au, mv - av) + hypot(bu - mu, bv - mv)) * Z * 2.2));\n  for (let k = 0; k \u003c= n; k++) {\n    const t = k / n, s = 1 - t, u = s * s * au + 2 * s * t * mu + t * t * bu, v = s * s * av + 2 * s * t * mv + t * t * bv;\n    dot(B, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, a);\n  }\n}\nconst line = (B, c, au, av, bu, bv, a) => curve(B, c, au, av, (au + bu) / 2, (av + bv) / 2, bu, bv, a);\n\n// Microtubules grown out from (u0, v0) until they meet the cortex.\nfunction rays(c, u0, v0, n, ang, spread, len, a, sd) {\n  const st = 0.45 / Z;\n  for (let i = 0; i \u003c n; i++) {\n    const h1 = hash(c.sd + sd, i), h2 = hash(i, c.sd + sd + 7);\n    let q = ang + (n > 1 ? ((i + 0.5 * h1) / n - 0.5) * spread : 0), u = u0, v = v0;\n    const L = len * (0.7 + 0.45 * h2), curl = (h1 - 0.5) * 0.3, b = a * (0.9 + 0.25 * h2);\n    for (let s = 0; s \u003c L; s += st) {\n      q += curl * st + 0.12 * sin(s * 0.6 + i * 1.7) * st;\n      u += cos(q) * st;\n      v += sin(q) * st;\n      if (shapeD(c, u, v) > -1.6 - 1.4 * G[0]) break;\n      const nq = c.nS > 0.5 ? hypot(u / (c.rn * 1.1), v / (c.rn * 0.92)) : 2;\n      // Asters wrap round the nucleus until its envelope breaks.\n      if (nq \u003c 1 && sd) break;\n      dot(ST, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, nq \u003c 1 ? b * 0.3 : b);\n    }\n  }\n}\n\nfunction chromatin(c, u, v, cond) {\n  const tu = u * 1.5 + c.ox, tv = v * 1.5 + c.oy;\n  let t = mix(0.35 + 0.9 * nz(tu, tv) - 0.6 * exp(-((u - 0.3 * c.rn) ** 2 + (v + 0.2 * c.rn) ** 2) * 0.9), 1.2, c.dense);\n  if (cond > 0) t = mix(t, 1.5 * sm(0.14, 0.04, abs(nz(tu * 1.4 + 17, tv * 1.4 + 5) - 0.5)), cond);\n  return t;\n}\n\nfunction drawCell(c) {\n  const al = c.al, cx = (c.x - 32) * Z + 32, cy = (c.y - 64) * Z + 64, r = c.rad;\n  const x0 = max(0, floor(cx - r)), x1 = min(W - 1, ceil(cx + r)), y0 = max(0, floor(cy - r)), y1 = min(H - 1, ceil(cy + r));\n  if (x0 > x1 || y0 > y1) return;\n  const iz = 1 / Z, rn = c.rn, na = rn * 1.1, nb = rn * 0.92, r2 = r * r;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      if ((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2 > r2) continue;\n      const dx = (x + 0.5 - cx) * iz, dy = (y + 0.5 - cy) * iz, u = dx * c.ca + dy * c.sa, v = -dx * c.sa + dy * c.ca;\n      const d = shapeD(c, u, v);\n      if (d > 0.8) continue;\n      const i = y * W + x;\n      // Actin: the cortex, broad at the leading edge, and the ring at the furrow.\n      const fr = G[0], th = G[1];\n      let A = sm(-1.2, -0.7, d) * sm(0.35, -0.15, d) * c.cx * G[2];\n      if (fr > 0.05) A = max(A, fr * sm(-2.6, -1.9, d) * sm(0.35, -0.15, d) * (0.55 + 0.6 * nz(th * 20.372 + c.oy, c.ox + d)));\n      if (c.lam > 0.05 && d \u003c -1.2) {\n        // Stress fibres along the cell's long axis, some broken off short.\n        const q = (v + c.tilt * u) / 2.7 + c.ox, k = floor(q + 0.5), h = hash(c.sd + 11, k), e = (hash(k, c.sd) - 0.5) * c.rl;\n        if (h > 0.55 && abs(u - e) \u003c c.rl * (0.3 + 0.7 * h) && hypot(u / na, v / nb) > 1.15) A = max(A, c.lam * sm(0.62, 0.22, abs(q - k) * 2.7) * sm(-1.2, -2.2, d));\n      }\n      if (c.fur > 0) A = max(A, 1.3 * c.fur * exp(-u * u * 1.4) * sm(0.3, -0.5, d));\n      if (A * al > SA[i]) SA[i] = A * al;\n      if (d \u003c 0 && al > HZ[i]) HZ[i] = al * sm(0.5, -2, d);\n      // DNA: an interphase nucleus, or the two that reform in telophase.\n      let D = 0;\n      if (c.nS > 0) {\n        const dn = (hypot(u / na, v / nb) - 1) * nb;\n        if (dn \u003c 0.6) D = sm(0.55, -0.45, dn) * c.nS * chromatin(c, u, v, c.cond);\n      }\n      if (c.dS > 0) {\n        const dn = hypot(abs(u) - c.e, v) - c.dr;\n        if (dn \u003c 0.6) D = max(D, sm(0.55, -0.45, dn) * c.dS * chromatin(c, abs(u) - c.e, v, c.cond));\n      }\n      if (D * al > SD[i]) SD[i] = D * al;\n    }\n  const p = c.p, Rm = 0.8 * c.B;\n  // Interphase network from the centrosome.\n  if (c.net > 0.02) rays(c, c.cu, c.cv, c.nf, c.cang, TAU, c.net * 1.6 * c.rl, al, 0);\n  if (p \u003c P2) {\n    dot(SC, c.x + c.cu * c.ca - c.cv * c.sa, c.y + c.cu * c.sa + c.cv * c.ca, 1.2 * al);\n    if (c.dup) dot(SC, c.x + (c.cu + 0.8) * c.ca - c.cv * c.sa, c.y + (c.cu + 0.8) * c.sa + c.cv * c.ca, 1.2 * al);\n  } else {\n    // Asters, and the spindle between its poles.\n    const spr = mix(TAU, 2.2, c.sp), la = c.ast * c.rl * 1.2;\n    rays(c, c.p1u, c.p1v, 9, PI, spr, la, al, 3);\n    rays(c, c.p2u, c.p2v, 9, 0, spr, la, al, 5);\n    dot(SC, c.x + c.p1u * c.ca - c.p1v * c.sa, c.y + c.p1u * c.sa + c.p1v * c.ca, 1.25 * al);\n    dot(SC, c.x + c.p2u * c.ca - c.p2v * c.sa, c.y + c.p2u * c.sa + c.p2v * c.ca, 1.25 * al);\n    const hw = 0.42 * Rm, ch = c.ch, pf = c.pf * c.pf * (3 - 2 * c.pf);\n    for (let j = 0; j \u003c NCH; j++) {\n      const cu = mix(ch[j * 4] * c.rn, 0.25 * sin(TT * 3.5 + j), pf), cv = mix(ch[j * 4 + 1] * c.rn, ch[j * 4 + 2] * hw, pf), o = mix(ch[j * 4 + 3], PI / 2, pf);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const su = cu + s * c.sh * mix(-sin(o), 1, pf), sv = cv + s * c.sh * mix(cos(o), 0, pf);\n        if (c.sp > 0.02) curve(ST, c, s * c.Lp, 0, (s * c.Lp + su) / 2, sv * 1.3, su, sv, c.sp * al * 0.95);\n        if (c.chA > 0.02) {\n          // Sister chromatids, arms trailing back toward the plate in anaphase.\n          const tr = c.fa, du = mix(cos(o), -s * 0.9, tr) * 1.1, dv = mix(sin(o), 0.45 * (cv \u003c 0 ? -1 : 1), tr) * 1.1;\n          line(SD, c, su - du * (1 - tr), sv - dv * (1 - tr), su + du, sv + dv, 1.3 * c.chA * al);\n        }\n      }\n    }\n    // Central spindle, gathered into the midbody as the furrow closes.\n    if (c.ip > 0.02) {\n      const x = max(1.4, (c.sh - 0.8) * (1 - c.ft) + 1.6 * c.ft);\n      for (let k = -1; k \u003c= 1; k++) line(ST, c, -x, k * 1.1 * (1 - c.ft), x, k * 1.1 * (1 - c.ft), c.ip * al * (k ? 0.85 : 1.1));\n    }\n  }\n  // The midbody bridge back to the sister cell, with its ring.\n  if (c.br > 0.02) {\n    const dx = c.bx - c.x, dy = c.by - c.y, L = hypot(dx, dy), r0 = c.rl * 0.8;\n    if (L > r0) {\n      const ux = dx / L, uy = dy / L, n = ceil((L - r0) * Z * 2.2);\n      for (let k = 0; k \u003c= n; k++) dot(ST, c.x + ux * (r0 + ((L - r0) * k) / n), c.y + uy * (r0 + ((L - r0) * k) / n), c.br * al);\n      dot(SA, c.bx, c.by, 1.2 * c.br * al);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = { cells: [], t: 0, k1: -1, pal: new Float32Array(12), cool: 0, n: 0 };\n}\n\n// The emptiest spot in the field: best of a dozen tries.\nfunction freeSpot(S) {\n  let bx = 32, by = 64, bd = -1;\n  for (let k = 0; k \u003c 14; k++) {\n    const x = 6 + rnd() * 52, y = 6 + rnd() * 116;\n    let d = min(x + 6, 70 - x, y + 6, 134 - y) * 0.6;\n    for (const c of S.cells) d = min(d, hypot(c.x - x, c.y - y));\n    if (d > bd) (bd = d), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// Everything here runs on the slide's own clock, ds seconds a step.\nfunction step(S, ds) {\n  const cells = S.cells, n = S.n;\n  S.t += ds;\n  TT = S.t;\n  for (let i = cells.length - 1; i >= 0; i--) {\n    const c = cells[i];\n    c.p += (ds * c.rate) / 30;\n    if (c.br > 0) {\n      c.br = c.p \u003c 0.13 ? 1 - sm(0.07, 0.13, c.p) : 0;\n      if (hypot(c.bx - c.x, c.by - c.y) > c.rl * 2.4) c.br = max(0, c.br - ds * 2);\n    }\n    if (c.p >= 1) {\n      // Abscission: two daughters, each half the size, moving apart.\n      cells.splice(i, 1);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const d = newCell(c.x + s * c.e * c.ca, c.y + s * c.e * c.sa, 0, c.B * (0.95 + 0.1 * rnd()));\n        (d.vx = s * c.ca * 0.7), (d.vy = s * c.sa * 0.7), (d.br = 1), (d.bx = c.x), (d.by = c.y), (d.al = c.al), (d.out = c.out);\n        // Each daughter keeps its centrosome on the far side from its sister.\n        d.hd = c.a + (s \u003c 0 ? PI : 0) + (rnd() - 0.5);\n        d.cang = c.a + (s \u003c 0 ? PI : 0) - d.a;\n        cells.push(d);\n      }\n      continue;\n    }\n    // Crawling: interphase cells wander, round cells sit still.\n    const crawl = c.lam * 0.7;\n    c.hd += (rnd() - 0.5) * ds * 1.2;\n    c.vx *= exp(-ds * 0.6);\n    c.vy *= exp(-ds * 0.6);\n    c.x += (c.vx + cos(c.hd) * crawl) * ds;\n    c.y += (c.vy + sin(c.hd) * crawl) * ds;\n    // The walls turn a cell back and nudge it in.\n    const wx = sm(4, -3, c.x) - sm(60, 67, c.x), wy = sm(4, -3, c.y) - sm(124, 131, c.y);\n    if (wx || wy) {\n      c.hd = atan2(sin(c.hd) + wy * ds * 3, cos(c.hd) + wx * ds * 3);\n      (c.x += wx * ds * 2), (c.y += wy * ds * 2);\n    }\n    if (c.out) c.al -= ds * 0.45;\n    else c.al = min(1, c.al + ds * 0.5);\n  }\n  // Cells push gently apart.\n  for (let i = 0; i \u003c cells.length; i++)\n    for (let j = i + 1; j \u003c cells.length; j++) {\n      const a = cells[i], b = cells[j], dx = b.x - a.x, dy = b.y - a.y, d = hypot(dx, dy) + 1e-6, m = 0.8 * (a.rl + b.rl + a.e + b.e);\n      if (d \u003c 1.8 * m) {\n        const f = (((d \u003c m ? m - d : 0) * 0.5 + (1.8 * m - d) * 0.15) / d) * ds;\n        (a.x -= dx * f), (a.y -= dy * f), (b.x += dx * f), (b.y += dy * f);\n      }\n    }\n  for (let i = cells.length - 1; i >= 0; i--) if (cells[i].al \u003c= 0 && cells[i].out) cells.splice(i, 1);\n  // Keep the count: a crowded interphase cell lifts away, or a new one settles in.\n  let live = 0;\n  for (const c of cells) live += c.out ? 0 : 1;\n  S.cool -= ds;\n  if (live > n && (S.cool \u003c= 0 || live > n + 1)) {\n    let best = null, bs = -1;\n    for (const a of cells) {\n      if (a.out || a.p \u003c 0.14 || a.p > P2 - 0.04) continue;\n      let s = 0;\n      for (const b of cells) if (b !== a) s += max(0, a.rl + b.rl - hypot(a.x - b.x, a.y - b.y));\n      s += max(0, 10 - min(a.x, 64 - a.x, a.y, 128 - a.y));\n      if (s > bs) (bs = s), (best = a);\n    }\n    if (best) (best.out = 1), (S.cool = 0.8);\n  } else if (live \u003c n && S.cool \u003c= 0) {\n    const [x, y] = freeSpot(S), c = newCell(x, y, 0.12 + 0.6 * rnd());\n    c.al = 0;\n    cells.push(c);\n    S.cool = 0.5;\n  }\n  for (const c of cells) geo(c);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 9, 0.06], speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 9, 17));\n  Z = 1 + 1.15 * cl(k[3], 0, 1) ** 1.3;\n  if (k[0] !== S.k1) {\n    const s = cl(k[0], 0, 1) * 3, i = min(2, floor(s)), f = sm(0, 1, s - i);\n    for (let j = 0; j \u003c 4; j++) {\n      let a = STAINS[i][j], b = STAINS[i + 1][j];\n      if (b - a > 180) a += 360;\n      if (a - b > 180) b += 360;\n      hueRGB(mix(a, b, f), S.pal, j * 3);\n    }\n    S.k1 = k[0];\n  }\n  if (!S.cells.length) {\n    for (let i = 0; i \u003c S.n; i++) {\n      const [x, y] = freeSpot(S);\n      S.cells.push(newCell(x, y, (i + 0.8 * rnd()) / S.n));\n    }\n    for (const c of S.cells) geo(c);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    let best = null, bd = 1e9;\n    for (const c of S.cells) {\n      const d = hypot(c.x - 32, c.y - 64);\n      if (!c.out && c.p > P1 && c.p \u003c P2 && d \u003c bd) (bd = d), (best = c);\n    }\n    if (best) best.p = P2;\n  }\n  step(S, cl(dt || 0, 0, 0.1) * speed * 0.5);\n}\n\n// Box blur of radius 2 across and then down, for the glow.\nfunction blur(src, dst) {\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = y * W * 3 + ch;\n      for (let x = -2; x \u003c W; x++) {\n        if (x + 2 \u003c W) s += src[o + (x + 2) * 3];\n        if (x - 3 >= 0) s -= src[o + (x - 3) * 3];\n        if (x >= 0) dst[o + x * 3] = s / 5;\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = x * 3 + ch;\n      for (let y = -2; y \u003c H; y++) {\n        if (y + 2 \u003c H) s += dst[o + (y + 2) * W * 3];\n        if (y - 3 >= 0) s -= dst[o + (y - 3) * W * 3];\n        if (y >= 0) src[o + y * W * 3] = s / 5;\n      }\n    }\n}\n\n// Hard knee: a dye is either lit near full or left under the glow.\nconst knee = (v) => (v \u003c= 0.28 ? 0 : v >= 0.52 ? 255 : 255 * sm(0.28, 0.52, v));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.cells.length) return;\n  SA.fill(0), ST.fill(0), SD.fill(0), SC.fill(0), HZ.fill(0);\n  TT = S.t;\n  for (const c of S.cells) drawCell(c);\n  const P = S.pal;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = SA[i], t = ST[i], d = SD[i], z = SC[i];\n    if (a + t + d + z === 0) {\n      LIN[o] = LIN[o + 1] = LIN[o + 2] = BL[o] = BL[o + 1] = BL[o + 2] = 0;\n      continue;\n    }\n    LIN[o] = BL[o] = min(1, a * P[6] + t * P[3] + d * P[0] + z * P[9]);\n    LIN[o + 1] = BL[o + 1] = min(1, a * P[7] + t * P[4] + d * P[1] + z * P[10]);\n    LIN[o + 2] = BL[o + 2] = min(1, a * P[8] + t * P[5] + d * P[2] + z * P[11]);\n  }\n  blur(BL, TMP);\n  // The glow and a faint body haze stay under 21, below what counts as lit.\n  const h0 = 13 * P[3], h1 = 13 * P[4], h2 = 13 * P[5];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const h = HZ[i];\n    display.setPixel(\n      i & 63,\n      i >> 6,\n      max(knee(LIN[o]), min(21, 24 * BL[o] + h * h0)) | 0,\n      max(knee(LIN[o + 1]), min(21, 24 * BL[o + 1] + h * h1)) | 0,\n      max(knee(LIN[o + 2]), min(21, 24 * BL[o + 2] + h * h2)) | 0,\n    );\n  }\n}\n","layer":{"id":"layer-mitosis","type":"code","name":"mitosis","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mitosis\n// Family:  microbe\n// Idea:    A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after immunofluorescence micrographs of dividing cells\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1\n//\n// Knob 1: Stain. The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA.\n// Knob 2: Speed. At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower.\n// Knob 3: Cells. How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in.\n// Knob 4: Zoom. The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show.\n// Buttons: K1 tap sends the interphase cell nearest the middle into prophase now.\n\nconst W = 64, H = 128, N = W * H, TAU = 2 * Math.PI, NCH = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// A 64x64 tile of value noise that wraps, for chromatin.\nconst NT = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = ((k & 63) * 16) / 64, y = ((k >> 6) * 16) / 64, xi = floor(x), yi = floor(y), u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), a = hash(xi, yi), b = hash((xi + 1) % 16, yi), c = hash(xi, (yi + 1) % 16), d = hash((xi + 1) % 16, (yi + 1) % 16);\n  NT[k] = a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, x0 = xi & 63, y0 = (yi & 63) * 64, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) * 64;\n  return mix(mix(NT[y0 + x0], NT[y0 + x1], fx), mix(NT[y1 + x0], NT[y1 + x1], fx), fy);\n}\n\n// The cycle, as fractions of it: daughters spread, interphase, prophase,\n// prometaphase, metaphase, anaphase, telophase to the split at 1.\nconst P1 = 0.1, P2 = 0.5, P3 = 0.6, P4 = 0.67, P5 = 0.79, P6 = 0.86;\n\n// Dye hues in degrees: DNA, tubulin, actin, centrosome.\nconst STAINS = [\n  [240, 120, 0, 55],\n  [228, 352, 125, 185],\n  [192, 305, 55, 120],\n  [262, 60, 318, 170],\n];\nconst hueRGB = (h, out, o) => {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (((5 - 2 * j) + h / 60) % 6 + 6) % 6;\n    out[o + j] = 1 - max(0, min(k, 4 - k, 1));\n  }\n};\n\n// One buffer per dye (actin, tubulin, DNA, centrosome) and one for the body\n// haze. LIN holds the merged colour and BL its blur for the glow; TMP is scratch.\nconst SA = new Float32Array(N), ST = new Float32Array(N), SD = new Float32Array(N), SC = new Float32Array(N), HZ = new Float32Array(N);\nconst LIN = new Float32Array(N * 3), BL = new Float32Array(N * 3), TMP = new Float32Array(N * 3);\nlet Z = 1, TT = 0;\n\nfunction newCell(x, y, p, B) {\n  const c = {\n    x, y, vx: 0, vy: 0, a: rnd() * PI, hd: rnd() * TAU, p, rate: 0.85 + 0.3 * rnd(), B: B || 12 + 2 * rnd(),\n    sd: floor(rnd() * 9973), w1: rnd() * TAU, w2: rnd() * TAU, w3: rnd() * TAU, nf: 22 + floor(rnd() * 7), cang: rnd() * TAU,\n    ox: rnd() * 64, oy: rnd() * 64, tilt: (rnd() - 0.5) * 0.4, al: 1, out: 0, br: 0, bx: 0, by: 0,\n    ca: 1, sa: 0, e: 0, rl: 5, kk: 2, pin: 0, wa: 0, hdl: 0, lam: 0, cx: 1, fur: 0, nS: 0, rn: 3, cond: 0, dense: 0, dS: 0, dr: 2,\n    Lp: 3, sp: 0, net: 0, ast: 0, chA: 0, sh: 0.5, pf: 0, ip: 0, ft: 0, fa: 0, cu: 0, cv: 0, dup: 0, rad: 10, p1u: 0, p1v: 0, p2u: 0, p2v: 0,\n    ch: new Float32Array(NCH * 4), wt: new Float32Array(64), fw: new Float32Array(64), gp: new Float32Array(64),\n  };\n  for (let j = 0; j \u003c NCH; j++) {\n    const r = 0.75 * sqrt(rnd()), q = rnd() * TAU;\n    c.ch[j * 4] = r * cos(q);\n    c.ch[j * 4 + 1] = r * sin(q);\n    c.ch[j * 4 + 2] = ((j + 0.5) / NCH) * 2 - 1 + (rnd() - 0.5) * 0.15;\n    c.ch[j * 4 + 3] = rnd() * PI;\n  }\n  return c;\n}\n\n// Where the cell is in its cycle decides its shape and what each dye shows.\nfunction geo(c) {\n  const p = c.p, B = c.B, Rm = 0.8 * B;\n  let rho = 1, R = Rm, f;\n  if (p \u003c P1) (f = sm(0, P1, p)), (rho = 1 - f), (R = mix(0.59 * B, 0.74 * B, f));\n  else if (p \u003c P2) (rho = 0), (R = mix(0.74 * B, B, (p - P1) / (P2 - P1)));\n  else if (p \u003c P3) (f = sm(P2, P3, p)), (rho = f), (R = mix(B, Rm, f));\n  const fa = (c.fa = sm(P5, P6, p)), ft = (c.ft = sm(P6, 1, p));\n  let e = 0.3 * R * (1 - rho);\n  if (p >= P5) e = p \u003c P6 ? 0.3 * Rm * fa : mix(0.3, 0.58, ft) * Rm;\n  c.e = e;\n  c.rl = R - 0.45 * e;\n  c.kk = (p >= P6 ? mix(0.5, 0.06, ft) : 0.5) * R;\n  c.pin = p >= P6 ? 3 * ft * sqrt(ft) : 0;\n  c.wa = 0.16 * (1 - rho) + 0.025;\n  c.lam = 1 - rho;\n  c.cx = mix(0.85, 1.2, rho);\n  c.fur = ft;\n  c.hdl = c.hd - c.a;\n  // Nucleus: whole until the envelope breaks early in prometaphase.\n  c.rn = 0.44 * R;\n  c.nS = p \u003c P3 ? 1 : 1 - sm(P3, P3 + 0.035, p);\n  c.cond = p \u003c P2 || p >= P6 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dense = p \u003c P1 ? 1 - sm(0, P1, p) : p >= P6 ? 1 : 0;\n  c.dS = sm(0.3, 0.8, ft);\n  c.dr = mix(0.13, 0.22, ft) * B;\n  // Chromosomes gather on the plate; in anaphase the sisters part for the poles.\n  c.pf = sm(P3, P4, p);\n  c.chA = p \u003c P3 ? 0 : sm(P3, P3 + 0.03, p) * (1 - sm(0.25, 0.7, ft));\n  const Lp0 = 0.58 * Rm;\n  c.Lp = p \u003c P5 ? Lp0 : p \u003c P6 ? Lp0 + 0.7 * e : mix(0.79, 0.86, ft) * Rm;\n  c.sh = p \u003c P5 ? 0.5 : p \u003c P6 ? mix(0.5, c.Lp - 1.4, fa) : c.Lp - 1.4;\n  c.sp = p \u003c P3 ? 0 : p \u003c P6 ? sm(P3, P4, p) : 1 - ft;\n  c.ip = p \u003c P5 ? 0 : p \u003c P6 ? fa : 1;\n  c.net = p \u003c P1 ? mix(0.45, 1, sm(0, P1, p)) : p \u003c P2 ? 1 : p \u003c P3 ? 1 - sm(P2, P3, p) : 0;\n  c.ast = p \u003c P2 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dup = p > 0.4 && p \u003c P3 ? 1 : 0;\n  // Centrosome beside the nucleus; in prophase the pair travels round it to the poles.\n  c.cu = (c.rn + 1) * cos(c.cang);\n  c.cv = (c.rn + 1) * sin(c.cang);\n  if (p >= P2) {\n    const g = p \u003c P3 ? sm(P2, P3, p) : 1;\n    c.p1u = mix(c.cu, -c.Lp, g);\n    c.p1v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n    c.p2u = mix(c.cu, c.Lp, g);\n    c.p2v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n  }\n  // The ruffled outline and the leading edge, as a table round the cell.\n  for (let k = 0; k \u003c 64; k++) {\n    const th = (k * PI) / 32 - PI, fr = max(0, cos(th - c.hdl)), F = fr * fr * c.lam;\n    c.fw[k] = F;\n    c.gp[k] = 1 - 0.9 * c.lam * sm(0.4, 0.5, 0.5 + 0.28 * sin(3 * th + 2 * c.w2) + 0.22 * sin(7 * th + c.w3));\n    c.wt[k] = c.rl * c.wa * (0.5 * sin(2 * th + c.w1) + 0.3 * sin(3 * th + c.w2) + 0.2 * sin(5 * th + c.w3 + TT * 0.35) + 0.9 * F);\n  }\n  c.rad = (c.e + c.rl * (1 + 1.6 * c.wa) + 2) * Z;\n  c.ca = cos(c.a);\n  c.sa = sin(c.a);\n}\n\n// What shapeD found at the last point it was asked about, kept for drawCell.\n// A typed array, so writing it for every LED makes no garbage.\nconst G = new Float64Array(3);\n// Signed distance to the cell's outline in its own frame: two discs joined\n// smoothly, ruffled, bulging at the leading edge, pinched at the furrow.\nfunction shapeD(c, u, v) {\n  const e = c.e, rl = c.rl, kk = c.kk;\n  const d1 = hypot(u - e, v) - rl, d2 = hypot(u + e, v) - rl, h = cl(0.5 + (0.5 * (d2 - d1)) / kk, 0, 1);\n  let d = mix(d2, d1, h) - kk * h * (1 - h);\n  const th = (G[1] = atan2(v, u)), q = (th + PI) * (32 / PI), k = floor(q), f = q - k, k0 = k & 63, k1 = (k + 1) & 63;\n  G[0] = mix(c.fw[k0], c.fw[k1], f);\n  G[2] = mix(c.gp[k0], c.gp[k1], f);\n  d -= mix(c.wt[k0], c.wt[k1], f);\n  if (c.pin > 0) d += c.pin * exp(-u * u * 0.4);\n  return d;\n}\n\nfunction put(B, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n    const i = y * W + x;\n    if (v > B[i]) B[i] = v;\n  }\n}\n// A soft dot at a world point; weights sharpened so lines stay one LED wide.\nfunction dot(B, wx, wy, a) {\n  const x = (wx - 32) * Z + 31.5, y = (wy - 64) * Z + 63.5, x0 = floor(x), y0 = floor(y);\n  let fx = x - x0, fy = y - y0;\n  (fx = fx * fx * (3 - 2 * fx)), (fy = fy * fy * (3 - 2 * fy));\n  put(B, x0, y0, a * (1 - fx) * (1 - fy));\n  put(B, x0 + 1, y0, a * fx * (1 - fy));\n  put(B, x0, y0 + 1, a * (1 - fx) * fy);\n  put(B, x0 + 1, y0 + 1, a * fx * fy);\n}\n// A curve in the cell's frame from (au, av) to (bu, bv) bowed through (mu, mv).\nfunction curve(B, c, au, av, mu, mv, bu, bv, a) {\n  const n = max(2, ceil((hypot(mu - au, mv - av) + hypot(bu - mu, bv - mv)) * Z * 2.2));\n  for (let k = 0; k \u003c= n; k++) {\n    const t = k / n, s = 1 - t, u = s * s * au + 2 * s * t * mu + t * t * bu, v = s * s * av + 2 * s * t * mv + t * t * bv;\n    dot(B, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, a);\n  }\n}\nconst line = (B, c, au, av, bu, bv, a) => curve(B, c, au, av, (au + bu) / 2, (av + bv) / 2, bu, bv, a);\n\n// Microtubules grown out from (u0, v0) until they meet the cortex.\nfunction rays(c, u0, v0, n, ang, spread, len, a, sd) {\n  const st = 0.45 / Z;\n  for (let i = 0; i \u003c n; i++) {\n    const h1 = hash(c.sd + sd, i), h2 = hash(i, c.sd + sd + 7);\n    let q = ang + (n > 1 ? ((i + 0.5 * h1) / n - 0.5) * spread : 0), u = u0, v = v0;\n    const L = len * (0.7 + 0.45 * h2), curl = (h1 - 0.5) * 0.3, b = a * (0.9 + 0.25 * h2);\n    for (let s = 0; s \u003c L; s += st) {\n      q += curl * st + 0.12 * sin(s * 0.6 + i * 1.7) * st;\n      u += cos(q) * st;\n      v += sin(q) * st;\n      if (shapeD(c, u, v) > -1.6 - 1.4 * G[0]) break;\n      const nq = c.nS > 0.5 ? hypot(u / (c.rn * 1.1), v / (c.rn * 0.92)) : 2;\n      // Asters wrap round the nucleus until its envelope breaks.\n      if (nq \u003c 1 && sd) break;\n      dot(ST, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, nq \u003c 1 ? b * 0.3 : b);\n    }\n  }\n}\n\nfunction chromatin(c, u, v, cond) {\n  const tu = u * 1.5 + c.ox, tv = v * 1.5 + c.oy;\n  let t = mix(0.35 + 0.9 * nz(tu, tv) - 0.6 * exp(-((u - 0.3 * c.rn) ** 2 + (v + 0.2 * c.rn) ** 2) * 0.9), 1.2, c.dense);\n  if (cond > 0) t = mix(t, 1.5 * sm(0.14, 0.04, abs(nz(tu * 1.4 + 17, tv * 1.4 + 5) - 0.5)), cond);\n  return t;\n}\n\nfunction drawCell(c) {\n  const al = c.al, cx = (c.x - 32) * Z + 32, cy = (c.y - 64) * Z + 64, r = c.rad;\n  const x0 = max(0, floor(cx - r)), x1 = min(W - 1, ceil(cx + r)), y0 = max(0, floor(cy - r)), y1 = min(H - 1, ceil(cy + r));\n  if (x0 > x1 || y0 > y1) return;\n  const iz = 1 / Z, rn = c.rn, na = rn * 1.1, nb = rn * 0.92, r2 = r * r;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      if ((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2 > r2) continue;\n      const dx = (x + 0.5 - cx) * iz, dy = (y + 0.5 - cy) * iz, u = dx * c.ca + dy * c.sa, v = -dx * c.sa + dy * c.ca;\n      const d = shapeD(c, u, v);\n      if (d > 0.8) continue;\n      const i = y * W + x;\n      // Actin: the cortex, broad at the leading edge, and the ring at the furrow.\n      const fr = G[0], th = G[1];\n      let A = sm(-1.2, -0.7, d) * sm(0.35, -0.15, d) * c.cx * G[2];\n      if (fr > 0.05) A = max(A, fr * sm(-2.6, -1.9, d) * sm(0.35, -0.15, d) * (0.55 + 0.6 * nz(th * 20.372 + c.oy, c.ox + d)));\n      if (c.lam > 0.05 && d \u003c -1.2) {\n        // Stress fibres along the cell's long axis, some broken off short.\n        const q = (v + c.tilt * u) / 2.7 + c.ox, k = floor(q + 0.5), h = hash(c.sd + 11, k), e = (hash(k, c.sd) - 0.5) * c.rl;\n        if (h > 0.55 && abs(u - e) \u003c c.rl * (0.3 + 0.7 * h) && hypot(u / na, v / nb) > 1.15) A = max(A, c.lam * sm(0.62, 0.22, abs(q - k) * 2.7) * sm(-1.2, -2.2, d));\n      }\n      if (c.fur > 0) A = max(A, 1.3 * c.fur * exp(-u * u * 1.4) * sm(0.3, -0.5, d));\n      if (A * al > SA[i]) SA[i] = A * al;\n      if (d \u003c 0 && al > HZ[i]) HZ[i] = al * sm(0.5, -2, d);\n      // DNA: an interphase nucleus, or the two that reform in telophase.\n      let D = 0;\n      if (c.nS > 0) {\n        const dn = (hypot(u / na, v / nb) - 1) * nb;\n        if (dn \u003c 0.6) D = sm(0.55, -0.45, dn) * c.nS * chromatin(c, u, v, c.cond);\n      }\n      if (c.dS > 0) {\n        const dn = hypot(abs(u) - c.e, v) - c.dr;\n        if (dn \u003c 0.6) D = max(D, sm(0.55, -0.45, dn) * c.dS * chromatin(c, abs(u) - c.e, v, c.cond));\n      }\n      if (D * al > SD[i]) SD[i] = D * al;\n    }\n  const p = c.p, Rm = 0.8 * c.B;\n  // Interphase network from the centrosome.\n  if (c.net > 0.02) rays(c, c.cu, c.cv, c.nf, c.cang, TAU, c.net * 1.6 * c.rl, al, 0);\n  if (p \u003c P2) {\n    dot(SC, c.x + c.cu * c.ca - c.cv * c.sa, c.y + c.cu * c.sa + c.cv * c.ca, 1.2 * al);\n    if (c.dup) dot(SC, c.x + (c.cu + 0.8) * c.ca - c.cv * c.sa, c.y + (c.cu + 0.8) * c.sa + c.cv * c.ca, 1.2 * al);\n  } else {\n    // Asters, and the spindle between its poles.\n    const spr = mix(TAU, 2.2, c.sp), la = c.ast * c.rl * 1.2;\n    rays(c, c.p1u, c.p1v, 9, PI, spr, la, al, 3);\n    rays(c, c.p2u, c.p2v, 9, 0, spr, la, al, 5);\n    dot(SC, c.x + c.p1u * c.ca - c.p1v * c.sa, c.y + c.p1u * c.sa + c.p1v * c.ca, 1.25 * al);\n    dot(SC, c.x + c.p2u * c.ca - c.p2v * c.sa, c.y + c.p2u * c.sa + c.p2v * c.ca, 1.25 * al);\n    const hw = 0.42 * Rm, ch = c.ch, pf = c.pf * c.pf * (3 - 2 * c.pf);\n    for (let j = 0; j \u003c NCH; j++) {\n      const cu = mix(ch[j * 4] * c.rn, 0.25 * sin(TT * 3.5 + j), pf), cv = mix(ch[j * 4 + 1] * c.rn, ch[j * 4 + 2] * hw, pf), o = mix(ch[j * 4 + 3], PI / 2, pf);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const su = cu + s * c.sh * mix(-sin(o), 1, pf), sv = cv + s * c.sh * mix(cos(o), 0, pf);\n        if (c.sp > 0.02) curve(ST, c, s * c.Lp, 0, (s * c.Lp + su) / 2, sv * 1.3, su, sv, c.sp * al * 0.95);\n        if (c.chA > 0.02) {\n          // Sister chromatids, arms trailing back toward the plate in anaphase.\n          const tr = c.fa, du = mix(cos(o), -s * 0.9, tr) * 1.1, dv = mix(sin(o), 0.45 * (cv \u003c 0 ? -1 : 1), tr) * 1.1;\n          line(SD, c, su - du * (1 - tr), sv - dv * (1 - tr), su + du, sv + dv, 1.3 * c.chA * al);\n        }\n      }\n    }\n    // Central spindle, gathered into the midbody as the furrow closes.\n    if (c.ip > 0.02) {\n      const x = max(1.4, (c.sh - 0.8) * (1 - c.ft) + 1.6 * c.ft);\n      for (let k = -1; k \u003c= 1; k++) line(ST, c, -x, k * 1.1 * (1 - c.ft), x, k * 1.1 * (1 - c.ft), c.ip * al * (k ? 0.85 : 1.1));\n    }\n  }\n  // The midbody bridge back to the sister cell, with its ring.\n  if (c.br > 0.02) {\n    const dx = c.bx - c.x, dy = c.by - c.y, L = hypot(dx, dy), r0 = c.rl * 0.8;\n    if (L > r0) {\n      const ux = dx / L, uy = dy / L, n = ceil((L - r0) * Z * 2.2);\n      for (let k = 0; k \u003c= n; k++) dot(ST, c.x + ux * (r0 + ((L - r0) * k) / n), c.y + uy * (r0 + ((L - r0) * k) / n), c.br * al);\n      dot(SA, c.bx, c.by, 1.2 * c.br * al);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = { cells: [], t: 0, k1: -1, pal: new Float32Array(12), cool: 0, n: 0 };\n}\n\n// The emptiest spot in the field: best of a dozen tries.\nfunction freeSpot(S) {\n  let bx = 32, by = 64, bd = -1;\n  for (let k = 0; k \u003c 14; k++) {\n    const x = 6 + rnd() * 52, y = 6 + rnd() * 116;\n    let d = min(x + 6, 70 - x, y + 6, 134 - y) * 0.6;\n    for (const c of S.cells) d = min(d, hypot(c.x - x, c.y - y));\n    if (d > bd) (bd = d), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// Everything here runs on the slide's own clock, ds seconds a step.\nfunction step(S, ds) {\n  const cells = S.cells, n = S.n;\n  S.t += ds;\n  TT = S.t;\n  for (let i = cells.length - 1; i >= 0; i--) {\n    const c = cells[i];\n    c.p += (ds * c.rate) / 30;\n    if (c.br > 0) {\n      c.br = c.p \u003c 0.13 ? 1 - sm(0.07, 0.13, c.p) : 0;\n      if (hypot(c.bx - c.x, c.by - c.y) > c.rl * 2.4) c.br = max(0, c.br - ds * 2);\n    }\n    if (c.p >= 1) {\n      // Abscission: two daughters, each half the size, moving apart.\n      cells.splice(i, 1);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const d = newCell(c.x + s * c.e * c.ca, c.y + s * c.e * c.sa, 0, c.B * (0.95 + 0.1 * rnd()));\n        (d.vx = s * c.ca * 0.7), (d.vy = s * c.sa * 0.7), (d.br = 1), (d.bx = c.x), (d.by = c.y), (d.al = c.al), (d.out = c.out);\n        // Each daughter keeps its centrosome on the far side from its sister.\n        d.hd = c.a + (s \u003c 0 ? PI : 0) + (rnd() - 0.5);\n        d.cang = c.a + (s \u003c 0 ? PI : 0) - d.a;\n        cells.push(d);\n      }\n      continue;\n    }\n    // Crawling: interphase cells wander, round cells sit still.\n    const crawl = c.lam * 0.7;\n    c.hd += (rnd() - 0.5) * ds * 1.2;\n    c.vx *= exp(-ds * 0.6);\n    c.vy *= exp(-ds * 0.6);\n    c.x += (c.vx + cos(c.hd) * crawl) * ds;\n    c.y += (c.vy + sin(c.hd) * crawl) * ds;\n    // The walls turn a cell back and nudge it in.\n    const wx = sm(4, -3, c.x) - sm(60, 67, c.x), wy = sm(4, -3, c.y) - sm(124, 131, c.y);\n    if (wx || wy) {\n      c.hd = atan2(sin(c.hd) + wy * ds * 3, cos(c.hd) + wx * ds * 3);\n      (c.x += wx * ds * 2), (c.y += wy * ds * 2);\n    }\n    if (c.out) c.al -= ds * 0.45;\n    else c.al = min(1, c.al + ds * 0.5);\n  }\n  // Cells push gently apart.\n  for (let i = 0; i \u003c cells.length; i++)\n    for (let j = i + 1; j \u003c cells.length; j++) {\n      const a = cells[i], b = cells[j], dx = b.x - a.x, dy = b.y - a.y, d = hypot(dx, dy) + 1e-6, m = 0.8 * (a.rl + b.rl + a.e + b.e);\n      if (d \u003c 1.8 * m) {\n        const f = (((d \u003c m ? m - d : 0) * 0.5 + (1.8 * m - d) * 0.15) / d) * ds;\n        (a.x -= dx * f), (a.y -= dy * f), (b.x += dx * f), (b.y += dy * f);\n      }\n    }\n  for (let i = cells.length - 1; i >= 0; i--) if (cells[i].al \u003c= 0 && cells[i].out) cells.splice(i, 1);\n  // Keep the count: a crowded interphase cell lifts away, or a new one settles in.\n  let live = 0;\n  for (const c of cells) live += c.out ? 0 : 1;\n  S.cool -= ds;\n  if (live > n && (S.cool \u003c= 0 || live > n + 1)) {\n    let best = null, bs = -1;\n    for (const a of cells) {\n      if (a.out || a.p \u003c 0.14 || a.p > P2 - 0.04) continue;\n      let s = 0;\n      for (const b of cells) if (b !== a) s += max(0, a.rl + b.rl - hypot(a.x - b.x, a.y - b.y));\n      s += max(0, 10 - min(a.x, 64 - a.x, a.y, 128 - a.y));\n      if (s > bs) (bs = s), (best = a);\n    }\n    if (best) (best.out = 1), (S.cool = 0.8);\n  } else if (live \u003c n && S.cool \u003c= 0) {\n    const [x, y] = freeSpot(S), c = newCell(x, y, 0.12 + 0.6 * rnd());\n    c.al = 0;\n    cells.push(c);\n    S.cool = 0.5;\n  }\n  for (const c of cells) geo(c);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 9, 0.06], speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 9, 17));\n  Z = 1 + 1.15 * cl(k[3], 0, 1) ** 1.3;\n  if (k[0] !== S.k1) {\n    const s = cl(k[0], 0, 1) * 3, i = min(2, floor(s)), f = sm(0, 1, s - i);\n    for (let j = 0; j \u003c 4; j++) {\n      let a = STAINS[i][j], b = STAINS[i + 1][j];\n      if (b - a > 180) a += 360;\n      if (a - b > 180) b += 360;\n      hueRGB(mix(a, b, f), S.pal, j * 3);\n    }\n    S.k1 = k[0];\n  }\n  if (!S.cells.length) {\n    for (let i = 0; i \u003c S.n; i++) {\n      const [x, y] = freeSpot(S);\n      S.cells.push(newCell(x, y, (i + 0.8 * rnd()) / S.n));\n    }\n    for (const c of S.cells) geo(c);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    let best = null, bd = 1e9;\n    for (const c of S.cells) {\n      const d = hypot(c.x - 32, c.y - 64);\n      if (!c.out && c.p > P1 && c.p \u003c P2 && d \u003c bd) (bd = d), (best = c);\n    }\n    if (best) best.p = P2;\n  }\n  step(S, cl(dt || 0, 0, 0.1) * speed * 0.5);\n}\n\n// Box blur of radius 2 across and then down, for the glow.\nfunction blur(src, dst) {\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = y * W * 3 + ch;\n      for (let x = -2; x \u003c W; x++) {\n        if (x + 2 \u003c W) s += src[o + (x + 2) * 3];\n        if (x - 3 >= 0) s -= src[o + (x - 3) * 3];\n        if (x >= 0) dst[o + x * 3] = s / 5;\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = x * 3 + ch;\n      for (let y = -2; y \u003c H; y++) {\n        if (y + 2 \u003c H) s += dst[o + (y + 2) * W * 3];\n        if (y - 3 >= 0) s -= dst[o + (y - 3) * W * 3];\n        if (y >= 0) src[o + y * W * 3] = s / 5;\n      }\n    }\n}\n\n// Hard knee: a dye is either lit near full or left under the glow.\nconst knee = (v) => (v \u003c= 0.28 ? 0 : v >= 0.52 ? 255 : 255 * sm(0.28, 0.52, v));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.cells.length) return;\n  SA.fill(0), ST.fill(0), SD.fill(0), SC.fill(0), HZ.fill(0);\n  TT = S.t;\n  for (const c of S.cells) drawCell(c);\n  const P = S.pal;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = SA[i], t = ST[i], d = SD[i], z = SC[i];\n    if (a + t + d + z === 0) {\n      LIN[o] = LIN[o + 1] = LIN[o + 2] = BL[o] = BL[o + 1] = BL[o + 2] = 0;\n      continue;\n    }\n    LIN[o] = BL[o] = min(1, a * P[6] + t * P[3] + d * P[0] + z * P[9]);\n    LIN[o + 1] = BL[o + 1] = min(1, a * P[7] + t * P[4] + d * P[1] + z * P[10]);\n    LIN[o + 2] = BL[o + 2] = min(1, a * P[8] + t * P[5] + d * P[2] + z * P[11]);\n  }\n  blur(BL, TMP);\n  // The glow and a faint body haze stay under 21, below what counts as lit.\n  const h0 = 13 * P[3], h1 = 13 * P[4], h2 = 13 * P[5];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const h = HZ[i];\n    display.setPixel(\n      i & 63,\n      i >> 6,\n      max(knee(LIN[o]), min(21, 24 * BL[o] + h * h0)) | 0,\n      max(knee(LIN[o + 1]), min(21, 24 * BL[o + 1] + h * h1)) | 0,\n      max(knee(LIN[o + 2]), min(21, 24 * BL[o + 2] + h * h2)) | 0,\n    );\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stain","min":0,"max":1,"about":"The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower."},{"name":"Cells","min":9,"max":17,"about":"How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in."},{"name":"Zoom","min":0,"max":1,"about":"The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show."}],"start":[0,2,9,0.06],"measures":{"motion":0.3411,"detail":0.1419,"edges":0.8838,"complexity":0.8038,"coverage":0.2626,"colour":0.5399,"drift":0.2023},"knobResponse":[0.1544,0.1632,0.2075,0.2066]},{"slug":"moire-rings","title":"Moire Rings","family":"wave","round":1,"note":"동심원 두 벌이 서로 지나가고, 어긋나는 자리에 아무도 그리지 않은 무늬가 생겨요.","idea":"Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.","buttons":"K1 tap swaps which set of rings is drawn bright.","code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-moire-rings","type":"code","name":"moire-rings","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two-colour pair around the colour wheel."},{"name":"Speed","min":0.1,"max":6,"about":"How fast the two centres orbit."},{"name":"Rings","min":5,"max":16,"about":"Ring spacing in LEDs; small is a fine moire, large is a few fat bands."},{"name":"Spread","min":-1,"max":1,"about":"How far apart the two centres travel, and below 0 the second one turns the other way."}],"start":[0,2,5,0.06],"measures":{"motion":1.5703,"detail":0.2108,"edges":1,"complexity":0.1822,"coverage":0.7502,"colour":0.4676,"drift":0.1626},"knobResponse":[0.2556,0.2849,0.3431,0.2821]},{"slug":"mood-tint","title":"Mood Tint","family":"cosmetic","round":34,"note":"판 전체가 열에 색이 바뀌는 짙은 보라 코팅이에요. 보이지 않는 손끝이 누른 자리마다 지문 결이 든 옅은 난초색 타원이 피고, 열이 퍼지며 결부터 흐려지고 이웃 자국과 엉겨 붙었다가 다시 보라 속으로 줄어들어요. K1 을 누르면 손바닥 하나가 1.1초 동안 눌러요.","idea":"A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.","buttons":"K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.","code":"// ===== Patternflow pattern =====\n// Title:   Mood Tint\n// Family:  cosmetic\n// Idea:    A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after thermochromic lip tints and mood nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1\n//\n// Knob 1: Hue. The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive.\n// Knob 2: Speed. At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster.\n// Knob 3: Warmth. How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together.\n// Knob 4: Blend. How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring.\n// Buttons: K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Temperatures are in units of a fingertip at Warmth 0 above the room: the\n// room is 0, a fingertip 1. The coat turns at THETA.\nconst THETA = 0.4;\n// Heat diffusion in LED^2 a second and Newton cooling a second, at Speed 2.\nconst ALPHA = 1.1, COOL = 0.32;\n// How fast the coat under a pressed fingertip takes its warmth, a second.\nconst GRIP = 7;\n// Hue of the cool coat at Hue 0: violet. The warm coat is a paler, pinker shade.\nconst H0 = 0.76;\n// The colour table spans temperatures -0.2 to 1.8.\nconst LUT = 512, T0 = -0.2, T1 = 1.8;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, warmth: 0, blend: 0.06, warm: false, clock: 0, nextPress: 0,\n    T: new Float32Array(N), U: new Float32Array(N), room: new Float32Array(N),\n    presses: [], lut: new Uint8Array(LUT * 3), lutKey: \"\", c: [0, 0, 0], c2: [0, 0, 0],\n  };\n  const S = params.s;\n  // The room is not quite even: a soft field of +-0.05 that only the cool\n  // shade shows.\n  const g = [];\n  for (let i = 0; i \u003c 5 * 9; i++) g.push(random() * 2 - 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / W) * 4, v = (y / H) * 8, i = floor(u), j = floor(v), fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * 5 + i], b = g[j * 5 + i + 1], c = g[(j + 1) * 5 + i], d = g[(j + 1) * 5 + i + 1];\n      S.room[y * W + x] = 0.05 * ((a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv);\n    }\n}\n\n// A fingertip pad: an oval about 11 by 16 LEDs, tilted, with whorl ridges\n// 2.3 LEDs apart round a core a little below its middle.\nfunction fingertip(x, y) {\n  return {\n    x, y, rx: 5 + random() * 1.5, ry: 7 + random() * 1.8, a: (random() - 0.5) * 1.1,\n    core: 1 + random() * 2, ph: random() * 6.28, lam: 2.8, palm: false,\n    t: 0, dur: 0.45 + random() * 0.3,\n  };\n}\n\n// The coat's colour at each temperature, rebuilt when a knob moves it.\nfunction buildLut(S) {\n  const key = S.hue.toFixed(3) + S.blend.toFixed(3);\n  if (key === S.lutKey) return;\n  S.lutKey = key;\n  const h = S.hue + H0, hh = h - floor(h), c = S.c, c2 = S.c2;\n  // Orange and yellow go brown or olive when deep, so round them the cool\n  // shade stays bright.\n  const lift = sm(0.0, 0.06, hh) * (1 - sm(0.24, 0.33, hh));\n  const width = 0.012 + 0.6 * S.blend * S.blend;\n  for (let i = 0; i \u003c LUT; i++) {\n    const T = T0 + ((T1 - T0) * i) / (LUT - 1);\n    const m = sm(THETA - width, THETA + width, T);\n    // Cool: deeper the colder it is, a little lighter just short of turning.\n    const vc = 0.44 + 0.34 * lift + 0.12 * sm(-0.1, THETA, T);\n    hsv(h, 0.9 - 0.1 * lift, vc, c);\n    // Warm: pale, and paler the hotter, so a ridge pressed hot is a whiter line.\n    const hot = sm(THETA, THETA + 0.7, T);\n    hsv(h + 0.08, (0.5 - 0.42 * hot) * (1 - 0.5 * lift), 1, c2);\n    for (let k = 0; k \u003c 3; k++) S.lut[i * 3 + k] = round(255 * (c[k] + (c2[k] - c[k]) * m));\n  }\n}\n\n// One moment of the coat: presses warm it, heat spreads and drains away.\nfunction step(S, dt) {\n  const { T, U, room } = S;\n  const Tf = 1.6 ** S.warmth;\n  // Fingertips arrive in little groups of one to three, about every 0.42 s.\n  S.nextPress -= dt;\n  if (S.nextPress \u003c= 0) {\n    S.nextPress = 0.1 + random() * 0.35;\n    const n = random() \u003c 0.55 ? 1 : random() \u003c 0.7 ? 2 : 3;\n    const x0 = 6 + random() * (W - 12), y0 = 8 + random() * (H - 16);\n    for (let i = 0; i \u003c n; i++) S.presses.push(fingertip(x0 + (i - (n - 1) / 2) * 12 + (random() - 0.5) * 3, y0 + (random() - 0.5) * 8));\n  }\n  for (const P of S.presses) {\n    P.t += dt;\n    const env = sm(0, 0.12, P.t) * (1 - sm(P.dur - 0.1, P.dur, P.t));\n    if (env \u003c= 0) continue;\n    const ca = cos(P.a), sa = sin(P.a), R = max(P.rx, P.ry) + 2;\n    const k = 1 - exp(-GRIP * dt * env);\n    for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, P.y + R); y++)\n      for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, P.x + R); x++) {\n        const dx = x - P.x, dy = y - P.y, u = dx * ca + dy * sa, v = -dx * sa + dy * ca;\n        const rho = sqrt((u / P.rx) ** 2 + (v / P.ry) ** 2);\n        if (rho >= 1) continue;\n        let ridge;\n        if (P.palm) ridge = 0.5 + 0.5 * cos(u * 0.35 + 2.2 * sin(v * 0.11 + P.ph)) * cos(v * 0.5 + sin(u * 0.2));\n        else {\n          const vv = v - P.core, rw = sqrt(u * u + vv * vv * 0.7) + 0.8 * sin(atan2(vv, u) + P.ph);\n          ridge = 0.5 + 0.5 * cos((2 * PI * rw) / P.lam);\n        }\n        const s = (1 - sm(0.72, 1, rho)) * (0.58 + 0.42 * ridge);\n        const p = y * W + x, target = Tf * s;\n        if (target > T[p]) T[p] += (target - T[p]) * k;\n      }\n  }\n  S.presses = S.presses.filter((P) => P.t \u003c P.dur);\n  // Heat equation on the panel, its edges insulated, and Newton cooling\n  // toward the room.\n  const a = ALPHA * dt, c = COOL * dt;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p];\n      const l = x > 0 ? T[p - 1] : t, r = x \u003c W - 1 ? T[p + 1] : t, u = y > 0 ? T[p - W] : t, d = y \u003c H - 1 ? T[p + W] : t;\n      U[p] = t + a * (l + r + u + d - 4 * t) - c * (t - room[p]);\n    }\n  T.set(U);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.warmth = cl(k[2], -1, 1);\n  S.blend = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a coat that has been pressed for four seconds.\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const P = fingertip(10 + random() * (W - 20), 22 + random() * (H - 44));\n    Object.assign(P, { rx: 17, ry: 23, a: (random() - 0.5) * 0.5, palm: true, dur: 1.1 });\n    S.presses.push(P);\n  }\n  // Time on the coat runs at Speed / 2; steps stay under 0.07 s so the heat\n  // equation holds steady.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 0.07);\n    step(S, h);\n    left -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  buildLut(S);\n  const { T, lut } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = round(((cl(T[y * W + x], T0, T1) - T0) / (T1 - T0)) * (LUT - 1)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n}\n","layer":{"id":"layer-mood-tint","type":"code","name":"mood-tint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mood Tint\n// Family:  cosmetic\n// Idea:    A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after thermochromic lip tints and mood nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1\n//\n// Knob 1: Hue. The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive.\n// Knob 2: Speed. At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster.\n// Knob 3: Warmth. How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together.\n// Knob 4: Blend. How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring.\n// Buttons: K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Temperatures are in units of a fingertip at Warmth 0 above the room: the\n// room is 0, a fingertip 1. The coat turns at THETA.\nconst THETA = 0.4;\n// Heat diffusion in LED^2 a second and Newton cooling a second, at Speed 2.\nconst ALPHA = 1.1, COOL = 0.32;\n// How fast the coat under a pressed fingertip takes its warmth, a second.\nconst GRIP = 7;\n// Hue of the cool coat at Hue 0: violet. The warm coat is a paler, pinker shade.\nconst H0 = 0.76;\n// The colour table spans temperatures -0.2 to 1.8.\nconst LUT = 512, T0 = -0.2, T1 = 1.8;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, warmth: 0, blend: 0.06, warm: false, clock: 0, nextPress: 0,\n    T: new Float32Array(N), U: new Float32Array(N), room: new Float32Array(N),\n    presses: [], lut: new Uint8Array(LUT * 3), lutKey: \"\", c: [0, 0, 0], c2: [0, 0, 0],\n  };\n  const S = params.s;\n  // The room is not quite even: a soft field of +-0.05 that only the cool\n  // shade shows.\n  const g = [];\n  for (let i = 0; i \u003c 5 * 9; i++) g.push(random() * 2 - 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / W) * 4, v = (y / H) * 8, i = floor(u), j = floor(v), fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * 5 + i], b = g[j * 5 + i + 1], c = g[(j + 1) * 5 + i], d = g[(j + 1) * 5 + i + 1];\n      S.room[y * W + x] = 0.05 * ((a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv);\n    }\n}\n\n// A fingertip pad: an oval about 11 by 16 LEDs, tilted, with whorl ridges\n// 2.3 LEDs apart round a core a little below its middle.\nfunction fingertip(x, y) {\n  return {\n    x, y, rx: 5 + random() * 1.5, ry: 7 + random() * 1.8, a: (random() - 0.5) * 1.1,\n    core: 1 + random() * 2, ph: random() * 6.28, lam: 2.8, palm: false,\n    t: 0, dur: 0.45 + random() * 0.3,\n  };\n}\n\n// The coat's colour at each temperature, rebuilt when a knob moves it.\nfunction buildLut(S) {\n  const key = S.hue.toFixed(3) + S.blend.toFixed(3);\n  if (key === S.lutKey) return;\n  S.lutKey = key;\n  const h = S.hue + H0, hh = h - floor(h), c = S.c, c2 = S.c2;\n  // Orange and yellow go brown or olive when deep, so round them the cool\n  // shade stays bright.\n  const lift = sm(0.0, 0.06, hh) * (1 - sm(0.24, 0.33, hh));\n  const width = 0.012 + 0.6 * S.blend * S.blend;\n  for (let i = 0; i \u003c LUT; i++) {\n    const T = T0 + ((T1 - T0) * i) / (LUT - 1);\n    const m = sm(THETA - width, THETA + width, T);\n    // Cool: deeper the colder it is, a little lighter just short of turning.\n    const vc = 0.44 + 0.34 * lift + 0.12 * sm(-0.1, THETA, T);\n    hsv(h, 0.9 - 0.1 * lift, vc, c);\n    // Warm: pale, and paler the hotter, so a ridge pressed hot is a whiter line.\n    const hot = sm(THETA, THETA + 0.7, T);\n    hsv(h + 0.08, (0.5 - 0.42 * hot) * (1 - 0.5 * lift), 1, c2);\n    for (let k = 0; k \u003c 3; k++) S.lut[i * 3 + k] = round(255 * (c[k] + (c2[k] - c[k]) * m));\n  }\n}\n\n// One moment of the coat: presses warm it, heat spreads and drains away.\nfunction step(S, dt) {\n  const { T, U, room } = S;\n  const Tf = 1.6 ** S.warmth;\n  // Fingertips arrive in little groups of one to three, about every 0.42 s.\n  S.nextPress -= dt;\n  if (S.nextPress \u003c= 0) {\n    S.nextPress = 0.1 + random() * 0.35;\n    const n = random() \u003c 0.55 ? 1 : random() \u003c 0.7 ? 2 : 3;\n    const x0 = 6 + random() * (W - 12), y0 = 8 + random() * (H - 16);\n    for (let i = 0; i \u003c n; i++) S.presses.push(fingertip(x0 + (i - (n - 1) / 2) * 12 + (random() - 0.5) * 3, y0 + (random() - 0.5) * 8));\n  }\n  for (const P of S.presses) {\n    P.t += dt;\n    const env = sm(0, 0.12, P.t) * (1 - sm(P.dur - 0.1, P.dur, P.t));\n    if (env \u003c= 0) continue;\n    const ca = cos(P.a), sa = sin(P.a), R = max(P.rx, P.ry) + 2;\n    const k = 1 - exp(-GRIP * dt * env);\n    for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, P.y + R); y++)\n      for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, P.x + R); x++) {\n        const dx = x - P.x, dy = y - P.y, u = dx * ca + dy * sa, v = -dx * sa + dy * ca;\n        const rho = sqrt((u / P.rx) ** 2 + (v / P.ry) ** 2);\n        if (rho >= 1) continue;\n        let ridge;\n        if (P.palm) ridge = 0.5 + 0.5 * cos(u * 0.35 + 2.2 * sin(v * 0.11 + P.ph)) * cos(v * 0.5 + sin(u * 0.2));\n        else {\n          const vv = v - P.core, rw = sqrt(u * u + vv * vv * 0.7) + 0.8 * sin(atan2(vv, u) + P.ph);\n          ridge = 0.5 + 0.5 * cos((2 * PI * rw) / P.lam);\n        }\n        const s = (1 - sm(0.72, 1, rho)) * (0.58 + 0.42 * ridge);\n        const p = y * W + x, target = Tf * s;\n        if (target > T[p]) T[p] += (target - T[p]) * k;\n      }\n  }\n  S.presses = S.presses.filter((P) => P.t \u003c P.dur);\n  // Heat equation on the panel, its edges insulated, and Newton cooling\n  // toward the room.\n  const a = ALPHA * dt, c = COOL * dt;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p];\n      const l = x > 0 ? T[p - 1] : t, r = x \u003c W - 1 ? T[p + 1] : t, u = y > 0 ? T[p - W] : t, d = y \u003c H - 1 ? T[p + W] : t;\n      U[p] = t + a * (l + r + u + d - 4 * t) - c * (t - room[p]);\n    }\n  T.set(U);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.warmth = cl(k[2], -1, 1);\n  S.blend = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a coat that has been pressed for four seconds.\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const P = fingertip(10 + random() * (W - 20), 22 + random() * (H - 44));\n    Object.assign(P, { rx: 17, ry: 23, a: (random() - 0.5) * 0.5, palm: true, dur: 1.1 });\n    S.presses.push(P);\n  }\n  // Time on the coat runs at Speed / 2; steps stay under 0.07 s so the heat\n  // equation holds steady.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 0.07);\n    step(S, h);\n    left -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  buildLut(S);\n  const { T, lut } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = round(((cl(T[y * W + x], T0, T1) - T0) / (T1 - T0)) * (LUT - 1)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster."},{"name":"Warmth","min":-1,"max":1,"about":"How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together."},{"name":"Blend","min":0,"max":1,"about":"How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring."}],"start":[0,2,0,0.06],"measures":{"motion":0.0548,"detail":0.0134,"edges":0.483,"complexity":0.652,"coverage":1,"colour":0.1889,"drift":0.0997},"knobResponse":[0.4028,0.1176,0.1081,0.0933]},{"slug":"moth-lamp","title":"Moth Lamp","family":"insect","round":20,"note":"벽돌집 처마 밑 사슬에 매달린 옛 등이 흔들리고, 나방이 어둠에서 나선을 그리며 날아와 등을 돌다가 유리와 불빛 든 벽돌에 날개를 펴고 앉아요. K1 을 누르면 박쥐가 빛 속으로 날아들어 나방 한 마리를 채 가요.","idea":"An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.","buttons":"K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.","code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","layer":{"id":"layer-moth-lamp","type":"code","name":"moth-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds."},{"name":"Moths","min":12,"max":120,"about":"Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them."},{"name":"Breeze","min":-1,"max":1,"about":"A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers."}],"start":[0,2,12,0.06],"measures":{"motion":0.1073,"detail":0.0382,"edges":0.2646,"complexity":2.2012,"coverage":0.2737,"colour":0.0944,"drift":0.0456},"knobResponse":[0.0525,0.0467,0.0451,0.0578]},{"slug":"moving-sofa","title":"Moving Sofa","family":"geometry","round":34,"note":"폭 14 LED 의 ㄇ자 복도를 해머슬리 소파가 오른쪽 다리로 올라와 모퉁이를 돌고, 위를 건너 왼쪽 다리로 내려가요. 모퉁이마다 안쪽 모서리가 소파의 금빛 반원 홈 안을 지나가고, 소파 뒤에 옅게 붙어 온 띠가 벽에 깎여 나가 소파 모양만 남아요. K3 은 홈의 반지름을 0 의 반원판에서 넓이 2 인 소파까지 바꿔요.","idea":"Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Moving Sofa\n// Family:  geometry\n// Idea:    Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: moving sofa problem (Leo Moser, 1966) and Hammersley's sofa (John Hammersley, 1968), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1\n//\n// Knob 1: Hue. Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim.\n// Knob 2: Speed. At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds.\n// Knob 3: Hole. The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole.\n// Knob 4: Trail. How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, abs, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (t) => {\n  t = cl(t, 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// One corner of the hallway, in widths: the arm the sofa comes along is\n// 0 \u003c= wy \u003c= 1, wx \u003c= 1, the arm it leaves by 0 \u003c= wx \u003c= 1, wy \u003c= 1, the\n// inner corner the origin and the outer corner (1, 1). On the panel the right\n// corner has wx running up the right leg and wy across, X = XC + U wy and\n// Y = YC - U wx; the left corner is its mirror image, X -> 64 - X.\nconst U = 14, XC = 49, YC = 15;\n\n// Hole 0 is r = 2/pi, where the area pi/2 + 2r - pi r^2 / 2 is largest.\n// Gerver's sofa of 1992, area 2.2195, is larger still and is not drawn here.\nconst R_OPT = 2 / PI;\nconst holeRadius = (k) => (k \u003c 0 ? R_OPT * (1 + k) : R_OPT + (1 - R_OPT) * k);\n\n// Signed distance, in widths, to Hammersley's sofa with hole radius r: the\n// points with y >= 0 within 1 of the segment from (-r, 0) to (r, 0), less\n// the half disc of radius r on the origin. Negative inside. Below the flat\n// side it is the distance to the two flat pieces, so a sharp end of the hole\n// touching a wall does not bleed into the wall's LED.\nfunction sdf(x, y, r) {\n  const ax = abs(x);\n  if (y \u003c 0) {\n    const ex = ax \u003c r ? r - ax : ax > r + 1 ? ax - r - 1 : 0;\n    return sqrt(ex * ex + y * y);\n  }\n  const dx = ax > r ? ax - r : 0;\n  return max(-y, sqrt(dx * dx + y * y) - 1, r - sqrt(x * x + y * y));\n}\n// Whether the sofa's nearest edge to (x, y) is the hole's semicircle.\nconst notch = (x, y, r) => r > 0.02 && x * x + y * y \u003c (r + 0.12) * (r + 0.12) && abs(x) \u003c r + 0.04;\n\n// How far (x, y), in the sofa's frame, lies inside every position the\n// hallway has taken in a turn so far, th of the way round, starting from the\n// strip behind the sofa's front: negative once some wall has passed through\n// it. The outer wall a = 1 has kept (x - r, y) within 1 of the origin in the\n// directions 0..th, the wall b = 1 has done the same for (x + r, y) in the\n// directions 90..90+th degrees, and the inner corner has cut from the hole\n// the part below the chord from (-r, 0) at angle th. At th = 90 degrees\n// this is the sofa.\nfunction block(x, y, th, r) {\n  const ct = cos(th), st = sin(th);\n  let s = min(y, 1 - y, r + 1 - x);\n  const vx = x - r, vy = y;\n  if (vy >= 0 && vx * st - vy * ct >= 0) s = min(s, 1 - sqrt(vx * vx + vy * vy));\n  else s = min(s, 1 - vx, 1 - vx * ct - vy * st);\n  const wx = x + r, wy = y;\n  if (wx \u003c= 0 && wy * st + wx * ct >= 0) s = min(s, 1 - sqrt(wx * wx + wy * wy));\n  else s = min(s, 1 - wy, 1 + wx * st - wy * ct);\n  return min(s, max(sqrt(x * x + y * y) - r, -wx * st + wy * ct));\n}\n\n// The motion, seen from the sofa: the hallway is turned through th and its\n// inner corner sits at c. While th runs from 0 to 90 degrees c runs round\n// the hole's semicircle, c = r (cos 2th, sin 2th). By Thales the inner walls\n// then pass through the hole's two ends, and the outer walls stay tangent to\n// the two quarter discs, so the sofa touches both outer walls all the way\n// round. Phases, in seconds at Speed 2: up the right leg, round the right\n// corner, across the top, round the left corner (the right one mirrored and\n// run backwards), down the left leg.\nconst TA = 4.4, TB = 2.4, TC = 1.4;\nconst T1 = TA, T2 = T1 + TB, T3 = T2 + TC, T4 = T3 + TB, LIFE = T4 + TA;\n// A new sofa sets off as the last one starts round the right corner, so it\n// reaches that corner as the last one leaves the left.\nconst PERIOD = TB + TC + TB;\n// Up the leg from below the panel, and the run across the top.\nconst DA = 9.2, EC = (XC - (64 - XC)) / U;\nconst KE = 0.3, VE = 1 / (1 - KE / 2);\n// Constant speed, then a stop over the last KE of the way.\nfunction easeOut(t) {\n  t = cl(t, 0, 1);\n  if (t \u003c= 1 - KE) return VE * t;\n  const s = t - (1 - KE);\n  return VE * (1 - KE + s - (s * s) / (2 * KE));\n}\nfunction turn(th, r, o) {\n  o.th = th;\n  o.cx = r * cos(2 * th);\n  o.cy = r * sin(2 * th);\n}\n// Pose at phase ph: o.m is 1 when it is given in the left corner's mirrored\n// frame.\nfunction pose(ph, r, o) {\n  o.m = 0;\n  o.cy = 0;\n  if (ph \u003c T1) {\n    o.th = 0;\n    o.cx = r + DA * (1 - easeOut(ph / TA));\n  } else if (ph \u003c T2) turn((PI / 2) * sm((ph - T1) / TB), r, o);\n  else if (ph \u003c T3) {\n    o.th = PI / 2;\n    o.cx = -r - (EC - 2 * r) * sm((ph - T2) / TC);\n  } else {\n    o.m = 1;\n    if (ph \u003c T4) turn((PI / 2) * (1 - sm((ph - T3) / TB)), r, o);\n    else {\n      o.th = 0;\n      o.cx = r + DA * (1 - easeOut(1 - (ph - T4) / TA));\n    }\n  }\n  return o;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Calls f(X, Y, sx, sy) for every LED near the sofa at pose P, with (sx, sy)\n// the LED centre in the sofa's frame.\nfunction eachLed(P, r, f, xa = -r - 1, xb = r + 1) {\n  const ct = cos(P.th), st = sin(P.th);\n  let x0 = 99, x1 = -99, y0 = 999, y1 = -999;\n  for (const [sx, sy] of [[xa, 0], [xb, 0], [xa, 1], [xb, 1]]) {\n    const ex = sx - P.cx, ey = sy - P.cy, wx = ex * ct + ey * st, wy = -ex * st + ey * ct;\n    const X = XC + U * wy, Y = YC - U * wx;\n    x0 = min(x0, X), x1 = max(x1, X), y0 = min(y0, Y), y1 = max(y1, Y);\n  }\n  x0 = max(0, floor(x0) - 1), x1 = min(W - 1, floor(x1) + 1), y0 = max(0, floor(y0) - 1), y1 = min(H - 1, floor(y1) + 1);\n  for (let Y = y0; Y \u003c= y1; Y++)\n    for (let Xm = x0; Xm \u003c= x1; Xm++) {\n      const wx = (YC - (Y + 0.5)) / U, wy = (Xm + 0.5 - XC) / U;\n      f(P.m ? W - 1 - Xm : Xm, Y, P.cx + wx * ct - wy * st, P.cy + wx * st + wy * ct);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    clock: 0, hue: 0, speed: 2, hole: 0, trail: 0.06, r: R_OPT, warm: false,\n    wake: new Float32Array(N), buf: new Float32Array(N * 3),\n    pose: { th: 0, cx: 0, cy: 0, m: 0 }, c1: [0, 0, 0], c2: [0, 0, 0], c3: [0, 0, 0],\n  };\n}\n\n// Advance the clock by dc and let the floor's glow where the sofas have been\n// fade.\nfunction step(S, dc) {\n  S.clock += dc;\n  const keep = exp(-dc / (0.25 + 1.5 * S.trail + 6 * S.trail * S.trail)), r = S.r, wake = S.wake;\n  for (let p = 0; p \u003c N; p++) wake[p] *= keep;\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    eachLed(pose(ph, r, S.pose), r, (X, Y, sx, sy) => {\n      const cov = cl(0.5 - sdf(sx, sy, r) * U, 0, 1), p = Y * W + X;\n      if (cov > wake[p]) wake[p] = cov;\n    });\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.hole = cl(k[2], -1, 1);\n  S.trail = cl(k[3], 0, 1);\n  S.r = holeRadius(S.hole);\n  if (!S.warm) {\n    // Open with a sofa 1.6 s short of the right corner and four seconds of\n    // memory already laid down behind it.\n    S.clock = T1 - 1.6 - 4;\n    for (let i = 0; i \u003c 60; i++) step(S, 4 / 60);\n    S.warm = true;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, c1, c2, c3, wake } = S, r = S.r, h = S.hue + 0.52;\n  buf.fill(0);\n  const put = (p, c, v) => {\n    buf[p * 3] = max(buf[p * 3], c[0] * v);\n    buf[p * 3 + 1] = max(buf[p * 3 + 1], c[1] * v);\n    buf[p * 3 + 2] = max(buf[p * 3 + 2], c[2] * v);\n  };\n  const set = (p, c, v, al) => {\n    buf[p * 3] += (c[0] * v - buf[p * 3]) * al;\n    buf[p * 3 + 1] += (c[1] * v - buf[p * 3 + 1]) * al;\n    buf[p * 3 + 2] += (c[2] * v - buf[p * 3 + 2]) * al;\n  };\n\n  // Walls one LED outside the hallway, the solid between the legs hatched\n  // as on a floor plan, and the floor's glow where the sofas have passed.\n  hsv(h + 0.2, 0.45, 1, c1);\n  for (let Y = 0; Y \u003c H; Y++) put(Y * W, c1, 70), put(Y * W + 63, c1, 70);\n  for (let X = 0; X \u003c W; X++) put(X, c1, 70);\n  for (let Y = 15; Y \u003c H; Y++) put(Y * W + 15, c1, 70), put(Y * W + 48, c1, 70);\n  for (let X = 15; X \u003c= 48; X++) put(15 * W + X, c1, 70);\n  for (let Y = 16; Y \u003c H; Y++) for (let X = 16; X \u003c 48; X++) if ((X + Y) % 5 === 0) put(Y * W + X, c1, 40);\n  hsv(h + 0.05, 0.6, 1, c2);\n  for (let p = 0; p \u003c N; p++) if (wake[p] > 0.01) put(p, c2, 100 * wake[p]);\n\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    const P = pose(ph, r, S.pose);\n    // In a turn, the rest of the strip behind the sofa that every position\n    // of the hallway so far still holds: the walls shave it down to the sofa.\n    const u = ph >= T1 && ph \u003c T2 ? (ph - T1) / TB : ph >= T3 && ph \u003c T4 ? (ph - T3) / TB : -1;\n    if (u >= 0) {\n      const th = (PI / 2) * sm(u), al = sm(u / 0.12), back = min(r + 1 / max(sin(th), 1e-3), 12);\n      hsv(h, 0.45, 1, c1);\n      eachLed(P, r, (X, Y, sx, sy) => {\n        // Each corner's own hallway runs on for ever; the panel's other\n        // corner stops the strip.\n        if (X \u003c 1 || X > 62 || Y \u003c 1 || (Y > 14 && X > 14 && X \u003c 49)) return;\n        const x = P.m ? -sx : sx, ex = cl(0.5 + block(x, sy, th, r) * U, 0, 1) - cl(0.5 - sdf(sx, sy, r) * U, 0, 1);\n        if (ex > 0) put(Y * W + X, c1, 80 * ex * al);\n      }, P.m ? -r - 1 : -back, P.m ? back : r + 1);\n    }\n    hsv(h, 0.85, 1, c1);\n    hsv(h, 0.3, 1, c2);\n    hsv(h + 0.62, 0.55, 1, c3);\n    eachLed(P, r, (X, Y, sx, sy) => {\n      const dl = sdf(sx, sy, r) * U, cov = cl(0.5 - dl, 0, 1);\n      if (cov \u003c= 0) return;\n      const p = Y * W + X;\n      set(p, c1, 150, cov);\n      put(p, notch(sx, sy, r) ? c3 : c2, 255 * cl(1.6 + dl, 0, 1) * cov);\n    });\n  }\n  // The inner corners.\n  hsv(h + 0.62, 0.3, 1, c3);\n  put(15 * W + 48, c3, 255);\n  put(15 * W + 15, c3, 255);\n\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(min(255, buf[p * 3])), round(min(255, buf[p * 3 + 1])), round(min(255, buf[p * 3 + 2])));\n}\n","layer":{"id":"layer-moving-sofa","type":"code","name":"moving-sofa","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moving Sofa\n// Family:  geometry\n// Idea:    Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: moving sofa problem (Leo Moser, 1966) and Hammersley's sofa (John Hammersley, 1968), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1\n//\n// Knob 1: Hue. Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim.\n// Knob 2: Speed. At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds.\n// Knob 3: Hole. The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole.\n// Knob 4: Trail. How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, abs, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (t) => {\n  t = cl(t, 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// One corner of the hallway, in widths: the arm the sofa comes along is\n// 0 \u003c= wy \u003c= 1, wx \u003c= 1, the arm it leaves by 0 \u003c= wx \u003c= 1, wy \u003c= 1, the\n// inner corner the origin and the outer corner (1, 1). On the panel the right\n// corner has wx running up the right leg and wy across, X = XC + U wy and\n// Y = YC - U wx; the left corner is its mirror image, X -> 64 - X.\nconst U = 14, XC = 49, YC = 15;\n\n// Hole 0 is r = 2/pi, where the area pi/2 + 2r - pi r^2 / 2 is largest.\n// Gerver's sofa of 1992, area 2.2195, is larger still and is not drawn here.\nconst R_OPT = 2 / PI;\nconst holeRadius = (k) => (k \u003c 0 ? R_OPT * (1 + k) : R_OPT + (1 - R_OPT) * k);\n\n// Signed distance, in widths, to Hammersley's sofa with hole radius r: the\n// points with y >= 0 within 1 of the segment from (-r, 0) to (r, 0), less\n// the half disc of radius r on the origin. Negative inside. Below the flat\n// side it is the distance to the two flat pieces, so a sharp end of the hole\n// touching a wall does not bleed into the wall's LED.\nfunction sdf(x, y, r) {\n  const ax = abs(x);\n  if (y \u003c 0) {\n    const ex = ax \u003c r ? r - ax : ax > r + 1 ? ax - r - 1 : 0;\n    return sqrt(ex * ex + y * y);\n  }\n  const dx = ax > r ? ax - r : 0;\n  return max(-y, sqrt(dx * dx + y * y) - 1, r - sqrt(x * x + y * y));\n}\n// Whether the sofa's nearest edge to (x, y) is the hole's semicircle.\nconst notch = (x, y, r) => r > 0.02 && x * x + y * y \u003c (r + 0.12) * (r + 0.12) && abs(x) \u003c r + 0.04;\n\n// How far (x, y), in the sofa's frame, lies inside every position the\n// hallway has taken in a turn so far, th of the way round, starting from the\n// strip behind the sofa's front: negative once some wall has passed through\n// it. The outer wall a = 1 has kept (x - r, y) within 1 of the origin in the\n// directions 0..th, the wall b = 1 has done the same for (x + r, y) in the\n// directions 90..90+th degrees, and the inner corner has cut from the hole\n// the part below the chord from (-r, 0) at angle th. At th = 90 degrees\n// this is the sofa.\nfunction block(x, y, th, r) {\n  const ct = cos(th), st = sin(th);\n  let s = min(y, 1 - y, r + 1 - x);\n  const vx = x - r, vy = y;\n  if (vy >= 0 && vx * st - vy * ct >= 0) s = min(s, 1 - sqrt(vx * vx + vy * vy));\n  else s = min(s, 1 - vx, 1 - vx * ct - vy * st);\n  const wx = x + r, wy = y;\n  if (wx \u003c= 0 && wy * st + wx * ct >= 0) s = min(s, 1 - sqrt(wx * wx + wy * wy));\n  else s = min(s, 1 - wy, 1 + wx * st - wy * ct);\n  return min(s, max(sqrt(x * x + y * y) - r, -wx * st + wy * ct));\n}\n\n// The motion, seen from the sofa: the hallway is turned through th and its\n// inner corner sits at c. While th runs from 0 to 90 degrees c runs round\n// the hole's semicircle, c = r (cos 2th, sin 2th). By Thales the inner walls\n// then pass through the hole's two ends, and the outer walls stay tangent to\n// the two quarter discs, so the sofa touches both outer walls all the way\n// round. Phases, in seconds at Speed 2: up the right leg, round the right\n// corner, across the top, round the left corner (the right one mirrored and\n// run backwards), down the left leg.\nconst TA = 4.4, TB = 2.4, TC = 1.4;\nconst T1 = TA, T2 = T1 + TB, T3 = T2 + TC, T4 = T3 + TB, LIFE = T4 + TA;\n// A new sofa sets off as the last one starts round the right corner, so it\n// reaches that corner as the last one leaves the left.\nconst PERIOD = TB + TC + TB;\n// Up the leg from below the panel, and the run across the top.\nconst DA = 9.2, EC = (XC - (64 - XC)) / U;\nconst KE = 0.3, VE = 1 / (1 - KE / 2);\n// Constant speed, then a stop over the last KE of the way.\nfunction easeOut(t) {\n  t = cl(t, 0, 1);\n  if (t \u003c= 1 - KE) return VE * t;\n  const s = t - (1 - KE);\n  return VE * (1 - KE + s - (s * s) / (2 * KE));\n}\nfunction turn(th, r, o) {\n  o.th = th;\n  o.cx = r * cos(2 * th);\n  o.cy = r * sin(2 * th);\n}\n// Pose at phase ph: o.m is 1 when it is given in the left corner's mirrored\n// frame.\nfunction pose(ph, r, o) {\n  o.m = 0;\n  o.cy = 0;\n  if (ph \u003c T1) {\n    o.th = 0;\n    o.cx = r + DA * (1 - easeOut(ph / TA));\n  } else if (ph \u003c T2) turn((PI / 2) * sm((ph - T1) / TB), r, o);\n  else if (ph \u003c T3) {\n    o.th = PI / 2;\n    o.cx = -r - (EC - 2 * r) * sm((ph - T2) / TC);\n  } else {\n    o.m = 1;\n    if (ph \u003c T4) turn((PI / 2) * (1 - sm((ph - T3) / TB)), r, o);\n    else {\n      o.th = 0;\n      o.cx = r + DA * (1 - easeOut(1 - (ph - T4) / TA));\n    }\n  }\n  return o;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Calls f(X, Y, sx, sy) for every LED near the sofa at pose P, with (sx, sy)\n// the LED centre in the sofa's frame.\nfunction eachLed(P, r, f, xa = -r - 1, xb = r + 1) {\n  const ct = cos(P.th), st = sin(P.th);\n  let x0 = 99, x1 = -99, y0 = 999, y1 = -999;\n  for (const [sx, sy] of [[xa, 0], [xb, 0], [xa, 1], [xb, 1]]) {\n    const ex = sx - P.cx, ey = sy - P.cy, wx = ex * ct + ey * st, wy = -ex * st + ey * ct;\n    const X = XC + U * wy, Y = YC - U * wx;\n    x0 = min(x0, X), x1 = max(x1, X), y0 = min(y0, Y), y1 = max(y1, Y);\n  }\n  x0 = max(0, floor(x0) - 1), x1 = min(W - 1, floor(x1) + 1), y0 = max(0, floor(y0) - 1), y1 = min(H - 1, floor(y1) + 1);\n  for (let Y = y0; Y \u003c= y1; Y++)\n    for (let Xm = x0; Xm \u003c= x1; Xm++) {\n      const wx = (YC - (Y + 0.5)) / U, wy = (Xm + 0.5 - XC) / U;\n      f(P.m ? W - 1 - Xm : Xm, Y, P.cx + wx * ct - wy * st, P.cy + wx * st + wy * ct);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    clock: 0, hue: 0, speed: 2, hole: 0, trail: 0.06, r: R_OPT, warm: false,\n    wake: new Float32Array(N), buf: new Float32Array(N * 3),\n    pose: { th: 0, cx: 0, cy: 0, m: 0 }, c1: [0, 0, 0], c2: [0, 0, 0], c3: [0, 0, 0],\n  };\n}\n\n// Advance the clock by dc and let the floor's glow where the sofas have been\n// fade.\nfunction step(S, dc) {\n  S.clock += dc;\n  const keep = exp(-dc / (0.25 + 1.5 * S.trail + 6 * S.trail * S.trail)), r = S.r, wake = S.wake;\n  for (let p = 0; p \u003c N; p++) wake[p] *= keep;\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    eachLed(pose(ph, r, S.pose), r, (X, Y, sx, sy) => {\n      const cov = cl(0.5 - sdf(sx, sy, r) * U, 0, 1), p = Y * W + X;\n      if (cov > wake[p]) wake[p] = cov;\n    });\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.hole = cl(k[2], -1, 1);\n  S.trail = cl(k[3], 0, 1);\n  S.r = holeRadius(S.hole);\n  if (!S.warm) {\n    // Open with a sofa 1.6 s short of the right corner and four seconds of\n    // memory already laid down behind it.\n    S.clock = T1 - 1.6 - 4;\n    for (let i = 0; i \u003c 60; i++) step(S, 4 / 60);\n    S.warm = true;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, c1, c2, c3, wake } = S, r = S.r, h = S.hue + 0.52;\n  buf.fill(0);\n  const put = (p, c, v) => {\n    buf[p * 3] = max(buf[p * 3], c[0] * v);\n    buf[p * 3 + 1] = max(buf[p * 3 + 1], c[1] * v);\n    buf[p * 3 + 2] = max(buf[p * 3 + 2], c[2] * v);\n  };\n  const set = (p, c, v, al) => {\n    buf[p * 3] += (c[0] * v - buf[p * 3]) * al;\n    buf[p * 3 + 1] += (c[1] * v - buf[p * 3 + 1]) * al;\n    buf[p * 3 + 2] += (c[2] * v - buf[p * 3 + 2]) * al;\n  };\n\n  // Walls one LED outside the hallway, the solid between the legs hatched\n  // as on a floor plan, and the floor's glow where the sofas have passed.\n  hsv(h + 0.2, 0.45, 1, c1);\n  for (let Y = 0; Y \u003c H; Y++) put(Y * W, c1, 70), put(Y * W + 63, c1, 70);\n  for (let X = 0; X \u003c W; X++) put(X, c1, 70);\n  for (let Y = 15; Y \u003c H; Y++) put(Y * W + 15, c1, 70), put(Y * W + 48, c1, 70);\n  for (let X = 15; X \u003c= 48; X++) put(15 * W + X, c1, 70);\n  for (let Y = 16; Y \u003c H; Y++) for (let X = 16; X \u003c 48; X++) if ((X + Y) % 5 === 0) put(Y * W + X, c1, 40);\n  hsv(h + 0.05, 0.6, 1, c2);\n  for (let p = 0; p \u003c N; p++) if (wake[p] > 0.01) put(p, c2, 100 * wake[p]);\n\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    const P = pose(ph, r, S.pose);\n    // In a turn, the rest of the strip behind the sofa that every position\n    // of the hallway so far still holds: the walls shave it down to the sofa.\n    const u = ph >= T1 && ph \u003c T2 ? (ph - T1) / TB : ph >= T3 && ph \u003c T4 ? (ph - T3) / TB : -1;\n    if (u >= 0) {\n      const th = (PI / 2) * sm(u), al = sm(u / 0.12), back = min(r + 1 / max(sin(th), 1e-3), 12);\n      hsv(h, 0.45, 1, c1);\n      eachLed(P, r, (X, Y, sx, sy) => {\n        // Each corner's own hallway runs on for ever; the panel's other\n        // corner stops the strip.\n        if (X \u003c 1 || X > 62 || Y \u003c 1 || (Y > 14 && X > 14 && X \u003c 49)) return;\n        const x = P.m ? -sx : sx, ex = cl(0.5 + block(x, sy, th, r) * U, 0, 1) - cl(0.5 - sdf(sx, sy, r) * U, 0, 1);\n        if (ex > 0) put(Y * W + X, c1, 80 * ex * al);\n      }, P.m ? -r - 1 : -back, P.m ? back : r + 1);\n    }\n    hsv(h, 0.85, 1, c1);\n    hsv(h, 0.3, 1, c2);\n    hsv(h + 0.62, 0.55, 1, c3);\n    eachLed(P, r, (X, Y, sx, sy) => {\n      const dl = sdf(sx, sy, r) * U, cov = cl(0.5 - dl, 0, 1);\n      if (cov \u003c= 0) return;\n      const p = Y * W + X;\n      set(p, c1, 150, cov);\n      put(p, notch(sx, sy, r) ? c3 : c2, 255 * cl(1.6 + dl, 0, 1) * cov);\n    });\n  }\n  // The inner corners.\n  hsv(h + 0.62, 0.3, 1, c3);\n  put(15 * W + 48, c3, 255);\n  put(15 * W + 15, c3, 255);\n\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(min(255, buf[p * 3])), round(min(255, buf[p * 3 + 1])), round(min(255, buf[p * 3 + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds."},{"name":"Hole","min":-1,"max":1,"about":"The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole."},{"name":"Trail","min":0,"max":1,"about":"How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches."}],"start":[0,2,0,0.06],"measures":{"motion":0.3083,"detail":0.0578,"edges":0.2742,"complexity":0.3757,"coverage":0.3481,"colour":0.1671,"drift":0.1766},"knobResponse":[0.06,0.1158,0.0644,0.0648]},{"slug":"needlepoint","title":"Needlepoint","family":"textile","round":19,"note":"슬레이트 틀의 인쇄 캔버스를 바늘이 오른쪽 위 구석부터 바스켓위브로 한 대각선씩 메워 가요. 앵무새 쿠션이나 검은 바탕의 베를린 장미, 알파벳 샘플러가 다 차면 틀이 굴러 새 캔버스를 감아 와요.","idea":"A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","layer":{"id":"layer-needlepoint","type":"code","name":"needlepoint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wool","min":0,"max":1,"about":"Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground."},{"name":"Speed","min":0.2,"max":3,"about":"Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds."},{"name":"Design","min":0,"max":2,"about":"Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow."}],"start":[0,2,0,0.06],"measures":{"motion":0.1581,"detail":0.3325,"edges":0.8053,"complexity":1.8885,"coverage":0.6687,"colour":0.2513,"drift":0.043},"knobResponse":[0.1114,0.0649,0.1048,0.0607]},{"slug":"neon-alley","title":"Neon Alley","family":"city","round":16,"note":"밤 골목의 벽에 유리관을 구부린 네온 그림 간판이 지붕부터 젖은 길까지 걸려서, 관이 하나씩 켜지고 화살표가 달리고 지친 관 하나가 지직거려요. K1 을 누르면 정전이 됐다가 간판이 하나씩 다시 켜지고, K2 를 누르면 간판이 새로 걸려요.","idea":"The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.","buttons":"K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.","code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","layer":{"id":"layer-neon-alley","type":"code","name":"neon-alley","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta."},{"name":"Pace","min":0,"max":4,"about":"The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between."},{"name":"Wear","min":0,"max":1,"about":"How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark."},{"name":"Rain","min":0,"max":1,"about":"A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow."}],"start":[0,2,0,0.06],"measures":{"motion":0.7208,"detail":0.1177,"edges":0.5393,"complexity":0.4294,"coverage":0.2587,"colour":0.5724,"drift":0.1545},"knobResponse":[0.2671,0.0583,0.0882,0.0858]},{"slug":"night-flight","title":"Night Flight","family":"city","round":22,"note":"여객기 창으로 내려다본 밤 도시예요. 1 LED 가로등이 바둑판 길과 대로, 강 위 다리를 따라 레이스처럼 이어지고, 고속도로에는 흰 전조등과 빨간 미등이 흘러요. 도시는 초록 항법등과 흰 섬광등이 달린 날개 끝을 지나 왼쪽 아래로 천천히 미끄러져요.","idea":"A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.","buttons":"K3 tap flies over another city.","code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-night-flight","type":"code","name":"night-flight","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1."},{"name":"Speed","min":0.2,"max":3,"about":"Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it."},{"name":"Grid","min":0,"max":1,"about":"Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones."},{"name":"Haze","min":0,"max":1,"about":"Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through."}],"start":[0,2,0,0.06],"measures":{"motion":0.3475,"detail":0.3276,"edges":0.2578,"complexity":1.0097,"coverage":0.5044,"colour":0.2424,"drift":0.0667},"knobResponse":[0.0508,0.1119,0.0511,0.1477]},{"slug":"nixie","title":"Nixie","family":"circuit","round":21,"note":"회로판 소켓에 선 닉시관 속, 육각 그물 뒤에 겹겹이 선 숫자 철사 가운데 하나가 네온 주황으로 빛나요. 숫자가 돌다가 하나씩 멈추고, Mode 노브를 돌리면 주파수 계수기나 시계가 돼요.","idea":"Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.","buttons":"K1 tap runs every cathode in turn now.","code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-nixie","type":"code","name":"nixie","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gas","min":0,"max":1,"about":"What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops."},{"name":"Rows","min":1,"max":3,"about":"One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter."},{"name":"Mode","min":0,"max":3,"about":"Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3."}],"start":[0,2,1,0.06],"measures":{"motion":0.4696,"detail":0.0533,"edges":0.238,"complexity":1.7971,"coverage":0.5829,"colour":0.1892,"drift":0.1676},"knobResponse":[0.0576,0.0717,0.1676,0.0732]},{"slug":"noborigama","title":"Noborigama","family":"pottery","round":26,"note":"밤 언덕의 오름가마를 세로로 잘라 봐요. 불이 그릇 쌓인 칸들을 타고 올라 아래 칸은 희고 위 칸은 붉으며, 장작을 넣을 때마다 감시 구멍에서 불길이, 굴뚝에서 검은 연기와 불티가 나와요. K1 은 소성 날짜를 바꾸고, 누르면 모든 구멍에 한꺼번에 불을 넣어요.","idea":"A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.","buttons":"K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.","code":"// ===== Patternflow pattern =====\n// Title:   Noborigama\n// Family:  pottery\n// Idea:    A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the noborigama, the wood-fired climbing kiln of Japan and Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1\n//\n// Knob 1: Firing. The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white.\n// Knob 2: Speed. At 2 the potter stokes every few seconds; 0.2 is ten times slower.\n// Knob 3: Chambers. Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves.\n// Knob 4: Draft. Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame.\n// Buttons: K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi % p), b = hash(xi + 1, yi % p), c = hash(xi, (yi + 1) % p);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, (yi + 1) % p)) * su * sv;\n}\n// Fine noise that wraps every 256 rows, for the quick flicker of flame and smoke.\nconst FN = new Float32Array(64 * 256).map((_, i) => vn((i & 63) * 0.9, ((i >> 6) * 84) / 256, 84));\nconst fn = (x, y) => FN[(y & 255) * 64 + (x & 63)];\n\n// Brick, gas and flame by temperature: dull red at 0.15, orange at 0.6, white\n// heat at 1. Red stops at 232: pinned at 255 it hid the flicker of the hottest\n// chambers, since an LED reads by its brightest channel.\nconst RAMP = [[0, 24, 4, 2], [0.15, 92, 13, 4], [0.3, 158, 30, 6], [0.45, 204, 68, 12], [0.6, 226, 114, 24], [0.75, 232, 160, 50], [0.88, 232, 194, 96], [1, 232, 216, 160], [1.25, 236, 230, 204]];\nconst LUT = new Float32Array(768);\nfor (let i = 0; i \u003c 256; i++) {\n  let k = 0;\n  const T = i / 204;\n  while (k \u003c 7 && T > RAMP[k + 1][0]) k++;\n  const u = cl((T - RAMP[k][0]) / (RAMP[k + 1][0] - RAMP[k][0]), 0, 1);\n  for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(RAMP[k][c + 1], RAMP[k + 1][c + 1], u);\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n// One colour array for every put(), to spare the garbage collector.\nconst C3 = [0, 0, 0];\nconst lc = (T, b = 1) => ((T = lut(T)), C3[0] = LUT[T] * b, C3[1] = LUT[T + 1] * b, C3[2] = LUT[T + 2] * b, C3);\n\nconst SKY = 0, EARTH = 1, WALL = 3, GAS = 4, POT = 5, SHELF = 6, HOLE = 7, FLUE = 8;\n// A vault on low walls: roof height across a chamber, 0.4 at the walls, 1 at the crown.\nconst arch = (u) => 0.4 + 0.6 * sqrt(max(0, 1 - (2 * u - 1) ** 2));\nconst TOP = 18; // the chimney's mouth row\nconst WOOD = [150, 118, 66], TOWEL = [214, 204, 184], FACE = [176, 116, 78], COAT = [46, 60, 128], LEGS = [74, 62, 54], RIM = [255, 150, 60];\n// Jar, flared bowl, bottle and cup: half width up the pot, bottom to top.\nconst prof = (k, t) => (k === 0 ? (t > 0.84 ? 0.5 : 0.6 + 0.4 * sin(PI * t)) : k === 1 ? 0.5 + 0.5 * t : k === 2 ? (t \u003c 0.55 ? 0.55 + 0.45 * sin((PI * t) / 0.55) : t > 0.88 ? 0.5 : 0.3) : 0.8);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    t: 0, n: 0, kind: new Uint8Array(N), ch: new Uint8Array(N), V: F32(N), bg: F32(N * 3), gw: F32(N), f: F32(N * 3), A: F32(W * 64), K: F32(W * 64), Q: F32(W * 64),\n    T: F32(8).fill(-1), Hc: F32(8).fill(-1), age: F32(8).fill(9), q: F32(8), open: F32(8), Te: F32(8), Br: F32(8),\n    puffs: [], sparks: [], logs: [], slugs: [], ev: [], motes: [], pot: { A: 0, tgt: 0, mode: 1, tm: -1.6, thr: 0, k: 0, ph: 0 }, fb: { tm: 1, an: 0 }, flare: 0, np: 0, ns: 0,\n  });\n  for (let k = 0; k \u003c 40; k++) S.motes.push({ x: rnd() * W, y: rnd() * H, e: rnd() \u003c 0.45, ph: rnd() * 7 });\n  for (let k = 0; k \u003c 3; k++) S.logs.push({ c: 0, x: 8 + k * 6 + rnd() * 3, y: 120 + (k & 1), len: 5, life: 0.4 + 0.5 * rnd() });\n}\n\nconst front = (S) => ((S.k1 + 1) / 2) * (S.n + 0.3);\n\nfunction build(S, n) {\n  S.n = n;\n  const P = 77 / n, h = P - 3, Wc = 34 - 2 * n, s = (43 - Wc) / (n - 1);\n  // The firebox, then the chambers, each P rows above the last and s LEDs to the right.\n  const g = (S.g = [{ L: 6, W: 25, F: 123, h: 11 }]);\n  for (let c = 1; c \u003c= n; c++) g.push({ L: 14 + (c - 1) * s, W: Wc, F: 108 - (c - 1) * P, h });\n  // The roof row over X inside a chamber; with e = 2, the top of its brick.\n  const inT = (S.inT = (k, X, e = 0) => {\n    const q = g[k], u = (X - q.L + e) / (q.W + 2 * e);\n    return u > 0 && u \u003c 1 ? q.F - (q.h + e) * arch(u) : 1e3;\n  });\n  const outT = (k, X) => inT(k, X, 2), tp = g[n], CX = (S.CX = tp.L + 0.62 * tp.W);\n  const hill = (X) => (X \u003c 4 ? 123 : X \u003c tp.L - 2 ? mix(123, tp.F + 2, (X - 4) / (tp.L - 6)) : mix(tp.F + 2, tp.F - 5, (X - tp.L + 2) / (66 - tp.L)));\n  // Flame passages through each chamber's floor, over the crown of the one below.\n  const holes = [];\n  for (let c = 1; c \u003c= n; c++) for (let a = g[c - 1], x = round(a.L + 0.2 * a.W); x \u003c= a.L + 0.8 * a.W; x += 4) if (x > g[c].L && x \u003c g[c].L + Wc - 2) holes.push([x, c]);\n  const { kind, ch, V, bg, gw } = S;\n  S.stars = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, r = hash(x, y), nz = 0.8 + 0.4 * vn(x * 0.3, y * 0.3);\n    let k = SKY, c = 0, v = 0, col = [0, 0, 0];\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F && Y > inT(j, X)) k = GAS, c = j, v = (g[j].F - Y) / g[j].h;\n    if (!k && abs(X - CX) \u003c 2 && Y > TOP && Y \u003c inT(n, X) + 0.5) k = FLUE, c = n, v = (Y - TOP) / (inT(n, CX) - TOP);\n    if (!k) for (const [hx, hc] of holes) if (x === hx && Y > g[hc].F && Y \u003c inT(hc - 1, X)) k = HOLE, c = hc;\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F + 2 && Y > outT(j, X)) k = WALL, c = j;\n    if (!k && Y > TOP && ((abs(X - CX) \u003c 4 && Y \u003c outT(n, X) + 1) || (Y \u003c TOP + 2 && abs(X - CX) \u003c 5))) k = WALL, c = n + 1;\n    if (!k && Y > hill(X)) k = EARTH;\n    // The fire mouth in the firebox's front wall.\n    if (k === WALL && !c && x \u003c 6 && y > 116) k = GAS, v = (123 - Y) / 11;\n    kind[i] = k, ch[i] = c, V[i] = v;\n    if (k === SKY) {\n      const u = sm(0, 112, Y), dm = hypot(X - 11, Y - 11), e = 26 * exp(-dm / 3.5), st = r \u003c 0.014 && y \u003c 100 && dm > 12 ? 70 + 140 * hash(y, x) : 0;\n      col = [5 + 15 * u + e + st, 9 + 17 * u + e + st, 32 + 30 * u + e + st];\n      // A crescent moon.\n      if (dm \u003c 3.6 && hypot(X - 12.6, Y - 10) > 3.2) col = [226, 222, 196];\n      if (st) S.stars.push(i);\n    } else if (k === EARTH) {\n      // Beds along the slope, stones, grass on top.\n      const dd = Y - hill(X), bd = (0.7 + 0.5 * vn(dd * 0.3 + x * 0.04, 3.5 + x * 0.02)) * nz;\n      col = dd \u003c 1.5 ? [24, 38, 24] : r \u003c 0.035 ? [58, 52, 46] : [30 * bd, 23 * bd, 19 * bd];\n    }\n    // Brick, coursed on the chimney.\n    else if (k === WALL) col = [96, 66, 50].map((v2) => v2 * ((c > n ? y % 3 === 0 || (x + (floor(y / 3) & 1) * 2) % 4 === 0 : r \u003c 0.25) ? 0.62 : 0.85 + 0.3 * r));\n    bg.set(col, i * 3);\n  }\n  gw.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, k = kind[i];\n    // The brick the fire touches.\n    if (k === WALL) V[i] = [1, -1, W, -W].some((d) => kind[i + d] >= GAS && (abs(d) > 1 || (x + d) >> 6 === 0)) ? 1 : 0;\n    // Earth and air by the kiln are warm: how near each LED is to a wall, and whose.\n    if (k \u003c= EARTH) {\n      let best = 9;\n      for (let dy = -4; dy \u003c= 4; dy++)\n        for (let dx = -4; dx \u003c= 4; dx++) {\n          const X = x + dx, Y = y + dy, d = abs(dx) + abs(dy);\n          if (X >= 0 && X \u003c W && Y >= 0 && Y \u003c H && kind[Y * W + X] === WALL && d \u003c best) best = d, ch[i] = ch[Y * W + X];\n        }\n      gw[i] = best \u003c 9 ? exp(-best / 1.4) * (k ? 0.8 : 0.6) : 0;\n    }\n  }\n  // Shelves and pots: two or three levels a chamber, under the vault.\n  const nl = h >= 16 ? 3 : 2, lh = h / nl;\n  for (let c = 1; c \u003c= n; c++) {\n    const q = g[c], x0 = round(q.L + max(6, 0.22 * Wc)), x1 = floor(q.L + Wc - 1);\n    const set = (x, y, k2, v2) => kind[y * W + x] === GAS && ch[y * W + x] === c && ((kind[y * W + x] = k2), (V[y * W + x] = v2));\n    for (let j = 0; j \u003c nl; j++) {\n      const ys = round(q.F - j * lh), base = ys - 1;\n      if (j) {\n        for (let x = x0; x \u003c= x1; x++) if (inT(c, x + 0.5) \u003c ys - 1) set(x, ys, SHELF, 0);\n        for (let y = ys + 1; y \u003c round(q.F - (j - 1) * lh); y++) set(x0, y, SHELF, 0), set(x1 - 1, y, SHELF, 0);\n      }\n      for (let x = x0 + 1; x \u003c x1 - 1; ) {\n        const ty = floor(hash(c * 7 + j, x) * 4), w = [5, 5, 4, 3][ty];\n        const ph = min(floor(lh - 2), [5, 3, 6, 4][ty], floor(base - max(inT(c, x + 0.5), inT(c, x + w - 0.5)) - 1));\n        if (ph \u003c 2 || x + w > x1) break;\n        for (let r = 0; r \u003c ph; r++)\n          for (let xx = x; xx \u003c x + w; xx++) {\n            const dx = xx + 0.5 - x - w / 2;\n            if (abs(dx) \u003c= (prof(ty, (r + 0.5) / ph) * w) / 2 + 0.15) set(xx, base - r, POT, 0.5 - dx / w + (r === ph - 1 ? 0.2 : 0));\n          }\n        x += w + 1;\n      }\n    }\n  }\n  // Ladders up each chamber's front, and the potter's way between the stoke holes.\n  const xs = (c) => g[c].L - 4, px = [], py = [], at = [0], pl = [0];\n  S.lad = [];\n  S.spy = [0];\n  for (let c = 1; c \u003c= n; c++) {\n    const yw = outT(c, g[c].L - 1.5);\n    S.lad.push([round(xs(c)), yw, outT(c - 1, xs(c))]);\n    S.spy.push(round(g[c].F - max(5, 0.35 * h)));\n    at.push(px.length);\n    px.push(xs(c)), py.push(g[c].F + 2);\n    if (c \u003c n) {\n      px.push(xs(c)), py.push(yw);\n      for (let x = g[c].L - 1.5; x \u003c xs(c + 1); x += 1.5) px.push(x), py.push(outT(c, x));\n      px.push(xs(c + 1)), py.push(outT(c, xs(c + 1)));\n    }\n  }\n  for (let j = 1; j \u003c px.length; j++) pl.push(pl[j - 1] + hypot(px[j] - px[j - 1], py[j] - py[j - 1]));\n  Object.assign(S, { px, py, pl, Ac: at.map((j, c) => (c ? pl[j] : 0)) });\n  // The first time, the potter stands by the chamber above the one being fired.\n  const pt = S.pot;\n  if (!S.built) S.built = 1, pt.tgt = min(n, cl(round(front(S)), 1, n) + 1);\n  pt.tgt = min(pt.tgt, n);\n  pt.A = S.Ac[pt.tgt];\n  if (!pt.mode) pt.mode = 2;\n  S.logs = S.logs.filter((l) => l.c \u003c= n);\n  S.slugs = [];\n  S.ev = [];\n}\n\n// A stoke: reduction first, the flame starved and smoky, then the surge.\nconst red = (a) => (a \u003c 0.2 ? a / 0.2 : exp(-(a - 0.2) / 1.1));\nconst surge = (a) => sm(0.9, 2.1, a) * exp(-max(0, a - 2.1) / 2.4);\n\nfunction pulse(S, c, s) {\n  S.age[c] = 0, S.q[c] = s;\n  // Its black smoke reaches the chimney later the lower the chamber.\n  S.ev.push({ at: 0.25 + 0.12 * (S.n - c), fn: () => S.slugs.push({ y: S.inT(S.n, S.CX), a: 0.5 + 0.5 * s }) });\n}\n\nfunction stoke(S, c) {\n  const q = S.g[c];\n  pulse(S, c, 1);\n  S.logs.push({ c, x: q.L + (c ? 0.5 + rnd() * 2 : 2 + rnd() * 9), y: c ? round(q.F) - 1 : 120 + (rnd() \u003c 0.5), len: (c ? 3 : 4) + floor(rnd() * 3), life: 1 });\n  // The firebox's flame goes on through the first chamber.\n  if (!c) S.ev.push({ at: 0.35, fn: () => pulse(S, 1, 0.6) });\n}\n\nfunction throwTo(S, c, delay = 0) {\n  S.ev.push({ at: 0.3 + delay, fn: () => stoke(S, c) });\n  S.open[c] = 1.3 + delay;\n}\n\nfunction puff(S, x, y, vy, r, a, k) {\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vy, r, a, k, hot: 0.7 - 0.2 * k, ph: rnd() * 7 });\n}\n\nfunction spark(S, s) {\n  if (S.sparks.length > 160) S.sparks.shift();\n  const life = 0.8 + 1.4 * rnd();\n  S.sparks.push({ x: S.CX + (rnd() - 0.5) * 3, y: TOP - 1, vx: (rnd() - 0.5) * 6 * s, vy: -(10 + 14 * rnd()) * s, life, L: life });\n}\n\nfunction posAt(S, A) {\n  const { px, py, pl } = S;\n  let j = 1;\n  while (j \u003c pl.length - 1 && pl[j] \u003c A) j++;\n  const u = cl((A - pl[j - 1]) / max(1e-6, pl[j] - pl[j - 1]), 0, 1);\n  return [mix(px[j - 1], px[j], u), mix(py[j - 1], py[j], u), abs(px[j] - px[j - 1]) \u003c 0.01];\n}\n\nfunction step(S, d) {\n  S.t += d;\n  const { n, T, age, q, Hc, Te, Br, wind, pot: pt, fb } = S, fr = front(S), peak = 0.5 + 0.45 * sm(0, 0.5, (S.k1 + 1) / 2);\n  S.cf = cl(round(fr), 1, n);\n  for (let c = 0; c \u003c= n; c++) {\n    // Fired chambers hold white heat; above the one being fired each is cooler.\n    const tg = max(0.2, peak - (1.1 / n) * max(0, c - fr));\n    T[c] = T[c] \u003c 0 ? tg : T[c] + (tg - T[c]) * min(1, d * 0.8);\n    age[c] += d;\n    // Wind up the hill pulls on the chimney; wind down it chokes the draft.\n    Te[c] = T[c] + q[c] * (0.1 * surge(age[c]) - 0.15 * red(age[c])) + 0.02 * sin(S.t * 1.3 + c * 2.1) + 0.06 * wind;\n    Br[c] = 1 - 0.36 * q[c] * red(age[c]);\n    // Heat work for the cones creeps up and hardly comes back.\n    if (Hc[c] \u003c 0) Hc[c] = T[c] - 0.1;\n    Hc[c] += (Te[c] - Hc[c]) * d * (Te[c] > Hc[c] ? 0.07 : 0.02);\n    S.open[c] = max(0, S.open[c] - d);\n  }\n  Te[n + 1] = Te[n] - 0.22, Br[n + 1] = Br[n];\n  for (const e of S.ev) if ((e.at -= d) \u003c= 0) e.fn();\n  S.ev = S.ev.filter((e) => e.at > 0);\n  // The potter stokes twice, watches the spy hole, then goes where wood is needed.\n  pt.ph += d;\n  if (!pt.mode) {\n    pt.A += cl(S.Ac[pt.tgt] - pt.A, -13 * d, 13 * d);\n    if (abs(S.Ac[pt.tgt] - pt.A) \u003c 1e-3) pt.mode = 1, pt.tm = 0, pt.thr = 0;\n  } else if (pt.mode === 1) {\n    pt.tm += d;\n    if (pt.thr \u003c 2 && pt.tm > 0.3 + 0.7 * pt.thr) {\n      throwTo(S, pt.tgt);\n      pt.thr++;\n    }\n    if (pt.tm > 1.5) pt.mode = 2, pt.tm = 0.6 + 0.6 * rnd();\n  } else if ((pt.tm -= d) \u003c= 0) pt.tgt = ++pt.k % 3 ? S.cf : min(n, S.cf + 1), pt.mode = 0;\n  // The stoker feeds the fire mouth.\n  fb.an = max(0, fb.an - d);\n  if ((fb.tm -= d) \u003c= 0) fb.tm = 3 + rnd(), fb.an = 0.5, throwTo(S, 0);\n  for (const l of S.logs) l.life -= d * (0.12 + 0.2 * T[l.c]);\n  S.logs = S.logs.filter((l) => l.life > 0);\n  // Black smoke up the chimney: at the top, a billow, a flare and sparks.\n  for (const s of S.slugs)\n    if ((s.y -= d * 30) \u003c TOP) {\n      s.done = 1;\n      for (let j = 0; j \u003c 3; j++) puff(S, S.CX + (rnd() - 0.5) * 3, TOP - 1 - j * 2, -6 - 4 * rnd(), 3 + rnd(), 0.6 + 0.6 * s.a, 1);\n      for (let j = 0; j \u003c 14 * s.a; j++) spark(S, 1.3);\n      S.flare = min(1.4, S.flare + s.a);\n    }\n  S.slugs = S.slugs.filter((s) => !s.done);\n  S.flare = max(0.15 + 0.35 * sm(0.6, 1, T[n]), S.flare * exp(-d * 1.6));\n  air(S, d);\n  // Ash and embers.\n  for (const m of S.motes) m.x = (m.x + (wind * 9 + 1 + 1.5 * sin(S.t * 0.7 + m.ph)) * d + 65) % 65, m.y = (m.y + (m.e ? -3.5 : 2.2) * d + 129) % 129;\n}\n\n// A grey plume that slows and spreads under the top of the panel, and sparks.\nfunction air(S, d) {\n  const { n, T, wind } = S;\n  for (S.np += d * 6; S.np >= 1; S.np--) puff(S, S.CX + (rnd() - 0.5) * 2, TOP - 1, -7 - 3 * rnd(), 3, 0.55 + 0.2 * T[n], 0);\n  for (const p of S.puffs) {\n    // A strong wind bends the plume over and draws it out downwind.\n    p.vy += (-3.5 * (1 - 0.55 * abs(wind)) * cl(p.y / 12, 0.3, 1) - p.vy) * d * 1.2;\n    p.y += p.vy * d;\n    p.x += (wind * 18 * (0.5 + 0.5 * cl((TOP - p.y) / TOP, 0, 1)) + 1.2 * sin(S.t * 0.9 + p.ph)) * d;\n    p.r = min(10 + p.k, p.r + d * (1.5 + 1.2 * p.k + 2 * cl((8 - p.y) / 8, 0, 1)));\n    p.a -= d * (0.05 + 0.04 * (1 - p.k));\n    p.hot = max(0, p.hot - d * 1.4);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.03 && p.y + p.r > -3 && p.x > -14 && p.x \u003c W + 14);\n  for (S.ns += d * (2 + 5 * T[n]) * (1 + 0.6 * wind); S.ns >= 1; S.ns--) spark(S, 1);\n  for (const p of S.sparks) {\n    p.vy += (-6 - p.vy) * d * 1.5;\n    p.vx += ((rnd() - 0.5) * 40 + (wind * 16 - p.vx) * 2) * d;\n    p.x += p.vx * d, p.y += p.vy * d, p.life -= d;\n  }\n  S.sparks = S.sparks.filter((p) => p.life > 0 && p.y > -1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], n = cl(round(k[2]), 3, 6);\n  S.k1 = cl(k[0], -1, 1);\n  S.wind = cl(k[3], -1, 1);\n  if (n !== S.n) build(S, n);\n  // The kiln has been smoking for hours before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    step(S, 0);\n    for (let j = 0; j \u003c 75; j++) air(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c= n; c++) throwTo(S, c, 0.05 * c);\n  step(S, cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2));\n}\n\nlet F;\nfunction put(x, y, c, a = 1, add = 0) {\n  x = floor(x), y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = add ? F[o + i] + c[i] * a : mix(F[o + i], c[i], a);\n}\nfunction glow(x, y, r, c, a) {\n  for (let Y = floor(y - r); Y \u003c= y + r; Y++) for (let X = floor(x - r); X \u003c= x + r; X++) put(X, Y, c, a * max(0, 1 - hypot(X + 0.5 - x, Y + 0.5 - y) / r) ** 2, 1);\n}\n\n// A figure nine LEDs tall, feet on row y, facing the kiln: white towel, indigo\n// jacket lit orange on the kiln side, paper lantern.\nfunction figure(x, y, pose, ph, rim, lamp) {\n  x = round(x), y = round(y);\n  const a = floor(ph * 6) & 1 ? -1 : 1, pts = [[-1, -8, TOWEL], [0, -8, TOWEL], [0, -7, FACE, 1]];\n  for (let dy = -6; dy \u003c= -4; dy++) pts.push([-1, dy, COAT], [0, dy, COAT], [1, dy, COAT, 1]);\n  const L = (l, b) => pts.push([l, -3, LEGS], [b, -2, LEGS], [b, -1, LEGS], [b, 0, LEGS]);\n  if (pose === 1 && a \u003c 0) L(0, 0);\n  else if (pose === 2) L(a, a), L(-a, -a), pts.push([a, -7, COAT, 1], [-a, -3, LEGS]);\n  else L(-1, -1), L(1, 1);\n  if (pose === 3) pts.push(...(ph \u003c 0.5 ? [[-1, -7, COAT], [-2, -8, COAT]] : [[2, -5, COAT, 1], [3, -5, FACE, 1]]));\n  for (const [dx, dy, c, k] of pts) put(x + dx, y + dy, k ? c.map((v, i) => mix(v, RIM[i], rim)) : c);\n  if (lamp) put(x - 2, y - 4, [120, 70, 40]), put(x - 2, y - 3, [255, 222, 150]), put(x - 2, y - 2, [240, 160, 80]), glow(x - 1.5, y - 2, 7, [70, 44, 16], 1);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  F = S.f;\n  const { n, t, kind, ch, V, bg, gw, Te, Br, g, wind, A, K, Q, q, age } = S, lean = wind * 2.2 + 0.8, fs = 1 + 0.45 * wind, fo = floor(t * fs * 17);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const k = kind[i], c = ch[i], x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, T = Te[c], B = Br[c], v = V[i];\n    // Each LED: backdrop times m plus a ramp colour times b.\n    let j = lut(T * 0.7), b = 0, m = 0;\n    if (k \u003c= EARTH) m = 1, b = gw[i] * 0.28 * B;\n    else if (k === WALL) m = v ? 0.45 : 0.95, j = lut(T * 0.85 - 0.05), b = B * (v ? 0.5 : 0.1);\n    else if (k === GAS) {\n      let I = sm(0.25, 0.85, 0.65 * vn(X * 0.45 - lean * (0.3 + v) * 3 + c * 19, (Y + t * fs * 10) * 0.16) + 0.35 * fn(x, y + fo) + 0.25 * (1 - v) - 0.07);\n      // The firebox floor: a bed of embers under the logs.\n      if (!c && v \u003c 0.3) I = sm(0.35, 0.85, 0.7 * vn(X * 0.7, Y * 0.9 + t * 0.4) + 0.3 * vn(X * 1.7 + t, Y * 1.5) + 0.1);\n      // Darker flame is cooler, orange rather than grey. The firebox burns rougher.\n      const r = c ? 0.14 : 0.26;\n      j = lut(T - r + 2 * r * I), b = B * (1 - 2 * r + 2 * r * I);\n    } else if (k === POT) j = lut(T - 0.18), b = B * (0.32 + 0.22 * v + 0.14 * fn(x >> 1, y + (fo >> 1)));\n    else if (k === SHELF) j = lut(T - 0.2), b = B * 0.4;\n    else if (k === HOLE) j = lut(mix(Te[c - 1], T, 0.5) + 0.04), b = 0.85 + 0.15 * sin(t * 9 + x);\n    else {\n      // The flue: hot gas rising in bands, and each stoke's black smoke going up.\n      let dk = 0;\n      for (const s of S.slugs) dk = max(dk, s.a * exp(-(((Y - s.y) / 3) ** 2)));\n      j = lut(T - 0.12 - 0.2 * v + 0.1 * vn(X * 0.6, (Y + t * 22) * 0.3)), b = B * (0.6 + 0.3 * vn(X * 0.5 + 9, (Y + t * 26) * 0.2)) * (1 - 0.85 * dk);\n    }\n    for (let e = 0; e \u003c 3; e++) F[o + e] = bg[o + e] * m + LUT[j + e] * b;\n  }\n  for (const i of S.stars) for (let e = 0; e \u003c 3; e++) F[i * 3 + e] *= 0.75 + 0.25 * sin(t * 2.3 + i);\n\n  // Burning wood on the floors; in the firebox, thicker logs with their tops alight.\n  for (const l of S.logs)\n    for (let k = 0, T = Te[l.c], len = max(1, round(l.len * min(1, l.life * 1.6))); k \u003c len; k++) {\n      put(l.x + k, l.y, (k + floor(t * 4 + l.x)) % 3 ? lc(T - 0.45, 0.45) : lc(T + 0.1));\n      if (!l.c) put(l.x + k, l.y - 1, lc(T - 0.1 + 0.15 * sin(t * 7 + k + l.x)), 0.85);\n    }\n  for (const [lx, y0, y1] of S.lad) for (let y = floor(y0); y \u003c= y1; y++) put(lx - 1, y, WOOD, 0.7), put(lx + 1, y, WOOD, 0.7), y % 3 || put(lx, y, WOOD, 0.6);\n  for (let c = 1; c \u003c= n; c++) {\n    // The stoke hole, open while wood goes in, and the spy hole.\n    const T = Te[c], wx = floor(g[c].L - 1.5), sy = S.spy[c], fy = round(g[c].F), op = sm(0, 0.3, S.open[c]);\n    for (let y = fy - 3; y \u003c= fy - 2; y++) for (let x = wx; x \u003c= wx + 1; x++) put(x, y, op > 0.05 ? lc(T + 0.05, op) : lc(T - 0.3, 0.35));\n    if (op > 0.05) glow(wx - 1, fy - 2.5, 6, lc(T - 0.1), 0.35 * op);\n    put(wx, sy, lc(T, 0.9)), put(wx + 1, sy, lc(T));\n    for (let x = wx + 2; x \u003c= wx + 6; x++) put(x, sy + 2, lc(T - 0.2, 0.4));\n    // Three cones on a pad, each bending once the heat work passes its number.\n    for (let m = 0; m \u003c 3; m++) {\n      const b = sm(0.57 + 0.12 * m, 0.68 + 0.12 * m, S.Hc[c]), cx = wx + 2 + 2 * m + (b > 0.4), cc = lc(T - 0.15, 0.5);\n      put(cx - (b > 0.4), sy + 1, cc), put(cx, sy, cc, b \u003c 0.75 ? 1 : 0.5), put(cx, b \u003c 0.75 ? sy - 1 : sy + 1, cc);\n    }\n    // Flame out of the spy hole after a stoke, or whenever the wind chokes the chimney.\n    const s = max(q[c] * red(age[c]) * sm(0.15, 0.35, age[c]), 0.55 * q[c - 1] * red(age[c - 1] - 0.3) * sm(0.4, 0.6, age[c - 1])) + 0.3 * max(0, -wind) * (0.7 + 0.3 * sin(t * 3 + c));\n    if (s \u003c 0.05) continue;\n    const x0 = wx - 0.5, y0 = sy + 0.5, len = 2 + 9 * s * (0.8 + 0.2 * sin(t * 13 + c));\n    glow(x0, y0, 5, [120, 50, 10], s);\n    for (let j = 0; j \u003c len; j++) {\n      const u = j / len, x = x0 - j * (1 - 0.6 * max(0, wind)) + wind * j * 0.4, y = y0 - j * j * 0.06 - j * 0.15 + sin(t * 17 + j) * 0.4 * u;\n      put(x, y, lc(T + 0.45 - 0.6 * u), 1 - u * 0.3);\n      if (u \u003c 0.7) put(x, y - 1, lc(T + 0.25 - 0.6 * u), 0.8 - u), put(x, y + 1, lc(T + 0.1 - 0.6 * u), 0.5 - 0.5 * u);\n    }\n  }\n  const pt = S.pot, [px, py, climb] = posAt(S, pt.A), pose = pt.mode === 1 ? 3 : pt.mode ? 0 : climb ? 2 : 1;\n  figure(px, py, pose, pose === 3 ? (pt.tm % 0.7) / 0.7 : pt.ph, 0.25 + 0.6 * sm(0, 0.3, S.open[pt.tgt]) * (pose === 3), 1);\n  figure(1, 122, S.fb.an > 0 ? 3 : 0, 1 - S.fb.an / 0.5, 0.5 + 0.3 * sin(t * 7), 0);\n  glow(5, 120, 6, lc(Te[0] - 0.1), 0.35);\n\n  // Smoke: puffs summed, then shaded grey, lit from below, or black after a stoke.\n  A.fill(0), K.fill(0), Q.fill(0);\n  for (const p of S.puffs)\n    for (let y = max(0, floor(p.y - p.r)); y \u003c= min(63, p.y + p.r); y++)\n      for (let x = max(0, floor(p.x - p.r)); x \u003c= min(W - 1, p.x + p.r); x++) {\n        const dx = (x + 0.5 - p.x) / p.r, dy = (y + 0.5 - p.y) / p.r, w = p.a * (1 - dx * dx - dy * dy) ** 2, i = y * W + x;\n        if (dx * dx + dy * dy \u003c 1) A[i] += w, K[i] += w * p.k, Q[i] += w * p.hot;\n      }\n  for (let i = 0; i \u003c W * 64; i++) {\n    if (A[i] \u003c 0.01) continue;\n    const y = i >> 6, tx = 0.6 * vn((i & 63) * 0.25 - t * wind, y * 0.25 + t * 0.8) + 0.4 * fn(i, y + (fo >> 2)), gr = 0.7 + 0.5 * tx;\n    const al = min(0.95, (1 - exp(-A[i] * 2.2)) * (0.6 + 0.6 * tx)), dk = K[i] / A[i], hq = min(1, Q[i] / A[i]) * (0.4 + 0.6 * sm(30, 10, y));\n    const o = i * 3;\n    F[o] = mix(F[o], mix(118 * gr, 16, dk) + 160 * hq, al), F[o + 1] = mix(F[o + 1], mix(106 * gr, 11, dk) + 60 * hq, al), F[o + 2] = mix(F[o + 2], mix(104 * gr, 10, dk) + 14 * hq, al);\n  }\n  // Flame licking out of the chimney's mouth.\n  const fh = 2 + 7 * S.flare;\n  glow(S.CX, TOP, 6, [110, 40, 8], S.flare * 0.8);\n  for (let j = 0, u = 0; j \u003c fh; u = ++j / fh)\n    for (let e = -1; e \u003c 2; e++) (u \u003c 0.5 || !e) && put(S.CX + e + wind * j * 0.6 + sin(t * 11 + j) * 0.6 * u, TOP - 1 - j, lc(Te[n] - 0.05 - 0.45 * u - 0.2 * abs(e)), e ? 0.6 : 1 - 0.5 * u);\n  for (const p of S.sparks) put(p.x, p.y, lc(0.35 + 0.75 * (p.life / p.L)), min(1, p.life * 2));\n  for (const m of S.motes) put(m.x, m.y, m.e ? [230, 110, 30] : [80, 78, 84], m.e ? 0.5 + 0.4 * sin(t * 5 + m.ph) : 0.6);\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-noborigama","type":"code","name":"noborigama","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Noborigama\n// Family:  pottery\n// Idea:    A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the noborigama, the wood-fired climbing kiln of Japan and Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1\n//\n// Knob 1: Firing. The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white.\n// Knob 2: Speed. At 2 the potter stokes every few seconds; 0.2 is ten times slower.\n// Knob 3: Chambers. Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves.\n// Knob 4: Draft. Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame.\n// Buttons: K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi % p), b = hash(xi + 1, yi % p), c = hash(xi, (yi + 1) % p);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, (yi + 1) % p)) * su * sv;\n}\n// Fine noise that wraps every 256 rows, for the quick flicker of flame and smoke.\nconst FN = new Float32Array(64 * 256).map((_, i) => vn((i & 63) * 0.9, ((i >> 6) * 84) / 256, 84));\nconst fn = (x, y) => FN[(y & 255) * 64 + (x & 63)];\n\n// Brick, gas and flame by temperature: dull red at 0.15, orange at 0.6, white\n// heat at 1. Red stops at 232: pinned at 255 it hid the flicker of the hottest\n// chambers, since an LED reads by its brightest channel.\nconst RAMP = [[0, 24, 4, 2], [0.15, 92, 13, 4], [0.3, 158, 30, 6], [0.45, 204, 68, 12], [0.6, 226, 114, 24], [0.75, 232, 160, 50], [0.88, 232, 194, 96], [1, 232, 216, 160], [1.25, 236, 230, 204]];\nconst LUT = new Float32Array(768);\nfor (let i = 0; i \u003c 256; i++) {\n  let k = 0;\n  const T = i / 204;\n  while (k \u003c 7 && T > RAMP[k + 1][0]) k++;\n  const u = cl((T - RAMP[k][0]) / (RAMP[k + 1][0] - RAMP[k][0]), 0, 1);\n  for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(RAMP[k][c + 1], RAMP[k + 1][c + 1], u);\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n// One colour array for every put(), to spare the garbage collector.\nconst C3 = [0, 0, 0];\nconst lc = (T, b = 1) => ((T = lut(T)), C3[0] = LUT[T] * b, C3[1] = LUT[T + 1] * b, C3[2] = LUT[T + 2] * b, C3);\n\nconst SKY = 0, EARTH = 1, WALL = 3, GAS = 4, POT = 5, SHELF = 6, HOLE = 7, FLUE = 8;\n// A vault on low walls: roof height across a chamber, 0.4 at the walls, 1 at the crown.\nconst arch = (u) => 0.4 + 0.6 * sqrt(max(0, 1 - (2 * u - 1) ** 2));\nconst TOP = 18; // the chimney's mouth row\nconst WOOD = [150, 118, 66], TOWEL = [214, 204, 184], FACE = [176, 116, 78], COAT = [46, 60, 128], LEGS = [74, 62, 54], RIM = [255, 150, 60];\n// Jar, flared bowl, bottle and cup: half width up the pot, bottom to top.\nconst prof = (k, t) => (k === 0 ? (t > 0.84 ? 0.5 : 0.6 + 0.4 * sin(PI * t)) : k === 1 ? 0.5 + 0.5 * t : k === 2 ? (t \u003c 0.55 ? 0.55 + 0.45 * sin((PI * t) / 0.55) : t > 0.88 ? 0.5 : 0.3) : 0.8);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    t: 0, n: 0, kind: new Uint8Array(N), ch: new Uint8Array(N), V: F32(N), bg: F32(N * 3), gw: F32(N), f: F32(N * 3), A: F32(W * 64), K: F32(W * 64), Q: F32(W * 64),\n    T: F32(8).fill(-1), Hc: F32(8).fill(-1), age: F32(8).fill(9), q: F32(8), open: F32(8), Te: F32(8), Br: F32(8),\n    puffs: [], sparks: [], logs: [], slugs: [], ev: [], motes: [], pot: { A: 0, tgt: 0, mode: 1, tm: -1.6, thr: 0, k: 0, ph: 0 }, fb: { tm: 1, an: 0 }, flare: 0, np: 0, ns: 0,\n  });\n  for (let k = 0; k \u003c 40; k++) S.motes.push({ x: rnd() * W, y: rnd() * H, e: rnd() \u003c 0.45, ph: rnd() * 7 });\n  for (let k = 0; k \u003c 3; k++) S.logs.push({ c: 0, x: 8 + k * 6 + rnd() * 3, y: 120 + (k & 1), len: 5, life: 0.4 + 0.5 * rnd() });\n}\n\nconst front = (S) => ((S.k1 + 1) / 2) * (S.n + 0.3);\n\nfunction build(S, n) {\n  S.n = n;\n  const P = 77 / n, h = P - 3, Wc = 34 - 2 * n, s = (43 - Wc) / (n - 1);\n  // The firebox, then the chambers, each P rows above the last and s LEDs to the right.\n  const g = (S.g = [{ L: 6, W: 25, F: 123, h: 11 }]);\n  for (let c = 1; c \u003c= n; c++) g.push({ L: 14 + (c - 1) * s, W: Wc, F: 108 - (c - 1) * P, h });\n  // The roof row over X inside a chamber; with e = 2, the top of its brick.\n  const inT = (S.inT = (k, X, e = 0) => {\n    const q = g[k], u = (X - q.L + e) / (q.W + 2 * e);\n    return u > 0 && u \u003c 1 ? q.F - (q.h + e) * arch(u) : 1e3;\n  });\n  const outT = (k, X) => inT(k, X, 2), tp = g[n], CX = (S.CX = tp.L + 0.62 * tp.W);\n  const hill = (X) => (X \u003c 4 ? 123 : X \u003c tp.L - 2 ? mix(123, tp.F + 2, (X - 4) / (tp.L - 6)) : mix(tp.F + 2, tp.F - 5, (X - tp.L + 2) / (66 - tp.L)));\n  // Flame passages through each chamber's floor, over the crown of the one below.\n  const holes = [];\n  for (let c = 1; c \u003c= n; c++) for (let a = g[c - 1], x = round(a.L + 0.2 * a.W); x \u003c= a.L + 0.8 * a.W; x += 4) if (x > g[c].L && x \u003c g[c].L + Wc - 2) holes.push([x, c]);\n  const { kind, ch, V, bg, gw } = S;\n  S.stars = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, r = hash(x, y), nz = 0.8 + 0.4 * vn(x * 0.3, y * 0.3);\n    let k = SKY, c = 0, v = 0, col = [0, 0, 0];\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F && Y > inT(j, X)) k = GAS, c = j, v = (g[j].F - Y) / g[j].h;\n    if (!k && abs(X - CX) \u003c 2 && Y > TOP && Y \u003c inT(n, X) + 0.5) k = FLUE, c = n, v = (Y - TOP) / (inT(n, CX) - TOP);\n    if (!k) for (const [hx, hc] of holes) if (x === hx && Y > g[hc].F && Y \u003c inT(hc - 1, X)) k = HOLE, c = hc;\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F + 2 && Y > outT(j, X)) k = WALL, c = j;\n    if (!k && Y > TOP && ((abs(X - CX) \u003c 4 && Y \u003c outT(n, X) + 1) || (Y \u003c TOP + 2 && abs(X - CX) \u003c 5))) k = WALL, c = n + 1;\n    if (!k && Y > hill(X)) k = EARTH;\n    // The fire mouth in the firebox's front wall.\n    if (k === WALL && !c && x \u003c 6 && y > 116) k = GAS, v = (123 - Y) / 11;\n    kind[i] = k, ch[i] = c, V[i] = v;\n    if (k === SKY) {\n      const u = sm(0, 112, Y), dm = hypot(X - 11, Y - 11), e = 26 * exp(-dm / 3.5), st = r \u003c 0.014 && y \u003c 100 && dm > 12 ? 70 + 140 * hash(y, x) : 0;\n      col = [5 + 15 * u + e + st, 9 + 17 * u + e + st, 32 + 30 * u + e + st];\n      // A crescent moon.\n      if (dm \u003c 3.6 && hypot(X - 12.6, Y - 10) > 3.2) col = [226, 222, 196];\n      if (st) S.stars.push(i);\n    } else if (k === EARTH) {\n      // Beds along the slope, stones, grass on top.\n      const dd = Y - hill(X), bd = (0.7 + 0.5 * vn(dd * 0.3 + x * 0.04, 3.5 + x * 0.02)) * nz;\n      col = dd \u003c 1.5 ? [24, 38, 24] : r \u003c 0.035 ? [58, 52, 46] : [30 * bd, 23 * bd, 19 * bd];\n    }\n    // Brick, coursed on the chimney.\n    else if (k === WALL) col = [96, 66, 50].map((v2) => v2 * ((c > n ? y % 3 === 0 || (x + (floor(y / 3) & 1) * 2) % 4 === 0 : r \u003c 0.25) ? 0.62 : 0.85 + 0.3 * r));\n    bg.set(col, i * 3);\n  }\n  gw.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, k = kind[i];\n    // The brick the fire touches.\n    if (k === WALL) V[i] = [1, -1, W, -W].some((d) => kind[i + d] >= GAS && (abs(d) > 1 || (x + d) >> 6 === 0)) ? 1 : 0;\n    // Earth and air by the kiln are warm: how near each LED is to a wall, and whose.\n    if (k \u003c= EARTH) {\n      let best = 9;\n      for (let dy = -4; dy \u003c= 4; dy++)\n        for (let dx = -4; dx \u003c= 4; dx++) {\n          const X = x + dx, Y = y + dy, d = abs(dx) + abs(dy);\n          if (X >= 0 && X \u003c W && Y >= 0 && Y \u003c H && kind[Y * W + X] === WALL && d \u003c best) best = d, ch[i] = ch[Y * W + X];\n        }\n      gw[i] = best \u003c 9 ? exp(-best / 1.4) * (k ? 0.8 : 0.6) : 0;\n    }\n  }\n  // Shelves and pots: two or three levels a chamber, under the vault.\n  const nl = h >= 16 ? 3 : 2, lh = h / nl;\n  for (let c = 1; c \u003c= n; c++) {\n    const q = g[c], x0 = round(q.L + max(6, 0.22 * Wc)), x1 = floor(q.L + Wc - 1);\n    const set = (x, y, k2, v2) => kind[y * W + x] === GAS && ch[y * W + x] === c && ((kind[y * W + x] = k2), (V[y * W + x] = v2));\n    for (let j = 0; j \u003c nl; j++) {\n      const ys = round(q.F - j * lh), base = ys - 1;\n      if (j) {\n        for (let x = x0; x \u003c= x1; x++) if (inT(c, x + 0.5) \u003c ys - 1) set(x, ys, SHELF, 0);\n        for (let y = ys + 1; y \u003c round(q.F - (j - 1) * lh); y++) set(x0, y, SHELF, 0), set(x1 - 1, y, SHELF, 0);\n      }\n      for (let x = x0 + 1; x \u003c x1 - 1; ) {\n        const ty = floor(hash(c * 7 + j, x) * 4), w = [5, 5, 4, 3][ty];\n        const ph = min(floor(lh - 2), [5, 3, 6, 4][ty], floor(base - max(inT(c, x + 0.5), inT(c, x + w - 0.5)) - 1));\n        if (ph \u003c 2 || x + w > x1) break;\n        for (let r = 0; r \u003c ph; r++)\n          for (let xx = x; xx \u003c x + w; xx++) {\n            const dx = xx + 0.5 - x - w / 2;\n            if (abs(dx) \u003c= (prof(ty, (r + 0.5) / ph) * w) / 2 + 0.15) set(xx, base - r, POT, 0.5 - dx / w + (r === ph - 1 ? 0.2 : 0));\n          }\n        x += w + 1;\n      }\n    }\n  }\n  // Ladders up each chamber's front, and the potter's way between the stoke holes.\n  const xs = (c) => g[c].L - 4, px = [], py = [], at = [0], pl = [0];\n  S.lad = [];\n  S.spy = [0];\n  for (let c = 1; c \u003c= n; c++) {\n    const yw = outT(c, g[c].L - 1.5);\n    S.lad.push([round(xs(c)), yw, outT(c - 1, xs(c))]);\n    S.spy.push(round(g[c].F - max(5, 0.35 * h)));\n    at.push(px.length);\n    px.push(xs(c)), py.push(g[c].F + 2);\n    if (c \u003c n) {\n      px.push(xs(c)), py.push(yw);\n      for (let x = g[c].L - 1.5; x \u003c xs(c + 1); x += 1.5) px.push(x), py.push(outT(c, x));\n      px.push(xs(c + 1)), py.push(outT(c, xs(c + 1)));\n    }\n  }\n  for (let j = 1; j \u003c px.length; j++) pl.push(pl[j - 1] + hypot(px[j] - px[j - 1], py[j] - py[j - 1]));\n  Object.assign(S, { px, py, pl, Ac: at.map((j, c) => (c ? pl[j] : 0)) });\n  // The first time, the potter stands by the chamber above the one being fired.\n  const pt = S.pot;\n  if (!S.built) S.built = 1, pt.tgt = min(n, cl(round(front(S)), 1, n) + 1);\n  pt.tgt = min(pt.tgt, n);\n  pt.A = S.Ac[pt.tgt];\n  if (!pt.mode) pt.mode = 2;\n  S.logs = S.logs.filter((l) => l.c \u003c= n);\n  S.slugs = [];\n  S.ev = [];\n}\n\n// A stoke: reduction first, the flame starved and smoky, then the surge.\nconst red = (a) => (a \u003c 0.2 ? a / 0.2 : exp(-(a - 0.2) / 1.1));\nconst surge = (a) => sm(0.9, 2.1, a) * exp(-max(0, a - 2.1) / 2.4);\n\nfunction pulse(S, c, s) {\n  S.age[c] = 0, S.q[c] = s;\n  // Its black smoke reaches the chimney later the lower the chamber.\n  S.ev.push({ at: 0.25 + 0.12 * (S.n - c), fn: () => S.slugs.push({ y: S.inT(S.n, S.CX), a: 0.5 + 0.5 * s }) });\n}\n\nfunction stoke(S, c) {\n  const q = S.g[c];\n  pulse(S, c, 1);\n  S.logs.push({ c, x: q.L + (c ? 0.5 + rnd() * 2 : 2 + rnd() * 9), y: c ? round(q.F) - 1 : 120 + (rnd() \u003c 0.5), len: (c ? 3 : 4) + floor(rnd() * 3), life: 1 });\n  // The firebox's flame goes on through the first chamber.\n  if (!c) S.ev.push({ at: 0.35, fn: () => pulse(S, 1, 0.6) });\n}\n\nfunction throwTo(S, c, delay = 0) {\n  S.ev.push({ at: 0.3 + delay, fn: () => stoke(S, c) });\n  S.open[c] = 1.3 + delay;\n}\n\nfunction puff(S, x, y, vy, r, a, k) {\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vy, r, a, k, hot: 0.7 - 0.2 * k, ph: rnd() * 7 });\n}\n\nfunction spark(S, s) {\n  if (S.sparks.length > 160) S.sparks.shift();\n  const life = 0.8 + 1.4 * rnd();\n  S.sparks.push({ x: S.CX + (rnd() - 0.5) * 3, y: TOP - 1, vx: (rnd() - 0.5) * 6 * s, vy: -(10 + 14 * rnd()) * s, life, L: life });\n}\n\nfunction posAt(S, A) {\n  const { px, py, pl } = S;\n  let j = 1;\n  while (j \u003c pl.length - 1 && pl[j] \u003c A) j++;\n  const u = cl((A - pl[j - 1]) / max(1e-6, pl[j] - pl[j - 1]), 0, 1);\n  return [mix(px[j - 1], px[j], u), mix(py[j - 1], py[j], u), abs(px[j] - px[j - 1]) \u003c 0.01];\n}\n\nfunction step(S, d) {\n  S.t += d;\n  const { n, T, age, q, Hc, Te, Br, wind, pot: pt, fb } = S, fr = front(S), peak = 0.5 + 0.45 * sm(0, 0.5, (S.k1 + 1) / 2);\n  S.cf = cl(round(fr), 1, n);\n  for (let c = 0; c \u003c= n; c++) {\n    // Fired chambers hold white heat; above the one being fired each is cooler.\n    const tg = max(0.2, peak - (1.1 / n) * max(0, c - fr));\n    T[c] = T[c] \u003c 0 ? tg : T[c] + (tg - T[c]) * min(1, d * 0.8);\n    age[c] += d;\n    // Wind up the hill pulls on the chimney; wind down it chokes the draft.\n    Te[c] = T[c] + q[c] * (0.1 * surge(age[c]) - 0.15 * red(age[c])) + 0.02 * sin(S.t * 1.3 + c * 2.1) + 0.06 * wind;\n    Br[c] = 1 - 0.36 * q[c] * red(age[c]);\n    // Heat work for the cones creeps up and hardly comes back.\n    if (Hc[c] \u003c 0) Hc[c] = T[c] - 0.1;\n    Hc[c] += (Te[c] - Hc[c]) * d * (Te[c] > Hc[c] ? 0.07 : 0.02);\n    S.open[c] = max(0, S.open[c] - d);\n  }\n  Te[n + 1] = Te[n] - 0.22, Br[n + 1] = Br[n];\n  for (const e of S.ev) if ((e.at -= d) \u003c= 0) e.fn();\n  S.ev = S.ev.filter((e) => e.at > 0);\n  // The potter stokes twice, watches the spy hole, then goes where wood is needed.\n  pt.ph += d;\n  if (!pt.mode) {\n    pt.A += cl(S.Ac[pt.tgt] - pt.A, -13 * d, 13 * d);\n    if (abs(S.Ac[pt.tgt] - pt.A) \u003c 1e-3) pt.mode = 1, pt.tm = 0, pt.thr = 0;\n  } else if (pt.mode === 1) {\n    pt.tm += d;\n    if (pt.thr \u003c 2 && pt.tm > 0.3 + 0.7 * pt.thr) {\n      throwTo(S, pt.tgt);\n      pt.thr++;\n    }\n    if (pt.tm > 1.5) pt.mode = 2, pt.tm = 0.6 + 0.6 * rnd();\n  } else if ((pt.tm -= d) \u003c= 0) pt.tgt = ++pt.k % 3 ? S.cf : min(n, S.cf + 1), pt.mode = 0;\n  // The stoker feeds the fire mouth.\n  fb.an = max(0, fb.an - d);\n  if ((fb.tm -= d) \u003c= 0) fb.tm = 3 + rnd(), fb.an = 0.5, throwTo(S, 0);\n  for (const l of S.logs) l.life -= d * (0.12 + 0.2 * T[l.c]);\n  S.logs = S.logs.filter((l) => l.life > 0);\n  // Black smoke up the chimney: at the top, a billow, a flare and sparks.\n  for (const s of S.slugs)\n    if ((s.y -= d * 30) \u003c TOP) {\n      s.done = 1;\n      for (let j = 0; j \u003c 3; j++) puff(S, S.CX + (rnd() - 0.5) * 3, TOP - 1 - j * 2, -6 - 4 * rnd(), 3 + rnd(), 0.6 + 0.6 * s.a, 1);\n      for (let j = 0; j \u003c 14 * s.a; j++) spark(S, 1.3);\n      S.flare = min(1.4, S.flare + s.a);\n    }\n  S.slugs = S.slugs.filter((s) => !s.done);\n  S.flare = max(0.15 + 0.35 * sm(0.6, 1, T[n]), S.flare * exp(-d * 1.6));\n  air(S, d);\n  // Ash and embers.\n  for (const m of S.motes) m.x = (m.x + (wind * 9 + 1 + 1.5 * sin(S.t * 0.7 + m.ph)) * d + 65) % 65, m.y = (m.y + (m.e ? -3.5 : 2.2) * d + 129) % 129;\n}\n\n// A grey plume that slows and spreads under the top of the panel, and sparks.\nfunction air(S, d) {\n  const { n, T, wind } = S;\n  for (S.np += d * 6; S.np >= 1; S.np--) puff(S, S.CX + (rnd() - 0.5) * 2, TOP - 1, -7 - 3 * rnd(), 3, 0.55 + 0.2 * T[n], 0);\n  for (const p of S.puffs) {\n    // A strong wind bends the plume over and draws it out downwind.\n    p.vy += (-3.5 * (1 - 0.55 * abs(wind)) * cl(p.y / 12, 0.3, 1) - p.vy) * d * 1.2;\n    p.y += p.vy * d;\n    p.x += (wind * 18 * (0.5 + 0.5 * cl((TOP - p.y) / TOP, 0, 1)) + 1.2 * sin(S.t * 0.9 + p.ph)) * d;\n    p.r = min(10 + p.k, p.r + d * (1.5 + 1.2 * p.k + 2 * cl((8 - p.y) / 8, 0, 1)));\n    p.a -= d * (0.05 + 0.04 * (1 - p.k));\n    p.hot = max(0, p.hot - d * 1.4);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.03 && p.y + p.r > -3 && p.x > -14 && p.x \u003c W + 14);\n  for (S.ns += d * (2 + 5 * T[n]) * (1 + 0.6 * wind); S.ns >= 1; S.ns--) spark(S, 1);\n  for (const p of S.sparks) {\n    p.vy += (-6 - p.vy) * d * 1.5;\n    p.vx += ((rnd() - 0.5) * 40 + (wind * 16 - p.vx) * 2) * d;\n    p.x += p.vx * d, p.y += p.vy * d, p.life -= d;\n  }\n  S.sparks = S.sparks.filter((p) => p.life > 0 && p.y > -1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], n = cl(round(k[2]), 3, 6);\n  S.k1 = cl(k[0], -1, 1);\n  S.wind = cl(k[3], -1, 1);\n  if (n !== S.n) build(S, n);\n  // The kiln has been smoking for hours before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    step(S, 0);\n    for (let j = 0; j \u003c 75; j++) air(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c= n; c++) throwTo(S, c, 0.05 * c);\n  step(S, cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2));\n}\n\nlet F;\nfunction put(x, y, c, a = 1, add = 0) {\n  x = floor(x), y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = add ? F[o + i] + c[i] * a : mix(F[o + i], c[i], a);\n}\nfunction glow(x, y, r, c, a) {\n  for (let Y = floor(y - r); Y \u003c= y + r; Y++) for (let X = floor(x - r); X \u003c= x + r; X++) put(X, Y, c, a * max(0, 1 - hypot(X + 0.5 - x, Y + 0.5 - y) / r) ** 2, 1);\n}\n\n// A figure nine LEDs tall, feet on row y, facing the kiln: white towel, indigo\n// jacket lit orange on the kiln side, paper lantern.\nfunction figure(x, y, pose, ph, rim, lamp) {\n  x = round(x), y = round(y);\n  const a = floor(ph * 6) & 1 ? -1 : 1, pts = [[-1, -8, TOWEL], [0, -8, TOWEL], [0, -7, FACE, 1]];\n  for (let dy = -6; dy \u003c= -4; dy++) pts.push([-1, dy, COAT], [0, dy, COAT], [1, dy, COAT, 1]);\n  const L = (l, b) => pts.push([l, -3, LEGS], [b, -2, LEGS], [b, -1, LEGS], [b, 0, LEGS]);\n  if (pose === 1 && a \u003c 0) L(0, 0);\n  else if (pose === 2) L(a, a), L(-a, -a), pts.push([a, -7, COAT, 1], [-a, -3, LEGS]);\n  else L(-1, -1), L(1, 1);\n  if (pose === 3) pts.push(...(ph \u003c 0.5 ? [[-1, -7, COAT], [-2, -8, COAT]] : [[2, -5, COAT, 1], [3, -5, FACE, 1]]));\n  for (const [dx, dy, c, k] of pts) put(x + dx, y + dy, k ? c.map((v, i) => mix(v, RIM[i], rim)) : c);\n  if (lamp) put(x - 2, y - 4, [120, 70, 40]), put(x - 2, y - 3, [255, 222, 150]), put(x - 2, y - 2, [240, 160, 80]), glow(x - 1.5, y - 2, 7, [70, 44, 16], 1);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  F = S.f;\n  const { n, t, kind, ch, V, bg, gw, Te, Br, g, wind, A, K, Q, q, age } = S, lean = wind * 2.2 + 0.8, fs = 1 + 0.45 * wind, fo = floor(t * fs * 17);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const k = kind[i], c = ch[i], x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, T = Te[c], B = Br[c], v = V[i];\n    // Each LED: backdrop times m plus a ramp colour times b.\n    let j = lut(T * 0.7), b = 0, m = 0;\n    if (k \u003c= EARTH) m = 1, b = gw[i] * 0.28 * B;\n    else if (k === WALL) m = v ? 0.45 : 0.95, j = lut(T * 0.85 - 0.05), b = B * (v ? 0.5 : 0.1);\n    else if (k === GAS) {\n      let I = sm(0.25, 0.85, 0.65 * vn(X * 0.45 - lean * (0.3 + v) * 3 + c * 19, (Y + t * fs * 10) * 0.16) + 0.35 * fn(x, y + fo) + 0.25 * (1 - v) - 0.07);\n      // The firebox floor: a bed of embers under the logs.\n      if (!c && v \u003c 0.3) I = sm(0.35, 0.85, 0.7 * vn(X * 0.7, Y * 0.9 + t * 0.4) + 0.3 * vn(X * 1.7 + t, Y * 1.5) + 0.1);\n      // Darker flame is cooler, orange rather than grey. The firebox burns rougher.\n      const r = c ? 0.14 : 0.26;\n      j = lut(T - r + 2 * r * I), b = B * (1 - 2 * r + 2 * r * I);\n    } else if (k === POT) j = lut(T - 0.18), b = B * (0.32 + 0.22 * v + 0.14 * fn(x >> 1, y + (fo >> 1)));\n    else if (k === SHELF) j = lut(T - 0.2), b = B * 0.4;\n    else if (k === HOLE) j = lut(mix(Te[c - 1], T, 0.5) + 0.04), b = 0.85 + 0.15 * sin(t * 9 + x);\n    else {\n      // The flue: hot gas rising in bands, and each stoke's black smoke going up.\n      let dk = 0;\n      for (const s of S.slugs) dk = max(dk, s.a * exp(-(((Y - s.y) / 3) ** 2)));\n      j = lut(T - 0.12 - 0.2 * v + 0.1 * vn(X * 0.6, (Y + t * 22) * 0.3)), b = B * (0.6 + 0.3 * vn(X * 0.5 + 9, (Y + t * 26) * 0.2)) * (1 - 0.85 * dk);\n    }\n    for (let e = 0; e \u003c 3; e++) F[o + e] = bg[o + e] * m + LUT[j + e] * b;\n  }\n  for (const i of S.stars) for (let e = 0; e \u003c 3; e++) F[i * 3 + e] *= 0.75 + 0.25 * sin(t * 2.3 + i);\n\n  // Burning wood on the floors; in the firebox, thicker logs with their tops alight.\n  for (const l of S.logs)\n    for (let k = 0, T = Te[l.c], len = max(1, round(l.len * min(1, l.life * 1.6))); k \u003c len; k++) {\n      put(l.x + k, l.y, (k + floor(t * 4 + l.x)) % 3 ? lc(T - 0.45, 0.45) : lc(T + 0.1));\n      if (!l.c) put(l.x + k, l.y - 1, lc(T - 0.1 + 0.15 * sin(t * 7 + k + l.x)), 0.85);\n    }\n  for (const [lx, y0, y1] of S.lad) for (let y = floor(y0); y \u003c= y1; y++) put(lx - 1, y, WOOD, 0.7), put(lx + 1, y, WOOD, 0.7), y % 3 || put(lx, y, WOOD, 0.6);\n  for (let c = 1; c \u003c= n; c++) {\n    // The stoke hole, open while wood goes in, and the spy hole.\n    const T = Te[c], wx = floor(g[c].L - 1.5), sy = S.spy[c], fy = round(g[c].F), op = sm(0, 0.3, S.open[c]);\n    for (let y = fy - 3; y \u003c= fy - 2; y++) for (let x = wx; x \u003c= wx + 1; x++) put(x, y, op > 0.05 ? lc(T + 0.05, op) : lc(T - 0.3, 0.35));\n    if (op > 0.05) glow(wx - 1, fy - 2.5, 6, lc(T - 0.1), 0.35 * op);\n    put(wx, sy, lc(T, 0.9)), put(wx + 1, sy, lc(T));\n    for (let x = wx + 2; x \u003c= wx + 6; x++) put(x, sy + 2, lc(T - 0.2, 0.4));\n    // Three cones on a pad, each bending once the heat work passes its number.\n    for (let m = 0; m \u003c 3; m++) {\n      const b = sm(0.57 + 0.12 * m, 0.68 + 0.12 * m, S.Hc[c]), cx = wx + 2 + 2 * m + (b > 0.4), cc = lc(T - 0.15, 0.5);\n      put(cx - (b > 0.4), sy + 1, cc), put(cx, sy, cc, b \u003c 0.75 ? 1 : 0.5), put(cx, b \u003c 0.75 ? sy - 1 : sy + 1, cc);\n    }\n    // Flame out of the spy hole after a stoke, or whenever the wind chokes the chimney.\n    const s = max(q[c] * red(age[c]) * sm(0.15, 0.35, age[c]), 0.55 * q[c - 1] * red(age[c - 1] - 0.3) * sm(0.4, 0.6, age[c - 1])) + 0.3 * max(0, -wind) * (0.7 + 0.3 * sin(t * 3 + c));\n    if (s \u003c 0.05) continue;\n    const x0 = wx - 0.5, y0 = sy + 0.5, len = 2 + 9 * s * (0.8 + 0.2 * sin(t * 13 + c));\n    glow(x0, y0, 5, [120, 50, 10], s);\n    for (let j = 0; j \u003c len; j++) {\n      const u = j / len, x = x0 - j * (1 - 0.6 * max(0, wind)) + wind * j * 0.4, y = y0 - j * j * 0.06 - j * 0.15 + sin(t * 17 + j) * 0.4 * u;\n      put(x, y, lc(T + 0.45 - 0.6 * u), 1 - u * 0.3);\n      if (u \u003c 0.7) put(x, y - 1, lc(T + 0.25 - 0.6 * u), 0.8 - u), put(x, y + 1, lc(T + 0.1 - 0.6 * u), 0.5 - 0.5 * u);\n    }\n  }\n  const pt = S.pot, [px, py, climb] = posAt(S, pt.A), pose = pt.mode === 1 ? 3 : pt.mode ? 0 : climb ? 2 : 1;\n  figure(px, py, pose, pose === 3 ? (pt.tm % 0.7) / 0.7 : pt.ph, 0.25 + 0.6 * sm(0, 0.3, S.open[pt.tgt]) * (pose === 3), 1);\n  figure(1, 122, S.fb.an > 0 ? 3 : 0, 1 - S.fb.an / 0.5, 0.5 + 0.3 * sin(t * 7), 0);\n  glow(5, 120, 6, lc(Te[0] - 0.1), 0.35);\n\n  // Smoke: puffs summed, then shaded grey, lit from below, or black after a stoke.\n  A.fill(0), K.fill(0), Q.fill(0);\n  for (const p of S.puffs)\n    for (let y = max(0, floor(p.y - p.r)); y \u003c= min(63, p.y + p.r); y++)\n      for (let x = max(0, floor(p.x - p.r)); x \u003c= min(W - 1, p.x + p.r); x++) {\n        const dx = (x + 0.5 - p.x) / p.r, dy = (y + 0.5 - p.y) / p.r, w = p.a * (1 - dx * dx - dy * dy) ** 2, i = y * W + x;\n        if (dx * dx + dy * dy \u003c 1) A[i] += w, K[i] += w * p.k, Q[i] += w * p.hot;\n      }\n  for (let i = 0; i \u003c W * 64; i++) {\n    if (A[i] \u003c 0.01) continue;\n    const y = i >> 6, tx = 0.6 * vn((i & 63) * 0.25 - t * wind, y * 0.25 + t * 0.8) + 0.4 * fn(i, y + (fo >> 2)), gr = 0.7 + 0.5 * tx;\n    const al = min(0.95, (1 - exp(-A[i] * 2.2)) * (0.6 + 0.6 * tx)), dk = K[i] / A[i], hq = min(1, Q[i] / A[i]) * (0.4 + 0.6 * sm(30, 10, y));\n    const o = i * 3;\n    F[o] = mix(F[o], mix(118 * gr, 16, dk) + 160 * hq, al), F[o + 1] = mix(F[o + 1], mix(106 * gr, 11, dk) + 60 * hq, al), F[o + 2] = mix(F[o + 2], mix(104 * gr, 10, dk) + 14 * hq, al);\n  }\n  // Flame licking out of the chimney's mouth.\n  const fh = 2 + 7 * S.flare;\n  glow(S.CX, TOP, 6, [110, 40, 8], S.flare * 0.8);\n  for (let j = 0, u = 0; j \u003c fh; u = ++j / fh)\n    for (let e = -1; e \u003c 2; e++) (u \u003c 0.5 || !e) && put(S.CX + e + wind * j * 0.6 + sin(t * 11 + j) * 0.6 * u, TOP - 1 - j, lc(Te[n] - 0.05 - 0.45 * u - 0.2 * abs(e)), e ? 0.6 : 1 - 0.5 * u);\n  for (const p of S.sparks) put(p.x, p.y, lc(0.35 + 0.75 * (p.life / p.L)), min(1, p.life * 2));\n  for (const m of S.motes) put(m.x, m.y, m.e ? [230, 110, 30] : [80, 78, 84], m.e ? 0.5 + 0.4 * sin(t * 5 + m.ph) : 0.6);\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Firing","min":-1,"max":1,"about":"The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the potter stokes every few seconds; 0.2 is ten times slower."},{"name":"Chambers","min":3,"max":6,"about":"Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves."},{"name":"Draft","min":-1,"max":1,"about":"Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame."}],"start":[0,2,3,0.06],"measures":{"motion":0.141,"detail":0.0581,"edges":0.3934,"complexity":1.5788,"coverage":0.9717,"colour":0.2311,"drift":0.0397},"knobResponse":[0.0974,0.0413,0.0659,0.0443]},{"slug":"one-bit","title":"One Bit","family":"pixel","round":17,"note":"달밤 바닷가 벼랑에 선 등대를 두 색과 Bayer 순서 디더링만으로 그린 1비트 화면이에요. 빛줄기가 돌고 구름이 달 앞을 지나고 안개 둑이 바다 위에서 오르내려도 한 프레임에 뒤집히는 픽셀은 열 개 안팎이에요. K1 이 앰버 단말기, 게임보이, 매킨토시, 전자잉크, 플레이데이트의 두 색을 골라요.","idea":"A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","layer":{"id":"layer-one-bit","type":"code","name":"one-bit","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver."},{"name":"Time","min":0.2,"max":3,"about":"How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still."},{"name":"Fog","min":0,"max":1,"about":"How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear."},{"name":"Wind","min":0,"max":1,"about":"At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff."}],"start":[0,2,0,0.06],"measures":{"motion":0.0337,"detail":0.3203,"edges":1,"complexity":0.0918,"coverage":0.242,"colour":0.3801,"drift":0.0416},"knobResponse":[0.2143,0.057,0.0812,0.0548]},{"slug":"op-stripes","title":"Op Stripes","family":"wave","round":1,"note":"브리짓 라일리 식의 두 색 가로줄이에요. 밑으로 지나가는 넓은 부풂 둘이 줄 간격을 벌려서 평평한 패널이 부푸는 것처럼 보여요.","idea":"Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-op-stripes","type":"code","name":"op-stripes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown."},{"name":"Drift","min":0.1,"max":6,"about":"How fast the bulges travel under the stripes and the bend rolls along them."},{"name":"Stripes","min":14,"max":26,"about":"Stripe pairs from top to bottom where nothing is swelling."},{"name":"Swell","min":0,"max":1,"about":"How far the stripes open over a bulge, from a soft swell to a wide flat lens."}],"start":[0,2,14,0.06],"measures":{"motion":0.0622,"detail":0.0792,"edges":1,"complexity":0.0654,"coverage":1,"colour":0.6118,"drift":0.0499},"knobResponse":[0.4596,0.1655,0.1894,0.1993]},{"slug":"origami","title":"Origami","family":"paper","round":26,"note":"어두운 호두나무 탁자의 램프 아래에서 청록 종이 한 장이 아홉 단계로 한 주름씩 접혀 종이학이 돼요. 학은 날개를 한 번 친 뒤 다시 펼쳐지고, 펼친 종이에는 산접기와 골접기의 주름 무늬가 남아요. K1 이 세이가이하 무늬 종이와 금박 같은 종이를 고르고, 누르면 학이 바로 펼쳐져요.","idea":"A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.","buttons":"K1 tap opens the crane flat now, or lays the next sheet if it is already open.","code":"// ===== Patternflow pattern =====\n// Title:   Origami\n// Family:  paper\n// Idea:    A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the orizuru, the paper crane folded from the bird base\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1\n//\n// Knob 1: Paper. Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which.\n// Knob 2: Speed. How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Sheets. How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3.\n// Knob 4: Lamp. Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way.\n// Buttons: K1 tap opens the crane flat now, or lays the next sheet if it is already open.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, hypot, log, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// The sheet is a diamond with corners (0, ±1) and (±1, 0), its crease-pattern\n// coordinates. K is where the petal fold's hinge crosses the square base and Q\n// is half the width of a leg once it is thinned.\nconst K = 1 - Math.SQRT1_2;\nconst Q = Math.SQRT1_2 * Math.tan(PI / 16);\n\n// An affine map [a, b, c, d, e, f]: x' = a x + b y + e, y' = c x + d y + f.\nconst mul = (M, A) => [\n  M[0] * A[0] + M[1] * A[2], M[0] * A[1] + M[1] * A[3],\n  M[2] * A[0] + M[3] * A[2], M[2] * A[1] + M[3] * A[3],\n  M[0] * A[4] + M[1] * A[5] + M[4], M[2] * A[4] + M[3] * A[5] + M[5],\n];\nconst tx = (A, c, j) => A[0] * c[j] + A[1] * c[j + 1] + A[4];\nconst ty = (A, c, j) => A[2] * c[j] + A[3] * c[j + 1] + A[5];\n// A flap turned by theta about the hinge through (hx, hy) with unit normal\n// (nx, ny) toward the flap, as seen from straight above: k = cos(theta) - 1.\n// At k = -2 the flap lies flat on the other side, mirrored.\nfunction hingeM(h, k) {\n  const [hx, hy, nx, ny] = h;\n  const hn = hx * nx + hy * ny;\n  return [1 + k * nx * nx, k * nx * ny, k * nx * ny, 1 + k * ny * ny, -k * hn * nx, -k * hn * ny];\n}\n\n// The crane. Each step is one or more folds: a crease line, a point on the\n// side that moves, which facets go (by the eighth of the sheet they came from\n// or where they lie now), and +1 for a valley fold that lands on top or -1\n// for one that goes behind.\nconst ALL = () => true;\nconst sec = (...s) => (f) => s.includes(f.sec);\nconst low = (...s) => (f, x, y) => y > K && s.includes(f.sec);\nconst legL = (f, x, y) => x \u003c 0 && y > K;\nconst legR = (f, x, y) => x > 0 && y > K;\n// The legs turn up about a line through (0, YP) along NL, so neck and tail\n// rise at 40 degrees.\nconst YP = 0.34;\nconst NL = [-0.906, 0.423];\nconst CRANE = [\n  // In half, corner to corner.\n  [{ l: [-1, 0, 1, 0], s: [0, -1], m: 1, sel: ALL }],\n  // Turned so the fold lies along the top.\n  [],\n  // The side corners down to the bottom one: the square base.\n  [{ l: [0, 0, -0.5, 0.5], s: [-1, 0], m: 1, sel: ALL }, { l: [0, 0, 0.5, 0.5], s: [1, 0], m: 1, sel: ALL }],\n  // Kite folds, the front layer to the front and the back one behind.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: 1, sel: sec(3) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: 1, sel: sec(0) },\n    { l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: sec(2) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: sec(1) }],\n  // The petal folds: front and back layers lift up past the top.\n  [{ l: [-1, K, 1, K], s: [0, 1], m: 1, sel: sec(0, 3) }, { l: [-1, K, 1, K], s: [0, 1], m: -1, sel: sec(1, 2) }],\n  // The sides of the middle layers tuck in: the bird base.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: low(4, 5) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: low(6, 7) }],\n  // The legs thinned.\n  [{ l: [0, 1, -Q, K], s: [-K, K], m: -1, sel: legL }, { l: [0, 1, Q, K], s: [K, K], m: -1, sel: legR }],\n  // The legs reverse-folded up into neck and tail.\n  [{ l: [0, YP, NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legL }, { l: [0, YP, -NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legR }],\n  // The tip of the neck reverse-folded down into the head.\n  [{ l: [-0.515, -0.013, -0.374, 0.004], s: [-0.506, -0.084], m: -1, sel: (f, x) => f.H[8] && x \u003c 0 }],\n];\n// Seconds per step at Speed 2, and how the sheet lies on the table at each\n// state: turned 45 degrees it is a square on the panel.\nconst DUR = [1.1, 0.7, 1.1, 0.8, 1.1, 0.8, 0.7, 1.0, 0.6];\nconst PHI = [PI / 4, PI / 4, 0, 0, 0, 0, 0, 0, 0, 0];\n// The finished crane flaps its front wing about the line it was lifted on.\nconst FLAPH = [0, K, 0, -1, 1];\n\n// A crease as a point on it and its unit normal toward the side that moves.\nfunction lineOf(mv) {\n  const [x1, y1, x2, y2] = mv.l;\n  const l = hypot(x2 - x1, y2 - y1) * ((mv.s[0] - x1) * (y1 - y2) + (mv.s[1] - y1) * (x2 - x1) \u003c 0 ? -1 : 1);\n  return [x1, y1, (y1 - y2) / l, (x2 - x1) / l];\n}\n\n// Cut a convex polygon by the sign of d, keeping the side s.\nfunction clip(cp, d, s) {\n  const out = [];\n  d.forEach((v, i) => {\n    const j = (i + 1) % d.length;\n    const a = v * s;\n    const b = d[j] * s;\n    const t = a / (a - b);\n    if (a >= 0) out.push(cp[2 * i], cp[2 * i + 1]);\n    if (a * b \u003c 0) out.push(cp[2 * i] + t * (cp[2 * j] - cp[2 * i]), cp[2 * i + 1] + t * (cp[2 * j + 1] - cp[2 * i + 1]));\n  });\n  return out;\n}\n\n// Fold the sheet through every step once, cutting facets along each crease\n// they cross. Each facet keeps where it lies, which way up and in which layer\n// at every state, so any moment of the folding and unfolding is a lookup.\nfunction build(steps) {\n  const C = [[1, 0], [0.5, 0.5], [0, 1], [-0.5, 0.5], [-1, 0], [-0.5, -0.5], [0, -1], [0.5, -0.5]];\n  const F = C.map((c, s) => ({ cp: [0, 0, c[0], c[1], ...C[(s + 1) % 8]], sec: s, T: [[1, 0, 0, 1, 0, 0]], L: [0], H: [null] }));\n  const n = steps.length;\n  for (let k = 1; k \u003c= n; k++) {\n    const top = max(...F.map((f) => f.L[k - 1]));\n    const bot = min(...F.map((f) => f.L[k - 1]));\n    for (const f of F) (f.T[k] = f.T[k - 1]), (f.L[k] = f.L[k - 1]), (f.H[k] = null);\n    for (const mv of steps[k - 1]) {\n      const h = lineOf(mv);\n      const [px, py, nx, ny] = h;\n      const moved = [];\n      for (const f of F.slice()) {\n        if (f.H[k]) continue;\n        const A = f.T[k - 1];\n        const cp = f.cp;\n        const m = cp.length / 2;\n        let cx = 0;\n        let cy = 0;\n        const d = [];\n        for (let j = 0; j \u003c 2 * m; j += 2) {\n          const x = tx(A, cp, j);\n          const y = ty(A, cp, j);\n          (cx += x / m), (cy += y / m);\n          const dd = (x - px) * nx + (y - py) * ny;\n          d.push(abs(dd) \u003c 1e-9 ? 0 : dd);\n        }\n        if (!mv.sel(f, cx, cy) || max(...d) \u003c 1e-6) continue;\n        let g = f;\n        if (min(...d) \u003c -1e-6) {\n          g = { cp: clip(cp, d, 1), sec: f.sec, T: f.T.slice(), L: f.L.slice(), H: f.H.slice() };\n          f.cp = clip(cp, d, -1);\n          F.push(g);\n        }\n        moved.push(g);\n      }\n      let lo = 1e9;\n      let hi = -1e9;\n      for (const g of moved) (lo = min(lo, g.L[k - 1])), (hi = max(hi, g.L[k - 1]));\n      for (const g of moved) {\n        g.T[k] = mul(hingeM(h, -2), g.T[k - 1]);\n        g.H[k] = [px, py, nx, ny, mv.m];\n        g.L[k] = mv.m > 0 ? top + 1 + hi - g.L[k - 1] : bot - 1 - (g.L[k - 1] - lo);\n      }\n    }\n  }\n  // Facets that lie together at a state share a group there: a crease shows\n  // between two facets that lie together now but were parted at the deepest\n  // fold.\n  // And the extent of each state, turned as it lies, for the camera.\n  const nf = F.length;\n  const gid = new Int32Array(nf * (n + 1));\n  const det = new Int8Array(nf * (n + 1));\n  const box = [];\n  for (let k = 0; k \u003c= n; k++) {\n    const seen = new Map();\n    const c = cos(PHI[k]);\n    const s = sin(PHI[k]);\n    const b = [1e9, -1e9, 1e9, -1e9];\n    F.forEach((f, i) => {\n      const A = f.T[k];\n      const key = A.map((v) => round(v * 1e4)).join();\n      if (!seen.has(key)) seen.set(key, seen.size);\n      gid[i * (n + 1) + k] = seen.get(key);\n      det[i * (n + 1) + k] = A[0] * A[3] - A[1] * A[2] > 0 ? 1 : -1;\n      for (let j = 0; j \u003c f.cp.length; j += 2) {\n        const x = tx(A, f.cp, j);\n        const y = ty(A, f.cp, j);\n        const u = x * c - y * s;\n        const v = x * s + y * c;\n        (b[0] = min(b[0], u)), (b[1] = max(b[1], u)), (b[2] = min(b[2], v)), (b[3] = max(b[3], v));\n      }\n    });\n    const u = (b[0] + b[1]) / 2;\n    const v = (b[2] + b[3]) / 2;\n    box.push([u * c + v * s, -u * s + v * c, b[1] - b[0], b[3] - b[2]]);\n  }\n  const tilt = F32(nf * 2);\n  for (let i = 0; i \u003c nf * 2; i++) tilt[i] = Math.random() - 0.5;\n  return { F, n, gid, det, box, tilt };\n}\n\n// Papers: colour, second colour, print. 0 plain kami, 1 seigaiha waves,\n// 2 metal foil, 3 kanoko dots, 4 ichimatsu checks.\nconst PAPERS = [\n  [[0.16, 0.72, 0.8], null, 0],\n  [[0.13, 0.2, 0.58], [0.78, 0.86, 0.96], 1],\n  [[1, 0.78, 0.3], null, 2],\n  [[0.96, 0.46, 0.6], [1, 0.95, 0.96], 3],\n  [[0.98, 0.78, 0.12], null, 0],\n  [[0.12, 0.46, 0.26], [0.94, 0.88, 0.7], 4],\n  [[0.74, 0.78, 0.84], null, 2],\n  [[0.9, 0.16, 0.12], null, 0],\n];\nconst WHITE = [0.95, 0.93, 0.87];\n\nfunction print(kind, s, t) {\n  if (kind === 1) {\n    // Rows of scales two wide, each row half a scale lower and covering the one above.\n    const X = s * 3;\n    const Y = t * 3;\n    const j = ceil(2 * Y);\n    for (let jj = j + 1; jj >= j; jj--) {\n      const ox = jj & 1;\n      const dx = X - ox - 2 * round((X - ox) / 2);\n      const dy = Y - jj / 2;\n      const r = sqrt(dx * dx + dy * dy);\n      if (r \u003c 1 || jj === j) return (r * 3) % 1 \u003c 0.4 ? 1 : 0;\n    }\n  }\n  if (kind === 3) {\n    const X = s * 5;\n    const Y = t * 5;\n    const ox = floor(Y) & 1 ? 0.5 : 0;\n    const dx = X + ox - floor(X + ox) - 0.5;\n    const dy = Y - floor(Y) - 0.5;\n    return dx * dx + dy * dy \u003c 0.06 ? 1 : 0;\n  }\n  if (kind === 4) return (floor(s * 4 + 4) + floor(t * 4 + 4)) & 1;\n  return 0;\n}\n\n// The order a sheet goes through.\nconst WAIT = 0, IN = 1, REST = 2, FOLD = 3, HOLD = 4, SIT = 5, UNFOLD = 6, CREASE = 7;\n\nconst newSheet = (sl, first) =>\n  Object.assign(sl, { old: first ? null : { seq: sl.seq, kmax: sl.kmax }, seq: sl.seq + 1, ph: IN, pt: 0, k: 0, u: 1, kmax: 0, rush: false });\nconst slot = (i) => ({ i, ph: WAIT, pt: -2.4 * i, k: 0, u: 1, kmax: 0, seq: -1, old: null, rush: false });\nconst F32 = (n) => new Float32Array(n);\n\nexport function setup(params) {\n  const grain = F32(N);\n  for (let y = 0; y \u003c H; y++) {\n    let w = Math.random();\n    for (let x = 0; x \u003c W; x++) {\n      w += 0.25 * (Math.random() - 0.5);\n      grain[y * W + x] = 0.75 + 0.2 * sin(y * 0.9 + 3 * sin(x * 0.05 + y * 0.02)) + 0.1 * w;\n    }\n  }\n  params.s = { M: build(CRANE), slots: [slot(0)], n: 1, base: 0, rate: 1, lamp: 0.06, lampKey: null, grain, bg: F32(N * 3) };\n  for (const k of [\"LX\", \"LY\", \"LZ\", \"LI\", \"HZ\"]) params.s[k] = F32(N);\n}\n\nfunction stepSlot(sl, h, M) {\n  if (sl.rush && (sl.ph === UNFOLD || sl.ph === CREASE)) h *= 4;\n  sl.pt += h;\n  const ph = sl.ph;\n  if (ph === WAIT && sl.pt >= 0) newSheet(sl, true);\n  else if (ph === IN && sl.pt >= 1.2) Object.assign(sl, { ph: REST, pt: 0, old: null });\n  else if (ph === REST && sl.pt >= 1) Object.assign(sl, { ph: FOLD, k: 1, u: 0 });\n  else if (ph === FOLD) {\n    sl.u = min(1, sl.u + h / DUR[sl.k - 1]);\n    if (sl.u >= 1) Object.assign(sl, { kmax: max(sl.kmax, sl.k), ph: HOLD, pt: 0 });\n  } else if (ph === HOLD && sl.pt >= 0.25) {\n    if (sl.k \u003c M.n) Object.assign(sl, { k: sl.k + 1, u: 0, ph: FOLD });\n    else Object.assign(sl, { ph: SIT, pt: 0 });\n  } else if (ph === SIT && sl.pt >= 3) sl.ph = UNFOLD;\n  else if (ph === UNFOLD && (sl.u -= h / 0.45) \u003c= 0) {\n    if (sl.k > 1) (sl.k--), (sl.u += 1);\n    else Object.assign(sl, { k: 0, u: 1, ph: CREASE, pt: 0 });\n  } else if (ph === CREASE && (sl.pt >= 2.5 || sl.rush)) newSheet(sl, false);\n}\n\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.base = floor(cl(k[0], 0, 1) * (PAPERS.length - 0.01));\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.lamp = cl(k[3], -1, 1);\n  const n = cl(round(k[2]), 1, 3);\n  if (n !== S.n) {\n    S.n = n;\n    while (S.slots.length \u003c n) S.slots.push(slot(S.slots.length));\n    S.slots.length = n;\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sl of S.slots) {\n      if (sl.ph === FOLD || sl.ph === HOLD || sl.ph === SIT) {\n        if (sl.ph !== FOLD) sl.u = 1;\n        sl.kmax = max(sl.kmax, sl.k);\n        sl.ph = UNFOLD;\n      } else if (sl.ph !== WAIT) {\n        if (sl.ph === UNFOLD || sl.ph === CREASE) sl.rush = true;\n        else newSheet(sl, false);\n      }\n    }\n  for (const sl of S.slots) stepSlot(sl, dt * S.rate, S.M);\n}\n\n// The lamp: a bulb LH above the table at (lx, LY0). Each LED keeps the unit\n// vector to it, the half vector's height for the shine on foil, and how much\n// light reaches it. The table is dark walnut, kept below 24 of 255; on it lie\n// the pack of paper, the next sheet on top, and a bone folder.\nconst LH = 80;\nconst LY0 = 34;\nconst PC = cos(-0.2);\nconst PS = sin(-0.2);\nfunction lampField(S, next) {\n  const lx = 31.5 + 44 * S.lamp;\n  const { LX, LY, LZ, LI, HZ, bg, grain } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = lx - x - 0.5;\n      const dy = LY0 - y - 0.5;\n      const r2 = dx * dx + dy * dy;\n      const l = sqrt(r2 + LH * LH);\n      LX[p] = dx / l;\n      LY[p] = dy / l;\n      LZ[p] = LH / l;\n      LI[p] = (LH * LH) / (LH * LH + 0.4 * r2);\n      HZ[p] = (LZ[p] + 1) / sqrt(LX[p] * LX[p] + LY[p] * LY[p] + (LZ[p] + 1) * (LZ[p] + 1));\n      const lit = LI[p] * (0.22 + 0.9 * LZ[p]);\n      const w = min(21, 255 * 0.085 * (0.25 + 0.75 * LI[p]) * grain[p]);\n      let c = [w, w * 0.56, w * 0.32];\n      // The pack: four sheets a little askew, each showing an edge of its colour.\n      for (let j = 0; j \u003c 4; j++) {\n        const X = x + 0.5 + 1 - 0.9 * j;\n        const Y = y + 0.5 - 1 - 1.3 * j;\n        const u = (X * PC + Y * PS) / 13;\n        const v = (Y * PC - X * PS) / 13;\n        if (abs(u) \u003c 1 && abs(v) \u003c 1) {\n          const P = PAPERS[(next + j) % PAPERS.length];\n          const col = P[2] !== 2 && print(P[2], u, v) ? P[1] : P[0];\n          const e = (abs(u) > 0.92 || abs(v) > 0.92 ? 0.7 : 1) * (j ? 0.8 : 1) * (P[2] === 2 ? 0.75 : 1);\n          c = col.map((v) => 255 * v * lit * e);\n          break;\n        }\n      }\n      // The bone folder, rounded at both ends, its back catching the lamp.\n      const ax = x + 0.5 - 47;\n      const ay = y + 0.5 - 118;\n      const t = cl((ax * 14 - ay * 15) / 421, 0, 1);\n      const d = hypot(ax - 14 * t, ay + 15 * t);\n      if (d \u003c 1.7) c = [0.8, 0.74, 0.62].map((v) => 255 * v * lit * (0.75 + 0.35 * (1 - d / 1.7)));\n      bg[p * 3] = c[0];\n      bg[p * 3 + 1] = c[1];\n      bg[p * 3 + 2] = c[2];\n    }\n  S.lp = [lx, LY0, LH];\n}\n\n// Per frame: every facet on the table, as drawn.\n// RA maps it from the crease pattern to the panel, RN is its lit normal, RK\n// its draw order; RS the side up, RP the paper, RQ the sheet; RG and RX its\n// group now and at the deepest fold, RU and RL its side and layer there.\nconst MAXR = 1600;\nconst [RA, RN, RK, RL, RM] = [6, 3, 1, 1, 1].map((k) => F32(MAXR * k));\nconst [RS, RU] = [new Int8Array(MAXR), new Int8Array(MAXR)];\nconst [RP, RQ, RG, RX] = [0, 0, 0, 0].map(() => new Int32Array(MAXR));\nconst ORD = [];\nconst RCP = [];\nconst ID = new Int16Array(N);\nconst SHK = F32(N);\nconst VX = F32(64);\nconst VY = F32(64);\nlet nr = 0;\n\n// Fill a convex polygon with v; mode 0 writes facet ids, mode 1 raises the\n// shadow key.\nfunction fill(cnt, v, mode) {\n  let ya = 1e9;\n  let yb = -1e9;\n  for (let i = 0; i \u003c cnt; i++) (ya = min(ya, VY[i])), (yb = max(yb, VY[i]));\n  const y0 = max(0, ceil(ya - 0.5));\n  const y1 = min(H - 1, floor(yb - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 1e9;\n    let xr = -1e9;\n    for (let i = 0; i \u003c cnt; i++) {\n      const j = i + 1 \u003c cnt ? i + 1 : 0;\n      const ay = VY[i];\n      const by = VY[j];\n      if ((ay \u003c= py && by > py) || (by \u003c= py && ay > py)) {\n        const x = VX[i] + ((py - ay) / (by - ay)) * (VX[j] - VX[i]);\n        (xl = min(xl, x)), (xr = max(xr, x));\n      }\n    }\n    const x0 = max(0, ceil(xl - 0.5));\n    const x1 = min(W - 1, floor(xr - 0.5));\n    const row = y * W;\n    if (mode === 0) for (let x = x0; x \u003c= x1; x++) ID[row + x] = v;\n    else for (let x = x0; x \u003c= x1; x++) if (SHK[row + x] \u003c v) SHK[row + x] = v;\n  }\n}\n\n// The camera for state j of a sheet in its slot: turned PHI[j], scaled to fit.\nfunction viewOf(M, j, fw, fh, zmax) {\n  const b = M.box[j];\n  return [PHI[j], log(min(fw / b[2], fh / b[3], zmax)), b[0], b[1]];\n}\n\n// Put one sheet on the table: model M at step k, progress u, in slot\n// region (cy, fw, fh), paper index pi. dx and dphi slide a new sheet in.\nfunction placeSheet(S, M, k, u, flap, kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, keyBase, mem, qid) {\n  const n1 = M.n + 1;\n  const go = k > 0 && u > 0 && u \u003c 1;\n  const jb = k === 0 ? 0 : u >= 1 ? k : k - 1;\n  const a = viewOf(M, k > 0 ? k - 1 : 0, fw, fh, zmax);\n  const b = viewOf(M, k, fw, fh, zmax);\n  const w = k > 0 ? ease(u) : 1;\n  const phi = mix(a[0], b[0], w) + dphi;\n  const z = exp(mix(a[1], b[1], w));\n  const ccx = mix(a[2], b[2], w);\n  const ccy = mix(a[3], b[3], w);\n  const c = cos(phi) * z;\n  const s = sin(phi) * z;\n  const V = [c, -s, s, c, 31.5 + dx - (c * ccx - s * ccy), cyp + dy - (s * ccx + c * ccy)];\n  const [lx, ly, lh] = S.lp;\n  M.F.forEach((f, i) => {\n    if (nr >= MAXR) return;\n    const r = nr++;\n    // The hinge this facet turns on now, if any: the fold under way, or the\n    // finished crane's wing beat.\n    let hg = null;\n    let th = 0;\n    if (go && f.H[k]) (hg = f.H[k]), (th = PI * ease(u));\n    else if (flap > 0 && (f.sec === 0 || f.sec === 3)) (hg = FLAPH), (th = flap);\n    const A0 = f.T[jb];\n    const ct = cos(th);\n    const st = sin(th);\n    const A = mul(V, hg ? mul(hingeM(hg, ct - 1), A0) : A0);\n    RA.set(A, r * 6);\n    RCP[r] = f.cp;\n    let side = M.det[i * n1 + jb];\n    let nx = 0;\n    let ny = 0;\n    let nz = 1;\n    let key = f.L[jb];\n    if (hg) {\n      const m = hg[4];\n      // The hinge normal as it lies on the panel.\n      const hx = hg[2] * cos(phi) - hg[3] * sin(phi);\n      const hy = hg[2] * sin(phi) + hg[3] * cos(phi);\n      nx = -m * st * hx;\n      ny = -m * st * hy;\n      nz = ct;\n      if (ct \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz), (side = -side);\n      key = (m > 0 ? 1e6 : -1e6) + (ct >= 0 ? f.L[jb] : go ? f.L[k] : -f.L[jb]);\n      // A lifted flap throws its shadow away from the lamp.\n      if (m > 0 && st > 0.02) {\n        const cp = f.cp;\n        const cnt = cp.length / 2;\n        for (let j = 0; j \u003c cnt; j++) {\n          const hz = (((tx(A0, cp, 2 * j) - hg[0]) * hg[2] + (ty(A0, cp, 2 * j) - hg[1]) * hg[3]) * st * z) / lh;\n          const px = tx(A, cp, 2 * j);\n          const py = ty(A, cp, 2 * j);\n          VX[j] = px + hz * (px - lx);\n          VY[j] = py + hz * (py - ly);\n        }\n        fill(cnt, keyBase + key, 1);\n      }\n    }\n    // Paper never lies quite flat: each layer tips a little its own way, and a\n    // sheet opened out again keeps a tilt in every facet between its creases.\n    const g = M.gid[i * n1 + jb];\n    nx += 0.06 * M.tilt[2 * g] + 0.12 * mem * M.tilt[2 * i + 1];\n    ny += 0.06 * M.tilt[2 * g + 1] + 0.12 * mem * M.tilt[2 * i];\n    const nl = hypot(nx, ny, nz);\n    RN[r * 3] = nx / nl;\n    RN[r * 3 + 1] = ny / nl;\n    RN[r * 3 + 2] = nz / nl;\n    RS[r] = side;\n    RK[r] = keyBase + key;\n    RP[r] = pi;\n    RG[r] = g;\n    RX[r] = M.gid[i * n1 + kmax];\n    RU[r] = M.det[i * n1 + kmax];\n    RL[r] = f.L[kmax];\n    RQ[r] = qid;\n    RM[r] = mem;\n    ORD.push(r);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const next = (S.base + S.slots[0].seq + 1) % PAPERS.length;\n  const lk = S.lamp + 10 * next;\n  if (S.lampKey !== lk) (S.lampKey = lk), lampField(S, next);\n  const { M, LX, LY, LZ, LI, HZ, bg } = S;\n  nr = 0;\n  ORD.length = 0;\n  SHK.fill(-1e12);\n  const n = S.slots.length;\n  const sh = H / n;\n  const zmax = [74, 50, 34][n - 1];\n  const fw = n === 1 ? 60 : n === 2 ? 56 : 46;\n  const fh = sh - (n === 1 ? 12 : 8);\n  let q = 0;\n  for (const sl of S.slots) {\n    if (sl.ph === WAIT) continue;\n    const cyp = sl.i * sh + sh / 2;\n    const pi = (S.base + 3 * sl.i + sl.seq) % PAPERS.length;\n    if (sl.old) placeSheet(S, M, 0, 1, 0, sl.old.kmax, (S.base + 3 * sl.i + sl.old.seq) % PAPERS.length, cyp, fw, fh, zmax, 0, 0, 0, -1e8, 1, q++);\n    let dx = 0;\n    let dy = 0;\n    let dphi = 0;\n    if (sl.ph === IN) {\n      // Slid off the pack in the corner.\n      const e = 1 - ease(sl.pt / 1.2);\n      dx = -62 * e;\n      dy = (8 - cyp) * e;\n      dphi = -0.2 * e;\n    }\n    let flap = 0;\n    if (sl.ph === SIT) {\n      // The crane beats its wing once.\n      const t = (sl.pt - 0.6) / 1.6;\n      if (t > 0 && t \u003c 1) flap = 0.78 * PI * sin(PI * t) ** 2;\n    }\n    const mem = sl.ph === UNFOLD || sl.ph === CREASE ? 1 : 0;\n    placeSheet(S, M, sl.k, sl.u, flap, sl.kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, 0, mem, q++);\n  }\n  ORD.sort((a, b) => RK[a] - RK[b]);\n  ID.fill(-1);\n  for (const r of ORD) {\n    const cp = RCP[r];\n    const A = RA.subarray(r * 6, r * 6 + 6);\n    for (let j = 0; j \u003c cp.length; j += 2) (VX[j / 2] = tx(A, cp, j)), (VY[j / 2] = ty(A, cp, j));\n    fill(cp.length / 2, r, 0);\n  }\n  const lx = S.lp[0];\n  const sx = lx \u003c 31.5 ? -1 : 1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const r = ID[p];\n      if (r \u003c 0) {\n        const f = SHK[p] > -1e11 ? 0.55 : 1;\n        display.setPixel(x, y, bg[p * 3] * f, bg[p * 3 + 1] * f, bg[p * 3 + 2] * f);\n      } else {\n        // The print, found back in the crease pattern: paper square s, t in -1..1.\n        const o = r * 6;\n        const [a, b, c, d] = [RA[o], RA[o + 1], RA[o + 2], RA[o + 3]];\n        const det = a * d - b * c;\n        const P = PAPERS[RP[r]];\n        let col = P[0];\n        let kind = P[2];\n        if (RS[r] \u003c 0) (col = WHITE), (kind = -1);\n        else if (P[1] && abs(det) > 1e-3) {\n          const X = x + 0.5 - RA[o + 4];\n          const Y = y + 0.5 - RA[o + 5];\n          const cu = (d * X - b * Y) / det;\n          const cv = (a * Y - c * X) / det;\n          if (print(kind, cu + cv, cv - cu)) col = P[1];\n        }\n        const nz = RN[r * 3 + 2];\n        const I = LI[p];\n        const hz = max(0, nz * HZ[p]);\n        // Kami is matte with a little sheen; foil is darker but throws the lamp back.\n        const fo = kind === 2;\n        const lit = I * (0.22 + 0.9 * max(0, RN[r * 3] * LX[p] + RN[r * 3 + 1] * LY[p] + nz * LZ[p])) * (fo ? 0.8 : 1);\n        const sp = I * (fo ? 0.25 + 0.9 * hz ** 12 : 0.06 * hz ** 8);\n        // Shade under a lifted flap, and along the edge of a layer above.\n        const k = RK[r];\n        let f = SHK[p] > k ? 0.55 : 1;\n        const s = x - sx >= 0 && x - sx \u003c W && y > 0 ? ID[p - W - sx] : -1;\n        if (s >= 0 && RQ[s] === RQ[r] && RK[s] > k + 0.5 && RG[s] !== RG[r]) f *= 0.66;\n        // Creases left from the folding.\n        if (RM[r] > 0) {\n          for (const s of [x + 1 \u003c W ? ID[p + 1] : -1, y + 1 \u003c H ? ID[p + W] : -1])\n            if (s >= 0 && s !== r && RQ[s] === RQ[r] && RG[s] === RG[r] && RX[s] !== RX[r]) {\n              const up = RL[s] > RL[r] ? s : r;\n              f *= RU[up] * RS[r] > 0 ? 1.22 : 0.72;\n              break;\n            }\n        }\n        const m = 255 * f * (fo ? lit + sp : lit);\n        const e = fo ? 0 : 255 * f * sp;\n        display.setPixel(x, y, min(255, col[0] * m + e), min(255, col[1] * m + e), min(255, col[2] * m + e));\n      }\n    }\n}\n","layer":{"id":"layer-origami","type":"code","name":"origami","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Origami\n// Family:  paper\n// Idea:    A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the orizuru, the paper crane folded from the bird base\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1\n//\n// Knob 1: Paper. Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which.\n// Knob 2: Speed. How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Sheets. How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3.\n// Knob 4: Lamp. Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way.\n// Buttons: K1 tap opens the crane flat now, or lays the next sheet if it is already open.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, hypot, log, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// The sheet is a diamond with corners (0, ±1) and (±1, 0), its crease-pattern\n// coordinates. K is where the petal fold's hinge crosses the square base and Q\n// is half the width of a leg once it is thinned.\nconst K = 1 - Math.SQRT1_2;\nconst Q = Math.SQRT1_2 * Math.tan(PI / 16);\n\n// An affine map [a, b, c, d, e, f]: x' = a x + b y + e, y' = c x + d y + f.\nconst mul = (M, A) => [\n  M[0] * A[0] + M[1] * A[2], M[0] * A[1] + M[1] * A[3],\n  M[2] * A[0] + M[3] * A[2], M[2] * A[1] + M[3] * A[3],\n  M[0] * A[4] + M[1] * A[5] + M[4], M[2] * A[4] + M[3] * A[5] + M[5],\n];\nconst tx = (A, c, j) => A[0] * c[j] + A[1] * c[j + 1] + A[4];\nconst ty = (A, c, j) => A[2] * c[j] + A[3] * c[j + 1] + A[5];\n// A flap turned by theta about the hinge through (hx, hy) with unit normal\n// (nx, ny) toward the flap, as seen from straight above: k = cos(theta) - 1.\n// At k = -2 the flap lies flat on the other side, mirrored.\nfunction hingeM(h, k) {\n  const [hx, hy, nx, ny] = h;\n  const hn = hx * nx + hy * ny;\n  return [1 + k * nx * nx, k * nx * ny, k * nx * ny, 1 + k * ny * ny, -k * hn * nx, -k * hn * ny];\n}\n\n// The crane. Each step is one or more folds: a crease line, a point on the\n// side that moves, which facets go (by the eighth of the sheet they came from\n// or where they lie now), and +1 for a valley fold that lands on top or -1\n// for one that goes behind.\nconst ALL = () => true;\nconst sec = (...s) => (f) => s.includes(f.sec);\nconst low = (...s) => (f, x, y) => y > K && s.includes(f.sec);\nconst legL = (f, x, y) => x \u003c 0 && y > K;\nconst legR = (f, x, y) => x > 0 && y > K;\n// The legs turn up about a line through (0, YP) along NL, so neck and tail\n// rise at 40 degrees.\nconst YP = 0.34;\nconst NL = [-0.906, 0.423];\nconst CRANE = [\n  // In half, corner to corner.\n  [{ l: [-1, 0, 1, 0], s: [0, -1], m: 1, sel: ALL }],\n  // Turned so the fold lies along the top.\n  [],\n  // The side corners down to the bottom one: the square base.\n  [{ l: [0, 0, -0.5, 0.5], s: [-1, 0], m: 1, sel: ALL }, { l: [0, 0, 0.5, 0.5], s: [1, 0], m: 1, sel: ALL }],\n  // Kite folds, the front layer to the front and the back one behind.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: 1, sel: sec(3) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: 1, sel: sec(0) },\n    { l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: sec(2) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: sec(1) }],\n  // The petal folds: front and back layers lift up past the top.\n  [{ l: [-1, K, 1, K], s: [0, 1], m: 1, sel: sec(0, 3) }, { l: [-1, K, 1, K], s: [0, 1], m: -1, sel: sec(1, 2) }],\n  // The sides of the middle layers tuck in: the bird base.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: low(4, 5) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: low(6, 7) }],\n  // The legs thinned.\n  [{ l: [0, 1, -Q, K], s: [-K, K], m: -1, sel: legL }, { l: [0, 1, Q, K], s: [K, K], m: -1, sel: legR }],\n  // The legs reverse-folded up into neck and tail.\n  [{ l: [0, YP, NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legL }, { l: [0, YP, -NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legR }],\n  // The tip of the neck reverse-folded down into the head.\n  [{ l: [-0.515, -0.013, -0.374, 0.004], s: [-0.506, -0.084], m: -1, sel: (f, x) => f.H[8] && x \u003c 0 }],\n];\n// Seconds per step at Speed 2, and how the sheet lies on the table at each\n// state: turned 45 degrees it is a square on the panel.\nconst DUR = [1.1, 0.7, 1.1, 0.8, 1.1, 0.8, 0.7, 1.0, 0.6];\nconst PHI = [PI / 4, PI / 4, 0, 0, 0, 0, 0, 0, 0, 0];\n// The finished crane flaps its front wing about the line it was lifted on.\nconst FLAPH = [0, K, 0, -1, 1];\n\n// A crease as a point on it and its unit normal toward the side that moves.\nfunction lineOf(mv) {\n  const [x1, y1, x2, y2] = mv.l;\n  const l = hypot(x2 - x1, y2 - y1) * ((mv.s[0] - x1) * (y1 - y2) + (mv.s[1] - y1) * (x2 - x1) \u003c 0 ? -1 : 1);\n  return [x1, y1, (y1 - y2) / l, (x2 - x1) / l];\n}\n\n// Cut a convex polygon by the sign of d, keeping the side s.\nfunction clip(cp, d, s) {\n  const out = [];\n  d.forEach((v, i) => {\n    const j = (i + 1) % d.length;\n    const a = v * s;\n    const b = d[j] * s;\n    const t = a / (a - b);\n    if (a >= 0) out.push(cp[2 * i], cp[2 * i + 1]);\n    if (a * b \u003c 0) out.push(cp[2 * i] + t * (cp[2 * j] - cp[2 * i]), cp[2 * i + 1] + t * (cp[2 * j + 1] - cp[2 * i + 1]));\n  });\n  return out;\n}\n\n// Fold the sheet through every step once, cutting facets along each crease\n// they cross. Each facet keeps where it lies, which way up and in which layer\n// at every state, so any moment of the folding and unfolding is a lookup.\nfunction build(steps) {\n  const C = [[1, 0], [0.5, 0.5], [0, 1], [-0.5, 0.5], [-1, 0], [-0.5, -0.5], [0, -1], [0.5, -0.5]];\n  const F = C.map((c, s) => ({ cp: [0, 0, c[0], c[1], ...C[(s + 1) % 8]], sec: s, T: [[1, 0, 0, 1, 0, 0]], L: [0], H: [null] }));\n  const n = steps.length;\n  for (let k = 1; k \u003c= n; k++) {\n    const top = max(...F.map((f) => f.L[k - 1]));\n    const bot = min(...F.map((f) => f.L[k - 1]));\n    for (const f of F) (f.T[k] = f.T[k - 1]), (f.L[k] = f.L[k - 1]), (f.H[k] = null);\n    for (const mv of steps[k - 1]) {\n      const h = lineOf(mv);\n      const [px, py, nx, ny] = h;\n      const moved = [];\n      for (const f of F.slice()) {\n        if (f.H[k]) continue;\n        const A = f.T[k - 1];\n        const cp = f.cp;\n        const m = cp.length / 2;\n        let cx = 0;\n        let cy = 0;\n        const d = [];\n        for (let j = 0; j \u003c 2 * m; j += 2) {\n          const x = tx(A, cp, j);\n          const y = ty(A, cp, j);\n          (cx += x / m), (cy += y / m);\n          const dd = (x - px) * nx + (y - py) * ny;\n          d.push(abs(dd) \u003c 1e-9 ? 0 : dd);\n        }\n        if (!mv.sel(f, cx, cy) || max(...d) \u003c 1e-6) continue;\n        let g = f;\n        if (min(...d) \u003c -1e-6) {\n          g = { cp: clip(cp, d, 1), sec: f.sec, T: f.T.slice(), L: f.L.slice(), H: f.H.slice() };\n          f.cp = clip(cp, d, -1);\n          F.push(g);\n        }\n        moved.push(g);\n      }\n      let lo = 1e9;\n      let hi = -1e9;\n      for (const g of moved) (lo = min(lo, g.L[k - 1])), (hi = max(hi, g.L[k - 1]));\n      for (const g of moved) {\n        g.T[k] = mul(hingeM(h, -2), g.T[k - 1]);\n        g.H[k] = [px, py, nx, ny, mv.m];\n        g.L[k] = mv.m > 0 ? top + 1 + hi - g.L[k - 1] : bot - 1 - (g.L[k - 1] - lo);\n      }\n    }\n  }\n  // Facets that lie together at a state share a group there: a crease shows\n  // between two facets that lie together now but were parted at the deepest\n  // fold.\n  // And the extent of each state, turned as it lies, for the camera.\n  const nf = F.length;\n  const gid = new Int32Array(nf * (n + 1));\n  const det = new Int8Array(nf * (n + 1));\n  const box = [];\n  for (let k = 0; k \u003c= n; k++) {\n    const seen = new Map();\n    const c = cos(PHI[k]);\n    const s = sin(PHI[k]);\n    const b = [1e9, -1e9, 1e9, -1e9];\n    F.forEach((f, i) => {\n      const A = f.T[k];\n      const key = A.map((v) => round(v * 1e4)).join();\n      if (!seen.has(key)) seen.set(key, seen.size);\n      gid[i * (n + 1) + k] = seen.get(key);\n      det[i * (n + 1) + k] = A[0] * A[3] - A[1] * A[2] > 0 ? 1 : -1;\n      for (let j = 0; j \u003c f.cp.length; j += 2) {\n        const x = tx(A, f.cp, j);\n        const y = ty(A, f.cp, j);\n        const u = x * c - y * s;\n        const v = x * s + y * c;\n        (b[0] = min(b[0], u)), (b[1] = max(b[1], u)), (b[2] = min(b[2], v)), (b[3] = max(b[3], v));\n      }\n    });\n    const u = (b[0] + b[1]) / 2;\n    const v = (b[2] + b[3]) / 2;\n    box.push([u * c + v * s, -u * s + v * c, b[1] - b[0], b[3] - b[2]]);\n  }\n  const tilt = F32(nf * 2);\n  for (let i = 0; i \u003c nf * 2; i++) tilt[i] = Math.random() - 0.5;\n  return { F, n, gid, det, box, tilt };\n}\n\n// Papers: colour, second colour, print. 0 plain kami, 1 seigaiha waves,\n// 2 metal foil, 3 kanoko dots, 4 ichimatsu checks.\nconst PAPERS = [\n  [[0.16, 0.72, 0.8], null, 0],\n  [[0.13, 0.2, 0.58], [0.78, 0.86, 0.96], 1],\n  [[1, 0.78, 0.3], null, 2],\n  [[0.96, 0.46, 0.6], [1, 0.95, 0.96], 3],\n  [[0.98, 0.78, 0.12], null, 0],\n  [[0.12, 0.46, 0.26], [0.94, 0.88, 0.7], 4],\n  [[0.74, 0.78, 0.84], null, 2],\n  [[0.9, 0.16, 0.12], null, 0],\n];\nconst WHITE = [0.95, 0.93, 0.87];\n\nfunction print(kind, s, t) {\n  if (kind === 1) {\n    // Rows of scales two wide, each row half a scale lower and covering the one above.\n    const X = s * 3;\n    const Y = t * 3;\n    const j = ceil(2 * Y);\n    for (let jj = j + 1; jj >= j; jj--) {\n      const ox = jj & 1;\n      const dx = X - ox - 2 * round((X - ox) / 2);\n      const dy = Y - jj / 2;\n      const r = sqrt(dx * dx + dy * dy);\n      if (r \u003c 1 || jj === j) return (r * 3) % 1 \u003c 0.4 ? 1 : 0;\n    }\n  }\n  if (kind === 3) {\n    const X = s * 5;\n    const Y = t * 5;\n    const ox = floor(Y) & 1 ? 0.5 : 0;\n    const dx = X + ox - floor(X + ox) - 0.5;\n    const dy = Y - floor(Y) - 0.5;\n    return dx * dx + dy * dy \u003c 0.06 ? 1 : 0;\n  }\n  if (kind === 4) return (floor(s * 4 + 4) + floor(t * 4 + 4)) & 1;\n  return 0;\n}\n\n// The order a sheet goes through.\nconst WAIT = 0, IN = 1, REST = 2, FOLD = 3, HOLD = 4, SIT = 5, UNFOLD = 6, CREASE = 7;\n\nconst newSheet = (sl, first) =>\n  Object.assign(sl, { old: first ? null : { seq: sl.seq, kmax: sl.kmax }, seq: sl.seq + 1, ph: IN, pt: 0, k: 0, u: 1, kmax: 0, rush: false });\nconst slot = (i) => ({ i, ph: WAIT, pt: -2.4 * i, k: 0, u: 1, kmax: 0, seq: -1, old: null, rush: false });\nconst F32 = (n) => new Float32Array(n);\n\nexport function setup(params) {\n  const grain = F32(N);\n  for (let y = 0; y \u003c H; y++) {\n    let w = Math.random();\n    for (let x = 0; x \u003c W; x++) {\n      w += 0.25 * (Math.random() - 0.5);\n      grain[y * W + x] = 0.75 + 0.2 * sin(y * 0.9 + 3 * sin(x * 0.05 + y * 0.02)) + 0.1 * w;\n    }\n  }\n  params.s = { M: build(CRANE), slots: [slot(0)], n: 1, base: 0, rate: 1, lamp: 0.06, lampKey: null, grain, bg: F32(N * 3) };\n  for (const k of [\"LX\", \"LY\", \"LZ\", \"LI\", \"HZ\"]) params.s[k] = F32(N);\n}\n\nfunction stepSlot(sl, h, M) {\n  if (sl.rush && (sl.ph === UNFOLD || sl.ph === CREASE)) h *= 4;\n  sl.pt += h;\n  const ph = sl.ph;\n  if (ph === WAIT && sl.pt >= 0) newSheet(sl, true);\n  else if (ph === IN && sl.pt >= 1.2) Object.assign(sl, { ph: REST, pt: 0, old: null });\n  else if (ph === REST && sl.pt >= 1) Object.assign(sl, { ph: FOLD, k: 1, u: 0 });\n  else if (ph === FOLD) {\n    sl.u = min(1, sl.u + h / DUR[sl.k - 1]);\n    if (sl.u >= 1) Object.assign(sl, { kmax: max(sl.kmax, sl.k), ph: HOLD, pt: 0 });\n  } else if (ph === HOLD && sl.pt >= 0.25) {\n    if (sl.k \u003c M.n) Object.assign(sl, { k: sl.k + 1, u: 0, ph: FOLD });\n    else Object.assign(sl, { ph: SIT, pt: 0 });\n  } else if (ph === SIT && sl.pt >= 3) sl.ph = UNFOLD;\n  else if (ph === UNFOLD && (sl.u -= h / 0.45) \u003c= 0) {\n    if (sl.k > 1) (sl.k--), (sl.u += 1);\n    else Object.assign(sl, { k: 0, u: 1, ph: CREASE, pt: 0 });\n  } else if (ph === CREASE && (sl.pt >= 2.5 || sl.rush)) newSheet(sl, false);\n}\n\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.base = floor(cl(k[0], 0, 1) * (PAPERS.length - 0.01));\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.lamp = cl(k[3], -1, 1);\n  const n = cl(round(k[2]), 1, 3);\n  if (n !== S.n) {\n    S.n = n;\n    while (S.slots.length \u003c n) S.slots.push(slot(S.slots.length));\n    S.slots.length = n;\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sl of S.slots) {\n      if (sl.ph === FOLD || sl.ph === HOLD || sl.ph === SIT) {\n        if (sl.ph !== FOLD) sl.u = 1;\n        sl.kmax = max(sl.kmax, sl.k);\n        sl.ph = UNFOLD;\n      } else if (sl.ph !== WAIT) {\n        if (sl.ph === UNFOLD || sl.ph === CREASE) sl.rush = true;\n        else newSheet(sl, false);\n      }\n    }\n  for (const sl of S.slots) stepSlot(sl, dt * S.rate, S.M);\n}\n\n// The lamp: a bulb LH above the table at (lx, LY0). Each LED keeps the unit\n// vector to it, the half vector's height for the shine on foil, and how much\n// light reaches it. The table is dark walnut, kept below 24 of 255; on it lie\n// the pack of paper, the next sheet on top, and a bone folder.\nconst LH = 80;\nconst LY0 = 34;\nconst PC = cos(-0.2);\nconst PS = sin(-0.2);\nfunction lampField(S, next) {\n  const lx = 31.5 + 44 * S.lamp;\n  const { LX, LY, LZ, LI, HZ, bg, grain } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = lx - x - 0.5;\n      const dy = LY0 - y - 0.5;\n      const r2 = dx * dx + dy * dy;\n      const l = sqrt(r2 + LH * LH);\n      LX[p] = dx / l;\n      LY[p] = dy / l;\n      LZ[p] = LH / l;\n      LI[p] = (LH * LH) / (LH * LH + 0.4 * r2);\n      HZ[p] = (LZ[p] + 1) / sqrt(LX[p] * LX[p] + LY[p] * LY[p] + (LZ[p] + 1) * (LZ[p] + 1));\n      const lit = LI[p] * (0.22 + 0.9 * LZ[p]);\n      const w = min(21, 255 * 0.085 * (0.25 + 0.75 * LI[p]) * grain[p]);\n      let c = [w, w * 0.56, w * 0.32];\n      // The pack: four sheets a little askew, each showing an edge of its colour.\n      for (let j = 0; j \u003c 4; j++) {\n        const X = x + 0.5 + 1 - 0.9 * j;\n        const Y = y + 0.5 - 1 - 1.3 * j;\n        const u = (X * PC + Y * PS) / 13;\n        const v = (Y * PC - X * PS) / 13;\n        if (abs(u) \u003c 1 && abs(v) \u003c 1) {\n          const P = PAPERS[(next + j) % PAPERS.length];\n          const col = P[2] !== 2 && print(P[2], u, v) ? P[1] : P[0];\n          const e = (abs(u) > 0.92 || abs(v) > 0.92 ? 0.7 : 1) * (j ? 0.8 : 1) * (P[2] === 2 ? 0.75 : 1);\n          c = col.map((v) => 255 * v * lit * e);\n          break;\n        }\n      }\n      // The bone folder, rounded at both ends, its back catching the lamp.\n      const ax = x + 0.5 - 47;\n      const ay = y + 0.5 - 118;\n      const t = cl((ax * 14 - ay * 15) / 421, 0, 1);\n      const d = hypot(ax - 14 * t, ay + 15 * t);\n      if (d \u003c 1.7) c = [0.8, 0.74, 0.62].map((v) => 255 * v * lit * (0.75 + 0.35 * (1 - d / 1.7)));\n      bg[p * 3] = c[0];\n      bg[p * 3 + 1] = c[1];\n      bg[p * 3 + 2] = c[2];\n    }\n  S.lp = [lx, LY0, LH];\n}\n\n// Per frame: every facet on the table, as drawn.\n// RA maps it from the crease pattern to the panel, RN is its lit normal, RK\n// its draw order; RS the side up, RP the paper, RQ the sheet; RG and RX its\n// group now and at the deepest fold, RU and RL its side and layer there.\nconst MAXR = 1600;\nconst [RA, RN, RK, RL, RM] = [6, 3, 1, 1, 1].map((k) => F32(MAXR * k));\nconst [RS, RU] = [new Int8Array(MAXR), new Int8Array(MAXR)];\nconst [RP, RQ, RG, RX] = [0, 0, 0, 0].map(() => new Int32Array(MAXR));\nconst ORD = [];\nconst RCP = [];\nconst ID = new Int16Array(N);\nconst SHK = F32(N);\nconst VX = F32(64);\nconst VY = F32(64);\nlet nr = 0;\n\n// Fill a convex polygon with v; mode 0 writes facet ids, mode 1 raises the\n// shadow key.\nfunction fill(cnt, v, mode) {\n  let ya = 1e9;\n  let yb = -1e9;\n  for (let i = 0; i \u003c cnt; i++) (ya = min(ya, VY[i])), (yb = max(yb, VY[i]));\n  const y0 = max(0, ceil(ya - 0.5));\n  const y1 = min(H - 1, floor(yb - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 1e9;\n    let xr = -1e9;\n    for (let i = 0; i \u003c cnt; i++) {\n      const j = i + 1 \u003c cnt ? i + 1 : 0;\n      const ay = VY[i];\n      const by = VY[j];\n      if ((ay \u003c= py && by > py) || (by \u003c= py && ay > py)) {\n        const x = VX[i] + ((py - ay) / (by - ay)) * (VX[j] - VX[i]);\n        (xl = min(xl, x)), (xr = max(xr, x));\n      }\n    }\n    const x0 = max(0, ceil(xl - 0.5));\n    const x1 = min(W - 1, floor(xr - 0.5));\n    const row = y * W;\n    if (mode === 0) for (let x = x0; x \u003c= x1; x++) ID[row + x] = v;\n    else for (let x = x0; x \u003c= x1; x++) if (SHK[row + x] \u003c v) SHK[row + x] = v;\n  }\n}\n\n// The camera for state j of a sheet in its slot: turned PHI[j], scaled to fit.\nfunction viewOf(M, j, fw, fh, zmax) {\n  const b = M.box[j];\n  return [PHI[j], log(min(fw / b[2], fh / b[3], zmax)), b[0], b[1]];\n}\n\n// Put one sheet on the table: model M at step k, progress u, in slot\n// region (cy, fw, fh), paper index pi. dx and dphi slide a new sheet in.\nfunction placeSheet(S, M, k, u, flap, kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, keyBase, mem, qid) {\n  const n1 = M.n + 1;\n  const go = k > 0 && u > 0 && u \u003c 1;\n  const jb = k === 0 ? 0 : u >= 1 ? k : k - 1;\n  const a = viewOf(M, k > 0 ? k - 1 : 0, fw, fh, zmax);\n  const b = viewOf(M, k, fw, fh, zmax);\n  const w = k > 0 ? ease(u) : 1;\n  const phi = mix(a[0], b[0], w) + dphi;\n  const z = exp(mix(a[1], b[1], w));\n  const ccx = mix(a[2], b[2], w);\n  const ccy = mix(a[3], b[3], w);\n  const c = cos(phi) * z;\n  const s = sin(phi) * z;\n  const V = [c, -s, s, c, 31.5 + dx - (c * ccx - s * ccy), cyp + dy - (s * ccx + c * ccy)];\n  const [lx, ly, lh] = S.lp;\n  M.F.forEach((f, i) => {\n    if (nr >= MAXR) return;\n    const r = nr++;\n    // The hinge this facet turns on now, if any: the fold under way, or the\n    // finished crane's wing beat.\n    let hg = null;\n    let th = 0;\n    if (go && f.H[k]) (hg = f.H[k]), (th = PI * ease(u));\n    else if (flap > 0 && (f.sec === 0 || f.sec === 3)) (hg = FLAPH), (th = flap);\n    const A0 = f.T[jb];\n    const ct = cos(th);\n    const st = sin(th);\n    const A = mul(V, hg ? mul(hingeM(hg, ct - 1), A0) : A0);\n    RA.set(A, r * 6);\n    RCP[r] = f.cp;\n    let side = M.det[i * n1 + jb];\n    let nx = 0;\n    let ny = 0;\n    let nz = 1;\n    let key = f.L[jb];\n    if (hg) {\n      const m = hg[4];\n      // The hinge normal as it lies on the panel.\n      const hx = hg[2] * cos(phi) - hg[3] * sin(phi);\n      const hy = hg[2] * sin(phi) + hg[3] * cos(phi);\n      nx = -m * st * hx;\n      ny = -m * st * hy;\n      nz = ct;\n      if (ct \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz), (side = -side);\n      key = (m > 0 ? 1e6 : -1e6) + (ct >= 0 ? f.L[jb] : go ? f.L[k] : -f.L[jb]);\n      // A lifted flap throws its shadow away from the lamp.\n      if (m > 0 && st > 0.02) {\n        const cp = f.cp;\n        const cnt = cp.length / 2;\n        for (let j = 0; j \u003c cnt; j++) {\n          const hz = (((tx(A0, cp, 2 * j) - hg[0]) * hg[2] + (ty(A0, cp, 2 * j) - hg[1]) * hg[3]) * st * z) / lh;\n          const px = tx(A, cp, 2 * j);\n          const py = ty(A, cp, 2 * j);\n          VX[j] = px + hz * (px - lx);\n          VY[j] = py + hz * (py - ly);\n        }\n        fill(cnt, keyBase + key, 1);\n      }\n    }\n    // Paper never lies quite flat: each layer tips a little its own way, and a\n    // sheet opened out again keeps a tilt in every facet between its creases.\n    const g = M.gid[i * n1 + jb];\n    nx += 0.06 * M.tilt[2 * g] + 0.12 * mem * M.tilt[2 * i + 1];\n    ny += 0.06 * M.tilt[2 * g + 1] + 0.12 * mem * M.tilt[2 * i];\n    const nl = hypot(nx, ny, nz);\n    RN[r * 3] = nx / nl;\n    RN[r * 3 + 1] = ny / nl;\n    RN[r * 3 + 2] = nz / nl;\n    RS[r] = side;\n    RK[r] = keyBase + key;\n    RP[r] = pi;\n    RG[r] = g;\n    RX[r] = M.gid[i * n1 + kmax];\n    RU[r] = M.det[i * n1 + kmax];\n    RL[r] = f.L[kmax];\n    RQ[r] = qid;\n    RM[r] = mem;\n    ORD.push(r);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const next = (S.base + S.slots[0].seq + 1) % PAPERS.length;\n  const lk = S.lamp + 10 * next;\n  if (S.lampKey !== lk) (S.lampKey = lk), lampField(S, next);\n  const { M, LX, LY, LZ, LI, HZ, bg } = S;\n  nr = 0;\n  ORD.length = 0;\n  SHK.fill(-1e12);\n  const n = S.slots.length;\n  const sh = H / n;\n  const zmax = [74, 50, 34][n - 1];\n  const fw = n === 1 ? 60 : n === 2 ? 56 : 46;\n  const fh = sh - (n === 1 ? 12 : 8);\n  let q = 0;\n  for (const sl of S.slots) {\n    if (sl.ph === WAIT) continue;\n    const cyp = sl.i * sh + sh / 2;\n    const pi = (S.base + 3 * sl.i + sl.seq) % PAPERS.length;\n    if (sl.old) placeSheet(S, M, 0, 1, 0, sl.old.kmax, (S.base + 3 * sl.i + sl.old.seq) % PAPERS.length, cyp, fw, fh, zmax, 0, 0, 0, -1e8, 1, q++);\n    let dx = 0;\n    let dy = 0;\n    let dphi = 0;\n    if (sl.ph === IN) {\n      // Slid off the pack in the corner.\n      const e = 1 - ease(sl.pt / 1.2);\n      dx = -62 * e;\n      dy = (8 - cyp) * e;\n      dphi = -0.2 * e;\n    }\n    let flap = 0;\n    if (sl.ph === SIT) {\n      // The crane beats its wing once.\n      const t = (sl.pt - 0.6) / 1.6;\n      if (t > 0 && t \u003c 1) flap = 0.78 * PI * sin(PI * t) ** 2;\n    }\n    const mem = sl.ph === UNFOLD || sl.ph === CREASE ? 1 : 0;\n    placeSheet(S, M, sl.k, sl.u, flap, sl.kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, 0, mem, q++);\n  }\n  ORD.sort((a, b) => RK[a] - RK[b]);\n  ID.fill(-1);\n  for (const r of ORD) {\n    const cp = RCP[r];\n    const A = RA.subarray(r * 6, r * 6 + 6);\n    for (let j = 0; j \u003c cp.length; j += 2) (VX[j / 2] = tx(A, cp, j)), (VY[j / 2] = ty(A, cp, j));\n    fill(cp.length / 2, r, 0);\n  }\n  const lx = S.lp[0];\n  const sx = lx \u003c 31.5 ? -1 : 1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const r = ID[p];\n      if (r \u003c 0) {\n        const f = SHK[p] > -1e11 ? 0.55 : 1;\n        display.setPixel(x, y, bg[p * 3] * f, bg[p * 3 + 1] * f, bg[p * 3 + 2] * f);\n      } else {\n        // The print, found back in the crease pattern: paper square s, t in -1..1.\n        const o = r * 6;\n        const [a, b, c, d] = [RA[o], RA[o + 1], RA[o + 2], RA[o + 3]];\n        const det = a * d - b * c;\n        const P = PAPERS[RP[r]];\n        let col = P[0];\n        let kind = P[2];\n        if (RS[r] \u003c 0) (col = WHITE), (kind = -1);\n        else if (P[1] && abs(det) > 1e-3) {\n          const X = x + 0.5 - RA[o + 4];\n          const Y = y + 0.5 - RA[o + 5];\n          const cu = (d * X - b * Y) / det;\n          const cv = (a * Y - c * X) / det;\n          if (print(kind, cu + cv, cv - cu)) col = P[1];\n        }\n        const nz = RN[r * 3 + 2];\n        const I = LI[p];\n        const hz = max(0, nz * HZ[p]);\n        // Kami is matte with a little sheen; foil is darker but throws the lamp back.\n        const fo = kind === 2;\n        const lit = I * (0.22 + 0.9 * max(0, RN[r * 3] * LX[p] + RN[r * 3 + 1] * LY[p] + nz * LZ[p])) * (fo ? 0.8 : 1);\n        const sp = I * (fo ? 0.25 + 0.9 * hz ** 12 : 0.06 * hz ** 8);\n        // Shade under a lifted flap, and along the edge of a layer above.\n        const k = RK[r];\n        let f = SHK[p] > k ? 0.55 : 1;\n        const s = x - sx >= 0 && x - sx \u003c W && y > 0 ? ID[p - W - sx] : -1;\n        if (s >= 0 && RQ[s] === RQ[r] && RK[s] > k + 0.5 && RG[s] !== RG[r]) f *= 0.66;\n        // Creases left from the folding.\n        if (RM[r] > 0) {\n          for (const s of [x + 1 \u003c W ? ID[p + 1] : -1, y + 1 \u003c H ? ID[p + W] : -1])\n            if (s >= 0 && s !== r && RQ[s] === RQ[r] && RG[s] === RG[r] && RX[s] !== RX[r]) {\n              const up = RL[s] > RL[r] ? s : r;\n              f *= RU[up] * RS[r] > 0 ? 1.22 : 0.72;\n              break;\n            }\n        }\n        const m = 255 * f * (fo ? lit + sp : lit);\n        const e = fo ? 0 : 255 * f * sp;\n        display.setPixel(x, y, min(255, col[0] * m + e), min(255, col[1] * m + e), min(255, col[2] * m + e));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower."},{"name":"Sheets","min":1,"max":3,"about":"How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3."},{"name":"Lamp","min":-1,"max":1,"about":"Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way."}],"start":[0,2,1,0.06],"measures":{"motion":0.2431,"detail":0.0239,"edges":0.722,"complexity":0.6298,"coverage":0.2643,"colour":0.177,"drift":0.2549},"knobResponse":[0.2136,0.2519,0.2517,0.0599]},{"slug":"outer-billiards","title":"Outer Billiards","family":"geometry","round":30,"note":"정오각형 밖의 평면을 점마다 꼭짓점 대칭 뛰기 몇 번 만에 제자리로 오는지로 칠했어요. 십각형과 오각형 목걸이가 둘레를 감고, 흰 점 하나가 제 궤도를 뛰어요.","idea":"A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.","buttons":"K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.","code":"// ===== Patternflow pattern =====\n// Title:   Outer Billiards\n// Family:  geometry\n// Idea:    A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: outer billiards (Bernhard Neumann, 1959) and Sergei Tabachnikov's regular pentagon (1995), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green.\n// Knob 2: Speed. At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes.\n// Knob 3: Sides. The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second.\n// Knob 4: Zoom. How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1.\n// Buttons: K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, atan2, log, exp, PI, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst TAU = 2 * PI;\n\n// The map has the polygon's symmetry, turns by 2pi/n and mirrors in its\n// axes (a mirror turns the map into its inverse, which has the same periods),\n// so one wedge of angle pi/n holds it all. The wedge is gridded log-polar:\n// radius RA to RMAX in CR cells per e-fold, angle in steps of 1/CR.\nconst RA = 0.7, RMAX = 33, CR = 110, NI = ceil(CR * log(RMAX / RA));\nconst MAXIT = 4000, INSIDE = 65535, BUDGET = 500000;\n\n// Four sample points in each LED: radius in LEDs, CR times its log, angle in turns.\nconst SR = new Float32Array(NP * 4), SL = new Float32Array(NP * 4), SA = new Float32Array(NP * 4);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++)\n    for (let s = 0; s \u003c 4; s++) {\n      const q = (y * W + x) * 4 + s, dx = x + (s & 1 ? 0.75 : 0.25) - 32, dy = 64 - y - (s & 2 ? 0.75 : 0.25);\n      SR[q] = sqrt(dx * dx + dy * dy);\n      SL[q] = CR * log(SR[q]);\n      SA[q] = atan2(dy, dx) / TAU;\n    }\n\n// A regular n-gon on the unit circle, vertex 0 on the x axis; edge k runs\n// from vertex k to k + 1 and its outward normal is NX, NY.\nfunction makePoly(n) {\n  const G = { n, r: cos(PI / n), NJ: ceil((PI / n) * CR), next: 0, VX: [], VY: [], NX: [], NY: [] };\n  for (let k = 0; k \u003c n; k++) {\n    G.VX.push(cos((TAU * k) / n));\n    G.VY.push(sin((TAU * k) / n));\n    G.NX.push(cos((TAU * (k + 0.5)) / n));\n    G.NY.push(sin((TAU * (k + 0.5)) / n));\n  }\n  G.M = new Uint16Array(NI * G.NJ);\n  return G;\n}\n\n// The vertex x reflects in: the first, counterclockwise, of the run of edges\n// x can see, so the polygon lies right of the ray from x through it. -1 inside.\nfunction vtx(G, x, y) {\n  const { n, NX, NY, r } = G;\n  let prev = x * NX[n - 1] + y * NY[n - 1] > r;\n  for (let k = 0; k \u003c n; k++) {\n    const vis = x * NX[k] + y * NY[k] > r;\n    if (vis && !prev) return k;\n    prev = vis;\n  }\n  return -1;\n}\n\n// Two jumps make a translation, so after an even number of jumps a periodic\n// point is back exactly, up to rounding. A domain whose centre has odd period p\n// is turned half round by p jumps, and its points come back after 2p; every\n// point of a domain gets the same number that way.\nlet spent = 0;\nfunction period(G, x0, y0) {\n  let x = x0, y = y0;\n  for (let it = 1; it \u003c= MAXIT; it++) {\n    const k = vtx(G, x, y);\n    if (k \u003c 0) return (spent += it), INSIDE;\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    if (!(it & 1) && (x - x0) ** 2 + (y - y0) ** 2 \u003c 1e-14) return (spent += it), it;\n  }\n  spent += MAXIT;\n  return 0;\n}\n\n// Fill the wedge outward from the polygon, BUDGET jumps a frame.\nfunction grow(G) {\n  spent = 0;\n  const total = NI * G.NJ;\n  while (G.next \u003c total && spent \u003c BUDGET) {\n    const c = G.next++, i = (c / G.NJ) | 0, a = (c - i * G.NJ + 0.5) / CR, rho = RA * exp((i + 0.5) / CR);\n    G.M[c] = period(G, rho * cos(a), rho * sin(a));\n  }\n}\n\n// The domain of a periodic point: the points that see the same vertices for p\n// jumps. After j jumps a point X is at s X + c; each jump adds two half\n// planes, and a square clipped by them all is the domain. Its centroid.\nfunction domain(G, x0, y0, p) {\n  let poly = [[x0 - 30, y0 - 30], [x0 + 30, y0 - 30], [x0 + 30, y0 + 30], [x0 - 30, y0 + 30]];\n  const clip = (ax, ay, b) => {\n    const out = [];\n    for (let i = 0; i \u003c poly.length; i++) {\n      const A = poly[i], B = poly[(i + 1) % poly.length], d1 = ax * A[0] + ay * A[1] - b, d2 = ax * B[0] + ay * B[1] - b;\n      if (d1 \u003c= 0) out.push(A);\n      if (d1 \u003c 0 !== d2 \u003c 0) out.push([A[0] + (d1 / (d1 - d2)) * (B[0] - A[0]), A[1] + (d1 / (d1 - d2)) * (B[1] - A[1])]);\n    }\n    poly = out;\n  };\n  let s = 1, cx = 0, cy = 0, x = x0, y = y0;\n  for (let j = 0; j \u003c p && poly.length; j++) {\n    const k = vtx(G, x, y), m = (k + G.n - 1) % G.n;\n    clip(-s * G.NX[k], -s * G.NY[k], G.NX[k] * cx + G.NY[k] * cy - G.r);\n    clip(s * G.NX[m], s * G.NY[m], G.r - G.NX[m] * cx - G.NY[m] * cy);\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    cx = 2 * G.VX[k] - cx;\n    cy = 2 * G.VY[k] - cy;\n    s = -s;\n  }\n  let A = 0, X = 0, Y = 0;\n  for (let i = 0; i \u003c poly.length; i++) {\n    const [x1, y1] = poly[i], [x2, y2] = poly[(i + 1) % poly.length], c = x1 * y2 - x2 * y1;\n    A += c;\n    X += (x1 + x2) * c;\n    Y += (y1 + y2) * c;\n  }\n  return A > 1e-9 ? [X / (3 * A), Y / (3 * A), A / 2] : [x0, y0, 0];\n}\n\nconst POLYS = {};\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 5, zoom: 5.2, rot: PI / 2, t: 0,\n    orb: null, k: 0, ph: 0, hops: 0, seen: [], marks: [],\n    lut: new Float32Array((MAXIT + 1) * 3), lutKey: \"\",\n    buf: new Float32Array(NP * 3),\n  };\n}\n\n// A seed: of forty random cells of the wedge, the one whose domain is biggest\n// on the panel, give or take, and not one of the last two periods, moved to its\n// domain's centroid. The orbit is kept as a list, so it closes exactly however\n// long it runs, and must stay within 44 LEDs of the centre: the 128 rows hold\n// all of it and the 64 columns most.\nfunction pick(P, G) {\n  const Z = P.zoom, lo = 1.1, hi = 40 / Z;\n  let best = 0;\n  for (let t = 0; t \u003c 40; t++) {\n    const i = floor(CR * log((lo + (hi - lo) * random()) / RA)), j = floor((random() * PI * CR) / G.n), c = i * G.NJ + j;\n    if (c >= G.next) continue;\n    const p = G.M[c], rho = RA * exp((i + 0.5) / CR), a = (j + 0.5) / CR;\n    if (!p || p === INSIDE || p > 12 * G.n) continue;\n    const [cx, cy, area] = domain(G, rho * cos(a), rho * sin(a), p);\n    const score = sqrt(min(area * Z * Z, 300)) * (0.5 + random()) * (P.seen.includes(p) ? 0.25 : 1);\n    if (area * Z * Z \u003c 8 || score \u003c= best) continue;\n    const ox = [cx], oy = [cy];\n    let far = 0;\n    for (let h = 0; h \u003c p; h++) {\n      const k = vtx(G, ox[h], oy[h]);\n      if (k \u003c 0) break;\n      ox.push(2 * G.VX[k] - ox[h]);\n      oy.push(2 * G.VY[k] - oy[h]);\n      far = max(far, sqrt(ox[h] ** 2 + oy[h] ** 2));\n    }\n    if (ox.length \u003c= p || far * Z > 44) continue;\n    best = score;\n    P.orb = { ox, oy, p, far };\n  }\n  if (best) {\n    P.seen = [P.orb.p, P.seen[0]];\n    P.k = P.ph = P.hops = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const n = cl(round(kv[2]), 5, 12);\n  P.zoom = 5.2 * 2 ** (1.2 * cl(kv[3], -1, 1));\n  if (n !== P.n || !P.G) {\n    P.n = n;\n    P.G = POLYS[n] || (POLYS[n] = makePoly(n));\n    P.orb = null;\n  }\n  const G = P.G;\n  grow(G);\n  P.t += d;\n  P.rot += d * P.speed * 0.045;\n  // K1, or a zoom that has pushed the orbit off the panel: a new orbit.\n  if ((input.btnPressed && input.btnPressed[0]) || (P.orb && P.orb.far * P.zoom > 52)) P.orb = null;\n  if (!P.orb) {\n    if (G.next > CR * log(30 / P.zoom / RA) * G.NJ) pick(P, G);\n  } else {\n    P.ph += d * P.speed * 1.2;\n    while (P.ph >= 1) {\n      P.ph -= 1;\n      const o = P.orb;\n      P.k = (P.k + 1) % o.p;\n      P.marks.push([o.ox[P.k], o.oy[P.k], P.t, cl(o.p / (P.speed * 1.2), 4, 12)]);\n      if (P.marks.length > 120) P.marks.shift();\n      if (++P.hops >= max(o.p, 2 * o.p * (o.p \u003c 16))) P.orb = null;\n    }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The colour of a period.\nfunction makeLut(P) {\n  const L = P.lut;\n  for (let p = 1; p \u003c= MAXIT; p++) {\n    const v = cl(1.1 - 0.12 * log(p / (2 * P.n)) / log(2), 0.5, 1);\n    hsv(P.hue + 0.55 + 0.618034 * p, 0.85, v * 255, L, p * 3);\n  }\n  P.lutKey = P.hue + \",\" + P.n;\n}\n\n// Additive splat with bilinear weights, in LEDs.\nfunction splat(buf, x, y, a, r, g, b) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const X = x0 + i, Y = y0 + j;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const w = a * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), q = (Y * W + X) * 3;\n      buf[q] += w * r;\n      buf[q + 1] += w * g;\n      buf[q + 2] += w * b;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.G) return;\n  const G = P.G, { n, M, NJ, r } = G, Z = P.zoom, buf = P.buf, L = P.lut;\n  if (P.lutKey !== P.hue + \",\" + n) makeLut(P);\n  const off = CR * (log(Z) + log(RA)), turn = (P.rot / TAU) * n, K = (TAU / n) * CR, pin = PI / n;\n  const w = 0.55 / Z;\n  for (let p = 0; p \u003c NP; p++) {\n    let R = 0, Gc = 0, B = 0, first = -1, mixed = 0, tab = 0, rim = 0;\n    for (let s = 0; s \u003c 4; s++) {\n      const q = p * 4 + s, rho = SR[q] / Z;\n      let a = SA[q] * n - turn;\n      a -= floor(a);\n      if (a > 0.5) a = 1 - a;\n      let per = 0;\n      // In the polygon, or on its rim.\n      if (rho \u003c 1 + w) {\n        const dd = rho * cos(pin - (a * TAU) / n) - r;\n        if (dd \u003c w) {\n          dd > -w ? rim++ : tab++;\n          continue;\n        }\n      }\n      const i = floor(SL[q] - off), c = i * NJ + floor(a * K);\n      if (i >= 0 && i \u003c NI && c \u003c G.next) per = M[c];\n      if (per === INSIDE) per = 0;\n      if (first \u003c 0) first = per;\n      else if (per !== first) mixed = 1;\n      if (per) (R += L[per * 3]), (Gc += L[per * 3 + 1]), (B += L[per * 3 + 2]);\n    }\n    // Where the period changes inside a LED, a dark seam.\n    const f = mixed || (tab && R + Gc + B) ? 0.15 : 0.25;\n    buf[p * 3] = R * f + rim * 64 + tab * 9;\n    buf[p * 3 + 1] = Gc * f + rim * 63 + tab * 9;\n    buf[p * 3 + 2] = B * f + rim * 61 + tab * 12;\n  }\n  // The orbit: the points it has landed on, each fading over the time one\n  // round takes (4 to 12 seconds), and the jump under way, a streak from the\n  // point through the vertex to its image.\n  const ca = cos(P.rot), sa = sin(P.rot);\n  const sx = (x, y) => 32 + Z * (x * ca - y * sa), sy = (x, y) => 64 - Z * (x * sa + y * ca);\n  for (const [x, y, t, life] of P.marks) {\n    const a = 1 - (P.t - t) / life;\n    if (a > 0) splat(buf, sx(x, y), sy(x, y), a * 255, 1, 1, 1);\n  }\n  const o = P.orb;\n  if (o) {\n    const k = P.k, k1 = (k + 1) % o.p, x0 = o.ox[k], y0 = o.oy[k], x1 = o.ox[k1], y1 = o.oy[k1];\n    const u = cl(P.ph / 0.4, 0, 1), e = u * u * (3 - 2 * u), fade = P.ph \u003c 0.4 ? 1 : 1 - (P.ph - 0.4) / 0.6;\n    const ax = sx(x0, y0), ay = sy(x0, y0), bx = sx(x1, y1), by = sy(x1, y1);\n    const len = sqrt((bx - ax) ** 2 + (by - ay) ** 2), steps = ceil((len * e) / 0.4);\n    for (let j = 0; j \u003c= steps; j++) {\n      const v = steps ? (j / steps) * e : 0;\n      splat(buf, ax + (bx - ax) * v, ay + (by - ay) * v, 170 * fade * (0.3 + 0.7 * (v / (e || 1))), 1, 0.97, 0.9);\n    }\n    const hx = ax + (bx - ax) * e, hy = ay + (by - ay) * e;\n    splat(buf, hx, hy, 400, 1, 1, 1);\n    const vx = (ax + bx) / 2, vy = (ay + by) / 2, fl = exp(-(((e - 0.5) * 5) ** 2)) * fade;\n    splat(buf, vx, vy, 500 * fl, 1, 1, 1);\n    for (let j = 0; j \u003c 8; j++) splat(buf, vx + 1.5 * cos((j * PI) / 4), vy + 1.5 * sin((j * PI) / 4), 140 * fl, 1, 1, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-outer-billiards","type":"code","name":"outer-billiards","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Outer Billiards\n// Family:  geometry\n// Idea:    A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: outer billiards (Bernhard Neumann, 1959) and Sergei Tabachnikov's regular pentagon (1995), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green.\n// Knob 2: Speed. At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes.\n// Knob 3: Sides. The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second.\n// Knob 4: Zoom. How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1.\n// Buttons: K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, atan2, log, exp, PI, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst TAU = 2 * PI;\n\n// The map has the polygon's symmetry, turns by 2pi/n and mirrors in its\n// axes (a mirror turns the map into its inverse, which has the same periods),\n// so one wedge of angle pi/n holds it all. The wedge is gridded log-polar:\n// radius RA to RMAX in CR cells per e-fold, angle in steps of 1/CR.\nconst RA = 0.7, RMAX = 33, CR = 110, NI = ceil(CR * log(RMAX / RA));\nconst MAXIT = 4000, INSIDE = 65535, BUDGET = 500000;\n\n// Four sample points in each LED: radius in LEDs, CR times its log, angle in turns.\nconst SR = new Float32Array(NP * 4), SL = new Float32Array(NP * 4), SA = new Float32Array(NP * 4);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++)\n    for (let s = 0; s \u003c 4; s++) {\n      const q = (y * W + x) * 4 + s, dx = x + (s & 1 ? 0.75 : 0.25) - 32, dy = 64 - y - (s & 2 ? 0.75 : 0.25);\n      SR[q] = sqrt(dx * dx + dy * dy);\n      SL[q] = CR * log(SR[q]);\n      SA[q] = atan2(dy, dx) / TAU;\n    }\n\n// A regular n-gon on the unit circle, vertex 0 on the x axis; edge k runs\n// from vertex k to k + 1 and its outward normal is NX, NY.\nfunction makePoly(n) {\n  const G = { n, r: cos(PI / n), NJ: ceil((PI / n) * CR), next: 0, VX: [], VY: [], NX: [], NY: [] };\n  for (let k = 0; k \u003c n; k++) {\n    G.VX.push(cos((TAU * k) / n));\n    G.VY.push(sin((TAU * k) / n));\n    G.NX.push(cos((TAU * (k + 0.5)) / n));\n    G.NY.push(sin((TAU * (k + 0.5)) / n));\n  }\n  G.M = new Uint16Array(NI * G.NJ);\n  return G;\n}\n\n// The vertex x reflects in: the first, counterclockwise, of the run of edges\n// x can see, so the polygon lies right of the ray from x through it. -1 inside.\nfunction vtx(G, x, y) {\n  const { n, NX, NY, r } = G;\n  let prev = x * NX[n - 1] + y * NY[n - 1] > r;\n  for (let k = 0; k \u003c n; k++) {\n    const vis = x * NX[k] + y * NY[k] > r;\n    if (vis && !prev) return k;\n    prev = vis;\n  }\n  return -1;\n}\n\n// Two jumps make a translation, so after an even number of jumps a periodic\n// point is back exactly, up to rounding. A domain whose centre has odd period p\n// is turned half round by p jumps, and its points come back after 2p; every\n// point of a domain gets the same number that way.\nlet spent = 0;\nfunction period(G, x0, y0) {\n  let x = x0, y = y0;\n  for (let it = 1; it \u003c= MAXIT; it++) {\n    const k = vtx(G, x, y);\n    if (k \u003c 0) return (spent += it), INSIDE;\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    if (!(it & 1) && (x - x0) ** 2 + (y - y0) ** 2 \u003c 1e-14) return (spent += it), it;\n  }\n  spent += MAXIT;\n  return 0;\n}\n\n// Fill the wedge outward from the polygon, BUDGET jumps a frame.\nfunction grow(G) {\n  spent = 0;\n  const total = NI * G.NJ;\n  while (G.next \u003c total && spent \u003c BUDGET) {\n    const c = G.next++, i = (c / G.NJ) | 0, a = (c - i * G.NJ + 0.5) / CR, rho = RA * exp((i + 0.5) / CR);\n    G.M[c] = period(G, rho * cos(a), rho * sin(a));\n  }\n}\n\n// The domain of a periodic point: the points that see the same vertices for p\n// jumps. After j jumps a point X is at s X + c; each jump adds two half\n// planes, and a square clipped by them all is the domain. Its centroid.\nfunction domain(G, x0, y0, p) {\n  let poly = [[x0 - 30, y0 - 30], [x0 + 30, y0 - 30], [x0 + 30, y0 + 30], [x0 - 30, y0 + 30]];\n  const clip = (ax, ay, b) => {\n    const out = [];\n    for (let i = 0; i \u003c poly.length; i++) {\n      const A = poly[i], B = poly[(i + 1) % poly.length], d1 = ax * A[0] + ay * A[1] - b, d2 = ax * B[0] + ay * B[1] - b;\n      if (d1 \u003c= 0) out.push(A);\n      if (d1 \u003c 0 !== d2 \u003c 0) out.push([A[0] + (d1 / (d1 - d2)) * (B[0] - A[0]), A[1] + (d1 / (d1 - d2)) * (B[1] - A[1])]);\n    }\n    poly = out;\n  };\n  let s = 1, cx = 0, cy = 0, x = x0, y = y0;\n  for (let j = 0; j \u003c p && poly.length; j++) {\n    const k = vtx(G, x, y), m = (k + G.n - 1) % G.n;\n    clip(-s * G.NX[k], -s * G.NY[k], G.NX[k] * cx + G.NY[k] * cy - G.r);\n    clip(s * G.NX[m], s * G.NY[m], G.r - G.NX[m] * cx - G.NY[m] * cy);\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    cx = 2 * G.VX[k] - cx;\n    cy = 2 * G.VY[k] - cy;\n    s = -s;\n  }\n  let A = 0, X = 0, Y = 0;\n  for (let i = 0; i \u003c poly.length; i++) {\n    const [x1, y1] = poly[i], [x2, y2] = poly[(i + 1) % poly.length], c = x1 * y2 - x2 * y1;\n    A += c;\n    X += (x1 + x2) * c;\n    Y += (y1 + y2) * c;\n  }\n  return A > 1e-9 ? [X / (3 * A), Y / (3 * A), A / 2] : [x0, y0, 0];\n}\n\nconst POLYS = {};\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 5, zoom: 5.2, rot: PI / 2, t: 0,\n    orb: null, k: 0, ph: 0, hops: 0, seen: [], marks: [],\n    lut: new Float32Array((MAXIT + 1) * 3), lutKey: \"\",\n    buf: new Float32Array(NP * 3),\n  };\n}\n\n// A seed: of forty random cells of the wedge, the one whose domain is biggest\n// on the panel, give or take, and not one of the last two periods, moved to its\n// domain's centroid. The orbit is kept as a list, so it closes exactly however\n// long it runs, and must stay within 44 LEDs of the centre: the 128 rows hold\n// all of it and the 64 columns most.\nfunction pick(P, G) {\n  const Z = P.zoom, lo = 1.1, hi = 40 / Z;\n  let best = 0;\n  for (let t = 0; t \u003c 40; t++) {\n    const i = floor(CR * log((lo + (hi - lo) * random()) / RA)), j = floor((random() * PI * CR) / G.n), c = i * G.NJ + j;\n    if (c >= G.next) continue;\n    const p = G.M[c], rho = RA * exp((i + 0.5) / CR), a = (j + 0.5) / CR;\n    if (!p || p === INSIDE || p > 12 * G.n) continue;\n    const [cx, cy, area] = domain(G, rho * cos(a), rho * sin(a), p);\n    const score = sqrt(min(area * Z * Z, 300)) * (0.5 + random()) * (P.seen.includes(p) ? 0.25 : 1);\n    if (area * Z * Z \u003c 8 || score \u003c= best) continue;\n    const ox = [cx], oy = [cy];\n    let far = 0;\n    for (let h = 0; h \u003c p; h++) {\n      const k = vtx(G, ox[h], oy[h]);\n      if (k \u003c 0) break;\n      ox.push(2 * G.VX[k] - ox[h]);\n      oy.push(2 * G.VY[k] - oy[h]);\n      far = max(far, sqrt(ox[h] ** 2 + oy[h] ** 2));\n    }\n    if (ox.length \u003c= p || far * Z > 44) continue;\n    best = score;\n    P.orb = { ox, oy, p, far };\n  }\n  if (best) {\n    P.seen = [P.orb.p, P.seen[0]];\n    P.k = P.ph = P.hops = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const n = cl(round(kv[2]), 5, 12);\n  P.zoom = 5.2 * 2 ** (1.2 * cl(kv[3], -1, 1));\n  if (n !== P.n || !P.G) {\n    P.n = n;\n    P.G = POLYS[n] || (POLYS[n] = makePoly(n));\n    P.orb = null;\n  }\n  const G = P.G;\n  grow(G);\n  P.t += d;\n  P.rot += d * P.speed * 0.045;\n  // K1, or a zoom that has pushed the orbit off the panel: a new orbit.\n  if ((input.btnPressed && input.btnPressed[0]) || (P.orb && P.orb.far * P.zoom > 52)) P.orb = null;\n  if (!P.orb) {\n    if (G.next > CR * log(30 / P.zoom / RA) * G.NJ) pick(P, G);\n  } else {\n    P.ph += d * P.speed * 1.2;\n    while (P.ph >= 1) {\n      P.ph -= 1;\n      const o = P.orb;\n      P.k = (P.k + 1) % o.p;\n      P.marks.push([o.ox[P.k], o.oy[P.k], P.t, cl(o.p / (P.speed * 1.2), 4, 12)]);\n      if (P.marks.length > 120) P.marks.shift();\n      if (++P.hops >= max(o.p, 2 * o.p * (o.p \u003c 16))) P.orb = null;\n    }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The colour of a period.\nfunction makeLut(P) {\n  const L = P.lut;\n  for (let p = 1; p \u003c= MAXIT; p++) {\n    const v = cl(1.1 - 0.12 * log(p / (2 * P.n)) / log(2), 0.5, 1);\n    hsv(P.hue + 0.55 + 0.618034 * p, 0.85, v * 255, L, p * 3);\n  }\n  P.lutKey = P.hue + \",\" + P.n;\n}\n\n// Additive splat with bilinear weights, in LEDs.\nfunction splat(buf, x, y, a, r, g, b) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const X = x0 + i, Y = y0 + j;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const w = a * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), q = (Y * W + X) * 3;\n      buf[q] += w * r;\n      buf[q + 1] += w * g;\n      buf[q + 2] += w * b;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.G) return;\n  const G = P.G, { n, M, NJ, r } = G, Z = P.zoom, buf = P.buf, L = P.lut;\n  if (P.lutKey !== P.hue + \",\" + n) makeLut(P);\n  const off = CR * (log(Z) + log(RA)), turn = (P.rot / TAU) * n, K = (TAU / n) * CR, pin = PI / n;\n  const w = 0.55 / Z;\n  for (let p = 0; p \u003c NP; p++) {\n    let R = 0, Gc = 0, B = 0, first = -1, mixed = 0, tab = 0, rim = 0;\n    for (let s = 0; s \u003c 4; s++) {\n      const q = p * 4 + s, rho = SR[q] / Z;\n      let a = SA[q] * n - turn;\n      a -= floor(a);\n      if (a > 0.5) a = 1 - a;\n      let per = 0;\n      // In the polygon, or on its rim.\n      if (rho \u003c 1 + w) {\n        const dd = rho * cos(pin - (a * TAU) / n) - r;\n        if (dd \u003c w) {\n          dd > -w ? rim++ : tab++;\n          continue;\n        }\n      }\n      const i = floor(SL[q] - off), c = i * NJ + floor(a * K);\n      if (i >= 0 && i \u003c NI && c \u003c G.next) per = M[c];\n      if (per === INSIDE) per = 0;\n      if (first \u003c 0) first = per;\n      else if (per !== first) mixed = 1;\n      if (per) (R += L[per * 3]), (Gc += L[per * 3 + 1]), (B += L[per * 3 + 2]);\n    }\n    // Where the period changes inside a LED, a dark seam.\n    const f = mixed || (tab && R + Gc + B) ? 0.15 : 0.25;\n    buf[p * 3] = R * f + rim * 64 + tab * 9;\n    buf[p * 3 + 1] = Gc * f + rim * 63 + tab * 9;\n    buf[p * 3 + 2] = B * f + rim * 61 + tab * 12;\n  }\n  // The orbit: the points it has landed on, each fading over the time one\n  // round takes (4 to 12 seconds), and the jump under way, a streak from the\n  // point through the vertex to its image.\n  const ca = cos(P.rot), sa = sin(P.rot);\n  const sx = (x, y) => 32 + Z * (x * ca - y * sa), sy = (x, y) => 64 - Z * (x * sa + y * ca);\n  for (const [x, y, t, life] of P.marks) {\n    const a = 1 - (P.t - t) / life;\n    if (a > 0) splat(buf, sx(x, y), sy(x, y), a * 255, 1, 1, 1);\n  }\n  const o = P.orb;\n  if (o) {\n    const k = P.k, k1 = (k + 1) % o.p, x0 = o.ox[k], y0 = o.oy[k], x1 = o.ox[k1], y1 = o.oy[k1];\n    const u = cl(P.ph / 0.4, 0, 1), e = u * u * (3 - 2 * u), fade = P.ph \u003c 0.4 ? 1 : 1 - (P.ph - 0.4) / 0.6;\n    const ax = sx(x0, y0), ay = sy(x0, y0), bx = sx(x1, y1), by = sy(x1, y1);\n    const len = sqrt((bx - ax) ** 2 + (by - ay) ** 2), steps = ceil((len * e) / 0.4);\n    for (let j = 0; j \u003c= steps; j++) {\n      const v = steps ? (j / steps) * e : 0;\n      splat(buf, ax + (bx - ax) * v, ay + (by - ay) * v, 170 * fade * (0.3 + 0.7 * (v / (e || 1))), 1, 0.97, 0.9);\n    }\n    const hx = ax + (bx - ax) * e, hy = ay + (by - ay) * e;\n    splat(buf, hx, hy, 400, 1, 1, 1);\n    const vx = (ax + bx) / 2, vy = (ay + by) / 2, fl = exp(-(((e - 0.5) * 5) ** 2)) * fade;\n    splat(buf, vx, vy, 500 * fl, 1, 1, 1);\n    for (let j = 0; j \u003c 8; j++) splat(buf, vx + 1.5 * cos((j * PI) / 4), vy + 1.5 * sin((j * PI) / 4), 140 * fl, 1, 1, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes."},{"name":"Sides","min":5,"max":12,"about":"The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second."},{"name":"Zoom","min":-1,"max":1,"about":"How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1."}],"start":[0,2,5,0.06],"measures":{"motion":0.5156,"detail":0.1148,"edges":0.7368,"complexity":0.7773,"coverage":0.9999,"colour":0.6754,"drift":0.0832},"knobResponse":[0.5981,0.1953,0.4355,0.388]},{"slug":"pancakes","title":"Pancakes","family":"kitchen","round":21,"note":"길든 철판을 위에서 내려다봐요. 국자로 부은 반죽이 퍼지고 기포가 올라와 터지며 구멍을 남기는 동안, 뒤집개가 하나씩 뒤집어 노릇한 면을 보이고 다 익은 것을 숯색 접시에 쌓아요. K1 을 누르면 가장 많이 익은 것부터 바로 뒤집거나 접시로 옮겨요.","idea":"A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.","buttons":"K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.","code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","layer":{"id":"layer-pancakes","type":"code","name":"pancakes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Batter","min":0,"max":1,"about":"Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds."},{"name":"Pancakes","min":6,"max":12,"about":"How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them."},{"name":"Heat","min":0,"max":1,"about":"How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke."}],"start":[0,2,6,0.06],"measures":{"motion":0.2802,"detail":0.2275,"edges":0.2381,"complexity":2.2758,"coverage":0.9979,"colour":0.2408,"drift":0.1011},"knobResponse":[0.1406,0.1266,0.1876,0.1386]},{"slug":"paternoster","title":"Paternoster","family":"machine","round":19,"note":"옛 사무실 건물의 파테르노스터를 기계실에서 피트까지 잘라 보여요. 나무 칸들이 오른쪽으로 오르고 왼쪽으로 내려오며 꼭대기와 바닥의 사슬 바퀴를 넘어가고, 층마다 사람이 지나가는 칸에 올라타고 내려요.","idea":"A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","layer":{"id":"layer-paternoster","type":"code","name":"paternoster","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again."},{"name":"Floors","min":3,"max":6,"about":"Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain."},{"name":"Busy","min":0,"max":1,"about":"How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom."}],"start":[0,2,3,0.06],"measures":{"motion":0.1311,"detail":0.0811,"edges":0.4174,"complexity":0.5845,"coverage":0.8893,"colour":0.2319,"drift":0.047},"knobResponse":[0.1087,0.0733,0.147,0.0325]},{"slug":"pearl-sheen","title":"Pearl Sheen","family":"cosmetic","round":30,"note":"펄 안료를 부은 면이 새틴 결로 흘러내려요. 누운 결은 로즈이고 기운 결은 박막 간섭으로 금빛 쪽으로 넘어가며, 긴 반사띠가 면을 가로질러요.","idea":"Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.","buttons":"K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.","code":"// ===== Patternflow pattern =====\n// Title:   Pearl Sheen\n// Family:  cosmetic\n// Idea:    Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after thin-film interference in pearlescent mica pigments (titania-coated mica)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1\n//\n// Knob 1: Hue. Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta.\n// Knob 2: Speed. How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that.\n// Knob 3: Shift. The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold.\n// Knob 4: Sheen. The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour.\n// Buttons: K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, tanh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Smooth noise in a 256 x 256 tile, three octaves of 8, 16 and 32 cells,\n// built once in setup. The streaks are this tile stretched about twelve times\n// along the flow.\nconst T = 256, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = Math.random() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.45;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The interference colour of the flakes' coat against the optical path\n// difference 2 n d cos(theta), 0 to 1600 nm in 1024 steps. Each entry sums\n// the two-beam reflectance over the spectrum, 400 to 700 nm every 5 nm, under\n// three bell-shaped channel curves at 600, 545 and 455 nm. The air-to-titania\n// face turns its beam over and the titania-to-mica face does not, so the\n// reflectance is (1 - cos(2 pi path / lambda)) / 2. Only the chroma is kept,\n// the colour less its grey, scaled so the second order's strongest is about 1.\nconst LN = 1024, OPD_MAX = 1600;\nconst RAW = new Float32Array(LN * 3);\nfunction buildRaw() {\n  const chan = [[600, 45], [545, 40], [455, 32]], norm = [0, 0, 0], wts = [];\n  for (let l = 400; l \u003c= 700; l += 5) {\n    const w = chan.map(([m, s]) => exp(-(((l - m) / s) ** 2) / 2));\n    wts.push([l, w]);\n    for (let c = 0; c \u003c 3; c++) norm[c] += w[c];\n  }\n  for (let i = 0; i \u003c LN; i++) {\n    const opd = (i / (LN - 1)) * OPD_MAX, acc = [0, 0, 0];\n    for (const [l, w] of wts) {\n      const r = 0.5 - 0.5 * cos((2 * PI * opd) / l);\n      for (let c = 0; c \u003c 3; c++) acc[c] += r * w[c];\n    }\n    for (let c = 0; c \u003c 3; c++) acc[c] /= norm[c];\n    const m = (acc[0] + acc[1] + acc[2]) / 3;\n    for (let c = 0; c \u003c 3; c++) RAW[i * 3 + c] = (acc[c] - m) / 0.45;\n  }\n}\n\n// The angle of a chroma round the grey axis, red at 0.\nconst chromaAngle = (r, g, b) => atan2((sqrt(3) / 2) * (g - b), r - (g + b) / 2);\n\n// Hue turns the table round the grey axis. Warm entries get LIFT: orange and\n// yellow at half light read as brown and olive on the panel, so they are\n// lifted and their deep tones kept lighter.\nconst LUT = new Float32Array(LN * 3), LIFT = new Float32Array(LN);\nlet lutRot = NaN;\nfunction buildLut(a) {\n  const c = cos(a), s = sin(a), k = (1 - c) / 3, q = s / sqrt(3), m0 = c + k, m1 = k - q, m2 = k + q;\n  for (let i = 0, j = 0; j \u003c LN; i += 3, j++) {\n    const r = RAW[i], g = RAW[i + 1], b = RAW[i + 2];\n    LUT[i] = r * m0 + g * m1 + b * m2;\n    LUT[i + 1] = r * m2 + g * m0 + b * m1;\n    LUT[i + 2] = r * m1 + g * m2 + b * m0;\n    const y = cos(chromaAngle(LUT[i], LUT[i + 1], LUT[i + 2]) - 1);\n    LIFT[j] = y > 0 ? y * y : 0;\n  }\n}\n\n// A flat flake's light path: the second order's magenta, 980 nm. A tilted\n// flake sees the light slant through its coat, 2 n d cos(theta) is shorter,\n// and the colour moves on through orange to gold. Hue then turns the table so\n// the flat colour sits on the knob's hue and the gold on its neighbour.\nconst BASE = 980;\nlet baseAng = 0;\n\nexport function setup(params) {\n  buildTex();\n  buildRaw();\n  const bi = round((BASE / OPD_MAX) * (LN - 1)) * 3;\n  baseAng = chromaAngle(RAW[bi], RAW[bi + 1], RAW[bi + 2]);\n  lutRot = NaN;\n  params.s = {\n    t: 0, flow: 0, hue: 0, shift: 0, sheen: 0.06, stir: -1,\n    u: new Float32Array(N), h: new Float32Array(N), big: new Float32Array(N), fine: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.shift = cl(k[2], 0, 1);\n  P.sheen = cl(k[3], 0, 1);\n  P.t += d;\n  P.flow += d * cl(k[1], 0.2, 3);\n  if (P.stir >= 0) {\n    P.stir += d;\n    if (P.stir > 12) P.stir = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.stir = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const rot = 2 * PI * (P.hue + 0.97) - baseAng;\n  if (rot !== lutRot) buildLut((lutRot = rot));\n  const ub = P.u, hb = P.h, bb = P.big, fb = P.fine, t = P.t, f = P.flow;\n\n  // Across-the-flow coordinate u: the panel's x bent by two slow warps, one\n  // carried down by the pour and one drifting on its own. A streak is a line\n  // of constant u. The spatula pushes u aside above its edge.\n  const sa0 = P.stir, sy = sa0 >= 0 ? -0.3 + (4.6 * sa0) / 2.5 : 0;\n  const sAmp = sa0 \u003c 0 ? 0 : 0.32 * (sa0 \u003c 2.5 ? 1 : exp(-(sa0 - 2.5) / 1.6));\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, push = sAmp > 0 ? sAmp * 0.5 * (1 + tanh((sy - Y) / 0.22)) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const X = x / 32;\n      ub[y * W + x] = X + tap(X * 6 + 40, Y * 5 - f * 0.5 + 7) * 1.4 + tap(X * 3 + t * 0.3, Y * 3 + 90) * 0.9 - push * sin((PI * (x + 0.5)) / W);\n    }\n  }\n  // The surface: broad swells (big) and fine striations (fine), both long\n  // along u. Where the warp squeezes the striations finer than two LEDs can\n  // hold, they fade out instead of breaking into stair steps.\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, u = ub[i];\n      const dx = ub[y * W + (x \u003c W - 1 ? x + 1 : x)] - ub[y * W + (x > 0 ? x - 1 : x)], dy = ub[yd + x] - ub[yu + x];\n      const over = 27 * sqrt(dx * dx + dy * dy) - 2;\n      const big = tap(u * 22 + 130, Y * 4 - f * 0.6);\n      const fine = tap(u * 55, Y * 4 - f * 3) / (1 + (over > 0 ? over * over : 0));\n      bb[i] = big;\n      fb[i] = fine;\n      hb[i] = big + fine * 0.12;\n    }\n  }\n\n  const sh = P.shift, sp = 0.2 + 0.8 * P.sheen;\n  // How much shorter a fully tilted flake's path is, and how much the coat's\n  // thickness varies along the striations.\n  const dmax = 0.03 + 0.115 * sh, thin = 10 + 40 * sh;\n  // A long strip light seen in the surface. Its reflection sweeps across and\n  // back every 21 s with a second, dimmer strip trailing it; Sheen narrows both.\n  const sw = 0.8 - 0.65 * sp, iw = 1 / sw, amp = 0.46 + 0.3 * sp;\n  const sc = 1.2 * sin(t * 0.3), sc2 = sc + (sc > 0 ? -1.6 : 1.6), sa = 0.25 * sin(t * 0.13);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, xl = y * W + (x > 0 ? x - 1 : x), xr = y * W + (x \u003c W - 1 ? x + 1 : x);\n      const hx = (hb[xr] - hb[xl]) * 8, hy = (hb[yd + x] - hb[yu + x]) * 8;\n      const n2 = 1 / (1 + hx * hx + hy * hy);\n      // The straight-on view reflected, r = 2 (n.v) n - v, on a swatch that\n      // bulges a little, so the strip lands as one broad band.\n      const bulge = 0.8 * ((x - 32) / 32 + (y - 64) / 160);\n      const rq = -2 * n2 * (hx + sa * hy) + bulge, q = (rq - sc) * iw, q2 = (rq - sc2) * iw;\n      const glow = exp(-q * q) + 0.6 * exp(-q2 * q2);\n      // The flakes lie along the flow and tilt with the fine striations. A\n      // tilted flake sees the light at an angle, which shortens its path:\n      // flip runs from 0 for flakes within 18 degrees of flat to 1 past 45.\n      const fx = ((fb[xr] - fb[xl]) * 4 + hx * 0.4) * 2.2, fy = ((fb[yd + x] - fb[yu + x]) * 4 + hy * 0.4) * 2.2;\n      const c2 = 1 / (1 + fx * fx + fy * fy);\n      const a = cl((0.9 - c2) * 2.5, 0, 1), flip = a * a * (3 - 2 * a);\n      const j = cl(round((((BASE + thin * fb[i]) * (1 - dmax * flip)) / OPD_MAX) * (LN - 1)), 0, LN - 1), li = j * 3;\n      // The flakes catch the strip in finer lines of their own.\n      const fq = (bulge - 2 * c2 * (fx + sa * fy) - sc) * 2.2;\n      const gl = 0.75 * glow + 0.25 * exp(-fq * fq);\n      // Deep tones only in the troughs of the broad swells.\n      const B = bb[i], deep = B \u003c -0.1 ? (B > -0.35 ? (-0.1 - B) / 0.25 : 1) : 0;\n      let lum = 0.64 - 0.12 * sp + amp * gl - 0.26 * deep + (0.1 * flip * dmax) / 0.13;\n      if (lum > 0.95) lum = 0.95 + (lum - 0.95) * 0.4;\n      const sat = 0.45 + 0.12 * sp - 0.32 * gl + 0.45 * deep + 0.3 * sh * flip;\n      const yl = LIFT[j], L = (lum + 0.12 * yl + 0.2 * yl * deep) * 235, S = sat * (1 - 0.3 * yl);\n      display.setPixel(x, y, cl(L * (1 + S * LUT[li]), 0, 255), cl(L * (1 + S * LUT[li + 1]), 0, 255), cl(L * (1 + S * LUT[li + 2]), 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-pearl-sheen","type":"code","name":"pearl-sheen","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pearl Sheen\n// Family:  cosmetic\n// Idea:    Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after thin-film interference in pearlescent mica pigments (titania-coated mica)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1\n//\n// Knob 1: Hue. Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta.\n// Knob 2: Speed. How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that.\n// Knob 3: Shift. The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold.\n// Knob 4: Sheen. The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour.\n// Buttons: K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, tanh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Smooth noise in a 256 x 256 tile, three octaves of 8, 16 and 32 cells,\n// built once in setup. The streaks are this tile stretched about twelve times\n// along the flow.\nconst T = 256, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = Math.random() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.45;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The interference colour of the flakes' coat against the optical path\n// difference 2 n d cos(theta), 0 to 1600 nm in 1024 steps. Each entry sums\n// the two-beam reflectance over the spectrum, 400 to 700 nm every 5 nm, under\n// three bell-shaped channel curves at 600, 545 and 455 nm. The air-to-titania\n// face turns its beam over and the titania-to-mica face does not, so the\n// reflectance is (1 - cos(2 pi path / lambda)) / 2. Only the chroma is kept,\n// the colour less its grey, scaled so the second order's strongest is about 1.\nconst LN = 1024, OPD_MAX = 1600;\nconst RAW = new Float32Array(LN * 3);\nfunction buildRaw() {\n  const chan = [[600, 45], [545, 40], [455, 32]], norm = [0, 0, 0], wts = [];\n  for (let l = 400; l \u003c= 700; l += 5) {\n    const w = chan.map(([m, s]) => exp(-(((l - m) / s) ** 2) / 2));\n    wts.push([l, w]);\n    for (let c = 0; c \u003c 3; c++) norm[c] += w[c];\n  }\n  for (let i = 0; i \u003c LN; i++) {\n    const opd = (i / (LN - 1)) * OPD_MAX, acc = [0, 0, 0];\n    for (const [l, w] of wts) {\n      const r = 0.5 - 0.5 * cos((2 * PI * opd) / l);\n      for (let c = 0; c \u003c 3; c++) acc[c] += r * w[c];\n    }\n    for (let c = 0; c \u003c 3; c++) acc[c] /= norm[c];\n    const m = (acc[0] + acc[1] + acc[2]) / 3;\n    for (let c = 0; c \u003c 3; c++) RAW[i * 3 + c] = (acc[c] - m) / 0.45;\n  }\n}\n\n// The angle of a chroma round the grey axis, red at 0.\nconst chromaAngle = (r, g, b) => atan2((sqrt(3) / 2) * (g - b), r - (g + b) / 2);\n\n// Hue turns the table round the grey axis. Warm entries get LIFT: orange and\n// yellow at half light read as brown and olive on the panel, so they are\n// lifted and their deep tones kept lighter.\nconst LUT = new Float32Array(LN * 3), LIFT = new Float32Array(LN);\nlet lutRot = NaN;\nfunction buildLut(a) {\n  const c = cos(a), s = sin(a), k = (1 - c) / 3, q = s / sqrt(3), m0 = c + k, m1 = k - q, m2 = k + q;\n  for (let i = 0, j = 0; j \u003c LN; i += 3, j++) {\n    const r = RAW[i], g = RAW[i + 1], b = RAW[i + 2];\n    LUT[i] = r * m0 + g * m1 + b * m2;\n    LUT[i + 1] = r * m2 + g * m0 + b * m1;\n    LUT[i + 2] = r * m1 + g * m2 + b * m0;\n    const y = cos(chromaAngle(LUT[i], LUT[i + 1], LUT[i + 2]) - 1);\n    LIFT[j] = y > 0 ? y * y : 0;\n  }\n}\n\n// A flat flake's light path: the second order's magenta, 980 nm. A tilted\n// flake sees the light slant through its coat, 2 n d cos(theta) is shorter,\n// and the colour moves on through orange to gold. Hue then turns the table so\n// the flat colour sits on the knob's hue and the gold on its neighbour.\nconst BASE = 980;\nlet baseAng = 0;\n\nexport function setup(params) {\n  buildTex();\n  buildRaw();\n  const bi = round((BASE / OPD_MAX) * (LN - 1)) * 3;\n  baseAng = chromaAngle(RAW[bi], RAW[bi + 1], RAW[bi + 2]);\n  lutRot = NaN;\n  params.s = {\n    t: 0, flow: 0, hue: 0, shift: 0, sheen: 0.06, stir: -1,\n    u: new Float32Array(N), h: new Float32Array(N), big: new Float32Array(N), fine: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.shift = cl(k[2], 0, 1);\n  P.sheen = cl(k[3], 0, 1);\n  P.t += d;\n  P.flow += d * cl(k[1], 0.2, 3);\n  if (P.stir >= 0) {\n    P.stir += d;\n    if (P.stir > 12) P.stir = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.stir = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const rot = 2 * PI * (P.hue + 0.97) - baseAng;\n  if (rot !== lutRot) buildLut((lutRot = rot));\n  const ub = P.u, hb = P.h, bb = P.big, fb = P.fine, t = P.t, f = P.flow;\n\n  // Across-the-flow coordinate u: the panel's x bent by two slow warps, one\n  // carried down by the pour and one drifting on its own. A streak is a line\n  // of constant u. The spatula pushes u aside above its edge.\n  const sa0 = P.stir, sy = sa0 >= 0 ? -0.3 + (4.6 * sa0) / 2.5 : 0;\n  const sAmp = sa0 \u003c 0 ? 0 : 0.32 * (sa0 \u003c 2.5 ? 1 : exp(-(sa0 - 2.5) / 1.6));\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, push = sAmp > 0 ? sAmp * 0.5 * (1 + tanh((sy - Y) / 0.22)) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const X = x / 32;\n      ub[y * W + x] = X + tap(X * 6 + 40, Y * 5 - f * 0.5 + 7) * 1.4 + tap(X * 3 + t * 0.3, Y * 3 + 90) * 0.9 - push * sin((PI * (x + 0.5)) / W);\n    }\n  }\n  // The surface: broad swells (big) and fine striations (fine), both long\n  // along u. Where the warp squeezes the striations finer than two LEDs can\n  // hold, they fade out instead of breaking into stair steps.\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, u = ub[i];\n      const dx = ub[y * W + (x \u003c W - 1 ? x + 1 : x)] - ub[y * W + (x > 0 ? x - 1 : x)], dy = ub[yd + x] - ub[yu + x];\n      const over = 27 * sqrt(dx * dx + dy * dy) - 2;\n      const big = tap(u * 22 + 130, Y * 4 - f * 0.6);\n      const fine = tap(u * 55, Y * 4 - f * 3) / (1 + (over > 0 ? over * over : 0));\n      bb[i] = big;\n      fb[i] = fine;\n      hb[i] = big + fine * 0.12;\n    }\n  }\n\n  const sh = P.shift, sp = 0.2 + 0.8 * P.sheen;\n  // How much shorter a fully tilted flake's path is, and how much the coat's\n  // thickness varies along the striations.\n  const dmax = 0.03 + 0.115 * sh, thin = 10 + 40 * sh;\n  // A long strip light seen in the surface. Its reflection sweeps across and\n  // back every 21 s with a second, dimmer strip trailing it; Sheen narrows both.\n  const sw = 0.8 - 0.65 * sp, iw = 1 / sw, amp = 0.46 + 0.3 * sp;\n  const sc = 1.2 * sin(t * 0.3), sc2 = sc + (sc > 0 ? -1.6 : 1.6), sa = 0.25 * sin(t * 0.13);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, xl = y * W + (x > 0 ? x - 1 : x), xr = y * W + (x \u003c W - 1 ? x + 1 : x);\n      const hx = (hb[xr] - hb[xl]) * 8, hy = (hb[yd + x] - hb[yu + x]) * 8;\n      const n2 = 1 / (1 + hx * hx + hy * hy);\n      // The straight-on view reflected, r = 2 (n.v) n - v, on a swatch that\n      // bulges a little, so the strip lands as one broad band.\n      const bulge = 0.8 * ((x - 32) / 32 + (y - 64) / 160);\n      const rq = -2 * n2 * (hx + sa * hy) + bulge, q = (rq - sc) * iw, q2 = (rq - sc2) * iw;\n      const glow = exp(-q * q) + 0.6 * exp(-q2 * q2);\n      // The flakes lie along the flow and tilt with the fine striations. A\n      // tilted flake sees the light at an angle, which shortens its path:\n      // flip runs from 0 for flakes within 18 degrees of flat to 1 past 45.\n      const fx = ((fb[xr] - fb[xl]) * 4 + hx * 0.4) * 2.2, fy = ((fb[yd + x] - fb[yu + x]) * 4 + hy * 0.4) * 2.2;\n      const c2 = 1 / (1 + fx * fx + fy * fy);\n      const a = cl((0.9 - c2) * 2.5, 0, 1), flip = a * a * (3 - 2 * a);\n      const j = cl(round((((BASE + thin * fb[i]) * (1 - dmax * flip)) / OPD_MAX) * (LN - 1)), 0, LN - 1), li = j * 3;\n      // The flakes catch the strip in finer lines of their own.\n      const fq = (bulge - 2 * c2 * (fx + sa * fy) - sc) * 2.2;\n      const gl = 0.75 * glow + 0.25 * exp(-fq * fq);\n      // Deep tones only in the troughs of the broad swells.\n      const B = bb[i], deep = B \u003c -0.1 ? (B > -0.35 ? (-0.1 - B) / 0.25 : 1) : 0;\n      let lum = 0.64 - 0.12 * sp + amp * gl - 0.26 * deep + (0.1 * flip * dmax) / 0.13;\n      if (lum > 0.95) lum = 0.95 + (lum - 0.95) * 0.4;\n      const sat = 0.45 + 0.12 * sp - 0.32 * gl + 0.45 * deep + 0.3 * sh * flip;\n      const yl = LIFT[j], L = (lum + 0.12 * yl + 0.2 * yl * deep) * 235, S = sat * (1 - 0.3 * yl);\n      display.setPixel(x, y, cl(L * (1 + S * LUT[li]), 0, 255), cl(L * (1 + S * LUT[li + 1]), 0, 255), cl(L * (1 + S * LUT[li + 2]), 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that."},{"name":"Shift","min":0,"max":1,"about":"The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold."},{"name":"Sheen","min":0,"max":1,"about":"The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour."}],"start":[0,2,0,0.06],"measures":{"motion":0.0507,"detail":0.0087,"edges":0,"complexity":1.7213,"coverage":1,"colour":0.1379,"drift":0.0591},"knobResponse":[0.2049,0.0688,0.0476,0.2033]},{"slug":"peel-off","title":"Peel-Off","family":"cosmetic","round":33,"note":"보랏빛 젤 막이 진줏빛 살결을 덮고, 위에서부터 벗겨지는 막이 옅은 안쪽을 드러낸 원통으로 말려 128줄을 내려가요. 막이 아래로 빠지면 젖은 새 막이 위에서 흘러내려 반무광으로 마르고, K3 은 그 막을 비치는 얇은 막에서 거의 불투명한 막까지 두껍게 해요. K1 은 색상환을 다 돌고, 누르면 바로 벗기기 시작해요.","idea":"A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.","buttons":"K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.","code":"// ===== Patternflow pattern =====\n// Title:   Peel-Off\n// Family:  cosmetic\n// Idea:    A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a peel-off gel mask lifted off in one sheet\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1\n//\n// Knob 1: Hue. The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive.\n// Knob 2: Speed. How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower.\n// Knob 3: Thickness. How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine.\n// Knob 4: Curl. How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40.\n// Buttons: K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells, built once: the pearl of the skin and the gel's uneven thickness.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 7 + o * 9973) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// Phases: the film peels, the skin shows bare, a new coat flows on, it dries.\nconst PEEL = 0, BARE = 1, COAT = 2, DRY = 3;\nconst PEEL_T = 7.5, BARE_T = 1.2, COAT_T = 2.4, DRY_T = 3.8;\n\n// The light: above and a little left, in front.\nconst LX = -0.15, LY = -0.75, LZ = -0.64, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst HX = LX * LN, HY = LY * LN, HZ = LZ * LN - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    t: 0, hue: 0, speed: 2, thick: 0, curl: 0.06,\n    phase: PEEL, pt: 0, coatAge: 99, queue: false,\n    yf: new Float32Array(W), rr: new Float32Array(W), roll: 0, R0: 6,\n    unc: new Float32Array(N).fill(-1),\n    sticks: [{ x: 20, w: 9, a: 4, age: -0.8, len: 1.2 }, { x: 46, w: 7, a: 3.5, age: -2.6, len: 1.0 }],\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n}\n\n// Where the coat's leading edge is, pt seconds into the coat: it flows fast\n// from the top and slows as it reaches the bottom.\nconst coatFront = (pt) => -4 + 136 * (1 - (1 - min(1, pt / COAT_T)) ** 2);\n// When it passed row y, for how wet that row still is.\nconst coatPassed = (y) => COAT_T * (1 - sqrt(cl(1 - (y + 4) / 136, 0, 1)));\n\n// The peel line: it starts above the top edge and leaves below the bottom.\nfunction peelY(P, pr) {\n  const span = H + 2.6 * P.R0 + 6, e = pr \u003c 0.08 ? (pr * pr) / 0.16 : pr - 0.04;\n  return -1.3 * P.R0 - 2 + (span * e) / 0.96;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], 0, 1);\n  P.curl = cl(k[3], 0, 1);\n  P.R0 = 5.5 + 10 * P.curl;\n  const d = (d0 * P.speed) / 2;\n  P.t += d;\n  P.pt += d;\n  P.coatAge += d;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.phase === DRY) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n    else if (P.phase === BARE) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0), (P.queue = true);\n    else if (P.phase === COAT) P.queue = true;\n  }\n  if (P.phase === PEEL && P.pt >= PEEL_T) (P.phase = BARE), (P.pt = 0);\n  else if (P.phase === BARE && P.pt >= BARE_T) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0);\n  else if (P.phase === COAT && P.pt >= COAT_T) {\n    P.phase = P.queue ? PEEL : DRY;\n    P.pt = 0;\n    P.queue = false;\n    if (P.phase === PEEL) P.unc.fill(-1);\n  } else if (P.phase === DRY && P.pt >= DRY_T) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n\n  // Spots where the gel holds on. Each one holds the peel line back for about\n  // a second while the film stretches, up to 5 rows, then lets go: the line\n  // snaps forward past straight and settles in a fifth of a second.\n  for (const s of P.sticks) {\n    s.age += d;\n    if (s.age > s.len + 0.35) {\n      s.age = -0.3 - 1.4 * Math.random();\n      s.x = 6 + Math.random() * 52;\n      s.w = 6 + Math.random() * 6;\n      s.a = 2.5 + Math.random() * 3;\n      s.len = 0.8 + Math.random() * 0.6;\n    }\n  }\n  if (P.phase === PEEL) {\n    const pr = P.pt / PEEL_T, Y = peelY(P, pr), t = P.t;\n    // The roll gathers the sheet and grows by half on its way down.\n    const R = P.R0 * (0.85 + 0.45 * pr);\n    P.roll = Y;\n    for (let x = 0; x \u003c W; x++) {\n      let y = Y + 1.3 * sin(0.11 * x + 0.9 * t) + 0.8 * sin(0.27 * x - 1.4 * t + 1) + 1.2 * tap(x * 0.9, t * 3);\n      for (const s of P.sticks) {\n        if (s.age \u003c 0) continue;\n        const g = exp(-(((x - s.x) / s.w) ** 2));\n        let lag;\n        if (s.age \u003c s.len) lag = s.a * (s.age / s.len) ** 1.5;\n        else {\n          const q = s.age - s.len;\n          lag = s.a * exp(-q / 0.07) * cos(q * 26);\n        }\n        y -= lag * g;\n      }\n      P.yf[x] = y;\n      P.rr[x] = R * (1 + 0.07 * sin(0.2 * x + 0.5 * t));\n      // Skin the peel has just passed over keeps a fresh glow for a while.\n      const top = min(H, max(0, floor(y)));\n      for (let yy = 0; yy \u003c top; yy++) {\n        const p = yy * W + x;\n        if (P.unc[p] \u003c 0) P.unc[p] = t;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const t = P.t, ph = P.phase, k3 = P.thick, tint = P.tint;\n  if (P.lastHue !== P.hue) {\n    // From red through orange and gold to lime the gel is lifted towards\n    // coral, peach, butter and pale lime: less saturation and more light than\n    // the skin, so it reads as a lit jelly. At 0.6 of full these hues read as\n    // brick, tan, khaki and olive.\n    let h = P.hue + 0.78;\n    h -= floor(h);\n    let dh = h - 0.13;\n    if (dh > 0.5) dh -= 1;\n    P.warm = sm(1 - abs(dh) / 0.21);\n    hsv(h, 0.68 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm, tr = tint[0], tg = tint[1], tb = tint[2];\n  // The gel's own colour at the start knobs is about 0.6 of full: deep enough\n  // that the peel reads as a change of light, not only of colour.\n  const deepV = 0.6 + 0.65 * warm - 0.14 * k3 * (1 - warm), op = 0.55 + 0.4 * k3;\n  const cf = ph === COAT ? coatFront(P.pt) : 0;\n  // A strip light's reflection drifts slowly across the gel.\n  const sweep = 52 + 34 * sin(t * 0.21);\n  // The broad glow on the skin wanders.\n  const gx = 32 + 20 * sin(t * 0.17), gy = 64 + 40 * sin(t * 0.11 + 1);\n\n  for (let x = 0; x \u003c W; x++) {\n    const yf = P.yf[x], R = P.rr[x], wob = 1.5 * sin(0.2 * x + 3 * P.pt) + sin(0.37 * x - 2 * P.pt);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      // Is there gel here, and how wet is it?\n      let film;\n      if (ph === PEEL) film = y > yf;\n      else if (ph === DRY) film = true;\n      else if (ph === BARE) film = false;\n      else film = y \u003c cf + wob;\n      const wet = film ? exp(-max(0, P.coatAge - coatPassed(y)) / 1.4) : 0;\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and mint\n      // across the panel, a broad soft glow that wanders, fine shimmer, and a\n      // fresh glow where the film has just come off.\n      const q = 0.5 * tap(x * 0.45 + 7, y * 0.45 + t * 0.8) + (x * 0.6 + y) / 170 + t * 0.03;\n      const gl = exp(-((x - gx) ** 2 + (y - gy) ** 2 * 0.3) / 1300);\n      const fr = P.unc[p] >= 0 ? exp(-(t - P.unc[p]) / 2.2) : 0;\n      const L = 0.8 + 0.13 * gl + 0.1 * fr + 0.02 * (hash(p) - 0.5);\n      let r = (1 + 0.035 * cos(TAU * q) + 0.03 * fr) * L;\n      let g = (0.875 + 0.03 * cos(TAU * (q - 0.33))) * L;\n      let b = (0.83 + 0.04 * cos(TAU * (q - 0.67)) + 0.015 * fr) * L;\n      const hs = hash(p + 101);\n      if (hs \u003c 0.022) {\n        const tw = max(0, sin(t * (2.4 + 40 * hs) + hash(p + 5) * 40)) ** 10 * (0.4 + 0.3 * gl);\n        r += tw;\n        g += tw;\n        b += tw;\n      }\n\n      if (film) {\n        // The gel: its own deep colour over the skin seen through it, uneven\n        // in thickness, deeper while wet. Wet, the strip light shows as a\n        // sharp band that the coat's ripples bend; dry, a broad soft sheen\n        // over a fine satin grain.\n        const th = tap(x * 0.8 + 60, y * 0.8 + 31);\n        const dv = deepV * (1 + (0.2 * th - 0.1 * wet) * (1 - 0.7 * warm)), thr = 1 - op;\n        r = tr * dv * op + r * (0.5 + 0.5 * tr) * thr * 0.8;\n        g = tg * dv * op + g * (0.5 + 0.5 * tg) * thr * 0.8;\n        b = tb * dv * op + b * (0.5 + 0.5 * tb) * thr * 0.8;\n        const rip = ph === COAT ? 2.5 * wet * sin((y - cf) * 0.32 - P.pt * 5) * exp(-max(0, cf - y) / 30) : 0;\n        const band = x * 0.5 + y * 0.42 + th * 4 + rip - sweep;\n        const wd = 13 - 8.5 * wet, amp = 0.15 + 0.12 * k3 + 0.55 * wet;\n        let hl = amp * exp(-((band / wd) ** 2)) + 0.3 * wet * exp(-(((band + 24) / 2.5) ** 2));\n        // Behind the coat's edge the wet gel still moves in low swells, each\n        // catching a thin line of light, and they die out as it settles.\n        if (ph === COAT && y \u003c cf + wob) hl += 0.3 * wet * max(0, sin((y - cf - wob) * 0.42 - P.pt * 5)) ** 8 * exp(-(cf - y) / 26);\n        const grain = (1 - wet) * 0.04 * (hash(p + 33) - 0.5);\n        r += hl * (0.85 + 0.15 * tr) + grain;\n        g += hl * (0.85 + 0.15 * tg) + grain;\n        b += hl * (0.85 + 0.15 * tb) + grain;\n        // The new coat's leading edge is a ridge of wet gel: a line of light\n        // on its upper slope, deeper colour where it is thickest.\n        if (ph === COAT) {\n          const e = y - (cf + wob);\n          if (e > -6) {\n            const deep = 1 - 0.28 * exp(-(((e + 1.2) / 1.3) ** 2)), hi = 0.75 * exp(-(((e + 3.2) / 0.9) ** 2));\n            r = r * deep + hi;\n            g = g * deep + hi;\n            b = b * deep + hi;\n          }\n        }\n        // Below the curl, its shadow on the film, lighter on the warm hues,\n        // where a deep shadow turns butter to olive.\n        if (ph === PEEL) {\n          const sd = (0.45 - 0.22 * warm) * exp(-max(0, y - yf - R * 0.9) / (0.7 * R + 1));\n          r *= 1 - sd;\n          g *= 1 - sd;\n          b *= 1 - sd;\n        }\n      }\n\n      // The curl: a cylinder of film lying on the skin along the peel line,\n      // its paler underside out. Its material turns as it rolls, carrying faint\n      // stretch lines and the edge of the outer turn round with it, and light\n      // coming through the gel tints its lower edge.\n      if (ph === PEEL) {\n        const v = (y - yf) / R;\n        if (v \u003c -1 && v > -1.6) {\n          // A little shade on the skin just above the roll.\n          const ao = 0.2 * sm((v + 1.6) / 0.6);\n          r *= 1 - ao;\n          g *= 1 - ao;\n          b *= 1 - ao;\n        }\n        if (v > -1.05 && v \u003c 1.05) {\n          const vv = cl(v, -0.999, 0.999), nz = sqrt(1 - vv * vv);\n          const dif = max(0, (vv * LY - nz * LZ) * LN);\n          const sp = max(0, (vv * HY - nz * HZ) * HN) ** 30;\n          const s = atan2(vv, nz) * R - P.roll;\n          const str = 0.05 * sin(s * 0.8 + tap(x * 0.7, 40) * 5);\n          let ed = (s / (TAU * R)) % 1;\n          if (ed \u003c 0) ed += 1;\n          const line = 0.16 * exp(-(((ed > 0.5 ? ed - 1 : ed) / 0.025) ** 2));\n          const lit = (0.32 + 0.3 * warm + 0.62 * dif) * (1 + str - line);\n          const rim = (1 - nz) ** 2 * 0.4, glow = 0.35 * sm((vv - 0.1) / 0.8);\n          const ur = 0.3 + 0.7 * tr, ug = 0.3 + 0.7 * tg, ub = 0.3 + 0.7 * tb;\n          const cr = ur * lit + (rim + glow) * tr + sp;\n          const cg = ug * lit + (rim + glow) * tg + sp;\n          const cbl = ub * lit + (rim + glow) * tb + sp;\n          const cov = cl((1 - abs(v)) * R + 0.5, 0, 1);\n          r += (cr - r) * cov;\n          g += (cg - g) * cov;\n          b += (cbl - b) * cov;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-peel-off","type":"code","name":"peel-off","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Peel-Off\n// Family:  cosmetic\n// Idea:    A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a peel-off gel mask lifted off in one sheet\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1\n//\n// Knob 1: Hue. The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive.\n// Knob 2: Speed. How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower.\n// Knob 3: Thickness. How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine.\n// Knob 4: Curl. How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40.\n// Buttons: K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells, built once: the pearl of the skin and the gel's uneven thickness.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 7 + o * 9973) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// Phases: the film peels, the skin shows bare, a new coat flows on, it dries.\nconst PEEL = 0, BARE = 1, COAT = 2, DRY = 3;\nconst PEEL_T = 7.5, BARE_T = 1.2, COAT_T = 2.4, DRY_T = 3.8;\n\n// The light: above and a little left, in front.\nconst LX = -0.15, LY = -0.75, LZ = -0.64, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst HX = LX * LN, HY = LY * LN, HZ = LZ * LN - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    t: 0, hue: 0, speed: 2, thick: 0, curl: 0.06,\n    phase: PEEL, pt: 0, coatAge: 99, queue: false,\n    yf: new Float32Array(W), rr: new Float32Array(W), roll: 0, R0: 6,\n    unc: new Float32Array(N).fill(-1),\n    sticks: [{ x: 20, w: 9, a: 4, age: -0.8, len: 1.2 }, { x: 46, w: 7, a: 3.5, age: -2.6, len: 1.0 }],\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n}\n\n// Where the coat's leading edge is, pt seconds into the coat: it flows fast\n// from the top and slows as it reaches the bottom.\nconst coatFront = (pt) => -4 + 136 * (1 - (1 - min(1, pt / COAT_T)) ** 2);\n// When it passed row y, for how wet that row still is.\nconst coatPassed = (y) => COAT_T * (1 - sqrt(cl(1 - (y + 4) / 136, 0, 1)));\n\n// The peel line: it starts above the top edge and leaves below the bottom.\nfunction peelY(P, pr) {\n  const span = H + 2.6 * P.R0 + 6, e = pr \u003c 0.08 ? (pr * pr) / 0.16 : pr - 0.04;\n  return -1.3 * P.R0 - 2 + (span * e) / 0.96;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], 0, 1);\n  P.curl = cl(k[3], 0, 1);\n  P.R0 = 5.5 + 10 * P.curl;\n  const d = (d0 * P.speed) / 2;\n  P.t += d;\n  P.pt += d;\n  P.coatAge += d;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.phase === DRY) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n    else if (P.phase === BARE) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0), (P.queue = true);\n    else if (P.phase === COAT) P.queue = true;\n  }\n  if (P.phase === PEEL && P.pt >= PEEL_T) (P.phase = BARE), (P.pt = 0);\n  else if (P.phase === BARE && P.pt >= BARE_T) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0);\n  else if (P.phase === COAT && P.pt >= COAT_T) {\n    P.phase = P.queue ? PEEL : DRY;\n    P.pt = 0;\n    P.queue = false;\n    if (P.phase === PEEL) P.unc.fill(-1);\n  } else if (P.phase === DRY && P.pt >= DRY_T) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n\n  // Spots where the gel holds on. Each one holds the peel line back for about\n  // a second while the film stretches, up to 5 rows, then lets go: the line\n  // snaps forward past straight and settles in a fifth of a second.\n  for (const s of P.sticks) {\n    s.age += d;\n    if (s.age > s.len + 0.35) {\n      s.age = -0.3 - 1.4 * Math.random();\n      s.x = 6 + Math.random() * 52;\n      s.w = 6 + Math.random() * 6;\n      s.a = 2.5 + Math.random() * 3;\n      s.len = 0.8 + Math.random() * 0.6;\n    }\n  }\n  if (P.phase === PEEL) {\n    const pr = P.pt / PEEL_T, Y = peelY(P, pr), t = P.t;\n    // The roll gathers the sheet and grows by half on its way down.\n    const R = P.R0 * (0.85 + 0.45 * pr);\n    P.roll = Y;\n    for (let x = 0; x \u003c W; x++) {\n      let y = Y + 1.3 * sin(0.11 * x + 0.9 * t) + 0.8 * sin(0.27 * x - 1.4 * t + 1) + 1.2 * tap(x * 0.9, t * 3);\n      for (const s of P.sticks) {\n        if (s.age \u003c 0) continue;\n        const g = exp(-(((x - s.x) / s.w) ** 2));\n        let lag;\n        if (s.age \u003c s.len) lag = s.a * (s.age / s.len) ** 1.5;\n        else {\n          const q = s.age - s.len;\n          lag = s.a * exp(-q / 0.07) * cos(q * 26);\n        }\n        y -= lag * g;\n      }\n      P.yf[x] = y;\n      P.rr[x] = R * (1 + 0.07 * sin(0.2 * x + 0.5 * t));\n      // Skin the peel has just passed over keeps a fresh glow for a while.\n      const top = min(H, max(0, floor(y)));\n      for (let yy = 0; yy \u003c top; yy++) {\n        const p = yy * W + x;\n        if (P.unc[p] \u003c 0) P.unc[p] = t;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const t = P.t, ph = P.phase, k3 = P.thick, tint = P.tint;\n  if (P.lastHue !== P.hue) {\n    // From red through orange and gold to lime the gel is lifted towards\n    // coral, peach, butter and pale lime: less saturation and more light than\n    // the skin, so it reads as a lit jelly. At 0.6 of full these hues read as\n    // brick, tan, khaki and olive.\n    let h = P.hue + 0.78;\n    h -= floor(h);\n    let dh = h - 0.13;\n    if (dh > 0.5) dh -= 1;\n    P.warm = sm(1 - abs(dh) / 0.21);\n    hsv(h, 0.68 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm, tr = tint[0], tg = tint[1], tb = tint[2];\n  // The gel's own colour at the start knobs is about 0.6 of full: deep enough\n  // that the peel reads as a change of light, not only of colour.\n  const deepV = 0.6 + 0.65 * warm - 0.14 * k3 * (1 - warm), op = 0.55 + 0.4 * k3;\n  const cf = ph === COAT ? coatFront(P.pt) : 0;\n  // A strip light's reflection drifts slowly across the gel.\n  const sweep = 52 + 34 * sin(t * 0.21);\n  // The broad glow on the skin wanders.\n  const gx = 32 + 20 * sin(t * 0.17), gy = 64 + 40 * sin(t * 0.11 + 1);\n\n  for (let x = 0; x \u003c W; x++) {\n    const yf = P.yf[x], R = P.rr[x], wob = 1.5 * sin(0.2 * x + 3 * P.pt) + sin(0.37 * x - 2 * P.pt);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      // Is there gel here, and how wet is it?\n      let film;\n      if (ph === PEEL) film = y > yf;\n      else if (ph === DRY) film = true;\n      else if (ph === BARE) film = false;\n      else film = y \u003c cf + wob;\n      const wet = film ? exp(-max(0, P.coatAge - coatPassed(y)) / 1.4) : 0;\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and mint\n      // across the panel, a broad soft glow that wanders, fine shimmer, and a\n      // fresh glow where the film has just come off.\n      const q = 0.5 * tap(x * 0.45 + 7, y * 0.45 + t * 0.8) + (x * 0.6 + y) / 170 + t * 0.03;\n      const gl = exp(-((x - gx) ** 2 + (y - gy) ** 2 * 0.3) / 1300);\n      const fr = P.unc[p] >= 0 ? exp(-(t - P.unc[p]) / 2.2) : 0;\n      const L = 0.8 + 0.13 * gl + 0.1 * fr + 0.02 * (hash(p) - 0.5);\n      let r = (1 + 0.035 * cos(TAU * q) + 0.03 * fr) * L;\n      let g = (0.875 + 0.03 * cos(TAU * (q - 0.33))) * L;\n      let b = (0.83 + 0.04 * cos(TAU * (q - 0.67)) + 0.015 * fr) * L;\n      const hs = hash(p + 101);\n      if (hs \u003c 0.022) {\n        const tw = max(0, sin(t * (2.4 + 40 * hs) + hash(p + 5) * 40)) ** 10 * (0.4 + 0.3 * gl);\n        r += tw;\n        g += tw;\n        b += tw;\n      }\n\n      if (film) {\n        // The gel: its own deep colour over the skin seen through it, uneven\n        // in thickness, deeper while wet. Wet, the strip light shows as a\n        // sharp band that the coat's ripples bend; dry, a broad soft sheen\n        // over a fine satin grain.\n        const th = tap(x * 0.8 + 60, y * 0.8 + 31);\n        const dv = deepV * (1 + (0.2 * th - 0.1 * wet) * (1 - 0.7 * warm)), thr = 1 - op;\n        r = tr * dv * op + r * (0.5 + 0.5 * tr) * thr * 0.8;\n        g = tg * dv * op + g * (0.5 + 0.5 * tg) * thr * 0.8;\n        b = tb * dv * op + b * (0.5 + 0.5 * tb) * thr * 0.8;\n        const rip = ph === COAT ? 2.5 * wet * sin((y - cf) * 0.32 - P.pt * 5) * exp(-max(0, cf - y) / 30) : 0;\n        const band = x * 0.5 + y * 0.42 + th * 4 + rip - sweep;\n        const wd = 13 - 8.5 * wet, amp = 0.15 + 0.12 * k3 + 0.55 * wet;\n        let hl = amp * exp(-((band / wd) ** 2)) + 0.3 * wet * exp(-(((band + 24) / 2.5) ** 2));\n        // Behind the coat's edge the wet gel still moves in low swells, each\n        // catching a thin line of light, and they die out as it settles.\n        if (ph === COAT && y \u003c cf + wob) hl += 0.3 * wet * max(0, sin((y - cf - wob) * 0.42 - P.pt * 5)) ** 8 * exp(-(cf - y) / 26);\n        const grain = (1 - wet) * 0.04 * (hash(p + 33) - 0.5);\n        r += hl * (0.85 + 0.15 * tr) + grain;\n        g += hl * (0.85 + 0.15 * tg) + grain;\n        b += hl * (0.85 + 0.15 * tb) + grain;\n        // The new coat's leading edge is a ridge of wet gel: a line of light\n        // on its upper slope, deeper colour where it is thickest.\n        if (ph === COAT) {\n          const e = y - (cf + wob);\n          if (e > -6) {\n            const deep = 1 - 0.28 * exp(-(((e + 1.2) / 1.3) ** 2)), hi = 0.75 * exp(-(((e + 3.2) / 0.9) ** 2));\n            r = r * deep + hi;\n            g = g * deep + hi;\n            b = b * deep + hi;\n          }\n        }\n        // Below the curl, its shadow on the film, lighter on the warm hues,\n        // where a deep shadow turns butter to olive.\n        if (ph === PEEL) {\n          const sd = (0.45 - 0.22 * warm) * exp(-max(0, y - yf - R * 0.9) / (0.7 * R + 1));\n          r *= 1 - sd;\n          g *= 1 - sd;\n          b *= 1 - sd;\n        }\n      }\n\n      // The curl: a cylinder of film lying on the skin along the peel line,\n      // its paler underside out. Its material turns as it rolls, carrying faint\n      // stretch lines and the edge of the outer turn round with it, and light\n      // coming through the gel tints its lower edge.\n      if (ph === PEEL) {\n        const v = (y - yf) / R;\n        if (v \u003c -1 && v > -1.6) {\n          // A little shade on the skin just above the roll.\n          const ao = 0.2 * sm((v + 1.6) / 0.6);\n          r *= 1 - ao;\n          g *= 1 - ao;\n          b *= 1 - ao;\n        }\n        if (v > -1.05 && v \u003c 1.05) {\n          const vv = cl(v, -0.999, 0.999), nz = sqrt(1 - vv * vv);\n          const dif = max(0, (vv * LY - nz * LZ) * LN);\n          const sp = max(0, (vv * HY - nz * HZ) * HN) ** 30;\n          const s = atan2(vv, nz) * R - P.roll;\n          const str = 0.05 * sin(s * 0.8 + tap(x * 0.7, 40) * 5);\n          let ed = (s / (TAU * R)) % 1;\n          if (ed \u003c 0) ed += 1;\n          const line = 0.16 * exp(-(((ed > 0.5 ? ed - 1 : ed) / 0.025) ** 2));\n          const lit = (0.32 + 0.3 * warm + 0.62 * dif) * (1 + str - line);\n          const rim = (1 - nz) ** 2 * 0.4, glow = 0.35 * sm((vv - 0.1) / 0.8);\n          const ur = 0.3 + 0.7 * tr, ug = 0.3 + 0.7 * tg, ub = 0.3 + 0.7 * tb;\n          const cr = ur * lit + (rim + glow) * tr + sp;\n          const cg = ug * lit + (rim + glow) * tg + sp;\n          const cbl = ub * lit + (rim + glow) * tb + sp;\n          const cov = cl((1 - abs(v)) * R + 0.5, 0, 1);\n          r += (cr - r) * cov;\n          g += (cg - g) * cov;\n          b += (cbl - b) * cov;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower."},{"name":"Thickness","min":0,"max":1,"about":"How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine."},{"name":"Curl","min":0,"max":1,"about":"How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40."}],"start":[0,2,0,0.06],"measures":{"motion":0.2317,"detail":0.0136,"edges":0.1088,"complexity":2.1892,"coverage":1,"colour":0.193,"drift":0.226},"knobResponse":[0.1816,0.2118,0.0647,0.0647]},{"slug":"peg-light","title":"Peg Light","family":"toy","round":18,"note":"1967년 Lite-Brite 처럼 검은 판의 엇갈린 구멍에 색 페그를 하나씩 꽂아 로켓, 돛배, 화분, 물고기, 집, 광대 그림을 채워요. 다 차면 4초 머문 뒤 페그가 위에서부터 쓸려 빠지고 다음 종이가 올라가요. K1 을 누르면 판을 비우고 같은 그림을 처음부터 다시 꽂아요.","idea":"Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.","buttons":"K1 tap pushes every peg out and starts the same picture again.","code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-peg-light","type":"code","name":"peg-light","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulb","min":0,"max":1,"about":"The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first."},{"name":"Speed","min":0.2,"max":3,"about":"Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too."},{"name":"Picture","min":0,"max":5,"about":"Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order."},{"name":"Glow","min":0,"max":1,"about":"How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.0352,"detail":0.2377,"edges":0.8627,"complexity":0.6614,"coverage":0.1604,"colour":0.2171,"drift":0.0512},"knobResponse":[0.0548,0.0566,0.1395,0.0943]},{"slug":"pendulum-wave","title":"Pendulum Wave","family":"physics","round":24,"note":"길이가 조금씩 다른 진자 줄을 위에서 내려다봐요. 한꺼번에 놓은 추들이 한 줄로 흔들리다가 뱀처럼 휘고, 세 줄, 두 줄로 엇갈렸다가 28초 만에 다시 한 줄로 모여요. K1 이 강철에서 놋쇠와 구리를 지나 무지개 유리구슬까지 추를 바꾸고, K4 를 올리면 추가 지나간 자리에 빛 꼬리가 남아요.","idea":"Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.","buttons":"K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.","code":"// ===== Patternflow pattern =====\n// Title:   Pendulum Wave\n// Family:  physics\n// Idea:    Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the pendulum wave demonstration of the Harvard Natural Sciences Lecture Demonstrations, fifteen pendulums tuned to 51 to 65 swings a minute\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1\n//\n// Knob 1: Finish. The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow.\n// Knob 2: Speed. The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again.\n// Knob 3: Pendulums. How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22.\n// Knob 4: Trails. A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them.\n// Buttons: K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, cos, sqrt, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// The beam's centre line (it covers columns 30 and 31) and the swing.\nconst BX = 31;\nconst AMP = 22;\n// One cycle at Speed 2, in seconds, and how many times the longest\n// pendulum swings in it; each shorter one swings once more.\nconst TC = 28;\nconst N0 = 22;\n// The lamp, off the left edge, and the beam's height over the table, in\n// LEDs. The longest string is 13 LEDs, so its bob hangs 4 over the table.\nconst [LX, LY, LZ] = [-34, 58, 120];\nconst ZB = 17;\nconst L0 = 13;\nconst MAXN = 24;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The lamp's colour, and the metal, at Finish 0, 1/4, 1/2 and 3/4 and on.\nconst LAMPS = [\n  [184, 206, 248],\n  [255, 214, 160],\n  [255, 192, 142],\n  [238, 236, 226],\n  [238, 236, 226],\n];\nconst METALS = [\n  [196, 208, 226],\n  [236, 172, 72],\n  [240, 122, 74],\n  [240, 122, 74],\n  [240, 122, 74],\n];\nconst stop = (T, f) => {\n  const u = cl(f, 0, 1) * 4, i = min(3, floor(u));\n  return T[i].map((v, c) => mix(v, T[i + 1][c], u - i));\n};\n\n// The table: walnut boards running along the beam, and a pale epoxy bench.\n// The lamp's pool on it never moves, so it is worked out once.\nfunction build(P) {\n  const seams = [11, 37, 58];\n  const ax = 14 - LX, ay = 62 - LY, az = -LZ, al = sqrt(ax * ax + ay * ay + az * az);\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    let pk = 0;\n    for (const s of seams) if (x >= s) pk++;\n    const sx = x + pk * 17.3, warp = 2.2 * vn(sx * 0.12, y * 0.018 + pk * 7);\n    const grain = vn(sx * 0.62 + warp, y * 0.04 + pk * 13), fine = vn(sx * 1.9, y * 0.22 + pk * 5);\n    const k = (0.74 + 0.36 * grain + 0.12 * fine) * (seams.includes(x) ? 0.6 : 1) * (0.88 + 0.24 * hash(pk, 99));\n    P.wood[i * 3] = 0.76 * k;\n    P.wood[i * 3 + 1] = 0.37 * k;\n    P.wood[i * 3 + 2] = 0.16 * k;\n    const b = 0.95 + 0.05 * hash(x, y + 300) + 0.05 * vn(x * 0.25, y * 0.25);\n    P.bench[i * 3] = 0.8 * b;\n    P.bench[i * 3 + 1] = 0.84 * b;\n    P.bench[i * 3 + 2] = 0.8 * b;\n    // Inverse square and the floor's slant, inside the shade's cone.\n    const vx = x + 0.5 - LX, vy = y + 0.5 - LY, d = sqrt(vx * vx + vy * vy + LZ * LZ);\n    const ca = (vx * ax + vy * ay + LZ * -az) / (d * al);\n    const p = (LZ / d) ** 3 * (0.25 + 0.75 * sm(0.83, 0.97, ca));\n    P.pool[i] = p;\n    top = max(top, p);\n    // The beam's shadow: it lies level, so its shadow is a straight band.\n    const bx = LX + (BX - LX) * (LZ / (LZ - ZB)), hw = LZ / (LZ - ZB);\n    P.beamD[i] = 0.5 * (1 - sm(hw - 0.9, hw + 0.9, Math.abs(x + 0.5 - bx)));\n  }\n  for (let i = 0; i \u003c N; i++) P.pool[i] /= top;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    wood: F(N * 3), bench: F(N * 3), pool: F(N), beamD: F(N), D: F(N), tr: F(N * 3), f: F(N * 3),\n    x: F(MAXN), prev: F(MAXN), from: F(MAXN), y: F(MAXN), z: F(MAXN), r: F(MAXN),\n    c: 0, n: 0, hold: 0.3, board: 1, fin: 0, tau: 0.05, first: true,\n  };\n  params.s.from.fill(BX + AMP);\n  build(params.s);\n}\n\n// Where each pendulum hangs, how high its bob is and how big it looks.\nfunction layout(P, n) {\n  P.n = n;\n  const s = H / n, rb = min(2.35, 0.31 * s);\n  for (let i = 0; i \u003c MAXN; i++) {\n    P.y[i] = floor(s / 2 + s * i) + 0.5;\n    // A string's length goes as the square of its period.\n    P.z[i] = ZB - L0 * (N0 / (N0 + i)) ** 2;\n    P.r[i] = rb * (0.93 + 0.022 * P.z[i]);\n  }\n}\n\n// The colours the finish gives the lamp and each bob.\nfunction colours(P) {\n  const f = P.fin, n = P.n;\n  P.lamp = stop(LAMPS, f);\n  P.glass = sm(0.52, 0.74, f);\n  P.benchK = sm(0.5, 0.74, f);\n  // Brass and copper tint their own highlights; steel and glass do not.\n  P.tint = (0.15 + 0.7 * sm(0, 0.25, f)) * (1 - P.glass);\n  const m = stop(METALS, f), u = sm(0.75, 1, f);\n  P.col = [];\n  // Sea-green glass at 3/4, opening into a rainbow down the row at 1.\n  for (let i = 0; i \u003c n; i++) {\n    const b = hsv(mix(0.42, 0.02 + (0.8 * i) / (n - 1), u), 0.82, 1);\n    P.col.push(m.map((v, c) => mix(v, b[c], P.glass)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const real = cl(dt || 0, 0, 0.1), d = (real * cl(k[1], 0.2, 3)) / 2;\n  P.fin = cl(k[0], 0, 1);\n  P.tau = 0.05 + 0.3 * cl(k[3], 0, 1) ** 1.6;\n  const n = cl(round(k[2]), 16, 24);\n  if (n !== P.n) layout(P, n);\n  colours(P);\n\n  // The button: a board comes in, every bob is caught against it, and all\n  // are let go at once.\n  if (input.btnPressed && input.btnPressed[0] && P.hold \u003c 0) {\n    P.hold = 0;\n    P.from.set(P.x);\n  }\n  if (P.hold >= 0) {\n    P.hold += real;\n    const e = sm(0.05, 0.6, P.hold);\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = mix(P.from[i], BX + AMP, e);\n    P.board = sm(0, 0.35, P.hold);\n    if (P.hold >= 0.95) (P.hold = -1), (P.c = 0);\n  } else {\n    P.c = (P.c + d) % TC;\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = BX + AMP * cos((2 * PI * (N0 + i) * P.c) / TC);\n    P.board = max(0, P.board - real * 5);\n  }\n  if (P.first) (P.first = false), P.prev.set(P.x);\n\n  // The long exposure fades in the pendulums' own time, so a trail is as\n  // long on the table at any speed. Each bob paints the way it came this\n  // frame, older parts dimmer.\n  const tr = P.tr, fade = exp(-d / P.tau), span = max(d, 0.004);\n  for (let i = 0; i \u003c tr.length; i++) tr[i] *= fade;\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = P.prev[i], x1 = P.x[i], y = P.y[i], rt = P.r[i] * 0.8, steps = max(1, ceil(Math.abs(x1 - x0) / 0.6));\n    const col = P.col[i].map((v, c) => (v * 0.55 + P.lamp[c] * 0.25) * 0.85);\n    for (let s = 1; s \u003c= steps; s++) {\n      const t = s / steps, xs = mix(x0, x1, t), lev = exp((-(1 - t) * span) / P.tau);\n      for (let yy = floor(y - rt - 1); yy \u003c= y + rt + 1; yy++)\n        for (let xx = floor(xs - rt - 1); xx \u003c= xs + rt + 1; xx++) {\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const dx = xx + 0.5 - xs, dy = yy + 0.5 - y, q = (dx * dx + dy * dy) / (rt * rt);\n          if (q >= 1.6) continue;\n          const a = lev * exp(-1.6 * q), o = (yy * W + xx) * 3;\n          for (let c = 0; c \u003c 3; c++) tr[o + c] = max(tr[o + c], col[c] * a);\n        }\n    }\n  }\n  P.prev.set(P.x);\n}\n\n// Where the lamp throws a point at height z onto the table.\nconst proj = (x, y, z) => {\n  const k = LZ / (LZ - z);\n  return [LX + (x - LX) * k, LY + (y - LY) * k];\n};\n\n// A shiny ball, sampled two by two inside each LED.\nfunction ball(F, cx, cy, cz, r, base, lamp, g, tint) {\n  const sc = lamp.map((v, c) => v * mix(1, (base[c] / 255) * 1.15, tint));\n  // The light leans twice as far as the lamp really stands, so the glint\n  // sits clearly on the lamp's side of a ball five LEDs across.\n  let lx = 2 * (LX - cx), ly = 2 * (LY - cy), lz = LZ - cz;\n  const ll = sqrt(lx * lx + ly * ly + lz * lz);\n  (lx /= ll), (ly /= ll), (lz /= ll);\n  let hx = lx, hy = ly, hz = lz + 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  (hx /= hl), (hy /= hl), (hz /= hl);\n  const lxy = sqrt(lx * lx + ly * ly) || 1;\n  const col = [0, 0, 0];\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      let cov = 0;\n      col[0] = col[1] = col[2] = 0;\n      for (let sy = 0; sy \u003c 2; sy++)\n        for (let sx = 0; sx \u003c 2; sx++) {\n          const dx = (x + 0.25 + 0.5 * sx - cx) / r, dy = (y + 0.25 + 0.5 * sy - cy) / r, q = dx * dx + dy * dy;\n          if (q >= 1) continue;\n          cov += 0.25;\n          const nz = sqrt(1 - q), diff = max(0, dx * lx + dy * ly + nz * lz), nh = max(0, dx * hx + dy * hy + nz * hz), spec = nh ** 18, sheen = nh ** 3;\n          // Metal: the lamp's side lit, the rim holding the dark table.\n          const rim = 0.4 + 0.6 * nz, back = max(0, -(dx * lx + dy * ly) / lxy) * sqrt(q);\n          for (let c = 0; c \u003c 3; c++) {\n            const m = base[c] * (0.1 + 0.85 * diff * sqrt(diff)) * rim, gl = base[c] * (0.3 + 0.25 * diff + 0.9 * back);\n            col[c] += (mix(m, gl, g) + sc[c] * (spec * 1.6 + 0.12 * sheen)) * 0.25;\n          }\n        }\n      if (cov \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = F[o + c] * (1 - cov) + col[c];\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const F = P.f, D = P.D, n = P.n, lamp = P.lamp, g = P.glass, bk = P.benchK;\n\n  // Shadows on the table: the beam, each string and each bob. A bob higher\n  // up throws its shadow further from the lamp and softer.\n  D.set(P.beamD);\n  const sh = [];\n  for (let i = 0; i \u003c n; i++) {\n    const [sx, sy] = proj(P.x[i], P.y[i], P.z[i]), [px, py] = proj(BX, P.y[i], ZB);\n    sh.push([sx, sy]);\n    const rs = P.r[i] * 0.95, pen = 0.45 + 0.09 * P.z[i], dk = (0.9 - 0.02 * P.z[i]) * (1 - 0.15 * g);\n    for (let y = floor(sy - rs - pen - 1); y \u003c= sy + rs + pen + 1; y++)\n      for (let x = floor(sx - rs - pen - 1); x \u003c= sx + rs + pen + 1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const dd = sqrt((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2), v = dk * (1 - sm(rs - pen, rs + pen, dd)), j = y * W + x;\n        if (v > D[j]) D[j] = v;\n      }\n    const len = sqrt((sx - px) ** 2 + (sy - py) ** 2), m = ceil(len * 1.5);\n    for (let s = 0; s \u003c= m; s++) {\n      const t = s / max(1, m), x = floor(mix(px, sx, t)), y = floor(mix(py, sy, t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && D[y * W + x] \u003c 0.2) D[y * W + x] = 0.2;\n    }\n  }\n\n  // The table under the lamp.\n  const fl = 0.42;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const e = (0.1 + 0.9 * P.pool[i] * (1 - D[i])) * fl;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(P.wood[o + c], P.bench[o + c], bk) * lamp[c] * e + P.tr[o + c];\n  }\n  // A glass bead gathers the lamp into a spot of its colour in its shadow.\n  if (g > 0.01)\n    for (let i = 0; i \u003c n; i++) {\n      const [sx, sy] = sh[i], rc = P.r[i] * 0.55, col = P.col[i];\n      for (let y = floor(sy - 3); y \u003c= sy + 3; y++)\n        for (let x = floor(sx - 3); x \u003c= sx + 3; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const q = ((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2) / (rc * rc), a = g * 0.75 * exp(-q) * (0.4 + 0.6 * P.pool[y * W + x]), o = (y * W + x) * 3;\n          for (let c = 0; c \u003c 3; c++) F[o + c] += col[c] * a;\n        }\n    }\n\n  // Strings: a fine line from the beam out to each bob, catching the lamp.\n  for (let i = 0; i \u003c n; i++) {\n    const x1 = P.x[i], y = floor(P.y[i]), a0 = min(BX, x1), a1 = max(BX, x1);\n    for (let x = floor(a0); x \u003c a1; x++) {\n      if (x \u003c 0 || x >= W) continue;\n      const o = (y * W + x) * 3, a = 0.5 * cl(min(x + 1 - a0, a1 - x), 0, 1);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], lamp[c] * 0.5, a);\n    }\n  }\n  // The bobs, the higher ones last.\n  for (let i = 0; i \u003c n; i++) ball(F, P.x[i], P.y[i], P.z[i], P.r[i], P.col[i], lamp, g, P.tint);\n\n  // The release board, a strip of pale wood that holds the row straight.\n  if (P.board > 0.01) {\n    const bx = BX + AMP + 3.2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = floor(bx); x \u003c bx + 2 && x \u003c W; x++) {\n        const o = (y * W + x) * 3, v = x === floor(bx) ? 0.85 : 0.55;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [224, 186, 132][c] * (lamp[c] / 255) * v, P.board);\n      }\n  }\n\n  // The beam over everything: brushed metal, its lamp side bright, with a\n  // clamp at every pivot.\n  for (let y = 0; y \u003c H; y++) {\n    const grain = 0.92 + 0.08 * hash(y, 7);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = (x \u003c BX ? 0.5 : 0.24) * grain;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    const y = floor(P.y[i]);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = x \u003c BX ? 0.78 : 0.4;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-pendulum-wave","type":"code","name":"pendulum-wave","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pendulum Wave\n// Family:  physics\n// Idea:    Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the pendulum wave demonstration of the Harvard Natural Sciences Lecture Demonstrations, fifteen pendulums tuned to 51 to 65 swings a minute\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1\n//\n// Knob 1: Finish. The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow.\n// Knob 2: Speed. The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again.\n// Knob 3: Pendulums. How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22.\n// Knob 4: Trails. A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them.\n// Buttons: K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, cos, sqrt, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// The beam's centre line (it covers columns 30 and 31) and the swing.\nconst BX = 31;\nconst AMP = 22;\n// One cycle at Speed 2, in seconds, and how many times the longest\n// pendulum swings in it; each shorter one swings once more.\nconst TC = 28;\nconst N0 = 22;\n// The lamp, off the left edge, and the beam's height over the table, in\n// LEDs. The longest string is 13 LEDs, so its bob hangs 4 over the table.\nconst [LX, LY, LZ] = [-34, 58, 120];\nconst ZB = 17;\nconst L0 = 13;\nconst MAXN = 24;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The lamp's colour, and the metal, at Finish 0, 1/4, 1/2 and 3/4 and on.\nconst LAMPS = [\n  [184, 206, 248],\n  [255, 214, 160],\n  [255, 192, 142],\n  [238, 236, 226],\n  [238, 236, 226],\n];\nconst METALS = [\n  [196, 208, 226],\n  [236, 172, 72],\n  [240, 122, 74],\n  [240, 122, 74],\n  [240, 122, 74],\n];\nconst stop = (T, f) => {\n  const u = cl(f, 0, 1) * 4, i = min(3, floor(u));\n  return T[i].map((v, c) => mix(v, T[i + 1][c], u - i));\n};\n\n// The table: walnut boards running along the beam, and a pale epoxy bench.\n// The lamp's pool on it never moves, so it is worked out once.\nfunction build(P) {\n  const seams = [11, 37, 58];\n  const ax = 14 - LX, ay = 62 - LY, az = -LZ, al = sqrt(ax * ax + ay * ay + az * az);\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    let pk = 0;\n    for (const s of seams) if (x >= s) pk++;\n    const sx = x + pk * 17.3, warp = 2.2 * vn(sx * 0.12, y * 0.018 + pk * 7);\n    const grain = vn(sx * 0.62 + warp, y * 0.04 + pk * 13), fine = vn(sx * 1.9, y * 0.22 + pk * 5);\n    const k = (0.74 + 0.36 * grain + 0.12 * fine) * (seams.includes(x) ? 0.6 : 1) * (0.88 + 0.24 * hash(pk, 99));\n    P.wood[i * 3] = 0.76 * k;\n    P.wood[i * 3 + 1] = 0.37 * k;\n    P.wood[i * 3 + 2] = 0.16 * k;\n    const b = 0.95 + 0.05 * hash(x, y + 300) + 0.05 * vn(x * 0.25, y * 0.25);\n    P.bench[i * 3] = 0.8 * b;\n    P.bench[i * 3 + 1] = 0.84 * b;\n    P.bench[i * 3 + 2] = 0.8 * b;\n    // Inverse square and the floor's slant, inside the shade's cone.\n    const vx = x + 0.5 - LX, vy = y + 0.5 - LY, d = sqrt(vx * vx + vy * vy + LZ * LZ);\n    const ca = (vx * ax + vy * ay + LZ * -az) / (d * al);\n    const p = (LZ / d) ** 3 * (0.25 + 0.75 * sm(0.83, 0.97, ca));\n    P.pool[i] = p;\n    top = max(top, p);\n    // The beam's shadow: it lies level, so its shadow is a straight band.\n    const bx = LX + (BX - LX) * (LZ / (LZ - ZB)), hw = LZ / (LZ - ZB);\n    P.beamD[i] = 0.5 * (1 - sm(hw - 0.9, hw + 0.9, Math.abs(x + 0.5 - bx)));\n  }\n  for (let i = 0; i \u003c N; i++) P.pool[i] /= top;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    wood: F(N * 3), bench: F(N * 3), pool: F(N), beamD: F(N), D: F(N), tr: F(N * 3), f: F(N * 3),\n    x: F(MAXN), prev: F(MAXN), from: F(MAXN), y: F(MAXN), z: F(MAXN), r: F(MAXN),\n    c: 0, n: 0, hold: 0.3, board: 1, fin: 0, tau: 0.05, first: true,\n  };\n  params.s.from.fill(BX + AMP);\n  build(params.s);\n}\n\n// Where each pendulum hangs, how high its bob is and how big it looks.\nfunction layout(P, n) {\n  P.n = n;\n  const s = H / n, rb = min(2.35, 0.31 * s);\n  for (let i = 0; i \u003c MAXN; i++) {\n    P.y[i] = floor(s / 2 + s * i) + 0.5;\n    // A string's length goes as the square of its period.\n    P.z[i] = ZB - L0 * (N0 / (N0 + i)) ** 2;\n    P.r[i] = rb * (0.93 + 0.022 * P.z[i]);\n  }\n}\n\n// The colours the finish gives the lamp and each bob.\nfunction colours(P) {\n  const f = P.fin, n = P.n;\n  P.lamp = stop(LAMPS, f);\n  P.glass = sm(0.52, 0.74, f);\n  P.benchK = sm(0.5, 0.74, f);\n  // Brass and copper tint their own highlights; steel and glass do not.\n  P.tint = (0.15 + 0.7 * sm(0, 0.25, f)) * (1 - P.glass);\n  const m = stop(METALS, f), u = sm(0.75, 1, f);\n  P.col = [];\n  // Sea-green glass at 3/4, opening into a rainbow down the row at 1.\n  for (let i = 0; i \u003c n; i++) {\n    const b = hsv(mix(0.42, 0.02 + (0.8 * i) / (n - 1), u), 0.82, 1);\n    P.col.push(m.map((v, c) => mix(v, b[c], P.glass)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const real = cl(dt || 0, 0, 0.1), d = (real * cl(k[1], 0.2, 3)) / 2;\n  P.fin = cl(k[0], 0, 1);\n  P.tau = 0.05 + 0.3 * cl(k[3], 0, 1) ** 1.6;\n  const n = cl(round(k[2]), 16, 24);\n  if (n !== P.n) layout(P, n);\n  colours(P);\n\n  // The button: a board comes in, every bob is caught against it, and all\n  // are let go at once.\n  if (input.btnPressed && input.btnPressed[0] && P.hold \u003c 0) {\n    P.hold = 0;\n    P.from.set(P.x);\n  }\n  if (P.hold >= 0) {\n    P.hold += real;\n    const e = sm(0.05, 0.6, P.hold);\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = mix(P.from[i], BX + AMP, e);\n    P.board = sm(0, 0.35, P.hold);\n    if (P.hold >= 0.95) (P.hold = -1), (P.c = 0);\n  } else {\n    P.c = (P.c + d) % TC;\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = BX + AMP * cos((2 * PI * (N0 + i) * P.c) / TC);\n    P.board = max(0, P.board - real * 5);\n  }\n  if (P.first) (P.first = false), P.prev.set(P.x);\n\n  // The long exposure fades in the pendulums' own time, so a trail is as\n  // long on the table at any speed. Each bob paints the way it came this\n  // frame, older parts dimmer.\n  const tr = P.tr, fade = exp(-d / P.tau), span = max(d, 0.004);\n  for (let i = 0; i \u003c tr.length; i++) tr[i] *= fade;\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = P.prev[i], x1 = P.x[i], y = P.y[i], rt = P.r[i] * 0.8, steps = max(1, ceil(Math.abs(x1 - x0) / 0.6));\n    const col = P.col[i].map((v, c) => (v * 0.55 + P.lamp[c] * 0.25) * 0.85);\n    for (let s = 1; s \u003c= steps; s++) {\n      const t = s / steps, xs = mix(x0, x1, t), lev = exp((-(1 - t) * span) / P.tau);\n      for (let yy = floor(y - rt - 1); yy \u003c= y + rt + 1; yy++)\n        for (let xx = floor(xs - rt - 1); xx \u003c= xs + rt + 1; xx++) {\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const dx = xx + 0.5 - xs, dy = yy + 0.5 - y, q = (dx * dx + dy * dy) / (rt * rt);\n          if (q >= 1.6) continue;\n          const a = lev * exp(-1.6 * q), o = (yy * W + xx) * 3;\n          for (let c = 0; c \u003c 3; c++) tr[o + c] = max(tr[o + c], col[c] * a);\n        }\n    }\n  }\n  P.prev.set(P.x);\n}\n\n// Where the lamp throws a point at height z onto the table.\nconst proj = (x, y, z) => {\n  const k = LZ / (LZ - z);\n  return [LX + (x - LX) * k, LY + (y - LY) * k];\n};\n\n// A shiny ball, sampled two by two inside each LED.\nfunction ball(F, cx, cy, cz, r, base, lamp, g, tint) {\n  const sc = lamp.map((v, c) => v * mix(1, (base[c] / 255) * 1.15, tint));\n  // The light leans twice as far as the lamp really stands, so the glint\n  // sits clearly on the lamp's side of a ball five LEDs across.\n  let lx = 2 * (LX - cx), ly = 2 * (LY - cy), lz = LZ - cz;\n  const ll = sqrt(lx * lx + ly * ly + lz * lz);\n  (lx /= ll), (ly /= ll), (lz /= ll);\n  let hx = lx, hy = ly, hz = lz + 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  (hx /= hl), (hy /= hl), (hz /= hl);\n  const lxy = sqrt(lx * lx + ly * ly) || 1;\n  const col = [0, 0, 0];\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      let cov = 0;\n      col[0] = col[1] = col[2] = 0;\n      for (let sy = 0; sy \u003c 2; sy++)\n        for (let sx = 0; sx \u003c 2; sx++) {\n          const dx = (x + 0.25 + 0.5 * sx - cx) / r, dy = (y + 0.25 + 0.5 * sy - cy) / r, q = dx * dx + dy * dy;\n          if (q >= 1) continue;\n          cov += 0.25;\n          const nz = sqrt(1 - q), diff = max(0, dx * lx + dy * ly + nz * lz), nh = max(0, dx * hx + dy * hy + nz * hz), spec = nh ** 18, sheen = nh ** 3;\n          // Metal: the lamp's side lit, the rim holding the dark table.\n          const rim = 0.4 + 0.6 * nz, back = max(0, -(dx * lx + dy * ly) / lxy) * sqrt(q);\n          for (let c = 0; c \u003c 3; c++) {\n            const m = base[c] * (0.1 + 0.85 * diff * sqrt(diff)) * rim, gl = base[c] * (0.3 + 0.25 * diff + 0.9 * back);\n            col[c] += (mix(m, gl, g) + sc[c] * (spec * 1.6 + 0.12 * sheen)) * 0.25;\n          }\n        }\n      if (cov \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = F[o + c] * (1 - cov) + col[c];\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const F = P.f, D = P.D, n = P.n, lamp = P.lamp, g = P.glass, bk = P.benchK;\n\n  // Shadows on the table: the beam, each string and each bob. A bob higher\n  // up throws its shadow further from the lamp and softer.\n  D.set(P.beamD);\n  const sh = [];\n  for (let i = 0; i \u003c n; i++) {\n    const [sx, sy] = proj(P.x[i], P.y[i], P.z[i]), [px, py] = proj(BX, P.y[i], ZB);\n    sh.push([sx, sy]);\n    const rs = P.r[i] * 0.95, pen = 0.45 + 0.09 * P.z[i], dk = (0.9 - 0.02 * P.z[i]) * (1 - 0.15 * g);\n    for (let y = floor(sy - rs - pen - 1); y \u003c= sy + rs + pen + 1; y++)\n      for (let x = floor(sx - rs - pen - 1); x \u003c= sx + rs + pen + 1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const dd = sqrt((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2), v = dk * (1 - sm(rs - pen, rs + pen, dd)), j = y * W + x;\n        if (v > D[j]) D[j] = v;\n      }\n    const len = sqrt((sx - px) ** 2 + (sy - py) ** 2), m = ceil(len * 1.5);\n    for (let s = 0; s \u003c= m; s++) {\n      const t = s / max(1, m), x = floor(mix(px, sx, t)), y = floor(mix(py, sy, t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && D[y * W + x] \u003c 0.2) D[y * W + x] = 0.2;\n    }\n  }\n\n  // The table under the lamp.\n  const fl = 0.42;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const e = (0.1 + 0.9 * P.pool[i] * (1 - D[i])) * fl;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(P.wood[o + c], P.bench[o + c], bk) * lamp[c] * e + P.tr[o + c];\n  }\n  // A glass bead gathers the lamp into a spot of its colour in its shadow.\n  if (g > 0.01)\n    for (let i = 0; i \u003c n; i++) {\n      const [sx, sy] = sh[i], rc = P.r[i] * 0.55, col = P.col[i];\n      for (let y = floor(sy - 3); y \u003c= sy + 3; y++)\n        for (let x = floor(sx - 3); x \u003c= sx + 3; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const q = ((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2) / (rc * rc), a = g * 0.75 * exp(-q) * (0.4 + 0.6 * P.pool[y * W + x]), o = (y * W + x) * 3;\n          for (let c = 0; c \u003c 3; c++) F[o + c] += col[c] * a;\n        }\n    }\n\n  // Strings: a fine line from the beam out to each bob, catching the lamp.\n  for (let i = 0; i \u003c n; i++) {\n    const x1 = P.x[i], y = floor(P.y[i]), a0 = min(BX, x1), a1 = max(BX, x1);\n    for (let x = floor(a0); x \u003c a1; x++) {\n      if (x \u003c 0 || x >= W) continue;\n      const o = (y * W + x) * 3, a = 0.5 * cl(min(x + 1 - a0, a1 - x), 0, 1);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], lamp[c] * 0.5, a);\n    }\n  }\n  // The bobs, the higher ones last.\n  for (let i = 0; i \u003c n; i++) ball(F, P.x[i], P.y[i], P.z[i], P.r[i], P.col[i], lamp, g, P.tint);\n\n  // The release board, a strip of pale wood that holds the row straight.\n  if (P.board > 0.01) {\n    const bx = BX + AMP + 3.2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = floor(bx); x \u003c bx + 2 && x \u003c W; x++) {\n        const o = (y * W + x) * 3, v = x === floor(bx) ? 0.85 : 0.55;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [224, 186, 132][c] * (lamp[c] / 255) * v, P.board);\n      }\n  }\n\n  // The beam over everything: brushed metal, its lamp side bright, with a\n  // clamp at every pivot.\n  for (let y = 0; y \u003c H; y++) {\n    const grain = 0.92 + 0.08 * hash(y, 7);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = (x \u003c BX ? 0.5 : 0.24) * grain;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    const y = floor(P.y[i]);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = x \u003c BX ? 0.78 : 0.4;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Finish","min":0,"max":1,"about":"The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again."},{"name":"Pendulums","min":16,"max":24,"about":"How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22."},{"name":"Trails","min":0,"max":1,"about":"A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them."}],"start":[0,2,16,0.06],"measures":{"motion":0.7632,"detail":0.0304,"edges":0.1868,"complexity":1.4841,"coverage":0.886,"colour":0.0797,"drift":0.0334},"knobResponse":[0.1242,0.0438,0.0523,0.0491]},{"slug":"penrose","title":"Penrose","family":"geometry","round":25,"note":"굵은 마름모와 가는 마름모의 펜로즈 타일링이 다섯 겹 대칭의 가운데로 끝없이 들어가요. 가운데서 꽃잎 다섯 장 꼴로 열리는 빛의 고리가 지나가면 타일이 황금비만큼 작은 타일로 나뉘고, 굵은 마름모 다섯이 모인 별은 금색이에요. Glow 를 올리면 유리가 어두워져 고리 뒤만 밝고, K1 을 누르면 연과 화살(P2)로 바뀌어요.","idea":"A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.","buttons":"K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.","code":"// ===== Patternflow pattern =====\n// Title:   Penrose\n// Family:  geometry\n// Idea:    A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after Roger Penrose's rhomb tiling (P3) and Raphael Robinson's golden triangles\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1\n//\n// Knob 1: Hue. Turns all the tile colours round the colour wheel together.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute.\n// Knob 3: Size. The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them.\n// Knob 4: Glow. How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring.\n// Buttons: K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.\n\n// The centre sits on an LED column, so the edges along the five-fold axis\n// draw as one dark LED rather than two grey ones.\nconst W = 64, H = 128, N = W * H, CX = 31.5, CY = 64;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, round, hypot, PI } = Math;\nconst PHI = (1 + sqrt(5)) / 2;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The smallest Size, how far the splitting ring runs in one level, the reach\n// of its five petals and how many levels lie between the seed and the tiles.\nconst EMIN = 7, RHO = 130, PET = 0.12, DEEP = 6;\n\n// Robinson's golden triangles. A triangle [kind, A, B, C, parent] is half a\n// tile: AB and AC are tile edges, BC runs through the middle of the tile.\n// Kind 0 is the sharp one (36-72-72), kind 1 the blunt one (108-36-36).\n// Rhombs (P3) and kites and darts (P2) split them by different rules.\nfunction split(fam, T, out, idx, R) {\n  const put = (k, ax, ay, bx, by, cx, cy) => {\n    if (reach(ax, ay, bx, by, cx, cy) \u003c R) out.push([k, ax, ay, bx, by, cx, cy, idx]);\n  };\n  const [k, ax, ay, bx, by, cx, cy] = T;\n  const g = (p, q) => p + (q - p) / PHI;\n  if (fam === 0) {\n    if (k === 0) {\n      const px = g(ax, bx), py = g(ay, by);\n      put(0, cx, cy, px, py, bx, by);\n      put(1, px, py, cx, cy, ax, ay);\n    } else {\n      const qx = g(bx, ax), qy = g(by, ay), rx = g(bx, cx), ry = g(by, cy);\n      put(1, rx, ry, cx, cy, ax, ay);\n      put(1, qx, qy, rx, ry, bx, by);\n      put(0, rx, ry, qx, qy, ax, ay);\n    }\n  } else if (k === 0) {\n    const qx = g(ax, bx), qy = g(ay, by), rx = g(bx, cx), ry = g(by, cy);\n    put(1, rx, ry, qx, qy, bx, by);\n    put(0, qx, qy, ax, ay, rx, ry);\n    put(0, cx, cy, ax, ay, rx, ry);\n  } else {\n    const px = g(cx, ax), py = g(cy, ay);\n    put(1, bx, by, px, py, ax, ay);\n    put(0, px, py, cx, cy, bx, by);\n  }\n}\n\n// How far the origin is from a triangle.\nfunction seg(ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay, t = cl(-(ax * dx + ay * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(ax + t * dx, ay + t * dy);\n}\nfunction reach(ax, ay, bx, by, cx, cy) {\n  const s1 = ax * by - ay * bx, s2 = bx * cy - by * cx, s3 = cx * ay - cy * ax;\n  if ((s1 >= 0 && s2 >= 0 && s3 >= 0) || (s1 \u003c= 0 && s2 \u003c= 0 && s3 \u003c= 0)) return 0;\n  return min(seg(ax, ay, bx, by), seg(bx, by, cx, cy), seg(cx, cy, ax, ay));\n}\n\n// One tiling, three levels deep. Level 0 has tile edge 1; levels 1 and 2 are\n// it split once and twice. Level 2 blown up by phi squared and turned 36\n// degrees is level 0 again, which is what lets the zoom run for ever. The\n// rhombs grow from a star of five fat rhombs, kites and darts from a sun of\n// five kites; both come back to themselves every second split. Each level\n// reaches just past the corners of the panel at the smallest Size.\nfunction build(fam, scale) {\n  const s = EMIN * scale, R = [75 / s + 3, 75 / s + 2, 75 / (s * PHI) + 1.5];\n  let T = [];\n  for (let i = 0; i \u003c 10; i++) {\n    const a = -PI / 2 + ((2 * PI) / 5) * (i >> 1), b = a + (i & 1 ? PI : -PI) / 5, L = PHI ** DEEP;\n    if (fam === 0) T.push([1, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L * PHI, sin(a) * L * PHI, 0]);\n    else T.push([0, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L, sin(a) * L, 0]);\n  }\n  const levels = [];\n  for (let d = 0; d \u003c DEEP + 2; d++) {\n    const out = [];\n    T.forEach((t, i) => split(fam, t, out, i, R[max(0, d - DEEP + 1)]));\n    T = out;\n    if (d >= DEEP - 1) levels.push(T);\n  }\n  return levels;\n}\n\n// Every corner where tiles meet is one of seven kinds; for kites and darts\n// Conway named them sun, star, ace, deuce, jack, queen and king. A tile's\n// colour class comes from its kind and the kinds of its four corners: ten\n// classes of rhomb, eight of kite and dart.\nconst vkey = (x, y) => round(x * 4096) * 1048576 + round(y * 4096);\n// The angle at A, B and C in tenths of a turn, sharp then blunt, per tiling.\nconst ANG = [\n  [1, 2, 2, 3, 1, 1],\n  [2, 1, 2, 1, 3, 1],\n];\nfunction classify(fam, levels) {\n  const an = ANG[fam];\n  const maps = levels.map((L) => {\n    const V = new Map();\n    const add = (x, y, slot) => {\n      const k = vkey(x, y);\n      let c = V.get(k);\n      if (!c) V.set(k, (c = new Array(16).fill(0)));\n      c[slot]++;\n    };\n    for (const [k, ax, ay, bx, by, cx, cy] of L) {\n      add(ax, ay, k * 8 + an[k * 3]);\n      add(bx, by, k * 8 + 4 + an[k * 3 + 1]);\n      add(cx, cy, k * 8 + 4 + an[k * 3 + 2]);\n    }\n    // A corner cut off at the edge of the patch does not close to 360 degrees.\n    for (const [k, c] of V) V.set(k, c.reduce((s, n, i) => s + n * (i & 3), 0) === 10 ? c.join(\" \") : \"x\");\n    return V;\n  });\n  const vnames = [...new Set(maps.flatMap((V) => [...V.values()]))].sort(), X = vnames.indexOf(\"x\");\n  const id = new Map(vnames.map((n, i) => [n, i]));\n  const codes = levels.map((L, j) => {\n    const V = maps[j], vt = (x, y) => id.get(V.get(vkey(x, y))), mid = new Map();\n    L.forEach((t, i) => {\n      const k = vkey(t[3] + t[5], t[4] + t[6]);\n      mid.set(k, mid.has(k) ? [mid.get(k)[0], i] : [i]);\n    });\n    return L.map((t, i) => {\n      const pair = mid.get(vkey(t[3] + t[5], t[4] + t[6])), o = L[pair[0] === i ? pair[1] ?? i : pair[0]];\n      const a0 = vt(t[1], t[2]), a1 = vt(o[1], o[2]), b0 = vt(t[3], t[4]), b1 = vt(t[5], t[6]);\n      if (a0 === X || a1 === X || b0 === X || b1 === X) return t[0] * 4096;\n      return t[0] * 4096 + min(a0, a1) * 512 + max(a0, a1) * 64 + min(b0, b1) * 8 + max(b0, b1);\n    });\n  });\n  const names = [...new Set(codes.flat())].sort((p, q) => p - q), cls = new Map(names.map((n, i) => [n, i]));\n  return codes.map((L) => L.map((n) => cls.get(n)));\n}\n\n// Packed for drawing: corners, colour class, parent, and the tile's middle as\n// its distance from the centre (pulled in along five petals) and how far the\n// triangle can reach past it.\nconst petal = (x, y, r) => (r > 1e-6 ? (5 * x ** 4 * y - 10 * x * x * y ** 3 + y ** 5) / r ** 5 : 0);\nfunction pack(levels, cls) {\n  return levels.map((L, j) => {\n    const n = L.length, P = { n, xy: new Float32Array(n * 6), cls: new Uint8Array(cls[j]), par: new Int32Array(n), rq: new Float32Array(n), near: new Float32Array(n), age: new Float32Array(n) };\n    L.forEach((t, i) => {\n      for (let q = 0; q \u003c 6; q++) P.xy[i * 6 + q] = t[q + 1];\n      P.par[i] = t[7];\n      // The middle of BC is the middle of the whole tile, so both halves of\n      // a tile split together.\n      const mx = (t[3] + t[5]) / 2, my = (t[4] + t[6]) / 2, r = hypot(mx, my);\n      P.rq[i] = r * (1 + PET * petal(mx, my, r));\n      P.near[i] = r - max(hypot(t[1] - mx, t[2] - my), hypot(t[3] - mx, t[4] - my));\n    });\n    return P;\n  });\n}\n\n// P2 is drawn half a level larger so the two tilings show tiles of about the\n// same area.\nconst SCALE = [1, sqrt(PHI)];\nconst FAM = [0, 1].map((f) => {\n  const levels = build(f, SCALE[f]);\n  return pack(levels, classify(f, levels));\n});\n\n// Hue offset, saturation and brightness of each colour class, in class order:\n// the sharp kind first (thin rhombs, kites), then the blunt kind (fat rhombs,\n// darts), each led by a fallback for tiles cut off at the edge of the patch,\n// which never reach the panel. Fat rhombs round a five-pointed star and the\n// darts of a star are gold.\nconst PAL = [\n  [\n    [0.6, 0.8, 0.75],\n    [0.5, 0.85, 0.85],\n    [0.42, 0.7, 0.95],\n    [0.63, 0.85, 0.85],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.15, 0.85, 1],\n    [0.88, 0.75, 0.9],\n    [0.76, 0.8, 0.75],\n    [0.98, 0.8, 0.9],\n    [0.1, 0.89, 1],\n    [0.33, 0.8, 0.8],\n  ],\n  [\n    [0.55, 0.8, 0.8],\n    [0.5, 0.85, 0.85],\n    [0.36, 0.75, 0.85],\n    [0.62, 0.85, 0.85],\n    [0.45, 0.75, 0.95],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.9, 0.75, 0.9],\n    [0.02, 0.8, 0.95],\n    [0.78, 0.8, 0.8],\n  ],\n];\nconst GLOW = [255, 226, 150];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Each LED's distance from the centre, pulled in along five petals: the\n// regrouping ring after a K1 tap opens along it.\nconst RR = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const x = (p % W) + 0.5 - CX, y = floor(p / W) + 0.5 - CY, r = hypot(x, y);\n  RR[p] = r * (1 + PET * petal(x, y, r));\n}\n\nexport function setup(params) {\n  params.s = { Z: 0, rot: 0, fam: 0, to: -1, rm: 0, hue: 0, e: EMIN, glow: 0.06, buf: new Float32Array(N * 3), col: new Float32Array(16 * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.e = cl(k[2], EMIN, 15);\n  P.glow = cl(k[3], 0, 1);\n  // Two levels of zoom, phi squared, bring level 2 to where level 0 was, a\n  // tenth of a turn round.\n  P.Z += d * cl(k[1], 0.2, 3) * 0.15;\n  if (P.Z >= 2) (P.Z -= 2), (P.rot = (P.rot + PI / 5) % (2 * PI));\n  if (P.to >= 0) {\n    P.rm += d * 45;\n    if (P.rm > 86) (P.fam = P.to), (P.to = -1);\n  } else if (input.btnPressed && input.btnPressed[0]) (P.to = 1 - P.fam), (P.rm = 0);\n}\n\n// One golden triangle onto the LEDs, colour (r, g, b) and line light gl.\n// Within LW of a tile edge an LED darkens into the 1-LED line between tiles;\n// mode 1 and 2 keep only the LEDs inside or outside the regrouping ring.\nconst LW = 0.72;\nfunction tri(P, xy, o, co, si, r, g, b, gl, mode) {\n  const ax = CX + co * xy[o] - si * xy[o + 1], ay = CY + si * xy[o] + co * xy[o + 1];\n  const bx = CX + co * xy[o + 2] - si * xy[o + 3], by = CY + si * xy[o + 2] + co * xy[o + 3];\n  const cx = CX + co * xy[o + 4] - si * xy[o + 5], cy = CY + si * xy[o + 4] + co * xy[o + 5];\n  const x0 = max(0, ceil(min(ax, bx, cx) - 0.5)), x1 = min(W - 1, floor(max(ax, bx, cx) - 0.5));\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(H - 1, floor(max(ay, by, cy) - 0.5));\n  if (x0 > x1 || y0 > y1) return;\n  const sg = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax) > 0 ? 1 : -1, buf = P.buf;\n  // Signed distances to AB, BC and CA as a*X + b*Y + c, positive inside.\n  const l1 = sg / hypot(bx - ax, by - ay), l2 = sg / hypot(cx - bx, cy - by), l3 = sg / hypot(ax - cx, ay - cy);\n  const a1 = (ay - by) * l1, b1 = (bx - ax) * l1, c1 = ((by - ay) * ax - (bx - ax) * ay) * l1;\n  const a2 = (by - cy) * l2, b2 = (cx - bx) * l2, c2 = ((cy - by) * bx - (cx - bx) * by) * l2;\n  const a3 = (cy - ay) * l3, b3 = (ax - cx) * l3, c3 = ((ay - cy) * cx - (ax - cx) * cy) * l3;\n  for (let y = y0; y \u003c= y1; y++) {\n    const Y = y + 0.5, X = x0 + 0.5;\n    let d1 = a1 * X + b1 * Y + c1, d2 = a2 * X + b2 * Y + c2, d3 = a3 * X + b3 * Y + c3;\n    for (let x = x0, p = y * W + x0; x \u003c= x1; x++, p++, d1 += a1, d2 += a2, d3 += a3) {\n      if (d1 \u003c -0.001 || d2 \u003c -0.001 || d3 \u003c -0.001 || (mode && (RR[p] \u003c P.rm) !== (mode === 1))) continue;\n      // The line's light keeps to its core, so a small tile behind the ring\n      // keeps its colour.\n      const w = cl((LW - min(d1, d3)) * 2.2, 0, 1), m = 1 - 0.93 * w, v = w * w * gl, q = p * 3;\n      buf[q] = r * m + (GLOW[0] - r * m) * v;\n      buf[q + 1] = g * m + (GLOW[1] - g * m) * v;\n      buf[q + 2] = b * m + (GLOW[2] - b * m) * v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const h = P.Z >= 1 ? 1 : 0, rho = (P.Z - h) * RHO, buf = P.buf, col = P.col, dim = 1 - 0.65 * P.glow;\n  buf.fill(0);\n  const jobs = P.to \u003c 0 ? [[P.fam, 0]] : [[P.fam, 2], [P.to, 1]];\n  for (const [fi, mode] of jobs) {\n    const S = P.e * PHI ** P.Z * SCALE[fi], co = cos(P.rot) * S, si = sin(P.rot) * S, lim = 73 / S;\n    const Lc = FAM[fi][h], Lf = FAM[fi][h + 1], pal = PAL[fi];\n    for (let c = 0; c \u003c pal.length; c++) hsv(P.hue + pal[c][0], pal[c][1], pal[c][2], col, c * 3);\n    // A tile splits once the ring has passed its middle. The ring runs RHO\n    // LEDs a level, well past the corners, so every tile on show has split\n    // and its light has died before the next level begins.\n    for (let i = 0; i \u003c Lc.n; i++) {\n      const a = (Lc.age[i] = rho - S * Lc.rq[i]);\n      if (a > 0 || Lc.near[i] > lim) continue;\n      const c = Lc.cls[i] * 3;\n      tri(P, Lc.xy, i * 6, co, si, col[c] * dim, col[c + 1] * dim, col[c + 2] * dim, 0, mode);\n    }\n    // Behind the ring the new edges flash, and the glass lights up and fades\n    // back down to what Glow leaves it.\n    for (let j = 0; j \u003c Lf.n; j++) {\n      const a = Lc.age[Lf.par[j]];\n      if (a \u003c= 0 || Lf.near[j] > lim) continue;\n      const c = Lf.cls[j] * 3, lit = dim + (1 - dim) * exp(-a / 10), fl = 0.3 * P.glow * exp(-a / 5);\n      const r = col[c] * lit, g = col[c + 1] * lit, b = col[c + 2] * lit;\n      tri(P, Lf.xy, j * 6, co, si, r + (255 - r) * fl, g + (255 - g) * fl, b + (255 - b) * fl, exp(-a / 2.5), mode);\n    }\n  }\n  // The regrouping ring itself, a line of light.\n  if (P.to >= 0)\n    for (let p = 0; p \u003c N; p++) {\n      const w = 1 - abs(RR[p] - P.rm) / 1.6;\n      if (w > 0) for (let q = 0; q \u003c 3; q++) buf[p * 3 + q] += (GLOW[q] - buf[p * 3 + q]) * w * 0.85;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-penrose","type":"code","name":"penrose","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Penrose\n// Family:  geometry\n// Idea:    A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after Roger Penrose's rhomb tiling (P3) and Raphael Robinson's golden triangles\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1\n//\n// Knob 1: Hue. Turns all the tile colours round the colour wheel together.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute.\n// Knob 3: Size. The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them.\n// Knob 4: Glow. How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring.\n// Buttons: K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.\n\n// The centre sits on an LED column, so the edges along the five-fold axis\n// draw as one dark LED rather than two grey ones.\nconst W = 64, H = 128, N = W * H, CX = 31.5, CY = 64;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, round, hypot, PI } = Math;\nconst PHI = (1 + sqrt(5)) / 2;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The smallest Size, how far the splitting ring runs in one level, the reach\n// of its five petals and how many levels lie between the seed and the tiles.\nconst EMIN = 7, RHO = 130, PET = 0.12, DEEP = 6;\n\n// Robinson's golden triangles. A triangle [kind, A, B, C, parent] is half a\n// tile: AB and AC are tile edges, BC runs through the middle of the tile.\n// Kind 0 is the sharp one (36-72-72), kind 1 the blunt one (108-36-36).\n// Rhombs (P3) and kites and darts (P2) split them by different rules.\nfunction split(fam, T, out, idx, R) {\n  const put = (k, ax, ay, bx, by, cx, cy) => {\n    if (reach(ax, ay, bx, by, cx, cy) \u003c R) out.push([k, ax, ay, bx, by, cx, cy, idx]);\n  };\n  const [k, ax, ay, bx, by, cx, cy] = T;\n  const g = (p, q) => p + (q - p) / PHI;\n  if (fam === 0) {\n    if (k === 0) {\n      const px = g(ax, bx), py = g(ay, by);\n      put(0, cx, cy, px, py, bx, by);\n      put(1, px, py, cx, cy, ax, ay);\n    } else {\n      const qx = g(bx, ax), qy = g(by, ay), rx = g(bx, cx), ry = g(by, cy);\n      put(1, rx, ry, cx, cy, ax, ay);\n      put(1, qx, qy, rx, ry, bx, by);\n      put(0, rx, ry, qx, qy, ax, ay);\n    }\n  } else if (k === 0) {\n    const qx = g(ax, bx), qy = g(ay, by), rx = g(bx, cx), ry = g(by, cy);\n    put(1, rx, ry, qx, qy, bx, by);\n    put(0, qx, qy, ax, ay, rx, ry);\n    put(0, cx, cy, ax, ay, rx, ry);\n  } else {\n    const px = g(cx, ax), py = g(cy, ay);\n    put(1, bx, by, px, py, ax, ay);\n    put(0, px, py, cx, cy, bx, by);\n  }\n}\n\n// How far the origin is from a triangle.\nfunction seg(ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay, t = cl(-(ax * dx + ay * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(ax + t * dx, ay + t * dy);\n}\nfunction reach(ax, ay, bx, by, cx, cy) {\n  const s1 = ax * by - ay * bx, s2 = bx * cy - by * cx, s3 = cx * ay - cy * ax;\n  if ((s1 >= 0 && s2 >= 0 && s3 >= 0) || (s1 \u003c= 0 && s2 \u003c= 0 && s3 \u003c= 0)) return 0;\n  return min(seg(ax, ay, bx, by), seg(bx, by, cx, cy), seg(cx, cy, ax, ay));\n}\n\n// One tiling, three levels deep. Level 0 has tile edge 1; levels 1 and 2 are\n// it split once and twice. Level 2 blown up by phi squared and turned 36\n// degrees is level 0 again, which is what lets the zoom run for ever. The\n// rhombs grow from a star of five fat rhombs, kites and darts from a sun of\n// five kites; both come back to themselves every second split. Each level\n// reaches just past the corners of the panel at the smallest Size.\nfunction build(fam, scale) {\n  const s = EMIN * scale, R = [75 / s + 3, 75 / s + 2, 75 / (s * PHI) + 1.5];\n  let T = [];\n  for (let i = 0; i \u003c 10; i++) {\n    const a = -PI / 2 + ((2 * PI) / 5) * (i >> 1), b = a + (i & 1 ? PI : -PI) / 5, L = PHI ** DEEP;\n    if (fam === 0) T.push([1, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L * PHI, sin(a) * L * PHI, 0]);\n    else T.push([0, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L, sin(a) * L, 0]);\n  }\n  const levels = [];\n  for (let d = 0; d \u003c DEEP + 2; d++) {\n    const out = [];\n    T.forEach((t, i) => split(fam, t, out, i, R[max(0, d - DEEP + 1)]));\n    T = out;\n    if (d >= DEEP - 1) levels.push(T);\n  }\n  return levels;\n}\n\n// Every corner where tiles meet is one of seven kinds; for kites and darts\n// Conway named them sun, star, ace, deuce, jack, queen and king. A tile's\n// colour class comes from its kind and the kinds of its four corners: ten\n// classes of rhomb, eight of kite and dart.\nconst vkey = (x, y) => round(x * 4096) * 1048576 + round(y * 4096);\n// The angle at A, B and C in tenths of a turn, sharp then blunt, per tiling.\nconst ANG = [\n  [1, 2, 2, 3, 1, 1],\n  [2, 1, 2, 1, 3, 1],\n];\nfunction classify(fam, levels) {\n  const an = ANG[fam];\n  const maps = levels.map((L) => {\n    const V = new Map();\n    const add = (x, y, slot) => {\n      const k = vkey(x, y);\n      let c = V.get(k);\n      if (!c) V.set(k, (c = new Array(16).fill(0)));\n      c[slot]++;\n    };\n    for (const [k, ax, ay, bx, by, cx, cy] of L) {\n      add(ax, ay, k * 8 + an[k * 3]);\n      add(bx, by, k * 8 + 4 + an[k * 3 + 1]);\n      add(cx, cy, k * 8 + 4 + an[k * 3 + 2]);\n    }\n    // A corner cut off at the edge of the patch does not close to 360 degrees.\n    for (const [k, c] of V) V.set(k, c.reduce((s, n, i) => s + n * (i & 3), 0) === 10 ? c.join(\" \") : \"x\");\n    return V;\n  });\n  const vnames = [...new Set(maps.flatMap((V) => [...V.values()]))].sort(), X = vnames.indexOf(\"x\");\n  const id = new Map(vnames.map((n, i) => [n, i]));\n  const codes = levels.map((L, j) => {\n    const V = maps[j], vt = (x, y) => id.get(V.get(vkey(x, y))), mid = new Map();\n    L.forEach((t, i) => {\n      const k = vkey(t[3] + t[5], t[4] + t[6]);\n      mid.set(k, mid.has(k) ? [mid.get(k)[0], i] : [i]);\n    });\n    return L.map((t, i) => {\n      const pair = mid.get(vkey(t[3] + t[5], t[4] + t[6])), o = L[pair[0] === i ? pair[1] ?? i : pair[0]];\n      const a0 = vt(t[1], t[2]), a1 = vt(o[1], o[2]), b0 = vt(t[3], t[4]), b1 = vt(t[5], t[6]);\n      if (a0 === X || a1 === X || b0 === X || b1 === X) return t[0] * 4096;\n      return t[0] * 4096 + min(a0, a1) * 512 + max(a0, a1) * 64 + min(b0, b1) * 8 + max(b0, b1);\n    });\n  });\n  const names = [...new Set(codes.flat())].sort((p, q) => p - q), cls = new Map(names.map((n, i) => [n, i]));\n  return codes.map((L) => L.map((n) => cls.get(n)));\n}\n\n// Packed for drawing: corners, colour class, parent, and the tile's middle as\n// its distance from the centre (pulled in along five petals) and how far the\n// triangle can reach past it.\nconst petal = (x, y, r) => (r > 1e-6 ? (5 * x ** 4 * y - 10 * x * x * y ** 3 + y ** 5) / r ** 5 : 0);\nfunction pack(levels, cls) {\n  return levels.map((L, j) => {\n    const n = L.length, P = { n, xy: new Float32Array(n * 6), cls: new Uint8Array(cls[j]), par: new Int32Array(n), rq: new Float32Array(n), near: new Float32Array(n), age: new Float32Array(n) };\n    L.forEach((t, i) => {\n      for (let q = 0; q \u003c 6; q++) P.xy[i * 6 + q] = t[q + 1];\n      P.par[i] = t[7];\n      // The middle of BC is the middle of the whole tile, so both halves of\n      // a tile split together.\n      const mx = (t[3] + t[5]) / 2, my = (t[4] + t[6]) / 2, r = hypot(mx, my);\n      P.rq[i] = r * (1 + PET * petal(mx, my, r));\n      P.near[i] = r - max(hypot(t[1] - mx, t[2] - my), hypot(t[3] - mx, t[4] - my));\n    });\n    return P;\n  });\n}\n\n// P2 is drawn half a level larger so the two tilings show tiles of about the\n// same area.\nconst SCALE = [1, sqrt(PHI)];\nconst FAM = [0, 1].map((f) => {\n  const levels = build(f, SCALE[f]);\n  return pack(levels, classify(f, levels));\n});\n\n// Hue offset, saturation and brightness of each colour class, in class order:\n// the sharp kind first (thin rhombs, kites), then the blunt kind (fat rhombs,\n// darts), each led by a fallback for tiles cut off at the edge of the patch,\n// which never reach the panel. Fat rhombs round a five-pointed star and the\n// darts of a star are gold.\nconst PAL = [\n  [\n    [0.6, 0.8, 0.75],\n    [0.5, 0.85, 0.85],\n    [0.42, 0.7, 0.95],\n    [0.63, 0.85, 0.85],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.15, 0.85, 1],\n    [0.88, 0.75, 0.9],\n    [0.76, 0.8, 0.75],\n    [0.98, 0.8, 0.9],\n    [0.1, 0.89, 1],\n    [0.33, 0.8, 0.8],\n  ],\n  [\n    [0.55, 0.8, 0.8],\n    [0.5, 0.85, 0.85],\n    [0.36, 0.75, 0.85],\n    [0.62, 0.85, 0.85],\n    [0.45, 0.75, 0.95],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.9, 0.75, 0.9],\n    [0.02, 0.8, 0.95],\n    [0.78, 0.8, 0.8],\n  ],\n];\nconst GLOW = [255, 226, 150];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Each LED's distance from the centre, pulled in along five petals: the\n// regrouping ring after a K1 tap opens along it.\nconst RR = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const x = (p % W) + 0.5 - CX, y = floor(p / W) + 0.5 - CY, r = hypot(x, y);\n  RR[p] = r * (1 + PET * petal(x, y, r));\n}\n\nexport function setup(params) {\n  params.s = { Z: 0, rot: 0, fam: 0, to: -1, rm: 0, hue: 0, e: EMIN, glow: 0.06, buf: new Float32Array(N * 3), col: new Float32Array(16 * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.e = cl(k[2], EMIN, 15);\n  P.glow = cl(k[3], 0, 1);\n  // Two levels of zoom, phi squared, bring level 2 to where level 0 was, a\n  // tenth of a turn round.\n  P.Z += d * cl(k[1], 0.2, 3) * 0.15;\n  if (P.Z >= 2) (P.Z -= 2), (P.rot = (P.rot + PI / 5) % (2 * PI));\n  if (P.to >= 0) {\n    P.rm += d * 45;\n    if (P.rm > 86) (P.fam = P.to), (P.to = -1);\n  } else if (input.btnPressed && input.btnPressed[0]) (P.to = 1 - P.fam), (P.rm = 0);\n}\n\n// One golden triangle onto the LEDs, colour (r, g, b) and line light gl.\n// Within LW of a tile edge an LED darkens into the 1-LED line between tiles;\n// mode 1 and 2 keep only the LEDs inside or outside the regrouping ring.\nconst LW = 0.72;\nfunction tri(P, xy, o, co, si, r, g, b, gl, mode) {\n  const ax = CX + co * xy[o] - si * xy[o + 1], ay = CY + si * xy[o] + co * xy[o + 1];\n  const bx = CX + co * xy[o + 2] - si * xy[o + 3], by = CY + si * xy[o + 2] + co * xy[o + 3];\n  const cx = CX + co * xy[o + 4] - si * xy[o + 5], cy = CY + si * xy[o + 4] + co * xy[o + 5];\n  const x0 = max(0, ceil(min(ax, bx, cx) - 0.5)), x1 = min(W - 1, floor(max(ax, bx, cx) - 0.5));\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(H - 1, floor(max(ay, by, cy) - 0.5));\n  if (x0 > x1 || y0 > y1) return;\n  const sg = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax) > 0 ? 1 : -1, buf = P.buf;\n  // Signed distances to AB, BC and CA as a*X + b*Y + c, positive inside.\n  const l1 = sg / hypot(bx - ax, by - ay), l2 = sg / hypot(cx - bx, cy - by), l3 = sg / hypot(ax - cx, ay - cy);\n  const a1 = (ay - by) * l1, b1 = (bx - ax) * l1, c1 = ((by - ay) * ax - (bx - ax) * ay) * l1;\n  const a2 = (by - cy) * l2, b2 = (cx - bx) * l2, c2 = ((cy - by) * bx - (cx - bx) * by) * l2;\n  const a3 = (cy - ay) * l3, b3 = (ax - cx) * l3, c3 = ((ay - cy) * cx - (ax - cx) * cy) * l3;\n  for (let y = y0; y \u003c= y1; y++) {\n    const Y = y + 0.5, X = x0 + 0.5;\n    let d1 = a1 * X + b1 * Y + c1, d2 = a2 * X + b2 * Y + c2, d3 = a3 * X + b3 * Y + c3;\n    for (let x = x0, p = y * W + x0; x \u003c= x1; x++, p++, d1 += a1, d2 += a2, d3 += a3) {\n      if (d1 \u003c -0.001 || d2 \u003c -0.001 || d3 \u003c -0.001 || (mode && (RR[p] \u003c P.rm) !== (mode === 1))) continue;\n      // The line's light keeps to its core, so a small tile behind the ring\n      // keeps its colour.\n      const w = cl((LW - min(d1, d3)) * 2.2, 0, 1), m = 1 - 0.93 * w, v = w * w * gl, q = p * 3;\n      buf[q] = r * m + (GLOW[0] - r * m) * v;\n      buf[q + 1] = g * m + (GLOW[1] - g * m) * v;\n      buf[q + 2] = b * m + (GLOW[2] - b * m) * v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const h = P.Z >= 1 ? 1 : 0, rho = (P.Z - h) * RHO, buf = P.buf, col = P.col, dim = 1 - 0.65 * P.glow;\n  buf.fill(0);\n  const jobs = P.to \u003c 0 ? [[P.fam, 0]] : [[P.fam, 2], [P.to, 1]];\n  for (const [fi, mode] of jobs) {\n    const S = P.e * PHI ** P.Z * SCALE[fi], co = cos(P.rot) * S, si = sin(P.rot) * S, lim = 73 / S;\n    const Lc = FAM[fi][h], Lf = FAM[fi][h + 1], pal = PAL[fi];\n    for (let c = 0; c \u003c pal.length; c++) hsv(P.hue + pal[c][0], pal[c][1], pal[c][2], col, c * 3);\n    // A tile splits once the ring has passed its middle. The ring runs RHO\n    // LEDs a level, well past the corners, so every tile on show has split\n    // and its light has died before the next level begins.\n    for (let i = 0; i \u003c Lc.n; i++) {\n      const a = (Lc.age[i] = rho - S * Lc.rq[i]);\n      if (a > 0 || Lc.near[i] > lim) continue;\n      const c = Lc.cls[i] * 3;\n      tri(P, Lc.xy, i * 6, co, si, col[c] * dim, col[c + 1] * dim, col[c + 2] * dim, 0, mode);\n    }\n    // Behind the ring the new edges flash, and the glass lights up and fades\n    // back down to what Glow leaves it.\n    for (let j = 0; j \u003c Lf.n; j++) {\n      const a = Lc.age[Lf.par[j]];\n      if (a \u003c= 0 || Lf.near[j] > lim) continue;\n      const c = Lf.cls[j] * 3, lit = dim + (1 - dim) * exp(-a / 10), fl = 0.3 * P.glow * exp(-a / 5);\n      const r = col[c] * lit, g = col[c + 1] * lit, b = col[c + 2] * lit;\n      tri(P, Lf.xy, j * 6, co, si, r + (255 - r) * fl, g + (255 - g) * fl, b + (255 - b) * fl, exp(-a / 2.5), mode);\n    }\n  }\n  // The regrouping ring itself, a line of light.\n  if (P.to >= 0)\n    for (let p = 0; p \u003c N; p++) {\n      const w = 1 - abs(RR[p] - P.rm) / 1.6;\n      if (w > 0) for (let q = 0; q \u003c 3; q++) buf[p * 3 + q] += (GLOW[q] - buf[p * 3 + q]) * w * 0.85;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns all the tile colours round the colour wheel together."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute."},{"name":"Size","min":7,"max":15,"about":"The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them."},{"name":"Glow","min":0,"max":1,"about":"How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring."}],"start":[0,2,7,0.06],"measures":{"motion":1.7979,"detail":0.2641,"edges":0.8556,"complexity":1.1732,"coverage":0.804,"colour":0.583,"drift":0.0983},"knobResponse":[0.4132,0.358,0.3898,0.2306]},{"slug":"penrose-room","title":"Penrose Room","family":"physics","round":33,"note":"거울로 된 펜로즈의 방에서 빛 한 점이 떠돌고, 수백 개의 광선이 반사하며 복도와 위아래 반타원을 밝히는 동안 양옆 방은 캄캄해요. 빛이 반타원을 지나 옆방으로 건너가면 밝은 곳과 어두운 곳이 뒤바뀌어요. K3 은 복도 벽을 초점에서 4 LED 까지 옮겨 어둠에 빛이 새게 하고, K1 을 누르면 빛이 바로 건너가요.","idea":"A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.","buttons":"K1 tap sends the light across now, from the corridor into a side chamber or back.","code":"// ===== Patternflow pattern =====\n// Title:   Penrose Room\n// Family:  physics\n// Idea:    A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Penrose unilluminable room (Roger Penrose, 1958), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1\n//\n// Knob 1: Hue. The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive.\n// Knob 2: Speed. How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower.\n// Knob 3: Offset. How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow.\n// Knob 4: Bounces. How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue.\n// Buttons: K1 tap sends the light across now, from the corridor into a side chamber or back.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The room, in LEDs. Two half-ellipses with semi-axes 31.5 and 26 put their\n// flat sides at rows 26.5 and 101.5, and their arcs touch rows 0 and 127, so\n// the room is the whole panel. The foci sit on the flat sides at 17.78 either\n// side of the middle column; the outer walls are the ellipses' own tangents\n// at the ends of the major axis, columns 0 and 63.\nconst A = 31.5, B = 26, C = sqrt(A * A - B * B), CX = 32;\nconst YT = 0.5 + B, YB = 127.5 - B, YM = 64;\nconst IA2 = 1 / (A * A), IB2 = 1 / (B * B), EPS = 1e-6;\n// Each reflection keeps 60% of the light. The glow is LEVEL times the light\n// over the mean of the lit LEDs, raised to GAMMA: the mean shows at 128 of 255\n// and the glow round the lamp comes close to full. At 92 the swap moved the\n// picture 0.270 on the study's drift scale; at 128 it moves it 0.365.\nconst REFL = 0.6, LEVEL = 0.50, GAMMA = 0.7;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, off: 0, nb: 14, w: C,\n    buf: new Float32Array(N), tmp: new Float32Array(N), hz: new Float32Array(N), kb: new Float32Array(N), kz: new Float32Array(N), wall: new Float32Array(N), wallW: NaN,\n    lu: 0, ly: YM, region: 0, tau: 0, stay: 3.2, mode: 0,\n    tt: 0, from: 0, to: 0, expo: 0, bz: new Float64Array(8), col: new Float32Array(51),\n  };\n}\n\n// Where the light may stand: the corridor between the walls, or one side\n// chamber, a little clear of every wall.\nfunction clampTo(S, region, u) {\n  const w = S.w;\n  if (region === 0) return cl(u, -(w - 1.2), w - 1.2);\n  return region * cl(region * u, w + 1.2, A - 1.2);\n}\n\n// A slow wander that starts from the middle of the place, so the light\n// arrives at the middle and sets off from there without a jump.\nfunction wander(S) {\n  const w = S.w, t = S.tau;\n  const y = YM + 30 * sin(0.4 * t);\n  if (S.region === 0) return [(w - 3.5) * sin(0.55 * t), y];\n  const uc = (S.region * (w + A)) / 2, au = max(0, (A - w) / 2 - 2.5);\n  return [uc + au * sin(0.7 * t), y];\n}\n\n// Crossing over: a cubic curve that leaves straight up (or down) through the\n// flat side nearer the light, arcs through the half-ellipse and drops\n// straight into the middle of the other place. From the corridor it leaves\n// between the foci and from a chamber outside them, as a ray would.\nfunction startTransit(S) {\n  const u0 = S.lu, y0 = S.ly, w = S.w;\n  S.from = S.region;\n  S.to = S.region === 0 ? (u0 > 0.5 ? 1 : u0 \u003c -0.5 ? -1 : Math.random() \u003c 0.5 ? -1 : 1) : 0;\n  const u3 = S.to === 0 ? 0 : (S.to * (w + A)) / 2, cy = y0 \u003c= YM ? YT - 32 : YB + 32;\n  S.bz.set([u0, y0, u0, cy, u3, cy, u3, YM]);\n  S.mode = 1;\n  S.tt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.off = cl(k[2] || 0, -4, 4);\n  S.w = C + S.off;\n  S.nb = Math.round(40 * Math.pow(cl(k[3], 0, 1), 0.373));\n  const sp = S.speed / 2;\n\n  if (input.btnPressed && input.btnPressed[0] && S.mode === 0) startTransit(S);\n  if (S.mode === 0) {\n    S.tau += d * sp;\n    S.stay -= d * sp;\n    const p = wander(S);\n    S.lu = clampTo(S, S.region, p[0]);\n    S.ly = p[1];\n    if (S.stay \u003c= 0) startTransit(S);\n  } else {\n    S.tt = min(1, S.tt + (d * sp) / 1.8);\n    const e = S.tt * S.tt * (3 - 2 * S.tt), f = 1 - e, b = S.bz;\n    const c0 = f * f * f, c1 = 3 * f * f * e, c2 = 3 * f * e * e, c3 = e * e * e;\n    let u = c0 * b[0] + c1 * b[2] + c2 * b[4] + c3 * b[6];\n    const y = c0 * b[1] + c1 * b[3] + c2 * b[5] + c3 * b[7];\n    // Between the flat sides the light is in a place, never in a wall.\n    // In a half-ellipse it keeps clear of the arc: with the walls 4 LEDs out,\n    // the curve's top would just touch it.\n    let yy = y;\n    if (y > YT && y \u003c YB) u = clampTo(S, S.tt \u003c 0.5 ? S.from : S.to, u);\n    else {\n      const yc = y \u003c= YT ? YT : YB, v = y - yc, E = u * u * IA2 + v * v * IB2;\n      if (E > 0.85) {\n        const q = sqrt(0.85 / E);\n        u *= q;\n        yy = yc + v * q;\n      }\n    }\n    S.lu = u;\n    S.ly = yy;\n    if (S.tt >= 1) {\n      S.mode = 0;\n      S.region = S.to;\n      S.tau = 0;\n      S.stay = S.region === 0 ? 5 + 3 * Math.random() : 7 + 3 * Math.random();\n    }\n  }\n\n  // The light fades over about a sixth of a second, so a place goes dark\n  // soon after the light has left it.\n  const buf = S.buf, kb = S.kb, fade = exp(-d / 0.16);\n  for (let i = 0; i \u003c N; i++) {\n    buf[i] *= fade;\n    kb[i] *= fade;\n  }\n  trace(S, d * 30);\n  // Exposure follows the mean of the lit LEDs over about half a second, the\n  // way an eye adjusts, so a chamber, where every ray soon hits a wall and\n  // loses 40% of its light, glows about as bright as the corridor.\n  let sum = 0, n = 0;\n  for (let i = 0; i \u003c N; i++)\n    if (buf[i] > 0.5) {\n      sum += buf[i];\n      n++;\n    }\n  const m = n ? sum / n : 1;\n  S.expo = S.expo > 0 ? S.expo + (m - S.expo) * (1 - exp(-d / 0.5)) : m;\n}\n\n// Rays leave the light evenly spaced round the circle, the whole fan turned\n// by a random angle each frame, and bounce off the mirrors; each reflection\n// keeps 60% of the light, so the first few reflections draw the shapes and\n// the later ones fill in. A ray's path is added to the buffer one LED step at\n// a time, so a pixel gathers light in proportion to the rays crossing it.\nfunction trace(S, gain) {\n  const nb = S.nb, R = cl(floor(4200 / (nb + 1)), 120, 300), w = S.w, buf = S.buf, kb = S.kb;\n  const phase = Math.random(), w0 = (gain * 0.5 * 300) / R;\n  for (let r = 0; r \u003c R; r++) {\n    const th = (2 * PI * (r + phase)) / R;\n    let u = S.lu, y = S.ly, dx = cos(th), dy = sin(th), wt = w0;\n    for (let k = 0; k \u003c= nb; k++) {\n      let best = 1e9, kind = 0, nx = 0, ny = 0;\n      // The two arcs: an ellipse counts as a mirror only on its own side of\n      // its flat side, which is open to the room between them.\n      for (let e = 0; e \u003c 2; e++) {\n        const yc = e ? YB : YT, v = y - yc;\n        const qa = dx * dx * IA2 + dy * dy * IB2, qb = 2 * (u * dx * IA2 + v * dy * IB2), qc = u * u * IA2 + v * v * IB2 - 1;\n        const disc = qb * qb - 4 * qa * qc;\n        if (disc \u003c= 0) continue;\n        const sq = sqrt(disc);\n        for (let j = 0; j \u003c 2; j++) {\n          const t = (-qb + (j ? sq : -sq)) / (2 * qa);\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (e ? hy >= YB : hy \u003c= YT) {\n            best = t;\n            kind = 1;\n            nx = (u + dx * t) * IA2;\n            ny = (hy - yc) * IB2;\n            break;\n          }\n        }\n      }\n      // The outer walls and the two thin corridor walls, mirrors on both sides.\n      if (dx !== 0)\n        for (let j = 0; j \u003c 4; j++) {\n          const X = j === 0 ? A : j === 1 ? -A : j === 2 ? w : -w, t = (X - u) / dx;\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (hy >= YT && hy \u003c= YB) {\n            best = t;\n            kind = 2;\n          }\n        }\n      if (kind === 0) break;\n      const u1 = u + dx * best, y1 = y + dy * best;\n      const n = floor(best) + 1, sx = (dx * best) / n, sy = (dy * best) / n, ww = (wt * best) / n;\n      let px = CX + u + sx * 0.5, py = y + sy * 0.5;\n      for (let i = 0; i \u003c n; i++) {\n        const ix = px | 0, iy = py | 0;\n        if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H) {\n          buf[iy * W + ix] += ww;\n          kb[iy * W + ix] += ww * k;\n        }\n        px += sx;\n        py += sy;\n      }\n      u = u1;\n      y = y1;\n      if (kind === 2) dx = -dx;\n      else {\n        const q = (2 * (dx * nx + dy * ny)) / (nx * nx + ny * ny);\n        dx -= q * nx;\n        dy -= q * ny;\n      }\n      wt *= REFL;\n    }\n  }\n}\n\n// The walls as one-LED lines, anti-aliased by distance: the arcs, the outer\n// walls and the two corridor walls from focus to focus (or wherever Offset\n// has moved them).\nfunction buildWalls(S) {\n  const wall = S.wall, w = S.w;\n  for (let py = 0, i = 0; py \u003c H; py++)\n    for (let px = 0; px \u003c W; px++, i++) {\n      const u = px + 0.5 - CX, y = py + 0.5, au = abs(u);\n      let dmin = 9;\n      if (y \u003c= YT || y >= YB) {\n        const v = y - (y \u003c= YT ? YT : YB);\n        const E = u * u * IA2 + v * v * IB2, g = 2 * sqrt(u * u * IA2 * IA2 + v * v * IB2 * IB2);\n        dmin = abs(E - 1) / max(g, 1e-6);\n        dmin = min(dmin, sqrt((au - w) * (au - w) + v * v));\n      } else dmin = min(abs(au - A), abs(au - w));\n      wall[i] = cl(1 - dmin, 0, 1);\n    }\n  S.wallW = w;\n}\n\n// A soft blur, 1 4 6 4 1 across and then down, about an LED wide, so the\n// rays glow instead of drawing hard lines and the edge of the light steps\n// down by under 40 levels a LED.\nfunction blur(src, out, tmp) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++)\n      tmp[o + x] = (src[o + max(0, x - 2)] + 4 * src[o + max(0, x - 1)] + 6 * src[o + x] + 4 * src[o + min(W - 1, x + 1)] + src[o + min(W - 1, x + 2)]) / 16;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o0 = max(0, y - 2) * W, o1 = max(0, y - 1) * W, o2 = y * W, o3 = min(H - 1, y + 1) * W, o4 = min(H - 1, y + 2) * W;\n    for (let x = 0; x \u003c W; x++) out[o2 + x] = (tmp[o0 + x] + 4 * tmp[o1 + x] + 6 * tmp[o2 + x] + 4 * tmp[o3 + x] + tmp[o4 + x]) / 16;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.wallW !== S.w) buildWalls(S);\n  const hz = S.hz, kz = S.kz, wall = S.wall, col = S.col;\n  blur(S.buf, hz, S.tmp);\n  blur(S.kb, kz, S.tmp);\n  // Colour by how many mirrors the light has met: the direct light is a pale\n  // tint of the hue, and each reflection turns it a little further round the\n  // wheel and deeper, a sixth of a turn by the fifth.\n  // Round orange, yellow and yellow-green, 0.03 to 0.29 on the wheel, the\n  // colour goes paler so the dimmer far light reads as butter, not olive.\n  const h = S.hue + 0.5;\n  for (let j = 0; j \u003c 16; j++) {\n    const f = 1 - exp(-j / 3), hj = h + 0.17 * f, hf = hj - floor(hj);\n    const mud = cl((hf - 0.01) / 0.04, 0, 1) * cl((0.33 - hf) / 0.06, 0, 1);\n    hsv(hj, (0.18 + 0.62 * f) * (1 - 0.6 * mud), 1, col, j * 3);\n  }\n  hsv(h + 0.27, 0.45, 34, col, 48);\n  const lx = CX + S.lu, ly = S.ly, ie = 1 / max(1, S.expo);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const L = hz[i], v = min(1, LEVEL * Math.pow(L * ie, GAMMA));\n      // The mean number of reflections here, read between two palette steps.\n      const kb = L > 1e-4 ? min(14.99, kz[i] / L) : 0, j = floor(kb), f = kb - j, o = j * 3;\n      const ddx = x + 0.5 - lx, ddy = y + 0.5 - ly, core = 255 * exp(-(ddx * ddx + ddy * ddy) / 1.1);\n      // A wall is a dim line in the dark and a darker line across the glow,\n      // a mirror seen edge on, so it never stands 40 levels off its sides.\n      const wv = wall[i], g = 255 * v * (1 - 0.5 * wv);\n      const r = g * (col[o] + (col[o + 3] - col[o]) * f) + wv * col[48] + core;\n      const gg = g * (col[o + 1] + (col[o + 4] - col[o + 1]) * f) + wv * col[49] + core;\n      const b = g * (col[o + 2] + (col[o + 5] - col[o + 2]) * f) + wv * col[50] + core;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","layer":{"id":"layer-penrose-room","type":"code","name":"penrose-room","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Penrose Room\n// Family:  physics\n// Idea:    A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Penrose unilluminable room (Roger Penrose, 1958), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1\n//\n// Knob 1: Hue. The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive.\n// Knob 2: Speed. How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower.\n// Knob 3: Offset. How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow.\n// Knob 4: Bounces. How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue.\n// Buttons: K1 tap sends the light across now, from the corridor into a side chamber or back.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The room, in LEDs. Two half-ellipses with semi-axes 31.5 and 26 put their\n// flat sides at rows 26.5 and 101.5, and their arcs touch rows 0 and 127, so\n// the room is the whole panel. The foci sit on the flat sides at 17.78 either\n// side of the middle column; the outer walls are the ellipses' own tangents\n// at the ends of the major axis, columns 0 and 63.\nconst A = 31.5, B = 26, C = sqrt(A * A - B * B), CX = 32;\nconst YT = 0.5 + B, YB = 127.5 - B, YM = 64;\nconst IA2 = 1 / (A * A), IB2 = 1 / (B * B), EPS = 1e-6;\n// Each reflection keeps 60% of the light. The glow is LEVEL times the light\n// over the mean of the lit LEDs, raised to GAMMA: the mean shows at 128 of 255\n// and the glow round the lamp comes close to full. At 92 the swap moved the\n// picture 0.270 on the study's drift scale; at 128 it moves it 0.365.\nconst REFL = 0.6, LEVEL = 0.50, GAMMA = 0.7;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, off: 0, nb: 14, w: C,\n    buf: new Float32Array(N), tmp: new Float32Array(N), hz: new Float32Array(N), kb: new Float32Array(N), kz: new Float32Array(N), wall: new Float32Array(N), wallW: NaN,\n    lu: 0, ly: YM, region: 0, tau: 0, stay: 3.2, mode: 0,\n    tt: 0, from: 0, to: 0, expo: 0, bz: new Float64Array(8), col: new Float32Array(51),\n  };\n}\n\n// Where the light may stand: the corridor between the walls, or one side\n// chamber, a little clear of every wall.\nfunction clampTo(S, region, u) {\n  const w = S.w;\n  if (region === 0) return cl(u, -(w - 1.2), w - 1.2);\n  return region * cl(region * u, w + 1.2, A - 1.2);\n}\n\n// A slow wander that starts from the middle of the place, so the light\n// arrives at the middle and sets off from there without a jump.\nfunction wander(S) {\n  const w = S.w, t = S.tau;\n  const y = YM + 30 * sin(0.4 * t);\n  if (S.region === 0) return [(w - 3.5) * sin(0.55 * t), y];\n  const uc = (S.region * (w + A)) / 2, au = max(0, (A - w) / 2 - 2.5);\n  return [uc + au * sin(0.7 * t), y];\n}\n\n// Crossing over: a cubic curve that leaves straight up (or down) through the\n// flat side nearer the light, arcs through the half-ellipse and drops\n// straight into the middle of the other place. From the corridor it leaves\n// between the foci and from a chamber outside them, as a ray would.\nfunction startTransit(S) {\n  const u0 = S.lu, y0 = S.ly, w = S.w;\n  S.from = S.region;\n  S.to = S.region === 0 ? (u0 > 0.5 ? 1 : u0 \u003c -0.5 ? -1 : Math.random() \u003c 0.5 ? -1 : 1) : 0;\n  const u3 = S.to === 0 ? 0 : (S.to * (w + A)) / 2, cy = y0 \u003c= YM ? YT - 32 : YB + 32;\n  S.bz.set([u0, y0, u0, cy, u3, cy, u3, YM]);\n  S.mode = 1;\n  S.tt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.off = cl(k[2] || 0, -4, 4);\n  S.w = C + S.off;\n  S.nb = Math.round(40 * Math.pow(cl(k[3], 0, 1), 0.373));\n  const sp = S.speed / 2;\n\n  if (input.btnPressed && input.btnPressed[0] && S.mode === 0) startTransit(S);\n  if (S.mode === 0) {\n    S.tau += d * sp;\n    S.stay -= d * sp;\n    const p = wander(S);\n    S.lu = clampTo(S, S.region, p[0]);\n    S.ly = p[1];\n    if (S.stay \u003c= 0) startTransit(S);\n  } else {\n    S.tt = min(1, S.tt + (d * sp) / 1.8);\n    const e = S.tt * S.tt * (3 - 2 * S.tt), f = 1 - e, b = S.bz;\n    const c0 = f * f * f, c1 = 3 * f * f * e, c2 = 3 * f * e * e, c3 = e * e * e;\n    let u = c0 * b[0] + c1 * b[2] + c2 * b[4] + c3 * b[6];\n    const y = c0 * b[1] + c1 * b[3] + c2 * b[5] + c3 * b[7];\n    // Between the flat sides the light is in a place, never in a wall.\n    // In a half-ellipse it keeps clear of the arc: with the walls 4 LEDs out,\n    // the curve's top would just touch it.\n    let yy = y;\n    if (y > YT && y \u003c YB) u = clampTo(S, S.tt \u003c 0.5 ? S.from : S.to, u);\n    else {\n      const yc = y \u003c= YT ? YT : YB, v = y - yc, E = u * u * IA2 + v * v * IB2;\n      if (E > 0.85) {\n        const q = sqrt(0.85 / E);\n        u *= q;\n        yy = yc + v * q;\n      }\n    }\n    S.lu = u;\n    S.ly = yy;\n    if (S.tt >= 1) {\n      S.mode = 0;\n      S.region = S.to;\n      S.tau = 0;\n      S.stay = S.region === 0 ? 5 + 3 * Math.random() : 7 + 3 * Math.random();\n    }\n  }\n\n  // The light fades over about a sixth of a second, so a place goes dark\n  // soon after the light has left it.\n  const buf = S.buf, kb = S.kb, fade = exp(-d / 0.16);\n  for (let i = 0; i \u003c N; i++) {\n    buf[i] *= fade;\n    kb[i] *= fade;\n  }\n  trace(S, d * 30);\n  // Exposure follows the mean of the lit LEDs over about half a second, the\n  // way an eye adjusts, so a chamber, where every ray soon hits a wall and\n  // loses 40% of its light, glows about as bright as the corridor.\n  let sum = 0, n = 0;\n  for (let i = 0; i \u003c N; i++)\n    if (buf[i] > 0.5) {\n      sum += buf[i];\n      n++;\n    }\n  const m = n ? sum / n : 1;\n  S.expo = S.expo > 0 ? S.expo + (m - S.expo) * (1 - exp(-d / 0.5)) : m;\n}\n\n// Rays leave the light evenly spaced round the circle, the whole fan turned\n// by a random angle each frame, and bounce off the mirrors; each reflection\n// keeps 60% of the light, so the first few reflections draw the shapes and\n// the later ones fill in. A ray's path is added to the buffer one LED step at\n// a time, so a pixel gathers light in proportion to the rays crossing it.\nfunction trace(S, gain) {\n  const nb = S.nb, R = cl(floor(4200 / (nb + 1)), 120, 300), w = S.w, buf = S.buf, kb = S.kb;\n  const phase = Math.random(), w0 = (gain * 0.5 * 300) / R;\n  for (let r = 0; r \u003c R; r++) {\n    const th = (2 * PI * (r + phase)) / R;\n    let u = S.lu, y = S.ly, dx = cos(th), dy = sin(th), wt = w0;\n    for (let k = 0; k \u003c= nb; k++) {\n      let best = 1e9, kind = 0, nx = 0, ny = 0;\n      // The two arcs: an ellipse counts as a mirror only on its own side of\n      // its flat side, which is open to the room between them.\n      for (let e = 0; e \u003c 2; e++) {\n        const yc = e ? YB : YT, v = y - yc;\n        const qa = dx * dx * IA2 + dy * dy * IB2, qb = 2 * (u * dx * IA2 + v * dy * IB2), qc = u * u * IA2 + v * v * IB2 - 1;\n        const disc = qb * qb - 4 * qa * qc;\n        if (disc \u003c= 0) continue;\n        const sq = sqrt(disc);\n        for (let j = 0; j \u003c 2; j++) {\n          const t = (-qb + (j ? sq : -sq)) / (2 * qa);\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (e ? hy >= YB : hy \u003c= YT) {\n            best = t;\n            kind = 1;\n            nx = (u + dx * t) * IA2;\n            ny = (hy - yc) * IB2;\n            break;\n          }\n        }\n      }\n      // The outer walls and the two thin corridor walls, mirrors on both sides.\n      if (dx !== 0)\n        for (let j = 0; j \u003c 4; j++) {\n          const X = j === 0 ? A : j === 1 ? -A : j === 2 ? w : -w, t = (X - u) / dx;\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (hy >= YT && hy \u003c= YB) {\n            best = t;\n            kind = 2;\n          }\n        }\n      if (kind === 0) break;\n      const u1 = u + dx * best, y1 = y + dy * best;\n      const n = floor(best) + 1, sx = (dx * best) / n, sy = (dy * best) / n, ww = (wt * best) / n;\n      let px = CX + u + sx * 0.5, py = y + sy * 0.5;\n      for (let i = 0; i \u003c n; i++) {\n        const ix = px | 0, iy = py | 0;\n        if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H) {\n          buf[iy * W + ix] += ww;\n          kb[iy * W + ix] += ww * k;\n        }\n        px += sx;\n        py += sy;\n      }\n      u = u1;\n      y = y1;\n      if (kind === 2) dx = -dx;\n      else {\n        const q = (2 * (dx * nx + dy * ny)) / (nx * nx + ny * ny);\n        dx -= q * nx;\n        dy -= q * ny;\n      }\n      wt *= REFL;\n    }\n  }\n}\n\n// The walls as one-LED lines, anti-aliased by distance: the arcs, the outer\n// walls and the two corridor walls from focus to focus (or wherever Offset\n// has moved them).\nfunction buildWalls(S) {\n  const wall = S.wall, w = S.w;\n  for (let py = 0, i = 0; py \u003c H; py++)\n    for (let px = 0; px \u003c W; px++, i++) {\n      const u = px + 0.5 - CX, y = py + 0.5, au = abs(u);\n      let dmin = 9;\n      if (y \u003c= YT || y >= YB) {\n        const v = y - (y \u003c= YT ? YT : YB);\n        const E = u * u * IA2 + v * v * IB2, g = 2 * sqrt(u * u * IA2 * IA2 + v * v * IB2 * IB2);\n        dmin = abs(E - 1) / max(g, 1e-6);\n        dmin = min(dmin, sqrt((au - w) * (au - w) + v * v));\n      } else dmin = min(abs(au - A), abs(au - w));\n      wall[i] = cl(1 - dmin, 0, 1);\n    }\n  S.wallW = w;\n}\n\n// A soft blur, 1 4 6 4 1 across and then down, about an LED wide, so the\n// rays glow instead of drawing hard lines and the edge of the light steps\n// down by under 40 levels a LED.\nfunction blur(src, out, tmp) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++)\n      tmp[o + x] = (src[o + max(0, x - 2)] + 4 * src[o + max(0, x - 1)] + 6 * src[o + x] + 4 * src[o + min(W - 1, x + 1)] + src[o + min(W - 1, x + 2)]) / 16;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o0 = max(0, y - 2) * W, o1 = max(0, y - 1) * W, o2 = y * W, o3 = min(H - 1, y + 1) * W, o4 = min(H - 1, y + 2) * W;\n    for (let x = 0; x \u003c W; x++) out[o2 + x] = (tmp[o0 + x] + 4 * tmp[o1 + x] + 6 * tmp[o2 + x] + 4 * tmp[o3 + x] + tmp[o4 + x]) / 16;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.wallW !== S.w) buildWalls(S);\n  const hz = S.hz, kz = S.kz, wall = S.wall, col = S.col;\n  blur(S.buf, hz, S.tmp);\n  blur(S.kb, kz, S.tmp);\n  // Colour by how many mirrors the light has met: the direct light is a pale\n  // tint of the hue, and each reflection turns it a little further round the\n  // wheel and deeper, a sixth of a turn by the fifth.\n  // Round orange, yellow and yellow-green, 0.03 to 0.29 on the wheel, the\n  // colour goes paler so the dimmer far light reads as butter, not olive.\n  const h = S.hue + 0.5;\n  for (let j = 0; j \u003c 16; j++) {\n    const f = 1 - exp(-j / 3), hj = h + 0.17 * f, hf = hj - floor(hj);\n    const mud = cl((hf - 0.01) / 0.04, 0, 1) * cl((0.33 - hf) / 0.06, 0, 1);\n    hsv(hj, (0.18 + 0.62 * f) * (1 - 0.6 * mud), 1, col, j * 3);\n  }\n  hsv(h + 0.27, 0.45, 34, col, 48);\n  const lx = CX + S.lu, ly = S.ly, ie = 1 / max(1, S.expo);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const L = hz[i], v = min(1, LEVEL * Math.pow(L * ie, GAMMA));\n      // The mean number of reflections here, read between two palette steps.\n      const kb = L > 1e-4 ? min(14.99, kz[i] / L) : 0, j = floor(kb), f = kb - j, o = j * 3;\n      const ddx = x + 0.5 - lx, ddy = y + 0.5 - ly, core = 255 * exp(-(ddx * ddx + ddy * ddy) / 1.1);\n      // A wall is a dim line in the dark and a darker line across the glow,\n      // a mirror seen edge on, so it never stands 40 levels off its sides.\n      const wv = wall[i], g = 255 * v * (1 - 0.5 * wv);\n      const r = g * (col[o] + (col[o + 3] - col[o]) * f) + wv * col[48] + core;\n      const gg = g * (col[o + 1] + (col[o + 4] - col[o + 1]) * f) + wv * col[49] + core;\n      const b = g * (col[o + 2] + (col[o + 5] - col[o + 2]) * f) + wv * col[50] + core;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower."},{"name":"Offset","min":-4,"max":4,"about":"How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow."},{"name":"Bounces","min":0,"max":1,"about":"How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue."}],"start":[0,2,0,0.06],"measures":{"motion":0.1329,"detail":0.0175,"edges":0.0753,"complexity":1.6655,"coverage":0.6752,"colour":0.1329,"drift":0.3645},"knobResponse":[0.1321,0.1111,0.1163,0.0615]},{"slug":"pentomino-cover","title":"Pentomino Cover","family":"algo","round":34,"note":"6×10 직사각형을 크누스의 춤추는 링크가 열두 펜토미노로 채워요. 고를 수가 가장 적은 칸부터 조각을 놓고 막히면 빼서 아래쪽 조각들이 쉴 새 없이 들고 나며 윤곽만 잠깐 남기고, 다 덮이면 2초 동안 빛이 비스듬히 쓸고 판 아래에 눈금이 하나 늘어요. K3 은 판을 5×12, 4×15, 해가 둘뿐인 3×20 으로 바꿔요.","idea":"A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.","buttons":"K1 tap starts a new search in a new shuffled order.","code":"// ===== Patternflow pattern =====\n// Title:   Pentomino Cover\n// Family:  algo\n// Idea:    A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dancing Links and Algorithm X (Donald Knuth, 2000) on Solomon Golomb's pentominoes (1953), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1\n//\n// Knob 1: Hue. Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had.\n// Knob 2: Speed. Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3.\n// Knob 3: Board. 0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images.\n// Knob 4: Shuffle. How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search.\n// Buttons: K1 tap starts a new search in a new shuffled order.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, round, abs, pow, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The twelve pentominoes, F I L N P T U V W X Y Z.\nconst PIECES = [\n  [[1, 0], [2, 0], [0, 1], [1, 1], [1, 2]],\n  [[0, 0], [1, 0], [2, 0], [3, 0], [4, 0]],\n  [[0, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [0, 1], [1, 1], [0, 2]],\n  [[0, 0], [1, 0], [2, 0], [1, 1], [1, 2]],\n  [[0, 0], [2, 0], [0, 1], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [0, 2], [1, 2], [2, 2]],\n  [[0, 0], [0, 1], [1, 1], [1, 2], [2, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [1, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [1, 2], [2, 2]],\n];\nconst P_ = 4, X_ = 9;\n// Boards, columns by rows, and the LEDs a cell takes.\nconst BOARDS = [[6, 10, 10], [5, 12, 10], [4, 15, 8], [3, 20, 6]];\n\n// Every distinct orientation of a piece: the four turns first, then the\n// four turns of its mirror image, so flip marks the mirrored ones.\nfunction orientations(cells) {\n  const out = [], seen = new Set();\n  for (let f = 0; f \u003c 2; f++)\n    for (let q = 0; q \u003c 4; q++) {\n      let c = cells.map(([x, y]) => (f ? [-x, y] : [x, y]));\n      for (let k = 0; k \u003c q; k++) c = c.map(([x, y]) => [-y, x]);\n      const mx = min(...c.map((p) => p[0])), my = min(...c.map((p) => p[1]));\n      c = c.map(([x, y]) => [x - mx, y - my]).sort((a, b) => a[1] - b[1] || a[0] - b[0]);\n      const key = c.join(\";\");\n      if (!seen.has(key)) seen.add(key), out.push({ cells: c, flip: f });\n    }\n  return out;\n}\nconst ORIENT = PIECES.map(orientations);\n\n// The exact cover matrix: one column per piece, one per cell, and one\n// secondary column that keeps the count to solutions up to symmetry. The X\n// may only sit in the board's first quarter; when it sits on a mirror line\n// of the board the P may not be mirrored, and the secondary column holds\n// those two choices apart.\nfunction placements(bw, bh) {\n  const rows = [];\n  PIECES.forEach((_, pi) => {\n    for (const o of ORIENT[pi]) {\n      const ow = max(...o.cells.map((p) => p[0])) + 1, oh = max(...o.cells.map((p) => p[1])) + 1;\n      for (let y = 0; y + oh \u003c= bh; y++)\n        for (let x = 0; x + ow \u003c= bw; x++) {\n          let sec = pi === P_ && o.flip === 1;\n          if (pi === X_) {\n            const cx = x + 1, cy = y + 1;\n            if (2 * cx > bw - 1 || 2 * cy > bh - 1) continue;\n            sec = (bw % 2 === 1 && 2 * cx === bw - 1) || (bh % 2 === 1 && 2 * cy === bh - 1);\n          }\n          rows.push({ piece: pi, cells: o.cells.map(([a, b]) => (y + b) * bw + x + a), sec });\n        }\n    }\n  });\n  return rows;\n}\n\nconst MAXN = 16000;\nfunction newSearch(S, again) {\n  const [bw, bh] = BOARDS[S.board];\n  const rows = placements(bw, bh);\n  // Shuffle moves each row by up to twice that share of the list. A search\n  // started again keeps the order it had.\n  if (!again) S.jit = rows.map(() => random());\n  const key = rows.map((_, i) => i / rows.length + 2 * S.shuffle * S.jit[i]);\n  const order = rows.map((_, i) => i).sort((a, b) => key[a] - key[b]);\n  const NC = 12 + bw * bh, SEC = NC + 1;\n  const { L, R, U, D, C, RW, SZ } = S;\n  for (let c = 0; c \u003c= NC; c++) (L[c] = c - 1), (R[c] = c + 1), (U[c] = D[c] = C[c] = c), (SZ[c] = 0);\n  L[0] = NC;\n  R[NC] = 0;\n  L[SEC] = R[SEC] = U[SEC] = D[SEC] = C[SEC] = SEC;\n  let k = SEC + 1;\n  S.rows = order.map((i) => rows[i]);\n  S.rows.forEach((r, ri) => {\n    const cols = [1 + r.piece, ...r.cells.map((c) => 13 + c)];\n    if (r.sec) cols.push(SEC);\n    const first = k;\n    for (const c of cols) {\n      C[k] = c;\n      RW[k] = ri;\n      U[k] = U[c];\n      D[k] = c;\n      D[U[c]] = k;\n      U[c] = k;\n      SZ[c]++;\n      L[k] = k - 1;\n      R[k] = k + 1;\n      k++;\n    }\n    L[first] = k - 1;\n    R[k - 1] = first;\n  });\n  S.bw = bw;\n  S.bh = bh;\n  S.cs = BOARDS[S.board][2];\n  S.k = 0;\n  S.mode = 0;\n  S.done = false;\n  S.found = 0;\n  S.hold = 0;\n  S.cell.fill(-1);\n  S.age.fill(9);\n  S.ghost.fill(-1);\n  S.gAge.fill(9);\n  S.builtBoard = S.board;\n  S.builtShuffle = S.shuffle;\n}\n\nfunction cover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  L[R[c]] = L[c];\n  R[L[c]] = R[c];\n  for (let i = D[c]; i !== c; i = D[i])\n    for (let j = R[i]; j !== i; j = R[j]) (U[D[j]] = U[j]), (D[U[j]] = D[j]), SZ[C[j]]--;\n}\nfunction uncover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  for (let i = U[c]; i !== c; i = U[i])\n    for (let j = L[i]; j !== i; j = L[j]) SZ[C[j]]++, (U[D[j]] = j), (D[U[j]] = j);\n  L[R[c]] = c;\n  R[L[c]] = c;\n}\nfunction place(S, node, on) {\n  const r = S.rows[S.RW[node]];\n  for (const c of r.cells) {\n    if (on) (S.cell[c] = r.piece), (S.age[c] = 0);\n    else (S.ghost[c] = S.cell[c]), (S.gAge[c] = 0), (S.cell[c] = -1);\n  }\n}\n\n// Algorithm X, one node of the search tree a call: enter a level and cover\n// the column with the fewest rows left, try its next row, or step back.\n// Returns true when the board is full.\nfunction searchStep(S) {\n  const { L, R, D, C, SZ, col, row } = S;\n  if (S.mode === 0) {\n    if (R[0] === 0) {\n      S.mode = 2;\n      return true;\n    }\n    let c = R[0], best = 1e9;\n    for (let j = R[0]; j !== 0; j = R[j]) if (SZ[j] \u003c best) (best = SZ[j]), (c = j);\n    cover(S, c);\n    col[S.k] = c;\n    row[S.k] = D[c];\n    S.mode = 1;\n  } else if (S.mode === 1) {\n    const r = row[S.k];\n    if (r === col[S.k]) {\n      uncover(S, col[S.k]);\n      S.mode = 2;\n      return false;\n    }\n    for (let j = R[r]; j !== r; j = R[j]) cover(S, C[j]);\n    place(S, r, true);\n    S.k++;\n    S.mode = 0;\n  } else {\n    if (S.k === 0) {\n      S.done = true;\n      return false;\n    }\n    S.k--;\n    const r = row[S.k];\n    place(S, r, false);\n    for (let j = L[r]; j !== r; j = L[j]) uncover(S, C[j]);\n    row[S.k] = D[r];\n    S.mode = 1;\n  }\n  return false;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, board: 0, shuffle: 0.06, warm: false, acc: 0, sweep: 0,\n    L: new Int32Array(MAXN), R: new Int32Array(MAXN), U: new Int32Array(MAXN), D: new Int32Array(MAXN),\n    C: new Int32Array(MAXN), RW: new Int32Array(MAXN), SZ: new Int32Array(80), col: new Int32Array(16), row: new Int32Array(16),\n    cell: new Int8Array(60), age: new Float32Array(60), ghost: new Int8Array(60), gAge: new Float32Array(60),\n    key: new Int8Array(60), pc: new Int8Array(N), c: [0, 0, 0],\n  };\n}\n\n// A full cover holds for HOLD seconds; the search takes rate(Speed) steps a\n// second.\nconst HOLD = 2;\nconst rate = (sp) => 5 * pow(2, 3.5 * (sp - 0.2));\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.board = cl(round(k[2]), 0, 3);\n  S.shuffle = cl(k[3], 0, 1);\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (!S.warm || pressed || S.board !== S.builtBoard || abs(S.shuffle - S.builtShuffle) > 0.04) {\n    newSearch(S);\n    if (!S.warm) {\n      // Open about 1100 steps short of the first full board, so at Speed 2\n      // the first solution comes near 2.8 s.\n      let n = 0;\n      while (!searchStep(S) && !S.done) n++;\n      newSearch(S, true);\n      for (let i = 0; i \u003c n - 1100; i++) searchStep(S);\n      S.age.fill(9);\n      S.ghost.fill(-1);\n      S.warm = true;\n    }\n  }\n  for (let c = 0; c \u003c 60; c++) (S.age[c] += d), (S.gAge[c] += d);\n  if (S.hold > 0) {\n    S.hold = max(0, S.hold - d);\n    S.sweep += d / HOLD;\n    return;\n  }\n  if (S.done) {\n    newSearch(S);\n    return;\n  }\n  S.acc += d * rate(S.speed);\n  while (S.acc >= 1) {\n    S.acc--;\n    if (searchStep(S)) {\n      S.found++;\n      S.hold = HOLD;\n      S.sweep = 0;\n      S.acc = 0;\n      break;\n    }\n    if (S.done) break;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { bw, bh, cs, cell, age, ghost, gAge, key, pc, c } = S, base = S.hue + 0.55;\n  const BW = bw * cs + 1, BH = bh * cs + 1, ox = floor((W - BW) / 2), oy = floor((H - BH) / 2);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, 0, 0, 0);\n  // Each cell shows its piece, or for 0.18 s after the search takes a\n  // piece out, that piece's outline fading.\n  for (let i = 0; i \u003c bw * bh; i++) key[i] = cell[i] >= 0 ? cell[i] : ghost[i] >= 0 && gAge[i] \u003c 0.18 ? 12 + ghost[i] : -1;\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= bw || y >= bh ? -2 : key[y * bw + x]);\n  // A cell's own LEDs show its piece, a grid line between two cells of one\n  // piece that piece, any other grid line the dark seam.\n  pc.fill(-1);\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const gx = X % cs === 0, gy = Y % cs === 0, cx = floor(X / cs), cy = floor(Y / cs);\n      let q;\n      if (!gx && !gy) q = at(cx, cy);\n      else if (gx && !gy) q = at(cx - 1, cy) === at(cx, cy) ? at(cx, cy) : -1;\n      else if (!gx && gy) q = at(cx, cy - 1) === at(cx, cy) ? at(cx, cy) : -1;\n      else {\n        const a = at(cx - 1, cy - 1);\n        q = a === at(cx, cy - 1) && a === at(cx - 1, cy) && a === at(cx, cy) ? a : -1;\n      }\n      pc[(oy + Y) * W + ox + X] = q;\n    }\n  // A light sweeps across the board while a solution holds.\n  const band = S.hold > 0 ? -0.25 + 1.5 * cl(S.sweep, 0, 1) : -9;\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const p = (oy + Y) * W + ox + X, q = pc[p];\n      const cx = min(bw - 1, floor(X / cs)), cy = min(bh - 1, floor(Y / cs)), ci = cy * bw + cx;\n      const g = (X / BW + Y / BH) / 2 - band, lit = S.hold > 0 ? exp(-g * g * 90) : 0;\n      if (q >= 0 && q \u003c 12) {\n        // A slight bevel: lighter next to a seam above or to the left,\n        // darker next to one below or to the right.\n        const up = pc[p - W] \u003c 0 || pc[p - W] >= 12, lf = pc[p - 1] \u003c 0 || pc[p - 1] >= 12;\n        const dn = pc[p + W] \u003c 0 || pc[p + W] >= 12, rt = pc[p + 1] \u003c 0 || pc[p + 1] >= 12;\n        const fresh = cl(1 - age[ci] / 0.15, 0, 1);\n        const v = min(1, 0.82 + (up || lf ? 0.18 : 0) - (dn || rt ? 0.2 : 0) + 0.15 * fresh + 0.3 * lit);\n        hsv(base + q / 12, (0.72 - 0.3 * fresh) * (1 - 0.7 * lit), 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 255 * v), round(c[1] * 255 * v), round(c[2] * 255 * v));\n      } else if (q >= 12) {\n        // A piece just taken out leaves its outline for a moment.\n        if (pc[p - W] === q && pc[p + W] === q && pc[p - 1] === q && pc[p + 1] === q) continue;\n        const f = cl(1 - gAge[ci] / 0.18, 0, 1);\n        hsv(base + (q - 12) / 12, 0.6, 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 150 * f), round(c[1] * 150 * f), round(c[2] * 150 * f));\n      } else if (X === 0 || Y === 0 || X === BW - 1 || Y === BH - 1) display.setPixel(ox + X, oy + Y, 44, 44, 54);\n      else if (X % cs === 0 && Y % cs === 0) display.setPixel(ox + X, oy + Y, 40, 40, 48);\n    }\n  // One tick under the board for each solution this search has found, 31\n  // to a row; a full row turns dim and the next starts over it.\n  const ty = oy + BH + (oy > 6 ? 2 : 0), full = floor(S.found / 31), part = S.found % 31;\n  for (let i = 0; i \u003c 31; i++) {\n    const on = i \u003c part, x = 1 + 2 * i;\n    if (!on && full === 0) continue;\n    hsv(base + 0.1 * (on ? full : full - 1), on ? 0.25 : 0.5, 1, c);\n    const v = on ? (i === part - 1 && S.hold > 0 ? 255 : 190) : 70;\n    for (let y = ty; y \u003c min(H, ty + 2); y++) display.setPixel(x, y, round(c[0] * v), round(c[1] * v), round(c[2] * v));\n  }\n}\n","layer":{"id":"layer-pentomino-cover","type":"code","name":"pentomino-cover","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pentomino Cover\n// Family:  algo\n// Idea:    A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dancing Links and Algorithm X (Donald Knuth, 2000) on Solomon Golomb's pentominoes (1953), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1\n//\n// Knob 1: Hue. Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had.\n// Knob 2: Speed. Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3.\n// Knob 3: Board. 0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images.\n// Knob 4: Shuffle. How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search.\n// Buttons: K1 tap starts a new search in a new shuffled order.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, round, abs, pow, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The twelve pentominoes, F I L N P T U V W X Y Z.\nconst PIECES = [\n  [[1, 0], [2, 0], [0, 1], [1, 1], [1, 2]],\n  [[0, 0], [1, 0], [2, 0], [3, 0], [4, 0]],\n  [[0, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [0, 1], [1, 1], [0, 2]],\n  [[0, 0], [1, 0], [2, 0], [1, 1], [1, 2]],\n  [[0, 0], [2, 0], [0, 1], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [0, 2], [1, 2], [2, 2]],\n  [[0, 0], [0, 1], [1, 1], [1, 2], [2, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [1, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [1, 2], [2, 2]],\n];\nconst P_ = 4, X_ = 9;\n// Boards, columns by rows, and the LEDs a cell takes.\nconst BOARDS = [[6, 10, 10], [5, 12, 10], [4, 15, 8], [3, 20, 6]];\n\n// Every distinct orientation of a piece: the four turns first, then the\n// four turns of its mirror image, so flip marks the mirrored ones.\nfunction orientations(cells) {\n  const out = [], seen = new Set();\n  for (let f = 0; f \u003c 2; f++)\n    for (let q = 0; q \u003c 4; q++) {\n      let c = cells.map(([x, y]) => (f ? [-x, y] : [x, y]));\n      for (let k = 0; k \u003c q; k++) c = c.map(([x, y]) => [-y, x]);\n      const mx = min(...c.map((p) => p[0])), my = min(...c.map((p) => p[1]));\n      c = c.map(([x, y]) => [x - mx, y - my]).sort((a, b) => a[1] - b[1] || a[0] - b[0]);\n      const key = c.join(\";\");\n      if (!seen.has(key)) seen.add(key), out.push({ cells: c, flip: f });\n    }\n  return out;\n}\nconst ORIENT = PIECES.map(orientations);\n\n// The exact cover matrix: one column per piece, one per cell, and one\n// secondary column that keeps the count to solutions up to symmetry. The X\n// may only sit in the board's first quarter; when it sits on a mirror line\n// of the board the P may not be mirrored, and the secondary column holds\n// those two choices apart.\nfunction placements(bw, bh) {\n  const rows = [];\n  PIECES.forEach((_, pi) => {\n    for (const o of ORIENT[pi]) {\n      const ow = max(...o.cells.map((p) => p[0])) + 1, oh = max(...o.cells.map((p) => p[1])) + 1;\n      for (let y = 0; y + oh \u003c= bh; y++)\n        for (let x = 0; x + ow \u003c= bw; x++) {\n          let sec = pi === P_ && o.flip === 1;\n          if (pi === X_) {\n            const cx = x + 1, cy = y + 1;\n            if (2 * cx > bw - 1 || 2 * cy > bh - 1) continue;\n            sec = (bw % 2 === 1 && 2 * cx === bw - 1) || (bh % 2 === 1 && 2 * cy === bh - 1);\n          }\n          rows.push({ piece: pi, cells: o.cells.map(([a, b]) => (y + b) * bw + x + a), sec });\n        }\n    }\n  });\n  return rows;\n}\n\nconst MAXN = 16000;\nfunction newSearch(S, again) {\n  const [bw, bh] = BOARDS[S.board];\n  const rows = placements(bw, bh);\n  // Shuffle moves each row by up to twice that share of the list. A search\n  // started again keeps the order it had.\n  if (!again) S.jit = rows.map(() => random());\n  const key = rows.map((_, i) => i / rows.length + 2 * S.shuffle * S.jit[i]);\n  const order = rows.map((_, i) => i).sort((a, b) => key[a] - key[b]);\n  const NC = 12 + bw * bh, SEC = NC + 1;\n  const { L, R, U, D, C, RW, SZ } = S;\n  for (let c = 0; c \u003c= NC; c++) (L[c] = c - 1), (R[c] = c + 1), (U[c] = D[c] = C[c] = c), (SZ[c] = 0);\n  L[0] = NC;\n  R[NC] = 0;\n  L[SEC] = R[SEC] = U[SEC] = D[SEC] = C[SEC] = SEC;\n  let k = SEC + 1;\n  S.rows = order.map((i) => rows[i]);\n  S.rows.forEach((r, ri) => {\n    const cols = [1 + r.piece, ...r.cells.map((c) => 13 + c)];\n    if (r.sec) cols.push(SEC);\n    const first = k;\n    for (const c of cols) {\n      C[k] = c;\n      RW[k] = ri;\n      U[k] = U[c];\n      D[k] = c;\n      D[U[c]] = k;\n      U[c] = k;\n      SZ[c]++;\n      L[k] = k - 1;\n      R[k] = k + 1;\n      k++;\n    }\n    L[first] = k - 1;\n    R[k - 1] = first;\n  });\n  S.bw = bw;\n  S.bh = bh;\n  S.cs = BOARDS[S.board][2];\n  S.k = 0;\n  S.mode = 0;\n  S.done = false;\n  S.found = 0;\n  S.hold = 0;\n  S.cell.fill(-1);\n  S.age.fill(9);\n  S.ghost.fill(-1);\n  S.gAge.fill(9);\n  S.builtBoard = S.board;\n  S.builtShuffle = S.shuffle;\n}\n\nfunction cover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  L[R[c]] = L[c];\n  R[L[c]] = R[c];\n  for (let i = D[c]; i !== c; i = D[i])\n    for (let j = R[i]; j !== i; j = R[j]) (U[D[j]] = U[j]), (D[U[j]] = D[j]), SZ[C[j]]--;\n}\nfunction uncover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  for (let i = U[c]; i !== c; i = U[i])\n    for (let j = L[i]; j !== i; j = L[j]) SZ[C[j]]++, (U[D[j]] = j), (D[U[j]] = j);\n  L[R[c]] = c;\n  R[L[c]] = c;\n}\nfunction place(S, node, on) {\n  const r = S.rows[S.RW[node]];\n  for (const c of r.cells) {\n    if (on) (S.cell[c] = r.piece), (S.age[c] = 0);\n    else (S.ghost[c] = S.cell[c]), (S.gAge[c] = 0), (S.cell[c] = -1);\n  }\n}\n\n// Algorithm X, one node of the search tree a call: enter a level and cover\n// the column with the fewest rows left, try its next row, or step back.\n// Returns true when the board is full.\nfunction searchStep(S) {\n  const { L, R, D, C, SZ, col, row } = S;\n  if (S.mode === 0) {\n    if (R[0] === 0) {\n      S.mode = 2;\n      return true;\n    }\n    let c = R[0], best = 1e9;\n    for (let j = R[0]; j !== 0; j = R[j]) if (SZ[j] \u003c best) (best = SZ[j]), (c = j);\n    cover(S, c);\n    col[S.k] = c;\n    row[S.k] = D[c];\n    S.mode = 1;\n  } else if (S.mode === 1) {\n    const r = row[S.k];\n    if (r === col[S.k]) {\n      uncover(S, col[S.k]);\n      S.mode = 2;\n      return false;\n    }\n    for (let j = R[r]; j !== r; j = R[j]) cover(S, C[j]);\n    place(S, r, true);\n    S.k++;\n    S.mode = 0;\n  } else {\n    if (S.k === 0) {\n      S.done = true;\n      return false;\n    }\n    S.k--;\n    const r = row[S.k];\n    place(S, r, false);\n    for (let j = L[r]; j !== r; j = L[j]) uncover(S, C[j]);\n    row[S.k] = D[r];\n    S.mode = 1;\n  }\n  return false;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, board: 0, shuffle: 0.06, warm: false, acc: 0, sweep: 0,\n    L: new Int32Array(MAXN), R: new Int32Array(MAXN), U: new Int32Array(MAXN), D: new Int32Array(MAXN),\n    C: new Int32Array(MAXN), RW: new Int32Array(MAXN), SZ: new Int32Array(80), col: new Int32Array(16), row: new Int32Array(16),\n    cell: new Int8Array(60), age: new Float32Array(60), ghost: new Int8Array(60), gAge: new Float32Array(60),\n    key: new Int8Array(60), pc: new Int8Array(N), c: [0, 0, 0],\n  };\n}\n\n// A full cover holds for HOLD seconds; the search takes rate(Speed) steps a\n// second.\nconst HOLD = 2;\nconst rate = (sp) => 5 * pow(2, 3.5 * (sp - 0.2));\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.board = cl(round(k[2]), 0, 3);\n  S.shuffle = cl(k[3], 0, 1);\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (!S.warm || pressed || S.board !== S.builtBoard || abs(S.shuffle - S.builtShuffle) > 0.04) {\n    newSearch(S);\n    if (!S.warm) {\n      // Open about 1100 steps short of the first full board, so at Speed 2\n      // the first solution comes near 2.8 s.\n      let n = 0;\n      while (!searchStep(S) && !S.done) n++;\n      newSearch(S, true);\n      for (let i = 0; i \u003c n - 1100; i++) searchStep(S);\n      S.age.fill(9);\n      S.ghost.fill(-1);\n      S.warm = true;\n    }\n  }\n  for (let c = 0; c \u003c 60; c++) (S.age[c] += d), (S.gAge[c] += d);\n  if (S.hold > 0) {\n    S.hold = max(0, S.hold - d);\n    S.sweep += d / HOLD;\n    return;\n  }\n  if (S.done) {\n    newSearch(S);\n    return;\n  }\n  S.acc += d * rate(S.speed);\n  while (S.acc >= 1) {\n    S.acc--;\n    if (searchStep(S)) {\n      S.found++;\n      S.hold = HOLD;\n      S.sweep = 0;\n      S.acc = 0;\n      break;\n    }\n    if (S.done) break;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { bw, bh, cs, cell, age, ghost, gAge, key, pc, c } = S, base = S.hue + 0.55;\n  const BW = bw * cs + 1, BH = bh * cs + 1, ox = floor((W - BW) / 2), oy = floor((H - BH) / 2);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, 0, 0, 0);\n  // Each cell shows its piece, or for 0.18 s after the search takes a\n  // piece out, that piece's outline fading.\n  for (let i = 0; i \u003c bw * bh; i++) key[i] = cell[i] >= 0 ? cell[i] : ghost[i] >= 0 && gAge[i] \u003c 0.18 ? 12 + ghost[i] : -1;\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= bw || y >= bh ? -2 : key[y * bw + x]);\n  // A cell's own LEDs show its piece, a grid line between two cells of one\n  // piece that piece, any other grid line the dark seam.\n  pc.fill(-1);\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const gx = X % cs === 0, gy = Y % cs === 0, cx = floor(X / cs), cy = floor(Y / cs);\n      let q;\n      if (!gx && !gy) q = at(cx, cy);\n      else if (gx && !gy) q = at(cx - 1, cy) === at(cx, cy) ? at(cx, cy) : -1;\n      else if (!gx && gy) q = at(cx, cy - 1) === at(cx, cy) ? at(cx, cy) : -1;\n      else {\n        const a = at(cx - 1, cy - 1);\n        q = a === at(cx, cy - 1) && a === at(cx - 1, cy) && a === at(cx, cy) ? a : -1;\n      }\n      pc[(oy + Y) * W + ox + X] = q;\n    }\n  // A light sweeps across the board while a solution holds.\n  const band = S.hold > 0 ? -0.25 + 1.5 * cl(S.sweep, 0, 1) : -9;\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const p = (oy + Y) * W + ox + X, q = pc[p];\n      const cx = min(bw - 1, floor(X / cs)), cy = min(bh - 1, floor(Y / cs)), ci = cy * bw + cx;\n      const g = (X / BW + Y / BH) / 2 - band, lit = S.hold > 0 ? exp(-g * g * 90) : 0;\n      if (q >= 0 && q \u003c 12) {\n        // A slight bevel: lighter next to a seam above or to the left,\n        // darker next to one below or to the right.\n        const up = pc[p - W] \u003c 0 || pc[p - W] >= 12, lf = pc[p - 1] \u003c 0 || pc[p - 1] >= 12;\n        const dn = pc[p + W] \u003c 0 || pc[p + W] >= 12, rt = pc[p + 1] \u003c 0 || pc[p + 1] >= 12;\n        const fresh = cl(1 - age[ci] / 0.15, 0, 1);\n        const v = min(1, 0.82 + (up || lf ? 0.18 : 0) - (dn || rt ? 0.2 : 0) + 0.15 * fresh + 0.3 * lit);\n        hsv(base + q / 12, (0.72 - 0.3 * fresh) * (1 - 0.7 * lit), 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 255 * v), round(c[1] * 255 * v), round(c[2] * 255 * v));\n      } else if (q >= 12) {\n        // A piece just taken out leaves its outline for a moment.\n        if (pc[p - W] === q && pc[p + W] === q && pc[p - 1] === q && pc[p + 1] === q) continue;\n        const f = cl(1 - gAge[ci] / 0.18, 0, 1);\n        hsv(base + (q - 12) / 12, 0.6, 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 150 * f), round(c[1] * 150 * f), round(c[2] * 150 * f));\n      } else if (X === 0 || Y === 0 || X === BW - 1 || Y === BH - 1) display.setPixel(ox + X, oy + Y, 44, 44, 54);\n      else if (X % cs === 0 && Y % cs === 0) display.setPixel(ox + X, oy + Y, 40, 40, 48);\n    }\n  // One tick under the board for each solution this search has found, 31\n  // to a row; a full row turns dim and the next starts over it.\n  const ty = oy + BH + (oy > 6 ? 2 : 0), full = floor(S.found / 31), part = S.found % 31;\n  for (let i = 0; i \u003c 31; i++) {\n    const on = i \u003c part, x = 1 + 2 * i;\n    if (!on && full === 0) continue;\n    hsv(base + 0.1 * (on ? full : full - 1), on ? 0.25 : 0.5, 1, c);\n    const v = on ? (i === part - 1 && S.hold > 0 ? 255 : 190) : 70;\n    for (let y = ty; y \u003c min(H, ty + 2); y++) display.setPixel(x, y, round(c[0] * v), round(c[1] * v), round(c[2] * v));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had."},{"name":"Speed","min":0.2,"max":3,"about":"Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3."},{"name":"Board","min":0,"max":3,"about":"0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images."},{"name":"Shuffle","min":0,"max":1,"about":"How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search."}],"start":[0,2,0,0.06],"measures":{"motion":1.8284,"detail":0.0833,"edges":0.9414,"complexity":0.2159,"coverage":0.603,"colour":0.4009,"drift":0.2078},"knobResponse":[0.2347,0.2072,0.3116,0.2483]},{"slug":"percolation","title":"Percolation","family":"cells","round":30,"note":"LED 마다 정해 둔 난수가 p 보다 작으면 열리고, 이어진 자리끼리 제 색의 클러스터가 돼요. p 가 오르다 한 클러스터가 위아래 128줄을 이으면 금빛으로 켜지고 가장 짧은 길이 그어져요.","idea":"Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.","buttons":"K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.","code":"// ===== Patternflow pattern =====\n// Title:   Percolation\n// Family:  cells\n// Idea:    Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: percolation (Simon Broadbent and John Hammersley, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle.\n// Knob 2: Speed. How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s.\n// Knob 3: Window. How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site.\n// Knob 4: Small. How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour.\n// Buttons: K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sqrt, acos, imul } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Site percolation threshold of the square lattice with edge neighbours,\n// found numerically (Newman and Ziff, 2000, give 0.59274621). Below it every\n// cluster on the infinite lattice is finite; above it one is infinite; at it\n// the clusters are fractal, of dimension 91/48, at every scale.\nconst PC = 0.592746;\n// Phase speed of the sweep per unit of Speed, over the root of the sweep's\n// width in p, so a wide Window sweeps faster in p but not in proportion.\nconst RATE = 0.0657;\n// Crossing comes this many seconds after the start, at Speed 2.\nconst LEAD = 2.7;\n\n// Union-find with union by size and path halving.\nfunction find(par, i) {\n  while (par[i] !== i) {\n    const g = par[par[i]];\n    par[i] = g;\n    i = g;\n  }\n  return i;\n}\n\nfunction join(par, sz, a, b) {\n  a = find(par, a);\n  b = find(par, b);\n  if (a === b) return;\n  if (sz[a] \u003c sz[b]) {\n    const t = a;\n    a = b;\n    b = t;\n  }\n  par[b] = a;\n  sz[a] += sz[b];\n}\n\nfunction hash(i) {\n  let h = imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h ^= h >>> 13;\n  h = imul(h, 0xc2b2ae35);\n  h ^= h >>> 16;\n  return (h >>> 0) / 4294967296;\n}\n\n// p*, the lattice's own crossing point: open the sites one at a time in the\n// order of their numbers, as Newman and Ziff do, with the top row joined to\n// one extra node and the bottom row to another, and stop when the two meet.\n// On a 64-wide strip it lands a few hundredths either side of p_c; the\n// study's seed gives 0.6038.\nfunction threshold(P) {\n  const { u, par, sz } = P;\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => u[a] - u[b]);\n  const on = new Uint8Array(N);\n  (par[N] = N), (par[N + 1] = N + 1), (sz[N] = sz[N + 1] = 1);\n  for (const i of order) {\n    (on[i] = 1), (par[i] = i), (sz[i] = 1);\n    const x = i % W, y = (i / W) | 0;\n    if (x > 0 && on[i - 1]) join(par, sz, i, i - 1);\n    if (x \u003c W - 1 && on[i + 1]) join(par, sz, i, i + 1);\n    if (y === 0) join(par, sz, i, N);\n    else if (on[i - W]) join(par, sz, i, i - W);\n    if (y === H - 1) join(par, sz, i, N + 1);\n    else if (on[i + W]) join(par, sz, i, i + W);\n    if (find(par, N) === find(par, N + 1)) return u[i];\n  }\n  return 1;\n}\n\nfunction lattice(P) {\n  for (let i = 0; i \u003c N; i++) P.u[i] = Math.random();\n  P.pstar = threshold(P);\n  P.id.fill(-1);\n  (P.span = false), (P.soft = 1);\n}\n\n// The sweep runs from W below p_c (or below p*, on a lattice that crosses\n// early) to 0.3 W above p*, so every rise ends in a crossing. Returns the\n// phase speed.\nfunction sweep(P, win, speed) {\n  P.lo = min(PC, P.pstar) - win;\n  P.hi = P.pstar + 0.3 * win;\n  return (RATE * speed) / sqrt(P.hi - P.lo);\n}\n\n// Puts the phase LEAD seconds before the crossing at the given Window and\n// Speed. p = lo + (hi - lo)(1 - cos phase) / 2.\nfunction aim(P, win, speed) {\n  const w = sweep(P, win, speed);\n  P.phase = acos(cl(1 - (2 * (P.pstar - P.lo)) / (P.hi - P.lo), -1, 1)) - LEAD * w;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N + 2), F = () => new Float32Array(N);\n  const P = (params.s = {\n    u: F(), jit: F(), sat: F(), glow: F(), cr: F(), cg: F(), cb: F(),\n    par: I(), sz: I(), root: I(), id: I(), idSize: I(), idHue: F(),\n    best: I(), bestS: I(), muSite: I(), rid: I(), owner: I(), prev: I(), queue: I(), path: I(), pathK: I().fill(-1),\n    flag: new Uint8Array(N), used: new Uint8Array(N),\n    pathLen: 0, cur: 0, maxSize: 1, spanRoot: -1, flash: 0, pulse: 0, p: 0.5, pstar: PC, dt: 1 / 30,\n    hue: 0, speed: 2, win: 0.04, small: 0.06, soft: 1, phase: 0, span: false, lo: 0.55, hi: 0.62,\n  });\n  // A fixed tint per LED: hue off by up to 0.05 and saturation 0.6 to 0.98.\n  for (let i = 0; i \u003c N; i++) (P.jit[i] = (hash(i + 7919) - 0.5) * 0.1), (P.sat[i] = 0.6 + 0.38 * hash(i + 104729));\n  lattice(P);\n  // The opening is aimed for Window 0.04 and Speed 2 whatever the knobs say,\n  // so a faster Speed crosses sooner and a wider Window starts further down.\n  aim(P, 0.04, 2);\n}\n\n// Labels the clusters at the current p and hands each one a colour. A\n// cluster's colour is an id with a hue. When clusters merge, the merged one\n// keeps the id of whichever part was biggest a frame ago; when one splits,\n// the biggest piece keeps it and the rest take fresh ids, hued from their\n// lowest-numbered site. So the big clusters hold their colour through the\n// whole sweep and only the small ones change.\nfunction label(P) {\n  const { u, par, sz, root, flag, muSite, best, bestS, rid, owner, used, id, idSize, idHue, p } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (u[i] \u003c p) (par[i] = i), (sz[i] = 1);\n    else par[i] = -1;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    if (par[i] \u003c 0) continue;\n    if (i % W && par[i - 1] >= 0) join(par, sz, i, i - 1);\n    if (i >= W && par[i - W] >= 0) join(par, sz, i, i - W);\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const r = par[i] \u003c 0 ? -1 : find(par, i);\n    root[i] = r;\n    if (r === i) (flag[i] = 0), (muSite[i] = i), (best[i] = -1), (bestS[i] = -1);\n  }\n  // Which rows each cluster touches (1 top, 2 bottom), its lowest site, and\n  // of the ids its sites wore last frame, the one whose cluster was biggest.\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r \u003c 0) continue;\n    if (i \u003c W) flag[r] |= 1;\n    if (i >= N - W) flag[r] |= 2;\n    if (u[i] \u003c u[muSite[r]]) muSite[r] = i;\n    const a = id[i];\n    if (a >= 0 && idSize[a] > bestS[r]) (bestS[r] = idSize[a]), (best[r] = a);\n  }\n  owner.fill(-1);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && (owner[c] \u003c 0 || sz[r] > sz[owner[c]])) owner[c] = r;\n  }\n  used.fill(0);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && owner[c] === r) (rid[r] = c), (used[c] = 1);\n    else rid[r] = -1;\n  }\n  let big = 1, span = -1;\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    if (rid[r] \u003c 0) {\n      while (used[P.cur]) P.cur = (P.cur + 1) % N;\n      (rid[r] = P.cur), (used[P.cur] = 1), (idHue[P.cur] = hash(muSite[r]) - 0.5);\n    }\n    idSize[rid[r]] = sz[r];\n    if (sz[r] > big) big = sz[r];\n    if (flag[r] === 3 && (span \u003c 0 || sz[r] > sz[span])) span = r;\n  }\n  for (let i = 0; i \u003c N; i++) id[i] = root[i] \u003c 0 ? -1 : rid[root[i]];\n  P.maxSize = big;\n  P.spanRoot = span;\n}\n\n// The shortest open path from the top row to the bottom row inside the\n// crossing cluster: a breadth-first search from all its top-row sites at\n// once, stopped at the first bottom-row site it reaches.\nfunction shortest(P, R) {\n  const { root, prev, queue, pathK, path } = P;\n  for (let j = 0; j \u003c P.pathLen; j++) pathK[path[j]] = -1;\n  P.pathLen = 0;\n  if (R \u003c 0) return;\n  prev.fill(-2);\n  let qh = 0, qt = 0, end = -1;\n  for (let x = 0; x \u003c W; x++) if (root[x] === R) (prev[x] = -1), (queue[qt++] = x);\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i >= N - W) {\n      end = i;\n      break;\n    }\n    const x = i % W;\n    let n = i + W;\n    if (root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - 1;\n    if (x > 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i + 1;\n    if (x \u003c W - 1 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - W;\n    if (n >= 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n  }\n  let len = 0;\n  for (let i = end; i >= 0; i = prev[i]) len++;\n  let j = len;\n  for (let i = end; i >= 0; i = prev[i]) (path[--j] = i), (pathK[i] = j);\n  P.pathLen = len;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0.04, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.win = cl(k[2], 0.04, 0.2);\n  P.small = cl(k[3], -1, 1);\n  // K1: a fresh lattice, crossed 2.7 s from now at the current knobs.\n  if (input.btnPressed && input.btnPressed[0]) lattice(P), aim(P, P.win, P.speed);\n  P.phase += sweep(P, P.win, P.speed) * d;\n  P.p = P.lo + ((P.hi - P.lo) * (1 - cos(P.phase))) / 2;\n  label(P);\n  // The flash comes on the frame a cluster first joins top to bottom and\n  // fades in 0.6 s; the gold stays while it spans and fades in 0.35 s after.\n  const spanning = P.spanRoot >= 0;\n  if (spanning && !P.span) P.flash = 1;\n  P.span = spanning;\n  P.flash *= exp(-d / 0.6);\n  P.soft *= exp(-d / 0.5);\n  P.pulse += (30 + 25 * P.speed) * d;\n  const fall = exp(-d / 0.35), { root, flag, glow } = P;\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r >= 0 && flag[r] === 3) glow[i] = 1;\n    else glow[i] *= fall;\n  }\n  shortest(P, P.spanRoot);\n  P.dt = d;\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { u, root, id, sz, idHue, jit, sat, glow, pathK, cr, cg, cb, p } = P;\n  const gold = 0.125 + P.hue, sm = P.small, fl = P.flash;\n  // Small: brightness lo + (1 - lo) f^gam, f = log size / log largest size.\n  const lo = sm \u003c 0 ? 0.3 * (1 + sm) : 0.3 + 0.5 * sm, gam = sm \u003c 0 ? 1.2 - 2.8 * sm : 1.2;\n  const lb = 1 / log(max(2, P.maxSize));\n  // Each LED eases to its colour in 0.1 s, so a merge washes over a cluster\n  // instead of blinking; after a K1 tap, in 0.7 s.\n  const kk = 1 - exp(-P.dt / (0.1 + 0.6 * P.soft));\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    let R, G, B;\n    if (r \u003c 0) {\n      // A closed site keeps an ember under 20 of 255, brightest when its\n      // number is just above p and it is next to open.\n      const e = 1 - (u[i] - p) / (1 - p);\n      hsv(gold + 0.5 + jit[i], sat[i], 0.075 * e * e);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    } else {\n      // An open site burns brighter the longer it has been open, from 42% at\n      // u = p to full at u = 0, and comes up over its first 0.004 of p.\n      const f = log(sz[r]) * lb, v = lo + (1 - lo) * f ** gam;\n      const g = (0.42 + 0.58 * (1 - u[i] / p)) * cl((p - u[i]) / 0.004, 0, 1);\n      hsv(gold + 0.475 + 0.55 * idHue[id[i]] + jit[i], sat[i], v * g);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = glow[i];\n      if (w > 0.002) {\n        hsv(gold + 0.4 * jit[i], (0.4 + 0.45 * sat[i]) * (1 - fl), (0.6 + 0.38 * g) * (1 - fl) + fl);\n        (R += (C[0] - R) * w), (G += (C[1] - G) * w), (B += (C[2] - B) * w);\n      }\n      // The shortest path: white, with a drop every 48 sites running down it.\n      const j = pathK[i];\n      if (j >= 0) {\n        const q = (((P.pulse - j) % 48) + 48) % 48, b = 0.65 + 0.35 * max(0, 1 - q / 14);\n        (R += (1 - R) * b), (G += (0.97 - G) * b), (B += (0.9 - B) * b);\n      }\n    }\n    cr[i] += (R * 255 - cr[i]) * kk;\n    cg[i] += (G * 255 - cg[i]) * kk;\n    cb[i] += (B * 255 - cb[i]) * kk;\n    display.setPixel(i % W, (i / W) | 0, cr[i], cg[i], cb[i]);\n  }\n}\n","layer":{"id":"layer-percolation","type":"code","name":"percolation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Percolation\n// Family:  cells\n// Idea:    Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: percolation (Simon Broadbent and John Hammersley, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle.\n// Knob 2: Speed. How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s.\n// Knob 3: Window. How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site.\n// Knob 4: Small. How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour.\n// Buttons: K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sqrt, acos, imul } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Site percolation threshold of the square lattice with edge neighbours,\n// found numerically (Newman and Ziff, 2000, give 0.59274621). Below it every\n// cluster on the infinite lattice is finite; above it one is infinite; at it\n// the clusters are fractal, of dimension 91/48, at every scale.\nconst PC = 0.592746;\n// Phase speed of the sweep per unit of Speed, over the root of the sweep's\n// width in p, so a wide Window sweeps faster in p but not in proportion.\nconst RATE = 0.0657;\n// Crossing comes this many seconds after the start, at Speed 2.\nconst LEAD = 2.7;\n\n// Union-find with union by size and path halving.\nfunction find(par, i) {\n  while (par[i] !== i) {\n    const g = par[par[i]];\n    par[i] = g;\n    i = g;\n  }\n  return i;\n}\n\nfunction join(par, sz, a, b) {\n  a = find(par, a);\n  b = find(par, b);\n  if (a === b) return;\n  if (sz[a] \u003c sz[b]) {\n    const t = a;\n    a = b;\n    b = t;\n  }\n  par[b] = a;\n  sz[a] += sz[b];\n}\n\nfunction hash(i) {\n  let h = imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h ^= h >>> 13;\n  h = imul(h, 0xc2b2ae35);\n  h ^= h >>> 16;\n  return (h >>> 0) / 4294967296;\n}\n\n// p*, the lattice's own crossing point: open the sites one at a time in the\n// order of their numbers, as Newman and Ziff do, with the top row joined to\n// one extra node and the bottom row to another, and stop when the two meet.\n// On a 64-wide strip it lands a few hundredths either side of p_c; the\n// study's seed gives 0.6038.\nfunction threshold(P) {\n  const { u, par, sz } = P;\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => u[a] - u[b]);\n  const on = new Uint8Array(N);\n  (par[N] = N), (par[N + 1] = N + 1), (sz[N] = sz[N + 1] = 1);\n  for (const i of order) {\n    (on[i] = 1), (par[i] = i), (sz[i] = 1);\n    const x = i % W, y = (i / W) | 0;\n    if (x > 0 && on[i - 1]) join(par, sz, i, i - 1);\n    if (x \u003c W - 1 && on[i + 1]) join(par, sz, i, i + 1);\n    if (y === 0) join(par, sz, i, N);\n    else if (on[i - W]) join(par, sz, i, i - W);\n    if (y === H - 1) join(par, sz, i, N + 1);\n    else if (on[i + W]) join(par, sz, i, i + W);\n    if (find(par, N) === find(par, N + 1)) return u[i];\n  }\n  return 1;\n}\n\nfunction lattice(P) {\n  for (let i = 0; i \u003c N; i++) P.u[i] = Math.random();\n  P.pstar = threshold(P);\n  P.id.fill(-1);\n  (P.span = false), (P.soft = 1);\n}\n\n// The sweep runs from W below p_c (or below p*, on a lattice that crosses\n// early) to 0.3 W above p*, so every rise ends in a crossing. Returns the\n// phase speed.\nfunction sweep(P, win, speed) {\n  P.lo = min(PC, P.pstar) - win;\n  P.hi = P.pstar + 0.3 * win;\n  return (RATE * speed) / sqrt(P.hi - P.lo);\n}\n\n// Puts the phase LEAD seconds before the crossing at the given Window and\n// Speed. p = lo + (hi - lo)(1 - cos phase) / 2.\nfunction aim(P, win, speed) {\n  const w = sweep(P, win, speed);\n  P.phase = acos(cl(1 - (2 * (P.pstar - P.lo)) / (P.hi - P.lo), -1, 1)) - LEAD * w;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N + 2), F = () => new Float32Array(N);\n  const P = (params.s = {\n    u: F(), jit: F(), sat: F(), glow: F(), cr: F(), cg: F(), cb: F(),\n    par: I(), sz: I(), root: I(), id: I(), idSize: I(), idHue: F(),\n    best: I(), bestS: I(), muSite: I(), rid: I(), owner: I(), prev: I(), queue: I(), path: I(), pathK: I().fill(-1),\n    flag: new Uint8Array(N), used: new Uint8Array(N),\n    pathLen: 0, cur: 0, maxSize: 1, spanRoot: -1, flash: 0, pulse: 0, p: 0.5, pstar: PC, dt: 1 / 30,\n    hue: 0, speed: 2, win: 0.04, small: 0.06, soft: 1, phase: 0, span: false, lo: 0.55, hi: 0.62,\n  });\n  // A fixed tint per LED: hue off by up to 0.05 and saturation 0.6 to 0.98.\n  for (let i = 0; i \u003c N; i++) (P.jit[i] = (hash(i + 7919) - 0.5) * 0.1), (P.sat[i] = 0.6 + 0.38 * hash(i + 104729));\n  lattice(P);\n  // The opening is aimed for Window 0.04 and Speed 2 whatever the knobs say,\n  // so a faster Speed crosses sooner and a wider Window starts further down.\n  aim(P, 0.04, 2);\n}\n\n// Labels the clusters at the current p and hands each one a colour. A\n// cluster's colour is an id with a hue. When clusters merge, the merged one\n// keeps the id of whichever part was biggest a frame ago; when one splits,\n// the biggest piece keeps it and the rest take fresh ids, hued from their\n// lowest-numbered site. So the big clusters hold their colour through the\n// whole sweep and only the small ones change.\nfunction label(P) {\n  const { u, par, sz, root, flag, muSite, best, bestS, rid, owner, used, id, idSize, idHue, p } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (u[i] \u003c p) (par[i] = i), (sz[i] = 1);\n    else par[i] = -1;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    if (par[i] \u003c 0) continue;\n    if (i % W && par[i - 1] >= 0) join(par, sz, i, i - 1);\n    if (i >= W && par[i - W] >= 0) join(par, sz, i, i - W);\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const r = par[i] \u003c 0 ? -1 : find(par, i);\n    root[i] = r;\n    if (r === i) (flag[i] = 0), (muSite[i] = i), (best[i] = -1), (bestS[i] = -1);\n  }\n  // Which rows each cluster touches (1 top, 2 bottom), its lowest site, and\n  // of the ids its sites wore last frame, the one whose cluster was biggest.\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r \u003c 0) continue;\n    if (i \u003c W) flag[r] |= 1;\n    if (i >= N - W) flag[r] |= 2;\n    if (u[i] \u003c u[muSite[r]]) muSite[r] = i;\n    const a = id[i];\n    if (a >= 0 && idSize[a] > bestS[r]) (bestS[r] = idSize[a]), (best[r] = a);\n  }\n  owner.fill(-1);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && (owner[c] \u003c 0 || sz[r] > sz[owner[c]])) owner[c] = r;\n  }\n  used.fill(0);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && owner[c] === r) (rid[r] = c), (used[c] = 1);\n    else rid[r] = -1;\n  }\n  let big = 1, span = -1;\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    if (rid[r] \u003c 0) {\n      while (used[P.cur]) P.cur = (P.cur + 1) % N;\n      (rid[r] = P.cur), (used[P.cur] = 1), (idHue[P.cur] = hash(muSite[r]) - 0.5);\n    }\n    idSize[rid[r]] = sz[r];\n    if (sz[r] > big) big = sz[r];\n    if (flag[r] === 3 && (span \u003c 0 || sz[r] > sz[span])) span = r;\n  }\n  for (let i = 0; i \u003c N; i++) id[i] = root[i] \u003c 0 ? -1 : rid[root[i]];\n  P.maxSize = big;\n  P.spanRoot = span;\n}\n\n// The shortest open path from the top row to the bottom row inside the\n// crossing cluster: a breadth-first search from all its top-row sites at\n// once, stopped at the first bottom-row site it reaches.\nfunction shortest(P, R) {\n  const { root, prev, queue, pathK, path } = P;\n  for (let j = 0; j \u003c P.pathLen; j++) pathK[path[j]] = -1;\n  P.pathLen = 0;\n  if (R \u003c 0) return;\n  prev.fill(-2);\n  let qh = 0, qt = 0, end = -1;\n  for (let x = 0; x \u003c W; x++) if (root[x] === R) (prev[x] = -1), (queue[qt++] = x);\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i >= N - W) {\n      end = i;\n      break;\n    }\n    const x = i % W;\n    let n = i + W;\n    if (root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - 1;\n    if (x > 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i + 1;\n    if (x \u003c W - 1 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - W;\n    if (n >= 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n  }\n  let len = 0;\n  for (let i = end; i >= 0; i = prev[i]) len++;\n  let j = len;\n  for (let i = end; i >= 0; i = prev[i]) (path[--j] = i), (pathK[i] = j);\n  P.pathLen = len;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0.04, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.win = cl(k[2], 0.04, 0.2);\n  P.small = cl(k[3], -1, 1);\n  // K1: a fresh lattice, crossed 2.7 s from now at the current knobs.\n  if (input.btnPressed && input.btnPressed[0]) lattice(P), aim(P, P.win, P.speed);\n  P.phase += sweep(P, P.win, P.speed) * d;\n  P.p = P.lo + ((P.hi - P.lo) * (1 - cos(P.phase))) / 2;\n  label(P);\n  // The flash comes on the frame a cluster first joins top to bottom and\n  // fades in 0.6 s; the gold stays while it spans and fades in 0.35 s after.\n  const spanning = P.spanRoot >= 0;\n  if (spanning && !P.span) P.flash = 1;\n  P.span = spanning;\n  P.flash *= exp(-d / 0.6);\n  P.soft *= exp(-d / 0.5);\n  P.pulse += (30 + 25 * P.speed) * d;\n  const fall = exp(-d / 0.35), { root, flag, glow } = P;\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r >= 0 && flag[r] === 3) glow[i] = 1;\n    else glow[i] *= fall;\n  }\n  shortest(P, P.spanRoot);\n  P.dt = d;\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { u, root, id, sz, idHue, jit, sat, glow, pathK, cr, cg, cb, p } = P;\n  const gold = 0.125 + P.hue, sm = P.small, fl = P.flash;\n  // Small: brightness lo + (1 - lo) f^gam, f = log size / log largest size.\n  const lo = sm \u003c 0 ? 0.3 * (1 + sm) : 0.3 + 0.5 * sm, gam = sm \u003c 0 ? 1.2 - 2.8 * sm : 1.2;\n  const lb = 1 / log(max(2, P.maxSize));\n  // Each LED eases to its colour in 0.1 s, so a merge washes over a cluster\n  // instead of blinking; after a K1 tap, in 0.7 s.\n  const kk = 1 - exp(-P.dt / (0.1 + 0.6 * P.soft));\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    let R, G, B;\n    if (r \u003c 0) {\n      // A closed site keeps an ember under 20 of 255, brightest when its\n      // number is just above p and it is next to open.\n      const e = 1 - (u[i] - p) / (1 - p);\n      hsv(gold + 0.5 + jit[i], sat[i], 0.075 * e * e);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    } else {\n      // An open site burns brighter the longer it has been open, from 42% at\n      // u = p to full at u = 0, and comes up over its first 0.004 of p.\n      const f = log(sz[r]) * lb, v = lo + (1 - lo) * f ** gam;\n      const g = (0.42 + 0.58 * (1 - u[i] / p)) * cl((p - u[i]) / 0.004, 0, 1);\n      hsv(gold + 0.475 + 0.55 * idHue[id[i]] + jit[i], sat[i], v * g);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = glow[i];\n      if (w > 0.002) {\n        hsv(gold + 0.4 * jit[i], (0.4 + 0.45 * sat[i]) * (1 - fl), (0.6 + 0.38 * g) * (1 - fl) + fl);\n        (R += (C[0] - R) * w), (G += (C[1] - G) * w), (B += (C[2] - B) * w);\n      }\n      // The shortest path: white, with a drop every 48 sites running down it.\n      const j = pathK[i];\n      if (j >= 0) {\n        const q = (((P.pulse - j) % 48) + 48) % 48, b = 0.65 + 0.35 * max(0, 1 - q / 14);\n        (R += (1 - R) * b), (G += (0.97 - G) * b), (B += (0.9 - B) * b);\n      }\n    }\n    cr[i] += (R * 255 - cr[i]) * kk;\n    cg[i] += (G * 255 - cg[i]) * kk;\n    cb[i] += (B * 255 - cb[i]) * kk;\n    display.setPixel(i % W, (i / W) | 0, cr[i], cg[i], cb[i]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle."},{"name":"Speed","min":0.2,"max":3,"about":"How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s."},{"name":"Window","min":0.04,"max":0.2,"about":"How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site."},{"name":"Small","min":-1,"max":1,"about":"How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour."}],"start":[0,2,0.04,0.06],"measures":{"motion":0.076,"detail":0.3535,"edges":0.6496,"complexity":2.5378,"coverage":0.6081,"colour":0.3525,"drift":0.1555},"knobResponse":[0.2138,0.2514,0.1582,0.0547]},{"slug":"perron-tree","title":"Perron Tree","family":"geometry","round":29,"note":"키 120 LED 삼각형을 2^n 조각으로 잘라 페론처럼 한 단씩 겹쳐 밀면, 모든 방향을 품은 채 넓이가 30% 로 줄어든 나무가 돼요. 흰 바늘이 모든 방향을 돌며 싹에서 싹으로 건너뛰어요. K3 은 단 수(32~256 조각)이고 K1 을 누르면 삼각형부터 다시 지어요.","idea":"A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.","buttons":"K1 tap starts again from the single triangle.","code":"// ===== Patternflow pattern =====\n// Title:   Perron Tree\n// Family:  geometry\n// Idea:    A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kakeya needle problem (Sōichi Kakeya, 1917), Besicovitch set drawn as Oskar Perron's tree (1928), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1\n//\n// Knob 1: Hue. Turns the sweep of colours that marks each sliver's direction round the wheel.\n// Knob 2: Speed. How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three.\n// Knob 3: Depth. How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8.\n// Knob 4: Slide. How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was.\n// Buttons: K1 tap starts again from the single triangle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, cos, abs, pow, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The triangle: base on the bottom edge, BW LEDs wide, apex HT LEDs up.\nconst BW = 60, HT = 120, Y0 = 128, MAXN = 8, MAXM = 1 \u003c\u003c MAXN;\n// How much of the blurred light comes back as glow (the blur sums to 81).\nconst GLOW = 0.22 / 81;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0];\n  out[o + 1] = c[1];\n  out[o + 2] = c[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    lam: 0, hold: 0, phase: 0, needle: 0, n: 5, g: 0.8, hue: 0,\n    acc: new Float32Array(N * 3), trail: new Float32Array(N), fade: 1, blo: new Float32Array(N * 3), sh: new Float32Array(MAXM), tj: new Float32Array(MAXN + 1), dur: new Float32Array(MAXN + 1),\n    col: new Float32Array(MAXM * 3),\n  };\n}\n\n// Perron's slides. At level j the base pieces pair up in groups of 2^j and\n// the right half of each group slides left by tj[j]: first closing the gap\n// its heart left at the level before, then a further 2(1 - g) of its half\n// base, so the two halves cross at 2g - 1 of the group triangle's height and\n// fork into two sprouts above it. What lies below is the group's heart, its\n// triangle shrunk by g^j toward its left corner, and the next level slides\n// hearts the same way. (Stein's write-up of Schoenberg's version.)\nfunction slides(P, n, g) {\n  const w = BW / (1 \u003c\u003c n);\n  for (let j = 1; j \u003c= n; j++) {\n    const half = w * (1 \u003c\u003c (j - 1)), s = pow(g, j - 1);\n    P.tj[j] = half * (1 - s) + 2 * (1 - g) * s * half;\n  }\n  // Seconds per level at Speed 2: the first levels move a fraction of an\n  // LED and go by quickly, the last ones take their time.\n  for (let j = 1; j \u003c= n; j++) P.dur[j] = 0.3 + 1.7 * pow(P.tj[j] / P.tj[n], 0.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) / 2;\n  P.hue = cl(k[0], 0, 1);\n  const n = cl(round(k[2]), 5, MAXN), g = 0.8 - 0.12 * cl(k[3], -1, 1);\n  if (n !== P.n || abs(g - P.g) > 1e-4) {\n    // Keep the same share of the build when the depth changes.\n    const frac = P.lam / P.n;\n    P.n = n;\n    P.g = g;\n    P.lam = frac * n;\n  }\n  slides(P, P.n, P.g);\n  if (input.btnPressed && input.btnPressed[0]) (P.phase = 0), (P.lam = 0), (P.hold = 0);\n  // Build level by level, hold the tree, take it apart again from the top\n  // level down at twice the pace, rest on the whole triangle, and again.\n  if (P.phase === 0) {\n    P.lam += d / P.dur[min(P.n, floor(P.lam) + 1)];\n    if (P.lam >= P.n) (P.lam = P.n), (P.phase = 1), (P.hold = 0);\n  } else if (P.phase === 1) {\n    if ((P.hold += d) > 6) P.phase = 2;\n  } else if (P.phase === 2) {\n    P.lam -= (2 * d) / P.dur[cl(Math.ceil(P.lam), 1, P.n)];\n    if (P.lam \u003c= 0) (P.lam = 0), (P.phase = 3), (P.hold = 0);\n  } else if ((P.hold += d) > 1.2) P.phase = 0;\n  P.needle += d * 0.11;\n  P.fade = exp(-cl(dt || 0, 0, 0.1) / 0.12);\n}\n\n// One row of one sliver into the light buffer: the span [l, r) at row y.\n// A span under an LED wide is drawn one LED wide and dimmer, so the sprouts\n// taper in light rather than vanish between LEDs.\nfunction span(acc, y, l, r, cr, cg, cb) {\n  let wd = r - l, k = 1;\n  if (wd \u003c 1) {\n    const c = (l + r) / 2;\n    k = sqrt(max(wd, 0));\n    (l = c - 0.5), (r = c + 0.5), (wd = 1);\n  }\n  const x0 = max(0, floor(l)), x1 = min(W - 1, floor(r - 1e-6));\n  for (let x = x0, p = (y * W + x0) * 3; x \u003c= x1; x++, p += 3) {\n    const cov = (min(r, x + 1) - max(l, x)) * k;\n    if (cov \u003c= 0) continue;\n    acc[p] += cr * cov;\n    acc[p + 1] += cg * cov;\n    acc[p + 2] += cb * cov;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, M = 1 \u003c\u003c n, w = BW / M, acc = P.acc, sh = P.sh, col = P.col;\n  acc.fill(0);\n  // How far each level has slid: level j runs while lam goes from j-1 to j.\n  let lo = 1e9, hi = -1e9;\n  for (let i = 0; i \u003c M; i++) {\n    let s = 0;\n    for (let j = 1; j \u003c= n; j++) if ((i >> (j - 1)) & 1) s -= P.tj[j] * sm(P.lam - (j - 1));\n    sh[i] = s;\n    lo = min(lo, s + i * w, s + BW / 2);\n    hi = max(hi, s + (i + 1) * w, s + BW / 2);\n  }\n  // Keep the whole figure centred as it slides.\n  const ox = W / 2 - (lo + hi) / 2;\n  // Each sliver's colour from its direction, the hue sweeping 0.8 of the wheel\n  // from one side of the triangle to the other.\n  // One sliver alone tones to about 140 of 255, two to 200, four near white.\n  for (let i = 0; i \u003c M; i++) hsv(P.hue + 0.5 + (0.8 * (i + 0.5)) / M, 0.85, 0.5, col, i * 3);\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT;\n    if (f \u003c 0 || f > 1) continue;\n    for (let i = 0; i \u003c M; i++) {\n      const a = ox + sh[i] + BW / 2, l = ox + sh[i] + i * w, r = l + w;\n      span(acc, y, l + (a - l) * f, r + (a - r) * f, col[i * 3], col[i * 3 + 1], col[i * 3 + 2]);\n    }\n  }\n  // The needle: a segment the height of the triangle, swinging through every\n  // direction between its sides and back. Its direction picks the base point\n  // it stands on, and that point the sliver whose sprout holds it.\n  const sw = 0.5 - 0.5 * cos(P.needle * 2 * PI), b = sw * BW, i = min(M - 1, floor(b / w));\n  const bx = ox + sh[i] + b, ax = ox + sh[i] + BW / 2, tr = P.trail, fd = P.fade;\n  // Its light fades over about a tenth of a second, which softens each hop.\n  for (let p = 0; p \u003c N; p++) tr[p] *= fd;\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT, x = bx + (ax - bx) * f;\n    for (let xx = max(0, floor(x - 2)); xx \u003c= min(W - 1, floor(x + 2)); xx++) {\n      const dd = abs(xx + 0.5 - x), wgt = dd \u003c 0.5 ? 1 : dd \u003c 1.5 ? 0.9 * (1.5 - dd) : 0.12 * (2.5 - dd), p = y * W + xx;\n      if (wgt > tr[p]) tr[p] = wgt;\n    }\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const v = tr[p];\n    if (v \u003c 0.01) continue;\n    acc[q] += 1.6 * v;\n    acc[q + 1] += 1.55 * v;\n    acc[q + 2] += 1.4 * v;\n  }\n  // A soft glow round everything bright: a 5 by 5 blur, about a fifth of it\n  // added back, so the thin sprouts read from a few metres away.\n  const blo = P.blo;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W * 3; x \u003c W; x++, p += 3)\n      for (let c = 0; c \u003c 3; c++) blo[p + c] = (x > 1 ? acc[p + c - 6] : 0) + 2 * (x > 0 ? acc[p + c - 3] : 0) + 3 * acc[p + c] + 2 * (x \u003c W - 1 ? acc[p + c + 3] : 0) + (x \u003c W - 2 ? acc[p + c + 6] : 0);\n  // Overlaps add up: light piles toward white where many slivers cross.\n  const R = W * 3, tone = (q, y) => {\n    const g = (y > 1 ? blo[q - 2 * R] : 0) + 2 * (y > 0 ? blo[q - R] : 0) + 3 * blo[q] + 2 * (y \u003c H - 1 ? blo[q + R] : 0) + (y \u003c H - 2 ? blo[q + 2 * R] : 0);\n    return 255 * (1 - exp(-1.6 * (acc[q] + GLOW * g)));\n  };\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, tone(p, y), tone(p + 1, y), tone(p + 2, y));\n}\n","layer":{"id":"layer-perron-tree","type":"code","name":"perron-tree","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Perron Tree\n// Family:  geometry\n// Idea:    A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kakeya needle problem (Sōichi Kakeya, 1917), Besicovitch set drawn as Oskar Perron's tree (1928), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1\n//\n// Knob 1: Hue. Turns the sweep of colours that marks each sliver's direction round the wheel.\n// Knob 2: Speed. How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three.\n// Knob 3: Depth. How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8.\n// Knob 4: Slide. How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was.\n// Buttons: K1 tap starts again from the single triangle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, cos, abs, pow, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The triangle: base on the bottom edge, BW LEDs wide, apex HT LEDs up.\nconst BW = 60, HT = 120, Y0 = 128, MAXN = 8, MAXM = 1 \u003c\u003c MAXN;\n// How much of the blurred light comes back as glow (the blur sums to 81).\nconst GLOW = 0.22 / 81;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0];\n  out[o + 1] = c[1];\n  out[o + 2] = c[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    lam: 0, hold: 0, phase: 0, needle: 0, n: 5, g: 0.8, hue: 0,\n    acc: new Float32Array(N * 3), trail: new Float32Array(N), fade: 1, blo: new Float32Array(N * 3), sh: new Float32Array(MAXM), tj: new Float32Array(MAXN + 1), dur: new Float32Array(MAXN + 1),\n    col: new Float32Array(MAXM * 3),\n  };\n}\n\n// Perron's slides. At level j the base pieces pair up in groups of 2^j and\n// the right half of each group slides left by tj[j]: first closing the gap\n// its heart left at the level before, then a further 2(1 - g) of its half\n// base, so the two halves cross at 2g - 1 of the group triangle's height and\n// fork into two sprouts above it. What lies below is the group's heart, its\n// triangle shrunk by g^j toward its left corner, and the next level slides\n// hearts the same way. (Stein's write-up of Schoenberg's version.)\nfunction slides(P, n, g) {\n  const w = BW / (1 \u003c\u003c n);\n  for (let j = 1; j \u003c= n; j++) {\n    const half = w * (1 \u003c\u003c (j - 1)), s = pow(g, j - 1);\n    P.tj[j] = half * (1 - s) + 2 * (1 - g) * s * half;\n  }\n  // Seconds per level at Speed 2: the first levels move a fraction of an\n  // LED and go by quickly, the last ones take their time.\n  for (let j = 1; j \u003c= n; j++) P.dur[j] = 0.3 + 1.7 * pow(P.tj[j] / P.tj[n], 0.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) / 2;\n  P.hue = cl(k[0], 0, 1);\n  const n = cl(round(k[2]), 5, MAXN), g = 0.8 - 0.12 * cl(k[3], -1, 1);\n  if (n !== P.n || abs(g - P.g) > 1e-4) {\n    // Keep the same share of the build when the depth changes.\n    const frac = P.lam / P.n;\n    P.n = n;\n    P.g = g;\n    P.lam = frac * n;\n  }\n  slides(P, P.n, P.g);\n  if (input.btnPressed && input.btnPressed[0]) (P.phase = 0), (P.lam = 0), (P.hold = 0);\n  // Build level by level, hold the tree, take it apart again from the top\n  // level down at twice the pace, rest on the whole triangle, and again.\n  if (P.phase === 0) {\n    P.lam += d / P.dur[min(P.n, floor(P.lam) + 1)];\n    if (P.lam >= P.n) (P.lam = P.n), (P.phase = 1), (P.hold = 0);\n  } else if (P.phase === 1) {\n    if ((P.hold += d) > 6) P.phase = 2;\n  } else if (P.phase === 2) {\n    P.lam -= (2 * d) / P.dur[cl(Math.ceil(P.lam), 1, P.n)];\n    if (P.lam \u003c= 0) (P.lam = 0), (P.phase = 3), (P.hold = 0);\n  } else if ((P.hold += d) > 1.2) P.phase = 0;\n  P.needle += d * 0.11;\n  P.fade = exp(-cl(dt || 0, 0, 0.1) / 0.12);\n}\n\n// One row of one sliver into the light buffer: the span [l, r) at row y.\n// A span under an LED wide is drawn one LED wide and dimmer, so the sprouts\n// taper in light rather than vanish between LEDs.\nfunction span(acc, y, l, r, cr, cg, cb) {\n  let wd = r - l, k = 1;\n  if (wd \u003c 1) {\n    const c = (l + r) / 2;\n    k = sqrt(max(wd, 0));\n    (l = c - 0.5), (r = c + 0.5), (wd = 1);\n  }\n  const x0 = max(0, floor(l)), x1 = min(W - 1, floor(r - 1e-6));\n  for (let x = x0, p = (y * W + x0) * 3; x \u003c= x1; x++, p += 3) {\n    const cov = (min(r, x + 1) - max(l, x)) * k;\n    if (cov \u003c= 0) continue;\n    acc[p] += cr * cov;\n    acc[p + 1] += cg * cov;\n    acc[p + 2] += cb * cov;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, M = 1 \u003c\u003c n, w = BW / M, acc = P.acc, sh = P.sh, col = P.col;\n  acc.fill(0);\n  // How far each level has slid: level j runs while lam goes from j-1 to j.\n  let lo = 1e9, hi = -1e9;\n  for (let i = 0; i \u003c M; i++) {\n    let s = 0;\n    for (let j = 1; j \u003c= n; j++) if ((i >> (j - 1)) & 1) s -= P.tj[j] * sm(P.lam - (j - 1));\n    sh[i] = s;\n    lo = min(lo, s + i * w, s + BW / 2);\n    hi = max(hi, s + (i + 1) * w, s + BW / 2);\n  }\n  // Keep the whole figure centred as it slides.\n  const ox = W / 2 - (lo + hi) / 2;\n  // Each sliver's colour from its direction, the hue sweeping 0.8 of the wheel\n  // from one side of the triangle to the other.\n  // One sliver alone tones to about 140 of 255, two to 200, four near white.\n  for (let i = 0; i \u003c M; i++) hsv(P.hue + 0.5 + (0.8 * (i + 0.5)) / M, 0.85, 0.5, col, i * 3);\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT;\n    if (f \u003c 0 || f > 1) continue;\n    for (let i = 0; i \u003c M; i++) {\n      const a = ox + sh[i] + BW / 2, l = ox + sh[i] + i * w, r = l + w;\n      span(acc, y, l + (a - l) * f, r + (a - r) * f, col[i * 3], col[i * 3 + 1], col[i * 3 + 2]);\n    }\n  }\n  // The needle: a segment the height of the triangle, swinging through every\n  // direction between its sides and back. Its direction picks the base point\n  // it stands on, and that point the sliver whose sprout holds it.\n  const sw = 0.5 - 0.5 * cos(P.needle * 2 * PI), b = sw * BW, i = min(M - 1, floor(b / w));\n  const bx = ox + sh[i] + b, ax = ox + sh[i] + BW / 2, tr = P.trail, fd = P.fade;\n  // Its light fades over about a tenth of a second, which softens each hop.\n  for (let p = 0; p \u003c N; p++) tr[p] *= fd;\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT, x = bx + (ax - bx) * f;\n    for (let xx = max(0, floor(x - 2)); xx \u003c= min(W - 1, floor(x + 2)); xx++) {\n      const dd = abs(xx + 0.5 - x), wgt = dd \u003c 0.5 ? 1 : dd \u003c 1.5 ? 0.9 * (1.5 - dd) : 0.12 * (2.5 - dd), p = y * W + xx;\n      if (wgt > tr[p]) tr[p] = wgt;\n    }\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const v = tr[p];\n    if (v \u003c 0.01) continue;\n    acc[q] += 1.6 * v;\n    acc[q + 1] += 1.55 * v;\n    acc[q + 2] += 1.4 * v;\n  }\n  // A soft glow round everything bright: a 5 by 5 blur, about a fifth of it\n  // added back, so the thin sprouts read from a few metres away.\n  const blo = P.blo;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W * 3; x \u003c W; x++, p += 3)\n      for (let c = 0; c \u003c 3; c++) blo[p + c] = (x > 1 ? acc[p + c - 6] : 0) + 2 * (x > 0 ? acc[p + c - 3] : 0) + 3 * acc[p + c] + 2 * (x \u003c W - 1 ? acc[p + c + 3] : 0) + (x \u003c W - 2 ? acc[p + c + 6] : 0);\n  // Overlaps add up: light piles toward white where many slivers cross.\n  const R = W * 3, tone = (q, y) => {\n    const g = (y > 1 ? blo[q - 2 * R] : 0) + 2 * (y > 0 ? blo[q - R] : 0) + 3 * blo[q] + 2 * (y \u003c H - 1 ? blo[q + R] : 0) + (y \u003c H - 2 ? blo[q + 2 * R] : 0);\n    return 255 * (1 - exp(-1.6 * (acc[q] + GLOW * g)));\n  };\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, tone(p, y), tone(p + 1, y), tone(p + 2, y));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the sweep of colours that marks each sliver's direction round the wheel."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three."},{"name":"Depth","min":5,"max":8,"about":"How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8."},{"name":"Slide","min":-1,"max":1,"about":"How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was."}],"start":[0,2,5,0.06],"measures":{"motion":0.2474,"detail":0.037,"edges":0.3794,"complexity":1.0174,"coverage":0.2747,"colour":0.1818,"drift":0.2212},"knobResponse":[0.075,0.1981,0.1861,0.1179]},{"slug":"photochromic","title":"Photochromic","family":"cosmetic","round":38,"note":"LED 마다 맨 폴리시이거나 펄 조각인 옅은 매니큐어 위로 보이지 않는 UV 손전등이 구불구불 쓸고 지나가면, 지나간 자리가 순식간에 짙은 보석 색으로 바뀌었다가 몇 초에 걸쳐 다시 옅어져요. K3 은 펄 조각을 한 LED 에서 네 LED 너비로 키워 굵은 글리터로 바꾸고, K1 을 누르면 지난번과 반대쪽으로 한 번 더 쓸어요.","idea":"A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.","buttons":"K1 tap sends a stroke now, running the other way from the last one.","code":"// ===== Patternflow pattern =====\n// Title:   Photochromic\n// Family:  cosmetic\n// Idea:    A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after photochromic nail polish, pale in the shade, that deepens under UV light and fades back [Beer-Lambert law, August Beer, 1852]\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1\n//\n// Knob 1: Hue. Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening.\n// Knob 2: Speed. At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds.\n// Knob 3: Flakes. The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter.\n// Knob 4: Fade. How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture.\n// Buttons: K1 tap sends a stroke now, running the other way from the last one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sin, exp, round, random, LN10, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Seconds at Speed 2: a stroke every PERIOD, crossing in SWEEP. The first\n// stroke of a fresh start begins at FIRST; the one before it, which ended\n// 8.4 seconds before the start, is run through when the pattern opens.\nconst PERIOD = 13, SWEEP = 2.4, FIRST = 2.2;\n// The torch: a soft spot of sigma SIG LEDs, weaving AMP LEDs either side of\n// the middle; the dye switches at KON per second where it is brightest.\nconst SIG = 15, AMP = 20, KON = 10;\n// Optical density of the switched dye, so the depth of colour goes as\n// 1 - 10^(-OD a) (Beer-Lambert): it holds dark while most of the dye is\n// still switched and lets go toward the end.\nconst OD = 2;\n// The fade, from a = 0.95 to the a where the colour is half gone.\nconst HALF_A = 1.856;\n// Opening hue: violet, not red.\nconst H0 = 0.76;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, flakes: 1, fade: 0.06, t: 0, begun: false, k: 0, tx: -99, ty: -99, on: 0,\n    a: new Float32Array(N), g: new Float32Array(N), ph: new Float32Array(N), om: new Float32Array(N),\n    size: 0, pale: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], pearl: [0, 0, 0], extra: -1,\n  };\n}\n\n// The flakes for a size, one glint per LED, every LED of a flake sharing\n// it: 1 catches the light, -1 is turned away and shades the polish under\n// it, 0 is bare polish. At size 1 every LED holds mica, 38% catching the\n// light, 22% turned away; larger flakes are fewer, 30% and 10%.\nfunction flakes(S, size) {\n  const { g, ph, om } = S;\n  const cw = Math.ceil(W / size), nc = cw * Math.ceil(H / size);\n  const cg = new Float32Array(nc), cp = new Float32Array(nc), co = new Float32Array(nc);\n  for (let c = 0; c \u003c nc; c++) {\n    const u = random();\n    if (size === 1) cg[c] = u \u003c 0.4 ? 0 : u \u003c 0.62 ? -1 : 1;\n    else cg[c] = u \u003c 0.6 ? 0 : u \u003c 0.7 ? -1 : 1;\n    cp[c] = random() * TAU;\n    co[c] = 0.8 + 0.7 * random();\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = floor(y / size) * cw + floor(x / size), i = y * W + x;\n      // Flakes three or four across lose their corners.\n      const ex = x % size === 0 || x % size === size - 1, ey = y % size === 0 || y % size === size - 1;\n      g[i] = size > 2 && ex && ey ? 0 : cg[c];\n      ph[i] = cp[c];\n      om[i] = co[c];\n    }\n  S.size = size;\n}\n\n// Where stroke k has the torch at progress s (0..1): strokes alternate down\n// and up the panel, weaving side to side, each a little different.\nfunction torchAt(S, k, s) {\n  const down = (k & 1) === 0, w = 2.4 + 0.5 * ((k * 0.618 + 10) % 1), ph = k * 2.4;\n  S.ty = down ? -30 + s * (H + 60) : H + 30 - s * (H + 60);\n  S.tx = W / 2 + AMP * sin(TAU * w * s + ph);\n}\n\n// Advance the dye by dt seconds of pattern time: switched by the torch at\n// KON times its intensity, back by the thermal fade.\nfunction dye(S, dt) {\n  const a = S.a, half = 4.5 * 3 ** S.fade, decay = exp((-HALF_A / half) * dt);\n  for (let i = 0; i \u003c N; i++) a[i] *= decay;\n  if (!S.on) return;\n  const R = 3 * SIG, x0 = max(0, floor(S.tx - R)), x1 = min(W - 1, Math.ceil(S.tx + R));\n  const y0 = max(0, floor(S.ty - R)), y1 = min(H - 1, Math.ceil(S.ty + R));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, I = exp(-(dx * dx + dy * dy) / (2 * SIG * SIG));\n      if (I \u003c 0.01) continue;\n      const i = y * W + x;\n      a[i] += (1 - a[i]) * (1 - exp(-KON * I * dt));\n    }\n}\n\n// Run the clock from t0 to t1 in steps, strokes switching on and off.\nfunction run(S, t0, t1, step) {\n  for (let t = t0; t \u003c t1 - 1e-9; t += step) {\n    const d = min(step, t1 - t), tm = t + d;\n    const k = floor((tm - FIRST) / PERIOD), s = (tm - FIRST - k * PERIOD) / SWEEP;\n    S.on = 0;\n    if (s \u003c= 1) {\n      S.on = 1;\n      S.k = k;\n      torchAt(S, k, s);\n    }\n    if (S.extra >= 0) {\n      const se = (tm - S.extra) / SWEEP;\n      if (se \u003c= 1) {\n        S.on = 1;\n        torchAt(S, S.k + 1, se);\n      } else S.extra = -1;\n    }\n    dye(S, d);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.flakes = cl(k[2], 1, 4);\n  S.fade = cl(k[3], -1, 1);\n  const size = round(S.flakes);\n  if (size !== S.size) flakes(S, size);\n  if (!S.begun) {\n    S.t = FIRST - PERIOD - 0.3;\n    run(S, S.t, 0, 0.1);\n    S.t = 0;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.extra \u003c 0) S.extra = S.t;\n  const step = (d * S.speed) / 2;\n  if (step > 0) run(S, S.t, S.t + step, step);\n  S.t += step;\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Red, orange, yellow and lime go brown or olive when dark: there the\n  // polish deepens to a bright full colour instead, from a cream.\n  const dw = min(abs(hh - 0.12), 1 - abs(hh - 0.12)), warm = 1 - sm(0.12, 0.24, dw);\n  hsv(h, 0.32 - 0.1 * warm, 0.52 + 0.04 * warm, S.pale);\n  hsv(h + 0.015 * (1 - warm), 0.92 + 0.06 * warm, 0.11 + 0.5 * warm, S.deep);\n  hsv(h, 0.6 - 0.1 * warm, 0.5 + 0.4 * warm, S.tint);\n  hsv(h, 0.12, 1, S.pearl);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { a, g, ph, om, pale, deep, tint, pearl } = S, t = S.t, k = -OD * LN10, norm = 1 - exp(k);\n  const sig2 = 2 * (SIG * 1.2) ** 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // How deep the colour is: Beer-Lambert in the switched dye.\n      const D = (1 - exp(k * a[i])) / norm;\n      let r = pale[0] + (deep[0] - pale[0]) * D;\n      let gg = pale[1] + (deep[1] - pale[1]) * D;\n      let b = pale[2] + (deep[2] - pale[2]) * D;\n      // The flake: pearl white in the pale polish; under the dark dye the light\n      // crosses the dye twice on its way to the flake and back, so the\n      // flake goes dim and takes the colour. Now and then a flake turns half\n      // away from the room light.\n      const gl = g[i] * (sin(ph[i] + t * om[i]) > -0.8 ? 1 : 0.5);\n      if (gl \u003c 0) {\n        r *= 1 + 0.3 * gl;\n        gg *= 1 + 0.3 * gl;\n        b *= 1 + 0.3 * gl;\n      } else if (gl > 0) {\n        r += (pearl[0] + (tint[0] - pearl[0]) * D - r) * gl;\n        gg += (pearl[1] + (tint[1] - pearl[1]) * D - gg) * gl;\n        b += (pearl[2] + (tint[2] - pearl[2]) * D - b) * gl;\n      }\n      // The torch's violet spill.\n      if (S.on) {\n        const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, v = 0.12 * exp(-(dx * dx + dy * dy) / sig2);\n        r += v * 0.45;\n        b += v;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, gg)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-photochromic","type":"code","name":"photochromic","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Photochromic\n// Family:  cosmetic\n// Idea:    A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after photochromic nail polish, pale in the shade, that deepens under UV light and fades back [Beer-Lambert law, August Beer, 1852]\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1\n//\n// Knob 1: Hue. Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening.\n// Knob 2: Speed. At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds.\n// Knob 3: Flakes. The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter.\n// Knob 4: Fade. How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture.\n// Buttons: K1 tap sends a stroke now, running the other way from the last one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sin, exp, round, random, LN10, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Seconds at Speed 2: a stroke every PERIOD, crossing in SWEEP. The first\n// stroke of a fresh start begins at FIRST; the one before it, which ended\n// 8.4 seconds before the start, is run through when the pattern opens.\nconst PERIOD = 13, SWEEP = 2.4, FIRST = 2.2;\n// The torch: a soft spot of sigma SIG LEDs, weaving AMP LEDs either side of\n// the middle; the dye switches at KON per second where it is brightest.\nconst SIG = 15, AMP = 20, KON = 10;\n// Optical density of the switched dye, so the depth of colour goes as\n// 1 - 10^(-OD a) (Beer-Lambert): it holds dark while most of the dye is\n// still switched and lets go toward the end.\nconst OD = 2;\n// The fade, from a = 0.95 to the a where the colour is half gone.\nconst HALF_A = 1.856;\n// Opening hue: violet, not red.\nconst H0 = 0.76;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, flakes: 1, fade: 0.06, t: 0, begun: false, k: 0, tx: -99, ty: -99, on: 0,\n    a: new Float32Array(N), g: new Float32Array(N), ph: new Float32Array(N), om: new Float32Array(N),\n    size: 0, pale: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], pearl: [0, 0, 0], extra: -1,\n  };\n}\n\n// The flakes for a size, one glint per LED, every LED of a flake sharing\n// it: 1 catches the light, -1 is turned away and shades the polish under\n// it, 0 is bare polish. At size 1 every LED holds mica, 38% catching the\n// light, 22% turned away; larger flakes are fewer, 30% and 10%.\nfunction flakes(S, size) {\n  const { g, ph, om } = S;\n  const cw = Math.ceil(W / size), nc = cw * Math.ceil(H / size);\n  const cg = new Float32Array(nc), cp = new Float32Array(nc), co = new Float32Array(nc);\n  for (let c = 0; c \u003c nc; c++) {\n    const u = random();\n    if (size === 1) cg[c] = u \u003c 0.4 ? 0 : u \u003c 0.62 ? -1 : 1;\n    else cg[c] = u \u003c 0.6 ? 0 : u \u003c 0.7 ? -1 : 1;\n    cp[c] = random() * TAU;\n    co[c] = 0.8 + 0.7 * random();\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = floor(y / size) * cw + floor(x / size), i = y * W + x;\n      // Flakes three or four across lose their corners.\n      const ex = x % size === 0 || x % size === size - 1, ey = y % size === 0 || y % size === size - 1;\n      g[i] = size > 2 && ex && ey ? 0 : cg[c];\n      ph[i] = cp[c];\n      om[i] = co[c];\n    }\n  S.size = size;\n}\n\n// Where stroke k has the torch at progress s (0..1): strokes alternate down\n// and up the panel, weaving side to side, each a little different.\nfunction torchAt(S, k, s) {\n  const down = (k & 1) === 0, w = 2.4 + 0.5 * ((k * 0.618 + 10) % 1), ph = k * 2.4;\n  S.ty = down ? -30 + s * (H + 60) : H + 30 - s * (H + 60);\n  S.tx = W / 2 + AMP * sin(TAU * w * s + ph);\n}\n\n// Advance the dye by dt seconds of pattern time: switched by the torch at\n// KON times its intensity, back by the thermal fade.\nfunction dye(S, dt) {\n  const a = S.a, half = 4.5 * 3 ** S.fade, decay = exp((-HALF_A / half) * dt);\n  for (let i = 0; i \u003c N; i++) a[i] *= decay;\n  if (!S.on) return;\n  const R = 3 * SIG, x0 = max(0, floor(S.tx - R)), x1 = min(W - 1, Math.ceil(S.tx + R));\n  const y0 = max(0, floor(S.ty - R)), y1 = min(H - 1, Math.ceil(S.ty + R));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, I = exp(-(dx * dx + dy * dy) / (2 * SIG * SIG));\n      if (I \u003c 0.01) continue;\n      const i = y * W + x;\n      a[i] += (1 - a[i]) * (1 - exp(-KON * I * dt));\n    }\n}\n\n// Run the clock from t0 to t1 in steps, strokes switching on and off.\nfunction run(S, t0, t1, step) {\n  for (let t = t0; t \u003c t1 - 1e-9; t += step) {\n    const d = min(step, t1 - t), tm = t + d;\n    const k = floor((tm - FIRST) / PERIOD), s = (tm - FIRST - k * PERIOD) / SWEEP;\n    S.on = 0;\n    if (s \u003c= 1) {\n      S.on = 1;\n      S.k = k;\n      torchAt(S, k, s);\n    }\n    if (S.extra >= 0) {\n      const se = (tm - S.extra) / SWEEP;\n      if (se \u003c= 1) {\n        S.on = 1;\n        torchAt(S, S.k + 1, se);\n      } else S.extra = -1;\n    }\n    dye(S, d);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.flakes = cl(k[2], 1, 4);\n  S.fade = cl(k[3], -1, 1);\n  const size = round(S.flakes);\n  if (size !== S.size) flakes(S, size);\n  if (!S.begun) {\n    S.t = FIRST - PERIOD - 0.3;\n    run(S, S.t, 0, 0.1);\n    S.t = 0;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.extra \u003c 0) S.extra = S.t;\n  const step = (d * S.speed) / 2;\n  if (step > 0) run(S, S.t, S.t + step, step);\n  S.t += step;\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Red, orange, yellow and lime go brown or olive when dark: there the\n  // polish deepens to a bright full colour instead, from a cream.\n  const dw = min(abs(hh - 0.12), 1 - abs(hh - 0.12)), warm = 1 - sm(0.12, 0.24, dw);\n  hsv(h, 0.32 - 0.1 * warm, 0.52 + 0.04 * warm, S.pale);\n  hsv(h + 0.015 * (1 - warm), 0.92 + 0.06 * warm, 0.11 + 0.5 * warm, S.deep);\n  hsv(h, 0.6 - 0.1 * warm, 0.5 + 0.4 * warm, S.tint);\n  hsv(h, 0.12, 1, S.pearl);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { a, g, ph, om, pale, deep, tint, pearl } = S, t = S.t, k = -OD * LN10, norm = 1 - exp(k);\n  const sig2 = 2 * (SIG * 1.2) ** 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // How deep the colour is: Beer-Lambert in the switched dye.\n      const D = (1 - exp(k * a[i])) / norm;\n      let r = pale[0] + (deep[0] - pale[0]) * D;\n      let gg = pale[1] + (deep[1] - pale[1]) * D;\n      let b = pale[2] + (deep[2] - pale[2]) * D;\n      // The flake: pearl white in the pale polish; under the dark dye the light\n      // crosses the dye twice on its way to the flake and back, so the\n      // flake goes dim and takes the colour. Now and then a flake turns half\n      // away from the room light.\n      const gl = g[i] * (sin(ph[i] + t * om[i]) > -0.8 ? 1 : 0.5);\n      if (gl \u003c 0) {\n        r *= 1 + 0.3 * gl;\n        gg *= 1 + 0.3 * gl;\n        b *= 1 + 0.3 * gl;\n      } else if (gl > 0) {\n        r += (pearl[0] + (tint[0] - pearl[0]) * D - r) * gl;\n        gg += (pearl[1] + (tint[1] - pearl[1]) * D - gg) * gl;\n        b += (pearl[2] + (tint[2] - pearl[2]) * D - b) * gl;\n      }\n      // The torch's violet spill.\n      if (S.on) {\n        const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, v = 0.12 * exp(-(dx * dx + dy * dy) / sig2);\n        r += v * 0.45;\n        b += v;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, gg)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds."},{"name":"Flakes","min":1,"max":4,"about":"The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter."},{"name":"Fade","min":-1,"max":1,"about":"How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture."}],"start":[0,2,1,0.06],"measures":{"motion":0.1311,"detail":0.2098,"edges":0.7508,"complexity":1.4701,"coverage":0.9752,"colour":0.1059,"drift":0.3646},"knobResponse":[0.1323,0.3042,0.2265,0.1945]},{"slug":"pin-art","title":"Pin Art","family":"toy","round":22,"note":"핀 아트 장난감을 앞에서 봐요. 엇갈린 격자의 강철 핀 4096개가 패널을 채우고, 뒤에서 펼친 손이 눌러 들어오면 밀려 나온 핀만 비스듬한 등빛을 받아 빛나요. 장난감을 기울이면 핀이 물결치며 평평해지고 열쇠가 다음으로 눌러 들어와요.","idea":"A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.","buttons":"K1 tap tilts the toy flat now and presses the next object in.","code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","layer":{"id":"layer-pin-art","type":"code","name":"pin-art","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower."},{"name":"Object","min":0,"max":4,"about":"What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one."},{"name":"Light","min":0,"max":1,"about":"Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.0617,"detail":0.3463,"edges":0.9544,"complexity":1.3204,"coverage":0.7864,"colour":0.2041,"drift":0.3573},"knobResponse":[0.1597,0.2367,0.0944,0.0463]},{"slug":"pint","title":"Pint","family":"cells","round":18,"note":"탭이 패널 높이만 한 파인트 잔에 맥주를 따르면, 뿌연 맥주가 바닥부터 맑아지고 기포 줄이 오르는 동안 거품 머리가 밝은 테두리의 다각형 셀로 굵어져요. 누군가 다섯 모금에 나눠 마시며 잔에 레이싱 고리를 남기고, 바닥이 보이면 다시 따라요. K1 은 라거에서 앰버 에일, 레드 에일을 지나 스타우트까지 맥주를 바꾸고, 스타우트는 크림빛 서지가 바닥부터 검게 가라앉아요.","idea":"A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-pint","type":"code","name":"pint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Beer","min":0,"max":1,"about":"What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower."},{"name":"Fizz","min":4,"max":20,"about":"How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20."},{"name":"Head","min":0,"max":1,"about":"How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells."}],"start":[0,2,4,0.06],"measures":{"motion":0.1411,"detail":0.0425,"edges":0.5054,"complexity":1.0501,"coverage":0.678,"colour":0.3448,"drift":0.1113},"knobResponse":[0.1725,0.2433,0.0546,0.0641]},{"slug":"pinwheel-tiling","title":"Pinwheel Tiling","family":"geometry","round":32,"note":"다리가 1 과 2 인 직각삼각형 타일링 속으로 끝없이 들어가요. 3.6초마다 타일마다 이음매가 옅게 나타나 다섯 조각으로 갈라지고, 그 가운데 하나는 부모에서 26.6° 돌아가 있어요. 타일을 긴 다리의 방향으로 칠해서, 같은 색 무리가 서로 다른 각도로 기운 것이 보여요.","idea":"The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.","buttons":"K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.","code":"// ===== Patternflow pattern =====\n// Title:   Pinwheel Tiling\n// Family:  geometry\n// Idea:    The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: pinwheel tiling (John Conway and Charles Radin, 1994), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1\n//\n// Knob 1: Hue. Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other.\n// Knob 2: Speed. At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4.\n// Knob 3: Size. How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider.\n// Knob 4: Paint. At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers.\n// Buttons: K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5;\nconst { floor, sqrt, cos, sin, atan, atan2, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst S5 = sqrt(5), LS5 = log(S5), TAU = 2 * PI, A2 = atan(0.5);\n\n// The tile in its own frame: small angle at (0,0), right angle at (2,0),\n// large angle at (2,1). Conway's cut: the altitude from the right angle takes\n// one copy off the short side; the larger part is cut from the midpoint of\n// its hypotenuse to its right angle and to the midpoints of its two legs,\n// four copies in two mirror pairs. Each child is [small, right, large] in the\n// parent's frame. Children 2 and 3 keep the parent's hand, 0, 1 and 4 are\n// mirrored. Cut with the midpoint split instead, the tiles keep to eight\n// directions; with this cut the count grows with every level.\nconst KIDS = [\n  [[2, 0], [1.6, 0.8], [2, 1]],\n  [[1, 0], [1.8, 0.4], [2, 0]],\n  [[1, 0], [1.8, 0.4], [1.6, 0.8]],\n  [[1.6, 0.8], [0.8, 0.4], [1, 0]],\n  [[0, 0], [0.8, 0.4], [1, 0]],\n].map(([a, b, c]) => {\n  const ux = (b[0] - a[0]) / 2, uy = (b[1] - a[1]) / 2, vx = c[0] - b[0], vy = c[1] - b[1], det = ux * vy - vx * uy;\n  return { ax: a[0], ay: a[1], ux, uy, vx, vy, i00: vy / det, i01: -vx / det, i10: -uy / det, i11: ux / det, flip: det \u003c 0 };\n});\n\n// Points the zoom can dive into, each the fixed point of a chain of children\n// that keeps the hand: child 2 alone, a copy a fifth of the area turned by\n// arctan(1/2); child 3 twice; 2 then 3; 3 then 2. P is the chain's length in\n// levels, R its turn.\nconst DIVES = [\n  { zx: 1.5, zy: 0.5, P: 1, R: A2 },\n  { zx: 1.2, zy: 0.4, P: 2, R: 2 * A2 },\n  { zx: 1.375, zy: 0.375, P: 2, R: 2 * A2 - PI },\n  { zx: 1.125, zy: 0.375, P: 2, R: 2 * A2 - PI },\n];\nconst N0 = 8;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  params.s = {\n    z: 0, hue: 0, speed: 2, size: 13, paint: 0.06, dive: 0, prev: -1, fade: 1,\n    lut: new Float32Array(256 * 3 * 4), lutHue: NaN, out: new Float32Array(W * H * 3), tmp: new Float32Array(W * H * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = cl(k[2], 13, 40);\n  P.paint = cl(k[3], 0, 1);\n  P.z += d * P.speed * 0.14;\n  if (P.fade \u003c 1) P.fade = Math.min(1, P.fade + d / 0.8);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.prev = P.dive;\n    P.dive = (P.dive + 1) % DIVES.length;\n    P.fade = 0;\n  }\n}\n\n// Draws one dive into buf: RGB 0..255 per LED.\nfunction render(P, D, buf) {\n  const u = P.z % D.P, S = Math.pow(S5, N0 + u), phi = -D.R * (u / D.P);\n  const cp = cos(-phi) / S, sp = sin(-phi) / S;\n  // Depth d tiles span S * sqrt5^(1-d) LEDs along the hypotenuse; the deepest\n  // drawn is the last one at least Size long, and it fades in.\n  const lam = N0 + u + 1 - log(P.size) / LS5, dn = floor(lam), al = sm(0, 0.3, lam - dn), ac = sm(0.28, 0.42, lam - dn);\n  // Each level's seam: its scale on the panel, how far it reaches from the\n  // edge (a little wider for the older, larger tiles) and how dark it is.\n  const sig = new Float32Array(dn + 1), reach = new Float32Array(dn + 1), dark = new Float32Array(dn + 1);\n  for (let d = 0; d \u003c= dn; d++) {\n    sig[d] = S * Math.pow(S5, -d);\n    reach[d] = 1.1 + 0.45 * sm(1, 2.5, lam - d);\n    dark[d] = d === dn ? al : 1;\n  }\n  const lut = P.lut, paint = P.paint;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - CX, dy = y - CY;\n      let qx = D.zx + cp * dx - sp * dy, qy = D.zy + sp * dx + cp * dy;\n      let m00 = 1, m01 = 0, m10 = 0, m11 = 1, flip = false;\n      let a0 = 0, f0 = false, seam = 0;\n      for (let d = 1; d \u003c= dn; d++) {\n        if (d === dn) (a0 = atan2(m10, m00)), (f0 = flip);\n        let best = -9, bi = 0, bx = 0, by = 0;\n        for (let i = 0; i \u003c 5; i++) {\n          const K = KIDS[i], rx = qx - K.ax, ry = qy - K.ay;\n          const tx = K.i00 * rx + K.i01 * ry, ty = K.i10 * rx + K.i11 * ry;\n          const mg = Math.min(ty, 2 - tx, (tx - 2 * ty) / S5);\n          if (mg > best) {\n            (best = mg), (bi = i), (bx = tx), (by = ty);\n            // The children do not overlap: one inside is the one.\n            if (mg > 0) break;\n          }\n        }\n        const K = KIDS[bi];\n        const n00 = m00 * K.ux + m01 * K.uy, n01 = m00 * K.vx + m01 * K.vy, n10 = m10 * K.ux + m11 * K.uy, n11 = m10 * K.vx + m11 * K.vy;\n        (m00 = n00), (m01 = n01), (m10 = n10), (m11 = n11), (flip = flip !== K.flip);\n        (qx = bx), (qy = by);\n        const sd = dark[d] * cl(reach[d] - best * sig[d], 0, 1);\n        if (sd > seam) seam = sd;\n      }\n      const a1 = atan2(m10, m00);\n      const o = (y * W + x) * 3;\n      // Colour of the tile one level up and of the newest tile, mixed.\n      tint(lut, a0 + phi, f0, paint);\n      const r0 = cr, g0 = cg, b0 = cb;\n      tint(lut, a1 + phi, flip, paint);\n      const r = r0 + (cr - r0) * ac, g = g0 + (cg - g0) * ac, b = b0 + (cb - b0) * ac;\n      const v = 1 - 0.94 * seam;\n      buf[o] = r * v;\n      buf[o + 1] = g * v;\n      buf[o + 2] = b * v;\n    }\n}\n\n// A tile's colour from the direction of its long leg on the panel and its\n// hand: four tables of 256 directions, by direction and by light, each for\n// both hands.\nlet cr = 0, cg = 0, cb = 0;\nfunction tint(lut, ang, flip, paint) {\n  let t = ang / TAU;\n  t -= floor(t);\n  const i = ((floor(t * 256) & 255) + (flip ? 256 : 0)) * 3, j = i + 1536;\n  cr = lut[i] + (lut[j] - lut[i]) * paint;\n  cg = lut[i + 1] + (lut[j + 1] - lut[i + 1]) * paint;\n  cb = lut[i + 2] + (lut[j + 2] - lut[i + 2]) * paint;\n}\n\nfunction buildLut(P) {\n  for (let i = 0; i \u003c 256; i++) {\n    const t = i / 256, lit = 0.5 + 0.5 * cos(t * TAU - 2.2);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 1, P.lut, i * 3);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 0.8, P.lut, (256 + i) * 3);\n    hsv(P.hue + 0.55, 0.55, 0.35 + 0.65 * lit, P.lut, (512 + i) * 3);\n    hsv(P.hue + 0.62, 0.85, 0.25 + 0.6 * lit, P.lut, (768 + i) * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const out = P.out;\n  render(P, DIVES[P.dive], out);\n  if (P.fade \u003c 1 && P.prev >= 0) {\n    render(P, DIVES[P.prev], P.tmp);\n    const f = sm(0, 1, P.fade), tmp = P.tmp;\n    for (let i = 0; i \u003c out.length; i++) out[i] = tmp[i] + (out[i] - tmp[i]) * f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","layer":{"id":"layer-pinwheel-tiling","type":"code","name":"pinwheel-tiling","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pinwheel Tiling\n// Family:  geometry\n// Idea:    The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: pinwheel tiling (John Conway and Charles Radin, 1994), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1\n//\n// Knob 1: Hue. Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other.\n// Knob 2: Speed. At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4.\n// Knob 3: Size. How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider.\n// Knob 4: Paint. At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers.\n// Buttons: K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5;\nconst { floor, sqrt, cos, sin, atan, atan2, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst S5 = sqrt(5), LS5 = log(S5), TAU = 2 * PI, A2 = atan(0.5);\n\n// The tile in its own frame: small angle at (0,0), right angle at (2,0),\n// large angle at (2,1). Conway's cut: the altitude from the right angle takes\n// one copy off the short side; the larger part is cut from the midpoint of\n// its hypotenuse to its right angle and to the midpoints of its two legs,\n// four copies in two mirror pairs. Each child is [small, right, large] in the\n// parent's frame. Children 2 and 3 keep the parent's hand, 0, 1 and 4 are\n// mirrored. Cut with the midpoint split instead, the tiles keep to eight\n// directions; with this cut the count grows with every level.\nconst KIDS = [\n  [[2, 0], [1.6, 0.8], [2, 1]],\n  [[1, 0], [1.8, 0.4], [2, 0]],\n  [[1, 0], [1.8, 0.4], [1.6, 0.8]],\n  [[1.6, 0.8], [0.8, 0.4], [1, 0]],\n  [[0, 0], [0.8, 0.4], [1, 0]],\n].map(([a, b, c]) => {\n  const ux = (b[0] - a[0]) / 2, uy = (b[1] - a[1]) / 2, vx = c[0] - b[0], vy = c[1] - b[1], det = ux * vy - vx * uy;\n  return { ax: a[0], ay: a[1], ux, uy, vx, vy, i00: vy / det, i01: -vx / det, i10: -uy / det, i11: ux / det, flip: det \u003c 0 };\n});\n\n// Points the zoom can dive into, each the fixed point of a chain of children\n// that keeps the hand: child 2 alone, a copy a fifth of the area turned by\n// arctan(1/2); child 3 twice; 2 then 3; 3 then 2. P is the chain's length in\n// levels, R its turn.\nconst DIVES = [\n  { zx: 1.5, zy: 0.5, P: 1, R: A2 },\n  { zx: 1.2, zy: 0.4, P: 2, R: 2 * A2 },\n  { zx: 1.375, zy: 0.375, P: 2, R: 2 * A2 - PI },\n  { zx: 1.125, zy: 0.375, P: 2, R: 2 * A2 - PI },\n];\nconst N0 = 8;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  params.s = {\n    z: 0, hue: 0, speed: 2, size: 13, paint: 0.06, dive: 0, prev: -1, fade: 1,\n    lut: new Float32Array(256 * 3 * 4), lutHue: NaN, out: new Float32Array(W * H * 3), tmp: new Float32Array(W * H * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = cl(k[2], 13, 40);\n  P.paint = cl(k[3], 0, 1);\n  P.z += d * P.speed * 0.14;\n  if (P.fade \u003c 1) P.fade = Math.min(1, P.fade + d / 0.8);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.prev = P.dive;\n    P.dive = (P.dive + 1) % DIVES.length;\n    P.fade = 0;\n  }\n}\n\n// Draws one dive into buf: RGB 0..255 per LED.\nfunction render(P, D, buf) {\n  const u = P.z % D.P, S = Math.pow(S5, N0 + u), phi = -D.R * (u / D.P);\n  const cp = cos(-phi) / S, sp = sin(-phi) / S;\n  // Depth d tiles span S * sqrt5^(1-d) LEDs along the hypotenuse; the deepest\n  // drawn is the last one at least Size long, and it fades in.\n  const lam = N0 + u + 1 - log(P.size) / LS5, dn = floor(lam), al = sm(0, 0.3, lam - dn), ac = sm(0.28, 0.42, lam - dn);\n  // Each level's seam: its scale on the panel, how far it reaches from the\n  // edge (a little wider for the older, larger tiles) and how dark it is.\n  const sig = new Float32Array(dn + 1), reach = new Float32Array(dn + 1), dark = new Float32Array(dn + 1);\n  for (let d = 0; d \u003c= dn; d++) {\n    sig[d] = S * Math.pow(S5, -d);\n    reach[d] = 1.1 + 0.45 * sm(1, 2.5, lam - d);\n    dark[d] = d === dn ? al : 1;\n  }\n  const lut = P.lut, paint = P.paint;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - CX, dy = y - CY;\n      let qx = D.zx + cp * dx - sp * dy, qy = D.zy + sp * dx + cp * dy;\n      let m00 = 1, m01 = 0, m10 = 0, m11 = 1, flip = false;\n      let a0 = 0, f0 = false, seam = 0;\n      for (let d = 1; d \u003c= dn; d++) {\n        if (d === dn) (a0 = atan2(m10, m00)), (f0 = flip);\n        let best = -9, bi = 0, bx = 0, by = 0;\n        for (let i = 0; i \u003c 5; i++) {\n          const K = KIDS[i], rx = qx - K.ax, ry = qy - K.ay;\n          const tx = K.i00 * rx + K.i01 * ry, ty = K.i10 * rx + K.i11 * ry;\n          const mg = Math.min(ty, 2 - tx, (tx - 2 * ty) / S5);\n          if (mg > best) {\n            (best = mg), (bi = i), (bx = tx), (by = ty);\n            // The children do not overlap: one inside is the one.\n            if (mg > 0) break;\n          }\n        }\n        const K = KIDS[bi];\n        const n00 = m00 * K.ux + m01 * K.uy, n01 = m00 * K.vx + m01 * K.vy, n10 = m10 * K.ux + m11 * K.uy, n11 = m10 * K.vx + m11 * K.vy;\n        (m00 = n00), (m01 = n01), (m10 = n10), (m11 = n11), (flip = flip !== K.flip);\n        (qx = bx), (qy = by);\n        const sd = dark[d] * cl(reach[d] - best * sig[d], 0, 1);\n        if (sd > seam) seam = sd;\n      }\n      const a1 = atan2(m10, m00);\n      const o = (y * W + x) * 3;\n      // Colour of the tile one level up and of the newest tile, mixed.\n      tint(lut, a0 + phi, f0, paint);\n      const r0 = cr, g0 = cg, b0 = cb;\n      tint(lut, a1 + phi, flip, paint);\n      const r = r0 + (cr - r0) * ac, g = g0 + (cg - g0) * ac, b = b0 + (cb - b0) * ac;\n      const v = 1 - 0.94 * seam;\n      buf[o] = r * v;\n      buf[o + 1] = g * v;\n      buf[o + 2] = b * v;\n    }\n}\n\n// A tile's colour from the direction of its long leg on the panel and its\n// hand: four tables of 256 directions, by direction and by light, each for\n// both hands.\nlet cr = 0, cg = 0, cb = 0;\nfunction tint(lut, ang, flip, paint) {\n  let t = ang / TAU;\n  t -= floor(t);\n  const i = ((floor(t * 256) & 255) + (flip ? 256 : 0)) * 3, j = i + 1536;\n  cr = lut[i] + (lut[j] - lut[i]) * paint;\n  cg = lut[i + 1] + (lut[j + 1] - lut[i + 1]) * paint;\n  cb = lut[i + 2] + (lut[j + 2] - lut[i + 2]) * paint;\n}\n\nfunction buildLut(P) {\n  for (let i = 0; i \u003c 256; i++) {\n    const t = i / 256, lit = 0.5 + 0.5 * cos(t * TAU - 2.2);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 1, P.lut, i * 3);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 0.8, P.lut, (256 + i) * 3);\n    hsv(P.hue + 0.55, 0.55, 0.35 + 0.65 * lit, P.lut, (512 + i) * 3);\n    hsv(P.hue + 0.62, 0.85, 0.25 + 0.6 * lit, P.lut, (768 + i) * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const out = P.out;\n  render(P, DIVES[P.dive], out);\n  if (P.fade \u003c 1 && P.prev >= 0) {\n    render(P, DIVES[P.prev], P.tmp);\n    const f = sm(0, 1, P.fade), tmp = P.tmp;\n    for (let i = 0; i \u003c out.length; i++) out[i] = tmp[i] + (out[i] - tmp[i]) * f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4."},{"name":"Size","min":13,"max":40,"about":"How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider."},{"name":"Paint","min":0,"max":1,"about":"At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers."}],"start":[0,2,13,0.06],"measures":{"motion":2.1331,"detail":0.1861,"edges":0.7085,"complexity":1.6658,"coverage":0.856,"colour":0.5245,"drift":0.1667},"knobResponse":[0.362,0.3049,0.2869,0.2296]},{"slug":"pipe-organ","title":"Pipe Organ","family":"music","round":24,"note":"어두운 성당의 파이프오르간 정면이 패널을 채워요. 보이지 않는 오르가니스트가 여덟 화음 코랄을 되풀이하면, 소리 나는 파이프마다 입에서 빛이 켜지고 몸통을 따라 정상파 띠가 올라가요. 가운데 가장 긴 파이프가 가장 낮은 음이에요. K1 이 플루트의 파랑, 프린시펄의 은빛, 리드의 금빛과 빨강 사이에서 음전을 고르고, K1 을 누르면 파이프 열아홉이 다 울려요.","idea":"The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.","buttons":"K1 tap is full organ: every pipe in the front speaks at once for about three seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Pipe Organ\n// Family:  music\n// Idea:    The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower-and-flat fronts of North German Baroque organ cases and four-part chorale harmony\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1\n//\n// Knob 1: Stops. The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too.\n// Knob 2: Tempo. At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one.\n// Knob 3: Voices. How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord.\n// Knob 4: Tremulant. The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them.\n// Buttons: K1 tap is full organ: every pipe in the front speaks at once for about three seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Pipe d sounds the d-th note of a major scale up from the longest pipe, and\n// an open pipe halves its length each octave.\nconst STEP = [0, 2, 4, 5, 7, 9, 11];\nconst len = (d) => 92 * 2 ** (-(12 * floor(d / 7) + STEP[d % 7]) / 12);\n// The front: the lowest note in the middle of the centre tower, then pairs,\n// the lower note left and the next one right, as the C and C sharp chests of\n// a real case split a scale between the two sides.\nconst PIPES = [];\nfunction pair(d, x, w, top, mouth, base) {\n  const L = d ? (len(d) + len(d + 1)) / 2 : len(0);\n  const t = round(top >= 0 ? top : mouth - L);\n  const m = round(top >= 0 ? top + L : mouth);\n  const mh = w >= 5 ? 2 : 1;\n  PIPES[d] = { x, w, top: t, m, mh, f0: m + mh + 1, base };\n  if (d) PIPES[d + 1] = { x: W - x - w, w, top: t, m, mh, f0: m + mh + 1, base };\n}\n// The centre tower and the side towers hang from their crowns, so their\n// mouths step; the flats stand on equal feet, so their tops ramp.\npair(0, 29, 6, 9, 0, 110);\npair(1, 23, 5, 12, 0, 110);\npair(3, 1, 4, 30, 0, 110);\npair(5, 6, 4, 38, 0, 110);\npair(7, 19, 3, -1, 102, 110);\npair(9, 15, 3, -1, 102, 110);\npair(11, 11, 3, -1, 102, 110);\npair(13, 19, 3, -1, 44, 50);\npair(15, 15, 3, -1, 44, 50);\npair(17, 11, 3, -1, 44, 50);\nconst NP = 19;\n\n// Eight-chord phrases on the scale's chords, I = 0 to vi = 5. The first one\n// always opens the piece.\nconst PHRASES = [\n  [0, 4, 5, 3, 0, 1, 4, 0],\n  [0, 5, 1, 4, 0, 3, 4, 0],\n  [5, 3, 0, 4, 5, 1, 4, 4],\n  [0, 3, 0, 4, 5, 1, 4, 0],\n  [3, 4, 0, 5, 1, 0, 4, 0],\n  [0, 2, 5, 3, 1, 4, 4, 0],\n];\n// Voices in the order the knob adds them: soprano, bass, alto, tenor, then\n// three that fill the chord.\nconst VORD = [0, 3, 1, 2, 4, 5, 6];\n\n// Surfaces, as how much of each light they give back.\nconst TIN = [0.9, 0.95, 1];\nconst WOOD = [0.42, 0.25, 0.15];\nconst GILT = [1.3, 1, 0.42];\nconst DARK = [0.07, 0.05, 0.045];\nconst STONE = [0.9, 0.88, 0.84];\n// Grey daylight from the nave, the candles, and the lamp on the music desk.\nconst DAY = [56, 56, 64];\nconst CAN = [200, 126, 58];\nconst LAMP = [255, 210, 140];\n// The rose window's glass.\nconst RUBY = [230, 40, 60];\nconst SAPH = [50, 90, 255];\nconst AMBER = [255, 200, 80];\nconst GREEN = [60, 200, 110];\nconst ROSE = [RUBY, SAPH, GREEN, SAPH];\n// Stop colours: flute, principal, reed at the mouth and up the body, full organ.\nconst FLUTE = [0.35, 0.62, 1];\nconst PRIN = [0.84, 0.9, 1];\nconst REED0 = [1, 0.77, 0.27];\nconst REED1 = [1, 0.2, 0.08];\nconst FULL = [1, 0.86, 0.58];\n\n// Round tin: a highlight a third of the way across and a dark far edge.\nfunction shade(p) {\n  return (0.2 + 0.5 * sin(PI * p) ** 0.7 + 0.55 * exp(-(((p - 0.36) / 0.14) ** 2))) * (1.1 - 0.4 * p);\n}\n\n// Carved and gilt pipe shades: pierced scrolls.\nfunction fret(x, y) {\n  return sin(x * 1.25 + 2 * sin(y * 0.52)) * sin(y * 0.9 + 1.6 * sin(x * 0.61));\n}\n\nfunction build(P) {\n  const A = P.A;\n  const put = (x, y, c, k = 1, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    for (let n = 0; n \u003c 3; n++) A[o + n] = mix(A[o + n], c[n] * k, a);\n  };\n  // Left half and its mirror.\n  const two = (x, y, c, k, a) => (put(x, y, c, k, a), put(W - 1 - x, y, c, k, a));\n  const row = (x0, x1, y, c, k) => {\n    for (let x = x0; x \u003c= x1; x++) two(x, y, c, k);\n  };\n  // The church wall: courses of ashlar.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cs = floor(y / 5), off = (cs & 1) * 4, mortar = y % 5 === 4 || (x + off) % 8 === 7;\n      put(x, y, STONE, mortar ? 0.14 : 0.27 + 0.1 * hash(floor((x + off) / 8), cs));\n    }\n  // The case, dark inside.\n  for (let y = 0; y \u003c 114; y++) for (let x = 0; x \u003c 32; x++) if (x > 21 || (x > 9 ? y >= 11 : y >= 22)) two(x, y, DARK, 1);\n  // Stiles between the towers and the flats.\n  for (const [x, y0] of [[0, 30], [10, 16], [22, 9]]) for (let y = y0; y \u003c 110; y++) two(x, y, WOOD, 1.05 + 0.15 * sin(y * 0.8) * (y % 12 \u003c 2 ? 1 : 0));\n  // The side towers' crowns, each with a gilt urn and a flame on top.\n  row(0, 10, 29, GILT, 0.9);\n  for (let y = 26; y \u003c= 28; y++) row(0, 10, y, WOOD, 0.9);\n  for (const x of [2, 5, 8]) two(x, 27, GILT, 1.05);\n  row(0, 10, 25, GILT, 1.05);\n  row(0, 10, 24, WOOD, 0.7);\n  row(0, 10, 23, WOOD, 1);\n  row(0, 10, 22, GILT, 1.15);\n  const URN = [[21, 2], [20, 1], [19, 2], [18, 2], [17, 1], [16, 0], [15, 1], [14, 0]];\n  for (const [y, r] of URN) for (let x = 5 - r; x \u003c= 5 + r; x++) two(x, y, GILT, 1.15 - 0.18 * (x - 5 + r));\n  // The upper flats' cornice and a scroll pediment.\n  row(10, 22, 15, GILT, 0.9);\n  for (let y = 12; y \u003c= 14; y++) for (let x = 10; x \u003c= 22; x++) two(x, y, WOOD, y === 13 && x % 2 ? 1.25 : 0.9);\n  row(10, 22, 11, GILT, 1.1);\n  row(12, 20, 10, GILT, 0.75);\n  for (const [x, y] of [[12, 9], [13, 9], [19, 9], [20, 9], [14, 8], [15, 8], [17, 8], [18, 8], [16, 7], [16, 6]]) two(x, y, GILT, 1.05);\n  // The centre tower's crown, with a carved crest over it.\n  row(22, 31, 8, GILT, 0.95);\n  for (let y = 5; y \u003c= 7; y++) for (let x = 22; x \u003c= 31; x++) two(x, y, x % 4 === 1 && y === 6 ? GILT : WOOD, x % 4 === 1 && y === 6 ? 1.1 : 0.9);\n  row(22, 31, 4, GILT, 1.1);\n  for (let x = 23; x \u003c= 31; x++) {\n    const h = 4 * (1 - ((x - 31.5) / 9) ** 2);\n    for (let y = floor(4 - h); y \u003c 4; y++) if (fret(x, y + 3) > -0.2 || x === 31) two(x, y, GILT, x === 31 ? 1.25 : 0.8 + 0.3 * fret(x, y));\n  }\n  // Pipe shades over every pipe that stops short of the carving above it.\n  const GAP = [5, 14, 18, 28, 35, 45, 49, 58];\n  for (const q of PIPES) {\n    const y0 = q.base === 50 ? 16 : q.x === 1 || q.x === 6 || q.x > 53 ? 30 : q.x > 22 && q.x \u003c 41 ? 9 : 54;\n    for (let x = q.x - 1; x \u003c= q.x + q.w; x++) {\n      const own = x >= q.x && x \u003c q.x + q.w;\n      if (own || GAP.indexOf(x) >= 0)\n        for (let y = y0; y \u003c q.top; y++) {\n          const v = fret(x, y);\n          if (own && y === q.top - 1) put(x, y, GILT, 1.05);\n          else if (v > -0.1) put(x, y, GILT, 0.55 + 0.5 * v);\n        }\n    }\n  }\n  // Under the lower flats the pipe shades of the upper ones, and the shelf they stand on.\n  row(10, 22, 50, GILT, 0.95);\n  row(10, 22, 51, WOOD, 1);\n  row(10, 22, 52, WOOD, 0.9);\n  row(10, 22, 53, WOOD, 0.55);\n  // The pipes: body, mouth with its lips, and the conical foot.\n  for (const q of PIPES) {\n    const { x, w, top, m, mh, f0, base } = q;\n    for (let y = top; y \u003c m; y++) for (let j = 0; j \u003c w; j++) put(x + j, y, TIN, shade((j + 0.5) / w) * (y === top ? 0.7 : 1));\n    for (let j = 0; j \u003c w; j++) {\n      const inner = j > 0 && j \u003c w - 1, s = shade((j + 0.5) / w);\n      if (inner) put(x + j, m - 1, TIN, s * 1.3);\n      for (let y = m; y \u003c m + mh; y++) put(x + j, y, inner ? DARK : TIN, inner ? 0.8 : s);\n      put(x + j, m + mh, TIN, s * (inner ? 1.15 : 0.9));\n    }\n    if (w >= 5) for (let j = floor((w - 1) / 2); j \u003c= floor(w / 2); j++) put(x + j, m - 2, TIN, 1.25);\n    const cx = x + w / 2;\n    for (let y = f0; y \u003c base; y++) {\n      const hw = mix(w / 2, 0.7, (y - f0) / max(1, base - 1 - f0));\n      for (let xx = floor(cx - hw); xx \u003c= cx + hw; xx++) {\n        const cov = cl(hw - abs(xx + 0.5 - cx) + 0.5, 0, 1);\n        put(xx, y, TIN, 0.9 * shade(cl((xx + 0.5 - cx + hw) / (2 * hw), 0, 1)), cov);\n      }\n    }\n  }\n  // The impost the pipes stand on.\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 110, GILT, 1);\n    put(x, 111, WOOD, x % 16 === 0 ? 0.6 : 1);\n    put(x, 112, WOOD, x % 16 === 0 ? 0.6 : 0.95);\n    put(x, 113, WOOD, 0.5);\n  }\n  // Candles on the stiles between the side towers and the flats.\n  for (let y = 98; y \u003c= 101; y++) two(10, y, [0.95, 0.9, 0.8], 0.5);\n  for (let x = 9; x \u003c= 11; x++) two(x, 102, GILT, 0.6);\n  // The console: the music desk with its lamp, and one manual.\n  for (let y = 114; y \u003c H; y++) for (let x = 0; x \u003c W; x++) put(x, y, WOOD, 0.7);\n  for (let y = 114; y \u003c= 119; y++) for (let x = 16; x \u003c= 47; x++) put(x, y, WOOD, 0.85);\n  for (let y = 115; y \u003c= 119; y++)\n    for (let x = 21; x \u003c= 42; x++) put(x, y, [0.95, 0.9, 0.76], y === 116 || y === 118 ? 0.62 : hash(x, y) \u003c 0.13 ? 0.3 : 1);\n  for (let x = 27; x \u003c= 36; x++) put(x, 114, GILT, 1.15);\n  for (let k = 0; k \u003c 21; k++) {\n    for (let y = 121; y \u003c= 125; y++) for (let x = 3 * k; x \u003c 3 * k + 2; x++) put(x, y, [0.92, 0.88, 0.78], y === 125 ? 0.7 : 1);\n    const n = (k + 6) % 7;\n    if (k \u003c 20 && n !== 2 && n !== 6) for (let y = 121; y \u003c= 123; y++) put(3 * k + 2, y, DARK, 1), put(3 * k + 3, y, DARK, 1);\n  }\n  // Light: grey daylight from above, warm candlelight, the desk lamp.\n  for (let i = 0; i \u003c N; i++) {\n    const x = (i & 63) + 0.5, y = (i >> 6) + 0.5;\n    P.day[i] = 0.45 + 0.55 * (1 - y / H) ** 1.3;\n    P.cL[i] = 0.85 / (1 + ((x - 10.5) ** 2 + (y - 96) ** 2) / 450);\n    P.cR[i] = 0.85 / (1 + ((x - 53.5) ** 2 + (y - 96) ** 2) / 450);\n    P.lamp[i] = y > 115 ? 1.1 / (1 + (x - 32) ** 2 / 90 + (y - 115) ** 2 / 40) : 0.45 / (1 + ((x - 32) ** 2 + (y - 114) ** 2) / 140);\n  }\n}\n\n// The nearest scale degree in lo..hi under cap whose note is in pcs, moving\n// from prev, sitting still costing `same`.\nfunction near(lo, hi, pcs, prev, same, cap) {\n  let best = -1;\n  let bs = 1e9;\n  for (let d = lo; d \u003c= hi; d++) {\n    if (d >= cap || pcs.indexOf(d % 7) \u003c 0) continue;\n    const j = abs(d - prev), s = j + (j === 0 ? same : 0) + (j > 4 ? 2 : 0) + rnd() * 0.9;\n    if (s \u003c bs) (bs = s), (best = d);\n  }\n  return best \u003c 0 ? (cap \u003c 99 ? near(lo, hi, pcs, prev, same, 99) : prev) : best;\n}\n\n// The next chord of the chorale, voiced from the last one.\nfunction chord(P) {\n  if (P.pi >= P.ph.length) (P.ph = PHRASES[floor(rnd() * PHRASES.length)]), (P.pi = 0);\n  const r = P.ph[P.pi++], last = P.pi === P.ph.length, pen = P.pi === P.ph.length - 1;\n  const T = [r, (r + 2) % 7, (r + 4) % 7];\n  if (pen && r === 4 && rnd() \u003c 0.6) T.push(3);\n  const [s0, a0, t0, b0] = P.prev;\n  const B = near(0, 7, [!last && !pen && rnd() \u003c 0.3 ? T[1] : r], b0, 0, 99);\n  const S = near(11, 18, last && r === 0 ? [0] : T, s0, 1.6, 99);\n  const A = near(8, 14, T, a0, 0.4, S);\n  const miss = T.filter((c) => c !== S % 7 && c !== A % 7 && c !== B % 7);\n  const Tn = near(4, 11, miss.length ? miss : T, t0, 0.4, A);\n  const v = [S, A, Tn, B];\n  // Three more parts fill the chord: the bass an octave up, one in the middle, one high.\n  for (const goal of [B + 7, 10, 16]) {\n    let best = -1;\n    let bs = 1e9;\n    for (let d = 0; d \u003c NP; d++) {\n      const s = abs(d - goal) + rnd() * 0.5;\n      if (T.indexOf(d % 7) >= 0 && v.indexOf(d) \u003c 0 && s \u003c bs) (bs = s), (best = d);\n    }\n    v.push(best);\n  }\n  P.prev = v;\n  return { v, dur: last ? 2 : 1, last, pass: [-1, -1, -1, -1], at: 0 };\n}\n\n// A part moving a third walks through the note between on the half beat.\nfunction passing(c, nx) {\n  if (c.last) return;\n  for (let k = 0; k \u003c 4; k++) if (abs(nx.v[k] - c.v[k]) === 2 && rnd() \u003c (k ? 0.4 : 0.6)) c.pass[k] = (c.v[k] + nx.v[k]) / 2;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    A: F32(N * 3), F: F32(N * 3), day: F32(N), cL: F32(N), cR: F32(N), lamp: F32(N),\n    amp: F32(NP), tgt: F32(NP), on: F32(NP), chiff: F32(NP), keys: F32(NP),\n    t: 0, beat: 0, fullT: 99, full: 0, fl: 1, fr: 1, s: 0, tr: 0,\n    ph1: rnd() * 6.28, ph2: rnd() * 6.28, ph: PHRASES[0], pi: 0, prev: [14, 11, 7, 0, 7, 9, 16],\n  });\n  build(P);\n  P.cur = chord(P);\n  P.nx = chord(P);\n  passing(P.cur, P.nx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  const s = (P.s = cl(k[0], 0, 1));\n  const tempo = cl(k[1], 0.2, 3);\n  const nv = cl(round(k[2]), 1, 6);\n  const tr = (P.tr = cl(k[3], 0, 1));\n  const t = (P.t += d);\n  P.beat += (d * tempo) / 2;\n  while (P.beat >= P.cur.at + P.cur.dur) {\n    const at = P.cur.at + P.cur.dur;\n    P.cur = P.nx;\n    P.cur.at = at;\n    P.nx = chord(P);\n    passing(P.cur, P.nx);\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.fullT = 0;\n  P.fullT += d;\n  P.full = P.fullT \u003c 2.8 ? sm(0, 0.06, P.fullT) : 1 - sm(2.8, 3.6, P.fullT);\n\n  // Which pipes speak: each part's note, the octave above from the\n  // principals on, and with the reeds the octave below, the twelfth and the\n  // fifteenth.\n  const c = P.cur, pos = P.beat - c.at, r4 = 0.8 * sm(0.3, 0.55, s), r2 = 0.75 * sm(0.7, 0.92, s);\n  P.tgt.fill(0);\n  P.keys.fill(0);\n  if (!(c.last && pos > c.dur - 0.22))\n    for (let n = 0; n \u003c= nv; n++) {\n      const v = VORD[n], g = v \u003c 4 && c.pass[v] >= 0 && pos >= c.dur / 2 ? c.pass[v] : c.v[v];\n      if (g \u003c 0) continue;\n      P.tgt[g] = 1;\n      if (v !== 3) P.keys[g] = 1;\n      if (g + 7 \u003c NP) P.tgt[g + 7] = max(P.tgt[g + 7], r4);\n      if (g >= 7) P.tgt[g - 7] = max(P.tgt[g - 7], r2);\n      if (g + 11 \u003c NP) P.tgt[g + 11] = max(P.tgt[g + 11], r2);\n      if (g + 14 \u003c NP) P.tgt[g + 14] = max(P.tgt[g + 14], r2);\n    }\n  for (let i = 0; i \u003c NP; i++) {\n    const g = max(P.tgt[i], 0.9 * P.full);\n    if (g > 0.5 && P.on[i] \u003c 0.5) P.chiff[i] = 1;\n    P.on[i] = g;\n    P.amp[i] += (g - P.amp[i]) * (1 - exp(-d / (g > P.amp[i] ? 0.035 : 0.14)));\n    P.chiff[i] *= exp(-d / 0.18);\n  }\n  // Candles in the draught: as the tremulant shakes the wind they flicker\n  // harder and burn lower.\n  const fa = 0.05 + tr;\n  const fl = (ph) => 1 - 0.4 * fa + fa * (0.6 * sin(t * 7.1 + ph) + 0.45 * sin(t * 11.9 + 2 * ph) + 0.35 * sin(t * 4.3 + 3 * ph) * sin(t * 17.3));\n  P.fl = cl(fl(0), 0.1, 2);\n  P.fr = cl(fl(2.1), 0.1, 2);\n}\n\n// A stop's colour, u from the mouth (0) to the top (1).\nfunction stopCol(out, s, u, full) {\n  for (let n = 0; n \u003c 3; n++) {\n    const v = s \u003c 0.5 ? mix(FLUTE[n], PRIN[n], s * 2) : mix(PRIN[n], mix(REED0[n], REED1[n], min(1, u * 1.6)), s * 2 - 1);\n    out[n] = mix(v, FULL[n], full);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { A, F, day, cL, cR, lamp, t } = P;\n  // The case in daylight, candlelight and lamplight.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const dl = day[i], cn = cL[i] * P.fl + cR[i] * P.fr, lp = lamp[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = A[o + n] * (DAY[n] * dl + CAN[n] * cn + LAMP[n] * lp);\n  }\n  // The rose window's light, cast long and slow across the case.\n  const px = 32 + 17 * sin(t * 0.05 + P.ph1), py = 60 + 34 * sin(t * 0.031 + P.ph2), RX = 15, RY = 24;\n  const I0 = 0.65 * (0.8 + 0.2 * sin(t * 0.23 + P.ph1));\n  for (let y = max(0, floor(py - RY)); y \u003c= min(H - 1, py + RY); y++)\n    for (let x = max(0, floor(px - RX)); x \u003c= min(W - 1, px + RX); x++) {\n      const dx = (x + 0.5 - px) / RX, dy = (y + 0.5 - py) / RY, r = sqrt(dx * dx + dy * dy);\n      if (r >= 1) continue;\n      const a = atan2(dy, dx) / (2 * PI) + 0.5;\n      let c, lead;\n      if (r \u003c 0.2) (c = AMBER), (lead = r > 0.15);\n      else if (r \u003c 0.5) {\n        const q = a * 8;\n        (c = floor(q) & 1 ? RUBY : SAPH), (lead = q - floor(q) \u003c 0.1 || r \u003c 0.24);\n      } else {\n        const q = a * 16;\n        (c = ROSE[floor(q) & 3]), (lead = q - floor(q) \u003c 0.08 || r \u003c 0.54);\n      }\n      const kk = I0 * (lead ? 0.45 : 1) * sm(1, 0.82, r), o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * c[n] * kk;\n    }\n  // The pipes that speak: the mouth lights and a standing wave shimmers up\n  // the body, its bands creeping upward and wavering with the tremulant.\n  const s = P.s, tr = P.tr, gain = 240 * (0.8 + 0.4 * s), bands = 2 + 4 * s, floor0 = 0.45 - 0.25 * s;\n  // Many pipes at once light the case less each, or the chord drowns in its own light.\n  let ns = 0;\n  for (let i = 0; i \u003c NP; i++) ns += P.amp[i];\n  const spread = (1 - 0.6 * P.full) / (1 + 0.12 * max(0, ns - 2));\n  const trem = sin(2 * PI * 5.4 * t), tm = 1 - 0.9 * tr * (0.5 + 0.5 * trem), wob = 0.3 * tr * trem;\n  const col = [0, 0, 0];\n  for (let i = 0; i \u003c NP; i++) {\n    const am = P.amp[i];\n    if (am \u003c 0.004) continue;\n    const { x, w, top, m, mh, base } = PIPES[i];\n    const a = am * gain * tm, span = m - top, osc = 0.7 + 0.3 * cos(t * (5 + 0.6 * i) + i * 1.7);\n    const bm = max(bands, 5 * P.full), creep = 0.3 * t + i * 0.37;\n    // Its light on the polished tin and the gilt round it.\n    stopCol(col, s, 0.4, P.full);\n    const kb = am * tm * (0.22 + 0.5 * s) * spread * 255;\n    for (let y = max(0, top - 10); y \u003c min(H, base + 6); y++) {\n      const ly = kb * (y \u003c top ? exp((y - top) / 4) : y > m ? exp((m - y) / 7) : 1);\n      for (let xx = max(0, x - 16); xx \u003c min(W, x + w + 16); xx++) {\n        const dd = xx \u003c x ? x - xx : xx >= x + w ? xx - x - w + 1 : 0, lb = ly / (1 + dd * dd * 0.05), o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * col[n] * lb;\n      }\n    }\n    for (let y = top; y \u003c m; y++) {\n      const u = (m - 0.5 - y) / span;\n      const bv = abs(cos(PI * (bm * u - creep + wob))) ** 2.5 * osc;\n      const g = a * (0.75 + 0.25 * exp(-3 * u)) * (floor0 + (1 - floor0) * bv);\n      stopCol(col, s, u, P.full);\n      for (let j = -2; j \u003c w + 2; j++) {\n        const xx = x + j;\n        if (xx \u003c 0 || xx >= W) continue;\n        const cr = j \u003c 0 || j >= w ? (j === -1 || j === w ? 0.2 : 0.07) : 0.6 + 0.4 * sin((PI * (j + 0.5)) / w);\n        const o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += col[n] * g * cr;\n      }\n    }\n    // The mouth: hot in the slot, flaring as the pipe speaks, and a glow round it.\n    stopCol(col, s, 0, P.full);\n    const cx = x + w / 2, cy = m + mh / 2, hot = a * (0.8 + 1.1 * P.chiff[i]);\n    for (let y = m - 4; y \u003c= m + mh + 4; y++)\n      for (let xx = x - 3; xx \u003c x + w + 3; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const e = ((xx + 0.5 - cx) / (w / 2 + 1.2)) ** 2 + ((y + 0.5 - cy) / 2.6) ** 2;\n        if (e > 3) continue;\n        const slot = y >= m && y \u003c m + mh && xx > x && xx \u003c x + w - 1;\n        const o = (y * W + xx) * 3, k = slot ? hot * 2 : hot * 0.5 * exp(-e * 1.3);\n        for (let n = 0; n \u003c 3; n++) F[o + n] += mix(col[n], 1, slot ? 0.7 : 0.2) * k;\n      }\n  }\n  // The candle flames, each with a halo in the air round it.\n  for (const [x, f] of [[10, P.fl], [53, P.fr]]) {\n    for (let y = 92; y \u003c= 100; y++)\n      for (let xx = x - 3; xx \u003c= x + 3; xx++) {\n        const e = (xx - x) ** 2 + ((y - 96.5) * 0.8) ** 2, o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += CAN[n] * 0.45 * f * exp(-e / 3);\n      }\n    for (const [y, c, k] of [[97, [255, 250, 225], 1], [96, [255, 236, 160], min(1, f)], [95, [255, 190, 80], cl(f, 0, 1)], [94, [255, 120, 30], cl(f - 0.8, 0, 1)]]) {\n      const o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = max(F[o + n], c[n] * k);\n    }\n  }\n  // Keys held down on the manual.\n  for (let i = 0; i \u003c NP; i++)\n    if (P.keys[i] > 0)\n      for (let y = 121; y \u003c= 125; y++)\n        for (let x = 3 * (i + 1); x \u003c 3 * (i + 1) + 2; x++) {\n          const o = (y * W + x) * 3;\n          for (let n = 0; n \u003c 3; n++) F[o + n] *= y === 125 ? 0.35 : 0.6;\n        }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, knee(F[o]), knee(F[o + 1]), knee(F[o + 2]));\n}\n\n// Light past 180 rolls off towards 255, so a speaking pipe keeps its colour.\nfunction knee(v) {\n  return (v \u003c 180 ? v : 255 - 75 * exp(-(v - 180) / 75)) | 0;\n}\n","layer":{"id":"layer-pipe-organ","type":"code","name":"pipe-organ","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pipe Organ\n// Family:  music\n// Idea:    The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower-and-flat fronts of North German Baroque organ cases and four-part chorale harmony\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1\n//\n// Knob 1: Stops. The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too.\n// Knob 2: Tempo. At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one.\n// Knob 3: Voices. How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord.\n// Knob 4: Tremulant. The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them.\n// Buttons: K1 tap is full organ: every pipe in the front speaks at once for about three seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Pipe d sounds the d-th note of a major scale up from the longest pipe, and\n// an open pipe halves its length each octave.\nconst STEP = [0, 2, 4, 5, 7, 9, 11];\nconst len = (d) => 92 * 2 ** (-(12 * floor(d / 7) + STEP[d % 7]) / 12);\n// The front: the lowest note in the middle of the centre tower, then pairs,\n// the lower note left and the next one right, as the C and C sharp chests of\n// a real case split a scale between the two sides.\nconst PIPES = [];\nfunction pair(d, x, w, top, mouth, base) {\n  const L = d ? (len(d) + len(d + 1)) / 2 : len(0);\n  const t = round(top >= 0 ? top : mouth - L);\n  const m = round(top >= 0 ? top + L : mouth);\n  const mh = w >= 5 ? 2 : 1;\n  PIPES[d] = { x, w, top: t, m, mh, f0: m + mh + 1, base };\n  if (d) PIPES[d + 1] = { x: W - x - w, w, top: t, m, mh, f0: m + mh + 1, base };\n}\n// The centre tower and the side towers hang from their crowns, so their\n// mouths step; the flats stand on equal feet, so their tops ramp.\npair(0, 29, 6, 9, 0, 110);\npair(1, 23, 5, 12, 0, 110);\npair(3, 1, 4, 30, 0, 110);\npair(5, 6, 4, 38, 0, 110);\npair(7, 19, 3, -1, 102, 110);\npair(9, 15, 3, -1, 102, 110);\npair(11, 11, 3, -1, 102, 110);\npair(13, 19, 3, -1, 44, 50);\npair(15, 15, 3, -1, 44, 50);\npair(17, 11, 3, -1, 44, 50);\nconst NP = 19;\n\n// Eight-chord phrases on the scale's chords, I = 0 to vi = 5. The first one\n// always opens the piece.\nconst PHRASES = [\n  [0, 4, 5, 3, 0, 1, 4, 0],\n  [0, 5, 1, 4, 0, 3, 4, 0],\n  [5, 3, 0, 4, 5, 1, 4, 4],\n  [0, 3, 0, 4, 5, 1, 4, 0],\n  [3, 4, 0, 5, 1, 0, 4, 0],\n  [0, 2, 5, 3, 1, 4, 4, 0],\n];\n// Voices in the order the knob adds them: soprano, bass, alto, tenor, then\n// three that fill the chord.\nconst VORD = [0, 3, 1, 2, 4, 5, 6];\n\n// Surfaces, as how much of each light they give back.\nconst TIN = [0.9, 0.95, 1];\nconst WOOD = [0.42, 0.25, 0.15];\nconst GILT = [1.3, 1, 0.42];\nconst DARK = [0.07, 0.05, 0.045];\nconst STONE = [0.9, 0.88, 0.84];\n// Grey daylight from the nave, the candles, and the lamp on the music desk.\nconst DAY = [56, 56, 64];\nconst CAN = [200, 126, 58];\nconst LAMP = [255, 210, 140];\n// The rose window's glass.\nconst RUBY = [230, 40, 60];\nconst SAPH = [50, 90, 255];\nconst AMBER = [255, 200, 80];\nconst GREEN = [60, 200, 110];\nconst ROSE = [RUBY, SAPH, GREEN, SAPH];\n// Stop colours: flute, principal, reed at the mouth and up the body, full organ.\nconst FLUTE = [0.35, 0.62, 1];\nconst PRIN = [0.84, 0.9, 1];\nconst REED0 = [1, 0.77, 0.27];\nconst REED1 = [1, 0.2, 0.08];\nconst FULL = [1, 0.86, 0.58];\n\n// Round tin: a highlight a third of the way across and a dark far edge.\nfunction shade(p) {\n  return (0.2 + 0.5 * sin(PI * p) ** 0.7 + 0.55 * exp(-(((p - 0.36) / 0.14) ** 2))) * (1.1 - 0.4 * p);\n}\n\n// Carved and gilt pipe shades: pierced scrolls.\nfunction fret(x, y) {\n  return sin(x * 1.25 + 2 * sin(y * 0.52)) * sin(y * 0.9 + 1.6 * sin(x * 0.61));\n}\n\nfunction build(P) {\n  const A = P.A;\n  const put = (x, y, c, k = 1, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    for (let n = 0; n \u003c 3; n++) A[o + n] = mix(A[o + n], c[n] * k, a);\n  };\n  // Left half and its mirror.\n  const two = (x, y, c, k, a) => (put(x, y, c, k, a), put(W - 1 - x, y, c, k, a));\n  const row = (x0, x1, y, c, k) => {\n    for (let x = x0; x \u003c= x1; x++) two(x, y, c, k);\n  };\n  // The church wall: courses of ashlar.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cs = floor(y / 5), off = (cs & 1) * 4, mortar = y % 5 === 4 || (x + off) % 8 === 7;\n      put(x, y, STONE, mortar ? 0.14 : 0.27 + 0.1 * hash(floor((x + off) / 8), cs));\n    }\n  // The case, dark inside.\n  for (let y = 0; y \u003c 114; y++) for (let x = 0; x \u003c 32; x++) if (x > 21 || (x > 9 ? y >= 11 : y >= 22)) two(x, y, DARK, 1);\n  // Stiles between the towers and the flats.\n  for (const [x, y0] of [[0, 30], [10, 16], [22, 9]]) for (let y = y0; y \u003c 110; y++) two(x, y, WOOD, 1.05 + 0.15 * sin(y * 0.8) * (y % 12 \u003c 2 ? 1 : 0));\n  // The side towers' crowns, each with a gilt urn and a flame on top.\n  row(0, 10, 29, GILT, 0.9);\n  for (let y = 26; y \u003c= 28; y++) row(0, 10, y, WOOD, 0.9);\n  for (const x of [2, 5, 8]) two(x, 27, GILT, 1.05);\n  row(0, 10, 25, GILT, 1.05);\n  row(0, 10, 24, WOOD, 0.7);\n  row(0, 10, 23, WOOD, 1);\n  row(0, 10, 22, GILT, 1.15);\n  const URN = [[21, 2], [20, 1], [19, 2], [18, 2], [17, 1], [16, 0], [15, 1], [14, 0]];\n  for (const [y, r] of URN) for (let x = 5 - r; x \u003c= 5 + r; x++) two(x, y, GILT, 1.15 - 0.18 * (x - 5 + r));\n  // The upper flats' cornice and a scroll pediment.\n  row(10, 22, 15, GILT, 0.9);\n  for (let y = 12; y \u003c= 14; y++) for (let x = 10; x \u003c= 22; x++) two(x, y, WOOD, y === 13 && x % 2 ? 1.25 : 0.9);\n  row(10, 22, 11, GILT, 1.1);\n  row(12, 20, 10, GILT, 0.75);\n  for (const [x, y] of [[12, 9], [13, 9], [19, 9], [20, 9], [14, 8], [15, 8], [17, 8], [18, 8], [16, 7], [16, 6]]) two(x, y, GILT, 1.05);\n  // The centre tower's crown, with a carved crest over it.\n  row(22, 31, 8, GILT, 0.95);\n  for (let y = 5; y \u003c= 7; y++) for (let x = 22; x \u003c= 31; x++) two(x, y, x % 4 === 1 && y === 6 ? GILT : WOOD, x % 4 === 1 && y === 6 ? 1.1 : 0.9);\n  row(22, 31, 4, GILT, 1.1);\n  for (let x = 23; x \u003c= 31; x++) {\n    const h = 4 * (1 - ((x - 31.5) / 9) ** 2);\n    for (let y = floor(4 - h); y \u003c 4; y++) if (fret(x, y + 3) > -0.2 || x === 31) two(x, y, GILT, x === 31 ? 1.25 : 0.8 + 0.3 * fret(x, y));\n  }\n  // Pipe shades over every pipe that stops short of the carving above it.\n  const GAP = [5, 14, 18, 28, 35, 45, 49, 58];\n  for (const q of PIPES) {\n    const y0 = q.base === 50 ? 16 : q.x === 1 || q.x === 6 || q.x > 53 ? 30 : q.x > 22 && q.x \u003c 41 ? 9 : 54;\n    for (let x = q.x - 1; x \u003c= q.x + q.w; x++) {\n      const own = x >= q.x && x \u003c q.x + q.w;\n      if (own || GAP.indexOf(x) >= 0)\n        for (let y = y0; y \u003c q.top; y++) {\n          const v = fret(x, y);\n          if (own && y === q.top - 1) put(x, y, GILT, 1.05);\n          else if (v > -0.1) put(x, y, GILT, 0.55 + 0.5 * v);\n        }\n    }\n  }\n  // Under the lower flats the pipe shades of the upper ones, and the shelf they stand on.\n  row(10, 22, 50, GILT, 0.95);\n  row(10, 22, 51, WOOD, 1);\n  row(10, 22, 52, WOOD, 0.9);\n  row(10, 22, 53, WOOD, 0.55);\n  // The pipes: body, mouth with its lips, and the conical foot.\n  for (const q of PIPES) {\n    const { x, w, top, m, mh, f0, base } = q;\n    for (let y = top; y \u003c m; y++) for (let j = 0; j \u003c w; j++) put(x + j, y, TIN, shade((j + 0.5) / w) * (y === top ? 0.7 : 1));\n    for (let j = 0; j \u003c w; j++) {\n      const inner = j > 0 && j \u003c w - 1, s = shade((j + 0.5) / w);\n      if (inner) put(x + j, m - 1, TIN, s * 1.3);\n      for (let y = m; y \u003c m + mh; y++) put(x + j, y, inner ? DARK : TIN, inner ? 0.8 : s);\n      put(x + j, m + mh, TIN, s * (inner ? 1.15 : 0.9));\n    }\n    if (w >= 5) for (let j = floor((w - 1) / 2); j \u003c= floor(w / 2); j++) put(x + j, m - 2, TIN, 1.25);\n    const cx = x + w / 2;\n    for (let y = f0; y \u003c base; y++) {\n      const hw = mix(w / 2, 0.7, (y - f0) / max(1, base - 1 - f0));\n      for (let xx = floor(cx - hw); xx \u003c= cx + hw; xx++) {\n        const cov = cl(hw - abs(xx + 0.5 - cx) + 0.5, 0, 1);\n        put(xx, y, TIN, 0.9 * shade(cl((xx + 0.5 - cx + hw) / (2 * hw), 0, 1)), cov);\n      }\n    }\n  }\n  // The impost the pipes stand on.\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 110, GILT, 1);\n    put(x, 111, WOOD, x % 16 === 0 ? 0.6 : 1);\n    put(x, 112, WOOD, x % 16 === 0 ? 0.6 : 0.95);\n    put(x, 113, WOOD, 0.5);\n  }\n  // Candles on the stiles between the side towers and the flats.\n  for (let y = 98; y \u003c= 101; y++) two(10, y, [0.95, 0.9, 0.8], 0.5);\n  for (let x = 9; x \u003c= 11; x++) two(x, 102, GILT, 0.6);\n  // The console: the music desk with its lamp, and one manual.\n  for (let y = 114; y \u003c H; y++) for (let x = 0; x \u003c W; x++) put(x, y, WOOD, 0.7);\n  for (let y = 114; y \u003c= 119; y++) for (let x = 16; x \u003c= 47; x++) put(x, y, WOOD, 0.85);\n  for (let y = 115; y \u003c= 119; y++)\n    for (let x = 21; x \u003c= 42; x++) put(x, y, [0.95, 0.9, 0.76], y === 116 || y === 118 ? 0.62 : hash(x, y) \u003c 0.13 ? 0.3 : 1);\n  for (let x = 27; x \u003c= 36; x++) put(x, 114, GILT, 1.15);\n  for (let k = 0; k \u003c 21; k++) {\n    for (let y = 121; y \u003c= 125; y++) for (let x = 3 * k; x \u003c 3 * k + 2; x++) put(x, y, [0.92, 0.88, 0.78], y === 125 ? 0.7 : 1);\n    const n = (k + 6) % 7;\n    if (k \u003c 20 && n !== 2 && n !== 6) for (let y = 121; y \u003c= 123; y++) put(3 * k + 2, y, DARK, 1), put(3 * k + 3, y, DARK, 1);\n  }\n  // Light: grey daylight from above, warm candlelight, the desk lamp.\n  for (let i = 0; i \u003c N; i++) {\n    const x = (i & 63) + 0.5, y = (i >> 6) + 0.5;\n    P.day[i] = 0.45 + 0.55 * (1 - y / H) ** 1.3;\n    P.cL[i] = 0.85 / (1 + ((x - 10.5) ** 2 + (y - 96) ** 2) / 450);\n    P.cR[i] = 0.85 / (1 + ((x - 53.5) ** 2 + (y - 96) ** 2) / 450);\n    P.lamp[i] = y > 115 ? 1.1 / (1 + (x - 32) ** 2 / 90 + (y - 115) ** 2 / 40) : 0.45 / (1 + ((x - 32) ** 2 + (y - 114) ** 2) / 140);\n  }\n}\n\n// The nearest scale degree in lo..hi under cap whose note is in pcs, moving\n// from prev, sitting still costing `same`.\nfunction near(lo, hi, pcs, prev, same, cap) {\n  let best = -1;\n  let bs = 1e9;\n  for (let d = lo; d \u003c= hi; d++) {\n    if (d >= cap || pcs.indexOf(d % 7) \u003c 0) continue;\n    const j = abs(d - prev), s = j + (j === 0 ? same : 0) + (j > 4 ? 2 : 0) + rnd() * 0.9;\n    if (s \u003c bs) (bs = s), (best = d);\n  }\n  return best \u003c 0 ? (cap \u003c 99 ? near(lo, hi, pcs, prev, same, 99) : prev) : best;\n}\n\n// The next chord of the chorale, voiced from the last one.\nfunction chord(P) {\n  if (P.pi >= P.ph.length) (P.ph = PHRASES[floor(rnd() * PHRASES.length)]), (P.pi = 0);\n  const r = P.ph[P.pi++], last = P.pi === P.ph.length, pen = P.pi === P.ph.length - 1;\n  const T = [r, (r + 2) % 7, (r + 4) % 7];\n  if (pen && r === 4 && rnd() \u003c 0.6) T.push(3);\n  const [s0, a0, t0, b0] = P.prev;\n  const B = near(0, 7, [!last && !pen && rnd() \u003c 0.3 ? T[1] : r], b0, 0, 99);\n  const S = near(11, 18, last && r === 0 ? [0] : T, s0, 1.6, 99);\n  const A = near(8, 14, T, a0, 0.4, S);\n  const miss = T.filter((c) => c !== S % 7 && c !== A % 7 && c !== B % 7);\n  const Tn = near(4, 11, miss.length ? miss : T, t0, 0.4, A);\n  const v = [S, A, Tn, B];\n  // Three more parts fill the chord: the bass an octave up, one in the middle, one high.\n  for (const goal of [B + 7, 10, 16]) {\n    let best = -1;\n    let bs = 1e9;\n    for (let d = 0; d \u003c NP; d++) {\n      const s = abs(d - goal) + rnd() * 0.5;\n      if (T.indexOf(d % 7) >= 0 && v.indexOf(d) \u003c 0 && s \u003c bs) (bs = s), (best = d);\n    }\n    v.push(best);\n  }\n  P.prev = v;\n  return { v, dur: last ? 2 : 1, last, pass: [-1, -1, -1, -1], at: 0 };\n}\n\n// A part moving a third walks through the note between on the half beat.\nfunction passing(c, nx) {\n  if (c.last) return;\n  for (let k = 0; k \u003c 4; k++) if (abs(nx.v[k] - c.v[k]) === 2 && rnd() \u003c (k ? 0.4 : 0.6)) c.pass[k] = (c.v[k] + nx.v[k]) / 2;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    A: F32(N * 3), F: F32(N * 3), day: F32(N), cL: F32(N), cR: F32(N), lamp: F32(N),\n    amp: F32(NP), tgt: F32(NP), on: F32(NP), chiff: F32(NP), keys: F32(NP),\n    t: 0, beat: 0, fullT: 99, full: 0, fl: 1, fr: 1, s: 0, tr: 0,\n    ph1: rnd() * 6.28, ph2: rnd() * 6.28, ph: PHRASES[0], pi: 0, prev: [14, 11, 7, 0, 7, 9, 16],\n  });\n  build(P);\n  P.cur = chord(P);\n  P.nx = chord(P);\n  passing(P.cur, P.nx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  const s = (P.s = cl(k[0], 0, 1));\n  const tempo = cl(k[1], 0.2, 3);\n  const nv = cl(round(k[2]), 1, 6);\n  const tr = (P.tr = cl(k[3], 0, 1));\n  const t = (P.t += d);\n  P.beat += (d * tempo) / 2;\n  while (P.beat >= P.cur.at + P.cur.dur) {\n    const at = P.cur.at + P.cur.dur;\n    P.cur = P.nx;\n    P.cur.at = at;\n    P.nx = chord(P);\n    passing(P.cur, P.nx);\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.fullT = 0;\n  P.fullT += d;\n  P.full = P.fullT \u003c 2.8 ? sm(0, 0.06, P.fullT) : 1 - sm(2.8, 3.6, P.fullT);\n\n  // Which pipes speak: each part's note, the octave above from the\n  // principals on, and with the reeds the octave below, the twelfth and the\n  // fifteenth.\n  const c = P.cur, pos = P.beat - c.at, r4 = 0.8 * sm(0.3, 0.55, s), r2 = 0.75 * sm(0.7, 0.92, s);\n  P.tgt.fill(0);\n  P.keys.fill(0);\n  if (!(c.last && pos > c.dur - 0.22))\n    for (let n = 0; n \u003c= nv; n++) {\n      const v = VORD[n], g = v \u003c 4 && c.pass[v] >= 0 && pos >= c.dur / 2 ? c.pass[v] : c.v[v];\n      if (g \u003c 0) continue;\n      P.tgt[g] = 1;\n      if (v !== 3) P.keys[g] = 1;\n      if (g + 7 \u003c NP) P.tgt[g + 7] = max(P.tgt[g + 7], r4);\n      if (g >= 7) P.tgt[g - 7] = max(P.tgt[g - 7], r2);\n      if (g + 11 \u003c NP) P.tgt[g + 11] = max(P.tgt[g + 11], r2);\n      if (g + 14 \u003c NP) P.tgt[g + 14] = max(P.tgt[g + 14], r2);\n    }\n  for (let i = 0; i \u003c NP; i++) {\n    const g = max(P.tgt[i], 0.9 * P.full);\n    if (g > 0.5 && P.on[i] \u003c 0.5) P.chiff[i] = 1;\n    P.on[i] = g;\n    P.amp[i] += (g - P.amp[i]) * (1 - exp(-d / (g > P.amp[i] ? 0.035 : 0.14)));\n    P.chiff[i] *= exp(-d / 0.18);\n  }\n  // Candles in the draught: as the tremulant shakes the wind they flicker\n  // harder and burn lower.\n  const fa = 0.05 + tr;\n  const fl = (ph) => 1 - 0.4 * fa + fa * (0.6 * sin(t * 7.1 + ph) + 0.45 * sin(t * 11.9 + 2 * ph) + 0.35 * sin(t * 4.3 + 3 * ph) * sin(t * 17.3));\n  P.fl = cl(fl(0), 0.1, 2);\n  P.fr = cl(fl(2.1), 0.1, 2);\n}\n\n// A stop's colour, u from the mouth (0) to the top (1).\nfunction stopCol(out, s, u, full) {\n  for (let n = 0; n \u003c 3; n++) {\n    const v = s \u003c 0.5 ? mix(FLUTE[n], PRIN[n], s * 2) : mix(PRIN[n], mix(REED0[n], REED1[n], min(1, u * 1.6)), s * 2 - 1);\n    out[n] = mix(v, FULL[n], full);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { A, F, day, cL, cR, lamp, t } = P;\n  // The case in daylight, candlelight and lamplight.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const dl = day[i], cn = cL[i] * P.fl + cR[i] * P.fr, lp = lamp[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = A[o + n] * (DAY[n] * dl + CAN[n] * cn + LAMP[n] * lp);\n  }\n  // The rose window's light, cast long and slow across the case.\n  const px = 32 + 17 * sin(t * 0.05 + P.ph1), py = 60 + 34 * sin(t * 0.031 + P.ph2), RX = 15, RY = 24;\n  const I0 = 0.65 * (0.8 + 0.2 * sin(t * 0.23 + P.ph1));\n  for (let y = max(0, floor(py - RY)); y \u003c= min(H - 1, py + RY); y++)\n    for (let x = max(0, floor(px - RX)); x \u003c= min(W - 1, px + RX); x++) {\n      const dx = (x + 0.5 - px) / RX, dy = (y + 0.5 - py) / RY, r = sqrt(dx * dx + dy * dy);\n      if (r >= 1) continue;\n      const a = atan2(dy, dx) / (2 * PI) + 0.5;\n      let c, lead;\n      if (r \u003c 0.2) (c = AMBER), (lead = r > 0.15);\n      else if (r \u003c 0.5) {\n        const q = a * 8;\n        (c = floor(q) & 1 ? RUBY : SAPH), (lead = q - floor(q) \u003c 0.1 || r \u003c 0.24);\n      } else {\n        const q = a * 16;\n        (c = ROSE[floor(q) & 3]), (lead = q - floor(q) \u003c 0.08 || r \u003c 0.54);\n      }\n      const kk = I0 * (lead ? 0.45 : 1) * sm(1, 0.82, r), o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * c[n] * kk;\n    }\n  // The pipes that speak: the mouth lights and a standing wave shimmers up\n  // the body, its bands creeping upward and wavering with the tremulant.\n  const s = P.s, tr = P.tr, gain = 240 * (0.8 + 0.4 * s), bands = 2 + 4 * s, floor0 = 0.45 - 0.25 * s;\n  // Many pipes at once light the case less each, or the chord drowns in its own light.\n  let ns = 0;\n  for (let i = 0; i \u003c NP; i++) ns += P.amp[i];\n  const spread = (1 - 0.6 * P.full) / (1 + 0.12 * max(0, ns - 2));\n  const trem = sin(2 * PI * 5.4 * t), tm = 1 - 0.9 * tr * (0.5 + 0.5 * trem), wob = 0.3 * tr * trem;\n  const col = [0, 0, 0];\n  for (let i = 0; i \u003c NP; i++) {\n    const am = P.amp[i];\n    if (am \u003c 0.004) continue;\n    const { x, w, top, m, mh, base } = PIPES[i];\n    const a = am * gain * tm, span = m - top, osc = 0.7 + 0.3 * cos(t * (5 + 0.6 * i) + i * 1.7);\n    const bm = max(bands, 5 * P.full), creep = 0.3 * t + i * 0.37;\n    // Its light on the polished tin and the gilt round it.\n    stopCol(col, s, 0.4, P.full);\n    const kb = am * tm * (0.22 + 0.5 * s) * spread * 255;\n    for (let y = max(0, top - 10); y \u003c min(H, base + 6); y++) {\n      const ly = kb * (y \u003c top ? exp((y - top) / 4) : y > m ? exp((m - y) / 7) : 1);\n      for (let xx = max(0, x - 16); xx \u003c min(W, x + w + 16); xx++) {\n        const dd = xx \u003c x ? x - xx : xx >= x + w ? xx - x - w + 1 : 0, lb = ly / (1 + dd * dd * 0.05), o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * col[n] * lb;\n      }\n    }\n    for (let y = top; y \u003c m; y++) {\n      const u = (m - 0.5 - y) / span;\n      const bv = abs(cos(PI * (bm * u - creep + wob))) ** 2.5 * osc;\n      const g = a * (0.75 + 0.25 * exp(-3 * u)) * (floor0 + (1 - floor0) * bv);\n      stopCol(col, s, u, P.full);\n      for (let j = -2; j \u003c w + 2; j++) {\n        const xx = x + j;\n        if (xx \u003c 0 || xx >= W) continue;\n        const cr = j \u003c 0 || j >= w ? (j === -1 || j === w ? 0.2 : 0.07) : 0.6 + 0.4 * sin((PI * (j + 0.5)) / w);\n        const o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += col[n] * g * cr;\n      }\n    }\n    // The mouth: hot in the slot, flaring as the pipe speaks, and a glow round it.\n    stopCol(col, s, 0, P.full);\n    const cx = x + w / 2, cy = m + mh / 2, hot = a * (0.8 + 1.1 * P.chiff[i]);\n    for (let y = m - 4; y \u003c= m + mh + 4; y++)\n      for (let xx = x - 3; xx \u003c x + w + 3; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const e = ((xx + 0.5 - cx) / (w / 2 + 1.2)) ** 2 + ((y + 0.5 - cy) / 2.6) ** 2;\n        if (e > 3) continue;\n        const slot = y >= m && y \u003c m + mh && xx > x && xx \u003c x + w - 1;\n        const o = (y * W + xx) * 3, k = slot ? hot * 2 : hot * 0.5 * exp(-e * 1.3);\n        for (let n = 0; n \u003c 3; n++) F[o + n] += mix(col[n], 1, slot ? 0.7 : 0.2) * k;\n      }\n  }\n  // The candle flames, each with a halo in the air round it.\n  for (const [x, f] of [[10, P.fl], [53, P.fr]]) {\n    for (let y = 92; y \u003c= 100; y++)\n      for (let xx = x - 3; xx \u003c= x + 3; xx++) {\n        const e = (xx - x) ** 2 + ((y - 96.5) * 0.8) ** 2, o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += CAN[n] * 0.45 * f * exp(-e / 3);\n      }\n    for (const [y, c, k] of [[97, [255, 250, 225], 1], [96, [255, 236, 160], min(1, f)], [95, [255, 190, 80], cl(f, 0, 1)], [94, [255, 120, 30], cl(f - 0.8, 0, 1)]]) {\n      const o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = max(F[o + n], c[n] * k);\n    }\n  }\n  // Keys held down on the manual.\n  for (let i = 0; i \u003c NP; i++)\n    if (P.keys[i] > 0)\n      for (let y = 121; y \u003c= 125; y++)\n        for (let x = 3 * (i + 1); x \u003c 3 * (i + 1) + 2; x++) {\n          const o = (y * W + x) * 3;\n          for (let n = 0; n \u003c 3; n++) F[o + n] *= y === 125 ? 0.35 : 0.6;\n        }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, knee(F[o]), knee(F[o + 1]), knee(F[o + 2]));\n}\n\n// Light past 180 rolls off towards 255, so a speaking pipe keeps its colour.\nfunction knee(v) {\n  return (v \u003c 180 ? v : 255 - 75 * exp(-(v - 180) / 75)) | 0;\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stops","min":0,"max":1,"about":"The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too."},{"name":"Tempo","min":0.2,"max":3,"about":"At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one."},{"name":"Voices","min":1,"max":6,"about":"How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord."},{"name":"Tremulant","min":0,"max":1,"about":"The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them."}],"start":[0,2,1,0.06],"measures":{"motion":0.1017,"detail":0.1071,"edges":0.5078,"complexity":2.0828,"coverage":0.7769,"colour":0.1713,"drift":0.0578},"knobResponse":[0.0627,0.0467,0.0469,0.0424]},{"slug":"plait","title":"Plait","family":"textile","round":15,"note":"세 가닥이 바깥 가닥부터 가운데 위로 넘어가며 땋여 내려가요. 밑으로 들어가는 가닥은 어둡고, 다 땋으면 리본을 묶고 다음 가닥이 내려와요. K3 이 일곱 가닥 납작 땋기까지 가요.","idea":"Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.","buttons":"K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.","code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","layer":{"id":"layer-plait","type":"code","name":"plait","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the strands' colours together, starting from teal, blue and magenta."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds."},{"name":"Strands","min":3,"max":7,"about":"3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge."},{"name":"Tension","min":0,"max":1,"about":"At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7."}],"start":[0,2,3,0.06],"measures":{"motion":1.0033,"detail":0.0467,"edges":0.1711,"complexity":1.4043,"coverage":0.7414,"colour":0.4415,"drift":0.2976},"knobResponse":[0.2929,0.2273,0.2358,0.2751]},{"slug":"player-piano","title":"Player Piano","family":"music","round":15,"note":"자동 피아노의 구멍 뚫린 종이 두루마리가 내려와요. 구멍이 트래커 바를 지날 때마다 발치의 건반이 눌려 빛나요. 곡은 패턴이 그 자리에서 지어서, 화음은 가로줄로, 펼친 화음은 사선으로 읽혀요.","idea":"A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.","buttons":"K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.","code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-player-piano","type":"code","name":"player-piano","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the parts together, starting from a gold tune over a blue bass."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210."},{"name":"Hands","min":2,"max":5,"about":"2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next."},{"name":"Pedal","min":0,"max":1,"about":"At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise."}],"start":[0,2,2,0.06],"measures":{"motion":0.3229,"detail":0.0822,"edges":0.6181,"complexity":0.1256,"coverage":0.9461,"colour":0.1765,"drift":0.0751},"knobResponse":[0.0626,0.0796,0.0519,0.0503]},{"slug":"pole-vault","title":"Pole Vault","family":"sport","round":26,"note":"밤 경기장에서 카메라가 장대를 든 선수를 따라 달리고, 활처럼 휜 장대를 타고 거꾸로 오른 선수가 패널 꼭대기 가까운 가로대를 넘어 매트에 떨어지면 심판이 흰 깃발이나 빨간 깃발을 들어요. K3 이 가로대를 5.00 m 에서 6.20 m 까지 올리고, 누르면 다음 선수가 바로 달려요.","idea":"A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.","buttons":"K1 tap sends the next vaulter down the runway now.","code":"// ===== Patternflow pattern =====\n// Title:   Pole Vault\n// Family:  sport\n// Idea:    A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the pole vault in athletics\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1\n//\n// Knob 1: Colour. The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour.\n// Knob 2: Speed. Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2.\n// Knob 3: Bar. The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses.\n// Knob 4: Wind. Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run.\n// Buttons: K1 tap sends the next vaulter down the runway now.\n\nconst W = 64, H = 128, N = W * H;\n// The runway (GY), the pole's tip in the box, 14 rows a metre. A point z LEDs\n// nearer the camera lands OBX right and OBY down. The standards stand XS past\n// the box, ZS either side; the mat starts at MAT0, MZ either side, MH tall.\nconst GY = 104, BOXY = GY + 2, PXM = 14, OBX = 0.55, OBY = 0.22, XS = 5, ZS = 13, MAT0 = 3, MZ = 11, MH = 9;\n// The camera's left edge on the bar, gravity at Speed 2, the body.\nconst CAMF = -26, G = 170, TORSO = 4.2, ARM = 5, LEG = 3.3, TACC = 0.7, TA = 1.25, PSI1 = 1.64;\nconst [SET, RUN, POLE, FLY, MAT] = [0, 1, 2, 3, 4];\n// The stands texture: CW columns that wrap, rows ST to 83.\nconst CW = 256, ST = 17, CH = 84 - ST;\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, asin, acos, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst lerp = (a, b, u) => a + (b - a) * u;\nconst rnd = () => Math.random();\n// A camera flash somewhere in the stands.\nconst flash = (t0) => ({ x: floor(rnd() * W), y: ST + 2 + floor(rnd() * 64), t0 });\nconst F = (n) => new Float32Array(n);\nconst hash = (a, b) => ((Math.imul(a * 7919 + b * 104729, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\nconst md = (a, m) => ((a % m) + m) % m;\nconst sc3 = (c, k, o = 0) => [c[0] * k + o, c[1] * k + o, c[2] * k + o];\nlet C = null;\nconst put = (x, y, c) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && C.set(c, (y * W + x) * 3);\n\n// Poses: [time, body angle, arm, near hip, near knee, far hip, far knee]. On\n// the pole the body rocks back to head-down (-PI); after the half turn it\n// goes on the other way, face down over the bar and onto the back.\nconst TAKE = [1.5, 1.6, -0.5, 0.3];\nconst VAULT = [[0, 0.08, 0.15, 1.5, 1.6, -0.5, 0.3], [0.2, -0.3, 0.25, 1.1, 1.3, 0.6, 0.2], [0.42, -1.25, 0.4, 2.1, 1.8, 2, 1.5], [0.62, -2.4, 0.9, 0.9, 0.5, 0.8, 0.4], [0.82, -3.05, 2.5, 0.2, 0.05, 0.15, 0.05], [1, -3.14, 0.35, 0.1, 0, 0.1, 0]];\nconst FLYK = [[0, PI, 0.35, 0.1, 0, 0.1, 0], [1, 1.39 * PI, 0.4, 0.7, 0.4, 0.6, 0.5], [1.4, 1.95 * PI, 0.5, 0.6, 0.3, 0.5, 0.4], [2, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8]];\nconst MATK = [[0, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8], [0.4, 2.5 * PI, 1.7, 0.8, 0.9, 0.7, 1], [0.95, 2 * PI + 0.15, 2.7, 1.5, 1.8, 1.4, 1.7]];\nfunction key(T, u, out) {\n  let j = 0;\n  while (j \u003c T.length - 2 && u > T[j + 1][0]) j++;\n  const a = T[j], b = T[j + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  for (let i = 1; i \u003c 7; i++) out[i - 1] = a[i] + (b[i] - a[i]) * f;\n  return out;\n}\n// How far below the hip the lower foot is, for a body leaning th.\nconst drop = (th, L) => LEG * max(cos(th - L[0]) + cos(th - L[0] + L[1]), cos(th - L[2]) + cos(th - L[2] + L[3]));\n\n// Built once: the stands, two LEDs a seat in rows three deep, aisles, empty\n// seats in the team colour, the upper tier in the roof's shadow; the glare.\nfunction build(S) {\n  const cr = F(CW * CH * 3), seat = F(CW * CH), glare = F(30 * 128);\n  for (let y = 0; y \u003c CH; y++) {\n    const lo = y + ST >= 52, ty = y + ST - (lo ? 52 : ST), band = ty % 3, tier = floor(ty / 3) + lo * 40;\n    const li = lo ? 0.62 + (0.38 * ty) / 31 : 0.3 + (0.42 * ty) / 29;\n    for (let x = 0, sn = 0; x \u003c CW; x++, sn = x >> 1) {\n      let c = x % 48 \u003c 2 ? [58, 58, 64] : [20, 20, 25];\n      if (x % 48 > 1 && band \u003c 2)\n        if (hash(sn, tier) > 0.8) (seat[y * CW + x] = (0.24 + 0.08 * band) * li), (c = [3, 3, 4]);\n        else c = band ? sc3(hsv(hash(sn * 3, tier), 0.55, 0.2 + 0.14 * hash(tier, sn)), 255) : x & 1 ? [14, 11, 10] : hash(sn, tier + 99) \u003c 0.5 ? [112, 78, 58] : [60, 42, 32];\n      cr.set(sc3(c, li), (y * CW + x) * 3);\n    }\n  }\n  for (let i = 0; i \u003c 30 * 128; i++) {\n    const dx = (i % 128) - 64, dy = floor(i / 128) - 3.5, d2 = dx * dx + dy * dy;\n    glare[i] = 70 * exp(-d2 / 16) + 30 * exp(-d2 / 110) + 30 * exp(-dy * dy / 1.5 - abs(dx) / 12);\n  }\n  Object.assign(S, { cr, seat, glare });\n}\n\nexport function setup(params) {\n  const S = { t: 0, ph: SET, pt: 0, tset: 1.95, n: 0, notch: 0, miss: 0, base: 5, by: 34, cam: CAMF, wind: 0, hk: 0.13, marks: [], hudF: 0, verdict: 0, done: 0 };\n  Object.assign(S, { clear: true, fig: null, free: null, flashes: [], C: F(N * 3), q: F(6) });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  build(S);\n  params.s = S;\n  newVaulter(S);\n}\n\n// Each vaulter wears a different kit; the stand lights take the opposite colour.\nconst newVaulter = (S) => (S.vo = [0, 0.36, 0.62][S.n++ % 3]);\nfunction colours(S) {\n  const hue = (S.hk + S.vo) % 1, cols = [sc3(hsv(hue, 0.82, 1), 245), sc3(hsv((hue + 0.5) % 1, 0.75, 0.8), 210), [232, 168, 128], [150, 100, 70]];\n  S.cols = cols.concat(cols.map((c) => sc3(c, 0.62)));\n  S.acc = hsv((S.hk + 0.5) % 1, 0.75, 1);\n  S.tint = sc3(S.acc, 0.5, 0.5);\n}\n\n// The cut to the runway: the takeoff spot is where a straight pole reaches\n// the box from hands held straight up.\nfunction startRun(S) {\n  if (S.ph === MAT) newVaulter(S);\n  const h = S.base + 0.1 * S.notch, Lg = 92.5 - GY + PXM * h, th = 0.08, hy = GY - drop(th, TAKE) - 0.8;\n  const px = TORSO * sin(th) + ARM * sin(th + 0.15), py = hy - TORSO * cos(th) - ARM * cos(th + 0.15);\n  const dx = sqrt(Lg * Lg - (BOXY - py) ** 2), D = 88 + 16 * (h - 5);\n  S.R = { Lg, D, dist: 0, Xto: -dx - px, hy, bto: -asin((BOXY - py) / Lg), psi0: atan2(BOXY - py, dx) };\n  Object.assign(S, { ph: RUN, pt: 0, clear: rnd() \u003c 0.72 - 0.08 * S.notch, wob: rnd() \u003c 0.5, free: null, verdict: 0, done: 0, cam: S.R.Xto - D - 16 });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  runPose(S);\n}\n\nfunction runPose(S) {\n  const R = S.R, rem = R.D - R.dist, X = R.Xto - rem, ph = (R.dist / 15) * PI + 0.6, e2 = sm(1 - rem / 15), L = [];\n  for (let i = 0; i \u003c 2; i++) L.push(0.2 + 0.7 * sin(ph + i * PI), 0.25 + 1.3 * max(0, cos(ph + i * PI + 0.9)));\n  for (let i = 0; i \u003c 4; i++) L[i] = lerp(L[i], TAKE[i], e2);\n  const th = lerp(0.16, 0.08, e2), hy = lerp(GY - drop(th, L) - 0.3, R.hy, e2), e = sm(1 - rem / 19);\n  // The pole tip drops over the last strides; then the top hand goes up as\n  // the tip slides into the box.\n  const p1x = lerp(X - 1, X + TORSO * sin(th) + ARM * sin(th + 0.15), e), p1y = lerp(hy - 0.5, hy - TORSO * cos(th) - ARM * cos(th + 0.15), e);\n  const beta = lerp(lerp(1.25 + 0.04 * sin(ph * 2), 0.12, sm((70 - rem) / 51)), R.bto, e), dx = cos(beta), dy = -sin(beta);\n  S.fig = { x: X, y: hy, th, fc: 1, L, hands: [p1x, p1y, p1x + 4.5 * dx, p1y + 4.5 * dy] };\n  S.pole = { x: p1x - 2.5 * dx, y: p1y - 2.5 * dy, x1: p1x + R.Lg * dx, y1: p1y + R.Lg * dy };\n}\n\n// The bent pole as an arc of length L from the box to the top hand.\nconst ARC = F(5);\nfunction arc(px, py, c, L) {\n  const r = cl(c / L, 0.3, 1);\n  let x = sqrt(6 * (1 - r)) + 1e-4;\n  for (let i = 0; i \u003c 5; i++) x = cl(x - (sin(x) - r * x) / (cos(x) - r), 1e-4, 1.56);\n  const R = L / (2 * x), d = R * cos(x), cx = px / 2 + ((py - BOXY) / c) * d, cy = (py + BOXY) / 2 - (px / c) * d, a0 = atan2(BOXY - cy, -cx);\n  ARC.set([cx, cy, R, a0, md(atan2(py - cy, px - cx) - a0 + PI, 2 * PI) - PI]);\n  return ARC;\n}\n\nfunction polePose(S) {\n  const R = S.R, u = min(1, S.pt / TA), L = R.Lg;\n  const c = L * (1 - 0.25 * sin(PI * min(1, u / 0.78)) ** 1.4), psi = R.psi0 + (PSI1 - R.psi0) * (1 - (1 - u) ** 1.6);\n  const p1x = -c * cos(psi), p1y = BOXY - c * sin(psi), q = key(VAULT, u, S.q), th = q[0], a = q[1];\n  const fc = cos(PI * sm((u - 0.66) / 0.24)), ux = sin(th), uy = -cos(th);\n  // Hang the body from the top hand; the bottom hand is 4.5 LEDs down the arc.\n  const ax = ux * cos(a) + cos(th) * fc * sin(a), ay = uy * cos(a) + sin(th) * fc * sin(a);\n  const A = arc(p1x, p1y, c, L), b = A[3] + (A[4] * (L - 4.5)) / L;\n  S.fig = { x: p1x - ARM * ax - TORSO * ux, y: p1y - ARM * ay - TORSO * uy, th, fc, L: q.slice(2), hands: [p1x, p1y, A[0] + A[2] * cos(b), A[1] + A[2] * sin(b)] };\n  S.pole = { c, L, px: p1x, py: p1y };\n}\n\nfunction matPose(S, tau) {\n  const q = key(MATK, tau, S.q), c = S.clear, e = sm((tau - (c ? 1.1 : 1.6)) / 0.3), w = max(0, tau - 1.9) * 20, s = sin(w * 0.4);\n  let L = q.slice(2).map((v) => v * (1 - e)), arms = [lerp(q[1], c ? 0.25 : 2.9, e), lerp(q[1] + 0.3, c ? 0.45 : 3.1, e)];\n  // Up with arms high and a hop if the bar stayed; then off to the right.\n  const Y = lerp(GY - MH - 1 + 0.6 * sm((tau - 0.4) / 0.5), GY - MH - 6.6 - 1.5 * c * abs(sin((tau - 1.1) * 9)) * (tau \u003c 1.9), e);\n  if (w) [L, arms] = [[0.5 * s, 0.4, -0.5 * s, 0.4], [PI - 0.4 * s, PI + 0.4 * s]];\n  S.fig = { x: S.lx + 2 * sm(tau / 0.5) + w, y: w ? GY - MH - 6.6 : Y, th: w ? 0.05 : lerp(q[0], 2 * PI, e), fc: w ? 1 : -1, L, arms };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06];\n  const st = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2, first = S.t === 0;\n  S.hk = (0.13 + cl(k[0], 0, 1)) % 1;\n  S.base = round(cl(k[2], 5, 6.2) * 20) / 20;\n  S.wind = cl(k[3], -1, 1);\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === SET || S.ph === MAT)) startRun(S);\n  S.pt += st;\n  const R = S.R, b = S.bar, tau = S.pt, tgt = GY - PXM * (S.base + 0.1 * S.notch);\n  if (first) S.by = tgt;\n  if (b.st !== 1 && b.st !== 3) S.by += (tgt - S.by) * min(1, st * 3);\n  if (S.ph > POLE) S.cam = CAMF;\n\n  if (S.ph === SET) {\n    [S.cam, S.fig] = [CAMF, null];\n    if (tau >= S.tset) startRun(S);\n  } else if (S.ph === RUN) {\n    R.dist = min(R.D, R.dist + 62 * (1 + 0.12 * S.wind) * min(1, 0.3 + tau / TACC) * st);\n    const rem = R.D - R.dist;\n    runPose(S);\n    S.cam = R.Xto - rem - lerp(16, 6, sm(1 - rem / 40));\n    if (rem \u003c= 0) [S.ph, S.pt, R.cam] = [POLE, 0, S.cam];\n  } else if (S.ph === POLE) {\n    polePose(S);\n    S.cam = lerp(R.cam, CAMF, sm(tau / TA / 0.75));\n    if (tau >= TA) {\n      // Let go: the hips fly on to just over the bar, or into it.\n      const f = S.fig, ya = S.by - (S.clear ? 3.5 : 0.3), tap = sqrt((2 * max(3, f.y - ya)) / G);\n      S.fl = { x: f.x, y: f.y, vx: cl((XS + 1 - f.x) / tap, 6, 30), vy: G * tap, tap, tf: sqrt((2 * max(10, GY - MH - 1.5 - ya)) / G) };\n      S.free = { a: PI / 2 - PSI1, w: 1.4, L: R.Lg + 2.5, amax: acos(2 / (R.Lg + 2.5)) };\n      [S.ph, S.pt] = [FLY, 0];\n    }\n  } else if (S.ph === FLY) {\n    const f = S.fl, X = f.x + f.vx * tau, Y = f.y - f.vy * tau + 0.5 * G * tau * tau;\n    const q = key(FLYK, tau \u003c f.tap ? tau / f.tap : 1 + (tau - f.tap) / f.tf, S.q);\n    S.fig = { x: X, y: Y, th: q[0], fc: -1, L: q.slice(2), arms: [q[1], q[1] + 0.25] };\n    // Every camera in the house goes off at the top, the two in the infield first.\n    if (!f.fl && (f.fl = tau >= f.tap - 0.05))\n      for (let i = 0; i \u003c 18; i++) S.flashes.push(i \u003c 2 ? { x: i * 36 + 20, y: 114 + i * 5, t0: S.t + i * 0.1 } : flash(S.t + rnd() * 0.6));\n    if (tau >= f.tap + 0.05 && b.st === 0 && (!S.clear || S.wob)) [b.st, b.t] = [S.clear ? 2 : 1, 0];\n    if (tau > f.tap && Y >= GY - MH - 1.5) Object.assign(S, { ph: MAT, pt: 0, lx: X });\n  } else if (S.ph === MAT) {\n    matPose(S, tau);\n    if (tau >= 0.5 && !S.verdict) [S.verdict, S.hudF, S.miss] = [2 - S.clear, 1, S.miss + !S.clear, S.marks.push(S.clear ? \"0\" : \"X\")];\n    // A clearance puts the bar up a notch; a third miss sends it back.\n    if (tau >= 1.6 && !S.done && (S.done = 1) && (S.clear || S.miss >= 3)) [S.marks, S.miss, S.notch] = [[], 0, S.clear && S.notch \u003c 6 ? S.notch + 1 : 0];\n    if (tau >= 2.3 && b.st === 3) b.st = 4;\n    if (tau >= 2.9) Object.assign(S, { ph: SET, pt: 0, tset: 0.7, free: null }), newVaulter(S), (b.st = 0);\n  }\n\n  // The pole, once let go, falls back about the box onto the runway.\n  const P = S.free;\n  if (P) {\n    P.w += ((3 * G) / (2 * P.L)) * sin(P.a) * st;\n    P.a += P.w * st;\n    if (P.a > P.amax) [P.a, P.w] = [P.amax, P.w > 0.6 ? -0.3 * P.w : 0];\n  }\n  // The bar shivers, and when it was hit it falls off the pegs onto the mat.\n  b.t += st;\n  if (b.st === 1 && b.t > 0.3) Object.assign(b, { st: 3, y: [S.by - OBY * ZS, S.by + OBY * ZS], v: [0, 0] });\n  for (let i = 0, fl; i \u003c 2 && b.st === 3; i++) {\n    if (b.t \u003c 0.3 + i * 0.08) continue;\n    b.y[i] += (b.v[i] += G * st) * st;\n    if (b.y[i] > (fl = GY - MH + OBY * MZ * (2 * i - 1) - 0.5)) [b.y[i], b.v[i]] = [fl, b.v[i] > 40 ? -0.3 * b.v[i] : 0];\n  }\n  S.hudF = max(0, S.hudF - st * 1.6);\n  S.flashes = S.flashes.filter((f) => S.t - f.t0 \u003c 0.2);\n  if (rnd() \u003c st * 0.8) S.flashes.push(flash(S.t));\n}\n\n// A figure, hip at (hx, hy): th turns the body clockwise from upright, fc\n// faces it right (1) or left (-1). Arms reach for the hands, or hang at angles.\nconst PART = F(96);\nfunction figure(S, hx, hy, th, fc, arms, L, hands, cols, sc) {\n  hx -= S.cam;\n  const ux = sin(th), uy = -cos(th), fx = cos(th) * fc, fy = sin(th) * fc, nx = hx + ux * TORSO * sc, ny = hy + uy * TORSO * sc;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => (PART.set([ax, ay, bx, by, r * sc, c], n), (n += 6));\n  const limb = (x, y, a, l) => [x + l * sc * (ux * cos(a) + fx * sin(a)), y + l * sc * (uy * cos(a) + fy * sin(a))];\n  // Far limbs first and in shade, then the body, then the near limbs.\n  for (let side = 1; side >= 0; side--) {\n    const [kx, ky] = limb(hx, hy, PI - L[side * 2], LEG), d = side * 4;\n    const [ax, ay] = limb(kx, ky, PI - L[side * 2] + L[side * 2 + 1], LEG);\n    const [wx, wy] = hands ? [hands[side * 2] - S.cam, hands[side * 2 + 1]] : limb(nx, ny, arms[side], ARM);\n    part(hx, hy, kx, ky, 0.85, 1 + d);\n    part(kx, ky, ax, ay, 0.62, 2 + d);\n    part(nx, ny, wx, wy, 0.55, 2 + d);\n    if (side) part(hx, hy, nx, ny, 1.05, 0), part(nx + ux * 1.7 * sc, ny + uy * 1.7 * sc, nx + ux * 1.8 * sc, ny + uy * 1.8 * sc, 1.25, 3);\n  }\n  let [x0, x1, y0, y1] = [99, -99, 999, -99];\n  for (let j = 0; j \u003c n; j += 6) [x0, x1, y0, y1] = [min(x0, PART[j], PART[j + 2]), max(x1, PART[j], PART[j + 2]), min(y0, PART[j + 1], PART[j + 3]), max(y1, PART[j + 1], PART[j + 3])];\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, ceil(y1 + 2)); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, ceil(x1 + 2)); x++) {\n      const px = x + 0.5, py = y + 0.5, i = y * W + x;\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j], ay = PART[j + 1], dx = PART[j + 2] - ax, dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const col = cols[PART[j + 5]];\n        for (let c = 0; c \u003c 3; c++) C[i * 3 + c] += (col[c] - C[i * 3 + c]) * a;\n      }\n    }\n}\n\n// The pole, two samples an LED, each shared over four LEDs.\nconst POLEC = [235, 232, 214];\nfunction splat(x, y) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1), w = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy), k = (yy * W + xx) * 3;\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let c = 0; c \u003c 3; c++) C[k + c] += (POLEC[c] - C[k + c]) * w;\n  }\n}\nfunction seg(x0, y0, x1, y1) {\n  for (let i = 0, n = ceil(Math.hypot(x1 - x0, y1 - y0) * 2) + 1; i \u003c= n; i++) splat(lerp(x0, x1, i / n), lerp(y0, y1, i / n));\n}\n\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, M: 0x5fed, X: 0x5aad, \".\": 4 };\nfunction text(s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(x + (j % 3), y + floor(j / 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\n// A photographer kneeling in the infield, lens up at the bar.\nconst SNAP = \"..oo.....oo.cc.####c.######..####...###...##.##..\";\n\n// Sky, roof, stands, LED ribbon, boards, track and grass, each panning by its depth.\nfunction back(S) {\n  const { cr, seat } = S, cam = S.cam, t = S.t, A = S.acc, T = S.tint, s0 = round(cam * 0.4), bx = cam * 0.85;\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) {\n      let r, g, b, v = -1;\n      if (y \u003c 13) (r = 5 + y), (g = 8 + 1.2 * y + 4 * T[1]), (b = 22 + 2 * y);\n      else if (y \u003c ST) {\n        if (y === 15 && md(s0 + x, 3) === 0) v = 190;\n        else r = g = b = y === 13 ? 46 : y === 16 ? 10 : 22;\n      } else if (y >= 46 && y \u003c 52) {\n        v = y > 46 && y \u003c 51 ? (md(floor((s0 + x + t * 12) / 2) * 7 + y, 11) \u003c 5 ? 210 : 50) : 14;\n      } else if (y \u003c 84) {\n        const i = (y - ST) * CW + md(s0 + x, CW), sw = seat[i] * 255;\n        (r = cr[i * 3] * T[0] + sw * A[0]), (g = cr[i * 3 + 1] * T[1] + sw * A[1]), (b = cr[i * 3 + 2] * T[2] + sw * A[2]);\n      } else if (y \u003c 92) {\n        const u = x + bx, sg = floor(u / 40), l = u - sg * 40, on = y > 85 && y \u003c 90 && hash(floor((l + t * 9) / 2) + sg * 50, y) \u003c 0.5;\n        if (l \u003c 1 || y === 91) r = g = b = 6;\n        else if (md(sg, 2) ? on : !on) v = on ? 150 : 55;\n        else r = g = b = on ? 150 : 8;\n      } else if (y \u003c 107) {\n        // The track, then the runway with white edges and metre marks.\n        const X = x + cam, li = y > 100 ? 1 : 0.55 + 0.03 * (y - 92), sp = hash(md(floor(X), 997), y) * 14;\n        if (y === 96 || y === 101 || y === 106 || (y === 105 && md(floor(X), 14) === 0)) r = g = b = 175 * li;\n        else (r = (140 + sp) * li), (g = (58 + sp * 0.4) * li), (b = (40 + sp * 0.3) * li);\n      } else {\n        // Infield grass in mown stripes.\n        const q = (md(floor((x + cam * 1.15 + (y - 107) * 1.3) / 11), 2) ? 0.78 : 1) * (1 - (y - 107) * 0.02);\n        (r = 24 * q), (g = 74 * q), (b = 32 * q);\n      }\n      if (v >= 0) (r = A[0] * v + (y \u003c ST) * 60), (g = A[1] * v + (y \u003c ST) * 60), (b = A[2] * v + (y \u003c ST) * 60);\n      C[j] = r;\n      C[j + 1] = g;\n      C[j + 2] = b;\n    }\n  // Floodlight towers above the roof, and flags streaming or hanging limp.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 1; y \u003c 13; y++)\n      for (let x = xi - 5; x \u003c= xi + 5; x++)\n        if (y \u003c 7) put(x, y, y > 1 && y \u003c 6 && (x - xi) % 2 === 0 && abs(x - xi) \u003c 5 ? [255, 244, 222] : [40, 42, 52]);\n        else if (x === xi) put(x, y, [34, 36, 46]);\n  }\n  const wd = S.wind, e = cl(abs(wd) * 1.4 + 0.25, 0, 1) * (wd \u003c 0 ? -1 : 1), a = abs(e);\n  for (let fx = 20 - md(s0, 32) - 32; fx \u003c W + 6; fx += 32)\n    for (let i = 0; i \u003c 22; i++)\n      if (i \u003c 7) put(fx, 6 + i, [110, 110, 118]);\n      else put(round(fx + e * (i % 5 + 1)), 6 + floor((i - 7) / 5) + round((i % 5 + 1) * ((1 - a) * 0.9 + sin(t * (5 + 7 * a) - i) * 0.12 * a)), i > 11 && i \u003c 17 ? [235, 235, 235] : sc3(A, 230));\n  // The photographers in the infield, and camera flashes going off.\n  for (let k = 0; k \u003c 2; k++) for (let r = 0; r \u003c 49; r++) if (SNAP[r] !== \".\") put(round(k * 36 - 16 - cam * 1.15) + (r % 7), 113 + k * 5 + floor(r / 7), SNAP[r] === \"#\" && r > 6 ? [12, 14, 20] : [48, 48, 56]);\n  for (const f of S.flashes) {\n    const a = 1 - (t - f.t0) / 0.2;\n    for (let i = 0; i \u003c 25 && a \u003c= 1; i++) {\n      const dx = (i % 5) - 2, dy = floor(i / 5) - 2, x = f.x + dx, d = abs(dx) + abs(dy), j = ((f.y + dy) * W + x) * 3;\n      const v = (d ? (d > 1 ? (f.y > 100 && dx * dy === 0 ? 120 : 0) : 150) : 255) * a;\n      if (x >= 0 && x \u003c W && v > 0) for (let c = 0; c \u003c 3; c++) C[j + c] = max(C[j + c], v);\n    }\n  }\n}\n\n// The mat from a little above: the top, the end facing the runway and the side\n// facing us. Then the box and its stop board.\nfunction mat(S) {\n  const cam = S.cam, top = GY - MH, xe = round(-cam);\n  for (let y = 89; y \u003c 108; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const py = y + 0.5, X0 = x + 0.5 + cam, z = (py - top) / OBY, X = X0 - OBX * z, Xf = X0 - OBX * MZ, zl = (X0 - MAT0) / OBX, v = 0.86 + 0.012 * z;\n      if (abs(z) \u003c= MZ && X >= MAT0) put(x, y, md(X, 16) \u003c 1 || z > MZ - 1 ? [110, 150, 250] : [44 * v, 98 * v, 232 * v]);\n      else if (Xf >= MAT0 && py >= top + OBY * MZ && py \u003c= GY + OBY * MZ) put(x, y, abs(py - GY + 0.6) \u003c 0.6 && md(Xf, 9) > 3 ? [215, 220, 235] : md(Xf, 18) \u003c 1 ? [18, 40, 120] : [30, 66, 176]);\n      else if (abs(zl) \u003c= MZ && py >= top + OBY * zl && py \u003c= GY + OBY * zl) put(x, y, [22, 50, 140]);\n    }\n  for (let x = xe - 7; x \u003c= xe; x++) for (let y = GY - 1; y \u003c= GY + 1; y++) put(x, y, x === xe ? [200, 200, 212] : y \u003c GY ? [90, 90, 100] : [10, 10, 14]);\n}\n\nfunction standard(S, z) {\n  const x = round(XS + OBX * z - S.cam), yb = round(GY + OBY * z), yt = round(S.by + OBY * z - 5), near = z > 0;\n  for (let y = yt; y \u003c= yb; y++) for (let w = 0; w \u003c 1 + near; w++) put(x + w, y, sc3([1, 1.02, 1.12], (near ? (w ? 120 : 175) : 100) * (y === yt ? 1.25 : 1)));\n  for (let w = -2; w \u003c= 2; w++) put(x + w, yb, [60, 60, 66]);\n  put(x + (near ? -1 : 1), round(S.by + OBY * z), [220, 220, 225]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const cam = S.cam, P = S.pole, b = S.bar;\n  C = S.C;\n  colours(S);\n  back(S);\n  standard(S, -ZS);\n  mat(S);\n\n  // The pole: carried, bent into an arc in the box, then let go.\n  if (S.ph === RUN) seg(P.x - cam, P.y, P.x1 - cam, P.y1);\n  else if (S.ph === POLE) {\n    const A = arc(P.px, P.py, P.c, P.L), n = ceil(P.L * 2), a = A[3] + A[4], s = A[4] > 0 ? 2.5 : -2.5, ex = A[0] + A[2] * cos(a) - cam, ey = A[1] + A[2] * sin(a);\n    for (let i = 0; i \u003c= n; i++) splat(A[0] + A[2] * cos(A[3] + (A[4] * i) / n) - cam, A[1] + A[2] * sin(A[3] + (A[4] * i) / n));\n    seg(ex, ey, ex - s * sin(a), ey + s * cos(a));\n  } else if (S.free) seg(-cam, BOXY, -cam - S.free.L * sin(S.free.a), BOXY - S.free.L * cos(S.free.a));\n\n  // The bar, striped, on its pegs or on its way down.\n  let [y0, y1] = [S.by - OBY * ZS, S.by + OBY * ZS];\n  const w = b.st === 1 || b.st === 2 ? sin(b.t * 48) * exp(-b.t * (b.st === 2 ? 5 : 2)) * 1.3 : 0;\n  if (b.st >= 3) [y0, y1] = b.y;\n  for (let i = 0; i \u003c= 36 && b.st !== 4; i++) put(floor(lerp(XS - OBX * ZS, XS + OBX * ZS, i / 36) - cam), floor(lerp(y0 + w, y1 + w * 0.6, i / 36)), floor(i / 5.2) % 2 ? [240, 240, 236] : sc3(S.acc, 120, 60));\n\n  // The vaulter, then the near upright in front.\n  const f = S.fig;\n  if (f) figure(S, f.x, f.y, f.th, f.fc, f.arms, f.L, f.hands, S.cols, 1);\n  standard(S, ZS);\n\n  // The judge by the box, a flag up once the bar has settled.\n  const up = S.ph === MAT && S.verdict && S.pt \u003c 2.6, jc = [[34, 50, 120], [70, 70, 82], [225, 165, 125], [40, 40, 44]];\n  figure(S, -13.2, 101.6, 0, 1, [up ? 0.2 : 2.9, 2.95], [0, 0, 0, 0], null, jc.concat(jc), 0.85);\n  for (let r = 0; r \u003c 9 && up; r++) put(round(-12.3 - cam) + (r % 3), 91 + floor(r / 3), S.verdict === 1 ? [245, 245, 245] : [235, 25, 25]);\n\n  // Glare from the lamp banks, over everything.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 0; y \u003c 30; y++)\n      for (let x = max(0, xi - 60), j = (y * W + x) * 3; x \u003c min(W, xi + 60); x++, j += 3) {\n        const v = S.glare[y * 128 + x - xi + 64];\n        C[j] += v;\n        C[j + 1] += v * 0.96;\n        C[j + 2] += v * 0.88;\n      }\n  }\n\n  // The results board: height, marks at it, the vaulter's colours.\n  const hc = S.verdict === 1 ? [255, 255, 255] : [255, 40, 40];\n  for (let y = 1; y \u003c 13; y++) for (let x = 39; x \u003c 63; x++) for (let c = 0, j = (y * W + x) * 3; c \u003c 3; c++) C[j + c] = y === 1 ? S.acc[c] * 230 : C[j + c] * 0.2 + [6, 10, 26][c] * 0.8 + hc[c] * S.hudF * 0.75;\n  text((S.base + 0.1 * S.notch).toFixed(2) + \"M\", 41, 3, [255, 180, 40]);\n  S.marks.slice(-3).forEach((m, i) => text(m, 41 + i * 4, 8, m === \"X\" ? [255, 50, 40] : [240, 240, 240]));\n  for (let r = 0; r \u003c 30; r++) put(55 + (r % 6), 8 + floor(r / 6), r \u003c 12 ? S.cols[0] : S.cols[1]);\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","layer":{"id":"layer-pole-vault","type":"code","name":"pole-vault","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pole Vault\n// Family:  sport\n// Idea:    A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the pole vault in athletics\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1\n//\n// Knob 1: Colour. The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour.\n// Knob 2: Speed. Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2.\n// Knob 3: Bar. The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses.\n// Knob 4: Wind. Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run.\n// Buttons: K1 tap sends the next vaulter down the runway now.\n\nconst W = 64, H = 128, N = W * H;\n// The runway (GY), the pole's tip in the box, 14 rows a metre. A point z LEDs\n// nearer the camera lands OBX right and OBY down. The standards stand XS past\n// the box, ZS either side; the mat starts at MAT0, MZ either side, MH tall.\nconst GY = 104, BOXY = GY + 2, PXM = 14, OBX = 0.55, OBY = 0.22, XS = 5, ZS = 13, MAT0 = 3, MZ = 11, MH = 9;\n// The camera's left edge on the bar, gravity at Speed 2, the body.\nconst CAMF = -26, G = 170, TORSO = 4.2, ARM = 5, LEG = 3.3, TACC = 0.7, TA = 1.25, PSI1 = 1.64;\nconst [SET, RUN, POLE, FLY, MAT] = [0, 1, 2, 3, 4];\n// The stands texture: CW columns that wrap, rows ST to 83.\nconst CW = 256, ST = 17, CH = 84 - ST;\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, asin, acos, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst lerp = (a, b, u) => a + (b - a) * u;\nconst rnd = () => Math.random();\n// A camera flash somewhere in the stands.\nconst flash = (t0) => ({ x: floor(rnd() * W), y: ST + 2 + floor(rnd() * 64), t0 });\nconst F = (n) => new Float32Array(n);\nconst hash = (a, b) => ((Math.imul(a * 7919 + b * 104729, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\nconst md = (a, m) => ((a % m) + m) % m;\nconst sc3 = (c, k, o = 0) => [c[0] * k + o, c[1] * k + o, c[2] * k + o];\nlet C = null;\nconst put = (x, y, c) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && C.set(c, (y * W + x) * 3);\n\n// Poses: [time, body angle, arm, near hip, near knee, far hip, far knee]. On\n// the pole the body rocks back to head-down (-PI); after the half turn it\n// goes on the other way, face down over the bar and onto the back.\nconst TAKE = [1.5, 1.6, -0.5, 0.3];\nconst VAULT = [[0, 0.08, 0.15, 1.5, 1.6, -0.5, 0.3], [0.2, -0.3, 0.25, 1.1, 1.3, 0.6, 0.2], [0.42, -1.25, 0.4, 2.1, 1.8, 2, 1.5], [0.62, -2.4, 0.9, 0.9, 0.5, 0.8, 0.4], [0.82, -3.05, 2.5, 0.2, 0.05, 0.15, 0.05], [1, -3.14, 0.35, 0.1, 0, 0.1, 0]];\nconst FLYK = [[0, PI, 0.35, 0.1, 0, 0.1, 0], [1, 1.39 * PI, 0.4, 0.7, 0.4, 0.6, 0.5], [1.4, 1.95 * PI, 0.5, 0.6, 0.3, 0.5, 0.4], [2, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8]];\nconst MATK = [[0, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8], [0.4, 2.5 * PI, 1.7, 0.8, 0.9, 0.7, 1], [0.95, 2 * PI + 0.15, 2.7, 1.5, 1.8, 1.4, 1.7]];\nfunction key(T, u, out) {\n  let j = 0;\n  while (j \u003c T.length - 2 && u > T[j + 1][0]) j++;\n  const a = T[j], b = T[j + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  for (let i = 1; i \u003c 7; i++) out[i - 1] = a[i] + (b[i] - a[i]) * f;\n  return out;\n}\n// How far below the hip the lower foot is, for a body leaning th.\nconst drop = (th, L) => LEG * max(cos(th - L[0]) + cos(th - L[0] + L[1]), cos(th - L[2]) + cos(th - L[2] + L[3]));\n\n// Built once: the stands, two LEDs a seat in rows three deep, aisles, empty\n// seats in the team colour, the upper tier in the roof's shadow; the glare.\nfunction build(S) {\n  const cr = F(CW * CH * 3), seat = F(CW * CH), glare = F(30 * 128);\n  for (let y = 0; y \u003c CH; y++) {\n    const lo = y + ST >= 52, ty = y + ST - (lo ? 52 : ST), band = ty % 3, tier = floor(ty / 3) + lo * 40;\n    const li = lo ? 0.62 + (0.38 * ty) / 31 : 0.3 + (0.42 * ty) / 29;\n    for (let x = 0, sn = 0; x \u003c CW; x++, sn = x >> 1) {\n      let c = x % 48 \u003c 2 ? [58, 58, 64] : [20, 20, 25];\n      if (x % 48 > 1 && band \u003c 2)\n        if (hash(sn, tier) > 0.8) (seat[y * CW + x] = (0.24 + 0.08 * band) * li), (c = [3, 3, 4]);\n        else c = band ? sc3(hsv(hash(sn * 3, tier), 0.55, 0.2 + 0.14 * hash(tier, sn)), 255) : x & 1 ? [14, 11, 10] : hash(sn, tier + 99) \u003c 0.5 ? [112, 78, 58] : [60, 42, 32];\n      cr.set(sc3(c, li), (y * CW + x) * 3);\n    }\n  }\n  for (let i = 0; i \u003c 30 * 128; i++) {\n    const dx = (i % 128) - 64, dy = floor(i / 128) - 3.5, d2 = dx * dx + dy * dy;\n    glare[i] = 70 * exp(-d2 / 16) + 30 * exp(-d2 / 110) + 30 * exp(-dy * dy / 1.5 - abs(dx) / 12);\n  }\n  Object.assign(S, { cr, seat, glare });\n}\n\nexport function setup(params) {\n  const S = { t: 0, ph: SET, pt: 0, tset: 1.95, n: 0, notch: 0, miss: 0, base: 5, by: 34, cam: CAMF, wind: 0, hk: 0.13, marks: [], hudF: 0, verdict: 0, done: 0 };\n  Object.assign(S, { clear: true, fig: null, free: null, flashes: [], C: F(N * 3), q: F(6) });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  build(S);\n  params.s = S;\n  newVaulter(S);\n}\n\n// Each vaulter wears a different kit; the stand lights take the opposite colour.\nconst newVaulter = (S) => (S.vo = [0, 0.36, 0.62][S.n++ % 3]);\nfunction colours(S) {\n  const hue = (S.hk + S.vo) % 1, cols = [sc3(hsv(hue, 0.82, 1), 245), sc3(hsv((hue + 0.5) % 1, 0.75, 0.8), 210), [232, 168, 128], [150, 100, 70]];\n  S.cols = cols.concat(cols.map((c) => sc3(c, 0.62)));\n  S.acc = hsv((S.hk + 0.5) % 1, 0.75, 1);\n  S.tint = sc3(S.acc, 0.5, 0.5);\n}\n\n// The cut to the runway: the takeoff spot is where a straight pole reaches\n// the box from hands held straight up.\nfunction startRun(S) {\n  if (S.ph === MAT) newVaulter(S);\n  const h = S.base + 0.1 * S.notch, Lg = 92.5 - GY + PXM * h, th = 0.08, hy = GY - drop(th, TAKE) - 0.8;\n  const px = TORSO * sin(th) + ARM * sin(th + 0.15), py = hy - TORSO * cos(th) - ARM * cos(th + 0.15);\n  const dx = sqrt(Lg * Lg - (BOXY - py) ** 2), D = 88 + 16 * (h - 5);\n  S.R = { Lg, D, dist: 0, Xto: -dx - px, hy, bto: -asin((BOXY - py) / Lg), psi0: atan2(BOXY - py, dx) };\n  Object.assign(S, { ph: RUN, pt: 0, clear: rnd() \u003c 0.72 - 0.08 * S.notch, wob: rnd() \u003c 0.5, free: null, verdict: 0, done: 0, cam: S.R.Xto - D - 16 });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  runPose(S);\n}\n\nfunction runPose(S) {\n  const R = S.R, rem = R.D - R.dist, X = R.Xto - rem, ph = (R.dist / 15) * PI + 0.6, e2 = sm(1 - rem / 15), L = [];\n  for (let i = 0; i \u003c 2; i++) L.push(0.2 + 0.7 * sin(ph + i * PI), 0.25 + 1.3 * max(0, cos(ph + i * PI + 0.9)));\n  for (let i = 0; i \u003c 4; i++) L[i] = lerp(L[i], TAKE[i], e2);\n  const th = lerp(0.16, 0.08, e2), hy = lerp(GY - drop(th, L) - 0.3, R.hy, e2), e = sm(1 - rem / 19);\n  // The pole tip drops over the last strides; then the top hand goes up as\n  // the tip slides into the box.\n  const p1x = lerp(X - 1, X + TORSO * sin(th) + ARM * sin(th + 0.15), e), p1y = lerp(hy - 0.5, hy - TORSO * cos(th) - ARM * cos(th + 0.15), e);\n  const beta = lerp(lerp(1.25 + 0.04 * sin(ph * 2), 0.12, sm((70 - rem) / 51)), R.bto, e), dx = cos(beta), dy = -sin(beta);\n  S.fig = { x: X, y: hy, th, fc: 1, L, hands: [p1x, p1y, p1x + 4.5 * dx, p1y + 4.5 * dy] };\n  S.pole = { x: p1x - 2.5 * dx, y: p1y - 2.5 * dy, x1: p1x + R.Lg * dx, y1: p1y + R.Lg * dy };\n}\n\n// The bent pole as an arc of length L from the box to the top hand.\nconst ARC = F(5);\nfunction arc(px, py, c, L) {\n  const r = cl(c / L, 0.3, 1);\n  let x = sqrt(6 * (1 - r)) + 1e-4;\n  for (let i = 0; i \u003c 5; i++) x = cl(x - (sin(x) - r * x) / (cos(x) - r), 1e-4, 1.56);\n  const R = L / (2 * x), d = R * cos(x), cx = px / 2 + ((py - BOXY) / c) * d, cy = (py + BOXY) / 2 - (px / c) * d, a0 = atan2(BOXY - cy, -cx);\n  ARC.set([cx, cy, R, a0, md(atan2(py - cy, px - cx) - a0 + PI, 2 * PI) - PI]);\n  return ARC;\n}\n\nfunction polePose(S) {\n  const R = S.R, u = min(1, S.pt / TA), L = R.Lg;\n  const c = L * (1 - 0.25 * sin(PI * min(1, u / 0.78)) ** 1.4), psi = R.psi0 + (PSI1 - R.psi0) * (1 - (1 - u) ** 1.6);\n  const p1x = -c * cos(psi), p1y = BOXY - c * sin(psi), q = key(VAULT, u, S.q), th = q[0], a = q[1];\n  const fc = cos(PI * sm((u - 0.66) / 0.24)), ux = sin(th), uy = -cos(th);\n  // Hang the body from the top hand; the bottom hand is 4.5 LEDs down the arc.\n  const ax = ux * cos(a) + cos(th) * fc * sin(a), ay = uy * cos(a) + sin(th) * fc * sin(a);\n  const A = arc(p1x, p1y, c, L), b = A[3] + (A[4] * (L - 4.5)) / L;\n  S.fig = { x: p1x - ARM * ax - TORSO * ux, y: p1y - ARM * ay - TORSO * uy, th, fc, L: q.slice(2), hands: [p1x, p1y, A[0] + A[2] * cos(b), A[1] + A[2] * sin(b)] };\n  S.pole = { c, L, px: p1x, py: p1y };\n}\n\nfunction matPose(S, tau) {\n  const q = key(MATK, tau, S.q), c = S.clear, e = sm((tau - (c ? 1.1 : 1.6)) / 0.3), w = max(0, tau - 1.9) * 20, s = sin(w * 0.4);\n  let L = q.slice(2).map((v) => v * (1 - e)), arms = [lerp(q[1], c ? 0.25 : 2.9, e), lerp(q[1] + 0.3, c ? 0.45 : 3.1, e)];\n  // Up with arms high and a hop if the bar stayed; then off to the right.\n  const Y = lerp(GY - MH - 1 + 0.6 * sm((tau - 0.4) / 0.5), GY - MH - 6.6 - 1.5 * c * abs(sin((tau - 1.1) * 9)) * (tau \u003c 1.9), e);\n  if (w) [L, arms] = [[0.5 * s, 0.4, -0.5 * s, 0.4], [PI - 0.4 * s, PI + 0.4 * s]];\n  S.fig = { x: S.lx + 2 * sm(tau / 0.5) + w, y: w ? GY - MH - 6.6 : Y, th: w ? 0.05 : lerp(q[0], 2 * PI, e), fc: w ? 1 : -1, L, arms };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06];\n  const st = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2, first = S.t === 0;\n  S.hk = (0.13 + cl(k[0], 0, 1)) % 1;\n  S.base = round(cl(k[2], 5, 6.2) * 20) / 20;\n  S.wind = cl(k[3], -1, 1);\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === SET || S.ph === MAT)) startRun(S);\n  S.pt += st;\n  const R = S.R, b = S.bar, tau = S.pt, tgt = GY - PXM * (S.base + 0.1 * S.notch);\n  if (first) S.by = tgt;\n  if (b.st !== 1 && b.st !== 3) S.by += (tgt - S.by) * min(1, st * 3);\n  if (S.ph > POLE) S.cam = CAMF;\n\n  if (S.ph === SET) {\n    [S.cam, S.fig] = [CAMF, null];\n    if (tau >= S.tset) startRun(S);\n  } else if (S.ph === RUN) {\n    R.dist = min(R.D, R.dist + 62 * (1 + 0.12 * S.wind) * min(1, 0.3 + tau / TACC) * st);\n    const rem = R.D - R.dist;\n    runPose(S);\n    S.cam = R.Xto - rem - lerp(16, 6, sm(1 - rem / 40));\n    if (rem \u003c= 0) [S.ph, S.pt, R.cam] = [POLE, 0, S.cam];\n  } else if (S.ph === POLE) {\n    polePose(S);\n    S.cam = lerp(R.cam, CAMF, sm(tau / TA / 0.75));\n    if (tau >= TA) {\n      // Let go: the hips fly on to just over the bar, or into it.\n      const f = S.fig, ya = S.by - (S.clear ? 3.5 : 0.3), tap = sqrt((2 * max(3, f.y - ya)) / G);\n      S.fl = { x: f.x, y: f.y, vx: cl((XS + 1 - f.x) / tap, 6, 30), vy: G * tap, tap, tf: sqrt((2 * max(10, GY - MH - 1.5 - ya)) / G) };\n      S.free = { a: PI / 2 - PSI1, w: 1.4, L: R.Lg + 2.5, amax: acos(2 / (R.Lg + 2.5)) };\n      [S.ph, S.pt] = [FLY, 0];\n    }\n  } else if (S.ph === FLY) {\n    const f = S.fl, X = f.x + f.vx * tau, Y = f.y - f.vy * tau + 0.5 * G * tau * tau;\n    const q = key(FLYK, tau \u003c f.tap ? tau / f.tap : 1 + (tau - f.tap) / f.tf, S.q);\n    S.fig = { x: X, y: Y, th: q[0], fc: -1, L: q.slice(2), arms: [q[1], q[1] + 0.25] };\n    // Every camera in the house goes off at the top, the two in the infield first.\n    if (!f.fl && (f.fl = tau >= f.tap - 0.05))\n      for (let i = 0; i \u003c 18; i++) S.flashes.push(i \u003c 2 ? { x: i * 36 + 20, y: 114 + i * 5, t0: S.t + i * 0.1 } : flash(S.t + rnd() * 0.6));\n    if (tau >= f.tap + 0.05 && b.st === 0 && (!S.clear || S.wob)) [b.st, b.t] = [S.clear ? 2 : 1, 0];\n    if (tau > f.tap && Y >= GY - MH - 1.5) Object.assign(S, { ph: MAT, pt: 0, lx: X });\n  } else if (S.ph === MAT) {\n    matPose(S, tau);\n    if (tau >= 0.5 && !S.verdict) [S.verdict, S.hudF, S.miss] = [2 - S.clear, 1, S.miss + !S.clear, S.marks.push(S.clear ? \"0\" : \"X\")];\n    // A clearance puts the bar up a notch; a third miss sends it back.\n    if (tau >= 1.6 && !S.done && (S.done = 1) && (S.clear || S.miss >= 3)) [S.marks, S.miss, S.notch] = [[], 0, S.clear && S.notch \u003c 6 ? S.notch + 1 : 0];\n    if (tau >= 2.3 && b.st === 3) b.st = 4;\n    if (tau >= 2.9) Object.assign(S, { ph: SET, pt: 0, tset: 0.7, free: null }), newVaulter(S), (b.st = 0);\n  }\n\n  // The pole, once let go, falls back about the box onto the runway.\n  const P = S.free;\n  if (P) {\n    P.w += ((3 * G) / (2 * P.L)) * sin(P.a) * st;\n    P.a += P.w * st;\n    if (P.a > P.amax) [P.a, P.w] = [P.amax, P.w > 0.6 ? -0.3 * P.w : 0];\n  }\n  // The bar shivers, and when it was hit it falls off the pegs onto the mat.\n  b.t += st;\n  if (b.st === 1 && b.t > 0.3) Object.assign(b, { st: 3, y: [S.by - OBY * ZS, S.by + OBY * ZS], v: [0, 0] });\n  for (let i = 0, fl; i \u003c 2 && b.st === 3; i++) {\n    if (b.t \u003c 0.3 + i * 0.08) continue;\n    b.y[i] += (b.v[i] += G * st) * st;\n    if (b.y[i] > (fl = GY - MH + OBY * MZ * (2 * i - 1) - 0.5)) [b.y[i], b.v[i]] = [fl, b.v[i] > 40 ? -0.3 * b.v[i] : 0];\n  }\n  S.hudF = max(0, S.hudF - st * 1.6);\n  S.flashes = S.flashes.filter((f) => S.t - f.t0 \u003c 0.2);\n  if (rnd() \u003c st * 0.8) S.flashes.push(flash(S.t));\n}\n\n// A figure, hip at (hx, hy): th turns the body clockwise from upright, fc\n// faces it right (1) or left (-1). Arms reach for the hands, or hang at angles.\nconst PART = F(96);\nfunction figure(S, hx, hy, th, fc, arms, L, hands, cols, sc) {\n  hx -= S.cam;\n  const ux = sin(th), uy = -cos(th), fx = cos(th) * fc, fy = sin(th) * fc, nx = hx + ux * TORSO * sc, ny = hy + uy * TORSO * sc;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => (PART.set([ax, ay, bx, by, r * sc, c], n), (n += 6));\n  const limb = (x, y, a, l) => [x + l * sc * (ux * cos(a) + fx * sin(a)), y + l * sc * (uy * cos(a) + fy * sin(a))];\n  // Far limbs first and in shade, then the body, then the near limbs.\n  for (let side = 1; side >= 0; side--) {\n    const [kx, ky] = limb(hx, hy, PI - L[side * 2], LEG), d = side * 4;\n    const [ax, ay] = limb(kx, ky, PI - L[side * 2] + L[side * 2 + 1], LEG);\n    const [wx, wy] = hands ? [hands[side * 2] - S.cam, hands[side * 2 + 1]] : limb(nx, ny, arms[side], ARM);\n    part(hx, hy, kx, ky, 0.85, 1 + d);\n    part(kx, ky, ax, ay, 0.62, 2 + d);\n    part(nx, ny, wx, wy, 0.55, 2 + d);\n    if (side) part(hx, hy, nx, ny, 1.05, 0), part(nx + ux * 1.7 * sc, ny + uy * 1.7 * sc, nx + ux * 1.8 * sc, ny + uy * 1.8 * sc, 1.25, 3);\n  }\n  let [x0, x1, y0, y1] = [99, -99, 999, -99];\n  for (let j = 0; j \u003c n; j += 6) [x0, x1, y0, y1] = [min(x0, PART[j], PART[j + 2]), max(x1, PART[j], PART[j + 2]), min(y0, PART[j + 1], PART[j + 3]), max(y1, PART[j + 1], PART[j + 3])];\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, ceil(y1 + 2)); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, ceil(x1 + 2)); x++) {\n      const px = x + 0.5, py = y + 0.5, i = y * W + x;\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j], ay = PART[j + 1], dx = PART[j + 2] - ax, dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const col = cols[PART[j + 5]];\n        for (let c = 0; c \u003c 3; c++) C[i * 3 + c] += (col[c] - C[i * 3 + c]) * a;\n      }\n    }\n}\n\n// The pole, two samples an LED, each shared over four LEDs.\nconst POLEC = [235, 232, 214];\nfunction splat(x, y) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1), w = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy), k = (yy * W + xx) * 3;\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let c = 0; c \u003c 3; c++) C[k + c] += (POLEC[c] - C[k + c]) * w;\n  }\n}\nfunction seg(x0, y0, x1, y1) {\n  for (let i = 0, n = ceil(Math.hypot(x1 - x0, y1 - y0) * 2) + 1; i \u003c= n; i++) splat(lerp(x0, x1, i / n), lerp(y0, y1, i / n));\n}\n\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, M: 0x5fed, X: 0x5aad, \".\": 4 };\nfunction text(s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(x + (j % 3), y + floor(j / 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\n// A photographer kneeling in the infield, lens up at the bar.\nconst SNAP = \"..oo.....oo.cc.####c.######..####...###...##.##..\";\n\n// Sky, roof, stands, LED ribbon, boards, track and grass, each panning by its depth.\nfunction back(S) {\n  const { cr, seat } = S, cam = S.cam, t = S.t, A = S.acc, T = S.tint, s0 = round(cam * 0.4), bx = cam * 0.85;\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) {\n      let r, g, b, v = -1;\n      if (y \u003c 13) (r = 5 + y), (g = 8 + 1.2 * y + 4 * T[1]), (b = 22 + 2 * y);\n      else if (y \u003c ST) {\n        if (y === 15 && md(s0 + x, 3) === 0) v = 190;\n        else r = g = b = y === 13 ? 46 : y === 16 ? 10 : 22;\n      } else if (y >= 46 && y \u003c 52) {\n        v = y > 46 && y \u003c 51 ? (md(floor((s0 + x + t * 12) / 2) * 7 + y, 11) \u003c 5 ? 210 : 50) : 14;\n      } else if (y \u003c 84) {\n        const i = (y - ST) * CW + md(s0 + x, CW), sw = seat[i] * 255;\n        (r = cr[i * 3] * T[0] + sw * A[0]), (g = cr[i * 3 + 1] * T[1] + sw * A[1]), (b = cr[i * 3 + 2] * T[2] + sw * A[2]);\n      } else if (y \u003c 92) {\n        const u = x + bx, sg = floor(u / 40), l = u - sg * 40, on = y > 85 && y \u003c 90 && hash(floor((l + t * 9) / 2) + sg * 50, y) \u003c 0.5;\n        if (l \u003c 1 || y === 91) r = g = b = 6;\n        else if (md(sg, 2) ? on : !on) v = on ? 150 : 55;\n        else r = g = b = on ? 150 : 8;\n      } else if (y \u003c 107) {\n        // The track, then the runway with white edges and metre marks.\n        const X = x + cam, li = y > 100 ? 1 : 0.55 + 0.03 * (y - 92), sp = hash(md(floor(X), 997), y) * 14;\n        if (y === 96 || y === 101 || y === 106 || (y === 105 && md(floor(X), 14) === 0)) r = g = b = 175 * li;\n        else (r = (140 + sp) * li), (g = (58 + sp * 0.4) * li), (b = (40 + sp * 0.3) * li);\n      } else {\n        // Infield grass in mown stripes.\n        const q = (md(floor((x + cam * 1.15 + (y - 107) * 1.3) / 11), 2) ? 0.78 : 1) * (1 - (y - 107) * 0.02);\n        (r = 24 * q), (g = 74 * q), (b = 32 * q);\n      }\n      if (v >= 0) (r = A[0] * v + (y \u003c ST) * 60), (g = A[1] * v + (y \u003c ST) * 60), (b = A[2] * v + (y \u003c ST) * 60);\n      C[j] = r;\n      C[j + 1] = g;\n      C[j + 2] = b;\n    }\n  // Floodlight towers above the roof, and flags streaming or hanging limp.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 1; y \u003c 13; y++)\n      for (let x = xi - 5; x \u003c= xi + 5; x++)\n        if (y \u003c 7) put(x, y, y > 1 && y \u003c 6 && (x - xi) % 2 === 0 && abs(x - xi) \u003c 5 ? [255, 244, 222] : [40, 42, 52]);\n        else if (x === xi) put(x, y, [34, 36, 46]);\n  }\n  const wd = S.wind, e = cl(abs(wd) * 1.4 + 0.25, 0, 1) * (wd \u003c 0 ? -1 : 1), a = abs(e);\n  for (let fx = 20 - md(s0, 32) - 32; fx \u003c W + 6; fx += 32)\n    for (let i = 0; i \u003c 22; i++)\n      if (i \u003c 7) put(fx, 6 + i, [110, 110, 118]);\n      else put(round(fx + e * (i % 5 + 1)), 6 + floor((i - 7) / 5) + round((i % 5 + 1) * ((1 - a) * 0.9 + sin(t * (5 + 7 * a) - i) * 0.12 * a)), i > 11 && i \u003c 17 ? [235, 235, 235] : sc3(A, 230));\n  // The photographers in the infield, and camera flashes going off.\n  for (let k = 0; k \u003c 2; k++) for (let r = 0; r \u003c 49; r++) if (SNAP[r] !== \".\") put(round(k * 36 - 16 - cam * 1.15) + (r % 7), 113 + k * 5 + floor(r / 7), SNAP[r] === \"#\" && r > 6 ? [12, 14, 20] : [48, 48, 56]);\n  for (const f of S.flashes) {\n    const a = 1 - (t - f.t0) / 0.2;\n    for (let i = 0; i \u003c 25 && a \u003c= 1; i++) {\n      const dx = (i % 5) - 2, dy = floor(i / 5) - 2, x = f.x + dx, d = abs(dx) + abs(dy), j = ((f.y + dy) * W + x) * 3;\n      const v = (d ? (d > 1 ? (f.y > 100 && dx * dy === 0 ? 120 : 0) : 150) : 255) * a;\n      if (x >= 0 && x \u003c W && v > 0) for (let c = 0; c \u003c 3; c++) C[j + c] = max(C[j + c], v);\n    }\n  }\n}\n\n// The mat from a little above: the top, the end facing the runway and the side\n// facing us. Then the box and its stop board.\nfunction mat(S) {\n  const cam = S.cam, top = GY - MH, xe = round(-cam);\n  for (let y = 89; y \u003c 108; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const py = y + 0.5, X0 = x + 0.5 + cam, z = (py - top) / OBY, X = X0 - OBX * z, Xf = X0 - OBX * MZ, zl = (X0 - MAT0) / OBX, v = 0.86 + 0.012 * z;\n      if (abs(z) \u003c= MZ && X >= MAT0) put(x, y, md(X, 16) \u003c 1 || z > MZ - 1 ? [110, 150, 250] : [44 * v, 98 * v, 232 * v]);\n      else if (Xf >= MAT0 && py >= top + OBY * MZ && py \u003c= GY + OBY * MZ) put(x, y, abs(py - GY + 0.6) \u003c 0.6 && md(Xf, 9) > 3 ? [215, 220, 235] : md(Xf, 18) \u003c 1 ? [18, 40, 120] : [30, 66, 176]);\n      else if (abs(zl) \u003c= MZ && py >= top + OBY * zl && py \u003c= GY + OBY * zl) put(x, y, [22, 50, 140]);\n    }\n  for (let x = xe - 7; x \u003c= xe; x++) for (let y = GY - 1; y \u003c= GY + 1; y++) put(x, y, x === xe ? [200, 200, 212] : y \u003c GY ? [90, 90, 100] : [10, 10, 14]);\n}\n\nfunction standard(S, z) {\n  const x = round(XS + OBX * z - S.cam), yb = round(GY + OBY * z), yt = round(S.by + OBY * z - 5), near = z > 0;\n  for (let y = yt; y \u003c= yb; y++) for (let w = 0; w \u003c 1 + near; w++) put(x + w, y, sc3([1, 1.02, 1.12], (near ? (w ? 120 : 175) : 100) * (y === yt ? 1.25 : 1)));\n  for (let w = -2; w \u003c= 2; w++) put(x + w, yb, [60, 60, 66]);\n  put(x + (near ? -1 : 1), round(S.by + OBY * z), [220, 220, 225]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const cam = S.cam, P = S.pole, b = S.bar;\n  C = S.C;\n  colours(S);\n  back(S);\n  standard(S, -ZS);\n  mat(S);\n\n  // The pole: carried, bent into an arc in the box, then let go.\n  if (S.ph === RUN) seg(P.x - cam, P.y, P.x1 - cam, P.y1);\n  else if (S.ph === POLE) {\n    const A = arc(P.px, P.py, P.c, P.L), n = ceil(P.L * 2), a = A[3] + A[4], s = A[4] > 0 ? 2.5 : -2.5, ex = A[0] + A[2] * cos(a) - cam, ey = A[1] + A[2] * sin(a);\n    for (let i = 0; i \u003c= n; i++) splat(A[0] + A[2] * cos(A[3] + (A[4] * i) / n) - cam, A[1] + A[2] * sin(A[3] + (A[4] * i) / n));\n    seg(ex, ey, ex - s * sin(a), ey + s * cos(a));\n  } else if (S.free) seg(-cam, BOXY, -cam - S.free.L * sin(S.free.a), BOXY - S.free.L * cos(S.free.a));\n\n  // The bar, striped, on its pegs or on its way down.\n  let [y0, y1] = [S.by - OBY * ZS, S.by + OBY * ZS];\n  const w = b.st === 1 || b.st === 2 ? sin(b.t * 48) * exp(-b.t * (b.st === 2 ? 5 : 2)) * 1.3 : 0;\n  if (b.st >= 3) [y0, y1] = b.y;\n  for (let i = 0; i \u003c= 36 && b.st !== 4; i++) put(floor(lerp(XS - OBX * ZS, XS + OBX * ZS, i / 36) - cam), floor(lerp(y0 + w, y1 + w * 0.6, i / 36)), floor(i / 5.2) % 2 ? [240, 240, 236] : sc3(S.acc, 120, 60));\n\n  // The vaulter, then the near upright in front.\n  const f = S.fig;\n  if (f) figure(S, f.x, f.y, f.th, f.fc, f.arms, f.L, f.hands, S.cols, 1);\n  standard(S, ZS);\n\n  // The judge by the box, a flag up once the bar has settled.\n  const up = S.ph === MAT && S.verdict && S.pt \u003c 2.6, jc = [[34, 50, 120], [70, 70, 82], [225, 165, 125], [40, 40, 44]];\n  figure(S, -13.2, 101.6, 0, 1, [up ? 0.2 : 2.9, 2.95], [0, 0, 0, 0], null, jc.concat(jc), 0.85);\n  for (let r = 0; r \u003c 9 && up; r++) put(round(-12.3 - cam) + (r % 3), 91 + floor(r / 3), S.verdict === 1 ? [245, 245, 245] : [235, 25, 25]);\n\n  // Glare from the lamp banks, over everything.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 0; y \u003c 30; y++)\n      for (let x = max(0, xi - 60), j = (y * W + x) * 3; x \u003c min(W, xi + 60); x++, j += 3) {\n        const v = S.glare[y * 128 + x - xi + 64];\n        C[j] += v;\n        C[j + 1] += v * 0.96;\n        C[j + 2] += v * 0.88;\n      }\n  }\n\n  // The results board: height, marks at it, the vaulter's colours.\n  const hc = S.verdict === 1 ? [255, 255, 255] : [255, 40, 40];\n  for (let y = 1; y \u003c 13; y++) for (let x = 39; x \u003c 63; x++) for (let c = 0, j = (y * W + x) * 3; c \u003c 3; c++) C[j + c] = y === 1 ? S.acc[c] * 230 : C[j + c] * 0.2 + [6, 10, 26][c] * 0.8 + hc[c] * S.hudF * 0.75;\n  text((S.base + 0.1 * S.notch).toFixed(2) + \"M\", 41, 3, [255, 180, 40]);\n  S.marks.slice(-3).forEach((m, i) => text(m, 41 + i * 4, 8, m === \"X\" ? [255, 50, 40] : [240, 240, 240]));\n  for (let r = 0; r \u003c 30; r++) put(55 + (r % 6), 8 + floor(r / 6), r \u003c 12 ? S.cols[0] : S.cols[1]);\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour."},{"name":"Speed","min":0.2,"max":3,"about":"Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2."},{"name":"Bar","min":5,"max":6.2,"about":"The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses."},{"name":"Wind","min":-1,"max":1,"about":"Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run."}],"start":[0,2,5,0.06],"measures":{"motion":0.7696,"detail":0.0793,"edges":0.2827,"complexity":0.9294,"coverage":0.6904,"colour":0.1943,"drift":0.0642},"knobResponse":[0.0451,0.0895,0.0561,0.043]},{"slug":"polya-urn","title":"Pólya Urn","family":"data","round":38,"note":"폴리아 항아리 64개가 한 열에 하나씩 나란히 공을 뽑아요. 로그 시계를 따라 위에서는 크게 흔들리다 아래로 가며 저마다 다른 섞임 비율로 굳고, 한 판이 끝나면 열들이 굳은 비율대로 줄을 서서 고르게 퍼진 극한을 곧은 그러데이션으로 보여 줘요. K3 은 처음 공을 늘려 열들을 가운데 섞임으로 모으고, K4 는 한 번에 더하는 공을 늘려 바코드를 두 색으로 갈라요.","idea":"Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Pólya Urn\n// Family:  data\n// Idea:    Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Pólya's urn (Florian Eggenberger and George Pólya, 1923), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8\n//\n// Knob 1: Hue. Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive.\n// Knob 2: Speed. How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it.\n// Knob 3: Balls. The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends.\n// Knob 4: Added. Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one.\n\nconst W = 64, H = 128;\n// The clock: row r is draw n(r) = N0 ((1 + NMAX / N0)^(r / 127) - 1), 0 at\n// the top and NMAX at the bottom: the first draw lands on row 12, the tenth\n// on row 40, the hundredth on row 77.\nconst NMAX = 2000, N0 = 1;\n// One run fills the panel in FILL / Speed seconds; the finished run waits\n// HOLD1 seconds, sorts at SORTS transposition rounds a second, then shows the\n// ramp for HOLD2 seconds before the next run comes down over it.\nconst FILL = 16, HOLD1 = 1.2, SORTS = 26, HOLD2 = 3.2;\nconst { floor, min, max, abs, round, random, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Draw count at each row boundary.\nconst NAT = new Float64Array(H);\nfor (let r = 0; r \u003c H; r++) NAT[r] = round(N0 * (pow(1 + NMAX / N0, r / (H - 1)) - 1));\n\nexport function setup(params) {\n  params.s = {\n    init: false, phase: 0, t: 0, front: 0, rounds: 0, still: false,\n    balls: 1, added: 1, hue: 0, speed: 2,\n    // Each urn: balls of the first colour, all balls, draws made.\n    A: new Float64Array(W), T: new Float64Array(W), n: new Float64Array(W),\n    // Share of the first colour at each row, this run and the run before.\n    cur: new Float32Array(W * H), old: new Float32Array(W * H),\n    ca: [0, 0, 0], cb: [0, 0, 0],\n  };\n}\n\nfunction startRun(S) {\n  for (let i = 0; i \u003c W; i++) {\n    S.A[i] = S.balls;\n    S.T[i] = 2 * S.balls;\n    S.n[i] = 0;\n  }\n  S.front = 0;\n  S.t = 0;\n  S.phase = 0;\n  S.rounds = 0;\n  S.still = false;\n}\n\n// Run every urn on to row r's draw count and write the shares of the rows it\n// passes; the row the front stands in shows the share as it is now.\nfunction advance(S, rf) {\n  const { A, T, n, cur } = S, c = S.added;\n  const r1 = min(H - 1, floor(rf));\n  for (let i = 0; i \u003c W; i++) {\n    let a = A[i], t = T[i], k = n[i];\n    for (let r = S.front; r \u003c= r1; r++) {\n      const goal = NAT[r];\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[r * W + i] = a / t;\n    }\n    // Draws inside the row the front is crossing, toward the next row.\n    if (r1 \u003c H - 1) {\n      const goal = NAT[r1] + (NAT[r1 + 1] - NAT[r1]) * (rf - r1);\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[(r1 + 1) * W + i] = a / t;\n    }\n    A[i] = a;\n    T[i] = t;\n    n[i] = k;\n  }\n  S.front = r1 + 1;\n}\n\n// One round of odd-even transposition sort on the columns, by the bottom\n// row's share; whole columns move, their history with them.\nfunction sortRound(S) {\n  const { cur } = S, base = (H - 1) * W, odd = S.rounds & 1;\n  let moved = false;\n  for (let i = odd; i + 1 \u003c W; i += 2) {\n    if (cur[base + i] > cur[base + i + 1]) {\n      for (let r = 0; r \u003c H; r++) {\n        const p = r * W + i, v = cur[p];\n        cur[p] = cur[p + 1];\n        cur[p + 1] = v;\n      }\n      moved = true;\n    }\n  }\n  S.rounds++;\n  return moved;\n}\n\nfunction firstRun(S) {\n  // The panel opens on a finished run, so the first run comes down over it.\n  startRun(S);\n  advance(S, H - 1);\n  while (sortRound(S) || sortRound(S));\n  S.old.set(S.cur);\n  startRun(S);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const balls = round(cl(k[2], 1, 8)), added = round(cl(k[3], 1, 8));\n  // A change of Balls or Added starts a fresh run under the new rule.\n  if (S.init && (balls !== S.balls || added !== S.added)) {\n    S.balls = balls;\n    S.added = added;\n    // What is on the panel now becomes the run the new one comes down over.\n    if (S.phase === 0) S.old.set(S.cur.subarray(0, S.front * W));\n    else S.old.set(S.cur);\n    startRun(S);\n  }\n  S.balls = balls;\n  S.added = added;\n  if (!S.init) {\n    firstRun(S);\n    S.init = true;\n  }\n  S.t += d;\n  if (S.phase === 0) {\n    const rf = min(H - 1, (S.t * S.speed * (H - 1)) / FILL);\n    advance(S, rf);\n    if (rf >= H - 1) {\n      S.phase = 1;\n      S.t = 0;\n    }\n  } else if (S.phase === 1) {\n    if (S.t > HOLD1) {\n      S.phase = 2;\n      S.t = 0;\n    }\n  } else if (S.phase === 2) {\n    // Sorting rounds at SORTS a second; two rounds in a row that move\n    // nothing mean the columns are in order.\n    while (S.t > 1 / SORTS) {\n      S.t -= 1 / SORTS;\n      const moved = sortRound(S);\n      if (!moved && S.still) {\n        S.phase = 3;\n        S.t = 0;\n        break;\n      }\n      S.still = !moved;\n    }\n  } else if (S.t > HOLD2) {\n    S.old.set(S.cur);\n    startRun(S);\n  }\n}\n\nfunction colours(S) {\n  // The first colour, and the second a third of the wheel on; orange and\n  // yellow are paled and lifted.\n  for (const [h, out] of [[S.hue + 0.47, S.ca], [S.hue + 0.8, S.cb]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.12) / 0.1, 0, 1);\n    hsv(h, 0.78 - 0.3 * warm, 1, out);\n    if (warm > 0) {\n      const lift = 1 + 0.25 * warm;\n      out[0] = min(1, out[0] * lift);\n      out[1] = min(1, out[1] * lift);\n      out[2] = min(1, out[2] * lift);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  colours(S);\n  const { ca, cb, cur, old } = S;\n  const fill = S.phase === 0, fr = S.front;\n  for (let y = 0; y \u003c H; y++) {\n    const live = !fill || y \u003c fr;\n    const atFront = fill && y === fr - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, s = live ? cur[p] : old[p];\n      // The mix of the two colours by the share of the first, lifted halfway\n      // back to full brightness, so two colours either side of yellow mix to\n      // yellow and not olive. A mix in orange or yellow is lifted and paled\n      // further, a quarter of the way to white. The run before waits under\n      // the front at 70%, sorted, so the new barcode reads against its ramp.\n      let r = s * ca[0] + (1 - s) * cb[0], g = s * ca[1] + (1 - s) * cb[1], b = s * ca[2] + (1 - s) * cb[2];\n      const m = max(r, g, b), warm = cl((min(r, g) - b) / m, 0, 1);\n      const k = ((live ? 0.95 : 0.7) + (live ? 0.05 : 0.3) * warm) * (0.5 + 0.5 / m), pale = 0.25 * warm;\n      r = r * k + (1 - r * k) * pale;\n      g = g * k + (1 - g * k) * pale;\n      b = b * k + (1 - b * k) * pale;\n      if (atFront) {\n        r = r * 0.5 + 0.5;\n        g = g * 0.5 + 0.5;\n        b = b * 0.5 + 0.5;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","layer":{"id":"layer-polya-urn","type":"code","name":"polya-urn","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pólya Urn\n// Family:  data\n// Idea:    Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Pólya's urn (Florian Eggenberger and George Pólya, 1923), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8\n//\n// Knob 1: Hue. Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive.\n// Knob 2: Speed. How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it.\n// Knob 3: Balls. The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends.\n// Knob 4: Added. Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one.\n\nconst W = 64, H = 128;\n// The clock: row r is draw n(r) = N0 ((1 + NMAX / N0)^(r / 127) - 1), 0 at\n// the top and NMAX at the bottom: the first draw lands on row 12, the tenth\n// on row 40, the hundredth on row 77.\nconst NMAX = 2000, N0 = 1;\n// One run fills the panel in FILL / Speed seconds; the finished run waits\n// HOLD1 seconds, sorts at SORTS transposition rounds a second, then shows the\n// ramp for HOLD2 seconds before the next run comes down over it.\nconst FILL = 16, HOLD1 = 1.2, SORTS = 26, HOLD2 = 3.2;\nconst { floor, min, max, abs, round, random, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Draw count at each row boundary.\nconst NAT = new Float64Array(H);\nfor (let r = 0; r \u003c H; r++) NAT[r] = round(N0 * (pow(1 + NMAX / N0, r / (H - 1)) - 1));\n\nexport function setup(params) {\n  params.s = {\n    init: false, phase: 0, t: 0, front: 0, rounds: 0, still: false,\n    balls: 1, added: 1, hue: 0, speed: 2,\n    // Each urn: balls of the first colour, all balls, draws made.\n    A: new Float64Array(W), T: new Float64Array(W), n: new Float64Array(W),\n    // Share of the first colour at each row, this run and the run before.\n    cur: new Float32Array(W * H), old: new Float32Array(W * H),\n    ca: [0, 0, 0], cb: [0, 0, 0],\n  };\n}\n\nfunction startRun(S) {\n  for (let i = 0; i \u003c W; i++) {\n    S.A[i] = S.balls;\n    S.T[i] = 2 * S.balls;\n    S.n[i] = 0;\n  }\n  S.front = 0;\n  S.t = 0;\n  S.phase = 0;\n  S.rounds = 0;\n  S.still = false;\n}\n\n// Run every urn on to row r's draw count and write the shares of the rows it\n// passes; the row the front stands in shows the share as it is now.\nfunction advance(S, rf) {\n  const { A, T, n, cur } = S, c = S.added;\n  const r1 = min(H - 1, floor(rf));\n  for (let i = 0; i \u003c W; i++) {\n    let a = A[i], t = T[i], k = n[i];\n    for (let r = S.front; r \u003c= r1; r++) {\n      const goal = NAT[r];\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[r * W + i] = a / t;\n    }\n    // Draws inside the row the front is crossing, toward the next row.\n    if (r1 \u003c H - 1) {\n      const goal = NAT[r1] + (NAT[r1 + 1] - NAT[r1]) * (rf - r1);\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[(r1 + 1) * W + i] = a / t;\n    }\n    A[i] = a;\n    T[i] = t;\n    n[i] = k;\n  }\n  S.front = r1 + 1;\n}\n\n// One round of odd-even transposition sort on the columns, by the bottom\n// row's share; whole columns move, their history with them.\nfunction sortRound(S) {\n  const { cur } = S, base = (H - 1) * W, odd = S.rounds & 1;\n  let moved = false;\n  for (let i = odd; i + 1 \u003c W; i += 2) {\n    if (cur[base + i] > cur[base + i + 1]) {\n      for (let r = 0; r \u003c H; r++) {\n        const p = r * W + i, v = cur[p];\n        cur[p] = cur[p + 1];\n        cur[p + 1] = v;\n      }\n      moved = true;\n    }\n  }\n  S.rounds++;\n  return moved;\n}\n\nfunction firstRun(S) {\n  // The panel opens on a finished run, so the first run comes down over it.\n  startRun(S);\n  advance(S, H - 1);\n  while (sortRound(S) || sortRound(S));\n  S.old.set(S.cur);\n  startRun(S);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const balls = round(cl(k[2], 1, 8)), added = round(cl(k[3], 1, 8));\n  // A change of Balls or Added starts a fresh run under the new rule.\n  if (S.init && (balls !== S.balls || added !== S.added)) {\n    S.balls = balls;\n    S.added = added;\n    // What is on the panel now becomes the run the new one comes down over.\n    if (S.phase === 0) S.old.set(S.cur.subarray(0, S.front * W));\n    else S.old.set(S.cur);\n    startRun(S);\n  }\n  S.balls = balls;\n  S.added = added;\n  if (!S.init) {\n    firstRun(S);\n    S.init = true;\n  }\n  S.t += d;\n  if (S.phase === 0) {\n    const rf = min(H - 1, (S.t * S.speed * (H - 1)) / FILL);\n    advance(S, rf);\n    if (rf >= H - 1) {\n      S.phase = 1;\n      S.t = 0;\n    }\n  } else if (S.phase === 1) {\n    if (S.t > HOLD1) {\n      S.phase = 2;\n      S.t = 0;\n    }\n  } else if (S.phase === 2) {\n    // Sorting rounds at SORTS a second; two rounds in a row that move\n    // nothing mean the columns are in order.\n    while (S.t > 1 / SORTS) {\n      S.t -= 1 / SORTS;\n      const moved = sortRound(S);\n      if (!moved && S.still) {\n        S.phase = 3;\n        S.t = 0;\n        break;\n      }\n      S.still = !moved;\n    }\n  } else if (S.t > HOLD2) {\n    S.old.set(S.cur);\n    startRun(S);\n  }\n}\n\nfunction colours(S) {\n  // The first colour, and the second a third of the wheel on; orange and\n  // yellow are paled and lifted.\n  for (const [h, out] of [[S.hue + 0.47, S.ca], [S.hue + 0.8, S.cb]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.12) / 0.1, 0, 1);\n    hsv(h, 0.78 - 0.3 * warm, 1, out);\n    if (warm > 0) {\n      const lift = 1 + 0.25 * warm;\n      out[0] = min(1, out[0] * lift);\n      out[1] = min(1, out[1] * lift);\n      out[2] = min(1, out[2] * lift);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  colours(S);\n  const { ca, cb, cur, old } = S;\n  const fill = S.phase === 0, fr = S.front;\n  for (let y = 0; y \u003c H; y++) {\n    const live = !fill || y \u003c fr;\n    const atFront = fill && y === fr - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, s = live ? cur[p] : old[p];\n      // The mix of the two colours by the share of the first, lifted halfway\n      // back to full brightness, so two colours either side of yellow mix to\n      // yellow and not olive. A mix in orange or yellow is lifted and paled\n      // further, a quarter of the way to white. The run before waits under\n      // the front at 70%, sorted, so the new barcode reads against its ramp.\n      let r = s * ca[0] + (1 - s) * cb[0], g = s * ca[1] + (1 - s) * cb[1], b = s * ca[2] + (1 - s) * cb[2];\n      const m = max(r, g, b), warm = cl((min(r, g) - b) / m, 0, 1);\n      const k = ((live ? 0.95 : 0.7) + (live ? 0.05 : 0.3) * warm) * (0.5 + 0.5 / m), pale = 0.25 * warm;\n      r = r * k + (1 - r * k) * pale;\n      g = g * k + (1 - g * k) * pale;\n      b = b * k + (1 - b * k) * pale;\n      if (atFront) {\n        r = r * 0.5 + 0.5;\n        g = g * 0.5 + 0.5;\n        b = b * 0.5 + 0.5;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it."},{"name":"Balls","min":1,"max":8,"about":"The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends."},{"name":"Added","min":1,"max":8,"about":"Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one."}],"start":[0,2,1,1],"measures":{"motion":0.0395,"detail":0.0065,"edges":0.0554,"complexity":1.2351,"coverage":1,"colour":0.4287,"drift":0.1821},"knobResponse":[0.3523,0.0975,0.0619,0.0708]},{"slug":"pop-up-book","title":"Pop-up Book","family":"paper","round":21,"note":"탁자에 펼친 팝업북에서 성과 숲, 등대, 도시가 종이 카드 여러 겹으로 일어서고, 그동안 달이 홈을 따라 가고 사슴이 고개를 숙여요. 페이지가 넘어가면 장면이 가운데 접힌 선으로 납작하게 눕고, 넘어오는 페이지에서 다음 장면이 일어나요.","idea":"A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.","buttons":"K1 tap turns the page now.","code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-pop-up-book","type":"code","name":"pop-up-book","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":3,"about":"Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three."},{"name":"Layers","min":4,"max":6,"about":"How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain)."},{"name":"Lamp","min":0,"max":1,"about":"Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing."}],"start":[0,2,4,0.06],"measures":{"motion":0.2969,"detail":0.0558,"edges":0.4541,"complexity":0.5762,"coverage":0.9872,"colour":0.1893,"drift":0.1346},"knobResponse":[0.1392,0.0773,0.0475,0.1266]},{"slug":"popcorn","title":"Popcorn","family":"kitchen","round":19,"note":"영화관 팝콘 수레가 128줄을 다 써요. 케틀에서 낟알이 터져 뛰고 넘쳐 떨어지다가 케틀이 기울어 한 배치를 더미에 쏟고, K1 을 누르면 스쿱이 더미를 떠 가요.","idea":"A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.","buttons":"K1 tap sends the scoop in now.","code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-popcorn","type":"code","name":"popcorn","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1."},{"name":"Heat","min":0.2,"max":3,"about":"How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one."},{"name":"Batch","min":6,"max":16,"about":"The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap."},{"name":"Heap","min":0,"max":1,"about":"How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle."}],"start":[0,2,6,0.06],"measures":{"motion":0.2278,"detail":0.0649,"edges":0.5093,"complexity":0.7081,"coverage":0.9514,"colour":0.2616,"drift":0.0636},"knobResponse":[0.0358,0.0496,0.0725,0.0766]},{"slug":"population-pyramid","title":"Population Pyramid","family":"data","round":25,"note":"가상의 나라의 인구 피라미드가 한 살에 한 줄씩 움직여요. 왼쪽이 남자, 오른쪽이 여자이고, 10년마다 태어난 세대가 제 색 띠로 해마다 한 줄씩 올라가요. 1995년의 베이비붐 띠가 위로 올라가 2060년에 위가 무거운 항아리꼴이 되면, 1820년의 뾰족한 삼각형으로 돌아가 240년을 다시 지나요. K3 을 내리면 아래가 좁아져 거꾸로 선 피라미드가 되고, K1 을 누르면 그해가 전쟁이나 유행병이 되어 패인 홈이 위로 올라가요.","idea":"The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.","buttons":"K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.","code":"// ===== Patternflow pattern =====\n// Title:   Population Pyramid\n// Family:  data\n// Idea:    The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the animated age pyramids of national statistics offices and the cohort-component model demographers project with\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1\n//\n// Knob 1: Palette. Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part.\n// Knob 2: Speed. At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid.\n// Knob 3: Births. Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads.\n// Knob 4: Migration. Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed.\n// Buttons: K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, exp, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\n\n// Ages 0 to 105 have a row each; the top row holds everyone older.\nconst NA = 107;\n// Row of age 0, first bar column for men (going left) and for women (going right), the widest bar.\nconst [Y0, MX, FX, BAR] = [121, 30, 33, 23];\n// The story runs from 1820 to 2060 and goes back to 1820. The first start opens in OPEN, the boom in middle age and\n// the old reaching the top of the panel, with the years before it run unseen.\nconst [START, END, OPEN] = [1820, 2060, 1995];\n\n// Mortality level: 0 where a quarter of babies die in their first year and life lasts 30 to 33 years on average, 1 where it lasts 79 to 83.\nconst LK = [[1820, 0], [1850, 0.02], [1880, 0.14], [1910, 0.34], [1950, 0.66], [1975, 0.84], [2000, 0.94], [2060, 1]];\n// Children a woman, before Births scales them.\nconst TK = [[1820, 6], [1865, 6], [1885, 5.5], [1905, 4.3], [1926, 2.9], [1933, 2.2], [1940, 2.3], [1947, 3.1], [1955, 3.5], [1962, 3.3], [1968, 2.5], [1977, 1.8], [1992, 1.55], [2008, 1.25], [2035, 1.05], [2060, 1]];\n// Two wars, the influenza after the first, and a cholera year in the opening decade.\nconst EV = [[1914, 1918, 0], [1940, 1945, 0], [1919, 1919, 1], [1823, 1823, 1]];\n\nconst key = (K, y) => {\n  if (y \u003c= K[0][0]) return K[0][1];\n  for (let i = 1; i \u003c K.length; i++)\n    if (y \u003c= K[i][0]) {\n      const t = (y - K[i - 1][0]) / (K[i][0] - K[i - 1][0]);\n      return mix(K[i - 1][1], K[i][1], t * t * (3 - 2 * t));\n    }\n  return K[K.length - 1][1];\n};\n\n// Where in a woman's life the children come: a hump peaking at 28.\nconst PHI = new Float64Array(NA);\n{\n  let s = 0;\n  for (let a = 15; a \u003c 50; a++) s += PHI[a] = (a - 14) ** 2.5 * exp(-(a - 14) / 5.5);\n  for (let a = 15; a \u003c 50; a++) PHI[a] /= s;\n}\n// Where migrants are in life: around 26.\nconst MIG = new Float64Array(NA).map((_, a) => exp(-(((a - 26) / 8) ** 2)));\n\n// Yearly hazard of dying at age a. kind: -1 a plain year, 0 war, 1 epidemic, 2 famine.\nfunction hazard(a, L, male, kind) {\n  let h = a === 0 ? mix(0.27, 0.0035, L) : a \u003c 15 ? mix(0.04, 0.0003, L) * exp(-(a - 1) / 2.2) : 0;\n  h += mix(0.008, 0.0003, L) * (male && a > 14 && a \u003c 40 ? 1.9 : 1);\n  h += 0.1 * exp(0.1 * (a - mix(64, 86, L) - (male ? 0 : mix(2, 4, L))));\n  if (kind === 0 && male && a > 17 && a \u003c 43) h += 0.09;\n  if (kind === 1) h += 0.015 + (a > 17 && a \u003c 41 ? 0.025 : 0) + (a \u003c 5 ? 0.08 : 0) + (a > 64 ? 0.06 : 0);\n  if (kind === 2) h += 0.02 + (a \u003c 5 ? 0.07 : 0) + (a > 59 ? 0.04 : 0);\n  return h;\n}\n\n// A state is six rows of ages: men and women living here, the part of them who came as migrants, and those who left.\nconst SV = new Float64Array(NA);\n// One year of the cohort-component model: the dead leave, everyone is a year older, the year's births come in, migrants come or go.\nfunction step(src, dst, y, fk, mig, kind, push) {\n  const L = key(LK, y);\n  let b = 0;\n  for (let a = 15; a \u003c 50; a++) b += src[1][a] * PHI[a];\n  b *= key(TK, y) * fk * [1, 0.62, 0.75, 0.85][kind + 1] * (push ? 0.7 : 1);\n  for (let s = 0; s \u003c 2; s++) {\n    for (let a = 0; a \u003c NA; a++) SV[a] = exp(-hazard(a, L, !s, kind) * (a ? 1 : 0.5));\n    for (let k = s; k \u003c 6; k += 2) {\n      const S = src[k], D = dst[k];\n      D[NA - 1] = S[NA - 1] * SV[NA - 1] + S[NA - 2] * SV[NA - 2];\n      for (let a = NA - 2; a > 0; a--) D[a] = S[a - 1] * SV[a - 1];\n      D[0] = k \u003c 2 ? b * (s ? 0.488 : 0.512) * SV[0] : 0;\n    }\n    const [D, I, E] = [dst[s], dst[s + 2], dst[s + 4]];\n    for (let a = 12; a \u003c 60; a++)\n      if (mig > 0) {\n        const n = mig * 0.00045 * MIG[a] * (s ? 0.9 : 1.1);\n        (D[a] += n), (I[a] += n);\n      } else if (mig \u003c 0) {\n        const f = 1 - exp(mig * 0.035 * MIG[a]);\n        (E[a] += D[a] * f), (D[a] *= 1 - f), (I[a] *= 1 - f);\n      }\n  }\n  // Keep the people living here at one: the bars are shares of them.\n  let t = 0;\n  for (let a = 0; a \u003c NA; a++) t += dst[0][a] + dst[1][a];\n  for (const A of dst) for (let a = 0; a \u003c NA; a++) A[a] /= t;\n}\n\n// A crisis by the script, or by chance in the hungry decades.\nconst kindOf = (y) => {\n  for (const [a, b, k] of EV) if (y >= a && y \u003c= b) return k;\n  return y \u003c 1880 && rnd() \u003c 0.07 ? 2 : -1;\n};\n\n// 3x5 digits, then M and F.\nconst GL = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf, 0x5fed, 0x79a4];\n\nexport function setup(params) {\n  const S = () => Array.from({ length: 6 }, () => new Float64Array(NA));\n  params.s = { cur: S(), nxt: S(), tmp: S(), y: START, u: 0, scl: 0, f: new Float32Array(N * 3), ready: 0, war: 0, fade: 0, kinds: new Int8Array(END - START + 2) };\n}\n\n// Run the opening regime for 110 years, longer than anyone lives, so it reaches its own shape and the knobs show from the first frame,\n// then the story up to the year it opens on.\nfunction warm(P, fk, mig, open) {\n  for (let s = 0; s \u003c 6; s++) for (let a = 0; a \u003c NA; a++) P.cur[s][a] = s \u003c 2 ? exp(-0.04 * a) : 0;\n  for (let i = 0; i \u003c 110; i++) {\n    step(P.cur, P.tmp, START - 110 + i, fk, mig, rnd() \u003c 0.07 ? 2 : -1, 0);\n    [P.cur, P.tmp] = [P.tmp, P.cur];\n  }\n  P.y = START;\n  P.u = 0;\n  P.kinds.fill(-1);\n  next(P, fk, mig, 0);\n  while (P.y \u003c open) [P.cur, P.nxt] = [P.nxt, P.cur], P.y++, next(P, fk, mig, 0);\n  P.scl = 0;\n}\n\n// Work out the year being lived now, from the state at its first day.\nfunction next(P, fk, mig, push) {\n  const k = push ? push - 1 : kindOf(P.y);\n  P.kinds[P.y - START] = k;\n  step(P.cur, P.nxt, P.y, fk, mig, k, push);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const fk = exp(0.47 * cl(k[2], -1, 1)), k4 = cl(k[3], -1, 1), mig = Math.sign(k4) * max(0, abs(k4) - 0.1) / 0.9, spd = 1.5 * cl(k[1], 0.25, 6);\n  P.hue = k[0];\n  if (!P.ready) (P.ready = 1), warm(P, fk, mig, OPEN);\n  // K1 tap: this year is a war, then an epidemic, by turns.\n  if (input.btnPressed && input.btnPressed[0] && P.y \u003c END) next(P, fk, mig, (P.war ^= 1) ? 1 : 2);\n  if (P.fade > 0) {\n    // The story is over: hold the urn a moment, dim, start again from the old triangle, light up.\n    P.fade += d;\n    if (P.fade > 2 && P.y >= END) warm(P, fk, mig, START);\n    if (P.fade > 2.8) P.fade = 0;\n  } else {\n    P.u += d * spd;\n    for (let i = 0; i \u003c 6 && P.u >= 1; i++) {\n      P.u -= 1;\n      [P.cur, P.nxt] = [P.nxt, P.cur];\n      if (++P.y >= END) {\n        (P.u = 0), (P.fade = 0.001);\n        break;\n      }\n      next(P, fk, mig, 0);\n    }\n  }\n  // The widest bar sets the scale, followed gently so a single year does not jolt it.\n  let m = 1e-9;\n  for (let a = 0; a \u003c NA; a++) m = max(m, P.cur[0][a], P.cur[1][a], P.nxt[0][a], P.nxt[1][a]);\n  const want = BAR / m;\n  P.scl = P.scl ? P.scl * exp(cl(Math.log(want / P.scl), -1, 1) * min(1, d * 1.5)) : want;\n  P.scl = min(P.scl, (BAR + 0.5) / m);\n}\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i % 6].map((c) => c * 255);\n}\n\nlet FB;\nfunction put(x, y, c, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  FB[o] = c[0] * a;\n  FB[o + 1] = c[1] * a;\n  FB[o + 2] = c[2] * a;\n}\nfunction glyph(g, x, y, c, s = 1) {\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((GL[g] >> (14 - r * 3 - q)) & 1) for (let i = 0; i \u003c s; i++) for (let j = 0; j \u003c s; j++) put(x + q * s + j, y + r * s + i, c);\n}\nfunction num(n, x, y, c, w, s = 1) {\n  const t = String(n).padStart(w, \"0\");\n  for (let i = 0; i \u003c t.length; i++) glyph(+t[i], x + i * 4 * s, y, c, s);\n}\n\n// A birth decade's colours: the band, its migrants, its leavers and its label. Decades step bright, middle, dark;\n// the darker two keep off orange and yellow, which go brown and olive when dim.\nconst LV = [1, 0.66, 0.4];\nfunction decade(hue, c) {\n  const l = ((c % 3) + 3) % 3, h0 = hue + c * 0.137, h = l ? 0.2 + (h0 - floor(h0)) * 0.82 : h0;\n  return [hsv(h, 0.8, LV[l]), hsv(h, 0.3, max(0.8, LV[l])), hsv(h, 0.6, 0.55), hsv(h, 0.55, 1)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  FB = P.f;\n  FB.fill(0);\n  const u = P.u, hue = 0.55 + (P.hue || 0), vis = P.fade > 1.2 ? min(1, abs(P.fade - 2) / 0.8) : 1;\n  // The age-0 row holds last year's births; the bands move up a row half way through the year.\n  const yb = P.y - 1 + (u >= 0.5 ? 1 : 0);\n  const grid = [38, 38, 38], lab = [110, 110, 120];\n  // Faint lines every ten years of age, and the ages up the left side.\n  for (let a = 0; a \u003c= 100; a += 10) {\n    const y = Y0 - a;\n    for (let x = 1; x \u003c W; x += 2) put(x, y, grid);\n    if (a % 20 === 0) num(a, 0, y - 2, lab, 1);\n  }\n  // The bars, one row per year of age, mid-year between the two states.\n  const C = P.cur, X = P.nxt, at = (s, a) => mix(C[s][a], X[s][a], u) * P.scl, memo = {}, dec = (c) => memo[c] || (memo[c] = decade(hue, c));\n  for (let a = 0; a \u003c NA; a++) {\n    const y = Y0 - a, [c, pale, ghost] = dec(floor((yb - a) / 10));\n    for (let s = 0; s \u003c 2; s++) {\n      const len = min(BAR, at(s, a)), imm = min(len, at(s + 2, a)), out = min(BAR + 1 - len, at(s + 4, a));\n      const px = (i, q, f = 1) => put(s ? FX + i : MX - i, y, q, f);\n      const n = floor(len), fr = len - n;\n      for (let i = 0; i \u003c n; i++) px(i, i + 0.5 \u003c len - imm ? c : pale);\n      if (fr > 0.05) px(n, imm > 0.5 ? pale : c, fr);\n      // Those who left, dotted past the end of the bar.\n      for (let i = n + 1; i \u003c len + out; i++) if ((i + a) & 1) px(i, ghost);\n    }\n  }\n  // The birth decade of each band, written beside it on the right in its own colour.\n  for (let c = floor((yb - 106) / 10); c \u003c= floor(yb / 10); c++) {\n    const top = min(NA - 1, yb - c * 10), bot = max(0, yb - c * 10 - 9);\n    if (top - bot \u003c 4) continue;\n    // A decade with hardly anyone left keeps a dim label.\n    let w = 0;\n    for (let a = bot; a \u003c= top; a++) w = max(w, at(0, a), at(1, a));\n    num((c * 10) % 100, 57, Math.round(Y0 - cl(yb - c * 10 - 4.5, bot + 2, top - 2)) - 2, dec(c)[3].map((q) => q * cl(w / 3, 0.3, 1)), 2);\n  }\n  // The year being lived, in the colour of the decade being born, red in a year of war or epidemic.\n  const kind = P.kinds[P.y - START] ?? -1, ycol = kind === 0 || kind === 1 ? [255, 60, 40] : decade(hue, floor(P.y / 10))[3];\n  num(P.y, 17, 2, ycol, 4, 2);\n  glyph(10, 18, 123, lab), glyph(11, 43, 123, lab);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, FB[o] * vis) | 0, min(255, FB[o + 1] * vis) | 0, min(255, FB[o + 2] * vis) | 0);\n}\n","layer":{"id":"layer-population-pyramid","type":"code","name":"population-pyramid","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Population Pyramid\n// Family:  data\n// Idea:    The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the animated age pyramids of national statistics offices and the cohort-component model demographers project with\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1\n//\n// Knob 1: Palette. Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part.\n// Knob 2: Speed. At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid.\n// Knob 3: Births. Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads.\n// Knob 4: Migration. Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed.\n// Buttons: K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, exp, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\n\n// Ages 0 to 105 have a row each; the top row holds everyone older.\nconst NA = 107;\n// Row of age 0, first bar column for men (going left) and for women (going right), the widest bar.\nconst [Y0, MX, FX, BAR] = [121, 30, 33, 23];\n// The story runs from 1820 to 2060 and goes back to 1820. The first start opens in OPEN, the boom in middle age and\n// the old reaching the top of the panel, with the years before it run unseen.\nconst [START, END, OPEN] = [1820, 2060, 1995];\n\n// Mortality level: 0 where a quarter of babies die in their first year and life lasts 30 to 33 years on average, 1 where it lasts 79 to 83.\nconst LK = [[1820, 0], [1850, 0.02], [1880, 0.14], [1910, 0.34], [1950, 0.66], [1975, 0.84], [2000, 0.94], [2060, 1]];\n// Children a woman, before Births scales them.\nconst TK = [[1820, 6], [1865, 6], [1885, 5.5], [1905, 4.3], [1926, 2.9], [1933, 2.2], [1940, 2.3], [1947, 3.1], [1955, 3.5], [1962, 3.3], [1968, 2.5], [1977, 1.8], [1992, 1.55], [2008, 1.25], [2035, 1.05], [2060, 1]];\n// Two wars, the influenza after the first, and a cholera year in the opening decade.\nconst EV = [[1914, 1918, 0], [1940, 1945, 0], [1919, 1919, 1], [1823, 1823, 1]];\n\nconst key = (K, y) => {\n  if (y \u003c= K[0][0]) return K[0][1];\n  for (let i = 1; i \u003c K.length; i++)\n    if (y \u003c= K[i][0]) {\n      const t = (y - K[i - 1][0]) / (K[i][0] - K[i - 1][0]);\n      return mix(K[i - 1][1], K[i][1], t * t * (3 - 2 * t));\n    }\n  return K[K.length - 1][1];\n};\n\n// Where in a woman's life the children come: a hump peaking at 28.\nconst PHI = new Float64Array(NA);\n{\n  let s = 0;\n  for (let a = 15; a \u003c 50; a++) s += PHI[a] = (a - 14) ** 2.5 * exp(-(a - 14) / 5.5);\n  for (let a = 15; a \u003c 50; a++) PHI[a] /= s;\n}\n// Where migrants are in life: around 26.\nconst MIG = new Float64Array(NA).map((_, a) => exp(-(((a - 26) / 8) ** 2)));\n\n// Yearly hazard of dying at age a. kind: -1 a plain year, 0 war, 1 epidemic, 2 famine.\nfunction hazard(a, L, male, kind) {\n  let h = a === 0 ? mix(0.27, 0.0035, L) : a \u003c 15 ? mix(0.04, 0.0003, L) * exp(-(a - 1) / 2.2) : 0;\n  h += mix(0.008, 0.0003, L) * (male && a > 14 && a \u003c 40 ? 1.9 : 1);\n  h += 0.1 * exp(0.1 * (a - mix(64, 86, L) - (male ? 0 : mix(2, 4, L))));\n  if (kind === 0 && male && a > 17 && a \u003c 43) h += 0.09;\n  if (kind === 1) h += 0.015 + (a > 17 && a \u003c 41 ? 0.025 : 0) + (a \u003c 5 ? 0.08 : 0) + (a > 64 ? 0.06 : 0);\n  if (kind === 2) h += 0.02 + (a \u003c 5 ? 0.07 : 0) + (a > 59 ? 0.04 : 0);\n  return h;\n}\n\n// A state is six rows of ages: men and women living here, the part of them who came as migrants, and those who left.\nconst SV = new Float64Array(NA);\n// One year of the cohort-component model: the dead leave, everyone is a year older, the year's births come in, migrants come or go.\nfunction step(src, dst, y, fk, mig, kind, push) {\n  const L = key(LK, y);\n  let b = 0;\n  for (let a = 15; a \u003c 50; a++) b += src[1][a] * PHI[a];\n  b *= key(TK, y) * fk * [1, 0.62, 0.75, 0.85][kind + 1] * (push ? 0.7 : 1);\n  for (let s = 0; s \u003c 2; s++) {\n    for (let a = 0; a \u003c NA; a++) SV[a] = exp(-hazard(a, L, !s, kind) * (a ? 1 : 0.5));\n    for (let k = s; k \u003c 6; k += 2) {\n      const S = src[k], D = dst[k];\n      D[NA - 1] = S[NA - 1] * SV[NA - 1] + S[NA - 2] * SV[NA - 2];\n      for (let a = NA - 2; a > 0; a--) D[a] = S[a - 1] * SV[a - 1];\n      D[0] = k \u003c 2 ? b * (s ? 0.488 : 0.512) * SV[0] : 0;\n    }\n    const [D, I, E] = [dst[s], dst[s + 2], dst[s + 4]];\n    for (let a = 12; a \u003c 60; a++)\n      if (mig > 0) {\n        const n = mig * 0.00045 * MIG[a] * (s ? 0.9 : 1.1);\n        (D[a] += n), (I[a] += n);\n      } else if (mig \u003c 0) {\n        const f = 1 - exp(mig * 0.035 * MIG[a]);\n        (E[a] += D[a] * f), (D[a] *= 1 - f), (I[a] *= 1 - f);\n      }\n  }\n  // Keep the people living here at one: the bars are shares of them.\n  let t = 0;\n  for (let a = 0; a \u003c NA; a++) t += dst[0][a] + dst[1][a];\n  for (const A of dst) for (let a = 0; a \u003c NA; a++) A[a] /= t;\n}\n\n// A crisis by the script, or by chance in the hungry decades.\nconst kindOf = (y) => {\n  for (const [a, b, k] of EV) if (y >= a && y \u003c= b) return k;\n  return y \u003c 1880 && rnd() \u003c 0.07 ? 2 : -1;\n};\n\n// 3x5 digits, then M and F.\nconst GL = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf, 0x5fed, 0x79a4];\n\nexport function setup(params) {\n  const S = () => Array.from({ length: 6 }, () => new Float64Array(NA));\n  params.s = { cur: S(), nxt: S(), tmp: S(), y: START, u: 0, scl: 0, f: new Float32Array(N * 3), ready: 0, war: 0, fade: 0, kinds: new Int8Array(END - START + 2) };\n}\n\n// Run the opening regime for 110 years, longer than anyone lives, so it reaches its own shape and the knobs show from the first frame,\n// then the story up to the year it opens on.\nfunction warm(P, fk, mig, open) {\n  for (let s = 0; s \u003c 6; s++) for (let a = 0; a \u003c NA; a++) P.cur[s][a] = s \u003c 2 ? exp(-0.04 * a) : 0;\n  for (let i = 0; i \u003c 110; i++) {\n    step(P.cur, P.tmp, START - 110 + i, fk, mig, rnd() \u003c 0.07 ? 2 : -1, 0);\n    [P.cur, P.tmp] = [P.tmp, P.cur];\n  }\n  P.y = START;\n  P.u = 0;\n  P.kinds.fill(-1);\n  next(P, fk, mig, 0);\n  while (P.y \u003c open) [P.cur, P.nxt] = [P.nxt, P.cur], P.y++, next(P, fk, mig, 0);\n  P.scl = 0;\n}\n\n// Work out the year being lived now, from the state at its first day.\nfunction next(P, fk, mig, push) {\n  const k = push ? push - 1 : kindOf(P.y);\n  P.kinds[P.y - START] = k;\n  step(P.cur, P.nxt, P.y, fk, mig, k, push);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const fk = exp(0.47 * cl(k[2], -1, 1)), k4 = cl(k[3], -1, 1), mig = Math.sign(k4) * max(0, abs(k4) - 0.1) / 0.9, spd = 1.5 * cl(k[1], 0.25, 6);\n  P.hue = k[0];\n  if (!P.ready) (P.ready = 1), warm(P, fk, mig, OPEN);\n  // K1 tap: this year is a war, then an epidemic, by turns.\n  if (input.btnPressed && input.btnPressed[0] && P.y \u003c END) next(P, fk, mig, (P.war ^= 1) ? 1 : 2);\n  if (P.fade > 0) {\n    // The story is over: hold the urn a moment, dim, start again from the old triangle, light up.\n    P.fade += d;\n    if (P.fade > 2 && P.y >= END) warm(P, fk, mig, START);\n    if (P.fade > 2.8) P.fade = 0;\n  } else {\n    P.u += d * spd;\n    for (let i = 0; i \u003c 6 && P.u >= 1; i++) {\n      P.u -= 1;\n      [P.cur, P.nxt] = [P.nxt, P.cur];\n      if (++P.y >= END) {\n        (P.u = 0), (P.fade = 0.001);\n        break;\n      }\n      next(P, fk, mig, 0);\n    }\n  }\n  // The widest bar sets the scale, followed gently so a single year does not jolt it.\n  let m = 1e-9;\n  for (let a = 0; a \u003c NA; a++) m = max(m, P.cur[0][a], P.cur[1][a], P.nxt[0][a], P.nxt[1][a]);\n  const want = BAR / m;\n  P.scl = P.scl ? P.scl * exp(cl(Math.log(want / P.scl), -1, 1) * min(1, d * 1.5)) : want;\n  P.scl = min(P.scl, (BAR + 0.5) / m);\n}\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i % 6].map((c) => c * 255);\n}\n\nlet FB;\nfunction put(x, y, c, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  FB[o] = c[0] * a;\n  FB[o + 1] = c[1] * a;\n  FB[o + 2] = c[2] * a;\n}\nfunction glyph(g, x, y, c, s = 1) {\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((GL[g] >> (14 - r * 3 - q)) & 1) for (let i = 0; i \u003c s; i++) for (let j = 0; j \u003c s; j++) put(x + q * s + j, y + r * s + i, c);\n}\nfunction num(n, x, y, c, w, s = 1) {\n  const t = String(n).padStart(w, \"0\");\n  for (let i = 0; i \u003c t.length; i++) glyph(+t[i], x + i * 4 * s, y, c, s);\n}\n\n// A birth decade's colours: the band, its migrants, its leavers and its label. Decades step bright, middle, dark;\n// the darker two keep off orange and yellow, which go brown and olive when dim.\nconst LV = [1, 0.66, 0.4];\nfunction decade(hue, c) {\n  const l = ((c % 3) + 3) % 3, h0 = hue + c * 0.137, h = l ? 0.2 + (h0 - floor(h0)) * 0.82 : h0;\n  return [hsv(h, 0.8, LV[l]), hsv(h, 0.3, max(0.8, LV[l])), hsv(h, 0.6, 0.55), hsv(h, 0.55, 1)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  FB = P.f;\n  FB.fill(0);\n  const u = P.u, hue = 0.55 + (P.hue || 0), vis = P.fade > 1.2 ? min(1, abs(P.fade - 2) / 0.8) : 1;\n  // The age-0 row holds last year's births; the bands move up a row half way through the year.\n  const yb = P.y - 1 + (u >= 0.5 ? 1 : 0);\n  const grid = [38, 38, 38], lab = [110, 110, 120];\n  // Faint lines every ten years of age, and the ages up the left side.\n  for (let a = 0; a \u003c= 100; a += 10) {\n    const y = Y0 - a;\n    for (let x = 1; x \u003c W; x += 2) put(x, y, grid);\n    if (a % 20 === 0) num(a, 0, y - 2, lab, 1);\n  }\n  // The bars, one row per year of age, mid-year between the two states.\n  const C = P.cur, X = P.nxt, at = (s, a) => mix(C[s][a], X[s][a], u) * P.scl, memo = {}, dec = (c) => memo[c] || (memo[c] = decade(hue, c));\n  for (let a = 0; a \u003c NA; a++) {\n    const y = Y0 - a, [c, pale, ghost] = dec(floor((yb - a) / 10));\n    for (let s = 0; s \u003c 2; s++) {\n      const len = min(BAR, at(s, a)), imm = min(len, at(s + 2, a)), out = min(BAR + 1 - len, at(s + 4, a));\n      const px = (i, q, f = 1) => put(s ? FX + i : MX - i, y, q, f);\n      const n = floor(len), fr = len - n;\n      for (let i = 0; i \u003c n; i++) px(i, i + 0.5 \u003c len - imm ? c : pale);\n      if (fr > 0.05) px(n, imm > 0.5 ? pale : c, fr);\n      // Those who left, dotted past the end of the bar.\n      for (let i = n + 1; i \u003c len + out; i++) if ((i + a) & 1) px(i, ghost);\n    }\n  }\n  // The birth decade of each band, written beside it on the right in its own colour.\n  for (let c = floor((yb - 106) / 10); c \u003c= floor(yb / 10); c++) {\n    const top = min(NA - 1, yb - c * 10), bot = max(0, yb - c * 10 - 9);\n    if (top - bot \u003c 4) continue;\n    // A decade with hardly anyone left keeps a dim label.\n    let w = 0;\n    for (let a = bot; a \u003c= top; a++) w = max(w, at(0, a), at(1, a));\n    num((c * 10) % 100, 57, Math.round(Y0 - cl(yb - c * 10 - 4.5, bot + 2, top - 2)) - 2, dec(c)[3].map((q) => q * cl(w / 3, 0.3, 1)), 2);\n  }\n  // The year being lived, in the colour of the decade being born, red in a year of war or epidemic.\n  const kind = P.kinds[P.y - START] ?? -1, ycol = kind === 0 || kind === 1 ? [255, 60, 40] : decade(hue, floor(P.y / 10))[3];\n  num(P.y, 17, 2, ycol, 4, 2);\n  glyph(10, 18, 123, lab), glyph(11, 43, 123, lab);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, FB[o] * vis) | 0, min(255, FB[o + 1] * vis) | 0, min(255, FB[o + 2] * vis) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part."},{"name":"Speed","min":0.25,"max":6,"about":"At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid."},{"name":"Births","min":-1,"max":1,"about":"Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads."},{"name":"Migration","min":-1,"max":1,"about":"Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed."}],"start":[0,2,0,0.06],"measures":{"motion":0.1321,"detail":0.0783,"edges":0.6662,"complexity":0.212,"coverage":0.4183,"colour":0.3565,"drift":0.1142},"knobResponse":[0.1688,0.1844,0.07,0.0935]},{"slug":"potters-wheel","title":"Potter's Wheel","family":"pottery","round":24,"note":"밤의 도자기 공방에서 녹색 갓 램프 아래 물레가 돌아요. 두 손이 흙덩이를 가운데로 모아 벽을 끌어올리면 그릇이 76~92줄 높이로 자라고, 물레 자국이 램프 쪽에서 반짝이며 옆으로 흘러가요. 다 빚은 병과 항아리는 줄로 잘려 선반에 올라가 젖은 흙빛에서 하얗게 말라 가요. K1 이 흙을 테라코타에서 검은 흙까지 바꾸고, K1 을 누르면 그릇이 주저앉아요.","idea":"At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.","buttons":"K1 tap makes the wall slump, and the potter balls the clay up and centres it again.","code":"// ===== Patternflow pattern =====\n// Title:   Potter's Wheel\n// Family:  pottery\n// Idea:    At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after throwing a pot on the potter's wheel\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1\n//\n// Knob 1: Clay. The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it.\n// Knob 2: Speed. At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower.\n// Knob 3: Pots. How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln.\n// Knob 4: Lamp. Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it.\n// Buttons: K1 tap makes the wall slump, and the potter balls the clay up and centres it again.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, asin, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The wheel head's centre and radius, the splash pan round it, and the tilt\n// of the view: a circle r across on the wheel shows as an ellipse E * r tall.\nconst [CX, BY, E, WR, PR] = [32, 111, 0.21, 21, 34];\nconst PY = BY + 2.5;\n// Three shelf boards with seven slots each, the order the slots fill, and\n// the size a pot stands at on the shelf against its size on the wheel.\nconst SHELF = [26, 53, 80];\nconst SLOT = [];\nfor (const sy of SHELF) for (let i = 0; i \u003c 7; i++) SLOT.push([4.6 + i * 9.13, sy]);\nconst ORDER = [1, 5, 8, 12, 14, 20, 3, 9, 11, 0, 6, 7, 13, 15, 19, 2, 4, 10, 16, 18, 17];\nconst SHS = 0.27;\n\n// Each clay at every stage of drying, from thrown and wet to bone-dry.\nconst CLAY = [\n  [[255, 112, 56], [196, 96, 58], [238, 158, 108]],\n  [[236, 170, 104], [190, 148, 100], [244, 222, 182]],\n  [[194, 198, 206], [184, 184, 182], [250, 248, 240]],\n  [[110, 96, 96], [86, 80, 78], [156, 148, 142]],\n];\nconst SKIN = [150, 98, 76], WALL = [84, 62, 50], WOOD = [132, 90, 58], METAL = [150, 152, 156], PLASTIC = [76, 80, 90], SLEEVE = [58, 66, 86], SHINE = [255, 232, 196];\n\n// Pot shapes as a height and the radius at keys up the wall: cylinder, bottle,\n// vase with a belly and a flared lip, jar and trumpet vase on the wheel, and\n// bowls and cups from earlier in the evening on the shelves.\nconst SHAPES = [\n  (j) => [76 + 8 * j, [[0, 10.5], [0.45, 10.2 + j], [0.9, 9.6], [1, 11]]],\n  (j) => [84 + 8 * j, [[0, 11], [0.3, 14.5], [0.7, 4.2], [0.93, 4], [1, 5.6]]],\n  (j) => [82 + 8 * j, [[0, 8], [0.42, 15], [0.8, 5], [0.9, 5.4], [1, 9.5]]],\n  (j) => [76 + 6 * j, [[0, 8.5], [0.55, 15.5], [0.9, 9], [1, 10.5]]],\n  (j) => [86 + 6 * j, [[0, 9.5], [0.2, 9.8], [0.62, 5.5], [1, 14]]],\n  (j) => [26 + 6 * j, [[0, 7], [0.45, 14], [1, 19]]],\n  (j) => [40 + 6 * j, [[0, 9], [0.5, 11.5], [0.85, 10.5], [1, 12]]],\n];\nfunction key(K, v) {\n  let i = 0;\n  while (i \u003c K.length - 2 && v > K[i + 1][0]) i++;\n  return mix(K[i][1], K[i + 1][1], sm(K[i][0], K[i + 1][0], v));\n}\n// A radius looked up along a wall kept one entry per row.\nconst at = (pr, h, Hp, i) => ((h = cl(h, 0, Hp)), (i = h | 0), pr[i] + (pr[i + 1] - pr[i]) * (h - i));\nfunction newSpec(not, all) {\n  let type;\n  // The first throw of the night is always one of the three tallest.\n  do type = floor(rnd() * (all ? 7 : 5));\n  while (type === not || (not \u003c -1 && type % 3 === 0));\n  const [Hf, K0] = SHAPES[type](rnd()), g = 0.92 + 0.16 * rnd(), K = K0.map(([v, r]) => [v, r * g]);\n  const pr = F32(ceil(Hf) + 3);\n  for (let h = 0; h \u003c pr.length; h++) pr[h] = key(K, min(1, h / Hf)) + 1.4 * exp(-h / 2.2);\n  // Where the hands shape it: the belly, then the neck above.\n  let vb = 0.5, vn = 0.85, rb = 0, rn = 99;\n  for (const [v, r] of K) if (v > 0.1 && v \u003c 0.85 && r > rb) (rb = r), (vb = v);\n  for (const [v, r] of K) if (v > vb && v \u003c 1 && r \u003c rn) (rn = r), (vn = v);\n  return { type, Hf, pr, rim: K[K.length - 1][1], vb, vn };\n}\n\n// The steps of a throw, how long each takes at Speed 2, and how fast the\n// wheel turns through it (turns a second): slapped down, centred, opened,\n// three pulls, shaped, shown, wired off, lifted to the shelf, and the slump\n// and the balling up after a K1 tap.\nconst DUR = [0.45, 0.9, 0.5, 4.5, 2.6, 1.6, 0.9, 1.8, 1.2, 0.9];\nconst SPIN = [0.4, 1.3, 1.1, 0.95, 0.75, 0.65, 0.3, 0, 0.9, 1];\n// The cylinder after each pull, and its wall at the rim.\nconst RC = [12.5, 11.3, 10.5, 9.9], WALL_T = [4, 2.7, 2.1, 1.7];\nconst cyl = (k, h) => RC[k] - 0.012 * h + 1.4 * exp(-h / 2.2);\nconst dome = (v, r) => r * sqrt(max(0, 1 - v ** 2.4)) + 1.2 * exp(-v * 8);\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, rot: 0, w: 0.4, H: 11, ri: 0, wa: 0, wt: 0, yo: 0, sH: 11, sri: 0, n: 6, LX: 12, clay: 0,\n    pr: F32(128), snap: F32(128), f: F32(N * 3), bg: F32(N * 3),\n    hd: null, hs: null, g: null, wire: -1, pieces: [], sp: [], dr: [], free: 0, bgKey: -1,\n  });\n  P.spec = newSpec(-2);\n  // The pieces already on the shelves, newest first.\n  for (let i = 0; i \u003c 21; i++) P.pieces.push({ slot: ORDER[i], spec: newSpec(i ? P.pieces[i - 1].spec.type : -1, 1), dry: min(1, 0.1 + i * 0.17) });\n  // Old slip spattered in the pan.\n  for (let i = 0; i \u003c 60; i++) {\n    const a = rnd() * TAU, r = 0.66 + 0.3 * rnd();\n    P.sp.push(i \u003c 44 ? [CX + PR * r * sin(a), PY + PR * E * r * cos(a), rnd() \u003c 0.3 ? 2 : 1, 0.6 + 0.5 * rnd()] : [2 + rnd() * 60, PY + 8 + rnd() * 4, 1, 0.5 + 0.4 * rnd()]);\n  }\n  shape(P, 0);\n}\n\nfunction go(P, ph) {\n  // The oldest piece on show goes to the kiln and the new pot takes its place.\n  if (ph === 7) P.free = P.pieces.splice(min(P.n, P.pieces.length) - 1, 1)[0].slot;\n  if (ph === 0 && P.ph === 7) P.pieces.unshift({ slot: P.free, spec: P.spec, dry: 0 }), (P.spec = newSpec(P.spec.type));\n  P.snap.set(P.pr);\n  Object.assign(P, { ph, pt: 0, sH: P.H, sri: P.ri });\n}\n\nfunction fill(P, Hn, f) {\n  P.H = Hn;\n  for (let h = 0, n = min(126, ceil(Hn) + 2); h \u003c= n; h++) P.pr[h] = max(0, f(min(h, Hn)));\n}\nconst snapR = (P, v) => at(P.snap, v * P.sH, P.sH);\nconst offset = (P, h) => P.wa * sin(P.rot) + P.wt * (cl(h / P.H, 0, 1) ** 1.5) * sin(P.rot + 0.8);\n\n// The clay's wall for this moment of the throw, and where the hands are.\nfunction shape(P, p) {\n  const sp = P.spec;\n  let hand = null;\n  Object.assign(P, { wa: 0, wt: 0.2, yo: 0, g: null, wire: -1, ring: 0.07 });\n  switch (P.ph) {\n    case 0: {\n      // Slapped down from the hands, squashing as it lands.\n      const sq = p > 0.6 ? 1 - 0.3 * sin((PI * (p - 0.6)) / 0.4) : 1, r = 10.5 / sqrt(sq), Hn = 11 * sq;\n      P.yo = p \u003c 0.6 ? -56 * (1 - (p / 0.6) ** 2) : 0;\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 0.8), (P.ring = 0.04);\n      hand = [5, -0.3, 0];\n      break;\n    }\n    case 1: {\n      // Centred: coned up and pressed down again while the wobble dies.\n      const Hn = 11 + 10 * sin(PI * sm(0.1, 0.9, p)), r = 10.5 * sqrt(11 / Hn);\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 2.6 * (1 - sm(0, 0.8, p))), (P.ring = 0.05);\n      hand = [Hn * 0.42, -0.5 + 0.4 * sin(p * 20), 0];\n      break;\n    }\n    case 2: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 13, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), cyl(0, h), q));\n      (P.ri = (RC[0] - WALL_T[0]) * sm(0.15, 1, p)), (P.ring = 0.07);\n      hand = [Hn - 1.5, -0.2, 0];\n      break;\n    }\n    case 3: {\n      // Three pulls. The hands squeeze the wall from the base to the rim and\n      // a roll of clay rides up ahead of them.\n      const k = min(2, floor(P.pt / 1.5)), a = (P.pt - k * 1.5) / 1.2, Hp = sp.Hf * 0.93;\n      const HS = [13, mix(13, Hp, 0.55), mix(13, Hp, 0.82), Hp];\n      if (a \u003c= 1) {\n        const Hn = mix(HS[k], HS[k + 1], sm(0, 1, a)), hh = Hn * min(1, a * 1.04) * 0.95, roll = 1.3 * (1 - sm(0.9, 1, a));\n        fill(P, Hn, (h) => mix(cyl(k + 1, h), cyl(k, h), sm(hh - 1, hh + 2.5, h)) + roll * exp(-(((h - hh - 2.6) / 2.2) ** 2)) - 0.8 * exp(-(((h - hh) / 1.4) ** 2)));\n        P.ri = mix(RC[k] - WALL_T[k], RC[k + 1] - WALL_T[k + 1], sm(0.85, 1, a));\n        hand = [hh, -0.3, 0];\n      } else {\n        const Hn = HS[k + 1], b = (a - 1) / 0.25;\n        fill(P, Hn, (h) => cyl(k + 1, h));\n        P.ri = RC[k + 1] - WALL_T[k + 1];\n        hand = [mix(Hn * 0.95, 3, sm(0, 1, b)), 1.5 * sin(PI * b), 0];\n      }\n      break;\n    }\n    case 4: {\n      // Shaped: the belly pushed out from inside, then the neck collared in.\n      const q = sm(0, 1, p), Hn = mix(P.sH, sp.Hf, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), at(sp.pr, (h / Hn) * sp.Hf, sp.Hf), q));\n      P.ri = mix(P.sri, sp.rim - 1.4, q);\n      hand = [Hn * mix(sp.vb, sp.vn, sm(0.4, 0.75, p)), -0.2, 0];\n      break;\n    }\n    case 8: {\n      // Slumped: the wall sinks, bellies and flops round as the wheel turns.\n      const q = sm(0, 1, p), Hn = mix(P.sH, max(12, P.sH * 0.3), q ** 0.8);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), snapR(P, (h / Hn) * 0.6) * (1 + 0.7 * (h / Hn) ** 2) + (3 * h) / Hn, q));\n      P.ri = P.sri > 0 ? max(0, at(P.pr, Hn, Hn) - 1.8) : 0;\n      (P.wt = 6 * sin(PI * min(1, p * 1.3)) + 2), (P.wa = 1);\n      hand = [Hn * 0.5, 4 + 20 * sm(0, 0.3, p), 10 * sm(0, 0.3, p)];\n      break;\n    }\n    case 9: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 11, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), dome(h / Hn, 10.5), q));\n      (P.ri = P.sri * (1 - q)), (P.wa = 2.6), (P.wt = 2 * (1 - q)), (P.ring = 0.04);\n      hand = [Hn * 0.45, mix(6, -0.5, sm(0, 0.5, p)), 0];\n      break;\n    }\n    default: {\n      fill(P, sp.Hf, (h) => at(sp.pr, h, sp.Hf));\n      P.ri = sp.rim - 1.4;\n      // Shown: the hands come away.\n      if (P.ph === 5) hand = [sp.Hf * sp.vn, 2 + 30 * sm(0, 0.6, p), 22 * sm(0, 0.6, p)];\n      if (P.ph === 6) {\n        // Wired off: the hands come in to the wheel and draw the wire under.\n        const a = sm(0, 0.25, p), q = sm(0.25, 1, p), y = mix(BY + 20, BY + E * P.pr[0] * (1 - 2 * q) + 0.5, a);\n        P.wire = a \u003c 1 ? -1 : q;\n        P.hd = [CX - mix(40, 25, a), y, CX + mix(40, 25, a), y];\n        return;\n      }\n      if (P.ph === 7) {\n        // Lifted, then carried back to its slot on the shelf.\n        const q1 = sm(0, 0.3, p), q2 = sm(0.3, 1, p), [sx, sy] = SLOT[P.free], s = mix(1, SHS, q2 ** 0.6);\n        P.g = [mix(CX, sx, q2), mix(BY - 9 * q1, sy + 0.5, q2) - 14 * sin(PI * q2), s];\n        if (q2 \u003c 0.5) {\n          const r = sp.pr[3] * s, y = P.g[1] - 3 * s + 40 * sm(0.2, 0.5, q2);\n          P.hd = [P.g[0] - r, y, P.g[0] + r, y];\n        } else P.hd = null;\n        return;\n      }\n    }\n  }\n  if (hand) {\n    const [h, gap, dy] = hand, r = at(P.pr, h, P.H), o = offset(P, h), y = BY + P.yo - h + dy;\n    P.hd = [CX + o - r - gap, y, CX + o + r + gap, y];\n  } else P.hd = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.clay = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 6, 20));\n  P.LX = mix(9, 55, cl(k[3], 0, 1));\n  if (input.btnPressed && input.btnPressed[0] && P.ph >= 1 && P.ph \u003c= 5) go(P, 8);\n  if ((P.pt += d) >= DUR[P.ph]) go(P, [1, 2, 3, 4, 5, 6, 7, 0, 9, 1][P.ph]);\n  P.w += (SPIN[P.ph] - P.w) * min(1, d * 3);\n  P.rot += TAU * P.w * d;\n  const landing = P.ph === 0 && P.yo \u003c 0;\n  shape(P, P.pt / DUR[P.ph]);\n  // The hands follow their mark, easing over the big jumps between steps.\n  if (!P.hd) P.hs = null;\n  else if (!P.hs) P.hs = P.hd.slice();\n  else for (let i = 0; i \u003c 4; i++) abs(P.hd[i] - P.hs[i]) > 3 ? (P.hs[i] += (P.hd[i] - P.hs[i]) * min(1, d * 14)) : (P.hs[i] = P.hd[i]);\n\n  // Slip flung off the wall by the hands, and spattered as the lump lands.\n  const fling = (x, y, sd, n) => {\n    while (n--) P.dr.push([x, y, sd * (8 + rnd() * 26), -8 - rnd() * 26, PY - 4 + rnd() * 10]);\n  };\n  if (P.hs && (P.ph === 3 || P.ph === 4) && rnd() \u003c d * 3) rnd() \u003c 0.5 ? fling(P.hs[0], P.hs[1], -1, 1) : fling(P.hs[2], P.hs[3], 1, 1);\n  if (landing && P.yo === 0) fling(CX - 9, BY - 2, -1, 3), fling(CX + 9, BY - 2, 1, 3);\n  P.dr = P.dr.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 150 * d);\n    if (q[3] > 0 && q[1] >= q[4]) {\n      P.sp.push([q[0], q[1], rnd() \u003c 0.3 ? 2 : 1, 0.7 + 0.5 * rnd()]);\n      if (P.sp.length > 110) P.sp.shift();\n      return false;\n    }\n    return q[0] > -2 && q[0] \u003c W + 2;\n  });\n  for (const q of P.pieces) q.dry = min(1, q.dry + d / 75);\n}\n\n// The wall, the rack and the lamp's glow, kept until the lamp or the clay changes.\nfunction backdrop(P) {\n  P.bgKey = bgKey(P);\n  // Clay dust lies on everything in the room and takes the clay's colour.\n  const B = P.bg, LX = P.LX, dust = P.dust, wall = WALL.map((v, n) => mix(v, dust[n] * 0.4, 0.55)), wood = WOOD.map((v, n) => mix(v, dust[n] * 0.6, 0.35));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - LX, dy = y - 10, o = (y * W + x) * 3;\n      let f = 0.24 + 0.85 * exp(-(dx * dx + dy * dy * 0.3) / 1500), col = wall;\n      if (dy > 0) {\n        const cw = 4 + dy * 0.72;\n        f += 0.32 * sm(cw + 6, cw - 3, abs(dx)) * exp(-dy / 90);\n      }\n      f *= 0.9 + 0.16 * hash(x >> 1, y >> 1);\n      for (const sy of SHELF) {\n        if (y === sy) (col = wood), (f *= 1.35);\n        else if (y > sy && y \u003c= sy + 3) (col = wood), (f *= 0.75 + 0.15 * hash(x >> 2, sy));\n        else if (y > sy + 3 && y \u003c= sy + 6) f *= 0.45 + 0.17 * (y - sy - 4);\n      }\n      if ((x \u003c 2 || x > 61) && y \u003c SHELF[2] + 4) (col = wood), (f *= x === 1 || x === 62 ? 0.9 : 0.6);\n      const g = 0.55 * exp(-(dx * dx + (y - 10.5) ** 2) / 30);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f + [255, 196, 120][c] * g;\n    }\n}\n\n// The light from the lamp at a spot: its direction and how much reaches it.\nfunction light(P, x, y) {\n  const lx = cl((P.LX - x) / 24, -1.3, 1.3), ly = 0.3 + (y - 10) / 300, n = sqrt(lx * lx + ly * ly + 0.25);\n  return [lx / n, ly / n, 0.5 / n, 0.6 + 0.5 * exp(-((x - P.LX) ** 2 + ((y - 10) * 0.5) ** 2) / 1800)];\n}\n\nlet F;\nconst bgKey = (P) => round(P.LX * 8) * 64 + round(P.clay * 48);\n// A thrown shape turned on its axis, lit by the lamp: wall, rim and the\n// dark inside. Off-centre clay swings its axis round with the wheel.\nfunction solid(o) {\n  const { cx, by, s, pr, Hp, L, alb } = o, Hs = Hp * s, [l0, l1, l2, lm] = L;\n  let Rm = 0;\n  for (let i = 0; i \u003c= Hp + 1; i++) Rm = max(Rm, pr[i]);\n  Rm *= s;\n  const R = (h) => at(pr, h / s, Hp) * s, off = (h) => o.wa * o.s1 + o.wt * (cl(h / Hs, 0, 1) ** 1.5) * o.s2;\n  const RT = R(Hs), cT = cx + off(Hs), yT = by - Hs, ryT = E * RT + 0.35, ri = o.ri * s, ryi = E * ri + 0.25, wb = abs(o.wa) + abs(o.wt);\n  const hn = sqrt(l0 * l0 + l1 * l1 + (l2 + 1) ** 2), hx = l0 / hn, hy = l1 / hn, hz = (l2 + 1) / hn;\n  const y0 = max(0, floor(yT - ryT - 1)), y1 = min(H - 1, ceil(by + E * Rm + 1)), x0 = max(0, floor(cx - Rm - wb - 1)), x1 = min(W - 1, ceil(cx + Rm + wb + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, h0 = by - y - 0.5, ox = wb ? off(h0) : 0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx - ox, o3 = (y * W + x) * 3;\n      let h = h0, r = 0, u = 9, c = 0, k, sp = 0;\n      for (let it = 0; it \u003c 3; it++) {\n        r = R(h);\n        u = r > 0.05 ? px / r : 9;\n        c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n        h = h0 + E * r * c;\n      }\n      r = R(h);\n      u = r > 0.05 ? px / r : 9;\n      if (h >= 0 && h \u003c= Hs && u * u \u003c 1) {\n        c = sqrt(1 - u * u);\n        const hp = h / s, dR = (R(h + 0.6) - R(h - 0.6)) / 1.2 + o.ring * 2.03 * cos(hp * 2.03), nl = 1 / sqrt(1 + dR * dR);\n        const dif = max(0, (u * l0 - dR * l1 + c * l2) * nl), nh = max(0, (u * hx - dR * hy + c * hz) * nl);\n        k = (o.amb + 0.95 * dif + 0.2 * max(0, (-u * l0 + 0.4 * c) * nl)) * lm;\n        sp = o.spec * nh ** 40;\n        if (o.fl) {\n          // Slip streaks and grog flecks ride round with the wheel.\n          const az = asin(u) - o.rot, a = ((az % TAU) + TAU) % TAU, i = floor(a * 6.366), j = floor(hp / 2.3), q = hash(i, j);\n          const st = 1 + 0.1 * sin(3 * az + 1.3) + 0.07 * sin(5 * az + hp * 0.11);\n          k *= st;\n          sp *= st;\n          if (q \u003c 0.2 && abs(a - (i + 0.5) / 6.366) * r \u003c 0.7 && abs(hp - (j + 0.5) * 2.3) \u003c 0.75) k *= q \u003c 0.1 ? 1.5 : 0.55;\n        }\n      } else {\n        const ex = (x + 0.5 - cT) / RT, ey = (y + 0.5 - yT) / ryT;\n        if (RT \u003c 0.4 || ex * ex + ey * ey > 1) continue;\n        const ix = (x + 0.5 - cT) / (ri + 0.01), iy = (y + 0.5 - yT) / ryi;\n        if (ri > 0.4 && ix * ix + iy * iy \u003c 1) k = (0.05 + 0.42 * cl(-ix * l0 * 1.3 + 0.2, 0, 1) * (iy \u003c 0.3 ? 1 : 0.55)) * lm;\n        else (k = (0.3 + 0.8 * l1) * lm), (sp = o.spec * 0.3);\n      }\n      for (let n = 0; n \u003c 3; n++) F[o3 + n] = alb[n] * k + SHINE[n] * sp;\n    }\n}\n\n// The earlier pots on the shelves, wet and dark, then leather-hard, then pale.\nconst STILL = { s: SHS, wa: 0, wt: 0, s1: 0, s2: 0, rot: 0, ring: 0, fl: 0, amb: 0.38 };\nfunction shelves(P, C) {\n  // While a pot is carried over, its slot stands empty.\n  for (let i = 0; i \u003c min(P.n - (P.ph === 7), P.pieces.length); i++) {\n    const q = P.pieces[i], [sx, sy] = SLOT[q.slot], dr = q.dry, a = dr \u003c 0.45 ? dr / 0.45 : (dr - 0.45) / 0.55;\n    const alb = dr \u003c 0.45 ? C[0].map((v, n) => mix(v * 0.62, C[1][n], a)) : C[1].map((v, n) => mix(v, C[2][n], a));\n    solid({ ...STILL, cx: sx, by: sy + 0.5, pr: q.spec.pr, Hp: q.spec.Hf, ri: q.spec.rim - 1.4, alb, spec: 0.6 * (1 - sm(0, 0.4, dr)), L: light(P, sx, sy - 10) });\n  }\n}\n\nconst put = (x, y, col, k) => {\n  if ((x = round(x - 0.5)) >= 0 && x \u003c W && (y = round(y - 0.5)) >= 0 && y \u003c H) for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = col[c] * k;\n};\n\n// The lamp: a cord, an enamel shade and the bulb under it.\nfunction lamp(P) {\n  for (let y = 0; y \u003c 12; y++)\n    for (let x = max(0, floor(P.LX - 8)); x \u003c= min(W - 1, P.LX + 8); x++) {\n      const dx = x + 0.5 - P.LX;\n      if (abs(dx) >= (y \u003c 3 ? 0.6 : y \u003c 10 ? 1.3 + (y - 3) * 0.85 : y \u003c 11 ? 2.4 : 1.2)) continue;\n      const k = y > 2 && y \u003c 9 ? 0.7 + 0.6 * (1 - (y - 3) / 6) * (dx \u003c 0 ? 1 : 0.6) : 1;\n      put(x + 0.5, y + 0.5, y \u003c 3 ? [44, 38, 34] : y \u003c 9 ? [38, 72, 62] : [[236, 170, 96], [255, 244, 214], [255, 226, 168]][y - 9], k);\n    }\n}\n\n// The pot's shadow thrown on the wall behind, leaning away from the lamp.\nfunction shadow(P) {\n  for (let y = max(0, floor(BY - P.H - 6)); y \u003c 106; y++) {\n    const h = BY + 4 - y;\n    if (h \u003c 0 || h > P.H) continue;\n    const r = at(P.pr, h, P.H) * 1.08, xc = CX + (CX - P.LX) * (0.12 + h * 0.007);\n    for (let x = max(0, floor(xc - r - 2)); x \u003c= min(W - 1, xc + r + 2); x++) {\n      const k = 1 - 0.5 * sm(r + 1.5, r - 1, abs(x + 0.5 - xc)), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n}\n\n// The splash pan with its slip, and the wheel head turning in it.\nfunction wheel(P, A) {\n  const [l0, l1, l2, lm] = light(P, CX, PY), mt = METAL.map((v, n) => mix(v, A[n], 0.7)), side = (z) => 0.15 + 0.8 * max(0, z * l0 + sqrt(max(0, 1 - z * z)) * l2);\n  for (let y = 100; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ex = (x + 0.5 - CX) / PR, ey = (y + 0.5 - PY) / (PR * E), dd = ex * ex + ey * ey, o = (y * W + x) * 3;\n      const wx = (x + 0.5 - CX) / WR, wy = (y + 0.5 - BY) / (WR * E), wd = wx * wx + wy * wy;\n      let col, k;\n      if (wd \u003c 1) (col = mt), (k = (0.3 + 0.6 * l1) * lm * (0.9 + 0.1 * cos(sqrt(wd) * WR * 1.4)));\n      else if (wy > 0 && wx * wx \u003c 1 && y + 0.5 \u003c BY + WR * E * sqrt(1 - wx * wx) + 2.5) (col = METAL), (k = 0.5 * side(wx) * lm);\n      else if (dd \u003c 1) dd > 0.86 ? ((col = PLASTIC), (k = (0.6 + 0.6 * l1) * lm)) : ((col = A), (k = (ey \u003c 0 ? 0.26 + 0.12 * (1 + ey) : 0.4) * lm));\n      else if (ey > 0 && ex * ex \u003c 1 && y + 0.5 \u003c PY + PR * E * sqrt(1 - ex * ex) + 6) (col = PLASTIC), (k = side(ex) * lm);\n      else if (y > PY) (col = WALL), (k = 0.2);\n      else continue;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = col[c] * k;\n    }\n  // Slip spattered on the pan, then the wheel's own marks going round.\n  for (const [x, y, z, t] of P.sp) {\n    const ex = (x - CX) / WR, ey = (y - BY) / (WR * E);\n    if (ex * ex + ey * ey \u003c 1.1) continue;\n    put(x, y, A, 0.5 * t * lm);\n    if (z > 1) put(x + 1, y, A, 0.4 * t * lm);\n  }\n  for (let j = 0; j \u003c 6; j++) {\n    const a = P.rot + j * 1.9, r = j \u003c 2 ? 16 : 11.5 + j * 1.6;\n    put(CX + r * sin(a) + 0.5, BY + E * r * cos(a) + 0.5, j \u003c 2 ? [20, 20, 22] : A, j \u003c 2 ? 1 : 0.85 * lm);\n  }\n}\n\n// Skin lit by the lamp, round in section.\nfunction cap(ax, ay, bx, by, ra, rb, col, L, tip) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6, rm = max(ra, rb) + 1;\n  for (let y = max(0, floor(min(ay, by) - rm)); y \u003c= min(H - 1, max(ay, by) + rm); y++)\n    for (let x = max(0, floor(min(ax, bx) - rm)); x \u003c= min(W - 1, max(ax, bx) + rm); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, r = mix(ra, rb, t), dd = ex * ex + ey * ey;\n      if (dd > r * r) continue;\n      const nz = sqrt(1 - dd / (r * r)), k = (0.16 + 0.9 * max(0, (ex / r) * L[0] - (ey / r) * L[1] + nz * L[2])) * L[3], C = tip && t > 0.5 ? tip : col, o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = C[c] * k;\n    }\n}\n\n// A hand on the clay at x, y: the sleeve and forearm down to the side, the\n// back of the hand, the fingers round the wall with slip on them, the thumb.\nfunction hand(P, sd, x, y, slip) {\n  const L = light(P, x, y);\n  cap(x + sd * 22, y + 26, x + sd * 46, y + 62, 5.6, 6.6, SLEEVE, L);\n  cap(x + sd * 6.5, y + 3.5, x + sd * 23, y + 27, 3.4, 4.6, SKIN, L);\n  cap(x + sd * 7.5, y + 3.5, x + sd * 3.2, y - 0.3, 3.6, 3.3, SKIN, L);\n  cap(x + sd * 3.2, y - 0.3, x - sd * 1.8, y + 0.8, 2.6, 2, SKIN, L, slip);\n  cap(x + sd * 3.8, y - 3, x + sd * 2.6, y - 4.4, 1.4, 1.2, SKIN, L, slip);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.pr) return;\n  F = P.f;\n  const c = P.clay * 3, i0 = min(2, floor(c)), f = c - i0, C = [0, 1, 2].map((j) => CLAY[i0][j].map((v, n) => mix(v, CLAY[i0 + 1][j][n], f))), A = C[0];\n  P.dust = C[2];\n  if (P.bgKey !== bgKey(P)) backdrop(P);\n  F.set(P.bg);\n  shelves(P, C);\n  lamp(P);\n  if (!P.g) shadow(P);\n  wheel(P, A);\n  const wire = (front) => {\n    if (P.wire \u003c 0 || !P.hs || P.wire \u003c 0.5 !== front) return;\n    for (let x = P.hs[0]; x \u003c= P.hs[2]; x++) put(x + 0.5, P.hs[1] + 0.5, [220, 222, 230], 0.9);\n  };\n  wire(false);\n  const [gx, gy, gs] = P.g || [CX, BY + P.yo, 1];\n  solid({ cx: gx, by: gy, s: gs, pr: P.pr, Hp: P.H, ri: P.ri, wa: P.wa, wt: P.wt, s1: sin(P.rot), s2: sin(P.rot + 0.8), rot: P.rot, alb: A, spec: 0.9, L: light(P, gx, gy - P.H * gs * 0.5), ring: P.ring, fl: 1, amb: 0.08 });\n  wire(true);\n  if (P.hs) {\n    const slip = SKIN.map((v, n) => mix(v, A[n], 0.6));\n    hand(P, -1, P.hs[0], P.hs[1], slip);\n    hand(P, 1, P.hs[2], P.hs[3], slip);\n  }\n  for (const [x, y] of P.dr) put(x, y, A, 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-potters-wheel","type":"code","name":"potters-wheel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Potter's Wheel\n// Family:  pottery\n// Idea:    At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after throwing a pot on the potter's wheel\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1\n//\n// Knob 1: Clay. The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it.\n// Knob 2: Speed. At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower.\n// Knob 3: Pots. How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln.\n// Knob 4: Lamp. Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it.\n// Buttons: K1 tap makes the wall slump, and the potter balls the clay up and centres it again.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, asin, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The wheel head's centre and radius, the splash pan round it, and the tilt\n// of the view: a circle r across on the wheel shows as an ellipse E * r tall.\nconst [CX, BY, E, WR, PR] = [32, 111, 0.21, 21, 34];\nconst PY = BY + 2.5;\n// Three shelf boards with seven slots each, the order the slots fill, and\n// the size a pot stands at on the shelf against its size on the wheel.\nconst SHELF = [26, 53, 80];\nconst SLOT = [];\nfor (const sy of SHELF) for (let i = 0; i \u003c 7; i++) SLOT.push([4.6 + i * 9.13, sy]);\nconst ORDER = [1, 5, 8, 12, 14, 20, 3, 9, 11, 0, 6, 7, 13, 15, 19, 2, 4, 10, 16, 18, 17];\nconst SHS = 0.27;\n\n// Each clay at every stage of drying, from thrown and wet to bone-dry.\nconst CLAY = [\n  [[255, 112, 56], [196, 96, 58], [238, 158, 108]],\n  [[236, 170, 104], [190, 148, 100], [244, 222, 182]],\n  [[194, 198, 206], [184, 184, 182], [250, 248, 240]],\n  [[110, 96, 96], [86, 80, 78], [156, 148, 142]],\n];\nconst SKIN = [150, 98, 76], WALL = [84, 62, 50], WOOD = [132, 90, 58], METAL = [150, 152, 156], PLASTIC = [76, 80, 90], SLEEVE = [58, 66, 86], SHINE = [255, 232, 196];\n\n// Pot shapes as a height and the radius at keys up the wall: cylinder, bottle,\n// vase with a belly and a flared lip, jar and trumpet vase on the wheel, and\n// bowls and cups from earlier in the evening on the shelves.\nconst SHAPES = [\n  (j) => [76 + 8 * j, [[0, 10.5], [0.45, 10.2 + j], [0.9, 9.6], [1, 11]]],\n  (j) => [84 + 8 * j, [[0, 11], [0.3, 14.5], [0.7, 4.2], [0.93, 4], [1, 5.6]]],\n  (j) => [82 + 8 * j, [[0, 8], [0.42, 15], [0.8, 5], [0.9, 5.4], [1, 9.5]]],\n  (j) => [76 + 6 * j, [[0, 8.5], [0.55, 15.5], [0.9, 9], [1, 10.5]]],\n  (j) => [86 + 6 * j, [[0, 9.5], [0.2, 9.8], [0.62, 5.5], [1, 14]]],\n  (j) => [26 + 6 * j, [[0, 7], [0.45, 14], [1, 19]]],\n  (j) => [40 + 6 * j, [[0, 9], [0.5, 11.5], [0.85, 10.5], [1, 12]]],\n];\nfunction key(K, v) {\n  let i = 0;\n  while (i \u003c K.length - 2 && v > K[i + 1][0]) i++;\n  return mix(K[i][1], K[i + 1][1], sm(K[i][0], K[i + 1][0], v));\n}\n// A radius looked up along a wall kept one entry per row.\nconst at = (pr, h, Hp, i) => ((h = cl(h, 0, Hp)), (i = h | 0), pr[i] + (pr[i + 1] - pr[i]) * (h - i));\nfunction newSpec(not, all) {\n  let type;\n  // The first throw of the night is always one of the three tallest.\n  do type = floor(rnd() * (all ? 7 : 5));\n  while (type === not || (not \u003c -1 && type % 3 === 0));\n  const [Hf, K0] = SHAPES[type](rnd()), g = 0.92 + 0.16 * rnd(), K = K0.map(([v, r]) => [v, r * g]);\n  const pr = F32(ceil(Hf) + 3);\n  for (let h = 0; h \u003c pr.length; h++) pr[h] = key(K, min(1, h / Hf)) + 1.4 * exp(-h / 2.2);\n  // Where the hands shape it: the belly, then the neck above.\n  let vb = 0.5, vn = 0.85, rb = 0, rn = 99;\n  for (const [v, r] of K) if (v > 0.1 && v \u003c 0.85 && r > rb) (rb = r), (vb = v);\n  for (const [v, r] of K) if (v > vb && v \u003c 1 && r \u003c rn) (rn = r), (vn = v);\n  return { type, Hf, pr, rim: K[K.length - 1][1], vb, vn };\n}\n\n// The steps of a throw, how long each takes at Speed 2, and how fast the\n// wheel turns through it (turns a second): slapped down, centred, opened,\n// three pulls, shaped, shown, wired off, lifted to the shelf, and the slump\n// and the balling up after a K1 tap.\nconst DUR = [0.45, 0.9, 0.5, 4.5, 2.6, 1.6, 0.9, 1.8, 1.2, 0.9];\nconst SPIN = [0.4, 1.3, 1.1, 0.95, 0.75, 0.65, 0.3, 0, 0.9, 1];\n// The cylinder after each pull, and its wall at the rim.\nconst RC = [12.5, 11.3, 10.5, 9.9], WALL_T = [4, 2.7, 2.1, 1.7];\nconst cyl = (k, h) => RC[k] - 0.012 * h + 1.4 * exp(-h / 2.2);\nconst dome = (v, r) => r * sqrt(max(0, 1 - v ** 2.4)) + 1.2 * exp(-v * 8);\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, rot: 0, w: 0.4, H: 11, ri: 0, wa: 0, wt: 0, yo: 0, sH: 11, sri: 0, n: 6, LX: 12, clay: 0,\n    pr: F32(128), snap: F32(128), f: F32(N * 3), bg: F32(N * 3),\n    hd: null, hs: null, g: null, wire: -1, pieces: [], sp: [], dr: [], free: 0, bgKey: -1,\n  });\n  P.spec = newSpec(-2);\n  // The pieces already on the shelves, newest first.\n  for (let i = 0; i \u003c 21; i++) P.pieces.push({ slot: ORDER[i], spec: newSpec(i ? P.pieces[i - 1].spec.type : -1, 1), dry: min(1, 0.1 + i * 0.17) });\n  // Old slip spattered in the pan.\n  for (let i = 0; i \u003c 60; i++) {\n    const a = rnd() * TAU, r = 0.66 + 0.3 * rnd();\n    P.sp.push(i \u003c 44 ? [CX + PR * r * sin(a), PY + PR * E * r * cos(a), rnd() \u003c 0.3 ? 2 : 1, 0.6 + 0.5 * rnd()] : [2 + rnd() * 60, PY + 8 + rnd() * 4, 1, 0.5 + 0.4 * rnd()]);\n  }\n  shape(P, 0);\n}\n\nfunction go(P, ph) {\n  // The oldest piece on show goes to the kiln and the new pot takes its place.\n  if (ph === 7) P.free = P.pieces.splice(min(P.n, P.pieces.length) - 1, 1)[0].slot;\n  if (ph === 0 && P.ph === 7) P.pieces.unshift({ slot: P.free, spec: P.spec, dry: 0 }), (P.spec = newSpec(P.spec.type));\n  P.snap.set(P.pr);\n  Object.assign(P, { ph, pt: 0, sH: P.H, sri: P.ri });\n}\n\nfunction fill(P, Hn, f) {\n  P.H = Hn;\n  for (let h = 0, n = min(126, ceil(Hn) + 2); h \u003c= n; h++) P.pr[h] = max(0, f(min(h, Hn)));\n}\nconst snapR = (P, v) => at(P.snap, v * P.sH, P.sH);\nconst offset = (P, h) => P.wa * sin(P.rot) + P.wt * (cl(h / P.H, 0, 1) ** 1.5) * sin(P.rot + 0.8);\n\n// The clay's wall for this moment of the throw, and where the hands are.\nfunction shape(P, p) {\n  const sp = P.spec;\n  let hand = null;\n  Object.assign(P, { wa: 0, wt: 0.2, yo: 0, g: null, wire: -1, ring: 0.07 });\n  switch (P.ph) {\n    case 0: {\n      // Slapped down from the hands, squashing as it lands.\n      const sq = p > 0.6 ? 1 - 0.3 * sin((PI * (p - 0.6)) / 0.4) : 1, r = 10.5 / sqrt(sq), Hn = 11 * sq;\n      P.yo = p \u003c 0.6 ? -56 * (1 - (p / 0.6) ** 2) : 0;\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 0.8), (P.ring = 0.04);\n      hand = [5, -0.3, 0];\n      break;\n    }\n    case 1: {\n      // Centred: coned up and pressed down again while the wobble dies.\n      const Hn = 11 + 10 * sin(PI * sm(0.1, 0.9, p)), r = 10.5 * sqrt(11 / Hn);\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 2.6 * (1 - sm(0, 0.8, p))), (P.ring = 0.05);\n      hand = [Hn * 0.42, -0.5 + 0.4 * sin(p * 20), 0];\n      break;\n    }\n    case 2: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 13, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), cyl(0, h), q));\n      (P.ri = (RC[0] - WALL_T[0]) * sm(0.15, 1, p)), (P.ring = 0.07);\n      hand = [Hn - 1.5, -0.2, 0];\n      break;\n    }\n    case 3: {\n      // Three pulls. The hands squeeze the wall from the base to the rim and\n      // a roll of clay rides up ahead of them.\n      const k = min(2, floor(P.pt / 1.5)), a = (P.pt - k * 1.5) / 1.2, Hp = sp.Hf * 0.93;\n      const HS = [13, mix(13, Hp, 0.55), mix(13, Hp, 0.82), Hp];\n      if (a \u003c= 1) {\n        const Hn = mix(HS[k], HS[k + 1], sm(0, 1, a)), hh = Hn * min(1, a * 1.04) * 0.95, roll = 1.3 * (1 - sm(0.9, 1, a));\n        fill(P, Hn, (h) => mix(cyl(k + 1, h), cyl(k, h), sm(hh - 1, hh + 2.5, h)) + roll * exp(-(((h - hh - 2.6) / 2.2) ** 2)) - 0.8 * exp(-(((h - hh) / 1.4) ** 2)));\n        P.ri = mix(RC[k] - WALL_T[k], RC[k + 1] - WALL_T[k + 1], sm(0.85, 1, a));\n        hand = [hh, -0.3, 0];\n      } else {\n        const Hn = HS[k + 1], b = (a - 1) / 0.25;\n        fill(P, Hn, (h) => cyl(k + 1, h));\n        P.ri = RC[k + 1] - WALL_T[k + 1];\n        hand = [mix(Hn * 0.95, 3, sm(0, 1, b)), 1.5 * sin(PI * b), 0];\n      }\n      break;\n    }\n    case 4: {\n      // Shaped: the belly pushed out from inside, then the neck collared in.\n      const q = sm(0, 1, p), Hn = mix(P.sH, sp.Hf, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), at(sp.pr, (h / Hn) * sp.Hf, sp.Hf), q));\n      P.ri = mix(P.sri, sp.rim - 1.4, q);\n      hand = [Hn * mix(sp.vb, sp.vn, sm(0.4, 0.75, p)), -0.2, 0];\n      break;\n    }\n    case 8: {\n      // Slumped: the wall sinks, bellies and flops round as the wheel turns.\n      const q = sm(0, 1, p), Hn = mix(P.sH, max(12, P.sH * 0.3), q ** 0.8);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), snapR(P, (h / Hn) * 0.6) * (1 + 0.7 * (h / Hn) ** 2) + (3 * h) / Hn, q));\n      P.ri = P.sri > 0 ? max(0, at(P.pr, Hn, Hn) - 1.8) : 0;\n      (P.wt = 6 * sin(PI * min(1, p * 1.3)) + 2), (P.wa = 1);\n      hand = [Hn * 0.5, 4 + 20 * sm(0, 0.3, p), 10 * sm(0, 0.3, p)];\n      break;\n    }\n    case 9: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 11, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), dome(h / Hn, 10.5), q));\n      (P.ri = P.sri * (1 - q)), (P.wa = 2.6), (P.wt = 2 * (1 - q)), (P.ring = 0.04);\n      hand = [Hn * 0.45, mix(6, -0.5, sm(0, 0.5, p)), 0];\n      break;\n    }\n    default: {\n      fill(P, sp.Hf, (h) => at(sp.pr, h, sp.Hf));\n      P.ri = sp.rim - 1.4;\n      // Shown: the hands come away.\n      if (P.ph === 5) hand = [sp.Hf * sp.vn, 2 + 30 * sm(0, 0.6, p), 22 * sm(0, 0.6, p)];\n      if (P.ph === 6) {\n        // Wired off: the hands come in to the wheel and draw the wire under.\n        const a = sm(0, 0.25, p), q = sm(0.25, 1, p), y = mix(BY + 20, BY + E * P.pr[0] * (1 - 2 * q) + 0.5, a);\n        P.wire = a \u003c 1 ? -1 : q;\n        P.hd = [CX - mix(40, 25, a), y, CX + mix(40, 25, a), y];\n        return;\n      }\n      if (P.ph === 7) {\n        // Lifted, then carried back to its slot on the shelf.\n        const q1 = sm(0, 0.3, p), q2 = sm(0.3, 1, p), [sx, sy] = SLOT[P.free], s = mix(1, SHS, q2 ** 0.6);\n        P.g = [mix(CX, sx, q2), mix(BY - 9 * q1, sy + 0.5, q2) - 14 * sin(PI * q2), s];\n        if (q2 \u003c 0.5) {\n          const r = sp.pr[3] * s, y = P.g[1] - 3 * s + 40 * sm(0.2, 0.5, q2);\n          P.hd = [P.g[0] - r, y, P.g[0] + r, y];\n        } else P.hd = null;\n        return;\n      }\n    }\n  }\n  if (hand) {\n    const [h, gap, dy] = hand, r = at(P.pr, h, P.H), o = offset(P, h), y = BY + P.yo - h + dy;\n    P.hd = [CX + o - r - gap, y, CX + o + r + gap, y];\n  } else P.hd = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.clay = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 6, 20));\n  P.LX = mix(9, 55, cl(k[3], 0, 1));\n  if (input.btnPressed && input.btnPressed[0] && P.ph >= 1 && P.ph \u003c= 5) go(P, 8);\n  if ((P.pt += d) >= DUR[P.ph]) go(P, [1, 2, 3, 4, 5, 6, 7, 0, 9, 1][P.ph]);\n  P.w += (SPIN[P.ph] - P.w) * min(1, d * 3);\n  P.rot += TAU * P.w * d;\n  const landing = P.ph === 0 && P.yo \u003c 0;\n  shape(P, P.pt / DUR[P.ph]);\n  // The hands follow their mark, easing over the big jumps between steps.\n  if (!P.hd) P.hs = null;\n  else if (!P.hs) P.hs = P.hd.slice();\n  else for (let i = 0; i \u003c 4; i++) abs(P.hd[i] - P.hs[i]) > 3 ? (P.hs[i] += (P.hd[i] - P.hs[i]) * min(1, d * 14)) : (P.hs[i] = P.hd[i]);\n\n  // Slip flung off the wall by the hands, and spattered as the lump lands.\n  const fling = (x, y, sd, n) => {\n    while (n--) P.dr.push([x, y, sd * (8 + rnd() * 26), -8 - rnd() * 26, PY - 4 + rnd() * 10]);\n  };\n  if (P.hs && (P.ph === 3 || P.ph === 4) && rnd() \u003c d * 3) rnd() \u003c 0.5 ? fling(P.hs[0], P.hs[1], -1, 1) : fling(P.hs[2], P.hs[3], 1, 1);\n  if (landing && P.yo === 0) fling(CX - 9, BY - 2, -1, 3), fling(CX + 9, BY - 2, 1, 3);\n  P.dr = P.dr.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 150 * d);\n    if (q[3] > 0 && q[1] >= q[4]) {\n      P.sp.push([q[0], q[1], rnd() \u003c 0.3 ? 2 : 1, 0.7 + 0.5 * rnd()]);\n      if (P.sp.length > 110) P.sp.shift();\n      return false;\n    }\n    return q[0] > -2 && q[0] \u003c W + 2;\n  });\n  for (const q of P.pieces) q.dry = min(1, q.dry + d / 75);\n}\n\n// The wall, the rack and the lamp's glow, kept until the lamp or the clay changes.\nfunction backdrop(P) {\n  P.bgKey = bgKey(P);\n  // Clay dust lies on everything in the room and takes the clay's colour.\n  const B = P.bg, LX = P.LX, dust = P.dust, wall = WALL.map((v, n) => mix(v, dust[n] * 0.4, 0.55)), wood = WOOD.map((v, n) => mix(v, dust[n] * 0.6, 0.35));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - LX, dy = y - 10, o = (y * W + x) * 3;\n      let f = 0.24 + 0.85 * exp(-(dx * dx + dy * dy * 0.3) / 1500), col = wall;\n      if (dy > 0) {\n        const cw = 4 + dy * 0.72;\n        f += 0.32 * sm(cw + 6, cw - 3, abs(dx)) * exp(-dy / 90);\n      }\n      f *= 0.9 + 0.16 * hash(x >> 1, y >> 1);\n      for (const sy of SHELF) {\n        if (y === sy) (col = wood), (f *= 1.35);\n        else if (y > sy && y \u003c= sy + 3) (col = wood), (f *= 0.75 + 0.15 * hash(x >> 2, sy));\n        else if (y > sy + 3 && y \u003c= sy + 6) f *= 0.45 + 0.17 * (y - sy - 4);\n      }\n      if ((x \u003c 2 || x > 61) && y \u003c SHELF[2] + 4) (col = wood), (f *= x === 1 || x === 62 ? 0.9 : 0.6);\n      const g = 0.55 * exp(-(dx * dx + (y - 10.5) ** 2) / 30);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f + [255, 196, 120][c] * g;\n    }\n}\n\n// The light from the lamp at a spot: its direction and how much reaches it.\nfunction light(P, x, y) {\n  const lx = cl((P.LX - x) / 24, -1.3, 1.3), ly = 0.3 + (y - 10) / 300, n = sqrt(lx * lx + ly * ly + 0.25);\n  return [lx / n, ly / n, 0.5 / n, 0.6 + 0.5 * exp(-((x - P.LX) ** 2 + ((y - 10) * 0.5) ** 2) / 1800)];\n}\n\nlet F;\nconst bgKey = (P) => round(P.LX * 8) * 64 + round(P.clay * 48);\n// A thrown shape turned on its axis, lit by the lamp: wall, rim and the\n// dark inside. Off-centre clay swings its axis round with the wheel.\nfunction solid(o) {\n  const { cx, by, s, pr, Hp, L, alb } = o, Hs = Hp * s, [l0, l1, l2, lm] = L;\n  let Rm = 0;\n  for (let i = 0; i \u003c= Hp + 1; i++) Rm = max(Rm, pr[i]);\n  Rm *= s;\n  const R = (h) => at(pr, h / s, Hp) * s, off = (h) => o.wa * o.s1 + o.wt * (cl(h / Hs, 0, 1) ** 1.5) * o.s2;\n  const RT = R(Hs), cT = cx + off(Hs), yT = by - Hs, ryT = E * RT + 0.35, ri = o.ri * s, ryi = E * ri + 0.25, wb = abs(o.wa) + abs(o.wt);\n  const hn = sqrt(l0 * l0 + l1 * l1 + (l2 + 1) ** 2), hx = l0 / hn, hy = l1 / hn, hz = (l2 + 1) / hn;\n  const y0 = max(0, floor(yT - ryT - 1)), y1 = min(H - 1, ceil(by + E * Rm + 1)), x0 = max(0, floor(cx - Rm - wb - 1)), x1 = min(W - 1, ceil(cx + Rm + wb + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, h0 = by - y - 0.5, ox = wb ? off(h0) : 0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx - ox, o3 = (y * W + x) * 3;\n      let h = h0, r = 0, u = 9, c = 0, k, sp = 0;\n      for (let it = 0; it \u003c 3; it++) {\n        r = R(h);\n        u = r > 0.05 ? px / r : 9;\n        c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n        h = h0 + E * r * c;\n      }\n      r = R(h);\n      u = r > 0.05 ? px / r : 9;\n      if (h >= 0 && h \u003c= Hs && u * u \u003c 1) {\n        c = sqrt(1 - u * u);\n        const hp = h / s, dR = (R(h + 0.6) - R(h - 0.6)) / 1.2 + o.ring * 2.03 * cos(hp * 2.03), nl = 1 / sqrt(1 + dR * dR);\n        const dif = max(0, (u * l0 - dR * l1 + c * l2) * nl), nh = max(0, (u * hx - dR * hy + c * hz) * nl);\n        k = (o.amb + 0.95 * dif + 0.2 * max(0, (-u * l0 + 0.4 * c) * nl)) * lm;\n        sp = o.spec * nh ** 40;\n        if (o.fl) {\n          // Slip streaks and grog flecks ride round with the wheel.\n          const az = asin(u) - o.rot, a = ((az % TAU) + TAU) % TAU, i = floor(a * 6.366), j = floor(hp / 2.3), q = hash(i, j);\n          const st = 1 + 0.1 * sin(3 * az + 1.3) + 0.07 * sin(5 * az + hp * 0.11);\n          k *= st;\n          sp *= st;\n          if (q \u003c 0.2 && abs(a - (i + 0.5) / 6.366) * r \u003c 0.7 && abs(hp - (j + 0.5) * 2.3) \u003c 0.75) k *= q \u003c 0.1 ? 1.5 : 0.55;\n        }\n      } else {\n        const ex = (x + 0.5 - cT) / RT, ey = (y + 0.5 - yT) / ryT;\n        if (RT \u003c 0.4 || ex * ex + ey * ey > 1) continue;\n        const ix = (x + 0.5 - cT) / (ri + 0.01), iy = (y + 0.5 - yT) / ryi;\n        if (ri > 0.4 && ix * ix + iy * iy \u003c 1) k = (0.05 + 0.42 * cl(-ix * l0 * 1.3 + 0.2, 0, 1) * (iy \u003c 0.3 ? 1 : 0.55)) * lm;\n        else (k = (0.3 + 0.8 * l1) * lm), (sp = o.spec * 0.3);\n      }\n      for (let n = 0; n \u003c 3; n++) F[o3 + n] = alb[n] * k + SHINE[n] * sp;\n    }\n}\n\n// The earlier pots on the shelves, wet and dark, then leather-hard, then pale.\nconst STILL = { s: SHS, wa: 0, wt: 0, s1: 0, s2: 0, rot: 0, ring: 0, fl: 0, amb: 0.38 };\nfunction shelves(P, C) {\n  // While a pot is carried over, its slot stands empty.\n  for (let i = 0; i \u003c min(P.n - (P.ph === 7), P.pieces.length); i++) {\n    const q = P.pieces[i], [sx, sy] = SLOT[q.slot], dr = q.dry, a = dr \u003c 0.45 ? dr / 0.45 : (dr - 0.45) / 0.55;\n    const alb = dr \u003c 0.45 ? C[0].map((v, n) => mix(v * 0.62, C[1][n], a)) : C[1].map((v, n) => mix(v, C[2][n], a));\n    solid({ ...STILL, cx: sx, by: sy + 0.5, pr: q.spec.pr, Hp: q.spec.Hf, ri: q.spec.rim - 1.4, alb, spec: 0.6 * (1 - sm(0, 0.4, dr)), L: light(P, sx, sy - 10) });\n  }\n}\n\nconst put = (x, y, col, k) => {\n  if ((x = round(x - 0.5)) >= 0 && x \u003c W && (y = round(y - 0.5)) >= 0 && y \u003c H) for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = col[c] * k;\n};\n\n// The lamp: a cord, an enamel shade and the bulb under it.\nfunction lamp(P) {\n  for (let y = 0; y \u003c 12; y++)\n    for (let x = max(0, floor(P.LX - 8)); x \u003c= min(W - 1, P.LX + 8); x++) {\n      const dx = x + 0.5 - P.LX;\n      if (abs(dx) >= (y \u003c 3 ? 0.6 : y \u003c 10 ? 1.3 + (y - 3) * 0.85 : y \u003c 11 ? 2.4 : 1.2)) continue;\n      const k = y > 2 && y \u003c 9 ? 0.7 + 0.6 * (1 - (y - 3) / 6) * (dx \u003c 0 ? 1 : 0.6) : 1;\n      put(x + 0.5, y + 0.5, y \u003c 3 ? [44, 38, 34] : y \u003c 9 ? [38, 72, 62] : [[236, 170, 96], [255, 244, 214], [255, 226, 168]][y - 9], k);\n    }\n}\n\n// The pot's shadow thrown on the wall behind, leaning away from the lamp.\nfunction shadow(P) {\n  for (let y = max(0, floor(BY - P.H - 6)); y \u003c 106; y++) {\n    const h = BY + 4 - y;\n    if (h \u003c 0 || h > P.H) continue;\n    const r = at(P.pr, h, P.H) * 1.08, xc = CX + (CX - P.LX) * (0.12 + h * 0.007);\n    for (let x = max(0, floor(xc - r - 2)); x \u003c= min(W - 1, xc + r + 2); x++) {\n      const k = 1 - 0.5 * sm(r + 1.5, r - 1, abs(x + 0.5 - xc)), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n}\n\n// The splash pan with its slip, and the wheel head turning in it.\nfunction wheel(P, A) {\n  const [l0, l1, l2, lm] = light(P, CX, PY), mt = METAL.map((v, n) => mix(v, A[n], 0.7)), side = (z) => 0.15 + 0.8 * max(0, z * l0 + sqrt(max(0, 1 - z * z)) * l2);\n  for (let y = 100; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ex = (x + 0.5 - CX) / PR, ey = (y + 0.5 - PY) / (PR * E), dd = ex * ex + ey * ey, o = (y * W + x) * 3;\n      const wx = (x + 0.5 - CX) / WR, wy = (y + 0.5 - BY) / (WR * E), wd = wx * wx + wy * wy;\n      let col, k;\n      if (wd \u003c 1) (col = mt), (k = (0.3 + 0.6 * l1) * lm * (0.9 + 0.1 * cos(sqrt(wd) * WR * 1.4)));\n      else if (wy > 0 && wx * wx \u003c 1 && y + 0.5 \u003c BY + WR * E * sqrt(1 - wx * wx) + 2.5) (col = METAL), (k = 0.5 * side(wx) * lm);\n      else if (dd \u003c 1) dd > 0.86 ? ((col = PLASTIC), (k = (0.6 + 0.6 * l1) * lm)) : ((col = A), (k = (ey \u003c 0 ? 0.26 + 0.12 * (1 + ey) : 0.4) * lm));\n      else if (ey > 0 && ex * ex \u003c 1 && y + 0.5 \u003c PY + PR * E * sqrt(1 - ex * ex) + 6) (col = PLASTIC), (k = side(ex) * lm);\n      else if (y > PY) (col = WALL), (k = 0.2);\n      else continue;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = col[c] * k;\n    }\n  // Slip spattered on the pan, then the wheel's own marks going round.\n  for (const [x, y, z, t] of P.sp) {\n    const ex = (x - CX) / WR, ey = (y - BY) / (WR * E);\n    if (ex * ex + ey * ey \u003c 1.1) continue;\n    put(x, y, A, 0.5 * t * lm);\n    if (z > 1) put(x + 1, y, A, 0.4 * t * lm);\n  }\n  for (let j = 0; j \u003c 6; j++) {\n    const a = P.rot + j * 1.9, r = j \u003c 2 ? 16 : 11.5 + j * 1.6;\n    put(CX + r * sin(a) + 0.5, BY + E * r * cos(a) + 0.5, j \u003c 2 ? [20, 20, 22] : A, j \u003c 2 ? 1 : 0.85 * lm);\n  }\n}\n\n// Skin lit by the lamp, round in section.\nfunction cap(ax, ay, bx, by, ra, rb, col, L, tip) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6, rm = max(ra, rb) + 1;\n  for (let y = max(0, floor(min(ay, by) - rm)); y \u003c= min(H - 1, max(ay, by) + rm); y++)\n    for (let x = max(0, floor(min(ax, bx) - rm)); x \u003c= min(W - 1, max(ax, bx) + rm); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, r = mix(ra, rb, t), dd = ex * ex + ey * ey;\n      if (dd > r * r) continue;\n      const nz = sqrt(1 - dd / (r * r)), k = (0.16 + 0.9 * max(0, (ex / r) * L[0] - (ey / r) * L[1] + nz * L[2])) * L[3], C = tip && t > 0.5 ? tip : col, o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = C[c] * k;\n    }\n}\n\n// A hand on the clay at x, y: the sleeve and forearm down to the side, the\n// back of the hand, the fingers round the wall with slip on them, the thumb.\nfunction hand(P, sd, x, y, slip) {\n  const L = light(P, x, y);\n  cap(x + sd * 22, y + 26, x + sd * 46, y + 62, 5.6, 6.6, SLEEVE, L);\n  cap(x + sd * 6.5, y + 3.5, x + sd * 23, y + 27, 3.4, 4.6, SKIN, L);\n  cap(x + sd * 7.5, y + 3.5, x + sd * 3.2, y - 0.3, 3.6, 3.3, SKIN, L);\n  cap(x + sd * 3.2, y - 0.3, x - sd * 1.8, y + 0.8, 2.6, 2, SKIN, L, slip);\n  cap(x + sd * 3.8, y - 3, x + sd * 2.6, y - 4.4, 1.4, 1.2, SKIN, L, slip);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.pr) return;\n  F = P.f;\n  const c = P.clay * 3, i0 = min(2, floor(c)), f = c - i0, C = [0, 1, 2].map((j) => CLAY[i0][j].map((v, n) => mix(v, CLAY[i0 + 1][j][n], f))), A = C[0];\n  P.dust = C[2];\n  if (P.bgKey !== bgKey(P)) backdrop(P);\n  F.set(P.bg);\n  shelves(P, C);\n  lamp(P);\n  if (!P.g) shadow(P);\n  wheel(P, A);\n  const wire = (front) => {\n    if (P.wire \u003c 0 || !P.hs || P.wire \u003c 0.5 !== front) return;\n    for (let x = P.hs[0]; x \u003c= P.hs[2]; x++) put(x + 0.5, P.hs[1] + 0.5, [220, 222, 230], 0.9);\n  };\n  wire(false);\n  const [gx, gy, gs] = P.g || [CX, BY + P.yo, 1];\n  solid({ cx: gx, by: gy, s: gs, pr: P.pr, Hp: P.H, ri: P.ri, wa: P.wa, wt: P.wt, s1: sin(P.rot), s2: sin(P.rot + 0.8), rot: P.rot, alb: A, spec: 0.9, L: light(P, gx, gy - P.H * gs * 0.5), ring: P.ring, fl: 1, amb: 0.08 });\n  wire(true);\n  if (P.hs) {\n    const slip = SKIN.map((v, n) => mix(v, A[n], 0.6));\n    hand(P, -1, P.hs[0], P.hs[1], slip);\n    hand(P, 1, P.hs[2], P.hs[3], slip);\n  }\n  for (const [x, y] of P.dr) put(x, y, A, 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Clay","min":0,"max":1,"about":"The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower."},{"name":"Pots","min":6,"max":20,"about":"How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it."}],"start":[0,2,6,0.06],"measures":{"motion":0.6649,"detail":0.0524,"edges":0.2558,"complexity":1.7276,"coverage":0.8999,"colour":0.2006,"drift":0.0739},"knobResponse":[0.0662,0.0422,0.05,0.1325]},{"slug":"powder-burst","title":"Powder Burst","family":"cosmetic","round":37,"note":"어두운 스튜디오 바닥의 파우더 케이크가 6.3초마다 좌우를 번갈아 맞아 터지고, 마젠타 파우더가 둥근 머리를 이고 4초쯤 만에 패널 꼭대기 언저리까지 솟아요. 머리는 고리로 말리며 버섯 꼴이 되고, 가장자리에서 고운 먼지가 말려 나가고 무거운 알갱이는 포물선을 그리며 떨어지고, 운모가 가끔 반짝여요. K3 은 머리를 패널보다 넓게 키워 위로 빠져나가게 하고, K4 는 운모를 한 번에 1,460조각까지 늘려요. 누르면 바로 케이크를 쳐요.","idea":"In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.","buttons":"K1 tap strikes the cake now.","code":"// ===== Patternflow pattern =====\n// Title:   Powder Burst\n// Family:  cosmetic\n// Idea:    In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after the slow-motion powder explosions of cosmetics advertising\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive.\n// Knob 2: Speed. How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower.\n// Knob 3: Force. How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90.\n// Knob 4: Shimmer. Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment.\n// Buttons: K1 tap strikes the cake now.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 9000;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Kinds of particle: fine powder, heavy specks, mica flakes.\nconst FINE = 0, SPECK = 1, MICA = 2;\n// Strikes alive at once, kept in a ring.\nconst NB = 4;\n// How far below the head the eye is (see draw), the share of grains drawn\n// round the axis rather than in the plane, how thick powder turns to light\n// (1 - exp(-GAIN d)), and the dust's mean life in seconds.\nconst TILT = 0.12, GAIN = 3.6, FILL = 0.5, LIFE = 6.2;\n// Small eddies: a stream function of four travelling waves, 19 to 44 LEDs\n// long, whose curl wrinkles the cloud's edge without bunching the powder.\nconst WAVES = [\n  [44, 0.4, 0.5],\n  [33, 2.1, -0.7],\n  [25, 3.9, 0.8],\n  [19, 5.1, -1.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 1.9];\n});\n// And a finer set, 8 to 13 LEDs, that only the young powder feels: it\n// wrinkles the head's edge into billows.\nconst FINE_WAVES = [\n  [13, 0.9, 2.2],\n  [10.5, 2.8, -2.6],\n  [8, 4.6, 3.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 2.3];\n});\nconst GS = 4, GX = W / GS + 3, GY = H / GS + 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), kd: F(MAXP), g: F(MAXP), w: F(MAXP), ph: F(MAXP), ca: F(MAXP), sa: F(MAXP),\n    kind: new Uint8Array(MAXP), bid: new Uint8Array(MAXP), n: 0,\n    B0: F(NB).fill(-99), BX: F(NB), BY: F(NB), BD: F(NB), BR: F(NB), BP: F(NB), slot: 0, ring: new Float64Array(NB * 7), nr: 0, fl: [0, 0],\n    U: F(GX * GY), V: F(GX * GY), U2: F(GX * GY), V2: F(GX * GY), D: F(N), O: F(N), S: F(N), G: F(N), tmp: F(N), col: F(12),\n    T: 0, next: 0, side: rnd() \u003c 0.5 ? -1 : 1, hue: 0, force: 0, shim: 0.06, started: false,\n  };\n}\n\n// A strike at x0: the cake sits on the floor at row 116.\nfunction strike(S, x0) {\n  const q = (S.slot = (S.slot + 1) % NB), f = S.force;\n  S.B0[q] = S.T;\n  S.BP[q] = 0;\n  S.BX[q] = x0;\n  S.BY[q] = 116;\n  // How far the head climbs, and how wide its ring opens.\n  S.BD[q] = (80 + 50 * f) * (0.92 + 0.16 * rnd());\n  S.BR[q] = (14.5 + 4.5 * f) * (0.9 + 0.2 * rnd());\n  const nf = 2600, ns = round((90 + 110 * f) * (0.8 + 0.4 * rnd())), nm = 60 + round(1400 * S.shim);\n  for (let j = 0; j \u003c nf + ns + nm && S.n \u003c MAXP; j++) {\n    const i = S.n++, kind = j \u003c nf ? FINE : j \u003c nf + ns ? SPECK : MICA;\n    S.x[i] = x0 + (rnd() - 0.5) * 5;\n    S.y[i] = 115 + (rnd() - 0.5) * 2;\n    S.age[i] = -rnd() * 0.06;\n    S.kind[i] = kind;\n    S.bid[i] = q;\n    S.ph[i] = rnd() * 2 * PI;\n    const az = rnd() * 2 * PI, fill = rnd() \u003c FILL;\n    S.ca[i] = fill ? cos(az) : 1;\n    S.sa[i] = fill ? sin(az) : 0;\n    if (kind === SPECK) {\n      // Specks are thrown out of the cake on steep arcs and fall back.\n      const a = (rnd() + rnd() + rnd() - 1.5) * 1.1, sp = (60 + 50 * rnd()) * (1 + 0.5 * f);\n      S.vx[i] = sp * sin(a);\n      S.vy[i] = -sp * cos(a);\n      S.kd[i] = 0.5 + 0.4 * rnd();\n      S.g[i] = 55 + 25 * rnd();\n      S.life[i] = 2.4 + rnd();\n      S.w[i] = 0.5 + 0.5 * rnd();\n      continue;\n    }\n    // Fine powder is thrown from the cake to a place round the head's\n    // start and comes to rest there in about 0.2 s, its throw halving every\n    // 0.04 to 0.06 s, so the head forms full: 16% round its two eddies, 40%\n    // in a dome over them. Another 22% is lofted over the next 0.6 s and\n    // drawn up behind as the stem, 10% is a skirt flung low along the floor\n    // and 12% a spray that fans out high.\n    const kd = (S.kd[i] = 12 + 6 * rnd()), u = rnd(), R = S.BR[q];\n    let tx, ty;\n    if (u \u003c 0.16) {\n      // Round the two eddies of the head, the hubs it rolls up on.\n      const g = gauss2();\n      tx = x0 + (rnd() \u003c 0.5 ? -R : R) + g[0] * 0.28 * R;\n      ty = 104 + g[1] * 0.28 * R;\n    } else if (u \u003c 0.56 || kind === MICA) {\n      // A thick dome over the head: as the head climbs its outside runs\n      // down round the eddies and curls in under the cap.\n      const t = PI * (1.05 + 0.9 * rnd()), r = 1 - 0.4 * rnd() * rnd();\n      tx = x0 + r * cos(t) * 1.75 * R;\n      ty = 104 + r * sin(t) * 1.45 * R;\n    } else if (u \u003c 0.78) {\n      tx = x0 + (rnd() - 0.5) * 10;\n      ty = 112 - 6 * rnd();\n      S.age[i] = -0.1 - 0.6 * rnd();\n    } else if (u \u003c 0.88) {\n      tx = x0 + (rnd() \u003c 0.5 ? -1 : 1) * (8 + 18 * rnd()) * (1 + 0.4 * f);\n      ty = 114 - 4 * rnd();\n    } else {\n      const a = (rnd() - 0.5) * 2.4, r = (24 + 30 * rnd()) * (1 + 0.4 * f);\n      tx = x0 + r * sin(a);\n      ty = 108 - r * cos(a);\n    }\n    S.vx[i] = (tx - S.x[i]) * kd;\n    S.vy[i] = (ty - S.y[i]) * kd;\n    S.g[i] = 0.4 + 1.2 * rnd();\n    S.life[i] = LIFE * (0.8 + 0.4 * rnd());\n    S.w[i] = 0.6 + 0.6 * rnd();\n  }\n}\n\nfunction gauss2() {\n  const r = sqrt(-2 * Math.log(1 - rnd())), t = 2 * PI * rnd();\n  return [r * cos(t), r * sin(t)];\n}\n\nfunction round(v) {\n  return floor(v + 0.5);\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.kd[i] = S.kd[j];\n  S.g[i] = S.g[j];\n  S.w[i] = S.w[j];\n  S.ph[i] = S.ph[j];\n  S.ca[i] = S.ca[j];\n  S.sa[i] = S.sa[j];\n  S.kind[i] = S.kind[j];\n  S.bid[i] = S.bid[j];\n}\n\n// The eddies on a grid every 4 LEDs, read off between.\nfunction eddies(S) {\n  const T = S.T;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U[gy * GX + gx] = u;\n      S.V[gy * GX + gx] = v;\n      u = 0;\n      v = 0;\n      for (const [kx, ky, w, m, ph] of FINE_WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U2[gy * GX + gx] = u;\n      S.V2[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, h) {\n  S.T += h;\n  S.next -= h;\n  if (S.next \u003c= 0) {\n    // Strikes alternate sides of the middle, 9 to 15 LEDs out.\n    S.side = -S.side;\n    strike(S, 32 + S.side * (9 + 6 * rnd()));\n    S.next = 6.3 * (0.95 + 0.1 * rnd());\n  }\n  eddies(S);\n  // Each strike's head: the plume's ring, seen edge on as two eddies of\n  // opposite spin R apart either side of its axis, climbing D rows on a\n  // curve that slows as it goes.\n  const ring = S.ring;\n  let nr = 0;\n  for (let q = 0; q \u003c NB; q++) {\n    // The head forms once the thrown powder has come to rest round it,\n    // 0.3 s after the strike, and gathers speed over a quarter second.\n    const a = S.T - S.B0[q] - 0.3;\n    if (a \u003c 0 || a > 7) continue;\n    const tau = 2.6, D = S.BD[q], V = ((D / tau) * exp(-a / tau) + 3) * sm(0, 0.25, a);\n    S.BP[q] += V * h;\n    // A third of the climb is the eddies' own: their strength is what moves\n    // a pair of cores 0.65 R wide at V / 3, 4.42 pi R V / 3. The rest is the\n    // warm air the head rides on, a broad rising blob that carries the\n    // cores at the same 2V / 3 as the powder round them; full-strength\n    // eddies rolled the dome into the cores within a second and the head\n    // read as two lobes.\n    const R = S.BR[q], rc = 0.65 * R, o = nr * 7;\n    ring[o] = S.BX[q];\n    ring[o + 1] = S.BY[q] - 12 - S.BP[q];\n    ring[o + 2] = R;\n    ring[o + 3] = rc * rc;\n    ring[o + 4] = (R * (4 + 0.4225) * V) / 6;\n    ring[o + 5] = ((2 * V) / 3) * exp(1 / (1.9 * 1.9));\n    ring[o + 6] = 30 * exp(-a / 2);\n    nr++;\n  }\n  S.nr = nr;\n  const fl = S.fl;\n  for (let i = S.n - 1; i >= 0; i--) {\n    let age = S.age[i];\n    if (age \u003c 0) {\n      S.age[i] = age + h;\n      continue;\n    }\n    age = S.age[i] += h;\n    const x = S.x[i], y = S.y[i];\n    if (age > S.life[i] || y > H + 6 || y \u003c -30 || x \u003c -20 || x > W + 20) {\n      kill(S, i);\n      continue;\n    }\n    if (S.kind[i] === SPECK) {\n      flow(S, x, y, -1);\n      const kd = 1 - exp(-S.kd[i] * h);\n      S.vx[i] += (fl[0] - S.vx[i]) * kd;\n      S.vy[i] += (fl[1] - S.vy[i]) * kd + S.g[i] * h;\n      S.x[i] = x + S.vx[i] * h;\n      S.y[i] = y + S.vy[i] * h;\n    } else {\n      // Fine powder rides the air exactly, plus what is left of the throw\n      // from the strike and a slow settling. Given inertia instead, as the\n      // specks have, it was flung out of the head's two eddies and the head\n      // read as a hollow arch. It is moved by the midpoint rule: a plain\n      // step turned each eddy's core, 19 radians a second, into an outward\n      // spiral, and the head showed two dark holes like eye sockets.\n      const kd = exp(-S.kd[i] * 0.5 * h), tx = S.vx[i] * kd, ty = S.vy[i] * kd + S.g[i] * min(1, age * 0.3);\n      flow(S, x, y, age);\n      flow(S, x + 0.5 * h * (fl[0] + tx), y + 0.5 * h * (fl[1] + ty), age);\n      S.x[i] = x + h * (fl[0] + tx) + (rnd() - 0.5) * 0.5;\n      S.y[i] = y + h * (fl[1] + ty) + (rnd() - 0.5) * 0.5;\n      S.vx[i] *= kd * kd;\n      S.vy[i] *= kd * kd;\n    }\n    // The floor: powder that comes down stays down.\n    if (S.y[i] > 118) {\n      S.y[i] = 118;\n      S.vy[i] *= -0.2;\n      S.vx[i] *= 0.6;\n    }\n  }\n}\n\n// The air at (x, y), into S.fl: the heads' eddies, the column of air still\n// rising under each head, and for powder (age 0 and up) the small eddies,\n// which grow as it ages and spreads.\nfunction flow(S, x, y, age) {\n  const ring = S.ring;\n  let ux = 0, uy = 0;\n  for (let r = 0; r \u003c S.nr; r++) {\n    const o = r * 7, xc = ring[o], yc = ring[o + 1], R = ring[o + 2], rc2 = ring[o + 3], G = ring[o + 4];\n    // Left eddy spins so its inside runs up, the right one the other way.\n    let dx = x - xc + R, dy = y - yc, q = -G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    dx = x - xc - R;\n    q = G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    // The warm air the head rides on.\n    const ex = (x - xc) / (1.9 * R), ey = (y - yc + 0.2 * R) / (1.7 * R);\n    uy -= ring[o + 5] * exp(-ex * ex - ey * ey);\n    // Under the head a column of air keeps rising after it, lifting the\n    // late powder into a stem.\n    if (y > yc) {\n      const sx = (x - xc) / 7;\n      uy -= ring[o + 6] * exp(-sx * sx);\n    }\n  }\n  if (age >= 0) {\n    const U = S.U, V = S.V;\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const eu = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const ev = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    const amp = 0.8 + 1.6 * min(1, age * 0.4), a2 = 9 * exp(-age * 0.7);\n    const U2 = S.U2, V2 = S.V2;\n    const fu = (U2[g] * (1 - ax) + U2[g + 1] * ax) * (1 - ay) + (U2[g + GX] * (1 - ax) + U2[g + GX + 1] * ax) * ay;\n    const fv = (V2[g] * (1 - ax) + V2[g + 1] * ax) * (1 - ay) + (V2[g + GX] * (1 - ax) + V2[g + GX + 1] * ax) * ay;\n    ux += eu * amp + fu * a2;\n    uy += ev * amp + fv * a2;\n  }\n  S.fl[0] = ux;\n  S.fl[1] = uy;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.force = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open 1.5 s after the first strike, the head already rising.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  const h = d * rate;\n  const sub = h > 0.025 ? 2 : 1;\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, O = S.O, SP = S.S, G = S.G, tmp = S.tmp, col = S.col, T = S.T, sh = S.shim;\n  D.fill(0);\n  O.fill(0);\n  SP.fill(0);\n  G.fill(0);\n  // The flow is worked out in one plane through the head's axis, and the\n  // cloud is round that axis, so half the grains are drawn at an angle of\n  // their own round it, seen from a little below, and half in the plane,\n  // which keeps the curls at the head's rim. All in the plane, the head\n  // showed two lobes with dark between them where the jet up the middle\n  // swept it clean; all round the axis, a smooth ball.\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / S.life[i], u2 = u * u, env = min(1, age * 12) * (1 - u2 * u2);\n    const kind = S.kind[i], ax = S.BX[S.bid[i]], r = S.x[i] - ax;\n    const x = ax + r * S.ca[i], y = S.y[i] + r * S.sa[i] * TILT;\n    if (kind === SPECK) splat(SP, x, y, S.w[i] * env);\n    else if (kind === MICA) {\n      // A flake only shows when it turns to the light: a swell a few times\n      // a second, sharpened so most of the time it is dark. Flakes add no\n      // body to the cloud, so Shimmer leaves its size alone.\n      const tw = 0.5 + 0.5 * sin(S.ph[i] + (3 + 2 * sin(S.ph[i] * 3)) * T);\n      const t4 = tw * tw * tw * tw;\n      splat(G, x, y, env * t4 * t4 * (0.8 + 1.2 * sh));\n    } else {\n      // Powder older than a second and a half goes into a softer layer,\n      // so the trails behind the head spread into haze.\n      const old = sm(1, 2.5, age);\n      if (old \u003c 1) splat(D, x, y, S.w[i] * env * (1 - old));\n      if (old > 0) splat(O, x, y, S.w[i] * env * old);\n    }\n  }\n  blur(D, tmp, 2);\n  blur(D, tmp, 1);\n  blur(O, tmp, 3);\n  blur(O, tmp, 2);\n  for (let p = 0; p \u003c N; p++) D[p] += O[p];\n  // Pigment, its pale lit side, the pearl tint mica gives the lit side, and\n  // the glint colour. Coral to lemon read brown and olive when dim, so there\n  // the pigment is paler. Elsewhere the pigment is laid at full saturation\n  // and only the lit side of thick powder goes pale: with an orchid pink at\n  // 0.82 and thick powder paling all over, the cloud's colourfulness was\n  // 0.231, and this way it is 0.393, beside Tunnel on the colour x drift\n  // map, since the cell where it first stood beside Bokeh took Heawood\n  // Torus first.\n  const h = S.hue + 0.84, hf = h - floor(h), warm = sm(0.0, 0.05, hf) * (1 - sm(0.17, 0.24, hf));\n  hsv(h, 1.0 - 0.32 * warm, 1, col, 0);\n  hsv(h - 0.02, 0.6 - 0.12 * warm, 1, col, 3);\n  hsv(h + 0.08, 0.15, 1, col, 6);\n  hsv(h + 0.2, 0.4, 1, col, 9);\n  // Warm powder's faint end is lifted too: a fading peach cloud read as\n  // milky coffee.\n  const gain = GAIN + 0.3 * warm, ga = 1 - 0.4 * warm;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const d = D[p], a = (1 - exp(-d * gain)) ** ga, s = min(1.4, SP[p]), g = G[p];\n      // The studio light is above and to the left: where the cloud thickens\n      // downward or rightward its surface faces the light. Without it the\n      // head was a flat blob of colour.\n      const dn = y \u003c H - 1 ? D[p + W] : d, up = y > 0 ? D[p - W] : d, rt = x \u003c W - 1 ? D[p + 1] : d, lf = x > 0 ? D[p - 1] : d;\n      const nrm = cl(((dn - up) * 0.8 + (rt - lf) * 0.4) / (d + 0.5), -1, 1), lit = 0.98 + 0.4 * nrm;\n      // Thin powder glows in the pigment, thick powder goes pale and bright,\n      // and with mica its lit side turns pearl.\n      const wt = a * a * cl(0.22 + 0.6 * nrm, 0, 1), pm = sh * 0.9 * cl(0.55 + nrm, 0, 1);\n      let r = 0, gg = 0, b = 0;\n      for (let c = 0; c \u003c 3; c++) {\n        const lc = col[3 + c] * (1 - pm) + col[9 + c] * pm, v = (col[c] * (1 - wt) + lc * wt) * a * lit;\n        // Specks are pigment, glints are light.\n        const o = v + col[c] * s * 0.8 + col[6 + c] * g;\n        if (c === 0) r = o;\n        else if (c === 1) gg = o;\n        else b = o;\n      }\n      if (warm > 0) {\n        // Dim peach and lemon read brown and olive, so as warm powder dims\n        // it greys toward a pale dust of the same level instead.\n        const m = max(r, gg, b), k = 0.9 * warm * sqrt(1 - min(1, m / 0.85));\n        r += (m - r) * k;\n        gg += (m - gg) * k;\n        b += (m - b) * k;\n      }\n      display.setPixel(x, y, knee(r * 255), knee(gg * 255), knee(b * 255));\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-powder-burst","type":"code","name":"powder-burst","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Powder Burst\n// Family:  cosmetic\n// Idea:    In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after the slow-motion powder explosions of cosmetics advertising\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive.\n// Knob 2: Speed. How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower.\n// Knob 3: Force. How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90.\n// Knob 4: Shimmer. Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment.\n// Buttons: K1 tap strikes the cake now.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 9000;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Kinds of particle: fine powder, heavy specks, mica flakes.\nconst FINE = 0, SPECK = 1, MICA = 2;\n// Strikes alive at once, kept in a ring.\nconst NB = 4;\n// How far below the head the eye is (see draw), the share of grains drawn\n// round the axis rather than in the plane, how thick powder turns to light\n// (1 - exp(-GAIN d)), and the dust's mean life in seconds.\nconst TILT = 0.12, GAIN = 3.6, FILL = 0.5, LIFE = 6.2;\n// Small eddies: a stream function of four travelling waves, 19 to 44 LEDs\n// long, whose curl wrinkles the cloud's edge without bunching the powder.\nconst WAVES = [\n  [44, 0.4, 0.5],\n  [33, 2.1, -0.7],\n  [25, 3.9, 0.8],\n  [19, 5.1, -1.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 1.9];\n});\n// And a finer set, 8 to 13 LEDs, that only the young powder feels: it\n// wrinkles the head's edge into billows.\nconst FINE_WAVES = [\n  [13, 0.9, 2.2],\n  [10.5, 2.8, -2.6],\n  [8, 4.6, 3.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 2.3];\n});\nconst GS = 4, GX = W / GS + 3, GY = H / GS + 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), kd: F(MAXP), g: F(MAXP), w: F(MAXP), ph: F(MAXP), ca: F(MAXP), sa: F(MAXP),\n    kind: new Uint8Array(MAXP), bid: new Uint8Array(MAXP), n: 0,\n    B0: F(NB).fill(-99), BX: F(NB), BY: F(NB), BD: F(NB), BR: F(NB), BP: F(NB), slot: 0, ring: new Float64Array(NB * 7), nr: 0, fl: [0, 0],\n    U: F(GX * GY), V: F(GX * GY), U2: F(GX * GY), V2: F(GX * GY), D: F(N), O: F(N), S: F(N), G: F(N), tmp: F(N), col: F(12),\n    T: 0, next: 0, side: rnd() \u003c 0.5 ? -1 : 1, hue: 0, force: 0, shim: 0.06, started: false,\n  };\n}\n\n// A strike at x0: the cake sits on the floor at row 116.\nfunction strike(S, x0) {\n  const q = (S.slot = (S.slot + 1) % NB), f = S.force;\n  S.B0[q] = S.T;\n  S.BP[q] = 0;\n  S.BX[q] = x0;\n  S.BY[q] = 116;\n  // How far the head climbs, and how wide its ring opens.\n  S.BD[q] = (80 + 50 * f) * (0.92 + 0.16 * rnd());\n  S.BR[q] = (14.5 + 4.5 * f) * (0.9 + 0.2 * rnd());\n  const nf = 2600, ns = round((90 + 110 * f) * (0.8 + 0.4 * rnd())), nm = 60 + round(1400 * S.shim);\n  for (let j = 0; j \u003c nf + ns + nm && S.n \u003c MAXP; j++) {\n    const i = S.n++, kind = j \u003c nf ? FINE : j \u003c nf + ns ? SPECK : MICA;\n    S.x[i] = x0 + (rnd() - 0.5) * 5;\n    S.y[i] = 115 + (rnd() - 0.5) * 2;\n    S.age[i] = -rnd() * 0.06;\n    S.kind[i] = kind;\n    S.bid[i] = q;\n    S.ph[i] = rnd() * 2 * PI;\n    const az = rnd() * 2 * PI, fill = rnd() \u003c FILL;\n    S.ca[i] = fill ? cos(az) : 1;\n    S.sa[i] = fill ? sin(az) : 0;\n    if (kind === SPECK) {\n      // Specks are thrown out of the cake on steep arcs and fall back.\n      const a = (rnd() + rnd() + rnd() - 1.5) * 1.1, sp = (60 + 50 * rnd()) * (1 + 0.5 * f);\n      S.vx[i] = sp * sin(a);\n      S.vy[i] = -sp * cos(a);\n      S.kd[i] = 0.5 + 0.4 * rnd();\n      S.g[i] = 55 + 25 * rnd();\n      S.life[i] = 2.4 + rnd();\n      S.w[i] = 0.5 + 0.5 * rnd();\n      continue;\n    }\n    // Fine powder is thrown from the cake to a place round the head's\n    // start and comes to rest there in about 0.2 s, its throw halving every\n    // 0.04 to 0.06 s, so the head forms full: 16% round its two eddies, 40%\n    // in a dome over them. Another 22% is lofted over the next 0.6 s and\n    // drawn up behind as the stem, 10% is a skirt flung low along the floor\n    // and 12% a spray that fans out high.\n    const kd = (S.kd[i] = 12 + 6 * rnd()), u = rnd(), R = S.BR[q];\n    let tx, ty;\n    if (u \u003c 0.16) {\n      // Round the two eddies of the head, the hubs it rolls up on.\n      const g = gauss2();\n      tx = x0 + (rnd() \u003c 0.5 ? -R : R) + g[0] * 0.28 * R;\n      ty = 104 + g[1] * 0.28 * R;\n    } else if (u \u003c 0.56 || kind === MICA) {\n      // A thick dome over the head: as the head climbs its outside runs\n      // down round the eddies and curls in under the cap.\n      const t = PI * (1.05 + 0.9 * rnd()), r = 1 - 0.4 * rnd() * rnd();\n      tx = x0 + r * cos(t) * 1.75 * R;\n      ty = 104 + r * sin(t) * 1.45 * R;\n    } else if (u \u003c 0.78) {\n      tx = x0 + (rnd() - 0.5) * 10;\n      ty = 112 - 6 * rnd();\n      S.age[i] = -0.1 - 0.6 * rnd();\n    } else if (u \u003c 0.88) {\n      tx = x0 + (rnd() \u003c 0.5 ? -1 : 1) * (8 + 18 * rnd()) * (1 + 0.4 * f);\n      ty = 114 - 4 * rnd();\n    } else {\n      const a = (rnd() - 0.5) * 2.4, r = (24 + 30 * rnd()) * (1 + 0.4 * f);\n      tx = x0 + r * sin(a);\n      ty = 108 - r * cos(a);\n    }\n    S.vx[i] = (tx - S.x[i]) * kd;\n    S.vy[i] = (ty - S.y[i]) * kd;\n    S.g[i] = 0.4 + 1.2 * rnd();\n    S.life[i] = LIFE * (0.8 + 0.4 * rnd());\n    S.w[i] = 0.6 + 0.6 * rnd();\n  }\n}\n\nfunction gauss2() {\n  const r = sqrt(-2 * Math.log(1 - rnd())), t = 2 * PI * rnd();\n  return [r * cos(t), r * sin(t)];\n}\n\nfunction round(v) {\n  return floor(v + 0.5);\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.kd[i] = S.kd[j];\n  S.g[i] = S.g[j];\n  S.w[i] = S.w[j];\n  S.ph[i] = S.ph[j];\n  S.ca[i] = S.ca[j];\n  S.sa[i] = S.sa[j];\n  S.kind[i] = S.kind[j];\n  S.bid[i] = S.bid[j];\n}\n\n// The eddies on a grid every 4 LEDs, read off between.\nfunction eddies(S) {\n  const T = S.T;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U[gy * GX + gx] = u;\n      S.V[gy * GX + gx] = v;\n      u = 0;\n      v = 0;\n      for (const [kx, ky, w, m, ph] of FINE_WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U2[gy * GX + gx] = u;\n      S.V2[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, h) {\n  S.T += h;\n  S.next -= h;\n  if (S.next \u003c= 0) {\n    // Strikes alternate sides of the middle, 9 to 15 LEDs out.\n    S.side = -S.side;\n    strike(S, 32 + S.side * (9 + 6 * rnd()));\n    S.next = 6.3 * (0.95 + 0.1 * rnd());\n  }\n  eddies(S);\n  // Each strike's head: the plume's ring, seen edge on as two eddies of\n  // opposite spin R apart either side of its axis, climbing D rows on a\n  // curve that slows as it goes.\n  const ring = S.ring;\n  let nr = 0;\n  for (let q = 0; q \u003c NB; q++) {\n    // The head forms once the thrown powder has come to rest round it,\n    // 0.3 s after the strike, and gathers speed over a quarter second.\n    const a = S.T - S.B0[q] - 0.3;\n    if (a \u003c 0 || a > 7) continue;\n    const tau = 2.6, D = S.BD[q], V = ((D / tau) * exp(-a / tau) + 3) * sm(0, 0.25, a);\n    S.BP[q] += V * h;\n    // A third of the climb is the eddies' own: their strength is what moves\n    // a pair of cores 0.65 R wide at V / 3, 4.42 pi R V / 3. The rest is the\n    // warm air the head rides on, a broad rising blob that carries the\n    // cores at the same 2V / 3 as the powder round them; full-strength\n    // eddies rolled the dome into the cores within a second and the head\n    // read as two lobes.\n    const R = S.BR[q], rc = 0.65 * R, o = nr * 7;\n    ring[o] = S.BX[q];\n    ring[o + 1] = S.BY[q] - 12 - S.BP[q];\n    ring[o + 2] = R;\n    ring[o + 3] = rc * rc;\n    ring[o + 4] = (R * (4 + 0.4225) * V) / 6;\n    ring[o + 5] = ((2 * V) / 3) * exp(1 / (1.9 * 1.9));\n    ring[o + 6] = 30 * exp(-a / 2);\n    nr++;\n  }\n  S.nr = nr;\n  const fl = S.fl;\n  for (let i = S.n - 1; i >= 0; i--) {\n    let age = S.age[i];\n    if (age \u003c 0) {\n      S.age[i] = age + h;\n      continue;\n    }\n    age = S.age[i] += h;\n    const x = S.x[i], y = S.y[i];\n    if (age > S.life[i] || y > H + 6 || y \u003c -30 || x \u003c -20 || x > W + 20) {\n      kill(S, i);\n      continue;\n    }\n    if (S.kind[i] === SPECK) {\n      flow(S, x, y, -1);\n      const kd = 1 - exp(-S.kd[i] * h);\n      S.vx[i] += (fl[0] - S.vx[i]) * kd;\n      S.vy[i] += (fl[1] - S.vy[i]) * kd + S.g[i] * h;\n      S.x[i] = x + S.vx[i] * h;\n      S.y[i] = y + S.vy[i] * h;\n    } else {\n      // Fine powder rides the air exactly, plus what is left of the throw\n      // from the strike and a slow settling. Given inertia instead, as the\n      // specks have, it was flung out of the head's two eddies and the head\n      // read as a hollow arch. It is moved by the midpoint rule: a plain\n      // step turned each eddy's core, 19 radians a second, into an outward\n      // spiral, and the head showed two dark holes like eye sockets.\n      const kd = exp(-S.kd[i] * 0.5 * h), tx = S.vx[i] * kd, ty = S.vy[i] * kd + S.g[i] * min(1, age * 0.3);\n      flow(S, x, y, age);\n      flow(S, x + 0.5 * h * (fl[0] + tx), y + 0.5 * h * (fl[1] + ty), age);\n      S.x[i] = x + h * (fl[0] + tx) + (rnd() - 0.5) * 0.5;\n      S.y[i] = y + h * (fl[1] + ty) + (rnd() - 0.5) * 0.5;\n      S.vx[i] *= kd * kd;\n      S.vy[i] *= kd * kd;\n    }\n    // The floor: powder that comes down stays down.\n    if (S.y[i] > 118) {\n      S.y[i] = 118;\n      S.vy[i] *= -0.2;\n      S.vx[i] *= 0.6;\n    }\n  }\n}\n\n// The air at (x, y), into S.fl: the heads' eddies, the column of air still\n// rising under each head, and for powder (age 0 and up) the small eddies,\n// which grow as it ages and spreads.\nfunction flow(S, x, y, age) {\n  const ring = S.ring;\n  let ux = 0, uy = 0;\n  for (let r = 0; r \u003c S.nr; r++) {\n    const o = r * 7, xc = ring[o], yc = ring[o + 1], R = ring[o + 2], rc2 = ring[o + 3], G = ring[o + 4];\n    // Left eddy spins so its inside runs up, the right one the other way.\n    let dx = x - xc + R, dy = y - yc, q = -G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    dx = x - xc - R;\n    q = G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    // The warm air the head rides on.\n    const ex = (x - xc) / (1.9 * R), ey = (y - yc + 0.2 * R) / (1.7 * R);\n    uy -= ring[o + 5] * exp(-ex * ex - ey * ey);\n    // Under the head a column of air keeps rising after it, lifting the\n    // late powder into a stem.\n    if (y > yc) {\n      const sx = (x - xc) / 7;\n      uy -= ring[o + 6] * exp(-sx * sx);\n    }\n  }\n  if (age >= 0) {\n    const U = S.U, V = S.V;\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const eu = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const ev = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    const amp = 0.8 + 1.6 * min(1, age * 0.4), a2 = 9 * exp(-age * 0.7);\n    const U2 = S.U2, V2 = S.V2;\n    const fu = (U2[g] * (1 - ax) + U2[g + 1] * ax) * (1 - ay) + (U2[g + GX] * (1 - ax) + U2[g + GX + 1] * ax) * ay;\n    const fv = (V2[g] * (1 - ax) + V2[g + 1] * ax) * (1 - ay) + (V2[g + GX] * (1 - ax) + V2[g + GX + 1] * ax) * ay;\n    ux += eu * amp + fu * a2;\n    uy += ev * amp + fv * a2;\n  }\n  S.fl[0] = ux;\n  S.fl[1] = uy;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.force = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open 1.5 s after the first strike, the head already rising.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  const h = d * rate;\n  const sub = h > 0.025 ? 2 : 1;\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, O = S.O, SP = S.S, G = S.G, tmp = S.tmp, col = S.col, T = S.T, sh = S.shim;\n  D.fill(0);\n  O.fill(0);\n  SP.fill(0);\n  G.fill(0);\n  // The flow is worked out in one plane through the head's axis, and the\n  // cloud is round that axis, so half the grains are drawn at an angle of\n  // their own round it, seen from a little below, and half in the plane,\n  // which keeps the curls at the head's rim. All in the plane, the head\n  // showed two lobes with dark between them where the jet up the middle\n  // swept it clean; all round the axis, a smooth ball.\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / S.life[i], u2 = u * u, env = min(1, age * 12) * (1 - u2 * u2);\n    const kind = S.kind[i], ax = S.BX[S.bid[i]], r = S.x[i] - ax;\n    const x = ax + r * S.ca[i], y = S.y[i] + r * S.sa[i] * TILT;\n    if (kind === SPECK) splat(SP, x, y, S.w[i] * env);\n    else if (kind === MICA) {\n      // A flake only shows when it turns to the light: a swell a few times\n      // a second, sharpened so most of the time it is dark. Flakes add no\n      // body to the cloud, so Shimmer leaves its size alone.\n      const tw = 0.5 + 0.5 * sin(S.ph[i] + (3 + 2 * sin(S.ph[i] * 3)) * T);\n      const t4 = tw * tw * tw * tw;\n      splat(G, x, y, env * t4 * t4 * (0.8 + 1.2 * sh));\n    } else {\n      // Powder older than a second and a half goes into a softer layer,\n      // so the trails behind the head spread into haze.\n      const old = sm(1, 2.5, age);\n      if (old \u003c 1) splat(D, x, y, S.w[i] * env * (1 - old));\n      if (old > 0) splat(O, x, y, S.w[i] * env * old);\n    }\n  }\n  blur(D, tmp, 2);\n  blur(D, tmp, 1);\n  blur(O, tmp, 3);\n  blur(O, tmp, 2);\n  for (let p = 0; p \u003c N; p++) D[p] += O[p];\n  // Pigment, its pale lit side, the pearl tint mica gives the lit side, and\n  // the glint colour. Coral to lemon read brown and olive when dim, so there\n  // the pigment is paler. Elsewhere the pigment is laid at full saturation\n  // and only the lit side of thick powder goes pale: with an orchid pink at\n  // 0.82 and thick powder paling all over, the cloud's colourfulness was\n  // 0.231, and this way it is 0.393, beside Tunnel on the colour x drift\n  // map, since the cell where it first stood beside Bokeh took Heawood\n  // Torus first.\n  const h = S.hue + 0.84, hf = h - floor(h), warm = sm(0.0, 0.05, hf) * (1 - sm(0.17, 0.24, hf));\n  hsv(h, 1.0 - 0.32 * warm, 1, col, 0);\n  hsv(h - 0.02, 0.6 - 0.12 * warm, 1, col, 3);\n  hsv(h + 0.08, 0.15, 1, col, 6);\n  hsv(h + 0.2, 0.4, 1, col, 9);\n  // Warm powder's faint end is lifted too: a fading peach cloud read as\n  // milky coffee.\n  const gain = GAIN + 0.3 * warm, ga = 1 - 0.4 * warm;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const d = D[p], a = (1 - exp(-d * gain)) ** ga, s = min(1.4, SP[p]), g = G[p];\n      // The studio light is above and to the left: where the cloud thickens\n      // downward or rightward its surface faces the light. Without it the\n      // head was a flat blob of colour.\n      const dn = y \u003c H - 1 ? D[p + W] : d, up = y > 0 ? D[p - W] : d, rt = x \u003c W - 1 ? D[p + 1] : d, lf = x > 0 ? D[p - 1] : d;\n      const nrm = cl(((dn - up) * 0.8 + (rt - lf) * 0.4) / (d + 0.5), -1, 1), lit = 0.98 + 0.4 * nrm;\n      // Thin powder glows in the pigment, thick powder goes pale and bright,\n      // and with mica its lit side turns pearl.\n      const wt = a * a * cl(0.22 + 0.6 * nrm, 0, 1), pm = sh * 0.9 * cl(0.55 + nrm, 0, 1);\n      let r = 0, gg = 0, b = 0;\n      for (let c = 0; c \u003c 3; c++) {\n        const lc = col[3 + c] * (1 - pm) + col[9 + c] * pm, v = (col[c] * (1 - wt) + lc * wt) * a * lit;\n        // Specks are pigment, glints are light.\n        const o = v + col[c] * s * 0.8 + col[6 + c] * g;\n        if (c === 0) r = o;\n        else if (c === 1) gg = o;\n        else b = o;\n      }\n      if (warm > 0) {\n        // Dim peach and lemon read brown and olive, so as warm powder dims\n        // it greys toward a pale dust of the same level instead.\n        const m = max(r, gg, b), k = 0.9 * warm * sqrt(1 - min(1, m / 0.85));\n        r += (m - r) * k;\n        gg += (m - gg) * k;\n        b += (m - b) * k;\n      }\n      display.setPixel(x, y, knee(r * 255), knee(gg * 255), knee(b * 255));\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower."},{"name":"Force","min":0,"max":1,"about":"How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90."},{"name":"Shimmer","min":0,"max":1,"about":"Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment."}],"start":[0,2,0,0.06],"measures":{"motion":0.285,"detail":0.0166,"edges":0.0495,"complexity":1.3583,"coverage":0.4791,"colour":0.3931,"drift":0.3981},"knobResponse":[0.3053,0.2228,0.1341,0.0525]},{"slug":"proscenium","title":"Proscenium","family":"stage","round":23,"note":"금박 프로시니엄 아래 붉은 벨벳 막이 플라이로 올라가면 달빛 바다나 숲, 밤 도시, 눈 내리는 마을을 그린 배경막이 드러나고, 브리지 조명의 빛줄기가 연무를 갈라요. 발레리나가 팔로 스폿을 받으며 도약해 무대를 건너고, 막이 내리면 막 앞에서 인사해요. 맨 아래에는 실크해트를 쓴 사람이 섞인 앞줄 관객의 뒤통수가 있어요.","idea":"A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.","buttons":"K1 tap brings the curtain in now, or takes it out again if it is in.","code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","layer":{"id":"layer-proscenium","type":"code","name":"proscenium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gel","min":0,"max":1,"about":"The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower."},{"name":"Scene","min":0,"max":3,"about":"The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one."},{"name":"Haze","min":0,"max":1,"about":"How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel."}],"start":[0,2,0,0.06],"measures":{"motion":0.1444,"detail":0.0876,"edges":0.3879,"complexity":1.7658,"coverage":0.8713,"colour":0.2563,"drift":0.0949},"knobResponse":[0.0636,0.1625,0.077,0.1771]},{"slug":"pulse-bars","title":"Pulse Bars","family":"rhythm","round":1,"note":"음악 없는 하이파이 미터예요. 작은 드럼 머신이 혼자 치고 막대는 그 소리를 듣는 듯 춤춰요.","idea":"A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.","buttons":"K1 tap grows the bars from the middle line both ways instead of from the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","layer":{"id":"layer-pulse-bars","type":"code","name":"pulse-bars","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour starts at the bass end; it climbs a third of the wheel to the treble end."},{"name":"Tempo","min":90,"max":180,"about":"Beats per minute of the drum machine, with sixteenth-note hats."},{"name":"Bars","min":8,"max":32,"about":"How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth."},{"name":"Decay","min":0,"max":1,"about":"How long each hit rings; low is tight and punchy, high swells and hangs."}],"start":[0,90,8,0.06],"measures":{"motion":0.7885,"detail":0.0861,"edges":0.9999,"complexity":0.1776,"coverage":0.2209,"colour":0.2463,"drift":0.1392},"knobResponse":[0.0897,0.0556,0.0615,0.0607]},{"slug":"rabbit-ears","title":"Rabbit Ears","family":"glitch","round":19,"note":"옛 TV 가 토끼 귀 안테나로 늦은 밤 일기예보를 잡아요. 신호가 흔들리면 진행자와 지도가 색을 잃고 눈 속으로 사라졌다가 블랭킹 띠와 함께 굴러 돌아오고, 오른쪽에는 고스트가 따라붙어요. K1 을 누르면 TV 를 쳐서 그림이 한 바퀴 굴러요.","idea":"An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.","buttons":"K1 tap slaps the side of the set: the hold slips and the picture rolls round once.","code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","layer":{"id":"layer-rabbit-ears","type":"code","name":"rabbit-ears","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between."},{"name":"Signal","min":0,"max":1,"about":"How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow."},{"name":"Ghost","min":0,"max":1,"about":"The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1."}],"start":[0,2,0,0.06],"measures":{"motion":2.2448,"detail":0.1335,"edges":0.365,"complexity":2.3725,"coverage":0.9855,"colour":0.1077,"drift":0.2857},"knobResponse":[0.1208,0.2747,0.0525,0.0711]},{"slug":"rainstorm","title":"Rainstorm","family":"weather","round":2,"note":"빗줄기가 128줄을 다 떨어져 물웅덩이에 고리를 남기고, 가끔 갈라진 번개가 구름을 찢으며 쏟아지는 비를 한순간 밝혀요.","idea":"Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.","buttons":"K1 tap strikes lightning now.","code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-rainstorm","type":"code","name":"rainstorm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the night, the cloud and the rain, starting from slate blue."},{"name":"Rain","min":0.2,"max":3,"about":"From a drizzle of a few slow drops to a downpour."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it."},{"name":"Storm","min":0,"max":1,"about":"How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs."}],"start":[0,2,0,0.06],"measures":{"motion":2.22,"detail":0.0685,"edges":0.8841,"complexity":0.6564,"coverage":0.3785,"colour":0.0656,"drift":0.2647},"knobResponse":[0.0545,0.1279,0.1012,0.1302]},{"slug":"rauzy-fractal","title":"Rauzy Fractal","family":"fractal","round":28,"note":"트리보나치 치환의 라우지 프랙탈이 세 크기의 제 사본으로 판을 덮고, 그 고정점으로 끝없이 들어가요. 타일은 자라 한 크기 위가 되고, 가운데서 퍼지는 고리가 가장 큰 타일을 세 조각으로 나눠요. 누르면 조각 셋이 저마다의 벡터로 미끄러져 같은 테두리 안에 다시 맞물려요.","idea":"The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.","buttons":"K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.","code":"// ===== Patternflow pattern =====\n// Title:   Rauzy Fractal\n// Family:  fractal\n// Idea:    The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Rauzy fractal of the tribonacci substitution (Gérard Rauzy, 1982), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three.\n// Knob 3: Depth. How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4.\n// Knob 4: Glow. At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground.\n// Buttons: K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64;\nconst { min, floor, ceil, sqrt, cos, sin, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The tribonacci constant TH, the real root of x^3 = x^2 + x + 1, and beta,\n// one of the other two roots, |beta| = 1/sqrt(TH) = 0.7374.\nlet TH = 2;\nfor (let i = 0; i \u003c 40; i++) TH -= (TH ** 3 - TH * TH - TH - 1) / (3 * TH * TH - 2 * TH - 1);\nconst BR = (1 - TH) / 2, BI = sqrt(1 / TH - BR * BR), BM = sqrt(BR * BR + BI * BI), BA = atan2(BI, BR);\n// The substitution 1 -> 12, 2 -> 13, 3 -> 1 counts letters with the matrix\n// M = [[1,1,1],[1,0,0],[0,1,0]]. A vector v of letter counts lands in the\n// contracting plane as z(v) = v1 + v2 (beta - 1) + v3 / beta, and z(M v) is\n// beta z(v). ZX, ZY are z of one letter 1, 2 or 3.\nconst ZX = [1, BR - 1, BR * TH], ZY = [0, BI, -BI * TH];\n// The lattice of z(v) with v1 + v2 + v3 = 0, spanned by z(e2 - e3), z(e3 - e1).\nconst AX = ZX[1] - ZX[2], AY = ZY[1] - ZY[2], BX = ZX[2] - 1, BY = ZY[2], DET = AX * BY - AY * BX;\n// The height along the expanding direction, h(v) = TH v1 + (TH^2 - TH) v2 + v3,\n// written as AL (v1 + v2 + v3) + HX Re z(v) + HY Im z(v).\nconst LH = [TH, TH * TH - TH, 1];\nconst [AL, HX, HY] = (() => {\n  const m = [0, 1, 2].map((j) => [1, ZX[j], ZY[j]]);\n  const d3 = (a, b, c) => a[0] * (b[1] * c[2] - b[2] * c[1]) - a[1] * (b[0] * c[2] - b[2] * c[0]) + a[2] * (b[0] * c[1] - b[1] * c[0]);\n  const D = d3(m[0], m[1], m[2]), col = (k) => m.map((r, j) => r.map((v, q) => (q === k ? LH[j] : v)));\n  return [0, 1, 2].map((k) => { const c = col(k); return d3(c[0], c[1], c[2]) / D; });\n})();\n\n// The fixed word 1213121121312... and where each prefix lands. A torus cell\n// (the plane modulo the lattice, G x G cells) remembers the letter after a\n// prefix landing in it and, two bits a letter, the letters of its ancestors\n// under the substitution: the piece, then the piece of the piece, sixteen\n// deep. KA, KB say which copy of the fractal the prefix fell in.\nconst G = 256, GM = G - 1, NW = 160000;\nconst CH = new Int32Array(G * G), KA = new Int8Array(G * G), KB = new Int8Array(G * G);\nlet HR0 = 1e9, HR1 = -1e9, MX = 0, MY = 0;\n{\n  const ch = new Int32Array(NW);\n  let n = 0;\n  for (let m = 0; n \u003c NW; m++) {\n    const a = ch[m] & 3, up = ch[m] \u003c\u003c 2;\n    ch[n++] = up;\n    if (a \u003c 2 && n \u003c NW) ch[n++] = up | (a + 1);\n  }\n  let x = 0, y = 0;\n  for (let i = 0; i \u003c NW; i++) {\n    const a = (x * BY - y * BX) / DET, b = (AX * y - AY * x) / DET, fa = floor(a), fb = floor(b);\n    const c = min(GM, floor((a - fa) * G)) + min(GM, floor((b - fb) * G)) * G;\n    CH[c] = ch[i];\n    KA[c] = fa;\n    KB[c] = fb;\n    const hr = HX * x + HY * y;\n    if (hr \u003c HR0) HR0 = hr;\n    if (hr > HR1) HR1 = hr;\n    const l = ch[i] & 3;\n    MX += x / NW;\n    MY += y / NW;\n    x += ZX[l];\n    y += ZY[l];\n  }\n}\n\n// The middle of R is MX, MY; R_1 = beta R, R_2 = beta^2 R + 1 and\n// R_3 = beta^3 R + beta + 1, and CEN holds their middles.\nconst CEN = [];\n{\n  let x = MX, y = MY;\n  for (let i = 0; i \u003c 3; i++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    CEN.push(x + (i > 0 ? 1 : 0) + (i > 1 ? BR : 0), y + (i > 1 ? BI : 0));\n  }\n}\n\n// The self-replicating tiling: a copy z(v) + R_i of piece i for every\n// v in Z^3 with 0 \u003c= h(v) \u003c h(e_i). The pieces are R scaled by beta, beta^2\n// and beta^3, so every tile is the fractal itself at one of three sizes.\n// For a point p, the copy of piece i holding it has z(v) = p - r with r in\n// R, and only two or three counts v1 + v2 + v3 = k can pass the height test.\nlet TCH = 0, TID = 0, TX = 0, TY = 0;\nfunction tile(px, py) {\n  const cp = HX * px + HY * py, k1 = (HR1 - cp + LH[0]) / AL;\n  for (let k = ceil((HR0 - cp) / AL - 1e-6); k \u003c= k1; k++) {\n    const qx = px - k, a = (qx * BY - py * BX) / DET, b = (AX * py - AY * qx) / DET;\n    const fa = floor(a), fb = floor(b), c = (floor((a - fa) * G) & GM) + (floor((b - fb) * G) & GM) * G;\n    const ta = fa - KA[c], tb = fb - KB[c], ch = CH[c], t = ch & 3;\n    const v1 = k - tb, v2 = ta, v3 = tb - ta, h = LH[0] * v1 + LH[1] * v2 + v3;\n    if (h >= 0 && h \u003c LH[t]) {\n      TCH = ch;\n      TID = ((v1 * 1024 + v2) * 1024 + v3) * 4 + t;\n      TX = v1 * ZX[0] + v2 * ZX[1] + v3 * ZX[2] + CEN[t * 2];\n      TY = v1 * ZY[0] + v2 * ZY[1] + v3 * ZY[2] + CEN[t * 2 + 1];\n      return t;\n    }\n  }\n  return -1;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// A tile's colour follows its age. The smallest tiles (copies of piece 3)\n// are young, piece 2 middle-aged, piece 1 old; a level of zoom later each\n// has grown into the next, and the old ones have split into three. Hue,\n// saturation and value at ages 0, 1 and 2; LUT holds them from age -1 to 2.5\n// for each of a tile's own three pieces, which turn the hue by PH and light\n// it by PV.\nconst AGE = [\n  [0.86, 0.8, 0.85],\n  [0.68, 0.85, 0.95],\n  [0.5, 0.9, 1],\n];\nconst PH = [0, 0.035, -0.03], PV = [1, 0.7, 0.48];\nconst LN = 71, LA = -1, LS = 0.05;\n\n// The domain exchange: piece j of R moves by z(e_j), and the three land in\n// R again. A tile of type t is R scaled by beta^(t+1), so its pieces move by\n// beta^(t+1) z(e_j), EV[t*6 + j*2].\nconst EV = [];\n{\n  let x = 1, y = 0;\n  for (let t = 0; t \u003c 3; t++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    for (let j = 0; j \u003c 3; j++) EV.push(x * ZX[j] - y * ZY[j], x * ZY[j] + y * ZX[j]);\n  }\n}\n\n// LEDs a unit of the plane at the start of a level, the turn of the view per\n// level (a turn of beta less a third of a full turn, so three levels close\n// the loop), how far the splitting ring runs in a level, and the exchange's\n// slide, hold and settle in seconds.\nconst S0 = 24, ROT = BA - (2 * PI) / 3, RING = 140, EX1 = 1.5, EX2 = 2.3, EXT = 3.3;\n\nexport function setup(params) {\n  params.s = { m: 0, f: 0, ex: -1, hue: 0, depth: 1, glow: 0.06, id: new Float64Array(N), buf: new Float32Array(N * 3), lut: new Float32Array(3 * LN * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.depth = cl(k[2], 1, 4);\n  P.glow = cl(k[3], 0, 1);\n  if (P.ex >= 0) {\n    P.ex += d;\n    if (P.ex > EXT) P.ex = -1;\n  } else {\n    P.f += d * cl(k[1], 0.2, 3) * 0.1;\n    if (P.f >= 1) (P.f -= 1), (P.m = (P.m + 1) % 3);\n    if (input.btnPressed && input.btnPressed[0]) P.ex = 0;\n  }\n}\n\n// The light of a point from the pieces it lies in, level by level from\n// letter kk down; a piece of type s splits again s + 1 letters lower.\nfunction tone(ch, kk, D) {\n  let v = 1;\n  for (let n = 2; n \u003c= 5 && kk \u003c 16; n++) {\n    const s = (ch >> (2 * kk)) & 3, w = cl(D + 1 - n, 0, 1) * 0.5;\n    v *= 1 - w * (1 - PV[s]);\n    kk += 1 + s;\n  }\n  return v;\n}\n\n// The colour of the plane point (px, py) into CR, CG, CB, and its tile (and\n// once split, its piece) into CID. Returns the tile's type, or -1 on the\n// rare point the table cannot place.\nlet CR = 0, CG = 0, CB = 0, CID = 0;\nfunction shade(px, py, f, ring, sc, D, lut) {\n  const t = tile(px, py);\n  if (t \u003c 0) return -1;\n  const ch = TCH, s1 = (ch >> (2 * t + 2)) & 3;\n  let a = t ? 2 - t + f : 2, v = tone(ch, t + 2 + s1, D), li = (s1 * LN + round((a - LA) / LS)) * 3;\n  CID = TID * 4;\n  if (t === 0) {\n    // An old tile splits as the ring passes its middle: each piece takes\n    // the colour of the young tile it becomes, with a flash.\n    const sp = cl((ring - sqrt(TX * TX + TY * TY) / sc) / 16, 0, 1);\n    if (sp > 0) {\n      const s2 = (ch >> (4 + 2 * s1)) & 3, a2 = 1 - s1 + f, v2 = tone(ch, 3 + s1 + s2, D) * (1 + 1.4 * sp * (1 - sp));\n      const l2 = (s2 * LN + cl(round((a2 - LA) / LS), 0, LN - 1)) * 3, u = 1 - sp;\n      CR = (lut[li] * v * u + lut[l2] * v2 * sp);\n      CG = (lut[li + 1] * v * u + lut[l2 + 1] * v2 * sp);\n      CB = (lut[li + 2] * v * u + lut[l2 + 2] * v2 * sp);\n      if (sp > 0.5) CID += s1 + 1;\n      return 0;\n    }\n  }\n  CR = lut[li] * v;\n  CG = lut[li + 1] * v;\n  CB = lut[li + 2] * v;\n  return t;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.f, sc = BM ** f / S0, an = ROT * f - ((2 * PI) / 3) * P.m, co = cos(an) * sc, si = sin(an) * sc;\n  const ID = P.id, buf = P.buf, lut = P.lut, D = P.depth, ring = (f - 0.04) * RING;\n  for (let s = 0; s \u003c 3; s++)\n    for (let i = 0; i \u003c LN; i++) {\n      const a = cl(LA + i * LS, 0, 2), j = min(1, floor(a)), u = a - j, A = AGE[j], B = AGE[j + 1], young = cl(1 + (LA + i * LS) * 0.4, 0.6, 1);\n      hsv(P.hue + A[0] + (B[0] - A[0]) * u + PH[s], A[1] + (B[1] - A[1]) * u, (A[2] + (B[2] - A[2]) * u) * young * PV[s], lut, (s * LN + i) * 3);\n    }\n  // While the pieces slide, each LED looks for a piece that has arrived on\n  // it: a point q of a type-t tile in piece j with q + slide = p.\n  const ex = P.ex, sl = ex \u003c 0 ? 0 : sstep(0, EX1, ex), back = ex \u003c 0 ? 1 : sstep(EX2, EXT, ex);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const X = x + 0.5 - CX, Y = y + 0.5 - CY, px = co * X - si * Y, py = si * X + co * Y, o = p * 3;\n      let r = 0, g = 0, b = 0, id = -1;\n      if (back \u003c 1)\n        for (let e = 0; e \u003c 18 && id \u003c 0; e += 2) {\n          const t = (e / 6) | 0;\n          if (shade(px - sl * EV[e], py - sl * EV[e + 1], f, ring, sc, D, lut) === t && ((TCH >> (2 * t + 2)) & 3) === (e % 6) / 2)\n            (r = CR), (g = CG), (b = CB), (id = TID * 32 + 1 + e);\n        }\n      if (back > 0 && (shade(px, py, f, ring, sc, D, lut) >= 0 || shade(px + 0.3 * sc, py, f, ring, sc, D, lut) >= 0)) {\n        r += (CR - r) * back;\n        g += (CG - g) * back;\n        b += (CB - b) * back;\n        if (back > 0.5) id = CID;\n      }\n      ID[p] = id;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  // A seam between tiles: dark at Glow 0, pale light at 1.\n  const gl = P.glow, dim = 1 - 0.55 * gl;\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const s = (x \u003c W - 1 && ID[p + 1] !== ID[p]) || (y \u003c H - 1 && ID[p + W] !== ID[p]), o = p * 3;\n      for (let c = 0; c \u003c 3; c++) {\n        const v = min(255, buf[o + c]) * dim;\n        buf[o + c] = s ? v * (0.12 + 0.3 * gl) + 170 * gl : v;\n      }\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-rauzy-fractal","type":"code","name":"rauzy-fractal","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rauzy Fractal\n// Family:  fractal\n// Idea:    The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Rauzy fractal of the tribonacci substitution (Gérard Rauzy, 1982), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three.\n// Knob 3: Depth. How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4.\n// Knob 4: Glow. At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground.\n// Buttons: K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64;\nconst { min, floor, ceil, sqrt, cos, sin, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The tribonacci constant TH, the real root of x^3 = x^2 + x + 1, and beta,\n// one of the other two roots, |beta| = 1/sqrt(TH) = 0.7374.\nlet TH = 2;\nfor (let i = 0; i \u003c 40; i++) TH -= (TH ** 3 - TH * TH - TH - 1) / (3 * TH * TH - 2 * TH - 1);\nconst BR = (1 - TH) / 2, BI = sqrt(1 / TH - BR * BR), BM = sqrt(BR * BR + BI * BI), BA = atan2(BI, BR);\n// The substitution 1 -> 12, 2 -> 13, 3 -> 1 counts letters with the matrix\n// M = [[1,1,1],[1,0,0],[0,1,0]]. A vector v of letter counts lands in the\n// contracting plane as z(v) = v1 + v2 (beta - 1) + v3 / beta, and z(M v) is\n// beta z(v). ZX, ZY are z of one letter 1, 2 or 3.\nconst ZX = [1, BR - 1, BR * TH], ZY = [0, BI, -BI * TH];\n// The lattice of z(v) with v1 + v2 + v3 = 0, spanned by z(e2 - e3), z(e3 - e1).\nconst AX = ZX[1] - ZX[2], AY = ZY[1] - ZY[2], BX = ZX[2] - 1, BY = ZY[2], DET = AX * BY - AY * BX;\n// The height along the expanding direction, h(v) = TH v1 + (TH^2 - TH) v2 + v3,\n// written as AL (v1 + v2 + v3) + HX Re z(v) + HY Im z(v).\nconst LH = [TH, TH * TH - TH, 1];\nconst [AL, HX, HY] = (() => {\n  const m = [0, 1, 2].map((j) => [1, ZX[j], ZY[j]]);\n  const d3 = (a, b, c) => a[0] * (b[1] * c[2] - b[2] * c[1]) - a[1] * (b[0] * c[2] - b[2] * c[0]) + a[2] * (b[0] * c[1] - b[1] * c[0]);\n  const D = d3(m[0], m[1], m[2]), col = (k) => m.map((r, j) => r.map((v, q) => (q === k ? LH[j] : v)));\n  return [0, 1, 2].map((k) => { const c = col(k); return d3(c[0], c[1], c[2]) / D; });\n})();\n\n// The fixed word 1213121121312... and where each prefix lands. A torus cell\n// (the plane modulo the lattice, G x G cells) remembers the letter after a\n// prefix landing in it and, two bits a letter, the letters of its ancestors\n// under the substitution: the piece, then the piece of the piece, sixteen\n// deep. KA, KB say which copy of the fractal the prefix fell in.\nconst G = 256, GM = G - 1, NW = 160000;\nconst CH = new Int32Array(G * G), KA = new Int8Array(G * G), KB = new Int8Array(G * G);\nlet HR0 = 1e9, HR1 = -1e9, MX = 0, MY = 0;\n{\n  const ch = new Int32Array(NW);\n  let n = 0;\n  for (let m = 0; n \u003c NW; m++) {\n    const a = ch[m] & 3, up = ch[m] \u003c\u003c 2;\n    ch[n++] = up;\n    if (a \u003c 2 && n \u003c NW) ch[n++] = up | (a + 1);\n  }\n  let x = 0, y = 0;\n  for (let i = 0; i \u003c NW; i++) {\n    const a = (x * BY - y * BX) / DET, b = (AX * y - AY * x) / DET, fa = floor(a), fb = floor(b);\n    const c = min(GM, floor((a - fa) * G)) + min(GM, floor((b - fb) * G)) * G;\n    CH[c] = ch[i];\n    KA[c] = fa;\n    KB[c] = fb;\n    const hr = HX * x + HY * y;\n    if (hr \u003c HR0) HR0 = hr;\n    if (hr > HR1) HR1 = hr;\n    const l = ch[i] & 3;\n    MX += x / NW;\n    MY += y / NW;\n    x += ZX[l];\n    y += ZY[l];\n  }\n}\n\n// The middle of R is MX, MY; R_1 = beta R, R_2 = beta^2 R + 1 and\n// R_3 = beta^3 R + beta + 1, and CEN holds their middles.\nconst CEN = [];\n{\n  let x = MX, y = MY;\n  for (let i = 0; i \u003c 3; i++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    CEN.push(x + (i > 0 ? 1 : 0) + (i > 1 ? BR : 0), y + (i > 1 ? BI : 0));\n  }\n}\n\n// The self-replicating tiling: a copy z(v) + R_i of piece i for every\n// v in Z^3 with 0 \u003c= h(v) \u003c h(e_i). The pieces are R scaled by beta, beta^2\n// and beta^3, so every tile is the fractal itself at one of three sizes.\n// For a point p, the copy of piece i holding it has z(v) = p - r with r in\n// R, and only two or three counts v1 + v2 + v3 = k can pass the height test.\nlet TCH = 0, TID = 0, TX = 0, TY = 0;\nfunction tile(px, py) {\n  const cp = HX * px + HY * py, k1 = (HR1 - cp + LH[0]) / AL;\n  for (let k = ceil((HR0 - cp) / AL - 1e-6); k \u003c= k1; k++) {\n    const qx = px - k, a = (qx * BY - py * BX) / DET, b = (AX * py - AY * qx) / DET;\n    const fa = floor(a), fb = floor(b), c = (floor((a - fa) * G) & GM) + (floor((b - fb) * G) & GM) * G;\n    const ta = fa - KA[c], tb = fb - KB[c], ch = CH[c], t = ch & 3;\n    const v1 = k - tb, v2 = ta, v3 = tb - ta, h = LH[0] * v1 + LH[1] * v2 + v3;\n    if (h >= 0 && h \u003c LH[t]) {\n      TCH = ch;\n      TID = ((v1 * 1024 + v2) * 1024 + v3) * 4 + t;\n      TX = v1 * ZX[0] + v2 * ZX[1] + v3 * ZX[2] + CEN[t * 2];\n      TY = v1 * ZY[0] + v2 * ZY[1] + v3 * ZY[2] + CEN[t * 2 + 1];\n      return t;\n    }\n  }\n  return -1;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// A tile's colour follows its age. The smallest tiles (copies of piece 3)\n// are young, piece 2 middle-aged, piece 1 old; a level of zoom later each\n// has grown into the next, and the old ones have split into three. Hue,\n// saturation and value at ages 0, 1 and 2; LUT holds them from age -1 to 2.5\n// for each of a tile's own three pieces, which turn the hue by PH and light\n// it by PV.\nconst AGE = [\n  [0.86, 0.8, 0.85],\n  [0.68, 0.85, 0.95],\n  [0.5, 0.9, 1],\n];\nconst PH = [0, 0.035, -0.03], PV = [1, 0.7, 0.48];\nconst LN = 71, LA = -1, LS = 0.05;\n\n// The domain exchange: piece j of R moves by z(e_j), and the three land in\n// R again. A tile of type t is R scaled by beta^(t+1), so its pieces move by\n// beta^(t+1) z(e_j), EV[t*6 + j*2].\nconst EV = [];\n{\n  let x = 1, y = 0;\n  for (let t = 0; t \u003c 3; t++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    for (let j = 0; j \u003c 3; j++) EV.push(x * ZX[j] - y * ZY[j], x * ZY[j] + y * ZX[j]);\n  }\n}\n\n// LEDs a unit of the plane at the start of a level, the turn of the view per\n// level (a turn of beta less a third of a full turn, so three levels close\n// the loop), how far the splitting ring runs in a level, and the exchange's\n// slide, hold and settle in seconds.\nconst S0 = 24, ROT = BA - (2 * PI) / 3, RING = 140, EX1 = 1.5, EX2 = 2.3, EXT = 3.3;\n\nexport function setup(params) {\n  params.s = { m: 0, f: 0, ex: -1, hue: 0, depth: 1, glow: 0.06, id: new Float64Array(N), buf: new Float32Array(N * 3), lut: new Float32Array(3 * LN * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.depth = cl(k[2], 1, 4);\n  P.glow = cl(k[3], 0, 1);\n  if (P.ex >= 0) {\n    P.ex += d;\n    if (P.ex > EXT) P.ex = -1;\n  } else {\n    P.f += d * cl(k[1], 0.2, 3) * 0.1;\n    if (P.f >= 1) (P.f -= 1), (P.m = (P.m + 1) % 3);\n    if (input.btnPressed && input.btnPressed[0]) P.ex = 0;\n  }\n}\n\n// The light of a point from the pieces it lies in, level by level from\n// letter kk down; a piece of type s splits again s + 1 letters lower.\nfunction tone(ch, kk, D) {\n  let v = 1;\n  for (let n = 2; n \u003c= 5 && kk \u003c 16; n++) {\n    const s = (ch >> (2 * kk)) & 3, w = cl(D + 1 - n, 0, 1) * 0.5;\n    v *= 1 - w * (1 - PV[s]);\n    kk += 1 + s;\n  }\n  return v;\n}\n\n// The colour of the plane point (px, py) into CR, CG, CB, and its tile (and\n// once split, its piece) into CID. Returns the tile's type, or -1 on the\n// rare point the table cannot place.\nlet CR = 0, CG = 0, CB = 0, CID = 0;\nfunction shade(px, py, f, ring, sc, D, lut) {\n  const t = tile(px, py);\n  if (t \u003c 0) return -1;\n  const ch = TCH, s1 = (ch >> (2 * t + 2)) & 3;\n  let a = t ? 2 - t + f : 2, v = tone(ch, t + 2 + s1, D), li = (s1 * LN + round((a - LA) / LS)) * 3;\n  CID = TID * 4;\n  if (t === 0) {\n    // An old tile splits as the ring passes its middle: each piece takes\n    // the colour of the young tile it becomes, with a flash.\n    const sp = cl((ring - sqrt(TX * TX + TY * TY) / sc) / 16, 0, 1);\n    if (sp > 0) {\n      const s2 = (ch >> (4 + 2 * s1)) & 3, a2 = 1 - s1 + f, v2 = tone(ch, 3 + s1 + s2, D) * (1 + 1.4 * sp * (1 - sp));\n      const l2 = (s2 * LN + cl(round((a2 - LA) / LS), 0, LN - 1)) * 3, u = 1 - sp;\n      CR = (lut[li] * v * u + lut[l2] * v2 * sp);\n      CG = (lut[li + 1] * v * u + lut[l2 + 1] * v2 * sp);\n      CB = (lut[li + 2] * v * u + lut[l2 + 2] * v2 * sp);\n      if (sp > 0.5) CID += s1 + 1;\n      return 0;\n    }\n  }\n  CR = lut[li] * v;\n  CG = lut[li + 1] * v;\n  CB = lut[li + 2] * v;\n  return t;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.f, sc = BM ** f / S0, an = ROT * f - ((2 * PI) / 3) * P.m, co = cos(an) * sc, si = sin(an) * sc;\n  const ID = P.id, buf = P.buf, lut = P.lut, D = P.depth, ring = (f - 0.04) * RING;\n  for (let s = 0; s \u003c 3; s++)\n    for (let i = 0; i \u003c LN; i++) {\n      const a = cl(LA + i * LS, 0, 2), j = min(1, floor(a)), u = a - j, A = AGE[j], B = AGE[j + 1], young = cl(1 + (LA + i * LS) * 0.4, 0.6, 1);\n      hsv(P.hue + A[0] + (B[0] - A[0]) * u + PH[s], A[1] + (B[1] - A[1]) * u, (A[2] + (B[2] - A[2]) * u) * young * PV[s], lut, (s * LN + i) * 3);\n    }\n  // While the pieces slide, each LED looks for a piece that has arrived on\n  // it: a point q of a type-t tile in piece j with q + slide = p.\n  const ex = P.ex, sl = ex \u003c 0 ? 0 : sstep(0, EX1, ex), back = ex \u003c 0 ? 1 : sstep(EX2, EXT, ex);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const X = x + 0.5 - CX, Y = y + 0.5 - CY, px = co * X - si * Y, py = si * X + co * Y, o = p * 3;\n      let r = 0, g = 0, b = 0, id = -1;\n      if (back \u003c 1)\n        for (let e = 0; e \u003c 18 && id \u003c 0; e += 2) {\n          const t = (e / 6) | 0;\n          if (shade(px - sl * EV[e], py - sl * EV[e + 1], f, ring, sc, D, lut) === t && ((TCH >> (2 * t + 2)) & 3) === (e % 6) / 2)\n            (r = CR), (g = CG), (b = CB), (id = TID * 32 + 1 + e);\n        }\n      if (back > 0 && (shade(px, py, f, ring, sc, D, lut) >= 0 || shade(px + 0.3 * sc, py, f, ring, sc, D, lut) >= 0)) {\n        r += (CR - r) * back;\n        g += (CG - g) * back;\n        b += (CB - b) * back;\n        if (back > 0.5) id = CID;\n      }\n      ID[p] = id;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  // A seam between tiles: dark at Glow 0, pale light at 1.\n  const gl = P.glow, dim = 1 - 0.55 * gl;\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const s = (x \u003c W - 1 && ID[p + 1] !== ID[p]) || (y \u003c H - 1 && ID[p + W] !== ID[p]), o = p * 3;\n      for (let c = 0; c \u003c 3; c++) {\n        const v = min(255, buf[o + c]) * dim;\n        buf[o + c] = s ? v * (0.12 + 0.3 * gl) + 170 * gl : v;\n      }\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three."},{"name":"Depth","min":1,"max":4,"about":"How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4."},{"name":"Glow","min":0,"max":1,"about":"At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground."}],"start":[0,2,1,0.06],"measures":{"motion":0.2887,"detail":0.0655,"edges":0.9038,"complexity":0.1892,"coverage":0.9988,"colour":0.5834,"drift":0.167},"knobResponse":[0.5259,0.2583,0.0944,0.2959]},{"slug":"reaction-diffusion","title":"Reaction Diffusion","family":"sim","round":1,"note":"두 물질이 번지고 먹고 먹히며 산호와 미로와 점박이를 길러요. K3 가 종을 바꿔요.","idea":"Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.","buttons":"K1 tap reseeds the dish.","code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","layer":{"id":"layer-reaction-diffusion","type":"code","name":"reaction-diffusion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the culture's colour around the wheel."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the culture grows; at 2 it runs 240 steps a second."},{"name":"Species","min":0,"max":5,"about":"Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms."},{"name":"Grain","min":0,"max":1,"about":"Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree."}],"start":[0,2,0,0.06],"measures":{"motion":0.0572,"detail":0.0825,"edges":0.3087,"complexity":2.0894,"coverage":0.7212,"colour":0.4058,"drift":0.1337},"knobResponse":[0.314,0.2095,0.2824,0.2879]},{"slug":"renyi-parking","title":"Rényi Parking","family":"data","round":35,"note":"128줄이 저마다 60 LED 길이의 거리이고, 6 LED 짜리 차가 아무 데나 와서 들어갈 틈이 있을 때만 서요. 거리는 위에서 빈 채로 들어와 내려가며 차고, 바닥에 닿으면 차 길이만 한 틈이 하나도 없이 72% 쯤 막혀요. 먼저 온 차는 하늘색, 마지막 틈에 끼어든 차는 금색이며 옆 눈금이 바닥을 떠난 거리 128개의 평균을 예측값 0.722 의 금색 눈금에 대 보고, K3 은 차 길이를 6~15 LED 로 바꾸고 K1 을 누르면 차가 다 왼쪽으로 밀려 줄마다 채운 몫만 한 막대가 돼요.","idea":"Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.","buttons":"K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.","code":"// ===== Patternflow pattern =====\n// Title:   Rényi Parking\n// Family:  data\n// Idea:    Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Rényi's parking problem (Alfréd Rényi, 1958), with its lattice form, Flory's dimers (Paul Flory, 1939)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1\n//\n// Knob 1: Hue. Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too.\n// Knob 2: Speed. How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes.\n// Knob 3: Length. The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it.\n// Knob 4: Lattice. Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street.\n// Buttons: K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.\n\nconst W = 64, H = 128, S = 60, MAXC = 32, GX = 61;\n// Rényi's constant, the share an endless street fills once jammed.\nconst C = 0.7475979202534114;\nconst { min, max, floor, ceil, round, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The street's own clock: t car arrivals have been tried per car length of\n// street by the time it has come down tau rows. It runs slowly at the top\n// and without end at row 127, so every street leaves the panel jammed.\n// With 6-LED cars a street is on average 0.29 full at row 42 (t = 0.45),\n// 0.54 at row 85 (t = 1.8) and 0.70 at row 120, and from there to the\n// bottom the few cars that still fit squeeze in: the slow end of the\n// filling, which on an endless street never stops.\nconst A = 0.9;\nconst clockAt = (tau) => (tau >= H - 1 ? Infinity : (A * tau) / (H - 1 - tau));\n\n// The mean number of cars a jammed street holds. Parked anywhere, a street\n// x car lengths long holds M(x), where M = 0 below 1 and\n// M(x) = 1 + 2/(x - 1) times the integral of M from 0 to x - 1, since the\n// first car splits the street into two streets of random length. That is\n// solved here in steps of 1/2048 of a car: 7.2236 cars at x = 10, the\n// 6-LED cars, a fill of 0.7224. Rényi's C (x + 1) - 1 agrees with it to\n// 1e-5 from x = 6 up and is 0.0045 cars low at x = 4. On a grid of N\n// points with k to a car the same split gives M(n) = 1 + 2/(n - k + 1)\n// times the sum of M(j) for j \u003c= n - k, summed exactly.\nfunction renyi(x) {\n  const h = 1 / 2048, n = round(x / h), one = 2048;\n  if (n \u003c one) return 0;\n  const m = new Float64Array(n + 1), area = new Float64Array(n + 1);\n  for (let i = one; i \u003c= n; i++) {\n    // area[i] is the integral of M from 1 to i h by trapezoids, M being 0\n    // below 1 and jumping to 1 there.\n    m[i] = i === one ? 1 : 1 + (2 / (i * h - 1)) * area[i - one];\n    if (i > one) area[i] = area[i - 1] + (h * (m[i] + m[i - 1])) / 2;\n  }\n  return m[n];\n}\nfunction predict(L, k) {\n  if (!k) return (renyi(S / L) * L) / S;\n  const N = floor((S * k) / L + 1e-9), m = new Float64Array(N + 1);\n  let sum = 0;\n  for (let n = 0; n \u003c= N; n++) {\n    if (n >= k) sum += m[n - k];\n    m[n] = n \u003c k ? 0 : 1 + (2 * sum) / (n - k + 1);\n  }\n  return (m[N] * L) / S;\n}\n\nfunction newStreet() {\n  return { pos: new Float32Array(MAXC), at: new Float32Array(MAXC), n: 0, L: 6, k: 0, F: 0, next: 0, last: 1 };\n}\n\n// Where a car can still stop: for every gap the start points that leave room\n// for it, as a length in LEDs (anywhere) or a count of grid points (on a\n// grid). With pick >= 0 it returns the start point that far into them.\n// rate() turns the total into tries that succeed per unit of the street's\n// clock: one try per car length of street, spread evenly.\nfunction feasible(st, pick) {\n  const { pos, n, L, k } = st;\n  let total = 0, start = 0;\n  if (!k) {\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? pos[i] : S, room = end - start - L;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return start + (pick - total);\n        total += room;\n      }\n      if (i \u003c n) start = pos[i] + L;\n    }\n  } else {\n    const d = L / k, N = floor((S * k) / L + 1e-9);\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? round(pos[i] / d) : N, room = end - start - k + 1;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return (start + floor(pick - total)) * d;\n        total += room;\n      }\n      if (i \u003c n) start = round(pos[i] / d) + k;\n    }\n  }\n  return pick >= 0 ? -1 : total;\n}\n\nconst rate = (st) => (st.k ? st.F / st.k : st.F / st.L);\n\nfunction reset(st, L, k, pred) {\n  st.n = 0;\n  st.L = L;\n  st.k = k;\n  // The share parked when the last car is due to come, so the colours run\n  // from the first car to the last whatever the length.\n  st.last = max(0.05, pred - L / S);\n  st.F = feasible(st, -1);\n  st.next = -log(1 - Math.random()) / rate(st);\n}\n\n// Run a street's clock on to t: a try that lands in a feasible stretch\n// parks a car at a uniform place in it. Tries that land anywhere else are\n// turned away and change nothing, so only the successes are drawn, at the\n// rate of the feasible stretch. Each car keeps the share of the street that\n// was already parked when it came.\nfunction advance(st, t) {\n  while (st.F > 0 && st.next \u003c= t) {\n    const x = feasible(st, Math.random() * st.F);\n    if (x \u003c 0) break;\n    let i = st.n;\n    while (i > 0 && st.pos[i - 1] > x) (st.pos[i] = st.pos[i - 1]), (st.at[i] = st.at[i - 1]), i--;\n    st.pos[i] = x;\n    st.at[i] = (st.n * st.L) / S;\n    st.n++;\n    st.F = feasible(st, -1);\n    if (st.F > 0) st.next += -log(1 - Math.random()) / rate(st);\n  }\n}\n\nexport function setup(params) {\n  const streets = [];\n  for (let i = 0; i \u003c H; i++) streets.push(newStreet());\n  params.s = {\n    streets, head: 0, phase: 0.5, primed: false,\n    hue: 0, speed: 2, L: 6, k: 0, pred: predict(6, 0),\n    // The fills of the last 128 jammed streets of the current length and\n    // grid, as they leave the bottom.\n    outs: new Float32Array(H), outN: 0, outI: 0,\n    pack: -1, rgb: new Float32Array(W * H * 3), pal: new Float32Array(33 * 3), palHue: NaN,\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 6, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const L = round(cl(kv[2], 6, 15)), g = cl(kv[3], 0, 1), k = g \u003c 0.07 ? 0 : max(1, round(1 / g));\n  if (L !== P.L || k !== P.k) {\n    P.L = L;\n    P.k = k;\n    P.pred = predict(L, k);\n    P.outN = P.outI = 0;\n  }\n  // The first frame fills the panel with streets at every stage, each run\n  // on to the clock of its row, so the picture starts whole.\n  if (!P.primed) {\n    for (let r = 0; r \u003c H; r++) {\n      const st = P.streets[(P.head + r) % H];\n      reset(st, L, k, P.pred);\n      advance(st, clockAt(r + P.phase));\n    }\n    P.primed = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.pack \u003c 0) P.pack = 0;\n  if (P.pack >= 0) {\n    // The tap: 0.6 s to pack, 3 s held, 0.6 s back; the streets wait.\n    P.pack += d;\n    if (P.pack >= 4.2) P.pack = -1;\n    return;\n  }\n  P.phase += d * P.speed * 2;\n  while (P.phase >= 1) {\n    P.phase -= 1;\n    // The jammed bottom street leaves and comes back empty at the top.\n    const bottom = P.streets[(P.head + H - 1) % H];\n    if (bottom.L === P.L && bottom.k === P.k) {\n      P.outs[P.outI] = (bottom.n * bottom.L) / S;\n      P.outI = (P.outI + 1) % H;\n      P.outN = min(H, P.outN + 1);\n    }\n    P.head = (P.head + H - 1) % H;\n    reset(bottom, L, k, P.pred);\n  }\n  for (let r = 0; r \u003c H; r++) advance(P.streets[(P.head + r) % H], clockAt(r + P.phase));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.primed) return;\n  const { rgb, pal } = P;\n  if (P.palHue !== P.hue) {\n    // 33 steps from the first car to come to the last: azure through\n    // violet and rose to gold, brighter as it goes, so the latecomers read\n    // first. Between orange and lime a dim car would read brown or olive,\n    // so there the dim end is lifted.\n    for (let i = 0; i \u003c= 32; i++) {\n      const u = i / 32, h = P.hue + 0.58 + 0.55 * u, band = max(0, 1 - abs(h - floor(h) - 0.14) / 0.13);\n      const v = 0.6 + 0.4 * u;\n      hsv(h, 0.75 - 0.1 * u, max(v, v + (0.92 - v) * band), pal, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  const e = P.pack \u003c 0 ? 0 : P.pack \u003c 0.6 ? sm(P.pack / 0.6) : P.pack \u003c 3.6 ? 1 : sm((4.2 - P.pack) / 0.6);\n  for (let r = 0; r \u003c H; r++) {\n    const st = P.streets[(P.head + r) % H], L = st.L;\n    for (let i = 0; i \u003c st.n; i++) {\n      // A car covers the LEDs whose centres fall inside it, less half an\n      // LED at each end: L - 1 LEDs and a dark one, so cars that touch\n      // still read as two.\n      const x = st.pos[i] + (i * L - st.pos[i]) * e, x0 = max(0, ceil(x)), x1 = min(S - 1, ceil(x + L - 1) - 1);\n      const c = min(32, round((st.at[i] / st.last) * 32)) * 3;\n      for (let px = x0; px \u003c= x1; px++) {\n        const q = (r * W + px) * 3;\n        (rgb[q] = pal[c]), (rgb[q + 1] = pal[c + 1]), (rgb[q + 2] = pal[c + 2]);\n      }\n    }\n  }\n  const gold = [];\n  hsv(P.hue + 0.13, 0.7, 1, gold, 0);\n  // Packed, the gold line stands at the predicted fill across the streets.\n  if (e > 0.5) {\n    const gx = min(S - 1, floor(P.pred * S));\n    for (let r = 0; r \u003c H; r++) {\n      const q = (r * W + gx) * 3;\n      (rgb[q] = gold[0]), (rgb[q + 1] = gold[1]), (rgb[q + 2] = gold[2]);\n    }\n  }\n  // The gauge, three LEDs wide, from a fill of 0.65 at the bottom to 1 at\n  // the top: a bar to the mean of the last jammed streets, a white tick at\n  // Rényi's constant for an endless street and a gold one at the\n  // prediction for this one.\n  const rowOf = (f) => cl(round(H - 1 - ((f - 0.65) / 0.35) * (H - 1)), 0, H - 1);\n  if (P.outN) {\n    let s = 0;\n    for (let i = 0; i \u003c P.outN; i++) s += P.outs[i];\n    const top = rowOf(s / P.outN);\n    for (let y = top; y \u003c H; y++)\n      for (let x = GX; x \u003c W; x++) {\n        const q = (y * W + x) * 3;\n        (rgb[q] = 0.36), (rgb[q + 1] = 0.4), (rgb[q + 2] = 0.5);\n      }\n  }\n  const tick = (f, c) => {\n    const y = rowOf(f);\n    for (let x = GX - 1; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = c[0]), (rgb[q + 1] = c[1]), (rgb[q + 2] = c[2]);\n    }\n  };\n  tick(C, [0.85, 0.85, 0.85]);\n  tick(P.pred, gold);\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-renyi-parking","type":"code","name":"renyi-parking","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rényi Parking\n// Family:  data\n// Idea:    Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Rényi's parking problem (Alfréd Rényi, 1958), with its lattice form, Flory's dimers (Paul Flory, 1939)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1\n//\n// Knob 1: Hue. Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too.\n// Knob 2: Speed. How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes.\n// Knob 3: Length. The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it.\n// Knob 4: Lattice. Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street.\n// Buttons: K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.\n\nconst W = 64, H = 128, S = 60, MAXC = 32, GX = 61;\n// Rényi's constant, the share an endless street fills once jammed.\nconst C = 0.7475979202534114;\nconst { min, max, floor, ceil, round, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The street's own clock: t car arrivals have been tried per car length of\n// street by the time it has come down tau rows. It runs slowly at the top\n// and without end at row 127, so every street leaves the panel jammed.\n// With 6-LED cars a street is on average 0.29 full at row 42 (t = 0.45),\n// 0.54 at row 85 (t = 1.8) and 0.70 at row 120, and from there to the\n// bottom the few cars that still fit squeeze in: the slow end of the\n// filling, which on an endless street never stops.\nconst A = 0.9;\nconst clockAt = (tau) => (tau >= H - 1 ? Infinity : (A * tau) / (H - 1 - tau));\n\n// The mean number of cars a jammed street holds. Parked anywhere, a street\n// x car lengths long holds M(x), where M = 0 below 1 and\n// M(x) = 1 + 2/(x - 1) times the integral of M from 0 to x - 1, since the\n// first car splits the street into two streets of random length. That is\n// solved here in steps of 1/2048 of a car: 7.2236 cars at x = 10, the\n// 6-LED cars, a fill of 0.7224. Rényi's C (x + 1) - 1 agrees with it to\n// 1e-5 from x = 6 up and is 0.0045 cars low at x = 4. On a grid of N\n// points with k to a car the same split gives M(n) = 1 + 2/(n - k + 1)\n// times the sum of M(j) for j \u003c= n - k, summed exactly.\nfunction renyi(x) {\n  const h = 1 / 2048, n = round(x / h), one = 2048;\n  if (n \u003c one) return 0;\n  const m = new Float64Array(n + 1), area = new Float64Array(n + 1);\n  for (let i = one; i \u003c= n; i++) {\n    // area[i] is the integral of M from 1 to i h by trapezoids, M being 0\n    // below 1 and jumping to 1 there.\n    m[i] = i === one ? 1 : 1 + (2 / (i * h - 1)) * area[i - one];\n    if (i > one) area[i] = area[i - 1] + (h * (m[i] + m[i - 1])) / 2;\n  }\n  return m[n];\n}\nfunction predict(L, k) {\n  if (!k) return (renyi(S / L) * L) / S;\n  const N = floor((S * k) / L + 1e-9), m = new Float64Array(N + 1);\n  let sum = 0;\n  for (let n = 0; n \u003c= N; n++) {\n    if (n >= k) sum += m[n - k];\n    m[n] = n \u003c k ? 0 : 1 + (2 * sum) / (n - k + 1);\n  }\n  return (m[N] * L) / S;\n}\n\nfunction newStreet() {\n  return { pos: new Float32Array(MAXC), at: new Float32Array(MAXC), n: 0, L: 6, k: 0, F: 0, next: 0, last: 1 };\n}\n\n// Where a car can still stop: for every gap the start points that leave room\n// for it, as a length in LEDs (anywhere) or a count of grid points (on a\n// grid). With pick >= 0 it returns the start point that far into them.\n// rate() turns the total into tries that succeed per unit of the street's\n// clock: one try per car length of street, spread evenly.\nfunction feasible(st, pick) {\n  const { pos, n, L, k } = st;\n  let total = 0, start = 0;\n  if (!k) {\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? pos[i] : S, room = end - start - L;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return start + (pick - total);\n        total += room;\n      }\n      if (i \u003c n) start = pos[i] + L;\n    }\n  } else {\n    const d = L / k, N = floor((S * k) / L + 1e-9);\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? round(pos[i] / d) : N, room = end - start - k + 1;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return (start + floor(pick - total)) * d;\n        total += room;\n      }\n      if (i \u003c n) start = round(pos[i] / d) + k;\n    }\n  }\n  return pick >= 0 ? -1 : total;\n}\n\nconst rate = (st) => (st.k ? st.F / st.k : st.F / st.L);\n\nfunction reset(st, L, k, pred) {\n  st.n = 0;\n  st.L = L;\n  st.k = k;\n  // The share parked when the last car is due to come, so the colours run\n  // from the first car to the last whatever the length.\n  st.last = max(0.05, pred - L / S);\n  st.F = feasible(st, -1);\n  st.next = -log(1 - Math.random()) / rate(st);\n}\n\n// Run a street's clock on to t: a try that lands in a feasible stretch\n// parks a car at a uniform place in it. Tries that land anywhere else are\n// turned away and change nothing, so only the successes are drawn, at the\n// rate of the feasible stretch. Each car keeps the share of the street that\n// was already parked when it came.\nfunction advance(st, t) {\n  while (st.F > 0 && st.next \u003c= t) {\n    const x = feasible(st, Math.random() * st.F);\n    if (x \u003c 0) break;\n    let i = st.n;\n    while (i > 0 && st.pos[i - 1] > x) (st.pos[i] = st.pos[i - 1]), (st.at[i] = st.at[i - 1]), i--;\n    st.pos[i] = x;\n    st.at[i] = (st.n * st.L) / S;\n    st.n++;\n    st.F = feasible(st, -1);\n    if (st.F > 0) st.next += -log(1 - Math.random()) / rate(st);\n  }\n}\n\nexport function setup(params) {\n  const streets = [];\n  for (let i = 0; i \u003c H; i++) streets.push(newStreet());\n  params.s = {\n    streets, head: 0, phase: 0.5, primed: false,\n    hue: 0, speed: 2, L: 6, k: 0, pred: predict(6, 0),\n    // The fills of the last 128 jammed streets of the current length and\n    // grid, as they leave the bottom.\n    outs: new Float32Array(H), outN: 0, outI: 0,\n    pack: -1, rgb: new Float32Array(W * H * 3), pal: new Float32Array(33 * 3), palHue: NaN,\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 6, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const L = round(cl(kv[2], 6, 15)), g = cl(kv[3], 0, 1), k = g \u003c 0.07 ? 0 : max(1, round(1 / g));\n  if (L !== P.L || k !== P.k) {\n    P.L = L;\n    P.k = k;\n    P.pred = predict(L, k);\n    P.outN = P.outI = 0;\n  }\n  // The first frame fills the panel with streets at every stage, each run\n  // on to the clock of its row, so the picture starts whole.\n  if (!P.primed) {\n    for (let r = 0; r \u003c H; r++) {\n      const st = P.streets[(P.head + r) % H];\n      reset(st, L, k, P.pred);\n      advance(st, clockAt(r + P.phase));\n    }\n    P.primed = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.pack \u003c 0) P.pack = 0;\n  if (P.pack >= 0) {\n    // The tap: 0.6 s to pack, 3 s held, 0.6 s back; the streets wait.\n    P.pack += d;\n    if (P.pack >= 4.2) P.pack = -1;\n    return;\n  }\n  P.phase += d * P.speed * 2;\n  while (P.phase >= 1) {\n    P.phase -= 1;\n    // The jammed bottom street leaves and comes back empty at the top.\n    const bottom = P.streets[(P.head + H - 1) % H];\n    if (bottom.L === P.L && bottom.k === P.k) {\n      P.outs[P.outI] = (bottom.n * bottom.L) / S;\n      P.outI = (P.outI + 1) % H;\n      P.outN = min(H, P.outN + 1);\n    }\n    P.head = (P.head + H - 1) % H;\n    reset(bottom, L, k, P.pred);\n  }\n  for (let r = 0; r \u003c H; r++) advance(P.streets[(P.head + r) % H], clockAt(r + P.phase));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.primed) return;\n  const { rgb, pal } = P;\n  if (P.palHue !== P.hue) {\n    // 33 steps from the first car to come to the last: azure through\n    // violet and rose to gold, brighter as it goes, so the latecomers read\n    // first. Between orange and lime a dim car would read brown or olive,\n    // so there the dim end is lifted.\n    for (let i = 0; i \u003c= 32; i++) {\n      const u = i / 32, h = P.hue + 0.58 + 0.55 * u, band = max(0, 1 - abs(h - floor(h) - 0.14) / 0.13);\n      const v = 0.6 + 0.4 * u;\n      hsv(h, 0.75 - 0.1 * u, max(v, v + (0.92 - v) * band), pal, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  const e = P.pack \u003c 0 ? 0 : P.pack \u003c 0.6 ? sm(P.pack / 0.6) : P.pack \u003c 3.6 ? 1 : sm((4.2 - P.pack) / 0.6);\n  for (let r = 0; r \u003c H; r++) {\n    const st = P.streets[(P.head + r) % H], L = st.L;\n    for (let i = 0; i \u003c st.n; i++) {\n      // A car covers the LEDs whose centres fall inside it, less half an\n      // LED at each end: L - 1 LEDs and a dark one, so cars that touch\n      // still read as two.\n      const x = st.pos[i] + (i * L - st.pos[i]) * e, x0 = max(0, ceil(x)), x1 = min(S - 1, ceil(x + L - 1) - 1);\n      const c = min(32, round((st.at[i] / st.last) * 32)) * 3;\n      for (let px = x0; px \u003c= x1; px++) {\n        const q = (r * W + px) * 3;\n        (rgb[q] = pal[c]), (rgb[q + 1] = pal[c + 1]), (rgb[q + 2] = pal[c + 2]);\n      }\n    }\n  }\n  const gold = [];\n  hsv(P.hue + 0.13, 0.7, 1, gold, 0);\n  // Packed, the gold line stands at the predicted fill across the streets.\n  if (e > 0.5) {\n    const gx = min(S - 1, floor(P.pred * S));\n    for (let r = 0; r \u003c H; r++) {\n      const q = (r * W + gx) * 3;\n      (rgb[q] = gold[0]), (rgb[q + 1] = gold[1]), (rgb[q + 2] = gold[2]);\n    }\n  }\n  // The gauge, three LEDs wide, from a fill of 0.65 at the bottom to 1 at\n  // the top: a bar to the mean of the last jammed streets, a white tick at\n  // Rényi's constant for an endless street and a gold one at the\n  // prediction for this one.\n  const rowOf = (f) => cl(round(H - 1 - ((f - 0.65) / 0.35) * (H - 1)), 0, H - 1);\n  if (P.outN) {\n    let s = 0;\n    for (let i = 0; i \u003c P.outN; i++) s += P.outs[i];\n    const top = rowOf(s / P.outN);\n    for (let y = top; y \u003c H; y++)\n      for (let x = GX; x \u003c W; x++) {\n        const q = (y * W + x) * 3;\n        (rgb[q] = 0.36), (rgb[q + 1] = 0.4), (rgb[q + 2] = 0.5);\n      }\n  }\n  const tick = (f, c) => {\n    const y = rowOf(f);\n    for (let x = GX - 1; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = c[0]), (rgb[q + 1] = c[1]), (rgb[q + 2] = c[2]);\n    }\n  };\n  tick(C, [0.85, 0.85, 0.85]);\n  tick(P.pred, gold);\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes."},{"name":"Length","min":6,"max":15,"about":"The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it."},{"name":"Lattice","min":0,"max":1,"about":"Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street."}],"start":[0,2,6,0.06],"measures":{"motion":1.1003,"detail":0.1839,"edges":0.8784,"complexity":0.1342,"coverage":0.3299,"colour":0.3078,"drift":0.0658},"knobResponse":[0.1481,0.1885,0.1964,0.2206]},{"slug":"rice-planting","title":"Rice Planting","family":"farm","round":26,"note":"물 댄 논을 위에서 내려다봐요. 밀짚모자를 쓴 일꾼들이 못줄을 따라 뒷걸음질하며 모를 한 포기씩 꽂고, 앞쪽 거울 물에는 구름과 모춤, 백로가 있어요. K1 은 아침 안개에서 노을까지 돌리고, 누르면 남은 모를 한꺼번에 꽂고 줄을 넘겨요.","idea":"Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.","buttons":"K1 tap and the crew pushes in the rest of the row at once and the rope moves on.","code":"// ===== Patternflow pattern =====\n// Title:   Rice Planting\n// Family:  farm\n// Idea:    Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after monaegi, the hand transplanting of rice along a marked rope (motjul) in Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1\n//\n// Knob 1: Hour. A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange.\n// Knob 2: Speed. At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower.\n// Knob 3: Planters. Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look.\n// Knob 4: Wind. Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean.\n// Buttons: K1 tap and the crew pushes in the rest of the row at once and the rope moves on.\n\nconst W = 64, H = 128, N = W * H, PW = 61, NH = 14, NR = 25;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every p cells, so the sky texture tiles.\nfunction vnp(x, y, p, o) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const g = (a, b) => hash(a % p, (b % p) + o);\n  const a = g(xi, yi), b = g(xi + 1, yi), c = g(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + g(xi + 1, yi + 1)) * su * sv;\n}\n\n// A paddy and its left bund are 61 columns of the world; the hills of a row\n// stand every four columns, and the rows every four LEDs from row 5 to 101.\nconst HX = (j) => 5 + 4 * j;\nconst rowY = (r, dn) => (dn > 0 ? 5 + 4 * r : 101 - 4 * r);\n// The light by the hour: sky overhead, sky toward the sun, sunlit cloud,\n// cloud underside, light on the people and the fields, and mist.\nconst HOURS = [\n  [0, 46, 92, 168, 116, 150, 204, 250, 242, 236, 150, 162, 192, 0.88, 0.92, 0.98, 0.32],\n  [0.25, 36, 92, 186, 110, 160, 218, 254, 250, 244, 156, 172, 204, 0.96, 0.98, 1, 0.12],\n  [0.5, 18, 66, 176, 64, 126, 210, 255, 255, 255, 168, 180, 206, 1.05, 1.05, 1, 0],\n  [0.75, 44, 92, 176, 176, 164, 150, 255, 224, 170, 160, 140, 156, 1, 0.9, 0.74, 0],\n  [1, 36, 34, 98, 170, 86, 96, 255, 150, 70, 112, 64, 100, 0.82, 0.56, 0.46, 0.12],\n];\nfunction key(u) {\n  let i = 0;\n  while (i \u003c HOURS.length - 2 && u > HOURS[i + 1][0]) i++;\n  const a = HOURS[i], b = HOURS[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\nconst HAT = [234, 190, 102], SKIN = [226, 176, 136], PANTS = [[60, 62, 120], [126, 62, 110], [70, 84, 72]];\nconst SHIRTS = [[236, 236, 228], [104, 144, 224], [238, 136, 164], [150, 208, 96], [184, 152, 228], [214, 78, 70], [112, 204, 204], [70, 96, 176]];\nconst SEED = [134, 222, 72], LEAF = [70, 166, 56], ROOT = [168, 136, 100], TIE = [230, 200, 112], NUR = [96, 196, 66];\nconst ROPE = [200, 170, 116], MARK = [[240, 52, 40], [252, 216, 60]], GRASS = [62, 116, 40], EARTH = [134, 106, 74], MUD = [120, 92, 58];\nconst WHITE = [248, 248, 242], BILL = [244, 196, 40];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, f: F32(N * 3), rip: F32(N), tb: F32(H), ht: F32(16384), bm: new Uint8Array(W), cd: F32(16384), cs: F32(16384), nz: F32(16384), k: 0, dn: 1, r: 0, fl: new Uint8Array(NH),\n    mv: -1.5, sl: -1.5, cam: 0.5, n: 0, h: 0.5, w: 0.5, ox: rnd() * 128, oy: rnd() * 128, rp: [], bu: [], init: false,\n  });\n  // The sky: clouds with steep edges, the size of a few drift blocks, and a\n  // slower field that says where the wind roughens the water and where mist lies.\n  for (let i = 0; i \u003c 16384; i++) {\n    const x = i & 127, y = i >> 7, q = (f, o) => vnp((x * f) / 128, (y * f) / 128, f, o);\n    const v = 0.55 * q(6, 0) + 0.3 * q(14, 50) + 0.15 * q(32, 90);\n    P.cd[i] = sm(0.5, 0.6, v);\n    P.cs[i] = cl((v - 0.5) * 4, 0, 1);\n    P.nz[i] = 0.6 * q(5, 130) + 0.4 * q(12, 170);\n    P.ht[i] = hash(x, y);\n  }\n  P.crew = SHIRTS.map((s, i) => ({ sh: (i * 3 + floor(rnd() * 8)) % 8, pa: floor(rnd() * 3), sp: 0.85 + rnd() * 0.3, list: [], q: 0, ph: 0.5, home: 32.5, wig: rnd() * 7 }));\n  P.eg = { x: 10 + rnd() * 44, y: 84 + rnd() * 14, a: rnd() * 6.28, m: 0, t: 1 + rnd(), st: -1.5, sx: 0.5, sy: 0.5, tx: 0.5, ty: 0.5, sk: -1.5 };\n  P.ca = { x: 14 + rnd() * 36, tx: 32.5, w: 0.6 + rnd(), tt: -0.5 };\n  P.pu = { x: 18 + rnd() * 30, x1: 0, old: [] };\n  P.pu.x1 = P.pu.x + 10 + rnd() * 12;\n}\n\n// Each planter takes a run of the fourteen hills; on alternate rows they work it the other way.\nfunction assign(P) {\n  const n = P.n;\n  P.crew.forEach((c, i) => {\n    const a = floor((i * NH) / n), b = floor(((i + 1) * NH) / n);\n    c.list = [];\n    if (i \u003c n) for (let j = a; j \u003c b; j++) if (!P.fl[j]) c.list.push(j);\n    if (P.r & 1) c.list.reverse();\n    c.q = 0;\n    c.ph = 0;\n    if (i \u003c n) c.home = (HX(a) + HX(b - 1)) / 2;\n  });\n}\nconst fresh = (P) => (P.fl.fill(0), assign(P));\nconst ropeY = (P) => (P.mv >= 0 ? mix(rowY(P.r, P.dn), rowY(P.r + 1, P.dn), sm(0, 1, P.mv)) : rowY(P.r, P.dn));\nconst ring = (P, x, y, s, life = 0.9) => P.rp.length \u003c 48 && P.rp.push({ x: x + 1e-6, y: y + 1e-6, s, a: 1e-6, life });\nfunction plant(P, j) {\n  P.fl[j] = 1;\n  ring(P, P.k * PW + HX(j), rowY(P.r, P.dn), 0.9);\n}\n// Bundles of seedlings lie about the open water, waiting for the line; ft\n// is how far through its flight a thrown one is, below 0 once it floats.\nconst bun = (x, y, ft, tx, ty) => ({ x, y, fx: x, fy: y, tx, ty, a: floor(rnd() * 8), ft });\nfunction scatter(P, k, lo, hi) {\n  for (let i = 0; i \u003c 12; i++) P.bu.push(bun(k * PW + 8 + rnd() * 46, lo + rnd() * (hi - lo), -1.5, 0.5, 0.5));\n}\n// Where open water lies ahead of the line in this paddy, as rows lo..hi.\nfunction open(P, gap) {\n  const ry = ropeY(P);\n  return P.dn > 0 ? [ry + gap, 99] : [7, ry - gap];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 4, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(kv[1], 0.2, 3)) / 2, n = round(cl(kv[2], 4, 8));\n  P.h = cl(kv[0], 0, 1);\n  P.w = cl(kv[3], 0, 1);\n  if (!P.init) {\n    // They have been at it since dawn: the more hands, the further along.\n    P.n = n;\n    P.r = 8 + round((n - 4) * 1.5) + floor(rnd() * 2);\n    assign(P);\n    scatter(P, 0, rowY(P.r, 1) + 10, 99);\n    P.init = true;\n  }\n  if (n !== P.n) (P.n = n), assign(P);\n  P.t += d;\n  P.ox += (3.4 + 5 * P.w) * d;\n  P.oy += (1.4 + 2 * P.w) * d;\n  const btn = input.btnPressed && input.btnPressed[0];\n  if (P.sl \u003c 0) {\n    if (btn && P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) plant(P, j);\n    if (P.mv \u003c 0) {\n      for (let i = 0; i \u003c P.n; i++) {\n        const c = P.crew[i];\n        if (c.q >= c.list.length) continue;\n        const j = c.list[c.q], p0 = c.ph;\n        if (P.fl[j] && p0 \u003c 0.6) {\n          c.q++;\n          continue;\n        }\n        c.ph += (d * c.sp) / 0.36;\n        if (p0 \u003c 0.6 && c.ph >= 0.6) plant(P, j);\n        if (c.ph >= 1) (c.ph = 0), c.q++;\n      }\n      if (P.fl.every((v) => v)) {\n        if (P.r >= NR - 1) {\n          // The last row is in: the crew crosses the bund to the next paddy,\n          // where the carrier has already thrown the bundles.\n          P.sl = 0;\n          scatter(P, P.k + 1, 10, 96);\n          P.eg.m === 0 && fly(P, P.k + 1);\n        } else P.mv = 0;\n      }\n    } else if ((P.mv += d / 0.5) >= 1) {\n      (P.mv = -1), P.r++, fresh(P);\n      for (let i = 0; i \u003c P.n; i++) ring(P, P.k * PW + P.crew[i].home, rowY(P.r, P.dn) + P.dn * 10, 0.5);\n    }\n  } else if ((P.sl += d / 3.5) >= 1) (P.sl = -1), P.k++, (P.dn = -P.dn), (P.r = 0), fresh(P);\n  P.cam = P.k * PW + (P.sl >= 0 ? PW * sm(0, 1, P.sl) : 0);\n  const ry = ropeY(P), dn = P.dn;\n  // The line picks up the bundles it reaches.\n  P.bu = P.bu.filter((b) => {\n    const k = floor(b.x / PW);\n    return b.ft >= 0 || k > P.k || (k === P.k && (P.sl >= 0 || (b.y - ry) * dn > 5));\n  });\n  for (const b of P.bu)\n    if (b.ft >= 0 && (b.ft += d / 0.75) >= 1) (b.ft = -1.5), (b.x = b.tx), (b.y = b.ty), ring(P, b.x, b.y, 1.2, 1.2);\n  // The carrier on the levee throws a bundle ahead of the line now and then.\n  const C = P.ca;\n  if (C.tt > 0) C.tt -= d;\n  else if (abs(C.tx - C.x) > 0.6) C.x += Math.sign(C.tx - C.x) * 7 * d;\n  else if ((C.w -= d) \u003c 0) {\n    const [lo, hi] = open(P, 10);\n    if (P.sl \u003c 0 && hi - lo > 6 && P.bu.length \u003c 16) {\n      const ty = max(lo, hi - 46) + rnd() * (hi - max(lo, hi - 46));\n      P.bu.push(bun(C.x, 104.5, 1e-6, P.k * PW + 8 + rnd() * 46, ty));\n      C.tt = 0.5;\n    }\n    C.w = 1.6 + rnd() * 2.4;\n    C.tx = P.cam + 6 + rnd() * 52;\n  }\n  // The seedling puller works left along the nursery bed.\n  const U = P.pu;\n  U.x -= 0.5 * d;\n  if (U.x \u003c P.cam - 8) U.old.push([U.x + 2, U.x1]) > 3 && U.old.shift(), (U.x1 = (U.x = P.cam + 70) + 2);\n  egret(P, d, ry);\n  for (const q of P.rp) q.a += d;\n  P.rp = P.rp.filter((q) => q.a \u003c q.life);\n}\n\n// The egret flies to open water in paddy k, away from the line.\nfunction fly(P, k) {\n  const E = P.eg, [lo, hi] = k === P.k ? open(P, 26) : [12, 92];\n  if (hi - lo \u003c 8) return fly(P, k + 1);\n  Object.assign(E, { m: 1, t: 0, sx: E.x, sy: E.y, tx: k * PW + 8 + rnd() * 46, ty: lo + rnd() * (hi - lo) });\n  E.a = Math.atan2(E.ty - E.sy, E.tx - E.sx);\n}\nfunction egret(P, d, ry) {\n  const E = P.eg;\n  if (E.m === 1) {\n    if ((E.t += d / 2.4) >= 1) (E.m = 0), (E.x = E.tx), (E.y = E.ty), (E.t = 1.5), ring(P, E.x, E.y, 0.8);\n    return;\n  }\n  if (E.sk >= 0 && (E.sk += d / 0.35) >= 1) E.sk = -1;\n  // Too near the line, or left behind in a planted paddy: off it goes.\n  if (P.sl \u003c 0 && (floor(E.x / PW) \u003c P.k || (floor(E.x / PW) === P.k && (E.y - ry) * P.dn \u003c 15))) return fly(P, P.k);\n  if (E.st >= 0) {\n    E.st += d / 0.45;\n    const q = sm(0, 1, E.st);\n    E.x = mix(E.sx, E.tx, q);\n    E.y = mix(E.sy, E.ty, q);\n    if (E.st >= 1) (E.st = -1), ring(P, E.x - 1.5 * cos(E.a), E.y - 1.5 * sin(E.a), 0.45, 0.7);\n  } else if ((E.t -= d) \u003c 0) {\n    // A slow step, now and then a strike at something in the mud.\n    if (rnd() \u003c 0.25) (E.sk = 0), ring(P, E.x + 5 * cos(E.a), E.y + 5 * sin(E.a), 0.7);\n    else {\n      const lx = E.x - P.k * PW;\n      E.a += (rnd() - 0.5) * 1.4;\n      if (lx \u003c 10) E.a = 0.2 * (rnd() - 0.5);\n      if (lx > 52) E.a = PI + 0.2 * (rnd() - 0.5);\n      if (E.y > 96 || E.y \u003c 10) E.a = (E.y > 50 ? -PI : PI) / 2 + (rnd() - 0.5);\n      Object.assign(E, { st: 0, sx: E.x, sy: E.y, tx: E.x + 1.6 * cos(E.a), ty: E.y + 1.6 * sin(E.a) });\n    }\n    E.t = 0.6 + rnd() * 1.8;\n  }\n}\n\nlet F, L;\nfunction put(x, y, c, k = 1, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j] * k * L[j], a);\n}\n// Points given along a heading (u forward, v to the side), turned to angle a.\nfunction spr(x, y, a, pts) {\n  const c = cos(a), s = sin(a);\n  for (const [u, v, col, k] of pts) {\n    const px = round(x + u * c - v * s), py = round(y + u * s + v * c), o = (py * W + px) * 3;\n    if (col) put(px, py, col, k);\n    else if (px >= 0 && px \u003c W && py >= 0 && py \u003c H) (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n  }\n}\nfunction disc(x, y, r, col, sh) {\n  x = round(x);\n  y = round(y);\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const e = sqrt(dx * dx + dy * dy);\n      if (e > r + 0.35) continue;\n      put(x + dx, y + dy, col, (1.14 - 0.32 * (e / r) ** 2) * (e > r - 0.55 ? 0.82 : 1) - (sh * 0.1 * (dx + dy)) / r);\n    }\n}\nfunction line(ax, ay, bx, by, c, k) {\n  const n = max(1, round(max(abs(bx - ax), abs(by - ay))));\n  for (let i = 0; i \u003c= n; i++) put(mix(ax, bx, i / n), mix(ay, by, i / n), c, k);\n}\nconst BUNDLE = [[-2, 0, ROOT, 0.9], [-1, 0, TIE, 1], [0, 0, SEED, 0.95], [1, 0, LEAF, 1], [2, 0, LEAF, 0.8], [1, -1, LEAF, 0.75], [1, 1, LEAF, 0.75]];\n\n// One planter bent over, seen from above: the hat, the back and hips\n// behind it, the arms reaching out past the brim to the water, a bundle in\n// one hand and the other pushing a hill in at the rope.\nconst BACK = [3.4, 3.4, 3, 2.6, 2.1];\nfunction planter(P, c, x, y, dn, ry, x0, hr, walk) {\n  const sh = SHIRTS[c.sh], pa = PANTS[c.pa], st = walk ? round(sin(P.t * 9 + c.wig)) : 0;\n  let side = c.home \u003c 32 ? 1 : -1, e = 0, tx = x + side * 3, ty = y - dn * 3.6;\n  if (!walk && c.q \u003c c.list.length) {\n    const hx = x0 + HX(c.list[c.q]);\n    side = hx >= x ? 1 : -1;\n    e = c.ph \u003c 0.6 ? sm(0, 0.5, c.ph) : 1 - sm(0.65, 1, c.ph);\n    tx = mix(x + side * 3, hx, e);\n    ty = mix(y - dn * 3.6, ry + dn * 0.6, e);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    put(x + s, y + dn * (8 + (s * st > 0 ? 1 : 0)), pa, 0.7);\n    for (let dx = -1; dx \u003c= 1; dx++) put(x + dx, y + dn * 7, pa, 0.9 - 0.1 * abs(dx));\n  }\n  BACK.forEach((hw, j) => {\n    for (let dx = -3; dx \u003c= 3; dx++) if (abs(dx) \u003c= hw) put(x + dx, y + dn * (2 + j), sh, (0.98 - 0.07 * j) * (abs(dx) > hw - 1 ? 0.85 : 1));\n  });\n  line(x + side * 2.8, y + dn * 1.5, tx, ty, sh, 0.9);\n  put(tx, ty, SKIN);\n  const bx = x - side * 3.2, by = y - dn * 3;\n  line(x - side * 2.8, y + dn * 1.5, bx, by, sh, 0.9);\n  put(bx, by, SKIN);\n  put(bx, by - dn, SEED);\n  put(bx + side, by - dn * 1.6, LEAF, 0.9);\n  put(bx - side, by - dn, LEAF, 0.8);\n  disc(x + (tx - x) * 0.15, y - dn * e * 0.8, hr, HAT, 1);\n}\n\n// Ripple rings from every push, step and splash, summed per LED.\nfunction ripples(P, cam) {\n  const RIP = P.rip;\n  RIP.fill(0);\n  for (const q of P.rp) {\n    const R = 0.6 + q.a * 6.5, a = q.s * (1 - q.a / q.life), qx = q.x - cam;\n    for (let y = max(0, floor(q.y - R - 1)); y \u003c= min(H - 1, q.y + R + 1); y++)\n      for (let x = max(0, floor(qx - R - 1)); x \u003c= min(W - 1, qx + R + 1); x++) {\n        const e = abs(sqrt((x - qx) ** 2 + (y - q.y) ** 2) - R);\n        if (e \u003c 0.8) RIP[y * W + x] += a * (1 - e / 0.8);\n      }\n  }\n}\n\n// The bunds, the levee, the nursery, and the water mirroring the sky.\nfunction ground(P, K, cam, ry) {\n  const f = F, k = P.k, dn = P.dn, t = P.t, w = P.w, h = P.h, RIP = P.rip, CD = P.cd, CS = P.cs, NZ = P.nz, HT = P.ht, TB = P.tb;\n  const ox = floor(P.ox), oy = floor(P.oy), wo = floor(t * (3 + 6 * w)), ws = 0.75 - 0.6 * w, wa1 = min(1, w * 4);\n  // The sun's glint, near noon, sliding across the paddy with the hour.\n  const gu = cl((h - 0.22) / 0.56, 0, 1), gs = sm(0.22, 0.38, h) * (1 - sm(0.62, 0.8, h)), gx = 6 + 52 * gu, gy = 70 - 30 * sin(PI * gu);\n  // The nursery bed is bare where the seedlings have been pulled.\n  const BM = P.bm;\n  BM.fill(0);\n  for (const [a, b] of [...P.pu.old, [P.pu.x + 2, P.pu.x1]]) for (let x = max(0, ceil(a - cam)); x \u003c= min(W - 1, b - cam); x++) BM[x] = 1;\n  // How muddy the water is on each row of this paddy: churned round the\n  // crew's feet and behind them, settling further back.\n  for (let y = 0; y \u003c H; y++) {\n    const ds = (ry - y) * dn;\n    TB[y] = P.sl >= 0 ? 0.22 : sm(-14, -9, ds) * (0.16 + 0.3 * exp(-max(0, ds) / 14));\n  }\n  const [z0, z1, z2, s0, s1, s2, l0, l1, l2, h0, h1, h2, , , , mist] = K.slice(1), L0 = L[0], L1 = L[1], L2 = L[2], M0 = MUD[0] * L0, M1 = MUD[1] * L1, M2 = MUD[2] * L2;\n  const m0 = mix(s0, 250, 0.6), m1 = mix(s1, 250, 0.6), m2 = mix(s2, 250, 0.6), my = floor(t * 1.5), mx = floor(t * 2.5) + 40;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, wx = x + cam, kk = floor(wx / PW), lx = wx - kk * PW, o = i * 3, hv = HT[(wx & 127) | (y \u003c\u003c 7)];\n    const wet = y >= 3 && y \u003c= 103 && lx >= 3 ? 1 : y === 110 || y === 116 || y === 122 ? 0.7 : 0;\n    if (!wet) {\n      let c = GRASS, v = 0.8 + 0.4 * hv;\n      if (y >= 110) {\n        const bare = y >= 117 && y \u003c= 121 && BM[x];\n        (c = bare ? MUD : NUR), (v = bare ? 0.55 + 0.3 * hv : (y === 111 || y === 115 || y === 117 || y === 121 || y === 123 ? 0.62 : 0.72) + 0.45 * hv);\n      } else if (y >= 104) (c = y >= 106 && y \u003c= 108 ? EARTH : GRASS), (v = y === 104 ? 0.6 + 0.3 * hv : v);\n      else if (y \u003c 3 ? y === 1 : lx === 1) (c = EARTH), (v = 0.75 + 0.35 * hv);\n      else if (y === 2 || (y > 2 && lx === 2)) v *= 0.7;\n      f[o] = c[0] * v * L0;\n      f[o + 1] = c[1] * v * L1;\n      f[o + 2] = c[2] * v * L2;\n      continue;\n    }\n    const ci = ((y + oy) & 127) * 128 + ((x + ox) & 127), cd = CD[ci], cs = CS[ci], g = (0.28 * x) / 63 + 0.52 * (1 - y / 127);\n    let br = 0.9;\n    if (wa1 > 0) {\n      const nz = NZ[(((y >> 1) + wo) & 127) | ((((x >> 1) + (wo >> 1)) & 127) \u003c\u003c 7)];\n      // A cat's paw darkens the mirror and breaks it into glitter.\n      if (nz > ws) {\n        const wa = sm(ws, ws + 0.16, nz) * wa1;\n        br *= 1 - 0.3 * wa;\n        if (HT[((x * 5 + wo * 3) & 127) | (((y + wo) & 127) \u003c\u003c 7)] > 0.87) br += 0.45 * wa;\n      }\n    }\n    const tb = kk \u003c k ? 0.22 : kk === k && wet === 1 ? TB[y] : 0, rp = RIP[i];\n    let gl = 0;\n    if (gs > 0 && abs(x - gx) \u003c 16) {\n      gl = gs * exp(-((x - gx) ** 2 + ((y - gy) * 0.8) ** 2) / 40) * (1 - tb);\n      if (w > 0.1) gl *= mix(1, HT[((x * 7 + wo) & 127) | (y \u003c\u003c 7)] > 0.75 ? 2.6 : 0.25, w);\n    }\n    const r0 = z0 + (s0 - z0) * g, r1 = z1 + (s1 - z1) * g, r2 = z2 + (s2 - z2) * g;\n    const q0 = (r0 + (h0 + (l0 - h0) * cs - r0) * cd) * br, q1 = (r1 + (h1 + (l1 - h1) * cs - r1) * cd) * br, q2 = (r2 + (h2 + (l2 - h2) * cs - r2) * cd) * br;\n    // Morning mist lies over the water in drifting banks.\n    let ms = mist > 0.01 ? (NZ[((((y >> 1) + my) & 127) \u003c\u003c 7) | ((x + mx) & 127)] - 0.5) * 2.4 : 0;\n    ms = ms > 0 ? mist * min(ms, 0.7) : 0;\n    const m = 0.7 + 0.4 * hv, wk = wet \u003c 1 ? 0.8 : 1, c0 = (q0 + (M0 * m - q0) * tb + rp * (60 + 0.35 * q0) + 255 * L0 * gl) * wk;\n    const c1 = (q1 + (M1 * m - q1) * tb + rp * (60 + 0.35 * q1) + 255 * L1 * gl) * wk, c2 = (q2 + (M2 * m - q2) * tb + rp * (60 + 0.35 * q2) + 255 * L2 * gl) * wk;\n    f[o] = c0 + (m0 - c0) * ms;\n    f[o + 1] = c1 + (m1 - c1) * ms;\n    f[o + 2] = c2 + (m2 - c2) * ms;\n  }\n}\n\n// The rope with its markers, one per hill still to plant, and every hill\n// planted so far, leaning and swaying with the wind.\nfunction field(P, cam, ry) {\n  const k = P.k, dn = P.dn, t = P.t, w = P.w, x0 = k * PW - cam;\n  if (P.sl \u003c 0) {\n    const yr = round(ry);\n    for (let x = 1; x \u003c= 62; x++) put(x0 + x, yr, ROPE, 0.85);\n    if (P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) put(x0 + HX(j), yr, MARK[j % 3 === 2 ? 1 : 0]);\n  }\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW) && kk \u003c= k; kk++) {\n    const xk = kk * PW - cam;\n    for (let gi = 0; gi \u003c NR; gi++) {\n      const y = 5 + 4 * gi, ord = kk \u003c k ? -1 : dn > 0 ? gi : NR - 1 - gi;\n      if (kk === k && ord > P.r) continue;\n      for (let j = 0; j \u003c NH; j++) {\n        if (kk === k && ord === P.r && !P.fl[j]) continue;\n        const x = xk + HX(j), v = 0.85 + 0.3 * hash(kk * 31 + j, gi), sw = sin(t * 2.6 + x * 0.3 + y * 0.15) * (0.25 + 0.9 * w) + 0.9 * w, ln = round(cl(sw, -1, 1));\n        put(x, y, SEED, v);\n        put(x + ln, y - 1, LEAF, v);\n        put(x + (v > 1 ? 1 : -1), y, LEAF, 0.75 * v);\n      }\n    }\n  }\n}\n\n// The egret: wading with its neck folded (out in a strike), or on the wing.\nfunction egretDraw(P, cam) {\n  const E = P.eg, pts = [];\n  if (E.m === 0) {\n    const nk = E.sk >= 0 ? 1.8 + 2.4 * sin(PI * E.sk) : 1.8;\n    for (let u = -3.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -1.5; v \u003c= 1.5; v += 0.5) if ((u + 1) ** 2 / 6.5 + (v * v) / 2.1 \u003c= 1) pts.push([u, v, WHITE, 0.9 + 0.06 * v]);\n    for (let u = 2; u \u003c= nk + 0.5; u += 0.5) pts.push([u, 0.5 * sin(u * 1.6), WHITE, 1]);\n    pts.push([nk + 1, 0, WHITE, 1], [nk + 2, 0, BILL, 1], [nk + 2.8, 0, BILL, 0.8]);\n    spr(E.x - cam + 1, E.y + 1, E.a, pts.map(([u, v]) => [u, v, 0, 0.7]));\n    spr(E.x - cam, E.y, E.a, pts);\n    return;\n  }\n  const q = sm(0, 1, E.t), ex = mix(E.sx, E.tx, q) - cam, ey = mix(E.sy, E.ty, q) - 8 * sin(PI * E.t), sp = 3 + 3 * abs(sin(P.t * 8));\n  for (let u = -2; u \u003c= 1; u += 0.5) pts.push([u, 0, WHITE, 1], [u, 0.6, WHITE, 0.9], [u, -0.6, WHITE, 0.9]);\n  for (let v = 1; v \u003c= sp; v += 0.5) for (let s = -1; s \u003c= 1; s += 2) pts.push([-0.4 * (v / sp) ** 2, s * v, WHITE, v > sp - 1 ? 0.75 : 1], [0.6 - 0.6 * (v / sp), s * v, WHITE, 0.85]);\n  pts.push([2, 0, WHITE, 1], [3, 0, WHITE, 1], [4, 0, BILL, 1]);\n  spr(ex, ey, E.a, pts);\n}\n\n// The crew and the rope holders on the bunds, all in straw hats.\nfunction crew(P, cam, ry) {\n  const dn = P.dn, x0 = P.k * PW - cam, hr = P.n > 6 ? 2.6 : 3;\n  if (P.sl \u003c 0) {\n    for (let i = 0; i \u003c P.n; i++) {\n      const c = P.crew[i], lag = P.mv >= 0 ? sm(0.15, 1, P.mv) : 1, cy = mix(rowY(P.r, dn), ry, lag) + dn * 4;\n      planter(P, c, x0 + c.home, cy, dn, ry, x0, hr, false);\n    }\n    for (let hx = 1; hx \u003c 63; hx += 61) {\n      put(x0 + hx + (hx \u003c 9 ? -2 : 2), ry + dn * 2, SHIRTS[hx & 7], 0.8);\n      disc(x0 + hx, ry + dn * 0.5, 2, HAT, 1);\n    }\n    return;\n  }\n  const q = sm(0, 1, P.sl), y0 = rowY(NR - 1, dn) + dn * 4, y1 = rowY(0, -dn) - dn * 4, fd = q \u003c 0.5 ? dn : -dn;\n  for (let i = 0; i \u003c P.n; i++) planter(P, P.crew[i], P.crew[i].home, mix(y0, y1, q), fd, 0, 0, hr, true);\n  for (let hx = 1; hx \u003c 63; hx += 61) disc(hx, mix(y0, y1, q) - fd * 4, 2, HAT, 1);\n}\n\n// The carrier on the levee with bundles on his A-frame, the puller in the\n// nursery with the bundles he has tied laid in the channel, and every bundle\n// afloat or in the air.\nfunction helpers(P, cam) {\n  const C = P.ca, cx = C.x - cam, U = P.pu, ux = U.x - cam, pull = sin(P.t * 7);\n  for (const b of P.bu) if (b.ft \u003c 0) spr(b.x - cam, b.y, (b.a * PI) / 4, BUNDLE);\n  // Trays of seedlings from the nursery wait on the levee path.\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW); kk++)\n    for (let tx = 9; tx \u003c 60; tx += 36)\n      for (let dx = 0; dx \u003c 8; dx++)\n        for (let dy = 0; dy \u003c 3; dy++) put(kk * PW + tx + dx - cam, 106 + dy, dx % 7 ? NUR : ROOT, dx % 7 ? 0.75 + 0.4 * hash(dx + tx, dy + kk * 5) : 0.6);\n  for (let dx = -2; dx \u003c= 2; dx++) for (let dy = 2; dy \u003c= 4; dy++) put(cx + dx, 106 + dy, (dx + dy) & 1 ? SEED : LEAF, dy === 2 ? 0.75 : 0.95);\n  put(cx - 2, 109, TIE), put(cx + 2, 109, TIE);\n  if (C.tt > 0) line(cx + 1, 105, cx + 2, 101 + 2 * C.tt, SKIN, 0.9);\n  disc(cx, 106, 2, HAT, 1);\n  for (let bx = U.x + 6; bx \u003c U.x1 - 1; bx += 5) spr(bx - cam, 116, PI / 2, BUNDLE);\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = 2; dx \u003c= 4; dx++) put(ux + dx, 119 + dy, SHIRTS[5], 0.85);\n  line(ux - 1, 118, ux - 2.5 - pull, 118, SKIN, 0.9);\n  line(ux - 1, 120, ux - 2.5 + pull, 120, SKIN, 0.9);\n  disc(ux, 119, 2, HAT, 1);\n}\nfunction thrown(P, cam) {\n  for (const b of P.bu) if (b.ft >= 0) spr(mix(b.fx, b.tx, b.ft) - cam, mix(b.fy, b.ty, b.ft) - 7 * sin(PI * b.ft), b.ft * 9, BUNDLE);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const K = key(P.h), cam = floor(P.cam), ry = ropeY(P), f = (F = P.f);\n  L = [K[13], K[14], K[15]];\n  ripples(P, cam);\n  ground(P, K, cam, ry);\n  field(P, cam, ry);\n  if (P.eg.m === 0) egretDraw(P, cam);\n  crew(P, cam, ry);\n  helpers(P, cam);\n  thrown(P, cam);\n  if (P.eg.m === 1) egretDraw(P, cam);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","layer":{"id":"layer-rice-planting","type":"code","name":"rice-planting","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rice Planting\n// Family:  farm\n// Idea:    Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after monaegi, the hand transplanting of rice along a marked rope (motjul) in Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1\n//\n// Knob 1: Hour. A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange.\n// Knob 2: Speed. At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower.\n// Knob 3: Planters. Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look.\n// Knob 4: Wind. Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean.\n// Buttons: K1 tap and the crew pushes in the rest of the row at once and the rope moves on.\n\nconst W = 64, H = 128, N = W * H, PW = 61, NH = 14, NR = 25;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every p cells, so the sky texture tiles.\nfunction vnp(x, y, p, o) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const g = (a, b) => hash(a % p, (b % p) + o);\n  const a = g(xi, yi), b = g(xi + 1, yi), c = g(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + g(xi + 1, yi + 1)) * su * sv;\n}\n\n// A paddy and its left bund are 61 columns of the world; the hills of a row\n// stand every four columns, and the rows every four LEDs from row 5 to 101.\nconst HX = (j) => 5 + 4 * j;\nconst rowY = (r, dn) => (dn > 0 ? 5 + 4 * r : 101 - 4 * r);\n// The light by the hour: sky overhead, sky toward the sun, sunlit cloud,\n// cloud underside, light on the people and the fields, and mist.\nconst HOURS = [\n  [0, 46, 92, 168, 116, 150, 204, 250, 242, 236, 150, 162, 192, 0.88, 0.92, 0.98, 0.32],\n  [0.25, 36, 92, 186, 110, 160, 218, 254, 250, 244, 156, 172, 204, 0.96, 0.98, 1, 0.12],\n  [0.5, 18, 66, 176, 64, 126, 210, 255, 255, 255, 168, 180, 206, 1.05, 1.05, 1, 0],\n  [0.75, 44, 92, 176, 176, 164, 150, 255, 224, 170, 160, 140, 156, 1, 0.9, 0.74, 0],\n  [1, 36, 34, 98, 170, 86, 96, 255, 150, 70, 112, 64, 100, 0.82, 0.56, 0.46, 0.12],\n];\nfunction key(u) {\n  let i = 0;\n  while (i \u003c HOURS.length - 2 && u > HOURS[i + 1][0]) i++;\n  const a = HOURS[i], b = HOURS[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\nconst HAT = [234, 190, 102], SKIN = [226, 176, 136], PANTS = [[60, 62, 120], [126, 62, 110], [70, 84, 72]];\nconst SHIRTS = [[236, 236, 228], [104, 144, 224], [238, 136, 164], [150, 208, 96], [184, 152, 228], [214, 78, 70], [112, 204, 204], [70, 96, 176]];\nconst SEED = [134, 222, 72], LEAF = [70, 166, 56], ROOT = [168, 136, 100], TIE = [230, 200, 112], NUR = [96, 196, 66];\nconst ROPE = [200, 170, 116], MARK = [[240, 52, 40], [252, 216, 60]], GRASS = [62, 116, 40], EARTH = [134, 106, 74], MUD = [120, 92, 58];\nconst WHITE = [248, 248, 242], BILL = [244, 196, 40];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, f: F32(N * 3), rip: F32(N), tb: F32(H), ht: F32(16384), bm: new Uint8Array(W), cd: F32(16384), cs: F32(16384), nz: F32(16384), k: 0, dn: 1, r: 0, fl: new Uint8Array(NH),\n    mv: -1.5, sl: -1.5, cam: 0.5, n: 0, h: 0.5, w: 0.5, ox: rnd() * 128, oy: rnd() * 128, rp: [], bu: [], init: false,\n  });\n  // The sky: clouds with steep edges, the size of a few drift blocks, and a\n  // slower field that says where the wind roughens the water and where mist lies.\n  for (let i = 0; i \u003c 16384; i++) {\n    const x = i & 127, y = i >> 7, q = (f, o) => vnp((x * f) / 128, (y * f) / 128, f, o);\n    const v = 0.55 * q(6, 0) + 0.3 * q(14, 50) + 0.15 * q(32, 90);\n    P.cd[i] = sm(0.5, 0.6, v);\n    P.cs[i] = cl((v - 0.5) * 4, 0, 1);\n    P.nz[i] = 0.6 * q(5, 130) + 0.4 * q(12, 170);\n    P.ht[i] = hash(x, y);\n  }\n  P.crew = SHIRTS.map((s, i) => ({ sh: (i * 3 + floor(rnd() * 8)) % 8, pa: floor(rnd() * 3), sp: 0.85 + rnd() * 0.3, list: [], q: 0, ph: 0.5, home: 32.5, wig: rnd() * 7 }));\n  P.eg = { x: 10 + rnd() * 44, y: 84 + rnd() * 14, a: rnd() * 6.28, m: 0, t: 1 + rnd(), st: -1.5, sx: 0.5, sy: 0.5, tx: 0.5, ty: 0.5, sk: -1.5 };\n  P.ca = { x: 14 + rnd() * 36, tx: 32.5, w: 0.6 + rnd(), tt: -0.5 };\n  P.pu = { x: 18 + rnd() * 30, x1: 0, old: [] };\n  P.pu.x1 = P.pu.x + 10 + rnd() * 12;\n}\n\n// Each planter takes a run of the fourteen hills; on alternate rows they work it the other way.\nfunction assign(P) {\n  const n = P.n;\n  P.crew.forEach((c, i) => {\n    const a = floor((i * NH) / n), b = floor(((i + 1) * NH) / n);\n    c.list = [];\n    if (i \u003c n) for (let j = a; j \u003c b; j++) if (!P.fl[j]) c.list.push(j);\n    if (P.r & 1) c.list.reverse();\n    c.q = 0;\n    c.ph = 0;\n    if (i \u003c n) c.home = (HX(a) + HX(b - 1)) / 2;\n  });\n}\nconst fresh = (P) => (P.fl.fill(0), assign(P));\nconst ropeY = (P) => (P.mv >= 0 ? mix(rowY(P.r, P.dn), rowY(P.r + 1, P.dn), sm(0, 1, P.mv)) : rowY(P.r, P.dn));\nconst ring = (P, x, y, s, life = 0.9) => P.rp.length \u003c 48 && P.rp.push({ x: x + 1e-6, y: y + 1e-6, s, a: 1e-6, life });\nfunction plant(P, j) {\n  P.fl[j] = 1;\n  ring(P, P.k * PW + HX(j), rowY(P.r, P.dn), 0.9);\n}\n// Bundles of seedlings lie about the open water, waiting for the line; ft\n// is how far through its flight a thrown one is, below 0 once it floats.\nconst bun = (x, y, ft, tx, ty) => ({ x, y, fx: x, fy: y, tx, ty, a: floor(rnd() * 8), ft });\nfunction scatter(P, k, lo, hi) {\n  for (let i = 0; i \u003c 12; i++) P.bu.push(bun(k * PW + 8 + rnd() * 46, lo + rnd() * (hi - lo), -1.5, 0.5, 0.5));\n}\n// Where open water lies ahead of the line in this paddy, as rows lo..hi.\nfunction open(P, gap) {\n  const ry = ropeY(P);\n  return P.dn > 0 ? [ry + gap, 99] : [7, ry - gap];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 4, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(kv[1], 0.2, 3)) / 2, n = round(cl(kv[2], 4, 8));\n  P.h = cl(kv[0], 0, 1);\n  P.w = cl(kv[3], 0, 1);\n  if (!P.init) {\n    // They have been at it since dawn: the more hands, the further along.\n    P.n = n;\n    P.r = 8 + round((n - 4) * 1.5) + floor(rnd() * 2);\n    assign(P);\n    scatter(P, 0, rowY(P.r, 1) + 10, 99);\n    P.init = true;\n  }\n  if (n !== P.n) (P.n = n), assign(P);\n  P.t += d;\n  P.ox += (3.4 + 5 * P.w) * d;\n  P.oy += (1.4 + 2 * P.w) * d;\n  const btn = input.btnPressed && input.btnPressed[0];\n  if (P.sl \u003c 0) {\n    if (btn && P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) plant(P, j);\n    if (P.mv \u003c 0) {\n      for (let i = 0; i \u003c P.n; i++) {\n        const c = P.crew[i];\n        if (c.q >= c.list.length) continue;\n        const j = c.list[c.q], p0 = c.ph;\n        if (P.fl[j] && p0 \u003c 0.6) {\n          c.q++;\n          continue;\n        }\n        c.ph += (d * c.sp) / 0.36;\n        if (p0 \u003c 0.6 && c.ph >= 0.6) plant(P, j);\n        if (c.ph >= 1) (c.ph = 0), c.q++;\n      }\n      if (P.fl.every((v) => v)) {\n        if (P.r >= NR - 1) {\n          // The last row is in: the crew crosses the bund to the next paddy,\n          // where the carrier has already thrown the bundles.\n          P.sl = 0;\n          scatter(P, P.k + 1, 10, 96);\n          P.eg.m === 0 && fly(P, P.k + 1);\n        } else P.mv = 0;\n      }\n    } else if ((P.mv += d / 0.5) >= 1) {\n      (P.mv = -1), P.r++, fresh(P);\n      for (let i = 0; i \u003c P.n; i++) ring(P, P.k * PW + P.crew[i].home, rowY(P.r, P.dn) + P.dn * 10, 0.5);\n    }\n  } else if ((P.sl += d / 3.5) >= 1) (P.sl = -1), P.k++, (P.dn = -P.dn), (P.r = 0), fresh(P);\n  P.cam = P.k * PW + (P.sl >= 0 ? PW * sm(0, 1, P.sl) : 0);\n  const ry = ropeY(P), dn = P.dn;\n  // The line picks up the bundles it reaches.\n  P.bu = P.bu.filter((b) => {\n    const k = floor(b.x / PW);\n    return b.ft >= 0 || k > P.k || (k === P.k && (P.sl >= 0 || (b.y - ry) * dn > 5));\n  });\n  for (const b of P.bu)\n    if (b.ft >= 0 && (b.ft += d / 0.75) >= 1) (b.ft = -1.5), (b.x = b.tx), (b.y = b.ty), ring(P, b.x, b.y, 1.2, 1.2);\n  // The carrier on the levee throws a bundle ahead of the line now and then.\n  const C = P.ca;\n  if (C.tt > 0) C.tt -= d;\n  else if (abs(C.tx - C.x) > 0.6) C.x += Math.sign(C.tx - C.x) * 7 * d;\n  else if ((C.w -= d) \u003c 0) {\n    const [lo, hi] = open(P, 10);\n    if (P.sl \u003c 0 && hi - lo > 6 && P.bu.length \u003c 16) {\n      const ty = max(lo, hi - 46) + rnd() * (hi - max(lo, hi - 46));\n      P.bu.push(bun(C.x, 104.5, 1e-6, P.k * PW + 8 + rnd() * 46, ty));\n      C.tt = 0.5;\n    }\n    C.w = 1.6 + rnd() * 2.4;\n    C.tx = P.cam + 6 + rnd() * 52;\n  }\n  // The seedling puller works left along the nursery bed.\n  const U = P.pu;\n  U.x -= 0.5 * d;\n  if (U.x \u003c P.cam - 8) U.old.push([U.x + 2, U.x1]) > 3 && U.old.shift(), (U.x1 = (U.x = P.cam + 70) + 2);\n  egret(P, d, ry);\n  for (const q of P.rp) q.a += d;\n  P.rp = P.rp.filter((q) => q.a \u003c q.life);\n}\n\n// The egret flies to open water in paddy k, away from the line.\nfunction fly(P, k) {\n  const E = P.eg, [lo, hi] = k === P.k ? open(P, 26) : [12, 92];\n  if (hi - lo \u003c 8) return fly(P, k + 1);\n  Object.assign(E, { m: 1, t: 0, sx: E.x, sy: E.y, tx: k * PW + 8 + rnd() * 46, ty: lo + rnd() * (hi - lo) });\n  E.a = Math.atan2(E.ty - E.sy, E.tx - E.sx);\n}\nfunction egret(P, d, ry) {\n  const E = P.eg;\n  if (E.m === 1) {\n    if ((E.t += d / 2.4) >= 1) (E.m = 0), (E.x = E.tx), (E.y = E.ty), (E.t = 1.5), ring(P, E.x, E.y, 0.8);\n    return;\n  }\n  if (E.sk >= 0 && (E.sk += d / 0.35) >= 1) E.sk = -1;\n  // Too near the line, or left behind in a planted paddy: off it goes.\n  if (P.sl \u003c 0 && (floor(E.x / PW) \u003c P.k || (floor(E.x / PW) === P.k && (E.y - ry) * P.dn \u003c 15))) return fly(P, P.k);\n  if (E.st >= 0) {\n    E.st += d / 0.45;\n    const q = sm(0, 1, E.st);\n    E.x = mix(E.sx, E.tx, q);\n    E.y = mix(E.sy, E.ty, q);\n    if (E.st >= 1) (E.st = -1), ring(P, E.x - 1.5 * cos(E.a), E.y - 1.5 * sin(E.a), 0.45, 0.7);\n  } else if ((E.t -= d) \u003c 0) {\n    // A slow step, now and then a strike at something in the mud.\n    if (rnd() \u003c 0.25) (E.sk = 0), ring(P, E.x + 5 * cos(E.a), E.y + 5 * sin(E.a), 0.7);\n    else {\n      const lx = E.x - P.k * PW;\n      E.a += (rnd() - 0.5) * 1.4;\n      if (lx \u003c 10) E.a = 0.2 * (rnd() - 0.5);\n      if (lx > 52) E.a = PI + 0.2 * (rnd() - 0.5);\n      if (E.y > 96 || E.y \u003c 10) E.a = (E.y > 50 ? -PI : PI) / 2 + (rnd() - 0.5);\n      Object.assign(E, { st: 0, sx: E.x, sy: E.y, tx: E.x + 1.6 * cos(E.a), ty: E.y + 1.6 * sin(E.a) });\n    }\n    E.t = 0.6 + rnd() * 1.8;\n  }\n}\n\nlet F, L;\nfunction put(x, y, c, k = 1, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j] * k * L[j], a);\n}\n// Points given along a heading (u forward, v to the side), turned to angle a.\nfunction spr(x, y, a, pts) {\n  const c = cos(a), s = sin(a);\n  for (const [u, v, col, k] of pts) {\n    const px = round(x + u * c - v * s), py = round(y + u * s + v * c), o = (py * W + px) * 3;\n    if (col) put(px, py, col, k);\n    else if (px >= 0 && px \u003c W && py >= 0 && py \u003c H) (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n  }\n}\nfunction disc(x, y, r, col, sh) {\n  x = round(x);\n  y = round(y);\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const e = sqrt(dx * dx + dy * dy);\n      if (e > r + 0.35) continue;\n      put(x + dx, y + dy, col, (1.14 - 0.32 * (e / r) ** 2) * (e > r - 0.55 ? 0.82 : 1) - (sh * 0.1 * (dx + dy)) / r);\n    }\n}\nfunction line(ax, ay, bx, by, c, k) {\n  const n = max(1, round(max(abs(bx - ax), abs(by - ay))));\n  for (let i = 0; i \u003c= n; i++) put(mix(ax, bx, i / n), mix(ay, by, i / n), c, k);\n}\nconst BUNDLE = [[-2, 0, ROOT, 0.9], [-1, 0, TIE, 1], [0, 0, SEED, 0.95], [1, 0, LEAF, 1], [2, 0, LEAF, 0.8], [1, -1, LEAF, 0.75], [1, 1, LEAF, 0.75]];\n\n// One planter bent over, seen from above: the hat, the back and hips\n// behind it, the arms reaching out past the brim to the water, a bundle in\n// one hand and the other pushing a hill in at the rope.\nconst BACK = [3.4, 3.4, 3, 2.6, 2.1];\nfunction planter(P, c, x, y, dn, ry, x0, hr, walk) {\n  const sh = SHIRTS[c.sh], pa = PANTS[c.pa], st = walk ? round(sin(P.t * 9 + c.wig)) : 0;\n  let side = c.home \u003c 32 ? 1 : -1, e = 0, tx = x + side * 3, ty = y - dn * 3.6;\n  if (!walk && c.q \u003c c.list.length) {\n    const hx = x0 + HX(c.list[c.q]);\n    side = hx >= x ? 1 : -1;\n    e = c.ph \u003c 0.6 ? sm(0, 0.5, c.ph) : 1 - sm(0.65, 1, c.ph);\n    tx = mix(x + side * 3, hx, e);\n    ty = mix(y - dn * 3.6, ry + dn * 0.6, e);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    put(x + s, y + dn * (8 + (s * st > 0 ? 1 : 0)), pa, 0.7);\n    for (let dx = -1; dx \u003c= 1; dx++) put(x + dx, y + dn * 7, pa, 0.9 - 0.1 * abs(dx));\n  }\n  BACK.forEach((hw, j) => {\n    for (let dx = -3; dx \u003c= 3; dx++) if (abs(dx) \u003c= hw) put(x + dx, y + dn * (2 + j), sh, (0.98 - 0.07 * j) * (abs(dx) > hw - 1 ? 0.85 : 1));\n  });\n  line(x + side * 2.8, y + dn * 1.5, tx, ty, sh, 0.9);\n  put(tx, ty, SKIN);\n  const bx = x - side * 3.2, by = y - dn * 3;\n  line(x - side * 2.8, y + dn * 1.5, bx, by, sh, 0.9);\n  put(bx, by, SKIN);\n  put(bx, by - dn, SEED);\n  put(bx + side, by - dn * 1.6, LEAF, 0.9);\n  put(bx - side, by - dn, LEAF, 0.8);\n  disc(x + (tx - x) * 0.15, y - dn * e * 0.8, hr, HAT, 1);\n}\n\n// Ripple rings from every push, step and splash, summed per LED.\nfunction ripples(P, cam) {\n  const RIP = P.rip;\n  RIP.fill(0);\n  for (const q of P.rp) {\n    const R = 0.6 + q.a * 6.5, a = q.s * (1 - q.a / q.life), qx = q.x - cam;\n    for (let y = max(0, floor(q.y - R - 1)); y \u003c= min(H - 1, q.y + R + 1); y++)\n      for (let x = max(0, floor(qx - R - 1)); x \u003c= min(W - 1, qx + R + 1); x++) {\n        const e = abs(sqrt((x - qx) ** 2 + (y - q.y) ** 2) - R);\n        if (e \u003c 0.8) RIP[y * W + x] += a * (1 - e / 0.8);\n      }\n  }\n}\n\n// The bunds, the levee, the nursery, and the water mirroring the sky.\nfunction ground(P, K, cam, ry) {\n  const f = F, k = P.k, dn = P.dn, t = P.t, w = P.w, h = P.h, RIP = P.rip, CD = P.cd, CS = P.cs, NZ = P.nz, HT = P.ht, TB = P.tb;\n  const ox = floor(P.ox), oy = floor(P.oy), wo = floor(t * (3 + 6 * w)), ws = 0.75 - 0.6 * w, wa1 = min(1, w * 4);\n  // The sun's glint, near noon, sliding across the paddy with the hour.\n  const gu = cl((h - 0.22) / 0.56, 0, 1), gs = sm(0.22, 0.38, h) * (1 - sm(0.62, 0.8, h)), gx = 6 + 52 * gu, gy = 70 - 30 * sin(PI * gu);\n  // The nursery bed is bare where the seedlings have been pulled.\n  const BM = P.bm;\n  BM.fill(0);\n  for (const [a, b] of [...P.pu.old, [P.pu.x + 2, P.pu.x1]]) for (let x = max(0, ceil(a - cam)); x \u003c= min(W - 1, b - cam); x++) BM[x] = 1;\n  // How muddy the water is on each row of this paddy: churned round the\n  // crew's feet and behind them, settling further back.\n  for (let y = 0; y \u003c H; y++) {\n    const ds = (ry - y) * dn;\n    TB[y] = P.sl >= 0 ? 0.22 : sm(-14, -9, ds) * (0.16 + 0.3 * exp(-max(0, ds) / 14));\n  }\n  const [z0, z1, z2, s0, s1, s2, l0, l1, l2, h0, h1, h2, , , , mist] = K.slice(1), L0 = L[0], L1 = L[1], L2 = L[2], M0 = MUD[0] * L0, M1 = MUD[1] * L1, M2 = MUD[2] * L2;\n  const m0 = mix(s0, 250, 0.6), m1 = mix(s1, 250, 0.6), m2 = mix(s2, 250, 0.6), my = floor(t * 1.5), mx = floor(t * 2.5) + 40;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, wx = x + cam, kk = floor(wx / PW), lx = wx - kk * PW, o = i * 3, hv = HT[(wx & 127) | (y \u003c\u003c 7)];\n    const wet = y >= 3 && y \u003c= 103 && lx >= 3 ? 1 : y === 110 || y === 116 || y === 122 ? 0.7 : 0;\n    if (!wet) {\n      let c = GRASS, v = 0.8 + 0.4 * hv;\n      if (y >= 110) {\n        const bare = y >= 117 && y \u003c= 121 && BM[x];\n        (c = bare ? MUD : NUR), (v = bare ? 0.55 + 0.3 * hv : (y === 111 || y === 115 || y === 117 || y === 121 || y === 123 ? 0.62 : 0.72) + 0.45 * hv);\n      } else if (y >= 104) (c = y >= 106 && y \u003c= 108 ? EARTH : GRASS), (v = y === 104 ? 0.6 + 0.3 * hv : v);\n      else if (y \u003c 3 ? y === 1 : lx === 1) (c = EARTH), (v = 0.75 + 0.35 * hv);\n      else if (y === 2 || (y > 2 && lx === 2)) v *= 0.7;\n      f[o] = c[0] * v * L0;\n      f[o + 1] = c[1] * v * L1;\n      f[o + 2] = c[2] * v * L2;\n      continue;\n    }\n    const ci = ((y + oy) & 127) * 128 + ((x + ox) & 127), cd = CD[ci], cs = CS[ci], g = (0.28 * x) / 63 + 0.52 * (1 - y / 127);\n    let br = 0.9;\n    if (wa1 > 0) {\n      const nz = NZ[(((y >> 1) + wo) & 127) | ((((x >> 1) + (wo >> 1)) & 127) \u003c\u003c 7)];\n      // A cat's paw darkens the mirror and breaks it into glitter.\n      if (nz > ws) {\n        const wa = sm(ws, ws + 0.16, nz) * wa1;\n        br *= 1 - 0.3 * wa;\n        if (HT[((x * 5 + wo * 3) & 127) | (((y + wo) & 127) \u003c\u003c 7)] > 0.87) br += 0.45 * wa;\n      }\n    }\n    const tb = kk \u003c k ? 0.22 : kk === k && wet === 1 ? TB[y] : 0, rp = RIP[i];\n    let gl = 0;\n    if (gs > 0 && abs(x - gx) \u003c 16) {\n      gl = gs * exp(-((x - gx) ** 2 + ((y - gy) * 0.8) ** 2) / 40) * (1 - tb);\n      if (w > 0.1) gl *= mix(1, HT[((x * 7 + wo) & 127) | (y \u003c\u003c 7)] > 0.75 ? 2.6 : 0.25, w);\n    }\n    const r0 = z0 + (s0 - z0) * g, r1 = z1 + (s1 - z1) * g, r2 = z2 + (s2 - z2) * g;\n    const q0 = (r0 + (h0 + (l0 - h0) * cs - r0) * cd) * br, q1 = (r1 + (h1 + (l1 - h1) * cs - r1) * cd) * br, q2 = (r2 + (h2 + (l2 - h2) * cs - r2) * cd) * br;\n    // Morning mist lies over the water in drifting banks.\n    let ms = mist > 0.01 ? (NZ[((((y >> 1) + my) & 127) \u003c\u003c 7) | ((x + mx) & 127)] - 0.5) * 2.4 : 0;\n    ms = ms > 0 ? mist * min(ms, 0.7) : 0;\n    const m = 0.7 + 0.4 * hv, wk = wet \u003c 1 ? 0.8 : 1, c0 = (q0 + (M0 * m - q0) * tb + rp * (60 + 0.35 * q0) + 255 * L0 * gl) * wk;\n    const c1 = (q1 + (M1 * m - q1) * tb + rp * (60 + 0.35 * q1) + 255 * L1 * gl) * wk, c2 = (q2 + (M2 * m - q2) * tb + rp * (60 + 0.35 * q2) + 255 * L2 * gl) * wk;\n    f[o] = c0 + (m0 - c0) * ms;\n    f[o + 1] = c1 + (m1 - c1) * ms;\n    f[o + 2] = c2 + (m2 - c2) * ms;\n  }\n}\n\n// The rope with its markers, one per hill still to plant, and every hill\n// planted so far, leaning and swaying with the wind.\nfunction field(P, cam, ry) {\n  const k = P.k, dn = P.dn, t = P.t, w = P.w, x0 = k * PW - cam;\n  if (P.sl \u003c 0) {\n    const yr = round(ry);\n    for (let x = 1; x \u003c= 62; x++) put(x0 + x, yr, ROPE, 0.85);\n    if (P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) put(x0 + HX(j), yr, MARK[j % 3 === 2 ? 1 : 0]);\n  }\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW) && kk \u003c= k; kk++) {\n    const xk = kk * PW - cam;\n    for (let gi = 0; gi \u003c NR; gi++) {\n      const y = 5 + 4 * gi, ord = kk \u003c k ? -1 : dn > 0 ? gi : NR - 1 - gi;\n      if (kk === k && ord > P.r) continue;\n      for (let j = 0; j \u003c NH; j++) {\n        if (kk === k && ord === P.r && !P.fl[j]) continue;\n        const x = xk + HX(j), v = 0.85 + 0.3 * hash(kk * 31 + j, gi), sw = sin(t * 2.6 + x * 0.3 + y * 0.15) * (0.25 + 0.9 * w) + 0.9 * w, ln = round(cl(sw, -1, 1));\n        put(x, y, SEED, v);\n        put(x + ln, y - 1, LEAF, v);\n        put(x + (v > 1 ? 1 : -1), y, LEAF, 0.75 * v);\n      }\n    }\n  }\n}\n\n// The egret: wading with its neck folded (out in a strike), or on the wing.\nfunction egretDraw(P, cam) {\n  const E = P.eg, pts = [];\n  if (E.m === 0) {\n    const nk = E.sk >= 0 ? 1.8 + 2.4 * sin(PI * E.sk) : 1.8;\n    for (let u = -3.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -1.5; v \u003c= 1.5; v += 0.5) if ((u + 1) ** 2 / 6.5 + (v * v) / 2.1 \u003c= 1) pts.push([u, v, WHITE, 0.9 + 0.06 * v]);\n    for (let u = 2; u \u003c= nk + 0.5; u += 0.5) pts.push([u, 0.5 * sin(u * 1.6), WHITE, 1]);\n    pts.push([nk + 1, 0, WHITE, 1], [nk + 2, 0, BILL, 1], [nk + 2.8, 0, BILL, 0.8]);\n    spr(E.x - cam + 1, E.y + 1, E.a, pts.map(([u, v]) => [u, v, 0, 0.7]));\n    spr(E.x - cam, E.y, E.a, pts);\n    return;\n  }\n  const q = sm(0, 1, E.t), ex = mix(E.sx, E.tx, q) - cam, ey = mix(E.sy, E.ty, q) - 8 * sin(PI * E.t), sp = 3 + 3 * abs(sin(P.t * 8));\n  for (let u = -2; u \u003c= 1; u += 0.5) pts.push([u, 0, WHITE, 1], [u, 0.6, WHITE, 0.9], [u, -0.6, WHITE, 0.9]);\n  for (let v = 1; v \u003c= sp; v += 0.5) for (let s = -1; s \u003c= 1; s += 2) pts.push([-0.4 * (v / sp) ** 2, s * v, WHITE, v > sp - 1 ? 0.75 : 1], [0.6 - 0.6 * (v / sp), s * v, WHITE, 0.85]);\n  pts.push([2, 0, WHITE, 1], [3, 0, WHITE, 1], [4, 0, BILL, 1]);\n  spr(ex, ey, E.a, pts);\n}\n\n// The crew and the rope holders on the bunds, all in straw hats.\nfunction crew(P, cam, ry) {\n  const dn = P.dn, x0 = P.k * PW - cam, hr = P.n > 6 ? 2.6 : 3;\n  if (P.sl \u003c 0) {\n    for (let i = 0; i \u003c P.n; i++) {\n      const c = P.crew[i], lag = P.mv >= 0 ? sm(0.15, 1, P.mv) : 1, cy = mix(rowY(P.r, dn), ry, lag) + dn * 4;\n      planter(P, c, x0 + c.home, cy, dn, ry, x0, hr, false);\n    }\n    for (let hx = 1; hx \u003c 63; hx += 61) {\n      put(x0 + hx + (hx \u003c 9 ? -2 : 2), ry + dn * 2, SHIRTS[hx & 7], 0.8);\n      disc(x0 + hx, ry + dn * 0.5, 2, HAT, 1);\n    }\n    return;\n  }\n  const q = sm(0, 1, P.sl), y0 = rowY(NR - 1, dn) + dn * 4, y1 = rowY(0, -dn) - dn * 4, fd = q \u003c 0.5 ? dn : -dn;\n  for (let i = 0; i \u003c P.n; i++) planter(P, P.crew[i], P.crew[i].home, mix(y0, y1, q), fd, 0, 0, hr, true);\n  for (let hx = 1; hx \u003c 63; hx += 61) disc(hx, mix(y0, y1, q) - fd * 4, 2, HAT, 1);\n}\n\n// The carrier on the levee with bundles on his A-frame, the puller in the\n// nursery with the bundles he has tied laid in the channel, and every bundle\n// afloat or in the air.\nfunction helpers(P, cam) {\n  const C = P.ca, cx = C.x - cam, U = P.pu, ux = U.x - cam, pull = sin(P.t * 7);\n  for (const b of P.bu) if (b.ft \u003c 0) spr(b.x - cam, b.y, (b.a * PI) / 4, BUNDLE);\n  // Trays of seedlings from the nursery wait on the levee path.\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW); kk++)\n    for (let tx = 9; tx \u003c 60; tx += 36)\n      for (let dx = 0; dx \u003c 8; dx++)\n        for (let dy = 0; dy \u003c 3; dy++) put(kk * PW + tx + dx - cam, 106 + dy, dx % 7 ? NUR : ROOT, dx % 7 ? 0.75 + 0.4 * hash(dx + tx, dy + kk * 5) : 0.6);\n  for (let dx = -2; dx \u003c= 2; dx++) for (let dy = 2; dy \u003c= 4; dy++) put(cx + dx, 106 + dy, (dx + dy) & 1 ? SEED : LEAF, dy === 2 ? 0.75 : 0.95);\n  put(cx - 2, 109, TIE), put(cx + 2, 109, TIE);\n  if (C.tt > 0) line(cx + 1, 105, cx + 2, 101 + 2 * C.tt, SKIN, 0.9);\n  disc(cx, 106, 2, HAT, 1);\n  for (let bx = U.x + 6; bx \u003c U.x1 - 1; bx += 5) spr(bx - cam, 116, PI / 2, BUNDLE);\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = 2; dx \u003c= 4; dx++) put(ux + dx, 119 + dy, SHIRTS[5], 0.85);\n  line(ux - 1, 118, ux - 2.5 - pull, 118, SKIN, 0.9);\n  line(ux - 1, 120, ux - 2.5 + pull, 120, SKIN, 0.9);\n  disc(ux, 119, 2, HAT, 1);\n}\nfunction thrown(P, cam) {\n  for (const b of P.bu) if (b.ft >= 0) spr(mix(b.fx, b.tx, b.ft) - cam, mix(b.fy, b.ty, b.ft) - 7 * sin(PI * b.ft), b.ft * 9, BUNDLE);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const K = key(P.h), cam = floor(P.cam), ry = ropeY(P), f = (F = P.f);\n  L = [K[13], K[14], K[15]];\n  ripples(P, cam);\n  ground(P, K, cam, ry);\n  field(P, cam, ry);\n  if (P.eg.m === 0) egretDraw(P, cam);\n  crew(P, cam, ry);\n  helpers(P, cam);\n  thrown(P, cam);\n  if (P.eg.m === 1) egretDraw(P, cam);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower."},{"name":"Planters","min":4,"max":8,"about":"Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look."},{"name":"Wind","min":0,"max":1,"about":"Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean."}],"start":[0,2,4,0.06],"measures":{"motion":0.0782,"detail":0.0601,"edges":0.318,"complexity":2.2267,"coverage":1,"colour":0.2886,"drift":0.0509},"knobResponse":[0.2048,0.0848,0.0585,0.1025]},{"slug":"rice-terraces","title":"Rice Terraces","family":"farm","round":25,"note":"세운 패널 아래 끝에서 숲이 선 능선까지 물 댄 다랑논이 등고선처럼 휘어 쌓이고, 논마다 해 뜨는 하늘을 비춰요. 위로 갈수록 층이 얇아지고 노을빛이 짙어지며, 구름 반사가 거울 논들을 가로질러 흘러가고 가까운 논에서는 농부가 물소를 몰아 논을 갈아요. K1 을 돌리면 모가 줄지어 서고 초록으로 덮였다가 누렇게 익고, K1 을 누르면 맨 위 물꼬가 열려 물이 둑을 하나씩 넘어 내려가요.","idea":"Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.","buttons":"K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.","code":"// ===== Patternflow pattern =====\n// Title:   Rice Terraces\n// Family:  farm\n// Idea:    Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Hani rice terraces of Yuanyang and the terraces of Banaue\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1\n//\n// Knob 1: Season. At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble.\n// Knob 2: Speed. At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower.\n// Knob 3: Terraces. How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water.\n// Knob 4: Hour. Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door.\n// Buttons: K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Terrace 0 sits just under the panel, the last one at the ridge. The sky's\n// horizon row, and the classes a LED can belong to.\nconst [YB, YT, YH] = [134, 38, 34];\nconst [SKY, FAR, NEAR, WOOD, WATER, WALL, RIM] = [0, 1, 2, 3, 4, 5, 6];\n// The row of the sky (0 the zenith, 31 the horizon) that the water on each\n// panel row holds: low sky in the far paddies, the sky overhead in the near ones.\nconst RR = F32(H).map((v, y) => 26 - 20 * cl((y - 36) / 92, 0, 1) ** 0.9);\nconst FOAM = [220, 236, 250], LAG = 0.22, AT = [0.82, 0.88, 1], MUD = [7, 5.6, 4.4], STUB = [150, 120, 70];\n\n// Light by the hour: sky at the zenith, sky at the horizon, sunlit cloud,\n// then ambient and direct light and how much mist lies in the valley.\nconst HOURS = [\n  [0, 14, 22, 70, 150, 100, 150, 255, 150, 140, 0.3, 0.12, 1],\n  [0.07, 34, 64, 150, 255, 176, 110, 255, 200, 150, 0.5, 0.55, 0.95],\n  [0.25, 40, 100, 200, 190, 215, 235, 255, 245, 225, 0.7, 0.6, 0.4],\n  [0.5, 36, 96, 206, 170, 205, 240, 255, 255, 250, 0.74, 0.66, 0.15],\n  [0.72, 40, 80, 180, 250, 200, 130, 255, 215, 150, 0.64, 0.56, 0.2],\n  [0.86, 40, 36, 100, 255, 120, 70, 255, 140, 90, 0.42, 0.36, 0.4],\n  [1, 6, 8, 28, 40, 36, 70, 60, 60, 90, 0.16, 0, 0.6],\n];\n// The season: earth wall, bund rim, rice. Flooded, planted, green, ripening, cut.\nconst SEASONS = [\n  [0, 66, 48, 36, 206, 184, 150, 120, 200, 70],\n  [0.35, 60, 74, 40, 150, 196, 96, 110, 204, 60],\n  [0.65, 42, 84, 34, 110, 176, 64, 46, 156, 40],\n  [0.85, 80, 84, 40, 186, 176, 84, 184, 184, 50],\n  [1, 96, 76, 44, 224, 184, 96, 244, 178, 40],\n];\nfunction key(T, u) {\n  let i = 0;\n  while (i \u003c T.length - 2 && u > T[i + 1][0]) i++;\n  const a = T[i], b = T[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ox: 0, mt: 0, n: 0, surge: 99, sk: F32(32 * 3), cl: F32(128 * 32), f: F32(N * 3),\n    cls: new Uint8Array(N), kk: new Int8Array(N), e: F32(N), dep: F32(N), tx: F32(N), walk: [[10 + rnd() * 44, 1], [10 + rnd() * 44, -1]],\n  });\n  P.ox = rnd() * 128;\n  // Egrets: where each stands (column, how far up the steps), and how long it waits.\n  P.birds = [0, 1, 2].map(() => ({ x: 6 + rnd() * 52, kf: 0.05 + rnd() * 0.6, w: 1 + rnd() * 8, p: -1 }));\n  // Cloud noise, 128 columns that wrap and 32 rows from the zenith down.\n  for (let i = 0; i \u003c 128 * 32; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.06, y * 0.22) + 0.3 * vn(X * 0.15, y * 0.5 + 9) + 0.15 * vn(X * 0.4, y + 3);\n    P.cl[i] = mix(f(x), f(x - 128), x / 128);\n  }\n  for (let i = 0; i \u003c N; i++) P.tx[i] = vn((i & 63) * 0.5, (i >> 6) * 0.6);\n}\n\n// The terraces for n steps. A level u climbs the panel in steps that shrink\n// with distance, bent by slow noise into spurs and gullies; each whole value\n// of u is a bund. For each LED: which terrace, and whether it is water, the\n// earth wall under a bund, or the bund's lit rim.\nfunction build(P, n) {\n  const q = 0.28 ** (1 / n), L = -log(q), b0 = ((YB - YT) * L) / (1 - q ** n);\n  const V = (y) => ((y = 1 - ((YB - y) * L) / b0), y > 1e-4 ? log(y) / -L : 99);\n  const { cls, kk, e, dep } = P, u = F32(H + 20), yc = F32(n + 6);\n  const put = (x, y, k, i = y * W + x) => y >= 0 && y \u003c H && cls[i] >= WATER && ((cls[i] = RIM), (kk[i] = k));\n  P.lip = F32((n + 2) * W);\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    // A spur comes down left of centre and a gully cuts in on the right.\n    const sp = 1.3 * exp(-(((x - 24) / 13) ** 2)) - 1 * exp(-(((x - 55) / 9) ** 2));\n    for (let y = H + 19, m = -9; y >= 0; y--) {\n      const v0 = V(y), xs = (x - 32) / (q ** v0) ** 0.4 + 40;\n      const v = v0 + sp + 1.2 * (vn(xs * 0.035, v0 * 0.07) * 2 - 1 + 0.4 * (vn(xs * 0.085 + 7, v0 * 0.15 + 5) * 2 - 1));\n      u[y] = m = max(m, v);\n    }\n    // Where each bund crosses this column, to a fraction of a LED.\n    yc.fill(H + 40);\n    for (let y = H + 18; y >= 0; y--) for (let k = max(-3, floor(u[y + 1]) + 1); k \u003c= min(n, u[y]); k++) yc[k + 3] = y + (u[y] - k) / max(1e-3, u[y] - u[y + 1]);\n    for (let k = 0; k \u003c= n; k++) P.lip[k * W + x] = yc[k + 3];\n    let y = H - 1;\n    for (; y >= 0 && u[y] \u003c n; y--) {\n      const k = max(-3, floor(u[y])), lip = yc[k + 4], bp = yc[k + 3] \u003c H + 40 ? yc[k + 3] - lip : b0, d = y - lip, rh = cl(0.22 * bp - 0.6, 0, 3.5), i = y * W + x;\n      if (d \u003c 1) (cls[i] = RIM), (kk[i] = k + 1);\n      else if (d \u003c 1 + rh) (cls[i] = WALL), (kk[i] = k + 1), (e[i] = (d - 1) / rh);\n      else (cls[i] = WATER), (kk[i] = k), (e[i] = d - 1 - rh), (dep[i] = bp - 1 - rh);\n    }\n    P.ridge[x] = y;\n    const top = y - 5 - 3 * vn(x * 0.35, 4) - abs(sin(x * 0.9)) * 1.5;\n    for (; y >= 0; y--) {\n      const i = y * W + x;\n      cls[i] = y > top ? WOOD : y >= 22 + 4 * sin(0.06 * x + 0.5) + 2.5 * sin(0.17 * x + 2) ? NEAR : y >= 15 + 5 * sin(0.045 * x + 2.4) + 2 * sin(0.13 * x + 1) ? FAR : SKY;\n    }\n  }\n  // Close the rim where a bund steps a row or more from one column to the next.\n  for (let k = 1; k \u003c= n; k++)\n    for (let x = 0; x \u003c W - 1; x++) {\n      let a = ceil(P.lip[k * W + x]), b = ceil(P.lip[k * W + x + 1]), xa = x, xb = x + 1;\n      if (a > b) [a, b, xa, xb] = [b, a, xb, xa];\n      const m = floor((a + b) / 2);\n      for (let y = a + 1; y \u003c b; y++) put(y \u003c= m ? xa : xb, y, k);\n      if (b > a) put(xb, m, k);\n    }\n  // How bright each rim is: faint where the steps are thin and far, and\n  // brighter where the bund turns to face the light.\n  const lp = (k, x) => P.lip[k * W + cl(x, 0, W - 1)];\n  for (let i = 0; i \u003c N; i++)\n    if (cls[i] === RIM) {\n      const k = kk[i], x = i & 63;\n      e[i] = k > 0 ? cl((lp(k - 1, x) - lp(k, x) - 2) / 7, 0.2, 1) : 1;\n      dep[i] = k >= 0 ? lp(k, x + 1) - lp(k, x - 1) : 0;\n    }\n  for (P.kw = 1; P.lip[P.kw * W + 32] > 117; P.kw++);\n  P.n = n;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2);\n  const n = round(cl(k[2], 12, 24));\n  if (n !== P.n) build(P, n);\n  P.s = cl(k[0], 0, 1);\n  P.h = cl(k[3], 0, 1);\n  P.t += d;\n  P.ox += 5 * d;\n  P.mt += d;\n  P.surge += d;\n  if (input.btnPressed && input.btnPressed[0]) P.surge = 0;\n  // The ploughing team and the farmer up on the high bund walk to the end and turn.\n  for (const w of P.walk) {\n    w[0] += w[1] * 2.2 * d;\n    if (w[0] > 56 || w[0] \u003c 6) w[1] = -w[1];\n  }\n  // An egret waits, then flies to another paddy in a low arc.\n  for (const b of P.birds)\n    if (b.p >= 0) {\n      if ((b.p += d / 1.8) >= 1) Object.assign(b, { p: -1, x: b.tx, kf: b.tk, w: 4 + rnd() * 9 });\n    } else if ((b.w -= d) \u003c= 0) Object.assign(b, { p: 0, tx: 6 + rnd() * 52, tk: 0.05 + rnd() * 0.6, y0: egY(P, b.x, b.kf) });\n}\n\n// Where an egret stands: a little behind the bund of its terrace.\nconst egY = (P, x, kf) => P.lip[max(1, round(kf * P.n)) * W + round(cl(x, 0, 63))] - 2;\nfunction egrets(P, L, wet) {\n  const c = lit([250, 248, 240], L);\n  for (const b of P.birds) {\n    if (b.p \u003c 0) {\n      const x = b.x, y = egY(P, x, b.kf);\n      put(x, y, c), put(x, y - 1, c), put(x + 1, y - 2, c), put(x, y + 1, c, 0.35 * wet), put(x, y + 2, c, 0.25 * wet);\n    } else {\n      const y1 = egY(P, b.tx, b.tk), x = mix(b.x, b.tx, b.p), y = mix(b.y0, y1, b.p) - 14 * sin(PI * b.p), up = floor(P.t * 7) & 1;\n      put(x, y, c), put(x - 1, y - up, c), put(x + 1, y - up, c), put(x - 2, y - 2 * up, c, 0.7), put(x + 2, y - 2 * up, c, 0.7);\n    }\n  }\n}\n\n// The sky at table x and row r (0 the zenith, 31 the horizon), with its clouds.\nfunction skyAt(P, K, xx, r, out) {\n  const s = P.sk, c = P.cl, xi = floor(xx), fx = xx - xi, i = r * 128;\n  const v = mix(c[i + (xi & 127)], c[i + ((xi + 1) & 127)], fx), cd = cl((v - 0.46) * 8, 0, 1) * (0.4 + 0.6 * sm(0, 6, 31 - r));\n  const lit = 0.3 + 0.7 * cd;\n  for (let j = 0; j \u003c 3; j++) out[j] = mix(s[r * 3 + j], mix(mix(K[1 + j], K[4 + j], 0.5) * 0.75, K[7 + j], lit), cd * 0.94);\n  return cd;\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], a);\n}\nconst lit = (c, L) => c.map((v, j) => v * L[j]);\n\n// Hani houses: earth walls under tall thatch, lamps in the doors at night,\n// smoke from the hearth of the middle one.\nconst HOUSE = [\"..TTT..\", \".TTTTT.\", \"TTTTTTT\", \".WWDWW.\", \".WWDWW.\"];\nfunction village(P, L, night, amb) {\n  const th = lit([176, 128, 70], L), wa = lit([186, 150, 112], L), dr = night > 0.3 ? [255 * night, 170 * night, 80 * night] : [40, 30, 26];\n  for (const [hx, dy] of [[5, 3], [13, 5], [21, 2]]) {\n    const by = P.ridge[hx] + dy;\n    for (let i = -4; i \u003c= 4; i++) put(hx + i, by + 1, lit([70, 56, 40], L));\n    HOUSE.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && put(hx + i - 3, by - 4 + j, ch === \"T\" ? th.map((v) => v * (j === 2 ? 0.8 : 1)) : ch === \"W\" ? wa : dr)));\n  }\n  const by = P.ridge[13] + 1;\n  for (let j = 0; j \u003c 14; j++) put(14 + j * 0.3 + sin(P.t * 1.3 - j * 0.6) * 0.7, by - 3 - j, [220, 216, 220].map((v) => v * (0.4 + 0.6 * amb)), 0.6 * (1 - j / 14));\n}\n\n// Each bund lets a thread of water down its wall through a gap; when the\n// sluice is open the thread runs wide and white.\nfunction streams(P, fo, I) {\n  for (let k = 1; k \u003c P.n; k++) {\n    const x = 5 + floor(hash(k, 11) * 54), y0 = ceil(P.lip[k * W + x]), f = I[k + 3], w = f > 0.3 ? 1 : 0;\n    for (let y = y0; y \u003c y0 + 5 && y \u003c H; y++) {\n      const C = P.cls[y * W + x];\n      if (y > y0 && C === WATER) {\n        put(x, y, fo, 0.35);\n        break;\n      }\n      const st = (y - floor(P.t * 9)) % 3 === 0 ? 1 : 0.7;\n      for (let i = -w; i \u003c= w; i++) put(x + i, y, fo.map((v) => v * st), 0.85);\n    }\n  }\n}\n\n// A farmer ploughs behind his buffalo in a near paddy, both mirrored in the\n// water, and another farmer walks a high bund.\nconst BUFF = [\"......hh\", \".BBBBBBH\", \"BBBBBBBHH\", \".BBBBBB..\"];\nfunction walkers(P, L, s, sk) {\n  const near = P.walk[0], far = P.walk[1], dir = near[1], k = P.kw, wet = 1 - sm(0.3, 0.6, s);\n  const feet = (x) => P.lip[k * W + round(cl(x, 0, 63))] - 1 - 3 * wet;\n  const fig = (x, y, c) => (put(x, y, c), wet > 0 && put(x, 2 * feet(near[0]) - y + 1, c.map((v, j) => v * 0.6 + sk[60 + j] * 0.2), 0.6 * wet));\n  const bx = near[0], by = feet(bx), fx = bx - 5 * dir;\n  // The furrow of churned water behind them.\n  for (let i = 4; i \u003c 20; i++) put(fx - i * dir, feet(fx - i * dir), [120, 100, 80].map((v, j) => v * L[j]), 0.5 * wet * (1 - i / 20));\n  BUFF.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && fig(bx + (dir > 0 ? i - 4 : 4 - i), by - 3 + j, ch === \"h\" ? lit([230, 220, 200], L) : lit(j > 1 ? [30, 27, 30] : [70, 62, 62], L))));\n  const hat = lit([240, 210, 136], L), body = lit([30, 34, 70], L);\n  for (const [i, j, c] of [[0, -4, hat], [-1, -3, hat], [0, -3, hat], [1, -3, hat], [0, -2, body], [0, -1, body], [-dir, -1, body], [0, 0, body]]) fig(fx + i, by + j, c);\n  // The plough's handle between them.\n  fig(fx + dir, by - 1, [70, 56, 44]), fig(fx + 2 * dir, by, [70, 56, 44]);\n  const k2 = k + round((P.n - k) * 0.55), gx = far[0], gy = P.lip[k2 * W + round(gx)] - 1;\n  put(gx, gy - 1, hat), put(gx, gy, body);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const K = key(HOURS, P.h), S = key(SEASONS, P.s), f = (F = P.f), sk = P.sk, n = P.n, t = P.t, s = P.s, cls = P.cls, tx = P.tx;\n  const [amb, dir, mist] = [K[10], K[11], K[12]], night = sm(0.86, 1, P.h);\n  for (let r = 0; r \u003c 32; r++) {\n    const e = sm(0, 0.65, 1 - r / 31) ** 0.8;\n    for (let j = 0; j \u003c 3; j++) sk[r * 3 + j] = mix(K[4 + j], K[1 + j], e);\n  }\n  // The sun along its day from right to left.\n  const a = cl(P.h / 0.86, 0, 1) * PI, sx = 32 + 26 * cos(a), sy = 16 - 80 * sin(a) ** 1.5, side = sx > 32 ? 1 : -1, rs = 31 - 13 * (1 - sy / YH), sunUp = (1 - sm(11, 15, sy)) * (1 - night);\n  const rice1 = sm(0.1, 0.3, s), rice2 = sm(0.3, 0.6, s), cut = sm(0.88, 1, s);\n  const c = P.cl, ox = P.ox, col = [0, 0, 0], L = [0, 0, 0], L0 = AT.map((v, j) => amb * v + (dir * K[7 + j]) / 255);\n  const sh0 = (0.5 + 0.5 * sm(0, 0.2, P.h)) * (1 - night) * 0.8 * dir;\n  const far = AT.map((v, j) => K[1 + j] * 0.9 + 16), near = [30, 44, 70].map((v) => v * (amb + 0.3)), wood = [28, 66, 32].map((v) => v * 1.3);\n  // How hard water is spilling over each bund: the sluice opens at the top and\n  // the overflow runs down one terrace every LAG seconds.\n  const I = F32(n + 8), HZ = F32(n + 8), fo = FOAM.map((v, j) => mix(v, K[7 + j], 0.3) * (0.4 + 0.6 * sm(0.1, 0.5, amb)));\n  for (let k = -3; k \u003c= n + 1; k++) {\n    const tk = P.surge - (n - k) * LAG;\n    HZ[k + 3] = 0.35 * cl(k / n, 0, 1) ** 1.6;\n    I[k + 3] = tk > 0 ? exp(-tk * 0.9) * sm(0, 0.15, tk) : 0;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, C = cls[i];\n    // Cloud shadow on the hillside, sliding across.\n    const shade = cl((c[((floor(y * 0.22) + 3) & 31) * 128 + (floor(x * 0.75 + ox * 1.2 + 40) & 127)] - 0.48) * 4, 0, 1) * sh0;\n    for (let j = 0; j \u003c 3; j++) L[j] = L0[j] - (shade * K[7 + j]) / 255;\n    if (C \u003c WOOD) {\n      const r = cl(round(31 - 13 * (1 - y / YH)), 0, 31), cd = skyAt(P, K, x * 1.3 + ox, r, col);\n      if (C === SKY) {\n        const ds = Math.hypot(x - sx, (y - sy) * 1.1), g = (1 - night) * (0.5 * exp(-ds / 9) * (1 - cd * 0.6) + (ds \u003c 2.6 ? 1 : 0)), st = night > 0.2 && hash(x, y) > 0.985 ? 200 * night : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] += K[7 + j] * g + st;\n      } else for (let j = 0; j \u003c 3; j++) col[j] = (C === FAR ? mix(sk[84 + j], far[j], 0.45) : mix(sk[84 + j], near[j], 0.75)) * (0.9 + 0.1 * tx[i]);\n    } else if (C === WOOD) for (let j = 0; j \u003c 3; j++) col[j] = wood[j] * (0.6 + 0.6 * tx[i]) * L[j];\n    else {\n      const k = P.kk[i], ee = P.e[i], fl = I[k + 3];\n      if (C === WALL) {\n        // Water sheets down the wall when the terrace above overflows.\n        const st = fl > 0.01 ? 0.85 * fl : 0, sv = st ? 0.5 + 0.5 * sin(y * 1.9 - P.surge * 14 + x * 1.3) ** 2 : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(S[1 + j] * L[j] * (1.05 - 0.4 * ee), fo[j] * sv, st);\n      } else if (C === RIM) {\n        const ra = ee * (0.55 + 0.45 * cl(0.5 + 0.3 * P.dep[i] * side, 0, 1));\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(S[1 + j] * L[j], S[4 + j] * (L[j] + 0.3) + sk[84 + j] * 0.25, ra), fo[j], fl);\n      } else {\n        // The mirror: the far paddies hold the low sky, the near ones the sky\n        // overhead, and each holds its own wall dark along the back.\n        const dp = max(2, P.dep[i]), u = cl(ee / dp, 0, 1), rr = RR[y] - 3 * u, r = round(rr);\n        skyAt(P, K, (x - 32) * (0.4 + r / 40) + 32 + ox + k * 1.5, r, col);\n        const gust = cl((c[((floor(y * 0.3) + 17) & 31) * 128 + (floor(x * 0.5 + ox * 1.6) & 127)] - 0.55) * 5, 0, 1), back = dp > 4 ? 0.5 * exp(-ee / 0.9) : 0;\n        // Ripples run out from the wall when water spills in from above.\n        const fi = I[k + 4], rip = fi > 0.01 ? fi * (0.5 + 0.5 * sin(ee * 1.7 - (P.surge - (n - k - 1) * LAG) * 9)) * 0.5 : 0;\n        // The sun's own path down the paddies that hold its height of sky.\n        const gl = sunUp && abs(x - sx) \u003c 7 ? sunUp * exp(-(((x - sx) / 2.2) ** 2) - ((rr - rs) / 1.3) ** 2) * (1 - 0.6 * gust) * (0.75 + 0.25 * sin(x * 2.3 + y * 1.7 + t * 6)) : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(col[j] * 0.88, sk[45 + j] * 0.55, 0.5 * gust), S[1 + j] * L[j], back * (1 - fi)) + MUD[j] * L[j] + fo[j] * rip + K[7 + j] * gl;\n        // Rice: seedlings in rows along the contour, then a closed crop.\n        const ra = max((x + k) % 2 === 0 && floor(ee) % 2 === 0 ? rice1 : 0, rice2);\n        if (ra > 0) {\n          const v = (floor(ee) & 1 ? 1 : 0.84) * (0.9 + 0.2 * hash(x, y * 7 + k)) * (1 + 0.3 * cl((gust - 0.1) * 2, 0, 1)), isCut = (k * 7 + 23) % 10 \u003c cut * 3.5;\n          for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], (isCut ? STUB[j] * (x % 3 ? 1 : 0.7) : S[7 + j]) * L[j] * v, ra);\n        }\n      }\n      // The far steps fade into the haze.\n      const hz = HZ[k + 3];\n      for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], sk[72 + j] * 0.9, hz);\n    }\n    f[o] = col[0];\n    f[o + 1] = col[1];\n    f[o + 2] = col[2];\n  }\n  // The village under the forest, the bunds' outlets, the farmers.\n  village(P, L0, night, amb);\n  streams(P, fo, I);\n  walkers(P, L0, s, sk);\n  egrets(P, L0, 1 - sm(0.3, 0.6, s));\n  // Mist: a bank in the valley behind the ridge and a thinner one over the steps.\n  const mt = P.mt, y1 = 28 + 4 * sin(mt * 0.4), y2 = 66 + 22 * sin(mt * 0.2 + 1), mc = [0, 1, 2].map((j) => mix(sk[93 + j], 250, 0.55) * (0.7 + 0.3 * amb));\n  for (let y = 0; y \u003c H; y++) {\n    const w1 = mist * 0.9 * exp(-(((y - y1) / 6) ** 2)), w2 = mist * 0.45 * exp(-(((y - y2) / 7) ** 2));\n    if (w1 + w2 \u003c 0.01) continue;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      const dm = min(0.9, ((cls[i] \u003c WOOD ? w1 : 0) + w2) * (0.4 + 0.6 * vn(x * 0.08 + mt * 0.3, y * 0.2)));\n      for (let j = 0; j \u003c 3; j++) f[i * 3 + j] = mix(f[i * 3 + j], mc[j], dm);\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","layer":{"id":"layer-rice-terraces","type":"code","name":"rice-terraces","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rice Terraces\n// Family:  farm\n// Idea:    Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Hani rice terraces of Yuanyang and the terraces of Banaue\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1\n//\n// Knob 1: Season. At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble.\n// Knob 2: Speed. At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower.\n// Knob 3: Terraces. How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water.\n// Knob 4: Hour. Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door.\n// Buttons: K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Terrace 0 sits just under the panel, the last one at the ridge. The sky's\n// horizon row, and the classes a LED can belong to.\nconst [YB, YT, YH] = [134, 38, 34];\nconst [SKY, FAR, NEAR, WOOD, WATER, WALL, RIM] = [0, 1, 2, 3, 4, 5, 6];\n// The row of the sky (0 the zenith, 31 the horizon) that the water on each\n// panel row holds: low sky in the far paddies, the sky overhead in the near ones.\nconst RR = F32(H).map((v, y) => 26 - 20 * cl((y - 36) / 92, 0, 1) ** 0.9);\nconst FOAM = [220, 236, 250], LAG = 0.22, AT = [0.82, 0.88, 1], MUD = [7, 5.6, 4.4], STUB = [150, 120, 70];\n\n// Light by the hour: sky at the zenith, sky at the horizon, sunlit cloud,\n// then ambient and direct light and how much mist lies in the valley.\nconst HOURS = [\n  [0, 14, 22, 70, 150, 100, 150, 255, 150, 140, 0.3, 0.12, 1],\n  [0.07, 34, 64, 150, 255, 176, 110, 255, 200, 150, 0.5, 0.55, 0.95],\n  [0.25, 40, 100, 200, 190, 215, 235, 255, 245, 225, 0.7, 0.6, 0.4],\n  [0.5, 36, 96, 206, 170, 205, 240, 255, 255, 250, 0.74, 0.66, 0.15],\n  [0.72, 40, 80, 180, 250, 200, 130, 255, 215, 150, 0.64, 0.56, 0.2],\n  [0.86, 40, 36, 100, 255, 120, 70, 255, 140, 90, 0.42, 0.36, 0.4],\n  [1, 6, 8, 28, 40, 36, 70, 60, 60, 90, 0.16, 0, 0.6],\n];\n// The season: earth wall, bund rim, rice. Flooded, planted, green, ripening, cut.\nconst SEASONS = [\n  [0, 66, 48, 36, 206, 184, 150, 120, 200, 70],\n  [0.35, 60, 74, 40, 150, 196, 96, 110, 204, 60],\n  [0.65, 42, 84, 34, 110, 176, 64, 46, 156, 40],\n  [0.85, 80, 84, 40, 186, 176, 84, 184, 184, 50],\n  [1, 96, 76, 44, 224, 184, 96, 244, 178, 40],\n];\nfunction key(T, u) {\n  let i = 0;\n  while (i \u003c T.length - 2 && u > T[i + 1][0]) i++;\n  const a = T[i], b = T[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ox: 0, mt: 0, n: 0, surge: 99, sk: F32(32 * 3), cl: F32(128 * 32), f: F32(N * 3),\n    cls: new Uint8Array(N), kk: new Int8Array(N), e: F32(N), dep: F32(N), tx: F32(N), walk: [[10 + rnd() * 44, 1], [10 + rnd() * 44, -1]],\n  });\n  P.ox = rnd() * 128;\n  // Egrets: where each stands (column, how far up the steps), and how long it waits.\n  P.birds = [0, 1, 2].map(() => ({ x: 6 + rnd() * 52, kf: 0.05 + rnd() * 0.6, w: 1 + rnd() * 8, p: -1 }));\n  // Cloud noise, 128 columns that wrap and 32 rows from the zenith down.\n  for (let i = 0; i \u003c 128 * 32; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.06, y * 0.22) + 0.3 * vn(X * 0.15, y * 0.5 + 9) + 0.15 * vn(X * 0.4, y + 3);\n    P.cl[i] = mix(f(x), f(x - 128), x / 128);\n  }\n  for (let i = 0; i \u003c N; i++) P.tx[i] = vn((i & 63) * 0.5, (i >> 6) * 0.6);\n}\n\n// The terraces for n steps. A level u climbs the panel in steps that shrink\n// with distance, bent by slow noise into spurs and gullies; each whole value\n// of u is a bund. For each LED: which terrace, and whether it is water, the\n// earth wall under a bund, or the bund's lit rim.\nfunction build(P, n) {\n  const q = 0.28 ** (1 / n), L = -log(q), b0 = ((YB - YT) * L) / (1 - q ** n);\n  const V = (y) => ((y = 1 - ((YB - y) * L) / b0), y > 1e-4 ? log(y) / -L : 99);\n  const { cls, kk, e, dep } = P, u = F32(H + 20), yc = F32(n + 6);\n  const put = (x, y, k, i = y * W + x) => y >= 0 && y \u003c H && cls[i] >= WATER && ((cls[i] = RIM), (kk[i] = k));\n  P.lip = F32((n + 2) * W);\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    // A spur comes down left of centre and a gully cuts in on the right.\n    const sp = 1.3 * exp(-(((x - 24) / 13) ** 2)) - 1 * exp(-(((x - 55) / 9) ** 2));\n    for (let y = H + 19, m = -9; y >= 0; y--) {\n      const v0 = V(y), xs = (x - 32) / (q ** v0) ** 0.4 + 40;\n      const v = v0 + sp + 1.2 * (vn(xs * 0.035, v0 * 0.07) * 2 - 1 + 0.4 * (vn(xs * 0.085 + 7, v0 * 0.15 + 5) * 2 - 1));\n      u[y] = m = max(m, v);\n    }\n    // Where each bund crosses this column, to a fraction of a LED.\n    yc.fill(H + 40);\n    for (let y = H + 18; y >= 0; y--) for (let k = max(-3, floor(u[y + 1]) + 1); k \u003c= min(n, u[y]); k++) yc[k + 3] = y + (u[y] - k) / max(1e-3, u[y] - u[y + 1]);\n    for (let k = 0; k \u003c= n; k++) P.lip[k * W + x] = yc[k + 3];\n    let y = H - 1;\n    for (; y >= 0 && u[y] \u003c n; y--) {\n      const k = max(-3, floor(u[y])), lip = yc[k + 4], bp = yc[k + 3] \u003c H + 40 ? yc[k + 3] - lip : b0, d = y - lip, rh = cl(0.22 * bp - 0.6, 0, 3.5), i = y * W + x;\n      if (d \u003c 1) (cls[i] = RIM), (kk[i] = k + 1);\n      else if (d \u003c 1 + rh) (cls[i] = WALL), (kk[i] = k + 1), (e[i] = (d - 1) / rh);\n      else (cls[i] = WATER), (kk[i] = k), (e[i] = d - 1 - rh), (dep[i] = bp - 1 - rh);\n    }\n    P.ridge[x] = y;\n    const top = y - 5 - 3 * vn(x * 0.35, 4) - abs(sin(x * 0.9)) * 1.5;\n    for (; y >= 0; y--) {\n      const i = y * W + x;\n      cls[i] = y > top ? WOOD : y >= 22 + 4 * sin(0.06 * x + 0.5) + 2.5 * sin(0.17 * x + 2) ? NEAR : y >= 15 + 5 * sin(0.045 * x + 2.4) + 2 * sin(0.13 * x + 1) ? FAR : SKY;\n    }\n  }\n  // Close the rim where a bund steps a row or more from one column to the next.\n  for (let k = 1; k \u003c= n; k++)\n    for (let x = 0; x \u003c W - 1; x++) {\n      let a = ceil(P.lip[k * W + x]), b = ceil(P.lip[k * W + x + 1]), xa = x, xb = x + 1;\n      if (a > b) [a, b, xa, xb] = [b, a, xb, xa];\n      const m = floor((a + b) / 2);\n      for (let y = a + 1; y \u003c b; y++) put(y \u003c= m ? xa : xb, y, k);\n      if (b > a) put(xb, m, k);\n    }\n  // How bright each rim is: faint where the steps are thin and far, and\n  // brighter where the bund turns to face the light.\n  const lp = (k, x) => P.lip[k * W + cl(x, 0, W - 1)];\n  for (let i = 0; i \u003c N; i++)\n    if (cls[i] === RIM) {\n      const k = kk[i], x = i & 63;\n      e[i] = k > 0 ? cl((lp(k - 1, x) - lp(k, x) - 2) / 7, 0.2, 1) : 1;\n      dep[i] = k >= 0 ? lp(k, x + 1) - lp(k, x - 1) : 0;\n    }\n  for (P.kw = 1; P.lip[P.kw * W + 32] > 117; P.kw++);\n  P.n = n;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2);\n  const n = round(cl(k[2], 12, 24));\n  if (n !== P.n) build(P, n);\n  P.s = cl(k[0], 0, 1);\n  P.h = cl(k[3], 0, 1);\n  P.t += d;\n  P.ox += 5 * d;\n  P.mt += d;\n  P.surge += d;\n  if (input.btnPressed && input.btnPressed[0]) P.surge = 0;\n  // The ploughing team and the farmer up on the high bund walk to the end and turn.\n  for (const w of P.walk) {\n    w[0] += w[1] * 2.2 * d;\n    if (w[0] > 56 || w[0] \u003c 6) w[1] = -w[1];\n  }\n  // An egret waits, then flies to another paddy in a low arc.\n  for (const b of P.birds)\n    if (b.p >= 0) {\n      if ((b.p += d / 1.8) >= 1) Object.assign(b, { p: -1, x: b.tx, kf: b.tk, w: 4 + rnd() * 9 });\n    } else if ((b.w -= d) \u003c= 0) Object.assign(b, { p: 0, tx: 6 + rnd() * 52, tk: 0.05 + rnd() * 0.6, y0: egY(P, b.x, b.kf) });\n}\n\n// Where an egret stands: a little behind the bund of its terrace.\nconst egY = (P, x, kf) => P.lip[max(1, round(kf * P.n)) * W + round(cl(x, 0, 63))] - 2;\nfunction egrets(P, L, wet) {\n  const c = lit([250, 248, 240], L);\n  for (const b of P.birds) {\n    if (b.p \u003c 0) {\n      const x = b.x, y = egY(P, x, b.kf);\n      put(x, y, c), put(x, y - 1, c), put(x + 1, y - 2, c), put(x, y + 1, c, 0.35 * wet), put(x, y + 2, c, 0.25 * wet);\n    } else {\n      const y1 = egY(P, b.tx, b.tk), x = mix(b.x, b.tx, b.p), y = mix(b.y0, y1, b.p) - 14 * sin(PI * b.p), up = floor(P.t * 7) & 1;\n      put(x, y, c), put(x - 1, y - up, c), put(x + 1, y - up, c), put(x - 2, y - 2 * up, c, 0.7), put(x + 2, y - 2 * up, c, 0.7);\n    }\n  }\n}\n\n// The sky at table x and row r (0 the zenith, 31 the horizon), with its clouds.\nfunction skyAt(P, K, xx, r, out) {\n  const s = P.sk, c = P.cl, xi = floor(xx), fx = xx - xi, i = r * 128;\n  const v = mix(c[i + (xi & 127)], c[i + ((xi + 1) & 127)], fx), cd = cl((v - 0.46) * 8, 0, 1) * (0.4 + 0.6 * sm(0, 6, 31 - r));\n  const lit = 0.3 + 0.7 * cd;\n  for (let j = 0; j \u003c 3; j++) out[j] = mix(s[r * 3 + j], mix(mix(K[1 + j], K[4 + j], 0.5) * 0.75, K[7 + j], lit), cd * 0.94);\n  return cd;\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], a);\n}\nconst lit = (c, L) => c.map((v, j) => v * L[j]);\n\n// Hani houses: earth walls under tall thatch, lamps in the doors at night,\n// smoke from the hearth of the middle one.\nconst HOUSE = [\"..TTT..\", \".TTTTT.\", \"TTTTTTT\", \".WWDWW.\", \".WWDWW.\"];\nfunction village(P, L, night, amb) {\n  const th = lit([176, 128, 70], L), wa = lit([186, 150, 112], L), dr = night > 0.3 ? [255 * night, 170 * night, 80 * night] : [40, 30, 26];\n  for (const [hx, dy] of [[5, 3], [13, 5], [21, 2]]) {\n    const by = P.ridge[hx] + dy;\n    for (let i = -4; i \u003c= 4; i++) put(hx + i, by + 1, lit([70, 56, 40], L));\n    HOUSE.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && put(hx + i - 3, by - 4 + j, ch === \"T\" ? th.map((v) => v * (j === 2 ? 0.8 : 1)) : ch === \"W\" ? wa : dr)));\n  }\n  const by = P.ridge[13] + 1;\n  for (let j = 0; j \u003c 14; j++) put(14 + j * 0.3 + sin(P.t * 1.3 - j * 0.6) * 0.7, by - 3 - j, [220, 216, 220].map((v) => v * (0.4 + 0.6 * amb)), 0.6 * (1 - j / 14));\n}\n\n// Each bund lets a thread of water down its wall through a gap; when the\n// sluice is open the thread runs wide and white.\nfunction streams(P, fo, I) {\n  for (let k = 1; k \u003c P.n; k++) {\n    const x = 5 + floor(hash(k, 11) * 54), y0 = ceil(P.lip[k * W + x]), f = I[k + 3], w = f > 0.3 ? 1 : 0;\n    for (let y = y0; y \u003c y0 + 5 && y \u003c H; y++) {\n      const C = P.cls[y * W + x];\n      if (y > y0 && C === WATER) {\n        put(x, y, fo, 0.35);\n        break;\n      }\n      const st = (y - floor(P.t * 9)) % 3 === 0 ? 1 : 0.7;\n      for (let i = -w; i \u003c= w; i++) put(x + i, y, fo.map((v) => v * st), 0.85);\n    }\n  }\n}\n\n// A farmer ploughs behind his buffalo in a near paddy, both mirrored in the\n// water, and another farmer walks a high bund.\nconst BUFF = [\"......hh\", \".BBBBBBH\", \"BBBBBBBHH\", \".BBBBBB..\"];\nfunction walkers(P, L, s, sk) {\n  const near = P.walk[0], far = P.walk[1], dir = near[1], k = P.kw, wet = 1 - sm(0.3, 0.6, s);\n  const feet = (x) => P.lip[k * W + round(cl(x, 0, 63))] - 1 - 3 * wet;\n  const fig = (x, y, c) => (put(x, y, c), wet > 0 && put(x, 2 * feet(near[0]) - y + 1, c.map((v, j) => v * 0.6 + sk[60 + j] * 0.2), 0.6 * wet));\n  const bx = near[0], by = feet(bx), fx = bx - 5 * dir;\n  // The furrow of churned water behind them.\n  for (let i = 4; i \u003c 20; i++) put(fx - i * dir, feet(fx - i * dir), [120, 100, 80].map((v, j) => v * L[j]), 0.5 * wet * (1 - i / 20));\n  BUFF.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && fig(bx + (dir > 0 ? i - 4 : 4 - i), by - 3 + j, ch === \"h\" ? lit([230, 220, 200], L) : lit(j > 1 ? [30, 27, 30] : [70, 62, 62], L))));\n  const hat = lit([240, 210, 136], L), body = lit([30, 34, 70], L);\n  for (const [i, j, c] of [[0, -4, hat], [-1, -3, hat], [0, -3, hat], [1, -3, hat], [0, -2, body], [0, -1, body], [-dir, -1, body], [0, 0, body]]) fig(fx + i, by + j, c);\n  // The plough's handle between them.\n  fig(fx + dir, by - 1, [70, 56, 44]), fig(fx + 2 * dir, by, [70, 56, 44]);\n  const k2 = k + round((P.n - k) * 0.55), gx = far[0], gy = P.lip[k2 * W + round(gx)] - 1;\n  put(gx, gy - 1, hat), put(gx, gy, body);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const K = key(HOURS, P.h), S = key(SEASONS, P.s), f = (F = P.f), sk = P.sk, n = P.n, t = P.t, s = P.s, cls = P.cls, tx = P.tx;\n  const [amb, dir, mist] = [K[10], K[11], K[12]], night = sm(0.86, 1, P.h);\n  for (let r = 0; r \u003c 32; r++) {\n    const e = sm(0, 0.65, 1 - r / 31) ** 0.8;\n    for (let j = 0; j \u003c 3; j++) sk[r * 3 + j] = mix(K[4 + j], K[1 + j], e);\n  }\n  // The sun along its day from right to left.\n  const a = cl(P.h / 0.86, 0, 1) * PI, sx = 32 + 26 * cos(a), sy = 16 - 80 * sin(a) ** 1.5, side = sx > 32 ? 1 : -1, rs = 31 - 13 * (1 - sy / YH), sunUp = (1 - sm(11, 15, sy)) * (1 - night);\n  const rice1 = sm(0.1, 0.3, s), rice2 = sm(0.3, 0.6, s), cut = sm(0.88, 1, s);\n  const c = P.cl, ox = P.ox, col = [0, 0, 0], L = [0, 0, 0], L0 = AT.map((v, j) => amb * v + (dir * K[7 + j]) / 255);\n  const sh0 = (0.5 + 0.5 * sm(0, 0.2, P.h)) * (1 - night) * 0.8 * dir;\n  const far = AT.map((v, j) => K[1 + j] * 0.9 + 16), near = [30, 44, 70].map((v) => v * (amb + 0.3)), wood = [28, 66, 32].map((v) => v * 1.3);\n  // How hard water is spilling over each bund: the sluice opens at the top and\n  // the overflow runs down one terrace every LAG seconds.\n  const I = F32(n + 8), HZ = F32(n + 8), fo = FOAM.map((v, j) => mix(v, K[7 + j], 0.3) * (0.4 + 0.6 * sm(0.1, 0.5, amb)));\n  for (let k = -3; k \u003c= n + 1; k++) {\n    const tk = P.surge - (n - k) * LAG;\n    HZ[k + 3] = 0.35 * cl(k / n, 0, 1) ** 1.6;\n    I[k + 3] = tk > 0 ? exp(-tk * 0.9) * sm(0, 0.15, tk) : 0;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, C = cls[i];\n    // Cloud shadow on the hillside, sliding across.\n    const shade = cl((c[((floor(y * 0.22) + 3) & 31) * 128 + (floor(x * 0.75 + ox * 1.2 + 40) & 127)] - 0.48) * 4, 0, 1) * sh0;\n    for (let j = 0; j \u003c 3; j++) L[j] = L0[j] - (shade * K[7 + j]) / 255;\n    if (C \u003c WOOD) {\n      const r = cl(round(31 - 13 * (1 - y / YH)), 0, 31), cd = skyAt(P, K, x * 1.3 + ox, r, col);\n      if (C === SKY) {\n        const ds = Math.hypot(x - sx, (y - sy) * 1.1), g = (1 - night) * (0.5 * exp(-ds / 9) * (1 - cd * 0.6) + (ds \u003c 2.6 ? 1 : 0)), st = night > 0.2 && hash(x, y) > 0.985 ? 200 * night : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] += K[7 + j] * g + st;\n      } else for (let j = 0; j \u003c 3; j++) col[j] = (C === FAR ? mix(sk[84 + j], far[j], 0.45) : mix(sk[84 + j], near[j], 0.75)) * (0.9 + 0.1 * tx[i]);\n    } else if (C === WOOD) for (let j = 0; j \u003c 3; j++) col[j] = wood[j] * (0.6 + 0.6 * tx[i]) * L[j];\n    else {\n      const k = P.kk[i], ee = P.e[i], fl = I[k + 3];\n      if (C === WALL) {\n        // Water sheets down the wall when the terrace above overflows.\n        const st = fl > 0.01 ? 0.85 * fl : 0, sv = st ? 0.5 + 0.5 * sin(y * 1.9 - P.surge * 14 + x * 1.3) ** 2 : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(S[1 + j] * L[j] * (1.05 - 0.4 * ee), fo[j] * sv, st);\n      } else if (C === RIM) {\n        const ra = ee * (0.55 + 0.45 * cl(0.5 + 0.3 * P.dep[i] * side, 0, 1));\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(S[1 + j] * L[j], S[4 + j] * (L[j] + 0.3) + sk[84 + j] * 0.25, ra), fo[j], fl);\n      } else {\n        // The mirror: the far paddies hold the low sky, the near ones the sky\n        // overhead, and each holds its own wall dark along the back.\n        const dp = max(2, P.dep[i]), u = cl(ee / dp, 0, 1), rr = RR[y] - 3 * u, r = round(rr);\n        skyAt(P, K, (x - 32) * (0.4 + r / 40) + 32 + ox + k * 1.5, r, col);\n        const gust = cl((c[((floor(y * 0.3) + 17) & 31) * 128 + (floor(x * 0.5 + ox * 1.6) & 127)] - 0.55) * 5, 0, 1), back = dp > 4 ? 0.5 * exp(-ee / 0.9) : 0;\n        // Ripples run out from the wall when water spills in from above.\n        const fi = I[k + 4], rip = fi > 0.01 ? fi * (0.5 + 0.5 * sin(ee * 1.7 - (P.surge - (n - k - 1) * LAG) * 9)) * 0.5 : 0;\n        // The sun's own path down the paddies that hold its height of sky.\n        const gl = sunUp && abs(x - sx) \u003c 7 ? sunUp * exp(-(((x - sx) / 2.2) ** 2) - ((rr - rs) / 1.3) ** 2) * (1 - 0.6 * gust) * (0.75 + 0.25 * sin(x * 2.3 + y * 1.7 + t * 6)) : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(col[j] * 0.88, sk[45 + j] * 0.55, 0.5 * gust), S[1 + j] * L[j], back * (1 - fi)) + MUD[j] * L[j] + fo[j] * rip + K[7 + j] * gl;\n        // Rice: seedlings in rows along the contour, then a closed crop.\n        const ra = max((x + k) % 2 === 0 && floor(ee) % 2 === 0 ? rice1 : 0, rice2);\n        if (ra > 0) {\n          const v = (floor(ee) & 1 ? 1 : 0.84) * (0.9 + 0.2 * hash(x, y * 7 + k)) * (1 + 0.3 * cl((gust - 0.1) * 2, 0, 1)), isCut = (k * 7 + 23) % 10 \u003c cut * 3.5;\n          for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], (isCut ? STUB[j] * (x % 3 ? 1 : 0.7) : S[7 + j]) * L[j] * v, ra);\n        }\n      }\n      // The far steps fade into the haze.\n      const hz = HZ[k + 3];\n      for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], sk[72 + j] * 0.9, hz);\n    }\n    f[o] = col[0];\n    f[o + 1] = col[1];\n    f[o + 2] = col[2];\n  }\n  // The village under the forest, the bunds' outlets, the farmers.\n  village(P, L0, night, amb);\n  streams(P, fo, I);\n  walkers(P, L0, s, sk);\n  egrets(P, L0, 1 - sm(0.3, 0.6, s));\n  // Mist: a bank in the valley behind the ridge and a thinner one over the steps.\n  const mt = P.mt, y1 = 28 + 4 * sin(mt * 0.4), y2 = 66 + 22 * sin(mt * 0.2 + 1), mc = [0, 1, 2].map((j) => mix(sk[93 + j], 250, 0.55) * (0.7 + 0.3 * amb));\n  for (let y = 0; y \u003c H; y++) {\n    const w1 = mist * 0.9 * exp(-(((y - y1) / 6) ** 2)), w2 = mist * 0.45 * exp(-(((y - y2) / 7) ** 2));\n    if (w1 + w2 \u003c 0.01) continue;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      const dm = min(0.9, ((cls[i] \u003c WOOD ? w1 : 0) + w2) * (0.4 + 0.6 * vn(x * 0.08 + mt * 0.3, y * 0.2)));\n      for (let j = 0; j \u003c 3; j++) f[i * 3 + j] = mix(f[i * 3 + j], mc[j], dm);\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower."},{"name":"Terraces","min":12,"max":24,"about":"How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water."},{"name":"Hour","min":0,"max":1,"about":"Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door."}],"start":[0,2,12,0.06],"measures":{"motion":0.0809,"detail":0.0942,"edges":0.423,"complexity":2.2579,"coverage":1,"colour":0.1716,"drift":0.0563},"knobResponse":[0.1151,0.0688,0.1253,0.4152]},{"slug":"ripple-tank","title":"Ripple Tank","family":"sim","round":1,"note":"빗방울이 떨어진 자리마다 고리가 퍼지고 벽에 부딪혀 되돌아와 서로 겹쳐요.","idea":"Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-ripple-tank","type":"code","name":"ripple-tank","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the crests round the colour wheel; the troughs stay deep blue."},{"name":"Rain","min":0.5,"max":6,"about":"Drops per second."},{"name":"Damping","min":0,"max":1,"about":"How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far."},{"name":"Drop","min":2.5,"max":6,"about":"Size of each drop; small drops throw fine rings, big ones a slow swell."}],"start":[0,2,0,2.5],"measures":{"motion":4.7512,"detail":0.0907,"edges":0.3794,"complexity":1.2184,"coverage":0.4445,"colour":0.2076,"drift":0.234},"knobResponse":[0.0799,0.2629,0.1082,0.1339]},{"slug":"rule-scroll","title":"Rule Scroll","family":"automata","round":1,"note":"64칸 한 줄이 이웃을 보고 다음 줄을 써 내려가요. 8비트 숫자 하나가 삼각형이 될지 잡음이 될지 정해요.","idea":"A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.","buttons":"K1 tap starts again from a single cell.","code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","layer":{"id":"layer-rule-scroll","type":"code","name":"rule-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from 3 to 24, one row each."},{"name":"Rule","min":0,"max":11,"about":"Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126."},{"name":"Noise","min":0,"max":1,"about":"Random flips each generation, which show as white sparks and break ordered rules open."}],"start":[0,2,0,0.06],"measures":{"motion":3.3184,"detail":0.3747,"edges":0.8011,"complexity":0.6155,"coverage":0.494,"colour":0.4373,"drift":0.0401},"knobResponse":[0.2576,0.1939,0.2319,0.0376]},{"slug":"sandpile","title":"Sandpile","family":"automata","round":21,"note":"한 칸에 모래알이 넷 모이면 이웃 넷에 하나씩 넘기는 쟁반에 모래가 한 줌씩 떨어져요. 사태가 떨어진 자리에서 빛나는 고리로 번지며 네 색 레이스를 다시 쓰고, 쟁반이 다 차면 기울어 모래를 쏟아요.","idea":"Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.","buttons":"K1 tap tips the tray now.","code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","layer":{"id":"layer-sandpile","type":"code","name":"sandpile","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon."},{"name":"Speed","min":0.2,"max":3,"about":"Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile."},{"name":"Sources","min":1,"max":5,"about":"How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre."},{"name":"Scatter","min":0,"max":1,"about":"How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray."}],"start":[0,2,1,0.06],"measures":{"motion":0.6394,"detail":0.335,"edges":0.8978,"complexity":0.6311,"coverage":0.8294,"colour":0.2844,"drift":0.1509},"knobResponse":[0.2234,0.3094,0.3442,0.2665]},{"slug":"satin-fold","title":"Satin Fold","family":"cosmetic","round":30,"note":"한 점에 잡힌 연한 새틴이 부채꼴 주름으로 흔들리고, 광택이 주름을 따라 긴 줄로 서요. 금색 실 하나가 천을 건너며 주름마다 휘어요.","idea":"A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.","buttons":"K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Satin Fold\n// Family:  cosmetic\n// Idea:    A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after satin weave sheen and gold-foil packaging; the sheen is a fibre highlight (James Kajiya and Timothy Kay, 1989) with an anisotropic lobe (Gregory Ward, 1992)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1\n//\n// Knob 1: Hue. The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac.\n// Knob 2: Speed. How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half.\n// Knob 3: Folds. One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5.\n// Knob 4: Gold. The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon.\n// Buttons: K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.\n\nconst W = 64, H = 128;\nconst { sin, cos, sqrt, exp, floor, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The first fold family is a fan: the cloth is held at a point 160 LEDs\n// above the panel's middle and a little left, and 22 folds a radian hang from\n// it, tight at the top of the panel and wide at the bottom.\nconst PX = -14, PY = -160, FAN = 22, FAN_A = 6.5, RC = 160;\n// The others are straight waves: crest angle in degrees, wavelength in LEDs,\n// height in LEDs, bend of the crest, travel in radians a second at Speed 1,\n// swell phase. The last is pressed: its profile has sharp valleys. The first\n// row stands for the fan, which reads only its travel and phase from it.\nconst FOLDS = [\n  [0, 1, 0, 0, 0.42, 0.0],\n  [58, 46, 4.2, -0.004, -0.33, 2.1],\n  [100, 30, 2.6, 0.007, 0.55, 4.0],\n  [128, 24, 1.8, -0.008, -0.71, 1.2],\n  [76, 28, 1.4, 0.004, 0.62, 3.3],\n].map(([ang, lam, A, c, w, ph]) => {\n  const a = (ang * PI) / 180;\n  return { tx: cos(a), ty: sin(a), nx: -sin(a), ny: cos(a), k: (2 * PI) / lam, A, c, w, ph };\n});\n\n// Light from the left, a little above and in front; the eye straight on.\n// y runs down.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.6, -0.35, 0.72);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The floats of the satin weave run nearly across the panel, rising a little\n// to the right, so they cross the hanging folds and catch the light only\n// where they tilt square to the half vector.\nconst FX = 0.985, FY = -0.17;\n// The gold line in the cloth's own coordinates: through the middle, going\n// down to the right, bowed a little.\nconst [GX, GY] = (() => {\n  const l = Math.hypot(0.42, 1);\n  return [0.42 / l, 1 / l];\n})();\nconst MX = -GY, MY = GX;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The satin's ramp from the deepest hollow (0) to the brightest sheen (1):\n// the hue deep and saturated in the hollows, pale over the body, near white\n// in the streaks.\nconst RAMP = 256;\nfunction ramp(P) {\n  const hue = P.hue + 0.975;\n  for (let i = 0; i \u003c RAMP; i++) {\n    const s = i / (RAMP - 1);\n    let sat, val;\n    if (s \u003c 0.5) {\n      const u = s / 0.5;\n      sat = 0.46 + (0.18 - 0.46) * u;\n      val = 0.5 + (0.8 - 0.5) * u;\n    } else {\n      const u = (s - 0.5) / 0.5;\n      sat = 0.18 + (0.04 - 0.18) * u;\n      val = 0.8 + (0.97 - 0.8) * u;\n    }\n    hsv(hue - 0.015 * (1 - s), sat, val, P.lut, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = {\n    t: 0, clock: 0, hue: 0, speed: 2, folds: 1, gold: 0.06, gust: -1,\n    lut: new Float32Array(RAMP * 3), lutHue: NaN, cw: new Float32Array(W), cd: new Float32Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.folds = cl(k[2], 1, 5);\n  P.gold = cl(k[3], 0, 1);\n  P.t += d * P.speed;\n  P.clock += d;\n  if (P.gust >= 0) {\n    P.gust += d / 2.5;\n    if (P.gust >= 1) P.gust = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) P.gust = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) ramp(P);\n  const T = P.t, F = P.folds, lut = P.lut;\n  // Each family fades in over one step of Folds, and the whole cloth gets\n  // deeper as it does.\n  const depth = 0.75 + 0.18 * (F - 1);\n  const act = [];\n  for (let i = 0; i \u003c FOLDS.length; i++) {\n    const f = FOLDS[i], wgt = sm(0, 1, F - i);\n    if (wgt \u003c= 0) continue;\n    const swell = 0.72 + 0.28 * sin(0.37 * T + f.ph);\n    act.push({ ...f, A: (i ? f.A * swell : FAN_A) * wgt * depth, phase: f.w * T + f.ph, press: i === 4 });\n  }\n  const na = act.length, fan = act[0];\n  let tot = 0;\n  for (const f of act) tot += f.A;\n  // The gust: one ridge across the sheet that runs from the bottom up.\n  let gA = 0, gy0 = 0;\n  if (P.gust >= 0) {\n    gA = 5.5 * sin(PI * P.gust);\n    gy0 = 80 - 190 * P.gust;\n  }\n  const wa = 3.2;\n  // The panel sees the cloth a little from below, so a line on it shifts\n  // with the height of the cloth under it: 0.65 LED a LED of height at one\n  // fold family, less on the deep drapes.\n  const lean = 0.65 / (1 + 0.15 * (F - 1));\n  const g = P.gold, gAlpha = sm(0, 0.04, g), hw = 0.6 + 6 * g, sw = 1 + 2.5 * g;\n  const gf = 0.11 + 0.11 * g, gT = P.clock * (0.6 + 0.4 * P.speed);\n  // The warp's sideways part, one value a column.\n  const CW = P.cw, CD = P.cd;\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - 31.5) * 0.07 - T * 0.17 + 1.3;\n    CW[x] = wa * sin(u);\n    CD[x] = wa * 0.07 * cos(u);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const py = y - 63.5;\n    const s1 = sin(py * 0.045 + T * 0.23), c1 = cos(py * 0.045 + T * 0.23);\n    const dxdy = wa * 0.045 * c1;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5;\n      const dydx = CD[x];\n      const qx = px + wa * s1, qy = py + CW[x];\n      let h = 0, gx = 0, gy = 0;\n      {\n        // The fan: the fold phase goes with the angle round the point it\n        // hangs from, and leans with the distance. Its height grows as the\n        // square root of the distance, and a swell runs down it.\n        const dx = qx - PX, dy = qy - PY, r2 = dx * dx + dy * dy, r = sqrt(r2);\n        const th = FAN * Math.atan2(dx, dy) + 0.025 * r - fan.phase;\n        const sv = 0.045 * r - 0.5 * T, ms = 0.75 + 0.25 * sin(sv), rr = sqrt(r / RC);\n        const A = fan.A * rr * ms, dA = A / (2 * r) + fan.A * rr * 0.01125 * cos(sv);\n        const sn = sin(th), cs = cos(th);\n        h += A * sn;\n        const gr = dA * sn + A * cs * 0.025, ga = (A * cs * FAN) / r2;\n        gx += (gr * dx) / r + ga * dy;\n        gy += (gr * dy) / r - ga * dx;\n      }\n      for (let j = 1; j \u003c na; j++) {\n        const f = act[j];\n        const a = qx * f.tx + qy * f.ty, s = qx * f.nx + qy * f.ny + f.c * a * a;\n        const th = f.k * s - f.phase;\n        let v, dv;\n        if (f.press) {\n          // sqrt(sin^2 + e^2): round crests, sharp valleys.\n          const sn = sin(th), cs = cos(th), r = sqrt(sn * sn + 0.04);\n          v = f.A * (r - 0.6);\n          dv = (f.A * f.k * sn * cs) / r;\n        } else {\n          v = f.A * sin(th);\n          dv = f.A * f.k * cos(th);\n        }\n        h += v;\n        const ex = f.nx + 2 * f.c * a * f.tx, ey = f.ny + 2 * f.c * a * f.ty;\n        gx += dv * ex;\n        gy += dv * ey;\n      }\n      if (gA > 0) {\n        const e = (qy - gy0 - 0.006 * qx * qx) / 12, b = gA * exp(-e * e), d = (-2 * e * b) / 12;\n        h += b;\n        gx += d * -0.012 * qx;\n        gy += d;\n      }\n      // Back from the cloth's coordinates to the panel's.\n      const hx = gx + gy * dydx, hy = gx * dxdy + gy;\n      // Normal and the fibre's tangent on the surface.\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), Nx = -hx * nl, Ny = -hy * nl, Nz = nl;\n      let Tx = FX, Ty = FY, Tz = FX * hx + FY * hy;\n      const tl = 1 / sqrt(Tx * Tx + Ty * Ty + Tz * Tz);\n      (Tx *= tl), (Ty *= tl), (Tz *= tl);\n      const NL = Nx * LX + Ny * LY + Nz * LZ;\n      const dif = cl((NL + 0.45) / 1.45, 0, 1);\n      // Ward-like lobe: narrow along the fibre, broad across it.\n      const TH = Tx * HX + Ty * HY + Tz * HZ;\n      const Bx = Ny * Tz - Nz * Ty, By = Nz * Tx - Nx * Tz, Bz = Nx * Ty - Ny * Tx;\n      const BH = Bx * HX + By * HY + Bz * HZ;\n      const spec = 0.45 * exp(-(TH * TH) / 0.012 - (BH * BH) / 0.35) + 0.5 * exp(-(TH * TH) / 0.06 - (BH * BH) / 0.6);\n      // The hollows get less of the light, and less of the sheen.\n      const ao = sm(-0.9 * tot, 0.6 * tot, h);\n      const shade = cl(0.05 + 0.7 * dif * (0.4 + 0.6 * ao) + 0.5 * spec * (0.25 + 0.75 * ao), 0, 1);\n      const o = ((shade * (RAMP - 1)) | 0) * 3;\n      let r = lut[o], gg = lut[o + 1], b = lut[o + 2];\n      if (gAlpha > 0) {\n        const al = qx * GX + qy * GY;\n        const vv = qx * MX + qy * MY + 0.0018 * al * al - 4 + lean * h;\n        const ggx = MX + 0.0036 * al * GX, ggy = MY + 0.0036 * al * GY;\n        const vx = ggx + ggy * dydx + lean * hx, vy = ggx * dxdy + ggy + lean * hy;\n        // Where a fold turns the line back on itself it passes behind the\n        // fold, so it fades out there instead of spreading into a blot.\n        const gl = sqrt(vx * vx + vy * vy), sd = vv / Math.max(0.3, gl), dist = Math.abs(sd), seen = gAlpha * sm(0.3, 0.7, gl);\n        // The line stands a little off the cloth and shades it on the side\n        // away from the light.\n        if (sd \u003c 0) {\n          const sh = 1 - 0.3 * seen * sm(hw + 0.5 + sw, hw - 0.5, dist);\n          (r *= sh), (gg *= sh), (b *= sh);\n        }\n        const cov = cl(hw + 0.5 - dist, 0, 1) * seen;\n        if (cov > 0) {\n          const NH = Nx * HX + Ny * HY + Nz * HZ;\n          const gs = NH > 0.95 ? ((NH - 0.95) / 0.05) ** 4 : 0;\n          const tw = 0.5 + 0.5 * sin(al * gf - gT * 2.2);\n          const glint = tw ** 24 + gs;\n          const lit = 0.62 + 0.38 * dif, gw = cl(glint, 0, 1);\n          const gr = 252 * lit + (255 - 252 * lit) * gw, ggr = 184 * lit + (246 - 184 * lit) * gw, gb = 58 * lit + (205 - 58 * lit) * gw;\n          r += (gr - r) * cov;\n          gg += (ggr - gg) * cov;\n          b += (gb - b) * cov;\n        }\n      }\n      display.setPixel(x, y, r, gg, b);\n    }\n  }\n}\n","layer":{"id":"layer-satin-fold","type":"code","name":"satin-fold","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Satin Fold\n// Family:  cosmetic\n// Idea:    A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after satin weave sheen and gold-foil packaging; the sheen is a fibre highlight (James Kajiya and Timothy Kay, 1989) with an anisotropic lobe (Gregory Ward, 1992)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1\n//\n// Knob 1: Hue. The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac.\n// Knob 2: Speed. How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half.\n// Knob 3: Folds. One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5.\n// Knob 4: Gold. The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon.\n// Buttons: K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.\n\nconst W = 64, H = 128;\nconst { sin, cos, sqrt, exp, floor, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The first fold family is a fan: the cloth is held at a point 160 LEDs\n// above the panel's middle and a little left, and 22 folds a radian hang from\n// it, tight at the top of the panel and wide at the bottom.\nconst PX = -14, PY = -160, FAN = 22, FAN_A = 6.5, RC = 160;\n// The others are straight waves: crest angle in degrees, wavelength in LEDs,\n// height in LEDs, bend of the crest, travel in radians a second at Speed 1,\n// swell phase. The last is pressed: its profile has sharp valleys. The first\n// row stands for the fan, which reads only its travel and phase from it.\nconst FOLDS = [\n  [0, 1, 0, 0, 0.42, 0.0],\n  [58, 46, 4.2, -0.004, -0.33, 2.1],\n  [100, 30, 2.6, 0.007, 0.55, 4.0],\n  [128, 24, 1.8, -0.008, -0.71, 1.2],\n  [76, 28, 1.4, 0.004, 0.62, 3.3],\n].map(([ang, lam, A, c, w, ph]) => {\n  const a = (ang * PI) / 180;\n  return { tx: cos(a), ty: sin(a), nx: -sin(a), ny: cos(a), k: (2 * PI) / lam, A, c, w, ph };\n});\n\n// Light from the left, a little above and in front; the eye straight on.\n// y runs down.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.6, -0.35, 0.72);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The floats of the satin weave run nearly across the panel, rising a little\n// to the right, so they cross the hanging folds and catch the light only\n// where they tilt square to the half vector.\nconst FX = 0.985, FY = -0.17;\n// The gold line in the cloth's own coordinates: through the middle, going\n// down to the right, bowed a little.\nconst [GX, GY] = (() => {\n  const l = Math.hypot(0.42, 1);\n  return [0.42 / l, 1 / l];\n})();\nconst MX = -GY, MY = GX;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The satin's ramp from the deepest hollow (0) to the brightest sheen (1):\n// the hue deep and saturated in the hollows, pale over the body, near white\n// in the streaks.\nconst RAMP = 256;\nfunction ramp(P) {\n  const hue = P.hue + 0.975;\n  for (let i = 0; i \u003c RAMP; i++) {\n    const s = i / (RAMP - 1);\n    let sat, val;\n    if (s \u003c 0.5) {\n      const u = s / 0.5;\n      sat = 0.46 + (0.18 - 0.46) * u;\n      val = 0.5 + (0.8 - 0.5) * u;\n    } else {\n      const u = (s - 0.5) / 0.5;\n      sat = 0.18 + (0.04 - 0.18) * u;\n      val = 0.8 + (0.97 - 0.8) * u;\n    }\n    hsv(hue - 0.015 * (1 - s), sat, val, P.lut, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = {\n    t: 0, clock: 0, hue: 0, speed: 2, folds: 1, gold: 0.06, gust: -1,\n    lut: new Float32Array(RAMP * 3), lutHue: NaN, cw: new Float32Array(W), cd: new Float32Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.folds = cl(k[2], 1, 5);\n  P.gold = cl(k[3], 0, 1);\n  P.t += d * P.speed;\n  P.clock += d;\n  if (P.gust >= 0) {\n    P.gust += d / 2.5;\n    if (P.gust >= 1) P.gust = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) P.gust = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) ramp(P);\n  const T = P.t, F = P.folds, lut = P.lut;\n  // Each family fades in over one step of Folds, and the whole cloth gets\n  // deeper as it does.\n  const depth = 0.75 + 0.18 * (F - 1);\n  const act = [];\n  for (let i = 0; i \u003c FOLDS.length; i++) {\n    const f = FOLDS[i], wgt = sm(0, 1, F - i);\n    if (wgt \u003c= 0) continue;\n    const swell = 0.72 + 0.28 * sin(0.37 * T + f.ph);\n    act.push({ ...f, A: (i ? f.A * swell : FAN_A) * wgt * depth, phase: f.w * T + f.ph, press: i === 4 });\n  }\n  const na = act.length, fan = act[0];\n  let tot = 0;\n  for (const f of act) tot += f.A;\n  // The gust: one ridge across the sheet that runs from the bottom up.\n  let gA = 0, gy0 = 0;\n  if (P.gust >= 0) {\n    gA = 5.5 * sin(PI * P.gust);\n    gy0 = 80 - 190 * P.gust;\n  }\n  const wa = 3.2;\n  // The panel sees the cloth a little from below, so a line on it shifts\n  // with the height of the cloth under it: 0.65 LED a LED of height at one\n  // fold family, less on the deep drapes.\n  const lean = 0.65 / (1 + 0.15 * (F - 1));\n  const g = P.gold, gAlpha = sm(0, 0.04, g), hw = 0.6 + 6 * g, sw = 1 + 2.5 * g;\n  const gf = 0.11 + 0.11 * g, gT = P.clock * (0.6 + 0.4 * P.speed);\n  // The warp's sideways part, one value a column.\n  const CW = P.cw, CD = P.cd;\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - 31.5) * 0.07 - T * 0.17 + 1.3;\n    CW[x] = wa * sin(u);\n    CD[x] = wa * 0.07 * cos(u);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const py = y - 63.5;\n    const s1 = sin(py * 0.045 + T * 0.23), c1 = cos(py * 0.045 + T * 0.23);\n    const dxdy = wa * 0.045 * c1;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5;\n      const dydx = CD[x];\n      const qx = px + wa * s1, qy = py + CW[x];\n      let h = 0, gx = 0, gy = 0;\n      {\n        // The fan: the fold phase goes with the angle round the point it\n        // hangs from, and leans with the distance. Its height grows as the\n        // square root of the distance, and a swell runs down it.\n        const dx = qx - PX, dy = qy - PY, r2 = dx * dx + dy * dy, r = sqrt(r2);\n        const th = FAN * Math.atan2(dx, dy) + 0.025 * r - fan.phase;\n        const sv = 0.045 * r - 0.5 * T, ms = 0.75 + 0.25 * sin(sv), rr = sqrt(r / RC);\n        const A = fan.A * rr * ms, dA = A / (2 * r) + fan.A * rr * 0.01125 * cos(sv);\n        const sn = sin(th), cs = cos(th);\n        h += A * sn;\n        const gr = dA * sn + A * cs * 0.025, ga = (A * cs * FAN) / r2;\n        gx += (gr * dx) / r + ga * dy;\n        gy += (gr * dy) / r - ga * dx;\n      }\n      for (let j = 1; j \u003c na; j++) {\n        const f = act[j];\n        const a = qx * f.tx + qy * f.ty, s = qx * f.nx + qy * f.ny + f.c * a * a;\n        const th = f.k * s - f.phase;\n        let v, dv;\n        if (f.press) {\n          // sqrt(sin^2 + e^2): round crests, sharp valleys.\n          const sn = sin(th), cs = cos(th), r = sqrt(sn * sn + 0.04);\n          v = f.A * (r - 0.6);\n          dv = (f.A * f.k * sn * cs) / r;\n        } else {\n          v = f.A * sin(th);\n          dv = f.A * f.k * cos(th);\n        }\n        h += v;\n        const ex = f.nx + 2 * f.c * a * f.tx, ey = f.ny + 2 * f.c * a * f.ty;\n        gx += dv * ex;\n        gy += dv * ey;\n      }\n      if (gA > 0) {\n        const e = (qy - gy0 - 0.006 * qx * qx) / 12, b = gA * exp(-e * e), d = (-2 * e * b) / 12;\n        h += b;\n        gx += d * -0.012 * qx;\n        gy += d;\n      }\n      // Back from the cloth's coordinates to the panel's.\n      const hx = gx + gy * dydx, hy = gx * dxdy + gy;\n      // Normal and the fibre's tangent on the surface.\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), Nx = -hx * nl, Ny = -hy * nl, Nz = nl;\n      let Tx = FX, Ty = FY, Tz = FX * hx + FY * hy;\n      const tl = 1 / sqrt(Tx * Tx + Ty * Ty + Tz * Tz);\n      (Tx *= tl), (Ty *= tl), (Tz *= tl);\n      const NL = Nx * LX + Ny * LY + Nz * LZ;\n      const dif = cl((NL + 0.45) / 1.45, 0, 1);\n      // Ward-like lobe: narrow along the fibre, broad across it.\n      const TH = Tx * HX + Ty * HY + Tz * HZ;\n      const Bx = Ny * Tz - Nz * Ty, By = Nz * Tx - Nx * Tz, Bz = Nx * Ty - Ny * Tx;\n      const BH = Bx * HX + By * HY + Bz * HZ;\n      const spec = 0.45 * exp(-(TH * TH) / 0.012 - (BH * BH) / 0.35) + 0.5 * exp(-(TH * TH) / 0.06 - (BH * BH) / 0.6);\n      // The hollows get less of the light, and less of the sheen.\n      const ao = sm(-0.9 * tot, 0.6 * tot, h);\n      const shade = cl(0.05 + 0.7 * dif * (0.4 + 0.6 * ao) + 0.5 * spec * (0.25 + 0.75 * ao), 0, 1);\n      const o = ((shade * (RAMP - 1)) | 0) * 3;\n      let r = lut[o], gg = lut[o + 1], b = lut[o + 2];\n      if (gAlpha > 0) {\n        const al = qx * GX + qy * GY;\n        const vv = qx * MX + qy * MY + 0.0018 * al * al - 4 + lean * h;\n        const ggx = MX + 0.0036 * al * GX, ggy = MY + 0.0036 * al * GY;\n        const vx = ggx + ggy * dydx + lean * hx, vy = ggx * dxdy + ggy + lean * hy;\n        // Where a fold turns the line back on itself it passes behind the\n        // fold, so it fades out there instead of spreading into a blot.\n        const gl = sqrt(vx * vx + vy * vy), sd = vv / Math.max(0.3, gl), dist = Math.abs(sd), seen = gAlpha * sm(0.3, 0.7, gl);\n        // The line stands a little off the cloth and shades it on the side\n        // away from the light.\n        if (sd \u003c 0) {\n          const sh = 1 - 0.3 * seen * sm(hw + 0.5 + sw, hw - 0.5, dist);\n          (r *= sh), (gg *= sh), (b *= sh);\n        }\n        const cov = cl(hw + 0.5 - dist, 0, 1) * seen;\n        if (cov > 0) {\n          const NH = Nx * HX + Ny * HY + Nz * HZ;\n          const gs = NH > 0.95 ? ((NH - 0.95) / 0.05) ** 4 : 0;\n          const tw = 0.5 + 0.5 * sin(al * gf - gT * 2.2);\n          const glint = tw ** 24 + gs;\n          const lit = 0.62 + 0.38 * dif, gw = cl(glint, 0, 1);\n          const gr = 252 * lit + (255 - 252 * lit) * gw, ggr = 184 * lit + (246 - 184 * lit) * gw, gb = 58 * lit + (205 - 58 * lit) * gw;\n          r += (gr - r) * cov;\n          gg += (ggr - gg) * cov;\n          b += (gb - b) * cov;\n        }\n      }\n      display.setPixel(x, y, r, gg, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half."},{"name":"Folds","min":1,"max":5,"about":"One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5."},{"name":"Gold","min":0,"max":1,"about":"The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon."}],"start":[0,2,1,0.06],"measures":{"motion":0.094,"detail":0.0124,"edges":0.0787,"complexity":1.2735,"coverage":1,"colour":0.1403,"drift":0.1604},"knobResponse":[0.1121,0.2232,0.0933,0.0521]},{"slug":"scheidegger-rivers","title":"Scheidegger Rivers","family":"line","round":34,"note":"체크무늬로 놓인 LED 마다 물을 왼쪽 아래나 오른쪽 아래로 무작위로 보내는 샤이데거의 강 그물이에요. 모인 물의 로그로 밝혀서 위의 실개천이 아래로 갈수록 굵은 줄기로 합쳐지고, 바닥의 출구마다 다른 색으로 물든 강을 따라 빗방울이 흘러내리며, 가끔 한 자리가 방향을 바꾸면 큰 강이 옆 유역으로 넘어가 옛 물길이 마르고 새 물길이 줄마다 차올라요.","idea":"Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.","buttons":"K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.","code":"// ===== Patternflow pattern =====\n// Title:   Scheidegger Rivers\n// Family:  line\n// Idea:    Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Scheidegger's river network model (Adrian Scheidegger, 1967), pattern round 34; its rivers are coalescing random walks, whose scaling limit is the Brownian web (Balint Toth and Wendelin Werner, 1998)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1\n//\n// Knob 1: Hue. Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale.\n// Knob 2: Speed. At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it.\n// Knob 3: Bias. The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way.\n// Knob 4: Capture. How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn.\n// Buttons: K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.\n\nconst W = 64, H = 128, SW = W / 2, NS = SW * H;\nconst { floor, min, max, log, exp, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Site s sits in row y = s / 32 at x = 2 (s % 32) + (y & 1): the LEDs with\n// x + y even. Its two neighbours below are x - 1 and x + 1 in row y + 1,\n// wrapping round the sides.\nconst SX = new Int16Array(NS), SY = new Int16Array(NS);\nconst DL = new Int32Array(NS), DR = new Int32Array(NS), UL = new Int32Array(NS), UR = new Int32Array(NS);\nconst siteAt = (x, y) => y * SW + (((x % W) + W) % W >> 1);\nfor (let s = 0; s \u003c NS; s++) {\n  const y = floor(s / SW), x = 2 * (s % SW) + (y & 1);\n  SX[s] = x;\n  SY[s] = y;\n  DL[s] = y \u003c H - 1 ? siteAt(x - 1, y + 1) : -1;\n  DR[s] = y \u003c H - 1 ? siteAt(x + 1, y + 1) : -1;\n  UL[s] = y > 0 ? siteAt(x - 1, y - 1) : -1;\n  UR[s] = y > 0 ? siteAt(x + 1, y - 1) : -1;\n}\nconst FMAX = 1500, LFMAX = log(FMAX);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0, cap: 0.06, warm: false, sweep: 0, flipAcc: 0, bigAcc: 0, rainAcc: 0,\n    u: new Float32Array(NS), dn: new Int32Array(NS), F: new Float32Array(NS), Q: new Float32Array(NS),\n    out: new Int16Array(NS), prev: new Int16Array(NS), ov: new Int32Array(SW * SW), col: new Int8Array(SW).fill(-1),\n    col2: new Int8Array(SW), ho: new Float32Array(NS), cum: new Float64Array(NS),\n    drops: [], Lv: new Float32Array(W * H), Hu: new Float32Array(W * H), Sa: new Float32Array(W * H),\n    Wd: new Float32Array(W * H), Dr: new Float32Array(W * H), c: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let s = 0; s \u003c NS; s++) S.u[s] = random();\n}\n\n// Each site drains right when its own random number is under 0.5 + 0.48 Bias.\nfunction route(S) {\n  const p = 0.5 + 0.48 * S.bias;\n  for (let s = 0; s \u003c NS; s++) S.dn[s] = DL[s] \u003c 0 ? -1 : S.u[s] \u003c p ? DR[s] : DL[s];\n}\n\n// The exact flux, row by row from the top: 1 for the site itself plus all\n// that drains into it.\nfunction flux(S) {\n  const F = S.F, dn = S.dn;\n  F.fill(1);\n  for (let s = 0; s \u003c NS - SW; s++) F[dn[s]] += F[s];\n  // Which outlet in the bottom row each site reaches, from the bottom up.\n  for (let s = NS - 1; s >= 0; s--) S.out[s] = dn[s] \u003c 0 ? s - (NS - SW) : S.out[dn[s]];\n}\n\n// The water on show moves one row per sweep: a rerouted river drains and the\n// new one fills from the site that changed downwards.\nfunction sweep(S) {\n  const Q = S.Q, dn = S.dn;\n  for (let s = NS - 1; s >= SW; s--) {\n    let q = 1;\n    const a = UL[s], b = UR[s];\n    if (dn[a] === s) q += Q[a];\n    if (dn[b] === s) q += Q[b];\n    Q[s] = q;\n  }\n}\n\n// Basin colours. A basin draining at least AMIN sites through its outlet\n// holds one of four hue steps; after the network changes, each new basin\n// takes the colour of the old basin it shares most sites with, and a basin\n// with none to take gets the step farthest from those in use.\nconst STEPS = [-0.1, 0, 0.1, 0.2], AMIN = 120;\nfunction basins(S) {\n  const ov = S.ov, F = S.F, B = NS - SW;\n  ov.fill(0);\n  for (let s = 0; s \u003c NS; s++) ov[S.prev[s] * SW + S.out[s]]++;\n  const pairs = [];\n  for (let i = 0; i \u003c SW; i++)\n    if (S.col[i] >= 0) for (let j = 0; j \u003c SW; j++) if (F[B + j] >= AMIN && ov[i * SW + j] > 0) pairs.push([ov[i * SW + j], i, j]);\n  pairs.sort((a, b) => b[0] - a[0]);\n  const col = S.col2.fill(-1), taken = new Uint8Array(SW);\n  for (const [, i, j] of pairs)\n    if (!taken[i] && col[j] \u003c 0) {\n      taken[i] = 1;\n      col[j] = S.col[i];\n    }\n  for (let j = 0; j \u003c SW; j++)\n    if (F[B + j] >= AMIN && col[j] \u003c 0) {\n      let best = 0, far = -1;\n      for (let k = 0; k \u003c STEPS.length; k++) {\n        let near = 9;\n        for (let m = 0; m \u003c SW; m++) if (col[m] >= 0) near = min(near, Math.abs(STEPS[k] - STEPS[col[m]]));\n        if (near > far) (far = near), (best = k);\n      }\n      col[j] = best;\n    }\n  S.col.set(col);\n  S.prev.set(S.out);\n}\n\n// How many rows the two paths out of site s, one through each neighbour\n// below, run apart before they join (or reach the bottom).\nfunction apart(S, s) {\n  let a = DL[s], b = DR[s], n = 0;\n  while (a >= 0 && a !== b) {\n    a = S.dn[a];\n    b = S.dn[b];\n    n++;\n  }\n  return n;\n}\n\n// A capture: site s turns to its other neighbour, with the Metropolis chance\n// that keeps every site draining right with chance p in the long run.\nfunction flip(S, s) {\n  const p = 0.5 + 0.48 * S.bias, right = S.u[s] \u003c p;\n  const want = right ? 1 - p : p;\n  if (random() * max(p, 1 - p) > want) return false;\n  S.u[s] = right ? p + (1 - p) * random() : p * random();\n  S.dn[s] = right ? DL[s] : DR[s];\n  return true;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2;\n  route(S);\n  flux(S);\n  // Small captures land on any site; large ones on a site picked in\n  // proportion to the flux through it, among those whose other way down\n  // runs at least 10 rows apart from the river it leaves.\n  S.flipAcc += d * sp * 150 * S.cap;\n  S.bigAcc += d * sp * 20 * S.cap;\n  let changed = false;\n  while (S.flipAcc >= 1) {\n    S.flipAcc -= 1;\n    changed = flip(S, floor(random() * (NS - SW))) || changed;\n  }\n  if (S.bigAcc >= 1) {\n    const cum = S.cum;\n    let acc = 0;\n    for (let s = 0; s \u003c NS; s++) cum[s] = acc += S.F[s];\n    while (S.bigAcc >= 1) {\n      S.bigAcc -= 1;\n      for (let tries = 0; tries \u003c 8; tries++) {\n        const r = random() * acc;\n        let lo = 0, hi = NS - 1;\n        while (lo \u003c hi) {\n          const m = (lo + hi) >> 1;\n          if (cum[m] \u003c r) lo = m + 1;\n          else hi = m;\n        }\n        if (lo >= NS - SW || apart(S, lo) \u003c 10) continue;\n        changed = flip(S, lo) || changed;\n        break;\n      }\n    }\n  }\n  if (changed) flux(S);\n  S.sweep += d * sp * 40;\n  while (S.sweep >= 1) {\n    S.sweep -= 1;\n    sweep(S);\n  }\n  const k = 1 - exp(-d * sp * 3);\n  basins(S);\n  for (let s = 0; s \u003c NS; s++) {\n    const c = S.col[S.out[s]];\n    if (c >= 0) S.ho[s] += (STEPS[c] - S.ho[s]) * k;\n  }\n\n  // Rain: drops land on random sites and run down the rivers, two LED steps\n  // a row (across, then down).\n  S.rainAcc += d * sp * 14;\n  while (S.rainAcc >= 1) {\n    S.rainAcc -= 1;\n    addDrop(S, floor(random() * (NS - 8 * SW)));\n  }\n  const v = d * sp * 32;\n  const drops = S.drops;\n  for (let i = drops.length - 1; i >= 0; i--) {\n    const D = drops[i];\n    D.pos += v;\n    while (D.pos >= 1) {\n      D.pos -= 1;\n      if (D.mid \u003c 0) {\n        const t = S.dn[D.s];\n        if (t \u003c 0) {\n          D.gone = true;\n          break;\n        }\n        D.mid = SY[D.s] * W + SX[t];\n        D.s = t;\n        D.trail.unshift(D.mid);\n      } else {\n        D.mid = -1;\n        D.trail.unshift(SY[D.s] * W + SX[D.s]);\n      }\n      if (D.trail.length > 8) D.trail.pop();\n    }\n    if (D.gone) drops.splice(i, 1);\n  }\n}\n\nfunction addDrop(S, s) {\n  S.drops.push({ s, mid: -1, pos: random(), trail: [SY[s] * W + SX[s]], gone: false });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], -1, 1);\n  S.cap = cl(k[3], 0, 1);\n  if (!S.warm) {\n    route(S);\n    flux(S);\n    S.Q.set(S.F);\n    S.prev.set(S.out);\n    basins(S);\n    for (let s = 0; s \u003c NS; s++) S.ho[s] = S.col[S.out[s]] >= 0 ? STEPS[S.col[S.out[s]]] : 0;\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let i = 0; i \u003c 260; i++) addDrop(S, floor(random() * 24 * SW));\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { Lv, Hu, Sa, Wd, Dr, Q } = S;\n  Lv.fill(0);\n  Wd.fill(0);\n  Dr.fill(0);\n  // Each site lights its own LED and the LED beside it on the side it drains\n  // to, which is the LED above the site it drains into: a river is a stair of\n  // LEDs, across then down, and two streams meeting make a T.\n  for (let s = 0; s \u003c NS; s++) {\n    const g = cl(log(Q[s]) / LFMAX, 0, 1), L = 30 + 225 * g ** 1.35;\n    const p = SY[s] * W + SX[s], h = S.hue + 0.52 + S.ho[s], sat = 0.85 - 0.45 * g;\n    const wd = 1 + 1.8 * cl((log(Q[s]) - log(30)) / (LFMAX - log(30)), 0, 1);\n    if (L > Lv[p]) (Lv[p] = L), (Hu[p] = h), (Sa[p] = sat), (Wd[p] = wd);\n    const t = S.dn[s];\n    if (t >= 0) {\n      const m = SY[s] * W + SX[t];\n      if (L > Lv[m]) (Lv[m] = L), (Hu[m] = h), (Sa[m] = sat), (Wd[m] = wd);\n    }\n  }\n  for (const D of S.drops)\n    D.trail.forEach((p, i) => {\n      Dr[p] = max(Dr[p], i \u003c 2 ? 1 : 0.85 ** (i - 1));\n    });\n  const out = S.c;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let L = Lv[p], h = Hu[p], sa = Sa[p];\n      // Wide rivers spill onto the LEDs beside them.\n      for (const dx of [-2, -1, 1, 2]) {\n        const q = y * W + ((x + dx + W) % W), w = Wd[q] - Math.abs(dx);\n        if (w > 0) {\n          const v = Lv[q] * min(1, w) * (Math.abs(dx) === 1 ? 0.8 : 0.55);\n          if (v > L) (L = v), (h = Hu[q]), (sa = Sa[q]);\n        }\n      }\n      const dr = Dr[p];\n      if (dr > 0) {\n        L = L + (255 - L) * dr;\n        sa *= 1 - 0.85 * dr;\n      }\n      hsv(h, sa, 1, out);\n      display.setPixel(x, y, round(out[0] * L), round(out[1] * L), round(out[2] * L));\n    }\n}\n","layer":{"id":"layer-scheidegger-rivers","type":"code","name":"scheidegger-rivers","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Scheidegger Rivers\n// Family:  line\n// Idea:    Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Scheidegger's river network model (Adrian Scheidegger, 1967), pattern round 34; its rivers are coalescing random walks, whose scaling limit is the Brownian web (Balint Toth and Wendelin Werner, 1998)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1\n//\n// Knob 1: Hue. Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale.\n// Knob 2: Speed. At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it.\n// Knob 3: Bias. The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way.\n// Knob 4: Capture. How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn.\n// Buttons: K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.\n\nconst W = 64, H = 128, SW = W / 2, NS = SW * H;\nconst { floor, min, max, log, exp, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Site s sits in row y = s / 32 at x = 2 (s % 32) + (y & 1): the LEDs with\n// x + y even. Its two neighbours below are x - 1 and x + 1 in row y + 1,\n// wrapping round the sides.\nconst SX = new Int16Array(NS), SY = new Int16Array(NS);\nconst DL = new Int32Array(NS), DR = new Int32Array(NS), UL = new Int32Array(NS), UR = new Int32Array(NS);\nconst siteAt = (x, y) => y * SW + (((x % W) + W) % W >> 1);\nfor (let s = 0; s \u003c NS; s++) {\n  const y = floor(s / SW), x = 2 * (s % SW) + (y & 1);\n  SX[s] = x;\n  SY[s] = y;\n  DL[s] = y \u003c H - 1 ? siteAt(x - 1, y + 1) : -1;\n  DR[s] = y \u003c H - 1 ? siteAt(x + 1, y + 1) : -1;\n  UL[s] = y > 0 ? siteAt(x - 1, y - 1) : -1;\n  UR[s] = y > 0 ? siteAt(x + 1, y - 1) : -1;\n}\nconst FMAX = 1500, LFMAX = log(FMAX);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0, cap: 0.06, warm: false, sweep: 0, flipAcc: 0, bigAcc: 0, rainAcc: 0,\n    u: new Float32Array(NS), dn: new Int32Array(NS), F: new Float32Array(NS), Q: new Float32Array(NS),\n    out: new Int16Array(NS), prev: new Int16Array(NS), ov: new Int32Array(SW * SW), col: new Int8Array(SW).fill(-1),\n    col2: new Int8Array(SW), ho: new Float32Array(NS), cum: new Float64Array(NS),\n    drops: [], Lv: new Float32Array(W * H), Hu: new Float32Array(W * H), Sa: new Float32Array(W * H),\n    Wd: new Float32Array(W * H), Dr: new Float32Array(W * H), c: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let s = 0; s \u003c NS; s++) S.u[s] = random();\n}\n\n// Each site drains right when its own random number is under 0.5 + 0.48 Bias.\nfunction route(S) {\n  const p = 0.5 + 0.48 * S.bias;\n  for (let s = 0; s \u003c NS; s++) S.dn[s] = DL[s] \u003c 0 ? -1 : S.u[s] \u003c p ? DR[s] : DL[s];\n}\n\n// The exact flux, row by row from the top: 1 for the site itself plus all\n// that drains into it.\nfunction flux(S) {\n  const F = S.F, dn = S.dn;\n  F.fill(1);\n  for (let s = 0; s \u003c NS - SW; s++) F[dn[s]] += F[s];\n  // Which outlet in the bottom row each site reaches, from the bottom up.\n  for (let s = NS - 1; s >= 0; s--) S.out[s] = dn[s] \u003c 0 ? s - (NS - SW) : S.out[dn[s]];\n}\n\n// The water on show moves one row per sweep: a rerouted river drains and the\n// new one fills from the site that changed downwards.\nfunction sweep(S) {\n  const Q = S.Q, dn = S.dn;\n  for (let s = NS - 1; s >= SW; s--) {\n    let q = 1;\n    const a = UL[s], b = UR[s];\n    if (dn[a] === s) q += Q[a];\n    if (dn[b] === s) q += Q[b];\n    Q[s] = q;\n  }\n}\n\n// Basin colours. A basin draining at least AMIN sites through its outlet\n// holds one of four hue steps; after the network changes, each new basin\n// takes the colour of the old basin it shares most sites with, and a basin\n// with none to take gets the step farthest from those in use.\nconst STEPS = [-0.1, 0, 0.1, 0.2], AMIN = 120;\nfunction basins(S) {\n  const ov = S.ov, F = S.F, B = NS - SW;\n  ov.fill(0);\n  for (let s = 0; s \u003c NS; s++) ov[S.prev[s] * SW + S.out[s]]++;\n  const pairs = [];\n  for (let i = 0; i \u003c SW; i++)\n    if (S.col[i] >= 0) for (let j = 0; j \u003c SW; j++) if (F[B + j] >= AMIN && ov[i * SW + j] > 0) pairs.push([ov[i * SW + j], i, j]);\n  pairs.sort((a, b) => b[0] - a[0]);\n  const col = S.col2.fill(-1), taken = new Uint8Array(SW);\n  for (const [, i, j] of pairs)\n    if (!taken[i] && col[j] \u003c 0) {\n      taken[i] = 1;\n      col[j] = S.col[i];\n    }\n  for (let j = 0; j \u003c SW; j++)\n    if (F[B + j] >= AMIN && col[j] \u003c 0) {\n      let best = 0, far = -1;\n      for (let k = 0; k \u003c STEPS.length; k++) {\n        let near = 9;\n        for (let m = 0; m \u003c SW; m++) if (col[m] >= 0) near = min(near, Math.abs(STEPS[k] - STEPS[col[m]]));\n        if (near > far) (far = near), (best = k);\n      }\n      col[j] = best;\n    }\n  S.col.set(col);\n  S.prev.set(S.out);\n}\n\n// How many rows the two paths out of site s, one through each neighbour\n// below, run apart before they join (or reach the bottom).\nfunction apart(S, s) {\n  let a = DL[s], b = DR[s], n = 0;\n  while (a >= 0 && a !== b) {\n    a = S.dn[a];\n    b = S.dn[b];\n    n++;\n  }\n  return n;\n}\n\n// A capture: site s turns to its other neighbour, with the Metropolis chance\n// that keeps every site draining right with chance p in the long run.\nfunction flip(S, s) {\n  const p = 0.5 + 0.48 * S.bias, right = S.u[s] \u003c p;\n  const want = right ? 1 - p : p;\n  if (random() * max(p, 1 - p) > want) return false;\n  S.u[s] = right ? p + (1 - p) * random() : p * random();\n  S.dn[s] = right ? DL[s] : DR[s];\n  return true;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2;\n  route(S);\n  flux(S);\n  // Small captures land on any site; large ones on a site picked in\n  // proportion to the flux through it, among those whose other way down\n  // runs at least 10 rows apart from the river it leaves.\n  S.flipAcc += d * sp * 150 * S.cap;\n  S.bigAcc += d * sp * 20 * S.cap;\n  let changed = false;\n  while (S.flipAcc >= 1) {\n    S.flipAcc -= 1;\n    changed = flip(S, floor(random() * (NS - SW))) || changed;\n  }\n  if (S.bigAcc >= 1) {\n    const cum = S.cum;\n    let acc = 0;\n    for (let s = 0; s \u003c NS; s++) cum[s] = acc += S.F[s];\n    while (S.bigAcc >= 1) {\n      S.bigAcc -= 1;\n      for (let tries = 0; tries \u003c 8; tries++) {\n        const r = random() * acc;\n        let lo = 0, hi = NS - 1;\n        while (lo \u003c hi) {\n          const m = (lo + hi) >> 1;\n          if (cum[m] \u003c r) lo = m + 1;\n          else hi = m;\n        }\n        if (lo >= NS - SW || apart(S, lo) \u003c 10) continue;\n        changed = flip(S, lo) || changed;\n        break;\n      }\n    }\n  }\n  if (changed) flux(S);\n  S.sweep += d * sp * 40;\n  while (S.sweep >= 1) {\n    S.sweep -= 1;\n    sweep(S);\n  }\n  const k = 1 - exp(-d * sp * 3);\n  basins(S);\n  for (let s = 0; s \u003c NS; s++) {\n    const c = S.col[S.out[s]];\n    if (c >= 0) S.ho[s] += (STEPS[c] - S.ho[s]) * k;\n  }\n\n  // Rain: drops land on random sites and run down the rivers, two LED steps\n  // a row (across, then down).\n  S.rainAcc += d * sp * 14;\n  while (S.rainAcc >= 1) {\n    S.rainAcc -= 1;\n    addDrop(S, floor(random() * (NS - 8 * SW)));\n  }\n  const v = d * sp * 32;\n  const drops = S.drops;\n  for (let i = drops.length - 1; i >= 0; i--) {\n    const D = drops[i];\n    D.pos += v;\n    while (D.pos >= 1) {\n      D.pos -= 1;\n      if (D.mid \u003c 0) {\n        const t = S.dn[D.s];\n        if (t \u003c 0) {\n          D.gone = true;\n          break;\n        }\n        D.mid = SY[D.s] * W + SX[t];\n        D.s = t;\n        D.trail.unshift(D.mid);\n      } else {\n        D.mid = -1;\n        D.trail.unshift(SY[D.s] * W + SX[D.s]);\n      }\n      if (D.trail.length > 8) D.trail.pop();\n    }\n    if (D.gone) drops.splice(i, 1);\n  }\n}\n\nfunction addDrop(S, s) {\n  S.drops.push({ s, mid: -1, pos: random(), trail: [SY[s] * W + SX[s]], gone: false });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], -1, 1);\n  S.cap = cl(k[3], 0, 1);\n  if (!S.warm) {\n    route(S);\n    flux(S);\n    S.Q.set(S.F);\n    S.prev.set(S.out);\n    basins(S);\n    for (let s = 0; s \u003c NS; s++) S.ho[s] = S.col[S.out[s]] >= 0 ? STEPS[S.col[S.out[s]]] : 0;\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let i = 0; i \u003c 260; i++) addDrop(S, floor(random() * 24 * SW));\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { Lv, Hu, Sa, Wd, Dr, Q } = S;\n  Lv.fill(0);\n  Wd.fill(0);\n  Dr.fill(0);\n  // Each site lights its own LED and the LED beside it on the side it drains\n  // to, which is the LED above the site it drains into: a river is a stair of\n  // LEDs, across then down, and two streams meeting make a T.\n  for (let s = 0; s \u003c NS; s++) {\n    const g = cl(log(Q[s]) / LFMAX, 0, 1), L = 30 + 225 * g ** 1.35;\n    const p = SY[s] * W + SX[s], h = S.hue + 0.52 + S.ho[s], sat = 0.85 - 0.45 * g;\n    const wd = 1 + 1.8 * cl((log(Q[s]) - log(30)) / (LFMAX - log(30)), 0, 1);\n    if (L > Lv[p]) (Lv[p] = L), (Hu[p] = h), (Sa[p] = sat), (Wd[p] = wd);\n    const t = S.dn[s];\n    if (t >= 0) {\n      const m = SY[s] * W + SX[t];\n      if (L > Lv[m]) (Lv[m] = L), (Hu[m] = h), (Sa[m] = sat), (Wd[m] = wd);\n    }\n  }\n  for (const D of S.drops)\n    D.trail.forEach((p, i) => {\n      Dr[p] = max(Dr[p], i \u003c 2 ? 1 : 0.85 ** (i - 1));\n    });\n  const out = S.c;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let L = Lv[p], h = Hu[p], sa = Sa[p];\n      // Wide rivers spill onto the LEDs beside them.\n      for (const dx of [-2, -1, 1, 2]) {\n        const q = y * W + ((x + dx + W) % W), w = Wd[q] - Math.abs(dx);\n        if (w > 0) {\n          const v = Lv[q] * min(1, w) * (Math.abs(dx) === 1 ? 0.8 : 0.55);\n          if (v > L) (L = v), (h = Hu[q]), (sa = Sa[q]);\n        }\n      }\n      const dr = Dr[p];\n      if (dr > 0) {\n        L = L + (255 - L) * dr;\n        sa *= 1 - 0.85 * dr;\n      }\n      hsv(h, sa, 1, out);\n      display.setPixel(x, y, round(out[0] * L), round(out[1] * L), round(out[2] * L));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it."},{"name":"Bias","min":-1,"max":1,"about":"The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way."},{"name":"Capture","min":0,"max":1,"about":"How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn."}],"start":[0,2,0,0.06],"measures":{"motion":0.094,"detail":0.1271,"edges":0.515,"complexity":1.5978,"coverage":0.922,"colour":0.2023,"drift":0.0432},"knobResponse":[0.1672,0.0593,0.2285,0.1968]},{"slug":"schwarz-lantern","title":"Schwarz Lantern","family":"geometry","round":36,"note":"꼭짓점이 모두 원기둥 위에 있는 삼각형 랜턴이 패널 높이만큼 서서 돌고, 띠가 3개에서 40개로 늘었다 줄어요. 접힐수록 아코디언처럼 반짝이고, 왼쪽 막대가 넓이를 원기둥의 1.88배까지 올려요. K3 은 한 고리의 꼭짓점 수를 5에서 12로 바꿔 같은 띠 40개를 매끈한 기둥으로 남기고, K1 을 누르면 단번에 가장 구겨진 꼴로 접혔다가 천천히 풀려요.","idea":"A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.","buttons":"K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.","code":"// ===== Patternflow pattern =====\n// Title:   Schwarz Lantern\n// Family:  geometry\n// Idea:    A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schwarz lantern (Hermann Schwarz, 1880), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1\n//\n// Knob 1: Hue. The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round.\n// Knob 2: Speed. At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long.\n// Knob 3: Sides. Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves.\n// Knob 4: Light. The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep.\n// Buttons: K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.\n\nconst W = 64, H = 128, SS = 2, SW = W * SS, SH = H * SS, SN = SW * SH;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, log, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The cylinder: radius R and height HC in LEDs, its axis at column CX, seen\n// from EL radians above. The bands run from MMIN to MMAX.\nconst R = 26, HC = 114, CX = 34.5, EL = 0.2, MMIN = 3, MMAX = 40, NMAX = 12;\n// The gauge: the lantern's area over the cylinder's, a bar up from row G0 at\n// the left edge, GPX LEDs to the unit, with a mark at 1.\nconst G0 = 125, GPX = 44;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const V = (MMAX + 2) * NMAX;\n  params.s = {\n    hue: 0, speed: 2, n: 5, light: 0.06, spin: 0, sweep: 2.2, snap: -1, mu: MMIN, area: 1,\n    ox: new Float32Array(V), oy: new Float32Array(V), oz: new Float32Array(V),\n    vx: new Float32Array(V), vy: new Float32Array(V), vz: new Float32Array(V),\n    zb: new Float32Array(SN), cr: new Float32Array(SN), cg: new Float32Array(SN), cb: new Float32Array(SN), col: new Float32Array(3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = Math.round(cl(k[2], 5, NMAX));\n  S.light = cl(k[3], 0, 1);\n  S.spin += d * S.speed * 0.12;\n  S.sweep += d * S.speed * 0.16;\n  if (S.snap >= 0) {\n    S.snap += d;\n    if (S.snap > 4.6) S.snap = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.snap = S.snap \u003c 0 ? 0 : min(S.snap, 0.6);\n  // The bands: MMIN to MMAX and back, evenly in log, lingering at both ends.\n  const u = 0.5 - 0.5 * cos(S.sweep);\n  let mu = exp(log(MMIN) + log(MMAX / MMIN) * u);\n  if (S.snap >= 0) {\n    const e = S.snap \u003c 0.6 ? sm(S.snap / 0.6) : 1 - sm((S.snap - 2.6) / 2);\n    mu = exp(log(mu) + (log(MMAX) - log(mu)) * e);\n  }\n  S.mu = mu;\n}\n\n// Rasterise one triangle into the supersampled buffers, flat coloured, row\n// by row: on each row every edge bounds the run of samples on one side.\nfunction tri(S, ax, ay, az, bx, by, bz, cx, cy, cz, r, g, b) {\n  const { zb, cr, cg, cb } = S;\n  const det = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);\n  if (abs(det) \u003c 1e-6) return;\n  // Depth as a plane over the screen.\n  const dzx = ((bz - az) * (cy - ay) - (cz - az) * (by - ay)) / det;\n  const dzy = ((cz - az) * (bx - ax) - (bz - az) * (cx - ax)) / det;\n  const s = det > 0 ? 1 : -1;\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(SH - 1, floor(max(ay, by, cy) - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 0, xr = SW - 1;\n    for (let e = 0; e \u003c 3; e++) {\n      const x0 = e === 0 ? ax : e === 1 ? bx : cx, y0e = e === 0 ? ay : e === 1 ? by : cy;\n      const x1 = e === 0 ? bx : e === 1 ? cx : ax, y1e = e === 0 ? by : e === 1 ? cy : ay;\n      // Inside when s ((x1 - x0)(py - y0) - (y1 - y0)(px - x0)) >= 0, linear in px.\n      const A = -s * (y1e - y0e), B = s * ((x1 - x0) * (py - y0e) + (y1e - y0e) * x0);\n      if (abs(A) \u003c 1e-9) {\n        if (B \u003c 0) xr = -1;\n      } else if (A > 0) xl = max(xl, ceil(-B / A - 0.5));\n      else xr = min(xr, floor(-B / A - 0.5));\n    }\n    for (let x = xl; x \u003c= xr; x++) {\n      const z = az + dzx * (x + 0.5 - ax) + dzy * (py - ay), p = y * SW + x;\n      if (z \u003c zb[p]) {\n        zb[p] = z;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ox, oy, oz, vx, vy, vz, zb, cr, cg, cb, col } = S;\n  const n = S.n, mu = S.mu, K = ceil(mu - 1e-6);\n  const ce = cos(EL), se = sin(EL), cxs = CX * SS, cys = 64 * SS;\n  const ct = cos(S.spin), st = sin(S.spin);\n  // Ring k holds n corners at angles (2 pi j + pi k) / n, so each ring is\n  // turned pi / n from the last, at height k h / mu, the last held at the\n  // top: at a whole mu this is the lantern with mu bands, and between two\n  // whole values the top band opens from flat to full height.\n  for (let k = 0; k \u003c= K; k++) {\n    const y = min(HC, (k * HC) / mu);\n    for (let j = 0; j \u003c n; j++) {\n      const a = (TAU * j + PI * k) / n, x = R * cos(a), z = R * sin(a), o = k * n + j;\n      ox[o] = x;\n      oy[o] = y;\n      oz[o] = z;\n      // Turn about the axis, then look down by EL.\n      const xr = x * ct + z * st, zr = -x * st + z * ct, yc = y - HC / 2;\n      vx[o] = cxs + SS * xr;\n      vy[o] = cys - SS * (yc * ce + zr * se);\n      vz[o] = -yc * se + zr * ce;\n    }\n  }\n  zb.fill(1e9);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  // The light from the front left, its height set by K4: 44 degrees above\n  // at the opening, level at 0.5, 50 below at 1. The eye looks along +z.\n  const le = 0.87 - 1.74 * S.light, Lx = -0.55 * cos(le), Ly = sin(le), Lz = -0.83 * cos(le);\n  const Hx = Lx, Hy = Ly, Hz = Lz - 1, Hn = 1 / sqrt(Hx * Hx + Hy * Hy + Hz * Hz);\n  // The half vector of a second light high above and behind, for the\n  // glints off deep folds.\n  const Gx = 0.25, Gy = 0.8, Gz = -0.45, Gn = 1 / sqrt(Gx * Gx + Gy * Gy + Gz * Gz);\n  const h0 = S.hue + 0.55;\n  let area = 0;\n  for (let k = 0; k \u003c K; k++)\n    for (let j = 0; j \u003c n; j++)\n      for (let t = 0; t \u003c 2; t++) {\n        // t = 0: base on ring k, apex on ring k + 1 between the base's ends.\n        // t = 1: base on ring k + 1, apex on ring k between its ends.\n        const i0 = t === 0 ? k * n + j : (k + 1) * n + ((j + n - 1) % n);\n        const i1 = t === 0 ? k * n + ((j + 1) % n) : (k + 1) * n + j;\n        const i2 = t === 0 ? (k + 1) * n + j : k * n + j;\n        const ux = ox[i1] - ox[i0], uy = oy[i1] - oy[i0], uz = oz[i1] - oz[i0];\n        const wx = ox[i2] - ox[i0], wy = oy[i2] - oy[i0], wz = oz[i2] - oz[i0];\n        let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n        const nl = sqrt(nx * nx + ny * ny + nz * nz);\n        area += nl / 2;\n        if (nl \u003c 1e-9) continue;\n        (nx /= nl), (ny /= nl), (nz /= nl);\n        // Point the normal out of the cylinder.\n        if (nx * (ox[i0] + ox[i1] + ox[i2]) + nz * (oz[i0] + oz[i1] + oz[i2]) \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n        const rx = nx * ct + nz * st, rz0 = -nx * st + nz * ct;\n        const ry = ny * ce + rz0 * se, rz = -ny * se + rz0 * ce;\n        // Outside faces turn toward the eye; the inside shows through the top.\n        const out = rz \u003c 0, sx = out ? rx : -rx, sy = out ? ry : -ry, sz = out ? rz : -rz;\n        const dif = max(0, sx * Lx + sy * Ly + sz * Lz);\n        let lit, spec = 0;\n        if (out) {\n          const hv = max(0, (sx * Hx + sy * Hy + sz * Hz) * Hn), gv = max(0, (sx * Gx + sy * Gy + sz * Gz) * Gn);\n          spec = hv ** 40 * 0.6 + gv ** 40;\n          hsv(h0 + 0.1 * ny, 0.85 - 0.1 * abs(ny), 1, col, 0);\n          lit = 0.16 + 0.84 * dif;\n        } else {\n          hsv(h0 + 0.12, 0.7, 1, col, 0);\n          lit = 0.1 + 0.3 * dif;\n        }\n        tri(S, vx[i0], vy[i0], vz[i0], vx[i1], vy[i1], vz[i1], vx[i2], vy[i2], vz[i2], col[0] * lit + spec, col[1] * lit + spec, col[2] * lit + spec);\n      }\n  // Summed from the triangles themselves; at whole mu it equals\n  // A = 2 m n r sin(pi/n) sqrt((h/m)^2 + r^2 (1 - cos(pi/n))^2).\n  S.area = area / (TAU * R * HC);\n\n  const f = 255 / (SS * SS);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0;\n      for (let dy = 0; dy \u003c SS; dy++)\n        for (let dx = 0; dx \u003c SS; dx++) {\n          const p = (y * SS + dy) * SW + x * SS + dx;\n          r += cr[p];\n          g += cg[p];\n          b += cb[p];\n        }\n      // The gauge: a two-LED bar up the left edge, and a mark at 1, where\n      // the lantern's area would equal the cylinder's.\n      if ((x === 1 || x === 2) && y > G0 - S.area * GPX && y \u003c= G0) r = g = b = 190 / f;\n      if (x \u003c 5 && y === G0 - GPX) r = g = b = 255 / f;\n      display.setPixel(x, y, cl(r * f, 0, 255), cl(g * f, 0, 255), cl(b * f, 0, 255));\n    }\n}\n","layer":{"id":"layer-schwarz-lantern","type":"code","name":"schwarz-lantern","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Schwarz Lantern\n// Family:  geometry\n// Idea:    A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schwarz lantern (Hermann Schwarz, 1880), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1\n//\n// Knob 1: Hue. The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round.\n// Knob 2: Speed. At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long.\n// Knob 3: Sides. Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves.\n// Knob 4: Light. The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep.\n// Buttons: K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.\n\nconst W = 64, H = 128, SS = 2, SW = W * SS, SH = H * SS, SN = SW * SH;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, log, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The cylinder: radius R and height HC in LEDs, its axis at column CX, seen\n// from EL radians above. The bands run from MMIN to MMAX.\nconst R = 26, HC = 114, CX = 34.5, EL = 0.2, MMIN = 3, MMAX = 40, NMAX = 12;\n// The gauge: the lantern's area over the cylinder's, a bar up from row G0 at\n// the left edge, GPX LEDs to the unit, with a mark at 1.\nconst G0 = 125, GPX = 44;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const V = (MMAX + 2) * NMAX;\n  params.s = {\n    hue: 0, speed: 2, n: 5, light: 0.06, spin: 0, sweep: 2.2, snap: -1, mu: MMIN, area: 1,\n    ox: new Float32Array(V), oy: new Float32Array(V), oz: new Float32Array(V),\n    vx: new Float32Array(V), vy: new Float32Array(V), vz: new Float32Array(V),\n    zb: new Float32Array(SN), cr: new Float32Array(SN), cg: new Float32Array(SN), cb: new Float32Array(SN), col: new Float32Array(3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = Math.round(cl(k[2], 5, NMAX));\n  S.light = cl(k[3], 0, 1);\n  S.spin += d * S.speed * 0.12;\n  S.sweep += d * S.speed * 0.16;\n  if (S.snap >= 0) {\n    S.snap += d;\n    if (S.snap > 4.6) S.snap = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.snap = S.snap \u003c 0 ? 0 : min(S.snap, 0.6);\n  // The bands: MMIN to MMAX and back, evenly in log, lingering at both ends.\n  const u = 0.5 - 0.5 * cos(S.sweep);\n  let mu = exp(log(MMIN) + log(MMAX / MMIN) * u);\n  if (S.snap >= 0) {\n    const e = S.snap \u003c 0.6 ? sm(S.snap / 0.6) : 1 - sm((S.snap - 2.6) / 2);\n    mu = exp(log(mu) + (log(MMAX) - log(mu)) * e);\n  }\n  S.mu = mu;\n}\n\n// Rasterise one triangle into the supersampled buffers, flat coloured, row\n// by row: on each row every edge bounds the run of samples on one side.\nfunction tri(S, ax, ay, az, bx, by, bz, cx, cy, cz, r, g, b) {\n  const { zb, cr, cg, cb } = S;\n  const det = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);\n  if (abs(det) \u003c 1e-6) return;\n  // Depth as a plane over the screen.\n  const dzx = ((bz - az) * (cy - ay) - (cz - az) * (by - ay)) / det;\n  const dzy = ((cz - az) * (bx - ax) - (bz - az) * (cx - ax)) / det;\n  const s = det > 0 ? 1 : -1;\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(SH - 1, floor(max(ay, by, cy) - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 0, xr = SW - 1;\n    for (let e = 0; e \u003c 3; e++) {\n      const x0 = e === 0 ? ax : e === 1 ? bx : cx, y0e = e === 0 ? ay : e === 1 ? by : cy;\n      const x1 = e === 0 ? bx : e === 1 ? cx : ax, y1e = e === 0 ? by : e === 1 ? cy : ay;\n      // Inside when s ((x1 - x0)(py - y0) - (y1 - y0)(px - x0)) >= 0, linear in px.\n      const A = -s * (y1e - y0e), B = s * ((x1 - x0) * (py - y0e) + (y1e - y0e) * x0);\n      if (abs(A) \u003c 1e-9) {\n        if (B \u003c 0) xr = -1;\n      } else if (A > 0) xl = max(xl, ceil(-B / A - 0.5));\n      else xr = min(xr, floor(-B / A - 0.5));\n    }\n    for (let x = xl; x \u003c= xr; x++) {\n      const z = az + dzx * (x + 0.5 - ax) + dzy * (py - ay), p = y * SW + x;\n      if (z \u003c zb[p]) {\n        zb[p] = z;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ox, oy, oz, vx, vy, vz, zb, cr, cg, cb, col } = S;\n  const n = S.n, mu = S.mu, K = ceil(mu - 1e-6);\n  const ce = cos(EL), se = sin(EL), cxs = CX * SS, cys = 64 * SS;\n  const ct = cos(S.spin), st = sin(S.spin);\n  // Ring k holds n corners at angles (2 pi j + pi k) / n, so each ring is\n  // turned pi / n from the last, at height k h / mu, the last held at the\n  // top: at a whole mu this is the lantern with mu bands, and between two\n  // whole values the top band opens from flat to full height.\n  for (let k = 0; k \u003c= K; k++) {\n    const y = min(HC, (k * HC) / mu);\n    for (let j = 0; j \u003c n; j++) {\n      const a = (TAU * j + PI * k) / n, x = R * cos(a), z = R * sin(a), o = k * n + j;\n      ox[o] = x;\n      oy[o] = y;\n      oz[o] = z;\n      // Turn about the axis, then look down by EL.\n      const xr = x * ct + z * st, zr = -x * st + z * ct, yc = y - HC / 2;\n      vx[o] = cxs + SS * xr;\n      vy[o] = cys - SS * (yc * ce + zr * se);\n      vz[o] = -yc * se + zr * ce;\n    }\n  }\n  zb.fill(1e9);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  // The light from the front left, its height set by K4: 44 degrees above\n  // at the opening, level at 0.5, 50 below at 1. The eye looks along +z.\n  const le = 0.87 - 1.74 * S.light, Lx = -0.55 * cos(le), Ly = sin(le), Lz = -0.83 * cos(le);\n  const Hx = Lx, Hy = Ly, Hz = Lz - 1, Hn = 1 / sqrt(Hx * Hx + Hy * Hy + Hz * Hz);\n  // The half vector of a second light high above and behind, for the\n  // glints off deep folds.\n  const Gx = 0.25, Gy = 0.8, Gz = -0.45, Gn = 1 / sqrt(Gx * Gx + Gy * Gy + Gz * Gz);\n  const h0 = S.hue + 0.55;\n  let area = 0;\n  for (let k = 0; k \u003c K; k++)\n    for (let j = 0; j \u003c n; j++)\n      for (let t = 0; t \u003c 2; t++) {\n        // t = 0: base on ring k, apex on ring k + 1 between the base's ends.\n        // t = 1: base on ring k + 1, apex on ring k between its ends.\n        const i0 = t === 0 ? k * n + j : (k + 1) * n + ((j + n - 1) % n);\n        const i1 = t === 0 ? k * n + ((j + 1) % n) : (k + 1) * n + j;\n        const i2 = t === 0 ? (k + 1) * n + j : k * n + j;\n        const ux = ox[i1] - ox[i0], uy = oy[i1] - oy[i0], uz = oz[i1] - oz[i0];\n        const wx = ox[i2] - ox[i0], wy = oy[i2] - oy[i0], wz = oz[i2] - oz[i0];\n        let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n        const nl = sqrt(nx * nx + ny * ny + nz * nz);\n        area += nl / 2;\n        if (nl \u003c 1e-9) continue;\n        (nx /= nl), (ny /= nl), (nz /= nl);\n        // Point the normal out of the cylinder.\n        if (nx * (ox[i0] + ox[i1] + ox[i2]) + nz * (oz[i0] + oz[i1] + oz[i2]) \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n        const rx = nx * ct + nz * st, rz0 = -nx * st + nz * ct;\n        const ry = ny * ce + rz0 * se, rz = -ny * se + rz0 * ce;\n        // Outside faces turn toward the eye; the inside shows through the top.\n        const out = rz \u003c 0, sx = out ? rx : -rx, sy = out ? ry : -ry, sz = out ? rz : -rz;\n        const dif = max(0, sx * Lx + sy * Ly + sz * Lz);\n        let lit, spec = 0;\n        if (out) {\n          const hv = max(0, (sx * Hx + sy * Hy + sz * Hz) * Hn), gv = max(0, (sx * Gx + sy * Gy + sz * Gz) * Gn);\n          spec = hv ** 40 * 0.6 + gv ** 40;\n          hsv(h0 + 0.1 * ny, 0.85 - 0.1 * abs(ny), 1, col, 0);\n          lit = 0.16 + 0.84 * dif;\n        } else {\n          hsv(h0 + 0.12, 0.7, 1, col, 0);\n          lit = 0.1 + 0.3 * dif;\n        }\n        tri(S, vx[i0], vy[i0], vz[i0], vx[i1], vy[i1], vz[i1], vx[i2], vy[i2], vz[i2], col[0] * lit + spec, col[1] * lit + spec, col[2] * lit + spec);\n      }\n  // Summed from the triangles themselves; at whole mu it equals\n  // A = 2 m n r sin(pi/n) sqrt((h/m)^2 + r^2 (1 - cos(pi/n))^2).\n  S.area = area / (TAU * R * HC);\n\n  const f = 255 / (SS * SS);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0;\n      for (let dy = 0; dy \u003c SS; dy++)\n        for (let dx = 0; dx \u003c SS; dx++) {\n          const p = (y * SS + dy) * SW + x * SS + dx;\n          r += cr[p];\n          g += cg[p];\n          b += cb[p];\n        }\n      // The gauge: a two-LED bar up the left edge, and a mark at 1, where\n      // the lantern's area would equal the cylinder's.\n      if ((x === 1 || x === 2) && y > G0 - S.area * GPX && y \u003c= G0) r = g = b = 190 / f;\n      if (x \u003c 5 && y === G0 - GPX) r = g = b = 255 / f;\n      display.setPixel(x, y, cl(r * f, 0, 255), cl(g * f, 0, 255), cl(b * f, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long."},{"name":"Sides","min":5,"max":12,"about":"Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves."},{"name":"Light","min":0,"max":1,"about":"The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep."}],"start":[0,2,5,0.06],"measures":{"motion":2.2095,"detail":0.1257,"edges":0.8296,"complexity":0.2813,"coverage":0.7377,"colour":0.3317,"drift":0.1973},"knobResponse":[0.2726,0.2005,0.2242,0.2083]},{"slug":"searchlights","title":"Searchlights","family":"light","round":7,"note":"밤 도시의 지붕 뒤에서 탐조등 세 대가 가장자리가 또렷한 빛기둥을 천천히 휘둘러요. 기둥 둘이 겹친 자리는 하얗게 타고, K1 을 누르면 하늘을 가로지르는 비행기를 모든 기둥이 붙잡았다가 놓아줘요.","idea":"Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.","buttons":"K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.","code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","layer":{"id":"layer-searchlights","type":"code","name":"searchlights","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the lamps, starting from the cold blue-white of a xenon arc."},{"name":"Sweep","min":0.2,"max":4,"about":"How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds."},{"name":"Lights","min":3,"max":7,"about":"How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out."},{"name":"Haze","min":0,"max":1,"about":"How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky."}],"start":[0,2,3,0.06],"measures":{"motion":0.1662,"detail":0.0601,"edges":0.9751,"complexity":0.5201,"coverage":0.2833,"colour":0.1361,"drift":0.3569},"knobResponse":[0.0557,0.2929,0.2085,0.0855]},{"slug":"senbazuru","title":"Senbazuru","family":"paper","round":22,"note":"붉은 옻칠 고리에 실로 꿴 종이학이 줄줄이 매달려 금박 학 아래로 주황에서 초록, 파랑을 지나 보라와 분홍까지 띠를 이루고, 실 끝에는 금 구슬과 비단 술이 달려요. 어두운 절 방에 외풍이 불면 줄이 흔들리고 학이 실을 축으로 돌면서 접힌 면이 하나씩 등불을 받아 번쩍여요. K1 을 누르면 돌풍이 불어 학 하나가 떨어져 나뭇잎처럼 바닥으로 내려앉아요.","idea":"Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.","buttons":"K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-senbazuru","type":"code","name":"senbazuru","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow."},{"name":"Breeze","min":0.2,"max":3,"about":"How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin."},{"name":"Strands","min":8,"max":16,"about":"How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them."},{"name":"Light","min":0,"max":1,"about":"Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it."}],"start":[0,2,8,0.06],"measures":{"motion":0.5463,"detail":0.1059,"edges":0.4439,"complexity":2.0626,"coverage":0.7211,"colour":0.2483,"drift":0.1023},"knobResponse":[0.0684,0.1034,0.1073,0.1606]},{"slug":"sequins","title":"Sequins","family":"textile","round":23,"note":"뒤집히는 스팽글을 촘촘히 단 쿠션이 패널을 채워요. 은빛 비늘이 엇갈린 줄로 겹쳐 있고, 보이지 않는 손끝이 지나가면 스팽글이 차례로 모서리를 보이며 넘어가 하트, 별, 고양이 얼굴, 번개, 파도를 분홍 면으로 그려요. 손바닥이 위에서 아래로 쓸면 다시 은빛이 돼요.","idea":"A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.","buttons":"K1 tap sweeps the palm down the cushion now and the next drawing starts.","code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","layer":{"id":"layer-sequins","type":"code","name":"sequins","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower."},{"name":"Drawing","min":0,"max":4,"about":"What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.1482,"detail":0.3266,"edges":0.6744,"complexity":1.7886,"coverage":0.647,"colour":0.0886,"drift":0.2495},"knobResponse":[0.0553,0.0492,0.2354,0.1678]},{"slug":"serum-drip","title":"Serum Drip","family":"cosmetic","round":39,"note":"위 끝에서 흘러드는 금빛 세럼 실이 목이 졸리고 부풀어 구슬을 꿴 줄이 되고, 가는 실이 끊기며 큰 방울과 작은 위성 방울이 바닥의 웅덩이로 떨어져요. 세로 홈이 진 벽이 구슬마다 크게 비쳐요.","idea":"A thread of clear tinted serum falls from the top edge the height of the panel, necks and swells into beads on a string, the filaments between them thin and snap, and round drops with now and then a small satellite fall into a shallow pool at the bottom, while the stream keeps coming and the lit wall shows through every bead, magnified.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Serum Drip\n// Family:  cosmetic\n// Idea:    A thread of clear tinted serum falls from the top edge the height of the panel, necks and swells into beads on a string, the filaments between them thin and snap, and round drops with now and then a small satellite fall into a shallow pool at the bottom, while the stream keeps coming and the lit wall shows through every bead, magnified.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after a serum stretched from a dropper into a thread that beads up and breaks (the Plateau-Rayleigh instability, Joseph Plateau, 1873, and Lord Rayleigh, 1878)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=-1..1, Flow=-1..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, and the wall behind it takes a faint tint of the same hue. At 0 gold on a grey wall; at 0.04 yellow, 0.1 lime, 0.2 green, 0.36 aqua, 0.46 azure, 0.53 blue, 0.6 violet, 0.7 magenta, 0.78 rose, 0.86 red, 0.92 vermilion and 0.96 orange. From red-orange through gold to lime the wall is greyed and lifted a little and the pool lit from within, so the serum and its pool read amber, gold or lemon, never brown or olive.\n// Knob 2: Speed. At 2 the serum leaves the top edge at 28 LEDs a second, falls the height of the panel in about 3 seconds, and a drop breaks off about every 1.4 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Viscosity. At 0 the ripples grow down the thread into beads on a string, the filaments between them thin and snap about row 80, and drops 15 LEDs across fall into a pool 14 rows deep, now and then with a satellite. At -1 the serum is nine times thinner and snaps into clean drops about row 45. Turned up, the beads stay joined longer: from about 0.35 the thread reaches the pool unbroken as a string of beads, and at 1, nine times thicker than at 0, the ripples barely grow and the pool, draining slower, stands 21 rows deep.\n// Knob 4: Flow. How fast the serum leaves the top edge, 2.2 times slower at -1 and 2.2 times faster at 1. At -1 it cannot keep a thread going and drips: a drop swells below the top edge to 21 LEDs across and lets go about every 10 seconds; at -0.5 the thread breaks about row 60 into drops 19 across; from 0.5 it runs into the pool before it can break, and the pool rises to 19 rows.\n\nconst W = 64, H = 128, NMAX = 800, PMAX = 64;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The thread, in LEDs and seconds at Speed 2, is a slender-thread model: a\n// chain of slices of fixed volume between nodes on the vertical axis, each\n// slice a short cylinder. The area of the surface pulls on the nodes\n// (surface tension over density SIG), gravity GR pulls them down, and\n// viscosity resists stretching. A still thread in this model grows ripples\n// at the rates of Rayleigh's theory, fastest at nine radii. The serum leaves\n// an opening of radius A0, ZN above the top edge and never drawn.\n// TS slows the whole film down without changing a shape, Q scales the\n// thread: every rate below is set so the same shapes come at any Q.\nconst TS = 0.7, Q = 1.18;\nconst ZN = -5, A0 = 3.4 * Q, GR = 12 * Q * TS * TS, SIG = 2200 * Q ** 3 * TS * TS, DZ = 0.9, HCUT = 0.13;\n// A tremor in the flow ripples the thread's radius by about a sixth as it\n// leaves, at 8.8 radii, the wavelength that grows fastest on a thread at\n// rest, wandering a little either side of it. The fall stretches the\n// ripples as they go.\nconst LAM = 30 * Q;\n// Viscosity at Viscosity 0, in LEDs squared a second.\nconst NU0 = 55 * Q * Q * TS;\n// The pool's rest surface, its depth into the wall, and the ripple speed.\nconst POOL = 117, DEPTH = 18, CW = 40;\n// Opening hue: gold.\nconst H0 = 0.14;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  const F = () => new Float64Array(NMAX);\n  params.s = {\n    hue: 0, rate: 1, nu: 30, v0: 16, begun: false, t: 0,\n    n: 0, z: F(), u: F(), x: F(), V: F(), L: F(), h: F(), G: F(), f: F(), m: F(), lk: new Uint8Array(NMAX),\n    ca: F(), cb: F(), cc: F(), cd: F(),\n    drops: [], noise: 0, sway: random() * 6.28, pour: 0, ph: 0, jit: 0,\n    lvl: POOL, eta: new Float64Array(W), etv: new Float64Array(W),\n    PH: new Float64Array(2 * H), PX: new Float64Array(2 * H), PD: new Float64Array(2 * H), PT: new Float64Array(2 * H),\n    ser: [0, 0, 0], wall: [0, 0, 0],\n  };\n  const S = params.s;\n  // The node at the opening.\n  S.n = 1;\n  S.z[0] = ZN;\n  S.u[0] = S.v0;\n  S.x[0] = 32;\n}\n\n// Where the serum leaves the top edge: the hand above drifts slowly from\n// side to side, and the thread below keeps the curve of where it has been.\nconst openX = (S) => 32 + 5 * sin(S.sway + S.t * 0.6 * TS) + 1.5 * sin(S.sway * 2.3 + S.t * 1.4 * TS);\n\nfunction insert(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i + 1, i, S.n);\n  u.copyWithin(i + 1, i, S.n);\n  x.copyWithin(i + 1, i, S.n);\n  V.copyWithin(i + 1, i, S.n);\n  lk.copyWithin(i + 1, i, S.n);\n  S.n++;\n}\n\nfunction remove(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i, i + 1, S.n);\n  u.copyWithin(i, i + 1, S.n);\n  x.copyWithin(i, i + 1, S.n);\n  V.copyWithin(i, i + 1, S.n);\n  lk.copyWithin(i, i + 1, S.n);\n  S.n--;\n}\n\n// Node i is kinematic: the opening, or a node already in the pool.\nconst kin = (S, i) => i === 0 || S.z[i] > S.lvl;\n\nfunction step(S, dt) {\n  const { z, u, V, L, h, G, f, m, lk, ca, cb, cc, cd } = S, n = S.n;\n  // The node at the opening moves at the speed the serum leaves it.\n  u[0] = S.v0;\n  // Slices: length and radius.\n  for (let i = 0; i \u003c n - 1; i++) {\n    G[i] = 0;\n    if (!lk[i]) continue;\n    L[i] = max(1e-4, z[i + 1] - z[i]);\n    h[i] = sqrt(V[i] / (PI * L[i]));\n  }\n  // dArea / dLength of each slice: half a cylinder at each end (with a flat\n  // cap at a free end), a frustum between the middles of every two slices.\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    const hi = h[i], Li = L[i], dhi = -hi / (2 * Li);\n    const top = i === 0 || !lk[i - 1], bot = i + 1 === n - 1 || !lk[i + 1];\n    if (top) G[i] += PI * (hi / 2 - (kin(S, i) ? 0 : (hi * hi) / Li));\n    if (bot) G[i] += PI * (hi / 2 - (kin(S, i + 1) ? 0 : (hi * hi) / Li));\n    else {\n      const j = i + 1, hj = h[j], Lj = L[j], dhj = -hj / (2 * Lj), d = (Li + Lj) / 2, dl = hi - hj, Q = sqrt(d * d + dl * dl), hs = hi + hj;\n      G[i] += PI * (dhi * Q + (hs * (d / 2 + dl * dhi)) / Q);\n      G[j] += PI * (dhj * Q + (hs * (d / 2 - dl * dhj)) / Q);\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    f[i] = 0;\n    m[i] = 0;\n  }\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    f[i] += SIG * G[i];\n    f[i + 1] -= SIG * G[i];\n    m[i] += V[i] / 2;\n    m[i + 1] += V[i] / 2;\n  }\n  for (let i = 0; i \u003c n; i++) if (!kin(S, i) && m[i] > 0) u[i] += dt * (f[i] / m[i] + GR);\n  // Viscosity, implicit: each slice resists stretching with 3 nu V / L^2,\n  // solved along each chain as a tridiagonal system.\n  const nu = S.nu;\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      for (let i = a; i \u003c= b; i++) {\n        const cl0 = i > a ? (3 * nu * V[i - 1]) / (L[i - 1] * L[i - 1]) : 0, cr = i \u003c b ? (3 * nu * V[i]) / (L[i] * L[i]) : 0;\n        if (kin(S, i)) {\n          ca[i] = 0;\n          cb[i] = 1;\n          cc[i] = 0;\n          cd[i] = u[i];\n        } else {\n          ca[i] = -dt * cl0;\n          cb[i] = m[i] + dt * (cl0 + cr);\n          cc[i] = -dt * cr;\n          cd[i] = m[i] * u[i];\n        }\n      }\n      for (let i = a + 1; i \u003c= b; i++) {\n        const w = ca[i] / cb[i - 1];\n        cb[i] -= w * cc[i - 1];\n        cd[i] -= w * cd[i - 1];\n      }\n      u[b] = cd[b] / cb[b];\n      for (let i = b - 1; i >= a; i--) u[i] = (cd[i] - cc[i] * u[i + 1]) / cb[i];\n    }\n    a = b + 1;\n  }\n  for (let i = 0; i \u003c n; i++) z[i] += dt * u[i];\n  S.t += dt;\n}\n\n// After a step: feed the opening, split long slices, merge short ones, cut\n// the thread where it has thinned to nothing, roll free pieces up into drops,\n// and pour what reaches the pool into it.\nfunction tidy(S) {\n  const { z, u, x, V, lk } = S;\n  // The opening: a new slice each time the last one has left it.\n  if (z[0] >= ZN + DZ && S.n \u003c NMAX - 2) {\n    insert(S, 0);\n    z[0] = z[1] - DZ;\n    u[0] = S.v0;\n    x[0] = openX(S);\n    S.noise += 0.35 * (random() - 0.5) - 0.12 * S.noise;\n    S.jit += 0.2 * (random() - 0.5) - 0.05 * S.jit;\n    S.ph += ((2 * PI * DZ) / LAM) * (1 + 0.25 * S.jit);\n    V[0] = PI * A0 * A0 * DZ * (1 + 0.35 * sin(S.ph) + 0.04 * S.noise);\n    lk[0] = 1;\n  }\n  z[0] = max(z[0], ZN);\n  for (let i = 0; i \u003c S.n - 1; i++) {\n    if (!lk[i]) continue;\n    const L = z[i + 1] - z[i], hh = sqrt(V[i] / (PI * max(L, 1e-4))), lo = 0.22 + 0.2 * hh;\n    if (L > max(1, 2.6 * lo) && S.n \u003c NMAX - 2) {\n      insert(S, i + 1);\n      z[i + 1] = (z[i] + z[i + 2]) / 2;\n      u[i + 1] = (u[i] + u[i + 2]) / 2;\n      x[i + 1] = (x[i] + x[i + 2]) / 2;\n      V[i] /= 2;\n      V[i + 1] = V[i];\n      lk[i + 1] = 1;\n    } else if (hh \u003c HCUT) {\n      // Pinch-off.\n      lk[i] = 0;\n      if (i > 0 && lk[i - 1]) V[i - 1] += V[i] / 2;\n      if (i + 1 \u003c S.n - 1 && lk[i + 1]) V[i + 1] += V[i] / 2;\n    } else if (L \u003c lo) {\n      // Merge with a neighbour by dropping the shared node.\n      const left = i > 0 && lk[i - 1] && (!(i + 1 \u003c S.n - 1 && lk[i + 1]) || z[i] - z[i - 1] \u003c z[i + 2] - z[i + 1]);\n      const right = !left && i + 1 \u003c S.n - 1 && lk[i + 1];\n      if (left) {\n        // The dropped node's momentum goes half to each neighbour.\n        const mr = (V[i - 1] + V[i]) / 2, ma = V[i - 1] / 2, mb = V[i] / 2;\n        u[i - 1] = (u[i - 1] * ma + (u[i] * mr) / 2) / (ma + mr / 2);\n        u[i + 1] = (u[i + 1] * mb + (u[i] * mr) / 2) / (mb + mr / 2);\n        V[i - 1] += V[i];\n        remove(S, i);\n        i--;\n      } else if (right) {\n        const j = i + 1, mr = (V[i] + V[j]) / 2;\n        u[i] = (u[i] * V[i] / 2 + (u[j] * mr) / 2) / (V[i] / 2 + mr / 2);\n        u[j + 1] = (u[j + 1] * V[j] / 2 + (u[j] * mr) / 2) / (V[j] / 2 + mr / 2);\n        V[i] += V[j];\n        lk[i] = 1;\n        remove(S, j);\n      }\n    }\n  }\n  // Nodes left with no slice on either side go, but not the one at the opening.\n  for (let i = S.n - 1; i > 0; i--) if (!lk[i - 1] && !(i \u003c S.n - 1 && lk[i])) remove(S, i);\n  // Chains: roll a short free piece into a drop; pour what is in the pool.\n  let a = 0;\n  while (a \u003c S.n) {\n    let b = a;\n    while (b \u003c S.n - 1 && lk[b]) b++;\n    if (b > a) {\n      let vol = 0, mom = 0, zc = 0, xc = 0;\n      for (let i = a; i \u003c b; i++) {\n        vol += V[i];\n        mom += (V[i] * (u[i] + u[i + 1])) / 2;\n        zc += (V[i] * (z[i] + z[i + 1])) / 2;\n        xc += (V[i] * (x[i] + x[i + 1])) / 2;\n      }\n      const R = (0.75 * vol / PI) ** (1 / 3), len = z[b] - z[a];\n      if (a > 0 && (b - a \u003c= 2 || len \u003c 2.3 * R) && z[b] \u003c= S.lvl && S.drops.length \u003c PMAX) {\n        S.drops.push({ y: zc / vol, x: xc / vol, v: mom / vol, R, vol, e: cl(len / (2 * R) - 1, -0.4, 0.6), ph: 0 });\n        for (let i = b; i >= a; i--) remove(S, i);\n        continue;\n      }\n      // Slices wholly under the surface go into the pool.\n      while (b > a && z[b - 1] > S.lvl + 1) {\n        S.pour += V[b - 1];\n        remove(S, b);\n        lk[b - 1] = 0;\n        b--;\n      }\n    }\n    a = b + 1;\n  }\n}\n\nfunction drops(S, d) {\n  const { eta, etv } = S;\n  for (const p of S.drops) {\n    p.v += GR * d;\n    p.y += p.v * d;\n    // A drop rings at its lowest mode, sqrt(8 SIG / R^3), damped by viscosity.\n    p.ph += sqrt((8 * SIG) / (p.R * p.R * p.R)) * d;\n    p.e *= exp((-d * (5 * S.nu + 4)) / (p.R * p.R));\n  }\n  S.drops = S.drops.filter((p) => {\n    if (p.y - 0.3 * p.R \u003c S.lvl + eta[cl(round(p.x), 0, W - 1)]) return true;\n    S.pour += p.vol;\n    const k = p.vol * p.v * 0.0004;\n    for (let i = -6; i \u003c= 6; i++) {\n      const c = cl(round(p.x) + i, 0, W - 1);\n      etv[c] -= k * exp(-(i * i) / (p.R * p.R + 2));\n    }\n    return false;\n  });\n  // The pool fills with what comes in and drains back toward its rest level.\n  // A thicker serum drains away more slowly, so its pool stands higher.\n  S.lvl += -S.pour / (W * DEPTH) + (POOL - S.lvl) * min(1, d / (3 * (S.nu / NU0) ** 0.45));\n  S.pour = 0;\n  for (let i = 0; i \u003c W; i++) {\n    const l = eta[i > 0 ? i - 1 : i], r = eta[i \u003c W - 1 ? i + 1 : i];\n    etv[i] += d * (CW * CW * (l + r - 2 * eta[i]) - 4 * etv[i]);\n  }\n  for (let i = 0; i \u003c W; i++) eta[i] = cl(eta[i] + d * etv[i], -5, 5);\n}\n\nfunction advance(S, d) {\n  // Substeps short enough for the stiffest slice: a capillary wave as short\n  // as the slice rings at sqrt(SIG h / 2) (pi / L)^2.\n  let left = d;\n  while (left > 1e-6) {\n    let w = 0;\n    for (let i = 0; i \u003c S.n - 1; i++) {\n      if (!S.lk[i]) continue;\n      const L = max(0.05, S.z[i + 1] - S.z[i]), hh = sqrt(S.V[i] / (PI * L));\n      w = max(w, (sqrt((SIG * hh) / 2) * PI * PI) / (L * L));\n    }\n    const dt = min(left, 0.6 / max(w, 1), 1 / 120);\n    step(S, dt);\n    tidy(S);\n    drops(S, dt);\n    left -= dt;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.nu = NU0 * 9 ** cl(k[2], -1, 1);\n  S.v0 = 34 * Q * TS * 2.2 ** cl(k[3], -1, 1);\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c 90; i++) advance(S, 1 / 30);\n    // The pool opens at the level where it drains as fast as it fills.\n    S.lvl = POOL - (PI * A0 * A0 * S.v0 * 3 * (S.nu / NU0) ** 0.45) / (W * DEPTH);\n  }\n  advance(S, d * S.rate);\n}\n\n// The radius and centre of the liquid at half-row samples.\nfunction profile(S) {\n  const { PH, PX, PD, z, x, V, lk } = S, n = S.n;\n  PH.fill(0);\n  PD.fill(0);\n  const put = (za, ha, xa, zb, hb, xb) => {\n    const k0 = max(0, Math.ceil(2 * za - 0.5)), k1 = min(2 * H - 1, floor(2 * zb - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const zz = (k + 0.5) / 2, t = zb > za ? (zz - za) / (zb - za) : 0, hh = ha + (hb - ha) * t;\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = xa + (xb - xa) * t;\n        PD[k] = zb > za ? (hb - ha) / (zb - za) : 0;\n      }\n    }\n  };\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      let pz = 0, ph = 0, px = 0;\n      for (let i = a; i \u003c b; i++) {\n        const L = max(1e-3, z[i + 1] - z[i]), hh = sqrt(V[i] / (PI * L)), zm = (z[i] + z[i + 1]) / 2, xm = (x[i] + x[i + 1]) / 2;\n        if (i === a) {\n          // The upper end: the thread runs off the top edge, a free end is capped.\n          if (a === 0) put(z[a] - 2, hh, xm, zm, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm - cap * sqrt(1 - t0 * t0), hh * t0, xm, zm - cap * sqrt(1 - t1 * t1), hh * t1, xm);\n            }\n        } else put(pz, ph, px, zm, hh, xm);\n        if (i === b - 1) {\n          if (z[b] > S.lvl) put(zm, hh, xm, S.lvl + 2, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm + cap * sqrt(1 - t1 * t1), hh * t1, xm, zm + cap * sqrt(1 - t0 * t0), hh * t0, xm);\n            }\n        }\n        pz = zm;\n        ph = hh;\n        px = xm;\n      }\n    }\n    a = b + 1;\n  }\n  for (const p of S.drops) {\n    const dd = p.e * cos(p.ph), ry = p.R * (1 + dd), rx = p.R / sqrt(1 + dd);\n    const k0 = max(0, Math.ceil(2 * (p.y - ry) - 0.5)), k1 = min(2 * H - 1, floor(2 * (p.y + ry) - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const w = ((k + 0.5) / 2 - p.y) / ry, hh = rx * sqrt(max(0, 1 - w * w));\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = p.x;\n        PD[k] = (-rx * w) / ry / max(0.15, sqrt(max(0, 1 - w * w)));\n      }\n    }\n  }\n  // Smooth the radius along the thread so the light runs over it without\n  // steps, and take the slope from the smoothed radius.\n  const { PT } = S;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let k = 0; k \u003c 2 * H; k++) {\n      const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n      PT[k] = PH[k] > 0 && a > 0 && b > 0 ? 0.25 * a + 0.5 * PH[k] + 0.25 * b : PH[k];\n    }\n    PH.set(PT);\n  }\n  for (let k = 0; k \u003c 2 * H; k++) {\n    const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n    if (PH[k] > 0 && a > 0 && b > 0) PD[k] = cl(b - a, -4, 4);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  profile(S);\n  const { PH, PX, PD, ser, wall, eta } = S;\n  const hue = S.hue + H0;\n  hsv(hue, 0.85, 1, ser);\n  // Orange and yellow go brown and olive on a dim wall: there the wall is\n  // greyed and lifted and the pool glows with the serum's own colour.\n  const wu = (hue - floor(hue) - 0.13) / 0.19, wm = wu * wu \u003c 1 ? (1 - wu * wu) ** 2 : 0;\n  hsv(hue, 0.14 - 0.1 * wm, 1 + 0.18 * wm, wall);\n  const [sr, sg, sb] = ser, [wr, wg, wb] = wall;\n  // Absorption per LED of path through the serum, per channel.\n  const ar = 0.3 * (1 - sr), ag = 0.3 * (1 - sg), ab = 0.3 * (1 - sb);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let R = 0, G = 0, B = 0;\n      const px = x + 0.5, e0 = eta[max(0, x - 1)], e1 = eta[x], e2 = eta[min(W - 1, x + 1)];\n      const surf = S.lvl + 0.25 * e0 + 0.5 * e1 + 0.25 * e2, slope = (e2 - e0) / 2, pf = cl(y + 1 - surf, 0, 1);\n      if (pf \u003c 1)\n        for (let sub = 0; sub \u003c 2; sub++) {\n          const k = 2 * y + sub, zz = (k + 0.5) / 2, wv = lit(px, zz);\n          let r = wv * wr, g = wv * wg, b = wv * wb;\n          const hh = PH[k], dx = px - PX[k], cov = cl(hh - abs(dx) + 0.5, 0, 1);\n          if (cov > 0 && hh > 0.2) {\n            // Clear serum: the wall behind seen magnified through it and\n            // tinted by the path the light takes, a darker rim, an inner\n            // glow on the far side, a highlight down the near side.\n            const uu = cl(dx / hh, -0.97, 0.97), c = sqrt(1 - uu * uu), hz = PD[k], nn = 1 / sqrt(1 + hz * hz);\n            const nx = uu * nn, ny = c * nn, nz = -hz * nn;\n            const lv = 1.35 * lit(PX[k] + dx * 0.55, zz + 0.45 * hh * hz), path = 2 * hh * c + 0.5;\n            const rim = 1 - 0.5 * exp(-c * 4), glow = 0.7 * max(0, 0.55 * nx + 0.25 * ny + 0.55 * nz) ** 2;\n            const sp = max(0, -0.4 * nx + 0.82 * ny - 0.42 * nz), spec = 0.95 * sp ** 40 + 0.12 * sp ** 6;\n            r += (lv * wr * exp(-ar * path) * rim + sr * glow + spec - r) * cov;\n            g += (lv * wg * exp(-ag * path) * rim + sg * glow + spec - g) * cov;\n            b += (lv * wb * exp(-ab * path) * rim + sb * glow + spec - b) * cov;\n          }\n          R += r / 2;\n          G += g / 2;\n          B += b / 2;\n        }\n      if (pf > 0) {\n        // The pool: the wall seen through it, a little lower and deeper in\n        // colour further down, lit from within, a dark band under the surface.\n        const top = max(0, y + 0.5 - surf), wv = lit(px, surf + top * 0.75) * 1.15, path = 3 + 0.3 * top;\n        const dk = 1 - 0.35 * exp(-((top - 1.4) ** 2)), gl = 0.2 + 0.06 * wm;\n        R += ((wv * wr * exp(-0.4 * ar * path) + gl * sr) * dk - R) * pf;\n        G += ((wv * wg * exp(-0.4 * ag * path) + gl * sg) * dk - G) * pf;\n        B += ((wv * wb * exp(-0.4 * ab * path) + gl * sb) * dk - B) * pf;\n      }\n      // The bright line of the surface, brighter where a ripple tilts it to the light.\n      const ln = exp(-(((y + 0.5 - surf) / 0.55) ** 2)) * (0.5 + cl(-slope * 0.8, -0.35, 0.5));\n      R += ln;\n      G += ln;\n      B += ln;\n      display.setPixel(x, y, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n    }\n}\n\n// The lit wall, as a level: pale, light from the upper left, soft vertical\n// flutes 8 LEDs apart for the beads to magnify.\nconst lit = (x, z) => (0.4 + 0.24 * (1 - x / 90 - z / 300)) * (1 + 0.07 * cos((2 * PI * x) / 8));\n","layer":{"id":"layer-serum-drip","type":"code","name":"serum-drip","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Serum Drip\n// Family:  cosmetic\n// Idea:    A thread of clear tinted serum falls from the top edge the height of the panel, necks and swells into beads on a string, the filaments between them thin and snap, and round drops with now and then a small satellite fall into a shallow pool at the bottom, while the stream keeps coming and the lit wall shows through every bead, magnified.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after a serum stretched from a dropper into a thread that beads up and breaks (the Plateau-Rayleigh instability, Joseph Plateau, 1873, and Lord Rayleigh, 1878)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=-1..1, Flow=-1..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, and the wall behind it takes a faint tint of the same hue. At 0 gold on a grey wall; at 0.04 yellow, 0.1 lime, 0.2 green, 0.36 aqua, 0.46 azure, 0.53 blue, 0.6 violet, 0.7 magenta, 0.78 rose, 0.86 red, 0.92 vermilion and 0.96 orange. From red-orange through gold to lime the wall is greyed and lifted a little and the pool lit from within, so the serum and its pool read amber, gold or lemon, never brown or olive.\n// Knob 2: Speed. At 2 the serum leaves the top edge at 28 LEDs a second, falls the height of the panel in about 3 seconds, and a drop breaks off about every 1.4 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Viscosity. At 0 the ripples grow down the thread into beads on a string, the filaments between them thin and snap about row 80, and drops 15 LEDs across fall into a pool 14 rows deep, now and then with a satellite. At -1 the serum is nine times thinner and snaps into clean drops about row 45. Turned up, the beads stay joined longer: from about 0.35 the thread reaches the pool unbroken as a string of beads, and at 1, nine times thicker than at 0, the ripples barely grow and the pool, draining slower, stands 21 rows deep.\n// Knob 4: Flow. How fast the serum leaves the top edge, 2.2 times slower at -1 and 2.2 times faster at 1. At -1 it cannot keep a thread going and drips: a drop swells below the top edge to 21 LEDs across and lets go about every 10 seconds; at -0.5 the thread breaks about row 60 into drops 19 across; from 0.5 it runs into the pool before it can break, and the pool rises to 19 rows.\n\nconst W = 64, H = 128, NMAX = 800, PMAX = 64;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The thread, in LEDs and seconds at Speed 2, is a slender-thread model: a\n// chain of slices of fixed volume between nodes on the vertical axis, each\n// slice a short cylinder. The area of the surface pulls on the nodes\n// (surface tension over density SIG), gravity GR pulls them down, and\n// viscosity resists stretching. A still thread in this model grows ripples\n// at the rates of Rayleigh's theory, fastest at nine radii. The serum leaves\n// an opening of radius A0, ZN above the top edge and never drawn.\n// TS slows the whole film down without changing a shape, Q scales the\n// thread: every rate below is set so the same shapes come at any Q.\nconst TS = 0.7, Q = 1.18;\nconst ZN = -5, A0 = 3.4 * Q, GR = 12 * Q * TS * TS, SIG = 2200 * Q ** 3 * TS * TS, DZ = 0.9, HCUT = 0.13;\n// A tremor in the flow ripples the thread's radius by about a sixth as it\n// leaves, at 8.8 radii, the wavelength that grows fastest on a thread at\n// rest, wandering a little either side of it. The fall stretches the\n// ripples as they go.\nconst LAM = 30 * Q;\n// Viscosity at Viscosity 0, in LEDs squared a second.\nconst NU0 = 55 * Q * Q * TS;\n// The pool's rest surface, its depth into the wall, and the ripple speed.\nconst POOL = 117, DEPTH = 18, CW = 40;\n// Opening hue: gold.\nconst H0 = 0.14;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  const F = () => new Float64Array(NMAX);\n  params.s = {\n    hue: 0, rate: 1, nu: 30, v0: 16, begun: false, t: 0,\n    n: 0, z: F(), u: F(), x: F(), V: F(), L: F(), h: F(), G: F(), f: F(), m: F(), lk: new Uint8Array(NMAX),\n    ca: F(), cb: F(), cc: F(), cd: F(),\n    drops: [], noise: 0, sway: random() * 6.28, pour: 0, ph: 0, jit: 0,\n    lvl: POOL, eta: new Float64Array(W), etv: new Float64Array(W),\n    PH: new Float64Array(2 * H), PX: new Float64Array(2 * H), PD: new Float64Array(2 * H), PT: new Float64Array(2 * H),\n    ser: [0, 0, 0], wall: [0, 0, 0],\n  };\n  const S = params.s;\n  // The node at the opening.\n  S.n = 1;\n  S.z[0] = ZN;\n  S.u[0] = S.v0;\n  S.x[0] = 32;\n}\n\n// Where the serum leaves the top edge: the hand above drifts slowly from\n// side to side, and the thread below keeps the curve of where it has been.\nconst openX = (S) => 32 + 5 * sin(S.sway + S.t * 0.6 * TS) + 1.5 * sin(S.sway * 2.3 + S.t * 1.4 * TS);\n\nfunction insert(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i + 1, i, S.n);\n  u.copyWithin(i + 1, i, S.n);\n  x.copyWithin(i + 1, i, S.n);\n  V.copyWithin(i + 1, i, S.n);\n  lk.copyWithin(i + 1, i, S.n);\n  S.n++;\n}\n\nfunction remove(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i, i + 1, S.n);\n  u.copyWithin(i, i + 1, S.n);\n  x.copyWithin(i, i + 1, S.n);\n  V.copyWithin(i, i + 1, S.n);\n  lk.copyWithin(i, i + 1, S.n);\n  S.n--;\n}\n\n// Node i is kinematic: the opening, or a node already in the pool.\nconst kin = (S, i) => i === 0 || S.z[i] > S.lvl;\n\nfunction step(S, dt) {\n  const { z, u, V, L, h, G, f, m, lk, ca, cb, cc, cd } = S, n = S.n;\n  // The node at the opening moves at the speed the serum leaves it.\n  u[0] = S.v0;\n  // Slices: length and radius.\n  for (let i = 0; i \u003c n - 1; i++) {\n    G[i] = 0;\n    if (!lk[i]) continue;\n    L[i] = max(1e-4, z[i + 1] - z[i]);\n    h[i] = sqrt(V[i] / (PI * L[i]));\n  }\n  // dArea / dLength of each slice: half a cylinder at each end (with a flat\n  // cap at a free end), a frustum between the middles of every two slices.\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    const hi = h[i], Li = L[i], dhi = -hi / (2 * Li);\n    const top = i === 0 || !lk[i - 1], bot = i + 1 === n - 1 || !lk[i + 1];\n    if (top) G[i] += PI * (hi / 2 - (kin(S, i) ? 0 : (hi * hi) / Li));\n    if (bot) G[i] += PI * (hi / 2 - (kin(S, i + 1) ? 0 : (hi * hi) / Li));\n    else {\n      const j = i + 1, hj = h[j], Lj = L[j], dhj = -hj / (2 * Lj), d = (Li + Lj) / 2, dl = hi - hj, Q = sqrt(d * d + dl * dl), hs = hi + hj;\n      G[i] += PI * (dhi * Q + (hs * (d / 2 + dl * dhi)) / Q);\n      G[j] += PI * (dhj * Q + (hs * (d / 2 - dl * dhj)) / Q);\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    f[i] = 0;\n    m[i] = 0;\n  }\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    f[i] += SIG * G[i];\n    f[i + 1] -= SIG * G[i];\n    m[i] += V[i] / 2;\n    m[i + 1] += V[i] / 2;\n  }\n  for (let i = 0; i \u003c n; i++) if (!kin(S, i) && m[i] > 0) u[i] += dt * (f[i] / m[i] + GR);\n  // Viscosity, implicit: each slice resists stretching with 3 nu V / L^2,\n  // solved along each chain as a tridiagonal system.\n  const nu = S.nu;\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      for (let i = a; i \u003c= b; i++) {\n        const cl0 = i > a ? (3 * nu * V[i - 1]) / (L[i - 1] * L[i - 1]) : 0, cr = i \u003c b ? (3 * nu * V[i]) / (L[i] * L[i]) : 0;\n        if (kin(S, i)) {\n          ca[i] = 0;\n          cb[i] = 1;\n          cc[i] = 0;\n          cd[i] = u[i];\n        } else {\n          ca[i] = -dt * cl0;\n          cb[i] = m[i] + dt * (cl0 + cr);\n          cc[i] = -dt * cr;\n          cd[i] = m[i] * u[i];\n        }\n      }\n      for (let i = a + 1; i \u003c= b; i++) {\n        const w = ca[i] / cb[i - 1];\n        cb[i] -= w * cc[i - 1];\n        cd[i] -= w * cd[i - 1];\n      }\n      u[b] = cd[b] / cb[b];\n      for (let i = b - 1; i >= a; i--) u[i] = (cd[i] - cc[i] * u[i + 1]) / cb[i];\n    }\n    a = b + 1;\n  }\n  for (let i = 0; i \u003c n; i++) z[i] += dt * u[i];\n  S.t += dt;\n}\n\n// After a step: feed the opening, split long slices, merge short ones, cut\n// the thread where it has thinned to nothing, roll free pieces up into drops,\n// and pour what reaches the pool into it.\nfunction tidy(S) {\n  const { z, u, x, V, lk } = S;\n  // The opening: a new slice each time the last one has left it.\n  if (z[0] >= ZN + DZ && S.n \u003c NMAX - 2) {\n    insert(S, 0);\n    z[0] = z[1] - DZ;\n    u[0] = S.v0;\n    x[0] = openX(S);\n    S.noise += 0.35 * (random() - 0.5) - 0.12 * S.noise;\n    S.jit += 0.2 * (random() - 0.5) - 0.05 * S.jit;\n    S.ph += ((2 * PI * DZ) / LAM) * (1 + 0.25 * S.jit);\n    V[0] = PI * A0 * A0 * DZ * (1 + 0.35 * sin(S.ph) + 0.04 * S.noise);\n    lk[0] = 1;\n  }\n  z[0] = max(z[0], ZN);\n  for (let i = 0; i \u003c S.n - 1; i++) {\n    if (!lk[i]) continue;\n    const L = z[i + 1] - z[i], hh = sqrt(V[i] / (PI * max(L, 1e-4))), lo = 0.22 + 0.2 * hh;\n    if (L > max(1, 2.6 * lo) && S.n \u003c NMAX - 2) {\n      insert(S, i + 1);\n      z[i + 1] = (z[i] + z[i + 2]) / 2;\n      u[i + 1] = (u[i] + u[i + 2]) / 2;\n      x[i + 1] = (x[i] + x[i + 2]) / 2;\n      V[i] /= 2;\n      V[i + 1] = V[i];\n      lk[i + 1] = 1;\n    } else if (hh \u003c HCUT) {\n      // Pinch-off.\n      lk[i] = 0;\n      if (i > 0 && lk[i - 1]) V[i - 1] += V[i] / 2;\n      if (i + 1 \u003c S.n - 1 && lk[i + 1]) V[i + 1] += V[i] / 2;\n    } else if (L \u003c lo) {\n      // Merge with a neighbour by dropping the shared node.\n      const left = i > 0 && lk[i - 1] && (!(i + 1 \u003c S.n - 1 && lk[i + 1]) || z[i] - z[i - 1] \u003c z[i + 2] - z[i + 1]);\n      const right = !left && i + 1 \u003c S.n - 1 && lk[i + 1];\n      if (left) {\n        // The dropped node's momentum goes half to each neighbour.\n        const mr = (V[i - 1] + V[i]) / 2, ma = V[i - 1] / 2, mb = V[i] / 2;\n        u[i - 1] = (u[i - 1] * ma + (u[i] * mr) / 2) / (ma + mr / 2);\n        u[i + 1] = (u[i + 1] * mb + (u[i] * mr) / 2) / (mb + mr / 2);\n        V[i - 1] += V[i];\n        remove(S, i);\n        i--;\n      } else if (right) {\n        const j = i + 1, mr = (V[i] + V[j]) / 2;\n        u[i] = (u[i] * V[i] / 2 + (u[j] * mr) / 2) / (V[i] / 2 + mr / 2);\n        u[j + 1] = (u[j + 1] * V[j] / 2 + (u[j] * mr) / 2) / (V[j] / 2 + mr / 2);\n        V[i] += V[j];\n        lk[i] = 1;\n        remove(S, j);\n      }\n    }\n  }\n  // Nodes left with no slice on either side go, but not the one at the opening.\n  for (let i = S.n - 1; i > 0; i--) if (!lk[i - 1] && !(i \u003c S.n - 1 && lk[i])) remove(S, i);\n  // Chains: roll a short free piece into a drop; pour what is in the pool.\n  let a = 0;\n  while (a \u003c S.n) {\n    let b = a;\n    while (b \u003c S.n - 1 && lk[b]) b++;\n    if (b > a) {\n      let vol = 0, mom = 0, zc = 0, xc = 0;\n      for (let i = a; i \u003c b; i++) {\n        vol += V[i];\n        mom += (V[i] * (u[i] + u[i + 1])) / 2;\n        zc += (V[i] * (z[i] + z[i + 1])) / 2;\n        xc += (V[i] * (x[i] + x[i + 1])) / 2;\n      }\n      const R = (0.75 * vol / PI) ** (1 / 3), len = z[b] - z[a];\n      if (a > 0 && (b - a \u003c= 2 || len \u003c 2.3 * R) && z[b] \u003c= S.lvl && S.drops.length \u003c PMAX) {\n        S.drops.push({ y: zc / vol, x: xc / vol, v: mom / vol, R, vol, e: cl(len / (2 * R) - 1, -0.4, 0.6), ph: 0 });\n        for (let i = b; i >= a; i--) remove(S, i);\n        continue;\n      }\n      // Slices wholly under the surface go into the pool.\n      while (b > a && z[b - 1] > S.lvl + 1) {\n        S.pour += V[b - 1];\n        remove(S, b);\n        lk[b - 1] = 0;\n        b--;\n      }\n    }\n    a = b + 1;\n  }\n}\n\nfunction drops(S, d) {\n  const { eta, etv } = S;\n  for (const p of S.drops) {\n    p.v += GR * d;\n    p.y += p.v * d;\n    // A drop rings at its lowest mode, sqrt(8 SIG / R^3), damped by viscosity.\n    p.ph += sqrt((8 * SIG) / (p.R * p.R * p.R)) * d;\n    p.e *= exp((-d * (5 * S.nu + 4)) / (p.R * p.R));\n  }\n  S.drops = S.drops.filter((p) => {\n    if (p.y - 0.3 * p.R \u003c S.lvl + eta[cl(round(p.x), 0, W - 1)]) return true;\n    S.pour += p.vol;\n    const k = p.vol * p.v * 0.0004;\n    for (let i = -6; i \u003c= 6; i++) {\n      const c = cl(round(p.x) + i, 0, W - 1);\n      etv[c] -= k * exp(-(i * i) / (p.R * p.R + 2));\n    }\n    return false;\n  });\n  // The pool fills with what comes in and drains back toward its rest level.\n  // A thicker serum drains away more slowly, so its pool stands higher.\n  S.lvl += -S.pour / (W * DEPTH) + (POOL - S.lvl) * min(1, d / (3 * (S.nu / NU0) ** 0.45));\n  S.pour = 0;\n  for (let i = 0; i \u003c W; i++) {\n    const l = eta[i > 0 ? i - 1 : i], r = eta[i \u003c W - 1 ? i + 1 : i];\n    etv[i] += d * (CW * CW * (l + r - 2 * eta[i]) - 4 * etv[i]);\n  }\n  for (let i = 0; i \u003c W; i++) eta[i] = cl(eta[i] + d * etv[i], -5, 5);\n}\n\nfunction advance(S, d) {\n  // Substeps short enough for the stiffest slice: a capillary wave as short\n  // as the slice rings at sqrt(SIG h / 2) (pi / L)^2.\n  let left = d;\n  while (left > 1e-6) {\n    let w = 0;\n    for (let i = 0; i \u003c S.n - 1; i++) {\n      if (!S.lk[i]) continue;\n      const L = max(0.05, S.z[i + 1] - S.z[i]), hh = sqrt(S.V[i] / (PI * L));\n      w = max(w, (sqrt((SIG * hh) / 2) * PI * PI) / (L * L));\n    }\n    const dt = min(left, 0.6 / max(w, 1), 1 / 120);\n    step(S, dt);\n    tidy(S);\n    drops(S, dt);\n    left -= dt;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.nu = NU0 * 9 ** cl(k[2], -1, 1);\n  S.v0 = 34 * Q * TS * 2.2 ** cl(k[3], -1, 1);\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c 90; i++) advance(S, 1 / 30);\n    // The pool opens at the level where it drains as fast as it fills.\n    S.lvl = POOL - (PI * A0 * A0 * S.v0 * 3 * (S.nu / NU0) ** 0.45) / (W * DEPTH);\n  }\n  advance(S, d * S.rate);\n}\n\n// The radius and centre of the liquid at half-row samples.\nfunction profile(S) {\n  const { PH, PX, PD, z, x, V, lk } = S, n = S.n;\n  PH.fill(0);\n  PD.fill(0);\n  const put = (za, ha, xa, zb, hb, xb) => {\n    const k0 = max(0, Math.ceil(2 * za - 0.5)), k1 = min(2 * H - 1, floor(2 * zb - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const zz = (k + 0.5) / 2, t = zb > za ? (zz - za) / (zb - za) : 0, hh = ha + (hb - ha) * t;\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = xa + (xb - xa) * t;\n        PD[k] = zb > za ? (hb - ha) / (zb - za) : 0;\n      }\n    }\n  };\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      let pz = 0, ph = 0, px = 0;\n      for (let i = a; i \u003c b; i++) {\n        const L = max(1e-3, z[i + 1] - z[i]), hh = sqrt(V[i] / (PI * L)), zm = (z[i] + z[i + 1]) / 2, xm = (x[i] + x[i + 1]) / 2;\n        if (i === a) {\n          // The upper end: the thread runs off the top edge, a free end is capped.\n          if (a === 0) put(z[a] - 2, hh, xm, zm, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm - cap * sqrt(1 - t0 * t0), hh * t0, xm, zm - cap * sqrt(1 - t1 * t1), hh * t1, xm);\n            }\n        } else put(pz, ph, px, zm, hh, xm);\n        if (i === b - 1) {\n          if (z[b] > S.lvl) put(zm, hh, xm, S.lvl + 2, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm + cap * sqrt(1 - t1 * t1), hh * t1, xm, zm + cap * sqrt(1 - t0 * t0), hh * t0, xm);\n            }\n        }\n        pz = zm;\n        ph = hh;\n        px = xm;\n      }\n    }\n    a = b + 1;\n  }\n  for (const p of S.drops) {\n    const dd = p.e * cos(p.ph), ry = p.R * (1 + dd), rx = p.R / sqrt(1 + dd);\n    const k0 = max(0, Math.ceil(2 * (p.y - ry) - 0.5)), k1 = min(2 * H - 1, floor(2 * (p.y + ry) - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const w = ((k + 0.5) / 2 - p.y) / ry, hh = rx * sqrt(max(0, 1 - w * w));\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = p.x;\n        PD[k] = (-rx * w) / ry / max(0.15, sqrt(max(0, 1 - w * w)));\n      }\n    }\n  }\n  // Smooth the radius along the thread so the light runs over it without\n  // steps, and take the slope from the smoothed radius.\n  const { PT } = S;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let k = 0; k \u003c 2 * H; k++) {\n      const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n      PT[k] = PH[k] > 0 && a > 0 && b > 0 ? 0.25 * a + 0.5 * PH[k] + 0.25 * b : PH[k];\n    }\n    PH.set(PT);\n  }\n  for (let k = 0; k \u003c 2 * H; k++) {\n    const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n    if (PH[k] > 0 && a > 0 && b > 0) PD[k] = cl(b - a, -4, 4);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  profile(S);\n  const { PH, PX, PD, ser, wall, eta } = S;\n  const hue = S.hue + H0;\n  hsv(hue, 0.85, 1, ser);\n  // Orange and yellow go brown and olive on a dim wall: there the wall is\n  // greyed and lifted and the pool glows with the serum's own colour.\n  const wu = (hue - floor(hue) - 0.13) / 0.19, wm = wu * wu \u003c 1 ? (1 - wu * wu) ** 2 : 0;\n  hsv(hue, 0.14 - 0.1 * wm, 1 + 0.18 * wm, wall);\n  const [sr, sg, sb] = ser, [wr, wg, wb] = wall;\n  // Absorption per LED of path through the serum, per channel.\n  const ar = 0.3 * (1 - sr), ag = 0.3 * (1 - sg), ab = 0.3 * (1 - sb);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let R = 0, G = 0, B = 0;\n      const px = x + 0.5, e0 = eta[max(0, x - 1)], e1 = eta[x], e2 = eta[min(W - 1, x + 1)];\n      const surf = S.lvl + 0.25 * e0 + 0.5 * e1 + 0.25 * e2, slope = (e2 - e0) / 2, pf = cl(y + 1 - surf, 0, 1);\n      if (pf \u003c 1)\n        for (let sub = 0; sub \u003c 2; sub++) {\n          const k = 2 * y + sub, zz = (k + 0.5) / 2, wv = lit(px, zz);\n          let r = wv * wr, g = wv * wg, b = wv * wb;\n          const hh = PH[k], dx = px - PX[k], cov = cl(hh - abs(dx) + 0.5, 0, 1);\n          if (cov > 0 && hh > 0.2) {\n            // Clear serum: the wall behind seen magnified through it and\n            // tinted by the path the light takes, a darker rim, an inner\n            // glow on the far side, a highlight down the near side.\n            const uu = cl(dx / hh, -0.97, 0.97), c = sqrt(1 - uu * uu), hz = PD[k], nn = 1 / sqrt(1 + hz * hz);\n            const nx = uu * nn, ny = c * nn, nz = -hz * nn;\n            const lv = 1.35 * lit(PX[k] + dx * 0.55, zz + 0.45 * hh * hz), path = 2 * hh * c + 0.5;\n            const rim = 1 - 0.5 * exp(-c * 4), glow = 0.7 * max(0, 0.55 * nx + 0.25 * ny + 0.55 * nz) ** 2;\n            const sp = max(0, -0.4 * nx + 0.82 * ny - 0.42 * nz), spec = 0.95 * sp ** 40 + 0.12 * sp ** 6;\n            r += (lv * wr * exp(-ar * path) * rim + sr * glow + spec - r) * cov;\n            g += (lv * wg * exp(-ag * path) * rim + sg * glow + spec - g) * cov;\n            b += (lv * wb * exp(-ab * path) * rim + sb * glow + spec - b) * cov;\n          }\n          R += r / 2;\n          G += g / 2;\n          B += b / 2;\n        }\n      if (pf > 0) {\n        // The pool: the wall seen through it, a little lower and deeper in\n        // colour further down, lit from within, a dark band under the surface.\n        const top = max(0, y + 0.5 - surf), wv = lit(px, surf + top * 0.75) * 1.15, path = 3 + 0.3 * top;\n        const dk = 1 - 0.35 * exp(-((top - 1.4) ** 2)), gl = 0.2 + 0.06 * wm;\n        R += ((wv * wr * exp(-0.4 * ar * path) + gl * sr) * dk - R) * pf;\n        G += ((wv * wg * exp(-0.4 * ag * path) + gl * sg) * dk - G) * pf;\n        B += ((wv * wb * exp(-0.4 * ab * path) + gl * sb) * dk - B) * pf;\n      }\n      // The bright line of the surface, brighter where a ripple tilts it to the light.\n      const ln = exp(-(((y + 0.5 - surf) / 0.55) ** 2)) * (0.5 + cl(-slope * 0.8, -0.35, 0.5));\n      R += ln;\n      G += ln;\n      B += ln;\n      display.setPixel(x, y, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n    }\n}\n\n// The lit wall, as a level: pale, light from the upper left, soft vertical\n// flutes 8 LEDs apart for the beads to magnify.\nconst lit = (x, z) => (0.4 + 0.24 * (1 - x / 90 - z / 300)) * (1 + 0.07 * cos((2 * PI * x) / 8));\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Viscosity=-1..1, Flow=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel, and the wall behind it takes a faint tint of the same hue. At 0 gold on a grey wall; at 0.04 yellow, 0.1 lime, 0.2 green, 0.36 aqua, 0.46 azure, 0.53 blue, 0.6 violet, 0.7 magenta, 0.78 rose, 0.86 red, 0.92 vermilion and 0.96 orange. From red-orange through gold to lime the wall is greyed and lifted a little and the pool lit from within, so the serum and its pool read amber, gold or lemon, never brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the serum leaves the top edge at 28 LEDs a second, falls the height of the panel in about 3 seconds, and a drop breaks off about every 1.4 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Viscosity","min":-1,"max":1,"about":"At 0 the ripples grow down the thread into beads on a string, the filaments between them thin and snap about row 80, and drops 15 LEDs across fall into a pool 14 rows deep, now and then with a satellite. At -1 the serum is nine times thinner and snaps into clean drops about row 45. Turned up, the beads stay joined longer: from about 0.35 the thread reaches the pool unbroken as a string of beads, and at 1, nine times thicker than at 0, the ripples barely grow and the pool, draining slower, stands 21 rows deep."},{"name":"Flow","min":-1,"max":1,"about":"How fast the serum leaves the top edge, 2.2 times slower at -1 and 2.2 times faster at 1. At -1 it cannot keep a thread going and drips: a drop swells below the top edge to 21 LEDs across and lets go about every 10 seconds; at -0.5 the thread breaks about row 60 into drops 19 across; from 0.5 it runs into the pool before it can break, and the pool rises to 19 rows."}],"start":[0,2,0,0.06],"measures":{"motion":0.1144,"detail":0.0191,"edges":0.1005,"complexity":1.4238,"coverage":1,"colour":0.2611,"drift":0.048},"knobResponse":[0.2045,0.0526,0.0374,0.0514]},{"slug":"serum-fingers","title":"Serum Fingers","family":"cosmetic","round":38,"note":"유리판 두 장 사이 진한 크림에 묽은 세럼을 밑에서 밀어 넣으면, 둥근 손가락이 부풀고 갈라지며 위로 다투어 올라가요. LED 는 세럼이 닿을 때 한 번만 바뀌고, 한 손가락이 꼭대기에 닿으면 크림이 가는 손가락부터 다시 덮고 새로 밀어요. K3 은 표면 장력을 낮춰 굵은 손가락 셋을 가는 손가락 열둘로 바꾸고, K1 을 누르면 크림이 바로 다시 덮어요.","idea":"A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.","buttons":"K1 tap: the cream closes back now and a new press begins.","code":"// ===== Patternflow pattern =====\n// Title:   Serum Fingers\n// Family:  cosmetic\n// Idea:    A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after a thin serum pressed into thick cream between two glass plates (Saffman-Taylor viscous fingering, Philip Saffman and Geoffrey Taylor, 1958, in a Hele-Shaw cell, Henry Selby Hele-Shaw, 1898)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in.\n// Knob 2: Speed. At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster.\n// Knob 3: Fingers. Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press.\n// Knob 4: Inlet. Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press.\n// Buttons: K1 tap: the cream closes back now and a new press begins.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, cos, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Serum pressed in, in LEDs of area a second at Speed 2.\nconst Q0 = 580;\n// A fresh run opens with the first PRE seconds of a press already in.\nconst PRE = 0.6;\n// The cream gives way at a front LED as the pressure drop across it to the\n// power ETA, times the roughness of the glass there, times 1 + SIG phi, where\n// phi is how much more of the disc round it is serum than at a flat front:\n// below 0 at a fingertip, which is held back, above 0 in a crevice, which is\n// filled up to CAP times faster. That is the surface tension that keeps the\n// fingers round. SIG is for Fingers 0.\nconst ETA = 0.7, SIG = 2, CAP = 1.6;\n// Gauss-Seidel sweeps of the pressure each frame, over-relaxed.\nconst SWEEPS = 12, OMEGA = 1.9;\n// The disc the curvature is read over: cells within RC of a front cell. A\n// flat front fills PHI0 of it with serum.\nconst RC = 3.2;\nconst DISC = [];\nfor (let dy = -3; dy \u003c= 3; dy++) for (let dx = -3; dx \u003c= 3; dx++) if (dx * dx + dy * dy \u003c= RC * RC) DISC.push(dx, dy);\nlet PHI0 = 0;\n{\n  let a = 0, b = 0;\n  for (let k = 0; k \u003c DISC.length; k += 2) {\n    b++;\n    if (DISC[k + 1] \u003c 0) a++;\n  }\n  PHI0 = a / b;\n}\n// Opening hue: aqua serum.\nconst H0 = 0.5;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, fingers: 0, inlet: 0, sigma: SIG, begun: false,\n    st: new Uint8Array(N), fill: new Float32Array(N), P: new Float32Array(N),\n    eta: new Float32Array(N), phi: new Float32Array(N), band: new Float32Array(N), fill0: new Float32Array(N), dist: new Float32Array(N),\n    seed: new Uint8Array(N), tex: new Float32Array(N), front: new Int32Array(N), nf: 0,\n    vol: 0, mode: 0, timer: 0, maxd: 1,\n    A: new Float32Array(4 * N), T: new Float32Array(4 * N), ser: [0, 0, 0], pale: [0, 0, 0], cream: [0, 0, 0],\n  };\n  const S = params.s;\n  // The cream's own static mottle, a few soft lumps.\n  const lumps = [];\n  for (let k = 0; k \u003c 14; k++) lumps.push([random() * W, random() * H, 6 + random() * 14, random() - 0.5]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v = 0;\n      for (const [lx, ly, r, a] of lumps) v += a * exp(-((x - lx) ** 2 + (y - ly) ** 2) / (r * r));\n      S.tex[y * W + x] = v;\n    }\n}\n\n// A fresh press: the inlet filled, the rest cream, new roughness in the glass.\nfunction fresh(S) {\n  const { st, fill, P, eta, band, seed } = S;\n  st.fill(0);\n  fill.fill(0);\n  seed.fill(0);\n  // The inlet: a slot along the whole bottom at Inlet 0, narrowing to a half\n  // disc 5 LEDs across at the bottom centre at 1, its lip rounded at each\n  // end. Along the slot the lip is waved, from 3 waves across the panel at\n  // Fingers -1 to 12 at 1, so the fingers start at the width they would grow.\n  const half = 32 - 30 * S.inlet, RE = 2.6, nb = round(6 * 2 ** S.fingers), ph = random() * 2 * PI, amps = [];\n  for (let k = 0; k \u003c 16; k++) amps.push(2 + 4 * random());\n  for (let y = H - 6; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = max(0, abs(x + 0.5 - W / 2) - (half - RE)), up = H - (y + 0.5);\n      const wv = (2 * PI * nb * (x + 0.5)) / W + ph, amp = amps[floor(wv / (2 * PI) + 0.5) % amps.length];\n      const lip = dx > 0 ? sqrt(max(0, RE * RE - dx * dx)) : 2 + amp * (0.5 + 0.5 * cos(wv));\n      if (dx \u003c= RE && up \u003c= lip) {\n        const p = y * W + x;\n        st[p] = 1;\n        fill[p] = 1;\n        seed[p] = 1;\n        band[p] = 0;\n      }\n    }\n  // Roughness of the glass: two octaves of smooth noise, 8 and 4 LEDs\n  // across, so the front is nudged at the scale of a finger, not per LED.\n  const g8 = [], g4 = [];\n  for (let k = 0; k \u003c 9 * 17; k++) g8.push(random() - 0.5);\n  for (let k = 0; k \u003c 17 * 33; k++) g4.push(random() - 0.5);\n  const vn = (g, s, gw, x, y) => {\n    const u = x / s, v = y / s, i = floor(u), j = floor(v), fu = u - i, fv = v - j, a = j * gw + i;\n    return (g[a] * (1 - fu) + g[a + 1] * fu) * (1 - fv) + (g[a + gw] * (1 - fu) + g[a + gw + 1] * fu) * fv;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      eta[p] = 1 + 0.5 * vn(g8, 8, 9, x, y) + 0.3 * vn(g4, 4, 17, x, y);\n      P[p] = st[p] ? 1 : y / H;\n    }\n  S.vol = 0;\n  S.mode = 0;\n  S.timer = 0;\n}\n\n// The front: every cream LED next to the serum, and phi there.\nfunction boundary(S) {\n  const { st, fill, front, phi } = S;\n  let nf = 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (st[p]) continue;\n      if ((x > 0 && st[p - 1]) || (x \u003c W - 1 && st[p + 1]) || (y > 0 && st[p - W]) || (y \u003c H - 1 && st[p + W])) {\n        let s = 0, c = 0;\n        for (let k = 0; k \u003c DISC.length; k += 2) {\n          const xx = x + DISC[k], yy = y + DISC[k + 1];\n          if (xx \u003c 0 || xx >= W || yy >= H) continue;\n          c++;\n          if (yy \u003c 0) continue;\n          const q = yy * W + xx;\n          s += st[q] ? 1 : fill[q];\n        }\n        phi[p] = s / c - PHI0;\n        front[nf++] = p;\n      }\n    }\n  S.nf = nf;\n}\n\n// Over-relaxed sweeps of Laplace's equation for the pressure in the cream:\n// 1 in the serum, which is so thin it holds one pressure throughout, 0 at the\n// top edge, where the cream leaves the cell, and no flow through the sides\n// and the bottom.\nfunction relax(S, sweeps) {\n  const { st, P } = S;\n  for (let it = 0; it \u003c sweeps; it++)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        if (st[p]) continue;\n        let s = 0, c = 0;\n        if (y === 0) c++;\n        else {\n          s += st[p - W] ? 1 : P[p - W];\n          c++;\n        }\n        if (y \u003c H - 1) {\n          s += st[p + W] ? 1 : P[p + W];\n          c++;\n        }\n        if (x > 0) {\n          s += st[p - 1] ? 1 : P[p - 1];\n          c++;\n        }\n        if (x \u003c W - 1) {\n          s += st[p + 1] ? 1 : P[p + 1];\n          c++;\n        }\n        P[p] += OMEGA * (s / c - P[p]);\n      }\n}\n\nconst speed = (S, p) => max(0, 1 - S.P[p]) ** ETA * S.eta[p] * cl(1 + S.sigma * S.phi[p], 0, CAP);\n\n// Press in vol LEDs of serum, shared among the front LEDs by how fast the\n// cream gives way at each.\nfunction grow(S, vol) {\n  const { st, fill, P, band, front, nf } = S;\n  let tot = 0;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k];\n    tot += speed(S, p);\n  }\n  if (tot \u003c= 0) return;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k], v = speed(S, p);\n    if (v \u003c= 0) continue;\n    if (fill[p] === 0) band[p] = S.vol;\n    fill[p] += (vol * v) / tot;\n    if (fill[p] >= 1) {\n      fill[p] = 1;\n      st[p] = 1;\n      P[p] = 1;\n      // A finger at the top edge: the cell is full.\n      if (p \u003c 2 * W) S.mode = 1;\n    }\n  }\n  S.vol += vol;\n}\n\n// The cream closing back: every serum LED's distance to the cream, so the\n// fingers thin from their sides and the trunks go last.\nfunction startClear(S) {\n  const { st, fill, fill0, dist, seed } = S;\n  for (let p = 0; p \u003c N; p++) {\n    fill0[p] = fill[p];\n    dist[p] = fill[p] >= 1 && !seed[p] ? 1e9 : 0;\n  }\n  const D = 1, DD = 1.414;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x > 0) d = min(d, dist[p - 1] + D);\n      if (y > 0) {\n        d = min(d, dist[p - W] + D);\n        if (x > 0) d = min(d, dist[p - W - 1] + DD);\n        if (x \u003c W - 1) d = min(d, dist[p - W + 1] + DD);\n      }\n      dist[p] = d;\n    }\n  let m = 1;\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x \u003c W - 1) d = min(d, dist[p + 1] + D);\n      if (y \u003c H - 1) {\n        d = min(d, dist[p + W] + D);\n        if (x \u003c W - 1) d = min(d, dist[p + W + 1] + DD);\n        if (x > 0) d = min(d, dist[p + W - 1] + DD);\n      }\n      dist[p] = d;\n      if (d \u003c 1e8 && d > m) m = d;\n    }\n  S.maxd = m;\n  S.mode = 2;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.fingers = cl(k[2], -1, 1);\n  S.inlet = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const rate = S.speed / 2;\n  // Surface tension: 6 at Fingers -1, 2 at 0, 0.67 at 1.\n  S.sigma = SIG * 3 ** -S.fingers;\n  if (!S.begun) {\n    // Open with the first PRE seconds of a press already in, as at Speed 2.\n    fresh(S);\n    boundary(S);\n    relax(S, 200);\n    for (let i = 0; i \u003c PRE * 30; i++) {\n      boundary(S);\n      relax(S, SWEEPS);\n      grow(S, Q0 / 30);\n    }\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.mode \u003c 2) startClear(S);\n  if (S.mode === 0 || S.mode === 1) {\n    boundary(S);\n    relax(S, SWEEPS);\n    if (S.mode === 0) grow(S, Q0 * rate * d);\n    else {\n      S.timer += d * rate;\n      if (S.timer > 1.5) startClear(S);\n    }\n  } else if (S.mode === 2) {\n    S.timer += d * rate;\n    const u = S.timer / 3, R = (S.maxd + 1.5) * u * u;\n    const { fill, fill0, dist, st, seed } = S;\n    for (let p = 0; p \u003c N; p++) {\n      if (seed[p] || fill0[p] \u003c= 0) continue;\n      const f = min(fill0[p], cl(dist[p] - R, 0, 1));\n      fill[p] = f;\n      st[p] = f >= 1 ? 1 : 0;\n    }\n    if (u >= 1) {\n      fresh(S);\n      boundary(S);\n      relax(S, 60);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { fill, band, tex, ser, pale, cream, A, T } = S;\n  const h = S.hue + H0;\n  hsv(h, 0.72, 1, ser);\n  hsv(h + 0.06, 0.3, 1, pale);\n  hsv(h + 0.5, 0.1, 0.28, cream);\n  // The serum's colour, times how full each LED is, and the fill itself,\n  // softened by a 3 by 3 blur so the fingers' edges are round on the LEDs.\n  // Each LED's serum colour is set once, by how much had been pressed in\n  // when the serum got there: faint growth rings.\n  for (let p = 0; p \u003c N; p++) {\n    const f = fill[p], o = 4 * p;\n    if (f \u003c= 0) {\n      A[o] = A[o + 1] = A[o + 2] = A[o + 3] = 0;\n      continue;\n    }\n    const ring = 0.5 + 0.5 * cos((band[p] / 300) * 2 * PI), kk = (0.88 + 0.12 * ring) * f;\n    A[o] = (ser[0] + (pale[0] - ser[0]) * ring * 0.5) * kk;\n    A[o + 1] = (ser[1] + (pale[1] - ser[1]) * ring * 0.5) * kk;\n    A[o + 2] = (ser[2] + (pale[2] - ser[2]) * ring * 0.5) * kk;\n    A[o + 3] = f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = 4 * (y * W + x), l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) T[o + c] = 0.25 * A[l + c] + 0.5 * A[o + c] + 0.25 * A[r + c];\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, o = 4 * p, u = y > 0 ? o - 4 * W : o, d = y \u003c H - 1 ? o + 4 * W : o;\n      const f = 0.25 * T[u + 3] + 0.5 * T[o + 3] + 0.25 * T[d + 3], t = (1 + tex[p] * 0.25) * (1 - f);\n      const r = cream[0] * t + 0.25 * T[u] + 0.5 * T[o] + 0.25 * T[d];\n      const g = cream[1] * t + 0.25 * T[u + 1] + 0.5 * T[o + 1] + 0.25 * T[d + 1];\n      const b = cream[2] * t + 0.25 * T[u + 2] + 0.5 * T[o + 2] + 0.25 * T[d + 2];\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-serum-fingers","type":"code","name":"serum-fingers","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Serum Fingers\n// Family:  cosmetic\n// Idea:    A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after a thin serum pressed into thick cream between two glass plates (Saffman-Taylor viscous fingering, Philip Saffman and Geoffrey Taylor, 1958, in a Hele-Shaw cell, Henry Selby Hele-Shaw, 1898)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in.\n// Knob 2: Speed. At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster.\n// Knob 3: Fingers. Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press.\n// Knob 4: Inlet. Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press.\n// Buttons: K1 tap: the cream closes back now and a new press begins.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, cos, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Serum pressed in, in LEDs of area a second at Speed 2.\nconst Q0 = 580;\n// A fresh run opens with the first PRE seconds of a press already in.\nconst PRE = 0.6;\n// The cream gives way at a front LED as the pressure drop across it to the\n// power ETA, times the roughness of the glass there, times 1 + SIG phi, where\n// phi is how much more of the disc round it is serum than at a flat front:\n// below 0 at a fingertip, which is held back, above 0 in a crevice, which is\n// filled up to CAP times faster. That is the surface tension that keeps the\n// fingers round. SIG is for Fingers 0.\nconst ETA = 0.7, SIG = 2, CAP = 1.6;\n// Gauss-Seidel sweeps of the pressure each frame, over-relaxed.\nconst SWEEPS = 12, OMEGA = 1.9;\n// The disc the curvature is read over: cells within RC of a front cell. A\n// flat front fills PHI0 of it with serum.\nconst RC = 3.2;\nconst DISC = [];\nfor (let dy = -3; dy \u003c= 3; dy++) for (let dx = -3; dx \u003c= 3; dx++) if (dx * dx + dy * dy \u003c= RC * RC) DISC.push(dx, dy);\nlet PHI0 = 0;\n{\n  let a = 0, b = 0;\n  for (let k = 0; k \u003c DISC.length; k += 2) {\n    b++;\n    if (DISC[k + 1] \u003c 0) a++;\n  }\n  PHI0 = a / b;\n}\n// Opening hue: aqua serum.\nconst H0 = 0.5;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, fingers: 0, inlet: 0, sigma: SIG, begun: false,\n    st: new Uint8Array(N), fill: new Float32Array(N), P: new Float32Array(N),\n    eta: new Float32Array(N), phi: new Float32Array(N), band: new Float32Array(N), fill0: new Float32Array(N), dist: new Float32Array(N),\n    seed: new Uint8Array(N), tex: new Float32Array(N), front: new Int32Array(N), nf: 0,\n    vol: 0, mode: 0, timer: 0, maxd: 1,\n    A: new Float32Array(4 * N), T: new Float32Array(4 * N), ser: [0, 0, 0], pale: [0, 0, 0], cream: [0, 0, 0],\n  };\n  const S = params.s;\n  // The cream's own static mottle, a few soft lumps.\n  const lumps = [];\n  for (let k = 0; k \u003c 14; k++) lumps.push([random() * W, random() * H, 6 + random() * 14, random() - 0.5]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v = 0;\n      for (const [lx, ly, r, a] of lumps) v += a * exp(-((x - lx) ** 2 + (y - ly) ** 2) / (r * r));\n      S.tex[y * W + x] = v;\n    }\n}\n\n// A fresh press: the inlet filled, the rest cream, new roughness in the glass.\nfunction fresh(S) {\n  const { st, fill, P, eta, band, seed } = S;\n  st.fill(0);\n  fill.fill(0);\n  seed.fill(0);\n  // The inlet: a slot along the whole bottom at Inlet 0, narrowing to a half\n  // disc 5 LEDs across at the bottom centre at 1, its lip rounded at each\n  // end. Along the slot the lip is waved, from 3 waves across the panel at\n  // Fingers -1 to 12 at 1, so the fingers start at the width they would grow.\n  const half = 32 - 30 * S.inlet, RE = 2.6, nb = round(6 * 2 ** S.fingers), ph = random() * 2 * PI, amps = [];\n  for (let k = 0; k \u003c 16; k++) amps.push(2 + 4 * random());\n  for (let y = H - 6; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = max(0, abs(x + 0.5 - W / 2) - (half - RE)), up = H - (y + 0.5);\n      const wv = (2 * PI * nb * (x + 0.5)) / W + ph, amp = amps[floor(wv / (2 * PI) + 0.5) % amps.length];\n      const lip = dx > 0 ? sqrt(max(0, RE * RE - dx * dx)) : 2 + amp * (0.5 + 0.5 * cos(wv));\n      if (dx \u003c= RE && up \u003c= lip) {\n        const p = y * W + x;\n        st[p] = 1;\n        fill[p] = 1;\n        seed[p] = 1;\n        band[p] = 0;\n      }\n    }\n  // Roughness of the glass: two octaves of smooth noise, 8 and 4 LEDs\n  // across, so the front is nudged at the scale of a finger, not per LED.\n  const g8 = [], g4 = [];\n  for (let k = 0; k \u003c 9 * 17; k++) g8.push(random() - 0.5);\n  for (let k = 0; k \u003c 17 * 33; k++) g4.push(random() - 0.5);\n  const vn = (g, s, gw, x, y) => {\n    const u = x / s, v = y / s, i = floor(u), j = floor(v), fu = u - i, fv = v - j, a = j * gw + i;\n    return (g[a] * (1 - fu) + g[a + 1] * fu) * (1 - fv) + (g[a + gw] * (1 - fu) + g[a + gw + 1] * fu) * fv;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      eta[p] = 1 + 0.5 * vn(g8, 8, 9, x, y) + 0.3 * vn(g4, 4, 17, x, y);\n      P[p] = st[p] ? 1 : y / H;\n    }\n  S.vol = 0;\n  S.mode = 0;\n  S.timer = 0;\n}\n\n// The front: every cream LED next to the serum, and phi there.\nfunction boundary(S) {\n  const { st, fill, front, phi } = S;\n  let nf = 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (st[p]) continue;\n      if ((x > 0 && st[p - 1]) || (x \u003c W - 1 && st[p + 1]) || (y > 0 && st[p - W]) || (y \u003c H - 1 && st[p + W])) {\n        let s = 0, c = 0;\n        for (let k = 0; k \u003c DISC.length; k += 2) {\n          const xx = x + DISC[k], yy = y + DISC[k + 1];\n          if (xx \u003c 0 || xx >= W || yy >= H) continue;\n          c++;\n          if (yy \u003c 0) continue;\n          const q = yy * W + xx;\n          s += st[q] ? 1 : fill[q];\n        }\n        phi[p] = s / c - PHI0;\n        front[nf++] = p;\n      }\n    }\n  S.nf = nf;\n}\n\n// Over-relaxed sweeps of Laplace's equation for the pressure in the cream:\n// 1 in the serum, which is so thin it holds one pressure throughout, 0 at the\n// top edge, where the cream leaves the cell, and no flow through the sides\n// and the bottom.\nfunction relax(S, sweeps) {\n  const { st, P } = S;\n  for (let it = 0; it \u003c sweeps; it++)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        if (st[p]) continue;\n        let s = 0, c = 0;\n        if (y === 0) c++;\n        else {\n          s += st[p - W] ? 1 : P[p - W];\n          c++;\n        }\n        if (y \u003c H - 1) {\n          s += st[p + W] ? 1 : P[p + W];\n          c++;\n        }\n        if (x > 0) {\n          s += st[p - 1] ? 1 : P[p - 1];\n          c++;\n        }\n        if (x \u003c W - 1) {\n          s += st[p + 1] ? 1 : P[p + 1];\n          c++;\n        }\n        P[p] += OMEGA * (s / c - P[p]);\n      }\n}\n\nconst speed = (S, p) => max(0, 1 - S.P[p]) ** ETA * S.eta[p] * cl(1 + S.sigma * S.phi[p], 0, CAP);\n\n// Press in vol LEDs of serum, shared among the front LEDs by how fast the\n// cream gives way at each.\nfunction grow(S, vol) {\n  const { st, fill, P, band, front, nf } = S;\n  let tot = 0;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k];\n    tot += speed(S, p);\n  }\n  if (tot \u003c= 0) return;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k], v = speed(S, p);\n    if (v \u003c= 0) continue;\n    if (fill[p] === 0) band[p] = S.vol;\n    fill[p] += (vol * v) / tot;\n    if (fill[p] >= 1) {\n      fill[p] = 1;\n      st[p] = 1;\n      P[p] = 1;\n      // A finger at the top edge: the cell is full.\n      if (p \u003c 2 * W) S.mode = 1;\n    }\n  }\n  S.vol += vol;\n}\n\n// The cream closing back: every serum LED's distance to the cream, so the\n// fingers thin from their sides and the trunks go last.\nfunction startClear(S) {\n  const { st, fill, fill0, dist, seed } = S;\n  for (let p = 0; p \u003c N; p++) {\n    fill0[p] = fill[p];\n    dist[p] = fill[p] >= 1 && !seed[p] ? 1e9 : 0;\n  }\n  const D = 1, DD = 1.414;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x > 0) d = min(d, dist[p - 1] + D);\n      if (y > 0) {\n        d = min(d, dist[p - W] + D);\n        if (x > 0) d = min(d, dist[p - W - 1] + DD);\n        if (x \u003c W - 1) d = min(d, dist[p - W + 1] + DD);\n      }\n      dist[p] = d;\n    }\n  let m = 1;\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x \u003c W - 1) d = min(d, dist[p + 1] + D);\n      if (y \u003c H - 1) {\n        d = min(d, dist[p + W] + D);\n        if (x \u003c W - 1) d = min(d, dist[p + W + 1] + DD);\n        if (x > 0) d = min(d, dist[p + W - 1] + DD);\n      }\n      dist[p] = d;\n      if (d \u003c 1e8 && d > m) m = d;\n    }\n  S.maxd = m;\n  S.mode = 2;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.fingers = cl(k[2], -1, 1);\n  S.inlet = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const rate = S.speed / 2;\n  // Surface tension: 6 at Fingers -1, 2 at 0, 0.67 at 1.\n  S.sigma = SIG * 3 ** -S.fingers;\n  if (!S.begun) {\n    // Open with the first PRE seconds of a press already in, as at Speed 2.\n    fresh(S);\n    boundary(S);\n    relax(S, 200);\n    for (let i = 0; i \u003c PRE * 30; i++) {\n      boundary(S);\n      relax(S, SWEEPS);\n      grow(S, Q0 / 30);\n    }\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.mode \u003c 2) startClear(S);\n  if (S.mode === 0 || S.mode === 1) {\n    boundary(S);\n    relax(S, SWEEPS);\n    if (S.mode === 0) grow(S, Q0 * rate * d);\n    else {\n      S.timer += d * rate;\n      if (S.timer > 1.5) startClear(S);\n    }\n  } else if (S.mode === 2) {\n    S.timer += d * rate;\n    const u = S.timer / 3, R = (S.maxd + 1.5) * u * u;\n    const { fill, fill0, dist, st, seed } = S;\n    for (let p = 0; p \u003c N; p++) {\n      if (seed[p] || fill0[p] \u003c= 0) continue;\n      const f = min(fill0[p], cl(dist[p] - R, 0, 1));\n      fill[p] = f;\n      st[p] = f >= 1 ? 1 : 0;\n    }\n    if (u >= 1) {\n      fresh(S);\n      boundary(S);\n      relax(S, 60);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { fill, band, tex, ser, pale, cream, A, T } = S;\n  const h = S.hue + H0;\n  hsv(h, 0.72, 1, ser);\n  hsv(h + 0.06, 0.3, 1, pale);\n  hsv(h + 0.5, 0.1, 0.28, cream);\n  // The serum's colour, times how full each LED is, and the fill itself,\n  // softened by a 3 by 3 blur so the fingers' edges are round on the LEDs.\n  // Each LED's serum colour is set once, by how much had been pressed in\n  // when the serum got there: faint growth rings.\n  for (let p = 0; p \u003c N; p++) {\n    const f = fill[p], o = 4 * p;\n    if (f \u003c= 0) {\n      A[o] = A[o + 1] = A[o + 2] = A[o + 3] = 0;\n      continue;\n    }\n    const ring = 0.5 + 0.5 * cos((band[p] / 300) * 2 * PI), kk = (0.88 + 0.12 * ring) * f;\n    A[o] = (ser[0] + (pale[0] - ser[0]) * ring * 0.5) * kk;\n    A[o + 1] = (ser[1] + (pale[1] - ser[1]) * ring * 0.5) * kk;\n    A[o + 2] = (ser[2] + (pale[2] - ser[2]) * ring * 0.5) * kk;\n    A[o + 3] = f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = 4 * (y * W + x), l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) T[o + c] = 0.25 * A[l + c] + 0.5 * A[o + c] + 0.25 * A[r + c];\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, o = 4 * p, u = y > 0 ? o - 4 * W : o, d = y \u003c H - 1 ? o + 4 * W : o;\n      const f = 0.25 * T[u + 3] + 0.5 * T[o + 3] + 0.25 * T[d + 3], t = (1 + tex[p] * 0.25) * (1 - f);\n      const r = cream[0] * t + 0.25 * T[u] + 0.5 * T[o] + 0.25 * T[d];\n      const g = cream[1] * t + 0.25 * T[u + 1] + 0.5 * T[o + 1] + 0.25 * T[d + 1];\n      const b = cream[2] * t + 0.25 * T[u + 2] + 0.5 * T[o + 2] + 0.25 * T[d + 2];\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster."},{"name":"Fingers","min":-1,"max":1,"about":"Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press."},{"name":"Inlet","min":0,"max":1,"about":"Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press."}],"start":[0,2,0,0.06],"measures":{"motion":0.0418,"detail":0.0193,"edges":0.1667,"complexity":0.987,"coverage":1,"colour":0.3588,"drift":0.2509},"knobResponse":[0.1449,0.1034,0.0454,0.0842]},{"slug":"serum-gel","title":"Serum Gel","family":"cosmetic","round":29,"note":"연보라 젤 속에 진주와 캡슐, 기포가 떠서 천천히 흔들리고, 뒤쪽 벽에는 젤 표면을 지난 빛이 부드러운 그물로 어른거려요. K3 은 구슬 수를 여덟에서 마흔까지 바꾸고, 누르면 젤이 크게 출렁이며 구슬이 늘어났다 줄어들며 흔들리다 가라앉아요.","idea":"A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.","buttons":"K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.","code":"// ===== Patternflow pattern =====\n// Title:   Serum Gel\n// Family:  cosmetic\n// Idea:    A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the macro shots of serum and gel cream with suspended beads in skincare films\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1\n//\n// Knob 1: Hue. Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac.\n// Knob 2: Speed. How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still.\n// Knob 3: Beads. How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one.\n// Knob 4: Wobble. How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging.\n// Buttons: K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, pow, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The opening hue: lilac, not red.\nconst H0 = 0.78;\n// Light rays are cast from a grid SS times finer than the LEDs, over a\n// margin M beyond the panel so the edges get light from outside too. How\n// far each ray is bent is worked out on a coarser grid, GS LEDs a step,\n// since the ripples are much longer than that, and read between its points.\nconst SS = 1.5, M = 4, GS = 2, GW = (W + 2 * M) / GS + 2, GH = (H + 2 * M) / GS + 2;\nconst RW = (W + 2 * M) * SS, RH = (H + 2 * M) * SS;\n// The surface ripples: six waves 18 to 40 LEDs long.\nconst NWV = 6;\n// Specks of air, always there whatever the Beads knob says.\nconst SPECKS = 16;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The gel's low modes of wobble, as displacement fields: side to side with\n// the top swinging most, a bounce, a twist, and a squeeze. Each is a damped\n// spring with its angular frequency at Speed 2.\nconst MODES = 4;\nconst OMEGA = [3.1, 4.3, 2.6, 5.4];\n// They are kept on the coarse grid, which runs M LEDs past the panel on\n// every side; the gel past the panel's edges does not move.\nconst GN = GW * GH, MX = new Float32Array(MODES * GN), MY = new Float32Array(MODES * GN);\nfor (let j = 0; j \u003c GH; j++)\n  for (let i = 0; i \u003c GW; i++) {\n    const x = cl(i * GS - M, 0, W), y = cl(j * GS - M, 0, H), p = j * GW + i;\n    const sx = sin((PI * x) / W), sy = sin((PI * y) / H), top = cos((PI * y) / (2 * H));\n    MX[p] = sx * top;\n    MY[GN + p] = sx * sy;\n    MX[2 * GN + p] = (-(y - H / 2) / 40) * sx * sy;\n    MY[2 * GN + p] = ((x - W / 2) / 40) * sx * sy;\n    MX[3 * GN + p] = sin((2 * PI * x) / W) * sy;\n  }\n// A cosine table, 1024 steps a turn.\nconst CT = new Float32Array(1024).map((_, i) => cos((i * 2 * PI) / 1024));\nconst fcos = (a) => CT[(a * 162.97466) & 1023];\n\nexport function setup(params) {\n  params.s = {\n    t: 0, wv: new Float32Array(NWV * 8), ph: new Float32Array(NWV), md: new Float32Array(MODES * 2), drive: new Float32Array(MODES), dead: 0,\n    gx: new Float32Array(GN), gy: new Float32Array(GN), acc: new Float32Array(N), tmp: new Float32Array(N),\n    beads: [], want: 0, hue: 0, wob: 0.06, sp: 2, ready: false,\n    bg: new Float32Array(N * 3), col: new Float32Array(8 * 3),\n  };\n  const P = params.s;\n  // Each ripple: its wave vector, how fast it creeps (0.4 to 1.2 LEDs a\n  // second at Speed 2), its phase, the direction it bends light, and how\n  // fast it jiggles to and fro in place, as a gel's surface does.\n  for (let i = 0; i \u003c NWV; i++) {\n    const a = (i / NWV) * PI + rnd() * 0.5, L = 18 + rnd() * 22, o = i * 8;\n    P.wv[o] = (cos(a) * 2 * PI) / L;\n    P.wv[o + 1] = (sin(a) * 2 * PI) / L;\n    P.wv[o + 2] = ((0.4 + rnd() * 0.8) * 2 * PI) / L;\n    P.wv[o + 3] = rnd() * 2 * PI;\n    P.wv[o + 4] = cos(a);\n    P.wv[o + 5] = sin(a);\n    P.wv[o + 6] = 1.6 + rnd() * 1.6;\n    P.wv[o + 7] = rnd() * 2 * PI;\n  }\n}\n\n// A bead hanging at rest point (hx, hy), depth z from 0 (near) to 1 (far),\n// and where it is now. Kind 0 is a pearl, 3 a tinted capsule, 1 an air\n// bubble, 2 one of the specks of air that every gel holds. The fewer beads,\n// the bigger they are. Each new one tries a few places in its own band of\n// the panel's height and keeps the one furthest from the others, so they\n// spread out.\nfunction bead(P, n, kind, all, band, bands) {\n  const big = 10 * sqrt(8 / n), z = rnd(), f = 1 - 0.45 * z;\n  const r = kind === 2 ? 0.7 + rnd() * 0.8 : kind === 1 ? big * (0.3 + 0.3 * rnd()) * f : big * (0.65 + 0.35 * rnd()) * f;\n  let bx = 0, by = 0, best = -1;\n  for (let tries = 0; tries \u003c 12; tries++) {\n    const x = r + 1 + rnd() * (W - 2 * r - 2), y = cl(((band + rnd()) / bands) * H, r + 2, H - r - 3);\n    let near = 1e9;\n    for (const b of all) if (!b.gone && b.kind !== 2) near = min(near, sqrt((b.hx - x) ** 2 + (b.hy - y) ** 2) - b.r - r);\n    if (near > best) (best = near), (bx = x), (by = y);\n  }\n  if (kind === 0 && rnd() \u003c 0.4) kind = 3;\n  return { hx: bx, hy: by, x: bx, y: by, vx: 0, vy: 0, r, z, kind, ph: rnd() * 2 * PI, fq: 0.5 + rnd() * 0.5, a: 0, gone: false };\n}\n\n// Keep as many beads, pearls and capsules, as the knob asks for, and two\n// bubbles for every three beads: new ones fade in, spare ones fade out, and\n// the far ones are drawn first.\nfunction census(P, n) {\n  if (!P.beads.length) for (let i = 0; i \u003c SPECKS; i++) P.beads.push(bead(P, 8, 2, P.beads, i, SPECKS));\n  for (let kind = 0; kind \u003c 2; kind++) {\n    const want = kind ? Math.round((n * 2) / 3) : n, live = P.beads.filter((b) => !b.gone && (b.kind === kind || b.kind === kind + 3));\n    if (live.length \u003c want) for (let i = live.length; i \u003c want; i++) P.beads.push(bead(P, n, kind, P.beads, (i * 7) % want, want));\n    else for (let i = want; i \u003c live.length; i++) live[i].gone = true;\n  }\n  P.beads.sort((a, b) => b.z - a.z);\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\nfunction step(P, dt, sp, wob) {\n  P.t += dt * sp * 0.5;\n  // The modes ring like springs; a slow random push keeps them moving by as\n  // much as Wobble asks.\n  const md = P.md, dr = P.drive, k = sp * 0.5;\n  for (let m = 0; m \u003c MODES; m++) {\n    const w = OMEGA[m] * k, ze = 0.07;\n    dr[m] += (rnd() - 0.5) * dt * 6;\n    dr[m] *= 1 - dt * 0.8;\n    const f = dr[m] * (0.6 + 9 * wob) * w * w * 0.25;\n    let x = md[m * 2], v = md[m * 2 + 1];\n    v += (-w * w * x - 2 * ze * w * v + f) * dt;\n    x += v * dt;\n    md[m * 2] = x;\n    md[m * 2 + 1] = v;\n  }\n  // Beads hang from the gel on springs of their own, softer than the gel, so\n  // they lag behind its swing and then catch up; each drifts a little round\n  // its rest point on its own.\n  for (const b of P.beads) {\n    b.a = b.gone ? max(0, b.a - dt * 1.5) : min(1, b.a + dt * 1.5);\n    if (b.gone && b.a \u003c= 0) P.dead = 1;\n    const p = Math.round((b.hy + M) / GS) * GW + Math.round((b.hx + M) / GS);\n    let ux = 0, uy = 0;\n    for (let m = 0; m \u003c MODES; m++) {\n      ux += md[m * 2] * MX[m * GN + p];\n      uy += md[m * 2] * MY[m * GN + p];\n    }\n    const par = 1.15 - 0.4 * b.z, dfx = 1.4 * sin(P.t * b.fq + b.ph), dfy = 1.8 * sin(P.t * b.fq * 0.71 + b.ph * 1.3);\n    const tx = b.hx + ux * par + dfx, ty = b.hy + uy * par + dfy, w = 2.4 * k * (1.1 - 0.3 * b.z);\n    b.vx += ((tx - b.x) * w * w - 2 * 0.12 * w * b.vx) * dt;\n    b.vy += ((ty - b.y) * w * w - 2 * 0.12 * w * b.vy) * dt;\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n  }\n  if (P.dead) (P.beads = P.beads.filter((b) => !b.gone || b.a > 0)), (P.dead = 0);\n}\n\n// Light comes down through the gel's rippled surface and lands on the back\n// wall. Each ray is bent by the surface's slope where it entered, by up to a\n// few LEDs, and by the gel's wobble; where the rays crowd together the wall\n// is bright, the caustic net.\nfunction caustics(P, wob) {\n  const { gx, gy, acc, wv, md } = P;\n  // A jiggling gel ripples more: the bend grows with Wobble and with how\n  // hard the modes are swinging.\n  let e = 0;\n  for (let m = 0; m \u003c MODES; m++) e += abs(md[m * 2]);\n  const amp = (1.1 + 0.8 * wob + 0.15 * min(6, e)) / sqrt(NWV / 3), t = P.t * 2, ph = P.ph, jig = 0.5 + 0.8 * wob + 0.12 * min(6, e);\n  for (let w = 0; w \u003c NWV; w++) ph[w] = wv[w * 8 + 3] - wv[w * 8 + 2] * t + jig * sin(wv[w * 8 + 6] * t + wv[w * 8 + 7]);\n  const m0 = md[0] * 0.8, m1 = md[2] * 0.8, m2 = md[4] * 0.8, m3 = md[6] * 0.8;\n  for (let j = 0, q = 0; j \u003c GH; j++)\n    for (let i = 0; i \u003c GW; i++, q++) {\n      const x = i * GS - M, y = j * GS - M;\n      let sx = 0, sy = 0;\n      for (let w = 0; w \u003c NWV; w++) {\n        const c = fcos(wv[w * 8] * x + wv[w * 8 + 1] * y + ph[w]);\n        sx += wv[w * 8 + 4] * c;\n        sy += wv[w * 8 + 5] * c;\n      }\n      // The back wall moves with the gel, so the whole net swings with it.\n      gx[q] = sx * amp + m0 * MX[q] + m2 * MX[2 * GN + q] + m3 * MX[3 * GN + q];\n      gy[q] = sy * amp + m1 * MY[GN + q] + m2 * MY[2 * GN + q];\n    }\n  acc.fill(0);\n  const wgt = 1 / (SS * SS), inv = 1 / SS, gi = 1 / GS;\n  for (let rj = 0; rj \u003c RH; rj++) {\n    const fy = rj * inv, uy = fy * gi, j0 = floor(uy), ty = uy - j0;\n    for (let ri = 0; ri \u003c RW; ri++) {\n      const fx = ri * inv, ux = fx * gi, i0 = floor(ux), tx = ux - i0, q = j0 * GW + i0;\n      const X = fx - M + (gx[q] * (1 - tx) + gx[q + 1] * tx) * (1 - ty) + (gx[q + GW] * (1 - tx) + gx[q + GW + 1] * tx) * ty;\n      const Y = fy - M + (gy[q] * (1 - tx) + gy[q + 1] * tx) * (1 - ty) + (gy[q + GW] * (1 - tx) + gy[q + GW + 1] * tx) * ty;\n      const ix = floor(X), iy = floor(Y);\n      if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) continue;\n      const ax = X - ix, ay = Y - iy;\n      if (iy >= 0) {\n        if (ix >= 0) acc[iy * W + ix] += wgt * (1 - ax) * (1 - ay);\n        if (ix \u003c W - 1) acc[iy * W + ix + 1] += wgt * ax * (1 - ay);\n      }\n      if (iy \u003c H - 1) {\n        if (ix >= 0) acc[(iy + 1) * W + ix] += wgt * (1 - ax) * ay;\n        if (ix \u003c W - 1) acc[(iy + 1) * W + ix + 1] += wgt * ax * ay;\n      }\n    }\n  }\n  // Gel is not quite clear: the light softens on its way to the wall, and\n  // each line of it gets a halo on the LEDs beside it.\n  blur(acc, P.tmp);\n  blur(acc, P.tmp);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.wob = cl(k[3], 0, 1);\n  const n = cl(Math.round(k[2]), 8, 40);\n  if (n !== P.want) (P.want = n), census(P, n);\n  if (!P.ready) {\n    // The first frame already shows the gel settled and swaying.\n    for (const b of P.beads) b.a = 1;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, P.sp, P.wob);\n    P.ready = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A knock: the sway and the bounce get a hard kick, the others a little.\n    const s = rnd() \u003c 0.5 ? -1 : 1, w = P.sp * 0.5;\n    P.md[1] += s * 10 * OMEGA[0] * w;\n    P.md[3] += (rnd() - 0.5) * 8 * OMEGA[1] * w;\n    P.md[5] += (rnd() - 0.5) * 4 * OMEGA[2] * w;\n    P.md[7] += (rnd() - 0.5) * 3 * OMEGA[3] * w;\n  }\n  let t = d;\n  while (t > 1e-6) {\n    const h = min(t, 1 / 60);\n    step(P, h, P.sp, P.wob);\n    t -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  caustics(P, P.wob);\n  const { acc, bg, col } = P, hue = H0 + P.hue;\n  // Gel light and deep, caustic light, pearl one side, pearl rim, pearl\n  // other side, capsule body and its gathered light. Orange and yellow gel\n  // darkened reads as brown and olive on LEDs, so around those hues the gel\n  // is kept lighter, like honey.\n  const hw = (hue - floor(hue) + 0.38) % 1, am = max(0, 1 - abs(hw - 0.5) / 0.11);\n  hsv(hue, 0.72 - 0.12 * am, 0.62 + 0.3 * am, col, 0);\n  hsv(hue + 0.02, 0.85 - 0.1 * am, 0.3 + 0.38 * am, col, 3);\n  hsv(hue - 0.03, 0.35, 1, col, 6);\n  hsv(hue + 0.12, 0.2, 1, col, 9);\n  hsv(hue - 0.14, 0.6, 1, col, 12);\n  hsv(hue - 0.1, 0.2, 1, col, 15);\n  hsv(hue + 0.05, 0.95, 0.5, col, 18);\n  hsv(hue + 0.02, 0.5, 1, col, 21);\n  // The gel: light from above, so the top glows and the bottom is deeper,\n  // and over it the net of caustic light.\n  for (let y = 0; y \u003c H; y++) {\n    const g = 1 - (0.55 * y) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, l = cl(acc[p] - 0.6, 0, 1.6) * 0.5;\n      for (let q = 0; q \u003c 3; q++) bg[p * 3 + q] = col[q] * g + col[3 + q] * (1 - g) + col[6 + q] * l * (0.55 + 0.45 * g);\n    }\n  }\n  // Beads and bubbles, far ones first.\n  for (const b of P.beads) drawBead(P, b);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, bg[p * 3]), min(255, bg[p * 3 + 1]), min(255, bg[p * 3 + 2]));\n}\n\n// Pearls are lit from above through the gel, their white leaning one way\n// round the colour wheel on one side and the other way on the other, as a\n// pearl's sheen shifts, with a rim and a white highlight. A capsule is clear and deeply tinted: light coming down through\n// it gathers into a bright spot low inside it. An air bubble is clear, the\n// gel behind it brighter, with a thin bright rim and a highlight; a speck is\n// a point of light. Far ones sink into the gel's colour.\nfunction drawBead(P, b) {\n  // A bead swinging through the gel is drawn out a little along its path\n  // and squeezed across it, so it jiggles as it swings and settles round.\n  const ax = abs(b.vx), ay = abs(b.vy), qx = cl(1 + 0.02 * ax - 0.01 * ay, 0.82, 1.18), qy = cl(1 + 0.02 * ay - 0.01 * ax, 0.82, 1.18);\n  const { bg, col, acc } = P, r = b.r, x1 = max(0, floor(b.x - r * qx - 1)), x2 = min(W - 1, floor(b.x + r * qx + 1));\n  const y1 = max(0, floor(b.y - r * qy - 1)), y2 = min(H - 1, floor(b.y + r * qy + 1));\n  const fog = 0.45 * b.z, cp = cl(floor(b.y), 0, H - 1) * W + cl(floor(b.x), 0, W - 1), glint = 0.85 + 0.35 * cl(acc[cp] - 0.6, 0, 1.5);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const dx = (x + 0.5 - b.x) / (r * qx), dy = (y + 0.5 - b.y) / (r * qy), d2 = dx * dx + dy * dy, d = sqrt(d2);\n      const cov = cl((1 - d) * r + 0.5, 0, 1) * b.a;\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - d2)), p = (y * W + x) * 3, rim = pow(1 - nz, 2.2);\n      let R, G, B;\n      if (b.kind === 2) {\n        const k = 0.9 * (1 - d);\n        R = bg[p] + col[6] * k;\n        G = bg[p + 1] + col[7] * k;\n        B = bg[p + 2] + col[8] * k;\n      } else if (b.kind === 1) {\n        // Air in gel: clear in the middle, the light bent into a bright rim,\n        // and a highlight up towards the light.\n        const ring = sm((d - 0.6) / 0.25) * (1 - sm((d - 0.95) / 0.1)), hi = exp(-((dx + 0.35) ** 2 + (dy + 0.4) ** 2) * 22);\n        const k = 0.15 + 0.85 * ring;\n        R = bg[p] * 1.1 + col[6] * k * 0.85 + 255 * hi;\n        G = bg[p + 1] * 1.1 + col[7] * k * 0.85 + 255 * hi;\n        B = bg[p + 2] * 1.1 + col[8] * k * 0.85 + 255 * hi;\n      } else {\n        const hi = pow(max(0, -dx * 0.36 - dy * 0.5 + nz * 0.79), 40) * 255, edge = 1 - 0.3 * sm((d - 0.86) / 0.12);\n        if (b.kind === 0) {\n          const df = max(0, -dx * 0.3 - dy * 0.75 + nz * 0.6), lit = (0.72 + 0.4 * df) * glint * edge, u = cl(0.5 + 0.6 * (dx - dy) * 0.7, 0, 1);\n          R = (col[9] + (col[15] - col[9]) * u) * lit + col[12] * rim * 0.75 + hi;\n          G = (col[10] + (col[16] - col[10]) * u) * lit + col[13] * rim * 0.75 + hi;\n          B = (col[11] + (col[17] - col[11]) * u) * lit + col[14] * rim * 0.75 + hi;\n        } else {\n          const core = exp(-(dx * dx + (dy - 0.42) ** 2) * 5) * glint, body = 0.55 * edge;\n          R = col[18] * body + col[21] * core + col[21] * rim * 0.5 + hi;\n          G = col[19] * body + col[22] * core + col[22] * rim * 0.5 + hi;\n          B = col[20] * body + col[23] * core + col[23] * rim * 0.5 + hi;\n        }\n      }\n      R += (bg[p] - R) * fog;\n      G += (bg[p + 1] - G) * fog;\n      B += (bg[p + 2] - B) * fog;\n      bg[p] += (R - bg[p]) * cov;\n      bg[p + 1] += (G - bg[p + 1]) * cov;\n      bg[p + 2] += (B - bg[p + 2]) * cov;\n    }\n}\n","layer":{"id":"layer-serum-gel","type":"code","name":"serum-gel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Serum Gel\n// Family:  cosmetic\n// Idea:    A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the macro shots of serum and gel cream with suspended beads in skincare films\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1\n//\n// Knob 1: Hue. Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac.\n// Knob 2: Speed. How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still.\n// Knob 3: Beads. How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one.\n// Knob 4: Wobble. How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging.\n// Buttons: K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, pow, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The opening hue: lilac, not red.\nconst H0 = 0.78;\n// Light rays are cast from a grid SS times finer than the LEDs, over a\n// margin M beyond the panel so the edges get light from outside too. How\n// far each ray is bent is worked out on a coarser grid, GS LEDs a step,\n// since the ripples are much longer than that, and read between its points.\nconst SS = 1.5, M = 4, GS = 2, GW = (W + 2 * M) / GS + 2, GH = (H + 2 * M) / GS + 2;\nconst RW = (W + 2 * M) * SS, RH = (H + 2 * M) * SS;\n// The surface ripples: six waves 18 to 40 LEDs long.\nconst NWV = 6;\n// Specks of air, always there whatever the Beads knob says.\nconst SPECKS = 16;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The gel's low modes of wobble, as displacement fields: side to side with\n// the top swinging most, a bounce, a twist, and a squeeze. Each is a damped\n// spring with its angular frequency at Speed 2.\nconst MODES = 4;\nconst OMEGA = [3.1, 4.3, 2.6, 5.4];\n// They are kept on the coarse grid, which runs M LEDs past the panel on\n// every side; the gel past the panel's edges does not move.\nconst GN = GW * GH, MX = new Float32Array(MODES * GN), MY = new Float32Array(MODES * GN);\nfor (let j = 0; j \u003c GH; j++)\n  for (let i = 0; i \u003c GW; i++) {\n    const x = cl(i * GS - M, 0, W), y = cl(j * GS - M, 0, H), p = j * GW + i;\n    const sx = sin((PI * x) / W), sy = sin((PI * y) / H), top = cos((PI * y) / (2 * H));\n    MX[p] = sx * top;\n    MY[GN + p] = sx * sy;\n    MX[2 * GN + p] = (-(y - H / 2) / 40) * sx * sy;\n    MY[2 * GN + p] = ((x - W / 2) / 40) * sx * sy;\n    MX[3 * GN + p] = sin((2 * PI * x) / W) * sy;\n  }\n// A cosine table, 1024 steps a turn.\nconst CT = new Float32Array(1024).map((_, i) => cos((i * 2 * PI) / 1024));\nconst fcos = (a) => CT[(a * 162.97466) & 1023];\n\nexport function setup(params) {\n  params.s = {\n    t: 0, wv: new Float32Array(NWV * 8), ph: new Float32Array(NWV), md: new Float32Array(MODES * 2), drive: new Float32Array(MODES), dead: 0,\n    gx: new Float32Array(GN), gy: new Float32Array(GN), acc: new Float32Array(N), tmp: new Float32Array(N),\n    beads: [], want: 0, hue: 0, wob: 0.06, sp: 2, ready: false,\n    bg: new Float32Array(N * 3), col: new Float32Array(8 * 3),\n  };\n  const P = params.s;\n  // Each ripple: its wave vector, how fast it creeps (0.4 to 1.2 LEDs a\n  // second at Speed 2), its phase, the direction it bends light, and how\n  // fast it jiggles to and fro in place, as a gel's surface does.\n  for (let i = 0; i \u003c NWV; i++) {\n    const a = (i / NWV) * PI + rnd() * 0.5, L = 18 + rnd() * 22, o = i * 8;\n    P.wv[o] = (cos(a) * 2 * PI) / L;\n    P.wv[o + 1] = (sin(a) * 2 * PI) / L;\n    P.wv[o + 2] = ((0.4 + rnd() * 0.8) * 2 * PI) / L;\n    P.wv[o + 3] = rnd() * 2 * PI;\n    P.wv[o + 4] = cos(a);\n    P.wv[o + 5] = sin(a);\n    P.wv[o + 6] = 1.6 + rnd() * 1.6;\n    P.wv[o + 7] = rnd() * 2 * PI;\n  }\n}\n\n// A bead hanging at rest point (hx, hy), depth z from 0 (near) to 1 (far),\n// and where it is now. Kind 0 is a pearl, 3 a tinted capsule, 1 an air\n// bubble, 2 one of the specks of air that every gel holds. The fewer beads,\n// the bigger they are. Each new one tries a few places in its own band of\n// the panel's height and keeps the one furthest from the others, so they\n// spread out.\nfunction bead(P, n, kind, all, band, bands) {\n  const big = 10 * sqrt(8 / n), z = rnd(), f = 1 - 0.45 * z;\n  const r = kind === 2 ? 0.7 + rnd() * 0.8 : kind === 1 ? big * (0.3 + 0.3 * rnd()) * f : big * (0.65 + 0.35 * rnd()) * f;\n  let bx = 0, by = 0, best = -1;\n  for (let tries = 0; tries \u003c 12; tries++) {\n    const x = r + 1 + rnd() * (W - 2 * r - 2), y = cl(((band + rnd()) / bands) * H, r + 2, H - r - 3);\n    let near = 1e9;\n    for (const b of all) if (!b.gone && b.kind !== 2) near = min(near, sqrt((b.hx - x) ** 2 + (b.hy - y) ** 2) - b.r - r);\n    if (near > best) (best = near), (bx = x), (by = y);\n  }\n  if (kind === 0 && rnd() \u003c 0.4) kind = 3;\n  return { hx: bx, hy: by, x: bx, y: by, vx: 0, vy: 0, r, z, kind, ph: rnd() * 2 * PI, fq: 0.5 + rnd() * 0.5, a: 0, gone: false };\n}\n\n// Keep as many beads, pearls and capsules, as the knob asks for, and two\n// bubbles for every three beads: new ones fade in, spare ones fade out, and\n// the far ones are drawn first.\nfunction census(P, n) {\n  if (!P.beads.length) for (let i = 0; i \u003c SPECKS; i++) P.beads.push(bead(P, 8, 2, P.beads, i, SPECKS));\n  for (let kind = 0; kind \u003c 2; kind++) {\n    const want = kind ? Math.round((n * 2) / 3) : n, live = P.beads.filter((b) => !b.gone && (b.kind === kind || b.kind === kind + 3));\n    if (live.length \u003c want) for (let i = live.length; i \u003c want; i++) P.beads.push(bead(P, n, kind, P.beads, (i * 7) % want, want));\n    else for (let i = want; i \u003c live.length; i++) live[i].gone = true;\n  }\n  P.beads.sort((a, b) => b.z - a.z);\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\nfunction step(P, dt, sp, wob) {\n  P.t += dt * sp * 0.5;\n  // The modes ring like springs; a slow random push keeps them moving by as\n  // much as Wobble asks.\n  const md = P.md, dr = P.drive, k = sp * 0.5;\n  for (let m = 0; m \u003c MODES; m++) {\n    const w = OMEGA[m] * k, ze = 0.07;\n    dr[m] += (rnd() - 0.5) * dt * 6;\n    dr[m] *= 1 - dt * 0.8;\n    const f = dr[m] * (0.6 + 9 * wob) * w * w * 0.25;\n    let x = md[m * 2], v = md[m * 2 + 1];\n    v += (-w * w * x - 2 * ze * w * v + f) * dt;\n    x += v * dt;\n    md[m * 2] = x;\n    md[m * 2 + 1] = v;\n  }\n  // Beads hang from the gel on springs of their own, softer than the gel, so\n  // they lag behind its swing and then catch up; each drifts a little round\n  // its rest point on its own.\n  for (const b of P.beads) {\n    b.a = b.gone ? max(0, b.a - dt * 1.5) : min(1, b.a + dt * 1.5);\n    if (b.gone && b.a \u003c= 0) P.dead = 1;\n    const p = Math.round((b.hy + M) / GS) * GW + Math.round((b.hx + M) / GS);\n    let ux = 0, uy = 0;\n    for (let m = 0; m \u003c MODES; m++) {\n      ux += md[m * 2] * MX[m * GN + p];\n      uy += md[m * 2] * MY[m * GN + p];\n    }\n    const par = 1.15 - 0.4 * b.z, dfx = 1.4 * sin(P.t * b.fq + b.ph), dfy = 1.8 * sin(P.t * b.fq * 0.71 + b.ph * 1.3);\n    const tx = b.hx + ux * par + dfx, ty = b.hy + uy * par + dfy, w = 2.4 * k * (1.1 - 0.3 * b.z);\n    b.vx += ((tx - b.x) * w * w - 2 * 0.12 * w * b.vx) * dt;\n    b.vy += ((ty - b.y) * w * w - 2 * 0.12 * w * b.vy) * dt;\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n  }\n  if (P.dead) (P.beads = P.beads.filter((b) => !b.gone || b.a > 0)), (P.dead = 0);\n}\n\n// Light comes down through the gel's rippled surface and lands on the back\n// wall. Each ray is bent by the surface's slope where it entered, by up to a\n// few LEDs, and by the gel's wobble; where the rays crowd together the wall\n// is bright, the caustic net.\nfunction caustics(P, wob) {\n  const { gx, gy, acc, wv, md } = P;\n  // A jiggling gel ripples more: the bend grows with Wobble and with how\n  // hard the modes are swinging.\n  let e = 0;\n  for (let m = 0; m \u003c MODES; m++) e += abs(md[m * 2]);\n  const amp = (1.1 + 0.8 * wob + 0.15 * min(6, e)) / sqrt(NWV / 3), t = P.t * 2, ph = P.ph, jig = 0.5 + 0.8 * wob + 0.12 * min(6, e);\n  for (let w = 0; w \u003c NWV; w++) ph[w] = wv[w * 8 + 3] - wv[w * 8 + 2] * t + jig * sin(wv[w * 8 + 6] * t + wv[w * 8 + 7]);\n  const m0 = md[0] * 0.8, m1 = md[2] * 0.8, m2 = md[4] * 0.8, m3 = md[6] * 0.8;\n  for (let j = 0, q = 0; j \u003c GH; j++)\n    for (let i = 0; i \u003c GW; i++, q++) {\n      const x = i * GS - M, y = j * GS - M;\n      let sx = 0, sy = 0;\n      for (let w = 0; w \u003c NWV; w++) {\n        const c = fcos(wv[w * 8] * x + wv[w * 8 + 1] * y + ph[w]);\n        sx += wv[w * 8 + 4] * c;\n        sy += wv[w * 8 + 5] * c;\n      }\n      // The back wall moves with the gel, so the whole net swings with it.\n      gx[q] = sx * amp + m0 * MX[q] + m2 * MX[2 * GN + q] + m3 * MX[3 * GN + q];\n      gy[q] = sy * amp + m1 * MY[GN + q] + m2 * MY[2 * GN + q];\n    }\n  acc.fill(0);\n  const wgt = 1 / (SS * SS), inv = 1 / SS, gi = 1 / GS;\n  for (let rj = 0; rj \u003c RH; rj++) {\n    const fy = rj * inv, uy = fy * gi, j0 = floor(uy), ty = uy - j0;\n    for (let ri = 0; ri \u003c RW; ri++) {\n      const fx = ri * inv, ux = fx * gi, i0 = floor(ux), tx = ux - i0, q = j0 * GW + i0;\n      const X = fx - M + (gx[q] * (1 - tx) + gx[q + 1] * tx) * (1 - ty) + (gx[q + GW] * (1 - tx) + gx[q + GW + 1] * tx) * ty;\n      const Y = fy - M + (gy[q] * (1 - tx) + gy[q + 1] * tx) * (1 - ty) + (gy[q + GW] * (1 - tx) + gy[q + GW + 1] * tx) * ty;\n      const ix = floor(X), iy = floor(Y);\n      if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) continue;\n      const ax = X - ix, ay = Y - iy;\n      if (iy >= 0) {\n        if (ix >= 0) acc[iy * W + ix] += wgt * (1 - ax) * (1 - ay);\n        if (ix \u003c W - 1) acc[iy * W + ix + 1] += wgt * ax * (1 - ay);\n      }\n      if (iy \u003c H - 1) {\n        if (ix >= 0) acc[(iy + 1) * W + ix] += wgt * (1 - ax) * ay;\n        if (ix \u003c W - 1) acc[(iy + 1) * W + ix + 1] += wgt * ax * ay;\n      }\n    }\n  }\n  // Gel is not quite clear: the light softens on its way to the wall, and\n  // each line of it gets a halo on the LEDs beside it.\n  blur(acc, P.tmp);\n  blur(acc, P.tmp);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.wob = cl(k[3], 0, 1);\n  const n = cl(Math.round(k[2]), 8, 40);\n  if (n !== P.want) (P.want = n), census(P, n);\n  if (!P.ready) {\n    // The first frame already shows the gel settled and swaying.\n    for (const b of P.beads) b.a = 1;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, P.sp, P.wob);\n    P.ready = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A knock: the sway and the bounce get a hard kick, the others a little.\n    const s = rnd() \u003c 0.5 ? -1 : 1, w = P.sp * 0.5;\n    P.md[1] += s * 10 * OMEGA[0] * w;\n    P.md[3] += (rnd() - 0.5) * 8 * OMEGA[1] * w;\n    P.md[5] += (rnd() - 0.5) * 4 * OMEGA[2] * w;\n    P.md[7] += (rnd() - 0.5) * 3 * OMEGA[3] * w;\n  }\n  let t = d;\n  while (t > 1e-6) {\n    const h = min(t, 1 / 60);\n    step(P, h, P.sp, P.wob);\n    t -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  caustics(P, P.wob);\n  const { acc, bg, col } = P, hue = H0 + P.hue;\n  // Gel light and deep, caustic light, pearl one side, pearl rim, pearl\n  // other side, capsule body and its gathered light. Orange and yellow gel\n  // darkened reads as brown and olive on LEDs, so around those hues the gel\n  // is kept lighter, like honey.\n  const hw = (hue - floor(hue) + 0.38) % 1, am = max(0, 1 - abs(hw - 0.5) / 0.11);\n  hsv(hue, 0.72 - 0.12 * am, 0.62 + 0.3 * am, col, 0);\n  hsv(hue + 0.02, 0.85 - 0.1 * am, 0.3 + 0.38 * am, col, 3);\n  hsv(hue - 0.03, 0.35, 1, col, 6);\n  hsv(hue + 0.12, 0.2, 1, col, 9);\n  hsv(hue - 0.14, 0.6, 1, col, 12);\n  hsv(hue - 0.1, 0.2, 1, col, 15);\n  hsv(hue + 0.05, 0.95, 0.5, col, 18);\n  hsv(hue + 0.02, 0.5, 1, col, 21);\n  // The gel: light from above, so the top glows and the bottom is deeper,\n  // and over it the net of caustic light.\n  for (let y = 0; y \u003c H; y++) {\n    const g = 1 - (0.55 * y) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, l = cl(acc[p] - 0.6, 0, 1.6) * 0.5;\n      for (let q = 0; q \u003c 3; q++) bg[p * 3 + q] = col[q] * g + col[3 + q] * (1 - g) + col[6 + q] * l * (0.55 + 0.45 * g);\n    }\n  }\n  // Beads and bubbles, far ones first.\n  for (const b of P.beads) drawBead(P, b);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, bg[p * 3]), min(255, bg[p * 3 + 1]), min(255, bg[p * 3 + 2]));\n}\n\n// Pearls are lit from above through the gel, their white leaning one way\n// round the colour wheel on one side and the other way on the other, as a\n// pearl's sheen shifts, with a rim and a white highlight. A capsule is clear and deeply tinted: light coming down through\n// it gathers into a bright spot low inside it. An air bubble is clear, the\n// gel behind it brighter, with a thin bright rim and a highlight; a speck is\n// a point of light. Far ones sink into the gel's colour.\nfunction drawBead(P, b) {\n  // A bead swinging through the gel is drawn out a little along its path\n  // and squeezed across it, so it jiggles as it swings and settles round.\n  const ax = abs(b.vx), ay = abs(b.vy), qx = cl(1 + 0.02 * ax - 0.01 * ay, 0.82, 1.18), qy = cl(1 + 0.02 * ay - 0.01 * ax, 0.82, 1.18);\n  const { bg, col, acc } = P, r = b.r, x1 = max(0, floor(b.x - r * qx - 1)), x2 = min(W - 1, floor(b.x + r * qx + 1));\n  const y1 = max(0, floor(b.y - r * qy - 1)), y2 = min(H - 1, floor(b.y + r * qy + 1));\n  const fog = 0.45 * b.z, cp = cl(floor(b.y), 0, H - 1) * W + cl(floor(b.x), 0, W - 1), glint = 0.85 + 0.35 * cl(acc[cp] - 0.6, 0, 1.5);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const dx = (x + 0.5 - b.x) / (r * qx), dy = (y + 0.5 - b.y) / (r * qy), d2 = dx * dx + dy * dy, d = sqrt(d2);\n      const cov = cl((1 - d) * r + 0.5, 0, 1) * b.a;\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - d2)), p = (y * W + x) * 3, rim = pow(1 - nz, 2.2);\n      let R, G, B;\n      if (b.kind === 2) {\n        const k = 0.9 * (1 - d);\n        R = bg[p] + col[6] * k;\n        G = bg[p + 1] + col[7] * k;\n        B = bg[p + 2] + col[8] * k;\n      } else if (b.kind === 1) {\n        // Air in gel: clear in the middle, the light bent into a bright rim,\n        // and a highlight up towards the light.\n        const ring = sm((d - 0.6) / 0.25) * (1 - sm((d - 0.95) / 0.1)), hi = exp(-((dx + 0.35) ** 2 + (dy + 0.4) ** 2) * 22);\n        const k = 0.15 + 0.85 * ring;\n        R = bg[p] * 1.1 + col[6] * k * 0.85 + 255 * hi;\n        G = bg[p + 1] * 1.1 + col[7] * k * 0.85 + 255 * hi;\n        B = bg[p + 2] * 1.1 + col[8] * k * 0.85 + 255 * hi;\n      } else {\n        const hi = pow(max(0, -dx * 0.36 - dy * 0.5 + nz * 0.79), 40) * 255, edge = 1 - 0.3 * sm((d - 0.86) / 0.12);\n        if (b.kind === 0) {\n          const df = max(0, -dx * 0.3 - dy * 0.75 + nz * 0.6), lit = (0.72 + 0.4 * df) * glint * edge, u = cl(0.5 + 0.6 * (dx - dy) * 0.7, 0, 1);\n          R = (col[9] + (col[15] - col[9]) * u) * lit + col[12] * rim * 0.75 + hi;\n          G = (col[10] + (col[16] - col[10]) * u) * lit + col[13] * rim * 0.75 + hi;\n          B = (col[11] + (col[17] - col[11]) * u) * lit + col[14] * rim * 0.75 + hi;\n        } else {\n          const core = exp(-(dx * dx + (dy - 0.42) ** 2) * 5) * glint, body = 0.55 * edge;\n          R = col[18] * body + col[21] * core + col[21] * rim * 0.5 + hi;\n          G = col[19] * body + col[22] * core + col[22] * rim * 0.5 + hi;\n          B = col[20] * body + col[23] * core + col[23] * rim * 0.5 + hi;\n        }\n      }\n      R += (bg[p] - R) * fog;\n      G += (bg[p + 1] - G) * fog;\n      B += (bg[p + 2] - B) * fog;\n      bg[p] += (R - bg[p]) * cov;\n      bg[p + 1] += (G - bg[p + 1]) * cov;\n      bg[p + 2] += (B - bg[p + 2]) * cov;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still."},{"name":"Beads","min":8,"max":40,"about":"How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one."},{"name":"Wobble","min":0,"max":1,"about":"How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging."}],"start":[0,2,8,0.06],"measures":{"motion":0.1786,"detail":0.0286,"edges":0.0792,"complexity":2.417,"coverage":1,"colour":0.2132,"drift":0.1307},"knobResponse":[0.3676,0.1568,0.0763,0.0849]},{"slug":"server-rack","title":"Server Rack","family":"circuit","round":18,"note":"앞에서 본 42U 서버 랙이 패널을 채워요. 맨 위 스위치로 들어온 트래픽이 서버를 타고 내려가며 드라이브 불을 켜고, 백업이 스토리지 선반의 드라이브를 차례로 채워요. K4 를 올리면 바닥 타일에서 올라온 푸른 냉기 빛이 아래쪽 앞판을 물들여요.","idea":"A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","layer":{"id":"layer-server-rack","type":"code","name":"server-rack","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s."},{"name":"Load","min":0,"max":1,"about":"At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often."},{"name":"Aisle","min":0,"max":1,"about":"Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.3413,"detail":0.1038,"edges":0.3523,"complexity":1.287,"coverage":0.6285,"colour":0.2245,"drift":0.0981},"knobResponse":[0.0421,0.0369,0.0435,0.0677]},{"slug":"setting-mist","title":"Setting Mist","family":"cosmetic","round":31,"note":"왼쪽 밖에서 세팅 미스트가 1초에 한 번쯤 뿜어져, 얇은 원뿔이 3분의 1초 만에 구름으로 부풀고 소용돌이를 말며 흘러가다 가라앉아요. 짙은 물빛 바탕에 굵은 방울이 부드럽게 반짝여요. K1 은 색상환을 다 돌고, 누르면 크게 두 번 뿜어요.","idea":"Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.","buttons":"K1 tap fires a big double puff.","code":"// ===== Patternflow pattern =====\n// Title:   Setting Mist\n// Family:  cosmetic\n// Idea:    Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after a setting spray misted across a face\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1\n//\n// Knob 1: Hue. Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown.\n// Knob 2: Speed. How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower.\n// Knob 3: Spray. How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel.\n// Knob 4: Droplets. How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash.\n// Buttons: K1 tap fires a big double puff.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 6000;\nconst { min, max, floor, sin, cos, exp, abs, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The air: a stream function made of six travelling waves, 14 to 40 LEDs\n// long. Its curl moves the mist without bunching it, so the clouds roll.\n// [wavelength, direction, speed of travel, amplitude]\nconst WAVES = [\n  [40, 0.3, 0.6, 1.0],\n  [31, 1.9, -0.8, 0.9],\n  [24, 3.6, 0.9, 0.8],\n  [19, 4.9, -1.1, 0.7],\n  [16, 0.9, 1.3, 0.6],\n  [14, 2.7, -1.5, 0.5],\n].map(([l, a, w, m], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, (m * 4.2) / k, j * 2.4];\n});\n// The flow is worked out on a grid every 4 LEDs and read off between.\nconst GS = 4, GX = W / GS + 2, GY = H / GS + 2;\n// The ground is lit a little from the upper right: its level, 0..1.\nconst BGL = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const lx = (p % W) - 60, ly = floor(p / W) - 20;\n  BGL[p] = (26 + 26 * exp(-(lx * lx + ly * ly) / 5000)) / 255;\n}\n// Round orange and yellow the ground turns to deep navy, given at full\n// brightness like the hue colour it replaces.\nconst NAVY = [60, 95, 255];\n// Puffs are kept in a ring of NP, long enough for every cloud in the air.\nconst NP = 48;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), w: F(MAXP), gp: F(MAXP), gr: F(MAXP), dr: new Uint8Array(MAXP), pid: new Uint8Array(MAXP), ex: F(MAXP), ey: F(MAXP),\n    n: 0, T: 0, next: 0.3, nz: 0, puffs: [], slot: 0,\n    P0: F(NP).fill(-99), PY: F(NP), AX: F(NP), AY: F(NP), PL: F(NP), PG: F(NP), PR: F(NP),\n    U: F(GX * GY), V: F(GX * GY), D: F(N), Y: F(N), G: F(N), tmp: F(N), buf: F(N * 3), col: F(12),\n    hue: 0, spray: 0, drop: 0.06, started: false,\n  };\n}\n\n// A puff: the nozzle at height y, aimed at angle a (0 points straight right),\n// size s. It sprays for a fifth of a second. Its front rolls up like a smoke\n// ring: two eddies either side of the axis, carried out to reach PL and\n// slowing, which curl the cloud back on itself into billows.\nfunction puff(S, y, a, s, delay) {\n  const q = (S.slot = (S.slot + 1) % NP);\n  S.P0[q] = S.T + delay;\n  S.PY[q] = y;\n  S.AX[q] = cos(a);\n  S.AY[q] = sin(a);\n  S.PL[q] = (36 + 12 * s) * (0.85 + 0.3 * rnd());\n  S.PR[q] = 5 + 4 * s;\n  S.PG[q] = (220 + 100 * s) * (0.45 + 0.55 * rnd());\n  S.puffs.push({ q, y, a, s, t: -delay, left: round(380 * s), spread: 0.3 + 0.1 * s });\n}\n\n// The hand moves the bottle up and down the face: each puff comes from a new\n// height, aimed a little toward the middle of the panel.\nfunction fire(S, big) {\n  S.nz += 0.9 + rnd() * 0.8;\n  const y = 64 + 44 * sin(S.nz * 1.3) + (rnd() - 0.5) * 14;\n  const a = -0.45 * ((y - 64) / 64) + (rnd() - 0.5) * 0.3;\n  const s = big ? 2.2 : (1 + 0.7 * S.spray) * (0.8 + 0.4 * rnd());\n  puff(S, y, a, s, 0);\n  if (big || rnd() \u003c 0.22 + 0.3 * S.spray) {\n    const y2 = cl(y + (y \u003c 64 ? 1 : -1) * (14 + rnd() * 14), 8, H - 8);\n    puff(S, y2, -0.45 * ((y2 - 64) / 64) + (rnd() - 0.5) * 0.3, big ? 2 : s * (0.7 + 0.3 * rnd()), 0.16 + rnd() * 0.12);\n  }\n}\n\nfunction emit(S, p, k) {\n  for (let j = 0; j \u003c k && S.n \u003c MAXP; j++) {\n    const i = S.n++;\n    // Droplets leave the nozzle in a cone, faster along its axis.\n    const off = (rnd() + rnd() + rnd() - 1.5) * 2 * p.spread;\n    const a = p.a + off, v = (80 + 160 * rnd() * rnd()) * (0.85 + 0.15 * p.s) * (1 - 0.5 * abs(off));\n    // Each leaves at its own moment within the frame, so the burst does not\n    // start as one bright knot.\n    const lag = rnd() * 0.035;\n    S.x[i] = -3 + v * cos(a) * lag;\n    S.y[i] = p.y + (rnd() - 0.5) * 1.5 + v * sin(a) * lag;\n    S.vx[i] = v * cos(a);\n    S.vy[i] = v * sin(a);\n    S.age[i] = 0;\n    S.life[i] = 2.6 + 1.8 * rnd();\n    S.w[i] = 0.5 + 0.4 * rnd();\n    S.gp[i] = rnd() * 2 * PI;\n    S.gr[i] = 2 + 4 * rnd();\n    S.dr[i] = rnd() \u003c 0.3 + 0.3 * S.drop ? 1 : 0;\n    S.pid[i] = p.q;\n    // Each droplet also wanders off on its own, so the cloud keeps opening.\n    const e = rnd() * 2 * PI, es = 3 + 6 * rnd();\n    S.ex[i] = es * cos(e);\n    S.ey[i] = es * sin(e);\n  }\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.w[i] = S.w[j];\n  S.gp[i] = S.gp[j];\n  S.gr[i] = S.gr[j];\n  S.dr[i] = S.dr[j];\n  S.pid[i] = S.pid[j];\n  S.ex[i] = S.ex[j];\n  S.ey[i] = S.ey[j];\n}\n\nfunction flow(S) {\n  const T = S.T, U = S.U, V = S.V;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      U[gy * GX + gx] = u;\n      V[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  // Puffs on a clock: about one a second at Spray 0, three at Spray 1.\n  S.next -= st;\n  if (S.next \u003c= 0) {\n    fire(S, false);\n    S.next = (1.15 - 0.8 * S.spray) * (0.75 + 0.5 * rnd());\n  }\n  for (let q = S.puffs.length - 1; q >= 0; q--) {\n    const p = S.puffs[q];\n    p.t += st;\n    if (p.t \u003c 0) continue;\n    const k = p.t >= 0.2 ? p.left : min(p.left, round((p.left * st) / max(st, 0.2 - p.t + st)));\n    emit(S, p, k);\n    p.left -= k;\n    if (p.left \u003c= 0) S.puffs.splice(q, 1);\n  }\n  flow(S);\n  const U = S.U, V = S.V, drag = 3.1 - 1.1 * S.drop, fall = 2.5 + 7 * S.drop;\n  const kd = 1 - exp(-drag * st);\n  for (let i = S.n - 1; i >= 0; i--) {\n    const age = (S.age[i] += st);\n    if (age > S.life[i] || S.x[i] > W + 8 || S.y[i] \u003c -10 || S.y[i] > H + 10) {\n      kill(S, i);\n      continue;\n    }\n    const x = S.x[i], y = S.y[i];\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const u = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const v = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    // The young cloud churns hardest, then the air calms to a slow drift\n    // away from the nozzle, and the droplets sink as they age.\n    const churn = 1 + 1.6 * exp(-age * 1.6);\n    let ux = u * churn + 4 + S.ex[i], uy = v * churn - 1.5 + S.ey[i];\n    const q = S.pid[i], pa = S.T - S.P0[q];\n    if (pa \u003c 2.5) {\n      // The puff's two eddies, in the frame of its axis.\n      const ax = S.AX[q], ay = S.AY[q], f = S.PL[q] * (1 - exp(-pa / 0.22));\n      const dx = x + 3 - ax * f, dy = y - S.PY[q] - ay * f;\n      const sa = dx * ax + dy * ay, ta = dy * ax - dx * ay;\n      const R = S.PR[q] * (1 + 0.8 * pa), rc = 9 + 6 * pa, G = S.PG[q] * exp(-pa / 0.8);\n      const t1 = ta - R, t2 = ta + R;\n      const g1 = G / (sa * sa + t1 * t1 + rc), g2 = -G / (sa * sa + t2 * t2 + rc);\n      const vs = -(g1 * t1 + g2 * t2), vt = (g1 + g2) * sa;\n      ux += vs * ax - vt * ay;\n      uy += vs * ay + vt * ax;\n    }\n    S.vx[i] += (ux - S.vx[i]) * kd;\n    S.vy[i] += (uy - S.vy[i]) * kd;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + (S.vy[i] + fall * min(1, age * 0.6)) * st;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0] || 0;\n  S.spray = cl(k[2], 0, 1);\n  S.drop = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the mist already in the air.\n    for (let i = 0; i \u003c 75; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) fire(S, true);\n  step(S, d * rate);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  if (r \u003c 1) return;\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, Y = S.Y, G = S.G, tmp = S.tmp, buf = S.buf, col = S.col, T = S.T, dp = S.drop;\n  D.fill(0);\n  Y.fill(0);\n  G.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i], u = age / S.life[i];\n    const env = min(1, age * 18) * (1 - u) * (1 - u);\n    const x = S.x[i], y = S.y[i];\n    // For the first quarter second the droplets still fly in a thin cone;\n    // then they open into the soft cloud.\n    const yo = age \u003c 0.2 ? 1 : age > 0.6 ? 0 : (0.6 - age) / 0.4;\n    if (yo > 0) {\n      // Flying droplets smear into short streaks along their path.\n      const wy = S.w[i] * env * yo * 0.06, sx = S.vx[i] * 0.007, sy = S.vy[i] * 0.007;\n      for (let j = 0; j \u003c 4; j++) splat(Y, x - sx * j, y - sy * j, wy);\n    }\n    splat(D, x, y, S.w[i] * env * (1 - yo));\n    if (!S.dr[i]) continue;\n    // A droplet glints when it turns the light to the eye: a smooth swell\n    // a few times a second, so nothing strobes.\n    const tw = 0.5 + 0.5 * sin(S.gp[i] + S.gr[i] * T);\n    const t3 = tw * tw * tw, g = env * (1 - 0.8 * yo) * (0.04 + 0.3 * dp + (0.9 + dp) * t3 * t3 * t3);\n    splat(G, x, y, g);\n  }\n  // Haze is soft and wide; droplets keep their shape.\n  const r = 3 - round(2 * dp);\n  blur(D, tmp, r);\n  blur(D, tmp, r > 1 ? r - 1 : r);\n  blur(Y, tmp, 1);\n  blur(Y, tmp, 1);\n  for (let p = 0; p \u003c N; p++) D[p] += Y[p];\n  if (dp > 0.3) {\n    // Coarse spray: the droplets themselves as small soft dots in the cloud.\n    for (let i = 0; i \u003c S.n; i++) {\n      if (!S.dr[i]) continue;\n      const age = S.age[i], u = age / S.life[i];\n      splat(D, S.x[i], S.y[i], (dp - 0.3) * 1.1 * min(1, age * 18) * (1 - u) * (1 - u));\n    }\n  }\n  blur(G, tmp, dp > 0.6 ? 1 : 0);\n  // Deep ground, mist tint and glint colour from the hue. Dark orange reads\n  // brown and dark yellow olive, so round those hues the ground turns to\n  // navy and the mist is lifted to a brighter gold.\n  const h = S.hue + 0.48, hf = h - floor(h), wm = sm(hf / 0.06) * (1 - sm((hf - 0.17) / 0.1));\n  hsv(h, 0.9, 255, col, 0);\n  for (let c = 0; c \u003c 3; c++) col[c] += (NAVY[c] - col[c]) * wm;\n  hsv(h, 0.45 + 0.12 * wm, 255, col, 3);\n  hsv(h, 0.12 + 0.25 * wm, 255, col, 6);\n  const gain = (4.5 - 1.5 * dp) * (1 + 0.6 * wm);\n  for (let y = 0, q = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++, q += 3) {\n      const bg = BGL[p];\n      const a = 1 - exp(-D[p] * gain), g = G[p];\n      // Thin mist glows in the tint, thick mist goes to white.\n      const wt = a * a;\n      for (let c = 0; c \u003c 3; c++) {\n        const mist = col[3 + c] * (1 - wt) + 255 * wt;\n        buf[q + c] = col[c] * bg * (1 - a) + mist * a * 0.92 + col[6 + c] * g;\n      }\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-setting-mist","type":"code","name":"setting-mist","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Setting Mist\n// Family:  cosmetic\n// Idea:    Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after a setting spray misted across a face\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1\n//\n// Knob 1: Hue. Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown.\n// Knob 2: Speed. How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower.\n// Knob 3: Spray. How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel.\n// Knob 4: Droplets. How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash.\n// Buttons: K1 tap fires a big double puff.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 6000;\nconst { min, max, floor, sin, cos, exp, abs, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The air: a stream function made of six travelling waves, 14 to 40 LEDs\n// long. Its curl moves the mist without bunching it, so the clouds roll.\n// [wavelength, direction, speed of travel, amplitude]\nconst WAVES = [\n  [40, 0.3, 0.6, 1.0],\n  [31, 1.9, -0.8, 0.9],\n  [24, 3.6, 0.9, 0.8],\n  [19, 4.9, -1.1, 0.7],\n  [16, 0.9, 1.3, 0.6],\n  [14, 2.7, -1.5, 0.5],\n].map(([l, a, w, m], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, (m * 4.2) / k, j * 2.4];\n});\n// The flow is worked out on a grid every 4 LEDs and read off between.\nconst GS = 4, GX = W / GS + 2, GY = H / GS + 2;\n// The ground is lit a little from the upper right: its level, 0..1.\nconst BGL = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const lx = (p % W) - 60, ly = floor(p / W) - 20;\n  BGL[p] = (26 + 26 * exp(-(lx * lx + ly * ly) / 5000)) / 255;\n}\n// Round orange and yellow the ground turns to deep navy, given at full\n// brightness like the hue colour it replaces.\nconst NAVY = [60, 95, 255];\n// Puffs are kept in a ring of NP, long enough for every cloud in the air.\nconst NP = 48;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), w: F(MAXP), gp: F(MAXP), gr: F(MAXP), dr: new Uint8Array(MAXP), pid: new Uint8Array(MAXP), ex: F(MAXP), ey: F(MAXP),\n    n: 0, T: 0, next: 0.3, nz: 0, puffs: [], slot: 0,\n    P0: F(NP).fill(-99), PY: F(NP), AX: F(NP), AY: F(NP), PL: F(NP), PG: F(NP), PR: F(NP),\n    U: F(GX * GY), V: F(GX * GY), D: F(N), Y: F(N), G: F(N), tmp: F(N), buf: F(N * 3), col: F(12),\n    hue: 0, spray: 0, drop: 0.06, started: false,\n  };\n}\n\n// A puff: the nozzle at height y, aimed at angle a (0 points straight right),\n// size s. It sprays for a fifth of a second. Its front rolls up like a smoke\n// ring: two eddies either side of the axis, carried out to reach PL and\n// slowing, which curl the cloud back on itself into billows.\nfunction puff(S, y, a, s, delay) {\n  const q = (S.slot = (S.slot + 1) % NP);\n  S.P0[q] = S.T + delay;\n  S.PY[q] = y;\n  S.AX[q] = cos(a);\n  S.AY[q] = sin(a);\n  S.PL[q] = (36 + 12 * s) * (0.85 + 0.3 * rnd());\n  S.PR[q] = 5 + 4 * s;\n  S.PG[q] = (220 + 100 * s) * (0.45 + 0.55 * rnd());\n  S.puffs.push({ q, y, a, s, t: -delay, left: round(380 * s), spread: 0.3 + 0.1 * s });\n}\n\n// The hand moves the bottle up and down the face: each puff comes from a new\n// height, aimed a little toward the middle of the panel.\nfunction fire(S, big) {\n  S.nz += 0.9 + rnd() * 0.8;\n  const y = 64 + 44 * sin(S.nz * 1.3) + (rnd() - 0.5) * 14;\n  const a = -0.45 * ((y - 64) / 64) + (rnd() - 0.5) * 0.3;\n  const s = big ? 2.2 : (1 + 0.7 * S.spray) * (0.8 + 0.4 * rnd());\n  puff(S, y, a, s, 0);\n  if (big || rnd() \u003c 0.22 + 0.3 * S.spray) {\n    const y2 = cl(y + (y \u003c 64 ? 1 : -1) * (14 + rnd() * 14), 8, H - 8);\n    puff(S, y2, -0.45 * ((y2 - 64) / 64) + (rnd() - 0.5) * 0.3, big ? 2 : s * (0.7 + 0.3 * rnd()), 0.16 + rnd() * 0.12);\n  }\n}\n\nfunction emit(S, p, k) {\n  for (let j = 0; j \u003c k && S.n \u003c MAXP; j++) {\n    const i = S.n++;\n    // Droplets leave the nozzle in a cone, faster along its axis.\n    const off = (rnd() + rnd() + rnd() - 1.5) * 2 * p.spread;\n    const a = p.a + off, v = (80 + 160 * rnd() * rnd()) * (0.85 + 0.15 * p.s) * (1 - 0.5 * abs(off));\n    // Each leaves at its own moment within the frame, so the burst does not\n    // start as one bright knot.\n    const lag = rnd() * 0.035;\n    S.x[i] = -3 + v * cos(a) * lag;\n    S.y[i] = p.y + (rnd() - 0.5) * 1.5 + v * sin(a) * lag;\n    S.vx[i] = v * cos(a);\n    S.vy[i] = v * sin(a);\n    S.age[i] = 0;\n    S.life[i] = 2.6 + 1.8 * rnd();\n    S.w[i] = 0.5 + 0.4 * rnd();\n    S.gp[i] = rnd() * 2 * PI;\n    S.gr[i] = 2 + 4 * rnd();\n    S.dr[i] = rnd() \u003c 0.3 + 0.3 * S.drop ? 1 : 0;\n    S.pid[i] = p.q;\n    // Each droplet also wanders off on its own, so the cloud keeps opening.\n    const e = rnd() * 2 * PI, es = 3 + 6 * rnd();\n    S.ex[i] = es * cos(e);\n    S.ey[i] = es * sin(e);\n  }\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.w[i] = S.w[j];\n  S.gp[i] = S.gp[j];\n  S.gr[i] = S.gr[j];\n  S.dr[i] = S.dr[j];\n  S.pid[i] = S.pid[j];\n  S.ex[i] = S.ex[j];\n  S.ey[i] = S.ey[j];\n}\n\nfunction flow(S) {\n  const T = S.T, U = S.U, V = S.V;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      U[gy * GX + gx] = u;\n      V[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  // Puffs on a clock: about one a second at Spray 0, three at Spray 1.\n  S.next -= st;\n  if (S.next \u003c= 0) {\n    fire(S, false);\n    S.next = (1.15 - 0.8 * S.spray) * (0.75 + 0.5 * rnd());\n  }\n  for (let q = S.puffs.length - 1; q >= 0; q--) {\n    const p = S.puffs[q];\n    p.t += st;\n    if (p.t \u003c 0) continue;\n    const k = p.t >= 0.2 ? p.left : min(p.left, round((p.left * st) / max(st, 0.2 - p.t + st)));\n    emit(S, p, k);\n    p.left -= k;\n    if (p.left \u003c= 0) S.puffs.splice(q, 1);\n  }\n  flow(S);\n  const U = S.U, V = S.V, drag = 3.1 - 1.1 * S.drop, fall = 2.5 + 7 * S.drop;\n  const kd = 1 - exp(-drag * st);\n  for (let i = S.n - 1; i >= 0; i--) {\n    const age = (S.age[i] += st);\n    if (age > S.life[i] || S.x[i] > W + 8 || S.y[i] \u003c -10 || S.y[i] > H + 10) {\n      kill(S, i);\n      continue;\n    }\n    const x = S.x[i], y = S.y[i];\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const u = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const v = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    // The young cloud churns hardest, then the air calms to a slow drift\n    // away from the nozzle, and the droplets sink as they age.\n    const churn = 1 + 1.6 * exp(-age * 1.6);\n    let ux = u * churn + 4 + S.ex[i], uy = v * churn - 1.5 + S.ey[i];\n    const q = S.pid[i], pa = S.T - S.P0[q];\n    if (pa \u003c 2.5) {\n      // The puff's two eddies, in the frame of its axis.\n      const ax = S.AX[q], ay = S.AY[q], f = S.PL[q] * (1 - exp(-pa / 0.22));\n      const dx = x + 3 - ax * f, dy = y - S.PY[q] - ay * f;\n      const sa = dx * ax + dy * ay, ta = dy * ax - dx * ay;\n      const R = S.PR[q] * (1 + 0.8 * pa), rc = 9 + 6 * pa, G = S.PG[q] * exp(-pa / 0.8);\n      const t1 = ta - R, t2 = ta + R;\n      const g1 = G / (sa * sa + t1 * t1 + rc), g2 = -G / (sa * sa + t2 * t2 + rc);\n      const vs = -(g1 * t1 + g2 * t2), vt = (g1 + g2) * sa;\n      ux += vs * ax - vt * ay;\n      uy += vs * ay + vt * ax;\n    }\n    S.vx[i] += (ux - S.vx[i]) * kd;\n    S.vy[i] += (uy - S.vy[i]) * kd;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + (S.vy[i] + fall * min(1, age * 0.6)) * st;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0] || 0;\n  S.spray = cl(k[2], 0, 1);\n  S.drop = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the mist already in the air.\n    for (let i = 0; i \u003c 75; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) fire(S, true);\n  step(S, d * rate);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  if (r \u003c 1) return;\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, Y = S.Y, G = S.G, tmp = S.tmp, buf = S.buf, col = S.col, T = S.T, dp = S.drop;\n  D.fill(0);\n  Y.fill(0);\n  G.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i], u = age / S.life[i];\n    const env = min(1, age * 18) * (1 - u) * (1 - u);\n    const x = S.x[i], y = S.y[i];\n    // For the first quarter second the droplets still fly in a thin cone;\n    // then they open into the soft cloud.\n    const yo = age \u003c 0.2 ? 1 : age > 0.6 ? 0 : (0.6 - age) / 0.4;\n    if (yo > 0) {\n      // Flying droplets smear into short streaks along their path.\n      const wy = S.w[i] * env * yo * 0.06, sx = S.vx[i] * 0.007, sy = S.vy[i] * 0.007;\n      for (let j = 0; j \u003c 4; j++) splat(Y, x - sx * j, y - sy * j, wy);\n    }\n    splat(D, x, y, S.w[i] * env * (1 - yo));\n    if (!S.dr[i]) continue;\n    // A droplet glints when it turns the light to the eye: a smooth swell\n    // a few times a second, so nothing strobes.\n    const tw = 0.5 + 0.5 * sin(S.gp[i] + S.gr[i] * T);\n    const t3 = tw * tw * tw, g = env * (1 - 0.8 * yo) * (0.04 + 0.3 * dp + (0.9 + dp) * t3 * t3 * t3);\n    splat(G, x, y, g);\n  }\n  // Haze is soft and wide; droplets keep their shape.\n  const r = 3 - round(2 * dp);\n  blur(D, tmp, r);\n  blur(D, tmp, r > 1 ? r - 1 : r);\n  blur(Y, tmp, 1);\n  blur(Y, tmp, 1);\n  for (let p = 0; p \u003c N; p++) D[p] += Y[p];\n  if (dp > 0.3) {\n    // Coarse spray: the droplets themselves as small soft dots in the cloud.\n    for (let i = 0; i \u003c S.n; i++) {\n      if (!S.dr[i]) continue;\n      const age = S.age[i], u = age / S.life[i];\n      splat(D, S.x[i], S.y[i], (dp - 0.3) * 1.1 * min(1, age * 18) * (1 - u) * (1 - u));\n    }\n  }\n  blur(G, tmp, dp > 0.6 ? 1 : 0);\n  // Deep ground, mist tint and glint colour from the hue. Dark orange reads\n  // brown and dark yellow olive, so round those hues the ground turns to\n  // navy and the mist is lifted to a brighter gold.\n  const h = S.hue + 0.48, hf = h - floor(h), wm = sm(hf / 0.06) * (1 - sm((hf - 0.17) / 0.1));\n  hsv(h, 0.9, 255, col, 0);\n  for (let c = 0; c \u003c 3; c++) col[c] += (NAVY[c] - col[c]) * wm;\n  hsv(h, 0.45 + 0.12 * wm, 255, col, 3);\n  hsv(h, 0.12 + 0.25 * wm, 255, col, 6);\n  const gain = (4.5 - 1.5 * dp) * (1 + 0.6 * wm);\n  for (let y = 0, q = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++, q += 3) {\n      const bg = BGL[p];\n      const a = 1 - exp(-D[p] * gain), g = G[p];\n      // Thin mist glows in the tint, thick mist goes to white.\n      const wt = a * a;\n      for (let c = 0; c \u003c 3; c++) {\n        const mist = col[3 + c] * (1 - wt) + 255 * wt;\n        buf[q + c] = col[c] * bg * (1 - a) + mist * a * 0.92 + col[6 + c] * g;\n      }\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower."},{"name":"Spray","min":0,"max":1,"about":"How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel."},{"name":"Droplets","min":0,"max":1,"about":"How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash."}],"start":[0,2,0,0.06],"measures":{"motion":0.1908,"detail":0.0088,"edges":0.0593,"complexity":1.291,"coverage":1,"colour":0.0895,"drift":0.1077},"knobResponse":[0.1473,0.1003,0.1667,0.0634]},{"slug":"seven-shuffles","title":"Seven Shuffles","family":"algo","round":29,"note":"카드 한 벌을 옆에서 본 무지개 막대 더미를 리플 셔플로 섞어요. 한 번 섞을 때마다 그러데이션이 2, 4, 8 갈래로 엇갈려 끼다가 일곱 번쯤에 색종이처럼 흩어지고, 그다음 기수 정렬로 되돌려 다시 시작해요. K4 를 끝까지 돌리면 완벽한 파로 셔플이 되어 32장은 다섯 번 만에 처음 순서로 돌아와요.","idea":"A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.","buttons":"K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.","code":"// ===== Patternflow pattern =====\n// Title:   Seven Shuffles\n// Family:  algo\n// Idea:    A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbert-Shannon-Reeds riffle shuffle (Edgar Gilbert and Claude Shannon, 1955; Jim Reeds, 1981), seven shuffles suffice (Dave Bayer and Persi Diaconis, 1992), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1\n//\n// Knob 1: Hue. Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one.\n// Knob 2: Speed. How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer.\n// Knob 3: Cards. How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines.\n// Knob 4: Neatness. Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128).\n// Buttons: K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.\n\nconst W = 64, H = 128, NMAX = 128;\nconst { min, max, floor, round, exp, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (t) => ((t = cl(t, 0, 1)), t * t * (3 - 2 * t));\nconst rnd = () => Math.random();\n\n// The deck at rest spans columns XL to XL + BW. In a riffle the bottom packet\n// slides DX to the left and the top packet DX to the right, so where they\n// interleave each side shows only its own cards: a comb.\nconst XL = 8, BW = 48, DX = 6;\n// The strip on the left wall shows how far the deck is from random; the\n// marks on the right wall count the riffles.\nconst SX = 0, MX = 63;\n// Where the rainbow starts at Hue 0 (blue) and how much of the wheel it spans.\nconst H0 = 0.6, SPAN = 0.78;\n// Stop shuffling once the deck is this close to random, in total variation:\n// six riffles for 32 cards, seven for 52 (0.334, where six leave 0.614),\n// nine for 128.\nconst ENOUGH = 0.4;\n\n// Phases, and their length in seconds at Speed 2. A riffle splits the deck,\n// drops the cards together and squares it up; an unriffle pass does the\n// same backwards. REST holds the ordered deck before the first riffle, WAIT\n// the shuffled one before it is put back.\nconst REST = 0, SPLIT = 1, DROP = 2, JOIN = 3, PAUSE = 4, WAIT = 5;\nconst RIF = [0.8, 0.3, 0.9, 0.3, 0.25, 1.4], UNR = [0.8, 0.2, 0.55, 0.2, 0.08, 1.4];\n\n// log k! for the binomials in Bayer and Diaconis's formula.\nconst LF = new Float64Array(8400);\nfor (let i = 1; i \u003c LF.length; i++) LF[i] = LF[i - 1] + log(i);\n\n// Bayer and Diaconis: after k riffles, a deck whose order has r rising\n// sequences turns up with probability C(2^k + n - r, n) / 2^(kn), and the\n// Eulerian number A(n, r - 1) counts the orders with r of them. Half the\n// summed gap from 1/n! is the total variation distance from random.\nfunction tvTable(n) {\n  let row = new Float64Array(n + 1), nx = new Float64Array(n + 1);\n  row[0] = 1;\n  for (let m = 2; m \u003c= n; m++) {\n    nx.fill(0);\n    for (let j = 0; j \u003c m; j++) nx[j] = (j + 1) * row[j] + (m - j) * (j > 0 ? row[j - 1] : 0);\n    [row, nx] = [nx, row];\n  }\n  const tv = new Float64Array(14);\n  for (let k = 0; k \u003c 14; k++) {\n    const q = 2 ** k;\n    let s = 0;\n    for (let r = 1; r \u003c= n; r++) {\n      const w = exp(log(row[r - 1]) - LF[n]);\n      const ratio = q >= r ? exp(LF[q + n - r] - LF[q - r] - k * n * Math.LN2) : 0;\n      s += w * abs(ratio - 1);\n    }\n    tv[k] = min(1, s / 2);\n  }\n  return tv;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each card's colour by its place in the new deck, for this Hue.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let c = 0; c \u003c P.n; c++) hsv(hue + H0 + (SPAN * c) / (P.n - 1), 0.88, 255, P.col, c * 3);\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 32, nu: 0, sp: 2, hue: 0,\n    deck: new Int16Array(NMAX), from: new Float32Array(NMAX), to: new Float32Array(NMAX), side: new Int8Array(NMAX), nd: new Int16Array(NMAX),\n    job: 0, ph: REST, t: 0, k: 0, want: 0, pass: 0, bits: 5, tv: null, kmax: 6, faro: 5, strip: 1, glow: 0, mk: new Float32Array(16),\n    col: new Float32Array(NMAX * 3), buf: new Float32Array(W * H * 3), order: new Int16Array(NMAX),\n  };\n  fresh(params.s, 32);\n}\n\n// A new deck of n cards in order: card c at place c, counted from the bottom.\nfunction fresh(P, n) {\n  P.n = n;\n  for (let c = 0; c \u003c n; c++) P.deck[c] = c;\n  P.tv = tvTable(n);\n  P.kmax = 1;\n  while (P.kmax \u003c 13 && P.tv[P.kmax] >= ENOUGH) P.kmax++;\n  P.bits = 1;\n  while (1 \u003c\u003c P.bits \u003c n) P.bits++;\n  // How many perfect out-shuffles bring this deck home.\n  const a = new Int16Array(n), b = new Int16Array(n);\n  for (let c = 0; c \u003c n; c++) a[c] = c;\n  P.faro = 0;\n  do {\n    faro(a, b, n);\n    a.set(b.subarray(0, n));\n    P.faro++;\n  } while (P.faro \u003c 200 && !sorted(a, n));\n  P.job = 0, P.ph = REST, P.t = 0, P.k = 0, P.strip = 1;\n  P.mk.fill(0);\n  paint(P, P.hue);\n}\nfunction sorted(d, n) {\n  for (let i = 0; i \u003c n; i++) if (d[i] !== i) return false;\n  return true;\n}\n// The out-shuffle: the bottom half and the top half alternate from the\n// bottom up, so the bottom and top cards stay where they are.\nfunction faro(a, b, n) {\n  const c = (n + 1) >> 1;\n  for (let i = 0, l = 0, r = c; i \u003c n; i++) b[i] = i & 1 ? a[r++] : a[l++];\n}\n\n// Plan one riffle. The cut is binomial, as if each card picked a hand by a\n// coin; then the cards fall from the bottoms of the two packets, each from a\n// packet with chance in proportion to the cards it still holds. Neatness\n// pulls the cut to the middle and the falls toward strict alternation.\nfunction riffle(P) {\n  const n = P.n, nu = P.nu, d = P.deck;\n  let coin = 0;\n  for (let i = 0; i \u003c n; i++) coin += rnd() \u003c 0.5 ? 1 : 0;\n  const c = cl(round(n / 2 + (coin - n / 2) * (1 - nu) + (n & 1 ? 0.25 : 0)), 0, n);\n  let a = c, b = n - c, l = 0, r = c, last = 1;\n  for (let j = 0; j \u003c n; j++) {\n    const pg = a / (a + b), pa = last > 0 ? 1 : 0;\n    const fromL = b === 0 || (a > 0 && rnd() \u003c (1 - nu) * pg + nu * pa);\n    const card = fromL ? d[l++] : d[r++];\n    fromL ? a-- : b--;\n    last = fromL ? -1 : 1;\n    plan(P, card, fromL ? -1 : 1, j);\n  }\n  P.job = 0;\n}\n\n// Plan one unriffle: a pass of a binary radix sort. Cards whose original\n// place has a 0 in this bit slide left and drop to the bottom, the 1s slide\n// right and rise to the top, each side keeping its order. An inverse riffle\n// is exactly this with the bits drawn at random.\nfunction unriffle(P) {\n  const n = P.n, d = P.deck, bit = 1 \u003c\u003c P.pass;\n  let z = 0;\n  for (let i = 0; i \u003c n; i++) if (!(d[i] & bit)) z++;\n  for (let i = 0, lo = 0, hi = z; i \u003c n; i++) {\n    const card = d[i];\n    if (card & bit) plan(P, card, 1, hi++);\n    else plan(P, card, -1, lo++);\n  }\n  P.job = 1;\n}\n\nfunction plan(P, card, side, j) {\n  P.side[card] = side;\n  P.to[card] = j;\n  P.nd[j] = card;\n}\n\nfunction begin(P) {\n  for (let i = 0; i \u003c P.n; i++) P.from[P.deck[i]] = i;\n  P.ph = SPLIT, P.t = 0;\n}\n\n// What comes after a phase ends.\nfunction next(P) {\n  if (P.ph === SPLIT) return (P.ph = DROP), (P.t = 0);\n  if (P.ph === DROP) return (P.ph = JOIN), (P.t = 0);\n  if (P.ph === JOIN) {\n    for (let j = 0; j \u003c P.n; j++) P.deck[j] = P.nd[j];\n    if (P.job === 0) {\n      P.k++;\n      if (P.k \u003c= 16) P.mk[min(15, P.k - 1)] = 1;\n    } else P.pass++;\n    return (P.ph = PAUSE), (P.t = 0);\n  }\n  // At rest or after a pause, pick what the deck does next.\n  const home = sorted(P.deck, P.n);\n  if (P.job === 1 && P.pass \u003c P.bits) return unriffle(P), begin(P);\n  if (P.job === 1 || (home && P.k > 0)) {\n    // Back in order: by the radix sort, or by itself after perfect faros.\n    if (P.job === 0) P.glow = 1;\n    P.job = 0, P.k = 0;\n    if (P.want \u003c= 0) return (P.ph = REST), (P.t = 0);\n  }\n  if (P.want > 0 || (P.ph !== WAIT && P.k \u003c (P.nu > 0.97 ? max(P.faro, 1) : P.kmax) && P.k \u003c 12)) {\n    P.want = max(0, P.want - 1);\n    return riffle(P), begin(P);\n  }\n  if (P.ph !== WAIT) return (P.ph = WAIT), (P.t = 0);\n  P.pass = 0;\n  return unriffle(P), begin(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 32, 0.06], d = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[2], 32, NMAX));\n  if (n !== P.n) fresh(P, n);\n  if (P.hue !== k[0]) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  // Below a tenth the riffle is the pure random one the strip is true for.\n  P.nu = cl((k[3] - 0.1) / 0.9, 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.want++;\n    if (P.ph === REST || P.ph === WAIT) next(P);\n  }\n  // The hands slow down with Speed, but the waits between riffles do not\n  // drag on past a second or two.\n  const still = P.ph === REST || P.ph === WAIT || P.ph === PAUSE;\n  P.t += d * (still ? max(P.sp / 2, 0.75) : P.sp / 2);\n  const T = P.job ? UNR : RIF;\n  if (P.t >= T[P.ph]) next(P);\n\n  // The strip eases to the distance after k riffles, back to full once the\n  // deck is being put in order; it fades out as the riffles grow neat, where\n  // the formula no longer holds.\n  const goal = P.job === 1 ? 1 : P.tv[min(13, P.k)];\n  P.strip += (goal - P.strip) * min(1, d * 3);\n  P.glow = max(0, P.glow - d * 0.7);\n  for (let i = 0; i \u003c 16; i++) {\n    const on = i \u003c P.k && P.job === 0 ? 1 : 0;\n    P.mk[i] += (on * 0.55 - P.mk[i]) * min(1, d * (on ? 6 : 2.5));\n  }\n}\n\n// One card edge-on: h rows from row top, its face lit from above and its\n// lower edge dim (dark for the thick cards, a faint line at two rows a\n// card), across columns a to a + BW with the ends anti-aliased.\nfunction card(P, c, top, h, a, pass) {\n  const buf = P.buf, col = P.col, b = a + BW, gap = h >= 3 ? 0 : 0.28;\n  const g = P.glow * P.glow * 0.6, r0 = col[c * 3], g0 = col[c * 3 + 1], b0 = col[c * 3 + 2];\n  const R = r0 + (255 - r0) * g, G = g0 + (255 - g0) * g, B = b0 + (255 - b0) * g;\n  for (let yy = 0; yy \u003c h; yy++) {\n    const Y = top + yy, edge = yy === h - 1 && h > 1;\n    if (Y \u003c 0 || Y >= H || edge !== (pass === 0)) continue;\n    const lv = edge ? gap : 1 - 0.13 * yy;\n    for (let x = max(0, floor(a)); x \u003c= min(W - 1, floor(b)); x++) {\n      const w = (min(x + 1, b) - max(x, a)) * lv, q = (Y * W + x) * 3;\n      if (w \u003c= 0) continue;\n      buf[q] += (R - buf[q]) * w;\n      buf[q + 1] += (G - buf[q + 1]) * w;\n      buf[q + 2] += (B - buf[q + 2]) * w;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, buf = P.buf, T = P.job ? UNR : RIF, u = P.t / T[P.ph];\n  const h = n \u003c= 32 ? 4 : n \u003c= 42 ? 3 : n \u003c= 64 ? 2 : 1, y0 = floor((H - n * h) / 2);\n  buf.fill(0);\n  const moving = P.ph === SPLIT || P.ph === DROP || P.ph === JOIN;\n  // While the packets pass through each other the right one is in front.\n  const ord = P.order;\n  if (P.ph === SPLIT || P.ph === DROP) {\n    let m = 0;\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] \u003c 0) ord[m++] = P.nd[j];\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] > 0) ord[m++] = P.nd[j];\n  } else for (let j = 0; j \u003c n; j++) ord[j] = moving ? P.nd[j] : P.deck[j];\n  // Two passes: the dim edge rows first, then the faces, so a card passing\n  // in front never greys another card's face with its edge.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let j = 0; j \u003c n; j++) {\n      const c = ord[j];\n      let y = j, off = 0;\n      if (moving) {\n        const s = P.side[c] * DX;\n        if (P.ph === SPLIT) (y = P.from[c]), (off = s * ease(u));\n        else if (P.ph === DROP) (y = P.from[c] + (P.to[c] - P.from[c]) * ease(u)), (off = s);\n        else (y = P.to[c]), (off = s * (1 - ease(u)));\n      }\n      card(P, c, y0 + round((n - 1 - y) * h), h, XL + off, pass);\n    }\n  // The strip: full height while the deck is far from random, sinking as\n  // the riffles add up.\n  const fade = max(0, 1 - P.nu * 8), sh = P.strip * H;\n  if (fade > 0)\n    for (let y = 0; y \u003c H; y++) {\n      const w = cl(sh - (H - 1 - y), 0, 1) * fade * (H - y \u003c sh - 1.5 ? 0.38 : 0.85), q = (y * W + SX) * 3;\n      buf[q] = 230 * w, buf[q + 1] = 226 * w, buf[q + 2] = 214 * w;\n    }\n  // One mark per riffle down the right wall.\n  for (let i = 0; i \u003c 16; i++) {\n    const w = P.mk[i];\n    if (w \u003c 0.02) continue;\n    for (let y = 2 + i * 6; y \u003c 5 + i * 6 && y \u003c H; y++) {\n      const q = (y * W + MX) * 3;\n      buf[q] = 240 * w, buf[q + 1] = 236 * w, buf[q + 2] = 224 * w;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-seven-shuffles","type":"code","name":"seven-shuffles","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Seven Shuffles\n// Family:  algo\n// Idea:    A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbert-Shannon-Reeds riffle shuffle (Edgar Gilbert and Claude Shannon, 1955; Jim Reeds, 1981), seven shuffles suffice (Dave Bayer and Persi Diaconis, 1992), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1\n//\n// Knob 1: Hue. Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one.\n// Knob 2: Speed. How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer.\n// Knob 3: Cards. How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines.\n// Knob 4: Neatness. Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128).\n// Buttons: K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.\n\nconst W = 64, H = 128, NMAX = 128;\nconst { min, max, floor, round, exp, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (t) => ((t = cl(t, 0, 1)), t * t * (3 - 2 * t));\nconst rnd = () => Math.random();\n\n// The deck at rest spans columns XL to XL + BW. In a riffle the bottom packet\n// slides DX to the left and the top packet DX to the right, so where they\n// interleave each side shows only its own cards: a comb.\nconst XL = 8, BW = 48, DX = 6;\n// The strip on the left wall shows how far the deck is from random; the\n// marks on the right wall count the riffles.\nconst SX = 0, MX = 63;\n// Where the rainbow starts at Hue 0 (blue) and how much of the wheel it spans.\nconst H0 = 0.6, SPAN = 0.78;\n// Stop shuffling once the deck is this close to random, in total variation:\n// six riffles for 32 cards, seven for 52 (0.334, where six leave 0.614),\n// nine for 128.\nconst ENOUGH = 0.4;\n\n// Phases, and their length in seconds at Speed 2. A riffle splits the deck,\n// drops the cards together and squares it up; an unriffle pass does the\n// same backwards. REST holds the ordered deck before the first riffle, WAIT\n// the shuffled one before it is put back.\nconst REST = 0, SPLIT = 1, DROP = 2, JOIN = 3, PAUSE = 4, WAIT = 5;\nconst RIF = [0.8, 0.3, 0.9, 0.3, 0.25, 1.4], UNR = [0.8, 0.2, 0.55, 0.2, 0.08, 1.4];\n\n// log k! for the binomials in Bayer and Diaconis's formula.\nconst LF = new Float64Array(8400);\nfor (let i = 1; i \u003c LF.length; i++) LF[i] = LF[i - 1] + log(i);\n\n// Bayer and Diaconis: after k riffles, a deck whose order has r rising\n// sequences turns up with probability C(2^k + n - r, n) / 2^(kn), and the\n// Eulerian number A(n, r - 1) counts the orders with r of them. Half the\n// summed gap from 1/n! is the total variation distance from random.\nfunction tvTable(n) {\n  let row = new Float64Array(n + 1), nx = new Float64Array(n + 1);\n  row[0] = 1;\n  for (let m = 2; m \u003c= n; m++) {\n    nx.fill(0);\n    for (let j = 0; j \u003c m; j++) nx[j] = (j + 1) * row[j] + (m - j) * (j > 0 ? row[j - 1] : 0);\n    [row, nx] = [nx, row];\n  }\n  const tv = new Float64Array(14);\n  for (let k = 0; k \u003c 14; k++) {\n    const q = 2 ** k;\n    let s = 0;\n    for (let r = 1; r \u003c= n; r++) {\n      const w = exp(log(row[r - 1]) - LF[n]);\n      const ratio = q >= r ? exp(LF[q + n - r] - LF[q - r] - k * n * Math.LN2) : 0;\n      s += w * abs(ratio - 1);\n    }\n    tv[k] = min(1, s / 2);\n  }\n  return tv;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each card's colour by its place in the new deck, for this Hue.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let c = 0; c \u003c P.n; c++) hsv(hue + H0 + (SPAN * c) / (P.n - 1), 0.88, 255, P.col, c * 3);\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 32, nu: 0, sp: 2, hue: 0,\n    deck: new Int16Array(NMAX), from: new Float32Array(NMAX), to: new Float32Array(NMAX), side: new Int8Array(NMAX), nd: new Int16Array(NMAX),\n    job: 0, ph: REST, t: 0, k: 0, want: 0, pass: 0, bits: 5, tv: null, kmax: 6, faro: 5, strip: 1, glow: 0, mk: new Float32Array(16),\n    col: new Float32Array(NMAX * 3), buf: new Float32Array(W * H * 3), order: new Int16Array(NMAX),\n  };\n  fresh(params.s, 32);\n}\n\n// A new deck of n cards in order: card c at place c, counted from the bottom.\nfunction fresh(P, n) {\n  P.n = n;\n  for (let c = 0; c \u003c n; c++) P.deck[c] = c;\n  P.tv = tvTable(n);\n  P.kmax = 1;\n  while (P.kmax \u003c 13 && P.tv[P.kmax] >= ENOUGH) P.kmax++;\n  P.bits = 1;\n  while (1 \u003c\u003c P.bits \u003c n) P.bits++;\n  // How many perfect out-shuffles bring this deck home.\n  const a = new Int16Array(n), b = new Int16Array(n);\n  for (let c = 0; c \u003c n; c++) a[c] = c;\n  P.faro = 0;\n  do {\n    faro(a, b, n);\n    a.set(b.subarray(0, n));\n    P.faro++;\n  } while (P.faro \u003c 200 && !sorted(a, n));\n  P.job = 0, P.ph = REST, P.t = 0, P.k = 0, P.strip = 1;\n  P.mk.fill(0);\n  paint(P, P.hue);\n}\nfunction sorted(d, n) {\n  for (let i = 0; i \u003c n; i++) if (d[i] !== i) return false;\n  return true;\n}\n// The out-shuffle: the bottom half and the top half alternate from the\n// bottom up, so the bottom and top cards stay where they are.\nfunction faro(a, b, n) {\n  const c = (n + 1) >> 1;\n  for (let i = 0, l = 0, r = c; i \u003c n; i++) b[i] = i & 1 ? a[r++] : a[l++];\n}\n\n// Plan one riffle. The cut is binomial, as if each card picked a hand by a\n// coin; then the cards fall from the bottoms of the two packets, each from a\n// packet with chance in proportion to the cards it still holds. Neatness\n// pulls the cut to the middle and the falls toward strict alternation.\nfunction riffle(P) {\n  const n = P.n, nu = P.nu, d = P.deck;\n  let coin = 0;\n  for (let i = 0; i \u003c n; i++) coin += rnd() \u003c 0.5 ? 1 : 0;\n  const c = cl(round(n / 2 + (coin - n / 2) * (1 - nu) + (n & 1 ? 0.25 : 0)), 0, n);\n  let a = c, b = n - c, l = 0, r = c, last = 1;\n  for (let j = 0; j \u003c n; j++) {\n    const pg = a / (a + b), pa = last > 0 ? 1 : 0;\n    const fromL = b === 0 || (a > 0 && rnd() \u003c (1 - nu) * pg + nu * pa);\n    const card = fromL ? d[l++] : d[r++];\n    fromL ? a-- : b--;\n    last = fromL ? -1 : 1;\n    plan(P, card, fromL ? -1 : 1, j);\n  }\n  P.job = 0;\n}\n\n// Plan one unriffle: a pass of a binary radix sort. Cards whose original\n// place has a 0 in this bit slide left and drop to the bottom, the 1s slide\n// right and rise to the top, each side keeping its order. An inverse riffle\n// is exactly this with the bits drawn at random.\nfunction unriffle(P) {\n  const n = P.n, d = P.deck, bit = 1 \u003c\u003c P.pass;\n  let z = 0;\n  for (let i = 0; i \u003c n; i++) if (!(d[i] & bit)) z++;\n  for (let i = 0, lo = 0, hi = z; i \u003c n; i++) {\n    const card = d[i];\n    if (card & bit) plan(P, card, 1, hi++);\n    else plan(P, card, -1, lo++);\n  }\n  P.job = 1;\n}\n\nfunction plan(P, card, side, j) {\n  P.side[card] = side;\n  P.to[card] = j;\n  P.nd[j] = card;\n}\n\nfunction begin(P) {\n  for (let i = 0; i \u003c P.n; i++) P.from[P.deck[i]] = i;\n  P.ph = SPLIT, P.t = 0;\n}\n\n// What comes after a phase ends.\nfunction next(P) {\n  if (P.ph === SPLIT) return (P.ph = DROP), (P.t = 0);\n  if (P.ph === DROP) return (P.ph = JOIN), (P.t = 0);\n  if (P.ph === JOIN) {\n    for (let j = 0; j \u003c P.n; j++) P.deck[j] = P.nd[j];\n    if (P.job === 0) {\n      P.k++;\n      if (P.k \u003c= 16) P.mk[min(15, P.k - 1)] = 1;\n    } else P.pass++;\n    return (P.ph = PAUSE), (P.t = 0);\n  }\n  // At rest or after a pause, pick what the deck does next.\n  const home = sorted(P.deck, P.n);\n  if (P.job === 1 && P.pass \u003c P.bits) return unriffle(P), begin(P);\n  if (P.job === 1 || (home && P.k > 0)) {\n    // Back in order: by the radix sort, or by itself after perfect faros.\n    if (P.job === 0) P.glow = 1;\n    P.job = 0, P.k = 0;\n    if (P.want \u003c= 0) return (P.ph = REST), (P.t = 0);\n  }\n  if (P.want > 0 || (P.ph !== WAIT && P.k \u003c (P.nu > 0.97 ? max(P.faro, 1) : P.kmax) && P.k \u003c 12)) {\n    P.want = max(0, P.want - 1);\n    return riffle(P), begin(P);\n  }\n  if (P.ph !== WAIT) return (P.ph = WAIT), (P.t = 0);\n  P.pass = 0;\n  return unriffle(P), begin(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 32, 0.06], d = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[2], 32, NMAX));\n  if (n !== P.n) fresh(P, n);\n  if (P.hue !== k[0]) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  // Below a tenth the riffle is the pure random one the strip is true for.\n  P.nu = cl((k[3] - 0.1) / 0.9, 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.want++;\n    if (P.ph === REST || P.ph === WAIT) next(P);\n  }\n  // The hands slow down with Speed, but the waits between riffles do not\n  // drag on past a second or two.\n  const still = P.ph === REST || P.ph === WAIT || P.ph === PAUSE;\n  P.t += d * (still ? max(P.sp / 2, 0.75) : P.sp / 2);\n  const T = P.job ? UNR : RIF;\n  if (P.t >= T[P.ph]) next(P);\n\n  // The strip eases to the distance after k riffles, back to full once the\n  // deck is being put in order; it fades out as the riffles grow neat, where\n  // the formula no longer holds.\n  const goal = P.job === 1 ? 1 : P.tv[min(13, P.k)];\n  P.strip += (goal - P.strip) * min(1, d * 3);\n  P.glow = max(0, P.glow - d * 0.7);\n  for (let i = 0; i \u003c 16; i++) {\n    const on = i \u003c P.k && P.job === 0 ? 1 : 0;\n    P.mk[i] += (on * 0.55 - P.mk[i]) * min(1, d * (on ? 6 : 2.5));\n  }\n}\n\n// One card edge-on: h rows from row top, its face lit from above and its\n// lower edge dim (dark for the thick cards, a faint line at two rows a\n// card), across columns a to a + BW with the ends anti-aliased.\nfunction card(P, c, top, h, a, pass) {\n  const buf = P.buf, col = P.col, b = a + BW, gap = h >= 3 ? 0 : 0.28;\n  const g = P.glow * P.glow * 0.6, r0 = col[c * 3], g0 = col[c * 3 + 1], b0 = col[c * 3 + 2];\n  const R = r0 + (255 - r0) * g, G = g0 + (255 - g0) * g, B = b0 + (255 - b0) * g;\n  for (let yy = 0; yy \u003c h; yy++) {\n    const Y = top + yy, edge = yy === h - 1 && h > 1;\n    if (Y \u003c 0 || Y >= H || edge !== (pass === 0)) continue;\n    const lv = edge ? gap : 1 - 0.13 * yy;\n    for (let x = max(0, floor(a)); x \u003c= min(W - 1, floor(b)); x++) {\n      const w = (min(x + 1, b) - max(x, a)) * lv, q = (Y * W + x) * 3;\n      if (w \u003c= 0) continue;\n      buf[q] += (R - buf[q]) * w;\n      buf[q + 1] += (G - buf[q + 1]) * w;\n      buf[q + 2] += (B - buf[q + 2]) * w;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, buf = P.buf, T = P.job ? UNR : RIF, u = P.t / T[P.ph];\n  const h = n \u003c= 32 ? 4 : n \u003c= 42 ? 3 : n \u003c= 64 ? 2 : 1, y0 = floor((H - n * h) / 2);\n  buf.fill(0);\n  const moving = P.ph === SPLIT || P.ph === DROP || P.ph === JOIN;\n  // While the packets pass through each other the right one is in front.\n  const ord = P.order;\n  if (P.ph === SPLIT || P.ph === DROP) {\n    let m = 0;\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] \u003c 0) ord[m++] = P.nd[j];\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] > 0) ord[m++] = P.nd[j];\n  } else for (let j = 0; j \u003c n; j++) ord[j] = moving ? P.nd[j] : P.deck[j];\n  // Two passes: the dim edge rows first, then the faces, so a card passing\n  // in front never greys another card's face with its edge.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let j = 0; j \u003c n; j++) {\n      const c = ord[j];\n      let y = j, off = 0;\n      if (moving) {\n        const s = P.side[c] * DX;\n        if (P.ph === SPLIT) (y = P.from[c]), (off = s * ease(u));\n        else if (P.ph === DROP) (y = P.from[c] + (P.to[c] - P.from[c]) * ease(u)), (off = s);\n        else (y = P.to[c]), (off = s * (1 - ease(u)));\n      }\n      card(P, c, y0 + round((n - 1 - y) * h), h, XL + off, pass);\n    }\n  // The strip: full height while the deck is far from random, sinking as\n  // the riffles add up.\n  const fade = max(0, 1 - P.nu * 8), sh = P.strip * H;\n  if (fade > 0)\n    for (let y = 0; y \u003c H; y++) {\n      const w = cl(sh - (H - 1 - y), 0, 1) * fade * (H - y \u003c sh - 1.5 ? 0.38 : 0.85), q = (y * W + SX) * 3;\n      buf[q] = 230 * w, buf[q + 1] = 226 * w, buf[q + 2] = 214 * w;\n    }\n  // One mark per riffle down the right wall.\n  for (let i = 0; i \u003c 16; i++) {\n    const w = P.mk[i];\n    if (w \u003c 0.02) continue;\n    for (let y = 2 + i * 6; y \u003c 5 + i * 6 && y \u003c H; y++) {\n      const q = (y * W + MX) * 3;\n      buf[q] = 240 * w, buf[q + 1] = 236 * w, buf[q + 2] = 224 * w;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer."},{"name":"Cards","min":32,"max":128,"about":"How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines."},{"name":"Neatness","min":0,"max":1,"about":"Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128)."}],"start":[0,2,32,0.06],"measures":{"motion":3.42,"detail":0.1826,"edges":0.5208,"complexity":0.0962,"coverage":0.5604,"colour":0.575,"drift":0.2123},"knobResponse":[0.3602,0.3179,0.3253,0.2206]},{"slug":"shadow-play","title":"Shadow Play","family":"stage","round":26,"note":"등잔 불빛을 받은 흰 막에 와양 쿨릿 가죽 인형의 레이스 그림자가 비쳐요. 기사가 거인과 싸워 던져 버리면 구눙안이 떨며 쓸고 들어와 다음 장을 열고, K1 을 돌리면 막 뒤로 돌아가 금빛과 빨강, 남색 칠이 보여요.","idea":"Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.","buttons":"K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.","code":"// ===== Patternflow pattern =====\n// Title:   Shadow Play\n// Family:  stage\n// Idea:    Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the Javanese wayang kulit shadow play\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1\n//\n// Knob 1: View. At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp.\n// Knob 2: Speed. The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower.\n// Knob 3: Lamp. How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs.\n// Knob 4: Flicker. How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften.\n// Buttons: K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Rows: the top beam, the cloth, the line the puppets stand on, the hem, the banana trunk, the first row the audience can reach.\nconst BEAM = 3, CLOTH = 10, GROUND = 92, HEM = 103, TRUNK = 104, AUD = 88;\n// One scene in story seconds (real seconds at Speed 2).\nconst SCENE = 14.4;\n// The paint, seen from the dalang's side.\nconst GOLD = [0.95, 0.72, 0.26], RED = [0.86, 0.2, 0.13], INDIGO = [0.22, 0.3, 0.8], TEAL = [0.1, 0.52, 0.48], HAIR = [0.13, 0.1, 0.15];\nconst HORN = [0.32, 0.2, 0.11], BAMBOO = [0.62, 0.5, 0.3], IVORY = [0.96, 0.92, 0.82];\n// Lace: the punched holes, as a lattice in puppet space: spacing along, spacing across, laid diagonally.\nconst LA = [0, 2.5, 2.0, 1.9, 2.3], LB = [0, 2.5, 3.6, 1.9, 2.3], LD = [0, 0, 1, 0, 0], LR = [0, 0.9, 0.9, 0.8, 1.15];\n\n// Knight and ogre outlines in puppet space: x forward, y up from the soles.\nconst K_TORSO = [-5.2, 40.4, -3.6, 41.6, 3.2, 41.6, 4.6, 40.4, 3.4, 35, 1.9, 28.5, -2.1, 28.5, -3.6, 35];\nconst K_KAIN = [-3.2, 28.5, 3.2, 28.5, 4.4, 20, 3.4, 13, 1.6, 5, -0.6, 13, -4.5, 16, -9.8, 9.5, -5.8, 22];\nconst K_NOSE = [3.8, 49.6, 8.6, 45.2, 4.6, 46.4];\nconst O_TORSO = [-8.2, 47, -6.5, 48.4, 6, 48.4, 7.8, 46.5, 7, 38, 5.5, 31, -5.5, 31, -7.5, 39];\nconst O_KAIN = [-6.2, 31.5, 6.2, 31.5, 8.8, 21.5, 2, 17, -4, 19.5, -10, 23];\nconst O_CROWN = [-0.5, 58.5, 6.2, 58.5, 5.4, 62, 2.8, 67, 0.2, 61.8];\n\n// Where the knight and the ogre stand through a scene: story second, column (a scene that runs left to right).\nconst KX = [1.7, -16, 3.6, 18, 5.6, 14, 6, 23, 6.4, 14, 6.8, 17, 7.2, 13, 7.6, 24, 8, 16, 8.5, 20, 9, 22, 10.8, 28, 12.3, 86];\nconst OX = [2.3, 84, 4.2, 47, 5.6, 50, 6, 47, 6.4, 49, 6.8, 40, 7.2, 50, 7.6, 47, 8, 39, 8.5, 42, 9, 40];\nfunction key(t, k) {\n  if (t \u003c= k[0]) return k[1];\n  for (let i = 2; i \u003c k.length; i += 2) if (t \u003c k[i]) return mix(k[i - 1], k[i + 1], sm(k[i - 2], k[i], t));\n  return k[k.length - 1];\n}\nconst pose = (hc, sz) => ({ on: false, x: 32, y: GROUND, z: 0.02, rot: 0, face: 1, a1: 0, a2: 0, b1: 0, b2: 0, jaw: 0, hc, sz });\n\nexport function setup(params) {\n  const R = () => Math.random() * TAU;\n  const P = (params.s = {\n    M: new Float32Array(N), A: new Float32Array(N), C: new Float32Array(N * 3), F: new Float32Array(N * 3),\n    BG: new Float32Array(N * 3), PT: new Uint8Array(N), LW: new Float32Array(81), HB: new Float32Array((H - AUD) * W),\n    t: 0, rt: 0, view: 0, lamp: 0, fl: 0.06, knock: -1, ph: [R(), R(), R(), R(), R(), R(), R()], dir: Math.random() \u003c 0.5 ? 1 : -1,\n    K: pose(28, 1.22), O: pose(32, 1.12), G: pose(0, 1.04), I: 1, bil: 0, LX: 31.5, LY: 46, flame: 7, shx: 0, shy: 0,\n  });\n  // The puppets planted in the trunk at either end of the screen, only their fronts showing: an ogre king, a knight.\n  P.SIMP = [[-6.5, 1, 1.32, 0], [65.5, -1, 1.4, 1]].map(([x, face, sz, k]) => Object.assign(pose(30, sz), { x, face, k, y: GROUND + 4, a2: 0.1, b1: -0.1, b2: 0.15 }));\n  // Half the gunungan's width at each height: a leaf with a pointed tip.\n  for (let v = 0; v \u003c= 80; v++) P.LW[v] = v > 78 ? 0 : v \u003c 22 ? 18 * sqrt(1 - ((22 - v) / 31) ** 2) : 18 * (1 - ((v - 22) / 56) ** 1.7) ** 1.15;\n  // What does not move, as colour before the light: beam, border, posts, cloth, hem, trunk, floor.\n  const B = P.BG;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.02, 0.018, 0.03], t = 1;\n    if (y >= BEAM && y \u003c BEAM + 4) {\n      const g = [0.55, 0.85, 1, 0.65][y - BEAM] * ((x + (y & 1) * 2) % 5 === 0 ? 0.55 : 0.9 + 0.1 * n);\n      c = [0.5 * g, 0.31 * g, 0.16 * g];\n    } else if (y >= BEAM + 4 && y \u003c CLOTH) c = y === CLOTH - 1 ? (x & 1 ? [0.85, 0.62, 0.24] : [0.3, 0.07, 0.06]) : [0.34, 0.07, 0.06].map((v) => v * (0.85 + 0.15 * n));\n    else if (y >= CLOTH && y \u003c HEM && (x \u003c 2 || x > 61)) {\n      const g = x === 1 || x === 62 ? 0.75 : 0.42;\n      c = [0.46 * g, 0.28 * g, 0.15 * g];\n    } else if (y >= CLOTH && y \u003c HEM) (t = 0), (c = [0.955 + 0.045 * n - (y === 57 ? 0.07 : y === 58 ? 0.025 : 0) - (x & 1 ? 0.012 : 0), 0, 0]);\n    else if (y === HEM) c = [0.3, 0.06, 0.05];\n    else if (y >= TRUNK && y \u003c TRUNK + 8) {\n      const g = [0.7, 1, 0.95, 0.85, 0.72, 0.58, 0.44, 0.3][y - TRUNK] * (0.82 + 0.18 * hash(floor(x / 4) + y * 17, y));\n      (t = 2), (c = [0.6 * g, 0.64 * g, 0.4 * g]);\n    } else if (y >= TRUNK + 8) c = [0.05, 0.035, 0.03].map((v) => v * (1 - (y - TRUNK - 8) / 20));\n    (B[o] = c[0]), (B[o + 1] = c[1]), (B[o + 2] = c[2]), (P.PT[i] = t);\n  }\n}\n\n// The knight's scene, in story seconds, for a scene that runs left to right.\nfunction knight(t, Q, rt, kb) {\n  Q.on = t > 1.7 && t \u003c 12.3;\n  Q.x = key(t, KX);\n  const v = (key(t + 0.05, KX) - key(t - 0.05, KX)) * 10, walk = cl(abs(v) / 12, 0, 1), st = sin(PI * t * 2.6);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((Q.x - 14) / 9, 0, 1);\n  const point = sm(3.7, 4.1, t) * (1 - sm(4.8, 5.2, t)), heave = sm(8.5, 9.1, t) * (1 - sm(9.7, 10.5, t));\n  Q.y = GROUND - walk * 1.8 * abs(st);\n  Q.z = 0.03;\n  Q.rot = -0.05 * walk + fight * 0.06 * sin(w + 0.5) + heave * 0.16 - 0.14 * kb;\n  Q.a1 = 0.12 + 0.3 * walk * st + 1.45 * point + fight * 0.7 + 1.5 * reach + 2.5 * heave + 1.4 * kb;\n  Q.a2 = 0.15 + 0.35 * point + fight * 0.9 - 0.7 * reach + 0.2 * heave;\n  Q.b1 = -0.12 + 0.06 * sin(rt * 1.7) - 0.25 * walk * st + fight * 0.3 * sin(w + 2);\n  Q.b2 = 0.2;\n}\n\n// The ogre: in from the other side, a looming threat, the fight, the throw.\nfunction ogre(t, Q, rt, kb) {\n  Q.on = t > 2.3 && t \u003c 10.6;\n  const u = cl((t - 9.2) / 1.4, 0, 1);\n  Q.x = key(t, OX) + 30 * u;\n  const v = (key(t + 0.05, OX) - key(t - 0.05, OX)) * 10, walk = cl(abs(v) / 12, 0, 1) * (1 - u), st = sin(PI * t * 2.1);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((50 - Q.x) / 10, 0, 1);\n  const loom = sm(4.3, 4.9, t) * (1 - sm(4.95, 5.5, t));\n  Q.y = GROUND - walk * 2.6 * abs(st) - 115 * u * u;\n  Q.z = 0.03 + 0.16 * loom + 0.28 * u;\n  Q.rot = -0.04 * walk + 0.07 * walk * st - 0.1 * loom + fight * 0.07 * sin(w + 3.6) + 5.6 * u + 0.35 * kb;\n  Q.a1 = 0.3 + 0.25 * walk * st + 2.0 * loom + fight * (0.6 + 0.3 * sin(w)) + 1.6 * reach + 1.2 * u;\n  Q.a2 = 0.35 + 0.5 * loom + fight * 0.6 - 0.5 * reach;\n  Q.b1 = -0.4 - 0.3 * walk * st + 0.5 * loom; Q.b2 = 0.5;\n  Q.jaw = 0.08 + loom * (0.25 + 0.15 * sin(rt * 14)) + fight * 0.25 * (0.5 + 0.5 * sin(w * 2)) + 0.45 * u + 0.4 * kb;\n}\n\n// The gunungan: planted in the middle, pulled away trembling, back at the end.\nfunction gunungan(t, Q, rt, kb) {\n  Q.on = t \u003c 3.3 || t > 10.5;\n  let e, mv;\n  if (t \u003c 7) (e = cl((t - 1.4) / 1.9, 0, 1) ** 2), (Q.x = 32 + 58 * e), (mv = sin(PI * cl((t - 1.4) / 1.9, 0, 1)));\n  else (e = 1 - sm(10.5, 12.6, t)), (Q.x = 32 - 58 * e), (mv = sin(PI * e));\n  Q.y = 98 - 10 * mv;\n  Q.z = 0.02 + 0.3 * e;\n  Q.rot = -0.45 * e + (0.012 + 0.06 * mv + 0.12 * kb) * sin(rt * TAU * 8.5) + 0.01 * sin(rt * 2.3);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05);\n  (P.view = cl(k[0], 0, 1)), (P.lamp = cl(k[2], 0, 1)), (P.fl = cl(k[3], 0, 1));\n  (P.rt += rd), (P.t += (rd * cl(k[1], 0.2, 3)) / 2);\n  if (input.btnPressed && input.btnPressed[0]) P.knock = 0;\n  if (P.knock >= 0 && (P.knock += rd) > 1.2) P.knock = -1;\n  const kn = P.knock \u003c 0 ? 9 : P.knock, kb = kn \u003c 0.45 ? sin((PI * kn) / 0.45) : 0, kr = sin(PI * cl((kn - 0.1) / 0.5, 0, 1)), sh = kn \u003c 0.4 ? 1 - kn / 0.4 : 0;\n  // The flame: a breathing flicker, now and then a gutter, a sway that moves the light.\n  const f = P.fl, rt = P.rt, ph = P.ph, amp = 0.035 + 0.2 * f;\n  const n = 0.5 * sin(7.3 * rt + ph[0]) + 0.3 * sin(12.9 * rt + ph[1]) + 0.2 * sin(23.1 * rt + ph[2]), gut = max(0, sin(1.7 * rt + ph[3]) + 0.6 * sin(3.1 * rt + ph[6])) ** 3 * 0.25 * f;\n  P.I = 1 - 0.12 * f + amp * n - 0.35 * gut + 0.2 * sh;\n  // A draught also bellies the cloth away from the puppets, so their shadows swell and soften.\n  P.bil = 0.07 * f * (0.6 + 0.4 * sin(0.9 * rt + ph[5]));\n  P.LX = 31.5 + (1 + 11 * f) * (0.65 * sin(2.1 * rt + ph[4]) + 0.35 * sin(0.83 * rt + ph[5])) + 2 * amp * sin(9.7 * rt + ph[6]);\n  P.LY = 46 - 3 * gut - 3 * f * sin(1.3 * rt + ph[2]);\n  P.flame = 7 * (1 + 1.5 * f) * (1 + 0.8 * amp * sin(11.3 * rt + ph[1]) + 0.6 * gut);\n  (P.shx = 1.3 * sh * sin(kn * 70)), (P.shy = 0.9 * sh * sin(kn * 53 + 1));\n  // The play.\n  const sc = floor(P.t / SCENE), t = P.t - sc * SCENE, dir = sc & 1 ? -P.dir : P.dir;\n  (P.K.face = dir), (P.O.face = -dir), (P.G.face = dir);\n  knight(t, P.K, rt, kb), ogre(t, P.O, rt, kr), gunungan(t, P.G, rt, sh);\n  (P.K.x += 7 * kb), (P.O.x += 6 * kr);\n  for (const Q of [P.K, P.O, P.G]) if (dir \u003c 0) Q.x = 63 - Q.x;\n}\n\n// The puppet being drawn: screen from puppet space and back, its magnification and blur.\nlet M, A, C, TX, TY, F11, F12, F21, F22, I11, I12, I21, I22, MAG, PEN, HV, LC;\nfunction place(P, Q, D) {\n  const f = cl((Q.z + P.bil) / D, 0, 0.62), m = 1 / (1 - f), c = cos(Q.rot), s = sin(Q.rot), fc = Q.face, k = m * Q.sz, hc = Q.hc * Q.sz;\n  (MAG = k), (PEN = 1 + (P.flame * f) / (1 - f)), (HV = cl(1.25 - 0.42 * PEN, 0, 0.85));\n  (F11 = k * fc * c), (F12 = -k * fc * s), (F21 = -k * s), (F22 = -k * c);\n  TX = P.LX * (1 - m) + m * (Q.x + fc * s * hc) + P.shx;\n  TY = P.LY * (1 - m) + m * (Q.y - hc + c * hc) + P.shy;\n  const det = F11 * F22 - F12 * F21;\n  (I11 = F22 / det), (I12 = -F12 / det), (I21 = -F21 / det), (I22 = F11 / det);\n}\n\nfunction holes(u, v, k) {\n  let a = u, b = v;\n  if (LD[k]) (a = (u + v) * 0.7071), (b = (v - u) * 0.7071);\n  if (k === 4) (a += 0.8 * sin(v * 0.6 + abs(u) * 0.35)), (b += 0.5 * sin(abs(u) * 0.7));\n  const pa = LA[k], pb = LB[k], j = round(b / pb), aa = a + (j & 1) * pa * 0.5, du = aa - round(aa / pa) * pa, dv = b - j * pb;\n  return cl((LR[k] - sqrt(du * du + dv * dv)) * 1.15 + 0.1, 0, 1);\n}\n\n// The gunungan's inside: rim, gate, tree, the two beasts, and lace everywhere else.\nlet LN, LW;\nfunction leaf(u, v, hw) {\n  const au = abs(u);\n  (LN = 0), (LC = GOLD);\n  if (hw - au \u003c 1.4 || v \u003c 1.3) return (LC = RED), 1;\n  if (v \u003c 15 && au \u003c 8) {\n    if (v \u003c 9) return (LC = RED), au > 1 && au \u003c 3.3 && v > 2.2 && v \u003c 7.6 ? 0.12 : 1;\n    return au \u003c 8 - (v - 9) * 1.15 ? 1 : ((LN = 4), (LC = TEAL), 1);\n  }\n  if (au \u003c 1.9 - v * 0.012 && v \u003c 70) return 1;\n  for (let b = 0; b \u003c 6; b++) {\n    const vb = 19 + 8 * b + 0.5 * au + 0.02 * au * au;\n    if (abs(v - vb) \u003c 1.05 && au \u003c min(hw - 2.4, 15 - b)) return 1;\n  }\n  const bx = (au - 6.5) / 3.4, by = (v - 17.5) / 1.9;\n  if (bx * bx + by * by \u003c 1) return (LC = HORN), 1;\n  return (LN = 4), (LC = TEAL), 1;\n}\n\n// One part: kind 0 a tapered rod (x0, y0, x1, y1, r0, r1), 1 an ellipse (cx, cy, rx, ry, turn), 2 a polygon, 3 the gunungan's leaf.\n// lace picks the holes; a part with no colour is a hole cut through what is already there (lace is then how deep).\nfunction part(k, a, b, c, d, e, f, lace, col) {\n  let u0, u1, v0, v1, rp = 99;\n  const ce = cos(e || 0), se = sin(e || 0);\n  if (k === 0) {\n    const r = max(e, f);\n    (u0 = min(a, c) - r), (u1 = max(a, c) + r), (v0 = min(b, d) - r), (v1 = max(b, d) + r), (rp = r * MAG);\n  } else if (k === 1) {\n    const r = max(c, d);\n    (u0 = a - r), (u1 = a + r), (v0 = b - r), (v1 = b + r), (rp = min(c, d) * MAG);\n  } else if (k === 2) {\n    (u0 = v0 = 1e9), (u1 = v1 = -1e9);\n    for (let i = 0; i \u003c a.length; i += 2) (u0 = min(u0, a[i])), (u1 = max(u1, a[i])), (v0 = min(v0, a[i + 1])), (v1 = max(v1, a[i + 1]));\n  } else (u0 = -19), (u1 = 19), (v0 = 0), (v1 = 79);\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let q = 0; q \u003c 4; q++) {\n    const u = q & 1 ? u1 : u0, v = q & 2 ? v1 : v0, X = F11 * u + F12 * v + TX, Y = F21 * u + F22 * v + TY;\n    (x0 = min(x0, X)), (x1 = max(x1, X)), (y0 = min(y0, Y)), (y1 = max(y1, Y));\n  }\n  const pad = PEN * 0.5 + 0.5, thin = min(1, (2 * rp + 1) / PEN), abx = c - a, aby = d - b, ab2 = abx * abx + aby * aby || 1e-9;\n  const xa = max(0, floor(x0 - pad)), xb = min(W - 1, ceil(x1 + pad)), ya = max(0, floor(y0 - pad)), yb = min(H - 1, ceil(y1 + pad));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - TX, dy = y - TY, u = I11 * dx + I12 * dy, v = I21 * dx + I22 * dy;\n      let dd, op = 1, ln = lace, cc = col;\n      if (k === 0) {\n        const t = cl(((u - a) * abx + (v - b) * aby) / ab2, 0, 1), qx = u - a - abx * t, qy = v - b - aby * t;\n        dd = sqrt(qx * qx + qy * qy) - mix(e, f, t);\n      } else if (k === 1) {\n        const pu = u - a, pv = v - b, lu = (pu * ce + pv * se) / c, lv = (pv * ce - pu * se) / d;\n        dd = (sqrt(lu * lu + lv * lv) - 1) * min(c, d);\n      } else if (k === 2) {\n        let md = 1e9, ins = false;\n        for (let i = 0, j = a.length - 2; i \u003c a.length; j = i, i += 2) {\n          const xi = a[i], yi = a[i + 1], ex = a[j] - xi, ey = a[j + 1] - yi;\n          if (yi > v !== a[j + 1] > v && u \u003c (ex * (v - yi)) / ey + xi) ins = !ins;\n          const s = cl(((u - xi) * ex + (v - yi) * ey) / (ex * ex + ey * ey), 0, 1), qx = u - xi - ex * s, qy = v - yi - ey * s;\n          md = min(md, qx * qx + qy * qy);\n        }\n        dd = ins ? -sqrt(md) : sqrt(md);\n      } else {\n        const vi = cl(v, 0, 79.9), v0i = floor(vi), hw = mix(LW[v0i], LW[v0i + 1], vi - v0i);\n        dd = max(abs(u) - hw, -v, v - 78);\n        if (dd \u003c 0.6) (op = leaf(u, v, hw)), (ln = LN), (cc = LC);\n      }\n      const dp = dd * MAG;\n      if (dp > pad) continue;\n      let cs = cl(0.5 - dp / PEN, 0, 1) * thin, cv = cl(0.5 - dp, 0, 1);\n      const i = y * W + x, o = i * 3;\n      if (!cc) {\n        const dep = lace \u003c 0 ? 0.9 * holes(u, v, -lace) : lace, s = 1 - cs * dep * min(1, HV * 1.3), sv = 1 - cv * dep;\n        (M[i] *= s), (A[i] *= sv), (C[o] *= sv), (C[o + 1] *= sv), (C[o + 2] *= sv);\n        continue;\n      }\n      if (ln) {\n        const h = holes(u, v, ln);\n        (cs *= 1 - h * HV), (cv *= 1 - h * 0.85);\n      }\n      cs *= op;\n      cv *= op;\n      if (cs > M[i]) M[i] = cs;\n      if (cv > 0) (C[o] += (cc[0] - C[o]) * cv), (C[o + 1] += (cc[1] - C[o + 1]) * cv), (C[o + 2] += (cc[2] - C[o + 2]) * cv), (A[i] += (1 - A[i]) * cv);\n    }\n}\nconst rod = (x0, y0, x1, y1, r0, r1, lace, col) => part(0, x0, y0, x1, y1, r0, r1, lace, col);\nconst ell = (cx, cy, rx, ry, turn, lace, col) => part(1, cx, cy, rx, ry, turn, 0, lace, col);\nconst poly = (pts, lace, col) => part(2, pts, 0, 0, 0, 0, 0, lace, col);\n\n// An arm on its two joints, the pointing hand, and the thin rod down to the dalang's fist.\nfunction arm(sx, sy, a1, a2, l1, l2, r1, r2, col) {\n  const ex = sx + l1 * sin(a1), ey = sy - l1 * cos(a1), hx = ex + l2 * sin(a1 + a2), hy = ey - l2 * cos(a1 + a2);\n  rod(sx, sy, ex, ey, r1, r1 * 0.85, 0, col), rod(ex, ey, hx, hy, r2 * 0.95, r2 * 0.75, 0, col);\n  rod(hx, hy, hx + 2.4 * sin(a1 + a2 + 0.25), hy - 2.4 * cos(a1 + a2 + 0.25), r2 * 0.75, 0.3, 0, col);\n  rod(ex - 0.2, ey, ex + 0.2, ey, r1 * 1.15, r1 * 1.15, 0, GOLD);\n  const gx = 2 - hx, gy = -14 - hy, l = sqrt(gx * gx + gy * gy) || 1, L = min(l, 30) / l;\n  rod(hx, hy, hx + gx * L, hy + gy * L, 0.42, 0.42, 0, BAMBOO);\n}\n\nfunction drawKnight(Q) {\n  rod(0.4, 34, 0.4, -16, 0.5, 0.45, 0, HORN);\n  arm(-4.6, 39.4, Q.b1, Q.b2, 12, 12.5, 1.0, 0.85, GOLD);\n  rod(-1, 17, -2.6, 1.5, 1.15, 0.95, 0, GOLD), rod(-2.6, 0.8, 1.2, 0.6, 0.8, 0.7, 0, GOLD);\n  rod(1.5, 17, 3.6, 1.5, 1.15, 0.95, 0, GOLD), rod(3.6, 0.8, 7.6, 0.6, 0.8, 0.7, 0, GOLD);\n  poly(K_KAIN, 2, INDIGO);\n  rod(3, 27, 5.4, 11, 0.8, 0.45, 0, RED);\n  poly(K_TORSO, 0, GOLD);\n  rod(-2.6, 29, 2.4, 29, 1.1, 1.1, 0, RED);\n  rod(-2.2, 33, 2, 33, 0.9, 0.9, -1, null);\n  rod(0.5, 40.5, 1.8, 44, 1.3, 1.1, 0, GOLD);\n  ell(-1.6, 46, 1.1, 2.6, -0.5, 1, GOLD);\n  ell(2.2, 47, 2.8, 3.6, 0.35, 0, GOLD);\n  poly(K_NOSE, 0, GOLD);\n  rod(1.5, 50.5, -2.5, 53.4, 1.6, 1.4, 3, HAIR), rod(-2.5, 53.4, -4.8, 50.2, 1.4, 0.6, 3, HAIR);\n  rod(-0.5, 50, 4.2, 50.6, 0.7, 0.6, 0, GOLD);\n  rod(3.6, 48, 5.1, 47.6, 0.38, 0.38, 0.9, null);\n  rod(-3.4, 38.6, 0.3, 36.6, 0.75, 0.75, -3, null), rod(0.3, 36.6, 3.4, 38.6, 0.75, 0.75, -3, null);\n  arm(3.6, 39.4, Q.a1, Q.a2, 12, 12.5, 1.0, 0.85, GOLD);\n}\n\nfunction drawOgre(Q) {\n  rod(0.4, 40, 0.4, -16, 0.55, 0.5, 0, HORN);\n  arm(-7.5, 46, Q.b1, Q.b2, 12.5, 13, 1.6, 1.3, RED);\n  rod(-3, 27, -7, 15, 2, 1.6, 0, RED), rod(-7, 15, -7.5, 2, 1.6, 1.3, 0, RED), rod(-8.1, 1, -3.6, 0.8, 1.1, 1, 0, RED);\n  rod(3, 27, 7, 15, 2, 1.6, 0, RED), rod(7, 15, 7.5, 2, 1.6, 1.3, 0, RED), rod(7.5, 1, 12, 0.8, 1.1, 1, 0, RED);\n  poly(O_KAIN, 2, TEAL);\n  rod(5, 29, 8, 10, 1, 0.6, 0, GOLD);\n  poly(O_TORSO, 0, RED), ell(3.6, 37, 4.8, 5.4, 0, 0, RED);\n  rod(-5.5, 45.6, 0.5, 42.5, 1, 1, -3, null), rod(0.5, 42.5, 6, 45.6, 1, 1, -3, null), ell(-1.5, 38, 3, 4, 0.2, -1, null);\n  rod(-6, 31.2, 6, 31.2, 1.2, 1.2, 0, GOLD);\n  ell(-3.5, 54, 5.5, 7.5, 0.35, 3, HAIR);\n  rod(-6, 59, -10.5, 63, 1.3, 0.3, 0, HAIR), rod(-8, 52, -13, 50, 1.3, 0.3, 0, HAIR), rod(-6.5, 47.5, -10.5, 43, 1.1, 0.3, 0, HAIR);\n  rod(0.5, 47, 2, 51, 2.5, 2.2, 0, RED);\n  ell(3.2, 55.3, 5, 4.4, 0, 0, RED), ell(9.3, 54.8, 2.4, 2.0, 0, 0, RED);\n  const j = Q.jaw, jx = 3.5 + 6.3 * cos(j), jy = 50.6 - 6.3 * sin(j);\n  rod(3.5, 50.6, jx, jy, 1.3, 1.0, 0, RED), rod(jx - 0.9, jy + 0.5, jx - 0.5, jy + 2.7, 0.55, 0.15, 0, IVORY);\n  rod(7.6, 51.3, 7.9, 49.3, 0.5, 0.15, 0, IVORY);\n  poly(O_CROWN, 1, GOLD);\n  ell(-0.5, 53, 1.5, 3, -0.4, 1, GOLD);\n  rod(6.3, 56.4, 6.3, 56.4, 1.5, 1.5, 0.9, null);\n  rod(6.6, 56.4, 6.6, 56.4, 0.6, 0.6, 0, HAIR);\n  arm(6, 46, Q.a1, Q.a2, 12.5, 13, 1.6, 1.3, RED);\n}\n\nfunction drawGunungan() {\n  rod(0, 6, 0, -12, 0.7, 0.6, 0, HORN);\n  part(3, 0, 0, 0, 0, 0, 0, 0, GOLD);\n}\n\n// A soft-edged ellipse painted over the frame, or added as glow.\nfunction blob(F, cx, cy, rx, ry, col, a, add) {\n  for (let y = max(0, floor(cy - ry - 1)); y \u003c= min(H - 1, ceil(cy + ry + 1)); y++)\n    for (let x = max(0, floor(cx - rx - 1)); x \u003c= min(W - 1, ceil(cx + rx + 1)); x++) {\n      const ex = (x - cx) / rx, ey = (y - cy) / ry, d = sqrt(ex * ex + ey * ey), o = (y * W + x) * 3;\n      const c = add ? max(0, 1 - d) ** 2 * a : cl((1 - d) * min(rx, ry) + 0.5, 0, 1) * a;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = add ? F[o + j] + col[j] * c : mix(F[o + j], col[j], c);\n    }\n}\n\n// The audience: heads and shoulders against the light, [x, top, rx, ry, kind]: bare, a peci cap, a headscarf.\nconst RIM = [1, 0.76, 0.48];\nconst HEADS = [[6, 98, 4.6, 5.6, 1], [19, 95, 5, 6, 0], [33, 99.5, 4.4, 5.4, 2], [46, 96, 5, 6.2, 1], [58.5, 98.5, 4.6, 5.6, 0]];\n// Their outline, as coverage in rows AUD and down: head, ears or scarf, neck, shoulders.\nfunction audience(HB, rt) {\n  HB.fill(0);\n  for (let j = 0; j \u003c 5; j++) {\n    const [hx, ht, rx, ry, kd] = HEADS[j], cx = hx + 0.6 * sin(rt * 0.45 + j * 1.7), top = ht + 0.4 * sin(rt * 0.7 + j * 2.3), cy = top + ry, sr = rx * 2.6;\n    for (let y = floor(top - 3); y \u003c H; y++)\n      for (let x = max(0, floor(cx - sr)); x \u003c= min(W - 1, ceil(cx + sr)); x++) {\n        const ax = abs(x - cx), ex = ax / (rx + (kd === 2 ? 0.8 : 0)), ey = (y - cy) / ry, sx = ax / sr, sy = (y - top - 2 * ry - 11) / 9;\n        let d = min((sqrt(ex * ex + ey * ey) - 1) * rx, (sqrt(sx * sx + sy * sy) - 1) * 9);\n        if (kd === 1) d = min(d, max(ax - rx * (0.86 + 0.04 * (y - top)), abs(y - top + 0.2) - 2.3));\n        if (kd === 2) d = min(d, max(ax - rx * (0.9 + (y - cy) * 0.09), cy - y));\n        else d = min(d, (sqrt((ax - rx) ** 2 + (y - cy - 0.6) ** 2) - 1.1) * 1.5, max(ax - rx * 0.62, cy - y));\n        const i = (y - AUD) * W + x;\n        HB[i] = max(HB[i], cl(0.5 - d, 0, 1));\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  (M = P.M), (A = P.A), (C = P.C), (LW = P.LW);\n  M.fill(0), A.fill(0), C.fill(0);\n  const D = 1 - 0.55 * P.lamp;\n  for (const S of P.SIMP) place(P, S, D), S.k ? drawKnight(S) : drawOgre(S);\n  if (P.K.on) place(P, P.K, D), drawKnight(P.K);\n  if (P.O.on) place(P, P.O, D), drawOgre(P.O);\n  if (P.G.on) place(P, P.G, D), drawGunungan();\n  const F = P.F, B = P.BG, PT = P.PT, I = P.I, LX = P.LX, LY = P.LY, R2 = (46 * D) ** 2, vw = sm(0, 1, P.view), rd = 0.12 * (1 - P.I) * P.fl, top = I * 228 * (0.95 + 0.05 / D);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = x - LX, dy = y - LY, fo = 1 / (1 + (dx * dx + dy * dy) / R2), pt = PT[i];\n      if (pt === 0) {\n        // The cloth: lamp light through cotton, the shadows on it; or from behind, the paint over the dim cloth.\n        const L = top * (0.2 + 0.8 * fo) * B[o], lr = L, lg = L * (0.7 + 0.18 * fo - rd), lb = L * (0.36 + 0.3 * fo - rd), s = 1 - 0.94 * M[i];\n        let r = lr * s, g = lg * s, b = lb * s;\n        if (vw > 0) {\n          const k = 0.3 * (1 - A[i]), lit = I * (0.45 + 0.5 * fo) * 250;\n          (r = mix(r, lr * k + C[o] * lit, vw)), (g = mix(g, lg * k + C[o + 1] * lit, vw)), (b = mix(b, lb * k + C[o + 2] * lit, vw));\n        }\n        (F[o] = r), (F[o + 1] = g), (F[o + 2] = b);\n      } else {\n        const s = I * (0.3 + 0.7 * fo) * 255 * (pt === 2 ? 1 - 0.85 * M[i] : 1);\n        (F[o] = B[o] * s), (F[o + 1] = B[o + 1] * s), (F[o + 2] = B[o + 2] * s);\n      }\n    }\n  // From the dalang's side the blencong hangs in view: a bronze garuda on a chain, the flame at its beak.\n  if (vw > 0.01) {\n    const bx = LX + 2, fl = P.flame / 7;\n    for (let y = 0; y \u003c 11; y++) blob(F, round(bx), y, 0.6, 0.6, y & 1 ? [90, 62, 30] : [150, 105, 50], vw);\n    blob(F, bx + 6, 10.5, 2.2, 3.2, [150, 96, 36], vw), blob(F, bx, 13, 5, 2.2, [170, 112, 42], vw), blob(F, bx - 4.2, 11, 1.4, 1.6, [200, 140, 60], vw);\n    blob(F, bx - 6.2, 12.8 - fl, 1.6 * fl, 6 * fl, [255, 140, 40], 0.5 * vw * I, 1), blob(F, bx - 6.2, 12.5 - fl * 0.6, 0.8, 1.9 * fl, [255, 240, 190], vw);\n  }\n  // The audience against the light, the rims of their heads lit by the screen.\n  const HB = P.HB;\n  audience(HB, P.rt);\n  for (let y = AUD + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = (y - AUD) * W + x, c = HB[k];\n      if (c \u003c= 0) continue;\n      const o = (y * W + x) * 3, q = (min(y, HEM - 1) * W + x) * 3, side = min(x > 0 ? HB[k - 1] : 1, x \u003c W - 1 ? HB[k + 1] : 1);\n      const rim = (1 - (HB[k - W] + HB[k - 2 * W]) / 2) * 0.6 + (1 - side) * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = F[o + j] * (1 - c) + c * (6 + rim * RIM[j] * max(70, F[q] * 0.9));\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","layer":{"id":"layer-shadow-play","type":"code","name":"shadow-play","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shadow Play\n// Family:  stage\n// Idea:    Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the Javanese wayang kulit shadow play\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1\n//\n// Knob 1: View. At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp.\n// Knob 2: Speed. The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower.\n// Knob 3: Lamp. How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs.\n// Knob 4: Flicker. How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften.\n// Buttons: K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Rows: the top beam, the cloth, the line the puppets stand on, the hem, the banana trunk, the first row the audience can reach.\nconst BEAM = 3, CLOTH = 10, GROUND = 92, HEM = 103, TRUNK = 104, AUD = 88;\n// One scene in story seconds (real seconds at Speed 2).\nconst SCENE = 14.4;\n// The paint, seen from the dalang's side.\nconst GOLD = [0.95, 0.72, 0.26], RED = [0.86, 0.2, 0.13], INDIGO = [0.22, 0.3, 0.8], TEAL = [0.1, 0.52, 0.48], HAIR = [0.13, 0.1, 0.15];\nconst HORN = [0.32, 0.2, 0.11], BAMBOO = [0.62, 0.5, 0.3], IVORY = [0.96, 0.92, 0.82];\n// Lace: the punched holes, as a lattice in puppet space: spacing along, spacing across, laid diagonally.\nconst LA = [0, 2.5, 2.0, 1.9, 2.3], LB = [0, 2.5, 3.6, 1.9, 2.3], LD = [0, 0, 1, 0, 0], LR = [0, 0.9, 0.9, 0.8, 1.15];\n\n// Knight and ogre outlines in puppet space: x forward, y up from the soles.\nconst K_TORSO = [-5.2, 40.4, -3.6, 41.6, 3.2, 41.6, 4.6, 40.4, 3.4, 35, 1.9, 28.5, -2.1, 28.5, -3.6, 35];\nconst K_KAIN = [-3.2, 28.5, 3.2, 28.5, 4.4, 20, 3.4, 13, 1.6, 5, -0.6, 13, -4.5, 16, -9.8, 9.5, -5.8, 22];\nconst K_NOSE = [3.8, 49.6, 8.6, 45.2, 4.6, 46.4];\nconst O_TORSO = [-8.2, 47, -6.5, 48.4, 6, 48.4, 7.8, 46.5, 7, 38, 5.5, 31, -5.5, 31, -7.5, 39];\nconst O_KAIN = [-6.2, 31.5, 6.2, 31.5, 8.8, 21.5, 2, 17, -4, 19.5, -10, 23];\nconst O_CROWN = [-0.5, 58.5, 6.2, 58.5, 5.4, 62, 2.8, 67, 0.2, 61.8];\n\n// Where the knight and the ogre stand through a scene: story second, column (a scene that runs left to right).\nconst KX = [1.7, -16, 3.6, 18, 5.6, 14, 6, 23, 6.4, 14, 6.8, 17, 7.2, 13, 7.6, 24, 8, 16, 8.5, 20, 9, 22, 10.8, 28, 12.3, 86];\nconst OX = [2.3, 84, 4.2, 47, 5.6, 50, 6, 47, 6.4, 49, 6.8, 40, 7.2, 50, 7.6, 47, 8, 39, 8.5, 42, 9, 40];\nfunction key(t, k) {\n  if (t \u003c= k[0]) return k[1];\n  for (let i = 2; i \u003c k.length; i += 2) if (t \u003c k[i]) return mix(k[i - 1], k[i + 1], sm(k[i - 2], k[i], t));\n  return k[k.length - 1];\n}\nconst pose = (hc, sz) => ({ on: false, x: 32, y: GROUND, z: 0.02, rot: 0, face: 1, a1: 0, a2: 0, b1: 0, b2: 0, jaw: 0, hc, sz });\n\nexport function setup(params) {\n  const R = () => Math.random() * TAU;\n  const P = (params.s = {\n    M: new Float32Array(N), A: new Float32Array(N), C: new Float32Array(N * 3), F: new Float32Array(N * 3),\n    BG: new Float32Array(N * 3), PT: new Uint8Array(N), LW: new Float32Array(81), HB: new Float32Array((H - AUD) * W),\n    t: 0, rt: 0, view: 0, lamp: 0, fl: 0.06, knock: -1, ph: [R(), R(), R(), R(), R(), R(), R()], dir: Math.random() \u003c 0.5 ? 1 : -1,\n    K: pose(28, 1.22), O: pose(32, 1.12), G: pose(0, 1.04), I: 1, bil: 0, LX: 31.5, LY: 46, flame: 7, shx: 0, shy: 0,\n  });\n  // The puppets planted in the trunk at either end of the screen, only their fronts showing: an ogre king, a knight.\n  P.SIMP = [[-6.5, 1, 1.32, 0], [65.5, -1, 1.4, 1]].map(([x, face, sz, k]) => Object.assign(pose(30, sz), { x, face, k, y: GROUND + 4, a2: 0.1, b1: -0.1, b2: 0.15 }));\n  // Half the gunungan's width at each height: a leaf with a pointed tip.\n  for (let v = 0; v \u003c= 80; v++) P.LW[v] = v > 78 ? 0 : v \u003c 22 ? 18 * sqrt(1 - ((22 - v) / 31) ** 2) : 18 * (1 - ((v - 22) / 56) ** 1.7) ** 1.15;\n  // What does not move, as colour before the light: beam, border, posts, cloth, hem, trunk, floor.\n  const B = P.BG;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.02, 0.018, 0.03], t = 1;\n    if (y >= BEAM && y \u003c BEAM + 4) {\n      const g = [0.55, 0.85, 1, 0.65][y - BEAM] * ((x + (y & 1) * 2) % 5 === 0 ? 0.55 : 0.9 + 0.1 * n);\n      c = [0.5 * g, 0.31 * g, 0.16 * g];\n    } else if (y >= BEAM + 4 && y \u003c CLOTH) c = y === CLOTH - 1 ? (x & 1 ? [0.85, 0.62, 0.24] : [0.3, 0.07, 0.06]) : [0.34, 0.07, 0.06].map((v) => v * (0.85 + 0.15 * n));\n    else if (y >= CLOTH && y \u003c HEM && (x \u003c 2 || x > 61)) {\n      const g = x === 1 || x === 62 ? 0.75 : 0.42;\n      c = [0.46 * g, 0.28 * g, 0.15 * g];\n    } else if (y >= CLOTH && y \u003c HEM) (t = 0), (c = [0.955 + 0.045 * n - (y === 57 ? 0.07 : y === 58 ? 0.025 : 0) - (x & 1 ? 0.012 : 0), 0, 0]);\n    else if (y === HEM) c = [0.3, 0.06, 0.05];\n    else if (y >= TRUNK && y \u003c TRUNK + 8) {\n      const g = [0.7, 1, 0.95, 0.85, 0.72, 0.58, 0.44, 0.3][y - TRUNK] * (0.82 + 0.18 * hash(floor(x / 4) + y * 17, y));\n      (t = 2), (c = [0.6 * g, 0.64 * g, 0.4 * g]);\n    } else if (y >= TRUNK + 8) c = [0.05, 0.035, 0.03].map((v) => v * (1 - (y - TRUNK - 8) / 20));\n    (B[o] = c[0]), (B[o + 1] = c[1]), (B[o + 2] = c[2]), (P.PT[i] = t);\n  }\n}\n\n// The knight's scene, in story seconds, for a scene that runs left to right.\nfunction knight(t, Q, rt, kb) {\n  Q.on = t > 1.7 && t \u003c 12.3;\n  Q.x = key(t, KX);\n  const v = (key(t + 0.05, KX) - key(t - 0.05, KX)) * 10, walk = cl(abs(v) / 12, 0, 1), st = sin(PI * t * 2.6);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((Q.x - 14) / 9, 0, 1);\n  const point = sm(3.7, 4.1, t) * (1 - sm(4.8, 5.2, t)), heave = sm(8.5, 9.1, t) * (1 - sm(9.7, 10.5, t));\n  Q.y = GROUND - walk * 1.8 * abs(st);\n  Q.z = 0.03;\n  Q.rot = -0.05 * walk + fight * 0.06 * sin(w + 0.5) + heave * 0.16 - 0.14 * kb;\n  Q.a1 = 0.12 + 0.3 * walk * st + 1.45 * point + fight * 0.7 + 1.5 * reach + 2.5 * heave + 1.4 * kb;\n  Q.a2 = 0.15 + 0.35 * point + fight * 0.9 - 0.7 * reach + 0.2 * heave;\n  Q.b1 = -0.12 + 0.06 * sin(rt * 1.7) - 0.25 * walk * st + fight * 0.3 * sin(w + 2);\n  Q.b2 = 0.2;\n}\n\n// The ogre: in from the other side, a looming threat, the fight, the throw.\nfunction ogre(t, Q, rt, kb) {\n  Q.on = t > 2.3 && t \u003c 10.6;\n  const u = cl((t - 9.2) / 1.4, 0, 1);\n  Q.x = key(t, OX) + 30 * u;\n  const v = (key(t + 0.05, OX) - key(t - 0.05, OX)) * 10, walk = cl(abs(v) / 12, 0, 1) * (1 - u), st = sin(PI * t * 2.1);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((50 - Q.x) / 10, 0, 1);\n  const loom = sm(4.3, 4.9, t) * (1 - sm(4.95, 5.5, t));\n  Q.y = GROUND - walk * 2.6 * abs(st) - 115 * u * u;\n  Q.z = 0.03 + 0.16 * loom + 0.28 * u;\n  Q.rot = -0.04 * walk + 0.07 * walk * st - 0.1 * loom + fight * 0.07 * sin(w + 3.6) + 5.6 * u + 0.35 * kb;\n  Q.a1 = 0.3 + 0.25 * walk * st + 2.0 * loom + fight * (0.6 + 0.3 * sin(w)) + 1.6 * reach + 1.2 * u;\n  Q.a2 = 0.35 + 0.5 * loom + fight * 0.6 - 0.5 * reach;\n  Q.b1 = -0.4 - 0.3 * walk * st + 0.5 * loom; Q.b2 = 0.5;\n  Q.jaw = 0.08 + loom * (0.25 + 0.15 * sin(rt * 14)) + fight * 0.25 * (0.5 + 0.5 * sin(w * 2)) + 0.45 * u + 0.4 * kb;\n}\n\n// The gunungan: planted in the middle, pulled away trembling, back at the end.\nfunction gunungan(t, Q, rt, kb) {\n  Q.on = t \u003c 3.3 || t > 10.5;\n  let e, mv;\n  if (t \u003c 7) (e = cl((t - 1.4) / 1.9, 0, 1) ** 2), (Q.x = 32 + 58 * e), (mv = sin(PI * cl((t - 1.4) / 1.9, 0, 1)));\n  else (e = 1 - sm(10.5, 12.6, t)), (Q.x = 32 - 58 * e), (mv = sin(PI * e));\n  Q.y = 98 - 10 * mv;\n  Q.z = 0.02 + 0.3 * e;\n  Q.rot = -0.45 * e + (0.012 + 0.06 * mv + 0.12 * kb) * sin(rt * TAU * 8.5) + 0.01 * sin(rt * 2.3);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05);\n  (P.view = cl(k[0], 0, 1)), (P.lamp = cl(k[2], 0, 1)), (P.fl = cl(k[3], 0, 1));\n  (P.rt += rd), (P.t += (rd * cl(k[1], 0.2, 3)) / 2);\n  if (input.btnPressed && input.btnPressed[0]) P.knock = 0;\n  if (P.knock >= 0 && (P.knock += rd) > 1.2) P.knock = -1;\n  const kn = P.knock \u003c 0 ? 9 : P.knock, kb = kn \u003c 0.45 ? sin((PI * kn) / 0.45) : 0, kr = sin(PI * cl((kn - 0.1) / 0.5, 0, 1)), sh = kn \u003c 0.4 ? 1 - kn / 0.4 : 0;\n  // The flame: a breathing flicker, now and then a gutter, a sway that moves the light.\n  const f = P.fl, rt = P.rt, ph = P.ph, amp = 0.035 + 0.2 * f;\n  const n = 0.5 * sin(7.3 * rt + ph[0]) + 0.3 * sin(12.9 * rt + ph[1]) + 0.2 * sin(23.1 * rt + ph[2]), gut = max(0, sin(1.7 * rt + ph[3]) + 0.6 * sin(3.1 * rt + ph[6])) ** 3 * 0.25 * f;\n  P.I = 1 - 0.12 * f + amp * n - 0.35 * gut + 0.2 * sh;\n  // A draught also bellies the cloth away from the puppets, so their shadows swell and soften.\n  P.bil = 0.07 * f * (0.6 + 0.4 * sin(0.9 * rt + ph[5]));\n  P.LX = 31.5 + (1 + 11 * f) * (0.65 * sin(2.1 * rt + ph[4]) + 0.35 * sin(0.83 * rt + ph[5])) + 2 * amp * sin(9.7 * rt + ph[6]);\n  P.LY = 46 - 3 * gut - 3 * f * sin(1.3 * rt + ph[2]);\n  P.flame = 7 * (1 + 1.5 * f) * (1 + 0.8 * amp * sin(11.3 * rt + ph[1]) + 0.6 * gut);\n  (P.shx = 1.3 * sh * sin(kn * 70)), (P.shy = 0.9 * sh * sin(kn * 53 + 1));\n  // The play.\n  const sc = floor(P.t / SCENE), t = P.t - sc * SCENE, dir = sc & 1 ? -P.dir : P.dir;\n  (P.K.face = dir), (P.O.face = -dir), (P.G.face = dir);\n  knight(t, P.K, rt, kb), ogre(t, P.O, rt, kr), gunungan(t, P.G, rt, sh);\n  (P.K.x += 7 * kb), (P.O.x += 6 * kr);\n  for (const Q of [P.K, P.O, P.G]) if (dir \u003c 0) Q.x = 63 - Q.x;\n}\n\n// The puppet being drawn: screen from puppet space and back, its magnification and blur.\nlet M, A, C, TX, TY, F11, F12, F21, F22, I11, I12, I21, I22, MAG, PEN, HV, LC;\nfunction place(P, Q, D) {\n  const f = cl((Q.z + P.bil) / D, 0, 0.62), m = 1 / (1 - f), c = cos(Q.rot), s = sin(Q.rot), fc = Q.face, k = m * Q.sz, hc = Q.hc * Q.sz;\n  (MAG = k), (PEN = 1 + (P.flame * f) / (1 - f)), (HV = cl(1.25 - 0.42 * PEN, 0, 0.85));\n  (F11 = k * fc * c), (F12 = -k * fc * s), (F21 = -k * s), (F22 = -k * c);\n  TX = P.LX * (1 - m) + m * (Q.x + fc * s * hc) + P.shx;\n  TY = P.LY * (1 - m) + m * (Q.y - hc + c * hc) + P.shy;\n  const det = F11 * F22 - F12 * F21;\n  (I11 = F22 / det), (I12 = -F12 / det), (I21 = -F21 / det), (I22 = F11 / det);\n}\n\nfunction holes(u, v, k) {\n  let a = u, b = v;\n  if (LD[k]) (a = (u + v) * 0.7071), (b = (v - u) * 0.7071);\n  if (k === 4) (a += 0.8 * sin(v * 0.6 + abs(u) * 0.35)), (b += 0.5 * sin(abs(u) * 0.7));\n  const pa = LA[k], pb = LB[k], j = round(b / pb), aa = a + (j & 1) * pa * 0.5, du = aa - round(aa / pa) * pa, dv = b - j * pb;\n  return cl((LR[k] - sqrt(du * du + dv * dv)) * 1.15 + 0.1, 0, 1);\n}\n\n// The gunungan's inside: rim, gate, tree, the two beasts, and lace everywhere else.\nlet LN, LW;\nfunction leaf(u, v, hw) {\n  const au = abs(u);\n  (LN = 0), (LC = GOLD);\n  if (hw - au \u003c 1.4 || v \u003c 1.3) return (LC = RED), 1;\n  if (v \u003c 15 && au \u003c 8) {\n    if (v \u003c 9) return (LC = RED), au > 1 && au \u003c 3.3 && v > 2.2 && v \u003c 7.6 ? 0.12 : 1;\n    return au \u003c 8 - (v - 9) * 1.15 ? 1 : ((LN = 4), (LC = TEAL), 1);\n  }\n  if (au \u003c 1.9 - v * 0.012 && v \u003c 70) return 1;\n  for (let b = 0; b \u003c 6; b++) {\n    const vb = 19 + 8 * b + 0.5 * au + 0.02 * au * au;\n    if (abs(v - vb) \u003c 1.05 && au \u003c min(hw - 2.4, 15 - b)) return 1;\n  }\n  const bx = (au - 6.5) / 3.4, by = (v - 17.5) / 1.9;\n  if (bx * bx + by * by \u003c 1) return (LC = HORN), 1;\n  return (LN = 4), (LC = TEAL), 1;\n}\n\n// One part: kind 0 a tapered rod (x0, y0, x1, y1, r0, r1), 1 an ellipse (cx, cy, rx, ry, turn), 2 a polygon, 3 the gunungan's leaf.\n// lace picks the holes; a part with no colour is a hole cut through what is already there (lace is then how deep).\nfunction part(k, a, b, c, d, e, f, lace, col) {\n  let u0, u1, v0, v1, rp = 99;\n  const ce = cos(e || 0), se = sin(e || 0);\n  if (k === 0) {\n    const r = max(e, f);\n    (u0 = min(a, c) - r), (u1 = max(a, c) + r), (v0 = min(b, d) - r), (v1 = max(b, d) + r), (rp = r * MAG);\n  } else if (k === 1) {\n    const r = max(c, d);\n    (u0 = a - r), (u1 = a + r), (v0 = b - r), (v1 = b + r), (rp = min(c, d) * MAG);\n  } else if (k === 2) {\n    (u0 = v0 = 1e9), (u1 = v1 = -1e9);\n    for (let i = 0; i \u003c a.length; i += 2) (u0 = min(u0, a[i])), (u1 = max(u1, a[i])), (v0 = min(v0, a[i + 1])), (v1 = max(v1, a[i + 1]));\n  } else (u0 = -19), (u1 = 19), (v0 = 0), (v1 = 79);\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let q = 0; q \u003c 4; q++) {\n    const u = q & 1 ? u1 : u0, v = q & 2 ? v1 : v0, X = F11 * u + F12 * v + TX, Y = F21 * u + F22 * v + TY;\n    (x0 = min(x0, X)), (x1 = max(x1, X)), (y0 = min(y0, Y)), (y1 = max(y1, Y));\n  }\n  const pad = PEN * 0.5 + 0.5, thin = min(1, (2 * rp + 1) / PEN), abx = c - a, aby = d - b, ab2 = abx * abx + aby * aby || 1e-9;\n  const xa = max(0, floor(x0 - pad)), xb = min(W - 1, ceil(x1 + pad)), ya = max(0, floor(y0 - pad)), yb = min(H - 1, ceil(y1 + pad));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - TX, dy = y - TY, u = I11 * dx + I12 * dy, v = I21 * dx + I22 * dy;\n      let dd, op = 1, ln = lace, cc = col;\n      if (k === 0) {\n        const t = cl(((u - a) * abx + (v - b) * aby) / ab2, 0, 1), qx = u - a - abx * t, qy = v - b - aby * t;\n        dd = sqrt(qx * qx + qy * qy) - mix(e, f, t);\n      } else if (k === 1) {\n        const pu = u - a, pv = v - b, lu = (pu * ce + pv * se) / c, lv = (pv * ce - pu * se) / d;\n        dd = (sqrt(lu * lu + lv * lv) - 1) * min(c, d);\n      } else if (k === 2) {\n        let md = 1e9, ins = false;\n        for (let i = 0, j = a.length - 2; i \u003c a.length; j = i, i += 2) {\n          const xi = a[i], yi = a[i + 1], ex = a[j] - xi, ey = a[j + 1] - yi;\n          if (yi > v !== a[j + 1] > v && u \u003c (ex * (v - yi)) / ey + xi) ins = !ins;\n          const s = cl(((u - xi) * ex + (v - yi) * ey) / (ex * ex + ey * ey), 0, 1), qx = u - xi - ex * s, qy = v - yi - ey * s;\n          md = min(md, qx * qx + qy * qy);\n        }\n        dd = ins ? -sqrt(md) : sqrt(md);\n      } else {\n        const vi = cl(v, 0, 79.9), v0i = floor(vi), hw = mix(LW[v0i], LW[v0i + 1], vi - v0i);\n        dd = max(abs(u) - hw, -v, v - 78);\n        if (dd \u003c 0.6) (op = leaf(u, v, hw)), (ln = LN), (cc = LC);\n      }\n      const dp = dd * MAG;\n      if (dp > pad) continue;\n      let cs = cl(0.5 - dp / PEN, 0, 1) * thin, cv = cl(0.5 - dp, 0, 1);\n      const i = y * W + x, o = i * 3;\n      if (!cc) {\n        const dep = lace \u003c 0 ? 0.9 * holes(u, v, -lace) : lace, s = 1 - cs * dep * min(1, HV * 1.3), sv = 1 - cv * dep;\n        (M[i] *= s), (A[i] *= sv), (C[o] *= sv), (C[o + 1] *= sv), (C[o + 2] *= sv);\n        continue;\n      }\n      if (ln) {\n        const h = holes(u, v, ln);\n        (cs *= 1 - h * HV), (cv *= 1 - h * 0.85);\n      }\n      cs *= op;\n      cv *= op;\n      if (cs > M[i]) M[i] = cs;\n      if (cv > 0) (C[o] += (cc[0] - C[o]) * cv), (C[o + 1] += (cc[1] - C[o + 1]) * cv), (C[o + 2] += (cc[2] - C[o + 2]) * cv), (A[i] += (1 - A[i]) * cv);\n    }\n}\nconst rod = (x0, y0, x1, y1, r0, r1, lace, col) => part(0, x0, y0, x1, y1, r0, r1, lace, col);\nconst ell = (cx, cy, rx, ry, turn, lace, col) => part(1, cx, cy, rx, ry, turn, 0, lace, col);\nconst poly = (pts, lace, col) => part(2, pts, 0, 0, 0, 0, 0, lace, col);\n\n// An arm on its two joints, the pointing hand, and the thin rod down to the dalang's fist.\nfunction arm(sx, sy, a1, a2, l1, l2, r1, r2, col) {\n  const ex = sx + l1 * sin(a1), ey = sy - l1 * cos(a1), hx = ex + l2 * sin(a1 + a2), hy = ey - l2 * cos(a1 + a2);\n  rod(sx, sy, ex, ey, r1, r1 * 0.85, 0, col), rod(ex, ey, hx, hy, r2 * 0.95, r2 * 0.75, 0, col);\n  rod(hx, hy, hx + 2.4 * sin(a1 + a2 + 0.25), hy - 2.4 * cos(a1 + a2 + 0.25), r2 * 0.75, 0.3, 0, col);\n  rod(ex - 0.2, ey, ex + 0.2, ey, r1 * 1.15, r1 * 1.15, 0, GOLD);\n  const gx = 2 - hx, gy = -14 - hy, l = sqrt(gx * gx + gy * gy) || 1, L = min(l, 30) / l;\n  rod(hx, hy, hx + gx * L, hy + gy * L, 0.42, 0.42, 0, BAMBOO);\n}\n\nfunction drawKnight(Q) {\n  rod(0.4, 34, 0.4, -16, 0.5, 0.45, 0, HORN);\n  arm(-4.6, 39.4, Q.b1, Q.b2, 12, 12.5, 1.0, 0.85, GOLD);\n  rod(-1, 17, -2.6, 1.5, 1.15, 0.95, 0, GOLD), rod(-2.6, 0.8, 1.2, 0.6, 0.8, 0.7, 0, GOLD);\n  rod(1.5, 17, 3.6, 1.5, 1.15, 0.95, 0, GOLD), rod(3.6, 0.8, 7.6, 0.6, 0.8, 0.7, 0, GOLD);\n  poly(K_KAIN, 2, INDIGO);\n  rod(3, 27, 5.4, 11, 0.8, 0.45, 0, RED);\n  poly(K_TORSO, 0, GOLD);\n  rod(-2.6, 29, 2.4, 29, 1.1, 1.1, 0, RED);\n  rod(-2.2, 33, 2, 33, 0.9, 0.9, -1, null);\n  rod(0.5, 40.5, 1.8, 44, 1.3, 1.1, 0, GOLD);\n  ell(-1.6, 46, 1.1, 2.6, -0.5, 1, GOLD);\n  ell(2.2, 47, 2.8, 3.6, 0.35, 0, GOLD);\n  poly(K_NOSE, 0, GOLD);\n  rod(1.5, 50.5, -2.5, 53.4, 1.6, 1.4, 3, HAIR), rod(-2.5, 53.4, -4.8, 50.2, 1.4, 0.6, 3, HAIR);\n  rod(-0.5, 50, 4.2, 50.6, 0.7, 0.6, 0, GOLD);\n  rod(3.6, 48, 5.1, 47.6, 0.38, 0.38, 0.9, null);\n  rod(-3.4, 38.6, 0.3, 36.6, 0.75, 0.75, -3, null), rod(0.3, 36.6, 3.4, 38.6, 0.75, 0.75, -3, null);\n  arm(3.6, 39.4, Q.a1, Q.a2, 12, 12.5, 1.0, 0.85, GOLD);\n}\n\nfunction drawOgre(Q) {\n  rod(0.4, 40, 0.4, -16, 0.55, 0.5, 0, HORN);\n  arm(-7.5, 46, Q.b1, Q.b2, 12.5, 13, 1.6, 1.3, RED);\n  rod(-3, 27, -7, 15, 2, 1.6, 0, RED), rod(-7, 15, -7.5, 2, 1.6, 1.3, 0, RED), rod(-8.1, 1, -3.6, 0.8, 1.1, 1, 0, RED);\n  rod(3, 27, 7, 15, 2, 1.6, 0, RED), rod(7, 15, 7.5, 2, 1.6, 1.3, 0, RED), rod(7.5, 1, 12, 0.8, 1.1, 1, 0, RED);\n  poly(O_KAIN, 2, TEAL);\n  rod(5, 29, 8, 10, 1, 0.6, 0, GOLD);\n  poly(O_TORSO, 0, RED), ell(3.6, 37, 4.8, 5.4, 0, 0, RED);\n  rod(-5.5, 45.6, 0.5, 42.5, 1, 1, -3, null), rod(0.5, 42.5, 6, 45.6, 1, 1, -3, null), ell(-1.5, 38, 3, 4, 0.2, -1, null);\n  rod(-6, 31.2, 6, 31.2, 1.2, 1.2, 0, GOLD);\n  ell(-3.5, 54, 5.5, 7.5, 0.35, 3, HAIR);\n  rod(-6, 59, -10.5, 63, 1.3, 0.3, 0, HAIR), rod(-8, 52, -13, 50, 1.3, 0.3, 0, HAIR), rod(-6.5, 47.5, -10.5, 43, 1.1, 0.3, 0, HAIR);\n  rod(0.5, 47, 2, 51, 2.5, 2.2, 0, RED);\n  ell(3.2, 55.3, 5, 4.4, 0, 0, RED), ell(9.3, 54.8, 2.4, 2.0, 0, 0, RED);\n  const j = Q.jaw, jx = 3.5 + 6.3 * cos(j), jy = 50.6 - 6.3 * sin(j);\n  rod(3.5, 50.6, jx, jy, 1.3, 1.0, 0, RED), rod(jx - 0.9, jy + 0.5, jx - 0.5, jy + 2.7, 0.55, 0.15, 0, IVORY);\n  rod(7.6, 51.3, 7.9, 49.3, 0.5, 0.15, 0, IVORY);\n  poly(O_CROWN, 1, GOLD);\n  ell(-0.5, 53, 1.5, 3, -0.4, 1, GOLD);\n  rod(6.3, 56.4, 6.3, 56.4, 1.5, 1.5, 0.9, null);\n  rod(6.6, 56.4, 6.6, 56.4, 0.6, 0.6, 0, HAIR);\n  arm(6, 46, Q.a1, Q.a2, 12.5, 13, 1.6, 1.3, RED);\n}\n\nfunction drawGunungan() {\n  rod(0, 6, 0, -12, 0.7, 0.6, 0, HORN);\n  part(3, 0, 0, 0, 0, 0, 0, 0, GOLD);\n}\n\n// A soft-edged ellipse painted over the frame, or added as glow.\nfunction blob(F, cx, cy, rx, ry, col, a, add) {\n  for (let y = max(0, floor(cy - ry - 1)); y \u003c= min(H - 1, ceil(cy + ry + 1)); y++)\n    for (let x = max(0, floor(cx - rx - 1)); x \u003c= min(W - 1, ceil(cx + rx + 1)); x++) {\n      const ex = (x - cx) / rx, ey = (y - cy) / ry, d = sqrt(ex * ex + ey * ey), o = (y * W + x) * 3;\n      const c = add ? max(0, 1 - d) ** 2 * a : cl((1 - d) * min(rx, ry) + 0.5, 0, 1) * a;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = add ? F[o + j] + col[j] * c : mix(F[o + j], col[j], c);\n    }\n}\n\n// The audience: heads and shoulders against the light, [x, top, rx, ry, kind]: bare, a peci cap, a headscarf.\nconst RIM = [1, 0.76, 0.48];\nconst HEADS = [[6, 98, 4.6, 5.6, 1], [19, 95, 5, 6, 0], [33, 99.5, 4.4, 5.4, 2], [46, 96, 5, 6.2, 1], [58.5, 98.5, 4.6, 5.6, 0]];\n// Their outline, as coverage in rows AUD and down: head, ears or scarf, neck, shoulders.\nfunction audience(HB, rt) {\n  HB.fill(0);\n  for (let j = 0; j \u003c 5; j++) {\n    const [hx, ht, rx, ry, kd] = HEADS[j], cx = hx + 0.6 * sin(rt * 0.45 + j * 1.7), top = ht + 0.4 * sin(rt * 0.7 + j * 2.3), cy = top + ry, sr = rx * 2.6;\n    for (let y = floor(top - 3); y \u003c H; y++)\n      for (let x = max(0, floor(cx - sr)); x \u003c= min(W - 1, ceil(cx + sr)); x++) {\n        const ax = abs(x - cx), ex = ax / (rx + (kd === 2 ? 0.8 : 0)), ey = (y - cy) / ry, sx = ax / sr, sy = (y - top - 2 * ry - 11) / 9;\n        let d = min((sqrt(ex * ex + ey * ey) - 1) * rx, (sqrt(sx * sx + sy * sy) - 1) * 9);\n        if (kd === 1) d = min(d, max(ax - rx * (0.86 + 0.04 * (y - top)), abs(y - top + 0.2) - 2.3));\n        if (kd === 2) d = min(d, max(ax - rx * (0.9 + (y - cy) * 0.09), cy - y));\n        else d = min(d, (sqrt((ax - rx) ** 2 + (y - cy - 0.6) ** 2) - 1.1) * 1.5, max(ax - rx * 0.62, cy - y));\n        const i = (y - AUD) * W + x;\n        HB[i] = max(HB[i], cl(0.5 - d, 0, 1));\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  (M = P.M), (A = P.A), (C = P.C), (LW = P.LW);\n  M.fill(0), A.fill(0), C.fill(0);\n  const D = 1 - 0.55 * P.lamp;\n  for (const S of P.SIMP) place(P, S, D), S.k ? drawKnight(S) : drawOgre(S);\n  if (P.K.on) place(P, P.K, D), drawKnight(P.K);\n  if (P.O.on) place(P, P.O, D), drawOgre(P.O);\n  if (P.G.on) place(P, P.G, D), drawGunungan();\n  const F = P.F, B = P.BG, PT = P.PT, I = P.I, LX = P.LX, LY = P.LY, R2 = (46 * D) ** 2, vw = sm(0, 1, P.view), rd = 0.12 * (1 - P.I) * P.fl, top = I * 228 * (0.95 + 0.05 / D);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = x - LX, dy = y - LY, fo = 1 / (1 + (dx * dx + dy * dy) / R2), pt = PT[i];\n      if (pt === 0) {\n        // The cloth: lamp light through cotton, the shadows on it; or from behind, the paint over the dim cloth.\n        const L = top * (0.2 + 0.8 * fo) * B[o], lr = L, lg = L * (0.7 + 0.18 * fo - rd), lb = L * (0.36 + 0.3 * fo - rd), s = 1 - 0.94 * M[i];\n        let r = lr * s, g = lg * s, b = lb * s;\n        if (vw > 0) {\n          const k = 0.3 * (1 - A[i]), lit = I * (0.45 + 0.5 * fo) * 250;\n          (r = mix(r, lr * k + C[o] * lit, vw)), (g = mix(g, lg * k + C[o + 1] * lit, vw)), (b = mix(b, lb * k + C[o + 2] * lit, vw));\n        }\n        (F[o] = r), (F[o + 1] = g), (F[o + 2] = b);\n      } else {\n        const s = I * (0.3 + 0.7 * fo) * 255 * (pt === 2 ? 1 - 0.85 * M[i] : 1);\n        (F[o] = B[o] * s), (F[o + 1] = B[o + 1] * s), (F[o + 2] = B[o + 2] * s);\n      }\n    }\n  // From the dalang's side the blencong hangs in view: a bronze garuda on a chain, the flame at its beak.\n  if (vw > 0.01) {\n    const bx = LX + 2, fl = P.flame / 7;\n    for (let y = 0; y \u003c 11; y++) blob(F, round(bx), y, 0.6, 0.6, y & 1 ? [90, 62, 30] : [150, 105, 50], vw);\n    blob(F, bx + 6, 10.5, 2.2, 3.2, [150, 96, 36], vw), blob(F, bx, 13, 5, 2.2, [170, 112, 42], vw), blob(F, bx - 4.2, 11, 1.4, 1.6, [200, 140, 60], vw);\n    blob(F, bx - 6.2, 12.8 - fl, 1.6 * fl, 6 * fl, [255, 140, 40], 0.5 * vw * I, 1), blob(F, bx - 6.2, 12.5 - fl * 0.6, 0.8, 1.9 * fl, [255, 240, 190], vw);\n  }\n  // The audience against the light, the rims of their heads lit by the screen.\n  const HB = P.HB;\n  audience(HB, P.rt);\n  for (let y = AUD + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = (y - AUD) * W + x, c = HB[k];\n      if (c \u003c= 0) continue;\n      const o = (y * W + x) * 3, q = (min(y, HEM - 1) * W + x) * 3, side = min(x > 0 ? HB[k - 1] : 1, x \u003c W - 1 ? HB[k + 1] : 1);\n      const rim = (1 - (HB[k - W] + HB[k - 2 * W]) / 2) * 0.6 + (1 - side) * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = F[o + j] * (1 - c) + c * (6 + rim * RIM[j] * max(70, F[q] * 0.9));\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"View","min":0,"max":1,"about":"At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower."},{"name":"Lamp","min":0,"max":1,"about":"How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs."},{"name":"Flicker","min":0,"max":1,"about":"How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften."}],"start":[0,2,0,0.06],"measures":{"motion":1.0562,"detail":0.0589,"edges":0.3798,"complexity":1.779,"coverage":0.627,"colour":0.1416,"drift":0.2084},"knobResponse":[0.2162,0.1484,0.1028,0.0596]},{"slug":"sheet-mask","title":"Sheet Mask","family":"cosmetic","round":35,"note":"세럼에 젖은 시트 마스크가 위에서 내려와 진줏빛 살결에 닿는 대로 맑은 청록으로 비치고, 공기가 갇힌 자리는 흰 공기 방울 여섯 개로 볼록 솟아요. 보이지 않는 손바닥이 4.2초 동안 위에서 아래로 쓸며 방울을 양옆 끝으로 밀어내면, 매끈해진 시트 위로 떠도는 빛 한 점이 섬유 결에 부서져 반짝여요. K3 은 방울을 20개까지 늘리고 크게 부풀리며, K1 은 색상환을 다 돌고 누르면 손바닥이 0.8초 만에 한 번에 눌러 펴요.","idea":"A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.","buttons":"K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Sheet Mask\n// Family:  cosmetic\n// Idea:    A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cellulose sheet mask smoothed onto the face; the reverse of Peel-Off\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1\n//\n// Knob 1: Hue. The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive.\n// Knob 2: Speed. At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower.\n// Knob 3: Bubbles. How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear.\n// Knob 4: Weave. The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze.\n// Buttons: K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x2c1b3c6d, 0x297a2d39);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca6b);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n// A generator of its own for the fabric, so turning Weave changes only the\n// fabric and never where the next round's blisters land.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the skin's contour under the sheet and the mottle of the fabric.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 13 + o * 7919) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// The fabric, one value an LED round 0.5, wrapping both ways: a cloudy\n// mottle and short fibres laid in it. Weave makes the fibres longer and\n// thicker and turns them towards the two directions of a woven gauze.\nfunction weave(P, k) {\n  const F = P.F, R = rng(90731), s = 1 + 3 * k, align = sm((k - 0.15) / 0.75), wd = 0.6 + 0.35 * (s - 1);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[y * W + x] = 0.5 * tap((x * 2) / s + 11, (y * 2) / s + 5);\n  const splat = (fx, fy, a) => {\n    const ix = floor(fx), iy = floor(fy), tx = fx - ix, ty = fy - iy;\n    const x0 = ((ix % W) + W) % W, x1 = (x0 + 1) % W, y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    F[y0 * W + x0] += a * (1 - tx) * (1 - ty);\n    F[y0 * W + x1] += a * tx * (1 - ty);\n    F[y1 * W + x0] += a * (1 - tx) * ty;\n    F[y1 * W + x1] += a * tx * ty;\n  };\n  const n = floor(1500 / s);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = R() * W, y0 = R() * H, len = (2.8 + 2.4 * R()) * s;\n    let th = R() * PI;\n    if (R() \u003c align) th = (R() \u003c 0.5 ? 0 : PI / 2) + (R() - 0.5) * 0.22;\n    const a = 0.3 + 0.7 * R(), dx = cos(th), dy = sin(th);\n    for (let w = -wd / 2; w \u003c= wd / 2 + 1e-6; w += 0.7)\n      for (let t = -len / 2; t \u003c= len / 2; t += 0.5) splat(x0 + dx * t - dy * w, y0 + dy * t + dx * w, a * 0.5);\n  }\n  let m = 0, q = 0;\n  for (let p = 0; p \u003c N; p++) m += F[p];\n  m /= N;\n  for (let p = 0; p \u003c N; p++) q += (F[p] - m) ** 2;\n  const sd = sqrt(q / N) || 1;\n  for (let p = 0; p \u003c N; p++) F[p] = cl(0.5 + (0.22 * (F[p] - m)) / sd, 0, 1);\n  P.weaveK = k;\n}\n\n// The round: the sheet comes down, settles, the palm smooths it, it shines,\n// it lifts off, the skin shows bare. Durations in seconds at Speed 2.\nconst DESC = 0, HOLD = 1, SMOOTH = 2, GLOSS = 3, LIFT = 4, BARE = 5;\nconst DUR = [2.6, 1.0, 4.2, 3.0, 1.4, 0.7];\n// The palm's edge is a bow, its middle A rows ahead of its ends.\nconst A = 22, MAXB = 20;\n\n// Where each blister of round n would be trapped, its size and shape. All\n// twenty are placed every round, so Bubbles only says how many of them are\n// trapped and how big they swell, and the first six stay where they were.\nfunction trap(P) {\n  const n = P.round, b = P.bub;\n  for (let i = 0; i \u003c MAXB; i++) {\n    let x = 0, y = 0, r = 0;\n    for (let tr = 0; tr \u003c 10; tr++) {\n      const s = n * 7919 + i * 131 + tr * 17;\n      x = 7 + 50 * hash(s);\n      y = 10 + 108 * hash(s + 1);\n      r = 3.6 + 4.6 * hash(s + 2) ** 1.5;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) if ((b[j].x - x) ** 2 + ((b[j].y - y) / 1.1) ** 2 \u003c ((b[j].r + r) * 1.2 + 2) ** 2) ok = false;\n      if (ok) break;\n    }\n    const e = 0.8 + 0.45 * hash(n * 7919 + i * 131 + 999);\n    Object.assign(b[i], { x, y, r, rx: r * e, ry: r / e, h: 0.4 + 0.2 * r, age: -1, alive: true, side: hash(n * 31 + i) \u003c 0.5 ? -1 : 1 });\n  }\n  // Wrinkles the sheet lays down with: a few long shallow ridges of air.\n  P.wr = [];\n  for (let i = 0; i \u003c 2; i++) {\n    // Down the sheet, as it hung, one in each half.\n    const s = n * 4447 + i * 59, th = PI / 2 + (hash(s) - 0.5) * 0.9;\n    P.wr.push({ x: 8 + 20 * hash(s + 1) + 28 * i, y: 30 + 68 * hash(s + 2), tx: cos(th), ty: sin(th), len: 14 + 12 * hash(s + 3) });\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  const bub = [];\n  for (let i = 0; i \u003c MAXB; i++) bub.push({});\n  params.s = {\n    c: 0, hue: 0, speed: 2, nb: 6, grow: 0, gs: 1, k4: 0.06, weaveK: -1,\n    ph: DESC, pt: 0, round: 0, front: -40, fast: false,\n    bub, wr: [], F: new Float32Array(N), Z: new Float32Array(N), AIR: new Float32Array(N), RIM: new Float32Array(N), SHD: new Float32Array(N),\n    SQ: new Float32Array(N), SL: new Float32Array(N),\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n  // The skin's pearl, laid once: where its sheen sits on the colour wheel\n  // and how light it is.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      params.s.SQ[y * W + x] = 0.5 * tap(x * 0.4 + 7, y * 0.4) + (x * 0.6 + y) / 170;\n      params.s.SL[y * W + x] = 0.86 + 0.03 * tap(x * 1.3 + 50, y * 1.3);\n    }\n  trap(params.s);\n}\n\n// The sheet's hem and the line where it has wet through to the skin, as it\n// comes down: the hem falls fast and slows, the wet line follows.\nconst hemAt = (q) => -4 + 140 * (1 - (1 - min(1, q / 0.65)) ** 2);\nconst wetAt = (q) => -10 + 146 * sm(q);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nb = floor(cl(k[2], 6, 20) + 0.5);\n  P.grow = (P.nb - 6) / 14;\n  P.gs = 1 + 0.4 * P.grow;\n  P.k4 = cl(k[3], 0, 1);\n  if (abs(P.k4 - P.weaveK) > 0.004) weave(P, P.k4);\n  const d = (d0 * P.speed) / 2;\n  P.c += d;\n  P.pt += d;\n\n  const tap1 = input.btnPressed && input.btnPressed[0];\n  if (tap1) {\n    if (P.ph === DESC || P.ph === HOLD) {\n      // Blisters the wet line had not reached yet are never trapped.\n      for (const b of P.bub) if (b.age \u003c 0) b.alive = false;\n      (P.ph = SMOOTH), (P.pt = 0), (P.fast = true), (P.front = -A - 10);\n    } else if (P.ph === SMOOTH) P.fast = true;\n    else if (P.ph === GLOSS) (P.ph = LIFT), (P.pt = 0);\n  }\n  // Blisters beyond the count asked for are never trapped; once the palm is\n  // on the sheet the set is what it is.\n  if (P.ph === DESC || P.ph === HOLD) for (let i = 0; i \u003c MAXB; i++) P.bub[i].alive = i \u003c P.nb;\n  if (P.ph === SMOOTH) {\n    P.front = P.fast ? P.front + d * 220 : -A - 10 + (H + 2 * A + 30) * sm(P.pt / DUR[SMOOTH]) ** 0.9;\n    // The palm pushes each blister it reaches ahead of it and out towards\n    // the nearer side, faster the further out it already is; squeezed, the\n    // blister flattens along the palm's edge and loses a little air.\n    for (const b of P.bub) {\n      if (!b.alive) continue;\n      const u = (b.x - 31.5) / 32, yf = P.front - A * u * u, top = b.y - b.ry * P.gs * 0.55;\n      if (yf > top) {\n        const dy = yf - top;\n        const side = abs(u) \u003c 0.08 ? b.side : u \u003c 0 ? -1 : 1;\n        b.y += dy;\n        b.x += side * dy * (0.9 + 1.8 * abs(u));\n        b.ry = max(b.r * 0.55, b.ry * (1 - 0.012 * dy));\n        b.rx = min(b.r * 1.5, b.rx * (1 + 0.008 * dy));\n        b.h *= 1 - 0.006 * dy;\n      }\n      if (b.x - b.rx * P.gs * 0.3 > W || b.x + b.rx * P.gs * 0.3 \u003c 0 || b.y - b.ry * P.gs > H) b.alive = false;\n    }\n    if (P.front >= H + A + 19.9) (P.ph = GLOSS), (P.pt = 0), (P.fast = false);\n  }\n  if (P.ph !== SMOOTH && P.pt >= DUR[P.ph]) {\n    P.pt = 0;\n    if (P.ph === BARE) {\n      P.round++;\n      trap(P);\n      P.ph = DESC;\n    } else P.ph = P.ph === HOLD ? ((P.front = -A - 10), SMOOTH) : P.ph + 1;\n  }\n  // A blister fills as the wet line passes it, with a little overshoot.\n  if (P.ph === DESC || P.ph === HOLD) {\n    const wl = P.ph === DESC ? wetAt(P.pt / DUR[DESC]) : 999;\n    for (const b of P.bub) if (b.alive && b.age \u003c 0 && wl > b.y - b.ry * P.gs * 0.3) b.age = 0;\n  }\n  for (const b of P.bub) if (b.age >= 0) b.age += d;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { F, Z, AIR, RIM, SHD, SQ, SL, tint } = P, c = P.c, ph = P.ph, q = P.pt / DUR[ph];\n  if (P.lastHue !== P.hue) {\n    // From coral through peach and butter to lime the tint is paler and the\n    // wet sheet lighter: at the aqua's depth those hues read tan and olive.\n    let h = P.hue + 0.5;\n    h -= floor(h);\n    P.warm = sm((h + 0.02) / 0.07) * (1 - sm((h - 0.21) / 0.09));\n    hsv(h, 0.56 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm;\n\n  // Where the sheet is: below its hem there is only skin while it comes\n  // down, and behind the wet line it has soaked through.\n  const hem = ph === DESC ? hemAt(q) : ph === BARE ? -99 : 999;\n  const wl = ph === DESC ? wetAt(q) : ph >= BARE ? -99 : 999;\n  // Lifting: in the first third air runs in under the sheet from its edges\n  // and it goes white, then it rises off and fades.\n  const air = ph === LIFT ? sm(q / 0.32) : 0, fade = ph === LIFT ? sm((q - 0.3) / 0.7) : ph === BARE ? 1 : 0;\n  const rise = ph === LIFT ? 9 * sm((q - 0.25) / 0.75) : 0;\n  const pressedAll = ph === GLOSS || ph === LIFT;\n  // A small lamp drifts over the panel; the wet sheet mirrors it as a spot\n  // that the fibres break into glints and the blisters bend round.\n  const Lx = 32 + 40 * sin(0.37 * c + 0.5), Ly = 64 + 62 * sin(0.23 * c + 2), Lz = 45;\n  const Ex = 32, Ey = 70, Ez = 240;\n\n  // Heights: the skin's soft contour, the fibres standing a little, the\n  // wrinkles of a sheet not yet pressed, and the blisters.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, fy = (((y + floor(rise)) % H) + H) % H;\n      Z[p] = 1.1 * tap(x * 0.5, y * 0.5 + 40) + (0.22 + 0.3 * P.k4) * (F[fy * W + x] - 0.5);\n      AIR[p] = 0;\n      RIM[p] = 0;\n      SHD[p] = 0;\n    }\n  if (ph \u003c= SMOOTH) {\n    for (const w of P.wr) {\n      const ex = abs(w.tx) * w.len + 8, ey = abs(w.ty) * w.len + 8;\n      for (let y = max(0, floor(w.y - ey)); y \u003c min(H, w.y + ey); y++) {\n        for (let x = max(0, floor(w.x - ex)); x \u003c min(W, w.x + ex); x++) {\n          const dx = x - w.x, dy = y - w.y, a = dx * w.tx + dy * w.ty, n = -dx * w.ty + dy * w.tx;\n          if (abs(n) > 7 || abs(a) > w.len) continue;\n          // The palm presses a wrinkle flat as it passes.\n          const u = (x - 31.5) / 32, flat = ph === SMOOTH ? 1 - sm((P.front - A * u * u - y) / 2.5) : 1;\n          const v = exp(-((n / 3) ** 2)) * sm((w.len - abs(a)) / 9) * flat;\n          const p = y * W + x;\n          Z[p] += 0.45 * v;\n          AIR[p] = max(AIR[p], 0.25 * v);\n        }\n      }\n    }\n    for (const b of P.bub) {\n      if (!b.alive || b.age \u003c 0) continue;\n      // Filling: a springy swell to full size in about a third of a second.\n      const f = 1 - exp(-b.age / 0.09) * cos(b.age * 11), br = 1 + (ph === HOLD ? 0.03 * sin(c * 4 + b.r) : 0);\n      const rx = b.rx * P.gs * min(1.08, f) * br, ry = b.ry * P.gs * min(1.08, f) * br, hh = b.h * P.gs * f, rm = min(rx, ry);\n      let tlx = Lx - b.x, tly = Ly - b.y;\n      const tl = 1 / (sqrt(tlx * tlx + tly * tly) || 1);\n      (tlx *= tl), (tly *= tl);\n      const x0 = max(0, floor(b.x - rx - 4)), x1 = min(W - 1, floor(b.x + rx + 4));\n      const y0 = max(0, floor(b.y - ry - 4)), y1 = min(H - 1, floor(b.y + ry + 4));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let x = x0; x \u003c= x1; x++) {\n          const ex = (x - b.x) / rx, ey = (y - b.y) / ry, dd = ex * ex + ey * ey, p = y * W + x, dr = sqrt(dd);\n          const face = dr > 0 ? (ex * tlx + ey * tly) / dr : 0;\n          if (dd \u003c 1) {\n            // A pillow, rounder on top than a dome.\n            Z[p] += hh * sm((1 - dd) / 0.75);\n            AIR[p] = max(AIR[p], sm((1 - dr) / 0.3));\n          }\n          // A bright rim where the sheet lifts off the skin, brightest on\n          // the lamp's side, and a soft shadow on the skin past the far side.\n          RIM[p] = max(RIM[p], exp(-((((dr - 0.92) * rm) / 0.8) ** 2)) * (0.3 + 0.7 * max(0, face)));\n          if (dr > 0.9) SHD[p] = max(SHD[p], exp(-((((dr - 1) * rm) / 1.8) ** 2)) * max(0, -face));\n        }\n    }\n  }\n\n  const tr = tint[0], tg = tint[1], tb = tint[2];\n  const wetV = 0.88 + 0.09 * warm, mixT = 0.55 - 0.08 * warm;\n  const front = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const zx = (Z[y * W + min(W - 1, x + 1)] - Z[y * W + max(0, x - 1)]) / 2;\n      const zy = (Z[min(H - 1, y + 1) * W + x] - Z[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - Z[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      (vx *= vi), (vy *= vi), (vz *= vi);\n      let hx = lx + vx, hy = ly + vy, hz = lz + vz;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const nh = max(0, (nx * hx + ny * hy + nz * hz) * hi);\n      // Shading against what a level sheet would get, so only slopes show.\n      const shade = cl(1 + (nx * lx + ny * ly + nz * lz - lz), 0.55, 1.35);\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and\n      // mint across the panel.\n      const qq = SQ[p] + c * 0.03, Ls = SL[p];\n      let sr = (0.98 + 0.03 * cos(6.283 * qq)) * Ls, sg = (0.85 + 0.03 * cos(6.283 * (qq - 0.33))) * Ls, sb = (0.79 + 0.04 * cos(6.283 * (qq - 0.67))) * Ls;\n\n      // How far the sheet has soaked onto the skin here, 0 (air under it)\n      // to 1 (wet through), and how far the palm has pressed it.\n      const u = (x - 31.5) / 32, ai = AIR[p];\n      let contact = 1, pressed = pressedAll ? 1 : 0;\n      if (ph === DESC) contact = sm((wl + 3 * sin(0.21 * x + 3 * c) + 2 * tap(x * 1.7, 9) - y) / 5);\n      if (ph \u003c= SMOOTH) {\n        const yf = front - A * u * u;\n        pressed = ph === SMOOTH ? sm((yf - y) / 2.5) : 0;\n        // Not yet pressed, the sheet only half touches in places.\n        const part = 0.76 - 0.26 * P.grow + (0.24 + 0.26 * P.grow) * sm(0.5 + 1.6 * tap(x * 1.2 + 90, y * 1.2 + 30));\n        contact *= part + (1 - part) * pressed;\n        contact *= 1 - ai * (1 - pressed);\n      }\n      if (ph === LIFT) {\n        const ed = (0.6 * min(x + 0.5, W - 0.5 - x, (y + 0.5) / 2, (H - 0.5 - y) / 2)) / 32 + 0.4 * sm(0.5 + 1.4 * tap(x * 0.9 + 3, y * 0.9 + 70));\n        contact *= 1 - sm((air * 1.1 - ed) / 0.08);\n      }\n      const fib = F[((((y + floor(rise)) % H) + H) % H) * W + x] - 0.5;\n\n      // Wet through: the skin seen through the serum's tint, darker as\n      // anything wet is. Over air: a hanging sheet is near white with its\n      // fibres showing; a blister is the soaked sheet lit from inside, a\n      // pale clear tint.\n      const fk = 1 + 0.6 * P.k4, at = 0.08 + 0.42 * ai, af = (0.93 + 0.02 * ai) * (1 + 0.18 * fk * fib);\n      const ar = (1 - at + tr * at) * af, ag = (1 - at + tg * at) * af, ab = (1 - at + tb * at) * af;\n      const wk = wetV * (1 - 0.06 * pressed) * (1 + 0.1 * fk * fib);\n      const wr = (sr * (1 - mixT) + tr * mixT) * wk, wg = (sg * (1 - mixT) + tg * mixT) * wk, wb = (sb * (1 - mixT) + tb * mixT) * wk;\n      let r = ar + (wr - ar) * contact, g = ag + (wg - ag) * contact, b = ab + (wb - ab) * contact;\n      const sd = 1 - 0.2 * SHD[p] * (1 - pressed);\n      r *= shade * sd;\n      g *= shade * sd;\n      b *= shade * sd;\n      // The sheen: broad and soft on the half-dry sheet, tighter and much\n      // brighter where the palm has pressed the serum through.\n      const ks = 0.1 + 0.22 * contact + 0.22 * pressed, shin = 12 + 20 * contact + 110 * pressed;\n      // The blister's skin is wet serum too: a small sharp spot on each one.\n      let sp = ks * nh ** shin + 0.1 * pressed * nh ** 24 + 0.55 * ai * nh ** 70 + 0.3 * RIM[p] * (1 - pressed);\n      // The palm's edge pushes a bead of serum ahead of it: a bright line.\n      if (ph === SMOOTH) {\n        const e = y - (front - A * u * u);\n        sp += (0.18 + 0.1 * fib) * exp(-(((e - 1) / 1.1) ** 2)) + 0.08 * exp(-(((e - 3) / 1.8) ** 2));\n      }\n      r += sp * (0.92 + 0.08 * tr);\n      g += sp * (0.92 + 0.08 * tg);\n      b += sp * (0.92 + 0.08 * tb);\n\n      // Over the skin: the sheet is there above its hem and not yet lifted.\n      let have = 1 - fade;\n      if (ph === DESC) {\n        const hy = hem + 1.5 * sin(0.15 * x + 1.3 * c);\n        have = sm(hy - y + 0.5);\n        // The hanging sheet: drape folds running down from the wet line,\n        // and its shadow on the skin below the hem.\n        if (y > wl && y \u003c hy) {\n          const fold = 0.045 * sin(x * 0.42 + 2.2 * sin(y * 0.05 + c) + 1.5 * tap(x * 0.5, y * 0.2)) * sm((y - wl) / 12);\n          r *= 1 + fold;\n          g *= 1 + fold;\n          b *= 1 + fold;\n        }\n        const sh = 1 - 0.28 * exp(-max(0, y - hy) / 3.5) * sm(y - hy + 0.5);\n        (sr *= sh), (sg *= sh), (sb *= sh);\n        // The cut edge of the fabric catches the light.\n        const ed = 0.22 * exp(-(((y - hy + 0.8) / 0.7) ** 2));\n        (r += ed), (g += ed), (b += ed);\n      }\n      if (ph === LIFT) {\n        // The lifted sheet's shadow on the skin, softening as it rises.\n        const sh = 1 - 0.22 * (1 - fade) * air;\n        (sr *= sh), (sg *= sh), (sb *= sh);\n      }\n      // Bare skin keeps a film of serum that shines and slowly soaks in.\n      const dew = ph === LIFT ? sm((q - 0.2) / 0.5) : ph === BARE ? 1 - 0.6 * q : 0;\n      if (dew > 0) {\n        const ds = dew * 0.4 * nh ** 70;\n        (sr += ds), (sg += ds), (sb += ds * 0.96);\n      }\n      r = sr + (r - sr) * have;\n      g = sg + (g - sg) * have;\n      b = sb + (b - sb) * have;\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-sheet-mask","type":"code","name":"sheet-mask","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sheet Mask\n// Family:  cosmetic\n// Idea:    A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cellulose sheet mask smoothed onto the face; the reverse of Peel-Off\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1\n//\n// Knob 1: Hue. The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive.\n// Knob 2: Speed. At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower.\n// Knob 3: Bubbles. How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear.\n// Knob 4: Weave. The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze.\n// Buttons: K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x2c1b3c6d, 0x297a2d39);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca6b);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n// A generator of its own for the fabric, so turning Weave changes only the\n// fabric and never where the next round's blisters land.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the skin's contour under the sheet and the mottle of the fabric.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 13 + o * 7919) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// The fabric, one value an LED round 0.5, wrapping both ways: a cloudy\n// mottle and short fibres laid in it. Weave makes the fibres longer and\n// thicker and turns them towards the two directions of a woven gauze.\nfunction weave(P, k) {\n  const F = P.F, R = rng(90731), s = 1 + 3 * k, align = sm((k - 0.15) / 0.75), wd = 0.6 + 0.35 * (s - 1);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[y * W + x] = 0.5 * tap((x * 2) / s + 11, (y * 2) / s + 5);\n  const splat = (fx, fy, a) => {\n    const ix = floor(fx), iy = floor(fy), tx = fx - ix, ty = fy - iy;\n    const x0 = ((ix % W) + W) % W, x1 = (x0 + 1) % W, y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    F[y0 * W + x0] += a * (1 - tx) * (1 - ty);\n    F[y0 * W + x1] += a * tx * (1 - ty);\n    F[y1 * W + x0] += a * (1 - tx) * ty;\n    F[y1 * W + x1] += a * tx * ty;\n  };\n  const n = floor(1500 / s);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = R() * W, y0 = R() * H, len = (2.8 + 2.4 * R()) * s;\n    let th = R() * PI;\n    if (R() \u003c align) th = (R() \u003c 0.5 ? 0 : PI / 2) + (R() - 0.5) * 0.22;\n    const a = 0.3 + 0.7 * R(), dx = cos(th), dy = sin(th);\n    for (let w = -wd / 2; w \u003c= wd / 2 + 1e-6; w += 0.7)\n      for (let t = -len / 2; t \u003c= len / 2; t += 0.5) splat(x0 + dx * t - dy * w, y0 + dy * t + dx * w, a * 0.5);\n  }\n  let m = 0, q = 0;\n  for (let p = 0; p \u003c N; p++) m += F[p];\n  m /= N;\n  for (let p = 0; p \u003c N; p++) q += (F[p] - m) ** 2;\n  const sd = sqrt(q / N) || 1;\n  for (let p = 0; p \u003c N; p++) F[p] = cl(0.5 + (0.22 * (F[p] - m)) / sd, 0, 1);\n  P.weaveK = k;\n}\n\n// The round: the sheet comes down, settles, the palm smooths it, it shines,\n// it lifts off, the skin shows bare. Durations in seconds at Speed 2.\nconst DESC = 0, HOLD = 1, SMOOTH = 2, GLOSS = 3, LIFT = 4, BARE = 5;\nconst DUR = [2.6, 1.0, 4.2, 3.0, 1.4, 0.7];\n// The palm's edge is a bow, its middle A rows ahead of its ends.\nconst A = 22, MAXB = 20;\n\n// Where each blister of round n would be trapped, its size and shape. All\n// twenty are placed every round, so Bubbles only says how many of them are\n// trapped and how big they swell, and the first six stay where they were.\nfunction trap(P) {\n  const n = P.round, b = P.bub;\n  for (let i = 0; i \u003c MAXB; i++) {\n    let x = 0, y = 0, r = 0;\n    for (let tr = 0; tr \u003c 10; tr++) {\n      const s = n * 7919 + i * 131 + tr * 17;\n      x = 7 + 50 * hash(s);\n      y = 10 + 108 * hash(s + 1);\n      r = 3.6 + 4.6 * hash(s + 2) ** 1.5;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) if ((b[j].x - x) ** 2 + ((b[j].y - y) / 1.1) ** 2 \u003c ((b[j].r + r) * 1.2 + 2) ** 2) ok = false;\n      if (ok) break;\n    }\n    const e = 0.8 + 0.45 * hash(n * 7919 + i * 131 + 999);\n    Object.assign(b[i], { x, y, r, rx: r * e, ry: r / e, h: 0.4 + 0.2 * r, age: -1, alive: true, side: hash(n * 31 + i) \u003c 0.5 ? -1 : 1 });\n  }\n  // Wrinkles the sheet lays down with: a few long shallow ridges of air.\n  P.wr = [];\n  for (let i = 0; i \u003c 2; i++) {\n    // Down the sheet, as it hung, one in each half.\n    const s = n * 4447 + i * 59, th = PI / 2 + (hash(s) - 0.5) * 0.9;\n    P.wr.push({ x: 8 + 20 * hash(s + 1) + 28 * i, y: 30 + 68 * hash(s + 2), tx: cos(th), ty: sin(th), len: 14 + 12 * hash(s + 3) });\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  const bub = [];\n  for (let i = 0; i \u003c MAXB; i++) bub.push({});\n  params.s = {\n    c: 0, hue: 0, speed: 2, nb: 6, grow: 0, gs: 1, k4: 0.06, weaveK: -1,\n    ph: DESC, pt: 0, round: 0, front: -40, fast: false,\n    bub, wr: [], F: new Float32Array(N), Z: new Float32Array(N), AIR: new Float32Array(N), RIM: new Float32Array(N), SHD: new Float32Array(N),\n    SQ: new Float32Array(N), SL: new Float32Array(N),\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n  // The skin's pearl, laid once: where its sheen sits on the colour wheel\n  // and how light it is.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      params.s.SQ[y * W + x] = 0.5 * tap(x * 0.4 + 7, y * 0.4) + (x * 0.6 + y) / 170;\n      params.s.SL[y * W + x] = 0.86 + 0.03 * tap(x * 1.3 + 50, y * 1.3);\n    }\n  trap(params.s);\n}\n\n// The sheet's hem and the line where it has wet through to the skin, as it\n// comes down: the hem falls fast and slows, the wet line follows.\nconst hemAt = (q) => -4 + 140 * (1 - (1 - min(1, q / 0.65)) ** 2);\nconst wetAt = (q) => -10 + 146 * sm(q);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nb = floor(cl(k[2], 6, 20) + 0.5);\n  P.grow = (P.nb - 6) / 14;\n  P.gs = 1 + 0.4 * P.grow;\n  P.k4 = cl(k[3], 0, 1);\n  if (abs(P.k4 - P.weaveK) > 0.004) weave(P, P.k4);\n  const d = (d0 * P.speed) / 2;\n  P.c += d;\n  P.pt += d;\n\n  const tap1 = input.btnPressed && input.btnPressed[0];\n  if (tap1) {\n    if (P.ph === DESC || P.ph === HOLD) {\n      // Blisters the wet line had not reached yet are never trapped.\n      for (const b of P.bub) if (b.age \u003c 0) b.alive = false;\n      (P.ph = SMOOTH), (P.pt = 0), (P.fast = true), (P.front = -A - 10);\n    } else if (P.ph === SMOOTH) P.fast = true;\n    else if (P.ph === GLOSS) (P.ph = LIFT), (P.pt = 0);\n  }\n  // Blisters beyond the count asked for are never trapped; once the palm is\n  // on the sheet the set is what it is.\n  if (P.ph === DESC || P.ph === HOLD) for (let i = 0; i \u003c MAXB; i++) P.bub[i].alive = i \u003c P.nb;\n  if (P.ph === SMOOTH) {\n    P.front = P.fast ? P.front + d * 220 : -A - 10 + (H + 2 * A + 30) * sm(P.pt / DUR[SMOOTH]) ** 0.9;\n    // The palm pushes each blister it reaches ahead of it and out towards\n    // the nearer side, faster the further out it already is; squeezed, the\n    // blister flattens along the palm's edge and loses a little air.\n    for (const b of P.bub) {\n      if (!b.alive) continue;\n      const u = (b.x - 31.5) / 32, yf = P.front - A * u * u, top = b.y - b.ry * P.gs * 0.55;\n      if (yf > top) {\n        const dy = yf - top;\n        const side = abs(u) \u003c 0.08 ? b.side : u \u003c 0 ? -1 : 1;\n        b.y += dy;\n        b.x += side * dy * (0.9 + 1.8 * abs(u));\n        b.ry = max(b.r * 0.55, b.ry * (1 - 0.012 * dy));\n        b.rx = min(b.r * 1.5, b.rx * (1 + 0.008 * dy));\n        b.h *= 1 - 0.006 * dy;\n      }\n      if (b.x - b.rx * P.gs * 0.3 > W || b.x + b.rx * P.gs * 0.3 \u003c 0 || b.y - b.ry * P.gs > H) b.alive = false;\n    }\n    if (P.front >= H + A + 19.9) (P.ph = GLOSS), (P.pt = 0), (P.fast = false);\n  }\n  if (P.ph !== SMOOTH && P.pt >= DUR[P.ph]) {\n    P.pt = 0;\n    if (P.ph === BARE) {\n      P.round++;\n      trap(P);\n      P.ph = DESC;\n    } else P.ph = P.ph === HOLD ? ((P.front = -A - 10), SMOOTH) : P.ph + 1;\n  }\n  // A blister fills as the wet line passes it, with a little overshoot.\n  if (P.ph === DESC || P.ph === HOLD) {\n    const wl = P.ph === DESC ? wetAt(P.pt / DUR[DESC]) : 999;\n    for (const b of P.bub) if (b.alive && b.age \u003c 0 && wl > b.y - b.ry * P.gs * 0.3) b.age = 0;\n  }\n  for (const b of P.bub) if (b.age >= 0) b.age += d;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { F, Z, AIR, RIM, SHD, SQ, SL, tint } = P, c = P.c, ph = P.ph, q = P.pt / DUR[ph];\n  if (P.lastHue !== P.hue) {\n    // From coral through peach and butter to lime the tint is paler and the\n    // wet sheet lighter: at the aqua's depth those hues read tan and olive.\n    let h = P.hue + 0.5;\n    h -= floor(h);\n    P.warm = sm((h + 0.02) / 0.07) * (1 - sm((h - 0.21) / 0.09));\n    hsv(h, 0.56 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm;\n\n  // Where the sheet is: below its hem there is only skin while it comes\n  // down, and behind the wet line it has soaked through.\n  const hem = ph === DESC ? hemAt(q) : ph === BARE ? -99 : 999;\n  const wl = ph === DESC ? wetAt(q) : ph >= BARE ? -99 : 999;\n  // Lifting: in the first third air runs in under the sheet from its edges\n  // and it goes white, then it rises off and fades.\n  const air = ph === LIFT ? sm(q / 0.32) : 0, fade = ph === LIFT ? sm((q - 0.3) / 0.7) : ph === BARE ? 1 : 0;\n  const rise = ph === LIFT ? 9 * sm((q - 0.25) / 0.75) : 0;\n  const pressedAll = ph === GLOSS || ph === LIFT;\n  // A small lamp drifts over the panel; the wet sheet mirrors it as a spot\n  // that the fibres break into glints and the blisters bend round.\n  const Lx = 32 + 40 * sin(0.37 * c + 0.5), Ly = 64 + 62 * sin(0.23 * c + 2), Lz = 45;\n  const Ex = 32, Ey = 70, Ez = 240;\n\n  // Heights: the skin's soft contour, the fibres standing a little, the\n  // wrinkles of a sheet not yet pressed, and the blisters.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, fy = (((y + floor(rise)) % H) + H) % H;\n      Z[p] = 1.1 * tap(x * 0.5, y * 0.5 + 40) + (0.22 + 0.3 * P.k4) * (F[fy * W + x] - 0.5);\n      AIR[p] = 0;\n      RIM[p] = 0;\n      SHD[p] = 0;\n    }\n  if (ph \u003c= SMOOTH) {\n    for (const w of P.wr) {\n      const ex = abs(w.tx) * w.len + 8, ey = abs(w.ty) * w.len + 8;\n      for (let y = max(0, floor(w.y - ey)); y \u003c min(H, w.y + ey); y++) {\n        for (let x = max(0, floor(w.x - ex)); x \u003c min(W, w.x + ex); x++) {\n          const dx = x - w.x, dy = y - w.y, a = dx * w.tx + dy * w.ty, n = -dx * w.ty + dy * w.tx;\n          if (abs(n) > 7 || abs(a) > w.len) continue;\n          // The palm presses a wrinkle flat as it passes.\n          const u = (x - 31.5) / 32, flat = ph === SMOOTH ? 1 - sm((P.front - A * u * u - y) / 2.5) : 1;\n          const v = exp(-((n / 3) ** 2)) * sm((w.len - abs(a)) / 9) * flat;\n          const p = y * W + x;\n          Z[p] += 0.45 * v;\n          AIR[p] = max(AIR[p], 0.25 * v);\n        }\n      }\n    }\n    for (const b of P.bub) {\n      if (!b.alive || b.age \u003c 0) continue;\n      // Filling: a springy swell to full size in about a third of a second.\n      const f = 1 - exp(-b.age / 0.09) * cos(b.age * 11), br = 1 + (ph === HOLD ? 0.03 * sin(c * 4 + b.r) : 0);\n      const rx = b.rx * P.gs * min(1.08, f) * br, ry = b.ry * P.gs * min(1.08, f) * br, hh = b.h * P.gs * f, rm = min(rx, ry);\n      let tlx = Lx - b.x, tly = Ly - b.y;\n      const tl = 1 / (sqrt(tlx * tlx + tly * tly) || 1);\n      (tlx *= tl), (tly *= tl);\n      const x0 = max(0, floor(b.x - rx - 4)), x1 = min(W - 1, floor(b.x + rx + 4));\n      const y0 = max(0, floor(b.y - ry - 4)), y1 = min(H - 1, floor(b.y + ry + 4));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let x = x0; x \u003c= x1; x++) {\n          const ex = (x - b.x) / rx, ey = (y - b.y) / ry, dd = ex * ex + ey * ey, p = y * W + x, dr = sqrt(dd);\n          const face = dr > 0 ? (ex * tlx + ey * tly) / dr : 0;\n          if (dd \u003c 1) {\n            // A pillow, rounder on top than a dome.\n            Z[p] += hh * sm((1 - dd) / 0.75);\n            AIR[p] = max(AIR[p], sm((1 - dr) / 0.3));\n          }\n          // A bright rim where the sheet lifts off the skin, brightest on\n          // the lamp's side, and a soft shadow on the skin past the far side.\n          RIM[p] = max(RIM[p], exp(-((((dr - 0.92) * rm) / 0.8) ** 2)) * (0.3 + 0.7 * max(0, face)));\n          if (dr > 0.9) SHD[p] = max(SHD[p], exp(-((((dr - 1) * rm) / 1.8) ** 2)) * max(0, -face));\n        }\n    }\n  }\n\n  const tr = tint[0], tg = tint[1], tb = tint[2];\n  const wetV = 0.88 + 0.09 * warm, mixT = 0.55 - 0.08 * warm;\n  const front = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const zx = (Z[y * W + min(W - 1, x + 1)] - Z[y * W + max(0, x - 1)]) / 2;\n      const zy = (Z[min(H - 1, y + 1) * W + x] - Z[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - Z[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      (vx *= vi), (vy *= vi), (vz *= vi);\n      let hx = lx + vx, hy = ly + vy, hz = lz + vz;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const nh = max(0, (nx * hx + ny * hy + nz * hz) * hi);\n      // Shading against what a level sheet would get, so only slopes show.\n      const shade = cl(1 + (nx * lx + ny * ly + nz * lz - lz), 0.55, 1.35);\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and\n      // mint across the panel.\n      const qq = SQ[p] + c * 0.03, Ls = SL[p];\n      let sr = (0.98 + 0.03 * cos(6.283 * qq)) * Ls, sg = (0.85 + 0.03 * cos(6.283 * (qq - 0.33))) * Ls, sb = (0.79 + 0.04 * cos(6.283 * (qq - 0.67))) * Ls;\n\n      // How far the sheet has soaked onto the skin here, 0 (air under it)\n      // to 1 (wet through), and how far the palm has pressed it.\n      const u = (x - 31.5) / 32, ai = AIR[p];\n      let contact = 1, pressed = pressedAll ? 1 : 0;\n      if (ph === DESC) contact = sm((wl + 3 * sin(0.21 * x + 3 * c) + 2 * tap(x * 1.7, 9) - y) / 5);\n      if (ph \u003c= SMOOTH) {\n        const yf = front - A * u * u;\n        pressed = ph === SMOOTH ? sm((yf - y) / 2.5) : 0;\n        // Not yet pressed, the sheet only half touches in places.\n        const part = 0.76 - 0.26 * P.grow + (0.24 + 0.26 * P.grow) * sm(0.5 + 1.6 * tap(x * 1.2 + 90, y * 1.2 + 30));\n        contact *= part + (1 - part) * pressed;\n        contact *= 1 - ai * (1 - pressed);\n      }\n      if (ph === LIFT) {\n        const ed = (0.6 * min(x + 0.5, W - 0.5 - x, (y + 0.5) / 2, (H - 0.5 - y) / 2)) / 32 + 0.4 * sm(0.5 + 1.4 * tap(x * 0.9 + 3, y * 0.9 + 70));\n        contact *= 1 - sm((air * 1.1 - ed) / 0.08);\n      }\n      const fib = F[((((y + floor(rise)) % H) + H) % H) * W + x] - 0.5;\n\n      // Wet through: the skin seen through the serum's tint, darker as\n      // anything wet is. Over air: a hanging sheet is near white with its\n      // fibres showing; a blister is the soaked sheet lit from inside, a\n      // pale clear tint.\n      const fk = 1 + 0.6 * P.k4, at = 0.08 + 0.42 * ai, af = (0.93 + 0.02 * ai) * (1 + 0.18 * fk * fib);\n      const ar = (1 - at + tr * at) * af, ag = (1 - at + tg * at) * af, ab = (1 - at + tb * at) * af;\n      const wk = wetV * (1 - 0.06 * pressed) * (1 + 0.1 * fk * fib);\n      const wr = (sr * (1 - mixT) + tr * mixT) * wk, wg = (sg * (1 - mixT) + tg * mixT) * wk, wb = (sb * (1 - mixT) + tb * mixT) * wk;\n      let r = ar + (wr - ar) * contact, g = ag + (wg - ag) * contact, b = ab + (wb - ab) * contact;\n      const sd = 1 - 0.2 * SHD[p] * (1 - pressed);\n      r *= shade * sd;\n      g *= shade * sd;\n      b *= shade * sd;\n      // The sheen: broad and soft on the half-dry sheet, tighter and much\n      // brighter where the palm has pressed the serum through.\n      const ks = 0.1 + 0.22 * contact + 0.22 * pressed, shin = 12 + 20 * contact + 110 * pressed;\n      // The blister's skin is wet serum too: a small sharp spot on each one.\n      let sp = ks * nh ** shin + 0.1 * pressed * nh ** 24 + 0.55 * ai * nh ** 70 + 0.3 * RIM[p] * (1 - pressed);\n      // The palm's edge pushes a bead of serum ahead of it: a bright line.\n      if (ph === SMOOTH) {\n        const e = y - (front - A * u * u);\n        sp += (0.18 + 0.1 * fib) * exp(-(((e - 1) / 1.1) ** 2)) + 0.08 * exp(-(((e - 3) / 1.8) ** 2));\n      }\n      r += sp * (0.92 + 0.08 * tr);\n      g += sp * (0.92 + 0.08 * tg);\n      b += sp * (0.92 + 0.08 * tb);\n\n      // Over the skin: the sheet is there above its hem and not yet lifted.\n      let have = 1 - fade;\n      if (ph === DESC) {\n        const hy = hem + 1.5 * sin(0.15 * x + 1.3 * c);\n        have = sm(hy - y + 0.5);\n        // The hanging sheet: drape folds running down from the wet line,\n        // and its shadow on the skin below the hem.\n        if (y > wl && y \u003c hy) {\n          const fold = 0.045 * sin(x * 0.42 + 2.2 * sin(y * 0.05 + c) + 1.5 * tap(x * 0.5, y * 0.2)) * sm((y - wl) / 12);\n          r *= 1 + fold;\n          g *= 1 + fold;\n          b *= 1 + fold;\n        }\n        const sh = 1 - 0.28 * exp(-max(0, y - hy) / 3.5) * sm(y - hy + 0.5);\n        (sr *= sh), (sg *= sh), (sb *= sh);\n        // The cut edge of the fabric catches the light.\n        const ed = 0.22 * exp(-(((y - hy + 0.8) / 0.7) ** 2));\n        (r += ed), (g += ed), (b += ed);\n      }\n      if (ph === LIFT) {\n        // The lifted sheet's shadow on the skin, softening as it rises.\n        const sh = 1 - 0.22 * (1 - fade) * air;\n        (sr *= sh), (sg *= sh), (sb *= sh);\n      }\n      // Bare skin keeps a film of serum that shines and slowly soaks in.\n      const dew = ph === LIFT ? sm((q - 0.2) / 0.5) : ph === BARE ? 1 - 0.6 * q : 0;\n      if (dew > 0) {\n        const ds = dew * 0.4 * nh ** 70;\n        (sr += ds), (sg += ds), (sb += ds * 0.96);\n      }\n      r = sr + (r - sr) * have;\n      g = sg + (g - sg) * have;\n      b = sb + (b - sb) * have;\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower."},{"name":"Bubbles","min":6,"max":20,"about":"How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear."},{"name":"Weave","min":0,"max":1,"about":"The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze."}],"start":[0,2,6,0.06],"measures":{"motion":0.0942,"detail":0.0264,"edges":0.0175,"complexity":2.3054,"coverage":1,"colour":0.109,"drift":0.1087},"knobResponse":[0.2121,0.1814,0.0787,0.0461]},{"slug":"shimmer-oil","title":"Shimmer Oil","family":"cosmetic","round":36,"note":"보이지 않는 손끝이 마이카가 든 베리빛 바디 오일을 저으면, 납작한 조각들이 늘어난 자리에서는 일어서고 돌기만 하는 자리에서는 누운 채라 소용돌이 자체가 진주빛 실크 결로 보여요. K3 은 젓는 힘이라 1 에서는 소용돌이가 서로 말려 들며 결이 촘촘히 접혀요. K1 을 누르면 다른 손끝이 내려와 20 LED 쯤의 나선을 감아요.","idea":"An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.","buttons":"K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.","code":"// ===== Patternflow pattern =====\n// Title:   Shimmer Oil\n// Family:  cosmetic\n// Idea:    An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after shimmer body oils and Paul Matisse's Kalliroscope rheoscopic fluid (1960s), with the flakes turned by Jeffery's equation (G. B. Jeffery, 1922)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1\n//\n// Knob 1: Hue. Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Stir. How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls.\n// Knob 4: Mica. How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white.\n// Buttons: K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.\n\nconst W = 64, H = 128;\nconst { floor, min, sqrt, sin, cos, exp, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The flow lives on a grid of NX x NY cells, HS LEDs each, with free-slip\n// walls round the panel. It is solved as vorticity and stream function: the\n// stream function vanishes on the walls, so a sine series holds it exactly,\n// and the Poisson equation is a division in that series.\nconst NX = 24, NY = 48, HS = W / NX, MX = NX - 1, MY = NY - 1, GW = NX + 1, GN = GW * (NY + 1);\nconst SX = new Float32Array(MX * MX), SY = new Float32Array(MY * MY), LAM = new Float32Array(MX * MY);\nfor (let k = 1; k \u003c= MX; k++) for (let i = 1; i \u003c= MX; i++) SX[(k - 1) * MX + i - 1] = sin((PI * k * i) / NX);\nfor (let k = 1; k \u003c= MY; k++) for (let i = 1; i \u003c= MY; i++) SY[(k - 1) * MY + i - 1] = sin((PI * k * i) / NY);\n// Eigenvalues of the five-point Laplacian, so the stream function's\n// finite-difference Laplacian is exactly minus the vorticity.\nfor (let l = 1; l \u003c= MY; l++)\n  for (let k = 1; k \u003c= MX; k++)\n    LAM[(l - 1) * MX + k - 1] = (4 / (HS * HS)) * (sin((PI * k) / (2 * NX)) ** 2 + sin((PI * l) / (2 * NY)) ** 2);\n\n// Two-dimensional sine transform of the interior nodes (MY rows of MX).\nfunction dst2(src, dst, tmp) {\n  for (let j = 0; j \u003c MY; j++) {\n    const r = j * MX;\n    for (let k = 0; k \u003c MX; k++) {\n      const s = k * MX;\n      let a = 0;\n      for (let i = 0; i \u003c MX; i++) a += src[r + i] * SX[s + i];\n      tmp[r + k] = a;\n    }\n  }\n  for (let l = 0; l \u003c MY; l++) {\n    const s = l * MY, r = l * MX;\n    for (let k = 0; k \u003c MX; k++) dst[r + k] = 0;\n    for (let j = 0; j \u003c MY; j++) {\n      const c = SY[s + j], q = j * MX;\n      if (c === 0) continue;\n      for (let k = 0; k \u003c MX; k++) dst[r + k] += c * tmp[q + k];\n    }\n  }\n}\n\n// Flow constants at Speed 2: viscosity in LED^2 a second, skin friction a\n// second, and how fast the flakes settle back toward lying in the film, a\n// second.\nconst NU = 0.6, MU = 0.12, SETTLE = 0.24;\n// The largest traceless part of M: eigenvalues 36 and 1/36, a stretch of 6.\nconst DMAX = (36 - 1 / 36) / 2;\n// Flakes: a parcel of them to each LED, and one parcel in 25 also carries a\n// single large flake that glints. A flake's normal m turns with the flow as\n// A m, A = F^-T for the deformation F since the flakes lay down. The flakes\n// at rest lean E0 (about 14 degrees) every way, so a parcel's spread of\n// normals is set by M = A A^T alone (the turn left in A only spins an even\n// spread) and M is all a parcel carries. With M's eigenvalues s^2 and 1/s^2\n// and its axis e1 the flakes lie at E0 (s cos phi e1 + sin phi e2 / s), so\n// how they catch a light hangs on the stretch s and, for a light from one\n// side, on the angle between that side and e1.\nconst NP = W * H;\n// The tables hold the averages over phi, for s from 1 to 12 laid out on\n// 1 - 1/s.\nconst E0 = 0.25, NS = 96, NC = 33, SMAX = 12, EL = 0.95;\n// Soft front light, ring light, strip light by angle.\nconst RF = new Float32Array(NS), RR = new Float32Array(NS), RS = new Float32Array(NS * NC);\n{\n  const NPHI = 48, se = sin(EL), ce = cos(EL), cd = [], sd = [];\n  for (let j = 0; j \u003c NC; j++) {\n    const dl = 0.5 * Math.acos(-1 + (2 * j) / (NC - 1));\n    cd.push(se * cos(dl));\n    sd.push(se * sin(dl));\n  }\n  for (let i = 0; i \u003c NS; i++) {\n    const sg = 1 / (1 - (i / (NS - 1)) * (1 - 1 / SMAX));\n    let f = 0, r = 0;\n    for (let k = 0; k \u003c NPHI; k++) {\n      const ph = (PI * (k + 0.5)) / NPHI, m0 = E0 * sg * cos(ph), m1 = (E0 / sg) * sin(ph), inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const i2 = inv * inv, i4 = i2 * i2, i8 = i4 * i4;\n      f += i8 * i8 * i8;\n      // Flakes standing at about 45 degrees catch a low ring of light from\n      // every side; flat ones and edge-on ones miss most of it.\n      const rq = (inv - 0.707) * 3.5, rb = rq * rq \u003c 1 ? 1 - rq * rq : 0;\n      r += 0.05 + 0.95 * rb * rb;\n      for (let j = 0; j \u003c NC; j++) {\n        const d = (m0 * cd[j] + m1 * sd[j] + ce) * inv, d2 = d * d, d4 = d2 * d2;\n        RS[i * NC + j] += (d4 * d4) / NPHI;\n      }\n    }\n    RF[i] = f / NPHI;\n    RR[i] = r / NPHI;\n  }\n}\n\n// The fingertip's push, its radius in LEDs.\nconst SIG = 6.5;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, stir: 0, mica: 0.06, t: 0, fa: 0, par: 0, mdt: [0, 0], warm: false,\n    w: new Float32Array(GN), w2: new Float32Array(GN), psi: new Float32Array(GN),\n    u: new Float32Array(GN), v: new Float32Array(GN), ux: new Float32Array(GN), uy: new Float32Array(GN), vx: new Float32Array(GN),\n    a: new Float32Array(MX * MY), b: new Float32Array(MX * MY), c: new Float32Array(MX * MY), d: new Float32Array(MX * MY), q: new Float32Array((GW + 2) * (NY + 3)),\n    px: new Float32Array(NP), py: new Float32Array(NP),\n    M0: new Float32Array(NP), M1: new Float32Array(NP), M2: new Float32Array(NP),\n    gx: new Float32Array(NP), gy: new Float32Array(NP),\n    kp: new Float32Array(NP), cnt: new Int32Array(W * H), own: new Int32Array(W * H), gl: new Float32Array(W * H), lit: new Float32Array(W * H), wt: new Float32Array(W * H), tmp: new Float32Array(W * H),\n    swirl: null, c0: [0, 0, 0], c1: [0, 0, 0], c2: [0, 0, 0],\n  };\n  // Parcels start one to each LED, their flakes at rest.\n  for (let p = 0; p \u003c NP; p++) {\n    S.px[p] = (p % W) + random();\n    S.py[p] = floor(p / W) + random();\n    S.M0[p] = S.M2[p] = 1;\n    S.kp[p] = 0.8 + 0.4 * random();\n    if (random() \u003c 0.04) {\n      const a = random() * 2 * PI, r = E0 * (0.4 + 0.6 * random());\n      S.gx[p] = r * cos(a);\n      S.gy[p] = r * sin(a) + 1e-6;\n    }\n  }\n  // And the oil has been swirled before: a dozen soft eddies of either sign.\n  for (let n = 0; n \u003c 12; n++) {\n    const cx = 8 + random() * (W - 16), cy = 8 + random() * (H - 16), r = 6 + random() * 8, k = (random() \u003c 0.5 ? -1 : 1) * (2 + 3 * random());\n    for (let j = 1; j \u003c NY; j++)\n      for (let i = 1; i \u003c NX; i++) {\n        const dx = i * HS - cx, dy = j * HS - cy;\n        S.w[j * GW + i] += k * exp(-(dx * dx + dy * dy) / (r * r));\n      }\n  }\n  params.s = S;\n}\n\n// Where the fingertip is at time t: a slow loop that wanders over the panel.\nfunction finger(t) {\n  return [32 + 19 * sin(t * 0.7) + 4 * sin(t * 1.9), 64 + 44 * sin(t * 0.47 + 0.6) + 8 * cos(t * 1.3)];\n}\n\n// One step of the flow: carry the vorticity, push it with the fingertip,\n// let it decay, and solve for the stream function, velocity and its gradient.\nfunction flowStep(S, dt) {\n  const { w, w2, psi, u, v, ux, uy, vx, a, b, c } = S;\n  const force = 16 * (0.45 + 0.5 * S.stir + 1.3 * S.stir * S.stir);\n  const [fx, fy] = finger(S.t), [gx, gy] = finger(S.t + 0.02);\n  const vxs = (gx - fx) / 0.02, vys = (gy - fy) / 0.02;\n  const fr = exp(-MU * dt), sw = S.swirl;\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      // Back along the flow, in grid units.\n      let X = i - (u[g] * dt) / HS, Y = j - (v[g] * dt) / HS;\n      X = X \u003c 0 ? 0 : X > NX - 1e-4 ? NX - 1e-4 : X;\n      Y = Y \u003c 0 ? 0 : Y > NY - 1e-4 ? NY - 1e-4 : Y;\n      const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, q = j0 * GW + i0;\n      let val = (w[q] * (1 - tx) + w[q + 1] * tx) * (1 - ty) + (w[q + GW] * (1 - tx) + w[q + GW + 1] * tx) * ty;\n      // The fingertip drags the oil along with it: the curl of a force along\n      // its velocity, spread over a Gaussian of radius SIG.\n      const dx = i * HS - fx, dy = j * HS - fy, r2 = (dx * dx + dy * dy) / (SIG * SIG);\n      if (r2 \u003c 9) val += ((force * dt * -2) / (SIG * SIG)) * exp(-r2) * (vys * dx - vxs * dy);\n      if (sw) {\n        const ex = i * HS - sw.x, ey = j * HS - sw.y, e2 = (ex * ex + ey * ey) / (sw.r * sw.r);\n        if (e2 \u003c 9) val += sw.k * dt * exp(-e2) * (1 - 0.6 * e2);\n      }\n      w2[g] = val * fr;\n    }\n  if (sw && (sw.left -= dt) \u003c= 0) S.swirl = null;\n  // Viscosity, one explicit step of the five-point Laplacian (the vorticity\n  // is 0 on the walls).\n  const nu = (NU * dt) / (HS * HS);\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      w[g] = w2[g] + nu * (w2[g - 1] + w2[g + 1] + w2[g - GW] + w2[g + GW] - 4 * w2[g]);\n      a[(j - 1) * MX + i - 1] = w[g];\n    }\n  // The stream function: a division in the sine series.\n  dst2(a, b, c);\n  const norm = 4 / (NX * NY);\n  for (let n = 0; n \u003c MX * MY; n++) b[n] *= norm / LAM[n];\n  dst2(b, c, S.d);\n  for (let j = 1; j \u003c NY; j++) for (let i = 1; i \u003c NX; i++) psi[j * GW + i] = c[(j - 1) * MX + i - 1];\n  // Velocity u = dpsi/dy, v = -dpsi/dx and its gradient, by central\n  // differences; past a wall the stream function is mirrored with its sign\n  // turned over, as the sine series has it.\n  const Q = S.q, QW = GW + 2;\n  for (let j = 0; j \u003c= NY; j++) {\n    const r = (j + 1) * QW + 1;\n    for (let i = 0; i \u003c= NX; i++) Q[r + i] = psi[j * GW + i];\n    Q[r - 1] = -Q[r + 1];\n    Q[r + NX + 1] = -Q[r + NX - 1];\n  }\n  for (let i = 0; i \u003c QW; i++) {\n    Q[i] = -Q[2 * QW + i];\n    Q[(NY + 2) * QW + i] = -Q[NY * QW + i];\n  }\n  const h2 = 1 / (HS * HS), i2 = 1 / (2 * HS);\n  for (let j = 0; j \u003c= NY; j++)\n    for (let i = 0; i \u003c= NX; i++) {\n      const g = j * GW + i, q = (j + 1) * QW + i + 1, p0 = Q[q];\n      const pe = Q[q + 1], pw = Q[q - 1], pn = Q[q - QW], ps = Q[q + QW];\n      u[g] = (ps - pn) * i2;\n      v[g] = -(pe - pw) * i2;\n      uy[g] = (ps - 2 * p0 + pn) * h2;\n      vx[g] = -(pe - 2 * p0 + pw) * h2;\n      ux[g] = (Q[q + QW + 1] - Q[q - QW + 1] - Q[q + QW - 1] + Q[q - QW - 1]) * 0.25 * h2;\n    }\n}\n\n// The parcels ride the flow, and every flake in one turns as a flat disc of\n// no thickness does (Jeffery's equation): its normal m follows\n// dm/dt = K m with K = -(grad u)^T, so a flake turns its face across the\n// stretching and lies along the flow lines in shear. Then M follows\n// dM/dt = K M + M K^T, and the film draws M back toward the identity, the\n// flakes settling to rest.\nfunction flakeStep(S, dt) {\n  const { psi, ux, uy, vx, px, py, M0, M1, M2 } = S;\n  // Half the parcels turn their flakes each step, by the time since their\n  // last turn; all of them move.\n  const par = (S.par ^= 1), dm = S.mdt[par] + dt;\n  S.mdt[par] = 0;\n  S.mdt[par ^ 1] += dt;\n  const st = exp(-SETTLE * dm), ih = 1 / HS, XM = NX - 1e-4, YM = NY - 1e-4, hd = 0.5 * dt * ih;\n  for (let p = 0; p \u003c NP; p++) {\n    let x = px[p], y = py[p];\n    let X = x * ih, Y = y * ih;\n    X = X > XM ? XM : X;\n    Y = Y > YM ? YM : Y;\n    const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, g = j0 * GW + i0;\n    // Velocity from the bilinear stream function: divergence-free inside\n    // every cell.\n    const p00 = psi[g], p10 = psi[g + 1], p01 = psi[g + GW], p11 = psi[g + GW + 1];\n    const U = (1 - tx) * (p01 - p00) + tx * (p11 - p10), V = (1 - ty) * (p10 - p00) + ty * (p11 - p01);\n    if ((p & 1) === par) {\n      const w00 = (1 - tx) * (1 - ty), w10 = tx * (1 - ty), w01 = (1 - tx) * ty, w11 = tx * ty;\n      const a = ux[g] * w00 + ux[g + 1] * w10 + ux[g + GW] * w01 + ux[g + GW + 1] * w11;\n      const b = uy[g] * w00 + uy[g + 1] * w10 + uy[g + GW] * w01 + uy[g + GW + 1] * w11;\n      const c = vx[g] * w00 + vx[g + 1] * w10 + vx[g + GW] * w01 + vx[g + GW + 1] * w11;\n      // grad u = [[a, b], [c, -a]]. One step of m' = K m is the Cayley\n      // transform C = (I - K dt/2)^-1 (I + K dt/2); K has no trace, so\n      // C = ((1 - D) I + K dt) / (1 + D) with D = det(K dt) / 4, and det C = 1\n      // exactly, as the flow keeps area. M' = C M C^T.\n      const D = (dm * dm * (-a * a - b * c)) / 4, iD = 1 / (D > -0.8 ? 1 + D : 0.2), q = 1 - D;\n      const c00 = (q - dm * a) * iD, c01 = -dm * c * iD, c10 = -dm * b * iD, c11 = (q + dm * a) * iD;\n      const mp = M0[p], mq = M1[p], mr = M2[p];\n      const t00 = c00 * mp + c01 * mq, t01 = c00 * mq + c01 * mr, t10 = c10 * mp + c11 * mq, t11 = c10 * mq + c11 * mr;\n      // Settling: M's traceless part decays at the rate SETTLE, and past a\n      // stretch of 6 the film's drag holds it, so the flakes stop short of\n      // standing on edge. det M stays 1, as the flow keeps it: with the\n      // traceless part (d0, d1) the trace is 2 sqrt(1 + d0^2 + d1^2).\n      let d0 = 0.5 * (t00 * c00 + t01 * c01 - t10 * c10 - t11 * c11) * st, d1 = (t00 * c10 + t01 * c11) * st;\n      const dd = d0 * d0 + d1 * d1;\n      if (dd > DMAX * DMAX) {\n        const f = DMAX / sqrt(dd);\n        d0 *= f;\n        d1 *= f;\n      }\n      const h = sqrt(1 + d0 * d0 + d1 * d1);\n      M0[p] = h + d0;\n      M1[p] = d1;\n      M2[p] = h - d0;\n    }\n    // The parcel moves by the midpoint rule.\n    let Xm = X + hd * U, Ym = Y - hd * V;\n    Xm = Xm \u003c 0 ? 0 : Xm > XM ? XM : Xm;\n    Ym = Ym \u003c 0 ? 0 : Ym > YM ? YM : Ym;\n    const im = Xm | 0, jm = Ym | 0, sx = Xm - im, sy = Ym - jm, gm = jm * GW + im;\n    const q00 = psi[gm], q10 = psi[gm + 1], q01 = psi[gm + GW], q11 = psi[gm + GW + 1];\n    x += ((1 - sx) * (q01 - q00) + sx * (q11 - q10)) * ih * dt;\n    y -= ((1 - sy) * (q10 - q00) + sy * (q11 - q01)) * ih * dt;\n    px[p] = x \u003c 0.01 ? 0.01 : x > W - 0.01 ? W - 0.01 : x;\n    py[p] = y \u003c 0.01 ? 0.01 : y > H - 0.01 ? H - 0.01 : y;\n  }\n}\n\n// The flow keeps the oil's density even, and so would the parcels if they\n// moved exactly. Where they have drifted out of a LED that its neighbours\n// still reach, a parcel from a crowded LED is moved in, taking on the flakes\n// of a neighbour; up to 400 a frame.\nfunction even(S) {\n  const { px, py, M0, M1, M2, cnt, own } = S;\n  cnt.fill(0);\n  for (let p = 0; p \u003c NP; p++) {\n    const o = (py[p] | 0) * W + (px[p] | 0);\n    cnt[o]++;\n    own[o] = p;\n  }\n  let d = 0, moved = 0;\n  const start = (random() * W * H) | 0;\n  for (let n = 0; n \u003c W * H && moved \u003c 400; n++) {\n    const e = (start + n) % (W * H);\n    if (cnt[e] !== 0) continue;\n    const x = e % W, y = (e / W) | 0;\n    const nb = x > 0 && cnt[e - 1] ? e - 1 : x \u003c W - 1 && cnt[e + 1] ? e + 1 : y > 0 && cnt[e - W] ? e - W : y \u003c H - 1 && cnt[e + W] ? e + W : -1;\n    if (nb \u003c 0) continue;\n    while (d \u003c W * H && cnt[d] \u003c 3) d++;\n    if (d >= W * H) break;\n    const p = own[d], q = own[nb];\n    cnt[d]--;\n    cnt[e] = 1;\n    px[p] = x + 0.1 + 0.8 * random();\n    py[p] = y + 0.1 + 0.8 * random();\n    M0[p] = M0[q];\n    M1[p] = M1[q];\n    M2[p] = M2[q];\n    moved++;\n  }\n}\n\n// The flow is solved every 1/15 s of oil time, the flakes moved every step.\nfunction step(S, dt) {\n  S.fa += dt;\n  if (S.fa > 1 / 15 - 1e-6) {\n    flowStep(S, S.fa);\n    S.fa = 0;\n  }\n  flakeStep(S, dt);\n  S.t += dt;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.stir = cl(k[2], 0, 1);\n  S.mica = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on oil that has been stirred for 5.4 seconds, the flakes laid\n    // down for the last 4.2 of them.\n    for (let i = 0; i \u003c 4; i++) (S.t += 0.3), flowStep(S, 0.3);\n    for (let i = 0; i \u003c 6; i++) step(S, 0.4);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fingertip lands well away from the stirring one and turns a spiral.\n    const [fx, fy] = finger(S.t);\n    let x = 0, y = 0;\n    for (let n = 0; n \u003c 8; n++) {\n      x = 16 + random() * (W - 32);\n      y = 20 + random() * (H - 40);\n      if ((x - fx) ** 2 + (y - fy) ** 2 > 40 * 40) break;\n    }\n    S.swirl = { x, y, r: 10, k: random() \u003c 0.5 ? 22 : -22, left: 0.7 };\n  }\n  // Oil time runs at Speed / 2, in steps no longer than 1/15 s.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 1 / 15);\n    step(S, h);\n    left -= h;\n  }\n  even(S);\n}\n\nfunction blur(F, T) {\n  for (let y = 0; y \u003c H; y++) {\n    const r = y * W;\n    T[r] = 0.75 * F[r] + 0.25 * F[r + 1];\n    for (let x = 1; x \u003c W - 1; x++) T[r + x] = 0.5 * F[r + x] + 0.25 * (F[r + x - 1] + F[r + x + 1]);\n    T[r + W - 1] = 0.75 * F[r + W - 1] + 0.25 * F[r + W - 2];\n  }\n  for (let x = 0; x \u003c W; x++) {\n    F[x] = 0.75 * T[x] + 0.25 * T[x + W];\n    F[(H - 1) * W + x] = 0.75 * T[(H - 1) * W + x] + 0.25 * T[(H - 2) * W + x];\n  }\n  for (let o = W; o \u003c (H - 1) * W; o++) F[o] = 0.5 * T[o] + 0.25 * (T[o - W] + T[o + W]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { px, py, M0, M1, M2, gx, gy, kp, lit, wt, gl } = S;\n  const mica = S.mica, t = S.t;\n  // Three lights: a soft one over the viewer's shoulder for the flakes that\n  // lie flat, a low ring for the ones the flow has half stood up, and a strip\n  // low at one side, slowly circling, for those leaning toward it.\n  const az = 0.6 + 0.35 * t, c2a = cos(2 * az), s2a = sin(2 * az);\n  const h2x = sin(EL) * cos(az), h2y = sin(EL) * sin(az), h2z = cos(EL);\n  const wf = 0.15, wr = 0.85 + 0.3 * mica, ws = 1 + 0.6 * mica, wg = 0.5 + 1.5 * mica, gs = 0.6 * mica;\n  lit.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  // Large flakes glint once Mica brings them in, the flattest first.\n  const gcut = E0 * (1.05 - mica), sc = (NS - 1) / (1 - 1 / SMAX);\n  for (let p = 0; p \u003c NP; p++) {\n    const mp = M0[p], mq = M1[p], mr = M2[p], fro = mp + mr;\n    // The stretch s, the root of M's larger eigenvalue, and e1's angle to\n    // the strip.\n    const dd = mp - mr, an = sqrt(dd * dd + 4 * mq * mq), s1 = sqrt(0.5 * (fro + an));\n    const c2 = an > 1e-6 ? (dd * c2a + 2 * mq * s2a) / an : 0;\n    const ii = ((s1 > 1 ? 1 - 1 / s1 : 0) * sc + 0.5) | 0, i = ii \u003c NS ? ii : NS - 1, j = ((c2 + 1) * 0.5 * (NC - 1) + 0.5) | 0;\n    let val = wf * RF[i] + wr * RR[i] + ws * RS[i * NC + j];\n    val *= 1 - gs + gs * kp[p];\n    // Into the LED the parcel is over; the blur below spreads it. A large\n    // flake's glint stays in its own LED.\n    const o = (py[p] | 0) * W + (px[p] | 0), ex = gx[p], ey = gy[p];\n    if (ey !== 0 && ex * ex + ey * ey > gcut * gcut) {\n      // Its normal is sqrt(M) times its resting tilt; det M = 1, so\n      // sqrt(M) = (M + I) / sqrt(trace + 2).\n      const is = 1 / sqrt(fro + 2);\n      const m0 = ((mp + 1) * ex + mq * ey) * is, m1 = (mq * ex + (mr + 1) * ey) * is, inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const d = abs(h2x * m0 + h2y * m1 + h2z) * inv, d2 = d * d, d4 = d2 * d2, d8 = d4 * d4;\n      gl[o] += wg * d8 * d8 * d8;\n    }\n    lit[o] += val;\n    wt[o] += 1;\n  }\n  // A LED sees a little past its own square: a 1-2-1 blur each way.\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  // Colours: the oil's body and its sheen, whose brightest light leans a\n  // little round the wheel as pearl pigment does.\n  const h = S.hue + 0.88, hh = h - floor(h);\n  // Deep orange reads brown on the panel and deep yellow olive, so from\n  // orange to lime the oil glows instead: 0.82 of full, not 0.34.\n  const warm = sm(0.015, 0.05, hh) * (1 - sm(0.3, 0.38, hh));\n  const { c0, c1, c2 } = S;\n  hsv(h, 0.9 - 0.1 * warm, 0.34 + 0.48 * warm, c0);\n  hsv(h - 0.02, 0.42 - 0.12 * warm, 1, c1);\n  hsv(h - 0.12, 0.38 - 0.1 * warm, 1, c2);\n  const rest = RF[0] * wf + RR[0] * wr + RS[(NC - 1) >> 1] * ws;\n  for (let o = 0; o \u003c W * H; o++) {\n    // An LED no parcel reached shows flakes at rest.\n    const val = (lit[o] + 0.05 * rest) / (wt[o] + 0.05) + gl[o] * 0.5;\n    const s = val > 1.4 ? 1.4 : val, fl = val \u003c 0.4 ? 0 : val > 1 ? 1 : (val - 0.4) / 0.6, f = fl * fl * (3 - 2 * fl);\n    const sr = c1[0] + (c2[0] - c1[0]) * f, sg = c1[1] + (c2[1] - c1[1]) * f, sb = c1[2] + (c2[2] - c1[2]) * f;\n    const body = 1 - 0.55 * (s > 1 ? 1 : s);\n    // The brightest sheen runs on toward white.\n    const wl = val \u003c 0.75 ? 0 : val > 1.3 ? 1 : (val - 0.75) / 0.55, wh = wl * wl * (1.5 - wl), k = s * 0.85 * (1 - wh);\n    const r = 255 * (c0[0] * body + sr * k + wh), g = 255 * (c0[1] * body + sg * k + wh), b = 255 * (c0[2] * body + sb * k + wh);\n    display.setPixel(o % W, (o / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-shimmer-oil","type":"code","name":"shimmer-oil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shimmer Oil\n// Family:  cosmetic\n// Idea:    An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after shimmer body oils and Paul Matisse's Kalliroscope rheoscopic fluid (1960s), with the flakes turned by Jeffery's equation (G. B. Jeffery, 1922)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1\n//\n// Knob 1: Hue. Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Stir. How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls.\n// Knob 4: Mica. How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white.\n// Buttons: K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.\n\nconst W = 64, H = 128;\nconst { floor, min, sqrt, sin, cos, exp, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The flow lives on a grid of NX x NY cells, HS LEDs each, with free-slip\n// walls round the panel. It is solved as vorticity and stream function: the\n// stream function vanishes on the walls, so a sine series holds it exactly,\n// and the Poisson equation is a division in that series.\nconst NX = 24, NY = 48, HS = W / NX, MX = NX - 1, MY = NY - 1, GW = NX + 1, GN = GW * (NY + 1);\nconst SX = new Float32Array(MX * MX), SY = new Float32Array(MY * MY), LAM = new Float32Array(MX * MY);\nfor (let k = 1; k \u003c= MX; k++) for (let i = 1; i \u003c= MX; i++) SX[(k - 1) * MX + i - 1] = sin((PI * k * i) / NX);\nfor (let k = 1; k \u003c= MY; k++) for (let i = 1; i \u003c= MY; i++) SY[(k - 1) * MY + i - 1] = sin((PI * k * i) / NY);\n// Eigenvalues of the five-point Laplacian, so the stream function's\n// finite-difference Laplacian is exactly minus the vorticity.\nfor (let l = 1; l \u003c= MY; l++)\n  for (let k = 1; k \u003c= MX; k++)\n    LAM[(l - 1) * MX + k - 1] = (4 / (HS * HS)) * (sin((PI * k) / (2 * NX)) ** 2 + sin((PI * l) / (2 * NY)) ** 2);\n\n// Two-dimensional sine transform of the interior nodes (MY rows of MX).\nfunction dst2(src, dst, tmp) {\n  for (let j = 0; j \u003c MY; j++) {\n    const r = j * MX;\n    for (let k = 0; k \u003c MX; k++) {\n      const s = k * MX;\n      let a = 0;\n      for (let i = 0; i \u003c MX; i++) a += src[r + i] * SX[s + i];\n      tmp[r + k] = a;\n    }\n  }\n  for (let l = 0; l \u003c MY; l++) {\n    const s = l * MY, r = l * MX;\n    for (let k = 0; k \u003c MX; k++) dst[r + k] = 0;\n    for (let j = 0; j \u003c MY; j++) {\n      const c = SY[s + j], q = j * MX;\n      if (c === 0) continue;\n      for (let k = 0; k \u003c MX; k++) dst[r + k] += c * tmp[q + k];\n    }\n  }\n}\n\n// Flow constants at Speed 2: viscosity in LED^2 a second, skin friction a\n// second, and how fast the flakes settle back toward lying in the film, a\n// second.\nconst NU = 0.6, MU = 0.12, SETTLE = 0.24;\n// The largest traceless part of M: eigenvalues 36 and 1/36, a stretch of 6.\nconst DMAX = (36 - 1 / 36) / 2;\n// Flakes: a parcel of them to each LED, and one parcel in 25 also carries a\n// single large flake that glints. A flake's normal m turns with the flow as\n// A m, A = F^-T for the deformation F since the flakes lay down. The flakes\n// at rest lean E0 (about 14 degrees) every way, so a parcel's spread of\n// normals is set by M = A A^T alone (the turn left in A only spins an even\n// spread) and M is all a parcel carries. With M's eigenvalues s^2 and 1/s^2\n// and its axis e1 the flakes lie at E0 (s cos phi e1 + sin phi e2 / s), so\n// how they catch a light hangs on the stretch s and, for a light from one\n// side, on the angle between that side and e1.\nconst NP = W * H;\n// The tables hold the averages over phi, for s from 1 to 12 laid out on\n// 1 - 1/s.\nconst E0 = 0.25, NS = 96, NC = 33, SMAX = 12, EL = 0.95;\n// Soft front light, ring light, strip light by angle.\nconst RF = new Float32Array(NS), RR = new Float32Array(NS), RS = new Float32Array(NS * NC);\n{\n  const NPHI = 48, se = sin(EL), ce = cos(EL), cd = [], sd = [];\n  for (let j = 0; j \u003c NC; j++) {\n    const dl = 0.5 * Math.acos(-1 + (2 * j) / (NC - 1));\n    cd.push(se * cos(dl));\n    sd.push(se * sin(dl));\n  }\n  for (let i = 0; i \u003c NS; i++) {\n    const sg = 1 / (1 - (i / (NS - 1)) * (1 - 1 / SMAX));\n    let f = 0, r = 0;\n    for (let k = 0; k \u003c NPHI; k++) {\n      const ph = (PI * (k + 0.5)) / NPHI, m0 = E0 * sg * cos(ph), m1 = (E0 / sg) * sin(ph), inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const i2 = inv * inv, i4 = i2 * i2, i8 = i4 * i4;\n      f += i8 * i8 * i8;\n      // Flakes standing at about 45 degrees catch a low ring of light from\n      // every side; flat ones and edge-on ones miss most of it.\n      const rq = (inv - 0.707) * 3.5, rb = rq * rq \u003c 1 ? 1 - rq * rq : 0;\n      r += 0.05 + 0.95 * rb * rb;\n      for (let j = 0; j \u003c NC; j++) {\n        const d = (m0 * cd[j] + m1 * sd[j] + ce) * inv, d2 = d * d, d4 = d2 * d2;\n        RS[i * NC + j] += (d4 * d4) / NPHI;\n      }\n    }\n    RF[i] = f / NPHI;\n    RR[i] = r / NPHI;\n  }\n}\n\n// The fingertip's push, its radius in LEDs.\nconst SIG = 6.5;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, stir: 0, mica: 0.06, t: 0, fa: 0, par: 0, mdt: [0, 0], warm: false,\n    w: new Float32Array(GN), w2: new Float32Array(GN), psi: new Float32Array(GN),\n    u: new Float32Array(GN), v: new Float32Array(GN), ux: new Float32Array(GN), uy: new Float32Array(GN), vx: new Float32Array(GN),\n    a: new Float32Array(MX * MY), b: new Float32Array(MX * MY), c: new Float32Array(MX * MY), d: new Float32Array(MX * MY), q: new Float32Array((GW + 2) * (NY + 3)),\n    px: new Float32Array(NP), py: new Float32Array(NP),\n    M0: new Float32Array(NP), M1: new Float32Array(NP), M2: new Float32Array(NP),\n    gx: new Float32Array(NP), gy: new Float32Array(NP),\n    kp: new Float32Array(NP), cnt: new Int32Array(W * H), own: new Int32Array(W * H), gl: new Float32Array(W * H), lit: new Float32Array(W * H), wt: new Float32Array(W * H), tmp: new Float32Array(W * H),\n    swirl: null, c0: [0, 0, 0], c1: [0, 0, 0], c2: [0, 0, 0],\n  };\n  // Parcels start one to each LED, their flakes at rest.\n  for (let p = 0; p \u003c NP; p++) {\n    S.px[p] = (p % W) + random();\n    S.py[p] = floor(p / W) + random();\n    S.M0[p] = S.M2[p] = 1;\n    S.kp[p] = 0.8 + 0.4 * random();\n    if (random() \u003c 0.04) {\n      const a = random() * 2 * PI, r = E0 * (0.4 + 0.6 * random());\n      S.gx[p] = r * cos(a);\n      S.gy[p] = r * sin(a) + 1e-6;\n    }\n  }\n  // And the oil has been swirled before: a dozen soft eddies of either sign.\n  for (let n = 0; n \u003c 12; n++) {\n    const cx = 8 + random() * (W - 16), cy = 8 + random() * (H - 16), r = 6 + random() * 8, k = (random() \u003c 0.5 ? -1 : 1) * (2 + 3 * random());\n    for (let j = 1; j \u003c NY; j++)\n      for (let i = 1; i \u003c NX; i++) {\n        const dx = i * HS - cx, dy = j * HS - cy;\n        S.w[j * GW + i] += k * exp(-(dx * dx + dy * dy) / (r * r));\n      }\n  }\n  params.s = S;\n}\n\n// Where the fingertip is at time t: a slow loop that wanders over the panel.\nfunction finger(t) {\n  return [32 + 19 * sin(t * 0.7) + 4 * sin(t * 1.9), 64 + 44 * sin(t * 0.47 + 0.6) + 8 * cos(t * 1.3)];\n}\n\n// One step of the flow: carry the vorticity, push it with the fingertip,\n// let it decay, and solve for the stream function, velocity and its gradient.\nfunction flowStep(S, dt) {\n  const { w, w2, psi, u, v, ux, uy, vx, a, b, c } = S;\n  const force = 16 * (0.45 + 0.5 * S.stir + 1.3 * S.stir * S.stir);\n  const [fx, fy] = finger(S.t), [gx, gy] = finger(S.t + 0.02);\n  const vxs = (gx - fx) / 0.02, vys = (gy - fy) / 0.02;\n  const fr = exp(-MU * dt), sw = S.swirl;\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      // Back along the flow, in grid units.\n      let X = i - (u[g] * dt) / HS, Y = j - (v[g] * dt) / HS;\n      X = X \u003c 0 ? 0 : X > NX - 1e-4 ? NX - 1e-4 : X;\n      Y = Y \u003c 0 ? 0 : Y > NY - 1e-4 ? NY - 1e-4 : Y;\n      const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, q = j0 * GW + i0;\n      let val = (w[q] * (1 - tx) + w[q + 1] * tx) * (1 - ty) + (w[q + GW] * (1 - tx) + w[q + GW + 1] * tx) * ty;\n      // The fingertip drags the oil along with it: the curl of a force along\n      // its velocity, spread over a Gaussian of radius SIG.\n      const dx = i * HS - fx, dy = j * HS - fy, r2 = (dx * dx + dy * dy) / (SIG * SIG);\n      if (r2 \u003c 9) val += ((force * dt * -2) / (SIG * SIG)) * exp(-r2) * (vys * dx - vxs * dy);\n      if (sw) {\n        const ex = i * HS - sw.x, ey = j * HS - sw.y, e2 = (ex * ex + ey * ey) / (sw.r * sw.r);\n        if (e2 \u003c 9) val += sw.k * dt * exp(-e2) * (1 - 0.6 * e2);\n      }\n      w2[g] = val * fr;\n    }\n  if (sw && (sw.left -= dt) \u003c= 0) S.swirl = null;\n  // Viscosity, one explicit step of the five-point Laplacian (the vorticity\n  // is 0 on the walls).\n  const nu = (NU * dt) / (HS * HS);\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      w[g] = w2[g] + nu * (w2[g - 1] + w2[g + 1] + w2[g - GW] + w2[g + GW] - 4 * w2[g]);\n      a[(j - 1) * MX + i - 1] = w[g];\n    }\n  // The stream function: a division in the sine series.\n  dst2(a, b, c);\n  const norm = 4 / (NX * NY);\n  for (let n = 0; n \u003c MX * MY; n++) b[n] *= norm / LAM[n];\n  dst2(b, c, S.d);\n  for (let j = 1; j \u003c NY; j++) for (let i = 1; i \u003c NX; i++) psi[j * GW + i] = c[(j - 1) * MX + i - 1];\n  // Velocity u = dpsi/dy, v = -dpsi/dx and its gradient, by central\n  // differences; past a wall the stream function is mirrored with its sign\n  // turned over, as the sine series has it.\n  const Q = S.q, QW = GW + 2;\n  for (let j = 0; j \u003c= NY; j++) {\n    const r = (j + 1) * QW + 1;\n    for (let i = 0; i \u003c= NX; i++) Q[r + i] = psi[j * GW + i];\n    Q[r - 1] = -Q[r + 1];\n    Q[r + NX + 1] = -Q[r + NX - 1];\n  }\n  for (let i = 0; i \u003c QW; i++) {\n    Q[i] = -Q[2 * QW + i];\n    Q[(NY + 2) * QW + i] = -Q[NY * QW + i];\n  }\n  const h2 = 1 / (HS * HS), i2 = 1 / (2 * HS);\n  for (let j = 0; j \u003c= NY; j++)\n    for (let i = 0; i \u003c= NX; i++) {\n      const g = j * GW + i, q = (j + 1) * QW + i + 1, p0 = Q[q];\n      const pe = Q[q + 1], pw = Q[q - 1], pn = Q[q - QW], ps = Q[q + QW];\n      u[g] = (ps - pn) * i2;\n      v[g] = -(pe - pw) * i2;\n      uy[g] = (ps - 2 * p0 + pn) * h2;\n      vx[g] = -(pe - 2 * p0 + pw) * h2;\n      ux[g] = (Q[q + QW + 1] - Q[q - QW + 1] - Q[q + QW - 1] + Q[q - QW - 1]) * 0.25 * h2;\n    }\n}\n\n// The parcels ride the flow, and every flake in one turns as a flat disc of\n// no thickness does (Jeffery's equation): its normal m follows\n// dm/dt = K m with K = -(grad u)^T, so a flake turns its face across the\n// stretching and lies along the flow lines in shear. Then M follows\n// dM/dt = K M + M K^T, and the film draws M back toward the identity, the\n// flakes settling to rest.\nfunction flakeStep(S, dt) {\n  const { psi, ux, uy, vx, px, py, M0, M1, M2 } = S;\n  // Half the parcels turn their flakes each step, by the time since their\n  // last turn; all of them move.\n  const par = (S.par ^= 1), dm = S.mdt[par] + dt;\n  S.mdt[par] = 0;\n  S.mdt[par ^ 1] += dt;\n  const st = exp(-SETTLE * dm), ih = 1 / HS, XM = NX - 1e-4, YM = NY - 1e-4, hd = 0.5 * dt * ih;\n  for (let p = 0; p \u003c NP; p++) {\n    let x = px[p], y = py[p];\n    let X = x * ih, Y = y * ih;\n    X = X > XM ? XM : X;\n    Y = Y > YM ? YM : Y;\n    const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, g = j0 * GW + i0;\n    // Velocity from the bilinear stream function: divergence-free inside\n    // every cell.\n    const p00 = psi[g], p10 = psi[g + 1], p01 = psi[g + GW], p11 = psi[g + GW + 1];\n    const U = (1 - tx) * (p01 - p00) + tx * (p11 - p10), V = (1 - ty) * (p10 - p00) + ty * (p11 - p01);\n    if ((p & 1) === par) {\n      const w00 = (1 - tx) * (1 - ty), w10 = tx * (1 - ty), w01 = (1 - tx) * ty, w11 = tx * ty;\n      const a = ux[g] * w00 + ux[g + 1] * w10 + ux[g + GW] * w01 + ux[g + GW + 1] * w11;\n      const b = uy[g] * w00 + uy[g + 1] * w10 + uy[g + GW] * w01 + uy[g + GW + 1] * w11;\n      const c = vx[g] * w00 + vx[g + 1] * w10 + vx[g + GW] * w01 + vx[g + GW + 1] * w11;\n      // grad u = [[a, b], [c, -a]]. One step of m' = K m is the Cayley\n      // transform C = (I - K dt/2)^-1 (I + K dt/2); K has no trace, so\n      // C = ((1 - D) I + K dt) / (1 + D) with D = det(K dt) / 4, and det C = 1\n      // exactly, as the flow keeps area. M' = C M C^T.\n      const D = (dm * dm * (-a * a - b * c)) / 4, iD = 1 / (D > -0.8 ? 1 + D : 0.2), q = 1 - D;\n      const c00 = (q - dm * a) * iD, c01 = -dm * c * iD, c10 = -dm * b * iD, c11 = (q + dm * a) * iD;\n      const mp = M0[p], mq = M1[p], mr = M2[p];\n      const t00 = c00 * mp + c01 * mq, t01 = c00 * mq + c01 * mr, t10 = c10 * mp + c11 * mq, t11 = c10 * mq + c11 * mr;\n      // Settling: M's traceless part decays at the rate SETTLE, and past a\n      // stretch of 6 the film's drag holds it, so the flakes stop short of\n      // standing on edge. det M stays 1, as the flow keeps it: with the\n      // traceless part (d0, d1) the trace is 2 sqrt(1 + d0^2 + d1^2).\n      let d0 = 0.5 * (t00 * c00 + t01 * c01 - t10 * c10 - t11 * c11) * st, d1 = (t00 * c10 + t01 * c11) * st;\n      const dd = d0 * d0 + d1 * d1;\n      if (dd > DMAX * DMAX) {\n        const f = DMAX / sqrt(dd);\n        d0 *= f;\n        d1 *= f;\n      }\n      const h = sqrt(1 + d0 * d0 + d1 * d1);\n      M0[p] = h + d0;\n      M1[p] = d1;\n      M2[p] = h - d0;\n    }\n    // The parcel moves by the midpoint rule.\n    let Xm = X + hd * U, Ym = Y - hd * V;\n    Xm = Xm \u003c 0 ? 0 : Xm > XM ? XM : Xm;\n    Ym = Ym \u003c 0 ? 0 : Ym > YM ? YM : Ym;\n    const im = Xm | 0, jm = Ym | 0, sx = Xm - im, sy = Ym - jm, gm = jm * GW + im;\n    const q00 = psi[gm], q10 = psi[gm + 1], q01 = psi[gm + GW], q11 = psi[gm + GW + 1];\n    x += ((1 - sx) * (q01 - q00) + sx * (q11 - q10)) * ih * dt;\n    y -= ((1 - sy) * (q10 - q00) + sy * (q11 - q01)) * ih * dt;\n    px[p] = x \u003c 0.01 ? 0.01 : x > W - 0.01 ? W - 0.01 : x;\n    py[p] = y \u003c 0.01 ? 0.01 : y > H - 0.01 ? H - 0.01 : y;\n  }\n}\n\n// The flow keeps the oil's density even, and so would the parcels if they\n// moved exactly. Where they have drifted out of a LED that its neighbours\n// still reach, a parcel from a crowded LED is moved in, taking on the flakes\n// of a neighbour; up to 400 a frame.\nfunction even(S) {\n  const { px, py, M0, M1, M2, cnt, own } = S;\n  cnt.fill(0);\n  for (let p = 0; p \u003c NP; p++) {\n    const o = (py[p] | 0) * W + (px[p] | 0);\n    cnt[o]++;\n    own[o] = p;\n  }\n  let d = 0, moved = 0;\n  const start = (random() * W * H) | 0;\n  for (let n = 0; n \u003c W * H && moved \u003c 400; n++) {\n    const e = (start + n) % (W * H);\n    if (cnt[e] !== 0) continue;\n    const x = e % W, y = (e / W) | 0;\n    const nb = x > 0 && cnt[e - 1] ? e - 1 : x \u003c W - 1 && cnt[e + 1] ? e + 1 : y > 0 && cnt[e - W] ? e - W : y \u003c H - 1 && cnt[e + W] ? e + W : -1;\n    if (nb \u003c 0) continue;\n    while (d \u003c W * H && cnt[d] \u003c 3) d++;\n    if (d >= W * H) break;\n    const p = own[d], q = own[nb];\n    cnt[d]--;\n    cnt[e] = 1;\n    px[p] = x + 0.1 + 0.8 * random();\n    py[p] = y + 0.1 + 0.8 * random();\n    M0[p] = M0[q];\n    M1[p] = M1[q];\n    M2[p] = M2[q];\n    moved++;\n  }\n}\n\n// The flow is solved every 1/15 s of oil time, the flakes moved every step.\nfunction step(S, dt) {\n  S.fa += dt;\n  if (S.fa > 1 / 15 - 1e-6) {\n    flowStep(S, S.fa);\n    S.fa = 0;\n  }\n  flakeStep(S, dt);\n  S.t += dt;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.stir = cl(k[2], 0, 1);\n  S.mica = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on oil that has been stirred for 5.4 seconds, the flakes laid\n    // down for the last 4.2 of them.\n    for (let i = 0; i \u003c 4; i++) (S.t += 0.3), flowStep(S, 0.3);\n    for (let i = 0; i \u003c 6; i++) step(S, 0.4);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fingertip lands well away from the stirring one and turns a spiral.\n    const [fx, fy] = finger(S.t);\n    let x = 0, y = 0;\n    for (let n = 0; n \u003c 8; n++) {\n      x = 16 + random() * (W - 32);\n      y = 20 + random() * (H - 40);\n      if ((x - fx) ** 2 + (y - fy) ** 2 > 40 * 40) break;\n    }\n    S.swirl = { x, y, r: 10, k: random() \u003c 0.5 ? 22 : -22, left: 0.7 };\n  }\n  // Oil time runs at Speed / 2, in steps no longer than 1/15 s.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 1 / 15);\n    step(S, h);\n    left -= h;\n  }\n  even(S);\n}\n\nfunction blur(F, T) {\n  for (let y = 0; y \u003c H; y++) {\n    const r = y * W;\n    T[r] = 0.75 * F[r] + 0.25 * F[r + 1];\n    for (let x = 1; x \u003c W - 1; x++) T[r + x] = 0.5 * F[r + x] + 0.25 * (F[r + x - 1] + F[r + x + 1]);\n    T[r + W - 1] = 0.75 * F[r + W - 1] + 0.25 * F[r + W - 2];\n  }\n  for (let x = 0; x \u003c W; x++) {\n    F[x] = 0.75 * T[x] + 0.25 * T[x + W];\n    F[(H - 1) * W + x] = 0.75 * T[(H - 1) * W + x] + 0.25 * T[(H - 2) * W + x];\n  }\n  for (let o = W; o \u003c (H - 1) * W; o++) F[o] = 0.5 * T[o] + 0.25 * (T[o - W] + T[o + W]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { px, py, M0, M1, M2, gx, gy, kp, lit, wt, gl } = S;\n  const mica = S.mica, t = S.t;\n  // Three lights: a soft one over the viewer's shoulder for the flakes that\n  // lie flat, a low ring for the ones the flow has half stood up, and a strip\n  // low at one side, slowly circling, for those leaning toward it.\n  const az = 0.6 + 0.35 * t, c2a = cos(2 * az), s2a = sin(2 * az);\n  const h2x = sin(EL) * cos(az), h2y = sin(EL) * sin(az), h2z = cos(EL);\n  const wf = 0.15, wr = 0.85 + 0.3 * mica, ws = 1 + 0.6 * mica, wg = 0.5 + 1.5 * mica, gs = 0.6 * mica;\n  lit.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  // Large flakes glint once Mica brings them in, the flattest first.\n  const gcut = E0 * (1.05 - mica), sc = (NS - 1) / (1 - 1 / SMAX);\n  for (let p = 0; p \u003c NP; p++) {\n    const mp = M0[p], mq = M1[p], mr = M2[p], fro = mp + mr;\n    // The stretch s, the root of M's larger eigenvalue, and e1's angle to\n    // the strip.\n    const dd = mp - mr, an = sqrt(dd * dd + 4 * mq * mq), s1 = sqrt(0.5 * (fro + an));\n    const c2 = an > 1e-6 ? (dd * c2a + 2 * mq * s2a) / an : 0;\n    const ii = ((s1 > 1 ? 1 - 1 / s1 : 0) * sc + 0.5) | 0, i = ii \u003c NS ? ii : NS - 1, j = ((c2 + 1) * 0.5 * (NC - 1) + 0.5) | 0;\n    let val = wf * RF[i] + wr * RR[i] + ws * RS[i * NC + j];\n    val *= 1 - gs + gs * kp[p];\n    // Into the LED the parcel is over; the blur below spreads it. A large\n    // flake's glint stays in its own LED.\n    const o = (py[p] | 0) * W + (px[p] | 0), ex = gx[p], ey = gy[p];\n    if (ey !== 0 && ex * ex + ey * ey > gcut * gcut) {\n      // Its normal is sqrt(M) times its resting tilt; det M = 1, so\n      // sqrt(M) = (M + I) / sqrt(trace + 2).\n      const is = 1 / sqrt(fro + 2);\n      const m0 = ((mp + 1) * ex + mq * ey) * is, m1 = (mq * ex + (mr + 1) * ey) * is, inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const d = abs(h2x * m0 + h2y * m1 + h2z) * inv, d2 = d * d, d4 = d2 * d2, d8 = d4 * d4;\n      gl[o] += wg * d8 * d8 * d8;\n    }\n    lit[o] += val;\n    wt[o] += 1;\n  }\n  // A LED sees a little past its own square: a 1-2-1 blur each way.\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  // Colours: the oil's body and its sheen, whose brightest light leans a\n  // little round the wheel as pearl pigment does.\n  const h = S.hue + 0.88, hh = h - floor(h);\n  // Deep orange reads brown on the panel and deep yellow olive, so from\n  // orange to lime the oil glows instead: 0.82 of full, not 0.34.\n  const warm = sm(0.015, 0.05, hh) * (1 - sm(0.3, 0.38, hh));\n  const { c0, c1, c2 } = S;\n  hsv(h, 0.9 - 0.1 * warm, 0.34 + 0.48 * warm, c0);\n  hsv(h - 0.02, 0.42 - 0.12 * warm, 1, c1);\n  hsv(h - 0.12, 0.38 - 0.1 * warm, 1, c2);\n  const rest = RF[0] * wf + RR[0] * wr + RS[(NC - 1) >> 1] * ws;\n  for (let o = 0; o \u003c W * H; o++) {\n    // An LED no parcel reached shows flakes at rest.\n    const val = (lit[o] + 0.05 * rest) / (wt[o] + 0.05) + gl[o] * 0.5;\n    const s = val > 1.4 ? 1.4 : val, fl = val \u003c 0.4 ? 0 : val > 1 ? 1 : (val - 0.4) / 0.6, f = fl * fl * (3 - 2 * fl);\n    const sr = c1[0] + (c2[0] - c1[0]) * f, sg = c1[1] + (c2[1] - c1[1]) * f, sb = c1[2] + (c2[2] - c1[2]) * f;\n    const body = 1 - 0.55 * (s > 1 ? 1 : s);\n    // The brightest sheen runs on toward white.\n    const wl = val \u003c 0.75 ? 0 : val > 1.3 ? 1 : (val - 0.75) / 0.55, wh = wl * wl * (1.5 - wl), k = s * 0.85 * (1 - wh);\n    const r = 255 * (c0[0] * body + sr * k + wh), g = 255 * (c0[1] * body + sg * k + wh), b = 255 * (c0[2] * body + sb * k + wh);\n    display.setPixel(o % W, (o / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Stir","min":0,"max":1,"about":"How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls."},{"name":"Mica","min":0,"max":1,"about":"How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white."}],"start":[0,2,0,0.06],"measures":{"motion":0.1227,"detail":0.0154,"edges":0,"complexity":1.6312,"coverage":1,"colour":0.1493,"drift":0.0939},"knobResponse":[0.4877,0.1036,0.0703,0.0773]},{"slug":"shoot-em-up","title":"Shoot 'em Up","family":"pixel","round":24,"note":"세로로 흐르는 아케이드 슈팅 게임이 혼자 돌아요. 섬과 해안, 들판과 빨간 지붕 마을이 아래로 흘러가고, 흰 전투기가 노란 탄을 쏘며 S 자로 들어오는 편대와 포탑을 돌리는 포함을 떨어뜨려요. 화면 위 3분의 1을 덮는 보스가 내려와 고리와 나선 탄막을 뿌리다 연쇄 폭발로 부서져요. K1 이 열대 바다에서 붉은 협곡, 밤 도시, 우주 정거장까지 판을 바꾸고, K1 을 누르면 폭탄이 터져요.","idea":"An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.","buttons":"K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.","code":"// ===== Patternflow pattern =====\n// Title:   Shoot 'em Up\n// Family:  pixel\n// Idea:    An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the vertically scrolling arcade shooters of the 1980s\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1\n//\n// Knob 1: Stage. Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars.\n// Knob 2: Speed. The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in.\n// Knob 3: Waves. From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats.\n// Knob 4: Bullets. How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read.\n// Buttons: K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, abs, atan2, hypot, floor, round, sqrt, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = (a, b) => a + (b - a) * Math.random();\n// Ground scroll at Speed 2 in LEDs a second; clouds go 1.8 times as fast.\nconst V0 = 12, CLOUD = 1.8;\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), u = (x -= ix) * x * (3 - 2 * x), v = (y -= iy) * y * (3 - 2 * y);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\n\n// Ground types, one colour each in every stage's palette.\nconst [DEEP, WAVE, CAP, SHAL, SAND, GRASS, TREE, FLDA, FLDB, ROAD, ROOF, WALL, TRUNK, RIVER, LIGHT, HEDGE] = [...Array(16).keys()];\nconst PALS = [\n  \"123c9a1e5cc4d2ecff2aa8ccf0d4884aae3c1f6a2a9ccc4a6e9a3076706ad8482ef2e6c88a5a2a2c7ed8fff2c02e5226\",\n  \"5c20188a3a22d8966ab4502af0b464dc9a4c4a8a3cf2c278c8843e6e4630c8602ef6dcaa5a34182aa89affe6aa7a2c1a\",\n  \"0c1846172a628ca8e61c386a50506a163e340e2c2440446a2a2c481e1e30b43c96ffd25a2e222412265effa83c1c1c2c\",\n  \"08061c1e0e40e6e6ff34185e9a90885a62804c4440868ca8464c661c2034ff3c3cb8c2d83c343228dcff78ffc82a2e40\",\n].map((s) => s.match(/../g).map((h) => parseInt(h, 16)));\n// Clouds per stage: colour, underside shade, alpha, shadow shade.\nconst CLOUDS = [\n  [236, 242, 255, 0.74, 0.72, 0.62],\n  [236, 200, 156, 0.78, 0.6, 0.7],\n  [84, 96, 146, 0.7, 0.66, 0.72],\n  [150, 76, 214, 0.6, 0.5, 1],\n];\n\n// Sprites are rows of letters, \".\" clear; a mirrored one is its left half.\nfunction mk(src, pal, mirror) {\n  const rows = src.trim().split(/\\s+/), w = rows[0].length * (mirror ? 2 : 1), px = [], mask = new Uint8Array(w * rows.length);\n  rows.forEach((r, j) => {\n    for (let i = 0; i \u003c r.length; i++)\n      if (r[i] !== \".\") for (const x of mirror ? [i, w - 1 - i] : [i]) px.push(x, j, pal[r[i]]), (mask[j * w + x] = 1);\n  });\n  return { px, mask };\n}\nconst PLAYER = mk(\"....w.... ...wcw... ...wbw... ..gwbwg.. ..gwwwg.. .wgwwwgw. wwwwgwwww rww.g.wwr r..www..r ...r.r...\", { w: 0xdce4f0, c: 0x96f0ff, b: 0x286ee6, g: 0x828ca0, r: 0xe62832 });\nconst FIGHTER = mk(\"o.....o oo.d.oo ooodooo .odwdo. ..ddd.. ...d...\", { o: 0xff8c1e, d: 0xaa3214, w: 0xfff0c8 });\nconst DART = mk(\"mm...mm mmm.mmm .mmmmm. .mmcmm. ..mmm.. ..mdm.. ...m...\", { m: 0xd246e6, c: 0x78f0ff, d: 0x6e1e8c });\nconst BOAT = mk(\".kkkkk. kbbbbbk kbaaabk kbaaabk kbbbbbk kbbbbbk kbaaabk kbbbbbk .kbbbk. .kbbbk. ..kbk.. ...k...\", { k: 0x1e2028, b: 0x969baa, a: 0x5a5f6e });\n// The boss, 56 wide; \"e\" is its glowing core.\nconst BOSS = mk(\n  `\n.............kkgggk..kkkkkkk\nkk...........kacccc..kbbbbbb\nkykkk........kabbbc..kbbrrbb\nkybbbkkk.....kabbbc..kbbrrbb\nkbbbbbbbkk...kabbbc..kbbbbbb\nkbbbbbbbbbkkkbabbbc..kbbbbbb\nkbbrrrbbbbbbbbabbbc..kbbbkkk\nkaarrrrrrbbbbbabbbc..kbbbkee\nkccabbrrrrrrbbabbbckkbbbbkee\n.kkcaabgggrrrrabbbcbbbbbbkee\n...kcaagygbbrrrrrrbbbbbbbkee\n....kacgggbbbbbrrrrrrbbbbkee\n......kkcaabbbbbbbrrrbbbbkee\n........kacaaabgggbbbbbbbkee\n.........kkccabgygbbbbbbbkee\n...........kkaagggbbbbbbbkee\n.............kccaabbbbbbbkkk\n..............kkccabbbbbbbbb\n................kkcaabbbbbbb\n..................kccbbyybbb\n...................kkabbbbbb\n.....................kabbbbb\n.....................kcbbbbb\n......................kabbbb\n.......................kabbg\n.......................kcbbg\n........................kabg\n.........................kag\n.........................kcg\n..........................kg`,\n  { k: 0x14141e, c: 0x464a60, a: 0x787e96, b: 0xb4bacc, r: 0xdc323c, y: 0xffd646, g: 0x2c2c38, e: -1 },\n  true,\n);\nconst PALM = \"t.t.t .ttt. ttktt .ttt. t.t.t\".split(\" \");\n// 3x5 digits, a P, and a ship for the lives; one octal digit per row.\nconst GLYPH = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717, 0o75744, 0o22775];\nconst BUL = [\n  [255, 70, 170],\n  [70, 220, 255],\n  [255, 170, 40],\n];\n\n// The map repeats every 1024 rows: sea, coast, fields, town, river, coast. -1 is sea, 1 land.\nfunction profile(x, wy) {\n  const v = (wy % 1024) + 0.3 * (x - 32);\n  return v \u003c 250 || v > 830 ? -1 : v \u003c 290 ? (v - 270) / 20 : v \u003c 790 ? 1 : (810 - v) / 20;\n}\nconst ISL = {};\nfunction islands(sd, x, wy) {\n  let best = 0;\n  for (let j = floor(wy / 44) - 1, j1 = j + 2; j \u003c= j1; j++)\n    for (let i = floor(x / 32) - 1, i1 = i + 2; i \u003c= i1; i++) {\n      const ix = i * 32 + 4 + hash(i, j, sd + 2) * 24, iy = j * 44 + 6 + hash(i, j, sd + 3) * 32, r = 12 + hash(i, j, sd + 4) * 10;\n      const b = 1.9 * (1 - hypot(x - ix, wy - iy) / r);\n      if (b > best && hash(i, j, sd + 1) \u003c 0.7) ((best = b), (ISL.x = ix), (ISL.y = iy), (ISL.r = r));\n    }\n  return best;\n}\nfunction terrain(sd, x, wy) {\n  const pr = profile(x, wy);\n  let e = pr + 0.5 * (noise(x / 11, wy / 11, sd) - 0.5) + 0.24 * (noise(x / 4.5, wy / 4.5, sd + 9) - 0.5);\n  if (pr \u003c 0) e += islands(sd, x, wy) * min(1, -pr);\n  if (e \u003c -0.08) {\n    if (e > -0.12) return CAP;\n    if (e > -0.21) return SHAL;\n    const cx = x >> 3, cy = floor(wy / 5), h = hash(cx, cy, sd + 21), c0 = cx * 8 + floor(hash(cx, cy, sd + 22) * 6);\n    if (h \u003c 0.4 && wy === cy * 5 + floor(hash(cx, cy, sd + 23) * 4) && x >= c0 && x \u003c c0 + (h \u003c 0.15 ? 3 : 2)) return CAP;\n    return e > -0.36 || noise(x / 6, wy / 2, sd + 5) > 0.78 ? WAVE : DEEP;\n  }\n  if (e \u003c 0.08) return SAND;\n  if (pr \u003c -0.5) {\n    const dx = round(x - ISL.x), dy = round(wy - ISL.y), c = ISL.r > 13 && abs(dx) \u003c= 2 && abs(dy) \u003c= 2 ? PALM[dy + 2][dx + 2] : \".\";\n    return c === \".\" ? GRASS : c === \"k\" ? TRUNK : TREE;\n  }\n  const u = wy % 1024, dr = abs(x - 30 - 9 * sin(wy / 70));\n  if (u > 560 && u \u003c 770) {\n    const a = (u - 560) / 34, dv = abs(x - 32 - 23 * sin(a)) / sqrt(1 + (0.68 * cos(a)) ** 2);\n    if (dv \u003c 4.4) return dr \u003c 2.6 ? (dr > 1.6 ? WALL : ROAD) : dv \u003c 3.3 ? RIVER : SAND;\n  }\n  if (dr \u003c 1.6) return dr \u003c 0.6 && wy % 6 \u003c 3 ? LIGHT : ROAD;\n  if (u > 420 && u \u003c 510 && dr \u003c 22 + 6 * sin(wy / 9)) {\n    // The town: in each plot a house (roof, front wall, shadow) or a tree.\n    const lx = (x + 4) % 9, ly = wy % 9;\n    if (lx === 0 || ly === 0) return ROAD;\n    if (hash(floor((x + 4) / 9), floor(wy / 9), sd + 41) > 0.6) return hypot(lx - 4.5, ly - 4.5) \u003c 2.7 ? TREE : GRASS;\n    if (lx >= 2 && lx \u003c= 6 && ly >= 2) return ly === 2 ? WALL : ly > 7 ? GRASS : lx === 4 ? TRUNK : ROOF;\n    return (lx === 7 && ly >= 2 && ly \u003c= 6) || (ly === 1 && lx >= 3) ? HEDGE : GRASS;\n  }\n  const band = floor(wy / 14), gx = x + floor(hash(band, 0, sd + 51) * 16), h = hash(floor(gx / 16), band, sd + 52);\n  if (gx % 16 === 0 || wy % 14 === 0) return h \u003c 0.6 ? HEDGE : GRASS;\n  const kind = floor(h * 4);\n  if (kind \u003c 3) return (kind ? (kind > 1 ? hash(gx, wy, sd + 53) \u003c 0.12 : gx % 3 === 0) : wy % 3 === 0) ? FLDB : FLDA;\n  const tx = floor(gx / 5), ty = floor(wy / 5);\n  return hypot(gx - tx * 5 - 1 - hash(tx, ty, sd + 55) * 3, wy - ty * 5 - 1 - hash(tx, ty, sd + 56) * 3) \u003c 1.9 ? TREE : GRASS;\n}\n// A cloud: puffs on a flat base, 2 its body and 1 its underside.\nfunction newCloud(S, cw) {\n  const w = floor(rnd(22, 40)), h = floor(rnd(10, 16)), n = 3 + floor(w / 9), P = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = h * 0.5 * (0.5 + 0.5 * sin((PI * (i + 0.5)) / n)) + rnd(-0.6, 0.8);\n    P.push((w * (i + 0.5)) / n + rnd(-1.5, 1.5), h - 1.5 - r * 0.55, r);\n  }\n  const inn = (x, y) => x >= 0 && y >= 0 && x \u003c w && y \u003c= h - 1.5 && P.some((_, i) => i % 3 === 0 && hypot(x + 0.5 - P[i], y + 0.5 - P[i + 1]) \u003c P[i + 2]);\n  const m = new Uint8Array(w * h);\n  for (let y = 0; y \u003c h; y++) for (let x = 0; x \u003c w; x++) if (inn(x, y)) m[y * w + x] = inn(x, y + 2) ? 2 : 1;\n  S.clouds.push({ x: floor(rnd(-14, 56 - w / 2)), cw: cw + h, w, h, m });\n}\nfunction fill(S) {\n  for (const top = floor(S.scroll) + H + 24; S.gen \u003c top; S.gen++) for (let x = 0; x \u003c W; x++) S.ter[(S.gen & 255) * W + x] = terrain(S.sd, x, S.gen);\n  const cb = floor(S.scroll * CLOUD);\n  for (; S.cnext \u003c cb + H + 20; S.cnext += floor(rnd(24, 52))) newCloud(S, S.cnext);\n  S.clouds = S.clouds.filter((c) => cb + H - 1 - c.cw \u003c H);\n}\n\nexport function setup(params) {\n  const S = { t: 0, scroll: 85, gen: 83, cnext: 147, sd: floor(Math.random() * 9000), ter: new Uint8Array(256 * W), cb: new Uint8Array(N), buf: new Float32Array(N * 3), sh: new Float32Array(N) };\n  Object.assign(S, { clouds: [], en: [], boats: [], eb: [], ps: [], fx: [], pop: [], caps: [], bossAt: 3.2, bossN: 0, waveAt: 0.4, waveN: 0, boatAt: 0.2, kills: 0, score: 0, flash: 0 });\n  S.pl = { x: 32, y: 112, lvl: 0, lvlT: 0, ft: 0 };\n  fill(S);\n  params.s = S;\n}\n\nfunction shoot(S, x, y, a, v, c, big) {\n  if (S.eb.length \u003c 380) S.eb.push({ x, y, vx: cos(a) * v, vy: sin(a) * v, c, big });\n}\nfunction fan(S, x, y, m, gap, v) {\n  const g = atan2(S.pl.y - y, S.pl.x - x);\n  for (let i = 0; i \u003c m; i++) shoot(S, x, y, g + (i - (m - 1) / 2) * gap, v, 2, 0);\n}\nfunction boom(S, x, y, s) {\n  const sp = [];\n  for (let i = 0; i \u003c 4 + s * 3; i++) {\n    const a = rnd(0, 6.283);\n    sp.push(cos(a) * rnd(20, 50) * s, sin(a) * rnd(20, 50) * s);\n  }\n  S.fx.push({ x, y, t0: S.t, s, sp, d: 0.45 + 0.12 * s });\n}\nfunction score(S, x, y, v) {\n  S.pop.push({ x, y, v, t0: S.t });\n  S.score += v;\n}\n// A hit; a kill leaves an explosion, its score, and every ninth a capsule.\nfunction hurt(S, e, n, x, y) {\n  e.fl = 0.06;\n  if ((e.hp -= n) > 0) return;\n  boom(S, x, y, e.boat ? 1.3 : 1);\n  score(S, x, y - 4, e.boat ? 300 : e.k ? 150 : 100);\n  if (++S.kills % 9 === 0) S.caps.push({ x, y });\n}\nconst boatY = (S, b) => floor(S.scroll) + H - 1 - round(b.wy);\nconst yOf = (S, e) => (e.boat ? boatY(S, e) : e.y);\n\nfunction spawn(S) {\n  const w = S.waves;\n  if (S.t >= S.waveAt) {\n    const n = S.waveN++, m = 4 + round(w);\n    if (n % 2 === 0) {\n      const o = { k: 0, side: n % 4 ? -1 : 1, y0: rnd(8, 30) };\n      for (let i = 0; i \u003c m; i++) S.en.push({ ...o, born: S.t + i * 0.3, x: -99, y: -99, hp: 6 });\n    } else {\n      const cx = rnd(24, 40);\n      for (let i = 0; i \u003c (m | 1); i++) {\n        const r = (i + 1) >> 1;\n        S.en.push({ k: 1, born: S.t, x: cx + (i & 1 ? r : -r) * 6, y: -8 - r * 6, hy: 34 - r * 6, st: 0, hp: 7, hold: 0.5 + r * 0.25 + rnd(0, 0.2) });\n      }\n    }\n    S.waveAt = S.t + (n === 0 ? 0.45 : S.boss ? 2 : 1) * (3.3 / w ** 0.75);\n  }\n  if (S.t \u003c S.boatAt) return;\n  // A gunboat, where its hull fits on open water.\n  const wy = floor(S.scroll) + H + 8;\n  S.boatAt = S.t + 0.3;\n  for (let n = 0; n \u003c 6; n++) {\n    const x = floor(rnd(6, 58));\n    let ok = true;\n    for (let j = -7; j \u003c= 7; j += 2) for (let i = -4; i \u003c= 4; i += 2) ok &&= S.ter[((wy + j) & 255) * W + x + i] \u003c= CAP;\n    if (ok) return S.boats.push({ boat: 1, x, wy, hp: 10, ft: rnd(0.6, 1.6) }), (S.boatAt += rnd(1.1, 2.7) / w ** 0.7);\n  }\n}\n\nfunction stepEnemies(S, d) {\n  const f = S.fury;\n  for (const e of S.en) {\n    const a = S.t - e.born;\n    e.fl -= d;\n    if (a \u003c 0) continue;\n    if (e.k === 0) {\n      e.x = e.side > 0 ? -6 + 38 * a : 70 - 38 * a;\n      e.y = e.y0 + 14 * a + 13 * sin(3.2 * a);\n    } else if (e.st === 0) {\n      if ((e.y += 50 * d) >= e.hy) ((e.st = 1), (e.t1 = S.t));\n    } else if (e.st === 1) {\n      if (S.t - e.t1 > e.hold) {\n        const g = atan2(S.pl.y - e.y, S.pl.x - e.x);\n        ((e.st = 2), (e.vx = cos(g) * 30), (e.vy = sin(g) * 30));\n        if (Math.random() \u003c 0.35 + 0.65 * f) fan(S, e.x, e.y + 3, 1 + 2 * round(f * 1.5), 0.25, 42);\n      }\n    } else {\n      const k = min(130, hypot(e.vx, e.vy) + 110 * d) / hypot(e.vx, e.vy);\n      e.x += (e.vx *= k) * d;\n      e.y += (e.vy *= k) * d;\n    }\n  }\n  S.en = S.en.filter((e) => e.hp > 0 && e.y \u003c 140 && e.x > -20 && e.x \u003c 84);\n  for (const b of S.boats) {\n    const sy = boatY(S, b);\n    b.fl -= d;\n    b.a = atan2(S.pl.y - sy + 3, S.pl.x - b.x);\n    if ((b.ft -= d) \u003c= 0 && sy > 2 && sy \u003c 96) {\n      b.ft = 2.2 - 1.3 * f;\n      for (let i = f > 0.5 ? -1 : 0; i \u003c= (f > 0.5 ? 1 : 0); i++) shoot(S, b.x + cos(b.a) * 4, sy - 3 + sin(b.a) * 4, b.a + i * 0.25, 38, 2, 0);\n    }\n  }\n  S.boats = S.boats.filter((b) => b.hp > 0 && boatY(S, b) \u003c 140);\n}\n\nfunction stepBoss(S, d) {\n  const f = S.fury;\n  // The first boss is short, so its fight fits the first seconds.\n  if (!S.boss && S.t >= S.bossAt) S.boss = { x: 32, y: -34, t0: S.t, st: 0, hp: S.bossN ? 320 + 40 * S.bossN : 60, ph: S.bossN ? 2.8 : 1.6, ang: 0 };\n  const B = S.boss;\n  if (!B) return;\n  B.fl -= d;\n  if (B.st === 2) {\n    if (!(S.t \u003c B.nd)) {\n      boom(S, B.x + rnd(-22, 22), B.y + rnd(4, 24), rnd(0.7, 1.4));\n      B.nd = S.t + 0.07;\n    }\n    if (S.t - B.t2 > 1.7) {\n      boom(S, B.x, B.y + 12, 3.2);\n      for (let i = 0; i \u003c 6; i++) boom(S, B.x + rnd(-24, 24), B.y + rnd(4, 26), rnd(1, 1.8));\n      score(S, B.x - 6, B.y + 14, 5000);\n      S.caps.push({ x: B.x, y: B.y + 20 });\n      Object.assign(S, { flash: 0.75, boss: null, bossAt: S.t + rnd(18, 30), bossN: S.bossN + 1 });\n    }\n  } else if (B.st === 0) {\n    const u = min(1, (S.t - B.t0) / 1.4);\n    B.y = -34 + 40 * (1 - (1 - u) * (1 - u));\n    if (u >= 1) ((B.st = 1), (B.t1 = S.t));\n  } else {\n    // In turns: a ring, a spiral, aimed fans from the wing guns.\n    B.x = 32 + 3 * sin((S.t - B.t1) * 0.8);\n    const ph = floor((S.t - B.t1) / B.ph) % 3;\n    if (ph === 0 && !(S.t \u003c B.nr)) {\n      const n = floor(12 + 18 * f), a0 = rnd(0, 6.283);\n      B.nr = S.t + 1.5 - 0.8 * f;\n      for (let i = 0; i \u003c n; i++) shoot(S, B.x, B.y + 11, a0 + (i * 2 * PI) / n, 28, 0, 1);\n    }\n    if (ph === 1 && !(S.t \u003c B.nx)) {\n      const arms = f > 0.5 ? 3 : 2;\n      B.nx = S.t + 1 / (7 + 23 * f);\n      B.ang += 0.37;\n      for (let i = 0; i \u003c arms; i++) shoot(S, B.x, B.y + 11, B.ang + (i * 2 * PI) / arms, 32, 1, 0);\n    }\n    if (ph === 2 && !(S.t \u003c B.nf)) {\n      B.nf = S.t + 1.05 - 0.55 * f;\n      for (const s of [-1, 1]) fan(S, B.x + s * 19.5, B.y + 10, 3 + round(6 * f), 0.12 + 0.1 * f, 42);\n    }\n  }\n}\n\nfunction stepPlayer(S, d) {\n  const P = S.pl, B = S.boss;\n  if ((P.lvlT -= d) \u003c= 0 && P.lvl > 0) ((P.lvl -= 1), (P.lvlT = 14));\n  // Its aim: the boss, a capsule, or half way from its weave to the nearest enemy.\n  const wv = 32 + 18 * sin(S.t * 0.53);\n  let ax = wv, ny = -99;\n  if (B && B.st > 0) ax = B.x + 10 * sin(S.t * 1.1);\n  else if (S.caps.length) ax = S.caps[0].x;\n  else for (const e of [...S.en, ...S.boats]) if (yOf(S, e) > max(0, ny) && yOf(S, e) \u003c P.y - 14) ((ny = yOf(S, e)), (ax = 0.55 * e.x + 0.45 * wv));\n  // Then the nearby spot the bullets will miss on its way there.\n  let best = 1e9, bx = P.x, by = P.y;\n  for (const ox of [-14, -9, -5, -2, 0, 2, 5, 9, 14])\n    for (const oy of [-8, -3, 0, 4]) {\n      const cx = clamp(P.x + ox, 5, 58), cy = clamp(P.y + oy, 96, 116), dist = max(0.01, hypot(cx - P.x, cy - P.y));\n      let c = 0.05 * abs(cx - ax) + 0.04 * abs(cy - 111) + 0.015 * dist;\n      for (const b of S.eb)\n        for (const tau of abs(b.y - cy) \u003c 45 ? [0.05, 0.12, 0.2, 0.3, 0.42] : []) {\n          const k = min(1, (60 * tau) / dist), dx = b.x + b.vx * tau - P.x - (cx - P.x) * k, dy = b.y + b.vy * tau - P.y - (cy - P.y) * k;\n          c += max(0, 30 - dx * dx - 0.7 * dy * dy) / (tau \u003c 0.15 ? 6 : 15);\n        }\n      if (c \u003c best) ((best = c), (bx = cx), (by = cy));\n    }\n  P.x += clamp(bx - P.x, -60 * d, 60 * d);\n  P.y += clamp(by - P.y, -60 * d, 60 * d);\n  // Two streams, three after a capsule, five after two.\n  for (P.ft -= d; P.ft \u003c= 0; P.ft += 0.1)\n    for (const [x, vx] of [[-2, 0], [2, 0], [0, 0], [-3, -38], [3, 38]].slice(0, [2, 3, 5][P.lvl])) S.ps.push({ x: P.x + x, y: P.y - 5, vx, vy: -170 });\n}\n\nfunction stepShots(S, d) {\n  const B = S.boss, P = S.pl;\n  for (const s of S.ps) {\n    s.x += s.vx * d;\n    s.y += s.vy * d;\n    if (s.y \u003c -4) s.dead = 1;\n    for (const e of [...S.en, ...S.boats]) if (!s.dead && e.hp > 0 && abs(s.x - e.x) \u003c= 4 && abs(s.y - yOf(S, e)) \u003c= (e.boat ? 6 : 4)) ((s.dead = 1), hurt(S, e, 1, e.x, yOf(S, e)));\n    const ix = round(s.x - B?.x + 28), iy = round(s.y - B?.y);\n    if (!s.dead && B?.st === 1 && ix >= 0 && ix \u003c 56 && iy >= 0 && iy \u003c 30 && BOSS.mask[iy * 56 + ix]) ((s.dead = 1), (B.fl = 0.05), (S.score += 10), --B.hp);\n  }\n  // A bullet that reaches the fighter bursts on its shield.\n  for (const b of S.eb) {\n    b.x += b.vx * d;\n    b.y += b.vy * d;\n    if (b.x \u003c -3 || b.x > 66 || b.y \u003c -3 || b.y > 130) b.dead = 1;\n    else if (abs(b.x - P.x) \u003c 1.6 && abs(b.y - P.y) \u003c 2.5) ((b.dead = 1), boom(S, b.x, b.y, 0.4));\n  }\n  if (B?.st === 1 && B.hp \u003c= 0) ((B.st = 2), (B.t2 = S.t), (S.eb.length = 0));\n  for (const c of S.caps) {\n    c.y += 14 * d;\n    if (abs(c.x - P.x) \u003c 6 && abs(c.y - P.y) \u003c 7) ((c.dead = 1), (P.lvl = min(2, P.lvl + 1)), (P.lvlT = 16));\n  }\n  for (const k of [\"ps\", \"eb\", \"caps\"]) S[k] = S[k].filter((o) => !o.dead && o.y \u003c 134);\n  S.fx = S.fx.filter((f) => S.t - f.t0 \u003c f.d);\n  S.pop = S.pop.filter((p) => S.t - p.t0 \u003c 0.9);\n}\n\nfunction step(S, d) {\n  S.t += d;\n  S.scroll += V0 * d;\n  S.flash = max(0, S.flash - 2.6 * d);\n  fill(S);\n  spawn(S);\n  stepEnemies(S, d);\n  stepBoss(S, d);\n  stepPlayer(S, d);\n  stepShots(S, d);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.stage, S.waves, S.fury] = [clamp(k[0], 0, 1), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  // The first second plays before the first frame.\n  if (!S.started) {\n    S.started = 1;\n    for (let i = 0; i \u003c 30; i++) step(S, 1 / 30);\n  }\n  // The bomb clears the bullets and hurts everything on the screen.\n  if (input.btnPressed?.[0]) {\n    Object.assign(S, { flash: 0.9, bomb: S.t, eb: [] });\n    for (const e of [...S.en, ...S.boats]) if (e.hp > 0 && yOf(S, e) > 0) hurt(S, e, 4, e.x, yOf(S, e));\n    if (S.boss?.st === 1) S.boss.hp -= 15;\n  }\n  for (let d = (clamp(dt || 0, 0, 0.1) * clamp(k[1], 0.2, 3)) / 2; d > 0; d -= 1 / 30) step(S, min(d, 1 / 30));\n}\n\nfunction put(buf, x, y, r, g, b) {\n  const q = (round(y) * W + round(x)) * 3;\n  if (x > -0.5 && y > -0.5 && x \u003c W - 0.5 && y \u003c H - 0.5) ((buf[q] = r), (buf[q + 1] = g), (buf[q + 2] = b));\n}\nfunction mix(buf, q, r, g, b, a) {\n  buf[q] += (r - buf[q]) * a;\n  buf[q + 1] += (g - buf[q + 1]) * a;\n  buf[q + 2] += (b - buf[q + 2]) * a;\n}\n// Mode 1 draws a sprite white, 2 stamps its shadow.\nfunction spr(S, sp, x0, y0, mode, glow) {\n  const p = sp.px;\n  for (let i = 0; i \u003c p.length; i += 3) {\n    const x = x0 + p[i], y = y0 + p[i + 1], c = mode ? 0xffffff : p[i + 2];\n    if (mode === 2) {\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) S.sh[y * W + x] = min(S.sh[y * W + x], 0.55);\n    } else if (c \u003c 0) put(S.buf, x, y, ...glow);\n    else put(S.buf, x, y, c >> 16, (c >> 8) & 255, c & 255);\n  }\n}\nfunction number(buf, v, x0, y0, r, g, b) {\n  const s = String(v);\n  for (let n = 0; n \u003c s.length; n++)\n    for (let j = 0; j \u003c 15; j++) if ((GLYPH[\"0123456789PA\".indexOf(s[n])] >> (14 - j)) & 1) put(buf, x0 + n * 4 + (j % 3), y0 + floor(j / 3), r, g, b);\n}\n// A ring of width w, or a disc for w 0.\nfunction ring(buf, cx, cy, R, w, c) {\n  for (let y = floor(cy - R - w); y \u003c= cy + R + w; y++)\n    for (let x = floor(cx - R - w); x \u003c= cx + R + w; x++) if (w ? abs(hypot(x - cx, y - cy) - R) \u003c w : hypot(x - cx, y - cy) \u003c= R) put(buf, x, y, ...c);\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { buf, sh, cb, pl: P, boss: B, t } = S,\n    si = min(3, floor(S.stage * 4)), pal = PALS[si];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, wy = floor(S.scroll) + H - 1 - y; x \u003c W; x++) {\n      let k = S.ter[(wy & 255) * W + x];\n      if (k === CAP && (t * 1.6 + hash(x, wy, 3) * 4) % 2 > 1.55) k = WAVE;\n      put(buf, x, y, pal[k * 3], pal[k * 3 + 1], pal[k * 3 + 2]);\n      if (si === 2 && k === FLDA && (x + wy) % 2 === 0 && hash(x, wy, 5) \u003c 0.4) put(buf, x, y, 255, 214, 110);\n      const h = si === 3 && k === DEEP ? hash(x, wy, 6) : 1;\n      if (h \u003c 0.035) put(buf, x, y, ...Array(3).fill(90 + 4600 * h * (0.7 + 0.3 * sin(t * 4 + x * y))));\n    }\n  for (const b of S.boats) {\n    const y = boatY(S, b);\n    spr(S, BOAT, b.x - 3, y - 6, b.fl > 0 ? 1 : 0);\n    for (let i = 1; i \u003c= 3; i++) put(buf, b.x + cos(b.a) * i, y - 3 + sin(b.a) * i, 30, 30, 40);\n  }\n  // Shadows, then the clouds. Thick fire dims the ground as bullet-hell games do.\n  const C = CLOUDS[si];\n  cb.fill(0);\n  for (const c of S.clouds)\n    for (let j = 0, sy = floor(S.scroll * CLOUD) + H - 1 - c.cw; j \u003c c.h; j++)\n      for (let i = 0, x = c.x, y = sy + j; i \u003c c.w; i++, x++) if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && c.m[j * c.w + i]) cb[y * W + x] = c.m[j * c.w + i];\n  for (let i = 0; i \u003c N; i++) sh[i] = (i % W >= 6 && i >= 9 * W && cb[i - 9 * W - 6] ? C[5] : 1) * (1 - 0.36 * S.fury);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) + 2, round(e.y) + 6, 2);\n  if (B) spr(S, BOSS, round(B.x) - 22, round(B.y) + 9, 2);\n  spr(S, PLAYER, round(P.x) + 1, round(P.y) + 3, 2);\n  for (let i = 0; i \u003c N; i++) {\n    const l = cb[i], k = l === 1 ? C[3] : 1;\n    mix(buf, i * 3, 0, 0, 0, 1 - sh[i]);\n    if (l) mix(buf, i * 3, C[0] * k, C[1] * k, C[2] * k, C[4]);\n  }\n  for (const c of S.caps) ring(buf, c.x, c.y, 2.9, 0, floor(t * 7) % 2 ? [230, 40, 50] : [40, 90, 240]), number(buf, \"P\", c.x - 1, c.y - 2, 255, 255, 255);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) - 3, round(e.y) - 3, e.fl > 0 ? 1 : 0);\n  // The boss's core pulses cyan, or red as the fury rises.\n  const f = S.fury, p = 0.5 + 0.5 * sin(t * 9);\n  if (B) spr(S, BOSS, round(B.x) - 28, round(B.y), (B.st === 2 ? floor(t * 16) % 2 : B.fl > 0 && floor(t * 20) % 4 === 0) ? 1 : 0, [120 + 135 * f + 60 * p, 230 - 170 * f + 25 * p * (1 - f), 255 - 215 * f]);\n  for (const ex of [3, 5])\n    for (let j = 0, L = 2 + ((t * 24 + ex) % 3 | 0), c; j \u003c L; j++) put(buf, round(P.x) - 4 + ex, round(P.y) + 5 + j, 255 - 12 * (c = min(3, j + (L \u003c 3))) * c, 255 - 65 * c, 220 - 70 * c);\n  spr(S, PLAYER, round(P.x) - 4, round(P.y) - 5, 0);\n  for (const s of S.ps) for (let j = 0; j \u003c 3; j++) put(buf, s.x, s.y + j, 255, 255 - 28 * j, 230 - 85 * j);\n  // Explosions: a white flash, a ring cooling from yellow to red, sparks.\n  for (const f of S.fx) {\n    const a = (t - f.t0) / f.d, R = (1.5 + 4.5 * a) * f.s;\n    if (a \u003c 0.16) ring(buf, f.x, f.y, (1 + 10 * a) * f.s, 0, [255, 255, 235]);\n    else if (a \u003c 0.5) ring(buf, f.x, f.y, R * 0.5, 0, [255, a \u003c 0.3 ? 210 : 120, 40]);\n    if (a >= 0.16) ring(buf, f.x, f.y, R, 0.75, a \u003c 0.45 ? [255, 220, 80] : a \u003c 0.72 ? [255, 130, 30] : [180, 46, 24]);\n    for (let i = 0; a \u003c 0.85 && i \u003c f.sp.length; i += 2) put(buf, f.x + f.sp[i] * a * f.d, f.y + f.sp[i + 1] * a * f.d, 255, 245, 170);\n  }\n  for (const b of S.eb) {\n    const c = BUL[b.c];\n    for (let i = 0; i \u003c 9; i++) if (i % 2 || (b.big && i !== 4)) put(buf, b.x + (i % 3) - 1, b.y + floor(i / 3) - 1, ...c.map((v) => (i % 2 ? v : v * 0.6)));\n    put(buf, b.x, b.y, 255, 255, 255);\n  }\n  for (const p of S.pop) {\n    const a = (t - p.t0) / 0.9;\n    if (a \u003c 0.75 || floor(t * 20) % 2) number(buf, p.v, round(p.x - String(p.v).length * 2), round(p.y - a * 9), 255, 240, 120);\n  }\n  if (t - S.bomb \u003c 1) ring(buf, P.x, P.y, (t - S.bomb) * 150, 1.6, [200, 250, 255]);\n  for (let i = 0; S.flash > 0 && i \u003c N * 3; i++) buf[i] += (255 - buf[i]) * min(1, S.flash) * 0.85;\n  for (let i = 0; i \u003c 7 * W; i++) if (i % W \u003c 26 || i % W >= 50) mix(buf, i * 3, 0, 0, 0, 0.82);\n  number(buf, String(S.score % 1e6).padStart(6, \"0\"), 1, 1, 255, 255, 255);\n  number(buf, \"AAA\", 52, 1, 220, 228, 240);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","layer":{"id":"layer-shoot-em-up","type":"code","name":"shoot-em-up","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shoot 'em Up\n// Family:  pixel\n// Idea:    An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the vertically scrolling arcade shooters of the 1980s\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1\n//\n// Knob 1: Stage. Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars.\n// Knob 2: Speed. The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in.\n// Knob 3: Waves. From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats.\n// Knob 4: Bullets. How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read.\n// Buttons: K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, abs, atan2, hypot, floor, round, sqrt, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = (a, b) => a + (b - a) * Math.random();\n// Ground scroll at Speed 2 in LEDs a second; clouds go 1.8 times as fast.\nconst V0 = 12, CLOUD = 1.8;\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), u = (x -= ix) * x * (3 - 2 * x), v = (y -= iy) * y * (3 - 2 * y);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\n\n// Ground types, one colour each in every stage's palette.\nconst [DEEP, WAVE, CAP, SHAL, SAND, GRASS, TREE, FLDA, FLDB, ROAD, ROOF, WALL, TRUNK, RIVER, LIGHT, HEDGE] = [...Array(16).keys()];\nconst PALS = [\n  \"123c9a1e5cc4d2ecff2aa8ccf0d4884aae3c1f6a2a9ccc4a6e9a3076706ad8482ef2e6c88a5a2a2c7ed8fff2c02e5226\",\n  \"5c20188a3a22d8966ab4502af0b464dc9a4c4a8a3cf2c278c8843e6e4630c8602ef6dcaa5a34182aa89affe6aa7a2c1a\",\n  \"0c1846172a628ca8e61c386a50506a163e340e2c2440446a2a2c481e1e30b43c96ffd25a2e222412265effa83c1c1c2c\",\n  \"08061c1e0e40e6e6ff34185e9a90885a62804c4440868ca8464c661c2034ff3c3cb8c2d83c343228dcff78ffc82a2e40\",\n].map((s) => s.match(/../g).map((h) => parseInt(h, 16)));\n// Clouds per stage: colour, underside shade, alpha, shadow shade.\nconst CLOUDS = [\n  [236, 242, 255, 0.74, 0.72, 0.62],\n  [236, 200, 156, 0.78, 0.6, 0.7],\n  [84, 96, 146, 0.7, 0.66, 0.72],\n  [150, 76, 214, 0.6, 0.5, 1],\n];\n\n// Sprites are rows of letters, \".\" clear; a mirrored one is its left half.\nfunction mk(src, pal, mirror) {\n  const rows = src.trim().split(/\\s+/), w = rows[0].length * (mirror ? 2 : 1), px = [], mask = new Uint8Array(w * rows.length);\n  rows.forEach((r, j) => {\n    for (let i = 0; i \u003c r.length; i++)\n      if (r[i] !== \".\") for (const x of mirror ? [i, w - 1 - i] : [i]) px.push(x, j, pal[r[i]]), (mask[j * w + x] = 1);\n  });\n  return { px, mask };\n}\nconst PLAYER = mk(\"....w.... ...wcw... ...wbw... ..gwbwg.. ..gwwwg.. .wgwwwgw. wwwwgwwww rww.g.wwr r..www..r ...r.r...\", { w: 0xdce4f0, c: 0x96f0ff, b: 0x286ee6, g: 0x828ca0, r: 0xe62832 });\nconst FIGHTER = mk(\"o.....o oo.d.oo ooodooo .odwdo. ..ddd.. ...d...\", { o: 0xff8c1e, d: 0xaa3214, w: 0xfff0c8 });\nconst DART = mk(\"mm...mm mmm.mmm .mmmmm. .mmcmm. ..mmm.. ..mdm.. ...m...\", { m: 0xd246e6, c: 0x78f0ff, d: 0x6e1e8c });\nconst BOAT = mk(\".kkkkk. kbbbbbk kbaaabk kbaaabk kbbbbbk kbbbbbk kbaaabk kbbbbbk .kbbbk. .kbbbk. ..kbk.. ...k...\", { k: 0x1e2028, b: 0x969baa, a: 0x5a5f6e });\n// The boss, 56 wide; \"e\" is its glowing core.\nconst BOSS = mk(\n  `\n.............kkgggk..kkkkkkk\nkk...........kacccc..kbbbbbb\nkykkk........kabbbc..kbbrrbb\nkybbbkkk.....kabbbc..kbbrrbb\nkbbbbbbbkk...kabbbc..kbbbbbb\nkbbbbbbbbbkkkbabbbc..kbbbbbb\nkbbrrrbbbbbbbbabbbc..kbbbkkk\nkaarrrrrrbbbbbabbbc..kbbbkee\nkccabbrrrrrrbbabbbckkbbbbkee\n.kkcaabgggrrrrabbbcbbbbbbkee\n...kcaagygbbrrrrrrbbbbbbbkee\n....kacgggbbbbbrrrrrrbbbbkee\n......kkcaabbbbbbbrrrbbbbkee\n........kacaaabgggbbbbbbbkee\n.........kkccabgygbbbbbbbkee\n...........kkaagggbbbbbbbkee\n.............kccaabbbbbbbkkk\n..............kkccabbbbbbbbb\n................kkcaabbbbbbb\n..................kccbbyybbb\n...................kkabbbbbb\n.....................kabbbbb\n.....................kcbbbbb\n......................kabbbb\n.......................kabbg\n.......................kcbbg\n........................kabg\n.........................kag\n.........................kcg\n..........................kg`,\n  { k: 0x14141e, c: 0x464a60, a: 0x787e96, b: 0xb4bacc, r: 0xdc323c, y: 0xffd646, g: 0x2c2c38, e: -1 },\n  true,\n);\nconst PALM = \"t.t.t .ttt. ttktt .ttt. t.t.t\".split(\" \");\n// 3x5 digits, a P, and a ship for the lives; one octal digit per row.\nconst GLYPH = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717, 0o75744, 0o22775];\nconst BUL = [\n  [255, 70, 170],\n  [70, 220, 255],\n  [255, 170, 40],\n];\n\n// The map repeats every 1024 rows: sea, coast, fields, town, river, coast. -1 is sea, 1 land.\nfunction profile(x, wy) {\n  const v = (wy % 1024) + 0.3 * (x - 32);\n  return v \u003c 250 || v > 830 ? -1 : v \u003c 290 ? (v - 270) / 20 : v \u003c 790 ? 1 : (810 - v) / 20;\n}\nconst ISL = {};\nfunction islands(sd, x, wy) {\n  let best = 0;\n  for (let j = floor(wy / 44) - 1, j1 = j + 2; j \u003c= j1; j++)\n    for (let i = floor(x / 32) - 1, i1 = i + 2; i \u003c= i1; i++) {\n      const ix = i * 32 + 4 + hash(i, j, sd + 2) * 24, iy = j * 44 + 6 + hash(i, j, sd + 3) * 32, r = 12 + hash(i, j, sd + 4) * 10;\n      const b = 1.9 * (1 - hypot(x - ix, wy - iy) / r);\n      if (b > best && hash(i, j, sd + 1) \u003c 0.7) ((best = b), (ISL.x = ix), (ISL.y = iy), (ISL.r = r));\n    }\n  return best;\n}\nfunction terrain(sd, x, wy) {\n  const pr = profile(x, wy);\n  let e = pr + 0.5 * (noise(x / 11, wy / 11, sd) - 0.5) + 0.24 * (noise(x / 4.5, wy / 4.5, sd + 9) - 0.5);\n  if (pr \u003c 0) e += islands(sd, x, wy) * min(1, -pr);\n  if (e \u003c -0.08) {\n    if (e > -0.12) return CAP;\n    if (e > -0.21) return SHAL;\n    const cx = x >> 3, cy = floor(wy / 5), h = hash(cx, cy, sd + 21), c0 = cx * 8 + floor(hash(cx, cy, sd + 22) * 6);\n    if (h \u003c 0.4 && wy === cy * 5 + floor(hash(cx, cy, sd + 23) * 4) && x >= c0 && x \u003c c0 + (h \u003c 0.15 ? 3 : 2)) return CAP;\n    return e > -0.36 || noise(x / 6, wy / 2, sd + 5) > 0.78 ? WAVE : DEEP;\n  }\n  if (e \u003c 0.08) return SAND;\n  if (pr \u003c -0.5) {\n    const dx = round(x - ISL.x), dy = round(wy - ISL.y), c = ISL.r > 13 && abs(dx) \u003c= 2 && abs(dy) \u003c= 2 ? PALM[dy + 2][dx + 2] : \".\";\n    return c === \".\" ? GRASS : c === \"k\" ? TRUNK : TREE;\n  }\n  const u = wy % 1024, dr = abs(x - 30 - 9 * sin(wy / 70));\n  if (u > 560 && u \u003c 770) {\n    const a = (u - 560) / 34, dv = abs(x - 32 - 23 * sin(a)) / sqrt(1 + (0.68 * cos(a)) ** 2);\n    if (dv \u003c 4.4) return dr \u003c 2.6 ? (dr > 1.6 ? WALL : ROAD) : dv \u003c 3.3 ? RIVER : SAND;\n  }\n  if (dr \u003c 1.6) return dr \u003c 0.6 && wy % 6 \u003c 3 ? LIGHT : ROAD;\n  if (u > 420 && u \u003c 510 && dr \u003c 22 + 6 * sin(wy / 9)) {\n    // The town: in each plot a house (roof, front wall, shadow) or a tree.\n    const lx = (x + 4) % 9, ly = wy % 9;\n    if (lx === 0 || ly === 0) return ROAD;\n    if (hash(floor((x + 4) / 9), floor(wy / 9), sd + 41) > 0.6) return hypot(lx - 4.5, ly - 4.5) \u003c 2.7 ? TREE : GRASS;\n    if (lx >= 2 && lx \u003c= 6 && ly >= 2) return ly === 2 ? WALL : ly > 7 ? GRASS : lx === 4 ? TRUNK : ROOF;\n    return (lx === 7 && ly >= 2 && ly \u003c= 6) || (ly === 1 && lx >= 3) ? HEDGE : GRASS;\n  }\n  const band = floor(wy / 14), gx = x + floor(hash(band, 0, sd + 51) * 16), h = hash(floor(gx / 16), band, sd + 52);\n  if (gx % 16 === 0 || wy % 14 === 0) return h \u003c 0.6 ? HEDGE : GRASS;\n  const kind = floor(h * 4);\n  if (kind \u003c 3) return (kind ? (kind > 1 ? hash(gx, wy, sd + 53) \u003c 0.12 : gx % 3 === 0) : wy % 3 === 0) ? FLDB : FLDA;\n  const tx = floor(gx / 5), ty = floor(wy / 5);\n  return hypot(gx - tx * 5 - 1 - hash(tx, ty, sd + 55) * 3, wy - ty * 5 - 1 - hash(tx, ty, sd + 56) * 3) \u003c 1.9 ? TREE : GRASS;\n}\n// A cloud: puffs on a flat base, 2 its body and 1 its underside.\nfunction newCloud(S, cw) {\n  const w = floor(rnd(22, 40)), h = floor(rnd(10, 16)), n = 3 + floor(w / 9), P = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = h * 0.5 * (0.5 + 0.5 * sin((PI * (i + 0.5)) / n)) + rnd(-0.6, 0.8);\n    P.push((w * (i + 0.5)) / n + rnd(-1.5, 1.5), h - 1.5 - r * 0.55, r);\n  }\n  const inn = (x, y) => x >= 0 && y >= 0 && x \u003c w && y \u003c= h - 1.5 && P.some((_, i) => i % 3 === 0 && hypot(x + 0.5 - P[i], y + 0.5 - P[i + 1]) \u003c P[i + 2]);\n  const m = new Uint8Array(w * h);\n  for (let y = 0; y \u003c h; y++) for (let x = 0; x \u003c w; x++) if (inn(x, y)) m[y * w + x] = inn(x, y + 2) ? 2 : 1;\n  S.clouds.push({ x: floor(rnd(-14, 56 - w / 2)), cw: cw + h, w, h, m });\n}\nfunction fill(S) {\n  for (const top = floor(S.scroll) + H + 24; S.gen \u003c top; S.gen++) for (let x = 0; x \u003c W; x++) S.ter[(S.gen & 255) * W + x] = terrain(S.sd, x, S.gen);\n  const cb = floor(S.scroll * CLOUD);\n  for (; S.cnext \u003c cb + H + 20; S.cnext += floor(rnd(24, 52))) newCloud(S, S.cnext);\n  S.clouds = S.clouds.filter((c) => cb + H - 1 - c.cw \u003c H);\n}\n\nexport function setup(params) {\n  const S = { t: 0, scroll: 85, gen: 83, cnext: 147, sd: floor(Math.random() * 9000), ter: new Uint8Array(256 * W), cb: new Uint8Array(N), buf: new Float32Array(N * 3), sh: new Float32Array(N) };\n  Object.assign(S, { clouds: [], en: [], boats: [], eb: [], ps: [], fx: [], pop: [], caps: [], bossAt: 3.2, bossN: 0, waveAt: 0.4, waveN: 0, boatAt: 0.2, kills: 0, score: 0, flash: 0 });\n  S.pl = { x: 32, y: 112, lvl: 0, lvlT: 0, ft: 0 };\n  fill(S);\n  params.s = S;\n}\n\nfunction shoot(S, x, y, a, v, c, big) {\n  if (S.eb.length \u003c 380) S.eb.push({ x, y, vx: cos(a) * v, vy: sin(a) * v, c, big });\n}\nfunction fan(S, x, y, m, gap, v) {\n  const g = atan2(S.pl.y - y, S.pl.x - x);\n  for (let i = 0; i \u003c m; i++) shoot(S, x, y, g + (i - (m - 1) / 2) * gap, v, 2, 0);\n}\nfunction boom(S, x, y, s) {\n  const sp = [];\n  for (let i = 0; i \u003c 4 + s * 3; i++) {\n    const a = rnd(0, 6.283);\n    sp.push(cos(a) * rnd(20, 50) * s, sin(a) * rnd(20, 50) * s);\n  }\n  S.fx.push({ x, y, t0: S.t, s, sp, d: 0.45 + 0.12 * s });\n}\nfunction score(S, x, y, v) {\n  S.pop.push({ x, y, v, t0: S.t });\n  S.score += v;\n}\n// A hit; a kill leaves an explosion, its score, and every ninth a capsule.\nfunction hurt(S, e, n, x, y) {\n  e.fl = 0.06;\n  if ((e.hp -= n) > 0) return;\n  boom(S, x, y, e.boat ? 1.3 : 1);\n  score(S, x, y - 4, e.boat ? 300 : e.k ? 150 : 100);\n  if (++S.kills % 9 === 0) S.caps.push({ x, y });\n}\nconst boatY = (S, b) => floor(S.scroll) + H - 1 - round(b.wy);\nconst yOf = (S, e) => (e.boat ? boatY(S, e) : e.y);\n\nfunction spawn(S) {\n  const w = S.waves;\n  if (S.t >= S.waveAt) {\n    const n = S.waveN++, m = 4 + round(w);\n    if (n % 2 === 0) {\n      const o = { k: 0, side: n % 4 ? -1 : 1, y0: rnd(8, 30) };\n      for (let i = 0; i \u003c m; i++) S.en.push({ ...o, born: S.t + i * 0.3, x: -99, y: -99, hp: 6 });\n    } else {\n      const cx = rnd(24, 40);\n      for (let i = 0; i \u003c (m | 1); i++) {\n        const r = (i + 1) >> 1;\n        S.en.push({ k: 1, born: S.t, x: cx + (i & 1 ? r : -r) * 6, y: -8 - r * 6, hy: 34 - r * 6, st: 0, hp: 7, hold: 0.5 + r * 0.25 + rnd(0, 0.2) });\n      }\n    }\n    S.waveAt = S.t + (n === 0 ? 0.45 : S.boss ? 2 : 1) * (3.3 / w ** 0.75);\n  }\n  if (S.t \u003c S.boatAt) return;\n  // A gunboat, where its hull fits on open water.\n  const wy = floor(S.scroll) + H + 8;\n  S.boatAt = S.t + 0.3;\n  for (let n = 0; n \u003c 6; n++) {\n    const x = floor(rnd(6, 58));\n    let ok = true;\n    for (let j = -7; j \u003c= 7; j += 2) for (let i = -4; i \u003c= 4; i += 2) ok &&= S.ter[((wy + j) & 255) * W + x + i] \u003c= CAP;\n    if (ok) return S.boats.push({ boat: 1, x, wy, hp: 10, ft: rnd(0.6, 1.6) }), (S.boatAt += rnd(1.1, 2.7) / w ** 0.7);\n  }\n}\n\nfunction stepEnemies(S, d) {\n  const f = S.fury;\n  for (const e of S.en) {\n    const a = S.t - e.born;\n    e.fl -= d;\n    if (a \u003c 0) continue;\n    if (e.k === 0) {\n      e.x = e.side > 0 ? -6 + 38 * a : 70 - 38 * a;\n      e.y = e.y0 + 14 * a + 13 * sin(3.2 * a);\n    } else if (e.st === 0) {\n      if ((e.y += 50 * d) >= e.hy) ((e.st = 1), (e.t1 = S.t));\n    } else if (e.st === 1) {\n      if (S.t - e.t1 > e.hold) {\n        const g = atan2(S.pl.y - e.y, S.pl.x - e.x);\n        ((e.st = 2), (e.vx = cos(g) * 30), (e.vy = sin(g) * 30));\n        if (Math.random() \u003c 0.35 + 0.65 * f) fan(S, e.x, e.y + 3, 1 + 2 * round(f * 1.5), 0.25, 42);\n      }\n    } else {\n      const k = min(130, hypot(e.vx, e.vy) + 110 * d) / hypot(e.vx, e.vy);\n      e.x += (e.vx *= k) * d;\n      e.y += (e.vy *= k) * d;\n    }\n  }\n  S.en = S.en.filter((e) => e.hp > 0 && e.y \u003c 140 && e.x > -20 && e.x \u003c 84);\n  for (const b of S.boats) {\n    const sy = boatY(S, b);\n    b.fl -= d;\n    b.a = atan2(S.pl.y - sy + 3, S.pl.x - b.x);\n    if ((b.ft -= d) \u003c= 0 && sy > 2 && sy \u003c 96) {\n      b.ft = 2.2 - 1.3 * f;\n      for (let i = f > 0.5 ? -1 : 0; i \u003c= (f > 0.5 ? 1 : 0); i++) shoot(S, b.x + cos(b.a) * 4, sy - 3 + sin(b.a) * 4, b.a + i * 0.25, 38, 2, 0);\n    }\n  }\n  S.boats = S.boats.filter((b) => b.hp > 0 && boatY(S, b) \u003c 140);\n}\n\nfunction stepBoss(S, d) {\n  const f = S.fury;\n  // The first boss is short, so its fight fits the first seconds.\n  if (!S.boss && S.t >= S.bossAt) S.boss = { x: 32, y: -34, t0: S.t, st: 0, hp: S.bossN ? 320 + 40 * S.bossN : 60, ph: S.bossN ? 2.8 : 1.6, ang: 0 };\n  const B = S.boss;\n  if (!B) return;\n  B.fl -= d;\n  if (B.st === 2) {\n    if (!(S.t \u003c B.nd)) {\n      boom(S, B.x + rnd(-22, 22), B.y + rnd(4, 24), rnd(0.7, 1.4));\n      B.nd = S.t + 0.07;\n    }\n    if (S.t - B.t2 > 1.7) {\n      boom(S, B.x, B.y + 12, 3.2);\n      for (let i = 0; i \u003c 6; i++) boom(S, B.x + rnd(-24, 24), B.y + rnd(4, 26), rnd(1, 1.8));\n      score(S, B.x - 6, B.y + 14, 5000);\n      S.caps.push({ x: B.x, y: B.y + 20 });\n      Object.assign(S, { flash: 0.75, boss: null, bossAt: S.t + rnd(18, 30), bossN: S.bossN + 1 });\n    }\n  } else if (B.st === 0) {\n    const u = min(1, (S.t - B.t0) / 1.4);\n    B.y = -34 + 40 * (1 - (1 - u) * (1 - u));\n    if (u >= 1) ((B.st = 1), (B.t1 = S.t));\n  } else {\n    // In turns: a ring, a spiral, aimed fans from the wing guns.\n    B.x = 32 + 3 * sin((S.t - B.t1) * 0.8);\n    const ph = floor((S.t - B.t1) / B.ph) % 3;\n    if (ph === 0 && !(S.t \u003c B.nr)) {\n      const n = floor(12 + 18 * f), a0 = rnd(0, 6.283);\n      B.nr = S.t + 1.5 - 0.8 * f;\n      for (let i = 0; i \u003c n; i++) shoot(S, B.x, B.y + 11, a0 + (i * 2 * PI) / n, 28, 0, 1);\n    }\n    if (ph === 1 && !(S.t \u003c B.nx)) {\n      const arms = f > 0.5 ? 3 : 2;\n      B.nx = S.t + 1 / (7 + 23 * f);\n      B.ang += 0.37;\n      for (let i = 0; i \u003c arms; i++) shoot(S, B.x, B.y + 11, B.ang + (i * 2 * PI) / arms, 32, 1, 0);\n    }\n    if (ph === 2 && !(S.t \u003c B.nf)) {\n      B.nf = S.t + 1.05 - 0.55 * f;\n      for (const s of [-1, 1]) fan(S, B.x + s * 19.5, B.y + 10, 3 + round(6 * f), 0.12 + 0.1 * f, 42);\n    }\n  }\n}\n\nfunction stepPlayer(S, d) {\n  const P = S.pl, B = S.boss;\n  if ((P.lvlT -= d) \u003c= 0 && P.lvl > 0) ((P.lvl -= 1), (P.lvlT = 14));\n  // Its aim: the boss, a capsule, or half way from its weave to the nearest enemy.\n  const wv = 32 + 18 * sin(S.t * 0.53);\n  let ax = wv, ny = -99;\n  if (B && B.st > 0) ax = B.x + 10 * sin(S.t * 1.1);\n  else if (S.caps.length) ax = S.caps[0].x;\n  else for (const e of [...S.en, ...S.boats]) if (yOf(S, e) > max(0, ny) && yOf(S, e) \u003c P.y - 14) ((ny = yOf(S, e)), (ax = 0.55 * e.x + 0.45 * wv));\n  // Then the nearby spot the bullets will miss on its way there.\n  let best = 1e9, bx = P.x, by = P.y;\n  for (const ox of [-14, -9, -5, -2, 0, 2, 5, 9, 14])\n    for (const oy of [-8, -3, 0, 4]) {\n      const cx = clamp(P.x + ox, 5, 58), cy = clamp(P.y + oy, 96, 116), dist = max(0.01, hypot(cx - P.x, cy - P.y));\n      let c = 0.05 * abs(cx - ax) + 0.04 * abs(cy - 111) + 0.015 * dist;\n      for (const b of S.eb)\n        for (const tau of abs(b.y - cy) \u003c 45 ? [0.05, 0.12, 0.2, 0.3, 0.42] : []) {\n          const k = min(1, (60 * tau) / dist), dx = b.x + b.vx * tau - P.x - (cx - P.x) * k, dy = b.y + b.vy * tau - P.y - (cy - P.y) * k;\n          c += max(0, 30 - dx * dx - 0.7 * dy * dy) / (tau \u003c 0.15 ? 6 : 15);\n        }\n      if (c \u003c best) ((best = c), (bx = cx), (by = cy));\n    }\n  P.x += clamp(bx - P.x, -60 * d, 60 * d);\n  P.y += clamp(by - P.y, -60 * d, 60 * d);\n  // Two streams, three after a capsule, five after two.\n  for (P.ft -= d; P.ft \u003c= 0; P.ft += 0.1)\n    for (const [x, vx] of [[-2, 0], [2, 0], [0, 0], [-3, -38], [3, 38]].slice(0, [2, 3, 5][P.lvl])) S.ps.push({ x: P.x + x, y: P.y - 5, vx, vy: -170 });\n}\n\nfunction stepShots(S, d) {\n  const B = S.boss, P = S.pl;\n  for (const s of S.ps) {\n    s.x += s.vx * d;\n    s.y += s.vy * d;\n    if (s.y \u003c -4) s.dead = 1;\n    for (const e of [...S.en, ...S.boats]) if (!s.dead && e.hp > 0 && abs(s.x - e.x) \u003c= 4 && abs(s.y - yOf(S, e)) \u003c= (e.boat ? 6 : 4)) ((s.dead = 1), hurt(S, e, 1, e.x, yOf(S, e)));\n    const ix = round(s.x - B?.x + 28), iy = round(s.y - B?.y);\n    if (!s.dead && B?.st === 1 && ix >= 0 && ix \u003c 56 && iy >= 0 && iy \u003c 30 && BOSS.mask[iy * 56 + ix]) ((s.dead = 1), (B.fl = 0.05), (S.score += 10), --B.hp);\n  }\n  // A bullet that reaches the fighter bursts on its shield.\n  for (const b of S.eb) {\n    b.x += b.vx * d;\n    b.y += b.vy * d;\n    if (b.x \u003c -3 || b.x > 66 || b.y \u003c -3 || b.y > 130) b.dead = 1;\n    else if (abs(b.x - P.x) \u003c 1.6 && abs(b.y - P.y) \u003c 2.5) ((b.dead = 1), boom(S, b.x, b.y, 0.4));\n  }\n  if (B?.st === 1 && B.hp \u003c= 0) ((B.st = 2), (B.t2 = S.t), (S.eb.length = 0));\n  for (const c of S.caps) {\n    c.y += 14 * d;\n    if (abs(c.x - P.x) \u003c 6 && abs(c.y - P.y) \u003c 7) ((c.dead = 1), (P.lvl = min(2, P.lvl + 1)), (P.lvlT = 16));\n  }\n  for (const k of [\"ps\", \"eb\", \"caps\"]) S[k] = S[k].filter((o) => !o.dead && o.y \u003c 134);\n  S.fx = S.fx.filter((f) => S.t - f.t0 \u003c f.d);\n  S.pop = S.pop.filter((p) => S.t - p.t0 \u003c 0.9);\n}\n\nfunction step(S, d) {\n  S.t += d;\n  S.scroll += V0 * d;\n  S.flash = max(0, S.flash - 2.6 * d);\n  fill(S);\n  spawn(S);\n  stepEnemies(S, d);\n  stepBoss(S, d);\n  stepPlayer(S, d);\n  stepShots(S, d);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.stage, S.waves, S.fury] = [clamp(k[0], 0, 1), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  // The first second plays before the first frame.\n  if (!S.started) {\n    S.started = 1;\n    for (let i = 0; i \u003c 30; i++) step(S, 1 / 30);\n  }\n  // The bomb clears the bullets and hurts everything on the screen.\n  if (input.btnPressed?.[0]) {\n    Object.assign(S, { flash: 0.9, bomb: S.t, eb: [] });\n    for (const e of [...S.en, ...S.boats]) if (e.hp > 0 && yOf(S, e) > 0) hurt(S, e, 4, e.x, yOf(S, e));\n    if (S.boss?.st === 1) S.boss.hp -= 15;\n  }\n  for (let d = (clamp(dt || 0, 0, 0.1) * clamp(k[1], 0.2, 3)) / 2; d > 0; d -= 1 / 30) step(S, min(d, 1 / 30));\n}\n\nfunction put(buf, x, y, r, g, b) {\n  const q = (round(y) * W + round(x)) * 3;\n  if (x > -0.5 && y > -0.5 && x \u003c W - 0.5 && y \u003c H - 0.5) ((buf[q] = r), (buf[q + 1] = g), (buf[q + 2] = b));\n}\nfunction mix(buf, q, r, g, b, a) {\n  buf[q] += (r - buf[q]) * a;\n  buf[q + 1] += (g - buf[q + 1]) * a;\n  buf[q + 2] += (b - buf[q + 2]) * a;\n}\n// Mode 1 draws a sprite white, 2 stamps its shadow.\nfunction spr(S, sp, x0, y0, mode, glow) {\n  const p = sp.px;\n  for (let i = 0; i \u003c p.length; i += 3) {\n    const x = x0 + p[i], y = y0 + p[i + 1], c = mode ? 0xffffff : p[i + 2];\n    if (mode === 2) {\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) S.sh[y * W + x] = min(S.sh[y * W + x], 0.55);\n    } else if (c \u003c 0) put(S.buf, x, y, ...glow);\n    else put(S.buf, x, y, c >> 16, (c >> 8) & 255, c & 255);\n  }\n}\nfunction number(buf, v, x0, y0, r, g, b) {\n  const s = String(v);\n  for (let n = 0; n \u003c s.length; n++)\n    for (let j = 0; j \u003c 15; j++) if ((GLYPH[\"0123456789PA\".indexOf(s[n])] >> (14 - j)) & 1) put(buf, x0 + n * 4 + (j % 3), y0 + floor(j / 3), r, g, b);\n}\n// A ring of width w, or a disc for w 0.\nfunction ring(buf, cx, cy, R, w, c) {\n  for (let y = floor(cy - R - w); y \u003c= cy + R + w; y++)\n    for (let x = floor(cx - R - w); x \u003c= cx + R + w; x++) if (w ? abs(hypot(x - cx, y - cy) - R) \u003c w : hypot(x - cx, y - cy) \u003c= R) put(buf, x, y, ...c);\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { buf, sh, cb, pl: P, boss: B, t } = S,\n    si = min(3, floor(S.stage * 4)), pal = PALS[si];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, wy = floor(S.scroll) + H - 1 - y; x \u003c W; x++) {\n      let k = S.ter[(wy & 255) * W + x];\n      if (k === CAP && (t * 1.6 + hash(x, wy, 3) * 4) % 2 > 1.55) k = WAVE;\n      put(buf, x, y, pal[k * 3], pal[k * 3 + 1], pal[k * 3 + 2]);\n      if (si === 2 && k === FLDA && (x + wy) % 2 === 0 && hash(x, wy, 5) \u003c 0.4) put(buf, x, y, 255, 214, 110);\n      const h = si === 3 && k === DEEP ? hash(x, wy, 6) : 1;\n      if (h \u003c 0.035) put(buf, x, y, ...Array(3).fill(90 + 4600 * h * (0.7 + 0.3 * sin(t * 4 + x * y))));\n    }\n  for (const b of S.boats) {\n    const y = boatY(S, b);\n    spr(S, BOAT, b.x - 3, y - 6, b.fl > 0 ? 1 : 0);\n    for (let i = 1; i \u003c= 3; i++) put(buf, b.x + cos(b.a) * i, y - 3 + sin(b.a) * i, 30, 30, 40);\n  }\n  // Shadows, then the clouds. Thick fire dims the ground as bullet-hell games do.\n  const C = CLOUDS[si];\n  cb.fill(0);\n  for (const c of S.clouds)\n    for (let j = 0, sy = floor(S.scroll * CLOUD) + H - 1 - c.cw; j \u003c c.h; j++)\n      for (let i = 0, x = c.x, y = sy + j; i \u003c c.w; i++, x++) if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && c.m[j * c.w + i]) cb[y * W + x] = c.m[j * c.w + i];\n  for (let i = 0; i \u003c N; i++) sh[i] = (i % W >= 6 && i >= 9 * W && cb[i - 9 * W - 6] ? C[5] : 1) * (1 - 0.36 * S.fury);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) + 2, round(e.y) + 6, 2);\n  if (B) spr(S, BOSS, round(B.x) - 22, round(B.y) + 9, 2);\n  spr(S, PLAYER, round(P.x) + 1, round(P.y) + 3, 2);\n  for (let i = 0; i \u003c N; i++) {\n    const l = cb[i], k = l === 1 ? C[3] : 1;\n    mix(buf, i * 3, 0, 0, 0, 1 - sh[i]);\n    if (l) mix(buf, i * 3, C[0] * k, C[1] * k, C[2] * k, C[4]);\n  }\n  for (const c of S.caps) ring(buf, c.x, c.y, 2.9, 0, floor(t * 7) % 2 ? [230, 40, 50] : [40, 90, 240]), number(buf, \"P\", c.x - 1, c.y - 2, 255, 255, 255);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) - 3, round(e.y) - 3, e.fl > 0 ? 1 : 0);\n  // The boss's core pulses cyan, or red as the fury rises.\n  const f = S.fury, p = 0.5 + 0.5 * sin(t * 9);\n  if (B) spr(S, BOSS, round(B.x) - 28, round(B.y), (B.st === 2 ? floor(t * 16) % 2 : B.fl > 0 && floor(t * 20) % 4 === 0) ? 1 : 0, [120 + 135 * f + 60 * p, 230 - 170 * f + 25 * p * (1 - f), 255 - 215 * f]);\n  for (const ex of [3, 5])\n    for (let j = 0, L = 2 + ((t * 24 + ex) % 3 | 0), c; j \u003c L; j++) put(buf, round(P.x) - 4 + ex, round(P.y) + 5 + j, 255 - 12 * (c = min(3, j + (L \u003c 3))) * c, 255 - 65 * c, 220 - 70 * c);\n  spr(S, PLAYER, round(P.x) - 4, round(P.y) - 5, 0);\n  for (const s of S.ps) for (let j = 0; j \u003c 3; j++) put(buf, s.x, s.y + j, 255, 255 - 28 * j, 230 - 85 * j);\n  // Explosions: a white flash, a ring cooling from yellow to red, sparks.\n  for (const f of S.fx) {\n    const a = (t - f.t0) / f.d, R = (1.5 + 4.5 * a) * f.s;\n    if (a \u003c 0.16) ring(buf, f.x, f.y, (1 + 10 * a) * f.s, 0, [255, 255, 235]);\n    else if (a \u003c 0.5) ring(buf, f.x, f.y, R * 0.5, 0, [255, a \u003c 0.3 ? 210 : 120, 40]);\n    if (a >= 0.16) ring(buf, f.x, f.y, R, 0.75, a \u003c 0.45 ? [255, 220, 80] : a \u003c 0.72 ? [255, 130, 30] : [180, 46, 24]);\n    for (let i = 0; a \u003c 0.85 && i \u003c f.sp.length; i += 2) put(buf, f.x + f.sp[i] * a * f.d, f.y + f.sp[i + 1] * a * f.d, 255, 245, 170);\n  }\n  for (const b of S.eb) {\n    const c = BUL[b.c];\n    for (let i = 0; i \u003c 9; i++) if (i % 2 || (b.big && i !== 4)) put(buf, b.x + (i % 3) - 1, b.y + floor(i / 3) - 1, ...c.map((v) => (i % 2 ? v : v * 0.6)));\n    put(buf, b.x, b.y, 255, 255, 255);\n  }\n  for (const p of S.pop) {\n    const a = (t - p.t0) / 0.9;\n    if (a \u003c 0.75 || floor(t * 20) % 2) number(buf, p.v, round(p.x - String(p.v).length * 2), round(p.y - a * 9), 255, 240, 120);\n  }\n  if (t - S.bomb \u003c 1) ring(buf, P.x, P.y, (t - S.bomb) * 150, 1.6, [200, 250, 255]);\n  for (let i = 0; S.flash > 0 && i \u003c N * 3; i++) buf[i] += (255 - buf[i]) * min(1, S.flash) * 0.85;\n  for (let i = 0; i \u003c 7 * W; i++) if (i % W \u003c 26 || i % W >= 50) mix(buf, i * 3, 0, 0, 0, 0.82);\n  number(buf, String(S.score % 1e6).padStart(6, \"0\"), 1, 1, 255, 255, 255);\n  number(buf, \"AAA\", 52, 1, 220, 228, 240);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stage","min":0,"max":1,"about":"Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in."},{"name":"Waves","min":1,"max":5,"about":"From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats."},{"name":"Bullets","min":0,"max":1,"about":"How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read."}],"start":[0,2,1,0.06],"measures":{"motion":1.2251,"detail":0.0672,"edges":0.7429,"complexity":0.308,"coverage":0.995,"colour":0.3654,"drift":0.1128},"knobResponse":[0.2583,0.2156,0.0612,0.0985]},{"slug":"shoreline","title":"Shoreline","family":"ocean","round":17,"note":"드론으로 곧장 내려다본 해변이에요. 비스듬히 밀려온 너울이 모래톱 위에서 하얗게 부서지고 골에서 다시 일어나 기슭에서 한 번 더 부서진 뒤, 레이스 같은 거품 끝을 단 채 모래를 타고 올라갔다 물러나며 젖은 모래의 어두운 윤기를 남겨요.","idea":"A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","layer":{"id":"layer-shoreline","type":"code","name":"shoreline","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds."},{"name":"Height","min":1,"max":3,"about":"Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white."},{"name":"Tide","min":-1,"max":1,"about":"At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore."}],"start":[0,2,1,0.06],"measures":{"motion":0.1312,"detail":0.0226,"edges":0.2179,"complexity":0.5021,"coverage":1,"colour":0.3833,"drift":0.0432},"knobResponse":[0.2028,0.0707,0.0565,0.1108]},{"slug":"skein","title":"Skein","family":"bird","round":23,"note":"해 진 뒤 하늘을 올려다보면 기러기 떼가 V 자로 패널 위쪽, 북쪽으로 날아가요. 지친 선두가 한쪽 줄로 물러나면 다른 기러기가 앞에 서고, 커다란 보름달 앞을 지날 때는 새카만 실루엣이 돼요. 뒤따라온 작은 떼가 꼬리에 붙기도 해요.","idea":"Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.","buttons":"K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.","code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","layer":{"id":"layer-skein","type":"code","name":"skein","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower."},{"name":"Geese","min":7,"max":31,"about":"How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller."},{"name":"Wind","min":-1,"max":1,"about":"A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too."}],"start":[0,2,7,0.06],"measures":{"motion":0.2572,"detail":0.0301,"edges":0.4436,"complexity":1.9214,"coverage":0.9745,"colour":0.3836,"drift":0.0616},"knobResponse":[0.2529,0.0352,0.0331,0.0516]},{"slug":"skydiver","title":"Skydiver","family":"flight","round":25,"note":"강하장 위로 점프기가 지나가며 문에서 다이버들을 내보내요. 다이버들은 구름층을 뚫고 내려가 손을 잡아 고리를 만들었다가 흩어지고, 저마다 색 램에어 캐노피를 펴서 나선을 그리며 들판의 착지 원으로 내려와요. K1 을 끝까지 돌리면 해가 지평선에 걸린 노을 점프가 되고, K1 을 누르면 다음 비행기가 바로 들어와요.","idea":"A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.","buttons":"K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.","code":"// ===== Patternflow pattern =====\n// Title:   Skydiver\n// Family:  flight\n// Idea:    A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after formation skydiving loads at a drop zone\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1\n//\n// Knob 1: Hour. A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light.\n// Knob 2: Speed. At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower.\n// Knob 3: Divers. How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down.\n// Knob 4: Wind. The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you.\n// Buttons: K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the plane's fuselage, the flat base of the cloud deck, the horizon, the landing field.\nconst [PY, DB, HZ, GL] = [8, 30, 101, 118];\n// Depth goes onto the screen at this scale, nearer is lower; canopies are seen flatter.\nconst [ZS, ZC] = [0.55, 0.3];\n// Terminal velocity and the plane's speed in LEDs a second, the target, the windsock, seconds between loads.\nconst [VT, PV, TX, WX, CYCLE] = [8.5, 14, 34, 57, 15];\n// Sky top, middle, horizon; sun; lit and shaded cloud; daylight. Midday to sunset.\nconst KEYS = [\n  [8, 28, 104, 18, 62, 148, 112, 158, 204, 255, 250, 225, 252, 252, 255, 150, 162, 190, 1, 1, 1],\n  [12, 34, 112, 56, 96, 172, 196, 190, 184, 255, 226, 160, 255, 238, 210, 146, 140, 170, 1, 0.92, 0.8],\n  [20, 24, 90, 104, 84, 146, 255, 160, 84, 255, 186, 100, 255, 194, 136, 126, 96, 136, 1, 0.78, 0.58],\n  [12, 12, 50, 96, 46, 104, 255, 104, 44, 255, 136, 56, 255, 136, 96, 82, 54, 92, 0.86, 0.56, 0.42],\n];\nconst CAN = [[255, 30, 60], [255, 214, 0], [20, 110, 255], [255, 50, 190], [80, 235, 40], [255, 120, 0], [0, 220, 235], [150, 60, 255], [245, 245, 245], [255, 80, 80], [20, 190, 110], [255, 160, 200]];\nconst SUIT = [[255, 220, 40], [240, 40, 40], [40, 200, 255], [250, 250, 250], [255, 110, 0], [190, 70, 255], [60, 230, 90], [255, 80, 180]];\nconst HELM = [[250, 250, 250], [30, 30, 36], [255, 200, 0], [230, 40, 40]];\nconst STRIPE = [[200, 30, 40], [20, 70, 170], [230, 150, 0]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = { t: 0, rt: 0, loads: [], next: 0, cx: 0, w: 0, f: F32(N * 3), bg: F32(N * 3), key: -1, top: F32(128), far: F32(128) });\n  // Cumulus along a strip that wraps every 128 columns, each a cluster of round puffs: the deck and the far ones.\n  for (const [T, nc, sz] of [[P.top, 4, 1], [P.far, 6, 0.5]])\n    for (let k = 0; k \u003c nc; k++) {\n      const c = (k * 128) / nc + rnd() * 8, wd = (14 + rnd() * 14) * sz, hm = (5 + rnd() * 7) * sz;\n      for (let j = 0; j \u003c 11; j++) {\n        // Bubbles stacked higher towards the middle of the cloud.\n        const u = rnd() * 2 - 1, r = (2 + rnd() * 3.2) * (sz + 0.3) * 0.75, px = c + u * (wd / 2 - r * 0.5), e = max(0, (hm - r) * (1 - u * u) * (0.5 + 0.5 * rnd()));\n        for (let x = 0; x \u003c 128; x++) {\n          const dx = ((((x - px) % 128) + 192) % 128) - 64;\n          // A round top, and shoulders sloping down to the base.\n          const ax = abs(dx);\n          if (ax \u003c r + e) T[x] = max(T[x], ax \u003c r ? e + Math.sqrt(r * r - dx * dx) : e + r - ax);\n        }\n      }\n    }\n}\n\nconst shuffle = (n) => {\n  const a = [...Array(n).keys()];\n  for (let i = n - 1; i > 0; i--) {\n    const j = floor(rnd() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n};\n\n// A load: the plane runs in against the wind and puts the ring upwind of the target.\nfunction spawn(P, n, btn) {\n  // A big load gets out of the door faster, so every ring has the same time to build.\n  const w = P.w, dir = w >= 0 ? -1 : 1, len = 17 + n, ex = (0.5 + 0.06 * n) / (n - 1), half = ((n - 1) * ex) / 2, x0 = dir \u003c 0 ? 66 : -2;\n  const te0 = btn ? 1.3 : max(1.3, (dir * (31 - 12 * w - x0) + len - 12) / PV - half);\n  const cx = x0 + dir * PV * (te0 + half) - dir * (len - 12), ci = shuffle(CAN.length), si = shuffle(SUIT.length), rk = shuffle(n), lp = shuffle(n);\n  const d = [];\n  for (let i = 0; i \u003c n; i++) {\n    // Exit time, canopy colours (white or a second colour in the middle cells), suit, helmet,\n    // descent rate under canopy, which way the spiral turns, and the spot on the field.\n    d.push({\n      i, te: te0 + i * ex, st: 0, x: 0, y: 0, z: 0, h: 0, g: 0, o: 0, rank: rk[i], can: ci[i], cb: rnd() \u003c 0.5 ? 8 : ci[(i + 5) % 12], suit: si[i % 8], helm: floor(rnd() * 4),\n      zd: rnd() * 2 - 1, k: 2.2 + rnd() * 1.2, om: (rnd() \u003c 0.5 ? -1 : 1) * (0.8 + rnd() * 0.4), lx: TX + (lp[i] / (n - 1) - 0.5) * 26 + rnd() * 2, lz: rnd() * 12 - 4,\n    });\n  }\n  P.loads.push({ t: 0, n, dir, len, x0, te0, cx, px: x0, rot0: rnd() * TAU, rr: 4.6 / sin(PI / n), tb: te0 + 2 * half + 4.2, d, sc: STRIPE[floor(rnd() * 3)] });\n  if (P.loads.length > 4) P.loads.shift();\n}\n\nconst fall = (s) => (s \u003c= 0 ? 0 : VT * (s - (1 - exp(-1.5 * s)) / 1.5));\nconst thr = (s) => (s \u003c= 0 ? 0 : (PV * (1 - exp(-1.4 * s))) / 1.4);\n\nfunction runLoad(P, L, d) {\n  const T = (L.t += d), w = P.w, dir = L.dir, n = L.n;\n  L.px = L.x0 + dir * PV * T;\n  const s0 = T - L.te0, ccx = L.cx + w * 2 * max(0, s0), ccy = PY + 3 + fall(s0 - 0.15), rot = L.rot0 + 0.25 * s0;\n  const hf = atan2(1 - 0.9 * abs(w), -w), cf = cos(hf), sf = sin(hf);\n  for (const D of L.d) {\n    if (!D.st && T >= D.te) (D.st = 1), (D.xd = L.x0 + dir * PV * D.te - dir * (L.len - 6));\n    if (D.st === 1 && T >= L.tb) {\n      // Break-off: where the ring was, frozen, then turn away and track out.\n      const sb = L.tb - L.te0, th = L.rot0 + 0.25 * sb + (TAU * D.i) / n;\n      Object.assign(D, { st: 2, th, bx: L.cx + w * 2 * sb + L.rr * cos(th), bz: L.rr * sin(th), by: PY + 3 + fall(sb - 0.15) });\n    }\n    if (D.st === 1) {\n      const s = T - D.te, th = rot + (TAU * D.i) / n, g = sm(0.4, 2.3, s);\n      D.x = mix(D.xd + dir * thr(s) + w * 2 * s, ccx + L.rr * cos(th), g);\n      D.y = mix(PY + 3 + fall(s), ccy, g);\n      D.z = mix(D.zd, L.rr * sin(th), g);\n      D.h = th + PI;\n      D.g = g;\n    } else if (D.st === 2) {\n      const sb = T - L.tb, out = (10 + 0.6 * n) * (1 - exp(-1.1 * sb));\n      D.x = cl(D.bx + cos(D.th) * out, 2, 61);\n      D.z = D.bz + sin(D.th) * out * 0.6;\n      D.y = D.by + 9.5 * sb;\n      D.h = D.th + PI + PI * sm(0, 0.6, sb);\n      D.g = 0;\n      if (sb >= 0.7 + (1.4 * D.rank) / (n - 1)) Object.assign(D, { st: 3, td: T, yd: D.y, vy: 9.5, ax: D.x, az: D.z, h0: D.h });\n    } else if (D.st === 3) {\n      // Under canopy: open, slow down, spiral in over the field and turn to land.\n      const sc = T - D.td;\n      D.o = min(1, sc / 0.9);\n      D.vy += ((D.y > GL - 5 ? 1.3 : D.o > 0.55 ? D.k : 9.5) - D.vy) * min(1, 5 * d);\n      D.y += D.vy * d;\n      const pr = cl((D.y - D.yd) / (GL - D.yd), 0, 1), fx = D.lx - cf * 8, fz = D.lz - sf * 8;\n      if (pr \u003c 0.8) {\n        const e = sm(0, 0.8, pr), r = 13 * sin(PI * (pr / 0.8)) ** 0.6, h = D.h0 + D.om * sc, sg = D.om > 0 ? 1 : -1;\n        // The wind carries the spiral downwind on the way down, and the last turn brings it back.\n        D.x = mix(D.ax, fx, e) + sg * r * sin(h) + w * 12 * sin(PI * e);\n        D.z = mix(D.az, fz, e) - sg * r * cos(h);\n        const b = sm(0.65, 0.8, pr);\n        D.h = atan2(mix(sin(h), sf, b), mix(cos(h), cf, b));\n      } else {\n        const q = sm(0.8, 1, pr);\n        (D.x = mix(fx, D.lx, q)), (D.z = mix(fz, D.lz, q)), (D.h = hf);\n      }\n      D.x = cl(D.x, 3, 60);\n      D.fl = sm(GL - 5, GL, D.y);\n      if (D.y >= GL) Object.assign(D, { st: 4, tl: T, y: GL, x: D.lx, z: D.lz, h: hf });\n    } else if (D.st === 4 && T - D.tl > 7.5) D.st = 5;\n  }\n}\n\nfunction tick(P, d, n) {\n  P.t += d;\n  P.cx += (3.2 + 9 * P.w) * d;\n  if ((P.next -= d) \u003c= 0) spawn(P, n, 0), (P.next += CYCLE);\n  for (const L of P.loads) runLoad(P, L, d);\n  P.loads = P.loads.filter((L) => L.t \u003c 60 && L.d.some((D) => D.st \u003c 5));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), n = round(cl(k[2], 5, 12));\n  P.w = cl(k[3], -1, 1);\n  P.h = cl(k[0], 0, 1);\n  P.rt += rd;\n  // One load landing, one high under canopy, and the third plane on its run.\n  if (!P.ready) {\n    P.ready = 1;\n    P.next = 1e9;\n    for (const s of [0, 19, 30, 32.5]) {\n      while (P.t \u003c s - 1e-6) tick(P, 1 / 15, n);\n      s \u003c 32 && spawn(P, n, 0);\n    }\n    P.next = CYCLE - 2.5;\n  }\n  if (input.btnPressed && input.btnPressed[0]) spawn(P, n, 1), (P.next = CYCLE);\n  tick(P, d, n);\n}\n\nlet F, LT, K;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1) {\n  const o = at(x, y);\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction seg(x0, y0, x1, y1, c, a = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1;\n  for (let i = 0; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c, a);\n}\nconst lit = (c, k = 1) => [c[0] * LT[0] * k, c[1] * LT[1] * k, c[2] * LT[2] * k];\nconst KC = (i) => [K[i], K[i + 1], K[i + 2]];\n\n// Sky, sun, hills and the drop zone, kept until the hour moves.\nfunction backdrop(P) {\n  const B = P.bg, h = P.h, key = round(h * 300);\n  if (key === P.key) return;\n  P.key = key;\n  const zen = KC(0), mid = KC(3), hor = KC(6), sun = KC(9), sy = mix(-16, 90, sm(0.3, 1, h));\n  const FIELDS = [[74, 124, 44], [112, 140, 52], [150, 146, 72], [60, 104, 48], [126, 112, 64]];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    let c;\n    const hill = HZ - 1.5 - 2.5 * vn(x * 0.09, 50);\n    if (y \u003c hill) {\n      const f = y / HZ, u = f \u003c 0.6 ? sm(0, 1, f / 0.6) : ((f - 0.6) / 0.4) ** 1.6;\n      c = f \u003c 0.6 ? zen.map((v, j) => mix(v, mid[j], u)) : mid.map((v, j) => mix(v, hor[j], u));\n      const ds = Math.hypot(x - 47, (y - sy) * 1.1), g = 0.5 * exp(-ds / 9) + 0.25 * exp(-ds / 30);\n      c = ds \u003c 3.6 ? sun : c.map((v, j) => v + sun[j] * g * (0.4 + 0.6 * h));\n    } else if (y \u003c HZ) {\n      c = lit(hor.map((v, j) => mix(v, [44, 72, 70][j], 0.6)));\n    } else {\n      const zf = y - HZ + 2, gx = ((x - 32) * 24) / zf, gz = 260 / zf;\n      if (y >= 104 && y \u003c= 106) c = y === 105 && (floor(gx / 5) & 3) === 0 ? [220, 220, 220] : [92, 92, 98];\n      else if (y >= 109) c = [70, 150, 48].map((v) => v * (floor(gx / 7) & 1 ? 0.86 : 1));\n      else c = FIELDS[floor(hash(floor(gx / 40 + 60), floor(gz / 22)) * 5)];\n      const e = ((x - TX) / 11) ** 2 + ((y - GL) / 3.6) ** 2;\n      if (e \u003c 1) c = e \u003c 0.07 ? [245, 245, 245] : [204, 182, 132].map((v) => v * (e > 0.6 ? 0.84 : 1));\n      c = lit(c).map((v, j) => mix(v, hor[j], exp(-(zf - 2) / 4) * 0.65));\n    }\n    // The hangar by the runway, its door open.\n    if (x >= 3 && x \u003c= 16 && y \u003c= 105 && y >= 97 + ((x - 9.5) / 6.5) ** 2 * 3) c = lit(x > 6 && x \u003c 13 && y > 100 ? [34, 34, 42] : [196, 196, 204], y \u003c 99 ? 1.08 : 1);\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  }\n}\n\n// The far cumulus sitting on the horizon haze.\nfunction farClouds(P) {\n  const lt = KC(12), sh = KC(15), hor = KC(6);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x * 0.9 + P.cx * 0.6 + 40, i = floor(xx), f = xx - i, hgt = mix(P.far[i & 127], P.far[(i + 1) & 127], f);\n    for (let y = floor(98 - hgt); y \u003c= 98; y++) {\n      const u = (98 - y) / max(1, hgt), c = sh.map((v, j) => mix(mix(v, lt[j], cl(u * 1.3, 0, 1)), hor[j], 0.35));\n      put(x, y, c, cl(y - (98 - hgt) + 0.5, 0, 1) * 0.92);\n    }\n  }\n}\n\n// The deck the divers fall through: domes on top, a flat grey base.\nfunction deck(P) {\n  const lt = KC(12), sh = KC(15);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x + P.cx + 7, i = floor(xx), f = xx - i, hgt = mix(P.top[i & 127], P.top[(i + 1) & 127], f);\n    if (hgt \u003c 0.3) continue;\n    for (let y = floor(DB - hgt); y \u003c= DB; y++) {\n      const u = (DB - y) / max(1, hgt), b = cl(u * 1.15 + (vn(xx * 0.35, y * 0.4) - 0.5) * 0.6, 0, 1);\n      put(x, y, sh.map((v, j) => mix(v, lt[j], b)), cl(y - (DB - hgt) + 0.5, 0, 1) * (y === DB ? 0.7 : 0.95));\n    }\n  }\n}\n\nfunction plane(P, L) {\n  const { len, dir, px } = L, X = (u) => px - dir * (len - u), body = lit([236, 236, 242]), belly = lit([168, 170, 180]), glass = lit([50, 74, 110]), dark = [22, 22, 28];\n  for (let u = -1; u \u003c= len; u += 0.5) {\n    const x = X(u);\n    if (u \u003c 4.5) for (let y = PY - 2 - (u \u003c 2 ? 5 : 5 - (u - 2) * 2); y \u003c PY - 2; y++) put(x, y, body);\n    if (u \u003c 3.5) put(x, PY - 1, belly);\n    if (u \u003c 1) continue;\n    const bot = u \u003c 7 ? PY + 1 - (7 - u) * 0.45 : PY + 1, top = u > len - 3 ? PY - 2 + (u - len + 3) * 0.7 : PY - 2;\n    for (let y = ceil(top); y \u003c= bot; y++) put(x, y, y === PY ? lit(L.sc) : y > PY ? belly : body);\n  }\n  for (let u = 9; u \u003c len - 5; u += 2) put(X(u), PY - 1, glass);\n  put(X(len - 2), PY - 1, glass), put(X(len - 3), PY - 1, glass);\n  for (let u = len * 0.42; u \u003c= len * 0.66; u += 0.5) put(X(u), PY - 3, lit([214, 216, 224]));\n  for (let u = len * 0.6; u \u003c= len * 0.74; u += 0.5) put(X(u), PY - 2, lit([150, 150, 160]));\n  for (let y = PY - 5; y \u003c= PY; y++) put(X(len * 0.77), y, [220, 220, 230], 0.25 + 0.2 * rnd());\n  put(X(len * 0.55), PY + 2, dark), put(X(len - 2), PY + 2, dark);\n  // The door is open on the run in, with the next diver crouched in it.\n  const next = L.d.find((D) => !D.st);\n  if (next && L.t > L.te0 - 1.6) {\n    for (let u = 4.5; u \u003c= 6.5; u += 0.5) for (let y = PY - 1; y \u003c= PY + 1; y++) put(X(u), y, dark);\n    put(X(6), PY, lit(SUIT[next.suit])), put(X(6), PY - 1, lit(HELM[next.helm]));\n  }\n  if ((P.rt * 1.4) % 1 \u003c 0.25) put(X(len * 0.5), PY - 4, [255, 40, 30]);\n}\n\n// A diver in freefall seen from above and behind: spread arms and legs, the rig on the back, the helmet.\nconst bp = (D, a, b) => {\n  const c = cos(D.h) * 1.3, s = sin(D.h) * 1.3;\n  return [D.x + c * a - s * b, D.y + (D.z + s * a + c * b) * ZS];\n};\nfunction diver(D) {\n  const sc = lit(SUIT[D.suit]), ln = (a, b) => seg(...bp(D, ...a), ...bp(D, ...b), sc);\n  for (const m of [-1, 1]) {\n    ln([-0.9, 0.4 * m], [-2.8, 1.6 * m]);\n    if (D.g \u003c 0.97) ln([0.9, 0.8 * m], [2.1, 2.3 * m]);\n  }\n  ln([-0.9, 0], [0.9, 0]), ln([0.9, -0.9], [0.9, 0.9]);\n  put(...bp(D, -0.1, 0), [26, 26, 32]);\n  put(...bp(D, 1.9, 0), lit(HELM[D.helm]));\n}\n\n// A canopy: cells, lines, the jumper in the harness. On the ground it falls in behind the jumper, who gathers it up.\nfunction canopy(D, T) {\n  const sx = D.x, sy = D.y + D.z * ZS, ca = CAN[D.can], cb = CAN[D.cb], down = D.st === 4, sl = down ? T - D.tl : 0, a = 1 - sm(5.5, 7.5, sl);\n  const suit = lit(SUIT[D.suit]);\n  if (!down && D.o \u003c 0.3) {\n    // Pilot chute and bag going up.\n    seg(sx, sy - 1, sx, sy - 2 - D.o * 22, lit([200, 200, 210]), 0.5), put(sx, sy - 2 - D.o * 22, lit([245, 245, 245]));\n    put(sx, sy - 1, lit(HELM[D.helm])), put(sx, sy, suit), put(sx + 1, sy, suit);\n    return;\n  }\n  const kk = down ? 1 : sm(0.25, 0.8, D.o), pop = 1 + 0.18 * sin(PI * sm(0.55, 1, D.o)), c = sm(0, 1.2, sl);\n  const ch = cos(D.h), shh = sin(D.h), zm = 1 + D.z * 0.015, hs = (1 + 5.2 * kk) * pop * mix(1, 0.75, c) * zm, lr = (2 + 6 * kk) * (1 - c) * zm + 0.5 * c;\n  const ox = down ? -ch * 4 * c : 0, oy = down ? -shh * 4 * c * ZS : 0, cy = sy - 1.5 - lr + oy, droop = mix(1.1, 0.2, c) + D.fl * 0.6;\n  const svx = -shh * hs, svy = ch * hs * ZC, fx = ch * 2 * zm, fy = shh * 2 * ZC * (1 - c);\n  if (!down || c \u003c 1) for (const t of [-0.9, -0.35, 0.35, 0.9]) seg(sx, sy - 1.5, sx + ox + svx * t, cy + svy * t + droop * t * t + 1, lit([210, 210, 220]), 0.3 * a);\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let t = -1; t \u003c= 1; t += 0.45 / hs) {\n      const cell = min(8, floor((t + 1) * 4.5)), col = cell > 2 && cell \u003c 6 ? cb : ca, k = (cell & 1 ? 0.8 : 1) * (pass ? 1 : 0.5) * (1.12 - 0.12 * pop);\n      for (let q = -1; q \u003c= 1; q += 0.5) put(sx + ox + svx * t + fx * q, cy + svy * t + fy * q + droop * t * t + (pass ? 0 : 1), lit(col, k * (0.92 + 0.08 * q)), a);\n    }\n  put(sx, sy - 2, lit(HELM[D.helm]), a), put(sx, sy - 1, suit, a), put(sx + (D.fl > 0.3 ? 1 : 0), sy, suit.map((v) => v * 0.7), a);\n}\n\nfunction sock(P) {\n  const w = P.w, aw = abs(w), sx = w >= 0 ? 1 : -1;\n  for (let y = 104; y \u003c= 116; y++) put(WX, y, lit([200, 200, 206]));\n  for (let u = 0; u \u003c= 6; u += 0.5) {\n    const x = WX + sx * u * (0.3 + 0.7 * aw), y = 104 + u * (1 - aw) * 0.85 + sin(P.rt * 9 - u) * 0.35 * aw, col = lit(floor(u / 1.5) & 1 ? [240, 240, 240] : [255, 110, 20]);\n    put(x, y, col), u \u003c 4 && put(x, y + 1, col, 0.8);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  F = P.f;\n  const hh = P.h * 3, i0 = min(2, floor(hh));\n  K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  LT = KC(18);\n  backdrop(P);\n  F.set(P.bg);\n  // Cloud shadows crossing the fields.\n  for (let y = HZ; y \u003c H; y++) {\n    const zf = y - HZ + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const v = vn((((x - 32) * 24) / zf - P.cx * 1.1) * 0.035, (260 / zf) * 0.05), k = 1 - 0.5 * sm(0.45, 0.58, v), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n  farClouds(P);\n  sock(P);\n  const A = [];\n  for (const L of P.loads) for (const D of L.d) if (D.st === 4) canopy(D, L.t);\n  for (const L of P.loads) if (L.px > -40 && L.px \u003c 104) plane(P, L);\n  for (const L of P.loads) for (const D of L.d) if (D.st && D.st \u003c 4) A.push([D, L]);\n  A.sort((a, b) => a[0].z - b[0].z);\n  for (const [D, L] of A) {\n    if (D.st === 3) canopy(D, L.t);\n    else {\n      diver(D);\n      // Grips: the arms of two docked neighbours meet between them.\n      const E = L.d[(D.i + 1) % L.n];\n      if (D.st === 1 && E.st === 1 && D.g > 0.97 && E.g > 0.97) {\n        const d2 = (u, v) => (u[0] - v[0]) ** 2 + (u[1] - v[1]) ** 2, [a, b, c, e] = [bp(D, 0.9, -0.9), bp(D, 0.9, 0.9), bp(E, 0.9, -0.9), bp(E, 0.9, 0.9)];\n        const p = d2(a, c) + d2(a, e) \u003c d2(b, c) + d2(b, e) ? a : b, q = d2(p, c) \u003c d2(p, e) ? c : e;\n        const m = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];\n        seg(...p, ...m, lit(SUIT[D.suit])), seg(...m, ...q, lit(SUIT[E.suit]));\n      }\n    }\n  }\n  deck(P);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-skydiver","type":"code","name":"skydiver","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Skydiver\n// Family:  flight\n// Idea:    A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after formation skydiving loads at a drop zone\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1\n//\n// Knob 1: Hour. A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light.\n// Knob 2: Speed. At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower.\n// Knob 3: Divers. How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down.\n// Knob 4: Wind. The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you.\n// Buttons: K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the plane's fuselage, the flat base of the cloud deck, the horizon, the landing field.\nconst [PY, DB, HZ, GL] = [8, 30, 101, 118];\n// Depth goes onto the screen at this scale, nearer is lower; canopies are seen flatter.\nconst [ZS, ZC] = [0.55, 0.3];\n// Terminal velocity and the plane's speed in LEDs a second, the target, the windsock, seconds between loads.\nconst [VT, PV, TX, WX, CYCLE] = [8.5, 14, 34, 57, 15];\n// Sky top, middle, horizon; sun; lit and shaded cloud; daylight. Midday to sunset.\nconst KEYS = [\n  [8, 28, 104, 18, 62, 148, 112, 158, 204, 255, 250, 225, 252, 252, 255, 150, 162, 190, 1, 1, 1],\n  [12, 34, 112, 56, 96, 172, 196, 190, 184, 255, 226, 160, 255, 238, 210, 146, 140, 170, 1, 0.92, 0.8],\n  [20, 24, 90, 104, 84, 146, 255, 160, 84, 255, 186, 100, 255, 194, 136, 126, 96, 136, 1, 0.78, 0.58],\n  [12, 12, 50, 96, 46, 104, 255, 104, 44, 255, 136, 56, 255, 136, 96, 82, 54, 92, 0.86, 0.56, 0.42],\n];\nconst CAN = [[255, 30, 60], [255, 214, 0], [20, 110, 255], [255, 50, 190], [80, 235, 40], [255, 120, 0], [0, 220, 235], [150, 60, 255], [245, 245, 245], [255, 80, 80], [20, 190, 110], [255, 160, 200]];\nconst SUIT = [[255, 220, 40], [240, 40, 40], [40, 200, 255], [250, 250, 250], [255, 110, 0], [190, 70, 255], [60, 230, 90], [255, 80, 180]];\nconst HELM = [[250, 250, 250], [30, 30, 36], [255, 200, 0], [230, 40, 40]];\nconst STRIPE = [[200, 30, 40], [20, 70, 170], [230, 150, 0]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = { t: 0, rt: 0, loads: [], next: 0, cx: 0, w: 0, f: F32(N * 3), bg: F32(N * 3), key: -1, top: F32(128), far: F32(128) });\n  // Cumulus along a strip that wraps every 128 columns, each a cluster of round puffs: the deck and the far ones.\n  for (const [T, nc, sz] of [[P.top, 4, 1], [P.far, 6, 0.5]])\n    for (let k = 0; k \u003c nc; k++) {\n      const c = (k * 128) / nc + rnd() * 8, wd = (14 + rnd() * 14) * sz, hm = (5 + rnd() * 7) * sz;\n      for (let j = 0; j \u003c 11; j++) {\n        // Bubbles stacked higher towards the middle of the cloud.\n        const u = rnd() * 2 - 1, r = (2 + rnd() * 3.2) * (sz + 0.3) * 0.75, px = c + u * (wd / 2 - r * 0.5), e = max(0, (hm - r) * (1 - u * u) * (0.5 + 0.5 * rnd()));\n        for (let x = 0; x \u003c 128; x++) {\n          const dx = ((((x - px) % 128) + 192) % 128) - 64;\n          // A round top, and shoulders sloping down to the base.\n          const ax = abs(dx);\n          if (ax \u003c r + e) T[x] = max(T[x], ax \u003c r ? e + Math.sqrt(r * r - dx * dx) : e + r - ax);\n        }\n      }\n    }\n}\n\nconst shuffle = (n) => {\n  const a = [...Array(n).keys()];\n  for (let i = n - 1; i > 0; i--) {\n    const j = floor(rnd() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n};\n\n// A load: the plane runs in against the wind and puts the ring upwind of the target.\nfunction spawn(P, n, btn) {\n  // A big load gets out of the door faster, so every ring has the same time to build.\n  const w = P.w, dir = w >= 0 ? -1 : 1, len = 17 + n, ex = (0.5 + 0.06 * n) / (n - 1), half = ((n - 1) * ex) / 2, x0 = dir \u003c 0 ? 66 : -2;\n  const te0 = btn ? 1.3 : max(1.3, (dir * (31 - 12 * w - x0) + len - 12) / PV - half);\n  const cx = x0 + dir * PV * (te0 + half) - dir * (len - 12), ci = shuffle(CAN.length), si = shuffle(SUIT.length), rk = shuffle(n), lp = shuffle(n);\n  const d = [];\n  for (let i = 0; i \u003c n; i++) {\n    // Exit time, canopy colours (white or a second colour in the middle cells), suit, helmet,\n    // descent rate under canopy, which way the spiral turns, and the spot on the field.\n    d.push({\n      i, te: te0 + i * ex, st: 0, x: 0, y: 0, z: 0, h: 0, g: 0, o: 0, rank: rk[i], can: ci[i], cb: rnd() \u003c 0.5 ? 8 : ci[(i + 5) % 12], suit: si[i % 8], helm: floor(rnd() * 4),\n      zd: rnd() * 2 - 1, k: 2.2 + rnd() * 1.2, om: (rnd() \u003c 0.5 ? -1 : 1) * (0.8 + rnd() * 0.4), lx: TX + (lp[i] / (n - 1) - 0.5) * 26 + rnd() * 2, lz: rnd() * 12 - 4,\n    });\n  }\n  P.loads.push({ t: 0, n, dir, len, x0, te0, cx, px: x0, rot0: rnd() * TAU, rr: 4.6 / sin(PI / n), tb: te0 + 2 * half + 4.2, d, sc: STRIPE[floor(rnd() * 3)] });\n  if (P.loads.length > 4) P.loads.shift();\n}\n\nconst fall = (s) => (s \u003c= 0 ? 0 : VT * (s - (1 - exp(-1.5 * s)) / 1.5));\nconst thr = (s) => (s \u003c= 0 ? 0 : (PV * (1 - exp(-1.4 * s))) / 1.4);\n\nfunction runLoad(P, L, d) {\n  const T = (L.t += d), w = P.w, dir = L.dir, n = L.n;\n  L.px = L.x0 + dir * PV * T;\n  const s0 = T - L.te0, ccx = L.cx + w * 2 * max(0, s0), ccy = PY + 3 + fall(s0 - 0.15), rot = L.rot0 + 0.25 * s0;\n  const hf = atan2(1 - 0.9 * abs(w), -w), cf = cos(hf), sf = sin(hf);\n  for (const D of L.d) {\n    if (!D.st && T >= D.te) (D.st = 1), (D.xd = L.x0 + dir * PV * D.te - dir * (L.len - 6));\n    if (D.st === 1 && T >= L.tb) {\n      // Break-off: where the ring was, frozen, then turn away and track out.\n      const sb = L.tb - L.te0, th = L.rot0 + 0.25 * sb + (TAU * D.i) / n;\n      Object.assign(D, { st: 2, th, bx: L.cx + w * 2 * sb + L.rr * cos(th), bz: L.rr * sin(th), by: PY + 3 + fall(sb - 0.15) });\n    }\n    if (D.st === 1) {\n      const s = T - D.te, th = rot + (TAU * D.i) / n, g = sm(0.4, 2.3, s);\n      D.x = mix(D.xd + dir * thr(s) + w * 2 * s, ccx + L.rr * cos(th), g);\n      D.y = mix(PY + 3 + fall(s), ccy, g);\n      D.z = mix(D.zd, L.rr * sin(th), g);\n      D.h = th + PI;\n      D.g = g;\n    } else if (D.st === 2) {\n      const sb = T - L.tb, out = (10 + 0.6 * n) * (1 - exp(-1.1 * sb));\n      D.x = cl(D.bx + cos(D.th) * out, 2, 61);\n      D.z = D.bz + sin(D.th) * out * 0.6;\n      D.y = D.by + 9.5 * sb;\n      D.h = D.th + PI + PI * sm(0, 0.6, sb);\n      D.g = 0;\n      if (sb >= 0.7 + (1.4 * D.rank) / (n - 1)) Object.assign(D, { st: 3, td: T, yd: D.y, vy: 9.5, ax: D.x, az: D.z, h0: D.h });\n    } else if (D.st === 3) {\n      // Under canopy: open, slow down, spiral in over the field and turn to land.\n      const sc = T - D.td;\n      D.o = min(1, sc / 0.9);\n      D.vy += ((D.y > GL - 5 ? 1.3 : D.o > 0.55 ? D.k : 9.5) - D.vy) * min(1, 5 * d);\n      D.y += D.vy * d;\n      const pr = cl((D.y - D.yd) / (GL - D.yd), 0, 1), fx = D.lx - cf * 8, fz = D.lz - sf * 8;\n      if (pr \u003c 0.8) {\n        const e = sm(0, 0.8, pr), r = 13 * sin(PI * (pr / 0.8)) ** 0.6, h = D.h0 + D.om * sc, sg = D.om > 0 ? 1 : -1;\n        // The wind carries the spiral downwind on the way down, and the last turn brings it back.\n        D.x = mix(D.ax, fx, e) + sg * r * sin(h) + w * 12 * sin(PI * e);\n        D.z = mix(D.az, fz, e) - sg * r * cos(h);\n        const b = sm(0.65, 0.8, pr);\n        D.h = atan2(mix(sin(h), sf, b), mix(cos(h), cf, b));\n      } else {\n        const q = sm(0.8, 1, pr);\n        (D.x = mix(fx, D.lx, q)), (D.z = mix(fz, D.lz, q)), (D.h = hf);\n      }\n      D.x = cl(D.x, 3, 60);\n      D.fl = sm(GL - 5, GL, D.y);\n      if (D.y >= GL) Object.assign(D, { st: 4, tl: T, y: GL, x: D.lx, z: D.lz, h: hf });\n    } else if (D.st === 4 && T - D.tl > 7.5) D.st = 5;\n  }\n}\n\nfunction tick(P, d, n) {\n  P.t += d;\n  P.cx += (3.2 + 9 * P.w) * d;\n  if ((P.next -= d) \u003c= 0) spawn(P, n, 0), (P.next += CYCLE);\n  for (const L of P.loads) runLoad(P, L, d);\n  P.loads = P.loads.filter((L) => L.t \u003c 60 && L.d.some((D) => D.st \u003c 5));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), n = round(cl(k[2], 5, 12));\n  P.w = cl(k[3], -1, 1);\n  P.h = cl(k[0], 0, 1);\n  P.rt += rd;\n  // One load landing, one high under canopy, and the third plane on its run.\n  if (!P.ready) {\n    P.ready = 1;\n    P.next = 1e9;\n    for (const s of [0, 19, 30, 32.5]) {\n      while (P.t \u003c s - 1e-6) tick(P, 1 / 15, n);\n      s \u003c 32 && spawn(P, n, 0);\n    }\n    P.next = CYCLE - 2.5;\n  }\n  if (input.btnPressed && input.btnPressed[0]) spawn(P, n, 1), (P.next = CYCLE);\n  tick(P, d, n);\n}\n\nlet F, LT, K;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1) {\n  const o = at(x, y);\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction seg(x0, y0, x1, y1, c, a = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1;\n  for (let i = 0; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c, a);\n}\nconst lit = (c, k = 1) => [c[0] * LT[0] * k, c[1] * LT[1] * k, c[2] * LT[2] * k];\nconst KC = (i) => [K[i], K[i + 1], K[i + 2]];\n\n// Sky, sun, hills and the drop zone, kept until the hour moves.\nfunction backdrop(P) {\n  const B = P.bg, h = P.h, key = round(h * 300);\n  if (key === P.key) return;\n  P.key = key;\n  const zen = KC(0), mid = KC(3), hor = KC(6), sun = KC(9), sy = mix(-16, 90, sm(0.3, 1, h));\n  const FIELDS = [[74, 124, 44], [112, 140, 52], [150, 146, 72], [60, 104, 48], [126, 112, 64]];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    let c;\n    const hill = HZ - 1.5 - 2.5 * vn(x * 0.09, 50);\n    if (y \u003c hill) {\n      const f = y / HZ, u = f \u003c 0.6 ? sm(0, 1, f / 0.6) : ((f - 0.6) / 0.4) ** 1.6;\n      c = f \u003c 0.6 ? zen.map((v, j) => mix(v, mid[j], u)) : mid.map((v, j) => mix(v, hor[j], u));\n      const ds = Math.hypot(x - 47, (y - sy) * 1.1), g = 0.5 * exp(-ds / 9) + 0.25 * exp(-ds / 30);\n      c = ds \u003c 3.6 ? sun : c.map((v, j) => v + sun[j] * g * (0.4 + 0.6 * h));\n    } else if (y \u003c HZ) {\n      c = lit(hor.map((v, j) => mix(v, [44, 72, 70][j], 0.6)));\n    } else {\n      const zf = y - HZ + 2, gx = ((x - 32) * 24) / zf, gz = 260 / zf;\n      if (y >= 104 && y \u003c= 106) c = y === 105 && (floor(gx / 5) & 3) === 0 ? [220, 220, 220] : [92, 92, 98];\n      else if (y >= 109) c = [70, 150, 48].map((v) => v * (floor(gx / 7) & 1 ? 0.86 : 1));\n      else c = FIELDS[floor(hash(floor(gx / 40 + 60), floor(gz / 22)) * 5)];\n      const e = ((x - TX) / 11) ** 2 + ((y - GL) / 3.6) ** 2;\n      if (e \u003c 1) c = e \u003c 0.07 ? [245, 245, 245] : [204, 182, 132].map((v) => v * (e > 0.6 ? 0.84 : 1));\n      c = lit(c).map((v, j) => mix(v, hor[j], exp(-(zf - 2) / 4) * 0.65));\n    }\n    // The hangar by the runway, its door open.\n    if (x >= 3 && x \u003c= 16 && y \u003c= 105 && y >= 97 + ((x - 9.5) / 6.5) ** 2 * 3) c = lit(x > 6 && x \u003c 13 && y > 100 ? [34, 34, 42] : [196, 196, 204], y \u003c 99 ? 1.08 : 1);\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  }\n}\n\n// The far cumulus sitting on the horizon haze.\nfunction farClouds(P) {\n  const lt = KC(12), sh = KC(15), hor = KC(6);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x * 0.9 + P.cx * 0.6 + 40, i = floor(xx), f = xx - i, hgt = mix(P.far[i & 127], P.far[(i + 1) & 127], f);\n    for (let y = floor(98 - hgt); y \u003c= 98; y++) {\n      const u = (98 - y) / max(1, hgt), c = sh.map((v, j) => mix(mix(v, lt[j], cl(u * 1.3, 0, 1)), hor[j], 0.35));\n      put(x, y, c, cl(y - (98 - hgt) + 0.5, 0, 1) * 0.92);\n    }\n  }\n}\n\n// The deck the divers fall through: domes on top, a flat grey base.\nfunction deck(P) {\n  const lt = KC(12), sh = KC(15);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x + P.cx + 7, i = floor(xx), f = xx - i, hgt = mix(P.top[i & 127], P.top[(i + 1) & 127], f);\n    if (hgt \u003c 0.3) continue;\n    for (let y = floor(DB - hgt); y \u003c= DB; y++) {\n      const u = (DB - y) / max(1, hgt), b = cl(u * 1.15 + (vn(xx * 0.35, y * 0.4) - 0.5) * 0.6, 0, 1);\n      put(x, y, sh.map((v, j) => mix(v, lt[j], b)), cl(y - (DB - hgt) + 0.5, 0, 1) * (y === DB ? 0.7 : 0.95));\n    }\n  }\n}\n\nfunction plane(P, L) {\n  const { len, dir, px } = L, X = (u) => px - dir * (len - u), body = lit([236, 236, 242]), belly = lit([168, 170, 180]), glass = lit([50, 74, 110]), dark = [22, 22, 28];\n  for (let u = -1; u \u003c= len; u += 0.5) {\n    const x = X(u);\n    if (u \u003c 4.5) for (let y = PY - 2 - (u \u003c 2 ? 5 : 5 - (u - 2) * 2); y \u003c PY - 2; y++) put(x, y, body);\n    if (u \u003c 3.5) put(x, PY - 1, belly);\n    if (u \u003c 1) continue;\n    const bot = u \u003c 7 ? PY + 1 - (7 - u) * 0.45 : PY + 1, top = u > len - 3 ? PY - 2 + (u - len + 3) * 0.7 : PY - 2;\n    for (let y = ceil(top); y \u003c= bot; y++) put(x, y, y === PY ? lit(L.sc) : y > PY ? belly : body);\n  }\n  for (let u = 9; u \u003c len - 5; u += 2) put(X(u), PY - 1, glass);\n  put(X(len - 2), PY - 1, glass), put(X(len - 3), PY - 1, glass);\n  for (let u = len * 0.42; u \u003c= len * 0.66; u += 0.5) put(X(u), PY - 3, lit([214, 216, 224]));\n  for (let u = len * 0.6; u \u003c= len * 0.74; u += 0.5) put(X(u), PY - 2, lit([150, 150, 160]));\n  for (let y = PY - 5; y \u003c= PY; y++) put(X(len * 0.77), y, [220, 220, 230], 0.25 + 0.2 * rnd());\n  put(X(len * 0.55), PY + 2, dark), put(X(len - 2), PY + 2, dark);\n  // The door is open on the run in, with the next diver crouched in it.\n  const next = L.d.find((D) => !D.st);\n  if (next && L.t > L.te0 - 1.6) {\n    for (let u = 4.5; u \u003c= 6.5; u += 0.5) for (let y = PY - 1; y \u003c= PY + 1; y++) put(X(u), y, dark);\n    put(X(6), PY, lit(SUIT[next.suit])), put(X(6), PY - 1, lit(HELM[next.helm]));\n  }\n  if ((P.rt * 1.4) % 1 \u003c 0.25) put(X(len * 0.5), PY - 4, [255, 40, 30]);\n}\n\n// A diver in freefall seen from above and behind: spread arms and legs, the rig on the back, the helmet.\nconst bp = (D, a, b) => {\n  const c = cos(D.h) * 1.3, s = sin(D.h) * 1.3;\n  return [D.x + c * a - s * b, D.y + (D.z + s * a + c * b) * ZS];\n};\nfunction diver(D) {\n  const sc = lit(SUIT[D.suit]), ln = (a, b) => seg(...bp(D, ...a), ...bp(D, ...b), sc);\n  for (const m of [-1, 1]) {\n    ln([-0.9, 0.4 * m], [-2.8, 1.6 * m]);\n    if (D.g \u003c 0.97) ln([0.9, 0.8 * m], [2.1, 2.3 * m]);\n  }\n  ln([-0.9, 0], [0.9, 0]), ln([0.9, -0.9], [0.9, 0.9]);\n  put(...bp(D, -0.1, 0), [26, 26, 32]);\n  put(...bp(D, 1.9, 0), lit(HELM[D.helm]));\n}\n\n// A canopy: cells, lines, the jumper in the harness. On the ground it falls in behind the jumper, who gathers it up.\nfunction canopy(D, T) {\n  const sx = D.x, sy = D.y + D.z * ZS, ca = CAN[D.can], cb = CAN[D.cb], down = D.st === 4, sl = down ? T - D.tl : 0, a = 1 - sm(5.5, 7.5, sl);\n  const suit = lit(SUIT[D.suit]);\n  if (!down && D.o \u003c 0.3) {\n    // Pilot chute and bag going up.\n    seg(sx, sy - 1, sx, sy - 2 - D.o * 22, lit([200, 200, 210]), 0.5), put(sx, sy - 2 - D.o * 22, lit([245, 245, 245]));\n    put(sx, sy - 1, lit(HELM[D.helm])), put(sx, sy, suit), put(sx + 1, sy, suit);\n    return;\n  }\n  const kk = down ? 1 : sm(0.25, 0.8, D.o), pop = 1 + 0.18 * sin(PI * sm(0.55, 1, D.o)), c = sm(0, 1.2, sl);\n  const ch = cos(D.h), shh = sin(D.h), zm = 1 + D.z * 0.015, hs = (1 + 5.2 * kk) * pop * mix(1, 0.75, c) * zm, lr = (2 + 6 * kk) * (1 - c) * zm + 0.5 * c;\n  const ox = down ? -ch * 4 * c : 0, oy = down ? -shh * 4 * c * ZS : 0, cy = sy - 1.5 - lr + oy, droop = mix(1.1, 0.2, c) + D.fl * 0.6;\n  const svx = -shh * hs, svy = ch * hs * ZC, fx = ch * 2 * zm, fy = shh * 2 * ZC * (1 - c);\n  if (!down || c \u003c 1) for (const t of [-0.9, -0.35, 0.35, 0.9]) seg(sx, sy - 1.5, sx + ox + svx * t, cy + svy * t + droop * t * t + 1, lit([210, 210, 220]), 0.3 * a);\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let t = -1; t \u003c= 1; t += 0.45 / hs) {\n      const cell = min(8, floor((t + 1) * 4.5)), col = cell > 2 && cell \u003c 6 ? cb : ca, k = (cell & 1 ? 0.8 : 1) * (pass ? 1 : 0.5) * (1.12 - 0.12 * pop);\n      for (let q = -1; q \u003c= 1; q += 0.5) put(sx + ox + svx * t + fx * q, cy + svy * t + fy * q + droop * t * t + (pass ? 0 : 1), lit(col, k * (0.92 + 0.08 * q)), a);\n    }\n  put(sx, sy - 2, lit(HELM[D.helm]), a), put(sx, sy - 1, suit, a), put(sx + (D.fl > 0.3 ? 1 : 0), sy, suit.map((v) => v * 0.7), a);\n}\n\nfunction sock(P) {\n  const w = P.w, aw = abs(w), sx = w >= 0 ? 1 : -1;\n  for (let y = 104; y \u003c= 116; y++) put(WX, y, lit([200, 200, 206]));\n  for (let u = 0; u \u003c= 6; u += 0.5) {\n    const x = WX + sx * u * (0.3 + 0.7 * aw), y = 104 + u * (1 - aw) * 0.85 + sin(P.rt * 9 - u) * 0.35 * aw, col = lit(floor(u / 1.5) & 1 ? [240, 240, 240] : [255, 110, 20]);\n    put(x, y, col), u \u003c 4 && put(x, y + 1, col, 0.8);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  F = P.f;\n  const hh = P.h * 3, i0 = min(2, floor(hh));\n  K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  LT = KC(18);\n  backdrop(P);\n  F.set(P.bg);\n  // Cloud shadows crossing the fields.\n  for (let y = HZ; y \u003c H; y++) {\n    const zf = y - HZ + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const v = vn((((x - 32) * 24) / zf - P.cx * 1.1) * 0.035, (260 / zf) * 0.05), k = 1 - 0.5 * sm(0.45, 0.58, v), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n  farClouds(P);\n  sock(P);\n  const A = [];\n  for (const L of P.loads) for (const D of L.d) if (D.st === 4) canopy(D, L.t);\n  for (const L of P.loads) if (L.px > -40 && L.px \u003c 104) plane(P, L);\n  for (const L of P.loads) for (const D of L.d) if (D.st && D.st \u003c 4) A.push([D, L]);\n  A.sort((a, b) => a[0].z - b[0].z);\n  for (const [D, L] of A) {\n    if (D.st === 3) canopy(D, L.t);\n    else {\n      diver(D);\n      // Grips: the arms of two docked neighbours meet between them.\n      const E = L.d[(D.i + 1) % L.n];\n      if (D.st === 1 && E.st === 1 && D.g > 0.97 && E.g > 0.97) {\n        const d2 = (u, v) => (u[0] - v[0]) ** 2 + (u[1] - v[1]) ** 2, [a, b, c, e] = [bp(D, 0.9, -0.9), bp(D, 0.9, 0.9), bp(E, 0.9, -0.9), bp(E, 0.9, 0.9)];\n        const p = d2(a, c) + d2(a, e) \u003c d2(b, c) + d2(b, e) ? a : b, q = d2(p, c) \u003c d2(p, e) ? c : e;\n        const m = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];\n        seg(...p, ...m, lit(SUIT[D.suit])), seg(...m, ...q, lit(SUIT[E.suit]));\n      }\n    }\n  }\n  deck(P);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower."},{"name":"Divers","min":5,"max":12,"about":"How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down."},{"name":"Wind","min":-1,"max":1,"about":"The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you."}],"start":[0,2,5,0.06],"measures":{"motion":0.1475,"detail":0.0297,"edges":0.3609,"complexity":0.7202,"coverage":0.9986,"colour":0.3312,"drift":0.0468},"knobResponse":[0.1943,0.0707,0.0554,0.0919]},{"slug":"sled-dogs","title":"Sled Dogs","family":"polar","round":27,"note":"드론처럼 바로 위에서 본 개썰매 팀이 둘씩 갱라인에 매여 해빙 위를 달려 올라가요. 낮은 해가 개마다 긴 파란 그림자를 비스듬히 뒤로 던지고, 바람이 깎은 사스트루기 사이로 압력 능선과 다시 언 리드가 발밑을 흘러가요. K1 은 금빛 해에서 오로라 뜬 달밤으로 가고, 누르면 머셔가 외쳐 팀이 방향을 틀어요.","idea":"Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.","buttons":"K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.","code":"// ===== Patternflow pattern =====\n// Title:   Sled Dogs\n// Family:  polar\n// Idea:    Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after dog-sled teams on Arctic sea ice, here in pairs on a gangline (the tandem hitch) rather than the fan hitch used in Greenland\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1\n//\n// Knob 1: Light. A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow.\n// Knob 2: Speed. At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower.\n// Knob 3: Dogs. Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front.\n// Knob 4: Wind. Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice.\n// Buttons: K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.\n\nconst W = 64, H = 128, N = W * H;\n// The ice: a ring of world rows, x from -128 to 127.\nconst RX = 256, XO = 128, RY = 256, RN = RX * RY;\n// The shading grid and the window of heights around it.\nconst TW = 65, TH = 129, MX = 48, MY = 30, HW = TW + 2 * MX, HH = TH + 2 * MY;\n// Dogs are drawn in sixths of a metre, grown by Z.\nconst Z = 1.4, PITCH = 11 * Z, LAT = 2.5 * Z, STRIDE = 9 * Z, SLED = 15 * Z, PL = 1024;\nconst { min, max, floor, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rw = (y) => (((y % RY) + RY) % RY) * RX;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// The prevailing wind, which the sastrugi follow.\nconst GX = -0.8, GY = 0.6;\n// K1 stops: direct rgb, sky rgb, tan of elevation, aurora.\nconst KL = [\n  [0, 208, 146, 56, 64, 94, 160, 0.3, 0],\n  [0.33, 205, 122, 44, 60, 80, 142, 0.17, 0],\n  [0.6, 0, 0, 0, 84, 112, 186, 0.2, 0],\n  [1, 52, 64, 92, 12, 22, 52, 0.32, 1],\n].map((k) => Float64Array.from(k));\n// Coats from above, dark with a light face: black, grey, red, sable, black.\nconst COAT = [\n  [28, 26, 30, 64, 60, 60, 236, 232, 228],\n  [64, 62, 66, 112, 108, 104, 226, 222, 214],\n  [110, 56, 26, 150, 92, 50, 236, 220, 198],\n  [58, 42, 28, 104, 80, 56, 232, 216, 192],\n  [24, 22, 22, 44, 40, 38, 220, 214, 206],\n].map((c) => [0, 3, 6].map((j) => Float64Array.from(c.slice(j, j + 3), (v) => v / 255)));\nconst HARN = [1, 0.5, 0.04], LINE = [0.2, 0.17, 0.22], WOOD = [0.62, 0.46, 0.3], DARK = [0.26, 0.18, 0.12], LOAD = [0.44, 0.34, 0.24], RED = [0.78, 0.15, 0.1], FUR = [0.74, 0.66, 0.54];\n// Side views as capsules (a, h, a, h, r): a dog; the sled and musher.\nconst DOG = [-2, 2.75, 1.2, 2.95, 0.82, 1.2, 3.2, 2.7, 3.95, 0.6, 2.7, 3.95, 3.9, 3.65, 0.42, 2.55, 4.4, 2.7, 5, 0.22, -2.2, 3.2, -2.6, 4.2, 0.42, -2.6, 4.2, -1.8, 4.7, 0.36];\nconst SLD = [-1.5, 0.8, 14.5, 0.8, 0.55, 5.5, 1.8, 11.5, 1.8, 1, 2.6, 0.8, 2.6, 5.8, 0.3, 0.45, 0, 0.7, 5, 0.6, 0.7, 5, 0.9, 9, 1.15, 1, 10.2, 1, 10.3, 0.85, 1, 8.4, 2.5, 6, 0.4];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), U8 = (n) => new Uint8ClampedArray(n);\n  const S = (params.s = {\n    HT: F32(RN), AL: U8(RN * 3), MT: U8(RN), MK: U8(RN), LI: F32(RN), SQ: F32(RN), GN: new Int32Array(RN), gen: 1,\n    HL: F32(HW * HH), AM: F32(TW * TH * 3), DI: F32(TW * TH * 3), SM: F32(TW * TH), F: F32(N * 3), L: new Float64Array(9), TM: U8(1200), LC: new Float64Array(3),\n    PX: F32(PL), PY: F32(PL), np: PL, acc: 0.01, DX: F32(16), DY: F32(16), DF: F32(16), DO: F32(16), DC: U8(16), BX: F32(256), BY: F32(256), BA: F32(256), bi: 0,\n    lx: 0.01, ly: 0.01, th: 0.01, v: 20, vt: 20, ph: 0.01, t: 0.01, cx: -30, cy: -18, gy: 230, nd: 8, sbx: 0.01, sby: 0.01, sfx: 0.01, sfy: 0.01, ux: 0.01, uy: 0.01, run: 0.01, pt: 15.4,\n    rest: 0, restT: 0.01, turn: 1, turnT: 0.01, k1: -1, k4: 0.06, wind: 0.01, live: 0, cpY: [400, 50], cpX: [0, 0], feat: [], nf: 0, sk: 0,\n  });\n  for (let k = 0; k \u003c PL; k++) S.PY[k] = (PL - 1 - k) * 0.5;\n  for (let i = 0; i \u003c 16; i++) (S.DO[i] = hash(i, 3)), (S.DC[i] = floor(hash(i, 8) * 5));\n  for (let c = 0; c \u003c 1200; c++) S.TM[c] = c \u003c 205 ? c : 205 + 50 * (1 - exp(-(c - 205) / 50));\n  plan(S), plan(S), plan(S);\n  for (let y = 230; y > -53; y--) genRow(S, y);\n  S.gy = -53;\n}\n\n// The trail swings between control points.\nfunction trailX(S, y) {\n  const Y = S.cpY, X = S.cpX;\n  let i = 0;\n  while (i \u003c Y.length - 2 && Y[i + 1] > y) i++;\n  return mix(X[i], X[i + 1], sm(0, 1, (Y[i] - y) / (Y[i] - Y[i + 1])));\n}\n// Each obstacle lies across the way on; the trail swings round its end.\nfunction plan(S) {\n  const Y = S.cpY, X = S.cpX, ly = Y[Y.length - 1], lx = X[X.length - 1];\n  if (S.sk++ % 3 === 2) return Y.push(ly - 60 - 30 * rnd()), X.push(cl(lx + (rnd() - 0.5) * 20, -24, 24));\n  const side = abs(lx) > 6 ? (lx > 0 ? 1 : -1) : rnd() \u003c 0.5 ? 1 : -1, x0 = cl(lx - side * (9 + 5 * rnd()), -30, 30), y0 = ly - 60 - 20 * rnd(), sd = floor(rnd() * 999), ph = rnd() * 6;\n  Y.push(y0, y0 - 60 - 20 * rnd()), X.push(x0, cl(x0 + side * (9 + 6 * rnd()), -24, 24));\n  if (S.nf++ % 2 === 0) {\n    // A pressure ridge, square to the sun.\n    const a = -side * (0.5 + 0.4 * rnd()), len = 60 + 40 * rnd(), dx = side * cos(a), dy = sin(a);\n    S.feat.push({ k: 0, px: x0 + side * 4, py: y0, dx, dy, len, hh: 6 + 4 * rnd(), sd, ph, side, ol: 0, y0: y0 + min(0, dy * len) - 22, y1: y0 + max(0, dy * len) + 22 });\n  } else {\n    // A lead: slope, swing, wave number and width in dx, dy, len, hh.\n    const sl = (rnd() - 0.5) * 0.22, am = 3 + 4 * rnd(), w = 10 + 6 * rnd(), e = abs(sl) * (128 + abs(x0)) + am + w;\n    S.feat.push({ k: 1, px: x0, py: y0, dx: sl, dy: am, len: 0.03 + 0.03 * rnd(), hh: w, sd, ph, side, ol: 40 + 40 * rnd(), y0: y0 - e, y1: y0 + e });\n  }\n}\n\nfunction genRow(S, y) {\n  const o = rw(y), { HT, AL, MT } = S, fs = S.feat.filter((f) => y > f.y0 && y \u003c f.y1);\n  for (let i = 0; i \u003c RX; i++) {\n    // Sastrugi: crests with a long back to the sun and a steep lee face, broken into pieces.\n    const x = i - XO, u = x * GX + y * GY, v = -x * GY + y * GX, c = v * 0.085 + 2.4 * vn(u * 0.012, v * 0.012) + 0.7 * vn(u * 0.045, v * 0.03 + 20), cf = c - floor(c), ci = floor(c);\n    const sa = (cf \u003c 0.25 ? cf / 0.25 : (1 - cf) / 0.75) * sm(0.42, 0.75, vn(u * 0.06 + ci * 7.3, ci * 3.1)) * (0.25 + 0.75 * sm(0.3, 0.6, vn(x * 0.022 + 70, y * 0.022)));\n    let h = 0.95 * sa * sa + 0.15 * vn(u * 0.09 + 50, v * 0.34) + vn(x * 0.017 + 9, y * 0.017) - 0.5;\n    const g = 0.955 + 0.045 * hash(x, y);\n    let ar = 0.9 * g, ag = 0.94 * g, ab = g, mt = 0;\n    for (const f of fs) {\n      if (f.k === 0) {\n        // Tilted slabs, rubble at their feet.\n        const rx = x - f.px, ry = y - f.py, t = rx * f.dx + ry * f.dy;\n        if (t \u003c -8 || t > f.len + 8) continue;\n        const s = abs(ry * f.dx - rx * f.dy - 3 * sin(t * 0.06 + f.ph)), bk = floor(t / 3.4), e = sm(-4, 8, t) * sm(f.len + 4, f.len - 16, t), wb = 2.4 + 2.6 * hash(bk, f.sd + 1), gx = floor(x / 3), gy = floor(y / 3);\n        const hb = f.hh * (0.45 + 0.55 * hash(bk, f.sd)) * e;\n        let hr = hb * (1 - s / wb) + 0.5 * hb * (hash(bk, f.sd + 2) - 0.5) * (t / 3.4 - bk - 0.5), q = hash(bk, f.sd + 3);\n        if (hash(gx, gy + f.sd) \u003c 0.2 * e * sm(wb + 6, wb, s) && 0.8 + 1.4 * hash(gy, gx) > hr) (hr = 0.8 + 1.4 * hash(gy, gx)), (q = hash(gx + 7, gy));\n        if (hr > 0.2 && hr > h - 0.2) (h = max(h, hr) + 0.15), (mt = 1), (ar = mix(0.84, 0.44, q)), (ag = mix(0.93, 0.76, q)), (ab = mix(1, 0.92, q));\n      } else {\n        // A refrozen lead: dark young ice with frost flowers, and open water along part of it.\n        const yc = f.py + f.dx * (x - f.px) + f.dy * sin(x * f.len + f.ph), e = abs(y - yc) / (f.hh * (0.35 + 0.3 * vn(x * 0.045, f.sd)));\n        if (e > 1) {\n          h += 0.7 * max(0, 1.4 - e);\n          continue;\n        }\n        const sx = f.side * (x - f.px), gq = mix(0.14, 0.4, e * e) * (0.85 + 0.3 * vn(x * 0.2, y * 0.2)), fr = hash(x + 3, y) \u003c 0.07 ? 0.35 + 0.3 * hash(y, x) : 0;\n        (h = -0.45), (mt = 2), (ar = gq * 0.9 + fr), (ag = gq * 0.97 + fr), (ab = gq * 1.06 + fr);\n        if (e \u003c 0.8 * sm(5, 10, sx) * sm(f.ol + 10, f.ol, sx)) (mt = 3), (h = -0.6), (ar = 0.03), (ag = 0.07), (ab = 0.11);\n      }\n    }\n    const k = o + i;\n    (HT[k] = h), (AL[k * 3] = ar * 255), (AL[k * 3 + 1] = ag * 255), (AL[k * 3 + 2] = ab * 255), (MT[k] = mt), (S.MK[k] = S.GN[k] = 0);\n  }\n}\n\n// A paw print or runner groove in the snow; young ice takes none.\nfunction stamp(S, x, y, depth, bit) {\n  const i = floor(x + 0.5) + XO, yy = floor(y + 0.5), k = rw(yy) + i, A = S.AL;\n  if (i \u003c 0 || i >= RX || S.MK[k] & bit || S.MT[k] > 1) return;\n  S.MK[k] |= bit;\n  (S.HT[k] -= depth), (A[k * 3] *= 0.93), (A[k * 3 + 1] *= 0.95);\n  // Light it again.\n  for (let j = -2; j \u003c 3; j++) for (let q = max(0, i - 2); q \u003c min(RX, i + 3); q++) S.GN[rw(yy + j) + q] = 0;\n}\n\n// The point s LEDs back along the lead dog's path.\nconst PP = new Float64Array(2);\nfunction pathAt(S, s) {\n  const f = S.acc, last = (S.np - 1) & (PL - 1);\n  if (s \u003c= f) return (PP[0] = mix(S.lx, S.PX[last], s / max(f, 1e-6))), (PP[1] = mix(S.ly, S.PY[last], s / max(f, 1e-6)));\n  const k = (s - f) * 2, i = floor(k), r = k - i, a = (S.np - 1 - i) & (PL - 1), b = (S.np - 2 - i) & (PL - 1);\n  (PP[0] = mix(S.PX[a], S.PX[b], r)), (PP[1] = mix(S.PY[a], S.PY[b], r));\n}\n// Dogs in pairs on the path, the sled behind.\nfunction layout(S) {\n  // Long teams close up to fit the panel.\n  const n = S.nd, odd = n & 1, pt = (S.pt = min(PITCH, 76 / (((n + 1) >> 1) - 1))), sf = (((n + 1) >> 1) - 1) * pt + 8 * Z;\n  for (let i = 0; i \u003c n; i++) {\n    const side = odd && !i ? 0 : (odd ? i - 1 : i) & 1 ? 1 : -1, s = ((i + odd) >> 1) * pt + 0.6 * (S.DO[i] - 0.5) + (side > 0 ? 3.5 * Z : 0);\n    pathAt(S, s - 1);\n    const ax = PP[0], ay = PP[1];\n    pathAt(S, s + 1);\n    const fx = ax - PP[0], fy = ay - PP[1], l = sqrt(fx * fx + fy * fy) || 1;\n    pathAt(S, s);\n    (S.DX[i] = PP[0] - (fy / l) * side * LAT), (S.DY[i] = PP[1] + (fx / l) * side * LAT), (S.DF[i] = atan2(fx / l, -fy / l));\n  }\n  pathAt(S, sf), (S.sfx = PP[0]), (S.sfy = PP[1]);\n  pathAt(S, sf + SLED), (S.sbx = PP[0]), (S.sby = PP[1]);\n  (S.ux = (S.sfx - S.sbx) / SLED), (S.uy = (S.sfy - S.sby) / SLED);\n}\n\nfunction step(S, d, k4) {\n  S.t += d;\n  if (S.rest && (S.restT += d) > 10) S.rest = 0;\n  S.v += ((S.rest ? 0 : S.vt) - S.v) * min(1, d * (S.rest ? 1.6 : 0.9));\n  const v = S.v, rate = 0.065 * v * d;\n  // The lead dog aims 22 LEDs up the trail, or swings on a call.\n  let des = S.turnT > 0 ? ((S.turnT -= d), S.turn * 1.15) : cl(atan2(trailX(S, S.ly - 22) - S.lx, 22), -0.5, 0.5);\n  if (abs(S.lx) > 44) des = S.lx > 0 ? -0.6 : 0.6;\n  S.th += cl(des - S.th, -rate, rate);\n  const dist = v * d, fx = sin(S.th), fy = -cos(S.th), oph = S.ph;\n  (S.lx += fx * dist), (S.ly += fy * dist), (S.acc += dist), (S.ph += dist / STRIDE);\n  for (; S.acc >= 0.5; S.np++) (S.acc -= 0.5), (S.PX[S.np & (PL - 1)] = S.lx - fx * S.acc), (S.PY[S.np & (PL - 1)] = S.ly - fy * S.acc);\n  layout(S);\n  // Each foot leaves a print and each stride a breath; the runners cut grooves.\n  for (let i = 0; i \u003c S.nd; i++) {\n    const a = sin(S.DF[i]), b = -cos(S.DF[i]), o = S.DO[i];\n    for (let l = 0; l \u003c 4; l++) {\n      const fa = (LJ[l] + 1.5) * Z, fb = l & 1 ? Z : -Z;\n      if (floor(S.ph + o + LO[l]) > floor(oph + o + LO[l])) stamp(S, S.DX[i] + a * fa - b * fb, S.DY[i] + b * fa + a * fb, 0.22, 1);\n    }\n    if (floor(S.ph + o * 3) > floor(oph + o * 3)) {\n      const p = S.bi++ & 255;\n      (S.BX[p] = S.DX[i] + a * 4.6 * Z), (S.BY[p] = S.DY[i] + b * 4.6 * Z), (S.BA[p] = 0.01);\n    }\n  }\n  const ux = S.ux, uy = S.uy;\n  for (let e = -1; e \u003c= dist - 0.5; e += 0.5) for (let r = -2 * Z; r \u003c 3 * Z; r += 4 * Z) stamp(S, S.sbx - uy * r + ux * e, S.sby + ux * r + uy * e, 0.3, 2);\n  // The camera keeps the musher at row 118.\n  S.cx += ((S.lx + S.sbx) / 2 - 32 + (S.k1 \u003c 0.6 ? 6 : -6) - S.cx) * min(1, d * 1.5);\n  S.cy = S.sby - 118;\n  while (S.gy > S.cy - 40) genRow(S, --S.gy);\n  while (S.cpY[S.cpY.length - 1] > S.ly - 420) plan(S);\n  while (S.cpY.length > 4 && S.cpY[2] > S.ly + 300) S.cpY.shift(), S.cpX.shift();\n  S.feat = S.feat.filter((f) => f.y0 \u003c S.gy);\n  for (let p = 0, wv = (4 + 60 * k4) * d; p \u003c 256; p++) if (S.BA[p] \u003c 1.5) (S.BA[p] += d), (S.BX[p] += GX * wv), (S.BY[p] += GY * wv);\n  S.wind += (8 + 90 * k4) * d;\n}\n\n// Each leg from the side, joint to knee to foot; the hind pair lands first.\nconst LO = [0.5, 0.58, 0, 0.08], LJ = [1.1, 1.1, -1.9, -1.9], LG = new Float64Array(24);\nfunction legs(ph, run, bob) {\n  for (let l = 0; l \u003c 4; l++) {\n    const p = (((ph + LO[l]) % 1) + 1) % 1, R = 1.8 * run, ja = LJ[l], jh = 2.2 + bob, u = (p - 0.42) / 0.58;\n    const fa = ja + (p \u003c 0.42 ? R * (1 - p / 0.21) : -R + 2 * R * u * u * (3 - 2 * u)), fh = p \u003c 0.42 ? 0 : 0.9 * run * sin(PI * u);\n    const dx = fa - ja, dy = fh - jh, dd = sqrt(dx * dx + dy * dy), k = sqrt(max(0, 1.69 - (dd * dd) / 4)) / max(dd, 0.01), o = l * 6;\n    (LG[o] = ja), (LG[o + 1] = jh), (LG[o + 2] = (ja + fa) / 2 + dy * k), (LG[o + 3] = (jh + fh) / 2 - dx * k), (LG[o + 4] = fa), (LG[o + 5] = fh);\n  }\n}\n// Distance to a capsule; OO keeps the offset for shading.\nconst OO = new Float64Array(2);\nfunction cap(a, b, a0, b0, a1, b1, r) {\n  const pa = a - a0, pb = b - b0, ba = a1 - a0, bb = b1 - b0, t = cl((pa * ba + pb * bb) / (ba * ba + bb * bb + 1e-9), 0, 1), oa = pa - ba * t, ob = pb - bb * t;\n  (OO[0] = oa), (OO[1] = ob);\n  return sqrt(oa * oa + ob * ob) - r;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], k1 = cl(k[0], 0, 1), b = input.btnPressed || [];\n  (S.vt = 10 * cl(k[1], 0.2, 3)), (S.nd = cl(Math.round(k[2]), 8, 14)), (S.k4 = cl(k[3], 0, 1));\n  if (k1 !== S.k1) {\n    // New light: all ice is lit again.\n    let i = 0;\n    while (i \u003c KL.length - 2 && k1 > KL[i + 1][0]) i++;\n    for (let j = 1; j \u003c 9; j++) S.L[j] = mix(KL[i][j], KL[i + 1][j], sm(KL[i][0], KL[i + 1][0], k1));\n    (S.k1 = k1), S.gen++;\n  }\n  for (; !S.live; S.live = S.t > 6 ? 1 : 0) step(S, 1 / 30, S.k4);\n  if (b[0]) (S.turn = S.lx > 0 ? -1 : 1), (S.turnT = 1.6);\n  if (b[1]) (S.rest = 1 - S.rest), (S.restT = 0);\n  step(S, cl(dt || 0, 0, 0.1), S.k4);\n}\n\n// Per frame: the frame, the shadow mask, the light and the LED paint works on.\nlet F, SM, LC, LL, Lx, Ly, cE, sE, PO, La, Lb;\nfunction put(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  (F[o] += (r - F[o]) * a), (F[o + 1] += (g - F[o + 1]) * a), (F[o + 2] += (b - F[o + 2]) * a);\n}\n// Lay a part (distance d, radius r, 0 if flat) of colour c on LED PO.\nfunction paint(d, r, c, f) {\n  const q = cl(0.5 - d * Z, 0, 1) * f, nz = r ? sqrt(max(0, 1 - (OO[0] * OO[0] + OO[1] * OO[1]) / (r * r))) : 1, df = r ? max(0, ((OO[0] * La + OO[1] * Lb) / r) * cE + nz * sE) : sE;\n  if (q > 0) for (let k = 0; k \u003c 3; k++) F[PO + k] += (c[k] * (LL[k + 1] * min(2, df / sE) + LL[k + 4] * (0.55 + 0.45 * nz)) - F[PO + k]) * q;\n}\n// Nearest capsule of side view P; bob lifts the body.\nfunction side(P, a, h, bob) {\n  let d = 99;\n  for (let j = 0; j \u003c P.length; j += 5) d = min(d, cap(a, h, P[j], P[j + 1] + bob, P[j + 2], P[j + 3] + bob, P[j + 4]));\n  return d;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  (F = S.F), (SM = S.SM), (LC = S.LC), (LL = S.L);\n  const { HL, HT, AL, MT, AM, DI, L, TM, LI, SQ, GN, cx, cy, t, k4, gen, nd: n } = S, run = (S.run = cl(S.v / 6, 0, 1));\n  // Sun in the upper left, moon in the upper right.\n  const night = S.k1 > 0.6, lx = (Lx = night ? 0.85 : -0.8), ly = (Ly = night ? -0.53 : -0.6), te = L[7], aur = L[8];\n  (cE = 1 / sqrt(1 + te * te)), (sE = te * cE);\n  const dON = L[1] + L[2] + L[3] > 3, Kx = -lx / te, Ky = -ly / te, ox = floor(cx), oy = floor(cy), fx = cx - ox, fy = cy - oy;\n  let hmax = -9, hmin = 9;\n  for (let j = 0, q = 0; j \u003c HH; j++)\n    for (let i = 0, ro = rw(oy - MY + j); i \u003c HW; i++, q++) {\n      const h = (HL[q] = HT[ro + cl(ox - MX + i + XO, 0, RX - 1)]);\n      (hmax = max(hmax, h)), (hmin = min(hmin, h));\n    }\n  const ms = min(46, floor((hmax - hmin) / te) + 1);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0, ro = rw(oy + ty); tx \u003c TW; tx++) {\n      const wi = ro + cl(ox + tx + XO, 0, RX - 1);\n      // Ice keeps its light until the light or the ice changes.\n      if (GN[wi] !== gen) {\n        const k = (ty + MY) * HW + tx + MX, h = HL[k], gx = (HL[k + 1] - HL[k - 1]) * 0.7, gy = (HL[k + HW] - HL[k - HW]) * 0.7;\n        const inv = 1 / sqrt(gx * gx + gy * gy + 1), dif = (-gx * lx * cE - gy * ly * cE + sE) * inv;\n        let lt = 0;\n        if (dif > 0 && dON) {\n          let px = tx + MX + 0.5, py = ty + MY + 0.5, rh = h, oc = -1;\n          for (let s = 0; s \u003c ms && rh \u003c= hmax; s++) (px += lx), (py += ly), (rh += te), (oc = max(oc, HL[(py | 0) * HW + (px | 0)] - rh));\n          lt = min(2.2, dif / sE) * (1 - sm(-0.15, 0.3, oc));\n        }\n        // Slopes facing the light's side of the sky catch more sky.\n        const cav = cl(((HL[k - 1] + HL[k + 1] + HL[k - HW] + HL[k + HW]) * 0.25 - h) * 0.6, -0.15, 0.3), nh = cl((-gx * lx - gy * ly) * inv * 2.5, -0.6, 0.6);\n        (LI[wi] = lt), (SQ[wi] = (0.6 + 0.4 * inv) * (1 - cav) * (1 + 0.5 * nh)), (GN[wi] = gen);\n      }\n      // Aurora light; young ice and water mirror the sky.\n      const sk = SQ[wi], mt = MT[wi], o = (ty * TW + tx) * 3, lit = LI[wi] * (mt === 3 ? 0.1 : 1);\n      const eg = aur > 0 ? aur * 100 * (0.5 + 0.5 * sin((ox + tx) * 0.05 + (oy + ty) * 0.013 + 1.4 * sin((oy + ty) * 0.021 - t * 0.2) + t * 0.3)) ** 8 : 0;\n      const rf = mt > 1 ? 0.3 : 0;\n      for (let c = 0; c \u003c 3; c++) (AM[o + c] = (AL[wi * 3 + c] / 255) * (L[4 + c] * sk + eg * (c === 1 ? 1 : 0.15)) + rf * L[4 + c]), (DI[o + c] = (AL[wi * 3 + c] / 255) * L[1 + c] * lit);\n    }\n\n  // Shadows: each side view thrown along the snow.\n  SM.fill(0);\n  const ux = S.ux, uy = S.uy;\n  for (let i = 0; i \u003c n && dON; i++) {\n    const a = S.DF[i], ph = S.ph + S.DO[i], bob = 0.22 * run * sin(2 * PI * ph);\n    legs(ph, run, bob);\n    shadowOf(S.DX[i] - cx + fx, S.DY[i] - cy + fy, sin(a), -cos(a), Kx, Ky, 4.6, 5.6, DOG, bob, 1);\n  }\n  if (dON) shadowOf(S.sbx - cx + fx, S.sby - cy + fy, ux, uy, Kx, Ky, 16, 11, SLD, 0, 0);\n  // Snow between grid points, shadows taken out.\n  for (let i = 0, o = 0; i \u003c TW * TH; i++) for (let c = 0, s = 1 - 0.55 * SM[i]; c \u003c 3; c++, o++) AM[o] += DI[o] * s;\n  const w00 = (1 - fx) * (1 - fy), w10 = fx * (1 - fy), w01 = (1 - fx) * fy, w11 = fx * fy;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, q = y * TW * 3; x \u003c W; x++) for (let c = 0; c \u003c 3; c++, p++, q++) F[p] = w00 * AM[q] + w10 * AM[q + 3] + w01 * AM[q + TW * 3] + w11 * AM[q + TW * 3 + 3];\n\n  // Spindrift, under the dogs.\n  for (let c = 0; c \u003c 3; c++) LC[c] = L[4 + c] * 0.8 + L[1 + c] * 0.9;\n  if (k4 > 0.01) {\n    const th = 0.68 - 0.36 * k4, hz = 0.24 * k4 * k4;\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const wx = x + cx, wy = y + cy, al = wx * GX + wy * GY - S.wind, ac = -wx * GY + wy * GX, n1 = 0.62 * vn(al * 0.055, ac * 0.325);\n        if (n1 + 0.38 \u003c th && hz \u003c 0.004) continue;\n        const q = sm(th, th + 0.25, n1 + 0.38 * vn(al * 0.125 + 17, ac * 0.65 + 5)) * (0.4 + 0.6 * k4) * 0.9 + hz, p = i * 3;\n        for (let c = 0; c \u003c 3; c++) F[p + c] += ((LC[c] + 25 + 7.5 * c) * 1.1 - F[p + c]) * q;\n      }\n  }\n  // The team, then breath.\n  gangline(S);\n  for (let i = 0; i \u003c n; i++) dog(S, i);\n  sled(S.sbx - cx, S.sby - cy, ux, uy);\n  for (let p = 0; p \u003c 256; p++) {\n    const ag = S.BA[p], bx = S.BX[p] - cx, by = S.BY[p] - cy, r = 0.7 + ag * (1.2 + k4), al = 0.32 * (1 - ag / 1.5) * (1 - 0.5 * k4);\n    for (let y = floor(by - r); y \u003c= by + r && ag \u003c 1.5; y++)\n      for (let x = floor(bx - r); x \u003c= bx + r; x++) put(x, y, LC[0] * 1.15, LC[1] * 1.15, LC[2] * 1.15, al * (1 - ((x + 0.5 - bx) ** 2 + (y + 0.5 - by) ** 2) / (r * r)));\n  }\n  const tm = (v) => TM[min(1199, v | 0)];\n  for (let i = 0, p = 0; i \u003c N; i++, p += 3) display.setPixel(i & 63, i >> 6, tm(F[p]), tm(F[p + 1]), tm(F[p + 2]));\n}\n\n// A shadow: each grid point maps back to (a, h) in side view P.\nfunction shadowOf(x, y, Fx, Fy, Kx, Ky, A, Hh, P, bob, withLegs) {\n  const det = Fx * Ky - Fy * Kx, ax = abs(Fx) * A * Z, ay = abs(Fy) * A * Z, hx = Kx * Hh * Z, hy = Ky * Hh * Z;\n  for (let py = max(0, floor(y - ay + min(0, hy))); py \u003c= min(TH - 1, y + ay + max(0, hy)) && abs(det) > 0.05; py++)\n    for (let px = max(0, floor(x - ax + min(0, hx))); px \u003c= min(TW - 1, x + ax + max(0, hx)); px++) {\n      const rx = (px + 0.5 - x) / Z, ry = (py + 0.5 - y) / Z, a = (rx * Ky - ry * Kx) / det, h = (Fx * ry - Fy * rx) / det, i = py * TW + px;\n      if (h \u003c -0.6 || h > Hh || a \u003c -A || a > A) continue;\n      let d = side(P, a, h, bob);\n      for (let o = 0; o \u003c 24 && withLegs && h \u003c 3.2; o += 6) if (abs(a - LG[o + 2]) \u003c 2.2) d = min(d, cap(a, h, LG[o], LG[o + 1], LG[o + 2], LG[o + 3], 0.36), cap(a, h, LG[o + 2], LG[o + 3], LG[o + 4], LG[o + 5], 0.28));\n      SM[i] = max(SM[i], cl(0.6 - d * 1.4 * Z, 0, 1));\n    }\n}\n// The gangline, in soft dots from the lead dog to the sled.\nfunction gangline(S) {\n  for (let s = (S.nd & 1 ? 2.6 : -1) * Z; s \u003c (((S.nd + 1) >> 1) - 1) * S.pt + 8 * Z; s += 0.6) {\n    pathAt(S, s);\n    const x = PP[0] - S.cx - 0.5, y = PP[1] - S.cy - 0.5;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = floor(x) + (j & 1), Y = floor(y) + (j >> 1);\n      put(X, Y, LINE[0] * LC[0], LINE[1] * LC[1], LINE[2] * LC[2], 0.45 * (1 - abs(x - X)) * (1 - abs(y - Y)));\n    }\n  }\n}\n\n// A dog from above: legs, saddle, harness, neck, head, curled tail.\nfunction dog(S, i) {\n  const x = S.DX[i] - S.cx, y = S.DY[i] - S.cy, an = S.DF[i], Fx = sin(an), Fy = -cos(an), ph = S.ph + S.DO[i], [BK, SD, FC] = COAT[S.DC[i]], ext = sin(2 * PI * ph) * S.run, ts = i & 1 ? 1 : -1;\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  legs(ph, S.run, 0);\n  for (let py = max(0, floor(y - 5.4 * Z)); py \u003c= min(H - 1, y + 5.4 * Z); py++)\n    for (let px = max(0, floor(x - 5.4 * Z)); px \u003c= min(W - 1, x + 5.4 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx;\n      if (a * a + b * b > 30) continue;\n      PO = (py * W + px) * 3;\n      for (let l = 0; l \u003c 24; l += 6) paint(cap(a, b, LG[l], l % 12 ? 0.85 : -0.85, LG[l + 4], l % 12 ? 0.95 : -0.95, 0.38), 0.38, SD, 1);\n      const d = cap(a, b, -2.1 - 0.25 * ext, 0, 1.1 + 0.15 * ext, 0, 1.12), q = cl(0.5 - d * Z, 0, 1);\n      paint(d, 1.12, SD, 1);\n      if (q > 0) paint(d, 1.12, BK, sm(0.85, 0.35, abs(OO[1])) * q), abs(a - 0.7) \u003c 0.45 && paint(d, 1.12, HARN, q);\n      paint(cap(a, b, 1.4, 0, 2.7, 0, 0.55), 0.55, SD, 1);\n      paint(cap(a, b, 3, 0, 3.3, 0, 0.8), 0.8, FC, 1);\n      paint(cap(a, b, 3.5, 0, 4.4, 0, 0.42), 0.42, FC, 1);\n      paint(cap(a, b, -2.2, ts * 0.35, -2.2, ts * 0.35, 0.75), 0.75, FC, 1);\n    }\n}\n\n// The sled: runners, slats, load, handlebar, the musher.\nfunction sled(x, y, Fx, Fy) {\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  for (let py = max(0, floor(y - 17 * Z)); py \u003c= min(H - 1, y + 17 * Z); py++)\n    for (let px = max(0, floor(x - 17 * Z)); px \u003c= min(W - 1, x + 17 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx, ab = abs(b);\n      if (a \u003c -3 || a > 16 || ab > 3.2) continue;\n      PO = (py * W + px) * 3;\n      paint(cap(a, ab, -2.2, 2, 14.6, 2, 0.4), 0, DARK, 1);\n      paint(max(ab - 1.7, abs(a - 8.4) - 5.6), 0, a % 1.6 \u003c 1.1 ? WOOD : DARK, 1);\n      paint(max(ab - 1.3, abs(a - 8.7) - 3.2) - 0.25, 0, LOAD, 1);\n      paint(cap(a, b, 2.7, -2.3, 2.7, 2.3, 0.35), 0, DARK, 1);\n      paint(cap(a, b, 0.7, -1.4, 0.7, 1.4, 1), 1, RED, 1);\n      paint(cap(a, b, 1, 0, 1, 0, 1.1), 1.1, FUR, 1);\n    }\n}\n","layer":{"id":"layer-sled-dogs","type":"code","name":"sled-dogs","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sled Dogs\n// Family:  polar\n// Idea:    Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after dog-sled teams on Arctic sea ice, here in pairs on a gangline (the tandem hitch) rather than the fan hitch used in Greenland\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1\n//\n// Knob 1: Light. A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow.\n// Knob 2: Speed. At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower.\n// Knob 3: Dogs. Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front.\n// Knob 4: Wind. Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice.\n// Buttons: K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.\n\nconst W = 64, H = 128, N = W * H;\n// The ice: a ring of world rows, x from -128 to 127.\nconst RX = 256, XO = 128, RY = 256, RN = RX * RY;\n// The shading grid and the window of heights around it.\nconst TW = 65, TH = 129, MX = 48, MY = 30, HW = TW + 2 * MX, HH = TH + 2 * MY;\n// Dogs are drawn in sixths of a metre, grown by Z.\nconst Z = 1.4, PITCH = 11 * Z, LAT = 2.5 * Z, STRIDE = 9 * Z, SLED = 15 * Z, PL = 1024;\nconst { min, max, floor, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rw = (y) => (((y % RY) + RY) % RY) * RX;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// The prevailing wind, which the sastrugi follow.\nconst GX = -0.8, GY = 0.6;\n// K1 stops: direct rgb, sky rgb, tan of elevation, aurora.\nconst KL = [\n  [0, 208, 146, 56, 64, 94, 160, 0.3, 0],\n  [0.33, 205, 122, 44, 60, 80, 142, 0.17, 0],\n  [0.6, 0, 0, 0, 84, 112, 186, 0.2, 0],\n  [1, 52, 64, 92, 12, 22, 52, 0.32, 1],\n].map((k) => Float64Array.from(k));\n// Coats from above, dark with a light face: black, grey, red, sable, black.\nconst COAT = [\n  [28, 26, 30, 64, 60, 60, 236, 232, 228],\n  [64, 62, 66, 112, 108, 104, 226, 222, 214],\n  [110, 56, 26, 150, 92, 50, 236, 220, 198],\n  [58, 42, 28, 104, 80, 56, 232, 216, 192],\n  [24, 22, 22, 44, 40, 38, 220, 214, 206],\n].map((c) => [0, 3, 6].map((j) => Float64Array.from(c.slice(j, j + 3), (v) => v / 255)));\nconst HARN = [1, 0.5, 0.04], LINE = [0.2, 0.17, 0.22], WOOD = [0.62, 0.46, 0.3], DARK = [0.26, 0.18, 0.12], LOAD = [0.44, 0.34, 0.24], RED = [0.78, 0.15, 0.1], FUR = [0.74, 0.66, 0.54];\n// Side views as capsules (a, h, a, h, r): a dog; the sled and musher.\nconst DOG = [-2, 2.75, 1.2, 2.95, 0.82, 1.2, 3.2, 2.7, 3.95, 0.6, 2.7, 3.95, 3.9, 3.65, 0.42, 2.55, 4.4, 2.7, 5, 0.22, -2.2, 3.2, -2.6, 4.2, 0.42, -2.6, 4.2, -1.8, 4.7, 0.36];\nconst SLD = [-1.5, 0.8, 14.5, 0.8, 0.55, 5.5, 1.8, 11.5, 1.8, 1, 2.6, 0.8, 2.6, 5.8, 0.3, 0.45, 0, 0.7, 5, 0.6, 0.7, 5, 0.9, 9, 1.15, 1, 10.2, 1, 10.3, 0.85, 1, 8.4, 2.5, 6, 0.4];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), U8 = (n) => new Uint8ClampedArray(n);\n  const S = (params.s = {\n    HT: F32(RN), AL: U8(RN * 3), MT: U8(RN), MK: U8(RN), LI: F32(RN), SQ: F32(RN), GN: new Int32Array(RN), gen: 1,\n    HL: F32(HW * HH), AM: F32(TW * TH * 3), DI: F32(TW * TH * 3), SM: F32(TW * TH), F: F32(N * 3), L: new Float64Array(9), TM: U8(1200), LC: new Float64Array(3),\n    PX: F32(PL), PY: F32(PL), np: PL, acc: 0.01, DX: F32(16), DY: F32(16), DF: F32(16), DO: F32(16), DC: U8(16), BX: F32(256), BY: F32(256), BA: F32(256), bi: 0,\n    lx: 0.01, ly: 0.01, th: 0.01, v: 20, vt: 20, ph: 0.01, t: 0.01, cx: -30, cy: -18, gy: 230, nd: 8, sbx: 0.01, sby: 0.01, sfx: 0.01, sfy: 0.01, ux: 0.01, uy: 0.01, run: 0.01, pt: 15.4,\n    rest: 0, restT: 0.01, turn: 1, turnT: 0.01, k1: -1, k4: 0.06, wind: 0.01, live: 0, cpY: [400, 50], cpX: [0, 0], feat: [], nf: 0, sk: 0,\n  });\n  for (let k = 0; k \u003c PL; k++) S.PY[k] = (PL - 1 - k) * 0.5;\n  for (let i = 0; i \u003c 16; i++) (S.DO[i] = hash(i, 3)), (S.DC[i] = floor(hash(i, 8) * 5));\n  for (let c = 0; c \u003c 1200; c++) S.TM[c] = c \u003c 205 ? c : 205 + 50 * (1 - exp(-(c - 205) / 50));\n  plan(S), plan(S), plan(S);\n  for (let y = 230; y > -53; y--) genRow(S, y);\n  S.gy = -53;\n}\n\n// The trail swings between control points.\nfunction trailX(S, y) {\n  const Y = S.cpY, X = S.cpX;\n  let i = 0;\n  while (i \u003c Y.length - 2 && Y[i + 1] > y) i++;\n  return mix(X[i], X[i + 1], sm(0, 1, (Y[i] - y) / (Y[i] - Y[i + 1])));\n}\n// Each obstacle lies across the way on; the trail swings round its end.\nfunction plan(S) {\n  const Y = S.cpY, X = S.cpX, ly = Y[Y.length - 1], lx = X[X.length - 1];\n  if (S.sk++ % 3 === 2) return Y.push(ly - 60 - 30 * rnd()), X.push(cl(lx + (rnd() - 0.5) * 20, -24, 24));\n  const side = abs(lx) > 6 ? (lx > 0 ? 1 : -1) : rnd() \u003c 0.5 ? 1 : -1, x0 = cl(lx - side * (9 + 5 * rnd()), -30, 30), y0 = ly - 60 - 20 * rnd(), sd = floor(rnd() * 999), ph = rnd() * 6;\n  Y.push(y0, y0 - 60 - 20 * rnd()), X.push(x0, cl(x0 + side * (9 + 6 * rnd()), -24, 24));\n  if (S.nf++ % 2 === 0) {\n    // A pressure ridge, square to the sun.\n    const a = -side * (0.5 + 0.4 * rnd()), len = 60 + 40 * rnd(), dx = side * cos(a), dy = sin(a);\n    S.feat.push({ k: 0, px: x0 + side * 4, py: y0, dx, dy, len, hh: 6 + 4 * rnd(), sd, ph, side, ol: 0, y0: y0 + min(0, dy * len) - 22, y1: y0 + max(0, dy * len) + 22 });\n  } else {\n    // A lead: slope, swing, wave number and width in dx, dy, len, hh.\n    const sl = (rnd() - 0.5) * 0.22, am = 3 + 4 * rnd(), w = 10 + 6 * rnd(), e = abs(sl) * (128 + abs(x0)) + am + w;\n    S.feat.push({ k: 1, px: x0, py: y0, dx: sl, dy: am, len: 0.03 + 0.03 * rnd(), hh: w, sd, ph, side, ol: 40 + 40 * rnd(), y0: y0 - e, y1: y0 + e });\n  }\n}\n\nfunction genRow(S, y) {\n  const o = rw(y), { HT, AL, MT } = S, fs = S.feat.filter((f) => y > f.y0 && y \u003c f.y1);\n  for (let i = 0; i \u003c RX; i++) {\n    // Sastrugi: crests with a long back to the sun and a steep lee face, broken into pieces.\n    const x = i - XO, u = x * GX + y * GY, v = -x * GY + y * GX, c = v * 0.085 + 2.4 * vn(u * 0.012, v * 0.012) + 0.7 * vn(u * 0.045, v * 0.03 + 20), cf = c - floor(c), ci = floor(c);\n    const sa = (cf \u003c 0.25 ? cf / 0.25 : (1 - cf) / 0.75) * sm(0.42, 0.75, vn(u * 0.06 + ci * 7.3, ci * 3.1)) * (0.25 + 0.75 * sm(0.3, 0.6, vn(x * 0.022 + 70, y * 0.022)));\n    let h = 0.95 * sa * sa + 0.15 * vn(u * 0.09 + 50, v * 0.34) + vn(x * 0.017 + 9, y * 0.017) - 0.5;\n    const g = 0.955 + 0.045 * hash(x, y);\n    let ar = 0.9 * g, ag = 0.94 * g, ab = g, mt = 0;\n    for (const f of fs) {\n      if (f.k === 0) {\n        // Tilted slabs, rubble at their feet.\n        const rx = x - f.px, ry = y - f.py, t = rx * f.dx + ry * f.dy;\n        if (t \u003c -8 || t > f.len + 8) continue;\n        const s = abs(ry * f.dx - rx * f.dy - 3 * sin(t * 0.06 + f.ph)), bk = floor(t / 3.4), e = sm(-4, 8, t) * sm(f.len + 4, f.len - 16, t), wb = 2.4 + 2.6 * hash(bk, f.sd + 1), gx = floor(x / 3), gy = floor(y / 3);\n        const hb = f.hh * (0.45 + 0.55 * hash(bk, f.sd)) * e;\n        let hr = hb * (1 - s / wb) + 0.5 * hb * (hash(bk, f.sd + 2) - 0.5) * (t / 3.4 - bk - 0.5), q = hash(bk, f.sd + 3);\n        if (hash(gx, gy + f.sd) \u003c 0.2 * e * sm(wb + 6, wb, s) && 0.8 + 1.4 * hash(gy, gx) > hr) (hr = 0.8 + 1.4 * hash(gy, gx)), (q = hash(gx + 7, gy));\n        if (hr > 0.2 && hr > h - 0.2) (h = max(h, hr) + 0.15), (mt = 1), (ar = mix(0.84, 0.44, q)), (ag = mix(0.93, 0.76, q)), (ab = mix(1, 0.92, q));\n      } else {\n        // A refrozen lead: dark young ice with frost flowers, and open water along part of it.\n        const yc = f.py + f.dx * (x - f.px) + f.dy * sin(x * f.len + f.ph), e = abs(y - yc) / (f.hh * (0.35 + 0.3 * vn(x * 0.045, f.sd)));\n        if (e > 1) {\n          h += 0.7 * max(0, 1.4 - e);\n          continue;\n        }\n        const sx = f.side * (x - f.px), gq = mix(0.14, 0.4, e * e) * (0.85 + 0.3 * vn(x * 0.2, y * 0.2)), fr = hash(x + 3, y) \u003c 0.07 ? 0.35 + 0.3 * hash(y, x) : 0;\n        (h = -0.45), (mt = 2), (ar = gq * 0.9 + fr), (ag = gq * 0.97 + fr), (ab = gq * 1.06 + fr);\n        if (e \u003c 0.8 * sm(5, 10, sx) * sm(f.ol + 10, f.ol, sx)) (mt = 3), (h = -0.6), (ar = 0.03), (ag = 0.07), (ab = 0.11);\n      }\n    }\n    const k = o + i;\n    (HT[k] = h), (AL[k * 3] = ar * 255), (AL[k * 3 + 1] = ag * 255), (AL[k * 3 + 2] = ab * 255), (MT[k] = mt), (S.MK[k] = S.GN[k] = 0);\n  }\n}\n\n// A paw print or runner groove in the snow; young ice takes none.\nfunction stamp(S, x, y, depth, bit) {\n  const i = floor(x + 0.5) + XO, yy = floor(y + 0.5), k = rw(yy) + i, A = S.AL;\n  if (i \u003c 0 || i >= RX || S.MK[k] & bit || S.MT[k] > 1) return;\n  S.MK[k] |= bit;\n  (S.HT[k] -= depth), (A[k * 3] *= 0.93), (A[k * 3 + 1] *= 0.95);\n  // Light it again.\n  for (let j = -2; j \u003c 3; j++) for (let q = max(0, i - 2); q \u003c min(RX, i + 3); q++) S.GN[rw(yy + j) + q] = 0;\n}\n\n// The point s LEDs back along the lead dog's path.\nconst PP = new Float64Array(2);\nfunction pathAt(S, s) {\n  const f = S.acc, last = (S.np - 1) & (PL - 1);\n  if (s \u003c= f) return (PP[0] = mix(S.lx, S.PX[last], s / max(f, 1e-6))), (PP[1] = mix(S.ly, S.PY[last], s / max(f, 1e-6)));\n  const k = (s - f) * 2, i = floor(k), r = k - i, a = (S.np - 1 - i) & (PL - 1), b = (S.np - 2 - i) & (PL - 1);\n  (PP[0] = mix(S.PX[a], S.PX[b], r)), (PP[1] = mix(S.PY[a], S.PY[b], r));\n}\n// Dogs in pairs on the path, the sled behind.\nfunction layout(S) {\n  // Long teams close up to fit the panel.\n  const n = S.nd, odd = n & 1, pt = (S.pt = min(PITCH, 76 / (((n + 1) >> 1) - 1))), sf = (((n + 1) >> 1) - 1) * pt + 8 * Z;\n  for (let i = 0; i \u003c n; i++) {\n    const side = odd && !i ? 0 : (odd ? i - 1 : i) & 1 ? 1 : -1, s = ((i + odd) >> 1) * pt + 0.6 * (S.DO[i] - 0.5) + (side > 0 ? 3.5 * Z : 0);\n    pathAt(S, s - 1);\n    const ax = PP[0], ay = PP[1];\n    pathAt(S, s + 1);\n    const fx = ax - PP[0], fy = ay - PP[1], l = sqrt(fx * fx + fy * fy) || 1;\n    pathAt(S, s);\n    (S.DX[i] = PP[0] - (fy / l) * side * LAT), (S.DY[i] = PP[1] + (fx / l) * side * LAT), (S.DF[i] = atan2(fx / l, -fy / l));\n  }\n  pathAt(S, sf), (S.sfx = PP[0]), (S.sfy = PP[1]);\n  pathAt(S, sf + SLED), (S.sbx = PP[0]), (S.sby = PP[1]);\n  (S.ux = (S.sfx - S.sbx) / SLED), (S.uy = (S.sfy - S.sby) / SLED);\n}\n\nfunction step(S, d, k4) {\n  S.t += d;\n  if (S.rest && (S.restT += d) > 10) S.rest = 0;\n  S.v += ((S.rest ? 0 : S.vt) - S.v) * min(1, d * (S.rest ? 1.6 : 0.9));\n  const v = S.v, rate = 0.065 * v * d;\n  // The lead dog aims 22 LEDs up the trail, or swings on a call.\n  let des = S.turnT > 0 ? ((S.turnT -= d), S.turn * 1.15) : cl(atan2(trailX(S, S.ly - 22) - S.lx, 22), -0.5, 0.5);\n  if (abs(S.lx) > 44) des = S.lx > 0 ? -0.6 : 0.6;\n  S.th += cl(des - S.th, -rate, rate);\n  const dist = v * d, fx = sin(S.th), fy = -cos(S.th), oph = S.ph;\n  (S.lx += fx * dist), (S.ly += fy * dist), (S.acc += dist), (S.ph += dist / STRIDE);\n  for (; S.acc >= 0.5; S.np++) (S.acc -= 0.5), (S.PX[S.np & (PL - 1)] = S.lx - fx * S.acc), (S.PY[S.np & (PL - 1)] = S.ly - fy * S.acc);\n  layout(S);\n  // Each foot leaves a print and each stride a breath; the runners cut grooves.\n  for (let i = 0; i \u003c S.nd; i++) {\n    const a = sin(S.DF[i]), b = -cos(S.DF[i]), o = S.DO[i];\n    for (let l = 0; l \u003c 4; l++) {\n      const fa = (LJ[l] + 1.5) * Z, fb = l & 1 ? Z : -Z;\n      if (floor(S.ph + o + LO[l]) > floor(oph + o + LO[l])) stamp(S, S.DX[i] + a * fa - b * fb, S.DY[i] + b * fa + a * fb, 0.22, 1);\n    }\n    if (floor(S.ph + o * 3) > floor(oph + o * 3)) {\n      const p = S.bi++ & 255;\n      (S.BX[p] = S.DX[i] + a * 4.6 * Z), (S.BY[p] = S.DY[i] + b * 4.6 * Z), (S.BA[p] = 0.01);\n    }\n  }\n  const ux = S.ux, uy = S.uy;\n  for (let e = -1; e \u003c= dist - 0.5; e += 0.5) for (let r = -2 * Z; r \u003c 3 * Z; r += 4 * Z) stamp(S, S.sbx - uy * r + ux * e, S.sby + ux * r + uy * e, 0.3, 2);\n  // The camera keeps the musher at row 118.\n  S.cx += ((S.lx + S.sbx) / 2 - 32 + (S.k1 \u003c 0.6 ? 6 : -6) - S.cx) * min(1, d * 1.5);\n  S.cy = S.sby - 118;\n  while (S.gy > S.cy - 40) genRow(S, --S.gy);\n  while (S.cpY[S.cpY.length - 1] > S.ly - 420) plan(S);\n  while (S.cpY.length > 4 && S.cpY[2] > S.ly + 300) S.cpY.shift(), S.cpX.shift();\n  S.feat = S.feat.filter((f) => f.y0 \u003c S.gy);\n  for (let p = 0, wv = (4 + 60 * k4) * d; p \u003c 256; p++) if (S.BA[p] \u003c 1.5) (S.BA[p] += d), (S.BX[p] += GX * wv), (S.BY[p] += GY * wv);\n  S.wind += (8 + 90 * k4) * d;\n}\n\n// Each leg from the side, joint to knee to foot; the hind pair lands first.\nconst LO = [0.5, 0.58, 0, 0.08], LJ = [1.1, 1.1, -1.9, -1.9], LG = new Float64Array(24);\nfunction legs(ph, run, bob) {\n  for (let l = 0; l \u003c 4; l++) {\n    const p = (((ph + LO[l]) % 1) + 1) % 1, R = 1.8 * run, ja = LJ[l], jh = 2.2 + bob, u = (p - 0.42) / 0.58;\n    const fa = ja + (p \u003c 0.42 ? R * (1 - p / 0.21) : -R + 2 * R * u * u * (3 - 2 * u)), fh = p \u003c 0.42 ? 0 : 0.9 * run * sin(PI * u);\n    const dx = fa - ja, dy = fh - jh, dd = sqrt(dx * dx + dy * dy), k = sqrt(max(0, 1.69 - (dd * dd) / 4)) / max(dd, 0.01), o = l * 6;\n    (LG[o] = ja), (LG[o + 1] = jh), (LG[o + 2] = (ja + fa) / 2 + dy * k), (LG[o + 3] = (jh + fh) / 2 - dx * k), (LG[o + 4] = fa), (LG[o + 5] = fh);\n  }\n}\n// Distance to a capsule; OO keeps the offset for shading.\nconst OO = new Float64Array(2);\nfunction cap(a, b, a0, b0, a1, b1, r) {\n  const pa = a - a0, pb = b - b0, ba = a1 - a0, bb = b1 - b0, t = cl((pa * ba + pb * bb) / (ba * ba + bb * bb + 1e-9), 0, 1), oa = pa - ba * t, ob = pb - bb * t;\n  (OO[0] = oa), (OO[1] = ob);\n  return sqrt(oa * oa + ob * ob) - r;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], k1 = cl(k[0], 0, 1), b = input.btnPressed || [];\n  (S.vt = 10 * cl(k[1], 0.2, 3)), (S.nd = cl(Math.round(k[2]), 8, 14)), (S.k4 = cl(k[3], 0, 1));\n  if (k1 !== S.k1) {\n    // New light: all ice is lit again.\n    let i = 0;\n    while (i \u003c KL.length - 2 && k1 > KL[i + 1][0]) i++;\n    for (let j = 1; j \u003c 9; j++) S.L[j] = mix(KL[i][j], KL[i + 1][j], sm(KL[i][0], KL[i + 1][0], k1));\n    (S.k1 = k1), S.gen++;\n  }\n  for (; !S.live; S.live = S.t > 6 ? 1 : 0) step(S, 1 / 30, S.k4);\n  if (b[0]) (S.turn = S.lx > 0 ? -1 : 1), (S.turnT = 1.6);\n  if (b[1]) (S.rest = 1 - S.rest), (S.restT = 0);\n  step(S, cl(dt || 0, 0, 0.1), S.k4);\n}\n\n// Per frame: the frame, the shadow mask, the light and the LED paint works on.\nlet F, SM, LC, LL, Lx, Ly, cE, sE, PO, La, Lb;\nfunction put(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  (F[o] += (r - F[o]) * a), (F[o + 1] += (g - F[o + 1]) * a), (F[o + 2] += (b - F[o + 2]) * a);\n}\n// Lay a part (distance d, radius r, 0 if flat) of colour c on LED PO.\nfunction paint(d, r, c, f) {\n  const q = cl(0.5 - d * Z, 0, 1) * f, nz = r ? sqrt(max(0, 1 - (OO[0] * OO[0] + OO[1] * OO[1]) / (r * r))) : 1, df = r ? max(0, ((OO[0] * La + OO[1] * Lb) / r) * cE + nz * sE) : sE;\n  if (q > 0) for (let k = 0; k \u003c 3; k++) F[PO + k] += (c[k] * (LL[k + 1] * min(2, df / sE) + LL[k + 4] * (0.55 + 0.45 * nz)) - F[PO + k]) * q;\n}\n// Nearest capsule of side view P; bob lifts the body.\nfunction side(P, a, h, bob) {\n  let d = 99;\n  for (let j = 0; j \u003c P.length; j += 5) d = min(d, cap(a, h, P[j], P[j + 1] + bob, P[j + 2], P[j + 3] + bob, P[j + 4]));\n  return d;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  (F = S.F), (SM = S.SM), (LC = S.LC), (LL = S.L);\n  const { HL, HT, AL, MT, AM, DI, L, TM, LI, SQ, GN, cx, cy, t, k4, gen, nd: n } = S, run = (S.run = cl(S.v / 6, 0, 1));\n  // Sun in the upper left, moon in the upper right.\n  const night = S.k1 > 0.6, lx = (Lx = night ? 0.85 : -0.8), ly = (Ly = night ? -0.53 : -0.6), te = L[7], aur = L[8];\n  (cE = 1 / sqrt(1 + te * te)), (sE = te * cE);\n  const dON = L[1] + L[2] + L[3] > 3, Kx = -lx / te, Ky = -ly / te, ox = floor(cx), oy = floor(cy), fx = cx - ox, fy = cy - oy;\n  let hmax = -9, hmin = 9;\n  for (let j = 0, q = 0; j \u003c HH; j++)\n    for (let i = 0, ro = rw(oy - MY + j); i \u003c HW; i++, q++) {\n      const h = (HL[q] = HT[ro + cl(ox - MX + i + XO, 0, RX - 1)]);\n      (hmax = max(hmax, h)), (hmin = min(hmin, h));\n    }\n  const ms = min(46, floor((hmax - hmin) / te) + 1);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0, ro = rw(oy + ty); tx \u003c TW; tx++) {\n      const wi = ro + cl(ox + tx + XO, 0, RX - 1);\n      // Ice keeps its light until the light or the ice changes.\n      if (GN[wi] !== gen) {\n        const k = (ty + MY) * HW + tx + MX, h = HL[k], gx = (HL[k + 1] - HL[k - 1]) * 0.7, gy = (HL[k + HW] - HL[k - HW]) * 0.7;\n        const inv = 1 / sqrt(gx * gx + gy * gy + 1), dif = (-gx * lx * cE - gy * ly * cE + sE) * inv;\n        let lt = 0;\n        if (dif > 0 && dON) {\n          let px = tx + MX + 0.5, py = ty + MY + 0.5, rh = h, oc = -1;\n          for (let s = 0; s \u003c ms && rh \u003c= hmax; s++) (px += lx), (py += ly), (rh += te), (oc = max(oc, HL[(py | 0) * HW + (px | 0)] - rh));\n          lt = min(2.2, dif / sE) * (1 - sm(-0.15, 0.3, oc));\n        }\n        // Slopes facing the light's side of the sky catch more sky.\n        const cav = cl(((HL[k - 1] + HL[k + 1] + HL[k - HW] + HL[k + HW]) * 0.25 - h) * 0.6, -0.15, 0.3), nh = cl((-gx * lx - gy * ly) * inv * 2.5, -0.6, 0.6);\n        (LI[wi] = lt), (SQ[wi] = (0.6 + 0.4 * inv) * (1 - cav) * (1 + 0.5 * nh)), (GN[wi] = gen);\n      }\n      // Aurora light; young ice and water mirror the sky.\n      const sk = SQ[wi], mt = MT[wi], o = (ty * TW + tx) * 3, lit = LI[wi] * (mt === 3 ? 0.1 : 1);\n      const eg = aur > 0 ? aur * 100 * (0.5 + 0.5 * sin((ox + tx) * 0.05 + (oy + ty) * 0.013 + 1.4 * sin((oy + ty) * 0.021 - t * 0.2) + t * 0.3)) ** 8 : 0;\n      const rf = mt > 1 ? 0.3 : 0;\n      for (let c = 0; c \u003c 3; c++) (AM[o + c] = (AL[wi * 3 + c] / 255) * (L[4 + c] * sk + eg * (c === 1 ? 1 : 0.15)) + rf * L[4 + c]), (DI[o + c] = (AL[wi * 3 + c] / 255) * L[1 + c] * lit);\n    }\n\n  // Shadows: each side view thrown along the snow.\n  SM.fill(0);\n  const ux = S.ux, uy = S.uy;\n  for (let i = 0; i \u003c n && dON; i++) {\n    const a = S.DF[i], ph = S.ph + S.DO[i], bob = 0.22 * run * sin(2 * PI * ph);\n    legs(ph, run, bob);\n    shadowOf(S.DX[i] - cx + fx, S.DY[i] - cy + fy, sin(a), -cos(a), Kx, Ky, 4.6, 5.6, DOG, bob, 1);\n  }\n  if (dON) shadowOf(S.sbx - cx + fx, S.sby - cy + fy, ux, uy, Kx, Ky, 16, 11, SLD, 0, 0);\n  // Snow between grid points, shadows taken out.\n  for (let i = 0, o = 0; i \u003c TW * TH; i++) for (let c = 0, s = 1 - 0.55 * SM[i]; c \u003c 3; c++, o++) AM[o] += DI[o] * s;\n  const w00 = (1 - fx) * (1 - fy), w10 = fx * (1 - fy), w01 = (1 - fx) * fy, w11 = fx * fy;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, q = y * TW * 3; x \u003c W; x++) for (let c = 0; c \u003c 3; c++, p++, q++) F[p] = w00 * AM[q] + w10 * AM[q + 3] + w01 * AM[q + TW * 3] + w11 * AM[q + TW * 3 + 3];\n\n  // Spindrift, under the dogs.\n  for (let c = 0; c \u003c 3; c++) LC[c] = L[4 + c] * 0.8 + L[1 + c] * 0.9;\n  if (k4 > 0.01) {\n    const th = 0.68 - 0.36 * k4, hz = 0.24 * k4 * k4;\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const wx = x + cx, wy = y + cy, al = wx * GX + wy * GY - S.wind, ac = -wx * GY + wy * GX, n1 = 0.62 * vn(al * 0.055, ac * 0.325);\n        if (n1 + 0.38 \u003c th && hz \u003c 0.004) continue;\n        const q = sm(th, th + 0.25, n1 + 0.38 * vn(al * 0.125 + 17, ac * 0.65 + 5)) * (0.4 + 0.6 * k4) * 0.9 + hz, p = i * 3;\n        for (let c = 0; c \u003c 3; c++) F[p + c] += ((LC[c] + 25 + 7.5 * c) * 1.1 - F[p + c]) * q;\n      }\n  }\n  // The team, then breath.\n  gangline(S);\n  for (let i = 0; i \u003c n; i++) dog(S, i);\n  sled(S.sbx - cx, S.sby - cy, ux, uy);\n  for (let p = 0; p \u003c 256; p++) {\n    const ag = S.BA[p], bx = S.BX[p] - cx, by = S.BY[p] - cy, r = 0.7 + ag * (1.2 + k4), al = 0.32 * (1 - ag / 1.5) * (1 - 0.5 * k4);\n    for (let y = floor(by - r); y \u003c= by + r && ag \u003c 1.5; y++)\n      for (let x = floor(bx - r); x \u003c= bx + r; x++) put(x, y, LC[0] * 1.15, LC[1] * 1.15, LC[2] * 1.15, al * (1 - ((x + 0.5 - bx) ** 2 + (y + 0.5 - by) ** 2) / (r * r)));\n  }\n  const tm = (v) => TM[min(1199, v | 0)];\n  for (let i = 0, p = 0; i \u003c N; i++, p += 3) display.setPixel(i & 63, i >> 6, tm(F[p]), tm(F[p + 1]), tm(F[p + 2]));\n}\n\n// A shadow: each grid point maps back to (a, h) in side view P.\nfunction shadowOf(x, y, Fx, Fy, Kx, Ky, A, Hh, P, bob, withLegs) {\n  const det = Fx * Ky - Fy * Kx, ax = abs(Fx) * A * Z, ay = abs(Fy) * A * Z, hx = Kx * Hh * Z, hy = Ky * Hh * Z;\n  for (let py = max(0, floor(y - ay + min(0, hy))); py \u003c= min(TH - 1, y + ay + max(0, hy)) && abs(det) > 0.05; py++)\n    for (let px = max(0, floor(x - ax + min(0, hx))); px \u003c= min(TW - 1, x + ax + max(0, hx)); px++) {\n      const rx = (px + 0.5 - x) / Z, ry = (py + 0.5 - y) / Z, a = (rx * Ky - ry * Kx) / det, h = (Fx * ry - Fy * rx) / det, i = py * TW + px;\n      if (h \u003c -0.6 || h > Hh || a \u003c -A || a > A) continue;\n      let d = side(P, a, h, bob);\n      for (let o = 0; o \u003c 24 && withLegs && h \u003c 3.2; o += 6) if (abs(a - LG[o + 2]) \u003c 2.2) d = min(d, cap(a, h, LG[o], LG[o + 1], LG[o + 2], LG[o + 3], 0.36), cap(a, h, LG[o + 2], LG[o + 3], LG[o + 4], LG[o + 5], 0.28));\n      SM[i] = max(SM[i], cl(0.6 - d * 1.4 * Z, 0, 1));\n    }\n}\n// The gangline, in soft dots from the lead dog to the sled.\nfunction gangline(S) {\n  for (let s = (S.nd & 1 ? 2.6 : -1) * Z; s \u003c (((S.nd + 1) >> 1) - 1) * S.pt + 8 * Z; s += 0.6) {\n    pathAt(S, s);\n    const x = PP[0] - S.cx - 0.5, y = PP[1] - S.cy - 0.5;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = floor(x) + (j & 1), Y = floor(y) + (j >> 1);\n      put(X, Y, LINE[0] * LC[0], LINE[1] * LC[1], LINE[2] * LC[2], 0.45 * (1 - abs(x - X)) * (1 - abs(y - Y)));\n    }\n  }\n}\n\n// A dog from above: legs, saddle, harness, neck, head, curled tail.\nfunction dog(S, i) {\n  const x = S.DX[i] - S.cx, y = S.DY[i] - S.cy, an = S.DF[i], Fx = sin(an), Fy = -cos(an), ph = S.ph + S.DO[i], [BK, SD, FC] = COAT[S.DC[i]], ext = sin(2 * PI * ph) * S.run, ts = i & 1 ? 1 : -1;\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  legs(ph, S.run, 0);\n  for (let py = max(0, floor(y - 5.4 * Z)); py \u003c= min(H - 1, y + 5.4 * Z); py++)\n    for (let px = max(0, floor(x - 5.4 * Z)); px \u003c= min(W - 1, x + 5.4 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx;\n      if (a * a + b * b > 30) continue;\n      PO = (py * W + px) * 3;\n      for (let l = 0; l \u003c 24; l += 6) paint(cap(a, b, LG[l], l % 12 ? 0.85 : -0.85, LG[l + 4], l % 12 ? 0.95 : -0.95, 0.38), 0.38, SD, 1);\n      const d = cap(a, b, -2.1 - 0.25 * ext, 0, 1.1 + 0.15 * ext, 0, 1.12), q = cl(0.5 - d * Z, 0, 1);\n      paint(d, 1.12, SD, 1);\n      if (q > 0) paint(d, 1.12, BK, sm(0.85, 0.35, abs(OO[1])) * q), abs(a - 0.7) \u003c 0.45 && paint(d, 1.12, HARN, q);\n      paint(cap(a, b, 1.4, 0, 2.7, 0, 0.55), 0.55, SD, 1);\n      paint(cap(a, b, 3, 0, 3.3, 0, 0.8), 0.8, FC, 1);\n      paint(cap(a, b, 3.5, 0, 4.4, 0, 0.42), 0.42, FC, 1);\n      paint(cap(a, b, -2.2, ts * 0.35, -2.2, ts * 0.35, 0.75), 0.75, FC, 1);\n    }\n}\n\n// The sled: runners, slats, load, handlebar, the musher.\nfunction sled(x, y, Fx, Fy) {\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  for (let py = max(0, floor(y - 17 * Z)); py \u003c= min(H - 1, y + 17 * Z); py++)\n    for (let px = max(0, floor(x - 17 * Z)); px \u003c= min(W - 1, x + 17 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx, ab = abs(b);\n      if (a \u003c -3 || a > 16 || ab > 3.2) continue;\n      PO = (py * W + px) * 3;\n      paint(cap(a, ab, -2.2, 2, 14.6, 2, 0.4), 0, DARK, 1);\n      paint(max(ab - 1.7, abs(a - 8.4) - 5.6), 0, a % 1.6 \u003c 1.1 ? WOOD : DARK, 1);\n      paint(max(ab - 1.3, abs(a - 8.7) - 3.2) - 0.25, 0, LOAD, 1);\n      paint(cap(a, b, 2.7, -2.3, 2.7, 2.3, 0.35), 0, DARK, 1);\n      paint(cap(a, b, 0.7, -1.4, 0.7, 1.4, 1), 1, RED, 1);\n      paint(cap(a, b, 1, 0, 1, 0, 1.1), 1.1, FUR, 1);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower."},{"name":"Dogs","min":8,"max":14,"about":"Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front."},{"name":"Wind","min":0,"max":1,"about":"Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice."}],"start":[0,2,8,0.06],"measures":{"motion":0.9731,"detail":0.0564,"edges":0.2725,"complexity":2.1928,"coverage":0.9989,"colour":0.1125,"drift":0.1372},"knobResponse":[0.4249,0.2371,0.2343,0.1374]},{"slug":"slinky","title":"Slinky","family":"toy","round":21,"note":"슬링키가 패널 높이만큼 지그재그로 꺾인 계단을 한 칸씩 뒤집히며 내려가요. 코일이 활처럼 휘어 아래 칸으로 쏟아지고, 내려앉은 칸마다 계단등이 켜져요.","idea":"A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","layer":{"id":"layer-slinky","type":"code","name":"slinky","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spring","min":0,"max":1,"about":"Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower."},{"name":"Rise","min":6,"max":12,"about":"How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down."},{"name":"Lamp","min":-1,"max":1,"about":"The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them."}],"start":[0,2,6,0.06],"measures":{"motion":0.1152,"detail":0.057,"edges":0.2572,"complexity":1.8838,"coverage":0.9943,"colour":0.1312,"drift":0.056},"knobResponse":[0.1557,0.043,0.0908,0.2999]},{"slug":"smalti","title":"Smalti","family":"glass","round":19,"note":"라벤나 갈라 플라키디아의 별 궁륭과 기도하는 사도를 어두운 줄눈의 유리와 금 테세라로 128줄에 짜요. 등불이 벽을 오르내리면 저마다 조금씩 기운 금 큐브가 빛의 각도를 만날 때마다 번쩍여요.","idea":"A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","layer":{"id":"layer-smalti","type":"code","name":"smalti","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven."},{"name":"Tesserae","min":2,"max":4,"about":"How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes."},{"name":"Gold","min":0,"max":1,"about":"At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1."}],"start":[0,2,2,0.06],"measures":{"motion":0.0438,"detail":0.2001,"edges":1,"complexity":2.3202,"coverage":0.4186,"colour":0.2372,"drift":0.1208},"knobResponse":[0.0652,0.0785,0.082,0.0729]},{"slug":"snow-monkeys","title":"Snow Monkeys","family":"mammal","round":25,"note":"눈 내리는 지고쿠다니의 해 질 녘, 일본원숭이들이 김 오르는 노천 온천에 어깨까지 잠겨 머리에 눈을 얹은 채 졸거나 서로 털을 골라 줘요. 바위 위의 어미가 물로 걸어 들어오고, 덩어리진 김은 눈 덮인 삼나무 비탈을 지나 패널 꼭대기까지 피어올라요. K1 을 끝까지 돌리면 밤이 되어 석등이 김을 주황으로 물들이고, K1 을 누르면 새끼가 물보라를 일으키며 뛰어들어요.","idea":"At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.","buttons":"K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.","code":"// ===== Patternflow pattern =====\n// Title:   Snow Monkeys\n// Family:  mammal\n// Idea:    At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Japanese macaques (Macaca fuscata) that bathe in the hot spring at Jigokudani, Nagano\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1\n//\n// Knob 1: Light. The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it.\n// Knob 2: Speed. At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower.\n// Knob 3: Monkeys. How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam.\n// Knob 4: Wind. Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it.\n// Buttons: K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.\n\nconst W = 64, H = 128, N = W * H, GW = 32, GH = 64;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The back edge of the pool, and how big a monkey stands at a depth row.\nconst PB = 67;\nconst scl = (y) => 0.74 + (y - PB) * 0.0135;\n// The stone lantern's fire box.\nconst [LX, LY] = [8.5, 50.5];\n// The light from evening to night: ambient, sky overhead, sky at the ridge,\n// lit steam, and the lantern's strength.\nconst LIGHT = [\n  [0, 0.5, 0.6, 0.86, 24, 44, 104, 70, 98, 160, 196, 212, 240, 0.25],\n  [0.5, 0.36, 0.4, 0.66, 16, 20, 62, 84, 66, 118, 150, 156, 196, 0.65],\n  [1, 0.2, 0.24, 0.42, 5, 8, 24, 18, 24, 54, 84, 92, 130, 1.1],\n];\nconst LC = [1, 0.62, 0.3];\nconst SNOW = [232, 238, 250], FUR = [218, 184, 150], FACE = [250, 96, 92], EAR = [214, 132, 124], HAND = [120, 84, 78], EYE = [40, 22, 20];\nconst ROCK = [70, 64, 62], NEEDLE = [24, 46, 36], TRUNK = [52, 38, 30], WATER = [34, 70, 74], STONE = [118, 114, 108];\n// Boulders as half ellipses standing on their water line: centre, radii,\n// depth row. The back rim, the boulder in the pool, the near rocks.\nconst ROCKS = [\n  [2, 68, 12, 8, 66], [17, 69, 8, 6, 66], [30, 69, 9, 5, 66], [45, 68, 11, 6, 66], [61, 68, 10, 9, 66],\n  [53, 92, 13, 12, 90],\n  [6, 132, 15, 14, 126], [28, 133, 12, 12, 127], [48, 132, 11, 13, 126], [64, 129, 10, 15, 125],\n];\n// Cedars on the slope, far to near: apex x and row, height, nearness.\nconst TREES = [];\nfor (let i = 0; i \u003c 10; i++) TREES.push([2 + i * 6.7 + 3 * hash(i, 1), 4 + 9 * hash(i, 2), 16 + 8 * hash(i, 3), 0.3]);\nfor (let i = 0; i \u003c 7; i++) TREES.push([i * 10.5 + 5 * hash(i, 4), 16 + 12 * hash(i, 5), 24 + 10 * hash(i, 6), 0.6]);\nTREES.push([3, 12, 52, 1], [61, 6, 56, 1]);\n// Places in the order the Monkeys knob fills them: x, depth row (the seat\n// row on the rim), how low it sits in the water (0 shoulders out, 1 chin in\n// it), and what it does (0 looks about, 1 dozes, 2 grooms the one before\n// it, 3 sits on the rim rocks).\nconst SLOTS = [\n  [24, 101, 0.15, 1], [34, 93, 0.1, 2], [11, 117, 0.6, 1], [30, 64.5, 0, 3], [52, 119, 0.25, 0], [8, 90, 0.2, 0],\n  [41, 63, 0, 3], [61, 110, 0.3, 0], [31, 79, 0.15, 0], [37, 118, 0.3, 1], [23, 121, 0.5, 1], [14, 77, 0.2, 1],\n  [5, 104, 0.2, 0], [46, 86, 0.1, 0],\n];\n// The boulder seats and the way down into the water, as x and bottom row.\nconst SEAT = [52, 81], EDGE = [46, 83.5], FOOT = [44, 93], SPOT = [47, 103], BSEAT = [60, 83], BLAND = [53, 102], BFOOT = [60, 94];\n\nfunction ramp(g, c) {\n  let j = 0;\n  while (j \u003c LIGHT.length - 2 && g > LIGHT[j + 1][0]) j++;\n  const a = LIGHT[j], b = LIGHT[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, f: F32(N * 3), bg: F32(N * 3), il: F32(N * 3), lm: F32(N), z: new Uint8Array(N), G: F32(GW * GH), key: -1,\n    puffs: [], drops: [], acc: 0, vent: 0.5, fx: 0, fy: 0, gust: 0, w: 0, k1: 0, n: 3, spl: null,\n    R: { st: 0, t: 0, dur: 3, lk: 0, lt: 0, lc: 1 }, B: { st: 0, t: 0, nj: 6.2, lk: 0, lt: 0, lc: 2 },\n  });\n  P.sd = 7;\n  P.mk = SLOTS.map(([x, y, sk, pose], i) => ({ x, y, sk, pose, s: pose > 2 ? 0.86 : scl(y), p: 0, sw: i * 0.3, hy: y - 8, lk: pose === 2 ? -0.8 : 0, lt: 0, lc: 1 + rnd() * 3, e: pose === 1 ? 1 : 0, bl: 2 + rnd() * 3, ph: rnd() * 7, i }));\n  P.flakes = Array.from({ length: 180 }, () => {\n    const z = rnd();\n    return { x: rnd() * W, y: rnd() * H, z, ph: rnd() * 7, land: 40 + z * 88 };\n  });\n  P.flakes.forEach((f) => (f.y = rnd() * f.land));\n  P.rg = Array.from({ length: W }, (_, x) => 8 + 5 * vn(x * 0.07, 1.3) - 0.06 * x);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) P.lm[y * W + x] = exp(-((x + 0.5 - LX) ** 2 + (y + 0.5 - LY) ** 2 * 0.8) / 1500);\n}\n\nfunction spawn(P, x, y, a, g = rnd) {\n  P.puffs.push({ x, y, a, r: 2.5 + 2.5 * g(), age: 0, life: 7 + 5 * g(), vy: -(6 + 5 * g()), ph: g() * 7 });\n}\n\n// The steam: puffs off the water, thick clumps from the spring's mouth, all\n// rising, growing and fading, swayed by the gusts and leaned by the wind.\nfunction steam(P, d) {\n  const w = P.w;\n  P.gust = 0.55 * sin(P.t * 0.31) + 0.3 * sin(P.t * 0.83 + 2);\n  for (P.acc += d * 1.8; P.acc > 1; P.acc--) spawn(P, 2 + rnd() * 60 - w * 22, 74 + rnd() * 44, 0.2 + 0.25 * rnd());\n  if ((P.vent -= d) \u003c 0) {\n    P.vent = 0.7 + rnd() * 1.1;\n    const vx = [9, 22, 36][floor(rnd() * 3)] + rnd() * 6 - 3 - w * 14, vy = 72 + rnd() * 16;\n    for (let n = 0; n \u003c 3; n++) spawn(P, vx + rnd() * 8 - 4, vy + rnd() * 6, 0.4 + 0.25 * rnd());\n  }\n  // Wet fur steams in the cold: a wisp off each monkey's head now and then,\n  // from a generator of its own so the rest of the steam keeps its course.\n  for (const m of P.mk)\n    if (m.p > 0.5 && (m.sw -= d) \u003c 0) {\n      const g = () => ((P.sd = (Math.imul(P.sd, 1103515245) + 12345) >>> 0) / 4294967296);\n      m.sw = 0.35 + g() * 0.6;\n      spawn(P, m.x + (g() - 0.5) * 6 * m.s, m.hy - 3 * m.s, 0.25 + 0.2 * g(), g);\n    }\n  const wx = w * 15 + P.gust * 7;\n  for (const q of P.puffs) {\n    q.age += d;\n    const up = sm(84, 20, q.y);\n    q.x += (wx * (0.3 + 0.7 * up) + 1.6 * sin(q.age * 1.3 + q.ph)) * d;\n    q.y += q.vy * (0.5 + 0.5 * sm(0, 2.5, q.age)) * d;\n    q.r += (0.9 + 0.8 * abs(w)) * d;\n  }\n  P.puffs = P.puffs.filter((q) => q.age \u003c q.life * (1 - 0.35 * abs(w)) && q.y + q.r > -4 && q.x > -30 && q.x \u003c 94);\n  P.fx -= wx * 0.2 * d;\n  P.fy += 1.8 * d;\n}\n\n// Where the mother is on her way between the boulder and the pool, u 0..1.\nfunction path(u) {\n  if (u \u003c 0.3) {\n    const q = sm(0, 0.3, u);\n    return [mix(SEAT[0], EDGE[0], q), mix(SEAT[1], EDGE[1], q), 999, 90];\n  }\n  if (u \u003c 0.55) {\n    const q = sm(0.3, 0.55, u);\n    return [mix(EDGE[0], FOOT[0], q), mix(EDGE[1], FOOT[1], q), 999, 90 + 3 * q];\n  }\n  const q = sm(0.55, 1, u), wl = mix(FOOT[1], SPOT[1], q);\n  return [mix(FOOT[0], SPOT[0], q), wl + 9.5 * q * scl(wl), wl, wl];\n}\n\nfunction look(m, d) {\n  if ((m.lc -= d) \u003c 0) (m.lc = 1.2 + rnd() * 3), (m.lt = floor(rnd() * 3) - 1);\n  m.lk += (m.lt - m.lk) * min(1, d * 5);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.k1 = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 3, 14));\n  P.w = cl(k[3], -1, 1);\n  if (!P.init) {\n    // Open on a pool already steaming.\n    for (let i = 0; i \u003c 120; i++) (P.t += 0.1), steam(P, 0.1);\n    P.t = 0;\n    for (const m of P.mk) m.p = m.i \u003c P.n ? 1 : 0;\n    P.init = true;\n  }\n  const T = (P.t += d);\n  steam(P, d);\n  for (const m of P.mk) {\n    m.p = cl(m.p + (m.i \u003c P.n ? d : -d) * 0.8, 0, 1);\n    if (m.pose % 3 === 0) {\n      look(m, d);\n      if ((m.bl -= d) \u003c 0) m.bl = 2 + rnd() * 4;\n      m.e = m.bl \u003c 0.15 ? 1 : 0;\n    }\n  }\n  // The mother sits on the boulder until she wades in to soak. Later she climbs out again.\n  const R = P.R;\n  if ((R.t += d) >= R.dur) {\n    R.st = (R.st + 1) % 4;\n    (R.t = 0), (R.dur = [16 + rnd() * 6, 3, 18 + rnd() * 6, 3.4][R.st]);\n  }\n  look(R, d);\n  // The baby on the boulder: a leap, a splash, a paddle back and a climb.\n  const B = P.B;\n  if (input.btnPressed && input.btnPressed[0] && B.st === 0) B.nj = 0;\n  if (B.st === 0 && (B.nj -= d) \u003c= 0) (B.st = 1), (B.t = 0);\n  if (B.st) B.t += d;\n  if (B.st === 1 && B.t >= 0.7) {\n    (B.st = 2), (B.t = 0), (P.spl = { x: BLAND[0], y: BLAND[1], t: 0 });\n    for (let n = 0; n \u003c 34; n++) {\n      const a = (rnd() - 0.5) * 2.4;\n      P.drops.push([BLAND[0] + a * 2, BLAND[1] - 1, a * 14 + (rnd() - 0.5) * 6, -12 - rnd() * 22, BLAND[1] + (rnd() - 0.3) * 6]);\n    }\n    for (let n = 0; n \u003c 4; n++) spawn(P, BLAND[0] + rnd() * 10 - 5, BLAND[1] - 4, 0.8);\n  }\n  if (B.st === 2 && B.t >= 4.2) (B.st = 3), (B.t = 0);\n  if (B.st === 3 && B.t >= 1.3) (B.st = 0), (B.t = 0), (B.nj = 24 + rnd() * 10);\n  look(B, d);\n  if (P.spl && (P.spl.t += d) > 2) P.spl = null;\n  P.drops = P.drops.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 70 * d);\n    return !(q[3] > 0 && q[1] > q[4]);\n  });\n  for (const f of P.flakes) {\n    f.y += (5 + 9 * f.z) * (1 + 0.6 * abs(P.w)) * d;\n    f.x += ((P.w * 18 + P.gust * 4) * (0.4 + 0.6 * f.z) + 0.9 * sin(T * 1.7 + f.ph)) * d;\n    if (f.y > f.land) (f.y = -2 - rnd() * 4), (f.x = rnd() * W);\n    f.x = ((f.x % W) + W) % W;\n  }\n}\n\n// The valley, the rocks, the lantern and the still water, kept until the light changes.\nfunction backdrop(P) {\n  P.key = round(P.k1 * 60);\n  const g = P.k1, A = [0, 1, 2].map((c) => ramp(g, c)), top = [3, 4, 5].map((c) => ramp(g, c)), low = [6, 7, 8].map((c) => ramp(g, c));\n  const lamp = ramp(g, 12), BG = P.bg, IL = P.il, Z = P.z;\n  P.steamC = [9, 10, 11].map((c) => ramp(g, c));\n  P.lamp = lamp;\n  P.low = low;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, lm = P.lm[i];\n      for (let c = 0; c \u003c 3; c++) IL[o + c] = A[c] + LC[c] * lamp * lm;\n      let col = null, k = 1, z = 0;\n      const rg = P.rg[x];\n      if (y >= rg) {\n        // Snow on the slope, darker where scrub and rock break through.\n        col = SNOW;\n        k = 0.3 + 0.16 * vn(x * 0.12, y * 0.07) + 0.12 * (y / 66);\n        if (vn(x * 0.45 + 3, y * 0.28) > 0.7) k *= 0.45;\n      }\n      for (const [tx, ty, th, f] of TREES) {\n        // Tiers of drooping branches, each loaded with snow along its top.\n        const dx = abs(x + 0.5 - tx), ts = 3.2 + 2.6 * f, yy = y - ty - dx * 0.5, kq = floor(yy / ts), wi = yy - kq * ts;\n        if (yy \u003c 0 || y > ty + th + 3) continue;\n        if (y > ty + th) {\n          if (dx \u003c 0.4 + f) (col = TRUNK), (k = 0.6);\n          continue;\n        }\n        if (dx >= 0.5 + (y - ty) * 0.34 * (0.68 + 0.32 * (wi / ts)) * (0.85 + 0.3 * hash(kq, tx | 0))) continue;\n        if (wi \u003c 1 + 0.6 * f && hash(x, y) > 0.12) (col = SNOW), (k = 0.4 + 0.32 * f - 0.1 * (dx / th));\n        else (col = NEEDLE), (k = wi > ts - 0.7 ? 0.5 : 0.9 + 0.2 * hash(x + 7, y));\n        if (f \u003c 1) k = mix(k, 0.34, (1 - f) * 0.45);\n      }\n      if (y >= PB) (col = WATER), (z = 1), (k = 0.5 + 0.6 * ((y - PB) / 54));\n      for (const [cx, cy, rx, ry, dz] of ROCKS) {\n        const nx = (x + 0.5 - cx) / rx, ny = (y + 0.5 - cy) / ry, dd = nx * nx + ny * ny;\n        if (dd > 1 || y + 0.5 > cy) continue;\n        z = dz;\n        const nz = sqrt(1 - dd);\n        if (ny \u003c -0.42 - 0.22 * nz + 0.25 * (vn(x * 0.6, cy) - 0.5)) (col = SNOW), (k = 0.5 + 0.28 * nz - 0.12 * ny);\n        else (col = ROCK), (k = (0.6 + 0.5 * nz - 0.3 * nx) * (0.75 + 0.4 * vn(x * 0.5, y * 0.5)));\n      }\n      Z[i] = z;\n      if (!col) {\n        const v = (y / rg) ** 1.5;\n        for (let c = 0; c \u003c 3; c++) BG[o + c] = mix(top[c], low[c], v);\n        continue;\n      }\n      for (let c = 0; c \u003c 3; c++) BG[o + c] = col[c] * k * IL[o + c] + (z === 1 ? low[c] * 0.12 : 0);\n    }\n  // The stone lantern: finial, snowed roof, fire box with its glowing window,\n  // pillar and foot, standing on the rim rock.\n  const ROWS = [[42, 0.6, 1], [44, 3.6, 0], [46, 5, 1], [48, 2.6, 2], [54, 3.6, 1], [55, 1.3, 1], [60, 2.8, 1], [62, 0, 1]];\n  for (let r = 0; r \u003c ROWS.length - 1; r++)\n    for (let y = ROWS[r][0]; y \u003c ROWS[r + 1][0]; y++)\n      for (let x = 0; x \u003c 18; x++) {\n        const dx = abs(x + 0.5 - LX), hw = ROWS[r][1] + (r === 2 ? y - 46 : 0) * 0.6, o = (y * W + x) * 3;\n        if (dx > hw) continue;\n        const kind = ROWS[r][2], win = kind === 2 && dx \u003c 1.6 && y > 48 && y \u003c 53;\n        for (let c = 0; c \u003c 3; c++)\n          BG[o + c] = win ? [255, 200, 120][c] * min(1, 0.72 + 0.3 * lamp) : (kind ? STONE[c] * (0.6 + 0.25 * (LX - x) / hw) : SNOW[c] * 0.75) * IL[o + c];\n      }\n}\n\nlet F, IL, Z, M;\n// An ellipse of fur or skin on the monkey being drawn, under its water line\n// and behind any rock nearer than it.\nfunction blob(cx, cy, rx, ry, col, sn, fur) {\n  for (let y = max(0, floor(cy - ry)), y1 = min(H - 1, cy + ry); y \u003c= y1 && y + 0.5 \u003c M.wl; y++) {\n    const ny = (y + 0.5 - cy) / ry;\n    for (let x = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx); x \u003c= x1; x++) {\n      const nx = (x + 0.5 - cx) / rx, dd = nx * nx + ny * ny, i = y * W + x;\n      if (dd > 1 || Z[i] > M.z) continue;\n      const nz = sqrt(1 - dd);\n      let k, c = col;\n      if (fur) {\n        k = (0.36 + 0.55 * nz - 0.25 * ny - 0.12 * nx) * (0.84 + 0.3 * hash(x - M.x0, y - M.y0));\n        if (sn && ny \u003c sn * 0.5 - 1.05 + 0.25 * hash(x - M.x0, 9)) (c = SNOW), (k = 0.75 + 0.25 * nz);\n        else k *= 0.6 + 0.4 * sm(0.3, 2.2, M.wl - y - 0.5);\n      } else k = 0.72 + 0.3 * nz - 0.15 * ny;\n      paint(i, c, k);\n    }\n  }\n}\nfunction paint(i, c, k) {\n  const o = i * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k * (IL[o + n] * 0.6 + 0.4);\n}\nfunction dot(x, y, c, k) {\n  (x = floor(x)), (y = floor(y));\n  if (x >= 0 && x \u003c W && y >= 0 && y + 0.5 \u003c M.wl && Z[y * W + x] \u003c= M.z) paint(y * W + x, c, k);\n}\n// A limb of fur from a to b.\nfunction rod(ax, ay, bx, by, r, col) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = max(0, floor(min(ay, by) - r)); y \u003c= min(H - 1, max(ay, by) + r) && y + 0.5 \u003c M.wl; y++)\n    for (let x = max(0, floor(min(ax, bx) - r)); x \u003c= min(W - 1, max(ax, bx) + r); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t;\n      if (ex * ex + ey * ey > r * r || Z[y * W + x] > M.z) continue;\n      paint(y * W + x, col, (0.75 - 0.2 * (ey / r)) * (0.84 + 0.3 * hash(x, y)));\n    }\n}\n\n// One macaque: x, bottom row, scale, water line, depth, the turn of its head\n// (-1..1), how far it bows, eyes shut, snow on its head, sat on a rock.\nfunction monkey(x, yb, s, wl, z, lk, bow, shut, sn, sat) {\n  M = { wl, z, x0: floor(x), y0: floor(yb) };\n  blob(x, yb - 6.6 * s, 6.8 * s, 6.6 * s, FUR, sat ? 0.3 : 0, 1);\n  if (sat) {\n    for (const sd of [-1, 1]) {\n      blob(x + sd * 3.4 * s, yb - 2.6 * s, 2.7 * s, 2.3 * s, FUR, 0, 1);\n      blob(x + sd * 4.2 * s, yb - 0.6 * s, 1.5 * s, 0.9 * s, HAND, 0, 0);\n    }\n    for (const sd of [-1, 1]) rod(x + sd * 5 * s, yb - 10 * s, x + sd * 1.4 * s, yb - 4.8 * s, 1.4 * s, FUR);\n    blob(x, yb - 4.7 * s, 2 * s, 1 * s, HAND, 0, 0);\n  }\n  const R = 4.4 * s, hx = x + lk * 0.5 * s, hy = yb - (15.2 - bow) * s;\n  for (const sd of [-1, 1]) blob(hx + sd * R * (1 - 0.2 * lk * sd), hy - 0.3 * s, 1.1 * s + 0.2, 1.3 * s + 0.2, EAR, 0, 0);\n  blob(hx, hy, R * 1.05, R * 0.97, FUR, sn, 1);\n  const fx = hx + lk * 1.4 * s, fy = hy + (0.9 + bow * 0.25) * s;\n  blob(fx, fy, 2.2 * s * (1 - 0.2 * abs(lk)), 2.6 * s, FACE, 0, 0);\n  for (const sd of [-1, 1]) dot(fx + sd * 0.95 * s, fy - 0.6 * s, shut > 0.5 ? FACE : EYE, shut > 0.5 ? 0.45 : 1);\n  dot(fx, fy + 1.2 * s, FACE, 0.5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  if (P.key !== round(P.k1 * 60)) backdrop(P);\n  (F = P.f), (IL = P.il), (Z = P.z);\n  F.set(P.bg);\n  const T = P.t, lamp = P.lamp, BG = P.bg;\n  // The water: a slow shiver over it and the lantern's broken reflection.\n  for (let y = PB; y \u003c H; y++) {\n    const sx = 0.7 * sin(y * 0.5 + T * 1.3), rx = LX + 1.4 * sin(y * 0.9 + T * 3), rk = lamp * 140 * sm(104, 70, y);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (Z[i] !== 1) continue;\n      const r = vn(x * 0.3 + sx, y * 0.9 - T * 0.8), o = i * 3, dx = x + 0.5 - rx, ref = dx * dx \u003c 30 && rk ? rk * r * exp((-dx * dx) / 5) : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = BG[o + c] * (0.75 + 0.55 * r) + ref * LC[c];\n    }\n  }\n  // Who is where, back to front.\n  const L = [];\n  for (const m of P.mk) {\n    if (m.p \u003c= 0) continue;\n    if (m.pose > 2) {\n      // On the rim it slides down behind its rock as it goes.\n      const yb = m.y + 20 * (1 - m.p) * m.s;\n      m.hy = yb - 15.2 * m.s;\n      L.push([65, () => monkey(m.x, yb, m.s, 999, 65, m.lk, 0, m.e, 0.6, 1)]);\n      continue;\n    }\n    const wl = m.y + 0.35 * sin(T * 0.7 + m.ph), sk = m.sk + (m.pose === 1 ? 0.08 * sin(T * 0.5 + m.ph) : 0);\n    const yb = wl + (9.5 + 3.4 * sk + 20 * (1 - m.p)) * m.s;\n    m.hy = yb - (15.2 - (m.pose ? 1 : 0)) * m.s;\n    L.push([m.y, () => monkey(m.x, yb, m.s, wl, m.y, m.lk, m.pose ? 1 : 0, m.e, m.pose === 1 ? 1 : 0.55, 0), m]);\n  }\n  const R = P.R, u = R.st === 0 ? 0 : R.st === 2 ? 1 : R.st === 1 ? R.t / 3 : 1 - R.t / 3.4;\n  const [rx, ryb, rwl, rz] = path(u), rs = scl(rz);\n  L.push([rz, () => monkey(rx, ryb, rs, rwl, rz, R.lk, 0, R.st === 2 ? 1 : 0, 0.7, rwl > 900), rwl \u003c 900 && { x: rx, s: rs, p: 1, pose: 0, ph: 0 }]);\n  const B = P.B, bs = 0.64;\n  let bx, byb, bwl = 999, bz = 90;\n  if (B.st === 0) [bx, byb] = BSEAT;\n  else if (B.st === 1) {\n    const q = B.t / 0.7;\n    (bx = mix(BSEAT[0], BLAND[0], q)), (byb = mix(BSEAT[1], BLAND[1], q) - 14 * sin(PI * q)), (bz = mix(90, BLAND[1], q));\n  } else if (B.st === 2) {\n    const q = sm(0.8, 4.2, B.t);\n    (bwl = mix(BLAND[1], BFOOT[1], q)), (bx = mix(BLAND[0], BFOOT[0], q)), (bz = bwl);\n    byb = bwl + (12.5 + 14 * (1 - sm(0.15, 0.6, B.t))) * bs * scl(bwl);\n  } else {\n    const q = sm(0, 1.3, B.t);\n    (bx = mix(BFOOT[0], BSEAT[0], q)), (byb = mix(BFOOT[1], BSEAT[1], q)), (bz = mix(94, 90, q));\n  }\n  L.push([bz, () => monkey(bx, byb, bs * scl(bz), bwl, bz, B.lk, 0, 0, 0.4, B.st !== 2), B.st === 2 && { x: bx, s: 0.6, p: 1, pose: 0, ph: 3 }]);\n  L.sort((a, b) => a[0] - b[0]);\n  // Rings on the water round everyone in it.\n  for (const [z, , m] of L) {\n    if (!m) continue;\n    const s = m.s * m.p;\n    for (let n = 0; n \u003c 3; n++) {\n      const r = 6.5 * s + ((T * (m.pose === 1 ? 1.6 : 3) + n * 4.4 + m.ph) % 13), a = (1 - (r - 6.5 * s) / 13) * 0.8 * m.p;\n      for (let y = floor(z - r * 0.3 - 1); y \u003c= z + r * 0.3 + 1; y++)\n        for (let x = max(0, floor(m.x - r - 1)); x \u003c= min(W - 1, m.x + r + 1); x++) {\n          const i = y * W + x;\n          if (y >= H || Z[i] !== 1) continue;\n          const e = sqrt(((x + 0.5 - m.x) / r) ** 2 + ((y + 0.5 - z) / (r * 0.3)) ** 2);\n          if (abs(e - 1) * r \u003c 0.7) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += (P.low[c] * 0.6 + 60 * IL[i * 3 + c]) * a;\n        }\n    }\n  }\n  for (const [, fn, m] of L) {\n    fn();\n    // The groomer's hands in the fur of the one in front of it.\n    if (m && m.i === 0 && P.mk[1].p > 0.5) {\n      const g = P.mk[1], gs = g.s, hx = m.x + 2 * m.s, hy = m.hy - 3 * m.s;\n      M = { wl: g.y, z: m.y + 1, x0: 0, y0: 0 };\n      rod(g.x - 4.8 * gs, g.y - 1.5 * gs, hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.3 * gs, FUR);\n      rod(g.x - 2 * gs, g.y - 1.5 * gs, hx + 4 * m.s, hy + 5 * m.s + sin(T * 2.3), 1.3 * gs, FUR);\n      M.wl = 999;\n      blob(hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.2 * gs, 1 * gs, HAND, 0, 0);\n    }\n  }\n  // The splash: a plume, foam spreading and fading, a ring running out, and\n  // the drops falling back.\n  M = { wl: 999, z: 200, x0: 0, y0: 0 };\n  if (P.spl) {\n    const q = P.spl.t, { x: sx, y: sy } = P.spl, h = 7 * (1 - sm(0, 0.45, q));\n    if (h > 0.5) blob(sx, sy - h, 1.6 + 2 * q, h + 0.5, SNOW, 0, 0);\n    for (let y = floor(sy - 3), rx = 3 + 6 * q, ry = 1.4 + 1.2 * q; y \u003c= sy + 3 && q \u003c 1.4; y++)\n      for (let x = max(0, floor(sx - rx)); x \u003c= min(W - 1, sx + rx); x++) {\n        const e = 1 - ((x + 0.5 - sx) / rx) ** 2 - ((y + 0.5 - sy) / ry) ** 2, o = (y * W + x) * 3;\n        if (e > 0) for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * IL[o + c] * 1.2 - F[o + c]) * min(1, e * 3) * (1 - q / 1.4);\n      }\n    const r = 4 + 20 * q;\n    for (let x = 0; x \u003c W; x++)\n      for (const sd of [-1, 1]) {\n        const dx = (x + 0.5 - P.spl.x) / r, y = floor(P.spl.y + sd * r * 0.3 * sqrt(max(0, 1 - dx * dx)));\n        if (abs(dx) \u003c 1 && y \u003c H && Z[y * W + x] === 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] += 120 * (1 - q / 2) * IL[(y * W + x) * 3 + c];\n      }\n  }\n  for (const [x, y] of P.drops) dot(x, y, SNOW, 1);\n  // The steam over everything, lit by the sky and the lantern.\n  const G = P.G, SC = P.steamC;\n  G.fill(0);\n  for (const q of P.puffs) {\n    const a = q.a * sm(0, 0.9, q.age) * (1 - sm(q.life * 0.5, q.life, q.age)), gx = q.x / 2, gy = q.y / 2, rr = q.r * 0.75;\n    for (let j = max(0, floor(gy - rr * 1.3)); j \u003c= min(GH - 1, gy + rr * 1.3); j++)\n      for (let i = max(0, floor(gx - rr)); i \u003c= min(GW - 1, gx + rr); i++) {\n        const e = 1 - (i + 0.5 - gx) ** 2 / (rr * rr) - (j + 0.5 - gy) ** 2 / (rr * rr * 1.6);\n        if (e > 0) G[j * GW + i] += a * e * e;\n      }\n  }\n  // A low mist on the water, and the steam torn into wisps.\n  for (let j = 0, c = 0; j \u003c GH; j++)\n    for (let i = 0, mist = 0.2 * sm(PB - 8, PB + 14, j * 2 + 1); i \u003c GW; i++, c++)\n      if ((G[c] += mist) > 0.01) G[c] *= 0.2 + 0.85 * vn(i * 0.24 + P.fx, j * 0.17 + P.fy) + 0.45 * vn(i * 0.62 - P.fx, j * 0.44 + P.fy * 2);\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 2 - 0.25, j0 = cl(floor(v), 0, GH - 1), j1 = min(GH - 1, j0 + 1), fv = cl(v - j0, 0, 1), ay = 0.4 + 0.45 * sm(108, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const u2 = x / 2 - 0.25, i0 = cl(floor(u2), 0, GW - 1), i1 = min(GW - 1, i0 + 1), fu = cl(u2 - i0, 0, 1);\n      const D = mix(mix(G[j0 * GW + i0], G[j0 * GW + i1], fu), mix(G[j1 * GW + i0], G[j1 * GW + i1], fu), fv);\n      if (D \u003c 0.05) continue;\n      const a = ay * sm(0.05, 1.3, D), i = y * W + x, o = i * 3, lm = P.lm[i] * lamp * 200;\n      for (let c = 0; c \u003c 3; c++) F[o + c] += (SC[c] + LC[c] * lm - F[o + c]) * a;\n    }\n  }\n  // Snow falling, thicker in the wind.\n  const nf = floor(110 + 70 * abs(P.w));\n  for (let n = 0; n \u003c nf; n++) {\n    const f = P.flakes[n], x = floor(f.x), y = floor(f.y);\n    if (y \u003c 0 || y >= H) continue;\n    const i = y * W + x, o = i * 3, b = 0.45 + 0.5 * f.z;\n    for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * (IL[o + c] * 0.6 + 0.4) - F[o + c]) * b;\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-snow-monkeys","type":"code","name":"snow-monkeys","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Snow Monkeys\n// Family:  mammal\n// Idea:    At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Japanese macaques (Macaca fuscata) that bathe in the hot spring at Jigokudani, Nagano\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1\n//\n// Knob 1: Light. The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it.\n// Knob 2: Speed. At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower.\n// Knob 3: Monkeys. How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam.\n// Knob 4: Wind. Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it.\n// Buttons: K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.\n\nconst W = 64, H = 128, N = W * H, GW = 32, GH = 64;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The back edge of the pool, and how big a monkey stands at a depth row.\nconst PB = 67;\nconst scl = (y) => 0.74 + (y - PB) * 0.0135;\n// The stone lantern's fire box.\nconst [LX, LY] = [8.5, 50.5];\n// The light from evening to night: ambient, sky overhead, sky at the ridge,\n// lit steam, and the lantern's strength.\nconst LIGHT = [\n  [0, 0.5, 0.6, 0.86, 24, 44, 104, 70, 98, 160, 196, 212, 240, 0.25],\n  [0.5, 0.36, 0.4, 0.66, 16, 20, 62, 84, 66, 118, 150, 156, 196, 0.65],\n  [1, 0.2, 0.24, 0.42, 5, 8, 24, 18, 24, 54, 84, 92, 130, 1.1],\n];\nconst LC = [1, 0.62, 0.3];\nconst SNOW = [232, 238, 250], FUR = [218, 184, 150], FACE = [250, 96, 92], EAR = [214, 132, 124], HAND = [120, 84, 78], EYE = [40, 22, 20];\nconst ROCK = [70, 64, 62], NEEDLE = [24, 46, 36], TRUNK = [52, 38, 30], WATER = [34, 70, 74], STONE = [118, 114, 108];\n// Boulders as half ellipses standing on their water line: centre, radii,\n// depth row. The back rim, the boulder in the pool, the near rocks.\nconst ROCKS = [\n  [2, 68, 12, 8, 66], [17, 69, 8, 6, 66], [30, 69, 9, 5, 66], [45, 68, 11, 6, 66], [61, 68, 10, 9, 66],\n  [53, 92, 13, 12, 90],\n  [6, 132, 15, 14, 126], [28, 133, 12, 12, 127], [48, 132, 11, 13, 126], [64, 129, 10, 15, 125],\n];\n// Cedars on the slope, far to near: apex x and row, height, nearness.\nconst TREES = [];\nfor (let i = 0; i \u003c 10; i++) TREES.push([2 + i * 6.7 + 3 * hash(i, 1), 4 + 9 * hash(i, 2), 16 + 8 * hash(i, 3), 0.3]);\nfor (let i = 0; i \u003c 7; i++) TREES.push([i * 10.5 + 5 * hash(i, 4), 16 + 12 * hash(i, 5), 24 + 10 * hash(i, 6), 0.6]);\nTREES.push([3, 12, 52, 1], [61, 6, 56, 1]);\n// Places in the order the Monkeys knob fills them: x, depth row (the seat\n// row on the rim), how low it sits in the water (0 shoulders out, 1 chin in\n// it), and what it does (0 looks about, 1 dozes, 2 grooms the one before\n// it, 3 sits on the rim rocks).\nconst SLOTS = [\n  [24, 101, 0.15, 1], [34, 93, 0.1, 2], [11, 117, 0.6, 1], [30, 64.5, 0, 3], [52, 119, 0.25, 0], [8, 90, 0.2, 0],\n  [41, 63, 0, 3], [61, 110, 0.3, 0], [31, 79, 0.15, 0], [37, 118, 0.3, 1], [23, 121, 0.5, 1], [14, 77, 0.2, 1],\n  [5, 104, 0.2, 0], [46, 86, 0.1, 0],\n];\n// The boulder seats and the way down into the water, as x and bottom row.\nconst SEAT = [52, 81], EDGE = [46, 83.5], FOOT = [44, 93], SPOT = [47, 103], BSEAT = [60, 83], BLAND = [53, 102], BFOOT = [60, 94];\n\nfunction ramp(g, c) {\n  let j = 0;\n  while (j \u003c LIGHT.length - 2 && g > LIGHT[j + 1][0]) j++;\n  const a = LIGHT[j], b = LIGHT[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, f: F32(N * 3), bg: F32(N * 3), il: F32(N * 3), lm: F32(N), z: new Uint8Array(N), G: F32(GW * GH), key: -1,\n    puffs: [], drops: [], acc: 0, vent: 0.5, fx: 0, fy: 0, gust: 0, w: 0, k1: 0, n: 3, spl: null,\n    R: { st: 0, t: 0, dur: 3, lk: 0, lt: 0, lc: 1 }, B: { st: 0, t: 0, nj: 6.2, lk: 0, lt: 0, lc: 2 },\n  });\n  P.sd = 7;\n  P.mk = SLOTS.map(([x, y, sk, pose], i) => ({ x, y, sk, pose, s: pose > 2 ? 0.86 : scl(y), p: 0, sw: i * 0.3, hy: y - 8, lk: pose === 2 ? -0.8 : 0, lt: 0, lc: 1 + rnd() * 3, e: pose === 1 ? 1 : 0, bl: 2 + rnd() * 3, ph: rnd() * 7, i }));\n  P.flakes = Array.from({ length: 180 }, () => {\n    const z = rnd();\n    return { x: rnd() * W, y: rnd() * H, z, ph: rnd() * 7, land: 40 + z * 88 };\n  });\n  P.flakes.forEach((f) => (f.y = rnd() * f.land));\n  P.rg = Array.from({ length: W }, (_, x) => 8 + 5 * vn(x * 0.07, 1.3) - 0.06 * x);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) P.lm[y * W + x] = exp(-((x + 0.5 - LX) ** 2 + (y + 0.5 - LY) ** 2 * 0.8) / 1500);\n}\n\nfunction spawn(P, x, y, a, g = rnd) {\n  P.puffs.push({ x, y, a, r: 2.5 + 2.5 * g(), age: 0, life: 7 + 5 * g(), vy: -(6 + 5 * g()), ph: g() * 7 });\n}\n\n// The steam: puffs off the water, thick clumps from the spring's mouth, all\n// rising, growing and fading, swayed by the gusts and leaned by the wind.\nfunction steam(P, d) {\n  const w = P.w;\n  P.gust = 0.55 * sin(P.t * 0.31) + 0.3 * sin(P.t * 0.83 + 2);\n  for (P.acc += d * 1.8; P.acc > 1; P.acc--) spawn(P, 2 + rnd() * 60 - w * 22, 74 + rnd() * 44, 0.2 + 0.25 * rnd());\n  if ((P.vent -= d) \u003c 0) {\n    P.vent = 0.7 + rnd() * 1.1;\n    const vx = [9, 22, 36][floor(rnd() * 3)] + rnd() * 6 - 3 - w * 14, vy = 72 + rnd() * 16;\n    for (let n = 0; n \u003c 3; n++) spawn(P, vx + rnd() * 8 - 4, vy + rnd() * 6, 0.4 + 0.25 * rnd());\n  }\n  // Wet fur steams in the cold: a wisp off each monkey's head now and then,\n  // from a generator of its own so the rest of the steam keeps its course.\n  for (const m of P.mk)\n    if (m.p > 0.5 && (m.sw -= d) \u003c 0) {\n      const g = () => ((P.sd = (Math.imul(P.sd, 1103515245) + 12345) >>> 0) / 4294967296);\n      m.sw = 0.35 + g() * 0.6;\n      spawn(P, m.x + (g() - 0.5) * 6 * m.s, m.hy - 3 * m.s, 0.25 + 0.2 * g(), g);\n    }\n  const wx = w * 15 + P.gust * 7;\n  for (const q of P.puffs) {\n    q.age += d;\n    const up = sm(84, 20, q.y);\n    q.x += (wx * (0.3 + 0.7 * up) + 1.6 * sin(q.age * 1.3 + q.ph)) * d;\n    q.y += q.vy * (0.5 + 0.5 * sm(0, 2.5, q.age)) * d;\n    q.r += (0.9 + 0.8 * abs(w)) * d;\n  }\n  P.puffs = P.puffs.filter((q) => q.age \u003c q.life * (1 - 0.35 * abs(w)) && q.y + q.r > -4 && q.x > -30 && q.x \u003c 94);\n  P.fx -= wx * 0.2 * d;\n  P.fy += 1.8 * d;\n}\n\n// Where the mother is on her way between the boulder and the pool, u 0..1.\nfunction path(u) {\n  if (u \u003c 0.3) {\n    const q = sm(0, 0.3, u);\n    return [mix(SEAT[0], EDGE[0], q), mix(SEAT[1], EDGE[1], q), 999, 90];\n  }\n  if (u \u003c 0.55) {\n    const q = sm(0.3, 0.55, u);\n    return [mix(EDGE[0], FOOT[0], q), mix(EDGE[1], FOOT[1], q), 999, 90 + 3 * q];\n  }\n  const q = sm(0.55, 1, u), wl = mix(FOOT[1], SPOT[1], q);\n  return [mix(FOOT[0], SPOT[0], q), wl + 9.5 * q * scl(wl), wl, wl];\n}\n\nfunction look(m, d) {\n  if ((m.lc -= d) \u003c 0) (m.lc = 1.2 + rnd() * 3), (m.lt = floor(rnd() * 3) - 1);\n  m.lk += (m.lt - m.lk) * min(1, d * 5);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.k1 = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 3, 14));\n  P.w = cl(k[3], -1, 1);\n  if (!P.init) {\n    // Open on a pool already steaming.\n    for (let i = 0; i \u003c 120; i++) (P.t += 0.1), steam(P, 0.1);\n    P.t = 0;\n    for (const m of P.mk) m.p = m.i \u003c P.n ? 1 : 0;\n    P.init = true;\n  }\n  const T = (P.t += d);\n  steam(P, d);\n  for (const m of P.mk) {\n    m.p = cl(m.p + (m.i \u003c P.n ? d : -d) * 0.8, 0, 1);\n    if (m.pose % 3 === 0) {\n      look(m, d);\n      if ((m.bl -= d) \u003c 0) m.bl = 2 + rnd() * 4;\n      m.e = m.bl \u003c 0.15 ? 1 : 0;\n    }\n  }\n  // The mother sits on the boulder until she wades in to soak. Later she climbs out again.\n  const R = P.R;\n  if ((R.t += d) >= R.dur) {\n    R.st = (R.st + 1) % 4;\n    (R.t = 0), (R.dur = [16 + rnd() * 6, 3, 18 + rnd() * 6, 3.4][R.st]);\n  }\n  look(R, d);\n  // The baby on the boulder: a leap, a splash, a paddle back and a climb.\n  const B = P.B;\n  if (input.btnPressed && input.btnPressed[0] && B.st === 0) B.nj = 0;\n  if (B.st === 0 && (B.nj -= d) \u003c= 0) (B.st = 1), (B.t = 0);\n  if (B.st) B.t += d;\n  if (B.st === 1 && B.t >= 0.7) {\n    (B.st = 2), (B.t = 0), (P.spl = { x: BLAND[0], y: BLAND[1], t: 0 });\n    for (let n = 0; n \u003c 34; n++) {\n      const a = (rnd() - 0.5) * 2.4;\n      P.drops.push([BLAND[0] + a * 2, BLAND[1] - 1, a * 14 + (rnd() - 0.5) * 6, -12 - rnd() * 22, BLAND[1] + (rnd() - 0.3) * 6]);\n    }\n    for (let n = 0; n \u003c 4; n++) spawn(P, BLAND[0] + rnd() * 10 - 5, BLAND[1] - 4, 0.8);\n  }\n  if (B.st === 2 && B.t >= 4.2) (B.st = 3), (B.t = 0);\n  if (B.st === 3 && B.t >= 1.3) (B.st = 0), (B.t = 0), (B.nj = 24 + rnd() * 10);\n  look(B, d);\n  if (P.spl && (P.spl.t += d) > 2) P.spl = null;\n  P.drops = P.drops.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 70 * d);\n    return !(q[3] > 0 && q[1] > q[4]);\n  });\n  for (const f of P.flakes) {\n    f.y += (5 + 9 * f.z) * (1 + 0.6 * abs(P.w)) * d;\n    f.x += ((P.w * 18 + P.gust * 4) * (0.4 + 0.6 * f.z) + 0.9 * sin(T * 1.7 + f.ph)) * d;\n    if (f.y > f.land) (f.y = -2 - rnd() * 4), (f.x = rnd() * W);\n    f.x = ((f.x % W) + W) % W;\n  }\n}\n\n// The valley, the rocks, the lantern and the still water, kept until the light changes.\nfunction backdrop(P) {\n  P.key = round(P.k1 * 60);\n  const g = P.k1, A = [0, 1, 2].map((c) => ramp(g, c)), top = [3, 4, 5].map((c) => ramp(g, c)), low = [6, 7, 8].map((c) => ramp(g, c));\n  const lamp = ramp(g, 12), BG = P.bg, IL = P.il, Z = P.z;\n  P.steamC = [9, 10, 11].map((c) => ramp(g, c));\n  P.lamp = lamp;\n  P.low = low;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, lm = P.lm[i];\n      for (let c = 0; c \u003c 3; c++) IL[o + c] = A[c] + LC[c] * lamp * lm;\n      let col = null, k = 1, z = 0;\n      const rg = P.rg[x];\n      if (y >= rg) {\n        // Snow on the slope, darker where scrub and rock break through.\n        col = SNOW;\n        k = 0.3 + 0.16 * vn(x * 0.12, y * 0.07) + 0.12 * (y / 66);\n        if (vn(x * 0.45 + 3, y * 0.28) > 0.7) k *= 0.45;\n      }\n      for (const [tx, ty, th, f] of TREES) {\n        // Tiers of drooping branches, each loaded with snow along its top.\n        const dx = abs(x + 0.5 - tx), ts = 3.2 + 2.6 * f, yy = y - ty - dx * 0.5, kq = floor(yy / ts), wi = yy - kq * ts;\n        if (yy \u003c 0 || y > ty + th + 3) continue;\n        if (y > ty + th) {\n          if (dx \u003c 0.4 + f) (col = TRUNK), (k = 0.6);\n          continue;\n        }\n        if (dx >= 0.5 + (y - ty) * 0.34 * (0.68 + 0.32 * (wi / ts)) * (0.85 + 0.3 * hash(kq, tx | 0))) continue;\n        if (wi \u003c 1 + 0.6 * f && hash(x, y) > 0.12) (col = SNOW), (k = 0.4 + 0.32 * f - 0.1 * (dx / th));\n        else (col = NEEDLE), (k = wi > ts - 0.7 ? 0.5 : 0.9 + 0.2 * hash(x + 7, y));\n        if (f \u003c 1) k = mix(k, 0.34, (1 - f) * 0.45);\n      }\n      if (y >= PB) (col = WATER), (z = 1), (k = 0.5 + 0.6 * ((y - PB) / 54));\n      for (const [cx, cy, rx, ry, dz] of ROCKS) {\n        const nx = (x + 0.5 - cx) / rx, ny = (y + 0.5 - cy) / ry, dd = nx * nx + ny * ny;\n        if (dd > 1 || y + 0.5 > cy) continue;\n        z = dz;\n        const nz = sqrt(1 - dd);\n        if (ny \u003c -0.42 - 0.22 * nz + 0.25 * (vn(x * 0.6, cy) - 0.5)) (col = SNOW), (k = 0.5 + 0.28 * nz - 0.12 * ny);\n        else (col = ROCK), (k = (0.6 + 0.5 * nz - 0.3 * nx) * (0.75 + 0.4 * vn(x * 0.5, y * 0.5)));\n      }\n      Z[i] = z;\n      if (!col) {\n        const v = (y / rg) ** 1.5;\n        for (let c = 0; c \u003c 3; c++) BG[o + c] = mix(top[c], low[c], v);\n        continue;\n      }\n      for (let c = 0; c \u003c 3; c++) BG[o + c] = col[c] * k * IL[o + c] + (z === 1 ? low[c] * 0.12 : 0);\n    }\n  // The stone lantern: finial, snowed roof, fire box with its glowing window,\n  // pillar and foot, standing on the rim rock.\n  const ROWS = [[42, 0.6, 1], [44, 3.6, 0], [46, 5, 1], [48, 2.6, 2], [54, 3.6, 1], [55, 1.3, 1], [60, 2.8, 1], [62, 0, 1]];\n  for (let r = 0; r \u003c ROWS.length - 1; r++)\n    for (let y = ROWS[r][0]; y \u003c ROWS[r + 1][0]; y++)\n      for (let x = 0; x \u003c 18; x++) {\n        const dx = abs(x + 0.5 - LX), hw = ROWS[r][1] + (r === 2 ? y - 46 : 0) * 0.6, o = (y * W + x) * 3;\n        if (dx > hw) continue;\n        const kind = ROWS[r][2], win = kind === 2 && dx \u003c 1.6 && y > 48 && y \u003c 53;\n        for (let c = 0; c \u003c 3; c++)\n          BG[o + c] = win ? [255, 200, 120][c] * min(1, 0.72 + 0.3 * lamp) : (kind ? STONE[c] * (0.6 + 0.25 * (LX - x) / hw) : SNOW[c] * 0.75) * IL[o + c];\n      }\n}\n\nlet F, IL, Z, M;\n// An ellipse of fur or skin on the monkey being drawn, under its water line\n// and behind any rock nearer than it.\nfunction blob(cx, cy, rx, ry, col, sn, fur) {\n  for (let y = max(0, floor(cy - ry)), y1 = min(H - 1, cy + ry); y \u003c= y1 && y + 0.5 \u003c M.wl; y++) {\n    const ny = (y + 0.5 - cy) / ry;\n    for (let x = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx); x \u003c= x1; x++) {\n      const nx = (x + 0.5 - cx) / rx, dd = nx * nx + ny * ny, i = y * W + x;\n      if (dd > 1 || Z[i] > M.z) continue;\n      const nz = sqrt(1 - dd);\n      let k, c = col;\n      if (fur) {\n        k = (0.36 + 0.55 * nz - 0.25 * ny - 0.12 * nx) * (0.84 + 0.3 * hash(x - M.x0, y - M.y0));\n        if (sn && ny \u003c sn * 0.5 - 1.05 + 0.25 * hash(x - M.x0, 9)) (c = SNOW), (k = 0.75 + 0.25 * nz);\n        else k *= 0.6 + 0.4 * sm(0.3, 2.2, M.wl - y - 0.5);\n      } else k = 0.72 + 0.3 * nz - 0.15 * ny;\n      paint(i, c, k);\n    }\n  }\n}\nfunction paint(i, c, k) {\n  const o = i * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k * (IL[o + n] * 0.6 + 0.4);\n}\nfunction dot(x, y, c, k) {\n  (x = floor(x)), (y = floor(y));\n  if (x >= 0 && x \u003c W && y >= 0 && y + 0.5 \u003c M.wl && Z[y * W + x] \u003c= M.z) paint(y * W + x, c, k);\n}\n// A limb of fur from a to b.\nfunction rod(ax, ay, bx, by, r, col) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = max(0, floor(min(ay, by) - r)); y \u003c= min(H - 1, max(ay, by) + r) && y + 0.5 \u003c M.wl; y++)\n    for (let x = max(0, floor(min(ax, bx) - r)); x \u003c= min(W - 1, max(ax, bx) + r); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t;\n      if (ex * ex + ey * ey > r * r || Z[y * W + x] > M.z) continue;\n      paint(y * W + x, col, (0.75 - 0.2 * (ey / r)) * (0.84 + 0.3 * hash(x, y)));\n    }\n}\n\n// One macaque: x, bottom row, scale, water line, depth, the turn of its head\n// (-1..1), how far it bows, eyes shut, snow on its head, sat on a rock.\nfunction monkey(x, yb, s, wl, z, lk, bow, shut, sn, sat) {\n  M = { wl, z, x0: floor(x), y0: floor(yb) };\n  blob(x, yb - 6.6 * s, 6.8 * s, 6.6 * s, FUR, sat ? 0.3 : 0, 1);\n  if (sat) {\n    for (const sd of [-1, 1]) {\n      blob(x + sd * 3.4 * s, yb - 2.6 * s, 2.7 * s, 2.3 * s, FUR, 0, 1);\n      blob(x + sd * 4.2 * s, yb - 0.6 * s, 1.5 * s, 0.9 * s, HAND, 0, 0);\n    }\n    for (const sd of [-1, 1]) rod(x + sd * 5 * s, yb - 10 * s, x + sd * 1.4 * s, yb - 4.8 * s, 1.4 * s, FUR);\n    blob(x, yb - 4.7 * s, 2 * s, 1 * s, HAND, 0, 0);\n  }\n  const R = 4.4 * s, hx = x + lk * 0.5 * s, hy = yb - (15.2 - bow) * s;\n  for (const sd of [-1, 1]) blob(hx + sd * R * (1 - 0.2 * lk * sd), hy - 0.3 * s, 1.1 * s + 0.2, 1.3 * s + 0.2, EAR, 0, 0);\n  blob(hx, hy, R * 1.05, R * 0.97, FUR, sn, 1);\n  const fx = hx + lk * 1.4 * s, fy = hy + (0.9 + bow * 0.25) * s;\n  blob(fx, fy, 2.2 * s * (1 - 0.2 * abs(lk)), 2.6 * s, FACE, 0, 0);\n  for (const sd of [-1, 1]) dot(fx + sd * 0.95 * s, fy - 0.6 * s, shut > 0.5 ? FACE : EYE, shut > 0.5 ? 0.45 : 1);\n  dot(fx, fy + 1.2 * s, FACE, 0.5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  if (P.key !== round(P.k1 * 60)) backdrop(P);\n  (F = P.f), (IL = P.il), (Z = P.z);\n  F.set(P.bg);\n  const T = P.t, lamp = P.lamp, BG = P.bg;\n  // The water: a slow shiver over it and the lantern's broken reflection.\n  for (let y = PB; y \u003c H; y++) {\n    const sx = 0.7 * sin(y * 0.5 + T * 1.3), rx = LX + 1.4 * sin(y * 0.9 + T * 3), rk = lamp * 140 * sm(104, 70, y);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (Z[i] !== 1) continue;\n      const r = vn(x * 0.3 + sx, y * 0.9 - T * 0.8), o = i * 3, dx = x + 0.5 - rx, ref = dx * dx \u003c 30 && rk ? rk * r * exp((-dx * dx) / 5) : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = BG[o + c] * (0.75 + 0.55 * r) + ref * LC[c];\n    }\n  }\n  // Who is where, back to front.\n  const L = [];\n  for (const m of P.mk) {\n    if (m.p \u003c= 0) continue;\n    if (m.pose > 2) {\n      // On the rim it slides down behind its rock as it goes.\n      const yb = m.y + 20 * (1 - m.p) * m.s;\n      m.hy = yb - 15.2 * m.s;\n      L.push([65, () => monkey(m.x, yb, m.s, 999, 65, m.lk, 0, m.e, 0.6, 1)]);\n      continue;\n    }\n    const wl = m.y + 0.35 * sin(T * 0.7 + m.ph), sk = m.sk + (m.pose === 1 ? 0.08 * sin(T * 0.5 + m.ph) : 0);\n    const yb = wl + (9.5 + 3.4 * sk + 20 * (1 - m.p)) * m.s;\n    m.hy = yb - (15.2 - (m.pose ? 1 : 0)) * m.s;\n    L.push([m.y, () => monkey(m.x, yb, m.s, wl, m.y, m.lk, m.pose ? 1 : 0, m.e, m.pose === 1 ? 1 : 0.55, 0), m]);\n  }\n  const R = P.R, u = R.st === 0 ? 0 : R.st === 2 ? 1 : R.st === 1 ? R.t / 3 : 1 - R.t / 3.4;\n  const [rx, ryb, rwl, rz] = path(u), rs = scl(rz);\n  L.push([rz, () => monkey(rx, ryb, rs, rwl, rz, R.lk, 0, R.st === 2 ? 1 : 0, 0.7, rwl > 900), rwl \u003c 900 && { x: rx, s: rs, p: 1, pose: 0, ph: 0 }]);\n  const B = P.B, bs = 0.64;\n  let bx, byb, bwl = 999, bz = 90;\n  if (B.st === 0) [bx, byb] = BSEAT;\n  else if (B.st === 1) {\n    const q = B.t / 0.7;\n    (bx = mix(BSEAT[0], BLAND[0], q)), (byb = mix(BSEAT[1], BLAND[1], q) - 14 * sin(PI * q)), (bz = mix(90, BLAND[1], q));\n  } else if (B.st === 2) {\n    const q = sm(0.8, 4.2, B.t);\n    (bwl = mix(BLAND[1], BFOOT[1], q)), (bx = mix(BLAND[0], BFOOT[0], q)), (bz = bwl);\n    byb = bwl + (12.5 + 14 * (1 - sm(0.15, 0.6, B.t))) * bs * scl(bwl);\n  } else {\n    const q = sm(0, 1.3, B.t);\n    (bx = mix(BFOOT[0], BSEAT[0], q)), (byb = mix(BFOOT[1], BSEAT[1], q)), (bz = mix(94, 90, q));\n  }\n  L.push([bz, () => monkey(bx, byb, bs * scl(bz), bwl, bz, B.lk, 0, 0, 0.4, B.st !== 2), B.st === 2 && { x: bx, s: 0.6, p: 1, pose: 0, ph: 3 }]);\n  L.sort((a, b) => a[0] - b[0]);\n  // Rings on the water round everyone in it.\n  for (const [z, , m] of L) {\n    if (!m) continue;\n    const s = m.s * m.p;\n    for (let n = 0; n \u003c 3; n++) {\n      const r = 6.5 * s + ((T * (m.pose === 1 ? 1.6 : 3) + n * 4.4 + m.ph) % 13), a = (1 - (r - 6.5 * s) / 13) * 0.8 * m.p;\n      for (let y = floor(z - r * 0.3 - 1); y \u003c= z + r * 0.3 + 1; y++)\n        for (let x = max(0, floor(m.x - r - 1)); x \u003c= min(W - 1, m.x + r + 1); x++) {\n          const i = y * W + x;\n          if (y >= H || Z[i] !== 1) continue;\n          const e = sqrt(((x + 0.5 - m.x) / r) ** 2 + ((y + 0.5 - z) / (r * 0.3)) ** 2);\n          if (abs(e - 1) * r \u003c 0.7) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += (P.low[c] * 0.6 + 60 * IL[i * 3 + c]) * a;\n        }\n    }\n  }\n  for (const [, fn, m] of L) {\n    fn();\n    // The groomer's hands in the fur of the one in front of it.\n    if (m && m.i === 0 && P.mk[1].p > 0.5) {\n      const g = P.mk[1], gs = g.s, hx = m.x + 2 * m.s, hy = m.hy - 3 * m.s;\n      M = { wl: g.y, z: m.y + 1, x0: 0, y0: 0 };\n      rod(g.x - 4.8 * gs, g.y - 1.5 * gs, hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.3 * gs, FUR);\n      rod(g.x - 2 * gs, g.y - 1.5 * gs, hx + 4 * m.s, hy + 5 * m.s + sin(T * 2.3), 1.3 * gs, FUR);\n      M.wl = 999;\n      blob(hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.2 * gs, 1 * gs, HAND, 0, 0);\n    }\n  }\n  // The splash: a plume, foam spreading and fading, a ring running out, and\n  // the drops falling back.\n  M = { wl: 999, z: 200, x0: 0, y0: 0 };\n  if (P.spl) {\n    const q = P.spl.t, { x: sx, y: sy } = P.spl, h = 7 * (1 - sm(0, 0.45, q));\n    if (h > 0.5) blob(sx, sy - h, 1.6 + 2 * q, h + 0.5, SNOW, 0, 0);\n    for (let y = floor(sy - 3), rx = 3 + 6 * q, ry = 1.4 + 1.2 * q; y \u003c= sy + 3 && q \u003c 1.4; y++)\n      for (let x = max(0, floor(sx - rx)); x \u003c= min(W - 1, sx + rx); x++) {\n        const e = 1 - ((x + 0.5 - sx) / rx) ** 2 - ((y + 0.5 - sy) / ry) ** 2, o = (y * W + x) * 3;\n        if (e > 0) for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * IL[o + c] * 1.2 - F[o + c]) * min(1, e * 3) * (1 - q / 1.4);\n      }\n    const r = 4 + 20 * q;\n    for (let x = 0; x \u003c W; x++)\n      for (const sd of [-1, 1]) {\n        const dx = (x + 0.5 - P.spl.x) / r, y = floor(P.spl.y + sd * r * 0.3 * sqrt(max(0, 1 - dx * dx)));\n        if (abs(dx) \u003c 1 && y \u003c H && Z[y * W + x] === 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] += 120 * (1 - q / 2) * IL[(y * W + x) * 3 + c];\n      }\n  }\n  for (const [x, y] of P.drops) dot(x, y, SNOW, 1);\n  // The steam over everything, lit by the sky and the lantern.\n  const G = P.G, SC = P.steamC;\n  G.fill(0);\n  for (const q of P.puffs) {\n    const a = q.a * sm(0, 0.9, q.age) * (1 - sm(q.life * 0.5, q.life, q.age)), gx = q.x / 2, gy = q.y / 2, rr = q.r * 0.75;\n    for (let j = max(0, floor(gy - rr * 1.3)); j \u003c= min(GH - 1, gy + rr * 1.3); j++)\n      for (let i = max(0, floor(gx - rr)); i \u003c= min(GW - 1, gx + rr); i++) {\n        const e = 1 - (i + 0.5 - gx) ** 2 / (rr * rr) - (j + 0.5 - gy) ** 2 / (rr * rr * 1.6);\n        if (e > 0) G[j * GW + i] += a * e * e;\n      }\n  }\n  // A low mist on the water, and the steam torn into wisps.\n  for (let j = 0, c = 0; j \u003c GH; j++)\n    for (let i = 0, mist = 0.2 * sm(PB - 8, PB + 14, j * 2 + 1); i \u003c GW; i++, c++)\n      if ((G[c] += mist) > 0.01) G[c] *= 0.2 + 0.85 * vn(i * 0.24 + P.fx, j * 0.17 + P.fy) + 0.45 * vn(i * 0.62 - P.fx, j * 0.44 + P.fy * 2);\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 2 - 0.25, j0 = cl(floor(v), 0, GH - 1), j1 = min(GH - 1, j0 + 1), fv = cl(v - j0, 0, 1), ay = 0.4 + 0.45 * sm(108, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const u2 = x / 2 - 0.25, i0 = cl(floor(u2), 0, GW - 1), i1 = min(GW - 1, i0 + 1), fu = cl(u2 - i0, 0, 1);\n      const D = mix(mix(G[j0 * GW + i0], G[j0 * GW + i1], fu), mix(G[j1 * GW + i0], G[j1 * GW + i1], fu), fv);\n      if (D \u003c 0.05) continue;\n      const a = ay * sm(0.05, 1.3, D), i = y * W + x, o = i * 3, lm = P.lm[i] * lamp * 200;\n      for (let c = 0; c \u003c 3; c++) F[o + c] += (SC[c] + LC[c] * lm - F[o + c]) * a;\n    }\n  }\n  // Snow falling, thicker in the wind.\n  const nf = floor(110 + 70 * abs(P.w));\n  for (let n = 0; n \u003c nf; n++) {\n    const f = P.flakes[n], x = floor(f.x), y = floor(f.y);\n    if (y \u003c 0 || y >= H) continue;\n    const i = y * W + x, o = i * 3, b = 0.45 + 0.5 * f.z;\n    for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * (IL[o + c] * 0.6 + 0.4) - F[o + c]) * b;\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower."},{"name":"Monkeys","min":3,"max":14,"about":"How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam."},{"name":"Wind","min":-1,"max":1,"about":"Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it."}],"start":[0,2,3,0.06],"measures":{"motion":0.2849,"detail":0.086,"edges":0.3721,"complexity":2.5086,"coverage":0.9682,"colour":0.1461,"drift":0.1151},"knobResponse":[0.1114,0.1216,0.0428,0.1209]},{"slug":"soap-film","title":"Soap Film","family":"cosmetic","round":39,"note":"고리에 건 세안 거품의 막이 세로로 서서 빠져요. 위로 갈수록 얇아서 뉴턴의 색 띠가 가로로 쌓여 가라앉고, 옆에서 얇은 막이 기둥으로 올라오고, 위에서 검은 막이 내려와요. 다 얇아지면 막이 터지고 새 막이 아래에서 올라와요.","idea":"A soap film fills the panel and drains, thinner toward the top, so Newton's interference colours stack in bands that sink while slow eddies wind them into spirals, thin film pulled from the sides rises in plumes and the black film spreads down from the top, until the film bursts and a new one is drawn up from the bottom.","buttons":"K1 tap bursts the film now, and a new one is drawn up after it.","code":"// ===== Patternflow pattern =====\n// Title:   Soap Film\n// Family:  cosmetic\n// Idea:    A soap film fills the panel and drains, thinner toward the top, so Newton's interference colours stack in bands that sink while slow eddies wind them into spirals, thin film pulled from the sides rises in plumes and the black film spreads down from the top, until the film bursts and a new one is drawn up from the bottom.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after the film of a foaming cleanser stretched across a ring, coloured by thin-film interference in Newton's colour series (Isaac Newton, Opticks, 1704) and thinning from the top as it drains\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Light=0..1, Swirl=0..1\n//\n// Knob 1: Hue. Turns every colour of the film round the grey axis together; the black film stays grey. At 0 Newton's own colours: a gold and cream band of the first order under the black film, then indigo, blue, yellow, orange and magenta, then pastel greens and pinks lower down. At 0.25 the first-order band is green, at 0.5 sky blue, at 0.75 magenta, the rest following. Orange, yellow and lime that come out dark are lifted most of the way to full and paled a little, so they read amber, gold or lime and never brown or olive, and no colour of the film falls below a fifth.\n// Knob 2: Speed. At 2 the film opens 2 s into its drainage; the black film appears at the top within a second and comes down 7.7 LEDs a second, past the middle by 9 s, while the bottom thins from 950 nm when drawn to 550 six seconds later. When the black film is 68% of the way down, 11.8 s in, the film bursts: a hole opens near the top and its rim runs across the panel in 0.9 s throwing spray, the panel stays dark 0.4 s and a new film is drawn up from the bottom in 1.2 s, 15 s round after the first. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Light. The wall behind the film, black at 0, so the black film reads black. Turned up, a white wall shows through wherever the film reflects little: the black film and the hole of a burst go grey and then white, and the colours pale toward pastel; at 1 a pearly white sheet with pastel bands.\n// Knob 4: Swirl. How hard the eddies spin. One starts every 1.1 to 2.1 s somewhere in the film, 9 to 17 LEDs across its core, and spins up and down over 4 to 8 s; the film keeps the twist and drainage sorts it back into layers over about 8 s. At 0 an eddy winds the bands most of a turn at its core, at the start about one turn, at 1 two and a half, curling the gold edge of the black film into spirals.\n// Buttons: K1 tap bursts the film now, and a new one is drawn up after it.\n\nconst W = 64, H = 128, N = W * H;\n// Film index, and the thickness table in nm.\nconst NF = 1.33, HMAX = 1400;\n// Thinner than this the film is black film, nm.\nconst BLACK = 30;\n// Seconds of drainage at Speed 2 before the first frame.\nconst AGE0 = 2;\n// Gain and gamma of the table.\nconst GAIN = 0.95, GAM = 0.8;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// CIE 1931 colour matching, the piecewise Gaussian fit of Wyman, Sloan and\n// Shirley (2013).\nconst g1 = (l, m, a, b) => {\n  const t = (l - m) / (l \u003c m ? a : b);\n  return exp(-0.5 * t * t);\n};\nconst cmf = (l) => [\n  1.056 * g1(l, 599.8, 37.9, 31) + 0.362 * g1(l, 442, 16, 26.7) - 0.065 * g1(l, 501.1, 20.4, 26.2),\n  0.821 * g1(l, 568.8, 46.9, 40.5) + 0.286 * g1(l, 530.9, 16.3, 31.1),\n  1.217 * g1(l, 437, 11.8, 36) + 0.681 * g1(l, 459, 26, 13.8),\n];\nconst toRGB = (X, Y, Z) => [3.2406 * X - 1.5372 * Y - 0.4986 * Z, -0.9689 * X + 1.8758 * Y + 0.0415 * Z, 0.0557 * X - 0.204 * Y + 1.057 * Z];\n\n// Reflectance of a film h nm thick, two beams: the front face reflects with\n// r = (1 - n) / (1 + n) and the back with -r, a half wave apart, so\n// R = 4 r^2 sin^2(2 pi n h / lambda), zero as h goes to zero. Summed over\n// 400 to 700 nm in 10 nm steps against an equal-energy light and divided by\n// the full white, so a film reflecting every wavelength fully is 1, 1, 1.\nfunction baseTable() {\n  const L = [], C = [];\n  for (let l = 400; l \u003c= 700; l += 10) L.push(l), C.push(cmf(l));\n  let wx = 0, wy = 0, wz = 0;\n  for (const c of C) (wx += c[0]), (wy += c[1]), (wz += c[2]);\n  const wr = toRGB(wx, wy, wz);\n  const T = new Float32Array(HMAX * 3);\n  for (let h = 0; h \u003c HMAX; h++) {\n    let X = 0, Y = 0, Z = 0;\n    for (let i = 0; i \u003c L.length; i++) {\n      const s = sin((2 * PI * NF * h) / L[i]), R = s * s;\n      X += R * C[i][0];\n      Y += R * C[i][1];\n      Z += R * C[i][2];\n    }\n    const c = toRGB(X, Y, Z);\n    for (let k = 0; k \u003c 3; k++) T[h * 3 + k] = max(0, c[k] / wr[k]);\n  }\n  return T;\n}\n\nfunction hsvOf(r, g, b) {\n  const mx = max(r, g, b), mn = min(r, g, b), d = mx - mn;\n  let h = 0;\n  if (d > 1e-6) h = mx === r ? ((g - b) / d + 6) % 6 : mx === g ? (b - r) / d + 2 : (r - g) / d + 4;\n  return [h / 6, mx > 0 ? d / mx : 0, mx];\n}\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// The table as the panel shows it: turned round the grey axis by the hue,\n// a light gamma, and paled toward a white wall behind as Light turns up.\nfunction displayTable(S) {\n  const B = S.base, D = S.lut, a = 2 * PI * S.hue, ca = cos(a), sa = sin(a), k = (1 - ca) / 3, q = sa / sqrt(3);\n  const m = [ca + k, k - q, k + q, k + q, ca + k, k - q, k - q, k + q, ca + k];\n  const lw = S.light, tmp = [0, 0, 0];\n  for (let h = 0; h \u003c HMAX; h++) {\n    const r = B[h * 3], g = B[h * 3 + 1], b = B[h * 3 + 2];\n    const Y = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n    let R, G, Bb;\n    if (h \u003c BLACK) {\n      // Black film keeps its cool grey whatever the hue.\n      const v = (GAIN * Y) ** GAM;\n      (R = 0.85 * v), (G = 0.93 * v), (Bb = 1.1 * v);\n    } else {\n      R = min(1, max(0, m[0] * r + m[1] * g + m[2] * b) * GAIN) ** GAM;\n      G = min(1, max(0, m[3] * r + m[4] * g + m[5] * b) * GAIN) ** GAM;\n      Bb = min(1, max(0, m[6] * r + m[7] * g + m[8] * b) * GAIN) ** GAM;\n      // No colour of the film itself falls below a fifth; and orange, yellow\n      // and lime that come out dark, which read brown or olive, are lifted\n      // most of the way to full and paled a little.\n      const [hh, ss, vv] = hsvOf(R, G, Bb), warm = cl(1.4 - abs(hh - 0.15) / 0.12, 0, 1) * sm(0.97, 0.6, vv);\n      const v2 = 0.2 + 0.8 * vv;\n      hsv(hh, ss * (1 - 0.3 * warm), v2 + (0.95 - v2) * warm, tmp, 0);\n      (R = tmp[0]), (G = tmp[1]), (Bb = tmp[2]);\n    }\n    // A white wall behind shows through where the film reflects little.\n    const wl = lw * (0.35 + 0.65 * (1 - min(1, Y)));\n    D[h * 3] = 250 * (R + (1 - R) * wl);\n    D[h * 3 + 1] = 250 * (G + (1 - G) * wl);\n    D[h * 3 + 2] = 250 * (Bb + (1 - Bb) * wl);\n  }\n}\n\nconst hash = (n) => {\n  const s = sin(n * 12.9898) * 43758.5453;\n  return s - floor(s);\n};\n\n// Smooth value noise on a 64 x 64 lattice that wraps.\nfunction noise(L, x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx), uy = fy * fy * (3 - 2 * fy);\n  const x0 = xi & 63, y0 = yi & 63, x1 = (x0 + 1) & 63, y1 = (y0 + 1) & 63;\n  const a = L[y0 * 64 + x0], b = L[y0 * 64 + x1], c = L[y1 * 64 + x0], d = L[y1 * 64 + x1];\n  return a + (b - a) * ux + (c - a + (d - c - b + a) * ux) * uy;\n}\n\nexport function setup(params) {\n  const L = new Float32Array(64 * 64);\n  for (let i = 0; i \u003c L.length; i++) L[i] = random() * 2 - 1;\n  params.s = {\n    hue: -1, light: -1, speed: 2, swirl: 0, begun: false, t: 0, age: 0,\n    base: baseTable(), lut: new Float32Array(HMAX * 3), L,\n    MX: new Float32Array(N), MY: new Float32Array(N), T: new Float32Array(N),\n    NX: new Float32Array(N), NY: new Float32Array(N), NT: new Float32Array(N),\n    eddies: [], nextEddy: 0, nextPlume: 0, side: false, hole: null, draw: 0,\n  };\n  reset(params.s);\n}\n\n// A fresh film: every point where it was drawn, nothing thin in it yet.\nfunction reset(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.MX[y * W + x] = x;\n      S.MY[y * W + x] = y;\n    }\n  S.T.fill(0);\n  S.age = 0;\n}\n\nfunction spawnEddy(S) {\n  S.eddies.push({\n    x: 8 + random() * 48, y: 16 + random() * 104, R: 9 + random() * 8,\n    w: (random() \u003c 0.5 ? -1 : 1) * (0.7 + 0.6 * random()), age: 0, life: 4 + 4 * random(),\n    vx: (random() - 0.5) * 3, vy: (random() - 0.3) * 3,\n  });\n}\n\n// Thin film pulled out of the border at the sides, which then rises.\nfunction spawnPlume(S, front) {\n  S.side = !S.side;\n  const x0 = S.side ? 0.5 + random() * 3 : W - 1.5 - random() * 3;\n  const y0 = H * (front + (1 - front) * (0.25 + 0.75 * random())), r = 2 + random() * 1.5, a = 0.7 + 0.3 * random();\n  for (let y = max(0, floor(y0 - 7 * r)); y \u003c= min(H - 1, y0 + 7 * r); y++)\n    for (let x = max(0, floor(x0 - 3 * r)); x \u003c= min(W - 1, x0 + 3 * r); x++) {\n      const d2 = ((x - x0) ** 2 + ((y - y0) * 0.4) ** 2) / (r * r), p = y * W + x;\n      S.T[p] = min(1, S.T[p] + a * exp(-d2));\n    }\n}\n\nfunction bilerp(A, x, y) {\n  x = cl(x, 0, W - 1.001);\n  y = cl(y, 0, H - 1.001);\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  const a = A[p], b = A[p + 1], c = A[p + W], d = A[p + W + 1];\n  return a + (b - a) * fx + (c - a + (d - c - b + a) * fx) * fy;\n}\n\n// Where the black film reaches, 0 at the top and 1 at the bottom, for a\n// film of this age.\nconst frontAt = (age) => cl((age - 2.5) * 0.06, 0, 1);\n\nfunction step(S, d) {\n  S.t += d;\n  S.age += d;\n  const front = frontAt(S.age);\n  // Eddies: each spins up and down over its life; the film keeps the twist.\n  if (S.t > S.nextEddy) {\n    spawnEddy(S);\n    S.nextEddy = S.t + 1.1 + random();\n  }\n  for (const e of S.eddies) {\n    e.age += d;\n    e.x += e.vx * d;\n    e.y += e.vy * d;\n  }\n  S.eddies = S.eddies.filter((e) => e.age \u003c e.life);\n  if (S.t > S.nextPlume && !S.draw && !S.hole) {\n    spawnPlume(S, front);\n    S.nextPlume = S.t + 0.12 + 0.12 * random();\n  }\n  const { MX, MY, T, NX, NY, NT, L } = S, sw = 1.4 + 2.6 * S.swirl, t = S.t;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Fine turbulence everywhere, two noise fields as the flow.\n      const n1 = noise(L, x * 0.21 + t * 0.4, y * 0.21 - t * 0.3), n2 = noise(L, x * 0.21 + 17.3 - t * 0.35, y * 0.21 + 9.1 + t * 0.25);\n      let vx = 2.2 * n1, vy = 2.2 * n2;\n      for (const e of S.eddies) {\n        const dx = x - e.x, dy = y - e.y, r2 = dx * dx + dy * dy, R2 = e.R * e.R;\n        if (r2 > 6 * R2) continue;\n        const env = sin((PI * e.age) / e.life), om = sw * e.w * env * exp(-r2 / R2);\n        vx -= om * dy;\n        vy += om * dx;\n      }\n      const qx = x - vx * d, qy = y - vy * d;\n      NX[p] = bilerp(MX, qx, qy);\n      NY[p] = bilerp(MY, qx, qy);\n      // Thin film from the border is lighter and rises through the rest.\n      NT[p] = bilerp(T, qx, qy + 15 * T[p] * d) * (1 - 0.1 * d);\n    }\n  // Drainage sorts the film back into layers: every point eases toward where\n  // it is, over about 8 s.\n  const rx = 1 - exp(-d / 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      MX[p] = NX[p] + (x - NX[p]) * rx;\n      MY[p] = NY[p] + (y - NY[p]) * rx;\n      T[p] = NT[p];\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[3], 0, 1);\n  const hue = k[0] - floor(k[0]), light = cl(k[2], 0, 1);\n  if (abs(hue - S.hue) > 1e-3 || abs(light - S.light) > 1e-3) {\n    S.hue = hue;\n    S.light = light;\n    displayTable(S);\n  }\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c AGE0 * 10; i++) step(S, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.hole) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  const sd = (d * S.speed) / 2;\n  if (!S.hole && frontAt(S.age) > 0.68) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  if (S.hole) {\n    const o = S.hole;\n    if (o.r \u003c 160) o.r += 180 * sd;\n    else {\n      o.gap += sd;\n      if (o.gap > 0.4) {\n        reset(S);\n        S.hole = null;\n        S.draw = 1;\n      }\n    }\n  }\n  if (S.draw > 0) S.draw = max(0, S.draw - sd / 1.2);\n  step(S, sd);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { MX, MY, T, L, lut } = S, age = S.age, t = S.t;\n  const front = frontAt(age);\n  // Thickness at the bottom and just under the black film, nm.\n  const hb = 950 / sqrt(1 + age / 3), ht = 90 + 260 * exp(-age / 1.2);\n  const o = S.hole, dy = S.draw > 0 ? H * S.draw : -1, bgv = 255 * S.light;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (o && (x - o.x) ** 2 + (y - o.y) ** 2 \u003c o.r * o.r) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      if (y \u003c dy) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      // Where this bit of film sat when the film was layered, and how much\n      // thin film from the border it carries.\n      const mx = MX[p], my = MY[p];\n      let u = my / (H - 1) - 0.2 * T[p];\n      if (dy >= 0) u = (u - S.draw) / (1 - S.draw);\n      const edge = front - 0.02 + 0.025 * noise(L, mx * 0.09 + 31, t * 0.15), e0 = max(0, edge);\n      let h;\n      if (u \u003c edge) {\n        // Black film, 1 to 21 nm, reflecting next to nothing.\n        h = 11 + 6 * noise(L, mx * 0.45 + 5, my * 0.45) + 4 * noise(L, mx * 1.2 + 23, my * 1.2 - t * 0.3);\n      } else {\n        const s = cl((u - e0) / (1 - e0), 0, 1);\n        h = ht + (hb - ht) * s ** 0.8;\n        h += 16 * noise(L, mx * 0.75 + 40, my * 0.75) + 6 * noise(L, x * 0.55 + t * 0.6, y * 0.55);\n      }\n      h = cl(h, 0, HMAX - 2);\n      const hi = floor(h), f = h - hi, a = hi * 3;\n      let r = lut[a] + (lut[a + 3] - lut[a]) * f, g = lut[a + 1] + (lut[a + 4] - lut[a + 1]) * f, b = lut[a + 2] + (lut[a + 5] - lut[a + 2]) * f;\n      if (o) {\n        // The rim the burst gathers, running out ahead of the hole, and the\n        // spray it throws.\n        const dr = Math.hypot(x - o.x, y - o.y) - o.r;\n        let rim = dr \u003c 4 ? exp(-dr * 0.7) : 0;\n        if (dr \u003c 9 && hash(x * 7 + y * 131 + floor(o.r) * 17) > 0.9) rim = max(rim, 1 - dr / 9);\n        r += (250 - r) * rim;\n        g += (250 - g) * rim;\n        b += (255 - b) * rim;\n      }\n      display.setPixel(x, y, round(cl(r, 0, 255)), round(cl(g, 0, 255)), round(cl(b, 0, 255)));\n    }\n}\n","layer":{"id":"layer-soap-film","type":"code","name":"soap-film","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Soap Film\n// Family:  cosmetic\n// Idea:    A soap film fills the panel and drains, thinner toward the top, so Newton's interference colours stack in bands that sink while slow eddies wind them into spirals, thin film pulled from the sides rises in plumes and the black film spreads down from the top, until the film bursts and a new one is drawn up from the bottom.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after the film of a foaming cleanser stretched across a ring, coloured by thin-film interference in Newton's colour series (Isaac Newton, Opticks, 1704) and thinning from the top as it drains\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Light=0..1, Swirl=0..1\n//\n// Knob 1: Hue. Turns every colour of the film round the grey axis together; the black film stays grey. At 0 Newton's own colours: a gold and cream band of the first order under the black film, then indigo, blue, yellow, orange and magenta, then pastel greens and pinks lower down. At 0.25 the first-order band is green, at 0.5 sky blue, at 0.75 magenta, the rest following. Orange, yellow and lime that come out dark are lifted most of the way to full and paled a little, so they read amber, gold or lime and never brown or olive, and no colour of the film falls below a fifth.\n// Knob 2: Speed. At 2 the film opens 2 s into its drainage; the black film appears at the top within a second and comes down 7.7 LEDs a second, past the middle by 9 s, while the bottom thins from 950 nm when drawn to 550 six seconds later. When the black film is 68% of the way down, 11.8 s in, the film bursts: a hole opens near the top and its rim runs across the panel in 0.9 s throwing spray, the panel stays dark 0.4 s and a new film is drawn up from the bottom in 1.2 s, 15 s round after the first. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Light. The wall behind the film, black at 0, so the black film reads black. Turned up, a white wall shows through wherever the film reflects little: the black film and the hole of a burst go grey and then white, and the colours pale toward pastel; at 1 a pearly white sheet with pastel bands.\n// Knob 4: Swirl. How hard the eddies spin. One starts every 1.1 to 2.1 s somewhere in the film, 9 to 17 LEDs across its core, and spins up and down over 4 to 8 s; the film keeps the twist and drainage sorts it back into layers over about 8 s. At 0 an eddy winds the bands most of a turn at its core, at the start about one turn, at 1 two and a half, curling the gold edge of the black film into spirals.\n// Buttons: K1 tap bursts the film now, and a new one is drawn up after it.\n\nconst W = 64, H = 128, N = W * H;\n// Film index, and the thickness table in nm.\nconst NF = 1.33, HMAX = 1400;\n// Thinner than this the film is black film, nm.\nconst BLACK = 30;\n// Seconds of drainage at Speed 2 before the first frame.\nconst AGE0 = 2;\n// Gain and gamma of the table.\nconst GAIN = 0.95, GAM = 0.8;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// CIE 1931 colour matching, the piecewise Gaussian fit of Wyman, Sloan and\n// Shirley (2013).\nconst g1 = (l, m, a, b) => {\n  const t = (l - m) / (l \u003c m ? a : b);\n  return exp(-0.5 * t * t);\n};\nconst cmf = (l) => [\n  1.056 * g1(l, 599.8, 37.9, 31) + 0.362 * g1(l, 442, 16, 26.7) - 0.065 * g1(l, 501.1, 20.4, 26.2),\n  0.821 * g1(l, 568.8, 46.9, 40.5) + 0.286 * g1(l, 530.9, 16.3, 31.1),\n  1.217 * g1(l, 437, 11.8, 36) + 0.681 * g1(l, 459, 26, 13.8),\n];\nconst toRGB = (X, Y, Z) => [3.2406 * X - 1.5372 * Y - 0.4986 * Z, -0.9689 * X + 1.8758 * Y + 0.0415 * Z, 0.0557 * X - 0.204 * Y + 1.057 * Z];\n\n// Reflectance of a film h nm thick, two beams: the front face reflects with\n// r = (1 - n) / (1 + n) and the back with -r, a half wave apart, so\n// R = 4 r^2 sin^2(2 pi n h / lambda), zero as h goes to zero. Summed over\n// 400 to 700 nm in 10 nm steps against an equal-energy light and divided by\n// the full white, so a film reflecting every wavelength fully is 1, 1, 1.\nfunction baseTable() {\n  const L = [], C = [];\n  for (let l = 400; l \u003c= 700; l += 10) L.push(l), C.push(cmf(l));\n  let wx = 0, wy = 0, wz = 0;\n  for (const c of C) (wx += c[0]), (wy += c[1]), (wz += c[2]);\n  const wr = toRGB(wx, wy, wz);\n  const T = new Float32Array(HMAX * 3);\n  for (let h = 0; h \u003c HMAX; h++) {\n    let X = 0, Y = 0, Z = 0;\n    for (let i = 0; i \u003c L.length; i++) {\n      const s = sin((2 * PI * NF * h) / L[i]), R = s * s;\n      X += R * C[i][0];\n      Y += R * C[i][1];\n      Z += R * C[i][2];\n    }\n    const c = toRGB(X, Y, Z);\n    for (let k = 0; k \u003c 3; k++) T[h * 3 + k] = max(0, c[k] / wr[k]);\n  }\n  return T;\n}\n\nfunction hsvOf(r, g, b) {\n  const mx = max(r, g, b), mn = min(r, g, b), d = mx - mn;\n  let h = 0;\n  if (d > 1e-6) h = mx === r ? ((g - b) / d + 6) % 6 : mx === g ? (b - r) / d + 2 : (r - g) / d + 4;\n  return [h / 6, mx > 0 ? d / mx : 0, mx];\n}\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// The table as the panel shows it: turned round the grey axis by the hue,\n// a light gamma, and paled toward a white wall behind as Light turns up.\nfunction displayTable(S) {\n  const B = S.base, D = S.lut, a = 2 * PI * S.hue, ca = cos(a), sa = sin(a), k = (1 - ca) / 3, q = sa / sqrt(3);\n  const m = [ca + k, k - q, k + q, k + q, ca + k, k - q, k - q, k + q, ca + k];\n  const lw = S.light, tmp = [0, 0, 0];\n  for (let h = 0; h \u003c HMAX; h++) {\n    const r = B[h * 3], g = B[h * 3 + 1], b = B[h * 3 + 2];\n    const Y = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n    let R, G, Bb;\n    if (h \u003c BLACK) {\n      // Black film keeps its cool grey whatever the hue.\n      const v = (GAIN * Y) ** GAM;\n      (R = 0.85 * v), (G = 0.93 * v), (Bb = 1.1 * v);\n    } else {\n      R = min(1, max(0, m[0] * r + m[1] * g + m[2] * b) * GAIN) ** GAM;\n      G = min(1, max(0, m[3] * r + m[4] * g + m[5] * b) * GAIN) ** GAM;\n      Bb = min(1, max(0, m[6] * r + m[7] * g + m[8] * b) * GAIN) ** GAM;\n      // No colour of the film itself falls below a fifth; and orange, yellow\n      // and lime that come out dark, which read brown or olive, are lifted\n      // most of the way to full and paled a little.\n      const [hh, ss, vv] = hsvOf(R, G, Bb), warm = cl(1.4 - abs(hh - 0.15) / 0.12, 0, 1) * sm(0.97, 0.6, vv);\n      const v2 = 0.2 + 0.8 * vv;\n      hsv(hh, ss * (1 - 0.3 * warm), v2 + (0.95 - v2) * warm, tmp, 0);\n      (R = tmp[0]), (G = tmp[1]), (Bb = tmp[2]);\n    }\n    // A white wall behind shows through where the film reflects little.\n    const wl = lw * (0.35 + 0.65 * (1 - min(1, Y)));\n    D[h * 3] = 250 * (R + (1 - R) * wl);\n    D[h * 3 + 1] = 250 * (G + (1 - G) * wl);\n    D[h * 3 + 2] = 250 * (Bb + (1 - Bb) * wl);\n  }\n}\n\nconst hash = (n) => {\n  const s = sin(n * 12.9898) * 43758.5453;\n  return s - floor(s);\n};\n\n// Smooth value noise on a 64 x 64 lattice that wraps.\nfunction noise(L, x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx), uy = fy * fy * (3 - 2 * fy);\n  const x0 = xi & 63, y0 = yi & 63, x1 = (x0 + 1) & 63, y1 = (y0 + 1) & 63;\n  const a = L[y0 * 64 + x0], b = L[y0 * 64 + x1], c = L[y1 * 64 + x0], d = L[y1 * 64 + x1];\n  return a + (b - a) * ux + (c - a + (d - c - b + a) * ux) * uy;\n}\n\nexport function setup(params) {\n  const L = new Float32Array(64 * 64);\n  for (let i = 0; i \u003c L.length; i++) L[i] = random() * 2 - 1;\n  params.s = {\n    hue: -1, light: -1, speed: 2, swirl: 0, begun: false, t: 0, age: 0,\n    base: baseTable(), lut: new Float32Array(HMAX * 3), L,\n    MX: new Float32Array(N), MY: new Float32Array(N), T: new Float32Array(N),\n    NX: new Float32Array(N), NY: new Float32Array(N), NT: new Float32Array(N),\n    eddies: [], nextEddy: 0, nextPlume: 0, side: false, hole: null, draw: 0,\n  };\n  reset(params.s);\n}\n\n// A fresh film: every point where it was drawn, nothing thin in it yet.\nfunction reset(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.MX[y * W + x] = x;\n      S.MY[y * W + x] = y;\n    }\n  S.T.fill(0);\n  S.age = 0;\n}\n\nfunction spawnEddy(S) {\n  S.eddies.push({\n    x: 8 + random() * 48, y: 16 + random() * 104, R: 9 + random() * 8,\n    w: (random() \u003c 0.5 ? -1 : 1) * (0.7 + 0.6 * random()), age: 0, life: 4 + 4 * random(),\n    vx: (random() - 0.5) * 3, vy: (random() - 0.3) * 3,\n  });\n}\n\n// Thin film pulled out of the border at the sides, which then rises.\nfunction spawnPlume(S, front) {\n  S.side = !S.side;\n  const x0 = S.side ? 0.5 + random() * 3 : W - 1.5 - random() * 3;\n  const y0 = H * (front + (1 - front) * (0.25 + 0.75 * random())), r = 2 + random() * 1.5, a = 0.7 + 0.3 * random();\n  for (let y = max(0, floor(y0 - 7 * r)); y \u003c= min(H - 1, y0 + 7 * r); y++)\n    for (let x = max(0, floor(x0 - 3 * r)); x \u003c= min(W - 1, x0 + 3 * r); x++) {\n      const d2 = ((x - x0) ** 2 + ((y - y0) * 0.4) ** 2) / (r * r), p = y * W + x;\n      S.T[p] = min(1, S.T[p] + a * exp(-d2));\n    }\n}\n\nfunction bilerp(A, x, y) {\n  x = cl(x, 0, W - 1.001);\n  y = cl(y, 0, H - 1.001);\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  const a = A[p], b = A[p + 1], c = A[p + W], d = A[p + W + 1];\n  return a + (b - a) * fx + (c - a + (d - c - b + a) * fx) * fy;\n}\n\n// Where the black film reaches, 0 at the top and 1 at the bottom, for a\n// film of this age.\nconst frontAt = (age) => cl((age - 2.5) * 0.06, 0, 1);\n\nfunction step(S, d) {\n  S.t += d;\n  S.age += d;\n  const front = frontAt(S.age);\n  // Eddies: each spins up and down over its life; the film keeps the twist.\n  if (S.t > S.nextEddy) {\n    spawnEddy(S);\n    S.nextEddy = S.t + 1.1 + random();\n  }\n  for (const e of S.eddies) {\n    e.age += d;\n    e.x += e.vx * d;\n    e.y += e.vy * d;\n  }\n  S.eddies = S.eddies.filter((e) => e.age \u003c e.life);\n  if (S.t > S.nextPlume && !S.draw && !S.hole) {\n    spawnPlume(S, front);\n    S.nextPlume = S.t + 0.12 + 0.12 * random();\n  }\n  const { MX, MY, T, NX, NY, NT, L } = S, sw = 1.4 + 2.6 * S.swirl, t = S.t;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Fine turbulence everywhere, two noise fields as the flow.\n      const n1 = noise(L, x * 0.21 + t * 0.4, y * 0.21 - t * 0.3), n2 = noise(L, x * 0.21 + 17.3 - t * 0.35, y * 0.21 + 9.1 + t * 0.25);\n      let vx = 2.2 * n1, vy = 2.2 * n2;\n      for (const e of S.eddies) {\n        const dx = x - e.x, dy = y - e.y, r2 = dx * dx + dy * dy, R2 = e.R * e.R;\n        if (r2 > 6 * R2) continue;\n        const env = sin((PI * e.age) / e.life), om = sw * e.w * env * exp(-r2 / R2);\n        vx -= om * dy;\n        vy += om * dx;\n      }\n      const qx = x - vx * d, qy = y - vy * d;\n      NX[p] = bilerp(MX, qx, qy);\n      NY[p] = bilerp(MY, qx, qy);\n      // Thin film from the border is lighter and rises through the rest.\n      NT[p] = bilerp(T, qx, qy + 15 * T[p] * d) * (1 - 0.1 * d);\n    }\n  // Drainage sorts the film back into layers: every point eases toward where\n  // it is, over about 8 s.\n  const rx = 1 - exp(-d / 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      MX[p] = NX[p] + (x - NX[p]) * rx;\n      MY[p] = NY[p] + (y - NY[p]) * rx;\n      T[p] = NT[p];\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[3], 0, 1);\n  const hue = k[0] - floor(k[0]), light = cl(k[2], 0, 1);\n  if (abs(hue - S.hue) > 1e-3 || abs(light - S.light) > 1e-3) {\n    S.hue = hue;\n    S.light = light;\n    displayTable(S);\n  }\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c AGE0 * 10; i++) step(S, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.hole) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  const sd = (d * S.speed) / 2;\n  if (!S.hole && frontAt(S.age) > 0.68) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  if (S.hole) {\n    const o = S.hole;\n    if (o.r \u003c 160) o.r += 180 * sd;\n    else {\n      o.gap += sd;\n      if (o.gap > 0.4) {\n        reset(S);\n        S.hole = null;\n        S.draw = 1;\n      }\n    }\n  }\n  if (S.draw > 0) S.draw = max(0, S.draw - sd / 1.2);\n  step(S, sd);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { MX, MY, T, L, lut } = S, age = S.age, t = S.t;\n  const front = frontAt(age);\n  // Thickness at the bottom and just under the black film, nm.\n  const hb = 950 / sqrt(1 + age / 3), ht = 90 + 260 * exp(-age / 1.2);\n  const o = S.hole, dy = S.draw > 0 ? H * S.draw : -1, bgv = 255 * S.light;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (o && (x - o.x) ** 2 + (y - o.y) ** 2 \u003c o.r * o.r) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      if (y \u003c dy) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      // Where this bit of film sat when the film was layered, and how much\n      // thin film from the border it carries.\n      const mx = MX[p], my = MY[p];\n      let u = my / (H - 1) - 0.2 * T[p];\n      if (dy >= 0) u = (u - S.draw) / (1 - S.draw);\n      const edge = front - 0.02 + 0.025 * noise(L, mx * 0.09 + 31, t * 0.15), e0 = max(0, edge);\n      let h;\n      if (u \u003c edge) {\n        // Black film, 1 to 21 nm, reflecting next to nothing.\n        h = 11 + 6 * noise(L, mx * 0.45 + 5, my * 0.45) + 4 * noise(L, mx * 1.2 + 23, my * 1.2 - t * 0.3);\n      } else {\n        const s = cl((u - e0) / (1 - e0), 0, 1);\n        h = ht + (hb - ht) * s ** 0.8;\n        h += 16 * noise(L, mx * 0.75 + 40, my * 0.75) + 6 * noise(L, x * 0.55 + t * 0.6, y * 0.55);\n      }\n      h = cl(h, 0, HMAX - 2);\n      const hi = floor(h), f = h - hi, a = hi * 3;\n      let r = lut[a] + (lut[a + 3] - lut[a]) * f, g = lut[a + 1] + (lut[a + 4] - lut[a + 1]) * f, b = lut[a + 2] + (lut[a + 5] - lut[a + 2]) * f;\n      if (o) {\n        // The rim the burst gathers, running out ahead of the hole, and the\n        // spray it throws.\n        const dr = Math.hypot(x - o.x, y - o.y) - o.r;\n        let rim = dr \u003c 4 ? exp(-dr * 0.7) : 0;\n        if (dr \u003c 9 && hash(x * 7 + y * 131 + floor(o.r) * 17) > 0.9) rim = max(rim, 1 - dr / 9);\n        r += (250 - r) * rim;\n        g += (250 - g) * rim;\n        b += (255 - b) * rim;\n      }\n      display.setPixel(x, y, round(cl(r, 0, 255)), round(cl(g, 0, 255)), round(cl(b, 0, 255)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Light=0..1, Swirl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour of the film round the grey axis together; the black film stays grey. At 0 Newton's own colours: a gold and cream band of the first order under the black film, then indigo, blue, yellow, orange and magenta, then pastel greens and pinks lower down. At 0.25 the first-order band is green, at 0.5 sky blue, at 0.75 magenta, the rest following. Orange, yellow and lime that come out dark are lifted most of the way to full and paled a little, so they read amber, gold or lime and never brown or olive, and no colour of the film falls below a fifth."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the film opens 2 s into its drainage; the black film appears at the top within a second and comes down 7.7 LEDs a second, past the middle by 9 s, while the bottom thins from 950 nm when drawn to 550 six seconds later. When the black film is 68% of the way down, 11.8 s in, the film bursts: a hole opens near the top and its rim runs across the panel in 0.9 s throwing spray, the panel stays dark 0.4 s and a new film is drawn up from the bottom in 1.2 s, 15 s round after the first. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Light","min":0,"max":1,"about":"The wall behind the film, black at 0, so the black film reads black. Turned up, a white wall shows through wherever the film reflects little: the black film and the hole of a burst go grey and then white, and the colours pale toward pastel; at 1 a pearly white sheet with pastel bands."},{"name":"Swirl","min":0,"max":1,"about":"How hard the eddies spin. One starts every 1.1 to 2.1 s somewhere in the film, 9 to 17 LEDs across its core, and spins up and down over 4 to 8 s; the film keeps the twist and drainage sorts it back into layers over about 8 s. At 0 an eddy winds the bands most of a turn at its core, at the start about one turn, at 1 two and a half, curling the gold edge of the black film into spirals."}],"start":[0,2,0,0.06],"measures":{"motion":0.2419,"detail":0.0368,"edges":0.0854,"complexity":2.3422,"coverage":0.754,"colour":0.6118,"drift":0.3785},"knobResponse":[0.4809,0.5345,0.3525,0.1517]},{"slug":"sorting","title":"Sorting","family":"algo","round":2,"note":"막대 64개를 알고리즘 하나가 한 번에 한 동작씩 줄 세워요. 비교하는 막대는 희게, 바꾸는 막대는 붉게 켜지고, 다 서면 위에서 아래로 훑어 확인한 뒤 다시 섞어요.","idea":"Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.","buttons":"K1 tap throws the bars back into a heap.","code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-sorting","type":"code","name":"sorting","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the bars, which run from the shortest to the longest across a third of the colour wheel."},{"name":"Speed","min":0,"max":5,"about":"Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one."},{"name":"Algorithm","min":0,"max":7,"about":"0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand."},{"name":"Rows","min":2,"max":8,"about":"How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them."}],"start":[0,2,0,2],"measures":{"motion":1.5282,"detail":0.0322,"edges":0.8211,"complexity":0.0601,"coverage":0.5078,"colour":0.3589,"drift":0.1727},"knobResponse":[0.2105,0.2338,0.2297,0.1743]},{"slug":"sorting-network","title":"Sorting Network","family":"line","round":33,"note":"실 열여섯 가닥이 이웃끼리 한 쌍씩 자리를 바꿔 128줄 만에 순서가 거꾸로 되고, 다음 네트워크가 이어받아 실마다 패널을 사인 곡선으로 가로질러요. 균일한 무작위 정렬 네트워크라 바꾼 자리를 찍은 점이 가운데로 반원 꼴로 몰려요. K3 은 실을 32가닥까지 늘리고, K1 을 누르면 실 하나만 8초 동안 밝혀 그 곡선을 보여 줘요.","idea":"Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.","buttons":"K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.","code":"// ===== Patternflow pattern =====\n// Title:   Sorting Network\n// Family:  line\n// Idea:    Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: uniform random sorting networks (Omer Angel, Alexander Holroyd, Dan Romik, Bálint Virág, 2007), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1\n//\n// Knob 1: Hue. Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right.\n// Knob 2: Speed. Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds.\n// Knob 3: Wires. How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row.\n// Knob 4: Bubble. Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns.\n// Buttons: K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.\n\nconst W = 64, H = 128, NET = 128;\nconst HMAX = 12, HALF_PI = Math.PI / 2;\nconst { min, max, floor, ceil, sin, cos } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A uniformly random standard Young tableau of the staircase (n-1, ..., 1),\n// by the hook walk of Greene, Nijenhuis and Wilf (1979): start on a uniform\n// cell, jump to a uniform other cell of its hook until the walk stands on a\n// corner, write the largest number not yet used there, take the corner off.\n// T[r * (n-1) + c], 0-indexed, rows of n-1-r cells.\nfunction hookWalk(n) {\n  const R = n - 1, len = new Int32Array(R), T = new Int32Array(R * R);\n  for (let r = 0; r \u003c R; r++) len[r] = R - r;\n  let cells = (n * (n - 1)) / 2;\n  for (let val = cells; val >= 1; val--, cells--) {\n    let k = floor(Math.random() * cells), r = 0;\n    while (k >= len[r]) (k -= len[r]), r++;\n    let c = k;\n    for (;;) {\n      const arm = len[r] - 1 - c;\n      let leg = 0;\n      while (r + leg + 1 \u003c R && len[r + leg + 1] > c) leg++;\n      if (arm + leg === 0) break;\n      const h = floor(Math.random() * (arm + leg));\n      if (h \u003c arm) c += 1 + h;\n      else r += 1 + h - arm;\n    }\n    T[r * R + c] = val;\n    len[r]--;\n  }\n  return T;\n}\n\n// The tableau read row by row, 1 to N: under Edelman-Greene it is the\n// bubble-sort network run backwards in time, 1 | 2 1 | 3 2 1 | ..., where\n// the thread in place k walks left past all k threads before it in one\n// straight diagonal. Read column by column it is the mirror image.\nfunction readTableau(n, byRow) {\n  const R = n - 1, T = new Int32Array(R * R);\n  let v = 1;\n  for (let a = 0; a \u003c R; a++) for (let b = 0; b \u003c R - a; b++) T[byRow ? a * R + b : b * R + a] = v++;\n  return T;\n}\n\n// Edelman-Greene (1987), as Angel, Holroyd, Romik and Virag lay it out:\n// N times over, the largest entry N sits in a corner (i, j) with i + j = n,\n// 1-indexed; swap places j and j + 1; empty that cell and slide the hole to\n// (1, 1), each time moving in the larger of the neighbours above and to the\n// left; add 1 to every entry and write 1 in (1, 1). Adding 1 to everything\n// is kept as one offset, so a network costs N * n steps, not N * N. Checked\n// in a scratch script over 1400 networks with n from 3 to 32: every swap\n// takes a pair still in order and each network ends reversed; at n = 4 all\n// 16 reduced words of the longest permutation came out equally often.\nfunction edelmanGreene(T0, n, out) {\n  const R = n - 1, N = (n * (n - 1)) / 2, t = Int32Array.from(T0);\n  let off = 0;\n  for (let s = 0; s \u003c N; s++) {\n    let r = 0;\n    while (r \u003c R && t[r * R + R - 1 - r] + off !== N) r++;\n    let c = R - 1 - r;\n    out[s] = c;\n    for (;;) {\n      const up = r > 0 ? t[(r - 1) * R + c] : -1e9, lf = c > 0 ? t[r * R + c - 1] : -1e9;\n      if (r === 0 && c === 0) break;\n      if (up > lf) (t[r * R + c] = up), r--;\n      else (t[r * R + c] = lf), c--;\n    }\n    off++;\n    t[0] = 1 - off;\n  }\n}\n\n// Each cell gets (1 - b) * uniform + b * bubble. Both tableaux grow along\n// rows and down columns, so their blend does too, and ranking the cells by\n// it is a standard tableau again: a sorting network for every b.\nfunction network(P, net) {\n  const n = P.n, R = n - 1, N = (n * (n - 1)) / 2, b = P.bubble;\n  const Tb = (net.m & 1) === 0 ? P.tabRow : P.tabCol;\n  let T = net.tu;\n  if (b > 0) {\n    const key = new Float64Array(R * R), ids = [];\n    for (let r = 0; r \u003c R; r++) for (let c = 0; c \u003c R - r; c++) {\n      const i = r * R + c;\n      key[i] = (1 - b) * net.tu[i] + b * Tb[i];\n      ids.push(i);\n    }\n    ids.sort((x, y) => key[x] - key[y] || x - y);\n    T = new Int32Array(R * R);\n    for (let k = 0; k \u003c N; k++) T[ids[k]] = k + 1;\n  }\n  edelmanGreene(T, n, net.sw);\n  // The cheap form of the check, once a network: every swap must take a\n  // pair still in its starting order, and the end must be the reversal.\n  // A miss falls back on bubble sort, which is always right.\n  const a = Int32Array.from({ length: n }, (_, i) => i);\n  let ok = true;\n  for (let s = 0; s \u003c N && ok; s++) {\n    const p = net.sw[s], x = a[p];\n    if (x > a[p + 1]) ok = false;\n    (a[p] = a[p + 1]), (a[p + 1] = x);\n  }\n  for (let i = 0; i \u003c n && ok; i++) if (a[i] !== n - 1 - i) ok = false;\n  if (!ok) edelmanGreene(Tb, n, net.sw);\n  net.b = b;\n}\n\nfunction rebuild(P) {\n  const n = P.n;\n  P.tabRow = readTableau(n, true);\n  P.tabCol = readTableau(n, false);\n  P.nets = new Map();\n  P.cols = new Float32Array(n * 3);\n  // Four threads are drawn bright, both edges and two between, 0, 5, 10\n  // and 15 of sixteen: the edges swing all the way across on half a cosine,\n  // the two inside on arcs whose height the network picks.\n  P.lead = new Uint8Array(n);\n  for (let k = 0; k \u003c 4; k++) P.lead[Math.round((k * (n - 1)) / 3)] = 1;\n  P.colHue = NaN;\n  const cap = 4 * ((n * (n - 1)) / 2) + 8;\n  P.mt = new Float32Array(cap);\n  P.md = new Int8Array(cap);\n  P.mw = new Int32Array(cap);\n  P.mh = new Float32Array(cap);\n  P.mr = new Float32Array(cap);\n  P.dt_ = new Float32Array(cap);\n  P.dp = new Int32Array(cap);\n  P.da = new Int32Array(cap);\n  P.db = new Int32Array(cap);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 16, bubble: 0.06, scroll: 0, hl: -1, hlT: 0, hlA: 0,\n    buf: new Float32Array(W * H * 3),\n  };\n  rebuild(params.s);\n}\n\nfunction getNet(P, m) {\n  let net = P.nets.get(m);\n  if (!net) {\n    net = { m, tu: hookWalk(P.n), sw: new Int32Array((P.n * (P.n - 1)) / 2), b: -1 };\n    P.nets.set(m, net);\n  }\n  if (net.b !== P.bubble) network(P, net);\n  return net;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  const n = cl(Math.round(k[2]), 16, 32);\n  if (n !== P.n) (P.n = n), rebuild(P), (P.hl = -1), (P.hlT = 0);\n  // Bubble moves in steps of 1/200 so a knob resting between two readings\n  // does not rebuild the networks every frame.\n  P.bubble = Math.round(cl(k[3], 0, 1) * 200) / 200;\n  if (input.btnPressed && input.btnPressed[0]) {\n    let w = floor(Math.random() * (P.hl \u003c 0 ? P.n : P.n - 1));\n    if (P.hl >= 0 && w >= P.hl) w++;\n    P.hl = w;\n    P.hlT = 8;\n  }\n  P.hlT = max(0, P.hlT - d);\n  P.hlA += ((P.hlT > 0 ? 1 : 0) - P.hlA) * min(1, d * 5);\n  P.scroll += d * P.speed * 4;\n  const first = floor(P.scroll / NET) - 1;\n  for (const m of P.nets.keys()) if (m \u003c first) P.nets.delete(m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, N = (n * (n - 1)) / 2, buf = P.buf, sp = W / n;\n  if (P.colHue !== P.hue) {\n    // Gold through green, cyan and blue to violet: the thread that starts on\n    // the left is gold at Hue 0, the one on the right violet, never red.\n    for (let v = 0; v \u003c n; v++) hsv(P.hue + 0.14 + (0.64 * v) / (n - 1), 0.82, 1, P.cols, v * 3);\n    P.colHue = P.hue;\n  }\n  buf.fill(0);\n  // Every move in sight, in time order. Row y holds network time scroll + y;\n  // network m fills times 128 m to 128 (m + 1) and starts from the identity\n  // when m is even, from the reversal when m is odd, so threads run on from\n  // one network into the next and nothing has to be carried between them.\n  const T0 = P.scroll - HMAX - 1, T1 = P.scroll + H + HMAX + 1;\n  const cnt = new Int32Array(n), mt = P.mt, md = P.md, mw = P.mw, mh = P.mh, mr = P.mr;\n  // Moves are grouped by thread: thread w owns slots w * per .. w * per + per.\n  const per = floor(mt.length / n);\n  let nd = 0;\n  for (let m = floor(T0 / NET); m \u003c= floor(T1 / NET); m++) {\n    const net = getNet(P, m), st = new Int32Array(n);\n    for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n    for (let s = 0; s \u003c N; s++) {\n      const t = m * NET + ((s + 0.5) * NET) / N, p = net.sw[s], a = st[p], b = st[p + 1];\n      st[p] = b;\n      st[p + 1] = a;\n      if (t \u003c T0 || t > T1) continue;\n      if (cnt[a] >= per || cnt[b] >= per) continue;\n      const ia = a * per + cnt[a]++, ib = b * per + cnt[b]++;\n      (mt[ia] = t), (md[ia] = 1), (mw[ia] = p);\n      (mt[ib] = t), (md[ib] = -1), (mw[ib] = p + 1);\n      P.dt_[nd] = t;\n      P.dp[nd] = p;\n      P.da[nd] = a;\n      P.db[nd] = b;\n      nd++;\n    }\n  }\n  // A thread leaves the middle of its place halfway between its swaps,\n  // meets its partner on the boundary at the swap and settles in the middle\n  // of the next place halfway to its swap after, never taking more than\n  // HMAX rows a side. Each thread keeps its own timing, so it is always\n  // under way and still crosses its partner at the dot: both are on the\n  // boundary at the swap time.\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    for (let i = 0; i \u003c cnt[w]; i++) {\n      mh[o + i] = i > 0 ? min(HMAX, (mt[o + i] - mt[o + i - 1]) / 2) : HMAX;\n      mr[o + i] = i + 1 \u003c cnt[w] ? min(HMAX, (mt[o + i + 1] - mt[o + i]) / 2) : HMAX;\n    }\n  }\n  const hlA = P.hlA, cols = P.cols;\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    // Place of thread w at the top of the window: where its first move in\n    // sight starts from, or, with no move in sight, where it sits.\n    let i = 0;\n    let base = cnt[w] > 0 ? mw[o] - md[o] : placeAt(P, w, T0);\n    const lead = P.lead[w], lit = w === P.hl ? 1 : 1 - 0.75 * hlA;\n    const gain = ((lead ? 0.85 : 0.4) + (w === P.hl ? (1 - (lead ? 0.85 : 0.4)) * hlA : 0)) * lit;\n    const cr = cols[w * 3] * gain, cg = cols[w * 3 + 1] * gain, cb = cols[w * 3 + 2] * gain;\n    // A quarter cosine into the boundary and a quarter sine out of it.\n    const xAt = (t) => {\n      while (i \u003c cnt[w] && t >= mt[o + i] + mr[o + i]) (base += md[o + i]), i++;\n      let pos = base;\n      if (i \u003c cnt[w]) {\n        const u = t - mt[o + i];\n        if (u >= 0) pos += md[o + i] * (0.5 + 0.5 * sin((u / mr[o + i]) * HALF_PI));\n        else if (u > -mh[o + i]) pos += md[o + i] * 0.5 * (1 - cos(((u + mh[o + i]) / mh[o + i]) * HALF_PI));\n      }\n      return (pos + 0.5) * sp;\n    };\n    for (let y = 0; y \u003c H; y++) {\n      const t = P.scroll + y, xa = xAt(t), xm = xAt(t + 0.5), xb = xAt(t + 1);\n      const lo = min(xa, xm, xb), hi = max(xa, xm, xb);\n      const c0 = max(0, floor(lo - 1)), c1 = min(W - 1, ceil(hi + 1));\n      for (let c = c0; c \u003c= c1; c++) {\n        const cx = c + 0.5, dist = cx \u003c lo ? lo - cx : cx > hi ? cx - hi : 0;\n        const a = cl((1 - dist) * 1.6, 0, 1);\n        if (a \u003c= 0) continue;\n        const q = (y * W + c) * 3;\n        buf[q] += cr * a;\n        buf[q + 1] += cg * a;\n        buf[q + 2] += cb * a;\n      }\n    }\n  }\n  // The swaps: a pale dot where the two threads meet, half white and half\n  // the mix of the pair. Their density across the panel is the semicircle.\n  for (let j = 0; j \u003c nd; j++) {\n    const yc = P.dt_[j] - P.scroll, xc = (P.dp[j] + 1) * sp;\n    if (yc \u003c -2 || yc > H + 2) continue;\n    const a = P.da[j], b = P.db[j];\n    const dim = hlA > 0 && a !== P.hl && b !== P.hl ? 1 - 0.6 * hlA : 1;\n    const r = (0.55 + 0.25 * (cols[a * 3] + cols[b * 3])) * dim;\n    const g = (0.55 + 0.25 * (cols[a * 3 + 1] + cols[b * 3 + 1])) * dim;\n    const bl = (0.55 + 0.25 * (cols[a * 3 + 2] + cols[b * 3 + 2])) * dim;\n    for (let y = floor(yc - 1.5); y \u003c= ceil(yc + 1.5); y++) {\n      if (y \u003c 0 || y >= H) continue;\n      for (let x = floor(xc - 1.5); x \u003c= ceil(xc + 1.5); x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const dx = x + 0.5 - xc, dy = y + 0.5 - yc, f = cl(1.15 - (dx * dx + dy * dy) * 0.55, 0, 1);\n        if (f \u003c= 0) continue;\n        const q = (y * W + x) * 3;\n        buf[q] = max(buf[q], r * f);\n        buf[q + 1] = max(buf[q + 1], g * f);\n        buf[q + 2] = max(buf[q + 2], bl * f);\n      }\n    }\n  }\n  for (let p = 0, q = 0; p \u003c W * H; p++, q += 3) {\n    const x = p % W, y = (p / W) | 0;\n    display.setPixel(x, y, min(255, buf[q] * 255), min(255, buf[q + 1] * 255), min(255, buf[q + 2] * 255));\n  }\n}\n\n// Where thread w sits at time t, by playing its network from the start.\nfunction placeAt(P, w, t) {\n  const n = P.n, N = (n * (n - 1)) / 2, m = floor(t / NET), net = getNet(P, m);\n  let pos = m & 1 ? n - 1 - w : w;\n  const st = new Int32Array(n);\n  for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n  for (let s = 0; s \u003c N; s++) {\n    if (m * NET + ((s + 0.5) * NET) / N > t) break;\n    const p = net.sw[s], a = st[p];\n    st[p] = st[p + 1];\n    st[p + 1] = a;\n    if (st[p] === w) pos = p;\n    else if (st[p + 1] === w) pos = p + 1;\n  }\n  return pos;\n}\n","layer":{"id":"layer-sorting-network","type":"code","name":"sorting-network","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sorting Network\n// Family:  line\n// Idea:    Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: uniform random sorting networks (Omer Angel, Alexander Holroyd, Dan Romik, Bálint Virág, 2007), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1\n//\n// Knob 1: Hue. Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right.\n// Knob 2: Speed. Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds.\n// Knob 3: Wires. How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row.\n// Knob 4: Bubble. Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns.\n// Buttons: K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.\n\nconst W = 64, H = 128, NET = 128;\nconst HMAX = 12, HALF_PI = Math.PI / 2;\nconst { min, max, floor, ceil, sin, cos } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A uniformly random standard Young tableau of the staircase (n-1, ..., 1),\n// by the hook walk of Greene, Nijenhuis and Wilf (1979): start on a uniform\n// cell, jump to a uniform other cell of its hook until the walk stands on a\n// corner, write the largest number not yet used there, take the corner off.\n// T[r * (n-1) + c], 0-indexed, rows of n-1-r cells.\nfunction hookWalk(n) {\n  const R = n - 1, len = new Int32Array(R), T = new Int32Array(R * R);\n  for (let r = 0; r \u003c R; r++) len[r] = R - r;\n  let cells = (n * (n - 1)) / 2;\n  for (let val = cells; val >= 1; val--, cells--) {\n    let k = floor(Math.random() * cells), r = 0;\n    while (k >= len[r]) (k -= len[r]), r++;\n    let c = k;\n    for (;;) {\n      const arm = len[r] - 1 - c;\n      let leg = 0;\n      while (r + leg + 1 \u003c R && len[r + leg + 1] > c) leg++;\n      if (arm + leg === 0) break;\n      const h = floor(Math.random() * (arm + leg));\n      if (h \u003c arm) c += 1 + h;\n      else r += 1 + h - arm;\n    }\n    T[r * R + c] = val;\n    len[r]--;\n  }\n  return T;\n}\n\n// The tableau read row by row, 1 to N: under Edelman-Greene it is the\n// bubble-sort network run backwards in time, 1 | 2 1 | 3 2 1 | ..., where\n// the thread in place k walks left past all k threads before it in one\n// straight diagonal. Read column by column it is the mirror image.\nfunction readTableau(n, byRow) {\n  const R = n - 1, T = new Int32Array(R * R);\n  let v = 1;\n  for (let a = 0; a \u003c R; a++) for (let b = 0; b \u003c R - a; b++) T[byRow ? a * R + b : b * R + a] = v++;\n  return T;\n}\n\n// Edelman-Greene (1987), as Angel, Holroyd, Romik and Virag lay it out:\n// N times over, the largest entry N sits in a corner (i, j) with i + j = n,\n// 1-indexed; swap places j and j + 1; empty that cell and slide the hole to\n// (1, 1), each time moving in the larger of the neighbours above and to the\n// left; add 1 to every entry and write 1 in (1, 1). Adding 1 to everything\n// is kept as one offset, so a network costs N * n steps, not N * N. Checked\n// in a scratch script over 1400 networks with n from 3 to 32: every swap\n// takes a pair still in order and each network ends reversed; at n = 4 all\n// 16 reduced words of the longest permutation came out equally often.\nfunction edelmanGreene(T0, n, out) {\n  const R = n - 1, N = (n * (n - 1)) / 2, t = Int32Array.from(T0);\n  let off = 0;\n  for (let s = 0; s \u003c N; s++) {\n    let r = 0;\n    while (r \u003c R && t[r * R + R - 1 - r] + off !== N) r++;\n    let c = R - 1 - r;\n    out[s] = c;\n    for (;;) {\n      const up = r > 0 ? t[(r - 1) * R + c] : -1e9, lf = c > 0 ? t[r * R + c - 1] : -1e9;\n      if (r === 0 && c === 0) break;\n      if (up > lf) (t[r * R + c] = up), r--;\n      else (t[r * R + c] = lf), c--;\n    }\n    off++;\n    t[0] = 1 - off;\n  }\n}\n\n// Each cell gets (1 - b) * uniform + b * bubble. Both tableaux grow along\n// rows and down columns, so their blend does too, and ranking the cells by\n// it is a standard tableau again: a sorting network for every b.\nfunction network(P, net) {\n  const n = P.n, R = n - 1, N = (n * (n - 1)) / 2, b = P.bubble;\n  const Tb = (net.m & 1) === 0 ? P.tabRow : P.tabCol;\n  let T = net.tu;\n  if (b > 0) {\n    const key = new Float64Array(R * R), ids = [];\n    for (let r = 0; r \u003c R; r++) for (let c = 0; c \u003c R - r; c++) {\n      const i = r * R + c;\n      key[i] = (1 - b) * net.tu[i] + b * Tb[i];\n      ids.push(i);\n    }\n    ids.sort((x, y) => key[x] - key[y] || x - y);\n    T = new Int32Array(R * R);\n    for (let k = 0; k \u003c N; k++) T[ids[k]] = k + 1;\n  }\n  edelmanGreene(T, n, net.sw);\n  // The cheap form of the check, once a network: every swap must take a\n  // pair still in its starting order, and the end must be the reversal.\n  // A miss falls back on bubble sort, which is always right.\n  const a = Int32Array.from({ length: n }, (_, i) => i);\n  let ok = true;\n  for (let s = 0; s \u003c N && ok; s++) {\n    const p = net.sw[s], x = a[p];\n    if (x > a[p + 1]) ok = false;\n    (a[p] = a[p + 1]), (a[p + 1] = x);\n  }\n  for (let i = 0; i \u003c n && ok; i++) if (a[i] !== n - 1 - i) ok = false;\n  if (!ok) edelmanGreene(Tb, n, net.sw);\n  net.b = b;\n}\n\nfunction rebuild(P) {\n  const n = P.n;\n  P.tabRow = readTableau(n, true);\n  P.tabCol = readTableau(n, false);\n  P.nets = new Map();\n  P.cols = new Float32Array(n * 3);\n  // Four threads are drawn bright, both edges and two between, 0, 5, 10\n  // and 15 of sixteen: the edges swing all the way across on half a cosine,\n  // the two inside on arcs whose height the network picks.\n  P.lead = new Uint8Array(n);\n  for (let k = 0; k \u003c 4; k++) P.lead[Math.round((k * (n - 1)) / 3)] = 1;\n  P.colHue = NaN;\n  const cap = 4 * ((n * (n - 1)) / 2) + 8;\n  P.mt = new Float32Array(cap);\n  P.md = new Int8Array(cap);\n  P.mw = new Int32Array(cap);\n  P.mh = new Float32Array(cap);\n  P.mr = new Float32Array(cap);\n  P.dt_ = new Float32Array(cap);\n  P.dp = new Int32Array(cap);\n  P.da = new Int32Array(cap);\n  P.db = new Int32Array(cap);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 16, bubble: 0.06, scroll: 0, hl: -1, hlT: 0, hlA: 0,\n    buf: new Float32Array(W * H * 3),\n  };\n  rebuild(params.s);\n}\n\nfunction getNet(P, m) {\n  let net = P.nets.get(m);\n  if (!net) {\n    net = { m, tu: hookWalk(P.n), sw: new Int32Array((P.n * (P.n - 1)) / 2), b: -1 };\n    P.nets.set(m, net);\n  }\n  if (net.b !== P.bubble) network(P, net);\n  return net;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  const n = cl(Math.round(k[2]), 16, 32);\n  if (n !== P.n) (P.n = n), rebuild(P), (P.hl = -1), (P.hlT = 0);\n  // Bubble moves in steps of 1/200 so a knob resting between two readings\n  // does not rebuild the networks every frame.\n  P.bubble = Math.round(cl(k[3], 0, 1) * 200) / 200;\n  if (input.btnPressed && input.btnPressed[0]) {\n    let w = floor(Math.random() * (P.hl \u003c 0 ? P.n : P.n - 1));\n    if (P.hl >= 0 && w >= P.hl) w++;\n    P.hl = w;\n    P.hlT = 8;\n  }\n  P.hlT = max(0, P.hlT - d);\n  P.hlA += ((P.hlT > 0 ? 1 : 0) - P.hlA) * min(1, d * 5);\n  P.scroll += d * P.speed * 4;\n  const first = floor(P.scroll / NET) - 1;\n  for (const m of P.nets.keys()) if (m \u003c first) P.nets.delete(m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, N = (n * (n - 1)) / 2, buf = P.buf, sp = W / n;\n  if (P.colHue !== P.hue) {\n    // Gold through green, cyan and blue to violet: the thread that starts on\n    // the left is gold at Hue 0, the one on the right violet, never red.\n    for (let v = 0; v \u003c n; v++) hsv(P.hue + 0.14 + (0.64 * v) / (n - 1), 0.82, 1, P.cols, v * 3);\n    P.colHue = P.hue;\n  }\n  buf.fill(0);\n  // Every move in sight, in time order. Row y holds network time scroll + y;\n  // network m fills times 128 m to 128 (m + 1) and starts from the identity\n  // when m is even, from the reversal when m is odd, so threads run on from\n  // one network into the next and nothing has to be carried between them.\n  const T0 = P.scroll - HMAX - 1, T1 = P.scroll + H + HMAX + 1;\n  const cnt = new Int32Array(n), mt = P.mt, md = P.md, mw = P.mw, mh = P.mh, mr = P.mr;\n  // Moves are grouped by thread: thread w owns slots w * per .. w * per + per.\n  const per = floor(mt.length / n);\n  let nd = 0;\n  for (let m = floor(T0 / NET); m \u003c= floor(T1 / NET); m++) {\n    const net = getNet(P, m), st = new Int32Array(n);\n    for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n    for (let s = 0; s \u003c N; s++) {\n      const t = m * NET + ((s + 0.5) * NET) / N, p = net.sw[s], a = st[p], b = st[p + 1];\n      st[p] = b;\n      st[p + 1] = a;\n      if (t \u003c T0 || t > T1) continue;\n      if (cnt[a] >= per || cnt[b] >= per) continue;\n      const ia = a * per + cnt[a]++, ib = b * per + cnt[b]++;\n      (mt[ia] = t), (md[ia] = 1), (mw[ia] = p);\n      (mt[ib] = t), (md[ib] = -1), (mw[ib] = p + 1);\n      P.dt_[nd] = t;\n      P.dp[nd] = p;\n      P.da[nd] = a;\n      P.db[nd] = b;\n      nd++;\n    }\n  }\n  // A thread leaves the middle of its place halfway between its swaps,\n  // meets its partner on the boundary at the swap and settles in the middle\n  // of the next place halfway to its swap after, never taking more than\n  // HMAX rows a side. Each thread keeps its own timing, so it is always\n  // under way and still crosses its partner at the dot: both are on the\n  // boundary at the swap time.\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    for (let i = 0; i \u003c cnt[w]; i++) {\n      mh[o + i] = i > 0 ? min(HMAX, (mt[o + i] - mt[o + i - 1]) / 2) : HMAX;\n      mr[o + i] = i + 1 \u003c cnt[w] ? min(HMAX, (mt[o + i + 1] - mt[o + i]) / 2) : HMAX;\n    }\n  }\n  const hlA = P.hlA, cols = P.cols;\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    // Place of thread w at the top of the window: where its first move in\n    // sight starts from, or, with no move in sight, where it sits.\n    let i = 0;\n    let base = cnt[w] > 0 ? mw[o] - md[o] : placeAt(P, w, T0);\n    const lead = P.lead[w], lit = w === P.hl ? 1 : 1 - 0.75 * hlA;\n    const gain = ((lead ? 0.85 : 0.4) + (w === P.hl ? (1 - (lead ? 0.85 : 0.4)) * hlA : 0)) * lit;\n    const cr = cols[w * 3] * gain, cg = cols[w * 3 + 1] * gain, cb = cols[w * 3 + 2] * gain;\n    // A quarter cosine into the boundary and a quarter sine out of it.\n    const xAt = (t) => {\n      while (i \u003c cnt[w] && t >= mt[o + i] + mr[o + i]) (base += md[o + i]), i++;\n      let pos = base;\n      if (i \u003c cnt[w]) {\n        const u = t - mt[o + i];\n        if (u >= 0) pos += md[o + i] * (0.5 + 0.5 * sin((u / mr[o + i]) * HALF_PI));\n        else if (u > -mh[o + i]) pos += md[o + i] * 0.5 * (1 - cos(((u + mh[o + i]) / mh[o + i]) * HALF_PI));\n      }\n      return (pos + 0.5) * sp;\n    };\n    for (let y = 0; y \u003c H; y++) {\n      const t = P.scroll + y, xa = xAt(t), xm = xAt(t + 0.5), xb = xAt(t + 1);\n      const lo = min(xa, xm, xb), hi = max(xa, xm, xb);\n      const c0 = max(0, floor(lo - 1)), c1 = min(W - 1, ceil(hi + 1));\n      for (let c = c0; c \u003c= c1; c++) {\n        const cx = c + 0.5, dist = cx \u003c lo ? lo - cx : cx > hi ? cx - hi : 0;\n        const a = cl((1 - dist) * 1.6, 0, 1);\n        if (a \u003c= 0) continue;\n        const q = (y * W + c) * 3;\n        buf[q] += cr * a;\n        buf[q + 1] += cg * a;\n        buf[q + 2] += cb * a;\n      }\n    }\n  }\n  // The swaps: a pale dot where the two threads meet, half white and half\n  // the mix of the pair. Their density across the panel is the semicircle.\n  for (let j = 0; j \u003c nd; j++) {\n    const yc = P.dt_[j] - P.scroll, xc = (P.dp[j] + 1) * sp;\n    if (yc \u003c -2 || yc > H + 2) continue;\n    const a = P.da[j], b = P.db[j];\n    const dim = hlA > 0 && a !== P.hl && b !== P.hl ? 1 - 0.6 * hlA : 1;\n    const r = (0.55 + 0.25 * (cols[a * 3] + cols[b * 3])) * dim;\n    const g = (0.55 + 0.25 * (cols[a * 3 + 1] + cols[b * 3 + 1])) * dim;\n    const bl = (0.55 + 0.25 * (cols[a * 3 + 2] + cols[b * 3 + 2])) * dim;\n    for (let y = floor(yc - 1.5); y \u003c= ceil(yc + 1.5); y++) {\n      if (y \u003c 0 || y >= H) continue;\n      for (let x = floor(xc - 1.5); x \u003c= ceil(xc + 1.5); x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const dx = x + 0.5 - xc, dy = y + 0.5 - yc, f = cl(1.15 - (dx * dx + dy * dy) * 0.55, 0, 1);\n        if (f \u003c= 0) continue;\n        const q = (y * W + x) * 3;\n        buf[q] = max(buf[q], r * f);\n        buf[q + 1] = max(buf[q + 1], g * f);\n        buf[q + 2] = max(buf[q + 2], bl * f);\n      }\n    }\n  }\n  for (let p = 0, q = 0; p \u003c W * H; p++, q += 3) {\n    const x = p % W, y = (p / W) | 0;\n    display.setPixel(x, y, min(255, buf[q] * 255), min(255, buf[q + 1] * 255), min(255, buf[q + 2] * 255));\n  }\n}\n\n// Where thread w sits at time t, by playing its network from the start.\nfunction placeAt(P, w, t) {\n  const n = P.n, N = (n * (n - 1)) / 2, m = floor(t / NET), net = getNet(P, m);\n  let pos = m & 1 ? n - 1 - w : w;\n  const st = new Int32Array(n);\n  for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n  for (let s = 0; s \u003c N; s++) {\n    if (m * NET + ((s + 0.5) * NET) / N > t) break;\n    const p = net.sw[s], a = st[p];\n    st[p] = st[p + 1];\n    st[p + 1] = a;\n    if (st[p] === w) pos = p;\n    else if (st[p + 1] === w) pos = p + 1;\n  }\n  return pos;\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right."},{"name":"Speed","min":0.2,"max":3,"about":"Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds."},{"name":"Wires","min":16,"max":32,"about":"How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row."},{"name":"Bubble","min":0,"max":1,"about":"Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns."}],"start":[0,2,16,0.06],"measures":{"motion":1.187,"detail":0.1748,"edges":0.7005,"complexity":1.5147,"coverage":0.5118,"colour":0.2962,"drift":0.1325},"knobResponse":[0.1544,0.2402,0.3244,0.2291]},{"slug":"sparks","title":"Sparks","family":"particle","round":1,"note":"불꽃마다 흰빛에서 식어 가는 색이 제 나이를 보여 줘요. 꽃불 세 가지가 느슨한 박자로 터져요.","idea":"Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.","buttons":"K1 tap fires a shell straight away.","code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-sparks","type":"code","name":"sparks","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":1,"about":"At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour."},{"name":"Rate","min":0.6,"max":5,"about":"How often a rocket goes up; the beat stays loose, with doubles and the odd rest."},{"name":"Gravity","min":-1,"max":1,"about":"At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers."},{"name":"Trail","min":0.3,"max":1.8,"about":"Seconds a spark's streak takes to fade."}],"start":[0,2,0,0.3],"measures":{"motion":0.3313,"detail":0.0372,"edges":0.402,"complexity":0.7208,"coverage":0.1596,"colour":0.1435,"drift":0.1348},"knobResponse":[0.034,0.0885,0.063,0.0577]},{"slug":"spectrogram","title":"Spectrogram","family":"data","round":17,"note":"새벽 합창의 스펙트로그램이 폭포처럼 내려와요. 휘파람과 떨림, 짹 소리와 뻐꾸기의 두 음이 바람과 먼 찻길로 얼룩진 바닥 위에 밝게 그려지고, K3 을 누르면 손뼉 소리에 새들이 잠시 입을 다물어요.","idea":"A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.","buttons":"K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.","code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-spectrogram","type":"code","name":"spectrogram","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Map","min":0,"max":1,"about":"The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph."},{"name":"Scroll","min":0.5,"max":4,"about":"How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall."},{"name":"Birds","min":0,"max":1,"about":"How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all."},{"name":"Gain","min":-1,"max":1,"about":"Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel."}],"start":[0,2,0,0.06],"measures":{"motion":2.9689,"detail":0.133,"edges":0.3961,"complexity":2.4228,"coverage":0.9799,"colour":0.4061,"drift":0.0801},"knobResponse":[0.3109,0.1622,0.1596,0.4388]},{"slug":"sperner-lemma","title":"Sperner's Lemma","family":"topology","round":38,"note":"세운 삼각형을 작은 방으로 나누고, 꼭짓점마다 연속 사상이 가장 많이 줄이는 좌표의 번호를 붙여 파랑, 빨강, 초록 영토로 칠해요. 흰 걸음이 밑변의 1-2 문으로 들어와 방마다 다른 문으로 나가다가 세 번호를 다 가진 무지개 방에서 멈추고, 그 방은 사상의 고정점 위에 있어요. K3 은 사상을 고정점 둘레로 비틀어 영토 경계를 감고, K4 는 고정점을 늘려 무지개 방을 홀수 개로 늘려요.","idea":"A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Sperner's Lemma\n// Family:  topology\n// Idea:    A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Sperner's lemma (Emanuel Sperner, 1928) and the Brouwer fixed-point theorem it proves (L. E. J. Brouwer, 1911), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1\n//\n// Knob 1: Mesh. Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves.\n// Knob 2: Speed. At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Swirl. Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in.\n// Knob 4: Ripple. Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two.\n\nconst W = 64, H = 128, NMAX = 28, ST = NMAX + 1;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, hypot, PI } = Math;\nconst TAU = 2 * PI, R3 = sqrt(3);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The big triangle on the panel, pixel centres at x + 0.5: corner 1 bottom\n// left, corner 2 bottom right, corner 3 the apex. The base is the 1-2 side.\nconst P1x = 0.5, P1y = 127.2, P2x = 63.5, P2y = 127.2, P3x = 32, P3y = 0.8;\nconst E2x = P2x - P1x, E2y = P2y - P1y, E3x = P3x - P1x, E3y = P3y - P1y, DET = E2x * E3y - E3x * E2y;\n// Length of the gradient of each barycentric coordinate, in units per LED:\n// the distance from a pixel to a mesh line is its offset over this.\nconst G2 = hypot(E3y, E3x) / abs(DET), G3 = hypot(E2y, E2x) / abs(DET);\nconst G1 = hypot(E3y - E2y, E2x - E3x) / abs(DET);\n\n// The map f is defined on an equilateral triangle, corners E1 = (-1, 0),\n// E2 = (1, 0), E3 = (0, sqrt 3): f(q) = q + d(q), pulled back into the\n// triangle by the nearest point, so f is continuous and maps the triangle\n// into itself. d turns round the fixed point c by an angle that grows by\n// SWIRL radians per unit of distance at Swirl 1, and is STEP long from R0\n// out, shrinking to nothing at c.\nconst STEP = 0.12, R0 = 0.35, SWIRL = 3.4;\n// Radius of the glow round the head of the walk, in LEDs.\nconst GLOW = 7;\n// The ripple: two waves added to d, up to RIP times STEP.\nconst RIP = 3.5;\n\n// Label colours: 1 azure, 2 rose, 3 green. Each at its own brightness\n// (brightest channel 0.85, 0.62 and 0.4 of full), so a room that changes\n// label changes in brightness too and not only in hue; green at 0.4 still\n// looks about as bright to the eye as azure at 0.85.\nconst COL = [\n  [0.12 * 0.85, 0.42 * 0.85, 0.85],\n  [0.62, 0.18 * 0.62, 0.3 * 0.62],\n  [0.2 * 0.4 / 0.95, 0.4, 0.28 * 0.4 / 0.95],\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 0, speed: 2, swirl: 0, ripple: 0, t: 0, head: 0, begun: false,\n    lab: new Int8Array(ST * ST), cx: 0, cy: 0, turn: 0,\n    walks: [], main: null, rainbow: [], seen: new Uint8Array(2 * NMAX * NMAX),\n    line: new Float32Array(W * H), room: new Int32Array(W * H), R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    y: [0, 0, 0], hc: [0, 0, 0],\n  };\n}\n\n// Vertex (b, c) of an n-mesh has barycentric coordinates (n - b - c, b, c) / n.\nconst vid = (b, c) => c * ST + b;\n\n// Rooms: up room (i, j) has corners (i, j), (i + 1, j), (i, j + 1); down room\n// (i, j) has corners (i + 1, j), (i, j + 1), (i + 1, j + 1).\nconst rid = (i, j, down) => 2 * (j * NMAX + i) + down;\nfunction corners(r) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  return down ? [vid(i + 1, j), vid(i, j + 1), vid(i + 1, j + 1)] : [vid(i, j), vid(i + 1, j), vid(i, j + 1)];\n}\n// The three walls of a room, each as its two corners and the room behind it\n// (-1 for the base, -2 for the other two sides).\nfunction walls(r, n) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  if (down)\n    return [\n      [vid(i + 1, j), vid(i, j + 1), rid(i, j, 0)],\n      [vid(i, j + 1), vid(i + 1, j + 1), rid(i, j + 1, 0)],\n      [vid(i + 1, j), vid(i + 1, j + 1), rid(i + 1, j, 0)],\n    ];\n  return [\n    [vid(i, j), vid(i + 1, j), j > 0 ? rid(i, j - 1, 1) : -1],\n    [vid(i, j), vid(i, j + 1), i > 0 ? rid(i - 1, j, 1) : -2],\n    [vid(i + 1, j), vid(i, j + 1), i + j \u003c n - 1 ? rid(i, j, 1) : -2],\n  ];\n}\n\n// The map at barycentric x, written into y as barycentric coordinates.\n// Near the sides the turn and the ripple fade out (over the band where the\n// smallest coordinate is under EDGE), so there d points at c and q + d stays\n// inside: f has no fixed point on the sides, only where d is zero inside.\nconst EDGE = 0.16;\nfunction f(S, x1, x2, x3, y) {\n  const mb = min(x1, x2, x3), qx = x2 - x1, qy = R3 * x3, inner = sm(0, EDGE, mb);\n  const dx = S.cx - qx, dy = S.cy - qy, r = hypot(dx, dy);\n  let gx = 0, gy = 0;\n  if (r > 1e-12) {\n    const psi = (S.turn + S.swirl * SWIRL * r) * inner, m = (STEP * min(r, R0)) / R0 / r, cs = cos(psi), sn = sin(psi);\n    gx = (dx * cs - dy * sn) * m;\n    gy = (dx * sn + dy * cs) * m;\n  }\n  if (S.ripple > 0) {\n    const a = S.ripple ** 0.6 * RIP * STEP * sm(0, EDGE / 2, mb), ph = S.t * 0.21;\n    gx += a * sin(5.3 * qx + 3.1 * qy + ph);\n    gy += a * sin(-4.4 * qx + 4.9 * qy + 1.9 - 0.8 * ph);\n  }\n  let px = qx + gx, py = qy + gy;\n  // Back into the triangle by the nearest point.\n  let z3 = py / R3, z2 = (1 - z3 + px) / 2, z1 = (1 - z3 - px) / 2;\n  if (z1 \u003c 0 || z2 \u003c 0 || z3 \u003c 0) {\n    let best = Infinity, bx = 0, by = 0;\n    const E = [-1, 0, 1, 0, 0, R3];\n    for (let e = 0; e \u003c 3; e++) {\n      const ax = E[2 * e], ay = E[2 * e + 1], ex = E[(2 * e + 2) % 6] - ax, ey = E[(2 * e + 3) % 6] - ay;\n      const t = cl(((px - ax) * ex + (py - ay) * ey) / (ex * ex + ey * ey), 0, 1), sx = ax + t * ex, sy = ay + t * ey;\n      const d2 = (px - sx) ** 2 + (py - sy) ** 2;\n      if (d2 \u003c best) {\n        best = d2;\n        bx = sx;\n        by = sy;\n      }\n    }\n    px = bx;\n    py = by;\n    z3 = max(0, py / R3);\n    z2 = max(0, (1 - z3 + px) / 2);\n    z1 = max(0, 1 - z2 - z3);\n  }\n  y[0] = z1;\n  y[1] = z2;\n  y[2] = z3;\n}\n\n// Label every vertex: of the coordinates that are not zero, the one f takes\n// down the most. Such a one always exists because both sum to 1, and a\n// coordinate that is zero is never chosen, so each corner gets its own label\n// and each side only its two corners' labels: a Sperner labelling.\nfunction label(S) {\n  const n = S.n, y = S.y;\n  for (let c = 0; c \u003c= n; c++)\n    for (let b = 0; b + c \u003c= n; b++) {\n      const a = n - b - c, x = [a / n, b / n, c / n];\n      f(S, x[0], x[1], x[2], y);\n      let best = -Infinity, L = 0;\n      for (let i = 0; i \u003c 3; i++)\n        if (x[i] > 0 && x[i] - y[i] > best + 1e-12) {\n          best = x[i] - y[i];\n          L = i;\n        }\n      S.lab[vid(b, c)] = L;\n    }\n}\n\nconst isDoor = (S, va, vb) => S.lab[va] + S.lab[vb] === 1;\nfunction rainbow(S, r) {\n  const [a, b, c] = corners(r), L = S.lab;\n  return L[a] !== L[b] && L[b] !== L[c] && L[a] !== L[c];\n}\n\n// Walk from room r, having come in through the wall behind which lies\n// `from`: leave by the other door each time. Ends in a rainbow room (end =\n// room) or out through a door in the base (end = -1).\nfunction walk(S, r, from, pts) {\n  const n = S.n;\n  for (let guard = 0; guard \u003c 2 * n * n + 2; guard++) {\n    S.seen[r] = 1;\n    const cs = corners(r);\n    pts.push(centroid(n, cs));\n    if (rainbow(S, r)) return r;\n    const ws = walls(r, n);\n    let out = null;\n    for (const w of ws) if (isDoor(S, w[0], w[1]) && w[2] !== from) out = w;\n    if (!out) return r;\n    pts.push(mid(n, out[0], out[1]));\n    if (out[2] \u003c 0) return -1;\n    from = r;\n    r = out[2];\n  }\n  return -1;\n}\n\n// Panel position of vertex v of an n-mesh.\nfunction vpos(n, v) {\n  const b = v % ST, c = (v - b) / ST;\n  return [P1x + (E2x * b + E3x * c) / n, P1y + (E2y * b + E3y * c) / n];\n}\nfunction centroid(n, cs) {\n  const a = vpos(n, cs[0]), b = vpos(n, cs[1]), c = vpos(n, cs[2]);\n  return [(a[0] + b[0] + c[0]) / 3, (a[1] + b[1] + c[1]) / 3];\n}\nfunction mid(n, va, vb) {\n  const a = vpos(n, va), b = vpos(n, vb);\n  return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n}\n\n// All the door walks: from each door in the base, then from each rainbow\n// room no walk has reached yet. The main walk is the leftmost one from the\n// base that ends in a rainbow room; there is always one, because the base\n// holds an odd number of doors and walks from the base pair them up two by\n// two except where they end in a rainbow room.\nfunction walkAll(S) {\n  const n = S.n;\n  S.seen.fill(0);\n  S.walks = [];\n  S.main = null;\n  S.rainbow = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = rid(i, 0, 0);\n    if (S.seen[r] || !isDoor(S, vid(i, 0), vid(i + 1, 0))) continue;\n    const pts = [mid(n, vid(i, 0), vid(i + 1, 0))], end = walk(S, r, -1, pts);\n    const w = { pts, end, base: true };\n    S.walks.push(w);\n    if (end >= 0 && !S.main) S.main = w;\n  }\n  for (let j = 0; j \u003c n; j++)\n    for (let i = 0; i + j \u003c n; i++)\n      for (let down = 0; down \u003c 2; down++) {\n        if (down && i + j > n - 2) continue;\n        const r = rid(i, j, down);\n        if (!rainbow(S, r)) continue;\n        S.rainbow.push(r);\n        if (S.seen[r]) continue;\n        // Its one door, and on from the room behind it.\n        S.seen[r] = 1;\n        const pts = [centroid(n, corners(r))];\n        let end = r;\n        for (const w of walls(r, n))\n          if (isDoor(S, w[0], w[1])) {\n            pts.push(mid(n, w[0], w[1]));\n            end = w[2] >= 0 ? walk(S, w[2], r, pts) : -1;\n          }\n        S.walks.push({ pts, end, base: false });\n      }\n}\n\nfunction lengthOf(pts) {\n  let L = 0;\n  for (let k = 1; k \u003c pts.length; k++) L += hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n  return L;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [12, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.n = round(cl(k[0], 12, NMAX));\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[2], 0, 1);\n  // Up to 0.06 no ripple, so the opening has one fixed point.\n  S.ripple = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  if (!S.begun) {\n    // Open some way into the run, further in the faster it goes, so Speed\n    // shows from the first second.\n    S.t = 4 * S.speed;\n    S.begun = true;\n  }\n  S.t += (d * S.speed) / 2;\n  S.head += d * S.speed * 18;\n  // The fixed point of the map without ripple wanders inside the triangle,\n  // its barycentric coordinates never under 0.12, round its loop in 14\n  // seconds at Speed 2.\n  const t = S.t, rr = 0.13 + 0.08 * sin(0.6 * t + 0.6), ph = 0.45 * t + 1.1;\n  const c1 = 1 / 3 + rr * cos(ph), c2 = 1 / 3 + rr * cos(ph - TAU / 3), c3 = 1 - c1 - c2;\n  S.cx = c2 - c1;\n  S.cy = R3 * c3;\n  // The push leans up to 60 degrees either side of straight at c, back and\n  // forth every 12.6 seconds at Speed 2.\n  S.turn = 1.05 * sin(0.5 * t);\n  label(S);\n  walkAll(S);\n}\n\n// Light the line buffer along a polyline, with brightness fn(s) at arc\n// length s.\nfunction stroke(S, pts, fn) {\n  const L = S.line;\n  let s = 0;\n  for (let k = 1; k \u003c pts.length; k++) {\n    const ax = pts[k - 1][0], ay = pts[k - 1][1], bx = pts[k][0], by = pts[k][1];\n    const ex = bx - ax, ey = by - ay, len = hypot(ex, ey);\n    if (len \u003c 1e-6) continue;\n    const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n    const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, u = cl((px * ex + py * ey) / (len * len), 0, 1);\n        const dd = hypot(px - u * ex, py - u * ey), a = cl(1.25 - dd, 0, 1);\n        if (a \u003c= 0) continue;\n        const v = a * fn(s + u * len), p = y * W + x;\n        if (v > L[p]) L[p] = v;\n      }\n    s += len;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  const { n, lab, R, G, B, line, hc, room } = S;\n  line.fill(0);\n  const isMainEnd = (r) => S.main && S.main.end === r;\n  const rb = new Set(S.rainbow);\n  // The territories, the mesh and the rainbow rooms.\n  const lw = 0.5 + 0.3 * (NMAX - n) / 16;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, X = x + 0.5 - P1x, Y = y + 0.5 - P1y;\n      const l2 = (X * E3y - Y * E3x) / DET, l3 = (E2x * Y - E2y * X) / DET, l1 = 1 - l2 - l3;\n      if (l1 \u003c -0.004 || l2 \u003c -0.004 || l3 \u003c -0.004) {\n        R[p] = G[p] = B[p] = 0;\n        room[p] = -1;\n        continue;\n      }\n      const u = cl(l2 * n, 0, n - 1e-6), v = cl(l3 * n, 0, n - 1e-6);\n      let i = floor(u), j = floor(v);\n      if (i + j > n - 1) j = n - 1 - i;\n      const fu = u - i, fv = v - j, down = fu + fv > 1 ? 1 : 0;\n      const r = rid(i, j, down), cs = corners(r);\n      const w = down ? [fu + fv - 1, 1 - fu, 1 - fv] : [1 - fu - fv, fu, fv];\n      // Each corner's share of the room: the part nearer it than the others,\n      // so every vertex sits in a cell of its own label's colour.\n      let m = 0;\n      if (w[1] > w[m]) m = 1;\n      if (w[2] > w[m]) m = 2;\n      const c = COL[lab[cs[m]]];\n      // Mesh lines: dark walls, about one LED wide.\n      const a1 = u - i, b1 = v - j, w1 = u + v - floor(u + v);\n      const dm = min(min(a1, 1 - a1) / (n * G2), min(b1, 1 - b1) / (n * G3), min(w1, 1 - w1) / (n * G1));\n      const wl = 1 - sm(0.2, 0.75, dm);\n      room[p] = r;\n      if (rb.has(r)) {\n        // A rainbow room: a spinning wheel of every hue inside white walls.\n        const ctr = centroid(n, cs), a = atan2(y + 0.5 - ctr[1], x + 0.5 - ctr[0]) / TAU;\n        hsv(a + S.t * 0.6, 0.85, 1, hc);\n        const k = isMainEnd(r) ? 0.9 : 0.6;\n        R[p] = 255 * (hc[0] + (k - hc[0]) * wl);\n        G[p] = 255 * (hc[1] + (k - hc[1]) * wl);\n        B[p] = 255 * (hc[2] + (k - hc[2]) * wl);\n        continue;\n      }\n      const wall = 1 - lw * wl;\n      R[p] = c[0] * wall * 255;\n      G[p] = c[1] * wall * 255;\n      B[p] = c[2] * wall * 255;\n    }\n  // The other walks dim; the main one brighter, with a head running from\n  // the base door into the rainbow room and a pause there before it runs again.\n  // Each walk is drawn from door to door and stops at the wall of a rainbow\n  // room, so the room's own colours stay clear.\n  const trim = (w) => w.pts.slice(w.base ? 0 : 1, w.end >= 0 ? w.pts.length - 1 : w.pts.length);\n  for (const w of S.walks) if (w !== S.main) stroke(S, trim(w), () => 0.42);\n  if (S.main) {\n    const pts = trim(S.main), L = lengthOf(pts), cyc = L + 30, hs = S.head % cyc;\n    stroke(S, pts, (s) => {\n      const back = hs - s;\n      return back \u003c 0 ? 0.62 : 0.62 + 0.38 * Math.exp(-back / 9);\n    });\n    // A soft glow rides with the head, GLOW LEDs round, so the run up the\n    // walk shows from across the room and not only on the thin line.\n    if (hs \u003c L) {\n      let s = 0, hx = pts[0][0], hy = pts[0][1];\n      for (let k = 1; k \u003c pts.length; k++) {\n        const ex = pts[k][0] - pts[k - 1][0], ey = pts[k][1] - pts[k - 1][1], len = hypot(ex, ey);\n        if (s + len >= hs) {\n          const u = len > 0 ? (hs - s) / len : 0;\n          hx = pts[k - 1][0] + u * ex;\n          hy = pts[k - 1][1] + u * ey;\n          break;\n        }\n        s += len;\n      }\n      for (let y = max(0, floor(hy - GLOW)); y \u003c= min(H - 1, floor(hy + GLOW)); y++)\n        for (let x = max(0, floor(hx - GLOW)); x \u003c= min(W - 1, floor(hx + GLOW)); x++) {\n          const dd = hypot(x + 0.5 - hx, y + 0.5 - hy) / GLOW, p = y * W + x;\n          if (dd >= 1 || room[p] \u003c 0 || rb.has(room[p])) continue;\n          const g = 0.7 * (1 - dd) * (1 - dd);\n          R[p] += (255 - R[p]) * g;\n          G[p] += (255 - G[p]) * g;\n          B[p] += (255 - B[p]) * g;\n        }\n    }\n    // A halo round the room the walk ends in, flaring as the head arrives.\n    const ctr = centroid(n, corners(S.main.end)), fl = hs > L ? Math.exp(-(hs - L) / 12) : 0;\n    const rad = 5 + 3 * fl + 60 / n, amp = 0.3 + 0.5 * fl;\n    for (let y = max(0, floor(ctr[1] - rad)); y \u003c= min(H - 1, floor(ctr[1] + rad)); y++)\n      for (let x = max(0, floor(ctr[0] - rad)); x \u003c= min(W - 1, floor(ctr[0] + rad)); x++) {\n        const dd = hypot(x + 0.5 - ctr[0], (y + 0.5 - ctr[1]) * 0.6) / rad;\n        if (dd >= 1) continue;\n        const g = amp * (1 - dd) * (1 - dd), p = y * W + x;\n        if (room[p] \u003c 0 || rb.has(room[p])) continue;\n        R[p] += (255 - R[p]) * g;\n        G[p] += (255 - G[p]) * g;\n        B[p] += (255 - B[p]) * g;\n      }\n  }\n  for (let p = 0; p \u003c W * H; p++) {\n    const a = line[p];\n    const r = R[p] * (1 - a) + 255 * a, g = G[p] * (1 - a) + 255 * a, b = B[p] * (1 - a) + 255 * a;\n    display.setPixel(p % W, (p / W) | 0, round(min(255, r)), round(min(255, g)), round(min(255, b)));\n  }\n}\n","layer":{"id":"layer-sperner-lemma","type":"code","name":"sperner-lemma","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sperner's Lemma\n// Family:  topology\n// Idea:    A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Sperner's lemma (Emanuel Sperner, 1928) and the Brouwer fixed-point theorem it proves (L. E. J. Brouwer, 1911), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1\n//\n// Knob 1: Mesh. Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves.\n// Knob 2: Speed. At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Swirl. Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in.\n// Knob 4: Ripple. Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two.\n\nconst W = 64, H = 128, NMAX = 28, ST = NMAX + 1;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, hypot, PI } = Math;\nconst TAU = 2 * PI, R3 = sqrt(3);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The big triangle on the panel, pixel centres at x + 0.5: corner 1 bottom\n// left, corner 2 bottom right, corner 3 the apex. The base is the 1-2 side.\nconst P1x = 0.5, P1y = 127.2, P2x = 63.5, P2y = 127.2, P3x = 32, P3y = 0.8;\nconst E2x = P2x - P1x, E2y = P2y - P1y, E3x = P3x - P1x, E3y = P3y - P1y, DET = E2x * E3y - E3x * E2y;\n// Length of the gradient of each barycentric coordinate, in units per LED:\n// the distance from a pixel to a mesh line is its offset over this.\nconst G2 = hypot(E3y, E3x) / abs(DET), G3 = hypot(E2y, E2x) / abs(DET);\nconst G1 = hypot(E3y - E2y, E2x - E3x) / abs(DET);\n\n// The map f is defined on an equilateral triangle, corners E1 = (-1, 0),\n// E2 = (1, 0), E3 = (0, sqrt 3): f(q) = q + d(q), pulled back into the\n// triangle by the nearest point, so f is continuous and maps the triangle\n// into itself. d turns round the fixed point c by an angle that grows by\n// SWIRL radians per unit of distance at Swirl 1, and is STEP long from R0\n// out, shrinking to nothing at c.\nconst STEP = 0.12, R0 = 0.35, SWIRL = 3.4;\n// Radius of the glow round the head of the walk, in LEDs.\nconst GLOW = 7;\n// The ripple: two waves added to d, up to RIP times STEP.\nconst RIP = 3.5;\n\n// Label colours: 1 azure, 2 rose, 3 green. Each at its own brightness\n// (brightest channel 0.85, 0.62 and 0.4 of full), so a room that changes\n// label changes in brightness too and not only in hue; green at 0.4 still\n// looks about as bright to the eye as azure at 0.85.\nconst COL = [\n  [0.12 * 0.85, 0.42 * 0.85, 0.85],\n  [0.62, 0.18 * 0.62, 0.3 * 0.62],\n  [0.2 * 0.4 / 0.95, 0.4, 0.28 * 0.4 / 0.95],\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 0, speed: 2, swirl: 0, ripple: 0, t: 0, head: 0, begun: false,\n    lab: new Int8Array(ST * ST), cx: 0, cy: 0, turn: 0,\n    walks: [], main: null, rainbow: [], seen: new Uint8Array(2 * NMAX * NMAX),\n    line: new Float32Array(W * H), room: new Int32Array(W * H), R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    y: [0, 0, 0], hc: [0, 0, 0],\n  };\n}\n\n// Vertex (b, c) of an n-mesh has barycentric coordinates (n - b - c, b, c) / n.\nconst vid = (b, c) => c * ST + b;\n\n// Rooms: up room (i, j) has corners (i, j), (i + 1, j), (i, j + 1); down room\n// (i, j) has corners (i + 1, j), (i, j + 1), (i + 1, j + 1).\nconst rid = (i, j, down) => 2 * (j * NMAX + i) + down;\nfunction corners(r) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  return down ? [vid(i + 1, j), vid(i, j + 1), vid(i + 1, j + 1)] : [vid(i, j), vid(i + 1, j), vid(i, j + 1)];\n}\n// The three walls of a room, each as its two corners and the room behind it\n// (-1 for the base, -2 for the other two sides).\nfunction walls(r, n) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  if (down)\n    return [\n      [vid(i + 1, j), vid(i, j + 1), rid(i, j, 0)],\n      [vid(i, j + 1), vid(i + 1, j + 1), rid(i, j + 1, 0)],\n      [vid(i + 1, j), vid(i + 1, j + 1), rid(i + 1, j, 0)],\n    ];\n  return [\n    [vid(i, j), vid(i + 1, j), j > 0 ? rid(i, j - 1, 1) : -1],\n    [vid(i, j), vid(i, j + 1), i > 0 ? rid(i - 1, j, 1) : -2],\n    [vid(i + 1, j), vid(i, j + 1), i + j \u003c n - 1 ? rid(i, j, 1) : -2],\n  ];\n}\n\n// The map at barycentric x, written into y as barycentric coordinates.\n// Near the sides the turn and the ripple fade out (over the band where the\n// smallest coordinate is under EDGE), so there d points at c and q + d stays\n// inside: f has no fixed point on the sides, only where d is zero inside.\nconst EDGE = 0.16;\nfunction f(S, x1, x2, x3, y) {\n  const mb = min(x1, x2, x3), qx = x2 - x1, qy = R3 * x3, inner = sm(0, EDGE, mb);\n  const dx = S.cx - qx, dy = S.cy - qy, r = hypot(dx, dy);\n  let gx = 0, gy = 0;\n  if (r > 1e-12) {\n    const psi = (S.turn + S.swirl * SWIRL * r) * inner, m = (STEP * min(r, R0)) / R0 / r, cs = cos(psi), sn = sin(psi);\n    gx = (dx * cs - dy * sn) * m;\n    gy = (dx * sn + dy * cs) * m;\n  }\n  if (S.ripple > 0) {\n    const a = S.ripple ** 0.6 * RIP * STEP * sm(0, EDGE / 2, mb), ph = S.t * 0.21;\n    gx += a * sin(5.3 * qx + 3.1 * qy + ph);\n    gy += a * sin(-4.4 * qx + 4.9 * qy + 1.9 - 0.8 * ph);\n  }\n  let px = qx + gx, py = qy + gy;\n  // Back into the triangle by the nearest point.\n  let z3 = py / R3, z2 = (1 - z3 + px) / 2, z1 = (1 - z3 - px) / 2;\n  if (z1 \u003c 0 || z2 \u003c 0 || z3 \u003c 0) {\n    let best = Infinity, bx = 0, by = 0;\n    const E = [-1, 0, 1, 0, 0, R3];\n    for (let e = 0; e \u003c 3; e++) {\n      const ax = E[2 * e], ay = E[2 * e + 1], ex = E[(2 * e + 2) % 6] - ax, ey = E[(2 * e + 3) % 6] - ay;\n      const t = cl(((px - ax) * ex + (py - ay) * ey) / (ex * ex + ey * ey), 0, 1), sx = ax + t * ex, sy = ay + t * ey;\n      const d2 = (px - sx) ** 2 + (py - sy) ** 2;\n      if (d2 \u003c best) {\n        best = d2;\n        bx = sx;\n        by = sy;\n      }\n    }\n    px = bx;\n    py = by;\n    z3 = max(0, py / R3);\n    z2 = max(0, (1 - z3 + px) / 2);\n    z1 = max(0, 1 - z2 - z3);\n  }\n  y[0] = z1;\n  y[1] = z2;\n  y[2] = z3;\n}\n\n// Label every vertex: of the coordinates that are not zero, the one f takes\n// down the most. Such a one always exists because both sum to 1, and a\n// coordinate that is zero is never chosen, so each corner gets its own label\n// and each side only its two corners' labels: a Sperner labelling.\nfunction label(S) {\n  const n = S.n, y = S.y;\n  for (let c = 0; c \u003c= n; c++)\n    for (let b = 0; b + c \u003c= n; b++) {\n      const a = n - b - c, x = [a / n, b / n, c / n];\n      f(S, x[0], x[1], x[2], y);\n      let best = -Infinity, L = 0;\n      for (let i = 0; i \u003c 3; i++)\n        if (x[i] > 0 && x[i] - y[i] > best + 1e-12) {\n          best = x[i] - y[i];\n          L = i;\n        }\n      S.lab[vid(b, c)] = L;\n    }\n}\n\nconst isDoor = (S, va, vb) => S.lab[va] + S.lab[vb] === 1;\nfunction rainbow(S, r) {\n  const [a, b, c] = corners(r), L = S.lab;\n  return L[a] !== L[b] && L[b] !== L[c] && L[a] !== L[c];\n}\n\n// Walk from room r, having come in through the wall behind which lies\n// `from`: leave by the other door each time. Ends in a rainbow room (end =\n// room) or out through a door in the base (end = -1).\nfunction walk(S, r, from, pts) {\n  const n = S.n;\n  for (let guard = 0; guard \u003c 2 * n * n + 2; guard++) {\n    S.seen[r] = 1;\n    const cs = corners(r);\n    pts.push(centroid(n, cs));\n    if (rainbow(S, r)) return r;\n    const ws = walls(r, n);\n    let out = null;\n    for (const w of ws) if (isDoor(S, w[0], w[1]) && w[2] !== from) out = w;\n    if (!out) return r;\n    pts.push(mid(n, out[0], out[1]));\n    if (out[2] \u003c 0) return -1;\n    from = r;\n    r = out[2];\n  }\n  return -1;\n}\n\n// Panel position of vertex v of an n-mesh.\nfunction vpos(n, v) {\n  const b = v % ST, c = (v - b) / ST;\n  return [P1x + (E2x * b + E3x * c) / n, P1y + (E2y * b + E3y * c) / n];\n}\nfunction centroid(n, cs) {\n  const a = vpos(n, cs[0]), b = vpos(n, cs[1]), c = vpos(n, cs[2]);\n  return [(a[0] + b[0] + c[0]) / 3, (a[1] + b[1] + c[1]) / 3];\n}\nfunction mid(n, va, vb) {\n  const a = vpos(n, va), b = vpos(n, vb);\n  return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n}\n\n// All the door walks: from each door in the base, then from each rainbow\n// room no walk has reached yet. The main walk is the leftmost one from the\n// base that ends in a rainbow room; there is always one, because the base\n// holds an odd number of doors and walks from the base pair them up two by\n// two except where they end in a rainbow room.\nfunction walkAll(S) {\n  const n = S.n;\n  S.seen.fill(0);\n  S.walks = [];\n  S.main = null;\n  S.rainbow = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = rid(i, 0, 0);\n    if (S.seen[r] || !isDoor(S, vid(i, 0), vid(i + 1, 0))) continue;\n    const pts = [mid(n, vid(i, 0), vid(i + 1, 0))], end = walk(S, r, -1, pts);\n    const w = { pts, end, base: true };\n    S.walks.push(w);\n    if (end >= 0 && !S.main) S.main = w;\n  }\n  for (let j = 0; j \u003c n; j++)\n    for (let i = 0; i + j \u003c n; i++)\n      for (let down = 0; down \u003c 2; down++) {\n        if (down && i + j > n - 2) continue;\n        const r = rid(i, j, down);\n        if (!rainbow(S, r)) continue;\n        S.rainbow.push(r);\n        if (S.seen[r]) continue;\n        // Its one door, and on from the room behind it.\n        S.seen[r] = 1;\n        const pts = [centroid(n, corners(r))];\n        let end = r;\n        for (const w of walls(r, n))\n          if (isDoor(S, w[0], w[1])) {\n            pts.push(mid(n, w[0], w[1]));\n            end = w[2] >= 0 ? walk(S, w[2], r, pts) : -1;\n          }\n        S.walks.push({ pts, end, base: false });\n      }\n}\n\nfunction lengthOf(pts) {\n  let L = 0;\n  for (let k = 1; k \u003c pts.length; k++) L += hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n  return L;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [12, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.n = round(cl(k[0], 12, NMAX));\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[2], 0, 1);\n  // Up to 0.06 no ripple, so the opening has one fixed point.\n  S.ripple = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  if (!S.begun) {\n    // Open some way into the run, further in the faster it goes, so Speed\n    // shows from the first second.\n    S.t = 4 * S.speed;\n    S.begun = true;\n  }\n  S.t += (d * S.speed) / 2;\n  S.head += d * S.speed * 18;\n  // The fixed point of the map without ripple wanders inside the triangle,\n  // its barycentric coordinates never under 0.12, round its loop in 14\n  // seconds at Speed 2.\n  const t = S.t, rr = 0.13 + 0.08 * sin(0.6 * t + 0.6), ph = 0.45 * t + 1.1;\n  const c1 = 1 / 3 + rr * cos(ph), c2 = 1 / 3 + rr * cos(ph - TAU / 3), c3 = 1 - c1 - c2;\n  S.cx = c2 - c1;\n  S.cy = R3 * c3;\n  // The push leans up to 60 degrees either side of straight at c, back and\n  // forth every 12.6 seconds at Speed 2.\n  S.turn = 1.05 * sin(0.5 * t);\n  label(S);\n  walkAll(S);\n}\n\n// Light the line buffer along a polyline, with brightness fn(s) at arc\n// length s.\nfunction stroke(S, pts, fn) {\n  const L = S.line;\n  let s = 0;\n  for (let k = 1; k \u003c pts.length; k++) {\n    const ax = pts[k - 1][0], ay = pts[k - 1][1], bx = pts[k][0], by = pts[k][1];\n    const ex = bx - ax, ey = by - ay, len = hypot(ex, ey);\n    if (len \u003c 1e-6) continue;\n    const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n    const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, u = cl((px * ex + py * ey) / (len * len), 0, 1);\n        const dd = hypot(px - u * ex, py - u * ey), a = cl(1.25 - dd, 0, 1);\n        if (a \u003c= 0) continue;\n        const v = a * fn(s + u * len), p = y * W + x;\n        if (v > L[p]) L[p] = v;\n      }\n    s += len;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  const { n, lab, R, G, B, line, hc, room } = S;\n  line.fill(0);\n  const isMainEnd = (r) => S.main && S.main.end === r;\n  const rb = new Set(S.rainbow);\n  // The territories, the mesh and the rainbow rooms.\n  const lw = 0.5 + 0.3 * (NMAX - n) / 16;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, X = x + 0.5 - P1x, Y = y + 0.5 - P1y;\n      const l2 = (X * E3y - Y * E3x) / DET, l3 = (E2x * Y - E2y * X) / DET, l1 = 1 - l2 - l3;\n      if (l1 \u003c -0.004 || l2 \u003c -0.004 || l3 \u003c -0.004) {\n        R[p] = G[p] = B[p] = 0;\n        room[p] = -1;\n        continue;\n      }\n      const u = cl(l2 * n, 0, n - 1e-6), v = cl(l3 * n, 0, n - 1e-6);\n      let i = floor(u), j = floor(v);\n      if (i + j > n - 1) j = n - 1 - i;\n      const fu = u - i, fv = v - j, down = fu + fv > 1 ? 1 : 0;\n      const r = rid(i, j, down), cs = corners(r);\n      const w = down ? [fu + fv - 1, 1 - fu, 1 - fv] : [1 - fu - fv, fu, fv];\n      // Each corner's share of the room: the part nearer it than the others,\n      // so every vertex sits in a cell of its own label's colour.\n      let m = 0;\n      if (w[1] > w[m]) m = 1;\n      if (w[2] > w[m]) m = 2;\n      const c = COL[lab[cs[m]]];\n      // Mesh lines: dark walls, about one LED wide.\n      const a1 = u - i, b1 = v - j, w1 = u + v - floor(u + v);\n      const dm = min(min(a1, 1 - a1) / (n * G2), min(b1, 1 - b1) / (n * G3), min(w1, 1 - w1) / (n * G1));\n      const wl = 1 - sm(0.2, 0.75, dm);\n      room[p] = r;\n      if (rb.has(r)) {\n        // A rainbow room: a spinning wheel of every hue inside white walls.\n        const ctr = centroid(n, cs), a = atan2(y + 0.5 - ctr[1], x + 0.5 - ctr[0]) / TAU;\n        hsv(a + S.t * 0.6, 0.85, 1, hc);\n        const k = isMainEnd(r) ? 0.9 : 0.6;\n        R[p] = 255 * (hc[0] + (k - hc[0]) * wl);\n        G[p] = 255 * (hc[1] + (k - hc[1]) * wl);\n        B[p] = 255 * (hc[2] + (k - hc[2]) * wl);\n        continue;\n      }\n      const wall = 1 - lw * wl;\n      R[p] = c[0] * wall * 255;\n      G[p] = c[1] * wall * 255;\n      B[p] = c[2] * wall * 255;\n    }\n  // The other walks dim; the main one brighter, with a head running from\n  // the base door into the rainbow room and a pause there before it runs again.\n  // Each walk is drawn from door to door and stops at the wall of a rainbow\n  // room, so the room's own colours stay clear.\n  const trim = (w) => w.pts.slice(w.base ? 0 : 1, w.end >= 0 ? w.pts.length - 1 : w.pts.length);\n  for (const w of S.walks) if (w !== S.main) stroke(S, trim(w), () => 0.42);\n  if (S.main) {\n    const pts = trim(S.main), L = lengthOf(pts), cyc = L + 30, hs = S.head % cyc;\n    stroke(S, pts, (s) => {\n      const back = hs - s;\n      return back \u003c 0 ? 0.62 : 0.62 + 0.38 * Math.exp(-back / 9);\n    });\n    // A soft glow rides with the head, GLOW LEDs round, so the run up the\n    // walk shows from across the room and not only on the thin line.\n    if (hs \u003c L) {\n      let s = 0, hx = pts[0][0], hy = pts[0][1];\n      for (let k = 1; k \u003c pts.length; k++) {\n        const ex = pts[k][0] - pts[k - 1][0], ey = pts[k][1] - pts[k - 1][1], len = hypot(ex, ey);\n        if (s + len >= hs) {\n          const u = len > 0 ? (hs - s) / len : 0;\n          hx = pts[k - 1][0] + u * ex;\n          hy = pts[k - 1][1] + u * ey;\n          break;\n        }\n        s += len;\n      }\n      for (let y = max(0, floor(hy - GLOW)); y \u003c= min(H - 1, floor(hy + GLOW)); y++)\n        for (let x = max(0, floor(hx - GLOW)); x \u003c= min(W - 1, floor(hx + GLOW)); x++) {\n          const dd = hypot(x + 0.5 - hx, y + 0.5 - hy) / GLOW, p = y * W + x;\n          if (dd >= 1 || room[p] \u003c 0 || rb.has(room[p])) continue;\n          const g = 0.7 * (1 - dd) * (1 - dd);\n          R[p] += (255 - R[p]) * g;\n          G[p] += (255 - G[p]) * g;\n          B[p] += (255 - B[p]) * g;\n        }\n    }\n    // A halo round the room the walk ends in, flaring as the head arrives.\n    const ctr = centroid(n, corners(S.main.end)), fl = hs > L ? Math.exp(-(hs - L) / 12) : 0;\n    const rad = 5 + 3 * fl + 60 / n, amp = 0.3 + 0.5 * fl;\n    for (let y = max(0, floor(ctr[1] - rad)); y \u003c= min(H - 1, floor(ctr[1] + rad)); y++)\n      for (let x = max(0, floor(ctr[0] - rad)); x \u003c= min(W - 1, floor(ctr[0] + rad)); x++) {\n        const dd = hypot(x + 0.5 - ctr[0], (y + 0.5 - ctr[1]) * 0.6) / rad;\n        if (dd >= 1) continue;\n        const g = amp * (1 - dd) * (1 - dd), p = y * W + x;\n        if (room[p] \u003c 0 || rb.has(room[p])) continue;\n        R[p] += (255 - R[p]) * g;\n        G[p] += (255 - G[p]) * g;\n        B[p] += (255 - B[p]) * g;\n      }\n  }\n  for (let p = 0; p \u003c W * H; p++) {\n    const a = line[p];\n    const r = R[p] * (1 - a) + 255 * a, g = G[p] * (1 - a) + 255 * a, b = B[p] * (1 - a) + 255 * a;\n    display.setPixel(p % W, (p / W) | 0, round(min(255, r)), round(min(255, g)), round(min(255, b)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mesh","min":12,"max":28,"about":"Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Swirl","min":0,"max":1,"about":"Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in."},{"name":"Ripple","min":0,"max":1,"about":"Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two."}],"start":[12,2,0,0.06],"measures":{"motion":0.0411,"detail":0.0869,"edges":0.6362,"complexity":0.5552,"coverage":0.4564,"colour":0.2811,"drift":0.0451},"knobResponse":[0.0654,0.0563,0.0533,0.0518]},{"slug":"sponge-blend","title":"Sponge Blend","family":"cosmetic","round":31,"note":"옅은 바탕에 산호색 줄 하나가 그어지고, 보이지 않는 촉촉한 스펀지가 줄을 따라 1초에 여섯 번쯤 두드려 고운 구멍 자국을 찍으며 색을 바깥으로 펴요. 15초쯤이면 선이 넓은 점묘 그러데이션이 되고, 닦아 내고 다시 그어요. K1 은 색상환을 다 돌고, 누르면 새 줄을 그어요.","idea":"A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.","buttons":"K1 tap lays a fresh stripe of colour for the sponge to blend out.","code":"// ===== Patternflow pattern =====\n// Title:   Sponge Blend\n// Family:  cosmetic\n// Idea:    A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after foundation blended out with a damp makeup sponge\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1\n//\n// Knob 1: Hue. The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown.\n// Knob 2: Speed. How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower.\n// Knob 3: Coverage. How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab.\n// Knob 4: Grain. How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish.\n// Buttons: K1 tap lays a fresh stripe of colour for the sponge to blend out.\n\nconst W = 64, H = 128, N = W * H;\nconst TS = 128, TN = TS * TS;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sponge's pores: three tiles of noise blurred over 3, 5 and 7 LEDs, 128\n// LEDs square and wrapping, each LED's value turned into its rank 0..255.\n// Cutting a tile at rank 128 gives cells from two to four LEDs across, half of\n// them touching; cutting it lower leaves only the cores, small and sparse.\nlet TILES = null;\nfunction tiles() {\n  const out = [];\n  const raw = Float32Array.from({ length: TN }, (_, i) => hash(i + 911) - 0.5);\n  for (let r = 1; r \u003c= 3; r++) {\n    const b = new Float32Array(TN);\n    for (let y = 0; y \u003c TS; y++)\n      for (let x = 0; x \u003c TS; x++) {\n        let s = 0;\n        for (let dy = -r; dy \u003c= r; dy++) for (let dx = -r; dx \u003c= r; dx++) s += raw[((y + dy) & (TS - 1)) * TS + ((x + dx) & (TS - 1))];\n        b[y * TS + x] = s;\n      }\n    const order = Array.from({ length: TN }, (_, i) => i).sort((p, q) => b[p] - b[q]);\n    const rank = new Uint8Array(TN);\n    order.forEach((i, k) => (rank[i] = (k * 256) / TN));\n    out.push(rank);\n  }\n  return out;\n}\n\n// The base's grain is a fine checker: every other LED sits half a step above\n// the base and the rest half a step below, so neighbouring LEDs always differ\n// by about the same 28 to 41 levels and nothing reads as an outline. AMP is\n// each LED's own share of that step. The pores of a print are soft dips\n// spread over three LEDs, a few levels a LED, so they never cut an edge.\nconst AMP = Float32Array.from({ length: N }, (_, i) => 0.78 + 0.34 * hash(i + 4242));\nconst ODD = Uint8Array.from({ length: N }, (_, i) => ((i % W) + floor(i / W)) & 1);\nconst STEP = 0.175;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    A: F(N), c: F(N), pm: new Uint8Array(N), cn: F(N), sh: F(N), dist: F(N).fill(99), su: F(N),\n    phase: 0, pt: 0, lay: 0, len: 100, pts: F(98), u: 0, dir: 1, pass: 0, side: 1, load: 0, dabT: 0, n: 0,\n    hue: 0, speed: 2, cov: 0, grain: 0.06, started: false, col: F(6), T: 0,\n  };\n}\n\n// A new stripe: a gentle curve down most of the panel, or anywhere when\n// laid by hand. Every LED's distance from it and the place along it nearest\n// are kept for laying it on and for walking the sponge along it.\nfunction stripe(S, free) {\n  const r = Math.random;\n  let x0, y0, x1, y1;\n  if (free) {\n    const a = r() * PI, l = 50 + r() * 50, cx = 16 + r() * 32, cy = 30 + r() * 68;\n    x0 = cx - (cos(a) * l) / 2;\n    y0 = cy - (sin(a) * l) / 2;\n    x1 = cx + (cos(a) * l) / 2;\n    y1 = cy + (sin(a) * l) / 2;\n  } else {\n    x0 = 14 + r() * 36;\n    y0 = 8 + r() * 10;\n    x1 = 14 + r() * 36;\n    y1 = 110 + r() * 10;\n  }\n  const nx = -(y1 - y0), ny = x1 - x0, nl = sqrt(nx * nx + ny * ny) || 1, bend = (r() - 0.5) * 24;\n  const mx = (x0 + x1) / 2 + (nx / nl) * bend, my = (y0 + y1) / 2 + (ny / nl) * bend;\n  const P = S.pts;\n  let len = 0;\n  for (let k = 0; k \u003c 49; k++) {\n    const t = k / 48, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n    P[k * 2] = a * x0 + b * mx + c * x1;\n    P[k * 2 + 1] = a * y0 + b * my + c * y1;\n    if (k) len += Math.hypot(P[k * 2] - P[k * 2 - 2], P[k * 2 + 1] - P[k * 2 - 1]);\n  }\n  S.len = len;\n  S.wid = 11 + r() * 3;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let best = 1e9, bu = 0;\n      for (let k = 0; k \u003c 48; k++) {\n        const ax = P[k * 2], ay = P[k * 2 + 1], bx = P[k * 2 + 2] - ax, by = P[k * 2 + 3] - ay;\n        const t = cl(((x + 0.5 - ax) * bx + (y + 0.5 - ay) * by) / (bx * bx + by * by + 1e-6), 0, 1);\n        const dx = x + 0.5 - ax - bx * t, dy = y + 0.5 - ay - by * t, d = dx * dx + dy * dy;\n        if (d \u003c best) (best = d), (bu = (k + t) / 48);\n      }\n      S.dist[i] = sqrt(best);\n      S.su[i] = bu;\n    }\n  S.phase = 1;\n  S.lay = 0;\n  S.u = 0;\n  S.dir = 1;\n  S.pass = 0;\n  S.load = 0.3;\n}\n\n// Where the sponge comes down next: back and forth along the stripe, a step\n// at a time, zig-zagging to either side and further out with each pass.\nconst REACH = [6, 10, 14, 18, 12];\nfunction target(S) {\n  const P = S.pts, u = cl(S.u, 0, 1), k = min(47, floor(u * 48)), t = u * 48 - k;\n  const x = P[k * 2] + (P[k * 2 + 2] - P[k * 2]) * t, y = P[k * 2 + 1] + (P[k * 2 + 3] - P[k * 2 + 1]) * t;\n  const tx = P[k * 2 + 2] - P[k * 2], ty = P[k * 2 + 3] - P[k * 2 + 1], tl = sqrt(tx * tx + ty * ty) || 1;\n  const off = S.side * REACH[S.pass % REACH.length] * (0.2 + 0.8 * Math.random());\n  return [x - (ty / tl) * off + (Math.random() - 0.5) * 3, y + (tx / tl) * off + (Math.random() - 0.5) * 3];\n}\n\n// One dab: the sponge's touching cells give and take colour until each holds\n// nearer the patch's mean, with a little of what the sponge still carries\n// from the last dab, so the colour is dragged along the way it bounces. The\n// sponge soaks up a little each time, so a stripe thins as it spreads. The\n// print shows the touching cells as pores of deeper colour: all of them on a\n// fresh patch, and only their cores, smaller and fewer, each time the same\n// spot is dabbed again, until the patch is a smooth finish with fine pores.\nfunction dab(S, cx, cy) {\n  const cov = S.cov, R = 10 + 3 * cov, ox = floor(Math.random() * TS), oy = floor(Math.random() * TS);\n  const g = S.grain, tile = TILES[min(2, floor(g * 3))], rate = 0.7 + 0.25 * cov;\n  // A coarse sponge prints more and bigger pores, and prints them in thinner colour.\n  const fr = 0.36 + 0.24 * g, lo = 0.25 - 0.13 * g;\n  const A = S.A, pm = S.pm, cn = S.cn, sh = S.sh, C = S.c;\n  const E = R * 1.25, x0 = max(0, floor(cx - E)), x1 = min(W - 1, floor(cx + E)), y0 = max(0, floor(cy - E)), y1 = min(H - 1, floor(cy + E));\n  const p1 = Math.random() * 2 * PI, p2 = Math.random() * 2 * PI;\n  let sum = 0, area = 0;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy, th = Math.atan2(dy, dx), i = y * W + x;\n      // The sponge's tip is not a perfect circle, and turns from dab to dab.\n      const d = sqrt(dx * dx + dy * dy) / (R * (1 + 0.13 * sin(2 * th + p1) + 0.08 * sin(3 * th + p2)));\n      if (d >= 1) {\n        C[i] = 0;\n        continue;\n      }\n      const w = 1 - sm((d - 0.45) / 0.55);\n      const rk = tile[((y + oy) & (TS - 1)) * TS + ((x + ox) & (TS - 1))];\n      const c = w * (rk \u003c 128 ? 1 : 0.15) * rate;\n      C[i] = c;\n      sum += c * A[i];\n      area += c;\n      cn[i] += w;\n      sh[i] = max(sh[i], w);\n      // The print, except at the very rim where the sponge barely touched.\n      // Pores only show where colour sits, fewer the more it was dabbed.\n      if (w > 0.3 || hash(i + S.n * 131) \u003c w * 3) pm[i] = A[i] > lo && rk \u003c 256 * max(0.12, fr * exp(-cn[i] / 4)) ? 1 : 0;\n    }\n  if (area \u003c= 0) return;\n  const mean = sum / area, carry = 0.75 * mean + 0.25 * S.load;\n  S.load = mean;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, i = y * W + x0; x \u003c= x1; x++, i++) {\n      const c = C[i];\n      if (c > 0) A[i] = (A[i] + (carry - A[i]) * c) * (1 - 0.05 * c);\n    }\n  S.n++;\n}\n\nfunction stepT(S, st) {\n  if (S.phase === 1) {\n    // Laying the stripe on, top to bottom, in about a second.\n    S.lay = min(1, S.lay + st * 1.1);\n    const w2 = S.wid / 2, A = S.A;\n    for (let i = 0; i \u003c N; i++) {\n      const f = (S.lay - S.su[i]) * S.len;\n      if (f \u003c= 0) continue;\n      // A soft shoulder three LEDs wide on each side and at the tip, never a cliff.\n      const v = (1 - sm((S.dist[i] - w2 + 1.5) / 3)) * sm(f / 3);\n      if (v > A[i]) A[i] = v;\n    }\n    if (S.lay >= 1) {\n      S.phase = 2;\n      S.pt = 0;\n      S.dabT = 0.15;\n    }\n    return;\n  }\n  if (S.phase === 2) {\n    S.pt += st;\n    S.dabT -= st;\n    if (S.dabT \u003c= 0) {\n      S.dabT += 0.17 * (0.85 + 0.3 * Math.random());\n      const [x, y] = target(S);\n      dab(S, x, y);\n      S.side = -S.side;\n      S.u += (S.dir * 6.5) / S.len;\n      if (S.u > 1 || S.u \u003c 0) {\n        S.dir = -S.dir;\n        S.u = cl(S.u, 0, 1);\n        S.pass++;\n      }\n    }\n    if (S.pass >= REACH.length) {\n      S.phase = 3;\n      S.pt = 0;\n    }\n    return;\n  }\n  if (S.phase === 3) {\n    // A slow wipe from the top takes the colour off; then the next stripe.\n    S.pt += st;\n    const edge = S.pt * 110 - 10, A = S.A, cn = S.cn;\n    for (let y = 0; y \u003c H; y++) {\n      const k = cl((edge - y) / 12, 0, 1) * 0.25;\n      if (k \u003c= 0) break;\n      for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n        A[i] *= 1 - k;\n        cn[i] *= 1 - k;\n        if (A[i] \u003c 0.25) S.pm[i] = 0;\n      }\n    }\n    if (S.pt > 1.6) stripe(S, false);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.cov = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    if (!TILES) TILES = tiles();\n    // Open with the stripe more than half laid on.\n    stripe(S, false);\n    for (let i = 0; i \u003c 12; i++) stepT(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    stripe(S, true);\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  stepT(S, st);\n  // The wet shine dries in real time, over a second or two, so a fast sponge\n  // leaves several at once.\n  const fade = exp(-d * 1.4);\n  for (let i = 0; i \u003c N; i++) S.sh[i] *= fade;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const A = S.A, pm = S.pm, sh = S.sh, col = S.col;\n  const h = S.hue + 0.05, cov = S.cov;\n  // The base: a pale ivory with a breath of the hue. The colour: the hue at\n  // nearly the same brightness, so the blend shows as colour on a steady grain.\n  // Orange and gold read brown when dim, so round them the colour is lifted.\n  const hf = h - floor(h), wm = sm((hf - 0.03) / 0.05) * (1 - sm((hf - 0.15) / 0.07));\n  hsv(h, 0.06, 212, col, 0);\n  hsv(h, 0.5 + 0.18 * cov + 0.1 * wm, 208 + 18 * wm, col, 3);\n  // The damp canvas catches the light: two broad soft bands of sheen, about\n  // 18 levels at most and 35 LEDs wide, glide down it at 18 LEDs a second,\n  // tilted a little. They change by under a level from LED to LED, so they\n  // add no edge.\n  const cyc = H + 104, b0 = ((S.T * 18) % cyc) - 52, b1 = ((S.T * 18 + cyc / 2) % cyc) - 52;\n  // Grain also roughens the base: the checker's step grows by half from 0 to 1.\n  const g = S.grain, op = 0.65 + 0.35 * cov, dip = 0.05 + 0.03 * g, gs = STEP * (0.9 + 0.55 * g);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const sy = y + (x - 32) * 0.35, e0 = (sy - b0) / 15, e1 = (sy - b1) / 15;\n      const glow = 0.085 * (exp(-e0 * e0 * 0.5) + exp(-e1 * e1 * 0.5));\n      // How much pore is round this LED, 0..1 over its 3x3 neighbourhood.\n      let pv = 0;\n      for (let yy = max(0, y - 1); yy \u003c= min(H - 1, y + 1); yy++) for (let xx = max(0, x - 1), j = yy * W + xx; xx \u003c= min(W - 1, x + 1); xx++, j++) pv += pm[j];\n      pv /= 9;\n      // A pore holds more colour and sits a little deeper. A fresh dab is\n      // wet for a moment: its colour reads deeper and the base a touch\n      // brighter, then it dries back.\n      const ac = sqrt(cl(A[i], 0, 1)), wet = sh[i];\n      const a = min(1, ac * op * (1 + 0.45 * wet) + 0.45 * pv);\n      const l = 1 + glow + 0.08 * wet - dip * pv + gs * AMP[i] * (ODD[i] ? -0.5 : 0.5);\n      display.setPixel(x, y, (col[0] + (col[3] - col[0]) * a) * l, (col[1] + (col[4] - col[1]) * a) * l, (col[2] + (col[5] - col[2]) * a) * l);\n    }\n}\n","layer":{"id":"layer-sponge-blend","type":"code","name":"sponge-blend","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sponge Blend\n// Family:  cosmetic\n// Idea:    A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after foundation blended out with a damp makeup sponge\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1\n//\n// Knob 1: Hue. The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown.\n// Knob 2: Speed. How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower.\n// Knob 3: Coverage. How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab.\n// Knob 4: Grain. How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish.\n// Buttons: K1 tap lays a fresh stripe of colour for the sponge to blend out.\n\nconst W = 64, H = 128, N = W * H;\nconst TS = 128, TN = TS * TS;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sponge's pores: three tiles of noise blurred over 3, 5 and 7 LEDs, 128\n// LEDs square and wrapping, each LED's value turned into its rank 0..255.\n// Cutting a tile at rank 128 gives cells from two to four LEDs across, half of\n// them touching; cutting it lower leaves only the cores, small and sparse.\nlet TILES = null;\nfunction tiles() {\n  const out = [];\n  const raw = Float32Array.from({ length: TN }, (_, i) => hash(i + 911) - 0.5);\n  for (let r = 1; r \u003c= 3; r++) {\n    const b = new Float32Array(TN);\n    for (let y = 0; y \u003c TS; y++)\n      for (let x = 0; x \u003c TS; x++) {\n        let s = 0;\n        for (let dy = -r; dy \u003c= r; dy++) for (let dx = -r; dx \u003c= r; dx++) s += raw[((y + dy) & (TS - 1)) * TS + ((x + dx) & (TS - 1))];\n        b[y * TS + x] = s;\n      }\n    const order = Array.from({ length: TN }, (_, i) => i).sort((p, q) => b[p] - b[q]);\n    const rank = new Uint8Array(TN);\n    order.forEach((i, k) => (rank[i] = (k * 256) / TN));\n    out.push(rank);\n  }\n  return out;\n}\n\n// The base's grain is a fine checker: every other LED sits half a step above\n// the base and the rest half a step below, so neighbouring LEDs always differ\n// by about the same 28 to 41 levels and nothing reads as an outline. AMP is\n// each LED's own share of that step. The pores of a print are soft dips\n// spread over three LEDs, a few levels a LED, so they never cut an edge.\nconst AMP = Float32Array.from({ length: N }, (_, i) => 0.78 + 0.34 * hash(i + 4242));\nconst ODD = Uint8Array.from({ length: N }, (_, i) => ((i % W) + floor(i / W)) & 1);\nconst STEP = 0.175;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    A: F(N), c: F(N), pm: new Uint8Array(N), cn: F(N), sh: F(N), dist: F(N).fill(99), su: F(N),\n    phase: 0, pt: 0, lay: 0, len: 100, pts: F(98), u: 0, dir: 1, pass: 0, side: 1, load: 0, dabT: 0, n: 0,\n    hue: 0, speed: 2, cov: 0, grain: 0.06, started: false, col: F(6), T: 0,\n  };\n}\n\n// A new stripe: a gentle curve down most of the panel, or anywhere when\n// laid by hand. Every LED's distance from it and the place along it nearest\n// are kept for laying it on and for walking the sponge along it.\nfunction stripe(S, free) {\n  const r = Math.random;\n  let x0, y0, x1, y1;\n  if (free) {\n    const a = r() * PI, l = 50 + r() * 50, cx = 16 + r() * 32, cy = 30 + r() * 68;\n    x0 = cx - (cos(a) * l) / 2;\n    y0 = cy - (sin(a) * l) / 2;\n    x1 = cx + (cos(a) * l) / 2;\n    y1 = cy + (sin(a) * l) / 2;\n  } else {\n    x0 = 14 + r() * 36;\n    y0 = 8 + r() * 10;\n    x1 = 14 + r() * 36;\n    y1 = 110 + r() * 10;\n  }\n  const nx = -(y1 - y0), ny = x1 - x0, nl = sqrt(nx * nx + ny * ny) || 1, bend = (r() - 0.5) * 24;\n  const mx = (x0 + x1) / 2 + (nx / nl) * bend, my = (y0 + y1) / 2 + (ny / nl) * bend;\n  const P = S.pts;\n  let len = 0;\n  for (let k = 0; k \u003c 49; k++) {\n    const t = k / 48, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n    P[k * 2] = a * x0 + b * mx + c * x1;\n    P[k * 2 + 1] = a * y0 + b * my + c * y1;\n    if (k) len += Math.hypot(P[k * 2] - P[k * 2 - 2], P[k * 2 + 1] - P[k * 2 - 1]);\n  }\n  S.len = len;\n  S.wid = 11 + r() * 3;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let best = 1e9, bu = 0;\n      for (let k = 0; k \u003c 48; k++) {\n        const ax = P[k * 2], ay = P[k * 2 + 1], bx = P[k * 2 + 2] - ax, by = P[k * 2 + 3] - ay;\n        const t = cl(((x + 0.5 - ax) * bx + (y + 0.5 - ay) * by) / (bx * bx + by * by + 1e-6), 0, 1);\n        const dx = x + 0.5 - ax - bx * t, dy = y + 0.5 - ay - by * t, d = dx * dx + dy * dy;\n        if (d \u003c best) (best = d), (bu = (k + t) / 48);\n      }\n      S.dist[i] = sqrt(best);\n      S.su[i] = bu;\n    }\n  S.phase = 1;\n  S.lay = 0;\n  S.u = 0;\n  S.dir = 1;\n  S.pass = 0;\n  S.load = 0.3;\n}\n\n// Where the sponge comes down next: back and forth along the stripe, a step\n// at a time, zig-zagging to either side and further out with each pass.\nconst REACH = [6, 10, 14, 18, 12];\nfunction target(S) {\n  const P = S.pts, u = cl(S.u, 0, 1), k = min(47, floor(u * 48)), t = u * 48 - k;\n  const x = P[k * 2] + (P[k * 2 + 2] - P[k * 2]) * t, y = P[k * 2 + 1] + (P[k * 2 + 3] - P[k * 2 + 1]) * t;\n  const tx = P[k * 2 + 2] - P[k * 2], ty = P[k * 2 + 3] - P[k * 2 + 1], tl = sqrt(tx * tx + ty * ty) || 1;\n  const off = S.side * REACH[S.pass % REACH.length] * (0.2 + 0.8 * Math.random());\n  return [x - (ty / tl) * off + (Math.random() - 0.5) * 3, y + (tx / tl) * off + (Math.random() - 0.5) * 3];\n}\n\n// One dab: the sponge's touching cells give and take colour until each holds\n// nearer the patch's mean, with a little of what the sponge still carries\n// from the last dab, so the colour is dragged along the way it bounces. The\n// sponge soaks up a little each time, so a stripe thins as it spreads. The\n// print shows the touching cells as pores of deeper colour: all of them on a\n// fresh patch, and only their cores, smaller and fewer, each time the same\n// spot is dabbed again, until the patch is a smooth finish with fine pores.\nfunction dab(S, cx, cy) {\n  const cov = S.cov, R = 10 + 3 * cov, ox = floor(Math.random() * TS), oy = floor(Math.random() * TS);\n  const g = S.grain, tile = TILES[min(2, floor(g * 3))], rate = 0.7 + 0.25 * cov;\n  // A coarse sponge prints more and bigger pores, and prints them in thinner colour.\n  const fr = 0.36 + 0.24 * g, lo = 0.25 - 0.13 * g;\n  const A = S.A, pm = S.pm, cn = S.cn, sh = S.sh, C = S.c;\n  const E = R * 1.25, x0 = max(0, floor(cx - E)), x1 = min(W - 1, floor(cx + E)), y0 = max(0, floor(cy - E)), y1 = min(H - 1, floor(cy + E));\n  const p1 = Math.random() * 2 * PI, p2 = Math.random() * 2 * PI;\n  let sum = 0, area = 0;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy, th = Math.atan2(dy, dx), i = y * W + x;\n      // The sponge's tip is not a perfect circle, and turns from dab to dab.\n      const d = sqrt(dx * dx + dy * dy) / (R * (1 + 0.13 * sin(2 * th + p1) + 0.08 * sin(3 * th + p2)));\n      if (d >= 1) {\n        C[i] = 0;\n        continue;\n      }\n      const w = 1 - sm((d - 0.45) / 0.55);\n      const rk = tile[((y + oy) & (TS - 1)) * TS + ((x + ox) & (TS - 1))];\n      const c = w * (rk \u003c 128 ? 1 : 0.15) * rate;\n      C[i] = c;\n      sum += c * A[i];\n      area += c;\n      cn[i] += w;\n      sh[i] = max(sh[i], w);\n      // The print, except at the very rim where the sponge barely touched.\n      // Pores only show where colour sits, fewer the more it was dabbed.\n      if (w > 0.3 || hash(i + S.n * 131) \u003c w * 3) pm[i] = A[i] > lo && rk \u003c 256 * max(0.12, fr * exp(-cn[i] / 4)) ? 1 : 0;\n    }\n  if (area \u003c= 0) return;\n  const mean = sum / area, carry = 0.75 * mean + 0.25 * S.load;\n  S.load = mean;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, i = y * W + x0; x \u003c= x1; x++, i++) {\n      const c = C[i];\n      if (c > 0) A[i] = (A[i] + (carry - A[i]) * c) * (1 - 0.05 * c);\n    }\n  S.n++;\n}\n\nfunction stepT(S, st) {\n  if (S.phase === 1) {\n    // Laying the stripe on, top to bottom, in about a second.\n    S.lay = min(1, S.lay + st * 1.1);\n    const w2 = S.wid / 2, A = S.A;\n    for (let i = 0; i \u003c N; i++) {\n      const f = (S.lay - S.su[i]) * S.len;\n      if (f \u003c= 0) continue;\n      // A soft shoulder three LEDs wide on each side and at the tip, never a cliff.\n      const v = (1 - sm((S.dist[i] - w2 + 1.5) / 3)) * sm(f / 3);\n      if (v > A[i]) A[i] = v;\n    }\n    if (S.lay >= 1) {\n      S.phase = 2;\n      S.pt = 0;\n      S.dabT = 0.15;\n    }\n    return;\n  }\n  if (S.phase === 2) {\n    S.pt += st;\n    S.dabT -= st;\n    if (S.dabT \u003c= 0) {\n      S.dabT += 0.17 * (0.85 + 0.3 * Math.random());\n      const [x, y] = target(S);\n      dab(S, x, y);\n      S.side = -S.side;\n      S.u += (S.dir * 6.5) / S.len;\n      if (S.u > 1 || S.u \u003c 0) {\n        S.dir = -S.dir;\n        S.u = cl(S.u, 0, 1);\n        S.pass++;\n      }\n    }\n    if (S.pass >= REACH.length) {\n      S.phase = 3;\n      S.pt = 0;\n    }\n    return;\n  }\n  if (S.phase === 3) {\n    // A slow wipe from the top takes the colour off; then the next stripe.\n    S.pt += st;\n    const edge = S.pt * 110 - 10, A = S.A, cn = S.cn;\n    for (let y = 0; y \u003c H; y++) {\n      const k = cl((edge - y) / 12, 0, 1) * 0.25;\n      if (k \u003c= 0) break;\n      for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n        A[i] *= 1 - k;\n        cn[i] *= 1 - k;\n        if (A[i] \u003c 0.25) S.pm[i] = 0;\n      }\n    }\n    if (S.pt > 1.6) stripe(S, false);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.cov = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    if (!TILES) TILES = tiles();\n    // Open with the stripe more than half laid on.\n    stripe(S, false);\n    for (let i = 0; i \u003c 12; i++) stepT(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    stripe(S, true);\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  stepT(S, st);\n  // The wet shine dries in real time, over a second or two, so a fast sponge\n  // leaves several at once.\n  const fade = exp(-d * 1.4);\n  for (let i = 0; i \u003c N; i++) S.sh[i] *= fade;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const A = S.A, pm = S.pm, sh = S.sh, col = S.col;\n  const h = S.hue + 0.05, cov = S.cov;\n  // The base: a pale ivory with a breath of the hue. The colour: the hue at\n  // nearly the same brightness, so the blend shows as colour on a steady grain.\n  // Orange and gold read brown when dim, so round them the colour is lifted.\n  const hf = h - floor(h), wm = sm((hf - 0.03) / 0.05) * (1 - sm((hf - 0.15) / 0.07));\n  hsv(h, 0.06, 212, col, 0);\n  hsv(h, 0.5 + 0.18 * cov + 0.1 * wm, 208 + 18 * wm, col, 3);\n  // The damp canvas catches the light: two broad soft bands of sheen, about\n  // 18 levels at most and 35 LEDs wide, glide down it at 18 LEDs a second,\n  // tilted a little. They change by under a level from LED to LED, so they\n  // add no edge.\n  const cyc = H + 104, b0 = ((S.T * 18) % cyc) - 52, b1 = ((S.T * 18 + cyc / 2) % cyc) - 52;\n  // Grain also roughens the base: the checker's step grows by half from 0 to 1.\n  const g = S.grain, op = 0.65 + 0.35 * cov, dip = 0.05 + 0.03 * g, gs = STEP * (0.9 + 0.55 * g);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const sy = y + (x - 32) * 0.35, e0 = (sy - b0) / 15, e1 = (sy - b1) / 15;\n      const glow = 0.085 * (exp(-e0 * e0 * 0.5) + exp(-e1 * e1 * 0.5));\n      // How much pore is round this LED, 0..1 over its 3x3 neighbourhood.\n      let pv = 0;\n      for (let yy = max(0, y - 1); yy \u003c= min(H - 1, y + 1); yy++) for (let xx = max(0, x - 1), j = yy * W + xx; xx \u003c= min(W - 1, x + 1); xx++, j++) pv += pm[j];\n      pv /= 9;\n      // A pore holds more colour and sits a little deeper. A fresh dab is\n      // wet for a moment: its colour reads deeper and the base a touch\n      // brighter, then it dries back.\n      const ac = sqrt(cl(A[i], 0, 1)), wet = sh[i];\n      const a = min(1, ac * op * (1 + 0.45 * wet) + 0.45 * pv);\n      const l = 1 + glow + 0.08 * wet - dip * pv + gs * AMP[i] * (ODD[i] ? -0.5 : 0.5);\n      display.setPixel(x, y, (col[0] + (col[3] - col[0]) * a) * l, (col[1] + (col[4] - col[1]) * a) * l, (col[2] + (col[5] - col[2]) * a) * l);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower."},{"name":"Coverage","min":0,"max":1,"about":"How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab."},{"name":"Grain","min":0,"max":1,"about":"How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish."}],"start":[0,2,0,0.06],"measures":{"motion":0.0318,"detail":0.1277,"edges":0.0012,"complexity":1.8672,"coverage":1,"colour":0.1441,"drift":0.0382},"knobResponse":[0.095,0.0521,0.043,0.0383]},{"slug":"sprout","title":"Sprout","family":"growth","round":1,"note":"한 LED 씩 자라는 픽셀 들꽃밭이에요. 키 큰 접시꽃 둘이 패널 위쪽까지 올라가 꽃대 아래부터 피어요. 시든 꽃잎은 한 점씩 떨어져 발치에 쌓이고, 시드는 포기 곁에서 새 싹이 올라와요.","idea":"Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.","buttons":"K1 tap sows a seed now.","code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","layer":{"id":"layer-sprout","type":"code","name":"sprout","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The flower colour; each plant takes a shade either side of it."},{"name":"Grow","min":0.25,"max":6,"about":"How fast the tips climb, and with it how soon a plant flowers, withers and makes room."},{"name":"Branches","min":3,"max":14,"about":"How many tips a plant may have, from a stem with two side shoots to a small tree."},{"name":"Wind","min":-1,"max":1,"about":"Leans new growth and sways the tops; left of centre it blows the other way."}],"start":[0,2,3,0.06],"measures":{"motion":0.0426,"detail":0.1141,"edges":0.9949,"complexity":0.1635,"coverage":0.1685,"colour":0.2652,"drift":0.0313},"knobResponse":[0.0448,0.119,0.1279,0.0982]},{"slug":"stadium-billiard","title":"Stadium Billiard","family":"physics","round":28,"note":"공 이백 개가 방향을 1000분의 3 라디안 안에서만 달리해 한 점에서 흰 구슬 하나로 떠나요. 패널만 한 부니모비치 경기장의 둥근 끝이 구슬을 무지개 선으로 늘이고 접어서, 몇 초 만에 공들이 기체처럼 판을 채워요. K3 을 돌리면 탁자가 원이 되어 공이 흩어지지 않고, 누르면 새 무리가 떠나요.","idea":"Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.","buttons":"K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.","code":"// ===== Patternflow pattern =====\n// Title:   Stadium Billiard\n// Family:  physics\n// Idea:    Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Bunimovich stadium (Leonid Bunimovich, 1974), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1\n//\n// Knob 1: Hue. Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back.\n// Knob 2: Speed. At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots.\n// Knob 3: Round. At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up.\n// Knob 4: Trail. How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it.\n// Buttons: K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64, R = 32;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two hundred balls, launched with headings spread over FAN radians. VEL\n// LEDs a second per unit of Speed; TAU the shortest trail's time constant.\n// After CYCLE LEDs of flight the gas gathers for GATHER seconds and a new\n// bunch leaves. The cloth and its edge sit just under the 24/255 an LED\n// needs to count as lit, so the table shows on the panel as a faint shape.\nconst NB = 200;\nconst FAN = 3e-3, VEL = 62.5, TAU = 0.035;\nconst CYCLE = 1900, GATHER = 0.9;\nconst CLOTH = 0.075, RIM = 0.094;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nfunction inside(a, x, y, m) {\n  if (abs(y) \u003c= a) return abs(x) \u003c= R - m;\n  const cy = y > 0 ? a : -a;\n  return x * x + (y - cy) * (y - cy) \u003c= (R - m) * (R - m);\n}\n\n// Where along (dx, dy) a ball at (x, y) meets the wall, and the wall's\n// normal there.\nconst HIT = [0, 0, 0];\nfunction hit(a, x, y, dx, dy) {\n  let t = Infinity, nx = 0, ny = 0;\n  if (dx > 1e-12) {\n    const u = (R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = 1), (ny = 0);\n  } else if (dx \u003c -1e-12) {\n    const u = (-R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = -1), (ny = 0);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    const cy = s * a, py = y - cy, b = x * dx + py * dy, c = x * x + py * py - R * R, d = b * b - c;\n    if (d \u003c 0) continue;\n    const u = -b + sqrt(d);\n    if (u \u003c= 1e-9 || u >= t) continue;\n    const hy = y + u * dy - cy;\n    if (s * hy \u003c -1e-6) continue;\n    t = u;\n    nx = (x + u * dx) / R;\n    ny = hy / R;\n  }\n  HIT[0] = t;\n  HIT[1] = nx;\n  HIT[2] = ny;\n}\n\n// Lights the LEDs a ball passes between (x0, y0) and (x1, y1), each once,\n// w0 at the start fading up to w1 at the end.\nfunction trail(P, i, x0, y0, x1, y1, w0, w1) {\n  const n = max(1, ceil(sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)) / 0.6)), buf = P.buf, c = i * 3;\n  const cr = P.col[c], cg = P.col[c + 1], cb = P.col[c + 2];\n  for (let j = 1; j \u003c= n; j++) {\n    const t = j / n, X = floor(x0 + (x1 - x0) * t + CX), Y = floor(y0 + (y1 - y0) * t + CY);\n    const p = cl(Y, 0, H - 1) * W + cl(X, 0, W - 1);\n    if (p === P.lastp) continue;\n    P.lastp = p;\n    const w = w0 + (w1 - w0) * t, q = p * 3;\n    buf[q] += cr * w;\n    buf[q + 1] += cg * w;\n    buf[q + 2] += cb * w;\n  }\n}\n\n// Ball i flies s LEDs, bouncing off the walls exactly.\nfunction fly(P, i, s, w0, w1) {\n  const a = P.a;\n  let x = P.x[i], y = P.y[i], dx = P.dx[i], dy = P.dy[i], done = 0;\n  for (let k = 0; k \u003c 24 && done \u003c s; k++) {\n    hit(a, x, y, dx, dy);\n    // Every ray from inside meets the wall; a ball that finds none has been\n    // left outside, and goes back to the middle.\n    if (HIT[0] === Infinity && !inside(a, x, y, -0.5)) (x = 0), (y = 0);\n    const bounce = HIT[0] \u003c s - done, t = bounce ? HIT[0] : s - done;\n    const x1 = x + t * dx, y1 = y + t * dy;\n    trail(P, i, x, y, x1, y1, w0 + ((w1 - w0) * done) / s, w0 + ((w1 - w0) * (done + t)) / s);\n    x = x1;\n    y = y1;\n    done = bounce ? done + t : s;\n    if (bounce) {\n      const nx = HIT[1], ny = HIT[2], d = dx * nx + dy * ny;\n      dx -= 2 * d * nx;\n      dy -= 2 * d * ny;\n    }\n  }\n  P.x[i] = x;\n  P.y[i] = y;\n  P.dx[i] = dx;\n  P.dy[i] = dy;\n}\n\n// How far apart the two edge balls of a bunch launched from (x, y) at\n// angle th are after flying s LEDs.\nfunction split(a, x, y, th, s) {\n  const e = [];\n  for (const o of [-FAN / 2, FAN / 2]) {\n    let px = x, py = y, dx = cos(th + o), dy = sin(th + o), done = 0;\n    for (let k = 0; k \u003c 200 && done \u003c s; k++) {\n      hit(a, px, py, dx, dy);\n      if (HIT[0] >= s - done) {\n        px += (s - done) * dx;\n        py += (s - done) * dy;\n        break;\n      }\n      px += HIT[0] * dx;\n      py += HIT[0] * dy;\n      done += HIT[0];\n      const d = dx * HIT[1] + dy * HIT[2];\n      dx -= 2 * d * HIT[1];\n      dy -= 2 * d * HIT[2];\n    }\n    e.push(px, py);\n  }\n  return sqrt((e[0] - e[2]) ** 2 + (e[1] - e[3]) ** 2);\n}\n\n// A new launch: of sixteen spots and headings, the one whose bunch holds\n// together for the first 250 LEDs of flight and is furthest apart after 400\n// and 550, two and three and a half seconds at the opening speed. Headings\n// stay at least 30 degrees off the bouncing-ball orbits that run straight\n// across between the flat sides and take their time to come apart.\nfunction pick(P) {\n  const a = P.a;\n  let best = [0, 0, PI / 3], bd = -2;\n  for (let k = 0; k \u003c 16; k++) {\n    const x = (Math.random() * 2 - 1) * 20, y = (Math.random() * 2 - 1) * (a + 16);\n    if (!inside(a, x, y, 6)) continue;\n    let th = (0.17 + Math.random() * 0.3) * PI;\n    if (Math.random() \u003c 0.5) th = -th;\n    if (Math.random() \u003c 0.5) th = PI - th;\n    const d = a \u003c 4 ? 0 : split(a, x, y, th, 250) \u003c 6 ? split(a, x, y, th, 400) + split(a, x, y, th, 550) : -1;\n    if (d > bd) (bd = d), (best = [x, y, th]);\n  }\n  return best;\n}\n\nfunction launch(P, x, y, th) {\n  if (!inside(P.a, x, y, 1)) (x = 0), (y = 0);\n  for (let i = 0; i \u003c NB; i++) {\n    const t = th + FAN * (i / (NB - 1) - 0.5);\n    P.x[i] = x;\n    P.y[i] = y;\n    P.dx[i] = cos(t);\n    P.dy[i] = sin(t);\n  }\n  P.run = 0;\n  P.g = -1;\n}\n\n// The cloth: 1 on the table, 2 on its edge, 0 in the corners outside it.\nfunction table(P) {\n  const a = P.a, m = P.cloth;\n  for (let p = 0; p \u003c N; p++) m[p] = inside(a, (p % W) + 0.5 - CX, ((p / W) | 0) + 0.5 - CY, 0) ? 1 : 0;\n  const put = (x, y) => (m[cl(floor(y + CY), 0, H - 1) * W + cl(floor(x + CX), 0, W - 1)] = 2);\n  for (let y = -a; y \u003c= a; y += 0.5) put(-R + 0.01, y), put(R - 0.01, y);\n  for (let k = 0; k \u003c= 400; k++) {\n    const t = (k / 400) * PI, x = R * cos(t) * 0.9997, y = R * sin(t) * 0.9997;\n    put(x, a + y);\n    put(x, -a - y);\n  }\n}\n\nexport function setup(params) {\n  const F64 = (n) => new Float64Array(n);\n  params.s = {\n    x: F64(NB), y: F64(NB), dx: F64(NB), dy: F64(NB), gx: F64(NB), gy: F64(NB),\n    col: new Float32Array(NB * 3), buf: new Float32Array(N * 3), img: new Float32Array(N * 3),\n    a: 32, cloth: new Uint8Array(N), run: 0, g: -1, L: null, lastp: -1, hue: NaN, tint: [0, 0, 0, 0, 0, 0],\n  };\n  table(params.s);\n  launch(params.s, -19.9, 11.2, 2.389);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const v = VEL * cl(k[1], 0.2, 3), tr = cl(k[3], 0, 1), tau = TAU + 2.2 * tr * tr;\n  const f = exp(-d / tau), B = min(1, 0.07 / tau);\n  // Each ball keeps its place in the fan as a colour, six tenths of the\n  // wheel from one edge to the other, so the bead is white where they all\n  // overlap and the line it stretches into is a rainbow. The cloth turns\n  // from teal to violet and back and is never a dim orange, which reads brown.\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    for (let i = 0; i \u003c NB; i++) hsv(k[0] + 0.5 + 0.6 * (i / (NB - 1) - 0.5), 1, 1, P.col, i * 3);\n    const c = 0.52 + 0.28 * sin(PI * k[0]) ** 2;\n    hsv(c, 0.75, CLOTH, P.tint, 0);\n    hsv(c, 0.6, RIM, P.tint, 3);\n  }\n\n  // The table: two half circles of radius 32 joined by straight sides 2a long.\n  const a = 32 * (1 - cl(k[2], 0, 1));\n  if (abs(a - P.a) > 1e-6) {\n    P.a = a;\n    table(P);\n    for (let i = 0; i \u003c NB; i++) {\n      let x = P.x[i], y = P.y[i];\n      if (inside(a, x, y, 0.01)) continue;\n      const cy = abs(y) \u003c= a ? y : y > 0 ? a : -a, ox = x, oy = y - cy, r = sqrt(ox * ox + oy * oy) || 1;\n      x = (ox / r) * (R - 0.02);\n      y = cy + (oy / r) * (R - 0.02);\n      const nx = ox / r, ny = oy / r, dd = P.dx[i] * nx + P.dy[i] * ny;\n      if (dd > 0) (P.dx[i] -= 2 * dd * nx), (P.dy[i] -= 2 * dd * ny);\n      P.x[i] = x;\n      P.y[i] = y;\n    }\n  }\n\n  const buf = P.buf;\n  for (let q = 0; q \u003c N * 3; q++) buf[q] *= f;\n  if (P.g >= 0 && !inside(a, P.L[0], P.L[1], 1)) (P.L[0] = 0), (P.L[1] = 0);\n\n  if (P.g \u003c 0 && ((input.btnPressed && input.btnPressed[0]) || P.run > CYCLE)) {\n    P.L = pick(P);\n    P.g = 0;\n    P.gx.set(P.x);\n    P.gy.set(P.y);\n  }\n  if (P.g >= 0) {\n    // Gathering: every ball runs straight to the next launch spot.\n    const u0 = P.g / GATHER, u1 = min(1, (P.g + d) / GATHER);\n    const e0 = u0 * u0 * (3 - 2 * u0), e1 = u1 * u1 * (3 - 2 * u1), [lx, ly, th] = P.L;\n    for (let i = 0; i \u003c NB; i++) {\n      const x0 = P.gx[i] + (lx - P.gx[i]) * e0, y0 = P.gy[i] + (ly - P.gy[i]) * e0;\n      const x1 = P.gx[i] + (lx - P.gx[i]) * e1, y1 = P.gy[i] + (ly - P.gy[i]) * e1;\n      P.lastp = -1;\n      trail(P, i, x0, y0, x1, y1, B * f, B);\n      P.x[i] = x1;\n      P.y[i] = y1;\n    }\n    P.g += d;\n    if (u1 >= 1) launch(P, lx, ly, th);\n  } else if (d > 0) {\n    const s = v * d;\n    for (let i = 0; i \u003c NB; i++) {\n      P.lastp = -1;\n      fly(P, i, s, B * f, B);\n    }\n    P.run += s;\n  }\n  // Where the whole bunch passes at once the light piles up; capped, the\n  // bead's tail is no longer than a lone ball's.\n  for (let q = 0; q \u003c N * 3; q++) if (buf[q] > 1.5) buf[q] = 1.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const img = P.img, col = P.col, t = P.tint, m = P.cloth, buf = P.buf;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const o = m[p] === 2 ? 3 : 0, c = m[p] ? 1 : 0;\n    img[q] = max(buf[q], t[o] * c);\n    img[q + 1] = max(buf[q + 1], t[o + 1] * c);\n    img[q + 2] = max(buf[q + 2], t[o + 2] * c);\n  }\n  for (let i = 0; i \u003c NB; i++) {\n    const q = (cl(floor(P.y[i] + CY), 0, H - 1) * W + cl(floor(P.x[i] + CX), 0, W - 1)) * 3, c = i * 3;\n    img[q] += col[c];\n    img[q + 1] += col[c + 1];\n    img[q + 2] += col[c + 2];\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, img[q] * 255) | 0, min(255, img[q + 1] * 255) | 0, min(255, img[q + 2] * 255) | 0);\n  }\n}\n","layer":{"id":"layer-stadium-billiard","type":"code","name":"stadium-billiard","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Stadium Billiard\n// Family:  physics\n// Idea:    Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Bunimovich stadium (Leonid Bunimovich, 1974), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1\n//\n// Knob 1: Hue. Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back.\n// Knob 2: Speed. At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots.\n// Knob 3: Round. At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up.\n// Knob 4: Trail. How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it.\n// Buttons: K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64, R = 32;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two hundred balls, launched with headings spread over FAN radians. VEL\n// LEDs a second per unit of Speed; TAU the shortest trail's time constant.\n// After CYCLE LEDs of flight the gas gathers for GATHER seconds and a new\n// bunch leaves. The cloth and its edge sit just under the 24/255 an LED\n// needs to count as lit, so the table shows on the panel as a faint shape.\nconst NB = 200;\nconst FAN = 3e-3, VEL = 62.5, TAU = 0.035;\nconst CYCLE = 1900, GATHER = 0.9;\nconst CLOTH = 0.075, RIM = 0.094;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nfunction inside(a, x, y, m) {\n  if (abs(y) \u003c= a) return abs(x) \u003c= R - m;\n  const cy = y > 0 ? a : -a;\n  return x * x + (y - cy) * (y - cy) \u003c= (R - m) * (R - m);\n}\n\n// Where along (dx, dy) a ball at (x, y) meets the wall, and the wall's\n// normal there.\nconst HIT = [0, 0, 0];\nfunction hit(a, x, y, dx, dy) {\n  let t = Infinity, nx = 0, ny = 0;\n  if (dx > 1e-12) {\n    const u = (R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = 1), (ny = 0);\n  } else if (dx \u003c -1e-12) {\n    const u = (-R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = -1), (ny = 0);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    const cy = s * a, py = y - cy, b = x * dx + py * dy, c = x * x + py * py - R * R, d = b * b - c;\n    if (d \u003c 0) continue;\n    const u = -b + sqrt(d);\n    if (u \u003c= 1e-9 || u >= t) continue;\n    const hy = y + u * dy - cy;\n    if (s * hy \u003c -1e-6) continue;\n    t = u;\n    nx = (x + u * dx) / R;\n    ny = hy / R;\n  }\n  HIT[0] = t;\n  HIT[1] = nx;\n  HIT[2] = ny;\n}\n\n// Lights the LEDs a ball passes between (x0, y0) and (x1, y1), each once,\n// w0 at the start fading up to w1 at the end.\nfunction trail(P, i, x0, y0, x1, y1, w0, w1) {\n  const n = max(1, ceil(sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)) / 0.6)), buf = P.buf, c = i * 3;\n  const cr = P.col[c], cg = P.col[c + 1], cb = P.col[c + 2];\n  for (let j = 1; j \u003c= n; j++) {\n    const t = j / n, X = floor(x0 + (x1 - x0) * t + CX), Y = floor(y0 + (y1 - y0) * t + CY);\n    const p = cl(Y, 0, H - 1) * W + cl(X, 0, W - 1);\n    if (p === P.lastp) continue;\n    P.lastp = p;\n    const w = w0 + (w1 - w0) * t, q = p * 3;\n    buf[q] += cr * w;\n    buf[q + 1] += cg * w;\n    buf[q + 2] += cb * w;\n  }\n}\n\n// Ball i flies s LEDs, bouncing off the walls exactly.\nfunction fly(P, i, s, w0, w1) {\n  const a = P.a;\n  let x = P.x[i], y = P.y[i], dx = P.dx[i], dy = P.dy[i], done = 0;\n  for (let k = 0; k \u003c 24 && done \u003c s; k++) {\n    hit(a, x, y, dx, dy);\n    // Every ray from inside meets the wall; a ball that finds none has been\n    // left outside, and goes back to the middle.\n    if (HIT[0] === Infinity && !inside(a, x, y, -0.5)) (x = 0), (y = 0);\n    const bounce = HIT[0] \u003c s - done, t = bounce ? HIT[0] : s - done;\n    const x1 = x + t * dx, y1 = y + t * dy;\n    trail(P, i, x, y, x1, y1, w0 + ((w1 - w0) * done) / s, w0 + ((w1 - w0) * (done + t)) / s);\n    x = x1;\n    y = y1;\n    done = bounce ? done + t : s;\n    if (bounce) {\n      const nx = HIT[1], ny = HIT[2], d = dx * nx + dy * ny;\n      dx -= 2 * d * nx;\n      dy -= 2 * d * ny;\n    }\n  }\n  P.x[i] = x;\n  P.y[i] = y;\n  P.dx[i] = dx;\n  P.dy[i] = dy;\n}\n\n// How far apart the two edge balls of a bunch launched from (x, y) at\n// angle th are after flying s LEDs.\nfunction split(a, x, y, th, s) {\n  const e = [];\n  for (const o of [-FAN / 2, FAN / 2]) {\n    let px = x, py = y, dx = cos(th + o), dy = sin(th + o), done = 0;\n    for (let k = 0; k \u003c 200 && done \u003c s; k++) {\n      hit(a, px, py, dx, dy);\n      if (HIT[0] >= s - done) {\n        px += (s - done) * dx;\n        py += (s - done) * dy;\n        break;\n      }\n      px += HIT[0] * dx;\n      py += HIT[0] * dy;\n      done += HIT[0];\n      const d = dx * HIT[1] + dy * HIT[2];\n      dx -= 2 * d * HIT[1];\n      dy -= 2 * d * HIT[2];\n    }\n    e.push(px, py);\n  }\n  return sqrt((e[0] - e[2]) ** 2 + (e[1] - e[3]) ** 2);\n}\n\n// A new launch: of sixteen spots and headings, the one whose bunch holds\n// together for the first 250 LEDs of flight and is furthest apart after 400\n// and 550, two and three and a half seconds at the opening speed. Headings\n// stay at least 30 degrees off the bouncing-ball orbits that run straight\n// across between the flat sides and take their time to come apart.\nfunction pick(P) {\n  const a = P.a;\n  let best = [0, 0, PI / 3], bd = -2;\n  for (let k = 0; k \u003c 16; k++) {\n    const x = (Math.random() * 2 - 1) * 20, y = (Math.random() * 2 - 1) * (a + 16);\n    if (!inside(a, x, y, 6)) continue;\n    let th = (0.17 + Math.random() * 0.3) * PI;\n    if (Math.random() \u003c 0.5) th = -th;\n    if (Math.random() \u003c 0.5) th = PI - th;\n    const d = a \u003c 4 ? 0 : split(a, x, y, th, 250) \u003c 6 ? split(a, x, y, th, 400) + split(a, x, y, th, 550) : -1;\n    if (d > bd) (bd = d), (best = [x, y, th]);\n  }\n  return best;\n}\n\nfunction launch(P, x, y, th) {\n  if (!inside(P.a, x, y, 1)) (x = 0), (y = 0);\n  for (let i = 0; i \u003c NB; i++) {\n    const t = th + FAN * (i / (NB - 1) - 0.5);\n    P.x[i] = x;\n    P.y[i] = y;\n    P.dx[i] = cos(t);\n    P.dy[i] = sin(t);\n  }\n  P.run = 0;\n  P.g = -1;\n}\n\n// The cloth: 1 on the table, 2 on its edge, 0 in the corners outside it.\nfunction table(P) {\n  const a = P.a, m = P.cloth;\n  for (let p = 0; p \u003c N; p++) m[p] = inside(a, (p % W) + 0.5 - CX, ((p / W) | 0) + 0.5 - CY, 0) ? 1 : 0;\n  const put = (x, y) => (m[cl(floor(y + CY), 0, H - 1) * W + cl(floor(x + CX), 0, W - 1)] = 2);\n  for (let y = -a; y \u003c= a; y += 0.5) put(-R + 0.01, y), put(R - 0.01, y);\n  for (let k = 0; k \u003c= 400; k++) {\n    const t = (k / 400) * PI, x = R * cos(t) * 0.9997, y = R * sin(t) * 0.9997;\n    put(x, a + y);\n    put(x, -a - y);\n  }\n}\n\nexport function setup(params) {\n  const F64 = (n) => new Float64Array(n);\n  params.s = {\n    x: F64(NB), y: F64(NB), dx: F64(NB), dy: F64(NB), gx: F64(NB), gy: F64(NB),\n    col: new Float32Array(NB * 3), buf: new Float32Array(N * 3), img: new Float32Array(N * 3),\n    a: 32, cloth: new Uint8Array(N), run: 0, g: -1, L: null, lastp: -1, hue: NaN, tint: [0, 0, 0, 0, 0, 0],\n  };\n  table(params.s);\n  launch(params.s, -19.9, 11.2, 2.389);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const v = VEL * cl(k[1], 0.2, 3), tr = cl(k[3], 0, 1), tau = TAU + 2.2 * tr * tr;\n  const f = exp(-d / tau), B = min(1, 0.07 / tau);\n  // Each ball keeps its place in the fan as a colour, six tenths of the\n  // wheel from one edge to the other, so the bead is white where they all\n  // overlap and the line it stretches into is a rainbow. The cloth turns\n  // from teal to violet and back and is never a dim orange, which reads brown.\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    for (let i = 0; i \u003c NB; i++) hsv(k[0] + 0.5 + 0.6 * (i / (NB - 1) - 0.5), 1, 1, P.col, i * 3);\n    const c = 0.52 + 0.28 * sin(PI * k[0]) ** 2;\n    hsv(c, 0.75, CLOTH, P.tint, 0);\n    hsv(c, 0.6, RIM, P.tint, 3);\n  }\n\n  // The table: two half circles of radius 32 joined by straight sides 2a long.\n  const a = 32 * (1 - cl(k[2], 0, 1));\n  if (abs(a - P.a) > 1e-6) {\n    P.a = a;\n    table(P);\n    for (let i = 0; i \u003c NB; i++) {\n      let x = P.x[i], y = P.y[i];\n      if (inside(a, x, y, 0.01)) continue;\n      const cy = abs(y) \u003c= a ? y : y > 0 ? a : -a, ox = x, oy = y - cy, r = sqrt(ox * ox + oy * oy) || 1;\n      x = (ox / r) * (R - 0.02);\n      y = cy + (oy / r) * (R - 0.02);\n      const nx = ox / r, ny = oy / r, dd = P.dx[i] * nx + P.dy[i] * ny;\n      if (dd > 0) (P.dx[i] -= 2 * dd * nx), (P.dy[i] -= 2 * dd * ny);\n      P.x[i] = x;\n      P.y[i] = y;\n    }\n  }\n\n  const buf = P.buf;\n  for (let q = 0; q \u003c N * 3; q++) buf[q] *= f;\n  if (P.g >= 0 && !inside(a, P.L[0], P.L[1], 1)) (P.L[0] = 0), (P.L[1] = 0);\n\n  if (P.g \u003c 0 && ((input.btnPressed && input.btnPressed[0]) || P.run > CYCLE)) {\n    P.L = pick(P);\n    P.g = 0;\n    P.gx.set(P.x);\n    P.gy.set(P.y);\n  }\n  if (P.g >= 0) {\n    // Gathering: every ball runs straight to the next launch spot.\n    const u0 = P.g / GATHER, u1 = min(1, (P.g + d) / GATHER);\n    const e0 = u0 * u0 * (3 - 2 * u0), e1 = u1 * u1 * (3 - 2 * u1), [lx, ly, th] = P.L;\n    for (let i = 0; i \u003c NB; i++) {\n      const x0 = P.gx[i] + (lx - P.gx[i]) * e0, y0 = P.gy[i] + (ly - P.gy[i]) * e0;\n      const x1 = P.gx[i] + (lx - P.gx[i]) * e1, y1 = P.gy[i] + (ly - P.gy[i]) * e1;\n      P.lastp = -1;\n      trail(P, i, x0, y0, x1, y1, B * f, B);\n      P.x[i] = x1;\n      P.y[i] = y1;\n    }\n    P.g += d;\n    if (u1 >= 1) launch(P, lx, ly, th);\n  } else if (d > 0) {\n    const s = v * d;\n    for (let i = 0; i \u003c NB; i++) {\n      P.lastp = -1;\n      fly(P, i, s, B * f, B);\n    }\n    P.run += s;\n  }\n  // Where the whole bunch passes at once the light piles up; capped, the\n  // bead's tail is no longer than a lone ball's.\n  for (let q = 0; q \u003c N * 3; q++) if (buf[q] > 1.5) buf[q] = 1.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const img = P.img, col = P.col, t = P.tint, m = P.cloth, buf = P.buf;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const o = m[p] === 2 ? 3 : 0, c = m[p] ? 1 : 0;\n    img[q] = max(buf[q], t[o] * c);\n    img[q + 1] = max(buf[q + 1], t[o + 1] * c);\n    img[q + 2] = max(buf[q + 2], t[o + 2] * c);\n  }\n  for (let i = 0; i \u003c NB; i++) {\n    const q = (cl(floor(P.y[i] + CY), 0, H - 1) * W + cl(floor(P.x[i] + CX), 0, W - 1)) * 3, c = i * 3;\n    img[q] += col[c];\n    img[q + 1] += col[c + 1];\n    img[q + 2] += col[c + 2];\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, img[q] * 255) | 0, min(255, img[q + 1] * 255) | 0, min(255, img[q + 2] * 255) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots."},{"name":"Round","min":0,"max":1,"about":"At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up."},{"name":"Trail","min":0,"max":1,"about":"How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it."}],"start":[0,2,0,0.06],"measures":{"motion":2.3616,"detail":0.0707,"edges":0.5768,"complexity":0.586,"coverage":0.1863,"colour":0.2492,"drift":0.1225},"knobResponse":[0.0382,0.064,0.0378,0.0449]},{"slug":"stained-glass","title":"Stained Glass","family":"glass","round":18,"note":"고딕 첨두 창이 세운 패널을 다 채워요. 뾰족한 머리의 장미창과 몸통의 생명나무가 검은 납선에 끼운 보석빛 유리 조각으로 짜여 있고, 창 뒤로 해가 지나가면 그 쪽 조각이 희게 타오르고 구름 그림자가 지나가면 어두워져요. K3 은 유리를 자른 크기라서, 돌리면 테두리 네모와 마름모가 잘아지고 장미 꽃잎이 여덟 장에서 열두 장이 돼요.","idea":"A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","layer":{"id":"layer-stained-glass","type":"code","name":"stained-glass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glass","min":0,"max":1,"about":"Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves."},{"name":"Pieces","min":1,"max":4,"about":"How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8."},{"name":"Clouds","min":0,"max":1,"about":"At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches."}],"start":[0,2,1,0.06],"measures":{"motion":0.0274,"detail":0.1501,"edges":0.9911,"complexity":1.9492,"coverage":0.4248,"colour":0.2313,"drift":0.0531},"knobResponse":[0.1334,0.0459,0.0844,0.0693]},{"slug":"star-trails","title":"Star Trails","family":"celestial","round":12,"note":"삼각대에 세운 카메라가 셔터를 열어 둔 사이 하늘이 돌아서, 별마다 북극 둘레에 제 색의 호를 그려요. 능선 아래에는 랜턴을 켠 텐트가 있고, 가끔 떨어지는 별똥별은 궤적만큼 사진에 남아요. K1 을 누르면 별똥별이 하나 더 떨어져요.","idea":"A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.","buttons":"K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","layer":{"id":"layer-star-trails","type":"code","name":"star-trails","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Facing","min":-1,"max":1,"about":"Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes."},{"name":"Latitude","min":-1,"max":1,"about":"Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground."},{"name":"Exposure","min":0,"max":1,"about":"How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles."}],"start":[0,2,0,0.06],"measures":{"motion":0.019,"detail":0.0909,"edges":0.5036,"complexity":1.5537,"coverage":0.563,"colour":0.1007,"drift":0.036},"knobResponse":[0.2496,0.0367,0.1859,0.2144]},{"slug":"steiner-chain","title":"Steiner Chain","family":"geometry","round":39,"note":"위에서는 고리 안의 같은 원 여섯이 통째로 돌고, 아래는 그 사슬을 반전한 그림이라 원이 넓은 쪽을 지나며 부풀고 좁은 쪽에서 줄어요. 원마다 위아래가 같은 색이고, 어디서 시작해도 사슬이 닫히는 슈타이너의 포리즘이 접점의 흰 불꽃으로 보여요.","idea":"A ring of circles each touching its two neighbours and the two circles that hold it turns in the top square, rigid and equal, while the bottom square shows the same ring inverted in a point outside it, the circles swelling as they pass the wide side and shrinking through the narrow one, each in its own colour in both squares and every touch lit, so wherever the chain starts it always closes.","buttons":"K1 tap lays the chain again from where it stands, one circle at a time, and the last one closes the gap with a flash.","code":"// ===== Patternflow pattern =====\n// Title:   Steiner Chain\n// Family:  geometry\n// Idea:    A ring of circles each touching its two neighbours and the two circles that hold it turns in the top square, rigid and equal, while the bottom square shows the same ring inverted in a point outside it, the circles swelling as they pass the wide side and shrinking through the narrow one, each in its own colour in both squares and every touch lit, so wherever the chain starts it always closes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Steiner's porism (Jakob Steiner, 1826), shown through circle inversion, pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Circles=6..12, Speed=0.2..3, Turns=1..4, Offset=0..1\n//\n// Knob 1: Circles. How many circles the chain holds, 6 to 12, each in its own colour, hues spaced evenly round the wheel. At 6 the inner circle is a third of the outer one across and the chain circles are 10 LEDs in radius in the top square; at 12 the inner circle is 0.59 of the outer and the circles are beads 6.2 LEDs in radius.\n// Knob 2: Speed. At 2 the chain turns once in 30 seconds, and a fresh start lays it circle by circle in 1.5 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Turns. How many times the chain winds round before it closes, 1 to 4, at most (Circles - 1) / 2. Neighbours then stand 360 times Turns over Circles degrees apart, sin(180 Turns / Circles) = (1 - inner) / (1 + inner) fixes the inner circle, and the circles overlap in a rosette round it: 7 circles at 2 turns leave it 0.12 of the outer one across, at 3 turns 0.013. Where Turns and Circles share a factor the circles fall into that many chains, each closed: 6 circles at 2 turns are two chains of 3.\n// Knob 4: Offset. How near the chain the point of the inversion sits, and with it how far off-centre the inner circle of the bottom square stands: 12 LEDs above the centre at the start, where a circle passing the wide side at the bottom is 3.4 times as wide as one passing the narrow side; 3 times at 0, and 24 times at 1, where the inner circle stands 25 LEDs up, nearly touching the outer one, and the circles squeezing past it are beads 2 LEDs across.\n// Buttons: K1 tap lays the chain again from where it stands, one circle at a time, and the last one closes the gap with a flash.\n\nconst W = 64, H = 128;\nconst { floor, min, max, sqrt, sin, cos, exp, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Each square's centre and the outer circle's radius, in LEDs; pixel centres at x + 0.5.\nconst CX = 32, CY = [32, 96], RPX = 30.4;\n// The inversion point lies on this ray from the centre of the concentric\n// picture, above it. A point near the inversion point images far away, so\n// the wide side of the bottom square is at the bottom.\nconst PSI = -PI / 2;\n// Seconds per turn of the chain at Speed 2, and to lay it.\nconst TURN = 30, LAY = 1.5;\n// Opening hue of circle 0.\nconst H0 = 0.55;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nconst gcd = (a, b) => (b ? gcd(b, a % b) : a);\n\nexport function setup(params) {\n  params.s = {\n    n: 6, m: 1, q: 3.4, phi: 0, lay: 0, flash: [], begun: false,\n    // Per square: circles as x, y, r (the outer, the inner, then the chain in\n    // the order it is laid); each touch as its point x, y and the pair of\n    // circles that meet there.\n    C: [new Float64Array(3 * 14), new Float64Array(3 * 14)],\n    T: [new Float64Array(2 * 40), new Float64Array(2 * 40)], nt: 0, tri: [],\n    A: new Float32Array(3 * W * H), col: [0, 0, 0], fil: [0, 0, 0],\n  };\n}\n\n// The inversion point's distance a > 1 from the centre, in units of the\n// outer radius, at which a chain circle passing the near side images q times\n// as wide as one passing the far side: the gaps between the two circles on\n// the line through the point image to (1 - rho) / ((a - 1)(a - rho)) and\n// (1 - rho) / ((a + 1)(a + rho)), and their ratio is q.\nfunction dist(q, rho) {\n  const A = q - 1, B = (q + 1) * (1 + rho), C = (q - 1) * rho;\n  return (B + sqrt(B * B - 4 * A * C)) / (2 * A);\n}\n\n// The chain at start angle phi: circle i of sub-chain j, step k, centred on\n// the ring at angle phi + 2 pi (k m + j) / n. Square 0 is the concentric\n// picture; square 1 its image in the unit circle about the point a, scaled\n// so the outer circle's image is RPX across and centred.\nfunction geometry(S) {\n  const { n, m } = S, s = sin((PI * m) / n), rho = (1 - s) / (1 + s), r = (1 - rho) / 2, d = (1 + rho) / 2;\n  const g = gcd(n, m), len = n / g, a = dist(S.q, rho), ax = a * cos(PSI), ay = a * sin(PSI);\n  const inv = (x, y) => {\n    const u = x - ax, v = y - ay, k = 1 / (u * u + v * v);\n    return [ax + u * k, ay + v * k];\n  };\n  const invC = (x, y, rr) => {\n    const u = x - ax, v = y - ay, D = u * u + v * v - rr * rr;\n    return [ax + u / D, ay + v / D, rr / Math.abs(D)];\n  };\n  // Model circles: 0 the outer, 1 the inner, then the chain.\n  const M = [[0, 0, 1], [0, 0, rho]];\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const t = S.phi + (TAU * (k * m + j)) / n;\n      M.push([d * cos(t), d * sin(t), r]);\n    }\n  const O = invC(0, 0, 1), sc = RPX / O[2];\n  const C0 = S.C[0], C1 = S.C[1];\n  for (let i = 0; i \u003c M.length; i++) {\n    const [x, y, rr] = M[i], [X, Y, R] = invC(x, y, rr);\n    C0[3 * i] = CX + RPX * x;\n    C0[3 * i + 1] = CY[0] + RPX * y;\n    C0[3 * i + 2] = RPX * rr;\n    C1[3 * i] = CX + sc * (X - O[0]);\n    C1[3 * i + 1] = CY[1] + sc * (Y - O[1]);\n    C1[3 * i + 2] = sc * R;\n  }\n  // The touches: each circle with the outer and the inner, and each with\n  // the next in its sub-chain, the last with the first.\n  let nt = 0;\n  const T0 = S.T[0], T1 = S.T[1], tri = [];\n  const put = (x, y, a, b) => {\n    const [X, Y] = inv(x, y);\n    T0[2 * nt] = CX + RPX * x;\n    T0[2 * nt + 1] = CY[0] + RPX * y;\n    T1[2 * nt] = CX + sc * (X - O[0]);\n    T1[2 * nt + 1] = CY[1] + sc * (Y - O[1]);\n    tri.push([a, b]);\n    nt++;\n  };\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const i = 2 + j * len + k, nx = 2 + j * len + ((k + 1) % len);\n      const [x, y] = M[i], [x2, y2] = M[nx], ux = x / d, uy = y / d;\n      put(ux, uy, i, 0);\n      put(rho * ux, rho * uy, i, 1);\n      put((x + x2) / 2, (y + y2) / 2, i, nx);\n    }\n  S.nt = nt;\n  S.tri = tri;\n  S.model = M;\n  S.rho = rho;\n  S.a = a;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [6, 2, 1, 0.06], dd = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[0], 6, 12)), rate = cl(k[1], 0.2, 3) / 2;\n  const m = max(1, min(round(cl(k[2], 1, 4)), floor((n - 1) / 2)));\n  S.q = 3 * 8 ** cl(k[3], 0, 1);\n  if (n !== S.n || m !== S.m) {\n    S.n = n;\n    S.m = m;\n    S.flash = [];\n  }\n  if (!S.begun) {\n    S.begun = true;\n    S.lay = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lay = 0;\n    S.flash = [];\n  }\n  const wasLaid = S.lay >= LAY;\n  S.lay += dd * rate;\n  S.phi += (dd * rate * TAU) / TURN;\n  if (!wasLaid && S.lay >= LAY) S.flash.push(0);\n  for (let i = 0; i \u003c S.flash.length; i++) S.flash[i] += dd * rate;\n  S.flash = S.flash.filter((f) => f \u003c 0.8);\n  geometry(S);\n}\n\n// How far circle i is laid, 0..1: they go down one after another.\nfunction shown(S, i) {\n  if (i \u003c 2) return 1;\n  return cl(((S.lay / LAY) * S.n - (i - 2)) * 1.5, 0, 1);\n}\n\n// Orange and yellow go brown and olive dimmed, so their discs are lit\n// brighter inside and paler.\nconst warm = (h) => {\n  const u = (h - floor(h) - 0.13) / 0.14;\n  return u * u \u003c 1 ? (1 - u * u) ** 2 : 0;\n};\n\nfunction disc(A, x0, y0, r, w, c, f, lift, lo, hi) {\n  const ext = r + 2, rr = max(r, 0.35);\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, D = sqrt(dx * dx + dy * dy);\n      if (D > ext) continue;\n      const u = min(1, D / rr), fill = cl(rr - D + 0.5, 0, 1), e = (D - rr) / 0.7;\n      // A soft lit disc: dim in the middle, rising toward a bright rim, a\n      // glow on the upper left where the light comes from.\n      const hx = dx + 0.42 * rr, hy = dy + 0.42 * rr, glow = exp(-(hx * hx + hy * hy) / (0.22 * rr * rr + 0.6));\n      const vf = w * fill * (0.2 + 0.28 * u * u + 0.32 * glow) * lift;\n      let v = 0.85 * exp(-e * e);\n      if (r \u003c 1.5) v += (1.5 - r) * 0.5 * fill;\n      v *= w;\n      // Screen blend, so where wound chains overlap the lenses show without\n      // washing out to white.\n      const p = 3 * (y * W + x);\n      A[p] = 1 - (1 - A[p]) * (1 - min(1, c[0] * v + f[0] * vf));\n      A[p + 1] = 1 - (1 - A[p + 1]) * (1 - min(1, c[1] * v + f[1] * vf));\n      A[p + 2] = 1 - (1 - A[p + 2]) * (1 - min(1, c[2] * v + f[2] * vf));\n    }\n  }\n}\n\nfunction ring(A, x0, y0, r, lv, lo, hi) {\n  const ext = r + 2;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, e = (sqrt(dx * dx + dy * dy) - r) / 0.6;\n      if (e > 4 || e \u003c -4) continue;\n      const v = lv * exp(-e * e), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nfunction dot(A, x0, y0, s, lv, lo, hi) {\n  const ext = 3 * s;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, v = lv * exp(-(dx * dx + dy * dy) / (2 * s * s)), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { A, col, fil, n } = S;\n  A.fill(0);\n  for (let sq = 0; sq \u003c 2; sq++) {\n    const C = S.C[sq], T = S.T[sq], lo = sq * 64, hi = lo + 63;\n    ring(A, C[0], C[1], C[2], 0.5, lo, hi);\n    ring(A, C[3], C[4], C[5], 0.5, lo, hi);\n    for (let i = 2; i \u003c n + 2; i++) {\n      const w = shown(S, i);\n      if (w \u003c= 0) continue;\n      const h = H0 + (i - 2) / n, wm = warm(h);\n      hsv(h, 0.8, 1, col);\n      hsv(h, 0.74 - 0.3 * wm, 1, fil);\n      // A wound chain stacks its discs Turns deep, so each is filled fainter.\n      disc(A, C[3 * i], C[3 * i + 1], C[3 * i + 2], w, col, fil, (1 + 0.9 * wm) * S.m ** -0.7, lo, hi);\n    }\n    // Every touch, lit once both its circles are laid; small ones smaller.\n    for (let t = 0; t \u003c S.nt; t++) {\n      const [a, b] = S.tri[t], w = min(shown(S, a), shown(S, b));\n      if (w \u003c 1) continue;\n      const rr = min(C[3 * a + 2], b > 1 ? C[3 * b + 2] : 99);\n      dot(A, T[2 * t], T[2 * t + 1], cl(0.25 * rr, 0.45, 0.8), 0.75 / S.m, lo, hi);\n    }\n    // The closing: the touch between the last circle laid and the first.\n    for (const f of S.flash) {\n      const len = n / gcd(n, S.m), i = 2 + len - 1, t = 3 * (i - 2) + 2, e = 1 - f / 0.8;\n      dot(A, T[2 * t], T[2 * t + 1], 1.4 + 2.5 * f, 1.6 * e * e, lo, hi);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = 3 * (y * W + x);\n      display.setPixel(x, y, round(255 * min(1, A[p])), round(255 * min(1, A[p + 1])), round(255 * min(1, A[p + 2])));\n    }\n}\n","layer":{"id":"layer-steiner-chain","type":"code","name":"steiner-chain","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Steiner Chain\n// Family:  geometry\n// Idea:    A ring of circles each touching its two neighbours and the two circles that hold it turns in the top square, rigid and equal, while the bottom square shows the same ring inverted in a point outside it, the circles swelling as they pass the wide side and shrinking through the narrow one, each in its own colour in both squares and every touch lit, so wherever the chain starts it always closes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Steiner's porism (Jakob Steiner, 1826), shown through circle inversion, pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Circles=6..12, Speed=0.2..3, Turns=1..4, Offset=0..1\n//\n// Knob 1: Circles. How many circles the chain holds, 6 to 12, each in its own colour, hues spaced evenly round the wheel. At 6 the inner circle is a third of the outer one across and the chain circles are 10 LEDs in radius in the top square; at 12 the inner circle is 0.59 of the outer and the circles are beads 6.2 LEDs in radius.\n// Knob 2: Speed. At 2 the chain turns once in 30 seconds, and a fresh start lays it circle by circle in 1.5 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Turns. How many times the chain winds round before it closes, 1 to 4, at most (Circles - 1) / 2. Neighbours then stand 360 times Turns over Circles degrees apart, sin(180 Turns / Circles) = (1 - inner) / (1 + inner) fixes the inner circle, and the circles overlap in a rosette round it: 7 circles at 2 turns leave it 0.12 of the outer one across, at 3 turns 0.013. Where Turns and Circles share a factor the circles fall into that many chains, each closed: 6 circles at 2 turns are two chains of 3.\n// Knob 4: Offset. How near the chain the point of the inversion sits, and with it how far off-centre the inner circle of the bottom square stands: 12 LEDs above the centre at the start, where a circle passing the wide side at the bottom is 3.4 times as wide as one passing the narrow side; 3 times at 0, and 24 times at 1, where the inner circle stands 25 LEDs up, nearly touching the outer one, and the circles squeezing past it are beads 2 LEDs across.\n// Buttons: K1 tap lays the chain again from where it stands, one circle at a time, and the last one closes the gap with a flash.\n\nconst W = 64, H = 128;\nconst { floor, min, max, sqrt, sin, cos, exp, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Each square's centre and the outer circle's radius, in LEDs; pixel centres at x + 0.5.\nconst CX = 32, CY = [32, 96], RPX = 30.4;\n// The inversion point lies on this ray from the centre of the concentric\n// picture, above it. A point near the inversion point images far away, so\n// the wide side of the bottom square is at the bottom.\nconst PSI = -PI / 2;\n// Seconds per turn of the chain at Speed 2, and to lay it.\nconst TURN = 30, LAY = 1.5;\n// Opening hue of circle 0.\nconst H0 = 0.55;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nconst gcd = (a, b) => (b ? gcd(b, a % b) : a);\n\nexport function setup(params) {\n  params.s = {\n    n: 6, m: 1, q: 3.4, phi: 0, lay: 0, flash: [], begun: false,\n    // Per square: circles as x, y, r (the outer, the inner, then the chain in\n    // the order it is laid); each touch as its point x, y and the pair of\n    // circles that meet there.\n    C: [new Float64Array(3 * 14), new Float64Array(3 * 14)],\n    T: [new Float64Array(2 * 40), new Float64Array(2 * 40)], nt: 0, tri: [],\n    A: new Float32Array(3 * W * H), col: [0, 0, 0], fil: [0, 0, 0],\n  };\n}\n\n// The inversion point's distance a > 1 from the centre, in units of the\n// outer radius, at which a chain circle passing the near side images q times\n// as wide as one passing the far side: the gaps between the two circles on\n// the line through the point image to (1 - rho) / ((a - 1)(a - rho)) and\n// (1 - rho) / ((a + 1)(a + rho)), and their ratio is q.\nfunction dist(q, rho) {\n  const A = q - 1, B = (q + 1) * (1 + rho), C = (q - 1) * rho;\n  return (B + sqrt(B * B - 4 * A * C)) / (2 * A);\n}\n\n// The chain at start angle phi: circle i of sub-chain j, step k, centred on\n// the ring at angle phi + 2 pi (k m + j) / n. Square 0 is the concentric\n// picture; square 1 its image in the unit circle about the point a, scaled\n// so the outer circle's image is RPX across and centred.\nfunction geometry(S) {\n  const { n, m } = S, s = sin((PI * m) / n), rho = (1 - s) / (1 + s), r = (1 - rho) / 2, d = (1 + rho) / 2;\n  const g = gcd(n, m), len = n / g, a = dist(S.q, rho), ax = a * cos(PSI), ay = a * sin(PSI);\n  const inv = (x, y) => {\n    const u = x - ax, v = y - ay, k = 1 / (u * u + v * v);\n    return [ax + u * k, ay + v * k];\n  };\n  const invC = (x, y, rr) => {\n    const u = x - ax, v = y - ay, D = u * u + v * v - rr * rr;\n    return [ax + u / D, ay + v / D, rr / Math.abs(D)];\n  };\n  // Model circles: 0 the outer, 1 the inner, then the chain.\n  const M = [[0, 0, 1], [0, 0, rho]];\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const t = S.phi + (TAU * (k * m + j)) / n;\n      M.push([d * cos(t), d * sin(t), r]);\n    }\n  const O = invC(0, 0, 1), sc = RPX / O[2];\n  const C0 = S.C[0], C1 = S.C[1];\n  for (let i = 0; i \u003c M.length; i++) {\n    const [x, y, rr] = M[i], [X, Y, R] = invC(x, y, rr);\n    C0[3 * i] = CX + RPX * x;\n    C0[3 * i + 1] = CY[0] + RPX * y;\n    C0[3 * i + 2] = RPX * rr;\n    C1[3 * i] = CX + sc * (X - O[0]);\n    C1[3 * i + 1] = CY[1] + sc * (Y - O[1]);\n    C1[3 * i + 2] = sc * R;\n  }\n  // The touches: each circle with the outer and the inner, and each with\n  // the next in its sub-chain, the last with the first.\n  let nt = 0;\n  const T0 = S.T[0], T1 = S.T[1], tri = [];\n  const put = (x, y, a, b) => {\n    const [X, Y] = inv(x, y);\n    T0[2 * nt] = CX + RPX * x;\n    T0[2 * nt + 1] = CY[0] + RPX * y;\n    T1[2 * nt] = CX + sc * (X - O[0]);\n    T1[2 * nt + 1] = CY[1] + sc * (Y - O[1]);\n    tri.push([a, b]);\n    nt++;\n  };\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const i = 2 + j * len + k, nx = 2 + j * len + ((k + 1) % len);\n      const [x, y] = M[i], [x2, y2] = M[nx], ux = x / d, uy = y / d;\n      put(ux, uy, i, 0);\n      put(rho * ux, rho * uy, i, 1);\n      put((x + x2) / 2, (y + y2) / 2, i, nx);\n    }\n  S.nt = nt;\n  S.tri = tri;\n  S.model = M;\n  S.rho = rho;\n  S.a = a;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [6, 2, 1, 0.06], dd = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[0], 6, 12)), rate = cl(k[1], 0.2, 3) / 2;\n  const m = max(1, min(round(cl(k[2], 1, 4)), floor((n - 1) / 2)));\n  S.q = 3 * 8 ** cl(k[3], 0, 1);\n  if (n !== S.n || m !== S.m) {\n    S.n = n;\n    S.m = m;\n    S.flash = [];\n  }\n  if (!S.begun) {\n    S.begun = true;\n    S.lay = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lay = 0;\n    S.flash = [];\n  }\n  const wasLaid = S.lay >= LAY;\n  S.lay += dd * rate;\n  S.phi += (dd * rate * TAU) / TURN;\n  if (!wasLaid && S.lay >= LAY) S.flash.push(0);\n  for (let i = 0; i \u003c S.flash.length; i++) S.flash[i] += dd * rate;\n  S.flash = S.flash.filter((f) => f \u003c 0.8);\n  geometry(S);\n}\n\n// How far circle i is laid, 0..1: they go down one after another.\nfunction shown(S, i) {\n  if (i \u003c 2) return 1;\n  return cl(((S.lay / LAY) * S.n - (i - 2)) * 1.5, 0, 1);\n}\n\n// Orange and yellow go brown and olive dimmed, so their discs are lit\n// brighter inside and paler.\nconst warm = (h) => {\n  const u = (h - floor(h) - 0.13) / 0.14;\n  return u * u \u003c 1 ? (1 - u * u) ** 2 : 0;\n};\n\nfunction disc(A, x0, y0, r, w, c, f, lift, lo, hi) {\n  const ext = r + 2, rr = max(r, 0.35);\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, D = sqrt(dx * dx + dy * dy);\n      if (D > ext) continue;\n      const u = min(1, D / rr), fill = cl(rr - D + 0.5, 0, 1), e = (D - rr) / 0.7;\n      // A soft lit disc: dim in the middle, rising toward a bright rim, a\n      // glow on the upper left where the light comes from.\n      const hx = dx + 0.42 * rr, hy = dy + 0.42 * rr, glow = exp(-(hx * hx + hy * hy) / (0.22 * rr * rr + 0.6));\n      const vf = w * fill * (0.2 + 0.28 * u * u + 0.32 * glow) * lift;\n      let v = 0.85 * exp(-e * e);\n      if (r \u003c 1.5) v += (1.5 - r) * 0.5 * fill;\n      v *= w;\n      // Screen blend, so where wound chains overlap the lenses show without\n      // washing out to white.\n      const p = 3 * (y * W + x);\n      A[p] = 1 - (1 - A[p]) * (1 - min(1, c[0] * v + f[0] * vf));\n      A[p + 1] = 1 - (1 - A[p + 1]) * (1 - min(1, c[1] * v + f[1] * vf));\n      A[p + 2] = 1 - (1 - A[p + 2]) * (1 - min(1, c[2] * v + f[2] * vf));\n    }\n  }\n}\n\nfunction ring(A, x0, y0, r, lv, lo, hi) {\n  const ext = r + 2;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, e = (sqrt(dx * dx + dy * dy) - r) / 0.6;\n      if (e > 4 || e \u003c -4) continue;\n      const v = lv * exp(-e * e), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nfunction dot(A, x0, y0, s, lv, lo, hi) {\n  const ext = 3 * s;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, v = lv * exp(-(dx * dx + dy * dy) / (2 * s * s)), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { A, col, fil, n } = S;\n  A.fill(0);\n  for (let sq = 0; sq \u003c 2; sq++) {\n    const C = S.C[sq], T = S.T[sq], lo = sq * 64, hi = lo + 63;\n    ring(A, C[0], C[1], C[2], 0.5, lo, hi);\n    ring(A, C[3], C[4], C[5], 0.5, lo, hi);\n    for (let i = 2; i \u003c n + 2; i++) {\n      const w = shown(S, i);\n      if (w \u003c= 0) continue;\n      const h = H0 + (i - 2) / n, wm = warm(h);\n      hsv(h, 0.8, 1, col);\n      hsv(h, 0.74 - 0.3 * wm, 1, fil);\n      // A wound chain stacks its discs Turns deep, so each is filled fainter.\n      disc(A, C[3 * i], C[3 * i + 1], C[3 * i + 2], w, col, fil, (1 + 0.9 * wm) * S.m ** -0.7, lo, hi);\n    }\n    // Every touch, lit once both its circles are laid; small ones smaller.\n    for (let t = 0; t \u003c S.nt; t++) {\n      const [a, b] = S.tri[t], w = min(shown(S, a), shown(S, b));\n      if (w \u003c 1) continue;\n      const rr = min(C[3 * a + 2], b > 1 ? C[3 * b + 2] : 99);\n      dot(A, T[2 * t], T[2 * t + 1], cl(0.25 * rr, 0.45, 0.8), 0.75 / S.m, lo, hi);\n    }\n    // The closing: the touch between the last circle laid and the first.\n    for (const f of S.flash) {\n      const len = n / gcd(n, S.m), i = 2 + len - 1, t = 3 * (i - 2) + 2, e = 1 - f / 0.8;\n      dot(A, T[2 * t], T[2 * t + 1], 1.4 + 2.5 * f, 1.6 * e * e, lo, hi);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = 3 * (y * W + x);\n      display.setPixel(x, y, round(255 * min(1, A[p])), round(255 * min(1, A[p + 1])), round(255 * min(1, A[p + 2])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Circles=6..12, Speed=0.2..3, Turns=1..4, Offset=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Circles","min":6,"max":12,"about":"How many circles the chain holds, 6 to 12, each in its own colour, hues spaced evenly round the wheel. At 6 the inner circle is a third of the outer one across and the chain circles are 10 LEDs in radius in the top square; at 12 the inner circle is 0.59 of the outer and the circles are beads 6.2 LEDs in radius."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the chain turns once in 30 seconds, and a fresh start lays it circle by circle in 1.5 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Turns","min":1,"max":4,"about":"How many times the chain winds round before it closes, 1 to 4, at most (Circles - 1) / 2. Neighbours then stand 360 times Turns over Circles degrees apart, sin(180 Turns / Circles) = (1 - inner) / (1 + inner) fixes the inner circle, and the circles overlap in a rosette round it: 7 circles at 2 turns leave it 0.12 of the outer one across, at 3 turns 0.013. Where Turns and Circles share a factor the circles fall into that many chains, each closed: 6 circles at 2 turns are two chains of 3."},{"name":"Offset","min":0,"max":1,"about":"How near the chain the point of the inversion sits, and with it how far off-centre the inner circle of the bottom square stands: 12 LEDs above the centre at the start, where a circle passing the wide side at the bottom is 3.4 times as wide as one passing the narrow side; 3 times at 0, and 24 times at 1, where the inner circle stands 25 LEDs up, nearly touching the outer one, and the circles squeezing past it are beads 2 LEDs across."}],"start":[6,2,1,0.06],"measures":{"motion":0.3441,"detail":0.0929,"edges":0.4245,"complexity":1.7706,"coverage":0.6096,"colour":0.2864,"drift":0.1304},"knobResponse":[0.1921,0.201,0.172,0.0934]},{"slug":"sugar-scrub","title":"Sugar Scrub","family":"cosmetic","round":32,"note":"장밋빛 오일 밤 위에 설탕 결정 칠백 알쯤이 떠 있고, 보이지 않는 손끝이 지름 26 LED 원을 그리며 지나간 자리에 분홍빛 광택 고리가 남아요. 손끝에 끌린 알갱이는 구르며 하얀 십자로 반짝이고 녹아 작아져요. 10초마다 새 한 숟갈이 더미로 얹혔다가 다음 원에 쓸려 퍼져요.","idea":"Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.","buttons":"K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.","code":"// ===== Patternflow pattern =====\n// Title:   Sugar Scrub\n// Family:  cosmetic\n// Idea:    Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the sugar body scrub\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1\n//\n// Knob 1: Hue. The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid.\n// Knob 2: Speed. At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2.\n// Knob 3: Grain. The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm.\n// Knob 4: Oil. How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1.\n// Buttons: K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.\n\nconst W = 64, H = 128, N = W * H, MAXG = 3200;\nconst { floor, sqrt, exp, sin, cos, min, max, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Smooth value noise with a lattice cell LEDs wide, for the balm's relief.\nfunction valueNoise(cell) {\n  const gw = floor(W / cell) + 2, gh = floor(H / cell) + 2, g = new Float32Array(gw * gh), out = new Float32Array(N);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      (tx = tx * tx * (3 - 2 * tx)), (ty = ty * ty * (3 - 2 * ty));\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n    }\n  return out;\n}\n\nexport function setup(params) {\n  const n1 = valueNoise(9), n2 = valueNoise(3.5), N0 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) N0[i] = 0.65 * n1[i] + 0.35 * n2[i];\n  params.s = {\n    t: 0, hue: NaN, speed: 2, grain: 0, oil: 0.53,\n    S: Float32Array.from(N0), S2: new Float32Array(N), N0, G: new Float32Array(N), G2: new Float32Array(N),\n    gx: new Float32Array(MAXG), gy: new Float32Array(MAXG), vx: new Float32Array(MAXG), vy: new Float32Array(MAXG),\n    gs: new Float32Array(MAXG), ph: new Float32Array(MAXG), tx: new Float32Array(MAXG), ty: new Float32Array(MAXG), fall: new Uint8Array(MAXG), tint: new Float32Array(MAXG),\n    n: 0, filled: false, spoon: 3, goal: 0, queue: 0, fx: 0, fy: 0, fvx: 0, fvy: 0,\n    col: new Float32Array(12), img: new Float32Array(N * 3),\n  };\n}\n\n// The fingertip: circles of radius 13 at 0.7 rad a unit of time, round a\n// centre that wanders up and down most of the panel.\nfunction finger(t) {\n  const a = 0.7 * t, cx = 32 + 6 * sin(0.11 * t), cy = 64 + 36 * sin(0.09 * t - 2.6), r = 13 + 2 * sin(0.23 * t);\n  return [cx + r * cos(a), cy + r * sin(a)];\n}\n\nconst meanR = (P) => 0.95 + 0.55 * P.grain;\nconst target = (P) => {\n  const o = P.oil, cov = 0.72 * (1 - o) ** 1.6 + 0.03, r = meanR(P);\n  return min(MAXG, floor((cov * N) / (PI * r * r)));\n};\n\nfunction addGrain(P, x, y, cx, cy) {\n  if (P.n >= MAXG) return;\n  // A grain keeps its size as a share of the mean, so Grain resizes every\n  // grain on the panel at once.\n  const i = P.n++;\n  P.gs[i] = 0.55 + 0.9 * random();\n  P.ph[i] = random() * 2 * PI;\n  P.tint[i] = random();\n  (P.vx[i] = 0), (P.vy[i] = 0);\n  if (cx !== undefined) {\n    // Part of a spoonful: it starts in the heap's tight middle and is thrown\n    // out to where it lands.\n    (P.gx[i] = cx + (x - cx) * 0.25), (P.gy[i] = cy + (y - cy) * 0.25);\n    (P.tx[i] = x), (P.ty[i] = y), (P.fall[i] = 1);\n  } else (P.gx[i] = x), (P.gy[i] = y), (P.fall[i] = 0);\n}\n\nfunction kill(P, i) {\n  const j = --P.n;\n  for (const a of [P.gx, P.gy, P.vx, P.vy, P.gs, P.ph, P.tx, P.ty, P.fall, P.tint]) a[i] = a[j];\n}\n\n// A spoonful lands on the emptiest of five spots that are well clear of the\n// fingertip: a round heap 26 LEDs across, densest in the middle.\nfunction spoonful(P) {\n  let best = -Infinity, bx = 32, by = 30;\n  for (let c = 0; c \u003c 5; c++) {\n    const x = 14 + random() * 36, y = 14 + random() * (H - 28);\n    if (Math.hypot(x - P.fx, y - P.fy) \u003c 30) continue;\n    let near = 0;\n    for (let i = 0; i \u003c P.n; i += 3) if (abs(P.gx[i] - x) \u003c 12 && abs(P.gy[i] - y) \u003c 12) near++;\n    const score = -near + random();\n    if (score > best) (best = score), (bx = x), (by = y);\n  }\n  const m = floor(target(P) * 0.22) + 60;\n  for (let k = 0; k \u003c m; k++) {\n    const a = random() * 2 * PI, rr = random() ** 0.75;\n    addGrain(P, cl(bx + cos(a) * rr * 13, 0, W - 1), cl(by + sin(a) * rr * 13, 0, H - 1), bx, by);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.grain = cl(k[2], -1, 1);\n  P.oil = (cl(k[3], -1, 1) + 1) / 2;\n  // A turn of Grain or Oil changes how many grains the balm should hold:\n  // the difference is sprinkled on or melted away, 60 grains a frame.\n  const goal = target(P);\n  if (P.filled && goal !== P.goal) (P.queue += goal - P.goal), (P.goal = goal);\n  if (P.queue > 0) {\n    const m = min(60, P.queue);\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    P.queue -= m;\n  } else if (P.queue \u003c 0) {\n    const m = min(60, -P.queue, P.n);\n    for (let i = 0; i \u003c m; i++) kill(P, floor(random() * P.n));\n    P.queue += m;\n  }\n  if (!P.filled) {\n    // The jar has been in use a while: twelve seconds of rubbing at Speed 2\n    // run before the first frame, so the panel opens on swirled tracks, a\n    // heap or two and ridges of pushed grains, with the next spoonful due\n    // in three seconds.\n    const m = (P.goal = target(P));\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    for (let i = 0; i \u003c 120; i++) step(P, 0.1, 2, false);\n    P.filled = true;\n    P.spoon = 3;\n  }\n  step(P, d, P.speed, input.btnPressed && input.btnPressed[0]);\n}\n\nfunction step(P, d, sp, press) {\n  P.t += d * sp;\n  const [fx, fy] = finger(P.t), [px, py] = finger(P.t - 0.05);\n  (P.fx = fx), (P.fy = fy), (P.fvx = ((fx - px) / 0.05) * sp), (P.fvy = ((fy - py) / 0.05) * sp);\n  if (press) spoonful(P);\n  P.spoon -= d * sp * 0.5;\n  if (P.spoon \u003c= 0 || P.n \u003c target(P) * 0.35) (P.spoon = 10), spoonful(P);\n\n  // The oil the fingertip drags: its own velocity under the pad, falling off\n  // over 5 LEDs, and a push out from under it.\n  const sig2 = 2 * 5 * 5, oil = P.oil;\n  const vel = (x, y, out) => {\n    const dx = x - fx, dy = y - fy, r2 = dx * dx + dy * dy;\n    if (r2 > 400) return (out[0] = 0), (out[1] = 0), 0;\n    const e = exp(-r2 / sig2), r = sqrt(r2) + 0.5, push = 1.5 * sp * e;\n    out[0] = P.fvx * e * 0.8 + (push * dx) / r;\n    out[1] = P.fvy * e * 0.8 + (push * dy) / r;\n    return e;\n  };\n  const v = [0, 0];\n\n  // Grains trail the oil and roll; under the pad they melt.\n  const melt = 0.05 + 0.32 * oil, mr = meanR(P);\n  for (let i = 0; i \u003c P.n; i++) {\n    if (P.fall[i]) {\n      const u = min(1, d * 9);\n      P.gx[i] += (P.tx[i] - P.gx[i]) * u;\n      P.gy[i] += (P.ty[i] - P.gy[i]) * u;\n      if (abs(P.tx[i] - P.gx[i]) + abs(P.ty[i] - P.gy[i]) \u003c 0.1) P.fall[i] = 0;\n      P.ph[i] += d * 6;\n      continue;\n    }\n    const e = vel(P.gx[i], P.gy[i], v), lag = min(1, d * 7);\n    // Grains in the flow knock into each other and scatter a little.\n    const jit = e > 0.1 ? 14 * e * sp * d : 0;\n    P.vx[i] += (v[0] - P.vx[i]) * lag + jit * (random() - 0.5) * 4;\n    P.vy[i] += (v[1] - P.vy[i]) * lag + jit * (random() - 0.5) * 4;\n    P.gx[i] = cl(P.gx[i] + P.vx[i] * d, 0, W - 0.01);\n    P.gy[i] = cl(P.gy[i] + P.vy[i] * d, 0, H - 0.01);\n    const s = abs(P.vx[i]) + abs(P.vy[i]);\n    P.ph[i] += d * (0.35 * sp + (s * 1.3) / (P.gs[i] * mr));\n    if (e > 0.05) P.gs[i] -= (d * melt * e) / mr;\n    if (P.gs[i] \u003c 0.35) kill(P, i--);\n  }\n\n  // The balm: its texture is carried by the same flow and slowly settles\n  // back; the gloss is laid down under the pad, spreads and dries.\n  const S = P.S, S2 = P.S2, G = P.G, G2 = P.G2, N0 = P.N0;\n  const back = d * 0.04, dry = d * (0.12 - 0.08 * oil), lay = d * 1.6, spread = min(0.24, 1.5 * d);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, e = vel(x, y, v);\n      let s = S[i];\n      if (e > 0.002) {\n        const sx = cl(x - v[0] * d, 0, W - 1.001), sy = cl(y - v[1] * d, 0, H - 1.001), ix = sx | 0, iy = sy | 0, tx = sx - ix, ty = sy - iy, j = iy * W + ix;\n        s = S[j] * (1 - tx) * (1 - ty) + S[j + 1] * tx * (1 - ty) + S[j + W] * (1 - tx) * ty + S[j + W + 1] * tx * ty;\n      }\n      S2[i] = s + (N0[i] - s) * back;\n      const l = x > 0 ? G[i - 1] : G[i], r = x \u003c W - 1 ? G[i + 1] : G[i], u = y > 0 ? G[i - W] : G[i], b = y \u003c H - 1 ? G[i + W] : G[i];\n      G2[i] = min(1, G[i] + (l + r + u + b - 4 * G[i]) * spread - G[i] * dry + lay * e);\n    }\n  (P.S = S2), (P.S2 = S), (P.G = G2), (P.G2 = G);\n}\n\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { S, G, img, col } = P, oil = P.oil, h = P.hue + 0.955, mr = meanR(P);\n  // Dry balm, wet oil, the crystal body and the sheen.\n  hsv(h, 0.42, 0.84, col, 0);\n  hsv(h + 0.015, 0.74, 0.64, col, 3);\n  // The light comes from the upper left and swings slowly to and fro, so\n  // the sheen slides over the balm even where the fingertip is not.\n  const la = -2.2 + 0.5 * sin(P.t * 0.21), LX = 0.75 * cos(la), LY = 0.75 * sin(la), LZ = 0.66;\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  hsv(h - 0.02, 0.09, 1, col, 6);\n  hsv(h - 0.03, 0.1, 1, col, 9);\n  // More oil: a wetter, smoother balm.\n  const base = 0.2 + 0.55 * oil, sh = 3.2 * (1 - 0.65 * oil);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const wet = min(1, base + G[i]);\n      const hx = sh * ((x \u003c W - 1 ? S[i + 1] : S[i]) - (x > 0 ? S[i - 1] : S[i])) + 2 * ((x \u003c W - 1 ? G[i + 1] : G[i]) - (x > 0 ? G[i - 1] : G[i]));\n      const hy = sh * ((y \u003c H - 1 ? S[i + W] : S[i]) - (y > 0 ? S[i - W] : S[i])) + 2 * ((y \u003c H - 1 ? G[i + W] : G[i]) - (y > 0 ? G[i - W] : G[i]));\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), nx = -hx * nl, ny = -hy * nl, nz = nl;\n      const dif = 0.8 + 0.35 * (nx * LX + ny * LY + nz * LZ - 0.7);\n      // A sharp sheen on the balm's relief, and over the oil the fingertip\n      // laid down a broad film of light.\n      const nh = max(0, nx * HX + ny * HY + nz * HZ), spec = (nh ** 60 * 1.3 + nh ** 6 * 0.18) * wet + G[i] * (0.1 + 0.5 * nh ** 10);\n      const tex = 0.88 + 0.26 * (S[i] - 0.5);\n      for (let c = 0; c \u003c 3; c++) {\n        const b = (col[c] + (col[3 + c] - col[c]) * wet) * dif * tex;\n        img[i * 3 + c] = b + (col[9 + c] - b) * min(1, spec);\n      }\n    }\n  // The grains: a shadow down and right, a body lit from the upper left,\n  // and a flash when a facet turns to the light.\n  for (let k = 0; k \u003c P.n; k++) {\n    const gx = P.gx[k], gy = P.gy[k], r = P.gs[k] * mr, ph = P.ph[k];\n    const gl = max(0, cos(ph)) ** 24, x0 = floor(gx - r - 1), x1 = floor(gx + r + 1), y0 = floor(gy - r - 1), y1 = floor(gy + r + 1);\n    const wetHere = min(1, base + G[cl(floor(gy), 0, H - 1) * W + cl(floor(gx), 0, W - 1)]);\n    const op = 0.96 - 0.4 * wetHere, tv = 0.86 + 0.14 * P.tint[k];\n    for (let y = max(0, y0); y \u003c= min(H - 1, y1); y++)\n      for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n        const dx = x + 0.5 - gx, dy = y + 0.5 - gy, dd = sqrt(dx * dx + dy * dy), cov = cl(r + 0.6 - dd, 0, 1);\n        const i = (y * W + x) * 3;\n        const sdx = dx - 0.8, sdy = dy - 0.8, sc = cl(r + 0.5 - sqrt(sdx * sdx + sdy * sdy), 0, 1) * (1 - cov) * 0.16;\n        if (sc > 0) for (let c = 0; c \u003c 3; c++) img[i + c] *= 1 - sc;\n        if (cov \u003c= 0) continue;\n        const lit = (0.8 + 0.2 * cl(-(dx * 0.6 + dy * 0.8) / max(r, 0.6), -1, 1)) * tv;\n        const a = cov * op;\n        for (let c = 0; c \u003c 3; c++) img[i + c] += (col[6 + c] * lit - img[i + c]) * a;\n        if (gl > 0.02) {\n          const f = gl * cov * (dd \u003c 0.8 ? 1 : 0.55);\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * f;\n        }\n      }\n    // A bright flash throws a short cross.\n    if (gl > 0.7 && r > 0.6) {\n      const cx = floor(gx), cy = floor(gy), f = (gl - 0.7) * 2, arm = r > 1.1 ? 2 : 1;\n      for (let a = 1; a \u003c= arm; a++)\n        for (const [ox, oy] of [[a, 0], [-a, 0], [0, a], [0, -a]]) {\n          const x = cx + ox, y = cy + oy;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const i = (y * W + x) * 3, ff = f / a;\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * ff;\n        }\n    }\n  }\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, img[i * 3]), min(255, img[i * 3 + 1]), min(255, img[i * 3 + 2]));\n}\n","layer":{"id":"layer-sugar-scrub","type":"code","name":"sugar-scrub","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sugar Scrub\n// Family:  cosmetic\n// Idea:    Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the sugar body scrub\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1\n//\n// Knob 1: Hue. The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid.\n// Knob 2: Speed. At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2.\n// Knob 3: Grain. The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm.\n// Knob 4: Oil. How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1.\n// Buttons: K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.\n\nconst W = 64, H = 128, N = W * H, MAXG = 3200;\nconst { floor, sqrt, exp, sin, cos, min, max, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Smooth value noise with a lattice cell LEDs wide, for the balm's relief.\nfunction valueNoise(cell) {\n  const gw = floor(W / cell) + 2, gh = floor(H / cell) + 2, g = new Float32Array(gw * gh), out = new Float32Array(N);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      (tx = tx * tx * (3 - 2 * tx)), (ty = ty * ty * (3 - 2 * ty));\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n    }\n  return out;\n}\n\nexport function setup(params) {\n  const n1 = valueNoise(9), n2 = valueNoise(3.5), N0 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) N0[i] = 0.65 * n1[i] + 0.35 * n2[i];\n  params.s = {\n    t: 0, hue: NaN, speed: 2, grain: 0, oil: 0.53,\n    S: Float32Array.from(N0), S2: new Float32Array(N), N0, G: new Float32Array(N), G2: new Float32Array(N),\n    gx: new Float32Array(MAXG), gy: new Float32Array(MAXG), vx: new Float32Array(MAXG), vy: new Float32Array(MAXG),\n    gs: new Float32Array(MAXG), ph: new Float32Array(MAXG), tx: new Float32Array(MAXG), ty: new Float32Array(MAXG), fall: new Uint8Array(MAXG), tint: new Float32Array(MAXG),\n    n: 0, filled: false, spoon: 3, goal: 0, queue: 0, fx: 0, fy: 0, fvx: 0, fvy: 0,\n    col: new Float32Array(12), img: new Float32Array(N * 3),\n  };\n}\n\n// The fingertip: circles of radius 13 at 0.7 rad a unit of time, round a\n// centre that wanders up and down most of the panel.\nfunction finger(t) {\n  const a = 0.7 * t, cx = 32 + 6 * sin(0.11 * t), cy = 64 + 36 * sin(0.09 * t - 2.6), r = 13 + 2 * sin(0.23 * t);\n  return [cx + r * cos(a), cy + r * sin(a)];\n}\n\nconst meanR = (P) => 0.95 + 0.55 * P.grain;\nconst target = (P) => {\n  const o = P.oil, cov = 0.72 * (1 - o) ** 1.6 + 0.03, r = meanR(P);\n  return min(MAXG, floor((cov * N) / (PI * r * r)));\n};\n\nfunction addGrain(P, x, y, cx, cy) {\n  if (P.n >= MAXG) return;\n  // A grain keeps its size as a share of the mean, so Grain resizes every\n  // grain on the panel at once.\n  const i = P.n++;\n  P.gs[i] = 0.55 + 0.9 * random();\n  P.ph[i] = random() * 2 * PI;\n  P.tint[i] = random();\n  (P.vx[i] = 0), (P.vy[i] = 0);\n  if (cx !== undefined) {\n    // Part of a spoonful: it starts in the heap's tight middle and is thrown\n    // out to where it lands.\n    (P.gx[i] = cx + (x - cx) * 0.25), (P.gy[i] = cy + (y - cy) * 0.25);\n    (P.tx[i] = x), (P.ty[i] = y), (P.fall[i] = 1);\n  } else (P.gx[i] = x), (P.gy[i] = y), (P.fall[i] = 0);\n}\n\nfunction kill(P, i) {\n  const j = --P.n;\n  for (const a of [P.gx, P.gy, P.vx, P.vy, P.gs, P.ph, P.tx, P.ty, P.fall, P.tint]) a[i] = a[j];\n}\n\n// A spoonful lands on the emptiest of five spots that are well clear of the\n// fingertip: a round heap 26 LEDs across, densest in the middle.\nfunction spoonful(P) {\n  let best = -Infinity, bx = 32, by = 30;\n  for (let c = 0; c \u003c 5; c++) {\n    const x = 14 + random() * 36, y = 14 + random() * (H - 28);\n    if (Math.hypot(x - P.fx, y - P.fy) \u003c 30) continue;\n    let near = 0;\n    for (let i = 0; i \u003c P.n; i += 3) if (abs(P.gx[i] - x) \u003c 12 && abs(P.gy[i] - y) \u003c 12) near++;\n    const score = -near + random();\n    if (score > best) (best = score), (bx = x), (by = y);\n  }\n  const m = floor(target(P) * 0.22) + 60;\n  for (let k = 0; k \u003c m; k++) {\n    const a = random() * 2 * PI, rr = random() ** 0.75;\n    addGrain(P, cl(bx + cos(a) * rr * 13, 0, W - 1), cl(by + sin(a) * rr * 13, 0, H - 1), bx, by);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.grain = cl(k[2], -1, 1);\n  P.oil = (cl(k[3], -1, 1) + 1) / 2;\n  // A turn of Grain or Oil changes how many grains the balm should hold:\n  // the difference is sprinkled on or melted away, 60 grains a frame.\n  const goal = target(P);\n  if (P.filled && goal !== P.goal) (P.queue += goal - P.goal), (P.goal = goal);\n  if (P.queue > 0) {\n    const m = min(60, P.queue);\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    P.queue -= m;\n  } else if (P.queue \u003c 0) {\n    const m = min(60, -P.queue, P.n);\n    for (let i = 0; i \u003c m; i++) kill(P, floor(random() * P.n));\n    P.queue += m;\n  }\n  if (!P.filled) {\n    // The jar has been in use a while: twelve seconds of rubbing at Speed 2\n    // run before the first frame, so the panel opens on swirled tracks, a\n    // heap or two and ridges of pushed grains, with the next spoonful due\n    // in three seconds.\n    const m = (P.goal = target(P));\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    for (let i = 0; i \u003c 120; i++) step(P, 0.1, 2, false);\n    P.filled = true;\n    P.spoon = 3;\n  }\n  step(P, d, P.speed, input.btnPressed && input.btnPressed[0]);\n}\n\nfunction step(P, d, sp, press) {\n  P.t += d * sp;\n  const [fx, fy] = finger(P.t), [px, py] = finger(P.t - 0.05);\n  (P.fx = fx), (P.fy = fy), (P.fvx = ((fx - px) / 0.05) * sp), (P.fvy = ((fy - py) / 0.05) * sp);\n  if (press) spoonful(P);\n  P.spoon -= d * sp * 0.5;\n  if (P.spoon \u003c= 0 || P.n \u003c target(P) * 0.35) (P.spoon = 10), spoonful(P);\n\n  // The oil the fingertip drags: its own velocity under the pad, falling off\n  // over 5 LEDs, and a push out from under it.\n  const sig2 = 2 * 5 * 5, oil = P.oil;\n  const vel = (x, y, out) => {\n    const dx = x - fx, dy = y - fy, r2 = dx * dx + dy * dy;\n    if (r2 > 400) return (out[0] = 0), (out[1] = 0), 0;\n    const e = exp(-r2 / sig2), r = sqrt(r2) + 0.5, push = 1.5 * sp * e;\n    out[0] = P.fvx * e * 0.8 + (push * dx) / r;\n    out[1] = P.fvy * e * 0.8 + (push * dy) / r;\n    return e;\n  };\n  const v = [0, 0];\n\n  // Grains trail the oil and roll; under the pad they melt.\n  const melt = 0.05 + 0.32 * oil, mr = meanR(P);\n  for (let i = 0; i \u003c P.n; i++) {\n    if (P.fall[i]) {\n      const u = min(1, d * 9);\n      P.gx[i] += (P.tx[i] - P.gx[i]) * u;\n      P.gy[i] += (P.ty[i] - P.gy[i]) * u;\n      if (abs(P.tx[i] - P.gx[i]) + abs(P.ty[i] - P.gy[i]) \u003c 0.1) P.fall[i] = 0;\n      P.ph[i] += d * 6;\n      continue;\n    }\n    const e = vel(P.gx[i], P.gy[i], v), lag = min(1, d * 7);\n    // Grains in the flow knock into each other and scatter a little.\n    const jit = e > 0.1 ? 14 * e * sp * d : 0;\n    P.vx[i] += (v[0] - P.vx[i]) * lag + jit * (random() - 0.5) * 4;\n    P.vy[i] += (v[1] - P.vy[i]) * lag + jit * (random() - 0.5) * 4;\n    P.gx[i] = cl(P.gx[i] + P.vx[i] * d, 0, W - 0.01);\n    P.gy[i] = cl(P.gy[i] + P.vy[i] * d, 0, H - 0.01);\n    const s = abs(P.vx[i]) + abs(P.vy[i]);\n    P.ph[i] += d * (0.35 * sp + (s * 1.3) / (P.gs[i] * mr));\n    if (e > 0.05) P.gs[i] -= (d * melt * e) / mr;\n    if (P.gs[i] \u003c 0.35) kill(P, i--);\n  }\n\n  // The balm: its texture is carried by the same flow and slowly settles\n  // back; the gloss is laid down under the pad, spreads and dries.\n  const S = P.S, S2 = P.S2, G = P.G, G2 = P.G2, N0 = P.N0;\n  const back = d * 0.04, dry = d * (0.12 - 0.08 * oil), lay = d * 1.6, spread = min(0.24, 1.5 * d);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, e = vel(x, y, v);\n      let s = S[i];\n      if (e > 0.002) {\n        const sx = cl(x - v[0] * d, 0, W - 1.001), sy = cl(y - v[1] * d, 0, H - 1.001), ix = sx | 0, iy = sy | 0, tx = sx - ix, ty = sy - iy, j = iy * W + ix;\n        s = S[j] * (1 - tx) * (1 - ty) + S[j + 1] * tx * (1 - ty) + S[j + W] * (1 - tx) * ty + S[j + W + 1] * tx * ty;\n      }\n      S2[i] = s + (N0[i] - s) * back;\n      const l = x > 0 ? G[i - 1] : G[i], r = x \u003c W - 1 ? G[i + 1] : G[i], u = y > 0 ? G[i - W] : G[i], b = y \u003c H - 1 ? G[i + W] : G[i];\n      G2[i] = min(1, G[i] + (l + r + u + b - 4 * G[i]) * spread - G[i] * dry + lay * e);\n    }\n  (P.S = S2), (P.S2 = S), (P.G = G2), (P.G2 = G);\n}\n\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { S, G, img, col } = P, oil = P.oil, h = P.hue + 0.955, mr = meanR(P);\n  // Dry balm, wet oil, the crystal body and the sheen.\n  hsv(h, 0.42, 0.84, col, 0);\n  hsv(h + 0.015, 0.74, 0.64, col, 3);\n  // The light comes from the upper left and swings slowly to and fro, so\n  // the sheen slides over the balm even where the fingertip is not.\n  const la = -2.2 + 0.5 * sin(P.t * 0.21), LX = 0.75 * cos(la), LY = 0.75 * sin(la), LZ = 0.66;\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  hsv(h - 0.02, 0.09, 1, col, 6);\n  hsv(h - 0.03, 0.1, 1, col, 9);\n  // More oil: a wetter, smoother balm.\n  const base = 0.2 + 0.55 * oil, sh = 3.2 * (1 - 0.65 * oil);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const wet = min(1, base + G[i]);\n      const hx = sh * ((x \u003c W - 1 ? S[i + 1] : S[i]) - (x > 0 ? S[i - 1] : S[i])) + 2 * ((x \u003c W - 1 ? G[i + 1] : G[i]) - (x > 0 ? G[i - 1] : G[i]));\n      const hy = sh * ((y \u003c H - 1 ? S[i + W] : S[i]) - (y > 0 ? S[i - W] : S[i])) + 2 * ((y \u003c H - 1 ? G[i + W] : G[i]) - (y > 0 ? G[i - W] : G[i]));\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), nx = -hx * nl, ny = -hy * nl, nz = nl;\n      const dif = 0.8 + 0.35 * (nx * LX + ny * LY + nz * LZ - 0.7);\n      // A sharp sheen on the balm's relief, and over the oil the fingertip\n      // laid down a broad film of light.\n      const nh = max(0, nx * HX + ny * HY + nz * HZ), spec = (nh ** 60 * 1.3 + nh ** 6 * 0.18) * wet + G[i] * (0.1 + 0.5 * nh ** 10);\n      const tex = 0.88 + 0.26 * (S[i] - 0.5);\n      for (let c = 0; c \u003c 3; c++) {\n        const b = (col[c] + (col[3 + c] - col[c]) * wet) * dif * tex;\n        img[i * 3 + c] = b + (col[9 + c] - b) * min(1, spec);\n      }\n    }\n  // The grains: a shadow down and right, a body lit from the upper left,\n  // and a flash when a facet turns to the light.\n  for (let k = 0; k \u003c P.n; k++) {\n    const gx = P.gx[k], gy = P.gy[k], r = P.gs[k] * mr, ph = P.ph[k];\n    const gl = max(0, cos(ph)) ** 24, x0 = floor(gx - r - 1), x1 = floor(gx + r + 1), y0 = floor(gy - r - 1), y1 = floor(gy + r + 1);\n    const wetHere = min(1, base + G[cl(floor(gy), 0, H - 1) * W + cl(floor(gx), 0, W - 1)]);\n    const op = 0.96 - 0.4 * wetHere, tv = 0.86 + 0.14 * P.tint[k];\n    for (let y = max(0, y0); y \u003c= min(H - 1, y1); y++)\n      for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n        const dx = x + 0.5 - gx, dy = y + 0.5 - gy, dd = sqrt(dx * dx + dy * dy), cov = cl(r + 0.6 - dd, 0, 1);\n        const i = (y * W + x) * 3;\n        const sdx = dx - 0.8, sdy = dy - 0.8, sc = cl(r + 0.5 - sqrt(sdx * sdx + sdy * sdy), 0, 1) * (1 - cov) * 0.16;\n        if (sc > 0) for (let c = 0; c \u003c 3; c++) img[i + c] *= 1 - sc;\n        if (cov \u003c= 0) continue;\n        const lit = (0.8 + 0.2 * cl(-(dx * 0.6 + dy * 0.8) / max(r, 0.6), -1, 1)) * tv;\n        const a = cov * op;\n        for (let c = 0; c \u003c 3; c++) img[i + c] += (col[6 + c] * lit - img[i + c]) * a;\n        if (gl > 0.02) {\n          const f = gl * cov * (dd \u003c 0.8 ? 1 : 0.55);\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * f;\n        }\n      }\n    // A bright flash throws a short cross.\n    if (gl > 0.7 && r > 0.6) {\n      const cx = floor(gx), cy = floor(gy), f = (gl - 0.7) * 2, arm = r > 1.1 ? 2 : 1;\n      for (let a = 1; a \u003c= arm; a++)\n        for (const [ox, oy] of [[a, 0], [-a, 0], [0, a], [0, -a]]) {\n          const x = cx + ox, y = cy + oy;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const i = (y * W + x) * 3, ff = f / a;\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * ff;\n        }\n    }\n  }\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, img[i * 3]), min(255, img[i * 3 + 1]), min(255, img[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2."},{"name":"Grain","min":-1,"max":1,"about":"The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm."},{"name":"Oil","min":-1,"max":1,"about":"How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1."}],"start":[0,2,0,0.06],"measures":{"motion":0.0841,"detail":0.0638,"edges":0.1575,"complexity":2.6755,"coverage":1,"colour":0.1376,"drift":0.0416},"knobResponse":[0.1741,0.077,0.0995,0.1983]},{"slug":"sunglint","title":"Sunglint","family":"ocean","round":20,"note":"절벽에서 해를 마주 보면 수평선 아래로 윤슬 길이 내려오며 넓어져 패널을 채우고, 밀려오는 잔물결 줄마다 반짝임이 실려요. K1 을 누르면 돛단배가 빛 속을 검은 그림자로 가로질러요.","idea":"From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.","buttons":"K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.","code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","layer":{"id":"layer-sunglint","type":"code","name":"sunglint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet."},{"name":"Chop","min":0,"max":1,"about":"How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider."},{"name":"Wind","min":-1,"max":1,"about":"Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.5376,"detail":0.3357,"edges":0.4835,"complexity":2.2983,"coverage":0.8569,"colour":0.0799,"drift":0.0378},"knobResponse":[0.1189,0.329,0.2477,0.3023]},{"slug":"swatch-row","title":"Swatch Row","family":"cosmetic","round":30,"note":"보이지 않는 손가락이 아이보리 카드에 크림 안료를 한 줄씩 끌어 색조표를 채워요. 줄마다 한 단계씩 밝거나 짙고, K1 하나로 어떤 색 라인으로든 바뀌어요.","idea":"A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.","buttons":"K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.","code":"// ===== Patternflow pattern =====\n// Title:   Swatch Row\n// Family:  cosmetic\n// Idea:    A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after the makeup artist's swatch\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1\n//\n// Knob 1: Hue. Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum.\n// Knob 2: Speed. At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4.\n// Knob 3: Range. How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it.\n// Knob 4: Finish. At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles.\n// Buttons: K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.\n\nconst W = 64, H = 128, SL = 16, ROWS = H / SL, NT = W * SL;\nconst { min, floor, sqrt, sin, exp, abs, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Rose sits at 0.955 of the wheel; K1 adds to it.\nconst ROSE = 0.955;\n\n// The card: warm ivory, 198/186/164 in the middle, 10% dimmer at the side\n// edges and 7% at the ends, with a fixed paper grain of about 1%.\nconst GR = new Float32Array(W * H * 3);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - 32) / 32, dy = (y + 0.5 - 64) / 64;\n    const v = 1 - 0.1 * dx * dx - 0.07 * dy * dy + 0.024 * (hash(x, y, 7) - 0.5), i = (y * W + x) * 3;\n    (GR[i] = 198 * v), (GR[i + 1] = 186 * v), (GR[i + 2] = 164 * v);\n  }\n\n// Smooth value noise over a table of random numbers.\nconst n1 = (T, f) => {\n  const i = cl(floor(f), 0, T.length - 2), t = cl(f - i, 0, 1);\n  return T[i] + (T[i + 1] - T[i]) * t * t * (3 - 2 * t);\n};\nconst n2 = (T, n, fx, fy) => {\n  const i = cl(floor(fx), 0, T.length / n - 2), t = cl(fx - i, 0, 1), s = t * t * (3 - 2 * t);\n  return mix(n1(T.subarray(i * n, i * n + n), fy), n1(T.subarray(i * n + n, i * n + 2 * n), fy), s);\n};\nconst table = (n) => Float32Array.from({ length: n }, () => random());\n\n// One swatch, baked once into fields over its 64x16 slot: how opaque the\n// pigment is (A), how light against its own shade (V), where across the\n// stroke the LED sits (Q, -1 at the top edge, 1 at the bottom), how much the\n// highlight catches there (G), how far the finger must have come before it\n// lays this LED (R), and a fixed number for the sparkle (K).\n//\n// The stroke lands with a round cap of radius r, runs straight with a little\n// waver, and from a fraction ut of its length on the pigment runs out: the\n// stroke narrows, goes sheer, and the drag streaks, which follow the stroke,\n// drop out one by one, the weakest first, until the last one ends at xe.\nfunction swatch(n) {\n  const s = {\n    n, jit: (random() - 0.5) * 0.05, seed: floor(random() * 1e6),\n    A: new Float32Array(NT), V: new Float32Array(NT), Q: new Float32Array(NT), G: new Float32Array(NT), R: new Float32Array(NT), K: new Float32Array(NT),\n    p: 0, go: false, wait: 0, xa: 0, xb: 0, prev: null, wipe: 1, wwait: 0,\n  };\n  const r = 5.3 + random() * 0.6, x0 = 2 + random() * 3.5, xe = 58 + random() * 6, ut = 0.4 + random() * 0.16;\n  const slope = (random() - 0.5) * 0.04, amp = 0.2 + random() * 0.35, fr = 0.05 + random() * 0.06, ph = random() * 2 * PI, xm = (x0 + xe) / 2;\n  const T1 = table(24), T2 = table(24 * 10), T3 = table(24 * 24), TE = table(20);\n  for (let j = 0; j \u003c SL; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, xc = x + 0.5;\n      const yc = 7.5 + slope * (xc - xm) + amp * sin(xc * fr + ph), q = j + 0.5 - yc, u = (xc - x0) / (xe - x0);\n      let hw;\n      if (xc \u003c x0 + r) {\n        const d = (x0 + r - xc) / r;\n        hw = d >= 1 ? -1 : r * sqrt(1 - d * d);\n      } else hw = r * (1 - 0.06 * u - 0.24 * sm(ut, 1.1, u));\n      hw += 0.5 * (n1(TE, xc / 4 + 2) - 0.5);\n      const cov = cl(hw - abs(q) + 0.5, 0, 1);\n      const st = 0.62 * n1(T1, q * 1.15 + 11) + 0.38 * n2(T2, 24, xc / 8, q + 11);\n      // In the tail the streaks also break along their length, where the\n      // last of the pigment skips over the card.\n      const thin = sm(ut, 1, u), brk = n2(T3, 24, xc / 2.6, q * 1.3 + 11);\n      const keep = sm(-0.2, 0.2, st * 1.1 + 0.3 - thin * (1.05 + 0.7 * brk));\n      s.A[i] = cov * (0.93 + 0.07 * st) * keep * (1 - 0.5 * thin) * (1 - sm(0.94, 1.04, u));\n      // Where the finger landed the pigment piles up a shade deeper, and the\n      // drag pushes a little more of it to the two long edges.\n      const ce = xc - (x0 + r - sqrt(Math.max(0, r * r - q * q)));\n      let v = (1 + 0.24 * (st - 0.5)) * (1 - 0.1 * sm(0.55, 1, abs(q) / Math.max(hw, 0.5)));\n      if (ce \u003c 2.5) v *= 0.8 + 0.2 * cl(ce / 2.5, 0, 1);\n      s.V[i] = v;\n      s.Q[i] = q / Math.max(hw, 1);\n      s.G[i] = (0.45 + st) * (1 - 0.7 * thin);\n      s.R[i] = xc + 0.85 * (r - sqrt(Math.max(0, r * r - q * q)));\n      s.K[i] = hash(x, j, s.seed);\n    }\n  (s.xa = x0 - 1.5), (s.xb = xe + r + 2);\n  return s;\n}\n\n// The finger sets off quickly and slows as the pigment runs out.\nconst travel = (p) => 0.4 * p * p * (3 - 2 * p) + 0.6 * (1 - (1 - p) * (1 - p));\nconst fingerAt = (s) => s.xa + (s.xb - s.xa) * travel(s.p);\n\nexport function setup(params) {\n  const L = [];\n  for (let k = 0; k \u003c= ROWS; k++) {\n    const s = swatch(k);\n    if (k \u003c ROWS - 1) s.p = 1;\n    L.push(s);\n  }\n  // The card opens with seven swatches down and the eighth being dragged.\n  (L[ROWS - 1].go = true), (L[ROWS - 1].p = 0.12);\n  params.s = {\n    L, n: ROWS + 1, off: 0, phase: 0, pt: 0, t: 0, sweep: 30, hue: 0, speed: 2, width: 0.52, fin: 0.06,\n    col: new Float32Array((ROWS + 1) * 6), SH: new Float32Array(64), SW: new Float32Array(180),\n  };\n}\n\n// The stack glides up a row: the top swatch leaves, an empty slot comes in\n// at the bottom and the finger starts on the slot above it.\nfunction shift(P) {\n  P.L.shift();\n  P.L.push(swatch(P.n++));\n  (P.off = 0), (P.phase = 0), (P.pt = 0);\n  const B = P.L[ROWS - 1];\n  (B.go = true), (B.p = 0);\n}\n\n// K1: a pad wipes each swatch off left to right, row after row, and a\n// finger follows each wipe with a fresh stroke of the same shade.\nfunction reswatch(P) {\n  if (P.phase === 2) shift(P);\n  P.phase = 0;\n  for (let k = 0; k \u003c ROWS; k++) {\n    const old = P.L[k], s = swatch(old.n);\n    old.prev = null;\n    if (old.p > 0) (s.prev = old), (s.wipe = 0), (s.wwait = 0.07 * k);\n    (s.go = true), (s.p = 0), (s.wait = 0.07 * k + 0.3);\n    P.L[k] = s;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.width = 0.04 + 0.48 * (cl(k[2], -1, 1) + 1);\n  P.fin = cl(k[3], -1, 1);\n  const sp = P.speed, drag = 2.1 / sp, hold = 0.9 / sp, glide = 1.1 / sp;\n  P.t += d;\n  // A band of light crosses the card corner to corner every 18 s at Speed 2.\n  P.sweep += d * 7 * sp;\n  if (P.sweep > 200) P.sweep -= 250;\n  if (input.btnPressed && input.btnPressed[0]) reswatch(P);\n  for (const s of P.L) {\n    if (s.prev) {\n      if (s.wwait > 0) s.wwait -= d;\n      else if ((s.wipe += d / 0.45) >= 1) s.prev = null;\n    }\n    if (s.go && s.p \u003c 1) {\n      if (s.wait > 0) s.wait -= d;\n      else s.p = min(1, s.p + d / drag);\n    }\n  }\n  const B = P.L[ROWS - 1];\n  if (P.phase === 0) {\n    if (B.p >= 1) (P.phase = 1), (P.pt = 0);\n  } else if (P.phase === 1) {\n    if ((P.pt += d) >= hold) (P.phase = 2), (P.pt = 0);\n  } else {\n    P.pt += d;\n    const u = min(1, P.pt / glide);\n    P.off = SL * u * u * (3 - 2 * u);\n    if (u >= 1) shift(P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = 255 * rgb[c];\n}\n\n// The shade of swatch n: the range runs light to deep and back over 14\n// swatches, so the eight on the card always show a stretch of it.\nfunction tone(P, s, m, out, o) {\n  const a = s.n % 14, tri = (a \u003c= 7 ? a : 14 - a) / 7, w = P.width;\n  const d = cl(0.5 + w * (tri - 0.5) + s.jit, 0, 1);\n  const h = P.hue + ROSE + 0.05 * w * (0.5 - d);\n  hsv(h, 0.3 + 0.58 * d, (0.98 - 0.56 * d) * (1 + 0.12 * m), out, o);\n  // The highlight: a pale tint of the same hue, and towards metallic a\n  // champagne one.\n  hsv(h + 0.02 * m, (0.3 + 0.58 * d) * 0.35, 1, out, o + 3);\n  for (let c = 0; c \u003c 3; c++) out[o + 3 + c] = mix(mix(out[o + 3 + c], 255, 0.35), [255, 226, 186][c], 0.55 * m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.fin, m = sm(0.15, 1, f), col = P.col, SH = P.SH, SW = P.SW, L = P.L;\n  // Matte keeps 3% of a sheen, satin 50%, metallic 95%, narrower as it\n  // goes; metallic also throws a weaker second light off the lower edge.\n  const kS = 0.03 + 0.47 * sm(-1, 0, f) + 0.45 * sm(0, 1, f), wS = f \u003c 0 ? mix(0.4, 0.75, -f) : mix(0.4, 0.26, f);\n  for (let b = 0; b \u003c 64; b++) {\n    const q = -1.6 + (3.2 * b) / 63, e = (q + 0.3) / wS, e2 = (q - 0.72) / 0.16;\n    SH[b] = kS * exp(-e * e) + 0.35 * m * exp(-e2 * e2);\n  }\n  const base = mix(0.85, 0.5, m), amp = mix(0.45, 1.4, m);\n  for (let g = 0; g \u003c 180; g++) {\n    const e = (g - P.sweep) / 15;\n    SW[g] = exp(-e * e);\n  }\n  for (let k = 0; k \u003c= ROWS; k++) tone(P, L[k], m, col, k * 6);\n  const dens = 1 - 0.15 * m, t = P.t, off = round(P.off);\n  const XF = L.map((s) => (s.p \u003c 1 ? fingerAt(s) : 1e3)), PF = L.map((s) => (s.prev ? fingerAt(s.prev) : 0));\n  const WX = L.map((s) => -6 + 78 * s.wipe);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = y + off, k = floor(ty / SL), j = ty - k * SL, s = L[k], o = k * 6, xf = XF[k];\n    for (let x = 0; x \u003c W; x++) {\n      const gi = (y * W + x) * 3;\n      let r = GR[gi], g = GR[gi + 1], b = GR[gi + 2];\n      const i = j * W + x;\n      // The swatch being wiped off, still there right of the round edge of\n      // the pad.\n      if (s.prev) {\n        const S = s.prev, e = WX[k] - 2.5 * S.Q[i] * S.Q[i], a = S.A[i] * cl((PF[k] - S.R[i]) * 0.8 + 0.5, 0, 1) * sm(e - 2.5, e + 2.5, x);\n        if (a > 0.004) {\n          const v = S.V[i];\n          (r = mix(r, col[o] * v, a)), (g = mix(g, col[o + 1] * v, a)), (b = mix(b, col[o + 2] * v, a));\n        }\n      }\n      let a = s.A[i];\n      if (a > 0.004) {\n        let wet = 0;\n        if (xf \u003c 1e3) {\n          const dx = xf - s.R[i];\n          a *= cl(dx * 0.8 + 0.5, 0, 1);\n          if (dx > 0 && dx \u003c 4) wet = 0.5 * (1 - dx / 4);\n        }\n        if (a > 0.004) {\n          const Q = s.Q[i], v = s.V[i] * (1 - 0.42 * m * sm(-0.1, 0.6, Q));\n          let pr = col[o] * v, pg = col[o + 1] * v, pb = col[o + 2] * v;\n          const lt = SW[cl(round(y + 0.55 * x), 0, 179)];\n          const h = min(1, SH[cl(round(((Q + 1.6) * 63) / 3.2), 0, 63)] * s.G[i] * (base + amp * lt) + wet);\n          (pr = mix(pr, col[o + 3], h)), (pg = mix(pg, col[o + 4], h)), (pb = mix(pb, col[o + 5], h));\n          const K = s.K[i];\n          if (m > 0 && K > dens && a > 0.4) {\n            const tw = sin(K * 6283 + t * 2.6);\n            if (tw > 0.3) {\n              const z = (tw - 0.3) / 0.7, spk = z * z * m * (0.45 + 0.9 * lt);\n              (pr = mix(pr, 255, spk)), (pg = mix(pg, 248, spk)), (pb = mix(pb, 232, spk));\n            }\n          }\n          (r = mix(r, pr, a)), (g = mix(g, pg, a)), (b = mix(b, pb, a));\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-swatch-row","type":"code","name":"swatch-row","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Swatch Row\n// Family:  cosmetic\n// Idea:    A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after the makeup artist's swatch\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1\n//\n// Knob 1: Hue. Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum.\n// Knob 2: Speed. At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4.\n// Knob 3: Range. How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it.\n// Knob 4: Finish. At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles.\n// Buttons: K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.\n\nconst W = 64, H = 128, SL = 16, ROWS = H / SL, NT = W * SL;\nconst { min, floor, sqrt, sin, exp, abs, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Rose sits at 0.955 of the wheel; K1 adds to it.\nconst ROSE = 0.955;\n\n// The card: warm ivory, 198/186/164 in the middle, 10% dimmer at the side\n// edges and 7% at the ends, with a fixed paper grain of about 1%.\nconst GR = new Float32Array(W * H * 3);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - 32) / 32, dy = (y + 0.5 - 64) / 64;\n    const v = 1 - 0.1 * dx * dx - 0.07 * dy * dy + 0.024 * (hash(x, y, 7) - 0.5), i = (y * W + x) * 3;\n    (GR[i] = 198 * v), (GR[i + 1] = 186 * v), (GR[i + 2] = 164 * v);\n  }\n\n// Smooth value noise over a table of random numbers.\nconst n1 = (T, f) => {\n  const i = cl(floor(f), 0, T.length - 2), t = cl(f - i, 0, 1);\n  return T[i] + (T[i + 1] - T[i]) * t * t * (3 - 2 * t);\n};\nconst n2 = (T, n, fx, fy) => {\n  const i = cl(floor(fx), 0, T.length / n - 2), t = cl(fx - i, 0, 1), s = t * t * (3 - 2 * t);\n  return mix(n1(T.subarray(i * n, i * n + n), fy), n1(T.subarray(i * n + n, i * n + 2 * n), fy), s);\n};\nconst table = (n) => Float32Array.from({ length: n }, () => random());\n\n// One swatch, baked once into fields over its 64x16 slot: how opaque the\n// pigment is (A), how light against its own shade (V), where across the\n// stroke the LED sits (Q, -1 at the top edge, 1 at the bottom), how much the\n// highlight catches there (G), how far the finger must have come before it\n// lays this LED (R), and a fixed number for the sparkle (K).\n//\n// The stroke lands with a round cap of radius r, runs straight with a little\n// waver, and from a fraction ut of its length on the pigment runs out: the\n// stroke narrows, goes sheer, and the drag streaks, which follow the stroke,\n// drop out one by one, the weakest first, until the last one ends at xe.\nfunction swatch(n) {\n  const s = {\n    n, jit: (random() - 0.5) * 0.05, seed: floor(random() * 1e6),\n    A: new Float32Array(NT), V: new Float32Array(NT), Q: new Float32Array(NT), G: new Float32Array(NT), R: new Float32Array(NT), K: new Float32Array(NT),\n    p: 0, go: false, wait: 0, xa: 0, xb: 0, prev: null, wipe: 1, wwait: 0,\n  };\n  const r = 5.3 + random() * 0.6, x0 = 2 + random() * 3.5, xe = 58 + random() * 6, ut = 0.4 + random() * 0.16;\n  const slope = (random() - 0.5) * 0.04, amp = 0.2 + random() * 0.35, fr = 0.05 + random() * 0.06, ph = random() * 2 * PI, xm = (x0 + xe) / 2;\n  const T1 = table(24), T2 = table(24 * 10), T3 = table(24 * 24), TE = table(20);\n  for (let j = 0; j \u003c SL; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, xc = x + 0.5;\n      const yc = 7.5 + slope * (xc - xm) + amp * sin(xc * fr + ph), q = j + 0.5 - yc, u = (xc - x0) / (xe - x0);\n      let hw;\n      if (xc \u003c x0 + r) {\n        const d = (x0 + r - xc) / r;\n        hw = d >= 1 ? -1 : r * sqrt(1 - d * d);\n      } else hw = r * (1 - 0.06 * u - 0.24 * sm(ut, 1.1, u));\n      hw += 0.5 * (n1(TE, xc / 4 + 2) - 0.5);\n      const cov = cl(hw - abs(q) + 0.5, 0, 1);\n      const st = 0.62 * n1(T1, q * 1.15 + 11) + 0.38 * n2(T2, 24, xc / 8, q + 11);\n      // In the tail the streaks also break along their length, where the\n      // last of the pigment skips over the card.\n      const thin = sm(ut, 1, u), brk = n2(T3, 24, xc / 2.6, q * 1.3 + 11);\n      const keep = sm(-0.2, 0.2, st * 1.1 + 0.3 - thin * (1.05 + 0.7 * brk));\n      s.A[i] = cov * (0.93 + 0.07 * st) * keep * (1 - 0.5 * thin) * (1 - sm(0.94, 1.04, u));\n      // Where the finger landed the pigment piles up a shade deeper, and the\n      // drag pushes a little more of it to the two long edges.\n      const ce = xc - (x0 + r - sqrt(Math.max(0, r * r - q * q)));\n      let v = (1 + 0.24 * (st - 0.5)) * (1 - 0.1 * sm(0.55, 1, abs(q) / Math.max(hw, 0.5)));\n      if (ce \u003c 2.5) v *= 0.8 + 0.2 * cl(ce / 2.5, 0, 1);\n      s.V[i] = v;\n      s.Q[i] = q / Math.max(hw, 1);\n      s.G[i] = (0.45 + st) * (1 - 0.7 * thin);\n      s.R[i] = xc + 0.85 * (r - sqrt(Math.max(0, r * r - q * q)));\n      s.K[i] = hash(x, j, s.seed);\n    }\n  (s.xa = x0 - 1.5), (s.xb = xe + r + 2);\n  return s;\n}\n\n// The finger sets off quickly and slows as the pigment runs out.\nconst travel = (p) => 0.4 * p * p * (3 - 2 * p) + 0.6 * (1 - (1 - p) * (1 - p));\nconst fingerAt = (s) => s.xa + (s.xb - s.xa) * travel(s.p);\n\nexport function setup(params) {\n  const L = [];\n  for (let k = 0; k \u003c= ROWS; k++) {\n    const s = swatch(k);\n    if (k \u003c ROWS - 1) s.p = 1;\n    L.push(s);\n  }\n  // The card opens with seven swatches down and the eighth being dragged.\n  (L[ROWS - 1].go = true), (L[ROWS - 1].p = 0.12);\n  params.s = {\n    L, n: ROWS + 1, off: 0, phase: 0, pt: 0, t: 0, sweep: 30, hue: 0, speed: 2, width: 0.52, fin: 0.06,\n    col: new Float32Array((ROWS + 1) * 6), SH: new Float32Array(64), SW: new Float32Array(180),\n  };\n}\n\n// The stack glides up a row: the top swatch leaves, an empty slot comes in\n// at the bottom and the finger starts on the slot above it.\nfunction shift(P) {\n  P.L.shift();\n  P.L.push(swatch(P.n++));\n  (P.off = 0), (P.phase = 0), (P.pt = 0);\n  const B = P.L[ROWS - 1];\n  (B.go = true), (B.p = 0);\n}\n\n// K1: a pad wipes each swatch off left to right, row after row, and a\n// finger follows each wipe with a fresh stroke of the same shade.\nfunction reswatch(P) {\n  if (P.phase === 2) shift(P);\n  P.phase = 0;\n  for (let k = 0; k \u003c ROWS; k++) {\n    const old = P.L[k], s = swatch(old.n);\n    old.prev = null;\n    if (old.p > 0) (s.prev = old), (s.wipe = 0), (s.wwait = 0.07 * k);\n    (s.go = true), (s.p = 0), (s.wait = 0.07 * k + 0.3);\n    P.L[k] = s;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.width = 0.04 + 0.48 * (cl(k[2], -1, 1) + 1);\n  P.fin = cl(k[3], -1, 1);\n  const sp = P.speed, drag = 2.1 / sp, hold = 0.9 / sp, glide = 1.1 / sp;\n  P.t += d;\n  // A band of light crosses the card corner to corner every 18 s at Speed 2.\n  P.sweep += d * 7 * sp;\n  if (P.sweep > 200) P.sweep -= 250;\n  if (input.btnPressed && input.btnPressed[0]) reswatch(P);\n  for (const s of P.L) {\n    if (s.prev) {\n      if (s.wwait > 0) s.wwait -= d;\n      else if ((s.wipe += d / 0.45) >= 1) s.prev = null;\n    }\n    if (s.go && s.p \u003c 1) {\n      if (s.wait > 0) s.wait -= d;\n      else s.p = min(1, s.p + d / drag);\n    }\n  }\n  const B = P.L[ROWS - 1];\n  if (P.phase === 0) {\n    if (B.p >= 1) (P.phase = 1), (P.pt = 0);\n  } else if (P.phase === 1) {\n    if ((P.pt += d) >= hold) (P.phase = 2), (P.pt = 0);\n  } else {\n    P.pt += d;\n    const u = min(1, P.pt / glide);\n    P.off = SL * u * u * (3 - 2 * u);\n    if (u >= 1) shift(P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = 255 * rgb[c];\n}\n\n// The shade of swatch n: the range runs light to deep and back over 14\n// swatches, so the eight on the card always show a stretch of it.\nfunction tone(P, s, m, out, o) {\n  const a = s.n % 14, tri = (a \u003c= 7 ? a : 14 - a) / 7, w = P.width;\n  const d = cl(0.5 + w * (tri - 0.5) + s.jit, 0, 1);\n  const h = P.hue + ROSE + 0.05 * w * (0.5 - d);\n  hsv(h, 0.3 + 0.58 * d, (0.98 - 0.56 * d) * (1 + 0.12 * m), out, o);\n  // The highlight: a pale tint of the same hue, and towards metallic a\n  // champagne one.\n  hsv(h + 0.02 * m, (0.3 + 0.58 * d) * 0.35, 1, out, o + 3);\n  for (let c = 0; c \u003c 3; c++) out[o + 3 + c] = mix(mix(out[o + 3 + c], 255, 0.35), [255, 226, 186][c], 0.55 * m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.fin, m = sm(0.15, 1, f), col = P.col, SH = P.SH, SW = P.SW, L = P.L;\n  // Matte keeps 3% of a sheen, satin 50%, metallic 95%, narrower as it\n  // goes; metallic also throws a weaker second light off the lower edge.\n  const kS = 0.03 + 0.47 * sm(-1, 0, f) + 0.45 * sm(0, 1, f), wS = f \u003c 0 ? mix(0.4, 0.75, -f) : mix(0.4, 0.26, f);\n  for (let b = 0; b \u003c 64; b++) {\n    const q = -1.6 + (3.2 * b) / 63, e = (q + 0.3) / wS, e2 = (q - 0.72) / 0.16;\n    SH[b] = kS * exp(-e * e) + 0.35 * m * exp(-e2 * e2);\n  }\n  const base = mix(0.85, 0.5, m), amp = mix(0.45, 1.4, m);\n  for (let g = 0; g \u003c 180; g++) {\n    const e = (g - P.sweep) / 15;\n    SW[g] = exp(-e * e);\n  }\n  for (let k = 0; k \u003c= ROWS; k++) tone(P, L[k], m, col, k * 6);\n  const dens = 1 - 0.15 * m, t = P.t, off = round(P.off);\n  const XF = L.map((s) => (s.p \u003c 1 ? fingerAt(s) : 1e3)), PF = L.map((s) => (s.prev ? fingerAt(s.prev) : 0));\n  const WX = L.map((s) => -6 + 78 * s.wipe);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = y + off, k = floor(ty / SL), j = ty - k * SL, s = L[k], o = k * 6, xf = XF[k];\n    for (let x = 0; x \u003c W; x++) {\n      const gi = (y * W + x) * 3;\n      let r = GR[gi], g = GR[gi + 1], b = GR[gi + 2];\n      const i = j * W + x;\n      // The swatch being wiped off, still there right of the round edge of\n      // the pad.\n      if (s.prev) {\n        const S = s.prev, e = WX[k] - 2.5 * S.Q[i] * S.Q[i], a = S.A[i] * cl((PF[k] - S.R[i]) * 0.8 + 0.5, 0, 1) * sm(e - 2.5, e + 2.5, x);\n        if (a > 0.004) {\n          const v = S.V[i];\n          (r = mix(r, col[o] * v, a)), (g = mix(g, col[o + 1] * v, a)), (b = mix(b, col[o + 2] * v, a));\n        }\n      }\n      let a = s.A[i];\n      if (a > 0.004) {\n        let wet = 0;\n        if (xf \u003c 1e3) {\n          const dx = xf - s.R[i];\n          a *= cl(dx * 0.8 + 0.5, 0, 1);\n          if (dx > 0 && dx \u003c 4) wet = 0.5 * (1 - dx / 4);\n        }\n        if (a > 0.004) {\n          const Q = s.Q[i], v = s.V[i] * (1 - 0.42 * m * sm(-0.1, 0.6, Q));\n          let pr = col[o] * v, pg = col[o + 1] * v, pb = col[o + 2] * v;\n          const lt = SW[cl(round(y + 0.55 * x), 0, 179)];\n          const h = min(1, SH[cl(round(((Q + 1.6) * 63) / 3.2), 0, 63)] * s.G[i] * (base + amp * lt) + wet);\n          (pr = mix(pr, col[o + 3], h)), (pg = mix(pg, col[o + 4], h)), (pb = mix(pb, col[o + 5], h));\n          const K = s.K[i];\n          if (m > 0 && K > dens && a > 0.4) {\n            const tw = sin(K * 6283 + t * 2.6);\n            if (tw > 0.3) {\n              const z = (tw - 0.3) / 0.7, spk = z * z * m * (0.45 + 0.9 * lt);\n              (pr = mix(pr, 255, spk)), (pg = mix(pg, 248, spk)), (pb = mix(pb, 232, spk));\n            }\n          }\n          (r = mix(r, pr, a)), (g = mix(g, pg, a)), (b = mix(b, pb, a));\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4."},{"name":"Range","min":-1,"max":1,"about":"How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it."},{"name":"Finish","min":-1,"max":1,"about":"At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles."}],"start":[0,2,0,0.06],"measures":{"motion":0.1965,"detail":0.0215,"edges":0.0463,"complexity":1.8772,"coverage":1,"colour":0.2018,"drift":0.0306},"knobResponse":[0.1202,0.0645,0.0452,0.0494]},{"slug":"taffy-cream","title":"Taffy Cream","family":"cosmetic","round":37,"note":"라일락 크림과 아이보리 크림이 높은 통을 채우고, 보이지 않는 핀 셋이 둘씩 서로를 한 바퀴씩 돌며 태피처럼 잡아당겨요. 두 크림의 경계가 윤기 있는 주름으로 늘어나 한 주기에 13배쯤 길어지며 겹이 늘고 가늘어지다 파스텔로 섞이면, 아이보리 테를 두른 새 덩이가 핀이 지날 길에 놓여요. K3 은 핀을 다섯까지 늘리고, 누르면 새 덩이를 바로 놓아요.","idea":"A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.","buttons":"K1 tap lays a fresh dollop in now, on the path of the pins that turn next.","code":"// ===== Patternflow pattern =====\n// Title:   Taffy Cream\n// Family:  cosmetic\n// Idea:    A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after two-tone cream being pulled in a cosmetics mixing vat, with the pins moving as a taffy puller, a rod-stirring protocol in the sense of Philip Boyland, Hassan Aref and Mark Stremler (2000)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1\n//\n// Knob 1: Hue. The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white.\n// Knob 2: Speed. At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower.\n// Knob 3: Pins. How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns.\n// Knob 4: Gloss. At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen.\n// Buttons: K1 tap lays a fresh dollop in now, on the path of the pins that turn next.\n\n// The pins move as the taffy puller: pins on a line, neighbours turning\n// once round each other, the turns alternately clockwise and anticlockwise.\n// The braid of three pins is s1^2 s2^-2, and its Burau matrix at t = -1 is\n// [[5, 2], [2, 1]], whose larger eigenvalue is 3 + 2 sqrt 2 = 5.83, the\n// silver ratio squared: the least a line caught round the pins must be\n// stretched by in one period, whatever the cream between them does.\n// Boyland, Aref and Stremler's half turns, s1 s2^-1, give the golden ratio\n// squared, 2.62. For four and five pins the same matrices give at least 9.9\n// and 12.4 a period of three and four turns. Followed in a scratch script\n// through this pattern's own flow, a line across the middle of the vat grew\n// 17, 13 and 14 times in three periods with three pins, 13 a period with\n// four and 19 to 23 with five: above the floor, as the cream round each\n// pin is sheared besides.\n//\n// The flow: each moving pin carries the cream round it with a stream\n// function psi = (V x (p - r)) g(|p - r|), g = exp(-d^2 / 2 s^2), so cream\n// at the pin goes with the pin and cream a few s away stays put. Each pin\n// has a mirror image behind each of the four walls, moving as its\n// reflection, which takes psi to zero along the walls, so no cream crosses\n// them and it slides along them freely. The velocity is the curl of psi,\n// so the cream keeps its volume. It is worked out on the LED corners, once\n// a step, and read between them.\n//\n// The first try tapered psi to zero over the last 5 LEDs instead. A pin\n// passing 14 LEDs from a side wall left psi near 350 there, and the cream\n// a pin carries comes back round it in a ring two to three s out, so even\n// the top wall, 28 LEDs above the highest pin, saw psi near 75. Squeezed\n// to zero in 5 LEDs, either drove a jet of 40 to 50 LEDs a second along\n// the wall that combed the cream there into stair steps. With the images\n// every corner stays 3.5 s or more from any pin, where g is 0.002, and no\n// taper is needed.\n\nconst W = 64, H = 128, N = W * H;\n// The cream is followed on a grid twice as fine as the LEDs.\nconst GW = 128, GH = 256, GN = GW * GH;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n// One turn takes this many seconds at Speed 1.\nconst TURN = 6;\n// A dollop every this many turns.\nconst EVERY = 5;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The pins stand on x = 32, sp apart and centred in the vat.\nfunction layout(n) {\n  const sp = min(36, 116 / n), ys = [];\n  for (let j = 0; j \u003c n; j++) ys.push(64 + (j - (n - 1) / 2) * sp);\n  return { n, sp, ys, sg: 0.3 * sp };\n}\n\n// The turning pair and the two pins' places and velocities at phase f of\n// turn k: pair j = k mod (n - 1), clockwise for even j. The angle eases in\n// and out, so a turn starts and ends at rest and the next pair takes over.\nfunction pins(S, out) {\n  const L = S.lay, j = S.turn % (L.n - 1), dir = j % 2 === 0 ? 1 : -1, f = S.phase;\n  const cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const th = 2 * PI * (f - sin(2 * PI * f) / (2 * PI)), om = (2 * PI * (1 - cos(2 * PI * f))) / (S.turnLen || 1);\n  for (let k = 0; k \u003c 2; k++) {\n    const al = (k === 0 ? -PI / 2 : PI / 2) + dir * th;\n    out[k * 4] = 32 + R * cos(al);\n    out[k * 4 + 1] = cy + R * sin(al);\n    out[k * 4 + 2] = -R * sin(al) * dir * om;\n    out[k * 4 + 3] = R * cos(al) * dir * om;\n  }\n  return out;\n}\n\n// Velocity at (x, y) in LED units, written to S.vx, S.vy.\nfunction vel(S, x, y, P) {\n  const is2 = 1 / (S.lay.sg * S.lay.sg);\n  let px = 0, py = 0;\n  for (let k = 0; k \u003c 8; k += 4)\n    for (let m = 0; m \u003c 5; m++) {\n      // The pin, then its images behind the left, right, top and bottom walls.\n      const rx = m === 1 ? -P[k] : m === 2 ? 2 * W - P[k] : P[k], ry = m === 3 ? -P[k + 1] : m === 4 ? 2 * H - P[k + 1] : P[k + 1];\n      const vx = m === 1 || m === 2 ? -P[k + 2] : P[k + 2], vy = m === 3 || m === 4 ? -P[k + 3] : P[k + 3];\n      const dx = x - rx, dy = y - ry, d2 = (dx * dx + dy * dy) * is2;\n      if (d2 > 30) continue;\n      const g = Math.exp(-0.5 * d2), c = vx * dy - vy * dx;\n      px += -vy * g - c * g * dx * is2;\n      py += vx * g - c * g * dy * is2;\n    }\n  S.vx = py;\n  S.vy = -px;\n}\n\n// Catmull-Rom sample of the fine grid at grid coordinates (gx, gy), held\n// between the four nearest values so a stripe edge never rings.\nfunction sample(c, gx, gy) {\n  gx = cl(gx, 0, GW - 1.001);\n  gy = cl(gy, 0, GH - 1.001);\n  const ix = floor(gx), iy = floor(gy), fx = gx - ix, fy = gy - iy;\n  const wx0 = ((-0.5 * fx + 1) * fx - 0.5) * fx, wx1 = (1.5 * fx - 2.5) * fx * fx + 1, wx2 = ((-1.5 * fx + 2) * fx + 0.5) * fx, wx3 = (0.5 * fx - 0.5) * fx * fx;\n  const wy0 = ((-0.5 * fy + 1) * fy - 0.5) * fy, wy1 = (1.5 * fy - 2.5) * fy * fy + 1, wy2 = ((-1.5 * fy + 2) * fy + 0.5) * fy, wy3 = (0.5 * fy - 0.5) * fy * fy;\n  const x0 = max(ix - 1, 0), x2 = ix + 1, x3 = min(ix + 2, GW - 1);\n  let s = 0;\n  for (let k = 0; k \u003c 4; k++) {\n    const row = min(max(iy - 1 + k, 0), GH - 1) * GW, wy = k === 0 ? wy0 : k === 1 ? wy1 : k === 2 ? wy2 : wy3;\n    s += wy * (c[row + x0] * wx0 + c[row + ix] * wx1 + c[row + x2] * wx2 + c[row + x3] * wx3);\n  }\n  const a = c[iy * GW + ix], b = c[iy * GW + x2], d = c[(iy + 1) * GW + ix], e = c[(iy + 1) * GW + x2];\n  return cl(s, min(min(a, b), min(d, e)), max(max(a, b), max(d, e)));\n}\n\n// One step of the cream: each fine cell looks back along the flow, a\n// midpoint step, and takes what was there. Cells under LEDs whose corners\n// all move less than a ten-thousandth of an LED a step are copied as they\n// are; at that rate a still cell and a moving neighbour part by 0.2 LED in\n// a minute, and the turning pair changes long before.\nconst VW = W + 1, VH = H + 1;\nfunction advect(S, dt) {\n  const P = pins(S, S.P), c = S.c, o = S.c2, U = S.U, V = S.V, still = S.still;\n  for (let y = 0; y \u003c VH; y++)\n    for (let x = 0; x \u003c VW; x++) {\n      vel(S, x, y, P);\n      U[y * VW + x] = S.vx;\n      V[y * VW + x] = S.vy;\n    }\n  const lim = (1e-4 / dt) * (1e-4 / dt);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * VW + x, r = q + VW;\n      const m = max(max(U[q] * U[q] + V[q] * V[q], U[q + 1] * U[q + 1] + V[q + 1] * V[q + 1]), max(U[r] * U[r] + V[r] * V[r], U[r + 1] * U[r + 1] + V[r + 1] * V[r + 1]));\n      still[y * W + x] = m \u003c lim ? 1 : 0;\n    }\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, ly = gy >> 1;\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const p = gy * GW + gx;\n      if (still[ly * W + (gx >> 1)]) {\n        o[p] = c[p];\n        continue;\n      }\n      const x = (gx + 0.5) / 2;\n      // Bilinear velocity at (x, y), then at the midpoint back along it.\n      let ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, q = iy * VW + ix;\n      let vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      let vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      const mx = cl(x - 0.5 * dt * vx, 0, W - 0.001), my = cl(y - 0.5 * dt * vy, 0, H - 0.001);\n      (ix = floor(mx)), (iy = floor(my)), (fx = mx - ix), (fy = my - iy), (q = iy * VW + ix);\n      vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      o[p] = sample(c, (x - dt * vx) * 2 - 0.5, (y - dt * vy) * 2 - 0.5);\n    }\n  }\n  S.c = o;\n  S.c2 = c;\n}\n\n// A dollop: a tinted core with an ivory rim, its edge wobbling on two\n// harmonics, laid where the next turn's pins will pass.\nfunction dollop(S) {\n  const L = S.lay, j = S.turn % (L.n - 1), cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const al = random() * 2 * PI, x0 = 32 + R * cos(al) * 0.8, y0 = cy + R * sin(al) * 0.8;\n  const r1 = 0.36 * L.sp + 4, r2 = r1 + 4 + 0.08 * L.sp, p1 = random() * 6.3, p2 = random() * 6.3, c = S.c;\n  for (let gy = 0; gy \u003c GH; gy++)\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const dx = (gx + 0.5) / 2 - x0, dy = (gy + 0.5) / 2 - y0, d = sqrt(dx * dx + dy * dy);\n      if (d > r2 * 1.3 + 1) continue;\n      const an = Math.atan2(dy, dx), wob = 1 + 0.12 * sin(2 * an + p1) + 0.07 * sin(3 * an + p2);\n      const e = d / wob;\n      if (e > r2 + 0.5) continue;\n      const core = sm(r1 + 0.5 - e), rim = sm(r2 + 0.5 - e), p = gy * GW + gx;\n      c[p] = c[p] * (1 - rim) + core;\n    }\n}\n\nfunction fresh(S) {\n  // The vat opens with the tinted cream on the left and the ivory on the\n  // right, the line between them wavering across the pins.\n  const c = S.c, ph = random() * 6.3;\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, edge = 32 + 6 * sin((y / H) * 2 * PI * 1.5 + ph);\n    for (let gx = 0; gx \u003c GW; gx++) c[gy * GW + gx] = sm(edge + 0.5 - (gx + 0.5) / 2);\n  }\n}\n\nfunction step(S, d, lim = 3) {\n  S.turnLen = TURN / S.speed;\n  S.clock += d * S.speed;\n  // Substeps keep the pins under 3 LEDs a step: one at Speed 2, two at 3.\n  const vmax = (S.lay.sp / 2) * 4 * PI / S.turnLen, ns = max(1, Math.ceil((vmax * d) / lim));\n  for (let i = 0; i \u003c ns; i++) {\n    advect(S, d / ns);\n    S.phase += d / ns / S.turnLen;\n    if (S.phase >= 1) {\n      S.phase -= 1;\n      S.turn++;\n      if (++S.since >= EVERY) (S.since = 0), dollop(S);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    c: new Float32Array(GN), c2: new Float32Array(GN), led: new Float32Array(N), hgt: new Float32Array(N),\n    P: new Float64Array(8), vx: 0, vy: 0, U: new Float32Array(VW * VH), V: new Float32Array(VW * VH), still: new Uint8Array(N), lay: layout(3), n: 3, hue: 0, speed: 2, gloss: 0.06,\n    turn: 0, phase: 0, since: 0, turnLen: 3, clock: 0, warm: false, tint: [0, 0, 0], ivory: [1, 0.95, 0.86],\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.gloss = cl(k[3], 0, 1);\n  const n = Math.round(cl(k[2], 3, 5));\n  if (n !== S.n) {\n    // The pins are unseen, so they simply take their new places; the turn\n    // under way goes on with the new pair.\n    S.n = n;\n    S.lay = layout(n);\n  }\n  if (!S.warm) {\n    // Open a turn and a half in, the first folds already drawn. The 4.5 s\n    // run in steps of up to 6 LEDs, 60 of them, about 0.3 s of work.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 30; i++) step(S, 0.15, 6);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) dollop(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, led = S.led, hgt = S.hgt, tint = S.tint, iv = S.ivory;\n  // The tint: lilac at 0. From coral to lime it is brought up to full\n  // brightness and its shading made shallower, as a darker peach reads brown\n  // and a darker butter khaki. Next to butter and lime the ivory turns to a\n  // cooler white, or the two creams would be one.\n  const h = S.hue + 0.76, hh = h - floor(h);\n  const warm = sm(hh / 0.05) * sm((0.3 - hh) / 0.06) + sm((hh - 0.96) / 0.04), yel = sm((hh - 0.08) / 0.05) * sm((0.32 - hh) / 0.05);\n  hsv(h, 0.46 + 0.08 * warm, 0.9 + 0.1 * warm, tint);\n  iv[0] = 1 - 0.03 * yel;\n  iv[1] = 0.95 + 0.02 * yel;\n  iv[2] = 0.86 + 0.13 * yel;\n  const deep = 1 - 0.45 * warm;\n  // Each LED averages its 2 x 2 fine cells, so stripes under an LED wide\n  // blend into the pastel between the two creams.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 2 * y * GW + 2 * x;\n      led[y * W + x] = 0.25 * (c[g] + c[g + 1] + c[g + GW] + c[g + GW + 1]);\n    }\n  // The surface: the tinted cream stands a little proud of the ivory, so\n  // every fold has two slopes, and a slow swell runs under both.\n  const t = S.clock;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0, wsum = 0;\n      for (let v = -1; v \u003c= 1; v++)\n        for (let u = -1; u \u003c= 1; u++) {\n          const xx = cl(x + u, 0, W - 1), yy = cl(y + v, 0, H - 1), w = u === 0 && v === 0 ? 4 : u === 0 || v === 0 ? 2 : 1;\n          s += led[yy * W + xx] * w;\n          wsum += w;\n        }\n      hgt[y * W + x] = (2.4 * s) / wsum + 0.5 * sin(x * 0.11 + y * 0.05 + t * 0.4) * sin(y * 0.07 - t * 0.3);\n    }\n  // The light comes from the upper left and drifts across and back every\n  // 20 s of turning; Gloss tightens the highlight and brightens it.\n  const gl = S.gloss, la = -2.3 + 0.6 * sin((2 * PI * t) / 20), le = 0.75;\n  const lx = cos(la) * cos(le), ly = sin(la) * cos(le), lz = sin(le);\n  const hx = lx, hy = ly, hz = lz + 1, hn = sqrt(hx * hx + hy * hy + hz * hz);\n  const ex = pow(2, 2.5 + 4 * gl), ks = 0.2 + 0.7 * gl, slope = 0.7 + 1.2 * gl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (hgt[y * W + min(x + 1, W - 1)] - hgt[y * W + max(x - 1, 0)]) * 0.5 * slope;\n      const gy = (hgt[min(y + 1, H - 1) * W + x] - hgt[max(y - 1, 0) * W + x]) * 0.5 * slope;\n      const nl = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * nl, ny = -gy * nl, nz = nl;\n      // A broad satin sheen lifts flat cream by about 0.12; a tight gloss\n      // does not, so the lift is put back by hand and the ivory keeps its\n      // level at any Gloss instead of going beige.\n      const diff = 1 - (0.09 - 0.1 * gl + 0.28 * (lz - (nx * lx + ny * ly + nz * lz))) * deep;\n      const spec = ks * pow(max(0, (nx * hx + ny * hy + nz * hz) / hn), ex);\n      const m = led[p];\n      const r = (iv[0] + (tint[0] - iv[0]) * m) * diff + spec;\n      const g = (iv[1] + (tint[1] - iv[1]) * m) * diff + spec;\n      const b = (iv[2] + (tint[2] - iv[2]) * m) * diff + spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","layer":{"id":"layer-taffy-cream","type":"code","name":"taffy-cream","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Taffy Cream\n// Family:  cosmetic\n// Idea:    A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after two-tone cream being pulled in a cosmetics mixing vat, with the pins moving as a taffy puller, a rod-stirring protocol in the sense of Philip Boyland, Hassan Aref and Mark Stremler (2000)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1\n//\n// Knob 1: Hue. The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white.\n// Knob 2: Speed. At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower.\n// Knob 3: Pins. How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns.\n// Knob 4: Gloss. At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen.\n// Buttons: K1 tap lays a fresh dollop in now, on the path of the pins that turn next.\n\n// The pins move as the taffy puller: pins on a line, neighbours turning\n// once round each other, the turns alternately clockwise and anticlockwise.\n// The braid of three pins is s1^2 s2^-2, and its Burau matrix at t = -1 is\n// [[5, 2], [2, 1]], whose larger eigenvalue is 3 + 2 sqrt 2 = 5.83, the\n// silver ratio squared: the least a line caught round the pins must be\n// stretched by in one period, whatever the cream between them does.\n// Boyland, Aref and Stremler's half turns, s1 s2^-1, give the golden ratio\n// squared, 2.62. For four and five pins the same matrices give at least 9.9\n// and 12.4 a period of three and four turns. Followed in a scratch script\n// through this pattern's own flow, a line across the middle of the vat grew\n// 17, 13 and 14 times in three periods with three pins, 13 a period with\n// four and 19 to 23 with five: above the floor, as the cream round each\n// pin is sheared besides.\n//\n// The flow: each moving pin carries the cream round it with a stream\n// function psi = (V x (p - r)) g(|p - r|), g = exp(-d^2 / 2 s^2), so cream\n// at the pin goes with the pin and cream a few s away stays put. Each pin\n// has a mirror image behind each of the four walls, moving as its\n// reflection, which takes psi to zero along the walls, so no cream crosses\n// them and it slides along them freely. The velocity is the curl of psi,\n// so the cream keeps its volume. It is worked out on the LED corners, once\n// a step, and read between them.\n//\n// The first try tapered psi to zero over the last 5 LEDs instead. A pin\n// passing 14 LEDs from a side wall left psi near 350 there, and the cream\n// a pin carries comes back round it in a ring two to three s out, so even\n// the top wall, 28 LEDs above the highest pin, saw psi near 75. Squeezed\n// to zero in 5 LEDs, either drove a jet of 40 to 50 LEDs a second along\n// the wall that combed the cream there into stair steps. With the images\n// every corner stays 3.5 s or more from any pin, where g is 0.002, and no\n// taper is needed.\n\nconst W = 64, H = 128, N = W * H;\n// The cream is followed on a grid twice as fine as the LEDs.\nconst GW = 128, GH = 256, GN = GW * GH;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n// One turn takes this many seconds at Speed 1.\nconst TURN = 6;\n// A dollop every this many turns.\nconst EVERY = 5;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The pins stand on x = 32, sp apart and centred in the vat.\nfunction layout(n) {\n  const sp = min(36, 116 / n), ys = [];\n  for (let j = 0; j \u003c n; j++) ys.push(64 + (j - (n - 1) / 2) * sp);\n  return { n, sp, ys, sg: 0.3 * sp };\n}\n\n// The turning pair and the two pins' places and velocities at phase f of\n// turn k: pair j = k mod (n - 1), clockwise for even j. The angle eases in\n// and out, so a turn starts and ends at rest and the next pair takes over.\nfunction pins(S, out) {\n  const L = S.lay, j = S.turn % (L.n - 1), dir = j % 2 === 0 ? 1 : -1, f = S.phase;\n  const cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const th = 2 * PI * (f - sin(2 * PI * f) / (2 * PI)), om = (2 * PI * (1 - cos(2 * PI * f))) / (S.turnLen || 1);\n  for (let k = 0; k \u003c 2; k++) {\n    const al = (k === 0 ? -PI / 2 : PI / 2) + dir * th;\n    out[k * 4] = 32 + R * cos(al);\n    out[k * 4 + 1] = cy + R * sin(al);\n    out[k * 4 + 2] = -R * sin(al) * dir * om;\n    out[k * 4 + 3] = R * cos(al) * dir * om;\n  }\n  return out;\n}\n\n// Velocity at (x, y) in LED units, written to S.vx, S.vy.\nfunction vel(S, x, y, P) {\n  const is2 = 1 / (S.lay.sg * S.lay.sg);\n  let px = 0, py = 0;\n  for (let k = 0; k \u003c 8; k += 4)\n    for (let m = 0; m \u003c 5; m++) {\n      // The pin, then its images behind the left, right, top and bottom walls.\n      const rx = m === 1 ? -P[k] : m === 2 ? 2 * W - P[k] : P[k], ry = m === 3 ? -P[k + 1] : m === 4 ? 2 * H - P[k + 1] : P[k + 1];\n      const vx = m === 1 || m === 2 ? -P[k + 2] : P[k + 2], vy = m === 3 || m === 4 ? -P[k + 3] : P[k + 3];\n      const dx = x - rx, dy = y - ry, d2 = (dx * dx + dy * dy) * is2;\n      if (d2 > 30) continue;\n      const g = Math.exp(-0.5 * d2), c = vx * dy - vy * dx;\n      px += -vy * g - c * g * dx * is2;\n      py += vx * g - c * g * dy * is2;\n    }\n  S.vx = py;\n  S.vy = -px;\n}\n\n// Catmull-Rom sample of the fine grid at grid coordinates (gx, gy), held\n// between the four nearest values so a stripe edge never rings.\nfunction sample(c, gx, gy) {\n  gx = cl(gx, 0, GW - 1.001);\n  gy = cl(gy, 0, GH - 1.001);\n  const ix = floor(gx), iy = floor(gy), fx = gx - ix, fy = gy - iy;\n  const wx0 = ((-0.5 * fx + 1) * fx - 0.5) * fx, wx1 = (1.5 * fx - 2.5) * fx * fx + 1, wx2 = ((-1.5 * fx + 2) * fx + 0.5) * fx, wx3 = (0.5 * fx - 0.5) * fx * fx;\n  const wy0 = ((-0.5 * fy + 1) * fy - 0.5) * fy, wy1 = (1.5 * fy - 2.5) * fy * fy + 1, wy2 = ((-1.5 * fy + 2) * fy + 0.5) * fy, wy3 = (0.5 * fy - 0.5) * fy * fy;\n  const x0 = max(ix - 1, 0), x2 = ix + 1, x3 = min(ix + 2, GW - 1);\n  let s = 0;\n  for (let k = 0; k \u003c 4; k++) {\n    const row = min(max(iy - 1 + k, 0), GH - 1) * GW, wy = k === 0 ? wy0 : k === 1 ? wy1 : k === 2 ? wy2 : wy3;\n    s += wy * (c[row + x0] * wx0 + c[row + ix] * wx1 + c[row + x2] * wx2 + c[row + x3] * wx3);\n  }\n  const a = c[iy * GW + ix], b = c[iy * GW + x2], d = c[(iy + 1) * GW + ix], e = c[(iy + 1) * GW + x2];\n  return cl(s, min(min(a, b), min(d, e)), max(max(a, b), max(d, e)));\n}\n\n// One step of the cream: each fine cell looks back along the flow, a\n// midpoint step, and takes what was there. Cells under LEDs whose corners\n// all move less than a ten-thousandth of an LED a step are copied as they\n// are; at that rate a still cell and a moving neighbour part by 0.2 LED in\n// a minute, and the turning pair changes long before.\nconst VW = W + 1, VH = H + 1;\nfunction advect(S, dt) {\n  const P = pins(S, S.P), c = S.c, o = S.c2, U = S.U, V = S.V, still = S.still;\n  for (let y = 0; y \u003c VH; y++)\n    for (let x = 0; x \u003c VW; x++) {\n      vel(S, x, y, P);\n      U[y * VW + x] = S.vx;\n      V[y * VW + x] = S.vy;\n    }\n  const lim = (1e-4 / dt) * (1e-4 / dt);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * VW + x, r = q + VW;\n      const m = max(max(U[q] * U[q] + V[q] * V[q], U[q + 1] * U[q + 1] + V[q + 1] * V[q + 1]), max(U[r] * U[r] + V[r] * V[r], U[r + 1] * U[r + 1] + V[r + 1] * V[r + 1]));\n      still[y * W + x] = m \u003c lim ? 1 : 0;\n    }\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, ly = gy >> 1;\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const p = gy * GW + gx;\n      if (still[ly * W + (gx >> 1)]) {\n        o[p] = c[p];\n        continue;\n      }\n      const x = (gx + 0.5) / 2;\n      // Bilinear velocity at (x, y), then at the midpoint back along it.\n      let ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, q = iy * VW + ix;\n      let vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      let vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      const mx = cl(x - 0.5 * dt * vx, 0, W - 0.001), my = cl(y - 0.5 * dt * vy, 0, H - 0.001);\n      (ix = floor(mx)), (iy = floor(my)), (fx = mx - ix), (fy = my - iy), (q = iy * VW + ix);\n      vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      o[p] = sample(c, (x - dt * vx) * 2 - 0.5, (y - dt * vy) * 2 - 0.5);\n    }\n  }\n  S.c = o;\n  S.c2 = c;\n}\n\n// A dollop: a tinted core with an ivory rim, its edge wobbling on two\n// harmonics, laid where the next turn's pins will pass.\nfunction dollop(S) {\n  const L = S.lay, j = S.turn % (L.n - 1), cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const al = random() * 2 * PI, x0 = 32 + R * cos(al) * 0.8, y0 = cy + R * sin(al) * 0.8;\n  const r1 = 0.36 * L.sp + 4, r2 = r1 + 4 + 0.08 * L.sp, p1 = random() * 6.3, p2 = random() * 6.3, c = S.c;\n  for (let gy = 0; gy \u003c GH; gy++)\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const dx = (gx + 0.5) / 2 - x0, dy = (gy + 0.5) / 2 - y0, d = sqrt(dx * dx + dy * dy);\n      if (d > r2 * 1.3 + 1) continue;\n      const an = Math.atan2(dy, dx), wob = 1 + 0.12 * sin(2 * an + p1) + 0.07 * sin(3 * an + p2);\n      const e = d / wob;\n      if (e > r2 + 0.5) continue;\n      const core = sm(r1 + 0.5 - e), rim = sm(r2 + 0.5 - e), p = gy * GW + gx;\n      c[p] = c[p] * (1 - rim) + core;\n    }\n}\n\nfunction fresh(S) {\n  // The vat opens with the tinted cream on the left and the ivory on the\n  // right, the line between them wavering across the pins.\n  const c = S.c, ph = random() * 6.3;\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, edge = 32 + 6 * sin((y / H) * 2 * PI * 1.5 + ph);\n    for (let gx = 0; gx \u003c GW; gx++) c[gy * GW + gx] = sm(edge + 0.5 - (gx + 0.5) / 2);\n  }\n}\n\nfunction step(S, d, lim = 3) {\n  S.turnLen = TURN / S.speed;\n  S.clock += d * S.speed;\n  // Substeps keep the pins under 3 LEDs a step: one at Speed 2, two at 3.\n  const vmax = (S.lay.sp / 2) * 4 * PI / S.turnLen, ns = max(1, Math.ceil((vmax * d) / lim));\n  for (let i = 0; i \u003c ns; i++) {\n    advect(S, d / ns);\n    S.phase += d / ns / S.turnLen;\n    if (S.phase >= 1) {\n      S.phase -= 1;\n      S.turn++;\n      if (++S.since >= EVERY) (S.since = 0), dollop(S);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    c: new Float32Array(GN), c2: new Float32Array(GN), led: new Float32Array(N), hgt: new Float32Array(N),\n    P: new Float64Array(8), vx: 0, vy: 0, U: new Float32Array(VW * VH), V: new Float32Array(VW * VH), still: new Uint8Array(N), lay: layout(3), n: 3, hue: 0, speed: 2, gloss: 0.06,\n    turn: 0, phase: 0, since: 0, turnLen: 3, clock: 0, warm: false, tint: [0, 0, 0], ivory: [1, 0.95, 0.86],\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.gloss = cl(k[3], 0, 1);\n  const n = Math.round(cl(k[2], 3, 5));\n  if (n !== S.n) {\n    // The pins are unseen, so they simply take their new places; the turn\n    // under way goes on with the new pair.\n    S.n = n;\n    S.lay = layout(n);\n  }\n  if (!S.warm) {\n    // Open a turn and a half in, the first folds already drawn. The 4.5 s\n    // run in steps of up to 6 LEDs, 60 of them, about 0.3 s of work.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 30; i++) step(S, 0.15, 6);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) dollop(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, led = S.led, hgt = S.hgt, tint = S.tint, iv = S.ivory;\n  // The tint: lilac at 0. From coral to lime it is brought up to full\n  // brightness and its shading made shallower, as a darker peach reads brown\n  // and a darker butter khaki. Next to butter and lime the ivory turns to a\n  // cooler white, or the two creams would be one.\n  const h = S.hue + 0.76, hh = h - floor(h);\n  const warm = sm(hh / 0.05) * sm((0.3 - hh) / 0.06) + sm((hh - 0.96) / 0.04), yel = sm((hh - 0.08) / 0.05) * sm((0.32 - hh) / 0.05);\n  hsv(h, 0.46 + 0.08 * warm, 0.9 + 0.1 * warm, tint);\n  iv[0] = 1 - 0.03 * yel;\n  iv[1] = 0.95 + 0.02 * yel;\n  iv[2] = 0.86 + 0.13 * yel;\n  const deep = 1 - 0.45 * warm;\n  // Each LED averages its 2 x 2 fine cells, so stripes under an LED wide\n  // blend into the pastel between the two creams.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 2 * y * GW + 2 * x;\n      led[y * W + x] = 0.25 * (c[g] + c[g + 1] + c[g + GW] + c[g + GW + 1]);\n    }\n  // The surface: the tinted cream stands a little proud of the ivory, so\n  // every fold has two slopes, and a slow swell runs under both.\n  const t = S.clock;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0, wsum = 0;\n      for (let v = -1; v \u003c= 1; v++)\n        for (let u = -1; u \u003c= 1; u++) {\n          const xx = cl(x + u, 0, W - 1), yy = cl(y + v, 0, H - 1), w = u === 0 && v === 0 ? 4 : u === 0 || v === 0 ? 2 : 1;\n          s += led[yy * W + xx] * w;\n          wsum += w;\n        }\n      hgt[y * W + x] = (2.4 * s) / wsum + 0.5 * sin(x * 0.11 + y * 0.05 + t * 0.4) * sin(y * 0.07 - t * 0.3);\n    }\n  // The light comes from the upper left and drifts across and back every\n  // 20 s of turning; Gloss tightens the highlight and brightens it.\n  const gl = S.gloss, la = -2.3 + 0.6 * sin((2 * PI * t) / 20), le = 0.75;\n  const lx = cos(la) * cos(le), ly = sin(la) * cos(le), lz = sin(le);\n  const hx = lx, hy = ly, hz = lz + 1, hn = sqrt(hx * hx + hy * hy + hz * hz);\n  const ex = pow(2, 2.5 + 4 * gl), ks = 0.2 + 0.7 * gl, slope = 0.7 + 1.2 * gl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (hgt[y * W + min(x + 1, W - 1)] - hgt[y * W + max(x - 1, 0)]) * 0.5 * slope;\n      const gy = (hgt[min(y + 1, H - 1) * W + x] - hgt[max(y - 1, 0) * W + x]) * 0.5 * slope;\n      const nl = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * nl, ny = -gy * nl, nz = nl;\n      // A broad satin sheen lifts flat cream by about 0.12; a tight gloss\n      // does not, so the lift is put back by hand and the ivory keeps its\n      // level at any Gloss instead of going beige.\n      const diff = 1 - (0.09 - 0.1 * gl + 0.28 * (lz - (nx * lx + ny * ly + nz * lz))) * deep;\n      const spec = ks * pow(max(0, (nx * hx + ny * hy + nz * hz) / hn), ex);\n      const m = led[p];\n      const r = (iv[0] + (tint[0] - iv[0]) * m) * diff + spec;\n      const g = (iv[1] + (tint[1] - iv[1]) * m) * diff + spec;\n      const b = (iv[2] + (tint[2] - iv[2]) * m) * diff + spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower."},{"name":"Pins","min":3,"max":5,"about":"How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns."},{"name":"Gloss","min":0,"max":1,"about":"At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen."}],"start":[0,2,3,0.06],"measures":{"motion":0.1992,"detail":0.0229,"edges":0.0398,"complexity":1.5866,"coverage":1,"colour":0.2145,"drift":0.034},"knobResponse":[0.174,0.088,0.0927,0.0503]},{"slug":"talbot-carpet","title":"Talbot Carpet","family":"wave","round":32,"note":"좁은 슬릿 격자를 지난 빛의 세기를, 격자에서 멀어지는 거리를 세로로 두고 그려요. 슬릿 상이 한 탤벗 길이마다 그대로, 반 길이마다 반 주기 옆으로 되살아나고, 그 사이 분수 거리에서는 둘과 넷으로 갈라진 상과 곧은 빛줄기가 엇갈려요. 남색 골과 청록 바닥, 흰 방울이 1 LED 망점 위에서 1초에 15줄씩 올라가요.","idea":"Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.","buttons":"K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.","code":"// ===== Patternflow pattern =====\n// Title:   Talbot Carpet\n// Family:  wave\n// Idea:    Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Talbot effect (Henry Fox Talbot, 1836) and quantum carpets (Michael Berry, 1996), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4\n//\n// Knob 1: Hue. Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow.\n// Knob 2: Speed. How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds.\n// Knob 3: Slit. The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies.\n// Knob 4: Periods. How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter.\n// Buttons: K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.\n\nconst W = 64, H = 128, M = 256, R = 512;\nconst { floor, min, sin, cos, pow, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Share of the lit LEDs in the screen that go to beads: the brightest 14.5%\n// of each frame, which fixes the measured edges near 0.14.\nconst CUT = 0.855;\n\n// In-place radix-2 FFT with the + sign, so it sums c_n e^{+2 pi i n j / M}.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// psi(x, tau) = sum c_n exp(2 pi i (n x - n^2 tau)) for a slit of width w\n// centred on x = 0, 256 terms with a Gaussian roll-off, at R steps of tau\n// over one Talbot length. Each row keeps a running sum of |psi|^2 over one\n// period, so a column of any width is two lookups.\nfunction build(P) {\n  const w = P.w, c = new Float64Array(M), re = new Float64Array(M), im = new Float64Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    const n = k \u003c M / 2 ? k : k - M;\n    c[k] = (n === 0 ? w : sin(PI * n * w) / (PI * n)) * exp(-(n / 24) * (n / 24));\n  }\n  const S = P.sum;\n  for (let r = 0; r \u003c R; r++) {\n    for (let k = 0; k \u003c M; k++) {\n      const n = k \u003c M / 2 ? k : k - M;\n      // n^2 r is an integer, so the phase wraps exactly.\n      const ph = (-2 * PI * ((n * n * r) % R)) / R;\n      re[k] = c[k] * cos(ph);\n      im[k] = c[k] * sin(ph);\n    }\n    fft(re, im);\n    const o = r * (M + 1);\n    S[o] = 0;\n    for (let j = 0; j \u003c M; j++) S[o + j + 1] = S[o + j] + re[j] * re[j] + im[j] * im[j];\n  }\n  P.builtW = w;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Box blur, rows wrapping (the carpet is periodic across), columns clamped.\nfunction blur(src, dst, tmp, rad) {\n  const n = 2 * rad + 1;\n  for (let y = 0; y \u003c H; y++) {\n    let acc = 0;\n    for (let k = -rad; k \u003c= rad; k++) acc += src[y * W + ((k + W) % W)];\n    for (let x = 0; x \u003c W; x++) {\n      tmp[y * W + x] = acc / n;\n      acc += src[y * W + ((x + rad + 1) % W)] - src[y * W + ((x - rad + W) % W)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      let acc = 0;\n      for (let k = -rad; k \u003c= rad; k++) acc += tmp[cl(y + k, 0, H - 1) * W + x];\n      dst[y * W + x] = acc / n;\n    }\n}\n\nexport function setup(params) {\n  const N = W * H;\n  params.s = {\n    t: 0, hue: 0, speed: 2, w: 0.1, builtW: -1, per: 1,\n    sum: new Float32Array(R * (M + 1)), I: new Float32Array(N), G: new Float32Array(N), T: new Float32Array(N),\n    U: new Float32Array(N), Lv: new Int16Array(N), srt: new Float32Array(N / 2), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 1], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.w = round((0.1 + 0.35 * cl(k[2], 0, 1)) * 100) / 100;\n  P.per = cl(k[3], 1, 4);\n  if (P.w !== P.builtW) build(P);\n  P.t += d * P.speed * 0.06;\n  if (input.btnPressed && input.btnPressed[0]) P.t += 0.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { sum: S, I, G, T, U, Lv, srt, c } = P;\n  // Row y holds tau from t + y/128 to t + (y+1)/128: four table rows,\n  // averaged, and each LED the mean over its width of the period.\n  for (let y = 0; y \u003c H; y++) {\n    const ra = floor((P.t + y / H) * R), rb = Math.max(ra + 1, floor((P.t + (y + 1) / H) * R));\n    for (let x = 0; x \u003c W; x++) I[y * W + x] = 0;\n    for (let rr = ra; rr \u003c rb; rr++) {\n      const o = (((rr % R) + R) % R) * (M + 1);\n      const at = (u) => {\n        const q = floor(u / M), v = u - q * M, i = floor(v);\n        return q * S[o + M] + S[o + i] + (S[o + i + 1] - S[o + i]) * (v - i);\n      };\n      let prev = at((0.5 * M) | 0);\n      for (let x = 0; x \u003c W; x++) {\n        const u1 = (((x + 1) / W) * P.per + 0.5) * M, next = at(u1);\n        I[y * W + x] += (next - prev) / ((P.per * M) / W) / (rb - ra);\n        prev = next;\n      }\n    }\n  }\n  // The screen: LEDs with x + y odd carry a soft glow of the carpet, blurred\n  // so it never steps more than a few levels from one LED to the next. The\n  // others stand 40 above the darkest glow beside them, so every pair of\n  // neighbours differs by 40 or a little less, or they hold a bead at full\n  // brightness where the carpet is brightest.\n  blur(I, T, U, 2);\n  blur(T, G, U, 2);\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) srt[n++] = I[y * W + x];\n  srt.sort();\n  const hi = srt[floor(n * CUT)], top = srt[floor(n * 0.995)], mid = srt[n >> 1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = (y + 1) & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      Lv[p] = round(8 + 70 * cl(pow(G[p] / (2.2 * mid), 0.9), 0, 1));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = y & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      if (I[p] > hi) {\n        Lv[p] = 255;\n        continue;\n      }\n      let m = 255;\n      if (x > 0) m = min(m, Lv[p - 1]);\n      if (x \u003c W - 1) m = min(m, Lv[p + 1]);\n      if (y > 0) m = min(m, Lv[p - W]);\n      if (y \u003c H - 1) m = min(m, Lv[p + W]);\n      Lv[p] = m + 40;\n    }\n  // Colour carries the fine carpet at no cost to the screen: the canals\n  // deep and saturated, the floor paler and greener as it brightens.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, L = Lv[p];\n      if (L === 255) hsv(P.hue + 0.5, 0.35 * (1 - cl((I[p] - hi) / (top - hi), 0, 1)), 1, c);\n      else {\n        const t = cl(pow(I[p] / (2.5 * mid), 0.7), 0, 1);\n        hsv(P.hue + 0.64 - 0.14 * t, 1 - 0.5 * t, 1, c);\n      }\n      display.setPixel(x, y, round(c[0] * L), round(c[1] * L), round(c[2] * L));\n    }\n}\n","layer":{"id":"layer-talbot-carpet","type":"code","name":"talbot-carpet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Talbot Carpet\n// Family:  wave\n// Idea:    Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Talbot effect (Henry Fox Talbot, 1836) and quantum carpets (Michael Berry, 1996), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4\n//\n// Knob 1: Hue. Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow.\n// Knob 2: Speed. How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds.\n// Knob 3: Slit. The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies.\n// Knob 4: Periods. How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter.\n// Buttons: K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.\n\nconst W = 64, H = 128, M = 256, R = 512;\nconst { floor, min, sin, cos, pow, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Share of the lit LEDs in the screen that go to beads: the brightest 14.5%\n// of each frame, which fixes the measured edges near 0.14.\nconst CUT = 0.855;\n\n// In-place radix-2 FFT with the + sign, so it sums c_n e^{+2 pi i n j / M}.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// psi(x, tau) = sum c_n exp(2 pi i (n x - n^2 tau)) for a slit of width w\n// centred on x = 0, 256 terms with a Gaussian roll-off, at R steps of tau\n// over one Talbot length. Each row keeps a running sum of |psi|^2 over one\n// period, so a column of any width is two lookups.\nfunction build(P) {\n  const w = P.w, c = new Float64Array(M), re = new Float64Array(M), im = new Float64Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    const n = k \u003c M / 2 ? k : k - M;\n    c[k] = (n === 0 ? w : sin(PI * n * w) / (PI * n)) * exp(-(n / 24) * (n / 24));\n  }\n  const S = P.sum;\n  for (let r = 0; r \u003c R; r++) {\n    for (let k = 0; k \u003c M; k++) {\n      const n = k \u003c M / 2 ? k : k - M;\n      // n^2 r is an integer, so the phase wraps exactly.\n      const ph = (-2 * PI * ((n * n * r) % R)) / R;\n      re[k] = c[k] * cos(ph);\n      im[k] = c[k] * sin(ph);\n    }\n    fft(re, im);\n    const o = r * (M + 1);\n    S[o] = 0;\n    for (let j = 0; j \u003c M; j++) S[o + j + 1] = S[o + j] + re[j] * re[j] + im[j] * im[j];\n  }\n  P.builtW = w;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Box blur, rows wrapping (the carpet is periodic across), columns clamped.\nfunction blur(src, dst, tmp, rad) {\n  const n = 2 * rad + 1;\n  for (let y = 0; y \u003c H; y++) {\n    let acc = 0;\n    for (let k = -rad; k \u003c= rad; k++) acc += src[y * W + ((k + W) % W)];\n    for (let x = 0; x \u003c W; x++) {\n      tmp[y * W + x] = acc / n;\n      acc += src[y * W + ((x + rad + 1) % W)] - src[y * W + ((x - rad + W) % W)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      let acc = 0;\n      for (let k = -rad; k \u003c= rad; k++) acc += tmp[cl(y + k, 0, H - 1) * W + x];\n      dst[y * W + x] = acc / n;\n    }\n}\n\nexport function setup(params) {\n  const N = W * H;\n  params.s = {\n    t: 0, hue: 0, speed: 2, w: 0.1, builtW: -1, per: 1,\n    sum: new Float32Array(R * (M + 1)), I: new Float32Array(N), G: new Float32Array(N), T: new Float32Array(N),\n    U: new Float32Array(N), Lv: new Int16Array(N), srt: new Float32Array(N / 2), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 1], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.w = round((0.1 + 0.35 * cl(k[2], 0, 1)) * 100) / 100;\n  P.per = cl(k[3], 1, 4);\n  if (P.w !== P.builtW) build(P);\n  P.t += d * P.speed * 0.06;\n  if (input.btnPressed && input.btnPressed[0]) P.t += 0.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { sum: S, I, G, T, U, Lv, srt, c } = P;\n  // Row y holds tau from t + y/128 to t + (y+1)/128: four table rows,\n  // averaged, and each LED the mean over its width of the period.\n  for (let y = 0; y \u003c H; y++) {\n    const ra = floor((P.t + y / H) * R), rb = Math.max(ra + 1, floor((P.t + (y + 1) / H) * R));\n    for (let x = 0; x \u003c W; x++) I[y * W + x] = 0;\n    for (let rr = ra; rr \u003c rb; rr++) {\n      const o = (((rr % R) + R) % R) * (M + 1);\n      const at = (u) => {\n        const q = floor(u / M), v = u - q * M, i = floor(v);\n        return q * S[o + M] + S[o + i] + (S[o + i + 1] - S[o + i]) * (v - i);\n      };\n      let prev = at((0.5 * M) | 0);\n      for (let x = 0; x \u003c W; x++) {\n        const u1 = (((x + 1) / W) * P.per + 0.5) * M, next = at(u1);\n        I[y * W + x] += (next - prev) / ((P.per * M) / W) / (rb - ra);\n        prev = next;\n      }\n    }\n  }\n  // The screen: LEDs with x + y odd carry a soft glow of the carpet, blurred\n  // so it never steps more than a few levels from one LED to the next. The\n  // others stand 40 above the darkest glow beside them, so every pair of\n  // neighbours differs by 40 or a little less, or they hold a bead at full\n  // brightness where the carpet is brightest.\n  blur(I, T, U, 2);\n  blur(T, G, U, 2);\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) srt[n++] = I[y * W + x];\n  srt.sort();\n  const hi = srt[floor(n * CUT)], top = srt[floor(n * 0.995)], mid = srt[n >> 1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = (y + 1) & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      Lv[p] = round(8 + 70 * cl(pow(G[p] / (2.2 * mid), 0.9), 0, 1));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = y & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      if (I[p] > hi) {\n        Lv[p] = 255;\n        continue;\n      }\n      let m = 255;\n      if (x > 0) m = min(m, Lv[p - 1]);\n      if (x \u003c W - 1) m = min(m, Lv[p + 1]);\n      if (y > 0) m = min(m, Lv[p - W]);\n      if (y \u003c H - 1) m = min(m, Lv[p + W]);\n      Lv[p] = m + 40;\n    }\n  // Colour carries the fine carpet at no cost to the screen: the canals\n  // deep and saturated, the floor paler and greener as it brightens.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, L = Lv[p];\n      if (L === 255) hsv(P.hue + 0.5, 0.35 * (1 - cl((I[p] - hi) / (top - hi), 0, 1)), 1, c);\n      else {\n        const t = cl(pow(I[p] / (2.5 * mid), 0.7), 0, 1);\n        hsv(P.hue + 0.64 - 0.14 * t, 1 - 0.5 * t, 1, c);\n      }\n      display.setPixel(x, y, round(c[0] * L), round(c[1] * L), round(c[2] * L));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds."},{"name":"Slit","min":0,"max":1,"about":"The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies."},{"name":"Periods","min":1,"max":4,"about":"How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter."}],"start":[0,2,0,1],"measures":{"motion":0.9679,"detail":0.2277,"edges":0.1425,"complexity":1.3191,"coverage":0.9648,"colour":0.1367,"drift":0.088},"knobResponse":[0.1564,0.1417,0.1324,0.1293]},{"slug":"test-card","title":"Test Card","family":"glitch","round":1,"note":"텔레비전 컬러 바를, 수직 동기를 잃어 가는 수상기가 보여 주는 대로 그려요.","idea":"A television's colour bars, as a set that is losing its hold would show them.","buttons":"K1 tap tears the picture now.","code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","layer":{"id":"layer-test-card","type":"code","name":"test-card","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole set of bars round the colour wheel."},{"name":"Bursts","min":0.2,"max":6,"about":"How often the picture tears."},{"name":"Damage","min":0.15,"max":1,"about":"From a clean card with the odd twitch to bars torn apart and smeared."},{"name":"Roll","min":0,"max":1,"about":"The vertical hold: the picture starts to slip and roll."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.2635,"detail":0.0837,"edges":0.7844,"complexity":0.0808,"coverage":0.8476,"colour":0.6265,"drift":0.0606},"knobResponse":[0.3578,0.0535,0.0933,0.3676]},{"slug":"tetromino-well","title":"Tetromino Well","family":"algo","round":10,"note":"세운 패널이 너비 10칸, 높이 21칸의 테트리스 우물이에요. 지치지 않는 플레이어가 꼭대기에 기다리는 다음 조각을 보며 패널의 3분의 2 높이까지 쌓고, 오른쪽 한 줄을 비워 두었다가 긴 막대가 오면 네 줄을 한꺼번에 지워요. K1 을 누르면 긴 막대가 다음 조각으로 와요.","idea":"The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.","buttons":"K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.","code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","layer":{"id":"layer-tetromino-well","type":"code","name":"tetromino-well","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L."},{"name":"Speed","min":0.2,"max":3,"about":"How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one."},{"name":"Headroom","min":6,"max":18,"about":"The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor."},{"name":"Garbage","min":0,"max":1,"about":"The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it."}],"start":[0,2,6,0.06],"measures":{"motion":0.2184,"detail":0.0909,"edges":0.7088,"complexity":0.1224,"coverage":0.6512,"colour":0.4389,"drift":0.0999},"knobResponse":[0.2488,0.0464,0.2189,0.2009]},{"slug":"thermal","title":"Thermal","family":"flight","round":24,"note":"여름 오후의 밭 위에서 흰 글라이더가 열기류를 타고 타원을 그리며 맴돌아 올라가요. 말똥가리 둘이 더 좁게 같이 돌고, 꼭대기의 적운은 자라며 바닥이 어두워져요. 구름 바닥에 닿은 글라이더는 다음 열기류로 미끄러져 가고 아래에서 새 글라이더가 들어와요. K1 을 누르면 윈치가 글라이더 하나를 끌어올려요.","idea":"A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.","buttons":"K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.","code":"// ===== Patternflow pattern =====\n// Title:   Thermal\n// Family:  flight\n// Idea:    A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after thermal soaring under fair-weather cumulus over farmland\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1\n//\n// Knob 1: Hour. Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows.\n// Knob 2: Speed. At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower.\n// Knob 3: Gliders. One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up.\n// Knob 4: Wind. The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm.\n// Buttons: K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, round, pow, sign, PI } = Math;\nconst TAU = 2 * PI;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\nconst rnd = () => Math.random();\n// Rows: horizon, first field row, cloud base, where the thermal leaves the ground.\nconst [HOR, FY, YB, YG] = [97, 100, 36, 116];\n// The ploughed field the thermal comes off: its column and its distance.\nconst [SRCX, DSRC] = [29, 9.6];\n// We look up a little, so a level circle is a thin ellipse; the craft are drawn flatter so a banked wing does not stand on end.\nconst SE = sin(0.3);\nconst [BE, BC] = [sin(0.1), cos(0.1)];\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\nconst fbm = (x, y, s) => 0.55 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.15 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Pasture, beans, stubble, wheat, hay and plough in midday sun; 1 marks rows running away from us.\nconst CROP = [[70, 150, 45, 0], [38, 106, 36, 1], [216, 184, 94, 1], [198, 160, 66, 0], [142, 178, 74, 0], [96, 62, 40, 1]];\nconst PICK = [0, 0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Tapered strokes in the craft's axes: forward, right, up, twice, then two radii.\nconst GLIDER = [[3.6, 0, -0.1, -4.8, 0, 0.15, 0.85, 0.45], [0.6, 0, 0.25, 0.25, -9, 0.85, 0.75, 0.45], [0.6, 0, 0.25, 0.25, 9, 0.85, 0.75, 0.45], [-4.2, 0, 0.1, -4.9, 0, 2.4, 0.55, 0.45], [-4.9, -2.6, 2.4, -4.9, 2.6, 2.4, 0.45, 0.45]];\nconst BUZZ = [[1.3, 0, 0, -1.3, 0, 0, 0.6, 0.45], [0.2, 0, 0.1, -0.3, -3.7, 0.75, 0.8, 0.45], [0.2, 0, 0.1, -0.3, 3.7, 0.75, 0.8, 0.45], [-1.2, 0, 0, -2.5, 0, 0.1, 0.45, 0.65]];\n\n// A cumulus as puffs over a flat base: each puff's place (u across, v up), its radius r and when in its growth it appears.\nfunction puffs() {\n  const L = [];\n  const add = (u, v, r, t0) => L.push({ u: u + (rnd() - 0.5) * 0.14, v: v + (rnd() - 0.5) * 0.08, r: r * (0.88 + 0.24 * rnd()), t0, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 5; i++) add(-0.76 + i * 0.38, 0.2, 0.34, i === 2 ? 0 : 0.03 + 0.12 * rnd());\n  for (let i = 0; i \u003c 4; i++) add(-0.5 + i * 0.33, 0.45, 0.33, 0.08 + 0.17 * rnd());\n  for (let i = 0; i \u003c 3; i++) add(-0.3 + i * 0.3, 0.68, 0.3, 0.3 + 0.2 * rnd());\n  for (let i = 0; i \u003c 2; i++) add((rnd() - 0.5) * 0.4, 0.86, 0.26, 0.55 + 0.15 * rnd());\n  return L;\n}\nconst newCloud = (x, a) => ({ x, a, g: 0, al: 1, det: false, p: puffs(), sd: floor(rnd() * 999) });\n\n// Fields lie in strips at distance D (row = HOR + 180 / D), each cut into fields across.\nfunction buildFields(S) {\n  const strips = [], trees = [], us = ((SRCX - 32) * DSRC) / 64, hw = (11 * DSRC) / 64;\n  for (let D = 5.6; D \u003c 66; ) {\n    const D2 = D * (1.22 + 0.12 * rnd());\n    const wid = () => ((12 + 18 * rnd()) * pow(6 / D, 0.35) * D) / 64;\n    let b = [];\n    for (let u = -0.62 * D2 - rnd() * wid(); u \u003c 0.62 * D2 + 0.3; u += wid()) b.push(u);\n    const src = D \u003c= DSRC && DSRC \u003c D2;\n    if (src) {\n      b = b.filter((u) => u \u003c us - hw - 0.3 || u > us + hw + 0.3);\n      b.push(us - hw, us + hw);\n      b.sort((p, q) => p - q);\n    }\n    const t = [];\n    for (let j = 0; j \u003c b.length - 1; j++) {\n      let k;\n      do k = PICK[floor(rnd() * PICK.length)];\n      while (j && k === t[j - 1]);\n      t.push(k);\n    }\n    if (src) t[b.indexOf(us - hw)] = 5;\n    strips.push({ d0: D, d1: D2, b, t, hh: 0.12 + 0.08 * rnd(), i: strips.length });\n    // Trees in the hedge along each strip's near edge, and at some corners.\n    for (let j = 0; j \u003c 2; j++) if (rnd() \u003c 0.6) trees.push({ u: (rnd() - 0.5) * 1.1 * D, D: D + 0.05, rc: 0.2 + 0.14 * rnd() });\n    for (let j = 1; j \u003c b.length - 1; j++) if (rnd() \u003c 0.2) trees.push({ u: b[j], D: D + 0.05, rc: 0.2 + 0.12 * rnd() });\n    D = D2;\n  }\n  for (const tr of trees) tr.hc = tr.rc * 1.5 + 0.15;\n  S.strips = strips;\n  S.trees = trees.sort((p, q) => q.D - p.D);\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N);\n  const S = { t: 0, bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), A: F(), fu: F(), fd: F(), fn: F(), gl: [], down: [], clouds: [], far: [], spawn: [0, 0], cable: null, bb: [1e9, 1e9, -1, -1] };\n  buildFields(S);\n  for (let y = FY; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      S.fd[p] = 180 / (y + 0.5 - HOR);\n      S.fu[p] = ((x + 0.5 - 32) * S.fd[p]) / 64;\n      S.fn[p] = fbm(x * 0.15, y * 0.3, 11);\n    }\n  for (let i = 0; i \u003c 3; i++) S.far.push({ x: 8 + i * 24 + rnd() * 10, yb: 87 - i * 5 - rnd() * 2, hw: 5 + 2.5 * i + rnd() * 2, ht: 3 + i + rnd() * 1.5, p: puffs(), sd: floor(rnd() * 999), m: 0.35, e: 44 });\n  S.shad = [{ x: 6, D: 7.4, r: 19, rd: 2.6, m: 0.9, e: 62 }, { x: 50, D: 16, r: 15, rd: 5.5, m: 0.9, e: 60 }];\n  params.s = S;\n}\n\n// The thermal's centre at a row: it leans downwind with height and wanders a little.\nconst colX = (S, y) => SRCX + S.lean * (YG - y) + 1.5 * sin(S.t * 0.21);\nconst sunLight = (h, k = mix(1, 0.9, h)) => [mix(1, 1.16, h) * k, mix(1, 0.86, h) * k, mix(1, 0.56, h) * k];\nconst SHADE = [0.42, 0.47, 0.6];\nconst hazeOf = (h) => mix3([176, 202, 222], [236, 186, 122], h);\nfunction skyAt(x, y, h) {\n  const top = mix3([14, 50, 150], [30, 52, 128], h), mid = mix3([44, 108, 206], [70, 104, 178], h), t = y / 96;\n  const c = t \u003c 0.66 ? mix3(top, mid, sstep(0, 0.66, t)) : mix3(mid, hazeOf(h), sstep(0.66, 1, t));\n  const gw = pow(h, 1.5) * exp(-x / 24) * exp(-abs(y - 78) / 36);\n  return [c[0] + 110 * gw, c[1] + 64 * gw, c[2] + 14 * gw];\n}\n\n// The ground seen at a point of the panel: hedges, fields, their shadows, and the haze.\nfunction fieldAt(S, x, y, sun, Lsh, haze) {\n  const D = 180 / (y - HOR), u = ((x - 32) * D) / 64, st = S.strips;\n  let k = 0;\n  while (k \u003c st.length - 1 && D >= st[k].d1) k++;\n  let alb = null;\n  let lit = 1;\n  // The hedge on a strip's near edge hides the ground just behind it.\n  for (let j = k; j >= 0 && st[j].d0 > D * 0.8; j--) {\n    const s = st[j];\n    if (y >= HOR + (180 - 64 * s.hh * (0.7 + 0.6 * noise(u * 2.6, s.i * 9, 3))) / s.d0) {\n      const n = 0.8 + 0.4 * noise(u * 6, y, 5);\n      alb = [34 * n, 78 * n, 30 * n];\n      lit = 0.85;\n      break;\n    }\n  }\n  if (!alb) {\n    const s = st[k], b = s.b;\n    let j = 0;\n    while (j \u003c b.length - 2 && u >= b[j + 1]) j++;\n    const hwu = ((0.8 * pow(6 / D, 0.4) + 0.25) * D) / 64;\n    if (abs(u - b[j]) \u003c hwu || abs(u - b[j + 1]) \u003c hwu) {\n      alb = [30, 70, 28];\n      lit = 0.7;\n    } else {\n      const c = CROP[s.t[j]], tx = c[3] ? 0.97 + 0.17 * sin(u * TAU * 6.5) : 0.86 + 0.28 * fbm(u * 2.5, D * 0.7, s.t[j] + j);\n      alb = [c[0] * tx, c[1] * tx, c[2] * tx];\n      // Shadows of the hedges left and in front, and of the trees.\n      if (u - b[j] \u003c s.hh * Lsh * 0.85 || D - s.d0 \u003c s.hh * Lsh * 0.4) lit = 0;\n      else\n        for (const tr of S.trees) {\n          const du = u - tr.u - tr.hc * Lsh * 0.85, dd = D - tr.D - tr.hc * Lsh * 0.45;\n          if (abs(dd) > 3 + Lsh) continue;\n          const al = (du * 0.86 + dd * 0.5) / (tr.rc * (1 + 0.55 * Lsh)), pe = (-du * 0.5 + dd * 0.86) / (tr.rc * 1.8);\n          if (al * al + pe * pe \u003c 1) {\n            lit = 0;\n            break;\n          }\n        }\n    }\n  }\n  const hz = 0.55 * sstep(5, 75, D);\n  return [0, 1, 2].map((c) => mix(alb[c] * mix(SHADE[c], sun[c], lit), haze[c], hz));\n}\n\nfunction paint(S) {\n  const h = S.hour, sun = sunLight(h), haze = hazeOf(h), Lsh = 0.35 + 4.2 * pow(h, 1.6), bg = S.bg, ridgeF = mix3(haze, [64, 96, 116], 0.38);\n  const ridgeN = mix3(haze, [52 * sun[0], 98 * sun[1], 54 * sun[2]], 0.58);\n  for (let x = 0; x \u003c W; x++) {\n    const farT = 83 + 5 * fbm(x * 0.045, 1.3, 21), nearT = 91.5 + 3 * fbm(x * 0.09, 4.1, 22) - 1.5 * sstep(0.55, 0.8, noise(x * 0.5, 0, 23));\n    for (let y = 0; y \u003c H; y++) {\n      const q = (y * W + x) * 3;\n      bg[q] = bg[q + 1] = bg[q + 2] = 0;\n      // The open sky is smooth enough for one sample.\n      for (let k = y + 1 \u003c farT ? 3 : 0; k \u003c 4; k++) {\n        const xs = x + 0.25 + 0.5 * (k & 1), ys = y + 0.25 + 0.5 * (k >> 1);\n        let c;\n        if (ys >= FY) c = fieldAt(S, xs, ys, sun, Lsh, haze);\n        else if (ys >= nearT) c = ridgeN.map((v) => v * (0.84 + 0.3 * fbm(x * 0.35, ys * 0.9, 24)));\n        else if (ys >= farT) c = ridgeF;\n        else c = skyAt(xs, ys, h);\n        for (let i = 0; i \u003c 3; i++) bg[q + i] += y + 1 \u003c farT ? c[i] : c[i] / 4;\n      }\n    }\n  }\n  // Tree crowns, far ones first, lit from the sun's side.\n  for (const tr of S.trees) {\n    const cx = 32 + (64 * tr.u) / tr.D, cy = HOR + (180 - 64 * tr.hc) / tr.D, R = (64 * tr.rc) / tr.D, hz = 0.55 * sstep(5, 75, tr.D);\n    for (let y = max(FY - 4, floor(cy - R - 1)); y \u003c= min(H - 1, cy + R + 1); y++)\n      for (let x = max(0, floor(cx - R - 1)); x \u003c= min(W - 1, cx + R + 1); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - cy) / R, a = clamp((1 - sqrt(dx * dx + dy * dy)) * R + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const l = clamp(0.45 - 0.7 * dx - 0.4 * dy, 0, 1), n = 0.85 + 0.3 * hash(x, y, 31), q = (y * W + x) * 3;\n        [40, 94, 38].forEach((al, c) => (bg[q + c] += (mix(al * n * mix(SHADE[c], sun[c] * 1.1, l), haze[c], hz) - bg[q + c]) * a));\n      }\n  }\n  S.painted = h;\n}\n\nfunction addCraft(S, kind, st, X, yc, dir) {\n  const R = kind ? 5.5 + rnd() : 11.5 + rnd();\n  const o = { kind, st, X, yc, Z: -dir * R, R, dir, th: (-dir * PI) / 2, bank: st === \"climb\" ? 0.5 + 0.12 * kind : 0, pitch: 0, off: 0, s: 0, w: kind ? 1.75 + 0.3 * rnd() : 1.05, c0: kind ? 1.9 : 2.4 };\n  S.gl.push(o);\n  return o;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hour = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2, kg = clamp(k[2], 1, 4), n = (S.n = round(kg)), wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    S.wind = wind;\n    S.ks = 1 + 0.14 * (kg - 1);\n    S.lean = wind * 0.22;\n    for (let i = 0; i \u003c n; i++) addCraft(S, 0, \"climb\", 0, n === 1 ? 72 : 82 - (i * 36) / (n - 1), 1).th = rnd() * TAU;\n    for (const y of [86, 62]) addCraft(S, 1, \"climb\", 0, y, 1).th = rnd() * TAU;\n    for (let i = 0; i \u003c 56; i++) S.down.push({ y: YB + rnd() * (YG - YB), a: rnd() * TAU, r: 0.5 + rnd() * 5.5, v: 3 + rnd() * 3, tw: rnd() * TAU });\n    // The cloud of the last thermal is drifting off as the next one starts.\n    S.clouds.push(Object.assign(newCloud(colX(S, YB) + (wind \u003c 0 ? -24 : 24), 26), { det: true, al: 0.9 }), newCloud(colX(S, YB), 1.5));\n  }\n  const d = dt * tempo;\n  S.t += d;\n  S.wind += (wind - S.wind) * min(1, dt * 2);\n  S.ks += (1 + 0.14 * (kg - 1) - S.ks) * min(1, dt * 2);\n  S.lean = S.wind * 0.22;\n  const vd = (S.wind \u003c 0 ? -2 : 2) + 6 * S.wind;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const dir = rnd() \u003c 0.5 ? 1 : -1, o = addCraft(S, 0, \"launch\", dir > 0 ? 4 + rnd() * 10 : 50 + rnd() * 10, 0, dir);\n    Object.assign(o, { yc: 121 + o.Z * SE, X0: o.X, cable: true });\n  }\n\n  // The thermal's cloud builds for 26 s, then drifts off and thins as a new one starts.\n  for (const c of S.clouds) {\n    c.a += d;\n    c.g = 1 - exp(-c.a / 6.5);\n    if (c.det) {\n      c.x += vd * d;\n      c.al -= d / 8;\n    } else {\n      c.x += (colX(S, YB) - c.x) * min(1, d * 0.6);\n      if (c.a > 26) {\n        c.det = true;\n        S.clouds.push(newCloud(colX(S, YB), 0));\n      }\n    }\n  }\n  S.clouds = S.clouds.filter((c) => c.al > 0);\n  // Far cumulus and the shadows of clouds out of sight drift with the wind and come round again.\n  for (const f of S.far.concat(S.shad)) {\n    f.x += vd * f.m * d;\n    if ((f.x - 32) * vd > 0 && abs(f.x - 32) > f.e) f.x = 32 - sign(f.x - 32) * (f.e - 1);\n  }\n\n  // Gliders and buzzards: launched, gliding in, circling up, or gliding off.\n  for (const o of S.gl) {\n    const cx = colX(S, o.yc) + (o.kind ? 2 : 0);\n    if (o.st === \"launch\") {\n      o.s += d;\n      const v = 16 * min(1, o.s / 0.5);\n      o.pitch = o.cable ? 0.95 * sstep(0.5, 1.1, o.s) : max(0, o.pitch - d * 1.2);\n      o.X += o.dir * v * cos(o.pitch) * d;\n      o.yc -= v * sin(o.pitch) * d;\n      if (o.cable && o.yc \u003c 88) {\n        o.cable = false;\n        S.cable = { x: o.X + o.dir * 3, y: o.yc - o.Z * SE - 2.5, xw: o.X0 + o.dir * 58, t: 0 };\n      }\n      if (!o.cable && o.pitch \u003c= 0) {\n        o.st = \"climb\";\n        o.off = o.X - cx;\n      }\n    } else if (o.st === \"climb\") {\n      const th0 = o.th;\n      o.th += o.w * d;\n      o.off *= exp(-d * 0.35);\n      o.yc -= o.c0 * (1 + 0.45 * cos(o.th + 0.8)) * d;\n      o.bank += ((o.kind ? 0.62 : 0.5) - o.bank) * min(1, d * 2);\n      if (o.yc \u003c YB + (o.kind ? 18 : 8)) o.leave = true;\n      // Done, it straightens up the next time it flies across the panel.\n      if (o.leave && cos(th0) * cos(o.th) \u003c= 0) {\n        o.st = \"out\";\n        o.th = sin(o.th) > 0 ? PI / 2 : -PI / 2;\n        o.dir = -sign(sin(o.th));\n      }\n      o.X = cx + o.off + o.R * cos(o.th);\n      o.Z = o.R * sin(o.th);\n    } else {\n      o.X += o.dir * o.R * o.w * d;\n      o.yc += (o.st === \"out\" ? 0.8 : 0.4) * d;\n      o.bank *= exp(-d * 3);\n      if (o.st === \"in\" && o.dir * (o.X - cx) >= 0) o.st = \"climb\";\n      if (abs(o.X - 32) > 56) o.gone = true;\n    }\n  }\n  S.gl = S.gl.filter((o) => !o.gone);\n  // Too many: the highest leaves early. Too few: a newcomer glides in low.\n  for (const kind of [0, 1]) {\n    const act = S.gl.filter((o) => o.kind === kind && o.st !== \"out\");\n    const want = kind ? 2 : n;\n    S.spawn[kind] -= d;\n    if (act.length \u003c want && S.spawn[kind] \u003c= 0) {\n      const dir = rnd() \u003c 0.5 ? 1 : -1;\n      addCraft(S, kind, \"in\", 32 - dir * 46, (kind ? 84 : 86) + rnd() * 6, dir);\n      S.spawn[kind] = kind ? 1.5 + rnd() * 2 : 2.5;\n    } else if (act.length > want) {\n      const hi = act.filter((o) => o.st === \"climb\" && !o.leave).sort((p, q) => p.yc - q.yc)[0];\n      if (hi) hi.leave = true;\n    }\n  }\n  const cb = S.cable;\n  if (cb) {\n    cb.y += 9 * d;\n    if ((cb.t += d) > 2) S.cable = null;\n  }\n  // Thistledown rides the thermal up from the ploughed field.\n  for (const p of S.down) {\n    p.y -= p.v * d;\n    p.a += (1.6 / (1 + p.r * 0.3)) * d;\n    if (p.y \u003c YB + 1) {\n      p.y = YG - 3 + rnd() * 5;\n      p.r = 0.5 + rnd() * 5.5;\n    }\n  }\n}\n\n// A tapered stroke into the coverage buffer, growing the box drawn into.\nfunction stroke(S, ax, ay, bx, by, ra, rb) {\n  const { A, bb } = S, x0 = max(0, floor(min(ax, bx) - 2)), x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2)), y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  if (x0 > x1 || y0 > y1) return;\n  bb[0] = min(bb[0], x0);\n  bb[1] = min(bb[1], y0);\n  bb[2] = max(bb[2], x1);\n  bb[3] = max(bb[3], y1);\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = clamp((px * dx + py * dy) / ll, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      const a = clamp(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1), i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\nfunction flush(S, col, alpha) {\n  const { A, buf, bb } = S;\n  for (let y = bb[1]; y \u003c= bb[3]; y++)\n    for (let x = bb[0]; x \u003c= bb[2]; x++) {\n      const i = y * W + x, a = min(1, A[i] * alpha);\n      if (a \u003c= 0) continue;\n      A[i] = 0;\n      for (let c = 0; c \u003c 3; c++) buf[i * 3 + c] += (col[c] - buf[i * 3 + c]) * a;\n    }\n  bb[0] = bb[1] = 1e9;\n  bb[2] = bb[3] = -1;\n}\n\n// A craft in its own frame (heading, pitch, bank), seen from below and to the side.\nfunction craft(S, o, h) {\n  const cl = o.st === \"climb\", hx = cl ? -sin(o.th) : o.dir, hz = cl ? cos(o.th) : 0, cp = cos(o.pitch), sp = sin(o.pitch);\n  const F = [hx * cp, sp, hz * cp], U0 = [-hx * sp, cp, -hz * sp], R0 = [-hz, 0, hx], cb = cos(o.bank * 0.7), sb = sin(o.bank * 0.7);\n  const U = [U0[0] * cb + R0[0] * sb, U0[1] * cb, U0[2] * cb + R0[2] * sb], R = [R0[0] * cb - U0[0] * sb, -U0[1] * sb, R0[2] * cb - U0[2] * sb];\n  const sy = o.yc - o.Z * SE;\n  const P = (f, r, u) => [o.X + F[0] * f + R[0] * r + U[0] * u, sy - (F[1] * f + R[1] * r + U[1] * u) * BC - (F[2] * f + R[2] * r + U[2] * u) * BE];\n  for (const m of o.kind ? BUZZ : GLIDER) {\n    const a = P(m[0], m[1], m[2]), b = P(m[3], m[4], m[5]);\n    stroke(S, a[0], a[1], b[0], b[1], m[6], m[7]);\n  }\n  // From below we see the shaded underside; banked towards us, the sunlit top.\n  const top = sstep(-0.3, 0.4, -U[1] * BE + U[2] * BC);\n  if (o.kind) return flush(S, [mix(58, 86, top), mix(42, 62, top), mix(30, 40, top)], 1);\n  const f = 0.84 + 0.16 * top;\n  flush(S, mix3([236, 240, 246], [255, 226, 176], h).map((v) => v * f), 1.35);\n  // Once a turn the wing tilts to the sun and flashes.\n  const gx = mix(-0.35, -0.8, h), gz = mix(1, 0.6, h);\n  const gl = (sstep(0.92, 1, ((R0[0] * gx + R0[2] * gz) / sqrt(gx * gx + gz * gz)) * sign(o.bank || 1)) * abs(o.bank)) / 0.5;\n  if (gl \u003c 0.02) return;\n  const w = P(0.4, 3.5 * sign(o.bank || 1), 0.6);\n  for (let y = max(0, floor(w[1] - 5)); y \u003c= min(H - 1, w[1] + 5); y++)\n    for (let x = max(0, floor(w[0] - 5)); x \u003c= min(W - 1, w[0] + 5); x++) {\n      const ex = abs(x + 0.5 - w[0]), ey = abs(y + 0.5 - w[1]);\n      const v = gl * (exp(-sqrt(ex * ex + ey * ey) / 1.3) + 0.5 * exp(-min(ex, ey) * 2.5 - max(ex, ey) / 2.5)), q = (y * W + x) * 3;\n      S.buf[q] += 255 * v;\n      S.buf[q + 1] += 246 * v;\n      S.buf[q + 2] += mix(225, 170, h) * v;\n    }\n}\n\nfunction drawCloud(S, c, hw, ht, g, yb, al, haze) {\n  const { buf, t } = S, h = S.hour, B = [], lean = S.lean * 0.6;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9;\n  for (const p of c.p) {\n    const gr = sstep(p.t0, p.t0 + 0.25, g);\n    if (gr \u003c= 0.02) continue;\n    const r = p.r * hw * gr * (1 + 0.05 * sin(t * 0.7 + p.ph)), bx = c.x + p.u * hw + lean * p.v * ht + 0.04 * hw * sin(t * 0.5 + p.ph);\n    const by = yb - p.v * ht - 0.03 * ht * sin(t * 0.4 + p.ph * 2);\n    B.push(bx, by, r);\n    x0 = min(x0, bx - r);\n    x1 = max(x1, bx + r);\n    y0 = min(y0, by - r);\n  }\n  const L = [mix(-0.45, -0.85, h), mix(-0.7, -0.28, h), 0.5], ll = sqrt(L[0] * L[0] + L[1] * L[1] + L[2] * L[2]);\n  const litC = mix3([252, 252, 250], [255, 214, 150], h);\n  const shC = mix3([150, 162, 192], [150, 124, 146], h).map((v) => v * (1 - 0.2 * g * (c.det ? 0.5 : 1)));\n  const baseC = mix3([126, 132, 152], [108, 90, 100], h).map((v) => v * mix(1, 0.78, g));\n  const hz = hazeOf(h);\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, yb + 1); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, x1 + 2); x++) {\n      const px = x + 0.5, py = y + 0.5;\n      // The normal blends the puffs nearby, weighted by how deep inside each the pixel is.\n      let best = -9, r = 1, sw = 0, nx = 0, ny = 0;\n      for (let i = 0; i \u003c B.length; i += 3) {\n        const dx = (px - B[i]) / B[i + 2], dy = (py - B[i + 1]) / B[i + 2], v = 1 - sqrt(dx * dx + dy * dy);\n        if (v \u003c -0.5) continue;\n        if (v > best) {\n          best = v;\n          r = B[i + 2];\n        }\n        const w = exp(7 * v);\n        sw += w;\n        nx += dx * w;\n        ny += dy * w;\n      }\n      if (best \u003c -0.4) continue;\n      // Cauliflower edges; a cloud that is dying frays from the edges in.\n      const n = noise(px * 0.32, py * 0.32 - t * 0.12, c.sd);\n      const a = clamp((best + 0.32 * (n - 0.5) - (1 - al) * 0.8) * r * 0.7, 0, 1) * clamp(yb + 0.7 - py + 0.6 * noise(px * 0.4, 1, c.sd), 0, 1) * sqrt(al);\n      if (a \u003c= 0) continue;\n      nx /= sw;\n      ny /= sw;\n      const nz = sqrt(max(0, 1 - nx * nx - ny * ny));\n      const lw = clamp(((nx * L[0] + ny * L[1] + nz * L[2]) / ll + 0.45) / 1.45 + 0.3 * (n - 0.5), 0, 1) * (0.55 + 0.45 * clamp((yb - py) / (0.45 * ht), 0, 1));\n      const bs = sstep(yb - 2.6, yb - 0.6, py), q = (y * W + x) * 3;\n      for (let k = 0; k \u003c 3; k++) buf[q + k] += (mix(mix(mix(shC[k], litC[k], lw), baseC[k], bs), hz[k], haze) - buf[q + k]) * a;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.painted === undefined || abs(S.painted - S.hour) > 0.003) paint(S);\n  const h = S.hour, buf = S.buf;\n  buf.set(S.bg);\n\n  // Cloud shadows: each thermal cloud's, pushed off its field by the sun, and two from clouds out of sight.\n  const sh = [];\n  for (const c of S.clouds) {\n    const ru = (((8 + 18 * c.g) * S.ks * DSRC) / 64) * 0.95 * (c.det ? sqrt(c.al) : 1);\n    sh.push(((c.x - 29 + 30 * h) * DSRC) / 64, DSRC * (1.04 + 1.1 * h), ru, ru * 1.3 + 0.5, c.al * (0.55 + 0.45 * c.g));\n  }\n  for (const s of S.shad) sh.push(((s.x - 32) * s.D) / 64, s.D, (s.r * s.D) / 64, s.rd, 1);\n  const sc = [0.46, 0.5, 0.62];\n  for (let p = FY * W; p \u003c N; p++) {\n    let m = 0;\n    for (let i = 0; i \u003c sh.length; i += 5) {\n      const du = (S.fu[p] - sh[i]) / sh[i + 2], dv = (S.fd[p] - sh[i + 1]) / sh[i + 3], q = du * du + dv * dv;\n      if (q \u003c 2.2) m = max(m, sstep(1.05, 0.6, sqrt(q) + 0.35 * (S.fn[p] - 0.5)) * sh[i + 4]);\n    }\n    if (m > 0) for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= mix(1, sc[c], m);\n  }\n\n  // Far cumulus along the horizon, then the clouds the thermal builds.\n  for (const f of S.far) drawCloud(S, f, f.hw, f.ht, 1, f.yb, 0.9, 0.5);\n  for (const c of S.clouds) drawCloud(S, c, (8 + 18 * c.g) * S.ks, (6 + 26 * c.g) * S.ks, c.g, YB, c.det ? c.al : 1, 0);\n\n  // Thistledown catching the sun as it rises.\n  const dc = mix3([240, 240, 228], [255, 222, 160], h), nd = 26 + round((10 * (S.ks - 1)) / 0.14);\n  for (let i = 0; i \u003c nd; i++) {\n    const p = S.down[i], x = round(colX(S, p.y) + p.r * cos(p.a) + 0.8 * sin(S.t * 1.7 + p.tw) - 0.5), y = round(p.y + p.r * sin(p.a) * SE - 0.5);\n    if (x \u003c 0 || x >= W) continue;\n    const a = (0.45 + 0.4 * sin(S.t * 3 + p.tw * 5)) * sstep(YB, YB + 8, p.y) * sstep(YG + 2, YG - 6, p.y);\n    for (let k = 0, q = (y * W + x) * 3; k \u003c 3; k++) buf[q + k] += (dc[k] - buf[q + k]) * a;\n  }\n\n  // The winch cable, and the one that falls on its red parachute after release.\n  const dark = [36, 34, 38];\n  for (const o of S.gl)\n    if (o.cable) {\n      stroke(S, o.X + o.dir * 3 * cos(o.pitch), o.yc - o.Z * SE - 3 * sin(o.pitch), o.X0 + o.dir * 58, 118, 0.18, 0.18);\n      flush(S, dark, 0.75);\n    }\n  const cb = S.cable;\n  if (cb) {\n    stroke(S, cb.x, cb.y, cb.xw, 118, 0.18, 0.18);\n    flush(S, dark, 0.75 * (1 - cb.t / 2));\n    stroke(S, cb.x, cb.y - 1, cb.x, cb.y - 1, 0.7, 0.7);\n    flush(S, [230, 50, 40], 1 - cb.t / 2);\n  }\n  // Gliders and buzzards, the far side of their circles first.\n  for (const o of S.gl.slice().sort((p, q) => p.Z - q.Z)) craft(S, o, h);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","layer":{"id":"layer-thermal","type":"code","name":"thermal","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Thermal\n// Family:  flight\n// Idea:    A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after thermal soaring under fair-weather cumulus over farmland\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1\n//\n// Knob 1: Hour. Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows.\n// Knob 2: Speed. At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower.\n// Knob 3: Gliders. One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up.\n// Knob 4: Wind. The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm.\n// Buttons: K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, round, pow, sign, PI } = Math;\nconst TAU = 2 * PI;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\nconst rnd = () => Math.random();\n// Rows: horizon, first field row, cloud base, where the thermal leaves the ground.\nconst [HOR, FY, YB, YG] = [97, 100, 36, 116];\n// The ploughed field the thermal comes off: its column and its distance.\nconst [SRCX, DSRC] = [29, 9.6];\n// We look up a little, so a level circle is a thin ellipse; the craft are drawn flatter so a banked wing does not stand on end.\nconst SE = sin(0.3);\nconst [BE, BC] = [sin(0.1), cos(0.1)];\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\nconst fbm = (x, y, s) => 0.55 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.15 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Pasture, beans, stubble, wheat, hay and plough in midday sun; 1 marks rows running away from us.\nconst CROP = [[70, 150, 45, 0], [38, 106, 36, 1], [216, 184, 94, 1], [198, 160, 66, 0], [142, 178, 74, 0], [96, 62, 40, 1]];\nconst PICK = [0, 0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Tapered strokes in the craft's axes: forward, right, up, twice, then two radii.\nconst GLIDER = [[3.6, 0, -0.1, -4.8, 0, 0.15, 0.85, 0.45], [0.6, 0, 0.25, 0.25, -9, 0.85, 0.75, 0.45], [0.6, 0, 0.25, 0.25, 9, 0.85, 0.75, 0.45], [-4.2, 0, 0.1, -4.9, 0, 2.4, 0.55, 0.45], [-4.9, -2.6, 2.4, -4.9, 2.6, 2.4, 0.45, 0.45]];\nconst BUZZ = [[1.3, 0, 0, -1.3, 0, 0, 0.6, 0.45], [0.2, 0, 0.1, -0.3, -3.7, 0.75, 0.8, 0.45], [0.2, 0, 0.1, -0.3, 3.7, 0.75, 0.8, 0.45], [-1.2, 0, 0, -2.5, 0, 0.1, 0.45, 0.65]];\n\n// A cumulus as puffs over a flat base: each puff's place (u across, v up), its radius r and when in its growth it appears.\nfunction puffs() {\n  const L = [];\n  const add = (u, v, r, t0) => L.push({ u: u + (rnd() - 0.5) * 0.14, v: v + (rnd() - 0.5) * 0.08, r: r * (0.88 + 0.24 * rnd()), t0, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 5; i++) add(-0.76 + i * 0.38, 0.2, 0.34, i === 2 ? 0 : 0.03 + 0.12 * rnd());\n  for (let i = 0; i \u003c 4; i++) add(-0.5 + i * 0.33, 0.45, 0.33, 0.08 + 0.17 * rnd());\n  for (let i = 0; i \u003c 3; i++) add(-0.3 + i * 0.3, 0.68, 0.3, 0.3 + 0.2 * rnd());\n  for (let i = 0; i \u003c 2; i++) add((rnd() - 0.5) * 0.4, 0.86, 0.26, 0.55 + 0.15 * rnd());\n  return L;\n}\nconst newCloud = (x, a) => ({ x, a, g: 0, al: 1, det: false, p: puffs(), sd: floor(rnd() * 999) });\n\n// Fields lie in strips at distance D (row = HOR + 180 / D), each cut into fields across.\nfunction buildFields(S) {\n  const strips = [], trees = [], us = ((SRCX - 32) * DSRC) / 64, hw = (11 * DSRC) / 64;\n  for (let D = 5.6; D \u003c 66; ) {\n    const D2 = D * (1.22 + 0.12 * rnd());\n    const wid = () => ((12 + 18 * rnd()) * pow(6 / D, 0.35) * D) / 64;\n    let b = [];\n    for (let u = -0.62 * D2 - rnd() * wid(); u \u003c 0.62 * D2 + 0.3; u += wid()) b.push(u);\n    const src = D \u003c= DSRC && DSRC \u003c D2;\n    if (src) {\n      b = b.filter((u) => u \u003c us - hw - 0.3 || u > us + hw + 0.3);\n      b.push(us - hw, us + hw);\n      b.sort((p, q) => p - q);\n    }\n    const t = [];\n    for (let j = 0; j \u003c b.length - 1; j++) {\n      let k;\n      do k = PICK[floor(rnd() * PICK.length)];\n      while (j && k === t[j - 1]);\n      t.push(k);\n    }\n    if (src) t[b.indexOf(us - hw)] = 5;\n    strips.push({ d0: D, d1: D2, b, t, hh: 0.12 + 0.08 * rnd(), i: strips.length });\n    // Trees in the hedge along each strip's near edge, and at some corners.\n    for (let j = 0; j \u003c 2; j++) if (rnd() \u003c 0.6) trees.push({ u: (rnd() - 0.5) * 1.1 * D, D: D + 0.05, rc: 0.2 + 0.14 * rnd() });\n    for (let j = 1; j \u003c b.length - 1; j++) if (rnd() \u003c 0.2) trees.push({ u: b[j], D: D + 0.05, rc: 0.2 + 0.12 * rnd() });\n    D = D2;\n  }\n  for (const tr of trees) tr.hc = tr.rc * 1.5 + 0.15;\n  S.strips = strips;\n  S.trees = trees.sort((p, q) => q.D - p.D);\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N);\n  const S = { t: 0, bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), A: F(), fu: F(), fd: F(), fn: F(), gl: [], down: [], clouds: [], far: [], spawn: [0, 0], cable: null, bb: [1e9, 1e9, -1, -1] };\n  buildFields(S);\n  for (let y = FY; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      S.fd[p] = 180 / (y + 0.5 - HOR);\n      S.fu[p] = ((x + 0.5 - 32) * S.fd[p]) / 64;\n      S.fn[p] = fbm(x * 0.15, y * 0.3, 11);\n    }\n  for (let i = 0; i \u003c 3; i++) S.far.push({ x: 8 + i * 24 + rnd() * 10, yb: 87 - i * 5 - rnd() * 2, hw: 5 + 2.5 * i + rnd() * 2, ht: 3 + i + rnd() * 1.5, p: puffs(), sd: floor(rnd() * 999), m: 0.35, e: 44 });\n  S.shad = [{ x: 6, D: 7.4, r: 19, rd: 2.6, m: 0.9, e: 62 }, { x: 50, D: 16, r: 15, rd: 5.5, m: 0.9, e: 60 }];\n  params.s = S;\n}\n\n// The thermal's centre at a row: it leans downwind with height and wanders a little.\nconst colX = (S, y) => SRCX + S.lean * (YG - y) + 1.5 * sin(S.t * 0.21);\nconst sunLight = (h, k = mix(1, 0.9, h)) => [mix(1, 1.16, h) * k, mix(1, 0.86, h) * k, mix(1, 0.56, h) * k];\nconst SHADE = [0.42, 0.47, 0.6];\nconst hazeOf = (h) => mix3([176, 202, 222], [236, 186, 122], h);\nfunction skyAt(x, y, h) {\n  const top = mix3([14, 50, 150], [30, 52, 128], h), mid = mix3([44, 108, 206], [70, 104, 178], h), t = y / 96;\n  const c = t \u003c 0.66 ? mix3(top, mid, sstep(0, 0.66, t)) : mix3(mid, hazeOf(h), sstep(0.66, 1, t));\n  const gw = pow(h, 1.5) * exp(-x / 24) * exp(-abs(y - 78) / 36);\n  return [c[0] + 110 * gw, c[1] + 64 * gw, c[2] + 14 * gw];\n}\n\n// The ground seen at a point of the panel: hedges, fields, their shadows, and the haze.\nfunction fieldAt(S, x, y, sun, Lsh, haze) {\n  const D = 180 / (y - HOR), u = ((x - 32) * D) / 64, st = S.strips;\n  let k = 0;\n  while (k \u003c st.length - 1 && D >= st[k].d1) k++;\n  let alb = null;\n  let lit = 1;\n  // The hedge on a strip's near edge hides the ground just behind it.\n  for (let j = k; j >= 0 && st[j].d0 > D * 0.8; j--) {\n    const s = st[j];\n    if (y >= HOR + (180 - 64 * s.hh * (0.7 + 0.6 * noise(u * 2.6, s.i * 9, 3))) / s.d0) {\n      const n = 0.8 + 0.4 * noise(u * 6, y, 5);\n      alb = [34 * n, 78 * n, 30 * n];\n      lit = 0.85;\n      break;\n    }\n  }\n  if (!alb) {\n    const s = st[k], b = s.b;\n    let j = 0;\n    while (j \u003c b.length - 2 && u >= b[j + 1]) j++;\n    const hwu = ((0.8 * pow(6 / D, 0.4) + 0.25) * D) / 64;\n    if (abs(u - b[j]) \u003c hwu || abs(u - b[j + 1]) \u003c hwu) {\n      alb = [30, 70, 28];\n      lit = 0.7;\n    } else {\n      const c = CROP[s.t[j]], tx = c[3] ? 0.97 + 0.17 * sin(u * TAU * 6.5) : 0.86 + 0.28 * fbm(u * 2.5, D * 0.7, s.t[j] + j);\n      alb = [c[0] * tx, c[1] * tx, c[2] * tx];\n      // Shadows of the hedges left and in front, and of the trees.\n      if (u - b[j] \u003c s.hh * Lsh * 0.85 || D - s.d0 \u003c s.hh * Lsh * 0.4) lit = 0;\n      else\n        for (const tr of S.trees) {\n          const du = u - tr.u - tr.hc * Lsh * 0.85, dd = D - tr.D - tr.hc * Lsh * 0.45;\n          if (abs(dd) > 3 + Lsh) continue;\n          const al = (du * 0.86 + dd * 0.5) / (tr.rc * (1 + 0.55 * Lsh)), pe = (-du * 0.5 + dd * 0.86) / (tr.rc * 1.8);\n          if (al * al + pe * pe \u003c 1) {\n            lit = 0;\n            break;\n          }\n        }\n    }\n  }\n  const hz = 0.55 * sstep(5, 75, D);\n  return [0, 1, 2].map((c) => mix(alb[c] * mix(SHADE[c], sun[c], lit), haze[c], hz));\n}\n\nfunction paint(S) {\n  const h = S.hour, sun = sunLight(h), haze = hazeOf(h), Lsh = 0.35 + 4.2 * pow(h, 1.6), bg = S.bg, ridgeF = mix3(haze, [64, 96, 116], 0.38);\n  const ridgeN = mix3(haze, [52 * sun[0], 98 * sun[1], 54 * sun[2]], 0.58);\n  for (let x = 0; x \u003c W; x++) {\n    const farT = 83 + 5 * fbm(x * 0.045, 1.3, 21), nearT = 91.5 + 3 * fbm(x * 0.09, 4.1, 22) - 1.5 * sstep(0.55, 0.8, noise(x * 0.5, 0, 23));\n    for (let y = 0; y \u003c H; y++) {\n      const q = (y * W + x) * 3;\n      bg[q] = bg[q + 1] = bg[q + 2] = 0;\n      // The open sky is smooth enough for one sample.\n      for (let k = y + 1 \u003c farT ? 3 : 0; k \u003c 4; k++) {\n        const xs = x + 0.25 + 0.5 * (k & 1), ys = y + 0.25 + 0.5 * (k >> 1);\n        let c;\n        if (ys >= FY) c = fieldAt(S, xs, ys, sun, Lsh, haze);\n        else if (ys >= nearT) c = ridgeN.map((v) => v * (0.84 + 0.3 * fbm(x * 0.35, ys * 0.9, 24)));\n        else if (ys >= farT) c = ridgeF;\n        else c = skyAt(xs, ys, h);\n        for (let i = 0; i \u003c 3; i++) bg[q + i] += y + 1 \u003c farT ? c[i] : c[i] / 4;\n      }\n    }\n  }\n  // Tree crowns, far ones first, lit from the sun's side.\n  for (const tr of S.trees) {\n    const cx = 32 + (64 * tr.u) / tr.D, cy = HOR + (180 - 64 * tr.hc) / tr.D, R = (64 * tr.rc) / tr.D, hz = 0.55 * sstep(5, 75, tr.D);\n    for (let y = max(FY - 4, floor(cy - R - 1)); y \u003c= min(H - 1, cy + R + 1); y++)\n      for (let x = max(0, floor(cx - R - 1)); x \u003c= min(W - 1, cx + R + 1); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - cy) / R, a = clamp((1 - sqrt(dx * dx + dy * dy)) * R + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const l = clamp(0.45 - 0.7 * dx - 0.4 * dy, 0, 1), n = 0.85 + 0.3 * hash(x, y, 31), q = (y * W + x) * 3;\n        [40, 94, 38].forEach((al, c) => (bg[q + c] += (mix(al * n * mix(SHADE[c], sun[c] * 1.1, l), haze[c], hz) - bg[q + c]) * a));\n      }\n  }\n  S.painted = h;\n}\n\nfunction addCraft(S, kind, st, X, yc, dir) {\n  const R = kind ? 5.5 + rnd() : 11.5 + rnd();\n  const o = { kind, st, X, yc, Z: -dir * R, R, dir, th: (-dir * PI) / 2, bank: st === \"climb\" ? 0.5 + 0.12 * kind : 0, pitch: 0, off: 0, s: 0, w: kind ? 1.75 + 0.3 * rnd() : 1.05, c0: kind ? 1.9 : 2.4 };\n  S.gl.push(o);\n  return o;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hour = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2, kg = clamp(k[2], 1, 4), n = (S.n = round(kg)), wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    S.wind = wind;\n    S.ks = 1 + 0.14 * (kg - 1);\n    S.lean = wind * 0.22;\n    for (let i = 0; i \u003c n; i++) addCraft(S, 0, \"climb\", 0, n === 1 ? 72 : 82 - (i * 36) / (n - 1), 1).th = rnd() * TAU;\n    for (const y of [86, 62]) addCraft(S, 1, \"climb\", 0, y, 1).th = rnd() * TAU;\n    for (let i = 0; i \u003c 56; i++) S.down.push({ y: YB + rnd() * (YG - YB), a: rnd() * TAU, r: 0.5 + rnd() * 5.5, v: 3 + rnd() * 3, tw: rnd() * TAU });\n    // The cloud of the last thermal is drifting off as the next one starts.\n    S.clouds.push(Object.assign(newCloud(colX(S, YB) + (wind \u003c 0 ? -24 : 24), 26), { det: true, al: 0.9 }), newCloud(colX(S, YB), 1.5));\n  }\n  const d = dt * tempo;\n  S.t += d;\n  S.wind += (wind - S.wind) * min(1, dt * 2);\n  S.ks += (1 + 0.14 * (kg - 1) - S.ks) * min(1, dt * 2);\n  S.lean = S.wind * 0.22;\n  const vd = (S.wind \u003c 0 ? -2 : 2) + 6 * S.wind;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const dir = rnd() \u003c 0.5 ? 1 : -1, o = addCraft(S, 0, \"launch\", dir > 0 ? 4 + rnd() * 10 : 50 + rnd() * 10, 0, dir);\n    Object.assign(o, { yc: 121 + o.Z * SE, X0: o.X, cable: true });\n  }\n\n  // The thermal's cloud builds for 26 s, then drifts off and thins as a new one starts.\n  for (const c of S.clouds) {\n    c.a += d;\n    c.g = 1 - exp(-c.a / 6.5);\n    if (c.det) {\n      c.x += vd * d;\n      c.al -= d / 8;\n    } else {\n      c.x += (colX(S, YB) - c.x) * min(1, d * 0.6);\n      if (c.a > 26) {\n        c.det = true;\n        S.clouds.push(newCloud(colX(S, YB), 0));\n      }\n    }\n  }\n  S.clouds = S.clouds.filter((c) => c.al > 0);\n  // Far cumulus and the shadows of clouds out of sight drift with the wind and come round again.\n  for (const f of S.far.concat(S.shad)) {\n    f.x += vd * f.m * d;\n    if ((f.x - 32) * vd > 0 && abs(f.x - 32) > f.e) f.x = 32 - sign(f.x - 32) * (f.e - 1);\n  }\n\n  // Gliders and buzzards: launched, gliding in, circling up, or gliding off.\n  for (const o of S.gl) {\n    const cx = colX(S, o.yc) + (o.kind ? 2 : 0);\n    if (o.st === \"launch\") {\n      o.s += d;\n      const v = 16 * min(1, o.s / 0.5);\n      o.pitch = o.cable ? 0.95 * sstep(0.5, 1.1, o.s) : max(0, o.pitch - d * 1.2);\n      o.X += o.dir * v * cos(o.pitch) * d;\n      o.yc -= v * sin(o.pitch) * d;\n      if (o.cable && o.yc \u003c 88) {\n        o.cable = false;\n        S.cable = { x: o.X + o.dir * 3, y: o.yc - o.Z * SE - 2.5, xw: o.X0 + o.dir * 58, t: 0 };\n      }\n      if (!o.cable && o.pitch \u003c= 0) {\n        o.st = \"climb\";\n        o.off = o.X - cx;\n      }\n    } else if (o.st === \"climb\") {\n      const th0 = o.th;\n      o.th += o.w * d;\n      o.off *= exp(-d * 0.35);\n      o.yc -= o.c0 * (1 + 0.45 * cos(o.th + 0.8)) * d;\n      o.bank += ((o.kind ? 0.62 : 0.5) - o.bank) * min(1, d * 2);\n      if (o.yc \u003c YB + (o.kind ? 18 : 8)) o.leave = true;\n      // Done, it straightens up the next time it flies across the panel.\n      if (o.leave && cos(th0) * cos(o.th) \u003c= 0) {\n        o.st = \"out\";\n        o.th = sin(o.th) > 0 ? PI / 2 : -PI / 2;\n        o.dir = -sign(sin(o.th));\n      }\n      o.X = cx + o.off + o.R * cos(o.th);\n      o.Z = o.R * sin(o.th);\n    } else {\n      o.X += o.dir * o.R * o.w * d;\n      o.yc += (o.st === \"out\" ? 0.8 : 0.4) * d;\n      o.bank *= exp(-d * 3);\n      if (o.st === \"in\" && o.dir * (o.X - cx) >= 0) o.st = \"climb\";\n      if (abs(o.X - 32) > 56) o.gone = true;\n    }\n  }\n  S.gl = S.gl.filter((o) => !o.gone);\n  // Too many: the highest leaves early. Too few: a newcomer glides in low.\n  for (const kind of [0, 1]) {\n    const act = S.gl.filter((o) => o.kind === kind && o.st !== \"out\");\n    const want = kind ? 2 : n;\n    S.spawn[kind] -= d;\n    if (act.length \u003c want && S.spawn[kind] \u003c= 0) {\n      const dir = rnd() \u003c 0.5 ? 1 : -1;\n      addCraft(S, kind, \"in\", 32 - dir * 46, (kind ? 84 : 86) + rnd() * 6, dir);\n      S.spawn[kind] = kind ? 1.5 + rnd() * 2 : 2.5;\n    } else if (act.length > want) {\n      const hi = act.filter((o) => o.st === \"climb\" && !o.leave).sort((p, q) => p.yc - q.yc)[0];\n      if (hi) hi.leave = true;\n    }\n  }\n  const cb = S.cable;\n  if (cb) {\n    cb.y += 9 * d;\n    if ((cb.t += d) > 2) S.cable = null;\n  }\n  // Thistledown rides the thermal up from the ploughed field.\n  for (const p of S.down) {\n    p.y -= p.v * d;\n    p.a += (1.6 / (1 + p.r * 0.3)) * d;\n    if (p.y \u003c YB + 1) {\n      p.y = YG - 3 + rnd() * 5;\n      p.r = 0.5 + rnd() * 5.5;\n    }\n  }\n}\n\n// A tapered stroke into the coverage buffer, growing the box drawn into.\nfunction stroke(S, ax, ay, bx, by, ra, rb) {\n  const { A, bb } = S, x0 = max(0, floor(min(ax, bx) - 2)), x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2)), y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  if (x0 > x1 || y0 > y1) return;\n  bb[0] = min(bb[0], x0);\n  bb[1] = min(bb[1], y0);\n  bb[2] = max(bb[2], x1);\n  bb[3] = max(bb[3], y1);\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = clamp((px * dx + py * dy) / ll, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      const a = clamp(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1), i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\nfunction flush(S, col, alpha) {\n  const { A, buf, bb } = S;\n  for (let y = bb[1]; y \u003c= bb[3]; y++)\n    for (let x = bb[0]; x \u003c= bb[2]; x++) {\n      const i = y * W + x, a = min(1, A[i] * alpha);\n      if (a \u003c= 0) continue;\n      A[i] = 0;\n      for (let c = 0; c \u003c 3; c++) buf[i * 3 + c] += (col[c] - buf[i * 3 + c]) * a;\n    }\n  bb[0] = bb[1] = 1e9;\n  bb[2] = bb[3] = -1;\n}\n\n// A craft in its own frame (heading, pitch, bank), seen from below and to the side.\nfunction craft(S, o, h) {\n  const cl = o.st === \"climb\", hx = cl ? -sin(o.th) : o.dir, hz = cl ? cos(o.th) : 0, cp = cos(o.pitch), sp = sin(o.pitch);\n  const F = [hx * cp, sp, hz * cp], U0 = [-hx * sp, cp, -hz * sp], R0 = [-hz, 0, hx], cb = cos(o.bank * 0.7), sb = sin(o.bank * 0.7);\n  const U = [U0[0] * cb + R0[0] * sb, U0[1] * cb, U0[2] * cb + R0[2] * sb], R = [R0[0] * cb - U0[0] * sb, -U0[1] * sb, R0[2] * cb - U0[2] * sb];\n  const sy = o.yc - o.Z * SE;\n  const P = (f, r, u) => [o.X + F[0] * f + R[0] * r + U[0] * u, sy - (F[1] * f + R[1] * r + U[1] * u) * BC - (F[2] * f + R[2] * r + U[2] * u) * BE];\n  for (const m of o.kind ? BUZZ : GLIDER) {\n    const a = P(m[0], m[1], m[2]), b = P(m[3], m[4], m[5]);\n    stroke(S, a[0], a[1], b[0], b[1], m[6], m[7]);\n  }\n  // From below we see the shaded underside; banked towards us, the sunlit top.\n  const top = sstep(-0.3, 0.4, -U[1] * BE + U[2] * BC);\n  if (o.kind) return flush(S, [mix(58, 86, top), mix(42, 62, top), mix(30, 40, top)], 1);\n  const f = 0.84 + 0.16 * top;\n  flush(S, mix3([236, 240, 246], [255, 226, 176], h).map((v) => v * f), 1.35);\n  // Once a turn the wing tilts to the sun and flashes.\n  const gx = mix(-0.35, -0.8, h), gz = mix(1, 0.6, h);\n  const gl = (sstep(0.92, 1, ((R0[0] * gx + R0[2] * gz) / sqrt(gx * gx + gz * gz)) * sign(o.bank || 1)) * abs(o.bank)) / 0.5;\n  if (gl \u003c 0.02) return;\n  const w = P(0.4, 3.5 * sign(o.bank || 1), 0.6);\n  for (let y = max(0, floor(w[1] - 5)); y \u003c= min(H - 1, w[1] + 5); y++)\n    for (let x = max(0, floor(w[0] - 5)); x \u003c= min(W - 1, w[0] + 5); x++) {\n      const ex = abs(x + 0.5 - w[0]), ey = abs(y + 0.5 - w[1]);\n      const v = gl * (exp(-sqrt(ex * ex + ey * ey) / 1.3) + 0.5 * exp(-min(ex, ey) * 2.5 - max(ex, ey) / 2.5)), q = (y * W + x) * 3;\n      S.buf[q] += 255 * v;\n      S.buf[q + 1] += 246 * v;\n      S.buf[q + 2] += mix(225, 170, h) * v;\n    }\n}\n\nfunction drawCloud(S, c, hw, ht, g, yb, al, haze) {\n  const { buf, t } = S, h = S.hour, B = [], lean = S.lean * 0.6;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9;\n  for (const p of c.p) {\n    const gr = sstep(p.t0, p.t0 + 0.25, g);\n    if (gr \u003c= 0.02) continue;\n    const r = p.r * hw * gr * (1 + 0.05 * sin(t * 0.7 + p.ph)), bx = c.x + p.u * hw + lean * p.v * ht + 0.04 * hw * sin(t * 0.5 + p.ph);\n    const by = yb - p.v * ht - 0.03 * ht * sin(t * 0.4 + p.ph * 2);\n    B.push(bx, by, r);\n    x0 = min(x0, bx - r);\n    x1 = max(x1, bx + r);\n    y0 = min(y0, by - r);\n  }\n  const L = [mix(-0.45, -0.85, h), mix(-0.7, -0.28, h), 0.5], ll = sqrt(L[0] * L[0] + L[1] * L[1] + L[2] * L[2]);\n  const litC = mix3([252, 252, 250], [255, 214, 150], h);\n  const shC = mix3([150, 162, 192], [150, 124, 146], h).map((v) => v * (1 - 0.2 * g * (c.det ? 0.5 : 1)));\n  const baseC = mix3([126, 132, 152], [108, 90, 100], h).map((v) => v * mix(1, 0.78, g));\n  const hz = hazeOf(h);\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, yb + 1); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, x1 + 2); x++) {\n      const px = x + 0.5, py = y + 0.5;\n      // The normal blends the puffs nearby, weighted by how deep inside each the pixel is.\n      let best = -9, r = 1, sw = 0, nx = 0, ny = 0;\n      for (let i = 0; i \u003c B.length; i += 3) {\n        const dx = (px - B[i]) / B[i + 2], dy = (py - B[i + 1]) / B[i + 2], v = 1 - sqrt(dx * dx + dy * dy);\n        if (v \u003c -0.5) continue;\n        if (v > best) {\n          best = v;\n          r = B[i + 2];\n        }\n        const w = exp(7 * v);\n        sw += w;\n        nx += dx * w;\n        ny += dy * w;\n      }\n      if (best \u003c -0.4) continue;\n      // Cauliflower edges; a cloud that is dying frays from the edges in.\n      const n = noise(px * 0.32, py * 0.32 - t * 0.12, c.sd);\n      const a = clamp((best + 0.32 * (n - 0.5) - (1 - al) * 0.8) * r * 0.7, 0, 1) * clamp(yb + 0.7 - py + 0.6 * noise(px * 0.4, 1, c.sd), 0, 1) * sqrt(al);\n      if (a \u003c= 0) continue;\n      nx /= sw;\n      ny /= sw;\n      const nz = sqrt(max(0, 1 - nx * nx - ny * ny));\n      const lw = clamp(((nx * L[0] + ny * L[1] + nz * L[2]) / ll + 0.45) / 1.45 + 0.3 * (n - 0.5), 0, 1) * (0.55 + 0.45 * clamp((yb - py) / (0.45 * ht), 0, 1));\n      const bs = sstep(yb - 2.6, yb - 0.6, py), q = (y * W + x) * 3;\n      for (let k = 0; k \u003c 3; k++) buf[q + k] += (mix(mix(mix(shC[k], litC[k], lw), baseC[k], bs), hz[k], haze) - buf[q + k]) * a;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.painted === undefined || abs(S.painted - S.hour) > 0.003) paint(S);\n  const h = S.hour, buf = S.buf;\n  buf.set(S.bg);\n\n  // Cloud shadows: each thermal cloud's, pushed off its field by the sun, and two from clouds out of sight.\n  const sh = [];\n  for (const c of S.clouds) {\n    const ru = (((8 + 18 * c.g) * S.ks * DSRC) / 64) * 0.95 * (c.det ? sqrt(c.al) : 1);\n    sh.push(((c.x - 29 + 30 * h) * DSRC) / 64, DSRC * (1.04 + 1.1 * h), ru, ru * 1.3 + 0.5, c.al * (0.55 + 0.45 * c.g));\n  }\n  for (const s of S.shad) sh.push(((s.x - 32) * s.D) / 64, s.D, (s.r * s.D) / 64, s.rd, 1);\n  const sc = [0.46, 0.5, 0.62];\n  for (let p = FY * W; p \u003c N; p++) {\n    let m = 0;\n    for (let i = 0; i \u003c sh.length; i += 5) {\n      const du = (S.fu[p] - sh[i]) / sh[i + 2], dv = (S.fd[p] - sh[i + 1]) / sh[i + 3], q = du * du + dv * dv;\n      if (q \u003c 2.2) m = max(m, sstep(1.05, 0.6, sqrt(q) + 0.35 * (S.fn[p] - 0.5)) * sh[i + 4]);\n    }\n    if (m > 0) for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= mix(1, sc[c], m);\n  }\n\n  // Far cumulus along the horizon, then the clouds the thermal builds.\n  for (const f of S.far) drawCloud(S, f, f.hw, f.ht, 1, f.yb, 0.9, 0.5);\n  for (const c of S.clouds) drawCloud(S, c, (8 + 18 * c.g) * S.ks, (6 + 26 * c.g) * S.ks, c.g, YB, c.det ? c.al : 1, 0);\n\n  // Thistledown catching the sun as it rises.\n  const dc = mix3([240, 240, 228], [255, 222, 160], h), nd = 26 + round((10 * (S.ks - 1)) / 0.14);\n  for (let i = 0; i \u003c nd; i++) {\n    const p = S.down[i], x = round(colX(S, p.y) + p.r * cos(p.a) + 0.8 * sin(S.t * 1.7 + p.tw) - 0.5), y = round(p.y + p.r * sin(p.a) * SE - 0.5);\n    if (x \u003c 0 || x >= W) continue;\n    const a = (0.45 + 0.4 * sin(S.t * 3 + p.tw * 5)) * sstep(YB, YB + 8, p.y) * sstep(YG + 2, YG - 6, p.y);\n    for (let k = 0, q = (y * W + x) * 3; k \u003c 3; k++) buf[q + k] += (dc[k] - buf[q + k]) * a;\n  }\n\n  // The winch cable, and the one that falls on its red parachute after release.\n  const dark = [36, 34, 38];\n  for (const o of S.gl)\n    if (o.cable) {\n      stroke(S, o.X + o.dir * 3 * cos(o.pitch), o.yc - o.Z * SE - 3 * sin(o.pitch), o.X0 + o.dir * 58, 118, 0.18, 0.18);\n      flush(S, dark, 0.75);\n    }\n  const cb = S.cable;\n  if (cb) {\n    stroke(S, cb.x, cb.y, cb.xw, 118, 0.18, 0.18);\n    flush(S, dark, 0.75 * (1 - cb.t / 2));\n    stroke(S, cb.x, cb.y - 1, cb.x, cb.y - 1, 0.7, 0.7);\n    flush(S, [230, 50, 40], 1 - cb.t / 2);\n  }\n  // Gliders and buzzards, the far side of their circles first.\n  for (const o of S.gl.slice().sort((p, q) => p.Z - q.Z)) craft(S, o, h);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower."},{"name":"Gliders","min":1,"max":4,"about":"One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up."},{"name":"Wind","min":-1,"max":1,"about":"The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm."}],"start":[0,2,1,0.06],"measures":{"motion":0.0272,"detail":0.0308,"edges":0.2402,"complexity":1.2348,"coverage":0.9999,"colour":0.3714,"drift":0.0371},"knobResponse":[0.1132,0.0554,0.0527,0.073]},{"slug":"thomson-problem","title":"Thomson Problem","family":"physics","round":34,"note":"천천히 도는 구 위에서 같은 전하 100개가 서로 밀어 거의 삼각형인 격자로 앉아요. 이웃이 여섯인 전하는 가운데가 옅은 하늘색으로, 오일러 공식이 늘 열둘을 남기는 다섯 이웃 전하는 금색으로 빛나고, 일곱 이웃 전하가 생기면 자홍색이에요. K3 을 480 까지 올리면 열둘이 5-7-5 흉터로 자라고, K1 을 누르면 전하가 흩어졌다가 다시 격자로 앉아요.","idea":"Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.","buttons":"K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.","code":"// ===== Patternflow pattern =====\n// Title:   Thomson Problem\n// Family:  physics\n// Idea:    Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Thomson problem (J. J. Thomson, 1904), with the scars of Bowick, Nelson and Travesset (2000), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1\n//\n// Knob 1: Hue. Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue.\n// Knob 2: Speed. How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds.\n// Knob 3: Charges. 100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them.\n// Knob 4: Heat. A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander.\n// Buttons: K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5, RS = 29;\nconst NMIN = 100, NMAX = 480;\n// Sixfold, fivefold and sevenfold charges: hue offset, saturation at the\n// rim and at the centre, and peak level.\nconst TYPES = [\n  [0, 1, 0.4, 215],\n  [0.58, 1, 0.45, 250],\n  [0.3, 1, 0.4, 240],\n];\n// The glow's sigma in LEDs, or a fifth of the lattice spacing where that is less.\nconst SIG = 2.15;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Lattice spacing on the unit sphere: each charge holds (sqrt3/2) a^2 of the\n// 4 pi of surface.\nconst spacing = (n) => sqrt((8 * PI) / (sqrt(3) * n));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * log(u)) * cos(2 * PI * v);\n}\n\nfunction scatter(X, from, to) {\n  for (let i = from; i \u003c to; i++) {\n    const z = 2 * random() - 1, f = 2 * PI * random(), r = sqrt(1 - z * z);\n    X[3 * i] = r * cos(f);\n    X[3 * i + 1] = r * sin(f);\n    X[3 * i + 2] = z;\n  }\n}\n\n// One step of projected gradient descent on E = sum 1/r_ij, with momentum\n// beta. The step is 0.15 a^3; plain descent at 0.25 a^3 rang and never\n// settled. No charge moves more than a fifth of the spacing in one step, so a\n// fresh scatter, where two charges can sit almost on top of each other, stays\n// calm. Heat adds a random kick of up to 0.075 a per step.\nfunction relax(S, kick, beta) {\n  const { X, F, M } = S, n = S.n;\n  F.fill(0, 0, 3 * n);\n  for (let i = 0; i \u003c n; i++) {\n    const xi = X[3 * i], yi = X[3 * i + 1], zi = X[3 * i + 2];\n    let fx = 0, fy = 0, fz = 0;\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = xi - X[3 * j], dy = yi - X[3 * j + 1], dz = zi - X[3 * j + 2];\n      const r2 = dx * dx + dy * dy + dz * dz + 1e-9, q = 1 / (r2 * sqrt(r2));\n      fx += dx * q;\n      fy += dy * q;\n      fz += dz * q;\n      F[3 * j] -= dx * q;\n      F[3 * j + 1] -= dy * q;\n      F[3 * j + 2] -= dz * q;\n    }\n    F[3 * i] += fx;\n    F[3 * i + 1] += fy;\n    F[3 * i + 2] += fz;\n  }\n  const a = spacing(n), eta = 0.15 * a * a * a, cap = 0.2 * a, k = kick * a;\n  for (let i = 0; i \u003c n; i++) {\n    const o = 3 * i, x = X[o], y = X[o + 1], z = X[o + 2];\n    let fx = F[o], fy = F[o + 1], fz = F[o + 2];\n    const d = fx * x + fy * y + fz * z;\n    fx = beta * M[o] + eta * (fx - d * x);\n    fy = beta * M[o + 1] + eta * (fy - d * y);\n    fz = beta * M[o + 2] + eta * (fz - d * z);\n    const e = fx * x + fy * y + fz * z;\n    fx -= e * x;\n    fy -= e * y;\n    fz -= e * z;\n    const m = sqrt(fx * fx + fy * fy + fz * fz);\n    if (m > cap) {\n      fx *= cap / m;\n      fy *= cap / m;\n      fz *= cap / m;\n    }\n    M[o] = fx;\n    M[o + 1] = fy;\n    M[o + 2] = fz;\n    if (k > 0) {\n      fx += k * gauss();\n      fy += k * gauss();\n      fz += k * gauss();\n    }\n    const nx = x + fx, ny = y + fy, nz = z + fz, l = 1 / sqrt(nx * nx + ny * ny + nz * nz);\n    X[o] = nx * l;\n    X[o + 1] = ny * l;\n    X[o + 2] = nz * l;\n  }\n}\n\nfunction energy(X, n) {\n  let e = 0;\n  for (let i = 0; i \u003c n; i++)\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = X[3 * i] - X[3 * j], dy = X[3 * i + 1] - X[3 * j + 1], dz = X[3 * i + 2] - X[3 * j + 2];\n      e += 1 / sqrt(dx * dx + dy * dy + dz * dz);\n    }\n  return e;\n}\n\n// The Delaunay triangulation of points on a sphere is their convex hull.\n// Incremental hull: each new point removes the faces it sees and joins the\n// horizon around them to itself. E maps a directed edge u->v to its face.\nfunction hull(S) {\n  const P = S.U, n = S.n, { fa, fb, fc, fx, fy, fz, fd, vis, E } = S;\n  let nf = 0;\n  const add = (a, b, c) => {\n    const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n    const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n    const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n    const x = uy * vz - uz * vy, y = uz * vx - ux * vz, z = ux * vy - uy * vx;\n    fa[nf] = a;\n    fb[nf] = b;\n    fc[nf] = c;\n    fx[nf] = x;\n    fy[nf] = y;\n    fz[nf] = z;\n    fd[nf] = x * ax + y * ay + z * az;\n    vis[nf] = 0;\n    E[a * n + b] = nf;\n    E[b * n + c] = nf;\n    E[c * n + a] = nf;\n    return nf++;\n  };\n  // The fourth point of the first tetrahedron is the one farthest from the\n  // plane of the first three.\n  let k = 3, best = -1;\n  for (let j = 3; j \u003c n; j++) {\n    const v = abs(orient(P, 0, 1, 2, j));\n    if (v > best) (best = v), (k = j);\n  }\n  let live = [];\n  if (orient(P, 0, 1, 2, k) \u003c 0) live.push(add(0, 1, 2), add(1, 0, k), add(2, 1, k), add(0, 2, k));\n  else live.push(add(0, 2, 1), add(0, 1, k), add(1, 2, k), add(2, 0, k));\n  const seen = [], rim = [];\n  for (let p = 3; p \u003c n; p++) {\n    if (p === k) continue;\n    const px = P[3 * p], py = P[3 * p + 1], pz = P[3 * p + 2];\n    seen.length = 0;\n    for (let q = 0; q \u003c live.length; q++) {\n      const f = live[q];\n      if (fx[f] * px + fy[f] * py + fz[f] * pz - fd[f] > 1e-13) {\n        vis[f] = 1;\n        seen.push(f);\n      }\n    }\n    if (!seen.length) continue;\n    rim.length = 0;\n    for (const f of seen) {\n      const a = fa[f], b = fb[f], c = fc[f];\n      if (!vis[E[b * n + a]]) rim.push(a, b);\n      if (!vis[E[c * n + b]]) rim.push(b, c);\n      if (!vis[E[a * n + c]]) rim.push(c, a);\n    }\n    const next = [];\n    for (const f of live) if (!vis[f]) next.push(f);\n    for (let r = 0; r \u003c rim.length; r += 2) next.push(add(rim[r], rim[r + 1], p));\n    live = next;\n  }\n  // Keep the faces as the triangulation the flips look after from here on.\n  S.nt = live.length;\n  for (let t = 0; t \u003c live.length; t++) {\n    const f = live[t];\n    S.ta[t] = fa[f];\n    S.tb[t] = fb[f];\n    S.tc[t] = fc[f];\n  }\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = S.ta[t], b = S.tb[t], c = S.tc[t];\n    E[a * n + b] = t;\n    E[b * n + c] = t;\n    E[c * n + a] = t;\n  }\n}\n\n// (d - a) . ((b - a) x (c - a)): positive when d lies outside the plane of the\n// triangle abc, which on the sphere means inside its circumcircle.\nfunction orient(P, a, b, c, d) {\n  const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n  const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n  const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n  const wx = P[3 * d] - ax, wy = P[3 * d + 1] - ay, wz = P[3 * d + 2] - az;\n  return wx * (uy * vz - uz * vy) + wy * (uz * vx - ux * vz) + wz * (ux * vy - uy * vx);\n}\n\n// Between hulls the triangulation follows the charges by edge flips. An edge\n// flips only once the far point is inside the circumcircle by 2% of what a\n// perfect lattice holds it outside, so a nearly square quad does not toggle\n// a 5-7 pair from frame to frame. A face turned inside out asks for a new hull.\nfunction maintain(S) {\n  const P = S.U, n = S.n, { ta, tb, tc, E } = S;\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = ta[t], b = tb[t], c = tc[t];\n    const ux = P[3 * b] - P[3 * a], uy = P[3 * b + 1] - P[3 * a + 1], uz = P[3 * b + 2] - P[3 * a + 2];\n    const vx = P[3 * c] - P[3 * a], vy = P[3 * c + 1] - P[3 * a + 1], vz = P[3 * c + 2] - P[3 * a + 2];\n    const d = (uy * vz - uz * vy) * P[3 * a] + (uz * vx - ux * vz) * P[3 * a + 1] + (ux * vy - uy * vx) * P[3 * a + 2];\n    if (d \u003c= 0) return hull(S);\n  }\n  const a = spacing(n), thr = 0.02 * 0.433 * a * a * a * a;\n  for (let pass = 0; pass \u003c 8; pass++) {\n    let flips = 0;\n    for (let t = 0; t \u003c S.nt; t++)\n      for (let e = 0; e \u003c 3; e++) {\n        const u = e === 0 ? ta[t] : e === 1 ? tb[t] : tc[t];\n        const v = e === 0 ? tb[t] : e === 1 ? tc[t] : ta[t];\n        const w = e === 0 ? tc[t] : e === 1 ? ta[t] : tb[t];\n        if (u > v) continue;\n        const s = E[v * n + u];\n        const x = ta[s] !== u && ta[s] !== v ? ta[s] : tb[s] !== u && tb[s] !== v ? tb[s] : tc[s];\n        if (orient(P, u, v, w, x) > thr) {\n          ta[t] = w;\n          tb[t] = u;\n          tc[t] = x;\n          ta[s] = x;\n          tb[s] = v;\n          tc[s] = w;\n          E[w * n + u] = t;\n          E[u * n + x] = t;\n          E[x * n + w] = t;\n          E[x * n + v] = s;\n          E[v * n + w] = s;\n          E[w * n + x] = s;\n          flips++;\n          break;\n        }\n      }\n    if (!flips) break;\n  }\n}\n\n// U is the display position: the charge's position smoothed over about seven\n// steps and put back on the sphere, so heat shows as a wobble and not a buzz,\n// and the lattice is read from where the charges sit, not where they shiver.\nfunction smooth(S, k) {\n  const { X, V, U } = S;\n  for (let i = 0; i \u003c S.n; i++) {\n    const o = 3 * i;\n    V[o] += k * (X[o] - V[o]);\n    V[o + 1] += k * (X[o + 1] - V[o + 1]);\n    V[o + 2] += k * (X[o + 2] - V[o + 2]);\n    const l = 1 / sqrt(V[o] * V[o] + V[o + 1] * V[o + 1] + V[o + 2] * V[o + 2]);\n    U[o] = V[o] * l;\n    U[o + 1] = V[o + 1] * l;\n    U[o + 2] = V[o + 2] * l;\n  }\n}\n\nfunction degrees(S) {\n  const { deg, ta, tb, tc } = S;\n  deg.fill(0, 0, S.n);\n  for (let t = 0; t \u003c S.nt; t++) {\n    deg[ta[t]]++;\n    deg[tb[t]]++;\n    deg[tc[t]]++;\n  }\n}\n\n// The opening: a few scatters, each run down 400 steps with heavy momentum\n// (0.9), and the one with the lowest energy kept. At 100 charges the best of\n// five opens 0.02 above the known minimum 4448.3506, with just the twelve.\nfunction settle(S) {\n  const n = S.n, tries = n \u003c= 160 ? 5 : n \u003c= 300 ? 3 : 1, steps = n \u003c= 300 ? 400 : 300;\n  const keep = new Float64Array(3 * n);\n  let best = Infinity;\n  for (let r = 0; r \u003c tries; r++) {\n    scatter(S.X, 0, n);\n    S.M.fill(0);\n    for (let i = 0; i \u003c steps; i++) relax(S, 0, 0.9);\n    const e = energy(S.X, n);\n    if (e \u003c best) {\n      best = e;\n      keep.set(S.X.subarray(0, 3 * n));\n    }\n  }\n  S.X.set(keep);\n  S.V.set(keep);\n  S.U.set(keep);\n  S.M.fill(0);\n  hull(S);\n  degrees(S);\n  for (let i = 0; i \u003c n; i++) {\n    S.f5[i] = S.deg[i] \u003c 6 ? 1 : 0;\n    S.f7[i] = S.deg[i] > 6 ? 1 : 0;\n  }\n}\n\nfunction resize(S, n) {\n  const old = S.n;\n  S.n = n;\n  if (n > old) {\n    scatter(S.X, old, n);\n    for (let i = 3 * old; i \u003c 3 * n; i++) {\n      S.V[i] = S.U[i] = S.X[i];\n      S.M[i] = 0;\n    }\n    for (let i = old; i \u003c n; i++) S.f5[i] = S.f7[i] = 0;\n  }\n  hull(S);\n}\n\nexport function setup(params) {\n  const F = 16 * NMAX + 64;\n  params.s = {\n    n: 0, hue: 0, speed: 2, heat: 0.06, turn: 0, acc: 0, warm: false,\n    X: new Float64Array(3 * NMAX), F: new Float64Array(3 * NMAX), M: new Float64Array(3 * NMAX), V: new Float64Array(3 * NMAX), U: new Float64Array(3 * NMAX),\n    fa: new Int32Array(F), fb: new Int32Array(F), fc: new Int32Array(F), fx: new Float64Array(F), fy: new Float64Array(F), fz: new Float64Array(F), fd: new Float64Array(F), vis: new Uint8Array(F),\n    E: new Int32Array(NMAX * NMAX), ta: new Int32Array(2 * NMAX), tb: new Int32Array(2 * NMAX), tc: new Int32Array(2 * NMAX), nt: 0,\n    deg: new Int32Array(NMAX), f5: new Float32Array(NMAX), f7: new Float32Array(NMAX),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0, 0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, NMIN, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.heat = cl(k[3], 0, 1);\n  const n = round(cl(k[2], NMIN, NMAX)), kick = 0.075 * S.heat;\n  if (!S.warm) {\n    S.n = n;\n    settle(S);\n    S.warm = true;\n  } else if (n !== S.n) resize(S, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    scatter(S.X, 0, S.n);\n    S.M.fill(0);\n    S.V.set(S.X.subarray(0, 3 * S.n));\n    S.U.set(S.X.subarray(0, 3 * S.n));\n    hull(S);\n  }\n  // 30 steps a second for each unit of Speed, at most six a frame.\n  S.acc += d * S.speed * 30;\n  let steps = min(6, floor(S.acc));\n  S.acc -= floor(S.acc);\n  for (; steps > 0; steps--) {\n    relax(S, kick, 0.5);\n    smooth(S, 0.15);\n  }\n  maintain(S);\n  degrees(S);\n  const ease = 1 - exp(-d / 0.08);\n  for (let i = 0; i \u003c S.n; i++) {\n    S.f5[i] += ease * ((S.deg[i] \u003c 6 ? 1 : 0) - S.f5[i]);\n    S.f7[i] += ease * ((S.deg[i] > 6 ? 1 : 0) - S.f7[i]);\n  }\n  S.turn += d * S.speed * 0.1;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { U, R, G, B, c, f5, f7 } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The sphere turns about an axis leaning 20 degrees toward the viewer.\n  const ct = cos(S.turn), st = sin(S.turn), cx = cos(0.35), sx = sin(0.35);\n  const h = S.hue + 0.55;\n  // Each charge is one soft gaussian glow. Its colour runs from nearly white\n  // at the centre to the full hue at the rim: hsv(hue, s, 1) is white less s\n  // times (1 - the pure hue), and s falls with the square of the glow.\n  const T = TYPES.map(([dh, sr, sc, lv]) => {\n    const q = [0, 0, 0];\n    hsv(h + dh, 1, 1, q);\n    return [1 - q[0], 1 - q[1], 1 - q[2], sr, sr - sc, lv];\n  });\n  const sp = spacing(n) * RS, sig = min(SIG, 0.2 * sp);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = U[3 * i], y0 = U[3 * i + 1], z0 = U[3 * i + 2];\n    const x1 = ct * x0 + st * z0, z1 = -st * x0 + ct * z0;\n    const y = cx * y0 - sx * z1, z = sx * y0 + cx * z1, x = x1;\n    if (z \u003c -0.02) continue;\n    const t = cl((z + 0.02) / 0.37, 0, 1), w = t * t * (3 - 2 * t);\n    const a5 = f5[i], a7 = f7[i], a6 = 1 - a5 - a7;\n    for (let j = 0; j \u003c 6; j++) c[j] = T[0][j] * a6 + T[1][j] * a5 + T[2][j] * a7;\n    const L = c[5] * w * (0.55 + 0.45 * z), s = sig * (1 + 0.25 * (a5 + a7));\n    // Foreshortened toward the rim: narrower across the radius.\n    const px = CX + RS * x, py = CY - RS * y, rr = sqrt(x * x + y * y) || 1, rx = x / rr, ry = -y / rr;\n    const sr = s * (0.45 + 0.55 * z), ir = 1 / (2 * sr * sr), it = 1 / (2 * s * s), ext = 3 * s;\n    for (let yy = max(0, floor(py - ext)); yy \u003c= min(H - 1, py + ext); yy++)\n      for (let xx = max(0, floor(px - ext)); xx \u003c= min(W - 1, px + ext); xx++) {\n        const dx = xx - px, dy = yy - py, dr = dx * rx + dy * ry, dq = -dx * ry + dy * rx;\n        const g = exp(-dr * dr * ir - dq * dq * it), v = L * g, sat = v * (c[3] - c[4] * g * g * g), p = yy * W + xx;\n        R[p] += v - sat * c[0];\n        G[p] += v - sat * c[1];\n        B[p] += v - sat * c[2];\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-thomson-problem","type":"code","name":"thomson-problem","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Thomson Problem\n// Family:  physics\n// Idea:    Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Thomson problem (J. J. Thomson, 1904), with the scars of Bowick, Nelson and Travesset (2000), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1\n//\n// Knob 1: Hue. Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue.\n// Knob 2: Speed. How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds.\n// Knob 3: Charges. 100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them.\n// Knob 4: Heat. A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander.\n// Buttons: K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5, RS = 29;\nconst NMIN = 100, NMAX = 480;\n// Sixfold, fivefold and sevenfold charges: hue offset, saturation at the\n// rim and at the centre, and peak level.\nconst TYPES = [\n  [0, 1, 0.4, 215],\n  [0.58, 1, 0.45, 250],\n  [0.3, 1, 0.4, 240],\n];\n// The glow's sigma in LEDs, or a fifth of the lattice spacing where that is less.\nconst SIG = 2.15;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Lattice spacing on the unit sphere: each charge holds (sqrt3/2) a^2 of the\n// 4 pi of surface.\nconst spacing = (n) => sqrt((8 * PI) / (sqrt(3) * n));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * log(u)) * cos(2 * PI * v);\n}\n\nfunction scatter(X, from, to) {\n  for (let i = from; i \u003c to; i++) {\n    const z = 2 * random() - 1, f = 2 * PI * random(), r = sqrt(1 - z * z);\n    X[3 * i] = r * cos(f);\n    X[3 * i + 1] = r * sin(f);\n    X[3 * i + 2] = z;\n  }\n}\n\n// One step of projected gradient descent on E = sum 1/r_ij, with momentum\n// beta. The step is 0.15 a^3; plain descent at 0.25 a^3 rang and never\n// settled. No charge moves more than a fifth of the spacing in one step, so a\n// fresh scatter, where two charges can sit almost on top of each other, stays\n// calm. Heat adds a random kick of up to 0.075 a per step.\nfunction relax(S, kick, beta) {\n  const { X, F, M } = S, n = S.n;\n  F.fill(0, 0, 3 * n);\n  for (let i = 0; i \u003c n; i++) {\n    const xi = X[3 * i], yi = X[3 * i + 1], zi = X[3 * i + 2];\n    let fx = 0, fy = 0, fz = 0;\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = xi - X[3 * j], dy = yi - X[3 * j + 1], dz = zi - X[3 * j + 2];\n      const r2 = dx * dx + dy * dy + dz * dz + 1e-9, q = 1 / (r2 * sqrt(r2));\n      fx += dx * q;\n      fy += dy * q;\n      fz += dz * q;\n      F[3 * j] -= dx * q;\n      F[3 * j + 1] -= dy * q;\n      F[3 * j + 2] -= dz * q;\n    }\n    F[3 * i] += fx;\n    F[3 * i + 1] += fy;\n    F[3 * i + 2] += fz;\n  }\n  const a = spacing(n), eta = 0.15 * a * a * a, cap = 0.2 * a, k = kick * a;\n  for (let i = 0; i \u003c n; i++) {\n    const o = 3 * i, x = X[o], y = X[o + 1], z = X[o + 2];\n    let fx = F[o], fy = F[o + 1], fz = F[o + 2];\n    const d = fx * x + fy * y + fz * z;\n    fx = beta * M[o] + eta * (fx - d * x);\n    fy = beta * M[o + 1] + eta * (fy - d * y);\n    fz = beta * M[o + 2] + eta * (fz - d * z);\n    const e = fx * x + fy * y + fz * z;\n    fx -= e * x;\n    fy -= e * y;\n    fz -= e * z;\n    const m = sqrt(fx * fx + fy * fy + fz * fz);\n    if (m > cap) {\n      fx *= cap / m;\n      fy *= cap / m;\n      fz *= cap / m;\n    }\n    M[o] = fx;\n    M[o + 1] = fy;\n    M[o + 2] = fz;\n    if (k > 0) {\n      fx += k * gauss();\n      fy += k * gauss();\n      fz += k * gauss();\n    }\n    const nx = x + fx, ny = y + fy, nz = z + fz, l = 1 / sqrt(nx * nx + ny * ny + nz * nz);\n    X[o] = nx * l;\n    X[o + 1] = ny * l;\n    X[o + 2] = nz * l;\n  }\n}\n\nfunction energy(X, n) {\n  let e = 0;\n  for (let i = 0; i \u003c n; i++)\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = X[3 * i] - X[3 * j], dy = X[3 * i + 1] - X[3 * j + 1], dz = X[3 * i + 2] - X[3 * j + 2];\n      e += 1 / sqrt(dx * dx + dy * dy + dz * dz);\n    }\n  return e;\n}\n\n// The Delaunay triangulation of points on a sphere is their convex hull.\n// Incremental hull: each new point removes the faces it sees and joins the\n// horizon around them to itself. E maps a directed edge u->v to its face.\nfunction hull(S) {\n  const P = S.U, n = S.n, { fa, fb, fc, fx, fy, fz, fd, vis, E } = S;\n  let nf = 0;\n  const add = (a, b, c) => {\n    const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n    const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n    const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n    const x = uy * vz - uz * vy, y = uz * vx - ux * vz, z = ux * vy - uy * vx;\n    fa[nf] = a;\n    fb[nf] = b;\n    fc[nf] = c;\n    fx[nf] = x;\n    fy[nf] = y;\n    fz[nf] = z;\n    fd[nf] = x * ax + y * ay + z * az;\n    vis[nf] = 0;\n    E[a * n + b] = nf;\n    E[b * n + c] = nf;\n    E[c * n + a] = nf;\n    return nf++;\n  };\n  // The fourth point of the first tetrahedron is the one farthest from the\n  // plane of the first three.\n  let k = 3, best = -1;\n  for (let j = 3; j \u003c n; j++) {\n    const v = abs(orient(P, 0, 1, 2, j));\n    if (v > best) (best = v), (k = j);\n  }\n  let live = [];\n  if (orient(P, 0, 1, 2, k) \u003c 0) live.push(add(0, 1, 2), add(1, 0, k), add(2, 1, k), add(0, 2, k));\n  else live.push(add(0, 2, 1), add(0, 1, k), add(1, 2, k), add(2, 0, k));\n  const seen = [], rim = [];\n  for (let p = 3; p \u003c n; p++) {\n    if (p === k) continue;\n    const px = P[3 * p], py = P[3 * p + 1], pz = P[3 * p + 2];\n    seen.length = 0;\n    for (let q = 0; q \u003c live.length; q++) {\n      const f = live[q];\n      if (fx[f] * px + fy[f] * py + fz[f] * pz - fd[f] > 1e-13) {\n        vis[f] = 1;\n        seen.push(f);\n      }\n    }\n    if (!seen.length) continue;\n    rim.length = 0;\n    for (const f of seen) {\n      const a = fa[f], b = fb[f], c = fc[f];\n      if (!vis[E[b * n + a]]) rim.push(a, b);\n      if (!vis[E[c * n + b]]) rim.push(b, c);\n      if (!vis[E[a * n + c]]) rim.push(c, a);\n    }\n    const next = [];\n    for (const f of live) if (!vis[f]) next.push(f);\n    for (let r = 0; r \u003c rim.length; r += 2) next.push(add(rim[r], rim[r + 1], p));\n    live = next;\n  }\n  // Keep the faces as the triangulation the flips look after from here on.\n  S.nt = live.length;\n  for (let t = 0; t \u003c live.length; t++) {\n    const f = live[t];\n    S.ta[t] = fa[f];\n    S.tb[t] = fb[f];\n    S.tc[t] = fc[f];\n  }\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = S.ta[t], b = S.tb[t], c = S.tc[t];\n    E[a * n + b] = t;\n    E[b * n + c] = t;\n    E[c * n + a] = t;\n  }\n}\n\n// (d - a) . ((b - a) x (c - a)): positive when d lies outside the plane of the\n// triangle abc, which on the sphere means inside its circumcircle.\nfunction orient(P, a, b, c, d) {\n  const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n  const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n  const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n  const wx = P[3 * d] - ax, wy = P[3 * d + 1] - ay, wz = P[3 * d + 2] - az;\n  return wx * (uy * vz - uz * vy) + wy * (uz * vx - ux * vz) + wz * (ux * vy - uy * vx);\n}\n\n// Between hulls the triangulation follows the charges by edge flips. An edge\n// flips only once the far point is inside the circumcircle by 2% of what a\n// perfect lattice holds it outside, so a nearly square quad does not toggle\n// a 5-7 pair from frame to frame. A face turned inside out asks for a new hull.\nfunction maintain(S) {\n  const P = S.U, n = S.n, { ta, tb, tc, E } = S;\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = ta[t], b = tb[t], c = tc[t];\n    const ux = P[3 * b] - P[3 * a], uy = P[3 * b + 1] - P[3 * a + 1], uz = P[3 * b + 2] - P[3 * a + 2];\n    const vx = P[3 * c] - P[3 * a], vy = P[3 * c + 1] - P[3 * a + 1], vz = P[3 * c + 2] - P[3 * a + 2];\n    const d = (uy * vz - uz * vy) * P[3 * a] + (uz * vx - ux * vz) * P[3 * a + 1] + (ux * vy - uy * vx) * P[3 * a + 2];\n    if (d \u003c= 0) return hull(S);\n  }\n  const a = spacing(n), thr = 0.02 * 0.433 * a * a * a * a;\n  for (let pass = 0; pass \u003c 8; pass++) {\n    let flips = 0;\n    for (let t = 0; t \u003c S.nt; t++)\n      for (let e = 0; e \u003c 3; e++) {\n        const u = e === 0 ? ta[t] : e === 1 ? tb[t] : tc[t];\n        const v = e === 0 ? tb[t] : e === 1 ? tc[t] : ta[t];\n        const w = e === 0 ? tc[t] : e === 1 ? ta[t] : tb[t];\n        if (u > v) continue;\n        const s = E[v * n + u];\n        const x = ta[s] !== u && ta[s] !== v ? ta[s] : tb[s] !== u && tb[s] !== v ? tb[s] : tc[s];\n        if (orient(P, u, v, w, x) > thr) {\n          ta[t] = w;\n          tb[t] = u;\n          tc[t] = x;\n          ta[s] = x;\n          tb[s] = v;\n          tc[s] = w;\n          E[w * n + u] = t;\n          E[u * n + x] = t;\n          E[x * n + w] = t;\n          E[x * n + v] = s;\n          E[v * n + w] = s;\n          E[w * n + x] = s;\n          flips++;\n          break;\n        }\n      }\n    if (!flips) break;\n  }\n}\n\n// U is the display position: the charge's position smoothed over about seven\n// steps and put back on the sphere, so heat shows as a wobble and not a buzz,\n// and the lattice is read from where the charges sit, not where they shiver.\nfunction smooth(S, k) {\n  const { X, V, U } = S;\n  for (let i = 0; i \u003c S.n; i++) {\n    const o = 3 * i;\n    V[o] += k * (X[o] - V[o]);\n    V[o + 1] += k * (X[o + 1] - V[o + 1]);\n    V[o + 2] += k * (X[o + 2] - V[o + 2]);\n    const l = 1 / sqrt(V[o] * V[o] + V[o + 1] * V[o + 1] + V[o + 2] * V[o + 2]);\n    U[o] = V[o] * l;\n    U[o + 1] = V[o + 1] * l;\n    U[o + 2] = V[o + 2] * l;\n  }\n}\n\nfunction degrees(S) {\n  const { deg, ta, tb, tc } = S;\n  deg.fill(0, 0, S.n);\n  for (let t = 0; t \u003c S.nt; t++) {\n    deg[ta[t]]++;\n    deg[tb[t]]++;\n    deg[tc[t]]++;\n  }\n}\n\n// The opening: a few scatters, each run down 400 steps with heavy momentum\n// (0.9), and the one with the lowest energy kept. At 100 charges the best of\n// five opens 0.02 above the known minimum 4448.3506, with just the twelve.\nfunction settle(S) {\n  const n = S.n, tries = n \u003c= 160 ? 5 : n \u003c= 300 ? 3 : 1, steps = n \u003c= 300 ? 400 : 300;\n  const keep = new Float64Array(3 * n);\n  let best = Infinity;\n  for (let r = 0; r \u003c tries; r++) {\n    scatter(S.X, 0, n);\n    S.M.fill(0);\n    for (let i = 0; i \u003c steps; i++) relax(S, 0, 0.9);\n    const e = energy(S.X, n);\n    if (e \u003c best) {\n      best = e;\n      keep.set(S.X.subarray(0, 3 * n));\n    }\n  }\n  S.X.set(keep);\n  S.V.set(keep);\n  S.U.set(keep);\n  S.M.fill(0);\n  hull(S);\n  degrees(S);\n  for (let i = 0; i \u003c n; i++) {\n    S.f5[i] = S.deg[i] \u003c 6 ? 1 : 0;\n    S.f7[i] = S.deg[i] > 6 ? 1 : 0;\n  }\n}\n\nfunction resize(S, n) {\n  const old = S.n;\n  S.n = n;\n  if (n > old) {\n    scatter(S.X, old, n);\n    for (let i = 3 * old; i \u003c 3 * n; i++) {\n      S.V[i] = S.U[i] = S.X[i];\n      S.M[i] = 0;\n    }\n    for (let i = old; i \u003c n; i++) S.f5[i] = S.f7[i] = 0;\n  }\n  hull(S);\n}\n\nexport function setup(params) {\n  const F = 16 * NMAX + 64;\n  params.s = {\n    n: 0, hue: 0, speed: 2, heat: 0.06, turn: 0, acc: 0, warm: false,\n    X: new Float64Array(3 * NMAX), F: new Float64Array(3 * NMAX), M: new Float64Array(3 * NMAX), V: new Float64Array(3 * NMAX), U: new Float64Array(3 * NMAX),\n    fa: new Int32Array(F), fb: new Int32Array(F), fc: new Int32Array(F), fx: new Float64Array(F), fy: new Float64Array(F), fz: new Float64Array(F), fd: new Float64Array(F), vis: new Uint8Array(F),\n    E: new Int32Array(NMAX * NMAX), ta: new Int32Array(2 * NMAX), tb: new Int32Array(2 * NMAX), tc: new Int32Array(2 * NMAX), nt: 0,\n    deg: new Int32Array(NMAX), f5: new Float32Array(NMAX), f7: new Float32Array(NMAX),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0, 0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, NMIN, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.heat = cl(k[3], 0, 1);\n  const n = round(cl(k[2], NMIN, NMAX)), kick = 0.075 * S.heat;\n  if (!S.warm) {\n    S.n = n;\n    settle(S);\n    S.warm = true;\n  } else if (n !== S.n) resize(S, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    scatter(S.X, 0, S.n);\n    S.M.fill(0);\n    S.V.set(S.X.subarray(0, 3 * S.n));\n    S.U.set(S.X.subarray(0, 3 * S.n));\n    hull(S);\n  }\n  // 30 steps a second for each unit of Speed, at most six a frame.\n  S.acc += d * S.speed * 30;\n  let steps = min(6, floor(S.acc));\n  S.acc -= floor(S.acc);\n  for (; steps > 0; steps--) {\n    relax(S, kick, 0.5);\n    smooth(S, 0.15);\n  }\n  maintain(S);\n  degrees(S);\n  const ease = 1 - exp(-d / 0.08);\n  for (let i = 0; i \u003c S.n; i++) {\n    S.f5[i] += ease * ((S.deg[i] \u003c 6 ? 1 : 0) - S.f5[i]);\n    S.f7[i] += ease * ((S.deg[i] > 6 ? 1 : 0) - S.f7[i]);\n  }\n  S.turn += d * S.speed * 0.1;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { U, R, G, B, c, f5, f7 } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The sphere turns about an axis leaning 20 degrees toward the viewer.\n  const ct = cos(S.turn), st = sin(S.turn), cx = cos(0.35), sx = sin(0.35);\n  const h = S.hue + 0.55;\n  // Each charge is one soft gaussian glow. Its colour runs from nearly white\n  // at the centre to the full hue at the rim: hsv(hue, s, 1) is white less s\n  // times (1 - the pure hue), and s falls with the square of the glow.\n  const T = TYPES.map(([dh, sr, sc, lv]) => {\n    const q = [0, 0, 0];\n    hsv(h + dh, 1, 1, q);\n    return [1 - q[0], 1 - q[1], 1 - q[2], sr, sr - sc, lv];\n  });\n  const sp = spacing(n) * RS, sig = min(SIG, 0.2 * sp);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = U[3 * i], y0 = U[3 * i + 1], z0 = U[3 * i + 2];\n    const x1 = ct * x0 + st * z0, z1 = -st * x0 + ct * z0;\n    const y = cx * y0 - sx * z1, z = sx * y0 + cx * z1, x = x1;\n    if (z \u003c -0.02) continue;\n    const t = cl((z + 0.02) / 0.37, 0, 1), w = t * t * (3 - 2 * t);\n    const a5 = f5[i], a7 = f7[i], a6 = 1 - a5 - a7;\n    for (let j = 0; j \u003c 6; j++) c[j] = T[0][j] * a6 + T[1][j] * a5 + T[2][j] * a7;\n    const L = c[5] * w * (0.55 + 0.45 * z), s = sig * (1 + 0.25 * (a5 + a7));\n    // Foreshortened toward the rim: narrower across the radius.\n    const px = CX + RS * x, py = CY - RS * y, rr = sqrt(x * x + y * y) || 1, rx = x / rr, ry = -y / rr;\n    const sr = s * (0.45 + 0.55 * z), ir = 1 / (2 * sr * sr), it = 1 / (2 * s * s), ext = 3 * s;\n    for (let yy = max(0, floor(py - ext)); yy \u003c= min(H - 1, py + ext); yy++)\n      for (let xx = max(0, floor(px - ext)); xx \u003c= min(W - 1, px + ext); xx++) {\n        const dx = xx - px, dy = yy - py, dr = dx * rx + dy * ry, dq = -dx * ry + dy * rx;\n        const g = exp(-dr * dr * ir - dq * dq * it), v = L * g, sat = v * (c[3] - c[4] * g * g * g), p = yy * W + xx;\n        R[p] += v - sat * c[0];\n        G[p] += v - sat * c[1];\n        B[p] += v - sat * c[2];\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds."},{"name":"Charges","min":100,"max":480,"about":"100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them."},{"name":"Heat","min":0,"max":1,"about":"A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander."}],"start":[0,2,100,0.06],"measures":{"motion":0.1033,"detail":0.027,"edges":0.1646,"complexity":0.9152,"coverage":0.2589,"colour":0.1371,"drift":0.0297},"knobResponse":[0.0593,0.055,0.0527,0.0511]},{"slug":"three-gaps","title":"Three Gaps","family":"number","round":30,"note":"원 위에 α 씩 돌아가며 점을 찍으면 이웃 간격은 많아야 세 가지예요. 줄마다 점을 하나씩 더해 간격을 길이 등급으로 칠하고, α 가 분수에 닿으면 아래쪽이 줄무늬로 무너져요.","idea":"Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.","buttons":"K1 tap sends a straight to the stop at the end of the leg it is on.","code":"// ===== Patternflow pattern =====\n// Title:   Three Gaps\n// Family:  number\n// Idea:    Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: three-gap theorem (conjectured by Hugo Steinhaus, proved by Vera T. Sós, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair.\n// Knob 2: Speed. How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s.\n// Knob 3: Alpha. Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns.\n// Knob 4: Points. How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples.\n// Buttons: K1 tap sends a straight to the stop at the end of the leg it is on.\n\nconst W = 64, H = 128, SS = 4, NMAX = 160, Q = 21;\nconst { min, max, floor, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\nconst GOLD = (Math.sqrt(5) - 1) / 2, BRONZE = (Math.sqrt(13) - 3) / 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The two fractions with denominator at most 21 that hold a0 between them,\n// found by walking down the Stern-Brocot tree: 8/13 and 13/21 for 1/phi.\nfunction bracket(a0) {\n  let a = 0, b = 1, c = 1, d = 1;\n  for (;;) {\n    const p = a + c, q = b + d;\n    if (q > Q) break;\n    if (a0 \u003c p / q) (c = p), (d = q);\n    else (a = p), (b = q);\n  }\n  return [a / b, c / d];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, k3: -1, a0: GOLD, ends: [GOLD, GOLD], u: 0, nmax: 36, alpha: GOLD,\n    pos: new Float64Array(NMAX + 1), idx: new Int32Array(NMAX + 1), sep: new Float32Array(W),\n    row: new Float32Array(W * 3), lut: new Float32Array(3 * 64), lutHue: NaN,\n  };\n}\n\nconst stop = (P, i) => (i & 1 ? P.ends[i >> 1] : P.a0);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nmax = floor(30 + 100 * cl(k[3], 0, 1));\n  const k3 = cl(k[2], 0, 1);\n  if (k3 !== P.k3) {\n    P.k3 = k3;\n    P.a0 = GOLD + (BRONZE - GOLD) * k3;\n    // The nearer fraction first. On a fraction exactly, points would land on\n    // each other and floating point would shuffle their order; 3e-7 off it,\n    // on a0's side, they stay in order and the picture is the same.\n    const [lo, hi] = bracket(P.a0);\n    P.ends = P.a0 - lo \u003c hi - P.a0 ? [lo + 3e-7, hi - 3e-7] : [hi - 3e-7, lo + 3e-7];\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.u = floor(P.u) + 1;\n  // a goes a0, first fraction, a0, second fraction, a0, easing in and out of\n  // each stop; a longer leg takes longer, so the bottom row never runs away.\n  const s = floor(P.u) & 3, from = stop(P, s), to = stop(P, (s + 1) & 3);\n  P.u += (d * P.speed * 0.15) / (0.4 + abs(to - from) / 0.004);\n  const s2 = floor(P.u) & 3, A = stop(P, s2), B = stop(P, (s2 + 1) & 3);\n  P.alpha = A + (B - A) * ease(P.u - floor(P.u));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pos, idx, sep, row, lut } = P, a = P.alpha, nmax = P.nmax;\n  if (P.lutHue !== P.hue) {\n    // Colour by the rank of the length: yellow the longest, cyan the middle,\n    // magenta the shortest, and mixes for ranks in between. Mixed as light,\n    // not round the wheel, which would put a dark blue between cyan and\n    // magenta, then brought back to saturation 0.7 so a mix is not grey.\n    const c3 = new Float32Array(9);\n    for (let c = 0; c \u003c 3; c++) hsv(P.hue + 0.15 + c * 0.36, 0.88, 1, c3, c * 3);\n    for (let i = 0; i \u003c 64; i++) {\n      const r = (i / 63) * 2, j = min(1, floor(r)), f = r - j, o = i * 3;\n      for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = c3[j * 3 + ch] * (1 - f) + c3[j * 3 + 3 + ch] * f;\n      const mx = max(lut[o], lut[o + 1], lut[o + 2]), sat = 1 - min(lut[o], lut[o + 1], lut[o + 2]) / mx;\n      if (sat \u003c 0.7) for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = mx - ((mx - lut[o + ch]) * 0.7) / max(sat, 1e-3);\n    }\n    P.lutHue = P.hue;\n  }\n  const dv = [0, 0, 0, 0], dl = [0, 0, 0, 0], rank = [0, 0, 0, 0];\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) {\n    // Row y holds n points, n growing down the panel. New points go into the\n    // sorted list one at a time, so a frame sorts nothing twice.\n    const want = 1 + floor((y * nmax) / H);\n    let tick = -1;\n    while (n \u003c want) {\n      const p = n * a - floor(n * a);\n      let lo = 0, hi = n;\n      while (lo \u003c hi) {\n        const m = (lo + hi) >> 1;\n        if (pos[m] \u003c p) lo = m + 1;\n        else hi = m;\n      }\n      for (let j = n; j > lo; j--) (pos[j] = pos[j - 1]), (idx[j] = idx[j - 1]);\n      pos[lo] = p;\n      idx[lo] = n;\n      tick = floor(p * W);\n      n++;\n    }\n    pos[n] = 1;\n    idx[n] = 0;\n    // The gap from point i to point j is frac((j - i) a) long, so the index\n    // difference names the length, and the theorem says there are at most\n    // three. The newest point always lands in a longest gap and cuts it into\n    // one gap of each of the two shorter lengths already on the circle, which\n    // is why the longest is the sum of the other two. When the last longest\n    // gap is cut, the middle length is the longest and the cutting goes on.\n    let nc = 0;\n    for (let i = 0; i \u003c n; i++) {\n      const dd = idx[i + 1] - idx[i];\n      let c = 0;\n      while (c \u003c nc && dv[c] !== dd) c++;\n      if (c === nc && nc \u003c 4) (dv[nc] = dd), (dl[nc] = pos[i + 1] - pos[i]), nc++;\n    }\n    // Rank: how many lengths are longer, counting a length within 15% as\n    // half. Near a fraction p/q the shortest shrinks towards nothing and the\n    // other two meet, so their gaps go one colour as the three become two.\n    for (let c = 0; c \u003c nc; c++) {\n      let r = 0;\n      for (let e = 0; e \u003c nc; e++) if (e !== c) r += cl(0.5 + (dl[e] - dl[c]) / (0.3 * max(dl[e], dl[c])), 0, 1);\n      rank[c] = min(2, r);\n    }\n    // Points closer than a third of an LED count as one. A lone one between\n    // two gaps wider than an LED draws a dark line, darker the wider they are.\n    sep.fill(0);\n    let first = 0;\n    while (first \u003c n - 1 && (pos[first + 1] - pos[first]) * W \u003c 0.34) first++;\n    for (let i = 0, prev = -1; i \u003c n; i++) {\n      const gr = (pos[i + 1] - pos[i]) * W;\n      if (gr \u003c 0.34 && i \u003c n - 1) continue;\n      const gl = prev \u003c 0 ? (pos[first] + 1 - pos[n - 1]) * W : (pos[i] - pos[prev]) * W;\n      const x = floor(pos[i] * W);\n      sep[x] = max(sep[x], cl((min(gl, gr) - 1.1) / 2.4, 0, 1));\n      prev = i;\n    }\n    // Four samples to an LED. Brightness follows the gap's length times n,\n    // which runs about 0.4 to 1.9 at 1/phi: a gap brightens down the panel\n    // until a point cuts it.\n    row.fill(0);\n    let g = 0;\n    for (let x = 0; x \u003c W; x++)\n      for (let s = 0; s \u003c SS; s++) {\n        const u = (x + (s + 0.5) / SS) / W;\n        while (pos[g + 1] \u003c= u) g++;\n        const dd = idx[g + 1] - idx[g];\n        let c = 0;\n        while (c \u003c nc - 1 && dv[c] !== dd) c++;\n        const v = 0.6 + 0.4 * cl((n * (pos[g + 1] - pos[g]) - 0.4) / 1.3, 0, 1), q = floor(rank[c] * 31.5) * 3;\n        row[x * 3] += lut[q] * v;\n        row[x * 3 + 1] += lut[q + 1] * v;\n        row[x * 3 + 2] += lut[q + 2] * v;\n      }\n    // The newest point, white on the row where it arrives: they fall on a\n    // lattice, and each heads the dark line its point draws below.\n    for (let x = 0; x \u003c W; x++) {\n      const f = (255 / SS) * (1 - 0.85 * sep[x]);\n      if (x === tick) display.setPixel(x, y, 255, 255, 255);\n      else display.setPixel(x, y, row[x * 3] * f, row[x * 3 + 1] * f, row[x * 3 + 2] * f);\n    }\n  }\n}\n","layer":{"id":"layer-three-gaps","type":"code","name":"three-gaps","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Three Gaps\n// Family:  number\n// Idea:    Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: three-gap theorem (conjectured by Hugo Steinhaus, proved by Vera T. Sós, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair.\n// Knob 2: Speed. How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s.\n// Knob 3: Alpha. Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns.\n// Knob 4: Points. How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples.\n// Buttons: K1 tap sends a straight to the stop at the end of the leg it is on.\n\nconst W = 64, H = 128, SS = 4, NMAX = 160, Q = 21;\nconst { min, max, floor, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\nconst GOLD = (Math.sqrt(5) - 1) / 2, BRONZE = (Math.sqrt(13) - 3) / 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The two fractions with denominator at most 21 that hold a0 between them,\n// found by walking down the Stern-Brocot tree: 8/13 and 13/21 for 1/phi.\nfunction bracket(a0) {\n  let a = 0, b = 1, c = 1, d = 1;\n  for (;;) {\n    const p = a + c, q = b + d;\n    if (q > Q) break;\n    if (a0 \u003c p / q) (c = p), (d = q);\n    else (a = p), (b = q);\n  }\n  return [a / b, c / d];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, k3: -1, a0: GOLD, ends: [GOLD, GOLD], u: 0, nmax: 36, alpha: GOLD,\n    pos: new Float64Array(NMAX + 1), idx: new Int32Array(NMAX + 1), sep: new Float32Array(W),\n    row: new Float32Array(W * 3), lut: new Float32Array(3 * 64), lutHue: NaN,\n  };\n}\n\nconst stop = (P, i) => (i & 1 ? P.ends[i >> 1] : P.a0);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nmax = floor(30 + 100 * cl(k[3], 0, 1));\n  const k3 = cl(k[2], 0, 1);\n  if (k3 !== P.k3) {\n    P.k3 = k3;\n    P.a0 = GOLD + (BRONZE - GOLD) * k3;\n    // The nearer fraction first. On a fraction exactly, points would land on\n    // each other and floating point would shuffle their order; 3e-7 off it,\n    // on a0's side, they stay in order and the picture is the same.\n    const [lo, hi] = bracket(P.a0);\n    P.ends = P.a0 - lo \u003c hi - P.a0 ? [lo + 3e-7, hi - 3e-7] : [hi - 3e-7, lo + 3e-7];\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.u = floor(P.u) + 1;\n  // a goes a0, first fraction, a0, second fraction, a0, easing in and out of\n  // each stop; a longer leg takes longer, so the bottom row never runs away.\n  const s = floor(P.u) & 3, from = stop(P, s), to = stop(P, (s + 1) & 3);\n  P.u += (d * P.speed * 0.15) / (0.4 + abs(to - from) / 0.004);\n  const s2 = floor(P.u) & 3, A = stop(P, s2), B = stop(P, (s2 + 1) & 3);\n  P.alpha = A + (B - A) * ease(P.u - floor(P.u));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pos, idx, sep, row, lut } = P, a = P.alpha, nmax = P.nmax;\n  if (P.lutHue !== P.hue) {\n    // Colour by the rank of the length: yellow the longest, cyan the middle,\n    // magenta the shortest, and mixes for ranks in between. Mixed as light,\n    // not round the wheel, which would put a dark blue between cyan and\n    // magenta, then brought back to saturation 0.7 so a mix is not grey.\n    const c3 = new Float32Array(9);\n    for (let c = 0; c \u003c 3; c++) hsv(P.hue + 0.15 + c * 0.36, 0.88, 1, c3, c * 3);\n    for (let i = 0; i \u003c 64; i++) {\n      const r = (i / 63) * 2, j = min(1, floor(r)), f = r - j, o = i * 3;\n      for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = c3[j * 3 + ch] * (1 - f) + c3[j * 3 + 3 + ch] * f;\n      const mx = max(lut[o], lut[o + 1], lut[o + 2]), sat = 1 - min(lut[o], lut[o + 1], lut[o + 2]) / mx;\n      if (sat \u003c 0.7) for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = mx - ((mx - lut[o + ch]) * 0.7) / max(sat, 1e-3);\n    }\n    P.lutHue = P.hue;\n  }\n  const dv = [0, 0, 0, 0], dl = [0, 0, 0, 0], rank = [0, 0, 0, 0];\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) {\n    // Row y holds n points, n growing down the panel. New points go into the\n    // sorted list one at a time, so a frame sorts nothing twice.\n    const want = 1 + floor((y * nmax) / H);\n    let tick = -1;\n    while (n \u003c want) {\n      const p = n * a - floor(n * a);\n      let lo = 0, hi = n;\n      while (lo \u003c hi) {\n        const m = (lo + hi) >> 1;\n        if (pos[m] \u003c p) lo = m + 1;\n        else hi = m;\n      }\n      for (let j = n; j > lo; j--) (pos[j] = pos[j - 1]), (idx[j] = idx[j - 1]);\n      pos[lo] = p;\n      idx[lo] = n;\n      tick = floor(p * W);\n      n++;\n    }\n    pos[n] = 1;\n    idx[n] = 0;\n    // The gap from point i to point j is frac((j - i) a) long, so the index\n    // difference names the length, and the theorem says there are at most\n    // three. The newest point always lands in a longest gap and cuts it into\n    // one gap of each of the two shorter lengths already on the circle, which\n    // is why the longest is the sum of the other two. When the last longest\n    // gap is cut, the middle length is the longest and the cutting goes on.\n    let nc = 0;\n    for (let i = 0; i \u003c n; i++) {\n      const dd = idx[i + 1] - idx[i];\n      let c = 0;\n      while (c \u003c nc && dv[c] !== dd) c++;\n      if (c === nc && nc \u003c 4) (dv[nc] = dd), (dl[nc] = pos[i + 1] - pos[i]), nc++;\n    }\n    // Rank: how many lengths are longer, counting a length within 15% as\n    // half. Near a fraction p/q the shortest shrinks towards nothing and the\n    // other two meet, so their gaps go one colour as the three become two.\n    for (let c = 0; c \u003c nc; c++) {\n      let r = 0;\n      for (let e = 0; e \u003c nc; e++) if (e !== c) r += cl(0.5 + (dl[e] - dl[c]) / (0.3 * max(dl[e], dl[c])), 0, 1);\n      rank[c] = min(2, r);\n    }\n    // Points closer than a third of an LED count as one. A lone one between\n    // two gaps wider than an LED draws a dark line, darker the wider they are.\n    sep.fill(0);\n    let first = 0;\n    while (first \u003c n - 1 && (pos[first + 1] - pos[first]) * W \u003c 0.34) first++;\n    for (let i = 0, prev = -1; i \u003c n; i++) {\n      const gr = (pos[i + 1] - pos[i]) * W;\n      if (gr \u003c 0.34 && i \u003c n - 1) continue;\n      const gl = prev \u003c 0 ? (pos[first] + 1 - pos[n - 1]) * W : (pos[i] - pos[prev]) * W;\n      const x = floor(pos[i] * W);\n      sep[x] = max(sep[x], cl((min(gl, gr) - 1.1) / 2.4, 0, 1));\n      prev = i;\n    }\n    // Four samples to an LED. Brightness follows the gap's length times n,\n    // which runs about 0.4 to 1.9 at 1/phi: a gap brightens down the panel\n    // until a point cuts it.\n    row.fill(0);\n    let g = 0;\n    for (let x = 0; x \u003c W; x++)\n      for (let s = 0; s \u003c SS; s++) {\n        const u = (x + (s + 0.5) / SS) / W;\n        while (pos[g + 1] \u003c= u) g++;\n        const dd = idx[g + 1] - idx[g];\n        let c = 0;\n        while (c \u003c nc - 1 && dv[c] !== dd) c++;\n        const v = 0.6 + 0.4 * cl((n * (pos[g + 1] - pos[g]) - 0.4) / 1.3, 0, 1), q = floor(rank[c] * 31.5) * 3;\n        row[x * 3] += lut[q] * v;\n        row[x * 3 + 1] += lut[q + 1] * v;\n        row[x * 3 + 2] += lut[q + 2] * v;\n      }\n    // The newest point, white on the row where it arrives: they fall on a\n    // lattice, and each heads the dark line its point draws below.\n    for (let x = 0; x \u003c W; x++) {\n      const f = (255 / SS) * (1 - 0.85 * sep[x]);\n      if (x === tick) display.setPixel(x, y, 255, 255, 255);\n      else display.setPixel(x, y, row[x * 3] * f, row[x * 3 + 1] * f, row[x * 3 + 2] * f);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair."},{"name":"Speed","min":0.2,"max":3,"about":"How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s."},{"name":"Alpha","min":0,"max":1,"about":"Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns."},{"name":"Points","min":0,"max":1,"about":"How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples."}],"start":[0,2,0,0.06],"measures":{"motion":0.1477,"detail":0.1059,"edges":0.725,"complexity":0.2583,"coverage":0.9968,"colour":0.6429,"drift":0.149},"knobResponse":[0.4559,0.1669,0.3074,0.2544]},{"slug":"toner-pad","title":"Toner Pad","family":"cosmetic","round":35,"note":"섬유 400가닥이 아무렇게나 엇갈린 흰 솜 패드에 장밋빛 토너가 3.2초마다 한 방울씩 떨어져요. 젖는 앞은 잘 빨아올리는 섬유를 따라 손가락처럼 먼저 뻗고, 젖은 곳은 반투명해져 뒤의 빛을 토너 색으로 받으며 그 안의 섬유가 어둡게 드러나요. 패치는 가장자리부터 말라 흰 솜으로 돌아가요. K3 은 한 방울이 적시는 넓이를 1800 LED 에서 5400 LED 로 늘리고, K1 을 누르면 아직 젖은 곳을 피해 한 방울이 바로 떨어져요.","idea":"A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.","buttons":"K1 tap lets a drop fall at once, away from the patches still wet.","code":"// ===== Patternflow pattern =====\n// Title:   Toner Pad\n// Family:  cosmetic\n// Idea:    A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cotton pad soaking up toner\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1\n//\n// Knob 1: Hue. The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive.\n// Knob 2: Speed. How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower.\n// Knob 3: Toner. How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65.\n// Knob 4: Fibre. How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges.\n// Buttons: K1 tap lets a drop fall at once, away from the patches still wet.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n// Drops on the pad at once: a fifth, from quick taps, takes the place of the oldest.\nconst MAXD = 4;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    F: F(N), F2: F(N), tmp: F(N), CE: F(N), CS: F(N), CSE: F(N), CSW: F(N), J: F(N),\n    drops: [], pool: [F(N), F(N), F(N), F(N), F(N)],\n    // The heap's keys are 32-bit like the reach they are checked against, so a\n    // key is never read as stale because it was rounded on the way in.\n    hk: F(8 * N + 16), hv: new Int32Array(8 * N + 16),\n    T: 0, next: 0, hue: 0, speed: 2, toner: 0, fibre: 0.06, webKey: NaN, started: false, col: F(12), key: NaN,\n  };\n}\n\n// The web: fibres laid at random, each a slightly wavy strand, drawn soft\n// into F (how much fibre each LED sees) and marked on the links between\n// neighbouring LEDs it runs through, which is where the toner wicks fastest.\nfunction web(S) {\n  const g = S.fibre, Fd = S.F, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW;\n  Fd.fill(0);\n  CE.fill(0);\n  CS.fill(0);\n  CSE.fill(0);\n  CSW.fill(0);\n  for (let i = 0; i \u003c N; i++) S.J[i] = 0.9 + 0.2 * rnd();\n  const count = floor(420 - 300 * g), wid = 0.6 + 1.4 * g;\n  for (let f = 0; f \u003c count; f++) {\n    let x = -20 + rnd() * (W + 40), y = -20 + rnd() * (H + 40), th = rnd() * PI * 2, bend = 0;\n    const len = 40 + 50 * rnd(), b = 0.45 + 0.55 * rnd();\n    // Most strands carry the toner a little faster than the gaps; a few\n    // carry it about six times as fast, and the front runs out along them.\n    const u = rnd(), wick = 0.12 + 1.1 * u * u * u * u;\n    let px = -1, py = -1;\n    for (let t = 0; t \u003c len; t += 0.6) {\n      bend += (rnd() - 0.5) * 0.05;\n      bend *= 0.95;\n      th += bend * 0.5;\n      x += 0.6 * cos(th);\n      y += 0.6 * sin(th);\n      if (x \u003c 0 || y \u003c 0 || x >= W - 1 || y >= H - 1) {\n        px = -1;\n        continue;\n      }\n      // Soft splat of the strand.\n      const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix, w = 0.32 * b * wid;\n      Fd[o] += w * (1 - fx) * (1 - fy);\n      Fd[o + 1] += w * fx * (1 - fy);\n      Fd[o + W] += w * (1 - fx) * fy;\n      Fd[o + W + 1] += w * fx * fy;\n      // The link it crossed.\n      const cx = floor(x + 0.5), cy = floor(y + 0.5);\n      if (px >= 0 && (cx !== px || cy !== py)) {\n        const dx = cx - px, dy = cy - py, a = Math.min(cy, py) * W, k = wick;\n        if (abs(dx) \u003c= 1 && abs(dy) \u003c= 1) {\n          if (dy === 0) CE[cy * W + min(cx, px)] += k;\n          else if (dx === 0) CS[a + cx] += k;\n          else if (dx === dy) CSE[a + min(cx, px)] += k;\n          else CSW[a + max(cx, px)] += k;\n        }\n      }\n      px = cx;\n      py = cy;\n    }\n  }\n  for (let i = 0; i \u003c N; i++) Fd[i] = 1 - exp(-Fd[i] * 1.6);\n  // Deeper in the pad the fibres are out of focus: a second web, laid the\n  // same way and blurred over five LEDs, gives the white its soft depth.\n  const F2 = S.F2, tmp = S.tmp;\n  F2.fill(0);\n  for (let f = 0; f \u003c 260; f++) {\n    let x = rnd() * W, y = rnd() * H, th = rnd() * PI * 2;\n    for (let t = 0; t \u003c 50; t += 1) {\n      th += (rnd() - 0.5) * 0.08;\n      x += cos(th);\n      y += sin(th);\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) F2[floor(y) * W + floor(x)] += 0.5;\n    }\n  }\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += F2[y * W + cl(x + k, 0, W - 1)];\n        tmp[i] = a / 5;\n      }\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += tmp[cl(y + k, 0, H - 1) * W + x];\n        F2[i] = a / 5;\n      }\n  }\n  for (let i = 0; i \u003c N; i++) F2[i] = 1 - exp(-F2[i] * 3);\n}\n\n// How far the toner has to wick to reach each LED from a drop at (x0, y0):\n// the cheapest path, where crossing a link costs its length divided by how\n// well fibres carry along it. A front at a given reach has run furthest\n// along the fibres, so it is fingered and follows them.\nfunction reach(S, d, x0, y0) {\n  const hk = S.hk, hv = S.hv, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW, J = S.J, LIM = 45;\n  d.fill(1e9);\n  let n = 0;\n  const push = (k, v) => {\n    let i = n++;\n    while (i > 0) {\n      const p = (i - 1) >> 1;\n      if (hk[p] \u003c= k) break;\n      hk[i] = hk[p];\n      hv[i] = hv[p];\n      i = p;\n    }\n    hk[i] = k;\n    hv[i] = v;\n  };\n  for (let y = max(0, floor(y0 - 3)); y \u003c= min(H - 1, floor(y0 + 3)); y++)\n    for (let x = max(0, floor(x0 - 3)); x \u003c= min(W - 1, floor(x0 + 3)); x++) {\n      const r = Math.hypot(x + 0.5 - x0, y + 0.5 - y0);\n      if (r \u003c 3) {\n        d[y * W + x] = r * 0.4;\n        push(r * 0.4, y * W + x);\n      }\n    }\n  const speed = (c) => 1 / (1 + 4.5 * c);\n  while (n > 0) {\n    const k = hk[0], v = hv[0];\n    // Pop.\n    n--;\n    const lk = hk[n], lv = hv[n];\n    let i = 0;\n    while (true) {\n      let c = 2 * i + 1;\n      if (c >= n) break;\n      if (c + 1 \u003c n && hk[c + 1] \u003c hk[c]) c++;\n      if (hk[c] >= lk) break;\n      hk[i] = hk[c];\n      hv[i] = hv[c];\n      i = c;\n    }\n    hk[i] = lk;\n    hv[i] = lv;\n    if (k > d[v] || k > LIM) continue;\n    const x = v % W, y = (v - x) / W, j = J[v];\n    const rel = (u, cost) => {\n      const nk = k + cost * j;\n      if (nk \u003c d[u]) {\n        d[u] = nk;\n        push(nk, u);\n      }\n    };\n    if (x \u003c W - 1) rel(v + 1, speed(CE[v]));\n    if (x > 0) rel(v - 1, speed(CE[v - 1]));\n    if (y \u003c H - 1) {\n      rel(v + W, speed(CS[v]));\n      if (x \u003c W - 1) rel(v + W + 1, 1.414 * speed(CSE[v]));\n      if (x > 0) rel(v + W - 1, 1.414 * speed(CSW[v]));\n    }\n    if (y > 0) {\n      rel(v - W, speed(CS[v - W]));\n      if (x > 0) rel(v - W - 1, 1.414 * speed(CSE[v - W - 1]));\n      if (x \u003c W - 1) rel(v - W + 1, 1.414 * speed(CSW[v - W + 1]));\n    }\n  }\n  // Paths on a grid of LEDs come out in stair steps; two passes of a 3x3\n  // blur round the front off while keeping its fingers.\n  const tmp = S.tmp;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) tmp[i] = (xx > 0 ? d[i - 1] : d[i]) + d[i] + (xx \u003c W - 1 ? d[i + 1] : d[i]);\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) d[i] = ((yy > 0 ? tmp[i - W] : tmp[i]) + tmp[i] + (yy \u003c H - 1 ? tmp[i + W] : tmp[i])) / 9;\n  }\n}\n\nfunction drop(S, x, y, age) {\n  if (S.drops.length >= MAXD) S.pool.push(S.drops.shift().d);\n  const d = S.pool.pop();\n  reach(S, d, x, y);\n  S.drops.push({ d, x, y, t: age, R: spread(d, S.toner) });\n}\n\n// How far a drop's front runs: the reach at which the wet patch covers the\n// area its toner can fill, 1800 LEDs at Toner 0 and 5400 at 1, whatever the\n// web. Found by halving.\nfunction spread(d, toner) {\n  const A = 1800 + 3600 * toner;\n  let lo = 0, hi = 40;\n  for (let it = 0; it \u003c 18; it++) {\n    const R = (lo + hi) / 2;\n    let n = 0;\n    for (let i = 0; i \u003c N; i++) if (d[i] \u003c R) n++;\n    if (n \u003c A) lo = R;\n    else hi = R;\n  }\n  return (lo + hi) / 2;\n}\n\n// Somewhere new: of six tries, the one furthest from every patch still wet.\nfunction spot(S) {\n  let bx = 32, by = 64, best = -1;\n  for (let k = 0; k \u003c 6; k++) {\n    const x = 10 + rnd() * 44, y = 12 + rnd() * 104;\n    let dd = 1e9;\n    for (const e of S.drops) dd = min(dd, Math.hypot(x - e.x, (y - e.y) * 0.7));\n    if (dd > best) (best = dd), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// A drop's front: running out fast and slowing as the toner spreads thin,\n// holding, then drying back from the far edges towards where it fell.\nconst TS = 0.8, THOLD = 3.2, TDRY = 3.6;\nfunction front(e) {\n  const t = e.t;\n  if (t \u003c 0) return -9;\n  if (t \u003c THOLD) return e.R * sqrt(1 - exp(-t / TS));\n  const full = e.R * sqrt(1 - exp(-THOLD / TS));\n  return full * (1 - (t - THOLD) / TDRY);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.toner = cl(kv[2] || 0, 0, 1);\n  S.fibre = cl(kv[3], 0, 1);\n  const wk = Math.round(S.fibre * 25);\n  if (wk !== S.webKey) {\n    S.webKey = wk;\n    web(S);\n    for (const e of S.drops) {\n      reach(S, e.d, e.x, e.y);\n      e.R = spread(e.d, S.toner);\n    }\n  }\n  if (!S.started) {\n    S.started = true;\n    // Open on a patch drying in the lower half and a fresh drop about to land higher up.\n    drop(S, 22 + rnd() * 20, 88 + rnd() * 20, 4.2);\n    drop(S, 22 + rnd() * 20, 26 + rnd() * 24, -0.2);\n    S.next = 3.2;\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  for (const e of S.drops) e.t += st;\n  S.drops = S.drops.filter((e) => {\n    if (e.t \u003c THOLD + TDRY) return true;\n    S.pool.push(e.d);\n    return false;\n  });\n  S.next -= st;\n  if ((input.btnPressed && input.btnPressed[0]) || S.next \u003c= 0) {\n    const [x, y] = spot(S);\n    drop(S, x, y, 0);\n    S.next = 3.2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, Fd = S.F, F2 = S.F2, T = S.T;\n  const h = S.hue + 0.95, key = h;\n  if (S.key !== key) {\n    const hf = h - floor(h), wm = sm((hf + 0.03) / 0.06) * (1 - sm((hf - 0.24) / 0.06));\n    hsv(h, 0.03, 1, col, 0);\n    hsv(h, 0.55 - 0.2 * wm, 1, col, 3);\n    col[6] = wm;\n    S.key = key;\n  }\n  const wm = col[6];\n  const fr = S.drops.map(front);\n  // A drying patch also pales a little as it shrinks.\n  const mo = S.drops.map((e) => (e.t \u003c THOLD ? 1 : 1 - (0.4 * (e.t - THOLD)) / TDRY));\n  // A soft light behind the pad drifts slowly; wet cotton lets it through.\n  const gx = 32 + 20 * sin(T * 0.43), gy = 64 + 44 * sin(T * 0.29 + 1);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let wet = 0, deep = 0;\n      for (let k = 0; k \u003c S.drops.length; k++) {\n        const R = fr[k];\n        if (R \u003c= 0) continue;\n        const dd = S.drops[k].d[i], w = sm((R - dd) / 1.6 + 0.5) * mo[k];\n        if (w > wet) wet = w;\n        const dp = w * cl(1 - dd / (R + 2), 0, 1);\n        if (dp > deep) deep = dp;\n      }\n      const f = Fd[i], f2 = F2[i];\n      const gdx = x - gx, gdy = y - gy, glow = exp(-(gdx * gdx + gdy * gdy) / 900);\n      // Dry: matte white, the fibres a little brighter than the gaps.\n      const ld = 0.8 + 0.1 * f2 + 0.12 * f + 0.06 * glow;\n      // Wet: translucent and lit from behind in the toner's tint, deeper\n      // towards where the drop fell, and the fibres dark against it. A dark\n      // fibre in orange or gold would be a brown line, so the fibres go\n      // towards a cool grey, there more and only half as dark.\n      const lw = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2) * (1 - (0.58 - 0.3 * wm) * f), ti = 0.65 + 0.35 * deep;\n      let wr = (col[0] + (col[3] - col[0]) * ti) * lw, wg = (col[1] + (col[4] - col[1]) * ti) * lw, wb = (col[2] + (col[5] - col[2]) * ti) * lw;\n      const l0 = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2), ds = f * (0.25 + 0.55 * wm);\n      wr += (0.4 * l0 - wr) * ds;\n      wg += (0.43 * l0 - wg) * ds;\n      wb += (0.5 * l0 - wb) * ds;\n      let r = col[0] * ld + (wr - col[0] * ld) * wet, g = col[1] * ld + (wg - col[1] * ld) * wet, b = col[2] * ld + (wb - col[2] * ld) * wet;\n      // A drop that has just landed sits as a glossy bead for a moment before\n      // it soaks in: deeper tint under it and a highlight on its upper left.\n      for (const e of S.drops) {\n        if (e.t \u003c 0 || e.t > 0.6) continue;\n        const u = e.t / 0.6, rb = 3.2 * (1 - u * u), bx = x + 0.5 - e.x, by = y + 0.5 - e.y, q = (bx * bx + by * by) / (rb * rb + 0.01);\n        if (q >= 1.6) continue;\n        const cov = sm((1.3 - q) / 0.5), hx = bx / rb + 0.4, hy = by / rb + 0.4, hl = exp(-(hx * hx + hy * hy) * 5) * 0.6 * cov;\n        r = r * (1 - 0.25 * cov) + hl;\n        g = g * (1 - 0.25 * cov) + hl;\n        b = b * (1 - 0.25 * cov) + hl;\n      }\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","layer":{"id":"layer-toner-pad","type":"code","name":"toner-pad","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Toner Pad\n// Family:  cosmetic\n// Idea:    A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cotton pad soaking up toner\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1\n//\n// Knob 1: Hue. The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive.\n// Knob 2: Speed. How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower.\n// Knob 3: Toner. How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65.\n// Knob 4: Fibre. How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges.\n// Buttons: K1 tap lets a drop fall at once, away from the patches still wet.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n// Drops on the pad at once: a fifth, from quick taps, takes the place of the oldest.\nconst MAXD = 4;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    F: F(N), F2: F(N), tmp: F(N), CE: F(N), CS: F(N), CSE: F(N), CSW: F(N), J: F(N),\n    drops: [], pool: [F(N), F(N), F(N), F(N), F(N)],\n    // The heap's keys are 32-bit like the reach they are checked against, so a\n    // key is never read as stale because it was rounded on the way in.\n    hk: F(8 * N + 16), hv: new Int32Array(8 * N + 16),\n    T: 0, next: 0, hue: 0, speed: 2, toner: 0, fibre: 0.06, webKey: NaN, started: false, col: F(12), key: NaN,\n  };\n}\n\n// The web: fibres laid at random, each a slightly wavy strand, drawn soft\n// into F (how much fibre each LED sees) and marked on the links between\n// neighbouring LEDs it runs through, which is where the toner wicks fastest.\nfunction web(S) {\n  const g = S.fibre, Fd = S.F, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW;\n  Fd.fill(0);\n  CE.fill(0);\n  CS.fill(0);\n  CSE.fill(0);\n  CSW.fill(0);\n  for (let i = 0; i \u003c N; i++) S.J[i] = 0.9 + 0.2 * rnd();\n  const count = floor(420 - 300 * g), wid = 0.6 + 1.4 * g;\n  for (let f = 0; f \u003c count; f++) {\n    let x = -20 + rnd() * (W + 40), y = -20 + rnd() * (H + 40), th = rnd() * PI * 2, bend = 0;\n    const len = 40 + 50 * rnd(), b = 0.45 + 0.55 * rnd();\n    // Most strands carry the toner a little faster than the gaps; a few\n    // carry it about six times as fast, and the front runs out along them.\n    const u = rnd(), wick = 0.12 + 1.1 * u * u * u * u;\n    let px = -1, py = -1;\n    for (let t = 0; t \u003c len; t += 0.6) {\n      bend += (rnd() - 0.5) * 0.05;\n      bend *= 0.95;\n      th += bend * 0.5;\n      x += 0.6 * cos(th);\n      y += 0.6 * sin(th);\n      if (x \u003c 0 || y \u003c 0 || x >= W - 1 || y >= H - 1) {\n        px = -1;\n        continue;\n      }\n      // Soft splat of the strand.\n      const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix, w = 0.32 * b * wid;\n      Fd[o] += w * (1 - fx) * (1 - fy);\n      Fd[o + 1] += w * fx * (1 - fy);\n      Fd[o + W] += w * (1 - fx) * fy;\n      Fd[o + W + 1] += w * fx * fy;\n      // The link it crossed.\n      const cx = floor(x + 0.5), cy = floor(y + 0.5);\n      if (px >= 0 && (cx !== px || cy !== py)) {\n        const dx = cx - px, dy = cy - py, a = Math.min(cy, py) * W, k = wick;\n        if (abs(dx) \u003c= 1 && abs(dy) \u003c= 1) {\n          if (dy === 0) CE[cy * W + min(cx, px)] += k;\n          else if (dx === 0) CS[a + cx] += k;\n          else if (dx === dy) CSE[a + min(cx, px)] += k;\n          else CSW[a + max(cx, px)] += k;\n        }\n      }\n      px = cx;\n      py = cy;\n    }\n  }\n  for (let i = 0; i \u003c N; i++) Fd[i] = 1 - exp(-Fd[i] * 1.6);\n  // Deeper in the pad the fibres are out of focus: a second web, laid the\n  // same way and blurred over five LEDs, gives the white its soft depth.\n  const F2 = S.F2, tmp = S.tmp;\n  F2.fill(0);\n  for (let f = 0; f \u003c 260; f++) {\n    let x = rnd() * W, y = rnd() * H, th = rnd() * PI * 2;\n    for (let t = 0; t \u003c 50; t += 1) {\n      th += (rnd() - 0.5) * 0.08;\n      x += cos(th);\n      y += sin(th);\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) F2[floor(y) * W + floor(x)] += 0.5;\n    }\n  }\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += F2[y * W + cl(x + k, 0, W - 1)];\n        tmp[i] = a / 5;\n      }\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += tmp[cl(y + k, 0, H - 1) * W + x];\n        F2[i] = a / 5;\n      }\n  }\n  for (let i = 0; i \u003c N; i++) F2[i] = 1 - exp(-F2[i] * 3);\n}\n\n// How far the toner has to wick to reach each LED from a drop at (x0, y0):\n// the cheapest path, where crossing a link costs its length divided by how\n// well fibres carry along it. A front at a given reach has run furthest\n// along the fibres, so it is fingered and follows them.\nfunction reach(S, d, x0, y0) {\n  const hk = S.hk, hv = S.hv, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW, J = S.J, LIM = 45;\n  d.fill(1e9);\n  let n = 0;\n  const push = (k, v) => {\n    let i = n++;\n    while (i > 0) {\n      const p = (i - 1) >> 1;\n      if (hk[p] \u003c= k) break;\n      hk[i] = hk[p];\n      hv[i] = hv[p];\n      i = p;\n    }\n    hk[i] = k;\n    hv[i] = v;\n  };\n  for (let y = max(0, floor(y0 - 3)); y \u003c= min(H - 1, floor(y0 + 3)); y++)\n    for (let x = max(0, floor(x0 - 3)); x \u003c= min(W - 1, floor(x0 + 3)); x++) {\n      const r = Math.hypot(x + 0.5 - x0, y + 0.5 - y0);\n      if (r \u003c 3) {\n        d[y * W + x] = r * 0.4;\n        push(r * 0.4, y * W + x);\n      }\n    }\n  const speed = (c) => 1 / (1 + 4.5 * c);\n  while (n > 0) {\n    const k = hk[0], v = hv[0];\n    // Pop.\n    n--;\n    const lk = hk[n], lv = hv[n];\n    let i = 0;\n    while (true) {\n      let c = 2 * i + 1;\n      if (c >= n) break;\n      if (c + 1 \u003c n && hk[c + 1] \u003c hk[c]) c++;\n      if (hk[c] >= lk) break;\n      hk[i] = hk[c];\n      hv[i] = hv[c];\n      i = c;\n    }\n    hk[i] = lk;\n    hv[i] = lv;\n    if (k > d[v] || k > LIM) continue;\n    const x = v % W, y = (v - x) / W, j = J[v];\n    const rel = (u, cost) => {\n      const nk = k + cost * j;\n      if (nk \u003c d[u]) {\n        d[u] = nk;\n        push(nk, u);\n      }\n    };\n    if (x \u003c W - 1) rel(v + 1, speed(CE[v]));\n    if (x > 0) rel(v - 1, speed(CE[v - 1]));\n    if (y \u003c H - 1) {\n      rel(v + W, speed(CS[v]));\n      if (x \u003c W - 1) rel(v + W + 1, 1.414 * speed(CSE[v]));\n      if (x > 0) rel(v + W - 1, 1.414 * speed(CSW[v]));\n    }\n    if (y > 0) {\n      rel(v - W, speed(CS[v - W]));\n      if (x > 0) rel(v - W - 1, 1.414 * speed(CSE[v - W - 1]));\n      if (x \u003c W - 1) rel(v - W + 1, 1.414 * speed(CSW[v - W + 1]));\n    }\n  }\n  // Paths on a grid of LEDs come out in stair steps; two passes of a 3x3\n  // blur round the front off while keeping its fingers.\n  const tmp = S.tmp;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) tmp[i] = (xx > 0 ? d[i - 1] : d[i]) + d[i] + (xx \u003c W - 1 ? d[i + 1] : d[i]);\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) d[i] = ((yy > 0 ? tmp[i - W] : tmp[i]) + tmp[i] + (yy \u003c H - 1 ? tmp[i + W] : tmp[i])) / 9;\n  }\n}\n\nfunction drop(S, x, y, age) {\n  if (S.drops.length >= MAXD) S.pool.push(S.drops.shift().d);\n  const d = S.pool.pop();\n  reach(S, d, x, y);\n  S.drops.push({ d, x, y, t: age, R: spread(d, S.toner) });\n}\n\n// How far a drop's front runs: the reach at which the wet patch covers the\n// area its toner can fill, 1800 LEDs at Toner 0 and 5400 at 1, whatever the\n// web. Found by halving.\nfunction spread(d, toner) {\n  const A = 1800 + 3600 * toner;\n  let lo = 0, hi = 40;\n  for (let it = 0; it \u003c 18; it++) {\n    const R = (lo + hi) / 2;\n    let n = 0;\n    for (let i = 0; i \u003c N; i++) if (d[i] \u003c R) n++;\n    if (n \u003c A) lo = R;\n    else hi = R;\n  }\n  return (lo + hi) / 2;\n}\n\n// Somewhere new: of six tries, the one furthest from every patch still wet.\nfunction spot(S) {\n  let bx = 32, by = 64, best = -1;\n  for (let k = 0; k \u003c 6; k++) {\n    const x = 10 + rnd() * 44, y = 12 + rnd() * 104;\n    let dd = 1e9;\n    for (const e of S.drops) dd = min(dd, Math.hypot(x - e.x, (y - e.y) * 0.7));\n    if (dd > best) (best = dd), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// A drop's front: running out fast and slowing as the toner spreads thin,\n// holding, then drying back from the far edges towards where it fell.\nconst TS = 0.8, THOLD = 3.2, TDRY = 3.6;\nfunction front(e) {\n  const t = e.t;\n  if (t \u003c 0) return -9;\n  if (t \u003c THOLD) return e.R * sqrt(1 - exp(-t / TS));\n  const full = e.R * sqrt(1 - exp(-THOLD / TS));\n  return full * (1 - (t - THOLD) / TDRY);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.toner = cl(kv[2] || 0, 0, 1);\n  S.fibre = cl(kv[3], 0, 1);\n  const wk = Math.round(S.fibre * 25);\n  if (wk !== S.webKey) {\n    S.webKey = wk;\n    web(S);\n    for (const e of S.drops) {\n      reach(S, e.d, e.x, e.y);\n      e.R = spread(e.d, S.toner);\n    }\n  }\n  if (!S.started) {\n    S.started = true;\n    // Open on a patch drying in the lower half and a fresh drop about to land higher up.\n    drop(S, 22 + rnd() * 20, 88 + rnd() * 20, 4.2);\n    drop(S, 22 + rnd() * 20, 26 + rnd() * 24, -0.2);\n    S.next = 3.2;\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  for (const e of S.drops) e.t += st;\n  S.drops = S.drops.filter((e) => {\n    if (e.t \u003c THOLD + TDRY) return true;\n    S.pool.push(e.d);\n    return false;\n  });\n  S.next -= st;\n  if ((input.btnPressed && input.btnPressed[0]) || S.next \u003c= 0) {\n    const [x, y] = spot(S);\n    drop(S, x, y, 0);\n    S.next = 3.2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, Fd = S.F, F2 = S.F2, T = S.T;\n  const h = S.hue + 0.95, key = h;\n  if (S.key !== key) {\n    const hf = h - floor(h), wm = sm((hf + 0.03) / 0.06) * (1 - sm((hf - 0.24) / 0.06));\n    hsv(h, 0.03, 1, col, 0);\n    hsv(h, 0.55 - 0.2 * wm, 1, col, 3);\n    col[6] = wm;\n    S.key = key;\n  }\n  const wm = col[6];\n  const fr = S.drops.map(front);\n  // A drying patch also pales a little as it shrinks.\n  const mo = S.drops.map((e) => (e.t \u003c THOLD ? 1 : 1 - (0.4 * (e.t - THOLD)) / TDRY));\n  // A soft light behind the pad drifts slowly; wet cotton lets it through.\n  const gx = 32 + 20 * sin(T * 0.43), gy = 64 + 44 * sin(T * 0.29 + 1);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let wet = 0, deep = 0;\n      for (let k = 0; k \u003c S.drops.length; k++) {\n        const R = fr[k];\n        if (R \u003c= 0) continue;\n        const dd = S.drops[k].d[i], w = sm((R - dd) / 1.6 + 0.5) * mo[k];\n        if (w > wet) wet = w;\n        const dp = w * cl(1 - dd / (R + 2), 0, 1);\n        if (dp > deep) deep = dp;\n      }\n      const f = Fd[i], f2 = F2[i];\n      const gdx = x - gx, gdy = y - gy, glow = exp(-(gdx * gdx + gdy * gdy) / 900);\n      // Dry: matte white, the fibres a little brighter than the gaps.\n      const ld = 0.8 + 0.1 * f2 + 0.12 * f + 0.06 * glow;\n      // Wet: translucent and lit from behind in the toner's tint, deeper\n      // towards where the drop fell, and the fibres dark against it. A dark\n      // fibre in orange or gold would be a brown line, so the fibres go\n      // towards a cool grey, there more and only half as dark.\n      const lw = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2) * (1 - (0.58 - 0.3 * wm) * f), ti = 0.65 + 0.35 * deep;\n      let wr = (col[0] + (col[3] - col[0]) * ti) * lw, wg = (col[1] + (col[4] - col[1]) * ti) * lw, wb = (col[2] + (col[5] - col[2]) * ti) * lw;\n      const l0 = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2), ds = f * (0.25 + 0.55 * wm);\n      wr += (0.4 * l0 - wr) * ds;\n      wg += (0.43 * l0 - wg) * ds;\n      wb += (0.5 * l0 - wb) * ds;\n      let r = col[0] * ld + (wr - col[0] * ld) * wet, g = col[1] * ld + (wg - col[1] * ld) * wet, b = col[2] * ld + (wb - col[2] * ld) * wet;\n      // A drop that has just landed sits as a glossy bead for a moment before\n      // it soaks in: deeper tint under it and a highlight on its upper left.\n      for (const e of S.drops) {\n        if (e.t \u003c 0 || e.t > 0.6) continue;\n        const u = e.t / 0.6, rb = 3.2 * (1 - u * u), bx = x + 0.5 - e.x, by = y + 0.5 - e.y, q = (bx * bx + by * by) / (rb * rb + 0.01);\n        if (q >= 1.6) continue;\n        const cov = sm((1.3 - q) / 0.5), hx = bx / rb + 0.4, hy = by / rb + 0.4, hl = exp(-(hx * hx + hy * hy) * 5) * 0.6 * cov;\n        r = r * (1 - 0.25 * cov) + hl;\n        g = g * (1 - 0.25 * cov) + hl;\n        b = b * (1 - 0.25 * cov) + hl;\n      }\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower."},{"name":"Toner","min":0,"max":1,"about":"How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65."},{"name":"Fibre","min":0,"max":1,"about":"How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges."}],"start":[0,2,0,0.06],"measures":{"motion":0.0391,"detail":0.0359,"edges":0.0818,"complexity":1.8818,"coverage":1,"colour":0.1257,"drift":0.1404},"knobResponse":[0.0571,0.1234,0.1866,0.1574]},{"slug":"tower-crane","title":"Tower Crane","family":"construction","round":24,"note":"해 질 녘 올라가는 콘크리트 건물 옆에 노란 타워크레인이 서서, 마당의 벽판과 철근 다발, 거푸집, 콘크리트 버킷을 차례로 꼭대기 층에 올려요. 붐이 원근 속에서 돌며 짧아졌다 길어지고, 버킷이 바닥을 부으면 건물이 한 층 자라 새 층 창에 불이 들어와요. K1 을 끝까지 돌리면 밤이 되어 투광등이 켜져요.","idea":"A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.","buttons":"K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.","code":"// ===== Patternflow pattern =====\n// Title:   Tower Crane\n// Family:  construction\n// Idea:    A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower cranes that stand beside a rising concrete frame\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1\n//\n// Knob 1: Dusk. From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit.\n// Knob 2: Speed. At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower.\n// Knob 3: Floors. How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof.\n// Knob 4: Wind. Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable.\n// Buttons: K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street level, one storey, and the most floors that fit under the jib.\nconst [GY, FH, NMAX] = [114, 6, 13];\n// The frame, x 3 to 39: six columns two LEDs wide, five bays, the one by the crane the lift core.\nconst [BX0, BX1, CORE] = [3, 39, 4];\n// Mast centre, the jib's bottom chord at the root, jib and counter-jib lengths, top of the tower head.\nconst [MX, JY, JL, CJL, APEX] = [46, 15, 42, 15, 3];\n// The hook's highest row, the radius it picks at over the yard, the yard's load line.\nconst [HTOP, PICK_R, PICK_Y] = [21, 11, 120];\n// Wall panel, rebar, formwork, bucket: width, height, the column it is set down on.\nconst LW = [8, 11, 9, 5], LH = [5, 2, 4, 6], DROP = [35, 20, 12, 6];\n// Sky top, middle, horizon; sun; lit and shaded cloud; light on things. Afternoon to night.\nconst KEYS = [\n  [34, 72, 156, 128, 142, 186, 255, 190, 112, 255, 236, 170, 255, 236, 204, 150, 130, 160, 1, 0.9, 0.74],\n  [30, 50, 130, 168, 108, 140, 255, 140, 62, 255, 168, 78, 255, 170, 116, 104, 70, 108, 0.86, 0.64, 0.48],\n  [16, 20, 70, 64, 44, 96, 196, 86, 78, 226, 90, 52, 176, 92, 104, 46, 36, 66, 0.44, 0.38, 0.46],\n  [4, 6, 22, 10, 14, 40, 44, 34, 60, 0, 0, 0, 42, 36, 56, 16, 16, 30, 0.2, 0.21, 0.3],\n];\nconst FLC = [1, 0.94, 0.82];\nconst YEL = [255, 196, 22];\n// The floodlight tower in the yard and where it is aimed.\nconst [LX, LY] = [60.5, 84.5];\nconst [AX, AY] = (([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)])([-34, 31]);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F(N * 3), bg: F(N * 3), lm: F(N * 3), fl: F(N), row: F(H * 3), cloud: F(128 * 64), sky: new Int16Array(W),\n    t: 0, rt: 0, nk: -1, stage: 3, cage: 1, form: 1, item: -1, lightNew: -1, th: PI, r: 40, load: 3, ph: \"I\", sw: 0, swv: 0, vx: 0, ptx: 6,\n    on: new Uint8Array(NMAX), onT: F(NMAX).fill(9), nsw: 2.4, cx: 0, sp: [], weld: 0.4, welding: 0, wk: [], mix: 2, cars: [], ncar: 1.4,\n  });\n  // Clouds: a strip of soft noise that wraps every 128 columns.\n  for (let i = 0; i \u003c 128 * 64; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.05, y * 0.13) + 0.3 * vn(X * 0.13, y * 0.3 + 9) + 0.15 * vn(X * 0.4, y * 0.6 + 3);\n    P.cloud[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  // The city behind: blocks of four to nine columns.\n  for (let x = 0, w = 0, h = 0; x \u003c W; x++, w--) w > 0 || ((w = 4 + floor(rnd() * 6)), (h = 98 + floor(rnd() * 12))), (P.sky[x] = h);\n  for (let k = 0; k \u003c NMAX; k++) (P.on[k] = rnd() \u003c 0.35 ? 1 : 0), k \u003c 3 && P.wk.push({ x: 8 + k * 11 + rnd() * 4, tx: 8 + rnd() * 28, wait: rnd() * 2 });\n}\n\n// A move of the crane: slew angle, trolley radius and hook row, eased to where they go.\nfunction go(P, ph, dur, to) {\n  Object.assign(P, { ph, pt: 0, pd: dur, f0: [P.th, P.r, P.hy], f1: [to.th ?? P.th, to.r ?? P.r, to.hy ?? P.hy] });\n}\n\nconst deckY = (P) => GY - P.n * FH;\nconst tip = (P) => [MX + P.r * cos(P.th), JY + 1 - P.r * sin(P.th) * 0.1];\nconst bucketHy = (P) => deckY(P) - FH - 2 - LH[3] - 3;\n\nfunction finishFloor(P) {\n  if (P.n \u003c NMAX) P.n++;\n  else P.top = 1;\n  // The floor that has just been glazed lights up a moment later.\n  Object.assign(P, { stage: 0, cage: 0, form: 0, item: -1, pourX: -1, nsw: min(P.nsw, 0.7), lightNew: P.n - 3 });\n}\n\n// Down to the yard, rig, hoist, slew over, lower, set down (or pour), up again.\nfunction step(P) {\n  const T = P.ph, type = P.load;\n  if (T === \"A\") go(P, \"B\", 0.5, {});\n  else if (T === \"B\") (P.load = P.top && P.stage > 2 ? (P.stage = 0) : P.stage), go(P, \"C\", 2.8, { hy: HTOP });\n  else if (T === \"C\") go(P, \"D\", 2.4, { th: P.th + PI, r: MX - DROP[type] });\n  else if (T === \"D\") go(P, \"E\", 1.5, { hy: type === 3 ? bucketHy(P) : deckY(P) - 4 - LH[type] });\n  else if (T === \"E\") {\n    if (type === 3) (P.pourX = BX0), go(P, \"P\", 3, { r: MX - BX1 + 2 });\n    else {\n      // Set down: the panel goes into the core, rebar and formwork lie on the deck.\n      const x = round(tip(P)[0]);\n      if (type) (P.item = type), (P.ix = x), type \u003c 2 ? (P.cage = 0) : (P.form = 0);\n      for (const w of P.wk) w.tx = x + (rnd() - 0.5) * 10;\n      (P.stage = max(P.stage, type + 1)), (P.load = -1), go(P, \"F\", 0.9, {});\n    }\n  } else if (T === \"P\" || T === \"I\") finishFloor(P), go(P, \"F\", 0.4, {});\n  else if (T === \"F\") go(P, \"G\", 0.5, { hy: P.hy - 12 });\n  else (P.load = -1), go(P, \"A\", 1.5, { th: (floor(P.th / TAU + 1e-3) + 1) * TAU, r: PICK_R, hy: PICK_Y - LH[P.stage] - 3 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nf = round(cl(k[2], 9, 13));\n  if (nf !== P.nk) {\n    // A new count of floors: the hook keeps its place over the deck.\n    const sh = (nf - P.n) * FH;\n    P.nk = P.n = nf;\n    P.top = 0;\n    if (P.ph === \"I\") (P.hy = bucketHy(P)), (P.pourX = BX0), go(P, \"I\", 3, { r: MX - BX1 + 2 });\n    else if (\"EPFG\".includes(P.ph)) (P.hy -= sh), (P.f0[2] -= sh), (P.f1[2] -= sh);\n  }\n  P.w = cl(k[3], -1, 1);\n  const t = (P.t += d), k0 = cl(k[0], 0, 1);\n  P.rt += rd;\n  // The evening deepens a little and comes back once every minute and a half.\n  P.h = k0 + (1 - k0) * 0.05 * (1 - cos((TAU * t) / 90));\n  // K1 tap: everything for the floor is in place at once and the deck pours.\n  if (input.btnPressed && input.btnPressed[0] && P.pourX \u003c 0 && !P.top) Object.assign(P, { pourBtn: 1, pourX: BX0, stage: 3, cage: 1, form: 1 });\n  const lin = min(1, (P.pt += d) / P.pd), u = sm(0, 1, lin), pour = P.ph === \"P\" || P.ph === \"I\";\n  P.th = mix(P.f0[0], P.f1[0], u);\n  P.r = mix(P.f0[1], P.f1[1], pour ? lin : u);\n  P.hy = mix(P.f0[2], P.f1[2], u);\n  if (pour) P.pourX = max(P.pourX, tip(P)[0] + 2);\n  if (lin >= 1) step(P);\n  if (P.pourBtn && (P.pourX += 30 * d) > BX1) (P.pourBtn = 0), finishFloor(P);\n  // The load swings on its cable when the trolley speeds up or slows, and in the wind.\n  const [tx, ty] = tip(P), L = max(4, P.hy - ty);\n  if (d > 0) {\n    const vx = (tx - P.ptx) / d, ax = cl((vx - P.vx) / d, -30, 30), eq = P.w * (0.06 + 0.04 * sin(t * 1.7)) * (P.load >= 0 ? 1 : 1.6);\n    P.swv += (-(110 / L) * (P.sw - eq) - (0.5 * ax) / L - 1.4 * P.swv) * d;\n    P.sw = cl(P.sw + P.swv * d, -0.3, 0.3);\n    [P.ptx, P.vx] = [tx, vx];\n  }\n  // The rigger steadies the load before it goes up.\n  if (P.ph === \"B\") (P.sw *= 1 - min(1, 5 * d)), (P.swv *= 1 - min(1, 5 * d));\n  P.swx = cl(L * sin(P.sw), -2.5, 2.5);\n  // The rebar is tied up the columns and the formwork goes round them.\n  if (P.stage > 1) P.cage = min(1, P.cage + d * 0.3);\n  if (P.stage > 2) P.form = min(1, P.form + d * 0.3);\n  // A floor switches its lights on or off together.\n  for (let i = 0; i \u003c NMAX; i++) P.onT[i] += rd;\n  if ((P.nsw -= d) \u003c= 0) {\n    const f = P.lightNew >= 0 ? P.lightNew : floor(rnd() * max(1, P.n - 2));\n    P.on[f] = P.lightNew >= 0 ? 1 : 1 - P.on[f];\n    Object.assign(P, { lightNew: -1, nsw: 1.6 + rnd() * 2 }).onT[f] = 0;\n  }\n  // Welding on the deck, and its sparks falling down the face.\n  if ((P.weld -= d) \u003c= 0) (P.welding = 1 - P.welding), (P.weld = P.welding ? 1.4 + rnd() * 1.6 : 0.4 + rnd() * 0.8);\n  const wy = deckY(P) - 2;\n  if (P.welding) for (let n = 0; n \u003c 4; n++) if (rnd() \u003c d * 18) P.sp.push([18 + rnd(), wy, (rnd() - 0.5) * 14, -4 - rnd() * 7, 1 + rnd() * 0.9, 18.5, wy]);\n  P.sp = P.sp.filter((s) => ((s[5] = s[0]), (s[6] = s[1]), (s[3] += 46 * d), (s[0] += s[2] * d), (s[1] += s[3] * d), (s[4] -= d) > 0 && s[1] \u003c GY));\n  // Workers walk about the deck.\n  for (const w of P.wk)\n    if (abs(w.tx - w.x) > 0.3) w.x = cl(w.x + cl(w.tx - w.x, -4 * d, 4 * d), 5, 37);\n    else if ((w.wait -= d) \u003c= 0) (w.tx = 6 + rnd() * 30), (w.wait = 1 + rnd() * 3);\n  // The mixer comes in for the bucket and backs out after the pour.\n  P.mix += cl((P.stage >= 2 && !P.top ? 2 : -26) - P.mix, -9 * d, 9 * d);\n  // Cars along the street.\n  if ((P.ncar -= d) \u003c= 0) (P.ncar = 2 + rnd() * 4), P.cars.push(rnd() \u003c 0.5 ? [-8, 11 + rnd() * 6, floor(rnd() * 4)] : [W + 1, -11 - rnd() * 6, floor(rnd() * 4)]);\n  P.cars = P.cars.filter((c) => ((c[0] += c[1] * d), c[0] > -12 && c[0] \u003c W + 12));\n  // Clouds drift with the wind.\n  P.cx += (1.5 + 9 * P.w) * d;\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\n// A surface: its own colour under the light that falls on that LED.\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\n// A lamp's glow round it, and a worker three LEDs tall.\nconst glow = (x, y, c, k) => {\n  for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (i || j) add(x + i, y + j, c, k / (i * i + j * j));\n};\nconst man = (x, y, head = [250, 250, 240]) => (sur(x, y, 50, 56, 90), sur(x, y - 1, 255, 130, 20), surc(x, y - 2, head));\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.2 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\n\n// Sky, sun and the city beyond, kept until the evening moves on.\nfunction sky(P, K) {\n  const h = P.h, B = P.bg;\n  if (round(h * 300) === P.bgKey) return F.set(B);\n  P.bgKey = round(h * 300);\n  const row = P.row, night = sm(0.4, 0.9, h), vis = 1 - sm(0.78, 0.95, h);\n  for (let y = 0; y \u003c H; y++) {\n    const f = min(1, y / GY), a = f \u003c 0.5 ? 0 : 3, u = f \u003c 0.5 ? f / 0.5 : (f - 0.5) / 0.5;\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(K[a + c], K[a + 3 + c], a ? u * u : sm(0, 1, u));\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    if (y >= P.sky[x]) {\n      const win = night * (hash(x, y * 3) \u003c 0.16 && y & 1 ? 1 : 0);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = mix(K[3 + c], K[6 + c], 0.55) * 0.6 * (x & 1 ? 1 : 0.86) + win * [210, 160, 90][c];\n      continue;\n    }\n    const d = Math.hypot(x - 54.5, y - 61.5 - 52 * h), g = vis * (0.55 * exp(-((d - 3.6) ** 2) / 50) + 0.3 * exp(-d / 16));\n    for (let c = 0; c \u003c 3; c++) B[o + c] = d \u003c 3.6 && vis > 0 ? mix(row[y * 3 + c], K[9 + c], vis) : row[y * 3 + c] + K[9 + c] * g * 0.7;\n  }\n  F.set(B);\n}\n\nfunction clouds(P, K) {\n  const cover = 0.56 - 0.18 * abs(P.w), C = P.cloud;\n  for (let y = 0; y \u003c 100; y++) {\n    const ty = floor(y * 0.6) & 63, fade = 1 - sm(50, 100, y);\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= P.sky[x]) continue;\n      const v = C[(ty \u003c\u003c 7) | (floor(x + P.cx) & 127)], a = cl((v - cover) * 7, 0, 1) * fade, lt = cl(1.25 - (v - cover) * 4 + (y - 40) / 120, 0, 1);\n      if (a > 0.01) put(x, y, [mix(K[15], K[12], lt), mix(K[16], K[13], lt), mix(K[17], K[14], lt)], a * 0.92);\n    }\n  }\n}\n\n// The light on every surface: the day, cloud shadows, the floodlights after dusk.\nfunction light(P, K) {\n  const sunA = 1 - sm(0.45, 0.85, P.h), fon = sm(0.3, 0.55, P.h), FLb = P.fl, C = P.cloud;\n  const cover = 0.5 - 0.18 * abs(P.w), [tx, ty] = tip(P), hx = tx + P.swx * 0.5;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, v = C[((floor(y * 0.25 + 20) & 63) \u003c\u003c 7) | (floor(x * 0.8 + P.cx * 2.2 + 40) & 127)];\n    let fl = 0;\n    if (fon > 0) {\n      const dx = x + 0.5 - LX, dy = y + 0.5 - LY, dd = Math.hypot(dx, dy) + 0.01, ca = (dx * AX + dy * AY) / dd;\n      fl = (exp((ca - 1) / 0.03) * 1.2) / (1 + (dd / 60) ** 2);\n      if (y > ty + 1) {\n        const q = (x + 0.5 - hx) / (1.2 + 0.16 * (y - ty));\n        fl += (exp(-q * q) * 0.7) / (1 + ((y - ty) / 90) ** 2);\n      }\n      fl *= fon;\n    }\n    FLb[i] = fl;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[18 + c] * (1 - 0.45 * sunA * cl((v - cover) * 5, 0, 1)) + fl * FLC[c];\n  }\n}\n\n// The yard's gravel, the kerb, the street and its markings.\nfunction ground() {\n  for (let i = GY * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, n = 0.82 + 0.3 * hash(x, y + 900);\n    y === 126 && (x + 6) % 8 \u003c 2 ? sur(x, y, 190, 180, 120) : y > 123 ? sur(x, y, 62 * n, 60 * n, 66 * n) : y > 122 ? sur(x, y, 150, 146, 140) : sur(x, y, 150 * n, 126 * n, 98 * n);\n  }\n}\n\n// The concrete frame, its windows, and the floor going up on the deck.\nfunction building(P) {\n  const n = P.n, dk = deckY(P), g = n - 2, night = sm(0.4, 0.9, P.h), row = P.row;\n  for (let y = dk; y \u003c GY; y++) {\n    const k = floor((GY - 1 - y) / FH), ry = y - (GY - (k + 1) * FH);\n    for (let x = BX0; x \u003c= BX1; x++) {\n      const cx = (x - BX0) % 7, b = floor((x - BX0) / 7), bx = cx - 2;\n      if (ry === 0) sur(x, y, 228, 220, 206);\n      else if (cx \u003c 2) sur(x, y, 206, 198, 184);\n      else if (ry === 1) k \u003c g ? sur(x, y, 78, 86, 102) : sur(x, y, 178, 172, 162);\n      else if (b === CORE) sur(x, y, 196, 190, 180, (x + y) % 9 === 0 ? 0.8 : 0.95);\n      else if (k \u003c g && bx === 2) sur(x, y, 80, 80, 88);\n      else if (k \u003c g) {\n        // Glass: the sky in it, or a lit room behind.\n        const o = (y * W + x) * 3, rr = cl(round(y * 0.3 + 4), 0, GY - 1) * 3;\n        let on = P.on[k] ? hash(k, b * 7 + 1) \u003c 0.92 : hash(k, b * 7 + 3) \u003c 0.1 + 0.6 * night;\n        if (on && P.on[k] && P.onT[k] \u003c 0.5) on = hash(k * 13 + b, floor(P.onT[k] * 22)) > 0.45;\n        const lc = hash(k, b + 40) \u003c 0.75 ? [255, 184, 88] : [200, 228, 255], a = on ? 0.9 + 0.1 * night : 0;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(row[rr + c] * 0.42 + c * 5, lc[c], a) * (ry === 2 ? 1.12 : 1);\n      } else {\n        // An open floor: dark inside, the back columns, a work lamp at night.\n        if (night > 0.05 && bx === 2 && ry === 2 && hash(k, b) \u003c 0.6) put(x, y, [255, 214, 150].map((v) => v * night));\n        else sur(x, y, 60, 54, 52, bx === 2 ? 0.6 : 0.28);\n      }\n    }\n  }\n  // Ties from the mast to the frame.\n  for (let k = 2; k \u003c n; k += 3) for (let x = BX1 + 1; x \u003c MX - 2; x++) sur(x, GY - (k + 1) * FH + 1, 200, 170, 60);\n\n  // The floor on the deck: starter bars, the core panel, the rebar cages, the formwork.\n  const top = dk - FH, st = P.top ? 0 : P.stage;\n  if (st > 0) for (let y = top + 1; y \u003c dk; y++) for (let x = BX0 + 30; x \u003c= BX0 + 34; x++) sur(x, y, 176, 172, 164, x === BX0 + 32 ? 0.8 : 1);\n  for (let ci = 0; ci \u003c 6; ci++) {\n    const x = BX0 + ci * 7;\n    for (let j = 1; j \u003c= max(2, st > 1 ? round(P.cage * 5) : 0); j++) sur(x, dk - j, 176, 96, 50), j & 1 && sur(x + 1, dk - j, 130, 76, 44);\n    if (st > 2 && ci / 6 \u003c P.form) for (let j = 1; j \u003c FH; j++) sur(x, dk - j, 218, 162, 84), sur(x + 1, dk - j, 196, 140, 70);\n  }\n  if (st > 2) for (let x = BX0; x \u003c= BX0 + 36 * P.form; x++) for (let j = 0; j \u003c ((x - BX0) % 7 === 4 ? FH : 1); j++) j ? sur(x, top + j, 150, 150, 156, 0.8) : sur(x, top, 214, 156, 80);\n  if (P.pourX >= 0 && !P.top) for (let x = BX0; x \u003c= min(BX1, P.pourX); x++) sur(x, top, 140, 140, 150), (x - BX0) % 7 \u003c 2 && sur(x, top + 1, 140, 140, 150, 0.9);\n  if (P.item > 0) drawLoad(P.item, P.ix, dk - LH[P.item]);\n  // Topped out: a little fir tree on the roof.\n  if (P.top) for (let j = 0; j \u003c 5; j++) for (let i = -j; i \u003c= j; i++) sur(24 + i, dk - 6 + j, 40, 120, 60);\n  // The workers on the deck in hi-vis, and the welder by a column.\n  for (const w of P.wk) man(w.x, dk - 1);\n  man(17, dk - 1, [60, 60, 70]);\n}\n\n// One of the four loads, centred on x with its top on row y0.\nfunction drawLoad(type, cx, y0) {\n  const w = LW[type], h = LH[type], x0 = round(cx - w / 2), y = round(y0);\n  for (let j = 0; j \u003c h; j++)\n    for (let i = 0; i \u003c w; i++) {\n      const X = x0 + i, Y = y + j;\n      if (type === 0) (i \u003c 2 || i > 4 || !j || j > 3) && sur(X, Y, 150, 146, 140, i && j ? 1 : 1.25);\n      else if (type === 1) sur(X, Y, i === 2 || i === 8 ? 60 : 186, i === 2 || i === 8 ? 54 : 92, 48, j ? 0.72 : 1);\n      else if (type === 2) sur(X, Y, 226, 170, 92, j & 1 ? 0.55 : 1);\n      else if (i >= (j >= h - 2 ? 1 : 0) && i \u003c w - (j >= h - 2 ? 1 : 0)) sur(X, Y, 120, 120, 128, j === 1 ? 0.6 : j === 0 ? 1.3 : 1);\n    }\n  if (type === 3) sur(x0 + 2, y + h, 70, 70, 76);\n}\n\n// The hook block, its cable and slings, and whatever it carries.\nfunction hook(P) {\n  const [tx, ty] = tip(P), hx = tx + P.swx, hy = P.hy;\n  line(tx, ty + 1, hx, hy - 1, [120, 120, 130], 0.9);\n  for (let i = -1; i \u003c= 1; i++) surc(hx + i, hy - 1, YEL);\n  sur(hx, hy, 60, 60, 66), sur(hx, hy + 1, 90, 90, 96);\n  if (P.load >= 0) {\n    const w = LW[P.load] / 2 - 0.5;\n    line(hx, hy + 1, hx - w, hy + 3, [110, 110, 116], 0.8), line(hx, hy + 1, hx + w, hy + 3, [110, 110, 116], 0.8);\n    drawLoad(P.load, hx + 0.5, hy + 3);\n    // Concrete runs from the bucket into the forms.\n    if (P.ph === \"P\" || P.ph === \"I\") for (let j = hy + 10; j \u003c deckY(P) - FH; j++) sur(hx + 0.5, j, 140, 140, 150);\n  }\n}\n\n// The yard: stock waiting by the crane, the load being rigged, the floodlight tower.\nfunction yard(P) {\n  drawLoad(2, 53, 115), drawLoad(1, 54, 118);\n  if (P.ph === \"A\" || P.ph === \"B\") {\n    const s = P.stage, x = MX + PICK_R - LW[s] / 2 - 2, arm = P.ph === \"B\" ? (P.pt * 6) & 1 : 0;\n    drawLoad(s, MX + PICK_R + 0.5, PICK_Y - LH[s]);\n    man(x, PICK_Y - 1), sur(x + 1, PICK_Y - 2 - arm, 255, 130, 20);\n  }\n  for (let y = LY; y \u003c 122; y++) sur(62, y, 120, 120, 126);\n  const fon = sm(0.3, 0.55, P.h);\n  for (let x = 59; x \u003c= 62; x++) put(x, 83, [90, 90, 96]), put(x, 84, x \u003c 62 ? [70 + 185 * fon, 70 + 180 * fon, 76 + 154 * fon] : [90, 90, 96]);\n}\n\n// The crane: mast, ties, slewing ring, cab, tower head, jib and counter-jib.\nfunction crane(P) {\n  const c = cos(P.th), sn = sin(P.th), blink = P.rt % 1.2 \u003c 0.55, fon = sm(0.3, 0.55, P.h);\n  const jib = () => {\n    for (let s = 0; s \u003c= JL; s += 0.3) {\n      // Swung towards you the tip is nearer and bigger, swung away it shrinks.\n      const sc = 1 + (0.45 * s * sn) / JL, px = MX + s * c, py = JY - s * sn * 0.1, ht = (3 - (1.2 * s) / JL) * sc, tri = abs(((s / 2.4) % 2) - 1), wd = sn * 1.2 * sc;\n      surc(px - wd, py, YEL, 0.85), surc(px + wd, py, YEL, 0.85), surc(px, py - ht, YEL), surc(px + wd * (1 - tri), py - tri * ht, YEL, 0.75);\n    }\n  };\n  const counter = () => {\n    for (let s = 0; s \u003c= CJL; s += 0.3) {\n      const px = MX - s * c, py = JY + s * sn * 0.1;\n      surc(px, py, YEL, 0.85), surc(px, py - 1, YEL, s % 2 \u003c 0.6 ? 0.8 : 0);\n      if (s > 6 && s \u003c 8.5) for (let j = 1; j \u003c= 2; j++) sur(px, py - 1 - j, 80, 84, 92);\n      if (s > CJL - 5) for (let j = 1; j \u003c= 4; j++) sur(px, py + j, 190, 184, 172, (floor(s) & 1) === 0 ? 0.8 : 1);\n    }\n  };\n  const pend = () => {\n    line(MX, APEX + 1, MX + 28 * c, JY - 28 * sn * 0.1 - 2.2, [110, 104, 96], 0.8);\n    line(MX, APEX + 1, MX - CJL * c, JY + CJL * sn * 0.1 - 1, [110, 104, 96], 0.8);\n  };\n  const cab = () => {\n    for (let q = 0, i, j; q \u003c 12; q++)\n      (i = (q % 3) - 1), (j = (q / 3) | 0), j % 3 && i > -1 ? put(MX + 3.5 * c + i, JY + 1 + j, P.h > 0.5 ? [255 * fon, 226 * fon, 160 * fon] : [110, 150, 196]) : surc(MX + 3.5 * c + i, JY + 1 + j, [240, 232, 210]);\n  };\n  // What faces away is drawn first.\n  if (sn \u003c 0) jib(), pend(), cab();\n  else counter(), pend();\n  // The mast: two chords and a lattice of diagonals.\n  for (let y = JY + 3; y \u003c 118; y++) {\n    surc(MX - 2, y, YEL, 0.72), surc(MX + 2, y, YEL);\n    for (let xi = 1; xi \u003c= 3; xi++) if (((y + xi) & 3) === 0 || ((y - xi) & 3) === 0) surc(MX - 2 + xi, y, YEL, 0.8);\n  }\n  for (let x = MX - 4; x \u003c= MX + 4; x++) sur(x, 117, 170, 166, 160), sur(x, 118, 170, 166, 160), sur(x, 119, 170, 166, 160), abs(x - MX) \u003c 4 && (sur(x, JY + 1, 80, 80, 86), sur(x, JY + 2, 110, 110, 116));\n  // The tower head.\n  for (let y = APEX; y \u003c= JY - 3; y++) {\n    const hw = (1.6 * (y - APEX)) / (JY - 3 - APEX);\n    surc(MX - hw, y, YEL), surc(MX + hw, y, YEL);\n    if ((y & 1) === 0) for (let x = round(MX - hw); x \u003c= MX + hw; x++) surc(x, y, YEL, 0.8);\n  }\n  if (sn \u003c 0) counter(), pend();\n  else jib(), pend(), cab();\n  // The trolley, and the warning lights on the head and at the jib tip.\n  const [tx, ty] = tip(P);\n  sur(tx - 1, ty, 90, 90, 96), sur(tx, ty, 90, 90, 96), sur(tx + 1, ty, 90, 90, 96);\n  for (const [x, y] of [[MX, APEX - 1], [MX + JL * c, JY - JL * sn * 0.1 - 2]]) {\n    put(x, y, blink ? [255, 40, 28] : [110, 20, 16]);\n    if (blink) glow(x, y, [255, 30, 20], 0.12 + 0.3 * fon);\n  }\n}\n\n// The mixer, its drum turning.\nfunction mixer(P) {\n  const x0 = round(P.mix), night = sm(0.4, 0.9, P.h);\n  if (x0 \u003c -24) return;\n  for (let y = 115; y \u003c= 121; y++)\n    for (let i = 0; i \u003c 13; i++) {\n      const e = ((i - 6) / 6.8) ** 2 + ((y - 118 + (i - 6) * 0.18) / 3.4) ** 2;\n      if (e \u003c 1) sur(x0 + i, y, ...((((i * 0.7 + y * 1.4 - P.t * 9) % 4) + 4) % 4 \u003c 2 ? [240, 120, 40] : [230, 228, 220]), 1 - 0.3 * e);\n    }\n  for (let i = 0; i \u003c 20; i++) sur(x0 + i, 122, 70, 70, 76);\n  for (let y = 116; y \u003c 122; y++) for (let i = 15; i \u003c 20; i++) sur(x0 + i, y, ...(y \u003c 119 && i > 16 ? [110, 150, 190] : [230, 60, 40]));\n  for (const i of [2, 5, 16]) sur(x0 + i, 123, 30, 30, 34), sur(x0 + i + 1, 123, 30, 30, 34);\n  if (night > 0.1) add(x0 + 20, 120, [255, 240, 200], night);\n}\n\nfunction cars(P) {\n  const night = sm(0.35, 0.9, P.h), cols = [[200, 40, 36], [220, 220, 226], [40, 80, 170], [60, 64, 70]];\n  for (const [cx, v, ci] of P.cars) {\n    const x0 = round(cx), fx = v > 0 ? x0 + 6 : x0;\n    for (let i = 0; i \u003c 21; i++) i \u003c 14 ? surc(x0 + (i >> 1), 125 + (i & 1), cols[ci]) : i \u003c 17 && sur(x0 + i - 12, 124, 120, 150, 180);\n    add(fx, 125, [255, 250, 220], 0.3 + night), add(x0 + 6 - fx + x0, 125, [255, 20, 10], 0.2 + night);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  const hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  // The hook goes behind the frame when the jib swings away from you.\n  const behind = sin(P.th) \u003c -0.15, y = deckY(P) - 2, FLb = P.fl;\n  sky(P, K), clouds(P, K), light(P, K), ground(), behind && hook(P), building(P), yard(P), crane(P), mixer(P), cars(P), behind || hook(P);\n  // The welding arc, its sparks, and the floodlight beams in the dusk air.\n  if (P.welding) put(18, y, [235, 244, 255]), glow(18, y, [160, 190, 255], 0.36 + 0.24 * rnd());\n  for (const [x, y, , , l, px, py] of P.sp) put(px, py, [255, 120, 30], min(1, l * 1.4) * 0.6), put(x, y, [255, 170 + 80 * min(1, l), 70 * min(1, l)], min(1, l * 1.4));\n  if (P.h > 0.3) for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (FLb[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += FLb[i] * 22 * FLC[c];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-tower-crane","type":"code","name":"tower-crane","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tower Crane\n// Family:  construction\n// Idea:    A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower cranes that stand beside a rising concrete frame\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1\n//\n// Knob 1: Dusk. From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit.\n// Knob 2: Speed. At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower.\n// Knob 3: Floors. How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof.\n// Knob 4: Wind. Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable.\n// Buttons: K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street level, one storey, and the most floors that fit under the jib.\nconst [GY, FH, NMAX] = [114, 6, 13];\n// The frame, x 3 to 39: six columns two LEDs wide, five bays, the one by the crane the lift core.\nconst [BX0, BX1, CORE] = [3, 39, 4];\n// Mast centre, the jib's bottom chord at the root, jib and counter-jib lengths, top of the tower head.\nconst [MX, JY, JL, CJL, APEX] = [46, 15, 42, 15, 3];\n// The hook's highest row, the radius it picks at over the yard, the yard's load line.\nconst [HTOP, PICK_R, PICK_Y] = [21, 11, 120];\n// Wall panel, rebar, formwork, bucket: width, height, the column it is set down on.\nconst LW = [8, 11, 9, 5], LH = [5, 2, 4, 6], DROP = [35, 20, 12, 6];\n// Sky top, middle, horizon; sun; lit and shaded cloud; light on things. Afternoon to night.\nconst KEYS = [\n  [34, 72, 156, 128, 142, 186, 255, 190, 112, 255, 236, 170, 255, 236, 204, 150, 130, 160, 1, 0.9, 0.74],\n  [30, 50, 130, 168, 108, 140, 255, 140, 62, 255, 168, 78, 255, 170, 116, 104, 70, 108, 0.86, 0.64, 0.48],\n  [16, 20, 70, 64, 44, 96, 196, 86, 78, 226, 90, 52, 176, 92, 104, 46, 36, 66, 0.44, 0.38, 0.46],\n  [4, 6, 22, 10, 14, 40, 44, 34, 60, 0, 0, 0, 42, 36, 56, 16, 16, 30, 0.2, 0.21, 0.3],\n];\nconst FLC = [1, 0.94, 0.82];\nconst YEL = [255, 196, 22];\n// The floodlight tower in the yard and where it is aimed.\nconst [LX, LY] = [60.5, 84.5];\nconst [AX, AY] = (([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)])([-34, 31]);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F(N * 3), bg: F(N * 3), lm: F(N * 3), fl: F(N), row: F(H * 3), cloud: F(128 * 64), sky: new Int16Array(W),\n    t: 0, rt: 0, nk: -1, stage: 3, cage: 1, form: 1, item: -1, lightNew: -1, th: PI, r: 40, load: 3, ph: \"I\", sw: 0, swv: 0, vx: 0, ptx: 6,\n    on: new Uint8Array(NMAX), onT: F(NMAX).fill(9), nsw: 2.4, cx: 0, sp: [], weld: 0.4, welding: 0, wk: [], mix: 2, cars: [], ncar: 1.4,\n  });\n  // Clouds: a strip of soft noise that wraps every 128 columns.\n  for (let i = 0; i \u003c 128 * 64; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.05, y * 0.13) + 0.3 * vn(X * 0.13, y * 0.3 + 9) + 0.15 * vn(X * 0.4, y * 0.6 + 3);\n    P.cloud[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  // The city behind: blocks of four to nine columns.\n  for (let x = 0, w = 0, h = 0; x \u003c W; x++, w--) w > 0 || ((w = 4 + floor(rnd() * 6)), (h = 98 + floor(rnd() * 12))), (P.sky[x] = h);\n  for (let k = 0; k \u003c NMAX; k++) (P.on[k] = rnd() \u003c 0.35 ? 1 : 0), k \u003c 3 && P.wk.push({ x: 8 + k * 11 + rnd() * 4, tx: 8 + rnd() * 28, wait: rnd() * 2 });\n}\n\n// A move of the crane: slew angle, trolley radius and hook row, eased to where they go.\nfunction go(P, ph, dur, to) {\n  Object.assign(P, { ph, pt: 0, pd: dur, f0: [P.th, P.r, P.hy], f1: [to.th ?? P.th, to.r ?? P.r, to.hy ?? P.hy] });\n}\n\nconst deckY = (P) => GY - P.n * FH;\nconst tip = (P) => [MX + P.r * cos(P.th), JY + 1 - P.r * sin(P.th) * 0.1];\nconst bucketHy = (P) => deckY(P) - FH - 2 - LH[3] - 3;\n\nfunction finishFloor(P) {\n  if (P.n \u003c NMAX) P.n++;\n  else P.top = 1;\n  // The floor that has just been glazed lights up a moment later.\n  Object.assign(P, { stage: 0, cage: 0, form: 0, item: -1, pourX: -1, nsw: min(P.nsw, 0.7), lightNew: P.n - 3 });\n}\n\n// Down to the yard, rig, hoist, slew over, lower, set down (or pour), up again.\nfunction step(P) {\n  const T = P.ph, type = P.load;\n  if (T === \"A\") go(P, \"B\", 0.5, {});\n  else if (T === \"B\") (P.load = P.top && P.stage > 2 ? (P.stage = 0) : P.stage), go(P, \"C\", 2.8, { hy: HTOP });\n  else if (T === \"C\") go(P, \"D\", 2.4, { th: P.th + PI, r: MX - DROP[type] });\n  else if (T === \"D\") go(P, \"E\", 1.5, { hy: type === 3 ? bucketHy(P) : deckY(P) - 4 - LH[type] });\n  else if (T === \"E\") {\n    if (type === 3) (P.pourX = BX0), go(P, \"P\", 3, { r: MX - BX1 + 2 });\n    else {\n      // Set down: the panel goes into the core, rebar and formwork lie on the deck.\n      const x = round(tip(P)[0]);\n      if (type) (P.item = type), (P.ix = x), type \u003c 2 ? (P.cage = 0) : (P.form = 0);\n      for (const w of P.wk) w.tx = x + (rnd() - 0.5) * 10;\n      (P.stage = max(P.stage, type + 1)), (P.load = -1), go(P, \"F\", 0.9, {});\n    }\n  } else if (T === \"P\" || T === \"I\") finishFloor(P), go(P, \"F\", 0.4, {});\n  else if (T === \"F\") go(P, \"G\", 0.5, { hy: P.hy - 12 });\n  else (P.load = -1), go(P, \"A\", 1.5, { th: (floor(P.th / TAU + 1e-3) + 1) * TAU, r: PICK_R, hy: PICK_Y - LH[P.stage] - 3 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nf = round(cl(k[2], 9, 13));\n  if (nf !== P.nk) {\n    // A new count of floors: the hook keeps its place over the deck.\n    const sh = (nf - P.n) * FH;\n    P.nk = P.n = nf;\n    P.top = 0;\n    if (P.ph === \"I\") (P.hy = bucketHy(P)), (P.pourX = BX0), go(P, \"I\", 3, { r: MX - BX1 + 2 });\n    else if (\"EPFG\".includes(P.ph)) (P.hy -= sh), (P.f0[2] -= sh), (P.f1[2] -= sh);\n  }\n  P.w = cl(k[3], -1, 1);\n  const t = (P.t += d), k0 = cl(k[0], 0, 1);\n  P.rt += rd;\n  // The evening deepens a little and comes back once every minute and a half.\n  P.h = k0 + (1 - k0) * 0.05 * (1 - cos((TAU * t) / 90));\n  // K1 tap: everything for the floor is in place at once and the deck pours.\n  if (input.btnPressed && input.btnPressed[0] && P.pourX \u003c 0 && !P.top) Object.assign(P, { pourBtn: 1, pourX: BX0, stage: 3, cage: 1, form: 1 });\n  const lin = min(1, (P.pt += d) / P.pd), u = sm(0, 1, lin), pour = P.ph === \"P\" || P.ph === \"I\";\n  P.th = mix(P.f0[0], P.f1[0], u);\n  P.r = mix(P.f0[1], P.f1[1], pour ? lin : u);\n  P.hy = mix(P.f0[2], P.f1[2], u);\n  if (pour) P.pourX = max(P.pourX, tip(P)[0] + 2);\n  if (lin >= 1) step(P);\n  if (P.pourBtn && (P.pourX += 30 * d) > BX1) (P.pourBtn = 0), finishFloor(P);\n  // The load swings on its cable when the trolley speeds up or slows, and in the wind.\n  const [tx, ty] = tip(P), L = max(4, P.hy - ty);\n  if (d > 0) {\n    const vx = (tx - P.ptx) / d, ax = cl((vx - P.vx) / d, -30, 30), eq = P.w * (0.06 + 0.04 * sin(t * 1.7)) * (P.load >= 0 ? 1 : 1.6);\n    P.swv += (-(110 / L) * (P.sw - eq) - (0.5 * ax) / L - 1.4 * P.swv) * d;\n    P.sw = cl(P.sw + P.swv * d, -0.3, 0.3);\n    [P.ptx, P.vx] = [tx, vx];\n  }\n  // The rigger steadies the load before it goes up.\n  if (P.ph === \"B\") (P.sw *= 1 - min(1, 5 * d)), (P.swv *= 1 - min(1, 5 * d));\n  P.swx = cl(L * sin(P.sw), -2.5, 2.5);\n  // The rebar is tied up the columns and the formwork goes round them.\n  if (P.stage > 1) P.cage = min(1, P.cage + d * 0.3);\n  if (P.stage > 2) P.form = min(1, P.form + d * 0.3);\n  // A floor switches its lights on or off together.\n  for (let i = 0; i \u003c NMAX; i++) P.onT[i] += rd;\n  if ((P.nsw -= d) \u003c= 0) {\n    const f = P.lightNew >= 0 ? P.lightNew : floor(rnd() * max(1, P.n - 2));\n    P.on[f] = P.lightNew >= 0 ? 1 : 1 - P.on[f];\n    Object.assign(P, { lightNew: -1, nsw: 1.6 + rnd() * 2 }).onT[f] = 0;\n  }\n  // Welding on the deck, and its sparks falling down the face.\n  if ((P.weld -= d) \u003c= 0) (P.welding = 1 - P.welding), (P.weld = P.welding ? 1.4 + rnd() * 1.6 : 0.4 + rnd() * 0.8);\n  const wy = deckY(P) - 2;\n  if (P.welding) for (let n = 0; n \u003c 4; n++) if (rnd() \u003c d * 18) P.sp.push([18 + rnd(), wy, (rnd() - 0.5) * 14, -4 - rnd() * 7, 1 + rnd() * 0.9, 18.5, wy]);\n  P.sp = P.sp.filter((s) => ((s[5] = s[0]), (s[6] = s[1]), (s[3] += 46 * d), (s[0] += s[2] * d), (s[1] += s[3] * d), (s[4] -= d) > 0 && s[1] \u003c GY));\n  // Workers walk about the deck.\n  for (const w of P.wk)\n    if (abs(w.tx - w.x) > 0.3) w.x = cl(w.x + cl(w.tx - w.x, -4 * d, 4 * d), 5, 37);\n    else if ((w.wait -= d) \u003c= 0) (w.tx = 6 + rnd() * 30), (w.wait = 1 + rnd() * 3);\n  // The mixer comes in for the bucket and backs out after the pour.\n  P.mix += cl((P.stage >= 2 && !P.top ? 2 : -26) - P.mix, -9 * d, 9 * d);\n  // Cars along the street.\n  if ((P.ncar -= d) \u003c= 0) (P.ncar = 2 + rnd() * 4), P.cars.push(rnd() \u003c 0.5 ? [-8, 11 + rnd() * 6, floor(rnd() * 4)] : [W + 1, -11 - rnd() * 6, floor(rnd() * 4)]);\n  P.cars = P.cars.filter((c) => ((c[0] += c[1] * d), c[0] > -12 && c[0] \u003c W + 12));\n  // Clouds drift with the wind.\n  P.cx += (1.5 + 9 * P.w) * d;\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\n// A surface: its own colour under the light that falls on that LED.\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\n// A lamp's glow round it, and a worker three LEDs tall.\nconst glow = (x, y, c, k) => {\n  for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (i || j) add(x + i, y + j, c, k / (i * i + j * j));\n};\nconst man = (x, y, head = [250, 250, 240]) => (sur(x, y, 50, 56, 90), sur(x, y - 1, 255, 130, 20), surc(x, y - 2, head));\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.2 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\n\n// Sky, sun and the city beyond, kept until the evening moves on.\nfunction sky(P, K) {\n  const h = P.h, B = P.bg;\n  if (round(h * 300) === P.bgKey) return F.set(B);\n  P.bgKey = round(h * 300);\n  const row = P.row, night = sm(0.4, 0.9, h), vis = 1 - sm(0.78, 0.95, h);\n  for (let y = 0; y \u003c H; y++) {\n    const f = min(1, y / GY), a = f \u003c 0.5 ? 0 : 3, u = f \u003c 0.5 ? f / 0.5 : (f - 0.5) / 0.5;\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(K[a + c], K[a + 3 + c], a ? u * u : sm(0, 1, u));\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    if (y >= P.sky[x]) {\n      const win = night * (hash(x, y * 3) \u003c 0.16 && y & 1 ? 1 : 0);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = mix(K[3 + c], K[6 + c], 0.55) * 0.6 * (x & 1 ? 1 : 0.86) + win * [210, 160, 90][c];\n      continue;\n    }\n    const d = Math.hypot(x - 54.5, y - 61.5 - 52 * h), g = vis * (0.55 * exp(-((d - 3.6) ** 2) / 50) + 0.3 * exp(-d / 16));\n    for (let c = 0; c \u003c 3; c++) B[o + c] = d \u003c 3.6 && vis > 0 ? mix(row[y * 3 + c], K[9 + c], vis) : row[y * 3 + c] + K[9 + c] * g * 0.7;\n  }\n  F.set(B);\n}\n\nfunction clouds(P, K) {\n  const cover = 0.56 - 0.18 * abs(P.w), C = P.cloud;\n  for (let y = 0; y \u003c 100; y++) {\n    const ty = floor(y * 0.6) & 63, fade = 1 - sm(50, 100, y);\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= P.sky[x]) continue;\n      const v = C[(ty \u003c\u003c 7) | (floor(x + P.cx) & 127)], a = cl((v - cover) * 7, 0, 1) * fade, lt = cl(1.25 - (v - cover) * 4 + (y - 40) / 120, 0, 1);\n      if (a > 0.01) put(x, y, [mix(K[15], K[12], lt), mix(K[16], K[13], lt), mix(K[17], K[14], lt)], a * 0.92);\n    }\n  }\n}\n\n// The light on every surface: the day, cloud shadows, the floodlights after dusk.\nfunction light(P, K) {\n  const sunA = 1 - sm(0.45, 0.85, P.h), fon = sm(0.3, 0.55, P.h), FLb = P.fl, C = P.cloud;\n  const cover = 0.5 - 0.18 * abs(P.w), [tx, ty] = tip(P), hx = tx + P.swx * 0.5;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, v = C[((floor(y * 0.25 + 20) & 63) \u003c\u003c 7) | (floor(x * 0.8 + P.cx * 2.2 + 40) & 127)];\n    let fl = 0;\n    if (fon > 0) {\n      const dx = x + 0.5 - LX, dy = y + 0.5 - LY, dd = Math.hypot(dx, dy) + 0.01, ca = (dx * AX + dy * AY) / dd;\n      fl = (exp((ca - 1) / 0.03) * 1.2) / (1 + (dd / 60) ** 2);\n      if (y > ty + 1) {\n        const q = (x + 0.5 - hx) / (1.2 + 0.16 * (y - ty));\n        fl += (exp(-q * q) * 0.7) / (1 + ((y - ty) / 90) ** 2);\n      }\n      fl *= fon;\n    }\n    FLb[i] = fl;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[18 + c] * (1 - 0.45 * sunA * cl((v - cover) * 5, 0, 1)) + fl * FLC[c];\n  }\n}\n\n// The yard's gravel, the kerb, the street and its markings.\nfunction ground() {\n  for (let i = GY * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, n = 0.82 + 0.3 * hash(x, y + 900);\n    y === 126 && (x + 6) % 8 \u003c 2 ? sur(x, y, 190, 180, 120) : y > 123 ? sur(x, y, 62 * n, 60 * n, 66 * n) : y > 122 ? sur(x, y, 150, 146, 140) : sur(x, y, 150 * n, 126 * n, 98 * n);\n  }\n}\n\n// The concrete frame, its windows, and the floor going up on the deck.\nfunction building(P) {\n  const n = P.n, dk = deckY(P), g = n - 2, night = sm(0.4, 0.9, P.h), row = P.row;\n  for (let y = dk; y \u003c GY; y++) {\n    const k = floor((GY - 1 - y) / FH), ry = y - (GY - (k + 1) * FH);\n    for (let x = BX0; x \u003c= BX1; x++) {\n      const cx = (x - BX0) % 7, b = floor((x - BX0) / 7), bx = cx - 2;\n      if (ry === 0) sur(x, y, 228, 220, 206);\n      else if (cx \u003c 2) sur(x, y, 206, 198, 184);\n      else if (ry === 1) k \u003c g ? sur(x, y, 78, 86, 102) : sur(x, y, 178, 172, 162);\n      else if (b === CORE) sur(x, y, 196, 190, 180, (x + y) % 9 === 0 ? 0.8 : 0.95);\n      else if (k \u003c g && bx === 2) sur(x, y, 80, 80, 88);\n      else if (k \u003c g) {\n        // Glass: the sky in it, or a lit room behind.\n        const o = (y * W + x) * 3, rr = cl(round(y * 0.3 + 4), 0, GY - 1) * 3;\n        let on = P.on[k] ? hash(k, b * 7 + 1) \u003c 0.92 : hash(k, b * 7 + 3) \u003c 0.1 + 0.6 * night;\n        if (on && P.on[k] && P.onT[k] \u003c 0.5) on = hash(k * 13 + b, floor(P.onT[k] * 22)) > 0.45;\n        const lc = hash(k, b + 40) \u003c 0.75 ? [255, 184, 88] : [200, 228, 255], a = on ? 0.9 + 0.1 * night : 0;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(row[rr + c] * 0.42 + c * 5, lc[c], a) * (ry === 2 ? 1.12 : 1);\n      } else {\n        // An open floor: dark inside, the back columns, a work lamp at night.\n        if (night > 0.05 && bx === 2 && ry === 2 && hash(k, b) \u003c 0.6) put(x, y, [255, 214, 150].map((v) => v * night));\n        else sur(x, y, 60, 54, 52, bx === 2 ? 0.6 : 0.28);\n      }\n    }\n  }\n  // Ties from the mast to the frame.\n  for (let k = 2; k \u003c n; k += 3) for (let x = BX1 + 1; x \u003c MX - 2; x++) sur(x, GY - (k + 1) * FH + 1, 200, 170, 60);\n\n  // The floor on the deck: starter bars, the core panel, the rebar cages, the formwork.\n  const top = dk - FH, st = P.top ? 0 : P.stage;\n  if (st > 0) for (let y = top + 1; y \u003c dk; y++) for (let x = BX0 + 30; x \u003c= BX0 + 34; x++) sur(x, y, 176, 172, 164, x === BX0 + 32 ? 0.8 : 1);\n  for (let ci = 0; ci \u003c 6; ci++) {\n    const x = BX0 + ci * 7;\n    for (let j = 1; j \u003c= max(2, st > 1 ? round(P.cage * 5) : 0); j++) sur(x, dk - j, 176, 96, 50), j & 1 && sur(x + 1, dk - j, 130, 76, 44);\n    if (st > 2 && ci / 6 \u003c P.form) for (let j = 1; j \u003c FH; j++) sur(x, dk - j, 218, 162, 84), sur(x + 1, dk - j, 196, 140, 70);\n  }\n  if (st > 2) for (let x = BX0; x \u003c= BX0 + 36 * P.form; x++) for (let j = 0; j \u003c ((x - BX0) % 7 === 4 ? FH : 1); j++) j ? sur(x, top + j, 150, 150, 156, 0.8) : sur(x, top, 214, 156, 80);\n  if (P.pourX >= 0 && !P.top) for (let x = BX0; x \u003c= min(BX1, P.pourX); x++) sur(x, top, 140, 140, 150), (x - BX0) % 7 \u003c 2 && sur(x, top + 1, 140, 140, 150, 0.9);\n  if (P.item > 0) drawLoad(P.item, P.ix, dk - LH[P.item]);\n  // Topped out: a little fir tree on the roof.\n  if (P.top) for (let j = 0; j \u003c 5; j++) for (let i = -j; i \u003c= j; i++) sur(24 + i, dk - 6 + j, 40, 120, 60);\n  // The workers on the deck in hi-vis, and the welder by a column.\n  for (const w of P.wk) man(w.x, dk - 1);\n  man(17, dk - 1, [60, 60, 70]);\n}\n\n// One of the four loads, centred on x with its top on row y0.\nfunction drawLoad(type, cx, y0) {\n  const w = LW[type], h = LH[type], x0 = round(cx - w / 2), y = round(y0);\n  for (let j = 0; j \u003c h; j++)\n    for (let i = 0; i \u003c w; i++) {\n      const X = x0 + i, Y = y + j;\n      if (type === 0) (i \u003c 2 || i > 4 || !j || j > 3) && sur(X, Y, 150, 146, 140, i && j ? 1 : 1.25);\n      else if (type === 1) sur(X, Y, i === 2 || i === 8 ? 60 : 186, i === 2 || i === 8 ? 54 : 92, 48, j ? 0.72 : 1);\n      else if (type === 2) sur(X, Y, 226, 170, 92, j & 1 ? 0.55 : 1);\n      else if (i >= (j >= h - 2 ? 1 : 0) && i \u003c w - (j >= h - 2 ? 1 : 0)) sur(X, Y, 120, 120, 128, j === 1 ? 0.6 : j === 0 ? 1.3 : 1);\n    }\n  if (type === 3) sur(x0 + 2, y + h, 70, 70, 76);\n}\n\n// The hook block, its cable and slings, and whatever it carries.\nfunction hook(P) {\n  const [tx, ty] = tip(P), hx = tx + P.swx, hy = P.hy;\n  line(tx, ty + 1, hx, hy - 1, [120, 120, 130], 0.9);\n  for (let i = -1; i \u003c= 1; i++) surc(hx + i, hy - 1, YEL);\n  sur(hx, hy, 60, 60, 66), sur(hx, hy + 1, 90, 90, 96);\n  if (P.load >= 0) {\n    const w = LW[P.load] / 2 - 0.5;\n    line(hx, hy + 1, hx - w, hy + 3, [110, 110, 116], 0.8), line(hx, hy + 1, hx + w, hy + 3, [110, 110, 116], 0.8);\n    drawLoad(P.load, hx + 0.5, hy + 3);\n    // Concrete runs from the bucket into the forms.\n    if (P.ph === \"P\" || P.ph === \"I\") for (let j = hy + 10; j \u003c deckY(P) - FH; j++) sur(hx + 0.5, j, 140, 140, 150);\n  }\n}\n\n// The yard: stock waiting by the crane, the load being rigged, the floodlight tower.\nfunction yard(P) {\n  drawLoad(2, 53, 115), drawLoad(1, 54, 118);\n  if (P.ph === \"A\" || P.ph === \"B\") {\n    const s = P.stage, x = MX + PICK_R - LW[s] / 2 - 2, arm = P.ph === \"B\" ? (P.pt * 6) & 1 : 0;\n    drawLoad(s, MX + PICK_R + 0.5, PICK_Y - LH[s]);\n    man(x, PICK_Y - 1), sur(x + 1, PICK_Y - 2 - arm, 255, 130, 20);\n  }\n  for (let y = LY; y \u003c 122; y++) sur(62, y, 120, 120, 126);\n  const fon = sm(0.3, 0.55, P.h);\n  for (let x = 59; x \u003c= 62; x++) put(x, 83, [90, 90, 96]), put(x, 84, x \u003c 62 ? [70 + 185 * fon, 70 + 180 * fon, 76 + 154 * fon] : [90, 90, 96]);\n}\n\n// The crane: mast, ties, slewing ring, cab, tower head, jib and counter-jib.\nfunction crane(P) {\n  const c = cos(P.th), sn = sin(P.th), blink = P.rt % 1.2 \u003c 0.55, fon = sm(0.3, 0.55, P.h);\n  const jib = () => {\n    for (let s = 0; s \u003c= JL; s += 0.3) {\n      // Swung towards you the tip is nearer and bigger, swung away it shrinks.\n      const sc = 1 + (0.45 * s * sn) / JL, px = MX + s * c, py = JY - s * sn * 0.1, ht = (3 - (1.2 * s) / JL) * sc, tri = abs(((s / 2.4) % 2) - 1), wd = sn * 1.2 * sc;\n      surc(px - wd, py, YEL, 0.85), surc(px + wd, py, YEL, 0.85), surc(px, py - ht, YEL), surc(px + wd * (1 - tri), py - tri * ht, YEL, 0.75);\n    }\n  };\n  const counter = () => {\n    for (let s = 0; s \u003c= CJL; s += 0.3) {\n      const px = MX - s * c, py = JY + s * sn * 0.1;\n      surc(px, py, YEL, 0.85), surc(px, py - 1, YEL, s % 2 \u003c 0.6 ? 0.8 : 0);\n      if (s > 6 && s \u003c 8.5) for (let j = 1; j \u003c= 2; j++) sur(px, py - 1 - j, 80, 84, 92);\n      if (s > CJL - 5) for (let j = 1; j \u003c= 4; j++) sur(px, py + j, 190, 184, 172, (floor(s) & 1) === 0 ? 0.8 : 1);\n    }\n  };\n  const pend = () => {\n    line(MX, APEX + 1, MX + 28 * c, JY - 28 * sn * 0.1 - 2.2, [110, 104, 96], 0.8);\n    line(MX, APEX + 1, MX - CJL * c, JY + CJL * sn * 0.1 - 1, [110, 104, 96], 0.8);\n  };\n  const cab = () => {\n    for (let q = 0, i, j; q \u003c 12; q++)\n      (i = (q % 3) - 1), (j = (q / 3) | 0), j % 3 && i > -1 ? put(MX + 3.5 * c + i, JY + 1 + j, P.h > 0.5 ? [255 * fon, 226 * fon, 160 * fon] : [110, 150, 196]) : surc(MX + 3.5 * c + i, JY + 1 + j, [240, 232, 210]);\n  };\n  // What faces away is drawn first.\n  if (sn \u003c 0) jib(), pend(), cab();\n  else counter(), pend();\n  // The mast: two chords and a lattice of diagonals.\n  for (let y = JY + 3; y \u003c 118; y++) {\n    surc(MX - 2, y, YEL, 0.72), surc(MX + 2, y, YEL);\n    for (let xi = 1; xi \u003c= 3; xi++) if (((y + xi) & 3) === 0 || ((y - xi) & 3) === 0) surc(MX - 2 + xi, y, YEL, 0.8);\n  }\n  for (let x = MX - 4; x \u003c= MX + 4; x++) sur(x, 117, 170, 166, 160), sur(x, 118, 170, 166, 160), sur(x, 119, 170, 166, 160), abs(x - MX) \u003c 4 && (sur(x, JY + 1, 80, 80, 86), sur(x, JY + 2, 110, 110, 116));\n  // The tower head.\n  for (let y = APEX; y \u003c= JY - 3; y++) {\n    const hw = (1.6 * (y - APEX)) / (JY - 3 - APEX);\n    surc(MX - hw, y, YEL), surc(MX + hw, y, YEL);\n    if ((y & 1) === 0) for (let x = round(MX - hw); x \u003c= MX + hw; x++) surc(x, y, YEL, 0.8);\n  }\n  if (sn \u003c 0) counter(), pend();\n  else jib(), pend(), cab();\n  // The trolley, and the warning lights on the head and at the jib tip.\n  const [tx, ty] = tip(P);\n  sur(tx - 1, ty, 90, 90, 96), sur(tx, ty, 90, 90, 96), sur(tx + 1, ty, 90, 90, 96);\n  for (const [x, y] of [[MX, APEX - 1], [MX + JL * c, JY - JL * sn * 0.1 - 2]]) {\n    put(x, y, blink ? [255, 40, 28] : [110, 20, 16]);\n    if (blink) glow(x, y, [255, 30, 20], 0.12 + 0.3 * fon);\n  }\n}\n\n// The mixer, its drum turning.\nfunction mixer(P) {\n  const x0 = round(P.mix), night = sm(0.4, 0.9, P.h);\n  if (x0 \u003c -24) return;\n  for (let y = 115; y \u003c= 121; y++)\n    for (let i = 0; i \u003c 13; i++) {\n      const e = ((i - 6) / 6.8) ** 2 + ((y - 118 + (i - 6) * 0.18) / 3.4) ** 2;\n      if (e \u003c 1) sur(x0 + i, y, ...((((i * 0.7 + y * 1.4 - P.t * 9) % 4) + 4) % 4 \u003c 2 ? [240, 120, 40] : [230, 228, 220]), 1 - 0.3 * e);\n    }\n  for (let i = 0; i \u003c 20; i++) sur(x0 + i, 122, 70, 70, 76);\n  for (let y = 116; y \u003c 122; y++) for (let i = 15; i \u003c 20; i++) sur(x0 + i, y, ...(y \u003c 119 && i > 16 ? [110, 150, 190] : [230, 60, 40]));\n  for (const i of [2, 5, 16]) sur(x0 + i, 123, 30, 30, 34), sur(x0 + i + 1, 123, 30, 30, 34);\n  if (night > 0.1) add(x0 + 20, 120, [255, 240, 200], night);\n}\n\nfunction cars(P) {\n  const night = sm(0.35, 0.9, P.h), cols = [[200, 40, 36], [220, 220, 226], [40, 80, 170], [60, 64, 70]];\n  for (const [cx, v, ci] of P.cars) {\n    const x0 = round(cx), fx = v > 0 ? x0 + 6 : x0;\n    for (let i = 0; i \u003c 21; i++) i \u003c 14 ? surc(x0 + (i >> 1), 125 + (i & 1), cols[ci]) : i \u003c 17 && sur(x0 + i - 12, 124, 120, 150, 180);\n    add(fx, 125, [255, 250, 220], 0.3 + night), add(x0 + 6 - fx + x0, 125, [255, 20, 10], 0.2 + night);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  const hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  // The hook goes behind the frame when the jib swings away from you.\n  const behind = sin(P.th) \u003c -0.15, y = deckY(P) - 2, FLb = P.fl;\n  sky(P, K), clouds(P, K), light(P, K), ground(), behind && hook(P), building(P), yard(P), crane(P), mixer(P), cars(P), behind || hook(P);\n  // The welding arc, its sparks, and the floodlight beams in the dusk air.\n  if (P.welding) put(18, y, [235, 244, 255]), glow(18, y, [160, 190, 255], 0.36 + 0.24 * rnd());\n  for (const [x, y, , , l, px, py] of P.sp) put(px, py, [255, 120, 30], min(1, l * 1.4) * 0.6), put(x, y, [255, 170 + 80 * min(1, l), 70 * min(1, l)], min(1, l * 1.4));\n  if (P.h > 0.3) for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (FLb[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += FLb[i] * 22 * FLC[c];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower."},{"name":"Floors","min":9,"max":13,"about":"How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof."},{"name":"Wind","min":-1,"max":1,"about":"Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable."}],"start":[0,2,9,0.06],"measures":{"motion":0.1573,"detail":0.0705,"edges":0.403,"complexity":1.4462,"coverage":0.9851,"colour":0.2925,"drift":0.0434},"knobResponse":[0.3747,0.0499,0.0453,0.0999]},{"slug":"train-window","title":"Train Window","family":"space","round":17,"note":"달리는 기차 창밖이 층층이 흘러요. 먼 구름과 산은 느리게, 들판과 농가는 빠르게 지나가고 전차선 기둥은 휙 스쳐요. 깎은 비탈이 다가오면 터널이 창을 검게 덮고 나트륨등이 줄을 그으며 지나가요.","idea":"The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-train-window","type":"code","name":"train-window","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Time","min":0,"max":1,"about":"The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3."},{"name":"Hills","min":0,"max":1,"about":"At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds."},{"name":"Rain","min":0,"max":1,"about":"Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded."}],"start":[0,2,0,0.06],"measures":{"motion":0.6601,"detail":0.0493,"edges":0.717,"complexity":0.2041,"coverage":0.8669,"colour":0.2389,"drift":0.3599},"knobResponse":[0.2716,0.0947,0.2843,0.1097]},{"slug":"truchet","title":"Truchet","family":"geometry","round":1,"note":"타일마다 같은 사분원 둘이 있어요. 한 장을 90도 돌리면 길 둘이 하나로 이어지거나 하나가 둘로 끊겨요.","idea":"Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.","buttons":"K1 tap turns a quarter of the tiles at once.","code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-truchet","type":"code","name":"truchet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the path colours around the colour wheel."},{"name":"Flip Rate","min":0,"max":5,"about":"How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them."},{"name":"Tile","min":8,"max":20,"about":"Tile size in LEDs; small is a dense meander, large a few wide loops."},{"name":"Thickness","min":0,"max":1,"about":"Line width, from a thin wire to fat ribbons with small dark holes between them."}],"start":[0,2,8,0.06],"measures":{"motion":0.3464,"detail":0.1313,"edges":0.5615,"complexity":1.2014,"coverage":0.7147,"colour":0.3084,"drift":0.0597},"knobResponse":[0.1766,0.0939,0.1747,0.1431]},{"slug":"tunnel","title":"Tunnel","family":"space","round":1,"note":"가운데서 떨어진 거리로 나누면 평평한 체크무늬가 날아 들어가는 관이 돼요.","idea":"Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.","buttons":"K1 tap throws the far end of the tube to a new place.","code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","layer":{"id":"layer-tunnel","type":"code","name":"tunnel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the near rings; the far ones drift round the wheel from it."},{"name":"Speed","min":-3,"max":8,"about":"Flying forward, and below 0 backing out of the tube."},{"name":"Twist","min":-1,"max":1,"about":"Winds the tiles into a spiral, either way round."},{"name":"Tiles","min":8,"max":24,"about":"How many tiles go round the tube."}],"start":[0,2,0,8],"measures":{"motion":2.5151,"detail":0.0531,"edges":0.4689,"complexity":0.9004,"coverage":0.8993,"colour":0.486,"drift":0.3919},"knobResponse":[0.376,0.2448,0.256,0.2505]},{"slug":"turntables","title":"Turntables","family":"music","round":18,"note":"DJ 의 턴테이블 두 대가 믹서 띠를 사이에 두고 위아래로 서요. 판은 가만히 있는 방 불빛 아래에서 돌며 홈을 드러내고, DJ 는 기다리는 판을 손으로 잡았다가 킥에 맞춰 놓고 크로스페이더를 넘겨요. K2 Pitch 를 0 에 두면 플래터 테두리의 안쪽 스트로브 점이 멈춰 서요.","idea":"Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","layer":{"id":"layer-turntables","type":"code","name":"turntables","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light."},{"name":"Pitch","min":-8,"max":8,"about":"Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back."},{"name":"Scratch","min":0,"max":1,"about":"How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke."},{"name":"Light","min":0,"max":1,"about":"Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat."}],"start":[0,2,0,0.06],"measures":{"motion":0.2259,"detail":0.0842,"edges":0.4014,"complexity":1.294,"coverage":0.7108,"colour":0.1698,"drift":0.051},"knobResponse":[0.0432,0.0432,0.0448,0.0571]},{"slug":"typewriter","title":"Typewriter","family":"type","round":18,"note":"수동 타자기가 시 두 편을 3×5 픽셀 글자로 한 자씩 쳐요. 칠 때마다 활자대가 리본을 지나 튀어 올라 글자를 찍고 종이가 한 칸 왼쪽으로 밀리며, 줄 끝에서 벨이 번쩍이면 캐리지가 오른쪽으로 돌아오며 종이를 한 줄 올려요. K4 를 돌리면 리본이 닳아 글자가 옅어지고, 빨간 반쪽으로 치는 낱말이 늘어요.","idea":"A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","layer":{"id":"layer-typewriter","type":"code","name":"typewriter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet."},{"name":"Speed","min":0.2,"max":3,"about":"Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven."},{"name":"Spacing","min":1,"max":2,"about":"The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows)."},{"name":"Ribbon","min":0,"max":1,"about":"At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words."}],"start":[0,2,1,0.06],"measures":{"motion":0.4854,"detail":0.1156,"edges":0.8353,"complexity":0.7724,"coverage":0.9016,"colour":0.0948,"drift":0.1684},"knobResponse":[0.084,0.1398,0.167,0.0481]},{"slug":"veiled-lady","title":"Veiled Lady","family":"fungi","round":20,"note":"동트기 전 열대 숲 바닥을 손전등으로 비춘 망태버섯 타임랩스예요. 낙엽 속 흰 알이 터져 대가 패널 높이만큼 솟고, 올리브색 갓 밑에서 흰 레이스 망사가 낙엽 가까이까지 내려와요. 파리가 꼬였던 버섯이 시들어 쓰러지면 옆에서 다음 알이 부풀고, K1 을 돌리면 손전등이 UV 로 바뀌어 망사가 청록으로 빛나요.","idea":"A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.","buttons":"K1 tap starts a new egg now.","code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-veiled-lady","type":"code","name":"veiled-lady","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Torch","min":0,"max":1,"about":"A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower."},{"name":"Veil","min":0,"max":1,"about":"At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves."},{"name":"Rain","min":0,"max":1,"about":"Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net."}],"start":[0,2,0,0.06],"measures":{"motion":0.1497,"detail":0.0791,"edges":0.3662,"complexity":1.7099,"coverage":0.5698,"colour":0.1244,"drift":0.0576},"knobResponse":[0.0782,0.0485,0.0482,0.0673]},{"slug":"velvet-nap","title":"Velvet Nap","family":"cosmetic","round":34,"note":"판 전체가 에메랄드 무광 벨벳이고, 보이지 않는 손끝 둘이 천천히 글씨를 쓰듯 결을 쓸어요. 빛 쪽으로 밀린 결은 짙고 깊은 색으로, 빛을 따라 누운 결은 옅은 은빛으로 남아 서로 겹쳐 덮이고, 7초마다 손바닥이 22 LED 너비 띠를 위에서 아래로 쓸어 결을 한 방향으로 눕혀요.","idea":"The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.","buttons":"K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.","code":"// ===== Patternflow pattern =====\n// Title:   Velvet Nap\n// Family:  cosmetic\n// Idea:    The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the matte velvet of flocked compacts and velvet lip tints\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1\n//\n// Knob 1: Hue. The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive.\n// Knob 2: Speed. At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Width. The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel.\n// Knob 4: Pile. The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain.\n// Buttons: K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, round, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The pile of each LED is a vector in the plane of the cloth: its direction\n// is where the fibres lean, its length how far they lean, 0 upright and 1 as\n// far over as the pile goes. A palm lays it straight down the panel.\nconst PALM = 0.85;\n// The light comes from the left and a little below, 22 degrees above the\n// cloth, and sways 29 degrees either way every 12 seconds.\nconst ELEV = (22 * PI) / 180, LAZ = PI - 0.36, SWAY = 0.5;\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, width: 0, pile: 0.06, warm: false, clock: 0, palmT: 0, palmY: -99, palmX: 32, flat: 0,\n    qx: new Float32Array(N), qy: new Float32Array(N),\n    ga: new Float32Array(N), gl: new Float32Array(N), gb: new Float32Array(N),\n    fingers: [], c: [0, 0, 0], d: [0, 0, 0],\n  });\n  for (let p = 0; p \u003c N; p++) {\n    S.qy[p] = PALM;\n    // The fibre grain: each LED's tuft leans a little off the brushed way,\n    // a little more or less, and holds a little more or less dye.\n    S.ga[p] = (random() - 0.5) * 0.3;\n    S.gl[p] = 1 + (random() - 0.5) * 0.16;\n    S.gb[p] = 1 + (random() - 0.5) * 0.05;\n  }\n  for (let i = 0; i \u003c 2; i++) S.fingers.push(newFinger(i));\n}\n\n// The two fingers start one in each half of the panel.\nfunction newFinger(i) {\n  return {\n    x: 10 + random() * 44, y: (i + 0.15 + random() * 0.7) * 64, hd: random() * 2 * PI, turn: 0,\n    down: true, t: random() * 1.5, len: 1.2 + random() * 1.8,\n  };\n}\n\n// One finger, one step: it curves as it goes and steers away from the edges.\n// A stroke lasts 1.2 to 3 seconds, then the finger lifts for 0.2 to 0.5\n// seconds and comes down somewhere else.\nfunction moveFinger(S, f, ds) {\n  f.t += ds;\n  if (!f.down) {\n    if (f.t >= f.len) {\n      f.down = true;\n      f.t = 0;\n      f.len = 1.2 + random() * 1.8;\n      // It comes down where the velvet is least written: the best of four\n      // tries, scored by how far the pile round each is from the palm's.\n      let best = 1e9;\n      for (let k = 0; k \u003c 4; k++) {\n        const x = 6 + random() * (W - 13), y = 6 + random() * (H - 13);\n        let sc = 0;\n        for (let v = -9; v \u003c= 9; v += 3)\n          for (let u = -9; u \u003c= 9; u += 3) {\n            const p = cl(round(y + v), 0, H - 1) * W + cl(round(x + u), 0, W - 1);\n            sc += Math.abs(S.qx[p]) + Math.abs(S.qy[p] - PALM);\n          }\n        if (sc \u003c best) (best = sc), (f.x = x), (f.y = y);\n      }\n      f.hd = random() * 2 * PI;\n      f.turn = (random() - 0.5) * 3;\n    }\n    return false;\n  }\n  if (f.t >= f.len) {\n    f.down = false;\n    f.t = 0;\n    f.len = 0.2 + random() * 0.3;\n    return false;\n  }\n  f.turn += (random() - 0.5) * 14 * ds - f.turn * 0.8 * ds;\n  f.turn = cl(f.turn, -2.6, 2.6);\n  // Steer back towards the middle near an edge.\n  const mx = 10, cx = f.x \u003c mx ? 1 : f.x > W - 1 - mx ? -1 : 0, cy = f.y \u003c mx ? 1 : f.y > H - 1 - mx ? -1 : 0;\n  if (cx || cy) {\n    const want = atan2(cy || (32 - f.y) * 0.01, cx || (32 - f.x) * 0.01);\n    let dh = want - f.hd;\n    dh -= 2 * PI * Math.round(dh / (2 * PI));\n    f.turn += dh * 4 * ds;\n  }\n  f.hd += f.turn * ds;\n  return true;\n}\n\n// Brush the pile under the fingertip towards the way it moves.\nfunction brush(S, x, y, dx, dy, r) {\n  const r2 = (r + 1) * (r + 1);\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, y + r + 1); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, x + r + 1); xx++) {\n      const ex = xx - x, ey = yy - y, e2 = ex * ex + ey * ey;\n      if (e2 > r2) continue;\n      const w = 0.55 * (1 - sm(0.45 * r, r + 0.6, sqrt(e2))), p = yy * W + xx;\n      S.qx[p] += (dx - S.qx[p]) * w;\n      S.qy[p] += (dy - S.qy[p]) * w;\n    }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp, r = 2.2 + 3.6 * S.width, v = 26;\n  S.clock += ds;\n  for (const f of S.fingers) {\n    if (!moveFinger(S, f, ds)) continue;\n    const dx = cos(f.hd), dy = sin(f.hd), dist = v * ds, n = Math.max(1, Math.ceil(dist / 0.7));\n    for (let i = 0; i \u003c n; i++) {\n      f.x += (dx * dist) / n;\n      f.y += (dy * dist) / n;\n      brush(S, f.x, f.y, dx, dy, r);\n    }\n  }\n  // Every 7 seconds a palm strokes down one band 22 LEDs wide, from the\n  // top edge to the bottom in 1.6 seconds, and lays its pile straight down.\n  S.palmT += ds;\n  if (S.palmT >= 7) {\n    S.palmT -= 7;\n    S.palmY = -14;\n    S.palmX = 11 + random() * 42;\n  }\n  if (S.palmY > -50 && S.palmY \u003c H + 14) {\n    const y0 = S.palmY;\n    S.palmY += (156 / 1.6) * ds;\n    const ym = (y0 + S.palmY) / 2;\n    for (let y = max(0, floor(y0 - 12)); y \u003c= min(H - 1, S.palmY + 12); y++) {\n      const wy = 1 - sm(4, 12, Math.abs(y - ym));\n      if (wy \u003c= 0) continue;\n      for (let x = max(0, floor(S.palmX - 13)); x \u003c= min(W - 1, S.palmX + 13); x++) {\n        const w = 0.5 * wy * (1 - sm(7, 12, Math.abs(x - S.palmX))), p = y * W + x;\n        S.qx[p] += (0 - S.qx[p]) * w;\n        S.qy[p] += (PALM - S.qy[p]) * w;\n      }\n    }\n  }\n  if (S.flat > 0) {\n    S.flat -= ds;\n    for (let p = 0; p \u003c N; p++) {\n      S.qx[p] += (0 - S.qx[p]) * 0.2;\n      S.qy[p] += (PALM - S.qy[p]) * 0.2;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.width = cl(k[2], 0, 1);\n  S.pile = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on velvet that has been written on for fourteen seconds, with the\n    // next palm due 2.5 seconds in.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 420; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.palmT = 4.5;\n    S.palmY = -99;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.flat = 0.5;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, dcol = S.d;\n  // Pile length: a short nap leans 36 degrees when brushed and its sheen is\n  // broad; a long plush one leans 72 degrees with a tight bright sheen.\n  const u = (S.pile + 1) / 2, bmax = ((36 + 36 * u) * PI) / 180, pex = 3 + 4 * u;\n  const az = LAZ + SWAY * sin((2 * PI * S.clock) / 12);\n  const lx = cos(az) * cos(ELEV), ly = sin(az) * cos(ELEV), lz = sin(ELEV);\n  const h0 = S.hue + 0.42, hh = h0 - floor(h0);\n  // Orange, gold and chartreuse velvet read rust, mustard or olive at the\n  // body's level, so there the body is lifted towards 0.8 and its darker\n  // faces lean to ruby.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.24, 0.34, hh));\n  // The sheen is a pale tint of the dye.\n  hsv(h0, 0.18, 1, dcol);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const qx = S.qx[p], qy = S.qy[p];\n      let m = sqrt(qx * qx + qy * qy);\n      const ang = (m > 1e-4 ? atan2(qy, qx) : 0) + S.ga[p];\n      m = min(1, m * S.gl[p]);\n      // The fibre axis t: leaning by beta towards the pile's way.\n      const be = m * bmax, sb = sin(be), cb = cos(be);\n      const tx = sb * cos(ang), ty = sb * sin(ang), tz = cb;\n      const tl = tx * lx + ty * ly + tz * lz, sl = sqrt(max(0, 1 - tl * tl));\n      // Kajiya-Kay for a fibre: the lit side goes with the sine to the\n      // light, and a tuft seen end-on shows less of its side. The sheen is\n      // the reflection cone round the fibre crossing the eye straight ahead.\n      const diff = sl * (0.35 + 0.65 * sb);\n      const spec = pow(max(0, sl * sb - tl * cb), pex);\n      const body = (0.22 + 0.78 * diff) * S.gb[p];\n      const rich = 1 - diff;\n      hsv(h0 - (0.012 + 0.06 * warm) * rich, 0.78 + 0.2 * rich - 0.25 * spec, 1, c);\n      const vb = body * (0.8 + 0.2 * warm) + 0.5 * warm * (1 - body), vs = 0.55 * spec;\n      display.setPixel(\n        x, y,\n        round(255 * min(1, c[0] * vb + dcol[0] * vs)),\n        round(255 * min(1, c[1] * vb + dcol[1] * vs)),\n        round(255 * min(1, c[2] * vb + dcol[2] * vs)),\n      );\n    }\n}\n","layer":{"id":"layer-velvet-nap","type":"code","name":"velvet-nap","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Velvet Nap\n// Family:  cosmetic\n// Idea:    The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the matte velvet of flocked compacts and velvet lip tints\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1\n//\n// Knob 1: Hue. The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive.\n// Knob 2: Speed. At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Width. The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel.\n// Knob 4: Pile. The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain.\n// Buttons: K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, round, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The pile of each LED is a vector in the plane of the cloth: its direction\n// is where the fibres lean, its length how far they lean, 0 upright and 1 as\n// far over as the pile goes. A palm lays it straight down the panel.\nconst PALM = 0.85;\n// The light comes from the left and a little below, 22 degrees above the\n// cloth, and sways 29 degrees either way every 12 seconds.\nconst ELEV = (22 * PI) / 180, LAZ = PI - 0.36, SWAY = 0.5;\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, width: 0, pile: 0.06, warm: false, clock: 0, palmT: 0, palmY: -99, palmX: 32, flat: 0,\n    qx: new Float32Array(N), qy: new Float32Array(N),\n    ga: new Float32Array(N), gl: new Float32Array(N), gb: new Float32Array(N),\n    fingers: [], c: [0, 0, 0], d: [0, 0, 0],\n  });\n  for (let p = 0; p \u003c N; p++) {\n    S.qy[p] = PALM;\n    // The fibre grain: each LED's tuft leans a little off the brushed way,\n    // a little more or less, and holds a little more or less dye.\n    S.ga[p] = (random() - 0.5) * 0.3;\n    S.gl[p] = 1 + (random() - 0.5) * 0.16;\n    S.gb[p] = 1 + (random() - 0.5) * 0.05;\n  }\n  for (let i = 0; i \u003c 2; i++) S.fingers.push(newFinger(i));\n}\n\n// The two fingers start one in each half of the panel.\nfunction newFinger(i) {\n  return {\n    x: 10 + random() * 44, y: (i + 0.15 + random() * 0.7) * 64, hd: random() * 2 * PI, turn: 0,\n    down: true, t: random() * 1.5, len: 1.2 + random() * 1.8,\n  };\n}\n\n// One finger, one step: it curves as it goes and steers away from the edges.\n// A stroke lasts 1.2 to 3 seconds, then the finger lifts for 0.2 to 0.5\n// seconds and comes down somewhere else.\nfunction moveFinger(S, f, ds) {\n  f.t += ds;\n  if (!f.down) {\n    if (f.t >= f.len) {\n      f.down = true;\n      f.t = 0;\n      f.len = 1.2 + random() * 1.8;\n      // It comes down where the velvet is least written: the best of four\n      // tries, scored by how far the pile round each is from the palm's.\n      let best = 1e9;\n      for (let k = 0; k \u003c 4; k++) {\n        const x = 6 + random() * (W - 13), y = 6 + random() * (H - 13);\n        let sc = 0;\n        for (let v = -9; v \u003c= 9; v += 3)\n          for (let u = -9; u \u003c= 9; u += 3) {\n            const p = cl(round(y + v), 0, H - 1) * W + cl(round(x + u), 0, W - 1);\n            sc += Math.abs(S.qx[p]) + Math.abs(S.qy[p] - PALM);\n          }\n        if (sc \u003c best) (best = sc), (f.x = x), (f.y = y);\n      }\n      f.hd = random() * 2 * PI;\n      f.turn = (random() - 0.5) * 3;\n    }\n    return false;\n  }\n  if (f.t >= f.len) {\n    f.down = false;\n    f.t = 0;\n    f.len = 0.2 + random() * 0.3;\n    return false;\n  }\n  f.turn += (random() - 0.5) * 14 * ds - f.turn * 0.8 * ds;\n  f.turn = cl(f.turn, -2.6, 2.6);\n  // Steer back towards the middle near an edge.\n  const mx = 10, cx = f.x \u003c mx ? 1 : f.x > W - 1 - mx ? -1 : 0, cy = f.y \u003c mx ? 1 : f.y > H - 1 - mx ? -1 : 0;\n  if (cx || cy) {\n    const want = atan2(cy || (32 - f.y) * 0.01, cx || (32 - f.x) * 0.01);\n    let dh = want - f.hd;\n    dh -= 2 * PI * Math.round(dh / (2 * PI));\n    f.turn += dh * 4 * ds;\n  }\n  f.hd += f.turn * ds;\n  return true;\n}\n\n// Brush the pile under the fingertip towards the way it moves.\nfunction brush(S, x, y, dx, dy, r) {\n  const r2 = (r + 1) * (r + 1);\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, y + r + 1); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, x + r + 1); xx++) {\n      const ex = xx - x, ey = yy - y, e2 = ex * ex + ey * ey;\n      if (e2 > r2) continue;\n      const w = 0.55 * (1 - sm(0.45 * r, r + 0.6, sqrt(e2))), p = yy * W + xx;\n      S.qx[p] += (dx - S.qx[p]) * w;\n      S.qy[p] += (dy - S.qy[p]) * w;\n    }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp, r = 2.2 + 3.6 * S.width, v = 26;\n  S.clock += ds;\n  for (const f of S.fingers) {\n    if (!moveFinger(S, f, ds)) continue;\n    const dx = cos(f.hd), dy = sin(f.hd), dist = v * ds, n = Math.max(1, Math.ceil(dist / 0.7));\n    for (let i = 0; i \u003c n; i++) {\n      f.x += (dx * dist) / n;\n      f.y += (dy * dist) / n;\n      brush(S, f.x, f.y, dx, dy, r);\n    }\n  }\n  // Every 7 seconds a palm strokes down one band 22 LEDs wide, from the\n  // top edge to the bottom in 1.6 seconds, and lays its pile straight down.\n  S.palmT += ds;\n  if (S.palmT >= 7) {\n    S.palmT -= 7;\n    S.palmY = -14;\n    S.palmX = 11 + random() * 42;\n  }\n  if (S.palmY > -50 && S.palmY \u003c H + 14) {\n    const y0 = S.palmY;\n    S.palmY += (156 / 1.6) * ds;\n    const ym = (y0 + S.palmY) / 2;\n    for (let y = max(0, floor(y0 - 12)); y \u003c= min(H - 1, S.palmY + 12); y++) {\n      const wy = 1 - sm(4, 12, Math.abs(y - ym));\n      if (wy \u003c= 0) continue;\n      for (let x = max(0, floor(S.palmX - 13)); x \u003c= min(W - 1, S.palmX + 13); x++) {\n        const w = 0.5 * wy * (1 - sm(7, 12, Math.abs(x - S.palmX))), p = y * W + x;\n        S.qx[p] += (0 - S.qx[p]) * w;\n        S.qy[p] += (PALM - S.qy[p]) * w;\n      }\n    }\n  }\n  if (S.flat > 0) {\n    S.flat -= ds;\n    for (let p = 0; p \u003c N; p++) {\n      S.qx[p] += (0 - S.qx[p]) * 0.2;\n      S.qy[p] += (PALM - S.qy[p]) * 0.2;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.width = cl(k[2], 0, 1);\n  S.pile = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on velvet that has been written on for fourteen seconds, with the\n    // next palm due 2.5 seconds in.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 420; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.palmT = 4.5;\n    S.palmY = -99;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.flat = 0.5;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, dcol = S.d;\n  // Pile length: a short nap leans 36 degrees when brushed and its sheen is\n  // broad; a long plush one leans 72 degrees with a tight bright sheen.\n  const u = (S.pile + 1) / 2, bmax = ((36 + 36 * u) * PI) / 180, pex = 3 + 4 * u;\n  const az = LAZ + SWAY * sin((2 * PI * S.clock) / 12);\n  const lx = cos(az) * cos(ELEV), ly = sin(az) * cos(ELEV), lz = sin(ELEV);\n  const h0 = S.hue + 0.42, hh = h0 - floor(h0);\n  // Orange, gold and chartreuse velvet read rust, mustard or olive at the\n  // body's level, so there the body is lifted towards 0.8 and its darker\n  // faces lean to ruby.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.24, 0.34, hh));\n  // The sheen is a pale tint of the dye.\n  hsv(h0, 0.18, 1, dcol);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const qx = S.qx[p], qy = S.qy[p];\n      let m = sqrt(qx * qx + qy * qy);\n      const ang = (m > 1e-4 ? atan2(qy, qx) : 0) + S.ga[p];\n      m = min(1, m * S.gl[p]);\n      // The fibre axis t: leaning by beta towards the pile's way.\n      const be = m * bmax, sb = sin(be), cb = cos(be);\n      const tx = sb * cos(ang), ty = sb * sin(ang), tz = cb;\n      const tl = tx * lx + ty * ly + tz * lz, sl = sqrt(max(0, 1 - tl * tl));\n      // Kajiya-Kay for a fibre: the lit side goes with the sine to the\n      // light, and a tuft seen end-on shows less of its side. The sheen is\n      // the reflection cone round the fibre crossing the eye straight ahead.\n      const diff = sl * (0.35 + 0.65 * sb);\n      const spec = pow(max(0, sl * sb - tl * cb), pex);\n      const body = (0.22 + 0.78 * diff) * S.gb[p];\n      const rich = 1 - diff;\n      hsv(h0 - (0.012 + 0.06 * warm) * rich, 0.78 + 0.2 * rich - 0.25 * spec, 1, c);\n      const vb = body * (0.8 + 0.2 * warm) + 0.5 * warm * (1 - body), vs = 0.55 * spec;\n      display.setPixel(\n        x, y,\n        round(255 * min(1, c[0] * vb + dcol[0] * vs)),\n        round(255 * min(1, c[1] * vb + dcol[1] * vs)),\n        round(255 * min(1, c[2] * vb + dcol[2] * vs)),\n      );\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Width","min":0,"max":1,"about":"The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel."},{"name":"Pile","min":-1,"max":1,"about":"The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain."}],"start":[0,2,0,0.06],"measures":{"motion":0.0497,"detail":0.0465,"edges":0.1077,"complexity":1.9034,"coverage":1,"colour":0.202,"drift":0.1599},"knobResponse":[0.6367,0.0934,0.1478,0.2049]},{"slug":"voronoi","title":"Voronoi","family":"cells","round":2,"note":"흐름을 타고 도는 씨앗마다 가장 가까운 LED 를 제 유리 색으로 칠하고, 조각 사이에 1 LED 납선이 서요. K4 로 거리를 재는 법을 바꾸면 조각 가운데 둥근 유리가 원에서 마름모를 지나 정사각형이 돼요.","idea":"Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.","buttons":"K1 tap reshuffles the glass colours.","code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-voronoi","type":"code","name":"voronoi","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of most of the glass; a few panes take the colours across the wheel from it."},{"name":"Speed","min":0.2,"max":6,"about":"How fast the current carries the seeds round."},{"name":"Cells","min":20,"max":60,"about":"How many panes, from 20 big ones to 60 small ones."},{"name":"Metric","min":0,"max":2,"about":"How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square."}],"start":[0,2,20,0.06],"measures":{"motion":2.0975,"detail":0.1621,"edges":1,"complexity":0.2058,"coverage":0.8378,"colour":0.5986,"drift":0.1196},"knobResponse":[0.4827,0.3489,0.3517,0.1477]},{"slug":"waggle-dance","title":"Waggle Dance","family":"insect","round":24,"note":"관찰 벌통의 벌집 한 장이 패널 높이로 서요. 위에 봉한 꿀, 그 아래 여덟 색 꽃가루 띠와 애벌레 방이 있고, 벌 여든 마리가 기어 다녀요. 아래쪽 빈 벌집에서는 꽃가루를 단 벌이 몸을 흔들며 8 자 춤을 추고 따르는 벌들이 둘러서요. 춤의 각도가 해에서 본 꽃밭의 방향이라 K4 를 돌리면 모든 춤이 같이 돌아요.","idea":"Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.","buttons":"K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.","code":"// ===== Patternflow pattern =====\n// Title:   Waggle Dance\n// Family:  insect\n// Idea:    Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after Karl von Frisch's reading of the honeybee's waggle dance\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1\n//\n// Knob 1: Light. Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see.\n// Knob 2: Speed. At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower.\n// Knob 3: Bees. Eighty to 240; turned up, more walk in from the sides until they hide the comb.\n// Knob 4: Sun. The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass.\n// Buttons: K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Cells six LEDs across the flats, rows five apart (a hexagon squashed by\n// four in a hundred, so every cell is drawn alike); the frame's top bar,\n// its bottom bar and the entrance slot in it.\nconst [CW, RH, TOP, BOT, NC, NR, ENX] = [6, 5, 5, 123, 13, 27, 9];\nconst Y0 = TOP + 2.5;\nconst [EMPTY, HONEY, NECTAR, POLLEN, BROOD, LARVA, EGG] = [0, 1, 2, 3, 4, 5, 6];\nconst [CRAWL, REST, DIP, FOLLOW, DANCE, HOME, EXIT] = [0, 1, 2, 3, 4, 5, 6];\n// Pollen: orange, yellow, ochre, rust, purple-grey, buff, olive, red-orange.\nconst POLLENS = [[0.95, 0.52, 0.08], [0.95, 0.8, 0.16], [0.74, 0.54, 0.17], [0.6, 0.25, 0.1],\n  [0.44, 0.37, 0.5], [0.86, 0.68, 0.36], [0.55, 0.58, 0.24], [0.9, 0.4, 0.12]];\n// Bees: a dark race, the usual, a golden one. Thorax, then the amber bands.\nconst THX = [[0.5, 0.37, 0.2], [0.78, 0.56, 0.24], [0.9, 0.68, 0.3]];\nconst AMB = [[0.62, 0.44, 0.18], [1, 0.72, 0.2], [1, 0.84, 0.32]];\nconst [DARK, HEAD, WING] = [[0.3, 0.18, 0.08], [0.14, 0.1, 0.06], [0.8, 0.84, 0.9]];\nconst [SUNC, DAYC, WARM, REDC] = [[1, 0.84, 0.56], [1, 0.94, 0.82], [1, 0.66, 0.34], [1, 0.09, 0.035]];\n// Where the flowers lie, against the main field, and how often foragers come from each.\nconst FIELDS = [0, 0, 0.95, -1.9];\n\nconst { min, max, sin, cos, abs, sqrt, floor, round, exp, atan2, PI } = Math;\nconst len = (a, b) => sqrt(a * a + b * b);\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst wrap = (a) => a - 2 * PI * round(a / (2 * PI));\nconst rnd = () => Math.random();\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Distance from a cell's centre in its own hexagon, 3 on the wall.\nconst hexd = (dx, dy) => max(abs(dx), abs(0.5 * dx + 0.9 * dy), abs(0.5 * dx - 0.9 * dy));\nconst cellX = (r, c) => CW * (c - 1) + (r & 1 ? 3.5 : 0.5);\nconst cellY = (r) => Y0 + (r - 1) * RH;\nconst cap = (t) => t === BROOD || t === HONEY;\n\n// Which cell each LED sits in, and where in it.\nfunction grid(S) {\n  for (let y = TOP; y \u003c BOT; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r0 = round((y + 0.5 - Y0) / RH) + 1;\n      let [best, next] = [99, 99];\n      const p = y * W + x;\n      for (let r = max(0, r0 - 1); r \u003c= min(NR - 1, r0 + 1); r++) {\n        const off = r & 1 ? 3.5 : 0.5;\n        const c0 = round((x + 0.5 - off) / CW) + 1;\n        for (let c = max(0, c0 - 1); c \u003c= min(NC - 1, c0 + 1); c++) {\n          const dx = x + 0.5 - cellX(r, c);\n          const dy = y + 0.5 - cellY(r);\n          const d = hexd(dx, dy);\n          if (d \u003c best) {\n            next = best;\n            S.cid2[p] = S.cid[p];\n            best = d;\n            S.cid[p] = r * NC + c;\n            [S.hd[p], S.dx[p], S.dy[p]] = [d, dx, dy];\n          } else if (d \u003c next) {\n            next = d;\n            S.cid2[p] = r * NC + c;\n          }\n        }\n      }\n    }\n}\n\n// Honey over the top and down the corners, a band of pollen, brood below.\nfunction layout(S) {\n  for (let r = 0; r \u003c NR; r++)\n    for (let c = 0; c \u003c NC; c++) {\n      const i = r * NC + c;\n      const [x, y] = [cellX(r, c), cellY(r)];\n      const e = len((x - 32) / 33, (y - 70) / 28) + 0.05 * (sin(x * 0.21 + y * 0.13) + sin(y * 0.29 - x * 0.17 + 2));\n      const u = rnd();\n      let t;\n      if (y \u003c 24 || (e > 1.28 && y \u003c 64)) t = u \u003c 0.82 ? HONEY : u \u003c 0.95 ? NECTAR : EMPTY;\n      else if (e > 1 && y \u003c 72) t = u \u003c 0.62 ? POLLEN : u \u003c 0.78 ? NECTAR : EMPTY;\n      else if (e \u003c 0.72) t = u \u003c 0.68 ? BROOD : u \u003c 0.78 ? LARVA : u \u003c 0.81 ? EGG : EMPTY;\n      else if (e \u003c 1) t = u \u003c 0.34 ? LARVA : u \u003c 0.48 ? EGG : u \u003c 0.64 ? BROOD : u \u003c 0.68 ? POLLEN : EMPTY;\n      else t = u \u003c 0.12 ? POLLEN : u \u003c 0.27 ? NECTAR : EMPTY;\n      [S.type[i], S.age[i], S.tint[i], S.gap[i], S.pol[i]] = [t, rnd(), rnd(), rnd() * 6.283, floor(rnd() * 8)];\n    }\n}\n\n// Each LED's colour as it would be in white light, and how much of the\n// sun reaches it: cell bottoms stay in shadow.\nfunction paint(S) {\n  const { base, expo } = S;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    let r, g, b;\n    let ex = 1;\n    let dim = 0.66;\n    if (y \u003c TOP || y >= BOT) {\n      // Pine, the grain running along the bar, a groove where it meets the comb.\n      const gr = 0.8 + 0.2 * sin(x * 0.23 + 2 * sin(x * 0.07 + y * 1.3));\n      const edge = y === TOP - 1 || y === BOT ? 0.55 : 1;\n      const k = gr * edge * (0.9 + 0.1 * hash(p, 5));\n      [r, g, b] = [0.6 * k, 0.42 * k, 0.24 * k];\n      if (y > BOT + 1 && y \u003c H - 1 && abs(x + 0.5 - ENX) \u003c 5) [r, g, b] = [0.02, 0.015, 0.01];\n    } else {\n      const [i, d, dx, dy] = [S.cid[p], S.hd[p], S.dx[p], S.dy[p]];\n      const [t, tn, rr, lit] = [S.type[i], S.tint[i], len(dx, dy), -(dx + dy) / 3];\n      if (t === HONEY) {\n        dim = 1;\n        const k = (1 - 0.12 * (d / 2.6) ** 2 + 0.06 * lit) * (0.95 + 0.06 * hash(p, 1));\n        [r, g, b] = [(1 - 0.04 * tn) * k, (0.88 - 0.16 * tn) * k, (0.6 - 0.26 * tn) * k];\n      } else if (t === NECTAR) {\n        // Nectar: dark amber down in the cell, a bright meniscus round it, and a glint.\n        const f = (0.08 + 0.92 * sm(1.5, 2.4, d)) * (0.75 + 0.3 * tn);\n        [r, g, b] = [0.07 + 0.62 * f, 0.03 + 0.36 * f, 0.006 + 0.06 * f];\n        if (abs(dx + 1) \u003c 0.6 && abs(dy + 1) \u003c 0.7) [r, g, b] = [0.95, 0.9, 0.74];\n        ex = 0.6;\n      } else if (t === POLLEN) {\n        const c = POLLENS[S.pol[i]];\n        dim = 0.8;\n        // Packed down in the cell, its inside wall in shadow round it.\n        const k = (0.8 + 0.25 * tn) * (1 - 0.85 * sm(1.5, 2.3, d));\n        [r, g, b] = c.map((v, n) => v * k * (0.82 + 0.3 * hash(p, 2 + n)));\n        ex = 0.8;\n      } else if (t === BROOD) {\n        const k = (1 - 0.32 * (rr / 2.7) ** 2 + 0.1 * lit) * (hash(p, 6) \u003c 0.14 ? 0.78 : 1) * (0.9 + 0.15 * tn);\n        [r, g, b] = [0.8 * k, 0.68 * k, 0.5 * k];\n      } else {\n        // An open cell: dark at the bottom, its lower inside wall catching the light.\n        const lip = sm(1.6, 2.4, d) * (dy > 0.5 ? 1 : 0.3);\n        const k = (0.04 + 0.1 * lip) * (0.75 + 0.5 * tn);\n        [r, g, b] = [k, k * 0.68, k * 0.38];\n        ex = 0.2 + 0.8 * lip;\n        if (t === LARVA) {\n          // The larva curled in a C on its bed of jelly, bigger as it grows.\n          const a = S.age[i];\n          const [R, th] = [0.4 + 1.1 * a, 0.45 + 0.55 * a];\n          const ang = wrap(atan2(dy, dx) - S.gap[i]);\n          let on = a \u003c 0.3 ? sm(1.2, 0.5, rr) : sm(th + 0.3, th - 0.3, abs(rr - R)) * sm(0.5, 1, abs(ang));\n          if (rr \u003c 1.9) [r, g, b] = [r + 0.18, g + 0.17, b + 0.14];\n          const sh = 0.82 + 0.18 * clamp(lit + 0.5, 0, 1) + 0.05 * sin(ang * 5);\n          r += (0.97 * sh - r) * on;\n          g += (0.94 * sh - g) * on;\n          b += (0.85 * sh - b) * on;\n          ex += (0.9 - ex) * on;\n        } else if (t === EGG && rr \u003c 0.7) [r, g, b] = [0.86, 0.85, 0.78];\n      }\n      // The walls: pale wax round the honey, the rims of open cells lit,\n      // and a dark seam where two brood caps meet.\n      const w = sm(2.4, 2.6, d);\n      if (w > 0) {\n        const t2 = S.type[S.cid2[p]];\n        const pale = t === HONEY || t === NECTAR ? 1 : 0;\n        const seam = (t === BROOD || t2 === BROOD) && cap(t) && cap(t2) ? 0.15 : 1;\n        // Light from above rakes the slanted walls; the upright ones stand side on to it.\n        const k = (0.85 + 0.3 * hash(p, 8)) * seam * (!pale && abs(dx) > 2.6 ? 0.45 : 1);\n        r += ((0.34 + 0.18 * pale) * k - r) * w;\n        g += ((0.24 + 0.15 * pale) * k - g) * w;\n        b += ((0.11 + 0.08 * pale) * k - b) * w;\n        ex += ((seam \u003c 1 ? 0.15 : 1) - ex) * w;\n      }\n    }\n    // The comb sits back in the hive's shade; the bees on it catch the light.\n    base[q] = r * dim;\n    base[q + 1] = g * dim;\n    base[q + 2] = b * dim;\n    expo[p] = ex;\n  }\n}\n\n// The window throws its four panes of sun on the glass; they slide and lean with the sun.\nfunction sunPatch(S, s) {\n  const [cx, cy, sh] = [32 + 22 * s, 74 - 6 * abs(s), -0.5 * s];\n  for (let p = 0; p \u003c N; p++) {\n    const v = ((p / W) | 0) + 0.5 - cy;\n    const u = (p % W) + 0.5 - cx - sh * v;\n    let m = sm(22, 16, abs(u)) * sm(40, 33, abs(v));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(u));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(v + 5));\n    S.sun[p] = m;\n  }\n  S.sunK = s;\n}\n\nfunction newBee(S, x, y, h) {\n  const u = rnd();\n  const b = { x, y, h, m: CRAWL, t: rnd() * 3, v: 2.6 + 2.6 * rnd(), s: 1.12 + 0.14 * rnd(), tone: u \u003c 0.18 ? 0 : u \u003c 0.82 ? 1 : 2, ph: rnd() * 6.28, w: 0, wag: 0, wp: 0 };\n  S.bees.push(b);\n  return b;\n}\n\n// A bee to the dance floor on the lower comb, clear of the other dances.\nfunction spot(S) {\n  let best = [32, 104];\n  let far = -1;\n  for (let k = 0; k \u003c 24; k++) {\n    const x = 12 + 40 * rnd();\n    const y = 80 + 33 * rnd();\n    // The lower the better, near the entrance, but well clear of the others.\n    const d = min(24, ...S.dances.map((D) => len(D.cx - x, D.cy - y))) + 0.1 * y;\n    if (d > far) [far, best] = [d, [x, y]];\n  }\n  return best;\n}\n\nfunction newDance(S, b, vig) {\n  const [cx, cy] = spot(S);\n  // A forager from a rich patch runs longer, keeps at it and draws more followers.\n  const D = { b, cx, cy, fl: FIELDS[floor(rnd() * 4)] + 0.12 * (rnd() - 0.5), L: vig ? 11 : 8 + 2.5 * rnd(), tw: vig ? 1.25 : 0.85 + 0.3 * rnd(),\n    tr: vig ? 0.9 : 1 + 0.3 * rnd(), tau: 0, side: rnd() \u003c 0.5 ? -1 : 1, n: vig ? 26 : 9 + floor(10 * rnd()), amp: vig ? 1 : 0.65 + 0.2 * rnd(),\n    want: vig ? 10 : 6 + floor(3 * rnd()), on: false, foll: [], rec: 0, pc: floor(rnd() * 3) };\n  D.th = D.fl - S.sunA;\n  b.D = D;\n  S.dances.push(D);\n  return D;\n}\n\n// The bees nearest the dance turn and gather round it.\nfunction recruit(S, D, snap) {\n  const free = S.bees.filter((b) => (b.m === CRAWL || b.m === REST) && len(b.x - D.cx, b.y - D.cy) \u003c 24);\n  free.sort((a, b) => len(a.x - D.cx, a.y - D.cy) - len(b.x - D.cx, b.y - D.cy));\n  for (const b of free) {\n    if (D.foll.length >= D.want) break;\n    Object.assign(b, { m: FOLLOW, D, a: atan2(b.x - D.cx, -(b.y - D.cy)), t: 5 + 10 * rnd() });\n    D.foll.push(b);\n    if (snap) {\n      const R = D.L / 2 + 3.4;\n      b.x = D.cx + R * sin(b.a);\n      b.y = D.cy - R * cos(b.a);\n      b.h = b.a + PI;\n    }\n  }\n}\n\nfunction seek(b, tx, ty, sp, dt) {\n  const [dx, dy] = [tx - b.x, ty - b.y];\n  const r = len(dx, dy);\n  if (r > 0.25) {\n    const want = atan2(dx, -dy);\n    const e = wrap(want - b.h);\n    b.h += clamp(e, -5 * dt, 5 * dt);\n    const st = min(r, sp * dt) * max(0.15, cos(e));\n    b.x += sin(b.h) * st;\n    b.y -= cos(b.h) * st;\n  }\n  return r;\n}\n\nfunction stepDance(S, D, dt) {\n  const b = D.b;\n  D.th += clamp(wrap(D.fl - S.sunA - D.th), -1.5 * dt, 1.5 * dt);\n  const [ux, uy] = [sin(D.th), -cos(D.th)];\n  if (!D.on) {\n    // The forager hurries up from the entrance to where she will dance.\n    b.m = HOME;\n    if (seek(b, D.cx - (ux * D.L) / 2, D.cy - (uy * D.L) / 2, D.n > 20 ? 13 : 9, dt) \u003c 1.2) {\n      D.on = true;\n      b.m = DANCE;\n      recruit(S, D, false);\n    }\n    return;\n  }\n  D.tau += dt;\n  if (D.tau >= D.tw + D.tr) {\n    D.tau -= D.tw + D.tr;\n    D.side = -D.side;\n    if (--D.n \u003c= 0) {\n      // Done: she goes back out, and some of her followers go after the flowers.\n      [D.gone, b.m, b.wag] = [true, EXIT, 0];\n      for (const f of D.foll) [f.m, f.t] = [rnd() \u003c 0.4 ? EXIT : CRAWL, 1 + 2 * rnd()];\n      return;\n    }\n  }\n  let want;\n  if (D.tau \u003c D.tw) {\n    const f = D.tau / D.tw - 0.5;\n    b.x = D.cx + ux * D.L * f;\n    b.y = D.cy + uy * D.L * f;\n    want = D.th;\n    b.wag = D.amp;\n    b.wp += dt * 2 * PI * 13;\n  } else {\n    const s = (D.tau - D.tw) / D.tr;\n    const ps = D.side * PI * s;\n    const [rx, ry] = [ux * cos(ps) - uy * sin(ps), ux * sin(ps) + uy * cos(ps)];\n    b.x = D.cx + (rx * D.L) / 2;\n    b.y = D.cy + (ry * D.L) / 2;\n    want = atan2(-D.side * ry, -D.side * rx);\n    b.wag = 0;\n  }\n  b.h += clamp(wrap(want - b.h), -14 * dt, 14 * dt);\n  // Followers keep their place round her, turned to face her, and drift with her.\n  D.foll = D.foll.filter((f) => f.m === FOLLOW && f.D === D);\n  D.rec -= dt;\n  if (D.rec \u003c= 0) {\n    D.rec = 1.5;\n    if (D.foll.length \u003c D.want) recruit(S, D, false);\n  }\n  const da = atan2(b.x - D.cx, -(b.y - D.cy));\n  for (const f of D.foll) {\n    f.a += dt * 0.35 * sin(wrap(da - f.a));\n    const R = D.L / 2 + 3.4 + 0.4 * sin(S.t * 2 + f.ph);\n    if (seek(f, D.cx + R * sin(f.a), D.cy - R * cos(f.a), 6, dt) \u003c 1.2) f.h += clamp(wrap(atan2(b.x - f.x, -(b.y - f.y)) - f.h), -6 * dt, 6 * dt);\n    if ((f.t -= dt) \u003c= 0) [f.m, f.t, f.h] = [CRAWL, 1 + 2 * rnd(), f.h + PI];\n  }\n}\n\nfunction crawl(S, b, dt) {\n  b.w += (rnd() - 0.5) * 10 * sqrt(dt);\n  b.w *= 1 - min(1, 1.5 * dt);\n  let want = null;\n  const ex = b.x \u003c 4 ? 1 : b.x > W - 4 ? -1 : 0;\n  const ey = b.y \u003c TOP + 4 ? 1 : b.y > BOT - 4 ? -1 : 0;\n  if (ex || ey) want = atan2(ex, -ey);\n  b.h += b.w * dt;\n  if (want !== null) b.h += clamp(wrap(want - b.h), -3 * dt, 3 * dt);\n  const st = b.v * dt;\n  b.x += sin(b.h) * st;\n  b.y -= cos(b.h) * st;\n}\n\nfunction step(S, dt) {\n  const { bees } = S;\n  for (const b of bees) {\n    const m = b.m;\n    if (m === DANCE || m === HOME || m === FOLLOW) continue;\n    if (m === EXIT) {\n      if (seek(b, ENX, BOT + 1.5, 7, dt) \u003c 1.5) b.out = true;\n      continue;\n    }\n    // Others give the dancer and her followers room.\n    for (const D of S.dances) {\n      const [dx, dy] = [b.x - D.cx, b.y - D.cy];\n      const r = len(dx, dy);\n      if (D.on && r \u003c D.L / 2 + 9) {\n        if (m !== CRAWL) b.t = 0;\n        b.x += (dx / (r + 0.01)) * 4 * dt;\n        b.y += (dy / (r + 0.01)) * 4 * dt;\n        b.h += clamp(wrap(atan2(dx, -dy) - b.h), -4 * dt, 4 * dt);\n      }\n    }\n    if (m === CRAWL) crawl(S, b, dt);\n    else if (m === REST) b.h += sin(S.t * 6 + b.ph) * 0.5 * dt;\n    if ((b.t -= dt) > 0) continue;\n    // Backing out of a cell, she turns away.\n    if (m === DIP) [b.x, b.y, b.h] = [b.x - sin(b.h) * 1.5, b.y + cos(b.h) * 1.5, b.h + PI * (0.6 + 0.8 * rnd())];\n    const u = rnd();\n    b.m = CRAWL;\n    b.t = 1 + 3 * rnd();\n    if (u \u003c 0.28) [b.m, b.t] = [REST, 0.8 + 2.5 * rnd()];\n    else if (u \u003c 0.5 && m !== DIP) {\n      // Head first into a cell: to feed a larva, take nectar or pack pollen.\n      const hx = round(b.x + sin(b.h) * 2.2 - 0.5);\n      const hy = round(b.y - cos(b.h) * 2.2 - 0.5);\n      if (hx >= 0 && hx \u003c W && hy >= TOP + 2 && hy \u003c BOT - 2) {\n        const i = S.cid[hy * W + hx];\n        const t = S.type[i];\n        if (t !== HONEY && t !== BROOD) {\n          const r = floor(i / NC);\n          [b.m, b.t] = [DIP, 2 + 4 * rnd()];\n          b.x = cellX(r, i % NC) - sin(b.h) * 1.5;\n          b.y = cellY(r) + cos(b.h) * 1.5;\n        }\n      }\n    }\n  }\n  for (const D of S.dances) stepDance(S, D, dt);\n  S.dances = S.dances.filter((D) => !D.gone);\n  for (const b of bees) if (b.D && (b.D.gone || (b.m !== FOLLOW && b.m !== DANCE && b.m !== HOME))) b.D = null;\n  // Bees shoulder each other apart; those still at a cell or dancing stand firm.\n  for (const a of bees) {\n    if (a.m === REST || a.m === DIP || a.m === DANCE) continue;\n    for (const b of bees) {\n      const dx = a.x - b.x;\n      const dy = a.y - b.y;\n      if (abs(dx) > 3.6 || abs(dy) > 3.6 || b === a) continue;\n      const r = len(dx, dy);\n      if (r \u003c 3.6 && r > 0.01) {\n        a.x += (dx / r) * (3.6 - r) * 0.25;\n        a.y += (dy / r) * (3.6 - r) * 0.25;\n      }\n    }\n  }\n  S.bees = bees.filter((b) => !b.out);\n}\n\nexport function setup(params) {\n  const S = { t: 0, started: false, sunA: 0, sunK: 9, next: 6, add: 0, c0: 4.2, c1: 8.5, cd: 0.55, bees: [], dances: [] };\n  for (const k of [\"cid\", \"cid2\"]) S[k] = new Int16Array(N);\n  for (const k of [\"hd\", \"dx\", \"dy\", \"expo\", \"X\", \"amb\", \"pool\", \"sun\"]) S[k] = new Float32Array(N);\n  for (const k of [\"base\", \"A\", \"jit\"]) S[k] = new Float32Array(N * 3);\n  for (const k of [\"age\", \"tint\", \"gap\"]) S[k] = new Float32Array(NR * NC);\n  for (const k of [\"type\", \"pol\"]) S[k] = new Uint8Array(NR * NC);\n  grid(S);\n  layout(S);\n  paint(S);\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p % W, (p / W) | 0];\n    S.amb[p] = 0.74 + 0.2 * (1 - y / H) + 0.03 * sin(x * 0.11 + y * 0.05) - 0.12 * ((x - 31.5) / 32) ** 4;\n    S.pool[p] = 0.42 + 0.6 * exp(-((x - 40) ** 2 + (y - 74) ** 2) / 3000);\n    const j = 0.94 + 0.12 * hash(p, 19);\n    for (let c = 0; c \u003c 3; c++) S.jit[p * 3 + c] = j * (0.97 + 0.06 * hash(p, 20 + c));\n  }\n  params.s = S;\n}\n\nfunction start(S, n) {\n  // Bees thickest on the brood, two dances already going.\n  for (let k = 0; k \u003c n; k++) {\n    let x, y;\n    for (let j = 0; j \u003c 4; j++) {\n      x = 2 + 60 * rnd();\n      y = TOP + 3 + (BOT - TOP - 6) * rnd();\n      if (rnd() \u003c 0.35 + 0.65 * sm(30, 70, y)) break;\n    }\n    newBee(S, x, y, rnd() * 6.28);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const b = newBee(S, 0, 0, 0);\n    const D = newDance(S, b, false);\n    Object.assign(D, { fl: k ? 0.08 : -0.1, cx: k ? 20 : 43, cy: k ? 111 : 102, on: true, tau: rnd() * (D.tw + D.tr), rec: 1.5 });\n    D.th = D.fl - S.sunA;\n    b.m = DANCE;\n    stepDance(S, D, 0);\n    b.h = D.tau \u003c D.tw ? D.th : b.h;\n    recruit(S, D, true);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.light = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  const want = round(clamp(k[2], 80, 240));\n  const sk = clamp(k[3], -1, 1);\n  S.sunA = sk * PI;\n  if (abs(sk - S.sunK) > 0.002) sunPatch(S, sk);\n  if (!S.started) {\n    S.started = true;\n    start(S, want);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  // Clouds cross the sun now and then; the first one early.\n  if (S.t > S.c1 + 1.5) {\n    S.c0 = S.t + 8 + 20 * rnd();\n    S.c1 = S.c0 + 3 + 6 * rnd();\n    S.cd = 0.4 + 0.5 * rnd();\n  }\n  S.cloud = 1 - S.cd * sm(S.c0, S.c0 + 1.5, S.t) * sm(S.c1 + 1.5, S.c1, S.t);\n  const vig = input.btnPressed && input.btnPressed[0];\n  if ((S.next -= d) \u003c= 0 || vig) {\n    if (S.dances.length \u003c (vig ? 4 : 3)) {\n      const b = newBee(S, ENX + 4 * (rnd() - 0.5), BOT + 1, 0);\n      b.m = HOME;\n      newDance(S, b, vig);\n    }\n    if (!vig) S.next = 5 + 8 * rnd();\n  }\n  // Bees walk in from the sides, or go out at the entrance, to match the knob.\n  let ord = 0;\n  for (const b of S.bees) if (b.m \u003c= FOLLOW) ord++;\n  if ((S.add -= dt) \u003c= 0) {\n    S.add = 0.1;\n    if (ord \u003c want) {\n      const l = rnd() \u003c 0.5;\n      newBee(S, l ? -3 : W + 3, TOP + 8 + (BOT - TOP - 16) * rnd(), l ? PI / 2 : -PI / 2).t = 1.5;\n    } else if (ord > want + 2) {\n      const b = S.bees.find((b) => b.m === CRAWL);\n      if (b) b.m = EXIT;\n    }\n  }\n  step(S, d);\n}\n\n// One bee into the albedo: her body worked out on a 12 x 12 patch first,\n// then her shadow a step down and right, head, thorax, banded abdomen, wings.\nconst PC = new Float32Array(144);\nconst PP = new Uint8Array(144);\nfunction bee(S, b) {\n  const { A, X } = S;\n  const [s, fx, fy, dip, wg] = [b.s, sin(b.h), -cos(b.h), b.m === DIP, b.wag > 0];\n  const wag = wg ? b.wag * sin(b.wp) : b.m === REST ? 0.15 * sin(S.t * 9 + b.ph) : 0;\n  const [bl, th, am] = [wg ? 0.4 : 0, THX[b.tone], AMB[b.tone]];\n  const shim = 0.24 + 0.14 * sin(S.t * 2.3 + b.ph + b.x * 0.3);\n  // A box round her, the whole patch for a dancer and her blur.\n  const ax = wg ? 5 : s * (3.2 * abs(fx) + 1.9 * abs(fy)) + 0.5;\n  const ay = wg ? 5 : s * (3.2 * abs(fy) + 1.9 * abs(fx)) + 0.5;\n  const [x0, y0] = [floor(b.x - ax), floor(b.y - ay)];\n  const nw = min(12, floor(b.x + ax) - x0 + 2);\n  const nh = min(12, floor(b.y + ay) - y0 + 2);\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const X0 = x0 + i + 0.5 - b.x;\n      const Y0 = y0 + j + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      PC[k] = shape(u, v, s, dip, bl);\n      PP[k] = PART;\n    }\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      const c = PC[k];\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      const q = p * 3;\n      const sh = i && j ? PC[k - nw - 1] : 0;\n      if (sh > 0) {\n        const f = 1 - 0.7 * sh * (1 - c);\n        A[q] *= f;\n        A[q + 1] *= f;\n        A[q + 2] *= f;\n      }\n      const X0 = px + 0.5 - b.x;\n      const Y0 = py + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      // A waggling dancer buzzes her wings into a pale blur round her.\n      let wa = wg ? 0.55 * clamp(1.6 - len((u + 0.7) / 1.5, v / 1.7), 0, 1) : 0;\n      if (c \u003c= 0 && wa \u003c= 0) continue;\n      const pt = PP[k];\n      const col = pt === 1 ? HEAD : pt === 2 ? th : null;\n      const st = u > -0.85 ? 1 : u > -1.35 ? 0 : u > -1.9 ? 0.8 : 0;\n      if (u > -2.2 && u \u003c 0.3 && abs(v) > 0.35 && abs(v) \u003c 1.15) wa = max(wa, shim);\n      const a = max(c, wa);\n      for (let n = 0; n \u003c 3; n++) {\n        let e = col ? col[n] : DARK[n] + (am[n] - DARK[n]) * st;\n        e += (WING[n] - e) * wa;\n        A[q + n] += (e - A[q + n]) * a;\n      }\n      X[p] += (1 - X[p]) * a;\n    }\n  // A forager home from the field carries her pollen loads on her hind legs.\n  if (b.D && (b.m === DANCE || b.m === HOME)) {\n    const c = POLLENS[b.D.pc];\n    for (const sd of [-1, 1]) {\n      const px = round(b.x + s * (-0.7 * fx - sd * 1.25 * fy) - 0.5);\n      const py = round(b.y + s * (-0.7 * fy + sd * 1.25 * fx) - 0.5);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      [A[q], A[q + 1], A[q + 2], X[py * W + px]] = [...c, 1];\n    }\n  }\n}\n\n// Coverage of a bee's body at (u along, v across) in body lengths of\n// about five LEDs; PART says which piece.\nlet PART = 0;\nfunction shape(u, v, s, dip, bl) {\n  let c = clamp((1 - len((u + 1.3) / 1.5, v / (1.12 + bl))) * 1.2 * s + 0.5, 0, 1);\n  PART = 3;\n  if (!dip || u \u003c 0.3) {\n    const k = clamp((1 - len((u - 0.5) / 0.8, v)) * 0.9 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 2];\n  }\n  if (!dip) {\n    const k = clamp((1 - len((u - 1.65) / 0.6, v / 0.75)) * 0.7 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 1];\n  }\n  return c;\n}\n\nconst knee = (c) => (c \u003c 190 ? c : 190 + 65 * (1 - exp(-(c - 190) / 65)));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { A, X, base, expo, amb, sun, pool, jit } = S;\n  A.set(base);\n  X.set(expo);\n  for (const b of S.bees) if (b.m !== DANCE) bee(S, b);\n  for (const b of S.bees) if (b.m === DANCE) bee(S, b);\n  // The curtain closes on the sun first; the room light goes from daylight\n  // to a warm lamp over the hive by 0.5, and from that to the red lamp.\n  const L = S.light;\n  const [w, rd, pw] = [sm(0, 0.5, L), sm(0.5, 1, L), sm(0.15, 0.6, L)];\n  const dc = [0, 1, 2].map((c) => (DAYC[c] + (WARM[c] - DAYC[c]) * w + (REDC[c] - WARM[c]) * rd) * (1 - 0.1 * w - 0.1 * rd) * 255);\n  const sk = 0.9 * S.cloud * (1 - sm(0, 0.4, L)) * 255;\n  const o = [0, 0, 0];\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const a = amb[p] + (pool[p] - amb[p]) * pw;\n    const s = sun[p] * X[p] * sk;\n    for (let c = 0; c \u003c 3; c++) o[c] = knee(A[q + c] * (a * dc[c] + s * SUNC[c]) * jit[q + c]) | 0;\n    display.setPixel(p % W, (p / W) | 0, o[0], o[1], o[2]);\n  }\n}\n","layer":{"id":"layer-waggle-dance","type":"code","name":"waggle-dance","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Waggle Dance\n// Family:  insect\n// Idea:    Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after Karl von Frisch's reading of the honeybee's waggle dance\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1\n//\n// Knob 1: Light. Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see.\n// Knob 2: Speed. At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower.\n// Knob 3: Bees. Eighty to 240; turned up, more walk in from the sides until they hide the comb.\n// Knob 4: Sun. The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass.\n// Buttons: K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Cells six LEDs across the flats, rows five apart (a hexagon squashed by\n// four in a hundred, so every cell is drawn alike); the frame's top bar,\n// its bottom bar and the entrance slot in it.\nconst [CW, RH, TOP, BOT, NC, NR, ENX] = [6, 5, 5, 123, 13, 27, 9];\nconst Y0 = TOP + 2.5;\nconst [EMPTY, HONEY, NECTAR, POLLEN, BROOD, LARVA, EGG] = [0, 1, 2, 3, 4, 5, 6];\nconst [CRAWL, REST, DIP, FOLLOW, DANCE, HOME, EXIT] = [0, 1, 2, 3, 4, 5, 6];\n// Pollen: orange, yellow, ochre, rust, purple-grey, buff, olive, red-orange.\nconst POLLENS = [[0.95, 0.52, 0.08], [0.95, 0.8, 0.16], [0.74, 0.54, 0.17], [0.6, 0.25, 0.1],\n  [0.44, 0.37, 0.5], [0.86, 0.68, 0.36], [0.55, 0.58, 0.24], [0.9, 0.4, 0.12]];\n// Bees: a dark race, the usual, a golden one. Thorax, then the amber bands.\nconst THX = [[0.5, 0.37, 0.2], [0.78, 0.56, 0.24], [0.9, 0.68, 0.3]];\nconst AMB = [[0.62, 0.44, 0.18], [1, 0.72, 0.2], [1, 0.84, 0.32]];\nconst [DARK, HEAD, WING] = [[0.3, 0.18, 0.08], [0.14, 0.1, 0.06], [0.8, 0.84, 0.9]];\nconst [SUNC, DAYC, WARM, REDC] = [[1, 0.84, 0.56], [1, 0.94, 0.82], [1, 0.66, 0.34], [1, 0.09, 0.035]];\n// Where the flowers lie, against the main field, and how often foragers come from each.\nconst FIELDS = [0, 0, 0.95, -1.9];\n\nconst { min, max, sin, cos, abs, sqrt, floor, round, exp, atan2, PI } = Math;\nconst len = (a, b) => sqrt(a * a + b * b);\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst wrap = (a) => a - 2 * PI * round(a / (2 * PI));\nconst rnd = () => Math.random();\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Distance from a cell's centre in its own hexagon, 3 on the wall.\nconst hexd = (dx, dy) => max(abs(dx), abs(0.5 * dx + 0.9 * dy), abs(0.5 * dx - 0.9 * dy));\nconst cellX = (r, c) => CW * (c - 1) + (r & 1 ? 3.5 : 0.5);\nconst cellY = (r) => Y0 + (r - 1) * RH;\nconst cap = (t) => t === BROOD || t === HONEY;\n\n// Which cell each LED sits in, and where in it.\nfunction grid(S) {\n  for (let y = TOP; y \u003c BOT; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r0 = round((y + 0.5 - Y0) / RH) + 1;\n      let [best, next] = [99, 99];\n      const p = y * W + x;\n      for (let r = max(0, r0 - 1); r \u003c= min(NR - 1, r0 + 1); r++) {\n        const off = r & 1 ? 3.5 : 0.5;\n        const c0 = round((x + 0.5 - off) / CW) + 1;\n        for (let c = max(0, c0 - 1); c \u003c= min(NC - 1, c0 + 1); c++) {\n          const dx = x + 0.5 - cellX(r, c);\n          const dy = y + 0.5 - cellY(r);\n          const d = hexd(dx, dy);\n          if (d \u003c best) {\n            next = best;\n            S.cid2[p] = S.cid[p];\n            best = d;\n            S.cid[p] = r * NC + c;\n            [S.hd[p], S.dx[p], S.dy[p]] = [d, dx, dy];\n          } else if (d \u003c next) {\n            next = d;\n            S.cid2[p] = r * NC + c;\n          }\n        }\n      }\n    }\n}\n\n// Honey over the top and down the corners, a band of pollen, brood below.\nfunction layout(S) {\n  for (let r = 0; r \u003c NR; r++)\n    for (let c = 0; c \u003c NC; c++) {\n      const i = r * NC + c;\n      const [x, y] = [cellX(r, c), cellY(r)];\n      const e = len((x - 32) / 33, (y - 70) / 28) + 0.05 * (sin(x * 0.21 + y * 0.13) + sin(y * 0.29 - x * 0.17 + 2));\n      const u = rnd();\n      let t;\n      if (y \u003c 24 || (e > 1.28 && y \u003c 64)) t = u \u003c 0.82 ? HONEY : u \u003c 0.95 ? NECTAR : EMPTY;\n      else if (e > 1 && y \u003c 72) t = u \u003c 0.62 ? POLLEN : u \u003c 0.78 ? NECTAR : EMPTY;\n      else if (e \u003c 0.72) t = u \u003c 0.68 ? BROOD : u \u003c 0.78 ? LARVA : u \u003c 0.81 ? EGG : EMPTY;\n      else if (e \u003c 1) t = u \u003c 0.34 ? LARVA : u \u003c 0.48 ? EGG : u \u003c 0.64 ? BROOD : u \u003c 0.68 ? POLLEN : EMPTY;\n      else t = u \u003c 0.12 ? POLLEN : u \u003c 0.27 ? NECTAR : EMPTY;\n      [S.type[i], S.age[i], S.tint[i], S.gap[i], S.pol[i]] = [t, rnd(), rnd(), rnd() * 6.283, floor(rnd() * 8)];\n    }\n}\n\n// Each LED's colour as it would be in white light, and how much of the\n// sun reaches it: cell bottoms stay in shadow.\nfunction paint(S) {\n  const { base, expo } = S;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    let r, g, b;\n    let ex = 1;\n    let dim = 0.66;\n    if (y \u003c TOP || y >= BOT) {\n      // Pine, the grain running along the bar, a groove where it meets the comb.\n      const gr = 0.8 + 0.2 * sin(x * 0.23 + 2 * sin(x * 0.07 + y * 1.3));\n      const edge = y === TOP - 1 || y === BOT ? 0.55 : 1;\n      const k = gr * edge * (0.9 + 0.1 * hash(p, 5));\n      [r, g, b] = [0.6 * k, 0.42 * k, 0.24 * k];\n      if (y > BOT + 1 && y \u003c H - 1 && abs(x + 0.5 - ENX) \u003c 5) [r, g, b] = [0.02, 0.015, 0.01];\n    } else {\n      const [i, d, dx, dy] = [S.cid[p], S.hd[p], S.dx[p], S.dy[p]];\n      const [t, tn, rr, lit] = [S.type[i], S.tint[i], len(dx, dy), -(dx + dy) / 3];\n      if (t === HONEY) {\n        dim = 1;\n        const k = (1 - 0.12 * (d / 2.6) ** 2 + 0.06 * lit) * (0.95 + 0.06 * hash(p, 1));\n        [r, g, b] = [(1 - 0.04 * tn) * k, (0.88 - 0.16 * tn) * k, (0.6 - 0.26 * tn) * k];\n      } else if (t === NECTAR) {\n        // Nectar: dark amber down in the cell, a bright meniscus round it, and a glint.\n        const f = (0.08 + 0.92 * sm(1.5, 2.4, d)) * (0.75 + 0.3 * tn);\n        [r, g, b] = [0.07 + 0.62 * f, 0.03 + 0.36 * f, 0.006 + 0.06 * f];\n        if (abs(dx + 1) \u003c 0.6 && abs(dy + 1) \u003c 0.7) [r, g, b] = [0.95, 0.9, 0.74];\n        ex = 0.6;\n      } else if (t === POLLEN) {\n        const c = POLLENS[S.pol[i]];\n        dim = 0.8;\n        // Packed down in the cell, its inside wall in shadow round it.\n        const k = (0.8 + 0.25 * tn) * (1 - 0.85 * sm(1.5, 2.3, d));\n        [r, g, b] = c.map((v, n) => v * k * (0.82 + 0.3 * hash(p, 2 + n)));\n        ex = 0.8;\n      } else if (t === BROOD) {\n        const k = (1 - 0.32 * (rr / 2.7) ** 2 + 0.1 * lit) * (hash(p, 6) \u003c 0.14 ? 0.78 : 1) * (0.9 + 0.15 * tn);\n        [r, g, b] = [0.8 * k, 0.68 * k, 0.5 * k];\n      } else {\n        // An open cell: dark at the bottom, its lower inside wall catching the light.\n        const lip = sm(1.6, 2.4, d) * (dy > 0.5 ? 1 : 0.3);\n        const k = (0.04 + 0.1 * lip) * (0.75 + 0.5 * tn);\n        [r, g, b] = [k, k * 0.68, k * 0.38];\n        ex = 0.2 + 0.8 * lip;\n        if (t === LARVA) {\n          // The larva curled in a C on its bed of jelly, bigger as it grows.\n          const a = S.age[i];\n          const [R, th] = [0.4 + 1.1 * a, 0.45 + 0.55 * a];\n          const ang = wrap(atan2(dy, dx) - S.gap[i]);\n          let on = a \u003c 0.3 ? sm(1.2, 0.5, rr) : sm(th + 0.3, th - 0.3, abs(rr - R)) * sm(0.5, 1, abs(ang));\n          if (rr \u003c 1.9) [r, g, b] = [r + 0.18, g + 0.17, b + 0.14];\n          const sh = 0.82 + 0.18 * clamp(lit + 0.5, 0, 1) + 0.05 * sin(ang * 5);\n          r += (0.97 * sh - r) * on;\n          g += (0.94 * sh - g) * on;\n          b += (0.85 * sh - b) * on;\n          ex += (0.9 - ex) * on;\n        } else if (t === EGG && rr \u003c 0.7) [r, g, b] = [0.86, 0.85, 0.78];\n      }\n      // The walls: pale wax round the honey, the rims of open cells lit,\n      // and a dark seam where two brood caps meet.\n      const w = sm(2.4, 2.6, d);\n      if (w > 0) {\n        const t2 = S.type[S.cid2[p]];\n        const pale = t === HONEY || t === NECTAR ? 1 : 0;\n        const seam = (t === BROOD || t2 === BROOD) && cap(t) && cap(t2) ? 0.15 : 1;\n        // Light from above rakes the slanted walls; the upright ones stand side on to it.\n        const k = (0.85 + 0.3 * hash(p, 8)) * seam * (!pale && abs(dx) > 2.6 ? 0.45 : 1);\n        r += ((0.34 + 0.18 * pale) * k - r) * w;\n        g += ((0.24 + 0.15 * pale) * k - g) * w;\n        b += ((0.11 + 0.08 * pale) * k - b) * w;\n        ex += ((seam \u003c 1 ? 0.15 : 1) - ex) * w;\n      }\n    }\n    // The comb sits back in the hive's shade; the bees on it catch the light.\n    base[q] = r * dim;\n    base[q + 1] = g * dim;\n    base[q + 2] = b * dim;\n    expo[p] = ex;\n  }\n}\n\n// The window throws its four panes of sun on the glass; they slide and lean with the sun.\nfunction sunPatch(S, s) {\n  const [cx, cy, sh] = [32 + 22 * s, 74 - 6 * abs(s), -0.5 * s];\n  for (let p = 0; p \u003c N; p++) {\n    const v = ((p / W) | 0) + 0.5 - cy;\n    const u = (p % W) + 0.5 - cx - sh * v;\n    let m = sm(22, 16, abs(u)) * sm(40, 33, abs(v));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(u));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(v + 5));\n    S.sun[p] = m;\n  }\n  S.sunK = s;\n}\n\nfunction newBee(S, x, y, h) {\n  const u = rnd();\n  const b = { x, y, h, m: CRAWL, t: rnd() * 3, v: 2.6 + 2.6 * rnd(), s: 1.12 + 0.14 * rnd(), tone: u \u003c 0.18 ? 0 : u \u003c 0.82 ? 1 : 2, ph: rnd() * 6.28, w: 0, wag: 0, wp: 0 };\n  S.bees.push(b);\n  return b;\n}\n\n// A bee to the dance floor on the lower comb, clear of the other dances.\nfunction spot(S) {\n  let best = [32, 104];\n  let far = -1;\n  for (let k = 0; k \u003c 24; k++) {\n    const x = 12 + 40 * rnd();\n    const y = 80 + 33 * rnd();\n    // The lower the better, near the entrance, but well clear of the others.\n    const d = min(24, ...S.dances.map((D) => len(D.cx - x, D.cy - y))) + 0.1 * y;\n    if (d > far) [far, best] = [d, [x, y]];\n  }\n  return best;\n}\n\nfunction newDance(S, b, vig) {\n  const [cx, cy] = spot(S);\n  // A forager from a rich patch runs longer, keeps at it and draws more followers.\n  const D = { b, cx, cy, fl: FIELDS[floor(rnd() * 4)] + 0.12 * (rnd() - 0.5), L: vig ? 11 : 8 + 2.5 * rnd(), tw: vig ? 1.25 : 0.85 + 0.3 * rnd(),\n    tr: vig ? 0.9 : 1 + 0.3 * rnd(), tau: 0, side: rnd() \u003c 0.5 ? -1 : 1, n: vig ? 26 : 9 + floor(10 * rnd()), amp: vig ? 1 : 0.65 + 0.2 * rnd(),\n    want: vig ? 10 : 6 + floor(3 * rnd()), on: false, foll: [], rec: 0, pc: floor(rnd() * 3) };\n  D.th = D.fl - S.sunA;\n  b.D = D;\n  S.dances.push(D);\n  return D;\n}\n\n// The bees nearest the dance turn and gather round it.\nfunction recruit(S, D, snap) {\n  const free = S.bees.filter((b) => (b.m === CRAWL || b.m === REST) && len(b.x - D.cx, b.y - D.cy) \u003c 24);\n  free.sort((a, b) => len(a.x - D.cx, a.y - D.cy) - len(b.x - D.cx, b.y - D.cy));\n  for (const b of free) {\n    if (D.foll.length >= D.want) break;\n    Object.assign(b, { m: FOLLOW, D, a: atan2(b.x - D.cx, -(b.y - D.cy)), t: 5 + 10 * rnd() });\n    D.foll.push(b);\n    if (snap) {\n      const R = D.L / 2 + 3.4;\n      b.x = D.cx + R * sin(b.a);\n      b.y = D.cy - R * cos(b.a);\n      b.h = b.a + PI;\n    }\n  }\n}\n\nfunction seek(b, tx, ty, sp, dt) {\n  const [dx, dy] = [tx - b.x, ty - b.y];\n  const r = len(dx, dy);\n  if (r > 0.25) {\n    const want = atan2(dx, -dy);\n    const e = wrap(want - b.h);\n    b.h += clamp(e, -5 * dt, 5 * dt);\n    const st = min(r, sp * dt) * max(0.15, cos(e));\n    b.x += sin(b.h) * st;\n    b.y -= cos(b.h) * st;\n  }\n  return r;\n}\n\nfunction stepDance(S, D, dt) {\n  const b = D.b;\n  D.th += clamp(wrap(D.fl - S.sunA - D.th), -1.5 * dt, 1.5 * dt);\n  const [ux, uy] = [sin(D.th), -cos(D.th)];\n  if (!D.on) {\n    // The forager hurries up from the entrance to where she will dance.\n    b.m = HOME;\n    if (seek(b, D.cx - (ux * D.L) / 2, D.cy - (uy * D.L) / 2, D.n > 20 ? 13 : 9, dt) \u003c 1.2) {\n      D.on = true;\n      b.m = DANCE;\n      recruit(S, D, false);\n    }\n    return;\n  }\n  D.tau += dt;\n  if (D.tau >= D.tw + D.tr) {\n    D.tau -= D.tw + D.tr;\n    D.side = -D.side;\n    if (--D.n \u003c= 0) {\n      // Done: she goes back out, and some of her followers go after the flowers.\n      [D.gone, b.m, b.wag] = [true, EXIT, 0];\n      for (const f of D.foll) [f.m, f.t] = [rnd() \u003c 0.4 ? EXIT : CRAWL, 1 + 2 * rnd()];\n      return;\n    }\n  }\n  let want;\n  if (D.tau \u003c D.tw) {\n    const f = D.tau / D.tw - 0.5;\n    b.x = D.cx + ux * D.L * f;\n    b.y = D.cy + uy * D.L * f;\n    want = D.th;\n    b.wag = D.amp;\n    b.wp += dt * 2 * PI * 13;\n  } else {\n    const s = (D.tau - D.tw) / D.tr;\n    const ps = D.side * PI * s;\n    const [rx, ry] = [ux * cos(ps) - uy * sin(ps), ux * sin(ps) + uy * cos(ps)];\n    b.x = D.cx + (rx * D.L) / 2;\n    b.y = D.cy + (ry * D.L) / 2;\n    want = atan2(-D.side * ry, -D.side * rx);\n    b.wag = 0;\n  }\n  b.h += clamp(wrap(want - b.h), -14 * dt, 14 * dt);\n  // Followers keep their place round her, turned to face her, and drift with her.\n  D.foll = D.foll.filter((f) => f.m === FOLLOW && f.D === D);\n  D.rec -= dt;\n  if (D.rec \u003c= 0) {\n    D.rec = 1.5;\n    if (D.foll.length \u003c D.want) recruit(S, D, false);\n  }\n  const da = atan2(b.x - D.cx, -(b.y - D.cy));\n  for (const f of D.foll) {\n    f.a += dt * 0.35 * sin(wrap(da - f.a));\n    const R = D.L / 2 + 3.4 + 0.4 * sin(S.t * 2 + f.ph);\n    if (seek(f, D.cx + R * sin(f.a), D.cy - R * cos(f.a), 6, dt) \u003c 1.2) f.h += clamp(wrap(atan2(b.x - f.x, -(b.y - f.y)) - f.h), -6 * dt, 6 * dt);\n    if ((f.t -= dt) \u003c= 0) [f.m, f.t, f.h] = [CRAWL, 1 + 2 * rnd(), f.h + PI];\n  }\n}\n\nfunction crawl(S, b, dt) {\n  b.w += (rnd() - 0.5) * 10 * sqrt(dt);\n  b.w *= 1 - min(1, 1.5 * dt);\n  let want = null;\n  const ex = b.x \u003c 4 ? 1 : b.x > W - 4 ? -1 : 0;\n  const ey = b.y \u003c TOP + 4 ? 1 : b.y > BOT - 4 ? -1 : 0;\n  if (ex || ey) want = atan2(ex, -ey);\n  b.h += b.w * dt;\n  if (want !== null) b.h += clamp(wrap(want - b.h), -3 * dt, 3 * dt);\n  const st = b.v * dt;\n  b.x += sin(b.h) * st;\n  b.y -= cos(b.h) * st;\n}\n\nfunction step(S, dt) {\n  const { bees } = S;\n  for (const b of bees) {\n    const m = b.m;\n    if (m === DANCE || m === HOME || m === FOLLOW) continue;\n    if (m === EXIT) {\n      if (seek(b, ENX, BOT + 1.5, 7, dt) \u003c 1.5) b.out = true;\n      continue;\n    }\n    // Others give the dancer and her followers room.\n    for (const D of S.dances) {\n      const [dx, dy] = [b.x - D.cx, b.y - D.cy];\n      const r = len(dx, dy);\n      if (D.on && r \u003c D.L / 2 + 9) {\n        if (m !== CRAWL) b.t = 0;\n        b.x += (dx / (r + 0.01)) * 4 * dt;\n        b.y += (dy / (r + 0.01)) * 4 * dt;\n        b.h += clamp(wrap(atan2(dx, -dy) - b.h), -4 * dt, 4 * dt);\n      }\n    }\n    if (m === CRAWL) crawl(S, b, dt);\n    else if (m === REST) b.h += sin(S.t * 6 + b.ph) * 0.5 * dt;\n    if ((b.t -= dt) > 0) continue;\n    // Backing out of a cell, she turns away.\n    if (m === DIP) [b.x, b.y, b.h] = [b.x - sin(b.h) * 1.5, b.y + cos(b.h) * 1.5, b.h + PI * (0.6 + 0.8 * rnd())];\n    const u = rnd();\n    b.m = CRAWL;\n    b.t = 1 + 3 * rnd();\n    if (u \u003c 0.28) [b.m, b.t] = [REST, 0.8 + 2.5 * rnd()];\n    else if (u \u003c 0.5 && m !== DIP) {\n      // Head first into a cell: to feed a larva, take nectar or pack pollen.\n      const hx = round(b.x + sin(b.h) * 2.2 - 0.5);\n      const hy = round(b.y - cos(b.h) * 2.2 - 0.5);\n      if (hx >= 0 && hx \u003c W && hy >= TOP + 2 && hy \u003c BOT - 2) {\n        const i = S.cid[hy * W + hx];\n        const t = S.type[i];\n        if (t !== HONEY && t !== BROOD) {\n          const r = floor(i / NC);\n          [b.m, b.t] = [DIP, 2 + 4 * rnd()];\n          b.x = cellX(r, i % NC) - sin(b.h) * 1.5;\n          b.y = cellY(r) + cos(b.h) * 1.5;\n        }\n      }\n    }\n  }\n  for (const D of S.dances) stepDance(S, D, dt);\n  S.dances = S.dances.filter((D) => !D.gone);\n  for (const b of bees) if (b.D && (b.D.gone || (b.m !== FOLLOW && b.m !== DANCE && b.m !== HOME))) b.D = null;\n  // Bees shoulder each other apart; those still at a cell or dancing stand firm.\n  for (const a of bees) {\n    if (a.m === REST || a.m === DIP || a.m === DANCE) continue;\n    for (const b of bees) {\n      const dx = a.x - b.x;\n      const dy = a.y - b.y;\n      if (abs(dx) > 3.6 || abs(dy) > 3.6 || b === a) continue;\n      const r = len(dx, dy);\n      if (r \u003c 3.6 && r > 0.01) {\n        a.x += (dx / r) * (3.6 - r) * 0.25;\n        a.y += (dy / r) * (3.6 - r) * 0.25;\n      }\n    }\n  }\n  S.bees = bees.filter((b) => !b.out);\n}\n\nexport function setup(params) {\n  const S = { t: 0, started: false, sunA: 0, sunK: 9, next: 6, add: 0, c0: 4.2, c1: 8.5, cd: 0.55, bees: [], dances: [] };\n  for (const k of [\"cid\", \"cid2\"]) S[k] = new Int16Array(N);\n  for (const k of [\"hd\", \"dx\", \"dy\", \"expo\", \"X\", \"amb\", \"pool\", \"sun\"]) S[k] = new Float32Array(N);\n  for (const k of [\"base\", \"A\", \"jit\"]) S[k] = new Float32Array(N * 3);\n  for (const k of [\"age\", \"tint\", \"gap\"]) S[k] = new Float32Array(NR * NC);\n  for (const k of [\"type\", \"pol\"]) S[k] = new Uint8Array(NR * NC);\n  grid(S);\n  layout(S);\n  paint(S);\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p % W, (p / W) | 0];\n    S.amb[p] = 0.74 + 0.2 * (1 - y / H) + 0.03 * sin(x * 0.11 + y * 0.05) - 0.12 * ((x - 31.5) / 32) ** 4;\n    S.pool[p] = 0.42 + 0.6 * exp(-((x - 40) ** 2 + (y - 74) ** 2) / 3000);\n    const j = 0.94 + 0.12 * hash(p, 19);\n    for (let c = 0; c \u003c 3; c++) S.jit[p * 3 + c] = j * (0.97 + 0.06 * hash(p, 20 + c));\n  }\n  params.s = S;\n}\n\nfunction start(S, n) {\n  // Bees thickest on the brood, two dances already going.\n  for (let k = 0; k \u003c n; k++) {\n    let x, y;\n    for (let j = 0; j \u003c 4; j++) {\n      x = 2 + 60 * rnd();\n      y = TOP + 3 + (BOT - TOP - 6) * rnd();\n      if (rnd() \u003c 0.35 + 0.65 * sm(30, 70, y)) break;\n    }\n    newBee(S, x, y, rnd() * 6.28);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const b = newBee(S, 0, 0, 0);\n    const D = newDance(S, b, false);\n    Object.assign(D, { fl: k ? 0.08 : -0.1, cx: k ? 20 : 43, cy: k ? 111 : 102, on: true, tau: rnd() * (D.tw + D.tr), rec: 1.5 });\n    D.th = D.fl - S.sunA;\n    b.m = DANCE;\n    stepDance(S, D, 0);\n    b.h = D.tau \u003c D.tw ? D.th : b.h;\n    recruit(S, D, true);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.light = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  const want = round(clamp(k[2], 80, 240));\n  const sk = clamp(k[3], -1, 1);\n  S.sunA = sk * PI;\n  if (abs(sk - S.sunK) > 0.002) sunPatch(S, sk);\n  if (!S.started) {\n    S.started = true;\n    start(S, want);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  // Clouds cross the sun now and then; the first one early.\n  if (S.t > S.c1 + 1.5) {\n    S.c0 = S.t + 8 + 20 * rnd();\n    S.c1 = S.c0 + 3 + 6 * rnd();\n    S.cd = 0.4 + 0.5 * rnd();\n  }\n  S.cloud = 1 - S.cd * sm(S.c0, S.c0 + 1.5, S.t) * sm(S.c1 + 1.5, S.c1, S.t);\n  const vig = input.btnPressed && input.btnPressed[0];\n  if ((S.next -= d) \u003c= 0 || vig) {\n    if (S.dances.length \u003c (vig ? 4 : 3)) {\n      const b = newBee(S, ENX + 4 * (rnd() - 0.5), BOT + 1, 0);\n      b.m = HOME;\n      newDance(S, b, vig);\n    }\n    if (!vig) S.next = 5 + 8 * rnd();\n  }\n  // Bees walk in from the sides, or go out at the entrance, to match the knob.\n  let ord = 0;\n  for (const b of S.bees) if (b.m \u003c= FOLLOW) ord++;\n  if ((S.add -= dt) \u003c= 0) {\n    S.add = 0.1;\n    if (ord \u003c want) {\n      const l = rnd() \u003c 0.5;\n      newBee(S, l ? -3 : W + 3, TOP + 8 + (BOT - TOP - 16) * rnd(), l ? PI / 2 : -PI / 2).t = 1.5;\n    } else if (ord > want + 2) {\n      const b = S.bees.find((b) => b.m === CRAWL);\n      if (b) b.m = EXIT;\n    }\n  }\n  step(S, d);\n}\n\n// One bee into the albedo: her body worked out on a 12 x 12 patch first,\n// then her shadow a step down and right, head, thorax, banded abdomen, wings.\nconst PC = new Float32Array(144);\nconst PP = new Uint8Array(144);\nfunction bee(S, b) {\n  const { A, X } = S;\n  const [s, fx, fy, dip, wg] = [b.s, sin(b.h), -cos(b.h), b.m === DIP, b.wag > 0];\n  const wag = wg ? b.wag * sin(b.wp) : b.m === REST ? 0.15 * sin(S.t * 9 + b.ph) : 0;\n  const [bl, th, am] = [wg ? 0.4 : 0, THX[b.tone], AMB[b.tone]];\n  const shim = 0.24 + 0.14 * sin(S.t * 2.3 + b.ph + b.x * 0.3);\n  // A box round her, the whole patch for a dancer and her blur.\n  const ax = wg ? 5 : s * (3.2 * abs(fx) + 1.9 * abs(fy)) + 0.5;\n  const ay = wg ? 5 : s * (3.2 * abs(fy) + 1.9 * abs(fx)) + 0.5;\n  const [x0, y0] = [floor(b.x - ax), floor(b.y - ay)];\n  const nw = min(12, floor(b.x + ax) - x0 + 2);\n  const nh = min(12, floor(b.y + ay) - y0 + 2);\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const X0 = x0 + i + 0.5 - b.x;\n      const Y0 = y0 + j + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      PC[k] = shape(u, v, s, dip, bl);\n      PP[k] = PART;\n    }\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      const c = PC[k];\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      const q = p * 3;\n      const sh = i && j ? PC[k - nw - 1] : 0;\n      if (sh > 0) {\n        const f = 1 - 0.7 * sh * (1 - c);\n        A[q] *= f;\n        A[q + 1] *= f;\n        A[q + 2] *= f;\n      }\n      const X0 = px + 0.5 - b.x;\n      const Y0 = py + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      // A waggling dancer buzzes her wings into a pale blur round her.\n      let wa = wg ? 0.55 * clamp(1.6 - len((u + 0.7) / 1.5, v / 1.7), 0, 1) : 0;\n      if (c \u003c= 0 && wa \u003c= 0) continue;\n      const pt = PP[k];\n      const col = pt === 1 ? HEAD : pt === 2 ? th : null;\n      const st = u > -0.85 ? 1 : u > -1.35 ? 0 : u > -1.9 ? 0.8 : 0;\n      if (u > -2.2 && u \u003c 0.3 && abs(v) > 0.35 && abs(v) \u003c 1.15) wa = max(wa, shim);\n      const a = max(c, wa);\n      for (let n = 0; n \u003c 3; n++) {\n        let e = col ? col[n] : DARK[n] + (am[n] - DARK[n]) * st;\n        e += (WING[n] - e) * wa;\n        A[q + n] += (e - A[q + n]) * a;\n      }\n      X[p] += (1 - X[p]) * a;\n    }\n  // A forager home from the field carries her pollen loads on her hind legs.\n  if (b.D && (b.m === DANCE || b.m === HOME)) {\n    const c = POLLENS[b.D.pc];\n    for (const sd of [-1, 1]) {\n      const px = round(b.x + s * (-0.7 * fx - sd * 1.25 * fy) - 0.5);\n      const py = round(b.y + s * (-0.7 * fy + sd * 1.25 * fx) - 0.5);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      [A[q], A[q + 1], A[q + 2], X[py * W + px]] = [...c, 1];\n    }\n  }\n}\n\n// Coverage of a bee's body at (u along, v across) in body lengths of\n// about five LEDs; PART says which piece.\nlet PART = 0;\nfunction shape(u, v, s, dip, bl) {\n  let c = clamp((1 - len((u + 1.3) / 1.5, v / (1.12 + bl))) * 1.2 * s + 0.5, 0, 1);\n  PART = 3;\n  if (!dip || u \u003c 0.3) {\n    const k = clamp((1 - len((u - 0.5) / 0.8, v)) * 0.9 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 2];\n  }\n  if (!dip) {\n    const k = clamp((1 - len((u - 1.65) / 0.6, v / 0.75)) * 0.7 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 1];\n  }\n  return c;\n}\n\nconst knee = (c) => (c \u003c 190 ? c : 190 + 65 * (1 - exp(-(c - 190) / 65)));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { A, X, base, expo, amb, sun, pool, jit } = S;\n  A.set(base);\n  X.set(expo);\n  for (const b of S.bees) if (b.m !== DANCE) bee(S, b);\n  for (const b of S.bees) if (b.m === DANCE) bee(S, b);\n  // The curtain closes on the sun first; the room light goes from daylight\n  // to a warm lamp over the hive by 0.5, and from that to the red lamp.\n  const L = S.light;\n  const [w, rd, pw] = [sm(0, 0.5, L), sm(0.5, 1, L), sm(0.15, 0.6, L)];\n  const dc = [0, 1, 2].map((c) => (DAYC[c] + (WARM[c] - DAYC[c]) * w + (REDC[c] - WARM[c]) * rd) * (1 - 0.1 * w - 0.1 * rd) * 255);\n  const sk = 0.9 * S.cloud * (1 - sm(0, 0.4, L)) * 255;\n  const o = [0, 0, 0];\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const a = amb[p] + (pool[p] - amb[p]) * pw;\n    const s = sun[p] * X[p] * sk;\n    for (let c = 0; c \u003c 3; c++) o[c] = knee(A[q + c] * (a * dc[c] + s * SUNC[c]) * jit[q + c]) | 0;\n    display.setPixel(p % W, (p / W) | 0, o[0], o[1], o[2]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower."},{"name":"Bees","min":80,"max":240,"about":"Eighty to 240; turned up, more walk in from the sides until they hide the comb."},{"name":"Sun","min":-1,"max":1,"about":"The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass."}],"start":[0,2,80,0.06],"measures":{"motion":0.2561,"detail":0.1412,"edges":0.4465,"complexity":2.5302,"coverage":0.7323,"colour":0.2225,"drift":0.0504},"knobResponse":[0.1684,0.0666,0.1239,0.0576]},{"slug":"warp","title":"Warp","family":"space","round":15,"note":"별 사이를 워프로 날아요. 별은 앞쪽에서 얼음빛 파랑이고, 옆으로 지나가며 자홍 줄로 늘어나요. K1 을 누르면 워프에서 빠져 멈췄다가 흰 빛과 함께 다시 들어가요.","idea":"A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.","buttons":"K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.","code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","layer":{"id":"layer-warp","type":"code","name":"warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel."},{"name":"Warp","min":0.2,"max":4,"about":"How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel."},{"name":"Stars","min":420,"max":1400,"about":"How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard."},{"name":"Steer","min":-1,"max":1,"about":"The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn."}],"start":[0,2,420,0.06],"measures":{"motion":2.077,"detail":0.0623,"edges":0.3496,"complexity":0.991,"coverage":0.2025,"colour":0.1354,"drift":0.0642},"knobResponse":[0.0455,0.0994,0.1476,0.0712]},{"slug":"waterfall","title":"Waterfall","family":"weather","round":14,"note":"강이 벼랑 끝을 넘어 패널 높이를 다 떨어져 소에 닿아요. 벼랑 끝에서 청록 유리 같던 물은 떨어지며 하얘지고, 소에서 오르는 안개에 무지개 한 토막이 서요. K3 바람을 끝까지 돌리면 돌풍이 물줄기를 찢어 물보라로 날려 올리고, K1 을 누르면 통나무 하나가 벼랑 끝을 넘어와요.","idea":"A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.","buttons":"K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.","code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","layer":{"id":"layer-waterfall","type":"code","name":"waterfall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly."},{"name":"Spate","min":0,"max":1,"about":"How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match."}],"start":[0,2,0,0.06],"measures":{"motion":0.6549,"detail":0.0595,"edges":0.3161,"complexity":1.514,"coverage":0.9639,"colour":0.146,"drift":0.0724},"knobResponse":[0.0442,0.112,0.1828,0.287]},{"slug":"weaver","title":"Weaver","family":"bird","round":22,"note":"강 위로 뻗은 아카시아 가지 끝에서 수컷 마을베짜기새가 둥지를 지어요. 갈대 잎을 찢어 문 초록 띠를 벽에 꿰어 당기면 둥지가 고리에서 둥근 방으로, 다시 아래로 열린 입구로 한 가닥씩 자라고, 묵은 띠는 짚 색으로 바래요. K1 을 누르면 암컷이 날아와 둥지를 살피고, 다 지은 둥지가 퇴짜를 맞으면 수컷이 끊어 강에 떨어뜨리고 새 고리부터 다시 지어요.","idea":"A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.","buttons":"K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.","code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","layer":{"id":"layer-weaver","type":"code","name":"weaver","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plumage","min":0,"max":2,"about":"A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in."},{"name":"Nests","min":3,"max":9,"about":"Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance."},{"name":"Sky","min":0,"max":1,"about":"Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left."}],"start":[0,2,3,0.06],"measures":{"motion":0.1278,"detail":0.0716,"edges":0.3689,"complexity":2.2916,"coverage":0.9985,"colour":0.2367,"drift":0.0436},"knobResponse":[0.0466,0.0543,0.0568,0.2018]},{"slug":"whipped-soap","title":"Whipped Soap","family":"cosmetic","round":36,"note":"보이지 않는 별 깍지가 휘핑 바디 솝을 한 송이씩 짜는데, 한 바퀴가 앞 바퀴에 반쯤 얹히며 뾰족하게 솟아요. 쟁반이 두 칸 네 줄로 차면 긁개가 거품을 말아 아래로 밀어 내요. K3 은 깍지의 별 꼭짓점 수라서 굵은 골 두세 줄이 가는 골 네다섯 줄로 바뀌고, K1 을 누르면 쟁반을 바로 밀어요.","idea":"An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.","buttons":"K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.","code":"// ===== Patternflow pattern =====\n// Title:   Whipped Soap\n// Family:  cosmetic\n// Idea:    An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after whipped body soap piped into rosettes in handmade soap shops\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1\n//\n// Knob 1: Hue. Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Ridges. The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together.\n// Knob 4: Swirl. How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high.\n// Buttons: K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, ceil, min, max, sqrt, sin, cos, tan, atan2, abs, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The tray: two rosettes across and four down, each in a square 32 LEDs on a side.\nconst COLS = 2, ROWS = 4, NR = COLS * ROWS, CWD = W / COLS, CHT = H / ROWS;\n// The nozzle's path starts R0 LEDs from the rosette's centre; the bead it\n// lays is RB LEDs in radius across and stands SQ times that tall.\nconst R0 = 10, RB = 4.6, SQ = 1.2;\n// How deep the star's notches cut into the bead, and how far the star turns\n// round the bead for each LED the nozzle travels.\nconst NOTCH = 0.45, TWIST = 0.11;\n// The nozzle runs VN LEDs a second at Speed 2.\nconst VN = 30;\n// A turn lands on the foam laid at least LAG LEDs of path earlier: the\n// bead never sits on itself.\nconst LAG = 2.6 * RB;\n// A soft light from the upper left (x right, y down the panel, z out of\n// it), ELV radians above the tray, swings SWING radians either way and back\n// every SWAY seconds at Speed 2, so shadows and sheen slide round the swirls.\nconst ELV = 0.58, TANE = tan(ELV), AZ0 = atan2(-0.65, -0.6), SWING = 0.5, SWAY = 7;\n// Each LED keeps how high the foam stands toward the light, as a slope,\n// looking SHADOW LEDs out at three bearings across the swing.\nconst SHADOW = 16, NAZ = 3;\n// Opening hue: mint, not red.\nconst H0 = 0.45;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, ridges: 5, swirl: 0, begun: false,\n    hgt: new Float32Array(N), lag: new Float32Array(N), t: 0,\n    nx: new Float32Array(N), ny: new Float32Array(N), nz: new Float32Array(N).fill(1),\n    ao: new Float32Array(N).fill(1), hz: new Float32Array(N * NAZ), foam: new Float32Array(N),\n    pend: [], k: 0, pathS: 0, th: 0, ro: null, wait: 0,\n    scraping: false, ys: 0, vol: new Float32Array(W), roll: new Float32Array(W), tmp: new Float32Array(W),\n    dirty: [0, 0, W - 1, H - 1], prof: new Float32Array(41),\n    lit: [0, 0, 0], dark: [0, 0, 0], tray: [0, 0, 0],\n  };\n}\n\n// A rosette's place on the tray, a little off true as by hand, and where the\n// nozzle starts round it.\nfunction newRosette(S, k) {\n  const c = k % COLS, r = floor(k / COLS);\n  return {\n    cx: (c + 0.5) * CWD + (random() - 0.5) * 1.6, cy: (r + 0.5) * CHT + (random() - 0.5) * 1.6,\n    a0: random() * 2 * PI, dir: random() \u003c 0.5 ? 1 : -1, tw: random() * 2 * PI,\n  };\n}\n\n// The nozzle's path: angle th round the centre, out of 2 pi turns in all,\n// the radius closing from R0 to nothing. Each turn closes in by a step: the\n// bead's full width at Swirl -1, so the turns lie side by side; 0.9 of its\n// radius at 0, so each turn rests half on the one before; 0.57 at 1, a tall\n// cone.\nconst turnsOf = (S) => R0 / (RB * (S.swirl \u003c 0 ? 0.9 - 1.1 * S.swirl : 0.9 - 0.33 * S.swirl));\nfunction pathAt(S, ro, th) {\n  const T = 2 * PI * turnsOf(S), u = cl(th / T, 0, 1), r = R0 * (1 - u) ** 0.8;\n  const a = ro.a0 + ro.dir * th;\n  return { x: ro.cx + r * cos(a), y: ro.cy + r * sin(a), r, u, a };\n}\n\n// The star bead's top across its width. The star's outline,\n// rho = RB (1 - NOTCH + NOTCH (1 - |sin(n phi / 2)|)^2), sharp at the points\n// and round in the notches, is walked at 96 angles over its upper half, and\n// each edge between two of them lifts the 41 steps across it lies over.\nconst NP = 96;\nfunction profile(S, alpha, scale) {\n  const pr = S.prof, n = S.ridges;\n  pr.fill(0);\n  let ps = 0, pw = 0;\n  for (let m = 0; m \u003c= NP; m++) {\n    const ph = (m / NP) * PI, cr = 1 - abs(sin((n * (ph + alpha)) / 2));\n    const rho = RB * scale * (1 - NOTCH + NOTCH * cr * cr);\n    const s = ((rho * cos(ph)) / RB) * 20 + 20, w = rho * sin(ph) * SQ;\n    if (m > 0) {\n      const a = min(s, ps), b = max(s, ps);\n      for (let k = max(0, ceil(a)); k \u003c= min(40, floor(b)); k++) {\n        const t = b > a ? (k - ps) / (s - ps) : 0, v = pw + (w - pw) * t;\n        if (v > pr[k]) pr[k] = v;\n      }\n    }\n    ps = s;\n    pw = w;\n  }\n}\n\nfunction grow(S, x0, y0, x1, y1) {\n  const d = S.dirty;\n  d[0] = min(d[0], max(0, floor(x0)));\n  d[1] = min(d[1], max(0, floor(y0)));\n  d[2] = max(d[2], min(W - 1, ceil(x1)));\n  d[3] = max(d[3], min(H - 1, ceil(y1)));\n}\n\n// Height of the foam laid at least LAG earlier, under a point, bilinear.\nfunction lagAt(S, x, y) {\n  const u = cl(x - 0.5, 0, W - 1.001), v = cl(y - 0.5, 0, H - 1.001), i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n  const g = S.lag, p = j * W + i;\n  return (g[p] * (1 - fu) + g[p + 1] * fu) * (1 - fv) + (g[p + W] * (1 - fu) + g[p + W + 1] * fu) * fv;\n}\n\n// Lay the bead at one point of the path.\nfunction lay(S, ro, th) {\n  // The direction of travel, from a step back along the path, which still\n  // has length at the centre where the radius closes to nothing.\n  const P = pathAt(S, ro, th), Q = pathAt(S, ro, max(0, th - 0.15));\n  let tx = P.x - Q.x, ty = P.y - Q.y;\n  const tl = hypot(tx, ty);\n  if (tl \u003c 1e-4) {\n    tx = -sin(P.a) * ro.dir;\n    ty = cos(P.a) * ro.dir;\n  } else {\n    tx /= tl;\n    ty /= tl;\n  }\n  // Over the last tenth the bead thins to a point as the nozzle lifts away.\n  const scale = 1 - 0.75 * sm(0.88, 1, P.u), lift = 2.2 * sm(0.85, 1, P.u);\n  profile(S, ro.tw + TWIST * S.pathS, scale);\n  // The bead rests on the turn before: on the foam under the nozzle or a\n  // little outward of it, whichever stands higher.\n  const ox = P.r > 0.01 ? (P.x - ro.cx) / P.r : 0, oy = P.r > 0.01 ? (P.y - ro.cy) / P.r : 0, rest = 0.45 * RB;\n  const base = max(lagAt(S, P.x, P.y), lagAt(S, P.x + ox * rest, P.y + oy * rest) - 0.6) + lift, pr = S.prof, R = RB + 1;\n  for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, ceil(P.y + R)); y++)\n    for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, ceil(P.x + R)); x++) {\n      const dx = x + 0.5 - P.x, dy = y + 0.5 - P.y, along = dx * tx + dy * ty;\n      if (abs(along) > 0.75) continue;\n      const s = -dx * ty + dy * tx, b = ((s / RB) * 0.5 + 0.5) * 40;\n      if (b \u003c 0 || b > 40) continue;\n      const b0 = floor(b), b1 = min(40, b0 + 1), f = b - b0, w0 = pr[b0], w1 = pr[b1];\n      const v = base + w0 + (w1 - w0) * f, p = y * W + x;\n      if (v > S.hgt[p]) {\n        S.hgt[p] = v;\n        S.pend.push(p, v, S.pathS);\n      }\n    }\n  grow(S, P.x - R - 2, P.y - R - 2, P.x + R + SHADOW, P.y + R + SHADOW);\n}\n\n// Foam laid LAG or more of path ago becomes ground for the next turn.\nfunction settle(S, all) {\n  const q = S.pend;\n  let k = 0;\n  while (k \u003c q.length && (all || S.pathS - q[k + 2] > LAG)) {\n    const p = q[k];\n    if (q[k + 1] > S.lag[p]) S.lag[p] = q[k + 1];\n    k += 3;\n  }\n  if (k) q.splice(0, k);\n}\n\nfunction startScrape(S) {\n  if (S.scraping) return;\n  settle(S, true);\n  S.scraping = true;\n  S.ro = null;\n  S.ys = -8;\n  S.vol.fill(0);\n  S.roll.fill(0);\n}\n\nfunction step(S, dt) {\n  S.t += dt;\n  if (S.scraping) {\n    // A blade runs down the tray at 55 LEDs a second: everything above it\n    // is taken up, rolled ahead of it, and leaves past the bottom edge.\n    const y0 = S.ys, y1 = S.ys + 55 * dt;\n    for (let y = max(0, ceil(y0)); y \u003c min(H, ceil(y1)); y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        S.vol[x] += S.hgt[p];\n        S.hgt[p] = 0;\n        S.lag[p] = 0;\n      }\n    S.ys = y1;\n    // The roll spreads along the blade: its height across the panel is the\n    // scraped foam smoothed over about a rosette's width, lumpy as foam.\n    const v = S.vol, t = S.tmp, rl = S.roll;\n    for (let pass = 0; pass \u003c 2; pass++) {\n      const a = pass ? t : v, b = pass ? rl : t;\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let k = -7; k \u003c= 7; k++) sum += a[cl(x + k, 0, W - 1)];\n        b[x] = sum / 15;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) rl[x] = 0.55 * sqrt(rl[x]) * (0.85 + 0.15 * sin(x * 0.9 + S.ys * 0.21));\n    grow(S, 0, y0 - 3, W - 1, y1 + 10 + SHADOW);\n    if (S.ys > H + 14) {\n      S.scraping = false;\n      S.k = 0;\n      S.wait = 0.5;\n    }\n    return;\n  }\n  if (S.wait > 0) {\n    S.wait -= dt;\n    return;\n  }\n  if (!S.ro) {\n    if (S.k >= NR) {\n      startScrape(S);\n      return;\n    }\n    S.ro = newRosette(S, S.k);\n    S.th = 0;\n  }\n  // The nozzle runs on along its spiral, laying the bead every 0.4 LED.\n  const T = 2 * PI * turnsOf(S);\n  let left = VN * dt;\n  while (left > 0 && S.ro) {\n    const P = pathAt(S, S.ro, S.th), ds = min(0.4, left);\n    // Arc length per radian of the spiral, kept off zero at the centre.\n    const sp = max(1.2, hypot(P.r, (0.8 * R0 * (1 - P.u) ** -0.2) / T));\n    S.th += ds / sp;\n    S.pathS += ds;\n    left -= ds;\n    if (S.th >= T) {\n      lay(S, S.ro, T);\n      settle(S, true);\n      S.ro = null;\n      S.k++;\n      S.wait = 0.3;\n      break;\n    }\n    lay(S, S.ro, S.th);\n    settle(S, false);\n  }\n}\n\n// A whole rosette at once, for the tray the pattern opens on.\nfunction pipeNow(S) {\n  S.ro = newRosette(S, S.k);\n  S.th = 0;\n  while (S.ro) step(S, 0.02);\n  S.wait = 0;\n}\n\n// The roll of scraped foam ahead of the blade, at a column and row.\nfunction rollAt(S, x, y) {\n  const d = y + 0.5 - S.ys;\n  if (!S.scraping || d \u003c 0 || d > 8) return 0;\n  return S.roll[x] * sin((PI * d) / 8) ** 0.7;\n}\n\n// Survey the foam inside the dirty box: its normal, how far it sits in a\n// valley, and its horizon toward the light at each bearing.\nfunction survey(S) {\n  const d = S.dirty;\n  if (d[0] > d[2]) return;\n  const g = S.hgt, ht = (x, y) => {\n    const xi = cl(x, 0, W - 1), yi = cl(y, 0, H - 1);\n    return max(g[yi * W + xi], rollAt(S, xi, yi));\n  };\n  for (let y = d[1]; y \u003c= d[3]; y++)\n    for (let x = d[0]; x \u003c= d[2]; x++) {\n      const p = y * W + x, h0 = ht(x, y);\n      const gx = (ht(x + 1, y) - ht(x - 1, y)) * 0.5, gy = (ht(x, y + 1) - ht(x, y - 1)) * 0.5;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1);\n      S.nx[p] = -gx * inv;\n      S.ny[p] = -gy * inv;\n      S.nz[p] = inv;\n      // Valleys: the foam lower than its ring of neighbours two LEDs out.\n      const ring = (ht(x - 2, y) + ht(x + 2, y) + ht(x, y - 2) + ht(x, y + 2)) * 0.25;\n      S.ao[p] = 1 - 0.4 * sm(0, 2.2, ring - h0);\n      S.foam[p] = sm(0.08, 0.7, h0);\n      for (let k = 0; k \u003c NAZ; k++) {\n        const az = AZ0 + SWING * (k - 1), dx = cos(az), dy = sin(az);\n        let hor = -1;\n        for (let s = 1; s \u003c= SHADOW; s++) {\n          const e = (ht(round(x + dx * s), round(y + dy * s)) - h0) / s;\n          if (e > hor) hor = e;\n        }\n        S.hz[k * N + p] = hor;\n      }\n    }\n  d[0] = W;\n  d[1] = H;\n  d[2] = -1;\n  d[3] = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.ridges = round(cl(k[2], 5, 10));\n  S.swirl = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open on a tray half piped.\n    for (let i = 0; i \u003c 4; i++) pipeNow(S);\n    S.dirty = [0, 0, W - 1, H - 1];\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startScrape(S);\n  step(S, (d * S.speed) / 2);\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Peach, butter and lime go brown or olive when deep: there the foam is\n  // paled, its shadows lifted, and the tray taken down to near black.\n  const warm = sm(0.0, 0.07, hh) * (1 - sm(0.24, 0.34, hh));\n  hsv(h, 0.3 - 0.1 * warm, 1, S.lit);\n  hsv(h + 0.03, 0.5 - 0.2 * warm, 0.5 + 0.14 * warm, S.dark);\n  hsv(h + 0.05, 0.75 - 0.4 * warm, 0.24 - 0.15 * warm, S.tray);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  survey(S);\n  palette(S);\n  const { nx, ny, nz, ao, hz, foam, lit, dark, tray } = S;\n  // Where the light is now, and the half vector to the eye straight above.\n  const az = AZ0 + SWING * sin((2 * PI * S.t) / SWAY), ce = cos(ELV);\n  const lx = cos(az) * ce, ly = sin(az) * ce, lz = sin(ELV);\n  const hl = hypot(lx, ly, lz + 1), hx = lx / hl, hy = ly / hl, hz2 = (lz + 1) / hl;\n  const u = cl((az - AZ0) / SWING + 1, 0, 1.999), k = floor(u), fk = u - k, o0 = k * N, o1 = o0 + N;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, f = foam[p];\n      // Diffuse from the normal, darkened in valleys and where the foam\n      // toward the light stands above the light's own slope.\n      const hor = hz[o0 + p] + (hz[o1 + p] - hz[o0 + p]) * fk;\n      const shade = 1 - 0.8 * sm(TANE - 0.12, TANE + 0.4, hor);\n      const nl = max(0, nx[p] * lx + ny[p] * ly + nz[p] * lz);\n      const l = (0.2 + 0.8 * nl * shade) * ao[p];\n      // A faint sheen: matte foam, not frosting.\n      const nh = max(0, nx[p] * hx + ny[p] * hy + nz[p] * hz2), n2 = nh * nh, n4 = n2 * n2;\n      const sp = 0.14 * n4 * n4 * n4 * n2 * shade * f;\n      // Bare tray: its own colour, lit the same way and shadowed the same.\n      const tl = 0.2 + 0.8 * l;\n      const r = (dark[0] + (lit[0] - dark[0]) * l) * f + tray[0] * tl * (1 - f) + sp;\n      const g = (dark[1] + (lit[1] - dark[1]) * l) * f + tray[1] * tl * (1 - f) + sp;\n      const b = (dark[2] + (lit[2] - dark[2]) * l) * f + tray[2] * tl * (1 - f) + sp;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-whipped-soap","type":"code","name":"whipped-soap","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Whipped Soap\n// Family:  cosmetic\n// Idea:    An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after whipped body soap piped into rosettes in handmade soap shops\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1\n//\n// Knob 1: Hue. Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Ridges. The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together.\n// Knob 4: Swirl. How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high.\n// Buttons: K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, ceil, min, max, sqrt, sin, cos, tan, atan2, abs, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The tray: two rosettes across and four down, each in a square 32 LEDs on a side.\nconst COLS = 2, ROWS = 4, NR = COLS * ROWS, CWD = W / COLS, CHT = H / ROWS;\n// The nozzle's path starts R0 LEDs from the rosette's centre; the bead it\n// lays is RB LEDs in radius across and stands SQ times that tall.\nconst R0 = 10, RB = 4.6, SQ = 1.2;\n// How deep the star's notches cut into the bead, and how far the star turns\n// round the bead for each LED the nozzle travels.\nconst NOTCH = 0.45, TWIST = 0.11;\n// The nozzle runs VN LEDs a second at Speed 2.\nconst VN = 30;\n// A turn lands on the foam laid at least LAG LEDs of path earlier: the\n// bead never sits on itself.\nconst LAG = 2.6 * RB;\n// A soft light from the upper left (x right, y down the panel, z out of\n// it), ELV radians above the tray, swings SWING radians either way and back\n// every SWAY seconds at Speed 2, so shadows and sheen slide round the swirls.\nconst ELV = 0.58, TANE = tan(ELV), AZ0 = atan2(-0.65, -0.6), SWING = 0.5, SWAY = 7;\n// Each LED keeps how high the foam stands toward the light, as a slope,\n// looking SHADOW LEDs out at three bearings across the swing.\nconst SHADOW = 16, NAZ = 3;\n// Opening hue: mint, not red.\nconst H0 = 0.45;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, ridges: 5, swirl: 0, begun: false,\n    hgt: new Float32Array(N), lag: new Float32Array(N), t: 0,\n    nx: new Float32Array(N), ny: new Float32Array(N), nz: new Float32Array(N).fill(1),\n    ao: new Float32Array(N).fill(1), hz: new Float32Array(N * NAZ), foam: new Float32Array(N),\n    pend: [], k: 0, pathS: 0, th: 0, ro: null, wait: 0,\n    scraping: false, ys: 0, vol: new Float32Array(W), roll: new Float32Array(W), tmp: new Float32Array(W),\n    dirty: [0, 0, W - 1, H - 1], prof: new Float32Array(41),\n    lit: [0, 0, 0], dark: [0, 0, 0], tray: [0, 0, 0],\n  };\n}\n\n// A rosette's place on the tray, a little off true as by hand, and where the\n// nozzle starts round it.\nfunction newRosette(S, k) {\n  const c = k % COLS, r = floor(k / COLS);\n  return {\n    cx: (c + 0.5) * CWD + (random() - 0.5) * 1.6, cy: (r + 0.5) * CHT + (random() - 0.5) * 1.6,\n    a0: random() * 2 * PI, dir: random() \u003c 0.5 ? 1 : -1, tw: random() * 2 * PI,\n  };\n}\n\n// The nozzle's path: angle th round the centre, out of 2 pi turns in all,\n// the radius closing from R0 to nothing. Each turn closes in by a step: the\n// bead's full width at Swirl -1, so the turns lie side by side; 0.9 of its\n// radius at 0, so each turn rests half on the one before; 0.57 at 1, a tall\n// cone.\nconst turnsOf = (S) => R0 / (RB * (S.swirl \u003c 0 ? 0.9 - 1.1 * S.swirl : 0.9 - 0.33 * S.swirl));\nfunction pathAt(S, ro, th) {\n  const T = 2 * PI * turnsOf(S), u = cl(th / T, 0, 1), r = R0 * (1 - u) ** 0.8;\n  const a = ro.a0 + ro.dir * th;\n  return { x: ro.cx + r * cos(a), y: ro.cy + r * sin(a), r, u, a };\n}\n\n// The star bead's top across its width. The star's outline,\n// rho = RB (1 - NOTCH + NOTCH (1 - |sin(n phi / 2)|)^2), sharp at the points\n// and round in the notches, is walked at 96 angles over its upper half, and\n// each edge between two of them lifts the 41 steps across it lies over.\nconst NP = 96;\nfunction profile(S, alpha, scale) {\n  const pr = S.prof, n = S.ridges;\n  pr.fill(0);\n  let ps = 0, pw = 0;\n  for (let m = 0; m \u003c= NP; m++) {\n    const ph = (m / NP) * PI, cr = 1 - abs(sin((n * (ph + alpha)) / 2));\n    const rho = RB * scale * (1 - NOTCH + NOTCH * cr * cr);\n    const s = ((rho * cos(ph)) / RB) * 20 + 20, w = rho * sin(ph) * SQ;\n    if (m > 0) {\n      const a = min(s, ps), b = max(s, ps);\n      for (let k = max(0, ceil(a)); k \u003c= min(40, floor(b)); k++) {\n        const t = b > a ? (k - ps) / (s - ps) : 0, v = pw + (w - pw) * t;\n        if (v > pr[k]) pr[k] = v;\n      }\n    }\n    ps = s;\n    pw = w;\n  }\n}\n\nfunction grow(S, x0, y0, x1, y1) {\n  const d = S.dirty;\n  d[0] = min(d[0], max(0, floor(x0)));\n  d[1] = min(d[1], max(0, floor(y0)));\n  d[2] = max(d[2], min(W - 1, ceil(x1)));\n  d[3] = max(d[3], min(H - 1, ceil(y1)));\n}\n\n// Height of the foam laid at least LAG earlier, under a point, bilinear.\nfunction lagAt(S, x, y) {\n  const u = cl(x - 0.5, 0, W - 1.001), v = cl(y - 0.5, 0, H - 1.001), i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n  const g = S.lag, p = j * W + i;\n  return (g[p] * (1 - fu) + g[p + 1] * fu) * (1 - fv) + (g[p + W] * (1 - fu) + g[p + W + 1] * fu) * fv;\n}\n\n// Lay the bead at one point of the path.\nfunction lay(S, ro, th) {\n  // The direction of travel, from a step back along the path, which still\n  // has length at the centre where the radius closes to nothing.\n  const P = pathAt(S, ro, th), Q = pathAt(S, ro, max(0, th - 0.15));\n  let tx = P.x - Q.x, ty = P.y - Q.y;\n  const tl = hypot(tx, ty);\n  if (tl \u003c 1e-4) {\n    tx = -sin(P.a) * ro.dir;\n    ty = cos(P.a) * ro.dir;\n  } else {\n    tx /= tl;\n    ty /= tl;\n  }\n  // Over the last tenth the bead thins to a point as the nozzle lifts away.\n  const scale = 1 - 0.75 * sm(0.88, 1, P.u), lift = 2.2 * sm(0.85, 1, P.u);\n  profile(S, ro.tw + TWIST * S.pathS, scale);\n  // The bead rests on the turn before: on the foam under the nozzle or a\n  // little outward of it, whichever stands higher.\n  const ox = P.r > 0.01 ? (P.x - ro.cx) / P.r : 0, oy = P.r > 0.01 ? (P.y - ro.cy) / P.r : 0, rest = 0.45 * RB;\n  const base = max(lagAt(S, P.x, P.y), lagAt(S, P.x + ox * rest, P.y + oy * rest) - 0.6) + lift, pr = S.prof, R = RB + 1;\n  for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, ceil(P.y + R)); y++)\n    for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, ceil(P.x + R)); x++) {\n      const dx = x + 0.5 - P.x, dy = y + 0.5 - P.y, along = dx * tx + dy * ty;\n      if (abs(along) > 0.75) continue;\n      const s = -dx * ty + dy * tx, b = ((s / RB) * 0.5 + 0.5) * 40;\n      if (b \u003c 0 || b > 40) continue;\n      const b0 = floor(b), b1 = min(40, b0 + 1), f = b - b0, w0 = pr[b0], w1 = pr[b1];\n      const v = base + w0 + (w1 - w0) * f, p = y * W + x;\n      if (v > S.hgt[p]) {\n        S.hgt[p] = v;\n        S.pend.push(p, v, S.pathS);\n      }\n    }\n  grow(S, P.x - R - 2, P.y - R - 2, P.x + R + SHADOW, P.y + R + SHADOW);\n}\n\n// Foam laid LAG or more of path ago becomes ground for the next turn.\nfunction settle(S, all) {\n  const q = S.pend;\n  let k = 0;\n  while (k \u003c q.length && (all || S.pathS - q[k + 2] > LAG)) {\n    const p = q[k];\n    if (q[k + 1] > S.lag[p]) S.lag[p] = q[k + 1];\n    k += 3;\n  }\n  if (k) q.splice(0, k);\n}\n\nfunction startScrape(S) {\n  if (S.scraping) return;\n  settle(S, true);\n  S.scraping = true;\n  S.ro = null;\n  S.ys = -8;\n  S.vol.fill(0);\n  S.roll.fill(0);\n}\n\nfunction step(S, dt) {\n  S.t += dt;\n  if (S.scraping) {\n    // A blade runs down the tray at 55 LEDs a second: everything above it\n    // is taken up, rolled ahead of it, and leaves past the bottom edge.\n    const y0 = S.ys, y1 = S.ys + 55 * dt;\n    for (let y = max(0, ceil(y0)); y \u003c min(H, ceil(y1)); y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        S.vol[x] += S.hgt[p];\n        S.hgt[p] = 0;\n        S.lag[p] = 0;\n      }\n    S.ys = y1;\n    // The roll spreads along the blade: its height across the panel is the\n    // scraped foam smoothed over about a rosette's width, lumpy as foam.\n    const v = S.vol, t = S.tmp, rl = S.roll;\n    for (let pass = 0; pass \u003c 2; pass++) {\n      const a = pass ? t : v, b = pass ? rl : t;\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let k = -7; k \u003c= 7; k++) sum += a[cl(x + k, 0, W - 1)];\n        b[x] = sum / 15;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) rl[x] = 0.55 * sqrt(rl[x]) * (0.85 + 0.15 * sin(x * 0.9 + S.ys * 0.21));\n    grow(S, 0, y0 - 3, W - 1, y1 + 10 + SHADOW);\n    if (S.ys > H + 14) {\n      S.scraping = false;\n      S.k = 0;\n      S.wait = 0.5;\n    }\n    return;\n  }\n  if (S.wait > 0) {\n    S.wait -= dt;\n    return;\n  }\n  if (!S.ro) {\n    if (S.k >= NR) {\n      startScrape(S);\n      return;\n    }\n    S.ro = newRosette(S, S.k);\n    S.th = 0;\n  }\n  // The nozzle runs on along its spiral, laying the bead every 0.4 LED.\n  const T = 2 * PI * turnsOf(S);\n  let left = VN * dt;\n  while (left > 0 && S.ro) {\n    const P = pathAt(S, S.ro, S.th), ds = min(0.4, left);\n    // Arc length per radian of the spiral, kept off zero at the centre.\n    const sp = max(1.2, hypot(P.r, (0.8 * R0 * (1 - P.u) ** -0.2) / T));\n    S.th += ds / sp;\n    S.pathS += ds;\n    left -= ds;\n    if (S.th >= T) {\n      lay(S, S.ro, T);\n      settle(S, true);\n      S.ro = null;\n      S.k++;\n      S.wait = 0.3;\n      break;\n    }\n    lay(S, S.ro, S.th);\n    settle(S, false);\n  }\n}\n\n// A whole rosette at once, for the tray the pattern opens on.\nfunction pipeNow(S) {\n  S.ro = newRosette(S, S.k);\n  S.th = 0;\n  while (S.ro) step(S, 0.02);\n  S.wait = 0;\n}\n\n// The roll of scraped foam ahead of the blade, at a column and row.\nfunction rollAt(S, x, y) {\n  const d = y + 0.5 - S.ys;\n  if (!S.scraping || d \u003c 0 || d > 8) return 0;\n  return S.roll[x] * sin((PI * d) / 8) ** 0.7;\n}\n\n// Survey the foam inside the dirty box: its normal, how far it sits in a\n// valley, and its horizon toward the light at each bearing.\nfunction survey(S) {\n  const d = S.dirty;\n  if (d[0] > d[2]) return;\n  const g = S.hgt, ht = (x, y) => {\n    const xi = cl(x, 0, W - 1), yi = cl(y, 0, H - 1);\n    return max(g[yi * W + xi], rollAt(S, xi, yi));\n  };\n  for (let y = d[1]; y \u003c= d[3]; y++)\n    for (let x = d[0]; x \u003c= d[2]; x++) {\n      const p = y * W + x, h0 = ht(x, y);\n      const gx = (ht(x + 1, y) - ht(x - 1, y)) * 0.5, gy = (ht(x, y + 1) - ht(x, y - 1)) * 0.5;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1);\n      S.nx[p] = -gx * inv;\n      S.ny[p] = -gy * inv;\n      S.nz[p] = inv;\n      // Valleys: the foam lower than its ring of neighbours two LEDs out.\n      const ring = (ht(x - 2, y) + ht(x + 2, y) + ht(x, y - 2) + ht(x, y + 2)) * 0.25;\n      S.ao[p] = 1 - 0.4 * sm(0, 2.2, ring - h0);\n      S.foam[p] = sm(0.08, 0.7, h0);\n      for (let k = 0; k \u003c NAZ; k++) {\n        const az = AZ0 + SWING * (k - 1), dx = cos(az), dy = sin(az);\n        let hor = -1;\n        for (let s = 1; s \u003c= SHADOW; s++) {\n          const e = (ht(round(x + dx * s), round(y + dy * s)) - h0) / s;\n          if (e > hor) hor = e;\n        }\n        S.hz[k * N + p] = hor;\n      }\n    }\n  d[0] = W;\n  d[1] = H;\n  d[2] = -1;\n  d[3] = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.ridges = round(cl(k[2], 5, 10));\n  S.swirl = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open on a tray half piped.\n    for (let i = 0; i \u003c 4; i++) pipeNow(S);\n    S.dirty = [0, 0, W - 1, H - 1];\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startScrape(S);\n  step(S, (d * S.speed) / 2);\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Peach, butter and lime go brown or olive when deep: there the foam is\n  // paled, its shadows lifted, and the tray taken down to near black.\n  const warm = sm(0.0, 0.07, hh) * (1 - sm(0.24, 0.34, hh));\n  hsv(h, 0.3 - 0.1 * warm, 1, S.lit);\n  hsv(h + 0.03, 0.5 - 0.2 * warm, 0.5 + 0.14 * warm, S.dark);\n  hsv(h + 0.05, 0.75 - 0.4 * warm, 0.24 - 0.15 * warm, S.tray);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  survey(S);\n  palette(S);\n  const { nx, ny, nz, ao, hz, foam, lit, dark, tray } = S;\n  // Where the light is now, and the half vector to the eye straight above.\n  const az = AZ0 + SWING * sin((2 * PI * S.t) / SWAY), ce = cos(ELV);\n  const lx = cos(az) * ce, ly = sin(az) * ce, lz = sin(ELV);\n  const hl = hypot(lx, ly, lz + 1), hx = lx / hl, hy = ly / hl, hz2 = (lz + 1) / hl;\n  const u = cl((az - AZ0) / SWING + 1, 0, 1.999), k = floor(u), fk = u - k, o0 = k * N, o1 = o0 + N;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, f = foam[p];\n      // Diffuse from the normal, darkened in valleys and where the foam\n      // toward the light stands above the light's own slope.\n      const hor = hz[o0 + p] + (hz[o1 + p] - hz[o0 + p]) * fk;\n      const shade = 1 - 0.8 * sm(TANE - 0.12, TANE + 0.4, hor);\n      const nl = max(0, nx[p] * lx + ny[p] * ly + nz[p] * lz);\n      const l = (0.2 + 0.8 * nl * shade) * ao[p];\n      // A faint sheen: matte foam, not frosting.\n      const nh = max(0, nx[p] * hx + ny[p] * hy + nz[p] * hz2), n2 = nh * nh, n4 = n2 * n2;\n      const sp = 0.14 * n4 * n4 * n4 * n2 * shade * f;\n      // Bare tray: its own colour, lit the same way and shadowed the same.\n      const tl = 0.2 + 0.8 * l;\n      const r = (dark[0] + (lit[0] - dark[0]) * l) * f + tray[0] * tl * (1 - f) + sp;\n      const g = (dark[1] + (lit[1] - dark[1]) * l) * f + tray[1] * tl * (1 - f) + sp;\n      const b = (dark[2] + (lit[2] - dark[2]) * l) * f + tray[2] * tl * (1 - f) + sp;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Ridges","min":5,"max":10,"about":"The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together."},{"name":"Swirl","min":-1,"max":1,"about":"How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high."}],"start":[0,2,5,0.06],"measures":{"motion":0.0309,"detail":0.0537,"edges":0.3642,"complexity":1.1069,"coverage":0.9764,"colour":0.1274,"drift":0.0699},"knobResponse":[0.1534,0.0635,0.0442,0.1089]},{"slug":"wireworld","title":"Wireworld","family":"automata","round":16,"note":"구리선 회로를 전자가 파란 머리와 주황 꼬리로 달려요. 둘레 12, 18, 24, 30칸 클록 넷의 신호가 다이오드와 지연선을 지나 XOR 과 OR 게이트에서 만나고, 아래 램프 셋이 그 답을 깜박여요. K1 을 누르면 네 줄에 전자 여섯 개씩이 박자를 맞춰 들어가요.","idea":"A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.","buttons":"K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.","code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","layer":{"id":"layer-wireworld","type":"code","name":"wireworld","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":3,"about":"0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon."},{"name":"Speed","min":0,"max":4,"about":"Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell."},{"name":"Pulses","min":1,"max":3,"about":"One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out."},{"name":"Glow","min":0,"max":1,"about":"The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s."}],"start":[0,2,1,0.06],"measures":{"motion":0.2605,"detail":0.0895,"edges":0.7694,"complexity":0.461,"coverage":0.3111,"colour":0.2355,"drift":0.0855},"knobResponse":[0.0911,0.0637,0.0514,0.0736]},{"slug":"woodpecker","title":"Woodpecker","family":"bird","round":21,"note":"새벽 숲의 자작나무 줄기가 128줄을 다 쓰고, 오색딱따구리가 뻣뻣한 꽁지로 버티며 껑충껑충 오르다 멈춰 머리가 흐려지도록 두드려 부스러기를 튀기고 구멍을 내요. 꼭대기에 닿으면 물결치듯 날아 밑동으로 내려가 다시 오르고, K1 을 누르면 다음 걸음 뒤에 바로 두드려요.","idea":"A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.","buttons":"K1 tap makes the male stop and drum after his next hop.","code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","layer":{"id":"layer-woodpecker","type":"code","name":"woodpecker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tree","min":0,"max":2,"about":"A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower."},{"name":"Birds","min":1,"max":4,"about":"One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk."},{"name":"Light","min":0,"max":1,"about":"Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west."}],"start":[0,2,1,0.06],"measures":{"motion":0.092,"detail":0.0823,"edges":0.3471,"complexity":2.5826,"coverage":0.9376,"colour":0.1398,"drift":0.0454},"knobResponse":[0.1005,0.0437,0.0473,0.1346]},{"slug":"wythoff-nim","title":"Wythoff Nim","family":"algo","round":28,"note":"위토프 게임의 스프라그-그런디 값 표를 모서리로 세웠어요. 지는 자리(값 0)는 황금비 두 줄을 따라 금빛이고, 값 0, 1, 2 가 차례로 쓸고 지나가며 저마다의 두 줄에서 번쩍였다 표로 가라앉아요. 누르면 흰 말이 떨어져 이기는 수로 모서리까지 게임을 해요.","idea":"The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.","buttons":"K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.","code":"// ===== Patternflow pattern =====\n// Title:   Wythoff Nim\n// Family:  algo\n// Idea:    The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Wythoff's game (Willem Abraham Wythoff, 1907) and its Sprague-Grundy values (Roland Sprague 1935, Patrick Grundy 1939), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple.\n// Knob 2: Speed. How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half.\n// Knob 3: Zoom. LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays.\n// Knob 4: Glow. How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds.\n// Buttons: K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two heaps of x and y counters. A move takes any number from one heap, or\n// the same number from both; whoever takes the last counter wins. A\n// position's Grundy value is the smallest number not among the values one\n// move away: left along its row, up its column, up its diagonal. The\n// positions of value 0 are the ones to move to: (floor(n phi),\n// floor(n phi^2)) and their mirror images, on two rays of slopes phi and\n// 1/phi. Every other value gathers along the same two rays, wobbling off\n// them without ever falling into a period (Dress, Flammenkamp and Pink,\n// 1999), and down the middle the values grow like x + y.\nconst T = 82;\nconst G = new Int16Array(T * T);\nlet GALL = 0;\n{\n  const mark = new Int32Array(4 * T);\n  for (let y = 0, id = 1; y \u003c T; y++)\n    for (let x = 0; x \u003c T; x++, id++) {\n      for (let i = 0; i \u003c x; i++) mark[G[y * T + i]] = id;\n      for (let j = 0; j \u003c y; j++) mark[G[j * T + x]] = id;\n      for (let d = 1; d \u003c= min(x, y); d++) mark[G[(y - d) * T + x - d]] = id;\n      let m = 0;\n      while (mark[m] === id) m++;\n      G[y * T + x] = m;\n      GALL = max(GALL, m);\n    }\n}\n// The cells of each value, for the sweep.\nconst BY = Array.from({ length: GALL + 1 }, () => []);\nfor (let c = 0; c \u003c T * T; c++) BY[G[c]].push(c);\n\n// The table stands on its corner: position (x, y) is drawn at u = x - y\n// across and v = x + y down, s LEDs to a unit, with (0, 0) at the top.\n// Taking from one heap moves up and to the side at 45 degrees; taking from\n// both moves straight up, and the two rays run down from the corner 13\n// degrees either side of the middle. At Zoom 1 a cell is the LED at its\n// centre and the one above it.\nfunction place(P, s) {\n  P.s = s;\n  P.vis = 0;\n  const top = 0.5 + s;\n  for (let p = 0; p \u003c N; p++) {\n    const u = ((p % W) + 0.5 - 32.5) / s, v = (floor(p / W) + 0.5 - top) / s + 1e-3;\n    const xf = (u + v) / 2, yf = (v - u) / 2, x = round(xf), y = round(yf);\n    if (x \u003c 0 || y \u003c 0 || x >= T || y >= T) {\n      P.ci[p] = -1;\n      continue;\n    }\n    const c = y * T + x;\n    P.ci[p] = c;\n    P.vis = max(P.vis, G[c]);\n    // How far into the cell, in LEDs, for the lines between cells.\n    P.edge[p] = min(0.5 - abs(xf - x), 0.5 - abs(yf - y)) * 1.414 * s;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    ts: 0, K: -1, hue: -1, glow: 0.06, s: 0, vis: 0,\n    ci: new Int32Array(N), edge: new Float32Array(N),\n    L: new Float32Array(T * T), pw: new Float32Array(T * T), pl: new Float32Array(T * T),\n    pal: new Float32Array((GALL + 1) * 3), pb: new Float32Array((GALL + 1) * 3), game: null,\n  });\n  place(P, 1);\n}\n\n// The sweep's value climbs slowly through the small values, where the rays\n// are, and faster through the large ones: K = 12 (e^(2.5 t / 12) - 1), t in\n// seconds at Speed 2.\nconst C = 12, RATE = 2.5;\n\nfunction light(P, g) {\n  if (g >= 0 && g \u003c= GALL) for (const c of BY[g]) P.L[c] = 1;\n}\n\n// A move: to a position of value 0 if there is one (the winner's move),\n// otherwise a few counters from a heap or both (the loser's).\nfunction nextMove(x, y) {\n  if (G[y * T + x] !== 0) {\n    for (let i = 0; i \u003c x; i++) if (G[y * T + i] === 0) return [i, y, 1];\n    for (let j = 0; j \u003c y; j++) if (G[j * T + x] === 0) return [x, j, 1];\n    for (let q = min(x, y); q > 0; q--) if (G[(y - q) * T + x - q] === 0) return [x - q, y - q, 1];\n  }\n  for (;;) {\n    const kind = floor(random() * 3), a = kind === 0 ? x : kind === 1 ? y : min(x, y);\n    if (a \u003c 1) continue;\n    const q = 1 + floor(random() * min(a, 9));\n    return [kind === 1 ? x : x - q, kind === 0 ? y : y - q, 0];\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const s = round(cl(k[2], 1, 4));\n  if (abs(s - P.s) > 1e-3) place(P, s);\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    hsv(P.hue + 0.13, 0.8, 1, P.pal, 0);\n    hsv(P.hue + 0.13, 0.5, 1, P.pb, 0);\n    for (let g = 1; g \u003c= GALL; g++) {\n      const h = P.hue + 0.1 - 0.5 * (1 - exp(-g / 14)) - g / 900;\n      hsv(h, 0.85, 0.17 + 0.6 * exp(-g / 35), P.pal, g * 3);\n      hsv(h, 0.5, 1, P.pb, g * 3);\n    }\n  }\n  P.glow = cl(k[3], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2, ds = d * sp;\n\n  // The sweep.\n  const fade = exp(-ds / (0.45 + 1.6 * P.glow));\n  for (let c = 0; c \u003c T * T; c++) P.L[c] *= fade;\n  const k0 = P.K;\n  P.ts += ds;\n  P.K = P.ts \u003c 0 ? -1 : floor(C * (exp((P.ts * RATE) / C) - 1) + 1e-6);\n  for (let g = max(k0 + 1, 0); g \u003c= P.K; g++) light(P, g);\n  if (P.K > P.vis + 2) (P.ts = -0.8), (P.K = -1);\n\n  // The game.\n  const gd = d * (0.5 + 0.5 * sp), gone = exp(-d / (P.game ? 8 : 1.2));\n  for (let c = 0; c \u003c T * T; c++) (P.pw[c] *= gone), (P.pl[c] *= gone);\n  if (input.btnPressed && input.btnPressed[0]) {\n    const vmax = (H - 1.5 - P.s) / P.s, v = round(vmax * (0.6 + 0.35 * random()));\n    let u = round((random() - 0.5) * 1.6 * min(v, 31 / P.s));\n    if ((u + v) & 1) u += u > 0 ? -1 : 1;\n    const x = (u + v) >> 1, y = (v - u) >> 1;\n    P.game = { x, y, cx: x, cy: y, m: nextMove(x, y), f: 0, wait: 0.4 };\n  }\n  const gm = P.game;\n  if (gm) {\n    if (gm.wait > 0) gm.wait -= gd * 2;\n    else {\n      const [tx, ty, win] = gm.m, len = max(abs(tx - gm.x), abs(ty - gm.y));\n      gm.f = min(1, gm.f + (gd * 30) / (len + 8));\n      const sx = Math.sign(tx - gm.x), sy = Math.sign(ty - gm.y), at = round(gm.f * len);\n      for (let i = 0; i \u003c= at; i++) (win ? P.pw : P.pl)[(gm.y + sy * i) * T + gm.x + sx * i] = 1;\n      gm.cx = gm.x + sx * gm.f * len;\n      gm.cy = gm.y + sy * gm.f * len;\n      if (gm.f >= 1) {\n        gm.x = tx;\n        gm.y = ty;\n        gm.f = 0;\n        gm.wait = 0.5;\n        if (win) P.L[ty * T + tx] = 1;\n        if (tx === 0 && ty === 0) P.game = null;\n        else gm.m = nextMove(tx, ty);\n      }\n    }\n  }\n}\n\nconst WIN = [255, 226, 130], LOSE = [90, 180, 255];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const base = 1 - 0.85 * P.glow, grid = P.s > 2 ? 0.6 : 0, gm = P.game, S = P.s;\n  // The counter, a diamond of light where the game stands.\n  const ux = gm ? 32 + S * (gm.cx - gm.cy) : -99, vy = gm ? S + S * (gm.cx + gm.cy) - (S === 1 ? 0.5 : 0) : -99;\n  for (let p = 0; p \u003c N; p++) {\n    const c = P.ci[p], X = p % W, Y = floor(p / W);\n    if (c \u003c 0) {\n      display.setPixel(X, Y, 0, 0, 0);\n      continue;\n    }\n    const q = G[c] * 3, l = P.L[c], a = P.pw[c] * 0.8, b = P.pl[c] * 0.75, f = q ? base : 0.6 + 0.4 * base;\n    const e = 1 - grid * cl(1 - P.edge[p] * 1.6, 0, 1);\n    // A lit cell flashes white, fades to its own colour at full strength\n    // and then down into the table.\n    const m = min(1, l * 1.5), wt = l * l * l;\n    let r = P.pal[q] * f, g = P.pal[q + 1] * f, bl = P.pal[q + 2] * f;\n    r += (P.pb[q] + (255 - P.pb[q]) * wt - r) * m;\n    g += (P.pb[q + 1] + (255 - P.pb[q + 1]) * wt - g) * m;\n    bl += (P.pb[q + 2] + (255 - P.pb[q + 2]) * wt - bl) * m;\n    r += (LOSE[0] - r) * b + (WIN[0] - r) * a;\n    g += (LOSE[1] - g) * b + (WIN[1] - g) * a;\n    bl += (LOSE[2] - bl) * b + (WIN[2] - bl) * a;\n    const k = cl(S + 1.6 - abs(X - ux) - abs(Y - vy), 0, 1.6) / 1.6;\n    if (k > 0) (r += (255 - r) * k), (g += (255 - g) * k), (bl += (255 - bl) * k);\n    display.setPixel(X, Y, r * e, g * e, bl * e);\n  }\n}\n","layer":{"id":"layer-wythoff-nim","type":"code","name":"wythoff-nim","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Wythoff Nim\n// Family:  algo\n// Idea:    The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Wythoff's game (Willem Abraham Wythoff, 1907) and its Sprague-Grundy values (Roland Sprague 1935, Patrick Grundy 1939), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple.\n// Knob 2: Speed. How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half.\n// Knob 3: Zoom. LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays.\n// Knob 4: Glow. How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds.\n// Buttons: K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two heaps of x and y counters. A move takes any number from one heap, or\n// the same number from both; whoever takes the last counter wins. A\n// position's Grundy value is the smallest number not among the values one\n// move away: left along its row, up its column, up its diagonal. The\n// positions of value 0 are the ones to move to: (floor(n phi),\n// floor(n phi^2)) and their mirror images, on two rays of slopes phi and\n// 1/phi. Every other value gathers along the same two rays, wobbling off\n// them without ever falling into a period (Dress, Flammenkamp and Pink,\n// 1999), and down the middle the values grow like x + y.\nconst T = 82;\nconst G = new Int16Array(T * T);\nlet GALL = 0;\n{\n  const mark = new Int32Array(4 * T);\n  for (let y = 0, id = 1; y \u003c T; y++)\n    for (let x = 0; x \u003c T; x++, id++) {\n      for (let i = 0; i \u003c x; i++) mark[G[y * T + i]] = id;\n      for (let j = 0; j \u003c y; j++) mark[G[j * T + x]] = id;\n      for (let d = 1; d \u003c= min(x, y); d++) mark[G[(y - d) * T + x - d]] = id;\n      let m = 0;\n      while (mark[m] === id) m++;\n      G[y * T + x] = m;\n      GALL = max(GALL, m);\n    }\n}\n// The cells of each value, for the sweep.\nconst BY = Array.from({ length: GALL + 1 }, () => []);\nfor (let c = 0; c \u003c T * T; c++) BY[G[c]].push(c);\n\n// The table stands on its corner: position (x, y) is drawn at u = x - y\n// across and v = x + y down, s LEDs to a unit, with (0, 0) at the top.\n// Taking from one heap moves up and to the side at 45 degrees; taking from\n// both moves straight up, and the two rays run down from the corner 13\n// degrees either side of the middle. At Zoom 1 a cell is the LED at its\n// centre and the one above it.\nfunction place(P, s) {\n  P.s = s;\n  P.vis = 0;\n  const top = 0.5 + s;\n  for (let p = 0; p \u003c N; p++) {\n    const u = ((p % W) + 0.5 - 32.5) / s, v = (floor(p / W) + 0.5 - top) / s + 1e-3;\n    const xf = (u + v) / 2, yf = (v - u) / 2, x = round(xf), y = round(yf);\n    if (x \u003c 0 || y \u003c 0 || x >= T || y >= T) {\n      P.ci[p] = -1;\n      continue;\n    }\n    const c = y * T + x;\n    P.ci[p] = c;\n    P.vis = max(P.vis, G[c]);\n    // How far into the cell, in LEDs, for the lines between cells.\n    P.edge[p] = min(0.5 - abs(xf - x), 0.5 - abs(yf - y)) * 1.414 * s;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    ts: 0, K: -1, hue: -1, glow: 0.06, s: 0, vis: 0,\n    ci: new Int32Array(N), edge: new Float32Array(N),\n    L: new Float32Array(T * T), pw: new Float32Array(T * T), pl: new Float32Array(T * T),\n    pal: new Float32Array((GALL + 1) * 3), pb: new Float32Array((GALL + 1) * 3), game: null,\n  });\n  place(P, 1);\n}\n\n// The sweep's value climbs slowly through the small values, where the rays\n// are, and faster through the large ones: K = 12 (e^(2.5 t / 12) - 1), t in\n// seconds at Speed 2.\nconst C = 12, RATE = 2.5;\n\nfunction light(P, g) {\n  if (g >= 0 && g \u003c= GALL) for (const c of BY[g]) P.L[c] = 1;\n}\n\n// A move: to a position of value 0 if there is one (the winner's move),\n// otherwise a few counters from a heap or both (the loser's).\nfunction nextMove(x, y) {\n  if (G[y * T + x] !== 0) {\n    for (let i = 0; i \u003c x; i++) if (G[y * T + i] === 0) return [i, y, 1];\n    for (let j = 0; j \u003c y; j++) if (G[j * T + x] === 0) return [x, j, 1];\n    for (let q = min(x, y); q > 0; q--) if (G[(y - q) * T + x - q] === 0) return [x - q, y - q, 1];\n  }\n  for (;;) {\n    const kind = floor(random() * 3), a = kind === 0 ? x : kind === 1 ? y : min(x, y);\n    if (a \u003c 1) continue;\n    const q = 1 + floor(random() * min(a, 9));\n    return [kind === 1 ? x : x - q, kind === 0 ? y : y - q, 0];\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const s = round(cl(k[2], 1, 4));\n  if (abs(s - P.s) > 1e-3) place(P, s);\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    hsv(P.hue + 0.13, 0.8, 1, P.pal, 0);\n    hsv(P.hue + 0.13, 0.5, 1, P.pb, 0);\n    for (let g = 1; g \u003c= GALL; g++) {\n      const h = P.hue + 0.1 - 0.5 * (1 - exp(-g / 14)) - g / 900;\n      hsv(h, 0.85, 0.17 + 0.6 * exp(-g / 35), P.pal, g * 3);\n      hsv(h, 0.5, 1, P.pb, g * 3);\n    }\n  }\n  P.glow = cl(k[3], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2, ds = d * sp;\n\n  // The sweep.\n  const fade = exp(-ds / (0.45 + 1.6 * P.glow));\n  for (let c = 0; c \u003c T * T; c++) P.L[c] *= fade;\n  const k0 = P.K;\n  P.ts += ds;\n  P.K = P.ts \u003c 0 ? -1 : floor(C * (exp((P.ts * RATE) / C) - 1) + 1e-6);\n  for (let g = max(k0 + 1, 0); g \u003c= P.K; g++) light(P, g);\n  if (P.K > P.vis + 2) (P.ts = -0.8), (P.K = -1);\n\n  // The game.\n  const gd = d * (0.5 + 0.5 * sp), gone = exp(-d / (P.game ? 8 : 1.2));\n  for (let c = 0; c \u003c T * T; c++) (P.pw[c] *= gone), (P.pl[c] *= gone);\n  if (input.btnPressed && input.btnPressed[0]) {\n    const vmax = (H - 1.5 - P.s) / P.s, v = round(vmax * (0.6 + 0.35 * random()));\n    let u = round((random() - 0.5) * 1.6 * min(v, 31 / P.s));\n    if ((u + v) & 1) u += u > 0 ? -1 : 1;\n    const x = (u + v) >> 1, y = (v - u) >> 1;\n    P.game = { x, y, cx: x, cy: y, m: nextMove(x, y), f: 0, wait: 0.4 };\n  }\n  const gm = P.game;\n  if (gm) {\n    if (gm.wait > 0) gm.wait -= gd * 2;\n    else {\n      const [tx, ty, win] = gm.m, len = max(abs(tx - gm.x), abs(ty - gm.y));\n      gm.f = min(1, gm.f + (gd * 30) / (len + 8));\n      const sx = Math.sign(tx - gm.x), sy = Math.sign(ty - gm.y), at = round(gm.f * len);\n      for (let i = 0; i \u003c= at; i++) (win ? P.pw : P.pl)[(gm.y + sy * i) * T + gm.x + sx * i] = 1;\n      gm.cx = gm.x + sx * gm.f * len;\n      gm.cy = gm.y + sy * gm.f * len;\n      if (gm.f >= 1) {\n        gm.x = tx;\n        gm.y = ty;\n        gm.f = 0;\n        gm.wait = 0.5;\n        if (win) P.L[ty * T + tx] = 1;\n        if (tx === 0 && ty === 0) P.game = null;\n        else gm.m = nextMove(tx, ty);\n      }\n    }\n  }\n}\n\nconst WIN = [255, 226, 130], LOSE = [90, 180, 255];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const base = 1 - 0.85 * P.glow, grid = P.s > 2 ? 0.6 : 0, gm = P.game, S = P.s;\n  // The counter, a diamond of light where the game stands.\n  const ux = gm ? 32 + S * (gm.cx - gm.cy) : -99, vy = gm ? S + S * (gm.cx + gm.cy) - (S === 1 ? 0.5 : 0) : -99;\n  for (let p = 0; p \u003c N; p++) {\n    const c = P.ci[p], X = p % W, Y = floor(p / W);\n    if (c \u003c 0) {\n      display.setPixel(X, Y, 0, 0, 0);\n      continue;\n    }\n    const q = G[c] * 3, l = P.L[c], a = P.pw[c] * 0.8, b = P.pl[c] * 0.75, f = q ? base : 0.6 + 0.4 * base;\n    const e = 1 - grid * cl(1 - P.edge[p] * 1.6, 0, 1);\n    // A lit cell flashes white, fades to its own colour at full strength\n    // and then down into the table.\n    const m = min(1, l * 1.5), wt = l * l * l;\n    let r = P.pal[q] * f, g = P.pal[q + 1] * f, bl = P.pal[q + 2] * f;\n    r += (P.pb[q] + (255 - P.pb[q]) * wt - r) * m;\n    g += (P.pb[q + 1] + (255 - P.pb[q + 1]) * wt - g) * m;\n    bl += (P.pb[q + 2] + (255 - P.pb[q + 2]) * wt - bl) * m;\n    r += (LOSE[0] - r) * b + (WIN[0] - r) * a;\n    g += (LOSE[1] - g) * b + (WIN[1] - g) * a;\n    bl += (LOSE[2] - bl) * b + (WIN[2] - bl) * a;\n    const k = cl(S + 1.6 - abs(X - ux) - abs(Y - vy), 0, 1.6) / 1.6;\n    if (k > 0) (r += (255 - r) * k), (g += (255 - g) * k), (bl += (255 - bl) * k);\n    display.setPixel(X, Y, r * e, g * e, bl * e);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half."},{"name":"Zoom","min":1,"max":4,"about":"LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays."},{"name":"Glow","min":0,"max":1,"about":"How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds."}],"start":[0,2,1,0.06],"measures":{"motion":0.0944,"detail":0.0878,"edges":0.5187,"complexity":1.051,"coverage":0.875,"colour":0.3599,"drift":0.0676},"knobResponse":[0.2558,0.0431,0.2303,0.1714]},{"slug":"zen-garden","title":"Zen Garden","family":"line","round":18,"note":"곧장 내려다본 마른 돌 정원이에요. 갈퀴 자국이 이끼 두른 돌 둘레에서 고리로 휘고, 갈퀴가 15줄 띠씩 줄을 다시 그으며 떨어진 단풍잎을 거둬 가요. K1 을 돌리면 아침 해가 저녁 해로 옮겨 가며 돌 그림자와 고리의 밝은 쪽이 따라 돌아요.","idea":"A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","layer":{"id":"layer-zen-garden","type":"code","name":"zen-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds."},{"name":"Stones","min":3,"max":5,"about":"Three, four or five stone groups, each in its moss collar with two or three rings raked round it."},{"name":"Wind","min":0,"max":1,"about":"Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves."}],"start":[0,2,3,0.06],"measures":{"motion":0.0392,"detail":0.2481,"edges":0.4637,"complexity":1.6255,"coverage":0.96,"colour":0.1203,"drift":0.0759},"knobResponse":[0.1756,0.245,0.2327,0.2481]},{"slug":"zeta-loops","title":"Zeta Loops","family":"line","round":29,"note":"리만 제타 함수를 임계선 위에서 t 를 올리며 그려요. 실수축이 패널 위로 서 있고, 밝은 머리가 고리를 돌다가 영점마다 원점을 정확히 지나며 원점에서 고리가 퍼져요. K3 으로 임계선에서 벗어나면 고리가 원점을 비껴가고, K1 을 누르면 머리가 다음 영점까지 달려가요.","idea":"A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.","buttons":"K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.","code":"// ===== Patternflow pattern =====\n// Title:   Zeta Loops\n// Family:  line\n// Idea:    A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Riemann zeta function on the critical line (Bernhard Riemann, 1859), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1\n//\n// Knob 1: Hue. Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail.\n// Knob 2: Speed. How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower.\n// Knob 3: Sigma. How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn.\n// Knob 4: Trail. How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin.\n// Buttons: K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, sqrt, hypot, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The plane turned a quarter turn: the real axis runs up the panel through\n// column OX, the imaginary axis runs left, the origin sits OY rows down.\nconst OX = 32, OY = 92;\n// LEDs to one unit at t. The loops widen with t faster than the panel does,\n// so the view backs off a little as t climbs: 26 at the start, 15 by\n// t = 118, which keeps most of each loop inside the side walls and still\n// lets the later loops come out bigger.\nconst scaleAt = (t) => 26 / (1 + t / 70) ** 0.55;\n// t runs from 0 to TEND and starts again. Samples are DT apart in t.\nconst TEND = 118, DT = 0.008, CAP = 16384;\n\n// Euler-Maclaurin summation: the first N-1 terms of the Dirichlet series,\n// the integral of the tail, and six Bernoulli corrections. With N past\n// t / 2 pi the corrections shrink fast, and ten more terms make it good to\n// many digits at the t this pattern reaches.\nconst NMAX = 64;\nconst LN = new Float64Array(NMAX + 1).map((_, n) => (n ? log(n) : 0));\nconst BF = [1 / 12, -1 / 720, 1 / 30240, -1 / 1209600, 1 / 47900160, -691 / 1307674368000];\nfunction zeta(sr, si, out) {\n  const n0 = min(NMAX - 1, floor(abs(si) / (2 * PI)) + 10);\n  let zr = 0, zi = 0;\n  for (let n = 1; n \u003c n0; n++) {\n    const m = exp(-sr * LN[n]), a = -si * LN[n];\n    zr += m * cos(a);\n    zi += m * sin(a);\n  }\n  // N^-s, then N^(1-s) / (s - 1) and half of N^-s.\n  const L = LN[n0], m = exp(-sr * L), a = -si * L, pr = m * cos(a), pi = m * sin(a);\n  const dr = sr - 1, d2 = dr * dr + si * si, nr = n0 * pr, ni = n0 * pi;\n  zr += (nr * dr + ni * si) / d2 + pr / 2;\n  zi += (ni * dr - nr * si) / d2 + pi / 2;\n  // B2k / (2k)! times s(s+1)...(s+2k-2) times N^(-s-2k+1).\n  let cr = pr / n0, ci = pi / n0, fr = sr, fi = si;\n  for (let k = 0; k \u003c 6; k++) {\n    const c = BF[k];\n    zr += c * (fr * cr - fi * ci);\n    zi += c * (fr * ci + fi * cr);\n    const a1 = sr + 2 * k + 1, a2 = sr + 2 * k + 2;\n    const gr = fr * a1 - fi * si, gi = fr * si + fi * a1;\n    fr = gr * a2 - gi * si;\n    fi = gr * si + gi * a2;\n    cr /= n0 * n0;\n    ci /= n0 * n0;\n  }\n  out[0] = zr;\n  out[1] = zi;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, acc: 0, clock: 0, sc: 26, sig: 0, n: 0, head: -1, race: 0,\n    // Each sample: t, the point, sigma it was taken at, the clock, and 1 when\n    // the curve breaks before it (a restart).\n    T: new Float64Array(CAP), X: new Float32Array(CAP), Y: new Float32Array(CAP), S: new Float64Array(CAP),\n    C: new Float32Array(CAP), B: new Uint8Array(CAP),\n    fix: -1, fixN: 0, dPrev: 9, falling: 0, flashes: [], hue: 0, life: 3, z: new Float64Array(2),\n    R: new Float32Array(N), G: new Float32Array(N), Bl: new Float32Array(N), col: new Float32Array(3),\n    sR: new Float32Array(N), sG: new Float32Array(N), sB: new Float32Array(N), tmp: new Float32Array(N),\n  });\n  // The first frame already shows the curve on its way to the first zero at\n  // t = 14.13: eight seconds of drawing at half the opening speed.\n  for (let i = 0; i \u003c 240; i++) step(P, 1 / 30, 1, 0, 0.06);\n}\n\nfunction push(P, brk) {\n  zeta(0.5 + P.sig, P.t, P.z);\n  const i = (P.head = (P.head + 1) % CAP);\n  P.T[i] = P.t;\n  P.X[i] = P.z[0];\n  P.Y[i] = P.z[1];\n  P.S[i] = P.sig;\n  P.C[i] = P.clock;\n  P.B[i] = brk;\n  P.n = min(P.n + 1, CAP);\n  // A pass by the origin is the moment the distance stops falling. Its\n  // flash is as bright as the pass is close: full on the critical line, a\n  // glimmer a few LEDs off it.\n  const d = hypot(P.z[0], P.z[1]);\n  if (!brk && d > P.dPrev && P.falling && P.dPrev \u003c 0.6) {\n    const j = (i + CAP - 1) % CAP, k = (i + CAP - 2) % CAP;\n    const miss = segDist(P.X[k], P.Y[k], P.X[j], P.Y[j], P.X[i], P.Y[i]) * P.sc;\n    const s = exp(-(miss * miss) / 3);\n    if (s > 0.05) P.flashes.push([P.clock, s]);\n    if (P.race && P.t > P.race) P.race = 0;\n  }\n  P.falling = d \u003c P.dPrev ? 1 : 0;\n  P.dPrev = brk ? 9 : d;\n}\n\n// How close the two segments a-b-c come to the origin.\nfunction segDist(ax, ay, bx, by, cx, cy) {\n  const one = (px, py, qx, qy) => {\n    const dx = qx - px, dy = qy - py, l = dx * dx + dy * dy, u = l > 0 ? cl(-(px * dx + py * dy) / l, 0, 1) : 0;\n    return hypot(px + u * dx, py + u * dy);\n  };\n  return min(one(ax, ay, bx, by), one(bx, by, cx, cy));\n}\n\nfunction step(P, d, speed, sig, trail) {\n  P.clock += d;\n  P.life = 0.8 + 29.2 * trail ** 0.4;\n  P.sc += (scaleAt(P.t) - P.sc) * min(1, d * 1.5);\n  if (abs(sig - P.sig) > 0.002) (P.sig = sig), (P.fix = P.head), (P.fixN = P.n);\n  // t climbs a little slower as it rises, so the head's speed on the panel\n  // grows only slowly while the loops widen and the zeros crowd closer.\n  const rate = (speed * 1.55 * (P.race ? 10 : 1)) / (1 + P.t / 90);\n  P.acc += rate * d;\n  let brk = P.head \u003c 0 ? 1 : 0;\n  for (; P.acc >= DT; P.acc -= DT) {\n    P.t += DT;\n    if (P.t > TEND) (P.t = 0), (brk = 1), (P.race = 0);\n    push(P, brk);\n    brk = 0;\n  }\n  // The trail redraws itself at a new Sigma, newest first, a few hundred\n  // samples a frame.\n  if (P.fix >= 0) {\n    for (let c = 0; c \u003c 500 && P.fix >= 0; c++) {\n      const i = P.fix;\n      if (P.S[i] !== P.sig) {\n        zeta(0.5 + P.sig, P.T[i], P.z);\n        P.X[i] = P.z[0];\n        P.Y[i] = P.z[1];\n        P.S[i] = P.sig;\n      }\n      const j = (i + CAP - 1) % CAP;\n      P.fix = --P.fixN > 0 && P.clock - P.C[j] \u003c P.life ? j : -1;\n    }\n  }\n  P.flashes = P.flashes.filter((f) => P.clock - f[0] \u003c 1.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const b = input.btnPressed || [];\n  // The race runs past a zero the head is about to reach anyway and stops\n  // at the one after.\n  if (b[0]) P.race = P.t + 1;\n  if (b[1]) (P.t = TEND + 1), (P.race = 0);\n  step(P, d, cl(k[1], 0.2, 3), cl(k[2], -0.25, 0.25), cl(k[3], 0, 1));\n}\n\n// A soft dot of light, kept to the brightest of what is already there: full\n// on the LED under it, fading to nothing 1.3 LEDs out, so the curve draws\n// as a line a little under two LEDs wide.\nfunction dot(P, x, y, r, g, b) {\n  const cx = floor(x), cy = floor(y);\n  for (let yy = cy - 1; yy \u003c= cy + 1; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy + 0.5 - y;\n    for (let xx = cx - 1; xx \u003c= cx + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x, w = 1.3 - sqrt(dx * dx + dy * dy);\n      if (w \u003c= 0) continue;\n      const p = yy * W + xx, v = w > 1 ? 1 : w;\n      if (P.R[p] \u003c r * v) P.R[p] = r * v;\n      if (P.G[p] \u003c g * v) P.G[p] = g * v;\n      if (P.Bl[p] \u003c b * v) P.Bl[p] = b * v;\n    }\n  }\n}\n// Light added on top of the curve and its glow.\nconst add = (P, x, y, r, g, b) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  P.sR[p] += r;\n  P.sG[p] += g;\n  P.sB[p] += b;\n};\n\n// Two passes of a five-wide box along rows, then along columns, each a\n// running sum; the panel's edges count as dark.\nconst GLOW = 0.6;\nfunction box(a, o, step, n, out) {\n  let v = a[o] + a[o + step] + a[o + 2 * step];\n  for (let i = 0; i \u003c n; i++) {\n    out[o + i * step] = v / 5;\n    if (i + 3 \u003c n) v += a[o + (i + 3) * step];\n    if (i >= 2) v -= a[o + (i - 2) * step];\n  }\n}\nfunction blur(src, tmp, dst) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0; y \u003c H; y++) box(pass ? dst : src, y * W, 1, W, tmp);\n    for (let x = 0; x \u003c W; x++) box(tmp, x, W, H, dst);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const R = P.R, G = P.G, B = P.Bl, col = P.col;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The curve, oldest first, each segment walked in steps under half an LED.\n  const life = P.life;\n  let n = 0;\n  while (n \u003c P.n && P.clock - P.C[(P.head + CAP - n) % CAP] \u003c life) n++;\n  let i = (P.head + CAP - n + 1) % CAP;\n  for (let c = 0, px = 0, py = 0, ok = 0; c \u003c n; c++, i = (i + 1) % CAP) {\n    const age = P.clock - P.C[i];\n    const x = OX + 0.5 - P.Y[i] * P.sc, y = OY + 0.5 - P.X[i] * P.sc;\n    const f = 1 - age / life, v = sqrt(f);\n    // Young curve is pale, then the hue, then a deeper tail.\n    hsv(P.hue + 0.5 + 0.18 * (1 - f), 0.6 + 0.35 * min(1, (1 - f) * 4), v, col);\n    if (ok && !P.B[i]) {\n      const L = hypot(x - px, y - py), m = max(1, Math.ceil(L / 0.5));\n      for (let s = 1; s \u003c= m; s++) dot(P, px + ((x - px) * s) / m, py + ((y - py) * s) / m, col[0] * 255, col[1] * 255, col[2] * 255);\n    } else dot(P, x, y, col[0] * 255, col[1] * 255, col[2] * 255);\n    ok = 1;\n    px = x;\n    py = y;\n  }\n  // The curve glows: a soft blur of its own light, two box passes each\n  // way, laid under it. On the panel a bare 1-LED line looks thin.\n  const sR = P.sR, sG = P.sG, sB = P.sB;\n  blur(R, P.tmp, sR);\n  blur(G, P.tmp, sG);\n  blur(B, P.tmp, sB);\n  for (let p = 0; p \u003c N; p++) (sR[p] = R[p] + sR[p] * GLOW), (sG[p] = G[p] + sG[p] * GLOW), (sB[p] = B[p] + sB[p] * GLOW);\n  // The axes, dim: the real axis up the panel with a tick at each whole\n  // number, and a short stub of the imaginary axis through the origin.\n  for (let y = 0; y \u003c H; y++) {\n    const re = (OY - y) / P.sc, tick = abs(re - Math.round(re)) * P.sc \u003c 0.5;\n    add(P, OX, y, 14, 14, 18);\n    if (tick) for (let x = -2; x \u003c= 2; x++) if (x) add(P, OX + x, y, 16, 16, 20);\n  }\n  for (let x = OX - 6; x \u003c= OX + 6; x++) if (x !== OX) add(P, x, OY, 12, 12, 16);\n  // Each pass through the origin: the origin flares and a ring opens, in a\n  // pale rose that stays clear of the curve's colour and never browns.\n  hsv(P.hue + 0.92, 0.45, 1, col);\n  const fr = col[0] * 255, fg = col[1] * 255, fb = col[2] * 255;\n  for (const [c0, s] of P.flashes) {\n    const a = P.clock - c0, rad = 1.5 + a * 34, v = s * exp(-a * 2);\n    for (let y = max(0, floor(OY - rad - 2)); y \u003c= min(H - 1, OY + rad + 2); y++)\n      for (let x = max(0, floor(OX - rad - 2)); x \u003c= min(W - 1, OX + rad + 2); x++) {\n        const d = hypot(x - OX, y - OY), w = max(0, 1 - abs(d - rad) / 1.1) + max(0, 1 - d / 3.5) * exp(-a * 3) * 1.6;\n        if (w > 0) add(P, x, y, fr * v * w, fg * v * w, fb * v * w);\n      }\n  }\n  add(P, OX, OY, 40, 40, 44);\n  // The head: white with a small glow.\n  if (P.n) {\n    const h = P.head, hx = OX + 0.5 - P.Y[h] * P.sc, hy = OY + 0.5 - P.X[h] * P.sc;\n    for (let y = floor(hy) - 2; y \u003c= floor(hy) + 2; y++)\n      for (let x = floor(hx) - 2; x \u003c= floor(hx) + 2; x++) {\n        const d = hypot(x + 0.5 - hx, y + 0.5 - hy), w = exp(-d * d * 0.9);\n        add(P, x, y, 255 * w, 250 * w, 235 * w);\n      }\n  }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, sR[p]), min(255, sG[p]), min(255, sB[p]));\n}\n","layer":{"id":"layer-zeta-loops","type":"code","name":"zeta-loops","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Zeta Loops\n// Family:  line\n// Idea:    A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Riemann zeta function on the critical line (Bernhard Riemann, 1859), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1\n//\n// Knob 1: Hue. Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail.\n// Knob 2: Speed. How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower.\n// Knob 3: Sigma. How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn.\n// Knob 4: Trail. How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin.\n// Buttons: K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, sqrt, hypot, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The plane turned a quarter turn: the real axis runs up the panel through\n// column OX, the imaginary axis runs left, the origin sits OY rows down.\nconst OX = 32, OY = 92;\n// LEDs to one unit at t. The loops widen with t faster than the panel does,\n// so the view backs off a little as t climbs: 26 at the start, 15 by\n// t = 118, which keeps most of each loop inside the side walls and still\n// lets the later loops come out bigger.\nconst scaleAt = (t) => 26 / (1 + t / 70) ** 0.55;\n// t runs from 0 to TEND and starts again. Samples are DT apart in t.\nconst TEND = 118, DT = 0.008, CAP = 16384;\n\n// Euler-Maclaurin summation: the first N-1 terms of the Dirichlet series,\n// the integral of the tail, and six Bernoulli corrections. With N past\n// t / 2 pi the corrections shrink fast, and ten more terms make it good to\n// many digits at the t this pattern reaches.\nconst NMAX = 64;\nconst LN = new Float64Array(NMAX + 1).map((_, n) => (n ? log(n) : 0));\nconst BF = [1 / 12, -1 / 720, 1 / 30240, -1 / 1209600, 1 / 47900160, -691 / 1307674368000];\nfunction zeta(sr, si, out) {\n  const n0 = min(NMAX - 1, floor(abs(si) / (2 * PI)) + 10);\n  let zr = 0, zi = 0;\n  for (let n = 1; n \u003c n0; n++) {\n    const m = exp(-sr * LN[n]), a = -si * LN[n];\n    zr += m * cos(a);\n    zi += m * sin(a);\n  }\n  // N^-s, then N^(1-s) / (s - 1) and half of N^-s.\n  const L = LN[n0], m = exp(-sr * L), a = -si * L, pr = m * cos(a), pi = m * sin(a);\n  const dr = sr - 1, d2 = dr * dr + si * si, nr = n0 * pr, ni = n0 * pi;\n  zr += (nr * dr + ni * si) / d2 + pr / 2;\n  zi += (ni * dr - nr * si) / d2 + pi / 2;\n  // B2k / (2k)! times s(s+1)...(s+2k-2) times N^(-s-2k+1).\n  let cr = pr / n0, ci = pi / n0, fr = sr, fi = si;\n  for (let k = 0; k \u003c 6; k++) {\n    const c = BF[k];\n    zr += c * (fr * cr - fi * ci);\n    zi += c * (fr * ci + fi * cr);\n    const a1 = sr + 2 * k + 1, a2 = sr + 2 * k + 2;\n    const gr = fr * a1 - fi * si, gi = fr * si + fi * a1;\n    fr = gr * a2 - gi * si;\n    fi = gr * si + gi * a2;\n    cr /= n0 * n0;\n    ci /= n0 * n0;\n  }\n  out[0] = zr;\n  out[1] = zi;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, acc: 0, clock: 0, sc: 26, sig: 0, n: 0, head: -1, race: 0,\n    // Each sample: t, the point, sigma it was taken at, the clock, and 1 when\n    // the curve breaks before it (a restart).\n    T: new Float64Array(CAP), X: new Float32Array(CAP), Y: new Float32Array(CAP), S: new Float64Array(CAP),\n    C: new Float32Array(CAP), B: new Uint8Array(CAP),\n    fix: -1, fixN: 0, dPrev: 9, falling: 0, flashes: [], hue: 0, life: 3, z: new Float64Array(2),\n    R: new Float32Array(N), G: new Float32Array(N), Bl: new Float32Array(N), col: new Float32Array(3),\n    sR: new Float32Array(N), sG: new Float32Array(N), sB: new Float32Array(N), tmp: new Float32Array(N),\n  });\n  // The first frame already shows the curve on its way to the first zero at\n  // t = 14.13: eight seconds of drawing at half the opening speed.\n  for (let i = 0; i \u003c 240; i++) step(P, 1 / 30, 1, 0, 0.06);\n}\n\nfunction push(P, brk) {\n  zeta(0.5 + P.sig, P.t, P.z);\n  const i = (P.head = (P.head + 1) % CAP);\n  P.T[i] = P.t;\n  P.X[i] = P.z[0];\n  P.Y[i] = P.z[1];\n  P.S[i] = P.sig;\n  P.C[i] = P.clock;\n  P.B[i] = brk;\n  P.n = min(P.n + 1, CAP);\n  // A pass by the origin is the moment the distance stops falling. Its\n  // flash is as bright as the pass is close: full on the critical line, a\n  // glimmer a few LEDs off it.\n  const d = hypot(P.z[0], P.z[1]);\n  if (!brk && d > P.dPrev && P.falling && P.dPrev \u003c 0.6) {\n    const j = (i + CAP - 1) % CAP, k = (i + CAP - 2) % CAP;\n    const miss = segDist(P.X[k], P.Y[k], P.X[j], P.Y[j], P.X[i], P.Y[i]) * P.sc;\n    const s = exp(-(miss * miss) / 3);\n    if (s > 0.05) P.flashes.push([P.clock, s]);\n    if (P.race && P.t > P.race) P.race = 0;\n  }\n  P.falling = d \u003c P.dPrev ? 1 : 0;\n  P.dPrev = brk ? 9 : d;\n}\n\n// How close the two segments a-b-c come to the origin.\nfunction segDist(ax, ay, bx, by, cx, cy) {\n  const one = (px, py, qx, qy) => {\n    const dx = qx - px, dy = qy - py, l = dx * dx + dy * dy, u = l > 0 ? cl(-(px * dx + py * dy) / l, 0, 1) : 0;\n    return hypot(px + u * dx, py + u * dy);\n  };\n  return min(one(ax, ay, bx, by), one(bx, by, cx, cy));\n}\n\nfunction step(P, d, speed, sig, trail) {\n  P.clock += d;\n  P.life = 0.8 + 29.2 * trail ** 0.4;\n  P.sc += (scaleAt(P.t) - P.sc) * min(1, d * 1.5);\n  if (abs(sig - P.sig) > 0.002) (P.sig = sig), (P.fix = P.head), (P.fixN = P.n);\n  // t climbs a little slower as it rises, so the head's speed on the panel\n  // grows only slowly while the loops widen and the zeros crowd closer.\n  const rate = (speed * 1.55 * (P.race ? 10 : 1)) / (1 + P.t / 90);\n  P.acc += rate * d;\n  let brk = P.head \u003c 0 ? 1 : 0;\n  for (; P.acc >= DT; P.acc -= DT) {\n    P.t += DT;\n    if (P.t > TEND) (P.t = 0), (brk = 1), (P.race = 0);\n    push(P, brk);\n    brk = 0;\n  }\n  // The trail redraws itself at a new Sigma, newest first, a few hundred\n  // samples a frame.\n  if (P.fix >= 0) {\n    for (let c = 0; c \u003c 500 && P.fix >= 0; c++) {\n      const i = P.fix;\n      if (P.S[i] !== P.sig) {\n        zeta(0.5 + P.sig, P.T[i], P.z);\n        P.X[i] = P.z[0];\n        P.Y[i] = P.z[1];\n        P.S[i] = P.sig;\n      }\n      const j = (i + CAP - 1) % CAP;\n      P.fix = --P.fixN > 0 && P.clock - P.C[j] \u003c P.life ? j : -1;\n    }\n  }\n  P.flashes = P.flashes.filter((f) => P.clock - f[0] \u003c 1.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const b = input.btnPressed || [];\n  // The race runs past a zero the head is about to reach anyway and stops\n  // at the one after.\n  if (b[0]) P.race = P.t + 1;\n  if (b[1]) (P.t = TEND + 1), (P.race = 0);\n  step(P, d, cl(k[1], 0.2, 3), cl(k[2], -0.25, 0.25), cl(k[3], 0, 1));\n}\n\n// A soft dot of light, kept to the brightest of what is already there: full\n// on the LED under it, fading to nothing 1.3 LEDs out, so the curve draws\n// as a line a little under two LEDs wide.\nfunction dot(P, x, y, r, g, b) {\n  const cx = floor(x), cy = floor(y);\n  for (let yy = cy - 1; yy \u003c= cy + 1; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy + 0.5 - y;\n    for (let xx = cx - 1; xx \u003c= cx + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x, w = 1.3 - sqrt(dx * dx + dy * dy);\n      if (w \u003c= 0) continue;\n      const p = yy * W + xx, v = w > 1 ? 1 : w;\n      if (P.R[p] \u003c r * v) P.R[p] = r * v;\n      if (P.G[p] \u003c g * v) P.G[p] = g * v;\n      if (P.Bl[p] \u003c b * v) P.Bl[p] = b * v;\n    }\n  }\n}\n// Light added on top of the curve and its glow.\nconst add = (P, x, y, r, g, b) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  P.sR[p] += r;\n  P.sG[p] += g;\n  P.sB[p] += b;\n};\n\n// Two passes of a five-wide box along rows, then along columns, each a\n// running sum; the panel's edges count as dark.\nconst GLOW = 0.6;\nfunction box(a, o, step, n, out) {\n  let v = a[o] + a[o + step] + a[o + 2 * step];\n  for (let i = 0; i \u003c n; i++) {\n    out[o + i * step] = v / 5;\n    if (i + 3 \u003c n) v += a[o + (i + 3) * step];\n    if (i >= 2) v -= a[o + (i - 2) * step];\n  }\n}\nfunction blur(src, tmp, dst) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0; y \u003c H; y++) box(pass ? dst : src, y * W, 1, W, tmp);\n    for (let x = 0; x \u003c W; x++) box(tmp, x, W, H, dst);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const R = P.R, G = P.G, B = P.Bl, col = P.col;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The curve, oldest first, each segment walked in steps under half an LED.\n  const life = P.life;\n  let n = 0;\n  while (n \u003c P.n && P.clock - P.C[(P.head + CAP - n) % CAP] \u003c life) n++;\n  let i = (P.head + CAP - n + 1) % CAP;\n  for (let c = 0, px = 0, py = 0, ok = 0; c \u003c n; c++, i = (i + 1) % CAP) {\n    const age = P.clock - P.C[i];\n    const x = OX + 0.5 - P.Y[i] * P.sc, y = OY + 0.5 - P.X[i] * P.sc;\n    const f = 1 - age / life, v = sqrt(f);\n    // Young curve is pale, then the hue, then a deeper tail.\n    hsv(P.hue + 0.5 + 0.18 * (1 - f), 0.6 + 0.35 * min(1, (1 - f) * 4), v, col);\n    if (ok && !P.B[i]) {\n      const L = hypot(x - px, y - py), m = max(1, Math.ceil(L / 0.5));\n      for (let s = 1; s \u003c= m; s++) dot(P, px + ((x - px) * s) / m, py + ((y - py) * s) / m, col[0] * 255, col[1] * 255, col[2] * 255);\n    } else dot(P, x, y, col[0] * 255, col[1] * 255, col[2] * 255);\n    ok = 1;\n    px = x;\n    py = y;\n  }\n  // The curve glows: a soft blur of its own light, two box passes each\n  // way, laid under it. On the panel a bare 1-LED line looks thin.\n  const sR = P.sR, sG = P.sG, sB = P.sB;\n  blur(R, P.tmp, sR);\n  blur(G, P.tmp, sG);\n  blur(B, P.tmp, sB);\n  for (let p = 0; p \u003c N; p++) (sR[p] = R[p] + sR[p] * GLOW), (sG[p] = G[p] + sG[p] * GLOW), (sB[p] = B[p] + sB[p] * GLOW);\n  // The axes, dim: the real axis up the panel with a tick at each whole\n  // number, and a short stub of the imaginary axis through the origin.\n  for (let y = 0; y \u003c H; y++) {\n    const re = (OY - y) / P.sc, tick = abs(re - Math.round(re)) * P.sc \u003c 0.5;\n    add(P, OX, y, 14, 14, 18);\n    if (tick) for (let x = -2; x \u003c= 2; x++) if (x) add(P, OX + x, y, 16, 16, 20);\n  }\n  for (let x = OX - 6; x \u003c= OX + 6; x++) if (x !== OX) add(P, x, OY, 12, 12, 16);\n  // Each pass through the origin: the origin flares and a ring opens, in a\n  // pale rose that stays clear of the curve's colour and never browns.\n  hsv(P.hue + 0.92, 0.45, 1, col);\n  const fr = col[0] * 255, fg = col[1] * 255, fb = col[2] * 255;\n  for (const [c0, s] of P.flashes) {\n    const a = P.clock - c0, rad = 1.5 + a * 34, v = s * exp(-a * 2);\n    for (let y = max(0, floor(OY - rad - 2)); y \u003c= min(H - 1, OY + rad + 2); y++)\n      for (let x = max(0, floor(OX - rad - 2)); x \u003c= min(W - 1, OX + rad + 2); x++) {\n        const d = hypot(x - OX, y - OY), w = max(0, 1 - abs(d - rad) / 1.1) + max(0, 1 - d / 3.5) * exp(-a * 3) * 1.6;\n        if (w > 0) add(P, x, y, fr * v * w, fg * v * w, fb * v * w);\n      }\n  }\n  add(P, OX, OY, 40, 40, 44);\n  // The head: white with a small glow.\n  if (P.n) {\n    const h = P.head, hx = OX + 0.5 - P.Y[h] * P.sc, hy = OY + 0.5 - P.X[h] * P.sc;\n    for (let y = floor(hy) - 2; y \u003c= floor(hy) + 2; y++)\n      for (let x = floor(hx) - 2; x \u003c= floor(hx) + 2; x++) {\n        const d = hypot(x + 0.5 - hx, y + 0.5 - hy), w = exp(-d * d * 0.9);\n        add(P, x, y, 255 * w, 250 * w, 235 * w);\n      }\n  }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, sR[p]), min(255, sG[p]), min(255, sB[p]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail."},{"name":"Speed","min":0.2,"max":3,"about":"How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower."},{"name":"Sigma","min":-0.25,"max":0.25,"about":"How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn."},{"name":"Trail","min":0,"max":1,"about":"How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin."}],"start":[0,2,0,0.06],"measures":{"motion":0.1356,"detail":0.0457,"edges":0.4182,"complexity":0.8175,"coverage":0.1691,"colour":0.1955,"drift":0.0901},"knobResponse":[0.0373,0.0539,0.0648,0.0438]}],"families":{"algo":{"label":"알고리즘","color":"#e0c060"},"automata":{"label":"셀룰러 오토마타","color":"#9be15d"},"bird":{"label":"새","color":"#778800"},"body":{"label":"몸","color":"#bb5566"},"celestial":{"label":"천체","color":"#ffffaa"},"cells":{"label":"보로노이·셀","color":"#5fd0d0"},"chemistry":{"label":"화학·실험","color":"#00bb00"},"circuit":{"label":"전자 회로","color":"#2e7d32"},"city":{"label":"도시","color":"#22ff00"},"construction":{"label":"공사·건설","color":"#ffee00"},"cosmetic":{"label":"화장품 팝업","color":"#f2c6c2"},"data":{"label":"데이터 그림","color":"#7fe08a"},"fair":{"label":"놀이공원","color":"#ffffff"},"farm":{"label":"농사·밭","color":"#449911"},"film":{"label":"필름·영화","color":"#ff0000"},"flight":{"label":"비행","color":"#9944ee"},"fractal":{"label":"프랙탈","color":"#a3a0ff"},"fungi":{"label":"버섯·균사","color":"#00ff88"},"geometry":{"label":"기하·대칭","color":"#c77dff"},"glass":{"label":"유리","color":"#b0002a"},"glitch":{"label":"글리치","color":"#b0b8c8"},"growth":{"label":"자라남","color":"#d4c094"},"insect":{"label":"곤충","color":"#b4e61e"},"kitchen":{"label":"부엌","color":"#ff5500"},"light":{"label":"빛","color":"#7ef0d0"},"line":{"label":"선·궤적","color":"#ff7a45"},"machine":{"label":"기계·톱니","color":"#4a2cff"},"mammal":{"label":"짐승","color":"#998844"},"microbe":{"label":"미생물","color":"#aa00aa"},"mineral":{"label":"광물·결정","color":"#886688"},"music":{"label":"음악·악기","color":"#a0705a"},"noise":{"label":"노이즈·흐름","color":"#5ec8ff"},"number":{"label":"수론","color":"#00aaff"},"ocean":{"label":"바다","color":"#1f7fb8"},"paper":{"label":"종이","color":"#996600"},"particle":{"label":"입자","color":"#ffb02e"},"physics":{"label":"물리·스프링","color":"#ff9db0"},"pixel":{"label":"픽셀 아트","color":"#ffd166"},"polar":{"label":"얼음·극지","color":"#00ffff"},"pottery":{"label":"도자기","color":"#b05030"},"print":{"label":"망점·인쇄","color":"#f0a0e0"},"rail":{"label":"철도","color":"#00bb66"},"rhythm":{"label":"리듬·펄스","color":"#ff4d4d"},"sim":{"label":"시뮬레이션","color":"#3fe0a8"},"space":{"label":"공간·원근","color":"#e8e05a"},"sport":{"label":"운동·경기","color":"#337777"},"stage":{"label":"무대·공연","color":"#ff0066"},"textile":{"label":"직물·짜임","color":"#e04ad8"},"time":{"label":"시계·시간","color":"#ff8f5a"},"topology":{"label":"위상·매듭","color":"#80ff40"},"toy":{"label":"장난감","color":"#dd11ff"},"type":{"label":"글자","color":"#ff5fa2"},"volcano":{"label":"화산","color":"#bb2200"},"wave":{"label":"물결·간섭","color":"#4f7dff"},"weather":{"label":"날씨·자연","color":"#8fc0ff"}}}</script>
 <script>
 "use strict";(()=>{var PANEL_GEOMETRIES={"128x64_SINGLE":{id:1,physW:128,physH:64,chain:1,resW:128,resH:64},"64x64_SINGLE":{id:2,physW:64,physH:64,chain:1,resW:64,resH:64},"64x64_CHAIN2":{id:3,physW:64,physH:64,chain:2,resW:128,resH:64}},PANEL_GEOM_DEFAULT="128x64_SINGLE",KNOB_COUNT=4,DETENTS_PER_TURN=24,TURNS_PER_FULL_RANGE=2;function knobUnitsPerTurn(range){return(range[1]-range[0])/TURNS_PER_FULL_RANGE}var KNOB_SPAN_FLOOR=1e-4;function normalizeKnob(value,range){return(value-range[0])/Math.max(KNOB_SPAN_FLOOR,range[1]-range[0])}var LOGICAL_KNOB_WRAP=[!0,!1,!1,!0];function wrapKnobDelta(delta,span=1){return delta>span/2?delta-span:delta<-span/2?delta+span:delta}var PATTERN_MATRIX_WIDTH=PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resW,PATTERN_MATRIX_HEIGHT=PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resH,PATTERN_KNOB_COUNT=KNOB_COUNT,PATTERN_DETENTS_PER_TURN=DETENTS_PER_TURN;function clampByte(value){return Number.isFinite(value)?Math.max(0,Math.min(255,Math.round(value))):0}function rgbToHsv(r,g,b){let rf=r/255,gf=g/255,bf=b/255,max=Math.max(rf,gf,bf),min=Math.min(rf,gf,bf),delta=max-min,h=0;delta>0&&(max===rf?h=(gf-bf)/delta%6:max===gf?h=(bf-rf)/delta+2:h=(rf-gf)/delta+4,h/=6,h<0&&(h+=1));let s=max===0?0:delta/max;return[h,s,max]}function hsvToRgbTuple(h,s,v){h=h-Math.floor(h);let i=Math.floor(h*6),f=h*6-i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s),r,g,b;switch(i%6){case 0:r=v,g=t,b=p;break;case 1:r=q,g=v,b=p;break;case 2:r=p,g=v,b=t;break;case 3:r=p,g=q,b=v;break;case 4:r=t,g=p,b=v;break;default:r=v,g=p,b=q;break}return[Math.round(r*255),Math.round(g*255),Math.round(b*255)]}function srgbChannelToLinear(c){return c/=255,c<=.04045?c/12.92:Math.pow((c+.055)/1.055,2.4)}function linearChannelToSrgb(c){let v=c<=.0031308?c*12.92:1.055*Math.pow(c,.4166666666666667)-.055;return Math.max(0,Math.min(1,v))*255}function srgbToOklab(r,g,b){let lr=srgbChannelToLinear(r),lg=srgbChannelToLinear(g),lb=srgbChannelToLinear(b),l=Math.cbrt(.4122214708*lr+.5363325363*lg+.0514459929*lb),m=Math.cbrt(.2119034982*lr+.6806995451*lg+.1073969566*lb),s=Math.cbrt(.0883024619*lr+.2817188376*lg+.6299787005*lb);return[.2104542553*l+.793617785*m-.0040720468*s,1.9779984951*l-2.428592205*m+.4505937099*s,.0259040371*l+.7827717662*m-.808675766*s]}function oklabToLinearRgb(L,A,B){let l_=L+.3963377774*A+.2158037573*B,m_=L-.1055613458*A-.0638541728*B,s_=L-.0894841775*A-1.291485548*B,l=l_*l_*l_,m=m_*m_*m_,s=s_*s_*s_;return[4.0767416621*l-3.3077115913*m+.2309699292*s,-1.2684380046*l+2.6097574011*m-.3413193965*s,-.0041960863*l-.7034186147*m+1.707614701*s]}var GAMUT_EPS=1e-4;function inLinearGamut(rgb){return rgb[0]>=-GAMUT_EPS&&rgb[0]<=1+GAMUT_EPS&&rgb[1]>=-GAMUT_EPS&&rgb[1]<=1+GAMUT_EPS&&rgb[2]>=-GAMUT_EPS&&rgb[2]<=1+GAMUT_EPS}function oklabToSrgb(L,A,B){let rgb=oklabToLinearRgb(L,A,B);if(!inLinearGamut(rgb)){let lo=0,hi=1;for(let i=0;i<16;i++){let mid=(lo+hi)/2;inLinearGamut(oklabToLinearRgb(L,A*mid,B*mid))?lo=mid:hi=mid}rgb=oklabToLinearRgb(L,A*lo,B*lo)}return[linearChannelToSrgb(rgb[0]),linearChannelToSrgb(rgb[1]),linearChannelToSrgb(rgb[2])]}function mixRampColors(a,b,t,mode){if(mode==="smooth"&&(t=t*t*(3-2*t)),mode==="oklab"||mode==="oklchShort"||mode==="oklchLong"){let[La,Aa,Ba]=srgbToOklab(a[0],a[1],a[2]),[Lb,Ab,Bb]=srgbToOklab(b[0],b[1],b[2]),L=La+(Lb-La)*t;if(mode==="oklab")return oklabToSrgb(L,Aa+(Ab-Aa)*t,Ba+(Bb-Ba)*t);let CHROMA_EPS=1e-4,TWO_PI=Math.PI*2,Ca=Math.sqrt(Aa*Aa+Ba*Ba),Cb=Math.sqrt(Ab*Ab+Bb*Bb),hueA=Math.atan2(Ba,Aa)/TWO_PI;hueA<0&&(hueA+=1);let hueB=Math.atan2(Bb,Ab)/TWO_PI;hueB<0&&(hueB+=1);let h1=Ca<CHROMA_EPS?Cb<CHROMA_EPS?0:hueB:hueA,dh=(Cb<CHROMA_EPS?h1:hueB)-h1;mode==="oklchShort"?(dh>.5&&(dh-=1),dh<-.5&&(dh+=1)):dh>0&&dh<.5?dh-=1:dh<=0&&dh>-.5&&(dh+=1);let C=Ca+(Cb-Ca)*t,H=(h1+dh*t)*TWO_PI;return oklabToSrgb(L,Math.cos(H)*C,Math.sin(H)*C)}if(mode==="hsvShort"||mode==="hsvLong"){let ha=rgbToHsv(a[0],a[1],a[2]),hb=rgbToHsv(b[0],b[1],b[2]),h1=ha[1]===0?hb[0]:ha[0],dh=(hb[1]===0?h1:hb[0])-h1;return mode==="hsvShort"?(dh>.5&&(dh-=1),dh<-.5&&(dh+=1)):dh>0&&dh<.5?dh-=1:dh<=0&&dh>-.5&&(dh+=1),hsvToRgbTuple(h1+dh*t,ha[1]+(hb[1]-ha[1])*t,ha[2]+(hb[2]-ha[2])*t)}return[a[0]+(b[0]-a[0])*t,a[1]+(b[1]-a[1])*t,a[2]+(b[2]-a[2])*t]}function stopAlpha(stop){let a=stop.alpha;return a===void 0||!Number.isFinite(a)?1:Math.max(0,Math.min(1,a))}function mixStopAlpha(a,b,t,mode){mode==="smooth"&&(t=t*t*(3-2*t));let aa=stopAlpha(a);return aa+(stopAlpha(b)-aa)*t}function sampleSortedRampRGBA(stops,mode,wrap,t){if(stops.length===0)return[255,255,255,1];if(stops.length===1)return[...stops[0].color,stopAlpha(stops[0])];t=Math.max(0,Math.min(1,t));let first=stops[0],last2=stops[stops.length-1];if(t<=first.position||t>=last2.position){if(!wrap){let edge=t<=first.position?first:last2;return[...edge.color,stopAlpha(edge)]}let span=1-last2.position+first.position,local=span<=0?0:(t>=last2.position?t-last2.position:t+1-last2.position)/span;return mode==="step"?[...last2.color,stopAlpha(last2)]:[...mixRampColors(last2.color,first.color,local,mode),mixStopAlpha(last2,first,local,mode)]}for(let i=0;i<stops.length-1;i++){let a=stops[i],b=stops[i+1];if(t>b.position)continue;if(mode==="step")return[...a.color,stopAlpha(a)];let span=b.position-a.position,local=span<=0?0:(t-a.position)/span;return[...mixRampColors(a.color,b.color,local,mode),mixStopAlpha(a,b,local,mode)]}return[...last2.color,stopAlpha(last2)]}function buildRampLUTRGBA(ramp){let sorted=[...ramp.stops].sort((a,b)=>a.position-b.position),lut=new Uint8Array(256*4);for(let i=0;i<256;i++){let[r,g,b,a]=sampleSortedRampRGBA(sorted,ramp.mode,ramp.wrap,i/255);lut[i*4]=clampByte(r),lut[i*4+1]=clampByte(g),lut[i*4+2]=clampByte(b),lut[i*4+3]=clampByte(a*255)}return lut}function normalizePatternCode(code){return code.replace(/^\s*import\s+.*?;?\s*$/gm,"").replace(/\bexport\s+function\b/g,"function")}var WRAPPER_LINES_BEFORE_CODE=2,functionPreambleLines=null;function stackLocation(error){let stack=error instanceof Error?error.stack:null;if(!stack)return null;let match=stack.match(/(?:<anonymous>|Function|eval):(\d+):(\d+)/);return match?{line:Number(match[1]),column:Number(match[2])}:null}function getFunctionPreambleLines(){if(functionPreambleLines!==null)return functionPreambleLines;functionPreambleLines=2;try{new Function("throw new Error('probe');")()}catch(error){let location2=stackLocation(error);location2&&(functionPreambleLines=location2.line-1)}return functionPreambleLines}var OPENER_OF={")":"(","]":"[","}":"{"},REGEX_AFTER_WORDS=new Set(["return","typeof","instanceof","in","of","new","delete","void","throw","case","do","else","yield","await"]);function regexCanStart(prev,word){return word?REGEX_AFTER_WORDS.has(word):prev===""||"(,=:[!&|?{};+-*%<>~^".includes(prev)}function openAtEnd(code){let stack=[],innermostFirst=inside=>inside?[inside,...stack.slice().reverse()]:stack.slice().reverse(),prev="",word="",i=0;for(;i<code.length;){let c=code[i];if(stack[stack.length-1]==="`"){c==="\\"?i+=2:c==="`"?(stack.pop(),prev=c,word="",i++):c==="$"&&code[i+1]==="{"?(stack.push("${"),prev="{",word="",i+=2):i++;continue}if(/\s/.test(c)){i++;continue}if(/[\w$]/.test(c)){let j=i+1;for(;j<code.length&&/[\w$]/.test(code[j]);)j++;word=code.slice(i,j),prev=code[j-1],i=j;continue}let next=code[i+1];if(c==="/"&&next==="/"){let end=code.indexOf(`
 `,i);if(end<0)break;i=end;continue}if(c==="/"&&next==="*"){let end=code.indexOf("*/",i+2);if(end<0)return innermostFirst("/*");i=end+2;continue}if(c==='"'||c==="'"){let j=i+1;for(;j<code.length&&code[j]!==c;){if(code[j]===`

From 972667a3fe1ac2a114161ed7ffddcbd2288428f1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 24 Oct 2026 23:44:03 +0000
Subject: [PATCH 10/10] =?UTF-8?q?incoming:=20README=20=EB=A5=BC=20?=
 =?UTF-8?q?=EA=B3=A0=EC=B9=9C=20=EB=92=A4=20index.html=20=EC=9D=84=20?=
 =?UTF-8?q?=EB=8B=A4=EC=8B=9C=20=EC=A7=93=EB=8A=94=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WSruBmW95rasfF2WmM8DZ7
---
 incoming/pattern-study/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/incoming/pattern-study/index.html b/incoming/pattern-study/index.html
index 2accd9f00..701f72977 100644
--- a/incoming/pattern-study/index.html
+++ b/incoming/pattern-study/index.html
@@ -141,7 +141,7 @@ <h1>패턴 연구</h1>
 
   <div id="cards"></div>
 </main>
-<script id="study-data" type="application/json">{"patterns":[{"slug":"abyss","title":"Abyss","family":"ocean","round":16,"note":"물결 밑 햇빛층에서 심해 바닥까지 바다 한 기둥이 128줄에 서요. 빛내림과 정어리 떼 아래로 관해파리와 샛비늘치, 아귀의 미끼 불빛을 지나 잠수정이 등을 켜고 열수 분출공까지 내려갔다 올라와요. K1 을 누르면 죽은 고래가 기둥을 다 가라앉아 바닥에 뼈로 남아요.","idea":"One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.","buttons":"K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.","code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","layer":{"id":"layer-abyss","type":"code","name":"abyss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Night","min":0,"max":1,"about":"Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace."},{"name":"Current","min":-1,"max":1,"about":"A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream."},{"name":"Bloom","min":0,"max":1,"about":"From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens."}],"start":[0,2,0,0.06],"measures":{"motion":0.1244,"detail":0.039,"edges":0.3461,"complexity":1.1983,"coverage":0.6808,"colour":0.2784,"drift":0.0583},"knobResponse":[0.1135,0.059,0.0565,0.0734]},{"slug":"agate","title":"Agate","family":"mineral","round":20,"note":"라이트박스에 올린 블루 레이스 마노 단면이 패널을 거의 다 채우고, 1 LED 남짓한 하늘색 띠와 젖빛 띠가 갈색 껍질을 따라 겹겹이 들어가 석영 결정이 반짝이는 빈 속에 닿아요. 톱이 천천히 더 깊이 썰어 들어가며 띠가 흐르고, K1 을 누르면 날이 라이트박스를 가로지르며 새 마노 덩어리의 단면이 깔려요.","idea":"A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.","buttons":"K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.","code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-agate","type":"code","name":"agate","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stain","min":0,"max":1,"about":"The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds."},{"name":"Width","min":1,"max":4,"about":"How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands."},{"name":"Light","min":-1,"max":1,"about":"Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own."}],"start":[0,2,1,0.06],"measures":{"motion":0.2044,"detail":0.342,"edges":0.8294,"complexity":2.5192,"coverage":1,"colour":0.128,"drift":0.0573},"knobResponse":[0.1001,0.2798,0.2989,0.0578]},{"slug":"analemma","title":"Analemma","family":"celestial","round":15,"note":"일 년 동안 같은 시각에 찍은 해가 바다 위 하늘에 8자를 그려요. K1 이 시각을 아침에서 저녁까지 돌려 8자를 눕히고, K4 를 올리면 화성의 눈물방울 모양이 돼요.","idea":"A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.","buttons":"K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.","code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-analemma","type":"code","name":"analemma","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":-1,"max":1,"about":"The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings."},{"name":"Speed","min":0.2,"max":3,"about":"Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top."},{"name":"Latitude","min":-1,"max":1,"about":"Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea."},{"name":"Orbit","min":0,"max":1,"about":"The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop."}],"start":[0,2,0,0.06],"measures":{"motion":0.0266,"detail":0.0181,"edges":0.3039,"complexity":1.0442,"coverage":0.9984,"colour":0.1966,"drift":0.0308},"knobResponse":[0.0776,0.085,0.0971,0.0827]},{"slug":"anderson-localization","title":"Anderson Localization","family":"wave","round":38,"note":"위치 에너지가 무작위로 놓인 사슬의 한 자리에 양자 입자를 놓고, 자리를 가로로, 시간을 세로로 그려요. 깨끗한 사슬이라면 점선을 따라 패널 끝까지 벌어졌을 원뿔이 27 LED 너비에서 멈추고, 얼룩진 기둥으로 끝까지 서 있어요. K3 은 무질서를 키워 기둥을 12 LED 까지 좁히고, K1 을 누르면 새 에너지와 새 자리에서 바로 다시 시작해요.","idea":"A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.","buttons":"K1 tap launches now, on a new sample of energies and a new site.","code":"// ===== Patternflow pattern =====\n// Title:   Anderson Localization\n// Family:  wave\n// Idea:    A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Anderson localization (Philip W. Anderson, 1958), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16\n//\n// Knob 1: Hue. Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive.\n// Knob 2: Speed. How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s.\n// Knob 3: Disorder. The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8.\n// Knob 4: Samples. How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over.\n// Buttons: K1 tap launches now, on a new sample of energies and a new site.\n\nconst W = 64, H = 128, NS = 192, OFF = 64, MAXS = 16;\n// Time per row: 0.25 in units of the hopping, so 128 rows hold t = 0 to 32\n// and a clean cone, whose edge runs 2 sites per unit, reaches 32 sites out at\n// row 64. RK4 steps of 0.025, ten to a row.\nconst TROW = 0.25, STEPS = 10, DT = TROW / STEPS;\n// Rows per second at Speed 1.\nconst RATE = 10;\n// Brightness from the probability on a log scale: 1e-3 is dark, 0.4 full.\nconst LMIN = -3, LSPAN = 2.6;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst { floor, min, max, abs, log10, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, dis: 3, ns: 1, begun: false,\n    // u: each sample's site energies over W, uniform in [-1/2, 1/2].\n    u: new Float64Array(MAXS * NS), re: new Float64Array(MAXS * NS), im: new Float64Array(MAXS * NS), done: 0,\n    ya: new Float64Array(NS), yb: new Float64Array(NS), ka: new Float64Array(NS), kb: new Float64Array(NS),\n    sa: new Float64Array(NS), sb: new Float64Array(NS),\n    n0: 96, t: 0, row: 0, prog: 0, hold: 0, norm: 1,\n    rho: new Float32Array(W * H), vt: new Float32Array(W * H), cone: new Uint8Array(W * H), dim: new Float32Array(H),\n    lo: [0, 0, 0], mid: [0, 0, 0], hi: [0, 0, 0], pos: [0, 0, 0], neg: [0, 0, 0],\n  };\n}\n\n// dy/dt for y = re + i im under i dy/dt = H y, H y_n = -(y_n+1 + y_n-1) + V_n y_n,\n// with hard walls past both ends of the chain: d re = H im, d im = -H re.\nfunction deriv(a, b, u, o, Wd, ka, kb) {\n  for (let n = 0; n \u003c NS; n++) {\n    const V = Wd * u[o + n];\n    let ha = V * a[n], hb = V * b[n];\n    if (n > 0) {\n      ha -= a[n - 1];\n      hb -= b[n - 1];\n    }\n    if (n \u003c NS - 1) {\n      ha -= a[n + 1];\n      hb -= b[n + 1];\n    }\n    ka[n] = hb;\n    kb[n] = -ha;\n  }\n}\n\n// One RK4 step of one sample.\nfunction rk4(S, k, h) {\n  const o = k * NS, { re, im, u, ya, yb, ka, kb, sa, sb } = S, Wd = S.dis;\n  for (let n = 0; n \u003c NS; n++) {\n    ya[n] = re[o + n];\n    yb[n] = im[o + n];\n  }\n  // k1\n  const a0 = re.subarray(o, o + NS), b0 = im.subarray(o, o + NS);\n  deriv(a0, b0, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] = ka[n];\n    sb[n] = kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k2\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k3\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + h * ka[n];\n    yb[n] = b0[n] + h * kb[n];\n  }\n  // k4\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    a0[n] += (h / 6) * (sa[n] + ka[n]);\n    b0[n] += (h / 6) * (sb[n] + kb[n]);\n  }\n}\n\n// Put sample k on the launch site and run it up to the time of the run.\nfunction start(S, k) {\n  const o = k * NS;\n  S.re.fill(0, o, o + NS);\n  S.im.fill(0, o, o + NS);\n  S.re[o + S.n0] = 1;\n  const steps = round(S.t / DT);\n  for (let i = 0; i \u003c steps; i++) rk4(S, k, DT);\n}\n\n// A new run: fresh energies for every sample and a new site, picked so the\n// start lies in the middle 40 columns.\nfunction launch(S) {\n  for (let i = 0; i \u003c MAXS * NS; i++) S.u[i] = random() - 0.5;\n  S.n0 = OFF + 12 + floor(random() * 40);\n  S.t = 0;\n  S.row = 0;\n  S.prog = 0;\n  S.hold = 0;\n  for (let k = 0; k \u003c S.ns; k++) start(S, k);\n  S.done = S.ns;\n  // What is left of the run before stays at 40%.\n  S.dim.fill(0.4);\n}\n\n// Write the row for the present time, the samples' probability averaged.\nfunction writeRow(S) {\n  const r = S.row, { re, im, rho, vt, cone, u } = S, ns = S.ns, c0 = S.n0 - OFF, edge = 2 * S.t;\n  let norm = 0;\n  for (let n = 0; n \u003c NS; n++) norm += re[n] * re[n] + im[n] * im[n];\n  S.norm = norm;\n  for (let x = 0; x \u003c W; x++) {\n    const n = OFF + x;\n    let s = 0;\n    for (let k = 0; k \u003c ns; k++) {\n      const i = k * NS + n;\n      s += re[i] * re[i] + im[i] * im[i];\n    }\n    const p = r * W + x;\n    rho[p] = s / ns;\n    // The stripes show the first sample's energies, fainter as more samples\n    // are averaged, since the average has no one landscape.\n    vt[p] = u[n] / ns;\n    // The clean chain's light cone, n0 +- 2t, dotted every other row.\n    const d = abs(abs(x - c0) - edge);\n    cone[p] = r % 2 === 0 && d \u003c 0.5 && r > 0 ? 1 : 0;\n  }\n  S.dim[r] = 1;\n  S.row++;\n}\n\n// Run the present time forward to row r and write each row on the way.\nfunction advanceTo(S, target) {\n  while (S.row \u003c= target && S.row \u003c H) {\n    if (S.row > 0) {\n      for (let i = 0; i \u003c STEPS; i++) for (let k = 0; k \u003c S.ns; k++) rk4(S, k, DT);\n      S.t = S.row * TROW;\n    }\n    writeRow(S);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.dis = cl(k[2], 4, 12);\n  S.ns = round(cl(k[3], 1, MAXS));\n  if (!S.begun) {\n    // Open on a whole run already written, and a new one starting over it.\n    launch(S);\n    advanceTo(S, H - 1);\n    launch(S);\n    S.begun = true;\n  }\n  // Samples turned up in the middle of a run catch up to its time.\n  while (S.done \u003c S.ns) start(S, S.done++);\n  if (S.done > S.ns) S.done = S.ns;\n  if (input.btnPressed && input.btnPressed[0]) launch(S);\n  if (S.row >= H) {\n    S.hold += d * S.speed;\n    // Hold the finished run 1.5 s at Speed 2.\n    if (S.hold > 3) launch(S);\n    return;\n  }\n  S.prog += d * S.speed * RATE;\n  advanceTo(S, floor(S.prog));\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { rho, vt, cone, dim, lo, mid, hi, pos, neg } = S;\n  const h = S.hue + H0;\n  // Orange to yellow on the panel goes brown or olive when dim. Round there\n  // the tails turn toward rose instead of toward yellow, the body is paled\n  // to peach or butter, and everything is lifted.\n  const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.13, 0, 1);\n  hsv(h + 0.09 - 0.19 * warm, 1 - 0.2 * warm, 1, lo);\n  hsv(h, 0.85 - 0.4 * warm, 1, mid);\n  hsv(h - 0.04, 0.18, 1, hi);\n  hsv(h + 0.45, 0.7, 1, pos);\n  hsv(h + 0.3, 0.7, 1, neg);\n  const vlift = 1 + 0.4 * warm, head = S.row, mixOld = 0.5 + 0.4 * warm;\n  for (let y = 0; y \u003c H; y++) {\n    const old = dim[y] \u003c 1, dm = old ? dim[y] + 0.2 * warm : 1;\n    // Two rows of dark under the head, between the new run and the old.\n    const gap = old && y >= head && y \u003c head + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0, g = 0, b = 0;\n      if (!gap) {\n        const L = cl((log10(rho[p] + 1e-12) - LMIN) / LSPAN, 0, 1);\n        if (L > 0) {\n          const v = min(1, (0.1 + 0.9 * L) * vlift);\n          let c0 = lo, c1 = mid, f = L * 2;\n          if (L > 0.5) {\n            c0 = mid;\n            c1 = hi;\n            f = L * 2 - 1;\n          }\n          r = (c0[0] + (c1[0] - c0[0]) * f) * v;\n          g = (c0[1] + (c1[1] - c0[1]) * f) * v;\n          b = (c0[2] + (c1[2] - c0[2]) * f) * v;\n          // The run before is drawn half in the tails' colour, so it sits\n          // back and dims to violet or rose, not to grey or brown.\n          if (old) {\n            r += (lo[0] * v - r) * mixOld;\n            g += (lo[1] * v - g) * mixOld;\n            b += (lo[2] * v - b) * mixOld;\n          }\n        }\n        // The site energies, faint: high sites one tint, low sites another.\n        const e = vt[p], c = e > 0 ? pos : neg, a = 0.16 * abs(e) * 2;\n        r = max(r, c[0] * a);\n        g = max(g, c[1] * a);\n        b = max(b, c[2] * a);\n        if (cone[p]) {\n          r = max(r, 0.32);\n          g = max(g, 0.32);\n          b = max(b, 0.32);\n        }\n        r *= dm;\n        g *= dm;\n        b *= dm;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","layer":{"id":"layer-anderson-localization","type":"code","name":"anderson-localization","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Anderson Localization\n// Family:  wave\n// Idea:    A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Anderson localization (Philip W. Anderson, 1958), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16\n//\n// Knob 1: Hue. Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive.\n// Knob 2: Speed. How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s.\n// Knob 3: Disorder. The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8.\n// Knob 4: Samples. How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over.\n// Buttons: K1 tap launches now, on a new sample of energies and a new site.\n\nconst W = 64, H = 128, NS = 192, OFF = 64, MAXS = 16;\n// Time per row: 0.25 in units of the hopping, so 128 rows hold t = 0 to 32\n// and a clean cone, whose edge runs 2 sites per unit, reaches 32 sites out at\n// row 64. RK4 steps of 0.025, ten to a row.\nconst TROW = 0.25, STEPS = 10, DT = TROW / STEPS;\n// Rows per second at Speed 1.\nconst RATE = 10;\n// Brightness from the probability on a log scale: 1e-3 is dark, 0.4 full.\nconst LMIN = -3, LSPAN = 2.6;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst { floor, min, max, abs, log10, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, dis: 3, ns: 1, begun: false,\n    // u: each sample's site energies over W, uniform in [-1/2, 1/2].\n    u: new Float64Array(MAXS * NS), re: new Float64Array(MAXS * NS), im: new Float64Array(MAXS * NS), done: 0,\n    ya: new Float64Array(NS), yb: new Float64Array(NS), ka: new Float64Array(NS), kb: new Float64Array(NS),\n    sa: new Float64Array(NS), sb: new Float64Array(NS),\n    n0: 96, t: 0, row: 0, prog: 0, hold: 0, norm: 1,\n    rho: new Float32Array(W * H), vt: new Float32Array(W * H), cone: new Uint8Array(W * H), dim: new Float32Array(H),\n    lo: [0, 0, 0], mid: [0, 0, 0], hi: [0, 0, 0], pos: [0, 0, 0], neg: [0, 0, 0],\n  };\n}\n\n// dy/dt for y = re + i im under i dy/dt = H y, H y_n = -(y_n+1 + y_n-1) + V_n y_n,\n// with hard walls past both ends of the chain: d re = H im, d im = -H re.\nfunction deriv(a, b, u, o, Wd, ka, kb) {\n  for (let n = 0; n \u003c NS; n++) {\n    const V = Wd * u[o + n];\n    let ha = V * a[n], hb = V * b[n];\n    if (n > 0) {\n      ha -= a[n - 1];\n      hb -= b[n - 1];\n    }\n    if (n \u003c NS - 1) {\n      ha -= a[n + 1];\n      hb -= b[n + 1];\n    }\n    ka[n] = hb;\n    kb[n] = -ha;\n  }\n}\n\n// One RK4 step of one sample.\nfunction rk4(S, k, h) {\n  const o = k * NS, { re, im, u, ya, yb, ka, kb, sa, sb } = S, Wd = S.dis;\n  for (let n = 0; n \u003c NS; n++) {\n    ya[n] = re[o + n];\n    yb[n] = im[o + n];\n  }\n  // k1\n  const a0 = re.subarray(o, o + NS), b0 = im.subarray(o, o + NS);\n  deriv(a0, b0, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] = ka[n];\n    sb[n] = kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k2\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k3\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + h * ka[n];\n    yb[n] = b0[n] + h * kb[n];\n  }\n  // k4\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    a0[n] += (h / 6) * (sa[n] + ka[n]);\n    b0[n] += (h / 6) * (sb[n] + kb[n]);\n  }\n}\n\n// Put sample k on the launch site and run it up to the time of the run.\nfunction start(S, k) {\n  const o = k * NS;\n  S.re.fill(0, o, o + NS);\n  S.im.fill(0, o, o + NS);\n  S.re[o + S.n0] = 1;\n  const steps = round(S.t / DT);\n  for (let i = 0; i \u003c steps; i++) rk4(S, k, DT);\n}\n\n// A new run: fresh energies for every sample and a new site, picked so the\n// start lies in the middle 40 columns.\nfunction launch(S) {\n  for (let i = 0; i \u003c MAXS * NS; i++) S.u[i] = random() - 0.5;\n  S.n0 = OFF + 12 + floor(random() * 40);\n  S.t = 0;\n  S.row = 0;\n  S.prog = 0;\n  S.hold = 0;\n  for (let k = 0; k \u003c S.ns; k++) start(S, k);\n  S.done = S.ns;\n  // What is left of the run before stays at 40%.\n  S.dim.fill(0.4);\n}\n\n// Write the row for the present time, the samples' probability averaged.\nfunction writeRow(S) {\n  const r = S.row, { re, im, rho, vt, cone, u } = S, ns = S.ns, c0 = S.n0 - OFF, edge = 2 * S.t;\n  let norm = 0;\n  for (let n = 0; n \u003c NS; n++) norm += re[n] * re[n] + im[n] * im[n];\n  S.norm = norm;\n  for (let x = 0; x \u003c W; x++) {\n    const n = OFF + x;\n    let s = 0;\n    for (let k = 0; k \u003c ns; k++) {\n      const i = k * NS + n;\n      s += re[i] * re[i] + im[i] * im[i];\n    }\n    const p = r * W + x;\n    rho[p] = s / ns;\n    // The stripes show the first sample's energies, fainter as more samples\n    // are averaged, since the average has no one landscape.\n    vt[p] = u[n] / ns;\n    // The clean chain's light cone, n0 +- 2t, dotted every other row.\n    const d = abs(abs(x - c0) - edge);\n    cone[p] = r % 2 === 0 && d \u003c 0.5 && r > 0 ? 1 : 0;\n  }\n  S.dim[r] = 1;\n  S.row++;\n}\n\n// Run the present time forward to row r and write each row on the way.\nfunction advanceTo(S, target) {\n  while (S.row \u003c= target && S.row \u003c H) {\n    if (S.row > 0) {\n      for (let i = 0; i \u003c STEPS; i++) for (let k = 0; k \u003c S.ns; k++) rk4(S, k, DT);\n      S.t = S.row * TROW;\n    }\n    writeRow(S);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.dis = cl(k[2], 4, 12);\n  S.ns = round(cl(k[3], 1, MAXS));\n  if (!S.begun) {\n    // Open on a whole run already written, and a new one starting over it.\n    launch(S);\n    advanceTo(S, H - 1);\n    launch(S);\n    S.begun = true;\n  }\n  // Samples turned up in the middle of a run catch up to its time.\n  while (S.done \u003c S.ns) start(S, S.done++);\n  if (S.done > S.ns) S.done = S.ns;\n  if (input.btnPressed && input.btnPressed[0]) launch(S);\n  if (S.row >= H) {\n    S.hold += d * S.speed;\n    // Hold the finished run 1.5 s at Speed 2.\n    if (S.hold > 3) launch(S);\n    return;\n  }\n  S.prog += d * S.speed * RATE;\n  advanceTo(S, floor(S.prog));\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { rho, vt, cone, dim, lo, mid, hi, pos, neg } = S;\n  const h = S.hue + H0;\n  // Orange to yellow on the panel goes brown or olive when dim. Round there\n  // the tails turn toward rose instead of toward yellow, the body is paled\n  // to peach or butter, and everything is lifted.\n  const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.13, 0, 1);\n  hsv(h + 0.09 - 0.19 * warm, 1 - 0.2 * warm, 1, lo);\n  hsv(h, 0.85 - 0.4 * warm, 1, mid);\n  hsv(h - 0.04, 0.18, 1, hi);\n  hsv(h + 0.45, 0.7, 1, pos);\n  hsv(h + 0.3, 0.7, 1, neg);\n  const vlift = 1 + 0.4 * warm, head = S.row, mixOld = 0.5 + 0.4 * warm;\n  for (let y = 0; y \u003c H; y++) {\n    const old = dim[y] \u003c 1, dm = old ? dim[y] + 0.2 * warm : 1;\n    // Two rows of dark under the head, between the new run and the old.\n    const gap = old && y >= head && y \u003c head + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0, g = 0, b = 0;\n      if (!gap) {\n        const L = cl((log10(rho[p] + 1e-12) - LMIN) / LSPAN, 0, 1);\n        if (L > 0) {\n          const v = min(1, (0.1 + 0.9 * L) * vlift);\n          let c0 = lo, c1 = mid, f = L * 2;\n          if (L > 0.5) {\n            c0 = mid;\n            c1 = hi;\n            f = L * 2 - 1;\n          }\n          r = (c0[0] + (c1[0] - c0[0]) * f) * v;\n          g = (c0[1] + (c1[1] - c0[1]) * f) * v;\n          b = (c0[2] + (c1[2] - c0[2]) * f) * v;\n          // The run before is drawn half in the tails' colour, so it sits\n          // back and dims to violet or rose, not to grey or brown.\n          if (old) {\n            r += (lo[0] * v - r) * mixOld;\n            g += (lo[1] * v - g) * mixOld;\n            b += (lo[2] * v - b) * mixOld;\n          }\n        }\n        // The site energies, faint: high sites one tint, low sites another.\n        const e = vt[p], c = e > 0 ? pos : neg, a = 0.16 * abs(e) * 2;\n        r = max(r, c[0] * a);\n        g = max(g, c[1] * a);\n        b = max(b, c[2] * a);\n        if (cone[p]) {\n          r = max(r, 0.32);\n          g = max(g, 0.32);\n          b = max(b, 0.32);\n        }\n        r *= dm;\n        g *= dm;\n        b *= dm;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s."},{"name":"Disorder","min":4,"max":12,"about":"The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8."},{"name":"Samples","min":1,"max":16,"about":"How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over."}],"start":[0,2,4,1],"measures":{"motion":0.0706,"detail":0.0573,"edges":0.2197,"complexity":1.2567,"coverage":0.5738,"colour":0.1923,"drift":0.1291},"knobResponse":[0.0885,0.0786,0.0464,0.0484]},{"slug":"ant-farm","title":"Ant Farm","family":"insect","round":17,"note":"유리 사이에 모래를 채운 개미집에서 수확개미들이 바닥의 여왕 방까지 굴을 파고, 판 모래를 입구 옆 더미에 올리거나 오래된 막다른 굴에 다시 다져 넣어요. K1 을 누르면 뚜껑으로 물을 줘서 젖은 모래 얼룩이 천천히 아래로 번져요.","idea":"Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.","buttons":"K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","layer":{"id":"layer-ant-farm","type":"code","name":"ant-farm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fill","min":0,"max":1,"about":"Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second."},{"name":"Ants","min":40,"max":120,"about":"Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest."},{"name":"Lamp","min":0,"max":1,"about":"From daylight to the red lamp keepers watch by, because ants do not see red."}],"start":[0,2,40,0.06],"measures":{"motion":0.0748,"detail":0.0791,"edges":0.3143,"complexity":0.7035,"coverage":0.9824,"colour":0.2295,"drift":0.0611},"knobResponse":[0.2509,0.0544,0.0511,0.2616]},{"slug":"antoine-necklace","title":"Antoine's Necklace","family":"space","round":37,"note":"경기장 트랙 모양 유리 목걸이 안에 고리 18개가 이웃끼리 한 번씩 걸린 사슬이 들어 있고, 고리마다 목걸이 전체를 0.184배로 줄인 꼴이라 그 안에 또 사슬이 있어요. 카메라가 고리 하나로 9초에 한 세대씩 날아 들어가면 겉은 유리 테두리로 얇아지고 속 사슬이 단단해져서, 9초 뒤에는 색만 한 세대 넘어간 처음 그림이 돼요. K3 은 사슬의 고리를 30개까지 늘리고, 누르면 옆의 고리로 옮겨 들어가요.","idea":"A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.","buttons":"K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.","code":"// ===== Patternflow pattern =====\n// Title:   Antoine's Necklace\n// Family:  space\n// Idea:    A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Antoine's necklace (Louis Antoine, 1921), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90\n//\n// Knob 1: Hue. Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown.\n// Knob 2: Speed. How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s.\n// Knob 3: Links. Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12.\n// Knob 4: Turn. How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2.\n// Buttons: K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.\n\n// The shape. The core of the necklace is a stadium: two straight runs of\n// length 2L joined by two half circles of radius 1. The solid torus round it\n// has tube radius RHO. With L = 1 and RHO = 0.27 the outside is 2.54 wide and\n// 4.54 tall, and at a turn of 45 degrees it stands about twice as tall as it\n// is wide, like the panel.\n//\n// The links. A chain of N links runs round the core, one every P / N of arc\n// (P = 4L + 2 pi = 10.28). Every link is the necklace itself scaled by s, its\n// long axis along the core, and they alternate: even links lie in the\n// necklace's plane, odd links stand across it. The spacing is SPACE = 3.1\n// times a link's own core half width, so s = P / (3.1 N). Measured by\n// sampling every link's core at 96 points: at N = 18 the closest two\n// neighbours come within 0.47 of a link tube radius of touching, a link comes\n// within 0.38 of a tube radius of the parent's wall, and links two apart stay\n// 6 tube radii apart; at N = 30 these are 0.91, 4.1 and 6.1. The Gauss\n// linking integral, at 120 points a link for N = 18, 24 and 30, comes to 1\n// for every pair of neighbours and to 0 for every other pair. Uniform\n// spacing fails below 18: at 16 the bends turn neighbours 37 degrees against\n// each other, the end of one link swings towards the side of the next, and\n// the best scale still leaves them 0.05 of a tube radius into each other.\n//\n// Every link holds a chain built the same way, so the necklace is a fixed\n// set of similarity maps and it is the same at every scale. The dive target\n// is a flat link on a straight run, whose map is a pure shrink and shift,\n// x -> s x + c. The camera slides towards the map's fixed point\n// p = c / (1 - s), a point of the Cantor set, its distance to p shrinking by s\n// each generation, so the view at the end of one generation is the view at\n// its start. What changes is the colour: generations keep theirs as they grow.\n\nconst W = 64, H = 128, NPIX = W * H;\nconst L = 1, RHO = 0.27, SPACE = 3.1, P = 4 * L + 2 * Math.PI;\nconst BX = 1 + RHO, BY = L + 1 + RHO, BZ = RHO;\n// The camera stands 9 units from the necklace's middle with a focal length of\n// 222 LEDs, so the 4.54 units of height take 112 rows and the necklace's\n// neighbours in the chain it belongs to show above and below it.\nconst D0 = 9, F = 222;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Point and tangent of the core at arc length u, starting at the middle of\n// the right run and going up, so anticlockwise.\nfunction core(u, out) {\n  u = ((u % P) + P) % P;\n  let x, y, tx, ty;\n  if (u \u003c L) (x = 1), (y = u), (tx = 0), (ty = 1);\n  else if (u \u003c L + PI) {\n    const a = u - L;\n    (x = cos(a)), (y = L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else if (u \u003c 3 * L + PI) (x = -1), (y = L - (u - L - PI)), (tx = 0), (ty = -1);\n  else if (u \u003c 3 * L + 2 * PI) {\n    const a = PI + (u - 3 * L - PI);\n    (x = cos(a)), (y = -L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else (x = 1), (y = -L + (u - 3 * L - 2 * PI)), (tx = 0), (ty = 1);\n  out[0] = x;\n  out[1] = y;\n  out[2] = tx;\n  out[3] = ty;\n}\n\n// The N maps of one chain: rotation (columns: the link's across, along and\n// out-of-plane axes) and centre, all for a parent of size 1.\nfunction buildChain(N) {\n  const s = P / (SPACE * N), rot = new Float64Array(9 * N), ctr = new Float64Array(3 * N), targets = [], c = [0, 0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    core((i * P) / N, c);\n    const [x, y, tx, ty] = c, nx = ty, ny = -tx, o = 9 * i;\n    if (i % 2 === 0) {\n      // A flat link on a straight run gets no rotation at all, even on the\n      // left run where its axes point the other way: the stadium looks the\n      // same turned half round, and this keeps its map a pure shrink.\n      const flatRun = tx === 0;\n      rot.set(flatRun ? [1, 0, 0, 0, 1, 0, 0, 0, 1] : [nx, ny, 0, tx, ty, 0, 0, 0, 1], o);\n      if (flatRun) targets.push(i);\n    } else rot.set([0, 0, 1, tx, ty, 0, -ty, tx, 0], o);\n    ctr[3 * i] = x;\n    ctr[3 * i + 1] = y;\n  }\n  return { N, s, rot, ctr, targets };\n}\n\n// Ray directions through each LED, in view space (x right, y up, looking\n// down -z).\nconst RDX = new Float32Array(NPIX), RDY = new Float32Array(NPIX), RDZ = new Float32Array(NPIX);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - W / 2) / F, dy = -(y + 0.5 - H / 2) / F, n = 1 / sqrt(dx * dx + dy * dy + 1), p = y * W + x;\n    RDX[p] = dx * n;\n    RDY[p] = dy * n;\n    RDZ[p] = -n;\n  }\n\n// Light from the upper left and in front, and the half vector for the shine.\nconst LV = (() => {\n  const l = [-0.55, 0.6, 0.58], n = 1 / Math.hypot(...l);\n  const lx = l[0] * n, ly = l[1] * n, lz = l[2] * n, hz = lz + 1, hn = 1 / Math.hypot(lx, ly, hz);\n  return [lx, ly, lz, lx * hn, ly * hn, hz * hn];\n})();\n\n// Solidity and glass by apparent generation a = generation - zoom: a link is\n// solid from a = 0.85 up, thins to clear by a = 0.2, and its glass rim fades\n// out between a = 0 and a = -1, where it is the parent of the panel's parent.\nconst solidOf = (a) => sm(0.2, 0.85, a);\nconst glassOf = (a) => sm(-1, -0.25, a) * (1 - solidOf(a));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, links: 18, turn: 45, z: 0, gen: 0, clock: 0,\n    chain: buildChain(18), tgt: 0, ctx: 0, pend: false, from: null, glide: 1, gz0: 0,\n    zb: new Float32Array(NPIX), cr: new Float32Array(NPIX), cg: new Float32Array(NPIX), cb: new Float32Array(NPIX),\n    pal: new Float32Array(18), palHue: NaN, list: [],\n  };\n}\n\n// The camera's aim point for target index ti of a chain: p = c / (1 - s).\nfunction aim(ch, ti) {\n  const i = ch.targets[ti % ch.targets.length], k = 1 / (1 - ch.s);\n  return [ch.ctr[3 * i] * k, ch.ctr[3 * i + 1] * k, 0, i];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 18, 45], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.turn = cl(k[3], 45, 90);\n  const n = 2 * Math.round(cl(k[2], 18, 30) / 2);\n  if (n !== S.chain.N) {\n    S.chain = buildChain(n);\n    S.tgt = 0;\n    S.ctx = S.chain.targets[0];\n    S.glide = 1;\n    S.pend = false;\n  }\n  // The glide takes 1.5 s, which is gz of a generation. It must end before\n  // the wrap, so a tap late in a generation waits for the next one, where\n  // every target's path still starts from the same view.\n  const gz = (1.5 * S.speed) / 18;\n  if (input.btnPressed && input.btnPressed[0]) S.pend = true;\n  if (S.pend && S.glide >= 1 && S.z + gz \u003c 0.95) {\n    S.from = aim(S.chain, S.tgt);\n    S.tgt = (S.tgt + 1) % S.chain.targets.length;\n    S.glide = 0;\n    S.gz0 = S.z;\n    S.pend = false;\n  }\n  // If Speed is turned up during a glide it still ends by z = 0.97.\n  S.glide = min(1, max(S.glide + d / 1.5, (S.z - S.gz0) / (0.97 - S.gz0)));\n  S.clock += (d * S.speed) / 2;\n  S.z += (d * S.speed) / 18;\n  if (S.z >= 1) {\n    // One generation deeper: the target link becomes the necklace, and the\n    // necklace it sat in becomes the one round the panel.\n    S.z -= 1;\n    S.gen++;\n    S.glide = 1;\n    S.ctx = S.chain.targets[S.tgt];\n  }\n}\n\nfunction palette(S) {\n  // Three generation colours a third apart. At Hue 0 they are lime (glass of\n  // the opening), azure (the opening chain) and rose. Body colour and the\n  // floor its shaded side keeps: a red, orange or yellow body keeps more of\n  // its light and less of its saturation, as at half light it reads brown.\n  for (let g = 0; g \u003c 3; g++) {\n    const h = S.hue + 0.227 + g / 3, hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.02, hw) * (1 - sm(0.17, 0.27, hw));\n    hsv(h, 0.78 - 0.3 * warm, 1, S.pal, g * 6);\n    hsv(h, 0.28, 1, S.pal, g * 6 + 3);\n    S.pal[15 + g] = warm;\n  }\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const ch = S.chain, s = ch.s, z = S.z, sz = pow(s, z);\n  // The aim point, gliding after a tap.\n  let p = aim(ch, S.tgt);\n  if (S.glide \u003c 1 && S.from) {\n    const w = sm(0, 1, S.glide);\n    p = [S.from[0] + (p[0] - S.from[0]) * w, S.from[1] + (p[1] - S.from[1]) * w, 0, p[3]];\n  }\n  // View rotation: turn about the upright axis, then lean back 12 degrees.\n  // Halfway through each generation the necklace has swung 22 degrees\n  // further round, so the run the camera dives at turns to face along the\n  // view and the empty middle of the necklace narrows; it swings back by the\n  // end, and the swing starts and stops at rest, so the loop has no seam.\n  const sw = sin(PI * z), psi = ((S.turn + 22 * sw * sw + 8 * sin((2 * PI * S.clock) / 25)) * PI) / 180, tilt = (-12 * PI) / 180;\n  const cy = cos(psi), sy = sin(psi), ct = cos(tilt), st = sin(tilt);\n  // R = Rx(tilt) * Ry(psi), row-major.\n  const R = [cy, 0, sy, st * sy, ct, -st * cy, -ct * sy, st, ct * cy];\n  const k1 = 1 - sz, ox = p[0] * k1, oy = p[1] * k1;\n  // World point x -> view: R (x - (1 - s^z) p) - (0, 0, s^z D0).\n  const list = (S.list = []);\n  const near = 0.05 * sz * D0;\n  const visit = (Sc, M, cx, cy0, cz, gen) => {\n    // Centre in view.\n    const wx = cx - ox, wy = cy0 - oy, wz = cz;\n    const vx = R[0] * wx + R[1] * wy + R[2] * wz, vy = R[3] * wx + R[4] * wy + R[5] * wz, vz = R[6] * wx + R[7] * wy + R[8] * wz - sz * D0;\n    const rad = Sc * (BY + 0.05);\n    if (gen >= 0) {\n      if (vz - rad > -near) return;\n      const dz = -vz, ext = rad;\n      if (dz > ext) {\n        const sx = W / 2 + (F * vx) / dz, syy = H / 2 - (F * vy) / dz, pr = (F * ext) / (dz - ext);\n        if (sx + pr \u003c 0 || sx - pr > W || syy + pr \u003c 0 || syy - pr > H) return;\n        // A tube under a third of an LED thick is not drawn.\n        if ((F * Sc * RHO) / dz \u003c 0.17) return;\n      }\n      const a = gen - z, sol = solidOf(a), gl = glassOf(a);\n      if (sol > 0.004 || gl > 0.03) {\n        const MV = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n        for (let r = 0; r \u003c 3; r++)\n          for (let c = 0; c \u003c 3; c++) MV[r * 3 + c] = R[r * 3] * M[c] + R[r * 3 + 1] * M[3 + c] + R[r * 3 + 2] * M[6 + c];\n        list.push({ S: Sc, MV, vx, vy, vz, sol, gl, col: (((S.gen + gen) % 3) + 3) % 3 });\n      }\n      // Behind a link more than 97% solid its chain does not show.\n      if (sol >= 0.97 || gen >= 2) return;\n    }\n    for (let i = 0; i \u003c ch.N; i++) {\n      const o = 9 * i, Ri = ch.rot, ci = ch.ctr;\n      // Child rotation M * Ri (row-major M; Ri stored by columns).\n      const CM = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n      for (let r = 0; r \u003c 3; r++)\n        for (let c = 0; c \u003c 3; c++) CM[r * 3 + c] = M[r * 3] * Ri[o + c * 3] + M[r * 3 + 1] * Ri[o + c * 3 + 1] + M[r * 3 + 2] * Ri[o + c * 3 + 2];\n      const px = ci[3 * i], py = ci[3 * i + 1];\n      visit(Sc * s, CM, cx + Sc * (M[0] * px + M[1] * py), cy0 + Sc * (M[3] * px + M[4] * py), cz + Sc * (M[6] * px + M[7] * py), gen + 1);\n    }\n  };\n  // Start from the necklace the panel's necklace is a link of: the link the\n  // camera dived into last generation.\n  const ct0 = ch.ctr, ci0 = S.ctx;\n  visit(1 / s, [1, 0, 0, 0, 1, 0, 0, 0, 1], -ct0[3 * ci0] / s, -ct0[3 * ci0 + 1] / s, 0, -1);\n\n  const { zb, cr, cg, cb } = S;\n  zb.fill(Infinity);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  for (const e of list) if (e.sol >= 0.999) raster(S, e, true, sz);\n  const rest = list.filter((e) => e.sol \u003c 0.999).sort((a, b) => a.vz - b.vz);\n  for (const e of rest) raster(S, e, false, sz);\n  for (let i = 0; i \u003c NPIX; i++) display.setPixel(i % W, (i / W) | 0, cr[i] * 255, cg[i] * 255, cb[i] * 255);\n}\n\n// Trace every LED in the link's screen box against the link's own distance\n// field, in the link's frame where it has half width 1.\nfunction raster(S, e, solid, sz) {\n  const { MV, vx, vy, vz } = e, Sc = e.S, inv = 1 / Sc;\n  // Camera in link coordinates: MV^T (0 - centre) / S.\n  const ox = -(MV[0] * vx + MV[3] * vy + MV[6] * vz) * inv, oy = -(MV[1] * vx + MV[4] * vy + MV[7] * vz) * inv, oz = -(MV[2] * vx + MV[5] * vy + MV[8] * vz) * inv;\n  // Screen box from the eight corners of the link's box.\n  let x0 = W, x1 = -1, y0 = H, y1 = -1, full = false;\n  for (let c = 0; c \u003c 8; c++) {\n    const lx = c & 1 ? BX : -BX, ly = c & 2 ? BY : -BY, lz = c & 4 ? BZ : -BZ;\n    const px = vx + Sc * (MV[0] * lx + MV[1] * ly + MV[2] * lz), py = vy + Sc * (MV[3] * lx + MV[4] * ly + MV[5] * lz), pz = vz + Sc * (MV[6] * lx + MV[7] * ly + MV[8] * lz);\n    if (-pz \u003c 1e-3) {\n      full = true;\n      break;\n    }\n    const sx = W / 2 + (F * px) / -pz, sy = H / 2 - (F * py) / -pz;\n    if (sx \u003c x0) x0 = sx;\n    if (sx > x1) x1 = sx;\n    if (sy \u003c y0) y0 = sy;\n    if (sy > y1) y1 = sy;\n  }\n  if (full) (x0 = 0), (x1 = W - 1), (y0 = 0), (y1 = H - 1);\n  const X0 = max(0, floor(x0)), X1 = min(W - 1, floor(x1)), Y0 = max(0, floor(y0)), Y1 = min(H - 1, floor(y1));\n  if (X0 > X1 || Y0 > Y1) return;\n  const { zb, cr, cg, cb, pal } = S, g6 = e.col * 6, warm = pal[15 + e.col];\n  const br = pal[g6], bg = pal[g6 + 1], bb = pal[g6 + 2], gr = pal[g6 + 3], gg = pal[g6 + 4], gbb = pal[g6 + 5];\n  const [lx, ly, lz, hx, hy, hz] = LV;\n  const eps = 0.3 / F, sol = e.sol, gl = e.gl, dref = sz * D0;\n  for (let py = Y0; py \u003c= Y1; py++)\n    for (let px = X0; px \u003c= X1; px++) {\n      const p = py * W + px, rx = RDX[p], ry = RDY[p], rz = RDZ[p];\n      const dx = MV[0] * rx + MV[3] * ry + MV[6] * rz, dy = MV[1] * rx + MV[4] * ry + MV[7] * rz, dz = MV[2] * rx + MV[5] * ry + MV[8] * rz;\n      // Slab test against the box.\n      let t0 = 0, t1 = 1e9;\n      {\n        const ix = 1 / dx, a = (-BX - ox) * ix, b = (BX - ox) * ix;\n        t0 = max(t0, min(a, b));\n        t1 = min(t1, max(a, b));\n        const iy = 1 / dy, c = (-BY - oy) * iy, d = (BY - oy) * iy;\n        t0 = max(t0, min(c, d));\n        t1 = min(t1, max(c, d));\n        const iz = 1 / dz, f = (-BZ - oz) * iz, g = (BZ - oz) * iz;\n        t0 = max(t0, min(f, g));\n        t1 = min(t1, max(f, g));\n      }\n      if (t0 >= t1) continue;\n      const zmax = zb[p] * inv;\n      if (t0 >= zmax) continue;\n      let t = t0, hit = false, qx = 0, qy = 0, qz = 0, q = 0, rr = 0, dyy = 0;\n      for (let it = 0; it \u003c 48; it++) {\n        qx = ox + t * dx;\n        qy = oy + t * dy;\n        qz = oz + t * dz;\n        const ay = abs(qy) - L;\n        dyy = ay > 0 ? ay : 0;\n        rr = sqrt(qx * qx + dyy * dyy);\n        q = rr - 1;\n        const dist = sqrt(q * q + qz * qz) - RHO;\n        if (dist \u003c eps * t) {\n          hit = true;\n          break;\n        }\n        t += dist;\n        if (t > t1 || t > zmax) break;\n      }\n      if (!hit) continue;\n      // Normal in link coordinates, then in view.\n      const rinv = rr > 1e-6 ? 1 / rr : 0, gx = q * qx * rinv, gy = q * (qy \u003c 0 ? -dyy : dyy) * rinv;\n      let nl = sqrt(gx * gx + gy * gy + qz * qz);\n      nl = nl > 1e-9 ? 1 / nl : 0;\n      const nlx = gx * nl, nly = gy * nl, nlz = qz * nl;\n      const nx = MV[0] * nlx + MV[1] * nly + MV[2] * nlz, ny = MV[3] * nlx + MV[4] * nly + MV[5] * nlz, nz = MV[6] * nlx + MV[7] * nly + MV[8] * nlz;\n      const ndv = -(nx * rx + ny * ry + nz * rz), edge = abs(ndv);\n      const lam = max(0, nx * lx + ny * ly + nz * lz), spec = pow(max(0, nx * hx + ny * hy + nz * hz), 36);\n      const tv = t * Sc;\n      // Depth: nearer than the necklace's middle is brighter.\n      const fog = cl(1.25 - 0.55 * (tv / dref), 0.45, 1.2);\n      const amb = 0.2 + 0.25 * warm, body = (amb + (1 - amb) * lam) * sm(0.0, 0.45, edge) * fog;\n      let r = br * body + 0.75 * spec * fog, g = bg * body + 0.75 * spec * fog, b = bb * body + 0.75 * spec * fog;\n      if (solid) {\n        zb[p] = tv;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n        continue;\n      }\n      // Glass: a faint tint over its whole face, bright at the rim, and the\n      // shine. A thinning link blends its body over what lies behind it.\n      const rim = pow(1 - edge, 2.2), gw = gl * (0.05 + 0.85 * rim);\n      const keep = 1 - sol;\n      cr[p] = cr[p] * keep + r * sol + gr * gw + 0.5 * spec * gl;\n      cg[p] = cg[p] * keep + g * sol + gg * gw + 0.5 * spec * gl;\n      cb[p] = cb[p] * keep + b * sol + gbb * gw + 0.5 * spec * gl;\n    }\n}\n","layer":{"id":"layer-antoine-necklace","type":"code","name":"antoine-necklace","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Antoine's Necklace\n// Family:  space\n// Idea:    A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Antoine's necklace (Louis Antoine, 1921), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90\n//\n// Knob 1: Hue. Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown.\n// Knob 2: Speed. How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s.\n// Knob 3: Links. Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12.\n// Knob 4: Turn. How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2.\n// Buttons: K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.\n\n// The shape. The core of the necklace is a stadium: two straight runs of\n// length 2L joined by two half circles of radius 1. The solid torus round it\n// has tube radius RHO. With L = 1 and RHO = 0.27 the outside is 2.54 wide and\n// 4.54 tall, and at a turn of 45 degrees it stands about twice as tall as it\n// is wide, like the panel.\n//\n// The links. A chain of N links runs round the core, one every P / N of arc\n// (P = 4L + 2 pi = 10.28). Every link is the necklace itself scaled by s, its\n// long axis along the core, and they alternate: even links lie in the\n// necklace's plane, odd links stand across it. The spacing is SPACE = 3.1\n// times a link's own core half width, so s = P / (3.1 N). Measured by\n// sampling every link's core at 96 points: at N = 18 the closest two\n// neighbours come within 0.47 of a link tube radius of touching, a link comes\n// within 0.38 of a tube radius of the parent's wall, and links two apart stay\n// 6 tube radii apart; at N = 30 these are 0.91, 4.1 and 6.1. The Gauss\n// linking integral, at 120 points a link for N = 18, 24 and 30, comes to 1\n// for every pair of neighbours and to 0 for every other pair. Uniform\n// spacing fails below 18: at 16 the bends turn neighbours 37 degrees against\n// each other, the end of one link swings towards the side of the next, and\n// the best scale still leaves them 0.05 of a tube radius into each other.\n//\n// Every link holds a chain built the same way, so the necklace is a fixed\n// set of similarity maps and it is the same at every scale. The dive target\n// is a flat link on a straight run, whose map is a pure shrink and shift,\n// x -> s x + c. The camera slides towards the map's fixed point\n// p = c / (1 - s), a point of the Cantor set, its distance to p shrinking by s\n// each generation, so the view at the end of one generation is the view at\n// its start. What changes is the colour: generations keep theirs as they grow.\n\nconst W = 64, H = 128, NPIX = W * H;\nconst L = 1, RHO = 0.27, SPACE = 3.1, P = 4 * L + 2 * Math.PI;\nconst BX = 1 + RHO, BY = L + 1 + RHO, BZ = RHO;\n// The camera stands 9 units from the necklace's middle with a focal length of\n// 222 LEDs, so the 4.54 units of height take 112 rows and the necklace's\n// neighbours in the chain it belongs to show above and below it.\nconst D0 = 9, F = 222;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Point and tangent of the core at arc length u, starting at the middle of\n// the right run and going up, so anticlockwise.\nfunction core(u, out) {\n  u = ((u % P) + P) % P;\n  let x, y, tx, ty;\n  if (u \u003c L) (x = 1), (y = u), (tx = 0), (ty = 1);\n  else if (u \u003c L + PI) {\n    const a = u - L;\n    (x = cos(a)), (y = L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else if (u \u003c 3 * L + PI) (x = -1), (y = L - (u - L - PI)), (tx = 0), (ty = -1);\n  else if (u \u003c 3 * L + 2 * PI) {\n    const a = PI + (u - 3 * L - PI);\n    (x = cos(a)), (y = -L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else (x = 1), (y = -L + (u - 3 * L - 2 * PI)), (tx = 0), (ty = 1);\n  out[0] = x;\n  out[1] = y;\n  out[2] = tx;\n  out[3] = ty;\n}\n\n// The N maps of one chain: rotation (columns: the link's across, along and\n// out-of-plane axes) and centre, all for a parent of size 1.\nfunction buildChain(N) {\n  const s = P / (SPACE * N), rot = new Float64Array(9 * N), ctr = new Float64Array(3 * N), targets = [], c = [0, 0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    core((i * P) / N, c);\n    const [x, y, tx, ty] = c, nx = ty, ny = -tx, o = 9 * i;\n    if (i % 2 === 0) {\n      // A flat link on a straight run gets no rotation at all, even on the\n      // left run where its axes point the other way: the stadium looks the\n      // same turned half round, and this keeps its map a pure shrink.\n      const flatRun = tx === 0;\n      rot.set(flatRun ? [1, 0, 0, 0, 1, 0, 0, 0, 1] : [nx, ny, 0, tx, ty, 0, 0, 0, 1], o);\n      if (flatRun) targets.push(i);\n    } else rot.set([0, 0, 1, tx, ty, 0, -ty, tx, 0], o);\n    ctr[3 * i] = x;\n    ctr[3 * i + 1] = y;\n  }\n  return { N, s, rot, ctr, targets };\n}\n\n// Ray directions through each LED, in view space (x right, y up, looking\n// down -z).\nconst RDX = new Float32Array(NPIX), RDY = new Float32Array(NPIX), RDZ = new Float32Array(NPIX);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - W / 2) / F, dy = -(y + 0.5 - H / 2) / F, n = 1 / sqrt(dx * dx + dy * dy + 1), p = y * W + x;\n    RDX[p] = dx * n;\n    RDY[p] = dy * n;\n    RDZ[p] = -n;\n  }\n\n// Light from the upper left and in front, and the half vector for the shine.\nconst LV = (() => {\n  const l = [-0.55, 0.6, 0.58], n = 1 / Math.hypot(...l);\n  const lx = l[0] * n, ly = l[1] * n, lz = l[2] * n, hz = lz + 1, hn = 1 / Math.hypot(lx, ly, hz);\n  return [lx, ly, lz, lx * hn, ly * hn, hz * hn];\n})();\n\n// Solidity and glass by apparent generation a = generation - zoom: a link is\n// solid from a = 0.85 up, thins to clear by a = 0.2, and its glass rim fades\n// out between a = 0 and a = -1, where it is the parent of the panel's parent.\nconst solidOf = (a) => sm(0.2, 0.85, a);\nconst glassOf = (a) => sm(-1, -0.25, a) * (1 - solidOf(a));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, links: 18, turn: 45, z: 0, gen: 0, clock: 0,\n    chain: buildChain(18), tgt: 0, ctx: 0, pend: false, from: null, glide: 1, gz0: 0,\n    zb: new Float32Array(NPIX), cr: new Float32Array(NPIX), cg: new Float32Array(NPIX), cb: new Float32Array(NPIX),\n    pal: new Float32Array(18), palHue: NaN, list: [],\n  };\n}\n\n// The camera's aim point for target index ti of a chain: p = c / (1 - s).\nfunction aim(ch, ti) {\n  const i = ch.targets[ti % ch.targets.length], k = 1 / (1 - ch.s);\n  return [ch.ctr[3 * i] * k, ch.ctr[3 * i + 1] * k, 0, i];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 18, 45], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.turn = cl(k[3], 45, 90);\n  const n = 2 * Math.round(cl(k[2], 18, 30) / 2);\n  if (n !== S.chain.N) {\n    S.chain = buildChain(n);\n    S.tgt = 0;\n    S.ctx = S.chain.targets[0];\n    S.glide = 1;\n    S.pend = false;\n  }\n  // The glide takes 1.5 s, which is gz of a generation. It must end before\n  // the wrap, so a tap late in a generation waits for the next one, where\n  // every target's path still starts from the same view.\n  const gz = (1.5 * S.speed) / 18;\n  if (input.btnPressed && input.btnPressed[0]) S.pend = true;\n  if (S.pend && S.glide >= 1 && S.z + gz \u003c 0.95) {\n    S.from = aim(S.chain, S.tgt);\n    S.tgt = (S.tgt + 1) % S.chain.targets.length;\n    S.glide = 0;\n    S.gz0 = S.z;\n    S.pend = false;\n  }\n  // If Speed is turned up during a glide it still ends by z = 0.97.\n  S.glide = min(1, max(S.glide + d / 1.5, (S.z - S.gz0) / (0.97 - S.gz0)));\n  S.clock += (d * S.speed) / 2;\n  S.z += (d * S.speed) / 18;\n  if (S.z >= 1) {\n    // One generation deeper: the target link becomes the necklace, and the\n    // necklace it sat in becomes the one round the panel.\n    S.z -= 1;\n    S.gen++;\n    S.glide = 1;\n    S.ctx = S.chain.targets[S.tgt];\n  }\n}\n\nfunction palette(S) {\n  // Three generation colours a third apart. At Hue 0 they are lime (glass of\n  // the opening), azure (the opening chain) and rose. Body colour and the\n  // floor its shaded side keeps: a red, orange or yellow body keeps more of\n  // its light and less of its saturation, as at half light it reads brown.\n  for (let g = 0; g \u003c 3; g++) {\n    const h = S.hue + 0.227 + g / 3, hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.02, hw) * (1 - sm(0.17, 0.27, hw));\n    hsv(h, 0.78 - 0.3 * warm, 1, S.pal, g * 6);\n    hsv(h, 0.28, 1, S.pal, g * 6 + 3);\n    S.pal[15 + g] = warm;\n  }\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const ch = S.chain, s = ch.s, z = S.z, sz = pow(s, z);\n  // The aim point, gliding after a tap.\n  let p = aim(ch, S.tgt);\n  if (S.glide \u003c 1 && S.from) {\n    const w = sm(0, 1, S.glide);\n    p = [S.from[0] + (p[0] - S.from[0]) * w, S.from[1] + (p[1] - S.from[1]) * w, 0, p[3]];\n  }\n  // View rotation: turn about the upright axis, then lean back 12 degrees.\n  // Halfway through each generation the necklace has swung 22 degrees\n  // further round, so the run the camera dives at turns to face along the\n  // view and the empty middle of the necklace narrows; it swings back by the\n  // end, and the swing starts and stops at rest, so the loop has no seam.\n  const sw = sin(PI * z), psi = ((S.turn + 22 * sw * sw + 8 * sin((2 * PI * S.clock) / 25)) * PI) / 180, tilt = (-12 * PI) / 180;\n  const cy = cos(psi), sy = sin(psi), ct = cos(tilt), st = sin(tilt);\n  // R = Rx(tilt) * Ry(psi), row-major.\n  const R = [cy, 0, sy, st * sy, ct, -st * cy, -ct * sy, st, ct * cy];\n  const k1 = 1 - sz, ox = p[0] * k1, oy = p[1] * k1;\n  // World point x -> view: R (x - (1 - s^z) p) - (0, 0, s^z D0).\n  const list = (S.list = []);\n  const near = 0.05 * sz * D0;\n  const visit = (Sc, M, cx, cy0, cz, gen) => {\n    // Centre in view.\n    const wx = cx - ox, wy = cy0 - oy, wz = cz;\n    const vx = R[0] * wx + R[1] * wy + R[2] * wz, vy = R[3] * wx + R[4] * wy + R[5] * wz, vz = R[6] * wx + R[7] * wy + R[8] * wz - sz * D0;\n    const rad = Sc * (BY + 0.05);\n    if (gen >= 0) {\n      if (vz - rad > -near) return;\n      const dz = -vz, ext = rad;\n      if (dz > ext) {\n        const sx = W / 2 + (F * vx) / dz, syy = H / 2 - (F * vy) / dz, pr = (F * ext) / (dz - ext);\n        if (sx + pr \u003c 0 || sx - pr > W || syy + pr \u003c 0 || syy - pr > H) return;\n        // A tube under a third of an LED thick is not drawn.\n        if ((F * Sc * RHO) / dz \u003c 0.17) return;\n      }\n      const a = gen - z, sol = solidOf(a), gl = glassOf(a);\n      if (sol > 0.004 || gl > 0.03) {\n        const MV = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n        for (let r = 0; r \u003c 3; r++)\n          for (let c = 0; c \u003c 3; c++) MV[r * 3 + c] = R[r * 3] * M[c] + R[r * 3 + 1] * M[3 + c] + R[r * 3 + 2] * M[6 + c];\n        list.push({ S: Sc, MV, vx, vy, vz, sol, gl, col: (((S.gen + gen) % 3) + 3) % 3 });\n      }\n      // Behind a link more than 97% solid its chain does not show.\n      if (sol >= 0.97 || gen >= 2) return;\n    }\n    for (let i = 0; i \u003c ch.N; i++) {\n      const o = 9 * i, Ri = ch.rot, ci = ch.ctr;\n      // Child rotation M * Ri (row-major M; Ri stored by columns).\n      const CM = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n      for (let r = 0; r \u003c 3; r++)\n        for (let c = 0; c \u003c 3; c++) CM[r * 3 + c] = M[r * 3] * Ri[o + c * 3] + M[r * 3 + 1] * Ri[o + c * 3 + 1] + M[r * 3 + 2] * Ri[o + c * 3 + 2];\n      const px = ci[3 * i], py = ci[3 * i + 1];\n      visit(Sc * s, CM, cx + Sc * (M[0] * px + M[1] * py), cy0 + Sc * (M[3] * px + M[4] * py), cz + Sc * (M[6] * px + M[7] * py), gen + 1);\n    }\n  };\n  // Start from the necklace the panel's necklace is a link of: the link the\n  // camera dived into last generation.\n  const ct0 = ch.ctr, ci0 = S.ctx;\n  visit(1 / s, [1, 0, 0, 0, 1, 0, 0, 0, 1], -ct0[3 * ci0] / s, -ct0[3 * ci0 + 1] / s, 0, -1);\n\n  const { zb, cr, cg, cb } = S;\n  zb.fill(Infinity);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  for (const e of list) if (e.sol >= 0.999) raster(S, e, true, sz);\n  const rest = list.filter((e) => e.sol \u003c 0.999).sort((a, b) => a.vz - b.vz);\n  for (const e of rest) raster(S, e, false, sz);\n  for (let i = 0; i \u003c NPIX; i++) display.setPixel(i % W, (i / W) | 0, cr[i] * 255, cg[i] * 255, cb[i] * 255);\n}\n\n// Trace every LED in the link's screen box against the link's own distance\n// field, in the link's frame where it has half width 1.\nfunction raster(S, e, solid, sz) {\n  const { MV, vx, vy, vz } = e, Sc = e.S, inv = 1 / Sc;\n  // Camera in link coordinates: MV^T (0 - centre) / S.\n  const ox = -(MV[0] * vx + MV[3] * vy + MV[6] * vz) * inv, oy = -(MV[1] * vx + MV[4] * vy + MV[7] * vz) * inv, oz = -(MV[2] * vx + MV[5] * vy + MV[8] * vz) * inv;\n  // Screen box from the eight corners of the link's box.\n  let x0 = W, x1 = -1, y0 = H, y1 = -1, full = false;\n  for (let c = 0; c \u003c 8; c++) {\n    const lx = c & 1 ? BX : -BX, ly = c & 2 ? BY : -BY, lz = c & 4 ? BZ : -BZ;\n    const px = vx + Sc * (MV[0] * lx + MV[1] * ly + MV[2] * lz), py = vy + Sc * (MV[3] * lx + MV[4] * ly + MV[5] * lz), pz = vz + Sc * (MV[6] * lx + MV[7] * ly + MV[8] * lz);\n    if (-pz \u003c 1e-3) {\n      full = true;\n      break;\n    }\n    const sx = W / 2 + (F * px) / -pz, sy = H / 2 - (F * py) / -pz;\n    if (sx \u003c x0) x0 = sx;\n    if (sx > x1) x1 = sx;\n    if (sy \u003c y0) y0 = sy;\n    if (sy > y1) y1 = sy;\n  }\n  if (full) (x0 = 0), (x1 = W - 1), (y0 = 0), (y1 = H - 1);\n  const X0 = max(0, floor(x0)), X1 = min(W - 1, floor(x1)), Y0 = max(0, floor(y0)), Y1 = min(H - 1, floor(y1));\n  if (X0 > X1 || Y0 > Y1) return;\n  const { zb, cr, cg, cb, pal } = S, g6 = e.col * 6, warm = pal[15 + e.col];\n  const br = pal[g6], bg = pal[g6 + 1], bb = pal[g6 + 2], gr = pal[g6 + 3], gg = pal[g6 + 4], gbb = pal[g6 + 5];\n  const [lx, ly, lz, hx, hy, hz] = LV;\n  const eps = 0.3 / F, sol = e.sol, gl = e.gl, dref = sz * D0;\n  for (let py = Y0; py \u003c= Y1; py++)\n    for (let px = X0; px \u003c= X1; px++) {\n      const p = py * W + px, rx = RDX[p], ry = RDY[p], rz = RDZ[p];\n      const dx = MV[0] * rx + MV[3] * ry + MV[6] * rz, dy = MV[1] * rx + MV[4] * ry + MV[7] * rz, dz = MV[2] * rx + MV[5] * ry + MV[8] * rz;\n      // Slab test against the box.\n      let t0 = 0, t1 = 1e9;\n      {\n        const ix = 1 / dx, a = (-BX - ox) * ix, b = (BX - ox) * ix;\n        t0 = max(t0, min(a, b));\n        t1 = min(t1, max(a, b));\n        const iy = 1 / dy, c = (-BY - oy) * iy, d = (BY - oy) * iy;\n        t0 = max(t0, min(c, d));\n        t1 = min(t1, max(c, d));\n        const iz = 1 / dz, f = (-BZ - oz) * iz, g = (BZ - oz) * iz;\n        t0 = max(t0, min(f, g));\n        t1 = min(t1, max(f, g));\n      }\n      if (t0 >= t1) continue;\n      const zmax = zb[p] * inv;\n      if (t0 >= zmax) continue;\n      let t = t0, hit = false, qx = 0, qy = 0, qz = 0, q = 0, rr = 0, dyy = 0;\n      for (let it = 0; it \u003c 48; it++) {\n        qx = ox + t * dx;\n        qy = oy + t * dy;\n        qz = oz + t * dz;\n        const ay = abs(qy) - L;\n        dyy = ay > 0 ? ay : 0;\n        rr = sqrt(qx * qx + dyy * dyy);\n        q = rr - 1;\n        const dist = sqrt(q * q + qz * qz) - RHO;\n        if (dist \u003c eps * t) {\n          hit = true;\n          break;\n        }\n        t += dist;\n        if (t > t1 || t > zmax) break;\n      }\n      if (!hit) continue;\n      // Normal in link coordinates, then in view.\n      const rinv = rr > 1e-6 ? 1 / rr : 0, gx = q * qx * rinv, gy = q * (qy \u003c 0 ? -dyy : dyy) * rinv;\n      let nl = sqrt(gx * gx + gy * gy + qz * qz);\n      nl = nl > 1e-9 ? 1 / nl : 0;\n      const nlx = gx * nl, nly = gy * nl, nlz = qz * nl;\n      const nx = MV[0] * nlx + MV[1] * nly + MV[2] * nlz, ny = MV[3] * nlx + MV[4] * nly + MV[5] * nlz, nz = MV[6] * nlx + MV[7] * nly + MV[8] * nlz;\n      const ndv = -(nx * rx + ny * ry + nz * rz), edge = abs(ndv);\n      const lam = max(0, nx * lx + ny * ly + nz * lz), spec = pow(max(0, nx * hx + ny * hy + nz * hz), 36);\n      const tv = t * Sc;\n      // Depth: nearer than the necklace's middle is brighter.\n      const fog = cl(1.25 - 0.55 * (tv / dref), 0.45, 1.2);\n      const amb = 0.2 + 0.25 * warm, body = (amb + (1 - amb) * lam) * sm(0.0, 0.45, edge) * fog;\n      let r = br * body + 0.75 * spec * fog, g = bg * body + 0.75 * spec * fog, b = bb * body + 0.75 * spec * fog;\n      if (solid) {\n        zb[p] = tv;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n        continue;\n      }\n      // Glass: a faint tint over its whole face, bright at the rim, and the\n      // shine. A thinning link blends its body over what lies behind it.\n      const rim = pow(1 - edge, 2.2), gw = gl * (0.05 + 0.85 * rim);\n      const keep = 1 - sol;\n      cr[p] = cr[p] * keep + r * sol + gr * gw + 0.5 * spec * gl;\n      cg[p] = cg[p] * keep + g * sol + gg * gw + 0.5 * spec * gl;\n      cb[p] = cb[p] * keep + b * sol + gbb * gw + 0.5 * spec * gl;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s."},{"name":"Links","min":18,"max":30,"about":"Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12."},{"name":"Turn","min":45,"max":90,"about":"How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2."}],"start":[0,2,18,45],"measures":{"motion":0.8976,"detail":0.0847,"edges":0.5082,"complexity":1.4555,"coverage":0.5229,"colour":0.1494,"drift":0.2617},"knobResponse":[0.1332,0.2651,0.185,0.2969]},{"slug":"aquarium","title":"Aquarium","family":"pixel","round":2,"note":"높은 수조에 흰동가리, 블루탱, 엔젤피시, 네온테트라 떼가 꼬리를 흔들며 헤엄쳐요. 모래 위 보물상자가 몇 초마다 뚜껑을 열어 공기 방울을 뱉고, K1 을 누르면 먹이가 떨어져 물고기가 몰려와요.","idea":"A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.","buttons":"K1 tap drops a pinch of food at the surface, and every fish goes for it.","code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","layer":{"id":"layer-aquarium","type":"code","name":"aquarium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet."},{"name":"Swim","min":0.2,"max":4,"about":"How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush."},{"name":"Fish","min":6,"max":18,"about":"How many fish live in the tank; new ones swim in from the side and spare ones swim out."},{"name":"Light","min":-1,"max":1,"about":"Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand."}],"start":[0,2,6,0.06],"measures":{"motion":0.1521,"detail":0.0707,"edges":0.4986,"complexity":0.73,"coverage":0.9459,"colour":0.2752,"drift":0.0492},"knobResponse":[0.1007,0.0662,0.0696,0.1627]},{"slug":"arnold-tongues","title":"Arnold Tongues","family":"rhythm","round":32,"note":"아래 가장자리의 분수 p/q 마다 혀가 하나씩 위로 자라 벌어져요. 양옆은 0/1 과 1/1 혀, 가운데는 분홍 1/2 혀, 그 양쪽은 초록 1/3 과 2/3 혀예요. 혀마다 q박에 한 번 번쩍여서 판 전체가 13박까지의 폴리리듬으로 뛰고, 회색 탐침선이 오르내리며 그 높이의 악마의 계단을 그어요.","idea":"The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.","buttons":"K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.","code":"// ===== Patternflow pattern =====\n// Title:   Arnold Tongues\n// Family:  rhythm\n// Idea:    The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold tongues of the circle map (Vladimir Arnold, 1961), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right.\n// Knob 2: Tempo. 0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2.\n// Knob 3: Zoom. At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second.\n// Knob 4: Depth. The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points.\n// Buttons: K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.\n\nconst W = 64, H = 128, SX = 3, NS = W * SX, QM = 21, T = 320, EPS = 1e-4, RUNS = 4;\nconst { floor, round, abs, exp, cos, min, max, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst GOLD2 = (3 - Math.sqrt(5)) / 2;\n\n// sin(2 pi u) from a table: the map runs 320 steps for each of 24576 points.\nconst LN = 4096, SIN = new Float64Array(LN + 1);\nfor (let i = 0; i \u003c= LN; i++) SIN[i] = Math.sin((TAU * i) / LN);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The lifted circle map th -> th + Om - (K / 2 pi) sin(2 pi th), from th = 0.\n// Row y has K = 1 - (1 - u)^2 with u = (127 - y) / 127: 0 at the bottom, 1 at\n// the top, and twice as many rows near the top, where the tongues spread, as\n// a straight scale would give. After 320 steps the point is locked to p/q\n// when th moved by exactly p over each of its last four runs of q steps; the\n// smallest such q wins. The rotation number rho is the mean step over the\n// last 256.\nconst kOf = (y) => {\n  const u = 1 - (H - 1 - y) / (H - 1);\n  return 1 - u * u;\n};\nconst BUF = new Float64Array(T + 1);\nfunction buildRow(P, y) {\n  const c = kOf(y) / TAU, o = y * NS, o0 = P.om0, dw = (P.om1 - P.om0) / NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const om = o0 + (j + 0.5) * dw;\n    let th = 0;\n    for (let n = 0; n \u003c T; n++) {\n      BUF[n] = th;\n      const u = (th - floor(th)) * LN, i = u | 0;\n      th += om - c * (SIN[i] + (SIN[i + 1] - SIN[i]) * (u - i));\n    }\n    BUF[T] = th;\n    let q = 1;\n    for (; q \u003c= QM; q++) {\n      const p = round(BUF[T] - BUF[T - q]);\n      let r = 0;\n      while (r \u003c RUNS && abs(BUF[T - r * q] - BUF[T - r * q - q] - p) \u003c EPS) r++;\n      if (r === RUNS) break;\n    }\n    P.Q[o + j] = q > QM ? 0 : q;\n    P.R[o + j] = (BUF[T] - BUF[T - 256]) / 256;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    Q: new Uint8Array(H * NS), R: new Float32Array(H * NS), zoom: -1, om0: 0, om1: 1, next: H,\n    beat: 0, hue: NaN, depth: 13, accent: 0,\n    pal: new Float32Array((QM + 1) * 3), dim: new Float32Array(256 * 3), env: new Float32Array(QM + 1),\n    row: new Float32Array(W * 3), lock: new Uint8Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const z = round(cl(k[2], 0, 1) * 200) / 200;\n  const first = P.zoom \u003c 0;\n  if (z !== P.zoom) {\n    // The window narrows to 0.12 wide and slides to the golden section.\n    P.zoom = z;\n    const w = exp(Math.log(0.12) * z), c = 0.5 + (GOLD2 - 0.5) * ((1 - w) / (1 - 0.12));\n    (P.om0 = c - w / 2), (P.om1 = c + w / 2), (P.next = 0);\n  }\n  // The first frame builds all 128 rows; after a turn of Zoom they are built\n  // again from the bottom, four rows a frame.\n  for (let b = first ? H : 4; b > 0 && P.next \u003c H; b--) buildRow(P, H - 1 - P.next++);\n  P.depth = round(2 + 19 * ((cl(k[3], -1, 1) + 1) / 2) ** 0.9);\n  P.beat += d * 0.8 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0]) (P.beat = 0), (P.accent = 1);\n  P.accent = max(0, P.accent - d * 0.9);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    // q = 1, the two wide tongues at the sides, stays dim so the rest show.\n    for (let q = 1; q \u003c= QM; q++) hsv(k[0] + 0.52 + GOLD2 * (q - 1), 0.78, q === 1 ? 0.3 : 0.66 - 0.008 * q, P.pal, q * 3);\n    for (let i = 0; i \u003c 256; i++) hsv(k[0] + 0.62 + (0.3 * i) / 255, 0.7, 0.17, P.dim, i * 3);\n  }\n  // Beat b lights every tongue whose q divides it, and the light dies away\n  // over the beat.\n  const b = floor(P.beat), f = P.beat - b;\n  for (let q = 1; q \u003c= QM; q++) P.env[q] = b % q === 0 ? exp(-3.2 * f) : 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.zoom \u003c 0) return;\n  const { Q, R, pal, dim, env, row, lock } = P, D = P.depth, acc = P.accent;\n  const f = P.beat - floor(P.beat), yb = (H - 1) * (1 - 1.3 * f), rs = 255 / (P.om1 - P.om0), r0 = P.om0;\n  // The scan line: up and down the panel once every 24 beats.\n  const yp = round((H - 1) * (0.5 + 0.5 * cos((TAU * P.beat) / 24)));\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * NS;\n    // On each beat a band of light runs up the tongues that beat lights.\n    const band = exp(-((y - yb) * (y - yb)) / 120);\n    row.fill(0);\n    for (let x = 0; x \u003c W; x++) {\n      // A tongue thinner than an LED still lights the whole LED, so long as\n      // it holds for a row above or below; a lone locked point, a thin\n      // tongue that bends across this column, lights its third.\n      let qs = 99, r = 0, g = 0, b = 0;\n      for (let j = x * SX; j \u003c x * SX + SX; j++) {\n        const q = Q[o + j];\n        if (q && q \u003c= D) {\n          if (q \u003c qs && ((y > 0 && Q[o + j - NS] === q) || (y \u003c H - 1 && Q[o + j + NS] === q))) qs = q;\n          (r += pal[q * 3]), (g += pal[q * 3 + 1]), (b += pal[q * 3 + 2]);\n        } else {\n          // Not locked, or locked past Depth: a dim colour that runs with rho.\n          const i = cl(round((R[o + j] - r0) * rs), 0, 255) * 3;\n          (r += dim[i]), (g += dim[i + 1]), (b += dim[i + 2]);\n        }\n      }\n      if (y === yp) lock[x] = qs \u003c 99 ? qs : 0;\n      if (qs \u003c 99) {\n        const e = min(1, env[qs] * (0.55 + 0.6 * band) + acc), m = 1 + 0.6 * e, wv = 130 * e;\n        display.setPixel(x, y, min(255, pal[qs * 3] * m + wv), min(255, pal[qs * 3 + 1] * m + wv), min(255, pal[qs * 3 + 2] * m + wv));\n      } else display.setPixel(x, y, r / SX, g / SX, b / SX);\n    }\n  }\n  // The devil's staircase at the scan line: rho against Omega, rho scaled so\n  // the bottom row's straight line rho = Omega would run corner to corner.\n  // Its flat steps are the tongues the line crosses, in their colours.\n  const o = yp * NS, sc = (H - 1) / (P.om1 - P.om0);\n  let py = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0;\n    for (let s = 0; s \u003c SX; s++) r += R[o + x * SX + s];\n    const sy = cl(round(H - 1 - (r / SX - r0) * sc), 0, H - 1);\n    const a = py \u003c 0 ? sy : py, y0 = min(a, sy), y1 = max(a, sy), q = lock[x];\n    for (let y = y0; y \u003c= y1; y++) display.setPixel(x, y, 170, 170, 165);\n    if (q) display.setPixel(x, sy, min(255, pal[q * 3] * 1.3 + 100), min(255, pal[q * 3 + 1] * 1.3 + 100), min(255, pal[q * 3 + 2] * 1.3 + 100));\n    py = sy;\n    if (x % 2 === 0 && (yp \u003c y0 || yp > y1)) display.setPixel(x, yp, 150, 150, 150);\n  }\n}\n","layer":{"id":"layer-arnold-tongues","type":"code","name":"arnold-tongues","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Arnold Tongues\n// Family:  rhythm\n// Idea:    The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold tongues of the circle map (Vladimir Arnold, 1961), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right.\n// Knob 2: Tempo. 0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2.\n// Knob 3: Zoom. At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second.\n// Knob 4: Depth. The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points.\n// Buttons: K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.\n\nconst W = 64, H = 128, SX = 3, NS = W * SX, QM = 21, T = 320, EPS = 1e-4, RUNS = 4;\nconst { floor, round, abs, exp, cos, min, max, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst GOLD2 = (3 - Math.sqrt(5)) / 2;\n\n// sin(2 pi u) from a table: the map runs 320 steps for each of 24576 points.\nconst LN = 4096, SIN = new Float64Array(LN + 1);\nfor (let i = 0; i \u003c= LN; i++) SIN[i] = Math.sin((TAU * i) / LN);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The lifted circle map th -> th + Om - (K / 2 pi) sin(2 pi th), from th = 0.\n// Row y has K = 1 - (1 - u)^2 with u = (127 - y) / 127: 0 at the bottom, 1 at\n// the top, and twice as many rows near the top, where the tongues spread, as\n// a straight scale would give. After 320 steps the point is locked to p/q\n// when th moved by exactly p over each of its last four runs of q steps; the\n// smallest such q wins. The rotation number rho is the mean step over the\n// last 256.\nconst kOf = (y) => {\n  const u = 1 - (H - 1 - y) / (H - 1);\n  return 1 - u * u;\n};\nconst BUF = new Float64Array(T + 1);\nfunction buildRow(P, y) {\n  const c = kOf(y) / TAU, o = y * NS, o0 = P.om0, dw = (P.om1 - P.om0) / NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const om = o0 + (j + 0.5) * dw;\n    let th = 0;\n    for (let n = 0; n \u003c T; n++) {\n      BUF[n] = th;\n      const u = (th - floor(th)) * LN, i = u | 0;\n      th += om - c * (SIN[i] + (SIN[i + 1] - SIN[i]) * (u - i));\n    }\n    BUF[T] = th;\n    let q = 1;\n    for (; q \u003c= QM; q++) {\n      const p = round(BUF[T] - BUF[T - q]);\n      let r = 0;\n      while (r \u003c RUNS && abs(BUF[T - r * q] - BUF[T - r * q - q] - p) \u003c EPS) r++;\n      if (r === RUNS) break;\n    }\n    P.Q[o + j] = q > QM ? 0 : q;\n    P.R[o + j] = (BUF[T] - BUF[T - 256]) / 256;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    Q: new Uint8Array(H * NS), R: new Float32Array(H * NS), zoom: -1, om0: 0, om1: 1, next: H,\n    beat: 0, hue: NaN, depth: 13, accent: 0,\n    pal: new Float32Array((QM + 1) * 3), dim: new Float32Array(256 * 3), env: new Float32Array(QM + 1),\n    row: new Float32Array(W * 3), lock: new Uint8Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const z = round(cl(k[2], 0, 1) * 200) / 200;\n  const first = P.zoom \u003c 0;\n  if (z !== P.zoom) {\n    // The window narrows to 0.12 wide and slides to the golden section.\n    P.zoom = z;\n    const w = exp(Math.log(0.12) * z), c = 0.5 + (GOLD2 - 0.5) * ((1 - w) / (1 - 0.12));\n    (P.om0 = c - w / 2), (P.om1 = c + w / 2), (P.next = 0);\n  }\n  // The first frame builds all 128 rows; after a turn of Zoom they are built\n  // again from the bottom, four rows a frame.\n  for (let b = first ? H : 4; b > 0 && P.next \u003c H; b--) buildRow(P, H - 1 - P.next++);\n  P.depth = round(2 + 19 * ((cl(k[3], -1, 1) + 1) / 2) ** 0.9);\n  P.beat += d * 0.8 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0]) (P.beat = 0), (P.accent = 1);\n  P.accent = max(0, P.accent - d * 0.9);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    // q = 1, the two wide tongues at the sides, stays dim so the rest show.\n    for (let q = 1; q \u003c= QM; q++) hsv(k[0] + 0.52 + GOLD2 * (q - 1), 0.78, q === 1 ? 0.3 : 0.66 - 0.008 * q, P.pal, q * 3);\n    for (let i = 0; i \u003c 256; i++) hsv(k[0] + 0.62 + (0.3 * i) / 255, 0.7, 0.17, P.dim, i * 3);\n  }\n  // Beat b lights every tongue whose q divides it, and the light dies away\n  // over the beat.\n  const b = floor(P.beat), f = P.beat - b;\n  for (let q = 1; q \u003c= QM; q++) P.env[q] = b % q === 0 ? exp(-3.2 * f) : 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.zoom \u003c 0) return;\n  const { Q, R, pal, dim, env, row, lock } = P, D = P.depth, acc = P.accent;\n  const f = P.beat - floor(P.beat), yb = (H - 1) * (1 - 1.3 * f), rs = 255 / (P.om1 - P.om0), r0 = P.om0;\n  // The scan line: up and down the panel once every 24 beats.\n  const yp = round((H - 1) * (0.5 + 0.5 * cos((TAU * P.beat) / 24)));\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * NS;\n    // On each beat a band of light runs up the tongues that beat lights.\n    const band = exp(-((y - yb) * (y - yb)) / 120);\n    row.fill(0);\n    for (let x = 0; x \u003c W; x++) {\n      // A tongue thinner than an LED still lights the whole LED, so long as\n      // it holds for a row above or below; a lone locked point, a thin\n      // tongue that bends across this column, lights its third.\n      let qs = 99, r = 0, g = 0, b = 0;\n      for (let j = x * SX; j \u003c x * SX + SX; j++) {\n        const q = Q[o + j];\n        if (q && q \u003c= D) {\n          if (q \u003c qs && ((y > 0 && Q[o + j - NS] === q) || (y \u003c H - 1 && Q[o + j + NS] === q))) qs = q;\n          (r += pal[q * 3]), (g += pal[q * 3 + 1]), (b += pal[q * 3 + 2]);\n        } else {\n          // Not locked, or locked past Depth: a dim colour that runs with rho.\n          const i = cl(round((R[o + j] - r0) * rs), 0, 255) * 3;\n          (r += dim[i]), (g += dim[i + 1]), (b += dim[i + 2]);\n        }\n      }\n      if (y === yp) lock[x] = qs \u003c 99 ? qs : 0;\n      if (qs \u003c 99) {\n        const e = min(1, env[qs] * (0.55 + 0.6 * band) + acc), m = 1 + 0.6 * e, wv = 130 * e;\n        display.setPixel(x, y, min(255, pal[qs * 3] * m + wv), min(255, pal[qs * 3 + 1] * m + wv), min(255, pal[qs * 3 + 2] * m + wv));\n      } else display.setPixel(x, y, r / SX, g / SX, b / SX);\n    }\n  }\n  // The devil's staircase at the scan line: rho against Omega, rho scaled so\n  // the bottom row's straight line rho = Omega would run corner to corner.\n  // Its flat steps are the tongues the line crosses, in their colours.\n  const o = yp * NS, sc = (H - 1) / (P.om1 - P.om0);\n  let py = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0;\n    for (let s = 0; s \u003c SX; s++) r += R[o + x * SX + s];\n    const sy = cl(round(H - 1 - (r / SX - r0) * sc), 0, H - 1);\n    const a = py \u003c 0 ? sy : py, y0 = min(a, sy), y1 = max(a, sy), q = lock[x];\n    for (let y = y0; y \u003c= y1; y++) display.setPixel(x, y, 170, 170, 165);\n    if (q) display.setPixel(x, sy, min(255, pal[q * 3] * 1.3 + 100), min(255, pal[q * 3 + 1] * 1.3 + 100), min(255, pal[q * 3 + 2] * 1.3 + 100));\n    py = sy;\n    if (x % 2 === 0 && (yp \u003c y0 || yp > y1)) display.setPixel(x, yp, 150, 150, 150);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right."},{"name":"Tempo","min":0.2,"max":3,"about":"0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2."},{"name":"Zoom","min":0,"max":1,"about":"At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second."},{"name":"Depth","min":-1,"max":1,"about":"The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points."}],"start":[0,2,0,0.06],"measures":{"motion":0.3954,"detail":0.0597,"edges":0.7533,"complexity":0.3067,"coverage":1,"colour":0.3016,"drift":0.0852},"knobResponse":[0.2048,0.0673,0.163,0.058]},{"slug":"aurora","title":"Aurora","family":"light","round":1,"note":"떠도는 선에 빛 커튼이 걸리고, 빛줄기는 커튼이 흔들리는 것보다 느리게 일렁여요.","idea":"Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n// @ramp oklab 0:#000000 0.18:#04122e 0.45:#0b6b5a 0.72:#3dff9a 0.9:#b8ffd9 1:#f0c8ff\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","layer":{"id":"layer-aurora","type":"code","name":"aurora","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":0.18,"color":"#04122e","alpha":1},{"position":0.45,"color":"#0b6b5a","alpha":1},{"position":0.72,"color":"#3dff9a","alpha":1},{"position":0.9,"color":"#b8ffd9","alpha":1},{"position":1,"color":"#f0c8ff","alpha":1}],"mode":"oklab","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sway","min":0,"max":1,"about":"How far the curtains swing from side to side."},{"name":"Speed","min":0.1,"max":5,"about":"How fast everything drifts."},{"name":"Curtains","min":1,"max":4,"about":"One curtain or a sky of up to four, each its own height."},{"name":"Rays","min":0,"max":1,"about":"From a smooth glow to sharp vertical rays."}],"start":[0,2,1,0.06],"measures":{"motion":0.0423,"detail":0.0219,"edges":0.176,"complexity":1.1219,"coverage":0.4849,"colour":0.2574,"drift":0.0814},"knobResponse":[0.0412,0.0639,0.142,0.0829]},{"slug":"axon","title":"Axon","family":"body","round":23,"note":"어두운 조직 속에서 신경세포 하나가 초록 형광으로 빛나요. 세포체를 떠난 스파이크가 수초 사이의 랑비에 결절을 하나씩 건너뛰며 축삭을 내려가고, 말단 단추가 시냅스 틈 너머로 신호를 넘기면 아래의 자홍색 신경세포가 따라 켜져요. K4 를 올리면 수초가 벗겨져 신호가 기어가다 꺼져요.","idea":"A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.","buttons":"K1 tap fires a burst of four spikes now.","code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","layer":{"id":"layer-axon","type":"code","name":"axon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei."},{"name":"Speed","min":0.2,"max":3,"about":"The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower."},{"name":"Rate","min":1,"max":8,"about":"How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8."},{"name":"Damage","min":0,"max":1,"about":"Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals."}],"start":[0,2,1,0.06],"measures":{"motion":0.2284,"detail":0.0799,"edges":0.4159,"complexity":1.8734,"coverage":0.4953,"colour":0.2394,"drift":0.0867},"knobResponse":[0.1239,0.0564,0.0498,0.061]},{"slug":"aztec-diamond","title":"Aztec Diamond","family":"cells","round":28,"note":"아즈텍 다이아몬드 여덟 개가 패널을 덮고 저마다 도미노 셔플로 자라요. 도미노가 제 방향으로 한 LED 씩 미끄러지고 빈 2×2 칸에 새 쌍이 들어서면, 다 자란 다이아몬드의 네 모서리는 한 색 벽돌로 얼고 북극권 원 안만 뒤섞여요. K3 이 가로와 세로의 몫을 기울여 원을 타원으로 바꾸고, 누르면 처음부터 다시 자라요.","idea":"Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.","buttons":"K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.","code":"// ===== Patternflow pattern =====\n// Title:   Aztec Diamond\n// Family:  cells\n// Idea:    Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino shuffling on the Aztec diamond (Elkies, Kuperberg, Larsen and Propp, 1992) and the arctic circle theorem (Jockusch, Propp and Shor, 1995), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1\n//\n// Knob 1: Hue. Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red.\n// Knob 2: Speed. At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower.\n// Knob 3: Bias. The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way.\n// Knob 4: Checker. How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED.\n// Buttons: K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, floor, abs, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n\n// The four kinds of domino, by orientation and by the colour of the\n// checkerboard square under their first cell: 0 north, 1 east, 2 south,\n// 3 west. At order k a horizontal domino whose left cell is (x, y) goes north\n// when x + y + k is odd and south when it is even; a vertical one goes west\n// when odd and east when even.\nconst kind = (x, y, v, k) => ((x + y + k) & 1 ? (v ? 3 : 0) : v ? 1 : 2);\nconst STEP = [[0, -1], [1, 0], [0, 1], [-1, 0]];\n\n// Aztec diamonds tile the plane. Two of order 32 stand whole on the panel,\n// one above the other; the gaps round them are diamonds of order 31, halved\n// by the sides and quartered by the corners. Those grow only to order 30, so\n// a one-LED diagonal of dark runs between every two diamonds.\n// [centre x, centre y, order, hold in seconds at Speed 2, clock at the start, order at the start]\nconst LAYOUT = [\n  [32, 32, 32, 15, -21, 32],\n  [32, 96, 32, 15, 0, 18],\n  [0, 64, 30, 50, 39, 30],\n  [64, 64, 30, 50, 25, 30],\n  [0, 0, 30, 50, 4, 30],\n  [64, 0, 30, 50, 32, 30],\n  [0, 128, 30, 50, 18, 30],\n  [64, 128, 30, 50, 11, 30],\n];\n\n// A diamond keeps its dominoes as lists (left or top cell, vertical or not,\n// grain) and two pictures of its cells to fade between: per cell 0 for empty\n// or 1 + the kind of the domino on it, and that domino's grain, 204 to 255.\nfunction makeDiamond([cx, cy, N, hold]) {\n  const F = 2 * N, M = N * (N + 1) + 4, C = F * F;\n  return {\n    cx, cy, N, F, hold, k: 0, n: 0, p: 0.5, wait: 0,\n    dx: new Int16Array(M), dy: new Int16Array(M), dv: new Uint8Array(M), dg: new Uint8Array(M),\n    grid: new Int16Array(C).fill(-1),\n    ft: new Uint8Array(C), fg: new Uint8Array(C), tt: new Uint8Array(C), tg: new Uint8Array(C),\n    stage: 0, sub: 1, u: 1, dur: 0.1, clock: 0,\n  };\n}\n\nfunction regrid(D) {\n  const g = D.grid, F = D.F;\n  g.fill(-1);\n  for (let i = 0; i \u003c D.n; i++) {\n    const c = D.dx[i] + D.dy[i] * F;\n    g[c] = i;\n    g[D.dv[i] ? c + F : c + 1] = i;\n  }\n}\n\nfunction add(D, x, y, v) {\n  const i = D.n++;\n  (D.dx[i] = x), (D.dy[i] = y), (D.dv[i] = v), (D.dg[i] = 204 + floor(random() * 52));\n  return i;\n}\n\n// Shuffling, order k to k + 1, in three moves. First the bad blocks go: a\n// south-going domino right above a north-going one, or an east-going one\n// right left of a west-going one, would pass through each other.\nfunction destroy(D) {\n  regrid(D);\n  const { dx, dy, dv, grid: g, k, F } = D;\n  const dead = new Uint8Array(D.n);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F;\n    if (t === 2) {\n      const j = g[c + F];\n      if (j >= 0 && !dv[j] && dx[j] === dx[i] && dy[j] === dy[i] + 1) dead[i] = dead[j] = 1;\n    } else if (t === 1) {\n      const j = g[c + 1];\n      if (j >= 0 && dv[j] && dx[j] === dx[i] + 1 && dy[j] === dy[i]) dead[i] = dead[j] = 1;\n    }\n  }\n  let m = 0;\n  for (let i = 0; i \u003c D.n; i++)\n    if (!dead[i]) (dx[m] = dx[i]), (dy[m] = dy[i]), (dv[m] = dv[i]), (D.dg[m] = D.dg[i]), m++;\n  D.n = m;\n}\n\n// Then every domino slides one cell in its own direction.\nfunction slide(D) {\n  const { dx, dy, dv, k } = D;\n  for (let i = 0; i \u003c D.n; i++) {\n    const s = STEP[kind(dx[i], dy[i], dv[i], k)];\n    (dx[i] += s[0]), (dy[i] += s[1]);\n  }\n  D.k = k + 1;\n  regrid(D);\n}\n\n// And the holes left in the bigger diamond, which always come as 2x2\n// blocks, each take a random pair: two horizontal with probability p,\n// two vertical otherwise.\nfunction create(D) {\n  const { grid: g, k, p, N, F } = D;\n  for (let y = N - k; y \u003c N + k; y++) {\n    const r = k - abs(2 * y + 1 - F) / 2 + 0.5;\n    for (let x = N - r; x \u003c N + r; x++) {\n      const c = x + y * F;\n      if (g[c] >= 0) continue;\n      if (random() \u003c p) {\n        g[c] = g[c + 1] = add(D, x, y, 0);\n        g[c + F] = g[c + F + 1] = add(D, x, y + 1, 0);\n      } else {\n        g[c] = g[c + F] = add(D, x, y, 1);\n        g[c + 1] = g[c + F + 1] = add(D, x + 1, y, 1);\n      }\n    }\n  }\n}\n\n// At full size the tiling keeps moving by flips: a 2x2 block covered by two\n// parallel dominoes turns over to the other pair with the same odds as a\n// fresh block. The weighted uniform measure stays put under it, so the\n// frozen corners hold still and only the arctic circle churns.\nfunction flips(D, tries) {\n  const { dx, dy, dv, grid: g, p, F } = D;\n  for (let t = 0; t \u003c tries; t++) {\n    const x = floor(random() * (F - 1)), y = floor(random() * (F - 1)), c = x + y * F, a = g[c];\n    if (a \u003c 0 || dx[a] !== x || dy[a] !== y) continue;\n    const h = random() \u003c p;\n    if (!dv[a]) {\n      const b = g[c + F];\n      if (b \u003c 0 || dv[b] || dx[b] !== x || dy[b] !== y + 1 || h) continue;\n      (dv[a] = dv[b] = 1), (dx[b] = x + 1), (dy[b] = y);\n      (g[c + F] = a), (g[c + 1] = b);\n    } else {\n      const b = g[c + 1];\n      if (b \u003c 0 || !dv[b] || dx[b] !== x + 1 || dy[b] !== y || !h) continue;\n      (dv[a] = dv[b] = 0), (dx[b] = x), (dy[b] = y + 1);\n      (g[c + 1] = a), (g[c + F] = b);\n    }\n  }\n}\n\n// The picture a diamond fades to.\nfunction paint(D) {\n  const { dx, dy, dv, dg, k, F, tt, tg } = D;\n  tt.fill(0);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F, c2 = dv[i] ? c + F : c + 1;\n    (tt[c] = tt[c2] = t + 1), (tg[c] = tg[c2] = dg[i]);\n  }\n}\n\nfunction retire(D, dur) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  (D.u = 0), (D.stage = 2), (D.dur = dur), (D.n = 0);\n  paint(D);\n}\n\n// One move of a diamond's life. Growing, a step from order k to k + 1 takes\n// two fades: the bad pairs go out while every other domino slides, then the\n// holes fill. Grown, it flips blocks a batch at a time until its hold runs\n// out, fades and grows again from order 1.\nfunction begin(D, P) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  D.u = 0;\n  const s = P.speed, T = 0.9 / s;\n  if (D.stage === 0) {\n    if (D.sub === 0) create(D), (D.sub = 1), (D.dur = 0.4 * T);\n    else if (D.k >= D.N) {\n      (D.stage = 1), (D.clock = -D.wait), (D.wait = 0);\n      return begin(D, P);\n    } else if (D.k === 0) (D.k = 1), regrid(D), create(D), (D.dur = 0.4 * T);\n    else destroy(D), slide(D), (D.sub = 0), (D.dur = 0.6 * T);\n  } else if (D.stage === 1) {\n    if (D.clock > (D.hold * 2) / s) {\n      if (D.N \u003c 32) D.hold = 40 + 20 * random();\n      return retire(D, 0.8);\n    }\n    flips(D, 500), (D.dur = 0.35 / s);\n  } else {\n    (D.stage = 0), (D.sub = 1), (D.k = 0), (D.n = 0);\n    return begin(D, P);\n  }\n  paint(D);\n}\n\n// Which diamond and which of its cells each LED shows; -1 is the dark seam.\nconst OWN = new Int8Array(NP).fill(-1), CELL = new Int32Array(NP);\nLAYOUT.forEach(([cx, cy, N], d) => {\n  for (let y = 0; y \u003c 2 * N; y++)\n    for (let x = 0; x \u003c 2 * N; x++) {\n      const X = cx - N + x, Y = cy - N + y;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H || abs(2 * x + 1 - 2 * N) + abs(2 * y + 1 - 2 * N) > 2 * N) continue;\n      (OWN[X + Y * W] = d), (CELL[X + Y * W] = x + y * 2 * N);\n    }\n});\n\nexport function setup(params) {\n  params.s = { fresh: true, speed: 2, hue: 0, dark: 0.4, D: LAYOUT.map(makeDiamond), col: new Float32Array(12) };\n}\n\n// The top diamond opens grown and churning, the bottom one at order 18 and\n// still growing, the six round them grown and due to regrow one by one,\n// the first after 11 seconds. They grow on the first frame, once Bias is known.\nfunction opening(P) {\n  P.D.forEach((D, i) => {\n    begin(D, P);\n    while (D.k \u003c LAYOUT[i][5] || (D.k >= D.N && D.stage === 0)) begin(D, P);\n    D.clock = LAYOUT[i][4];\n  });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const bias = cl(k[2], -1, 1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.dark = 0.38 * (1 + cl(k[3], -1, 1));\n  P.D.forEach((D, i) => (D.p = 0.5 + (i \u003c 2 ? 0.4 : -0.4) * bias));\n  if (P.fresh) (P.fresh = false), opening(P);\n  // K1: every diamond fades and grows again from order 1, all together; the\n  // bottom one then holds half a cycle longer, so the two take turns again.\n  if (input.btnPressed && input.btnPressed[0])\n    P.D.forEach((D, i) => {\n      D.wait = ((i === 1 ? 15 : i > 1 ? 30 * random() : 0) * 2) / P.speed;\n      retire(D, 0.4);\n    });\n  for (const D of P.D) {\n    D.clock += d;\n    D.u += d / D.dur;\n    if (D.u >= 1) begin(D, P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const col = P.col, sm = 1 - P.dark, E = P.D.map((D) => ease(cl(D.u, 0, 1)));\n  // Orange north, green east, blue south, magenta west at Hue 0.\n  for (let t = 0; t \u003c 4; t++) hsv(P.hue + 0.1 + t * 0.25, 0.94, 1, col, t * 3);\n  for (let p = 0; p \u003c NP; p++) {\n    const d = OWN[p], x = p % W, y = (p / W) | 0;\n    if (d \u003c 0) {\n      display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    // The checkerboard stays put on the LEDs while the dominoes slide over it.\n    const D = P.D[d], c = CELL[p], a = D.ft[c], b = D.tt[c], e = E[d], lv = (x + y) & 1 ? sm : 1;\n    let r = 0, g = 0, bl = 0;\n    if (a) {\n      const w = D.fg[c] * lv * (1 - e), q = (a - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    if (b) {\n      const w = D.tg[c] * lv * e, q = (b - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    display.setPixel(x, y, min(255, r), min(255, g), min(255, bl));\n  }\n}\n","layer":{"id":"layer-aztec-diamond","type":"code","name":"aztec-diamond","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aztec Diamond\n// Family:  cells\n// Idea:    Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino shuffling on the Aztec diamond (Elkies, Kuperberg, Larsen and Propp, 1992) and the arctic circle theorem (Jockusch, Propp and Shor, 1995), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1\n//\n// Knob 1: Hue. Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red.\n// Knob 2: Speed. At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower.\n// Knob 3: Bias. The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way.\n// Knob 4: Checker. How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED.\n// Buttons: K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, floor, abs, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n\n// The four kinds of domino, by orientation and by the colour of the\n// checkerboard square under their first cell: 0 north, 1 east, 2 south,\n// 3 west. At order k a horizontal domino whose left cell is (x, y) goes north\n// when x + y + k is odd and south when it is even; a vertical one goes west\n// when odd and east when even.\nconst kind = (x, y, v, k) => ((x + y + k) & 1 ? (v ? 3 : 0) : v ? 1 : 2);\nconst STEP = [[0, -1], [1, 0], [0, 1], [-1, 0]];\n\n// Aztec diamonds tile the plane. Two of order 32 stand whole on the panel,\n// one above the other; the gaps round them are diamonds of order 31, halved\n// by the sides and quartered by the corners. Those grow only to order 30, so\n// a one-LED diagonal of dark runs between every two diamonds.\n// [centre x, centre y, order, hold in seconds at Speed 2, clock at the start, order at the start]\nconst LAYOUT = [\n  [32, 32, 32, 15, -21, 32],\n  [32, 96, 32, 15, 0, 18],\n  [0, 64, 30, 50, 39, 30],\n  [64, 64, 30, 50, 25, 30],\n  [0, 0, 30, 50, 4, 30],\n  [64, 0, 30, 50, 32, 30],\n  [0, 128, 30, 50, 18, 30],\n  [64, 128, 30, 50, 11, 30],\n];\n\n// A diamond keeps its dominoes as lists (left or top cell, vertical or not,\n// grain) and two pictures of its cells to fade between: per cell 0 for empty\n// or 1 + the kind of the domino on it, and that domino's grain, 204 to 255.\nfunction makeDiamond([cx, cy, N, hold]) {\n  const F = 2 * N, M = N * (N + 1) + 4, C = F * F;\n  return {\n    cx, cy, N, F, hold, k: 0, n: 0, p: 0.5, wait: 0,\n    dx: new Int16Array(M), dy: new Int16Array(M), dv: new Uint8Array(M), dg: new Uint8Array(M),\n    grid: new Int16Array(C).fill(-1),\n    ft: new Uint8Array(C), fg: new Uint8Array(C), tt: new Uint8Array(C), tg: new Uint8Array(C),\n    stage: 0, sub: 1, u: 1, dur: 0.1, clock: 0,\n  };\n}\n\nfunction regrid(D) {\n  const g = D.grid, F = D.F;\n  g.fill(-1);\n  for (let i = 0; i \u003c D.n; i++) {\n    const c = D.dx[i] + D.dy[i] * F;\n    g[c] = i;\n    g[D.dv[i] ? c + F : c + 1] = i;\n  }\n}\n\nfunction add(D, x, y, v) {\n  const i = D.n++;\n  (D.dx[i] = x), (D.dy[i] = y), (D.dv[i] = v), (D.dg[i] = 204 + floor(random() * 52));\n  return i;\n}\n\n// Shuffling, order k to k + 1, in three moves. First the bad blocks go: a\n// south-going domino right above a north-going one, or an east-going one\n// right left of a west-going one, would pass through each other.\nfunction destroy(D) {\n  regrid(D);\n  const { dx, dy, dv, grid: g, k, F } = D;\n  const dead = new Uint8Array(D.n);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F;\n    if (t === 2) {\n      const j = g[c + F];\n      if (j >= 0 && !dv[j] && dx[j] === dx[i] && dy[j] === dy[i] + 1) dead[i] = dead[j] = 1;\n    } else if (t === 1) {\n      const j = g[c + 1];\n      if (j >= 0 && dv[j] && dx[j] === dx[i] + 1 && dy[j] === dy[i]) dead[i] = dead[j] = 1;\n    }\n  }\n  let m = 0;\n  for (let i = 0; i \u003c D.n; i++)\n    if (!dead[i]) (dx[m] = dx[i]), (dy[m] = dy[i]), (dv[m] = dv[i]), (D.dg[m] = D.dg[i]), m++;\n  D.n = m;\n}\n\n// Then every domino slides one cell in its own direction.\nfunction slide(D) {\n  const { dx, dy, dv, k } = D;\n  for (let i = 0; i \u003c D.n; i++) {\n    const s = STEP[kind(dx[i], dy[i], dv[i], k)];\n    (dx[i] += s[0]), (dy[i] += s[1]);\n  }\n  D.k = k + 1;\n  regrid(D);\n}\n\n// And the holes left in the bigger diamond, which always come as 2x2\n// blocks, each take a random pair: two horizontal with probability p,\n// two vertical otherwise.\nfunction create(D) {\n  const { grid: g, k, p, N, F } = D;\n  for (let y = N - k; y \u003c N + k; y++) {\n    const r = k - abs(2 * y + 1 - F) / 2 + 0.5;\n    for (let x = N - r; x \u003c N + r; x++) {\n      const c = x + y * F;\n      if (g[c] >= 0) continue;\n      if (random() \u003c p) {\n        g[c] = g[c + 1] = add(D, x, y, 0);\n        g[c + F] = g[c + F + 1] = add(D, x, y + 1, 0);\n      } else {\n        g[c] = g[c + F] = add(D, x, y, 1);\n        g[c + 1] = g[c + F + 1] = add(D, x + 1, y, 1);\n      }\n    }\n  }\n}\n\n// At full size the tiling keeps moving by flips: a 2x2 block covered by two\n// parallel dominoes turns over to the other pair with the same odds as a\n// fresh block. The weighted uniform measure stays put under it, so the\n// frozen corners hold still and only the arctic circle churns.\nfunction flips(D, tries) {\n  const { dx, dy, dv, grid: g, p, F } = D;\n  for (let t = 0; t \u003c tries; t++) {\n    const x = floor(random() * (F - 1)), y = floor(random() * (F - 1)), c = x + y * F, a = g[c];\n    if (a \u003c 0 || dx[a] !== x || dy[a] !== y) continue;\n    const h = random() \u003c p;\n    if (!dv[a]) {\n      const b = g[c + F];\n      if (b \u003c 0 || dv[b] || dx[b] !== x || dy[b] !== y + 1 || h) continue;\n      (dv[a] = dv[b] = 1), (dx[b] = x + 1), (dy[b] = y);\n      (g[c + F] = a), (g[c + 1] = b);\n    } else {\n      const b = g[c + 1];\n      if (b \u003c 0 || !dv[b] || dx[b] !== x + 1 || dy[b] !== y || !h) continue;\n      (dv[a] = dv[b] = 0), (dx[b] = x), (dy[b] = y + 1);\n      (g[c + 1] = a), (g[c + F] = b);\n    }\n  }\n}\n\n// The picture a diamond fades to.\nfunction paint(D) {\n  const { dx, dy, dv, dg, k, F, tt, tg } = D;\n  tt.fill(0);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F, c2 = dv[i] ? c + F : c + 1;\n    (tt[c] = tt[c2] = t + 1), (tg[c] = tg[c2] = dg[i]);\n  }\n}\n\nfunction retire(D, dur) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  (D.u = 0), (D.stage = 2), (D.dur = dur), (D.n = 0);\n  paint(D);\n}\n\n// One move of a diamond's life. Growing, a step from order k to k + 1 takes\n// two fades: the bad pairs go out while every other domino slides, then the\n// holes fill. Grown, it flips blocks a batch at a time until its hold runs\n// out, fades and grows again from order 1.\nfunction begin(D, P) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  D.u = 0;\n  const s = P.speed, T = 0.9 / s;\n  if (D.stage === 0) {\n    if (D.sub === 0) create(D), (D.sub = 1), (D.dur = 0.4 * T);\n    else if (D.k >= D.N) {\n      (D.stage = 1), (D.clock = -D.wait), (D.wait = 0);\n      return begin(D, P);\n    } else if (D.k === 0) (D.k = 1), regrid(D), create(D), (D.dur = 0.4 * T);\n    else destroy(D), slide(D), (D.sub = 0), (D.dur = 0.6 * T);\n  } else if (D.stage === 1) {\n    if (D.clock > (D.hold * 2) / s) {\n      if (D.N \u003c 32) D.hold = 40 + 20 * random();\n      return retire(D, 0.8);\n    }\n    flips(D, 500), (D.dur = 0.35 / s);\n  } else {\n    (D.stage = 0), (D.sub = 1), (D.k = 0), (D.n = 0);\n    return begin(D, P);\n  }\n  paint(D);\n}\n\n// Which diamond and which of its cells each LED shows; -1 is the dark seam.\nconst OWN = new Int8Array(NP).fill(-1), CELL = new Int32Array(NP);\nLAYOUT.forEach(([cx, cy, N], d) => {\n  for (let y = 0; y \u003c 2 * N; y++)\n    for (let x = 0; x \u003c 2 * N; x++) {\n      const X = cx - N + x, Y = cy - N + y;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H || abs(2 * x + 1 - 2 * N) + abs(2 * y + 1 - 2 * N) > 2 * N) continue;\n      (OWN[X + Y * W] = d), (CELL[X + Y * W] = x + y * 2 * N);\n    }\n});\n\nexport function setup(params) {\n  params.s = { fresh: true, speed: 2, hue: 0, dark: 0.4, D: LAYOUT.map(makeDiamond), col: new Float32Array(12) };\n}\n\n// The top diamond opens grown and churning, the bottom one at order 18 and\n// still growing, the six round them grown and due to regrow one by one,\n// the first after 11 seconds. They grow on the first frame, once Bias is known.\nfunction opening(P) {\n  P.D.forEach((D, i) => {\n    begin(D, P);\n    while (D.k \u003c LAYOUT[i][5] || (D.k >= D.N && D.stage === 0)) begin(D, P);\n    D.clock = LAYOUT[i][4];\n  });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const bias = cl(k[2], -1, 1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.dark = 0.38 * (1 + cl(k[3], -1, 1));\n  P.D.forEach((D, i) => (D.p = 0.5 + (i \u003c 2 ? 0.4 : -0.4) * bias));\n  if (P.fresh) (P.fresh = false), opening(P);\n  // K1: every diamond fades and grows again from order 1, all together; the\n  // bottom one then holds half a cycle longer, so the two take turns again.\n  if (input.btnPressed && input.btnPressed[0])\n    P.D.forEach((D, i) => {\n      D.wait = ((i === 1 ? 15 : i > 1 ? 30 * random() : 0) * 2) / P.speed;\n      retire(D, 0.4);\n    });\n  for (const D of P.D) {\n    D.clock += d;\n    D.u += d / D.dur;\n    if (D.u >= 1) begin(D, P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const col = P.col, sm = 1 - P.dark, E = P.D.map((D) => ease(cl(D.u, 0, 1)));\n  // Orange north, green east, blue south, magenta west at Hue 0.\n  for (let t = 0; t \u003c 4; t++) hsv(P.hue + 0.1 + t * 0.25, 0.94, 1, col, t * 3);\n  for (let p = 0; p \u003c NP; p++) {\n    const d = OWN[p], x = p % W, y = (p / W) | 0;\n    if (d \u003c 0) {\n      display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    // The checkerboard stays put on the LEDs while the dominoes slide over it.\n    const D = P.D[d], c = CELL[p], a = D.ft[c], b = D.tt[c], e = E[d], lv = (x + y) & 1 ? sm : 1;\n    let r = 0, g = 0, bl = 0;\n    if (a) {\n      const w = D.fg[c] * lv * (1 - e), q = (a - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    if (b) {\n      const w = D.tg[c] * lv * e, q = (b - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    display.setPixel(x, y, min(255, r), min(255, g), min(255, bl));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower."},{"name":"Bias","min":-1,"max":1,"about":"The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way."},{"name":"Checker","min":-1,"max":1,"about":"How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED."}],"start":[0,2,0,0.06],"measures":{"motion":0.2173,"detail":0.3498,"edges":0.9816,"complexity":1.6331,"coverage":0.888,"colour":0.6403,"drift":0.1071},"knobResponse":[0.459,0.1665,0.2603,0.1486]},{"slug":"bait-ball","title":"Bait Ball","family":"ocean","round":23,"note":"옆에서 본 푸른 바다를 정어리 떼 공이 거의 다 채워요. 떼가 한꺼번에 몸을 틀면 은빛 물결이 공을 가로지르고, 등을 돌리면 짙은 남색으로 가라앉아요. 상어와 돌고래가 뚫고 지나간 구멍은 뒤에서 다시 닫히고, 가넷이 수면에서 거품 꼬리를 끌며 내리꽂혀요.","idea":"Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.","buttons":"K1 tap sends a hunter charging through the ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-bait-ball","type":"code","name":"bait-ball","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower."},{"name":"Predators","min":1,"max":5,"about":"How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them."},{"name":"Sun","min":0,"max":1,"about":"The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel."}],"start":[0,2,1,0.06],"measures":{"motion":0.8889,"detail":0.2376,"edges":0.5511,"complexity":1.4993,"coverage":0.9518,"colour":0.2846,"drift":0.3724},"knobResponse":[0.0519,0.3412,0.1352,0.1016]},{"slug":"ballistic-deposition","title":"Ballistic Deposition","family":"particle","round":30,"note":"입자가 64열 위로 곧게 떨어져 처음 닿는 자리에 붙어요. 처마 밑이 빈 퇴적물이 내려앉은 차례대로 띠를 이루고, 띠의 경계가 거칠어지는 앞면의 지난 모습이에요.","idea":"Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.","buttons":"K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.","code":"// ===== Patternflow pattern =====\n// Title:   Ballistic Deposition\n// Family:  particle\n// Idea:    Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: ballistic deposition (Marjorie J. Vold, 1959), whose surface is in the Kardar-Parisi-Zhang class (1986), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24\n//\n// Knob 1: Hue. Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green.\n// Knob 2: Speed. Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second.\n// Knob 3: Slip. The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000.\n// Knob 4: Layers. How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows.\n// Buttons: K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.\n\n// On 64 columns that wrap round, the front's width grows from a flat start\n// as t^(1/3), the KPZ exponent, and stops near 4.5 rows once its bumps are\n// as wide as the panel; the bands keep each stage of it as it scrolls by.\nconst W = 64, H = 128, R = 512, RM = R - 1;\nconst { min, max, floor, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst MAXF = 1024, MAXL = 256;\nconst FALL = 70; // rows a second\nconst FRONT = 0.8; // the camera holds the mean front this far up the panel\nconst LID = 0x7fffffff;\n\nexport function setup(params) {\n  params.s = {\n    fresh: true,\n    h: new Int32Array(W), // rows taken in each column, counting the particles still falling to it\n    vh: new Int32Array(W), // the same for the particles that have landed\n    cell: new Int32Array(W * R), // particle number, 0 for a hole\n    row: new Int32Array(R).fill(-1), // the world row each ring row holds\n    n: 0, base: 0, acc: 0, t: 0,\n    fx: new Int16Array(MAXF), fy: new Float32Array(MAXF), fto: new Int32Array(MAXF), fn: new Int32Array(MAXF), nf: 0,\n    lx: new Int16Array(MAXL), ly: new Int32Array(MAXL), lt: new Float32Array(MAXL).fill(-9), li: 0,\n    hue: 0, layers: 6,\n    pal: new Float32Array(256 * 3), palKey: new Int32Array(256).fill(-1),\n  };\n}\n\n// Vold's rule. A particle falling down column x stops on its own column's top\n// or, if it sticks sideways, beside the top particle of a taller neighbour:\n// h_x \u003c- max(h_{x-1}, h_x + 1, h_{x+1}). The columns wrap round.\nfunction deposit(P, x, stick) {\n  const h = P.h;\n  let y = h[x];\n  if (stick) y = max(y, h[(x + 63) & 63] - 1, h[(x + 1) & 63] - 1);\n  h[x] = y + 1;\n  return y;\n}\n\n// The deposit lives in a ring of 512 rows; a row is wiped when a particle\n// first reaches it, and rows far below the camera are written over.\nfunction place(P, x, y, n) {\n  const rr = y & RM;\n  if (P.row[rr] !== y) {\n    if (P.row[rr] > y) return;\n    P.row[rr] = y;\n    P.cell.fill(0, rr * W, rr * W + W);\n  }\n  P.cell[rr * W + x] = n;\n  if (y >= P.vh[x]) P.vh[x] = y + 1;\n}\n\nconst meanH = (h) => {\n  let s = 0;\n  for (let x = 0; x \u003c W; x++) s += h[x];\n  return s / W;\n};\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 6], d = cl(dt || 0, 0, 0.1);\n  const speed = cl(k[1], 0.2, 3), slip = cl(k[2], 0, 1);\n  P.hue = k[0];\n  P.layers = cl(k[3], 6, 24);\n  P.t += d;\n  // The opening deposit is laid on a flat floor before the first frame,\n  // until its mean front stands at the camera's mark.\n  if (P.fresh) {\n    P.fresh = false;\n    while (meanH(P.h) \u003c FRONT * H)\n      for (let i = 0; i \u003c W; i++) {\n        const x = floor(random() * W);\n        place(P, x, deposit(P, x, random() >= slip), ++P.n);\n      }\n  }\n  // K1: a flat lid one row above the highest particle. The front starts\n  // flat again and roughens on top of it.\n  if (input.btnPressed && input.btnPressed[0]) {\n    let y = 0;\n    for (let x = 0; x \u003c W; x++) y = max(y, P.h[x]);\n    for (let x = 0; x \u003c W; x++) place(P, x, y, LID), (P.h[x] = y + 1);\n    for (let i = 0; i \u003c P.nf; i++) P.fto[i] = deposit(P, P.fx[i], random() >= slip);\n  }\n  // Each particle's landing is settled the moment it leaves the top, against\n  // the deposit as all earlier particles left it, so the order is Vold's\n  // one at a time; the fall to that place is only shown.\n  P.acc += 4 * Math.pow(75, (speed - 0.2) / 2.8) * d;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    if (P.nf >= MAXF) continue;\n    const i = P.nf++, x = floor(random() * W);\n    P.fx[i] = x;\n    P.fto[i] = deposit(P, x, random() >= slip);\n    P.fn[i] = ++P.n;\n    P.fy[i] = max(P.base + H + random() * FALL * d, P.fto[i] + 1);\n  }\n  for (let i = 0; i \u003c P.nf; i++) {\n    P.fy[i] -= FALL * d;\n    if (P.fy[i] > P.fto[i]) continue;\n    place(P, P.fx[i], P.fto[i], P.fn[i]);\n    const j = P.li++ & (MAXL - 1);\n    (P.lx[j] = P.fx[i]), (P.ly[j] = P.fto[i]), (P.lt[j] = P.t);\n    P.nf--;\n    (P.fx[i] = P.fx[P.nf]), (P.fy[i] = P.fy[P.nf]), (P.fto[i] = P.fto[P.nf]), (P.fn[i] = P.fn[P.nf]);\n    i--;\n  }\n  const goal = meanH(P.vh) - FRONT * H;\n  if (goal > P.base) P.base += (goal - P.base) * min(1, d * 4);\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const B = round(P.base), per = W * P.layers, pal = P.pal, key = P.palKey;\n  // A band is Layers times 64 particles, counted in landing order. Bands\n  // alternate between two colours 0.3 of the wheel apart, and the pair\n  // wanders 0.125 up the wheel and back over ten bands.\n  const colour = (n) => {\n    const b = floor((n - 1) / per), q = b & 255;\n    if (key[q] !== b) {\n      key[q] = b;\n      const odd = b & 1, u = b % 10, tri = u \u003c 5 ? u : 10 - u;\n      hsv(P.hue + 0.48 + 0.025 * tri + (odd ? 0.3 : 0), odd ? 0.8 : 0.9, odd ? 0.85 : 1, pal, q * 3);\n    }\n    return q * 3;\n  };\n  for (let sy = 0; sy \u003c H; sy++) {\n    // Older deposit dims with depth, to 55% at the bottom edge.\n    const wy = B + H - 1 - sy, rr = wy & RM, ok = wy >= 0 && P.row[rr] === wy, fade = 1 - 0.45 * cl((sy - 30) / 98, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const n = ok ? P.cell[rr * W + x] : 0;\n      if (!n) display.setPixel(x, sy, 0, 0, 0);\n      else if (n === LID) display.setPixel(x, sy, 200, 200, 200);\n      else {\n        const q = colour(n);\n        // The top particle of each column, the front itself, burns pale.\n        if (wy === P.vh[x] - 1) display.setPixel(x, sy, pal[q] * 0.35 + 166, pal[q + 1] * 0.35 + 166, pal[q + 2] * 0.35 + 166);\n        else display.setPixel(x, sy, pal[q] * fade, pal[q + 1] * fade, pal[q + 2] * fade);\n      }\n    }\n  }\n  // Fresh landings flash white and settle into their band's colour.\n  for (let j = 0; j \u003c MAXL; j++) {\n    const age = P.t - P.lt[j];\n    if (age > 0.4) continue;\n    const y = P.ly[j], sy = B + H - 1 - y, rr = y & RM, n = P.row[rr] === y ? P.cell[rr * W + P.lx[j]] : 0;\n    if (sy \u003c 0 || sy >= H || !n || n === LID) continue;\n    const q = colour(n), a = age / 0.4, w = 255 * (1 - a);\n    display.setPixel(P.lx[j], sy, w + pal[q] * a, w + pal[q + 1] * a, w + pal[q + 2] * a);\n  }\n  // Particles in flight: a white head and a short grey tail.\n  for (let i = 0; i \u003c P.nf; i++) {\n    const sy = B + H - 1 - floor(P.fy[i]);\n    for (let t = 0; t \u003c 3; t++) {\n      const y = sy - t, v = t ? 150 - 45 * t : 255;\n      if (y >= 0 && y \u003c H) display.setPixel(P.fx[i], y, v, v, v);\n    }\n  }\n}\n","layer":{"id":"layer-ballistic-deposition","type":"code","name":"ballistic-deposition","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ballistic Deposition\n// Family:  particle\n// Idea:    Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: ballistic deposition (Marjorie J. Vold, 1959), whose surface is in the Kardar-Parisi-Zhang class (1986), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24\n//\n// Knob 1: Hue. Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green.\n// Knob 2: Speed. Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second.\n// Knob 3: Slip. The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000.\n// Knob 4: Layers. How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows.\n// Buttons: K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.\n\n// On 64 columns that wrap round, the front's width grows from a flat start\n// as t^(1/3), the KPZ exponent, and stops near 4.5 rows once its bumps are\n// as wide as the panel; the bands keep each stage of it as it scrolls by.\nconst W = 64, H = 128, R = 512, RM = R - 1;\nconst { min, max, floor, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst MAXF = 1024, MAXL = 256;\nconst FALL = 70; // rows a second\nconst FRONT = 0.8; // the camera holds the mean front this far up the panel\nconst LID = 0x7fffffff;\n\nexport function setup(params) {\n  params.s = {\n    fresh: true,\n    h: new Int32Array(W), // rows taken in each column, counting the particles still falling to it\n    vh: new Int32Array(W), // the same for the particles that have landed\n    cell: new Int32Array(W * R), // particle number, 0 for a hole\n    row: new Int32Array(R).fill(-1), // the world row each ring row holds\n    n: 0, base: 0, acc: 0, t: 0,\n    fx: new Int16Array(MAXF), fy: new Float32Array(MAXF), fto: new Int32Array(MAXF), fn: new Int32Array(MAXF), nf: 0,\n    lx: new Int16Array(MAXL), ly: new Int32Array(MAXL), lt: new Float32Array(MAXL).fill(-9), li: 0,\n    hue: 0, layers: 6,\n    pal: new Float32Array(256 * 3), palKey: new Int32Array(256).fill(-1),\n  };\n}\n\n// Vold's rule. A particle falling down column x stops on its own column's top\n// or, if it sticks sideways, beside the top particle of a taller neighbour:\n// h_x \u003c- max(h_{x-1}, h_x + 1, h_{x+1}). The columns wrap round.\nfunction deposit(P, x, stick) {\n  const h = P.h;\n  let y = h[x];\n  if (stick) y = max(y, h[(x + 63) & 63] - 1, h[(x + 1) & 63] - 1);\n  h[x] = y + 1;\n  return y;\n}\n\n// The deposit lives in a ring of 512 rows; a row is wiped when a particle\n// first reaches it, and rows far below the camera are written over.\nfunction place(P, x, y, n) {\n  const rr = y & RM;\n  if (P.row[rr] !== y) {\n    if (P.row[rr] > y) return;\n    P.row[rr] = y;\n    P.cell.fill(0, rr * W, rr * W + W);\n  }\n  P.cell[rr * W + x] = n;\n  if (y >= P.vh[x]) P.vh[x] = y + 1;\n}\n\nconst meanH = (h) => {\n  let s = 0;\n  for (let x = 0; x \u003c W; x++) s += h[x];\n  return s / W;\n};\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 6], d = cl(dt || 0, 0, 0.1);\n  const speed = cl(k[1], 0.2, 3), slip = cl(k[2], 0, 1);\n  P.hue = k[0];\n  P.layers = cl(k[3], 6, 24);\n  P.t += d;\n  // The opening deposit is laid on a flat floor before the first frame,\n  // until its mean front stands at the camera's mark.\n  if (P.fresh) {\n    P.fresh = false;\n    while (meanH(P.h) \u003c FRONT * H)\n      for (let i = 0; i \u003c W; i++) {\n        const x = floor(random() * W);\n        place(P, x, deposit(P, x, random() >= slip), ++P.n);\n      }\n  }\n  // K1: a flat lid one row above the highest particle. The front starts\n  // flat again and roughens on top of it.\n  if (input.btnPressed && input.btnPressed[0]) {\n    let y = 0;\n    for (let x = 0; x \u003c W; x++) y = max(y, P.h[x]);\n    for (let x = 0; x \u003c W; x++) place(P, x, y, LID), (P.h[x] = y + 1);\n    for (let i = 0; i \u003c P.nf; i++) P.fto[i] = deposit(P, P.fx[i], random() >= slip);\n  }\n  // Each particle's landing is settled the moment it leaves the top, against\n  // the deposit as all earlier particles left it, so the order is Vold's\n  // one at a time; the fall to that place is only shown.\n  P.acc += 4 * Math.pow(75, (speed - 0.2) / 2.8) * d;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    if (P.nf >= MAXF) continue;\n    const i = P.nf++, x = floor(random() * W);\n    P.fx[i] = x;\n    P.fto[i] = deposit(P, x, random() >= slip);\n    P.fn[i] = ++P.n;\n    P.fy[i] = max(P.base + H + random() * FALL * d, P.fto[i] + 1);\n  }\n  for (let i = 0; i \u003c P.nf; i++) {\n    P.fy[i] -= FALL * d;\n    if (P.fy[i] > P.fto[i]) continue;\n    place(P, P.fx[i], P.fto[i], P.fn[i]);\n    const j = P.li++ & (MAXL - 1);\n    (P.lx[j] = P.fx[i]), (P.ly[j] = P.fto[i]), (P.lt[j] = P.t);\n    P.nf--;\n    (P.fx[i] = P.fx[P.nf]), (P.fy[i] = P.fy[P.nf]), (P.fto[i] = P.fto[P.nf]), (P.fn[i] = P.fn[P.nf]);\n    i--;\n  }\n  const goal = meanH(P.vh) - FRONT * H;\n  if (goal > P.base) P.base += (goal - P.base) * min(1, d * 4);\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const B = round(P.base), per = W * P.layers, pal = P.pal, key = P.palKey;\n  // A band is Layers times 64 particles, counted in landing order. Bands\n  // alternate between two colours 0.3 of the wheel apart, and the pair\n  // wanders 0.125 up the wheel and back over ten bands.\n  const colour = (n) => {\n    const b = floor((n - 1) / per), q = b & 255;\n    if (key[q] !== b) {\n      key[q] = b;\n      const odd = b & 1, u = b % 10, tri = u \u003c 5 ? u : 10 - u;\n      hsv(P.hue + 0.48 + 0.025 * tri + (odd ? 0.3 : 0), odd ? 0.8 : 0.9, odd ? 0.85 : 1, pal, q * 3);\n    }\n    return q * 3;\n  };\n  for (let sy = 0; sy \u003c H; sy++) {\n    // Older deposit dims with depth, to 55% at the bottom edge.\n    const wy = B + H - 1 - sy, rr = wy & RM, ok = wy >= 0 && P.row[rr] === wy, fade = 1 - 0.45 * cl((sy - 30) / 98, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const n = ok ? P.cell[rr * W + x] : 0;\n      if (!n) display.setPixel(x, sy, 0, 0, 0);\n      else if (n === LID) display.setPixel(x, sy, 200, 200, 200);\n      else {\n        const q = colour(n);\n        // The top particle of each column, the front itself, burns pale.\n        if (wy === P.vh[x] - 1) display.setPixel(x, sy, pal[q] * 0.35 + 166, pal[q + 1] * 0.35 + 166, pal[q + 2] * 0.35 + 166);\n        else display.setPixel(x, sy, pal[q] * fade, pal[q + 1] * fade, pal[q + 2] * fade);\n      }\n    }\n  }\n  // Fresh landings flash white and settle into their band's colour.\n  for (let j = 0; j \u003c MAXL; j++) {\n    const age = P.t - P.lt[j];\n    if (age > 0.4) continue;\n    const y = P.ly[j], sy = B + H - 1 - y, rr = y & RM, n = P.row[rr] === y ? P.cell[rr * W + P.lx[j]] : 0;\n    if (sy \u003c 0 || sy >= H || !n || n === LID) continue;\n    const q = colour(n), a = age / 0.4, w = 255 * (1 - a);\n    display.setPixel(P.lx[j], sy, w + pal[q] * a, w + pal[q + 1] * a, w + pal[q + 2] * a);\n  }\n  // Particles in flight: a white head and a short grey tail.\n  for (let i = 0; i \u003c P.nf; i++) {\n    const sy = B + H - 1 - floor(P.fy[i]);\n    for (let t = 0; t \u003c 3; t++) {\n      const y = sy - t, v = t ? 150 - 45 * t : 255;\n      if (y >= 0 && y \u003c H) display.setPixel(P.fx[i], y, v, v, v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green."},{"name":"Speed","min":0.2,"max":3,"about":"Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second."},{"name":"Slip","min":0,"max":1,"about":"The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000."},{"name":"Layers","min":6,"max":24,"about":"How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows."}],"start":[0,2,0,6],"measures":{"motion":0.6499,"detail":0.2394,"edges":0.9298,"complexity":0.4248,"coverage":0.4131,"colour":0.4145,"drift":0.0572},"knobResponse":[0.2133,0.2835,0.2999,0.1051]},{"slug":"balloon-box","title":"Balloon Box","family":"weather","round":11,"note":"새벽 골짜기에 바람이 둘이에요. 낮은 바람은 열기구를 왼쪽으로, 높은 바람은 오른쪽으로 데려가고, 조종사가 버너로 높이를 바꾸면 풍선이 멈췄다 되돌아가요. 옆으로 나간 자리에는 새 풍선이 바람을 타고 들어오거나 들판에서 떠올라요. K1 을 누르면 모든 버너가 한꺼번에 켜져요.","idea":"Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.","buttons":"K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.","code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-balloon-box","type":"code","name":"balloon-box","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons."},{"name":"Wind","min":0.2,"max":3,"about":"How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds."},{"name":"Balloons","min":8,"max":16,"about":"How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back."},{"name":"Sunrise","min":0,"max":1,"about":"The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue."}],"start":[0,2,8,0.06],"measures":{"motion":0.167,"detail":0.0307,"edges":0.6336,"complexity":0.5511,"coverage":0.8946,"colour":0.5662,"drift":0.2806},"knobResponse":[0.306,0.2762,0.2316,0.2865]},{"slug":"bath-fizz","title":"Bath Fizz","family":"cosmetic","round":35,"note":"패널 아래에서 녹는 배스 파우더가 깊은 물속으로 안료 구름을 올려 보내요. 분홍에서 색상환을 따라 벌려 놓은 안료 세 가지가 버섯 머리로 말리며 128줄을 채우고 맞닿은 가장자리에서 섞여요. 가는 거품 줄기가 그 사이를 뚫고 올라가며 물을 끌어올려요. K3 은 거품을 1초에 60개에서 360개로 늘려 첫 구름이 위 20줄에 닿는 때를 7.6초에서 2.4초로 당기고, K1 을 누르면 세 색이 바닥에서 한꺼번에 터져요.","idea":"Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.","buttons":"K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.","code":"// ===== Patternflow pattern =====\n// Title:   Bath Fizz\n// Family:  cosmetic\n// Idea:    Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after underwater film of a fizzing bath powder clouding the water\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1\n//\n// Knob 1: Hue. Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo.\n// Knob 2: Speed. How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower.\n// Knob 3: Fizz. How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s.\n// Knob 4: Mix. How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac.\n// Buttons: K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.\n\nconst W = 64, H = 128, N = W * H;\n// The water is worked out on a grid of 2x2 LEDs; the pigment is carried at\n// full resolution through it, so the clouds keep a fine edge.\nconst GW = 32, GH = 64, GN = GW * GH;\nconst MAXB = 1200;\n// Deep indigo, given at full brightness like the water colour it replaces.\nconst INDIGO = [0.34, 0.3, 1];\nconst { min, max, floor, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    U: F(GN), V: F(GN), U0: F(GN), V0: F(GN), P: F(GN), DV: F(GN), L: F(GN), L0: F(GN), CU: F(GN), FB: F(GN),\n    A: [F(N), F(N), F(N)], TA: F(N), PI0: new Int32Array(N), PF: F(2 * N), BB: F(N), BT: F(N), DD: F(N),\n    bx: F(MAXB), by: F(MAXB), bs: F(MAXB), bp: F(MAXB), nb: 0,\n    // Three places along the bottom where the powder fizzes, one per colour.\n    src: [0, 1, 2].map((c) => ({ c, ph: (2 * PI * c) / 3 + rnd(), w: [0.11, 0.07, 0.09][c], next: 0.2 + 0.5 * c, puff: 0, bacc: 0 })),\n    T: 0, RS: F(W), RC: F(W), PW: F(256), pe: 0, hue: 0, speed: 2, fizz: 0, mix: 0.06, started: false, col: F(20), key: NaN,\n  };\n}\n\n// Bilinear read of a grid field at grid coordinates.\nfunction samp(F, x, y) {\n  x = cl(x, 0, GW - 1.001);\n  y = cl(y, 0, GH - 1.001);\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, i = iy * GW + ix;\n  return (F[i] * (1 - fx) + F[i + 1] * fx) * (1 - fy) + (F[i + GW] * (1 - fx) + F[i + GW + 1] * fx) * fy;\n}\n\n// A soft round blob added to a full-resolution field.\nfunction blob(A, cx, cy, r, w) {\n  const x0 = max(0, floor(cx - 2 * r)), x1 = min(W - 1, floor(cx + 2 * r)), y0 = max(0, floor(cy - 2 * r)), y1 = min(H - 1, floor(cy + 2 * r));\n  const k = 1 / (r * r);\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy;\n      A[y * W + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction gblob(G, cx, cy, r, w) {\n  // The same on the water's grid, given in LEDs.\n  const gx = cx / 2, gy = cy / 2, gr = r / 2, k = 1 / (gr * gr);\n  for (let y = max(0, floor(gy - 2 * gr)); y \u003c= min(GH - 1, floor(gy + 2 * gr)); y++)\n    for (let x = max(0, floor(gx - 2 * gr)); x \u003c= min(GW - 1, floor(gx + 2 * gr)); x++) {\n      const dx = x + 0.5 - gx, dy = y + 0.5 - gy;\n      G[y * GW + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction bubbles(S, x, n, spread) {\n  for (let j = 0; j \u003c n && S.nb \u003c MAXB; j++) {\n    const i = S.nb++;\n    S.bx[i] = x + (rnd() + rnd() - 1) * spread;\n    S.by[i] = H + 1 + rnd() * 4;\n    S.bs[i] = rnd();\n    S.bp[i] = rnd() * 2 * PI;\n  }\n}\n\n// A burst from one place: pigment and lift at the bottom, and its bubbles.\nfunction puff(S, s, x, k) {\n  blob(S.A[s.c], x, H - 2, 5 + 2 * k, 5.4 * k);\n  gblob(S.L, x, H - 3, 6 + 2 * k, 2.2 * k);\n}\n\nfunction burst(S) {\n  for (const s of S.src) {\n    const x = 6 + rnd() * 52;\n    puff(S, s, x, 2.2);\n    bubbles(S, x, 70, 5);\n  }\n}\n\nfunction fluid(S, st) {\n  const U = S.U, V = S.V, U0 = S.U0, V0 = S.V0, L = S.L, L0 = S.L0, P = S.P, DV = S.DV, CU = S.CU, FB = S.FB, f = S.fizz;\n  // Forces: the lift the fizz leaves in the water, and the drag of each\n  // rising bubble on the water round it.\n  const buoy = 34 * (1 + 0.9 * f);\n  for (let i = 0; i \u003c GN; i++) {\n    V[i] -= st * (buoy * L[i] + 7 * FB[i]);\n    FB[i] = 0;\n  }\n  // Vorticity confinement keeps the small curls that roll a cloud's edge over.\n  for (let y = 1; y \u003c GH - 1; y++)\n    for (let x = 1; x \u003c GW - 1; x++) {\n      const i = y * GW + x;\n      CU[i] = 0.5 * (V[i + 1] - V[i - 1] - U[i + GW] + U[i - GW]);\n    }\n  const eps = 2.2;\n  for (let y = 2; y \u003c GH - 2; y++)\n    for (let x = 2; x \u003c GW - 2; x++) {\n      const i = y * GW + x;\n      const nx = 0.5 * (abs(CU[i + 1]) - abs(CU[i - 1])), ny = 0.5 * (abs(CU[i + GW]) - abs(CU[i - GW])), nl = sqrt(nx * nx + ny * ny) + 1e-5;\n      U[i] += st * eps * (ny / nl) * CU[i];\n      V[i] -= st * eps * (nx / nl) * CU[i];\n    }\n  // Carry the water along itself.\n  U0.set(U);\n  V0.set(V);\n  L0.set(L);\n  const fade = exp(-st / 2.4);\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const px = x - st * U0[i], py = y - st * V0[i];\n      U[i] = samp(U0, px, py) * 0.995;\n      V[i] = samp(V0, px, py) * 0.995;\n      L[i] = samp(L0, px, py) * fade;\n    }\n  // Walls all round: the sides of the bath, its floor below the panel and the\n  // surface above.\n  for (let y = 0; y \u003c GH; y++) {\n    U[y * GW] = U[y * GW + GW - 1] = 0;\n  }\n  for (let x = 0; x \u003c GW; x++) {\n    V[x] = V[(GH - 1) * GW + x] = 0;\n  }\n  // Make it incompressible: what rises in the middle comes down at the sides.\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const ur = x \u003c GW - 1 ? U[i + 1] : 0, ul = x > 0 ? U[i - 1] : 0, vd = y \u003c GH - 1 ? V[i + GW] : 0, vu = y > 0 ? V[i - GW] : 0;\n      DV[i] = 0.5 * (ur - ul + vd - vu);\n    }\n  for (let it = 0; it \u003c 24; it++)\n    for (let y = 0, i = 0; y \u003c GH; y++)\n      for (let x = 0; x \u003c GW; x++, i++) {\n        const p = P[i];\n        const s = (x > 0 ? P[i - 1] : p) + (x \u003c GW - 1 ? P[i + 1] : p) + (y > 0 ? P[i - GW] : p) + (y \u003c GH - 1 ? P[i + GW] : p);\n        P[i] = p + 1.6 * ((s - DV[i]) / 4 - p);\n      }\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const p = P[i];\n      U[i] -= 0.5 * ((x \u003c GW - 1 ? P[i + 1] : p) - (x > 0 ? P[i - 1] : p));\n      V[i] -= 0.5 * ((y \u003c GH - 1 ? P[i + GW] : p) - (y > 0 ? P[i - GW] : p));\n    }\n}\n\nfunction pigment(S, st) {\n  const U = S.U, V = S.V, TA = S.TA, mix = S.mix, PI0 = S.PI0, PF = S.PF;\n  // The pigment is carried by the water, read at each LED's own place so it\n  // stays half a cell finer than the water. The trace back is worked out once\n  // for all three pigments.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const gx = (x + 0.5) / 2 - 0.5, gy = (y + 0.5) / 2 - 0.5;\n      const px = cl(x - 2 * st * samp(U, gx, gy), 0, W - 1.001), py = cl(y - 2 * st * samp(V, gx, gy), 0, H - 1.001);\n      const ix = floor(px), iy = floor(py);\n      PI0[i] = iy * W + ix;\n      PF[2 * i] = px - ix;\n      PF[2 * i + 1] = py - iy;\n    }\n  // Then it spreads a little, more the higher Mix, and slowly thins into the bath.\n  const kap = cl(st * (0.6 + 5 * mix), 0, 0.24), fade = exp(-st / 5);\n  for (const A of S.A) {\n    TA.set(A);\n    for (let i = 0; i \u003c N; i++) {\n      const j = PI0[i], fx = PF[2 * i], fy = PF[2 * i + 1];\n      A[i] = (TA[j] * (1 - fx) + TA[j + 1] * fx) * (1 - fy) + (TA[j + W] * (1 - fx) + TA[j + W + 1] * fx) * fy;\n    }\n    TA.set(A);\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const c = TA[i];\n        const l = (x > 0 ? TA[i - 1] : c) + (x \u003c W - 1 ? TA[i + 1] : c) + (y > 0 ? TA[i - W] : c) + (y \u003c H - 1 ? TA[i + W] : c) - 4 * c;\n        A[i] = (c + kap * l) * fade;\n      }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const f = S.fizz;\n  for (const s of S.src) {\n    // Each place wanders along the bottom as the powder tumbles, each at its\n    // own pace, so now and then two pass and their clouds go up together.\n    s.ph += st * s.w;\n    const x = 32 + 22 * sin(s.ph) + 4 * sin(2.7 * s.ph + s.c);\n    s.next -= st;\n    if (s.next \u003c= 0) {\n      s.puff = 0.8 + 0.6 * rnd();\n      s.next = (1.6 - 0.8 * f) * (0.6 + 0.8 * rnd());\n    }\n    s.puff *= exp(-st / 0.3);\n    const k = st * (0.5 + 0.4 * f + 4 * s.puff);\n    puff(S, s, x, k);\n    s.bacc += st * (30 + 110 * f) * (0.5 + s.puff);\n    const nb = floor(s.bacc);\n    s.bacc -= nb;\n    bubbles(S, x, nb, 1.5 + 1.5 * s.puff);\n  }\n  // Bubbles: small ones rise slower and zig-zag more, all ride the water\n  // sideways, and each pulls the water up with it.\n  const U = S.U, V = S.V, FB = S.FB;\n  let k = 0;\n  for (let i = 0; i \u003c S.nb; i++) {\n    let x = S.bx[i], y = S.by[i];\n    const s = S.bs[i], gx = x / 2 - 0.5, gy = y / 2 - 0.5;\n    const ph = (S.bp[i] += st * (7 + 5 * (1 - s)));\n    const rise = (24 + 20 * s) * (0.85 + 0.5 * f);\n    x += st * (1.2 * samp(U, gx, gy) + (2 + 3 * (1 - s)) * cos(ph));\n    y += st * (2 * samp(V, gx, gy) * 0.6 - rise);\n    if (y \u003c -1 || x \u003c -1 || x > W + 1) continue;\n    const ci = cl(floor(y / 2), 0, GH - 1) * GW + cl(floor(x / 2), 0, GW - 1);\n    FB[ci] += 0.5 + 0.5 * s;\n    S.bx[k] = x;\n    S.by[k] = y;\n    S.bs[k] = s;\n    S.bp[k] = S.bp[i];\n    k++;\n  }\n  S.nb = k;\n  fluid(S, st);\n  pigment(S, st);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.fizz = cl(kv[2] || 0, 0, 1);\n  S.mix = cl(kv[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the water already clouding: six and a half seconds of fizz,\n    // in coarse steps.\n    for (let i = 0; i \u003c 80; i++) step(S, 1 / 12);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, mix = S.mix, A0 = S.A[0], A1 = S.A[1], A2 = S.A[2], T = S.T;\n  // Palette: three pigments spread round the wheel from the hue, and deep\n  // water. A pigment from orange to lime is paled and its cloud thickens\n  // faster, because those hues at half brightness read brown and olive.\n  const h0 = S.hue + 0.92, key = h0 + 3 * mix;\n  if (S.key !== key) {\n    const hs = [h0, h0 - 0.17, h0 - 0.42];\n    for (let c = 0; c \u003c 3; c++) {\n      const hf = hs[c] - floor(hs[c]), wm = sm((hf - 0.02) / 0.05) * (1 - sm((hf - 0.24) / 0.06));\n      hsv(hs[c], 0.95 - 0.45 * wm, 1, col, c * 3);\n      col[9 + c] = 4.5 * (1 + wm);\n      col[16 + c] = wm;\n    }\n    // Deep water opposite the pigments; where that lands on orange or gold it\n    // would be brown, so there the water turns deep indigo.\n    const hw = h0 - 0.32, hf = hw - floor(hw), wm = sm((hf + 0.02) / 0.06) * (1 - sm((hf - 0.27) / 0.08));\n    hsv(hw, 0.8, 1, col, 12);\n    for (let c = 0; c \u003c 3; c++) col[12 + c] += (INDIGO[c] - col[12 + c]) * wm;\n    S.key = key;\n  }\n  // Bubbles: splatted, then a 3x3 blur so each is a soft bump two or three\n  // LEDs across rather than a hard dot.\n  const BB = S.BB, BT = S.BT;\n  BB.fill(0);\n  for (let i = 0; i \u003c S.nb; i++) {\n    const x = S.bx[i] - 0.5, y = S.by[i] - 0.5, ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, w = 0.7 + 0.5 * S.bs[i];\n    if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) continue;\n    const p = iy * W + ix;\n    BB[p] += w * (1 - fx) * (1 - fy);\n    BB[p + 1] += w * fx * (1 - fy);\n    BB[p + W] += w * (1 - fx) * fy;\n    BB[p + W + 1] += w * fx * fy;\n  }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BT[i] = (x > 0 ? BB[i - 1] : 0) + 2 * BB[i] + (x \u003c W - 1 ? BB[i + 1] : 0);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BB[i] = ((y > 0 ? BT[i - W] : 0) + 2 * BT[i] + (y \u003c H - 1 ? BT[i + W] : 0)) / 16;\n  // How sharply the strongest pigment takes a LED: at Mix 0 it takes it up to\n  // a narrow seam, at 1 the pigments add.\n  const pe = 1 + 7 * (1 - mix) * (1 - mix), PW = S.PW;\n  if (S.pe !== pe) {\n    for (let j = 0; j \u003c 256; j++) PW[j] = pow((j + 0.5) / 255, pe);\n    PW[255] = 1;\n    S.pe = pe;\n  }\n  const DD = S.DD;\n  for (let i = 0; i \u003c N; i++) DD[i] = A0[i] + A1[i] + A2[i];\n  // Slow shafts of light slant down through the water from the surface:\n  // sin(a(x) + 0.08 y), split so each row and column is worked out once.\n  const RS = S.RS, RC = S.RC;\n  for (let x = 0; x \u003c W; x++) {\n    const a = 0.16 * x + 0.5 * T + 1.2 * sin(0.05 * x - 0.3 * T);\n    RS[x] = sin(a);\n    RC[x] = cos(a);\n  }\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    // The water: light from the surface, falling off towards the floor.\n    const wl = 0.1 + 0.08 * exp(-y / 40), wr = 0.25 * wl * exp(-y / 70), sy = sin(0.08 * y), cy = cos(0.08 * y);\n    for (let x = 0; x \u003c W; x++, i++) {\n      const a0 = A0[i], a1 = A1[i], a2 = A2[i], D = DD[i];\n      const lw = wl + wr * (1 + RS[x] * cy + RC[x] * sy);\n      let r = col[12] * lw, g = col[13] * lw, b = col[14] * lw;\n      if (D > 0.002) {\n        // Each pigment's weight is its share of the strongest, to the power pe.\n        const am = a0 > a1 ? (a0 > a2 ? a0 : a2) : a1 > a2 ? a1 : a2, iv = 1 / am;\n        const q0 = a0 * iv, q1 = a1 * iv, q2 = a2 * iv;\n        const w0 = PW[(q0 * 255) | 0], w1 = PW[(q1 * 255) | 0], w2 = PW[(q2 * 255) | 0];\n        const ws = w0 + w1 + w2;\n        let cr = (w0 * col[0] + w1 * col[3] + w2 * col[6]) / ws, cg = (w0 * col[1] + w1 * col[4] + w2 * col[7]) / ws, cb = (w0 * col[2] + w1 * col[5] + w2 * col[8]) / ws;\n        // Opacity goes with the cube of the pigment, e^3 / (e^3 + 1): half at\n        // e = 1, nine tenths at e = 2 and nearly clear below a half, so old\n        // colour thins away and fresh clouds stand out on the water.\n        const e = a0 * col[9] + a1 * col[10] + a2 * col[11], e3 = e * e * e, op = e3 / (e3 + 1);\n        // A thinning cloud of orange, gold or lime would dim through brown and\n        // olive, so as it thins it pales towards a grey haze instead.\n        const wp = ((w0 * col[16] + w1 * col[17] + w2 * col[18]) / ws) * (1 - op * op);\n        cr += (0.8 - cr) * wp;\n        cg += (0.8 - cg) * wp;\n        cb += (0.8 - cb) * wp;\n        // Light from above catches the top of each billow and the cloud is\n        // brighter where it is thick.\n        const up = y > 1 ? D - DD[i - 2 * W] : 0;\n        const lv = cl(0.76 + 0.25 * (1 - exp(-2 * D)) + 0.35 * up, 0.5, 1);\n        r += (cr * lv - r) * op;\n        g += (cg * lv - g) * op;\n        b += (cb * lv - b) * op;\n      }\n      const bb = min(0.55, BB[i]);\n      r += bb * (1 - 0.4 * r);\n      g += bb * (1 - 0.4 * g);\n      b += bb * (1 - 0.4 * b);\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","layer":{"id":"layer-bath-fizz","type":"code","name":"bath-fizz","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bath Fizz\n// Family:  cosmetic\n// Idea:    Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after underwater film of a fizzing bath powder clouding the water\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1\n//\n// Knob 1: Hue. Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo.\n// Knob 2: Speed. How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower.\n// Knob 3: Fizz. How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s.\n// Knob 4: Mix. How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac.\n// Buttons: K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.\n\nconst W = 64, H = 128, N = W * H;\n// The water is worked out on a grid of 2x2 LEDs; the pigment is carried at\n// full resolution through it, so the clouds keep a fine edge.\nconst GW = 32, GH = 64, GN = GW * GH;\nconst MAXB = 1200;\n// Deep indigo, given at full brightness like the water colour it replaces.\nconst INDIGO = [0.34, 0.3, 1];\nconst { min, max, floor, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    U: F(GN), V: F(GN), U0: F(GN), V0: F(GN), P: F(GN), DV: F(GN), L: F(GN), L0: F(GN), CU: F(GN), FB: F(GN),\n    A: [F(N), F(N), F(N)], TA: F(N), PI0: new Int32Array(N), PF: F(2 * N), BB: F(N), BT: F(N), DD: F(N),\n    bx: F(MAXB), by: F(MAXB), bs: F(MAXB), bp: F(MAXB), nb: 0,\n    // Three places along the bottom where the powder fizzes, one per colour.\n    src: [0, 1, 2].map((c) => ({ c, ph: (2 * PI * c) / 3 + rnd(), w: [0.11, 0.07, 0.09][c], next: 0.2 + 0.5 * c, puff: 0, bacc: 0 })),\n    T: 0, RS: F(W), RC: F(W), PW: F(256), pe: 0, hue: 0, speed: 2, fizz: 0, mix: 0.06, started: false, col: F(20), key: NaN,\n  };\n}\n\n// Bilinear read of a grid field at grid coordinates.\nfunction samp(F, x, y) {\n  x = cl(x, 0, GW - 1.001);\n  y = cl(y, 0, GH - 1.001);\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, i = iy * GW + ix;\n  return (F[i] * (1 - fx) + F[i + 1] * fx) * (1 - fy) + (F[i + GW] * (1 - fx) + F[i + GW + 1] * fx) * fy;\n}\n\n// A soft round blob added to a full-resolution field.\nfunction blob(A, cx, cy, r, w) {\n  const x0 = max(0, floor(cx - 2 * r)), x1 = min(W - 1, floor(cx + 2 * r)), y0 = max(0, floor(cy - 2 * r)), y1 = min(H - 1, floor(cy + 2 * r));\n  const k = 1 / (r * r);\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy;\n      A[y * W + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction gblob(G, cx, cy, r, w) {\n  // The same on the water's grid, given in LEDs.\n  const gx = cx / 2, gy = cy / 2, gr = r / 2, k = 1 / (gr * gr);\n  for (let y = max(0, floor(gy - 2 * gr)); y \u003c= min(GH - 1, floor(gy + 2 * gr)); y++)\n    for (let x = max(0, floor(gx - 2 * gr)); x \u003c= min(GW - 1, floor(gx + 2 * gr)); x++) {\n      const dx = x + 0.5 - gx, dy = y + 0.5 - gy;\n      G[y * GW + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction bubbles(S, x, n, spread) {\n  for (let j = 0; j \u003c n && S.nb \u003c MAXB; j++) {\n    const i = S.nb++;\n    S.bx[i] = x + (rnd() + rnd() - 1) * spread;\n    S.by[i] = H + 1 + rnd() * 4;\n    S.bs[i] = rnd();\n    S.bp[i] = rnd() * 2 * PI;\n  }\n}\n\n// A burst from one place: pigment and lift at the bottom, and its bubbles.\nfunction puff(S, s, x, k) {\n  blob(S.A[s.c], x, H - 2, 5 + 2 * k, 5.4 * k);\n  gblob(S.L, x, H - 3, 6 + 2 * k, 2.2 * k);\n}\n\nfunction burst(S) {\n  for (const s of S.src) {\n    const x = 6 + rnd() * 52;\n    puff(S, s, x, 2.2);\n    bubbles(S, x, 70, 5);\n  }\n}\n\nfunction fluid(S, st) {\n  const U = S.U, V = S.V, U0 = S.U0, V0 = S.V0, L = S.L, L0 = S.L0, P = S.P, DV = S.DV, CU = S.CU, FB = S.FB, f = S.fizz;\n  // Forces: the lift the fizz leaves in the water, and the drag of each\n  // rising bubble on the water round it.\n  const buoy = 34 * (1 + 0.9 * f);\n  for (let i = 0; i \u003c GN; i++) {\n    V[i] -= st * (buoy * L[i] + 7 * FB[i]);\n    FB[i] = 0;\n  }\n  // Vorticity confinement keeps the small curls that roll a cloud's edge over.\n  for (let y = 1; y \u003c GH - 1; y++)\n    for (let x = 1; x \u003c GW - 1; x++) {\n      const i = y * GW + x;\n      CU[i] = 0.5 * (V[i + 1] - V[i - 1] - U[i + GW] + U[i - GW]);\n    }\n  const eps = 2.2;\n  for (let y = 2; y \u003c GH - 2; y++)\n    for (let x = 2; x \u003c GW - 2; x++) {\n      const i = y * GW + x;\n      const nx = 0.5 * (abs(CU[i + 1]) - abs(CU[i - 1])), ny = 0.5 * (abs(CU[i + GW]) - abs(CU[i - GW])), nl = sqrt(nx * nx + ny * ny) + 1e-5;\n      U[i] += st * eps * (ny / nl) * CU[i];\n      V[i] -= st * eps * (nx / nl) * CU[i];\n    }\n  // Carry the water along itself.\n  U0.set(U);\n  V0.set(V);\n  L0.set(L);\n  const fade = exp(-st / 2.4);\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const px = x - st * U0[i], py = y - st * V0[i];\n      U[i] = samp(U0, px, py) * 0.995;\n      V[i] = samp(V0, px, py) * 0.995;\n      L[i] = samp(L0, px, py) * fade;\n    }\n  // Walls all round: the sides of the bath, its floor below the panel and the\n  // surface above.\n  for (let y = 0; y \u003c GH; y++) {\n    U[y * GW] = U[y * GW + GW - 1] = 0;\n  }\n  for (let x = 0; x \u003c GW; x++) {\n    V[x] = V[(GH - 1) * GW + x] = 0;\n  }\n  // Make it incompressible: what rises in the middle comes down at the sides.\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const ur = x \u003c GW - 1 ? U[i + 1] : 0, ul = x > 0 ? U[i - 1] : 0, vd = y \u003c GH - 1 ? V[i + GW] : 0, vu = y > 0 ? V[i - GW] : 0;\n      DV[i] = 0.5 * (ur - ul + vd - vu);\n    }\n  for (let it = 0; it \u003c 24; it++)\n    for (let y = 0, i = 0; y \u003c GH; y++)\n      for (let x = 0; x \u003c GW; x++, i++) {\n        const p = P[i];\n        const s = (x > 0 ? P[i - 1] : p) + (x \u003c GW - 1 ? P[i + 1] : p) + (y > 0 ? P[i - GW] : p) + (y \u003c GH - 1 ? P[i + GW] : p);\n        P[i] = p + 1.6 * ((s - DV[i]) / 4 - p);\n      }\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const p = P[i];\n      U[i] -= 0.5 * ((x \u003c GW - 1 ? P[i + 1] : p) - (x > 0 ? P[i - 1] : p));\n      V[i] -= 0.5 * ((y \u003c GH - 1 ? P[i + GW] : p) - (y > 0 ? P[i - GW] : p));\n    }\n}\n\nfunction pigment(S, st) {\n  const U = S.U, V = S.V, TA = S.TA, mix = S.mix, PI0 = S.PI0, PF = S.PF;\n  // The pigment is carried by the water, read at each LED's own place so it\n  // stays half a cell finer than the water. The trace back is worked out once\n  // for all three pigments.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const gx = (x + 0.5) / 2 - 0.5, gy = (y + 0.5) / 2 - 0.5;\n      const px = cl(x - 2 * st * samp(U, gx, gy), 0, W - 1.001), py = cl(y - 2 * st * samp(V, gx, gy), 0, H - 1.001);\n      const ix = floor(px), iy = floor(py);\n      PI0[i] = iy * W + ix;\n      PF[2 * i] = px - ix;\n      PF[2 * i + 1] = py - iy;\n    }\n  // Then it spreads a little, more the higher Mix, and slowly thins into the bath.\n  const kap = cl(st * (0.6 + 5 * mix), 0, 0.24), fade = exp(-st / 5);\n  for (const A of S.A) {\n    TA.set(A);\n    for (let i = 0; i \u003c N; i++) {\n      const j = PI0[i], fx = PF[2 * i], fy = PF[2 * i + 1];\n      A[i] = (TA[j] * (1 - fx) + TA[j + 1] * fx) * (1 - fy) + (TA[j + W] * (1 - fx) + TA[j + W + 1] * fx) * fy;\n    }\n    TA.set(A);\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const c = TA[i];\n        const l = (x > 0 ? TA[i - 1] : c) + (x \u003c W - 1 ? TA[i + 1] : c) + (y > 0 ? TA[i - W] : c) + (y \u003c H - 1 ? TA[i + W] : c) - 4 * c;\n        A[i] = (c + kap * l) * fade;\n      }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const f = S.fizz;\n  for (const s of S.src) {\n    // Each place wanders along the bottom as the powder tumbles, each at its\n    // own pace, so now and then two pass and their clouds go up together.\n    s.ph += st * s.w;\n    const x = 32 + 22 * sin(s.ph) + 4 * sin(2.7 * s.ph + s.c);\n    s.next -= st;\n    if (s.next \u003c= 0) {\n      s.puff = 0.8 + 0.6 * rnd();\n      s.next = (1.6 - 0.8 * f) * (0.6 + 0.8 * rnd());\n    }\n    s.puff *= exp(-st / 0.3);\n    const k = st * (0.5 + 0.4 * f + 4 * s.puff);\n    puff(S, s, x, k);\n    s.bacc += st * (30 + 110 * f) * (0.5 + s.puff);\n    const nb = floor(s.bacc);\n    s.bacc -= nb;\n    bubbles(S, x, nb, 1.5 + 1.5 * s.puff);\n  }\n  // Bubbles: small ones rise slower and zig-zag more, all ride the water\n  // sideways, and each pulls the water up with it.\n  const U = S.U, V = S.V, FB = S.FB;\n  let k = 0;\n  for (let i = 0; i \u003c S.nb; i++) {\n    let x = S.bx[i], y = S.by[i];\n    const s = S.bs[i], gx = x / 2 - 0.5, gy = y / 2 - 0.5;\n    const ph = (S.bp[i] += st * (7 + 5 * (1 - s)));\n    const rise = (24 + 20 * s) * (0.85 + 0.5 * f);\n    x += st * (1.2 * samp(U, gx, gy) + (2 + 3 * (1 - s)) * cos(ph));\n    y += st * (2 * samp(V, gx, gy) * 0.6 - rise);\n    if (y \u003c -1 || x \u003c -1 || x > W + 1) continue;\n    const ci = cl(floor(y / 2), 0, GH - 1) * GW + cl(floor(x / 2), 0, GW - 1);\n    FB[ci] += 0.5 + 0.5 * s;\n    S.bx[k] = x;\n    S.by[k] = y;\n    S.bs[k] = s;\n    S.bp[k] = S.bp[i];\n    k++;\n  }\n  S.nb = k;\n  fluid(S, st);\n  pigment(S, st);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.fizz = cl(kv[2] || 0, 0, 1);\n  S.mix = cl(kv[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the water already clouding: six and a half seconds of fizz,\n    // in coarse steps.\n    for (let i = 0; i \u003c 80; i++) step(S, 1 / 12);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, mix = S.mix, A0 = S.A[0], A1 = S.A[1], A2 = S.A[2], T = S.T;\n  // Palette: three pigments spread round the wheel from the hue, and deep\n  // water. A pigment from orange to lime is paled and its cloud thickens\n  // faster, because those hues at half brightness read brown and olive.\n  const h0 = S.hue + 0.92, key = h0 + 3 * mix;\n  if (S.key !== key) {\n    const hs = [h0, h0 - 0.17, h0 - 0.42];\n    for (let c = 0; c \u003c 3; c++) {\n      const hf = hs[c] - floor(hs[c]), wm = sm((hf - 0.02) / 0.05) * (1 - sm((hf - 0.24) / 0.06));\n      hsv(hs[c], 0.95 - 0.45 * wm, 1, col, c * 3);\n      col[9 + c] = 4.5 * (1 + wm);\n      col[16 + c] = wm;\n    }\n    // Deep water opposite the pigments; where that lands on orange or gold it\n    // would be brown, so there the water turns deep indigo.\n    const hw = h0 - 0.32, hf = hw - floor(hw), wm = sm((hf + 0.02) / 0.06) * (1 - sm((hf - 0.27) / 0.08));\n    hsv(hw, 0.8, 1, col, 12);\n    for (let c = 0; c \u003c 3; c++) col[12 + c] += (INDIGO[c] - col[12 + c]) * wm;\n    S.key = key;\n  }\n  // Bubbles: splatted, then a 3x3 blur so each is a soft bump two or three\n  // LEDs across rather than a hard dot.\n  const BB = S.BB, BT = S.BT;\n  BB.fill(0);\n  for (let i = 0; i \u003c S.nb; i++) {\n    const x = S.bx[i] - 0.5, y = S.by[i] - 0.5, ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, w = 0.7 + 0.5 * S.bs[i];\n    if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) continue;\n    const p = iy * W + ix;\n    BB[p] += w * (1 - fx) * (1 - fy);\n    BB[p + 1] += w * fx * (1 - fy);\n    BB[p + W] += w * (1 - fx) * fy;\n    BB[p + W + 1] += w * fx * fy;\n  }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BT[i] = (x > 0 ? BB[i - 1] : 0) + 2 * BB[i] + (x \u003c W - 1 ? BB[i + 1] : 0);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BB[i] = ((y > 0 ? BT[i - W] : 0) + 2 * BT[i] + (y \u003c H - 1 ? BT[i + W] : 0)) / 16;\n  // How sharply the strongest pigment takes a LED: at Mix 0 it takes it up to\n  // a narrow seam, at 1 the pigments add.\n  const pe = 1 + 7 * (1 - mix) * (1 - mix), PW = S.PW;\n  if (S.pe !== pe) {\n    for (let j = 0; j \u003c 256; j++) PW[j] = pow((j + 0.5) / 255, pe);\n    PW[255] = 1;\n    S.pe = pe;\n  }\n  const DD = S.DD;\n  for (let i = 0; i \u003c N; i++) DD[i] = A0[i] + A1[i] + A2[i];\n  // Slow shafts of light slant down through the water from the surface:\n  // sin(a(x) + 0.08 y), split so each row and column is worked out once.\n  const RS = S.RS, RC = S.RC;\n  for (let x = 0; x \u003c W; x++) {\n    const a = 0.16 * x + 0.5 * T + 1.2 * sin(0.05 * x - 0.3 * T);\n    RS[x] = sin(a);\n    RC[x] = cos(a);\n  }\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    // The water: light from the surface, falling off towards the floor.\n    const wl = 0.1 + 0.08 * exp(-y / 40), wr = 0.25 * wl * exp(-y / 70), sy = sin(0.08 * y), cy = cos(0.08 * y);\n    for (let x = 0; x \u003c W; x++, i++) {\n      const a0 = A0[i], a1 = A1[i], a2 = A2[i], D = DD[i];\n      const lw = wl + wr * (1 + RS[x] * cy + RC[x] * sy);\n      let r = col[12] * lw, g = col[13] * lw, b = col[14] * lw;\n      if (D > 0.002) {\n        // Each pigment's weight is its share of the strongest, to the power pe.\n        const am = a0 > a1 ? (a0 > a2 ? a0 : a2) : a1 > a2 ? a1 : a2, iv = 1 / am;\n        const q0 = a0 * iv, q1 = a1 * iv, q2 = a2 * iv;\n        const w0 = PW[(q0 * 255) | 0], w1 = PW[(q1 * 255) | 0], w2 = PW[(q2 * 255) | 0];\n        const ws = w0 + w1 + w2;\n        let cr = (w0 * col[0] + w1 * col[3] + w2 * col[6]) / ws, cg = (w0 * col[1] + w1 * col[4] + w2 * col[7]) / ws, cb = (w0 * col[2] + w1 * col[5] + w2 * col[8]) / ws;\n        // Opacity goes with the cube of the pigment, e^3 / (e^3 + 1): half at\n        // e = 1, nine tenths at e = 2 and nearly clear below a half, so old\n        // colour thins away and fresh clouds stand out on the water.\n        const e = a0 * col[9] + a1 * col[10] + a2 * col[11], e3 = e * e * e, op = e3 / (e3 + 1);\n        // A thinning cloud of orange, gold or lime would dim through brown and\n        // olive, so as it thins it pales towards a grey haze instead.\n        const wp = ((w0 * col[16] + w1 * col[17] + w2 * col[18]) / ws) * (1 - op * op);\n        cr += (0.8 - cr) * wp;\n        cg += (0.8 - cg) * wp;\n        cb += (0.8 - cb) * wp;\n        // Light from above catches the top of each billow and the cloud is\n        // brighter where it is thick.\n        const up = y > 1 ? D - DD[i - 2 * W] : 0;\n        const lv = cl(0.76 + 0.25 * (1 - exp(-2 * D)) + 0.35 * up, 0.5, 1);\n        r += (cr * lv - r) * op;\n        g += (cg * lv - g) * op;\n        b += (cb * lv - b) * op;\n      }\n      const bb = min(0.55, BB[i]);\n      r += bb * (1 - 0.4 * r);\n      g += bb * (1 - 0.4 * g);\n      b += bb * (1 - 0.4 * b);\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower."},{"name":"Fizz","min":0,"max":1,"about":"How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s."},{"name":"Mix","min":0,"max":1,"about":"How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac."}],"start":[0,2,0,0.06],"measures":{"motion":0.7842,"detail":0.0381,"edges":0.0956,"complexity":2.4963,"coverage":1,"colour":0.5925,"drift":0.2882},"knobResponse":[0.3666,0.2615,0.3734,0.0989]},{"slug":"bauhaus","title":"Bauhaus","family":"geometry","round":1,"note":"바우하우스 포스터처럼 납작한 원반과 막대가 2×4 칸에 놓이고, 한 칸씩 천천히 다른 모양이나 색으로 바뀌어요.","idea":"A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.","buttons":"K1 tap deals the whole sheet again, a diagonal of cells at a time.","code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-bauhaus","type":"code","name":"bauhaus","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the red, yellow and blue together around the wheel; the cream stays cream."},{"name":"Pace","min":0.25,"max":6,"about":"How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once."},{"name":"Grid","min":4,"max":12,"about":"Cells down the long side, from four big squares to twelve small ones."},{"name":"Line","min":0,"max":1,"about":"How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing."}],"start":[0,2,4,0.06],"measures":{"motion":0.0436,"detail":0.04,"edges":0.8787,"complexity":0.0601,"coverage":0.5555,"colour":0.5847,"drift":0.0591},"knobResponse":[0.3486,0.141,0.3458,0.2172]},{"slug":"bernoulli-convolutions","title":"Bernoulli Convolutions","family":"fractal","round":38,"note":"128줄 하나하나가 λ 하나에 대한 ±1 ±λ ±λ² … 의 분포예요. 위의 칸토어 먼지에서 아래의 매끈한 종까지 항이 하나 더해질 때마다 모든 점이 둘로 쪼개지고, λ 가 피소 수의 역수인 열네 줄에서는 합이 같은 점에 거듭 내려앉아 흰 금빛으로 타요. K3 은 동전을 한쪽으로 기울여 종을 오른쪽 벽으로 밀고, K1 을 누르면 항을 다 걷었다가 첫 항부터 다시 쌓아요.","idea":"Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.","buttons":"K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.","code":"// ===== Patternflow pattern =====\n// Title:   Bernoulli Convolutions\n// Family:  fractal\n// Idea:    Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bernoulli convolutions (Børge Jessen and Aurel Wintner, 1935; Paul Erdős, 1939; Boris Solomyak, 1995), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1\n//\n// Knob 1: Hue. Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive.\n// Knob 2: Speed. At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed.\n// Knob 3: Bias. The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95.\n// Knob 4: Zoom. The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart.\n// Buttons: K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.\n\nconst W = 64, H = 128, M = 512, F = M / W;\n// Terms: the cycle falls to NLO and climbs to NHI; stages 0..NHI are kept.\nconst NLO = 6, NHI = 13;\n// Seconds at Speed 2: hold at NHI, per term falling, rest at NLO, per term\n// climbing. The first hold, the picture the pattern opens on, lasts OPEN\n// seconds at any speed.\nconst HOLD = 2.5, TF = 0.33, REST = 0.6, TC = 1.0, OPEN = 1.2;\n// Opening hue: violet and azure, not red.\nconst H0 = 0.62;\n// Pisot numbers in (1, 2), each the largest root of its polynomial (highest\n// power first). Their reciprocals are the lambdas where Erdos (1939) showed\n// the measure singular: the sums land on each other again and again.\nconst PISOT = [\n  [1, 0, -1, -1], // 1.3247, the plastic number\n  [1, -1, 0, 0, -1], // 1.3803\n  [1, -1, -1, 1, 0, -1], // 1.4433\n  [1, -1, 0, -1], // 1.4656\n  [1, -1, -1, 0, 1, 0, -1], // 1.5016\n  [1, 0, -1, -1, -1, -1], // 1.5342\n  [1, -1, -1, 0, 0, 1, 0, -1], // 1.5452\n  [1, -1, 0, -1, 0, -1], // 1.5701\n  [1, -1, -1], // 1.6180, the golden ratio\n  [1, -1, -1, 0, 0, -1], // 1.7049\n  [1, -2, 1, -1], // 1.7549\n  [1, -1, -1, -1], // 1.8393, the tribonacci constant\n  [1, -2, 0, 1, -1], // 1.8668\n  [1, -1, -1, -1, -1], // 1.9276\n];\nconst { floor, min, abs, exp, log2, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = [v, q, p, p, t, v][i];\n  out[o + 1] = [t, v, v, q, p, p][i];\n  out[o + 2] = [p, p, t, v, v, q][i];\n}\n\n// Newton from 2 down to the largest real root.\nfunction rootOf(c) {\n  let x = 2;\n  for (let it = 0; it \u003c 60; it++) {\n    let f = 0, d = 0;\n    for (let k = 0; k \u003c c.length; k++) {\n      d = d * x + f;\n      f = f * x + c[k];\n    }\n    x -= f / d;\n  }\n  return x;\n}\nconst LAMP = PISOT.map((c) => 1 / rootOf(c));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0.5, zoom: 0.06, built: false, bBias: -1, bZoom: -1, since: 0,\n    lam: new Float64Array(H), pis: new Int8Array(H).fill(-1),\n    h: new Float64Array(M), h2: new Float64Array(M + 1),\n    // Per stage, row and column: the mass of the row in the column, and\n    // the log2 of how many sign choices share a point there on average.\n    I: new Float32Array((NHI + 1) * H * W), G: new Float32Array((NHI + 1) * H * W),\n    phase: 0, pt: 0, lo: NLO, x: NHI, open: OPEN,\n    lut: new Float32Array(256 * 3), row: new Float32Array(W), gold: [1, 0.86, 0.56],\n  };\n}\n\n// The lambdas of the rows, the nearest row to each Pisot reciprocal moved\n// onto it exactly. Every other row's lambda is a binary fraction, and for\n// those no two sign choices ever give the same sum: the highest power that\n// differs leaves an odd numerator no lower power can cancel.\nfunction rows(S) {\n  const lo = 0.3 + 0.26 * S.zoom, hi = 0.9 - 0.12 * S.zoom, dl = (hi - lo) / (H - 1);\n  S.lo0 = lo;\n  S.hi0 = hi;\n  S.pis.fill(-1);\n  for (let r = 0; r \u003c H; r++) S.lam[r] = lo + dl * r;\n  LAMP.forEach((l, k) => {\n    const r = round((l - lo) / dl);\n    if (r >= 0 && r \u003c H && abs(S.lam[r] - l) \u003c= dl / 2 + 1e-12) {\n      S.lam[r] = l;\n      S.pis[r] = k;\n    }\n  });\n}\n\n// Every stage of every row. The fine histogram (M bins over the row's\n// range, u = x (1 - lambda) in [-1, 1]) starts as a point at 0 and is\n// pushed through nu -> p S+ nu + (1 - p) S- nu, S+- u = lambda u +- (1 - lambda),\n// once per term. On a Pisot row the sums are also kept exactly, as sorted\n// points with their mass, and points closer than 1e-9 are one point.\nfunction build(S) {\n  rows(S);\n  const p = S.bias, q = 1 - p, { h, h2, I, G } = S, c0 = M / 2 - 0.5;\n  G.fill(0);\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], sh = (1 - lam) * (M / 2);\n    h.fill(0);\n    h[M / 2 - 1] = 0.5;\n    h[M / 2] = 0.5;\n    for (let n = 0; n \u003c= NHI; n++) {\n      const o = (n * H + r) * W;\n      for (let c = 0; c \u003c W; c++) {\n        let m = 0;\n        for (let i = c * F; i \u003c c * F + F; i++) m += h[i];\n        I[o + c] = m;\n      }\n      if (n === NHI) break;\n      h2.fill(0);\n      for (let i = 0; i \u003c M; i++) {\n        const v = h[i];\n        if (v === 0) continue;\n        const base = c0 + lam * (i - c0);\n        for (let sgn = 0; sgn \u003c 2; sgn++) {\n          const f = base + (sgn ? sh : -sh), w = v * (sgn ? p : q), j = floor(f), fr = f - j;\n          if (j >= 0 && j \u003c M) h2[j] += w * (1 - fr);\n          if (j + 1 >= 0 && j + 1 \u003c M) h2[j + 1] += w * fr;\n        }\n      }\n      for (let i = 0; i \u003c M; i++) h[i] = h2[i];\n    }\n    if (S.pis[r] >= 0) exact(S, r, p);\n  }\n  S.built = true;\n  S.bBias = S.bias;\n  S.bZoom = S.zoom;\n  S.since = 0;\n}\n\n// The exact sums on a Pisot row, term by term in the order they shrink:\n// each point x splits into x + lambda^n (mass p) and x - lambda^n (mass 1 - p).\n// m is a point's mass; w the sum of its sign choices' squared masses, so\n// m^2 / w is how many choices it holds, weighted, and 1 when it holds one.\nfunction exact(S, r, p) {\n  const lam = S.lam[r], q = 1 - p, G = S.G, k1 = 1 - lam;\n  let X = new Float64Array([0]), Mm = new Float64Array([1]), Q = new Float64Array([1]);\n  const sm2 = new Float64Array(W), sq = new Float64Array(W);\n  for (let n = 1; n \u003c= NHI; n++) {\n    const a = lam ** (n - 1), L = X.length;\n    const X2 = new Float64Array(2 * L), M2 = new Float64Array(2 * L), Q2 = new Float64Array(2 * L);\n    let i = 0, j = 0, k = -1;\n    while (i \u003c L || j \u003c L) {\n      // Merge the two shifted copies, both already sorted.\n      let x, m, w;\n      if (j >= L || (i \u003c L && X[i] - a \u003c= X[j] + a)) {\n        x = X[i] - a;\n        m = Mm[i] * q;\n        w = Q[i] * q * q;\n        i++;\n      } else {\n        x = X[j] + a;\n        m = Mm[j] * p;\n        w = Q[j] * p * p;\n        j++;\n      }\n      if (k >= 0 && x - X2[k] \u003c 1e-9) {\n        M2[k] += m;\n        Q2[k] += w;\n      } else {\n        k++;\n        X2[k] = x;\n        M2[k] = m;\n        Q2[k] = w;\n      }\n    }\n    X = X2.subarray(0, k + 1);\n    Mm = M2.subarray(0, k + 1);\n    Q = Q2.subarray(0, k + 1);\n    sm2.fill(0);\n    sq.fill(0);\n    for (let t = 0; t \u003c= k; t++) {\n      const c = cl(floor((X[t] * k1 + 1) * (W / 2)), 0, W - 1);\n      sm2[c] += Mm[t] * Mm[t];\n      sq[c] += Q[t];\n    }\n    const o = (n * H + r) * W;\n    for (let c = 0; c \u003c W; c++) G[o + c] = sq[c] > 0 ? log2(sm2[c] / sq[c]) : 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], 0.5, 0.95);\n  S.zoom = cl(k[3], 0, 1);\n  S.since += d;\n  // Rebuilding takes a few milliseconds: at most ten times a second while a knob turns.\n  if (!S.built || ((abs(S.bias - S.bBias) > 1e-4 || abs(S.zoom - S.bZoom) > 1e-4) && S.since > 0.1)) build(S);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lo = 0;\n    if (S.phase !== 1) {\n      S.phase = 1;\n      S.pt = (NHI - S.x) * TF;\n    }\n  }\n  // The term count x runs hold, fall, rest, climb.\n  if (S.open > 0) {\n    // The opening hold, in plain seconds; it ends straight into the fall.\n    S.open -= d;\n    if (S.open \u003c= 0) S.pt = HOLD;\n  } else S.pt += (d * S.speed) / 2;\n  const span = NHI - S.lo;\n  if (S.phase === 0 && S.pt >= HOLD) {\n    S.phase = 1;\n    S.pt -= HOLD;\n  }\n  if (S.phase === 1 && S.pt >= span * TF) {\n    S.phase = 2;\n    S.pt -= span * TF;\n  }\n  if (S.phase === 2 && S.pt >= REST) {\n    S.phase = 3;\n    S.pt -= REST;\n  }\n  if (S.phase === 3 && S.pt >= span * TC) {\n    S.phase = 0;\n    S.pt -= span * TC;\n    S.lo = NLO;\n  }\n  if (S.phase === 0) S.x = NHI;\n  else if (S.phase === 1) {\n    const u = S.pt / TF, j = floor(u);\n    S.x = NHI - j - sm(0, 1, u - j);\n  } else if (S.phase === 2) S.x = S.lo;\n  else {\n    const u = S.pt / TC, j = floor(u);\n    S.x = S.lo + j + sm(0, 0.65, u - j);\n  }\n  S.x = cl(S.x, 0, NHI);\n}\n\n// Density levels: violet where a row is thin, azure where it is thick. A\n// hue that comes round to orange or yellow is paled and lifted, so thin\n// parts read peach or butter and not brown or olive.\nfunction palette(S) {\n  const lut = S.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const L = i / 255, h = S.hue + H0 + 0.16 * (1 - L) - 0.06, hh = h - floor(h);\n    const warm = cl(1 - abs(hh - 0.13) / 0.13, 0, 1);\n    hsv(h, 0.9 - 0.45 * L - 0.3 * warm, min(1, 0.92 * L ** (0.7 - 0.2 * warm) * (1 + 0.35 * warm)), lut, i * 3);\n  }\n  // The seams: white-gold, nearly white where the rows themselves are warm.\n  const hh = S.hue + H0 - 0.06 - floor(S.hue + H0 - 0.06), warm = cl(1 - abs(hh - 0.13) / 0.2, 0, 1);\n  S.gold[0] = 1;\n  S.gold[1] = 0.86 + 0.12 * warm;\n  S.gold[2] = 0.56 + 0.36 * warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.built) return;\n  palette(S);\n  const { I, G, lut, row } = S, p = S.bias, q = 1 - p;\n  const n = min(NHI - 1, floor(S.x)), s = S.x - n;\n  // The new term splits every point by +- (1 - lambda) lambda^n of the range,\n  // and in the last third of the split the exact next stage takes over.\n  const wNext = sm(0.55, 1, s);\n  const gold = S.gold;\n  // The entropy bound p^p (1 - p)^(1 - p), as a row.\n  const lstar = p ** p * q ** q, rstar = round(((lstar - S.lo0) / (S.hi0 - S.lo0)) * (H - 1));\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], dsh = s * (1 - lam) * lam ** n * (W / 2);\n    const o0 = (n * H + r) * W, o1 = o0 + H * W;\n    for (let c = 0; c \u003c W; c++) {\n      // p of the row moved right by dsh, 1 - p moved left.\n      const a = c - dsh, b = c + dsh, ia = floor(a), ib = floor(b), fa = a - ia, fb = b - ib;\n      const va = (ia >= 0 && ia \u003c W ? I[o0 + ia] * (1 - fa) : 0) + (ia + 1 >= 0 && ia + 1 \u003c W ? I[o0 + ia + 1] * fa : 0);\n      const vb = (ib >= 0 && ib \u003c W ? I[o0 + ib] * (1 - fb) : 0) + (ib + 1 >= 0 && ib + 1 \u003c W ? I[o0 + ib + 1] * fb : 0);\n      row[c] = (p * va + q * vb) * (1 - wNext) + I[o1 + c] * wNext;\n    }\n    const seam = S.pis[r] >= 0;\n    for (let c = 0; c \u003c W; c++) {\n      // 64 times the mass is 1 where the row is flat; 1 - e^(-rho / 1.2)\n      // keeps thin rows readable and the dust and the bells from burning out.\n      const L = 1 - exp((-W * row[c]) / 1.2), li = round(L * 255) * 3;\n      let R = lut[li], Gc = lut[li + 1], B = lut[li + 2];\n      if (seam) {\n        const g = G[o0 + c] * (1 - s) + G[o1 + c] * s, k = sm(0.2, 5.5, g) * (0.35 + 0.65 * sm(0, 0.5, L));\n        R += (gold[0] - R) * k;\n        Gc += (gold[1] - Gc) * k;\n        B += (gold[2] - B) * k;\n      }\n      if (r === rstar && (c \u003c 2 || c > W - 3)) R = Gc = B = 0.85;\n      display.setPixel(c, r, round(255 * min(1, R)), round(255 * min(1, Gc)), round(255 * min(1, B)));\n    }\n  }\n}\n","layer":{"id":"layer-bernoulli-convolutions","type":"code","name":"bernoulli-convolutions","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bernoulli Convolutions\n// Family:  fractal\n// Idea:    Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bernoulli convolutions (Børge Jessen and Aurel Wintner, 1935; Paul Erdős, 1939; Boris Solomyak, 1995), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1\n//\n// Knob 1: Hue. Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive.\n// Knob 2: Speed. At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed.\n// Knob 3: Bias. The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95.\n// Knob 4: Zoom. The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart.\n// Buttons: K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.\n\nconst W = 64, H = 128, M = 512, F = M / W;\n// Terms: the cycle falls to NLO and climbs to NHI; stages 0..NHI are kept.\nconst NLO = 6, NHI = 13;\n// Seconds at Speed 2: hold at NHI, per term falling, rest at NLO, per term\n// climbing. The first hold, the picture the pattern opens on, lasts OPEN\n// seconds at any speed.\nconst HOLD = 2.5, TF = 0.33, REST = 0.6, TC = 1.0, OPEN = 1.2;\n// Opening hue: violet and azure, not red.\nconst H0 = 0.62;\n// Pisot numbers in (1, 2), each the largest root of its polynomial (highest\n// power first). Their reciprocals are the lambdas where Erdos (1939) showed\n// the measure singular: the sums land on each other again and again.\nconst PISOT = [\n  [1, 0, -1, -1], // 1.3247, the plastic number\n  [1, -1, 0, 0, -1], // 1.3803\n  [1, -1, -1, 1, 0, -1], // 1.4433\n  [1, -1, 0, -1], // 1.4656\n  [1, -1, -1, 0, 1, 0, -1], // 1.5016\n  [1, 0, -1, -1, -1, -1], // 1.5342\n  [1, -1, -1, 0, 0, 1, 0, -1], // 1.5452\n  [1, -1, 0, -1, 0, -1], // 1.5701\n  [1, -1, -1], // 1.6180, the golden ratio\n  [1, -1, -1, 0, 0, -1], // 1.7049\n  [1, -2, 1, -1], // 1.7549\n  [1, -1, -1, -1], // 1.8393, the tribonacci constant\n  [1, -2, 0, 1, -1], // 1.8668\n  [1, -1, -1, -1, -1], // 1.9276\n];\nconst { floor, min, abs, exp, log2, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = [v, q, p, p, t, v][i];\n  out[o + 1] = [t, v, v, q, p, p][i];\n  out[o + 2] = [p, p, t, v, v, q][i];\n}\n\n// Newton from 2 down to the largest real root.\nfunction rootOf(c) {\n  let x = 2;\n  for (let it = 0; it \u003c 60; it++) {\n    let f = 0, d = 0;\n    for (let k = 0; k \u003c c.length; k++) {\n      d = d * x + f;\n      f = f * x + c[k];\n    }\n    x -= f / d;\n  }\n  return x;\n}\nconst LAMP = PISOT.map((c) => 1 / rootOf(c));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0.5, zoom: 0.06, built: false, bBias: -1, bZoom: -1, since: 0,\n    lam: new Float64Array(H), pis: new Int8Array(H).fill(-1),\n    h: new Float64Array(M), h2: new Float64Array(M + 1),\n    // Per stage, row and column: the mass of the row in the column, and\n    // the log2 of how many sign choices share a point there on average.\n    I: new Float32Array((NHI + 1) * H * W), G: new Float32Array((NHI + 1) * H * W),\n    phase: 0, pt: 0, lo: NLO, x: NHI, open: OPEN,\n    lut: new Float32Array(256 * 3), row: new Float32Array(W), gold: [1, 0.86, 0.56],\n  };\n}\n\n// The lambdas of the rows, the nearest row to each Pisot reciprocal moved\n// onto it exactly. Every other row's lambda is a binary fraction, and for\n// those no two sign choices ever give the same sum: the highest power that\n// differs leaves an odd numerator no lower power can cancel.\nfunction rows(S) {\n  const lo = 0.3 + 0.26 * S.zoom, hi = 0.9 - 0.12 * S.zoom, dl = (hi - lo) / (H - 1);\n  S.lo0 = lo;\n  S.hi0 = hi;\n  S.pis.fill(-1);\n  for (let r = 0; r \u003c H; r++) S.lam[r] = lo + dl * r;\n  LAMP.forEach((l, k) => {\n    const r = round((l - lo) / dl);\n    if (r >= 0 && r \u003c H && abs(S.lam[r] - l) \u003c= dl / 2 + 1e-12) {\n      S.lam[r] = l;\n      S.pis[r] = k;\n    }\n  });\n}\n\n// Every stage of every row. The fine histogram (M bins over the row's\n// range, u = x (1 - lambda) in [-1, 1]) starts as a point at 0 and is\n// pushed through nu -> p S+ nu + (1 - p) S- nu, S+- u = lambda u +- (1 - lambda),\n// once per term. On a Pisot row the sums are also kept exactly, as sorted\n// points with their mass, and points closer than 1e-9 are one point.\nfunction build(S) {\n  rows(S);\n  const p = S.bias, q = 1 - p, { h, h2, I, G } = S, c0 = M / 2 - 0.5;\n  G.fill(0);\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], sh = (1 - lam) * (M / 2);\n    h.fill(0);\n    h[M / 2 - 1] = 0.5;\n    h[M / 2] = 0.5;\n    for (let n = 0; n \u003c= NHI; n++) {\n      const o = (n * H + r) * W;\n      for (let c = 0; c \u003c W; c++) {\n        let m = 0;\n        for (let i = c * F; i \u003c c * F + F; i++) m += h[i];\n        I[o + c] = m;\n      }\n      if (n === NHI) break;\n      h2.fill(0);\n      for (let i = 0; i \u003c M; i++) {\n        const v = h[i];\n        if (v === 0) continue;\n        const base = c0 + lam * (i - c0);\n        for (let sgn = 0; sgn \u003c 2; sgn++) {\n          const f = base + (sgn ? sh : -sh), w = v * (sgn ? p : q), j = floor(f), fr = f - j;\n          if (j >= 0 && j \u003c M) h2[j] += w * (1 - fr);\n          if (j + 1 >= 0 && j + 1 \u003c M) h2[j + 1] += w * fr;\n        }\n      }\n      for (let i = 0; i \u003c M; i++) h[i] = h2[i];\n    }\n    if (S.pis[r] >= 0) exact(S, r, p);\n  }\n  S.built = true;\n  S.bBias = S.bias;\n  S.bZoom = S.zoom;\n  S.since = 0;\n}\n\n// The exact sums on a Pisot row, term by term in the order they shrink:\n// each point x splits into x + lambda^n (mass p) and x - lambda^n (mass 1 - p).\n// m is a point's mass; w the sum of its sign choices' squared masses, so\n// m^2 / w is how many choices it holds, weighted, and 1 when it holds one.\nfunction exact(S, r, p) {\n  const lam = S.lam[r], q = 1 - p, G = S.G, k1 = 1 - lam;\n  let X = new Float64Array([0]), Mm = new Float64Array([1]), Q = new Float64Array([1]);\n  const sm2 = new Float64Array(W), sq = new Float64Array(W);\n  for (let n = 1; n \u003c= NHI; n++) {\n    const a = lam ** (n - 1), L = X.length;\n    const X2 = new Float64Array(2 * L), M2 = new Float64Array(2 * L), Q2 = new Float64Array(2 * L);\n    let i = 0, j = 0, k = -1;\n    while (i \u003c L || j \u003c L) {\n      // Merge the two shifted copies, both already sorted.\n      let x, m, w;\n      if (j >= L || (i \u003c L && X[i] - a \u003c= X[j] + a)) {\n        x = X[i] - a;\n        m = Mm[i] * q;\n        w = Q[i] * q * q;\n        i++;\n      } else {\n        x = X[j] + a;\n        m = Mm[j] * p;\n        w = Q[j] * p * p;\n        j++;\n      }\n      if (k >= 0 && x - X2[k] \u003c 1e-9) {\n        M2[k] += m;\n        Q2[k] += w;\n      } else {\n        k++;\n        X2[k] = x;\n        M2[k] = m;\n        Q2[k] = w;\n      }\n    }\n    X = X2.subarray(0, k + 1);\n    Mm = M2.subarray(0, k + 1);\n    Q = Q2.subarray(0, k + 1);\n    sm2.fill(0);\n    sq.fill(0);\n    for (let t = 0; t \u003c= k; t++) {\n      const c = cl(floor((X[t] * k1 + 1) * (W / 2)), 0, W - 1);\n      sm2[c] += Mm[t] * Mm[t];\n      sq[c] += Q[t];\n    }\n    const o = (n * H + r) * W;\n    for (let c = 0; c \u003c W; c++) G[o + c] = sq[c] > 0 ? log2(sm2[c] / sq[c]) : 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], 0.5, 0.95);\n  S.zoom = cl(k[3], 0, 1);\n  S.since += d;\n  // Rebuilding takes a few milliseconds: at most ten times a second while a knob turns.\n  if (!S.built || ((abs(S.bias - S.bBias) > 1e-4 || abs(S.zoom - S.bZoom) > 1e-4) && S.since > 0.1)) build(S);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lo = 0;\n    if (S.phase !== 1) {\n      S.phase = 1;\n      S.pt = (NHI - S.x) * TF;\n    }\n  }\n  // The term count x runs hold, fall, rest, climb.\n  if (S.open > 0) {\n    // The opening hold, in plain seconds; it ends straight into the fall.\n    S.open -= d;\n    if (S.open \u003c= 0) S.pt = HOLD;\n  } else S.pt += (d * S.speed) / 2;\n  const span = NHI - S.lo;\n  if (S.phase === 0 && S.pt >= HOLD) {\n    S.phase = 1;\n    S.pt -= HOLD;\n  }\n  if (S.phase === 1 && S.pt >= span * TF) {\n    S.phase = 2;\n    S.pt -= span * TF;\n  }\n  if (S.phase === 2 && S.pt >= REST) {\n    S.phase = 3;\n    S.pt -= REST;\n  }\n  if (S.phase === 3 && S.pt >= span * TC) {\n    S.phase = 0;\n    S.pt -= span * TC;\n    S.lo = NLO;\n  }\n  if (S.phase === 0) S.x = NHI;\n  else if (S.phase === 1) {\n    const u = S.pt / TF, j = floor(u);\n    S.x = NHI - j - sm(0, 1, u - j);\n  } else if (S.phase === 2) S.x = S.lo;\n  else {\n    const u = S.pt / TC, j = floor(u);\n    S.x = S.lo + j + sm(0, 0.65, u - j);\n  }\n  S.x = cl(S.x, 0, NHI);\n}\n\n// Density levels: violet where a row is thin, azure where it is thick. A\n// hue that comes round to orange or yellow is paled and lifted, so thin\n// parts read peach or butter and not brown or olive.\nfunction palette(S) {\n  const lut = S.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const L = i / 255, h = S.hue + H0 + 0.16 * (1 - L) - 0.06, hh = h - floor(h);\n    const warm = cl(1 - abs(hh - 0.13) / 0.13, 0, 1);\n    hsv(h, 0.9 - 0.45 * L - 0.3 * warm, min(1, 0.92 * L ** (0.7 - 0.2 * warm) * (1 + 0.35 * warm)), lut, i * 3);\n  }\n  // The seams: white-gold, nearly white where the rows themselves are warm.\n  const hh = S.hue + H0 - 0.06 - floor(S.hue + H0 - 0.06), warm = cl(1 - abs(hh - 0.13) / 0.2, 0, 1);\n  S.gold[0] = 1;\n  S.gold[1] = 0.86 + 0.12 * warm;\n  S.gold[2] = 0.56 + 0.36 * warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.built) return;\n  palette(S);\n  const { I, G, lut, row } = S, p = S.bias, q = 1 - p;\n  const n = min(NHI - 1, floor(S.x)), s = S.x - n;\n  // The new term splits every point by +- (1 - lambda) lambda^n of the range,\n  // and in the last third of the split the exact next stage takes over.\n  const wNext = sm(0.55, 1, s);\n  const gold = S.gold;\n  // The entropy bound p^p (1 - p)^(1 - p), as a row.\n  const lstar = p ** p * q ** q, rstar = round(((lstar - S.lo0) / (S.hi0 - S.lo0)) * (H - 1));\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], dsh = s * (1 - lam) * lam ** n * (W / 2);\n    const o0 = (n * H + r) * W, o1 = o0 + H * W;\n    for (let c = 0; c \u003c W; c++) {\n      // p of the row moved right by dsh, 1 - p moved left.\n      const a = c - dsh, b = c + dsh, ia = floor(a), ib = floor(b), fa = a - ia, fb = b - ib;\n      const va = (ia >= 0 && ia \u003c W ? I[o0 + ia] * (1 - fa) : 0) + (ia + 1 >= 0 && ia + 1 \u003c W ? I[o0 + ia + 1] * fa : 0);\n      const vb = (ib >= 0 && ib \u003c W ? I[o0 + ib] * (1 - fb) : 0) + (ib + 1 >= 0 && ib + 1 \u003c W ? I[o0 + ib + 1] * fb : 0);\n      row[c] = (p * va + q * vb) * (1 - wNext) + I[o1 + c] * wNext;\n    }\n    const seam = S.pis[r] >= 0;\n    for (let c = 0; c \u003c W; c++) {\n      // 64 times the mass is 1 where the row is flat; 1 - e^(-rho / 1.2)\n      // keeps thin rows readable and the dust and the bells from burning out.\n      const L = 1 - exp((-W * row[c]) / 1.2), li = round(L * 255) * 3;\n      let R = lut[li], Gc = lut[li + 1], B = lut[li + 2];\n      if (seam) {\n        const g = G[o0 + c] * (1 - s) + G[o1 + c] * s, k = sm(0.2, 5.5, g) * (0.35 + 0.65 * sm(0, 0.5, L));\n        R += (gold[0] - R) * k;\n        Gc += (gold[1] - Gc) * k;\n        B += (gold[2] - B) * k;\n      }\n      if (r === rstar && (c \u003c 2 || c > W - 3)) R = Gc = B = 0.85;\n      display.setPixel(c, r, round(255 * min(1, R)), round(255 * min(1, Gc)), round(255 * min(1, B)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed."},{"name":"Bias","min":0.5,"max":0.95,"about":"The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95."},{"name":"Zoom","min":0,"max":1,"about":"The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart."}],"start":[0,2,0.5,0.06],"measures":{"motion":0.1052,"detail":0.0778,"edges":0.2761,"complexity":1.7226,"coverage":0.81,"colour":0.2382,"drift":0.0505},"knobResponse":[0.3122,0.0507,0.314,0.1288]},{"slug":"bertrand-paradox","title":"Bertrand Paradox","family":"data","round":33,"note":"지름 40 LED 의 원 셋이 세 칸에 하나씩 서서, 원마다 다른 뜻의 무작위로 현을 1초에 24개씩 긋고 현은 LED 하나씩 부서져 사라져요. 삼각형 변보다 긴 현은 자홍, 짧은 현은 초록이고, 옆 막대와 숫자가 긴 현의 몫을 세어 위 원은 1/3 로, 가운데는 1/2 로, 아래는 1/4 로 모여요. K3 을 올리면 선이 원마다 다른 밀도의 점묘가 되고, K1 을 누르면 원과 셈을 비우고 처음부터 다시 그어요.","idea":"Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.","buttons":"K1 tap clears the three discs and their counts, and the gauges start again from nothing.","code":"// ===== Patternflow pattern =====\n// Title:   Bertrand Paradox\n// Family:  data\n// Idea:    Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bertrand paradox (Joseph Bertrand, 1889), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1\n//\n// Knob 1: Hue. Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap.\n// Knob 2: Speed. The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep.\n// Knob 3: Chords. How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross.\n// Knob 4: Persist. How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple.\n// Buttons: K1 tap clears the three discs and their counts, and the gauges start again from nothing.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, round, sqrt, sin, cos, abs, exp, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// One disc in each third of the 128 rows, 40 LEDs across, set left, right,\n// left so each has 22 columns beside it for its gauge.\nconst R = 19.5;\nconst DISCS = [\n  { cx: 20.5, cy: 21.5, side: 1, num: 1, den: 3 },\n  { cx: 43.5, cy: 64, side: -1, num: 1, den: 2 },\n  { cx: 20.5, cy: 106.5, side: 1, num: 1, den: 4 },\n];\nconst BAR = 40;\n// The points each method picked for its newest chords, shown white for a\n// quarter of a second: the rim pair, the point on the radius, the midpoint.\nconst SEEDS = 16, SEED_LIFE = 0.25;\n// Chords a second times the fade time at the opening knobs.\nconst OPEN = 24 * 1.1 * 7 ** 0.06;\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = {\n  0: 0b111101101101111, 1: 0b010110010010111, 2: 0b111001111100111, 3: 0b111001111001111,\n  4: 0b101101111001001, 5: 0b111100111001111, 6: 0b111100111101111, 7: 0b111001001001001,\n  8: 0b111101111101111, 9: 0b111101111001111, \"/\": 0b001001010100100, \"-\": 0b000000111000000,\n};\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i].map((c) => c * 255);\n}\n\n// The faint frame: each disc's rim and its inscribed triangle, point up.\n// They sit at 24 of 255, just visible on the panel and still dark to the\n// study's count of lit LEDs, which starts above 24.\nfunction buildFrame() {\n  const f = new Uint8Array(N);\n  for (const d of DISCS) {\n    for (let a = 0; a \u003c 720; a++) {\n      const t = (a / 720) * 2 * PI, x = floor(d.cx + R * cos(t)), y = floor(d.cy + R * sin(t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) f[y * W + x] = 1;\n    }\n    for (let k = 0; k \u003c 3; k++) {\n      const a0 = -PI / 2 + (k * 2 * PI) / 3, a1 = a0 + (2 * PI) / 3;\n      const x0 = d.cx + R * cos(a0), y0 = d.cy + R * sin(a0), x1 = d.cx + R * cos(a1), y1 = d.cy + R * sin(a1);\n      const n = 80;\n      for (let j = 0; j \u003c= n; j++) f[floor(y0 + ((y1 - y0) * j) / n) * W + floor(x0 + ((x1 - x0) * j) / n)] = 2;\n    }\n  }\n  return f;\n}\n\nexport function setup(params) {\n  const thr = new Float32Array(N);\n  // Each LED lets go of a fading chord at its own level, so a chord crumbles\n  // LED by LED instead of dimming, and every lit LED is at full brightness.\n  // Half-lit lines would turn the saturated pair towards grey.\n  for (let i = 0; i \u003c N; i++) thr[i] = 0.1 + 0.9 * Math.random();\n  params.s = {\n    accL: new Float32Array(N), accS: new Float32Array(N), thr, frame: buildFrame(),\n    long: [0, 0, 0], total: [0, 0, 0], carry: 0, hue: 0, clock: 0, scale: 1, cap: 2.5,\n    seeds: new Int32Array(3 * SEEDS).fill(-1), born: new Float32Array(3 * SEEDS), next: [0, 0, 0],\n  };\n}\n\n// A chord of the unit circle by method m, as its two ends and its distance\n// p from the centre. It is longer than the triangle's side, sqrt 3, exactly\n// when p \u003c 1/2, when it cuts the triangle's incircle.\nfunction chord(m) {\n  const rnd = Math.random;\n  if (m === 0) {\n    // Two uniform points on the rim: long with probability 1/3.\n    const a = 2 * PI * rnd(), b = 2 * PI * rnd();\n    return [cos(a), sin(a), cos(b), sin(b), abs(cos((a - b) / 2))];\n  }\n  // A uniform point on a random radius (m = 1, long with probability 1/2)\n  // or a uniform point in the disc (m = 2, 1/4) as the chord's midpoint.\n  const f = 2 * PI * rnd(), p = m === 1 ? rnd() : sqrt(rnd()), h = sqrt(1 - p * p), c = cos(f), s = sin(f);\n  return [p * c - h * s, p * s + h * c, p * c + h * s, p * s - h * c, p];\n}\n\nfunction seed(P, d, x, y) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const j = d * SEEDS + P.next[d];\n  P.next[d] = (P.next[d] + 1) % SEEDS;\n  P.seeds[j] = y * W + x;\n  P.born[j] = P.clock;\n}\n\n// Disc d draws its chords by method d.\nfunction lay(P, d) {\n  const D = DISCS[d], [ax, ay, bx, by, p] = chord(d), isLong = p \u003c 0.5;\n  if (d === 0) {\n    seed(P, d, D.cx + R * ax, D.cy + R * ay);\n    seed(P, d, D.cx + R * bx, D.cy + R * by);\n  } else seed(P, d, D.cx + (R * (ax + bx)) / 2, D.cy + (R * (ay + by)) / 2);\n  const acc = isLong ? P.accL : P.accS;\n  const x0 = D.cx + R * ax, y0 = D.cy + R * ay, dx = R * (bx - ax), dy = R * (by - ay);\n  const n = Math.ceil(max(abs(dx), abs(dy)));\n  let last = -1;\n  for (let j = 0; j \u003c= n; j++) {\n    const x = floor(x0 + (dx * j) / max(1, n)), y = floor(y0 + (dy * j) / max(1, n));\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const i = y * W + x;\n    if (i === last) continue;\n    last = i;\n    acc[i] = min(acc[i] + 1, P.cap);\n  }\n  P.total[d]++;\n  if (isLong) P.long[d]++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const clock = d * (cl(k[1], 0.2, 3) / 2);\n  const rate = 24 * 10 ** cl(k[2], 0, 1), tau = 1.1 * 7 ** cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.accL.fill(0);\n    P.accS.fill(0);\n    P.long = [0, 0, 0];\n    P.total = [0, 0, 0];\n    P.seeds.fill(-1);\n  }\n  P.clock += clock;\n  // With more chords alive than at the opening, the level an LED needs to\n  // light rises with them (to the 0.85th power), so the discs turn from a\n  // few lines into a stipple of each method's own density instead of\n  // filling solid: even in the middle disc, heavy at the rim in the top one,\n  // hollow in the bottom one.\n  P.scale = max(1, (rate * tau) / OPEN) ** 0.85;\n  P.cap = 2.5 * P.scale;\n  const fade = exp(-clock / tau), aL = P.accL, aS = P.accS;\n  for (let i = 0; i \u003c N; i++) {\n    aL[i] *= fade;\n    aS[i] *= fade;\n  }\n  P.carry += rate * clock;\n  const n = floor(P.carry);\n  P.carry -= n;\n  for (let j = 0; j \u003c n; j++) for (let m = 0; m \u003c 3; m++) lay(P, m);\n}\n\nfunction glyph(display, ch, x0, y0, sc, c) {\n  const bits = FONT[ch];\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((bits >> (14 - r * 3 - q)) & 1)\n        for (let u = 0; u \u003c sc; u++) for (let v = 0; v \u003c sc; v++) display.setPixel(x0 + q * sc + u, y0 + r * sc + v, c[0], c[1], c[2]);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  // Magenta for the long chords, green for the short: at full saturation\n  // the pair sits as far apart as two colours can on the panel's red-green\n  // and yellow-blue axes, and neither opens on red.\n  const cL = hsv(P.hue + 5 / 6, 1, 1), cS = hsv(P.hue + 1 / 3, 1, 1);\n  const { accL, accS, thr, frame } = P, sc = P.scale;\n  for (let i = 0; i \u003c N; i++) {\n    const a = accL[i], b = accS[i], t = a + b, x = i % W, y = (i / W) | 0;\n    if (t > thr[i] * sc) {\n      // A lit LED is at full brightness: the fade shows as crumbling.\n      const c = a >= b ? cL : cS;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    } else if (frame[i]) display.setPixel(x, y, 24, 24, 24);\n    else display.setPixel(x, y, 0, 0, 0);\n  }\n  for (let j = 0; j \u003c P.seeds.length; j++) {\n    const i = P.seeds[j];\n    if (i >= 0 && P.clock - P.born[j] \u003c SEED_LIFE) display.setPixel(i % W, (i / W) | 0, 255, 255, 255);\n  }\n  for (let d = 0; d \u003c 3; d++) {\n    const D = DISCS[d], yb = round(D.cy + R) - 1, top = yb - BAR + 1;\n    const bx = D.side > 0 ? 43 : 18, tx = D.side > 0 ? 49 : 1;\n    const tot = P.total[d], f = tot ? P.long[d] / tot : 0, hgt = round(f * BAR);\n    // The bar: the share of long chords so far, out of 40 rows.\n    for (let j = 0; j \u003c hgt; j++) for (let q = 0; q \u003c 3; q++) display.setPixel(bx + q, yb - j, cL[0], cL[1], cL[2]);\n    // The answer this method gives, as a white tick and its fraction.\n    const ty = yb - round((D.num / D.den) * BAR);\n    for (let q = -1; q \u003c= 3; q++) display.setPixel(bx + q, ty, 255, 255, 255);\n    const lx = D.side > 0 ? tx : tx + 3;\n    glyph(display, D.num, lx, ty - 2, 1, cS);\n    glyph(display, \"/\", lx + 4, ty - 2, 1, cS);\n    glyph(display, D.den, lx + 8, ty - 2, 1, cS);\n    // The running share in percent, two digits, in the long colour.\n    const pct = min(99, round(f * 100));\n    const s = tot ? [floor(pct / 10), pct % 10] : [\"-\", \"-\"];\n    glyph(display, s[0], tx, top + 1, 2, cL);\n    glyph(display, s[1], tx + 8, top + 1, 2, cL);\n  }\n}\n","layer":{"id":"layer-bertrand-paradox","type":"code","name":"bertrand-paradox","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bertrand Paradox\n// Family:  data\n// Idea:    Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bertrand paradox (Joseph Bertrand, 1889), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1\n//\n// Knob 1: Hue. Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap.\n// Knob 2: Speed. The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep.\n// Knob 3: Chords. How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross.\n// Knob 4: Persist. How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple.\n// Buttons: K1 tap clears the three discs and their counts, and the gauges start again from nothing.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, round, sqrt, sin, cos, abs, exp, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// One disc in each third of the 128 rows, 40 LEDs across, set left, right,\n// left so each has 22 columns beside it for its gauge.\nconst R = 19.5;\nconst DISCS = [\n  { cx: 20.5, cy: 21.5, side: 1, num: 1, den: 3 },\n  { cx: 43.5, cy: 64, side: -1, num: 1, den: 2 },\n  { cx: 20.5, cy: 106.5, side: 1, num: 1, den: 4 },\n];\nconst BAR = 40;\n// The points each method picked for its newest chords, shown white for a\n// quarter of a second: the rim pair, the point on the radius, the midpoint.\nconst SEEDS = 16, SEED_LIFE = 0.25;\n// Chords a second times the fade time at the opening knobs.\nconst OPEN = 24 * 1.1 * 7 ** 0.06;\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = {\n  0: 0b111101101101111, 1: 0b010110010010111, 2: 0b111001111100111, 3: 0b111001111001111,\n  4: 0b101101111001001, 5: 0b111100111001111, 6: 0b111100111101111, 7: 0b111001001001001,\n  8: 0b111101111101111, 9: 0b111101111001111, \"/\": 0b001001010100100, \"-\": 0b000000111000000,\n};\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i].map((c) => c * 255);\n}\n\n// The faint frame: each disc's rim and its inscribed triangle, point up.\n// They sit at 24 of 255, just visible on the panel and still dark to the\n// study's count of lit LEDs, which starts above 24.\nfunction buildFrame() {\n  const f = new Uint8Array(N);\n  for (const d of DISCS) {\n    for (let a = 0; a \u003c 720; a++) {\n      const t = (a / 720) * 2 * PI, x = floor(d.cx + R * cos(t)), y = floor(d.cy + R * sin(t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) f[y * W + x] = 1;\n    }\n    for (let k = 0; k \u003c 3; k++) {\n      const a0 = -PI / 2 + (k * 2 * PI) / 3, a1 = a0 + (2 * PI) / 3;\n      const x0 = d.cx + R * cos(a0), y0 = d.cy + R * sin(a0), x1 = d.cx + R * cos(a1), y1 = d.cy + R * sin(a1);\n      const n = 80;\n      for (let j = 0; j \u003c= n; j++) f[floor(y0 + ((y1 - y0) * j) / n) * W + floor(x0 + ((x1 - x0) * j) / n)] = 2;\n    }\n  }\n  return f;\n}\n\nexport function setup(params) {\n  const thr = new Float32Array(N);\n  // Each LED lets go of a fading chord at its own level, so a chord crumbles\n  // LED by LED instead of dimming, and every lit LED is at full brightness.\n  // Half-lit lines would turn the saturated pair towards grey.\n  for (let i = 0; i \u003c N; i++) thr[i] = 0.1 + 0.9 * Math.random();\n  params.s = {\n    accL: new Float32Array(N), accS: new Float32Array(N), thr, frame: buildFrame(),\n    long: [0, 0, 0], total: [0, 0, 0], carry: 0, hue: 0, clock: 0, scale: 1, cap: 2.5,\n    seeds: new Int32Array(3 * SEEDS).fill(-1), born: new Float32Array(3 * SEEDS), next: [0, 0, 0],\n  };\n}\n\n// A chord of the unit circle by method m, as its two ends and its distance\n// p from the centre. It is longer than the triangle's side, sqrt 3, exactly\n// when p \u003c 1/2, when it cuts the triangle's incircle.\nfunction chord(m) {\n  const rnd = Math.random;\n  if (m === 0) {\n    // Two uniform points on the rim: long with probability 1/3.\n    const a = 2 * PI * rnd(), b = 2 * PI * rnd();\n    return [cos(a), sin(a), cos(b), sin(b), abs(cos((a - b) / 2))];\n  }\n  // A uniform point on a random radius (m = 1, long with probability 1/2)\n  // or a uniform point in the disc (m = 2, 1/4) as the chord's midpoint.\n  const f = 2 * PI * rnd(), p = m === 1 ? rnd() : sqrt(rnd()), h = sqrt(1 - p * p), c = cos(f), s = sin(f);\n  return [p * c - h * s, p * s + h * c, p * c + h * s, p * s - h * c, p];\n}\n\nfunction seed(P, d, x, y) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const j = d * SEEDS + P.next[d];\n  P.next[d] = (P.next[d] + 1) % SEEDS;\n  P.seeds[j] = y * W + x;\n  P.born[j] = P.clock;\n}\n\n// Disc d draws its chords by method d.\nfunction lay(P, d) {\n  const D = DISCS[d], [ax, ay, bx, by, p] = chord(d), isLong = p \u003c 0.5;\n  if (d === 0) {\n    seed(P, d, D.cx + R * ax, D.cy + R * ay);\n    seed(P, d, D.cx + R * bx, D.cy + R * by);\n  } else seed(P, d, D.cx + (R * (ax + bx)) / 2, D.cy + (R * (ay + by)) / 2);\n  const acc = isLong ? P.accL : P.accS;\n  const x0 = D.cx + R * ax, y0 = D.cy + R * ay, dx = R * (bx - ax), dy = R * (by - ay);\n  const n = Math.ceil(max(abs(dx), abs(dy)));\n  let last = -1;\n  for (let j = 0; j \u003c= n; j++) {\n    const x = floor(x0 + (dx * j) / max(1, n)), y = floor(y0 + (dy * j) / max(1, n));\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const i = y * W + x;\n    if (i === last) continue;\n    last = i;\n    acc[i] = min(acc[i] + 1, P.cap);\n  }\n  P.total[d]++;\n  if (isLong) P.long[d]++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const clock = d * (cl(k[1], 0.2, 3) / 2);\n  const rate = 24 * 10 ** cl(k[2], 0, 1), tau = 1.1 * 7 ** cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.accL.fill(0);\n    P.accS.fill(0);\n    P.long = [0, 0, 0];\n    P.total = [0, 0, 0];\n    P.seeds.fill(-1);\n  }\n  P.clock += clock;\n  // With more chords alive than at the opening, the level an LED needs to\n  // light rises with them (to the 0.85th power), so the discs turn from a\n  // few lines into a stipple of each method's own density instead of\n  // filling solid: even in the middle disc, heavy at the rim in the top one,\n  // hollow in the bottom one.\n  P.scale = max(1, (rate * tau) / OPEN) ** 0.85;\n  P.cap = 2.5 * P.scale;\n  const fade = exp(-clock / tau), aL = P.accL, aS = P.accS;\n  for (let i = 0; i \u003c N; i++) {\n    aL[i] *= fade;\n    aS[i] *= fade;\n  }\n  P.carry += rate * clock;\n  const n = floor(P.carry);\n  P.carry -= n;\n  for (let j = 0; j \u003c n; j++) for (let m = 0; m \u003c 3; m++) lay(P, m);\n}\n\nfunction glyph(display, ch, x0, y0, sc, c) {\n  const bits = FONT[ch];\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((bits >> (14 - r * 3 - q)) & 1)\n        for (let u = 0; u \u003c sc; u++) for (let v = 0; v \u003c sc; v++) display.setPixel(x0 + q * sc + u, y0 + r * sc + v, c[0], c[1], c[2]);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  // Magenta for the long chords, green for the short: at full saturation\n  // the pair sits as far apart as two colours can on the panel's red-green\n  // and yellow-blue axes, and neither opens on red.\n  const cL = hsv(P.hue + 5 / 6, 1, 1), cS = hsv(P.hue + 1 / 3, 1, 1);\n  const { accL, accS, thr, frame } = P, sc = P.scale;\n  for (let i = 0; i \u003c N; i++) {\n    const a = accL[i], b = accS[i], t = a + b, x = i % W, y = (i / W) | 0;\n    if (t > thr[i] * sc) {\n      // A lit LED is at full brightness: the fade shows as crumbling.\n      const c = a >= b ? cL : cS;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    } else if (frame[i]) display.setPixel(x, y, 24, 24, 24);\n    else display.setPixel(x, y, 0, 0, 0);\n  }\n  for (let j = 0; j \u003c P.seeds.length; j++) {\n    const i = P.seeds[j];\n    if (i >= 0 && P.clock - P.born[j] \u003c SEED_LIFE) display.setPixel(i % W, (i / W) | 0, 255, 255, 255);\n  }\n  for (let d = 0; d \u003c 3; d++) {\n    const D = DISCS[d], yb = round(D.cy + R) - 1, top = yb - BAR + 1;\n    const bx = D.side > 0 ? 43 : 18, tx = D.side > 0 ? 49 : 1;\n    const tot = P.total[d], f = tot ? P.long[d] / tot : 0, hgt = round(f * BAR);\n    // The bar: the share of long chords so far, out of 40 rows.\n    for (let j = 0; j \u003c hgt; j++) for (let q = 0; q \u003c 3; q++) display.setPixel(bx + q, yb - j, cL[0], cL[1], cL[2]);\n    // The answer this method gives, as a white tick and its fraction.\n    const ty = yb - round((D.num / D.den) * BAR);\n    for (let q = -1; q \u003c= 3; q++) display.setPixel(bx + q, ty, 255, 255, 255);\n    const lx = D.side > 0 ? tx : tx + 3;\n    glyph(display, D.num, lx, ty - 2, 1, cS);\n    glyph(display, \"/\", lx + 4, ty - 2, 1, cS);\n    glyph(display, D.den, lx + 8, ty - 2, 1, cS);\n    // The running share in percent, two digits, in the long colour.\n    const pct = min(99, round(f * 100));\n    const s = tot ? [floor(pct / 10), pct % 10] : [\"-\", \"-\"];\n    glyph(display, s[0], tx, top + 1, 2, cL);\n    glyph(display, s[1], tx + 8, top + 1, 2, cL);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap."},{"name":"Speed","min":0.2,"max":3,"about":"The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep."},{"name":"Chords","min":0,"max":1,"about":"How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross."},{"name":"Persist","min":0,"max":1,"about":"How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple."}],"start":[0,2,0,0.06],"measures":{"motion":0.3006,"detail":0.2269,"edges":0.8503,"complexity":0.2324,"coverage":0.2638,"colour":0.5757,"drift":0.0802},"knobResponse":[0.24,0.1255,0.1353,0.0538]},{"slug":"bi-phase","title":"Bi-Phase","family":"cosmetic","round":30,"note":"흔들어 섞은 이중층 클렌저가 패널 가득 기름 방울로 흩어졌다가, 방울끼리 합쳐 떠올라 위에 한 층으로 모이고 경계선이 맑게 서요. 그러고 나면 다시 흔들려요.","idea":"The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.","buttons":"K1 tap shakes the bottle now.","code":"// ===== Patternflow pattern =====\n// Title:   Bi-Phase\n// Family:  cosmetic\n// Idea:    The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after two-phase cleansers and phase-field separation of two liquids (Cahn-Hilliard, John W. Cahn and John E. Hilliard, 1958; Allen-Cahn, Samuel M. Allen and John W. Cahn, 1979)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1\n//\n// Knob 1: Hue. Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose.\n// Knob 2: Speed. How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long.\n// Knob 3: Oil. The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down.\n// Knob 4: Shake. How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles.\n// Buttons: K1 tap shakes the bottle now.\n\nconst W = 64, H = 128, N = W * H;\n// The flow is solved on a coarse grid of 4x4 LED cells.\nconst CW = 16, CH = 32, CN = CW * CH;\nconst { min, max, floor, sqrt, sin, cos, exp, log, tanh, abs, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// Allen-Cahn: phi_t = M (K lap phi + phi - phi^3) + lambda, phi = +1 oil and\n// -1 water, lambda the multiplier that holds the amount of oil to K3. The\n// interface is tanh(d / sqrt(2K)) across, about 2 LEDs, and moves at M K\n// times its curvature. h M (8K + 2) \u003c 2 keeps the step stable: 4 a frame at\n// Speed 2.\nconst KAP = 0.5, MOB = 1.5, HMAX = 0.21;\n// Gravity in the free energy, on the interfaces only: a rim higher up gains\n// oil from one lower down in the same patch.\nconst GRAV = 2.5;\n// Time units a second at Speed 1; a shake lasts TS of them, 1.1 s at Speed 2.\nconst RATE = 12, TS = 26;\n// The push of the oil, and the screening of the flat bottle's walls.\nconst BUOY = 0.5, AL2 = 0.16;\n// Drops under AMAX LEDs move as one piece; ROUND and DRIFT below.\nconst AMAX = 700, ROUND = 0.06, DRIFT = 0.08;\n\n// Sine transforms of the coarse grid (DST-II forward, DST-III back), and the\n// screened Stokes operator (lap - a^2)^2 psi = d(f_y)/dx of a flat cell,\n// diagonal in that basis, with free-slip walls.\nconst SX = new Float32Array(CW * CW), SY = new Float32Array(CH * CH), KI = new Float32Array(CN);\nfor (let m = 0; m \u003c CW; m++) for (let i = 0; i \u003c CW; i++) SX[m * CW + i] = sin((PI * (m + 1) * (i + 0.5)) / CW);\nfor (let n = 0; n \u003c CH; n++) for (let j = 0; j \u003c CH; j++) SY[n * CH + j] = sin((PI * (n + 1) * (j + 0.5)) / CH);\nfor (let n = 0; n \u003c CH; n++)\n  for (let m = 0; m \u003c CW; m++) {\n    const kx = 4 * sin((PI * (m + 1)) / (2 * CW)) ** 2, ky = 4 * sin((PI * (n + 1)) / (2 * CH)) ** 2;\n    KI[n * CW + m] = ((m === CW - 1 ? 1 : 2) * (n === CH - 1 ? 1 : 2)) / (CN * (kx + ky + AL2) ** 2);\n  }\n\nfunction hsv(h, s, v, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  (o[0] = c[0]), (o[1] = c[1]), (o[2] = c[2]);\n}\n\nexport function setup(params) {\n  params.s = null;\n}\n\nfunction init(k) {\n  const f = () => new Float32Array(N), g = () => new Float32Array(CN);\n  const P = {\n    phi: f(), nxt: f(), S: f(), tmp: f(), blur: f(), u: f(), v: f(), b1: f(), b2: f(),\n    lab: new Int32Array(N), stk: new Int32Array(N), cu: f(), cv: f(), ca: f(), px: f(), py: f(), rad: f(),\n    F: g(), A: g(), G: g(), psi: g(), U: g(), V: g(),\n    hue: k[0], speed: 2, oil: cl(k[2], 0.3, 0.6), shake: cl(k[3], 0, 1),\n    mT: 0, c: 0.85 * TS, time: 0, rt: 0, deep: [0, 0, 0], pale: [0, 0, 0],\n  };\n  // Open at the end of a shake, the new drops just formed.\n  P.mT = 2 * P.oil - 1;\n  shake(P);\n  P.phi.set(P.S);\n  for (let s = 0; s \u003c 8; s++) relax(P, HMAX);\n  return P;\n}\n\n// A shake's emulsion: round drops of the lesser liquid dropped at random until\n// they make up its share, radius 2.2 to 5 LEDs after a gentle shake and 1.5\n// to 2.4 after a hard one, small ones the most common. Most land a LED clear\n// of the others; one in twenty may touch.\nfunction shake(P) {\n  const S = P.S, inv = P.mT > 0, f = inv ? (1 - P.mT) / 2 : (1 + P.mT) / 2;\n  const r0 = 2.2 - 0.7 * P.shake, r1 = 5 - 2.6 * P.shake;\n  S.fill(-1);\n  let area = 0;\n  for (let k = 0; k \u003c 5000 && area \u003c f * N; k++) {\n    const r = r0 * (r1 / r0) ** (random() ** 1.6), cx = random() * W, cy = random() * H;\n    const xa = max(0, floor(cx - r - 2)), xb = min(W - 1, floor(cx + r + 2)), ya = max(0, floor(cy - r - 2)), yb = min(H - 1, floor(cy + r + 2));\n    if (k \u003c 4500 && random() \u003c 0.95) {\n      let hit = false;\n      const rr = (r + 1.2) * (r + 1.2);\n      for (let y = ya; y \u003c= yb && !hit; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const ex = x + 0.5 - cx, ey = y + 0.5 - cy;\n          if (ex * ex + ey * ey \u003c rr && S[y * W + x] > -0.9) hit = true;\n        }\n      if (hit) continue;\n    }\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const ex = x + 0.5 - cx, ey = y + 0.5 - cy, i = y * W + x, v = tanh((r - sqrt(ex * ex + ey * ey)) / 0.8);\n        if (v > S[i]) (area += (v - S[i]) / 2), (S[i] = v);\n      }\n  }\n  if (inv) for (let i = 0; i \u003c N; i++) S[i] = -S[i];\n}\n\n// Box blur of radius r, along x and then y, by running sums.\nfunction box(src, dst, tmp, r) {\n  const n = 2 * r + 1;\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = src[o] * (r + 1);\n    for (let x = 1; x \u003c= r; x++) s += src[o + x];\n    for (let x = 0; x \u003c W; x++) (tmp[o + x] = s / n), (s += src[o + min(x + r + 1, W - 1)] - src[o + max(x - r, 0)]);\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = tmp[x] * (r + 1);\n    for (let y = 1; y \u003c= r; y++) s += tmp[y * W + x];\n    for (let y = 0; y \u003c H; y++) (dst[y * W + x] = s / n), (s += tmp[min(y + r + 1, H - 1) * W + x] - tmp[max(y - r, 0) * W + x]);\n  }\n}\n\n// One Allen-Cahn step. The multiplier acts on the interfaces only, weighted\n// by g = (1 - phi^2)^2, and is worked out over each 11x11 patch rather than\n// the whole panel, so what a drop's rim loses to its curvature comes back on\n// the same rim: a drop pulls round without shrinking, oil cannot go into\n// solution in the water, and a drop only feeds a neighbour it nearly touches,\n// as with Cahn-Hilliard. What the patches miss goes back over all the rims.\nfunction relax(P, h) {\n  const phi = P.phi, r = P.nxt, g = P.b1, rb = P.b2, gb = P.blur, a = h * MOB;\n  for (let y = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0, gr = (GRAV * (H - 2 * y)) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], q = 1 - p * p, w = q * q;\n      const lap = phi[x > 0 ? i - 1 : i] + phi[x \u003c W - 1 ? i + 1 : i] + phi[i + up] + phi[i + dn] - 4 * p;\n      r[i] = a * (KAP * lap + p - p * p * p + gr * w);\n      g[i] = w;\n    }\n  }\n  box(r, rb, P.tmp, 5);\n  box(g, gb, P.tmp, 5);\n  let sum = 0, gs = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const q = (phi[i] += r[i] - (g[i] * rb[i]) / (gb[i] + 1e-9));\n    sum += q;\n    gs += g[i];\n  }\n  const d = (P.mT * N - sum) / (gs + 1e-6);\n  for (let i = 0; i \u003c N; i++) phi[i] += d * g[i];\n}\n\n// The flow. Oil is lighter, so each coarse cell pushes up by how much oil it\n// holds; screened Stokes flow carries the drops, big ones faster, and water\n// comes down round them. A shake adds a swirl of the two lowest modes.\nfunction flow(P, swirl, phase) {\n  const { phi, F, A, G, psi, U, V } = P;\n  F.fill(0);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[(y >> 2) * CW + (x >> 2)] += phi[y * W + x];\n  // The curl of the push, -B dF/dx, then along x, along y, scaled, and back.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) G[j * CW + i] = (-BUOY / 32) * (F[j * CW + min(i + 1, CW - 1)] - F[j * CW + max(i - 1, 0)]);\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let i = 0; i \u003c CW; i++) s += G[j * CW + i] * SX[m * CW + i];\n      A[j * CW + m] = s;\n    }\n  for (let n = 0; n \u003c CH; n++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let j = 0; j \u003c CH; j++) s += A[j * CW + m] * SY[n * CH + j];\n      G[n * CW + m] = s * KI[n * CW + m];\n    }\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let n = 0; n \u003c CH; n++) s += G[n * CW + m] * SY[n * CH + j];\n      A[j * CW + m] = s;\n    }\n  const c1 = cos(phase), s1 = sin(phase);\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      let s = 0;\n      for (let m = 0; m \u003c CW; m++) s += A[j * CW + m] * SX[m * CW + i];\n      const X = (PI * (i + 0.5)) / CW, Y = (PI * (j + 0.5)) / CH;\n      psi[j * CW + i] = s + swirl * (sin(X) * sin(2 * Y) * c1 + 0.8 * sin(2 * X) * sin(Y) * s1);\n    }\n  // u = dpsi/dy, v = -dpsi/dx, in LEDs per time unit; psi is 0 past the walls.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      const k = j * CW + i, p = psi[k];\n      U[k] = 2 * ((j \u003c CH - 1 ? psi[k + CW] : -p) - (j > 0 ? psi[k - CW] : -p));\n      V[k] = -2 * ((i \u003c CW - 1 ? psi[k + 1] : -p) - (i > 0 ? psi[k - 1] : -p));\n    }\n}\n\n// The flow at every LED. A drop of either liquid under AMAX LEDs moves as one\n// piece at the mean of the flow over it, as surface tension holds a small\n// drop together, and so do the two rings of LEDs round it, which it is about\n// to take the place of. On top of that each drop is drawn towards the circle\n// of its own area: every LED of it moves along the radius at ROUND times its\n// distance from that circle, which curvature alone would take seconds over\n// for a big drop. A drop on a side wall slides up it and is drawn to a half\n// circle standing on the wall. Every drop rises, or sinks if it is water, at\n// least DRIFT LEDs a time unit faster than the coarse flow says, so the last\n// small ones still get there. The layers and the liquid between the drops\n// follow the flow smoothed over 5 LEDs; during a shake the swirl takes over.\nfunction velocity(P, rigid) {\n  const { U, V, u, v, b1, b2, phi, lab, stk, cu, cv, ca, px, py, rad } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const gy = cl((y - 1.5) / 4, 0, CH - 1), j0 = gy | 0, fy = gy - j0, a = j0 * CW, b = min(j0 + 1, CH - 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const gx = cl((x - 1.5) / 4, 0, CW - 1), i0 = gx | 0, i1 = min(i0 + 1, CW - 1), fx = gx - i0, i = y * W + x;\n      u[i] = (U[a + i0] * (1 - fx) + U[a + i1] * fx) * (1 - fy) + (U[b + i0] * (1 - fx) + U[b + i1] * fx) * fy;\n      v[i] = (V[a + i0] * (1 - fx) + V[a + i1] * fx) * (1 - fy) + (V[b + i0] * (1 - fx) + V[b + i1] * fx) * fy;\n    }\n  }\n  box(u, b1, P.tmp, 2);\n  box(v, b2, P.tmp, 2);\n  if (rigid \u003c= 0) return u.set(b1), v.set(b2);\n  // Label the pieces of each liquid, 4-connected.\n  lab.fill(-1);\n  let nc = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (lab[s] >= 0) continue;\n    const ph = phi[s] > 0;\n    let top = 0, area = 0, su = 0, sv = 0, mx = 0, my = 0, wall = false;\n    stk[top++] = s;\n    lab[s] = nc;\n    while (top > 0) {\n      const i = stk[--top], x = i % W;\n      area++;\n      if (x === 0 || x === W - 1) wall = true;\n      (su += u[i]), (sv += v[i]), (mx += x), (my += (i - x) / W);\n      if (x > 0 && lab[i - 1] \u003c 0 && phi[i - 1] > 0 === ph) (lab[i - 1] = nc), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0 && phi[i + 1] > 0 === ph) (lab[i + 1] = nc), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0 && phi[i - W] > 0 === ph) (lab[i - W] = nc), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0 && phi[i + W] > 0 === ph) (lab[i + W] = nc), (stk[top++] = i + W);\n    }\n    (ca[nc] = area), (cu[nc] = wall ? 0 : su / area), (cv[nc] = sv / area + (ph ? -DRIFT : DRIFT));\n    (px[nc] = wall ? (mx / area \u003c W / 2 ? -0.5 : W - 0.5) : mx / area), (py[nc] = my / area);\n    rad[nc] = sqrt(((wall ? 2 : 1) * area) / PI);\n    nc++;\n  }\n  const put = (i, k) => {\n    const dx = (i % W) - px[k], dy = ((i / W) | 0) - py[k], w = ROUND * (rad[k] / (sqrt(dx * dx + dy * dy) + 0.5) - 1);\n    (u[i] = cu[k] + w * dx), (v[i] = cv[k] + w * dy), (lab[i] = k);\n  };\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    if (ca[lab[i]] \u003c AMAX) put(i, lab[i]), (stk[top++] = i);\n    else (u[i] = b1[i]), (v[i] = b2[i]), (lab[i] = -1);\n  }\n  // Two rings round each drop, nearest drop first.\n  for (let ring = 0, from = 0; ring \u003c 2; ring++) {\n    const end = top;\n    for (let t = from; t \u003c end; t++) {\n      const i = stk[t], x = i % W, k = lab[i];\n      if (x > 0 && lab[i - 1] \u003c 0) put(i - 1, k), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0) put(i + 1, k), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0) put(i - W, k), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0) put(i + W, k), (stk[top++] = i + W);\n    }\n    from = end;\n  }\n  if (rigid \u003c 1) for (let i = 0; i \u003c N; i++) (u[i] = b1[i] + (u[i] - b1[i]) * rigid), (v[i] = b2[i] + (v[i] - b2[i]) * rigid);\n}\n\n// Semi-Lagrangian advection of a field over T time units, from src into dst.\n// Past the top the bottle holds oil (top) and past the bottom water (bot), so\n// a drop leaving the floor does not draw a streak of itself up behind it.\nfunction advect(P, src, dst, T, top, bot) {\n  const { u, v } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, sx = cl(x - u[i] * T, 0, W - 1), sy = y - v[i] * T;\n      const x0 = sx | 0, x1 = min(x0 + 1, W - 1), ex = sx - x0, y0 = floor(sy), ey = sy - y0;\n      const a = y0 \u003c 0 ? top : y0 > H - 1 ? bot : src[y0 * W + x0] * (1 - ex) + src[y0 * W + x1] * ex;\n      const b = y0 \u003c -1 ? top : y0 > H - 2 ? bot : src[(y0 + 1) * W + x0] * (1 - ex) + src[(y0 + 1) * W + x1] * ex;\n      dst[i] = a * (1 - ey) + b * ey;\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.3, 0.06];\n  if (!params.s) params.s = init(k);\n  const P = params.s, d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.oil = cl(k[2], 0.3, 0.6);\n  P.shake = cl(k[3], 0, 1);\n  // The amount of oil follows K3 at a fifth of the bottle a second, so the\n  // layer grows or thins instead of the water clouding over.\n  P.mT += cl(2 * P.oil - 1 - P.mT, -0.4 * d, 0.4 * d);\n  const T = d * P.speed * RATE;\n  P.rt += d;\n  P.time += T;\n  P.c += T;\n  // A shake every 560 time units (23 s at Speed 2) at K4 0, down to 120 at 1.\n  if ((input.btnPressed && input.btnPressed[0] && P.c > TS) || P.c > 560 - 440 * sqrt(P.shake)) (P.c = 0), shake(P);\n  // The swirl winds the liquid round for the first two thirds of a shake, and\n  // as it dies the liquid breaks up into the new drops.\n  const shaking = P.c \u003c TS, u = P.c / TS, e = shaking ? sin(PI * min(1, u / 0.65)) ** 2 : 0;\n  flow(P, 10 * e, P.time * 0.3);\n  velocity(P, 1 - e);\n  // phi is carried as atanh(phi), which runs nearly straight through an\n  // interface, so the linear interpolation does not smear the drops' edges.\n  const phi = P.phi, q = P.nxt;\n  for (let i = 0; i \u003c N; i++) {\n    const p = cl(phi[i], -0.99999, 0.99999);\n    q[i] = 0.5 * log((1 + p) / (1 - p));\n  }\n  advect(P, q, phi, T, 6, -6);\n  for (let i = 0; i \u003c N; i++) phi[i] = 1 - 2 / (exp(2 * phi[i]) + 1);\n  if (shaking) {\n    const w = 1 - exp(-0.5 * sm(0.4, 0.8, u) * T), S = P.S;\n    for (let i = 0; i \u003c N; i++) phi[i] += w * (S[i] - phi[i]);\n  }\n  const steps = Math.ceil(T / HMAX - 1e-6);\n  for (let s = 0; s \u003c steps; s++) relax(P, T / steps);\n  // A drop shrunk to one LED inside the other liquid cannot go anywhere under\n  // the local multiplier and would stay as a dimple: fill it in.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i];\n      if (p > 0.97 || p \u003c -0.97) continue;\n      const a = phi[x > 0 ? i - 1 : i + 1], b = phi[x \u003c W - 1 ? i + 1 : i - 1], c = phi[y > 0 ? i - W : i + W], e = phi[y \u003c H - 1 ? i + W : i - W];\n      const lo = min(a, b, c, e), hi = max(a, b, c, e);\n      if ((lo > 0.5 && p \u003c lo - 0.1) || (hi \u003c -0.5 && p > hi + 0.1)) phi[i] = (a + b + c + e) / 4;\n    }\n}\n\n// Light from the upper left and in front, and the half vector for the glint.\nconst LX = -0.42, LY = -0.56, LZ = 0.71, HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const phi = P.phi, bl = P.blur, deep = P.deep, pale = P.pale;\n  // phi blurred over 5x5 is read as the height of the oil: a drop is a dome\n  // and the layer a plateau, lit from the upper left.\n  box(phi, bl, P.tmp, 2);\n  hsv(P.hue + 0.07, 0.62, 1, deep);\n  hsv(P.hue + 0.07, 0.26, 1, pale);\n  // A soft band of shop light drifts across the glass every 14 s.\n  const band = W / 2 + 46 * sin((2 * PI * P.rt) / 14);\n  for (let y = 0; y \u003c H; y++) {\n    const shop = 0.86 + 0.14 * (1 - y / H);\n    // Water: a pale cool white, a shade bluer low down.\n    const wr = 0.76 - 0.06 * (y / H), wg = 0.82 - 0.03 * (y / H), wb = 0.93;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], o = sm(-0.6, 0.6, p);\n      const gx = phi[x \u003c W - 1 ? i + 1 : i] - phi[x > 0 ? i - 1 : i], gy = phi[y \u003c H - 1 ? i + W : i] - phi[y > 0 ? i - W : i];\n      const nx = -2.4 * (bl[x \u003c W - 1 ? i + 1 : i] - bl[x > 0 ? i - 1 : i]), ny = -2.4 * (bl[y \u003c H - 1 ? i + W : i] - bl[y > 0 ? i - W : i]);\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1), c1 = max(0, (nx * HX + ny * HY + HZ) * nn), c4 = c1 * c1 * c1 * c1, c16 = c4 * c4 * c4 * c4;\n      // Oil: pale at a drop's rim and deep in its middle and in the layer,\n      // shaded as a dome, never below 80% so it does not go brown.\n      const dpt = sm(-0.2, 0.9, bl[i]), sh = max(0.8, 1 + 0.6 * ((nx * LX + ny * LY + LZ) * nn - LZ));\n      const r = wr + ((pale[0] + (deep[0] - pale[0]) * dpt) * sh - wr) * o;\n      const g = wg + ((pale[1] + (deep[1] - pale[1]) * dpt) * sh - wg) * o;\n      const b = wb + ((pale[2] + (deep[2] - pale[2]) * dpt) * sh - wb) * o;\n      // The rim catches the light from above, a dome its glint, and a long\n      // flat interface, the meniscus, shows as a bright line.\n      const q = 1 - p * p, rim = q * q, lit = cl(gy * 0.6 + gx * 0.25, 0, 1), flat = (gy * gy) / (gx * gx + gy * gy + 1e-6);\n      const men = rim * flat * flat * sm(0.45, 0.75, abs(ny / 2.4));\n      const bx = (x - band + 0.4 * (y - H / 2)) / 11, sheen = bx * bx \u003c 9 ? exp(-bx * bx) * (0.05 + 0.1 * o) : 0;\n      const hl = cl(0.1 * rim + 0.45 * rim * lit + 0.7 * c16 * c16 * o + 0.8 * men + sheen, 0, 1);\n      display.setPixel(x, y, (r + (1 - r) * hl) * shop * 255, (g + (1 - g) * hl) * shop * 255, (b + (1 - b) * hl) * shop * 255);\n    }\n  }\n}\n","layer":{"id":"layer-bi-phase","type":"code","name":"bi-phase","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bi-Phase\n// Family:  cosmetic\n// Idea:    The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after two-phase cleansers and phase-field separation of two liquids (Cahn-Hilliard, John W. Cahn and John E. Hilliard, 1958; Allen-Cahn, Samuel M. Allen and John W. Cahn, 1979)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1\n//\n// Knob 1: Hue. Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose.\n// Knob 2: Speed. How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long.\n// Knob 3: Oil. The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down.\n// Knob 4: Shake. How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles.\n// Buttons: K1 tap shakes the bottle now.\n\nconst W = 64, H = 128, N = W * H;\n// The flow is solved on a coarse grid of 4x4 LED cells.\nconst CW = 16, CH = 32, CN = CW * CH;\nconst { min, max, floor, sqrt, sin, cos, exp, log, tanh, abs, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// Allen-Cahn: phi_t = M (K lap phi + phi - phi^3) + lambda, phi = +1 oil and\n// -1 water, lambda the multiplier that holds the amount of oil to K3. The\n// interface is tanh(d / sqrt(2K)) across, about 2 LEDs, and moves at M K\n// times its curvature. h M (8K + 2) \u003c 2 keeps the step stable: 4 a frame at\n// Speed 2.\nconst KAP = 0.5, MOB = 1.5, HMAX = 0.21;\n// Gravity in the free energy, on the interfaces only: a rim higher up gains\n// oil from one lower down in the same patch.\nconst GRAV = 2.5;\n// Time units a second at Speed 1; a shake lasts TS of them, 1.1 s at Speed 2.\nconst RATE = 12, TS = 26;\n// The push of the oil, and the screening of the flat bottle's walls.\nconst BUOY = 0.5, AL2 = 0.16;\n// Drops under AMAX LEDs move as one piece; ROUND and DRIFT below.\nconst AMAX = 700, ROUND = 0.06, DRIFT = 0.08;\n\n// Sine transforms of the coarse grid (DST-II forward, DST-III back), and the\n// screened Stokes operator (lap - a^2)^2 psi = d(f_y)/dx of a flat cell,\n// diagonal in that basis, with free-slip walls.\nconst SX = new Float32Array(CW * CW), SY = new Float32Array(CH * CH), KI = new Float32Array(CN);\nfor (let m = 0; m \u003c CW; m++) for (let i = 0; i \u003c CW; i++) SX[m * CW + i] = sin((PI * (m + 1) * (i + 0.5)) / CW);\nfor (let n = 0; n \u003c CH; n++) for (let j = 0; j \u003c CH; j++) SY[n * CH + j] = sin((PI * (n + 1) * (j + 0.5)) / CH);\nfor (let n = 0; n \u003c CH; n++)\n  for (let m = 0; m \u003c CW; m++) {\n    const kx = 4 * sin((PI * (m + 1)) / (2 * CW)) ** 2, ky = 4 * sin((PI * (n + 1)) / (2 * CH)) ** 2;\n    KI[n * CW + m] = ((m === CW - 1 ? 1 : 2) * (n === CH - 1 ? 1 : 2)) / (CN * (kx + ky + AL2) ** 2);\n  }\n\nfunction hsv(h, s, v, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  (o[0] = c[0]), (o[1] = c[1]), (o[2] = c[2]);\n}\n\nexport function setup(params) {\n  params.s = null;\n}\n\nfunction init(k) {\n  const f = () => new Float32Array(N), g = () => new Float32Array(CN);\n  const P = {\n    phi: f(), nxt: f(), S: f(), tmp: f(), blur: f(), u: f(), v: f(), b1: f(), b2: f(),\n    lab: new Int32Array(N), stk: new Int32Array(N), cu: f(), cv: f(), ca: f(), px: f(), py: f(), rad: f(),\n    F: g(), A: g(), G: g(), psi: g(), U: g(), V: g(),\n    hue: k[0], speed: 2, oil: cl(k[2], 0.3, 0.6), shake: cl(k[3], 0, 1),\n    mT: 0, c: 0.85 * TS, time: 0, rt: 0, deep: [0, 0, 0], pale: [0, 0, 0],\n  };\n  // Open at the end of a shake, the new drops just formed.\n  P.mT = 2 * P.oil - 1;\n  shake(P);\n  P.phi.set(P.S);\n  for (let s = 0; s \u003c 8; s++) relax(P, HMAX);\n  return P;\n}\n\n// A shake's emulsion: round drops of the lesser liquid dropped at random until\n// they make up its share, radius 2.2 to 5 LEDs after a gentle shake and 1.5\n// to 2.4 after a hard one, small ones the most common. Most land a LED clear\n// of the others; one in twenty may touch.\nfunction shake(P) {\n  const S = P.S, inv = P.mT > 0, f = inv ? (1 - P.mT) / 2 : (1 + P.mT) / 2;\n  const r0 = 2.2 - 0.7 * P.shake, r1 = 5 - 2.6 * P.shake;\n  S.fill(-1);\n  let area = 0;\n  for (let k = 0; k \u003c 5000 && area \u003c f * N; k++) {\n    const r = r0 * (r1 / r0) ** (random() ** 1.6), cx = random() * W, cy = random() * H;\n    const xa = max(0, floor(cx - r - 2)), xb = min(W - 1, floor(cx + r + 2)), ya = max(0, floor(cy - r - 2)), yb = min(H - 1, floor(cy + r + 2));\n    if (k \u003c 4500 && random() \u003c 0.95) {\n      let hit = false;\n      const rr = (r + 1.2) * (r + 1.2);\n      for (let y = ya; y \u003c= yb && !hit; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const ex = x + 0.5 - cx, ey = y + 0.5 - cy;\n          if (ex * ex + ey * ey \u003c rr && S[y * W + x] > -0.9) hit = true;\n        }\n      if (hit) continue;\n    }\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const ex = x + 0.5 - cx, ey = y + 0.5 - cy, i = y * W + x, v = tanh((r - sqrt(ex * ex + ey * ey)) / 0.8);\n        if (v > S[i]) (area += (v - S[i]) / 2), (S[i] = v);\n      }\n  }\n  if (inv) for (let i = 0; i \u003c N; i++) S[i] = -S[i];\n}\n\n// Box blur of radius r, along x and then y, by running sums.\nfunction box(src, dst, tmp, r) {\n  const n = 2 * r + 1;\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = src[o] * (r + 1);\n    for (let x = 1; x \u003c= r; x++) s += src[o + x];\n    for (let x = 0; x \u003c W; x++) (tmp[o + x] = s / n), (s += src[o + min(x + r + 1, W - 1)] - src[o + max(x - r, 0)]);\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = tmp[x] * (r + 1);\n    for (let y = 1; y \u003c= r; y++) s += tmp[y * W + x];\n    for (let y = 0; y \u003c H; y++) (dst[y * W + x] = s / n), (s += tmp[min(y + r + 1, H - 1) * W + x] - tmp[max(y - r, 0) * W + x]);\n  }\n}\n\n// One Allen-Cahn step. The multiplier acts on the interfaces only, weighted\n// by g = (1 - phi^2)^2, and is worked out over each 11x11 patch rather than\n// the whole panel, so what a drop's rim loses to its curvature comes back on\n// the same rim: a drop pulls round without shrinking, oil cannot go into\n// solution in the water, and a drop only feeds a neighbour it nearly touches,\n// as with Cahn-Hilliard. What the patches miss goes back over all the rims.\nfunction relax(P, h) {\n  const phi = P.phi, r = P.nxt, g = P.b1, rb = P.b2, gb = P.blur, a = h * MOB;\n  for (let y = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0, gr = (GRAV * (H - 2 * y)) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], q = 1 - p * p, w = q * q;\n      const lap = phi[x > 0 ? i - 1 : i] + phi[x \u003c W - 1 ? i + 1 : i] + phi[i + up] + phi[i + dn] - 4 * p;\n      r[i] = a * (KAP * lap + p - p * p * p + gr * w);\n      g[i] = w;\n    }\n  }\n  box(r, rb, P.tmp, 5);\n  box(g, gb, P.tmp, 5);\n  let sum = 0, gs = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const q = (phi[i] += r[i] - (g[i] * rb[i]) / (gb[i] + 1e-9));\n    sum += q;\n    gs += g[i];\n  }\n  const d = (P.mT * N - sum) / (gs + 1e-6);\n  for (let i = 0; i \u003c N; i++) phi[i] += d * g[i];\n}\n\n// The flow. Oil is lighter, so each coarse cell pushes up by how much oil it\n// holds; screened Stokes flow carries the drops, big ones faster, and water\n// comes down round them. A shake adds a swirl of the two lowest modes.\nfunction flow(P, swirl, phase) {\n  const { phi, F, A, G, psi, U, V } = P;\n  F.fill(0);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[(y >> 2) * CW + (x >> 2)] += phi[y * W + x];\n  // The curl of the push, -B dF/dx, then along x, along y, scaled, and back.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) G[j * CW + i] = (-BUOY / 32) * (F[j * CW + min(i + 1, CW - 1)] - F[j * CW + max(i - 1, 0)]);\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let i = 0; i \u003c CW; i++) s += G[j * CW + i] * SX[m * CW + i];\n      A[j * CW + m] = s;\n    }\n  for (let n = 0; n \u003c CH; n++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let j = 0; j \u003c CH; j++) s += A[j * CW + m] * SY[n * CH + j];\n      G[n * CW + m] = s * KI[n * CW + m];\n    }\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let n = 0; n \u003c CH; n++) s += G[n * CW + m] * SY[n * CH + j];\n      A[j * CW + m] = s;\n    }\n  const c1 = cos(phase), s1 = sin(phase);\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      let s = 0;\n      for (let m = 0; m \u003c CW; m++) s += A[j * CW + m] * SX[m * CW + i];\n      const X = (PI * (i + 0.5)) / CW, Y = (PI * (j + 0.5)) / CH;\n      psi[j * CW + i] = s + swirl * (sin(X) * sin(2 * Y) * c1 + 0.8 * sin(2 * X) * sin(Y) * s1);\n    }\n  // u = dpsi/dy, v = -dpsi/dx, in LEDs per time unit; psi is 0 past the walls.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      const k = j * CW + i, p = psi[k];\n      U[k] = 2 * ((j \u003c CH - 1 ? psi[k + CW] : -p) - (j > 0 ? psi[k - CW] : -p));\n      V[k] = -2 * ((i \u003c CW - 1 ? psi[k + 1] : -p) - (i > 0 ? psi[k - 1] : -p));\n    }\n}\n\n// The flow at every LED. A drop of either liquid under AMAX LEDs moves as one\n// piece at the mean of the flow over it, as surface tension holds a small\n// drop together, and so do the two rings of LEDs round it, which it is about\n// to take the place of. On top of that each drop is drawn towards the circle\n// of its own area: every LED of it moves along the radius at ROUND times its\n// distance from that circle, which curvature alone would take seconds over\n// for a big drop. A drop on a side wall slides up it and is drawn to a half\n// circle standing on the wall. Every drop rises, or sinks if it is water, at\n// least DRIFT LEDs a time unit faster than the coarse flow says, so the last\n// small ones still get there. The layers and the liquid between the drops\n// follow the flow smoothed over 5 LEDs; during a shake the swirl takes over.\nfunction velocity(P, rigid) {\n  const { U, V, u, v, b1, b2, phi, lab, stk, cu, cv, ca, px, py, rad } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const gy = cl((y - 1.5) / 4, 0, CH - 1), j0 = gy | 0, fy = gy - j0, a = j0 * CW, b = min(j0 + 1, CH - 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const gx = cl((x - 1.5) / 4, 0, CW - 1), i0 = gx | 0, i1 = min(i0 + 1, CW - 1), fx = gx - i0, i = y * W + x;\n      u[i] = (U[a + i0] * (1 - fx) + U[a + i1] * fx) * (1 - fy) + (U[b + i0] * (1 - fx) + U[b + i1] * fx) * fy;\n      v[i] = (V[a + i0] * (1 - fx) + V[a + i1] * fx) * (1 - fy) + (V[b + i0] * (1 - fx) + V[b + i1] * fx) * fy;\n    }\n  }\n  box(u, b1, P.tmp, 2);\n  box(v, b2, P.tmp, 2);\n  if (rigid \u003c= 0) return u.set(b1), v.set(b2);\n  // Label the pieces of each liquid, 4-connected.\n  lab.fill(-1);\n  let nc = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (lab[s] >= 0) continue;\n    const ph = phi[s] > 0;\n    let top = 0, area = 0, su = 0, sv = 0, mx = 0, my = 0, wall = false;\n    stk[top++] = s;\n    lab[s] = nc;\n    while (top > 0) {\n      const i = stk[--top], x = i % W;\n      area++;\n      if (x === 0 || x === W - 1) wall = true;\n      (su += u[i]), (sv += v[i]), (mx += x), (my += (i - x) / W);\n      if (x > 0 && lab[i - 1] \u003c 0 && phi[i - 1] > 0 === ph) (lab[i - 1] = nc), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0 && phi[i + 1] > 0 === ph) (lab[i + 1] = nc), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0 && phi[i - W] > 0 === ph) (lab[i - W] = nc), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0 && phi[i + W] > 0 === ph) (lab[i + W] = nc), (stk[top++] = i + W);\n    }\n    (ca[nc] = area), (cu[nc] = wall ? 0 : su / area), (cv[nc] = sv / area + (ph ? -DRIFT : DRIFT));\n    (px[nc] = wall ? (mx / area \u003c W / 2 ? -0.5 : W - 0.5) : mx / area), (py[nc] = my / area);\n    rad[nc] = sqrt(((wall ? 2 : 1) * area) / PI);\n    nc++;\n  }\n  const put = (i, k) => {\n    const dx = (i % W) - px[k], dy = ((i / W) | 0) - py[k], w = ROUND * (rad[k] / (sqrt(dx * dx + dy * dy) + 0.5) - 1);\n    (u[i] = cu[k] + w * dx), (v[i] = cv[k] + w * dy), (lab[i] = k);\n  };\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    if (ca[lab[i]] \u003c AMAX) put(i, lab[i]), (stk[top++] = i);\n    else (u[i] = b1[i]), (v[i] = b2[i]), (lab[i] = -1);\n  }\n  // Two rings round each drop, nearest drop first.\n  for (let ring = 0, from = 0; ring \u003c 2; ring++) {\n    const end = top;\n    for (let t = from; t \u003c end; t++) {\n      const i = stk[t], x = i % W, k = lab[i];\n      if (x > 0 && lab[i - 1] \u003c 0) put(i - 1, k), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0) put(i + 1, k), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0) put(i - W, k), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0) put(i + W, k), (stk[top++] = i + W);\n    }\n    from = end;\n  }\n  if (rigid \u003c 1) for (let i = 0; i \u003c N; i++) (u[i] = b1[i] + (u[i] - b1[i]) * rigid), (v[i] = b2[i] + (v[i] - b2[i]) * rigid);\n}\n\n// Semi-Lagrangian advection of a field over T time units, from src into dst.\n// Past the top the bottle holds oil (top) and past the bottom water (bot), so\n// a drop leaving the floor does not draw a streak of itself up behind it.\nfunction advect(P, src, dst, T, top, bot) {\n  const { u, v } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, sx = cl(x - u[i] * T, 0, W - 1), sy = y - v[i] * T;\n      const x0 = sx | 0, x1 = min(x0 + 1, W - 1), ex = sx - x0, y0 = floor(sy), ey = sy - y0;\n      const a = y0 \u003c 0 ? top : y0 > H - 1 ? bot : src[y0 * W + x0] * (1 - ex) + src[y0 * W + x1] * ex;\n      const b = y0 \u003c -1 ? top : y0 > H - 2 ? bot : src[(y0 + 1) * W + x0] * (1 - ex) + src[(y0 + 1) * W + x1] * ex;\n      dst[i] = a * (1 - ey) + b * ey;\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.3, 0.06];\n  if (!params.s) params.s = init(k);\n  const P = params.s, d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.oil = cl(k[2], 0.3, 0.6);\n  P.shake = cl(k[3], 0, 1);\n  // The amount of oil follows K3 at a fifth of the bottle a second, so the\n  // layer grows or thins instead of the water clouding over.\n  P.mT += cl(2 * P.oil - 1 - P.mT, -0.4 * d, 0.4 * d);\n  const T = d * P.speed * RATE;\n  P.rt += d;\n  P.time += T;\n  P.c += T;\n  // A shake every 560 time units (23 s at Speed 2) at K4 0, down to 120 at 1.\n  if ((input.btnPressed && input.btnPressed[0] && P.c > TS) || P.c > 560 - 440 * sqrt(P.shake)) (P.c = 0), shake(P);\n  // The swirl winds the liquid round for the first two thirds of a shake, and\n  // as it dies the liquid breaks up into the new drops.\n  const shaking = P.c \u003c TS, u = P.c / TS, e = shaking ? sin(PI * min(1, u / 0.65)) ** 2 : 0;\n  flow(P, 10 * e, P.time * 0.3);\n  velocity(P, 1 - e);\n  // phi is carried as atanh(phi), which runs nearly straight through an\n  // interface, so the linear interpolation does not smear the drops' edges.\n  const phi = P.phi, q = P.nxt;\n  for (let i = 0; i \u003c N; i++) {\n    const p = cl(phi[i], -0.99999, 0.99999);\n    q[i] = 0.5 * log((1 + p) / (1 - p));\n  }\n  advect(P, q, phi, T, 6, -6);\n  for (let i = 0; i \u003c N; i++) phi[i] = 1 - 2 / (exp(2 * phi[i]) + 1);\n  if (shaking) {\n    const w = 1 - exp(-0.5 * sm(0.4, 0.8, u) * T), S = P.S;\n    for (let i = 0; i \u003c N; i++) phi[i] += w * (S[i] - phi[i]);\n  }\n  const steps = Math.ceil(T / HMAX - 1e-6);\n  for (let s = 0; s \u003c steps; s++) relax(P, T / steps);\n  // A drop shrunk to one LED inside the other liquid cannot go anywhere under\n  // the local multiplier and would stay as a dimple: fill it in.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i];\n      if (p > 0.97 || p \u003c -0.97) continue;\n      const a = phi[x > 0 ? i - 1 : i + 1], b = phi[x \u003c W - 1 ? i + 1 : i - 1], c = phi[y > 0 ? i - W : i + W], e = phi[y \u003c H - 1 ? i + W : i - W];\n      const lo = min(a, b, c, e), hi = max(a, b, c, e);\n      if ((lo > 0.5 && p \u003c lo - 0.1) || (hi \u003c -0.5 && p > hi + 0.1)) phi[i] = (a + b + c + e) / 4;\n    }\n}\n\n// Light from the upper left and in front, and the half vector for the glint.\nconst LX = -0.42, LY = -0.56, LZ = 0.71, HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const phi = P.phi, bl = P.blur, deep = P.deep, pale = P.pale;\n  // phi blurred over 5x5 is read as the height of the oil: a drop is a dome\n  // and the layer a plateau, lit from the upper left.\n  box(phi, bl, P.tmp, 2);\n  hsv(P.hue + 0.07, 0.62, 1, deep);\n  hsv(P.hue + 0.07, 0.26, 1, pale);\n  // A soft band of shop light drifts across the glass every 14 s.\n  const band = W / 2 + 46 * sin((2 * PI * P.rt) / 14);\n  for (let y = 0; y \u003c H; y++) {\n    const shop = 0.86 + 0.14 * (1 - y / H);\n    // Water: a pale cool white, a shade bluer low down.\n    const wr = 0.76 - 0.06 * (y / H), wg = 0.82 - 0.03 * (y / H), wb = 0.93;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], o = sm(-0.6, 0.6, p);\n      const gx = phi[x \u003c W - 1 ? i + 1 : i] - phi[x > 0 ? i - 1 : i], gy = phi[y \u003c H - 1 ? i + W : i] - phi[y > 0 ? i - W : i];\n      const nx = -2.4 * (bl[x \u003c W - 1 ? i + 1 : i] - bl[x > 0 ? i - 1 : i]), ny = -2.4 * (bl[y \u003c H - 1 ? i + W : i] - bl[y > 0 ? i - W : i]);\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1), c1 = max(0, (nx * HX + ny * HY + HZ) * nn), c4 = c1 * c1 * c1 * c1, c16 = c4 * c4 * c4 * c4;\n      // Oil: pale at a drop's rim and deep in its middle and in the layer,\n      // shaded as a dome, never below 80% so it does not go brown.\n      const dpt = sm(-0.2, 0.9, bl[i]), sh = max(0.8, 1 + 0.6 * ((nx * LX + ny * LY + LZ) * nn - LZ));\n      const r = wr + ((pale[0] + (deep[0] - pale[0]) * dpt) * sh - wr) * o;\n      const g = wg + ((pale[1] + (deep[1] - pale[1]) * dpt) * sh - wg) * o;\n      const b = wb + ((pale[2] + (deep[2] - pale[2]) * dpt) * sh - wb) * o;\n      // The rim catches the light from above, a dome its glint, and a long\n      // flat interface, the meniscus, shows as a bright line.\n      const q = 1 - p * p, rim = q * q, lit = cl(gy * 0.6 + gx * 0.25, 0, 1), flat = (gy * gy) / (gx * gx + gy * gy + 1e-6);\n      const men = rim * flat * flat * sm(0.45, 0.75, abs(ny / 2.4));\n      const bx = (x - band + 0.4 * (y - H / 2)) / 11, sheen = bx * bx \u003c 9 ? exp(-bx * bx) * (0.05 + 0.1 * o) : 0;\n      const hl = cl(0.1 * rim + 0.45 * rim * lit + 0.7 * c16 * c16 * o + 0.8 * men + sheen, 0, 1);\n      display.setPixel(x, y, (r + (1 - r) * hl) * shop * 255, (g + (1 - g) * hl) * shop * 255, (b + (1 - b) * hl) * shop * 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long."},{"name":"Oil","min":0.3,"max":0.6,"about":"The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down."},{"name":"Shake","min":0,"max":1,"about":"How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles."}],"start":[0,2,0.3,0.06],"measures":{"motion":0.0579,"detail":0.0044,"edges":0.0095,"complexity":0.6088,"coverage":1,"colour":0.3088,"drift":0.0284},"knobResponse":[0.1292,0.1228,0.1399,0.1113]},{"slug":"big-type","title":"Big Type","family":"type","round":1,"note":"화면을 꽉 채운 낱말 하나가 자석을 댄 옛 텔레비전 화면처럼 휘어요.","idea":"One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-big-type","type":"code","name":"big-type","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the outline colour; the fill and the shadow follow it."},{"name":"Speed","min":0.2,"max":5,"about":"How fast the wave runs down the word and the bright scan bar rolls."},{"name":"Word","min":0,"max":6,"about":"Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB."},{"name":"Warp","min":0,"max":1,"about":"How hard the picture bends, from a slow sway to a set losing its hold."}],"start":[0,2,0,0.06],"measures":{"motion":0.4681,"detail":0.0954,"edges":0.9989,"complexity":0.0628,"coverage":0.2402,"colour":0.253,"drift":0.0745},"knobResponse":[0.0865,0.0522,0.1361,0.0808]},{"slug":"bismuth","title":"Bismuth","family":"mineral","round":18,"note":"녹은 비스무트 웅덩이에서 계단 진 네모 호퍼 결정이 가지를 치며 패널 꼭대기까지 자라요. 테라스마다 산화막이 은색에서 금색, 자홍, 파랑, 청록을 지나 두 번째 금색과 분홍으로 바뀌어서 색이 그 단이 생긴 때를 말해요. K1 을 누르면 웅덩이가 패널을 타고 올라 결정을 녹였다가 빠지고, 결정이 다시 자라요.","idea":"Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.","buttons":"K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.","code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-bismuth","type":"code","name":"bismuth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves."},{"name":"Steps","min":3,"max":8,"about":"How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows."},{"name":"Heat","min":0,"max":1,"about":"How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back."}],"start":[0,2,3,0.06],"measures":{"motion":0.0634,"detail":0.155,"edges":0.6769,"complexity":1.8463,"coverage":0.7656,"colour":0.3505,"drift":0.1056},"knobResponse":[0.1563,0.1868,0.0876,0.1811]},{"slug":"blooming-gel","title":"Blooming Gel","family":"cosmetic","round":36,"note":"젖은 블루밍 베이스에 코발트와 라일락, 흰 젤 방울이 하나씩 떨어져 가장자리가 해진 꽃처럼 번지고, 안료는 번지는 앞선으로 밀려 테두리가 짙어져요. 6.2초를 그리고 나면 경화 램프 띠가 위에서 아래로 지나며 무늬를 굳히고, 닦아 낸 새 베이스에서 다시 시작해요. K3 은 방울 크기와 번지는 거리를 정하고, K1 을 누르면 방울 하나가 바로 떨어져요.","idea":"Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.","buttons":"K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.","code":"// ===== Patternflow pattern =====\n// Title:   Blooming Gel\n// Family:  cosmetic\n// Idea:    Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after blooming gel nail art, with the drop's gel spreading by the porous medium equation and its Barenblatt fronts (G. I. Barenblatt, 1952) and its pigment run ahead to the front like a watercolour back-run\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1\n//\n// Knob 1: Hue. Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream.\n// Knob 2: Speed. The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Bloom. How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other.\n// Knob 4: Rim. How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring.\n// Buttons: K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, exp, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The gel lives on a coarse grid of CW x CH cells, 2 LEDs each; its\n// pigment on the LEDs themselves.\nconst CW = W / 2, CH = H / 2, CN = CW * CH;\n// Tiles of 8 x 8 LEDs: only the wet ones and their neighbours are worked.\nconst TS = 8, TW = W / TS, TH = H / TS;\n// Pigments: two tints and white.\nconst NK = 3;\n// The drop's gel spreads as w_t = div(D w grad w), the porous medium\n// equation, whose fronts move at a finite speed; D in LED^2 a second at\n// Speed 2. The gel soaks into the base, losing SOAK of itself a second, and\n// pigment moves only where the gel is thicker than WET.\nconst SOAK = 0.06, WET = 0.006;\n// One painting round in seconds of nail time: drops land until PAINT, the\n// cure lamp passes from CURE to HOLD, the design rests, and the wipe runs\n// from WIPE to ROUND.\nconst PAINT = 6.2, CURE = 6.5, HOLD = 7.9, WIPE = 9.1, ROUND = 10.3;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, bloom: 0, rim: 0.06, t: 0, next: 0, first: true, gmob: 1,\n    g: new Float32Array(CN), dg: new Float32Array(CN), Gx: new Float32Array(CN), Gy: new Float32Array(CN), set: 0, lamp: -99,\n    w: new Float32Array(N), wt: new Float32Array(N), Mx: new Float32Array(N), My: new Float32Array(N),\n    p: [new Float32Array(N), new Float32Array(N), new Float32Array(N)], dp: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    tile: new Uint8Array(TW * TH), act: new Uint8Array(TW * TH),\n    c: [0, 0, 0], col: [new Float32Array(3), new Float32Array(3)], base: [0, 0, 0],\n    lastKind: 0, lastX: 32, lastY: 64,\n  };\n  freshBase(S);\n  params.s = S;\n}\n\n// Smooth value noise on a grid of cells LEDs, in -1..1, for a w x h field.\nfunction noise(cells, w, h) {\n  const gw = Math.ceil(w / cells) + 2, gh = Math.ceil(h / cells) + 2, g = new Float32Array(gw * gh), out = new Float32Array(w * h);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  for (let y = 0; y \u003c h; y++)\n    for (let x = 0; x \u003c w; x++) {\n      const u = x / cells, v = y / cells, i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n      const su = fu * fu * (3 - 2 * fu), sv = fv * fv * (3 - 2 * fv);\n      const a = g[j * gw + i], b = g[j * gw + i + 1], c = g[(j + 1) * gw + i], d = g[(j + 1) * gw + i + 1];\n      out[y * w + x] = (a + (b - a) * su) * (1 - sv) + (c + (d - c) * su) * sv;\n    }\n  return out;\n}\n\n// A fresh blooming base: clear, and unevenly wet, which is what feathers\n// the blooms. The gel's mobility varies up to sixfold over 6 to 12 LEDs,\n// which bends the fronts into lobes; the pigment's more over 2 to 5 LEDs,\n// which mottles the colour inside a bloom.\nfunction freshBase(S) {\n  const a = noise(3, CW, CH), b = noise(1.5, CW, CH), m = new Float32Array(CN);\n  let mm = 0;\n  for (let i = 0; i \u003c CN; i++) mm = max(mm, (m[i] = exp(0.6 * a[i] + 0.3 * b[i])));\n  S.gmob = mm;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x;\n      S.Gx[i] = x \u003c CW - 1 ? 0.5 * (m[i] + m[i + 1]) : 0;\n      S.Gy[i] = y \u003c CH - 1 ? 0.5 * (m[i] + m[i + CW]) : 0;\n    }\n  const c = noise(2.5, W, H), d = noise(1.2, W, H), f = new Float32Array(N), e = noise(4, W, H);\n  // And how thick the gel must be before pigment can enter, which varies\n  // fourfold or more from LED to LED: that frays the edges.\n  for (let i = 0; i \u003c N; i++) S.wt[i] = WET * exp(1.2 * d[i] + 0.8 * e[i]);\n  for (let i = 0; i \u003c N; i++) f[i] = exp(0.9 * c[i] + 0.5 * d[i]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      S.Mx[i] = x \u003c W - 1 ? 0.5 * (f[i] + f[i + 1]) : 0;\n      S.My[i] = y \u003c H - 1 ? 0.5 * (f[i] + f[i + W]) : 0;\n    }\n  S.g.fill(0);\n  S.w.fill(0);\n  for (let k = 0; k \u003c NK; k++) S.p[k].fill(0);\n  S.set = 0;\n}\n\n// A drop of gel lands: a small dome of gel carrying one pigment.\n// Its outline is a little wavy, four to seven soft lobes.\nfunction drop(S, x0, y0, kind) {\n  const r = 6 + 3 * S.bloom, h0 = 0.5 + 0.25 * S.bloom, R = r * 1.25 + 1;\n  const lobes = 4 + floor(random() * 4), ph = random() * 2 * PI, amp = 0.1 + 0.1 * random();\n  const shape = (dx, dy) => (dx * dx + dy * dy) / (r * r * (1 + amp * sin(lobes * Math.atan2(dy, dx) + ph)) ** 2);\n  for (let y = max(0, floor((y0 - R) / 2)); y \u003c= min(CH - 1, (y0 + R) / 2); y++)\n    for (let x = max(0, floor((x0 - R) / 2)); x \u003c= min(CW - 1, (x0 + R) / 2); x++) {\n      const d2 = shape(2 * x + 1 - x0, 2 * y + 1 - y0);\n      if (d2 \u003c 1) S.g[y * CW + x] += h0 * (1 - d2);\n    }\n  const P = S.p[kind];\n  for (let y = max(0, floor(y0 - R)); y \u003c= min(H - 1, y0 + R); y++)\n    for (let x = max(0, floor(x0 - R)); x \u003c= min(W - 1, x0 + R); x++) {\n      const d2 = shape(x + 0.5 - x0, y + 0.5 - y0);\n      if (d2 \u003c 1) P[y * W + x] += 0.8 * h0 * (1 - d2);\n    }\n  S.lastKind = kind;\n  S.lastX = x0;\n  S.lastY = y0;\n}\n\n// The next drop: near the last one as often as not, so blooms meet, and\n// never the same pigment twice running.\nfunction nextDrop(S) {\n  let x, y;\n  if (random() \u003c 0.5) {\n    const a = random() * 2 * PI, d = 14 + random() * 14;\n    x = S.lastX + d * cos(a);\n    y = S.lastY + d * sin(a) * 1.4;\n  } else {\n    x = 8 + random() * (W - 16);\n    y = 8 + random() * (H - 16);\n  }\n  x = cl(x, 6, W - 6);\n  y = cl(y, 6, H - 6);\n  // After a tint, white one time in three; never white twice.\n  const kind = S.lastKind === 2 ? (random() \u003c 0.5 ? 0 : 1) : random() \u003c 0.67 ? 1 - S.lastKind : 2;\n  drop(S, x, y, kind);\n}\n\n// One explicit step of the gel on its coarse grid: finite volumes, the flux\n// across a face D w (w_j - w_i) / h^2 with w the mean of the two cells.\nfunction gelStep(S, dt, D) {\n  const { g, dg, Gx, Gy } = S, k = (D * dt) / 4;\n  dg.fill(0);\n  for (let y = Math.ceil(S.set / 2); y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x, gi = g[i];\n      if (x \u003c CW - 1) {\n        const gj = g[i + 1];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gx[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + 1] -= q;\n        }\n      }\n      if (y \u003c CH - 1) {\n        const gj = g[i + CW];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gy[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + CW] -= q;\n        }\n      }\n    }\n  const soak = exp(-SOAK * dt), dry = 0.004 * dt;\n  for (let i = 0; i \u003c CN; i++) {\n    const v = (g[i] + dg[i]) * soak - dry;\n    g[i] = v > 0 ? v : 0;\n  }\n}\n\n// The gel's thickness on the LEDs, bilinear from the coarse grid, and which\n// tiles have any.\nfunction upsample(S) {\n  const { g, w, tile } = S;\n  tile.fill(0);\n  for (let y = 0; y \u003c H; y++) {\n    const v = cl(y / 2 - 0.25, 0, CH - 1.0001), j = v | 0, fy = v - j;\n    for (let x = 0; x \u003c W; x++) {\n      const u = cl(x / 2 - 0.25, 0, CW - 1.0001), i = u | 0, fx = u - i, q = j * CW + i;\n      const val = (g[q] * (1 - fx) + g[q + 1] * fx) * (1 - fy) + (g[q + CW] * (1 - fx) + g[q + CW + 1] * fx) * fy;\n      w[y * W + x] = val;\n      if (val > WET) tile[((y / TS) | 0) * TW + ((x / TS) | 0)] = 1;\n    }\n  }\n}\n\n// One explicit step of the pigment over the wet tiles. In the body of a\n// bloom it goes with the gel, at the gel's mean velocity -D grad w; where the\n// gel thins toward its front it rides the surface, up to beta = 3.5 + 5.5 Rim\n// times as fast, so it runs ahead to the front and piles up there, since it\n// can only go where there is gel. Within the gel it spreads a little.\nfunction pigmentStep(S, dt, D, beta) {\n  const { w, wt, Mx, My, p, dp, tile, act } = S;\n  act.fill(0);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0; tx \u003c TW; tx++)\n      if (tile[ty * TW + tx])\n        for (let j = max(0, ty - 1); j \u003c= min(TH - 1, ty + 1); j++) for (let i = max(0, tx - 1); i \u003c= min(TW - 1, tx + 1); i++) act[j * TW + i] = 1;\n  const p0 = p[0], p1 = p[1], p2 = p[2], d0 = dp[0], d1 = dp[1], d2 = dp[2];\n  const kap = 1.2 * dt, edge = 0.03 + 0.05 * S.rim;\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++) {\n      const r = y * W;\n      d0.fill(0, r + x0, r + x0 + TS);\n      d1.fill(0, r + x0, r + x0 + TS);\n      d2.fill(0, r + x0, r + x0 + TS);\n    }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = max(y0, Math.ceil(S.set)); y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x, wi = w[i];\n        for (let f = 0; f \u003c 2; f++) {\n          if (f === 0 ? x === W - 1 : y === H - 1) continue;\n          const j = f === 0 ? i + 1 : i + W, wj = w[j];\n          if (wi \u003c WET && wj \u003c WET) continue;\n          if (p0[i] + p1[i] + p2[i] + p0[j] + p1[j] + p2[j] \u003c 1e-4) continue;\n          const m = f === 0 ? Mx[i] : My[i];\n          // Upwind: the pigment of the LED the gel leaves. The surface's lead\n          // fades in below a gel thickness of about edge.\n          const wf = 0.5 * (wi + wj);\n          let v = -dt * D * (1 + (beta - 1) * (edge / (wf + edge))) * m * (wj - wi);\n          v = v > 0.2 ? 0.2 : v \u003c -0.2 ? -0.2 : v;\n          let a0 = 0, a1 = 0, a2 = 0;\n          if (v > 0 && wj > wt[j]) (a0 = v * p0[i]), (a1 = v * p1[i]), (a2 = v * p2[i]);\n          else if (v \u003c 0 && wi > wt[i]) (a0 = v * p0[j]), (a1 = v * p1[j]), (a2 = v * p2[j]);\n          if (wi > wt[i] && wj > wt[j]) {\n            const k = kap * m \u003c 0.04 ? kap * m : 0.04;\n            a0 -= k * (p0[j] - p0[i]);\n            a1 -= k * (p1[j] - p1[i]);\n            a2 -= k * (p2[j] - p2[i]);\n          }\n          d0[i] -= a0;\n          d0[j] += a0;\n          d1[i] -= a1;\n          d1[j] += a1;\n          d2[i] -= a2;\n          d2[j] += a2;\n        }\n      }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x;\n        p0[i] += d0[i];\n        p1[i] += d1[i];\n        p2[i] += d2[i];\n      }\n  }\n}\n\nfunction advance(S, dt) {\n  const t0 = S.t % ROUND;\n  S.t += dt;\n  const t1 = S.t % ROUND;\n  const D = 150 + 150 * S.bloom, beta = 3.5 + 5.5 * S.rim;\n  if (t1 \u003c t0) {\n    freshBase(S);\n    S.next = 0.2;\n  }\n  // Drops while painting.\n  if (t1 \u003c PAINT) {\n    S.next -= dt;\n    if (S.next \u003c= 0) {\n      S.next = 0.35 + 0.45 * random();\n      nextDrop(S);\n    }\n  }\n  // The cure lamp passes down the panel and sets each row it has passed: the\n  // gel and its pigment stop moving there.\n  S.lamp = t1 >= CURE && t1 \u003c HOLD + 0.2 ? ((t1 - CURE) / (HOLD - CURE)) * (H + 20) - 10 : -99;\n  if (S.lamp > -99) S.set = max(S.set, cl(S.lamp, 0, H));\n  // The wipe pushes the colour down ahead of it and lifts it off.\n  if (t1 >= WIPE) {\n    const row = ((t1 - WIPE) / (ROUND - WIPE)) * (H + 24) - 12;\n    for (let y = H - 1; y >= 0; y--) {\n      const f = cl((row - y) / 10, 0, 1);\n      if (f \u003c= 0) continue;\n      for (let k = 0; k \u003c NK; k++) {\n        const P = S.p[k];\n        for (let x = 0; x \u003c W; x++) {\n          const i = y * W + x, v = P[i] * f * 0.3;\n          P[i] -= v + 0.25 * f * P[i];\n          if (y \u003c H - 1) P[i + W] += v;\n        }\n      }\n    }\n  }\n  // The gel in explicit steps short enough to hold steady, at most twelve\n  // a frame: for the moment a fresh drop is thickest, nail time runs a\n  // little slow rather than the sums running away.\n  let gm = 0;\n  for (let i = 0; i \u003c CN; i++) if (S.g[i] > gm) gm = S.g[i];\n  if (gm \u003c= 0) {\n    S.w.fill(0);\n    return;\n  }\n  const lim = 0.8 / (D * S.gmob * gm), n = min(12, Math.ceil(dt / lim)), h = min(dt / n, lim);\n  for (let s = 0; s \u003c n; s++) gelStep(S, h, D);\n  upsample(S);\n  // The pigment in one or two steps. No face passes on more than 0.24 of a\n  // LED's pigment in one, so even a LED emptying through all four faces\n  // keeps a little and none goes below zero.\n  const m = dt > 0.04 ? 2 : 1;\n  for (let s = 0; s \u003c m; s++) pigmentStep(S, (n * h) / m, D, beta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bloom = cl(k[2], 0, 1);\n  S.rim = cl(k[3], 0, 1);\n  if (S.first) {\n    // Open with three drops already landing, spread down the panel.\n    for (let n = 0; n \u003c 3; n++) drop(S, 18 + 28 * random(), 22 + 40 * n + 12 * random(), n);\n    S.first = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Once the lamp has started, a new drop needs a fresh base first.\n    if (S.t % ROUND >= CURE) {\n      S.t = (floor(S.t / ROUND) + 1) * ROUND;\n      freshBase(S);\n      S.next = 0.6;\n    }\n    nextDrop(S);\n  }\n  advance(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { w, p, col, base, c } = S;\n  // Colours: a milky base, two tints round the hue, white. Each tint is a\n  // pigment that takes light away as exp(-a p) (Beer-Lambert), its strength\n  // a set so a full drop shows the tint.\n  // From orange to lime a pale base reads khaki, so there it is paler still.\n  const h = S.hue + 0.66, hb = h + 0.04 - floor(h + 0.04), warm = sm(0.02, 0.07, hb) * (1 - sm(0.3, 0.38, hb));\n  hsv(h + 0.04, 0.2 - 0.08 * warm, 0.85 + 0.08 * warm, base);\n  // The tints: a deep one on the hue and a lighter one 0.1 round from it.\n  // Round orange and yellow both are lifted to near full, so a thick rim\n  // deepens toward red or orange instead of going brown or olive.\n  for (let k = 0; k \u003c 2; k++) {\n    const ht = h + 0.1 * k, hk = ht - floor(ht), wk = sm(0.0, 0.05, hk) * (1 - sm(0.28, 0.36, hk));\n    hsv(ht, k ? 0.7 : 0.88, (k ? 0.76 : 0.58) + (k ? 0.18 : 0.34) * wk, c);\n    for (let ch = 0; ch \u003c 3; ch++) col[k][ch] = max(0, -Math.log(max(c[ch], 0.03) / base[ch]) / 0.15);\n  }\n  const p0 = p[0], p1 = p[1], p2 = p[2], lb = S.lamp > -99 ? 1 : 0, sh = ((S.t % ROUND) - CURE) * 40 - 30;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, a = p0[i], b = p1[i], wh = 1 - exp(-8 * p2[i]);\n      let r = base[0] * exp(-col[0][0] * a - col[1][0] * b);\n      let g = base[1] * exp(-col[0][1] * a - col[1][1] * b);\n      let bl = base[2] * exp(-col[0][2] * a - col[1][2] * b);\n      r += (0.97 - r) * wh;\n      g += (0.97 - g) * wh;\n      bl += (0.97 - bl) * wh;\n      // Wet gel shines: a highlight from the slope of its surface.\n      const wi = w[i];\n      if (wi > 0) {\n        const gx = (x \u003c W - 1 ? w[i + 1] : wi) - (x > 0 ? w[i - 1] : wi), gy = (y \u003c H - 1 ? w[i + W] : wi) - (y > 0 ? w[i - W] : wi);\n        const nx = -gx * 14, ny = -gy * 14, nn = 1 / sqrt(1 + nx * nx + ny * ny);\n        const sp = (nx * -0.3 + ny * -0.45 + 0.84) * nn, s4 = sp * sp, s8 = s4 * s4, s16 = s8 * s8;\n        const gl = 0.45 * s16 * min(1, wi * 12);\n        r += gl;\n        g += gl;\n        bl += gl;\n      }\n      // The cure lamp's band, and the set coat's sheen behind it.\n      if (lb > 0) {\n        const q = (y - S.lamp) / 4, b2 = exp(-q * q) * lb;\n        r += 0.42 * b2;\n        g += 0.36 * b2;\n        bl += 0.5 * b2;\n      }\n      if (y \u003c S.set) {\n        const q = (x * 0.5 + y - sh) / 9, b3 = 0.1 * exp(-q * q);\n        r += b3;\n        g += b3;\n        bl += b3;\n      }\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","layer":{"id":"layer-blooming-gel","type":"code","name":"blooming-gel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Blooming Gel\n// Family:  cosmetic\n// Idea:    Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after blooming gel nail art, with the drop's gel spreading by the porous medium equation and its Barenblatt fronts (G. I. Barenblatt, 1952) and its pigment run ahead to the front like a watercolour back-run\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1\n//\n// Knob 1: Hue. Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream.\n// Knob 2: Speed. The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Bloom. How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other.\n// Knob 4: Rim. How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring.\n// Buttons: K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, exp, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The gel lives on a coarse grid of CW x CH cells, 2 LEDs each; its\n// pigment on the LEDs themselves.\nconst CW = W / 2, CH = H / 2, CN = CW * CH;\n// Tiles of 8 x 8 LEDs: only the wet ones and their neighbours are worked.\nconst TS = 8, TW = W / TS, TH = H / TS;\n// Pigments: two tints and white.\nconst NK = 3;\n// The drop's gel spreads as w_t = div(D w grad w), the porous medium\n// equation, whose fronts move at a finite speed; D in LED^2 a second at\n// Speed 2. The gel soaks into the base, losing SOAK of itself a second, and\n// pigment moves only where the gel is thicker than WET.\nconst SOAK = 0.06, WET = 0.006;\n// One painting round in seconds of nail time: drops land until PAINT, the\n// cure lamp passes from CURE to HOLD, the design rests, and the wipe runs\n// from WIPE to ROUND.\nconst PAINT = 6.2, CURE = 6.5, HOLD = 7.9, WIPE = 9.1, ROUND = 10.3;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, bloom: 0, rim: 0.06, t: 0, next: 0, first: true, gmob: 1,\n    g: new Float32Array(CN), dg: new Float32Array(CN), Gx: new Float32Array(CN), Gy: new Float32Array(CN), set: 0, lamp: -99,\n    w: new Float32Array(N), wt: new Float32Array(N), Mx: new Float32Array(N), My: new Float32Array(N),\n    p: [new Float32Array(N), new Float32Array(N), new Float32Array(N)], dp: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    tile: new Uint8Array(TW * TH), act: new Uint8Array(TW * TH),\n    c: [0, 0, 0], col: [new Float32Array(3), new Float32Array(3)], base: [0, 0, 0],\n    lastKind: 0, lastX: 32, lastY: 64,\n  };\n  freshBase(S);\n  params.s = S;\n}\n\n// Smooth value noise on a grid of cells LEDs, in -1..1, for a w x h field.\nfunction noise(cells, w, h) {\n  const gw = Math.ceil(w / cells) + 2, gh = Math.ceil(h / cells) + 2, g = new Float32Array(gw * gh), out = new Float32Array(w * h);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  for (let y = 0; y \u003c h; y++)\n    for (let x = 0; x \u003c w; x++) {\n      const u = x / cells, v = y / cells, i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n      const su = fu * fu * (3 - 2 * fu), sv = fv * fv * (3 - 2 * fv);\n      const a = g[j * gw + i], b = g[j * gw + i + 1], c = g[(j + 1) * gw + i], d = g[(j + 1) * gw + i + 1];\n      out[y * w + x] = (a + (b - a) * su) * (1 - sv) + (c + (d - c) * su) * sv;\n    }\n  return out;\n}\n\n// A fresh blooming base: clear, and unevenly wet, which is what feathers\n// the blooms. The gel's mobility varies up to sixfold over 6 to 12 LEDs,\n// which bends the fronts into lobes; the pigment's more over 2 to 5 LEDs,\n// which mottles the colour inside a bloom.\nfunction freshBase(S) {\n  const a = noise(3, CW, CH), b = noise(1.5, CW, CH), m = new Float32Array(CN);\n  let mm = 0;\n  for (let i = 0; i \u003c CN; i++) mm = max(mm, (m[i] = exp(0.6 * a[i] + 0.3 * b[i])));\n  S.gmob = mm;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x;\n      S.Gx[i] = x \u003c CW - 1 ? 0.5 * (m[i] + m[i + 1]) : 0;\n      S.Gy[i] = y \u003c CH - 1 ? 0.5 * (m[i] + m[i + CW]) : 0;\n    }\n  const c = noise(2.5, W, H), d = noise(1.2, W, H), f = new Float32Array(N), e = noise(4, W, H);\n  // And how thick the gel must be before pigment can enter, which varies\n  // fourfold or more from LED to LED: that frays the edges.\n  for (let i = 0; i \u003c N; i++) S.wt[i] = WET * exp(1.2 * d[i] + 0.8 * e[i]);\n  for (let i = 0; i \u003c N; i++) f[i] = exp(0.9 * c[i] + 0.5 * d[i]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      S.Mx[i] = x \u003c W - 1 ? 0.5 * (f[i] + f[i + 1]) : 0;\n      S.My[i] = y \u003c H - 1 ? 0.5 * (f[i] + f[i + W]) : 0;\n    }\n  S.g.fill(0);\n  S.w.fill(0);\n  for (let k = 0; k \u003c NK; k++) S.p[k].fill(0);\n  S.set = 0;\n}\n\n// A drop of gel lands: a small dome of gel carrying one pigment.\n// Its outline is a little wavy, four to seven soft lobes.\nfunction drop(S, x0, y0, kind) {\n  const r = 6 + 3 * S.bloom, h0 = 0.5 + 0.25 * S.bloom, R = r * 1.25 + 1;\n  const lobes = 4 + floor(random() * 4), ph = random() * 2 * PI, amp = 0.1 + 0.1 * random();\n  const shape = (dx, dy) => (dx * dx + dy * dy) / (r * r * (1 + amp * sin(lobes * Math.atan2(dy, dx) + ph)) ** 2);\n  for (let y = max(0, floor((y0 - R) / 2)); y \u003c= min(CH - 1, (y0 + R) / 2); y++)\n    for (let x = max(0, floor((x0 - R) / 2)); x \u003c= min(CW - 1, (x0 + R) / 2); x++) {\n      const d2 = shape(2 * x + 1 - x0, 2 * y + 1 - y0);\n      if (d2 \u003c 1) S.g[y * CW + x] += h0 * (1 - d2);\n    }\n  const P = S.p[kind];\n  for (let y = max(0, floor(y0 - R)); y \u003c= min(H - 1, y0 + R); y++)\n    for (let x = max(0, floor(x0 - R)); x \u003c= min(W - 1, x0 + R); x++) {\n      const d2 = shape(x + 0.5 - x0, y + 0.5 - y0);\n      if (d2 \u003c 1) P[y * W + x] += 0.8 * h0 * (1 - d2);\n    }\n  S.lastKind = kind;\n  S.lastX = x0;\n  S.lastY = y0;\n}\n\n// The next drop: near the last one as often as not, so blooms meet, and\n// never the same pigment twice running.\nfunction nextDrop(S) {\n  let x, y;\n  if (random() \u003c 0.5) {\n    const a = random() * 2 * PI, d = 14 + random() * 14;\n    x = S.lastX + d * cos(a);\n    y = S.lastY + d * sin(a) * 1.4;\n  } else {\n    x = 8 + random() * (W - 16);\n    y = 8 + random() * (H - 16);\n  }\n  x = cl(x, 6, W - 6);\n  y = cl(y, 6, H - 6);\n  // After a tint, white one time in three; never white twice.\n  const kind = S.lastKind === 2 ? (random() \u003c 0.5 ? 0 : 1) : random() \u003c 0.67 ? 1 - S.lastKind : 2;\n  drop(S, x, y, kind);\n}\n\n// One explicit step of the gel on its coarse grid: finite volumes, the flux\n// across a face D w (w_j - w_i) / h^2 with w the mean of the two cells.\nfunction gelStep(S, dt, D) {\n  const { g, dg, Gx, Gy } = S, k = (D * dt) / 4;\n  dg.fill(0);\n  for (let y = Math.ceil(S.set / 2); y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x, gi = g[i];\n      if (x \u003c CW - 1) {\n        const gj = g[i + 1];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gx[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + 1] -= q;\n        }\n      }\n      if (y \u003c CH - 1) {\n        const gj = g[i + CW];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gy[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + CW] -= q;\n        }\n      }\n    }\n  const soak = exp(-SOAK * dt), dry = 0.004 * dt;\n  for (let i = 0; i \u003c CN; i++) {\n    const v = (g[i] + dg[i]) * soak - dry;\n    g[i] = v > 0 ? v : 0;\n  }\n}\n\n// The gel's thickness on the LEDs, bilinear from the coarse grid, and which\n// tiles have any.\nfunction upsample(S) {\n  const { g, w, tile } = S;\n  tile.fill(0);\n  for (let y = 0; y \u003c H; y++) {\n    const v = cl(y / 2 - 0.25, 0, CH - 1.0001), j = v | 0, fy = v - j;\n    for (let x = 0; x \u003c W; x++) {\n      const u = cl(x / 2 - 0.25, 0, CW - 1.0001), i = u | 0, fx = u - i, q = j * CW + i;\n      const val = (g[q] * (1 - fx) + g[q + 1] * fx) * (1 - fy) + (g[q + CW] * (1 - fx) + g[q + CW + 1] * fx) * fy;\n      w[y * W + x] = val;\n      if (val > WET) tile[((y / TS) | 0) * TW + ((x / TS) | 0)] = 1;\n    }\n  }\n}\n\n// One explicit step of the pigment over the wet tiles. In the body of a\n// bloom it goes with the gel, at the gel's mean velocity -D grad w; where the\n// gel thins toward its front it rides the surface, up to beta = 3.5 + 5.5 Rim\n// times as fast, so it runs ahead to the front and piles up there, since it\n// can only go where there is gel. Within the gel it spreads a little.\nfunction pigmentStep(S, dt, D, beta) {\n  const { w, wt, Mx, My, p, dp, tile, act } = S;\n  act.fill(0);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0; tx \u003c TW; tx++)\n      if (tile[ty * TW + tx])\n        for (let j = max(0, ty - 1); j \u003c= min(TH - 1, ty + 1); j++) for (let i = max(0, tx - 1); i \u003c= min(TW - 1, tx + 1); i++) act[j * TW + i] = 1;\n  const p0 = p[0], p1 = p[1], p2 = p[2], d0 = dp[0], d1 = dp[1], d2 = dp[2];\n  const kap = 1.2 * dt, edge = 0.03 + 0.05 * S.rim;\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++) {\n      const r = y * W;\n      d0.fill(0, r + x0, r + x0 + TS);\n      d1.fill(0, r + x0, r + x0 + TS);\n      d2.fill(0, r + x0, r + x0 + TS);\n    }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = max(y0, Math.ceil(S.set)); y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x, wi = w[i];\n        for (let f = 0; f \u003c 2; f++) {\n          if (f === 0 ? x === W - 1 : y === H - 1) continue;\n          const j = f === 0 ? i + 1 : i + W, wj = w[j];\n          if (wi \u003c WET && wj \u003c WET) continue;\n          if (p0[i] + p1[i] + p2[i] + p0[j] + p1[j] + p2[j] \u003c 1e-4) continue;\n          const m = f === 0 ? Mx[i] : My[i];\n          // Upwind: the pigment of the LED the gel leaves. The surface's lead\n          // fades in below a gel thickness of about edge.\n          const wf = 0.5 * (wi + wj);\n          let v = -dt * D * (1 + (beta - 1) * (edge / (wf + edge))) * m * (wj - wi);\n          v = v > 0.2 ? 0.2 : v \u003c -0.2 ? -0.2 : v;\n          let a0 = 0, a1 = 0, a2 = 0;\n          if (v > 0 && wj > wt[j]) (a0 = v * p0[i]), (a1 = v * p1[i]), (a2 = v * p2[i]);\n          else if (v \u003c 0 && wi > wt[i]) (a0 = v * p0[j]), (a1 = v * p1[j]), (a2 = v * p2[j]);\n          if (wi > wt[i] && wj > wt[j]) {\n            const k = kap * m \u003c 0.04 ? kap * m : 0.04;\n            a0 -= k * (p0[j] - p0[i]);\n            a1 -= k * (p1[j] - p1[i]);\n            a2 -= k * (p2[j] - p2[i]);\n          }\n          d0[i] -= a0;\n          d0[j] += a0;\n          d1[i] -= a1;\n          d1[j] += a1;\n          d2[i] -= a2;\n          d2[j] += a2;\n        }\n      }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x;\n        p0[i] += d0[i];\n        p1[i] += d1[i];\n        p2[i] += d2[i];\n      }\n  }\n}\n\nfunction advance(S, dt) {\n  const t0 = S.t % ROUND;\n  S.t += dt;\n  const t1 = S.t % ROUND;\n  const D = 150 + 150 * S.bloom, beta = 3.5 + 5.5 * S.rim;\n  if (t1 \u003c t0) {\n    freshBase(S);\n    S.next = 0.2;\n  }\n  // Drops while painting.\n  if (t1 \u003c PAINT) {\n    S.next -= dt;\n    if (S.next \u003c= 0) {\n      S.next = 0.35 + 0.45 * random();\n      nextDrop(S);\n    }\n  }\n  // The cure lamp passes down the panel and sets each row it has passed: the\n  // gel and its pigment stop moving there.\n  S.lamp = t1 >= CURE && t1 \u003c HOLD + 0.2 ? ((t1 - CURE) / (HOLD - CURE)) * (H + 20) - 10 : -99;\n  if (S.lamp > -99) S.set = max(S.set, cl(S.lamp, 0, H));\n  // The wipe pushes the colour down ahead of it and lifts it off.\n  if (t1 >= WIPE) {\n    const row = ((t1 - WIPE) / (ROUND - WIPE)) * (H + 24) - 12;\n    for (let y = H - 1; y >= 0; y--) {\n      const f = cl((row - y) / 10, 0, 1);\n      if (f \u003c= 0) continue;\n      for (let k = 0; k \u003c NK; k++) {\n        const P = S.p[k];\n        for (let x = 0; x \u003c W; x++) {\n          const i = y * W + x, v = P[i] * f * 0.3;\n          P[i] -= v + 0.25 * f * P[i];\n          if (y \u003c H - 1) P[i + W] += v;\n        }\n      }\n    }\n  }\n  // The gel in explicit steps short enough to hold steady, at most twelve\n  // a frame: for the moment a fresh drop is thickest, nail time runs a\n  // little slow rather than the sums running away.\n  let gm = 0;\n  for (let i = 0; i \u003c CN; i++) if (S.g[i] > gm) gm = S.g[i];\n  if (gm \u003c= 0) {\n    S.w.fill(0);\n    return;\n  }\n  const lim = 0.8 / (D * S.gmob * gm), n = min(12, Math.ceil(dt / lim)), h = min(dt / n, lim);\n  for (let s = 0; s \u003c n; s++) gelStep(S, h, D);\n  upsample(S);\n  // The pigment in one or two steps. No face passes on more than 0.24 of a\n  // LED's pigment in one, so even a LED emptying through all four faces\n  // keeps a little and none goes below zero.\n  const m = dt > 0.04 ? 2 : 1;\n  for (let s = 0; s \u003c m; s++) pigmentStep(S, (n * h) / m, D, beta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bloom = cl(k[2], 0, 1);\n  S.rim = cl(k[3], 0, 1);\n  if (S.first) {\n    // Open with three drops already landing, spread down the panel.\n    for (let n = 0; n \u003c 3; n++) drop(S, 18 + 28 * random(), 22 + 40 * n + 12 * random(), n);\n    S.first = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Once the lamp has started, a new drop needs a fresh base first.\n    if (S.t % ROUND >= CURE) {\n      S.t = (floor(S.t / ROUND) + 1) * ROUND;\n      freshBase(S);\n      S.next = 0.6;\n    }\n    nextDrop(S);\n  }\n  advance(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { w, p, col, base, c } = S;\n  // Colours: a milky base, two tints round the hue, white. Each tint is a\n  // pigment that takes light away as exp(-a p) (Beer-Lambert), its strength\n  // a set so a full drop shows the tint.\n  // From orange to lime a pale base reads khaki, so there it is paler still.\n  const h = S.hue + 0.66, hb = h + 0.04 - floor(h + 0.04), warm = sm(0.02, 0.07, hb) * (1 - sm(0.3, 0.38, hb));\n  hsv(h + 0.04, 0.2 - 0.08 * warm, 0.85 + 0.08 * warm, base);\n  // The tints: a deep one on the hue and a lighter one 0.1 round from it.\n  // Round orange and yellow both are lifted to near full, so a thick rim\n  // deepens toward red or orange instead of going brown or olive.\n  for (let k = 0; k \u003c 2; k++) {\n    const ht = h + 0.1 * k, hk = ht - floor(ht), wk = sm(0.0, 0.05, hk) * (1 - sm(0.28, 0.36, hk));\n    hsv(ht, k ? 0.7 : 0.88, (k ? 0.76 : 0.58) + (k ? 0.18 : 0.34) * wk, c);\n    for (let ch = 0; ch \u003c 3; ch++) col[k][ch] = max(0, -Math.log(max(c[ch], 0.03) / base[ch]) / 0.15);\n  }\n  const p0 = p[0], p1 = p[1], p2 = p[2], lb = S.lamp > -99 ? 1 : 0, sh = ((S.t % ROUND) - CURE) * 40 - 30;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, a = p0[i], b = p1[i], wh = 1 - exp(-8 * p2[i]);\n      let r = base[0] * exp(-col[0][0] * a - col[1][0] * b);\n      let g = base[1] * exp(-col[0][1] * a - col[1][1] * b);\n      let bl = base[2] * exp(-col[0][2] * a - col[1][2] * b);\n      r += (0.97 - r) * wh;\n      g += (0.97 - g) * wh;\n      bl += (0.97 - bl) * wh;\n      // Wet gel shines: a highlight from the slope of its surface.\n      const wi = w[i];\n      if (wi > 0) {\n        const gx = (x \u003c W - 1 ? w[i + 1] : wi) - (x > 0 ? w[i - 1] : wi), gy = (y \u003c H - 1 ? w[i + W] : wi) - (y > 0 ? w[i - W] : wi);\n        const nx = -gx * 14, ny = -gy * 14, nn = 1 / sqrt(1 + nx * nx + ny * ny);\n        const sp = (nx * -0.3 + ny * -0.45 + 0.84) * nn, s4 = sp * sp, s8 = s4 * s4, s16 = s8 * s8;\n        const gl = 0.45 * s16 * min(1, wi * 12);\n        r += gl;\n        g += gl;\n        bl += gl;\n      }\n      // The cure lamp's band, and the set coat's sheen behind it.\n      if (lb > 0) {\n        const q = (y - S.lamp) / 4, b2 = exp(-q * q) * lb;\n        r += 0.42 * b2;\n        g += 0.36 * b2;\n        bl += 0.5 * b2;\n      }\n      if (y \u003c S.set) {\n        const q = (x * 0.5 + y - sh) / 9, b3 = 0.1 * exp(-q * q);\n        r += b3;\n        g += b3;\n        bl += b3;\n      }\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Bloom","min":0,"max":1,"about":"How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other."},{"name":"Rim","min":0,"max":1,"about":"How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring."}],"start":[0,2,0,0.06],"measures":{"motion":0.0712,"detail":0.0141,"edges":0.1484,"complexity":1.601,"coverage":1,"colour":0.1697,"drift":0.0438},"knobResponse":[0.2098,0.0709,0.1051,0.0332]},{"slug":"blotting-paper","title":"Blotting Paper","family":"cosmetic","round":39,"note":"결이 비치는 얇은 기름종이가 살에 눌린 자리마다 피지를 빨아들여, 반투명한 점이 결을 따라 √t 로 번지고 합쳐져요. 젖은 자리는 뒤 벽의 빛이 비쳐 밝고 짙은 색이 되고, LED 마다 한 번만 밝아져요. 종이가 거의 다 비치면 새 종이가 내려와 덮어요.","idea":"A thin tinted sheet of oil-blotting paper with its fibres showing hangs in front of a lit wall and, pressed to skin we never see, takes up oil where each pore touches it: translucent spots open with a deeper rim at their wet edge and widen with the square root of time, running a little ahead along the fibres and into one another, and wherever the paper has gone clear the wall shines through brighter and deeper in tint, until most of the sheet glows, holds, and a fresh sheet slides down over it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Blotting Paper\n// Family:  cosmetic\n// Idea:    A thin tinted sheet of oil-blotting paper with its fibres showing hangs in front of a lit wall and, pressed to skin we never see, takes up oil where each pore touches it: translucent spots open with a deeper rim at their wet edge and widen with the square root of time, running a little ahead along the fibres and into one another, and wherever the paper has gone clear the wall shines through brighter and deeper in tint, until most of the sheet glows, holds, and a fresh sheet slides down over it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after oil-blotting paper pressed to the skin, going translucent where the sebum wicks into its fibres (Lucas-Washburn wicking: Richard Lucas, 1918; Edward Washburn, 1921)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pores=20..80, Grain=0..1\n//\n// Knob 1: Hue. Turns the paper's tint round the whole wheel; the dry paper is a dim pale tint and the clear spots the same hue, deeper. At 0 rose, at 0.05 red, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale yellow, 0.3 lime, 0.4 green, 0.5 aqua, 0.6 sky blue, 0.7 blue, 0.8 violet, 0.9 orchid. From 0.02 to 0.34 the dry paper is lifted up to 1.5 times and paled toward grey and the spots a little paler, so red, orange and yellow paper never reads brown or olive.\n// Knob 2: Speed. At 2 the first pores touch 0.4 s after a sheet is pressed and the last about 6.5 s after; a tenth of the sheet is clear by 2.5 s, half by 6.7 s and nine tenths by 13 s, then it holds 2.5 s and a fresh sheet slides down in 1.4 s, about 16 s a sheet. At 0.2 the wicking is ten times slower, at 3 one and a half times faster; the slide always takes 1.4 s.\n// Knob 3: Pores. How many pores touch the sheet, each later one where the paper is still dry: 20 at the start, whose widest spots reach about 45 LEDs across before they meet, up to 80 at the top, about 24 across. Each spot's radius goes as the square root of its age, and the more pores, the slower each one spreads, so the sheet clears in about the same time.\n// Knob 4: Grain. How far the fibres line up along the panel. Up to 0.06 they lie every which way and the spots stay round; at 1 nearly all run up and down, nearly twice as long, and the oil runs along them two and a half times as fast as across, so the spots stretch into tall ovals and the clear patches join in columns.\n\nconst W = 64, H = 128, N = W * H;\n// Opening tint: rose.\nconst H0 = 0.94;\n// Fibres in a sheet, the width of the wicking front in LEDs, and how far the\n// oil runs ahead along a fibre.\nconst NF = 440, FRONT = 2.6, AHEAD = 1.8;\n// Brightness of the dry and the clear paper over the wall, 0..1.\nconst DRY = 0.24, CLEAR = 1;\n// Sheet seconds at Speed 2: the hold, once 90% of the sheet is clear, and the\n// slide of the next sheet in real seconds.\nconst HOLD = 2.5, SLIDE = 1.4;\n// Sheet seconds for the paper behind the front to soak to its clearest.\nconst SOAK = 2.5;\n// Spreading rate: the area all the spots open together, in LEDs a second.\nconst RATE = 1290, LATE = 6.5;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// A sheet: its fibres, its paper grain and the slow cockle that makes each\n// spot a little uneven. The fibres come from their own generator, so the\n// grain knob changes the fibres and never where the pores touch.\nfunction sheet(seed, grain) {\n  const F = new Float32Array(N), g = new Float32Array(N), r = rng(seed);\n  const spread = 1 - 0.9 * grain;\n  for (let f = 0; f \u003c NF; f++) {\n    const cx = r() * (W + 8) - 4, cy = r() * (H + 8) - 4, len = (4 + 11 * r()) * (1 + 0.8 * grain), a = PI / 2 + spread * (r() - 0.5) * PI, w = 0.35 + 0.65 * r();\n    const dx = cos(a), dy = sin(a), n = Math.ceil(len / 0.5);\n    for (let j = 0; j \u003c= n; j++) {\n      const s = (j / n - 0.5) * len, x = cx + dx * s, y = cy + dy * s, i = floor(x), k = floor(y), fx = x - i, fy = y - k;\n      for (let b = 0; b \u003c 2; b++)\n        for (let c = 0; c \u003c 2; c++) {\n          const xx = i + c, yy = k + b;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          F[yy * W + xx] += 0.5 * w * (c ? fx : 1 - fx) * (b ? fy : 1 - fy);\n        }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    F[p] = min(1, F[p]);\n    g[p] = r() * 2 - 1;\n  }\n  // The cockle roughens the spots' edges; the flocs, clumps of fibres a few\n  // LEDs across, cloud the paper where it has gone clear.\n  const nz = noise(r, 7, 1), fl = noise(r, 9, 0.5);\n  return { F, g, nz, fl, seed };\n}\n\n// Smooth value noise, -1..1, on a grid of cells `cell` LEDs wide, with a\n// second octave of half the size at weight w2.\nfunction noise(r, cell, w2) {\n  const out = new Float32Array(N);\n  for (const [c, w] of [[cell, 1], [cell / 2, w2]]) {\n    const gw = Math.ceil(W / c) + 2, gh = Math.ceil(H / c) + 2, G = new Float32Array(gw * gh);\n    for (let i = 0; i \u003c G.length; i++) G[i] = r() * 2 - 1;\n    for (let y = 0; y \u003c H; y++) {\n      const v = y / c, j = floor(v), fy = (v - j) * (v - j) * (3 - 2 * (v - j));\n      for (let x = 0; x \u003c W; x++) {\n        const u = x / c, i = floor(u), fx = (u - i) * (u - i) * (3 - 2 * (u - i)), a = G[j * gw + i], b = G[j * gw + i + 1], e = G[(j + 1) * gw + i], d = G[(j + 1) * gw + i + 1];\n        out[y * W + x] += (w * (a + (b - a) * fx + (e + (d - e) * fx - a - (b - a) * fx) * fy)) / (1 + w2);\n      }\n    }\n  }\n  return out;\n}\n\n// Where the pores touch: each the best of four tries at standing clear of\n// the ones before it, so the first n are spread out for any n.\nfunction pores(seed) {\n  const r = rng(seed ^ 0x5bd1e995), out = [];\n  for (let i = 0; i \u003c 80; i++) {\n    let best = null, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      const x = r() * (W + 6) - 3, y = r() * (H + 6) - 3;\n      let d = 1e9;\n      for (const o of out) d = min(d, (o.x - x) ** 2 + (o.y - y) ** 2);\n      if (d > bd) {\n        bd = d;\n        best = { x, y };\n      }\n    }\n    // How fast it wicks, and a share of the time it touches.\n    best.k = 0.75 + 0.5 * r();\n    best.r = 0.85 + 0.3 * r();\n    out.push(best);\n  }\n  return out;\n}\n\n// For every LED, the pore whose oil reaches it first: when that spot opened,\n// how fast it spreads and how far the LED is from it. Lucas-Washburn: a spot's\n// radius is k sqrt(t - t0), so the oil reaches distance d at t0 + (d / k)^2.\n// Distance is stretched across the grain, cut short along the fibres and\n// roughened by the cockle.\nfunction wick(S) {\n  const { F, nz } = S.cur, P = S.pores.slice(0, S.n), al = sqrt(1 + 1.5 * S.grain), T0 = S.T0, K = S.K, D = S.D;\n  // The first pores touch 0.4 s after the press and the rest follow over\n  // LATE seconds, each later one where the sheet is still dry.\n  P.forEach((o, i) => (o.t0 = 0.4 + LATE * (i / S.n) ** 1.4 * o.r));\n  // Each pore's k scaled so that n spots together open RATE LEDs a second.\n  let sk = 0;\n  for (const o of P) sk += o.k * o.k;\n  const kk = sqrt(RATE / (PI * sk)), arr = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, rough = 1 + 0.3 * nz[p], ahead = AHEAD * F[p];\n      let bt = 1e9, bi = 0, bd = 0;\n      for (let i = 0; i \u003c P.length; i++) {\n        const o = P[i], dx = (x - o.x) * al, dy = (y - o.y) / al;\n        const d = max(0, sqrt(dx * dx + dy * dy) * rough - ahead), k = o.k * kk, t = o.t0 + (d / k) * (d / k);\n        if (t \u003c bt) {\n          bt = t;\n          bi = i;\n          bd = d;\n        }\n      }\n      T0[p] = P[bi].t0;\n      K[p] = P[bi].k * kk;\n      D[p] = bd;\n      arr[p] = bt;\n    }\n  // The hold starts when nine tenths of the sheet has been reached.\n  arr.sort();\n  S.full = arr[floor(0.9 * N)];\n}\n\nfunction lay(S, seed) {\n  S.cur = sheet(seed, S.grain);\n  S.pores = pores(seed);\n  S.next = sheet(seed + 7919, S.grain);\n  wick(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 20, grain: 0.06, t: 0, phase: 0, slide: 0, seed: floor(Math.random() * 1e9), begun: false,\n    T0: new Float32Array(N), K: new Float32Array(N), D: new Float32Array(N), V: new Float32Array(N), C: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 20, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const n = round(cl(k[2], 20, 80)), grain = cl(k[3], 0, 1);\n  if (!S.begun) {\n    S.n = n;\n    S.grain = grain;\n    lay(S, S.seed);\n    S.begun = true;\n  } else if (abs(grain - S.grain) > 0.01) {\n    S.grain = grain;\n    S.n = n;\n    S.cur = sheet(S.cur.seed, grain);\n    S.next = sheet(S.cur.seed + 7919, grain);\n    wick(S);\n  } else if (n !== S.n) {\n    S.n = n;\n    wick(S);\n  }\n  if (S.phase === 0) {\n    S.t += (d * S.speed) / 2;\n    if (S.t > S.full + HOLD) S.phase = 1;\n  } else {\n    // A fresh sheet slides down over the old one.\n    S.slide += d / SLIDE;\n    if (S.slide >= 1) {\n      S.phase = 0;\n      S.slide = 0;\n      S.t = 0;\n      S.seed = (S.seed + 7919) >>> 0;\n      S.cur = S.next;\n      S.pores = pores(S.seed);\n      S.next = sheet(S.seed + 7919, S.grain);\n      wick(S);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { T0, K, D, V, C } = S, t = S.t, h = S.hue + H0, hh = h - floor(h);\n  const pure = [0, 0, 0];\n  {\n    const x = hh * 6, i = floor(x) % 6, f = x - floor(x);\n    pure[0] = [1, 1 - f, 0, 0, f, 1][i];\n    pure[1] = [f, 1, 1, 1 - f, 0, 0][i];\n    pure[2] = [0, 0, f, 1, 1, 1 - f][i];\n  }\n  // Orange and yellow paper goes brown when dim: there the dry paper is\n  // lifted and paled.\n  const warm = cl(1.6 - abs(hh - 0.12) / 0.1, 0, 1);\n  const dryV = DRY * (1 + 0.5 * warm), dryS = 0.2 - 0.15 * warm, clrS = 0.56 - 0.1 * warm;\n  // Each LED's brightness is its dry level until the oil reaches it and then\n  // rises once, smoothly, to its clear level; nothing else on the sheet moves.\n  const { F, g, fl } = S.cur;\n  for (let y = 0; y \u003c H; y++) {\n    const vy = (y - 63.5) / 92;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vx = (x - 31.5) / 46, wall = 0.84 + 0.16 * (1 - vx * vx - vy * vy);\n      const m = K[p] * sqrt(max(0, t - T0[p])) - D[p], age = t - T0[p] - (D[p] / K[p]) ** 2;\n      let s = cl(m / FRONT + 0.5, 0, 1);\n      s = s * s * (3 - 2 * s);\n      // Behind the front the paper keeps soaking up oil and clears further.\n      const soak = age > 0 ? 1 - exp(-age / SOAK) : 0;\n      const f = F[p], dry = dryV * wall * (1 + 0.5 * (f - 0.25) + 0.05 * g[p] + 0.06 * fl[p]), clr = CLEAR * wall * (1 - 0.17 * f + 0.03 * g[p] + 0.11 * fl[p]);\n      V[p] = dry + (clr - dry) * (0.68 * s + 0.32 * soak);\n      // The wet front carries a deeper rim of tint; it changes the colour,\n      // not the brightness.\n      C[p] = dryS + (clrS - dryS) * s + 1.2 * s * (1 - s);\n    }\n  }\n  const edge = S.phase === 1 ? round(H * (1 - (1 - S.slide) ** 3)) : -1, nf = S.next.F, ng = S.next.g, nl = S.next.fl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = V[p], c = C[p];\n      if (y \u003c edge) {\n        // The fresh sheet, dry, its fibres sliding down with it.\n        const q = (y - edge + H) * W + x, vx = (x - 31.5) / 46, vy = (y - 63.5) / 92;\n        v = dryV * (0.84 + 0.16 * (1 - vx * vx - vy * vy)) * (1 + 0.5 * (nf[q] - 0.25) + 0.05 * ng[q] + 0.06 * nl[q]);\n        c = dryS;\n        if (y === edge - 1) v *= 1.5;\n      } else if (edge >= 0 && y - edge \u003c 3) v *= 0.45 + 0.18 * (y - edge);\n      v = min(1, v);\n      display.setPixel(x, y, round(255 * v * (1 - c + c * pure[0])), round(255 * v * (1 - c + c * pure[1])), round(255 * v * (1 - c + c * pure[2])));\n    }\n}\n","layer":{"id":"layer-blotting-paper","type":"code","name":"blotting-paper","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Blotting Paper\n// Family:  cosmetic\n// Idea:    A thin tinted sheet of oil-blotting paper with its fibres showing hangs in front of a lit wall and, pressed to skin we never see, takes up oil where each pore touches it: translucent spots open with a deeper rim at their wet edge and widen with the square root of time, running a little ahead along the fibres and into one another, and wherever the paper has gone clear the wall shines through brighter and deeper in tint, until most of the sheet glows, holds, and a fresh sheet slides down over it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after oil-blotting paper pressed to the skin, going translucent where the sebum wicks into its fibres (Lucas-Washburn wicking: Richard Lucas, 1918; Edward Washburn, 1921)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pores=20..80, Grain=0..1\n//\n// Knob 1: Hue. Turns the paper's tint round the whole wheel; the dry paper is a dim pale tint and the clear spots the same hue, deeper. At 0 rose, at 0.05 red, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale yellow, 0.3 lime, 0.4 green, 0.5 aqua, 0.6 sky blue, 0.7 blue, 0.8 violet, 0.9 orchid. From 0.02 to 0.34 the dry paper is lifted up to 1.5 times and paled toward grey and the spots a little paler, so red, orange and yellow paper never reads brown or olive.\n// Knob 2: Speed. At 2 the first pores touch 0.4 s after a sheet is pressed and the last about 6.5 s after; a tenth of the sheet is clear by 2.5 s, half by 6.7 s and nine tenths by 13 s, then it holds 2.5 s and a fresh sheet slides down in 1.4 s, about 16 s a sheet. At 0.2 the wicking is ten times slower, at 3 one and a half times faster; the slide always takes 1.4 s.\n// Knob 3: Pores. How many pores touch the sheet, each later one where the paper is still dry: 20 at the start, whose widest spots reach about 45 LEDs across before they meet, up to 80 at the top, about 24 across. Each spot's radius goes as the square root of its age, and the more pores, the slower each one spreads, so the sheet clears in about the same time.\n// Knob 4: Grain. How far the fibres line up along the panel. Up to 0.06 they lie every which way and the spots stay round; at 1 nearly all run up and down, nearly twice as long, and the oil runs along them two and a half times as fast as across, so the spots stretch into tall ovals and the clear patches join in columns.\n\nconst W = 64, H = 128, N = W * H;\n// Opening tint: rose.\nconst H0 = 0.94;\n// Fibres in a sheet, the width of the wicking front in LEDs, and how far the\n// oil runs ahead along a fibre.\nconst NF = 440, FRONT = 2.6, AHEAD = 1.8;\n// Brightness of the dry and the clear paper over the wall, 0..1.\nconst DRY = 0.24, CLEAR = 1;\n// Sheet seconds at Speed 2: the hold, once 90% of the sheet is clear, and the\n// slide of the next sheet in real seconds.\nconst HOLD = 2.5, SLIDE = 1.4;\n// Sheet seconds for the paper behind the front to soak to its clearest.\nconst SOAK = 2.5;\n// Spreading rate: the area all the spots open together, in LEDs a second.\nconst RATE = 1290, LATE = 6.5;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// A sheet: its fibres, its paper grain and the slow cockle that makes each\n// spot a little uneven. The fibres come from their own generator, so the\n// grain knob changes the fibres and never where the pores touch.\nfunction sheet(seed, grain) {\n  const F = new Float32Array(N), g = new Float32Array(N), r = rng(seed);\n  const spread = 1 - 0.9 * grain;\n  for (let f = 0; f \u003c NF; f++) {\n    const cx = r() * (W + 8) - 4, cy = r() * (H + 8) - 4, len = (4 + 11 * r()) * (1 + 0.8 * grain), a = PI / 2 + spread * (r() - 0.5) * PI, w = 0.35 + 0.65 * r();\n    const dx = cos(a), dy = sin(a), n = Math.ceil(len / 0.5);\n    for (let j = 0; j \u003c= n; j++) {\n      const s = (j / n - 0.5) * len, x = cx + dx * s, y = cy + dy * s, i = floor(x), k = floor(y), fx = x - i, fy = y - k;\n      for (let b = 0; b \u003c 2; b++)\n        for (let c = 0; c \u003c 2; c++) {\n          const xx = i + c, yy = k + b;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          F[yy * W + xx] += 0.5 * w * (c ? fx : 1 - fx) * (b ? fy : 1 - fy);\n        }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    F[p] = min(1, F[p]);\n    g[p] = r() * 2 - 1;\n  }\n  // The cockle roughens the spots' edges; the flocs, clumps of fibres a few\n  // LEDs across, cloud the paper where it has gone clear.\n  const nz = noise(r, 7, 1), fl = noise(r, 9, 0.5);\n  return { F, g, nz, fl, seed };\n}\n\n// Smooth value noise, -1..1, on a grid of cells `cell` LEDs wide, with a\n// second octave of half the size at weight w2.\nfunction noise(r, cell, w2) {\n  const out = new Float32Array(N);\n  for (const [c, w] of [[cell, 1], [cell / 2, w2]]) {\n    const gw = Math.ceil(W / c) + 2, gh = Math.ceil(H / c) + 2, G = new Float32Array(gw * gh);\n    for (let i = 0; i \u003c G.length; i++) G[i] = r() * 2 - 1;\n    for (let y = 0; y \u003c H; y++) {\n      const v = y / c, j = floor(v), fy = (v - j) * (v - j) * (3 - 2 * (v - j));\n      for (let x = 0; x \u003c W; x++) {\n        const u = x / c, i = floor(u), fx = (u - i) * (u - i) * (3 - 2 * (u - i)), a = G[j * gw + i], b = G[j * gw + i + 1], e = G[(j + 1) * gw + i], d = G[(j + 1) * gw + i + 1];\n        out[y * W + x] += (w * (a + (b - a) * fx + (e + (d - e) * fx - a - (b - a) * fx) * fy)) / (1 + w2);\n      }\n    }\n  }\n  return out;\n}\n\n// Where the pores touch: each the best of four tries at standing clear of\n// the ones before it, so the first n are spread out for any n.\nfunction pores(seed) {\n  const r = rng(seed ^ 0x5bd1e995), out = [];\n  for (let i = 0; i \u003c 80; i++) {\n    let best = null, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      const x = r() * (W + 6) - 3, y = r() * (H + 6) - 3;\n      let d = 1e9;\n      for (const o of out) d = min(d, (o.x - x) ** 2 + (o.y - y) ** 2);\n      if (d > bd) {\n        bd = d;\n        best = { x, y };\n      }\n    }\n    // How fast it wicks, and a share of the time it touches.\n    best.k = 0.75 + 0.5 * r();\n    best.r = 0.85 + 0.3 * r();\n    out.push(best);\n  }\n  return out;\n}\n\n// For every LED, the pore whose oil reaches it first: when that spot opened,\n// how fast it spreads and how far the LED is from it. Lucas-Washburn: a spot's\n// radius is k sqrt(t - t0), so the oil reaches distance d at t0 + (d / k)^2.\n// Distance is stretched across the grain, cut short along the fibres and\n// roughened by the cockle.\nfunction wick(S) {\n  const { F, nz } = S.cur, P = S.pores.slice(0, S.n), al = sqrt(1 + 1.5 * S.grain), T0 = S.T0, K = S.K, D = S.D;\n  // The first pores touch 0.4 s after the press and the rest follow over\n  // LATE seconds, each later one where the sheet is still dry.\n  P.forEach((o, i) => (o.t0 = 0.4 + LATE * (i / S.n) ** 1.4 * o.r));\n  // Each pore's k scaled so that n spots together open RATE LEDs a second.\n  let sk = 0;\n  for (const o of P) sk += o.k * o.k;\n  const kk = sqrt(RATE / (PI * sk)), arr = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, rough = 1 + 0.3 * nz[p], ahead = AHEAD * F[p];\n      let bt = 1e9, bi = 0, bd = 0;\n      for (let i = 0; i \u003c P.length; i++) {\n        const o = P[i], dx = (x - o.x) * al, dy = (y - o.y) / al;\n        const d = max(0, sqrt(dx * dx + dy * dy) * rough - ahead), k = o.k * kk, t = o.t0 + (d / k) * (d / k);\n        if (t \u003c bt) {\n          bt = t;\n          bi = i;\n          bd = d;\n        }\n      }\n      T0[p] = P[bi].t0;\n      K[p] = P[bi].k * kk;\n      D[p] = bd;\n      arr[p] = bt;\n    }\n  // The hold starts when nine tenths of the sheet has been reached.\n  arr.sort();\n  S.full = arr[floor(0.9 * N)];\n}\n\nfunction lay(S, seed) {\n  S.cur = sheet(seed, S.grain);\n  S.pores = pores(seed);\n  S.next = sheet(seed + 7919, S.grain);\n  wick(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 20, grain: 0.06, t: 0, phase: 0, slide: 0, seed: floor(Math.random() * 1e9), begun: false,\n    T0: new Float32Array(N), K: new Float32Array(N), D: new Float32Array(N), V: new Float32Array(N), C: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 20, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const n = round(cl(k[2], 20, 80)), grain = cl(k[3], 0, 1);\n  if (!S.begun) {\n    S.n = n;\n    S.grain = grain;\n    lay(S, S.seed);\n    S.begun = true;\n  } else if (abs(grain - S.grain) > 0.01) {\n    S.grain = grain;\n    S.n = n;\n    S.cur = sheet(S.cur.seed, grain);\n    S.next = sheet(S.cur.seed + 7919, grain);\n    wick(S);\n  } else if (n !== S.n) {\n    S.n = n;\n    wick(S);\n  }\n  if (S.phase === 0) {\n    S.t += (d * S.speed) / 2;\n    if (S.t > S.full + HOLD) S.phase = 1;\n  } else {\n    // A fresh sheet slides down over the old one.\n    S.slide += d / SLIDE;\n    if (S.slide >= 1) {\n      S.phase = 0;\n      S.slide = 0;\n      S.t = 0;\n      S.seed = (S.seed + 7919) >>> 0;\n      S.cur = S.next;\n      S.pores = pores(S.seed);\n      S.next = sheet(S.seed + 7919, S.grain);\n      wick(S);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { T0, K, D, V, C } = S, t = S.t, h = S.hue + H0, hh = h - floor(h);\n  const pure = [0, 0, 0];\n  {\n    const x = hh * 6, i = floor(x) % 6, f = x - floor(x);\n    pure[0] = [1, 1 - f, 0, 0, f, 1][i];\n    pure[1] = [f, 1, 1, 1 - f, 0, 0][i];\n    pure[2] = [0, 0, f, 1, 1, 1 - f][i];\n  }\n  // Orange and yellow paper goes brown when dim: there the dry paper is\n  // lifted and paled.\n  const warm = cl(1.6 - abs(hh - 0.12) / 0.1, 0, 1);\n  const dryV = DRY * (1 + 0.5 * warm), dryS = 0.2 - 0.15 * warm, clrS = 0.56 - 0.1 * warm;\n  // Each LED's brightness is its dry level until the oil reaches it and then\n  // rises once, smoothly, to its clear level; nothing else on the sheet moves.\n  const { F, g, fl } = S.cur;\n  for (let y = 0; y \u003c H; y++) {\n    const vy = (y - 63.5) / 92;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vx = (x - 31.5) / 46, wall = 0.84 + 0.16 * (1 - vx * vx - vy * vy);\n      const m = K[p] * sqrt(max(0, t - T0[p])) - D[p], age = t - T0[p] - (D[p] / K[p]) ** 2;\n      let s = cl(m / FRONT + 0.5, 0, 1);\n      s = s * s * (3 - 2 * s);\n      // Behind the front the paper keeps soaking up oil and clears further.\n      const soak = age > 0 ? 1 - exp(-age / SOAK) : 0;\n      const f = F[p], dry = dryV * wall * (1 + 0.5 * (f - 0.25) + 0.05 * g[p] + 0.06 * fl[p]), clr = CLEAR * wall * (1 - 0.17 * f + 0.03 * g[p] + 0.11 * fl[p]);\n      V[p] = dry + (clr - dry) * (0.68 * s + 0.32 * soak);\n      // The wet front carries a deeper rim of tint; it changes the colour,\n      // not the brightness.\n      C[p] = dryS + (clrS - dryS) * s + 1.2 * s * (1 - s);\n    }\n  }\n  const edge = S.phase === 1 ? round(H * (1 - (1 - S.slide) ** 3)) : -1, nf = S.next.F, ng = S.next.g, nl = S.next.fl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = V[p], c = C[p];\n      if (y \u003c edge) {\n        // The fresh sheet, dry, its fibres sliding down with it.\n        const q = (y - edge + H) * W + x, vx = (x - 31.5) / 46, vy = (y - 63.5) / 92;\n        v = dryV * (0.84 + 0.16 * (1 - vx * vx - vy * vy)) * (1 + 0.5 * (nf[q] - 0.25) + 0.05 * ng[q] + 0.06 * nl[q]);\n        c = dryS;\n        if (y === edge - 1) v *= 1.5;\n      } else if (edge >= 0 && y - edge \u003c 3) v *= 0.45 + 0.18 * (y - edge);\n      v = min(1, v);\n      display.setPixel(x, y, round(255 * v * (1 - c + c * pure[0])), round(255 * v * (1 - c + c * pure[1])), round(255 * v * (1 - c + c * pure[2])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Pores=20..80, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the paper's tint round the whole wheel; the dry paper is a dim pale tint and the clear spots the same hue, deeper. At 0 rose, at 0.05 red, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale yellow, 0.3 lime, 0.4 green, 0.5 aqua, 0.6 sky blue, 0.7 blue, 0.8 violet, 0.9 orchid. From 0.02 to 0.34 the dry paper is lifted up to 1.5 times and paled toward grey and the spots a little paler, so red, orange and yellow paper never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first pores touch 0.4 s after a sheet is pressed and the last about 6.5 s after; a tenth of the sheet is clear by 2.5 s, half by 6.7 s and nine tenths by 13 s, then it holds 2.5 s and a fresh sheet slides down in 1.4 s, about 16 s a sheet. At 0.2 the wicking is ten times slower, at 3 one and a half times faster; the slide always takes 1.4 s."},{"name":"Pores","min":20,"max":80,"about":"How many pores touch the sheet, each later one where the paper is still dry: 20 at the start, whose widest spots reach about 45 LEDs across before they meet, up to 80 at the top, about 24 across. Each spot's radius goes as the square root of its age, and the more pores, the slower each one spreads, so the sheet clears in about the same time."},{"name":"Grain","min":0,"max":1,"about":"How far the fibres line up along the panel. Up to 0.06 they lie every which way and the spots stay round; at 1 nearly all run up and down, nearly twice as long, and the oil runs along them two and a half times as fast as across, so the spots stretch into tall ovals and the clear patches join in columns."}],"start":[0,2,20,0.06],"measures":{"motion":0.0572,"detail":0.0504,"edges":0.1413,"complexity":1.9288,"coverage":1,"colour":0.225,"drift":0.3434},"knobResponse":[0.1516,0.0572,0.0394,0.0465]},{"slug":"bokeh","title":"Bokeh","family":"light","round":1,"note":"초점이 나간 밤거리 불빛이에요. 여섯 모 진 빛 원반이 피었다 흘러가며 겹친 자리만 부드럽게 밝아져요.","idea":"A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.","buttons":"K1 tap racks the focus through, so every disc closes to a point and opens out again.","code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","layer":{"id":"layer-bokeh","type":"code","name":"bokeh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them."},{"name":"Pace","min":0.2,"max":4,"about":"How fast the lights drift past and how quickly each one blooms and goes out."},{"name":"Size","min":-1,"max":1,"about":"How far out of focus they are, from small bright points to wide soft discs."},{"name":"Lights","min":40,"max":90,"about":"How many are lit at once; big discs come in fewer."}],"start":[0,2,0,40],"measures":{"motion":0.9868,"detail":0.0384,"edges":0.1836,"complexity":1.7001,"coverage":0.5358,"colour":0.318,"drift":0.3822},"knobResponse":[0.2498,0.2782,0.2491,0.2757]},{"slug":"borromean-rings","title":"Borromean Rings","family":"topology","round":33,"note":"테이트의 보로메오 고리를 황금 직사각형 세 장으로 만들고 세로로 2.3배 늘여 세웠어요. 하늘색 고리가 키 크게 서고 분홍 고리가 그것을 가로지르며 연두 고리가 허리를 둘러 20초에 한 바퀴 돌고, 앞 관이 뒤 관을 지나는 자리마다 LED 한 줄이 어두워져 위아래가 읽혀요. K3 은 직사각형의 긴 변 비를 1.618 에서 2.4 까지 바꾸고, K1 을 누르면 분홍 고리가 사라진 동안 연두 고리가 긴 고리 아래 끝으로 빠져나갔다 돌아와요.","idea":"Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.","buttons":"K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.","code":"// ===== Patternflow pattern =====\n// Title:   Borromean Rings\n// Family:  topology\n// Idea:    Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Borromean rings (Peter Guthrie Tait, 1876), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown.\n// Knob 2: Speed. How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower.\n// Knob 3: Aspect. Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side.\n// Knob 4: Tube. How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching.\n// Buttons: K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The model, short side a = 1. Each ring lies in one coordinate plane:\n//   R1 in x = 0, half sides z1 = r and y1 = SIG,\n//   R2 in z = 0, half sides x2 = 1 and y2 = SIG r (the tall one),\n//   R3 in y = 0, half sides x3 = r and z3 = 1 (the flat one round the waist).\n// Unstretched (SIG = 1, r = phi) these are Tait's three golden rectangles.\n// The link only asks y1 \u003c y2, x2 \u003c x3 and z3 \u003c z1: along each axis one ring\n// passes through the next. Stretching along y keeps all three, so the model\n// can be drawn 2.3 times as tall, which the 64 x 128 panel needs: unstretched\n// it fits a cube and would light a band about 50 rows high.\nconst SIG = 2.3;\n// Corners rounded to 0.4 of the short side, the camera 12 units away.\nconst RC = 0.4, CAM = 12;\n// Light from the upper left and in front, and the half vector for the shine.\nconst LX = -0.48, LY = -0.62, LZ = -0.62, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst lx = LX * LN, ly = LY * LN, lz = LZ * LN;\nconst HX = lx, HY = ly, HZ = lz - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\nconst hx = HX * HN, hy = HY * HN, hz = HZ * HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points round a rounded rectangle with half sides A (along u) and B (along\n// v), about one every `step`, as (u, v) pairs. Four sides and four arcs.\nfunction loop(A, B, c, step, out) {\n  let n = 0;\n  const side = (u0, v0, u1, v1) => {\n    const len = sqrt((u1 - u0) ** 2 + (v1 - v0) ** 2), k = max(1, ceil(len / step));\n    for (let i = 0; i \u003c k; i++) (out[n++] = u0 + ((u1 - u0) * i) / k), (out[n++] = v0 + ((v1 - v0) * i) / k);\n  };\n  const arc = (cu, cv, a0) => {\n    const k = max(2, ceil((c * PI) / 2 / step));\n    for (let i = 0; i \u003c k; i++) {\n      const a = a0 + ((PI / 2) * i) / k;\n      out[n++] = cu + c * cos(a);\n      out[n++] = cv + c * sin(a);\n    }\n  };\n  const a = A - c, b = B - c;\n  side(A, -b, A, b);\n  arc(a, b, 0);\n  side(a, B, -a, B);\n  arc(-a, b, PI / 2);\n  side(-A, b, -A, -b);\n  arc(-a, -b, PI);\n  side(-a, -B, a, -B);\n  arc(a, -b, 1.5 * PI);\n  return n >> 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    turn: 0.6, nod: 0, hue: 0, speed: 2, r: 1.618, tube: 0.06, cut: -1,\n    z: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    c: [new Float32Array(N * 3), new Float32Array(N * 3), new Float32Array(N * 3)],\n    fid: new Int8Array(N), fz: new Float32Array(N), uv: new Float32Array(8192), pts: new Float32Array(16384), col: new Float32Array(9),\n  };\n}\n\n// K1 tap, seconds: R1 fades 0 to 0.8, the other two slide apart to 3.0,\n// hold to 4.4, slide back to 6.6, R1 returns by 7.4.\nconst T_END = 7.4;\nfunction cutState(t) {\n  if (t \u003c 0) return [1, 0, 0];\n  const fade = t \u003c 0.8 ? 1 - sm(t / 0.8) : t \u003c 6.6 ? 0 : sm((t - 6.6) / 0.8);\n  const sep = t \u003c 0.8 ? 0 : t \u003c 3 ? sm((t - 0.8) / 2.2) : t \u003c 4.4 ? 1 : t \u003c 6.6 ? 1 - sm((t - 4.4) / 2.2) : 0;\n  return [fade, sep, sm(t / 1.2) * (1 - sm((t - 6.2) / 1.2))];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1.618, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.r = cl(k[2], 1.618, 2.4);\n  P.tube = cl(k[3], 0, 1);\n  P.turn += d * P.speed * 0.157;\n  P.nod += d * P.speed * 0.116;\n  if (P.cut >= 0) {\n    P.cut += d;\n    if (P.cut > T_END) P.cut = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.cut \u003c 0) P.cut = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const r = P.r, ZB = P.z, CB = P.c, uv = P.uv, pts = P.pts, col = P.col, fid = P.fid, fz = P.fz;\n  // The room where a ring passes through the next: one short side, or r - 1\n  // of it where the long side is shorter than two.\n  const room = min(1, r - 1), tr = (0.29 + 0.16 * P.tube) * room;\n  // LEDs to a unit: the flat ring's corners swing out to rxz from the axis,\n  // and the panel is 64 across; the tall ring is SIG r high each side of the\n  // middle, and the panel is 128 tall.\n  const rxz = sqrt((r - RC) ** 2 + (1 - RC) ** 2) + RC + tr;\n  const S = min(27 / rxz, 55 / (SIG * r + tr));\n  const [fade, sep, low] = cutState(P.cut);\n  // With R1 gone the flat ring drops down the tall ring until it\n  // clears the bottom end with 0.6 of a unit of air between the tubes, and\n  // the tall ring rises a little to meet it.\n  const drop = sep * (SIG * r + 2 * tr + 0.6);\n  const up2 = drop * 0.2, down3 = drop * 0.8;\n\n  // The rings turn round the tall ring's axis and the view looks down on them\n  // from 14 to 30 degrees, so the flat ring always shows its hole. While the\n  // rings come apart the eye sinks to 7 degrees below the middle, near the\n  // height the flat ring drops to, so the air between it and the bottom of\n  // the tall ring shows.\n  const th = P.turn, ct = cos(th), st = sin(th);\n  const el = (0.38 + 0.14 * sin(P.nod)) * (1 - low) - 0.12 * low, ce = cos(el), se = sin(el);\n\n  for (let i = 0; i \u003c 9; i += 3) hsv(P.hue + 0.58 + (i / 9), 0.8, 1, col, i);\n  // Round orange and yellow the colour goes brown in the shade, so there it\n  // keeps less saturation and more light.\n  const warm = [0, 0, 0];\n  for (let i = 0; i \u003c 3; i++) {\n    let h = P.hue + 0.58 + i / 3;\n    h -= floor(h);\n    let dh = h - 0.12;\n    if (dh > 0.5) dh -= 1;\n    warm[i] = sm(1 - abs(dh) / 0.17);\n    for (let c = 0; c \u003c 3; c++) col[i * 3 + c] += (1 - col[i * 3 + c]) * 0.45 * warm[i];\n  }\n\n  // Ring order in the buffers: 0 the tall ring (R2), 1 the one across it (R1), 2 the flat one (R3).\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const zb = ZB[ring], cb = CB[ring];\n    zb.fill(1e9);\n    let A, B;\n    if (ring === 0) (A = 1), (B = SIG * r);\n    else if (ring === 1) (A = r), (B = SIG);\n    else (A = r), (B = 1);\n    const n = loop(A, B, RC * min(A, B), tr * 0.3, uv);\n    const cr = col[ring * 3], cg = col[ring * 3 + 1], cbl = col[ring * 3 + 2], wl = warm[ring];\n    // Every point on screen first, so each can see its neighbours for the\n    // tube's direction.\n    for (let i = 0; i \u003c n; i++) {\n      const u = uv[i * 2], v = uv[i * 2 + 1];\n      let X, Y, Z;\n      if (ring === 0) (X = u), (Y = v + up2), (Z = 0);\n      else if (ring === 1) (X = 0), (Y = v), (Z = u);\n      else (X = u), (Y = -down3), (Z = v);\n      // Turn about y, then tip the view down by el.\n      const xr = X * ct + Z * st, zr = -X * st + Z * ct;\n      const up = Y * ce + zr * se, dep = zr * ce - Y * se;\n      const sc = (S * CAM) / (CAM + dep);\n      pts[i * 4] = 31.5 + xr * sc;\n      pts[i * 4 + 1] = 63.5 - up * sc;\n      pts[i * 4 + 2] = dep * S;\n      pts[i * 4 + 3] = tr * sc;\n    }\n    for (let i = 0; i \u003c n; i++) {\n      const o = i * 4, sx = pts[o], sy = pts[o + 1], dz = pts[o + 2], rp = pts[o + 3];\n      const a = ((i + 1) % n) * 4, b = ((i + n - 1) % n) * 4;\n      let tx = pts[a] - pts[b], ty = pts[a + 1] - pts[b + 1], tz = pts[a + 2] - pts[b + 2];\n      const tl = 1 / (sqrt(tx * tx + ty * ty + tz * tz) + 1e-9);\n      (tx *= tl), (ty *= tl), (tz *= tl);\n      // Nearer is brighter: a quarter darker at the back of the rings.\n      const fog = 1 - 0.25 * cl((dz / S + 2) / 4, 0, 1);\n      const x0 = max(0, floor(sx - rp)), x1 = min(W - 1, ceil(sx + rp)), y0 = max(0, floor(sy - rp)), y1 = min(H - 1, ceil(sy + rp));\n      const r2 = rp * rp;\n      for (let y = y0; y \u003c= y1; y++) {\n        const ny = y - sy, ny2 = ny * ny;\n        for (let x = x0; x \u003c= x1; x++) {\n          const nx = x - sx, d2 = nx * nx + ny2;\n          if (d2 >= r2) continue;\n          const nzp = sqrt(r2 - d2), z = dz - nzp, p = y * W + x;\n          if (z >= zb[p]) continue;\n          zb[p] = z;\n          // The tube is drawn as a chain of spheres, but the normal is the\n          // tube's: the sphere's, less its part along the tube.\n          const dt = nx * tx + ny * ty - nzp * tz;\n          let Nx = nx - dt * tx, Ny = ny - dt * ty, Nz = -nzp - dt * tz;\n          const nl = 1 / (sqrt(Nx * Nx + Ny * Ny + Nz * Nz) + 1e-9);\n          (Nx *= nl), (Ny *= nl), (Nz *= nl);\n          const dif = max(0, Nx * lx + Ny * ly + Nz * lz);\n          const hv = max(0, Nx * hx + Ny * hy + Nz * hz), sp = hv ** 24 * 0.85;\n          const lit = (0.2 + 0.3 * wl + 0.8 * dif) * fog;\n          cb[p * 3] = cr * lit + sp;\n          cb[p * 3 + 1] = cg * lit + sp;\n          cb[p * 3 + 2] = cbl * lit + sp;\n        }\n      }\n    }\n  }\n\n  // The nearest solid ring at each LED, for the gaps.\n  const al = [1, fade, 1];\n  for (let p = 0; p \u003c N; p++) {\n    let best = -1, bz = 1e9;\n    for (let ring = 0; ring \u003c 3; ring++) if (al[ring] > 0.5 && ZB[ring][p] \u003c bz) (bz = ZB[ring][p]), (best = ring);\n    fid[p] = best;\n    fz[p] = bz;\n  }\n  const gapDepth = tr * S * 1.1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Layers front to back: R1 fades by its alpha.\n      const z0 = ZB[0][p], z1 = ZB[1][p], z2 = ZB[2][p];\n      let R = 0, G = 0, Bc = 0;\n      if (z0 \u003c 1e8 || z1 \u003c 1e8 || z2 \u003c 1e8) {\n        const ord = z0 \u003c= z1 ? (z1 \u003c= z2 ? [0, 1, 2] : z0 \u003c= z2 ? [0, 2, 1] : [2, 0, 1]) : z0 \u003c= z2 ? [1, 0, 2] : z1 \u003c= z2 ? [1, 2, 0] : [2, 1, 0];\n        let keep = 1;\n        for (let j = 0; j \u003c 3 && keep > 0.001; j++) {\n          const ring = ord[j];\n          if (ZB[ring][p] > 1e8) break;\n          const a = al[ring] * keep, cb = CB[ring];\n          R += cb[p * 3] * a;\n          G += cb[p * 3 + 1] * a;\n          Bc += cb[p * 3 + 2] * a;\n          keep -= a;\n        }\n        // A dark LED where a nearer tube of another ring passes over this\n        // one, so the crossing reads as over and under.\n        const me = fid[p];\n        if (me >= 0) {\n          const zme = fz[p];\n          let dark = 0;\n          for (let dy = -1; dy \u003c= 1; dy++) {\n            const yy = y + dy;\n            if (yy \u003c 0 || yy >= H) continue;\n            for (let dx = -1; dx \u003c= 1; dx++) {\n              const xx = x + dx;\n              if (xx \u003c 0 || xx >= W || (dx === 0 && dy === 0)) continue;\n              const q = yy * W + xx, o = fid[q];\n              if (o >= 0 && o !== me && fz[q] \u003c zme - gapDepth) dark = 1;\n            }\n          }\n          if (dark) (R *= 0.12), (G *= 0.12), (Bc *= 0.12);\n        }\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(Bc * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-borromean-rings","type":"code","name":"borromean-rings","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Borromean Rings\n// Family:  topology\n// Idea:    Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Borromean rings (Peter Guthrie Tait, 1876), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown.\n// Knob 2: Speed. How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower.\n// Knob 3: Aspect. Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side.\n// Knob 4: Tube. How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching.\n// Buttons: K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The model, short side a = 1. Each ring lies in one coordinate plane:\n//   R1 in x = 0, half sides z1 = r and y1 = SIG,\n//   R2 in z = 0, half sides x2 = 1 and y2 = SIG r (the tall one),\n//   R3 in y = 0, half sides x3 = r and z3 = 1 (the flat one round the waist).\n// Unstretched (SIG = 1, r = phi) these are Tait's three golden rectangles.\n// The link only asks y1 \u003c y2, x2 \u003c x3 and z3 \u003c z1: along each axis one ring\n// passes through the next. Stretching along y keeps all three, so the model\n// can be drawn 2.3 times as tall, which the 64 x 128 panel needs: unstretched\n// it fits a cube and would light a band about 50 rows high.\nconst SIG = 2.3;\n// Corners rounded to 0.4 of the short side, the camera 12 units away.\nconst RC = 0.4, CAM = 12;\n// Light from the upper left and in front, and the half vector for the shine.\nconst LX = -0.48, LY = -0.62, LZ = -0.62, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst lx = LX * LN, ly = LY * LN, lz = LZ * LN;\nconst HX = lx, HY = ly, HZ = lz - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\nconst hx = HX * HN, hy = HY * HN, hz = HZ * HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points round a rounded rectangle with half sides A (along u) and B (along\n// v), about one every `step`, as (u, v) pairs. Four sides and four arcs.\nfunction loop(A, B, c, step, out) {\n  let n = 0;\n  const side = (u0, v0, u1, v1) => {\n    const len = sqrt((u1 - u0) ** 2 + (v1 - v0) ** 2), k = max(1, ceil(len / step));\n    for (let i = 0; i \u003c k; i++) (out[n++] = u0 + ((u1 - u0) * i) / k), (out[n++] = v0 + ((v1 - v0) * i) / k);\n  };\n  const arc = (cu, cv, a0) => {\n    const k = max(2, ceil((c * PI) / 2 / step));\n    for (let i = 0; i \u003c k; i++) {\n      const a = a0 + ((PI / 2) * i) / k;\n      out[n++] = cu + c * cos(a);\n      out[n++] = cv + c * sin(a);\n    }\n  };\n  const a = A - c, b = B - c;\n  side(A, -b, A, b);\n  arc(a, b, 0);\n  side(a, B, -a, B);\n  arc(-a, b, PI / 2);\n  side(-A, b, -A, -b);\n  arc(-a, -b, PI);\n  side(-a, -B, a, -B);\n  arc(a, -b, 1.5 * PI);\n  return n >> 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    turn: 0.6, nod: 0, hue: 0, speed: 2, r: 1.618, tube: 0.06, cut: -1,\n    z: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    c: [new Float32Array(N * 3), new Float32Array(N * 3), new Float32Array(N * 3)],\n    fid: new Int8Array(N), fz: new Float32Array(N), uv: new Float32Array(8192), pts: new Float32Array(16384), col: new Float32Array(9),\n  };\n}\n\n// K1 tap, seconds: R1 fades 0 to 0.8, the other two slide apart to 3.0,\n// hold to 4.4, slide back to 6.6, R1 returns by 7.4.\nconst T_END = 7.4;\nfunction cutState(t) {\n  if (t \u003c 0) return [1, 0, 0];\n  const fade = t \u003c 0.8 ? 1 - sm(t / 0.8) : t \u003c 6.6 ? 0 : sm((t - 6.6) / 0.8);\n  const sep = t \u003c 0.8 ? 0 : t \u003c 3 ? sm((t - 0.8) / 2.2) : t \u003c 4.4 ? 1 : t \u003c 6.6 ? 1 - sm((t - 4.4) / 2.2) : 0;\n  return [fade, sep, sm(t / 1.2) * (1 - sm((t - 6.2) / 1.2))];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1.618, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.r = cl(k[2], 1.618, 2.4);\n  P.tube = cl(k[3], 0, 1);\n  P.turn += d * P.speed * 0.157;\n  P.nod += d * P.speed * 0.116;\n  if (P.cut >= 0) {\n    P.cut += d;\n    if (P.cut > T_END) P.cut = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.cut \u003c 0) P.cut = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const r = P.r, ZB = P.z, CB = P.c, uv = P.uv, pts = P.pts, col = P.col, fid = P.fid, fz = P.fz;\n  // The room where a ring passes through the next: one short side, or r - 1\n  // of it where the long side is shorter than two.\n  const room = min(1, r - 1), tr = (0.29 + 0.16 * P.tube) * room;\n  // LEDs to a unit: the flat ring's corners swing out to rxz from the axis,\n  // and the panel is 64 across; the tall ring is SIG r high each side of the\n  // middle, and the panel is 128 tall.\n  const rxz = sqrt((r - RC) ** 2 + (1 - RC) ** 2) + RC + tr;\n  const S = min(27 / rxz, 55 / (SIG * r + tr));\n  const [fade, sep, low] = cutState(P.cut);\n  // With R1 gone the flat ring drops down the tall ring until it\n  // clears the bottom end with 0.6 of a unit of air between the tubes, and\n  // the tall ring rises a little to meet it.\n  const drop = sep * (SIG * r + 2 * tr + 0.6);\n  const up2 = drop * 0.2, down3 = drop * 0.8;\n\n  // The rings turn round the tall ring's axis and the view looks down on them\n  // from 14 to 30 degrees, so the flat ring always shows its hole. While the\n  // rings come apart the eye sinks to 7 degrees below the middle, near the\n  // height the flat ring drops to, so the air between it and the bottom of\n  // the tall ring shows.\n  const th = P.turn, ct = cos(th), st = sin(th);\n  const el = (0.38 + 0.14 * sin(P.nod)) * (1 - low) - 0.12 * low, ce = cos(el), se = sin(el);\n\n  for (let i = 0; i \u003c 9; i += 3) hsv(P.hue + 0.58 + (i / 9), 0.8, 1, col, i);\n  // Round orange and yellow the colour goes brown in the shade, so there it\n  // keeps less saturation and more light.\n  const warm = [0, 0, 0];\n  for (let i = 0; i \u003c 3; i++) {\n    let h = P.hue + 0.58 + i / 3;\n    h -= floor(h);\n    let dh = h - 0.12;\n    if (dh > 0.5) dh -= 1;\n    warm[i] = sm(1 - abs(dh) / 0.17);\n    for (let c = 0; c \u003c 3; c++) col[i * 3 + c] += (1 - col[i * 3 + c]) * 0.45 * warm[i];\n  }\n\n  // Ring order in the buffers: 0 the tall ring (R2), 1 the one across it (R1), 2 the flat one (R3).\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const zb = ZB[ring], cb = CB[ring];\n    zb.fill(1e9);\n    let A, B;\n    if (ring === 0) (A = 1), (B = SIG * r);\n    else if (ring === 1) (A = r), (B = SIG);\n    else (A = r), (B = 1);\n    const n = loop(A, B, RC * min(A, B), tr * 0.3, uv);\n    const cr = col[ring * 3], cg = col[ring * 3 + 1], cbl = col[ring * 3 + 2], wl = warm[ring];\n    // Every point on screen first, so each can see its neighbours for the\n    // tube's direction.\n    for (let i = 0; i \u003c n; i++) {\n      const u = uv[i * 2], v = uv[i * 2 + 1];\n      let X, Y, Z;\n      if (ring === 0) (X = u), (Y = v + up2), (Z = 0);\n      else if (ring === 1) (X = 0), (Y = v), (Z = u);\n      else (X = u), (Y = -down3), (Z = v);\n      // Turn about y, then tip the view down by el.\n      const xr = X * ct + Z * st, zr = -X * st + Z * ct;\n      const up = Y * ce + zr * se, dep = zr * ce - Y * se;\n      const sc = (S * CAM) / (CAM + dep);\n      pts[i * 4] = 31.5 + xr * sc;\n      pts[i * 4 + 1] = 63.5 - up * sc;\n      pts[i * 4 + 2] = dep * S;\n      pts[i * 4 + 3] = tr * sc;\n    }\n    for (let i = 0; i \u003c n; i++) {\n      const o = i * 4, sx = pts[o], sy = pts[o + 1], dz = pts[o + 2], rp = pts[o + 3];\n      const a = ((i + 1) % n) * 4, b = ((i + n - 1) % n) * 4;\n      let tx = pts[a] - pts[b], ty = pts[a + 1] - pts[b + 1], tz = pts[a + 2] - pts[b + 2];\n      const tl = 1 / (sqrt(tx * tx + ty * ty + tz * tz) + 1e-9);\n      (tx *= tl), (ty *= tl), (tz *= tl);\n      // Nearer is brighter: a quarter darker at the back of the rings.\n      const fog = 1 - 0.25 * cl((dz / S + 2) / 4, 0, 1);\n      const x0 = max(0, floor(sx - rp)), x1 = min(W - 1, ceil(sx + rp)), y0 = max(0, floor(sy - rp)), y1 = min(H - 1, ceil(sy + rp));\n      const r2 = rp * rp;\n      for (let y = y0; y \u003c= y1; y++) {\n        const ny = y - sy, ny2 = ny * ny;\n        for (let x = x0; x \u003c= x1; x++) {\n          const nx = x - sx, d2 = nx * nx + ny2;\n          if (d2 >= r2) continue;\n          const nzp = sqrt(r2 - d2), z = dz - nzp, p = y * W + x;\n          if (z >= zb[p]) continue;\n          zb[p] = z;\n          // The tube is drawn as a chain of spheres, but the normal is the\n          // tube's: the sphere's, less its part along the tube.\n          const dt = nx * tx + ny * ty - nzp * tz;\n          let Nx = nx - dt * tx, Ny = ny - dt * ty, Nz = -nzp - dt * tz;\n          const nl = 1 / (sqrt(Nx * Nx + Ny * Ny + Nz * Nz) + 1e-9);\n          (Nx *= nl), (Ny *= nl), (Nz *= nl);\n          const dif = max(0, Nx * lx + Ny * ly + Nz * lz);\n          const hv = max(0, Nx * hx + Ny * hy + Nz * hz), sp = hv ** 24 * 0.85;\n          const lit = (0.2 + 0.3 * wl + 0.8 * dif) * fog;\n          cb[p * 3] = cr * lit + sp;\n          cb[p * 3 + 1] = cg * lit + sp;\n          cb[p * 3 + 2] = cbl * lit + sp;\n        }\n      }\n    }\n  }\n\n  // The nearest solid ring at each LED, for the gaps.\n  const al = [1, fade, 1];\n  for (let p = 0; p \u003c N; p++) {\n    let best = -1, bz = 1e9;\n    for (let ring = 0; ring \u003c 3; ring++) if (al[ring] > 0.5 && ZB[ring][p] \u003c bz) (bz = ZB[ring][p]), (best = ring);\n    fid[p] = best;\n    fz[p] = bz;\n  }\n  const gapDepth = tr * S * 1.1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Layers front to back: R1 fades by its alpha.\n      const z0 = ZB[0][p], z1 = ZB[1][p], z2 = ZB[2][p];\n      let R = 0, G = 0, Bc = 0;\n      if (z0 \u003c 1e8 || z1 \u003c 1e8 || z2 \u003c 1e8) {\n        const ord = z0 \u003c= z1 ? (z1 \u003c= z2 ? [0, 1, 2] : z0 \u003c= z2 ? [0, 2, 1] : [2, 0, 1]) : z0 \u003c= z2 ? [1, 0, 2] : z1 \u003c= z2 ? [1, 2, 0] : [2, 1, 0];\n        let keep = 1;\n        for (let j = 0; j \u003c 3 && keep > 0.001; j++) {\n          const ring = ord[j];\n          if (ZB[ring][p] > 1e8) break;\n          const a = al[ring] * keep, cb = CB[ring];\n          R += cb[p * 3] * a;\n          G += cb[p * 3 + 1] * a;\n          Bc += cb[p * 3 + 2] * a;\n          keep -= a;\n        }\n        // A dark LED where a nearer tube of another ring passes over this\n        // one, so the crossing reads as over and under.\n        const me = fid[p];\n        if (me >= 0) {\n          const zme = fz[p];\n          let dark = 0;\n          for (let dy = -1; dy \u003c= 1; dy++) {\n            const yy = y + dy;\n            if (yy \u003c 0 || yy >= H) continue;\n            for (let dx = -1; dx \u003c= 1; dx++) {\n              const xx = x + dx;\n              if (xx \u003c 0 || xx >= W || (dx === 0 && dy === 0)) continue;\n              const q = yy * W + xx, o = fid[q];\n              if (o >= 0 && o !== me && fz[q] \u003c zme - gapDepth) dark = 1;\n            }\n          }\n          if (dark) (R *= 0.12), (G *= 0.12), (Bc *= 0.12);\n        }\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(Bc * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower."},{"name":"Aspect","min":1.618,"max":2.4,"about":"Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side."},{"name":"Tube","min":0,"max":1,"about":"How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching."}],"start":[0,2,1.618,0.06],"measures":{"motion":0.1873,"detail":0.0417,"edges":0.4546,"complexity":0.6755,"coverage":0.2581,"colour":0.1929,"drift":0.1053},"knobResponse":[0.1012,0.1249,0.077,0.0449]},{"slug":"borsuk-ulam","title":"Borsuk-Ulam","family":"topology","round":39,"note":"기온과 기압이 천천히 바뀌는 지구가 돌아요. 위 원판은 앞 반구, 아래 원판은 뒤 반구라서 −x 가 x 와 같은 자리에 그려지고, 대척점과 기온이 같은 흰 선과 기압이 같은 자홍 선이 두 원판의 같은 자리를 지나요. 두 선이 만나는 금색 점이 보르수크-울람 정리가 늘 있다고 하는 대척점 쌍이에요.","idea":"A turning globe carries a slowly changing temperature and pressure, the top disk showing the side that faces you and the bottom disk the far side laid so that each point sits where its antipode sits above, and the white line where the temperature equals the temperature at the antipode crosses the magenta line where the pressure does at an odd number of gold points, the same in both disks, where two opposite places on the Earth have the same weather.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Borsuk-Ulam\n// Family:  topology\n// Idea:    A turning globe carries a slowly changing temperature and pressure, the top disk showing the side that faces you and the bottom disk the far side laid so that each point sits where its antipode sits above, and the white line where the temperature equals the temperature at the antipode crosses the magenta line where the pressure does at an odd number of gold points, the same in both disks, where two opposite places on the Earth have the same weather.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Borsuk-Ulam theorem (Karol Borsuk, 1933, after a question of Stanisław Ulam)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Degree=3..6, Speed=0.2..3, Weather=0..1, Hue=0..1\n//\n// Knob 1: Degree. The highest degree of the random spherical harmonics in both fields, the next degree fading in between whole numbers. The two curves hang only on the odd degrees, so at 3 they are cubic curves and meet at 1 to 9 pairs, 2.8 on average: one pair 36% of the time, three 42%, five 19%, seven 3%. 4 adds a finer even layer to the colours and the isobars and leaves the curves cubic; at 5 and 6 the curves are quintic, wind into loops and meet at up to 25 pairs, about 5 on average.\n// Knob 2: Speed. How fast the globe turns: at 2 once in 20 seconds round an axis leaning 24 degrees toward you, at 0.2 once in 200 seconds, at 3 once in 13. The curves and the pairs turn with it; a pair that slips over the rim comes back at once on the opposite rim, where its other point is rising.\n// Knob 3: Weather. How fast the temperature and the pressure change. At 0 each coefficient swings once in 56 to 168 seconds, the curves creep and a pair of pairs is born or dies about 12 times a minute at Degree 3; at 1 eight times faster, 7 to 21 seconds, about 74 times a minute. Pairs come and go two at a time, where the curves touch, so the count stays odd.\n// Knob 4: Hue. Turns the palette: at the start azure for cold and orange for warm with a magenta pressure curve; at 0.25 violet and green with red; at 0.5 red and cyan with green; at 0.75 green and violet with cyan. The temperature curve stays white and the pairs gold. Where cold or warm lands on orange or yellow the pale bands are lifted toward full brightness, so they never go brown or olive.\n\n// Each disk sits in a 64 x 64 square, the near side above the far side.\nconst S2 = 64;\nconst { floor, min, abs, sqrt, sin, cos, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The disks: radius RAD about the centre of each 64 x 64 square.\nconst RAD = 31, CX = 32, CY = 32;\n// Each field is a sum over AX zonal harmonics sqrt(2l+1) P_l(u . x) for every\n// degree l up to LMAX, each axis u wandering on a great circle.\nconst AX = 5, LMAX = 6;\n// The globe turns round an axis leaning TILT toward you.\nconst TILT = 0.42;\n// Grid seeds for Newton's method each frame, over one hemisphere.\nconst SEEDS = 72;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nfunction unit() {\n  for (;;) {\n    const x = 2 * random() - 1, y = 2 * random() - 1, z = 2 * random() - 1, r = x * x + y * y + z * z;\n    if (r > 0.01 && r \u003c 1) {\n      const k = 1 / sqrt(r);\n      return [x * k, y * k, z * k];\n    }\n  }\n}\n\n// One field: per axis a great circle (two orthonormal vectors and a speed)\n// and per degree a coefficient swinging with its own speed and phase.\nfunction field() {\n  const F = { e: [], w: [], amp: [], om: [], ph: [], u: new Float64Array(3 * AX), c: new Float64Array(AX * (LMAX + 1)) };\n  for (let j = 0; j \u003c AX; j++) {\n    const a = unit(), b0 = unit();\n    const d = a[0] * b0[0] + a[1] * b0[1] + a[2] * b0[2];\n    const b = [b0[0] - d * a[0], b0[1] - d * a[1], b0[2] - d * a[2]], bl = Math.hypot(b[0], b[1], b[2]);\n    F.e.push([a, [b[0] / bl, b[1] / bl, b[2] / bl], random() * TAU]);\n    F.w.push((0.08 + 0.12 * random()) * (random() \u003c 0.5 ? -1 : 1));\n    for (let l = 0; l \u003c= LMAX; l++) {\n      F.amp.push(l === 0 ? 0 : (random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.4 * random()));\n      F.om.push(0.15 + 0.3 * random());\n      F.ph.push(random() * TAU);\n    }\n  }\n  return F;\n}\n\n// Axes and coefficients at weather time t, with degree l weighted by how far\n// the Degree knob has come past it.\nfunction place(F, t, deg) {\n  for (let j = 0; j \u003c AX; j++) {\n    const [a, b, p] = F.e[j], th = p + F.w[j] * t, cs = cos(th), sn = sin(th);\n    for (let i = 0; i \u003c 3; i++) F.u[3 * j + i] = a[i] * cs + b[i] * sn;\n    for (let l = 1; l \u003c= LMAX; l++) {\n      const q = j * (LMAX + 1) + l, fade = cl(deg - l + 1, 0, 1);\n      F.c[q] = (fade * F.amp[q] * sqrt(2 * l + 1) * sin(F.om[q] * t + F.ph[q])) / Math.pow(l, 0.3);\n    }\n  }\n}\n\n// Even and odd parts of a field at unit vector x, and the gradient of the odd\n// part when grad is given: f(x) = even + odd, f(-x) = even - odd.\nfunction evalField(F, x, y, z, L, out, grad) {\n  let ev = 0, od = 0, gx = 0, gy = 0, gz = 0;\n  for (let j = 0; j \u003c AX; j++) {\n    const ux = F.u[3 * j], uy = F.u[3 * j + 1], uz = F.u[3 * j + 2], s = ux * x + uy * y + uz * z, base = j * (LMAX + 1);\n    let p0 = 1, p1 = s, d0 = 0, d1 = 1, o = F.c[base + 1] * p1, e = 0, dd = F.c[base + 1];\n    for (let l = 1; l \u003c L; l++) {\n      const p2 = ((2 * l + 1) * s * p1 - l * p0) / (l + 1), d2 = d0 + (2 * l + 1) * p1, c = F.c[base + l + 1];\n      if ((l + 1) & 1) {\n        o += c * p2;\n        dd += c * d2;\n      } else e += c * p2;\n      p0 = p1;\n      p1 = p2;\n      d0 = d1;\n      d1 = d2;\n    }\n    ev += e;\n    od += o;\n    if (grad) {\n      gx += dd * ux;\n      gy += dd * uy;\n      gz += dd * uz;\n    }\n  }\n  out[0] = ev;\n  out[1] = od;\n  if (grad) {\n    grad[0] = gx;\n    grad[1] = gy;\n    grad[2] = gz;\n  }\n}\n\nexport function setup(params) {\n  const P = S2 * S2;\n  // World direction of each pixel of the top square: x right, y up, z\n  // toward you, pulled onto the rim outside the disk.\n  const wx = new Float32Array(P), wy = new Float32Array(P), wz = new Float32Array(P), cov = new Float32Array(P);\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x, u = (x + 0.5 - CX) / RAD, v = (CY - y - 0.5) / RAD, r = sqrt(u * u + v * v);\n      cov[p] = cl((1 - r) * RAD + 0.5, 0, 1);\n      if (r \u003c 1) {\n        wx[p] = u;\n        wy[p] = v;\n        wz[p] = sqrt(1 - r * r);\n      } else {\n        wx[p] = u / r;\n        wy[p] = v / r;\n        wz[p] = 0;\n      }\n    }\n  // Seeds: a Fibonacci spiral over the upper hemisphere.\n  const seeds = [];\n  for (let i = 0; i \u003c SEEDS; i++) {\n    const z = (i + 0.5) / SEEDS, r = sqrt(1 - z * z), a = i * 2.39996323;\n    seeds.push([r * cos(a), r * sin(a), z]);\n  }\n  params.s = {\n    init: false, t: 0, wt: 0, deg: 3, L: 3, f: field(), g: field(), wx, wy, wz, cov, seeds,\n    fe: new Float32Array(P), fo: new Float32Array(P), ge: new Float32Array(P), go: new Float32Array(P),\n    lf: new Float32Array(P), lg: new Float32Array(P), roots: [], M: [1, 0, 0, 0, 1, 0, 0, 0, 1], hue: 0.06,\n    o1: [0, 0], o2: [0, 0], g1: [0, 0, 0], g2: [0, 0, 0], c: [0, 0, 0], d: [0, 0, 0],\n  };\n}\n\n// Newton's method on the sphere for fodd = godd = 0: the step is the\n// smallest tangent move that zeroes both linearised, taken from x and pulled\n// back onto the sphere.\nfunction newton(S, x0) {\n  let x = x0[0], y = x0[1], z = x0[2];\n  const { o1, o2, g1, g2 } = S;\n  for (let it = 0; it \u003c 24; it++) {\n    evalField(S.f, x, y, z, S.L, o1, g1);\n    evalField(S.g, x, y, z, S.L, o2, g2);\n    const F1 = o1[1], F2 = o2[1];\n    if (abs(F1) \u003c 1e-13 && abs(F2) \u003c 1e-13) return [x, y, z];\n    const d1 = g1[0] * x + g1[1] * y + g1[2] * z, d2 = g2[0] * x + g2[1] * y + g2[2] * z;\n    const ax = g1[0] - d1 * x, ay = g1[1] - d1 * y, az = g1[2] - d1 * z;\n    const bx = g2[0] - d2 * x, by = g2[1] - d2 * y, bz = g2[2] - d2 * z;\n    const a = ax * ax + ay * ay + az * az, b = ax * bx + ay * by + az * bz, c = bx * bx + by * by + bz * bz, det = a * c - b * b;\n    if (det \u003c 1e-14) return null;\n    const al = (-F1 * c + F2 * b) / det, be = (-F2 * a + F1 * b) / det;\n    let sx = al * ax + be * bx, sy = al * ay + be * by, sz = al * az + be * bz;\n    const sl = sqrt(sx * sx + sy * sy + sz * sz);\n    if (sl > 0.35) {\n      sx *= 0.35 / sl;\n      sy *= 0.35 / sl;\n      sz *= 0.35 / sl;\n    }\n    x += sx;\n    y += sy;\n    z += sz;\n    const n = 1 / sqrt(x * x + y * y + z * z);\n    x *= n;\n    y *= n;\n    z *= n;\n  }\n  evalField(S.f, x, y, z, S.L, o1);\n  evalField(S.g, x, y, z, S.L, o2);\n  return abs(o1[1]) \u003c 1e-10 && abs(o2[1]) \u003c 1e-10 ? [x, y, z] : null;\n}\n\n// All antipodal pairs, by Newton's method from three kinds of start: last\n// frame's pairs, every 2 x 2 block of LEDs on the near side where both odd\n// parts change sign, and a fixed spiral of seeds; each pair kept once.\nfunction findRoots(S) {\n  const found = [];\n  const add = (r) => {\n    if (!r) return;\n    for (const q of found) {\n      const d = (q[0] - r[0]) ** 2 + (q[1] - r[1]) ** 2 + (q[2] - r[2]) ** 2, e = (q[0] + r[0]) ** 2 + (q[1] + r[1]) ** 2 + (q[2] + r[2]) ** 2;\n      if (d \u003c 1e-8 || e \u003c 1e-8) return;\n    }\n    found.push(r);\n  };\n  for (const r of S.roots) add(newton(S, r));\n  const { fo, go, wx, wy, wz, M } = S;\n  for (let y = 0; y \u003c S2 - 1; y++)\n    for (let x = 0; x \u003c S2 - 1; x++) {\n      const p = y * S2 + x, q = [p, p + 1, p + S2, p + S2 + 1];\n      let fp = 0, fn = 0, gp = 0, gn = 0;\n      for (const i of q) {\n        if (fo[i] > 0) fp = 1;\n        else fn = 1;\n        if (go[i] > 0) gp = 1;\n        else gn = 1;\n      }\n      if (!(fp && fn && gp && gn)) continue;\n      const X = wx[p], Y = wy[p], Z = wz[p];\n      add(newton(S, [M[0] * X + M[1] * Y + M[2] * Z, M[3] * X + M[4] * Y + M[5] * Z, M[6] * X + M[7] * Y + M[8] * Z]));\n    }\n  for (const s of S.seeds) add(newton(S, s));\n  S.roots = found;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.deg = cl(k[0], 3, 6);\n  S.L = Math.ceil(S.deg - 1e-9);\n  const speed = cl(k[1], 0.2, 3), weather = 0.25 + 1.75 * cl(k[2], 0, 1);\n  S.hue = k[3];\n  S.t += d * speed;\n  S.wt += d * weather;\n  place(S.f, S.wt + 3, S.deg);\n  place(S.g, S.wt + 3, S.deg);\n  // Body from world: undo the lean, then the turn.\n  const ph = S.t * 0.025 * TAU, cp = cos(ph), sp = sin(ph), ct = cos(TILT), st = sin(TILT);\n  // World = Rx(TILT) Ry(ph) body; body = Ry(-ph) Rx(-TILT) world.\n  // Rx(-TILT): (x, y, z) -> (x, ct y + st z, -st y + ct z).\n  // Ry(-ph): (x, y, z) -> (cp x - sp z, y, sp x + cp z).\n  S.M = [cp, sp * st, -sp * ct, 0, ct, st, sp, -cp * st, cp * ct];\n  const { wx, wy, wz, fe, fo, ge, go, o1, o2, M } = S, L = S.L;\n  for (let p = 0; p \u003c S2 * S2; p++) {\n    const X = wx[p], Y = wy[p], Z = wz[p];\n    const x = M[0] * X + M[1] * Y + M[2] * Z, y = M[3] * X + M[4] * Y + M[5] * Z, z = M[6] * X + M[7] * Y + M[8] * Z;\n    evalField(S.f, x, y, z, L, o1);\n    evalField(S.g, x, y, z, L, o2);\n    fe[p] = o1[0];\n    fo[p] = o1[1];\n    ge[p] = o2[0];\n    go[p] = o2[1];\n  }\n  findRoots(S);\n}\n\n// Length of the screen gradient of A + sgn B at LED (x, y), per LED.\nfunction slope(A, B, sgn, x, y) {\n  const p = y * S2 + x, xl = x > 0 ? p - 1 : p, xr = x \u003c S2 - 1 ? p + 1 : p, yu = y > 0 ? p - S2 : p, yd = y \u003c S2 - 1 ? p + S2 : p;\n  const gx = (A[xr] - A[xl] + sgn * (B[xr] - B[xl])) / (xr - xl), gy = (A[yd] - A[yu] + sgn * (B[yd] - B[yu])) / ((yd - yu) / S2);\n  return sqrt(gx * gx + gy * gy) + 1e-9;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { fe, fo, ge, go, cov, wz, c } = S;\n  const h0 = 0.52 + S.hue, FS = 2.2, ISO = 2, gc = S.d;\n  // Orange and yellow go brown and olive when dim, so near hue 0.12 the\n  // pale bands are lifted toward full brightness.\n  const yl = [0, 0.5].map((o) => {\n    const h = h0 + o - floor(h0 + o);\n    return 0.7 * cl(1 - abs(h - 0.12) / 0.11, 0, 1);\n  });\n  hsv(h0 + 0.25, 0.75, 1, gc);\n  // Screen places of the pairs: the member that faces you.\n  const pts = [];\n  for (const r of S.roots) {\n    const M = S.M;\n    // World from body is the transpose of M.\n    let X = M[0] * r[0] + M[3] * r[1] + M[6] * r[2], Y = M[1] * r[0] + M[4] * r[1] + M[7] * r[2], Z = M[2] * r[0] + M[5] * r[1] + M[8] * r[2];\n    if (Z \u003c 0) {\n      X = -X;\n      Y = -Y;\n      Z = -Z;\n    }\n    pts.push([CX + X * RAD, CY - Y * RAD]);\n  }\n  const pulse = 0.75 + 0.25 * sin(S.t * 3), { lf, lg } = S;\n  // The two odd curves, the same in both disks: fodd(-x) = -fodd(x).\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x;\n      lf[p] = cl(1.25 - abs(fo[p]) / slope(fo, fo, 0, x, y), 0, 1) * cov[p];\n      lg[p] = cl(1.15 - abs(go[p]) / slope(go, go, 0, x, y), 0, 1) * cov[p];\n    }\n  for (let half = 0; half \u003c 2; half++) {\n    const sg = half ? -1 : 1;\n    for (let y = 0; y \u003c S2; y++)\n      for (let x = 0; x \u003c S2; x++) {\n        const p = y * S2 + x, a = cov[p];\n        if (a \u003c= 0) {\n          display.setPixel(x, y + half * S2, 0, 0, 0);\n          continue;\n        }\n        // Temperature: two tones apart from a pale middle, in soft bands.\n        const tv = cl((fe[p] + sg * fo[p]) / FS, -1, 1), m = abs(tv) * 4, band = (floor(m) + sm(0.35, 0.65, m - floor(m))) / 4;\n        const side = tv \u003c 0 ? 0 : 1, v0 = 0.6 + 0.4 * band;\n        hsv(h0 + 0.5 * side, 0.1 + 0.72 * band, v0 + (1 - v0) * yl[side] * sm(0, 0.4, band), c);\n        let shade = (0.86 + 0.14 * wz[p]) * a;\n        // Pressure: a few contour lines, darker.\n        const gv = (ge[p] + sg * go[p]) / ISO, fr = abs(gv - round(gv)) * ISO;\n        shade *= 1 - 0.55 * cl(0.95 - fr / slope(ge, go, sg, x, y), 0, 1);\n        let R = c[0] * shade, G = c[1] * shade, B = c[2] * shade;\n        // The curve godd = 0, where the pressure is the same at the antipode.\n        const ga = lg[p];\n        R += (gc[0] - R) * ga;\n        G += (gc[1] - G) * ga;\n        B += (gc[2] - B) * ga;\n        // The curve fodd = 0, where the temperature is.\n        const fa = lf[p];\n        R += (1 - R) * fa;\n        G += (1 - G) * fa;\n        B += (1 - B) * fa;\n        // The pairs: a gold core inside a dark ring, and a glow round it.\n        for (const q of pts) {\n          const dd = Math.hypot(x + 0.5 - q[0], y + 0.5 - q[1]);\n          if (dd >= 6.5) continue;\n          if (dd \u003c 2.1) {\n            R = 1;\n            G = 0.86;\n            B = 0.45;\n          } else if (dd \u003c 3.2) {\n            R *= 0.12;\n            G *= 0.12;\n            B *= 0.12;\n          } else {\n            const gw = pulse * 0.9 * (1 - (dd - 3.2) / 3.3) ** 1.5;\n            R += (1 - R) * gw;\n            G += (0.86 - G) * gw;\n            B += (0.45 - B) * gw * 0.5;\n          }\n        }\n        display.setPixel(x, y + half * S2, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n      }\n  }\n}\n","layer":{"id":"layer-borsuk-ulam","type":"code","name":"borsuk-ulam","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Borsuk-Ulam\n// Family:  topology\n// Idea:    A turning globe carries a slowly changing temperature and pressure, the top disk showing the side that faces you and the bottom disk the far side laid so that each point sits where its antipode sits above, and the white line where the temperature equals the temperature at the antipode crosses the magenta line where the pressure does at an odd number of gold points, the same in both disks, where two opposite places on the Earth have the same weather.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Borsuk-Ulam theorem (Karol Borsuk, 1933, after a question of Stanisław Ulam)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Degree=3..6, Speed=0.2..3, Weather=0..1, Hue=0..1\n//\n// Knob 1: Degree. The highest degree of the random spherical harmonics in both fields, the next degree fading in between whole numbers. The two curves hang only on the odd degrees, so at 3 they are cubic curves and meet at 1 to 9 pairs, 2.8 on average: one pair 36% of the time, three 42%, five 19%, seven 3%. 4 adds a finer even layer to the colours and the isobars and leaves the curves cubic; at 5 and 6 the curves are quintic, wind into loops and meet at up to 25 pairs, about 5 on average.\n// Knob 2: Speed. How fast the globe turns: at 2 once in 20 seconds round an axis leaning 24 degrees toward you, at 0.2 once in 200 seconds, at 3 once in 13. The curves and the pairs turn with it; a pair that slips over the rim comes back at once on the opposite rim, where its other point is rising.\n// Knob 3: Weather. How fast the temperature and the pressure change. At 0 each coefficient swings once in 56 to 168 seconds, the curves creep and a pair of pairs is born or dies about 12 times a minute at Degree 3; at 1 eight times faster, 7 to 21 seconds, about 74 times a minute. Pairs come and go two at a time, where the curves touch, so the count stays odd.\n// Knob 4: Hue. Turns the palette: at the start azure for cold and orange for warm with a magenta pressure curve; at 0.25 violet and green with red; at 0.5 red and cyan with green; at 0.75 green and violet with cyan. The temperature curve stays white and the pairs gold. Where cold or warm lands on orange or yellow the pale bands are lifted toward full brightness, so they never go brown or olive.\n\n// Each disk sits in a 64 x 64 square, the near side above the far side.\nconst S2 = 64;\nconst { floor, min, abs, sqrt, sin, cos, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The disks: radius RAD about the centre of each 64 x 64 square.\nconst RAD = 31, CX = 32, CY = 32;\n// Each field is a sum over AX zonal harmonics sqrt(2l+1) P_l(u . x) for every\n// degree l up to LMAX, each axis u wandering on a great circle.\nconst AX = 5, LMAX = 6;\n// The globe turns round an axis leaning TILT toward you.\nconst TILT = 0.42;\n// Grid seeds for Newton's method each frame, over one hemisphere.\nconst SEEDS = 72;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nfunction unit() {\n  for (;;) {\n    const x = 2 * random() - 1, y = 2 * random() - 1, z = 2 * random() - 1, r = x * x + y * y + z * z;\n    if (r > 0.01 && r \u003c 1) {\n      const k = 1 / sqrt(r);\n      return [x * k, y * k, z * k];\n    }\n  }\n}\n\n// One field: per axis a great circle (two orthonormal vectors and a speed)\n// and per degree a coefficient swinging with its own speed and phase.\nfunction field() {\n  const F = { e: [], w: [], amp: [], om: [], ph: [], u: new Float64Array(3 * AX), c: new Float64Array(AX * (LMAX + 1)) };\n  for (let j = 0; j \u003c AX; j++) {\n    const a = unit(), b0 = unit();\n    const d = a[0] * b0[0] + a[1] * b0[1] + a[2] * b0[2];\n    const b = [b0[0] - d * a[0], b0[1] - d * a[1], b0[2] - d * a[2]], bl = Math.hypot(b[0], b[1], b[2]);\n    F.e.push([a, [b[0] / bl, b[1] / bl, b[2] / bl], random() * TAU]);\n    F.w.push((0.08 + 0.12 * random()) * (random() \u003c 0.5 ? -1 : 1));\n    for (let l = 0; l \u003c= LMAX; l++) {\n      F.amp.push(l === 0 ? 0 : (random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.4 * random()));\n      F.om.push(0.15 + 0.3 * random());\n      F.ph.push(random() * TAU);\n    }\n  }\n  return F;\n}\n\n// Axes and coefficients at weather time t, with degree l weighted by how far\n// the Degree knob has come past it.\nfunction place(F, t, deg) {\n  for (let j = 0; j \u003c AX; j++) {\n    const [a, b, p] = F.e[j], th = p + F.w[j] * t, cs = cos(th), sn = sin(th);\n    for (let i = 0; i \u003c 3; i++) F.u[3 * j + i] = a[i] * cs + b[i] * sn;\n    for (let l = 1; l \u003c= LMAX; l++) {\n      const q = j * (LMAX + 1) + l, fade = cl(deg - l + 1, 0, 1);\n      F.c[q] = (fade * F.amp[q] * sqrt(2 * l + 1) * sin(F.om[q] * t + F.ph[q])) / Math.pow(l, 0.3);\n    }\n  }\n}\n\n// Even and odd parts of a field at unit vector x, and the gradient of the odd\n// part when grad is given: f(x) = even + odd, f(-x) = even - odd.\nfunction evalField(F, x, y, z, L, out, grad) {\n  let ev = 0, od = 0, gx = 0, gy = 0, gz = 0;\n  for (let j = 0; j \u003c AX; j++) {\n    const ux = F.u[3 * j], uy = F.u[3 * j + 1], uz = F.u[3 * j + 2], s = ux * x + uy * y + uz * z, base = j * (LMAX + 1);\n    let p0 = 1, p1 = s, d0 = 0, d1 = 1, o = F.c[base + 1] * p1, e = 0, dd = F.c[base + 1];\n    for (let l = 1; l \u003c L; l++) {\n      const p2 = ((2 * l + 1) * s * p1 - l * p0) / (l + 1), d2 = d0 + (2 * l + 1) * p1, c = F.c[base + l + 1];\n      if ((l + 1) & 1) {\n        o += c * p2;\n        dd += c * d2;\n      } else e += c * p2;\n      p0 = p1;\n      p1 = p2;\n      d0 = d1;\n      d1 = d2;\n    }\n    ev += e;\n    od += o;\n    if (grad) {\n      gx += dd * ux;\n      gy += dd * uy;\n      gz += dd * uz;\n    }\n  }\n  out[0] = ev;\n  out[1] = od;\n  if (grad) {\n    grad[0] = gx;\n    grad[1] = gy;\n    grad[2] = gz;\n  }\n}\n\nexport function setup(params) {\n  const P = S2 * S2;\n  // World direction of each pixel of the top square: x right, y up, z\n  // toward you, pulled onto the rim outside the disk.\n  const wx = new Float32Array(P), wy = new Float32Array(P), wz = new Float32Array(P), cov = new Float32Array(P);\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x, u = (x + 0.5 - CX) / RAD, v = (CY - y - 0.5) / RAD, r = sqrt(u * u + v * v);\n      cov[p] = cl((1 - r) * RAD + 0.5, 0, 1);\n      if (r \u003c 1) {\n        wx[p] = u;\n        wy[p] = v;\n        wz[p] = sqrt(1 - r * r);\n      } else {\n        wx[p] = u / r;\n        wy[p] = v / r;\n        wz[p] = 0;\n      }\n    }\n  // Seeds: a Fibonacci spiral over the upper hemisphere.\n  const seeds = [];\n  for (let i = 0; i \u003c SEEDS; i++) {\n    const z = (i + 0.5) / SEEDS, r = sqrt(1 - z * z), a = i * 2.39996323;\n    seeds.push([r * cos(a), r * sin(a), z]);\n  }\n  params.s = {\n    init: false, t: 0, wt: 0, deg: 3, L: 3, f: field(), g: field(), wx, wy, wz, cov, seeds,\n    fe: new Float32Array(P), fo: new Float32Array(P), ge: new Float32Array(P), go: new Float32Array(P),\n    lf: new Float32Array(P), lg: new Float32Array(P), roots: [], M: [1, 0, 0, 0, 1, 0, 0, 0, 1], hue: 0.06,\n    o1: [0, 0], o2: [0, 0], g1: [0, 0, 0], g2: [0, 0, 0], c: [0, 0, 0], d: [0, 0, 0],\n  };\n}\n\n// Newton's method on the sphere for fodd = godd = 0: the step is the\n// smallest tangent move that zeroes both linearised, taken from x and pulled\n// back onto the sphere.\nfunction newton(S, x0) {\n  let x = x0[0], y = x0[1], z = x0[2];\n  const { o1, o2, g1, g2 } = S;\n  for (let it = 0; it \u003c 24; it++) {\n    evalField(S.f, x, y, z, S.L, o1, g1);\n    evalField(S.g, x, y, z, S.L, o2, g2);\n    const F1 = o1[1], F2 = o2[1];\n    if (abs(F1) \u003c 1e-13 && abs(F2) \u003c 1e-13) return [x, y, z];\n    const d1 = g1[0] * x + g1[1] * y + g1[2] * z, d2 = g2[0] * x + g2[1] * y + g2[2] * z;\n    const ax = g1[0] - d1 * x, ay = g1[1] - d1 * y, az = g1[2] - d1 * z;\n    const bx = g2[0] - d2 * x, by = g2[1] - d2 * y, bz = g2[2] - d2 * z;\n    const a = ax * ax + ay * ay + az * az, b = ax * bx + ay * by + az * bz, c = bx * bx + by * by + bz * bz, det = a * c - b * b;\n    if (det \u003c 1e-14) return null;\n    const al = (-F1 * c + F2 * b) / det, be = (-F2 * a + F1 * b) / det;\n    let sx = al * ax + be * bx, sy = al * ay + be * by, sz = al * az + be * bz;\n    const sl = sqrt(sx * sx + sy * sy + sz * sz);\n    if (sl > 0.35) {\n      sx *= 0.35 / sl;\n      sy *= 0.35 / sl;\n      sz *= 0.35 / sl;\n    }\n    x += sx;\n    y += sy;\n    z += sz;\n    const n = 1 / sqrt(x * x + y * y + z * z);\n    x *= n;\n    y *= n;\n    z *= n;\n  }\n  evalField(S.f, x, y, z, S.L, o1);\n  evalField(S.g, x, y, z, S.L, o2);\n  return abs(o1[1]) \u003c 1e-10 && abs(o2[1]) \u003c 1e-10 ? [x, y, z] : null;\n}\n\n// All antipodal pairs, by Newton's method from three kinds of start: last\n// frame's pairs, every 2 x 2 block of LEDs on the near side where both odd\n// parts change sign, and a fixed spiral of seeds; each pair kept once.\nfunction findRoots(S) {\n  const found = [];\n  const add = (r) => {\n    if (!r) return;\n    for (const q of found) {\n      const d = (q[0] - r[0]) ** 2 + (q[1] - r[1]) ** 2 + (q[2] - r[2]) ** 2, e = (q[0] + r[0]) ** 2 + (q[1] + r[1]) ** 2 + (q[2] + r[2]) ** 2;\n      if (d \u003c 1e-8 || e \u003c 1e-8) return;\n    }\n    found.push(r);\n  };\n  for (const r of S.roots) add(newton(S, r));\n  const { fo, go, wx, wy, wz, M } = S;\n  for (let y = 0; y \u003c S2 - 1; y++)\n    for (let x = 0; x \u003c S2 - 1; x++) {\n      const p = y * S2 + x, q = [p, p + 1, p + S2, p + S2 + 1];\n      let fp = 0, fn = 0, gp = 0, gn = 0;\n      for (const i of q) {\n        if (fo[i] > 0) fp = 1;\n        else fn = 1;\n        if (go[i] > 0) gp = 1;\n        else gn = 1;\n      }\n      if (!(fp && fn && gp && gn)) continue;\n      const X = wx[p], Y = wy[p], Z = wz[p];\n      add(newton(S, [M[0] * X + M[1] * Y + M[2] * Z, M[3] * X + M[4] * Y + M[5] * Z, M[6] * X + M[7] * Y + M[8] * Z]));\n    }\n  for (const s of S.seeds) add(newton(S, s));\n  S.roots = found;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.deg = cl(k[0], 3, 6);\n  S.L = Math.ceil(S.deg - 1e-9);\n  const speed = cl(k[1], 0.2, 3), weather = 0.25 + 1.75 * cl(k[2], 0, 1);\n  S.hue = k[3];\n  S.t += d * speed;\n  S.wt += d * weather;\n  place(S.f, S.wt + 3, S.deg);\n  place(S.g, S.wt + 3, S.deg);\n  // Body from world: undo the lean, then the turn.\n  const ph = S.t * 0.025 * TAU, cp = cos(ph), sp = sin(ph), ct = cos(TILT), st = sin(TILT);\n  // World = Rx(TILT) Ry(ph) body; body = Ry(-ph) Rx(-TILT) world.\n  // Rx(-TILT): (x, y, z) -> (x, ct y + st z, -st y + ct z).\n  // Ry(-ph): (x, y, z) -> (cp x - sp z, y, sp x + cp z).\n  S.M = [cp, sp * st, -sp * ct, 0, ct, st, sp, -cp * st, cp * ct];\n  const { wx, wy, wz, fe, fo, ge, go, o1, o2, M } = S, L = S.L;\n  for (let p = 0; p \u003c S2 * S2; p++) {\n    const X = wx[p], Y = wy[p], Z = wz[p];\n    const x = M[0] * X + M[1] * Y + M[2] * Z, y = M[3] * X + M[4] * Y + M[5] * Z, z = M[6] * X + M[7] * Y + M[8] * Z;\n    evalField(S.f, x, y, z, L, o1);\n    evalField(S.g, x, y, z, L, o2);\n    fe[p] = o1[0];\n    fo[p] = o1[1];\n    ge[p] = o2[0];\n    go[p] = o2[1];\n  }\n  findRoots(S);\n}\n\n// Length of the screen gradient of A + sgn B at LED (x, y), per LED.\nfunction slope(A, B, sgn, x, y) {\n  const p = y * S2 + x, xl = x > 0 ? p - 1 : p, xr = x \u003c S2 - 1 ? p + 1 : p, yu = y > 0 ? p - S2 : p, yd = y \u003c S2 - 1 ? p + S2 : p;\n  const gx = (A[xr] - A[xl] + sgn * (B[xr] - B[xl])) / (xr - xl), gy = (A[yd] - A[yu] + sgn * (B[yd] - B[yu])) / ((yd - yu) / S2);\n  return sqrt(gx * gx + gy * gy) + 1e-9;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { fe, fo, ge, go, cov, wz, c } = S;\n  const h0 = 0.52 + S.hue, FS = 2.2, ISO = 2, gc = S.d;\n  // Orange and yellow go brown and olive when dim, so near hue 0.12 the\n  // pale bands are lifted toward full brightness.\n  const yl = [0, 0.5].map((o) => {\n    const h = h0 + o - floor(h0 + o);\n    return 0.7 * cl(1 - abs(h - 0.12) / 0.11, 0, 1);\n  });\n  hsv(h0 + 0.25, 0.75, 1, gc);\n  // Screen places of the pairs: the member that faces you.\n  const pts = [];\n  for (const r of S.roots) {\n    const M = S.M;\n    // World from body is the transpose of M.\n    let X = M[0] * r[0] + M[3] * r[1] + M[6] * r[2], Y = M[1] * r[0] + M[4] * r[1] + M[7] * r[2], Z = M[2] * r[0] + M[5] * r[1] + M[8] * r[2];\n    if (Z \u003c 0) {\n      X = -X;\n      Y = -Y;\n      Z = -Z;\n    }\n    pts.push([CX + X * RAD, CY - Y * RAD]);\n  }\n  const pulse = 0.75 + 0.25 * sin(S.t * 3), { lf, lg } = S;\n  // The two odd curves, the same in both disks: fodd(-x) = -fodd(x).\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x;\n      lf[p] = cl(1.25 - abs(fo[p]) / slope(fo, fo, 0, x, y), 0, 1) * cov[p];\n      lg[p] = cl(1.15 - abs(go[p]) / slope(go, go, 0, x, y), 0, 1) * cov[p];\n    }\n  for (let half = 0; half \u003c 2; half++) {\n    const sg = half ? -1 : 1;\n    for (let y = 0; y \u003c S2; y++)\n      for (let x = 0; x \u003c S2; x++) {\n        const p = y * S2 + x, a = cov[p];\n        if (a \u003c= 0) {\n          display.setPixel(x, y + half * S2, 0, 0, 0);\n          continue;\n        }\n        // Temperature: two tones apart from a pale middle, in soft bands.\n        const tv = cl((fe[p] + sg * fo[p]) / FS, -1, 1), m = abs(tv) * 4, band = (floor(m) + sm(0.35, 0.65, m - floor(m))) / 4;\n        const side = tv \u003c 0 ? 0 : 1, v0 = 0.6 + 0.4 * band;\n        hsv(h0 + 0.5 * side, 0.1 + 0.72 * band, v0 + (1 - v0) * yl[side] * sm(0, 0.4, band), c);\n        let shade = (0.86 + 0.14 * wz[p]) * a;\n        // Pressure: a few contour lines, darker.\n        const gv = (ge[p] + sg * go[p]) / ISO, fr = abs(gv - round(gv)) * ISO;\n        shade *= 1 - 0.55 * cl(0.95 - fr / slope(ge, go, sg, x, y), 0, 1);\n        let R = c[0] * shade, G = c[1] * shade, B = c[2] * shade;\n        // The curve godd = 0, where the pressure is the same at the antipode.\n        const ga = lg[p];\n        R += (gc[0] - R) * ga;\n        G += (gc[1] - G) * ga;\n        B += (gc[2] - B) * ga;\n        // The curve fodd = 0, where the temperature is.\n        const fa = lf[p];\n        R += (1 - R) * fa;\n        G += (1 - G) * fa;\n        B += (1 - B) * fa;\n        // The pairs: a gold core inside a dark ring, and a glow round it.\n        for (const q of pts) {\n          const dd = Math.hypot(x + 0.5 - q[0], y + 0.5 - q[1]);\n          if (dd >= 6.5) continue;\n          if (dd \u003c 2.1) {\n            R = 1;\n            G = 0.86;\n            B = 0.45;\n          } else if (dd \u003c 3.2) {\n            R *= 0.12;\n            G *= 0.12;\n            B *= 0.12;\n          } else {\n            const gw = pulse * 0.9 * (1 - (dd - 3.2) / 3.3) ** 1.5;\n            R += (1 - R) * gw;\n            G += (0.86 - G) * gw;\n            B += (0.45 - B) * gw * 0.5;\n          }\n        }\n        display.setPixel(x, y + half * S2, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Degree=3..6, Speed=0.2..3, Weather=0..1, Hue=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Degree","min":3,"max":6,"about":"The highest degree of the random spherical harmonics in both fields, the next degree fading in between whole numbers. The two curves hang only on the odd degrees, so at 3 they are cubic curves and meet at 1 to 9 pairs, 2.8 on average: one pair 36% of the time, three 42%, five 19%, seven 3%. 4 adds a finer even layer to the colours and the isobars and leaves the curves cubic; at 5 and 6 the curves are quintic, wind into loops and meet at up to 25 pairs, about 5 on average."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the globe turns: at 2 once in 20 seconds round an axis leaning 24 degrees toward you, at 0.2 once in 200 seconds, at 3 once in 13. The curves and the pairs turn with it; a pair that slips over the rim comes back at once on the opposite rim, where its other point is rising."},{"name":"Weather","min":0,"max":1,"about":"How fast the temperature and the pressure change. At 0 each coefficient swings once in 56 to 168 seconds, the curves creep and a pair of pairs is born or dies about 12 times a minute at Degree 3; at 1 eight times faster, 7 to 21 seconds, about 74 times a minute. Pairs come and go two at a time, where the curves touch, so the count stays odd."},{"name":"Hue","min":0,"max":1,"about":"Turns the palette: at the start azure for cold and orange for warm with a magenta pressure curve; at 0.25 violet and green with red; at 0.5 red and cyan with green; at 0.75 green and violet with cyan. The temperature curve stays white and the pairs gold. Where cold or warm lands on orange or yellow the pale bands are lifted toward full brightness, so they never go brown or olive."}],"start":[3,2,0,0.06],"measures":{"motion":0.3065,"detail":0.0677,"edges":0.3854,"complexity":1.6473,"coverage":0.7507,"colour":0.3391,"drift":0.0903},"knobResponse":[0.1438,0.1696,0.1763,0.2221]},{"slug":"bowling-lane","title":"Bowling Lane","family":"sport","round":22,"note":"볼러 뒤에서 본 10핀 레인이에요. 공이 오일 위로 제 반사를 끌며 휘어 올라가 핀을 흩고, 스위프 바가 데드우드를 쓸어 낸 뒤 핀이 다시 서요. 처음에는 블랙라이트 아래 핀과 화살표, 오일이 빛나고, K4 를 올리면 나무 레인에 하우스 조명이 켜져요.","idea":"A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.","buttons":"K1 tap throws the next ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-bowling-lane","type":"code","name":"bowling-lane","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Ball","min":0,"max":1,"about":"The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins."},{"name":"Hook","min":0,"max":1,"about":"How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side."},{"name":"Lights","min":0,"max":1,"about":"Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.1625,"detail":0.0689,"edges":0.5323,"complexity":1.7471,"coverage":0.9404,"colour":0.2104,"drift":0.042},"knobResponse":[0.0566,0.0281,0.0252,0.2377]},{"slug":"boys-surface","title":"Boy's Surface","family":"topology","round":31,"note":"사영 평면을 3차원에 담은 보이 곡면이 위 칸에서 세 겹 대칭축으로 돌고, 수평면이 오르내리며 자른 곡선이 아래 칸에 위에서 본 그림으로 떠요. 평면 아래는 단단하고 위는 옅은 유리라 안쪽에서 앞면과 뒷면이 만나는 이음매가 보여요. K1 을 누르면 평면이 삼중점에 멈춰 세 고리가 한 점을 지나요.","idea":"Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.","buttons":"K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.","code":"// ===== Patternflow pattern =====\n// Title:   Boy's Surface\n// Family:  topology\n// Idea:    Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Boy's surface (Werner Boy, 1901), in the parametrisation of Robert Bryant and Rob Kusner, pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan.\n// Knob 2: Speed. At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut.\n// Knob 4: Bands. Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light.\n// Buttons: K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.\n\nconst W = 64, S = 64, N = W * 128;\nconst { min, max, floor, sqrt, sin, cos, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The disk is sampled on NR rings of NA points; ring 0 is the centre.\nconst NR = 64, NA = 192, NP = (NR + 1) * NA, NC = NR * NA;\n// The surface lies within 1.571 of (0, 0, ZC), so 19.4 LEDs a unit keeps\n// it inside its square at every turn and tilt. The triple point is at the\n// origin, the top of the lobes at z = 0.443 and the pole at z = -2.\nconst ZC = -0.779, SC = 19.4, CX = 31.5, CY = 31.5, PY = 64 + 31.5;\nconst Z0 = -1.45, Z1 = 0.3;\n\n// Bryant and Kusner's formula for one point w = re + i im of the closed\n// unit disk, written out in real arithmetic.\nconst S5 = sqrt(5);\nfunction boy(re, im, out, o) {\n  const r2 = re * re - im * im, i2 = 2 * re * im;\n  const r3 = r2 * re - i2 * im, i3 = r2 * im + i2 * re;\n  const r4 = r2 * r2 - i2 * i2, i4 = 2 * r2 * i2;\n  const r6 = r3 * r3 - i3 * i3, i6 = 2 * r3 * i3;\n  const dr = r6 + S5 * r3 - 1, di = i6 + S5 * i3, dd = dr * dr + di * di;\n  // w (1 - w^4), w (1 + w^4) and 1 + w^6, each over the denominator.\n  const ar = re * (1 - r4) + im * i4, ai = im * (1 - r4) - re * i4;\n  const br = re * (1 + r4) - im * i4, bi = im * (1 + r4) + re * i4;\n  const g1 = (-1.5 * (ai * dr - ar * di)) / dd;\n  const g2 = (-1.5 * (br * dr + bi * di)) / dd;\n  const g3 = (i6 * dr - (1 + r6) * di) / dd - 0.5;\n  const g = g1 * g1 + g2 * g2 + g3 * g3;\n  out[o] = g1 / g;\n  out[o + 1] = g2 / g;\n  out[o + 2] = g3 / g;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points, normals and cells, once. The normal is\n// d/dRe x d/dIm of the map, the orientation of the disk: across the seam,\n// where antipodal points of the boundary circle meet, it points the other\n// way, and the colours follow it.\nfunction build(G) {\n  const P = G.p, Nn = G.n, T = new Float64Array(12);\n  for (let i = 0; i \u003c= NR; i++) {\n    const r = i / NR;\n    for (let j = 0; j \u003c NA; j++) {\n      const a = (TAU * j) / NA, re = r * cos(a), im = r * sin(a), k = i * NA + j, h = 1e-4;\n      boy(re, im, P, k * 3);\n      boy(re + h, im, T, 0);\n      boy(re - h, im, T, 3);\n      boy(re, im + h, T, 6);\n      boy(re, im - h, T, 9);\n      const ux = T[0] - T[3], uy = T[1] - T[4], uz = T[2] - T[5], vx = T[6] - T[9], vy = T[7] - T[10], vz = T[8] - T[11];\n      let nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;\n      const l = 1 / (sqrt(nx * nx + ny * ny + nz * nz) + 1e-30);\n      Nn[k * 3] = nx * l;\n      Nn[k * 3 + 1] = ny * l;\n      Nn[k * 3 + 2] = nz * l;\n    }\n  }\n  // The corners of each grid cell, and its mean height, which decides\n  // whether it is under the plane.\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j, o = c * 4, q = [c, c + NA, (i + 1) * NA + ((j + 1) % NA), i * NA + ((j + 1) % NA)];\n      for (let e = 0; e \u003c 4; e++) G.cc[o + e] = q[e];\n      G.cz[c] = (P[q[0] * 3 + 2] + P[q[1] * 3 + 2] + P[q[2] * 3 + 2] + P[q[3] * 3 + 2]) / 4;\n    }\n  // Cells of the grid by height: bin b lists every cell whose corners span\n  // a height in it, so the cut only looks at the cells near the plane.\n  const cnt = new Int32Array(NB + 1), lo = new Int32Array(NR * NA), hi = new Int32Array(NR * NA);\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j;\n      let a = 9, b = -9;\n      for (let e = 0; e \u003c 4; e++) (a = min(a, P[G.cc[c * 4 + e] * 3 + 2])), (b = max(b, P[G.cc[c * 4 + e] * 3 + 2]));\n      lo[c] = bin(a);\n      hi[c] = bin(b);\n      for (let k = lo[c]; k \u003c= hi[c]; k++) cnt[k + 1]++;\n    }\n  for (let k = 0; k \u003c NB; k++) cnt[k + 1] += cnt[k];\n  G.binAt = cnt.slice();\n  G.cells = new Int32Array(cnt[NB]);\n  for (let c = 0; c \u003c NR * NA; c++) for (let k = lo[c]; k \u003c= hi[c]; k++) G.cells[cnt[k]++] = c;\n}\n\n// Height bins for the cut, from the pole at -2 to the top at 0.45.\nconst NB = 96;\nconst bin = (z) => cl(floor(((z + 2.01) / 2.47) * NB), 0, NB - 1);\n\nexport function setup(params) {\n  const A = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    p: A(NP * 3), n: A(NP * 3), cc: I(NC * 4), cz: A(NC), binAt: null, cells: null,\n    // Each point's place in the side view, its depth there, and its row in the plan.\n    vx: A(NP), vy: A(NP), vd: A(NP), vp: A(NP),\n    // Depth and point per LED: the side view under the plane and over it,\n    // and the plan, which looks straight down on what is under it.\n    za: A(W * S), ia: I(W * S), zo: A(W * S), io: I(W * S), zp: A(W * S), ip: I(W * S),\n    line: A(N), col: A(N * 3), pal: A(12), c3: A(3), seg: A(4096 * 2), band: A(NR + 1),\n    L: [0, 1, 2].map(() => ({ a: A(W * S), b: A(W * S), c: A(W * S), f: new Int8Array(W * S), g: new Int8Array(W * S) })),\n    az: 0.4, sw: PI / 2, hold: 0, hw: 0, hue: 0, tilt: 0, bands: 0.06, zc: -0.5, palHue: -1, built: false,\n  };\n}\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const G = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  if (!G.built) build(G), (G.built = true);\n  G.hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3);\n  G.tilt = cl(k[2], 0, 1);\n  G.bands = cl(k[3], 0, 1);\n  // A third of a turn in 8.7 s and one sweep of the plane in 20 s at Speed 2.\n  G.az += d * sp * 0.12;\n  G.sw += (d * sp * TAU) / 40;\n  const b = input.btnPressed || [];\n  if (b[0]) G.hold = 6.6;\n  G.hold = max(0, G.hold - d);\n  // The plane eases over to the triple point, at z = 0, in 0.8 s, and back\n  // to its sweep in 0.8 s once the hold is over.\n  G.hw = cl(G.hw + (G.hold > 0.8 ? d : -d) / 0.8, 0, 1);\n  const zs = Z0 + (Z1 - Z0) * (0.5 - 0.5 * cos(G.sw));\n  G.zc = zs * (1 - sm(G.hw));\n}\n\n// Two colours for each face of the disk, one in the light and one in\n// shadow. A dim orange or yellow reads brown, so a face whose hue lies\n// between red and yellow turns crimson in shadow, and one between yellow\n// and green turns green; other faces lean a little toward violet.\nfunction palette(G) {\n  const t = G.pal;\n  for (let f = 0; f \u003c 2; f++) {\n    let h = G.hue + (f ? 0.52 : 0.92);\n    h -= floor(h);\n    const sh = h \u003c 0.17 ? 0.94 : h \u003c 0.33 ? 0.33 : h + cl(0.7 - h, -0.04, 0.04);\n    hsv(h, f ? 0.8 : 0.7, 1, t, f * 3);\n    hsv(sh, 0.85, 1, t, 6 + f * 3);\n  }\n  G.palHue = G.hue;\n}\n\n// A soft line one LED wide into the light buffer: points every half LED,\n// each shared between its four nearest LEDs.\nfunction soft(buf, x0, y0, x1, y1, w, ylo, yhi) {\n  const n = max(1, Math.ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) * 2)), ww = (w * sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2)) / n;\n  for (let i = 0; i \u003c n; i++) {\n    const t = (i + 0.5) / n, x = x0 + (x1 - x0) * t - 0.5, y = y0 + (y1 - y0) * t - 0.5;\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy;\n    for (let c = 0; c \u003c 4; c++) {\n      const xx = ix + (c & 1), yy = iy + (c >> 1);\n      if (xx \u003c 0 || xx >= W || yy \u003c ylo || yy >= yhi) continue;\n      buf[yy * W + xx] += ww * (c & 1 ? fx : 1 - fx) * (c >> 1 ? fy : 1 - fy);\n    }\n  }\n}\n\n// The colour of point k on face f in a view whose right, up and\n// toward-the-eye axes carry the normal to (a, b, c), into G.c3. The light is\n// two-sided Lambert from upper left in front, with a highlight, and the\n// disk's circles stripe it.\nfunction shade(G, k, a, b, c, gain, f) {\n  const pal = G.pal, sg = f ? -1 : 1, o = f * 3, so = 6 + o;\n  const ld = max(0, sg * (a * LX + b * LY + c * LZ)), h2 = max(0, sg * (a * HX + b * HY + c * HZ)) ** 2, h8 = (h2 * h2) ** 2;\n  // The shadow colour gives way to the lit one with the square of the light,\n  // and later still in the dimmed glass and plan.\n  const lit = (0.24 + 0.76 * ld) * G.band[(k / NA) | 0] * gain, sp = h8 * h8 * h8 * 0.55 * gain, m = ld * ld * gain;\n  G.c3[0] = ((pal[so] + (pal[o] - pal[so]) * m) * lit + sp) * 255;\n  G.c3[1] = ((pal[so + 1] + (pal[o + 1] - pal[so + 1]) * m) * lit + sp) * 255;\n  G.c3[2] = ((pal[so + 2] + (pal[o + 2] - pal[so + 2]) * m) * lit + sp) * 255;\n}\nconst LX = -0.45, LY = 0.62, LZ = 0.64, HL = 1 / sqrt(LX * LX + LY * LY + (LZ + 1) ** 2), HX = LX * HL, HY = LY * HL, HZ = (LZ + 1) * HL;\n\n// One grid cell into a depth buffer: every LED whose centre lies in the\n// box round its four corners. The boxes of neighbouring cells overlap, so\n// the turning surface has no holes.\nfunction fill(zb, ib, X, Y, cc, o, D, k) {\n  const a = cc[o], b = cc[o + 1], c = cc[o + 2], d = cc[o + 3];\n  let xa = X[a], xb = X[b], ya = Y[a], yb = Y[b];\n  if (xa > xb) (xb = xa), (xa = X[b]);\n  if (ya > yb) (yb = ya), (ya = Y[b]);\n  let t = X[c];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = X[d];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = Y[c];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  t = Y[d];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  // LED centres sit at whole numbers plus a half.\n  let x0 = (xa - 0.5) | 0, y0 = (ya - 0.5) | 0, x1 = (xb + 0.5) | 0, y1 = (yb + 0.5) | 0;\n  if (xa - 0.5 > x0) x0++;\n  if (ya - 0.5 > y0) y0++;\n  if (x0 \u003c 0) x0 = 0;\n  if (y0 \u003c 0) y0 = 0;\n  if (x1 > W) x1 = W;\n  if (y1 > S) y1 = S;\n  for (let yy = y0; yy \u003c y1; yy++) for (let q = yy * W + x0, qe = yy * W + x1; q \u003c qe; q++) if (D > zb[q]) (zb[q] = D), (ib[q] = k);\n}\n\n// Every cell into the side view's solid or glass layer by its mean height,\n// at the mean depth of its corners, and the solid ones into the plan too.\nfunction cellsIn(G, zc) {\n  const { cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip } = G;\n  for (let c = 0, o = 0; c \u003c NC; c++, o += 4) {\n    const k = cc[o], D = (vd[k] + vd[cc[o + 1]] + vd[cc[o + 2]] + vd[cc[o + 3]]) * 0.25;\n    if (cz[c] \u003c= zc) fill(za, ia, vx, vy, cc, o, D, k), fill(zp, ip, vx, vp, cc, o, cz[c], k);\n    else fill(zo, io, vx, vy, cc, o, D, k);\n  }\n}\n\n// The normal of each LED's point in the eye's frame (right, up, toward the\n// eye; the plan looks down the axis) and the face of the disk it shows. A\n// lone LED showing the other face from every lit neighbour is a cell's box\n// poking past a fold, and takes their face.\nfunction normals(G, ids, ca, sa, ce, se, plan, L) {\n  const n = G.n, { a, b, c, f, g } = L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const k = ids[q];\n    if (k \u003c 0) {\n      f[q] = -1;\n      continue;\n    }\n    const nx = n[k * 3], ny = n[k * 3 + 1], nz = n[k * 3 + 2], nyr = nx * sa + ny * ca;\n    a[q] = nx * ca - ny * sa;\n    b[q] = plan ? nyr : nyr * se + nz * ce;\n    c[q] = plan ? nz : nz * se - nyr * ce;\n    f[q] = c[q] >= 0 ? 0 : 1;\n  }\n  for (let q = 0; q \u003c W * S; q++) {\n    const fq = (g[q] = f[q]);\n    if (fq \u003c 0) continue;\n    const x = q & (W - 1), l = x > 0 ? f[q - 1] : -1, r = x \u003c W - 1 ? f[q + 1] : -1, u = q >= W ? f[q - W] : -1, d = q \u003c W * S - W ? f[q + W] : -1;\n    if (l !== fq && r !== fq && u !== fq && d !== fq && (l >= 0) + (r >= 0) + (u >= 0) + (d >= 0) >= 2) g[q] = 1 - fq;\n  }\n}\n\nexport function draw(display, params) {\n  const G = params.s;\n  if (!G || !G.built) return;\n  if (G.palHue !== G.hue) palette(G);\n  const { p, n, cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip, line, col, seg, c3 } = G;\n  const ca = cos(G.az), sa = sin(G.az), el = (22 + 68 * G.tilt) * (PI / 180), ce = cos(el), se = sin(el), zc = G.zc;\n  // The disk's circles: each ring of the grid is lit by its band, from 1.2\n  // on the light stripes to 0.35 in the middle of the dark ones.\n  const nb = 2 + 7 * G.bands;\n  for (let i = 0; i \u003c= NR; i++) G.band[i] = 1.2 - 0.85 * (0.5 - 0.5 * cos((TAU * nb * (NR - i)) / NR));\n  za.fill(-1e9);\n  zo.fill(-1e9);\n  zp.fill(-1e9);\n  ia.fill(-1);\n  io.fill(-1);\n  ip.fill(-1);\n  // The side view in two layers: what is under the plane is solid, what is\n  // over it is glass. The plan takes what is under the plane, nearest the\n  // eye above first.\n  for (let k = 0, o = 0; k \u003c NP; k++, o += 3) {\n    const x = p[o], y = p[o + 1], z = p[o + 2], xr = x * ca - y * sa, yr = x * sa + y * ca;\n    vx[k] = CX + SC * xr;\n    vy[k] = CY - SC * (yr * se + (z - ZC) * ce);\n    vd[k] = z * se - yr * ce;\n    vp[k] = CY - SC * yr;\n  }\n  cellsIn(G, zc);\n  normals(G, ia, ca, sa, ce, se, false, G.L[0]);\n  normals(G, io, ca, sa, ce, se, false, G.L[1]);\n  normals(G, ip, ca, sa, ce, se, true, G.L[2]);\n  const [A, O, Pl] = G.L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const o = q * 3, oo = (W * S + q) * 3;\n    let r = 0, g = 0, b = 0, k = ia[q];\n    if (k >= 0) shade(G, k, A.a[q], A.b[q], A.c[q], 1, A.g[q]), (r = c3[0]), (g = c3[1]), (b = c3[2]);\n    k = io[q];\n    if (k >= 0 && zo[q] > za[q]) {\n      // Glass: 60 percent of its own light over 55 of what is behind.\n      shade(G, k, O.a[q], O.b[q], O.c[q], 0.6, O.g[q]);\n      (r = r * 0.55 + c3[0]), (g = g * 0.55 + c3[1]), (b = b * 0.55 + c3[2]);\n    }\n    (col[o] = r), (col[o + 1] = g), (col[o + 2] = b);\n    k = ip[q];\n    if (k >= 0) shade(G, k, Pl.a[q], Pl.b[q], Pl.c[q], 0.5, Pl.g[q]), (col[oo] = c3[0]), (col[oo + 1] = c3[1]), (col[oo + 2] = c3[2]);\n    else col[oo] = col[oo + 1] = col[oo + 2] = 0;\n  }\n  // The cut: in each grid cell the plane crosses, the points where it\n  // crosses the cell's edges, two to a piece of the curve (four in a\n  // saddle, paired in order round the cell).\n  line.fill(0);\n  let ns = 0;\n  const bz = bin(zc), cells = G.cells, zs = [0, 0, 0, 0], cs = [0, 0, 0, 0];\n  for (let m = G.binAt[bz]; m \u003c G.binAt[bz + 1] && ns \u003c 2040; m++) {\n    const c = cells[m];\n    for (let e = 0; e \u003c 4; e++) cs[e] = cc[c * 4 + e];\n    let up = 0;\n    for (let e = 0; e \u003c 4; e++) up += (zs[e] = p[cs[e] * 3 + 2] - zc) > 0;\n    if (up === 0 || up === 4) continue;\n    for (let e = 0; e \u003c 4; e++) {\n      const z0 = zs[e], z1 = zs[(e + 1) & 3];\n      if (z0 > 0 === z1 > 0) continue;\n      const t = z0 / (z0 - z1), A = cs[e] * 3, B = cs[(e + 1) & 3] * 3;\n      seg[ns * 2] = p[A] + (p[B] - p[A]) * t;\n      seg[ns * 2 + 1] = p[A + 1] + (p[B + 1] - p[A + 1]) * t;\n      ns++;\n    }\n  }\n  // Each piece soft in both views; in the side view a piece behind the\n  // solid is faint.\n  for (let s = 0; s + 1 \u003c ns; s += 2) {\n    const ax = seg[s * 2], ay = seg[s * 2 + 1], bx = seg[s * 2 + 2], by = seg[s * 2 + 3];\n    const axr = ax * ca - ay * sa, ayr = ax * sa + ay * ca, bxr = bx * ca - by * sa, byr = bx * sa + by * ca;\n    const X0 = CX + SC * axr, X1 = CX + SC * bxr, Y0 = CY - SC * (ayr * se + (zc - ZC) * ce), Y1 = CY - SC * (byr * se + (zc - ZC) * ce);\n    const D = zc * se - ((ayr + byr) / 2) * ce, qx = Math.round((X0 + X1) / 2 - 0.5), qy = Math.round((Y0 + Y1) / 2 - 0.5);\n    const zq = qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c S ? za[qy * W + qx] : -1e9;\n    soft(line, X0, Y0, X1, Y1, D > zq - 0.1 ? 1 : 0.22, 0, S);\n    soft(line, X0, PY - SC * ayr, X1, PY - SC * byr, 1, S, 128);\n  }\n  // Ticks at the two edges of the side view mark the plane's height on the\n  // axis.\n  const ty = CY - SC * (zc - ZC) * ce, ty0 = floor(ty - 0.5), fy = ty - 0.5 - ty0;\n  for (const x of [0, 1, 62, 63])\n    for (let c = 0; c \u003c 2; c++) {\n      const yy = ty0 + c;\n      if (yy >= 0 && yy \u003c S) line[yy * W + x] += (c ? fy : 1 - fy) * (x === 0 || x === 63 ? 1 : 0.45);\n    }\n  for (let q = 0, o = 0; q \u003c N; q++, o += 3) {\n    const l = min(1, line[q] * 1.1);\n    const r = min(255, col[o]), g = min(255, col[o + 1]), b = min(255, col[o + 2]);\n    display.setPixel(q % W, (q / W) | 0, r + (255 - r) * l, g + (244 - g) * l, b + (205 - b) * l);\n  }\n}\n","layer":{"id":"layer-boys-surface","type":"code","name":"boys-surface","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Boy's Surface\n// Family:  topology\n// Idea:    Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Boy's surface (Werner Boy, 1901), in the parametrisation of Robert Bryant and Rob Kusner, pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan.\n// Knob 2: Speed. At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut.\n// Knob 4: Bands. Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light.\n// Buttons: K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.\n\nconst W = 64, S = 64, N = W * 128;\nconst { min, max, floor, sqrt, sin, cos, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The disk is sampled on NR rings of NA points; ring 0 is the centre.\nconst NR = 64, NA = 192, NP = (NR + 1) * NA, NC = NR * NA;\n// The surface lies within 1.571 of (0, 0, ZC), so 19.4 LEDs a unit keeps\n// it inside its square at every turn and tilt. The triple point is at the\n// origin, the top of the lobes at z = 0.443 and the pole at z = -2.\nconst ZC = -0.779, SC = 19.4, CX = 31.5, CY = 31.5, PY = 64 + 31.5;\nconst Z0 = -1.45, Z1 = 0.3;\n\n// Bryant and Kusner's formula for one point w = re + i im of the closed\n// unit disk, written out in real arithmetic.\nconst S5 = sqrt(5);\nfunction boy(re, im, out, o) {\n  const r2 = re * re - im * im, i2 = 2 * re * im;\n  const r3 = r2 * re - i2 * im, i3 = r2 * im + i2 * re;\n  const r4 = r2 * r2 - i2 * i2, i4 = 2 * r2 * i2;\n  const r6 = r3 * r3 - i3 * i3, i6 = 2 * r3 * i3;\n  const dr = r6 + S5 * r3 - 1, di = i6 + S5 * i3, dd = dr * dr + di * di;\n  // w (1 - w^4), w (1 + w^4) and 1 + w^6, each over the denominator.\n  const ar = re * (1 - r4) + im * i4, ai = im * (1 - r4) - re * i4;\n  const br = re * (1 + r4) - im * i4, bi = im * (1 + r4) + re * i4;\n  const g1 = (-1.5 * (ai * dr - ar * di)) / dd;\n  const g2 = (-1.5 * (br * dr + bi * di)) / dd;\n  const g3 = (i6 * dr - (1 + r6) * di) / dd - 0.5;\n  const g = g1 * g1 + g2 * g2 + g3 * g3;\n  out[o] = g1 / g;\n  out[o + 1] = g2 / g;\n  out[o + 2] = g3 / g;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points, normals and cells, once. The normal is\n// d/dRe x d/dIm of the map, the orientation of the disk: across the seam,\n// where antipodal points of the boundary circle meet, it points the other\n// way, and the colours follow it.\nfunction build(G) {\n  const P = G.p, Nn = G.n, T = new Float64Array(12);\n  for (let i = 0; i \u003c= NR; i++) {\n    const r = i / NR;\n    for (let j = 0; j \u003c NA; j++) {\n      const a = (TAU * j) / NA, re = r * cos(a), im = r * sin(a), k = i * NA + j, h = 1e-4;\n      boy(re, im, P, k * 3);\n      boy(re + h, im, T, 0);\n      boy(re - h, im, T, 3);\n      boy(re, im + h, T, 6);\n      boy(re, im - h, T, 9);\n      const ux = T[0] - T[3], uy = T[1] - T[4], uz = T[2] - T[5], vx = T[6] - T[9], vy = T[7] - T[10], vz = T[8] - T[11];\n      let nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;\n      const l = 1 / (sqrt(nx * nx + ny * ny + nz * nz) + 1e-30);\n      Nn[k * 3] = nx * l;\n      Nn[k * 3 + 1] = ny * l;\n      Nn[k * 3 + 2] = nz * l;\n    }\n  }\n  // The corners of each grid cell, and its mean height, which decides\n  // whether it is under the plane.\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j, o = c * 4, q = [c, c + NA, (i + 1) * NA + ((j + 1) % NA), i * NA + ((j + 1) % NA)];\n      for (let e = 0; e \u003c 4; e++) G.cc[o + e] = q[e];\n      G.cz[c] = (P[q[0] * 3 + 2] + P[q[1] * 3 + 2] + P[q[2] * 3 + 2] + P[q[3] * 3 + 2]) / 4;\n    }\n  // Cells of the grid by height: bin b lists every cell whose corners span\n  // a height in it, so the cut only looks at the cells near the plane.\n  const cnt = new Int32Array(NB + 1), lo = new Int32Array(NR * NA), hi = new Int32Array(NR * NA);\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j;\n      let a = 9, b = -9;\n      for (let e = 0; e \u003c 4; e++) (a = min(a, P[G.cc[c * 4 + e] * 3 + 2])), (b = max(b, P[G.cc[c * 4 + e] * 3 + 2]));\n      lo[c] = bin(a);\n      hi[c] = bin(b);\n      for (let k = lo[c]; k \u003c= hi[c]; k++) cnt[k + 1]++;\n    }\n  for (let k = 0; k \u003c NB; k++) cnt[k + 1] += cnt[k];\n  G.binAt = cnt.slice();\n  G.cells = new Int32Array(cnt[NB]);\n  for (let c = 0; c \u003c NR * NA; c++) for (let k = lo[c]; k \u003c= hi[c]; k++) G.cells[cnt[k]++] = c;\n}\n\n// Height bins for the cut, from the pole at -2 to the top at 0.45.\nconst NB = 96;\nconst bin = (z) => cl(floor(((z + 2.01) / 2.47) * NB), 0, NB - 1);\n\nexport function setup(params) {\n  const A = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    p: A(NP * 3), n: A(NP * 3), cc: I(NC * 4), cz: A(NC), binAt: null, cells: null,\n    // Each point's place in the side view, its depth there, and its row in the plan.\n    vx: A(NP), vy: A(NP), vd: A(NP), vp: A(NP),\n    // Depth and point per LED: the side view under the plane and over it,\n    // and the plan, which looks straight down on what is under it.\n    za: A(W * S), ia: I(W * S), zo: A(W * S), io: I(W * S), zp: A(W * S), ip: I(W * S),\n    line: A(N), col: A(N * 3), pal: A(12), c3: A(3), seg: A(4096 * 2), band: A(NR + 1),\n    L: [0, 1, 2].map(() => ({ a: A(W * S), b: A(W * S), c: A(W * S), f: new Int8Array(W * S), g: new Int8Array(W * S) })),\n    az: 0.4, sw: PI / 2, hold: 0, hw: 0, hue: 0, tilt: 0, bands: 0.06, zc: -0.5, palHue: -1, built: false,\n  };\n}\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const G = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  if (!G.built) build(G), (G.built = true);\n  G.hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3);\n  G.tilt = cl(k[2], 0, 1);\n  G.bands = cl(k[3], 0, 1);\n  // A third of a turn in 8.7 s and one sweep of the plane in 20 s at Speed 2.\n  G.az += d * sp * 0.12;\n  G.sw += (d * sp * TAU) / 40;\n  const b = input.btnPressed || [];\n  if (b[0]) G.hold = 6.6;\n  G.hold = max(0, G.hold - d);\n  // The plane eases over to the triple point, at z = 0, in 0.8 s, and back\n  // to its sweep in 0.8 s once the hold is over.\n  G.hw = cl(G.hw + (G.hold > 0.8 ? d : -d) / 0.8, 0, 1);\n  const zs = Z0 + (Z1 - Z0) * (0.5 - 0.5 * cos(G.sw));\n  G.zc = zs * (1 - sm(G.hw));\n}\n\n// Two colours for each face of the disk, one in the light and one in\n// shadow. A dim orange or yellow reads brown, so a face whose hue lies\n// between red and yellow turns crimson in shadow, and one between yellow\n// and green turns green; other faces lean a little toward violet.\nfunction palette(G) {\n  const t = G.pal;\n  for (let f = 0; f \u003c 2; f++) {\n    let h = G.hue + (f ? 0.52 : 0.92);\n    h -= floor(h);\n    const sh = h \u003c 0.17 ? 0.94 : h \u003c 0.33 ? 0.33 : h + cl(0.7 - h, -0.04, 0.04);\n    hsv(h, f ? 0.8 : 0.7, 1, t, f * 3);\n    hsv(sh, 0.85, 1, t, 6 + f * 3);\n  }\n  G.palHue = G.hue;\n}\n\n// A soft line one LED wide into the light buffer: points every half LED,\n// each shared between its four nearest LEDs.\nfunction soft(buf, x0, y0, x1, y1, w, ylo, yhi) {\n  const n = max(1, Math.ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) * 2)), ww = (w * sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2)) / n;\n  for (let i = 0; i \u003c n; i++) {\n    const t = (i + 0.5) / n, x = x0 + (x1 - x0) * t - 0.5, y = y0 + (y1 - y0) * t - 0.5;\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy;\n    for (let c = 0; c \u003c 4; c++) {\n      const xx = ix + (c & 1), yy = iy + (c >> 1);\n      if (xx \u003c 0 || xx >= W || yy \u003c ylo || yy >= yhi) continue;\n      buf[yy * W + xx] += ww * (c & 1 ? fx : 1 - fx) * (c >> 1 ? fy : 1 - fy);\n    }\n  }\n}\n\n// The colour of point k on face f in a view whose right, up and\n// toward-the-eye axes carry the normal to (a, b, c), into G.c3. The light is\n// two-sided Lambert from upper left in front, with a highlight, and the\n// disk's circles stripe it.\nfunction shade(G, k, a, b, c, gain, f) {\n  const pal = G.pal, sg = f ? -1 : 1, o = f * 3, so = 6 + o;\n  const ld = max(0, sg * (a * LX + b * LY + c * LZ)), h2 = max(0, sg * (a * HX + b * HY + c * HZ)) ** 2, h8 = (h2 * h2) ** 2;\n  // The shadow colour gives way to the lit one with the square of the light,\n  // and later still in the dimmed glass and plan.\n  const lit = (0.24 + 0.76 * ld) * G.band[(k / NA) | 0] * gain, sp = h8 * h8 * h8 * 0.55 * gain, m = ld * ld * gain;\n  G.c3[0] = ((pal[so] + (pal[o] - pal[so]) * m) * lit + sp) * 255;\n  G.c3[1] = ((pal[so + 1] + (pal[o + 1] - pal[so + 1]) * m) * lit + sp) * 255;\n  G.c3[2] = ((pal[so + 2] + (pal[o + 2] - pal[so + 2]) * m) * lit + sp) * 255;\n}\nconst LX = -0.45, LY = 0.62, LZ = 0.64, HL = 1 / sqrt(LX * LX + LY * LY + (LZ + 1) ** 2), HX = LX * HL, HY = LY * HL, HZ = (LZ + 1) * HL;\n\n// One grid cell into a depth buffer: every LED whose centre lies in the\n// box round its four corners. The boxes of neighbouring cells overlap, so\n// the turning surface has no holes.\nfunction fill(zb, ib, X, Y, cc, o, D, k) {\n  const a = cc[o], b = cc[o + 1], c = cc[o + 2], d = cc[o + 3];\n  let xa = X[a], xb = X[b], ya = Y[a], yb = Y[b];\n  if (xa > xb) (xb = xa), (xa = X[b]);\n  if (ya > yb) (yb = ya), (ya = Y[b]);\n  let t = X[c];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = X[d];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = Y[c];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  t = Y[d];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  // LED centres sit at whole numbers plus a half.\n  let x0 = (xa - 0.5) | 0, y0 = (ya - 0.5) | 0, x1 = (xb + 0.5) | 0, y1 = (yb + 0.5) | 0;\n  if (xa - 0.5 > x0) x0++;\n  if (ya - 0.5 > y0) y0++;\n  if (x0 \u003c 0) x0 = 0;\n  if (y0 \u003c 0) y0 = 0;\n  if (x1 > W) x1 = W;\n  if (y1 > S) y1 = S;\n  for (let yy = y0; yy \u003c y1; yy++) for (let q = yy * W + x0, qe = yy * W + x1; q \u003c qe; q++) if (D > zb[q]) (zb[q] = D), (ib[q] = k);\n}\n\n// Every cell into the side view's solid or glass layer by its mean height,\n// at the mean depth of its corners, and the solid ones into the plan too.\nfunction cellsIn(G, zc) {\n  const { cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip } = G;\n  for (let c = 0, o = 0; c \u003c NC; c++, o += 4) {\n    const k = cc[o], D = (vd[k] + vd[cc[o + 1]] + vd[cc[o + 2]] + vd[cc[o + 3]]) * 0.25;\n    if (cz[c] \u003c= zc) fill(za, ia, vx, vy, cc, o, D, k), fill(zp, ip, vx, vp, cc, o, cz[c], k);\n    else fill(zo, io, vx, vy, cc, o, D, k);\n  }\n}\n\n// The normal of each LED's point in the eye's frame (right, up, toward the\n// eye; the plan looks down the axis) and the face of the disk it shows. A\n// lone LED showing the other face from every lit neighbour is a cell's box\n// poking past a fold, and takes their face.\nfunction normals(G, ids, ca, sa, ce, se, plan, L) {\n  const n = G.n, { a, b, c, f, g } = L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const k = ids[q];\n    if (k \u003c 0) {\n      f[q] = -1;\n      continue;\n    }\n    const nx = n[k * 3], ny = n[k * 3 + 1], nz = n[k * 3 + 2], nyr = nx * sa + ny * ca;\n    a[q] = nx * ca - ny * sa;\n    b[q] = plan ? nyr : nyr * se + nz * ce;\n    c[q] = plan ? nz : nz * se - nyr * ce;\n    f[q] = c[q] >= 0 ? 0 : 1;\n  }\n  for (let q = 0; q \u003c W * S; q++) {\n    const fq = (g[q] = f[q]);\n    if (fq \u003c 0) continue;\n    const x = q & (W - 1), l = x > 0 ? f[q - 1] : -1, r = x \u003c W - 1 ? f[q + 1] : -1, u = q >= W ? f[q - W] : -1, d = q \u003c W * S - W ? f[q + W] : -1;\n    if (l !== fq && r !== fq && u !== fq && d !== fq && (l >= 0) + (r >= 0) + (u >= 0) + (d >= 0) >= 2) g[q] = 1 - fq;\n  }\n}\n\nexport function draw(display, params) {\n  const G = params.s;\n  if (!G || !G.built) return;\n  if (G.palHue !== G.hue) palette(G);\n  const { p, n, cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip, line, col, seg, c3 } = G;\n  const ca = cos(G.az), sa = sin(G.az), el = (22 + 68 * G.tilt) * (PI / 180), ce = cos(el), se = sin(el), zc = G.zc;\n  // The disk's circles: each ring of the grid is lit by its band, from 1.2\n  // on the light stripes to 0.35 in the middle of the dark ones.\n  const nb = 2 + 7 * G.bands;\n  for (let i = 0; i \u003c= NR; i++) G.band[i] = 1.2 - 0.85 * (0.5 - 0.5 * cos((TAU * nb * (NR - i)) / NR));\n  za.fill(-1e9);\n  zo.fill(-1e9);\n  zp.fill(-1e9);\n  ia.fill(-1);\n  io.fill(-1);\n  ip.fill(-1);\n  // The side view in two layers: what is under the plane is solid, what is\n  // over it is glass. The plan takes what is under the plane, nearest the\n  // eye above first.\n  for (let k = 0, o = 0; k \u003c NP; k++, o += 3) {\n    const x = p[o], y = p[o + 1], z = p[o + 2], xr = x * ca - y * sa, yr = x * sa + y * ca;\n    vx[k] = CX + SC * xr;\n    vy[k] = CY - SC * (yr * se + (z - ZC) * ce);\n    vd[k] = z * se - yr * ce;\n    vp[k] = CY - SC * yr;\n  }\n  cellsIn(G, zc);\n  normals(G, ia, ca, sa, ce, se, false, G.L[0]);\n  normals(G, io, ca, sa, ce, se, false, G.L[1]);\n  normals(G, ip, ca, sa, ce, se, true, G.L[2]);\n  const [A, O, Pl] = G.L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const o = q * 3, oo = (W * S + q) * 3;\n    let r = 0, g = 0, b = 0, k = ia[q];\n    if (k >= 0) shade(G, k, A.a[q], A.b[q], A.c[q], 1, A.g[q]), (r = c3[0]), (g = c3[1]), (b = c3[2]);\n    k = io[q];\n    if (k >= 0 && zo[q] > za[q]) {\n      // Glass: 60 percent of its own light over 55 of what is behind.\n      shade(G, k, O.a[q], O.b[q], O.c[q], 0.6, O.g[q]);\n      (r = r * 0.55 + c3[0]), (g = g * 0.55 + c3[1]), (b = b * 0.55 + c3[2]);\n    }\n    (col[o] = r), (col[o + 1] = g), (col[o + 2] = b);\n    k = ip[q];\n    if (k >= 0) shade(G, k, Pl.a[q], Pl.b[q], Pl.c[q], 0.5, Pl.g[q]), (col[oo] = c3[0]), (col[oo + 1] = c3[1]), (col[oo + 2] = c3[2]);\n    else col[oo] = col[oo + 1] = col[oo + 2] = 0;\n  }\n  // The cut: in each grid cell the plane crosses, the points where it\n  // crosses the cell's edges, two to a piece of the curve (four in a\n  // saddle, paired in order round the cell).\n  line.fill(0);\n  let ns = 0;\n  const bz = bin(zc), cells = G.cells, zs = [0, 0, 0, 0], cs = [0, 0, 0, 0];\n  for (let m = G.binAt[bz]; m \u003c G.binAt[bz + 1] && ns \u003c 2040; m++) {\n    const c = cells[m];\n    for (let e = 0; e \u003c 4; e++) cs[e] = cc[c * 4 + e];\n    let up = 0;\n    for (let e = 0; e \u003c 4; e++) up += (zs[e] = p[cs[e] * 3 + 2] - zc) > 0;\n    if (up === 0 || up === 4) continue;\n    for (let e = 0; e \u003c 4; e++) {\n      const z0 = zs[e], z1 = zs[(e + 1) & 3];\n      if (z0 > 0 === z1 > 0) continue;\n      const t = z0 / (z0 - z1), A = cs[e] * 3, B = cs[(e + 1) & 3] * 3;\n      seg[ns * 2] = p[A] + (p[B] - p[A]) * t;\n      seg[ns * 2 + 1] = p[A + 1] + (p[B + 1] - p[A + 1]) * t;\n      ns++;\n    }\n  }\n  // Each piece soft in both views; in the side view a piece behind the\n  // solid is faint.\n  for (let s = 0; s + 1 \u003c ns; s += 2) {\n    const ax = seg[s * 2], ay = seg[s * 2 + 1], bx = seg[s * 2 + 2], by = seg[s * 2 + 3];\n    const axr = ax * ca - ay * sa, ayr = ax * sa + ay * ca, bxr = bx * ca - by * sa, byr = bx * sa + by * ca;\n    const X0 = CX + SC * axr, X1 = CX + SC * bxr, Y0 = CY - SC * (ayr * se + (zc - ZC) * ce), Y1 = CY - SC * (byr * se + (zc - ZC) * ce);\n    const D = zc * se - ((ayr + byr) / 2) * ce, qx = Math.round((X0 + X1) / 2 - 0.5), qy = Math.round((Y0 + Y1) / 2 - 0.5);\n    const zq = qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c S ? za[qy * W + qx] : -1e9;\n    soft(line, X0, Y0, X1, Y1, D > zq - 0.1 ? 1 : 0.22, 0, S);\n    soft(line, X0, PY - SC * ayr, X1, PY - SC * byr, 1, S, 128);\n  }\n  // Ticks at the two edges of the side view mark the plane's height on the\n  // axis.\n  const ty = CY - SC * (zc - ZC) * ce, ty0 = floor(ty - 0.5), fy = ty - 0.5 - ty0;\n  for (const x of [0, 1, 62, 63])\n    for (let c = 0; c \u003c 2; c++) {\n      const yy = ty0 + c;\n      if (yy >= 0 && yy \u003c S) line[yy * W + x] += (c ? fy : 1 - fy) * (x === 0 || x === 63 ? 1 : 0.45);\n    }\n  for (let q = 0, o = 0; q \u003c N; q++, o += 3) {\n    const l = min(1, line[q] * 1.1);\n    const r = min(255, col[o]), g = min(255, col[o + 1]), b = min(255, col[o + 2]);\n    display.setPixel(q % W, (q / W) | 0, r + (255 - r) * l, g + (244 - g) * l, b + (205 - b) * l);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower."},{"name":"Tilt","min":0,"max":1,"about":"The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut."},{"name":"Bands","min":0,"max":1,"about":"Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light."}],"start":[0,2,0,0.06],"measures":{"motion":0.2388,"detail":0.0514,"edges":0.351,"complexity":1.1851,"coverage":0.4559,"colour":0.1933,"drift":0.0801},"knobResponse":[0.0711,0.1334,0.081,0.0395]},{"slug":"brachistochrone","title":"Brachistochrone","family":"physics","round":39,"note":"왼쪽 위 한 점에서 구슬 다섯이 직선, 갈릴레이의 원호, 포물선, 깊이 떨어지는 길, 사이클로이드를 타고 함께 미끄러져요. 직선보다 긴 길을 타는 사이클로이드의 구슬이 먼저 닿고, 구슬이 지금까지 닿을 수 있는 점들의 앞면이 고리를 남기며 패널 아래까지 퍼져요. 한 판 걸러 사이클로이드의 여러 높이에서 놓은 구슬이 바닥에 함께 닿아요.","idea":"Beads let go together from a point at the top left slide without friction down five tracks to a point on the right, a straight line, Galileo's circle, a parabola, a deep drop to the bottom of the panel and the cycloid, while the curve of all the points a bead could have reached by now spreads from the start down the whole panel and leaves rings behind; the cycloid's bead rides that front all the way and arrives first on a track longer than the line, the tracks light up in the order their beads come in, and every second race six beads let go from different heights on the cycloid all reach its bottom at once.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Brachistochrone\n// Family:  physics\n// Idea:    Beads let go together from a point at the top left slide without friction down five tracks to a point on the right, a straight line, Galileo's circle, a parabola, a deep drop to the bottom of the panel and the cycloid, while the curve of all the points a bead could have reached by now spreads from the start down the whole panel and leaves rings behind; the cycloid's bead rides that front all the way and arrives first on a track longer than the line, the tracks light up in the order their beads come in, and every second race six beads let go from different heights on the cycloid all reach its bottom at once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the brachistochrone problem (Johann Bernoulli, 1696), solved by the cycloid, and the tautochrone (Christiaan Huygens, 1673), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=0.2..3, End=0..1, Tracks=5..13\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the cycloid gold, Galileo's circle violet, the parabola green, the line cyan, the deep drop rose, and the front and its rings pale blue. From 0.33 to 0.68, where the front would turn red, orange, yellow or lime, it is paled and lifted so it reads cream, never brown.\n// Knob 2: Gravity. At 2 g is 31 LEDs a second squared: the cycloid's bead takes 2.4 s, the line's 2.84 s and the deep drop's 4.27 s, then the finish holds 1.3 s and fades in 0.6 s. Every time goes as one over the square root of g, so at 0.2 the race takes 3.2 times as long and at 3 it is 1.22 times as fast.\n// Knob 3: End. Where the end point sits on the right edge. At 0 at row 39, the bottom of the cycloid's arch, where the cycloid wins by 1.2% over the circle, 4.3% over the parabola and 18.5% over the line. Turned up the end point rises to row 13 and the cycloid dips 10 rows below it and climbs back, now 37.6% ahead of the circle and 74% ahead of the line; the beads of the second race pass the bottom of the arch together and those let go below the end swing back and meet there again.\n// Knob 4: Tracks. How many tracks race. At 5 the cycloid and its four classic rivals; each step adds another smooth track from the start to the end, eight more at 13, some starting shallow and some dipping below the end. None of them beats the cycloid.\n\nconst W = 64, H = 128, N = W * H;\n// The start point A, and the column the end point B sits in.\nconst AX = 3, AY = 3, BX = 60, DX = BX - AX;\n// B's depth below A: at End 0 the bottom of the arch, 2/pi of the width; at\n// End 1 ten rows. The deep drop always falls to row 124.\nconst BY0 = (2 * DX) / Math.PI, BY1 = 10, YDEEP = 121;\n// g at Gravity 2, in LEDs a second squared: the cycloid's race at End 0 then\n// takes 2.4 s.\nconst G2 = 31.1;\n// Points in each track's table, and the seconds of the hold, the fade, the\n// wait at the start and the light trail behind a bead.\nconst M = 640, HOLD = 1.3, FADE = 0.6, WAIT = 0.5, TRAIL = 0.28;\n// Rings of the front left behind every sixth of the cycloid's time.\nconst RINGS = 6;\n// Track colours, hue and saturation: the cycloid, Galileo's circle, the\n// parabola, the line, the deep drop, then the extra tracks.\nconst COL = [[0.13, 0.62], [0.79, 0.55], [0.35, 0.6], [0.5, 0.6], [0.96, 0.55]];\n// Extra tracks: the angle they leave A at, degrees from straight down; the\n// angle they come into B at, degrees below level (negative: coming up); and\n// the lengths of their two handles as shares of the chord.\nconst EXTRA = [[62, 12, 0.45, 0.3], [14, -35, 0.55, 0.45], [38, 38, 0.4, 0.4], [4, 2, 0.85, 0.3], [74, 55, 0.5, 0.35], [24, -55, 0.8, 0.5], [50, -12, 0.5, 0.35], [9, 22, 0.6, 0.3]];\nconst EXH = [0.06, 0.24, 0.43, 0.56, 0.68, 0.88, 0.17, 0.74];\nconst { floor, min, max, abs, sqrt, exp, sin, cos, acos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, q, p, p, t, v][i], [t, v, v, q, p, p][i], [p, p, t, v, v, q][i]];\n}\n\n// The cycloid from A through a point bx across and by down: the angle the\n// rolling circle has turned at that point, and its radius a.\nfunction cycloidTo(bx, by) {\n  const r = bx / by;\n  let lo = 1e-9, hi = 2 * PI - 1e-9;\n  for (let i = 0; i \u003c 56; i++) {\n    const m = (lo + hi) / 2, s = sin(m / 2);\n    if ((m - sin(m)) / (2 * s * s) \u003c r) lo = m;\n    else hi = m;\n  }\n  const th = (lo + hi) / 2, s = sin(th / 2);\n  return [th, by / (2 * s * s)];\n}\n\n// A track from a curve f(u), u from 0 at A to 1 at B, sampled densely at both\n// ends. Times are in units where g = 1: each chord is taken at constant\n// slope, so the bead's time on it is exactly its length over the mean of the\n// speeds sqrt(2y) at its two ends, and the sum is the time of the polyline.\nfunction track(f, hue, sat) {\n  const x = new Float32Array(M), y = new Float32Array(M), t = new Float64Array(M);\n  let px = 0, py = 0;\n  for (let i = 0; i \u003c M; i++) {\n    const u = 0.5 - 0.5 * cos((PI * i) / (M - 1)), p = f(u);\n    x[i] = p[0];\n    y[i] = max(0, p[1]);\n    if (i) t[i] = t[i - 1] + (Math.hypot(x[i] - px, y[i] - py) * Math.SQRT2) / (sqrt(py) + sqrt(y[i]) || 1);\n    px = x[i];\n    py = y[i];\n  }\n  return { x, y, t, T: t[M - 1], hue, sat, pix: null, wt: null, at: -1 };\n}\n\nfunction bezier(P) {\n  return (u) => {\n    const v = 1 - u, a = v * v * v, b = 3 * v * v * u, c = 3 * v * u * u, d = u * u * u;\n    return [a * P[0] + b * P[2] + c * P[4] + d * P[6], a * P[1] + b * P[3] + c * P[5] + d * P[7]];\n  };\n}\n\n// Lay a track into the panel as a thin core and a soft halo, kept as a list\n// of the pixels it touches.\nfunction rasterize(S, k) {\n  const R = S.tmp;\n  R.fill(0);\n  const { x, y } = k;\n  for (let i = 1; i \u003c M; i++) {\n    const x0 = x[i - 1] + AX, y0 = y[i - 1] + AY, len = Math.hypot(x[i] + AX - x0, y[i] + AY - y0), n = Math.ceil(len / 0.4);\n    for (let j = 0; j \u003c n; j++) {\n      const f = (j + 0.5) / n, px = x0 + (x[i] + AX - x0) * f, py = y0 + (y[i] + AY - y0) * f, w = len / n;\n      const ix = round(px), iy = round(py);\n      for (let b = -2; b \u003c= 2; b++) {\n        const yy = iy + b;\n        if (yy \u003c 0 || yy >= H) continue;\n        for (let a = -2; a \u003c= 2; a++) {\n          const xx = ix + a;\n          if (xx \u003c 0 || xx >= W) continue;\n          const d2 = (xx - px) ** 2 + (yy - py) ** 2;\n          R[yy * W + xx] += w * (0.75 * exp(-d2 / 0.5) + 0.07 * exp(-d2 / 5));\n        }\n      }\n    }\n  }\n  const pix = [], wt = [];\n  for (let p = 0; p \u003c N; p++)\n    if (R[p] > 0.01) {\n      pix.push(p);\n      wt.push(min(1.2, R[p]));\n    }\n  k.pix = Int32Array.from(pix);\n  k.wt = Float32Array.from(wt);\n}\n\n// Every track for the end point's place, and the cycloid's numbers.\nfunction build(S) {\n  const bx = DX, by = BY0 * (BY1 / BY0) ** S.end;\n  const [th, a] = cycloidTo(bx, by);\n  S.by = by;\n  S.th = th;\n  S.a = a;\n  const tr = [];\n  // The cycloid, the curve a point on a rolling circle draws.\n  tr.push(track((u) => [a * (th * u - sin(th * u)), 2 * a * sin((th * u) / 2) ** 2], ...COL[0]));\n  // Galileo's circle: the arc down to B whose lowest point is B.\n  const R = (bx * bx + by * by) / (2 * by), cy = by - R, a0 = Math.atan2(-cy, -bx);\n  tr.push(track((u) => [bx + R * cos(a0 + (PI / 2 - a0) * u), cy + R * sin(a0 + (PI / 2 - a0) * u)], ...COL[1]));\n  // The parabola whose lowest point is B.\n  tr.push(track((u) => [bx * u, by * (1 - (1 - u) ** 2)], ...COL[2]));\n  // The straight line, the shortest way.\n  tr.push(track((u) => [bx * u, by * u], ...COL[3]));\n  // The deep drop: straight down the left side to row 124, along the bottom\n  // and up into B. D is found so that its lowest point is there.\n  let lo = by, hi = 4 * YDEEP;\n  for (let i = 0; i \u003c 30; i++) {\n    const D = (lo + hi) / 2;\n    let m = 0;\n    for (let j = 1; j \u003c 64; j++) {\n      const u = j / 64;\n      m = max(m, 3 * u * (1 - u) * D + u * u * u * by);\n    }\n    if (m \u003c YDEEP) lo = D;\n    else hi = D;\n  }\n  tr.push(track(bezier([0, 0, 0, lo, bx, lo, bx, by]), ...COL[4]));\n  const C = Math.hypot(bx, by);\n  for (let j = 0; j \u003c S.ntr - 5; j++) {\n    const [p, q, h1, h2] = EXTRA[j], pa = (p * PI) / 180, qa = (q * PI) / 180;\n    tr.push(track(bezier([0, 0, h1 * C * sin(pa), h1 * C * cos(pa), bx - h2 * C * cos(qa), by - h2 * C * sin(qa), bx, by]), EXH[j], 0.5));\n  }\n  for (const k of tr) rasterize(S, k);\n  // Keep the arrivals already seen in this race.\n  if (S.tracks) for (let i = 0; i \u003c tr.length && i \u003c S.tracks.length; i++) if (S.tracks[i].at >= 0 && S.tau >= tr[i].T) tr[i].at = S.tracks[i].at;\n  S.tracks = tr;\n  S.tauB = th * sqrt(a);\n}\n\n// Where the field of least times is: the time of the cycloid from A through\n// each pixel, the fastest way there, and the bead's speed there. The front at\n// time t is the curve these times equal t on, and all of it moves at the speed\n// a bead would have there, so its distance in LEDs is the time to go times\n// that speed.\nfunction field(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dy = y - AY, dx = abs(x - AX);\n      if (dy \u003c 0 || (dy === 0 && dx === 0)) {\n        S.tau0[p] = dy \u003c 0 ? 1e9 : 0;\n        S.q[p] = 0;\n        continue;\n      }\n      if (dy === 0) S.tau0[p] = 2 * PI * sqrt(dx / (2 * PI));\n      else {\n        const [th, a] = cycloidTo(dx, dy);\n        S.tau0[p] = th * sqrt(a);\n      }\n      S.q[p] = sqrt(2 * dy);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, g: G2, end: -1, ntr: 0, tracks: null, mode: 0, phase: 0, clock: 0, tau: 0, fade: 1, t: 0, meet: [],\n    tau0: new Float32Array(N), q: new Float32Array(N), tmp: new Float32Array(N),\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N),\n  };\n  field(params.s);\n}\n\n// The tautochrone: from rest at arc length s0 above the bottom of the arch, a\n// bead's arc length is s0 cos(t sqrt(g / 4a)), whatever s0 is.\nfunction tautoBeads(S) {\n  const a = S.a, out = [];\n  for (let j = 0; j \u003c 6; j++) out.push(4 * a * (1 - j / 6));\n  return out;\n}\nfunction onCycloid(S, s) {\n  const th = 2 * acos(cl(s / (4 * S.a), -1, 1));\n  return [S.a * (th - sin(th)), S.a * (1 - cos(th)), th];\n}\n\n// The race's last moment, in g = 1 time.\nfunction raceEnd(S) {\n  if (S.mode === 0) {\n    let m = 0;\n    for (const k of S.tracks) m = max(m, k.T);\n    return m;\n  }\n  const bot = PI * sqrt(S.a);\n  return S.th \u003c= PI + 1e-6 ? S.tauB : 3 * bot;\n}\n\nfunction at(k, tau) {\n  const t = k.t;\n  if (tau >= k.T) return [k.x[M - 1], k.y[M - 1]];\n  if (tau \u003c= 0) return [0, 0];\n  let lo = 0, hi = M - 1;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (t[m] \u003c= tau) lo = m;\n    else hi = m;\n  }\n  const f = (tau - t[lo]) / (t[hi] - t[lo] || 1);\n  return [k.x[lo] + (k.x[hi] - k.x[lo]) * f, k.y[lo] + (k.y[hi] - k.y[lo]) * f];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 5], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.g = G2 * (cl(k[1], 0.2, 3) / 2);\n  const end = cl(k[2], 0, 1), ntr = round(cl(k[3], 5, 13));\n  if (abs(end - S.end) > 0.002 || ntr !== S.ntr) {\n    S.end = end;\n    S.ntr = ntr;\n    build(S);\n  }\n  const sg = sqrt(S.g);\n  S.t += d;\n  S.clock += d;\n  if (S.phase === 0 && S.clock >= WAIT) {\n    S.phase = 1;\n    S.tau = 0;\n  } else if (S.phase >= 1) {\n    const before = S.tau;\n    S.tau += d * sg;\n    if (S.mode === 0)\n      for (const tk of S.tracks)\n        // The arrival, placed inside the frame where it fell.\n        if (tk.at \u003c 0 && S.tau >= tk.T) tk.at = S.t - (S.tau - tk.T) / sg;\n    if (S.mode === 1 && S.th >= PI - 1e-6) {\n      const bot = PI * sqrt(S.a);\n      for (const m of [bot, 3 * bot]) if (before \u003c m && S.tau >= m) S.meet.push(S.t - (S.tau - m) / sg);\n    }\n    if (S.phase === 1 && S.tau >= raceEnd(S)) {\n      S.phase = 2;\n      S.clock = 0;\n    } else if (S.phase === 2 && S.clock >= HOLD) {\n      S.phase = 3;\n      S.clock = 0;\n    } else if (S.phase === 3) {\n      S.fade = 1 - S.clock / FADE;\n      if (S.clock >= FADE) {\n        S.phase = 0;\n        S.clock = 0;\n        S.fade = 1;\n        S.tau = 0;\n        S.mode ^= 1;\n        S.meet = [];\n        for (const tk of S.tracks) tk.at = -1;\n      }\n    }\n  }\n}\n\n// A soft dot of light into the colour buffers.\nfunction dot(S, x, y, r, w, c) {\n  const xi = round(x + AX), yi = round(y + AY), k = -1 / (r * r);\n  for (let j = yi - 2; j \u003c= yi + 2; j++) {\n    if (j \u003c 0 || j >= H) continue;\n    for (let i = xi - 2; i \u003c= xi + 2; i++) {\n      if (i \u003c 0 || i >= W) continue;\n      const e = w * exp(((i - x - AX) ** 2 + (j - y - AY) ** 2) * k), p = j * W + i;\n      S.R[p] += e * c[0];\n      S.G[p] += e * c[1];\n      S.B[p] += e * c[2];\n    }\n  }\n}\n\nfunction ring(S, x, y, age, c) {\n  const r = 1.5 + 16 * age, w = 0.8 * exp(-age / 0.22), n = round(6 * r + 8);\n  if (w \u003c 0.03) return;\n  for (let j = 0; j \u003c n; j++) {\n    const a = (2 * PI * j) / n;\n    dot(S, x + r * cos(a), y + r * sin(a), 0.7, w, c);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tracks) return;\n  const { R, G, B, tau0, q } = S;\n  const fade = S.phase === 3 ? S.fade : 1, live = S.phase >= 1, tau = live ? S.tau : 0, sg = sqrt(S.g);\n  // The front, the light it leaves behind and its rings, pale blue.\n  const fh = 0.6 + S.hue, dh = abs(fh - floor(fh) - 0.11), warm = cl(1.9 - min(dh, 1 - dh) / 0.09, 0, 1);\n  // Orange and yellow go brown this faint: there the front is paled and lifted.\n  const fc = hsv(fh, 0.5 - 0.3 * warm, 1 + 0.4 * warm), rk = S.tauB / RINGS;\n  const nring = live ? floor(tau / rk) : 0;\n  for (let p = 0; p \u003c N; p++) {\n    let v = 0;\n    if (live && q[p] > 0) {\n      const dd = (tau0[p] - tau) * q[p];\n      if (dd \u003c 2.5) {\n        if (dd > -2.5) v += 0.55 * exp(-dd * dd);\n        if (dd \u003c 0) v += 0.09 + 0.16 * exp(dd / 7);\n        for (let r = 1; r \u003c= nring; r++) {\n          const e = (tau0[p] - r * rk) * q[p];\n          if (e > -2 && e \u003c 2) v += 0.24 * exp(-e * e * 2);\n        }\n      }\n    }\n    v *= fade;\n    R[p] = v * fc[0];\n    G[p] = v * fc[1];\n    B[p] = v * fc[2];\n  }\n  // The tracks, faint, each lit up when its bead arrives and staying lit.\n  const tc = [];\n  for (const k of S.tracks) {\n    const c = hsv(k.hue + S.hue, k.sat, 1);\n    tc.push(c);\n    let f = 0.3;\n    if (S.mode === 1 && k !== S.tracks[0]) f = 0.16;\n    if (k.at >= 0) {\n      const age = S.t - k.at;\n      f += fade * (0.22 + 0.5 * exp(-age / 0.3));\n    }\n    for (let i = 0; i \u003c k.pix.length; i++) {\n      const p = k.pix[i], w = k.wt[i] * f;\n      R[p] += w * c[0];\n      G[p] += w * c[1];\n      B[p] += w * c[2];\n    }\n  }\n  const white = [1, 1, 1], bx = DX, by = S.by;\n  if (live) {\n    const dtr = (TRAIL * sg) / 12;\n    if (S.mode === 0)\n      S.tracks.forEach((k, i) => {\n        const c = tc[i];\n        if (k.at >= 0) {\n          ring(S, bx, by, S.t - k.at, c);\n          if (S.t - k.at > 0.15) return;\n        }\n        for (let j = 12; j >= 1; j--) {\n          const p = at(k, tau - j * dtr);\n          dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n        }\n        const p = at(k, tau);\n        dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n        dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n      });\n    else {\n      // The second race: beads from six heights on the cycloid, the one at A\n      // the same bead as in the race.\n      const c = tc[0], w = 1 / (2 * sqrt(S.a)), sB = 4 * S.a * cos(S.th / 2);\n      for (const s0 of tautoBeads(S)) {\n        // A bead let go above the end point's height leaves the track there.\n        const tEnd = s0 >= abs(sB) - 1e-6 ? acos(cl(sB / s0, -1, 1)) / w : 1e9;\n        if (tau > tEnd + 0.15 * sg) continue;\n        for (let j = 12; j >= 0; j--) {\n          const tt = min(max(0, tau - j * dtr), tEnd), p = onCycloid(S, s0 * cos(tt * w));\n          if (j) dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n          else {\n            dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n            dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n          }\n        }\n      }\n      for (const m of S.meet) ring(S, PI * S.a, 2 * S.a, S.t - m, c);\n    }\n  }\n  // A and B.\n  dot(S, 0, 0, 0.9, 0.7, white);\n  dot(S, bx, by, 0.9, 0.7, white);\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n}\n","layer":{"id":"layer-brachistochrone","type":"code","name":"brachistochrone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Brachistochrone\n// Family:  physics\n// Idea:    Beads let go together from a point at the top left slide without friction down five tracks to a point on the right, a straight line, Galileo's circle, a parabola, a deep drop to the bottom of the panel and the cycloid, while the curve of all the points a bead could have reached by now spreads from the start down the whole panel and leaves rings behind; the cycloid's bead rides that front all the way and arrives first on a track longer than the line, the tracks light up in the order their beads come in, and every second race six beads let go from different heights on the cycloid all reach its bottom at once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the brachistochrone problem (Johann Bernoulli, 1696), solved by the cycloid, and the tautochrone (Christiaan Huygens, 1673), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=0.2..3, End=0..1, Tracks=5..13\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the cycloid gold, Galileo's circle violet, the parabola green, the line cyan, the deep drop rose, and the front and its rings pale blue. From 0.33 to 0.68, where the front would turn red, orange, yellow or lime, it is paled and lifted so it reads cream, never brown.\n// Knob 2: Gravity. At 2 g is 31 LEDs a second squared: the cycloid's bead takes 2.4 s, the line's 2.84 s and the deep drop's 4.27 s, then the finish holds 1.3 s and fades in 0.6 s. Every time goes as one over the square root of g, so at 0.2 the race takes 3.2 times as long and at 3 it is 1.22 times as fast.\n// Knob 3: End. Where the end point sits on the right edge. At 0 at row 39, the bottom of the cycloid's arch, where the cycloid wins by 1.2% over the circle, 4.3% over the parabola and 18.5% over the line. Turned up the end point rises to row 13 and the cycloid dips 10 rows below it and climbs back, now 37.6% ahead of the circle and 74% ahead of the line; the beads of the second race pass the bottom of the arch together and those let go below the end swing back and meet there again.\n// Knob 4: Tracks. How many tracks race. At 5 the cycloid and its four classic rivals; each step adds another smooth track from the start to the end, eight more at 13, some starting shallow and some dipping below the end. None of them beats the cycloid.\n\nconst W = 64, H = 128, N = W * H;\n// The start point A, and the column the end point B sits in.\nconst AX = 3, AY = 3, BX = 60, DX = BX - AX;\n// B's depth below A: at End 0 the bottom of the arch, 2/pi of the width; at\n// End 1 ten rows. The deep drop always falls to row 124.\nconst BY0 = (2 * DX) / Math.PI, BY1 = 10, YDEEP = 121;\n// g at Gravity 2, in LEDs a second squared: the cycloid's race at End 0 then\n// takes 2.4 s.\nconst G2 = 31.1;\n// Points in each track's table, and the seconds of the hold, the fade, the\n// wait at the start and the light trail behind a bead.\nconst M = 640, HOLD = 1.3, FADE = 0.6, WAIT = 0.5, TRAIL = 0.28;\n// Rings of the front left behind every sixth of the cycloid's time.\nconst RINGS = 6;\n// Track colours, hue and saturation: the cycloid, Galileo's circle, the\n// parabola, the line, the deep drop, then the extra tracks.\nconst COL = [[0.13, 0.62], [0.79, 0.55], [0.35, 0.6], [0.5, 0.6], [0.96, 0.55]];\n// Extra tracks: the angle they leave A at, degrees from straight down; the\n// angle they come into B at, degrees below level (negative: coming up); and\n// the lengths of their two handles as shares of the chord.\nconst EXTRA = [[62, 12, 0.45, 0.3], [14, -35, 0.55, 0.45], [38, 38, 0.4, 0.4], [4, 2, 0.85, 0.3], [74, 55, 0.5, 0.35], [24, -55, 0.8, 0.5], [50, -12, 0.5, 0.35], [9, 22, 0.6, 0.3]];\nconst EXH = [0.06, 0.24, 0.43, 0.56, 0.68, 0.88, 0.17, 0.74];\nconst { floor, min, max, abs, sqrt, exp, sin, cos, acos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, q, p, p, t, v][i], [t, v, v, q, p, p][i], [p, p, t, v, v, q][i]];\n}\n\n// The cycloid from A through a point bx across and by down: the angle the\n// rolling circle has turned at that point, and its radius a.\nfunction cycloidTo(bx, by) {\n  const r = bx / by;\n  let lo = 1e-9, hi = 2 * PI - 1e-9;\n  for (let i = 0; i \u003c 56; i++) {\n    const m = (lo + hi) / 2, s = sin(m / 2);\n    if ((m - sin(m)) / (2 * s * s) \u003c r) lo = m;\n    else hi = m;\n  }\n  const th = (lo + hi) / 2, s = sin(th / 2);\n  return [th, by / (2 * s * s)];\n}\n\n// A track from a curve f(u), u from 0 at A to 1 at B, sampled densely at both\n// ends. Times are in units where g = 1: each chord is taken at constant\n// slope, so the bead's time on it is exactly its length over the mean of the\n// speeds sqrt(2y) at its two ends, and the sum is the time of the polyline.\nfunction track(f, hue, sat) {\n  const x = new Float32Array(M), y = new Float32Array(M), t = new Float64Array(M);\n  let px = 0, py = 0;\n  for (let i = 0; i \u003c M; i++) {\n    const u = 0.5 - 0.5 * cos((PI * i) / (M - 1)), p = f(u);\n    x[i] = p[0];\n    y[i] = max(0, p[1]);\n    if (i) t[i] = t[i - 1] + (Math.hypot(x[i] - px, y[i] - py) * Math.SQRT2) / (sqrt(py) + sqrt(y[i]) || 1);\n    px = x[i];\n    py = y[i];\n  }\n  return { x, y, t, T: t[M - 1], hue, sat, pix: null, wt: null, at: -1 };\n}\n\nfunction bezier(P) {\n  return (u) => {\n    const v = 1 - u, a = v * v * v, b = 3 * v * v * u, c = 3 * v * u * u, d = u * u * u;\n    return [a * P[0] + b * P[2] + c * P[4] + d * P[6], a * P[1] + b * P[3] + c * P[5] + d * P[7]];\n  };\n}\n\n// Lay a track into the panel as a thin core and a soft halo, kept as a list\n// of the pixels it touches.\nfunction rasterize(S, k) {\n  const R = S.tmp;\n  R.fill(0);\n  const { x, y } = k;\n  for (let i = 1; i \u003c M; i++) {\n    const x0 = x[i - 1] + AX, y0 = y[i - 1] + AY, len = Math.hypot(x[i] + AX - x0, y[i] + AY - y0), n = Math.ceil(len / 0.4);\n    for (let j = 0; j \u003c n; j++) {\n      const f = (j + 0.5) / n, px = x0 + (x[i] + AX - x0) * f, py = y0 + (y[i] + AY - y0) * f, w = len / n;\n      const ix = round(px), iy = round(py);\n      for (let b = -2; b \u003c= 2; b++) {\n        const yy = iy + b;\n        if (yy \u003c 0 || yy >= H) continue;\n        for (let a = -2; a \u003c= 2; a++) {\n          const xx = ix + a;\n          if (xx \u003c 0 || xx >= W) continue;\n          const d2 = (xx - px) ** 2 + (yy - py) ** 2;\n          R[yy * W + xx] += w * (0.75 * exp(-d2 / 0.5) + 0.07 * exp(-d2 / 5));\n        }\n      }\n    }\n  }\n  const pix = [], wt = [];\n  for (let p = 0; p \u003c N; p++)\n    if (R[p] > 0.01) {\n      pix.push(p);\n      wt.push(min(1.2, R[p]));\n    }\n  k.pix = Int32Array.from(pix);\n  k.wt = Float32Array.from(wt);\n}\n\n// Every track for the end point's place, and the cycloid's numbers.\nfunction build(S) {\n  const bx = DX, by = BY0 * (BY1 / BY0) ** S.end;\n  const [th, a] = cycloidTo(bx, by);\n  S.by = by;\n  S.th = th;\n  S.a = a;\n  const tr = [];\n  // The cycloid, the curve a point on a rolling circle draws.\n  tr.push(track((u) => [a * (th * u - sin(th * u)), 2 * a * sin((th * u) / 2) ** 2], ...COL[0]));\n  // Galileo's circle: the arc down to B whose lowest point is B.\n  const R = (bx * bx + by * by) / (2 * by), cy = by - R, a0 = Math.atan2(-cy, -bx);\n  tr.push(track((u) => [bx + R * cos(a0 + (PI / 2 - a0) * u), cy + R * sin(a0 + (PI / 2 - a0) * u)], ...COL[1]));\n  // The parabola whose lowest point is B.\n  tr.push(track((u) => [bx * u, by * (1 - (1 - u) ** 2)], ...COL[2]));\n  // The straight line, the shortest way.\n  tr.push(track((u) => [bx * u, by * u], ...COL[3]));\n  // The deep drop: straight down the left side to row 124, along the bottom\n  // and up into B. D is found so that its lowest point is there.\n  let lo = by, hi = 4 * YDEEP;\n  for (let i = 0; i \u003c 30; i++) {\n    const D = (lo + hi) / 2;\n    let m = 0;\n    for (let j = 1; j \u003c 64; j++) {\n      const u = j / 64;\n      m = max(m, 3 * u * (1 - u) * D + u * u * u * by);\n    }\n    if (m \u003c YDEEP) lo = D;\n    else hi = D;\n  }\n  tr.push(track(bezier([0, 0, 0, lo, bx, lo, bx, by]), ...COL[4]));\n  const C = Math.hypot(bx, by);\n  for (let j = 0; j \u003c S.ntr - 5; j++) {\n    const [p, q, h1, h2] = EXTRA[j], pa = (p * PI) / 180, qa = (q * PI) / 180;\n    tr.push(track(bezier([0, 0, h1 * C * sin(pa), h1 * C * cos(pa), bx - h2 * C * cos(qa), by - h2 * C * sin(qa), bx, by]), EXH[j], 0.5));\n  }\n  for (const k of tr) rasterize(S, k);\n  // Keep the arrivals already seen in this race.\n  if (S.tracks) for (let i = 0; i \u003c tr.length && i \u003c S.tracks.length; i++) if (S.tracks[i].at >= 0 && S.tau >= tr[i].T) tr[i].at = S.tracks[i].at;\n  S.tracks = tr;\n  S.tauB = th * sqrt(a);\n}\n\n// Where the field of least times is: the time of the cycloid from A through\n// each pixel, the fastest way there, and the bead's speed there. The front at\n// time t is the curve these times equal t on, and all of it moves at the speed\n// a bead would have there, so its distance in LEDs is the time to go times\n// that speed.\nfunction field(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dy = y - AY, dx = abs(x - AX);\n      if (dy \u003c 0 || (dy === 0 && dx === 0)) {\n        S.tau0[p] = dy \u003c 0 ? 1e9 : 0;\n        S.q[p] = 0;\n        continue;\n      }\n      if (dy === 0) S.tau0[p] = 2 * PI * sqrt(dx / (2 * PI));\n      else {\n        const [th, a] = cycloidTo(dx, dy);\n        S.tau0[p] = th * sqrt(a);\n      }\n      S.q[p] = sqrt(2 * dy);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, g: G2, end: -1, ntr: 0, tracks: null, mode: 0, phase: 0, clock: 0, tau: 0, fade: 1, t: 0, meet: [],\n    tau0: new Float32Array(N), q: new Float32Array(N), tmp: new Float32Array(N),\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N),\n  };\n  field(params.s);\n}\n\n// The tautochrone: from rest at arc length s0 above the bottom of the arch, a\n// bead's arc length is s0 cos(t sqrt(g / 4a)), whatever s0 is.\nfunction tautoBeads(S) {\n  const a = S.a, out = [];\n  for (let j = 0; j \u003c 6; j++) out.push(4 * a * (1 - j / 6));\n  return out;\n}\nfunction onCycloid(S, s) {\n  const th = 2 * acos(cl(s / (4 * S.a), -1, 1));\n  return [S.a * (th - sin(th)), S.a * (1 - cos(th)), th];\n}\n\n// The race's last moment, in g = 1 time.\nfunction raceEnd(S) {\n  if (S.mode === 0) {\n    let m = 0;\n    for (const k of S.tracks) m = max(m, k.T);\n    return m;\n  }\n  const bot = PI * sqrt(S.a);\n  return S.th \u003c= PI + 1e-6 ? S.tauB : 3 * bot;\n}\n\nfunction at(k, tau) {\n  const t = k.t;\n  if (tau >= k.T) return [k.x[M - 1], k.y[M - 1]];\n  if (tau \u003c= 0) return [0, 0];\n  let lo = 0, hi = M - 1;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (t[m] \u003c= tau) lo = m;\n    else hi = m;\n  }\n  const f = (tau - t[lo]) / (t[hi] - t[lo] || 1);\n  return [k.x[lo] + (k.x[hi] - k.x[lo]) * f, k.y[lo] + (k.y[hi] - k.y[lo]) * f];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 5], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.g = G2 * (cl(k[1], 0.2, 3) / 2);\n  const end = cl(k[2], 0, 1), ntr = round(cl(k[3], 5, 13));\n  if (abs(end - S.end) > 0.002 || ntr !== S.ntr) {\n    S.end = end;\n    S.ntr = ntr;\n    build(S);\n  }\n  const sg = sqrt(S.g);\n  S.t += d;\n  S.clock += d;\n  if (S.phase === 0 && S.clock >= WAIT) {\n    S.phase = 1;\n    S.tau = 0;\n  } else if (S.phase >= 1) {\n    const before = S.tau;\n    S.tau += d * sg;\n    if (S.mode === 0)\n      for (const tk of S.tracks)\n        // The arrival, placed inside the frame where it fell.\n        if (tk.at \u003c 0 && S.tau >= tk.T) tk.at = S.t - (S.tau - tk.T) / sg;\n    if (S.mode === 1 && S.th >= PI - 1e-6) {\n      const bot = PI * sqrt(S.a);\n      for (const m of [bot, 3 * bot]) if (before \u003c m && S.tau >= m) S.meet.push(S.t - (S.tau - m) / sg);\n    }\n    if (S.phase === 1 && S.tau >= raceEnd(S)) {\n      S.phase = 2;\n      S.clock = 0;\n    } else if (S.phase === 2 && S.clock >= HOLD) {\n      S.phase = 3;\n      S.clock = 0;\n    } else if (S.phase === 3) {\n      S.fade = 1 - S.clock / FADE;\n      if (S.clock >= FADE) {\n        S.phase = 0;\n        S.clock = 0;\n        S.fade = 1;\n        S.tau = 0;\n        S.mode ^= 1;\n        S.meet = [];\n        for (const tk of S.tracks) tk.at = -1;\n      }\n    }\n  }\n}\n\n// A soft dot of light into the colour buffers.\nfunction dot(S, x, y, r, w, c) {\n  const xi = round(x + AX), yi = round(y + AY), k = -1 / (r * r);\n  for (let j = yi - 2; j \u003c= yi + 2; j++) {\n    if (j \u003c 0 || j >= H) continue;\n    for (let i = xi - 2; i \u003c= xi + 2; i++) {\n      if (i \u003c 0 || i >= W) continue;\n      const e = w * exp(((i - x - AX) ** 2 + (j - y - AY) ** 2) * k), p = j * W + i;\n      S.R[p] += e * c[0];\n      S.G[p] += e * c[1];\n      S.B[p] += e * c[2];\n    }\n  }\n}\n\nfunction ring(S, x, y, age, c) {\n  const r = 1.5 + 16 * age, w = 0.8 * exp(-age / 0.22), n = round(6 * r + 8);\n  if (w \u003c 0.03) return;\n  for (let j = 0; j \u003c n; j++) {\n    const a = (2 * PI * j) / n;\n    dot(S, x + r * cos(a), y + r * sin(a), 0.7, w, c);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tracks) return;\n  const { R, G, B, tau0, q } = S;\n  const fade = S.phase === 3 ? S.fade : 1, live = S.phase >= 1, tau = live ? S.tau : 0, sg = sqrt(S.g);\n  // The front, the light it leaves behind and its rings, pale blue.\n  const fh = 0.6 + S.hue, dh = abs(fh - floor(fh) - 0.11), warm = cl(1.9 - min(dh, 1 - dh) / 0.09, 0, 1);\n  // Orange and yellow go brown this faint: there the front is paled and lifted.\n  const fc = hsv(fh, 0.5 - 0.3 * warm, 1 + 0.4 * warm), rk = S.tauB / RINGS;\n  const nring = live ? floor(tau / rk) : 0;\n  for (let p = 0; p \u003c N; p++) {\n    let v = 0;\n    if (live && q[p] > 0) {\n      const dd = (tau0[p] - tau) * q[p];\n      if (dd \u003c 2.5) {\n        if (dd > -2.5) v += 0.55 * exp(-dd * dd);\n        if (dd \u003c 0) v += 0.09 + 0.16 * exp(dd / 7);\n        for (let r = 1; r \u003c= nring; r++) {\n          const e = (tau0[p] - r * rk) * q[p];\n          if (e > -2 && e \u003c 2) v += 0.24 * exp(-e * e * 2);\n        }\n      }\n    }\n    v *= fade;\n    R[p] = v * fc[0];\n    G[p] = v * fc[1];\n    B[p] = v * fc[2];\n  }\n  // The tracks, faint, each lit up when its bead arrives and staying lit.\n  const tc = [];\n  for (const k of S.tracks) {\n    const c = hsv(k.hue + S.hue, k.sat, 1);\n    tc.push(c);\n    let f = 0.3;\n    if (S.mode === 1 && k !== S.tracks[0]) f = 0.16;\n    if (k.at >= 0) {\n      const age = S.t - k.at;\n      f += fade * (0.22 + 0.5 * exp(-age / 0.3));\n    }\n    for (let i = 0; i \u003c k.pix.length; i++) {\n      const p = k.pix[i], w = k.wt[i] * f;\n      R[p] += w * c[0];\n      G[p] += w * c[1];\n      B[p] += w * c[2];\n    }\n  }\n  const white = [1, 1, 1], bx = DX, by = S.by;\n  if (live) {\n    const dtr = (TRAIL * sg) / 12;\n    if (S.mode === 0)\n      S.tracks.forEach((k, i) => {\n        const c = tc[i];\n        if (k.at >= 0) {\n          ring(S, bx, by, S.t - k.at, c);\n          if (S.t - k.at > 0.15) return;\n        }\n        for (let j = 12; j >= 1; j--) {\n          const p = at(k, tau - j * dtr);\n          dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n        }\n        const p = at(k, tau);\n        dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n        dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n      });\n    else {\n      // The second race: beads from six heights on the cycloid, the one at A\n      // the same bead as in the race.\n      const c = tc[0], w = 1 / (2 * sqrt(S.a)), sB = 4 * S.a * cos(S.th / 2);\n      for (const s0 of tautoBeads(S)) {\n        // A bead let go above the end point's height leaves the track there.\n        const tEnd = s0 >= abs(sB) - 1e-6 ? acos(cl(sB / s0, -1, 1)) / w : 1e9;\n        if (tau > tEnd + 0.15 * sg) continue;\n        for (let j = 12; j >= 0; j--) {\n          const tt = min(max(0, tau - j * dtr), tEnd), p = onCycloid(S, s0 * cos(tt * w));\n          if (j) dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n          else {\n            dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n            dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n          }\n        }\n      }\n      for (const m of S.meet) ring(S, PI * S.a, 2 * S.a, S.t - m, c);\n    }\n  }\n  // A and B.\n  dot(S, 0, 0, 0.9, 0.7, white);\n  dot(S, bx, by, 0.9, 0.7, white);\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Gravity=0.2..3, End=0..1, Tracks=5..13","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the cycloid gold, Galileo's circle violet, the parabola green, the line cyan, the deep drop rose, and the front and its rings pale blue. From 0.33 to 0.68, where the front would turn red, orange, yellow or lime, it is paled and lifted so it reads cream, never brown."},{"name":"Gravity","min":0.2,"max":3,"about":"At 2 g is 31 LEDs a second squared: the cycloid's bead takes 2.4 s, the line's 2.84 s and the deep drop's 4.27 s, then the finish holds 1.3 s and fades in 0.6 s. Every time goes as one over the square root of g, so at 0.2 the race takes 3.2 times as long and at 3 it is 1.22 times as fast."},{"name":"End","min":0,"max":1,"about":"Where the end point sits on the right edge. At 0 at row 39, the bottom of the cycloid's arch, where the cycloid wins by 1.2% over the circle, 4.3% over the parabola and 18.5% over the line. Turned up the end point rises to row 13 and the cycloid dips 10 rows below it and climbs back, now 37.6% ahead of the circle and 74% ahead of the line; the beads of the second race pass the bottom of the arch together and those let go below the end swing back and meet there again."},{"name":"Tracks","min":5,"max":13,"about":"How many tracks race. At 5 the cycloid and its four classic rivals; each step adds another smooth track from the start to the end, eight more at 13, some starting shallow and some dipping below the end. None of them beats the cycloid."}],"start":[0,2,0,5],"measures":{"motion":0.2086,"detail":0.0362,"edges":0.3333,"complexity":0.8549,"coverage":0.2988,"colour":0.08,"drift":0.1306},"knobResponse":[0.0398,0.0764,0.0473,0.038]},{"slug":"bread-mould","title":"Bread Mould","family":"fungi","round":21,"note":"도마 위 식빵 두 쪽이 곰팡이로 덮여 가는 저속 촬영이에요. 내려앉은 포자에서 흰 테를 두른 푸른곰팡이와 검은 털곰팡이가 고리를 그리며 번지고, 다 덮이면 새 두 쪽이 옆에서 밀려 들어와요.","idea":"A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.","buttons":"K1 tap slides a fresh pair of slices in now.","code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","layer":{"id":"layer-bread-mould","type":"code","name":"bread-mould","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mould","min":0,"max":3,"about":"What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep."},{"name":"Spores","min":4,"max":40,"about":"How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40."},{"name":"Damp","min":0,"max":1,"about":"A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies."}],"start":[0,2,4,0.06],"measures":{"motion":0.3259,"detail":0.0597,"edges":0.2499,"complexity":2.3664,"coverage":0.9889,"colour":0.1543,"drift":0.3583},"knobResponse":[0.188,0.3046,0.062,0.1018]},{"slug":"breath","title":"Breath","family":"body","round":24,"note":"후두에서 횡격막까지 해부도처럼 그린 폐가 숨을 쉬어요. 들이쉬면 횡격막이 내려가고 갈비뼈가 들리며, 푸르스름한 공기가 일곱 번 더 갈라지는 기관지를 타고 내려가 보랏빛 허파꽈리를 빨갛게 물들여요. K1 이 맑은 공기에서 입김이 하얗게 서리는 겨울과 매연 낀 도시까지 공기를 바꾸고, K1 을 누르면 기침을 해요.","idea":"A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.","buttons":"K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.","code":"// ===== Patternflow pattern =====\n// Title:   Breath\n// Family:  body\n// Idea:    A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after anatomical plates of the lungs, with the bronchial tree grown by volume-filling branching (Tawhai, Pullan and Hunter, 2000)\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1\n//\n// Knob 1: Air. What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli.\n// Knob 2: Rate. Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3.\n// Knob 3: Depth. A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far.\n// Knob 4: Altitude. Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own.\n// Buttons: K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.\n\nconst W = 64, H = 128, N = W * H, A0 = 2;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, ceil, round, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The diaphragm under the lungs breathed out, x then y: the right dome higher\n// over the liver, the heart sitting in the dip between the domes.\nconst DK = [-1, 118.5, 5, 113.8, 9, 108.4, 13, 103.8, 17, 101.6, 21, 101, 25, 101.8, 29, 104.2, 33, 106, 37, 106.6, 41, 106.6, 45, 105.8, 49, 106.8, 53, 110.2, 57, 115, 60, 117.8, 65, 122.5];\nconst D0T = F32(68);\nfor (let i = 0, k = 0; i \u003c 68; i++) {\n  while (k \u003c DK.length - 4 && i - 1 > DK[k + 2]) k += 2;\n  D0T[i] = mix(DK[k + 1], DK[k + 3], (i - 1 - DK[k]) / (DK[k + 2] - DK[k]));\n}\nfor (let n = 0; n \u003c 4; n++) for (let i = 1; i \u003c 67; i++) D0T[i] = (D0T[i - 1] + 2 * D0T[i] + D0T[i + 1]) / 4;\nconst d0 = (x) => ((x = cl(x + 1, 0, 66.99)), D0T[floor(x)] + (D0T[floor(x) + 1] - D0T[floor(x)]) * (x - floor(x)));\n// How far the diaphragm drops at each column: most under the two domes, so\n// they flatten.\nconst GX = Float32Array.from({ length: W }, (_, x) => 0.32 + 0.68 * (exp(-(((x - 17) / 10) ** 2)) + exp(-(((x - 46) / 10) ** 2))));\n// The outlines of the right lung (on the viewer's left) and the smaller left\n// lung with the heart's notch, breathed out. The diaphragm cuts their bases.\nconst LUNGS = [\n  [19, 21, 15, 22.5, 11.5, 26, 8.5, 32, 6.3, 40, 4.8, 50, 4, 60, 3.6, 72, 3.6, 84, 4, 96, 4.6, 106, 5.6, 126, 28.8, 126, 28.6, 104, 28.2, 98, 27.6, 90, 27.2, 82, 27.6, 74, 28.6, 66, 29, 58, 28.6, 50, 27.8, 42, 26.6, 34, 24.8, 27, 22.5, 22.5],\n  [44.5, 22, 48.5, 23.5, 52, 27, 55, 33, 57.2, 41, 58.8, 51, 59.6, 62, 60, 74, 60.2, 86, 60.2, 98, 59.9, 108, 59.2, 126, 41.5, 126, 41.5, 106, 41, 103, 42.4, 98, 44.5, 92, 45.4, 86, 44.4, 80, 41.8, 75, 38.6, 71, 36.6, 66, 36, 58, 36.4, 50, 37.2, 42, 38.4, 34, 40, 28, 42, 23.5],\n];\n// Airway walls by generation (9 is the channel through the larynx), and how\n// strongly each shows over the lung.\nconst WC = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? [226, 216, 204] : [232 - 2 * g, 208 - 4 * g, 206]));\nconst AG = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? 1 : g > 8 ? 0 : 1.1 - 0.08 * g));\n// The cough: seconds and lung volume, and the moments of the three jolts.\nconst CK = [0, 0, 0.32, 0.97, 0.44, 0.97, 0.54, 0.66, 0.84, 0.66, 0.94, 0.38, 1.24, 0.38, 1.34, 0.12, 1.9, 0];\nconst CT = [0.44, 0.84, 1.24];\n\nfunction sdPoly(v, px, py) {\n  let d = 1e9, s = 1;\n  for (let i = 0, j = v.length - 2; i \u003c v.length; j = i, i += 2) {\n    const ex = v[j] - v[i], ey = v[j + 1] - v[i + 1], wx = px - v[i], wy = py - v[i + 1];\n    const t = cl((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1), bx = wx - ex * t, by = wy - ey * t;\n    d = min(d, bx * bx + by * by);\n    const c1 = py >= v[i + 1], c2 = py \u003c v[j + 1], c3 = ex * wy > ey * wx;\n    if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s = -s;\n  }\n  return s * sqrt(d);\n}\n// The colour being built for one LED, and mixing toward another by k.\nconst C = F32(3);\nconst DA = [74, 58, 156];\nconst bl = (r, g, b, k) => ((C[0] += (r - C[0]) * k), (C[1] += (g - C[1]) * k), (C[2] += (b - C[2]) * k));\nfunction samp(A, x, y) {\n  x = cl(x, 0, 62.999);\n  y = cl(y, 0, 126.999);\n  const xi = x | 0, yi = y | 0, fx = x - xi, p = yi * W + xi, a = A[p] + (A[p + 1] - A[p]) * fx;\n  return a + (A[p + W] + (A[p + W + 1] - A[p + W]) * fx - a) * (y - yi);\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ph: 0.68, lp: 0.68, vol: 0.6, D: 0.5, air: 0, ct: -1, jolt: 0, hp: 0, hb: 0, envIn: 0, envOut: 0, Fin: -1, Fx: 2, bf: [], puffs: [],\n    sd: F32(N), own: new Int16Array(N).fill(-1), und: F32(N * 3), ua: F32(N), GL: F32(N),\n    SX: F32(H), KY: F32(W), alvA: F32(N), alvS: F32(N), alvK: new Int16Array(N), trA: F32(N), trV: F32(N), trS: F32(N), trG: new Int8Array(N), rib: F32(N), O: F32(N * 3),\n    seg: [], ax: [], ay: [], as: [], soot: [], cd: [], cb: [], trH: F32(N),\n  });\n  build(P);\n}\n\nfunction addSeg(P, x0, y0, x1, y1, r, g, d) {\n  const e = d + hypot(x1 - x0, y1 - y0);\n  P.seg.push(x0, y0, x1, y1, r, g, d, e);\n  return e;\n}\n\n// Volume-filling branching: a branch's alveoli are split by the line from its\n// end through their centroid, and each half gets a child that runs 40% of the\n// way to its own centroid, until a handful is left: one grape cluster.\nfunction grow(P, x0, y0, dx, dy, pts, g, r, d) {\n  const { ax, ay } = P, n = pts.length;\n  let cx = 0, cy = 0;\n  for (const i of pts) (cx += ax[i]), (cy += ay[i]);\n  (cx /= n), (cy /= n);\n  if (n \u003c= 7 || g > 8) {\n    for (const i of pts) (P.ak[i] = P.cd.length), (ax[i] += (cx - ax[i]) * 0.3), (ay[i] += (cy - ay[i]) * 0.3);\n    P.cd.push(d + hypot(cx - x0, cy - y0));\n    P.cb.push(0.84 + 0.32 * rnd());\n    return;\n  }\n  // The lobes split along the line from the branch to their centroid; past\n  // them each set is cut across its long axis, a near half and a far one.\n  let ux = cx - x0, uy = cy - y0, ul = hypot(ux, uy), ox = x0, oy = y0;\n  if (g > 2) {\n    let sxx = 0, syy = 0, sxy = 0;\n    for (const i of pts) (sxx += (ax[i] - cx) ** 2), (syy += (ay[i] - cy) ** 2), (sxy += (ax[i] - cx) * (ay[i] - cy));\n    const th = 0.5 * atan2(2 * sxy, sxx - syy) + PI / 2;\n    (ux = cos(th)), (uy = sin(th)), (ul = 1), (ox = cx), (oy = cy);\n  }\n  if (ul \u003c 0.5) (ux = dx), (uy = dy), (ul = hypot(dx, dy));\n  (ux /= ul), (uy /= ul);\n  const side = (i) => (ax[i] - ox) * uy - (ay[i] - oy) * ux;\n  let A = pts.filter((i) => side(i) > 0), B = pts.filter((i) => side(i) \u003c= 0);\n  if (A.length \u003c 2 || B.length \u003c 2) {\n    const s = pts.slice().sort((i, j) => side(i) - side(j));\n    (A = s.slice(0, n >> 1)), (B = s.slice(n >> 1));\n  }\n  const pa = atan2(dy, dx), lim = g === 2 ? 1.75 : 1.1;\n  for (const Q of [A, B]) {\n    let qx = 0, qy = 0;\n    for (const i of Q) (qx += ax[i]), (qy += ay[i]);\n    (qx = qx / Q.length - x0), (qy = qy / Q.length - y0);\n    let a = atan2(qy, qx), da = a - pa;\n    da = atan2(sin(da), cos(da));\n    if (abs(da) > lim) a = pa + Math.sign(da) * lim;\n    let len = max(1.2, hypot(qx, qy) * (Q.length \u003c= 7 ? 0.55 : 0.4)), x1, y1;\n    for (;;) {\n      (x1 = x0 + cos(a) * len), (y1 = y0 + sin(a) * len);\n      if (len \u003c= 1.2 || samp(P.sd, x1, y1) \u003c -0.6) break;\n      len *= 0.8;\n    }\n    const rr = max(0.5, r * Math.cbrt(Q.length / n));\n    grow(P, x1, y1, x1 - x0, y1 - y0, Q, g + 1, rr, addSeg(P, x0, y0, x1, y1, rr, g, d));\n  }\n}\n\nfunction build(P) {\n  const { sd, own, GL } = P;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, sl = d0(x + 0.5) - d0(x - 0.5), cut = (y - d0(x) + 0.6) / sqrt(1 + sl * sl);\n    const a = y \u003c 15 ? 6 : max(sdPoly(LUNGS[0], x, y), cut), b = y \u003c 15 ? 6 : max(sdPoly(LUNGS[1], x, y), cut);\n    sd[p] = min(a, b) + 0.9 * (vn(x * 0.32, y * 0.32) - 0.5);\n    GL[p] = exp(-(((x - 32) / 26) ** 2) - (((y - 66) / 50) ** 2));\n  }\n  // Alveoli on a jittered honeycomb inside the lungs.\n  const pts = [[], []];\n  for (let j = 0; j \u003c 56; j++)\n    for (let i = 0; i \u003c 29; i++) {\n      const x = 1 + i * 2.25 + (j & 1) * 1.125 + (rnd() - 0.5) * 0.7, y = 19 + j * 1.95 + (rnd() - 0.5) * 0.7;\n      if (x > 62.5 || y > 125 || samp(sd, x, y) > -1) continue;\n      pts[x \u003c 32 ? 0 : 1].push(P.ax.length);\n      P.ax.push(x), P.ay.push(y), P.as.push(0.86 + 0.28 * rnd()), P.soot.push(rnd());\n    }\n  P.ak = new Int16Array(P.ax.length);\n  // The larynx and trachea, the short steep right bronchus and the longer\n  // left one, then the trees.\n  let d = addSeg(P, 32, 3, 32, 16.5, 1, 9, 0);\n  d = addSeg(P, 32, 16.5, 32, 48.5, 3, 0, d);\n  grow(P, 26.6, 57, -4.8, 8.5, pts[0], 2, 2.3, addSeg(P, 31.3, 48.5, 26.6, 57, 2.3, 1, d));\n  grow(P, 40.4, 56.6, 7.8, 8.1, pts[1], 2, 2.05, addSeg(P, 32.7, 48.5, 40.4, 56.6, 2.05, 1, d));\n  P.dmax = max(...P.cd);\n  P.cd = Float32Array.from(P.cd, (v) => v / P.dmax);\n  P.cox = F32(P.cd.length).fill(0.55);\n  P.airK = F32(P.cd.length);\n  // Each lung pixel takes the cluster of its nearest alveolus.\n  const best = F32(N).fill(9);\n  P.ax.forEach((cx, i) => {\n    const cy = P.ay[i];\n    for (let y = max(0, round(cy) - 3); y \u003c= min(H - 1, round(cy) + 3); y++)\n      for (let x = max(0, round(cx) - 3); x \u003c= min(W - 1, round(cx) + 3); x++) {\n        const e = hypot(x - cx, y - cy), p = y * W + x;\n        if (e \u003c best[p]) (best[p] = e), (own[p] = P.ak[i]);\n      }\n  });\n  under(P);\n}\n\n// What lies behind the lungs, breathed out, as colour times cover: the\n// larynx, the diaphragm and, dim under it, the liver and the stomach.\nfunction under(P) {\n  const { und, ua } = P;\n  const lay = (p, r, g, b, a) => {\n    if (a \u003c= 0) return;\n    const o = p * 3;\n    (und[o] += (r - und[o]) * a), (und[o + 1] += (g - und[o + 1]) * a), (und[o + 2] += (b - und[o + 2]) * a), (ua[p] += (1 - ua[p]) * a);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, t = y - d0(x), ax = abs(x - 32);\n    if (t > 3) {\n      const xb = 37 + 3 * sin(y * 0.21), f = (1 - 0.55 * sm(3, 20, t)) * (0.7 + 0.5 * vn(x * 0.17, y * 0.17)) * (0.4 + 0.6 * sm(0.3, 2, abs(x - xb)));\n      x \u003c xb ? lay(p, 60 * f, 20 * f, 22 * f, cl(t - 3, 0, 1)) : lay(p, 50 * f, 30 * f, 44 * f, cl(t - 3, 0, 1));\n    }\n    // The diaphragm: a band of muscle with a lit upper face, its tendon pale\n    // in the middle under the heart.\n    if (t > -0.5 && t \u003c 4) {\n      const ten = sm(24, 29, x) * sm(43, 38, x), st = 0.8 + 0.2 * sin(x * 1.9 + t * 0.9), lit = 1 + 0.45 * sm(1.6, 0, t);\n      lay(p, mix(232 * st, 214, ten) * 0.72 * lit, mix(82 * st, 198, ten) * 0.66 * lit, mix(96, 188, ten) * 0.66 * lit, cl(min(t + 0.5, 4 - t), 0, 1));\n    }\n    if (y \u003c 19) {\n      const hy = 3.4 + 0.03 * ax * ax;\n      if (ax \u003c 9.5) lay(p, 200, 192, 176, 0.5 * cl(1 - abs(y - hy) / 0.9, 0, 1));\n      const top = 6 + 2.2 * max(0, 1 - ax / 2.4), hw = 7.4 - 0.42 * (y - 6), e = min(y - top, 14.6 - y, hw - ax);\n      // The thyroid cartilage, its left plate lit and the right in shade.\n      if (e > -0.5) lay(p, 206, 196, 184, cl(e + 0.5, 0, 1) * (0.42 + 0.2 * exp(-((ax / 1.8) ** 2)) + 0.25 * sm(1.2, 0.2, e)) * (x \u003c 32 ? 1.05 : 0.78));\n      if (y > 15 && y \u003c 17.6 && ax \u003c 4.9) lay(p, 214, 204, 192, 0.55 * cl(4.9 - ax, 0, 1));\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.t += dt;\n  P.air = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3), dep = cl(k[2], 0, 1), alt = cl(k[3], 0, 1);\n  const bpm = (8 + 4.5 * rate + 12 * max(0, rate - 2) ** 2) * (1 + 0.45 * alt);\n  P.D = (0.5 + 0.5 * dep) * (1 - 0.4 * sm(2, 3, rate)) * (1 + 0.22 * alt);\n  if (input.btnPressed && input.btnPressed[0] && P.ct \u003c 0) (P.ct = 0), (P.cv = P.vol), (P.cn = 0);\n  let vol = 0, envIn = 0, envOut = 0, Fin = -1, Fx = 2;\n  P.bf = [];\n  P.jolt = 0;\n  if (P.ct >= 0) {\n    // A gasp, then three coughs, each a jolt and a burst of warm air up the tree.\n    const c = (P.ct += dt);\n    let j = 0;\n    while (j \u003c CK.length - 4 && c > CK[j + 2]) j += 2;\n    vol = mix(j ? CK[j + 1] : P.cv, CK[j + 3], sm(CK[j], CK[j + 2], c));\n    if (c \u003c 0.4) (envIn = sin((PI * c) / 0.4) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(c / 0.3, 0, 1)) ** 2));\n    for (const tc of CT) {\n      const u = c - tc;\n      if (u > 0 && u \u003c 0.7) P.bf.push(1 - u * 3.2), (P.jolt = max(P.jolt, 2.4 * exp(-u / 0.08)));\n    }\n    if (P.cn \u003c 3 && c > CT[P.cn] + 0.28) P.puffs.push([0, 2, rnd()]), P.cn++;\n    if (c > 1.9) (P.ct = -1), (P.ph = 0.9);\n  } else {\n    // In for 38% of a breath, out for half, then a short rest.\n    const p = (P.ph = (P.ph + (dt * bpm) / 60) % 1);\n    if (p \u003c 0.38) (vol = 0.5 - 0.5 * cos((PI * p) / 0.38)), (envIn = sin((PI * p) / 0.38) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(p / 0.3, 0, 1)) ** 2));\n    else if (p \u003c 0.88) {\n      const u = (p - 0.38) / 0.5;\n      (vol = 0.5 + 0.5 * cos(PI * u)), (envOut = sin(PI * u) ** 0.5), (Fx = 1.06 - 1.2 * sm(0.02, 0.8, u));\n    }\n    if (P.lp \u003c 0.64 && p >= 0.64) P.puffs.push([0, 1, rnd()]);\n    P.lp = p;\n  }\n  Object.assign(P, { vol, envIn, envOut, Fin, Fx });\n  // The alveoli the cold air has reached take up oxygen fast; the rest give it\n  // up slowly to the blood that carries it away.\n  const wS = max(0, 2 * P.air - 1), hi = 1 - 0.66 * alt - 0.14 * wS, { cd, cox, airK } = P;\n  for (let i = 0; i \u003c cd.length; i++) {\n    cox[i] += Fin > cd[i] ? (hi - cox[i]) * (1 - exp(-dt * 7)) : (0.05 - cox[i]) * (1 - exp(-dt * 0.85));\n    airK[i] = envIn * exp(-(((Fin - cd[i]) / 0.07) ** 2));\n  }\n  P.hp = (P.hp + (dt * (62 + 10 * rate + 40 * alt)) / 60) % 1;\n  P.hb = exp(-(((P.hp - 0.06) / 0.05) ** 2)) + 0.6 * exp(-(((P.hp - 0.3) / 0.05) ** 2));\n  P.puffs = P.puffs.filter((f) => (f[0] += dt) \u003c 5);\n}\n\n// Rest coordinates to the panel, breathed in by the per-row and per-column\n// scales: out to the sides, down with the diaphragm.\nlet FX = 0, FY = 0;\nfunction fw(P, xr, yr) {\n  const { SX, KY } = P, kx = cl(32 + (xr - 32) * SX[cl(round(yr), 0, H - 1)], 0, 62.99), ki = floor(kx);\n  FY = A0 + (yr - A0) * (KY[ki] + (KY[ki + 1] - KY[ki]) * (kx - ki));\n  FX = 32 + (xr - 32) * SX[cl(round(FY), 0, H - 1)];\n}\n\nfunction alveoli(P) {\n  const { alvA, alvS, alvK, ax, ay, as } = P, rA = 1.02 + 0.52 * P.vol * P.D;\n  alvA.fill(0);\n  for (let i = 0; i \u003c ax.length; i++) {\n    fw(P, ax[i], ay[i]);\n    const cx = FX, cy = FY, r = rA * as[i], lim = (r + 0.5) ** 2;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n        const dx = x - cx, dy = y - cy, e2 = dx * dx + dy * dy;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x;\n        const q = e / r, hx = dx + 0.4 * r, hy = dy + 0.45 * r, hl = max(0, 1 - sqrt(hx * hx + hy * hy) / (0.75 * r));\n        const s = 0.72 + 0.28 * sqrt(max(0, 1 - q * q)) + 0.38 * hl * hl;\n        if (a * s > alvA[p] * alvS[p]) (alvA[p] = a), (alvS[p] = s), (alvK[p] = i);\n      }\n  }\n}\n\nfunction tree(P) {\n  const { seg: S, trA, trV, trS, trG, trH } = P, dil = 1 + 0.1 * P.vol * P.D;\n  trA.fill(0);\n  trH.fill(0);\n  for (let j = 0; j \u003c S.length; j += 8) {\n    fw(P, S[j], S[j + 1]);\n    const x0 = FX, y0 = FY;\n    fw(P, S[j + 2], S[j + 3]);\n    const ex = FX - x0, ey = FY - y0, l2 = ex * ex + ey * ey || 1e-6, r = S[j + 4] * dil, g = S[j + 5], da = S[j + 6], db = S[j + 7], lim = (r + 1.7) ** 2, hr = min(1, r);\n    for (let y = max(0, floor(min(y0, FY) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, FY) + r + 1)); y++)\n      for (let x = max(0, floor(min(x0, FX) - r - 1)); x \u003c= min(W - 1, ceil(max(x0, FX) + r + 1)); x++) {\n        const t = cl(((x - x0) * ex + (y - y0) * ey) / l2, 0, 1), px = x - x0 - ex * t, py = y - y0 - ey * t, e2 = px * px + py * py;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x, h = cl(r + 1.7 - e, 0, 1) * hr;\n        if (h > trH[p]) trH[p] = h;\n        if (a > trA[p]) (trA[p] = a), (trS[p] = da + (db - da) * t), (trV[p] = e / r), (trG[p] = g);\n      }\n  }\n}\n\n// The collarbones and ten ribs, faint arcs that lift and spread on a breath.\nfunction ribs(P) {\n  const { rib, SX } = P, v = P.vol * P.D;\n  rib.fill(0);\n  const dot = (fx, fy, rad, k) => {\n    for (let y = max(0, round(fy) - 1); y \u003c= min(H - 1, round(fy) + 1); y++)\n      for (let x = max(0, round(fx) - 1); x \u003c= min(W - 1, round(fx) + 1); x++) {\n        const a = cl(rad + 0.5 - sqrt((x - fx) ** 2 + (y - fy) ** 2), 0, 1) * k, p = y * W + x;\n        if (a > rib[p]) rib[p] = a;\n      }\n  };\n  for (let i = 0; i \u003c= 10; i++)\n    for (const s of [-1, 1]) {\n      if (i === 0) {\n        for (let n = 0; n \u003c= 50; n++) {\n          const u = n / 50;\n          dot(32 + s * (4.5 + 21 * u), 18.6 - 4.2 * u + 1.4 * sin(PI * u) - 1.2 * v, 0.5 + 0.4 * (2 * u - 1) ** 2, 0.85);\n        }\n        continue;\n      }\n      const yr = 23 + (i - 1) * 8.4, y0 = yr - v * (1 + 0.42 * i), hw = (1.5 + 28.4 * (1 - exp(-(yr - 15) / 14))) * SX[round(yr)];\n      const rx = hw - 3, ry = (5.5 + 0.55 * i) * (1 - 0.25 * v), n = ceil((rx + ry) * 2.2);\n      for (let m = 0; m \u003c= n; m++) {\n        const th = (1.62 * m) / n;\n        dot(32 + s * (3 + rx * sin(th)), y0 + ry * (1 - cos(th)), 0.7, sm(0.2, 0.6, th));\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cox) return;\n  const { SX, KY, sd, own, cox, cb, airK, und, ua, alvA, alvS, alvK, trA, trV, trS, trG, trH, rib, O, ak, soot, GL } = P, dm = 1 / P.dmax;\n  const t = P.t, v = P.vol * P.D, air = P.air, hb = P.hb, { envIn, envOut, Fin, Fx, bf } = P;\n  const wC = max(0, 1 - 2 * air), wW = 1 - abs(2 * air - 1), wS = max(0, 2 * air - 1);\n  const pal = (c, w, s) => [0, 1, 2].map((i) => c[i] * wC + w[i] * wW + s[i] * wS);\n  const bgT = pal([3, 7, 18], [16, 26, 48], [62, 50, 32]), bgB = pal([2, 4, 12], [8, 14, 30], [36, 28, 20]), glo = pal([8, 18, 40], [22, 38, 64], [40, 30, 18]);\n  const cold = pal([150, 205, 255], [215, 238, 255], [196, 178, 128]), warm = pal([255, 196, 160], [255, 224, 206], [190, 160, 130]);\n  const puffC = pal([255, 214, 196], [236, 242, 255], [168, 158, 144]), puffK = 0.6 * wC + 1.5 * wW + 0.7 * wS;\n  const oxA = [240 - 64 * wS, 46 + 26 * wS, 58 + 20 * wS];\n  for (let y = 0; y \u003c H; y++) SX[y] = 1 + 0.085 * v * (0.25 + 0.75 * sm(15, 115, y));\n  for (let x = 0; x \u003c W; x++) KY[x] = 1 + 0.14 * v * GX[x];\n  alveoli(P);\n  tree(P);\n  ribs(P);\n  // The breath leaving at the top: each puff rises, spreads and thins.\n  const pf = [];\n  for (const [age, str, sd0] of P.puffs) {\n    const R = 3 + (5 + 8 * wW) * age;\n    pf.push(32 + (sd0 - 0.5) * 8, 6 - 3.2 * age, R, str * sm(0, 0.25, age) * exp(-age / (0.9 + 1.6 * wW)), sd0 * 40);\n  }\n  const hs = 1 / (1 - 0.035 * hb);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const fy = y / 127, gl = GL[p];\n      let hz = 1;\n      if (wS > 0) hz = 1 + wS * (0.18 * sin(x * 0.2 + y * 0.05 + t * 0.6) + 0.18 * sin(y * 0.13 - x * 0.06 - t * 0.35));\n      for (let c = 0; c \u003c 3; c++) C[c] = (bgT[c] + (bgB[c] - bgT[c]) * fy + glo[c] * gl) * hz;\n      const xr = cl(32 + (x - 32) / SX[y], 0, 62.999), yr = cl(A0 + (y - A0) / KY[x], 0, 126.999);\n      const xi = xr | 0, yi = yr | 0, fx = xr - xi, fz = yr - yi, q = yi * W + xi;\n      if (ua[q] + ua[q + 1] + ua[q + W] + ua[q + W + 1] > 0) {\n        const w0 = (1 - fx) * (1 - fz) * ua[q], w1 = fx * (1 - fz) * ua[q + 1], w2 = (1 - fx) * fz * ua[q + W], w3 = fx * fz * ua[q + W + 1], a = 1 - w0 - w1 - w2 - w3;\n        const o0 = q * 3, o2 = o0 + W * 3;\n        for (let c = 0; c \u003c 3; c++) C[c] = C[c] * a + und[o0 + c] * w0 + und[o0 + 3 + c] * w1 + und[o2 + c] * w2 + und[o2 + 3 + c] * w3;\n      }\n      // The heart, dim behind the lungs, its apex down to the left.\n      if (xr > 20 && xr \u003c 56 && yr > 60 && yr \u003c 110) {\n        const dx = xr - 36.6, dy = yr - 86, hv = (dx * 0.6 + dy * 0.8) * hs, hu = (dx * 0.8 - dy * 0.6) * hs, eu = hu / (12.5 * (1 - 0.36 * sm(-6, 19, hv))), ev = hv / 19;\n        const a = cl((1 - sqrt(eu * eu + ev * ev)) * 9, 0, 1);\n        if (a > 0) {\n          const k = (0.4 + 0.32 * hb) * (0.65 + 0.45 * sm(9, -9, hu));\n          bl(150 * k, 26 * k, 44 * k, a);\n        }\n      }\n      // The lung: a dusky body, the grape clusters of alveoli, the capillary\n      // net shimmering on them, the pleura at the edge.\n      const s = samp(sd, xr, yr), qn = round(yr) * W + round(xr);\n      let m = 0;\n      if (s \u003c 1.2) {\n        const c = own[qn], ox = c >= 0 ? cox[c] : 0.3;\n        m = cl(0.5 - s, 0, 1);\n        if (m > 0) bl(24 + 56 * ox, 14 - 4 * ox, 50 - 20 * ox, 0.92 * m);\n        const aa = alvA[p];\n        if (aa > 0) {\n          const i = alvK[p], cc = ak[i], o = cox[cc], sh = alvS[p] * cb[cc] * (soot[i] \u003c wS * 0.4 ? 0.3 : 1), af = 0.4 * airK[cc];\n          for (let c = 0; c \u003c 3; c++) C[c] += ((DA[c] + (oxA[c] - DA[c]) * o) * sh + cold[c] * af - C[c]) * aa;\n        }\n        const cv = hash(qn, 5);\n        if (m > 0 && cv > 0.6) {\n          const k = (cv - 0.35) * (0.75 + 0.75 * sin(t * 6 + cv * 90 + 2 * hb)) * (0.12 + 0.34 * ox) * m;\n          (C[0] += 230 * k), (C[1] += 30 * k), (C[2] += 50 * k);\n        }\n        const rm = cl(1 - abs(s + 0.45) / 0.75, 0, 1) * 0.5;\n        if (rm > 0) bl(126 + 129 * ox, 100 + 24 * ox, 214 - 70 * ox, rm);\n        // A shadow along each airway lifts the tree off the alveoli.\n        bl(0, 0, 0, trH[p] * 0.5 * m);\n      }\n      // The airways, and the air in them.\n      const ta = trA[p];\n      if (ta > 0) {\n        const gg = trG[p], vv = trV[p], d = trS[p] * dm, wc = WC[gg], al = AG[gg] * ta;\n        let wb = 0.85;\n        if (gg \u003c= 1) {\n          const ring = 0.5 + 0.5 * cos(trS[p] * 2.73);\n          wb = (0.5 + 0.5 * sm(0.35, 0.95, vv)) * (0.66 + 0.44 * ring * ring);\n        } else if (gg \u003c= 3) wb = 0.65 + 0.35 * sm(0.3, 1, vv);\n        bl(wc[0] * wb, wc[1] * wb, wc[2] * wb, al);\n        let ca = 0, wa = 0;\n        if (envIn > 0 && d \u003c Fin) ca = envIn * (0.3 + 0.7 * exp(-(((Fin - d) / 0.05) ** 2)));\n        if (envOut > 0 && d > Fx) wa = envOut * (0.24 + 0.76 * exp(-(((d - Fx) / 0.05) ** 2)));\n        for (const f of bf) wa += 1.3 * exp(-(((d - f) / 0.06) ** 2)) + (d > f ? 0.25 : 0);\n        const lf = (gg \u003c= 1 ? 1 - 0.5 * sm(0.55, 1, vv) : 1) * ta * (gg === 9 ? 0.8 : 0.9);\n        for (let c = 0; c \u003c 3; c++) C[c] += (cold[c] * ca + warm[c] * wa) * lf;\n      }\n      const rb = rib[p];\n      if (rb > 0) bl(220, 210, 196, rb * (0.42 + 0.1 * m));\n      if (y \u003c 48 && pf.length) {\n        let pa = 0;\n        for (let j = 0; j \u003c pf.length; j += 5) {\n          const dx = (x - pf[j]) / (pf[j + 2] * 1.4), dy = (y - pf[j + 1]) / pf[j + 2], e = dx * dx + dy * dy;\n          if (e \u003c 4) pa += pf[j + 3] * exp(-e * 1.4) * cl(0.4 + 1.4 * (vn(x * 0.2 + pf[j + 4], y * 0.2 + t * 0.9) - 0.5) + 0.5 * exp(-e * 3), 0, 1.4);\n        }\n        if (pa > 0) bl(puffC[0], puffC[1], puffC[2], min(1, pa * puffK));\n      }\n      if (wS > 0) bl(120, 96, 62, 0.14 * wS * hz);\n      O.set(C, p * 3);\n    }\n  // A cough jolts the whole chest up.\n  const jl = round(P.jolt);\n  for (let y = 0; y \u003c H; y++) {\n    const o = min(H - 1, y + jl) * W * 3;\n    for (let x = 0; x \u003c W; x++) display.setPixel(x, y, min(255, O[o + x * 3]) | 0, min(255, O[o + x * 3 + 1]) | 0, min(255, O[o + x * 3 + 2]) | 0);\n  }\n}\n","layer":{"id":"layer-breath","type":"code","name":"breath","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Breath\n// Family:  body\n// Idea:    A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after anatomical plates of the lungs, with the bronchial tree grown by volume-filling branching (Tawhai, Pullan and Hunter, 2000)\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1\n//\n// Knob 1: Air. What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli.\n// Knob 2: Rate. Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3.\n// Knob 3: Depth. A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far.\n// Knob 4: Altitude. Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own.\n// Buttons: K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.\n\nconst W = 64, H = 128, N = W * H, A0 = 2;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, ceil, round, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The diaphragm under the lungs breathed out, x then y: the right dome higher\n// over the liver, the heart sitting in the dip between the domes.\nconst DK = [-1, 118.5, 5, 113.8, 9, 108.4, 13, 103.8, 17, 101.6, 21, 101, 25, 101.8, 29, 104.2, 33, 106, 37, 106.6, 41, 106.6, 45, 105.8, 49, 106.8, 53, 110.2, 57, 115, 60, 117.8, 65, 122.5];\nconst D0T = F32(68);\nfor (let i = 0, k = 0; i \u003c 68; i++) {\n  while (k \u003c DK.length - 4 && i - 1 > DK[k + 2]) k += 2;\n  D0T[i] = mix(DK[k + 1], DK[k + 3], (i - 1 - DK[k]) / (DK[k + 2] - DK[k]));\n}\nfor (let n = 0; n \u003c 4; n++) for (let i = 1; i \u003c 67; i++) D0T[i] = (D0T[i - 1] + 2 * D0T[i] + D0T[i + 1]) / 4;\nconst d0 = (x) => ((x = cl(x + 1, 0, 66.99)), D0T[floor(x)] + (D0T[floor(x) + 1] - D0T[floor(x)]) * (x - floor(x)));\n// How far the diaphragm drops at each column: most under the two domes, so\n// they flatten.\nconst GX = Float32Array.from({ length: W }, (_, x) => 0.32 + 0.68 * (exp(-(((x - 17) / 10) ** 2)) + exp(-(((x - 46) / 10) ** 2))));\n// The outlines of the right lung (on the viewer's left) and the smaller left\n// lung with the heart's notch, breathed out. The diaphragm cuts their bases.\nconst LUNGS = [\n  [19, 21, 15, 22.5, 11.5, 26, 8.5, 32, 6.3, 40, 4.8, 50, 4, 60, 3.6, 72, 3.6, 84, 4, 96, 4.6, 106, 5.6, 126, 28.8, 126, 28.6, 104, 28.2, 98, 27.6, 90, 27.2, 82, 27.6, 74, 28.6, 66, 29, 58, 28.6, 50, 27.8, 42, 26.6, 34, 24.8, 27, 22.5, 22.5],\n  [44.5, 22, 48.5, 23.5, 52, 27, 55, 33, 57.2, 41, 58.8, 51, 59.6, 62, 60, 74, 60.2, 86, 60.2, 98, 59.9, 108, 59.2, 126, 41.5, 126, 41.5, 106, 41, 103, 42.4, 98, 44.5, 92, 45.4, 86, 44.4, 80, 41.8, 75, 38.6, 71, 36.6, 66, 36, 58, 36.4, 50, 37.2, 42, 38.4, 34, 40, 28, 42, 23.5],\n];\n// Airway walls by generation (9 is the channel through the larynx), and how\n// strongly each shows over the lung.\nconst WC = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? [226, 216, 204] : [232 - 2 * g, 208 - 4 * g, 206]));\nconst AG = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? 1 : g > 8 ? 0 : 1.1 - 0.08 * g));\n// The cough: seconds and lung volume, and the moments of the three jolts.\nconst CK = [0, 0, 0.32, 0.97, 0.44, 0.97, 0.54, 0.66, 0.84, 0.66, 0.94, 0.38, 1.24, 0.38, 1.34, 0.12, 1.9, 0];\nconst CT = [0.44, 0.84, 1.24];\n\nfunction sdPoly(v, px, py) {\n  let d = 1e9, s = 1;\n  for (let i = 0, j = v.length - 2; i \u003c v.length; j = i, i += 2) {\n    const ex = v[j] - v[i], ey = v[j + 1] - v[i + 1], wx = px - v[i], wy = py - v[i + 1];\n    const t = cl((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1), bx = wx - ex * t, by = wy - ey * t;\n    d = min(d, bx * bx + by * by);\n    const c1 = py >= v[i + 1], c2 = py \u003c v[j + 1], c3 = ex * wy > ey * wx;\n    if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s = -s;\n  }\n  return s * sqrt(d);\n}\n// The colour being built for one LED, and mixing toward another by k.\nconst C = F32(3);\nconst DA = [74, 58, 156];\nconst bl = (r, g, b, k) => ((C[0] += (r - C[0]) * k), (C[1] += (g - C[1]) * k), (C[2] += (b - C[2]) * k));\nfunction samp(A, x, y) {\n  x = cl(x, 0, 62.999);\n  y = cl(y, 0, 126.999);\n  const xi = x | 0, yi = y | 0, fx = x - xi, p = yi * W + xi, a = A[p] + (A[p + 1] - A[p]) * fx;\n  return a + (A[p + W] + (A[p + W + 1] - A[p + W]) * fx - a) * (y - yi);\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ph: 0.68, lp: 0.68, vol: 0.6, D: 0.5, air: 0, ct: -1, jolt: 0, hp: 0, hb: 0, envIn: 0, envOut: 0, Fin: -1, Fx: 2, bf: [], puffs: [],\n    sd: F32(N), own: new Int16Array(N).fill(-1), und: F32(N * 3), ua: F32(N), GL: F32(N),\n    SX: F32(H), KY: F32(W), alvA: F32(N), alvS: F32(N), alvK: new Int16Array(N), trA: F32(N), trV: F32(N), trS: F32(N), trG: new Int8Array(N), rib: F32(N), O: F32(N * 3),\n    seg: [], ax: [], ay: [], as: [], soot: [], cd: [], cb: [], trH: F32(N),\n  });\n  build(P);\n}\n\nfunction addSeg(P, x0, y0, x1, y1, r, g, d) {\n  const e = d + hypot(x1 - x0, y1 - y0);\n  P.seg.push(x0, y0, x1, y1, r, g, d, e);\n  return e;\n}\n\n// Volume-filling branching: a branch's alveoli are split by the line from its\n// end through their centroid, and each half gets a child that runs 40% of the\n// way to its own centroid, until a handful is left: one grape cluster.\nfunction grow(P, x0, y0, dx, dy, pts, g, r, d) {\n  const { ax, ay } = P, n = pts.length;\n  let cx = 0, cy = 0;\n  for (const i of pts) (cx += ax[i]), (cy += ay[i]);\n  (cx /= n), (cy /= n);\n  if (n \u003c= 7 || g > 8) {\n    for (const i of pts) (P.ak[i] = P.cd.length), (ax[i] += (cx - ax[i]) * 0.3), (ay[i] += (cy - ay[i]) * 0.3);\n    P.cd.push(d + hypot(cx - x0, cy - y0));\n    P.cb.push(0.84 + 0.32 * rnd());\n    return;\n  }\n  // The lobes split along the line from the branch to their centroid; past\n  // them each set is cut across its long axis, a near half and a far one.\n  let ux = cx - x0, uy = cy - y0, ul = hypot(ux, uy), ox = x0, oy = y0;\n  if (g > 2) {\n    let sxx = 0, syy = 0, sxy = 0;\n    for (const i of pts) (sxx += (ax[i] - cx) ** 2), (syy += (ay[i] - cy) ** 2), (sxy += (ax[i] - cx) * (ay[i] - cy));\n    const th = 0.5 * atan2(2 * sxy, sxx - syy) + PI / 2;\n    (ux = cos(th)), (uy = sin(th)), (ul = 1), (ox = cx), (oy = cy);\n  }\n  if (ul \u003c 0.5) (ux = dx), (uy = dy), (ul = hypot(dx, dy));\n  (ux /= ul), (uy /= ul);\n  const side = (i) => (ax[i] - ox) * uy - (ay[i] - oy) * ux;\n  let A = pts.filter((i) => side(i) > 0), B = pts.filter((i) => side(i) \u003c= 0);\n  if (A.length \u003c 2 || B.length \u003c 2) {\n    const s = pts.slice().sort((i, j) => side(i) - side(j));\n    (A = s.slice(0, n >> 1)), (B = s.slice(n >> 1));\n  }\n  const pa = atan2(dy, dx), lim = g === 2 ? 1.75 : 1.1;\n  for (const Q of [A, B]) {\n    let qx = 0, qy = 0;\n    for (const i of Q) (qx += ax[i]), (qy += ay[i]);\n    (qx = qx / Q.length - x0), (qy = qy / Q.length - y0);\n    let a = atan2(qy, qx), da = a - pa;\n    da = atan2(sin(da), cos(da));\n    if (abs(da) > lim) a = pa + Math.sign(da) * lim;\n    let len = max(1.2, hypot(qx, qy) * (Q.length \u003c= 7 ? 0.55 : 0.4)), x1, y1;\n    for (;;) {\n      (x1 = x0 + cos(a) * len), (y1 = y0 + sin(a) * len);\n      if (len \u003c= 1.2 || samp(P.sd, x1, y1) \u003c -0.6) break;\n      len *= 0.8;\n    }\n    const rr = max(0.5, r * Math.cbrt(Q.length / n));\n    grow(P, x1, y1, x1 - x0, y1 - y0, Q, g + 1, rr, addSeg(P, x0, y0, x1, y1, rr, g, d));\n  }\n}\n\nfunction build(P) {\n  const { sd, own, GL } = P;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, sl = d0(x + 0.5) - d0(x - 0.5), cut = (y - d0(x) + 0.6) / sqrt(1 + sl * sl);\n    const a = y \u003c 15 ? 6 : max(sdPoly(LUNGS[0], x, y), cut), b = y \u003c 15 ? 6 : max(sdPoly(LUNGS[1], x, y), cut);\n    sd[p] = min(a, b) + 0.9 * (vn(x * 0.32, y * 0.32) - 0.5);\n    GL[p] = exp(-(((x - 32) / 26) ** 2) - (((y - 66) / 50) ** 2));\n  }\n  // Alveoli on a jittered honeycomb inside the lungs.\n  const pts = [[], []];\n  for (let j = 0; j \u003c 56; j++)\n    for (let i = 0; i \u003c 29; i++) {\n      const x = 1 + i * 2.25 + (j & 1) * 1.125 + (rnd() - 0.5) * 0.7, y = 19 + j * 1.95 + (rnd() - 0.5) * 0.7;\n      if (x > 62.5 || y > 125 || samp(sd, x, y) > -1) continue;\n      pts[x \u003c 32 ? 0 : 1].push(P.ax.length);\n      P.ax.push(x), P.ay.push(y), P.as.push(0.86 + 0.28 * rnd()), P.soot.push(rnd());\n    }\n  P.ak = new Int16Array(P.ax.length);\n  // The larynx and trachea, the short steep right bronchus and the longer\n  // left one, then the trees.\n  let d = addSeg(P, 32, 3, 32, 16.5, 1, 9, 0);\n  d = addSeg(P, 32, 16.5, 32, 48.5, 3, 0, d);\n  grow(P, 26.6, 57, -4.8, 8.5, pts[0], 2, 2.3, addSeg(P, 31.3, 48.5, 26.6, 57, 2.3, 1, d));\n  grow(P, 40.4, 56.6, 7.8, 8.1, pts[1], 2, 2.05, addSeg(P, 32.7, 48.5, 40.4, 56.6, 2.05, 1, d));\n  P.dmax = max(...P.cd);\n  P.cd = Float32Array.from(P.cd, (v) => v / P.dmax);\n  P.cox = F32(P.cd.length).fill(0.55);\n  P.airK = F32(P.cd.length);\n  // Each lung pixel takes the cluster of its nearest alveolus.\n  const best = F32(N).fill(9);\n  P.ax.forEach((cx, i) => {\n    const cy = P.ay[i];\n    for (let y = max(0, round(cy) - 3); y \u003c= min(H - 1, round(cy) + 3); y++)\n      for (let x = max(0, round(cx) - 3); x \u003c= min(W - 1, round(cx) + 3); x++) {\n        const e = hypot(x - cx, y - cy), p = y * W + x;\n        if (e \u003c best[p]) (best[p] = e), (own[p] = P.ak[i]);\n      }\n  });\n  under(P);\n}\n\n// What lies behind the lungs, breathed out, as colour times cover: the\n// larynx, the diaphragm and, dim under it, the liver and the stomach.\nfunction under(P) {\n  const { und, ua } = P;\n  const lay = (p, r, g, b, a) => {\n    if (a \u003c= 0) return;\n    const o = p * 3;\n    (und[o] += (r - und[o]) * a), (und[o + 1] += (g - und[o + 1]) * a), (und[o + 2] += (b - und[o + 2]) * a), (ua[p] += (1 - ua[p]) * a);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, t = y - d0(x), ax = abs(x - 32);\n    if (t > 3) {\n      const xb = 37 + 3 * sin(y * 0.21), f = (1 - 0.55 * sm(3, 20, t)) * (0.7 + 0.5 * vn(x * 0.17, y * 0.17)) * (0.4 + 0.6 * sm(0.3, 2, abs(x - xb)));\n      x \u003c xb ? lay(p, 60 * f, 20 * f, 22 * f, cl(t - 3, 0, 1)) : lay(p, 50 * f, 30 * f, 44 * f, cl(t - 3, 0, 1));\n    }\n    // The diaphragm: a band of muscle with a lit upper face, its tendon pale\n    // in the middle under the heart.\n    if (t > -0.5 && t \u003c 4) {\n      const ten = sm(24, 29, x) * sm(43, 38, x), st = 0.8 + 0.2 * sin(x * 1.9 + t * 0.9), lit = 1 + 0.45 * sm(1.6, 0, t);\n      lay(p, mix(232 * st, 214, ten) * 0.72 * lit, mix(82 * st, 198, ten) * 0.66 * lit, mix(96, 188, ten) * 0.66 * lit, cl(min(t + 0.5, 4 - t), 0, 1));\n    }\n    if (y \u003c 19) {\n      const hy = 3.4 + 0.03 * ax * ax;\n      if (ax \u003c 9.5) lay(p, 200, 192, 176, 0.5 * cl(1 - abs(y - hy) / 0.9, 0, 1));\n      const top = 6 + 2.2 * max(0, 1 - ax / 2.4), hw = 7.4 - 0.42 * (y - 6), e = min(y - top, 14.6 - y, hw - ax);\n      // The thyroid cartilage, its left plate lit and the right in shade.\n      if (e > -0.5) lay(p, 206, 196, 184, cl(e + 0.5, 0, 1) * (0.42 + 0.2 * exp(-((ax / 1.8) ** 2)) + 0.25 * sm(1.2, 0.2, e)) * (x \u003c 32 ? 1.05 : 0.78));\n      if (y > 15 && y \u003c 17.6 && ax \u003c 4.9) lay(p, 214, 204, 192, 0.55 * cl(4.9 - ax, 0, 1));\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.t += dt;\n  P.air = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3), dep = cl(k[2], 0, 1), alt = cl(k[3], 0, 1);\n  const bpm = (8 + 4.5 * rate + 12 * max(0, rate - 2) ** 2) * (1 + 0.45 * alt);\n  P.D = (0.5 + 0.5 * dep) * (1 - 0.4 * sm(2, 3, rate)) * (1 + 0.22 * alt);\n  if (input.btnPressed && input.btnPressed[0] && P.ct \u003c 0) (P.ct = 0), (P.cv = P.vol), (P.cn = 0);\n  let vol = 0, envIn = 0, envOut = 0, Fin = -1, Fx = 2;\n  P.bf = [];\n  P.jolt = 0;\n  if (P.ct >= 0) {\n    // A gasp, then three coughs, each a jolt and a burst of warm air up the tree.\n    const c = (P.ct += dt);\n    let j = 0;\n    while (j \u003c CK.length - 4 && c > CK[j + 2]) j += 2;\n    vol = mix(j ? CK[j + 1] : P.cv, CK[j + 3], sm(CK[j], CK[j + 2], c));\n    if (c \u003c 0.4) (envIn = sin((PI * c) / 0.4) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(c / 0.3, 0, 1)) ** 2));\n    for (const tc of CT) {\n      const u = c - tc;\n      if (u > 0 && u \u003c 0.7) P.bf.push(1 - u * 3.2), (P.jolt = max(P.jolt, 2.4 * exp(-u / 0.08)));\n    }\n    if (P.cn \u003c 3 && c > CT[P.cn] + 0.28) P.puffs.push([0, 2, rnd()]), P.cn++;\n    if (c > 1.9) (P.ct = -1), (P.ph = 0.9);\n  } else {\n    // In for 38% of a breath, out for half, then a short rest.\n    const p = (P.ph = (P.ph + (dt * bpm) / 60) % 1);\n    if (p \u003c 0.38) (vol = 0.5 - 0.5 * cos((PI * p) / 0.38)), (envIn = sin((PI * p) / 0.38) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(p / 0.3, 0, 1)) ** 2));\n    else if (p \u003c 0.88) {\n      const u = (p - 0.38) / 0.5;\n      (vol = 0.5 + 0.5 * cos(PI * u)), (envOut = sin(PI * u) ** 0.5), (Fx = 1.06 - 1.2 * sm(0.02, 0.8, u));\n    }\n    if (P.lp \u003c 0.64 && p >= 0.64) P.puffs.push([0, 1, rnd()]);\n    P.lp = p;\n  }\n  Object.assign(P, { vol, envIn, envOut, Fin, Fx });\n  // The alveoli the cold air has reached take up oxygen fast; the rest give it\n  // up slowly to the blood that carries it away.\n  const wS = max(0, 2 * P.air - 1), hi = 1 - 0.66 * alt - 0.14 * wS, { cd, cox, airK } = P;\n  for (let i = 0; i \u003c cd.length; i++) {\n    cox[i] += Fin > cd[i] ? (hi - cox[i]) * (1 - exp(-dt * 7)) : (0.05 - cox[i]) * (1 - exp(-dt * 0.85));\n    airK[i] = envIn * exp(-(((Fin - cd[i]) / 0.07) ** 2));\n  }\n  P.hp = (P.hp + (dt * (62 + 10 * rate + 40 * alt)) / 60) % 1;\n  P.hb = exp(-(((P.hp - 0.06) / 0.05) ** 2)) + 0.6 * exp(-(((P.hp - 0.3) / 0.05) ** 2));\n  P.puffs = P.puffs.filter((f) => (f[0] += dt) \u003c 5);\n}\n\n// Rest coordinates to the panel, breathed in by the per-row and per-column\n// scales: out to the sides, down with the diaphragm.\nlet FX = 0, FY = 0;\nfunction fw(P, xr, yr) {\n  const { SX, KY } = P, kx = cl(32 + (xr - 32) * SX[cl(round(yr), 0, H - 1)], 0, 62.99), ki = floor(kx);\n  FY = A0 + (yr - A0) * (KY[ki] + (KY[ki + 1] - KY[ki]) * (kx - ki));\n  FX = 32 + (xr - 32) * SX[cl(round(FY), 0, H - 1)];\n}\n\nfunction alveoli(P) {\n  const { alvA, alvS, alvK, ax, ay, as } = P, rA = 1.02 + 0.52 * P.vol * P.D;\n  alvA.fill(0);\n  for (let i = 0; i \u003c ax.length; i++) {\n    fw(P, ax[i], ay[i]);\n    const cx = FX, cy = FY, r = rA * as[i], lim = (r + 0.5) ** 2;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n        const dx = x - cx, dy = y - cy, e2 = dx * dx + dy * dy;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x;\n        const q = e / r, hx = dx + 0.4 * r, hy = dy + 0.45 * r, hl = max(0, 1 - sqrt(hx * hx + hy * hy) / (0.75 * r));\n        const s = 0.72 + 0.28 * sqrt(max(0, 1 - q * q)) + 0.38 * hl * hl;\n        if (a * s > alvA[p] * alvS[p]) (alvA[p] = a), (alvS[p] = s), (alvK[p] = i);\n      }\n  }\n}\n\nfunction tree(P) {\n  const { seg: S, trA, trV, trS, trG, trH } = P, dil = 1 + 0.1 * P.vol * P.D;\n  trA.fill(0);\n  trH.fill(0);\n  for (let j = 0; j \u003c S.length; j += 8) {\n    fw(P, S[j], S[j + 1]);\n    const x0 = FX, y0 = FY;\n    fw(P, S[j + 2], S[j + 3]);\n    const ex = FX - x0, ey = FY - y0, l2 = ex * ex + ey * ey || 1e-6, r = S[j + 4] * dil, g = S[j + 5], da = S[j + 6], db = S[j + 7], lim = (r + 1.7) ** 2, hr = min(1, r);\n    for (let y = max(0, floor(min(y0, FY) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, FY) + r + 1)); y++)\n      for (let x = max(0, floor(min(x0, FX) - r - 1)); x \u003c= min(W - 1, ceil(max(x0, FX) + r + 1)); x++) {\n        const t = cl(((x - x0) * ex + (y - y0) * ey) / l2, 0, 1), px = x - x0 - ex * t, py = y - y0 - ey * t, e2 = px * px + py * py;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x, h = cl(r + 1.7 - e, 0, 1) * hr;\n        if (h > trH[p]) trH[p] = h;\n        if (a > trA[p]) (trA[p] = a), (trS[p] = da + (db - da) * t), (trV[p] = e / r), (trG[p] = g);\n      }\n  }\n}\n\n// The collarbones and ten ribs, faint arcs that lift and spread on a breath.\nfunction ribs(P) {\n  const { rib, SX } = P, v = P.vol * P.D;\n  rib.fill(0);\n  const dot = (fx, fy, rad, k) => {\n    for (let y = max(0, round(fy) - 1); y \u003c= min(H - 1, round(fy) + 1); y++)\n      for (let x = max(0, round(fx) - 1); x \u003c= min(W - 1, round(fx) + 1); x++) {\n        const a = cl(rad + 0.5 - sqrt((x - fx) ** 2 + (y - fy) ** 2), 0, 1) * k, p = y * W + x;\n        if (a > rib[p]) rib[p] = a;\n      }\n  };\n  for (let i = 0; i \u003c= 10; i++)\n    for (const s of [-1, 1]) {\n      if (i === 0) {\n        for (let n = 0; n \u003c= 50; n++) {\n          const u = n / 50;\n          dot(32 + s * (4.5 + 21 * u), 18.6 - 4.2 * u + 1.4 * sin(PI * u) - 1.2 * v, 0.5 + 0.4 * (2 * u - 1) ** 2, 0.85);\n        }\n        continue;\n      }\n      const yr = 23 + (i - 1) * 8.4, y0 = yr - v * (1 + 0.42 * i), hw = (1.5 + 28.4 * (1 - exp(-(yr - 15) / 14))) * SX[round(yr)];\n      const rx = hw - 3, ry = (5.5 + 0.55 * i) * (1 - 0.25 * v), n = ceil((rx + ry) * 2.2);\n      for (let m = 0; m \u003c= n; m++) {\n        const th = (1.62 * m) / n;\n        dot(32 + s * (3 + rx * sin(th)), y0 + ry * (1 - cos(th)), 0.7, sm(0.2, 0.6, th));\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cox) return;\n  const { SX, KY, sd, own, cox, cb, airK, und, ua, alvA, alvS, alvK, trA, trV, trS, trG, trH, rib, O, ak, soot, GL } = P, dm = 1 / P.dmax;\n  const t = P.t, v = P.vol * P.D, air = P.air, hb = P.hb, { envIn, envOut, Fin, Fx, bf } = P;\n  const wC = max(0, 1 - 2 * air), wW = 1 - abs(2 * air - 1), wS = max(0, 2 * air - 1);\n  const pal = (c, w, s) => [0, 1, 2].map((i) => c[i] * wC + w[i] * wW + s[i] * wS);\n  const bgT = pal([3, 7, 18], [16, 26, 48], [62, 50, 32]), bgB = pal([2, 4, 12], [8, 14, 30], [36, 28, 20]), glo = pal([8, 18, 40], [22, 38, 64], [40, 30, 18]);\n  const cold = pal([150, 205, 255], [215, 238, 255], [196, 178, 128]), warm = pal([255, 196, 160], [255, 224, 206], [190, 160, 130]);\n  const puffC = pal([255, 214, 196], [236, 242, 255], [168, 158, 144]), puffK = 0.6 * wC + 1.5 * wW + 0.7 * wS;\n  const oxA = [240 - 64 * wS, 46 + 26 * wS, 58 + 20 * wS];\n  for (let y = 0; y \u003c H; y++) SX[y] = 1 + 0.085 * v * (0.25 + 0.75 * sm(15, 115, y));\n  for (let x = 0; x \u003c W; x++) KY[x] = 1 + 0.14 * v * GX[x];\n  alveoli(P);\n  tree(P);\n  ribs(P);\n  // The breath leaving at the top: each puff rises, spreads and thins.\n  const pf = [];\n  for (const [age, str, sd0] of P.puffs) {\n    const R = 3 + (5 + 8 * wW) * age;\n    pf.push(32 + (sd0 - 0.5) * 8, 6 - 3.2 * age, R, str * sm(0, 0.25, age) * exp(-age / (0.9 + 1.6 * wW)), sd0 * 40);\n  }\n  const hs = 1 / (1 - 0.035 * hb);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const fy = y / 127, gl = GL[p];\n      let hz = 1;\n      if (wS > 0) hz = 1 + wS * (0.18 * sin(x * 0.2 + y * 0.05 + t * 0.6) + 0.18 * sin(y * 0.13 - x * 0.06 - t * 0.35));\n      for (let c = 0; c \u003c 3; c++) C[c] = (bgT[c] + (bgB[c] - bgT[c]) * fy + glo[c] * gl) * hz;\n      const xr = cl(32 + (x - 32) / SX[y], 0, 62.999), yr = cl(A0 + (y - A0) / KY[x], 0, 126.999);\n      const xi = xr | 0, yi = yr | 0, fx = xr - xi, fz = yr - yi, q = yi * W + xi;\n      if (ua[q] + ua[q + 1] + ua[q + W] + ua[q + W + 1] > 0) {\n        const w0 = (1 - fx) * (1 - fz) * ua[q], w1 = fx * (1 - fz) * ua[q + 1], w2 = (1 - fx) * fz * ua[q + W], w3 = fx * fz * ua[q + W + 1], a = 1 - w0 - w1 - w2 - w3;\n        const o0 = q * 3, o2 = o0 + W * 3;\n        for (let c = 0; c \u003c 3; c++) C[c] = C[c] * a + und[o0 + c] * w0 + und[o0 + 3 + c] * w1 + und[o2 + c] * w2 + und[o2 + 3 + c] * w3;\n      }\n      // The heart, dim behind the lungs, its apex down to the left.\n      if (xr > 20 && xr \u003c 56 && yr > 60 && yr \u003c 110) {\n        const dx = xr - 36.6, dy = yr - 86, hv = (dx * 0.6 + dy * 0.8) * hs, hu = (dx * 0.8 - dy * 0.6) * hs, eu = hu / (12.5 * (1 - 0.36 * sm(-6, 19, hv))), ev = hv / 19;\n        const a = cl((1 - sqrt(eu * eu + ev * ev)) * 9, 0, 1);\n        if (a > 0) {\n          const k = (0.4 + 0.32 * hb) * (0.65 + 0.45 * sm(9, -9, hu));\n          bl(150 * k, 26 * k, 44 * k, a);\n        }\n      }\n      // The lung: a dusky body, the grape clusters of alveoli, the capillary\n      // net shimmering on them, the pleura at the edge.\n      const s = samp(sd, xr, yr), qn = round(yr) * W + round(xr);\n      let m = 0;\n      if (s \u003c 1.2) {\n        const c = own[qn], ox = c >= 0 ? cox[c] : 0.3;\n        m = cl(0.5 - s, 0, 1);\n        if (m > 0) bl(24 + 56 * ox, 14 - 4 * ox, 50 - 20 * ox, 0.92 * m);\n        const aa = alvA[p];\n        if (aa > 0) {\n          const i = alvK[p], cc = ak[i], o = cox[cc], sh = alvS[p] * cb[cc] * (soot[i] \u003c wS * 0.4 ? 0.3 : 1), af = 0.4 * airK[cc];\n          for (let c = 0; c \u003c 3; c++) C[c] += ((DA[c] + (oxA[c] - DA[c]) * o) * sh + cold[c] * af - C[c]) * aa;\n        }\n        const cv = hash(qn, 5);\n        if (m > 0 && cv > 0.6) {\n          const k = (cv - 0.35) * (0.75 + 0.75 * sin(t * 6 + cv * 90 + 2 * hb)) * (0.12 + 0.34 * ox) * m;\n          (C[0] += 230 * k), (C[1] += 30 * k), (C[2] += 50 * k);\n        }\n        const rm = cl(1 - abs(s + 0.45) / 0.75, 0, 1) * 0.5;\n        if (rm > 0) bl(126 + 129 * ox, 100 + 24 * ox, 214 - 70 * ox, rm);\n        // A shadow along each airway lifts the tree off the alveoli.\n        bl(0, 0, 0, trH[p] * 0.5 * m);\n      }\n      // The airways, and the air in them.\n      const ta = trA[p];\n      if (ta > 0) {\n        const gg = trG[p], vv = trV[p], d = trS[p] * dm, wc = WC[gg], al = AG[gg] * ta;\n        let wb = 0.85;\n        if (gg \u003c= 1) {\n          const ring = 0.5 + 0.5 * cos(trS[p] * 2.73);\n          wb = (0.5 + 0.5 * sm(0.35, 0.95, vv)) * (0.66 + 0.44 * ring * ring);\n        } else if (gg \u003c= 3) wb = 0.65 + 0.35 * sm(0.3, 1, vv);\n        bl(wc[0] * wb, wc[1] * wb, wc[2] * wb, al);\n        let ca = 0, wa = 0;\n        if (envIn > 0 && d \u003c Fin) ca = envIn * (0.3 + 0.7 * exp(-(((Fin - d) / 0.05) ** 2)));\n        if (envOut > 0 && d > Fx) wa = envOut * (0.24 + 0.76 * exp(-(((d - Fx) / 0.05) ** 2)));\n        for (const f of bf) wa += 1.3 * exp(-(((d - f) / 0.06) ** 2)) + (d > f ? 0.25 : 0);\n        const lf = (gg \u003c= 1 ? 1 - 0.5 * sm(0.55, 1, vv) : 1) * ta * (gg === 9 ? 0.8 : 0.9);\n        for (let c = 0; c \u003c 3; c++) C[c] += (cold[c] * ca + warm[c] * wa) * lf;\n      }\n      const rb = rib[p];\n      if (rb > 0) bl(220, 210, 196, rb * (0.42 + 0.1 * m));\n      if (y \u003c 48 && pf.length) {\n        let pa = 0;\n        for (let j = 0; j \u003c pf.length; j += 5) {\n          const dx = (x - pf[j]) / (pf[j + 2] * 1.4), dy = (y - pf[j + 1]) / pf[j + 2], e = dx * dx + dy * dy;\n          if (e \u003c 4) pa += pf[j + 3] * exp(-e * 1.4) * cl(0.4 + 1.4 * (vn(x * 0.2 + pf[j + 4], y * 0.2 + t * 0.9) - 0.5) + 0.5 * exp(-e * 3), 0, 1.4);\n        }\n        if (pa > 0) bl(puffC[0], puffC[1], puffC[2], min(1, pa * puffK));\n      }\n      if (wS > 0) bl(120, 96, 62, 0.14 * wS * hz);\n      O.set(C, p * 3);\n    }\n  // A cough jolts the whole chest up.\n  const jl = round(P.jolt);\n  for (let y = 0; y \u003c H; y++) {\n    const o = min(H - 1, y + jl) * W * 3;\n    for (let x = 0; x \u003c W; x++) display.setPixel(x, y, min(255, O[o + x * 3]) | 0, min(255, O[o + x * 3 + 1]) | 0, min(255, O[o + x * 3 + 2]) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Air","min":0,"max":1,"about":"What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli."},{"name":"Rate","min":0.2,"max":3,"about":"Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3."},{"name":"Depth","min":0,"max":1,"about":"A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far."},{"name":"Altitude","min":0,"max":1,"about":"Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own."}],"start":[0,2,0,0.06],"measures":{"motion":0.3669,"detail":0.0863,"edges":0.4238,"complexity":2.0569,"coverage":0.8446,"colour":0.207,"drift":0.1347},"knobResponse":[0.0972,0.1294,0.1076,0.1068]},{"slug":"brushstrokes","title":"Brushstrokes","family":"noise","round":17,"note":"반 고흐의 「별이 빛나는 밤」을 짧고 두꺼운 붓질로 칠하고 또 칠해요. 흐름을 따라 놓인 군청과 코발트 붓질이 노란 별무리와 초승달을 감아 돌고, 불꽃처럼 솟은 사이프러스 옆 마을에 창이 켜져요.","idea":"A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","layer":{"id":"layer-brushstrokes","type":"code","name":"brushstrokes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow."},{"name":"Flow","min":0.2,"max":3,"about":"How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower."},{"name":"Length","min":4,"max":12,"about":"How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones."},{"name":"Swirl","min":0,"max":1,"about":"How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies."}],"start":[0,2,4,0.06],"measures":{"motion":0.0383,"detail":0.0951,"edges":0.2993,"complexity":2.3542,"coverage":0.998,"colour":0.5763,"drift":0.0278},"knobResponse":[0.4036,0.1538,0.1578,0.1518]},{"slug":"cam-wave","title":"Cam Wave","family":"machine","round":15,"note":"발치의 캠축이 돌면 캠마다 막대를 밀어 올리고, 막대 끝에 걸린 구슬 띠가 물결이 되어 옆으로 흘러가요. K1 을 누르면 캠이 둥근 편심에서 달걀꼴, 달팽이꼴로 바뀌어요.","idea":"A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.","buttons":"K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.","code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-cam-wave","type":"code","name":"cam-wave","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20."},{"name":"Cams","min":6,"max":12,"about":"How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12."},{"name":"Phase","min":-1,"max":1,"about":"How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second."}],"start":[0,2,6,0.06],"measures":{"motion":0.4062,"detail":0.0758,"edges":0.6341,"complexity":0.5068,"coverage":0.4175,"colour":0.2693,"drift":0.1185},"knobResponse":[0.0838,0.0978,0.1488,0.0628]},{"slug":"cat-eye","title":"Cat Eye","family":"cosmetic","round":34,"note":"보랏빛 젤리 폴리시 밑으로 보이지 않는 막대 자석이 미끄러지면, 자성 반짝이가 자기장을 따라 돌아 자기장이 표면과 나란한 자리에 날카로운 빛줄기 하나가 서고 그 양옆은 곧추선 반짝이로 짙어져요. 자석이 지나간 자리의 반짝이는 1.8초에 걸쳐 흩어진 은하 같은 반짝임으로 돌아가요. K3 은 막대를 둘로 늘려 줄 두 개나 별 모양을 세우고, K1 을 누르면 자석이 멀어졌다 돌아와요.","idea":"A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.","buttons":"K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.","code":"// ===== Patternflow pattern =====\n// Title:   Cat Eye\n// Family:  cosmetic\n// Idea:    A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after magnetic cat-eye gel nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1\n//\n// Knob 1: Hue. The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne.\n// Knob 2: Speed. At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Magnet. At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star.\n// Knob 4: Depth. How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide.\n// Buttons: K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.\n\nconst W = 64, H = 128, N = W * H;\n// The magnet is a flat bar 76 LEDs long, magnetised across its width, lying\n// along the panel under the polish: nine dipoles in a row.\nconst BAR = 76, PTS = 9;\nconst { floor, min, max, sqrt, sin, cos, exp, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * Math.log(u)) * cos(2 * PI * v);\n}\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, mag: 0, depth: 0.06, t: 0, warm: false, pull: 0, pullT: -1,\n    A: new Float32Array(N), TH: new Float32Array(N), JIT: new Float32Array(N), TEX: new Float32Array(N), SZ: new Float32Array(N),\n    R0: new Float32Array(N), RW: new Float32Array(N), RP: new Float32Array(N),\n    dip: new Float64Array(6 * 2 * PTS), nd: 0, ref: 1,\n  };\n  for (let p = 0; p \u003c N; p++) {\n    S.JIT[p] = 0.1 * gauss();\n    S.TEX[p] = 0.8 + 0.4 * random();\n    S.SZ[p] = 0.3 + 1.2 * random() ** 2;\n    S.R0[p] = (random() - 0.5) * PI;\n    S.RW[p] = 0.3 + 0.9 * random();\n    S.RP[p] = 2 * PI * random();\n  }\n  params.s = S;\n}\n\n// A second bar has strength |Magnet|. Below 0 it lies beside the first, 0.9\n// of the depth away and poles reversed, for a double line; above 0 it lies\n// across the first, for a star.\n\nfunction magnets(S) {\n  const sp = S.t, d = 10 + 30 * S.depth;\n  const cx = 32 + 15 * sin((2 * PI * sp) / 7), cy = 64 + 16 * sin((2 * PI * sp) / 11 + 1);\n  const ang = 0.3 * sin((2 * PI * sp) / 17);\n  // Along the bar (down the panel) and across it.\n  const lx = -sin(ang), ly = cos(ang), mx = cos(ang), my = sin(ang);\n  const k = S.mag, away = 1 + 3 * S.pull, dip = S.dip;\n  S.nd = 0;\n  const bar = (x, y, ax, ay, ex, ey, st) => {\n    for (let i = 0; i \u003c PTS; i++) {\n      const u = (i / (PTS - 1) - 0.5) * BAR, o = 6 * S.nd++;\n      dip[o] = x + u * ax;\n      dip[o + 1] = y + u * ay;\n      dip[o + 2] = d * away;\n      dip[o + 3] = ex;\n      dip[o + 4] = ey;\n      dip[o + 5] = st / PTS;\n    }\n  };\n  if (k \u003c 0) {\n    const s = 0.9 * d * -k;\n    bar(cx - s * mx, cy - s * my, lx, ly, mx, my, 1);\n    bar(cx + s * mx, cy + s * my, lx, ly, -mx, -my, -k);\n  } else {\n    bar(cx, cy, lx, ly, mx, my, 1);\n    if (k > 0) bar(cx, cy, mx, my, -lx, -ly, k);\n  }\n  // The field at the surface right over the middle of one bar at this depth\n  // is the scale the flakes answer to.\n  let ref = 0;\n  for (let i = 0; i \u003c PTS; i++) {\n    const u = (i / (PTS - 1) - 0.5) * BAR, r2 = u * u + d * d, ir = 1 / sqrt(r2);\n    ref += (ir * ir * ir) / PTS;\n  }\n  S.ref = ref;\n}\n\nfunction step(S, dt) {\n  const sp = S.speed / 2, ds = dt * sp;\n  S.t += ds;\n  if (S.pullT >= 0) {\n    // Away in 0.3 s, held 2.5 s, back in 0.5 s.\n    S.pullT += ds;\n    const u = S.pullT;\n    S.pull = u \u003c 0.3 ? u / 0.3 : u \u003c 2.8 ? 1 : u \u003c 3.3 ? 1 - (u - 2.8) / 0.5 : 0;\n    if (u >= 3.3) S.pullT = -1;\n  }\n  magnets(S);\n  const { A, TH, dip } = S, iref = 1 / S.ref, nd = S.nd;\n  const kOn = 1 - exp(-ds / 0.15), kOff = 1 - exp(-ds / 1.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let bx = 0, by = 0, bz = 0;\n      for (let o = 0; o \u003c 6 * nd; o += 6) {\n        const ex = dip[o + 3], ey = dip[o + 4], st = dip[o + 5];\n        const rx = x + 0.5 - dip[o], ry = y + 0.5 - dip[o + 1], rz = dip[o + 2];\n        const r2 = rx * rx + ry * ry + rz * rz, ir = 1 / sqrt(r2), i3 = st * ir * ir * ir, md = 3 * (ex * rx + ey * ry) * ir * ir;\n        bx += i3 * (md * rx - ex);\n        by += i3 * (md * ry - ey);\n        bz += i3 * md * rz;\n      }\n      const bh = sqrt(bx * bx + by * by), b = sqrt(bh * bh + bz * bz) * iref;\n      const p = y * W + x, at = 1 - exp(-b / 0.25);\n      A[p] += (at - A[p]) * (at > A[p] ? kOn : kOff);\n      // Tilt of the field from the surface, -pi/2..pi/2; a flake's axis is a\n      // line, so tilts half a turn apart are the same.\n      const tt = atan2(bz, bh);\n      let dlt = tt - TH[p];\n      if (dlt > PI / 2) dlt -= PI;\n      else if (dlt \u003c -PI / 2) dlt += PI;\n      TH[p] += dlt * (1 - exp(-ds * (1 + 10 * at) / 0.6));\n      if (TH[p] > PI / 2) TH[p] -= PI;\n      else if (TH[p] \u003c -PI / 2) TH[p] += PI;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.mag = cl(k[2], -1, 1);\n  S.depth = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on flakes that have followed the magnet for two seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 60; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.pullT \u003c 0) S.pullT = 0;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { A, TH, JIT, TEX, SZ, R0, RW, RP } = S, h = S.hue + 0.74, t = S.t;\n  // Orange and yellow jelly at level 40 reads brown on the panel. Round\n  // there (hue 0.0 to 0.22) the base sinks toward black, as a gold cat eye\n  // over a black base coat, and the band's glow turns paler and brighter.\n  const hh = h - floor(h), wy = max(0, 1 - ((hh - 0.11) / 0.12) ** 2);\n  const body = [0, 0, 0], glint = [0, 0, 0], vel = [0, 0, 0];\n  hsv(h, 0.95 - 0.2 * wy, 1 - 0.7 * wy, body);\n  hsv(h + 0.02, 0.25 - 0.1 * wy, 1, glint);\n  hsv(h + 0.01, 0.6 - 0.25 * wy, 1 + 0.4 * wy, vel);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, a = A[p], th = TH[p], s2 = sin(th) * sin(th);\n      // Where the flake points: along the field as far as it is aligned,\n      // otherwise its own slow tumble.\n      const free = 6 * (R0[p] + 0.7 * sin(RW[p] * t + RP[p]));\n      const phi = a * (th + JIT[p]) + (1 - a) * free;\n      const g = exp(-(phi * phi) / (2 * 0.12 * 0.12));\n      const v = a * a * exp(-(th * th) / (2 * 0.5 * 0.5));\n      const lb = 40 * TEX[p] * (1 - 0.5 * a * s2), lg = 255 * g * (a + 0.3 * (1 - a) * SZ[p]), lv = 150 * v;\n      const r = body[0] * lb + glint[0] * lg + vel[0] * lv;\n      const gg = body[1] * lb + glint[1] * lg + vel[1] * lv;\n      const bb = body[2] * lb + glint[2] * lg + vel[2] * lv;\n      display.setPixel(x, y, round(min(255, r)), round(min(255, gg)), round(min(255, bb)));\n    }\n}\n","layer":{"id":"layer-cat-eye","type":"code","name":"cat-eye","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cat Eye\n// Family:  cosmetic\n// Idea:    A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after magnetic cat-eye gel nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1\n//\n// Knob 1: Hue. The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne.\n// Knob 2: Speed. At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Magnet. At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star.\n// Knob 4: Depth. How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide.\n// Buttons: K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.\n\nconst W = 64, H = 128, N = W * H;\n// The magnet is a flat bar 76 LEDs long, magnetised across its width, lying\n// along the panel under the polish: nine dipoles in a row.\nconst BAR = 76, PTS = 9;\nconst { floor, min, max, sqrt, sin, cos, exp, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * Math.log(u)) * cos(2 * PI * v);\n}\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, mag: 0, depth: 0.06, t: 0, warm: false, pull: 0, pullT: -1,\n    A: new Float32Array(N), TH: new Float32Array(N), JIT: new Float32Array(N), TEX: new Float32Array(N), SZ: new Float32Array(N),\n    R0: new Float32Array(N), RW: new Float32Array(N), RP: new Float32Array(N),\n    dip: new Float64Array(6 * 2 * PTS), nd: 0, ref: 1,\n  };\n  for (let p = 0; p \u003c N; p++) {\n    S.JIT[p] = 0.1 * gauss();\n    S.TEX[p] = 0.8 + 0.4 * random();\n    S.SZ[p] = 0.3 + 1.2 * random() ** 2;\n    S.R0[p] = (random() - 0.5) * PI;\n    S.RW[p] = 0.3 + 0.9 * random();\n    S.RP[p] = 2 * PI * random();\n  }\n  params.s = S;\n}\n\n// A second bar has strength |Magnet|. Below 0 it lies beside the first, 0.9\n// of the depth away and poles reversed, for a double line; above 0 it lies\n// across the first, for a star.\n\nfunction magnets(S) {\n  const sp = S.t, d = 10 + 30 * S.depth;\n  const cx = 32 + 15 * sin((2 * PI * sp) / 7), cy = 64 + 16 * sin((2 * PI * sp) / 11 + 1);\n  const ang = 0.3 * sin((2 * PI * sp) / 17);\n  // Along the bar (down the panel) and across it.\n  const lx = -sin(ang), ly = cos(ang), mx = cos(ang), my = sin(ang);\n  const k = S.mag, away = 1 + 3 * S.pull, dip = S.dip;\n  S.nd = 0;\n  const bar = (x, y, ax, ay, ex, ey, st) => {\n    for (let i = 0; i \u003c PTS; i++) {\n      const u = (i / (PTS - 1) - 0.5) * BAR, o = 6 * S.nd++;\n      dip[o] = x + u * ax;\n      dip[o + 1] = y + u * ay;\n      dip[o + 2] = d * away;\n      dip[o + 3] = ex;\n      dip[o + 4] = ey;\n      dip[o + 5] = st / PTS;\n    }\n  };\n  if (k \u003c 0) {\n    const s = 0.9 * d * -k;\n    bar(cx - s * mx, cy - s * my, lx, ly, mx, my, 1);\n    bar(cx + s * mx, cy + s * my, lx, ly, -mx, -my, -k);\n  } else {\n    bar(cx, cy, lx, ly, mx, my, 1);\n    if (k > 0) bar(cx, cy, mx, my, -lx, -ly, k);\n  }\n  // The field at the surface right over the middle of one bar at this depth\n  // is the scale the flakes answer to.\n  let ref = 0;\n  for (let i = 0; i \u003c PTS; i++) {\n    const u = (i / (PTS - 1) - 0.5) * BAR, r2 = u * u + d * d, ir = 1 / sqrt(r2);\n    ref += (ir * ir * ir) / PTS;\n  }\n  S.ref = ref;\n}\n\nfunction step(S, dt) {\n  const sp = S.speed / 2, ds = dt * sp;\n  S.t += ds;\n  if (S.pullT >= 0) {\n    // Away in 0.3 s, held 2.5 s, back in 0.5 s.\n    S.pullT += ds;\n    const u = S.pullT;\n    S.pull = u \u003c 0.3 ? u / 0.3 : u \u003c 2.8 ? 1 : u \u003c 3.3 ? 1 - (u - 2.8) / 0.5 : 0;\n    if (u >= 3.3) S.pullT = -1;\n  }\n  magnets(S);\n  const { A, TH, dip } = S, iref = 1 / S.ref, nd = S.nd;\n  const kOn = 1 - exp(-ds / 0.15), kOff = 1 - exp(-ds / 1.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let bx = 0, by = 0, bz = 0;\n      for (let o = 0; o \u003c 6 * nd; o += 6) {\n        const ex = dip[o + 3], ey = dip[o + 4], st = dip[o + 5];\n        const rx = x + 0.5 - dip[o], ry = y + 0.5 - dip[o + 1], rz = dip[o + 2];\n        const r2 = rx * rx + ry * ry + rz * rz, ir = 1 / sqrt(r2), i3 = st * ir * ir * ir, md = 3 * (ex * rx + ey * ry) * ir * ir;\n        bx += i3 * (md * rx - ex);\n        by += i3 * (md * ry - ey);\n        bz += i3 * md * rz;\n      }\n      const bh = sqrt(bx * bx + by * by), b = sqrt(bh * bh + bz * bz) * iref;\n      const p = y * W + x, at = 1 - exp(-b / 0.25);\n      A[p] += (at - A[p]) * (at > A[p] ? kOn : kOff);\n      // Tilt of the field from the surface, -pi/2..pi/2; a flake's axis is a\n      // line, so tilts half a turn apart are the same.\n      const tt = atan2(bz, bh);\n      let dlt = tt - TH[p];\n      if (dlt > PI / 2) dlt -= PI;\n      else if (dlt \u003c -PI / 2) dlt += PI;\n      TH[p] += dlt * (1 - exp(-ds * (1 + 10 * at) / 0.6));\n      if (TH[p] > PI / 2) TH[p] -= PI;\n      else if (TH[p] \u003c -PI / 2) TH[p] += PI;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.mag = cl(k[2], -1, 1);\n  S.depth = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on flakes that have followed the magnet for two seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 60; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.pullT \u003c 0) S.pullT = 0;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { A, TH, JIT, TEX, SZ, R0, RW, RP } = S, h = S.hue + 0.74, t = S.t;\n  // Orange and yellow jelly at level 40 reads brown on the panel. Round\n  // there (hue 0.0 to 0.22) the base sinks toward black, as a gold cat eye\n  // over a black base coat, and the band's glow turns paler and brighter.\n  const hh = h - floor(h), wy = max(0, 1 - ((hh - 0.11) / 0.12) ** 2);\n  const body = [0, 0, 0], glint = [0, 0, 0], vel = [0, 0, 0];\n  hsv(h, 0.95 - 0.2 * wy, 1 - 0.7 * wy, body);\n  hsv(h + 0.02, 0.25 - 0.1 * wy, 1, glint);\n  hsv(h + 0.01, 0.6 - 0.25 * wy, 1 + 0.4 * wy, vel);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, a = A[p], th = TH[p], s2 = sin(th) * sin(th);\n      // Where the flake points: along the field as far as it is aligned,\n      // otherwise its own slow tumble.\n      const free = 6 * (R0[p] + 0.7 * sin(RW[p] * t + RP[p]));\n      const phi = a * (th + JIT[p]) + (1 - a) * free;\n      const g = exp(-(phi * phi) / (2 * 0.12 * 0.12));\n      const v = a * a * exp(-(th * th) / (2 * 0.5 * 0.5));\n      const lb = 40 * TEX[p] * (1 - 0.5 * a * s2), lg = 255 * g * (a + 0.3 * (1 - a) * SZ[p]), lv = 150 * v;\n      const r = body[0] * lb + glint[0] * lg + vel[0] * lv;\n      const gg = body[1] * lb + glint[1] * lg + vel[1] * lv;\n      const bb = body[2] * lb + glint[2] * lg + vel[2] * lv;\n      display.setPixel(x, y, round(min(255, r)), round(min(255, gg)), round(min(255, bb)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Magnet","min":-1,"max":1,"about":"At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star."},{"name":"Depth","min":0,"max":1,"about":"How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide."}],"start":[0,2,0,0.06],"measures":{"motion":0.3686,"detail":0.0762,"edges":0.2839,"complexity":2.114,"coverage":0.9599,"colour":0.1236,"drift":0.1602},"knobResponse":[0.1875,0.1414,0.1895,0.1794]},{"slug":"cat-map","title":"Cat Map","family":"noise","round":31,"note":"패널을 토러스로 보고 아르놀트의 고양이 사상을 두 번의 밀기로 나눠 움직여요. 과녁 무늬가 사선 줄무늬로 늘어나다 잡음이 되고, 한 바퀴의 절반쯤에 줄이 엇갈린 유령이 지나간 뒤 30초에 처음 그림으로 정확히 돌아와요. K1 을 누르면 돌아오기 네 걸음 앞으로 건너뛰어요.","idea":"The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.","buttons":"K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.","code":"// ===== Patternflow pattern =====\n// Title:   Cat Map\n// Family:  noise\n// Idea:    The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold's cat map (Vladimir Arnold, 1967), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3\n//\n// Knob 1: Hue. Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc.\n// Knob 2: Speed. At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long.\n// Knob 3: Twist. The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps.\n// Knob 4: Picture. The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays.\n// Buttons: K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, abs, sqrt, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mod = (v, m) => ((v % m) + m) % m;\n\n// One full step of the map on a permutation: perm[p] is the source LED whose\n// colour now sits at p. The first shear moves what sits at (x, y) to\n// (x + a y, y), the second moves (x, y) to (x, y + 2b x), so together\n// (x, y) -> (x + a y, 2b x + (1 + 2ab) y), determinant 1, exact on Z64 x Z128.\nfunction shearRows(a, from, to) {\n  for (let y = 0; y \u003c H; y++) {\n    const s = mod(a * y, W), o = y * W;\n    for (let x = 0; x \u003c W; x++) to[o + x] = from[o + ((x - s + W) & 63)];\n  }\n}\nfunction shearCols(b, from, to) {\n  for (let x = 0; x \u003c W; x++) {\n    const s = mod(2 * b * x, H);\n    for (let y = 0; y \u003c H; y++) to[y * W + x] = from[((y - s + H) & 127) * W + x];\n  }\n}\n\n// The four pictures as region numbers: 0 and 1 are the two main colours, 2\n// the light one. Each fills the whole panel.\nconst REG = [];\n{\n  for (let k = 0; k \u003c 4; k++) REG.push(new Uint8Array(N));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = x - 31.5, dy = y - 63.5, r = sqrt(dx * dx + dy * dy);\n      // Rings 7 LEDs wide round a disc, and a band corner to corner where\n      // the two ring colours trade places.\n      let g = r \u003c 9 ? 2 : floor((r - 9) / 7) & 1;\n      if (g \u003c 2 && abs(2 * dx + dy) / sqrt(5) \u003c 6) g = 1 - g;\n      REG[0][p] = g;\n      // Nested diamonds, 8 LEDs a band down the long axis, a light core.\n      const dd = abs(dx) + abs(dy) / 2;\n      REG[1][p] = dd \u003c 7 ? 2 : floor((dd - 7) / 6) & 1;\n      // Four quarters round a disc that swaps them, with a light rim.\n      const q = (dx \u003c 0) !== (dy \u003c 0) ? 1 : 0;\n      REG[2][p] = r \u003c 21 ? 1 - q : r \u003c 25 ? 2 : q;\n      // Twelve rays round a light disc and a light ring.\n      const ray = floor(((atan2(dy, dx) + PI) / (2 * PI)) * 12) & 1;\n      REG[3][p] = r \u003c 8 || (r > 30 && r \u003c 34) ? 2 : ray;\n    }\n}\n\n// How much of the picture survives after n steps of each twist, from the\n// rings picture: 0 for the whole picture, about 0.5 for static. It slows the\n// steps and holds the frames where something can be seen.\nfunction survey(t) {\n  let perm = new Int32Array(N), mid = new Int32Array(N), nxt = new Int32Array(N);\n  for (let i = 0; i \u003c N; i++) perm[i] = i;\n  const g = REG[0], out = [0];\n  for (let n = 1; n \u003c= 200; n++) {\n    shearRows(t, perm, mid);\n    shearCols(t, mid, nxt);\n    [perm, nxt] = [nxt, perm];\n    let d = 0, id = true;\n    for (let p = 0; p \u003c N; p++) {\n      const v = g[perm[p]] & 1;\n      if ((p & 63) \u003c 63) d += v !== (g[perm[p + 1]] & 1) ? 1 : 0;\n      if (p \u003c N - W) d += v !== (g[perm[p + W]] & 1) ? 1 : 0;\n      if (perm[p] !== p) id = false;\n    }\n    if (id) break;\n    out.push(d / (2 * N));\n  }\n  // out has one entry per state 0..P-1.\n  return out.map((v) => 1 - cl((v - 0.1) / 0.3, 0, 1));\n}\nconst SURVEY = [null, null, null, null, null];\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N);\n  params.s = {\n    perm: I(), mid: I(), nxt: I(), twist: 0, P: 64, st: null, n: 0, mode: 0, t: 0, first: true,\n    hue: -1, pic: -1, pal: new Float32Array(9), src: new Float32Array(N * 3), sh1: new Int32Array(H), sh2: new Int32Array(W), sp: 2,\n  };\n}\n\nfunction reset(S) {\n  for (let i = 0; i \u003c N; i++) S.perm[i] = i;\n  S.n = 0;\n  S.mode = 0;\n  S.t = 0;\n}\n\n// Seconds for the step out of state n, and for the hold at state n.\nfunction stepTime(S, n) {\n  const st = S.st, P = S.P, base = 1.2 / S.sp;\n  const s = max(st[n], st[(n + 1) % P]);\n  return base * (0.45 + 1.6 * s) * (1 + 1.5 * Math.exp(-(P - 1 - n) / 1.5));\n}\nfunction holdTime(S, n) {\n  const base = 1.2 / S.sp, s = S.st[n];\n  if (n === 0) return base * (S.first ? 2.3 : 4);\n  // The stretched stripes after one step and the ghost halfway hold for\n  // about half a second at Speed 2; frames of static do not hold at all.\n  return base * 3 * s * sqrt(s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.sp = cl(k[1], 0.2, 3);\n  S.hueK = k[0] || 0;\n  S.picK = cl(round(k[3]), 0, 3);\n  const tw = cl(round(k[2]), 1, 4);\n  if (tw !== S.twist) {\n    // A new twist is a new map: the picture comes back whole and starts over.\n    S.twist = tw;\n    S.st = SURVEY[tw] || (SURVEY[tw] = survey(tw));\n    S.P = S.st.length;\n    for (let y = 0; y \u003c H; y++) S.sh1[y] = tw * (y - 64);\n    for (let x = 0; x \u003c W; x++) S.sh2[x] = mod(2 * tw * x + 64, H) - 64;\n    reset(S);\n  }\n  const b = input.btnPressed || [];\n  if (b[0]) {\n    // Four steps short of the return, by running the map from the picture.\n    reset(S);\n    for (let n = 0; n \u003c S.P - 4; n++) {\n      shearRows(tw, S.perm, S.mid);\n      shearCols(tw, S.mid, S.perm);\n    }\n    S.n = S.P - 4;\n    S.first = false;\n  }\n  S.t += d;\n  if (S.mode === 0) {\n    if (S.t >= holdTime(S, S.n)) {\n      S.t = 0;\n      S.mode = 1;\n      shearRows(tw, S.perm, S.mid);\n    }\n  } else if (S.t >= stepTime(S, S.n)) {\n    shearCols(tw, S.mid, S.nxt);\n    [S.perm, S.nxt] = [S.nxt, S.perm];\n    S.n = (S.n + 1) % S.P;\n    if (S.n === 0) {\n      reset(S);\n      S.first = false;\n    }\n    S.t = 0;\n    S.mode = 0;\n  }\n}\n\n// Three colours: two strong ones half a turn apart and a light cream, the\n// strong pair kept close in brightness so the static stays soft.\nfunction paint(S) {\n  const h = S.hueK + 0.5, pal = S.pal;\n  hsv(h, 0.66, 1, pal, 0);\n  // A dark orange or yellow reads brown or olive, so the second colour\n  // lifts its light where its hue passes through them.\n  let h2 = h + 0.4;\n  h2 -= floor(h2);\n  hsv(h2, 0.6, 0.72 + 0.26 * max(0, 1 - abs(h2 - 0.13) / 0.11), pal, 3);\n  hsv(h + 0.62, 0.2, 1, pal, 6);\n  const g = REG[S.picK], src = S.src;\n  for (let p = 0; p \u003c N; p++) {\n    const c = g[p] * 3;\n    src[p * 3] = pal[c];\n    src[p * 3 + 1] = pal[c + 1];\n    src[p * 3 + 2] = pal[c + 2];\n  }\n  S.hue = S.hueK;\n  S.pic = S.picK;\n}\n\nconst ease = (u) => u * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.st) return;\n  if (S.hue !== S.hueK || S.pic !== S.picK) paint(S);\n  const src = S.src;\n  if (S.mode === 0) {\n    const perm = S.perm;\n    for (let y = 0, p = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, p++) {\n        const o = perm[p] * 3;\n        display.setPixel(x, y, src[o], src[o + 1], src[o + 2]);\n      }\n    return;\n  }\n  const u = S.t / stepTime(S, S.n);\n  if (u \u003c 0.5) {\n    // The rows slide: row y by a (y - 64), pivoting on the middle row, so the\n    // picture leans; each LED reads between the two it lies between.\n    const s = ease(u * 2), perm = S.perm;\n    for (let y = 0; y \u003c H; y++) {\n      const sh = s * S.sh1[y], o = y * W;\n      for (let x = 0; x \u003c W; x++) {\n        const pos = x - sh, i0 = floor(pos), f = pos - i0;\n        const A = perm[o + (i0 & 63)] * 3, B = perm[o + ((i0 + 1) & 63)] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  } else {\n    // The columns slide: column x by 2b x, wrapped to the nearer way round.\n    const s = ease(u * 2 - 1), mid = S.mid;\n    for (let x = 0; x \u003c W; x++) {\n      const sh = s * S.sh2[x];\n      for (let y = 0; y \u003c H; y++) {\n        const pos = y - sh, i0 = floor(pos), f = pos - i0;\n        const A = mid[(i0 & 127) * W + x] * 3, B = mid[((i0 + 1) & 127) * W + x] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-cat-map","type":"code","name":"cat-map","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cat Map\n// Family:  noise\n// Idea:    The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold's cat map (Vladimir Arnold, 1967), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3\n//\n// Knob 1: Hue. Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc.\n// Knob 2: Speed. At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long.\n// Knob 3: Twist. The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps.\n// Knob 4: Picture. The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays.\n// Buttons: K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, abs, sqrt, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mod = (v, m) => ((v % m) + m) % m;\n\n// One full step of the map on a permutation: perm[p] is the source LED whose\n// colour now sits at p. The first shear moves what sits at (x, y) to\n// (x + a y, y), the second moves (x, y) to (x, y + 2b x), so together\n// (x, y) -> (x + a y, 2b x + (1 + 2ab) y), determinant 1, exact on Z64 x Z128.\nfunction shearRows(a, from, to) {\n  for (let y = 0; y \u003c H; y++) {\n    const s = mod(a * y, W), o = y * W;\n    for (let x = 0; x \u003c W; x++) to[o + x] = from[o + ((x - s + W) & 63)];\n  }\n}\nfunction shearCols(b, from, to) {\n  for (let x = 0; x \u003c W; x++) {\n    const s = mod(2 * b * x, H);\n    for (let y = 0; y \u003c H; y++) to[y * W + x] = from[((y - s + H) & 127) * W + x];\n  }\n}\n\n// The four pictures as region numbers: 0 and 1 are the two main colours, 2\n// the light one. Each fills the whole panel.\nconst REG = [];\n{\n  for (let k = 0; k \u003c 4; k++) REG.push(new Uint8Array(N));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = x - 31.5, dy = y - 63.5, r = sqrt(dx * dx + dy * dy);\n      // Rings 7 LEDs wide round a disc, and a band corner to corner where\n      // the two ring colours trade places.\n      let g = r \u003c 9 ? 2 : floor((r - 9) / 7) & 1;\n      if (g \u003c 2 && abs(2 * dx + dy) / sqrt(5) \u003c 6) g = 1 - g;\n      REG[0][p] = g;\n      // Nested diamonds, 8 LEDs a band down the long axis, a light core.\n      const dd = abs(dx) + abs(dy) / 2;\n      REG[1][p] = dd \u003c 7 ? 2 : floor((dd - 7) / 6) & 1;\n      // Four quarters round a disc that swaps them, with a light rim.\n      const q = (dx \u003c 0) !== (dy \u003c 0) ? 1 : 0;\n      REG[2][p] = r \u003c 21 ? 1 - q : r \u003c 25 ? 2 : q;\n      // Twelve rays round a light disc and a light ring.\n      const ray = floor(((atan2(dy, dx) + PI) / (2 * PI)) * 12) & 1;\n      REG[3][p] = r \u003c 8 || (r > 30 && r \u003c 34) ? 2 : ray;\n    }\n}\n\n// How much of the picture survives after n steps of each twist, from the\n// rings picture: 0 for the whole picture, about 0.5 for static. It slows the\n// steps and holds the frames where something can be seen.\nfunction survey(t) {\n  let perm = new Int32Array(N), mid = new Int32Array(N), nxt = new Int32Array(N);\n  for (let i = 0; i \u003c N; i++) perm[i] = i;\n  const g = REG[0], out = [0];\n  for (let n = 1; n \u003c= 200; n++) {\n    shearRows(t, perm, mid);\n    shearCols(t, mid, nxt);\n    [perm, nxt] = [nxt, perm];\n    let d = 0, id = true;\n    for (let p = 0; p \u003c N; p++) {\n      const v = g[perm[p]] & 1;\n      if ((p & 63) \u003c 63) d += v !== (g[perm[p + 1]] & 1) ? 1 : 0;\n      if (p \u003c N - W) d += v !== (g[perm[p + W]] & 1) ? 1 : 0;\n      if (perm[p] !== p) id = false;\n    }\n    if (id) break;\n    out.push(d / (2 * N));\n  }\n  // out has one entry per state 0..P-1.\n  return out.map((v) => 1 - cl((v - 0.1) / 0.3, 0, 1));\n}\nconst SURVEY = [null, null, null, null, null];\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N);\n  params.s = {\n    perm: I(), mid: I(), nxt: I(), twist: 0, P: 64, st: null, n: 0, mode: 0, t: 0, first: true,\n    hue: -1, pic: -1, pal: new Float32Array(9), src: new Float32Array(N * 3), sh1: new Int32Array(H), sh2: new Int32Array(W), sp: 2,\n  };\n}\n\nfunction reset(S) {\n  for (let i = 0; i \u003c N; i++) S.perm[i] = i;\n  S.n = 0;\n  S.mode = 0;\n  S.t = 0;\n}\n\n// Seconds for the step out of state n, and for the hold at state n.\nfunction stepTime(S, n) {\n  const st = S.st, P = S.P, base = 1.2 / S.sp;\n  const s = max(st[n], st[(n + 1) % P]);\n  return base * (0.45 + 1.6 * s) * (1 + 1.5 * Math.exp(-(P - 1 - n) / 1.5));\n}\nfunction holdTime(S, n) {\n  const base = 1.2 / S.sp, s = S.st[n];\n  if (n === 0) return base * (S.first ? 2.3 : 4);\n  // The stretched stripes after one step and the ghost halfway hold for\n  // about half a second at Speed 2; frames of static do not hold at all.\n  return base * 3 * s * sqrt(s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.sp = cl(k[1], 0.2, 3);\n  S.hueK = k[0] || 0;\n  S.picK = cl(round(k[3]), 0, 3);\n  const tw = cl(round(k[2]), 1, 4);\n  if (tw !== S.twist) {\n    // A new twist is a new map: the picture comes back whole and starts over.\n    S.twist = tw;\n    S.st = SURVEY[tw] || (SURVEY[tw] = survey(tw));\n    S.P = S.st.length;\n    for (let y = 0; y \u003c H; y++) S.sh1[y] = tw * (y - 64);\n    for (let x = 0; x \u003c W; x++) S.sh2[x] = mod(2 * tw * x + 64, H) - 64;\n    reset(S);\n  }\n  const b = input.btnPressed || [];\n  if (b[0]) {\n    // Four steps short of the return, by running the map from the picture.\n    reset(S);\n    for (let n = 0; n \u003c S.P - 4; n++) {\n      shearRows(tw, S.perm, S.mid);\n      shearCols(tw, S.mid, S.perm);\n    }\n    S.n = S.P - 4;\n    S.first = false;\n  }\n  S.t += d;\n  if (S.mode === 0) {\n    if (S.t >= holdTime(S, S.n)) {\n      S.t = 0;\n      S.mode = 1;\n      shearRows(tw, S.perm, S.mid);\n    }\n  } else if (S.t >= stepTime(S, S.n)) {\n    shearCols(tw, S.mid, S.nxt);\n    [S.perm, S.nxt] = [S.nxt, S.perm];\n    S.n = (S.n + 1) % S.P;\n    if (S.n === 0) {\n      reset(S);\n      S.first = false;\n    }\n    S.t = 0;\n    S.mode = 0;\n  }\n}\n\n// Three colours: two strong ones half a turn apart and a light cream, the\n// strong pair kept close in brightness so the static stays soft.\nfunction paint(S) {\n  const h = S.hueK + 0.5, pal = S.pal;\n  hsv(h, 0.66, 1, pal, 0);\n  // A dark orange or yellow reads brown or olive, so the second colour\n  // lifts its light where its hue passes through them.\n  let h2 = h + 0.4;\n  h2 -= floor(h2);\n  hsv(h2, 0.6, 0.72 + 0.26 * max(0, 1 - abs(h2 - 0.13) / 0.11), pal, 3);\n  hsv(h + 0.62, 0.2, 1, pal, 6);\n  const g = REG[S.picK], src = S.src;\n  for (let p = 0; p \u003c N; p++) {\n    const c = g[p] * 3;\n    src[p * 3] = pal[c];\n    src[p * 3 + 1] = pal[c + 1];\n    src[p * 3 + 2] = pal[c + 2];\n  }\n  S.hue = S.hueK;\n  S.pic = S.picK;\n}\n\nconst ease = (u) => u * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.st) return;\n  if (S.hue !== S.hueK || S.pic !== S.picK) paint(S);\n  const src = S.src;\n  if (S.mode === 0) {\n    const perm = S.perm;\n    for (let y = 0, p = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, p++) {\n        const o = perm[p] * 3;\n        display.setPixel(x, y, src[o], src[o + 1], src[o + 2]);\n      }\n    return;\n  }\n  const u = S.t / stepTime(S, S.n);\n  if (u \u003c 0.5) {\n    // The rows slide: row y by a (y - 64), pivoting on the middle row, so the\n    // picture leans; each LED reads between the two it lies between.\n    const s = ease(u * 2), perm = S.perm;\n    for (let y = 0; y \u003c H; y++) {\n      const sh = s * S.sh1[y], o = y * W;\n      for (let x = 0; x \u003c W; x++) {\n        const pos = x - sh, i0 = floor(pos), f = pos - i0;\n        const A = perm[o + (i0 & 63)] * 3, B = perm[o + ((i0 + 1) & 63)] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  } else {\n    // The columns slide: column x by 2b x, wrapped to the nearer way round.\n    const s = ease(u * 2 - 1), mid = S.mid;\n    for (let x = 0; x \u003c W; x++) {\n      const sh = s * S.sh2[x];\n      for (let y = 0; y \u003c H; y++) {\n        const pos = y - sh, i0 = floor(pos), f = pos - i0;\n        const A = mid[(i0 & 127) * W + x] * 3, B = mid[((i0 + 1) & 127) * W + x] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long."},{"name":"Twist","min":1,"max":4,"about":"The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps."},{"name":"Picture","min":0,"max":3,"about":"The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays."}],"start":[0,2,1,0.06],"measures":{"motion":2.7145,"detail":0.107,"edges":0.6749,"complexity":0.5255,"coverage":1,"colour":0.5686,"drift":0.058},"knobResponse":[0.4614,0.2648,0.264,0.2979]},{"slug":"catastrophe-machine","title":"Catastrophe Machine","family":"physics","round":36,"note":"원판 테두리의 한 점에 고무줄 둘을 묶어 하나는 위의 고정점에, 하나는 아래를 좌우로 오가는 점 B 에 걸었어요. B 가 뾰족점 넷인 마름모, 곧 원판이 설 자리가 둘인 곳을 빠져나가는 순간 원판이 120도쯤 반대로 튀어서, B 의 자취가 가는 길과 오는 길에서 다른 색으로 남아요. K3 은 고무줄의 자연 길이를 줄여 마름모를 작게 하다가 1 에서 없애고, K1 을 누르면 B 가 축 건너편으로 건너뛰어요.","idea":"Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.","buttons":"K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.","code":"// ===== Patternflow pattern =====\n// Title:   Catastrophe Machine\n// Family:  physics\n// Idea:    Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Zeeman's catastrophe machine (Christopher Zeeman, 1972), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1\n//\n// Knob 1: Hue. Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown.\n// Knob 2: Speed. At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Tension. The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B.\n// Knob 4: Depth. The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all.\n// Buttons: K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.\n\nconst W = 64, H = 128, N = W * H;\n// The machine in disc radii: pivot O at the origin, anchor A at (0, AD),\n// bands of rest length L. On the panel one radius is SC LEDs, O sits at row\n// OY, and the anchor 5 rows from the top.\nconst AD = 2.5, L0 = 1, SC = 18.6, OX = 32, OY = 5 + SC * AD, NF = 360, NT = 180, TRAIL = 180, SNAPS = 24;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst toX = (x) => OX + SC * x, toY = (y) => OY - SC * y;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The energy V(t) = (|P-A| - L)+^2 / 2 + (|P-B| - L)+^2 / 2, P = (cos t, sin t),\n// a band pulling only while it is stretched, and its derivative in t: each\n// band adds its tension times the component of its direction along the rim.\nfunction energy(t, L, bx, by) {\n  const px = cos(t), py = sin(t);\n  const ea = max(0, sqrt(px * px + (py - AD) * (py - AD)) - L), eb = max(0, sqrt((px - bx) ** 2 + (py - by) ** 2) - L);\n  return 0.5 * (ea * ea + eb * eb);\n}\nfunction torque(t, L, bx, by) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), ux = px - bx, uy = py - by, db = sqrt(ux * ux + uy * uy);\n  return (max(0, da - L) * (ax * tx + ay * ty)) / da + (max(0, db - L) * (ux * tx + uy * ty)) / (db || 1e-9);\n}\n\n// The bifurcation set. At a fold the disc angle t is an equilibrium (V' = 0)\n// that is about to stop being a minimum (V'' = 0). For each t the band to B\n// leaves P along some direction u; V' = 0 fixes how far B must be, and the\n// direction is found where V'' changes sign. One point per t, so the 360\n// points run round the diamond in order, through its four cusps.\nfunction foldAt(t, L, be) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), uax = ax / da, uay = ay / da;\n  const ca = uax * tx + uay * ty, sa = uax * px + uay * py, ea = max(0, da - L);\n  const M = ea * ca, K = (da > L ? ca * ca : 0) + ea * ((1 - ca * ca) / da - sa);\n  const ux = cos(be), uy = sin(be), c = ux * tx + uy * ty, s = ux * px + uy * py;\n  if (abs(c) \u003c 1e-9) return null;\n  const e = -M / c;\n  if (e \u003c= 0) return null;\n  const d = L + e;\n  return [K + c * c + e * ((1 - c * c) / d - s), px - d * ux, py - d * uy, d];\n}\nfunction fold(S, L) {\n  S.L = L;\n  S.nf = 0;\n  if (L \u003c 0.02) return;\n  let guess = -1;\n  for (let i = 0; i \u003c NF; i++) {\n    const t = (2 * PI * i) / NF;\n    let found = null;\n    // Look near the last direction first, then all the way round.\n    const tries = guess \u003c 0 ? [[0, 2 * PI, 1440]] : [[guess - 0.25, guess + 0.25, 50], [0, 2 * PI, 1440]];\n    for (const [b0, b1, k] of tries) {\n      let prev = foldAt(t, L, b0), pb = b0;\n      for (let j = 1; j \u003c= k && !found; j++) {\n        const be = b0 + ((b1 - b0) * j) / k, cur = foldAt(t, L, be);\n        if (prev && cur && prev[0] * cur[0] \u003c= 0 && abs(cur[3] - prev[3]) \u003c 0.3 && cur[3] \u003c 8) {\n          let lo = pb, hi = be, flo = prev[0];\n          for (let q = 0; q \u003c 40; q++) {\n            const mid = (lo + hi) / 2, m = foldAt(t, L, mid);\n            if (!m) break;\n            if (m[0] * flo > 0) (lo = mid), (flo = m[0]);\n            else hi = mid;\n          }\n          found = foldAt(t, L, (lo + hi) / 2);\n          guess = (lo + hi) / 2;\n        }\n        prev = cur;\n        pb = be;\n      }\n      if (found) break;\n    }\n    if (found) {\n      S.FX[S.nf] = found[1];\n      S.FY[S.nf] = found[2];\n      S.nf++;\n    }\n  }\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c S.nf; i++) {\n    x0 = min(x0, S.FX[i]);\n    x1 = max(x1, S.FX[i]);\n    y0 = min(y0, S.FY[i]);\n    y1 = max(y1, S.FY[i]);\n  }\n  S.fx0 = x0;\n  S.fx1 = x1;\n  S.fy0 = y0;\n  S.fy1 = y1;\n  // The side cusps are the leftmost and rightmost points.\n  let iL = 0;\n  for (let i = 0; i \u003c S.nf; i++) if (S.FX[i] \u003c S.FX[iL]) iL = i;\n  S.ySide = S.nf ? S.FY[iL] : -2.5;\n}\n\n// Local minima of V over the rim, from 180 samples, each polished by a few\n// steps of descent. Returns how many; their angles land in S.mins.\nfunction minima(S, bx, by) {\n  const L = S.L, E = S.E;\n  for (let i = 0; i \u003c NT; i++) E[i] = energy((2 * PI * i) / NT, L, bx, by);\n  let n = 0;\n  for (let i = 0; i \u003c NT && n \u003c 4; i++) {\n    const a = E[(i + NT - 1) % NT], b = E[(i + 1) % NT];\n    if (E[i] \u003c a && E[i] \u003c= b) {\n      let t = (2 * PI * i) / NT;\n      for (let k = 0; k \u003c 30; k++) t -= 0.5 * torque(t, L, bx, by);\n      S.mins[n++] = t;\n    }\n  }\n  return n;\n}\n\n// Follow the local minimum the disc sits in: the nearest place within half a\n// radian where V' turns from negative to positive, refined by bisection.\n// When there is none, that minimum has gone, which is the snap.\nfunction track(S, t) {\n  const L = S.L, bx = S.bx, by = S.by;\n  let best = NaN, bd = 1e9, prev = torque(t - 0.5, L, bx, by);\n  for (let i = 1; i \u003c= 96; i++) {\n    const a = t - 0.5 + i / 96, cur = torque(a, L, bx, by);\n    if (prev \u003c 0 && cur >= 0) {\n      let lo = a - 1 / 96, hi = a;\n      for (let q = 0; q \u003c 30; q++) {\n        const m = (lo + hi) / 2;\n        if (torque(m, L, bx, by) \u003c 0) lo = m;\n        else hi = m;\n      }\n      const r = (lo + hi) / 2;\n      if (abs(r - t) \u003c bd) (bd = abs(r - t)), (best = r);\n    }\n    prev = cur;\n  }\n  return best;\n}\n\nfunction setup(params) {\n  params.s = {\n    t: 0, w: 0, L: -1, nf: 0, FX: new Float64Array(NF), FY: new Float64Array(NF), fx0: 0, fx1: 0, fy0: 0, fy1: 0, ySide: -2.4,\n    E: new Float64Array(NT), mins: new Float64Array(4), nm: 1, ghost: 0, ghostA: 0,\n    ph: -PI / 2, wph: 0, bx: -1.35, by: -2.4, depth: 0.06, hue: 0, speed: 2,\n    TX: new Float32Array(TRAIL), TY: new Float32Array(TRAIL), TB: new Float32Array(TRAIL), tn: 0, th: 0, tacc: 0,\n    SX: new Float32Array(SNAPS), SY: new Float32Array(SNAPS), SA: new Float32Array(SNAPS).fill(99), sh: 0,\n    tm: 0, flash: 0, fbx: 0, fby: 0, warm: false,\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N), cov: new Float32Array(N),\n    xs: new Float32Array(4 * H * 16), xn: new Int32Array(4 * H), col: new Float32Array(24),\n  };\n}\n\n// B's path: across the panel and back, 1.35 radii either side of the axis,\n// at the height Depth picks between the side cusps and the bottom cusp,\n// wandering up and down a quarter of that height. From Depth 0.8 on it\n// never enters the diamond.\nfunction place(S) {\n  const ys = S.nf ? S.ySide : -2.5, yb = S.nf ? S.fy0 : -2.6;\n  S.bx = 1.35 * sin(S.ph);\n  S.by = ys + (0.3 + 1.2 * S.depth + 0.25 * sin(S.wph)) * (yb - ys);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.depth = cl(k[3], 0, 1);\n  const L = L0 * (1 - cl(k[2], 0, 1));\n  if (abs(L - S.L) > 0.002) fold(S, L);\n  const beat = (d * S.speed) / 2;\n  const jump = !!(input.btnPressed && input.btnPressed[0]);\n  if (jump) S.ph = -S.ph;\n  // A crossing of the panel every 4 beats; the wander is slower.\n  S.ph += (beat * PI) / 4;\n  S.wph += beat * 0.53;\n  place(S);\n  S.nm = minima(S, S.bx, S.by);\n  if (!S.warm) {\n    // Start in the deepest minimum.\n    let best = 0;\n    for (let i = 1; i \u003c S.nm; i++) if (energy(S.mins[i], S.L, S.bx, S.by) \u003c energy(S.mins[best], S.L, S.bx, S.by)) best = i;\n    S.t = S.tm = S.mins[best];\n    S.warm = true;\n  }\n  // The snap: the minimum the disc was in is gone. B is then at most one\n  // frame's travel past the edge of the diamond, and the mark goes there,\n  // unless K1 threw B across.\n  const tm = track(S, S.tm);\n  if (tm === tm) S.tm = tm;\n  else {\n    let far = 0, fd = -1;\n    for (let i = 0; i \u003c S.nm; i++) {\n      const dd = abs(atan2(sin(S.mins[i] - S.tm), cos(S.mins[i] - S.tm)));\n      if (dd > fd) (fd = dd), (far = i);\n    }\n    S.tm = S.mins[far];\n    S.flash = 1;\n    S.fbx = S.bx;\n    S.fby = S.by;\n    if (!jump) {\n      S.SX[S.sh] = S.bx;\n      S.SY[S.sh] = S.by;\n      S.SA[S.sh] = 0;\n      S.sh = (S.sh + 1) % SNAPS;\n    }\n  }\n  // Overdamped: the disc turns at 30 times the torque per beat, in eight\n  // small steps a frame.\n  const h = beat / 8, t0 = S.t;\n  for (let i = 0; i \u003c 8; i++) S.t -= 30 * h * torque(S.t, S.L, S.bx, S.by);\n  S.w = beat > 0 ? abs(S.t - t0) / beat : S.w;\n  S.flash = max(0, S.flash - beat / 0.5);\n  for (let i = 0; i \u003c SNAPS; i++) S.SA[i] += beat;\n  // The other minimum, when there is one, shows as a ghost on the rim.\n  let gi = -1, gd = 0;\n  for (let i = 0; i \u003c S.nm; i++) {\n    const dd = abs(atan2(sin(S.mins[i] - S.t), cos(S.mins[i] - S.t)));\n    if (dd > 0.3 && dd > gd) (gd = dd), (gi = i);\n  }\n  if (gi >= 0) S.ghost = S.mins[gi];\n  S.ghostA += ((gi >= 0 ? 1 : 0) - S.ghostA) * min(1, beat * 8);\n  // The trail: 15 samples a beat, 12 beats long, each with the side of the\n  // disc P was on.\n  S.tacc += beat * 15;\n  while (S.tacc >= 1) {\n    S.tacc -= 1;\n    S.TX[S.th] = S.bx;\n    S.TY[S.th] = S.by;\n    S.TB[S.th] = cos(S.t);\n    S.th = (S.th + 1) % TRAIL;\n    S.tn = min(TRAIL, S.tn + 1);\n  }\n}\n\n// ---- Drawing ----\n\nfunction plot(S, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  S.R[p] = max(S.R[p], r);\n  S.G[p] = max(S.G[p], g);\n  S.B[p] = max(S.B[p], b);\n}\n\n// A line in panel coordinates, about 1.4 LEDs wide, kept at the brighter.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, v = cl((wide - sqrt(qx * qx + qy * qy)) / 0.55, 0, 1);\n      if (v > 0) plot(S, x, y, cr * v, cg * v, cb * v);\n    }\n}\n\nfunction disc(S, cx, cy, r, cr, cg, cb, add) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c= min(H - 1, floor(cy + r + 1)); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c= min(W - 1, floor(cx + r + 1)); x++) {\n      const v = cl(r + 0.5 - sqrt((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2), 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      if (add) (S.R[p] += cr * v), (S.G[p] += cg * v), (S.B[p] += cb * v);\n      else (S.R[p] = S.R[p] * (1 - v) + cr * v), (S.G[p] = S.G[p] * (1 - v) + cg * v), (S.B[p] = S.B[p] * (1 - v) + cb * v);\n    }\n}\n\n// Coverage of the inside of the diamond: four scanlines a row.\nfunction fill(S) {\n  const { xs, xn, cov, FX, FY } = S, n = S.nf, SUB = 4, CAP = 16;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = (i + 1) % n;\n    let x0 = toX(FX[i]), y0 = toY(FY[i]), x1 = toX(FX[j]), y1 = toY(FY[j]);\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const c = xn[s];\n      if (c \u003c CAP) (xs[s * CAP + c] = x0 + (((s + 0.5) / SUB - y0) * (x1 - x0)) / (y1 - y0)), (xn[s] = c + 1);\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h = S.hue + 0.78, fl = S.flash;\n  // Round yellow the diamond's shading would go olive, so there it is paler\n  // and brighter.\n  const hh = h - floor(h), warm = sm(1 - abs(hh - 0.16) / 0.12);\n  hsv(h, 0.75 - 0.5 * warm, 1, col, 0); // accent: the diamond and the anchor\n  hsv(h + 0.35, 0.85, 1, col, 3); // the trail while P is on the left\n  hsv(h + 0.72, 0.8, 1, col, 6); // the trail while P is on the right\n  const hd = h + 0.8 - floor(h + 0.8), warmD = sm(1 - abs(hd - 0.12) / 0.13);\n  hsv(h + 0.8, 0.6 - 0.3 * warmD, 1 + 0.6 * warmD, col, 9); // the disc, never brown\n  const shade = 66 + 74 * warm;\n  // The bistable region, softly lit, and its cusped edge.\n  if (S.nf > 2) {\n    fill(S);\n    for (let p = 0; p \u003c N; p++) {\n      const c = min(1, cov[p]) * shade;\n      if (c > 0) (R[p] += col[0] * c), (G[p] += col[1] * c), (B[p] += col[2] * c);\n    }\n  }\n  // The trail, oldest first, in the colour of P's side.\n  for (let k = S.tn - 1; k >= 2; k--) {\n    const i = (S.th - k + TRAIL) % TRAIL, j = (i + 1) % TRAIL, age = k / TRAIL;\n    const u = (1 + cl(S.TB[i] * 2, -1, 1)) / 2, v = 230 * (1 - age) * (1 - age) + 25;\n    line(S, toX(S.TX[i]), toY(S.TY[i]), toX(S.TX[j]), toY(S.TY[j]), v * (col[3] * (1 - u) + col[6] * u), v * (col[4] * (1 - u) + col[7] * u), v * (col[5] * (1 - u) + col[8] * u), 0.75);\n  }\n  if (S.nf > 2) {\n    const e = 200 + 55 * fl;\n    for (let i = 0; i \u003c S.nf; i++) {\n      const j = (i + 1) % S.nf;\n      line(S, toX(S.FX[i]), toY(S.FY[i]), toX(S.FX[j]), toY(S.FY[j]), col[0] * e, col[1] * e, col[2] * e, 0.7);\n    }\n  }\n  // Where the snaps happened: white marks that fade over 25 beats.\n  for (let i = 0; i \u003c SNAPS; i++) {\n    if (S.SA[i] > 25) continue;\n    const v = 255 * (1 - S.SA[i] / 25);\n    disc(S, toX(S.SX[i]), toY(S.SY[i]), 0.9, v, v, v, false);\n  }\n  // The disc: a face of six soft sectors that turns with it, so a snap shows\n  // as the whole wheel whirling round; a rim that flashes white; the pivot.\n  const ox = toX(0), oy = toY(0), px = cos(S.t), py = sin(S.t), spin = 1 + 1.6 * cl(S.w / 8, 0, 1);\n  for (let y = max(0, floor(oy - SC - 1)); y \u003c= min(H - 1, floor(oy + SC + 1)); y++)\n    for (let x = max(0, floor(ox - SC - 1)); x \u003c= min(W - 1, floor(ox + SC + 1)); x++) {\n      const dx = x + 0.5 - ox, dy = oy - y - 0.5, r = sqrt(dx * dx + dy * dy), e = cl(SC + 0.5 - r, 0, 1);\n      if (e \u003c= 0) continue;\n      const a = atan2(dy, dx) - S.t, v = e * spin * (48 + 30 * cos(6 * a) * cl(r / 4, 0, 1)), p = y * W + x;\n      R[p] = col[9] * v;\n      G[p] = col[10] * v;\n      B[p] = col[11] * v;\n    }\n  for (let i = 0; i \u003c 96; i++) {\n    const a0 = (2 * PI * i) / 96, a1 = (2 * PI * (i + 1)) / 96, e = 120 + 135 * fl;\n    line(S, ox + SC * cos(a0), oy - SC * sin(a0), ox + SC * cos(a1), oy - SC * sin(a1), col[9] * e + 255 * fl * 0.5, col[10] * e + 255 * fl * 0.5, col[11] * e + 255 * fl * 0.5, 0.7);\n  }\n  line(S, ox, oy, toX(px), toY(py), col[9] * 110, col[10] * 110, col[11] * 110, 0.6);\n  disc(S, ox, oy, 1.3, 200, 200, 200, false);\n  // The other stable angle, while B is inside the diamond.\n  if (S.ghostA > 0.02) {\n    const g = 150 * S.ghostA, u = cos(S.ghost) > 0 ? 1 : 0;\n    disc(S, toX(cos(S.ghost)), toY(sin(S.ghost)), 1.4, g * (col[3] * (1 - u) + col[6] * u), g * (col[4] * (1 - u) + col[7] * u), g * (col[5] * (1 - u) + col[8] * u), false);\n  }\n  // The bands, brighter the harder they pull.\n  const ta = max(0, sqrt(px * px + (py - AD) ** 2) - S.L), tb = max(0, sqrt((px - S.bx) ** 2 + (py - S.by) ** 2) - S.L);\n  const va = 70 + 185 * cl(ta / 2.6, 0, 1), vb = 70 + 185 * cl(tb / 2.6, 0, 1) + 60 * fl;\n  line(S, toX(0), toY(AD), toX(px), toY(py), va, va * 0.93, va * 0.82, 0.75);\n  line(S, toX(px), toY(py), toX(S.bx), toY(S.by), vb, vb * 0.93, vb * 0.82, 0.75);\n  // The anchor, P on the rim, and B.\n  disc(S, toX(0), toY(AD), 1.6, col[0] * 255, col[1] * 255, col[2] * 255, false);\n  const u = (1 + cl(px * 2, -1, 1)) / 2;\n  disc(S, toX(px), toY(py), 2.3, 255 * (col[3] * (1 - u) + col[6] * u), 255 * (col[4] * (1 - u) + col[7] * u), 255 * (col[5] * (1 - u) + col[8] * u), false);\n  disc(S, toX(px), toY(py), 1, 255, 255, 255, false);\n  disc(S, toX(S.bx), toY(S.by), 1.5, 255, 255, 255, false);\n  // A ring opening round B at each snap.\n  if (fl > 0) {\n    const r = 2 + 9 * (1 - fl * fl), v = 255 * sm(fl * 1.6);\n    for (let i = 0; i \u003c 40; i++) {\n      const a0 = (2 * PI * i) / 40, a1 = (2 * PI * (i + 1)) / 40;\n      line(S, toX(S.fbx) + r * cos(a0), toY(S.fby) + r * sin(a0), toX(S.fbx) + r * cos(a1), toY(S.fby) + r * sin(a1), v, v, v, 0.95);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-catastrophe-machine","type":"code","name":"catastrophe-machine","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Catastrophe Machine\n// Family:  physics\n// Idea:    Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Zeeman's catastrophe machine (Christopher Zeeman, 1972), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1\n//\n// Knob 1: Hue. Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown.\n// Knob 2: Speed. At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Tension. The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B.\n// Knob 4: Depth. The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all.\n// Buttons: K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.\n\nconst W = 64, H = 128, N = W * H;\n// The machine in disc radii: pivot O at the origin, anchor A at (0, AD),\n// bands of rest length L. On the panel one radius is SC LEDs, O sits at row\n// OY, and the anchor 5 rows from the top.\nconst AD = 2.5, L0 = 1, SC = 18.6, OX = 32, OY = 5 + SC * AD, NF = 360, NT = 180, TRAIL = 180, SNAPS = 24;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst toX = (x) => OX + SC * x, toY = (y) => OY - SC * y;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The energy V(t) = (|P-A| - L)+^2 / 2 + (|P-B| - L)+^2 / 2, P = (cos t, sin t),\n// a band pulling only while it is stretched, and its derivative in t: each\n// band adds its tension times the component of its direction along the rim.\nfunction energy(t, L, bx, by) {\n  const px = cos(t), py = sin(t);\n  const ea = max(0, sqrt(px * px + (py - AD) * (py - AD)) - L), eb = max(0, sqrt((px - bx) ** 2 + (py - by) ** 2) - L);\n  return 0.5 * (ea * ea + eb * eb);\n}\nfunction torque(t, L, bx, by) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), ux = px - bx, uy = py - by, db = sqrt(ux * ux + uy * uy);\n  return (max(0, da - L) * (ax * tx + ay * ty)) / da + (max(0, db - L) * (ux * tx + uy * ty)) / (db || 1e-9);\n}\n\n// The bifurcation set. At a fold the disc angle t is an equilibrium (V' = 0)\n// that is about to stop being a minimum (V'' = 0). For each t the band to B\n// leaves P along some direction u; V' = 0 fixes how far B must be, and the\n// direction is found where V'' changes sign. One point per t, so the 360\n// points run round the diamond in order, through its four cusps.\nfunction foldAt(t, L, be) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), uax = ax / da, uay = ay / da;\n  const ca = uax * tx + uay * ty, sa = uax * px + uay * py, ea = max(0, da - L);\n  const M = ea * ca, K = (da > L ? ca * ca : 0) + ea * ((1 - ca * ca) / da - sa);\n  const ux = cos(be), uy = sin(be), c = ux * tx + uy * ty, s = ux * px + uy * py;\n  if (abs(c) \u003c 1e-9) return null;\n  const e = -M / c;\n  if (e \u003c= 0) return null;\n  const d = L + e;\n  return [K + c * c + e * ((1 - c * c) / d - s), px - d * ux, py - d * uy, d];\n}\nfunction fold(S, L) {\n  S.L = L;\n  S.nf = 0;\n  if (L \u003c 0.02) return;\n  let guess = -1;\n  for (let i = 0; i \u003c NF; i++) {\n    const t = (2 * PI * i) / NF;\n    let found = null;\n    // Look near the last direction first, then all the way round.\n    const tries = guess \u003c 0 ? [[0, 2 * PI, 1440]] : [[guess - 0.25, guess + 0.25, 50], [0, 2 * PI, 1440]];\n    for (const [b0, b1, k] of tries) {\n      let prev = foldAt(t, L, b0), pb = b0;\n      for (let j = 1; j \u003c= k && !found; j++) {\n        const be = b0 + ((b1 - b0) * j) / k, cur = foldAt(t, L, be);\n        if (prev && cur && prev[0] * cur[0] \u003c= 0 && abs(cur[3] - prev[3]) \u003c 0.3 && cur[3] \u003c 8) {\n          let lo = pb, hi = be, flo = prev[0];\n          for (let q = 0; q \u003c 40; q++) {\n            const mid = (lo + hi) / 2, m = foldAt(t, L, mid);\n            if (!m) break;\n            if (m[0] * flo > 0) (lo = mid), (flo = m[0]);\n            else hi = mid;\n          }\n          found = foldAt(t, L, (lo + hi) / 2);\n          guess = (lo + hi) / 2;\n        }\n        prev = cur;\n        pb = be;\n      }\n      if (found) break;\n    }\n    if (found) {\n      S.FX[S.nf] = found[1];\n      S.FY[S.nf] = found[2];\n      S.nf++;\n    }\n  }\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c S.nf; i++) {\n    x0 = min(x0, S.FX[i]);\n    x1 = max(x1, S.FX[i]);\n    y0 = min(y0, S.FY[i]);\n    y1 = max(y1, S.FY[i]);\n  }\n  S.fx0 = x0;\n  S.fx1 = x1;\n  S.fy0 = y0;\n  S.fy1 = y1;\n  // The side cusps are the leftmost and rightmost points.\n  let iL = 0;\n  for (let i = 0; i \u003c S.nf; i++) if (S.FX[i] \u003c S.FX[iL]) iL = i;\n  S.ySide = S.nf ? S.FY[iL] : -2.5;\n}\n\n// Local minima of V over the rim, from 180 samples, each polished by a few\n// steps of descent. Returns how many; their angles land in S.mins.\nfunction minima(S, bx, by) {\n  const L = S.L, E = S.E;\n  for (let i = 0; i \u003c NT; i++) E[i] = energy((2 * PI * i) / NT, L, bx, by);\n  let n = 0;\n  for (let i = 0; i \u003c NT && n \u003c 4; i++) {\n    const a = E[(i + NT - 1) % NT], b = E[(i + 1) % NT];\n    if (E[i] \u003c a && E[i] \u003c= b) {\n      let t = (2 * PI * i) / NT;\n      for (let k = 0; k \u003c 30; k++) t -= 0.5 * torque(t, L, bx, by);\n      S.mins[n++] = t;\n    }\n  }\n  return n;\n}\n\n// Follow the local minimum the disc sits in: the nearest place within half a\n// radian where V' turns from negative to positive, refined by bisection.\n// When there is none, that minimum has gone, which is the snap.\nfunction track(S, t) {\n  const L = S.L, bx = S.bx, by = S.by;\n  let best = NaN, bd = 1e9, prev = torque(t - 0.5, L, bx, by);\n  for (let i = 1; i \u003c= 96; i++) {\n    const a = t - 0.5 + i / 96, cur = torque(a, L, bx, by);\n    if (prev \u003c 0 && cur >= 0) {\n      let lo = a - 1 / 96, hi = a;\n      for (let q = 0; q \u003c 30; q++) {\n        const m = (lo + hi) / 2;\n        if (torque(m, L, bx, by) \u003c 0) lo = m;\n        else hi = m;\n      }\n      const r = (lo + hi) / 2;\n      if (abs(r - t) \u003c bd) (bd = abs(r - t)), (best = r);\n    }\n    prev = cur;\n  }\n  return best;\n}\n\nfunction setup(params) {\n  params.s = {\n    t: 0, w: 0, L: -1, nf: 0, FX: new Float64Array(NF), FY: new Float64Array(NF), fx0: 0, fx1: 0, fy0: 0, fy1: 0, ySide: -2.4,\n    E: new Float64Array(NT), mins: new Float64Array(4), nm: 1, ghost: 0, ghostA: 0,\n    ph: -PI / 2, wph: 0, bx: -1.35, by: -2.4, depth: 0.06, hue: 0, speed: 2,\n    TX: new Float32Array(TRAIL), TY: new Float32Array(TRAIL), TB: new Float32Array(TRAIL), tn: 0, th: 0, tacc: 0,\n    SX: new Float32Array(SNAPS), SY: new Float32Array(SNAPS), SA: new Float32Array(SNAPS).fill(99), sh: 0,\n    tm: 0, flash: 0, fbx: 0, fby: 0, warm: false,\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N), cov: new Float32Array(N),\n    xs: new Float32Array(4 * H * 16), xn: new Int32Array(4 * H), col: new Float32Array(24),\n  };\n}\n\n// B's path: across the panel and back, 1.35 radii either side of the axis,\n// at the height Depth picks between the side cusps and the bottom cusp,\n// wandering up and down a quarter of that height. From Depth 0.8 on it\n// never enters the diamond.\nfunction place(S) {\n  const ys = S.nf ? S.ySide : -2.5, yb = S.nf ? S.fy0 : -2.6;\n  S.bx = 1.35 * sin(S.ph);\n  S.by = ys + (0.3 + 1.2 * S.depth + 0.25 * sin(S.wph)) * (yb - ys);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.depth = cl(k[3], 0, 1);\n  const L = L0 * (1 - cl(k[2], 0, 1));\n  if (abs(L - S.L) > 0.002) fold(S, L);\n  const beat = (d * S.speed) / 2;\n  const jump = !!(input.btnPressed && input.btnPressed[0]);\n  if (jump) S.ph = -S.ph;\n  // A crossing of the panel every 4 beats; the wander is slower.\n  S.ph += (beat * PI) / 4;\n  S.wph += beat * 0.53;\n  place(S);\n  S.nm = minima(S, S.bx, S.by);\n  if (!S.warm) {\n    // Start in the deepest minimum.\n    let best = 0;\n    for (let i = 1; i \u003c S.nm; i++) if (energy(S.mins[i], S.L, S.bx, S.by) \u003c energy(S.mins[best], S.L, S.bx, S.by)) best = i;\n    S.t = S.tm = S.mins[best];\n    S.warm = true;\n  }\n  // The snap: the minimum the disc was in is gone. B is then at most one\n  // frame's travel past the edge of the diamond, and the mark goes there,\n  // unless K1 threw B across.\n  const tm = track(S, S.tm);\n  if (tm === tm) S.tm = tm;\n  else {\n    let far = 0, fd = -1;\n    for (let i = 0; i \u003c S.nm; i++) {\n      const dd = abs(atan2(sin(S.mins[i] - S.tm), cos(S.mins[i] - S.tm)));\n      if (dd > fd) (fd = dd), (far = i);\n    }\n    S.tm = S.mins[far];\n    S.flash = 1;\n    S.fbx = S.bx;\n    S.fby = S.by;\n    if (!jump) {\n      S.SX[S.sh] = S.bx;\n      S.SY[S.sh] = S.by;\n      S.SA[S.sh] = 0;\n      S.sh = (S.sh + 1) % SNAPS;\n    }\n  }\n  // Overdamped: the disc turns at 30 times the torque per beat, in eight\n  // small steps a frame.\n  const h = beat / 8, t0 = S.t;\n  for (let i = 0; i \u003c 8; i++) S.t -= 30 * h * torque(S.t, S.L, S.bx, S.by);\n  S.w = beat > 0 ? abs(S.t - t0) / beat : S.w;\n  S.flash = max(0, S.flash - beat / 0.5);\n  for (let i = 0; i \u003c SNAPS; i++) S.SA[i] += beat;\n  // The other minimum, when there is one, shows as a ghost on the rim.\n  let gi = -1, gd = 0;\n  for (let i = 0; i \u003c S.nm; i++) {\n    const dd = abs(atan2(sin(S.mins[i] - S.t), cos(S.mins[i] - S.t)));\n    if (dd > 0.3 && dd > gd) (gd = dd), (gi = i);\n  }\n  if (gi >= 0) S.ghost = S.mins[gi];\n  S.ghostA += ((gi >= 0 ? 1 : 0) - S.ghostA) * min(1, beat * 8);\n  // The trail: 15 samples a beat, 12 beats long, each with the side of the\n  // disc P was on.\n  S.tacc += beat * 15;\n  while (S.tacc >= 1) {\n    S.tacc -= 1;\n    S.TX[S.th] = S.bx;\n    S.TY[S.th] = S.by;\n    S.TB[S.th] = cos(S.t);\n    S.th = (S.th + 1) % TRAIL;\n    S.tn = min(TRAIL, S.tn + 1);\n  }\n}\n\n// ---- Drawing ----\n\nfunction plot(S, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  S.R[p] = max(S.R[p], r);\n  S.G[p] = max(S.G[p], g);\n  S.B[p] = max(S.B[p], b);\n}\n\n// A line in panel coordinates, about 1.4 LEDs wide, kept at the brighter.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, v = cl((wide - sqrt(qx * qx + qy * qy)) / 0.55, 0, 1);\n      if (v > 0) plot(S, x, y, cr * v, cg * v, cb * v);\n    }\n}\n\nfunction disc(S, cx, cy, r, cr, cg, cb, add) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c= min(H - 1, floor(cy + r + 1)); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c= min(W - 1, floor(cx + r + 1)); x++) {\n      const v = cl(r + 0.5 - sqrt((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2), 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      if (add) (S.R[p] += cr * v), (S.G[p] += cg * v), (S.B[p] += cb * v);\n      else (S.R[p] = S.R[p] * (1 - v) + cr * v), (S.G[p] = S.G[p] * (1 - v) + cg * v), (S.B[p] = S.B[p] * (1 - v) + cb * v);\n    }\n}\n\n// Coverage of the inside of the diamond: four scanlines a row.\nfunction fill(S) {\n  const { xs, xn, cov, FX, FY } = S, n = S.nf, SUB = 4, CAP = 16;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = (i + 1) % n;\n    let x0 = toX(FX[i]), y0 = toY(FY[i]), x1 = toX(FX[j]), y1 = toY(FY[j]);\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const c = xn[s];\n      if (c \u003c CAP) (xs[s * CAP + c] = x0 + (((s + 0.5) / SUB - y0) * (x1 - x0)) / (y1 - y0)), (xn[s] = c + 1);\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h = S.hue + 0.78, fl = S.flash;\n  // Round yellow the diamond's shading would go olive, so there it is paler\n  // and brighter.\n  const hh = h - floor(h), warm = sm(1 - abs(hh - 0.16) / 0.12);\n  hsv(h, 0.75 - 0.5 * warm, 1, col, 0); // accent: the diamond and the anchor\n  hsv(h + 0.35, 0.85, 1, col, 3); // the trail while P is on the left\n  hsv(h + 0.72, 0.8, 1, col, 6); // the trail while P is on the right\n  const hd = h + 0.8 - floor(h + 0.8), warmD = sm(1 - abs(hd - 0.12) / 0.13);\n  hsv(h + 0.8, 0.6 - 0.3 * warmD, 1 + 0.6 * warmD, col, 9); // the disc, never brown\n  const shade = 66 + 74 * warm;\n  // The bistable region, softly lit, and its cusped edge.\n  if (S.nf > 2) {\n    fill(S);\n    for (let p = 0; p \u003c N; p++) {\n      const c = min(1, cov[p]) * shade;\n      if (c > 0) (R[p] += col[0] * c), (G[p] += col[1] * c), (B[p] += col[2] * c);\n    }\n  }\n  // The trail, oldest first, in the colour of P's side.\n  for (let k = S.tn - 1; k >= 2; k--) {\n    const i = (S.th - k + TRAIL) % TRAIL, j = (i + 1) % TRAIL, age = k / TRAIL;\n    const u = (1 + cl(S.TB[i] * 2, -1, 1)) / 2, v = 230 * (1 - age) * (1 - age) + 25;\n    line(S, toX(S.TX[i]), toY(S.TY[i]), toX(S.TX[j]), toY(S.TY[j]), v * (col[3] * (1 - u) + col[6] * u), v * (col[4] * (1 - u) + col[7] * u), v * (col[5] * (1 - u) + col[8] * u), 0.75);\n  }\n  if (S.nf > 2) {\n    const e = 200 + 55 * fl;\n    for (let i = 0; i \u003c S.nf; i++) {\n      const j = (i + 1) % S.nf;\n      line(S, toX(S.FX[i]), toY(S.FY[i]), toX(S.FX[j]), toY(S.FY[j]), col[0] * e, col[1] * e, col[2] * e, 0.7);\n    }\n  }\n  // Where the snaps happened: white marks that fade over 25 beats.\n  for (let i = 0; i \u003c SNAPS; i++) {\n    if (S.SA[i] > 25) continue;\n    const v = 255 * (1 - S.SA[i] / 25);\n    disc(S, toX(S.SX[i]), toY(S.SY[i]), 0.9, v, v, v, false);\n  }\n  // The disc: a face of six soft sectors that turns with it, so a snap shows\n  // as the whole wheel whirling round; a rim that flashes white; the pivot.\n  const ox = toX(0), oy = toY(0), px = cos(S.t), py = sin(S.t), spin = 1 + 1.6 * cl(S.w / 8, 0, 1);\n  for (let y = max(0, floor(oy - SC - 1)); y \u003c= min(H - 1, floor(oy + SC + 1)); y++)\n    for (let x = max(0, floor(ox - SC - 1)); x \u003c= min(W - 1, floor(ox + SC + 1)); x++) {\n      const dx = x + 0.5 - ox, dy = oy - y - 0.5, r = sqrt(dx * dx + dy * dy), e = cl(SC + 0.5 - r, 0, 1);\n      if (e \u003c= 0) continue;\n      const a = atan2(dy, dx) - S.t, v = e * spin * (48 + 30 * cos(6 * a) * cl(r / 4, 0, 1)), p = y * W + x;\n      R[p] = col[9] * v;\n      G[p] = col[10] * v;\n      B[p] = col[11] * v;\n    }\n  for (let i = 0; i \u003c 96; i++) {\n    const a0 = (2 * PI * i) / 96, a1 = (2 * PI * (i + 1)) / 96, e = 120 + 135 * fl;\n    line(S, ox + SC * cos(a0), oy - SC * sin(a0), ox + SC * cos(a1), oy - SC * sin(a1), col[9] * e + 255 * fl * 0.5, col[10] * e + 255 * fl * 0.5, col[11] * e + 255 * fl * 0.5, 0.7);\n  }\n  line(S, ox, oy, toX(px), toY(py), col[9] * 110, col[10] * 110, col[11] * 110, 0.6);\n  disc(S, ox, oy, 1.3, 200, 200, 200, false);\n  // The other stable angle, while B is inside the diamond.\n  if (S.ghostA > 0.02) {\n    const g = 150 * S.ghostA, u = cos(S.ghost) > 0 ? 1 : 0;\n    disc(S, toX(cos(S.ghost)), toY(sin(S.ghost)), 1.4, g * (col[3] * (1 - u) + col[6] * u), g * (col[4] * (1 - u) + col[7] * u), g * (col[5] * (1 - u) + col[8] * u), false);\n  }\n  // The bands, brighter the harder they pull.\n  const ta = max(0, sqrt(px * px + (py - AD) ** 2) - S.L), tb = max(0, sqrt((px - S.bx) ** 2 + (py - S.by) ** 2) - S.L);\n  const va = 70 + 185 * cl(ta / 2.6, 0, 1), vb = 70 + 185 * cl(tb / 2.6, 0, 1) + 60 * fl;\n  line(S, toX(0), toY(AD), toX(px), toY(py), va, va * 0.93, va * 0.82, 0.75);\n  line(S, toX(px), toY(py), toX(S.bx), toY(S.by), vb, vb * 0.93, vb * 0.82, 0.75);\n  // The anchor, P on the rim, and B.\n  disc(S, toX(0), toY(AD), 1.6, col[0] * 255, col[1] * 255, col[2] * 255, false);\n  const u = (1 + cl(px * 2, -1, 1)) / 2;\n  disc(S, toX(px), toY(py), 2.3, 255 * (col[3] * (1 - u) + col[6] * u), 255 * (col[4] * (1 - u) + col[7] * u), 255 * (col[5] * (1 - u) + col[8] * u), false);\n  disc(S, toX(px), toY(py), 1, 255, 255, 255, false);\n  disc(S, toX(S.bx), toY(S.by), 1.5, 255, 255, 255, false);\n  // A ring opening round B at each snap.\n  if (fl > 0) {\n    const r = 2 + 9 * (1 - fl * fl), v = 255 * sm(fl * 1.6);\n    for (let i = 0; i \u003c 40; i++) {\n      const a0 = (2 * PI * i) / 40, a1 = (2 * PI * (i + 1)) / 40;\n      line(S, toX(S.fbx) + r * cos(a0), toY(S.fby) + r * sin(a0), toX(S.fbx) + r * cos(a1), toY(S.fby) + r * sin(a1), v, v, v, 0.95);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again."},{"name":"Tension","min":0,"max":1,"about":"The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B."},{"name":"Depth","min":0,"max":1,"about":"The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all."}],"start":[0,2,0,0.06],"measures":{"motion":0.213,"detail":0.0332,"edges":0.4458,"complexity":0.4561,"coverage":0.1952,"colour":0.1001,"drift":0.0525},"knobResponse":[0.0365,0.0378,0.0477,0.0428]},{"slug":"center-pivot","title":"Center Pivot","family":"farm","round":27,"note":"비행기 창으로 내려다본 들판이에요. 흙길로 나뉜 황토색 땅에 원형 밭이 두 줄로 넷씩 놓이고, 은빛 스프링클러 팔이 돌며 지나간 부채꼴을 짙게 적셨다가 말려요. 금빛 밀밭은 콤바인이 바깥부터 베어 들어가요. K1 이 봄에서 늦가을까지 철을 돌리고, 누르면 모든 팔이 한 바퀴 돌아요.","idea":"The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.","buttons":"K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.","code":"// ===== Patternflow pattern =====\n// Title:   Center Pivot\n// Family:  farm\n// Idea:    The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after center-pivot irrigation seen from the air over Kansas and the Saudi desert\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1\n//\n// Knob 1: Season. Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown.\n// Knob 2: Speed. At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster.\n// Knob 3: Fields. How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it.\n// Knob 4: Clouds. A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun.\n// Buttons: K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.\n\nconst W = 64, H = 128, N = W * H, SEC = 32, RW = 14, BAND = 3.2, TD = 4.5;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nconst md = (v) => v - floor(v / TAU) * TAU;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n\n// A crop's year in stages. The last number of each is how strongly the planted rings show.\nconst KEY = [\n  0, 84, 66, 50, 0.14, 0.1, 92, 76, 52, 0.18, 0.22, 116, 150, 64, 0.2, 0.36, 66, 136, 54, 0.12,\n  0.48, 34, 104, 48, 0.08, 0.56, 126, 132, 54, 0.08, 0.63, 222, 186, 64, 0.05, 0.7, 234, 200, 98, 0.05,\n  0.78, 224, 210, 158, 0.08, 0.89, 180, 168, 136, 0.08, 0.96, 116, 92, 68, 0.14, 1.01, 84, 66, 50, 0.14,\n];\nfunction stageCol(v, o) {\n  let a = 0;\n  while (KEY[a + 5] \u003c v) a += 5;\n  const u = sm(KEY[a], KEY[a + 5], v);\n  for (let j = 1; j \u003c 4; j++) o[j - 1] = mix(KEY[a + j], KEY[a + 5 + j], u);\n  return mix(KEY[a + 4], KEY[a + 9], u);\n}\n// Corn and soybeans run from ploughing to stubble, alfalfa stays green. Winter wheat is gold by June and sown again in autumn.\nfunction stageOf(crop, k, off) {\n  if (crop === 2) return fr(0.6 + 0.72 * k + off);\n  if (crop === 3) return 0.38 + 0.06 * sin(k * 9 + off * 20) + 0.14 * sm(0.75, 1, k);\n  return cl(0.86 * k + off - (crop ? 0.06 : 0), 0, 0.985);\n}\n\n// The river, in section units (an LED each at Fields 2), and the signed distance across it.\nconst rx = (y) => -39 + 13 * exp(-(((y - 16) / 24) ** 2)) + 2.5 * sin(y * 0.09 + 1) + 0.06 * y;\nfunction rd(wx, wy) {\n  const s = rx(wy + 0.5) - rx(wy - 0.5);\n  return (wx - rx(wy)) / sqrt(1 + s * s);\n}\n// The eight sections in view at the start, left then right, top down. Each is a crop, how far ahead it is,\n// a second crop on the other half and how far ahead that is, and the corner of the farmstead (-1 for none).\nconst OPEN = [\n  [0, 0.2, -1, 0, -1], [3, 0, -1, 0, 2], [2, 0.02, -1, 0, -1], [0, 0.19, 1, 0, -1],\n  [0, 0.32, -1, 0, -1], [1, 0, -1, 0, 1], [3, 0.3, 2, 0.06, 2], [1, 0.18, -1, 0, -1],\n];\nfunction spec(ci, cj) {\n  if (ci >= -1 && ci \u003c= 0 && cj >= -2 && cj \u003c= 1) {\n    const o = OPEN[(cj + 2) * 2 + ci + 1];\n    return { strips: 0, crop: o[0], off: o[1], crop2: o[2], off2: o[3], farm: o[4] };\n  }\n  const h = (k) => hash(ci * 31 + k, cj * 17 + 5);\n  return { strips: h(1) \u003c 0.14, crop: floor(h(2) * 4), off: h(3) * 0.3, crop2: h(4) \u003c 0.25 ? floor(h(5) * 4) : -1, off2: h(6) * 0.3, farm: h(7) \u003c 0.45 ? floor(h(8) * 4) : -1 };\n}\n\n// Per LED: its field, angle and distance from that pivot, how much of it is field; field LEDs grouped by field.\nconst FID = new Int16Array(N), ANG = new Float32Array(N), RAD = new Float32Array(N), COV = new Float32Array(N), FP = new Int32Array(N);\nconst BASE = new Float32Array(N * 3), ALT = new Float32Array(N * 3), WET = new Float32Array(N), F = new Float32Array(N * 3), C3 = new Float64Array(3);\n// Cloud noise that tiles every 64.\nconst CN = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = k & 63, y = k >> 6;\n  CN[k] = 0.55 * vn(x / 8, y / 8, 8) + 0.3 * vn(x / 4 + 9, y / 4, 16) + 0.15 * vn(x / 2, y / 2 + 7, 32);\n}\nfunction cloud(u, v) {\n  const x0 = floor(u), y0 = floor(v), fx = u - x0, fy = v - y0, a = x0 & 63, a1 = (x0 + 1) & 63, b = (y0 & 63) \u003c\u003c 6, b1 = ((y0 + 1) & 63) \u003c\u003c 6;\n  return mix(mix(CN[b + a], CN[b + a1], fx), mix(CN[b1 + a], CN[b1 + a1], fx), fy);\n}\n\nexport function setup(params) {\n  params.s = { z: -1, k1: -1, t: 0, rt: 0, ox: 20, oy: 30, mist: 0, fields: [], sec: new Map(), tr: [], dust: [], duster: null, spray: [] };\n}\n\nfunction sectionAt(S, wx, wy) {\n  const ci = floor(wx / SEC), cj = floor(wy / SEC), key = ci * 1000 + cj;\n  let s = S.sec.get(key);\n  if (!s) {\n    const sp = spec(ci, cj), cx = ci * SEC + 16, cy = cj * SEC + 16, sd = rd(cx, cy);\n    s = { ci, cj, sp, f: -1, cx, cy, sd };\n    S.sec.set(key, s);\n  }\n  return s;\n}\n\n// The fields for this height, and each LED's place in them.\nfunction layout(S, k3) {\n  const z = (S.z = k3 / 2), fs = (S.fields = []);\n  S.sec.clear();\n  for (let cj = floor(-2 * z) - 1; cj \u003c= ceil(2 * z); cj++)\n    for (let ci = floor(-z) - 1; ci \u003c= ceil(z); ci++) {\n      const s = sectionAt(S, ci * SEC + 1, cj * SEC + 1), sp = s.sp;\n      if (sp.strips || abs(s.sd) \u003c 6.5) continue;\n      const id = fs.length, sg = s.sd > 0 ? 1 : -1, h = (k) => hash(ci * 13 + k, cj * 7 + 3);\n      // Where the river and its trees cut the circle, the arm swings to and fro over what is left.\n      let run = 0, best = 0, start = 0, first = -1;\n      const ok = (k) => rd(s.cx + RW * 0.97 * cos((k * TAU) / 96), s.cy + RW * 0.97 * sin((k * TAU) / 96)) * sg > 4.8;\n      for (let k = 0; k \u003c 192; k++) {\n        if (ok(k % 96)) {\n          if (!run) start = k;\n          if (++run > best && run \u003c= 96) (best = run), (first = start);\n        } else run = 0;\n      }\n      if (best \u003c 16) continue;\n      const f = { id, s, sg, cx: 32.5 + s.cx / z, cy: 64.5 + s.cy / z, R: RW / z, crop: sp.crop, off: sp.off, crop2: sp.crop2, off2: sp.off2, sa: h(1) * TAU };\n      Object.assign(f, { sd: h(2) \u003c 0.5 ? 1 : -1, om: TAU / (16 + 10 * h(3)), a: h(4) * TAU, tint: 0.93 + 0.12 * h(5), boost: 0, wipe: 0, a0: 0, span: TAU, rel: 0 });\n      Object.assign(f, { harv: 0, h: 0, h0: 0.3 + 0.4 * h(6), hs: h(7) * TAU, hd: h(8) \u003c 0.5 ? 1 : -1, hst: 0, ht: 0, g: 1, n0: 0, n1: 0, grow: 0 });\n      if (best \u003c 96) Object.assign(f, { wipe: 1, a0: ((first + 1) * TAU) / 96, span: ((best - 2) * TAU) / 96, rel: h(4) * ((best - 2) * TAU) / 96 }), (f.a = f.a0 + f.rel);\n      s.f = id;\n      fs.push(f);\n    }\n  for (let i = 0; i \u003c N; i++) {\n    const wx = ((i & 63) - 32) * z, wy = ((i >> 6) - 64) * z, s = sectionAt(S, wx, wy);\n    FID[i] = -1;\n    COV[i] = 0;\n    if (s.f \u003c 0) continue;\n    const f = fs[s.f], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy);\n    const c = cl((RW - dr) / z + 0.5, 0, 1) * cl((rd(wx, wy) * f.sg - 4.6) / z + 0.5, 0, 1);\n    if (c \u003c= 0) continue;\n    (FID[i] = f.id), (COV[i] = c), (ANG[i] = md(atan2(dy, dx))), (RAD[i] = dr / z);\n  }\n  for (const f of fs) f.n1 = 0;\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) fs[FID[i]].n1++;\n  let n = 0;\n  for (const f of fs) (f.n0 = n), (n += f.n1), (f.n1 = f.n0);\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) FP[fs[FID[i]].n1++] = i;\n  const vr = [], hr = [];\n  for (let m = -4; m \u003c= 4; m++) {\n    const x = 32.5 + (m * SEC) / z, y = 64.5 + (m * SEC) / z;\n    if (x > 2 && x \u003c 62) vr.push(x);\n    if (y > 2 && y \u003c 126) hr.push(y);\n  }\n  S.tr = [0, 1].map((k) => ({ v: k === 0, c: k ? hr[min(hr.length - 1, 2)] : vr[floor(vr.length / 2)], p: k ? 20 : 100, d: k ? 1 : -1, acc: 0 }));\n  S.dust = [];\n}\n\n// What stands on the land: trees along the river and in the farmsteads' windbreaks (1), or a farmhouse roof (2)\n// with its grain bins (3). 0 is open ground.\nfunction objAt(S, wx, wy) {\n  const r = abs(rd(wx, wy));\n  if (r > 1.1 && r \u003c 4.4 && vn(wx * 0.55 + 5, wy * 0.55) > 0.22 + 0.11 * r) return 1;\n  const s = sectionAt(S, wx, wy), c = s.sp.farm;\n  if (c \u003c 0 || s.sp.strips) return 0;\n  const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, u = c & 1 ? SEC - lx : lx, v = c & 2 ? SEC - ly : ly;\n  if (u \u003c 1 || v \u003c 1) return 0;\n  if ((u \u003c 8.6 && v \u003c 2.7) || (u \u003c 2.7 && v \u003c 8.6)) return hash(floor(u * 1.4), floor(v * 1.4) + c) \u003c 0.85 ? 1 : 0;\n  if (u > 3.4 && u \u003c 5.3 && v > 3.4 && v \u003c 5.1) return 2;\n  if ((u - 6.4) ** 2 + (v - 3.7) ** 2 \u003c 0.7 || (u - 3.7) ** 2 + (v - 6.4) ** 2 \u003c 0.7) return 3;\n  return 0;\n}\n\n// Round bales lying on the windrows of a stubble field.\nfunction bale(f, wx, wy) {\n  const dx = wx - f.s.cx, dy = wy - f.s.cy, dr = sqrt(dx * dx + dy * dy);\n  if (dr > RW - 1 || dr \u003c 2) return 0;\n  const q = dr / 3.5, k = floor(q), arc = md(atan2(dy, dx) - f.sa) * dr, c = floor(arc / 4.5);\n  return abs(q - k - 0.5) * 3.5 \u003c 0.55 && abs(arc / 4.5 - c - 0.5) * 4.5 \u003c 0.6 && arc \u003c 4.2 * dr && hash(k, c + f.id * 50) \u003c 0.75 ? 1 : 0;\n}\n\n// The picture that stays put between knob turns: land, roads, river, farmsteads and each field at its point in the season.\nfunction paint(S, k1) {\n  const z = S.z, fs = S.fields, C = C3, L = [mix(156, 172, sm(0, 0.4, k1)), mix(146, 148, k1), mix(100, 106, k1)];\n  const leaf = [mix(34, 132, sm(0.72, 0.92, k1)), mix(66, 102, sm(0.72, 0.92, k1)), 38];\n  for (const f of fs) {\n    f.v = stageOf(f.crop, k1, f.off);\n    f.v2 = f.crop2 \u003c 0 ? f.v : stageOf(f.crop2, k1, f.off2);\n    f.c1 = [0, 0, 0];\n    f.c2 = [0, 0, 0];\n    f.a1 = stageCol(f.v, f.c1);\n    f.a2 = stageCol(f.v2, f.c2);\n    f.grow = (f.v > 0.1 && f.v \u003c 0.57) || (f.v2 > 0.1 && f.v2 \u003c 0.57) ? 1 : 0;\n    const hv = f.crop2 \u003c 0 && f.v > 0.6 && f.v \u003c 0.77 ? 1 : 0;\n    if (hv !== f.harv) Object.assign(f, { harv: hv, h: f.h0, hst: 0, g: 1 });\n  }\n  const ringA = sm(1.9, 2.6, 3 / z);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, wx = (x - 32) * z, wy = (y - 64) * z, s = sectionAt(S, wx, wy), sp = s.sp, r = rd(wx, wy), gr = 0.93 + 0.1 * vn(wx * 0.4, wy * 0.4) + 0.04 * hash(x, y);\n    for (let j = 0; j \u003c 3; j++) C[j] = L[j] * gr;\n    if (abs(r) \u003c 11) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], PASTURE[j] * gr, sm(11, 5, abs(r)) * 0.7);\n    if (sp.strips) {\n      const q = hash(s.ci, s.cj + 3) \u003c 0.5 ? wx : wy, st = floor(q / 4.5) & 1;\n      stageCol(st ? stageOf(2, k1, sp.off) : 0.86, C3);\n      for (let j = 0; j \u003c 3; j++) C[j] *= gr;\n    }\n    const fi = FID[i];\n    if (fi >= 0) {\n      const f = fs[fi], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy), cv = COV[i];\n      const side = f.crop2 \u003c 0 ? 0 : cl((dx * sin(f.sa) - dy * cos(f.sa)) / z + 0.5, 0, 1);\n      const amp = mix(f.a1, f.a2, side) * ringA, tk = abs(fr((dr * 5) / RW + 0.5) - 0.5) * (RW / 5 / z);\n      let m = f.tint * (1 + amp * cos((dr * TAU) / 3)) * (0.95 + 0.1 * vn(wx * 0.3 + f.id * 7, wy * 0.3));\n      if (dr > RW * 0.12) m *= 1 - 0.2 * cl(1 - tk * 1.6, 0, 1);\n      m *= 1 - 0.15 * cl(1 - abs(dr - RW + 0.5) / z, 0, 1);\n      const v = side > 0.5 ? f.v2 : f.v, wr = v > 0.76 && v \u003c 0.92 ? cl(1 - abs(fr(dr / 3.5) - 0.5) * (3.5 / z) * 1.8, 0, 1) : 0;\n      for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], mix(f.c1[j], f.c2[j], side) * m * (1 - 0.14 * wr), cv);\n      if (v > 0.76 && v \u003c 0.92) {\n        if (bale(f, wx, wy)) (C[0] = 196), (C[1] = 158), (C[2] = 76);\n        else if (bale(f, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.55;\n      }\n      if (dr \u003c 0.9) (C[0] = 170), (C[1] = 172), (C[2] = 164);\n      // Cut stubble, for a field the combine is in: paler, with a windrow down the middle of each pass.\n      if (f.harv) {\n        const kb = (RW - dr) / BAND, w2 = cl(1 - abs(fr(kb) - 0.5) * (BAND / z) * 1.6, 0, 1), m2 = f.tint * (0.96 + 0.08 * vn(wx * 0.5, wy * 0.5)) * (1 - 0.18 * w2) * (dr > RW * 0.12 ? 1 - 0.15 * cl(1 - tk * 1.6, 0, 1) : 1);\n        ALT[o] = 230 * m2;\n        ALT[o + 1] = 216 * m2;\n        ALT[o + 2] = 166 * m2;\n      }\n    }\n    const ob = objAt(S, wx, wy);\n    if (!ob && objAt(S, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.6;\n    if (ob === 1) for (let j = 0; j \u003c 3; j++) C[j] = leaf[j] * (0.8 + 0.4 * vn(wx * 1.3, wy * 1.3));\n    else if (ob === 2) (C[0] = 214), (C[1] = 208), (C[2] = 198);\n    else if (ob === 3) (C[0] = 196), (C[1] = 202), (C[2] = 206);\n    const aw = cl(1.25 - abs(r) / z, 0, 1);\n    if (aw > 0) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], WATER[j], aw);\n    const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, dp = min(lx, SEC - lx, ly, SEC - ly) / z, rc = x && y ? cl(0.6 / z + 0.5 - dp, 0, 1) : 0;\n    for (let j = 0; j \u003c 3; j++) BASE[o + j] = mix(C[j], GRAVEL[j], rc);\n  }\n}\n\nfunction startWet(S) {\n  for (const f of S.fields)\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let age = 99;\n      if (f.grow) {\n        if (!f.wipe) age = md((f.a - ANG[i]) * f.sd) / f.om;\n        else {\n          const r = md(ANG[i] - f.a0), p = f.rel;\n          if (r \u003c= f.span) age = (f.sd > 0 ? (r \u003c= p ? p - r : p + r) : r >= p ? r - p : 2 * f.span - r - p) / f.om;\n        }\n      }\n      WET[i] = exp(-age / TD);\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 2, 4), ts = cl(k[1], 0.2, 3) / 2, rt = cl(dt || 0, 0, 0.1), d = rt * ts;\n  let fresh = 0;\n  if (abs(k3 / 2 - S.z) > 0.004) layout(S, k3), (fresh = 1);\n  if (fresh || abs(k1 - S.k1) > 0.002) paint(S, k1), (S.k1 = k1);\n  if (fresh) startWet(S);\n  (S.k4 = cl(k[3], 0, 1)), (S.t += d), (S.rt += rt);\n  const bp = input.btnPressed || [];\n  if (bp[0]) {\n    for (const f of S.fields) f.boost = f.wipe ? 2 * f.span : TAU;\n    S.mist = 3;\n  }\n  if (bp[1] && !S.duster) {\n    const xs = S.fields.map((f) => f.cx).filter((x) => x > 4 && x \u003c 60), x = xs.length ? xs[floor(rnd() * xs.length)] + (rnd() - 0.5) * 6 : 32, dn = rnd() \u003c 0.5;\n    S.duster = { x, y: dn ? -8 : H + 8, vy: dn ? 30 : -30, acc: 0 };\n  }\n  S.mist = max(0, S.mist - rt);\n  (S.ox += 2 * d), (S.oy += 1.4 * d);\n  const dec = exp(-d / TD);\n  for (const f of S.fields) {\n    const on = f.grow || f.boost > 0, D = f.om * d;\n    if (on) f.boost -= D;\n    let lo = 1, hi = 0;\n    if (on && !f.wipe) (lo = f.a), (f.a = md(f.a + f.sd * D));\n    else if (on) {\n      const p = f.rel;\n      let q = p + f.sd * D;\n      (lo = min(p, q)), (hi = max(p, q));\n      if (q > f.span) (q = 2 * f.span - q), (f.sd = -1), (lo = min(p, q)), (hi = f.span);\n      if (q \u003c 0) (q = -q), (f.sd = 1), (lo = 0), (hi = max(p, q));\n      (f.rel = q), (f.a = f.a0 + q);\n    }\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let w = WET[i] * dec;\n      if (on) {\n        if (!f.wipe) {\n          if (md((ANG[i] - lo) * f.sd) \u003c= D) w = 1;\n        } else {\n          const r = md(ANG[i] - f.a0);\n          if (r >= lo && r \u003c= hi) w = 1;\n        }\n      }\n      WET[i] = w;\n    }\n    // The combine goes round at a steady walk, so the inner rings take less time.\n    if (f.harv) {\n      if (f.hst === 0) {\n        const rh = max(1.5, f.R - (BAND / S.z) * (floor(f.h) + 0.5));\n        f.h += (d * 5) / (TAU * rh * S.z);\n        if (f.h >= ceil(RW / BAND)) (f.hst = 1), (f.ht = 14);\n      } else if (f.hst === 1) {\n        if ((f.ht -= d) \u003c= 0) f.hst = 2;\n      } else if ((f.g -= d / 3) \u003c= 0) Object.assign(f, { hst: 0, h: 0, g: 1 });\n    }\n  }\n  // Trucks on the gravel roads and the dust they leave hanging.\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    tr.p += tr.d * 6 * d;\n    const lim = tr.v ? H : W;\n    if (tr.p > lim + 30) tr.p = -30;\n    if (tr.p \u003c -30) tr.p = lim + 30;\n    if ((tr.acc += d) > 0.1) {\n      tr.acc = 0;\n      S.dust.push({ x: tr.v ? tr.c : tr.p, y: tr.v ? tr.p : tr.c, t: S.t });\n    }\n  }\n  S.dust = S.dust.filter((p) => S.t - p.t \u003c 3.5);\n  const du = S.duster;\n  if (du) {\n    du.y += du.vy * rt;\n    if ((du.acc += rt) > 0.04) (du.acc = 0), S.spray.push({ x: du.x, y: du.y - Math.sign(du.vy) * 3, t: S.rt });\n    if (du.y \u003c -20 || du.y > H + 20) S.duster = null;\n  }\n  S.spray = S.spray.filter((p) => S.rt - p.t \u003c 4);\n}\n\nfunction blend(x, y, c, a) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], min(1, a));\n}\nfunction shade(x, y, k) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] *= k;\n}\n// A soft dot spread over the four LEDs around it.\nfunction puff(x, y, c, a) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  blend(x0, y0, c, a * (1 - fx) * (1 - fy)), blend(x0 + 1, y0, c, a * fx * (1 - fy)), blend(x0, y0 + 1, c, a * (1 - fx) * fy), blend(x0 + 1, y0 + 1, c, a * fx * fy);\n}\n\nconst SILVER = [214, 220, 226], MIST = [236, 242, 248], DUST = [246, 238, 216], RED = [204, 52, 36], YEL = [244, 212, 46], WHITE = [246, 248, 250], TANK = [236, 224, 196], TRUCK = [56, 64, 84];\nconst PLANE = [0, 1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, 0, -1, 0, -2, -1, -2, 1, -2], BODY = [250, 226, 80];\nconst PASTURE = [96, 118, 70], WATER = [84, 120, 146], GRAVEL = [206, 196, 168], CLOUD = [250, 250, 248], CLOUD_SH = [150, 160, 182];\n// How close a point along an arm of length R is to one of its towers.\nconst tw = (u, R) => cl(1 - abs(fr((u * 5) / R + 0.5) - 0.5) * (R / 5) * 1.5, 0, 1) * (u > R * 0.12 ? 1 : 0);\n// The arm and its shadow, its towers, the mist trailing it and the end gun's spray.\nfunction arm(S, f) {\n  const R = f.R, ca = cos(f.a), sa = sin(f.a), on = f.grow || f.boost > 0, ms = (on ? 1 : 0) * (1 + (S.mist > 0 ? 1.2 : 0)), tf = floor(S.rt * 7);\n  const x0 = max(0, floor(min(f.cx, f.cx + R * ca) - 3)), x1 = min(W - 1, ceil(max(f.cx, f.cx + R * ca) + 3));\n  const y0 = max(0, floor(min(f.cy, f.cy + R * sa) - 3)), y1 = min(H - 1, ceil(max(f.cy, f.cy + R * sa) + 3));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const qx = x + 0.5 - f.cx, qy = y + 0.5 - f.cy, t = qx * ca + qy * sa, c = qy * ca - qx * sa, ts = t - ca - sa, cs = c - ca + sa;\n      const o = (y * W + x) * 3, as = ts > -0.5 && ts \u003c R + 0.5 ? cl(1 - abs(cs), 0, 1) : 0, aa = t > -0.5 && t \u003c R + 0.3 ? cl(1.1 - abs(c), 0, 1) : 0;\n      if (as > 0) for (let j = 0; j \u003c 3; j++) F[o + j] *= 1 - 0.4 * as * (1 + 0.5 * tw(ts, R));\n      if (ms > 0 && t > R * 0.15 && t \u003c R + 2.5 && c * f.sd \u003c -0.3 && c * f.sd > (t > R ? -2.2 : -1.8)) {\n        const sp = hash(x * 31 + y, tf + f.id * 977);\n        blend(x, y, MIST, ms * (0.13 + (sp > 0.74 ? 0.5 : 0)) * (t > R ? 1.3 : 1));\n      }\n      if (aa > 0) {\n        const e = 0.6 * tw(t, R);\n        for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(SILVER[j], 250, e), 0.9 * aa);\n      }\n    }\n  // The wheeled towers, each with its short shadow.\n  for (let k = 1; k \u003c= 5; k++) {\n    const x = f.cx + ((R * k) / 5 - 0.3) * ca, y = f.cy + ((R * k) / 5 - 0.3) * sa;\n    shade(x + 1, y + 1, 0.55), blend(x, y, WHITE, 0.85);\n  }\n  blend(f.cx, f.cy, WHITE, 1);\n  shade(f.cx + 1, f.cy + 1, 0.55);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.z \u003c 0) return;\n  const fs = S.fields;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const fi = FID[i];\n    let g = 0;\n    if (fi >= 0) {\n      const f = fs[fi];\n      if (f.harv && f.hst) g = f.g;\n      else if (f.harv) {\n        const rel = md((ANG[i] - f.hs) * f.hd) / TAU;\n        if (floor((f.R - RAD[i]) / (BAND / S.z)) + rel \u003c f.h) g = 1;\n      }\n    }\n    const w = WET[i] > 0.004 ? WET[i] ** 0.8 * (fi >= 0 ? COV[i] : 0) : 0, k = 1 - 0.5 * w;\n    for (let j = 0; j \u003c 3; j++) {\n      let c = BASE[o + j];\n      if (g > 0) c = mix(c, ALT[o + j], g * COV[i]);\n      F[o + j] = c * k * (1 + (j - 1) * 0.08 * w);\n    }\n  }\n  for (const f of fs) {\n    if (f.harv && f.hst === 0) {\n      const z = S.z, rh = max(1.5, f.R - (BAND / z) * (floor(f.h) + 0.5)), th = f.hs + f.hd * fr(f.h) * TAU, x = f.cx + rh * cos(th), y = f.cy + rh * sin(th);\n      for (let j = 1; j \u003c 9; j++) {\n        const b = th - f.hd * (j * 0.7) / rh;\n        puff(f.cx + rh * cos(b) + 0.3 * j, f.cy + rh * sin(b) + 0.4 * j, DUST, 0.32 * (1 - j / 9));\n      }\n      shade(x + 1, y + 1, 0.5), shade(x + 2, y + 1, 0.6);\n      blend(x, y, RED, 1), blend(x + 1, y, TANK, 1);\n    }\n  }\n  for (const f of fs) arm(S, f);\n  for (const p of S.dust) {\n    const a = S.t - p.t;\n    const e = 0.8 * exp(-a / 1.7), sp = 0.4 + 0.6 * a, x = p.x + a * 1.7, y = p.y + a * 1.2;\n    puff(x, y, DUST, e), puff(x + sp, y + sp * 0.5, DUST, e * 0.6), puff(x - sp * 0.5, y + sp, DUST, e * 0.6);\n  }\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    const x = tr.v ? tr.c : tr.p, y = tr.v ? tr.p : tr.c;\n    shade(x + 1, y + 1, 0.55);\n    blend(x, y, TRUCK, 1);\n  }\n  for (const p of S.spray) {\n    const a = S.rt - p.t;\n    const e = 0.6 * exp(-a / 1.5), sp = 1.2 + 0.9 * a, x = p.x + a * 1.2, y = p.y + a * 0.8;\n    puff(x, y, MIST, e * 0.7), puff(x - sp, y, MIST, e), puff(x + sp, y, MIST, e);\n  }\n  const du = S.duster;\n  if (du) {\n    // A biplane seen from above: nose, wings, body and tail, with its shadow close by.\n    const sy = Math.sign(du.vy), X = floor(du.x), Y = floor(du.y);\n    for (let k = 0; k \u003c 20; k += 2) shade(X + PLANE[k] + 3, Y + PLANE[k + 1] * sy + 4, 0.55);\n    for (let k = 0; k \u003c 20; k += 2) blend(X + PLANE[k], Y + PLANE[k + 1] * sy, PLANE[k + 1] === 0 && PLANE[k] ? YEL : BODY, 1);\n  }\n  // Clouds and their shadows, lit from the upper left.\n  const thr = 0.69 - 0.2 * S.k4, ox = S.ox, oy = S.oy;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, u = (x - ox) * 0.3, v = (y - oy) * 0.27;\n    const sh = sm(thr, thr + 0.06, cloud(u - 1.8, v - 2.4)), n = cloud(u, v), ca = sm(thr, thr + 0.05, n);\n    let k = 1 - 0.45 * sh;\n    for (let j = 0; j \u003c 3; j++) F[o + j] *= k * (j === 2 ? 1 + 0.05 * sh : 1);\n    if (ca > 0) {\n      const lit = cl(0.7 - (n - cloud(u + 0.5, v + 0.5)) * 12 + 2 * (n - thr), 0, 1);\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(CLOUD_SH[j], CLOUD[j], lit), 0.92 * ca);\n    }\n    const lt = 1.02 - 0.09 * (x / W) - 0.07 * (y / H);\n    display.setPixel(x, y, min(255, F[o] * lt + 8) | 0, min(255, F[o + 1] * lt * 0.98 + 8) | 0, min(255, F[o + 2] * lt * 0.95 + 10) | 0);\n  }\n}\n","layer":{"id":"layer-center-pivot","type":"code","name":"center-pivot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Center Pivot\n// Family:  farm\n// Idea:    The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after center-pivot irrigation seen from the air over Kansas and the Saudi desert\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1\n//\n// Knob 1: Season. Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown.\n// Knob 2: Speed. At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster.\n// Knob 3: Fields. How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it.\n// Knob 4: Clouds. A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun.\n// Buttons: K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.\n\nconst W = 64, H = 128, N = W * H, SEC = 32, RW = 14, BAND = 3.2, TD = 4.5;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nconst md = (v) => v - floor(v / TAU) * TAU;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n\n// A crop's year in stages. The last number of each is how strongly the planted rings show.\nconst KEY = [\n  0, 84, 66, 50, 0.14, 0.1, 92, 76, 52, 0.18, 0.22, 116, 150, 64, 0.2, 0.36, 66, 136, 54, 0.12,\n  0.48, 34, 104, 48, 0.08, 0.56, 126, 132, 54, 0.08, 0.63, 222, 186, 64, 0.05, 0.7, 234, 200, 98, 0.05,\n  0.78, 224, 210, 158, 0.08, 0.89, 180, 168, 136, 0.08, 0.96, 116, 92, 68, 0.14, 1.01, 84, 66, 50, 0.14,\n];\nfunction stageCol(v, o) {\n  let a = 0;\n  while (KEY[a + 5] \u003c v) a += 5;\n  const u = sm(KEY[a], KEY[a + 5], v);\n  for (let j = 1; j \u003c 4; j++) o[j - 1] = mix(KEY[a + j], KEY[a + 5 + j], u);\n  return mix(KEY[a + 4], KEY[a + 9], u);\n}\n// Corn and soybeans run from ploughing to stubble, alfalfa stays green. Winter wheat is gold by June and sown again in autumn.\nfunction stageOf(crop, k, off) {\n  if (crop === 2) return fr(0.6 + 0.72 * k + off);\n  if (crop === 3) return 0.38 + 0.06 * sin(k * 9 + off * 20) + 0.14 * sm(0.75, 1, k);\n  return cl(0.86 * k + off - (crop ? 0.06 : 0), 0, 0.985);\n}\n\n// The river, in section units (an LED each at Fields 2), and the signed distance across it.\nconst rx = (y) => -39 + 13 * exp(-(((y - 16) / 24) ** 2)) + 2.5 * sin(y * 0.09 + 1) + 0.06 * y;\nfunction rd(wx, wy) {\n  const s = rx(wy + 0.5) - rx(wy - 0.5);\n  return (wx - rx(wy)) / sqrt(1 + s * s);\n}\n// The eight sections in view at the start, left then right, top down. Each is a crop, how far ahead it is,\n// a second crop on the other half and how far ahead that is, and the corner of the farmstead (-1 for none).\nconst OPEN = [\n  [0, 0.2, -1, 0, -1], [3, 0, -1, 0, 2], [2, 0.02, -1, 0, -1], [0, 0.19, 1, 0, -1],\n  [0, 0.32, -1, 0, -1], [1, 0, -1, 0, 1], [3, 0.3, 2, 0.06, 2], [1, 0.18, -1, 0, -1],\n];\nfunction spec(ci, cj) {\n  if (ci >= -1 && ci \u003c= 0 && cj >= -2 && cj \u003c= 1) {\n    const o = OPEN[(cj + 2) * 2 + ci + 1];\n    return { strips: 0, crop: o[0], off: o[1], crop2: o[2], off2: o[3], farm: o[4] };\n  }\n  const h = (k) => hash(ci * 31 + k, cj * 17 + 5);\n  return { strips: h(1) \u003c 0.14, crop: floor(h(2) * 4), off: h(3) * 0.3, crop2: h(4) \u003c 0.25 ? floor(h(5) * 4) : -1, off2: h(6) * 0.3, farm: h(7) \u003c 0.45 ? floor(h(8) * 4) : -1 };\n}\n\n// Per LED: its field, angle and distance from that pivot, how much of it is field; field LEDs grouped by field.\nconst FID = new Int16Array(N), ANG = new Float32Array(N), RAD = new Float32Array(N), COV = new Float32Array(N), FP = new Int32Array(N);\nconst BASE = new Float32Array(N * 3), ALT = new Float32Array(N * 3), WET = new Float32Array(N), F = new Float32Array(N * 3), C3 = new Float64Array(3);\n// Cloud noise that tiles every 64.\nconst CN = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = k & 63, y = k >> 6;\n  CN[k] = 0.55 * vn(x / 8, y / 8, 8) + 0.3 * vn(x / 4 + 9, y / 4, 16) + 0.15 * vn(x / 2, y / 2 + 7, 32);\n}\nfunction cloud(u, v) {\n  const x0 = floor(u), y0 = floor(v), fx = u - x0, fy = v - y0, a = x0 & 63, a1 = (x0 + 1) & 63, b = (y0 & 63) \u003c\u003c 6, b1 = ((y0 + 1) & 63) \u003c\u003c 6;\n  return mix(mix(CN[b + a], CN[b + a1], fx), mix(CN[b1 + a], CN[b1 + a1], fx), fy);\n}\n\nexport function setup(params) {\n  params.s = { z: -1, k1: -1, t: 0, rt: 0, ox: 20, oy: 30, mist: 0, fields: [], sec: new Map(), tr: [], dust: [], duster: null, spray: [] };\n}\n\nfunction sectionAt(S, wx, wy) {\n  const ci = floor(wx / SEC), cj = floor(wy / SEC), key = ci * 1000 + cj;\n  let s = S.sec.get(key);\n  if (!s) {\n    const sp = spec(ci, cj), cx = ci * SEC + 16, cy = cj * SEC + 16, sd = rd(cx, cy);\n    s = { ci, cj, sp, f: -1, cx, cy, sd };\n    S.sec.set(key, s);\n  }\n  return s;\n}\n\n// The fields for this height, and each LED's place in them.\nfunction layout(S, k3) {\n  const z = (S.z = k3 / 2), fs = (S.fields = []);\n  S.sec.clear();\n  for (let cj = floor(-2 * z) - 1; cj \u003c= ceil(2 * z); cj++)\n    for (let ci = floor(-z) - 1; ci \u003c= ceil(z); ci++) {\n      const s = sectionAt(S, ci * SEC + 1, cj * SEC + 1), sp = s.sp;\n      if (sp.strips || abs(s.sd) \u003c 6.5) continue;\n      const id = fs.length, sg = s.sd > 0 ? 1 : -1, h = (k) => hash(ci * 13 + k, cj * 7 + 3);\n      // Where the river and its trees cut the circle, the arm swings to and fro over what is left.\n      let run = 0, best = 0, start = 0, first = -1;\n      const ok = (k) => rd(s.cx + RW * 0.97 * cos((k * TAU) / 96), s.cy + RW * 0.97 * sin((k * TAU) / 96)) * sg > 4.8;\n      for (let k = 0; k \u003c 192; k++) {\n        if (ok(k % 96)) {\n          if (!run) start = k;\n          if (++run > best && run \u003c= 96) (best = run), (first = start);\n        } else run = 0;\n      }\n      if (best \u003c 16) continue;\n      const f = { id, s, sg, cx: 32.5 + s.cx / z, cy: 64.5 + s.cy / z, R: RW / z, crop: sp.crop, off: sp.off, crop2: sp.crop2, off2: sp.off2, sa: h(1) * TAU };\n      Object.assign(f, { sd: h(2) \u003c 0.5 ? 1 : -1, om: TAU / (16 + 10 * h(3)), a: h(4) * TAU, tint: 0.93 + 0.12 * h(5), boost: 0, wipe: 0, a0: 0, span: TAU, rel: 0 });\n      Object.assign(f, { harv: 0, h: 0, h0: 0.3 + 0.4 * h(6), hs: h(7) * TAU, hd: h(8) \u003c 0.5 ? 1 : -1, hst: 0, ht: 0, g: 1, n0: 0, n1: 0, grow: 0 });\n      if (best \u003c 96) Object.assign(f, { wipe: 1, a0: ((first + 1) * TAU) / 96, span: ((best - 2) * TAU) / 96, rel: h(4) * ((best - 2) * TAU) / 96 }), (f.a = f.a0 + f.rel);\n      s.f = id;\n      fs.push(f);\n    }\n  for (let i = 0; i \u003c N; i++) {\n    const wx = ((i & 63) - 32) * z, wy = ((i >> 6) - 64) * z, s = sectionAt(S, wx, wy);\n    FID[i] = -1;\n    COV[i] = 0;\n    if (s.f \u003c 0) continue;\n    const f = fs[s.f], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy);\n    const c = cl((RW - dr) / z + 0.5, 0, 1) * cl((rd(wx, wy) * f.sg - 4.6) / z + 0.5, 0, 1);\n    if (c \u003c= 0) continue;\n    (FID[i] = f.id), (COV[i] = c), (ANG[i] = md(atan2(dy, dx))), (RAD[i] = dr / z);\n  }\n  for (const f of fs) f.n1 = 0;\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) fs[FID[i]].n1++;\n  let n = 0;\n  for (const f of fs) (f.n0 = n), (n += f.n1), (f.n1 = f.n0);\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) FP[fs[FID[i]].n1++] = i;\n  const vr = [], hr = [];\n  for (let m = -4; m \u003c= 4; m++) {\n    const x = 32.5 + (m * SEC) / z, y = 64.5 + (m * SEC) / z;\n    if (x > 2 && x \u003c 62) vr.push(x);\n    if (y > 2 && y \u003c 126) hr.push(y);\n  }\n  S.tr = [0, 1].map((k) => ({ v: k === 0, c: k ? hr[min(hr.length - 1, 2)] : vr[floor(vr.length / 2)], p: k ? 20 : 100, d: k ? 1 : -1, acc: 0 }));\n  S.dust = [];\n}\n\n// What stands on the land: trees along the river and in the farmsteads' windbreaks (1), or a farmhouse roof (2)\n// with its grain bins (3). 0 is open ground.\nfunction objAt(S, wx, wy) {\n  const r = abs(rd(wx, wy));\n  if (r > 1.1 && r \u003c 4.4 && vn(wx * 0.55 + 5, wy * 0.55) > 0.22 + 0.11 * r) return 1;\n  const s = sectionAt(S, wx, wy), c = s.sp.farm;\n  if (c \u003c 0 || s.sp.strips) return 0;\n  const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, u = c & 1 ? SEC - lx : lx, v = c & 2 ? SEC - ly : ly;\n  if (u \u003c 1 || v \u003c 1) return 0;\n  if ((u \u003c 8.6 && v \u003c 2.7) || (u \u003c 2.7 && v \u003c 8.6)) return hash(floor(u * 1.4), floor(v * 1.4) + c) \u003c 0.85 ? 1 : 0;\n  if (u > 3.4 && u \u003c 5.3 && v > 3.4 && v \u003c 5.1) return 2;\n  if ((u - 6.4) ** 2 + (v - 3.7) ** 2 \u003c 0.7 || (u - 3.7) ** 2 + (v - 6.4) ** 2 \u003c 0.7) return 3;\n  return 0;\n}\n\n// Round bales lying on the windrows of a stubble field.\nfunction bale(f, wx, wy) {\n  const dx = wx - f.s.cx, dy = wy - f.s.cy, dr = sqrt(dx * dx + dy * dy);\n  if (dr > RW - 1 || dr \u003c 2) return 0;\n  const q = dr / 3.5, k = floor(q), arc = md(atan2(dy, dx) - f.sa) * dr, c = floor(arc / 4.5);\n  return abs(q - k - 0.5) * 3.5 \u003c 0.55 && abs(arc / 4.5 - c - 0.5) * 4.5 \u003c 0.6 && arc \u003c 4.2 * dr && hash(k, c + f.id * 50) \u003c 0.75 ? 1 : 0;\n}\n\n// The picture that stays put between knob turns: land, roads, river, farmsteads and each field at its point in the season.\nfunction paint(S, k1) {\n  const z = S.z, fs = S.fields, C = C3, L = [mix(156, 172, sm(0, 0.4, k1)), mix(146, 148, k1), mix(100, 106, k1)];\n  const leaf = [mix(34, 132, sm(0.72, 0.92, k1)), mix(66, 102, sm(0.72, 0.92, k1)), 38];\n  for (const f of fs) {\n    f.v = stageOf(f.crop, k1, f.off);\n    f.v2 = f.crop2 \u003c 0 ? f.v : stageOf(f.crop2, k1, f.off2);\n    f.c1 = [0, 0, 0];\n    f.c2 = [0, 0, 0];\n    f.a1 = stageCol(f.v, f.c1);\n    f.a2 = stageCol(f.v2, f.c2);\n    f.grow = (f.v > 0.1 && f.v \u003c 0.57) || (f.v2 > 0.1 && f.v2 \u003c 0.57) ? 1 : 0;\n    const hv = f.crop2 \u003c 0 && f.v > 0.6 && f.v \u003c 0.77 ? 1 : 0;\n    if (hv !== f.harv) Object.assign(f, { harv: hv, h: f.h0, hst: 0, g: 1 });\n  }\n  const ringA = sm(1.9, 2.6, 3 / z);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, wx = (x - 32) * z, wy = (y - 64) * z, s = sectionAt(S, wx, wy), sp = s.sp, r = rd(wx, wy), gr = 0.93 + 0.1 * vn(wx * 0.4, wy * 0.4) + 0.04 * hash(x, y);\n    for (let j = 0; j \u003c 3; j++) C[j] = L[j] * gr;\n    if (abs(r) \u003c 11) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], PASTURE[j] * gr, sm(11, 5, abs(r)) * 0.7);\n    if (sp.strips) {\n      const q = hash(s.ci, s.cj + 3) \u003c 0.5 ? wx : wy, st = floor(q / 4.5) & 1;\n      stageCol(st ? stageOf(2, k1, sp.off) : 0.86, C3);\n      for (let j = 0; j \u003c 3; j++) C[j] *= gr;\n    }\n    const fi = FID[i];\n    if (fi >= 0) {\n      const f = fs[fi], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy), cv = COV[i];\n      const side = f.crop2 \u003c 0 ? 0 : cl((dx * sin(f.sa) - dy * cos(f.sa)) / z + 0.5, 0, 1);\n      const amp = mix(f.a1, f.a2, side) * ringA, tk = abs(fr((dr * 5) / RW + 0.5) - 0.5) * (RW / 5 / z);\n      let m = f.tint * (1 + amp * cos((dr * TAU) / 3)) * (0.95 + 0.1 * vn(wx * 0.3 + f.id * 7, wy * 0.3));\n      if (dr > RW * 0.12) m *= 1 - 0.2 * cl(1 - tk * 1.6, 0, 1);\n      m *= 1 - 0.15 * cl(1 - abs(dr - RW + 0.5) / z, 0, 1);\n      const v = side > 0.5 ? f.v2 : f.v, wr = v > 0.76 && v \u003c 0.92 ? cl(1 - abs(fr(dr / 3.5) - 0.5) * (3.5 / z) * 1.8, 0, 1) : 0;\n      for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], mix(f.c1[j], f.c2[j], side) * m * (1 - 0.14 * wr), cv);\n      if (v > 0.76 && v \u003c 0.92) {\n        if (bale(f, wx, wy)) (C[0] = 196), (C[1] = 158), (C[2] = 76);\n        else if (bale(f, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.55;\n      }\n      if (dr \u003c 0.9) (C[0] = 170), (C[1] = 172), (C[2] = 164);\n      // Cut stubble, for a field the combine is in: paler, with a windrow down the middle of each pass.\n      if (f.harv) {\n        const kb = (RW - dr) / BAND, w2 = cl(1 - abs(fr(kb) - 0.5) * (BAND / z) * 1.6, 0, 1), m2 = f.tint * (0.96 + 0.08 * vn(wx * 0.5, wy * 0.5)) * (1 - 0.18 * w2) * (dr > RW * 0.12 ? 1 - 0.15 * cl(1 - tk * 1.6, 0, 1) : 1);\n        ALT[o] = 230 * m2;\n        ALT[o + 1] = 216 * m2;\n        ALT[o + 2] = 166 * m2;\n      }\n    }\n    const ob = objAt(S, wx, wy);\n    if (!ob && objAt(S, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.6;\n    if (ob === 1) for (let j = 0; j \u003c 3; j++) C[j] = leaf[j] * (0.8 + 0.4 * vn(wx * 1.3, wy * 1.3));\n    else if (ob === 2) (C[0] = 214), (C[1] = 208), (C[2] = 198);\n    else if (ob === 3) (C[0] = 196), (C[1] = 202), (C[2] = 206);\n    const aw = cl(1.25 - abs(r) / z, 0, 1);\n    if (aw > 0) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], WATER[j], aw);\n    const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, dp = min(lx, SEC - lx, ly, SEC - ly) / z, rc = x && y ? cl(0.6 / z + 0.5 - dp, 0, 1) : 0;\n    for (let j = 0; j \u003c 3; j++) BASE[o + j] = mix(C[j], GRAVEL[j], rc);\n  }\n}\n\nfunction startWet(S) {\n  for (const f of S.fields)\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let age = 99;\n      if (f.grow) {\n        if (!f.wipe) age = md((f.a - ANG[i]) * f.sd) / f.om;\n        else {\n          const r = md(ANG[i] - f.a0), p = f.rel;\n          if (r \u003c= f.span) age = (f.sd > 0 ? (r \u003c= p ? p - r : p + r) : r >= p ? r - p : 2 * f.span - r - p) / f.om;\n        }\n      }\n      WET[i] = exp(-age / TD);\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 2, 4), ts = cl(k[1], 0.2, 3) / 2, rt = cl(dt || 0, 0, 0.1), d = rt * ts;\n  let fresh = 0;\n  if (abs(k3 / 2 - S.z) > 0.004) layout(S, k3), (fresh = 1);\n  if (fresh || abs(k1 - S.k1) > 0.002) paint(S, k1), (S.k1 = k1);\n  if (fresh) startWet(S);\n  (S.k4 = cl(k[3], 0, 1)), (S.t += d), (S.rt += rt);\n  const bp = input.btnPressed || [];\n  if (bp[0]) {\n    for (const f of S.fields) f.boost = f.wipe ? 2 * f.span : TAU;\n    S.mist = 3;\n  }\n  if (bp[1] && !S.duster) {\n    const xs = S.fields.map((f) => f.cx).filter((x) => x > 4 && x \u003c 60), x = xs.length ? xs[floor(rnd() * xs.length)] + (rnd() - 0.5) * 6 : 32, dn = rnd() \u003c 0.5;\n    S.duster = { x, y: dn ? -8 : H + 8, vy: dn ? 30 : -30, acc: 0 };\n  }\n  S.mist = max(0, S.mist - rt);\n  (S.ox += 2 * d), (S.oy += 1.4 * d);\n  const dec = exp(-d / TD);\n  for (const f of S.fields) {\n    const on = f.grow || f.boost > 0, D = f.om * d;\n    if (on) f.boost -= D;\n    let lo = 1, hi = 0;\n    if (on && !f.wipe) (lo = f.a), (f.a = md(f.a + f.sd * D));\n    else if (on) {\n      const p = f.rel;\n      let q = p + f.sd * D;\n      (lo = min(p, q)), (hi = max(p, q));\n      if (q > f.span) (q = 2 * f.span - q), (f.sd = -1), (lo = min(p, q)), (hi = f.span);\n      if (q \u003c 0) (q = -q), (f.sd = 1), (lo = 0), (hi = max(p, q));\n      (f.rel = q), (f.a = f.a0 + q);\n    }\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let w = WET[i] * dec;\n      if (on) {\n        if (!f.wipe) {\n          if (md((ANG[i] - lo) * f.sd) \u003c= D) w = 1;\n        } else {\n          const r = md(ANG[i] - f.a0);\n          if (r >= lo && r \u003c= hi) w = 1;\n        }\n      }\n      WET[i] = w;\n    }\n    // The combine goes round at a steady walk, so the inner rings take less time.\n    if (f.harv) {\n      if (f.hst === 0) {\n        const rh = max(1.5, f.R - (BAND / S.z) * (floor(f.h) + 0.5));\n        f.h += (d * 5) / (TAU * rh * S.z);\n        if (f.h >= ceil(RW / BAND)) (f.hst = 1), (f.ht = 14);\n      } else if (f.hst === 1) {\n        if ((f.ht -= d) \u003c= 0) f.hst = 2;\n      } else if ((f.g -= d / 3) \u003c= 0) Object.assign(f, { hst: 0, h: 0, g: 1 });\n    }\n  }\n  // Trucks on the gravel roads and the dust they leave hanging.\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    tr.p += tr.d * 6 * d;\n    const lim = tr.v ? H : W;\n    if (tr.p > lim + 30) tr.p = -30;\n    if (tr.p \u003c -30) tr.p = lim + 30;\n    if ((tr.acc += d) > 0.1) {\n      tr.acc = 0;\n      S.dust.push({ x: tr.v ? tr.c : tr.p, y: tr.v ? tr.p : tr.c, t: S.t });\n    }\n  }\n  S.dust = S.dust.filter((p) => S.t - p.t \u003c 3.5);\n  const du = S.duster;\n  if (du) {\n    du.y += du.vy * rt;\n    if ((du.acc += rt) > 0.04) (du.acc = 0), S.spray.push({ x: du.x, y: du.y - Math.sign(du.vy) * 3, t: S.rt });\n    if (du.y \u003c -20 || du.y > H + 20) S.duster = null;\n  }\n  S.spray = S.spray.filter((p) => S.rt - p.t \u003c 4);\n}\n\nfunction blend(x, y, c, a) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], min(1, a));\n}\nfunction shade(x, y, k) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] *= k;\n}\n// A soft dot spread over the four LEDs around it.\nfunction puff(x, y, c, a) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  blend(x0, y0, c, a * (1 - fx) * (1 - fy)), blend(x0 + 1, y0, c, a * fx * (1 - fy)), blend(x0, y0 + 1, c, a * (1 - fx) * fy), blend(x0 + 1, y0 + 1, c, a * fx * fy);\n}\n\nconst SILVER = [214, 220, 226], MIST = [236, 242, 248], DUST = [246, 238, 216], RED = [204, 52, 36], YEL = [244, 212, 46], WHITE = [246, 248, 250], TANK = [236, 224, 196], TRUCK = [56, 64, 84];\nconst PLANE = [0, 1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, 0, -1, 0, -2, -1, -2, 1, -2], BODY = [250, 226, 80];\nconst PASTURE = [96, 118, 70], WATER = [84, 120, 146], GRAVEL = [206, 196, 168], CLOUD = [250, 250, 248], CLOUD_SH = [150, 160, 182];\n// How close a point along an arm of length R is to one of its towers.\nconst tw = (u, R) => cl(1 - abs(fr((u * 5) / R + 0.5) - 0.5) * (R / 5) * 1.5, 0, 1) * (u > R * 0.12 ? 1 : 0);\n// The arm and its shadow, its towers, the mist trailing it and the end gun's spray.\nfunction arm(S, f) {\n  const R = f.R, ca = cos(f.a), sa = sin(f.a), on = f.grow || f.boost > 0, ms = (on ? 1 : 0) * (1 + (S.mist > 0 ? 1.2 : 0)), tf = floor(S.rt * 7);\n  const x0 = max(0, floor(min(f.cx, f.cx + R * ca) - 3)), x1 = min(W - 1, ceil(max(f.cx, f.cx + R * ca) + 3));\n  const y0 = max(0, floor(min(f.cy, f.cy + R * sa) - 3)), y1 = min(H - 1, ceil(max(f.cy, f.cy + R * sa) + 3));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const qx = x + 0.5 - f.cx, qy = y + 0.5 - f.cy, t = qx * ca + qy * sa, c = qy * ca - qx * sa, ts = t - ca - sa, cs = c - ca + sa;\n      const o = (y * W + x) * 3, as = ts > -0.5 && ts \u003c R + 0.5 ? cl(1 - abs(cs), 0, 1) : 0, aa = t > -0.5 && t \u003c R + 0.3 ? cl(1.1 - abs(c), 0, 1) : 0;\n      if (as > 0) for (let j = 0; j \u003c 3; j++) F[o + j] *= 1 - 0.4 * as * (1 + 0.5 * tw(ts, R));\n      if (ms > 0 && t > R * 0.15 && t \u003c R + 2.5 && c * f.sd \u003c -0.3 && c * f.sd > (t > R ? -2.2 : -1.8)) {\n        const sp = hash(x * 31 + y, tf + f.id * 977);\n        blend(x, y, MIST, ms * (0.13 + (sp > 0.74 ? 0.5 : 0)) * (t > R ? 1.3 : 1));\n      }\n      if (aa > 0) {\n        const e = 0.6 * tw(t, R);\n        for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(SILVER[j], 250, e), 0.9 * aa);\n      }\n    }\n  // The wheeled towers, each with its short shadow.\n  for (let k = 1; k \u003c= 5; k++) {\n    const x = f.cx + ((R * k) / 5 - 0.3) * ca, y = f.cy + ((R * k) / 5 - 0.3) * sa;\n    shade(x + 1, y + 1, 0.55), blend(x, y, WHITE, 0.85);\n  }\n  blend(f.cx, f.cy, WHITE, 1);\n  shade(f.cx + 1, f.cy + 1, 0.55);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.z \u003c 0) return;\n  const fs = S.fields;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const fi = FID[i];\n    let g = 0;\n    if (fi >= 0) {\n      const f = fs[fi];\n      if (f.harv && f.hst) g = f.g;\n      else if (f.harv) {\n        const rel = md((ANG[i] - f.hs) * f.hd) / TAU;\n        if (floor((f.R - RAD[i]) / (BAND / S.z)) + rel \u003c f.h) g = 1;\n      }\n    }\n    const w = WET[i] > 0.004 ? WET[i] ** 0.8 * (fi >= 0 ? COV[i] : 0) : 0, k = 1 - 0.5 * w;\n    for (let j = 0; j \u003c 3; j++) {\n      let c = BASE[o + j];\n      if (g > 0) c = mix(c, ALT[o + j], g * COV[i]);\n      F[o + j] = c * k * (1 + (j - 1) * 0.08 * w);\n    }\n  }\n  for (const f of fs) {\n    if (f.harv && f.hst === 0) {\n      const z = S.z, rh = max(1.5, f.R - (BAND / z) * (floor(f.h) + 0.5)), th = f.hs + f.hd * fr(f.h) * TAU, x = f.cx + rh * cos(th), y = f.cy + rh * sin(th);\n      for (let j = 1; j \u003c 9; j++) {\n        const b = th - f.hd * (j * 0.7) / rh;\n        puff(f.cx + rh * cos(b) + 0.3 * j, f.cy + rh * sin(b) + 0.4 * j, DUST, 0.32 * (1 - j / 9));\n      }\n      shade(x + 1, y + 1, 0.5), shade(x + 2, y + 1, 0.6);\n      blend(x, y, RED, 1), blend(x + 1, y, TANK, 1);\n    }\n  }\n  for (const f of fs) arm(S, f);\n  for (const p of S.dust) {\n    const a = S.t - p.t;\n    const e = 0.8 * exp(-a / 1.7), sp = 0.4 + 0.6 * a, x = p.x + a * 1.7, y = p.y + a * 1.2;\n    puff(x, y, DUST, e), puff(x + sp, y + sp * 0.5, DUST, e * 0.6), puff(x - sp * 0.5, y + sp, DUST, e * 0.6);\n  }\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    const x = tr.v ? tr.c : tr.p, y = tr.v ? tr.p : tr.c;\n    shade(x + 1, y + 1, 0.55);\n    blend(x, y, TRUCK, 1);\n  }\n  for (const p of S.spray) {\n    const a = S.rt - p.t;\n    const e = 0.6 * exp(-a / 1.5), sp = 1.2 + 0.9 * a, x = p.x + a * 1.2, y = p.y + a * 0.8;\n    puff(x, y, MIST, e * 0.7), puff(x - sp, y, MIST, e), puff(x + sp, y, MIST, e);\n  }\n  const du = S.duster;\n  if (du) {\n    // A biplane seen from above: nose, wings, body and tail, with its shadow close by.\n    const sy = Math.sign(du.vy), X = floor(du.x), Y = floor(du.y);\n    for (let k = 0; k \u003c 20; k += 2) shade(X + PLANE[k] + 3, Y + PLANE[k + 1] * sy + 4, 0.55);\n    for (let k = 0; k \u003c 20; k += 2) blend(X + PLANE[k], Y + PLANE[k + 1] * sy, PLANE[k + 1] === 0 && PLANE[k] ? YEL : BODY, 1);\n  }\n  // Clouds and their shadows, lit from the upper left.\n  const thr = 0.69 - 0.2 * S.k4, ox = S.ox, oy = S.oy;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, u = (x - ox) * 0.3, v = (y - oy) * 0.27;\n    const sh = sm(thr, thr + 0.06, cloud(u - 1.8, v - 2.4)), n = cloud(u, v), ca = sm(thr, thr + 0.05, n);\n    let k = 1 - 0.45 * sh;\n    for (let j = 0; j \u003c 3; j++) F[o + j] *= k * (j === 2 ? 1 + 0.05 * sh : 1);\n    if (ca > 0) {\n      const lit = cl(0.7 - (n - cloud(u + 0.5, v + 0.5)) * 12 + 2 * (n - thr), 0, 1);\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(CLOUD_SH[j], CLOUD[j], lit), 0.92 * ca);\n    }\n    const lt = 1.02 - 0.09 * (x / W) - 0.07 * (y / H);\n    display.setPixel(x, y, min(255, F[o] * lt + 8) | 0, min(255, F[o + 1] * lt * 0.98 + 8) | 0, min(255, F[o + 2] * lt * 0.95 + 10) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster."},{"name":"Fields","min":2,"max":4,"about":"How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it."},{"name":"Clouds","min":0,"max":1,"about":"A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun."}],"start":[0,2,2,0.06],"measures":{"motion":0.0527,"detail":0.0683,"edges":0.2287,"complexity":2.4956,"coverage":1,"colour":0.1929,"drift":0.0389},"knobResponse":[0.1272,0.0462,0.1999,0.1865]},{"slug":"change-ringing","title":"Change Ringing","family":"rhythm","round":20,"note":"종탑 종실에서 종들이 바퀴째 한 바퀴씩 돌며 칠 때마다 번쩍이고, 그 아래로 종마다 제 색의 선이 체인지 한 줄에 한 칸씩 Plain Bob 을 따라 지그재그로 흘러내려요. 트레블의 선만 빨강이고, K1 을 누르면 「Bob!」을 불러 다음 리드 엔드에서 2번 자리 대신 4번 자리를 만들어요.","idea":"In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.","buttons":"K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.","code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-change-ringing","type":"code","name":"change-ringing","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lines","min":0,"max":1,"about":"Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one."},{"name":"Speed","min":0.25,"max":3,"about":"The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row."},{"name":"Bells","min":4,"max":8,"about":"How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds."},{"name":"Method","min":-1,"max":1,"about":"-1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice."}],"start":[0,2,4,0.06],"measures":{"motion":0.4844,"detail":0.08,"edges":0.458,"complexity":1.2457,"coverage":0.5293,"colour":0.2305,"drift":0.0504},"knobResponse":[0.0499,0.1129,0.1732,0.0613]},{"slug":"chemical-garden","title":"Chemical Garden","family":"chemistry","round":21,"note":"물유리 용액을 채운 키 큰 유리컵 모래 위에 금속염 결정을 떨어뜨리면 코발트의 청보라나 철의 녹슨 주황 같은 속 빈 광물 관이 흔들리며 수면까지 자라요. 컵이 차면 빈 컵이 밀려 들어와 다시 자라요.","idea":"Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.","buttons":"K1 tap slides the glass away and brings in a fresh one.","code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","layer":{"id":"layer-chemical-garden","type":"code","name":"chemical-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salts","min":0,"max":4,"about":"What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps."},{"name":"Crystals","min":5,"max":20,"about":"How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once."},{"name":"Strength","min":-1,"max":1,"about":"How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches."}],"start":[0,2,5,0.06],"measures":{"motion":0.044,"detail":0.0682,"edges":0.4036,"complexity":2.0411,"coverage":0.7726,"colour":0.152,"drift":0.0448},"knobResponse":[0.0762,0.0506,0.0924,0.0773]},{"slug":"chimera-state","title":"Chimera State","family":"rhythm","round":35,"note":"똑같은 위상 진동자 256개가 고리에 앉아 서로 당기는데, 고리가 발맞춰 도는 30% 와 위상이 흩어진 나머지로 갈라져요. 위 20줄은 진동자마다 위상을 제자리에 점으로 찍어 매끈한 호 옆에 흩뿌린 점을 보이고, 그 아래로 한 줄이 한 순간이라 가운데로 하늘색 띠가 곧게 흐르고 양옆은 한 바퀴씩 뒤처지는 진동자의 어두운 획으로 채워져요. K3 은 위상 지연을 80도에서 88도로 돌려 발맞춘 띠를 19열에서 9열로 좁히고, K1 을 누르면 새 무작위 출발에서 키메라가 다시 자라요.","idea":"256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.","buttons":"K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.","code":"// ===== Patternflow pattern =====\n// Title:   Chimera State\n// Family:  rhythm\n// Idea:    256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Chimera states (Yoshiki Kuramoto and Dorjsuren Battogtokh, 2002)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4\n//\n// Knob 1: Hue. Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green.\n// Knob 2: Speed. Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second.\n// Knob 3: Lag. The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls.\n// Knob 4: Stride. Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle.\n// Buttons: K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.\n\n// The ring form is Daniel Abrams and Steven Strogatz's (2004): N identical\n// phase oscillators at x_j = -pi + 2 pi j / N, each pulled by all the others\n// through the kernel G(x) = (1 + A cos x) / 2 pi and a phase lag alpha,\n//   dθ_j/dt = ω - (2 pi / N) Σ_k G(x_j - x_k) sin(θ_j - θ_k + α),\n// their A = 0.995 and their start θ_j = 6 r_j exp(-0.76 x_j²), r_j uniform\n// in [-1/2, 1/2]. Every oscillator obeys the same law, yet the ring splits\n// into a stretch that moves in step and a stretch whose phases scatter.\nconst W = 64, H = 128, N = 256, PER = N / W, TOP = 20, Y0 = TOP + 1, ROWS = H - Y0;\nconst A = 0.995, STEP = 0.1, MAXSTEPS = 30, RATE = 4, HUE0 = 0.55;\nconst { min, floor, round, sqrt, sin, cos, exp, atan2, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (v, m) => v - m * round(v / m);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A new random draw of the Abrams-Strogatz start, its scattered hump at x0.\n// The part in step forms on the calm side, opposite x0; on the first draw\n// the columns are set to put it in the middle of the panel.\nfunction seed(P, x0, place) {\n  for (let j = 0; j \u003c N; j++) {\n    const d = wrap(-PI + (TAU * j) / N - x0, TAU);\n    P.th[j] = 6 * (Math.random() - 0.5) * exp(-0.76 * d * d);\n  }\n  if (place) {\n    P.xs = ((x0 + 2 * PI) / TAU) * W;\n    P.xs -= W * floor(P.xs / W);\n    P.col = round(P.xs) % W;\n  }\n  P.dead = 0;\n  P.age = 0;\n  P.lag = 84;\n}\n\n// The sum over k is the local field R_j e^{iΘ_j} = (1/N) Σ_k (1 + A cos(x_j\n// - x_k)) e^{iθ_k}, and with cos(x_j - x_k) = cos x_j cos x_k + sin x_j sin\n// x_k it is three sums over the ring, Σ e^{iθ}, Σ cos x e^{iθ} and\n// Σ sin x e^{iθ}, read off at each x_j: O(N) a step instead of O(N²). Then\n// dθ_j/dt = ω - R_j sin(θ_j - Θ_j + α).\nfunction deriv(P, t, d, frame) {\n  const { cx, sx, c: C, s: S } = P;\n  let p0r = 0, p0i = 0, pcr = 0, pci = 0, psr = 0, psi = 0;\n  for (let k = 0; k \u003c N; k++) {\n    const c = cos(t[k]), s = sin(t[k]);\n    C[k] = c;\n    S[k] = s;\n    p0r += c;\n    p0i += s;\n    pcr += cx[k] * c;\n    pci += cx[k] * s;\n    psr += sx[k] * c;\n    psi += sx[k] * s;\n  }\n  const ca = P.ca, sa = P.sa;\n  let wx = 0, wy = 0;\n  for (let j = 0; j \u003c N; j++) {\n    const rr = (p0r + A * (cx[j] * pcr + sx[j] * psr)) / N, ri = (p0i + A * (cx[j] * pci + sx[j] * psi)) / N;\n    const c = C[j], s = S[j];\n    d[j] = -((s * ca + c * sa) * rr - (c * ca - s * sa) * ri);\n    if (frame) {\n      const r2 = rr * rr + ri * ri;\n      wx += r2 * cx[j];\n      wy += r2 * sx[j];\n    }\n  }\n  if (frame) {\n    // The field is strongest over the part in step. Its centre xc, and the\n    // field's phase there, give the frame that turns with that part.\n    const xc = atan2(wy, wx), cc = cos(xc), sc = sin(xc);\n    P.xc = xc;\n    P.phi = atan2(p0i + A * (cc * pci + sc * psi), p0r + A * (cc * pcr + sc * psr));\n    P.z = sqrt(p0r * p0r + p0i * p0i) / N;\n  }\n}\n\n// One RK4 step of 0.1. The right side is never more than 1 + A in size, so\n// the step is far inside RK4's reach at every Lag. Before it the whole ring\n// is turned back by the phase of the part in step, which the equation does\n// not see (every oscillator is the same, so ω is free): that part's phases\n// stand still and only the scattered ones move.\nfunction step(P) {\n  const { th, k1, k2, k3, k4, tmp } = P, h = STEP;\n  // Each draw grows at 84 degrees for 100 time units, and only then does\n  // the lag move to the knob, a tenth of a degree per time unit. From the\n  // Abrams-Strogatz start right at 80 degrees, 6 draws in 30 fell into step\n  // everywhere within 65 time units; grown at 84 and brought down to 80 (or\n  // up to 88) after, none of 30 did in 1000. A sudden jump from 88 to 80 on\n  // a grown chimera ended 1 of 20, hence the slow turn.\n  P.age += h;\n  const want = P.age \u003c 100 ? 84 : P.lagKnob;\n  P.lag += cl(want - P.lag, -0.01, 0.01);\n  P.ca = cos((P.lag * PI) / 180);\n  P.sa = sin((P.lag * PI) / 180);\n  deriv(P, th, k1, true);\n  const phi = P.phi;\n  for (let j = 0; j \u003c N; j++) th[j] -= phi;\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k1[j];\n  deriv(P, tmp, k2, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k2[j];\n  deriv(P, tmp, k3, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + h * k3[j];\n  deriv(P, tmp, k4, false);\n  for (let j = 0; j \u003c N; j++) th[j] = wrap(th[j] + (h / 6) * (k1[j] + 2 * k2[j] + 2 * k3[j] + k4[j]), TAU);\n  // With 256 oscillators the chimera wanders round the ring, a few columns\n  // in a thousand time units. The history keeps the ring's own columns, so\n  // the wandering shows as a lean in the band; the panel as a whole slides\n  // a column after it once the part in step is three columns off the middle.\n  P.xs = wrap(P.xs + 0.002 * wrap(((P.xc + PI) / TAU) * W - P.xs, W), W);\n  if (abs(wrap(P.xs - P.col, W)) > 3) P.col = ((round(P.xs) % W) + W) % W;\n  // A draw can still fall into step everywhere, the other state this ring\n  // can rest in. After 30 time units of that, a new draw.\n  P.dead = P.z > 0.99 ? P.dead + h : 0;\n  if (P.dead > 30) seed(P, (TAU * P.col) / W, false);\n}\n\nconst osc = (P, c, k) => ((((P.col - W / 2 + c) * PER + k) % N) + N) % N;\n\n// A row of the history keeps one oscillator of every four, in the ring's\n// own columns.\nfunction record(P) {\n  P.head = (P.head + ROWS - 1) % ROWS;\n  const o = P.head * W;\n  for (let c = 0; c \u003c W; c++) P.hist[o + c] = P.th[c * PER + 1];\n}\n\nexport function setup(params) {\n  const cx = new Float64Array(N), sx = new Float64Array(N);\n  for (let j = 0; j \u003c N; j++) (cx[j] = cos(-PI + (TAU * j) / N)), (sx[j] = sin(-PI + (TAU * j) / N));\n  const f = () => new Float64Array(N);\n  params.s = {\n    cx, sx, th: f(), k1: f(), k2: f(), k3: f(), k4: f(), tmp: f(), c: f(), s: f(),\n    ca: 0, sa: 1, lag: 84, lagKnob: 80, age: 0, xc: PI, phi: 0, z: 0, xs: 0, col: 0, dead: 0,\n    hist: new Float32Array(ROWS * W), head: 0, clock: 0, since: 0, fresh: true,\n    hue: 0, speed: 2, stride: 1, pal: new Float32Array(256 * 3), dot: new Float32Array(256 * 3), palHue: NaN,\n    acc: new Float32Array(W * TOP * 3),\n  };\n  seed(params.s, 0, true);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 80, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.lagKnob = cl(k[2], 80, 88);\n  P.stride = cl(k[3], 0.8, 4);\n  if (P.fresh) {\n    // 150 time units to grow and reach the knob's lag; a draw that still\n    // falls into step is drawn again. Then the whole history is run once so\n    // the panel opens full: 5,780 steps at Stride 4, about 0.3 s once.\n    for (let tries = 0; tries \u003c 8; tries++) {\n      if (tries) seed(P, 0, true);\n      for (let i = 0; i \u003c 1500; i++) step(P);\n      if (P.z \u003c 0.9) break;\n    }\n    for (let r = 0; r \u003c ROWS; r++) {\n      for (let t = 0; t \u003c P.stride - 1e-9; t += STEP) step(P);\n      record(P);\n    }\n    P.fresh = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) seed(P, (TAU * P.col) / W, false);\n  P.clock += d * RATE * P.speed;\n  let n = 0;\n  for (; P.clock >= STEP && n \u003c MAXSTEPS; n++) {\n    step(P);\n    P.clock -= STEP;\n    P.since += STEP;\n    if (P.since >= P.stride - 1e-9) {\n      record(P);\n      P.since -= P.stride;\n    }\n  }\n  if (n === MAXSTEPS) P.clock = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pal, dot, hist, th, acc } = P;\n  if (P.palHue !== P.hue) {\n    // Phase round the colour wheel. In the history the brightness also\n    // follows the phase, full at the phase of the part in step and dark\n    // half a turn away, so each slip of a scattered oscillator is a dark\n    // stroke through its column.\n    for (let i = 0; i \u003c 256; i++) {\n      const t = (i / 256) * TAU;\n      hsv(P.hue + HUE0 + i / 256, 0.85, 0.5 + 0.5 * cos(t), pal, i * 3);\n      hsv(P.hue + HUE0 + i / 256, 0.75, 1, dot, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The present, in the top 20 rows: every oscillator a dot, its phase up\n  // and down against its place on the ring.\n  acc.fill(0);\n  for (let c = 0; c \u003c W; c++)\n    for (let k = 0; k \u003c PER; k++) {\n      const t = th[osc(P, c, k)], y = TOP / 2 - 0.5 + (t / PI) * (TOP / 2 - 0.5), y0 = floor(y), f = y - y0;\n      const q = (floor((t / TAU + 1) * 256) & 255) * 3;\n      if (y0 >= 0) {\n        const o = (y0 * W + c) * 3, a = 0.7 * (1 - f);\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n      if (y0 + 1 \u003c TOP) {\n        const o = ((y0 + 1) * W + c) * 3, a = 0.7 * f;\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n    }\n  for (let y = 0, o = 0; y \u003c TOP; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, acc[o] * 255), min(255, acc[o + 1] * 255), min(255, acc[o + 2] * 255));\n  for (let x = 0; x \u003c W; x++) display.setPixel(x, TOP, 0, 0, 0);\n  // The past: one row per moment, the newest at the top.\n  for (let r = 0; r \u003c ROWS; r++) {\n    const o = ((P.head + r) % ROWS) * W, c0 = P.col + W / 2;\n    for (let x = 0; x \u003c W; x++) {\n      const q = (floor((hist[o + ((c0 + x) % W)] / TAU + 1) * 256) & 255) * 3;\n      display.setPixel(x, Y0 + r, pal[q] * 255, pal[q + 1] * 255, pal[q + 2] * 255);\n    }\n  }\n}\n","layer":{"id":"layer-chimera-state","type":"code","name":"chimera-state","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chimera State\n// Family:  rhythm\n// Idea:    256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Chimera states (Yoshiki Kuramoto and Dorjsuren Battogtokh, 2002)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4\n//\n// Knob 1: Hue. Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green.\n// Knob 2: Speed. Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second.\n// Knob 3: Lag. The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls.\n// Knob 4: Stride. Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle.\n// Buttons: K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.\n\n// The ring form is Daniel Abrams and Steven Strogatz's (2004): N identical\n// phase oscillators at x_j = -pi + 2 pi j / N, each pulled by all the others\n// through the kernel G(x) = (1 + A cos x) / 2 pi and a phase lag alpha,\n//   dθ_j/dt = ω - (2 pi / N) Σ_k G(x_j - x_k) sin(θ_j - θ_k + α),\n// their A = 0.995 and their start θ_j = 6 r_j exp(-0.76 x_j²), r_j uniform\n// in [-1/2, 1/2]. Every oscillator obeys the same law, yet the ring splits\n// into a stretch that moves in step and a stretch whose phases scatter.\nconst W = 64, H = 128, N = 256, PER = N / W, TOP = 20, Y0 = TOP + 1, ROWS = H - Y0;\nconst A = 0.995, STEP = 0.1, MAXSTEPS = 30, RATE = 4, HUE0 = 0.55;\nconst { min, floor, round, sqrt, sin, cos, exp, atan2, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (v, m) => v - m * round(v / m);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A new random draw of the Abrams-Strogatz start, its scattered hump at x0.\n// The part in step forms on the calm side, opposite x0; on the first draw\n// the columns are set to put it in the middle of the panel.\nfunction seed(P, x0, place) {\n  for (let j = 0; j \u003c N; j++) {\n    const d = wrap(-PI + (TAU * j) / N - x0, TAU);\n    P.th[j] = 6 * (Math.random() - 0.5) * exp(-0.76 * d * d);\n  }\n  if (place) {\n    P.xs = ((x0 + 2 * PI) / TAU) * W;\n    P.xs -= W * floor(P.xs / W);\n    P.col = round(P.xs) % W;\n  }\n  P.dead = 0;\n  P.age = 0;\n  P.lag = 84;\n}\n\n// The sum over k is the local field R_j e^{iΘ_j} = (1/N) Σ_k (1 + A cos(x_j\n// - x_k)) e^{iθ_k}, and with cos(x_j - x_k) = cos x_j cos x_k + sin x_j sin\n// x_k it is three sums over the ring, Σ e^{iθ}, Σ cos x e^{iθ} and\n// Σ sin x e^{iθ}, read off at each x_j: O(N) a step instead of O(N²). Then\n// dθ_j/dt = ω - R_j sin(θ_j - Θ_j + α).\nfunction deriv(P, t, d, frame) {\n  const { cx, sx, c: C, s: S } = P;\n  let p0r = 0, p0i = 0, pcr = 0, pci = 0, psr = 0, psi = 0;\n  for (let k = 0; k \u003c N; k++) {\n    const c = cos(t[k]), s = sin(t[k]);\n    C[k] = c;\n    S[k] = s;\n    p0r += c;\n    p0i += s;\n    pcr += cx[k] * c;\n    pci += cx[k] * s;\n    psr += sx[k] * c;\n    psi += sx[k] * s;\n  }\n  const ca = P.ca, sa = P.sa;\n  let wx = 0, wy = 0;\n  for (let j = 0; j \u003c N; j++) {\n    const rr = (p0r + A * (cx[j] * pcr + sx[j] * psr)) / N, ri = (p0i + A * (cx[j] * pci + sx[j] * psi)) / N;\n    const c = C[j], s = S[j];\n    d[j] = -((s * ca + c * sa) * rr - (c * ca - s * sa) * ri);\n    if (frame) {\n      const r2 = rr * rr + ri * ri;\n      wx += r2 * cx[j];\n      wy += r2 * sx[j];\n    }\n  }\n  if (frame) {\n    // The field is strongest over the part in step. Its centre xc, and the\n    // field's phase there, give the frame that turns with that part.\n    const xc = atan2(wy, wx), cc = cos(xc), sc = sin(xc);\n    P.xc = xc;\n    P.phi = atan2(p0i + A * (cc * pci + sc * psi), p0r + A * (cc * pcr + sc * psr));\n    P.z = sqrt(p0r * p0r + p0i * p0i) / N;\n  }\n}\n\n// One RK4 step of 0.1. The right side is never more than 1 + A in size, so\n// the step is far inside RK4's reach at every Lag. Before it the whole ring\n// is turned back by the phase of the part in step, which the equation does\n// not see (every oscillator is the same, so ω is free): that part's phases\n// stand still and only the scattered ones move.\nfunction step(P) {\n  const { th, k1, k2, k3, k4, tmp } = P, h = STEP;\n  // Each draw grows at 84 degrees for 100 time units, and only then does\n  // the lag move to the knob, a tenth of a degree per time unit. From the\n  // Abrams-Strogatz start right at 80 degrees, 6 draws in 30 fell into step\n  // everywhere within 65 time units; grown at 84 and brought down to 80 (or\n  // up to 88) after, none of 30 did in 1000. A sudden jump from 88 to 80 on\n  // a grown chimera ended 1 of 20, hence the slow turn.\n  P.age += h;\n  const want = P.age \u003c 100 ? 84 : P.lagKnob;\n  P.lag += cl(want - P.lag, -0.01, 0.01);\n  P.ca = cos((P.lag * PI) / 180);\n  P.sa = sin((P.lag * PI) / 180);\n  deriv(P, th, k1, true);\n  const phi = P.phi;\n  for (let j = 0; j \u003c N; j++) th[j] -= phi;\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k1[j];\n  deriv(P, tmp, k2, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k2[j];\n  deriv(P, tmp, k3, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + h * k3[j];\n  deriv(P, tmp, k4, false);\n  for (let j = 0; j \u003c N; j++) th[j] = wrap(th[j] + (h / 6) * (k1[j] + 2 * k2[j] + 2 * k3[j] + k4[j]), TAU);\n  // With 256 oscillators the chimera wanders round the ring, a few columns\n  // in a thousand time units. The history keeps the ring's own columns, so\n  // the wandering shows as a lean in the band; the panel as a whole slides\n  // a column after it once the part in step is three columns off the middle.\n  P.xs = wrap(P.xs + 0.002 * wrap(((P.xc + PI) / TAU) * W - P.xs, W), W);\n  if (abs(wrap(P.xs - P.col, W)) > 3) P.col = ((round(P.xs) % W) + W) % W;\n  // A draw can still fall into step everywhere, the other state this ring\n  // can rest in. After 30 time units of that, a new draw.\n  P.dead = P.z > 0.99 ? P.dead + h : 0;\n  if (P.dead > 30) seed(P, (TAU * P.col) / W, false);\n}\n\nconst osc = (P, c, k) => ((((P.col - W / 2 + c) * PER + k) % N) + N) % N;\n\n// A row of the history keeps one oscillator of every four, in the ring's\n// own columns.\nfunction record(P) {\n  P.head = (P.head + ROWS - 1) % ROWS;\n  const o = P.head * W;\n  for (let c = 0; c \u003c W; c++) P.hist[o + c] = P.th[c * PER + 1];\n}\n\nexport function setup(params) {\n  const cx = new Float64Array(N), sx = new Float64Array(N);\n  for (let j = 0; j \u003c N; j++) (cx[j] = cos(-PI + (TAU * j) / N)), (sx[j] = sin(-PI + (TAU * j) / N));\n  const f = () => new Float64Array(N);\n  params.s = {\n    cx, sx, th: f(), k1: f(), k2: f(), k3: f(), k4: f(), tmp: f(), c: f(), s: f(),\n    ca: 0, sa: 1, lag: 84, lagKnob: 80, age: 0, xc: PI, phi: 0, z: 0, xs: 0, col: 0, dead: 0,\n    hist: new Float32Array(ROWS * W), head: 0, clock: 0, since: 0, fresh: true,\n    hue: 0, speed: 2, stride: 1, pal: new Float32Array(256 * 3), dot: new Float32Array(256 * 3), palHue: NaN,\n    acc: new Float32Array(W * TOP * 3),\n  };\n  seed(params.s, 0, true);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 80, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.lagKnob = cl(k[2], 80, 88);\n  P.stride = cl(k[3], 0.8, 4);\n  if (P.fresh) {\n    // 150 time units to grow and reach the knob's lag; a draw that still\n    // falls into step is drawn again. Then the whole history is run once so\n    // the panel opens full: 5,780 steps at Stride 4, about 0.3 s once.\n    for (let tries = 0; tries \u003c 8; tries++) {\n      if (tries) seed(P, 0, true);\n      for (let i = 0; i \u003c 1500; i++) step(P);\n      if (P.z \u003c 0.9) break;\n    }\n    for (let r = 0; r \u003c ROWS; r++) {\n      for (let t = 0; t \u003c P.stride - 1e-9; t += STEP) step(P);\n      record(P);\n    }\n    P.fresh = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) seed(P, (TAU * P.col) / W, false);\n  P.clock += d * RATE * P.speed;\n  let n = 0;\n  for (; P.clock >= STEP && n \u003c MAXSTEPS; n++) {\n    step(P);\n    P.clock -= STEP;\n    P.since += STEP;\n    if (P.since >= P.stride - 1e-9) {\n      record(P);\n      P.since -= P.stride;\n    }\n  }\n  if (n === MAXSTEPS) P.clock = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pal, dot, hist, th, acc } = P;\n  if (P.palHue !== P.hue) {\n    // Phase round the colour wheel. In the history the brightness also\n    // follows the phase, full at the phase of the part in step and dark\n    // half a turn away, so each slip of a scattered oscillator is a dark\n    // stroke through its column.\n    for (let i = 0; i \u003c 256; i++) {\n      const t = (i / 256) * TAU;\n      hsv(P.hue + HUE0 + i / 256, 0.85, 0.5 + 0.5 * cos(t), pal, i * 3);\n      hsv(P.hue + HUE0 + i / 256, 0.75, 1, dot, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The present, in the top 20 rows: every oscillator a dot, its phase up\n  // and down against its place on the ring.\n  acc.fill(0);\n  for (let c = 0; c \u003c W; c++)\n    for (let k = 0; k \u003c PER; k++) {\n      const t = th[osc(P, c, k)], y = TOP / 2 - 0.5 + (t / PI) * (TOP / 2 - 0.5), y0 = floor(y), f = y - y0;\n      const q = (floor((t / TAU + 1) * 256) & 255) * 3;\n      if (y0 >= 0) {\n        const o = (y0 * W + c) * 3, a = 0.7 * (1 - f);\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n      if (y0 + 1 \u003c TOP) {\n        const o = ((y0 + 1) * W + c) * 3, a = 0.7 * f;\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n    }\n  for (let y = 0, o = 0; y \u003c TOP; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, acc[o] * 255), min(255, acc[o + 1] * 255), min(255, acc[o + 2] * 255));\n  for (let x = 0; x \u003c W; x++) display.setPixel(x, TOP, 0, 0, 0);\n  // The past: one row per moment, the newest at the top.\n  for (let r = 0; r \u003c ROWS; r++) {\n    const o = ((P.head + r) % ROWS) * W, c0 = P.col + W / 2;\n    for (let x = 0; x \u003c W; x++) {\n      const q = (floor((hist[o + ((c0 + x) % W)] / TAU + 1) * 256) & 255) * 3;\n      display.setPixel(x, Y0 + r, pal[q] * 255, pal[q + 1] * 255, pal[q + 2] * 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green."},{"name":"Speed","min":0.2,"max":3,"about":"Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second."},{"name":"Lag","min":80,"max":88,"about":"The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls."},{"name":"Stride","min":0.8,"max":4,"about":"Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle."}],"start":[0,2,80,0.8],"measures":{"motion":0.871,"detail":0.1412,"edges":0.5685,"complexity":1.5664,"coverage":0.8292,"colour":0.6214,"drift":0.032},"knobResponse":[0.5105,0.2386,0.2458,0.1784]},{"slug":"chladni","title":"Chladni","family":"wave","round":16,"note":"세운 놋쇠 판에 뿌린 모래가 떨리는 자리에서 튀어 나가 가만히 있는 마디선에 모여 클라드니 도형을 그려요. 5초마다 활을 다시 그으면 모래가 흩어졌다가 새 모드의 도형을 찾아가고, K4 를 올리면 석송 가루가 배 자리마다 둥근 노란 더미로 모여요.","idea":"Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.","buttons":"K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.","code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","layer":{"id":"layer-chladni","type":"code","name":"chladni","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plate","min":0,"max":1,"about":"What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel."},{"name":"Drive","min":0.8,"max":3,"about":"How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard."},{"name":"Pitch","min":-1,"max":1,"about":"Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells."},{"name":"Powder","min":0,"max":1,"about":"How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found."}],"start":[0,2,0,0.06],"measures":{"motion":0.4769,"detail":0.0916,"edges":0.6144,"complexity":1.6152,"coverage":0.9904,"colour":0.0973,"drift":0.0566},"knobResponse":[0.0837,0.1502,0.16,0.131]},{"slug":"chromatography","title":"Chromatography","family":"chemistry","round":20,"note":"실험대 위 유리 수조에 거름종이 띠가 매달려 발끝을 용매에 담그고, 젖은 앞선이 올라가는 동안 연필 출발선의 잉크 점이 색 띠로 갈라져 저마다 다른 빠르기로 올라가요. K1 을 누르면 띠를 들어 올리고 새 띠를 걸어요.","idea":"Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.","buttons":"K1 tap lifts the strips out of the tank now and hangs fresh ones.","code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","layer":{"id":"layer-chromatography","type":"code","name":"chromatography","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps."},{"name":"Strips","min":3,"max":6,"about":"How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6."},{"name":"Solvent","min":-1,"max":1,"about":"How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker."}],"start":[0,2,3,0.06],"measures":{"motion":0.0352,"detail":0.0646,"edges":0.3051,"complexity":1.2207,"coverage":0.7347,"colour":0.2232,"drift":0.0399},"knobResponse":[0.0454,0.0548,0.2236,0.048]},{"slug":"chrome-powder","title":"Chrome Powder","family":"cosmetic","round":32,"note":"판 전체가 크롬 파우더를 얹은 젤 한 면이에요. 보이지 않는 어플리케이터가 작은 원을 그리며 위에서 아래로 문지르면 무광 회색 가루가 로즈골드 거울로 바뀌고, 거울에는 소프트박스의 흰 띠와 검은 반사판 띠가 물결지며 비쳐요. 다 덮이면 빛이 비스듬히 한 번 쓸고, 새 가루가 위에서부터 다시 덮여요.","idea":"The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.","buttons":"K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.","code":"// ===== Patternflow pattern =====\n// Title:   Chrome Powder\n// Family:  cosmetic\n// Idea:    The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after chrome powder buffed onto a gel top coat and the softbox reflections of product photography\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1\n//\n// Knob 1: Hue. The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac.\n// Knob 2: Speed. At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast.\n// Knob 3: Holo. At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own.\n// Knob 4: Grain. The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1.\n// Buttons: K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, exp, abs, min, max, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// Smooth value noise on a coarse grid of random numbers, sampled per LED.\nfunction field(cell, amp) {\n  const gw = floor(W / cell) + 3, gh = floor(H / cell) + 3, g = new Float32Array(gw * gh);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      tx = tx * tx * (3 - 2 * tx);\n      ty = ty * ty * (3 - 2 * ty);\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = amp * (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty);\n    }\n  return out;\n}\n\n// The coat's surface: bowed across the panel and a little down it, with a\n// low waviness of the gel, so the horizon is one wavy line across. Stored as the reflected direction a level eye\n// sees in it, rx across and ry down, and a soft light term for the powder.\nfunction surface(P) {\n  const w1 = field(22, 1), w2 = field(9, 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const u = (x - 31.5) / 32, v = (y - 63.5) / 64;\n      let sx = 0.44 * u + 0.03 * sin(y * 0.07);\n      let sy = 0.2 * v + 0.008 * sin(x * 0.24 + y * 0.05);\n      const xr = min(x + 1, W - 1), yr = min(y + 1, H - 1);\n      sx += 0.09 * (w1[y * W + xr] - w1[i]) * 22 / 4 + 0.05 * (w2[y * W + xr] - w2[i]) * 9 / 4;\n      // Down the panel the waviness is kept small so the horizon stays one line.\n      sy += 0.015 * (w1[yr * W + x] - w1[i]) * 22 / 4 + 0.01 * (w2[yr * W + x] - w2[i]) * 9 / 4;\n      P.rx[i] = 2 * sx;\n      P.ry[i] = 2 * sy;\n      P.lam[i] = cl(0.78 - 0.5 * sx + 0.35 * sy, 0.35, 1);\n    }\n}\n\nconst edge = (t) => cl(t / 0.025 + 0.5, 0, 1);\nconst box = (u, a, b, v, c, d) => edge(u - a) * edge(b - u) * edge(v - c) * edge(d - v);\n\n// The studio the mirror sees, the way chrome is shot: a pale sweep of wall,\n// lighter towards the horizon, with a tall softbox, black flags beside it\n// and two strip lights, all sharp at their edges; below the horizon a dark\n// floor with faint copies of the lights. u wraps every 2.4 as the lights\n// slide.\nconst HZ = 0.22;\nfunction env(u, v) {\n  u -= 2.4 * floor(u / 2.4 + 0.5);\n  if (v > HZ) return 0.1 + 0.05 * (1 - sm(HZ, 0.7, v)) + 0.14 * box(u, -0.18, 0.12, v, HZ, 1) + 0.1 * box(u, 0.45, 0.5, v, HZ, 1);\n  let I = (0.56 + 0.22 * sm(-0.8, HZ, v)) * (0.88 + 0.12 * cos(u * 2.6));\n  // Black flags: one wide beside the softbox, two narrow further out.\n  I *= 1 - 0.94 * box(u, 0.12, 0.3, v, -2, 2);\n  I *= 1 - 0.94 * box(u, -0.5, -0.42, v, -2, 2);\n  I *= 1 - 0.9 * box(u, 0.7, 0.76, v, -2, 2);\n  I += 0.7 * box(u, -0.18, 0.12, v, -2, HZ - 0.06) * (0.85 + 0.15 * cos((u + 0.03) * 10));\n  I += 0.6 * box(u, 0.45, 0.5, v, -2, HZ - 0.03);\n  I += 0.6 * box(u, -0.66, -0.62, v, -2, HZ - 0.03);\n  I += 0.55 * box(u, 0.92, 1.12, v, -0.75, HZ - 0.08);\n  I += 0.4 * box(u, -2, 2, v, -0.62, -0.55);\n  return I;\n}\n\nexport function setup(params) {\n  const P = {\n    T: 0, phase: 0, pt: 0, hue: NaN, holo: 0, grain: 0.06, speed: 2, drift: 0,\n    rx: new Float32Array(N), ry: new Float32Array(N), lam: new Float32Array(N),\n    B: new Float32Array(N), g1: new Float32Array(N), g2: null, g3: null, clump: null, soft: null, ih: new Float32Array(N), spk: new Float32Array(N), res: new Float32Array(N),\n    ax: 32, ay: -8, tint: new Float32Array(3), dust: new Float32Array(3), sweep: -1, recoat: -1,\n  };\n  surface(P);\n  for (let i = 0; i \u003c N; i++) (P.g1[i] = random() * 2 - 1), (P.spk[i] = random()), (P.res[i] = random());\n  P.g2 = field(2, 1.3);\n  P.g3 = field(3.5, 1.5);\n  P.clump = field(2.5, 1);\n  P.soft = field(16, 1);\n  for (let i = 0; i \u003c N; i++) P.ih[i] = random() * 2 - 1;\n  params.s = P;\n}\n\n// The applicator: a sponge tip 10 LEDs in radius that rubs circles 5 LEDs\n// in radius, a little under four to a crossing so they never line up, while\n// it crosses the panel and back and works down it, 12 LEDs a crossing. A\n// crossing buffs an LED about two thirds of the way; the next one finishes\n// it.\nconst COAT = 17, SWEEP = 6, RECOAT = 3, R = 10, CROSS = 1.4;\nfunction rub(P, dT) {\n  const steps = 6;\n  for (let s = 0; s \u003c steps; s++) {\n    P.pt += dT / steps;\n    const t = P.pt, ph = t / CROSS, tri = 1 - abs(1 - 2 * (ph / 2 - floor(ph / 2))) * 2;\n    const a = t * 2 * PI * 2.37;\n    const cx = 32 - 38 * tri + 5 * cos(a), cy = -12 + (172 * t) / COAT + 5 * sin(a);\n    P.ax = cx;\n    P.ay = cy;\n    const x0 = max(0, floor(cx - R)), x1 = min(W - 1, floor(cx + R) + 1), y0 = max(0, floor(cy - R)), y1 = min(H - 1, floor(cy + R) + 1);\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - cx, dy = y - cy, d2 = (dx * dx + dy * dy) / (R * R);\n        if (d2 >= 1) continue;\n        const i = y * W + x;\n        P.B[i] = min(1, P.B[i] + 2.4 * (1 - d2 * d2) * (dT / steps) * (0.7 + 0.6 * P.res[i]));\n      }\n  }\n  // It goes back over what it missed: from 18 rows above the tip up, the\n  // last patches of powder turn too.\n  const yb = min(H, floor(P.ay - 18));\n  for (let y = max(0, yb - 24); y \u003c yb; y++) {\n    const m = sm(yb, yb - 24, y) * dT * 1.5;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) P.B[i] = min(1, P.B[i] + m);\n  }\n  for (let i = 0, e = max(0, yb - 24) * W; i \u003c e; i++) P.B[i] = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  P.holo = cl(k[2], 0, 1);\n  P.grain = cl(k[3], 0, 1);\n  const dT = d * P.speed;\n  P.T += dT;\n  P.drift += dT * 0.035;\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== 2) (P.phase = 2), (P.recoat = 0);\n  if (P.phase === 0) {\n    rub(P, dT);\n    if (P.pt >= COAT) {\n      P.phase = 1;\n      P.sweep = 0;\n      P.B.fill(1);\n    }\n  } else if (P.phase === 1) {\n    P.sweep += dT / SWEEP;\n    if (P.sweep >= 1) (P.phase = 2), (P.recoat = 0), (P.sweep = -1);\n  } else {\n    // The new coat is dusted on from the top down.\n    P.recoat += dT / RECOAT;\n    const fy = -10 + 150 * P.recoat;\n    for (let y = 0; y \u003c H; y++) {\n      if (y > fy + 6) break;\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x, e = fy + 5 * P.res[i] - y;\n        if (e > 0) P.B[i] = min(P.B[i], max(0, 1 - e / 4));\n      }\n    }\n    if (P.recoat >= 1) {\n      P.B.fill(0);\n      P.phase = 0;\n      P.pt = 0;\n      P.recoat = -1;\n    }\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hsv(k[0] + 0.025, 0.4, 1, P.tint, 0);\n    hsv(k[0] + 0.025, 0.16, 1, P.dust, 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { rx, ry, lam, B, g1, g2, g3, spk, tint, dust } = P;\n  const gr = P.grain, holo = P.holo, hue = P.hue, du = P.drift;\n  const gA = 0.05 + 0.21 * gr, gm2 = sm(0.15, 0.6, gr), gm3 = sm(0.55, 1, gr);\n  const sw = P.sweep, c = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, b = B[i];\n      // The matte powder: a pale tint of the metal, lit softly, with grain.\n      let pr = 0, pg = 0, pb = 0;\n      // Each grain turns to mirror at its own point in the buffing, so the\n      // edge of the mirror is speckled, and powder that has been pressed but\n      // not yet turned takes a satin sheen.\n      // Turning Grain up also leaves clumps of powder on the finished mirror.\n      const th = 0.3 + 0.5 * P.res[i], left = gr * sm(0.35, 0.6, P.clump[i]);\n      const mir = sm(th - 0.1, th + 0.1, b) * (1 - 0.75 * left);\n      if (mir \u003c 1) {\n        const g = g1[i] * (1 - gm2) + g2[i] * gm2 * (1 - gm3) + g3[i] * gm3;\n        let v = (0.56 + 0.05 * P.soft[i] + 0.1 * sm(0.03, 0.4, b)) * lam[i] * (1 + gA * g * (1 - 0.6 * sm(0.03, 0.4, b)));\n        if (spk[i] > 0.985 - 0.02 * gr) v += 0.12 * (0.5 + 0.5 * sin(P.T * 3 + spk[i] * 400));\n        (pr = dust[0] * v), (pg = dust[1] * v), (pb = dust[2] * v);\n        if (holo > 0) {\n          // Holographic powder: every grain carries its own colour.\n          hsv(hue + 0.665 + 0.25 * P.ih[i], 0.55, v * 1.15, c, 0);\n          const hm = holo * 0.8;\n          (pr += (c[0] - pr) * hm), (pg += (c[1] - pg) * hm), (pb += (c[2] - pb) * hm);\n        }\n      }\n      let mr = 0, mg = 0, mb = 0;\n      if (mir > 0) {\n        const u = rx[i] + du, v = ry[i];\n        let I = env(u, v);\n        if (sw >= 0) {\n          const p = x * 0.6 + y - (-50 + 230 * sw);\n          I += 0.9 * exp(-(p * p) / 60);\n        }\n        // Silver-bright where the light is strong, the tint in the mids,\n        // nearly black in the floor.\n        let tr = tint[0], tg = tint[1], tb = tint[2];\n        if (holo > 0) {\n          // Aurora chrome: the tint gives way to a colour that turns with\n          // the angle of the surface, over the cool side of the wheel from\n          // the tint, so it runs violet, blue and aqua and never through the\n          // olive a dim yellow-green would be.\n          const s = sin(2.6 * rx[i] + 5 * ry[i] + 0.7 * sin(y * 0.05) + du * 4);\n          hsv(hue + 0.025 + 0.64 + 0.2 * s, 0.5, 1, c, 0);\n          (tr += (c[0] - tr) * holo), (tg += (c[1] - tg) * holo), (tb += (c[2] - tb) * holo);\n        }\n        const hi = sm(0.85, 1.3, I), L = min(1.2, I);\n        mr = L * (tr + (1 - tr) * hi);\n        mg = L * (tg + (1 - tg) * hi);\n        mb = L * (tb + (1 - tb) * hi);\n      }\n      const r = pr * (1 - mir) + mr * mir, g = pg * (1 - mir) + mg * mir, bl = pb * (1 - mir) + mb * mir;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","layer":{"id":"layer-chrome-powder","type":"code","name":"chrome-powder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chrome Powder\n// Family:  cosmetic\n// Idea:    The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after chrome powder buffed onto a gel top coat and the softbox reflections of product photography\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1\n//\n// Knob 1: Hue. The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac.\n// Knob 2: Speed. At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast.\n// Knob 3: Holo. At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own.\n// Knob 4: Grain. The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1.\n// Buttons: K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, exp, abs, min, max, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// Smooth value noise on a coarse grid of random numbers, sampled per LED.\nfunction field(cell, amp) {\n  const gw = floor(W / cell) + 3, gh = floor(H / cell) + 3, g = new Float32Array(gw * gh);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      tx = tx * tx * (3 - 2 * tx);\n      ty = ty * ty * (3 - 2 * ty);\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = amp * (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty);\n    }\n  return out;\n}\n\n// The coat's surface: bowed across the panel and a little down it, with a\n// low waviness of the gel, so the horizon is one wavy line across. Stored as the reflected direction a level eye\n// sees in it, rx across and ry down, and a soft light term for the powder.\nfunction surface(P) {\n  const w1 = field(22, 1), w2 = field(9, 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const u = (x - 31.5) / 32, v = (y - 63.5) / 64;\n      let sx = 0.44 * u + 0.03 * sin(y * 0.07);\n      let sy = 0.2 * v + 0.008 * sin(x * 0.24 + y * 0.05);\n      const xr = min(x + 1, W - 1), yr = min(y + 1, H - 1);\n      sx += 0.09 * (w1[y * W + xr] - w1[i]) * 22 / 4 + 0.05 * (w2[y * W + xr] - w2[i]) * 9 / 4;\n      // Down the panel the waviness is kept small so the horizon stays one line.\n      sy += 0.015 * (w1[yr * W + x] - w1[i]) * 22 / 4 + 0.01 * (w2[yr * W + x] - w2[i]) * 9 / 4;\n      P.rx[i] = 2 * sx;\n      P.ry[i] = 2 * sy;\n      P.lam[i] = cl(0.78 - 0.5 * sx + 0.35 * sy, 0.35, 1);\n    }\n}\n\nconst edge = (t) => cl(t / 0.025 + 0.5, 0, 1);\nconst box = (u, a, b, v, c, d) => edge(u - a) * edge(b - u) * edge(v - c) * edge(d - v);\n\n// The studio the mirror sees, the way chrome is shot: a pale sweep of wall,\n// lighter towards the horizon, with a tall softbox, black flags beside it\n// and two strip lights, all sharp at their edges; below the horizon a dark\n// floor with faint copies of the lights. u wraps every 2.4 as the lights\n// slide.\nconst HZ = 0.22;\nfunction env(u, v) {\n  u -= 2.4 * floor(u / 2.4 + 0.5);\n  if (v > HZ) return 0.1 + 0.05 * (1 - sm(HZ, 0.7, v)) + 0.14 * box(u, -0.18, 0.12, v, HZ, 1) + 0.1 * box(u, 0.45, 0.5, v, HZ, 1);\n  let I = (0.56 + 0.22 * sm(-0.8, HZ, v)) * (0.88 + 0.12 * cos(u * 2.6));\n  // Black flags: one wide beside the softbox, two narrow further out.\n  I *= 1 - 0.94 * box(u, 0.12, 0.3, v, -2, 2);\n  I *= 1 - 0.94 * box(u, -0.5, -0.42, v, -2, 2);\n  I *= 1 - 0.9 * box(u, 0.7, 0.76, v, -2, 2);\n  I += 0.7 * box(u, -0.18, 0.12, v, -2, HZ - 0.06) * (0.85 + 0.15 * cos((u + 0.03) * 10));\n  I += 0.6 * box(u, 0.45, 0.5, v, -2, HZ - 0.03);\n  I += 0.6 * box(u, -0.66, -0.62, v, -2, HZ - 0.03);\n  I += 0.55 * box(u, 0.92, 1.12, v, -0.75, HZ - 0.08);\n  I += 0.4 * box(u, -2, 2, v, -0.62, -0.55);\n  return I;\n}\n\nexport function setup(params) {\n  const P = {\n    T: 0, phase: 0, pt: 0, hue: NaN, holo: 0, grain: 0.06, speed: 2, drift: 0,\n    rx: new Float32Array(N), ry: new Float32Array(N), lam: new Float32Array(N),\n    B: new Float32Array(N), g1: new Float32Array(N), g2: null, g3: null, clump: null, soft: null, ih: new Float32Array(N), spk: new Float32Array(N), res: new Float32Array(N),\n    ax: 32, ay: -8, tint: new Float32Array(3), dust: new Float32Array(3), sweep: -1, recoat: -1,\n  };\n  surface(P);\n  for (let i = 0; i \u003c N; i++) (P.g1[i] = random() * 2 - 1), (P.spk[i] = random()), (P.res[i] = random());\n  P.g2 = field(2, 1.3);\n  P.g3 = field(3.5, 1.5);\n  P.clump = field(2.5, 1);\n  P.soft = field(16, 1);\n  for (let i = 0; i \u003c N; i++) P.ih[i] = random() * 2 - 1;\n  params.s = P;\n}\n\n// The applicator: a sponge tip 10 LEDs in radius that rubs circles 5 LEDs\n// in radius, a little under four to a crossing so they never line up, while\n// it crosses the panel and back and works down it, 12 LEDs a crossing. A\n// crossing buffs an LED about two thirds of the way; the next one finishes\n// it.\nconst COAT = 17, SWEEP = 6, RECOAT = 3, R = 10, CROSS = 1.4;\nfunction rub(P, dT) {\n  const steps = 6;\n  for (let s = 0; s \u003c steps; s++) {\n    P.pt += dT / steps;\n    const t = P.pt, ph = t / CROSS, tri = 1 - abs(1 - 2 * (ph / 2 - floor(ph / 2))) * 2;\n    const a = t * 2 * PI * 2.37;\n    const cx = 32 - 38 * tri + 5 * cos(a), cy = -12 + (172 * t) / COAT + 5 * sin(a);\n    P.ax = cx;\n    P.ay = cy;\n    const x0 = max(0, floor(cx - R)), x1 = min(W - 1, floor(cx + R) + 1), y0 = max(0, floor(cy - R)), y1 = min(H - 1, floor(cy + R) + 1);\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - cx, dy = y - cy, d2 = (dx * dx + dy * dy) / (R * R);\n        if (d2 >= 1) continue;\n        const i = y * W + x;\n        P.B[i] = min(1, P.B[i] + 2.4 * (1 - d2 * d2) * (dT / steps) * (0.7 + 0.6 * P.res[i]));\n      }\n  }\n  // It goes back over what it missed: from 18 rows above the tip up, the\n  // last patches of powder turn too.\n  const yb = min(H, floor(P.ay - 18));\n  for (let y = max(0, yb - 24); y \u003c yb; y++) {\n    const m = sm(yb, yb - 24, y) * dT * 1.5;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) P.B[i] = min(1, P.B[i] + m);\n  }\n  for (let i = 0, e = max(0, yb - 24) * W; i \u003c e; i++) P.B[i] = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  P.holo = cl(k[2], 0, 1);\n  P.grain = cl(k[3], 0, 1);\n  const dT = d * P.speed;\n  P.T += dT;\n  P.drift += dT * 0.035;\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== 2) (P.phase = 2), (P.recoat = 0);\n  if (P.phase === 0) {\n    rub(P, dT);\n    if (P.pt >= COAT) {\n      P.phase = 1;\n      P.sweep = 0;\n      P.B.fill(1);\n    }\n  } else if (P.phase === 1) {\n    P.sweep += dT / SWEEP;\n    if (P.sweep >= 1) (P.phase = 2), (P.recoat = 0), (P.sweep = -1);\n  } else {\n    // The new coat is dusted on from the top down.\n    P.recoat += dT / RECOAT;\n    const fy = -10 + 150 * P.recoat;\n    for (let y = 0; y \u003c H; y++) {\n      if (y > fy + 6) break;\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x, e = fy + 5 * P.res[i] - y;\n        if (e > 0) P.B[i] = min(P.B[i], max(0, 1 - e / 4));\n      }\n    }\n    if (P.recoat >= 1) {\n      P.B.fill(0);\n      P.phase = 0;\n      P.pt = 0;\n      P.recoat = -1;\n    }\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hsv(k[0] + 0.025, 0.4, 1, P.tint, 0);\n    hsv(k[0] + 0.025, 0.16, 1, P.dust, 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { rx, ry, lam, B, g1, g2, g3, spk, tint, dust } = P;\n  const gr = P.grain, holo = P.holo, hue = P.hue, du = P.drift;\n  const gA = 0.05 + 0.21 * gr, gm2 = sm(0.15, 0.6, gr), gm3 = sm(0.55, 1, gr);\n  const sw = P.sweep, c = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, b = B[i];\n      // The matte powder: a pale tint of the metal, lit softly, with grain.\n      let pr = 0, pg = 0, pb = 0;\n      // Each grain turns to mirror at its own point in the buffing, so the\n      // edge of the mirror is speckled, and powder that has been pressed but\n      // not yet turned takes a satin sheen.\n      // Turning Grain up also leaves clumps of powder on the finished mirror.\n      const th = 0.3 + 0.5 * P.res[i], left = gr * sm(0.35, 0.6, P.clump[i]);\n      const mir = sm(th - 0.1, th + 0.1, b) * (1 - 0.75 * left);\n      if (mir \u003c 1) {\n        const g = g1[i] * (1 - gm2) + g2[i] * gm2 * (1 - gm3) + g3[i] * gm3;\n        let v = (0.56 + 0.05 * P.soft[i] + 0.1 * sm(0.03, 0.4, b)) * lam[i] * (1 + gA * g * (1 - 0.6 * sm(0.03, 0.4, b)));\n        if (spk[i] > 0.985 - 0.02 * gr) v += 0.12 * (0.5 + 0.5 * sin(P.T * 3 + spk[i] * 400));\n        (pr = dust[0] * v), (pg = dust[1] * v), (pb = dust[2] * v);\n        if (holo > 0) {\n          // Holographic powder: every grain carries its own colour.\n          hsv(hue + 0.665 + 0.25 * P.ih[i], 0.55, v * 1.15, c, 0);\n          const hm = holo * 0.8;\n          (pr += (c[0] - pr) * hm), (pg += (c[1] - pg) * hm), (pb += (c[2] - pb) * hm);\n        }\n      }\n      let mr = 0, mg = 0, mb = 0;\n      if (mir > 0) {\n        const u = rx[i] + du, v = ry[i];\n        let I = env(u, v);\n        if (sw >= 0) {\n          const p = x * 0.6 + y - (-50 + 230 * sw);\n          I += 0.9 * exp(-(p * p) / 60);\n        }\n        // Silver-bright where the light is strong, the tint in the mids,\n        // nearly black in the floor.\n        let tr = tint[0], tg = tint[1], tb = tint[2];\n        if (holo > 0) {\n          // Aurora chrome: the tint gives way to a colour that turns with\n          // the angle of the surface, over the cool side of the wheel from\n          // the tint, so it runs violet, blue and aqua and never through the\n          // olive a dim yellow-green would be.\n          const s = sin(2.6 * rx[i] + 5 * ry[i] + 0.7 * sin(y * 0.05) + du * 4);\n          hsv(hue + 0.025 + 0.64 + 0.2 * s, 0.5, 1, c, 0);\n          (tr += (c[0] - tr) * holo), (tg += (c[1] - tg) * holo), (tb += (c[2] - tb) * holo);\n        }\n        const hi = sm(0.85, 1.3, I), L = min(1.2, I);\n        mr = L * (tr + (1 - tr) * hi);\n        mg = L * (tg + (1 - tg) * hi);\n        mb = L * (tb + (1 - tb) * hi);\n      }\n      const r = pr * (1 - mir) + mr * mir, g = pg * (1 - mir) + mg * mir, bl = pb * (1 - mir) + mb * mir;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast."},{"name":"Holo","min":0,"max":1,"about":"At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own."},{"name":"Grain","min":0,"max":1,"about":"The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.1725,"detail":0.0415,"edges":0.2939,"complexity":1.5841,"coverage":0.922,"colour":0.1297,"drift":0.2833},"knobResponse":[0.0785,0.1385,0.1031,0.0512]},{"slug":"circuit-board","title":"Circuit Board","family":"circuit","round":17,"note":"회로 기판이 패널을 다 채우고, Lee 의 미로 라우터가 프로세서와 메모리 둘, 플래시, 크리스털, 금도금 단자 사이에 구리 선 47개를 곧게, 또 45도로 깔아요. 버스에는 펄스 열이 나란히 달리고 바쁜 선은 신호 색으로 데워지며, K1 을 누르면 기판이 꺼졌다가 부팅해요.","idea":"A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.","buttons":"K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.","code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","layer":{"id":"layer-circuit-board","type":"code","name":"circuit-board","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mask","min":0,"max":1,"about":"The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1."},{"name":"Clock","min":0.5,"max":4,"about":"How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice."},{"name":"Traffic","min":0,"max":1,"about":"At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back."},{"name":"Glow","min":0,"max":1,"about":"How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three."}],"start":[0,2,0,0.06],"measures":{"motion":0.2002,"detail":0.119,"edges":0.678,"complexity":0.7577,"coverage":0.9814,"colour":0.2535,"drift":0.0471},"knobResponse":[0.2116,0.0618,0.0696,0.0621]},{"slug":"circulation","title":"Circulation","family":"body","round":22,"note":"해부도처럼 머리부터 발끝까지 선 사람이에요. 심장이 뛸 때마다 붉은 피의 맥이 동맥을 타고 머리와 손발 끝까지 번져 가고, 푸른 정맥혈은 심장 쪽으로 거슬러 올라오며 폐가 박동과 숨에 분홍빛으로 물들어요. 발치의 모니터에는 심전도와 맥박 수가 떠요.","idea":"A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.","buttons":"K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","layer":{"id":"layer-circulation","type":"code","name":"circulation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Chart","min":0,"max":1,"about":"The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1."},{"name":"Rate","min":1,"max":5,"about":"The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other."},{"name":"Detail","min":1,"max":4,"about":"How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4."},{"name":"Effort","min":0,"max":1,"about":"From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood."}],"start":[0,2,1,0.06],"measures":{"motion":0.3125,"detail":0.0474,"edges":0.3512,"complexity":1.0533,"coverage":0.3719,"colour":0.2033,"drift":0.0315},"knobResponse":[0.1504,0.046,0.0247,0.0525]},{"slug":"clay-mask","title":"Clay Mask","family":"cosmetic","round":32,"note":"판 전체에 스패출러로 바른 로즈 클레이가 얇은 곳부터 말라 들어가요. 짙은 라즈베리색 윤이 먼저 빠지고 옅은 블러시색 무광이 섬처럼 번지다가, 두꺼운 결만 마지막까지 짙은 줄로 남아요. 8초쯤 다 마르면 물 띠가 위에서 아래로 2초 동안 지나가며 다시 적셔요.","idea":"A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.","buttons":"K1 tap sends the band of water down the panel now, unless one is already on its way.","code":"// ===== Patternflow pattern =====\n// Title:   Clay Mask\n// Family:  cosmetic\n// Idea:    A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the clay face mask that pales as it dries\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet.\n// Knob 2: Speed. At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower.\n// Knob 3: Thickness. At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds.\n// Knob 4: Gloss. Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch.\n// Buttons: K1 tap sends the band of water down the panel now, unless one is already on its way.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, 0..1.\nfunction vn(x, y, s) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  const u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(i, j, s), b = hash(i + 1, j, s), c = hash(i, j + 1, s), d = hash(i + 1, j + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The clay as it was laid on: a base coat and spatula strokes across it,\n// each piling a ridge at its edges and scraping fine lines along its length.\n// Baked once: thickness, its slope, the order the LEDs dry in, the delay of\n// the rewetting sweep and the dry grain.\nfunction lay(P) {\n  const R = Math.random;\n  const h = new Float32Array(N), hb = new Float32Array(N), key = new Float32Array(N);\n  const strokes = [];\n  for (let k = 0; k \u003c 7; k++) {\n    const th = 1.05 + (R() - 0.5) * 0.5;\n    strokes.push({\n      tx: cos(th), ty: sin(th), nx: -sin(th), ny: cos(th),\n      c: -62 + k * 20 + (R() - 0.5) * 8, w: 24 + R() * 10, t: 0.45 + R() * 0.2, tilt: (R() - 0.5) * 0.3,\n      f1: 0.9 + R() * 0.6, f2: 2.1 + R() * 0.9, p1: R() * 6.3, p2: R() * 6.3, e1: R() * 6.3, e2: R() * 6.3, run: 0.0025 + R() * 0.002,\n    });\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5, py = y - 63.5;\n      let v = 0.42 + 0.12 * vn(x / 9, y / 9, 3), sc = 0;\n      for (const s of strokes) {\n        const a = px * s.tx + py * s.ty, n = px * s.nx + py * s.ny;\n        const edge = s.w / 2 + 2.2 * sin(a * 0.08 + s.e1) + 1.2 * sin(a * 0.21 + s.e2);\n        const off = abs(n - s.c);\n        if (off > edge) continue;\n        const u = (n - s.c) / edge, rim = edge - off;\n        v = s.t + s.tilt * u - s.run * a + 0.32 * exp(-(rim * rim) / 3.2);\n        sc = 0.027 * sin(n * s.f1 + s.p1) * (0.6 + 0.4 * sin(a * 0.05 + s.p2)) + 0.014 * sin(n * s.f2 + s.p2);\n      }\n      hb[y * W + x] = v;\n      h[y * W + x] = v + sc + 0.05 * (vn(x / 4, y / 4, 5) - 0.5);\n    }\n  // The order of drying follows the thickness blurred over a few LEDs, so the\n  // front creeps round the ridges instead of fraying along every scrape.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sum = 0, n = 0;\n      for (let j = -2; j \u003c= 2; j++)\n        for (let i = -2; i \u003c= 2; i++) {\n          const xx = x + i, yy = y + j;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          sum += hb[yy * W + xx];\n          n++;\n        }\n      key[y * W + x] = 0.5 * sum / n + 0.5 * hb[y * W + x] + 0.16 * (vn(x / 7, y / 7, 9) - 0.5) + 0.06 * (vn(x / 2.5, y / 2.5, 10) - 0.5);\n    }\n  const gx = new Float32Array(N), gy = new Float32Array(N), rank = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (h[y * W + min(W - 1, x + 1)] - h[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (h[min(H - 1, y + 1) * W + x] - h[max(0, y - 1) * W + x]) / 2;\n    }\n  // Thin clay dries first: the LEDs in order of thickness, as a rank 0..1.\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => key[a] - key[b]);\n  order.forEach((i, r) => (rank[i] = r / (N - 1)));\n  const delay = new Float32Array(N), grain = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      delay[i] = (y + 4 + 3 * sin(x * 0.13 + 1.1) + 3 * vn(x / 5, y / 5, 11)) / (H + 10);\n      grain[i] = 0.6 * (R() - 0.5) + 0.4 * (vn(x / 1.7, y / 1.7, 13) - 0.5);\n    }\n  // Three hairline cracks, each a short wandering line from a thick spot,\n  // numbered 0..1 along its length so it opens from one end.\n  const crack = new Float32Array(N);\n  for (let n = 0; n \u003c 3; n++) {\n    let best = 0, bi = 0;\n    for (let t = 0; t \u003c 60; t++) {\n      const i = floor(R() * N);\n      if (h[i] > best && !crack[i]) (best = h[i]), (bi = i);\n    }\n    let x = bi % W, y = floor(bi / W), a = R() * 2 * PI;\n    const len = 14 + floor(R() * 12);\n    for (let s = 0; s \u003c len; s++) {\n      const i = floor(y) * W + floor(x);\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) break;\n      crack[i] = max(crack[i], 0.02 + s / len);\n      a += (R() - 0.5) * 0.9;\n      x += cos(a) * 0.9;\n      y += sin(a) * 0.9;\n    }\n  }\n  Object.assign(P, { h, gx, gy, rank, delay, grain, crack });\n}\n\nexport function setup(params) {\n  params.s = {\n    c: 0, hue: 0, speed: 2, thick: 0, gloss: 0.06, ts: -0.5, tk: 0, ps: -0.5, pk: 0,\n  };\n  lay(params.s);\n}\n\n// Drying times in clock seconds (one a second at Speed 2): an LED of rank r\n// starts to dry at age A0 + r * span and is dry after band more.\nconst A0 = 1.0, SWEEP = 2.2, HOLD = 1.2;\nconst spanOf = (t) => 6 + (t \u003c 0 ? 3.5 * t : 5 * t);\nconst bandOf = (t) => 1.6 + (t \u003c 0 ? -1.2 * t : -0.6 * t);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], -1, 1);\n  P.gloss = cl(k[3], -1, 1);\n  P.c += d * P.speed * 0.5;\n  const span = spanOf(P.thick), band = bandOf(P.thick);\n  const sweeping = P.c \u003c P.ts + P.tk * SWEEP;\n  const allDry = P.c - (P.ts + P.tk * SWEEP) > A0 + span + band + HOLD;\n  if (!sweeping && (allDry || (input.btnPressed && input.btnPressed[0]))) {\n    (P.ps = P.ts), (P.pk = P.tk), (P.ts = P.c), (P.tk = 1);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { h, gx, gy, rank, delay, grain, crack } = P;\n  const span = spanOf(P.thick), band = bandOf(P.thick), c = P.c;\n  const relief = 2.4 + 1.6 * P.thick, g = P.gloss;\n  // A lamp above the panel drifts slowly, and the wet clay mirrors it as a\n  // soft spot that the ridges and scrapes break into streaks.\n  const la = 0.3 * c;\n  const Lx = 32 + 46 * sin(la), Ly = 60 + 70 * sin(0.63 * la + 1.2), Lz = 150;\n  const Ex = 32, Ey = 70, Ez = 260;\n  const shin = 14 + 30 * (g + 1), specK = 0.25 + 0.5 * (g + 1) / 2;\n  const hue = P.hue + 0.935;\n  const wet = [0, 0, 0], dry = [0, 0, 0], deep = [0, 0, 0];\n  hsv(hue, 0.64 + 0.08 * g, 0.56 - 0.05 * g, wet, 0);\n  hsv(hue + 0.01, 0.12, 0.92, dry, 0);\n  hsv(hue + 0.005, 0.3, 0.84, deep, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const tNew = P.ts + P.tk * SWEEP * delay[i];\n      const fresh = c >= tNew;\n      const tw = fresh ? tNew : P.ps + P.pk * SWEEP * delay[i];\n      const age = c - tw;\n      const D = cl((age - A0 - rank[i] * span) / band, 0, 1);\n      const nx = -gx[i] * relief, ny = -gy[i] * relief, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n      let lx = Lx - x, ly = Ly - y, lz = Lz;\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const dif = (nx * lx + ny * ly + lz) * nl;\n      const nh = max(0, (nx * hx + ny * hy + hz) * hi * nl);\n      // Wet: deep colour shaded by the relief, with the sheen. The sheen\n      // goes first as the surface turns matte, then the colour lifts.\n      const shiny = 1 - sm(0, 0.3, D), lift = sm(0.12, 1, D);\n      // Behind the rewetting band the clay carries a film of water, with a\n      // bright line where the band's edge is.\n      const water = fresh && P.tk ? sm(1.1, 0, age) : 0, rim = fresh && P.tk ? sm(0.06, 0, age) : 0;\n      const spec = (specK * shiny * nh ** shin + water * (0.35 * nh ** 90 + 0.05) + 0.3 * rim) * 255;\n      const shade = (0.62 + 0.45 * dif) * (1 - 0.18 * water);\n      // Dry: pale and chalky, the thick ridges keeping a little more colour.\n      const th = sm(0.45, 0.85, h[i]), gr = 1 + 0.13 * grain[i], ds = (0.84 + 0.2 * dif) * gr;\n      let dr = (dry[0] + (deep[0] - dry[0]) * th) * ds, dg = (dry[1] + (deep[1] - dry[1]) * th) * ds, db = (dry[2] + (deep[2] - dry[2]) * th) * ds;\n      // A hairline crack opens where a crack runs, once that spot is dry.\n      const ck = crack[i];\n      if (ck > 0) {\n        const k = sm(0.6 + 1.4 * ck, 0.9 + 1.4 * ck, age - A0 - rank[i] * span - band);\n        const f = 0.55 * k;\n        (dr += (deep[0] * 0.7 - dr) * f), (dg += (deep[1] * 0.7 - dg) * f), (db += (deep[2] * 0.7 - db) * f);\n      }\n      const wr = wet[0] * shade, wg = wet[1] * shade, wb = wet[2] * shade;\n      const r = wr + (dr - wr) * lift + spec;\n      const gg = wg + (dg - wg) * lift + spec;\n      const b = wb + (db - wb) * lift + spec * 0.96;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","layer":{"id":"layer-clay-mask","type":"code","name":"clay-mask","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Clay Mask\n// Family:  cosmetic\n// Idea:    A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the clay face mask that pales as it dries\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet.\n// Knob 2: Speed. At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower.\n// Knob 3: Thickness. At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds.\n// Knob 4: Gloss. Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch.\n// Buttons: K1 tap sends the band of water down the panel now, unless one is already on its way.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, 0..1.\nfunction vn(x, y, s) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  const u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(i, j, s), b = hash(i + 1, j, s), c = hash(i, j + 1, s), d = hash(i + 1, j + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The clay as it was laid on: a base coat and spatula strokes across it,\n// each piling a ridge at its edges and scraping fine lines along its length.\n// Baked once: thickness, its slope, the order the LEDs dry in, the delay of\n// the rewetting sweep and the dry grain.\nfunction lay(P) {\n  const R = Math.random;\n  const h = new Float32Array(N), hb = new Float32Array(N), key = new Float32Array(N);\n  const strokes = [];\n  for (let k = 0; k \u003c 7; k++) {\n    const th = 1.05 + (R() - 0.5) * 0.5;\n    strokes.push({\n      tx: cos(th), ty: sin(th), nx: -sin(th), ny: cos(th),\n      c: -62 + k * 20 + (R() - 0.5) * 8, w: 24 + R() * 10, t: 0.45 + R() * 0.2, tilt: (R() - 0.5) * 0.3,\n      f1: 0.9 + R() * 0.6, f2: 2.1 + R() * 0.9, p1: R() * 6.3, p2: R() * 6.3, e1: R() * 6.3, e2: R() * 6.3, run: 0.0025 + R() * 0.002,\n    });\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5, py = y - 63.5;\n      let v = 0.42 + 0.12 * vn(x / 9, y / 9, 3), sc = 0;\n      for (const s of strokes) {\n        const a = px * s.tx + py * s.ty, n = px * s.nx + py * s.ny;\n        const edge = s.w / 2 + 2.2 * sin(a * 0.08 + s.e1) + 1.2 * sin(a * 0.21 + s.e2);\n        const off = abs(n - s.c);\n        if (off > edge) continue;\n        const u = (n - s.c) / edge, rim = edge - off;\n        v = s.t + s.tilt * u - s.run * a + 0.32 * exp(-(rim * rim) / 3.2);\n        sc = 0.027 * sin(n * s.f1 + s.p1) * (0.6 + 0.4 * sin(a * 0.05 + s.p2)) + 0.014 * sin(n * s.f2 + s.p2);\n      }\n      hb[y * W + x] = v;\n      h[y * W + x] = v + sc + 0.05 * (vn(x / 4, y / 4, 5) - 0.5);\n    }\n  // The order of drying follows the thickness blurred over a few LEDs, so the\n  // front creeps round the ridges instead of fraying along every scrape.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sum = 0, n = 0;\n      for (let j = -2; j \u003c= 2; j++)\n        for (let i = -2; i \u003c= 2; i++) {\n          const xx = x + i, yy = y + j;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          sum += hb[yy * W + xx];\n          n++;\n        }\n      key[y * W + x] = 0.5 * sum / n + 0.5 * hb[y * W + x] + 0.16 * (vn(x / 7, y / 7, 9) - 0.5) + 0.06 * (vn(x / 2.5, y / 2.5, 10) - 0.5);\n    }\n  const gx = new Float32Array(N), gy = new Float32Array(N), rank = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (h[y * W + min(W - 1, x + 1)] - h[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (h[min(H - 1, y + 1) * W + x] - h[max(0, y - 1) * W + x]) / 2;\n    }\n  // Thin clay dries first: the LEDs in order of thickness, as a rank 0..1.\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => key[a] - key[b]);\n  order.forEach((i, r) => (rank[i] = r / (N - 1)));\n  const delay = new Float32Array(N), grain = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      delay[i] = (y + 4 + 3 * sin(x * 0.13 + 1.1) + 3 * vn(x / 5, y / 5, 11)) / (H + 10);\n      grain[i] = 0.6 * (R() - 0.5) + 0.4 * (vn(x / 1.7, y / 1.7, 13) - 0.5);\n    }\n  // Three hairline cracks, each a short wandering line from a thick spot,\n  // numbered 0..1 along its length so it opens from one end.\n  const crack = new Float32Array(N);\n  for (let n = 0; n \u003c 3; n++) {\n    let best = 0, bi = 0;\n    for (let t = 0; t \u003c 60; t++) {\n      const i = floor(R() * N);\n      if (h[i] > best && !crack[i]) (best = h[i]), (bi = i);\n    }\n    let x = bi % W, y = floor(bi / W), a = R() * 2 * PI;\n    const len = 14 + floor(R() * 12);\n    for (let s = 0; s \u003c len; s++) {\n      const i = floor(y) * W + floor(x);\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) break;\n      crack[i] = max(crack[i], 0.02 + s / len);\n      a += (R() - 0.5) * 0.9;\n      x += cos(a) * 0.9;\n      y += sin(a) * 0.9;\n    }\n  }\n  Object.assign(P, { h, gx, gy, rank, delay, grain, crack });\n}\n\nexport function setup(params) {\n  params.s = {\n    c: 0, hue: 0, speed: 2, thick: 0, gloss: 0.06, ts: -0.5, tk: 0, ps: -0.5, pk: 0,\n  };\n  lay(params.s);\n}\n\n// Drying times in clock seconds (one a second at Speed 2): an LED of rank r\n// starts to dry at age A0 + r * span and is dry after band more.\nconst A0 = 1.0, SWEEP = 2.2, HOLD = 1.2;\nconst spanOf = (t) => 6 + (t \u003c 0 ? 3.5 * t : 5 * t);\nconst bandOf = (t) => 1.6 + (t \u003c 0 ? -1.2 * t : -0.6 * t);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], -1, 1);\n  P.gloss = cl(k[3], -1, 1);\n  P.c += d * P.speed * 0.5;\n  const span = spanOf(P.thick), band = bandOf(P.thick);\n  const sweeping = P.c \u003c P.ts + P.tk * SWEEP;\n  const allDry = P.c - (P.ts + P.tk * SWEEP) > A0 + span + band + HOLD;\n  if (!sweeping && (allDry || (input.btnPressed && input.btnPressed[0]))) {\n    (P.ps = P.ts), (P.pk = P.tk), (P.ts = P.c), (P.tk = 1);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { h, gx, gy, rank, delay, grain, crack } = P;\n  const span = spanOf(P.thick), band = bandOf(P.thick), c = P.c;\n  const relief = 2.4 + 1.6 * P.thick, g = P.gloss;\n  // A lamp above the panel drifts slowly, and the wet clay mirrors it as a\n  // soft spot that the ridges and scrapes break into streaks.\n  const la = 0.3 * c;\n  const Lx = 32 + 46 * sin(la), Ly = 60 + 70 * sin(0.63 * la + 1.2), Lz = 150;\n  const Ex = 32, Ey = 70, Ez = 260;\n  const shin = 14 + 30 * (g + 1), specK = 0.25 + 0.5 * (g + 1) / 2;\n  const hue = P.hue + 0.935;\n  const wet = [0, 0, 0], dry = [0, 0, 0], deep = [0, 0, 0];\n  hsv(hue, 0.64 + 0.08 * g, 0.56 - 0.05 * g, wet, 0);\n  hsv(hue + 0.01, 0.12, 0.92, dry, 0);\n  hsv(hue + 0.005, 0.3, 0.84, deep, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const tNew = P.ts + P.tk * SWEEP * delay[i];\n      const fresh = c >= tNew;\n      const tw = fresh ? tNew : P.ps + P.pk * SWEEP * delay[i];\n      const age = c - tw;\n      const D = cl((age - A0 - rank[i] * span) / band, 0, 1);\n      const nx = -gx[i] * relief, ny = -gy[i] * relief, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n      let lx = Lx - x, ly = Ly - y, lz = Lz;\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const dif = (nx * lx + ny * ly + lz) * nl;\n      const nh = max(0, (nx * hx + ny * hy + hz) * hi * nl);\n      // Wet: deep colour shaded by the relief, with the sheen. The sheen\n      // goes first as the surface turns matte, then the colour lifts.\n      const shiny = 1 - sm(0, 0.3, D), lift = sm(0.12, 1, D);\n      // Behind the rewetting band the clay carries a film of water, with a\n      // bright line where the band's edge is.\n      const water = fresh && P.tk ? sm(1.1, 0, age) : 0, rim = fresh && P.tk ? sm(0.06, 0, age) : 0;\n      const spec = (specK * shiny * nh ** shin + water * (0.35 * nh ** 90 + 0.05) + 0.3 * rim) * 255;\n      const shade = (0.62 + 0.45 * dif) * (1 - 0.18 * water);\n      // Dry: pale and chalky, the thick ridges keeping a little more colour.\n      const th = sm(0.45, 0.85, h[i]), gr = 1 + 0.13 * grain[i], ds = (0.84 + 0.2 * dif) * gr;\n      let dr = (dry[0] + (deep[0] - dry[0]) * th) * ds, dg = (dry[1] + (deep[1] - dry[1]) * th) * ds, db = (dry[2] + (deep[2] - dry[2]) * th) * ds;\n      // A hairline crack opens where a crack runs, once that spot is dry.\n      const ck = crack[i];\n      if (ck > 0) {\n        const k = sm(0.6 + 1.4 * ck, 0.9 + 1.4 * ck, age - A0 - rank[i] * span - band);\n        const f = 0.55 * k;\n        (dr += (deep[0] * 0.7 - dr) * f), (dg += (deep[1] * 0.7 - dg) * f), (db += (deep[2] * 0.7 - db) * f);\n      }\n      const wr = wet[0] * shade, wg = wet[1] * shade, wb = wet[2] * shade;\n      const r = wr + (dr - wr) * lift + spec;\n      const gg = wg + (dg - wg) * lift + spec;\n      const b = wb + (db - wb) * lift + spec * 0.96;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower."},{"name":"Thickness","min":-1,"max":1,"about":"At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds."},{"name":"Gloss","min":-1,"max":1,"about":"Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch."}],"start":[0,2,0,0.06],"measures":{"motion":0.0642,"detail":0.0418,"edges":0.1071,"complexity":2.3182,"coverage":1,"colour":0.1574,"drift":0.2242},"knobResponse":[0.2918,0.1358,0.0941,0.1324]},{"slug":"cleansing-balm","title":"Cleansing Balm","family":"cosmetic","round":33,"note":"서리 낀 셔벗 밤이 무광으로 판을 채우고, 아래에서 올라오는 온기와 보이지 않는 손끝이 닿은 곳마다 밤이 녹아 맑은 광택 오일이 돼요. 오일은 흘러내려 바닥에 고이고, 다 녹으면 위에서 새 밤이 다시 휘핑돼요. K3 은 녹는 빠르기와 높이를 정하고, K1 을 누르면 손끝 하나가 지름 20 LED 를 한 번에 녹여요.","idea":"A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.","buttons":"K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.","code":"// ===== Patternflow pattern =====\n// Title:   Cleansing Balm\n// Family:  cosmetic\n// Idea:    A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a sherbet cleansing balm melting into oil\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1\n//\n// Knob 1: Hue. The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown.\n// Knob 2: Speed. At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower.\n// Knob 3: Warmth. How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s.\n// Knob 4: Grain. The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting.\n// Buttons: K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Pink sherbet at Hue 0.\nconst H0 = 0.95;\n// A melted LED gives REL of oil. A film FILM thick clings where it is; above\n// that the oil runs down, faster the thicker it is, and a cell holds at most\n// CAP, so the pool fills up from the bottom row.\nconst REL = 0.42, FILM = 0.07, CAP = 1, KFLOW = 9;\n\n// Smooth noise in a 128 x 128 tile, three octaves of 4, 8 and 16 cells.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = rnd() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The frost: a fine grain, one value per LED, and a coarse one, the same\n// values blurred over 3 x 3 LEDs and scaled back up, so its crystals are two\n// or three LEDs across. SPK picks the sparkling specks.\nconst GF = Float32Array.from({ length: N }, (_, i) => hash(i + 77) * 2 - 1);\nconst GC = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) s += GF[((y + dy + H) % H) * W + ((x + dx + W) % W)];\n    GC[y * W + x] = s / 3;\n  }\nconst SPK = Float32Array.from({ length: N }, (_, i) => hash(i + 991));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  buildTex();\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    Hb: F(N), mb: F(N), nz: F(N), Hn: F(N), mbN: F(N), nzN: F(N),\n    m: F(N), F: F(N), age: F(N), Ho: F(N), Hs: F(N), wo: F(N),\n    phase: 0, Yf: H + 10, Yl: -10, row: 0, hold: 0, T: 0, next: 1, fingers: [], dir: 1,\n    hue: 0, speed: 2, warm: 0, grain: 0.06, wm: 0, started: false, col: F(7 * 3), colHue: NaN,\n  };\n}\n\n// A fresh layer of balm. A soft whip of lumps, then fifteen spoon scoops, each\n// an oval hollow 15 to 25 LEDs long with faint rings where the spoon's edge\n// dragged and a lip of balm piled up at the end the spoon left by. nz is how\n// long each LED holds out against warmth, and mk is the sherbet's marbling.\nfunction lay(Hh, mk, nz) {\n  const ox = rnd() * T, oy = rnd() * T;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      Hh[i] = 0.3 * tap(x * 1.7 + ox, y * 1.7 + oy);\n      mk[i] = tap(x * 0.55 + oy, y * 0.38 + ox + 40);\n      nz[i] = 0.9 * tap(x * 2.6 + ox + 60, y * 2.6 + oy);\n    }\n  for (let k = 0; k \u003c 15; k++) {\n    const L = 15 + rnd() * 10, Wd = L * (0.5 + 0.15 * rnd()), a = rnd() * 2 * PI, ca = cos(a), sa = sin(a);\n    const cx = rnd() * W, cy = -6 + rnd() * (H + 12), E = L * 1.4;\n    for (let y = max(0, floor(cy - E)); y \u003c= min(H - 1, floor(cy + E)); y++)\n      for (let x = max(0, floor(cx - E)); x \u003c= min(W - 1, floor(cx + E)); x++) {\n        const dx = x + 0.5 - cx, dy = y + 0.5 - cy, u = (dx * ca + dy * sa) / L, v = (-dx * sa + dy * ca) / Wd;\n        const rho = sqrt(u * u + v * v);\n        if (rho > 1.4) continue;\n        const i = y * W + x, wgt = 1 - sm((rho - 0.82) / 0.3);\n        const dish = rho \u003c 1 ? -0.75 * (1 - rho * rho) + 0.025 * sin(rho * 19) : 0;\n        const lip = 0.55 * exp(-(((rho - 1.02) / 0.14) ** 2)) * (0.4 + 0.6 * sm((u + 1) / 2));\n        Hh[i] = Hh[i] * (1 - wgt) + dish * wgt + lip;\n      }\n  }\n}\n\n// A fingertip: it comes down at (x, y) and its warm print spreads to radius R\n// over `grow` seconds, melting what it covers.\nfunction finger(S, big) {\n  let x = 8 + rnd() * (W - 16), y = 0;\n  // Into the balm, above the front.\n  const hiY = min(H - 10, S.Yf - 14);\n  if (hiY > 12) y = 8 + rnd() * (hiY - 8);\n  else y = 10 + rnd() * (H - 20);\n  if (big) x = 14 + rnd() * (W - 28);\n  S.fingers.push({ x, y, R: big ? 10 : 6 + rnd() * 4 + 3 * S.warm, grow: big ? 0.25 : 0.8, t: 0, r: 0 });\n}\n\nfunction step(S, st) {\n  const { m, F, age, Hb, nz } = S;\n  S.T += st;\n  if (S.phase === 0) {\n    S.Yf -= st * (5 + 7 * S.warm);\n    S.next -= st;\n    if (S.next \u003c= 0) {\n      S.next = (3.2 - 1.8 * S.warm) * (0.7 + 0.6 * rnd());\n      finger(S, false);\n    }\n    if (S.Yf \u003c H - (0.57 + 0.5 * S.warm) * (H + 12)) {\n      S.phase = 1;\n      S.hold = 0;\n    }\n  } else if (S.phase === 1) {\n    S.hold += st;\n    if (S.hold > 1.5) {\n      // Whip a fresh layer on from the top.\n      S.phase = 2;\n      S.Yl = -6;\n      S.row = 0;\n      S.Yf = H + 1000;\n      lay(S.Hn, S.mbN, S.nzN);\n    }\n  } else {\n    S.Yl += st * 46;\n    const to = min(H, floor(S.Yl));\n    for (; S.row \u003c to; S.row++)\n      for (let x = 0, i = S.row * W; x \u003c W; x++, i++) {\n        Hb[i] = S.Hn[i];\n        S.mb[i] = S.mbN[i];\n        nz[i] = S.nzN[i];\n        m[i] = 0;\n        F[i] = 0;\n        age[i] = 0;\n      }\n    if (S.Yl > H + 8) {\n      S.phase = 0;\n      S.Yf = H + 10;\n      S.next = 0.6;\n      S.fingers.length = 0;\n    }\n  }\n  // The front: LEDs below it melt, ridges and the lumps of nz holding out a\n  // few rows longer, so it climbs ragged. Once an LED starts it melts through\n  // in about 0.4 s, and that band is the wet rim.\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const wf = (y - S.Yf) / 4;\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (m[i] >= 1) {\n        age[i] += st;\n        continue;\n      }\n      if (m[i] > 0 || wf > 0.9 * Hb[i] + nz[i]) {\n        const dm = min(1 - m[i], st * 2.4);\n        m[i] += dm;\n        F[i] += dm * REL;\n      }\n    }\n  }\n  const fs = S.fingers;\n  for (let k = fs.length - 1; k >= 0; k--) {\n    const f = fs[k];\n    f.t += st;\n    f.r = f.R * sm(f.t / f.grow);\n    const E = f.R + 3;\n    for (let y = max(0, floor(f.y - E)); y \u003c= min(H - 1, floor(f.y + E)); y++)\n      for (let x = max(0, floor(f.x - E)); x \u003c= min(W - 1, floor(f.x + E)); x++) {\n        const i = y * W + x;\n        if (m[i] > 0) continue;\n        const d = Math.hypot(x + 0.5 - f.x, y + 0.5 - f.y);\n        if (d \u003c f.r - 1.5 * (0.9 * Hb[i] + nz[i])) m[i] = 0.01;\n      }\n    if (f.t > f.grow + 0.5) fs.splice(k, 1);\n  }\n  // The oil runs down a row at a time, bottom row first so nothing moves two\n  // rows in one step.\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      // Unmelted balm soaks up a little, so oil only trickles over it.\n      const mob = F[i] - (m[i] > 0 ? FILM : 0.22);\n      if (mob \u003c= 0) continue;\n      const j = i + W;\n      let fl = min(mob, st * KFLOW * mob * (0.25 + F[i]));\n      fl = min(fl, CAP - F[j]);\n      if (fl \u003c= 0) continue;\n      F[i] -= fl;\n      F[j] += fl;\n    }\n  // The oil levels out sideways, quickly where it is deep, so the pool's top\n  // is flat and a film does not keep the stripes it ran down in.\n  S.dir = -S.dir;\n  for (let y = 0; y \u003c H; y++) {\n    const r0 = y * W;\n    for (let n = 0; n \u003c W - 1; n++) {\n      const x = S.dir > 0 ? n : W - 2 - n, i = r0 + x, d = F[i] - F[i + 1];\n      if (F[i] \u003c FILM && F[i + 1] \u003c FILM) continue;\n      const mv = d * (F[i] > 0.3 || F[i + 1] > 0.3 ? 0.35 : 0.15);\n      F[i] -= mv;\n      F[i + 1] += mv;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.warm = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    lay(S.Hb, S.mb, S.nz);\n    // Open with the bottom fifth already melted and a fingertip or two in.\n    S.Yf = H - 12;\n    S.next = 0.3;\n    for (let i = 0; i \u003c 70; i++) step(S, 1 / 20);\n  }\n  if (input.btnPressed && input.btnPressed[0]) finger(S, true);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours: the sherbet, its creamy marbling, the glow under the oil, the\n// oil's own tint, the wet rim and the frost's specks.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0, hf = h - floor(h);\n  // Orange and gold go brown at middle light on the LEDs, so round them\n  // everything is lifted and paled: apricot, peach and butter.\n  const dw = abs(hf - 0.13), wm = sm(1.5 - min(dw, 1 - dw) / 0.12);\n  hsv(h, 0.44 - 0.14 * wm, 0.98, c, 0);\n  hsv(h - 0.015, 0.22 - 0.06 * wm, 1, c, 3);\n  hsv(h - 0.02, 0.32 - 0.1 * wm, 1, c, 6);\n  hsv(h + 0.015, 0.78 - 0.38 * wm, 0.62 + 0.36 * wm, c, 9);\n  hsv(h, 0.22, 1, c, 12);\n  hsv(h + 0.05, 0.08, 1, c, 15);\n  S.wm = wm;\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.colHue !== S.hue) palette(S);\n  const { Hb, mb, m, F, age, Ho, Hs, col } = S, t = S.T;\n  // How much of each LED is oil: all of it once melted, and a wet film\n  // where oil runs down over balm that has not melted yet.\n  const wo = S.wo;\n  for (let i = 0; i \u003c N; i++) wo[i] = max(m[i], 0.7 * sm((F[i] - 0.12) / 0.3));\n  // The oil's surface: what is left of the balm's shape as it slumps flat in\n  // the two seconds after melting, the oil's own depth, and slow ripples\n  // carried down the panel at about 6 LEDs a second, then softened over\n  // 3 x 3 LEDs so the oil has no grain at all.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (wo[i] \u003c= 0) {\n        Ho[i] = Hb[i] * 0.7;\n        continue;\n      }\n      const sl = m[i] > 0 ? max(0, 1 - age[i] / 2) : 1, f = min(F[i], 1.2);\n      Ho[i] = 0.7 * Hb[i] * sl + 1.2 * f + 0.35 * tap(x * 1.1 + 20, y * 0.7 - t * 5) * (0.4 + f);\n    }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Hs[i] = (Ho[i - (x > 0 ? 1 : 0)] + 2 * Ho[i] + Ho[i + (x \u003c W - 1 ? 1 : 0)]) * 0.25;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Ho[i] = (Hs[i - (y > 0 ? W : 0)] + 2 * Hs[i] + Hs[i + (y \u003c H - 1 ? W : 0)]) * 0.25;\n  const g = S.grain, gA = 0.04 + 0.17 * g, spD = 0.03 + 0.09 * g, spV = 0.09 + 0.08 * g, lumps = 1 + 0.35 * g;\n  // A small light 60 degrees off the face of the panel wanders round the top\n  // left, so flat oil never catches it and only the slopes of ripples,\n  // slumping lumps and the pool's edge glint. Two long reflections of strip\n  // lights sweep across the oil and back every 18 s at Speed 2.\n  const az = -2.2 + 0.7 * sin(t * 0.37), lx = 0.866 * cos(az), ly = 0.866 * sin(az), lz = 0.5;\n  const hx0 = lx, hy0 = ly, hz0 = lz + 1, hl = Math.hypot(hx0, hy0, hz0);\n  const hx = hx0 / hl, hy = hy0 / hl, hz = hz0 / hl;\n  const band = 1.1 * sin(t * 0.35), band2 = band + (band > 0 ? -1.4 : 1.4);\n  // Warm oil at middle light is brown, so round orange and gold the oil\n  // glows brighter and turns to honey.\n  const lift = 1 + 0.32 * S.wm, tk = 0.85 + 0.25 * S.wm;\n  // The edge of a fresh layer being whipped on stands up as a rolled ridge.\n  const whip = S.phase === 2, Yl = S.Yl;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0;\n    const roll = whip ? 0.9 * exp(-(((y - Yl + 2.5) / 2.6) ** 2)) : 0, rollU = whip ? 0.9 * exp(-(((y - 1 - Yl + 2.5) / 2.6) ** 2)) : 0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const lf = x > 0 ? -1 : 0, rt = x \u003c W - 1 ? 1 : 0;\n      const mm = m[i], w = wo[i];\n      let r = 0, gg = 0, b = 0;\n      if (mm \u003c 1) {\n        // Matte balm: soft light from the top left, a little darker deep in\n        // the hollows, the marbling between sherbet and cream, and frost.\n        const ddx = (Hb[i + rt] - Hb[i + lf]) * 2.2 * lumps, ddy = (Hb[i + dn] - Hb[i + up]) * 2.2 * lumps + (roll - rollU) * 3;\n        const dif = (0.45 * ddx + 0.62 * ddy + 0.64) / sqrt(ddx * ddx + ddy * ddy + 1);\n        const sh = 0.8 + 0.22 * dif + 0.05 * cl(Hb[i] + roll, -0.8, 0.6);\n        const mk = sm(0.5 + 1.2 * sin(mb[i] * 11 + 0.8));\n        const f = sh * (1 + gA * (GF[i] * (1 - g) + GC[i] * g));\n        const sp = SPK[i] > 1 - spD ? spV : 0;\n        r = (col[0] + (col[3] - col[0]) * mk) * f + sp;\n        gg = (col[1] + (col[4] - col[1]) * mk) * f + sp;\n        b = (col[2] + (col[5] - col[2]) * mk) * f + sp;\n      }\n      if (w > 0) {\n        // Oil: the glow under it seen through a tint that deepens with the\n        // oil's depth, a sharp highlight from the small light, and the strip\n        // light's long reflection.\n        const nx = -(Ho[i + rt] - Ho[i + lf]) * 3.5, ny = -(Ho[i + dn] - Ho[i + up]) * 3.5, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        const nd = (nx * hx + ny * hy + hz) * nl;\n        const spec = nd > 0.9 ? ((nd - 0.9) / 0.1) ** 2 : 0;\n        const e = 2 * nl * (nx * 0.5 + ny * 0.85) * nl + (x - 32) / 90 + (y - 64) / 70, q = (e - band) / 0.14, q2 = (e - band2) / 0.1;\n        const s = min(1, spec) + 0.42 * exp(-q * q) + 0.28 * exp(-q2 * q2);\n        const dep = 0.3 + F[i], a = 1 - exp(-1.1 * dep);\n        const glow = (0.55 + 0.3 * tap(x * 0.6 + 70, y * 0.4 - t * 1.5)) * lift;\n        const orr = col[6] * glow * (1 - a) + col[9] * a * tk + s;\n        const og = col[7] * glow * (1 - a) + col[10] * a * tk + s;\n        const ob = col[8] * glow * (1 - a) + col[11] * a * tk + s;\n        r = r * (1 - w) + orr * w;\n        gg = gg * (1 - w) + og * w;\n        b = b * (1 - w) + ob * w;\n        // The wet rim: the band where the balm is turning, and the oil's\n        // edge against balm, a pale glassy line with a glint.\n        let rim = mm > 0 && mm \u003c 1 ? 4 * mm * (1 - mm) : 0;\n        if (mm >= 1 && (m[i + lf] \u003c 0.5 || m[i + rt] \u003c 0.5 || m[i + up] \u003c 0.5 || m[i + dn] \u003c 0.5)) rim = 0.8;\n        if (rim > 0) {\n          const k = 0.45 * rim;\n          r += (col[12] - r) * k + 0.1 * rim;\n          gg += (col[13] - gg) * k + 0.1 * rim;\n          b += (col[14] - b) * k + 0.1 * rim;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-cleansing-balm","type":"code","name":"cleansing-balm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cleansing Balm\n// Family:  cosmetic\n// Idea:    A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a sherbet cleansing balm melting into oil\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1\n//\n// Knob 1: Hue. The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown.\n// Knob 2: Speed. At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower.\n// Knob 3: Warmth. How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s.\n// Knob 4: Grain. The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting.\n// Buttons: K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Pink sherbet at Hue 0.\nconst H0 = 0.95;\n// A melted LED gives REL of oil. A film FILM thick clings where it is; above\n// that the oil runs down, faster the thicker it is, and a cell holds at most\n// CAP, so the pool fills up from the bottom row.\nconst REL = 0.42, FILM = 0.07, CAP = 1, KFLOW = 9;\n\n// Smooth noise in a 128 x 128 tile, three octaves of 4, 8 and 16 cells.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = rnd() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The frost: a fine grain, one value per LED, and a coarse one, the same\n// values blurred over 3 x 3 LEDs and scaled back up, so its crystals are two\n// or three LEDs across. SPK picks the sparkling specks.\nconst GF = Float32Array.from({ length: N }, (_, i) => hash(i + 77) * 2 - 1);\nconst GC = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) s += GF[((y + dy + H) % H) * W + ((x + dx + W) % W)];\n    GC[y * W + x] = s / 3;\n  }\nconst SPK = Float32Array.from({ length: N }, (_, i) => hash(i + 991));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  buildTex();\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    Hb: F(N), mb: F(N), nz: F(N), Hn: F(N), mbN: F(N), nzN: F(N),\n    m: F(N), F: F(N), age: F(N), Ho: F(N), Hs: F(N), wo: F(N),\n    phase: 0, Yf: H + 10, Yl: -10, row: 0, hold: 0, T: 0, next: 1, fingers: [], dir: 1,\n    hue: 0, speed: 2, warm: 0, grain: 0.06, wm: 0, started: false, col: F(7 * 3), colHue: NaN,\n  };\n}\n\n// A fresh layer of balm. A soft whip of lumps, then fifteen spoon scoops, each\n// an oval hollow 15 to 25 LEDs long with faint rings where the spoon's edge\n// dragged and a lip of balm piled up at the end the spoon left by. nz is how\n// long each LED holds out against warmth, and mk is the sherbet's marbling.\nfunction lay(Hh, mk, nz) {\n  const ox = rnd() * T, oy = rnd() * T;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      Hh[i] = 0.3 * tap(x * 1.7 + ox, y * 1.7 + oy);\n      mk[i] = tap(x * 0.55 + oy, y * 0.38 + ox + 40);\n      nz[i] = 0.9 * tap(x * 2.6 + ox + 60, y * 2.6 + oy);\n    }\n  for (let k = 0; k \u003c 15; k++) {\n    const L = 15 + rnd() * 10, Wd = L * (0.5 + 0.15 * rnd()), a = rnd() * 2 * PI, ca = cos(a), sa = sin(a);\n    const cx = rnd() * W, cy = -6 + rnd() * (H + 12), E = L * 1.4;\n    for (let y = max(0, floor(cy - E)); y \u003c= min(H - 1, floor(cy + E)); y++)\n      for (let x = max(0, floor(cx - E)); x \u003c= min(W - 1, floor(cx + E)); x++) {\n        const dx = x + 0.5 - cx, dy = y + 0.5 - cy, u = (dx * ca + dy * sa) / L, v = (-dx * sa + dy * ca) / Wd;\n        const rho = sqrt(u * u + v * v);\n        if (rho > 1.4) continue;\n        const i = y * W + x, wgt = 1 - sm((rho - 0.82) / 0.3);\n        const dish = rho \u003c 1 ? -0.75 * (1 - rho * rho) + 0.025 * sin(rho * 19) : 0;\n        const lip = 0.55 * exp(-(((rho - 1.02) / 0.14) ** 2)) * (0.4 + 0.6 * sm((u + 1) / 2));\n        Hh[i] = Hh[i] * (1 - wgt) + dish * wgt + lip;\n      }\n  }\n}\n\n// A fingertip: it comes down at (x, y) and its warm print spreads to radius R\n// over `grow` seconds, melting what it covers.\nfunction finger(S, big) {\n  let x = 8 + rnd() * (W - 16), y = 0;\n  // Into the balm, above the front.\n  const hiY = min(H - 10, S.Yf - 14);\n  if (hiY > 12) y = 8 + rnd() * (hiY - 8);\n  else y = 10 + rnd() * (H - 20);\n  if (big) x = 14 + rnd() * (W - 28);\n  S.fingers.push({ x, y, R: big ? 10 : 6 + rnd() * 4 + 3 * S.warm, grow: big ? 0.25 : 0.8, t: 0, r: 0 });\n}\n\nfunction step(S, st) {\n  const { m, F, age, Hb, nz } = S;\n  S.T += st;\n  if (S.phase === 0) {\n    S.Yf -= st * (5 + 7 * S.warm);\n    S.next -= st;\n    if (S.next \u003c= 0) {\n      S.next = (3.2 - 1.8 * S.warm) * (0.7 + 0.6 * rnd());\n      finger(S, false);\n    }\n    if (S.Yf \u003c H - (0.57 + 0.5 * S.warm) * (H + 12)) {\n      S.phase = 1;\n      S.hold = 0;\n    }\n  } else if (S.phase === 1) {\n    S.hold += st;\n    if (S.hold > 1.5) {\n      // Whip a fresh layer on from the top.\n      S.phase = 2;\n      S.Yl = -6;\n      S.row = 0;\n      S.Yf = H + 1000;\n      lay(S.Hn, S.mbN, S.nzN);\n    }\n  } else {\n    S.Yl += st * 46;\n    const to = min(H, floor(S.Yl));\n    for (; S.row \u003c to; S.row++)\n      for (let x = 0, i = S.row * W; x \u003c W; x++, i++) {\n        Hb[i] = S.Hn[i];\n        S.mb[i] = S.mbN[i];\n        nz[i] = S.nzN[i];\n        m[i] = 0;\n        F[i] = 0;\n        age[i] = 0;\n      }\n    if (S.Yl > H + 8) {\n      S.phase = 0;\n      S.Yf = H + 10;\n      S.next = 0.6;\n      S.fingers.length = 0;\n    }\n  }\n  // The front: LEDs below it melt, ridges and the lumps of nz holding out a\n  // few rows longer, so it climbs ragged. Once an LED starts it melts through\n  // in about 0.4 s, and that band is the wet rim.\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const wf = (y - S.Yf) / 4;\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (m[i] >= 1) {\n        age[i] += st;\n        continue;\n      }\n      if (m[i] > 0 || wf > 0.9 * Hb[i] + nz[i]) {\n        const dm = min(1 - m[i], st * 2.4);\n        m[i] += dm;\n        F[i] += dm * REL;\n      }\n    }\n  }\n  const fs = S.fingers;\n  for (let k = fs.length - 1; k >= 0; k--) {\n    const f = fs[k];\n    f.t += st;\n    f.r = f.R * sm(f.t / f.grow);\n    const E = f.R + 3;\n    for (let y = max(0, floor(f.y - E)); y \u003c= min(H - 1, floor(f.y + E)); y++)\n      for (let x = max(0, floor(f.x - E)); x \u003c= min(W - 1, floor(f.x + E)); x++) {\n        const i = y * W + x;\n        if (m[i] > 0) continue;\n        const d = Math.hypot(x + 0.5 - f.x, y + 0.5 - f.y);\n        if (d \u003c f.r - 1.5 * (0.9 * Hb[i] + nz[i])) m[i] = 0.01;\n      }\n    if (f.t > f.grow + 0.5) fs.splice(k, 1);\n  }\n  // The oil runs down a row at a time, bottom row first so nothing moves two\n  // rows in one step.\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      // Unmelted balm soaks up a little, so oil only trickles over it.\n      const mob = F[i] - (m[i] > 0 ? FILM : 0.22);\n      if (mob \u003c= 0) continue;\n      const j = i + W;\n      let fl = min(mob, st * KFLOW * mob * (0.25 + F[i]));\n      fl = min(fl, CAP - F[j]);\n      if (fl \u003c= 0) continue;\n      F[i] -= fl;\n      F[j] += fl;\n    }\n  // The oil levels out sideways, quickly where it is deep, so the pool's top\n  // is flat and a film does not keep the stripes it ran down in.\n  S.dir = -S.dir;\n  for (let y = 0; y \u003c H; y++) {\n    const r0 = y * W;\n    for (let n = 0; n \u003c W - 1; n++) {\n      const x = S.dir > 0 ? n : W - 2 - n, i = r0 + x, d = F[i] - F[i + 1];\n      if (F[i] \u003c FILM && F[i + 1] \u003c FILM) continue;\n      const mv = d * (F[i] > 0.3 || F[i + 1] > 0.3 ? 0.35 : 0.15);\n      F[i] -= mv;\n      F[i + 1] += mv;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.warm = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    lay(S.Hb, S.mb, S.nz);\n    // Open with the bottom fifth already melted and a fingertip or two in.\n    S.Yf = H - 12;\n    S.next = 0.3;\n    for (let i = 0; i \u003c 70; i++) step(S, 1 / 20);\n  }\n  if (input.btnPressed && input.btnPressed[0]) finger(S, true);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours: the sherbet, its creamy marbling, the glow under the oil, the\n// oil's own tint, the wet rim and the frost's specks.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0, hf = h - floor(h);\n  // Orange and gold go brown at middle light on the LEDs, so round them\n  // everything is lifted and paled: apricot, peach and butter.\n  const dw = abs(hf - 0.13), wm = sm(1.5 - min(dw, 1 - dw) / 0.12);\n  hsv(h, 0.44 - 0.14 * wm, 0.98, c, 0);\n  hsv(h - 0.015, 0.22 - 0.06 * wm, 1, c, 3);\n  hsv(h - 0.02, 0.32 - 0.1 * wm, 1, c, 6);\n  hsv(h + 0.015, 0.78 - 0.38 * wm, 0.62 + 0.36 * wm, c, 9);\n  hsv(h, 0.22, 1, c, 12);\n  hsv(h + 0.05, 0.08, 1, c, 15);\n  S.wm = wm;\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.colHue !== S.hue) palette(S);\n  const { Hb, mb, m, F, age, Ho, Hs, col } = S, t = S.T;\n  // How much of each LED is oil: all of it once melted, and a wet film\n  // where oil runs down over balm that has not melted yet.\n  const wo = S.wo;\n  for (let i = 0; i \u003c N; i++) wo[i] = max(m[i], 0.7 * sm((F[i] - 0.12) / 0.3));\n  // The oil's surface: what is left of the balm's shape as it slumps flat in\n  // the two seconds after melting, the oil's own depth, and slow ripples\n  // carried down the panel at about 6 LEDs a second, then softened over\n  // 3 x 3 LEDs so the oil has no grain at all.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (wo[i] \u003c= 0) {\n        Ho[i] = Hb[i] * 0.7;\n        continue;\n      }\n      const sl = m[i] > 0 ? max(0, 1 - age[i] / 2) : 1, f = min(F[i], 1.2);\n      Ho[i] = 0.7 * Hb[i] * sl + 1.2 * f + 0.35 * tap(x * 1.1 + 20, y * 0.7 - t * 5) * (0.4 + f);\n    }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Hs[i] = (Ho[i - (x > 0 ? 1 : 0)] + 2 * Ho[i] + Ho[i + (x \u003c W - 1 ? 1 : 0)]) * 0.25;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Ho[i] = (Hs[i - (y > 0 ? W : 0)] + 2 * Hs[i] + Hs[i + (y \u003c H - 1 ? W : 0)]) * 0.25;\n  const g = S.grain, gA = 0.04 + 0.17 * g, spD = 0.03 + 0.09 * g, spV = 0.09 + 0.08 * g, lumps = 1 + 0.35 * g;\n  // A small light 60 degrees off the face of the panel wanders round the top\n  // left, so flat oil never catches it and only the slopes of ripples,\n  // slumping lumps and the pool's edge glint. Two long reflections of strip\n  // lights sweep across the oil and back every 18 s at Speed 2.\n  const az = -2.2 + 0.7 * sin(t * 0.37), lx = 0.866 * cos(az), ly = 0.866 * sin(az), lz = 0.5;\n  const hx0 = lx, hy0 = ly, hz0 = lz + 1, hl = Math.hypot(hx0, hy0, hz0);\n  const hx = hx0 / hl, hy = hy0 / hl, hz = hz0 / hl;\n  const band = 1.1 * sin(t * 0.35), band2 = band + (band > 0 ? -1.4 : 1.4);\n  // Warm oil at middle light is brown, so round orange and gold the oil\n  // glows brighter and turns to honey.\n  const lift = 1 + 0.32 * S.wm, tk = 0.85 + 0.25 * S.wm;\n  // The edge of a fresh layer being whipped on stands up as a rolled ridge.\n  const whip = S.phase === 2, Yl = S.Yl;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0;\n    const roll = whip ? 0.9 * exp(-(((y - Yl + 2.5) / 2.6) ** 2)) : 0, rollU = whip ? 0.9 * exp(-(((y - 1 - Yl + 2.5) / 2.6) ** 2)) : 0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const lf = x > 0 ? -1 : 0, rt = x \u003c W - 1 ? 1 : 0;\n      const mm = m[i], w = wo[i];\n      let r = 0, gg = 0, b = 0;\n      if (mm \u003c 1) {\n        // Matte balm: soft light from the top left, a little darker deep in\n        // the hollows, the marbling between sherbet and cream, and frost.\n        const ddx = (Hb[i + rt] - Hb[i + lf]) * 2.2 * lumps, ddy = (Hb[i + dn] - Hb[i + up]) * 2.2 * lumps + (roll - rollU) * 3;\n        const dif = (0.45 * ddx + 0.62 * ddy + 0.64) / sqrt(ddx * ddx + ddy * ddy + 1);\n        const sh = 0.8 + 0.22 * dif + 0.05 * cl(Hb[i] + roll, -0.8, 0.6);\n        const mk = sm(0.5 + 1.2 * sin(mb[i] * 11 + 0.8));\n        const f = sh * (1 + gA * (GF[i] * (1 - g) + GC[i] * g));\n        const sp = SPK[i] > 1 - spD ? spV : 0;\n        r = (col[0] + (col[3] - col[0]) * mk) * f + sp;\n        gg = (col[1] + (col[4] - col[1]) * mk) * f + sp;\n        b = (col[2] + (col[5] - col[2]) * mk) * f + sp;\n      }\n      if (w > 0) {\n        // Oil: the glow under it seen through a tint that deepens with the\n        // oil's depth, a sharp highlight from the small light, and the strip\n        // light's long reflection.\n        const nx = -(Ho[i + rt] - Ho[i + lf]) * 3.5, ny = -(Ho[i + dn] - Ho[i + up]) * 3.5, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        const nd = (nx * hx + ny * hy + hz) * nl;\n        const spec = nd > 0.9 ? ((nd - 0.9) / 0.1) ** 2 : 0;\n        const e = 2 * nl * (nx * 0.5 + ny * 0.85) * nl + (x - 32) / 90 + (y - 64) / 70, q = (e - band) / 0.14, q2 = (e - band2) / 0.1;\n        const s = min(1, spec) + 0.42 * exp(-q * q) + 0.28 * exp(-q2 * q2);\n        const dep = 0.3 + F[i], a = 1 - exp(-1.1 * dep);\n        const glow = (0.55 + 0.3 * tap(x * 0.6 + 70, y * 0.4 - t * 1.5)) * lift;\n        const orr = col[6] * glow * (1 - a) + col[9] * a * tk + s;\n        const og = col[7] * glow * (1 - a) + col[10] * a * tk + s;\n        const ob = col[8] * glow * (1 - a) + col[11] * a * tk + s;\n        r = r * (1 - w) + orr * w;\n        gg = gg * (1 - w) + og * w;\n        b = b * (1 - w) + ob * w;\n        // The wet rim: the band where the balm is turning, and the oil's\n        // edge against balm, a pale glassy line with a glint.\n        let rim = mm > 0 && mm \u003c 1 ? 4 * mm * (1 - mm) : 0;\n        if (mm >= 1 && (m[i + lf] \u003c 0.5 || m[i + rt] \u003c 0.5 || m[i + up] \u003c 0.5 || m[i + dn] \u003c 0.5)) rim = 0.8;\n        if (rim > 0) {\n          const k = 0.45 * rim;\n          r += (col[12] - r) * k + 0.1 * rim;\n          gg += (col[13] - gg) * k + 0.1 * rim;\n          b += (col[14] - b) * k + 0.1 * rim;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower."},{"name":"Warmth","min":0,"max":1,"about":"How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s."},{"name":"Grain","min":0,"max":1,"about":"The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting."}],"start":[0,2,0,0.06],"measures":{"motion":0.1343,"detail":0.0375,"edges":0.1005,"complexity":2.1868,"coverage":1,"colour":0.1701,"drift":0.1197},"knobResponse":[0.2675,0.0873,0.1368,0.0422]},{"slug":"climber","title":"Climber","family":"pixel","round":2,"note":"빨간 목도리를 맨 꼬마가 혼자서 끝없는 탑의 턱을 뛰어올라요. K4 를 돌리면 한낮에서 노을을 지나 횃불 켜진 밤이 돼요.","idea":"A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.","buttons":"K1 tap makes the climber jump now, and again in the air.","code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","layer":{"id":"layer-climber","type":"code","name":"climber","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The stone of the tower and its ledges; the climber keeps its own colours."},{"name":"Speed","min":0.3,"max":3.5,"about":"How fast the climber runs and jumps, and with it how fast the tower goes by."},{"name":"Gap","min":16,"max":34,"about":"How far apart the ledges are, from quick hops to long leaps with the climber high in the air."},{"name":"Sky","min":0,"max":1,"about":"The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit."}],"start":[0,2,16,0.06],"measures":{"motion":1.5193,"detail":0.0867,"edges":0.9308,"complexity":0.2662,"coverage":0.7278,"colour":0.1488,"drift":0.118},"knobResponse":[0.0827,0.1542,0.146,0.1338]},{"slug":"climbing-wall","title":"Climbing Wall","family":"sport","round":27,"note":"체육관의 리드 벽을 정면에서 봐요. 합판에 색깔별 루트가 박혀 있고, 클라이머가 스폿 빛을 받으며 손발을 하나씩 옮겨 오르다 퀵드로마다 로프를 걸어요. 꼭대기 앵커를 걸면 빌레이어가 내려 주고 둘이 자리를 바꿔요. K3 은 셋까지 나란히 오르게 하고, 누르면 클라이머가 떨어져 로프에 걸려요.","idea":"A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.","buttons":"K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.","code":"// ===== Patternflow pattern =====\n// Title:   Climbing Wall\n// Family:  sport\n// Idea:    A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after an indoor lead-climbing wall\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1\n//\n// Knob 1: Route. The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour.\n// Knob 2: Speed. At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall.\n// Knob 3: Climbers. One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour.\n// Knob 4: Light. House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes.\n// Buttons: K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.\n\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (u) => ((u = cl(u, 0, 1)), u * u * (3 - 2 * u));\nconst hyp = (x, y) => sqrt(x * x + y * y), F32 = (n) => new Float32Array(n);\nconst hex = (h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));\nconst blend = (o, c, k, a) => {\n  for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] * k - F[o + j]) * a;\n};\nconst hash = (i, j) => ((Math.imul(i * 7919 + j * 104729 + 17, 2654435761) >>> 8) & 1023) / 1024;\n\n// Rows of the mat and the kickboard. Each lane's bolt line LX: eight quickdraws\n// (the rope runs CLP under the bolt) and a lower-off ring.\nconst FL = 121, FT = FL - 0.5, KICK = 117, LX = [11, 32, 53], BOLT = [95, 84, 73, 62, 51, 40, 29, 18], CLP = 3.5, RING = 11;\n// A route: NH hand holds HS rows apart, left and right in turn, a foot chip\n// CHIP rows under each. A lane has two routes, one each side of its bolts.\nconst NH = 20, HY0 = 105, HS = 5, CHIP = 15;\n// The body in LEDs: arm, forearm, thigh, shin, hip to shoulders; hips standing.\nconst UA = 4.1, FA = 4.1, TH = 4.8, SN = 4.8, TOR = 6, STAND = FL - 10.05;\n// Route colours in Route's order with the lane and side each is set on.\nconst RC = \"3ceb6e ffd41e 288cff ff46aa ff7614 af5fff\".split(\" \").map(hex);\nconst RL = [1, 2, 0, 1, 2, 0], RS = [-1, -1, -1, 1, 1, 1], ROUTE = [[2, 5], [0, 3], [1, 4]];\nconst rcx = (r) => LX[RL[r]] + 0.5 + RS[r] * 5;\nconst lane = (P) => LX[P.l] + 0.5, bxOf = (P) => lane(P) - RS[P.r] * 3.5;\n// A rope a lane, two people a party: skin, hair, top, tights, harness, shoes,\n// chalk bag, 1 for a ponytail.\nconst ROPE = \"46d7ff ff7828 beff46\".split(\" \").map(hex);\nconst OUT = [\n  \"ecac84 c86032 ff6054 968cc4 ffc81e 8246d2 e6283c 1\", \"c88c64 ebc878 f5f5f0 3c60b4 96e628 f05a28 2878e6 0\",\n  \"ecb088 60301a 1ec8cd acb2c4 ff4696 464650 fad228 1\", \"a06e50 bebec4 facd32 466ed2 e63278 3c8cf0 3cb450 0\",\n  \"ecac84 f0dcaa 965ff0 c8c8ce ffc81e 288cf0 f0f0f0 1\", \"be825f 281e1a 46c864 a03c54 ff5a28 ebebeb c83cc8 0\",\n].map((s) => s.split(\" \").map((h, i) => (i \u003c 7 ? hex(h) : +h)));\n\n// The wall is built once, with the house light on it in L0.\nconst AL = F32(N * 3), EM = F32(N * 3), L0 = F32(N), MK = new Uint8Array(N);\nconst HX = F32(6 * NH), HY = F32(6 * NH), CX = F32(6 * NH), CY = F32(6 * NH);\n// Jug, crimp, sloper, pinch, big jug: LEDs as digit pairs, column + 2, row + 1.\nconst SHAPES = [\"112131122232\", \"112131\", \"2011213122\", \"203021312232\", \"1020300111213141122232\"];\n// Volumes, pyramids on a diamond: middle, half width, half height, colour.\nconst VOL = [[21.5, 46, 4.5, 7, \"9698a2\"], [43, 84, 4.5, 6.5, \"3c969c\"], [21.5, 100, 4, 5, \"c49664\"], [43, 26, 4, 6, \"d6d6dc\"], [1, 70, 3.5, 8, \"785496\"], [63, 52, 3.5, 7, \"9698a2\"]];\nconst STEEL = \"bebec8 ece8de dcd8d0 aab0bc\".split(\" \").map(hex);\n// Colour c times k on the wall, e of it glowing under UV.\nfunction px(x, y, c, k, e) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) (AL[o + j] = min(255, c[j] * k)), (EM[o + j] = AL[o + j] * e);\n  MK[y * W + x] = 1;\n}\nfunction shade(x, y, k) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL || MK[y * W + x]) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) AL[o + c] *= k;\n}\n// A hold, lit from above, and its shadow.\nfunction hold(x, y, t, c) {\n  const S = SHAPES[t];\n  for (let j = 0; j \u003c S.length; j += 2) shade(x + +S[j] - 2, y + +S[j + 1], 0.5), shade(x + +S[j] - 1, y + +S[j + 1], 0.72);\n  for (let j = 0; j \u003c S.length; j += 2) px(x + +S[j] - 2, y + +S[j + 1] - 1, c, [1.22, 1.08, 0.78][S[j + 1]] - 0.06 * (S[j] - 2), 0.55);\n}\n(function build() {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3;\n      let r, g, b, L = 0.85, e = 0;\n      if (y \u003c 4) {\n        // The ceiling: a truss, a lamp over each lane that is also a UV tube.\n        r = g = b = y === 1 ? ((x + 1) % 6 \u003c 2 ? 56 : 32) : y ? 9 : 14;\n        for (const l of LX) if ((y === 2 && abs(x - l) \u003c 2) || (y === 3 && x === l)) (e = x === l ? 1 : 0.6), (r = 255 * e), (g = 238 * e), (b = 210 * e);\n        (L = 1.47), (EM[o] = 175 * e), (EM[o + 1] = 100 * e), (EM[o + 2] = 255 * e);\n      } else if (y \u003c FL) {\n        // Plywood sheets 12 by 23, grain running up them. Seams and T-nuts darken it.\n        const qx = floor((x + 6) / 12), qy = floor((y - 4) / 23);\n        let k = (0.86 + 0.18 * hash(qx + 3, qy + 7)) * (0.9 + 0.14 * hash(x, qy) * (0.6 + 0.4 * sin(y * 0.2 + x)));\n        if ((x + 6) % 12 === 0 || (y - 4) % 23 === 22) k *= 0.62;\n        if (y % 4 === 1 && (x + (y >> 2) * 2) % 4 === 0) k *= 0.84;\n        if (y >= KICK) (k = y === KICK ? 0.7 : 1), (r = 50 * k), (g = 50 * k), (b = 56 * k);\n        else (r = 132 * k), (g = 101 * k), (b = 70 * k);\n        // Lamp light fanning down from the top, a wash over the floor.\n        L = 0.62 + 0.4 * ease((y - 86) / 34);\n        for (const l of LX) L += 0.95 * exp(-(((x - l) / (1.5 + 0.28 * y)) ** 2) - (y - 4) / 34) * ease((y - 3) / 6);\n      } else {\n        // Blue foam mats with seams; the front lip catches the light.\n        const k = (x % 16 === 7 ? 0.6 : 1) * (y === FL ? 1.35 : 0.88 + 0.03 * (y - FL));\n        (r = 34 * k), (g = 62 * k), (b = 140 * k);\n      }\n      (AL[o] = r), (AL[o + 1] = g), (AL[o + 2] = b), (L0[i] = L);\n    }\n  for (const [cx, cy, w, h, c] of VOL)\n    for (let y = floor(cy - h); y \u003c= cy + h; y++)\n      for (let x = floor(cx - w); x \u003c= cx + w; x++) {\n        const dx = (x + 0.5 - cx) / w, dy = (y + 0.5 - cy) / h;\n        if (abs(dx) + abs(dy) \u003c= 1) px(x, y, hex(c), (dy \u003c 0 ? 1.1 : 0.62) + (dx \u003c 0 ? 0.08 : -0.12), 0.08);\n      }\n  for (let y = FL - 1; y > 4; y--) for (let x = 0; x \u003c W; x++) if (MK[(y - 1) * W + x] && !MK[y * W + x]) shade(x, y, 0.55);\n  MK.fill(0);\n  for (let k = 0; k \u003c 6 * NH; k++) {\n    const r = floor(k / NH), i = k % NH, s = i & 1 ? 1 : -1, c = RC[r];\n    HX[k] = round(rcx(r) - 0.5 + s * (s === RS[r] ? 3.4 + 1.2 * hash(r, i) : 3 + 0.5 * hash(r, i)));\n    HY[k] = round(HY0 - HS * i + (hash(r + 5, i) - 0.5) * 1.6);\n    (CX[k] = round(HX[k] + s * 0.6 - 0.5)), (CY[k] = HY[k] + CHIP);\n    // The two start holds are taped.\n    hold(HX[k], HY[k], i \u003c 2 ? 0 : i === NH - 1 ? 4 : floor(hash(k, 11) * 5), c);\n    if (i \u003c 2) for (let j = 2; j \u003c 4; j++) px(HX[k] + s * j, HY[k] + j - 1, c, 0.8, 0.5);\n  }\n  // Quickdraws, a white sling between hanger and carabiner, and the anchors.\n  for (const l of LX) {\n    for (const b of BOLT) for (let j = 0; j \u003c 4; j++) px(l, b + j, STEEL[j], 1, j % 3 ? 0.7 : 0.1);\n    px(l - 1, 8, STEEL[0], 1, 0.1), px(l + 1, 8, STEEL[0], 1, 0.1), px(l, 9, STEEL[3], 1, 0.1), px(l, 10, STEEL[1], 1, 0.4);\n  }\n})();\n\n// A plan step: limb (hands 0 1, feet 2 3, 4 waits), target, which, seconds,\n// then what; LOOP brings the rope up with the hand.\nconst HOLD = 0, CHIPT = 1, BAG = 2, HARN = 3, DRAW = 4, ANCHOR = 5;\nconst PUFF = 1, CLIP = 2, ANCH = 3, GRAB = 4, LOOP = 5;\nconst START = 0, CLIMB = 1, LOWER = 2, LAND = 3, PULL = 4, SWAP = 5, FALL = 6;\nconst PC = 96, PRE = [17, 31, 4.5], SRX = 17, SRY = 28, TG = F32(2);\n\nconst party = (l) => ({ l, r: ROUTE[l][0], on: 0, c: 0, pt: 0, lhx: 0, lvx: 0, E: F32(8), plan: [], bl: 0, feed: 0, len: 0, pa: 0, pv: 0 });\n\nexport function setup(params) {\n  params.s = { P: [0, 1, 2].map(party), F: F32(N * 3), LB: F32(N * 3), pc: F32(PC * 5), init: 0, k4: 0.06, r0: 0, t: 0 };\n}\n\nfunction target(P, kind, k) {\n  const R = P.r * NH + k;\n  if (kind === HOLD) (TG[0] = HX[R] + 0.5), (TG[1] = HY[R] + 0.2);\n  else if (kind === CHIPT) (TG[0] = CX[R] + 1), (TG[1] = CY[R] + 0.1);\n  else if (kind \u003c DRAW) (TG[0] = P.hx + (kind === BAG ? 0.4 : 0)), (TG[1] = P.hy - (kind === BAG ? 0.6 : 1.2));\n  else (TG[0] = lane(P)), (TG[1] = kind === DRAW ? BOLT[k] + CLP : RING);\n}\nfunction aim(E, k, ...T) {\n  for (let j = 0; j \u003c 8; j++) E[j] += (T[j] - E[j]) * k;\n}\n\nfunction enter(P, ph) {\n  (P.ph = ph), (P.pt = 0), (P.plan.length = 0), (P.mv = -1);\n  if (ph !== START) return;\n  // Chalk each hand and set it on a taped start hold, then step on.\n  Object.assign(P, { hx: rcx(P.r), hy: STAND, iL: 0, iR: 1, seq: 0, nc: 0, anc: 0, loop: 0, hm: 0, vx: 0, vy: 0 });\n  P.E.set([P.hx - 2.5, STAND + 1, P.hx + 2.5, STAND + 1, P.hx - 1.15, FT, P.hx + 1.15, FT]);\n  for (const h of [0, 1]) P.plan.push([h, BAG, 0, 0.3], [4, 0, 0, 0.22, PUFF], [h, HOLD, h, 0.42, GRAB]);\n  P.plan.push([2, CHIPT, 0, 0.32], [3, CHIPT, 1, 0.32], [4, 0, 0, 0.2]);\n}\n\nfunction puff(S, x, y, n, sp) {\n  const p = S.pc, R = Math.random;\n  for (let k = 0; k \u003c PC * 5 && n > 0; k += 5) if (p[k + 4] \u003c= 0) (p[k] = x), (p[k + 1] = y), (p[k + 2] = (R() - 0.5) * 8 * sp), (p[k + 3] = (R() - 0.75) * 5 * sp), (p[k + 4] = 0.6 + 0.6 * R()), n--;\n}\n\nfunction advance(S, P, d) {\n  const E = P.E, m = P.mv, te = P.te;\n  P.u += d / P.dur;\n  if (m \u003c 4) {\n    target(P, P.mk, P.mi);\n    const e = ease(P.u), a = sin(PI * min(1, P.u));\n    E[m * 2] = mix(P.m0x, TG[0], e) + (m & 1 ? a : -a) * (m \u003c 2 ? 0.9 : 1.4);\n    E[m * 2 + 1] = mix(P.m0y, TG[1], e) - a * 0.7;\n  }\n  if (P.u \u003c 1) return;\n  P.mv = -1;\n  if (te === PUFF) puff(S, P.hx + 0.4, P.hy - 0.8, 8, 1);\n  else if (te === GRAB && Math.random() \u003c 0.4) puff(S, E[m * 2], E[m * 2 + 1], 2, 0.4);\n  else if (te === CLIP) P.nc++, (P.loop = 0);\n  else if (te === ANCH) (P.anc = 1), (P.loop = 0), enter(P, LOWER);\n}\n\n// Clip a draw level with her chest or the anchor at the top; else step a foot\n// up, then reach with that side's hand.\nfunction decide(P) {\n  const R = P.r * NH, pl = P.plan;\n  if (P.nc \u003c 8 && BOLT[P.nc] + CLP > P.hy - TOR - 1.5) {\n    const h = HY[R + P.iL] > HY[R + P.iR] ? 0 : 1;\n    pl.push([h, HARN, 0, 0.22], [h, DRAW, P.nc, 0.3, 0, LOOP], [4, 0, 0, 0.16, CLIP], [h, HOLD, h ? P.iR : P.iL, 0.24, GRAB]);\n  } else if (P.iL + 2 >= NH && P.iR + 2 >= NH) pl.push([1, HARN, 0, 0.22], [1, ANCHOR, 0, 0.36, 0, LOOP], [4, 0, 0, 0.3, ANCH]);\n  else {\n    const q = P.seq, h = q \u003c 2 ? 0 : 1, k = (h ? P.iR : P.iL) + 2;\n    P.seq = (q + 1) & 3;\n    if (k >= NH) return;\n    if (!(q & 1)) return pl.push([2 + h, CHIPT, k, 0.28], [4, 0, 0, 0.06]);\n    if (P.hm++ % 3 === 2) pl.push([h, BAG, 0, 0.24], [4, 0, 0, 0.22, PUFF]);\n    pl.push([h, HOLD, k, 0.34, GRAB], [4, 0, 0, 0.08]);\n    h ? (P.iR = k) : (P.iL = k);\n  }\n}\n\n// Back on after a fall or a change of route: the holds nearest her hips.\nfunction rejoin(P) {\n  const R = P.r * NH;\n  let i = 0;\n  for (let j = 2; j + 1 \u003c NH; j += 2) if (abs(CY[R + j] + CY[R + j + 1] - 12 - 2 * P.hy) \u003c abs(CY[R + i] + CY[R + i + 1] - 12 - 2 * P.hy)) i = j;\n  enter(P, CLIMB);\n  Object.assign(P, { iL: i, iR: i + 1, seq: 0, loop: 0, vx: 0, vy: 0 });\n  P.plan.push([1, HOLD, i + 1, 0.45, GRAB], [0, HOLD, i, 0.45, GRAB], [3, CHIPT, i + 1, 0.35], [2, CHIPT, i, 0.35], [4, 0, 0, 0.3]);\n}\nfunction fall(P) {\n  if (P.ph !== CLIMB) return;\n  P.R = P.nc ? hyp(P.hx - LX[P.l] - 0.5, P.hy - 1 - BOLT[P.nc - 1] - CLP) + 3 + (P.loop ? 4 : 0) : 0;\n  enter(P, FALL);\n  (P.vy = -8), (P.vx = 0), (P.loop = 0);\n}\n\n// The rope from the guide hand through the clipped draws to the climber.\nconst RP = F32(48);\nlet RLEN = 0;\nfunction path(P, gx, gy) {\n  let n = 0;\n  RLEN = 0;\n  const put = (x, y) => ((RP[n++] = x), (RP[n++] = y));\n  put(gx, gy);\n  for (let j = 0; j \u003c P.nc; j++) put(lane(P), BOLT[j] + CLP);\n  if (P.anc) put(lane(P), RING);\n  if (P.ph === PULL) put(P.ex, P.ey);\n  else {\n    if (P.loop) put(P.E[P.loop * 2 - 2], P.E[P.loop * 2 - 1]);\n    put(P.hx, P.hy - 1);\n  }\n  for (let j = 2; j \u003c n; j += 2) RLEN += hyp(RP[j] - RP[j - 2], RP[j + 1] - RP[j - 1]);\n  return n >> 1;\n}\n\nfunction stepParty(S, P, d) {\n  P.pt += d;\n  const E = P.E, ph = P.ph, x = P.hx, y = P.hy, k = 1 - exp(-d * 9);\n  if (ph \u003c= CLIMB) {\n    if (P.mv >= 0) advance(S, P, d);\n    if (P.mv \u003c 0 && P.ph === ph) {\n      const it = P.plan.shift();\n      if (it) {\n        (P.mv = it[0]), (P.mk = it[1]), (P.mi = it[2]), (P.dur = it[3]), (P.te = it[4] || 0), (P.u = 0);\n        if (P.mv \u003c 4) (P.m0x = E[P.mv * 2]), (P.m0y = E[P.mv * 2 + 1]);\n        if (it[5] === LOOP) P.loop = P.mv + 1;\n      } else if (ph === START) P.ph = CLIMB;\n      else decide(P);\n    }\n    // Hips where all four limbs reach, hanging on the arms and off the moving one.\n    const lo = max(E[5], E[7]) - 9.3, hi = min(E[1], E[3]) + 8 + TOR;\n    let ty = ((E[5] + E[7]) / 2 - 7 + hi) / 2, tx = 0.55 * ((E[4] + E[6]) / 2) + 0.45 * ((E[0] + E[2]) / 2);\n    ty = lo \u003c= hi ? cl(ty, lo, hi) : (lo + hi) / 2;\n    if (P.mv >= 0 && P.mv \u003c 4) tx -= (P.mv & 1 ? 1 : -1) * 0.7;\n    if (P.ph === ph) (P.hx += (tx - x) * k), (P.hy += (ty - y) * k);\n  } else if (ph === LOWER) {\n    // Sat in her harness and walking her feet down the wall.\n    P.hy = min(STAND, y + 12 * d * ease(P.pt * 1.5));\n    P.hx += (rcx(P.r) - x) * (1 - exp(-d * 1.5));\n    const f = P.hy * 0.45;\n    aim(E, k, x - 0.4, y - TOR - 1.8, x + 0.6, y - TOR - 3.6, x - 3.2, y + 5.3 - 1.6 * max(0, sin(f)), x + 3.2, y + 5.3 - 1.6 * max(0, -sin(f)));\n    if (P.hy >= STAND - 0.01) enter(P, LAND);\n  } else if (ph === LAND || ph === PULL) {\n    // Down, she unties and the belayer pulls the rope through.\n    P.hy += (STAND - y) * k;\n    const u = ph === LAND && P.pt > 0.5 && P.pt \u003c 1.3;\n    aim(E, k, x + (u ? -0.8 : -2.5), y + (u ? -1 : 1), x + (u ? 0.8 : 2.5), y + (u ? -1.3 : 1), x - 1.15, FT, x + 1.15, FT);\n    if (ph === LAND && P.pt > 1.4) enter(P, PULL), (P.ex = x), (P.ey = y - 1), (P.pull = 0);\n    if (ph === PULL && (P.pull += 110 * d) > P.len + 2) enter(P, SWAP);\n  } else if (ph === SWAP) {\n    if (P.pt > 1.6) (P.c ^= 1), enter(P, START);\n  } else {\n    // Falling until the rope from the last draw comes tight, a stretchy catch.\n    P.vy += 150 * d;\n    if (P.nc) {\n      const dx = x - LX[P.l] - 0.5, dy = y - 1 - BOLT[P.nc - 1] - CLP, L = hyp(dx, dy) + 1e-6, e = L - P.R;\n      if (e > 0) {\n        const ux = dx / L, uy = dy / L, f = (80 * e + 8 * (P.vx * ux + P.vy * uy)) * d;\n        (P.vx -= f * ux), (P.vy -= f * uy), (P.bl = max(P.bl, min(3, e)));\n      }\n    }\n    (P.hx += P.vx * d), (P.hy += P.vy * d);\n    if (P.hy >= STAND) {\n      (P.hy = STAND), (P.vy = P.vx = 0);\n      if (!P.nc) return enter(P, START);\n    }\n    const fl = P.pt \u003c 0.45, X = P.hx, Y = P.hy - TOR;\n    aim(E, 1 - exp(-d * (fl ? 6 : 4)), X - (fl ? 3.2 : 0.4), Y - (fl ? 4.5 : 2.5), X + (fl ? 3.2 : 0.5), Y - (fl ? 4.5 : 4.2), X - 2.7, P.hy + (fl ? 7.5 : 4.4), X + 2.7, P.hy + (fl ? 7 : 4.4));\n    if (P.pt > 2.4) rejoin(P);\n  }\n  P.bl *= exp(-d * 1.8);\n  // Rope paid out moves the belayer's guide hand; the ponytail swings.\n  const L = (path(P, bxOf(P), STAND - 4), RLEN), vx = (P.hx - P.lhx) / max(d, 1e-4);\n  if (P.ph \u003c= CLIMB) P.feed += abs(L - P.len);\n  if (P.ph !== PULL) P.len = L;\n  P.pv += (-28 * P.pa - 2.6 * P.pv) * d - cl(vx - P.lvx, -20, 20) * 0.04;\n  (P.pa = cl(P.pa + P.pv * d, -1, 1)), (P.lhx = P.hx), (P.lvx = vx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const r0 = min(5, floor(cl(k[0], 0, 1) * 6)), np = round(cl(k[2], 1, 3)), l0 = RL[r0], sp = cl(k[1], 0.2, 3);\n  (S.k4 = cl(k[3], -1, 1)), (S.r0 = r0);\n  for (const P of S.P) {\n    const r = P.l === l0 ? r0 : ROUTE[P.l][RS[r0] > 0 ? 1 : 0], j = (P.l - l0 + 3) % 3;\n    if (j >= np) P.on = 0;\n    else if (!P.on) {\n      (P.on = 1), (P.r = r), enter(P, START);\n      // Each party opens some way into its climb, further at a faster Speed.\n      if (!S.init) for (let n = PRE[j] * 30; n > 0; n--) stepParty(S, P, (sp / 2) ** 1.6 / 30);\n    } else if (P.r !== r) (P.r = r), P.ph === CLIMB ? rejoin(P) : P.ph === START && enter(P, START);\n  }\n  if (!S.init) S.pc.fill(0), (S.init = 1);\n  if (input.btnPressed && input.btnPressed[0]) fall(S.P[l0]);\n  const d = (cl(dt || 0, 0, 0.1) * sp) / 2, p = S.pc;\n  S.t += d;\n  for (const P of S.P) if (P.on) stepParty(S, P, d);\n  for (let j = 0, e = exp(-2 * d); j \u003c PC * 5; j += 5) if (p[j + 4] > 0) (p[j] += p[j + 2] * d), (p[j + 1] += p[j + 3] * d), (p[j + 2] *= e), (p[j + 3] = p[j + 3] * e + 2 * d), (p[j + 4] -= 0.6 * d);\n}\n\nlet F = null, LB = null;\nfunction splat(x, y, c, k, a) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1);\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) blend((yy * W + xx) * 3, c, k, (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy) * a);\n  }\n}\nconst lightAt = (x, y) => {\n  const o = (cl(floor(y), 0, H - 1) * W + cl(floor(x), 0, W - 1)) * 3;\n  return cl(0.3 + 0.35 * (LB[o] + LB[o + 1]), 0.62, 1.2);\n};\n// A rope span, slack spans sagging; the weave's flecks ride with the rope.\nfunction span(x0, y0, x1, y1, sag, s0, lim, rc, lf) {\n  const L = hyp(x1 - x0, y1 - y0), n = ceil(L * 2.2) + 1, mx = (x0 + x1) / 2 + sag * 0.3, my = (y0 + y1) / 2 + sag * 2;\n  for (let i = 0; i \u003c= n; i++) {\n    const u = i / n, s = s0 + u * L, q = s - lim + 1000, a = (1 - u) * (1 - u), b = 2 * u * (1 - u), c = u * u;\n    if (s > lim) break;\n    const w = q * 0.2 - floor(q * 0.2) \u003c 0.16;\n    splat(a * x0 + b * mx + c * x1, a * y0 + b * my + c * y1, w ? STEEL[1] : rc, w ? lf : (0.74 + 0.26 * cos(q * 2.3)) * lf, 0.9);\n  }\n  return s0 + L;\n}\n\n// A person from behind, facing the wall: hips at hx, hy, hands and feet in E.\nconst PT = F32(30 * 6), BE = F32(8);\nlet NP = 0, KX = 0, KY = 0, EX = 0, EY = 0;\nconst cap = (...a) => (PT.set(a, NP * 6), NP++);\n// Two-bone reach; elbows bend out and down, knees out and up.\nfunction ik(ax, ay, bx, by, l1, l2, sg, up) {\n  let dx = bx - ax, dy = by - ay, L = hyp(dx, dy) + 1e-6;\n  const Lm = l1 + l2 - 0.05;\n  if (L > Lm) (bx = ax + (dx / L) * Lm), (by = ay + (dy / L) * Lm), (dx = bx - ax), (dy = by - ay), (L = Lm);\n  const a = (l1 * l1 - l2 * l2 + L * L) / (2 * L), h = sqrt(max(0, l1 * l1 - a * a)), ux = dx / L, uy = dy / L, f = -uy * sg + up * 0.3 * ux \u003c 0 ? -h : h;\n  (KX = ax + ux * a - uy * f), (KY = ay + uy * a + ux * f), (EX = bx), (EY = by);\n}\nfunction person(hx, hy, E, o, lf, pa) {\n  NP = 0;\n  const sx = hx + 0.2 * ((E[0] + E[2]) / 2 - hx), sy = hy - TOR;\n  for (let s = -1; s \u003c 2; s += 2) {\n    const j = s + 1;\n    ik(hx + s * 1.15, hy + 0.4, E[4 + j], E[5 + j], TH, SN, s, -1);\n    cap(hx + s * 1.15, hy + 0.4, KX, KY, 1.1, 3), cap(KX, KY, EX, EY, 0.83, 3), cap(EX, EY, EX + s * 0.9, EY + 0.3, 0.7, 5);\n  }\n  cap(hx - 1.1, hy, hx + 1.1, hy, 1.25, 3), cap(hx, hy - 1, sx, sy + 1, 1.95, 2), cap(sx - 2.2, sy + 0.7, sx + 2.2, sy + 0.7, 1.15, 2);\n  cap(hx - 1.8, hy - 1.1, hx + 1.8, hy - 1.1, 0.55, 4), cap(hx + 0.3, hy - 1.2, hx + 0.3, hy - 0.1, 0.8, 6);\n  for (let s = -1; s \u003c 2; s += 2) {\n    ik(sx + s * 2.3, sy + 0.8, E[s + 1], E[s + 2], UA, FA, s, 1);\n    cap(sx + s * 2.3, sy + 0.8, KX, KY, 0.76, 0), cap(KX, KY, EX, EY, 0.64, 0), cap(EX, EY, EX, EY - 0.2, 0.75, 0);\n  }\n  cap(sx, sy + 0.2, sx, sy - 1.2, 0.7, 0), cap(sx, sy - 3, sx, sy - 3.1, 1.95, 1);\n  if (o[7]) cap(sx, sy - 3, sx + 3.7 * sin(pa), sy - 3 + 4.1 * cos(pa), 0.63, 1);\n  // A dark rim round her, holds near her greyed, then her.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let y = max(0, floor(hy - 21)); y \u003c min(H, hy + 16); y++)\n      for (let x = max(0, floor(hx - 13)); x \u003c min(W, hx + 14); x++) {\n        const qx = x + 0.5, qy = y + 0.5, i = (y * W + x) * 3;\n        let dm = 9;\n        for (let j = 0; j \u003c NP * 6; j += 6) {\n          const ax = PT[j], ay = PT[j + 1], dx = PT[j + 2] - ax, dy = PT[j + 3] - ay, r = PT[j + 4];\n          if (abs(qx - ax - dx / 2) > abs(dx) / 2 + r + 3 || abs(qy - ay - dy / 2) > abs(dy) / 2 + r + 3) continue;\n          const tt = cl(((qx - ax) * dx + (qy - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1), e = hyp(qx - ax - dx * tt, qy - ay - dy * tt) - r;\n          if (pass && e \u003c 0.5) blend(i, o[PT[j + 5]], lf, min(1, 0.5 - e));\n          dm = min(dm, e);\n        }\n        const g = ease((dm - 1.3) / 1.4), m = ((F[i] + F[i + 1] + F[i + 2]) / 3) * 0.6;\n        if (!pass && g \u003c 1) for (let c = 0; c \u003c 3; c++) F[i + c] = mix(m, F[i + c], g) * (0.25 + 0.75 * g);\n      }\n}\nfunction walk(x, ph, o, lf) {\n  const y = STAND - 0.3 * abs(sin(ph)), s = sin(ph), s2 = sin(ph + 1.6);\n  BE.set([x - 2.5 - 0.6 * s, y + 0.8, x + 2.5 - 0.6 * s, y + 0.8, x - 1.3 + 0.8 * s, FT - 1.2 * max(0, cos(ph)), x + 1.3 + 0.8 * s2, FT - 1.2 * max(0, cos(ph + 1.6))]);\n  person(x, y, BE, o, lf, 0);\n}\n\n// A party: rope pile, rope, climber, then the belayer in front.\nfunction scene(S, P, t) {\n  const gs = RS[P.r], bx = bxOf(P), cx = rcx(P.r), A = OUT[P.l * 2 + P.c], B = OUT[P.l * 2 + 1 - P.c], rc = ROPE[P.l];\n  const lfB = lightAt(bx, FL - 10), px0 = bx - gs * 2.6;\n  for (let j = 0; j \u003c 22; j++) splat(px0 + 2.4 * cos(j * 0.6) * (1 - j * 0.02), FL + 3.2 + 0.9 * sin(j * 0.6), rc, 0.8 * lfB, 0.8);\n  if (P.ph === SWAP) {\n    const e = ease(P.pt / 1.6), ph = P.pt * 9;\n    return walk(mix(cx, bx, e), ph, A, lfB), walk(mix(bx, cx, e), ph + PI, B, lfB);\n  }\n  // The belayer: guide hand up the rope feeding it out, brake hand low.\n  const hy = STAND - P.bl, hx = bx + gs * P.bl * 0.4, gi = gs > 0 ? 2 : 0, bi = 2 - gi;\n  let gy = hy - 3.4 - 1.8 * abs(sin(P.feed * 0.35)), by = hy + 0.8;\n  if (P.ph === PULL) (gy = hy - 3 - 2.6 * abs(sin(t * 6))), (by = hy - 3 - 2.6 * abs(cos(t * 6)));\n  else if (P.ph === LOWER) by = hy + 0.6 + 0.8 * sin(t * 5);\n  (BE[gi] = hx + gs * 0.7), (BE[gi + 1] = gy), (BE[bi] = hx - gs * 2.2), (BE[bi + 1] = by);\n  (BE[4] = hx - 1.15), (BE[6] = hx + 1.15), (BE[5] = BE[7] = min(FT, hy + 9.5));\n  span(BE[bi], by, px0, FL + 2.5, 1.2, 0, 1e9, rc, lightAt(BE[bi], by + 2));\n  const n = path(P, BE[gi], gy), lim = RLEN - (P.ph === PULL ? P.pull : 0), taut = P.ph === FALL || P.ph === LOWER || P.ph === PULL;\n  for (let j = 1, s = 0; j \u003c n; j++) {\n    const sag = j === 1 ? (n === 2 && !taut ? 2.5 : 1.5) : j === n - 1 && !taut ? 1 : 0;\n    s = span(RP[j * 2 - 2], RP[j * 2 - 1], RP[j * 2], RP[j * 2 + 1], sag, s, lim, rc, lightAt(RP[j * 2], RP[j * 2 + 1]));\n  }\n  person(P.hx, P.hy, P.E, A, lightAt(P.hx, P.hy - 4), P.pa);\n  person(hx, hy, BE, B, lfB, 0.2);\n}\n\n// House light tinted by the route, a follow spot with a gel on each climber.\nfunction light(S) {\n  const k = S.k4, hs = k \u003c 0 ? mix(0.68, 1.12, -k) : mix(0.68, 0.06, k), lv = k \u003c 0 ? mix(1, 0.35, -k) : mix(1, 1.2, k), u = max(0, k);\n  const T = [1, 0.95, 0.86].map((w, j) => mix(w, RC[S.r0][j] / 255, 0.14) * hs), V = [0.1 * u, 0.04 * u, 0.24 * u];\n  for (let o = 0; o \u003c N * 3; o++) LB[o] = L0[(o / 3) | 0] * T[o % 3];\n  for (const P of S.P) {\n    if (!P.on) continue;\n    const sx = P.hx, sy = P.hy - 4, G = [1, 0.96, 0.9].map((w, j) => lv * mix(w, RC[P.r][j] / 255, 0.35));\n    for (let y = max(4, floor(sy - SRY)); y \u003c min(FL, sy + SRY); y++)\n      for (let x = max(0, floor(sx - SRX)); x \u003c min(W, sx + SRX); x++) {\n        const q = ((y + 0.5 - sy) / SRY) ** 2 + ((x + 0.5 - sx) / SRX) ** 2, o = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3 && q \u003c 1; c++) LB[o + c] += (1 - q) * (1 - q) * G[c];\n      }\n  }\n  for (let o = 0; o \u003c N * 3; o++) F[o] = AL[o] * (LB[o] + V[o % 3]) + EM[o] * u;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  (F = S.F), (LB = S.LB);\n  light(S);\n  for (const P of S.P) if (P.on) scene(S, P, S.t);\n  const p = S.pc, u = max(0, S.k4);\n  for (let j = 0, C = [240, 240 - 40 * u, 236 + 19 * u]; j \u003c PC * 5; j += 5) if (p[j + 4] > 0) splat(p[j], p[j + 1], C, 1, min(1, p[j + 4]) * 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-climbing-wall","type":"code","name":"climbing-wall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Climbing Wall\n// Family:  sport\n// Idea:    A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after an indoor lead-climbing wall\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1\n//\n// Knob 1: Route. The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour.\n// Knob 2: Speed. At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall.\n// Knob 3: Climbers. One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour.\n// Knob 4: Light. House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes.\n// Buttons: K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.\n\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (u) => ((u = cl(u, 0, 1)), u * u * (3 - 2 * u));\nconst hyp = (x, y) => sqrt(x * x + y * y), F32 = (n) => new Float32Array(n);\nconst hex = (h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));\nconst blend = (o, c, k, a) => {\n  for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] * k - F[o + j]) * a;\n};\nconst hash = (i, j) => ((Math.imul(i * 7919 + j * 104729 + 17, 2654435761) >>> 8) & 1023) / 1024;\n\n// Rows of the mat and the kickboard. Each lane's bolt line LX: eight quickdraws\n// (the rope runs CLP under the bolt) and a lower-off ring.\nconst FL = 121, FT = FL - 0.5, KICK = 117, LX = [11, 32, 53], BOLT = [95, 84, 73, 62, 51, 40, 29, 18], CLP = 3.5, RING = 11;\n// A route: NH hand holds HS rows apart, left and right in turn, a foot chip\n// CHIP rows under each. A lane has two routes, one each side of its bolts.\nconst NH = 20, HY0 = 105, HS = 5, CHIP = 15;\n// The body in LEDs: arm, forearm, thigh, shin, hip to shoulders; hips standing.\nconst UA = 4.1, FA = 4.1, TH = 4.8, SN = 4.8, TOR = 6, STAND = FL - 10.05;\n// Route colours in Route's order with the lane and side each is set on.\nconst RC = \"3ceb6e ffd41e 288cff ff46aa ff7614 af5fff\".split(\" \").map(hex);\nconst RL = [1, 2, 0, 1, 2, 0], RS = [-1, -1, -1, 1, 1, 1], ROUTE = [[2, 5], [0, 3], [1, 4]];\nconst rcx = (r) => LX[RL[r]] + 0.5 + RS[r] * 5;\nconst lane = (P) => LX[P.l] + 0.5, bxOf = (P) => lane(P) - RS[P.r] * 3.5;\n// A rope a lane, two people a party: skin, hair, top, tights, harness, shoes,\n// chalk bag, 1 for a ponytail.\nconst ROPE = \"46d7ff ff7828 beff46\".split(\" \").map(hex);\nconst OUT = [\n  \"ecac84 c86032 ff6054 968cc4 ffc81e 8246d2 e6283c 1\", \"c88c64 ebc878 f5f5f0 3c60b4 96e628 f05a28 2878e6 0\",\n  \"ecb088 60301a 1ec8cd acb2c4 ff4696 464650 fad228 1\", \"a06e50 bebec4 facd32 466ed2 e63278 3c8cf0 3cb450 0\",\n  \"ecac84 f0dcaa 965ff0 c8c8ce ffc81e 288cf0 f0f0f0 1\", \"be825f 281e1a 46c864 a03c54 ff5a28 ebebeb c83cc8 0\",\n].map((s) => s.split(\" \").map((h, i) => (i \u003c 7 ? hex(h) : +h)));\n\n// The wall is built once, with the house light on it in L0.\nconst AL = F32(N * 3), EM = F32(N * 3), L0 = F32(N), MK = new Uint8Array(N);\nconst HX = F32(6 * NH), HY = F32(6 * NH), CX = F32(6 * NH), CY = F32(6 * NH);\n// Jug, crimp, sloper, pinch, big jug: LEDs as digit pairs, column + 2, row + 1.\nconst SHAPES = [\"112131122232\", \"112131\", \"2011213122\", \"203021312232\", \"1020300111213141122232\"];\n// Volumes, pyramids on a diamond: middle, half width, half height, colour.\nconst VOL = [[21.5, 46, 4.5, 7, \"9698a2\"], [43, 84, 4.5, 6.5, \"3c969c\"], [21.5, 100, 4, 5, \"c49664\"], [43, 26, 4, 6, \"d6d6dc\"], [1, 70, 3.5, 8, \"785496\"], [63, 52, 3.5, 7, \"9698a2\"]];\nconst STEEL = \"bebec8 ece8de dcd8d0 aab0bc\".split(\" \").map(hex);\n// Colour c times k on the wall, e of it glowing under UV.\nfunction px(x, y, c, k, e) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) (AL[o + j] = min(255, c[j] * k)), (EM[o + j] = AL[o + j] * e);\n  MK[y * W + x] = 1;\n}\nfunction shade(x, y, k) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL || MK[y * W + x]) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) AL[o + c] *= k;\n}\n// A hold, lit from above, and its shadow.\nfunction hold(x, y, t, c) {\n  const S = SHAPES[t];\n  for (let j = 0; j \u003c S.length; j += 2) shade(x + +S[j] - 2, y + +S[j + 1], 0.5), shade(x + +S[j] - 1, y + +S[j + 1], 0.72);\n  for (let j = 0; j \u003c S.length; j += 2) px(x + +S[j] - 2, y + +S[j + 1] - 1, c, [1.22, 1.08, 0.78][S[j + 1]] - 0.06 * (S[j] - 2), 0.55);\n}\n(function build() {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3;\n      let r, g, b, L = 0.85, e = 0;\n      if (y \u003c 4) {\n        // The ceiling: a truss, a lamp over each lane that is also a UV tube.\n        r = g = b = y === 1 ? ((x + 1) % 6 \u003c 2 ? 56 : 32) : y ? 9 : 14;\n        for (const l of LX) if ((y === 2 && abs(x - l) \u003c 2) || (y === 3 && x === l)) (e = x === l ? 1 : 0.6), (r = 255 * e), (g = 238 * e), (b = 210 * e);\n        (L = 1.47), (EM[o] = 175 * e), (EM[o + 1] = 100 * e), (EM[o + 2] = 255 * e);\n      } else if (y \u003c FL) {\n        // Plywood sheets 12 by 23, grain running up them. Seams and T-nuts darken it.\n        const qx = floor((x + 6) / 12), qy = floor((y - 4) / 23);\n        let k = (0.86 + 0.18 * hash(qx + 3, qy + 7)) * (0.9 + 0.14 * hash(x, qy) * (0.6 + 0.4 * sin(y * 0.2 + x)));\n        if ((x + 6) % 12 === 0 || (y - 4) % 23 === 22) k *= 0.62;\n        if (y % 4 === 1 && (x + (y >> 2) * 2) % 4 === 0) k *= 0.84;\n        if (y >= KICK) (k = y === KICK ? 0.7 : 1), (r = 50 * k), (g = 50 * k), (b = 56 * k);\n        else (r = 132 * k), (g = 101 * k), (b = 70 * k);\n        // Lamp light fanning down from the top, a wash over the floor.\n        L = 0.62 + 0.4 * ease((y - 86) / 34);\n        for (const l of LX) L += 0.95 * exp(-(((x - l) / (1.5 + 0.28 * y)) ** 2) - (y - 4) / 34) * ease((y - 3) / 6);\n      } else {\n        // Blue foam mats with seams; the front lip catches the light.\n        const k = (x % 16 === 7 ? 0.6 : 1) * (y === FL ? 1.35 : 0.88 + 0.03 * (y - FL));\n        (r = 34 * k), (g = 62 * k), (b = 140 * k);\n      }\n      (AL[o] = r), (AL[o + 1] = g), (AL[o + 2] = b), (L0[i] = L);\n    }\n  for (const [cx, cy, w, h, c] of VOL)\n    for (let y = floor(cy - h); y \u003c= cy + h; y++)\n      for (let x = floor(cx - w); x \u003c= cx + w; x++) {\n        const dx = (x + 0.5 - cx) / w, dy = (y + 0.5 - cy) / h;\n        if (abs(dx) + abs(dy) \u003c= 1) px(x, y, hex(c), (dy \u003c 0 ? 1.1 : 0.62) + (dx \u003c 0 ? 0.08 : -0.12), 0.08);\n      }\n  for (let y = FL - 1; y > 4; y--) for (let x = 0; x \u003c W; x++) if (MK[(y - 1) * W + x] && !MK[y * W + x]) shade(x, y, 0.55);\n  MK.fill(0);\n  for (let k = 0; k \u003c 6 * NH; k++) {\n    const r = floor(k / NH), i = k % NH, s = i & 1 ? 1 : -1, c = RC[r];\n    HX[k] = round(rcx(r) - 0.5 + s * (s === RS[r] ? 3.4 + 1.2 * hash(r, i) : 3 + 0.5 * hash(r, i)));\n    HY[k] = round(HY0 - HS * i + (hash(r + 5, i) - 0.5) * 1.6);\n    (CX[k] = round(HX[k] + s * 0.6 - 0.5)), (CY[k] = HY[k] + CHIP);\n    // The two start holds are taped.\n    hold(HX[k], HY[k], i \u003c 2 ? 0 : i === NH - 1 ? 4 : floor(hash(k, 11) * 5), c);\n    if (i \u003c 2) for (let j = 2; j \u003c 4; j++) px(HX[k] + s * j, HY[k] + j - 1, c, 0.8, 0.5);\n  }\n  // Quickdraws, a white sling between hanger and carabiner, and the anchors.\n  for (const l of LX) {\n    for (const b of BOLT) for (let j = 0; j \u003c 4; j++) px(l, b + j, STEEL[j], 1, j % 3 ? 0.7 : 0.1);\n    px(l - 1, 8, STEEL[0], 1, 0.1), px(l + 1, 8, STEEL[0], 1, 0.1), px(l, 9, STEEL[3], 1, 0.1), px(l, 10, STEEL[1], 1, 0.4);\n  }\n})();\n\n// A plan step: limb (hands 0 1, feet 2 3, 4 waits), target, which, seconds,\n// then what; LOOP brings the rope up with the hand.\nconst HOLD = 0, CHIPT = 1, BAG = 2, HARN = 3, DRAW = 4, ANCHOR = 5;\nconst PUFF = 1, CLIP = 2, ANCH = 3, GRAB = 4, LOOP = 5;\nconst START = 0, CLIMB = 1, LOWER = 2, LAND = 3, PULL = 4, SWAP = 5, FALL = 6;\nconst PC = 96, PRE = [17, 31, 4.5], SRX = 17, SRY = 28, TG = F32(2);\n\nconst party = (l) => ({ l, r: ROUTE[l][0], on: 0, c: 0, pt: 0, lhx: 0, lvx: 0, E: F32(8), plan: [], bl: 0, feed: 0, len: 0, pa: 0, pv: 0 });\n\nexport function setup(params) {\n  params.s = { P: [0, 1, 2].map(party), F: F32(N * 3), LB: F32(N * 3), pc: F32(PC * 5), init: 0, k4: 0.06, r0: 0, t: 0 };\n}\n\nfunction target(P, kind, k) {\n  const R = P.r * NH + k;\n  if (kind === HOLD) (TG[0] = HX[R] + 0.5), (TG[1] = HY[R] + 0.2);\n  else if (kind === CHIPT) (TG[0] = CX[R] + 1), (TG[1] = CY[R] + 0.1);\n  else if (kind \u003c DRAW) (TG[0] = P.hx + (kind === BAG ? 0.4 : 0)), (TG[1] = P.hy - (kind === BAG ? 0.6 : 1.2));\n  else (TG[0] = lane(P)), (TG[1] = kind === DRAW ? BOLT[k] + CLP : RING);\n}\nfunction aim(E, k, ...T) {\n  for (let j = 0; j \u003c 8; j++) E[j] += (T[j] - E[j]) * k;\n}\n\nfunction enter(P, ph) {\n  (P.ph = ph), (P.pt = 0), (P.plan.length = 0), (P.mv = -1);\n  if (ph !== START) return;\n  // Chalk each hand and set it on a taped start hold, then step on.\n  Object.assign(P, { hx: rcx(P.r), hy: STAND, iL: 0, iR: 1, seq: 0, nc: 0, anc: 0, loop: 0, hm: 0, vx: 0, vy: 0 });\n  P.E.set([P.hx - 2.5, STAND + 1, P.hx + 2.5, STAND + 1, P.hx - 1.15, FT, P.hx + 1.15, FT]);\n  for (const h of [0, 1]) P.plan.push([h, BAG, 0, 0.3], [4, 0, 0, 0.22, PUFF], [h, HOLD, h, 0.42, GRAB]);\n  P.plan.push([2, CHIPT, 0, 0.32], [3, CHIPT, 1, 0.32], [4, 0, 0, 0.2]);\n}\n\nfunction puff(S, x, y, n, sp) {\n  const p = S.pc, R = Math.random;\n  for (let k = 0; k \u003c PC * 5 && n > 0; k += 5) if (p[k + 4] \u003c= 0) (p[k] = x), (p[k + 1] = y), (p[k + 2] = (R() - 0.5) * 8 * sp), (p[k + 3] = (R() - 0.75) * 5 * sp), (p[k + 4] = 0.6 + 0.6 * R()), n--;\n}\n\nfunction advance(S, P, d) {\n  const E = P.E, m = P.mv, te = P.te;\n  P.u += d / P.dur;\n  if (m \u003c 4) {\n    target(P, P.mk, P.mi);\n    const e = ease(P.u), a = sin(PI * min(1, P.u));\n    E[m * 2] = mix(P.m0x, TG[0], e) + (m & 1 ? a : -a) * (m \u003c 2 ? 0.9 : 1.4);\n    E[m * 2 + 1] = mix(P.m0y, TG[1], e) - a * 0.7;\n  }\n  if (P.u \u003c 1) return;\n  P.mv = -1;\n  if (te === PUFF) puff(S, P.hx + 0.4, P.hy - 0.8, 8, 1);\n  else if (te === GRAB && Math.random() \u003c 0.4) puff(S, E[m * 2], E[m * 2 + 1], 2, 0.4);\n  else if (te === CLIP) P.nc++, (P.loop = 0);\n  else if (te === ANCH) (P.anc = 1), (P.loop = 0), enter(P, LOWER);\n}\n\n// Clip a draw level with her chest or the anchor at the top; else step a foot\n// up, then reach with that side's hand.\nfunction decide(P) {\n  const R = P.r * NH, pl = P.plan;\n  if (P.nc \u003c 8 && BOLT[P.nc] + CLP > P.hy - TOR - 1.5) {\n    const h = HY[R + P.iL] > HY[R + P.iR] ? 0 : 1;\n    pl.push([h, HARN, 0, 0.22], [h, DRAW, P.nc, 0.3, 0, LOOP], [4, 0, 0, 0.16, CLIP], [h, HOLD, h ? P.iR : P.iL, 0.24, GRAB]);\n  } else if (P.iL + 2 >= NH && P.iR + 2 >= NH) pl.push([1, HARN, 0, 0.22], [1, ANCHOR, 0, 0.36, 0, LOOP], [4, 0, 0, 0.3, ANCH]);\n  else {\n    const q = P.seq, h = q \u003c 2 ? 0 : 1, k = (h ? P.iR : P.iL) + 2;\n    P.seq = (q + 1) & 3;\n    if (k >= NH) return;\n    if (!(q & 1)) return pl.push([2 + h, CHIPT, k, 0.28], [4, 0, 0, 0.06]);\n    if (P.hm++ % 3 === 2) pl.push([h, BAG, 0, 0.24], [4, 0, 0, 0.22, PUFF]);\n    pl.push([h, HOLD, k, 0.34, GRAB], [4, 0, 0, 0.08]);\n    h ? (P.iR = k) : (P.iL = k);\n  }\n}\n\n// Back on after a fall or a change of route: the holds nearest her hips.\nfunction rejoin(P) {\n  const R = P.r * NH;\n  let i = 0;\n  for (let j = 2; j + 1 \u003c NH; j += 2) if (abs(CY[R + j] + CY[R + j + 1] - 12 - 2 * P.hy) \u003c abs(CY[R + i] + CY[R + i + 1] - 12 - 2 * P.hy)) i = j;\n  enter(P, CLIMB);\n  Object.assign(P, { iL: i, iR: i + 1, seq: 0, loop: 0, vx: 0, vy: 0 });\n  P.plan.push([1, HOLD, i + 1, 0.45, GRAB], [0, HOLD, i, 0.45, GRAB], [3, CHIPT, i + 1, 0.35], [2, CHIPT, i, 0.35], [4, 0, 0, 0.3]);\n}\nfunction fall(P) {\n  if (P.ph !== CLIMB) return;\n  P.R = P.nc ? hyp(P.hx - LX[P.l] - 0.5, P.hy - 1 - BOLT[P.nc - 1] - CLP) + 3 + (P.loop ? 4 : 0) : 0;\n  enter(P, FALL);\n  (P.vy = -8), (P.vx = 0), (P.loop = 0);\n}\n\n// The rope from the guide hand through the clipped draws to the climber.\nconst RP = F32(48);\nlet RLEN = 0;\nfunction path(P, gx, gy) {\n  let n = 0;\n  RLEN = 0;\n  const put = (x, y) => ((RP[n++] = x), (RP[n++] = y));\n  put(gx, gy);\n  for (let j = 0; j \u003c P.nc; j++) put(lane(P), BOLT[j] + CLP);\n  if (P.anc) put(lane(P), RING);\n  if (P.ph === PULL) put(P.ex, P.ey);\n  else {\n    if (P.loop) put(P.E[P.loop * 2 - 2], P.E[P.loop * 2 - 1]);\n    put(P.hx, P.hy - 1);\n  }\n  for (let j = 2; j \u003c n; j += 2) RLEN += hyp(RP[j] - RP[j - 2], RP[j + 1] - RP[j - 1]);\n  return n >> 1;\n}\n\nfunction stepParty(S, P, d) {\n  P.pt += d;\n  const E = P.E, ph = P.ph, x = P.hx, y = P.hy, k = 1 - exp(-d * 9);\n  if (ph \u003c= CLIMB) {\n    if (P.mv >= 0) advance(S, P, d);\n    if (P.mv \u003c 0 && P.ph === ph) {\n      const it = P.plan.shift();\n      if (it) {\n        (P.mv = it[0]), (P.mk = it[1]), (P.mi = it[2]), (P.dur = it[3]), (P.te = it[4] || 0), (P.u = 0);\n        if (P.mv \u003c 4) (P.m0x = E[P.mv * 2]), (P.m0y = E[P.mv * 2 + 1]);\n        if (it[5] === LOOP) P.loop = P.mv + 1;\n      } else if (ph === START) P.ph = CLIMB;\n      else decide(P);\n    }\n    // Hips where all four limbs reach, hanging on the arms and off the moving one.\n    const lo = max(E[5], E[7]) - 9.3, hi = min(E[1], E[3]) + 8 + TOR;\n    let ty = ((E[5] + E[7]) / 2 - 7 + hi) / 2, tx = 0.55 * ((E[4] + E[6]) / 2) + 0.45 * ((E[0] + E[2]) / 2);\n    ty = lo \u003c= hi ? cl(ty, lo, hi) : (lo + hi) / 2;\n    if (P.mv >= 0 && P.mv \u003c 4) tx -= (P.mv & 1 ? 1 : -1) * 0.7;\n    if (P.ph === ph) (P.hx += (tx - x) * k), (P.hy += (ty - y) * k);\n  } else if (ph === LOWER) {\n    // Sat in her harness and walking her feet down the wall.\n    P.hy = min(STAND, y + 12 * d * ease(P.pt * 1.5));\n    P.hx += (rcx(P.r) - x) * (1 - exp(-d * 1.5));\n    const f = P.hy * 0.45;\n    aim(E, k, x - 0.4, y - TOR - 1.8, x + 0.6, y - TOR - 3.6, x - 3.2, y + 5.3 - 1.6 * max(0, sin(f)), x + 3.2, y + 5.3 - 1.6 * max(0, -sin(f)));\n    if (P.hy >= STAND - 0.01) enter(P, LAND);\n  } else if (ph === LAND || ph === PULL) {\n    // Down, she unties and the belayer pulls the rope through.\n    P.hy += (STAND - y) * k;\n    const u = ph === LAND && P.pt > 0.5 && P.pt \u003c 1.3;\n    aim(E, k, x + (u ? -0.8 : -2.5), y + (u ? -1 : 1), x + (u ? 0.8 : 2.5), y + (u ? -1.3 : 1), x - 1.15, FT, x + 1.15, FT);\n    if (ph === LAND && P.pt > 1.4) enter(P, PULL), (P.ex = x), (P.ey = y - 1), (P.pull = 0);\n    if (ph === PULL && (P.pull += 110 * d) > P.len + 2) enter(P, SWAP);\n  } else if (ph === SWAP) {\n    if (P.pt > 1.6) (P.c ^= 1), enter(P, START);\n  } else {\n    // Falling until the rope from the last draw comes tight, a stretchy catch.\n    P.vy += 150 * d;\n    if (P.nc) {\n      const dx = x - LX[P.l] - 0.5, dy = y - 1 - BOLT[P.nc - 1] - CLP, L = hyp(dx, dy) + 1e-6, e = L - P.R;\n      if (e > 0) {\n        const ux = dx / L, uy = dy / L, f = (80 * e + 8 * (P.vx * ux + P.vy * uy)) * d;\n        (P.vx -= f * ux), (P.vy -= f * uy), (P.bl = max(P.bl, min(3, e)));\n      }\n    }\n    (P.hx += P.vx * d), (P.hy += P.vy * d);\n    if (P.hy >= STAND) {\n      (P.hy = STAND), (P.vy = P.vx = 0);\n      if (!P.nc) return enter(P, START);\n    }\n    const fl = P.pt \u003c 0.45, X = P.hx, Y = P.hy - TOR;\n    aim(E, 1 - exp(-d * (fl ? 6 : 4)), X - (fl ? 3.2 : 0.4), Y - (fl ? 4.5 : 2.5), X + (fl ? 3.2 : 0.5), Y - (fl ? 4.5 : 4.2), X - 2.7, P.hy + (fl ? 7.5 : 4.4), X + 2.7, P.hy + (fl ? 7 : 4.4));\n    if (P.pt > 2.4) rejoin(P);\n  }\n  P.bl *= exp(-d * 1.8);\n  // Rope paid out moves the belayer's guide hand; the ponytail swings.\n  const L = (path(P, bxOf(P), STAND - 4), RLEN), vx = (P.hx - P.lhx) / max(d, 1e-4);\n  if (P.ph \u003c= CLIMB) P.feed += abs(L - P.len);\n  if (P.ph !== PULL) P.len = L;\n  P.pv += (-28 * P.pa - 2.6 * P.pv) * d - cl(vx - P.lvx, -20, 20) * 0.04;\n  (P.pa = cl(P.pa + P.pv * d, -1, 1)), (P.lhx = P.hx), (P.lvx = vx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const r0 = min(5, floor(cl(k[0], 0, 1) * 6)), np = round(cl(k[2], 1, 3)), l0 = RL[r0], sp = cl(k[1], 0.2, 3);\n  (S.k4 = cl(k[3], -1, 1)), (S.r0 = r0);\n  for (const P of S.P) {\n    const r = P.l === l0 ? r0 : ROUTE[P.l][RS[r0] > 0 ? 1 : 0], j = (P.l - l0 + 3) % 3;\n    if (j >= np) P.on = 0;\n    else if (!P.on) {\n      (P.on = 1), (P.r = r), enter(P, START);\n      // Each party opens some way into its climb, further at a faster Speed.\n      if (!S.init) for (let n = PRE[j] * 30; n > 0; n--) stepParty(S, P, (sp / 2) ** 1.6 / 30);\n    } else if (P.r !== r) (P.r = r), P.ph === CLIMB ? rejoin(P) : P.ph === START && enter(P, START);\n  }\n  if (!S.init) S.pc.fill(0), (S.init = 1);\n  if (input.btnPressed && input.btnPressed[0]) fall(S.P[l0]);\n  const d = (cl(dt || 0, 0, 0.1) * sp) / 2, p = S.pc;\n  S.t += d;\n  for (const P of S.P) if (P.on) stepParty(S, P, d);\n  for (let j = 0, e = exp(-2 * d); j \u003c PC * 5; j += 5) if (p[j + 4] > 0) (p[j] += p[j + 2] * d), (p[j + 1] += p[j + 3] * d), (p[j + 2] *= e), (p[j + 3] = p[j + 3] * e + 2 * d), (p[j + 4] -= 0.6 * d);\n}\n\nlet F = null, LB = null;\nfunction splat(x, y, c, k, a) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1);\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) blend((yy * W + xx) * 3, c, k, (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy) * a);\n  }\n}\nconst lightAt = (x, y) => {\n  const o = (cl(floor(y), 0, H - 1) * W + cl(floor(x), 0, W - 1)) * 3;\n  return cl(0.3 + 0.35 * (LB[o] + LB[o + 1]), 0.62, 1.2);\n};\n// A rope span, slack spans sagging; the weave's flecks ride with the rope.\nfunction span(x0, y0, x1, y1, sag, s0, lim, rc, lf) {\n  const L = hyp(x1 - x0, y1 - y0), n = ceil(L * 2.2) + 1, mx = (x0 + x1) / 2 + sag * 0.3, my = (y0 + y1) / 2 + sag * 2;\n  for (let i = 0; i \u003c= n; i++) {\n    const u = i / n, s = s0 + u * L, q = s - lim + 1000, a = (1 - u) * (1 - u), b = 2 * u * (1 - u), c = u * u;\n    if (s > lim) break;\n    const w = q * 0.2 - floor(q * 0.2) \u003c 0.16;\n    splat(a * x0 + b * mx + c * x1, a * y0 + b * my + c * y1, w ? STEEL[1] : rc, w ? lf : (0.74 + 0.26 * cos(q * 2.3)) * lf, 0.9);\n  }\n  return s0 + L;\n}\n\n// A person from behind, facing the wall: hips at hx, hy, hands and feet in E.\nconst PT = F32(30 * 6), BE = F32(8);\nlet NP = 0, KX = 0, KY = 0, EX = 0, EY = 0;\nconst cap = (...a) => (PT.set(a, NP * 6), NP++);\n// Two-bone reach; elbows bend out and down, knees out and up.\nfunction ik(ax, ay, bx, by, l1, l2, sg, up) {\n  let dx = bx - ax, dy = by - ay, L = hyp(dx, dy) + 1e-6;\n  const Lm = l1 + l2 - 0.05;\n  if (L > Lm) (bx = ax + (dx / L) * Lm), (by = ay + (dy / L) * Lm), (dx = bx - ax), (dy = by - ay), (L = Lm);\n  const a = (l1 * l1 - l2 * l2 + L * L) / (2 * L), h = sqrt(max(0, l1 * l1 - a * a)), ux = dx / L, uy = dy / L, f = -uy * sg + up * 0.3 * ux \u003c 0 ? -h : h;\n  (KX = ax + ux * a - uy * f), (KY = ay + uy * a + ux * f), (EX = bx), (EY = by);\n}\nfunction person(hx, hy, E, o, lf, pa) {\n  NP = 0;\n  const sx = hx + 0.2 * ((E[0] + E[2]) / 2 - hx), sy = hy - TOR;\n  for (let s = -1; s \u003c 2; s += 2) {\n    const j = s + 1;\n    ik(hx + s * 1.15, hy + 0.4, E[4 + j], E[5 + j], TH, SN, s, -1);\n    cap(hx + s * 1.15, hy + 0.4, KX, KY, 1.1, 3), cap(KX, KY, EX, EY, 0.83, 3), cap(EX, EY, EX + s * 0.9, EY + 0.3, 0.7, 5);\n  }\n  cap(hx - 1.1, hy, hx + 1.1, hy, 1.25, 3), cap(hx, hy - 1, sx, sy + 1, 1.95, 2), cap(sx - 2.2, sy + 0.7, sx + 2.2, sy + 0.7, 1.15, 2);\n  cap(hx - 1.8, hy - 1.1, hx + 1.8, hy - 1.1, 0.55, 4), cap(hx + 0.3, hy - 1.2, hx + 0.3, hy - 0.1, 0.8, 6);\n  for (let s = -1; s \u003c 2; s += 2) {\n    ik(sx + s * 2.3, sy + 0.8, E[s + 1], E[s + 2], UA, FA, s, 1);\n    cap(sx + s * 2.3, sy + 0.8, KX, KY, 0.76, 0), cap(KX, KY, EX, EY, 0.64, 0), cap(EX, EY, EX, EY - 0.2, 0.75, 0);\n  }\n  cap(sx, sy + 0.2, sx, sy - 1.2, 0.7, 0), cap(sx, sy - 3, sx, sy - 3.1, 1.95, 1);\n  if (o[7]) cap(sx, sy - 3, sx + 3.7 * sin(pa), sy - 3 + 4.1 * cos(pa), 0.63, 1);\n  // A dark rim round her, holds near her greyed, then her.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let y = max(0, floor(hy - 21)); y \u003c min(H, hy + 16); y++)\n      for (let x = max(0, floor(hx - 13)); x \u003c min(W, hx + 14); x++) {\n        const qx = x + 0.5, qy = y + 0.5, i = (y * W + x) * 3;\n        let dm = 9;\n        for (let j = 0; j \u003c NP * 6; j += 6) {\n          const ax = PT[j], ay = PT[j + 1], dx = PT[j + 2] - ax, dy = PT[j + 3] - ay, r = PT[j + 4];\n          if (abs(qx - ax - dx / 2) > abs(dx) / 2 + r + 3 || abs(qy - ay - dy / 2) > abs(dy) / 2 + r + 3) continue;\n          const tt = cl(((qx - ax) * dx + (qy - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1), e = hyp(qx - ax - dx * tt, qy - ay - dy * tt) - r;\n          if (pass && e \u003c 0.5) blend(i, o[PT[j + 5]], lf, min(1, 0.5 - e));\n          dm = min(dm, e);\n        }\n        const g = ease((dm - 1.3) / 1.4), m = ((F[i] + F[i + 1] + F[i + 2]) / 3) * 0.6;\n        if (!pass && g \u003c 1) for (let c = 0; c \u003c 3; c++) F[i + c] = mix(m, F[i + c], g) * (0.25 + 0.75 * g);\n      }\n}\nfunction walk(x, ph, o, lf) {\n  const y = STAND - 0.3 * abs(sin(ph)), s = sin(ph), s2 = sin(ph + 1.6);\n  BE.set([x - 2.5 - 0.6 * s, y + 0.8, x + 2.5 - 0.6 * s, y + 0.8, x - 1.3 + 0.8 * s, FT - 1.2 * max(0, cos(ph)), x + 1.3 + 0.8 * s2, FT - 1.2 * max(0, cos(ph + 1.6))]);\n  person(x, y, BE, o, lf, 0);\n}\n\n// A party: rope pile, rope, climber, then the belayer in front.\nfunction scene(S, P, t) {\n  const gs = RS[P.r], bx = bxOf(P), cx = rcx(P.r), A = OUT[P.l * 2 + P.c], B = OUT[P.l * 2 + 1 - P.c], rc = ROPE[P.l];\n  const lfB = lightAt(bx, FL - 10), px0 = bx - gs * 2.6;\n  for (let j = 0; j \u003c 22; j++) splat(px0 + 2.4 * cos(j * 0.6) * (1 - j * 0.02), FL + 3.2 + 0.9 * sin(j * 0.6), rc, 0.8 * lfB, 0.8);\n  if (P.ph === SWAP) {\n    const e = ease(P.pt / 1.6), ph = P.pt * 9;\n    return walk(mix(cx, bx, e), ph, A, lfB), walk(mix(bx, cx, e), ph + PI, B, lfB);\n  }\n  // The belayer: guide hand up the rope feeding it out, brake hand low.\n  const hy = STAND - P.bl, hx = bx + gs * P.bl * 0.4, gi = gs > 0 ? 2 : 0, bi = 2 - gi;\n  let gy = hy - 3.4 - 1.8 * abs(sin(P.feed * 0.35)), by = hy + 0.8;\n  if (P.ph === PULL) (gy = hy - 3 - 2.6 * abs(sin(t * 6))), (by = hy - 3 - 2.6 * abs(cos(t * 6)));\n  else if (P.ph === LOWER) by = hy + 0.6 + 0.8 * sin(t * 5);\n  (BE[gi] = hx + gs * 0.7), (BE[gi + 1] = gy), (BE[bi] = hx - gs * 2.2), (BE[bi + 1] = by);\n  (BE[4] = hx - 1.15), (BE[6] = hx + 1.15), (BE[5] = BE[7] = min(FT, hy + 9.5));\n  span(BE[bi], by, px0, FL + 2.5, 1.2, 0, 1e9, rc, lightAt(BE[bi], by + 2));\n  const n = path(P, BE[gi], gy), lim = RLEN - (P.ph === PULL ? P.pull : 0), taut = P.ph === FALL || P.ph === LOWER || P.ph === PULL;\n  for (let j = 1, s = 0; j \u003c n; j++) {\n    const sag = j === 1 ? (n === 2 && !taut ? 2.5 : 1.5) : j === n - 1 && !taut ? 1 : 0;\n    s = span(RP[j * 2 - 2], RP[j * 2 - 1], RP[j * 2], RP[j * 2 + 1], sag, s, lim, rc, lightAt(RP[j * 2], RP[j * 2 + 1]));\n  }\n  person(P.hx, P.hy, P.E, A, lightAt(P.hx, P.hy - 4), P.pa);\n  person(hx, hy, BE, B, lfB, 0.2);\n}\n\n// House light tinted by the route, a follow spot with a gel on each climber.\nfunction light(S) {\n  const k = S.k4, hs = k \u003c 0 ? mix(0.68, 1.12, -k) : mix(0.68, 0.06, k), lv = k \u003c 0 ? mix(1, 0.35, -k) : mix(1, 1.2, k), u = max(0, k);\n  const T = [1, 0.95, 0.86].map((w, j) => mix(w, RC[S.r0][j] / 255, 0.14) * hs), V = [0.1 * u, 0.04 * u, 0.24 * u];\n  for (let o = 0; o \u003c N * 3; o++) LB[o] = L0[(o / 3) | 0] * T[o % 3];\n  for (const P of S.P) {\n    if (!P.on) continue;\n    const sx = P.hx, sy = P.hy - 4, G = [1, 0.96, 0.9].map((w, j) => lv * mix(w, RC[P.r][j] / 255, 0.35));\n    for (let y = max(4, floor(sy - SRY)); y \u003c min(FL, sy + SRY); y++)\n      for (let x = max(0, floor(sx - SRX)); x \u003c min(W, sx + SRX); x++) {\n        const q = ((y + 0.5 - sy) / SRY) ** 2 + ((x + 0.5 - sx) / SRX) ** 2, o = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3 && q \u003c 1; c++) LB[o + c] += (1 - q) * (1 - q) * G[c];\n      }\n  }\n  for (let o = 0; o \u003c N * 3; o++) F[o] = AL[o] * (LB[o] + V[o % 3]) + EM[o] * u;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  (F = S.F), (LB = S.LB);\n  light(S);\n  for (const P of S.P) if (P.on) scene(S, P, S.t);\n  const p = S.pc, u = max(0, S.k4);\n  for (let j = 0, C = [240, 240 - 40 * u, 236 + 19 * u]; j \u003c PC * 5; j += 5) if (p[j + 4] > 0) splat(p[j], p[j + 1], C, 1, min(1, p[j + 4]) * 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Route","min":0,"max":1,"about":"The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall."},{"name":"Climbers","min":1,"max":3,"about":"One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour."},{"name":"Light","min":-1,"max":1,"about":"House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes."}],"start":[0,2,1,0.06],"measures":{"motion":0.067,"detail":0.0707,"edges":0.3416,"complexity":1.7869,"coverage":0.9212,"colour":0.1755,"drift":0.0209},"knobResponse":[0.0608,0.0368,0.048,0.1959]},{"slug":"cloth","title":"Cloth","family":"physics","round":2,"note":"12×22 매듭 천이 나무 봉의 집게에 걸려 있고, 뒤에서 부는 돌풍이 천을 앞으로 들어 올려요. LED 마다 그 자리 천이 빛에서 기운 만큼 밝아서 주름이 등고선처럼 읽혀요.","idea":"A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.","buttons":"K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.","code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","layer":{"id":"layer-cloth","type":"code","name":"cloth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the cloth; its stripes and its paler wrong side follow."},{"name":"Wind","min":0,"max":3,"about":"From still air, where it only sways, to gusts that throw the hem up past the rod."},{"name":"Stiffness","min":0,"max":1,"about":"Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones."},{"name":"Pins","min":2,"max":12,"about":"How many clips hold it to the rod, from two corners with a swag between them to every knot along the top."}],"start":[0,2,0,2],"measures":{"motion":0.5789,"detail":0.0244,"edges":0.3966,"complexity":0.9079,"coverage":0.5904,"colour":0.3319,"drift":0.4132},"knobResponse":[0.2963,0.322,0.2371,0.2837]},{"slug":"cloud-chamber","title":"Cloud Chamber","family":"particle","round":27,"note":"과학관의 확산 안개상자를 유리 뚜껑 위에서 내려다봐요. 등줄 빛을 받은 검은 펠트 위로 우주선 뮤온이 가는 직선을 패널 끝까지 긋고, 알파 입자는 짧고 굵은 막대를, 전자는 흐린 실을 남겨요. 자취는 한순간에 맺혔다가 대류를 따라 흘러가며 몇 초 만에 번져 사라져요. K3 은 토륨 막대를 세워 알파 부채를 뿜게 하고, K4 는 자기장으로 전자를 나선으로 감아요.","idea":"A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.","buttons":"K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.","code":"// ===== Patternflow pattern =====\n// Title:   Cloud Chamber\n// Family:  particle\n// Idea:    A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the continuously sensitive diffusion cloud chamber Alexander Langsdorf described in 1939, a descendant of C. T. R. Wilson's expansion cloud chamber\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1\n//\n// Knob 1: Light. The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white.\n// Knob 2: Speed. How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often.\n// Knob 3: Source. A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point.\n// Knob 4: Field. A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way.\n// Buttons: K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.\n\nconst W = 64, H = 128, N = W * H, CAP = 16384, ND = 170, DS = 0.6, SQ = Math.sqrt(DS);\nconst { min, max, floor, ceil, sqrt, exp, sin, cos, log, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst gauss = () => (rnd() + rnd() + rnd() - 1.5) * 2;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p, a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// The mist's sheen: a 64 by 64 tile of soft noise that wraps both ways.\nconst NZ = new Float32Array(4096).map((_, k) => 0.65 * vn((k & 63) / 8, (k >> 6) / 8, 8) + 0.35 * vn((k & 63) / 4, (k >> 6) / 4, 16));\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, x0 = xi & 63, y0 = (yi & 63) \u003c\u003c 6, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) \u003c\u003c 6;\n  return mix(mix(NZ[y0 + x0], NZ[y0 + x1], u), mix(NZ[y1 + x0], NZ[y1 + x1], u), v);\n}\n// A droplet is a round Gaussian; GL holds exp(-q / 32) out to where it is under 3%.\nconst GN = 112, GL = new Float32Array(GN).map((_, q) => exp(-q / 32));\n// The lamp lights the wall side best; a trail across the chamber is about 0.55 as bright.\nconst LIT = new Float32Array(W).map((_, x) => 0.48 + 0.52 * exp(-x / 30));\nconst STRIP = new Float32Array(H).map((_, y) => 0.86 + 0.14 * hash(y >> 2, 3));\n\n// Lamps: colour, near glow, its width in LEDs, far glow, drizzle, trails.\n// The laser sheet lights only the sensitive layer, so its trails stand out hardest.\nconst LAMPS = [\n  [0.6, 0.8, 1, 0.28, 6, 0.035, 1, 1],\n  [1, 0.9, 0.72, 0.3, 13, 0.1, 0.9, 0.9],\n  [0.4, 1, 0.6, 0.15, 3.5, 0.03, 1.3, 1.25],\n  [0.7, 0.46, 1, 0.3, 8, 0.08, 1.15, 0.9],\n];\n\n// Trail kinds: droplet radius, line brightness, life in seconds, how fast the\n// trail spreads (LED squared a second), bending radius in a full field,\n// scatter, bead spread, missing droplets, brightening toward the end, whether\n// it slows to a stop (curling tighter), delta rays per LED.\nconst kind = (sig, I, life, D, R, sc, bead, gap, br, slow, dl) => ({ sig, I, life, D, R, sc, bead, gap, br, slow, dl });\nconst MU = kind(0.5, 0.85, 3.4, 0.16, 380, 0.004, 0.55, 0.08, 0, 0, 1 / 170);\nconst BE = kind(0.46, 0.7, 2.9, 0.2, 16, 0.085, 0.7, 0.28, 0.9, 1, 0);\nconst DE = kind(0.44, 0.65, 2.6, 0.2, 5, 0.12, 0.6, 0.2, 0.7, 1, 0);\nconst AL = kind(0.7, 1.9, 4, 0.14, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\n// Source alphas are a touch thinner and go sooner, so the fan reads ray by ray.\nconst AS = kind(0.6, 1.6, 2.6, 0.12, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\nconst PR = kind(0.6, 1.3, 3.8, 0.18, 900, 0.01, 0.3, 0.02, 0.35, 0, 1 / 90);\n// The thoriated rod's tip.\nconst SX = 40.5, SY = 117.5;\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  params.s = {\n    T: F(N), U: F(153), V: F(153), PX: F(CAP), PY: F(CAP), PU: F(CAP), PV: F(CAP), PB: D(CAP), PL: F(CAP), PS: F(CAP), PK: F(CAP), PD: F(CAP),\n    DX: F(ND), DY: F(ND), DB: D(ND), DL: F(ND), DA: F(ND), head: 0, tail: 0, tf: 0, td: 0, wr: 99, tw: -99, ox: 0, oy: 0,\n    tsf: 1, tsd: 1, field: 0.06, src: 0, lamp: [...LAMPS[0]], k1: -1, live: 0, pend: [], cnt: [0, 0, 0, 0, 0, 0, 0].map(() => -log(1 - rnd())),\n  };\n  const S = params.s;\n  for (let j = 0; j \u003c ND; j++) drop(S, j, -rnd() * 1.4);\n}\n\nfunction puff(S, x, y, sig, I, life, D) {\n  const i = S.head++ & (CAP - 1), a = rnd() * 6.283, v = 0.1 + 0.35 * rnd();\n  if (S.head - S.tail > CAP) S.tail = S.head - CAP;\n  S.PX[i] = x;\n  S.PY[i] = y;\n  // Each droplet wanders a little on its own, so an old trail frays.\n  S.PU[i] = v * cos(a);\n  S.PV[i] = v * sin(a);\n  S.PB[i] = S.tf;\n  S.PL[i] = life * (0.85 + 0.3 * rnd());\n  S.PS[i] = 2 * sig * sig;\n  // Scaled so a line of droplets DS apart peaks at I.\n  S.PK[i] = I * sig * DS * 0.798;\n  S.PD[i] = D;\n}\n\n// Lays a trail of droplets from x, y heading th. A charge q bends it in the\n// field; a slowing particle bends tighter and scatters more toward its end.\n// With clip set it starts outside and stops once it has crossed the panel.\nfunction trail(S, x, y, th, len, k, q, R0, clip, I = k.I) {\n  const n = max(1, ceil(len / DS)), f = S.field, life = k.life * (0.85 + 0.3 * rnd());\n  let inside = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const rem = 1 - j / n, inn = x > -2 && x \u003c W + 2 && y > -2 && y \u003c H + 2;\n    if (clip) {\n      if (inn) inside = 1;\n      else if (inside) break;\n    }\n    if (inn && rnd() >= k.gap) puff(S, x, y, k.sig * (1 + 0.3 * k.br * (1 - rem) ** 2), I * (1 + k.bead * (rnd() * 2 - 1)) * (1 + k.br * (1 - rem) ** 2), life, k.D);\n    // A knock-on electron kicked sideways out of the trail.\n    if (k.dl && inn && rnd() \u003c k.dl * DS) {\n      const s = rnd() \u003c 0.5 ? -1 : 1;\n      trail(S, x, y, th + s * (0.9 + 0.6 * rnd()), 3 + 11 * rnd(), DE, -1, 2 + 5 * rnd(), 0);\n    }\n    const R = R0 * (k.slow ? sqrt(rem + 0.03) : 1);\n    th += q * min(0.5, (f * DS) / R) + (k.sc * gauss() * SQ) / (k.slow ? sqrt(rem + 0.12) : 1);\n    x += cos(th) * DS;\n    y += sin(th) * DS;\n  }\n  return [x, y, th];\n}\n\nconst beta = (S, x, y, th, len) => trail(S, x, y, th, len, BE, rnd() \u003c 0.9 ? -1 : 1, 8 + 22 * rnd(), 0);\n\n// A muon through a point of the chamber; most cross it the long way.\nfunction muon(S, px, py, th) {\n  const stop = rnd() \u003c 0.1, len = stop ? 170 + 60 * rnd() : 400;\n  const e = trail(S, px - cos(th) * 170, py - sin(th) * 170, th, len, MU, rnd() \u003c 0.55 ? 1 : -1, 220 + 380 * rnd(), 1);\n  // One that stops in the chamber decays: an electron leaves its end at an angle.\n  if (stop && e[0] > 0 && e[0] \u003c W && e[1] > 0 && e[1] \u003c H) beta(S, e[0], e[1], e[2] + (rnd() \u003c 0.5 ? -1 : 1) * (0.6 + 1.8 * rnd()), 30 + 30 * rnd());\n}\nconst steep = () => (rnd() \u003c 0.62 ? PI / 2 + 0.45 * gauss() + (rnd() \u003c 0.5 ? PI : 0) : rnd() * 2 * PI);\n\n// An alpha: short, thick, dead straight, thickest at its end. Now and then it\n// glances off a nucleus near its end and the recoil leaves a stub: a fork.\nfunction alpha(S, x, y, th, len) {\n  if (rnd() \u003c 0.14 && len > 7) {\n    const e = trail(S, x, y, th, len * 0.75, AL, 1, 6000, 0, AL.I * 0.9), s = rnd() \u003c 0.5 ? -1 : 1;\n    trail(S, e[0], e[1], e[2] + s * (0.4 + 0.6 * rnd()), len * 0.3, AL, 1, 6000, 0);\n    trail(S, e[0], e[1], e[2] - s * (0.9 + 0.6 * rnd()), 1.5 + 2 * rnd(), AL, 1, 6000, 0, AL.I * 1.3);\n  } else trail(S, x, y, th, len, AL, 1, 6000, 0);\n}\n\n// A cosmic proton breaks up a nucleus: a thin track in and a star of thick prongs.\nfunction star(S) {\n  const x = 10 + 44 * rnd(), y = 16 + 96 * rnd(), th = steep();\n  trail(S, x - cos(th) * 90, y - sin(th) * 90, th, 90, MU, 1, 600, 0);\n  for (let j = 0, n = 2 + floor(rnd() * 3); j \u003c n; j++) trail(S, x, y, rnd() * 2 * PI, 5 + 16 * rnd(), PR, 1, 900, 0);\n  if (rnd() \u003c 0.5) trail(S, x, y, th + gauss() * 0.6, 40 + 40 * rnd(), MU, rnd() \u003c 0.5 ? 1 : -1, 300, 1);\n}\n\n// A shower: one direction for all, muons in parallel and electrons beside them.\nfunction shower(S) {\n  const th = steep(), c = cos(th), s = sin(th), n = 7 + floor(rnd() * 5);\n  for (let j = 0; j \u003c n; j++) {\n    const o = (rnd() * 2 - 1) * 34;\n    muon(S, 32 - s * o + c * gauss() * 20, 64 + c * o + s * gauss() * 20, th + 0.012 * gauss());\n  }\n  for (let j = 0, m = 3 + floor(rnd() * 4); j \u003c m; j++) {\n    const o = (rnd() * 2 - 1) * 30, a = (rnd() * 2 - 1) * 50;\n    beta(S, 32 - s * o + c * a, 64 + c * o + s * a, th + 0.2 * gauss(), 25 + 40 * rnd());\n  }\n}\n\nfunction spawn(S, k) {\n  const src = S.src;\n  if (k === 0) muon(S, rnd() * W, rnd() * H, steep());\n  // A steep muon crosses the thin sensitive layer in a few LEDs.\n  else if (k === 1) trail(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd(), MU, 1, 400, 0);\n  else if (k === 2) beta(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 18 + 55 * rnd());\n  // Radon in the air: an alpha anywhere, foreshortened when it leaves the layer.\n  else if (k === 3) alpha(S, 3 + rnd() * (W - 3), rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd() ** 0.7);\n  else if (k === 4) star(S);\n  else if (k === 5) {\n    const t = -PI / 2 + (rnd() * 2 - 1) * 1.35;\n    trail(S, SX + cos(t) * 1.5, SY + 1 + sin(t) * 1.5, t, 11 + 18 * rnd(), AS, 1, 6000, 0);\n  } else if (k === 6 && src > 0.02) {\n    // Thoron off the rod; its daughter decays a fraction of a second later from the same point.\n    const x = cl(SX + gauss() * 13, 4, W - 2), y = SY - 6 - 40 * rnd() ** 1.5;\n    alpha(S, x, y, rnd() * 2 * PI, 6 + 10 * rnd());\n    S.pend.push([S.tf + 0.1 + 0.3 * rnd(), x, y]);\n  }\n}\n\n// The vapour's slow convection on a grid of 9 by 17 nodes, 8 LEDs apart: the\n// curl of a few drifting waves, so it neither piles up nor thins out, and a\n// gentle drift that turns round over a minute or two.\nconst MODES = [[0.09, 0.05, 0.11, 0, 9], [-0.06, 0.08, -0.09, 2, 8], [0.13, -0.11, 0.13, 4, 4], [0.03, 0.12, 0.07, 1.3, 6]];\nfunction flow(S) {\n  const t = S.td, mu = 0.45 * cos(t * 0.05), mv = 0.45 * sin(t * 0.07 + 1);\n  for (let j = 0; j \u003c 17; j++)\n    for (let i = 0; i \u003c 9; i++) {\n      let u = mu, v = mv;\n      for (const [kx, ky, w, p, a] of MODES) {\n        const c = a * cos(kx * i * 8 + ky * j * 8 + w * t + p);\n        u += ky * c;\n        v -= kx * c;\n      }\n      S.U[j * 9 + i] = u;\n      S.V[j * 9 + i] = v;\n    }\n  return [mu, mv];\n}\nfunction vel(S, x, y, out) {\n  const gx = cl(x / 8, 0, 7.999), gy = cl(y / 8, 0, 15.999), i = floor(gx), j = floor(gy), u = gx - i, v = gy - j, k = j * 9 + i;\n  out[0] = mix(mix(S.U[k], S.U[k + 1], u), mix(S.U[k + 9], S.U[k + 10], u), v);\n  out[1] = mix(mix(S.V[k], S.V[k + 1], u), mix(S.V[k + 9], S.V[k + 10], u), v);\n}\n\n// The drizzle: droplets raining out of the mist, seen as they cross the light.\nfunction drop(S, j, b) {\n  S.DX[j] = rnd() * W;\n  S.DY[j] = rnd() * H;\n  S.DB[j] = S.tf + b;\n  S.DL[j] = 0.45 + 1.1 * rnd();\n  S.DA[j] = 0.08 + 0.28 * rnd();\n}\n\nconst UV = new Float32Array(2);\nfunction step(S, d) {\n  const df = d * S.tsf, dd = d * S.tsd;\n  (S.tf += df), (S.td += dd), (S.wr += d);\n  const [mu, mv] = flow(S);\n  (S.ox += mu * dd), (S.oy += mv * dd);\n  // Births run on the fade clock, so the chamber holds as many trails at any speed.\n  if (S.wr > 1.2) {\n    const rate = [0.75, 1.1, 2.4, 0.9, 0.05, 5 * S.src ** 1.5, 0.6 * S.src];\n    for (let k = 0; k \u003c 7; k++) for (S.cnt[k] -= rate[k] * df; S.cnt[k] \u003c= 0; S.cnt[k] -= log(1 - rnd())) spawn(S, k);\n  }\n  for (const p of S.pend) if (p[0] \u003c= S.tf) alpha(S, p[1], p[2], rnd() * 2 * PI, 6 + 10 * rnd()), (p[0] = -1);\n  S.pend = S.pend.filter((p) => p[0] > 0);\n  const { PX, PY, PU, PV, PB, PL } = S;\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1);\n    if (S.tf - PB[i] > PL[i]) continue;\n    vel(S, PX[i], PY[i], UV);\n    PX[i] += (UV[0] + PU[i]) * dd;\n    PY[i] += (UV[1] + PV[i]) * dd;\n  }\n  while (S.tail \u003c S.head && S.tf - PB[S.tail & (CAP - 1)] > PL[S.tail & (CAP - 1)]) S.tail++;\n  for (let j = 0; j \u003c ND; j++) {\n    if (S.tf - S.DB[j] > S.DL[j]) drop(S, j, 0);\n    vel(S, S.DX[j], S.DY[j], UV);\n    S.DX[j] += UV[0] * dd;\n    S.DY[j] += UV[1] * dd;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2, k1 = cl(k[0], 0, 1);\n  (S.field = cl(k[3], 0, 1)), (S.src = cl(k[2], 0, 1)), (S.tsd = sp), (S.tsf = sp ** 0.6);\n  if (k1 !== S.k1) {\n    const f = k1 * 3, a = min(2, floor(f)), u = sm(0, 1, f - a);\n    for (let j = 0; j \u003c 8; j++) S.lamp[j] = mix(LAMPS[a][j], LAMPS[a + 1][j], u);\n    S.k1 = k1;\n  }\n  // Start with the chamber already running.\n  for (; !S.live; S.live = 1) while (S.tf \u003c 4.5) step(S, 1 / 30);\n  const b = input.btnPressed || [];\n  if (b[0]) shower(S);\n  if (b[1] && S.wr > 0.3) (S.tw = S.tf), (S.wr = 0);\n  step(S, cl(dt || 0, 0, 0.1));\n}\n\nfunction splat(T, x, y, s2, a) {\n  const r = sqrt(3.5 * s2), k = 32 / s2, x0 = max(0, ceil(x - 0.5 - r)), x1 = min(W - 1, floor(x - 0.5 + r)), y0 = max(0, ceil(y - 0.5 - r)), y1 = min(H - 1, floor(y - 0.5 + r));\n  for (let py = y0; py \u003c= y1; py++) {\n    const dy = py + 0.5 - y, d2 = dy * dy, o = py * W;\n    for (let px = x0; px \u003c= x1; px++) {\n      const dx = px + 0.5 - x, q = ((dx * dx + d2) * k) | 0;\n      if (q \u003c GN) T[o + px] += a * GL[q];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.live) return;\n  const { T, PX, PY, PB, PL, PS, PK, PD, lamp } = S, tf = S.tf, tin = 0.07 * S.tsf;\n  // After a clear the old trails blur and fade within a second; the mist dims and comes back.\n  const wq = exp(-S.wr / 0.3), wipe = S.wr \u003c 2.5 ? sm(0, 0.25, S.wr) * exp(-S.wr / 1.1) : 0;\n  T.fill(0);\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1), a = tf - PB[i], L = PL[i];\n    if (a > L) continue;\n    const old = PB[i] \u003c S.tw;\n    if (old && S.wr > 2) continue;\n    // Fresh droplets catch the light hardest for the first half second.\n    let s2 = PS[i] + 2 * PD[i] * a, e = min(1, a / tin) * (1 - sm(0.12, 1, a / L)) * (1 + 0.6 * exp(-a / 0.4));\n    if (old) (s2 += 3 * (1 - wq)), (e *= wq);\n    // Once a trail has spread wider than the droplet spacing, every second\n    // or fourth droplet stands for its neighbours.\n    let m = 1;\n    if (s2 > 5) {\n      if (n & 3) continue;\n      m = 4;\n    } else if (s2 > 2.2) {\n      if (n & 1) continue;\n      m = 2;\n    }\n    if (e > 0.004) splat(T, PX[i], PY[i], s2, (m * PK[i] * e) / s2);\n  }\n  // Drizzle, brightest in the light near the wall, heavier just after a clear.\n  const dz = lamp[6] * (1 + 2.5 * wipe);\n  for (let j = 0; j \u003c ND; j++) {\n    const u = (tf - S.DB[j]) / S.DL[j];\n    if (u \u003c= 0 || u >= 1) continue;\n    const x = S.DX[j] - 0.5, y = S.DY[j] - 0.5, xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n    const a = dz * S.DA[j] * sin(u * PI) ** 2 * (0.3 + 0.7 * exp(-S.DX[j] / 16));\n    if (xi \u003c 0 || yi \u003c 0 || xi >= W - 1 || yi >= H - 1) continue;\n    const o = yi * W + xi;\n    T[o] += a * (1 - fx) * (1 - fy);\n    T[o + 1] += a * fx * (1 - fy);\n    T[o + W] += a * (1 - fx) * fy;\n    T[o + W + 1] += a * fx * fy;\n  }\n  const [cr, cg, cb, g1, w1, g2, , tg] = lamp, rod = sm(0.01, 0.06, S.src), mist = 1 - 0.7 * wipe, ox = S.ox, oy = S.oy;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (x === 0) {\n        // The lamp strip itself, through the glass at the chamber's rim.\n        const v = 0.92 * STRIP[y] * (1 - 0.3 * wipe);\n        display.setPixel(0, y, 255 * v * mix(cr, 1, 0.4), 255 * v * mix(cg, 1, 0.4), 255 * v * mix(cb, 1, 0.4));\n        continue;\n      }\n      const n = 0.6 * nz(x * 0.9 - ox * 0.9, y * 0.55 - oy * 0.55) + 0.4 * nz(x * 1.7 - ox * 1.6 + 17, y * 1.1 - oy * 1.4 + 29);\n      const h = (g1 * exp(-(x - 1) / w1) + g2 * exp(-x / 40)) * (1.7 * n * n) * mist;\n      let t = T[i] * LIT[x] * tg, g = 0;\n      // The rod: dull metal lit from the lamp side.\n      if (rod > 0 && y > SY - 0.5 && x > SX - 2 && x \u003c SX + 1) g = rod * (x \u003c SX - 0.5 ? 0.42 : 0.24) * (y \u003c SY + 0.5 ? 1.25 : 1);\n      const v = min(1, (1 - exp(-1.6 * (t + h + g))) * 1.25), wf = 0.8 * sm(0.1, 0.8, t) + 0.6 * g;\n      display.setPixel(x, y, 255 * v * mix(cr, 1, wf), 255 * v * mix(cg, 1, wf), 255 * v * mix(cb, 1, wf));\n    }\n  }\n}\n","layer":{"id":"layer-cloud-chamber","type":"code","name":"cloud-chamber","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cloud Chamber\n// Family:  particle\n// Idea:    A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the continuously sensitive diffusion cloud chamber Alexander Langsdorf described in 1939, a descendant of C. T. R. Wilson's expansion cloud chamber\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1\n//\n// Knob 1: Light. The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white.\n// Knob 2: Speed. How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often.\n// Knob 3: Source. A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point.\n// Knob 4: Field. A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way.\n// Buttons: K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.\n\nconst W = 64, H = 128, N = W * H, CAP = 16384, ND = 170, DS = 0.6, SQ = Math.sqrt(DS);\nconst { min, max, floor, ceil, sqrt, exp, sin, cos, log, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst gauss = () => (rnd() + rnd() + rnd() - 1.5) * 2;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p, a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// The mist's sheen: a 64 by 64 tile of soft noise that wraps both ways.\nconst NZ = new Float32Array(4096).map((_, k) => 0.65 * vn((k & 63) / 8, (k >> 6) / 8, 8) + 0.35 * vn((k & 63) / 4, (k >> 6) / 4, 16));\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, x0 = xi & 63, y0 = (yi & 63) \u003c\u003c 6, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) \u003c\u003c 6;\n  return mix(mix(NZ[y0 + x0], NZ[y0 + x1], u), mix(NZ[y1 + x0], NZ[y1 + x1], u), v);\n}\n// A droplet is a round Gaussian; GL holds exp(-q / 32) out to where it is under 3%.\nconst GN = 112, GL = new Float32Array(GN).map((_, q) => exp(-q / 32));\n// The lamp lights the wall side best; a trail across the chamber is about 0.55 as bright.\nconst LIT = new Float32Array(W).map((_, x) => 0.48 + 0.52 * exp(-x / 30));\nconst STRIP = new Float32Array(H).map((_, y) => 0.86 + 0.14 * hash(y >> 2, 3));\n\n// Lamps: colour, near glow, its width in LEDs, far glow, drizzle, trails.\n// The laser sheet lights only the sensitive layer, so its trails stand out hardest.\nconst LAMPS = [\n  [0.6, 0.8, 1, 0.28, 6, 0.035, 1, 1],\n  [1, 0.9, 0.72, 0.3, 13, 0.1, 0.9, 0.9],\n  [0.4, 1, 0.6, 0.15, 3.5, 0.03, 1.3, 1.25],\n  [0.7, 0.46, 1, 0.3, 8, 0.08, 1.15, 0.9],\n];\n\n// Trail kinds: droplet radius, line brightness, life in seconds, how fast the\n// trail spreads (LED squared a second), bending radius in a full field,\n// scatter, bead spread, missing droplets, brightening toward the end, whether\n// it slows to a stop (curling tighter), delta rays per LED.\nconst kind = (sig, I, life, D, R, sc, bead, gap, br, slow, dl) => ({ sig, I, life, D, R, sc, bead, gap, br, slow, dl });\nconst MU = kind(0.5, 0.85, 3.4, 0.16, 380, 0.004, 0.55, 0.08, 0, 0, 1 / 170);\nconst BE = kind(0.46, 0.7, 2.9, 0.2, 16, 0.085, 0.7, 0.28, 0.9, 1, 0);\nconst DE = kind(0.44, 0.65, 2.6, 0.2, 5, 0.12, 0.6, 0.2, 0.7, 1, 0);\nconst AL = kind(0.7, 1.9, 4, 0.14, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\n// Source alphas are a touch thinner and go sooner, so the fan reads ray by ray.\nconst AS = kind(0.6, 1.6, 2.6, 0.12, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\nconst PR = kind(0.6, 1.3, 3.8, 0.18, 900, 0.01, 0.3, 0.02, 0.35, 0, 1 / 90);\n// The thoriated rod's tip.\nconst SX = 40.5, SY = 117.5;\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  params.s = {\n    T: F(N), U: F(153), V: F(153), PX: F(CAP), PY: F(CAP), PU: F(CAP), PV: F(CAP), PB: D(CAP), PL: F(CAP), PS: F(CAP), PK: F(CAP), PD: F(CAP),\n    DX: F(ND), DY: F(ND), DB: D(ND), DL: F(ND), DA: F(ND), head: 0, tail: 0, tf: 0, td: 0, wr: 99, tw: -99, ox: 0, oy: 0,\n    tsf: 1, tsd: 1, field: 0.06, src: 0, lamp: [...LAMPS[0]], k1: -1, live: 0, pend: [], cnt: [0, 0, 0, 0, 0, 0, 0].map(() => -log(1 - rnd())),\n  };\n  const S = params.s;\n  for (let j = 0; j \u003c ND; j++) drop(S, j, -rnd() * 1.4);\n}\n\nfunction puff(S, x, y, sig, I, life, D) {\n  const i = S.head++ & (CAP - 1), a = rnd() * 6.283, v = 0.1 + 0.35 * rnd();\n  if (S.head - S.tail > CAP) S.tail = S.head - CAP;\n  S.PX[i] = x;\n  S.PY[i] = y;\n  // Each droplet wanders a little on its own, so an old trail frays.\n  S.PU[i] = v * cos(a);\n  S.PV[i] = v * sin(a);\n  S.PB[i] = S.tf;\n  S.PL[i] = life * (0.85 + 0.3 * rnd());\n  S.PS[i] = 2 * sig * sig;\n  // Scaled so a line of droplets DS apart peaks at I.\n  S.PK[i] = I * sig * DS * 0.798;\n  S.PD[i] = D;\n}\n\n// Lays a trail of droplets from x, y heading th. A charge q bends it in the\n// field; a slowing particle bends tighter and scatters more toward its end.\n// With clip set it starts outside and stops once it has crossed the panel.\nfunction trail(S, x, y, th, len, k, q, R0, clip, I = k.I) {\n  const n = max(1, ceil(len / DS)), f = S.field, life = k.life * (0.85 + 0.3 * rnd());\n  let inside = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const rem = 1 - j / n, inn = x > -2 && x \u003c W + 2 && y > -2 && y \u003c H + 2;\n    if (clip) {\n      if (inn) inside = 1;\n      else if (inside) break;\n    }\n    if (inn && rnd() >= k.gap) puff(S, x, y, k.sig * (1 + 0.3 * k.br * (1 - rem) ** 2), I * (1 + k.bead * (rnd() * 2 - 1)) * (1 + k.br * (1 - rem) ** 2), life, k.D);\n    // A knock-on electron kicked sideways out of the trail.\n    if (k.dl && inn && rnd() \u003c k.dl * DS) {\n      const s = rnd() \u003c 0.5 ? -1 : 1;\n      trail(S, x, y, th + s * (0.9 + 0.6 * rnd()), 3 + 11 * rnd(), DE, -1, 2 + 5 * rnd(), 0);\n    }\n    const R = R0 * (k.slow ? sqrt(rem + 0.03) : 1);\n    th += q * min(0.5, (f * DS) / R) + (k.sc * gauss() * SQ) / (k.slow ? sqrt(rem + 0.12) : 1);\n    x += cos(th) * DS;\n    y += sin(th) * DS;\n  }\n  return [x, y, th];\n}\n\nconst beta = (S, x, y, th, len) => trail(S, x, y, th, len, BE, rnd() \u003c 0.9 ? -1 : 1, 8 + 22 * rnd(), 0);\n\n// A muon through a point of the chamber; most cross it the long way.\nfunction muon(S, px, py, th) {\n  const stop = rnd() \u003c 0.1, len = stop ? 170 + 60 * rnd() : 400;\n  const e = trail(S, px - cos(th) * 170, py - sin(th) * 170, th, len, MU, rnd() \u003c 0.55 ? 1 : -1, 220 + 380 * rnd(), 1);\n  // One that stops in the chamber decays: an electron leaves its end at an angle.\n  if (stop && e[0] > 0 && e[0] \u003c W && e[1] > 0 && e[1] \u003c H) beta(S, e[0], e[1], e[2] + (rnd() \u003c 0.5 ? -1 : 1) * (0.6 + 1.8 * rnd()), 30 + 30 * rnd());\n}\nconst steep = () => (rnd() \u003c 0.62 ? PI / 2 + 0.45 * gauss() + (rnd() \u003c 0.5 ? PI : 0) : rnd() * 2 * PI);\n\n// An alpha: short, thick, dead straight, thickest at its end. Now and then it\n// glances off a nucleus near its end and the recoil leaves a stub: a fork.\nfunction alpha(S, x, y, th, len) {\n  if (rnd() \u003c 0.14 && len > 7) {\n    const e = trail(S, x, y, th, len * 0.75, AL, 1, 6000, 0, AL.I * 0.9), s = rnd() \u003c 0.5 ? -1 : 1;\n    trail(S, e[0], e[1], e[2] + s * (0.4 + 0.6 * rnd()), len * 0.3, AL, 1, 6000, 0);\n    trail(S, e[0], e[1], e[2] - s * (0.9 + 0.6 * rnd()), 1.5 + 2 * rnd(), AL, 1, 6000, 0, AL.I * 1.3);\n  } else trail(S, x, y, th, len, AL, 1, 6000, 0);\n}\n\n// A cosmic proton breaks up a nucleus: a thin track in and a star of thick prongs.\nfunction star(S) {\n  const x = 10 + 44 * rnd(), y = 16 + 96 * rnd(), th = steep();\n  trail(S, x - cos(th) * 90, y - sin(th) * 90, th, 90, MU, 1, 600, 0);\n  for (let j = 0, n = 2 + floor(rnd() * 3); j \u003c n; j++) trail(S, x, y, rnd() * 2 * PI, 5 + 16 * rnd(), PR, 1, 900, 0);\n  if (rnd() \u003c 0.5) trail(S, x, y, th + gauss() * 0.6, 40 + 40 * rnd(), MU, rnd() \u003c 0.5 ? 1 : -1, 300, 1);\n}\n\n// A shower: one direction for all, muons in parallel and electrons beside them.\nfunction shower(S) {\n  const th = steep(), c = cos(th), s = sin(th), n = 7 + floor(rnd() * 5);\n  for (let j = 0; j \u003c n; j++) {\n    const o = (rnd() * 2 - 1) * 34;\n    muon(S, 32 - s * o + c * gauss() * 20, 64 + c * o + s * gauss() * 20, th + 0.012 * gauss());\n  }\n  for (let j = 0, m = 3 + floor(rnd() * 4); j \u003c m; j++) {\n    const o = (rnd() * 2 - 1) * 30, a = (rnd() * 2 - 1) * 50;\n    beta(S, 32 - s * o + c * a, 64 + c * o + s * a, th + 0.2 * gauss(), 25 + 40 * rnd());\n  }\n}\n\nfunction spawn(S, k) {\n  const src = S.src;\n  if (k === 0) muon(S, rnd() * W, rnd() * H, steep());\n  // A steep muon crosses the thin sensitive layer in a few LEDs.\n  else if (k === 1) trail(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd(), MU, 1, 400, 0);\n  else if (k === 2) beta(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 18 + 55 * rnd());\n  // Radon in the air: an alpha anywhere, foreshortened when it leaves the layer.\n  else if (k === 3) alpha(S, 3 + rnd() * (W - 3), rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd() ** 0.7);\n  else if (k === 4) star(S);\n  else if (k === 5) {\n    const t = -PI / 2 + (rnd() * 2 - 1) * 1.35;\n    trail(S, SX + cos(t) * 1.5, SY + 1 + sin(t) * 1.5, t, 11 + 18 * rnd(), AS, 1, 6000, 0);\n  } else if (k === 6 && src > 0.02) {\n    // Thoron off the rod; its daughter decays a fraction of a second later from the same point.\n    const x = cl(SX + gauss() * 13, 4, W - 2), y = SY - 6 - 40 * rnd() ** 1.5;\n    alpha(S, x, y, rnd() * 2 * PI, 6 + 10 * rnd());\n    S.pend.push([S.tf + 0.1 + 0.3 * rnd(), x, y]);\n  }\n}\n\n// The vapour's slow convection on a grid of 9 by 17 nodes, 8 LEDs apart: the\n// curl of a few drifting waves, so it neither piles up nor thins out, and a\n// gentle drift that turns round over a minute or two.\nconst MODES = [[0.09, 0.05, 0.11, 0, 9], [-0.06, 0.08, -0.09, 2, 8], [0.13, -0.11, 0.13, 4, 4], [0.03, 0.12, 0.07, 1.3, 6]];\nfunction flow(S) {\n  const t = S.td, mu = 0.45 * cos(t * 0.05), mv = 0.45 * sin(t * 0.07 + 1);\n  for (let j = 0; j \u003c 17; j++)\n    for (let i = 0; i \u003c 9; i++) {\n      let u = mu, v = mv;\n      for (const [kx, ky, w, p, a] of MODES) {\n        const c = a * cos(kx * i * 8 + ky * j * 8 + w * t + p);\n        u += ky * c;\n        v -= kx * c;\n      }\n      S.U[j * 9 + i] = u;\n      S.V[j * 9 + i] = v;\n    }\n  return [mu, mv];\n}\nfunction vel(S, x, y, out) {\n  const gx = cl(x / 8, 0, 7.999), gy = cl(y / 8, 0, 15.999), i = floor(gx), j = floor(gy), u = gx - i, v = gy - j, k = j * 9 + i;\n  out[0] = mix(mix(S.U[k], S.U[k + 1], u), mix(S.U[k + 9], S.U[k + 10], u), v);\n  out[1] = mix(mix(S.V[k], S.V[k + 1], u), mix(S.V[k + 9], S.V[k + 10], u), v);\n}\n\n// The drizzle: droplets raining out of the mist, seen as they cross the light.\nfunction drop(S, j, b) {\n  S.DX[j] = rnd() * W;\n  S.DY[j] = rnd() * H;\n  S.DB[j] = S.tf + b;\n  S.DL[j] = 0.45 + 1.1 * rnd();\n  S.DA[j] = 0.08 + 0.28 * rnd();\n}\n\nconst UV = new Float32Array(2);\nfunction step(S, d) {\n  const df = d * S.tsf, dd = d * S.tsd;\n  (S.tf += df), (S.td += dd), (S.wr += d);\n  const [mu, mv] = flow(S);\n  (S.ox += mu * dd), (S.oy += mv * dd);\n  // Births run on the fade clock, so the chamber holds as many trails at any speed.\n  if (S.wr > 1.2) {\n    const rate = [0.75, 1.1, 2.4, 0.9, 0.05, 5 * S.src ** 1.5, 0.6 * S.src];\n    for (let k = 0; k \u003c 7; k++) for (S.cnt[k] -= rate[k] * df; S.cnt[k] \u003c= 0; S.cnt[k] -= log(1 - rnd())) spawn(S, k);\n  }\n  for (const p of S.pend) if (p[0] \u003c= S.tf) alpha(S, p[1], p[2], rnd() * 2 * PI, 6 + 10 * rnd()), (p[0] = -1);\n  S.pend = S.pend.filter((p) => p[0] > 0);\n  const { PX, PY, PU, PV, PB, PL } = S;\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1);\n    if (S.tf - PB[i] > PL[i]) continue;\n    vel(S, PX[i], PY[i], UV);\n    PX[i] += (UV[0] + PU[i]) * dd;\n    PY[i] += (UV[1] + PV[i]) * dd;\n  }\n  while (S.tail \u003c S.head && S.tf - PB[S.tail & (CAP - 1)] > PL[S.tail & (CAP - 1)]) S.tail++;\n  for (let j = 0; j \u003c ND; j++) {\n    if (S.tf - S.DB[j] > S.DL[j]) drop(S, j, 0);\n    vel(S, S.DX[j], S.DY[j], UV);\n    S.DX[j] += UV[0] * dd;\n    S.DY[j] += UV[1] * dd;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2, k1 = cl(k[0], 0, 1);\n  (S.field = cl(k[3], 0, 1)), (S.src = cl(k[2], 0, 1)), (S.tsd = sp), (S.tsf = sp ** 0.6);\n  if (k1 !== S.k1) {\n    const f = k1 * 3, a = min(2, floor(f)), u = sm(0, 1, f - a);\n    for (let j = 0; j \u003c 8; j++) S.lamp[j] = mix(LAMPS[a][j], LAMPS[a + 1][j], u);\n    S.k1 = k1;\n  }\n  // Start with the chamber already running.\n  for (; !S.live; S.live = 1) while (S.tf \u003c 4.5) step(S, 1 / 30);\n  const b = input.btnPressed || [];\n  if (b[0]) shower(S);\n  if (b[1] && S.wr > 0.3) (S.tw = S.tf), (S.wr = 0);\n  step(S, cl(dt || 0, 0, 0.1));\n}\n\nfunction splat(T, x, y, s2, a) {\n  const r = sqrt(3.5 * s2), k = 32 / s2, x0 = max(0, ceil(x - 0.5 - r)), x1 = min(W - 1, floor(x - 0.5 + r)), y0 = max(0, ceil(y - 0.5 - r)), y1 = min(H - 1, floor(y - 0.5 + r));\n  for (let py = y0; py \u003c= y1; py++) {\n    const dy = py + 0.5 - y, d2 = dy * dy, o = py * W;\n    for (let px = x0; px \u003c= x1; px++) {\n      const dx = px + 0.5 - x, q = ((dx * dx + d2) * k) | 0;\n      if (q \u003c GN) T[o + px] += a * GL[q];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.live) return;\n  const { T, PX, PY, PB, PL, PS, PK, PD, lamp } = S, tf = S.tf, tin = 0.07 * S.tsf;\n  // After a clear the old trails blur and fade within a second; the mist dims and comes back.\n  const wq = exp(-S.wr / 0.3), wipe = S.wr \u003c 2.5 ? sm(0, 0.25, S.wr) * exp(-S.wr / 1.1) : 0;\n  T.fill(0);\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1), a = tf - PB[i], L = PL[i];\n    if (a > L) continue;\n    const old = PB[i] \u003c S.tw;\n    if (old && S.wr > 2) continue;\n    // Fresh droplets catch the light hardest for the first half second.\n    let s2 = PS[i] + 2 * PD[i] * a, e = min(1, a / tin) * (1 - sm(0.12, 1, a / L)) * (1 + 0.6 * exp(-a / 0.4));\n    if (old) (s2 += 3 * (1 - wq)), (e *= wq);\n    // Once a trail has spread wider than the droplet spacing, every second\n    // or fourth droplet stands for its neighbours.\n    let m = 1;\n    if (s2 > 5) {\n      if (n & 3) continue;\n      m = 4;\n    } else if (s2 > 2.2) {\n      if (n & 1) continue;\n      m = 2;\n    }\n    if (e > 0.004) splat(T, PX[i], PY[i], s2, (m * PK[i] * e) / s2);\n  }\n  // Drizzle, brightest in the light near the wall, heavier just after a clear.\n  const dz = lamp[6] * (1 + 2.5 * wipe);\n  for (let j = 0; j \u003c ND; j++) {\n    const u = (tf - S.DB[j]) / S.DL[j];\n    if (u \u003c= 0 || u >= 1) continue;\n    const x = S.DX[j] - 0.5, y = S.DY[j] - 0.5, xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n    const a = dz * S.DA[j] * sin(u * PI) ** 2 * (0.3 + 0.7 * exp(-S.DX[j] / 16));\n    if (xi \u003c 0 || yi \u003c 0 || xi >= W - 1 || yi >= H - 1) continue;\n    const o = yi * W + xi;\n    T[o] += a * (1 - fx) * (1 - fy);\n    T[o + 1] += a * fx * (1 - fy);\n    T[o + W] += a * (1 - fx) * fy;\n    T[o + W + 1] += a * fx * fy;\n  }\n  const [cr, cg, cb, g1, w1, g2, , tg] = lamp, rod = sm(0.01, 0.06, S.src), mist = 1 - 0.7 * wipe, ox = S.ox, oy = S.oy;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (x === 0) {\n        // The lamp strip itself, through the glass at the chamber's rim.\n        const v = 0.92 * STRIP[y] * (1 - 0.3 * wipe);\n        display.setPixel(0, y, 255 * v * mix(cr, 1, 0.4), 255 * v * mix(cg, 1, 0.4), 255 * v * mix(cb, 1, 0.4));\n        continue;\n      }\n      const n = 0.6 * nz(x * 0.9 - ox * 0.9, y * 0.55 - oy * 0.55) + 0.4 * nz(x * 1.7 - ox * 1.6 + 17, y * 1.1 - oy * 1.4 + 29);\n      const h = (g1 * exp(-(x - 1) / w1) + g2 * exp(-x / 40)) * (1.7 * n * n) * mist;\n      let t = T[i] * LIT[x] * tg, g = 0;\n      // The rod: dull metal lit from the lamp side.\n      if (rod > 0 && y > SY - 0.5 && x > SX - 2 && x \u003c SX + 1) g = rod * (x \u003c SX - 0.5 ? 0.42 : 0.24) * (y \u003c SY + 0.5 ? 1.25 : 1);\n      const v = min(1, (1 - exp(-1.6 * (t + h + g))) * 1.25), wf = 0.8 * sm(0.1, 0.8, t) + 0.6 * g;\n      display.setPixel(x, y, 255 * v * mix(cr, 1, wf), 255 * v * mix(cg, 1, wf), 255 * v * mix(cb, 1, wf));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often."},{"name":"Source","min":0,"max":1,"about":"A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point."},{"name":"Field","min":0,"max":1,"about":"A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way."}],"start":[0,2,0,0.06],"measures":{"motion":0.104,"detail":0.0456,"edges":0.3473,"complexity":1.374,"coverage":0.2504,"colour":0.0521,"drift":0.0923},"knobResponse":[0.046,0.1102,0.1287,0.0714]},{"slug":"constant-width","title":"Constant Width","family":"geometry","round":35,"note":"너비 62 LED 의 통로를 폭이 일정한 곡선이 위아래로 맞닿아 쌓인 채 내려가요. 뢸로 삼각형과 오각형, 칠각형, 홀수 배음으로 지은 매끈한 곡선과 원이 저마다 다른 빠르기로 도는데도 늘 두 벽과 위아래 경계선에 닿고, 닿은 자리마다 흰 점이 서요. K3 은 곡선마다 같은 너비의 원을 섞어 둘레 194.8 은 그대로 두고 삼각형의 넓이 2709 LED 를 원의 3019 까지 부풀리고, K1 을 누르면 꼭짓점이 지나간 길이 금색으로 남아 삼각형이 귀만 둥근 정사각형을 그려요.","idea":"A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.","buttons":"K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.","code":"// ===== Patternflow pattern =====\n// Title:   Constant Width\n// Family:  geometry\n// Idea:    A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Curves of constant width, the Reuleaux polygons (Franz Reuleaux, 1876), and Barbier's theorem that they all have perimeter pi times their width (Joseph-Émile Barbier, 1860)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1\n//\n// Knob 1: Hue. Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive.\n// Knob 2: Speed. How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100.\n// Knob 3: Round. Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way.\n// Knob 4: Spin. How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that.\n// Buttons: K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.\n\nconst W = 64, H = 128, WD = 62, N = 256, CYCLE = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The eight curves of the cycle, all of width WD. A Reuleaux n-gon is the\n// intersection of the n disks of radius WD centred on the corners of a\n// regular n-gon whose corner-to-far-corner distance is WD. A harmonic curve\n// has support function h = WD/2 + sum a cos(k t + c) over odd k from 3 up:\n// odd k is what makes h(t) + h(t + pi) = WD, the width in every direction,\n// and the radius of curvature h + h'' = WD/2 - sum a (k^2 - 1) cos(k t + c)\n// stays above 0, so it is convex. The amplitudes below keep that radius at\n// least 2 LEDs.\nconst SHAPES = [\n  { n: 3 },\n  { harm: [[3, 3.6, 0]] },\n  { n: 5 },\n  { harm: [[3, 2.2, 0], [5, 0.5, 1.1]] },\n  { n: 7 },\n  { disc: true },\n  { n: 3 },\n  { harm: [[3, 2.6, 0], [7, 0.16, 2.0]] },\n];\n// Base hue and brightness for each place in the cycle. The sharp curves are\n// lit brighter than the smooth ones, so the column reads as light and deep\n// shapes taking turns as it slides. The map's drift comes mostly from the\n// dark corners of each square, which swing round as the curves turn: with\n// all eight at one brightness it reads 0.263, with these 0.277.\nconst BASE = [[0.13, 0.86], [0.76, 0.55], [0.95, 0.86], [0.6, 0.55], [0.48, 0.86], [0.68, 0.55], [0.3, 0.86], [0.54, 0.55]];\n// The body angles each curve's trace follows: the n corners of a Reuleaux\n// polygon and the k peaks of a curve with one harmonic, which all run round\n// the same path, and for a curve of two harmonics the one point where its\n// support function peaks, since its corners are not alike and each would\n// draw a path of its own.\nfor (const s of SHAPES) {\n  if (s.n) s.tr = Array.from({ length: s.n }, (_, c) => (TAU * c) / s.n);\n  else if (s.harm && s.harm.length === 1) {\n    const [k, , c0] = s.harm[0];\n    s.tr = Array.from({ length: k }, (_, m) => (TAU * m - c0) / k);\n  } else if (s.harm) {\n    let best = -1e9, at = 0;\n    for (let i = 0; i \u003c 3600; i++) {\n      const b = (TAU * i) / 3600;\n      let h = 0;\n      for (const [k, a, c] of s.harm) h += a * cos(k * b + c);\n      if (h > best) (best = h), (at = b);\n    }\n    s.tr = [at];\n  } else s.tr = [0];\n}\n\n// Support function h and its derivative at body angle b, for a curve mixed\n// a share t of the way to the disc.\nfunction support(s, b, t, out) {\n  let h, d;\n  if (s.n) {\n    const n = s.n, R = WD / (2 * cos(PI / (2 * n))), step = TAU / n, half = PI / (2 * n);\n    let del = b - round(b / step) * step;\n    if (abs(del) \u003c= half) (h = R * cos(del)), (d = -R * sin(del));\n    else {\n      // The opposite direction falls in a corner's cone, so here the curve\n      // is the arc of radius WD round that corner.\n      const b2 = b + PI;\n      del = b2 - round(b2 / step) * step;\n      (h = WD - R * cos(del)), (d = R * sin(del));\n    }\n  } else if (s.harm) {\n    (h = WD / 2), (d = 0);\n    for (const [k, a, c] of s.harm) (h += a * cos(k * b + c)), (d -= a * k * sin(k * b + c));\n  } else (h = WD / 2), (d = 0);\n  out[0] = (1 - t) * h + (t * WD) / 2;\n  out[1] = (1 - t) * d;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, round: 0, spin: 0.06,\n    // The column's slide in rows and the spin clock in radians.\n    slide: 15, clock: 0,\n    trace: false, traces: new Map(),\n    px: new Float32Array(N), py: new Float32Array(N),\n    xl: new Float32Array(H), xr: new Float32Array(H),\n    lab: new Int8Array(W * H), rgb: new Float32Array(W * H * 3),\n    col: new Float32Array(CYCLE * 6), colHue: NaN, sup: new Float32Array(2),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.round = cl(k[2], 0, 1);\n  P.spin = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.trace = !P.trace;\n    P.traces.clear();\n  }\n  P.slide += d * P.speed * 3;\n  P.clock += d * (0.4 + 2.6 * P.spin);\n}\n\n// The angle a curve in slot j has turned to: neighbours turn opposite ways,\n// each at a rate between 0.7 and 1.3 times the clock, from a start of its own.\nconst angle = (j, clock) => hash(j * 3 + 1) * TAU + (j & 1 ? -1 : 1) * (0.7 + 0.6 * hash(j * 3 + 2)) * clock;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { px, py, xl, xr, lab, rgb, col, sup, traces } = P;\n  if (P.colHue !== P.hue) {\n    // Fill and rim colours for each place in the cycle. The rim is the fill\n    // pushed to full brightness and halfway to white, at least 40 levels\n    // above every fill so it reads as a hard line.\n    // A deep fill from orange round to lime reads as brown or olive, so in\n    // that band the deep curves are lifted toward the light ones' level and\n    // paled a little.\n    for (let c = 0; c \u003c CYCLE; c++) {\n      const h = P.hue + BASE[c][0], hf = h - floor(h), band = BASE[c][1] \u003c 0.7 ? max(0, 1 - abs(hf - 0.14) / 0.15) : 0;\n      hsv(h, 0.8 - 0.22 * band, (BASE[c][1] + 0.3 * band) * 0.94, col, c * 6);\n      hsv(h, 0.45, 1, col, c * 6 + 3);\n    }\n    P.colHue = P.hue;\n  }\n  lab.fill(0);\n  rgb.fill(0);\n  // Slot j's top line sits at row slide - j * WD: the slots stack upward\n  // with j and the column slides down as slide grows.\n  const jLo = floor((P.slide - H) / WD), jHi = ceil(P.slide / WD);\n  const vis = [];\n  for (let j = jLo; j \u003c= jHi; j++) {\n    const top = P.slide - j * WD;\n    if (top >= H || top + WD \u003c= 0) continue;\n    const shape = SHAPES[((j % CYCLE) + CYCLE) % CYCLE], phi = angle(j, P.clock);\n    // Boundary points from the support function, panel direction a = 2 pi i\n    // / N: the point is h u(a) + h' u'(a) with the body angle a - phi. The\n    // panel's y runs down, so i = N/2 faces the left wall and 3N/4 faces up.\n    for (let i = 0; i \u003c N; i++) {\n      const a = (TAU * i) / N, ca = cos(a), sa = sin(a);\n      support(shape, a - phi, P.round, sup);\n      px[i] = sup[0] * ca - sup[1] * sa;\n      py[i] = sup[0] * sa + sup[1] * ca;\n    }\n    // The left support line on the inner face of the left wall, x = 1, and\n    // the top one on the slot's top line. The width is WD in every\n    // direction, so the right one lands on x = 63 and the bottom one on the\n    // next slot's top line without being placed there.\n    const ox = 1 - px[N / 2], oy = top - py[(3 * N) / 4];\n    const label = vis.length + 1;\n    xl.fill(1e9);\n    xr.fill(-1e9);\n    for (let i = 0; i \u003c N; i++) {\n      const xa = px[i] + ox, ya = py[i] + oy, i2 = (i + 1) % N, xb = px[i2] + ox, yb = py[i2] + oy;\n      if (ya === yb) continue;\n      const r0 = max(0, ceil(min(ya, yb) - 0.5)), r1 = min(H - 1, floor(max(ya, yb) - 0.5));\n      for (let r = r0; r \u003c= r1; r++) {\n        const x = xa + ((r + 0.5 - ya) * (xb - xa)) / (yb - ya);\n        if (x \u003c xl[r]) xl[r] = x;\n        if (x > xr[r]) xr[r] = x;\n      }\n    }\n    for (let r = max(0, floor(top)); r \u003c= min(H - 1, ceil(top + WD)); r++) {\n      if (xr[r] \u003c xl[r]) continue;\n      const x0 = max(1, ceil(xl[r] - 0.5)), x1 = min(W - 2, floor(xr[r] - 0.5));\n      for (let x = x0; x \u003c= x1; x++) lab[r * W + x] = label;\n    }\n    vis.push({\n      j, top, c: ((j % CYCLE) + CYCLE) % CYCLE, shape, phi, ox, oy,\n      left: py[N / 2] + oy, right: py[0] + oy, upX: px[(3 * N) / 4] + ox, downX: px[N / 4] + ox,\n    });\n  }\n  // Fill, with a rim wherever a 4-neighbour belongs to something else.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, l = lab[p];\n      if (!l) continue;\n      const rim = lab[p - 1] !== l || lab[p + 1] !== l || (y > 0 && lab[p - W] !== l) || (y \u003c H - 1 && lab[p + W] !== l);\n      const o = vis[l - 1].c * 6 + (rim ? 3 : 0), q = p * 3;\n      (rgb[q] = col[o]), (rgb[q + 1] = col[o + 1]), (rgb[q + 2] = col[o + 2]);\n    }\n  // The walls: dim slate, brighter where a slot's line meets them, and white\n  // over five rows where a curve touches them.\n  for (let y = 0; y \u003c H; y++)\n    for (const x of [0, W - 1]) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = 0.14), (rgb[q + 1] = 0.18), (rgb[q + 2] = 0.24);\n    }\n  const dot = (x, y, r, g, b) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    (rgb[q] = r), (rgb[q + 1] = g), (rgb[q + 2] = b);\n  };\n  for (const v of vis) {\n    const ty = floor(v.top);\n    for (const x of [0, W - 1]) dot(x, ty, 0.55, 0.6, 0.7);\n    for (let e = -2; e \u003c= 2; e++) dot(0, floor(v.left) + e, 1, 1, 1), dot(W - 1, floor(v.right) + e, 1, 1, 1);\n    // Above and below: a small white cross where the curve meets the line.\n    for (const [cx, cy] of [[v.upX, v.top], [v.downX, v.top + WD]]) {\n      const x = floor(cx), y = floor(cy - (cy === v.top ? 0 : 1e-3));\n      dot(x, y, 1, 1, 1), dot(x - 1, y, 1, 1, 1), dot(x + 1, y, 1, 1, 1), dot(x, y - 1, 1, 1, 1), dot(x, y + 1, 1, 1, 1);\n    }\n  }\n  // The corner trace, kept in each slot's own square so it slides with it.\n  if (P.trace) {\n    const seen = new Set();\n    for (const v of vis) {\n      seen.add(v.j);\n      let t = traces.get(v.j);\n      if (!t) traces.set(v.j, (t = { xs: [], ys: [], last: null }));\n      const tr = v.shape.tr, m = tr.length, now = [];\n      for (let c = 0; c \u003c m; c++) {\n        // At a peak of the support function h' is 0, so the point is h times\n        // the unit vector there.\n        const a = tr[c] + v.phi;\n        support(v.shape, tr[c], P.round, sup);\n        const ca = cos(a), sa = sin(a);\n        now.push([sup[0] * ca - sup[1] * sa + v.ox, sup[0] * sa + sup[1] * ca + v.oy - v.top]);\n      }\n      if (t.xs.length \u003c 12000)\n        for (let c = 0; c \u003c m; c++) {\n          const [x1, y1] = now[c], [x0, y0] = t.last ? t.last[c] : now[c];\n          const steps = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.7));\n          for (let s = 1; s \u003c= steps; s++) t.xs.push(x0 + ((x1 - x0) * s) / steps), t.ys.push(y0 + ((y1 - y0) * s) / steps);\n        }\n      t.last = now;\n      for (let i = 0; i \u003c t.xs.length; i++) dot(floor(t.xs[i]), floor(t.ys[i] + v.top), 1, 0.78, 0.25);\n    }\n    for (const j of traces.keys()) if (!seen.has(j)) traces.delete(j);\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-constant-width","type":"code","name":"constant-width","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Constant Width\n// Family:  geometry\n// Idea:    A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Curves of constant width, the Reuleaux polygons (Franz Reuleaux, 1876), and Barbier's theorem that they all have perimeter pi times their width (Joseph-Émile Barbier, 1860)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1\n//\n// Knob 1: Hue. Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive.\n// Knob 2: Speed. How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100.\n// Knob 3: Round. Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way.\n// Knob 4: Spin. How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that.\n// Buttons: K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.\n\nconst W = 64, H = 128, WD = 62, N = 256, CYCLE = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The eight curves of the cycle, all of width WD. A Reuleaux n-gon is the\n// intersection of the n disks of radius WD centred on the corners of a\n// regular n-gon whose corner-to-far-corner distance is WD. A harmonic curve\n// has support function h = WD/2 + sum a cos(k t + c) over odd k from 3 up:\n// odd k is what makes h(t) + h(t + pi) = WD, the width in every direction,\n// and the radius of curvature h + h'' = WD/2 - sum a (k^2 - 1) cos(k t + c)\n// stays above 0, so it is convex. The amplitudes below keep that radius at\n// least 2 LEDs.\nconst SHAPES = [\n  { n: 3 },\n  { harm: [[3, 3.6, 0]] },\n  { n: 5 },\n  { harm: [[3, 2.2, 0], [5, 0.5, 1.1]] },\n  { n: 7 },\n  { disc: true },\n  { n: 3 },\n  { harm: [[3, 2.6, 0], [7, 0.16, 2.0]] },\n];\n// Base hue and brightness for each place in the cycle. The sharp curves are\n// lit brighter than the smooth ones, so the column reads as light and deep\n// shapes taking turns as it slides. The map's drift comes mostly from the\n// dark corners of each square, which swing round as the curves turn: with\n// all eight at one brightness it reads 0.263, with these 0.277.\nconst BASE = [[0.13, 0.86], [0.76, 0.55], [0.95, 0.86], [0.6, 0.55], [0.48, 0.86], [0.68, 0.55], [0.3, 0.86], [0.54, 0.55]];\n// The body angles each curve's trace follows: the n corners of a Reuleaux\n// polygon and the k peaks of a curve with one harmonic, which all run round\n// the same path, and for a curve of two harmonics the one point where its\n// support function peaks, since its corners are not alike and each would\n// draw a path of its own.\nfor (const s of SHAPES) {\n  if (s.n) s.tr = Array.from({ length: s.n }, (_, c) => (TAU * c) / s.n);\n  else if (s.harm && s.harm.length === 1) {\n    const [k, , c0] = s.harm[0];\n    s.tr = Array.from({ length: k }, (_, m) => (TAU * m - c0) / k);\n  } else if (s.harm) {\n    let best = -1e9, at = 0;\n    for (let i = 0; i \u003c 3600; i++) {\n      const b = (TAU * i) / 3600;\n      let h = 0;\n      for (const [k, a, c] of s.harm) h += a * cos(k * b + c);\n      if (h > best) (best = h), (at = b);\n    }\n    s.tr = [at];\n  } else s.tr = [0];\n}\n\n// Support function h and its derivative at body angle b, for a curve mixed\n// a share t of the way to the disc.\nfunction support(s, b, t, out) {\n  let h, d;\n  if (s.n) {\n    const n = s.n, R = WD / (2 * cos(PI / (2 * n))), step = TAU / n, half = PI / (2 * n);\n    let del = b - round(b / step) * step;\n    if (abs(del) \u003c= half) (h = R * cos(del)), (d = -R * sin(del));\n    else {\n      // The opposite direction falls in a corner's cone, so here the curve\n      // is the arc of radius WD round that corner.\n      const b2 = b + PI;\n      del = b2 - round(b2 / step) * step;\n      (h = WD - R * cos(del)), (d = R * sin(del));\n    }\n  } else if (s.harm) {\n    (h = WD / 2), (d = 0);\n    for (const [k, a, c] of s.harm) (h += a * cos(k * b + c)), (d -= a * k * sin(k * b + c));\n  } else (h = WD / 2), (d = 0);\n  out[0] = (1 - t) * h + (t * WD) / 2;\n  out[1] = (1 - t) * d;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, round: 0, spin: 0.06,\n    // The column's slide in rows and the spin clock in radians.\n    slide: 15, clock: 0,\n    trace: false, traces: new Map(),\n    px: new Float32Array(N), py: new Float32Array(N),\n    xl: new Float32Array(H), xr: new Float32Array(H),\n    lab: new Int8Array(W * H), rgb: new Float32Array(W * H * 3),\n    col: new Float32Array(CYCLE * 6), colHue: NaN, sup: new Float32Array(2),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.round = cl(k[2], 0, 1);\n  P.spin = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.trace = !P.trace;\n    P.traces.clear();\n  }\n  P.slide += d * P.speed * 3;\n  P.clock += d * (0.4 + 2.6 * P.spin);\n}\n\n// The angle a curve in slot j has turned to: neighbours turn opposite ways,\n// each at a rate between 0.7 and 1.3 times the clock, from a start of its own.\nconst angle = (j, clock) => hash(j * 3 + 1) * TAU + (j & 1 ? -1 : 1) * (0.7 + 0.6 * hash(j * 3 + 2)) * clock;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { px, py, xl, xr, lab, rgb, col, sup, traces } = P;\n  if (P.colHue !== P.hue) {\n    // Fill and rim colours for each place in the cycle. The rim is the fill\n    // pushed to full brightness and halfway to white, at least 40 levels\n    // above every fill so it reads as a hard line.\n    // A deep fill from orange round to lime reads as brown or olive, so in\n    // that band the deep curves are lifted toward the light ones' level and\n    // paled a little.\n    for (let c = 0; c \u003c CYCLE; c++) {\n      const h = P.hue + BASE[c][0], hf = h - floor(h), band = BASE[c][1] \u003c 0.7 ? max(0, 1 - abs(hf - 0.14) / 0.15) : 0;\n      hsv(h, 0.8 - 0.22 * band, (BASE[c][1] + 0.3 * band) * 0.94, col, c * 6);\n      hsv(h, 0.45, 1, col, c * 6 + 3);\n    }\n    P.colHue = P.hue;\n  }\n  lab.fill(0);\n  rgb.fill(0);\n  // Slot j's top line sits at row slide - j * WD: the slots stack upward\n  // with j and the column slides down as slide grows.\n  const jLo = floor((P.slide - H) / WD), jHi = ceil(P.slide / WD);\n  const vis = [];\n  for (let j = jLo; j \u003c= jHi; j++) {\n    const top = P.slide - j * WD;\n    if (top >= H || top + WD \u003c= 0) continue;\n    const shape = SHAPES[((j % CYCLE) + CYCLE) % CYCLE], phi = angle(j, P.clock);\n    // Boundary points from the support function, panel direction a = 2 pi i\n    // / N: the point is h u(a) + h' u'(a) with the body angle a - phi. The\n    // panel's y runs down, so i = N/2 faces the left wall and 3N/4 faces up.\n    for (let i = 0; i \u003c N; i++) {\n      const a = (TAU * i) / N, ca = cos(a), sa = sin(a);\n      support(shape, a - phi, P.round, sup);\n      px[i] = sup[0] * ca - sup[1] * sa;\n      py[i] = sup[0] * sa + sup[1] * ca;\n    }\n    // The left support line on the inner face of the left wall, x = 1, and\n    // the top one on the slot's top line. The width is WD in every\n    // direction, so the right one lands on x = 63 and the bottom one on the\n    // next slot's top line without being placed there.\n    const ox = 1 - px[N / 2], oy = top - py[(3 * N) / 4];\n    const label = vis.length + 1;\n    xl.fill(1e9);\n    xr.fill(-1e9);\n    for (let i = 0; i \u003c N; i++) {\n      const xa = px[i] + ox, ya = py[i] + oy, i2 = (i + 1) % N, xb = px[i2] + ox, yb = py[i2] + oy;\n      if (ya === yb) continue;\n      const r0 = max(0, ceil(min(ya, yb) - 0.5)), r1 = min(H - 1, floor(max(ya, yb) - 0.5));\n      for (let r = r0; r \u003c= r1; r++) {\n        const x = xa + ((r + 0.5 - ya) * (xb - xa)) / (yb - ya);\n        if (x \u003c xl[r]) xl[r] = x;\n        if (x > xr[r]) xr[r] = x;\n      }\n    }\n    for (let r = max(0, floor(top)); r \u003c= min(H - 1, ceil(top + WD)); r++) {\n      if (xr[r] \u003c xl[r]) continue;\n      const x0 = max(1, ceil(xl[r] - 0.5)), x1 = min(W - 2, floor(xr[r] - 0.5));\n      for (let x = x0; x \u003c= x1; x++) lab[r * W + x] = label;\n    }\n    vis.push({\n      j, top, c: ((j % CYCLE) + CYCLE) % CYCLE, shape, phi, ox, oy,\n      left: py[N / 2] + oy, right: py[0] + oy, upX: px[(3 * N) / 4] + ox, downX: px[N / 4] + ox,\n    });\n  }\n  // Fill, with a rim wherever a 4-neighbour belongs to something else.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, l = lab[p];\n      if (!l) continue;\n      const rim = lab[p - 1] !== l || lab[p + 1] !== l || (y > 0 && lab[p - W] !== l) || (y \u003c H - 1 && lab[p + W] !== l);\n      const o = vis[l - 1].c * 6 + (rim ? 3 : 0), q = p * 3;\n      (rgb[q] = col[o]), (rgb[q + 1] = col[o + 1]), (rgb[q + 2] = col[o + 2]);\n    }\n  // The walls: dim slate, brighter where a slot's line meets them, and white\n  // over five rows where a curve touches them.\n  for (let y = 0; y \u003c H; y++)\n    for (const x of [0, W - 1]) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = 0.14), (rgb[q + 1] = 0.18), (rgb[q + 2] = 0.24);\n    }\n  const dot = (x, y, r, g, b) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    (rgb[q] = r), (rgb[q + 1] = g), (rgb[q + 2] = b);\n  };\n  for (const v of vis) {\n    const ty = floor(v.top);\n    for (const x of [0, W - 1]) dot(x, ty, 0.55, 0.6, 0.7);\n    for (let e = -2; e \u003c= 2; e++) dot(0, floor(v.left) + e, 1, 1, 1), dot(W - 1, floor(v.right) + e, 1, 1, 1);\n    // Above and below: a small white cross where the curve meets the line.\n    for (const [cx, cy] of [[v.upX, v.top], [v.downX, v.top + WD]]) {\n      const x = floor(cx), y = floor(cy - (cy === v.top ? 0 : 1e-3));\n      dot(x, y, 1, 1, 1), dot(x - 1, y, 1, 1, 1), dot(x + 1, y, 1, 1, 1), dot(x, y - 1, 1, 1, 1), dot(x, y + 1, 1, 1, 1);\n    }\n  }\n  // The corner trace, kept in each slot's own square so it slides with it.\n  if (P.trace) {\n    const seen = new Set();\n    for (const v of vis) {\n      seen.add(v.j);\n      let t = traces.get(v.j);\n      if (!t) traces.set(v.j, (t = { xs: [], ys: [], last: null }));\n      const tr = v.shape.tr, m = tr.length, now = [];\n      for (let c = 0; c \u003c m; c++) {\n        // At a peak of the support function h' is 0, so the point is h times\n        // the unit vector there.\n        const a = tr[c] + v.phi;\n        support(v.shape, tr[c], P.round, sup);\n        const ca = cos(a), sa = sin(a);\n        now.push([sup[0] * ca - sup[1] * sa + v.ox, sup[0] * sa + sup[1] * ca + v.oy - v.top]);\n      }\n      if (t.xs.length \u003c 12000)\n        for (let c = 0; c \u003c m; c++) {\n          const [x1, y1] = now[c], [x0, y0] = t.last ? t.last[c] : now[c];\n          const steps = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.7));\n          for (let s = 1; s \u003c= steps; s++) t.xs.push(x0 + ((x1 - x0) * s) / steps), t.ys.push(y0 + ((y1 - y0) * s) / steps);\n        }\n      t.last = now;\n      for (let i = 0; i \u003c t.xs.length; i++) dot(floor(t.xs[i]), floor(t.ys[i] + v.top), 1, 0.78, 0.25);\n    }\n    for (const j of traces.keys()) if (!seen.has(j)) traces.delete(j);\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100."},{"name":"Round","min":0,"max":1,"about":"Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way."},{"name":"Spin","min":0,"max":1,"about":"How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that."}],"start":[0,2,0,0.06],"measures":{"motion":0.4094,"detail":0.0438,"edges":1,"complexity":0.0838,"coverage":0.7349,"colour":0.4286,"drift":0.2768},"knobResponse":[0.306,0.2393,0.1029,0.1377]},{"slug":"contour","title":"Contour Map","family":"data","round":2,"note":"천천히 솟고 가라앉는 땅의 지형도예요. 다섯째 등고선마다 밝고, 바닷물이 차오르면 선은 땅에 그대로 남은 채 물 밑으로 들어가요.","idea":"A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","layer":{"id":"layer-contour","type":"code","name":"contour","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink."},{"name":"Morph","min":0,"max":6,"about":"How fast the land rises and sinks; 0 holds the map still."},{"name":"Interval","min":50,"max":200,"about":"Metres between contour lines, from a dense survey at 50 to a few wide rings at 200."},{"name":"Sea level","min":-300,"max":600,"about":"Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water."}],"start":[0,2,50,0.06],"measures":{"motion":0.059,"detail":0.1124,"edges":0.4216,"complexity":2.7352,"coverage":1,"colour":0.2347,"drift":0.0329},"knobResponse":[0.3087,0.1314,0.1058,0.2222]},{"slug":"couette-shimmer","title":"Couette Shimmer","family":"cosmetic","round":38,"note":"두 원통 사이에 든 펄 세럼을 옆에서 봐요. 안쪽 원통이 빨라지면 옆으로 흐르던 결이 테일러 소용돌이의 밝고 어두운 띠로 128줄을 쌓고, 더 빨라지면 띠가 물결치며 원통을 돌아요. K3 은 띠를 다섯 쌍에서 열네 쌍으로 늘려 가는 골로 만들고, K4 는 바깥 원통을 거꾸로 돌려 띠를 나선으로 기울여요.","idea":"A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Couette Shimmer\n// Family:  cosmetic\n// Idea:    A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after shimmer serum stirred between two cylinders as rheoscopic fluid shows it (Paul Matisse's Kalliroscope), with the Taylor vortices of Taylor-Couette flow (G. I. Taylor, 1923)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive.\n// Knob 2: Spin. How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in.\n// Knob 3: Rolls. How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing.\n// Knob 4: Counter. How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986).\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, asin, exp, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The cylinder seen from the side: column x looks at angle TH[x] round it,\n// the front half from -1.29 to 1.29 radians, so a thing going round slows\n// and narrows toward the panel's edges. ARC is the distance round the\n// surface in LEDs, the cylinder 32 LEDs in radius.\nconst TH = new Float32Array(W), ARC = new Float32Array(W), SHADE = new Float32Array(W), SPEC = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const xn = (x + 0.5) / 32 - 1, th = asin(0.96 * xn);\n  TH[x] = th;\n  ARC[x] = th * 32;\n  // Light from the front and a little to the left: the serum dims toward\n  // the cylinder's edges, and a soft upright highlight sits left of centre.\n  SHADE[x] = 0.62 + 0.38 * cos(th + 0.2);\n  SPEC[x] = exp(-(((th + 0.42) / 0.32) ** 2));\n}\n\n// What the aligned mica reflects across one pair of rolls, phase 0 to 2 pi:\n// the outflow boundary at 0, where the serum leaves the inner cylinder and\n// spreads against the outer one; the inflow boundary at pi. In one roll\n// the serum at the outer wall runs up, in the next down, so the flakes there\n// lean one way and then the other and the light catches one roll and not\n// the next. A thin dark line marks the outflow, where the flakes stand on\n// edge, and a thin bright one the inflow.\nconst NR = 512, REFL = new Float32Array(NR);\nfor (let i = 0; i \u003c NR; i++) {\n  const ph = (i / NR) * TAU, s = sin(ph);\n  const d0 = min(ph, TAU - ph), dp = abs(ph - PI);\n  REFL[i] = cl(0.5 + 0.34 * (s >= 0 ? s ** 0.6 : -((-s) ** 0.6)) - 0.42 * exp(-((d0 / 0.3) ** 2)) + 0.3 * exp(-((dp / 0.22) ** 2)), 0, 1);\n}\nconst refl = (ph) => {\n  const u = (ph / TAU) % 1;\n  return REFL[((u \u003c 0 ? u + 1 : u) * NR) | 0];\n};\n\n// Streak texture: random values on a 64 by 128 grid, read stretched 6 times\n// sideways, so the flakes the flow has lined up show as long streaks.\nconst NU = 64, NV = 128;\n\nexport function setup(params) {\n  const noise = new Float32Array(NU * NV);\n  for (let i = 0; i \u003c noise.length; i++) noise[i] = random();\n  const rate = new Float32Array(H);\n  for (let y = 0; y \u003c H; y++) rate[y] = 0.85 + 0.3 * random();\n  const glints = [];\n  for (let i = 0; i \u003c 220; i++) glints.push({ a: random() * 2.6 - 1.3, y: random() * H, ph: random() * TAU, w: 0.6 + 0.8 * random() });\n  params.s = {\n    hue: 0, spin: 2, rolls: 5, counter: 0, warm: 0, t: 0, ang: 0, wave: 0, spiral: 0, su: 0, begun: false,\n    noise, rate, glints, glow: new Float32Array(N), CA: new Float32Array(W), CB: new Float32Array(W), RA: new Float32Array(H), RB: new Float32Array(H), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n}\n\nfunction nz(S, u, v) {\n  const n = S.noise, fu = floor(u), fv = floor(v), au = u - fu, av = v - fv;\n  const i0 = ((fu % NU) + NU) % NU, i1 = (i0 + 1) % NU, j0 = ((fv % NV) + NV) % NV, j1 = (j0 + 1) % NV;\n  const a = n[j0 * NU + i0] + (n[j0 * NU + i1] - n[j0 * NU + i0]) * au;\n  const b = n[j1 * NU + i0] + (n[j1 * NU + i1] - n[j1 * NU + i0]) * au;\n  return a + (b - a) * av;\n}\n\n// The regimes Spin walks through, as weights 0..1.\nfunction regimes(s) {\n  return {\n    // Taylor vortices from the critical speed 1, full by 1.25.\n    rolls: sqrt(sm(1, 1.25, s)),\n    // Waves on the rolls from 1.2, full by 1.8; quieter again toward 4.\n    waves: sqrt(sm(1.2, 1.8, s)) * (1 - 0.6 * sm(3, 4, s)),\n    // A second, slower wave that modulates the first, from 2.6.\n    modulate: sm(2.6, 3.4, s),\n    // Turbulence inside the rolls from 3.\n    turb: sm(3, 4, s),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.spin = cl(k[1], 0.5, 4);\n  S.rolls = cl(k[2], 5, 14);\n  S.counter = cl(k[3], 0, 1);\n  step(S, d);\n  if (!S.begun) {\n    // Open as if the serum had been turning a while.\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n}\n\nfunction step(S, d) {\n  const s = S.spin;\n  S.t += d;\n  // The streaks run round at 5 LEDs a second per unit of Spin; the inner\n  // cylinder turns at twice that, 0.31 radians a second per unit; the\n  // waves go round at 0.34 of the inner cylinder's rate, as Coles measured.\n  S.su += d * 5 * s;\n  S.ang += d * 0.3125 * s;\n  S.wave += d * 0.34 * 0.3125 * s;\n  S.spiral += d * 0.3125 * s * 0.5;\n  // Glints ride the flow: round with the streaks, and up or down the roll\n  // they are in toward its inflow boundary, where they dive and come back.\n  const R = regimes(s), kk = (TAU * S.rolls) / H;\n  for (const g of S.glints) {\n    g.a += (d * 5 * s) / 32;\n    if (g.a > 1.3) g.a -= 2.6;\n    const ph = kk * (g.y - 63.5);\n    g.y += d * R.rolls * 1.2 * s * sin(ph);\n    if (g.y \u003c 0) g.y += H;\n    if (g.y >= H) g.y -= H;\n    // At the inflow boundary the serum turns in toward the inner cylinder\n    // and the flake goes with it; another comes out somewhere else.\n    if (R.rolls > 0.3 && cos(ph) \u003c -0.93) {\n      g.y = random() * H;\n      g.a = random() * 2.6 - 1.3;\n    }\n    // Tumbling: a flake turns over faster in faster shear.\n    g.ph += d * g.w * (1.2 + 1.6 * s);\n  }\n}\n\nfunction palette(S) {\n  const h = S.hue + 0.74, hh = h - floor(h);\n  // From red through orange and yellow to lime a deep tone reads brown or\n  // olive on the panel, so there the rolls keep their brightness and differ\n  // by saturation instead: full from 0.03 to 0.23 round the wheel, none\n  // beyond 0.96 and 0.3.\n  const dw = abs(((hh - 0.13 + 1.5) % 1) - 0.5), warm = 1 - sm(0.1, 0.17, dw);\n  const c = S.col;\n  // Deep, body, pearl and the highlight that leans round the wheel.\n  hsv(h - 0.02 * warm, 0.82 + 0.06 * warm, 0.3 + 0.55 * warm, c[0]);\n  hsv(h + 0.01, 0.6 - 0.15 * warm, 0.72 + 0.26 * warm, c[1]);\n  hsv(h + 0.12, 0.26 - 0.08 * warm, 1, c[2]);\n  hsv(h - 0.1, 0.12, 1, c[3]);\n  S.warm = warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const R = regimes(S.spin), kk = (TAU * S.rolls) / H, lam = H / S.rolls;\n  // Counter-rotating outer cylinder: from 0.15 the rolls lean into a spiral\n  // that runs down the panel as it turns; from 0.6 a second spiral of the\n  // other hand, turning the same way and so running up, comes in across it.\n  const cr = S.counter, sp1 = 3 * sm(0.15, 0.6, cr), sp2 = sm(0.6, 1, cr);\n  const wv = R.waves * (1 - sm(0.15, 0.45, cr));\n  const m = 6, aw = 0.13 * lam * kk;\n  const c = S.col, glow = S.glow, { CA, CB, RA, RB } = S;\n  // The rolls are not all equally strong: two slow waves of strength, one\n  // drifting round with the serum, cross each other over the panel.\n  for (let x = 0; x \u003c W; x++) {\n    CA[x] = sin(0.09 * ARC[x] - 0.8 * S.ang);\n    CB[x] = cos(0.21 * ARC[x] + 0.5 * S.ang);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    RA[y] = cos(0.045 * y + 0.13 * S.t);\n    RB[y] = sin(0.083 * y - 0.21 * S.t);\n  }\n  glow.fill(0);\n  // Glints: a flake flashes as it turns face on to the light.\n  for (const g of S.glints) {\n    const cw = cos(g.ph);\n    if (cw \u003c 0.85) continue;\n    const xs = (sin(g.a) / 0.96 + 1) * 32 - 0.5, xi = round(xs), yi = round(g.y) % H;\n    if (xi \u003c 0 || xi >= W) continue;\n    const b = ((cw - 0.85) / 0.15) ** 2 * 1.3;\n    glow[yi * W + xi] += b;\n    if (xi > 0) glow[yi * W + xi - 1] += b * 0.3;\n    if (xi \u003c W - 1) glow[yi * W + xi + 1] += b * 0.3;\n    if (yi > 0) glow[(yi - 1) * W + xi] += b * 0.3;\n    if (yi \u003c H - 1) glow[(yi + 1) * W + xi] += b * 0.3;\n  }\n  // The streak texture flows along each roll toward its inflow boundary;\n  // two copies, three seconds apart, take turns so it never smears.\n  const TL = 3, t0 = S.t % TL, t1 = (S.t + TL / 2) % TL, w0 = 1 - abs((2 * t0) / TL - 1);\n  const vz = R.rolls * 1.2 * S.spin;\n  const turbU = 1 + 2 * R.turb;\n  for (let x = 0; x \u003c W; x++) {\n    const th = TH[x], arc = ARC[x];\n    // Axial displacement of the rolls here: the travelling wave, and in the\n    // modulated regime a slower second wave riding on it.\n    const wph = m * (th - S.wave);\n    const wave = aw * wv * sin(wph) * (1 + 0.5 * R.modulate * sin(2 * th - 0.4 * S.wave * m));\n    const spiral1 = sp1 * (th - S.spiral), spiral2 = 3 * sp2 * (th - S.spiral);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let ph = kk * (y - 63.5) + wave;\n      if (R.turb > 0) ph += R.turb * 1.4 * (nz(S, arc / 5 - S.su * 0.4, y * 0.35 + S.t * 0.7) - 0.5);\n      let rf = refl(ph + spiral1);\n      if (sp2 > 0) rf = rf * (1 - 0.5 * sp2) + refl(ph - spiral2) * 0.5 * sp2;\n      const rb = 0.5 + R.rolls * (rf - 0.5) * (1 + 0.16 * CA[x] * RA[y] + 0.1 * CB[x] * RB[y]);\n      // Streaks: the texture moved round with the serum and along the roll.\n      const az = sin(ph + spiral1) * vz, su = S.su * S.rate[y];\n      const a0 = nz(S, ((arc - su) / 10) * turbU, (y - az * t0) * 0.75), a1 = nz(S, ((arc - su) / 10) * turbU + 17, (y - az * t1) * 0.75);\n      const tex = a0 * w0 + a1 * (1 - w0) - 0.5;\n      const sh = SHADE[x], spc = SPEC[x];\n      // Light: the serum's body by the cylinder's shading and the rolls,\n      // the streaks over it, the highlight strongest on the rolls that\n      // catch the light, and the glints.\n      const L = sh * (0.18 + 0.72 * rb) + (0.4 - 0.1 * R.rolls) * tex * sh;\n      const hi = spc * (0.15 + 0.85 * rb * rb) * 0.75 + glow[p];\n      // Deep to body to pearl by L; the highlight toward white.\n      let r, g, b;\n      if (L \u003c 0.5) {\n        const f = cl(L / 0.5, 0, 1);\n        r = c[0][0] + (c[1][0] - c[0][0]) * f;\n        g = c[0][1] + (c[1][1] - c[0][1]) * f;\n        b = c[0][2] + (c[1][2] - c[0][2]) * f;\n      } else {\n        const f = cl((L - 0.5) / 0.45, 0, 1);\n        r = c[1][0] + (c[2][0] - c[1][0]) * f;\n        g = c[1][1] + (c[2][1] - c[1][1]) * f;\n        b = c[1][2] + (c[2][2] - c[1][2]) * f;\n      }\n      const lo = 1 - (1 - cl(L / 0.2, 0, 1)) * (1 - 0.7 * S.warm), hm = min(1, hi);\n      r *= lo;\n      g *= lo;\n      b *= lo;\n      r += (c[3][0] - r) * hm;\n      g += (c[3][1] - g) * hm;\n      b += (c[3][2] - b) * hm;\n      display.setPixel(x, y, round(255 * cl(r, 0, 1)), round(255 * cl(g, 0, 1)), round(255 * cl(b, 0, 1)));\n    }\n  }\n}\n","layer":{"id":"layer-couette-shimmer","type":"code","name":"couette-shimmer","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Couette Shimmer\n// Family:  cosmetic\n// Idea:    A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after shimmer serum stirred between two cylinders as rheoscopic fluid shows it (Paul Matisse's Kalliroscope), with the Taylor vortices of Taylor-Couette flow (G. I. Taylor, 1923)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive.\n// Knob 2: Spin. How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in.\n// Knob 3: Rolls. How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing.\n// Knob 4: Counter. How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986).\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, asin, exp, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The cylinder seen from the side: column x looks at angle TH[x] round it,\n// the front half from -1.29 to 1.29 radians, so a thing going round slows\n// and narrows toward the panel's edges. ARC is the distance round the\n// surface in LEDs, the cylinder 32 LEDs in radius.\nconst TH = new Float32Array(W), ARC = new Float32Array(W), SHADE = new Float32Array(W), SPEC = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const xn = (x + 0.5) / 32 - 1, th = asin(0.96 * xn);\n  TH[x] = th;\n  ARC[x] = th * 32;\n  // Light from the front and a little to the left: the serum dims toward\n  // the cylinder's edges, and a soft upright highlight sits left of centre.\n  SHADE[x] = 0.62 + 0.38 * cos(th + 0.2);\n  SPEC[x] = exp(-(((th + 0.42) / 0.32) ** 2));\n}\n\n// What the aligned mica reflects across one pair of rolls, phase 0 to 2 pi:\n// the outflow boundary at 0, where the serum leaves the inner cylinder and\n// spreads against the outer one; the inflow boundary at pi. In one roll\n// the serum at the outer wall runs up, in the next down, so the flakes there\n// lean one way and then the other and the light catches one roll and not\n// the next. A thin dark line marks the outflow, where the flakes stand on\n// edge, and a thin bright one the inflow.\nconst NR = 512, REFL = new Float32Array(NR);\nfor (let i = 0; i \u003c NR; i++) {\n  const ph = (i / NR) * TAU, s = sin(ph);\n  const d0 = min(ph, TAU - ph), dp = abs(ph - PI);\n  REFL[i] = cl(0.5 + 0.34 * (s >= 0 ? s ** 0.6 : -((-s) ** 0.6)) - 0.42 * exp(-((d0 / 0.3) ** 2)) + 0.3 * exp(-((dp / 0.22) ** 2)), 0, 1);\n}\nconst refl = (ph) => {\n  const u = (ph / TAU) % 1;\n  return REFL[((u \u003c 0 ? u + 1 : u) * NR) | 0];\n};\n\n// Streak texture: random values on a 64 by 128 grid, read stretched 6 times\n// sideways, so the flakes the flow has lined up show as long streaks.\nconst NU = 64, NV = 128;\n\nexport function setup(params) {\n  const noise = new Float32Array(NU * NV);\n  for (let i = 0; i \u003c noise.length; i++) noise[i] = random();\n  const rate = new Float32Array(H);\n  for (let y = 0; y \u003c H; y++) rate[y] = 0.85 + 0.3 * random();\n  const glints = [];\n  for (let i = 0; i \u003c 220; i++) glints.push({ a: random() * 2.6 - 1.3, y: random() * H, ph: random() * TAU, w: 0.6 + 0.8 * random() });\n  params.s = {\n    hue: 0, spin: 2, rolls: 5, counter: 0, warm: 0, t: 0, ang: 0, wave: 0, spiral: 0, su: 0, begun: false,\n    noise, rate, glints, glow: new Float32Array(N), CA: new Float32Array(W), CB: new Float32Array(W), RA: new Float32Array(H), RB: new Float32Array(H), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n}\n\nfunction nz(S, u, v) {\n  const n = S.noise, fu = floor(u), fv = floor(v), au = u - fu, av = v - fv;\n  const i0 = ((fu % NU) + NU) % NU, i1 = (i0 + 1) % NU, j0 = ((fv % NV) + NV) % NV, j1 = (j0 + 1) % NV;\n  const a = n[j0 * NU + i0] + (n[j0 * NU + i1] - n[j0 * NU + i0]) * au;\n  const b = n[j1 * NU + i0] + (n[j1 * NU + i1] - n[j1 * NU + i0]) * au;\n  return a + (b - a) * av;\n}\n\n// The regimes Spin walks through, as weights 0..1.\nfunction regimes(s) {\n  return {\n    // Taylor vortices from the critical speed 1, full by 1.25.\n    rolls: sqrt(sm(1, 1.25, s)),\n    // Waves on the rolls from 1.2, full by 1.8; quieter again toward 4.\n    waves: sqrt(sm(1.2, 1.8, s)) * (1 - 0.6 * sm(3, 4, s)),\n    // A second, slower wave that modulates the first, from 2.6.\n    modulate: sm(2.6, 3.4, s),\n    // Turbulence inside the rolls from 3.\n    turb: sm(3, 4, s),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.spin = cl(k[1], 0.5, 4);\n  S.rolls = cl(k[2], 5, 14);\n  S.counter = cl(k[3], 0, 1);\n  step(S, d);\n  if (!S.begun) {\n    // Open as if the serum had been turning a while.\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n}\n\nfunction step(S, d) {\n  const s = S.spin;\n  S.t += d;\n  // The streaks run round at 5 LEDs a second per unit of Spin; the inner\n  // cylinder turns at twice that, 0.31 radians a second per unit; the\n  // waves go round at 0.34 of the inner cylinder's rate, as Coles measured.\n  S.su += d * 5 * s;\n  S.ang += d * 0.3125 * s;\n  S.wave += d * 0.34 * 0.3125 * s;\n  S.spiral += d * 0.3125 * s * 0.5;\n  // Glints ride the flow: round with the streaks, and up or down the roll\n  // they are in toward its inflow boundary, where they dive and come back.\n  const R = regimes(s), kk = (TAU * S.rolls) / H;\n  for (const g of S.glints) {\n    g.a += (d * 5 * s) / 32;\n    if (g.a > 1.3) g.a -= 2.6;\n    const ph = kk * (g.y - 63.5);\n    g.y += d * R.rolls * 1.2 * s * sin(ph);\n    if (g.y \u003c 0) g.y += H;\n    if (g.y >= H) g.y -= H;\n    // At the inflow boundary the serum turns in toward the inner cylinder\n    // and the flake goes with it; another comes out somewhere else.\n    if (R.rolls > 0.3 && cos(ph) \u003c -0.93) {\n      g.y = random() * H;\n      g.a = random() * 2.6 - 1.3;\n    }\n    // Tumbling: a flake turns over faster in faster shear.\n    g.ph += d * g.w * (1.2 + 1.6 * s);\n  }\n}\n\nfunction palette(S) {\n  const h = S.hue + 0.74, hh = h - floor(h);\n  // From red through orange and yellow to lime a deep tone reads brown or\n  // olive on the panel, so there the rolls keep their brightness and differ\n  // by saturation instead: full from 0.03 to 0.23 round the wheel, none\n  // beyond 0.96 and 0.3.\n  const dw = abs(((hh - 0.13 + 1.5) % 1) - 0.5), warm = 1 - sm(0.1, 0.17, dw);\n  const c = S.col;\n  // Deep, body, pearl and the highlight that leans round the wheel.\n  hsv(h - 0.02 * warm, 0.82 + 0.06 * warm, 0.3 + 0.55 * warm, c[0]);\n  hsv(h + 0.01, 0.6 - 0.15 * warm, 0.72 + 0.26 * warm, c[1]);\n  hsv(h + 0.12, 0.26 - 0.08 * warm, 1, c[2]);\n  hsv(h - 0.1, 0.12, 1, c[3]);\n  S.warm = warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const R = regimes(S.spin), kk = (TAU * S.rolls) / H, lam = H / S.rolls;\n  // Counter-rotating outer cylinder: from 0.15 the rolls lean into a spiral\n  // that runs down the panel as it turns; from 0.6 a second spiral of the\n  // other hand, turning the same way and so running up, comes in across it.\n  const cr = S.counter, sp1 = 3 * sm(0.15, 0.6, cr), sp2 = sm(0.6, 1, cr);\n  const wv = R.waves * (1 - sm(0.15, 0.45, cr));\n  const m = 6, aw = 0.13 * lam * kk;\n  const c = S.col, glow = S.glow, { CA, CB, RA, RB } = S;\n  // The rolls are not all equally strong: two slow waves of strength, one\n  // drifting round with the serum, cross each other over the panel.\n  for (let x = 0; x \u003c W; x++) {\n    CA[x] = sin(0.09 * ARC[x] - 0.8 * S.ang);\n    CB[x] = cos(0.21 * ARC[x] + 0.5 * S.ang);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    RA[y] = cos(0.045 * y + 0.13 * S.t);\n    RB[y] = sin(0.083 * y - 0.21 * S.t);\n  }\n  glow.fill(0);\n  // Glints: a flake flashes as it turns face on to the light.\n  for (const g of S.glints) {\n    const cw = cos(g.ph);\n    if (cw \u003c 0.85) continue;\n    const xs = (sin(g.a) / 0.96 + 1) * 32 - 0.5, xi = round(xs), yi = round(g.y) % H;\n    if (xi \u003c 0 || xi >= W) continue;\n    const b = ((cw - 0.85) / 0.15) ** 2 * 1.3;\n    glow[yi * W + xi] += b;\n    if (xi > 0) glow[yi * W + xi - 1] += b * 0.3;\n    if (xi \u003c W - 1) glow[yi * W + xi + 1] += b * 0.3;\n    if (yi > 0) glow[(yi - 1) * W + xi] += b * 0.3;\n    if (yi \u003c H - 1) glow[(yi + 1) * W + xi] += b * 0.3;\n  }\n  // The streak texture flows along each roll toward its inflow boundary;\n  // two copies, three seconds apart, take turns so it never smears.\n  const TL = 3, t0 = S.t % TL, t1 = (S.t + TL / 2) % TL, w0 = 1 - abs((2 * t0) / TL - 1);\n  const vz = R.rolls * 1.2 * S.spin;\n  const turbU = 1 + 2 * R.turb;\n  for (let x = 0; x \u003c W; x++) {\n    const th = TH[x], arc = ARC[x];\n    // Axial displacement of the rolls here: the travelling wave, and in the\n    // modulated regime a slower second wave riding on it.\n    const wph = m * (th - S.wave);\n    const wave = aw * wv * sin(wph) * (1 + 0.5 * R.modulate * sin(2 * th - 0.4 * S.wave * m));\n    const spiral1 = sp1 * (th - S.spiral), spiral2 = 3 * sp2 * (th - S.spiral);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let ph = kk * (y - 63.5) + wave;\n      if (R.turb > 0) ph += R.turb * 1.4 * (nz(S, arc / 5 - S.su * 0.4, y * 0.35 + S.t * 0.7) - 0.5);\n      let rf = refl(ph + spiral1);\n      if (sp2 > 0) rf = rf * (1 - 0.5 * sp2) + refl(ph - spiral2) * 0.5 * sp2;\n      const rb = 0.5 + R.rolls * (rf - 0.5) * (1 + 0.16 * CA[x] * RA[y] + 0.1 * CB[x] * RB[y]);\n      // Streaks: the texture moved round with the serum and along the roll.\n      const az = sin(ph + spiral1) * vz, su = S.su * S.rate[y];\n      const a0 = nz(S, ((arc - su) / 10) * turbU, (y - az * t0) * 0.75), a1 = nz(S, ((arc - su) / 10) * turbU + 17, (y - az * t1) * 0.75);\n      const tex = a0 * w0 + a1 * (1 - w0) - 0.5;\n      const sh = SHADE[x], spc = SPEC[x];\n      // Light: the serum's body by the cylinder's shading and the rolls,\n      // the streaks over it, the highlight strongest on the rolls that\n      // catch the light, and the glints.\n      const L = sh * (0.18 + 0.72 * rb) + (0.4 - 0.1 * R.rolls) * tex * sh;\n      const hi = spc * (0.15 + 0.85 * rb * rb) * 0.75 + glow[p];\n      // Deep to body to pearl by L; the highlight toward white.\n      let r, g, b;\n      if (L \u003c 0.5) {\n        const f = cl(L / 0.5, 0, 1);\n        r = c[0][0] + (c[1][0] - c[0][0]) * f;\n        g = c[0][1] + (c[1][1] - c[0][1]) * f;\n        b = c[0][2] + (c[1][2] - c[0][2]) * f;\n      } else {\n        const f = cl((L - 0.5) / 0.45, 0, 1);\n        r = c[1][0] + (c[2][0] - c[1][0]) * f;\n        g = c[1][1] + (c[2][1] - c[1][1]) * f;\n        b = c[1][2] + (c[2][2] - c[1][2]) * f;\n      }\n      const lo = 1 - (1 - cl(L / 0.2, 0, 1)) * (1 - 0.7 * S.warm), hm = min(1, hi);\n      r *= lo;\n      g *= lo;\n      b *= lo;\n      r += (c[3][0] - r) * hm;\n      g += (c[3][1] - g) * hm;\n      b += (c[3][2] - b) * hm;\n      display.setPixel(x, y, round(255 * cl(r, 0, 1)), round(255 * cl(g, 0, 1)), round(255 * cl(b, 0, 1)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive."},{"name":"Spin","min":0.5,"max":4,"about":"How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in."},{"name":"Rolls","min":5,"max":14,"about":"How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing."},{"name":"Counter","min":0,"max":1,"about":"How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986)."}],"start":[0,2,5,0.06],"measures":{"motion":0.2097,"detail":0.0404,"edges":0.1149,"complexity":2.5766,"coverage":0.9999,"colour":0.1504,"drift":0.059},"knobResponse":[0.3171,0.1536,0.1747,0.1924]},{"slug":"crackle-polish","title":"Crackle Polish","family":"cosmetic","round":39,"note":"형광 분홍 바탕 위의 검은 크래클 탑코트가 마르며 갈라져요. 긴 금이 먼저 패널을 가로지르고, 짧은 금이 옛 금에서 직각으로 나와 다른 금에 직각으로 닿고, 틈이 벌어지며 조각이 광택 테를 두른 구슬이 돼요. 다 갈라지면 새 코트를 위에서 칠해 내려와요.","idea":"A glossy colour fills the panel, a dark top coat is brushed over it from the top down, and as the coat dries it splits, first in long cracks across the panel and then in shorter and shorter cracks that each start on an older one at a right angle, while the gaps widen and the islands of coat shrink into rounded beads with a gloss on their edges and the colour glowing up through the network, until a fresh coat goes on.","buttons":"K1 tap brushes a fresh coat on now.","code":"// ===== Patternflow pattern =====\n// Title:   Crackle Polish\n// Family:  cosmetic\n// Idea:    A glossy colour fills the panel, a dark top coat is brushed over it from the top down, and as the coat dries it splits, first in long cracks across the panel and then in shorter and shorter cracks that each start on an older one at a right angle, while the gaps widen and the islands of coat shrink into rounded beads with a gloss on their edges and the colour glowing up through the network, until a fresh coat goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after crackle nail polish, a top coat that shrinks as it dries, and the hierarchical crack patterns that form by successive division of domains (Steffen Bohn, Ludovic Pauchard and Yves Couder, 2005)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Craze=0..1, Coat=0..1\n//\n// Knob 1: Hue. Turns the base colour round the whole wheel: at 0 hot pink, 0.1 red, 0.15 orange, 0.22 yellow, 0.3 lime, 0.4 green, 0.55 aqua, 0.65 azure, 0.75 blue, 0.85 violet, 0.95 magenta. Orange and yellow bases are paled a little, lit to full and shaded less beside the islands, so no gap turns brown.\n// Knob 2: Speed. At 2 the coat goes on in 1.2 s, the first crack opens 0.6 s later and runs across the panel in about a second, the last starts about 4.5 s after the first, and when the gaps have finished widening the crackle holds until a new coat goes on, about 11 s after the last. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Craze. How far the coat keeps splitting. At 0 a domain stops splitting once it is under about 20 LEDs long, which leaves about 50 islands, most of them 9 to 18 LEDs across; at 1 under about 11, about 155 islands of 5 to 10, and the gaps open half as wide.\n// Knob 4: Coat. The colour of the top coat: black lacquer at 0, a deep jewel tone opposite the base on the wheel at 0.5, a pale pearl at 1. On the dark coats the gloss is a white rim on the edges facing the light; on the pearl the edges turned away fall into a cool grey-lilac shade, as a pearl pigment shifts with the angle.\n// Buttons: K1 tap brushes a fresh coat on now.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n// The cycle, in seconds at Speed 2: the brush crosses the panel in LAY, the\n// first crack opens at T1 and the last near T2, and a new coat comes HOLD\n// after the last. The run opens at START, with the first crack running.\nconst LAY = 1.2, T1 = 1.8, T2 = 6, HOLD = 5, START = 2.4;\n// Crack tips run at VTIP LEDs a second; a gap opens with time constant TAU.\nconst VTIP = 70, TAU = 1.3;\n// Towards the light, x right and y down: up and to the left.\nconst LX = -0.6, LY = -0.8;\n// Opening hue: hot pink.\nconst H0 = 0.93;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The domains are worked out on a grid of half-LED cells: each cell holds\n// the domain it belongs to, or -1 on a crack.\nconst FW = 2 * W, FH = 2 * H;\n// A crack tip moves STEP LEDs at a time, and within BEND LEDs of an older\n// crack it turns to meet it square.\nconst STEP = 0.25, BEND = 3;\n// Gap pixels are listed out to REACH LEDs from a crack's line.\nconst REACH = 7;\n\n// The whole crackle of one coat, worked out when it goes on. The panel is\n// one domain. A domain splits across its long axis: a crack starts on its\n// rim, square to the older crack it leaves, runs across, and turns to meet\n// the crack on the far side square. Each half splits the same way until it\n// is too short; bigger domains crack sooner.\nfunction crackle(craze) {\n  const stop = 20 - 9 * craze, span = log((W * H) / (0.45 * stop * stop));\n  const lab = new Int32Array(FW * FH), cracks = [];\n  const wall = (x, y) => {\n    const i = floor(2 * x), j = floor(2 * y);\n    return i \u003c 0 || j \u003c 0 || i >= FW || j >= FH || lab[j * FW + i] \u003c 0;\n  };\n  let ids = 1;\n  const todo = [{ id: 0, b: [0, 0, FW - 1, FH - 1], ready: 0 }];\n  while (todo.length) {\n    const d = todo.pop(), [i0, j0, i1, j1] = d.b;\n    let n = 0, sx = 0, sy = 0, sxx = 0, syy = 0, sxy = 0;\n    const nb = [FW, FH, 0, 0];\n    for (let j = j0; j \u003c= j1; j++)\n      for (let i = i0; i \u003c= i1; i++)\n        if (lab[j * FW + i] === d.id) {\n          const x = (i + 0.5) / 2, y = (j + 0.5) / 2;\n          n++;\n          sx += x;\n          sy += y;\n          sxx += x * x;\n          syy += y * y;\n          sxy += x * y;\n          nb[0] = min(nb[0], i);\n          nb[1] = min(nb[1], j);\n          nb[2] = max(nb[2], i);\n          nb[3] = max(nb[3], j);\n        }\n    if (n \u003c 8) continue;\n    const mx = sx / n, my = sy / n, vxx = sxx / n - mx * mx, vyy = syy / n - my * my, vxy = sxy / n - mx * my;\n    const ang = 0.5 * Math.atan2(2 * vxy, vxx - vyy);\n    // A bar of length L has variance L^2 / 12 along its axis.\n    const long = sqrt(12 * (vxx * cos(ang) ** 2 + 2 * vxy * cos(ang) * sin(ang) + vyy * sin(ang) ** 2));\n    // The cut is turned up to 20 degrees off square; its ends bend square anyway.\n    const tu = ang + (random() - 0.5) * 0.7, ux = cos(tu), uy = sin(tu);\n    if (long \u003c stop * (0.85 + 0.3 * random())) continue;\n    // Where the cut line, across the long axis near the middle, meets the rim.\n    const off = (random() - 0.5) * 0.36 * long, cx = mx + ux * off, cy = my + uy * off;\n    if (wall(cx, cy)) continue;\n    const ends = [-1, 1].map((sg) => {\n      let x = cx, y = cy;\n      while (!wall(x - sg * uy * STEP, y + sg * ux * STEP)) {\n        x -= sg * uy * STEP;\n        y += sg * ux * STEP;\n      }\n      return [x, y, sg];\n    });\n    const [sx0, sy0, sg] = ends[random() \u003c 0.5 ? 0 : 1];\n    // Heading: across, toward the other end; it starts square off its rim.\n    const hx = sg * uy, hy = -sg * ux;\n    let x = sx0, y = sy0, dx = hx, dy = hy, run = 0, ok = false;\n    const pts = [[x, y]], cells = [];\n    for (let k = 0; k \u003c (4 * long) / STEP; k++) {\n      // The nearest older crack (or the panel's edge) within BEND, and the\n      // way square off it, from all its cells nearby.\n      let best = BEND * BEND, gx = 0, gy = 0;\n      const ci = floor(2 * x), cj = floor(2 * y), r = 2 * BEND;\n      for (let j = cj - r; j \u003c= cj + r; j++)\n        for (let i = ci - r; i \u003c= ci + r; i++) {\n          if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] >= 0) continue;\n          const ex = x - (cl(i, -1, FW) + 0.5) / 2, ey = y - (cl(j, -1, FH) + 0.5) / 2, e2 = ex * ex + ey * ey;\n          best = min(best, e2);\n          if (e2 \u003c 4) {\n            const wt = exp(-e2);\n            gx += ex * wt;\n            gy += ey * wt;\n          }\n        }\n      const dist = sqrt(best), gl = sqrt(gx * gx + gy * gy);\n      let calm = 1;\n      if (best \u003c BEND * BEND && gl > 0) {\n        gx /= gl;\n        gy /= gl;\n        // Leaving its own rim: square off it. Coming up on another: turn square into it.\n        const into = run \u003c 1.2 ? -0.5 : dx * gx + dy * gy \u003c 0 ? 0.6 * (1 - dist / BEND) : 0;\n        if (into) {\n          dx -= into * gx;\n          dy -= into * gy;\n          calm = dist / BEND;\n        }\n      }\n      const tw = (random() - 0.5) * 0.22 * calm;\n      dx += 0.05 * hx * calm - tw * dy;\n      dy += 0.05 * hy * calm + tw * dx;\n      const dl = sqrt(dx * dx + dy * dy);\n      dx /= dl;\n      dy /= dl;\n      x += dx * STEP;\n      y += dy * STEP;\n      run += STEP;\n      const ci2 = floor(2 * x), cj2 = floor(2 * y), last = cells[cells.length - 1];\n      // Cells of the crack, joined edge to edge so nothing leaks past it.\n      if (last && last[0] !== ci2 && last[1] !== cj2) cells.push([ci2, last[1]]);\n      if (!last || last[0] !== ci2 || last[1] !== cj2) cells.push([ci2, cj2]);\n      if (wall(x, y)) {\n        pts.push([x, y]);\n        ok = run > 2;\n        break;\n      }\n      if (k % 4 === 3) pts.push([x, y]);\n    }\n    if (!ok) continue;\n    for (const [i, j] of cells) if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] === d.id) lab[j * FW + i] = -1;\n    // Fill one side with a new domain.\n    const m = pts[pts.length >> 1], q = pts[(pts.length >> 1) + 1] || pts[pts.length - 1];\n    const tx = q[0] - m[0], ty = q[1] - m[1], tl = Math.hypot(tx, ty) || 1;\n    const si = floor(2 * (m[0] - (ty / tl) * 0.8)), sj = floor(2 * (m[1] + (tx / tl) * 0.8));\n    if (si \u003c 0 || sj \u003c 0 || si >= FW || sj >= FH || lab[sj * FW + si] !== d.id) continue;\n    const nid = ids++, stack = [sj * FW + si];\n    lab[sj * FW + si] = nid;\n    while (stack.length) {\n      const c = stack.pop(), i = c % FW, j = (c - i) / FW;\n      for (const e of [i > 0 ? c - 1 : -1, i \u003c FW - 1 ? c + 1 : -1, j > 0 ? c - FW : -1, j \u003c FH - 1 ? c + FW : -1])\n        if (e >= 0 && lab[e] === d.id) {\n          lab[e] = nid;\n          stack.push(e);\n        }\n    }\n    let len = 0;\n    for (let k = 1; k \u003c pts.length; k++) len += Math.hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n    const age = cl(log((W * H) / (n / 4)) / span, 0, 1), t = max(d.ready + 0.06, T1 + (T2 - T1) * age);\n    // Final half-width: the first cracks open widest.\n    cracks.push({ pts, len, t, w: 1.5 - 0.85 * age });\n    const ready = t + len / VTIP;\n    todo.push({ id: d.id, b: nb, ready }, { id: nid, b: nb, ready });\n  }\n  return gapLists(cracks);\n}\n\n// For each crack, every pixel within REACH of its line: how far from it,\n// and how far along the crack the nearest point lies.\nfunction gapLists(cracks) {\n  const dist = new Float32Array(N), along = new Float32Array(N), seen = new Int32Array(N).fill(-1);\n  cracks.forEach((c, ci) => {\n    const idx = [];\n    let u0 = 0;\n    for (let k = 1; k \u003c c.pts.length; k++) {\n      const [ax, ay] = c.pts[k - 1], [bx, by] = c.pts[k], ex = bx - ax, ey = by - ay, el = sqrt(ex * ex + ey * ey) || 1e-6;\n      for (let y = max(0, floor(min(ay, by) - REACH)); y \u003c= min(H - 1, floor(max(ay, by) + REACH)); y++)\n        for (let x = max(0, floor(min(ax, bx) - REACH)); x \u003c= min(W - 1, floor(max(ax, bx) + REACH)); x++) {\n          const px = x + 0.5 - ax, py = y + 0.5 - ay, f = cl((px * ex + py * ey) / (el * el), 0, 1);\n          const qx = px - f * ex, qy = py - f * ey, dd = sqrt(qx * qx + qy * qy), p = y * W + x;\n          if (dd > REACH) continue;\n          if (seen[p] !== ci) {\n            seen[p] = ci;\n            idx.push(p);\n            dist[p] = 1e9;\n          }\n          if (dd \u003c dist[p]) {\n            dist[p] = dd;\n            along[p] = u0 + f * el;\n          }\n        }\n      u0 += el;\n    }\n    c.idx = Int32Array.from(idx);\n    c.d = Float32Array.from(idx, (p) => dist[p]);\n    c.u = Float32Array.from(idx, (p) => along[p]);\n    c.pts = null;\n  });\n  return cracks;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, craze: 0, coat: 0.06, begun: false, t: START, end: 0, cracks: [], old: null, brush: new Float32Array(W),\n    G: new Float32Array(N),\n    base: [0, 0, 0], ink: [0, 0, 0], a: [0, 0, 0], b: [0, 0, 0], cool: [0, 0, 0],\n  };\n}\n\nfunction newCoat(S, t0) {\n  S.old = S.cracks;\n  // The brush's bristles: a mark per column, softened.\n  let m = random();\n  for (let x = 0; x \u003c W; x++) S.brush[x] = 0.07 * (m = 0.55 * m + 0.45 * random());\n  S.cracks = crackle(S.craze);\n  let last = 0;\n  for (const c of S.cracks) last = max(last, c.t);\n  S.end = last + HOLD;\n  S.t = t0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.craze = cl(k[2], 0, 1);\n  S.coat = cl(k[3], 0, 1);\n  if (!S.begun) {\n    newCoat(S, START);\n    S.old = null;\n    S.begun = true;\n  }\n  S.t += (cl(dt || 0, 0, 0.1) * S.speed) / 2;\n  if (S.t > S.end || (input.btnPressed && input.btnPressed[0])) newCoat(S, 0);\n}\n\n// Polynomial smooth minimum: where two gaps come within k of each other\n// they merge in a fillet, which rounds the island's corner between them.\nfunction smin(a, b, k) {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n}\n\n// G: signed distance to the open gaps, in LEDs, positive on the coat. Each\n// crack is a gap round its line as far as its tip, its half-width growing\n// from a hairline as it opens, and the corners it makes with older cracks\n// rounding as the coat dries.\nfunction field(S, list, t) {\n  const G = S.G;\n  G.fill(9);\n  const narrow = 1 - 0.5 * S.craze;\n  for (const c of list) {\n    const age = t - c.t;\n    if (age \u003c= 0) continue;\n    const reach = min(c.len, age * VTIP), open = 1 - exp(-age / TAU), run = reach \u003c c.len;\n    const hw = 0.42 + (c.w * narrow - 0.42) * open, k = (0.5 + 2.3 * open) * narrow, { idx, d, u } = c;\n    for (let e = 0; e \u003c idx.length; e++) {\n      const over = u[e] - reach;\n      if (over > REACH) continue;\n      const dd = over > 0 ? sqrt(d[e] * d[e] + over * over) : d[e];\n      // A running tip is sharp.\n      const tip = run ? min(1, 0.35 + max(0, -over) / 5) : 1;\n      G[idx[e]] = smin(G[idx[e]], dd - hw * tip, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const t = S.t, h = S.hue + H0, hh = h - floor(h), cz = S.coat;\n  // While the brush is on its way down, the old crackle shows below it.\n  const laying = t \u003c LAY && S.old, front = -6 + ((H + 12) * t) / LAY;\n  field(S, laying ? S.old : S.cracks, laying ? 1e9 : t);\n  const G = S.G, { base, ink, a, b } = S;\n  // Orange and yellow bases go brown at the dim edge of a gap: paled a\n  // little and lit to full.\n  const warm = cl(1.5 - abs(hh - 0.13) / 0.07, 0, 1);\n  hsv(h, 0.82 - 0.2 * warm, 0.9 + 0.1 * warm, base);\n  // The coat: black lacquer, a jewel tone opposite the base, pearl.\n  const hc = h + 0.5, wc = cl(1.5 - abs(hc - floor(hc) - 0.13) / 0.07, 0, 1);\n  if (cz \u003c 0.5) {\n    hsv(hc, 0.5, 0.05, a);\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, b);\n  } else {\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, a);\n    hsv(h + 0.04, 0.12, 0.9, b);\n  }\n  const f = sm(0, 1, cz \u003c 0.5 ? cz * 2 : cz * 2 - 1);\n  for (let c = 0; c \u003c 3; c++) ink[c] = a[c] + (b[c] - a[c]) * f;\n  const pearl = sm(0.5, 1, cz), dark = 1 - sm(0, 0.6, cz), cool = S.cool;\n  hsv(h + 0.55, 0.28, 0.72, cool);\n  // A strip light reflected in the gloss, sliding down the panel once a\n  // coat, starting as the brush leaves it.\n  const sheen = (((t - LAY) * 24 + 280) % 280) - 5;\n  // The fresh coat is wet: a stronger reflection, brush marks running down\n  // it and the base colour faintly through it, all gone a second after it is on.\n  const dry = laying ? 0 : exp(-(t - LAY) / 0.9);\n  // Above the brush's front the coat is fresh and whole.\n  const at = (x, y) => {\n    const v = G[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)];\n    return laying ? max(v, (front - y) * 3) : v;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = at(x, y);\n      const gx = min(at(x + 1, y), 3) - min(at(x - 1, y), 3), gy = min(at(x, y + 1), 3) - min(at(x, y - 1), 3);\n      const gl = sqrt(gx * gx + gy * gy) + 1e-6, face = -(gx * LX + gy * LY) / gl;\n      const band = exp(-(((x * 0.5 + y - sheen) / 13) ** 2));\n      // The base through the gaps, in the shade of the island on its lit side.\n      const shade = 1 - (0.45 - 0.3 * warm) * sm(-0.5, 0.8, at(x - 1, y - 2));\n      const bl = 0.3 * band;\n      let r = (base[0] + (1 - base[0]) * bl) * shade, g = (base[1] + (1 - base[1]) * bl) * shade, bb = (base[2] + (1 - base[2]) * bl) * shade;\n      // The island: how far inside its edge, as the height of a bead. Its\n      // cover falls off as a square root at the edge, so the base glows up\n      // through a hairline crack near full instead of as a dim line.\n      const cov = 1 - (1 - sm(-0.55, 0.55, v)) ** 0.5, hgt = cl(v / 2.5, 0, 1);\n      if (cov > 0) {\n        const edge = 1 - sm(0.15, 0.75, hgt), lit = max(0, face) * edge, away = max(0, -face) * edge;\n        // Dark coats: a white gloss on the lit rim and the strip light on\n        // the top.\n        const wet = laying ? 1 - sm(front - 2, front, y) : dry;\n        const brush = wet * S.brush[x] * (0.8 + 0.2 * sin(y * 0.09 + x));\n        const gloss = (dark * 0.75 + 0.35 * (1 - dark)) * lit * lit + (0.12 + 0.18 * dark + 0.3 * wet) * band * sm(0.3, 0.9, hgt) + brush;\n        const tint = 0.14 * wet * dark;\n        // Pearl shifts toward a cool interference tint on the rim turned away.\n        const dim = 1 - 0.3 * pearl * away - 0.08 * pearl * (1 - hgt), sh = 0.6 * pearl * away;\n        const ir = (ink[0] + (cool[0] - ink[0]) * sh) * dim + (1 - ink[0]) * gloss + base[0] * tint;\n        const ig = (ink[1] + (cool[1] - ink[1]) * sh) * dim + (1 - ink[1]) * gloss + base[1] * tint;\n        const ib = (ink[2] + (cool[2] - ink[2]) * sh) * dim + (1 - ink[2]) * gloss + base[2] * tint;\n        r += (ir - r) * cov;\n        g += (ig - g) * cov;\n        bb += (ib - bb) * cov;\n      }\n      if (laying) {\n        // The wet bead along the brush's edge.\n        const bead = 0.55 * exp(-(((y - front - 0.6 * sin(x * 0.4 + t * 3)) / 1.1) ** 2));\n        r += (1 - r) * bead;\n        g += (1 - g) * bead;\n        bb += (1 - bb) * bead;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, bb)));\n    }\n}\n","layer":{"id":"layer-crackle-polish","type":"code","name":"crackle-polish","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Crackle Polish\n// Family:  cosmetic\n// Idea:    A glossy colour fills the panel, a dark top coat is brushed over it from the top down, and as the coat dries it splits, first in long cracks across the panel and then in shorter and shorter cracks that each start on an older one at a right angle, while the gaps widen and the islands of coat shrink into rounded beads with a gloss on their edges and the colour glowing up through the network, until a fresh coat goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after crackle nail polish, a top coat that shrinks as it dries, and the hierarchical crack patterns that form by successive division of domains (Steffen Bohn, Ludovic Pauchard and Yves Couder, 2005)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Craze=0..1, Coat=0..1\n//\n// Knob 1: Hue. Turns the base colour round the whole wheel: at 0 hot pink, 0.1 red, 0.15 orange, 0.22 yellow, 0.3 lime, 0.4 green, 0.55 aqua, 0.65 azure, 0.75 blue, 0.85 violet, 0.95 magenta. Orange and yellow bases are paled a little, lit to full and shaded less beside the islands, so no gap turns brown.\n// Knob 2: Speed. At 2 the coat goes on in 1.2 s, the first crack opens 0.6 s later and runs across the panel in about a second, the last starts about 4.5 s after the first, and when the gaps have finished widening the crackle holds until a new coat goes on, about 11 s after the last. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Craze. How far the coat keeps splitting. At 0 a domain stops splitting once it is under about 20 LEDs long, which leaves about 50 islands, most of them 9 to 18 LEDs across; at 1 under about 11, about 155 islands of 5 to 10, and the gaps open half as wide.\n// Knob 4: Coat. The colour of the top coat: black lacquer at 0, a deep jewel tone opposite the base on the wheel at 0.5, a pale pearl at 1. On the dark coats the gloss is a white rim on the edges facing the light; on the pearl the edges turned away fall into a cool grey-lilac shade, as a pearl pigment shifts with the angle.\n// Buttons: K1 tap brushes a fresh coat on now.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n// The cycle, in seconds at Speed 2: the brush crosses the panel in LAY, the\n// first crack opens at T1 and the last near T2, and a new coat comes HOLD\n// after the last. The run opens at START, with the first crack running.\nconst LAY = 1.2, T1 = 1.8, T2 = 6, HOLD = 5, START = 2.4;\n// Crack tips run at VTIP LEDs a second; a gap opens with time constant TAU.\nconst VTIP = 70, TAU = 1.3;\n// Towards the light, x right and y down: up and to the left.\nconst LX = -0.6, LY = -0.8;\n// Opening hue: hot pink.\nconst H0 = 0.93;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The domains are worked out on a grid of half-LED cells: each cell holds\n// the domain it belongs to, or -1 on a crack.\nconst FW = 2 * W, FH = 2 * H;\n// A crack tip moves STEP LEDs at a time, and within BEND LEDs of an older\n// crack it turns to meet it square.\nconst STEP = 0.25, BEND = 3;\n// Gap pixels are listed out to REACH LEDs from a crack's line.\nconst REACH = 7;\n\n// The whole crackle of one coat, worked out when it goes on. The panel is\n// one domain. A domain splits across its long axis: a crack starts on its\n// rim, square to the older crack it leaves, runs across, and turns to meet\n// the crack on the far side square. Each half splits the same way until it\n// is too short; bigger domains crack sooner.\nfunction crackle(craze) {\n  const stop = 20 - 9 * craze, span = log((W * H) / (0.45 * stop * stop));\n  const lab = new Int32Array(FW * FH), cracks = [];\n  const wall = (x, y) => {\n    const i = floor(2 * x), j = floor(2 * y);\n    return i \u003c 0 || j \u003c 0 || i >= FW || j >= FH || lab[j * FW + i] \u003c 0;\n  };\n  let ids = 1;\n  const todo = [{ id: 0, b: [0, 0, FW - 1, FH - 1], ready: 0 }];\n  while (todo.length) {\n    const d = todo.pop(), [i0, j0, i1, j1] = d.b;\n    let n = 0, sx = 0, sy = 0, sxx = 0, syy = 0, sxy = 0;\n    const nb = [FW, FH, 0, 0];\n    for (let j = j0; j \u003c= j1; j++)\n      for (let i = i0; i \u003c= i1; i++)\n        if (lab[j * FW + i] === d.id) {\n          const x = (i + 0.5) / 2, y = (j + 0.5) / 2;\n          n++;\n          sx += x;\n          sy += y;\n          sxx += x * x;\n          syy += y * y;\n          sxy += x * y;\n          nb[0] = min(nb[0], i);\n          nb[1] = min(nb[1], j);\n          nb[2] = max(nb[2], i);\n          nb[3] = max(nb[3], j);\n        }\n    if (n \u003c 8) continue;\n    const mx = sx / n, my = sy / n, vxx = sxx / n - mx * mx, vyy = syy / n - my * my, vxy = sxy / n - mx * my;\n    const ang = 0.5 * Math.atan2(2 * vxy, vxx - vyy);\n    // A bar of length L has variance L^2 / 12 along its axis.\n    const long = sqrt(12 * (vxx * cos(ang) ** 2 + 2 * vxy * cos(ang) * sin(ang) + vyy * sin(ang) ** 2));\n    // The cut is turned up to 20 degrees off square; its ends bend square anyway.\n    const tu = ang + (random() - 0.5) * 0.7, ux = cos(tu), uy = sin(tu);\n    if (long \u003c stop * (0.85 + 0.3 * random())) continue;\n    // Where the cut line, across the long axis near the middle, meets the rim.\n    const off = (random() - 0.5) * 0.36 * long, cx = mx + ux * off, cy = my + uy * off;\n    if (wall(cx, cy)) continue;\n    const ends = [-1, 1].map((sg) => {\n      let x = cx, y = cy;\n      while (!wall(x - sg * uy * STEP, y + sg * ux * STEP)) {\n        x -= sg * uy * STEP;\n        y += sg * ux * STEP;\n      }\n      return [x, y, sg];\n    });\n    const [sx0, sy0, sg] = ends[random() \u003c 0.5 ? 0 : 1];\n    // Heading: across, toward the other end; it starts square off its rim.\n    const hx = sg * uy, hy = -sg * ux;\n    let x = sx0, y = sy0, dx = hx, dy = hy, run = 0, ok = false;\n    const pts = [[x, y]], cells = [];\n    for (let k = 0; k \u003c (4 * long) / STEP; k++) {\n      // The nearest older crack (or the panel's edge) within BEND, and the\n      // way square off it, from all its cells nearby.\n      let best = BEND * BEND, gx = 0, gy = 0;\n      const ci = floor(2 * x), cj = floor(2 * y), r = 2 * BEND;\n      for (let j = cj - r; j \u003c= cj + r; j++)\n        for (let i = ci - r; i \u003c= ci + r; i++) {\n          if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] >= 0) continue;\n          const ex = x - (cl(i, -1, FW) + 0.5) / 2, ey = y - (cl(j, -1, FH) + 0.5) / 2, e2 = ex * ex + ey * ey;\n          best = min(best, e2);\n          if (e2 \u003c 4) {\n            const wt = exp(-e2);\n            gx += ex * wt;\n            gy += ey * wt;\n          }\n        }\n      const dist = sqrt(best), gl = sqrt(gx * gx + gy * gy);\n      let calm = 1;\n      if (best \u003c BEND * BEND && gl > 0) {\n        gx /= gl;\n        gy /= gl;\n        // Leaving its own rim: square off it. Coming up on another: turn square into it.\n        const into = run \u003c 1.2 ? -0.5 : dx * gx + dy * gy \u003c 0 ? 0.6 * (1 - dist / BEND) : 0;\n        if (into) {\n          dx -= into * gx;\n          dy -= into * gy;\n          calm = dist / BEND;\n        }\n      }\n      const tw = (random() - 0.5) * 0.22 * calm;\n      dx += 0.05 * hx * calm - tw * dy;\n      dy += 0.05 * hy * calm + tw * dx;\n      const dl = sqrt(dx * dx + dy * dy);\n      dx /= dl;\n      dy /= dl;\n      x += dx * STEP;\n      y += dy * STEP;\n      run += STEP;\n      const ci2 = floor(2 * x), cj2 = floor(2 * y), last = cells[cells.length - 1];\n      // Cells of the crack, joined edge to edge so nothing leaks past it.\n      if (last && last[0] !== ci2 && last[1] !== cj2) cells.push([ci2, last[1]]);\n      if (!last || last[0] !== ci2 || last[1] !== cj2) cells.push([ci2, cj2]);\n      if (wall(x, y)) {\n        pts.push([x, y]);\n        ok = run > 2;\n        break;\n      }\n      if (k % 4 === 3) pts.push([x, y]);\n    }\n    if (!ok) continue;\n    for (const [i, j] of cells) if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] === d.id) lab[j * FW + i] = -1;\n    // Fill one side with a new domain.\n    const m = pts[pts.length >> 1], q = pts[(pts.length >> 1) + 1] || pts[pts.length - 1];\n    const tx = q[0] - m[0], ty = q[1] - m[1], tl = Math.hypot(tx, ty) || 1;\n    const si = floor(2 * (m[0] - (ty / tl) * 0.8)), sj = floor(2 * (m[1] + (tx / tl) * 0.8));\n    if (si \u003c 0 || sj \u003c 0 || si >= FW || sj >= FH || lab[sj * FW + si] !== d.id) continue;\n    const nid = ids++, stack = [sj * FW + si];\n    lab[sj * FW + si] = nid;\n    while (stack.length) {\n      const c = stack.pop(), i = c % FW, j = (c - i) / FW;\n      for (const e of [i > 0 ? c - 1 : -1, i \u003c FW - 1 ? c + 1 : -1, j > 0 ? c - FW : -1, j \u003c FH - 1 ? c + FW : -1])\n        if (e >= 0 && lab[e] === d.id) {\n          lab[e] = nid;\n          stack.push(e);\n        }\n    }\n    let len = 0;\n    for (let k = 1; k \u003c pts.length; k++) len += Math.hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n    const age = cl(log((W * H) / (n / 4)) / span, 0, 1), t = max(d.ready + 0.06, T1 + (T2 - T1) * age);\n    // Final half-width: the first cracks open widest.\n    cracks.push({ pts, len, t, w: 1.5 - 0.85 * age });\n    const ready = t + len / VTIP;\n    todo.push({ id: d.id, b: nb, ready }, { id: nid, b: nb, ready });\n  }\n  return gapLists(cracks);\n}\n\n// For each crack, every pixel within REACH of its line: how far from it,\n// and how far along the crack the nearest point lies.\nfunction gapLists(cracks) {\n  const dist = new Float32Array(N), along = new Float32Array(N), seen = new Int32Array(N).fill(-1);\n  cracks.forEach((c, ci) => {\n    const idx = [];\n    let u0 = 0;\n    for (let k = 1; k \u003c c.pts.length; k++) {\n      const [ax, ay] = c.pts[k - 1], [bx, by] = c.pts[k], ex = bx - ax, ey = by - ay, el = sqrt(ex * ex + ey * ey) || 1e-6;\n      for (let y = max(0, floor(min(ay, by) - REACH)); y \u003c= min(H - 1, floor(max(ay, by) + REACH)); y++)\n        for (let x = max(0, floor(min(ax, bx) - REACH)); x \u003c= min(W - 1, floor(max(ax, bx) + REACH)); x++) {\n          const px = x + 0.5 - ax, py = y + 0.5 - ay, f = cl((px * ex + py * ey) / (el * el), 0, 1);\n          const qx = px - f * ex, qy = py - f * ey, dd = sqrt(qx * qx + qy * qy), p = y * W + x;\n          if (dd > REACH) continue;\n          if (seen[p] !== ci) {\n            seen[p] = ci;\n            idx.push(p);\n            dist[p] = 1e9;\n          }\n          if (dd \u003c dist[p]) {\n            dist[p] = dd;\n            along[p] = u0 + f * el;\n          }\n        }\n      u0 += el;\n    }\n    c.idx = Int32Array.from(idx);\n    c.d = Float32Array.from(idx, (p) => dist[p]);\n    c.u = Float32Array.from(idx, (p) => along[p]);\n    c.pts = null;\n  });\n  return cracks;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, craze: 0, coat: 0.06, begun: false, t: START, end: 0, cracks: [], old: null, brush: new Float32Array(W),\n    G: new Float32Array(N),\n    base: [0, 0, 0], ink: [0, 0, 0], a: [0, 0, 0], b: [0, 0, 0], cool: [0, 0, 0],\n  };\n}\n\nfunction newCoat(S, t0) {\n  S.old = S.cracks;\n  // The brush's bristles: a mark per column, softened.\n  let m = random();\n  for (let x = 0; x \u003c W; x++) S.brush[x] = 0.07 * (m = 0.55 * m + 0.45 * random());\n  S.cracks = crackle(S.craze);\n  let last = 0;\n  for (const c of S.cracks) last = max(last, c.t);\n  S.end = last + HOLD;\n  S.t = t0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.craze = cl(k[2], 0, 1);\n  S.coat = cl(k[3], 0, 1);\n  if (!S.begun) {\n    newCoat(S, START);\n    S.old = null;\n    S.begun = true;\n  }\n  S.t += (cl(dt || 0, 0, 0.1) * S.speed) / 2;\n  if (S.t > S.end || (input.btnPressed && input.btnPressed[0])) newCoat(S, 0);\n}\n\n// Polynomial smooth minimum: where two gaps come within k of each other\n// they merge in a fillet, which rounds the island's corner between them.\nfunction smin(a, b, k) {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n}\n\n// G: signed distance to the open gaps, in LEDs, positive on the coat. Each\n// crack is a gap round its line as far as its tip, its half-width growing\n// from a hairline as it opens, and the corners it makes with older cracks\n// rounding as the coat dries.\nfunction field(S, list, t) {\n  const G = S.G;\n  G.fill(9);\n  const narrow = 1 - 0.5 * S.craze;\n  for (const c of list) {\n    const age = t - c.t;\n    if (age \u003c= 0) continue;\n    const reach = min(c.len, age * VTIP), open = 1 - exp(-age / TAU), run = reach \u003c c.len;\n    const hw = 0.42 + (c.w * narrow - 0.42) * open, k = (0.5 + 2.3 * open) * narrow, { idx, d, u } = c;\n    for (let e = 0; e \u003c idx.length; e++) {\n      const over = u[e] - reach;\n      if (over > REACH) continue;\n      const dd = over > 0 ? sqrt(d[e] * d[e] + over * over) : d[e];\n      // A running tip is sharp.\n      const tip = run ? min(1, 0.35 + max(0, -over) / 5) : 1;\n      G[idx[e]] = smin(G[idx[e]], dd - hw * tip, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const t = S.t, h = S.hue + H0, hh = h - floor(h), cz = S.coat;\n  // While the brush is on its way down, the old crackle shows below it.\n  const laying = t \u003c LAY && S.old, front = -6 + ((H + 12) * t) / LAY;\n  field(S, laying ? S.old : S.cracks, laying ? 1e9 : t);\n  const G = S.G, { base, ink, a, b } = S;\n  // Orange and yellow bases go brown at the dim edge of a gap: paled a\n  // little and lit to full.\n  const warm = cl(1.5 - abs(hh - 0.13) / 0.07, 0, 1);\n  hsv(h, 0.82 - 0.2 * warm, 0.9 + 0.1 * warm, base);\n  // The coat: black lacquer, a jewel tone opposite the base, pearl.\n  const hc = h + 0.5, wc = cl(1.5 - abs(hc - floor(hc) - 0.13) / 0.07, 0, 1);\n  if (cz \u003c 0.5) {\n    hsv(hc, 0.5, 0.05, a);\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, b);\n  } else {\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, a);\n    hsv(h + 0.04, 0.12, 0.9, b);\n  }\n  const f = sm(0, 1, cz \u003c 0.5 ? cz * 2 : cz * 2 - 1);\n  for (let c = 0; c \u003c 3; c++) ink[c] = a[c] + (b[c] - a[c]) * f;\n  const pearl = sm(0.5, 1, cz), dark = 1 - sm(0, 0.6, cz), cool = S.cool;\n  hsv(h + 0.55, 0.28, 0.72, cool);\n  // A strip light reflected in the gloss, sliding down the panel once a\n  // coat, starting as the brush leaves it.\n  const sheen = (((t - LAY) * 24 + 280) % 280) - 5;\n  // The fresh coat is wet: a stronger reflection, brush marks running down\n  // it and the base colour faintly through it, all gone a second after it is on.\n  const dry = laying ? 0 : exp(-(t - LAY) / 0.9);\n  // Above the brush's front the coat is fresh and whole.\n  const at = (x, y) => {\n    const v = G[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)];\n    return laying ? max(v, (front - y) * 3) : v;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = at(x, y);\n      const gx = min(at(x + 1, y), 3) - min(at(x - 1, y), 3), gy = min(at(x, y + 1), 3) - min(at(x, y - 1), 3);\n      const gl = sqrt(gx * gx + gy * gy) + 1e-6, face = -(gx * LX + gy * LY) / gl;\n      const band = exp(-(((x * 0.5 + y - sheen) / 13) ** 2));\n      // The base through the gaps, in the shade of the island on its lit side.\n      const shade = 1 - (0.45 - 0.3 * warm) * sm(-0.5, 0.8, at(x - 1, y - 2));\n      const bl = 0.3 * band;\n      let r = (base[0] + (1 - base[0]) * bl) * shade, g = (base[1] + (1 - base[1]) * bl) * shade, bb = (base[2] + (1 - base[2]) * bl) * shade;\n      // The island: how far inside its edge, as the height of a bead. Its\n      // cover falls off as a square root at the edge, so the base glows up\n      // through a hairline crack near full instead of as a dim line.\n      const cov = 1 - (1 - sm(-0.55, 0.55, v)) ** 0.5, hgt = cl(v / 2.5, 0, 1);\n      if (cov > 0) {\n        const edge = 1 - sm(0.15, 0.75, hgt), lit = max(0, face) * edge, away = max(0, -face) * edge;\n        // Dark coats: a white gloss on the lit rim and the strip light on\n        // the top.\n        const wet = laying ? 1 - sm(front - 2, front, y) : dry;\n        const brush = wet * S.brush[x] * (0.8 + 0.2 * sin(y * 0.09 + x));\n        const gloss = (dark * 0.75 + 0.35 * (1 - dark)) * lit * lit + (0.12 + 0.18 * dark + 0.3 * wet) * band * sm(0.3, 0.9, hgt) + brush;\n        const tint = 0.14 * wet * dark;\n        // Pearl shifts toward a cool interference tint on the rim turned away.\n        const dim = 1 - 0.3 * pearl * away - 0.08 * pearl * (1 - hgt), sh = 0.6 * pearl * away;\n        const ir = (ink[0] + (cool[0] - ink[0]) * sh) * dim + (1 - ink[0]) * gloss + base[0] * tint;\n        const ig = (ink[1] + (cool[1] - ink[1]) * sh) * dim + (1 - ink[1]) * gloss + base[1] * tint;\n        const ib = (ink[2] + (cool[2] - ink[2]) * sh) * dim + (1 - ink[2]) * gloss + base[2] * tint;\n        r += (ir - r) * cov;\n        g += (ig - g) * cov;\n        bb += (ib - bb) * cov;\n      }\n      if (laying) {\n        // The wet bead along the brush's edge.\n        const bead = 0.55 * exp(-(((y - front - 0.6 * sin(x * 0.4 + t * 3)) / 1.1) ** 2));\n        r += (1 - r) * bead;\n        g += (1 - g) * bead;\n        bb += (1 - bb) * bead;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, bb)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Craze=0..1, Coat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the base colour round the whole wheel: at 0 hot pink, 0.1 red, 0.15 orange, 0.22 yellow, 0.3 lime, 0.4 green, 0.55 aqua, 0.65 azure, 0.75 blue, 0.85 violet, 0.95 magenta. Orange and yellow bases are paled a little, lit to full and shaded less beside the islands, so no gap turns brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the coat goes on in 1.2 s, the first crack opens 0.6 s later and runs across the panel in about a second, the last starts about 4.5 s after the first, and when the gaps have finished widening the crackle holds until a new coat goes on, about 11 s after the last. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Craze","min":0,"max":1,"about":"How far the coat keeps splitting. At 0 a domain stops splitting once it is under about 20 LEDs long, which leaves about 50 islands, most of them 9 to 18 LEDs across; at 1 under about 11, about 155 islands of 5 to 10, and the gaps open half as wide."},{"name":"Coat","min":0,"max":1,"about":"The colour of the top coat: black lacquer at 0, a deep jewel tone opposite the base on the wheel at 0.5, a pale pearl at 1. On the dark coats the gloss is a white rim on the edges facing the light; on the pearl the edges turned away fall into a cool grey-lilac shade, as a pearl pigment shifts with the angle."}],"start":[0,2,0,0.06],"measures":{"motion":0.0606,"detail":0.0894,"edges":0.5269,"complexity":1.379,"coverage":0.5043,"colour":0.2853,"drift":0.1556},"knobResponse":[0.1036,0.1543,0.0671,0.6128]},{"slug":"cream-swirl","title":"Cream Swirl","family":"cosmetic","round":29,"note":"보이지 않는 팔레트 나이프가 크림을 S자와 소용돌이로 펴 바르며 매끈한 띠와 윤기 나는 둔덕을 남기고, 떨어진 색 크림 덩이를 길쭉한 리본으로 끌고 가요. 부드러운 빛이 7초에 한 번 좌우로 오가며 결 위로 윤이 미끄러져요. K3 을 올리면 섞이는 색조가 셋까지 늘고, 누르면 가장 진한 색 덩이가 칼 앞에 떨어져요.","idea":"An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.","buttons":"K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.","code":"// ===== Patternflow pattern =====\n// Title:   Cream Swirl\n// Family:  cosmetic\n// Idea:    An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the swatch of face cream spread with a spatula in a macro product film\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1\n//\n// Knob 1: Hue. Turns the cream and its tints round the whole colour wheel together, opening on rose.\n// Knob 2: Speed. How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges.\n// Knob 3: Tones. How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path.\n// Knob 4: Gloss. At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight.\n// Buttons: K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The knife's edge is cut into NB bins. Each bin carries the cream it has\n// scraped up and that cream's tint, so a dollop picked up at one end of the\n// blade is laid down as a ribbon behind that end, not across the whole band.\nconst NB = 16;\n// Path points are half an LED apart.\nconst STEP = 0.5, PMAX = 1200;\n// How fast a bin's tint turns to the cream it scrapes, per unit of height\n// scraped; how much of the band's skin is the cream the blade carries; what\n// share of each bin's load slides on to the next bin along the angled blade\n// for each LED travelled.\nconst PICK = 0.3, FILM = 0.45, SLIP = 1.05;\n// The share of the dragged skin left behind for each LED travelled.\nconst DRAG = 0.03;\n// The ridge the spill builds stands at RS height per LED on its flanks, and\n// is never taller than RMAX.\nconst RS = 0.4, RMAX = 3.6;\n// How deep the roll of cream in front of the blade is, in LEDs.\nconst ROLL = 6;\n// How deep the visible skin is: scraping this much off shows the bed.\nconst SKIN = 0.8;\n// The opening hue: rose, not red.\nconst H0 = 0.93;\n\n// A soft light low over the top left, its height LZ and where it sits round\n// the panel, LA radians; it glides LS either way of that and back over SWING\n// seconds at Speed 2, so the sheen slides along the ridges between strokes.\nconst LZ = 0.5, LA = -2.34, LS = 0.9, SWING = 7;\n// How tall the height field looks: a slope of 1 tilts the surface 56 degrees.\nconst KZ = 1.8;\n// The light is a big soft box: it wraps a little way round the cream, so a\n// slope turned from it shades off gently instead of dropping into shadow.\nconst WRAP = 0.3;\n// How much a fold darkens and a crest brightens, per unit of height.\nconst CAV = 0.5;\n// Cream the knife has just laid down holds a wet film that lifts it by this\n// much, fading as it dulls.\nconst GLINT = 26;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The tint concentrations a dollop can come in, for one, two and three tints.\nconst DOSE = [[0.55], [0.4, 0.88], [0.3, 0.62, 1]];\n// Where the colour ramp steps between tints, so folded cream shows distinct\n// bands rather than one blurred pink: thresholds and the level each band shows.\nconst STEPS = [\n  [[0.22], [0, 0.55]],\n  [[0.18, 0.6], [0, 0.42, 0.88]],\n  [[0.14, 0.44, 0.78], [0, 0.3, 0.62, 1]],\n];\nfunction band(c, n) {\n  const [th, lv] = STEPS[n];\n  let v = lv[0];\n  for (let i = 0; i \u003c th.length; i++) v += (lv[i + 1] - lv[i]) * sm((c - th[i]) / 0.1 + 0.5);\n  return v;\n}\n\nexport function setup(params) {\n  params.s = {\n    // Height, the tint of the skin, the tint of the bed under it.\n    hf: new Float32Array(N), tn: new Float32Array(N), ut: new Float32Array(N),\n    dh: new Float32Array(N), dt: new Float32Array(N), bl: new Float32Array(N), av: new Float32Array(N),\n    stamp: new Int32Array(N).fill(-999), sub: 0, fr: new Float32Array(N),\n    path: new Float32Array(PMAX * 2), plen: 0, pos: 0, type: 0, done: 0,\n    m: new Float32Array(NB), c: new Float32Array(NB), ft: new Float32Array(NB), fm: new Float32Array(NB), bm: 0, bc: 0,\n    L: 24, ca: 1, sa: 0, B: 0, tilt: 0, gPh: 0, cc: 0, cA: 0, cP: 8, cB: 0, slip: 1, rh: 0,\n    sp: new Float32Array(8), pause: 0, live: false, force: 1, lt: 0,\n    dol: [], hue: 0, tones: 1, gloss: 0.06, ready: false,\n    lut: new Float32Array(64 * 3), lus: new Float32Array(64 * 3),\n    kx: 0, ky: 0, dx: 0, dy: 1, tx: 1, ty: 0,\n  };\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\n// A round dollop: a soft mound of tint c with a peak where it left the spoon. It is all skin, so a knife that\n// scrapes it away finds the cream it was dropped on.\n// Its colour goes on with the first of it, as deep as the whole dollop will\n// be thick: its thin rim only half covers what it landed on, so a knife that\n// scrapes it off leaves no ring.\nfunction dollop(P, x0, y0, r, ht, c, f, first) {\n  const x1 = max(0, floor(x0 - r)), x2 = min(W - 1, floor(x0 + r) + 1);\n  const y1 = max(0, floor(y0 - r)), y2 = min(H - 1, floor(y0 + r) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const d = ((x - x0) ** 2 + (y - y0) ** 2) / (r * r);\n      if (d >= 1) continue;\n      const p = y * W + x, a = ht * (1 - sqrt(d)) * (1 - d * 0.5);\n      P.hf[p] += a * f;\n      if (first) P.tn[p] += (c - P.tn[p]) * min(1, a / 1.2);\n    }\n}\n\n// The stroke's path as a function of u from 0 to 1, from the parameters\n// startStroke puts in P.sp.\nfunction pathAt(P, u, o) {\n  const s = P.sp;\n  if (P.type === 0) {\n    // An S down (or up) the panel.\n    o[0] = s[0] + s[1] * sin(2 * PI * s[2] * u + s[3]);\n    o[1] = s[4] + (s[5] - s[4]) * u;\n  } else if (P.type === 1) {\n    // A spiral in to a point: the swirl on top of a jar.\n    const a = s[3] + s[4] * u * 2 * PI, r = s[5] + (s[6] - s[5]) * (1 - (1 - u) * (1 - u));\n    o[0] = s[0] + r * cos(a);\n    o[1] = s[1] + r * sin(a) * 1.15;\n  } else {\n    // A bowed smear from off one side to the middle, or right across.\n    const v = 1 - u, mx = (s[0] + s[2]) / 2 + s[4], my = (s[1] + s[3]) / 2 + s[5];\n    o[0] = v * v * s[0] + 2 * v * u * mx + u * u * s[2];\n    o[1] = v * v * s[1] + 2 * v * u * my + u * u * s[3];\n  }\n}\n\nconst TMP = [0, 0];\nfunction startStroke(P, k3) {\n  const s = P.sp, r = rnd(), hf = P.hf;\n  // Heights only matter against each other: keep the cream's mean level at\n  // 0, and cut every band below it, so each stroke has cream to push.\n  let mean = 0;\n  for (let p = 0; p \u003c N; p++) mean += hf[p];\n  mean /= N;\n  for (let p = 0; p \u003c N; p++) hf[p] -= mean;\n  P.type = r \u003c 0.5 ? 0 : r \u003c 0.8 ? 1 : 2;\n  if (P.type === 0) {\n    const down = rnd() \u003c 0.5;\n    s[0] = 22 + rnd() * 20;\n    s[1] = 10 + rnd() * 10;\n    s[2] = 0.6 + rnd() * 0.5;\n    s[3] = rnd() * 2 * PI;\n    s[4] = down ? -14 : H + 14;\n    s[5] = down ? H + 14 : -14;\n    P.L = 34 + rnd() * 10;\n    P.B = -0.9 + rnd() * 0.5;\n  } else if (P.type === 1) {\n    s[0] = 26 + rnd() * 12;\n    s[1] = 36 + rnd() * 56;\n    s[3] = rnd() * 2 * PI;\n    s[4] = (rnd() \u003c 0.5 ? -1 : 1) * (1.3 + rnd() * 0.5);\n    s[5] = 25 + rnd() * 6;\n    s[6] = 3;\n    P.L = 18 + rnd() * 5;\n    P.B = -0.6 + rnd() * 0.4;\n  } else {\n    const across = rnd() \u003c 0.4, side = rnd() \u003c 0.5 ? -1 : 1;\n    if (across) {\n      s[0] = side \u003c 0 ? -14 : W + 14;\n      s[2] = side \u003c 0 ? W + 14 : -14;\n      s[1] = 14 + rnd() * 100;\n      s[3] = cl(s[1] + (rnd() - 0.5) * 40, 10, H - 10);\n    } else {\n      s[0] = 32 + side * (34 + rnd() * 6);\n      s[1] = 10 + rnd() * 108;\n      s[2] = 32 - side * (rnd() * 10);\n      s[3] = cl(s[1] + (rnd() - 0.5) * 70, 18, H - 18);\n    }\n    s[4] = 0;\n    s[5] = (rnd() - 0.5) * 36;\n    P.L = 28 + rnd() * 8;\n    P.B = -0.8 + rnd() * 0.5;\n  }\n  // Lay the path down half an LED a point.\n  const path = P.path;\n  pathAt(P, 0, TMP);\n  let px = TMP[0], py = TMP[1], n = 1;\n  path[0] = px;\n  path[1] = py;\n  for (let i = 1; i \u003c= 4000 && n \u003c PMAX; i++) {\n    pathAt(P, i / 4000, TMP);\n    const d = sqrt((TMP[0] - px) ** 2 + (TMP[1] - py) ** 2);\n    if (d >= STEP) {\n      px += ((TMP[0] - px) * STEP) / d;\n      py += ((TMP[1] - py) * STEP) / d;\n      path[n * 2] = px;\n      path[n * 2 + 1] = py;\n      n++;\n    }\n  }\n  P.plen = (n - 1) * STEP;\n  P.pos = 0;\n  // The blade sits at an angle to its track, tilted a little and bowed, so\n  // the band is a shallow trough, and it chatters as it goes, leaving soft\n  // folds across the band. A slow knife glides and cuts shallow; a fast one\n  // chatters harder and digs deeper, so it throws a taller ridge.\n  const al = (rnd() - 0.5) * 0.6;\n  P.ca = cos(al);\n  P.sa = sin(al);\n  P.tilt = (rnd() - 0.5) * 0.6;\n  P.cc = 0.2 + rnd() * 0.4;\n  P.cA = (0.13 + rnd() * 0.1) * (0.35 + 0.65 * P.force);\n  P.B -= 0.35 * (P.force - 1);\n  P.cP = 11 + rnd() * 5;\n  P.cB = (rnd() \u003c 0.5 ? -1 : 1) * (3 + rnd() * 4);\n  P.gPh = rnd() * 2 * PI;\n  P.slip = rnd() \u003c 0.5 ? -1 : 1;\n  if (P.type === 1) {\n    // A swirl throws its cream outwards.\n    locate(P, 6);\n    P.slip = P.tx * (P.kx - s[0]) + P.ty * (P.ky - s[1]) > 0 ? 1 : -1;\n  }\n  P.m.fill(0);\n  P.c.fill(0);\n  P.ft.fill(0);\n  P.fm.fill(0);\n  P.rh = 0;\n  P.live = true;\n  // Every stroke goes through fresh dollops dropped a little way along: one\n  // for one tint, two or three when three tints are folded in.\n  const nd = k3 === 1 ? 1 : k3 === 2 ? (rnd() \u003c 0.5 ? 2 : 1) : rnd() \u003c 0.4 ? 3 : 2;\n  for (let i = 0; i \u003c nd; i++) plan(P, 0.1 + rnd() * 0.45, rnd() \u003c 0.4 ? 0 : DOSE[k3 - 1][floor(rnd() * k3)], (10 + rnd() * 3) / sqrt(nd));\n}\n\n// A dollop waiting to fall at a point on the path ahead of the knife.\nfunction plan(P, u, c, r) {\n  if (P.dol.length > 3) return;\n  const i = floor((P.pos + (P.plen - P.pos) * u) / STEP);\n  const x = P.path[i * 2], y = P.path[i * 2 + 1];\n  P.dol.push({ x: cl(x + (rnd() - 0.5) * 6, 6, W - 7), y: cl(y + (rnd() - 0.5) * 6, 8, H - 9), r, h: 2.6 + rnd() * 0.6, c, f: 0 });\n}\n\n// The knife's point, its direction of travel and the blade's direction.\nfunction locate(P, pos) {\n  const path = P.path, last = floor(P.plen / STEP);\n  const i = cl(floor(pos / STEP), 0, last - 1), f = cl(pos / STEP - i, 0, 1);\n  P.kx = path[i * 2] + (path[i * 2 + 2] - path[i * 2]) * f;\n  P.ky = path[i * 2 + 1] + (path[i * 2 + 3] - path[i * 2 + 1]) * f;\n  const a = max(0, i - 3), b = min(last, i + 4);\n  let dx = path[b * 2] - path[a * 2], dy = path[b * 2 + 1] - path[a * 2 + 1];\n  const d = sqrt(dx * dx + dy * dy) || 1;\n  dx /= d;\n  dy /= d;\n  P.dx = dx;\n  P.dy = dy;\n  P.tx = -dy * P.ca - dx * P.sa;\n  P.ty = dx * P.ca - dy * P.sa;\n}\n\n// The load of the blade at a point a along it and the tint it drags there,\n// read between the bins so what it lays down has no seams.\nfunction load(P, a) {\n  const fb = cl(((a + P.L / 2) / P.L) * NB - 0.5, 0, NB - 1), j = min(NB - 2, floor(fb)), f = fb - j;\n  P.bm = P.m[j] + (P.m[j + 1] - P.m[j]) * f;\n  P.bc = P.ft[j] + (P.ft[j + 1] - P.ft[j]) * f;\n}\n\n// The ridge across its width r (0 at the band's edge, 1 at its foot): a\n// steep inner face where the blade cut it, a long outer slope.\nconst ridge = (r) => (r \u003c 0.3 ? sm(r / 0.3) : 1 - sm((r - 0.3) / 0.7));\n\n// One move of the knife by ds LEDs. Each LED is worked once a pass, as the\n// back of the blade leaves it: what stood above the blade goes into the\n// bin over it, and the band, the ridge beside it and their tints are laid\n// down.\nfunction knife(P, ds) {\n  P.pos += ds;\n  P.sub++;\n  if (P.pos >= P.plen) return lift(P);\n  locate(P, P.pos);\n  const { hf, tn, ut, m, c, ft, fm, stamp, L } = P, hl = L / 2, sl = P.slip;\n  for (let j = 0; j \u003c NB; j++) fm[j] *= 1 - DRAG * ds;\n  const kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  // Pressure comes on over the first 8 LEDs and goes off over the last 6.\n  const pr = sm(P.pos / 8) * sm((P.plen - P.pos) / 6);\n  const rw = max(3, (2 * P.rh) / RS), end = sl > 0 ? NB - 1 : 0, lvEnd = P.B + P.tilt * sl + P.cc;\n  const rx = abs(tx) * (hl + rw) + 3, ry = abs(ty) * (hl + rw) + 3;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, s = (tx * oy - ty * ox) / det;\n      // On a curve the LEDs on the outside move further than ds, so the\n      // strip is wider than a step and the stamp keeps it to once a pass.\n      if (s \u003c -3 - ds || s >= -0.3) continue;\n      const a = (ox * dy - oy * dx) / det, as = a * sl, p = y * W + x;\n      if (as \u003c= -hl - 1.5 || as >= hl + rw || P.sub - stamp[p] \u003c 40) continue;\n      stamp[p] = P.sub;\n      const ho = hf[p], to = tn[p];\n      if (as \u003c hl && as > -hl) {\n        // The chatter marks bow back towards the blade's ends, as a flexible\n        // blade leaves them, and come and go along it.\n        const u = a / hl, w = (2 * PI * (P.pos + P.cB * u * u)) / P.cP;\n        const lv = P.B + P.tilt * u + P.cc * u * u + P.cA * (0.65 + 0.35 * sin(a * 0.31 + P.gPh)) * (sin(w) + 0.5 * sin(w * 1.63 + 1.3)), e = ho - lv;\n        const j = cl(floor(((a + hl) / L) * NB), 0, NB - 1);\n        if (e > 0) {\n          m[j] += e * pr;\n          c[j] += (to - c[j]) * min(1, e * PICK * pr);\n          // The skin of tint the blade drags stays in its own lane and is\n          // mixed by how much of each colour it gathered, so a dollop\n          // becomes a long ribbon that pales as white cream dilutes it.\n          fm[j] += e * pr;\n          ft[j] += ((to - ft[j]) * e * pr) / fm[j];\n        }\n        // Under what was scraped off lies the bed; over it the blade leaves a\n        // film of the cream it carries.\n        const ex = e > 0 ? to + (ut[p] - to) * min(1, e / SKIN) : to;\n        load(P, a);\n        const tw = ex + (P.bc - ex) * FILM * min(1, P.bm);\n        hf[p] = ho + (lv - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (tw - to) * pr;\n        ut[p] += (tw - ut[p]) * pr * 0.4;\n      } else {\n        // Beside the band: the ridge on the spill side, a thin lip of\n        // squeezed cream on the other.\n        const hr = as > 0 ? lvEnd + P.rh * ridge((as - hl) / rw) : P.B - P.tilt * sl + 0.2 * P.rh * ridge((-as - hl) / 1.5);\n        if (hr \u003c= ho) continue;\n        const k = pr * min(1, (hr - ho) / SKIN), ce = as > 0 ? c[end] : to;\n        hf[p] = ho + (hr - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (ce - to) * k;\n        ut[p] += (ce - ut[p]) * k;\n      }\n    }\n  // The load slides along the angled blade and spills off its end, and the\n  // ridge stands as tall as the cream spilling into it.\n  const f = min(0.9, SLIP * ds);\n  for (let k = 1; k \u003c NB; k++) {\n    const j = sl > 0 ? NB - 1 - k : k, to = j + sl, a = m[j] * f;\n    if (a \u003c= 0) continue;\n    c[to] = (c[to] * m[to] + c[j] * a) / (m[to] + a);\n    m[to] += a;\n    m[j] -= a;\n  }\n  const spill = m[end] * f;\n  m[end] -= spill;\n  const target = min(RMAX, sqrt(0.75 * (spill / ds) * RS));\n  P.rh += (target - P.rh) * min(1, ds * 0.25);\n}\n\n// The knife lifts: what it still carries stays where it stopped, a raised\n// lip across the end of the band.\nfunction lift(P) {\n  locate(P, P.plen);\n  roll(P, P.hf, P.tn, P.ut);\n  P.live = false;\n  P.done++;\n  P.pause = 0.15 + rnd() * 0.2;\n}\n\n// The cream on the blade's face as a rounded roll in front of it, laid into\n// (h, t): for the picture while the knife moves, for good when it lifts.\nfunction roll(P, h, t, u) {\n  const hl = P.L / 2, kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  const rx = abs(tx) * hl + ROLL + 2, ry = abs(ty) * hl + ROLL + 2;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, a = (ox * dy - oy * dx) / det, s = (tx * oy - ty * ox) / det;\n      if (s \u003c= -0.3 || s >= ROLL || a \u003c= -hl || a >= hl) continue;\n      load(P, a);\n      // A bin's load spread as a mound ROLL deep, rounded off at the blade's\n      // ends: as tall as that much cream stands, and never a wall.\n      const ht = min(2.4, sqrt((P.bm * NB) / P.L) * 0.7) * sin((PI * (s + 0.3)) / (ROLL + 0.3)) * sqrt(sin((PI * (a + hl)) / P.L));\n      const p = y * W + x;\n      if (P.B + ht \u003c= h[p]) continue;\n      const k = min(1, (P.B + ht - h[p]) / SKIN);\n      h[p] = P.B + ht;\n      t[p] += (P.bc - t[p]) * k;\n      if (u) u[p] += (P.bc - u[p]) * k;\n    }\n}\n\n// One frame of the studio: the pause between strokes, dollops falling, the knife.\nfunction tick(P, dt, speed, k3) {\n  for (const d of P.dol) {\n    if (d.f >= 1) continue;\n    const g = min(1 - d.f, dt * 2.5 * max(0.6, speed / 2));\n    dollop(P, d.x, d.y, d.r, d.h, d.c, g, d.f === 0);\n    d.f += g;\n  }\n  // Freshly worked cream glistens; left alone it dulls to a satin over\n  // about ten seconds at Speed 2.\n  P.lt += dt * speed * 0.5;\n  const fr = P.fr, k = 1 - dt * 0.07 * max(0.5, speed);\n  for (let p = 0; p \u003c N; p++) fr[p] *= k;\n  if (!P.live) {\n    P.pause -= dt * max(0.5, speed / 2);\n    if (P.pause \u003c= 0) startStroke(P, k3);\n  } else {\n    let ds = dt * speed * 10;\n    while (ds > 1e-6) {\n      const st = min(ds, 0.5);\n      knife(P, st);\n      ds -= st;\n      if (!P.live) break;\n    }\n  }\n  // A dollop is forgotten once it has fallen and the knife has gone on.\n  if (P.dol.length && P.dol[0].f >= 1 && (!P.live || P.dol.length > 2)) P.dol.shift();\n}\n\n// The first frame already shows cream that has been worked: a level layer\n// and three strokes through dollops of tint.\nfunction prime(P, k3) {\n  const { hf } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hf[y * W + x] = 0.3 * sin(x * 0.11 + y * 0.05) * sin(y * 0.07 - x * 0.04);\n  P.pause = 0;\n  while (P.done \u003c 3) tick(P, 1 / 30, 2, k3);\n  while (!P.live) tick(P, 1 / 30, 2, k3);\n  // Start the live stroke a fifth of the way along, its dollops down.\n  for (const d of P.dol) if (d.f \u003c 1) (dollop(P, d.x, d.y, d.r, d.h, d.c, 1 - d.f, d.f === 0), (d.f = 1));\n  while (P.live && P.pos \u003c P.plen * 0.2) tick(P, 1 / 30, 2, k3);\n  P.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.tones = cl(k[2], 1, 3);\n  P.gloss = cl(k[3], 0, 1);\n  const k3 = cl(Math.round(P.tones), 1, 3);\n  P.force = cl(k[1], 0.2, 3) / 2;\n  if (!P.ready) prime(P, k3);\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fresh dollop in the deepest tint, where the knife will reach it.\n    if (P.live && P.plen - P.pos > 40) plan(P, 0.25 + rnd() * 0.2, DOSE[k3 - 1][k3 - 1], 9);\n    else P.dol.push({ x: 14 + rnd() * 36, y: 20 + rnd() * 88, r: 12, h: 3.2, c: DOSE[k3 - 1][k3 - 1], f: 0 });\n  }\n  tick(P, d, cl(k[1], 0.2, 3), k3);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  const { dh, dt, lut, lus } = P;\n  dh.set(P.hf);\n  dt.set(P.tn);\n  // The cream riding on the blade's face shows where the unseen knife is.\n  if (P.live) roll(P, dh, dt, null);\n  // The light reads the surface and its colour through a small blur, so the\n  // LED steps of the height field do not show as grain.\n  blur(dh, P.bl);\n  // A wide blur of the surface: cream that stands above it is a crest and\n  // catches more light, cream below it lies in a fold and gets less.\n  const av = P.av;\n  av.set(dh);\n  for (let i = 0; i \u003c 4; i++) blur(av, P.bl);\n  blur(dt, P.bl);\n  // The colour of each tint concentration: white cream at 0, the deepest\n  // tint at 1, stepped into the bands Tones asks for. Light goes a little\n  // way into cream, so its shadows are a deeper tint rather than grey.\n  // Wet cream (Gloss up) is a little deeper in colour, as anything wet is.\n  // The deeper tints also darken, so three of them stay apart, except round\n  // orange and yellow, where darker reads as brown and olive on LEDs.\n  const t = P.tones, n0 = floor(t) - 1, ft = t - floor(t), n1 = min(2, n0 + 1), hue = H0 + P.hue, g = P.gloss;\n  const hw = (hue - floor(hue) + 0.38) % 1, dk = 0.3 * min(1, abs(hw - 0.5) / 0.11);\n  for (let i = 0; i \u003c 64; i++) {\n    const c = i / 63, v = band(c, n0) + (band(c, n1) - band(c, n0)) * ft;\n    hsv(hue, 0.22 + 0.72 * v + 0.06 * g, (1 - 0.06 * v - dk * v * v) * (1 - 0.1 * g), lut, i * 3);\n    hsv(hue, min(1, 0.4 + 0.6 * v + 0.1 * g), 0.58 - 0.08 * v - 0.14 * g, lus, i * 3);\n  }\n  // The sheen is measured from what a level surface would show, so level\n  // cream stays its colour and only the slopes turned to the light shine.\n  const la = LA + LS * sin((2 * PI * P.lt) / SWING), lr = sqrt(1 - LZ * LZ), LX = lr * cos(la), LY = lr * sin(la);\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  // A broad satin sheen is always there; Gloss adds a narrow wet one on top.\n  const shin = 10 + 70 * g * g, ks = 0.95 * g * 255, s0 = pow(HZ, shin), sk = ks / (1 - s0), fr = P.fr;\n  const b0 = pow(HZ, 6), bk = (0.4 * 255) / (1 - b0);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = y > 0 ? -W : 0, yd = y \u003c H - 1 ? W : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (dh[x \u003c W - 1 ? p + 1 : p] - dh[x > 0 ? p - 1 : p]) * 0.5 * KZ;\n      const gy = (dh[p + yd] - dh[p + yu]) * 0.5 * KZ;\n      const il = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * il, ny = -gy * il, nz = il;\n      const df = nx * LX + ny * LY + nz * LZ, nh = nx * HX + ny * HY + nz * HZ;\n      const f = (df > -WRAP ? (0.85 * (df + WRAP)) / (LZ + WRAP) : 0) * (1 + cl((dh[p] - av[p]) * CAV, -0.45, 0.25)), n2 = nh * nh, sp = (nh > HZ ? ((g > 0.01 ? (pow(nh, shin) - s0) * sk : 0) + (n2 * n2 * n2 - b0) * bk) * (0.5 + 0.5 * fr[p]) : 0) + fr[p] * GLINT;\n      const o = cl(floor(dt[p] * 63 + 0.5), 0, 63) * 3, r = lus[o], gg = lus[o + 1], b = lus[o + 2];\n      display.setPixel(x, y, min(255, r + (lut[o] - r) * f + sp), min(255, gg + (lut[o + 1] - gg) * f + sp * 0.97), min(255, b + (lut[o + 2] - b) * f + sp * 0.92));\n    }\n  }\n}\n","layer":{"id":"layer-cream-swirl","type":"code","name":"cream-swirl","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cream Swirl\n// Family:  cosmetic\n// Idea:    An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the swatch of face cream spread with a spatula in a macro product film\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1\n//\n// Knob 1: Hue. Turns the cream and its tints round the whole colour wheel together, opening on rose.\n// Knob 2: Speed. How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges.\n// Knob 3: Tones. How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path.\n// Knob 4: Gloss. At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight.\n// Buttons: K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The knife's edge is cut into NB bins. Each bin carries the cream it has\n// scraped up and that cream's tint, so a dollop picked up at one end of the\n// blade is laid down as a ribbon behind that end, not across the whole band.\nconst NB = 16;\n// Path points are half an LED apart.\nconst STEP = 0.5, PMAX = 1200;\n// How fast a bin's tint turns to the cream it scrapes, per unit of height\n// scraped; how much of the band's skin is the cream the blade carries; what\n// share of each bin's load slides on to the next bin along the angled blade\n// for each LED travelled.\nconst PICK = 0.3, FILM = 0.45, SLIP = 1.05;\n// The share of the dragged skin left behind for each LED travelled.\nconst DRAG = 0.03;\n// The ridge the spill builds stands at RS height per LED on its flanks, and\n// is never taller than RMAX.\nconst RS = 0.4, RMAX = 3.6;\n// How deep the roll of cream in front of the blade is, in LEDs.\nconst ROLL = 6;\n// How deep the visible skin is: scraping this much off shows the bed.\nconst SKIN = 0.8;\n// The opening hue: rose, not red.\nconst H0 = 0.93;\n\n// A soft light low over the top left, its height LZ and where it sits round\n// the panel, LA radians; it glides LS either way of that and back over SWING\n// seconds at Speed 2, so the sheen slides along the ridges between strokes.\nconst LZ = 0.5, LA = -2.34, LS = 0.9, SWING = 7;\n// How tall the height field looks: a slope of 1 tilts the surface 56 degrees.\nconst KZ = 1.8;\n// The light is a big soft box: it wraps a little way round the cream, so a\n// slope turned from it shades off gently instead of dropping into shadow.\nconst WRAP = 0.3;\n// How much a fold darkens and a crest brightens, per unit of height.\nconst CAV = 0.5;\n// Cream the knife has just laid down holds a wet film that lifts it by this\n// much, fading as it dulls.\nconst GLINT = 26;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The tint concentrations a dollop can come in, for one, two and three tints.\nconst DOSE = [[0.55], [0.4, 0.88], [0.3, 0.62, 1]];\n// Where the colour ramp steps between tints, so folded cream shows distinct\n// bands rather than one blurred pink: thresholds and the level each band shows.\nconst STEPS = [\n  [[0.22], [0, 0.55]],\n  [[0.18, 0.6], [0, 0.42, 0.88]],\n  [[0.14, 0.44, 0.78], [0, 0.3, 0.62, 1]],\n];\nfunction band(c, n) {\n  const [th, lv] = STEPS[n];\n  let v = lv[0];\n  for (let i = 0; i \u003c th.length; i++) v += (lv[i + 1] - lv[i]) * sm((c - th[i]) / 0.1 + 0.5);\n  return v;\n}\n\nexport function setup(params) {\n  params.s = {\n    // Height, the tint of the skin, the tint of the bed under it.\n    hf: new Float32Array(N), tn: new Float32Array(N), ut: new Float32Array(N),\n    dh: new Float32Array(N), dt: new Float32Array(N), bl: new Float32Array(N), av: new Float32Array(N),\n    stamp: new Int32Array(N).fill(-999), sub: 0, fr: new Float32Array(N),\n    path: new Float32Array(PMAX * 2), plen: 0, pos: 0, type: 0, done: 0,\n    m: new Float32Array(NB), c: new Float32Array(NB), ft: new Float32Array(NB), fm: new Float32Array(NB), bm: 0, bc: 0,\n    L: 24, ca: 1, sa: 0, B: 0, tilt: 0, gPh: 0, cc: 0, cA: 0, cP: 8, cB: 0, slip: 1, rh: 0,\n    sp: new Float32Array(8), pause: 0, live: false, force: 1, lt: 0,\n    dol: [], hue: 0, tones: 1, gloss: 0.06, ready: false,\n    lut: new Float32Array(64 * 3), lus: new Float32Array(64 * 3),\n    kx: 0, ky: 0, dx: 0, dy: 1, tx: 1, ty: 0,\n  };\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\n// A round dollop: a soft mound of tint c with a peak where it left the spoon. It is all skin, so a knife that\n// scrapes it away finds the cream it was dropped on.\n// Its colour goes on with the first of it, as deep as the whole dollop will\n// be thick: its thin rim only half covers what it landed on, so a knife that\n// scrapes it off leaves no ring.\nfunction dollop(P, x0, y0, r, ht, c, f, first) {\n  const x1 = max(0, floor(x0 - r)), x2 = min(W - 1, floor(x0 + r) + 1);\n  const y1 = max(0, floor(y0 - r)), y2 = min(H - 1, floor(y0 + r) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const d = ((x - x0) ** 2 + (y - y0) ** 2) / (r * r);\n      if (d >= 1) continue;\n      const p = y * W + x, a = ht * (1 - sqrt(d)) * (1 - d * 0.5);\n      P.hf[p] += a * f;\n      if (first) P.tn[p] += (c - P.tn[p]) * min(1, a / 1.2);\n    }\n}\n\n// The stroke's path as a function of u from 0 to 1, from the parameters\n// startStroke puts in P.sp.\nfunction pathAt(P, u, o) {\n  const s = P.sp;\n  if (P.type === 0) {\n    // An S down (or up) the panel.\n    o[0] = s[0] + s[1] * sin(2 * PI * s[2] * u + s[3]);\n    o[1] = s[4] + (s[5] - s[4]) * u;\n  } else if (P.type === 1) {\n    // A spiral in to a point: the swirl on top of a jar.\n    const a = s[3] + s[4] * u * 2 * PI, r = s[5] + (s[6] - s[5]) * (1 - (1 - u) * (1 - u));\n    o[0] = s[0] + r * cos(a);\n    o[1] = s[1] + r * sin(a) * 1.15;\n  } else {\n    // A bowed smear from off one side to the middle, or right across.\n    const v = 1 - u, mx = (s[0] + s[2]) / 2 + s[4], my = (s[1] + s[3]) / 2 + s[5];\n    o[0] = v * v * s[0] + 2 * v * u * mx + u * u * s[2];\n    o[1] = v * v * s[1] + 2 * v * u * my + u * u * s[3];\n  }\n}\n\nconst TMP = [0, 0];\nfunction startStroke(P, k3) {\n  const s = P.sp, r = rnd(), hf = P.hf;\n  // Heights only matter against each other: keep the cream's mean level at\n  // 0, and cut every band below it, so each stroke has cream to push.\n  let mean = 0;\n  for (let p = 0; p \u003c N; p++) mean += hf[p];\n  mean /= N;\n  for (let p = 0; p \u003c N; p++) hf[p] -= mean;\n  P.type = r \u003c 0.5 ? 0 : r \u003c 0.8 ? 1 : 2;\n  if (P.type === 0) {\n    const down = rnd() \u003c 0.5;\n    s[0] = 22 + rnd() * 20;\n    s[1] = 10 + rnd() * 10;\n    s[2] = 0.6 + rnd() * 0.5;\n    s[3] = rnd() * 2 * PI;\n    s[4] = down ? -14 : H + 14;\n    s[5] = down ? H + 14 : -14;\n    P.L = 34 + rnd() * 10;\n    P.B = -0.9 + rnd() * 0.5;\n  } else if (P.type === 1) {\n    s[0] = 26 + rnd() * 12;\n    s[1] = 36 + rnd() * 56;\n    s[3] = rnd() * 2 * PI;\n    s[4] = (rnd() \u003c 0.5 ? -1 : 1) * (1.3 + rnd() * 0.5);\n    s[5] = 25 + rnd() * 6;\n    s[6] = 3;\n    P.L = 18 + rnd() * 5;\n    P.B = -0.6 + rnd() * 0.4;\n  } else {\n    const across = rnd() \u003c 0.4, side = rnd() \u003c 0.5 ? -1 : 1;\n    if (across) {\n      s[0] = side \u003c 0 ? -14 : W + 14;\n      s[2] = side \u003c 0 ? W + 14 : -14;\n      s[1] = 14 + rnd() * 100;\n      s[3] = cl(s[1] + (rnd() - 0.5) * 40, 10, H - 10);\n    } else {\n      s[0] = 32 + side * (34 + rnd() * 6);\n      s[1] = 10 + rnd() * 108;\n      s[2] = 32 - side * (rnd() * 10);\n      s[3] = cl(s[1] + (rnd() - 0.5) * 70, 18, H - 18);\n    }\n    s[4] = 0;\n    s[5] = (rnd() - 0.5) * 36;\n    P.L = 28 + rnd() * 8;\n    P.B = -0.8 + rnd() * 0.5;\n  }\n  // Lay the path down half an LED a point.\n  const path = P.path;\n  pathAt(P, 0, TMP);\n  let px = TMP[0], py = TMP[1], n = 1;\n  path[0] = px;\n  path[1] = py;\n  for (let i = 1; i \u003c= 4000 && n \u003c PMAX; i++) {\n    pathAt(P, i / 4000, TMP);\n    const d = sqrt((TMP[0] - px) ** 2 + (TMP[1] - py) ** 2);\n    if (d >= STEP) {\n      px += ((TMP[0] - px) * STEP) / d;\n      py += ((TMP[1] - py) * STEP) / d;\n      path[n * 2] = px;\n      path[n * 2 + 1] = py;\n      n++;\n    }\n  }\n  P.plen = (n - 1) * STEP;\n  P.pos = 0;\n  // The blade sits at an angle to its track, tilted a little and bowed, so\n  // the band is a shallow trough, and it chatters as it goes, leaving soft\n  // folds across the band. A slow knife glides and cuts shallow; a fast one\n  // chatters harder and digs deeper, so it throws a taller ridge.\n  const al = (rnd() - 0.5) * 0.6;\n  P.ca = cos(al);\n  P.sa = sin(al);\n  P.tilt = (rnd() - 0.5) * 0.6;\n  P.cc = 0.2 + rnd() * 0.4;\n  P.cA = (0.13 + rnd() * 0.1) * (0.35 + 0.65 * P.force);\n  P.B -= 0.35 * (P.force - 1);\n  P.cP = 11 + rnd() * 5;\n  P.cB = (rnd() \u003c 0.5 ? -1 : 1) * (3 + rnd() * 4);\n  P.gPh = rnd() * 2 * PI;\n  P.slip = rnd() \u003c 0.5 ? -1 : 1;\n  if (P.type === 1) {\n    // A swirl throws its cream outwards.\n    locate(P, 6);\n    P.slip = P.tx * (P.kx - s[0]) + P.ty * (P.ky - s[1]) > 0 ? 1 : -1;\n  }\n  P.m.fill(0);\n  P.c.fill(0);\n  P.ft.fill(0);\n  P.fm.fill(0);\n  P.rh = 0;\n  P.live = true;\n  // Every stroke goes through fresh dollops dropped a little way along: one\n  // for one tint, two or three when three tints are folded in.\n  const nd = k3 === 1 ? 1 : k3 === 2 ? (rnd() \u003c 0.5 ? 2 : 1) : rnd() \u003c 0.4 ? 3 : 2;\n  for (let i = 0; i \u003c nd; i++) plan(P, 0.1 + rnd() * 0.45, rnd() \u003c 0.4 ? 0 : DOSE[k3 - 1][floor(rnd() * k3)], (10 + rnd() * 3) / sqrt(nd));\n}\n\n// A dollop waiting to fall at a point on the path ahead of the knife.\nfunction plan(P, u, c, r) {\n  if (P.dol.length > 3) return;\n  const i = floor((P.pos + (P.plen - P.pos) * u) / STEP);\n  const x = P.path[i * 2], y = P.path[i * 2 + 1];\n  P.dol.push({ x: cl(x + (rnd() - 0.5) * 6, 6, W - 7), y: cl(y + (rnd() - 0.5) * 6, 8, H - 9), r, h: 2.6 + rnd() * 0.6, c, f: 0 });\n}\n\n// The knife's point, its direction of travel and the blade's direction.\nfunction locate(P, pos) {\n  const path = P.path, last = floor(P.plen / STEP);\n  const i = cl(floor(pos / STEP), 0, last - 1), f = cl(pos / STEP - i, 0, 1);\n  P.kx = path[i * 2] + (path[i * 2 + 2] - path[i * 2]) * f;\n  P.ky = path[i * 2 + 1] + (path[i * 2 + 3] - path[i * 2 + 1]) * f;\n  const a = max(0, i - 3), b = min(last, i + 4);\n  let dx = path[b * 2] - path[a * 2], dy = path[b * 2 + 1] - path[a * 2 + 1];\n  const d = sqrt(dx * dx + dy * dy) || 1;\n  dx /= d;\n  dy /= d;\n  P.dx = dx;\n  P.dy = dy;\n  P.tx = -dy * P.ca - dx * P.sa;\n  P.ty = dx * P.ca - dy * P.sa;\n}\n\n// The load of the blade at a point a along it and the tint it drags there,\n// read between the bins so what it lays down has no seams.\nfunction load(P, a) {\n  const fb = cl(((a + P.L / 2) / P.L) * NB - 0.5, 0, NB - 1), j = min(NB - 2, floor(fb)), f = fb - j;\n  P.bm = P.m[j] + (P.m[j + 1] - P.m[j]) * f;\n  P.bc = P.ft[j] + (P.ft[j + 1] - P.ft[j]) * f;\n}\n\n// The ridge across its width r (0 at the band's edge, 1 at its foot): a\n// steep inner face where the blade cut it, a long outer slope.\nconst ridge = (r) => (r \u003c 0.3 ? sm(r / 0.3) : 1 - sm((r - 0.3) / 0.7));\n\n// One move of the knife by ds LEDs. Each LED is worked once a pass, as the\n// back of the blade leaves it: what stood above the blade goes into the\n// bin over it, and the band, the ridge beside it and their tints are laid\n// down.\nfunction knife(P, ds) {\n  P.pos += ds;\n  P.sub++;\n  if (P.pos >= P.plen) return lift(P);\n  locate(P, P.pos);\n  const { hf, tn, ut, m, c, ft, fm, stamp, L } = P, hl = L / 2, sl = P.slip;\n  for (let j = 0; j \u003c NB; j++) fm[j] *= 1 - DRAG * ds;\n  const kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  // Pressure comes on over the first 8 LEDs and goes off over the last 6.\n  const pr = sm(P.pos / 8) * sm((P.plen - P.pos) / 6);\n  const rw = max(3, (2 * P.rh) / RS), end = sl > 0 ? NB - 1 : 0, lvEnd = P.B + P.tilt * sl + P.cc;\n  const rx = abs(tx) * (hl + rw) + 3, ry = abs(ty) * (hl + rw) + 3;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, s = (tx * oy - ty * ox) / det;\n      // On a curve the LEDs on the outside move further than ds, so the\n      // strip is wider than a step and the stamp keeps it to once a pass.\n      if (s \u003c -3 - ds || s >= -0.3) continue;\n      const a = (ox * dy - oy * dx) / det, as = a * sl, p = y * W + x;\n      if (as \u003c= -hl - 1.5 || as >= hl + rw || P.sub - stamp[p] \u003c 40) continue;\n      stamp[p] = P.sub;\n      const ho = hf[p], to = tn[p];\n      if (as \u003c hl && as > -hl) {\n        // The chatter marks bow back towards the blade's ends, as a flexible\n        // blade leaves them, and come and go along it.\n        const u = a / hl, w = (2 * PI * (P.pos + P.cB * u * u)) / P.cP;\n        const lv = P.B + P.tilt * u + P.cc * u * u + P.cA * (0.65 + 0.35 * sin(a * 0.31 + P.gPh)) * (sin(w) + 0.5 * sin(w * 1.63 + 1.3)), e = ho - lv;\n        const j = cl(floor(((a + hl) / L) * NB), 0, NB - 1);\n        if (e > 0) {\n          m[j] += e * pr;\n          c[j] += (to - c[j]) * min(1, e * PICK * pr);\n          // The skin of tint the blade drags stays in its own lane and is\n          // mixed by how much of each colour it gathered, so a dollop\n          // becomes a long ribbon that pales as white cream dilutes it.\n          fm[j] += e * pr;\n          ft[j] += ((to - ft[j]) * e * pr) / fm[j];\n        }\n        // Under what was scraped off lies the bed; over it the blade leaves a\n        // film of the cream it carries.\n        const ex = e > 0 ? to + (ut[p] - to) * min(1, e / SKIN) : to;\n        load(P, a);\n        const tw = ex + (P.bc - ex) * FILM * min(1, P.bm);\n        hf[p] = ho + (lv - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (tw - to) * pr;\n        ut[p] += (tw - ut[p]) * pr * 0.4;\n      } else {\n        // Beside the band: the ridge on the spill side, a thin lip of\n        // squeezed cream on the other.\n        const hr = as > 0 ? lvEnd + P.rh * ridge((as - hl) / rw) : P.B - P.tilt * sl + 0.2 * P.rh * ridge((-as - hl) / 1.5);\n        if (hr \u003c= ho) continue;\n        const k = pr * min(1, (hr - ho) / SKIN), ce = as > 0 ? c[end] : to;\n        hf[p] = ho + (hr - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (ce - to) * k;\n        ut[p] += (ce - ut[p]) * k;\n      }\n    }\n  // The load slides along the angled blade and spills off its end, and the\n  // ridge stands as tall as the cream spilling into it.\n  const f = min(0.9, SLIP * ds);\n  for (let k = 1; k \u003c NB; k++) {\n    const j = sl > 0 ? NB - 1 - k : k, to = j + sl, a = m[j] * f;\n    if (a \u003c= 0) continue;\n    c[to] = (c[to] * m[to] + c[j] * a) / (m[to] + a);\n    m[to] += a;\n    m[j] -= a;\n  }\n  const spill = m[end] * f;\n  m[end] -= spill;\n  const target = min(RMAX, sqrt(0.75 * (spill / ds) * RS));\n  P.rh += (target - P.rh) * min(1, ds * 0.25);\n}\n\n// The knife lifts: what it still carries stays where it stopped, a raised\n// lip across the end of the band.\nfunction lift(P) {\n  locate(P, P.plen);\n  roll(P, P.hf, P.tn, P.ut);\n  P.live = false;\n  P.done++;\n  P.pause = 0.15 + rnd() * 0.2;\n}\n\n// The cream on the blade's face as a rounded roll in front of it, laid into\n// (h, t): for the picture while the knife moves, for good when it lifts.\nfunction roll(P, h, t, u) {\n  const hl = P.L / 2, kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  const rx = abs(tx) * hl + ROLL + 2, ry = abs(ty) * hl + ROLL + 2;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, a = (ox * dy - oy * dx) / det, s = (tx * oy - ty * ox) / det;\n      if (s \u003c= -0.3 || s >= ROLL || a \u003c= -hl || a >= hl) continue;\n      load(P, a);\n      // A bin's load spread as a mound ROLL deep, rounded off at the blade's\n      // ends: as tall as that much cream stands, and never a wall.\n      const ht = min(2.4, sqrt((P.bm * NB) / P.L) * 0.7) * sin((PI * (s + 0.3)) / (ROLL + 0.3)) * sqrt(sin((PI * (a + hl)) / P.L));\n      const p = y * W + x;\n      if (P.B + ht \u003c= h[p]) continue;\n      const k = min(1, (P.B + ht - h[p]) / SKIN);\n      h[p] = P.B + ht;\n      t[p] += (P.bc - t[p]) * k;\n      if (u) u[p] += (P.bc - u[p]) * k;\n    }\n}\n\n// One frame of the studio: the pause between strokes, dollops falling, the knife.\nfunction tick(P, dt, speed, k3) {\n  for (const d of P.dol) {\n    if (d.f >= 1) continue;\n    const g = min(1 - d.f, dt * 2.5 * max(0.6, speed / 2));\n    dollop(P, d.x, d.y, d.r, d.h, d.c, g, d.f === 0);\n    d.f += g;\n  }\n  // Freshly worked cream glistens; left alone it dulls to a satin over\n  // about ten seconds at Speed 2.\n  P.lt += dt * speed * 0.5;\n  const fr = P.fr, k = 1 - dt * 0.07 * max(0.5, speed);\n  for (let p = 0; p \u003c N; p++) fr[p] *= k;\n  if (!P.live) {\n    P.pause -= dt * max(0.5, speed / 2);\n    if (P.pause \u003c= 0) startStroke(P, k3);\n  } else {\n    let ds = dt * speed * 10;\n    while (ds > 1e-6) {\n      const st = min(ds, 0.5);\n      knife(P, st);\n      ds -= st;\n      if (!P.live) break;\n    }\n  }\n  // A dollop is forgotten once it has fallen and the knife has gone on.\n  if (P.dol.length && P.dol[0].f >= 1 && (!P.live || P.dol.length > 2)) P.dol.shift();\n}\n\n// The first frame already shows cream that has been worked: a level layer\n// and three strokes through dollops of tint.\nfunction prime(P, k3) {\n  const { hf } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hf[y * W + x] = 0.3 * sin(x * 0.11 + y * 0.05) * sin(y * 0.07 - x * 0.04);\n  P.pause = 0;\n  while (P.done \u003c 3) tick(P, 1 / 30, 2, k3);\n  while (!P.live) tick(P, 1 / 30, 2, k3);\n  // Start the live stroke a fifth of the way along, its dollops down.\n  for (const d of P.dol) if (d.f \u003c 1) (dollop(P, d.x, d.y, d.r, d.h, d.c, 1 - d.f, d.f === 0), (d.f = 1));\n  while (P.live && P.pos \u003c P.plen * 0.2) tick(P, 1 / 30, 2, k3);\n  P.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.tones = cl(k[2], 1, 3);\n  P.gloss = cl(k[3], 0, 1);\n  const k3 = cl(Math.round(P.tones), 1, 3);\n  P.force = cl(k[1], 0.2, 3) / 2;\n  if (!P.ready) prime(P, k3);\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fresh dollop in the deepest tint, where the knife will reach it.\n    if (P.live && P.plen - P.pos > 40) plan(P, 0.25 + rnd() * 0.2, DOSE[k3 - 1][k3 - 1], 9);\n    else P.dol.push({ x: 14 + rnd() * 36, y: 20 + rnd() * 88, r: 12, h: 3.2, c: DOSE[k3 - 1][k3 - 1], f: 0 });\n  }\n  tick(P, d, cl(k[1], 0.2, 3), k3);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  const { dh, dt, lut, lus } = P;\n  dh.set(P.hf);\n  dt.set(P.tn);\n  // The cream riding on the blade's face shows where the unseen knife is.\n  if (P.live) roll(P, dh, dt, null);\n  // The light reads the surface and its colour through a small blur, so the\n  // LED steps of the height field do not show as grain.\n  blur(dh, P.bl);\n  // A wide blur of the surface: cream that stands above it is a crest and\n  // catches more light, cream below it lies in a fold and gets less.\n  const av = P.av;\n  av.set(dh);\n  for (let i = 0; i \u003c 4; i++) blur(av, P.bl);\n  blur(dt, P.bl);\n  // The colour of each tint concentration: white cream at 0, the deepest\n  // tint at 1, stepped into the bands Tones asks for. Light goes a little\n  // way into cream, so its shadows are a deeper tint rather than grey.\n  // Wet cream (Gloss up) is a little deeper in colour, as anything wet is.\n  // The deeper tints also darken, so three of them stay apart, except round\n  // orange and yellow, where darker reads as brown and olive on LEDs.\n  const t = P.tones, n0 = floor(t) - 1, ft = t - floor(t), n1 = min(2, n0 + 1), hue = H0 + P.hue, g = P.gloss;\n  const hw = (hue - floor(hue) + 0.38) % 1, dk = 0.3 * min(1, abs(hw - 0.5) / 0.11);\n  for (let i = 0; i \u003c 64; i++) {\n    const c = i / 63, v = band(c, n0) + (band(c, n1) - band(c, n0)) * ft;\n    hsv(hue, 0.22 + 0.72 * v + 0.06 * g, (1 - 0.06 * v - dk * v * v) * (1 - 0.1 * g), lut, i * 3);\n    hsv(hue, min(1, 0.4 + 0.6 * v + 0.1 * g), 0.58 - 0.08 * v - 0.14 * g, lus, i * 3);\n  }\n  // The sheen is measured from what a level surface would show, so level\n  // cream stays its colour and only the slopes turned to the light shine.\n  const la = LA + LS * sin((2 * PI * P.lt) / SWING), lr = sqrt(1 - LZ * LZ), LX = lr * cos(la), LY = lr * sin(la);\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  // A broad satin sheen is always there; Gloss adds a narrow wet one on top.\n  const shin = 10 + 70 * g * g, ks = 0.95 * g * 255, s0 = pow(HZ, shin), sk = ks / (1 - s0), fr = P.fr;\n  const b0 = pow(HZ, 6), bk = (0.4 * 255) / (1 - b0);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = y > 0 ? -W : 0, yd = y \u003c H - 1 ? W : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (dh[x \u003c W - 1 ? p + 1 : p] - dh[x > 0 ? p - 1 : p]) * 0.5 * KZ;\n      const gy = (dh[p + yd] - dh[p + yu]) * 0.5 * KZ;\n      const il = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * il, ny = -gy * il, nz = il;\n      const df = nx * LX + ny * LY + nz * LZ, nh = nx * HX + ny * HY + nz * HZ;\n      const f = (df > -WRAP ? (0.85 * (df + WRAP)) / (LZ + WRAP) : 0) * (1 + cl((dh[p] - av[p]) * CAV, -0.45, 0.25)), n2 = nh * nh, sp = (nh > HZ ? ((g > 0.01 ? (pow(nh, shin) - s0) * sk : 0) + (n2 * n2 * n2 - b0) * bk) * (0.5 + 0.5 * fr[p]) : 0) + fr[p] * GLINT;\n      const o = cl(floor(dt[p] * 63 + 0.5), 0, 63) * 3, r = lus[o], gg = lus[o + 1], b = lus[o + 2];\n      display.setPixel(x, y, min(255, r + (lut[o] - r) * f + sp), min(255, gg + (lut[o + 1] - gg) * f + sp * 0.97), min(255, b + (lut[o + 2] - b) * f + sp * 0.92));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the cream and its tints round the whole colour wheel together, opening on rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges."},{"name":"Tones","min":1,"max":3,"about":"How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path."},{"name":"Gloss","min":0,"max":1,"about":"At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight."}],"start":[0,2,1,0.06],"measures":{"motion":0.0374,"detail":0.0161,"edges":0.0277,"complexity":1.8116,"coverage":1,"colour":0.1658,"drift":0.0429},"knobResponse":[0.2103,0.0689,0.1027,0.1086]},{"slug":"crossroads","title":"Crossroads","family":"city","round":17,"note":"드론으로 곧장 내려다본 밤 네거리예요. 차는 전조등과 미등으로만 보이고, 나트륨등 웅덩이 사이에서 신호가 줄을 세웠다 풀며, 모든 차가 서면 사람들이 건널목 넷을 한꺼번에 건너요.","idea":"A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","layer":{"id":"layer-crossroads","type":"code","name":"crossroads","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads."},{"name":"Pace","min":0.2,"max":3,"about":"The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps."},{"name":"Hour","min":0,"max":1,"about":"At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets."},{"name":"Rain","min":0,"max":1,"about":"Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas."}],"start":[0,2,0,0.06],"measures":{"motion":0.2133,"detail":0.0621,"edges":0.4808,"complexity":0.9935,"coverage":0.2564,"colour":0.385,"drift":0.0485},"knobResponse":[0.05,0.0417,0.0482,0.062]},{"slug":"curve-shortening","title":"Curve Shortening","family":"line","round":36,"note":"굵은 나선이나 접힌 지렁이, 팔 여럿인 별 같은 닫힌 곡선 하나가 점마다 곡률만큼의 빠르기로 법선을 따라 움직여요. 곡선은 제 몸에 한 번도 닿지 않고 풀려 둥글어진 뒤 한 점으로 사라지고, 넓이는 모양과 상관없이 흐름 시간 1 에 2π 씩 줄며, 흰 점으로 찍힌 변곡점은 둘씩 만나 함께 없어져요. K3 은 나선을 2바퀴에서 3.5바퀴까지 감고, K1 을 누르면 남은 흐름이 0.6초 만에 끝나요.","idea":"One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.","buttons":"K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.","code":"// ===== Patternflow pattern =====\n// Title:   Curve Shortening\n// Family:  line\n// Idea:    One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: curve-shortening flow, Grayson's theorem (Matthew Grayson, 1987), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1\n//\n// Knob 1: Hue. The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it.\n// Knob 2: Speed. At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long.\n// Knob 3: Wind. How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve.\n// Knob 4: Trace. At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline.\n// Buttons: K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.\n\nconst W = 64, H = 128, NMAX = 1500, NMIN = 28, SNAPS = 10, SNAPN = 180;\n// Flow time is in LEDs squared: the area falls 2 pi of them per unit. A curve\n// lives LIFE beats of the clock; a beat is a second at Speed 2.\nconst LIFE = 5.6, DRAW0 = 1.9, DRAW = 0.95, FLASH = 0.6, DS = 1.3;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, random, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// ---- Shapes. Each is a centre line with a band width, or a polygon. ----\n\nfunction seg(out, x0, y0, x1, y1) {\n  const k = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.5));\n  for (let i = 0; i \u003c k; i++) out.push(x0 + ((x1 - x0) * i) / k, y0 + ((y1 - y0) * i) / k);\n}\n\n// A spiral on a stadium: half turns over the top and under the bottom, 2h\n// apart, joined by straight runs. Each half turn is a true semicircle, the\n// top ones centred on cx with radius r0 + k p, the bottom ones half a pitch\n// to the right with radius r0 + (k + 1/2) p, so the arcs meet the runs with\n// no corner and the band gains p every turn. It uses the tall panel the way\n// a round spiral cannot.\nfunction spiral(T) {\n  const p = 57 / (2 * T + 0.2), w = 0.45 * p, r0 = w / 2 + 1.5, h = 30, cx = 32, cy = 64, C = [];\n  const halves = 2 * T;\n  seg(C, cx + r0, cy + h, cx + r0, cy - h);\n  for (let k = 0; k \u003c halves; k++) {\n    const top = k % 2 === 0, R = r0 + (k * p) / 2, xc = top ? cx : cx + p / 2, yc = top ? cy - h : cy + h;\n    const f1 = min(PI, (halves - k) * PI);\n    for (let f = 0; f \u003c f1; f += 0.6 / R) C.push(xc + (top ? 1 : -1) * R * cos(f), yc + (top ? -1 : 1) * R * sin(f));\n    const x = xc + (top ? 1 : -1) * R * cos(f1);\n    if (f1 \u003c PI) C.push(x, yc + (top ? -1 : 1) * R * sin(f1));\n    else seg(C, x, yc, x, top ? cy + h : cy - h);\n  }\n  return { C, w };\n}\n\n// Two round spirals, one over the other, joined through the middle of the\n// panel as an S: the outer end of the upper one meets its mirror image there.\nfunction coils(T) {\n  const k = T \u003c 2.5 ? 2 : 3, p = 28.5 / (k + 0.55), w = 0.62 * p, r0 = 0.3 * p + 1.5, F = 2 * PI * k + PI / 2;\n  const Rm = r0 + (p * F) / (2 * PI), cyA = 64 - Rm, A = [];\n  for (let f = 0; f \u003c F; f += 0.03) {\n    const r = r0 + (p * f) / (2 * PI);\n    A.push(32 + r * cos(f), cyA + r * sin(f));\n  }\n  const C = A.slice();\n  C.push(32, 64);\n  for (let i = A.length - 2; i >= 0; i -= 2) C.push(64 - A[i], 128 - A[i + 1]);\n  return { C, w };\n}\n\n// A worm folded into m runs across the panel, joined by hairpin bends.\nfunction worm(T) {\n  const m = 2 + round(2 * T), p = 118 / m, w = 0.6 * p, xl = 3 + p / 2 + w / 2, xr = 61 - p / 2 - w / 2, C = [];\n  for (let j = 0; j \u003c m; j++) {\n    const y = 5 + p / 2 + j * p, right = j % 2 === 0;\n    seg(C, right ? xl : xr, y, right ? xr : xl, y);\n    if (j === m - 1) {\n      C.push(right ? xr : xl, y);\n      break;\n    }\n    const xc = right ? xr : xl, yc = y + p / 2;\n    for (let a = 0; a \u003c PI; a += 0.06) C.push(xc + (right ? 1 : -1) * (p / 2) * sin(a), yc - (p / 2) * cos(a));\n  }\n  return { C, w };\n}\n\n// A star: r(t) = R (0.34 + 0.66 g(k t)), one arm per lobe of g, stretched\n// 1.45 times up the panel. Being a graph over the angle, before and after the\n// stretch, it cannot cross itself.\nfunction star(T) {\n  const k = 2 + round(2 * T), R = 29.5, P = [];\n  for (let i = 0; i \u003c 2400; i++) {\n    const t = (2 * PI * i) / 2400, g = ((1 + cos(k * t)) / 2) ** 1.7, r = R * (0.34 + 0.66 * g);\n    P.push(32 + r * sin(t), 64 - 1.45 * r * cos(t));\n  }\n  return P;\n}\n\n// The outline of a band of width w round a centre line, with round ends.\nfunction band(C, w) {\n  const m = C.length >> 1, L = [], Rt = [], hw = w / 2;\n  const nrm = (i) => {\n    const a = max(0, i - 1), b = min(m - 1, i + 1);\n    let tx = C[2 * b] - C[2 * a], ty = C[2 * b + 1] - C[2 * a + 1];\n    const l = sqrt(tx * tx + ty * ty) || 1;\n    return [tx / l, ty / l];\n  };\n  for (let i = 0; i \u003c m; i++) {\n    const [tx, ty] = nrm(i);\n    L.push(C[2 * i] - ty * hw, C[2 * i + 1] + tx * hw);\n    Rt.push(C[2 * i] + ty * hw, C[2 * i + 1] - tx * hw);\n  }\n  const P = L.slice();\n  const cap = (i, s) => {\n    const [tx, ty] = nrm(i), nx = -ty, ny = tx;\n    for (let a = 0.12; a \u003c PI; a += 0.12) {\n      const c = cos(a), d = sin(a);\n      P.push(C[2 * i] + s * hw * (c * nx + d * tx), C[2 * i + 1] + s * hw * (c * ny + d * ty));\n    }\n  };\n  cap(m - 1, 1);\n  for (let i = m - 1; i >= 0; i--) P.push(Rt[2 * i], Rt[2 * i + 1]);\n  cap(0, -1);\n  return P;\n}\n\nfunction area(X, Y, n) {\n  let a = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) a += X[j] * Y[i] - X[i] * Y[j];\n  return a / 2;\n}\n\n// Put n points round the closed polygon P at equal steps of arc length,\n// wound so that the area comes out positive.\nfunction resample(P, np, X, Y, n) {\n  const m = np, len = new Float64Array(m + 1);\n  for (let i = 0; i \u003c m; i++) {\n    const j = (i + 1) % m;\n    len[i + 1] = len[i] + sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  const L = len[m];\n  let s = 0;\n  for (let k = 0; k \u003c n; k++) {\n    const target = (L * k) / n;\n    while (s \u003c m - 1 && len[s + 1] \u003c target) s++;\n    const j = (s + 1) % m, u = (target - len[s]) / (len[s + 1] - len[s] || 1);\n    X[k] = P[2 * s] + u * (P[2 * j] - P[2 * s]);\n    Y[k] = P[2 * s + 1] + u * (P[2 * j + 1] - P[2 * s + 1]);\n  }\n  if (area(X, Y, n) \u003c 0)\n    for (let a = 0, b = n - 1; a \u003c b; a++, b--) {\n      let t = X[a];\n      X[a] = X[b];\n      X[b] = t;\n      t = Y[a];\n      Y[a] = Y[b];\n      Y[b] = t;\n    }\n  return L;\n}\n\nfunction perimeter(X, Y, n) {\n  let L = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) L += sqrt((X[i] - X[j]) ** 2 + (Y[i] - Y[j]) ** 2);\n  return L;\n}\n\n// A new curve: the spiral first, then any of the four but the one just\n// shown, at 70 to 100% size somewhere on the panel, mirrored at random.\nfunction build(S, wind, first) {\n  let kind = 0;\n  if (!first) {\n    kind = floor(random() * 4);\n    if (kind === S.kind) kind = (kind + 1 + floor(random() * 3)) % 4;\n  }\n  S.kind = kind;\n  S.wind = wind;\n  let P;\n  if (kind === 1) P = star(wind);\n  else {\n    const { C, w } = kind === 0 ? spiral(wind) : kind === 2 ? worm(wind) : coils(wind);\n    P = band(C, w);\n  }\n  const sc = first ? 1 : 0.7 + 0.3 * random(), fx = random() \u003c 0.5 ? -1 : 1, fy = random() \u003c 0.5 ? -1 : 1;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c P.length; i += 2) {\n    P[i] = 32 + fx * sc * (P[i] - 32);\n    P[i + 1] = 64 + fy * sc * (P[i + 1] - 64);\n    x0 = min(x0, P[i]);\n    x1 = max(x1, P[i]);\n    y0 = min(y0, P[i + 1]);\n    y1 = max(y1, P[i + 1]);\n  }\n  // The first curve stands in the middle; later ones slide anywhere they\n  // still fit between 1.5 and 62.5 across, 1.5 and 126.5 down.\n  const dx = first ? 32 - (x0 + x1) / 2 : 1.5 - x0 + random() * max(0, 61 - (x1 - x0));\n  const dy = first ? 64 - (y0 + y1) / 2 : 1.5 - y0 + random() * max(0, 125 - (y1 - y0));\n  for (let i = 0; i \u003c P.length; i += 2) (P[i] += dx), (P[i + 1] += dy);\n  const np = P.length >> 1;\n  let L = 0;\n  for (let i = 0; i \u003c np; i++) {\n    const j = (i + 1) % np;\n    L += sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  S.n = min(NMAX, max(NMIN, round(L / DS)));\n  resample(P, np, S.X, S.Y, S.n);\n  S.A0 = area(S.X, S.Y, S.n);\n  S.flowT = 0;\n  S.phase = 0;\n  S.pt = 0;\n  S.dur = first ? DRAW0 : DRAW;\n  S.ns = 0;\n  S.rush = 0;\n  curvature(S);\n}\n\n// One explicit step of the flow. Vertex i moves along the normal of the\n// chord from i-1 to i+1 by 2 phi / |chord| per unit time, phi the turning\n// angle at i: that is the curvature, and it makes the area fall by exactly\n// phi, so the whole polygon loses sum(phi) = 2 pi per unit time. A small\n// slide along the same chord evens out the spacing and leaves the area alone.\n// The step is at most 0.3 of the square of the shortest half chord, under the\n// 0.5 where the explicit scheme starts to ring. Returns the time it took.\nfunction step(S, todo) {\n  const { X, Y, VX, VY, TX, TY } = S, n = S.n;\n  let mc = 1e9, ml = 1e9, Ml = 0, L = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    const phi = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n    const cx = X[b] - X[a], cy = Y[b] - Y[a], c2 = cx * cx + cy * cy || 1e-12;\n    const l1 = sqrt(ex * ex + ey * ey), l2 = sqrt(fx * fx + fy * fy), g = (0.3 * (l2 - l1)) / sqrt(c2);\n    VX[i] = (-2 * phi * cy) / c2;\n    VY[i] = (2 * phi * cx) / c2;\n    TX[i] = g * cx;\n    TY[i] = g * cy;\n    if (c2 \u003c mc) mc = c2;\n    if (l2 \u003c ml) ml = l2;\n    if (l2 > Ml) Ml = l2;\n    L += l2;\n  }\n  const h = min(todo, 0.075 * mc);\n  for (let i = 0; i \u003c n; i++) {\n    X[i] += h * VX[i] + TX[i];\n    Y[i] += h * VY[i] + TY[i];\n  }\n  S.ml = ml;\n  S.Ml = Ml;\n  S.L = L;\n  return h;\n}\n\n// Fresh points at even spacing. Points laid on the old edges cut the corners\n// and lose a little area, so every point then steps out along its normal by\n// the area lost over half the sum of the chords, which puts it back to first\n// order: a remesh must not move the area clock. When the curve has shrunk\n// there are fewer points, the spacing near DS until the curve is down to NMIN\n// points; edges squeezed under 0.45 of the spacing at a retracting tip, or\n// stretched past 1.8 along an arc pushing outward, force one.\nfunction remesh(S, force) {\n  const { X, Y } = S, L = perimeter(X, Y, S.n), want = max(NMIN, min(NMAX, round(L / DS)));\n  if (!force && want >= 0.8 * S.n && want \u003c= 1.25 * S.n) return;\n  const A = area(X, Y, S.n), P = S.P, np = S.n;\n  for (let i = 0; i \u003c np; i++) (P[2 * i] = X[i]), (P[2 * i + 1] = Y[i]);\n  S.n = want;\n  resample(P, np, X, Y, want);\n  const n = want, VX = S.VX, VY = S.VY;\n  let half = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0, cx = X[b] - X[a], cy = Y[b] - Y[a], c = sqrt(cx * cx + cy * cy) || 1e-9;\n    VX[i] = cy / c;\n    VY[i] = -cx / c;\n    half += c / 2;\n  }\n  const off = (A - area(X, Y, n)) / half;\n  for (let i = 0; i \u003c n; i++) (X[i] += off * VX[i]), (Y[i] += off * VY[i]);\n  S.ml = S.Ml = L / n;\n}\n\n// Signed curvature, summed over seven neighbours so that straight runs read\n// as zero, and the inflection points: where a run of clearly convex points\n// meets a run of clearly concave ones. Runs that never pass 0.06 radians of\n// turning do not count, so a nearly straight stretch does not flicker.\nfunction curvature(S) {\n  const { X, Y, K, PH } = S, n = S.n;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    PH[i] = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n  }\n  let s = 0;\n  for (let j = -3; j \u003c= 3; j++) s += PH[(j + n) % n];\n  for (let i = 0; i \u003c n; i++) {\n    K[i] = s;\n    s += PH[(i + 4) % n] - PH[(i - 3 + n) % n];\n  }\n  // Runs of one sign, starting where the sign changes.\n  const sg = (v) => (v > 0.025 ? 1 : v \u003c -0.025 ? -1 : 0);\n  let start = -1;\n  for (let i = 0; i \u003c n; i++)\n    if (sg(K[i]) && sg(K[i]) !== sg(K[(i - 1 + n) % n])) {\n      start = i;\n      break;\n    }\n  S.ni = 0;\n  if (start \u003c 0) return;\n  const runs = [];\n  let i = 0;\n  while (i \u003c n) {\n    const p = (start + i) % n, v = sg(K[p]);\n    if (!v) {\n      i++;\n      continue;\n    }\n    let j = i, peak = 0;\n    while (j \u003c n && sg(K[(start + j) % n]) === v) (peak = max(peak, abs(K[(start + j) % n]))), j++;\n    if (peak > 0.06) {\n      const last = runs[runs.length - 1];\n      if (last && last.v === v) last.e = j - 1;\n      else runs.push({ v, b: i, e: j - 1 });\n    }\n    i = j;\n  }\n  if (runs.length > 1 && runs[0].v === runs[runs.length - 1].v) {\n    runs[0].b = runs[runs.length - 1].b - n;\n    runs.pop();\n  }\n  if (runs.length \u003c 2) return;\n  for (let r = 0; r \u003c runs.length && S.ni \u003c 64; r++) {\n    const A = runs[r], B = runs[(r + 1) % runs.length];\n    let e = A.e, b = B.b;\n    if (b \u003c= e) b += n;\n    // The zero crossing between the end of one run and the start of the next.\n    let q = e;\n    for (let t = e; t \u003c b; t++) if (K[(start + t) % n] * A.v > 0 && K[(start + t + 1) % n] * A.v \u003c= 0) q = t;\n    const p0 = (start + q + n) % n, p1 = (p0 + 1) % n, k0 = K[p0], k1 = K[p1];\n    const u = k0 !== k1 ? cl(k0 / (k0 - k1), 0, 1) : 0.5;\n    S.IX[S.ni] = X[p0] + u * (X[p1] - X[p0]);\n    S.IY[S.ni] = Y[p0] + u * (Y[p1] - Y[p0]);\n    S.IQ[S.ni++] = p0;\n  }\n}\n\nfunction snapshot(S) {\n  if (S.ns >= SNAPS) return;\n  const k = max(1, ceil(S.n / SNAPN)), o = S.ns * SNAPN * 2;\n  let m = 0;\n  for (let i = 0; i \u003c S.n && m \u003c SNAPN; i += k, m++) (S.SN[o + 2 * m] = S.X[i]), (S.SN[o + 2 * m + 1] = S.Y[i]);\n  S.SM[S.ns++] = m;\n}\n\nfunction setup(params) {\n  params.s = {\n    X: new Float64Array(NMAX), Y: new Float64Array(NMAX), VX: new Float64Array(NMAX), VY: new Float64Array(NMAX),\n    TX: new Float64Array(NMAX), TY: new Float64Array(NMAX), P: new Float64Array(2 * NMAX), ml: 1, Ml: 1, L: 1,\n    K: new Float64Array(NMAX), PH: new Float64Array(NMAX), IX: new Float64Array(64), IY: new Float64Array(64), IQ: new Int32Array(64), ni: 0,\n    SN: new Float64Array(SNAPS * SNAPN * 2), SM: new Int32Array(SNAPS), ns: 0, rush: 0,\n    n: 0, A0: 1, flowT: 0, phase: 0, pt: 0, dur: DRAW0, kind: -1, wind: 1.5, fx: 32, fy: 64, warm: false,\n    hue: 0, trace: 0.06, speed: 2,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), cov: new Float32Array(W * H),\n    xs: new Float32Array(4 * H * 48), xn: new Int32Array(4 * H), col: new Float32Array(12),\n  };\n}\n\nfunction finish(S) {\n  let cx = 0, cy = 0;\n  for (let i = 0; i \u003c S.n; i++) (cx += S.X[i]), (cy += S.Y[i]);\n  S.fx = cx / S.n;\n  S.fy = cy / S.n;\n  S.phase = 2;\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trace = cl(k[3], 0, 1);\n  const wind = cl(k[2], 2, 3.5);\n  if (!S.warm) {\n    build(S, wind, true);\n    S.warm = true;\n  } else if (abs(wind - S.wind) > 0.2 && S.phase !== 2) build(S, wind, false);\n  // K1: the rest of the flow in 0.6 beats, at a rate fixed when pressed.\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== 2) {\n    if (S.phase === 0) (S.phase = 1), (S.pt = 0), snapshot(S);\n    S.rush = area(S.X, S.Y, S.n) / (2 * PI * 0.6);\n  }\n  const beat = (d * S.speed) / 2;\n  S.pt += beat;\n  if (S.phase === 0 && S.pt >= S.dur) {\n    S.phase = 1;\n    S.pt = 0;\n    snapshot(S);\n  }\n  if (S.phase === 1) {\n    // The area clock: A0 / 2 pi units of flow time spread over LIFE beats.\n    let todo = beat * max(S.A0 / (2 * PI * LIFE), S.rush), guard = 0;\n    while (todo > 1e-9 && guard++ \u003c 400) {\n      const h = step(S, todo), ds = S.L / S.n;\n      todo -= h;\n      S.flowT += h;\n      if (S.ml \u003c 0.45 * ds || S.Ml > 1.8 * ds) remesh(S, true);\n      else if (guard % 10 === 0) remesh(S, false);\n      if (guard % 4 === 0 && area(S.X, S.Y, S.n) \u003c 1.5) break;\n    }\n    remesh(S, false);\n    while (S.ns \u003c SNAPS && S.flowT >= (S.ns * S.A0) / (2 * PI * SNAPS)) snapshot(S);\n    if (area(S.X, S.Y, S.n) \u003c 1.5) finish(S);\n  }\n  if (S.phase !== 2) curvature(S);\n  else if (S.pt >= FLASH) build(S, wind, false);\n}\n\n// Coverage of the inside, anti-aliased: four scanlines per row, each\n// crossing interval added to the LEDs it spans in exact fractions.\nfunction fill(S) {\n  const { X, Y, xs, xn, cov } = S, n = S.n, SUB = 4, CAP = 48;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = i + 1 \u003c n ? i + 1 : 0;\n    let x0 = X[i], y0 = Y[i], x1 = X[j], y1 = Y[j];\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const ys = (s + 0.5) / SUB, c = xn[s];\n      if (c \u003c CAP) {\n        xs[s * CAP + c] = x0 + ((ys - y0) * (x1 - x0)) / (y1 - y0);\n        xn[s] = c + 1;\n      }\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\n// A line from (ax, ay) to (bx, by), about 1.6 LEDs wide, kept at the brighter\n// of its colour and what is already there.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const { R, G, B } = S, dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, dd = sqrt(qx * qx + qy * qy);\n      const v = cl((wide - dd) / 0.55, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      R[p] = max(R[p], cr * v);\n      G[p] = max(G[p], cg * v);\n      B[p] = max(B[p], cb * v);\n    }\n}\n\nfunction dot(S, x, y, r, cr, cg, cb) {\n  const { R, G, B } = S;\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, floor(y + r + 1)); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, floor(x + r + 1)); xx++) {\n      const dd = sqrt((xx + 0.5 - x) ** 2 + (yy + 0.5 - y) ** 2), v = cl((r + 0.5 - dd) / 0.7, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = yy * W + xx;\n      R[p] = R[p] * (1 - v) + cr * v;\n      G[p] = G[p] * (1 - v) + cg * v;\n      B[p] = B[p] * (1 - v) + cb * v;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col, X, Y, K } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // Fill, convex rim, concave rim. Orange to lime fills are kept bright so\n  // they read as colour and not brown or olive.\n  const h = S.hue + 0.58;\n  hsv(h, 0.88, 0.9, col, 0);\n  hsv(h - 0.03, 0.3, 1, col, 3);\n  hsv(h + 0.55, 0.85, 1, col, 6);\n  const tr = S.trace, fillLv = 255 * (1 - 0.82 * tr);\n  if (S.phase === 2) {\n    // The round point: a white ring that opens and fades.\n    const u = S.pt / FLASH, r = 1 + 9 * sm(u), a = 255 * (1 - u) * (1 - u);\n    for (let i = 0; i \u003c 48; i++) {\n      const t0 = (2 * PI * i) / 48, t1 = (2 * PI * (i + 1)) / 48;\n      line(S, S.fx + r * cos(t0), S.fy + r * sin(t0), S.fx + r * cos(t1), S.fy + r * sin(t1), a, a, a * 0.95, 0.9);\n    }\n    if (u \u003c 0.3) dot(S, S.fx, S.fy, 1.2, 255, 255, 255);\n  } else {\n    const drawing = S.phase === 0, u = drawing ? S.pt / S.dur : 1;\n    const shown = drawing ? floor(n * sm(u / 0.72)) : n, fa = drawing ? sm((u - 0.55) / 0.4) : 1;\n    // Earlier outlines, the chronophotograph that Trace keeps.\n    if (tr > 0.1 && S.phase === 1) {\n      const lv = 255 * 0.75 * sm((tr - 0.1) / 0.5);\n      for (let s = 0; s \u003c S.ns; s++) {\n        const m = S.SM[s], o = s * SNAPN * 2, f = 0.3 + (0.7 * (s + 1)) / S.ns;\n        for (let i = 0; i \u003c m; i++) {\n          const j = (i + 1) % m;\n          line(S, S.SN[o + 2 * i], S.SN[o + 2 * i + 1], S.SN[o + 2 * j], S.SN[o + 2 * j + 1], col[3] * lv * f * 0.75, col[4] * lv * f * 0.75, col[5] * lv * f * 0.75, 0.75);\n        }\n      }\n    }\n    if (fa > 0) {\n      fill(S);\n      for (let p = 0; p \u003c W * H; p++) {\n        const c = min(1, cov[p]) * fa * fillLv;\n        if (c \u003c= 0) continue;\n        R[p] += col[0] * c;\n        G[p] += col[1] * c;\n        B[p] += col[2] * c;\n      }\n    }\n    // The rim: pale where the curve bends outward, the second colour where\n    // it bends inward. The inflection points sit where the two meet.\n    for (let i = 0; i \u003c shown; i++) {\n      const j = i + 1 \u003c n ? i + 1 : 0, t = cl((K[i] + K[j]) * 6, -1, 1), a = (1 + t) / 2;\n      const cr = 255 * (col[3] * a + col[6] * (1 - a)), cg = 255 * (col[4] * a + col[7] * (1 - a)), cb = 255 * (col[5] * a + col[8] * (1 - a));\n      line(S, X[i], Y[i], X[j], Y[j], cr, cg, cb, drawing && i > shown - 6 ? 1.2 : 0.9);\n    }\n    // White marks at the inflection points: a dark ring round a white core.\n    for (let q = 0; q \u003c S.ni; q++) {\n      if (S.IQ[q] >= shown) continue;\n      dot(S, S.IX[q], S.IY[q], 1.6, 0, 0, 0);\n      dot(S, S.IX[q], S.IY[q], 0.8, 255, 255, 255);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-curve-shortening","type":"code","name":"curve-shortening","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Curve Shortening\n// Family:  line\n// Idea:    One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: curve-shortening flow, Grayson's theorem (Matthew Grayson, 1987), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1\n//\n// Knob 1: Hue. The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it.\n// Knob 2: Speed. At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long.\n// Knob 3: Wind. How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve.\n// Knob 4: Trace. At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline.\n// Buttons: K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.\n\nconst W = 64, H = 128, NMAX = 1500, NMIN = 28, SNAPS = 10, SNAPN = 180;\n// Flow time is in LEDs squared: the area falls 2 pi of them per unit. A curve\n// lives LIFE beats of the clock; a beat is a second at Speed 2.\nconst LIFE = 5.6, DRAW0 = 1.9, DRAW = 0.95, FLASH = 0.6, DS = 1.3;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, random, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// ---- Shapes. Each is a centre line with a band width, or a polygon. ----\n\nfunction seg(out, x0, y0, x1, y1) {\n  const k = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.5));\n  for (let i = 0; i \u003c k; i++) out.push(x0 + ((x1 - x0) * i) / k, y0 + ((y1 - y0) * i) / k);\n}\n\n// A spiral on a stadium: half turns over the top and under the bottom, 2h\n// apart, joined by straight runs. Each half turn is a true semicircle, the\n// top ones centred on cx with radius r0 + k p, the bottom ones half a pitch\n// to the right with radius r0 + (k + 1/2) p, so the arcs meet the runs with\n// no corner and the band gains p every turn. It uses the tall panel the way\n// a round spiral cannot.\nfunction spiral(T) {\n  const p = 57 / (2 * T + 0.2), w = 0.45 * p, r0 = w / 2 + 1.5, h = 30, cx = 32, cy = 64, C = [];\n  const halves = 2 * T;\n  seg(C, cx + r0, cy + h, cx + r0, cy - h);\n  for (let k = 0; k \u003c halves; k++) {\n    const top = k % 2 === 0, R = r0 + (k * p) / 2, xc = top ? cx : cx + p / 2, yc = top ? cy - h : cy + h;\n    const f1 = min(PI, (halves - k) * PI);\n    for (let f = 0; f \u003c f1; f += 0.6 / R) C.push(xc + (top ? 1 : -1) * R * cos(f), yc + (top ? -1 : 1) * R * sin(f));\n    const x = xc + (top ? 1 : -1) * R * cos(f1);\n    if (f1 \u003c PI) C.push(x, yc + (top ? -1 : 1) * R * sin(f1));\n    else seg(C, x, yc, x, top ? cy + h : cy - h);\n  }\n  return { C, w };\n}\n\n// Two round spirals, one over the other, joined through the middle of the\n// panel as an S: the outer end of the upper one meets its mirror image there.\nfunction coils(T) {\n  const k = T \u003c 2.5 ? 2 : 3, p = 28.5 / (k + 0.55), w = 0.62 * p, r0 = 0.3 * p + 1.5, F = 2 * PI * k + PI / 2;\n  const Rm = r0 + (p * F) / (2 * PI), cyA = 64 - Rm, A = [];\n  for (let f = 0; f \u003c F; f += 0.03) {\n    const r = r0 + (p * f) / (2 * PI);\n    A.push(32 + r * cos(f), cyA + r * sin(f));\n  }\n  const C = A.slice();\n  C.push(32, 64);\n  for (let i = A.length - 2; i >= 0; i -= 2) C.push(64 - A[i], 128 - A[i + 1]);\n  return { C, w };\n}\n\n// A worm folded into m runs across the panel, joined by hairpin bends.\nfunction worm(T) {\n  const m = 2 + round(2 * T), p = 118 / m, w = 0.6 * p, xl = 3 + p / 2 + w / 2, xr = 61 - p / 2 - w / 2, C = [];\n  for (let j = 0; j \u003c m; j++) {\n    const y = 5 + p / 2 + j * p, right = j % 2 === 0;\n    seg(C, right ? xl : xr, y, right ? xr : xl, y);\n    if (j === m - 1) {\n      C.push(right ? xr : xl, y);\n      break;\n    }\n    const xc = right ? xr : xl, yc = y + p / 2;\n    for (let a = 0; a \u003c PI; a += 0.06) C.push(xc + (right ? 1 : -1) * (p / 2) * sin(a), yc - (p / 2) * cos(a));\n  }\n  return { C, w };\n}\n\n// A star: r(t) = R (0.34 + 0.66 g(k t)), one arm per lobe of g, stretched\n// 1.45 times up the panel. Being a graph over the angle, before and after the\n// stretch, it cannot cross itself.\nfunction star(T) {\n  const k = 2 + round(2 * T), R = 29.5, P = [];\n  for (let i = 0; i \u003c 2400; i++) {\n    const t = (2 * PI * i) / 2400, g = ((1 + cos(k * t)) / 2) ** 1.7, r = R * (0.34 + 0.66 * g);\n    P.push(32 + r * sin(t), 64 - 1.45 * r * cos(t));\n  }\n  return P;\n}\n\n// The outline of a band of width w round a centre line, with round ends.\nfunction band(C, w) {\n  const m = C.length >> 1, L = [], Rt = [], hw = w / 2;\n  const nrm = (i) => {\n    const a = max(0, i - 1), b = min(m - 1, i + 1);\n    let tx = C[2 * b] - C[2 * a], ty = C[2 * b + 1] - C[2 * a + 1];\n    const l = sqrt(tx * tx + ty * ty) || 1;\n    return [tx / l, ty / l];\n  };\n  for (let i = 0; i \u003c m; i++) {\n    const [tx, ty] = nrm(i);\n    L.push(C[2 * i] - ty * hw, C[2 * i + 1] + tx * hw);\n    Rt.push(C[2 * i] + ty * hw, C[2 * i + 1] - tx * hw);\n  }\n  const P = L.slice();\n  const cap = (i, s) => {\n    const [tx, ty] = nrm(i), nx = -ty, ny = tx;\n    for (let a = 0.12; a \u003c PI; a += 0.12) {\n      const c = cos(a), d = sin(a);\n      P.push(C[2 * i] + s * hw * (c * nx + d * tx), C[2 * i + 1] + s * hw * (c * ny + d * ty));\n    }\n  };\n  cap(m - 1, 1);\n  for (let i = m - 1; i >= 0; i--) P.push(Rt[2 * i], Rt[2 * i + 1]);\n  cap(0, -1);\n  return P;\n}\n\nfunction area(X, Y, n) {\n  let a = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) a += X[j] * Y[i] - X[i] * Y[j];\n  return a / 2;\n}\n\n// Put n points round the closed polygon P at equal steps of arc length,\n// wound so that the area comes out positive.\nfunction resample(P, np, X, Y, n) {\n  const m = np, len = new Float64Array(m + 1);\n  for (let i = 0; i \u003c m; i++) {\n    const j = (i + 1) % m;\n    len[i + 1] = len[i] + sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  const L = len[m];\n  let s = 0;\n  for (let k = 0; k \u003c n; k++) {\n    const target = (L * k) / n;\n    while (s \u003c m - 1 && len[s + 1] \u003c target) s++;\n    const j = (s + 1) % m, u = (target - len[s]) / (len[s + 1] - len[s] || 1);\n    X[k] = P[2 * s] + u * (P[2 * j] - P[2 * s]);\n    Y[k] = P[2 * s + 1] + u * (P[2 * j + 1] - P[2 * s + 1]);\n  }\n  if (area(X, Y, n) \u003c 0)\n    for (let a = 0, b = n - 1; a \u003c b; a++, b--) {\n      let t = X[a];\n      X[a] = X[b];\n      X[b] = t;\n      t = Y[a];\n      Y[a] = Y[b];\n      Y[b] = t;\n    }\n  return L;\n}\n\nfunction perimeter(X, Y, n) {\n  let L = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) L += sqrt((X[i] - X[j]) ** 2 + (Y[i] - Y[j]) ** 2);\n  return L;\n}\n\n// A new curve: the spiral first, then any of the four but the one just\n// shown, at 70 to 100% size somewhere on the panel, mirrored at random.\nfunction build(S, wind, first) {\n  let kind = 0;\n  if (!first) {\n    kind = floor(random() * 4);\n    if (kind === S.kind) kind = (kind + 1 + floor(random() * 3)) % 4;\n  }\n  S.kind = kind;\n  S.wind = wind;\n  let P;\n  if (kind === 1) P = star(wind);\n  else {\n    const { C, w } = kind === 0 ? spiral(wind) : kind === 2 ? worm(wind) : coils(wind);\n    P = band(C, w);\n  }\n  const sc = first ? 1 : 0.7 + 0.3 * random(), fx = random() \u003c 0.5 ? -1 : 1, fy = random() \u003c 0.5 ? -1 : 1;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c P.length; i += 2) {\n    P[i] = 32 + fx * sc * (P[i] - 32);\n    P[i + 1] = 64 + fy * sc * (P[i + 1] - 64);\n    x0 = min(x0, P[i]);\n    x1 = max(x1, P[i]);\n    y0 = min(y0, P[i + 1]);\n    y1 = max(y1, P[i + 1]);\n  }\n  // The first curve stands in the middle; later ones slide anywhere they\n  // still fit between 1.5 and 62.5 across, 1.5 and 126.5 down.\n  const dx = first ? 32 - (x0 + x1) / 2 : 1.5 - x0 + random() * max(0, 61 - (x1 - x0));\n  const dy = first ? 64 - (y0 + y1) / 2 : 1.5 - y0 + random() * max(0, 125 - (y1 - y0));\n  for (let i = 0; i \u003c P.length; i += 2) (P[i] += dx), (P[i + 1] += dy);\n  const np = P.length >> 1;\n  let L = 0;\n  for (let i = 0; i \u003c np; i++) {\n    const j = (i + 1) % np;\n    L += sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  S.n = min(NMAX, max(NMIN, round(L / DS)));\n  resample(P, np, S.X, S.Y, S.n);\n  S.A0 = area(S.X, S.Y, S.n);\n  S.flowT = 0;\n  S.phase = 0;\n  S.pt = 0;\n  S.dur = first ? DRAW0 : DRAW;\n  S.ns = 0;\n  S.rush = 0;\n  curvature(S);\n}\n\n// One explicit step of the flow. Vertex i moves along the normal of the\n// chord from i-1 to i+1 by 2 phi / |chord| per unit time, phi the turning\n// angle at i: that is the curvature, and it makes the area fall by exactly\n// phi, so the whole polygon loses sum(phi) = 2 pi per unit time. A small\n// slide along the same chord evens out the spacing and leaves the area alone.\n// The step is at most 0.3 of the square of the shortest half chord, under the\n// 0.5 where the explicit scheme starts to ring. Returns the time it took.\nfunction step(S, todo) {\n  const { X, Y, VX, VY, TX, TY } = S, n = S.n;\n  let mc = 1e9, ml = 1e9, Ml = 0, L = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    const phi = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n    const cx = X[b] - X[a], cy = Y[b] - Y[a], c2 = cx * cx + cy * cy || 1e-12;\n    const l1 = sqrt(ex * ex + ey * ey), l2 = sqrt(fx * fx + fy * fy), g = (0.3 * (l2 - l1)) / sqrt(c2);\n    VX[i] = (-2 * phi * cy) / c2;\n    VY[i] = (2 * phi * cx) / c2;\n    TX[i] = g * cx;\n    TY[i] = g * cy;\n    if (c2 \u003c mc) mc = c2;\n    if (l2 \u003c ml) ml = l2;\n    if (l2 > Ml) Ml = l2;\n    L += l2;\n  }\n  const h = min(todo, 0.075 * mc);\n  for (let i = 0; i \u003c n; i++) {\n    X[i] += h * VX[i] + TX[i];\n    Y[i] += h * VY[i] + TY[i];\n  }\n  S.ml = ml;\n  S.Ml = Ml;\n  S.L = L;\n  return h;\n}\n\n// Fresh points at even spacing. Points laid on the old edges cut the corners\n// and lose a little area, so every point then steps out along its normal by\n// the area lost over half the sum of the chords, which puts it back to first\n// order: a remesh must not move the area clock. When the curve has shrunk\n// there are fewer points, the spacing near DS until the curve is down to NMIN\n// points; edges squeezed under 0.45 of the spacing at a retracting tip, or\n// stretched past 1.8 along an arc pushing outward, force one.\nfunction remesh(S, force) {\n  const { X, Y } = S, L = perimeter(X, Y, S.n), want = max(NMIN, min(NMAX, round(L / DS)));\n  if (!force && want >= 0.8 * S.n && want \u003c= 1.25 * S.n) return;\n  const A = area(X, Y, S.n), P = S.P, np = S.n;\n  for (let i = 0; i \u003c np; i++) (P[2 * i] = X[i]), (P[2 * i + 1] = Y[i]);\n  S.n = want;\n  resample(P, np, X, Y, want);\n  const n = want, VX = S.VX, VY = S.VY;\n  let half = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0, cx = X[b] - X[a], cy = Y[b] - Y[a], c = sqrt(cx * cx + cy * cy) || 1e-9;\n    VX[i] = cy / c;\n    VY[i] = -cx / c;\n    half += c / 2;\n  }\n  const off = (A - area(X, Y, n)) / half;\n  for (let i = 0; i \u003c n; i++) (X[i] += off * VX[i]), (Y[i] += off * VY[i]);\n  S.ml = S.Ml = L / n;\n}\n\n// Signed curvature, summed over seven neighbours so that straight runs read\n// as zero, and the inflection points: where a run of clearly convex points\n// meets a run of clearly concave ones. Runs that never pass 0.06 radians of\n// turning do not count, so a nearly straight stretch does not flicker.\nfunction curvature(S) {\n  const { X, Y, K, PH } = S, n = S.n;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    PH[i] = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n  }\n  let s = 0;\n  for (let j = -3; j \u003c= 3; j++) s += PH[(j + n) % n];\n  for (let i = 0; i \u003c n; i++) {\n    K[i] = s;\n    s += PH[(i + 4) % n] - PH[(i - 3 + n) % n];\n  }\n  // Runs of one sign, starting where the sign changes.\n  const sg = (v) => (v > 0.025 ? 1 : v \u003c -0.025 ? -1 : 0);\n  let start = -1;\n  for (let i = 0; i \u003c n; i++)\n    if (sg(K[i]) && sg(K[i]) !== sg(K[(i - 1 + n) % n])) {\n      start = i;\n      break;\n    }\n  S.ni = 0;\n  if (start \u003c 0) return;\n  const runs = [];\n  let i = 0;\n  while (i \u003c n) {\n    const p = (start + i) % n, v = sg(K[p]);\n    if (!v) {\n      i++;\n      continue;\n    }\n    let j = i, peak = 0;\n    while (j \u003c n && sg(K[(start + j) % n]) === v) (peak = max(peak, abs(K[(start + j) % n]))), j++;\n    if (peak > 0.06) {\n      const last = runs[runs.length - 1];\n      if (last && last.v === v) last.e = j - 1;\n      else runs.push({ v, b: i, e: j - 1 });\n    }\n    i = j;\n  }\n  if (runs.length > 1 && runs[0].v === runs[runs.length - 1].v) {\n    runs[0].b = runs[runs.length - 1].b - n;\n    runs.pop();\n  }\n  if (runs.length \u003c 2) return;\n  for (let r = 0; r \u003c runs.length && S.ni \u003c 64; r++) {\n    const A = runs[r], B = runs[(r + 1) % runs.length];\n    let e = A.e, b = B.b;\n    if (b \u003c= e) b += n;\n    // The zero crossing between the end of one run and the start of the next.\n    let q = e;\n    for (let t = e; t \u003c b; t++) if (K[(start + t) % n] * A.v > 0 && K[(start + t + 1) % n] * A.v \u003c= 0) q = t;\n    const p0 = (start + q + n) % n, p1 = (p0 + 1) % n, k0 = K[p0], k1 = K[p1];\n    const u = k0 !== k1 ? cl(k0 / (k0 - k1), 0, 1) : 0.5;\n    S.IX[S.ni] = X[p0] + u * (X[p1] - X[p0]);\n    S.IY[S.ni] = Y[p0] + u * (Y[p1] - Y[p0]);\n    S.IQ[S.ni++] = p0;\n  }\n}\n\nfunction snapshot(S) {\n  if (S.ns >= SNAPS) return;\n  const k = max(1, ceil(S.n / SNAPN)), o = S.ns * SNAPN * 2;\n  let m = 0;\n  for (let i = 0; i \u003c S.n && m \u003c SNAPN; i += k, m++) (S.SN[o + 2 * m] = S.X[i]), (S.SN[o + 2 * m + 1] = S.Y[i]);\n  S.SM[S.ns++] = m;\n}\n\nfunction setup(params) {\n  params.s = {\n    X: new Float64Array(NMAX), Y: new Float64Array(NMAX), VX: new Float64Array(NMAX), VY: new Float64Array(NMAX),\n    TX: new Float64Array(NMAX), TY: new Float64Array(NMAX), P: new Float64Array(2 * NMAX), ml: 1, Ml: 1, L: 1,\n    K: new Float64Array(NMAX), PH: new Float64Array(NMAX), IX: new Float64Array(64), IY: new Float64Array(64), IQ: new Int32Array(64), ni: 0,\n    SN: new Float64Array(SNAPS * SNAPN * 2), SM: new Int32Array(SNAPS), ns: 0, rush: 0,\n    n: 0, A0: 1, flowT: 0, phase: 0, pt: 0, dur: DRAW0, kind: -1, wind: 1.5, fx: 32, fy: 64, warm: false,\n    hue: 0, trace: 0.06, speed: 2,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), cov: new Float32Array(W * H),\n    xs: new Float32Array(4 * H * 48), xn: new Int32Array(4 * H), col: new Float32Array(12),\n  };\n}\n\nfunction finish(S) {\n  let cx = 0, cy = 0;\n  for (let i = 0; i \u003c S.n; i++) (cx += S.X[i]), (cy += S.Y[i]);\n  S.fx = cx / S.n;\n  S.fy = cy / S.n;\n  S.phase = 2;\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trace = cl(k[3], 0, 1);\n  const wind = cl(k[2], 2, 3.5);\n  if (!S.warm) {\n    build(S, wind, true);\n    S.warm = true;\n  } else if (abs(wind - S.wind) > 0.2 && S.phase !== 2) build(S, wind, false);\n  // K1: the rest of the flow in 0.6 beats, at a rate fixed when pressed.\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== 2) {\n    if (S.phase === 0) (S.phase = 1), (S.pt = 0), snapshot(S);\n    S.rush = area(S.X, S.Y, S.n) / (2 * PI * 0.6);\n  }\n  const beat = (d * S.speed) / 2;\n  S.pt += beat;\n  if (S.phase === 0 && S.pt >= S.dur) {\n    S.phase = 1;\n    S.pt = 0;\n    snapshot(S);\n  }\n  if (S.phase === 1) {\n    // The area clock: A0 / 2 pi units of flow time spread over LIFE beats.\n    let todo = beat * max(S.A0 / (2 * PI * LIFE), S.rush), guard = 0;\n    while (todo > 1e-9 && guard++ \u003c 400) {\n      const h = step(S, todo), ds = S.L / S.n;\n      todo -= h;\n      S.flowT += h;\n      if (S.ml \u003c 0.45 * ds || S.Ml > 1.8 * ds) remesh(S, true);\n      else if (guard % 10 === 0) remesh(S, false);\n      if (guard % 4 === 0 && area(S.X, S.Y, S.n) \u003c 1.5) break;\n    }\n    remesh(S, false);\n    while (S.ns \u003c SNAPS && S.flowT >= (S.ns * S.A0) / (2 * PI * SNAPS)) snapshot(S);\n    if (area(S.X, S.Y, S.n) \u003c 1.5) finish(S);\n  }\n  if (S.phase !== 2) curvature(S);\n  else if (S.pt >= FLASH) build(S, wind, false);\n}\n\n// Coverage of the inside, anti-aliased: four scanlines per row, each\n// crossing interval added to the LEDs it spans in exact fractions.\nfunction fill(S) {\n  const { X, Y, xs, xn, cov } = S, n = S.n, SUB = 4, CAP = 48;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = i + 1 \u003c n ? i + 1 : 0;\n    let x0 = X[i], y0 = Y[i], x1 = X[j], y1 = Y[j];\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const ys = (s + 0.5) / SUB, c = xn[s];\n      if (c \u003c CAP) {\n        xs[s * CAP + c] = x0 + ((ys - y0) * (x1 - x0)) / (y1 - y0);\n        xn[s] = c + 1;\n      }\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\n// A line from (ax, ay) to (bx, by), about 1.6 LEDs wide, kept at the brighter\n// of its colour and what is already there.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const { R, G, B } = S, dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, dd = sqrt(qx * qx + qy * qy);\n      const v = cl((wide - dd) / 0.55, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      R[p] = max(R[p], cr * v);\n      G[p] = max(G[p], cg * v);\n      B[p] = max(B[p], cb * v);\n    }\n}\n\nfunction dot(S, x, y, r, cr, cg, cb) {\n  const { R, G, B } = S;\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, floor(y + r + 1)); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, floor(x + r + 1)); xx++) {\n      const dd = sqrt((xx + 0.5 - x) ** 2 + (yy + 0.5 - y) ** 2), v = cl((r + 0.5 - dd) / 0.7, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = yy * W + xx;\n      R[p] = R[p] * (1 - v) + cr * v;\n      G[p] = G[p] * (1 - v) + cg * v;\n      B[p] = B[p] * (1 - v) + cb * v;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col, X, Y, K } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // Fill, convex rim, concave rim. Orange to lime fills are kept bright so\n  // they read as colour and not brown or olive.\n  const h = S.hue + 0.58;\n  hsv(h, 0.88, 0.9, col, 0);\n  hsv(h - 0.03, 0.3, 1, col, 3);\n  hsv(h + 0.55, 0.85, 1, col, 6);\n  const tr = S.trace, fillLv = 255 * (1 - 0.82 * tr);\n  if (S.phase === 2) {\n    // The round point: a white ring that opens and fades.\n    const u = S.pt / FLASH, r = 1 + 9 * sm(u), a = 255 * (1 - u) * (1 - u);\n    for (let i = 0; i \u003c 48; i++) {\n      const t0 = (2 * PI * i) / 48, t1 = (2 * PI * (i + 1)) / 48;\n      line(S, S.fx + r * cos(t0), S.fy + r * sin(t0), S.fx + r * cos(t1), S.fy + r * sin(t1), a, a, a * 0.95, 0.9);\n    }\n    if (u \u003c 0.3) dot(S, S.fx, S.fy, 1.2, 255, 255, 255);\n  } else {\n    const drawing = S.phase === 0, u = drawing ? S.pt / S.dur : 1;\n    const shown = drawing ? floor(n * sm(u / 0.72)) : n, fa = drawing ? sm((u - 0.55) / 0.4) : 1;\n    // Earlier outlines, the chronophotograph that Trace keeps.\n    if (tr > 0.1 && S.phase === 1) {\n      const lv = 255 * 0.75 * sm((tr - 0.1) / 0.5);\n      for (let s = 0; s \u003c S.ns; s++) {\n        const m = S.SM[s], o = s * SNAPN * 2, f = 0.3 + (0.7 * (s + 1)) / S.ns;\n        for (let i = 0; i \u003c m; i++) {\n          const j = (i + 1) % m;\n          line(S, S.SN[o + 2 * i], S.SN[o + 2 * i + 1], S.SN[o + 2 * j], S.SN[o + 2 * j + 1], col[3] * lv * f * 0.75, col[4] * lv * f * 0.75, col[5] * lv * f * 0.75, 0.75);\n        }\n      }\n    }\n    if (fa > 0) {\n      fill(S);\n      for (let p = 0; p \u003c W * H; p++) {\n        const c = min(1, cov[p]) * fa * fillLv;\n        if (c \u003c= 0) continue;\n        R[p] += col[0] * c;\n        G[p] += col[1] * c;\n        B[p] += col[2] * c;\n      }\n    }\n    // The rim: pale where the curve bends outward, the second colour where\n    // it bends inward. The inflection points sit where the two meet.\n    for (let i = 0; i \u003c shown; i++) {\n      const j = i + 1 \u003c n ? i + 1 : 0, t = cl((K[i] + K[j]) * 6, -1, 1), a = (1 + t) / 2;\n      const cr = 255 * (col[3] * a + col[6] * (1 - a)), cg = 255 * (col[4] * a + col[7] * (1 - a)), cb = 255 * (col[5] * a + col[8] * (1 - a));\n      line(S, X[i], Y[i], X[j], Y[j], cr, cg, cb, drawing && i > shown - 6 ? 1.2 : 0.9);\n    }\n    // White marks at the inflection points: a dark ring round a white core.\n    for (let q = 0; q \u003c S.ni; q++) {\n      if (S.IQ[q] >= shown) continue;\n      dot(S, S.IX[q], S.IY[q], 1.6, 0, 0, 0);\n      dot(S, S.IX[q], S.IY[q], 0.8, 255, 255, 255);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long."},{"name":"Wind","min":2,"max":3.5,"about":"How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve."},{"name":"Trace","min":0,"max":1,"about":"At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline."}],"start":[0,2,2,0.06],"measures":{"motion":0.2037,"detail":0.0249,"edges":0.5796,"complexity":0.2104,"coverage":0.1942,"colour":0.2439,"drift":0.3752},"knobResponse":[0.229,0.2408,0.2872,0.1241]},{"slug":"cushion-mesh","title":"Cushion Mesh","family":"cosmetic","round":32,"note":"쿠션 팩트의 망사를 몇 밀리미터 앞에서 봐요. 1 LED 마다 검은 실과 장밋빛 구멍이 번갈아 서고, 보이지 않는 퍼프가 0.5초마다 지름 28 LED 쯤의 자국을 찍으면 그 안의 구멍 78% 에 흰 파운데이션 방울이 맺혀요. 방울은 연어색으로 물들었다가 자국 가장자리부터 빨려 들어가고, 판에는 늘 769개가 남아요.","idea":"The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.","buttons":"K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Cushion Mesh\n// Family:  cosmetic\n// Idea:    The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the mesh net of a cushion compact\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1\n//\n// Knob 1: Hue. The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac.\n// Knob 2: Speed. At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s.\n// Knob 3: Press. How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel.\n// Knob 4: Puff. The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width.\n// Buttons: K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, exp, atan2, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The mesh is a one-LED checker: the threads (x + y odd) are black, the\n// holes show the soaked sponge at level 40, and a bead is a hole at 255. So\n// every pair of neighbours is a thread and a hole, 40 apart or 255 apart, and\n// the share of beads alone sets the measured edges: 769 beads give 0.190.\n// Beads only form off the panel's edge, where each has four threads round it.\nconst HOLES = [];\nfor (let y = 1; y \u003c H - 1; y++) for (let x = 2 - (y & 1); x \u003c W - 1; x += 2) HOLES.push(y * W + x);\nconst BEADS = 769;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, press: 0, puff: 0.06, warm: false, flood: 0, extra: 0, clock: 0,\n    dabT: 99, dab: null,\n    thr: new Float32Array(N), life: new Float32Array(N), life0: new Float32Array(N), wet: new Float32Array(N),\n    P: new Float32Array(N), bead: new Uint8Array(N), list: [], c: [0, 0, 0],\n  };\n  const S = params.s;\n  // How readily each hole lets the foundation through.\n  for (const p of HOLES) S.thr[p] = random();\n}\n\nfunction newDab(S) {\n  // The puff goes where the mesh is driest: the best of ten tries, scored by\n  // the beads and wet holes under it.\n  const r = 13 + 14 * S.puff;\n  let bx = 32, by = 64, best = 1e9;\n  for (let k = 0; k \u003c 10; k++) {\n    const x = r * 0.5 + random() * (W - r), y = r * 0.5 + random() * (H - r);\n    let score = 0;\n    for (let v = -r; v \u003c= r; v += 3)\n      for (let u = -r; u \u003c= r; u += 3) {\n        const px = round(x + u), py = round(y + v);\n        if (u * u + v * v > r * r || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n        const q = py * W + px - ((px + py) & 1);\n        score += S.bead[q] + 0.3 * S.wet[q];\n      }\n    if (score \u003c best) (best = score), (bx = x), (by = y);\n  }\n  S.dab = { x: bx, y: by, r, w1: random() * 6.28, w2: random() * 6.28 };\n  S.dabT = 0;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.dabT += ds;\n  if (S.dabT >= 0.5) newDab(S);\n  const t = S.dabT, a = t \u003c 0.12 ? sm(0, 0.12, t) : t \u003c 0.34 ? 1 : 1 - sm(0.34, 0.46, t);\n  const P = S.P;\n  P.fill(0);\n  if (S.dab && a > 0) {\n    // The mark spreads from three quarters of its size as the puff lands,\n    // with a soft rim that wobbles round the edge.\n    const { x: cx, y: cy, r: r0, w1, w2 } = S.dab, r = r0 * (0.75 + 0.25 * a);\n    for (let y = max(1, floor(cy - r - 2)); y \u003c= min(H - 2, cy + r + 2); y++)\n      for (let x = max(1, floor(cx - r - 2)); x \u003c= min(W - 2, cx + r + 2); x++) {\n        const dx = x - cx, dy = y - cy, th = atan2(dy, dx);\n        const e = r * (1 + 0.08 * sin(3 * th + w1) + 0.05 * sin(5 * th + w2));\n        const v = a * (1 - sm(0.7 * e, e, sqrt(dx * dx + dy * dy)));\n        if (v > 0) P[y * W + x] = v;\n      }\n  }\n  if (S.flood > 0) {\n    S.flood = max(0, S.flood - ds);\n    const v = 0.9 * sm(0.5, 0.42, S.flood) * sm(0, 0.08, S.flood);\n    for (const p of HOLES) P[p] = max(P[p], v);\n    if (S.flood === 0) S.extra = 1;\n  } else S.extra = max(0, S.extra - ds / 2.5);\n  const rho = 0.78 * 1.25 ** S.press, L = 4.5 * 1.4 ** S.press, list = S.list;\n  list.length = 0;\n  for (const p of HOLES) {\n    const pv = P[p];\n    if (pv > 0) S.wet[p] = max(S.wet[p], pv);\n    S.wet[p] = max(0, S.wet[p] - ds / 1.5);\n    if (S.bead[p]) {\n      // A bead under the puff is fed; once the puff lifts it waits its turn.\n      if (pv \u003c 0.05) S.life[p] -= ds;\n      if (S.life[p] \u003c= 0) {\n        S.bead[p] = 0;\n        S.wet[p] = 1;\n        continue;\n      }\n      list.push(p);\n    } else if (pv * rho > S.thr[p]) {\n      let q = 1;\n      if (S.dab) {\n        const dx = (p % W) - S.dab.x, dy = floor(p / W) - S.dab.y;\n        q = cl(sqrt(dx * dx + dy * dy) / S.dab.r, 0, 1);\n      }\n      S.bead[p] = 1;\n      S.life[p] = S.life0[p] = L * (0.35 + 0.65 * (1 - q) + 0.25 * random());\n      list.push(p);\n    }\n  }\n  // The mesh holds only so much liquid at the surface. Past that, the beads\n  // nearest their time go back in first, so a mark drains from its rim.\n  const flood = S.flood > 0 ? sm(0.5, 0.42, S.flood) : S.extra;\n  const target = round(BEADS * 2.2 ** S.press * (1 + 2.6 * flood));\n  if (list.length > target) {\n    list.sort((u, v) => S.life[u] - S.life[v]);\n    for (let i = 0; i \u003c list.length - target; i++) {\n      S.bead[list[i]] = 0;\n      S.wet[list[i]] = 1;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.press = cl(k[2], -1, 1);\n  S.puff = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a compact that has been dabbed for three seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.flood === 0) S.flood = 0.5;\n  S.clock += d * S.speed;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, h = S.hue + 0.03;\n  // A band of light slides down across the mesh every 7 s at Speed 2 and\n  // turns the beads in it white; it changes colour only, never level.\n  const u0 = -24 + 196 * ((S.clock / 14) % 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if ((x + y) & 1) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const p = y * W + x, du = (x * 0.8 + y * 0.6 - u0) / 7, g = exp(-du * du);\n      if (S.bead[p]) {\n        const age = cl(1 - S.life[p] / S.life0[p], 0, 1);\n        hsv(h, (0.16 + 0.48 * age) * (1 - 0.85 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n      } else {\n        const w = S.wet[p];\n        hsv(h - 0.02 * w, (0.45 + 0.45 * w) * (1 - 0.6 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 40), round(c[1] * 40), round(c[2] * 40));\n      }\n    }\n}\n","layer":{"id":"layer-cushion-mesh","type":"code","name":"cushion-mesh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cushion Mesh\n// Family:  cosmetic\n// Idea:    The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the mesh net of a cushion compact\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1\n//\n// Knob 1: Hue. The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac.\n// Knob 2: Speed. At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s.\n// Knob 3: Press. How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel.\n// Knob 4: Puff. The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width.\n// Buttons: K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, exp, atan2, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The mesh is a one-LED checker: the threads (x + y odd) are black, the\n// holes show the soaked sponge at level 40, and a bead is a hole at 255. So\n// every pair of neighbours is a thread and a hole, 40 apart or 255 apart, and\n// the share of beads alone sets the measured edges: 769 beads give 0.190.\n// Beads only form off the panel's edge, where each has four threads round it.\nconst HOLES = [];\nfor (let y = 1; y \u003c H - 1; y++) for (let x = 2 - (y & 1); x \u003c W - 1; x += 2) HOLES.push(y * W + x);\nconst BEADS = 769;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, press: 0, puff: 0.06, warm: false, flood: 0, extra: 0, clock: 0,\n    dabT: 99, dab: null,\n    thr: new Float32Array(N), life: new Float32Array(N), life0: new Float32Array(N), wet: new Float32Array(N),\n    P: new Float32Array(N), bead: new Uint8Array(N), list: [], c: [0, 0, 0],\n  };\n  const S = params.s;\n  // How readily each hole lets the foundation through.\n  for (const p of HOLES) S.thr[p] = random();\n}\n\nfunction newDab(S) {\n  // The puff goes where the mesh is driest: the best of ten tries, scored by\n  // the beads and wet holes under it.\n  const r = 13 + 14 * S.puff;\n  let bx = 32, by = 64, best = 1e9;\n  for (let k = 0; k \u003c 10; k++) {\n    const x = r * 0.5 + random() * (W - r), y = r * 0.5 + random() * (H - r);\n    let score = 0;\n    for (let v = -r; v \u003c= r; v += 3)\n      for (let u = -r; u \u003c= r; u += 3) {\n        const px = round(x + u), py = round(y + v);\n        if (u * u + v * v > r * r || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n        const q = py * W + px - ((px + py) & 1);\n        score += S.bead[q] + 0.3 * S.wet[q];\n      }\n    if (score \u003c best) (best = score), (bx = x), (by = y);\n  }\n  S.dab = { x: bx, y: by, r, w1: random() * 6.28, w2: random() * 6.28 };\n  S.dabT = 0;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.dabT += ds;\n  if (S.dabT >= 0.5) newDab(S);\n  const t = S.dabT, a = t \u003c 0.12 ? sm(0, 0.12, t) : t \u003c 0.34 ? 1 : 1 - sm(0.34, 0.46, t);\n  const P = S.P;\n  P.fill(0);\n  if (S.dab && a > 0) {\n    // The mark spreads from three quarters of its size as the puff lands,\n    // with a soft rim that wobbles round the edge.\n    const { x: cx, y: cy, r: r0, w1, w2 } = S.dab, r = r0 * (0.75 + 0.25 * a);\n    for (let y = max(1, floor(cy - r - 2)); y \u003c= min(H - 2, cy + r + 2); y++)\n      for (let x = max(1, floor(cx - r - 2)); x \u003c= min(W - 2, cx + r + 2); x++) {\n        const dx = x - cx, dy = y - cy, th = atan2(dy, dx);\n        const e = r * (1 + 0.08 * sin(3 * th + w1) + 0.05 * sin(5 * th + w2));\n        const v = a * (1 - sm(0.7 * e, e, sqrt(dx * dx + dy * dy)));\n        if (v > 0) P[y * W + x] = v;\n      }\n  }\n  if (S.flood > 0) {\n    S.flood = max(0, S.flood - ds);\n    const v = 0.9 * sm(0.5, 0.42, S.flood) * sm(0, 0.08, S.flood);\n    for (const p of HOLES) P[p] = max(P[p], v);\n    if (S.flood === 0) S.extra = 1;\n  } else S.extra = max(0, S.extra - ds / 2.5);\n  const rho = 0.78 * 1.25 ** S.press, L = 4.5 * 1.4 ** S.press, list = S.list;\n  list.length = 0;\n  for (const p of HOLES) {\n    const pv = P[p];\n    if (pv > 0) S.wet[p] = max(S.wet[p], pv);\n    S.wet[p] = max(0, S.wet[p] - ds / 1.5);\n    if (S.bead[p]) {\n      // A bead under the puff is fed; once the puff lifts it waits its turn.\n      if (pv \u003c 0.05) S.life[p] -= ds;\n      if (S.life[p] \u003c= 0) {\n        S.bead[p] = 0;\n        S.wet[p] = 1;\n        continue;\n      }\n      list.push(p);\n    } else if (pv * rho > S.thr[p]) {\n      let q = 1;\n      if (S.dab) {\n        const dx = (p % W) - S.dab.x, dy = floor(p / W) - S.dab.y;\n        q = cl(sqrt(dx * dx + dy * dy) / S.dab.r, 0, 1);\n      }\n      S.bead[p] = 1;\n      S.life[p] = S.life0[p] = L * (0.35 + 0.65 * (1 - q) + 0.25 * random());\n      list.push(p);\n    }\n  }\n  // The mesh holds only so much liquid at the surface. Past that, the beads\n  // nearest their time go back in first, so a mark drains from its rim.\n  const flood = S.flood > 0 ? sm(0.5, 0.42, S.flood) : S.extra;\n  const target = round(BEADS * 2.2 ** S.press * (1 + 2.6 * flood));\n  if (list.length > target) {\n    list.sort((u, v) => S.life[u] - S.life[v]);\n    for (let i = 0; i \u003c list.length - target; i++) {\n      S.bead[list[i]] = 0;\n      S.wet[list[i]] = 1;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.press = cl(k[2], -1, 1);\n  S.puff = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a compact that has been dabbed for three seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.flood === 0) S.flood = 0.5;\n  S.clock += d * S.speed;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, h = S.hue + 0.03;\n  // A band of light slides down across the mesh every 7 s at Speed 2 and\n  // turns the beads in it white; it changes colour only, never level.\n  const u0 = -24 + 196 * ((S.clock / 14) % 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if ((x + y) & 1) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const p = y * W + x, du = (x * 0.8 + y * 0.6 - u0) / 7, g = exp(-du * du);\n      if (S.bead[p]) {\n        const age = cl(1 - S.life[p] / S.life0[p], 0, 1);\n        hsv(h, (0.16 + 0.48 * age) * (1 - 0.85 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n      } else {\n        const w = S.wet[p];\n        hsv(h - 0.02 * w, (0.45 + 0.45 * w) * (1 - 0.6 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 40), round(c[1] * 40), round(c[2] * 40));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s."},{"name":"Press","min":-1,"max":1,"about":"How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel."},{"name":"Puff","min":0,"max":1,"about":"The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width."}],"start":[0,2,0,0.06],"measures":{"motion":0.0612,"detail":0.3133,"edges":0.19,"complexity":0.3734,"coverage":0.5,"colour":0.1055,"drift":0.1322},"knobResponse":[0.0477,0.1254,0.1656,0.1397]},{"slug":"cyanotype","title":"Cyanotype","family":"print","round":19,"note":"철염을 바른 종이에 고사리와 깃털, 민들레 씨앗, 레이스를 놓고 햇빛에 구운 뒤 물로 씻어 내리면 프러시안 블루 인화가 드러나요. 마르며 짙어진 인화가 옆으로 밀려 나가면 다음 장이 깔려요.","idea":"A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","layer":{"id":"layer-cyanotype","type":"code","name":"cyanotype","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tone","min":0,"max":1,"about":"The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes."},{"name":"Specimen","min":0,"max":4,"about":"What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order."},{"name":"Exposure","min":-1,"max":1,"about":"How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through."}],"start":[0,2,0,0.06],"measures":{"motion":0.2407,"detail":0.0234,"edges":0.2171,"complexity":1.3748,"coverage":1,"colour":0.239,"drift":0.1842},"knobResponse":[0.1554,0.128,0.0957,0.1334]},{"slug":"dandelin-spheres","title":"Dandelin Spheres","family":"geometry","round":33,"note":"유리 원뿔을 평면이 자른 원뿔곡선 위아래로 당들랭 구 둘이 원뿔에 끼어 평면에 닿아 있어요. 곡선을 도는 점에서 두 초점까지의 거리와 원뿔 모선 위 두 토막이 금색과 분홍으로 짝지어 같은 길이로 보여요. K3 은 평면 기울기로 30도의 타원에서 74도의 포물선을 지나 쌍곡선까지 가고, K1 을 누르면 평면이 11초 동안 똑바로 섰다가 돌아와요.","idea":"A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.","buttons":"K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Dandelin Spheres\n// Family:  geometry\n// Idea:    A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dandelin spheres (Germinal Pierre Dandelin, 1822), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34\n//\n// Knob 1: Hue. Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink.\n// Knob 2: Speed. At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50.\n// Knob 4: Cone. The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34.\n// Buttons: K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, tan, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst RAD = PI / 180;\n\n// World units: the apex at the origin, y up the axis. The plane turns about\n// the horizontal line through (XP, YP) along z, so at 90 degrees it stands\n// 0.3 off the axis and still cuts a hyperbola instead of two crossing lines.\nconst XP = -0.3, YP = 0.95;\n// The cone is cut off at these heights.\nconst YTOP = 2.25, YBOT = -2.4;\n// The plane is drawn where |x| and |z| are under this.\nconst PX = 1.05;\n// Camera: this far from the point it looks at, this many degrees above it.\nconst DIST = 9, ELEV = 28 * RAD;\n// Five lines of the cone, round its axis.\nconst GEN = 5;\n// The opening hue sits here on the wheel: teal.\nconst H0 = 0.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n// How far a hue sits in the orange and yellow that turn brown when shaded.\nconst warm = (h) => {\n  h -= floor(h);\n  return max(0, 1 - abs(h - 0.11) / 0.1);\n};\n\nexport function setup(params) {\n  params.s = {\n    th: 0.6, ph: 0, sw: -1, hue: 0, tilt: 30, cone: 16, speed: 2, lo: -0.25,\n    base: new Float32Array(N * 3), lin: new Float32Array(N * 3),\n    zO: new Float32Array(N), zC: new Float32Array(N), zP: new Float32Array(N),\n    col: new Float32Array(8 * 3), colHue: NaN, sc: {},\n  };\n}\n\n// The scene for a tilt and half-angle in radians: the plane n.p = h with\n// n = (-sin b, cos b, 0), and the two spheres on the axis at heights s with\n// radius |s| sin a. A sphere at s is tangent to the cone, and tangent to the\n// plane when |cos b s - h| = |s| sin a, so s = h / (cos b + sin a), the one\n// between the apex and the plane, and s = h / (cos b - sin a), past the plane\n// while cos b > sin a (an ellipse), at infinity when they are equal (a\n// parabola), and below the apex in the other nappe once sin a is the larger\n// (a hyperbola).\nfunction scene(S, b, a) {\n  const sa = sin(a), ca = cos(a), sb = sin(b), cb = cos(b), h = cb * YP - sb * XP;\n  const sc = S.sc;\n  sc.sa = sa;\n  sc.ca = ca;\n  sc.k = sa / ca;\n  sc.nx = -sb;\n  sc.ny = cb;\n  sc.h = h;\n  sc.s1 = h / (cb + sa);\n  const den = cb - sa;\n  sc.s2 = abs(den) > 1e-4 ? h / den : 1e9;\n  sc.r1 = abs(sc.s1) * sa;\n  sc.r2 = abs(sc.s2) * sa;\n  // A focus is the foot of the perpendicular from a sphere's centre to the\n  // plane; a contact circle is where the sphere meets the cone, at height\n  // s cos^2 a. Along a line of the cone it sits s cos a from the apex.\n  for (const [s, k] of [[sc.s1, 1], [sc.s2, 2]]) {\n    const d = cb * s - h;\n    sc[\"fx\" + k] = -d * sc.nx;\n    sc[\"fy\" + k] = s - d * sc.ny;\n    sc[\"g\" + k] = s * ca;\n  }\n  sc.e = sb / ca;\n}\n\n// The conic as a curve over the cone's azimuth phi: the line of the cone at\n// phi, t (sin a cos phi, cos a, sin a sin phi), meets the plane at\n// t = h / (cos b cos a - sin b sin a cos phi). On a hyperbola t changes sign\n// where that denominator does, and the point crosses to the other nappe.\nfunction conicT(sc, phi) {\n  const den = sc.ny * sc.ca + sc.nx * sc.sa * cos(phi);\n  return abs(den) \u003c 1e-6 ? 1e9 : sc.h / den;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[2], 30, 90);\n  S.cone = cl(k[3], 16, 34);\n  const sp = S.speed / 2;\n  if (input.btnPressed && input.btnPressed[0]) S.sw = 0;\n  let tilt = S.tilt;\n  if (S.sw >= 0) {\n    // Up to upright in 4.5 s, a 2 s rest, and back in 4.5 s, at Speed 2.\n    S.sw += (d * sp) / 11;\n    const u = S.sw, up = u \u003c 0.41 ? sm(u / 0.41) : u \u003c 0.59 ? 1 : 1 - sm((u - 0.59) / 0.41);\n    tilt += (90 - tilt) * up;\n    if (S.sw >= 1) S.sw = -1;\n  }\n  scene(S, tilt * RAD, S.cone * RAD);\n  const sc = S.sc;\n  // The view: level with the ellipse case's spheres while the cut is an\n  // ellipse, widening downwards to take in the other nappe as the eccentricity\n  // passes 0.8 on its way to the hyperbola.\n  const lo = -0.25 - 1.95 * sm((sc.e - 0.8) / 0.3);\n  S.lo += (lo - S.lo) * min(1, d * 3);\n  // The turn hurries past the azimuths where the camera sees the plane edge\n  // on and the conic flattens to a line, and lingers where it lies open.\n  const edgeOn = abs(sc.nx * cos(ELEV) * sin(S.th) + sc.ny * sin(ELEV));\n  S.th += d * sp * ((2 * PI) / 36) * (0.6 + 1.8 * exp(-((edgeOn / 0.18) ** 2)));\n  // The point moves at about 0.55 units a second along the conic. Off the\n  // drawn part of a hyperbola or parabola it skips ahead to where it comes\n  // back in.\n  let left = d * sp * 0.55, guard = 0;\n  while (left > 0 && guard++ \u003c 40) {\n    const t0 = conicT(sc, S.ph), t1 = conicT(sc, S.ph + 0.01);\n    const y0 = t0 * sc.ca;\n    if (y0 > YTOP || y0 \u003c YBOT + 0.1) {\n      S.ph += 0.05;\n      continue;\n    }\n    const x0 = t0 * sc.sa * cos(S.ph), z0 = t0 * sc.sa * sin(S.ph);\n    const x1 = t1 * sc.sa * cos(S.ph + 0.01), z1 = t1 * sc.sa * sin(S.ph + 0.01), y1 = t1 * sc.ca;\n    const ds = Math.hypot(x1 - x0, y1 - y0, z1 - z0) / 0.01;\n    const step = min(left / max(ds, 1e-3), 0.3);\n    S.ph += step;\n    left -= step * ds;\n  }\n  S.ph %= 2 * PI;\n}\n\n// Colours: lower sphere, upper sphere, cone, plane, conic, the two\n// segment colours, white.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0;\n  // The cone and the plane are seen faint, where a warm hue reads olive, so\n  // they lose more of their colour there than the bright parts do.\n  const set = (i, hh, s, v) => {\n    const w = warm(hh);\n    hsv(hh, s * (1 - (i === 2 || i === 3 ? 0.7 : 0.35) * w), v, c, i * 3);\n  };\n  set(0, h, 0.72, 1);\n  set(1, h + 0.2, 0.62, 1);\n  set(2, h + 0.1, 0.55, 1);\n  set(3, h + 0.04, 0.5, 1);\n  set(4, h + 0.62, 0.14, 1);\n  set(5, h + 0.62, 0.6, 1);\n  set(6, h + 0.42, 0.55, 1);\n  set(7, 0, 0, 1);\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.sc.h === undefined) return;\n  if (S.colHue !== S.hue) palette(S);\n  const sc = S.sc, col = S.col, base = S.base, lin = S.lin, zO = S.zO, zC = S.zC, zP = S.zP;\n  const hi = YTOP, lo = S.lo, ty = (hi + lo) / 2;\n  // A wider cone pulls the camera back, by the square root of how much\n  // wider it is than the 16 degree one, so a wide ellipse still fits.\n  const f = (128 * DIST) / ((hi - lo) * cos(ELEV) * sqrt(sc.k / tan(16 * RAD)));\n  // Camera basis. fwd looks at (0, ty, 0) from DIST away, ELEV above.\n  const ce = cos(ELEV), se = sin(ELEV), st = sin(S.th), ct = cos(S.th);\n  const ox = DIST * ce * st, oy = ty + DIST * se, oz = DIST * ce * ct;\n  const fx = -ce * st, fy = -se, fz = -ce * ct;\n  const rx = ct, rz = -st; // right = fwd x up, level\n  const ux = -fy * rz, uy = rz * fx - rx * fz, uz = fy * rx;\n  // The light hangs above and to the left of the camera.\n  let lx = -0.55 * rx + 0.75 * ux - 0.5 * fx, ly = 0.75 * uy - 0.5 * fy, lz = -0.55 * rz + 0.75 * uz - 0.5 * fz;\n  const ll = Math.hypot(lx, ly, lz);\n  lx /= ll;\n  ly /= ll;\n  lz /= ll;\n  const k2 = sc.k * sc.k, nx = sc.nx, ny = sc.ny, h = sc.h;\n  // Each sphere: height, radius, palette slot, and how warm its hue is.\n  const sph = [\n    [sc.s1, sc.r1, 0, warm(S.hue + H0)],\n    [sc.s2, sc.r2, 3, warm(S.hue + H0 + 0.2)],\n  ];\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const v = (63.5 - py) / f, bg = 0.025 + 0.02 * (py / H);\n    for (let px = 0; px \u003c W; px++, p++) {\n      const u = (px - 31.5) / f;\n      const dx = fx + u * rx + v * ux, dy = fy + v * uy, dz = fz + u * rz + v * uz;\n      const dd = dx * dx + dy * dy + dz * dz, il = 1 / sqrt(dd);\n      let r = bg * 0.6, g = bg * 0.75, b = bg * 1.5, tO = 1e9;\n      // The spheres, opaque and lit. They are drawn whole even where they\n      // rise past the cut cone, a ball sitting in a cup.\n      for (let q = 0; q \u003c 2; q++) {\n        const s = sph[q][0], rad = sph[q][1];\n        if (rad \u003c= 0 || abs(s) > 60) continue;\n        const ocy = oy - s, bb = ox * dx + ocy * dy + oz * dz, cc = ox * ox + ocy * ocy + oz * oz - rad * rad, disc = bb * bb - dd * cc;\n        if (disc \u003c= 0) continue;\n        const t = (-bb - sqrt(disc)) / dd;\n        if (t \u003c= 0 || t >= tO) continue;\n        tO = t;\n        const o = sph[q][2];\n        const hx = (ox + t * dx) / rad, hy = (oy + t * dy - s) / rad, hz = (oz + t * dz) / rad;\n        const di = max(0, hx * lx + hy * ly + hz * lz);\n        // Blinn highlight on the half vector between the light and the eye.\n        const vx = lx - dx * il, vy = ly - dy * il, vz = lz - dz * il;\n        const vl = Math.hypot(vx, vy, vz);\n        const hs = max(0, (hx * vx + hy * vy + hz * vz) / vl), spec = hs ** 28 * 0.75;\n        const rim = -(hx * dx + hy * dy + hz * dz) * il;\n        // Orange and yellow go brown in shade, so a warm sphere gets more\n        // fill light and stays gold.\n        const wq = sph[q][3], lit = 0.12 + 0.3 * wq + (0.8 - 0.2 * wq) * di * (0.55 + 0.45 * rim);\n        r = col[o] * lit + spec;\n        g = col[o + 1] * lit + spec;\n        b = col[o + 2] * lit + spec;\n      }\n      zO[p] = tO;\n      // The cone: x^2 + z^2 = k^2 y^2, both nappes. Glass, so each crossing\n      // adds a little light, more where the surface is seen edge on.\n      const A = dx * dx + dz * dz - k2 * dy * dy, B = 2 * (ox * dx + oz * dz - k2 * oy * dy), C = ox * ox + oz * oz - k2 * oy * oy;\n      let tc1 = 1e9, tc2 = 1e9;\n      const disc = B * B - 4 * A * C;\n      if (disc > 0 && abs(A) > 1e-9) {\n        const sq = sqrt(disc);\n        let ta = (-B - sq) / (2 * A), tb = (-B + sq) / (2 * A);\n        if (ta > tb) [ta, tb] = [tb, ta];\n        for (const t of [ta, tb]) {\n          const y = oy + t * dy;\n          if (t > 0 && y \u003c YTOP && y > YBOT) {\n            if (tc1 > 1e8) tc1 = t;\n            else tc2 = t;\n          }\n        }\n      }\n      zC[p] = tc1;\n      // The plane, clipped to a square in x and z and to the cone's height.\n      // It is brighter inside the cone, where it is the conic's own disc, and\n      // lit along its edges.\n      let tp = 1e9, pin = false, pm = 0;\n      const nd = nx * dx + ny * dy;\n      if (abs(nd) > 1e-6) {\n        const t = (h - nx * ox - ny * oy) / nd;\n        if (t > 0 && t \u003c tO) {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz;\n          const m = min(PX - abs(x), PX - abs(z), y - YBOT, YTOP - y);\n          if (m > 0) {\n            tp = t;\n            pin = x * x + z * z \u003c k2 * y * y;\n            pm = (m * f) / t;\n          }\n        }\n      }\n      zP[p] = tp;\n      // The glass layers in front of the opaque hit, far to near: the far\n      // wall of the cone, then the near wall, with the plane wherever it falls.\n      const pa = pin ? 0.2 : 0.12, pe = (pin ? 0.3 : 0.08) + 0.5 * exp(-pm * pm * 0.8);\n      const pos = tp > tc2 ? 0 : tp > tc1 ? 1 : 2;\n      for (let L = 0; L \u003c 3; L++) {\n        const isP = L === pos, t = isP ? tp : (L \u003c pos ? L : L - 1) === 0 ? tc2 : tc1;\n        if (t >= tO || t > 1e8) continue;\n        let a, e, o;\n        if (isP) {\n          a = pa;\n          e = pe;\n          o = 9;\n        } else {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz, gy = -k2 * y, gl = Math.hypot(x, gy, z) || 1;\n          const ci = abs((x * dx + gy * dy + z * dz) / gl) * il, fr = (1 - ci) * (1 - ci);\n          a = 0.06 + 0.2 * fr;\n          e = 0.07 + 0.42 * fr;\n          o = 6;\n        }\n        r = r * (1 - a) + col[o] * e;\n        g = g * (1 - a) + col[o + 1] * e;\n        b = b * (1 - a) + col[o + 2] * e;\n      }\n      base[p * 3] = r;\n      base[p * 3 + 1] = g;\n      base[p * 3 + 2] = b;\n    }\n  }\n\n  // Lines and points, splatted over the shading. Behind a sphere they show\n  // through dimmed, behind the cone's near wall or the plane a little dimmer.\n  lin.fill(0);\n  const ssa = sc.sa, sca = sc.ca;\n  let cr = 0, cg = 0, cb = 0, cw = 0;\n  // A thick line is laid as two strands half an LED either side of its\n  // path on the screen, (tox, toy) apart.\n  let thick = false, tox = 0, toy = 0;\n  const put = (sx, sy, k) => {\n    const ix = floor(sx), iy = floor(sy), ax = sx - ix, ay = sy - iy;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = ix + (j & 1), Y = iy + (j >> 1);\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const wt = k * (j & 1 ? ax : 1 - ax) * (j >> 1 ? ay : 1 - ay), o = (Y * W + X) * 3;\n      lin[o] += cr * wt;\n      lin[o + 1] += cg * wt;\n      lin[o + 2] += cb * wt;\n    }\n  };\n  const splat = (x, y, z, w) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = qx * fx + qy * fy + qz * fz;\n    if (zz \u003c 0.1) return;\n    const sx = 31.5 + (f * (qx * rx + qz * rz)) / zz, sy = 63.5 - (f * (qx * ux + qy * uy + qz * uz)) / zz;\n    if (sx \u003c -2 || sx > W + 1 || sy \u003c -2 || sy > H + 1) return;\n    const ni = cl(Math.round(sy), 0, H - 1) * W + cl(Math.round(sx), 0, W - 1);\n    let k = w;\n    if (zz > zO[ni] + 0.04) k *= 0.38;\n    if (zz > zC[ni] + 0.04) k *= 0.62;\n    if (zz > zP[ni] + 0.03) k *= 0.75;\n    if (!thick) put(sx, sy, k);\n    else {\n      put(sx + tox, sy + toy, k * 0.62);\n      put(sx - tox, sy - toy, k * 0.62);\n    }\n  };\n  const proj = (x, y, z) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = max(0.1, qx * fx + qy * fy + qz * fz);\n    return [(f * (qx * rx + qz * rz)) / zz, (f * (qx * ux + qy * uy + qz * uz)) / zz];\n  };\n  const seg = (ax, ay, az, bx, by, bz) => {\n    const [sx0, sy0] = proj(ax, ay, az), [sx1, sy1] = proj(bx, by, bz);\n    const L = Math.hypot(sx1 - sx0, sy1 - sy0), n = max(1, Math.ceil(L / 0.6)), w = (L / n) * cw;\n    tox = L > 0 ? (-(sy1 - sy0) / L) * 0.55 : 0;\n    toy = L > 0 ? ((sx1 - sx0) / L) * 0.55 : 0;\n    for (let i = 0; i \u003c= n; i++) {\n      const t = i / n;\n      splat(ax + (bx - ax) * t, ay + (by - ay) * t, az + (bz - az) * t, i === 0 || i === n ? w / 2 : w);\n    }\n  };\n  const use = (o, w) => {\n    cr = col[o * 3];\n    cg = col[o * 3 + 1];\n    cb = col[o * 3 + 2];\n    cw = w;\n  };\n  // A point on the line of the cone at azimuth phi, t along it.\n  const gp = (phi, t) => [t * ssa * cos(phi), t * sca, t * ssa * sin(phi)];\n  // The cone's lines through the apex and its two rims.\n  use(2, 0.3);\n  const tTop = YTOP / sca, tBot = YBOT / sca;\n  for (let i = 0; i \u003c GEN; i++) {\n    const phi = (i * 2 * PI) / GEN + 0.3;\n    seg(...gp(phi, tTop), 0, 0, 0);\n    seg(0, 0, 0, ...gp(phi, tBot));\n  }\n  const ring = (y, rad, n) => {\n    let px = rad, pz = 0;\n    for (let i = 1; i \u003c= n; i++) {\n      const a = (i * 2 * PI) / n, qx = rad * cos(a), qz = rad * sin(a);\n      seg(px, y, pz, qx, y, qz);\n      px = qx;\n      pz = qz;\n    }\n  };\n  use(2, 0.5);\n  ring(YTOP, YTOP * sc.k, 72);\n  ring(YBOT, -YBOT * sc.k, 72);\n  // The contact circles, in each sphere's colour, brighter.\n  const okS = (s, r) => r > 0 && abs(s) \u003c 60;\n  use(0, 0.95);\n  if (okS(sc.s1, sc.r1)) ring(sc.g1 * sca, abs(sc.g1 * ssa), 64);\n  use(1, 0.95);\n  if (okS(sc.s2, sc.r2) && sc.g2 * sca \u003c YTOP && sc.g2 * sca > YBOT) ring(sc.g2 * sca, abs(sc.g2 * ssa), 64);\n  // The conic, drawn in pieces wherever it lies inside the cut cone.\n  use(4, 1.35);\n  const NPH = 240;\n  let prev = null;\n  for (let i = 0; i \u003c= NPH; i++) {\n    const phi = (i * 2 * PI) / NPH, t = conicT(sc, phi), y = t * sca;\n    const okp = y \u003c YTOP && y > YBOT;\n    const cur = okp ? gp(phi, t) : null;\n    if (cur && prev && abs(cur[1] - prev[1]) \u003c 1.2) seg(...prev, ...cur);\n    prev = cur;\n  }\n  // The point, its two distances to the foci and the line of the cone\n  // through it, cut where it meets the two contact circles. Each pair in one\n  // colour: PF1 equals the stretch to circle 1, PF2 the stretch to circle 2.\n  const tP = conicT(sc, S.ph), yP = tP * sca;\n  if (yP \u003c YTOP && yP > YBOT) {\n    const [Px, Py, Pz] = gp(S.ph, tP);\n    const clipT = (t) => cl(t, tBot, tTop);\n    thick = true;\n    use(5, 1.5);\n    if (okS(sc.s1, sc.r1)) {\n      seg(Px, Py, Pz, sc.fx1, sc.fy1, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g1)));\n    }\n    use(6, 1.5);\n    if (okS(sc.s2, sc.r2)) {\n      seg(Px, Py, Pz, sc.fx2, sc.fy2, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g2)));\n    } else seg(Px, Py, Pz, ...gp(S.ph, sc.g2 > 0 ? tTop : tBot));\n    thick = false;\n    use(7, 2.2);\n    for (const [ddx, ddy] of [[0, 0], [0.012, 0], [-0.012, 0], [0, 0.012], [0, -0.012]]) splat(Px + ddx, Py + ddy, Pz, 1);\n  }\n  // The foci, white points where the spheres touch the plane.\n  use(7, 1.6);\n  for (const [s, r, fxx, fyy] of [[sc.s1, sc.r1, sc.fx1, sc.fy1], [sc.s2, sc.r2, sc.fx2, sc.fy2]]) {\n    if (!okS(s, r) || fyy > YTOP || fyy \u003c YBOT) continue;\n    for (const [ddx, ddy] of [[0, 0], [0.014, 0], [-0.014, 0], [0, 0.014], [0, -0.014]]) splat(fxx + ddx, fyy + ddy, 0, 1);\n  }\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3;\n      display.setPixel(x, y, cl((base[o] + lin[o]) * 255, 0, 255), cl((base[o + 1] + lin[o + 1]) * 255, 0, 255), cl((base[o + 2] + lin[o + 2]) * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-dandelin-spheres","type":"code","name":"dandelin-spheres","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dandelin Spheres\n// Family:  geometry\n// Idea:    A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dandelin spheres (Germinal Pierre Dandelin, 1822), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34\n//\n// Knob 1: Hue. Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink.\n// Knob 2: Speed. At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50.\n// Knob 4: Cone. The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34.\n// Buttons: K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, tan, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst RAD = PI / 180;\n\n// World units: the apex at the origin, y up the axis. The plane turns about\n// the horizontal line through (XP, YP) along z, so at 90 degrees it stands\n// 0.3 off the axis and still cuts a hyperbola instead of two crossing lines.\nconst XP = -0.3, YP = 0.95;\n// The cone is cut off at these heights.\nconst YTOP = 2.25, YBOT = -2.4;\n// The plane is drawn where |x| and |z| are under this.\nconst PX = 1.05;\n// Camera: this far from the point it looks at, this many degrees above it.\nconst DIST = 9, ELEV = 28 * RAD;\n// Five lines of the cone, round its axis.\nconst GEN = 5;\n// The opening hue sits here on the wheel: teal.\nconst H0 = 0.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n// How far a hue sits in the orange and yellow that turn brown when shaded.\nconst warm = (h) => {\n  h -= floor(h);\n  return max(0, 1 - abs(h - 0.11) / 0.1);\n};\n\nexport function setup(params) {\n  params.s = {\n    th: 0.6, ph: 0, sw: -1, hue: 0, tilt: 30, cone: 16, speed: 2, lo: -0.25,\n    base: new Float32Array(N * 3), lin: new Float32Array(N * 3),\n    zO: new Float32Array(N), zC: new Float32Array(N), zP: new Float32Array(N),\n    col: new Float32Array(8 * 3), colHue: NaN, sc: {},\n  };\n}\n\n// The scene for a tilt and half-angle in radians: the plane n.p = h with\n// n = (-sin b, cos b, 0), and the two spheres on the axis at heights s with\n// radius |s| sin a. A sphere at s is tangent to the cone, and tangent to the\n// plane when |cos b s - h| = |s| sin a, so s = h / (cos b + sin a), the one\n// between the apex and the plane, and s = h / (cos b - sin a), past the plane\n// while cos b > sin a (an ellipse), at infinity when they are equal (a\n// parabola), and below the apex in the other nappe once sin a is the larger\n// (a hyperbola).\nfunction scene(S, b, a) {\n  const sa = sin(a), ca = cos(a), sb = sin(b), cb = cos(b), h = cb * YP - sb * XP;\n  const sc = S.sc;\n  sc.sa = sa;\n  sc.ca = ca;\n  sc.k = sa / ca;\n  sc.nx = -sb;\n  sc.ny = cb;\n  sc.h = h;\n  sc.s1 = h / (cb + sa);\n  const den = cb - sa;\n  sc.s2 = abs(den) > 1e-4 ? h / den : 1e9;\n  sc.r1 = abs(sc.s1) * sa;\n  sc.r2 = abs(sc.s2) * sa;\n  // A focus is the foot of the perpendicular from a sphere's centre to the\n  // plane; a contact circle is where the sphere meets the cone, at height\n  // s cos^2 a. Along a line of the cone it sits s cos a from the apex.\n  for (const [s, k] of [[sc.s1, 1], [sc.s2, 2]]) {\n    const d = cb * s - h;\n    sc[\"fx\" + k] = -d * sc.nx;\n    sc[\"fy\" + k] = s - d * sc.ny;\n    sc[\"g\" + k] = s * ca;\n  }\n  sc.e = sb / ca;\n}\n\n// The conic as a curve over the cone's azimuth phi: the line of the cone at\n// phi, t (sin a cos phi, cos a, sin a sin phi), meets the plane at\n// t = h / (cos b cos a - sin b sin a cos phi). On a hyperbola t changes sign\n// where that denominator does, and the point crosses to the other nappe.\nfunction conicT(sc, phi) {\n  const den = sc.ny * sc.ca + sc.nx * sc.sa * cos(phi);\n  return abs(den) \u003c 1e-6 ? 1e9 : sc.h / den;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[2], 30, 90);\n  S.cone = cl(k[3], 16, 34);\n  const sp = S.speed / 2;\n  if (input.btnPressed && input.btnPressed[0]) S.sw = 0;\n  let tilt = S.tilt;\n  if (S.sw >= 0) {\n    // Up to upright in 4.5 s, a 2 s rest, and back in 4.5 s, at Speed 2.\n    S.sw += (d * sp) / 11;\n    const u = S.sw, up = u \u003c 0.41 ? sm(u / 0.41) : u \u003c 0.59 ? 1 : 1 - sm((u - 0.59) / 0.41);\n    tilt += (90 - tilt) * up;\n    if (S.sw >= 1) S.sw = -1;\n  }\n  scene(S, tilt * RAD, S.cone * RAD);\n  const sc = S.sc;\n  // The view: level with the ellipse case's spheres while the cut is an\n  // ellipse, widening downwards to take in the other nappe as the eccentricity\n  // passes 0.8 on its way to the hyperbola.\n  const lo = -0.25 - 1.95 * sm((sc.e - 0.8) / 0.3);\n  S.lo += (lo - S.lo) * min(1, d * 3);\n  // The turn hurries past the azimuths where the camera sees the plane edge\n  // on and the conic flattens to a line, and lingers where it lies open.\n  const edgeOn = abs(sc.nx * cos(ELEV) * sin(S.th) + sc.ny * sin(ELEV));\n  S.th += d * sp * ((2 * PI) / 36) * (0.6 + 1.8 * exp(-((edgeOn / 0.18) ** 2)));\n  // The point moves at about 0.55 units a second along the conic. Off the\n  // drawn part of a hyperbola or parabola it skips ahead to where it comes\n  // back in.\n  let left = d * sp * 0.55, guard = 0;\n  while (left > 0 && guard++ \u003c 40) {\n    const t0 = conicT(sc, S.ph), t1 = conicT(sc, S.ph + 0.01);\n    const y0 = t0 * sc.ca;\n    if (y0 > YTOP || y0 \u003c YBOT + 0.1) {\n      S.ph += 0.05;\n      continue;\n    }\n    const x0 = t0 * sc.sa * cos(S.ph), z0 = t0 * sc.sa * sin(S.ph);\n    const x1 = t1 * sc.sa * cos(S.ph + 0.01), z1 = t1 * sc.sa * sin(S.ph + 0.01), y1 = t1 * sc.ca;\n    const ds = Math.hypot(x1 - x0, y1 - y0, z1 - z0) / 0.01;\n    const step = min(left / max(ds, 1e-3), 0.3);\n    S.ph += step;\n    left -= step * ds;\n  }\n  S.ph %= 2 * PI;\n}\n\n// Colours: lower sphere, upper sphere, cone, plane, conic, the two\n// segment colours, white.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0;\n  // The cone and the plane are seen faint, where a warm hue reads olive, so\n  // they lose more of their colour there than the bright parts do.\n  const set = (i, hh, s, v) => {\n    const w = warm(hh);\n    hsv(hh, s * (1 - (i === 2 || i === 3 ? 0.7 : 0.35) * w), v, c, i * 3);\n  };\n  set(0, h, 0.72, 1);\n  set(1, h + 0.2, 0.62, 1);\n  set(2, h + 0.1, 0.55, 1);\n  set(3, h + 0.04, 0.5, 1);\n  set(4, h + 0.62, 0.14, 1);\n  set(5, h + 0.62, 0.6, 1);\n  set(6, h + 0.42, 0.55, 1);\n  set(7, 0, 0, 1);\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.sc.h === undefined) return;\n  if (S.colHue !== S.hue) palette(S);\n  const sc = S.sc, col = S.col, base = S.base, lin = S.lin, zO = S.zO, zC = S.zC, zP = S.zP;\n  const hi = YTOP, lo = S.lo, ty = (hi + lo) / 2;\n  // A wider cone pulls the camera back, by the square root of how much\n  // wider it is than the 16 degree one, so a wide ellipse still fits.\n  const f = (128 * DIST) / ((hi - lo) * cos(ELEV) * sqrt(sc.k / tan(16 * RAD)));\n  // Camera basis. fwd looks at (0, ty, 0) from DIST away, ELEV above.\n  const ce = cos(ELEV), se = sin(ELEV), st = sin(S.th), ct = cos(S.th);\n  const ox = DIST * ce * st, oy = ty + DIST * se, oz = DIST * ce * ct;\n  const fx = -ce * st, fy = -se, fz = -ce * ct;\n  const rx = ct, rz = -st; // right = fwd x up, level\n  const ux = -fy * rz, uy = rz * fx - rx * fz, uz = fy * rx;\n  // The light hangs above and to the left of the camera.\n  let lx = -0.55 * rx + 0.75 * ux - 0.5 * fx, ly = 0.75 * uy - 0.5 * fy, lz = -0.55 * rz + 0.75 * uz - 0.5 * fz;\n  const ll = Math.hypot(lx, ly, lz);\n  lx /= ll;\n  ly /= ll;\n  lz /= ll;\n  const k2 = sc.k * sc.k, nx = sc.nx, ny = sc.ny, h = sc.h;\n  // Each sphere: height, radius, palette slot, and how warm its hue is.\n  const sph = [\n    [sc.s1, sc.r1, 0, warm(S.hue + H0)],\n    [sc.s2, sc.r2, 3, warm(S.hue + H0 + 0.2)],\n  ];\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const v = (63.5 - py) / f, bg = 0.025 + 0.02 * (py / H);\n    for (let px = 0; px \u003c W; px++, p++) {\n      const u = (px - 31.5) / f;\n      const dx = fx + u * rx + v * ux, dy = fy + v * uy, dz = fz + u * rz + v * uz;\n      const dd = dx * dx + dy * dy + dz * dz, il = 1 / sqrt(dd);\n      let r = bg * 0.6, g = bg * 0.75, b = bg * 1.5, tO = 1e9;\n      // The spheres, opaque and lit. They are drawn whole even where they\n      // rise past the cut cone, a ball sitting in a cup.\n      for (let q = 0; q \u003c 2; q++) {\n        const s = sph[q][0], rad = sph[q][1];\n        if (rad \u003c= 0 || abs(s) > 60) continue;\n        const ocy = oy - s, bb = ox * dx + ocy * dy + oz * dz, cc = ox * ox + ocy * ocy + oz * oz - rad * rad, disc = bb * bb - dd * cc;\n        if (disc \u003c= 0) continue;\n        const t = (-bb - sqrt(disc)) / dd;\n        if (t \u003c= 0 || t >= tO) continue;\n        tO = t;\n        const o = sph[q][2];\n        const hx = (ox + t * dx) / rad, hy = (oy + t * dy - s) / rad, hz = (oz + t * dz) / rad;\n        const di = max(0, hx * lx + hy * ly + hz * lz);\n        // Blinn highlight on the half vector between the light and the eye.\n        const vx = lx - dx * il, vy = ly - dy * il, vz = lz - dz * il;\n        const vl = Math.hypot(vx, vy, vz);\n        const hs = max(0, (hx * vx + hy * vy + hz * vz) / vl), spec = hs ** 28 * 0.75;\n        const rim = -(hx * dx + hy * dy + hz * dz) * il;\n        // Orange and yellow go brown in shade, so a warm sphere gets more\n        // fill light and stays gold.\n        const wq = sph[q][3], lit = 0.12 + 0.3 * wq + (0.8 - 0.2 * wq) * di * (0.55 + 0.45 * rim);\n        r = col[o] * lit + spec;\n        g = col[o + 1] * lit + spec;\n        b = col[o + 2] * lit + spec;\n      }\n      zO[p] = tO;\n      // The cone: x^2 + z^2 = k^2 y^2, both nappes. Glass, so each crossing\n      // adds a little light, more where the surface is seen edge on.\n      const A = dx * dx + dz * dz - k2 * dy * dy, B = 2 * (ox * dx + oz * dz - k2 * oy * dy), C = ox * ox + oz * oz - k2 * oy * oy;\n      let tc1 = 1e9, tc2 = 1e9;\n      const disc = B * B - 4 * A * C;\n      if (disc > 0 && abs(A) > 1e-9) {\n        const sq = sqrt(disc);\n        let ta = (-B - sq) / (2 * A), tb = (-B + sq) / (2 * A);\n        if (ta > tb) [ta, tb] = [tb, ta];\n        for (const t of [ta, tb]) {\n          const y = oy + t * dy;\n          if (t > 0 && y \u003c YTOP && y > YBOT) {\n            if (tc1 > 1e8) tc1 = t;\n            else tc2 = t;\n          }\n        }\n      }\n      zC[p] = tc1;\n      // The plane, clipped to a square in x and z and to the cone's height.\n      // It is brighter inside the cone, where it is the conic's own disc, and\n      // lit along its edges.\n      let tp = 1e9, pin = false, pm = 0;\n      const nd = nx * dx + ny * dy;\n      if (abs(nd) > 1e-6) {\n        const t = (h - nx * ox - ny * oy) / nd;\n        if (t > 0 && t \u003c tO) {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz;\n          const m = min(PX - abs(x), PX - abs(z), y - YBOT, YTOP - y);\n          if (m > 0) {\n            tp = t;\n            pin = x * x + z * z \u003c k2 * y * y;\n            pm = (m * f) / t;\n          }\n        }\n      }\n      zP[p] = tp;\n      // The glass layers in front of the opaque hit, far to near: the far\n      // wall of the cone, then the near wall, with the plane wherever it falls.\n      const pa = pin ? 0.2 : 0.12, pe = (pin ? 0.3 : 0.08) + 0.5 * exp(-pm * pm * 0.8);\n      const pos = tp > tc2 ? 0 : tp > tc1 ? 1 : 2;\n      for (let L = 0; L \u003c 3; L++) {\n        const isP = L === pos, t = isP ? tp : (L \u003c pos ? L : L - 1) === 0 ? tc2 : tc1;\n        if (t >= tO || t > 1e8) continue;\n        let a, e, o;\n        if (isP) {\n          a = pa;\n          e = pe;\n          o = 9;\n        } else {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz, gy = -k2 * y, gl = Math.hypot(x, gy, z) || 1;\n          const ci = abs((x * dx + gy * dy + z * dz) / gl) * il, fr = (1 - ci) * (1 - ci);\n          a = 0.06 + 0.2 * fr;\n          e = 0.07 + 0.42 * fr;\n          o = 6;\n        }\n        r = r * (1 - a) + col[o] * e;\n        g = g * (1 - a) + col[o + 1] * e;\n        b = b * (1 - a) + col[o + 2] * e;\n      }\n      base[p * 3] = r;\n      base[p * 3 + 1] = g;\n      base[p * 3 + 2] = b;\n    }\n  }\n\n  // Lines and points, splatted over the shading. Behind a sphere they show\n  // through dimmed, behind the cone's near wall or the plane a little dimmer.\n  lin.fill(0);\n  const ssa = sc.sa, sca = sc.ca;\n  let cr = 0, cg = 0, cb = 0, cw = 0;\n  // A thick line is laid as two strands half an LED either side of its\n  // path on the screen, (tox, toy) apart.\n  let thick = false, tox = 0, toy = 0;\n  const put = (sx, sy, k) => {\n    const ix = floor(sx), iy = floor(sy), ax = sx - ix, ay = sy - iy;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = ix + (j & 1), Y = iy + (j >> 1);\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const wt = k * (j & 1 ? ax : 1 - ax) * (j >> 1 ? ay : 1 - ay), o = (Y * W + X) * 3;\n      lin[o] += cr * wt;\n      lin[o + 1] += cg * wt;\n      lin[o + 2] += cb * wt;\n    }\n  };\n  const splat = (x, y, z, w) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = qx * fx + qy * fy + qz * fz;\n    if (zz \u003c 0.1) return;\n    const sx = 31.5 + (f * (qx * rx + qz * rz)) / zz, sy = 63.5 - (f * (qx * ux + qy * uy + qz * uz)) / zz;\n    if (sx \u003c -2 || sx > W + 1 || sy \u003c -2 || sy > H + 1) return;\n    const ni = cl(Math.round(sy), 0, H - 1) * W + cl(Math.round(sx), 0, W - 1);\n    let k = w;\n    if (zz > zO[ni] + 0.04) k *= 0.38;\n    if (zz > zC[ni] + 0.04) k *= 0.62;\n    if (zz > zP[ni] + 0.03) k *= 0.75;\n    if (!thick) put(sx, sy, k);\n    else {\n      put(sx + tox, sy + toy, k * 0.62);\n      put(sx - tox, sy - toy, k * 0.62);\n    }\n  };\n  const proj = (x, y, z) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = max(0.1, qx * fx + qy * fy + qz * fz);\n    return [(f * (qx * rx + qz * rz)) / zz, (f * (qx * ux + qy * uy + qz * uz)) / zz];\n  };\n  const seg = (ax, ay, az, bx, by, bz) => {\n    const [sx0, sy0] = proj(ax, ay, az), [sx1, sy1] = proj(bx, by, bz);\n    const L = Math.hypot(sx1 - sx0, sy1 - sy0), n = max(1, Math.ceil(L / 0.6)), w = (L / n) * cw;\n    tox = L > 0 ? (-(sy1 - sy0) / L) * 0.55 : 0;\n    toy = L > 0 ? ((sx1 - sx0) / L) * 0.55 : 0;\n    for (let i = 0; i \u003c= n; i++) {\n      const t = i / n;\n      splat(ax + (bx - ax) * t, ay + (by - ay) * t, az + (bz - az) * t, i === 0 || i === n ? w / 2 : w);\n    }\n  };\n  const use = (o, w) => {\n    cr = col[o * 3];\n    cg = col[o * 3 + 1];\n    cb = col[o * 3 + 2];\n    cw = w;\n  };\n  // A point on the line of the cone at azimuth phi, t along it.\n  const gp = (phi, t) => [t * ssa * cos(phi), t * sca, t * ssa * sin(phi)];\n  // The cone's lines through the apex and its two rims.\n  use(2, 0.3);\n  const tTop = YTOP / sca, tBot = YBOT / sca;\n  for (let i = 0; i \u003c GEN; i++) {\n    const phi = (i * 2 * PI) / GEN + 0.3;\n    seg(...gp(phi, tTop), 0, 0, 0);\n    seg(0, 0, 0, ...gp(phi, tBot));\n  }\n  const ring = (y, rad, n) => {\n    let px = rad, pz = 0;\n    for (let i = 1; i \u003c= n; i++) {\n      const a = (i * 2 * PI) / n, qx = rad * cos(a), qz = rad * sin(a);\n      seg(px, y, pz, qx, y, qz);\n      px = qx;\n      pz = qz;\n    }\n  };\n  use(2, 0.5);\n  ring(YTOP, YTOP * sc.k, 72);\n  ring(YBOT, -YBOT * sc.k, 72);\n  // The contact circles, in each sphere's colour, brighter.\n  const okS = (s, r) => r > 0 && abs(s) \u003c 60;\n  use(0, 0.95);\n  if (okS(sc.s1, sc.r1)) ring(sc.g1 * sca, abs(sc.g1 * ssa), 64);\n  use(1, 0.95);\n  if (okS(sc.s2, sc.r2) && sc.g2 * sca \u003c YTOP && sc.g2 * sca > YBOT) ring(sc.g2 * sca, abs(sc.g2 * ssa), 64);\n  // The conic, drawn in pieces wherever it lies inside the cut cone.\n  use(4, 1.35);\n  const NPH = 240;\n  let prev = null;\n  for (let i = 0; i \u003c= NPH; i++) {\n    const phi = (i * 2 * PI) / NPH, t = conicT(sc, phi), y = t * sca;\n    const okp = y \u003c YTOP && y > YBOT;\n    const cur = okp ? gp(phi, t) : null;\n    if (cur && prev && abs(cur[1] - prev[1]) \u003c 1.2) seg(...prev, ...cur);\n    prev = cur;\n  }\n  // The point, its two distances to the foci and the line of the cone\n  // through it, cut where it meets the two contact circles. Each pair in one\n  // colour: PF1 equals the stretch to circle 1, PF2 the stretch to circle 2.\n  const tP = conicT(sc, S.ph), yP = tP * sca;\n  if (yP \u003c YTOP && yP > YBOT) {\n    const [Px, Py, Pz] = gp(S.ph, tP);\n    const clipT = (t) => cl(t, tBot, tTop);\n    thick = true;\n    use(5, 1.5);\n    if (okS(sc.s1, sc.r1)) {\n      seg(Px, Py, Pz, sc.fx1, sc.fy1, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g1)));\n    }\n    use(6, 1.5);\n    if (okS(sc.s2, sc.r2)) {\n      seg(Px, Py, Pz, sc.fx2, sc.fy2, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g2)));\n    } else seg(Px, Py, Pz, ...gp(S.ph, sc.g2 > 0 ? tTop : tBot));\n    thick = false;\n    use(7, 2.2);\n    for (const [ddx, ddy] of [[0, 0], [0.012, 0], [-0.012, 0], [0, 0.012], [0, -0.012]]) splat(Px + ddx, Py + ddy, Pz, 1);\n  }\n  // The foci, white points where the spheres touch the plane.\n  use(7, 1.6);\n  for (const [s, r, fxx, fyy] of [[sc.s1, sc.r1, sc.fx1, sc.fy1], [sc.s2, sc.r2, sc.fx2, sc.fy2]]) {\n    if (!okS(s, r) || fyy > YTOP || fyy \u003c YBOT) continue;\n    for (const [ddx, ddy] of [[0, 0], [0.014, 0], [-0.014, 0], [0, 0.014], [0, -0.014]]) splat(fxx + ddx, fyy + ddy, 0, 1);\n  }\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3;\n      display.setPixel(x, y, cl((base[o] + lin[o]) * 255, 0, 255), cl((base[o + 1] + lin[o + 1]) * 255, 0, 255), cl((base[o + 2] + lin[o + 2]) * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower."},{"name":"Tilt","min":30,"max":90,"about":"The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50."},{"name":"Cone","min":16,"max":34,"about":"The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34."}],"start":[0,2,30,16],"measures":{"motion":0.1793,"detail":0.0495,"edges":0.3572,"complexity":1.3922,"coverage":0.6125,"colour":0.1958,"drift":0.0301},"knobResponse":[0.1111,0.0383,0.2036,0.1906]},{"slug":"dark-field","title":"Dark Field","family":"microbe","round":26,"note":"암시야 현미경 속 연못물 한 방울이에요. 볼복스와 짚신벌레, 돌말, 해캄 실 위의 종벌레가 검은 바탕에 흩은 빛으로만 빛나요. K1 이 라인베르크와 위상차로 조명을 바꾸고, 누르면 종벌레 자루가 용수철처럼 감겨요.","idea":"A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.","buttons":"K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.","code":"// ===== Patternflow pattern =====\n// Title:   Dark Field\n// Family:  microbe\n// Idea:    A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after dark-field and Rheinberg illumination in the light microscope\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1\n//\n// Knob 1: Light. At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos.\n// Knob 2: Speed. At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower.\n// Knob 3: Crowd. At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in.\n// Knob 4: Focus. Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit.\n// Buttons: K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.\n\nconst W = 64, H = 128, N = W * H, HW = 32, HH = 64;\nconst { min, max, floor, round, ceil, sin, cos, sqrt, exp, abs, PI, atan2 } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rr = (a, b) => a + (b - a) * rnd();\nfunction h32(a, b) {\n  let h = Math.imul(a ^ Math.imul(b, 0x27d4eb2d), 0x9e3779b1);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca77);\n  h ^= h >>> 13;\n  return (h ^ (h >>> 16)) >>> 0;\n}\n\n// Small things live on a torus a little larger than the view, so what leaves\n// one side comes back at the other out of sight. Big swimmers turn back\n// toward the middle near an edge.\nconst wrap = (o, m = 12) => ((o.x -= (W + 2 * m) * floor((o.x + m) / (W + 2 * m))), (o.y -= (H + 2 * m) * floor((o.y + m) / (H + 2 * m))));\nconst go = (o, v) => ((o.x += cos(o.h) * v), (o.y += sin(o.h) * v));\nfunction swim(o, d) {\n  if ((o.z += o.vz * d) > 1 || o.z \u003c -1) o.vz = -o.vz;\n  if (o.x > 8 && o.x \u003c 56 && o.y > 12 && o.y \u003c 116) return;\n  let e = atan2(64 - o.y, 32 - o.x) - o.h;\n  o.h += cl(e - TAU * round(e / TAU), -1, 1) * 1.2 * d;\n}\n// Colours each thing scatters in dark field.\nconst C = {\n  cell: [110, 255, 118], vrim: [175, 255, 165], dau: [64, 255, 92], par: [200, 222, 255], gran: [255, 236, 196], dia: [255, 194, 72],\n  vor: [222, 236, 255], rot: [255, 226, 186], eug: [132, 255, 140], amb: [255, 184, 100], gry: [212, 206, 198], wall: [205, 242, 182],\n  chl: [84, 236, 90], osc: [120, 250, 222],\n};\n// Rheinberg: an annular filter yellow at its sides and red top and bottom, so\n// an edge's colour follows the way it faces (q = nx² - ny²), on a blue field.\nconst RA = [255, 220, 46], RB = [255, 44, 40];\nconst RM = RA.map((v, i) => (v + RB[i]) / 2), RH = RA.map((v, i) => (v - RB[i]) / 2);\nconst FIELD = [4, 16, 60], PHASE = [74, 82, 72];\n\n// The algal thread, a Spirogyra filament across the lower third: its centre\n// at arc length s and its unit tangent.\nconst FL = 136;\nlet fx = 0, fy = 0, ftx = 1, fty = 0;\nfunction fil(s) {\n  const dy = -0.2 + 0.225 * cos(s * 0.045 + 0.3), l = sqrt(1 + dy * dy);\n  (fx = s - 30), (fy = 109 - 0.2 * s + 5 * sin(s * 0.045 + 0.3)), (ftx = 1 / l), (fty = dy / l);\n}\n\n// Light goes into a sharp buffer and, by how far the thing lies from the\n// focal plane, into a halo buffer at half resolution that is blurred and\n// spread back over the LEDs.\nlet S, Q, ox = 0, oy = 0, foc = 0, m1 = 0, wS = 1, wQ = 0, lastP = -1;\nconst K0 = [0, 0, 0], K1 = [0, 0, 0];\nfunction col(c, g = 1) {\n  for (let i = 0; i \u003c 3; i++) (K0[i] = (g * (c[i] + m1 * (RM[i] - c[i]))) / 255), (K1[i] = (g * m1 * RH[i]) / 255);\n}\nfunction dep(z) {\n  const b = max(0, abs(z - foc) - 0.15) * 2.4;\n  wS = max(0, 1 - b);\n  wQ = min(1, b) / (1 + 0.5 * max(0, b - 1));\n}\nfunction put(x, y, s, q = 0) {\n  const xi = round(x - ox), yi = round(y - oy), o = (yi * W + xi) * 3;\n  if (xi \u003c 0 || yi \u003c 0 || xi >= W || yi >= H || o === lastP) return;\n  lastP = o;\n  const r = s * (K0[0] + q * K1[0]), g = s * (K0[1] + q * K1[1]), b = s * (K0[2] + q * K1[2]), h = ((yi >> 1) * HW + (xi >> 1)) * 3;\n  if (wS) (S[o] += r * wS), (S[o + 1] += g * wS), (S[o + 2] += b * wS);\n  if (wQ) (Q[h] += r * wQ), (Q[h + 1] += g * wQ), (Q[h + 2] += b * wQ);\n}\n// A point: small things lose themselves out of focus, so less goes to the halo.\nfunction dot(x, y, s, q = 0) {\n  const k = wQ;\n  (lastP = -1), (wQ *= 0.4);\n  put(x, y, s, q);\n  wQ = k;\n}\nfunction line(x0, y0, x1, y1, s) {\n  const dx = x1 - x0, dy = y1 - y0, n = max(1, ceil(max(abs(dx), abs(dy)))), q = (dy * dy - dx * dx) / (dx * dx + dy * dy + 1e-6);\n  for (let k = 0; k \u003c n; k++) put(x0 + (dx * k) / n, y0 + (dy * k) / n, s, q);\n}\nfunction ring(cx, cy, r, s) {\n  lastP = -1;\n  for (let k = 0, n = max(8, ceil(TAU * r * 1.4)); k \u003c n; k++) {\n    const c = cos((k / n) * TAU), sn = sin((k / n) * TAU);\n    put(cx + r * c, cy + r * sn, s, c * c - sn * sn);\n  }\n}\n// A body's own frame: at(u, v) is u along its axis and v across it.\nlet FX = 0, FY = 0, FC = 1, FS = 0;\nconst frame = (x, y, a) => ((FX = x), (FY = y), (FC = cos(a)), (FS = sin(a)));\nconst at = (u, v, s, f = put, q = FS * FS - FC * FC) => f(FX + u * FC - v * FS, FY + u * FS + v * FC, s, q);\n// A three-wide box blur run twice, on the half-resolution grid.\nfunction blur(A, T) {\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [a, b, s, n] = pass & 1 ? [T, A, HW * 3, HH] : [A, T, 3, HW];\n    for (let y = 0, o = 0; y \u003c HH; y++)\n      for (let x = 0; x \u003c HW; x++)\n        for (let c = 0, i = pass & 1 ? y : x; c \u003c 3; c++, o++) b[o] = (a[o - (i > 0 ? s : 0)] + a[o] + a[o + (i \u003c n - 1 ? s : 0)]) / 3;\n  }\n}\n// Light to LED level: black below 0.1, a gain of 3, a soft shoulder above 0.8.\nconst LUT = Float32Array.from({ length: 1024 }, (_, i) => {\n  const v = max(0, i / 256 - 0.1) * 3;\n  return 255 * (v \u003c 0.8 ? v : 1 - 0.2 * exp(-(v - 0.8) / 0.2));\n});\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), side = () => (rnd() \u003c 0.5 ? -1 : 1), A = (n, f) => Array.from({ length: n }, (_, i) => ({ x: rr(-12, 76), y: rr(-12, 140), h: rnd() * TAU, ...f(i) }));\n  const P = (params.s = { t: 0, S: F(N * 3), Q: F(HW * HH * 3), T: F(HW * HH * 3), QS: F(HW * HH), L: F(N), V: F(N), OP: F(140), nx: 0, ny: 0, ex: 0, ey: 0, nt: 3.2, ja: 0, jt: 9, jx: 0, jy: 0, s1: rnd() * 7, s2: rnd() * 7 });\n  // The round field stop of the eyepiece clips the panel's two ends.\n  for (let p = 0; p \u003c N; p++) P.V[p] = sm(67.5, 62, sqrt(((p & 63) - 31.5) ** 2 + (((p >> 6) - 63.5) * 1.02) ** 2));\n  // Volvox: cells on a sphere (a Fibonacci spiral) and daughter colonies inside.\n  P.vol = [[0.18, 12, 21], [-0.8, 9, 57], [0.2, 9.5, 112], [0.62, 11, 80]].map(([z, R, y]) => {\n    const n = round(0.7 * R * R), pts = F(n * 3), d = [];\n    for (let k = 0; k \u003c n; k++) {\n      const yv = 1 - (2 * k + 1) / n, q = sqrt(1 - yv * yv);\n      pts.set([cos(k * 2.4) * q, yv, sin(k * 2.4) * q], k * 3);\n    }\n    for (let k = 0, m = 3 + rnd() * 3; k \u003c m; k++) {\n      const a = rnd() * TAU, b = rr(-1, 1), r = rr(0.2, 0.52), q = sqrt(1 - b * b) * r;\n      d.push([cos(a) * q, b * r, sin(a) * q, rr(0.17, 0.25) * R]);\n    }\n    return { x: rr(16, 48), y: y + rr(-9, 9), z, vz: rr(-0.025, 0.025), R, h: rnd() * TAU, v: rr(1.6, 2.8), ph: 0, w: rr(0.4, 0.7) * side(), pts, d };\n  });\n  // Paramecia: slippers with an oral groove that swaps sides as they spin.\n  P.par = [[0.05, 42], [0.14, 115], [-0.12, 70], [0.75, 20], [-0.85, 92]].map(([z, y]) => ({\n    x: rr(14, 50), y: y + rr(-10, 10), z, vz: rr(-0.05, 0.05), h: rnd() * TAU, v: rr(8, 11), a: rr(11.5, 13.5), B: rr(4.4, 5.2), spin: 0, ws: rr(1.6, 2.4),\n    rev: 0, tt: rr(3, 8), cy: 0, cv: [rnd(), rnd()],\n  }));\n  // Diatoms: two glide along the thread, two on floating debris, the rest on\n  // the slide's glass, deeper down.\n  P.dia = A(9, (i) => ({ z: i \u003c 2 ? 0 : i \u003c 4 ? rr(-0.05, 0.2) : rr(0.75, 0.92), a: rr(6, 9), B: rr(2.1, 2.6), go: rnd() \u003c 0.6, tt: rr(0.5, 3), dir: side(), v: rr(3.5, 6), f: i \u003c 2 ? 44 + 34 * i + rr(-6, 6) : -1 }));\n  // Oscillatoria: blue-green threads that glide along their length and wave both ends.\n  P.osc = [[18, 17, -0.04], [46, 40, 0.1], [30, 117, 0.3]].map(([x, y, z], i) => ({ x: x + rr(-9, 9), y: y + rr(-9, 9), z, h: rr(-0.6, 0.6) + (i & 1) * PI, L: 2 * round(rr(17, 24)), k: rr(-0.015, 0.015), ph: rnd() * 7, v: rr(1.2, 2.2) }));\n  // Vorticella bells on the thread: anchor, lean, stalk length. Bell 0 snaps first.\n  P.vor = [[46, -0.22, 46], [50, 0.16, 36], [41, -0.55, 30], [56, 0.45, 42], [36, -0.05, 52], [62, 0.1, 28], [30, -0.4, 40]].map(([s, a, L], i) => ({ s, a: a - PI / 2, L, ext: 1, st: 0, tt: i ? rr(9, 18) : 4.1, cp: 0 }));\n  P.rot = [[84, -2.05], [16, -1.15]].map(([s, a]) => ({ s, a, L: 21, ext: 1, st: 0, tt: rr(7, 12), cp: 0, sw: rnd() * 7 }));\n  P.fla = A(44, (i) => ({ z: rr(-0.9, 0.9), v: rr(6, 18), tt: 0, k: i % 3, ph: rnd() * 7 }));\n  // Detritus: grains and glittering flakes, amber plant matter or grey grit,\n  // a third of it settled on the slide. Bacteria: points crowding near the\n  // thread they feed on, most jiggling, some swimming.\n  P.det = A(48, (i) => {\n    const pts = [], m = 1 + floor(rnd() * rnd() * 9), e = m > 3 ? 2 : 1;\n    for (let k = 0; k \u003c m; k++) pts.push([e * round(rr(-1.5, 1.5)), e * round(rr(-1.5, 1.5)), rr(0.35, 0.8)]);\n    return { z: i % 3 ? rr(-1, 1) * rnd() : rr(0.8, 1), pts, k: rnd() \u003c 0.55 };\n  });\n  P.bac = A(580, () => ({ z: rr(-1, 1) * rnd(), s: rr(0.4, 0.8), m: rnd() \u003c 0.3 }));\n}\n\n// Knocking the slide.\nfunction knock(P) {\n  const a = rnd() * TAU;\n  (P.ja = 3.5), (P.jt = 0), (P.jx = cos(a)), (P.jy = sin(a));\n  for (const o of [...P.vor, ...P.rot]) if (o.st !== 1) o.st = 1;\n  for (const o of P.par) (o.rev = 0.6), (o.tr = rr(-3, 3));\n  for (const o of [...P.vol, ...P.fla, ...P.det]) (o.x += P.jx * rr(1, 4)), (o.y += P.jy * rr(1, 4));\n}\n\n// A stalk or body that waits and snaps in to lo. It holds there, then stretches out again.\nfunction cycle(o, d, down, lo, up, hold, wait) {\n  if (o.st === 0 && (o.tt -= d) \u003c 0) o.st = 1;\n  else if (o.st === 1 && (o.ext -= d * down) \u003c= lo) (o.ext = lo), (o.st = 2), (o.tt = hold * rr(1, 2));\n  else if (o.st === 2 && (o.tt -= d) \u003c 0) o.st = 3;\n  else if (o.st === 3 && (o.ext += d * up * (1.12 - o.ext)) >= 1) (o.ext = 1), (o.st = 0), (o.tt = wait * rr(1, 2.2));\n}\n\nfunction life(P, d, crowd, first) {\n  // Each kind fades its members in and out by the Crowd knob.\n  const each = (L, k, f) =>\n    L.forEach((o, i) => {\n      const tg = i \u003c k ? 1 : 0;\n      o.p = first ? tg : o.p + (tg - o.p) * min(1, d * 2.5);\n      f(o, i);\n    });\n  const t = P.t;\n  each(P.vol, 3 + round(crowd), (o, i) => {\n    o.h += sin(t * 0.21 + i * 2) * 0.15 * d;\n    go(o, o.v * d);\n    o.ph += o.w * d;\n    swim(o, d);\n  });\n  each(P.par, 3 + round(2 * crowd), (o, i) => {\n    o.spin += o.ws * d;\n    if (o.rev > 0) (o.rev -= d), (o.h += o.tr * d), go(o, -o.v * 0.5 * d);\n    else {\n      o.h += sin(t * 0.5 + i * 2.3) * 0.25 * d;\n      if ((o.tt -= d) \u003c 0) (o.rev = 0.7), (o.tr = rr(-3, 3)), (o.tt = rr(4, 9));\n      go(o, o.v * d);\n    }\n    o.cy += d * 0.7;\n    (o.cv[0] = (o.cv[0] + d * 0.24) % 1), (o.cv[1] = (o.cv[1] + d * 0.21) % 1);\n    swim(o, d);\n  });\n  // Diatoms glide on their raphe and stop. Then they set off again, often backwards.\n  each(P.dia, 5 + round(4 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.go = !o.go), (o.tt = o.go ? rr(2, 4) : rr(0.8, 2.2)), o.go && rnd() \u003c 0.4 && (o.dir = -o.dir);\n    const v = o.go ? o.v * o.dir * d * sm(0, 0.4, o.tt) : 0;\n    if (o.f \u003c 0) go(o, v), wrap(o);\n    else if ((o.f += v) \u003c 8 || o.f > FL - 8) (o.dir = -o.dir), (o.f = cl(o.f, 8, FL - 8));\n  });\n  // Oscillatoria reverse when their front end runs out toward an edge.\n  each(P.osc, 2 + round(crowd), (o) => {\n    o.ph += d * 1.4;\n    go(o, o.v * d);\n    if ((o.x \u003c 6 || o.x > 58 || o.y \u003c 8 || o.y > 120) && cos(o.h) * (32 - o.x) + sin(o.h) * (64 - o.y) \u003c 0) o.h += PI;\n  });\n  each(P.vor, 5 + round(2 * crowd), (b) => ((b.cp += d * 7), cycle(b, d, 14, 0.13, 0.38, 0.5, 8)));\n  each(P.rot, 1 + round(crowd), (r) => ((r.cp += d * 9), cycle(r, d, 4, 0.5, 1.3, 1, 6)));\n  each(P.fla, 20 + round(24 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.h += rr(-2, 2)), (o.v = rr(5, 20)), (o.tt = rr(0.25, 1.4));\n    o.h += sin(o.ph + t * 3) * d * 1.2;\n    go(o, o.v * d);\n    wrap(o);\n  });\n  // The slow current carries grit and bacteria up and to the right, fastest\n  // midway between the coverslip (z -1) and the slide (z 1).\n  const j = sqrt(d * 30);\n  for (const [L, k, jj] of [[P.det, 28 + round(20 * crowd), 0.06], [P.bac, 460 + round(120 * crowd), 0.5]])\n    each(L, k, (o) => {\n      const f = 1 - o.z * o.z;\n      o.x += 1.7 * f * d + (rnd() - 0.5) * jj * j;\n      o.y -= f * d + (rnd() - 0.5) * jj * j;\n      if (o.m) rnd() \u003c d * 0.8 && (o.h += rr(-2.5, 2.5)), go(o, 9 * d);\n      wrap(o);\n    });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = (rd * cl(k[1], 0.2, 3)) / 2, l = cl(k[0], 0, 1);\n  (P.m1 = cl(l * 2, 0, 1)), (P.m2 = cl(l * 2 - 1, 0, 1)), (P.foc = cl(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) knock(P);\n  const t = (P.t += d);\n  // The stage is never quite still: a slow creep, a nudge now and then, and\n  // the shake of a knock.\n  if ((P.nt -= d) \u003c 0) (P.nt = rr(6, 11)), (P.nx = cl(P.nx + rr(-6, 6), -5, 5)), (P.ny = cl(P.ny + rr(-8, 8), -7, 7));\n  const e = min(1, d * 3), sh = P.ja * exp(-(P.jt += rd) * 5) * sin(P.jt * 40);\n  (P.ex += (P.nx - P.ex) * e), (P.ey += (P.ny - P.ey) * e);\n  P.ox = 2.5 * sin(t * 0.13 + P.s1) + 1.2 * sin(t * 0.31 + 2) + P.ex + sh * P.jx;\n  P.oy = 3.5 * sin(t * 0.09 + P.s2) + 1.5 * sin(t * 0.23) + P.ey + sh * P.jy;\n  life(P, d, cl(k[2], 0, 1), !P.init);\n  P.init = true;\n}\n\nfunction thread() {\n  dep(0);\n  col(C.wall);\n  for (const sd of [-2.6, 2.6]) {\n    lastP = -1;\n    for (let s = 0; s \u003c= FL; s += 0.7) fil(s), put(fx - fty * sd, fy + ftx * sd, 0.62, fty * fty - ftx * ftx);\n  }\n  for (let s = 5; s \u003c FL; s += 9) fil(s), line(fx - fty * 1.6, fy + ftx * 1.6, fx + fty * 1.6, fy - ftx * 1.6, 0.3);\n  // The chloroplast, a green ribbon winding round inside the cell wall.\n  col(C.chl);\n  for (let s = 0; s \u003c= FL; s += 1.3) fil(s), dot(fx - fty * 1.7 * sin(s * 0.5), fy + ftx * 1.7 * sin(s * 0.5), 0.5 + 0.25 * cos(s * 0.5));\n}\n\n// Frames a thing standing on the thread at arc length s, leaning by a.\nfunction foot(s, a) {\n  fil(s);\n  frame(fx + fty * 2.6, fy - ftx * 2.6, a);\n}\n\nfunction vorticella(b, i, t) {\n  foot(b.s, b.a + 0.07 * sin(t * 0.6 + i * 1.7));\n  const L = b.L * b.ext, amp = 2 * (1 - b.ext) ** 0.6, bend = 3 * sin(t * 0.45 + i) * b.ext, m = ceil(L * 1.5) + 4;\n  dep(0);\n  col(C.par, b.p);\n  // The stalk, straight while it feeds and a tight coil when it has snapped.\n  let x = FX, y = FY;\n  for (let j = 1; j \u003c= m; j++) {\n    const u = (j / m) * L, v = bend * sin((PI * j) / m) + amp * sin((j / m) * 6 * TAU), X = FX + u * FC - v * FS, Y = FY + u * FS + v * FC;\n    line(x, y, X, Y, 0.5);\n    (x = X), (y = Y);\n  }\n  // The bell, a cup that closes to a ball when the stalk snaps; the cilia\n  // whirl round its lip while it feeds.\n  frame(x, y, atan2(FS, FC));\n  const open = sm(0.55, 0.95, b.ext), lb = 6 + 2 * open;\n  const hwOf = (u) => {\n    const ball = 3.1 * sqrt(max(0, 1 - ((2 * u) / lb - 1) ** 2));\n    return ball + (0.8 + 4 * (u / lb) ** 0.9 - ball) * open;\n  };\n  col(C.vor, b.p);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= lb; u += 0.5) at(u, hwOf(u) * sd, 0.75);\n  }\n  for (let k = -1; k \u003c 2; k++) at(4.1 + k * 1.6, k * 1.2, 0.4, dot);\n  const hw = hwOf(lb);\n  if (open \u003c 0.1) return;\n  lastP = -1;\n  for (let k = 0; k \u003c 24; k++) at(lb + 1.3 * sin((k / 24) * TAU), hw * cos((k / 24) * TAU), 0.55 * open);\n  for (let k = 0; k \u003c 9; k++) {\n    const th = (k / 9) * TAU + b.cp, s = sin(th);\n    at(lb + 2.3 + 0.9 * s, (hw + 0.9) * cos(th), (s > 0 ? 0.85 : 0.35) * open, dot);\n  }\n}\n\nfunction rotifer(r, i, t) {\n  foot(r.s, r.a + 0.22 * sin(t * 0.4 + r.sw));\n  const L = r.L * r.ext, g = r.p, cr = sm(0.82, 0.97, r.ext);\n  dep(0);\n  col(C.rot, g);\n  // A foot of three telescoping joints, a swollen trunk, a neck, the head,\n  // and inside it the jaws of the mastax, chewing.\n  const hwOf = (u) => (u \u003c 0.36 ? 0.9 + 0.4 * floor(u / 0.12) : u \u003c 0.8 ? 2.1 + 2.5 * sin((PI * (u - 0.36)) / 0.44) : u \u003c 0.88 ? 2 : 2.9);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= L; u += 0.5) at(u, hwOf(u / L) * sd, 0.75);\n    at(-1.2, sd * 1.3, 0.7, dot);\n    at(0.72 * L, sd * (0.6 + 0.5 * sin(r.cp * 0.45)), 0.85, dot);\n  }\n  for (let k = 0; k \u003c 7; k++) at(L * (0.42 + 0.05 * k), 1.8 * sin(k * 2.4 + t * 0.6), 0.38 + 0.2 * sin(k * 1.7 + t * 2), dot);\n  // The crown: two discs of cilia whirling the opposite way to each other.\n  lastP = -1;\n  if (cr \u003c 0.02) for (let v = -2.8; v \u003c= 2.8; v += 0.7) at(L, v, 0.6);\n  else\n    for (const sd of [-1, 1]) {\n      const cx = FX + FC * (L + 1.8) - FS * sd * 2.9, cy = FY + FS * (L + 1.8) + FC * sd * 2.9;\n      ring(cx, cy, 2.4 * cr, 0.3 * cr);\n      for (let k = 0; k \u003c 10; k++) {\n        const th = (k / 10) * TAU + sd * r.cp;\n        dot(cx + cos(th) * 3.2 * cr, cy + sin(th) * 3.2 * cr, (0.55 + 0.45 * sin(th * 3 + t * 5)) * cr * g);\n      }\n    }\n}\n\nfunction volvox(o) {\n  const { x, y, R, pts } = o, g = o.p, ax = cos(o.h), ay = sin(o.h), c = cos(o.ph), s = sin(o.ph), c1 = 1 - c;\n  // Rolling about its swimming axis, which lies in the view plane (Rodrigues).\n  const rot = (px, py, pz, k) => {\n    const kd = (ax * px + ay * py) * c1, u = px * c + ay * pz * s + ax * kd, v = py * c - ax * pz * s + ay * kd;\n    return k ? dot(x + R * u, y + R * v, pz * c + (ax * py - ay * px) * s > 0 ? 0.85 : 0.5, u * u - v * v) : frame(x + R * u, y + R * v, 0);\n  };\n  dep(o.z);\n  col(C.cell, g);\n  for (let k = 0; k \u003c pts.length; k += 3) rot(pts[k], pts[k + 1], pts[k + 2], 1);\n  col(C.vrim, g);\n  ring(x, y, R + 0.4, 0.55);\n  // The faint diffraction fringe outside the rim.\n  ring(x, y, R + 2.6, 0.3);\n  col(C.dau, g);\n  for (const [px, py, pz, r] of o.d) rot(px, py, pz, 0), ring(FX, FY, r, 0.95), dot(FX, FY, 0.7);\n}\n\nfunction paramecium(o, i, t) {\n  const { a, B } = o, gs = cos(o.spin), n = ceil(TAU * sqrt((a * a + B * B) / 2) * 1.3);\n  frame(o.x, o.y, o.h);\n  dep(o.z);\n  col(C.par, o.p);\n  // Outline and cilia: a metachronal wave runs back along the body.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const th = (k / n) * TAU, ct = cos(th), st = sin(th), bw = B * (1 + 0.16 * ct - 0.08 * ct * ct), wv = sin(th * 9 - t * 10);\n      let nu = ct / a, nv = st / bw, nl = sqrt(nu * nu + nv * nv);\n      const nx = nu * FC - nv * FS, ny = nu * FS + nv * FC, q = (nx * nx - ny * ny) / (nl * nl);\n      (nu = (1.5 * nu) / nl), (nv = (1.5 * nv) / nl);\n      if (!pass) at(a * ct, bw * st, 0.62 + 0.25 * wv, put, q);\n      else if (wv > 0.2) at(a * ct + nu, bw * st + nv, 0.6 * wv, dot, q);\n    }\n  }\n  // The oral groove, a bright furrow from the front to the middle that swaps\n  // sides as the cell spins on its long axis.\n  lastP = -1;\n  for (let u = 0.05; u \u003c 0.62; u += 0.06) at(u * a, gs * B * (0.3 + 0.75 * u) * (u \u003c 0.5 ? 1 : 1 - (u - 0.5) * 6), 0.5 * abs(gs) + 0.12, put, 0);\n  // Granules and food vacuoles carried round by cyclosis, and the two\n  // contractile vacuoles filling and emptying.\n  col(C.gran, o.p);\n  for (let k = 0; k \u003c 23; k++) {\n    const th = k * 2.4 + o.cy * (k % 3 ? 0.6 : 1), r = 0.25 + 0.6 * ((k * 0.618) % 1);\n    at(0.8 * a * r * cos(th), 0.62 * B * r * sin(th), k % 3 ? 0.36 + 0.16 * sin(t * 3 + k) : 0.6, dot, 0);\n  }\n  col(C.par, o.p);\n  o.cv.forEach((c, j) => c > 0.31 && c \u003c 0.85 && ring(FX + (j ? -0.55 : 0.55) * a * FC, FY + (j ? -0.55 : 0.55) * a * FS, 1.6 * c, 0.55));\n}\n\nfunction diatom(o) {\n  const { a, B } = o;\n  if (o.f \u003c 0) frame(o.x, o.y, o.h);\n  else fil(o.f), frame(fx + fty * (3.4 + B), fy - ftx * (3.4 + B), atan2(fty, ftx));\n  dep(o.z);\n  col(C.dia, o.p);\n  // The rim glints at each stria; the raphe runs down the middle, broken at\n  // the central nodule.\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = -a; u \u003c= a; u += 0.6) at(u, sd * B * (1 - (u / a) ** 2) ** 0.75, 0.62 + 0.3 * cos(u * PI));\n  }\n  for (let u = -0.8 * a; u \u003c= 0.8 * a; u += 1.6) if (abs(u) > 1) at(u, 0, 0.6, dot);\n  at(0, 0, 0.8, dot);\n}\n\nfunction oscillatoria(o, i, t, OP) {\n  const n = o.L, hl = n / 2;\n  // The centre line, from the middle out to each end, bending as the ends wave.\n  for (const sd of [-1, 1]) {\n    let x = o.x, y = o.y;\n    for (let s = 1; s \u003c= hl; s++) {\n      const a = o.h + o.k * s * sd + 0.6 * sin(o.ph + sd) * (s / hl) ** 3;\n      (x += cos(a) * sd), (y += sin(a) * sd), (OP[(hl + s * sd) * 2] = x), (OP[(hl + s * sd) * 2 + 1] = y);\n    }\n  }\n  (OP[n] = o.x), (OP[n + 1] = o.y);\n  dep(o.z);\n  col(C.osc, o.p);\n  for (const e of [-1.2, 1.2]) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const x = OP[k * 2], y = OP[k * 2 + 1], dx = OP[k * 2 + 2] - x, dy = OP[k * 2 + 3] - y;\n      put(x - dy * e, y + dx * e, 0.6, dy * dy - dx * dx);\n    }\n  }\n  // Cross walls between the cells.\n  for (let k = 1; k \u003c n; k += 2) dot(OP[k * 2], OP[k * 2 + 1], 0.4);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  (S = P.S), (Q = P.Q), (ox = P.ox), (oy = P.oy), (foc = P.foc), (m1 = P.m1);\n  S.fill(0);\n  Q.fill(0);\n  const t = P.t, show = (L, f) => L.forEach((o, i) => o.p > 0.02 && f(o, i, t, P.OP));\n  thread();\n  show(P.vor, vorticella);\n  show(P.rot, rotifer);\n  show(P.dia, diatom);\n  show(P.osc, oscillatoria);\n  show(P.vol, volvox);\n  show(P.par, paramecium);\n  show(P.fla, (o) => {\n    const c = cos(o.h), s = sin(o.h);\n    dep(o.z);\n    col(o.k ? C.par : C.eug, o.p);\n    dot(o.x, o.y, 0.9);\n    dot(o.x - c * 1.2, o.y - s * 1.2, 0.55);\n    for (let k = 1; k \u003c= 3; k++) dot(o.x + c * (1 + k) - s * sin(t * 20 + k * 1.3) * 0.7, o.y + s * (1 + k) + c * sin(t * 20 + k * 1.3) * 0.7, 0.3);\n  });\n  show(P.det, (o) => {\n    dep(o.z);\n    col(o.k ? C.amb : C.gry, o.p);\n    for (const [dx, dy, s] of o.pts) dot(o.x + dx, o.y + dy, s);\n  });\n  col(C.par);\n  show(P.bac, (o) => (dep(o.z), dot(o.x, o.y, o.s * o.p)));\n  blur(Q, P.T);\n  // Light into LEDs, toned by the brightest channel so a green stays green,\n  // each lit LED with a grain of its own, and under it all the still grain\n  // of particles too small to resolve, below 24/255. The grain stays put:\n  // drawn anew every frame it was static, and it took the motion from 1.38\n  // to 2.31.\n  const m2 = P.m2, { V, L, QS } = P, c3 = K0;\n  for (let i = 0; i \u003c HW * HH; i++) QS[i] = Q[i * 3] + Q[i * 3 + 1] + Q[i * 3 + 2];\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      // The halo cell under the LED and its neighbours toward it, bilinear.\n      const o = p * 3, i = x >> 1, j = (y >> 1) * HW, i2 = cl(i + (x & 1) * 2 - 1, 0, HW - 1), j2 = cl((y >> 1) + (y & 1) * 2 - 1, 0, HH - 1) * HW;\n      const A = j + i, B = j + i2, c = j2 + i, e = j2 + i2, hl = QS[A] + QS[B] + QS[c] + QS[e] > 0, hh = h32(p, 7), sh = hh >>> 24;\n      for (let n = 0; n \u003c 3; n++) c3[n] = S[o + n] + (hl ? 0.17 * Q[A * 3 + n] + 0.056 * (Q[B * 3 + n] + Q[c * 3 + n]) + 0.019 * Q[e * 3 + n] : 0);\n      const mx = max(c3[0], c3[1], c3[2]), k = mx > 0.001 ? (LUT[min(1023, (mx * 256) | 0)] / mx) * (0.8 + sh / 640) : 0, l = (mx * k) / 255;\n      for (let n = 0, hb; n \u003c 3; n++) (hb = (hh >>> (n * 8)) & 255), (c3[n] = V[p] * (c3[n] * k * (1 + hb / 2200) + sh * (0.062 + (hb & 15) / 500) + m1 * FIELD[n]));\n      // Phase contrast: the field grey, each body darker than it, and a\n      // bright halo on the LEDs beside it.\n      if (m2) {\n        const dk = 1 - 0.8 * cl(l * 1.6, 0, 1), ha = max(0, max(L[p - (x > 0)], L[p + (x \u003c 63)], L[p - (y > 0) * W], L[p + (y \u003c 127) * W]) - l) * 160;\n        for (let n = 0; n \u003c 3; n++) c3[n] += m2 * (V[p] * (PHASE[n] * dk + ha + ((hh >>> (n * 8 + 3)) & 15)) - c3[n]);\n      }\n      L[p] = l;\n      display.setPixel(x, y, min(255, c3[0]) | 0, min(255, c3[1]) | 0, min(255, c3[2]) | 0);\n    }\n}\n","layer":{"id":"layer-dark-field","type":"code","name":"dark-field","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dark Field\n// Family:  microbe\n// Idea:    A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after dark-field and Rheinberg illumination in the light microscope\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1\n//\n// Knob 1: Light. At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos.\n// Knob 2: Speed. At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower.\n// Knob 3: Crowd. At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in.\n// Knob 4: Focus. Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit.\n// Buttons: K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.\n\nconst W = 64, H = 128, N = W * H, HW = 32, HH = 64;\nconst { min, max, floor, round, ceil, sin, cos, sqrt, exp, abs, PI, atan2 } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rr = (a, b) => a + (b - a) * rnd();\nfunction h32(a, b) {\n  let h = Math.imul(a ^ Math.imul(b, 0x27d4eb2d), 0x9e3779b1);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca77);\n  h ^= h >>> 13;\n  return (h ^ (h >>> 16)) >>> 0;\n}\n\n// Small things live on a torus a little larger than the view, so what leaves\n// one side comes back at the other out of sight. Big swimmers turn back\n// toward the middle near an edge.\nconst wrap = (o, m = 12) => ((o.x -= (W + 2 * m) * floor((o.x + m) / (W + 2 * m))), (o.y -= (H + 2 * m) * floor((o.y + m) / (H + 2 * m))));\nconst go = (o, v) => ((o.x += cos(o.h) * v), (o.y += sin(o.h) * v));\nfunction swim(o, d) {\n  if ((o.z += o.vz * d) > 1 || o.z \u003c -1) o.vz = -o.vz;\n  if (o.x > 8 && o.x \u003c 56 && o.y > 12 && o.y \u003c 116) return;\n  let e = atan2(64 - o.y, 32 - o.x) - o.h;\n  o.h += cl(e - TAU * round(e / TAU), -1, 1) * 1.2 * d;\n}\n// Colours each thing scatters in dark field.\nconst C = {\n  cell: [110, 255, 118], vrim: [175, 255, 165], dau: [64, 255, 92], par: [200, 222, 255], gran: [255, 236, 196], dia: [255, 194, 72],\n  vor: [222, 236, 255], rot: [255, 226, 186], eug: [132, 255, 140], amb: [255, 184, 100], gry: [212, 206, 198], wall: [205, 242, 182],\n  chl: [84, 236, 90], osc: [120, 250, 222],\n};\n// Rheinberg: an annular filter yellow at its sides and red top and bottom, so\n// an edge's colour follows the way it faces (q = nx² - ny²), on a blue field.\nconst RA = [255, 220, 46], RB = [255, 44, 40];\nconst RM = RA.map((v, i) => (v + RB[i]) / 2), RH = RA.map((v, i) => (v - RB[i]) / 2);\nconst FIELD = [4, 16, 60], PHASE = [74, 82, 72];\n\n// The algal thread, a Spirogyra filament across the lower third: its centre\n// at arc length s and its unit tangent.\nconst FL = 136;\nlet fx = 0, fy = 0, ftx = 1, fty = 0;\nfunction fil(s) {\n  const dy = -0.2 + 0.225 * cos(s * 0.045 + 0.3), l = sqrt(1 + dy * dy);\n  (fx = s - 30), (fy = 109 - 0.2 * s + 5 * sin(s * 0.045 + 0.3)), (ftx = 1 / l), (fty = dy / l);\n}\n\n// Light goes into a sharp buffer and, by how far the thing lies from the\n// focal plane, into a halo buffer at half resolution that is blurred and\n// spread back over the LEDs.\nlet S, Q, ox = 0, oy = 0, foc = 0, m1 = 0, wS = 1, wQ = 0, lastP = -1;\nconst K0 = [0, 0, 0], K1 = [0, 0, 0];\nfunction col(c, g = 1) {\n  for (let i = 0; i \u003c 3; i++) (K0[i] = (g * (c[i] + m1 * (RM[i] - c[i]))) / 255), (K1[i] = (g * m1 * RH[i]) / 255);\n}\nfunction dep(z) {\n  const b = max(0, abs(z - foc) - 0.15) * 2.4;\n  wS = max(0, 1 - b);\n  wQ = min(1, b) / (1 + 0.5 * max(0, b - 1));\n}\nfunction put(x, y, s, q = 0) {\n  const xi = round(x - ox), yi = round(y - oy), o = (yi * W + xi) * 3;\n  if (xi \u003c 0 || yi \u003c 0 || xi >= W || yi >= H || o === lastP) return;\n  lastP = o;\n  const r = s * (K0[0] + q * K1[0]), g = s * (K0[1] + q * K1[1]), b = s * (K0[2] + q * K1[2]), h = ((yi >> 1) * HW + (xi >> 1)) * 3;\n  if (wS) (S[o] += r * wS), (S[o + 1] += g * wS), (S[o + 2] += b * wS);\n  if (wQ) (Q[h] += r * wQ), (Q[h + 1] += g * wQ), (Q[h + 2] += b * wQ);\n}\n// A point: small things lose themselves out of focus, so less goes to the halo.\nfunction dot(x, y, s, q = 0) {\n  const k = wQ;\n  (lastP = -1), (wQ *= 0.4);\n  put(x, y, s, q);\n  wQ = k;\n}\nfunction line(x0, y0, x1, y1, s) {\n  const dx = x1 - x0, dy = y1 - y0, n = max(1, ceil(max(abs(dx), abs(dy)))), q = (dy * dy - dx * dx) / (dx * dx + dy * dy + 1e-6);\n  for (let k = 0; k \u003c n; k++) put(x0 + (dx * k) / n, y0 + (dy * k) / n, s, q);\n}\nfunction ring(cx, cy, r, s) {\n  lastP = -1;\n  for (let k = 0, n = max(8, ceil(TAU * r * 1.4)); k \u003c n; k++) {\n    const c = cos((k / n) * TAU), sn = sin((k / n) * TAU);\n    put(cx + r * c, cy + r * sn, s, c * c - sn * sn);\n  }\n}\n// A body's own frame: at(u, v) is u along its axis and v across it.\nlet FX = 0, FY = 0, FC = 1, FS = 0;\nconst frame = (x, y, a) => ((FX = x), (FY = y), (FC = cos(a)), (FS = sin(a)));\nconst at = (u, v, s, f = put, q = FS * FS - FC * FC) => f(FX + u * FC - v * FS, FY + u * FS + v * FC, s, q);\n// A three-wide box blur run twice, on the half-resolution grid.\nfunction blur(A, T) {\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [a, b, s, n] = pass & 1 ? [T, A, HW * 3, HH] : [A, T, 3, HW];\n    for (let y = 0, o = 0; y \u003c HH; y++)\n      for (let x = 0; x \u003c HW; x++)\n        for (let c = 0, i = pass & 1 ? y : x; c \u003c 3; c++, o++) b[o] = (a[o - (i > 0 ? s : 0)] + a[o] + a[o + (i \u003c n - 1 ? s : 0)]) / 3;\n  }\n}\n// Light to LED level: black below 0.1, a gain of 3, a soft shoulder above 0.8.\nconst LUT = Float32Array.from({ length: 1024 }, (_, i) => {\n  const v = max(0, i / 256 - 0.1) * 3;\n  return 255 * (v \u003c 0.8 ? v : 1 - 0.2 * exp(-(v - 0.8) / 0.2));\n});\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), side = () => (rnd() \u003c 0.5 ? -1 : 1), A = (n, f) => Array.from({ length: n }, (_, i) => ({ x: rr(-12, 76), y: rr(-12, 140), h: rnd() * TAU, ...f(i) }));\n  const P = (params.s = { t: 0, S: F(N * 3), Q: F(HW * HH * 3), T: F(HW * HH * 3), QS: F(HW * HH), L: F(N), V: F(N), OP: F(140), nx: 0, ny: 0, ex: 0, ey: 0, nt: 3.2, ja: 0, jt: 9, jx: 0, jy: 0, s1: rnd() * 7, s2: rnd() * 7 });\n  // The round field stop of the eyepiece clips the panel's two ends.\n  for (let p = 0; p \u003c N; p++) P.V[p] = sm(67.5, 62, sqrt(((p & 63) - 31.5) ** 2 + (((p >> 6) - 63.5) * 1.02) ** 2));\n  // Volvox: cells on a sphere (a Fibonacci spiral) and daughter colonies inside.\n  P.vol = [[0.18, 12, 21], [-0.8, 9, 57], [0.2, 9.5, 112], [0.62, 11, 80]].map(([z, R, y]) => {\n    const n = round(0.7 * R * R), pts = F(n * 3), d = [];\n    for (let k = 0; k \u003c n; k++) {\n      const yv = 1 - (2 * k + 1) / n, q = sqrt(1 - yv * yv);\n      pts.set([cos(k * 2.4) * q, yv, sin(k * 2.4) * q], k * 3);\n    }\n    for (let k = 0, m = 3 + rnd() * 3; k \u003c m; k++) {\n      const a = rnd() * TAU, b = rr(-1, 1), r = rr(0.2, 0.52), q = sqrt(1 - b * b) * r;\n      d.push([cos(a) * q, b * r, sin(a) * q, rr(0.17, 0.25) * R]);\n    }\n    return { x: rr(16, 48), y: y + rr(-9, 9), z, vz: rr(-0.025, 0.025), R, h: rnd() * TAU, v: rr(1.6, 2.8), ph: 0, w: rr(0.4, 0.7) * side(), pts, d };\n  });\n  // Paramecia: slippers with an oral groove that swaps sides as they spin.\n  P.par = [[0.05, 42], [0.14, 115], [-0.12, 70], [0.75, 20], [-0.85, 92]].map(([z, y]) => ({\n    x: rr(14, 50), y: y + rr(-10, 10), z, vz: rr(-0.05, 0.05), h: rnd() * TAU, v: rr(8, 11), a: rr(11.5, 13.5), B: rr(4.4, 5.2), spin: 0, ws: rr(1.6, 2.4),\n    rev: 0, tt: rr(3, 8), cy: 0, cv: [rnd(), rnd()],\n  }));\n  // Diatoms: two glide along the thread, two on floating debris, the rest on\n  // the slide's glass, deeper down.\n  P.dia = A(9, (i) => ({ z: i \u003c 2 ? 0 : i \u003c 4 ? rr(-0.05, 0.2) : rr(0.75, 0.92), a: rr(6, 9), B: rr(2.1, 2.6), go: rnd() \u003c 0.6, tt: rr(0.5, 3), dir: side(), v: rr(3.5, 6), f: i \u003c 2 ? 44 + 34 * i + rr(-6, 6) : -1 }));\n  // Oscillatoria: blue-green threads that glide along their length and wave both ends.\n  P.osc = [[18, 17, -0.04], [46, 40, 0.1], [30, 117, 0.3]].map(([x, y, z], i) => ({ x: x + rr(-9, 9), y: y + rr(-9, 9), z, h: rr(-0.6, 0.6) + (i & 1) * PI, L: 2 * round(rr(17, 24)), k: rr(-0.015, 0.015), ph: rnd() * 7, v: rr(1.2, 2.2) }));\n  // Vorticella bells on the thread: anchor, lean, stalk length. Bell 0 snaps first.\n  P.vor = [[46, -0.22, 46], [50, 0.16, 36], [41, -0.55, 30], [56, 0.45, 42], [36, -0.05, 52], [62, 0.1, 28], [30, -0.4, 40]].map(([s, a, L], i) => ({ s, a: a - PI / 2, L, ext: 1, st: 0, tt: i ? rr(9, 18) : 4.1, cp: 0 }));\n  P.rot = [[84, -2.05], [16, -1.15]].map(([s, a]) => ({ s, a, L: 21, ext: 1, st: 0, tt: rr(7, 12), cp: 0, sw: rnd() * 7 }));\n  P.fla = A(44, (i) => ({ z: rr(-0.9, 0.9), v: rr(6, 18), tt: 0, k: i % 3, ph: rnd() * 7 }));\n  // Detritus: grains and glittering flakes, amber plant matter or grey grit,\n  // a third of it settled on the slide. Bacteria: points crowding near the\n  // thread they feed on, most jiggling, some swimming.\n  P.det = A(48, (i) => {\n    const pts = [], m = 1 + floor(rnd() * rnd() * 9), e = m > 3 ? 2 : 1;\n    for (let k = 0; k \u003c m; k++) pts.push([e * round(rr(-1.5, 1.5)), e * round(rr(-1.5, 1.5)), rr(0.35, 0.8)]);\n    return { z: i % 3 ? rr(-1, 1) * rnd() : rr(0.8, 1), pts, k: rnd() \u003c 0.55 };\n  });\n  P.bac = A(580, () => ({ z: rr(-1, 1) * rnd(), s: rr(0.4, 0.8), m: rnd() \u003c 0.3 }));\n}\n\n// Knocking the slide.\nfunction knock(P) {\n  const a = rnd() * TAU;\n  (P.ja = 3.5), (P.jt = 0), (P.jx = cos(a)), (P.jy = sin(a));\n  for (const o of [...P.vor, ...P.rot]) if (o.st !== 1) o.st = 1;\n  for (const o of P.par) (o.rev = 0.6), (o.tr = rr(-3, 3));\n  for (const o of [...P.vol, ...P.fla, ...P.det]) (o.x += P.jx * rr(1, 4)), (o.y += P.jy * rr(1, 4));\n}\n\n// A stalk or body that waits and snaps in to lo. It holds there, then stretches out again.\nfunction cycle(o, d, down, lo, up, hold, wait) {\n  if (o.st === 0 && (o.tt -= d) \u003c 0) o.st = 1;\n  else if (o.st === 1 && (o.ext -= d * down) \u003c= lo) (o.ext = lo), (o.st = 2), (o.tt = hold * rr(1, 2));\n  else if (o.st === 2 && (o.tt -= d) \u003c 0) o.st = 3;\n  else if (o.st === 3 && (o.ext += d * up * (1.12 - o.ext)) >= 1) (o.ext = 1), (o.st = 0), (o.tt = wait * rr(1, 2.2));\n}\n\nfunction life(P, d, crowd, first) {\n  // Each kind fades its members in and out by the Crowd knob.\n  const each = (L, k, f) =>\n    L.forEach((o, i) => {\n      const tg = i \u003c k ? 1 : 0;\n      o.p = first ? tg : o.p + (tg - o.p) * min(1, d * 2.5);\n      f(o, i);\n    });\n  const t = P.t;\n  each(P.vol, 3 + round(crowd), (o, i) => {\n    o.h += sin(t * 0.21 + i * 2) * 0.15 * d;\n    go(o, o.v * d);\n    o.ph += o.w * d;\n    swim(o, d);\n  });\n  each(P.par, 3 + round(2 * crowd), (o, i) => {\n    o.spin += o.ws * d;\n    if (o.rev > 0) (o.rev -= d), (o.h += o.tr * d), go(o, -o.v * 0.5 * d);\n    else {\n      o.h += sin(t * 0.5 + i * 2.3) * 0.25 * d;\n      if ((o.tt -= d) \u003c 0) (o.rev = 0.7), (o.tr = rr(-3, 3)), (o.tt = rr(4, 9));\n      go(o, o.v * d);\n    }\n    o.cy += d * 0.7;\n    (o.cv[0] = (o.cv[0] + d * 0.24) % 1), (o.cv[1] = (o.cv[1] + d * 0.21) % 1);\n    swim(o, d);\n  });\n  // Diatoms glide on their raphe and stop. Then they set off again, often backwards.\n  each(P.dia, 5 + round(4 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.go = !o.go), (o.tt = o.go ? rr(2, 4) : rr(0.8, 2.2)), o.go && rnd() \u003c 0.4 && (o.dir = -o.dir);\n    const v = o.go ? o.v * o.dir * d * sm(0, 0.4, o.tt) : 0;\n    if (o.f \u003c 0) go(o, v), wrap(o);\n    else if ((o.f += v) \u003c 8 || o.f > FL - 8) (o.dir = -o.dir), (o.f = cl(o.f, 8, FL - 8));\n  });\n  // Oscillatoria reverse when their front end runs out toward an edge.\n  each(P.osc, 2 + round(crowd), (o) => {\n    o.ph += d * 1.4;\n    go(o, o.v * d);\n    if ((o.x \u003c 6 || o.x > 58 || o.y \u003c 8 || o.y > 120) && cos(o.h) * (32 - o.x) + sin(o.h) * (64 - o.y) \u003c 0) o.h += PI;\n  });\n  each(P.vor, 5 + round(2 * crowd), (b) => ((b.cp += d * 7), cycle(b, d, 14, 0.13, 0.38, 0.5, 8)));\n  each(P.rot, 1 + round(crowd), (r) => ((r.cp += d * 9), cycle(r, d, 4, 0.5, 1.3, 1, 6)));\n  each(P.fla, 20 + round(24 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.h += rr(-2, 2)), (o.v = rr(5, 20)), (o.tt = rr(0.25, 1.4));\n    o.h += sin(o.ph + t * 3) * d * 1.2;\n    go(o, o.v * d);\n    wrap(o);\n  });\n  // The slow current carries grit and bacteria up and to the right, fastest\n  // midway between the coverslip (z -1) and the slide (z 1).\n  const j = sqrt(d * 30);\n  for (const [L, k, jj] of [[P.det, 28 + round(20 * crowd), 0.06], [P.bac, 460 + round(120 * crowd), 0.5]])\n    each(L, k, (o) => {\n      const f = 1 - o.z * o.z;\n      o.x += 1.7 * f * d + (rnd() - 0.5) * jj * j;\n      o.y -= f * d + (rnd() - 0.5) * jj * j;\n      if (o.m) rnd() \u003c d * 0.8 && (o.h += rr(-2.5, 2.5)), go(o, 9 * d);\n      wrap(o);\n    });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = (rd * cl(k[1], 0.2, 3)) / 2, l = cl(k[0], 0, 1);\n  (P.m1 = cl(l * 2, 0, 1)), (P.m2 = cl(l * 2 - 1, 0, 1)), (P.foc = cl(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) knock(P);\n  const t = (P.t += d);\n  // The stage is never quite still: a slow creep, a nudge now and then, and\n  // the shake of a knock.\n  if ((P.nt -= d) \u003c 0) (P.nt = rr(6, 11)), (P.nx = cl(P.nx + rr(-6, 6), -5, 5)), (P.ny = cl(P.ny + rr(-8, 8), -7, 7));\n  const e = min(1, d * 3), sh = P.ja * exp(-(P.jt += rd) * 5) * sin(P.jt * 40);\n  (P.ex += (P.nx - P.ex) * e), (P.ey += (P.ny - P.ey) * e);\n  P.ox = 2.5 * sin(t * 0.13 + P.s1) + 1.2 * sin(t * 0.31 + 2) + P.ex + sh * P.jx;\n  P.oy = 3.5 * sin(t * 0.09 + P.s2) + 1.5 * sin(t * 0.23) + P.ey + sh * P.jy;\n  life(P, d, cl(k[2], 0, 1), !P.init);\n  P.init = true;\n}\n\nfunction thread() {\n  dep(0);\n  col(C.wall);\n  for (const sd of [-2.6, 2.6]) {\n    lastP = -1;\n    for (let s = 0; s \u003c= FL; s += 0.7) fil(s), put(fx - fty * sd, fy + ftx * sd, 0.62, fty * fty - ftx * ftx);\n  }\n  for (let s = 5; s \u003c FL; s += 9) fil(s), line(fx - fty * 1.6, fy + ftx * 1.6, fx + fty * 1.6, fy - ftx * 1.6, 0.3);\n  // The chloroplast, a green ribbon winding round inside the cell wall.\n  col(C.chl);\n  for (let s = 0; s \u003c= FL; s += 1.3) fil(s), dot(fx - fty * 1.7 * sin(s * 0.5), fy + ftx * 1.7 * sin(s * 0.5), 0.5 + 0.25 * cos(s * 0.5));\n}\n\n// Frames a thing standing on the thread at arc length s, leaning by a.\nfunction foot(s, a) {\n  fil(s);\n  frame(fx + fty * 2.6, fy - ftx * 2.6, a);\n}\n\nfunction vorticella(b, i, t) {\n  foot(b.s, b.a + 0.07 * sin(t * 0.6 + i * 1.7));\n  const L = b.L * b.ext, amp = 2 * (1 - b.ext) ** 0.6, bend = 3 * sin(t * 0.45 + i) * b.ext, m = ceil(L * 1.5) + 4;\n  dep(0);\n  col(C.par, b.p);\n  // The stalk, straight while it feeds and a tight coil when it has snapped.\n  let x = FX, y = FY;\n  for (let j = 1; j \u003c= m; j++) {\n    const u = (j / m) * L, v = bend * sin((PI * j) / m) + amp * sin((j / m) * 6 * TAU), X = FX + u * FC - v * FS, Y = FY + u * FS + v * FC;\n    line(x, y, X, Y, 0.5);\n    (x = X), (y = Y);\n  }\n  // The bell, a cup that closes to a ball when the stalk snaps; the cilia\n  // whirl round its lip while it feeds.\n  frame(x, y, atan2(FS, FC));\n  const open = sm(0.55, 0.95, b.ext), lb = 6 + 2 * open;\n  const hwOf = (u) => {\n    const ball = 3.1 * sqrt(max(0, 1 - ((2 * u) / lb - 1) ** 2));\n    return ball + (0.8 + 4 * (u / lb) ** 0.9 - ball) * open;\n  };\n  col(C.vor, b.p);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= lb; u += 0.5) at(u, hwOf(u) * sd, 0.75);\n  }\n  for (let k = -1; k \u003c 2; k++) at(4.1 + k * 1.6, k * 1.2, 0.4, dot);\n  const hw = hwOf(lb);\n  if (open \u003c 0.1) return;\n  lastP = -1;\n  for (let k = 0; k \u003c 24; k++) at(lb + 1.3 * sin((k / 24) * TAU), hw * cos((k / 24) * TAU), 0.55 * open);\n  for (let k = 0; k \u003c 9; k++) {\n    const th = (k / 9) * TAU + b.cp, s = sin(th);\n    at(lb + 2.3 + 0.9 * s, (hw + 0.9) * cos(th), (s > 0 ? 0.85 : 0.35) * open, dot);\n  }\n}\n\nfunction rotifer(r, i, t) {\n  foot(r.s, r.a + 0.22 * sin(t * 0.4 + r.sw));\n  const L = r.L * r.ext, g = r.p, cr = sm(0.82, 0.97, r.ext);\n  dep(0);\n  col(C.rot, g);\n  // A foot of three telescoping joints, a swollen trunk, a neck, the head,\n  // and inside it the jaws of the mastax, chewing.\n  const hwOf = (u) => (u \u003c 0.36 ? 0.9 + 0.4 * floor(u / 0.12) : u \u003c 0.8 ? 2.1 + 2.5 * sin((PI * (u - 0.36)) / 0.44) : u \u003c 0.88 ? 2 : 2.9);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= L; u += 0.5) at(u, hwOf(u / L) * sd, 0.75);\n    at(-1.2, sd * 1.3, 0.7, dot);\n    at(0.72 * L, sd * (0.6 + 0.5 * sin(r.cp * 0.45)), 0.85, dot);\n  }\n  for (let k = 0; k \u003c 7; k++) at(L * (0.42 + 0.05 * k), 1.8 * sin(k * 2.4 + t * 0.6), 0.38 + 0.2 * sin(k * 1.7 + t * 2), dot);\n  // The crown: two discs of cilia whirling the opposite way to each other.\n  lastP = -1;\n  if (cr \u003c 0.02) for (let v = -2.8; v \u003c= 2.8; v += 0.7) at(L, v, 0.6);\n  else\n    for (const sd of [-1, 1]) {\n      const cx = FX + FC * (L + 1.8) - FS * sd * 2.9, cy = FY + FS * (L + 1.8) + FC * sd * 2.9;\n      ring(cx, cy, 2.4 * cr, 0.3 * cr);\n      for (let k = 0; k \u003c 10; k++) {\n        const th = (k / 10) * TAU + sd * r.cp;\n        dot(cx + cos(th) * 3.2 * cr, cy + sin(th) * 3.2 * cr, (0.55 + 0.45 * sin(th * 3 + t * 5)) * cr * g);\n      }\n    }\n}\n\nfunction volvox(o) {\n  const { x, y, R, pts } = o, g = o.p, ax = cos(o.h), ay = sin(o.h), c = cos(o.ph), s = sin(o.ph), c1 = 1 - c;\n  // Rolling about its swimming axis, which lies in the view plane (Rodrigues).\n  const rot = (px, py, pz, k) => {\n    const kd = (ax * px + ay * py) * c1, u = px * c + ay * pz * s + ax * kd, v = py * c - ax * pz * s + ay * kd;\n    return k ? dot(x + R * u, y + R * v, pz * c + (ax * py - ay * px) * s > 0 ? 0.85 : 0.5, u * u - v * v) : frame(x + R * u, y + R * v, 0);\n  };\n  dep(o.z);\n  col(C.cell, g);\n  for (let k = 0; k \u003c pts.length; k += 3) rot(pts[k], pts[k + 1], pts[k + 2], 1);\n  col(C.vrim, g);\n  ring(x, y, R + 0.4, 0.55);\n  // The faint diffraction fringe outside the rim.\n  ring(x, y, R + 2.6, 0.3);\n  col(C.dau, g);\n  for (const [px, py, pz, r] of o.d) rot(px, py, pz, 0), ring(FX, FY, r, 0.95), dot(FX, FY, 0.7);\n}\n\nfunction paramecium(o, i, t) {\n  const { a, B } = o, gs = cos(o.spin), n = ceil(TAU * sqrt((a * a + B * B) / 2) * 1.3);\n  frame(o.x, o.y, o.h);\n  dep(o.z);\n  col(C.par, o.p);\n  // Outline and cilia: a metachronal wave runs back along the body.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const th = (k / n) * TAU, ct = cos(th), st = sin(th), bw = B * (1 + 0.16 * ct - 0.08 * ct * ct), wv = sin(th * 9 - t * 10);\n      let nu = ct / a, nv = st / bw, nl = sqrt(nu * nu + nv * nv);\n      const nx = nu * FC - nv * FS, ny = nu * FS + nv * FC, q = (nx * nx - ny * ny) / (nl * nl);\n      (nu = (1.5 * nu) / nl), (nv = (1.5 * nv) / nl);\n      if (!pass) at(a * ct, bw * st, 0.62 + 0.25 * wv, put, q);\n      else if (wv > 0.2) at(a * ct + nu, bw * st + nv, 0.6 * wv, dot, q);\n    }\n  }\n  // The oral groove, a bright furrow from the front to the middle that swaps\n  // sides as the cell spins on its long axis.\n  lastP = -1;\n  for (let u = 0.05; u \u003c 0.62; u += 0.06) at(u * a, gs * B * (0.3 + 0.75 * u) * (u \u003c 0.5 ? 1 : 1 - (u - 0.5) * 6), 0.5 * abs(gs) + 0.12, put, 0);\n  // Granules and food vacuoles carried round by cyclosis, and the two\n  // contractile vacuoles filling and emptying.\n  col(C.gran, o.p);\n  for (let k = 0; k \u003c 23; k++) {\n    const th = k * 2.4 + o.cy * (k % 3 ? 0.6 : 1), r = 0.25 + 0.6 * ((k * 0.618) % 1);\n    at(0.8 * a * r * cos(th), 0.62 * B * r * sin(th), k % 3 ? 0.36 + 0.16 * sin(t * 3 + k) : 0.6, dot, 0);\n  }\n  col(C.par, o.p);\n  o.cv.forEach((c, j) => c > 0.31 && c \u003c 0.85 && ring(FX + (j ? -0.55 : 0.55) * a * FC, FY + (j ? -0.55 : 0.55) * a * FS, 1.6 * c, 0.55));\n}\n\nfunction diatom(o) {\n  const { a, B } = o;\n  if (o.f \u003c 0) frame(o.x, o.y, o.h);\n  else fil(o.f), frame(fx + fty * (3.4 + B), fy - ftx * (3.4 + B), atan2(fty, ftx));\n  dep(o.z);\n  col(C.dia, o.p);\n  // The rim glints at each stria; the raphe runs down the middle, broken at\n  // the central nodule.\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = -a; u \u003c= a; u += 0.6) at(u, sd * B * (1 - (u / a) ** 2) ** 0.75, 0.62 + 0.3 * cos(u * PI));\n  }\n  for (let u = -0.8 * a; u \u003c= 0.8 * a; u += 1.6) if (abs(u) > 1) at(u, 0, 0.6, dot);\n  at(0, 0, 0.8, dot);\n}\n\nfunction oscillatoria(o, i, t, OP) {\n  const n = o.L, hl = n / 2;\n  // The centre line, from the middle out to each end, bending as the ends wave.\n  for (const sd of [-1, 1]) {\n    let x = o.x, y = o.y;\n    for (let s = 1; s \u003c= hl; s++) {\n      const a = o.h + o.k * s * sd + 0.6 * sin(o.ph + sd) * (s / hl) ** 3;\n      (x += cos(a) * sd), (y += sin(a) * sd), (OP[(hl + s * sd) * 2] = x), (OP[(hl + s * sd) * 2 + 1] = y);\n    }\n  }\n  (OP[n] = o.x), (OP[n + 1] = o.y);\n  dep(o.z);\n  col(C.osc, o.p);\n  for (const e of [-1.2, 1.2]) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const x = OP[k * 2], y = OP[k * 2 + 1], dx = OP[k * 2 + 2] - x, dy = OP[k * 2 + 3] - y;\n      put(x - dy * e, y + dx * e, 0.6, dy * dy - dx * dx);\n    }\n  }\n  // Cross walls between the cells.\n  for (let k = 1; k \u003c n; k += 2) dot(OP[k * 2], OP[k * 2 + 1], 0.4);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  (S = P.S), (Q = P.Q), (ox = P.ox), (oy = P.oy), (foc = P.foc), (m1 = P.m1);\n  S.fill(0);\n  Q.fill(0);\n  const t = P.t, show = (L, f) => L.forEach((o, i) => o.p > 0.02 && f(o, i, t, P.OP));\n  thread();\n  show(P.vor, vorticella);\n  show(P.rot, rotifer);\n  show(P.dia, diatom);\n  show(P.osc, oscillatoria);\n  show(P.vol, volvox);\n  show(P.par, paramecium);\n  show(P.fla, (o) => {\n    const c = cos(o.h), s = sin(o.h);\n    dep(o.z);\n    col(o.k ? C.par : C.eug, o.p);\n    dot(o.x, o.y, 0.9);\n    dot(o.x - c * 1.2, o.y - s * 1.2, 0.55);\n    for (let k = 1; k \u003c= 3; k++) dot(o.x + c * (1 + k) - s * sin(t * 20 + k * 1.3) * 0.7, o.y + s * (1 + k) + c * sin(t * 20 + k * 1.3) * 0.7, 0.3);\n  });\n  show(P.det, (o) => {\n    dep(o.z);\n    col(o.k ? C.amb : C.gry, o.p);\n    for (const [dx, dy, s] of o.pts) dot(o.x + dx, o.y + dy, s);\n  });\n  col(C.par);\n  show(P.bac, (o) => (dep(o.z), dot(o.x, o.y, o.s * o.p)));\n  blur(Q, P.T);\n  // Light into LEDs, toned by the brightest channel so a green stays green,\n  // each lit LED with a grain of its own, and under it all the still grain\n  // of particles too small to resolve, below 24/255. The grain stays put:\n  // drawn anew every frame it was static, and it took the motion from 1.38\n  // to 2.31.\n  const m2 = P.m2, { V, L, QS } = P, c3 = K0;\n  for (let i = 0; i \u003c HW * HH; i++) QS[i] = Q[i * 3] + Q[i * 3 + 1] + Q[i * 3 + 2];\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      // The halo cell under the LED and its neighbours toward it, bilinear.\n      const o = p * 3, i = x >> 1, j = (y >> 1) * HW, i2 = cl(i + (x & 1) * 2 - 1, 0, HW - 1), j2 = cl((y >> 1) + (y & 1) * 2 - 1, 0, HH - 1) * HW;\n      const A = j + i, B = j + i2, c = j2 + i, e = j2 + i2, hl = QS[A] + QS[B] + QS[c] + QS[e] > 0, hh = h32(p, 7), sh = hh >>> 24;\n      for (let n = 0; n \u003c 3; n++) c3[n] = S[o + n] + (hl ? 0.17 * Q[A * 3 + n] + 0.056 * (Q[B * 3 + n] + Q[c * 3 + n]) + 0.019 * Q[e * 3 + n] : 0);\n      const mx = max(c3[0], c3[1], c3[2]), k = mx > 0.001 ? (LUT[min(1023, (mx * 256) | 0)] / mx) * (0.8 + sh / 640) : 0, l = (mx * k) / 255;\n      for (let n = 0, hb; n \u003c 3; n++) (hb = (hh >>> (n * 8)) & 255), (c3[n] = V[p] * (c3[n] * k * (1 + hb / 2200) + sh * (0.062 + (hb & 15) / 500) + m1 * FIELD[n]));\n      // Phase contrast: the field grey, each body darker than it, and a\n      // bright halo on the LEDs beside it.\n      if (m2) {\n        const dk = 1 - 0.8 * cl(l * 1.6, 0, 1), ha = max(0, max(L[p - (x > 0)], L[p + (x \u003c 63)], L[p - (y > 0) * W], L[p + (y \u003c 127) * W]) - l) * 160;\n        for (let n = 0; n \u003c 3; n++) c3[n] += m2 * (V[p] * (PHASE[n] * dk + ha + ((hh >>> (n * 8 + 3)) & 15)) - c3[n]);\n      }\n      L[p] = l;\n      display.setPixel(x, y, min(255, c3[0]) | 0, min(255, c3[1]) | 0, min(255, c3[2]) | 0);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower."},{"name":"Crowd","min":0,"max":1,"about":"At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in."},{"name":"Focus","min":-1,"max":1,"about":"Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit."}],"start":[0,2,0,0.06],"measures":{"motion":1.3814,"detail":0.2217,"edges":0.4142,"complexity":2.0815,"coverage":0.2631,"colour":0.1726,"drift":0.1456},"knobResponse":[0.5278,0.261,0.0556,0.1832]},{"slug":"datamosh","title":"Datamosh","family":"glitch","round":15,"note":"키프레임을 잃은 영상이에요. 노을과 격자 바닥이 제 움직임대로 블록째 밀려 녹아 흐르고, 장면이 바뀌면 새 그림이 옛 움직임을 따라 부서져요.","idea":"A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.","buttons":"K1 tap drops a whole clean keyframe, which then melts.","code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","layer":{"id":"layer-datamosh","type":"code","name":"datamosh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second."},{"name":"Block","min":8,"max":16,"about":"The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame."},{"name":"Mosh","min":0,"max":1,"about":"How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1."}],"start":[0,2,8,0.06],"measures":{"motion":0.3661,"detail":0.0404,"edges":0.6611,"complexity":0.3641,"coverage":1,"colour":0.4625,"drift":0.1386},"knobResponse":[0.3092,0.1339,0.1128,0.1158]},{"slug":"day-cycle","title":"Day and Night","family":"weather","round":2,"note":"호수 위 작은 집이 하루를 지켜봐요. 해가 언덕 뒤로 지면 하늘이 노을을 지나 별과 달로 넘어가고 창에 하나씩 불이 켜져요.","idea":"A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","layer":{"id":"layer-day-cycle","type":"code","name":"day-cycle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof."},{"name":"Time","min":0.2,"max":8,"about":"How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts."},{"name":"Clouds","min":0.15,"max":1,"about":"From a few small clouds to a sky that is nearly overcast."},{"name":"Sun path","min":-1,"max":1,"about":"How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.0549,"detail":0.0184,"edges":0.5425,"complexity":0.6376,"coverage":1,"colour":0.3226,"drift":0.2553},"knobResponse":[0.2229,0.2763,0.1419,0.1052]},{"slug":"domain-warp","title":"Domain Warp","family":"noise","round":1,"note":"노이즈가 제 자신을 비틀어서 어두운 쪽빛 돌에 금빛 결이 흘러요. 대리석을 붓는 것처럼 천천히 뒤섞여요.","idea":"Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n// @ramp oklab wrap 0:#05030f 0.16:#0e1450 0.22:#2a7ac0 0.27:#100c44 0.5:#2c1478 0.62:#c83888 0.68:#ffd890 0.74:#ff6a3a 0.84:#4a0a3a 1:#05030f\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","layer":{"id":"layer-domain-warp","type":"code","name":"domain-warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#05030f","alpha":1},{"position":0.16,"color":"#0e1450","alpha":1},{"position":0.22,"color":"#2a7ac0","alpha":1},{"position":0.27,"color":"#100c44","alpha":1},{"position":0.5,"color":"#2c1478","alpha":1},{"position":0.62,"color":"#c83888","alpha":1},{"position":0.68,"color":"#ffd890","alpha":1},{"position":0.74,"color":"#ff6a3a","alpha":1},{"position":0.84,"color":"#4a0a3a","alpha":1},{"position":1,"color":"#05030f","alpha":1}],"mode":"oklab","wrap":true},"recolor":false,"knobsAnnotationRaw":"// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Cycle","min":0,"max":1,"about":"Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back."},{"name":"Speed","min":0,"max":5,"about":"How fast the marble pours; 0 holds it still."},{"name":"Warp","min":1,"max":6,"about":"How hard the noise is folded into itself, from loose marble to tight swirls."},{"name":"Zoom","min":0.035,"max":0.095,"about":"Size of the stone; low is a few big swirls, high is fine grain."}],"start":[0,2,1,0.06],"measures":{"motion":0.2428,"detail":0.0806,"edges":0.2816,"complexity":1.8069,"coverage":0.9604,"colour":0.3247,"drift":0.15},"knobResponse":[0.3352,0.1929,0.1917,0.2107]},{"slug":"domino-run","title":"Domino Run","family":"physics","round":16,"note":"여섯 선반과 나선 계단 다섯을 잇는 도미노 마흔 개를 손끝이 밀면, 물결이 제 물리 빠르기로 내려가고 낮은 램프 빛을 받던 상아색 면이 쓰러지는 대로 어두워져요. 다 쓰러지면 필름이 거꾸로 돌아 줄을 다시 세워요. 줄이 달리는 동안 K1 을 누르면 아직 서 있는 선반 머리에서 두 번째 물결이 떠나요.","idea":"A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.","buttons":"K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.","code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","layer":{"id":"layer-domino-run","type":"code","name":"domino-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed."},{"name":"Spacing","min":-1,"max":1,"about":"The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall."},{"name":"Angle","min":-1,"max":1,"about":"Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves."}],"start":[0,2,0,0.06],"measures":{"motion":0.1541,"detail":0.079,"edges":0.5891,"complexity":0.4474,"coverage":0.2699,"colour":0.0868,"drift":0.2609},"knobResponse":[0.2214,0.1713,0.2211,0.2694]},{"slug":"dragon","title":"Dragon Fold","family":"fractal","round":2,"note":"종이띠를 반으로 접기를 열 번 되풀이하면 헤이웨이 드래곤이 돼요. 세대마다 선 전체의 복사본이 끝점을 축으로 90도 돌아 나오고, 다 접히면 거꾸로 닫혀요.","idea":"A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.","buttons":"K1 tap turns the folding round, so it closes up or opens out from where it is.","code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-dragon","type":"code","name":"dragon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour that runs along the line starts."},{"name":"Fold Speed","min":0.5,"max":6,"about":"How quickly one generation swings out of the last."},{"name":"Generations","min":8,"max":10,"about":"How many folds before it holds, from 256 segments to 1024."},{"name":"Dragons","min":1,"max":4,"about":"One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point."}],"start":[0,2,8,1],"measures":{"motion":0.7649,"detail":0.0834,"edges":0.9552,"complexity":0.1947,"coverage":0.1168,"colour":0.2214,"drift":0.0797},"knobResponse":[0.0573,0.0725,0.0977,0.1563]},{"slug":"dripstone","title":"Dripstone","family":"mineral","round":19,"note":"석회동굴 단면이 128줄을 다 써요. 종유석 끝에서 물방울이 부풀다 떨어져 석순을 한 방울씩 키우고 웅덩이에 동심원을 그리는 사이, 쇼케이브 조명이 청록과 보라, 흰빛으로 번갈아 바뀌고 동굴 탐험가의 헤드램프가 옆으로 훑고 지나가요.","idea":"A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","layer":{"id":"layer-dripstone","type":"code","name":"dripstone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row."},{"name":"Age","min":0,"max":1,"about":"How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool."},{"name":"Damp","min":0,"max":1,"about":"How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall."}],"start":[0,2,0,0.06],"measures":{"motion":0.113,"detail":0.0548,"edges":0.2063,"complexity":2.555,"coverage":0.9702,"colour":0.163,"drift":0.1125},"knobResponse":[0.0618,0.1355,0.0996,0.0869]},{"slug":"drop-tower","title":"Drop Tower","family":"fair","round":18,"note":"밤 놀이공원의 드롭 타워가 128줄을 다 써요. 링에 탄 여덟 사람을 꼭대기까지 끌어올려 매달아 두었다가 탑 높이에 맞춘 중력으로 떨어뜨리고, 자석 브레이크에서 번쩍이며 세워요. K1 을 누르면 오르는 중에도 바로 떨어뜨려요.","idea":"A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.","buttons":"K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.","code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","layer":{"id":"layer-drop-tower","type":"code","name":"drop-tower","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Height","min":50,"max":110,"about":"The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m."},{"name":"Thrill","min":0,"max":1,"about":"How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g."}],"start":[0,2,50,0.06],"measures":{"motion":0.437,"detail":0.0668,"edges":0.5494,"complexity":1.5352,"coverage":0.8276,"colour":0.1705,"drift":0.1633},"knobResponse":[0.0483,0.0875,0.0709,0.0567]},{"slug":"drying-mud","title":"Drying Mud","family":"cells","round":16,"note":"젖은 흙이 마르며 금이 직각으로 갈라져 T 자로 만나고, 오래된 금은 넓고 깊어지며 조각 테두리가 밝게 말려 올라가요. K1 을 누르면 소나기가 와서 금이 물에 잠겨 닫히고 흙이 다시 말라요.","idea":"Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.","buttons":"K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.","code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","layer":{"id":"layer-drying-mud","type":"code","name":"drying-mud","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Clay","min":0,"max":1,"about":"What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay."},{"name":"Sun","min":0.3,"max":3,"about":"How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider."},{"name":"Cracks","min":0,"max":1,"about":"How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across."},{"name":"Curl","min":0,"max":1,"about":"How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip."}],"start":[0,2,0,0.06],"measures":{"motion":0.0652,"detail":0.0775,"edges":0.2652,"complexity":2.4007,"coverage":0.991,"colour":0.1598,"drift":0.1523},"knobResponse":[0.1914,0.2254,0.1497,0.0607]},{"slug":"dust-motes","title":"Dust Motes","family":"particle","round":19,"note":"어두운 방, 높은 창에서 내려온 햇살 한 줄기 안에서만 먼지가 반짝이며 떠돌고, 커튼이 흔들리면 빛줄기가 좁아졌다 넓어져요. K1 을 누르면 사람이 방을 가로질러 빛줄기에 그림자를 내고, 발치에서 먼지가 빛 속으로 피어올라요.","idea":"A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.","buttons":"K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.","code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","layer":{"id":"layer-dust-motes","type":"code","name":"dust-motes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten."},{"name":"Dust","min":1,"max":4,"about":"How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself."},{"name":"Draft","min":-1,"max":1,"about":"Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade."}],"start":[0,2,1,0.06],"measures":{"motion":0.0301,"detail":0.0213,"edges":0.2348,"complexity":0.703,"coverage":0.3211,"colour":0.0688,"drift":0.0337},"knobResponse":[0.0562,0.0401,0.0354,0.0362]},{"slug":"dyson-gas","title":"Dyson Gas","family":"particle","round":29,"note":"고유값 열 개가 맨 위 줄에 구슬로 떨며 서로 밀어내고, 그 지나온 길이 실이 되어 아래로 흘러요. 실은 가운데에 빽빽하고 가장자리로 갈수록 성기며 서로 건너지 않아요. K3 은 행렬 크기(10~28)이고, K1 을 누르면 밀어내는 힘이 3초쯤 꺼져 실이 엉키며 건너요.","idea":"The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.","buttons":"K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.","code":"// ===== Patternflow pattern =====\n// Title:   Dyson Gas\n// Family:  particle\n// Idea:    The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dyson Brownian motion (Freeman Dyson, 1962), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9\n//\n// Knob 1: Hue. Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it.\n// Knob 2: Speed. How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder.\n// Knob 3: Count. The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28.\n// Knob 4: Beta. The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal.\n// Buttons: K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.\n\nconst W = 64, H = 128, N = W * H, NMAX = 28, CX = 31.5;\nconst { min, max, floor, round, sqrt, abs, asin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\n// A normal sample from four uniforms: bounded, which keeps a substep small.\nconst gauss = () => (rnd() + rnd() + rnd() + rnd() - 2) * 1.7320508;\n\n// The process, in Dyson's units with an Ornstein-Uhlenbeck pull:\n//   d lambda_i = sum_j 1 / (lambda_i - lambda_j) dt - lambda_i / 2 dt + sqrt(2 / beta) dB_i\n// Its resting state is the Gaussian beta ensemble, whose eigenvalues fill\n// Wigner's semicircle on [-2 sqrt(n), 2 sqrt(n)] whatever beta is; beta only\n// sets how hard the noise shakes them. The semicircle's edge sits RPX LEDs\n// either side of the middle.\nconst RPX = 29.5;\n// The longest substep. Near a close pair the step shrinks with the square of\n// the gap, so the pair is pushed apart before the noise can carry it across.\n// A frame takes at most SUBMAX substeps; right after a pinch, when the gaps\n// are tiny, the rest of that frame's time is let go and the fan opens a\n// little slower for a few frames.\nconst DTMAX = 0.004, SUBMAX = 500;\n// History rows kept, one more than the panel so the scroll can interpolate.\nconst HB = H + 2;\n// Where the rainbow starts at Hue 0 (sea green) and how much of the wheel it\n// spans, so the highest eigenvalue is pink.\nconst H0 = 0.42, SPAN = 0.52;\n// The beads ride on this row; the threads hang from it.\nconst TOP = 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Where the k-th of n eigenvalues sits in the semicircle, as a fraction of\n// its radius: the inverse of F(u) = 1/2 + (u sqrt(1 - u^2) + asin u) / pi.\nfunction quantile(q) {\n  let a = -1, b = 1;\n  for (let it = 0; it \u003c 40; it++) {\n    const u = (a + b) / 2;\n    if (0.5 + (u * sqrt(1 - u * u) + asin(u)) / PI \u003c q) a = u;\n    else b = u;\n  }\n  return (a + b) / 2;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    n: 10, beta: 1, sp: 2, hue: -1, started: false,\n    lam: new Float64Array(NMAX), sm: new Float64Array(NMAX), f: new Float64Array(NMAX), ord: new Int8Array(NMAX), hc: new Float32Array(NMAX),\n    hx: new Float32Array(HB * NMAX), hh: new Float32Array(HB * NMAX), hn: new Uint8Array(HB), he: new Uint16Array(HB),\n    head: 0, acc: 0, ep: 0, free: 0, pinch: -1, snap: new Float64Array(NMAX),\n    X: new Float32Array((H + 1) * NMAX), XH: new Float32Array((H + 1) * NMAX), Xn: new Uint8Array(H + 1), Xe: new Uint16Array(H + 1),\n    buf: new Float32Array(N * 3), lut: new Float32Array(256 * 3),\n  });\n  paint(P, 0);\n  fill(P);\n}\n\n// The rainbow for this Hue, 256 steps from the lowest eigenvalue's colour to\n// the highest's.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let j = 0; j \u003c 256; j++) hsv(hue + H0 + (SPAN * j) / 255, 0.82, 255, P.lut, j * 3);\n}\n\n// A fresh matrix of the current size, already at rest, with a full panel of\n// history behind it so the first frame shows the threads.\nfunction fill(P) {\n  const n = P.n, R = 2 * sqrt(n);\n  P.ep++;\n  for (let i = 0; i \u003c n; i++) (P.lam[i] = R * quantile((i + 0.5) / n)), (P.ord[i] = i), (P.hc[i] = n > 1 ? i / (n - 1) : 0.5);\n  P.free = 0, P.pinch = -1, P.acc = 0;\n  step(P, 2);\n  P.sm.set(P.lam);\n  const tr = rowTau(P.sp);\n  for (let k = 0; k \u003c HB; k++) step(P, tr), look(P, 1), push(P);\n}\n\n// The threads are drawn through a short exposure: each one follows its\n// eigenvalue with a lag of SMOOTH rows. An average of ordered positions is\n// still ordered, so the drawn threads cannot cross where the eigenvalues\n// do not.\nconst SMOOTH = 3;\nfunction look(P, rows) {\n  const a = 1 - Math.exp(-rows / SMOOTH);\n  for (let i = 0; i \u003c P.n; i++) P.sm[i] += (P.lam[i] - P.sm[i]) * a;\n}\n\n// Rows a second and stretch of the process per row, both from Speed.\nconst rowRate = (s) => 5 + 7.5 * s;\nconst rowTau = (s) => 0.01 + 0.01 * s;\n\nfunction push(P) {\n  const n = P.n, sc = RPX / (2 * sqrt(n));\n  P.head = (P.head + 1) % HB;\n  const o = P.head * NMAX;\n  for (let i = 0; i \u003c n; i++) (P.hx[o + i] = CX + P.sm[i] * sc), (P.hh[o + i] = P.hc[i]);\n  P.hn[P.head] = n, P.he[P.head] = P.ep;\n}\n\n// Advance the process by T. With the repulsion on, the eigenvalues keep the\n// order they had when it came on: ord lists them left to right, and if a\n// substep ever lets a pair overtake, the two swap places rather than cross.\nfunction step(P, T) {\n  const n = P.n, lam = P.lam, f = P.f, ord = P.ord, rep = P.free \u003c= 0, sd0 = sqrt(2 / P.beta);\n  let left = T;\n  for (let it = 0; it \u003c SUBMAX && left > 1e-9; it++) {\n    for (let i = 0; i \u003c n; i++) f[i] = -0.5 * lam[i];\n    let dt = DTMAX;\n    if (rep) {\n      for (let i = 0; i \u003c n; i++)\n        for (let j = i + 1; j \u003c n; j++) {\n          let d = lam[i] - lam[j];\n          if (abs(d) \u003c 1e-6) d = d \u003c 0 ? -1e-6 : 1e-6;\n          const q = 1 / d;\n          (f[i] += q), (f[j] -= q);\n        }\n      // No eigenvalue may move more than a fifth of the closest gap in one\n      // substep, by the push or by the noise.\n      let g = 1e9, fm = 1e-9;\n      for (let r = 0; r + 1 \u003c n; r++) g = min(g, lam[ord[r + 1]] - lam[ord[r]]);\n      for (let i = 0; i \u003c n; i++) fm = max(fm, abs(f[i]));\n      g = max(g, 1e-6);\n      dt = min(DTMAX, 0.2 * g * g, (0.2 * g) / fm);\n    }\n    if (dt > left) dt = left;\n    const sd = sd0 * sqrt(dt);\n    for (let i = 0; i \u003c n; i++) lam[i] += f[i] * dt + sd * gauss();\n    if (rep)\n      for (let r = 0; r + 1 \u003c n; r++) {\n        const a = ord[r], b = ord[r + 1];\n        if (lam[b] \u003c lam[a]) {\n          const t = lam[a];\n          (lam[a] = lam[b]), (lam[b] = t);\n        }\n      }\n    left -= dt;\n  }\n}\n\n// When the repulsion comes back, the eigenvalues are ranked where they\n// stand and each colour starts drifting back to its rank's place in the\n// rainbow.\nfunction rank(P) {\n  const n = P.n, ord = P.ord, lam = P.lam;\n  for (let i = 0; i \u003c n; i++) ord[i] = i;\n  for (let i = 1; i \u003c n; i++) {\n    const v = ord[i];\n    let j = i - 1;\n    while (j >= 0 && lam[ord[j]] > lam[v]) (ord[j + 1] = ord[j]), j--;\n    ord[j + 1] = v;\n  }\n}\n\n// A new size keeps the picture: the new eigenvalues take the old ones'\n// quantiles, scaled to the new semicircle.\nfunction resize(P, n) {\n  const m = P.n, ord = P.ord, lam = P.lam, u = new Float64Array(m);\n  rank(P);\n  for (let r = 0; r \u003c m; r++) u[r] = lam[ord[r]] / (2 * sqrt(m));\n  P.n = n, P.ep++, P.free = 0, P.pinch = -1;\n  for (let i = 0; i \u003c n; i++) {\n    const q = n > 1 ? (i / (n - 1)) * (m - 1) : (m - 1) / 2, a = floor(q), b = min(m - 1, a + 1);\n    lam[i] = (u[a] + (u[b] - u[a]) * (q - a)) * 2 * sqrt(n);\n    ord[i] = i, P.hc[i] = n > 1 ? i / (n - 1) : 0.5;\n  }\n  P.sm.set(lam);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 1], d = cl(dt || 0, 0, 0.1);\n  const pr = input.btnPressed || [];\n  if (k[0] !== P.hue) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  P.beta = cl(k[3], 1, 9);\n  const n = round(cl(k[2], 10, NMAX));\n  // The first frame's history is made again with the knobs as they stand.\n  if (!P.started) (P.started = true), (P.n = n), fill(P);\n  else if (n !== P.n) resize(P, n);\n\n  if (pr[0] && P.pinch \u003c 0) P.free = 2;\n  if (pr[1] && P.pinch \u003c 0) {\n    P.pinch = 0, P.free = 0;\n    for (let i = 0; i \u003c P.n; i++) P.snap[i] = P.lam[i];\n  }\n\n  const tau = d * rowRate(P.sp) * rowTau(P.sp);\n  if (P.pinch >= 0) {\n    // The matrix scaled down to nothing: every eigenvalue scales with it, so\n    // the threads run straight into the middle. At a thirtieth of its size it\n    // is let go and the repulsion fans it out again.\n    P.pinch += d;\n    const t = cl(P.pinch / 0.55, 0, 1), s = 0.03 + 0.97 * (1 - t * t * (3 - 2 * t));\n    for (let i = 0; i \u003c P.n; i++) P.lam[i] = P.snap[i] * s;\n    if (t >= 1) (P.pinch = -1), rank(P);\n  } else if (P.free > 0) {\n    step(P, tau);\n    P.free -= tau;\n    if (P.free \u003c= 0) rank(P);\n  } else step(P, tau);\n\n  // Colours ease back to their rank's place once the order is settled again.\n  if (P.free \u003c= 0) {\n    const n1 = max(1, P.n - 1), e = min(1, d * 1.2);\n    for (let r = 0; r \u003c P.n; r++) P.hc[P.ord[r]] += (r / n1 - P.hc[P.ord[r]]) * e;\n  }\n  look(P, d * rowRate(P.sp));\n  P.acc += d * rowRate(P.sp);\n  while (P.acc >= 1) (P.acc -= 1), push(P);\n}\n\n// One thread's light on one row: a 1-LED core across the span it moves\n// through between this row and the next, and a soft halo either side.\nfunction span(buf, y, a, b, r, g, bl) {\n  const x0 = max(0, floor(a - 2.5)), x1 = min(W - 1, floor(b + 2.5)), o = y * W;\n  for (let x = x0; x \u003c= x1; x++) {\n    const c = x + 0.5, dd = c \u003c a ? a - c : c > b ? c - b : 0;\n    let w = 1 - dd;\n    const h = 0.3 / (1 + dd * dd * 1.6);\n    if (w \u003c h) w = h;\n    const q = (o + x) * 3;\n    buf[q] += r * w, buf[q + 1] += g * w, buf[q + 2] += bl * w;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, sc = RPX / (2 * sqrt(n)), X = P.X, XH = P.XH, Xn = P.Xn, Xe = P.Xe, buf = P.buf, lut = P.lut, L = H - TOP;\n  // History row 0 is now, on the beads; the newest stored row is acc rows\n  // down, the next one a row further. Each drawn row interpolates between\n  // the two stored rows it falls between, so the scroll glides.\n  for (let y = 0; y \u003c= L; y++) {\n    const o = y * NMAX;\n    let ia, ib, t;\n    if (y \u003c P.acc) (ia = -1), (ib = P.head), (t = y / P.acc);\n    else {\n      const u = y - P.acc, kk = floor(u);\n      (ia = (P.head - kk + HB * 2) % HB), (ib = (ia - 1 + HB) % HB), (t = u - kk);\n    }\n    const ea = ia \u003c 0 ? P.ep : P.he[ia], eb = P.he[ib], na = ia \u003c 0 ? n : P.hn[ia], nb = P.hn[ib];\n    if (ea === eb && na === nb) {\n      for (let i = 0; i \u003c na; i++) {\n        const xa = ia \u003c 0 ? CX + P.sm[i] * sc : P.hx[ia * NMAX + i], ha = ia \u003c 0 ? P.hc[i] : P.hh[ia * NMAX + i];\n        X[o + i] = xa + (P.hx[ib * NMAX + i] - xa) * t;\n        XH[o + i] = ha + (P.hh[ib * NMAX + i] - ha) * t;\n      }\n      (Xn[y] = na), (Xe[y] = ea);\n    } else {\n      // A row from before Count was turned: no thread joins across it.\n      const s = t \u003c 0.5 && ia >= 0 ? ia : ib;\n      for (let i = 0; i \u003c P.hn[s]; i++) (X[o + i] = P.hx[s * NMAX + i]), (XH[o + i] = P.hh[s * NMAX + i]);\n      (Xn[y] = P.hn[s]), (Xe[y] = P.he[s]);\n    }\n  }\n  buf.fill(0);\n  for (let y = 0; y \u003c L; y++) {\n    const o = y * NMAX, m = Xn[y];\n    const okU = y > 0 && Xe[y - 1] === Xe[y] && Xn[y - 1] === m, okD = Xe[y + 1] === Xe[y] && Xn[y + 1] === m;\n    // The past dims a little toward the bottom; the newest rows burn\n    // brighter and whiter.\n    const fade = 1 - 0.42 * (y / L), hot = y \u003c 5 ? 0.35 * (1 - y / 5) : 0, f1 = fade * (1 + hot), wh = 90 * hot;\n    for (let i = 0; i \u003c m; i++) {\n      const x = X[o + i], xu = okU ? (X[o - NMAX + i] + x) / 2 : x, xd = okD ? (X[o + NMAX + i] + x) / 2 : x;\n      const q = round(cl(XH[o + i], 0, 1) * 255) * 3;\n      span(buf, y + TOP, min(x, xu, xd), max(x, xu, xd), lut[q] * f1 + wh, lut[q + 1] * f1 + wh, lut[q + 2] * f1 + wh);\n    }\n  }\n  // The eigenvalues themselves: a bead on the top of each thread, white at\n  // the heart and its own colour round the rim.\n  for (let i = 0; i \u003c n; i++) {\n    const x = X[i], q = round(cl(P.hc[i], 0, 1) * 255) * 3;\n    const r = lut[q] * 0.7 + 76, g = lut[q + 1] * 0.7 + 76, b = lut[q + 2] * 0.7 + 76;\n    for (let yy = 0; yy \u003c TOP + 4; yy++)\n      for (let xx = max(0, floor(x - 2.5)); xx \u003c= min(W - 1, floor(x + 2.5)); xx++) {\n        const dx = xx + 0.5 - x, dy = yy - TOP, r2 = dx * dx + dy * dy * 1.2, w = 1.35 / (1 + r2 * 0.9) - 0.14, p = (yy * W + xx) * 3;\n        if (w \u003c= 0) continue;\n        const wc = 140 * w * w;\n        (buf[p] += r * w + wc), (buf[p + 1] += g * w + wc), (buf[p + 2] += b * w + wc);\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-dyson-gas","type":"code","name":"dyson-gas","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dyson Gas\n// Family:  particle\n// Idea:    The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dyson Brownian motion (Freeman Dyson, 1962), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9\n//\n// Knob 1: Hue. Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it.\n// Knob 2: Speed. How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder.\n// Knob 3: Count. The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28.\n// Knob 4: Beta. The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal.\n// Buttons: K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.\n\nconst W = 64, H = 128, N = W * H, NMAX = 28, CX = 31.5;\nconst { min, max, floor, round, sqrt, abs, asin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\n// A normal sample from four uniforms: bounded, which keeps a substep small.\nconst gauss = () => (rnd() + rnd() + rnd() + rnd() - 2) * 1.7320508;\n\n// The process, in Dyson's units with an Ornstein-Uhlenbeck pull:\n//   d lambda_i = sum_j 1 / (lambda_i - lambda_j) dt - lambda_i / 2 dt + sqrt(2 / beta) dB_i\n// Its resting state is the Gaussian beta ensemble, whose eigenvalues fill\n// Wigner's semicircle on [-2 sqrt(n), 2 sqrt(n)] whatever beta is; beta only\n// sets how hard the noise shakes them. The semicircle's edge sits RPX LEDs\n// either side of the middle.\nconst RPX = 29.5;\n// The longest substep. Near a close pair the step shrinks with the square of\n// the gap, so the pair is pushed apart before the noise can carry it across.\n// A frame takes at most SUBMAX substeps; right after a pinch, when the gaps\n// are tiny, the rest of that frame's time is let go and the fan opens a\n// little slower for a few frames.\nconst DTMAX = 0.004, SUBMAX = 500;\n// History rows kept, one more than the panel so the scroll can interpolate.\nconst HB = H + 2;\n// Where the rainbow starts at Hue 0 (sea green) and how much of the wheel it\n// spans, so the highest eigenvalue is pink.\nconst H0 = 0.42, SPAN = 0.52;\n// The beads ride on this row; the threads hang from it.\nconst TOP = 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Where the k-th of n eigenvalues sits in the semicircle, as a fraction of\n// its radius: the inverse of F(u) = 1/2 + (u sqrt(1 - u^2) + asin u) / pi.\nfunction quantile(q) {\n  let a = -1, b = 1;\n  for (let it = 0; it \u003c 40; it++) {\n    const u = (a + b) / 2;\n    if (0.5 + (u * sqrt(1 - u * u) + asin(u)) / PI \u003c q) a = u;\n    else b = u;\n  }\n  return (a + b) / 2;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    n: 10, beta: 1, sp: 2, hue: -1, started: false,\n    lam: new Float64Array(NMAX), sm: new Float64Array(NMAX), f: new Float64Array(NMAX), ord: new Int8Array(NMAX), hc: new Float32Array(NMAX),\n    hx: new Float32Array(HB * NMAX), hh: new Float32Array(HB * NMAX), hn: new Uint8Array(HB), he: new Uint16Array(HB),\n    head: 0, acc: 0, ep: 0, free: 0, pinch: -1, snap: new Float64Array(NMAX),\n    X: new Float32Array((H + 1) * NMAX), XH: new Float32Array((H + 1) * NMAX), Xn: new Uint8Array(H + 1), Xe: new Uint16Array(H + 1),\n    buf: new Float32Array(N * 3), lut: new Float32Array(256 * 3),\n  });\n  paint(P, 0);\n  fill(P);\n}\n\n// The rainbow for this Hue, 256 steps from the lowest eigenvalue's colour to\n// the highest's.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let j = 0; j \u003c 256; j++) hsv(hue + H0 + (SPAN * j) / 255, 0.82, 255, P.lut, j * 3);\n}\n\n// A fresh matrix of the current size, already at rest, with a full panel of\n// history behind it so the first frame shows the threads.\nfunction fill(P) {\n  const n = P.n, R = 2 * sqrt(n);\n  P.ep++;\n  for (let i = 0; i \u003c n; i++) (P.lam[i] = R * quantile((i + 0.5) / n)), (P.ord[i] = i), (P.hc[i] = n > 1 ? i / (n - 1) : 0.5);\n  P.free = 0, P.pinch = -1, P.acc = 0;\n  step(P, 2);\n  P.sm.set(P.lam);\n  const tr = rowTau(P.sp);\n  for (let k = 0; k \u003c HB; k++) step(P, tr), look(P, 1), push(P);\n}\n\n// The threads are drawn through a short exposure: each one follows its\n// eigenvalue with a lag of SMOOTH rows. An average of ordered positions is\n// still ordered, so the drawn threads cannot cross where the eigenvalues\n// do not.\nconst SMOOTH = 3;\nfunction look(P, rows) {\n  const a = 1 - Math.exp(-rows / SMOOTH);\n  for (let i = 0; i \u003c P.n; i++) P.sm[i] += (P.lam[i] - P.sm[i]) * a;\n}\n\n// Rows a second and stretch of the process per row, both from Speed.\nconst rowRate = (s) => 5 + 7.5 * s;\nconst rowTau = (s) => 0.01 + 0.01 * s;\n\nfunction push(P) {\n  const n = P.n, sc = RPX / (2 * sqrt(n));\n  P.head = (P.head + 1) % HB;\n  const o = P.head * NMAX;\n  for (let i = 0; i \u003c n; i++) (P.hx[o + i] = CX + P.sm[i] * sc), (P.hh[o + i] = P.hc[i]);\n  P.hn[P.head] = n, P.he[P.head] = P.ep;\n}\n\n// Advance the process by T. With the repulsion on, the eigenvalues keep the\n// order they had when it came on: ord lists them left to right, and if a\n// substep ever lets a pair overtake, the two swap places rather than cross.\nfunction step(P, T) {\n  const n = P.n, lam = P.lam, f = P.f, ord = P.ord, rep = P.free \u003c= 0, sd0 = sqrt(2 / P.beta);\n  let left = T;\n  for (let it = 0; it \u003c SUBMAX && left > 1e-9; it++) {\n    for (let i = 0; i \u003c n; i++) f[i] = -0.5 * lam[i];\n    let dt = DTMAX;\n    if (rep) {\n      for (let i = 0; i \u003c n; i++)\n        for (let j = i + 1; j \u003c n; j++) {\n          let d = lam[i] - lam[j];\n          if (abs(d) \u003c 1e-6) d = d \u003c 0 ? -1e-6 : 1e-6;\n          const q = 1 / d;\n          (f[i] += q), (f[j] -= q);\n        }\n      // No eigenvalue may move more than a fifth of the closest gap in one\n      // substep, by the push or by the noise.\n      let g = 1e9, fm = 1e-9;\n      for (let r = 0; r + 1 \u003c n; r++) g = min(g, lam[ord[r + 1]] - lam[ord[r]]);\n      for (let i = 0; i \u003c n; i++) fm = max(fm, abs(f[i]));\n      g = max(g, 1e-6);\n      dt = min(DTMAX, 0.2 * g * g, (0.2 * g) / fm);\n    }\n    if (dt > left) dt = left;\n    const sd = sd0 * sqrt(dt);\n    for (let i = 0; i \u003c n; i++) lam[i] += f[i] * dt + sd * gauss();\n    if (rep)\n      for (let r = 0; r + 1 \u003c n; r++) {\n        const a = ord[r], b = ord[r + 1];\n        if (lam[b] \u003c lam[a]) {\n          const t = lam[a];\n          (lam[a] = lam[b]), (lam[b] = t);\n        }\n      }\n    left -= dt;\n  }\n}\n\n// When the repulsion comes back, the eigenvalues are ranked where they\n// stand and each colour starts drifting back to its rank's place in the\n// rainbow.\nfunction rank(P) {\n  const n = P.n, ord = P.ord, lam = P.lam;\n  for (let i = 0; i \u003c n; i++) ord[i] = i;\n  for (let i = 1; i \u003c n; i++) {\n    const v = ord[i];\n    let j = i - 1;\n    while (j >= 0 && lam[ord[j]] > lam[v]) (ord[j + 1] = ord[j]), j--;\n    ord[j + 1] = v;\n  }\n}\n\n// A new size keeps the picture: the new eigenvalues take the old ones'\n// quantiles, scaled to the new semicircle.\nfunction resize(P, n) {\n  const m = P.n, ord = P.ord, lam = P.lam, u = new Float64Array(m);\n  rank(P);\n  for (let r = 0; r \u003c m; r++) u[r] = lam[ord[r]] / (2 * sqrt(m));\n  P.n = n, P.ep++, P.free = 0, P.pinch = -1;\n  for (let i = 0; i \u003c n; i++) {\n    const q = n > 1 ? (i / (n - 1)) * (m - 1) : (m - 1) / 2, a = floor(q), b = min(m - 1, a + 1);\n    lam[i] = (u[a] + (u[b] - u[a]) * (q - a)) * 2 * sqrt(n);\n    ord[i] = i, P.hc[i] = n > 1 ? i / (n - 1) : 0.5;\n  }\n  P.sm.set(lam);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 1], d = cl(dt || 0, 0, 0.1);\n  const pr = input.btnPressed || [];\n  if (k[0] !== P.hue) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  P.beta = cl(k[3], 1, 9);\n  const n = round(cl(k[2], 10, NMAX));\n  // The first frame's history is made again with the knobs as they stand.\n  if (!P.started) (P.started = true), (P.n = n), fill(P);\n  else if (n !== P.n) resize(P, n);\n\n  if (pr[0] && P.pinch \u003c 0) P.free = 2;\n  if (pr[1] && P.pinch \u003c 0) {\n    P.pinch = 0, P.free = 0;\n    for (let i = 0; i \u003c P.n; i++) P.snap[i] = P.lam[i];\n  }\n\n  const tau = d * rowRate(P.sp) * rowTau(P.sp);\n  if (P.pinch >= 0) {\n    // The matrix scaled down to nothing: every eigenvalue scales with it, so\n    // the threads run straight into the middle. At a thirtieth of its size it\n    // is let go and the repulsion fans it out again.\n    P.pinch += d;\n    const t = cl(P.pinch / 0.55, 0, 1), s = 0.03 + 0.97 * (1 - t * t * (3 - 2 * t));\n    for (let i = 0; i \u003c P.n; i++) P.lam[i] = P.snap[i] * s;\n    if (t >= 1) (P.pinch = -1), rank(P);\n  } else if (P.free > 0) {\n    step(P, tau);\n    P.free -= tau;\n    if (P.free \u003c= 0) rank(P);\n  } else step(P, tau);\n\n  // Colours ease back to their rank's place once the order is settled again.\n  if (P.free \u003c= 0) {\n    const n1 = max(1, P.n - 1), e = min(1, d * 1.2);\n    for (let r = 0; r \u003c P.n; r++) P.hc[P.ord[r]] += (r / n1 - P.hc[P.ord[r]]) * e;\n  }\n  look(P, d * rowRate(P.sp));\n  P.acc += d * rowRate(P.sp);\n  while (P.acc >= 1) (P.acc -= 1), push(P);\n}\n\n// One thread's light on one row: a 1-LED core across the span it moves\n// through between this row and the next, and a soft halo either side.\nfunction span(buf, y, a, b, r, g, bl) {\n  const x0 = max(0, floor(a - 2.5)), x1 = min(W - 1, floor(b + 2.5)), o = y * W;\n  for (let x = x0; x \u003c= x1; x++) {\n    const c = x + 0.5, dd = c \u003c a ? a - c : c > b ? c - b : 0;\n    let w = 1 - dd;\n    const h = 0.3 / (1 + dd * dd * 1.6);\n    if (w \u003c h) w = h;\n    const q = (o + x) * 3;\n    buf[q] += r * w, buf[q + 1] += g * w, buf[q + 2] += bl * w;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, sc = RPX / (2 * sqrt(n)), X = P.X, XH = P.XH, Xn = P.Xn, Xe = P.Xe, buf = P.buf, lut = P.lut, L = H - TOP;\n  // History row 0 is now, on the beads; the newest stored row is acc rows\n  // down, the next one a row further. Each drawn row interpolates between\n  // the two stored rows it falls between, so the scroll glides.\n  for (let y = 0; y \u003c= L; y++) {\n    const o = y * NMAX;\n    let ia, ib, t;\n    if (y \u003c P.acc) (ia = -1), (ib = P.head), (t = y / P.acc);\n    else {\n      const u = y - P.acc, kk = floor(u);\n      (ia = (P.head - kk + HB * 2) % HB), (ib = (ia - 1 + HB) % HB), (t = u - kk);\n    }\n    const ea = ia \u003c 0 ? P.ep : P.he[ia], eb = P.he[ib], na = ia \u003c 0 ? n : P.hn[ia], nb = P.hn[ib];\n    if (ea === eb && na === nb) {\n      for (let i = 0; i \u003c na; i++) {\n        const xa = ia \u003c 0 ? CX + P.sm[i] * sc : P.hx[ia * NMAX + i], ha = ia \u003c 0 ? P.hc[i] : P.hh[ia * NMAX + i];\n        X[o + i] = xa + (P.hx[ib * NMAX + i] - xa) * t;\n        XH[o + i] = ha + (P.hh[ib * NMAX + i] - ha) * t;\n      }\n      (Xn[y] = na), (Xe[y] = ea);\n    } else {\n      // A row from before Count was turned: no thread joins across it.\n      const s = t \u003c 0.5 && ia >= 0 ? ia : ib;\n      for (let i = 0; i \u003c P.hn[s]; i++) (X[o + i] = P.hx[s * NMAX + i]), (XH[o + i] = P.hh[s * NMAX + i]);\n      (Xn[y] = P.hn[s]), (Xe[y] = P.he[s]);\n    }\n  }\n  buf.fill(0);\n  for (let y = 0; y \u003c L; y++) {\n    const o = y * NMAX, m = Xn[y];\n    const okU = y > 0 && Xe[y - 1] === Xe[y] && Xn[y - 1] === m, okD = Xe[y + 1] === Xe[y] && Xn[y + 1] === m;\n    // The past dims a little toward the bottom; the newest rows burn\n    // brighter and whiter.\n    const fade = 1 - 0.42 * (y / L), hot = y \u003c 5 ? 0.35 * (1 - y / 5) : 0, f1 = fade * (1 + hot), wh = 90 * hot;\n    for (let i = 0; i \u003c m; i++) {\n      const x = X[o + i], xu = okU ? (X[o - NMAX + i] + x) / 2 : x, xd = okD ? (X[o + NMAX + i] + x) / 2 : x;\n      const q = round(cl(XH[o + i], 0, 1) * 255) * 3;\n      span(buf, y + TOP, min(x, xu, xd), max(x, xu, xd), lut[q] * f1 + wh, lut[q + 1] * f1 + wh, lut[q + 2] * f1 + wh);\n    }\n  }\n  // The eigenvalues themselves: a bead on the top of each thread, white at\n  // the heart and its own colour round the rim.\n  for (let i = 0; i \u003c n; i++) {\n    const x = X[i], q = round(cl(P.hc[i], 0, 1) * 255) * 3;\n    const r = lut[q] * 0.7 + 76, g = lut[q + 1] * 0.7 + 76, b = lut[q + 2] * 0.7 + 76;\n    for (let yy = 0; yy \u003c TOP + 4; yy++)\n      for (let xx = max(0, floor(x - 2.5)); xx \u003c= min(W - 1, floor(x + 2.5)); xx++) {\n        const dx = xx + 0.5 - x, dy = yy - TOP, r2 = dx * dx + dy * dy * 1.2, w = 1.35 / (1 + r2 * 0.9) - 0.14, p = (yy * W + xx) * 3;\n        if (w \u003c= 0) continue;\n        const wc = 140 * w * w;\n        (buf[p] += r * w + wc), (buf[p + 1] += g * w + wc), (buf[p + 2] += b * w + wc);\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder."},{"name":"Count","min":10,"max":28,"about":"The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28."},{"name":"Beta","min":1,"max":9,"about":"The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal."}],"start":[0,2,10,1],"measures":{"motion":1.3286,"detail":0.1297,"edges":0.5413,"complexity":1.7541,"coverage":0.3748,"colour":0.2639,"drift":0.1193},"knobResponse":[0.1261,0.1507,0.2251,0.1306]},{"slug":"elephant-toothpaste","title":"Elephant Toothpaste","family":"chemistry","round":23,"note":"보라색 장갑을 낀 손이 실험대 위 눈금실린더에 아이오딘화 칼륨을 부으면, 유리 안쪽에 그어 둔 식용 색소 줄무늬를 두른 거품 기둥이 입구에서 솟아 패널 꼭대기까지 올라요. 기둥은 한쪽으로 꺾여 실린더 옆을 타고 흘러내려 김 나는 더미로 쌓이고, 더미가 굳어 바래면 손이 닦아 내고 새 실린더를 내려놓아요.","idea":"A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.","buttons":"K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.","code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","layer":{"id":"layer-elephant-toothpaste","type":"code","name":"elephant-toothpaste","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower."},{"name":"Stripes","min":1,"max":4,"about":"How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4."},{"name":"Strength","min":0,"max":1,"about":"How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap."}],"start":[0,2,1,0.06],"measures":{"motion":0.1815,"detail":0.029,"edges":0.1765,"complexity":0.9251,"coverage":0.367,"colour":0.1801,"drift":0.102},"knobResponse":[0.0441,0.1137,0.0453,0.0773]},{"slug":"elliptic-chords","title":"Elliptic Chords","family":"number","round":36,"note":"위에는 실수 곡선 y² = x³ − 6x 가, 아래에는 같은 곡선을 61 로 나눈 나머지로 푼 61×61 판이 있어요. G 와 kG 를 지나는 직선이 곡선과 세 번째로 만나는 점을 x축에 뒤집으면 (k+1)G 이고, 아래에서는 그 직선이 판을 감아 도는 점 61개가 되어 곡선의 점 셋에서만 하얗게 빛나며 배수들이 방문 순서대로 무지개색으로 켜져요. K3 은 상수 b 를 바꿔 알 모양 고리를 키우다 긴 가지에 붙이고, K1 을 누르면 새 생성원 G 로 O 에서 다시 세요.","idea":"The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.","buttons":"K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Elliptic Chords\n// Family:  number\n// Idea:    The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: elliptic curve group law, chord and tangent (Henri Poincaré, 1901), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1\n//\n// Knob 1: Hue. Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky.\n// Knob 2: Speed. Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44.\n// Knob 3: Curve. The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points.\n// Knob 4: Trail. Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below.\n// Buttons: K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.\n\nconst W = 64, H = 128, P = 61, A = -6, CMIN = -4, CMAX = 8;\n// The real window: x from -3.15 to 4.45 over the 64 columns, y from -7.75 to\n// 7.75 over rows 0..62, with y = 0 on row 31. Lines stay lines under this\n// stretch, and the mirror in the x-axis stays a vertical move.\nconst TOPH = 63, X0 = -3.15, X1 = 4.45, SX = W / (X1 - X0), YM = 7.75, SY = TOPH / (2 * YM), YC = 31;\n// The F_61 board: element (x, y) is column BX + x, row BY - y; O sits on row OROW above it.\nconst BX = 1, BY = 126, OROW = 64;\n// Phases of one group step: the line, the mirror, the landing.\nconst T_LINE = 0.5, T_MIR0 = 0.55, T_MIR1 = 0.78;\nconst NT = 1024;\n// Group steps a second for each unit of Speed.\nconst RATE = 0.75;\nconst { floor, min, max, abs, sqrt, sin, cos, tan, acos, cbrt, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (v) => ((v % P) + P) % P;\nconst NB = [[1, 0], [-1, 0], [0, 1], [0, -1]];\nconst NB2 = [[2, 0], [-2, 0], [0, 2], [0, -2], [1, 1], [1, -1], [-1, 1], [-1, -1]];\n\n// Inverses mod 61, by Fermat.\nconst INV = new Int32Array(P);\nfor (let i = 1; i \u003c P; i++) {\n  let r = 1, e = P - 2, q = i;\n  while (e) {\n    if (e & 1) r = (r * q) % P;\n    q = (q * q) % P;\n    e >>= 1;\n  }\n  INV[i] = r;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// ---- F_61 -------------------------------------------------------------------\n// A point is [x, y] with entries 0..60, or null for O.\nfunction fpAdd(p, q, b) {\n  if (!p) return q;\n  if (!q) return p;\n  if (p[0] === q[0] && md(p[1] + q[1]) === 0) return null;\n  const m = p[0] === q[0] ? md((3 * p[0] * p[0] + A) * INV[md(2 * p[1])]) : md((q[1] - p[1]) * INV[md(q[0] - p[0])]);\n  const x = md(m * m - p[0] - q[0]);\n  return [x, md(m * (p[0] - x) - p[1])];\n}\n\nfunction fpOrder(g, b) {\n  let q = g, n = 1;\n  while (q && n \u003c 200) {\n    q = fpAdd(q, g, b);\n    n++;\n  }\n  return n;\n}\n\n// ---- the real curve -----------------------------------------------------------\n// The roots of x^3 - 6x + b, largest first: three when 27 b^2 \u003c 864, so\n// when |b| \u003c 5.66, and then the curve has an egg over [e3, e2].\nfunction roots(b) {\n  if (4 * A * A * A + 27 * b * b \u003c 0) {\n    const r = 2 * sqrt(-A / 3), th = acos(((3 * b) / (2 * A)) * sqrt(-3 / A)) / 3;\n    return [0, 1, 2].map((k) => r * cos(th - (2 * PI * k) / 3)).sort((p, q) => q - p);\n  }\n  const s = sqrt((b * b) / 4 + (A * A * A) / 27);\n  let x = cbrt(-b / 2 + s) + cbrt(-b / 2 - s);\n  for (let i = 0; i \u003c 6; i++) x -= (x * x * x + A * x + b) / (3 * x * x + A);\n  return [x];\n}\n\n// The real points of the curve as a group are a circle, R/wZ, times {0, 1}\n// when the egg is there. The circle is measured by the invariant\n// differential dx/y: on the long branch u(x) = int_x^inf dt/sqrt(f), with\n// t = e1 + tan^2(phi), and on the egg v(x) = int_e3^x dt/sqrt(f), with\n// t = e3 + (e2 - e3) sin^2(theta), both free of the square-root ends. Both\n// halves of the circle come to the same w/2. Checked against the chord rule\n// in a scratch script: main(u1) + main(u2) = main(u1 + u2), main(u) + egg(v)\n// = egg(u + v) and egg(v1) + egg(v2) = main(v1 + v2), to 2e-6 in the window.\nfunction realCurve(b) {\n  const R = roots(b), e1 = R[0], c = e1 * e1 + A;\n  const U = new Float64Array(NT + 1), h = PI / 2 / NT;\n  const gm = (ph) => {\n    if (ph >= PI / 2 - 1e-12) return 2;\n    const s = tan(ph), t = e1 + s * s, co = cos(ph);\n    return 2 / sqrt(t * t + e1 * t + c) / (co * co);\n  };\n  for (let i = NT - 1; i >= 0; i--) U[i] = U[i + 1] + (h / 6) * (gm(i * h) + 4 * gm((i + 0.5) * h) + gm((i + 1) * h));\n  const C = { b, R, U, w: 2 * U[0], egg: null };\n  if (R.length === 3) {\n    const e2 = R[1], e3 = R[2], V = new Float64Array(NT + 1);\n    const ge = (th) => 2 / sqrt(e1 - e3 - (e2 - e3) * sin(th) ** 2);\n    for (let i = 0; i \u003c NT; i++) V[i + 1] = V[i] + (h / 6) * (ge(i * h) + 4 * ge((i + 0.5) * h) + ge((i + 1) * h));\n    C.egg = { V, e2, e3 };\n  }\n  return C;\n}\n\nconst f = (x, b) => x * x * x + A * x + b;\n\n// Fractional index where the monotone table T meets the value t.\nfunction seek(T, t, rising) {\n  let lo = 0, hi = NT;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (T[m] \u003c t === rising) lo = m;\n    else hi = m;\n  }\n  return lo + (t - T[lo]) / (T[hi] - T[lo] || 1);\n}\n\n// The real point at parameter u on the branch (s = 0) or the egg (s = 1);\n// null for O.\nfunction realPoint(C, u, s) {\n  const w = C.w;\n  u -= floor(u / w) * w;\n  if (s === 0 && (u \u003c 1e-9 || w - u \u003c 1e-9)) return null;\n  const up = u \u003c= w / 2, q = up ? u : w - u;\n  let x;\n  if (s === 0) {\n    const ph = (seek(C.U, q, false) * PI) / 2 / NT;\n    x = C.R[0] + tan(ph) ** 2;\n  } else {\n    const { V, e2, e3 } = C.egg, th = (seek(V, q, true) * PI) / 2 / NT;\n    x = e3 + (e2 - e3) * sin(th) ** 2;\n  }\n  const y = sqrt(max(0, f(x, C.b)));\n  // The egg runs the other way round, so that main(u) + egg(v) = egg(u + v).\n  return [x, (up ? 1 : -1) * (s === 0 ? 1 : -1) * y];\n}\n\n// ---- one curve: both halves ---------------------------------------------------\nfunction buildCurve(b) {\n  const pts = [];\n  for (let x = 0; x \u003c P; x++) for (let y = 0; y \u003c P; y++) if (md(y * y - f(x, b)) === 0) pts.push([x, y]);\n  let N = 0, gens = [];\n  for (const p of pts) {\n    const o = fpOrder(p, b);\n    if (o > N) (N = o), (gens = []);\n    if (o === N) gens.push(p);\n  }\n  const C = realCurve(b);\n  const onBoard = new Uint8Array(P * P);\n  for (const [x, y] of pts) onBoard[x * P + y] = 1;\n  // The static picture of the real curve: a 1.4-LED line where y^2 = f(x),\n  // found by the distance |y^2 - f| / |gradient| in LEDs, and a soft fill on\n  // the side where f(x) > y^2, the inside of the egg and of the branch.\n  const line = new Float32Array(W * TOPH), fill = new Float32Array(W * TOPH);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      let acc = 0, inside = 0;\n      for (let sy = 0; sy \u003c 3; sy++)\n        for (let sx = 0; sx \u003c 3; sx++) {\n          const x = X0 + (col + (sx + 0.5) / 3) / SX, y = (YC + 0.5 - (r + (sy + 0.5) / 3)) / SY;\n          const F = y * y - f(x, b), gx = (3 * x * x + A) / SX, gy = (2 * y) / SY;\n          const d = abs(F) / (sqrt(gx * gx + gy * gy) + 1e-9);\n          acc += cl(1.15 - d, 0, 1);\n          if (F \u003c 0) inside++;\n        }\n      line[r * W + col] = acc / 9;\n      fill[r * W + col] = inside / 9;\n    }\n  return { b, pts, N, gens, C, onBoard, line, fill };\n}\n\n// ---- the cycle ----------------------------------------------------------------\n// Q_k = kG. Step k goes from Q_k to Q_k+1 = Q_k + G: the line through G and\n// Q_k (the tangent at G when k = 1, the vertical through G when Q_k is O or\n// -G), its third point R, and R mirrored. The real generator is a point of\n// the same order N: on the egg at parameter jw/N when there is an egg and N\n// is even, so the odd multiples land on the egg and the even ones on the\n// branch, otherwise on the branch.\nfunction startCycle(S, fresh) {\n  const K = S.curve, N = K.N, C = K.C;\n  S.g = K.gens[floor(random() * K.gens.length)];\n  S.side = C.egg && N % 2 === 0 ? 1 : 0;\n  const js = [];\n  for (let j = 1; j \u003c N; j++) {\n    let a = j, bb = N;\n    while (bb) [a, bb] = [bb, a % bb];\n    if (a !== 1) continue;\n    const g = realPoint(C, (j * C.w) / N, S.side);\n    if (g && g[0] > X0 + 0.3 && g[0] \u003c X1 - 0.3 && abs(g[1]) \u003c YM - 0.4) js.push(j);\n  }\n  S.j = js.length ? js[floor(random() * js.length)] : 1;\n  S.gr = realPoint(C, (S.j * C.w) / N, S.side);\n  for (const t of S.trail) t.ghost = t.ghost || 1e-6;\n  if (fresh) {\n    // The opening shows the cycle already under way: 80% of it lit.\n    const k0 = round(0.8 * N);\n    let q = null;\n    for (let k = 1; k \u003c= k0; k++) {\n      q = fpAdd(q, S.g, K.b);\n      S.trail.push({ k, gs: S.gs - (k0 - k), fp: q, re: realK(S, k), ghost: 0 });\n    }\n    S.k = k0;\n    S.q = q;\n  } else {\n    S.k = 0;\n    S.q = null;\n  }\n  planStep(S);\n}\n\nconst realK = (S, k) => realPoint(S.curve.C, (k * S.j * S.curve.C.w) / S.curve.N, (k * S.side) & 1);\n\n// The F_61 line y = mx + c is the lattice of points (t, mt) mod 61 shifted\n// to one of them. Its shortest vector, found by Lagrange's reduction of the\n// basis (1, m), (0, 61), is never more than 8.4 long, and stepping by it still\n// visits all 61 points, so the walk runs along short streaks that wrap round\n// the square instead of jumping m rows at a time.\nfunction shortStep(m) {\n  let ax = 1, ay = m > P / 2 ? m - P : m, bx = 0, by = P;\n  const n2 = (x, y) => x * x + y * y;\n  for (let i = 0; i \u003c 20; i++) {\n    if (n2(bx, by) \u003c n2(ax, ay)) [ax, ay, bx, by] = [bx, by, ax, ay];\n    const mu = round((ax * bx + ay * by) / n2(ax, ay));\n    if (mu === 0) break;\n    bx -= mu * ax;\n    by -= mu * ay;\n  }\n  return [md(ax), md(ay)];\n}\n\nfunction planStep(S) {\n  const K = S.curve, N = K.N, k = S.k, g = S.g, q = S.q;\n  const st = { k, vert: false, m: 0, start: q || g, third: null, next: null, rm: 0, rx: 0, ry: 0, rv: false, r3: null, rn: null, tR: -1 };\n  // F_61: the line's slope, its 61 dots from Q_k (from G when Q_k is O), and\n  // how many steps along it the third point falls.\n  if (!q || (q[0] === g[0] && md(q[1] + g[1]) === 0)) st.vert = true;\n  else st.m = q[0] === g[0] ? md((3 * g[0] * g[0] + A) * INV[md(2 * g[1])]) : md((q[1] - g[1]) * INV[md(q[0] - g[0])]);\n  st.next = fpAdd(q, g, K.b);\n  st.third = st.next ? [st.next[0], md(-st.next[1])] : null;\n  [st.dx, st.dy] = st.vert ? [0, 1] : shortStep(st.m);\n  const s0 = st.start, stepT = (pt) => (st.vert ? md(pt[1] - s0[1]) : md((pt[0] - s0[0]) * INV[st.dx]));\n  st.tR = st.third ? stepT(st.third) : P - 1;\n  // The real line, through G_r with slope rm or vertical.\n  const G = S.gr, Q = k === 0 ? null : realK(S, k);\n  if (k === 0 || k === N - 1) st.rv = true;\n  else if (k === 1) st.rm = (3 * G[0] * G[0] + A) / (2 * G[1]);\n  else if (Q) st.rm = (Q[1] - G[1]) / (Q[0] - G[0]);\n  else st.rm = 0;\n  st.rx = G[0];\n  st.ry = G[1];\n  if (k === N - 1) st.r3 = null;\n  else if (k === 0) st.r3 = [G[0], -G[1]];\n  else {\n    const x3 = st.rm * st.rm - G[0] - (Q ? Q[0] : G[0]);\n    st.r3 = [x3, G[1] + st.rm * (x3 - G[0])];\n  }\n  st.rn = st.r3 ? [st.r3[0], -st.r3[1]] : null;\n  S.step = st;\n}\n\nfunction finishStep(S) {\n  const st = S.step, N = S.curve.N;\n  S.past.push({ st, gs: S.gs + 1 });\n  S.gs++;\n  S.k = (S.k + 1) % N;\n  S.q = st.next;\n  if (st.next) S.trail.push({ k: S.k, gs: S.gs, fp: st.next, re: st.rn, ghost: 0 });\n  planStep(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trailK: 0.06, b: null, curve: null, curves: {}, g: null, gr: null, j: 1, side: 0,\n    k: 0, q: null, gs: 0, tau: 0, step: null, trail: [], past: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0];\n  S.speed = cl(kv[1], 0.2, 3);\n  S.trailK = cl(kv[3], 0, 1);\n  const b = round(cl(kv[2], CMIN, CMAX));\n  if (b !== S.b) {\n    S.b = b;\n    S.curve = S.curves[b] || (S.curves[b] = buildCurve(b));\n    S.trail.length = 0;\n    S.past.length = 0;\n    S.tau = 0;\n    startCycle(S, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.tau = 0;\n    startCycle(S, false);\n  }\n  S.tau += d * S.speed * RATE;\n  while (S.tau >= 1) {\n    S.tau -= 1;\n    finishStep(S);\n  }\n  // Ghosts of an old cycle fade out over 1.5 seconds.\n  for (const t of S.trail) if (t.ghost) t.ghost += d / 1.5;\n  const L = trailLen(S);\n  S.trail = S.trail.filter((t) => (t.ghost ? t.ghost \u003c 1 : S.gs + S.tau - t.gs \u003c L + 1));\n  S.past = S.past.filter((q) => S.gs + S.tau - q.gs \u003c linger(S));\n}\n\n// Past lines linger, fading: 1.6 steps at Trail 0, 8 steps at 1. They all\n// pass through G.\nconst linger = (S) => 1.6 + 6.4 * S.trailK ** 1.2;\n\nconst trailLen = (S) => 2 + (S.curve.N - 2) * (1 - S.trailK) ** 1.5;\n\n// ---- drawing ------------------------------------------------------------------\nfunction add(S, x, y, col, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0) return;\n  const p = y * W + x;\n  S.R[p] += col[0] * v;\n  S.G[p] += col[1] * v;\n  S.B[p] += col[2] * v;\n}\n\n// Real coordinates to LED coordinates (LED centres at whole numbers).\nconst px = (x) => (x - X0) * SX - 0.5;\nconst py = (y) => YC - y * SY;\n\nfunction disc(S, x, y, rad, col, v) {\n  const cx = px(x), cy = py(y);\n  for (let r = floor(cy - rad - 1); r \u003c= cy + rad + 1; r++)\n    for (let c = floor(cx - rad - 1); c \u003c= cx + rad + 1; c++) {\n      if (r \u003c 0 || r >= TOPH) continue;\n      const dd = sqrt((c - cx) ** 2 + (r - cy) ** 2);\n      add(S, c, r, col, v * cl(rad + 0.5 - dd, 0, 1));\n    }\n}\n\n// The real line through (x0, y0) with slope m, or the vertical through x0,\n// clipped to the window: one LED wide with a soft LED of glow either side.\nfunction realLine(S, x0, y0, m, vert, col, v) {\n  const k = vert ? 0 : (-m * SY) / SX, ax = px(x0), ay = py(y0);\n  if (!vert && abs(k) \u003c= 1) {\n    // Shallow: walk the columns, spread across rows.\n    for (let c = 0; c \u003c W; c++) {\n      const r = ay + k * (c - ax), r0 = floor(r);\n      for (let q = r0 - 1; q \u003c= r0 + 2; q++) if (q >= 0 && q \u003c TOPH) add(S, c, q, col, v * glow(abs(q - r)));\n    }\n  } else {\n    for (let r = 0; r \u003c TOPH; r++) {\n      const c = vert ? ax : ax + (r - ay) / k, c0 = floor(c);\n      for (let q = c0 - 1; q \u003c= c0 + 2; q++) add(S, q, r, col, v * glow(abs(q - c)));\n    }\n  }\n}\nconst glow = (d) => (d \u003c 1 ? 1 - 0.7 * d : d \u003c 2 ? 0.3 * (2 - d) : 0);\n\nconst inWin = (p) => p && p[0] > X0 - 0.2 && p[0] \u003c X1 + 0.2 && abs(p[1]) \u003c YM + 0.3;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.curve) return;\n  const { R, G, B, c } = S, K = S.curve, N = K.N, st = S.step, tau = S.tau;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h0 = S.hue + 0.6;\n  // The plane inside the real curve and the board are dim tints.\n  const plane = [0, 0, 0], ink = [0, 0, 0], board = [0, 0, 0], chord = [0, 0, 0], white = [1, 1, 1], base = [0, 0, 0];\n  // Round orange and yellow the dim tints lose most of their colour, or\n  // they would read brown and olive.\n  const hw = h0 + 0.03 - floor(h0 + 0.03), warm = cl(1 - abs(hw - 0.12) / 0.1, 0, 1);\n  hsv(h0, 0.75 - 0.5 * warm, 0.16, plane);\n  hsv(h0 - 0.02, 0.32, 0.92, ink);\n  hsv(h0 + 0.03, 0.6 - 0.4 * warm, 0.115, board);\n  hsv(h0 + 0.5, 0.42, 1, chord);\n  hsv(h0, 0.2, 0.34, base);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      const p = r * W + col, ln = K.line[p], fl = K.fill[p];\n      R[p] = (plane[0] * fl + ink[0] * ln) * 255;\n      G[p] = (plane[1] * fl + ink[1] * ln) * 255;\n      B[p] = (plane[2] * fl + ink[2] * ln) * 255;\n    }\n  for (let y = 0; y \u003c P; y++)\n    for (let x = 0; x \u003c P; x++) {\n      const p = (BY - y) * W + BX + x;\n      R[p] = board[0] * 255;\n      G[p] = board[1] * 255;\n      B[p] = board[2] * 255;\n    }\n  for (const [x, y] of K.pts) add(S, BX + x, BY - y, base, 255);\n\n  // The lines of the last few steps, fading: a pencil of lines through G.\n  for (const q of S.past) {\n    const w = 1 - (S.gs + tau - q.gs) / linger(S);\n    if (w \u003c= 0) continue;\n    const ps = q.st, s0 = ps.start;\n    realLine(S, ps.rx, ps.ry, ps.rm, ps.rv, chord, 130 * w);\n    for (let t = 0; t \u003c P; t++) {\n      const x = md(s0[0] + ps.dx * t), y = md(s0[1] + ps.dy * t);\n      add(S, BX + x, BY - y, chord, 55 * w);\n    }\n  }\n\n  // The trail: each multiple in its order's hue, the whole cycle once round\n  // the wheel, held for most of the trail and then let go.\n  const L = trailLen(S), now = S.gs + tau;\n  for (const t of S.trail) {\n    const age = now - t.gs;\n    let v = age \u003c 0.6 * L ? 1 : cl((L - age) / (0.4 * L), 0, 1);\n    if (t.ghost) v *= cl(1 - t.ghost, 0, 1);\n    if (v \u003c= 0.01) continue;\n    hsv(h0 + 0.42 + t.k / N, 0.88, 1, c);\n    add(S, BX + t.fp[0], BY - t.fp[1], c, 255 * v);\n    if (inWin(t.re)) disc(S, t.re[0], t.re[1], 1.5, c, 235 * v);\n    for (const [dx, dy] of NB) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 95 * v);\n    // A fresh landing blooms for a step and a half.\n    const bl = 1 - age / 1.5;\n    if (bl > 0 && !t.ghost) {\n      for (const [dx, dy] of NB2) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 110 * bl);\n      if (inWin(t.re)) disc(S, t.re[0], t.re[1], 2.6, c, 90 * bl);\n    }\n  }\n\n  // The step under way.\n  const lineV = tau \u003c 0.08 ? tau / 0.08 : tau > 0.88 ? (1 - tau) / 0.12 : 1;\n  // Real: the line, the third point, the mirror, the new point.\n  realLine(S, st.rx, st.ry, st.rm, st.rv, chord, 190 * lineV);\n  const mir = cl((tau - T_MIR0) / (T_MIR1 - T_MIR0), 0, 1);\n  if (tau > T_LINE * 0.9) {\n    if (st.r3 && inWin(st.r3)) disc(S, st.r3[0], st.r3[1], 1.3, white, 200 * lineV);\n    if (!st.r3) for (let r = 0; r \u003c 2; r++) add(S, round(px(st.rx)), r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.r3) {\n    const ya = py(st.r3[1]), yb = py(st.rn[1]), cc = round(px(st.r3[0]));\n    const yt = ya + (yb - ya) * mir;\n    for (let r = max(0, round(min(ya, yt))); r \u003c= min(TOPH - 1, round(max(ya, yt))); r++) if (r % 2 === 0) add(S, cc, r, white, 150 * lineV);\n  }\n  if (tau > T_MIR1 && st.rn && inWin(st.rn)) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.6, 1, c);\n    disc(S, st.rn[0], st.rn[1], 1.5, c, 255);\n  }\n  // F_61: the line's dots from Q_k, the head brightest, then the mirror.\n  const head = (min(tau, T_LINE) / T_LINE) * (P - 1), s0 = st.start;\n  for (let t = 0; t \u003c= head; t++) {\n    const x = md(s0[0] + st.dx * t), y = md(s0[1] + st.dy * t);\n    const on = K.onBoard[x * P + y];\n    const v = head - t \u003c 1 ? 1 : 0.85 + (on ? 0.15 : 0);\n    add(S, BX + x, BY - y, on ? white : chord, 230 * v * lineV);\n  }\n  if (head >= st.tR) {\n    if (st.third) {\n      const x = BX + st.third[0], y = BY - st.third[1];\n      for (const [dx, dy] of NB) add(S, x + dx, y + dy, white, 150 * lineV);\n    } else for (let r = OROW - 1; r \u003c= OROW; r++) add(S, BX + st.start[0], r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.third) {\n    const x = BX + st.third[0], ya = BY - st.third[1], yb = BY - st.next[1], yt = ya + (yb - ya) * mir;\n    for (let r = round(min(ya, yt)); r \u003c= round(max(ya, yt)); r++) if (r % 2 === 0) add(S, x, r, white, 120 * lineV);\n  }\n  if (tau > T_MIR1 && st.next) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.5, 1, c);\n    const x = BX + st.next[0], y = BY - st.next[1];\n    add(S, x, y, c, 255);\n    for (const [dx, dy] of NB) add(S, x + dx, y + dy, c, 140);\n  }\n  // G on both halves: white, with a dark ring round it on the real curve.\n  const gx = BX + S.g[0], gy = BY - S.g[1];\n  add(S, gx, gy, white, 255);\n  for (const [dx, dy] of NB) add(S, gx + dx, gy + dy, white, 120);\n  if (inWin(S.gr)) {\n    const cx = px(S.gr[0]), cy = py(S.gr[1]);\n    for (let r = floor(cy - 3); r \u003c= cy + 3; r++)\n      for (let q = floor(cx - 3); q \u003c= cx + 3; q++) {\n        if (r \u003c 0 || r >= TOPH || q \u003c 0 || q >= W) continue;\n        const dd = sqrt((q - cx) ** 2 + (r - cy) ** 2), p = r * W + q;\n        if (dd \u003c 2.6) {\n          const k = dd \u003c 1.4 ? 1 : 0.15;\n          R[p] = 255 * k;\n          G[p] = 255 * k;\n          B[p] = 255 * k;\n        }\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-elliptic-chords","type":"code","name":"elliptic-chords","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Elliptic Chords\n// Family:  number\n// Idea:    The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: elliptic curve group law, chord and tangent (Henri Poincaré, 1901), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1\n//\n// Knob 1: Hue. Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky.\n// Knob 2: Speed. Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44.\n// Knob 3: Curve. The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points.\n// Knob 4: Trail. Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below.\n// Buttons: K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.\n\nconst W = 64, H = 128, P = 61, A = -6, CMIN = -4, CMAX = 8;\n// The real window: x from -3.15 to 4.45 over the 64 columns, y from -7.75 to\n// 7.75 over rows 0..62, with y = 0 on row 31. Lines stay lines under this\n// stretch, and the mirror in the x-axis stays a vertical move.\nconst TOPH = 63, X0 = -3.15, X1 = 4.45, SX = W / (X1 - X0), YM = 7.75, SY = TOPH / (2 * YM), YC = 31;\n// The F_61 board: element (x, y) is column BX + x, row BY - y; O sits on row OROW above it.\nconst BX = 1, BY = 126, OROW = 64;\n// Phases of one group step: the line, the mirror, the landing.\nconst T_LINE = 0.5, T_MIR0 = 0.55, T_MIR1 = 0.78;\nconst NT = 1024;\n// Group steps a second for each unit of Speed.\nconst RATE = 0.75;\nconst { floor, min, max, abs, sqrt, sin, cos, tan, acos, cbrt, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (v) => ((v % P) + P) % P;\nconst NB = [[1, 0], [-1, 0], [0, 1], [0, -1]];\nconst NB2 = [[2, 0], [-2, 0], [0, 2], [0, -2], [1, 1], [1, -1], [-1, 1], [-1, -1]];\n\n// Inverses mod 61, by Fermat.\nconst INV = new Int32Array(P);\nfor (let i = 1; i \u003c P; i++) {\n  let r = 1, e = P - 2, q = i;\n  while (e) {\n    if (e & 1) r = (r * q) % P;\n    q = (q * q) % P;\n    e >>= 1;\n  }\n  INV[i] = r;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// ---- F_61 -------------------------------------------------------------------\n// A point is [x, y] with entries 0..60, or null for O.\nfunction fpAdd(p, q, b) {\n  if (!p) return q;\n  if (!q) return p;\n  if (p[0] === q[0] && md(p[1] + q[1]) === 0) return null;\n  const m = p[0] === q[0] ? md((3 * p[0] * p[0] + A) * INV[md(2 * p[1])]) : md((q[1] - p[1]) * INV[md(q[0] - p[0])]);\n  const x = md(m * m - p[0] - q[0]);\n  return [x, md(m * (p[0] - x) - p[1])];\n}\n\nfunction fpOrder(g, b) {\n  let q = g, n = 1;\n  while (q && n \u003c 200) {\n    q = fpAdd(q, g, b);\n    n++;\n  }\n  return n;\n}\n\n// ---- the real curve -----------------------------------------------------------\n// The roots of x^3 - 6x + b, largest first: three when 27 b^2 \u003c 864, so\n// when |b| \u003c 5.66, and then the curve has an egg over [e3, e2].\nfunction roots(b) {\n  if (4 * A * A * A + 27 * b * b \u003c 0) {\n    const r = 2 * sqrt(-A / 3), th = acos(((3 * b) / (2 * A)) * sqrt(-3 / A)) / 3;\n    return [0, 1, 2].map((k) => r * cos(th - (2 * PI * k) / 3)).sort((p, q) => q - p);\n  }\n  const s = sqrt((b * b) / 4 + (A * A * A) / 27);\n  let x = cbrt(-b / 2 + s) + cbrt(-b / 2 - s);\n  for (let i = 0; i \u003c 6; i++) x -= (x * x * x + A * x + b) / (3 * x * x + A);\n  return [x];\n}\n\n// The real points of the curve as a group are a circle, R/wZ, times {0, 1}\n// when the egg is there. The circle is measured by the invariant\n// differential dx/y: on the long branch u(x) = int_x^inf dt/sqrt(f), with\n// t = e1 + tan^2(phi), and on the egg v(x) = int_e3^x dt/sqrt(f), with\n// t = e3 + (e2 - e3) sin^2(theta), both free of the square-root ends. Both\n// halves of the circle come to the same w/2. Checked against the chord rule\n// in a scratch script: main(u1) + main(u2) = main(u1 + u2), main(u) + egg(v)\n// = egg(u + v) and egg(v1) + egg(v2) = main(v1 + v2), to 2e-6 in the window.\nfunction realCurve(b) {\n  const R = roots(b), e1 = R[0], c = e1 * e1 + A;\n  const U = new Float64Array(NT + 1), h = PI / 2 / NT;\n  const gm = (ph) => {\n    if (ph >= PI / 2 - 1e-12) return 2;\n    const s = tan(ph), t = e1 + s * s, co = cos(ph);\n    return 2 / sqrt(t * t + e1 * t + c) / (co * co);\n  };\n  for (let i = NT - 1; i >= 0; i--) U[i] = U[i + 1] + (h / 6) * (gm(i * h) + 4 * gm((i + 0.5) * h) + gm((i + 1) * h));\n  const C = { b, R, U, w: 2 * U[0], egg: null };\n  if (R.length === 3) {\n    const e2 = R[1], e3 = R[2], V = new Float64Array(NT + 1);\n    const ge = (th) => 2 / sqrt(e1 - e3 - (e2 - e3) * sin(th) ** 2);\n    for (let i = 0; i \u003c NT; i++) V[i + 1] = V[i] + (h / 6) * (ge(i * h) + 4 * ge((i + 0.5) * h) + ge((i + 1) * h));\n    C.egg = { V, e2, e3 };\n  }\n  return C;\n}\n\nconst f = (x, b) => x * x * x + A * x + b;\n\n// Fractional index where the monotone table T meets the value t.\nfunction seek(T, t, rising) {\n  let lo = 0, hi = NT;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (T[m] \u003c t === rising) lo = m;\n    else hi = m;\n  }\n  return lo + (t - T[lo]) / (T[hi] - T[lo] || 1);\n}\n\n// The real point at parameter u on the branch (s = 0) or the egg (s = 1);\n// null for O.\nfunction realPoint(C, u, s) {\n  const w = C.w;\n  u -= floor(u / w) * w;\n  if (s === 0 && (u \u003c 1e-9 || w - u \u003c 1e-9)) return null;\n  const up = u \u003c= w / 2, q = up ? u : w - u;\n  let x;\n  if (s === 0) {\n    const ph = (seek(C.U, q, false) * PI) / 2 / NT;\n    x = C.R[0] + tan(ph) ** 2;\n  } else {\n    const { V, e2, e3 } = C.egg, th = (seek(V, q, true) * PI) / 2 / NT;\n    x = e3 + (e2 - e3) * sin(th) ** 2;\n  }\n  const y = sqrt(max(0, f(x, C.b)));\n  // The egg runs the other way round, so that main(u) + egg(v) = egg(u + v).\n  return [x, (up ? 1 : -1) * (s === 0 ? 1 : -1) * y];\n}\n\n// ---- one curve: both halves ---------------------------------------------------\nfunction buildCurve(b) {\n  const pts = [];\n  for (let x = 0; x \u003c P; x++) for (let y = 0; y \u003c P; y++) if (md(y * y - f(x, b)) === 0) pts.push([x, y]);\n  let N = 0, gens = [];\n  for (const p of pts) {\n    const o = fpOrder(p, b);\n    if (o > N) (N = o), (gens = []);\n    if (o === N) gens.push(p);\n  }\n  const C = realCurve(b);\n  const onBoard = new Uint8Array(P * P);\n  for (const [x, y] of pts) onBoard[x * P + y] = 1;\n  // The static picture of the real curve: a 1.4-LED line where y^2 = f(x),\n  // found by the distance |y^2 - f| / |gradient| in LEDs, and a soft fill on\n  // the side where f(x) > y^2, the inside of the egg and of the branch.\n  const line = new Float32Array(W * TOPH), fill = new Float32Array(W * TOPH);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      let acc = 0, inside = 0;\n      for (let sy = 0; sy \u003c 3; sy++)\n        for (let sx = 0; sx \u003c 3; sx++) {\n          const x = X0 + (col + (sx + 0.5) / 3) / SX, y = (YC + 0.5 - (r + (sy + 0.5) / 3)) / SY;\n          const F = y * y - f(x, b), gx = (3 * x * x + A) / SX, gy = (2 * y) / SY;\n          const d = abs(F) / (sqrt(gx * gx + gy * gy) + 1e-9);\n          acc += cl(1.15 - d, 0, 1);\n          if (F \u003c 0) inside++;\n        }\n      line[r * W + col] = acc / 9;\n      fill[r * W + col] = inside / 9;\n    }\n  return { b, pts, N, gens, C, onBoard, line, fill };\n}\n\n// ---- the cycle ----------------------------------------------------------------\n// Q_k = kG. Step k goes from Q_k to Q_k+1 = Q_k + G: the line through G and\n// Q_k (the tangent at G when k = 1, the vertical through G when Q_k is O or\n// -G), its third point R, and R mirrored. The real generator is a point of\n// the same order N: on the egg at parameter jw/N when there is an egg and N\n// is even, so the odd multiples land on the egg and the even ones on the\n// branch, otherwise on the branch.\nfunction startCycle(S, fresh) {\n  const K = S.curve, N = K.N, C = K.C;\n  S.g = K.gens[floor(random() * K.gens.length)];\n  S.side = C.egg && N % 2 === 0 ? 1 : 0;\n  const js = [];\n  for (let j = 1; j \u003c N; j++) {\n    let a = j, bb = N;\n    while (bb) [a, bb] = [bb, a % bb];\n    if (a !== 1) continue;\n    const g = realPoint(C, (j * C.w) / N, S.side);\n    if (g && g[0] > X0 + 0.3 && g[0] \u003c X1 - 0.3 && abs(g[1]) \u003c YM - 0.4) js.push(j);\n  }\n  S.j = js.length ? js[floor(random() * js.length)] : 1;\n  S.gr = realPoint(C, (S.j * C.w) / N, S.side);\n  for (const t of S.trail) t.ghost = t.ghost || 1e-6;\n  if (fresh) {\n    // The opening shows the cycle already under way: 80% of it lit.\n    const k0 = round(0.8 * N);\n    let q = null;\n    for (let k = 1; k \u003c= k0; k++) {\n      q = fpAdd(q, S.g, K.b);\n      S.trail.push({ k, gs: S.gs - (k0 - k), fp: q, re: realK(S, k), ghost: 0 });\n    }\n    S.k = k0;\n    S.q = q;\n  } else {\n    S.k = 0;\n    S.q = null;\n  }\n  planStep(S);\n}\n\nconst realK = (S, k) => realPoint(S.curve.C, (k * S.j * S.curve.C.w) / S.curve.N, (k * S.side) & 1);\n\n// The F_61 line y = mx + c is the lattice of points (t, mt) mod 61 shifted\n// to one of them. Its shortest vector, found by Lagrange's reduction of the\n// basis (1, m), (0, 61), is never more than 8.4 long, and stepping by it still\n// visits all 61 points, so the walk runs along short streaks that wrap round\n// the square instead of jumping m rows at a time.\nfunction shortStep(m) {\n  let ax = 1, ay = m > P / 2 ? m - P : m, bx = 0, by = P;\n  const n2 = (x, y) => x * x + y * y;\n  for (let i = 0; i \u003c 20; i++) {\n    if (n2(bx, by) \u003c n2(ax, ay)) [ax, ay, bx, by] = [bx, by, ax, ay];\n    const mu = round((ax * bx + ay * by) / n2(ax, ay));\n    if (mu === 0) break;\n    bx -= mu * ax;\n    by -= mu * ay;\n  }\n  return [md(ax), md(ay)];\n}\n\nfunction planStep(S) {\n  const K = S.curve, N = K.N, k = S.k, g = S.g, q = S.q;\n  const st = { k, vert: false, m: 0, start: q || g, third: null, next: null, rm: 0, rx: 0, ry: 0, rv: false, r3: null, rn: null, tR: -1 };\n  // F_61: the line's slope, its 61 dots from Q_k (from G when Q_k is O), and\n  // how many steps along it the third point falls.\n  if (!q || (q[0] === g[0] && md(q[1] + g[1]) === 0)) st.vert = true;\n  else st.m = q[0] === g[0] ? md((3 * g[0] * g[0] + A) * INV[md(2 * g[1])]) : md((q[1] - g[1]) * INV[md(q[0] - g[0])]);\n  st.next = fpAdd(q, g, K.b);\n  st.third = st.next ? [st.next[0], md(-st.next[1])] : null;\n  [st.dx, st.dy] = st.vert ? [0, 1] : shortStep(st.m);\n  const s0 = st.start, stepT = (pt) => (st.vert ? md(pt[1] - s0[1]) : md((pt[0] - s0[0]) * INV[st.dx]));\n  st.tR = st.third ? stepT(st.third) : P - 1;\n  // The real line, through G_r with slope rm or vertical.\n  const G = S.gr, Q = k === 0 ? null : realK(S, k);\n  if (k === 0 || k === N - 1) st.rv = true;\n  else if (k === 1) st.rm = (3 * G[0] * G[0] + A) / (2 * G[1]);\n  else if (Q) st.rm = (Q[1] - G[1]) / (Q[0] - G[0]);\n  else st.rm = 0;\n  st.rx = G[0];\n  st.ry = G[1];\n  if (k === N - 1) st.r3 = null;\n  else if (k === 0) st.r3 = [G[0], -G[1]];\n  else {\n    const x3 = st.rm * st.rm - G[0] - (Q ? Q[0] : G[0]);\n    st.r3 = [x3, G[1] + st.rm * (x3 - G[0])];\n  }\n  st.rn = st.r3 ? [st.r3[0], -st.r3[1]] : null;\n  S.step = st;\n}\n\nfunction finishStep(S) {\n  const st = S.step, N = S.curve.N;\n  S.past.push({ st, gs: S.gs + 1 });\n  S.gs++;\n  S.k = (S.k + 1) % N;\n  S.q = st.next;\n  if (st.next) S.trail.push({ k: S.k, gs: S.gs, fp: st.next, re: st.rn, ghost: 0 });\n  planStep(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trailK: 0.06, b: null, curve: null, curves: {}, g: null, gr: null, j: 1, side: 0,\n    k: 0, q: null, gs: 0, tau: 0, step: null, trail: [], past: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0];\n  S.speed = cl(kv[1], 0.2, 3);\n  S.trailK = cl(kv[3], 0, 1);\n  const b = round(cl(kv[2], CMIN, CMAX));\n  if (b !== S.b) {\n    S.b = b;\n    S.curve = S.curves[b] || (S.curves[b] = buildCurve(b));\n    S.trail.length = 0;\n    S.past.length = 0;\n    S.tau = 0;\n    startCycle(S, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.tau = 0;\n    startCycle(S, false);\n  }\n  S.tau += d * S.speed * RATE;\n  while (S.tau >= 1) {\n    S.tau -= 1;\n    finishStep(S);\n  }\n  // Ghosts of an old cycle fade out over 1.5 seconds.\n  for (const t of S.trail) if (t.ghost) t.ghost += d / 1.5;\n  const L = trailLen(S);\n  S.trail = S.trail.filter((t) => (t.ghost ? t.ghost \u003c 1 : S.gs + S.tau - t.gs \u003c L + 1));\n  S.past = S.past.filter((q) => S.gs + S.tau - q.gs \u003c linger(S));\n}\n\n// Past lines linger, fading: 1.6 steps at Trail 0, 8 steps at 1. They all\n// pass through G.\nconst linger = (S) => 1.6 + 6.4 * S.trailK ** 1.2;\n\nconst trailLen = (S) => 2 + (S.curve.N - 2) * (1 - S.trailK) ** 1.5;\n\n// ---- drawing ------------------------------------------------------------------\nfunction add(S, x, y, col, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0) return;\n  const p = y * W + x;\n  S.R[p] += col[0] * v;\n  S.G[p] += col[1] * v;\n  S.B[p] += col[2] * v;\n}\n\n// Real coordinates to LED coordinates (LED centres at whole numbers).\nconst px = (x) => (x - X0) * SX - 0.5;\nconst py = (y) => YC - y * SY;\n\nfunction disc(S, x, y, rad, col, v) {\n  const cx = px(x), cy = py(y);\n  for (let r = floor(cy - rad - 1); r \u003c= cy + rad + 1; r++)\n    for (let c = floor(cx - rad - 1); c \u003c= cx + rad + 1; c++) {\n      if (r \u003c 0 || r >= TOPH) continue;\n      const dd = sqrt((c - cx) ** 2 + (r - cy) ** 2);\n      add(S, c, r, col, v * cl(rad + 0.5 - dd, 0, 1));\n    }\n}\n\n// The real line through (x0, y0) with slope m, or the vertical through x0,\n// clipped to the window: one LED wide with a soft LED of glow either side.\nfunction realLine(S, x0, y0, m, vert, col, v) {\n  const k = vert ? 0 : (-m * SY) / SX, ax = px(x0), ay = py(y0);\n  if (!vert && abs(k) \u003c= 1) {\n    // Shallow: walk the columns, spread across rows.\n    for (let c = 0; c \u003c W; c++) {\n      const r = ay + k * (c - ax), r0 = floor(r);\n      for (let q = r0 - 1; q \u003c= r0 + 2; q++) if (q >= 0 && q \u003c TOPH) add(S, c, q, col, v * glow(abs(q - r)));\n    }\n  } else {\n    for (let r = 0; r \u003c TOPH; r++) {\n      const c = vert ? ax : ax + (r - ay) / k, c0 = floor(c);\n      for (let q = c0 - 1; q \u003c= c0 + 2; q++) add(S, q, r, col, v * glow(abs(q - c)));\n    }\n  }\n}\nconst glow = (d) => (d \u003c 1 ? 1 - 0.7 * d : d \u003c 2 ? 0.3 * (2 - d) : 0);\n\nconst inWin = (p) => p && p[0] > X0 - 0.2 && p[0] \u003c X1 + 0.2 && abs(p[1]) \u003c YM + 0.3;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.curve) return;\n  const { R, G, B, c } = S, K = S.curve, N = K.N, st = S.step, tau = S.tau;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h0 = S.hue + 0.6;\n  // The plane inside the real curve and the board are dim tints.\n  const plane = [0, 0, 0], ink = [0, 0, 0], board = [0, 0, 0], chord = [0, 0, 0], white = [1, 1, 1], base = [0, 0, 0];\n  // Round orange and yellow the dim tints lose most of their colour, or\n  // they would read brown and olive.\n  const hw = h0 + 0.03 - floor(h0 + 0.03), warm = cl(1 - abs(hw - 0.12) / 0.1, 0, 1);\n  hsv(h0, 0.75 - 0.5 * warm, 0.16, plane);\n  hsv(h0 - 0.02, 0.32, 0.92, ink);\n  hsv(h0 + 0.03, 0.6 - 0.4 * warm, 0.115, board);\n  hsv(h0 + 0.5, 0.42, 1, chord);\n  hsv(h0, 0.2, 0.34, base);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      const p = r * W + col, ln = K.line[p], fl = K.fill[p];\n      R[p] = (plane[0] * fl + ink[0] * ln) * 255;\n      G[p] = (plane[1] * fl + ink[1] * ln) * 255;\n      B[p] = (plane[2] * fl + ink[2] * ln) * 255;\n    }\n  for (let y = 0; y \u003c P; y++)\n    for (let x = 0; x \u003c P; x++) {\n      const p = (BY - y) * W + BX + x;\n      R[p] = board[0] * 255;\n      G[p] = board[1] * 255;\n      B[p] = board[2] * 255;\n    }\n  for (const [x, y] of K.pts) add(S, BX + x, BY - y, base, 255);\n\n  // The lines of the last few steps, fading: a pencil of lines through G.\n  for (const q of S.past) {\n    const w = 1 - (S.gs + tau - q.gs) / linger(S);\n    if (w \u003c= 0) continue;\n    const ps = q.st, s0 = ps.start;\n    realLine(S, ps.rx, ps.ry, ps.rm, ps.rv, chord, 130 * w);\n    for (let t = 0; t \u003c P; t++) {\n      const x = md(s0[0] + ps.dx * t), y = md(s0[1] + ps.dy * t);\n      add(S, BX + x, BY - y, chord, 55 * w);\n    }\n  }\n\n  // The trail: each multiple in its order's hue, the whole cycle once round\n  // the wheel, held for most of the trail and then let go.\n  const L = trailLen(S), now = S.gs + tau;\n  for (const t of S.trail) {\n    const age = now - t.gs;\n    let v = age \u003c 0.6 * L ? 1 : cl((L - age) / (0.4 * L), 0, 1);\n    if (t.ghost) v *= cl(1 - t.ghost, 0, 1);\n    if (v \u003c= 0.01) continue;\n    hsv(h0 + 0.42 + t.k / N, 0.88, 1, c);\n    add(S, BX + t.fp[0], BY - t.fp[1], c, 255 * v);\n    if (inWin(t.re)) disc(S, t.re[0], t.re[1], 1.5, c, 235 * v);\n    for (const [dx, dy] of NB) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 95 * v);\n    // A fresh landing blooms for a step and a half.\n    const bl = 1 - age / 1.5;\n    if (bl > 0 && !t.ghost) {\n      for (const [dx, dy] of NB2) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 110 * bl);\n      if (inWin(t.re)) disc(S, t.re[0], t.re[1], 2.6, c, 90 * bl);\n    }\n  }\n\n  // The step under way.\n  const lineV = tau \u003c 0.08 ? tau / 0.08 : tau > 0.88 ? (1 - tau) / 0.12 : 1;\n  // Real: the line, the third point, the mirror, the new point.\n  realLine(S, st.rx, st.ry, st.rm, st.rv, chord, 190 * lineV);\n  const mir = cl((tau - T_MIR0) / (T_MIR1 - T_MIR0), 0, 1);\n  if (tau > T_LINE * 0.9) {\n    if (st.r3 && inWin(st.r3)) disc(S, st.r3[0], st.r3[1], 1.3, white, 200 * lineV);\n    if (!st.r3) for (let r = 0; r \u003c 2; r++) add(S, round(px(st.rx)), r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.r3) {\n    const ya = py(st.r3[1]), yb = py(st.rn[1]), cc = round(px(st.r3[0]));\n    const yt = ya + (yb - ya) * mir;\n    for (let r = max(0, round(min(ya, yt))); r \u003c= min(TOPH - 1, round(max(ya, yt))); r++) if (r % 2 === 0) add(S, cc, r, white, 150 * lineV);\n  }\n  if (tau > T_MIR1 && st.rn && inWin(st.rn)) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.6, 1, c);\n    disc(S, st.rn[0], st.rn[1], 1.5, c, 255);\n  }\n  // F_61: the line's dots from Q_k, the head brightest, then the mirror.\n  const head = (min(tau, T_LINE) / T_LINE) * (P - 1), s0 = st.start;\n  for (let t = 0; t \u003c= head; t++) {\n    const x = md(s0[0] + st.dx * t), y = md(s0[1] + st.dy * t);\n    const on = K.onBoard[x * P + y];\n    const v = head - t \u003c 1 ? 1 : 0.85 + (on ? 0.15 : 0);\n    add(S, BX + x, BY - y, on ? white : chord, 230 * v * lineV);\n  }\n  if (head >= st.tR) {\n    if (st.third) {\n      const x = BX + st.third[0], y = BY - st.third[1];\n      for (const [dx, dy] of NB) add(S, x + dx, y + dy, white, 150 * lineV);\n    } else for (let r = OROW - 1; r \u003c= OROW; r++) add(S, BX + st.start[0], r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.third) {\n    const x = BX + st.third[0], ya = BY - st.third[1], yb = BY - st.next[1], yt = ya + (yb - ya) * mir;\n    for (let r = round(min(ya, yt)); r \u003c= round(max(ya, yt)); r++) if (r % 2 === 0) add(S, x, r, white, 120 * lineV);\n  }\n  if (tau > T_MIR1 && st.next) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.5, 1, c);\n    const x = BX + st.next[0], y = BY - st.next[1];\n    add(S, x, y, c, 255);\n    for (const [dx, dy] of NB) add(S, x + dx, y + dy, c, 140);\n  }\n  // G on both halves: white, with a dark ring round it on the real curve.\n  const gx = BX + S.g[0], gy = BY - S.g[1];\n  add(S, gx, gy, white, 255);\n  for (const [dx, dy] of NB) add(S, gx + dx, gy + dy, white, 120);\n  if (inWin(S.gr)) {\n    const cx = px(S.gr[0]), cy = py(S.gr[1]);\n    for (let r = floor(cy - 3); r \u003c= cy + 3; r++)\n      for (let q = floor(cx - 3); q \u003c= cx + 3; q++) {\n        if (r \u003c 0 || r >= TOPH || q \u003c 0 || q >= W) continue;\n        const dd = sqrt((q - cx) ** 2 + (r - cy) ** 2), p = r * W + q;\n        if (dd \u003c 2.6) {\n          const k = dd \u003c 1.4 ? 1 : 0.15;\n          R[p] = 255 * k;\n          G[p] = 255 * k;\n          B[p] = 255 * k;\n        }\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky."},{"name":"Speed","min":0.2,"max":3,"about":"Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44."},{"name":"Curve","min":-4,"max":8,"about":"The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points."},{"name":"Trail","min":0,"max":1,"about":"Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below."}],"start":[0,2,0,0.06],"measures":{"motion":0.0496,"detail":0.0598,"edges":0.5832,"complexity":0.5264,"coverage":0.6226,"colour":0.1255,"drift":0.0238},"knobResponse":[0.0592,0.0309,0.1041,0.0281]},{"slug":"embossed-glow","title":"Embossed Glow","family":"cosmetic","round":37,"note":"엠보싱한 하이라이터의 눌린 면이 패널을 채우고, 떠도는 작은 램프를 향한 비탈이 부드러운 띠로 빛나요. 반짝이 알갱이는 면이 램프 쪽으로 7도 안에 설 때만 빛나서 반짝임이 능선을 타고 옮겨 가요. 6.5초마다 보이지 않는 손끝이 홈을 쓸어 엠보싱을 새틴 띠로 눌러 펴고, 네 번 쓸면 판이 다시 눌려요. K3 은 물결과 퀼팅 마름모, 갈매기, 비늘 무늬를 고르고, 누르면 판을 바로 다시 눌러요.","idea":"The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.","buttons":"K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.","code":"// ===== Patternflow pattern =====\n// Title:   Embossed Glow\n// Family:  cosmetic\n// Idea:    The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after embossed baked highlighters and pressed powder compacts\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1\n//\n// Knob 1: Hue. The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive.\n// Knob 2: Speed. At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again.\n// Knob 3: Relief. The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3.\n// Knob 4: Lamp. How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin.\n// Buttons: K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, abs, min, max, pow, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst fr = (v) => v - floor(v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The four reliefs as heights from 0 (the floor of a groove) to 1 (a crest),\n// in LEDs from the top left. Each repeats every 9 to 24 LEDs, wide enough\n// that a slope spans three or more LEDs and its band reads.\nfunction relief(kind, x, y) {\n  if (kind === 0) {\n    // Ripples round the middle, 9 LEDs apart, crests a little sharper than\n    // the troughs.\n    const r = hypot(x - 31.5, y - 63.5), c = 0.5 + 0.5 * cos((2 * PI * r) / 9);\n    return pow(c, 0.8) * sm(0, 4, r) + (1 - sm(0, 4, r)) * 0.8;\n  }\n  if (kind === 1) {\n    // Quilted diamonds 16 wide and 24 tall: each a pillow, stitched down\n    // along its edges.\n    const u = x / 16 + y / 24, v = x / 16 - y / 24, fu = fr(u) - 0.5, fv = fr(v) - 0.5;\n    return pow(cos(PI * fu) * cos(PI * fv), 0.55);\n  }\n  if (kind === 2) {\n    // Chevrons 16 LEDs a V, stacked every 10 rows, with a sharp crest and a\n    // long back slope like a pressed rib.\n    const yv = y + 8 * abs(2 * fr(x / 16 + 0.5) - 1), t = fr(yv / 10);\n    return t \u003c 0.3 ? sm(0, 0.3, t) : 1 - sm(0.3, 1, t);\n  }\n  // Scales 14 wide in rows 9 apart, each row overlapping the one above,\n  // every scale rising to a rounded lip at its lower edge.\n  const j = floor(y / 9 + 0.5);\n  let best = -1, hh = 0;\n  for (let jj = j + 1; jj >= j - 1; jj--) {\n    const off = jj & 1 ? 7 : 0, i = round((x - off) / 14), cx = i * 14 + off, cy = jj * 9 - 4;\n    const d = hypot(x - cx, (y - cy) * 1.05) / 9;\n    if (d \u003c 1 && y >= cy) {\n      best = jj;\n      hh = 0.2 + 0.8 * sm(0.1, 0.85, d) * (1 - sm(0.9, 1, d));\n      break;\n    }\n  }\n  return best \u003c 0 ? 0 : hh;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, kind: -1, lamp: 0.06, clock: 0, started: false,\n    rel: new Float32Array(N), wipe: new Float32Array(N), hgt: new Float32Array(N),\n    gx: new Float32Array(N), gy: new Float32Array(N), gw: new Float32Array(N), gt: new Uint8Array(N),\n    swipe: null, nextSwipe: 2.2, swipes: 0, press: -1, pal: new Float32Array(16), palHue: NaN,\n  });\n  // A shimmer grain under every LED: its facet leans up to 13 degrees off\n  // the surface, every way, so the glints gather where the surface itself\n  // nearly faces the half vector, along the lit flank of each ridge. Half the\n  // grains are bright enough to glint and one in three of those flips to the\n  // second tint.\n  for (let p = 0; p \u003c N; p++) {\n    const a = random() * 2 * PI, t = 0.23 * sqrt(random());\n    S.gx[p] = t * cos(a);\n    S.gy[p] = t * sin(a);\n    const g = random();\n    S.gw[p] = g \u003c 0.5 ? 0.5 + 0.5 * random() : 0.1 * random();\n    S.gt[p] = random() \u003c 0.33 ? 1 : 0;\n  }\n}\n\nfunction setRelief(S, kind) {\n  S.kind = kind;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) S.rel[y * W + x] = relief(kind, x, y);\n}\n\n// A swipe: a slightly bent stroke 9 to 13 LEDs wide, mostly up or down the\n// panel, entering and leaving near the edges.\nfunction newSwipe() {\n  const down = random() \u003c 0.5, x0 = 8 + random() * 48, x1 = 8 + random() * 48;\n  const y0 = down ? -6 : H + 6, y1 = down ? 30 + random() * 80 : 98 - random() * 80;\n  return {\n    x0, y0, x1, y1, bx: (x0 + x1) / 2 + (random() - 0.5) * 40, by: (y0 + y1) / 2,\n    r: 4.5 + random() * 2, t: 0, last: 0,\n  };\n}\n\nfunction stamp(S, x, y, r) {\n  for (let yy = max(0, floor(y - r - 2)); yy \u003c= min(H - 1, y + r + 2); yy++)\n    for (let xx = max(0, floor(x - r - 2)); xx \u003c= min(W - 1, x + r + 2); xx++) {\n      const d = hypot(xx - x, yy - y), w = 1 - sm(r - 1.5, r + 1.5, d), p = yy * W + xx;\n      if (w > S.wipe[p]) S.wipe[p] = w;\n    }\n}\n\nfunction stepSwipe(S, ds) {\n  const sw = S.swipe;\n  sw.t = min(1, sw.t + ds / 0.7);\n  // Ease in and out: the fingertip lands, drags and lifts.\n  const e = sm(0, 1, sw.t);\n  const n = max(1, Math.ceil((e - sw.last) * 120));\n  for (let i = 1; i \u003c= n; i++) {\n    const u = sw.last + ((e - sw.last) * i) / n, v = 1 - u;\n    stamp(S, v * v * sw.x0 + 2 * u * v * sw.bx + u * u * sw.x1, v * v * sw.y0 + 2 * u * v * sw.by + u * u * sw.y1, sw.r * (0.75 + 0.25 * sin(PI * min(1, u * 1.4))));\n  }\n  sw.last = e;\n  if (sw.t >= 1) S.swipe = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.lamp = cl(k[3], -1, 1);\n  const kind = cl(round(k[2]), 0, 3);\n  if (kind !== S.kind) setRelief(S, kind);\n  if (!S.started) {\n    // Open on a pan that has had one swipe already.\n    S.swipe = newSwipe();\n    S.swipe.x0 = 14;\n    S.swipe.x1 = 50;\n    S.swipe.y0 = -6;\n    S.swipe.y1 = 92;\n    S.swipe.bx = 6;\n    while (S.swipe) stepSwipe(S, 0.05);\n    S.started = true;\n  }\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  if (input.btnPressed && input.btnPressed[0] && S.press \u003c 0) S.press = 0;\n  if (S.press >= 0) {\n    // The pressing edge runs down from the top in 2.4 s, or 4.8 s at Speed\n    // 1 and below, so a tap is never a long wait. Above it every trough is\n    // gone; the last 12 rows over it are part way.\n    S.press += d * max(0.5, S.speed / 2);\n    const y1 = (S.press / 2.4) * (H + 24) - 12;\n    for (let y = 0; y \u003c min(H, y1); y++) {\n      const keep = sm(y1 - 12, y1, y);\n      for (let x = 0; x \u003c W; x++) if (S.wipe[y * W + x] > keep) S.wipe[y * W + x] = keep;\n    }\n    if (y1 > H + 12) S.press = -1;\n  }\n  if (S.swipe) stepSwipe(S, ds);\n  else if (S.clock >= S.nextSwipe) {\n    S.nextSwipe = S.clock + 6.5;\n    S.swipes++;\n    if (S.swipes % 5 === 0 && S.press \u003c 0) S.press = 0;\n    else S.swipe = newSwipe();\n  }\n}\n\nfunction palette(S) {\n  // At Hue 0 a pink pearl. Where the hue comes round to orange, gold and\n  // lime the body is laid paler and brighter and its shaded side leans to\n  // rose, as at half light those hues read brown or olive. Elsewhere the\n  // shaded side is the same hue a little deeper. The sheen is a pale tint a\n  // fourteenth of the wheel on, and the glints come in two tints, the\n  // shade's own and one a tenth on, as pearl pigment flips.\n  const h = S.hue + 0.9, hh = fr(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.03, hw) * (1 - sm(0.26, 0.38, hw));\n  hsv(h, 0.42 - 0.14 * warm, 0.94 + 0.05 * warm, S.pal, 0);\n  hsv(h - 0.12 * warm, 0.56 - 0.04 * warm, 1, S.pal, 3);\n  hsv(h + 0.07, 0.3, 1, S.pal, 6);\n  hsv(h, 0.22, 1, S.pal, 9);\n  hsv(h + 0.1, 0.3, 1, S.pal, 12);\n  S.pal[15] = warm;\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const { rel, wipe, hgt, gx, gy, gw, gt, pal } = S;\n  // The lamp wanders on a slow Lissajous path over the whole panel, 9 LEDs\n  // above it at Lamp -1, 32 at 0.06 and 64 at 1.\n  const t = S.clock, lx = 32 + 24 * sin(t * 0.37 + 1.1), ly = 64 + 44 * sin(t * 0.23 + 0.4);\n  const lh = 32 + (S.lamp >= 0.06 ? ((S.lamp - 0.06) / 0.94) * 32 : ((S.lamp - 0.06) / 1.06) * 23);\n  // Above 0.06 the room light comes up too: a light straight overhead, 2.4\n  // times the lamp at Lamp 1, which lights every flank alike and evens out\n  // the pool.\n  const up = S.lamp > 0.06 ? (S.lamp - 0.06) / 0.94 : 0, over = 2.4 * up, poolLift = 0.4 * up;\n  // The eye sways 1.5 degrees, as a shopper's would, so the glints twinkle\n  // even while the lamp holds still.\n  let ex = 0.026 * sin(t * 2.1), ey = 0.026 * sin(t * 1.7 + 2);\n  const en = 1 / sqrt(ex * ex + ey * ey + 1);\n  ex *= en;\n  ey *= en;\n  const ez = en;\n  // Height in LEDs: crests stand 2 above the grooves. Under a swipe the\n  // emboss is flattened to a trough 0.2 below the grooves, with a low lip of\n  // pushed powder at its edge. Under the pressing edge the emboss is pushed\n  // down to a sixth over a band 20 rows tall and springs back behind it.\n  const py1 = S.press >= 0 ? (S.press / 2.4) * (H + 24) - 12 : -1e9;\n  for (let y = 0; y \u003c H; y++) {\n    const rise = 1 - 0.85 * (1 - sm(0, 10, abs(y - py1 + 4)));\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, w = wipe[p];\n      hgt[p] = 2 * (rel[p] * rise * (1 - w) - 0.11 * w + 0.5 * w * (1 - w));\n    }\n  }\n  const warm = pal[15], amb = 0.22 + 0.36 * warm, COSG = cos((7 * PI) / 180);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, h = hgt[p];\n      const hx = (x \u003c W - 1 ? hgt[p + 1] : h) - (x > 0 ? hgt[p - 1] : h), hy = (y \u003c H - 1 ? hgt[p + W] : h) - (y > 0 ? hgt[p - W] : h);\n      let nx = -hx * 0.5, ny = -hy * 0.5, nz = 1;\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1);\n      nx *= nn;\n      ny *= nn;\n      nz *= nn;\n      let ldx = lx - x, ldy = ly - y, ldz = lh - h;\n      const flat2 = ldx * ldx + ldy * ldy;\n      let li = 1 / sqrt(flat2 + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz = ldz * li + over;\n      li = 1 / sqrt(ldx * ldx + ldy * ldy + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz *= li;\n      let hvx = ldx + ex, hvy = ldy + ey, hvz = ldz + ez;\n      const hn = 1 / sqrt(hvx * hvx + hvy * hvy + hvz * hvz);\n      hvx *= hn;\n      hvy *= hn;\n      hvz *= hn;\n      // The lamp's pool: full under it, half 40 LEDs out, never under 0.3.\n      const pool = 0.3 + 0.7 / (1 + flat2 / 1600) + poolLift, w = wipe[p];\n      // A slope lights by how much more it faces the lamp than the flat\n      // powder does (Lambert over the flat's own Lambert), so a low lamp\n      // rakes the whole pan, up to 1.7 times the flat on a facing flank and\n      // down to a fifth on the far one, while light from overhead lights\n      // every flank nearly alike. Rose, orange and yellow keep only 55% of\n      // that range, so their dark side never browns.\n      const fl = cl((0.7 * (nx * ldx + ny * ldy + nz * ldz)) / max(ldz, 0.12), 0.14, 1.2);\n      const lit = pool * (fl + (0.75 - fl) * 0.45 * warm);\n      // Satin sheen: broad on the grainy powder and broader still in a\n      // trough, where the finger has pressed it smooth and it glows as one.\n      const nh = max(0, nx * hvx + ny * hvy + nz * hvz), sheen = pow(nh, 12 - 6 * w) * (0.55 + 0.08 * w) * pool;\n      // A grain glints when its facet is within 7 degrees of the half vector.\n      const mx = nx + gx[p], my = ny + gy[p], mz = nz, md = (mx * hvx + my * hvy + mz * hvz) / sqrt(mx * mx + my * my + mz * mz);\n      let gl = 0;\n      if (md > COSG) {\n        const q = (md - COSG) / (1 - COSG);\n        gl = gw[p] * q * q * (1 - w) * (1 - w) * (0.5 + 0.7 * pool) * 1.6;\n      }\n      const body = (amb + (1 - amb) * lit) * (0.94 + 0.12 * gw[p]), o = gt[p] ? 12 : 9;\n      // Lit faces take the body colour, shaded ones the shade colour, and a\n      // trough leans a third of the way to the shade colour.\n      const u = cl(lit, 0, 1) * (1 - 0.35 * w), v = 1 - u;\n      let r = (pal[0] * u + pal[3] * v) * body + pal[6] * sheen + pal[o] * gl;\n      let g = (pal[1] * u + pal[4] * v) * body + pal[7] * sheen + pal[o + 1] * gl;\n      let b = (pal[2] * u + pal[5] * v) * body + pal[8] * sheen + pal[o + 2] * gl;\n      // Past full brightness the colour is scaled down whole rather than\n      // clipped channel by channel, so a glint stays a tint and not white.\n      const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (m > 1) (r /= m), (g /= m), (b /= m);\n      display.setPixel(x, y, 255 * r, 255 * g, 255 * b);\n    }\n}\n","layer":{"id":"layer-embossed-glow","type":"code","name":"embossed-glow","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Embossed Glow\n// Family:  cosmetic\n// Idea:    The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after embossed baked highlighters and pressed powder compacts\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1\n//\n// Knob 1: Hue. The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive.\n// Knob 2: Speed. At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again.\n// Knob 3: Relief. The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3.\n// Knob 4: Lamp. How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin.\n// Buttons: K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, abs, min, max, pow, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst fr = (v) => v - floor(v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The four reliefs as heights from 0 (the floor of a groove) to 1 (a crest),\n// in LEDs from the top left. Each repeats every 9 to 24 LEDs, wide enough\n// that a slope spans three or more LEDs and its band reads.\nfunction relief(kind, x, y) {\n  if (kind === 0) {\n    // Ripples round the middle, 9 LEDs apart, crests a little sharper than\n    // the troughs.\n    const r = hypot(x - 31.5, y - 63.5), c = 0.5 + 0.5 * cos((2 * PI * r) / 9);\n    return pow(c, 0.8) * sm(0, 4, r) + (1 - sm(0, 4, r)) * 0.8;\n  }\n  if (kind === 1) {\n    // Quilted diamonds 16 wide and 24 tall: each a pillow, stitched down\n    // along its edges.\n    const u = x / 16 + y / 24, v = x / 16 - y / 24, fu = fr(u) - 0.5, fv = fr(v) - 0.5;\n    return pow(cos(PI * fu) * cos(PI * fv), 0.55);\n  }\n  if (kind === 2) {\n    // Chevrons 16 LEDs a V, stacked every 10 rows, with a sharp crest and a\n    // long back slope like a pressed rib.\n    const yv = y + 8 * abs(2 * fr(x / 16 + 0.5) - 1), t = fr(yv / 10);\n    return t \u003c 0.3 ? sm(0, 0.3, t) : 1 - sm(0.3, 1, t);\n  }\n  // Scales 14 wide in rows 9 apart, each row overlapping the one above,\n  // every scale rising to a rounded lip at its lower edge.\n  const j = floor(y / 9 + 0.5);\n  let best = -1, hh = 0;\n  for (let jj = j + 1; jj >= j - 1; jj--) {\n    const off = jj & 1 ? 7 : 0, i = round((x - off) / 14), cx = i * 14 + off, cy = jj * 9 - 4;\n    const d = hypot(x - cx, (y - cy) * 1.05) / 9;\n    if (d \u003c 1 && y >= cy) {\n      best = jj;\n      hh = 0.2 + 0.8 * sm(0.1, 0.85, d) * (1 - sm(0.9, 1, d));\n      break;\n    }\n  }\n  return best \u003c 0 ? 0 : hh;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, kind: -1, lamp: 0.06, clock: 0, started: false,\n    rel: new Float32Array(N), wipe: new Float32Array(N), hgt: new Float32Array(N),\n    gx: new Float32Array(N), gy: new Float32Array(N), gw: new Float32Array(N), gt: new Uint8Array(N),\n    swipe: null, nextSwipe: 2.2, swipes: 0, press: -1, pal: new Float32Array(16), palHue: NaN,\n  });\n  // A shimmer grain under every LED: its facet leans up to 13 degrees off\n  // the surface, every way, so the glints gather where the surface itself\n  // nearly faces the half vector, along the lit flank of each ridge. Half the\n  // grains are bright enough to glint and one in three of those flips to the\n  // second tint.\n  for (let p = 0; p \u003c N; p++) {\n    const a = random() * 2 * PI, t = 0.23 * sqrt(random());\n    S.gx[p] = t * cos(a);\n    S.gy[p] = t * sin(a);\n    const g = random();\n    S.gw[p] = g \u003c 0.5 ? 0.5 + 0.5 * random() : 0.1 * random();\n    S.gt[p] = random() \u003c 0.33 ? 1 : 0;\n  }\n}\n\nfunction setRelief(S, kind) {\n  S.kind = kind;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) S.rel[y * W + x] = relief(kind, x, y);\n}\n\n// A swipe: a slightly bent stroke 9 to 13 LEDs wide, mostly up or down the\n// panel, entering and leaving near the edges.\nfunction newSwipe() {\n  const down = random() \u003c 0.5, x0 = 8 + random() * 48, x1 = 8 + random() * 48;\n  const y0 = down ? -6 : H + 6, y1 = down ? 30 + random() * 80 : 98 - random() * 80;\n  return {\n    x0, y0, x1, y1, bx: (x0 + x1) / 2 + (random() - 0.5) * 40, by: (y0 + y1) / 2,\n    r: 4.5 + random() * 2, t: 0, last: 0,\n  };\n}\n\nfunction stamp(S, x, y, r) {\n  for (let yy = max(0, floor(y - r - 2)); yy \u003c= min(H - 1, y + r + 2); yy++)\n    for (let xx = max(0, floor(x - r - 2)); xx \u003c= min(W - 1, x + r + 2); xx++) {\n      const d = hypot(xx - x, yy - y), w = 1 - sm(r - 1.5, r + 1.5, d), p = yy * W + xx;\n      if (w > S.wipe[p]) S.wipe[p] = w;\n    }\n}\n\nfunction stepSwipe(S, ds) {\n  const sw = S.swipe;\n  sw.t = min(1, sw.t + ds / 0.7);\n  // Ease in and out: the fingertip lands, drags and lifts.\n  const e = sm(0, 1, sw.t);\n  const n = max(1, Math.ceil((e - sw.last) * 120));\n  for (let i = 1; i \u003c= n; i++) {\n    const u = sw.last + ((e - sw.last) * i) / n, v = 1 - u;\n    stamp(S, v * v * sw.x0 + 2 * u * v * sw.bx + u * u * sw.x1, v * v * sw.y0 + 2 * u * v * sw.by + u * u * sw.y1, sw.r * (0.75 + 0.25 * sin(PI * min(1, u * 1.4))));\n  }\n  sw.last = e;\n  if (sw.t >= 1) S.swipe = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.lamp = cl(k[3], -1, 1);\n  const kind = cl(round(k[2]), 0, 3);\n  if (kind !== S.kind) setRelief(S, kind);\n  if (!S.started) {\n    // Open on a pan that has had one swipe already.\n    S.swipe = newSwipe();\n    S.swipe.x0 = 14;\n    S.swipe.x1 = 50;\n    S.swipe.y0 = -6;\n    S.swipe.y1 = 92;\n    S.swipe.bx = 6;\n    while (S.swipe) stepSwipe(S, 0.05);\n    S.started = true;\n  }\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  if (input.btnPressed && input.btnPressed[0] && S.press \u003c 0) S.press = 0;\n  if (S.press >= 0) {\n    // The pressing edge runs down from the top in 2.4 s, or 4.8 s at Speed\n    // 1 and below, so a tap is never a long wait. Above it every trough is\n    // gone; the last 12 rows over it are part way.\n    S.press += d * max(0.5, S.speed / 2);\n    const y1 = (S.press / 2.4) * (H + 24) - 12;\n    for (let y = 0; y \u003c min(H, y1); y++) {\n      const keep = sm(y1 - 12, y1, y);\n      for (let x = 0; x \u003c W; x++) if (S.wipe[y * W + x] > keep) S.wipe[y * W + x] = keep;\n    }\n    if (y1 > H + 12) S.press = -1;\n  }\n  if (S.swipe) stepSwipe(S, ds);\n  else if (S.clock >= S.nextSwipe) {\n    S.nextSwipe = S.clock + 6.5;\n    S.swipes++;\n    if (S.swipes % 5 === 0 && S.press \u003c 0) S.press = 0;\n    else S.swipe = newSwipe();\n  }\n}\n\nfunction palette(S) {\n  // At Hue 0 a pink pearl. Where the hue comes round to orange, gold and\n  // lime the body is laid paler and brighter and its shaded side leans to\n  // rose, as at half light those hues read brown or olive. Elsewhere the\n  // shaded side is the same hue a little deeper. The sheen is a pale tint a\n  // fourteenth of the wheel on, and the glints come in two tints, the\n  // shade's own and one a tenth on, as pearl pigment flips.\n  const h = S.hue + 0.9, hh = fr(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.03, hw) * (1 - sm(0.26, 0.38, hw));\n  hsv(h, 0.42 - 0.14 * warm, 0.94 + 0.05 * warm, S.pal, 0);\n  hsv(h - 0.12 * warm, 0.56 - 0.04 * warm, 1, S.pal, 3);\n  hsv(h + 0.07, 0.3, 1, S.pal, 6);\n  hsv(h, 0.22, 1, S.pal, 9);\n  hsv(h + 0.1, 0.3, 1, S.pal, 12);\n  S.pal[15] = warm;\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const { rel, wipe, hgt, gx, gy, gw, gt, pal } = S;\n  // The lamp wanders on a slow Lissajous path over the whole panel, 9 LEDs\n  // above it at Lamp -1, 32 at 0.06 and 64 at 1.\n  const t = S.clock, lx = 32 + 24 * sin(t * 0.37 + 1.1), ly = 64 + 44 * sin(t * 0.23 + 0.4);\n  const lh = 32 + (S.lamp >= 0.06 ? ((S.lamp - 0.06) / 0.94) * 32 : ((S.lamp - 0.06) / 1.06) * 23);\n  // Above 0.06 the room light comes up too: a light straight overhead, 2.4\n  // times the lamp at Lamp 1, which lights every flank alike and evens out\n  // the pool.\n  const up = S.lamp > 0.06 ? (S.lamp - 0.06) / 0.94 : 0, over = 2.4 * up, poolLift = 0.4 * up;\n  // The eye sways 1.5 degrees, as a shopper's would, so the glints twinkle\n  // even while the lamp holds still.\n  let ex = 0.026 * sin(t * 2.1), ey = 0.026 * sin(t * 1.7 + 2);\n  const en = 1 / sqrt(ex * ex + ey * ey + 1);\n  ex *= en;\n  ey *= en;\n  const ez = en;\n  // Height in LEDs: crests stand 2 above the grooves. Under a swipe the\n  // emboss is flattened to a trough 0.2 below the grooves, with a low lip of\n  // pushed powder at its edge. Under the pressing edge the emboss is pushed\n  // down to a sixth over a band 20 rows tall and springs back behind it.\n  const py1 = S.press >= 0 ? (S.press / 2.4) * (H + 24) - 12 : -1e9;\n  for (let y = 0; y \u003c H; y++) {\n    const rise = 1 - 0.85 * (1 - sm(0, 10, abs(y - py1 + 4)));\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, w = wipe[p];\n      hgt[p] = 2 * (rel[p] * rise * (1 - w) - 0.11 * w + 0.5 * w * (1 - w));\n    }\n  }\n  const warm = pal[15], amb = 0.22 + 0.36 * warm, COSG = cos((7 * PI) / 180);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, h = hgt[p];\n      const hx = (x \u003c W - 1 ? hgt[p + 1] : h) - (x > 0 ? hgt[p - 1] : h), hy = (y \u003c H - 1 ? hgt[p + W] : h) - (y > 0 ? hgt[p - W] : h);\n      let nx = -hx * 0.5, ny = -hy * 0.5, nz = 1;\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1);\n      nx *= nn;\n      ny *= nn;\n      nz *= nn;\n      let ldx = lx - x, ldy = ly - y, ldz = lh - h;\n      const flat2 = ldx * ldx + ldy * ldy;\n      let li = 1 / sqrt(flat2 + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz = ldz * li + over;\n      li = 1 / sqrt(ldx * ldx + ldy * ldy + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz *= li;\n      let hvx = ldx + ex, hvy = ldy + ey, hvz = ldz + ez;\n      const hn = 1 / sqrt(hvx * hvx + hvy * hvy + hvz * hvz);\n      hvx *= hn;\n      hvy *= hn;\n      hvz *= hn;\n      // The lamp's pool: full under it, half 40 LEDs out, never under 0.3.\n      const pool = 0.3 + 0.7 / (1 + flat2 / 1600) + poolLift, w = wipe[p];\n      // A slope lights by how much more it faces the lamp than the flat\n      // powder does (Lambert over the flat's own Lambert), so a low lamp\n      // rakes the whole pan, up to 1.7 times the flat on a facing flank and\n      // down to a fifth on the far one, while light from overhead lights\n      // every flank nearly alike. Rose, orange and yellow keep only 55% of\n      // that range, so their dark side never browns.\n      const fl = cl((0.7 * (nx * ldx + ny * ldy + nz * ldz)) / max(ldz, 0.12), 0.14, 1.2);\n      const lit = pool * (fl + (0.75 - fl) * 0.45 * warm);\n      // Satin sheen: broad on the grainy powder and broader still in a\n      // trough, where the finger has pressed it smooth and it glows as one.\n      const nh = max(0, nx * hvx + ny * hvy + nz * hvz), sheen = pow(nh, 12 - 6 * w) * (0.55 + 0.08 * w) * pool;\n      // A grain glints when its facet is within 7 degrees of the half vector.\n      const mx = nx + gx[p], my = ny + gy[p], mz = nz, md = (mx * hvx + my * hvy + mz * hvz) / sqrt(mx * mx + my * my + mz * mz);\n      let gl = 0;\n      if (md > COSG) {\n        const q = (md - COSG) / (1 - COSG);\n        gl = gw[p] * q * q * (1 - w) * (1 - w) * (0.5 + 0.7 * pool) * 1.6;\n      }\n      const body = (amb + (1 - amb) * lit) * (0.94 + 0.12 * gw[p]), o = gt[p] ? 12 : 9;\n      // Lit faces take the body colour, shaded ones the shade colour, and a\n      // trough leans a third of the way to the shade colour.\n      const u = cl(lit, 0, 1) * (1 - 0.35 * w), v = 1 - u;\n      let r = (pal[0] * u + pal[3] * v) * body + pal[6] * sheen + pal[o] * gl;\n      let g = (pal[1] * u + pal[4] * v) * body + pal[7] * sheen + pal[o + 1] * gl;\n      let b = (pal[2] * u + pal[5] * v) * body + pal[8] * sheen + pal[o + 2] * gl;\n      // Past full brightness the colour is scaled down whole rather than\n      // clipped channel by channel, so a glint stays a tint and not white.\n      const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (m > 1) (r /= m), (g /= m), (b /= m);\n      display.setPixel(x, y, 255 * r, 255 * g, 255 * b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again."},{"name":"Relief","min":0,"max":3,"about":"The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3."},{"name":"Lamp","min":-1,"max":1,"about":"How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin."}],"start":[0,2,0,0.06],"measures":{"motion":0.0374,"detail":0.0733,"edges":0.2266,"complexity":2.4899,"coverage":1,"colour":0.1712,"drift":0.1081},"knobResponse":[0.3063,0.0963,0.1554,0.2659]},{"slug":"emergence","title":"Emergence","family":"mammal","round":24,"note":"해 질 녘 메마른 언덕의 동굴 입구에서 박쥐 떼가 검은 리본처럼 쏟아져 나와, 노을 하늘을 비틀며 패널 꼭대기까지 기둥으로 올라가요. 기둥은 두 가닥으로 갈라졌다 다시 붙고, 매가 내리꽂히면 박쥐들이 고리처럼 물러났다가 구멍이 닫혀요. K1 을 끝까지 돌리면 밤이 되어 박쥐가 보름달 앞을 지나가요.","idea":"At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.","buttons":"K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Emergence\n// Family:  mammal\n// Idea:    At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the summer evening emergence of Mexican free-tailed bats (Tadarida brasiliensis) from the caves of the Texas Hill Country\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes.\n// Knob 2: Speed. The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Bats. How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave.\n// Knob 4: Wind. A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right.\n// Buttons: K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The cave mouth: its middle column, floor row, half width and height.\nconst [CX, CB, CW, CH] = [27, 121, 9, 9.5];\n// The row where the bats come out, the most bats the knob asks for, the\n// spine's length in rows, and a bat's climb at Speed 2 in LEDs a second.\nconst [CY, MAXB, HM, V0] = [115, 1400, 118, 28];\n// The column's front at the start, and the length of one trip.\nconst [F0, LT] = [90, 150];\n\n// The sky from the top (0) to the horizon (1): afterglow, late dusk, night.\nconst SKIES = [\n  [[0, 30, 26, 98], [0.2, 66, 46, 138], [0.42, 160, 70, 134], [0.62, 236, 104, 100], [0.8, 255, 146, 72], [1, 255, 196, 112]],\n  [[0, 12, 14, 62], [0.3, 30, 30, 100], [0.6, 94, 52, 116], [0.84, 190, 84, 78], [1, 228, 126, 66]],\n  [[0, 5, 9, 32], [0.45, 10, 18, 56], [0.8, 22, 30, 74], [1, 44, 42, 84]],\n];\n// Rock, far hills, scrub and the lit undersides of the clouds at each hour.\nconst LAND = [\n  [92, 64, 54, 116, 72, 96, 34, 36, 24, 255, 178, 150],\n  [56, 40, 46, 64, 44, 80, 24, 26, 22, 140, 66, 96],\n  [28, 28, 40, 30, 30, 60, 14, 18, 22, 18, 20, 38],\n];\n// A bat against the light, and the hawk.\nconst BAT = [14, 10, 12];\n\nfunction ramp(S, g, c) {\n  let j = 0;\n  while (j \u003c S.length - 2 && g > S[j + 1][0]) j++;\n  const a = S[j], b = S[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, bg: F(N * 3), f: F(N * 3), D: F(N), key: -1, co: 0, hk: null, ring: null, nh: 3.4,\n    S: F(MAXB), V: F(MAXB), A: F(MAXB), B: F(MAXB), TU: F(MAXB), RH: F(MAXB), DR: F(MAXB), JF: F(MAXB), JP: F(MAXB),\n    FR: F(MAXB), FP: F(MAXB), OX: F(MAXB), OY: F(MAXB), VX: F(MAXB), VY: F(MAXB), BX: F(MAXB), BY: F(MAXB), Z: F(MAXB),\n    SX: F(HM), SR: F(HM), SP: F(HM), SS: F(HM), RID: F(W), FAR: F(W), CT: F(128 * 72),\n  });\n  // The near hill climbs over the cave; a flat mesa stands far off on the right.\n  for (let x = 0; x \u003c W; x++) {\n    P.RID[x] = 99 + 0.07 * x - 10 * exp(-(((x - 23) / 15) ** 2)) + 2 * vn(x * 0.13, 3) + 1.2 * vn(x * 0.4, 9) - 1.6;\n    P.FAR[x] = 90 + 2.5 * vn(x * 0.09, 1) + 1.5 * vn(x * 0.3, 2) - 7 * sm(38, 43, x) * (1 - sm(57, 61, x)) - 2 * exp(-(((x - 8) / 9) ** 2));\n  }\n  // Scrub: juniper and mesquite clumps on the slope and along the skyline.\n  P.bush = [];\n  for (let n = 0; n \u003c 34; n++) {\n    const x = rnd() * W, top = n \u003c 10, r = top ? 1 + rnd() * 1.2 : 0.8 + rnd() * 1.3;\n    const y = top ? P.RID[floor(x)] - r * 0.4 : P.RID[floor(x)] + 2 + rnd() * (H - P.RID[floor(x)] - 2);\n    if (((x - CX) / (CW + 3)) ** 2 + ((CB - y) / (CH + 3)) ** 2 > 1 || y > CB + 2) P.bush.push([x, y, r]);\n  }\n  P.stars = Array.from({ length: 80 }, () => [floor(rnd() * W), floor(rnd() * 86), 0.4 + rnd() * 0.6, rnd() * 7, 1 + rnd() * 3]);\n  // Thin streaks of high cloud, wrapping every 128 columns.\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const f = (X) => 0.6 * vn(X * 0.035, y * 0.3) + 0.4 * vn(X * 0.11, y * 0.5 + 7);\n      const band = sm(0, 10, y) * (1 - sm(56, 72, y)) * (0.5 + 0.5 * sin(y * 0.21 + 1));\n      P.CT[y * 128 + x] = sm(0.5, 0.75, mix(f(x), f(x + 128), x / 128)) * band;\n    }\n}\n\n// Where a bat turns off the column, how wide it swings and which way.\nfunction route(P, i) {\n  const top = rnd() \u003c 0.16;\n  P.TU[i] = top ? 98 + 14 * rnd() : P.tu + 13 * rnd();\n  P.RH[i] = top ? 30 : 15 + 7 * rnd();\n  P.DR[i] = rnd() \u003c cl(0.72 + 0.6 * P.w, 0.04, 0.96) ? 1 : -1;\n}\n\nfunction place(P, M) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    const a = rnd() * 2 - 1;\n    P.A[i] = (a \u003c 0 ? -1 : 1) * abs(a) ** 0.8;\n    P.B[i] = (rnd() - 0.5) * 1.2;\n    P.V[i] = V0 * (0.8 + 0.4 * rnd());\n    P.JF[i] = 1.4 + rnd() * 2.4;\n    P.JP[i] = rnd() * 7;\n    P.FR[i] = 4 + rnd() * 2.6;\n    P.FP[i] = rnd();\n    route(P, i);\n    P.S[i] = i \u003c M ? F0 - rnd() * LT : -1 - rnd() * LT;\n  }\n  P.init = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), M = round(cl(k[2], 400, 1400));\n  P.k1 = cl(k[0], 0, 1);\n  P.w = cl(k[3], -1, 1);\n  const T = (P.t += d);\n  // The height where the stream peels off wanders slowly.\n  P.tu = 80 + 8 * sin(T * 0.23 + 1);\n  if (!P.init) place(P, M);\n  const w = P.w, { SX, SR, SP, SS } = P;\n  P.co += d * (1.2 + 4 * w);\n\n  // The spine of the column: it leans downwind, corkscrews and breathes, and\n  // now and then tears in two along its middle and closes again higher up.\n  const Rk = 5 + (5 * (M - 400)) / 1000, ph = (T - 2.4) % 12, split = T \u003c 2.4 ? 0 : sm(0, 1.4, ph) * (1 - sm(4.6, 6.2, ph));\n  for (let h = 0; h \u003c HM; h++) {\n    const A = 1 + 7.5 * sm(4, 92, h);\n    SX[h] = CX + w * (0.17 * h + 0.0009 * h * h) + A * (sin(0.052 * h - 1.3 * T) + 0.4 * sin(0.12 * h + 0.75 * T + 2));\n    SR[h] = Rk * (1.25 - 0.55 * sm(0, 26, h) + 0.3 * sm(20, 50, h)) * (1 + 0.005 * h) * (1 + 0.3 * sin(0.075 * h - 2.1 * T));\n    SP[h] = 0.055 * h - 1.7 * T;\n    SS[h] = h > 18 && h \u003c 96 ? split * 9 * sin((PI * (h - 18)) / 78) : 0;\n  }\n\n  // The hawk: a stoop through the column on a curve, out the other side.\n  if (input.btnPressed && input.btnPressed[0] && !P.hk) P.nh = 0;\n  if (!P.hk && (P.nh -= d) \u003c= 0) {\n    const s = rnd() \u003c 0.5 ? 1 : -1, ht = floor(46 + rnd() * 26), tx = SX[ht], ty = CY - ht, x0 = 32 + s * 46, y0 = -12, x2 = 32 - s * 52, y2 = ty - 34;\n    P.hk = { t: 0, x0, y0, x2, y2, cx: 2 * tx - (x0 + x2) / 2, cy: 2 * ty - (y0 + y2) / 2, hit: false };\n  }\n  const hk = P.hk;\n  if (hk) {\n    const u = (hk.t += d) / 2.3, v = 1 - u;\n    if (u >= 1) (P.hk = null), (P.nh = 12 + rnd() * 6);\n    else {\n      hk.x = v * v * hk.x0 + 2 * u * v * hk.cx + u * u * hk.x2;\n      hk.y = v * v * hk.y0 + 2 * u * v * hk.cy + u * u * hk.y2;\n      const dx = v * (hk.cx - hk.x0) + u * (hk.x2 - hk.cx), dy = v * (hk.cy - hk.y0) + u * (hk.y2 - hk.cy), l = hyp(dx, dy) || 1;\n      (hk.ux = dx / l), (hk.uy = dy / l), (hk.u = u);\n      if (!hk.hit && u >= 0.5) (hk.hit = true), (P.ring = { x: hk.x, y: hk.y, t: 0 });\n    }\n  }\n  const rg = P.ring;\n  if (rg && (rg.t += d) > 1.4) P.ring = null;\n  const hx = P.hk ? P.hk.x : -999, hy = P.hk ? P.hk.y : -999, rr = rg ? 4 + 26 * rg.t : 0, ra = rg ? 1 - rg.t / 1.4 : 0;\n\n  const { S, V, A, B, TU, RH, DR, JF, JP, OX, OY, VX, VY, BX, BY, Z } = P;\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (S[i] \u003c 0 && i >= M) continue;\n    // Fast out of the mouth, then the steady climb.\n    const s = (S[i] += V[i] * d * (S[i] \u003c 40 ? 1.6 - 0.015 * S[i] : 1));\n    if (s \u003c 0) continue;\n    const hh = min(s, TU[i]), j = min(HM - 2, floor(hh)), f = hh - j;\n    const r = mix(SR[j], SR[j + 1], f), p = mix(SP[j], SP[j + 1], f), ca = cos(p), sa = sin(p), a = A[i], b = B[i] * (1.9 - 0.9 * sm(0, 30, hh));\n    let x = mix(SX[j], SX[j + 1], f) + r * (a * ca - b * sa) + (a \u003c 0 ? -1 : 1) * mix(SS[j], SS[j + 1], f) + 1.1 * sin(T * JF[i] + JP[i]);\n    let y = CY - hh + 0.8 * sin(T * JF[i] * 1.3 + JP[i] * 2);\n    Z[i] = a * sa + b * ca;\n    if (s > TU[i]) {\n      // Off the top of the column in a curve, then straight out sideways.\n      const u = s - TU[i], rho = RH[i], al = min(u / rho, 1.25), st = max(0, u - rho * 1.25);\n      x += DR[i] * (rho * (1 - cos(al)) + st * 0.949);\n      y -= rho * sin(al) + st * 0.315;\n    }\n    // Away from the hawk and the ring it sends out, then back into the stream.\n    let ax = -18 * OX[i] - 6 * VX[i], ay = -18 * OY[i] - 6 * VY[i], dx = x + OX[i] - hx, dy = y + OY[i] - hy, q = dx * dx + dy * dy;\n    if (q \u003c 196) {\n      const e = sqrt(q) + 0.3, g = (1700 * (1 - e / 14) ** 2) / e;\n      (ax += g * dx), (ay += g * dy);\n    }\n    if (rg) {\n      (dx = x + OX[i] - rg.x), (dy = y + OY[i] - rg.y);\n      const e = hyp(dx, dy) + 0.5, wv = e - rr;\n      if (wv * wv \u003c 30) {\n        const g = (480 * ra * exp((-wv * wv) / 6)) / e;\n        (ax += g * dx), (ay += g * dy);\n      }\n    }\n    VX[i] += ax * d;\n    VY[i] += ay * d;\n    OX[i] = cl(OX[i] + VX[i] * d, -16, 16);\n    OY[i] = cl(OY[i] + VY[i] * d, -16, 16);\n    x += OX[i];\n    y += OY[i];\n    if (x \u003c -3 || x > W + 2 || y \u003c -3) {\n      // Out of sight: back to the cave mouth for another trip.\n      S[i] = i \u003c M ? -rnd() * 4 : -1 - rnd() * LT;\n      OX[i] = OY[i] = VX[i] = VY[i] = 0;\n      route(P, i);\n      continue;\n    }\n    BX[i] = x;\n    BY[i] = y;\n  }\n}\n\n// The sky, the moon, the hills and the cave, kept until the hour moves.\nfunction backdrop(P, k) {\n  const B = P.bg, i0 = k \u003c 0.5 ? 0 : 1, f = k \u003c 0.5 ? k * 2 : k * 2 - 1;\n  const L = LAND[i0].map((v, c) => mix(v, LAND[i0 + 1][c], f));\n  const glow = 1 - sm(0.2, 0.9, k), mx = 37, my = 134 - 88 * sm(0.12, 1, k), mr = 8.5, mc = [mix(250, 246, sm(100, 60, my)), mix(184, 240, sm(100, 60, my)), mix(124, 220, sm(100, 60, my))];\n  P.cc = L.slice(9, 12);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / 100, sky = [0, 1, 2].map((c) => mix(ramp(SKIES[i0], g, c), ramp(SKIES[i0 + 1], g, c), f));\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, rid = P.RID[x];\n      let col;\n      if (y \u003c rid) {\n        // Brighter where the sun went down, behind the far mesa.\n        const wg = 1 + 0.2 * glow * exp(-(((x - 50) / 20) ** 2)) * sm(0.3, 1, g);\n        col = sky.map((v) => v * wg);\n        const md = hyp(x + 0.5 - mx, y + 0.5 - my);\n        if (md \u003c mr) {\n          const ma = 0.82 + 0.18 * sm(0.35, 0.65, vn(x * 0.4 + 3, y * 0.4)) - 0.12 * (md / mr) ** 4;\n          col = mc.map((v) => v * ma);\n        } else col = col.map((v, c) => v + mc[c] * sm(0.25, 0.8, k) * (0.22 * exp(-(md - mr) / 4) + 0.1 * exp(-(md - mr) / 14)));\n        if (y >= P.FAR[x]) {\n          const fv = 0.86 + 0.14 * vn(x * 0.3, y * 0.3);\n          col = col.map((v, c) => mix(v, L[3 + c] * fv, 0.8));\n        }\n      } else {\n        // Limestone with darker strata, catching light along the skyline.\n        const n = vn(x * 0.22, y * 0.45), n2 = vn(x * 0.07 + 5, y * 0.16);\n        let v = (0.6 + 0.4 * n + 0.25 * sm(0.55, 0.7, n2)) * (1 + 0.3 * exp(-(y - rid) / 2.5)) * (1 - (0.28 * (y - 92)) / 36);\n        if (((y + 4 * vn(x * 0.05, 7)) % 6) \u003c 1) v *= 0.72;\n        const e = (abs((x + 0.5 - CX) / CW) ** 2.4 + abs((CB - y - 0.5) / CH) ** 2.4) ** (1 / 2.4) * (0.96 + 0.09 * vn(x * 0.7, y * 0.7));\n        // The pale outcrop the cave opens in, cracked, with a ledge on top.\n        const ot = CB - CH - 6 + 2.5 * vn(x * 0.2, 4), ow = 16 + 4 * vn(y * 0.2, 6) - 6 * sm(CB - 3, CB - CH - 6, y);\n        if (y >= ot && y \u003c CB + 1 && abs(x + 0.5 - CX) \u003c ow) {\n          v = (1.05 + 0.3 * n) * (y \u003c ot + 1 ? 1.3 : 1) * (vn(x * 0.9, y * 0.1) \u003c 0.28 ? 0.66 : 1) * (1 - 0.25 * sm(ow - 3, ow, abs(x + 0.5 - CX)));\n          if (e \u003c 1.35) v *= 0.75 + 0.25 * sm(1, 1.35, e);\n        }\n        if (y \u003c CB && e \u003c 1) {\n          // The mouth, black inside and a little lit at the lip.\n          const lip = sm(0.75, 1, e);\n          col = [3 + 12 * lip, 2 + 8 * lip, 3 + 8 * lip];\n        } else {\n          if (y >= CB) v *= (1.1 + 0.25 * hash(x, y)) * (1 - 0.45 * exp(-(((x - CX) / CW) ** 2)) * sm(CB + 5, CB, y));\n          col = L.slice(0, 3).map((c) => c * v);\n        }\n      }\n      (B[o] = col[0]), (B[o + 1] = col[1]), (B[o + 2] = col[2]);\n    }\n  }\n  for (const [bx, by, br] of P.bush)\n    for (let y = floor(by - br); y \u003c= by + br; y++)\n      for (let x = floor(bx - br); x \u003c= bx + br; x++) {\n        const e = hyp(x + 0.5 - bx, (y + 0.5 - by) * 1.2) / br;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || e > 1) continue;\n        const o = (y * W + x) * 3, v = (0.8 + 0.4 * hash(x, y + 50)) * (y + 0.5 \u003c by - br * 0.3 ? 1.45 : 1);\n        for (let c = 0; c \u003c 3; c++) B[o + c] = L[6 + c] * v;\n      }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const k = P.k1, key = round(k * 400);\n  if (key !== P.key) backdrop(P, k), (P.key = key);\n  const F = P.f, D = P.D, T = P.t;\n  F.set(P.bg);\n  // Stars come out as the glow goes, behind the cloud streaks.\n  const sk = sm(0.4, 0.95, k);\n  if (sk > 0)\n    for (const [x, y, b, ph, fq] of P.stars) {\n      if (y >= P.FAR[x] - 1) continue;\n      const o = (y * W + x) * 3, v = sk * b * (0.75 + 0.25 * sin(T * fq + ph));\n      (F[o] += 190 * v), (F[o + 1] += 190 * v), (F[o + 2] += 210 * v);\n    }\n  // High cloud drifts with the wind, lit from below by the sun that has set.\n  const cc = P.cc, sh = floor(P.co);\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = P.CT[y * 128 + ((x - sh) & 127)];\n      if (a \u003c 0.02 || y >= P.FAR[x]) continue;\n      const o = (y * W + x) * 3, g = 0.55 + y / 110, al = 0.55 * a;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], cc[c] * g, al);\n    }\n\n  // Bats and the hawk as darkness laid over the light.\n  D.fill(0);\n  const put = (x, y, a) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) D[y * W + x] += a;\n  };\n  const M = P.S.length;\n  for (let i = 0; i \u003c M; i++) {\n    if (P.S[i] \u003c 0) continue;\n    const x = round(P.BX[i]), y = round(P.BY[i]), near = P.Z[i] > -0.3, q = floor(((T * P.FR[i] + P.FP[i]) % 1) * 3) - 1;\n    if (near) put(x, y, 0.95), put(x - 1, y + q, 0.8), put(x + 1, y + q, 0.8);\n    else put(x, y, 0.6), put(x + (q ? 1 : -1), y + q, 0.35);\n  }\n  const hk = P.hk;\n  if (hk && hk.x !== undefined) {\n    const { x, y, ux, uy, u } = hk, nx = -uy, ny = ux;\n    const seg = (x0, y0, x1, y1, r) => {\n      const n = 2 * hyp(x1 - x0, y1 - y0) + 1;\n      for (let s = 0; s \u003c= n; s++) {\n        const px = mix(x0, x1, s / n), py = mix(y0, y1, s / n);\n        for (let yy = floor(py - r); yy \u003c= py + r; yy++) for (let xx = floor(px - r); xx \u003c= px + r; xx++) if (hyp(xx + 0.5 - px, yy + 0.5 - py) \u003c= r + 0.25) put(xx, yy, 0.6);\n      }\n    };\n    seg(x + 2.2 * ux, y + 2.2 * uy, x - 3 * ux, y - 3 * uy, 1);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux + 0.9 * nx, y - 4.6 * uy + 0.9 * ny, 0.6);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux - 0.9 * nx, y - 4.6 * uy - 0.9 * ny, 0.6);\n    if (u > 0.14 && u \u003c 0.5) {\n      // Wings folded back in the stoop.\n      for (const sg of [1, -1]) seg(x + 0.8 * ux + sg * nx, y + 0.8 * uy + sg * ny, x - 4 * ux + sg * 2.4 * nx, y - 4 * uy + sg * 2.4 * ny, 0.6);\n    } else {\n      // Spread and beating as it climbs away.\n      const fl = 1.6 * sin(hk.t * 15);\n      for (const sg of [1, -1]) {\n        const wx = x + sg * 3.2 * nx + 1.1 * ux, wy = y + sg * 3.2 * ny + 1.1 * uy;\n        seg(x + 0.5 * ux, y + 0.5 * uy, wx, wy, 0.9);\n        seg(wx, wy, x + sg * 6.2 * nx - (0.6 + fl) * ux, y + sg * 6.2 * ny - (0.6 + fl) * uy, 0.55);\n      }\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = min(1, D[i]), b = 1 - a;\n    display.setPixel(i & 63, i >> 6, min(255, F[o] * b + BAT[0] * a) | 0, min(255, F[o + 1] * b + BAT[1] * a) | 0, min(255, F[o + 2] * b + BAT[2] * a) | 0);\n  }\n}\n","layer":{"id":"layer-emergence","type":"code","name":"emergence","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Emergence\n// Family:  mammal\n// Idea:    At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the summer evening emergence of Mexican free-tailed bats (Tadarida brasiliensis) from the caves of the Texas Hill Country\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes.\n// Knob 2: Speed. The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Bats. How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave.\n// Knob 4: Wind. A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right.\n// Buttons: K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The cave mouth: its middle column, floor row, half width and height.\nconst [CX, CB, CW, CH] = [27, 121, 9, 9.5];\n// The row where the bats come out, the most bats the knob asks for, the\n// spine's length in rows, and a bat's climb at Speed 2 in LEDs a second.\nconst [CY, MAXB, HM, V0] = [115, 1400, 118, 28];\n// The column's front at the start, and the length of one trip.\nconst [F0, LT] = [90, 150];\n\n// The sky from the top (0) to the horizon (1): afterglow, late dusk, night.\nconst SKIES = [\n  [[0, 30, 26, 98], [0.2, 66, 46, 138], [0.42, 160, 70, 134], [0.62, 236, 104, 100], [0.8, 255, 146, 72], [1, 255, 196, 112]],\n  [[0, 12, 14, 62], [0.3, 30, 30, 100], [0.6, 94, 52, 116], [0.84, 190, 84, 78], [1, 228, 126, 66]],\n  [[0, 5, 9, 32], [0.45, 10, 18, 56], [0.8, 22, 30, 74], [1, 44, 42, 84]],\n];\n// Rock, far hills, scrub and the lit undersides of the clouds at each hour.\nconst LAND = [\n  [92, 64, 54, 116, 72, 96, 34, 36, 24, 255, 178, 150],\n  [56, 40, 46, 64, 44, 80, 24, 26, 22, 140, 66, 96],\n  [28, 28, 40, 30, 30, 60, 14, 18, 22, 18, 20, 38],\n];\n// A bat against the light, and the hawk.\nconst BAT = [14, 10, 12];\n\nfunction ramp(S, g, c) {\n  let j = 0;\n  while (j \u003c S.length - 2 && g > S[j + 1][0]) j++;\n  const a = S[j], b = S[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, bg: F(N * 3), f: F(N * 3), D: F(N), key: -1, co: 0, hk: null, ring: null, nh: 3.4,\n    S: F(MAXB), V: F(MAXB), A: F(MAXB), B: F(MAXB), TU: F(MAXB), RH: F(MAXB), DR: F(MAXB), JF: F(MAXB), JP: F(MAXB),\n    FR: F(MAXB), FP: F(MAXB), OX: F(MAXB), OY: F(MAXB), VX: F(MAXB), VY: F(MAXB), BX: F(MAXB), BY: F(MAXB), Z: F(MAXB),\n    SX: F(HM), SR: F(HM), SP: F(HM), SS: F(HM), RID: F(W), FAR: F(W), CT: F(128 * 72),\n  });\n  // The near hill climbs over the cave; a flat mesa stands far off on the right.\n  for (let x = 0; x \u003c W; x++) {\n    P.RID[x] = 99 + 0.07 * x - 10 * exp(-(((x - 23) / 15) ** 2)) + 2 * vn(x * 0.13, 3) + 1.2 * vn(x * 0.4, 9) - 1.6;\n    P.FAR[x] = 90 + 2.5 * vn(x * 0.09, 1) + 1.5 * vn(x * 0.3, 2) - 7 * sm(38, 43, x) * (1 - sm(57, 61, x)) - 2 * exp(-(((x - 8) / 9) ** 2));\n  }\n  // Scrub: juniper and mesquite clumps on the slope and along the skyline.\n  P.bush = [];\n  for (let n = 0; n \u003c 34; n++) {\n    const x = rnd() * W, top = n \u003c 10, r = top ? 1 + rnd() * 1.2 : 0.8 + rnd() * 1.3;\n    const y = top ? P.RID[floor(x)] - r * 0.4 : P.RID[floor(x)] + 2 + rnd() * (H - P.RID[floor(x)] - 2);\n    if (((x - CX) / (CW + 3)) ** 2 + ((CB - y) / (CH + 3)) ** 2 > 1 || y > CB + 2) P.bush.push([x, y, r]);\n  }\n  P.stars = Array.from({ length: 80 }, () => [floor(rnd() * W), floor(rnd() * 86), 0.4 + rnd() * 0.6, rnd() * 7, 1 + rnd() * 3]);\n  // Thin streaks of high cloud, wrapping every 128 columns.\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const f = (X) => 0.6 * vn(X * 0.035, y * 0.3) + 0.4 * vn(X * 0.11, y * 0.5 + 7);\n      const band = sm(0, 10, y) * (1 - sm(56, 72, y)) * (0.5 + 0.5 * sin(y * 0.21 + 1));\n      P.CT[y * 128 + x] = sm(0.5, 0.75, mix(f(x), f(x + 128), x / 128)) * band;\n    }\n}\n\n// Where a bat turns off the column, how wide it swings and which way.\nfunction route(P, i) {\n  const top = rnd() \u003c 0.16;\n  P.TU[i] = top ? 98 + 14 * rnd() : P.tu + 13 * rnd();\n  P.RH[i] = top ? 30 : 15 + 7 * rnd();\n  P.DR[i] = rnd() \u003c cl(0.72 + 0.6 * P.w, 0.04, 0.96) ? 1 : -1;\n}\n\nfunction place(P, M) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    const a = rnd() * 2 - 1;\n    P.A[i] = (a \u003c 0 ? -1 : 1) * abs(a) ** 0.8;\n    P.B[i] = (rnd() - 0.5) * 1.2;\n    P.V[i] = V0 * (0.8 + 0.4 * rnd());\n    P.JF[i] = 1.4 + rnd() * 2.4;\n    P.JP[i] = rnd() * 7;\n    P.FR[i] = 4 + rnd() * 2.6;\n    P.FP[i] = rnd();\n    route(P, i);\n    P.S[i] = i \u003c M ? F0 - rnd() * LT : -1 - rnd() * LT;\n  }\n  P.init = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), M = round(cl(k[2], 400, 1400));\n  P.k1 = cl(k[0], 0, 1);\n  P.w = cl(k[3], -1, 1);\n  const T = (P.t += d);\n  // The height where the stream peels off wanders slowly.\n  P.tu = 80 + 8 * sin(T * 0.23 + 1);\n  if (!P.init) place(P, M);\n  const w = P.w, { SX, SR, SP, SS } = P;\n  P.co += d * (1.2 + 4 * w);\n\n  // The spine of the column: it leans downwind, corkscrews and breathes, and\n  // now and then tears in two along its middle and closes again higher up.\n  const Rk = 5 + (5 * (M - 400)) / 1000, ph = (T - 2.4) % 12, split = T \u003c 2.4 ? 0 : sm(0, 1.4, ph) * (1 - sm(4.6, 6.2, ph));\n  for (let h = 0; h \u003c HM; h++) {\n    const A = 1 + 7.5 * sm(4, 92, h);\n    SX[h] = CX + w * (0.17 * h + 0.0009 * h * h) + A * (sin(0.052 * h - 1.3 * T) + 0.4 * sin(0.12 * h + 0.75 * T + 2));\n    SR[h] = Rk * (1.25 - 0.55 * sm(0, 26, h) + 0.3 * sm(20, 50, h)) * (1 + 0.005 * h) * (1 + 0.3 * sin(0.075 * h - 2.1 * T));\n    SP[h] = 0.055 * h - 1.7 * T;\n    SS[h] = h > 18 && h \u003c 96 ? split * 9 * sin((PI * (h - 18)) / 78) : 0;\n  }\n\n  // The hawk: a stoop through the column on a curve, out the other side.\n  if (input.btnPressed && input.btnPressed[0] && !P.hk) P.nh = 0;\n  if (!P.hk && (P.nh -= d) \u003c= 0) {\n    const s = rnd() \u003c 0.5 ? 1 : -1, ht = floor(46 + rnd() * 26), tx = SX[ht], ty = CY - ht, x0 = 32 + s * 46, y0 = -12, x2 = 32 - s * 52, y2 = ty - 34;\n    P.hk = { t: 0, x0, y0, x2, y2, cx: 2 * tx - (x0 + x2) / 2, cy: 2 * ty - (y0 + y2) / 2, hit: false };\n  }\n  const hk = P.hk;\n  if (hk) {\n    const u = (hk.t += d) / 2.3, v = 1 - u;\n    if (u >= 1) (P.hk = null), (P.nh = 12 + rnd() * 6);\n    else {\n      hk.x = v * v * hk.x0 + 2 * u * v * hk.cx + u * u * hk.x2;\n      hk.y = v * v * hk.y0 + 2 * u * v * hk.cy + u * u * hk.y2;\n      const dx = v * (hk.cx - hk.x0) + u * (hk.x2 - hk.cx), dy = v * (hk.cy - hk.y0) + u * (hk.y2 - hk.cy), l = hyp(dx, dy) || 1;\n      (hk.ux = dx / l), (hk.uy = dy / l), (hk.u = u);\n      if (!hk.hit && u >= 0.5) (hk.hit = true), (P.ring = { x: hk.x, y: hk.y, t: 0 });\n    }\n  }\n  const rg = P.ring;\n  if (rg && (rg.t += d) > 1.4) P.ring = null;\n  const hx = P.hk ? P.hk.x : -999, hy = P.hk ? P.hk.y : -999, rr = rg ? 4 + 26 * rg.t : 0, ra = rg ? 1 - rg.t / 1.4 : 0;\n\n  const { S, V, A, B, TU, RH, DR, JF, JP, OX, OY, VX, VY, BX, BY, Z } = P;\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (S[i] \u003c 0 && i >= M) continue;\n    // Fast out of the mouth, then the steady climb.\n    const s = (S[i] += V[i] * d * (S[i] \u003c 40 ? 1.6 - 0.015 * S[i] : 1));\n    if (s \u003c 0) continue;\n    const hh = min(s, TU[i]), j = min(HM - 2, floor(hh)), f = hh - j;\n    const r = mix(SR[j], SR[j + 1], f), p = mix(SP[j], SP[j + 1], f), ca = cos(p), sa = sin(p), a = A[i], b = B[i] * (1.9 - 0.9 * sm(0, 30, hh));\n    let x = mix(SX[j], SX[j + 1], f) + r * (a * ca - b * sa) + (a \u003c 0 ? -1 : 1) * mix(SS[j], SS[j + 1], f) + 1.1 * sin(T * JF[i] + JP[i]);\n    let y = CY - hh + 0.8 * sin(T * JF[i] * 1.3 + JP[i] * 2);\n    Z[i] = a * sa + b * ca;\n    if (s > TU[i]) {\n      // Off the top of the column in a curve, then straight out sideways.\n      const u = s - TU[i], rho = RH[i], al = min(u / rho, 1.25), st = max(0, u - rho * 1.25);\n      x += DR[i] * (rho * (1 - cos(al)) + st * 0.949);\n      y -= rho * sin(al) + st * 0.315;\n    }\n    // Away from the hawk and the ring it sends out, then back into the stream.\n    let ax = -18 * OX[i] - 6 * VX[i], ay = -18 * OY[i] - 6 * VY[i], dx = x + OX[i] - hx, dy = y + OY[i] - hy, q = dx * dx + dy * dy;\n    if (q \u003c 196) {\n      const e = sqrt(q) + 0.3, g = (1700 * (1 - e / 14) ** 2) / e;\n      (ax += g * dx), (ay += g * dy);\n    }\n    if (rg) {\n      (dx = x + OX[i] - rg.x), (dy = y + OY[i] - rg.y);\n      const e = hyp(dx, dy) + 0.5, wv = e - rr;\n      if (wv * wv \u003c 30) {\n        const g = (480 * ra * exp((-wv * wv) / 6)) / e;\n        (ax += g * dx), (ay += g * dy);\n      }\n    }\n    VX[i] += ax * d;\n    VY[i] += ay * d;\n    OX[i] = cl(OX[i] + VX[i] * d, -16, 16);\n    OY[i] = cl(OY[i] + VY[i] * d, -16, 16);\n    x += OX[i];\n    y += OY[i];\n    if (x \u003c -3 || x > W + 2 || y \u003c -3) {\n      // Out of sight: back to the cave mouth for another trip.\n      S[i] = i \u003c M ? -rnd() * 4 : -1 - rnd() * LT;\n      OX[i] = OY[i] = VX[i] = VY[i] = 0;\n      route(P, i);\n      continue;\n    }\n    BX[i] = x;\n    BY[i] = y;\n  }\n}\n\n// The sky, the moon, the hills and the cave, kept until the hour moves.\nfunction backdrop(P, k) {\n  const B = P.bg, i0 = k \u003c 0.5 ? 0 : 1, f = k \u003c 0.5 ? k * 2 : k * 2 - 1;\n  const L = LAND[i0].map((v, c) => mix(v, LAND[i0 + 1][c], f));\n  const glow = 1 - sm(0.2, 0.9, k), mx = 37, my = 134 - 88 * sm(0.12, 1, k), mr = 8.5, mc = [mix(250, 246, sm(100, 60, my)), mix(184, 240, sm(100, 60, my)), mix(124, 220, sm(100, 60, my))];\n  P.cc = L.slice(9, 12);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / 100, sky = [0, 1, 2].map((c) => mix(ramp(SKIES[i0], g, c), ramp(SKIES[i0 + 1], g, c), f));\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, rid = P.RID[x];\n      let col;\n      if (y \u003c rid) {\n        // Brighter where the sun went down, behind the far mesa.\n        const wg = 1 + 0.2 * glow * exp(-(((x - 50) / 20) ** 2)) * sm(0.3, 1, g);\n        col = sky.map((v) => v * wg);\n        const md = hyp(x + 0.5 - mx, y + 0.5 - my);\n        if (md \u003c mr) {\n          const ma = 0.82 + 0.18 * sm(0.35, 0.65, vn(x * 0.4 + 3, y * 0.4)) - 0.12 * (md / mr) ** 4;\n          col = mc.map((v) => v * ma);\n        } else col = col.map((v, c) => v + mc[c] * sm(0.25, 0.8, k) * (0.22 * exp(-(md - mr) / 4) + 0.1 * exp(-(md - mr) / 14)));\n        if (y >= P.FAR[x]) {\n          const fv = 0.86 + 0.14 * vn(x * 0.3, y * 0.3);\n          col = col.map((v, c) => mix(v, L[3 + c] * fv, 0.8));\n        }\n      } else {\n        // Limestone with darker strata, catching light along the skyline.\n        const n = vn(x * 0.22, y * 0.45), n2 = vn(x * 0.07 + 5, y * 0.16);\n        let v = (0.6 + 0.4 * n + 0.25 * sm(0.55, 0.7, n2)) * (1 + 0.3 * exp(-(y - rid) / 2.5)) * (1 - (0.28 * (y - 92)) / 36);\n        if (((y + 4 * vn(x * 0.05, 7)) % 6) \u003c 1) v *= 0.72;\n        const e = (abs((x + 0.5 - CX) / CW) ** 2.4 + abs((CB - y - 0.5) / CH) ** 2.4) ** (1 / 2.4) * (0.96 + 0.09 * vn(x * 0.7, y * 0.7));\n        // The pale outcrop the cave opens in, cracked, with a ledge on top.\n        const ot = CB - CH - 6 + 2.5 * vn(x * 0.2, 4), ow = 16 + 4 * vn(y * 0.2, 6) - 6 * sm(CB - 3, CB - CH - 6, y);\n        if (y >= ot && y \u003c CB + 1 && abs(x + 0.5 - CX) \u003c ow) {\n          v = (1.05 + 0.3 * n) * (y \u003c ot + 1 ? 1.3 : 1) * (vn(x * 0.9, y * 0.1) \u003c 0.28 ? 0.66 : 1) * (1 - 0.25 * sm(ow - 3, ow, abs(x + 0.5 - CX)));\n          if (e \u003c 1.35) v *= 0.75 + 0.25 * sm(1, 1.35, e);\n        }\n        if (y \u003c CB && e \u003c 1) {\n          // The mouth, black inside and a little lit at the lip.\n          const lip = sm(0.75, 1, e);\n          col = [3 + 12 * lip, 2 + 8 * lip, 3 + 8 * lip];\n        } else {\n          if (y >= CB) v *= (1.1 + 0.25 * hash(x, y)) * (1 - 0.45 * exp(-(((x - CX) / CW) ** 2)) * sm(CB + 5, CB, y));\n          col = L.slice(0, 3).map((c) => c * v);\n        }\n      }\n      (B[o] = col[0]), (B[o + 1] = col[1]), (B[o + 2] = col[2]);\n    }\n  }\n  for (const [bx, by, br] of P.bush)\n    for (let y = floor(by - br); y \u003c= by + br; y++)\n      for (let x = floor(bx - br); x \u003c= bx + br; x++) {\n        const e = hyp(x + 0.5 - bx, (y + 0.5 - by) * 1.2) / br;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || e > 1) continue;\n        const o = (y * W + x) * 3, v = (0.8 + 0.4 * hash(x, y + 50)) * (y + 0.5 \u003c by - br * 0.3 ? 1.45 : 1);\n        for (let c = 0; c \u003c 3; c++) B[o + c] = L[6 + c] * v;\n      }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const k = P.k1, key = round(k * 400);\n  if (key !== P.key) backdrop(P, k), (P.key = key);\n  const F = P.f, D = P.D, T = P.t;\n  F.set(P.bg);\n  // Stars come out as the glow goes, behind the cloud streaks.\n  const sk = sm(0.4, 0.95, k);\n  if (sk > 0)\n    for (const [x, y, b, ph, fq] of P.stars) {\n      if (y >= P.FAR[x] - 1) continue;\n      const o = (y * W + x) * 3, v = sk * b * (0.75 + 0.25 * sin(T * fq + ph));\n      (F[o] += 190 * v), (F[o + 1] += 190 * v), (F[o + 2] += 210 * v);\n    }\n  // High cloud drifts with the wind, lit from below by the sun that has set.\n  const cc = P.cc, sh = floor(P.co);\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = P.CT[y * 128 + ((x - sh) & 127)];\n      if (a \u003c 0.02 || y >= P.FAR[x]) continue;\n      const o = (y * W + x) * 3, g = 0.55 + y / 110, al = 0.55 * a;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], cc[c] * g, al);\n    }\n\n  // Bats and the hawk as darkness laid over the light.\n  D.fill(0);\n  const put = (x, y, a) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) D[y * W + x] += a;\n  };\n  const M = P.S.length;\n  for (let i = 0; i \u003c M; i++) {\n    if (P.S[i] \u003c 0) continue;\n    const x = round(P.BX[i]), y = round(P.BY[i]), near = P.Z[i] > -0.3, q = floor(((T * P.FR[i] + P.FP[i]) % 1) * 3) - 1;\n    if (near) put(x, y, 0.95), put(x - 1, y + q, 0.8), put(x + 1, y + q, 0.8);\n    else put(x, y, 0.6), put(x + (q ? 1 : -1), y + q, 0.35);\n  }\n  const hk = P.hk;\n  if (hk && hk.x !== undefined) {\n    const { x, y, ux, uy, u } = hk, nx = -uy, ny = ux;\n    const seg = (x0, y0, x1, y1, r) => {\n      const n = 2 * hyp(x1 - x0, y1 - y0) + 1;\n      for (let s = 0; s \u003c= n; s++) {\n        const px = mix(x0, x1, s / n), py = mix(y0, y1, s / n);\n        for (let yy = floor(py - r); yy \u003c= py + r; yy++) for (let xx = floor(px - r); xx \u003c= px + r; xx++) if (hyp(xx + 0.5 - px, yy + 0.5 - py) \u003c= r + 0.25) put(xx, yy, 0.6);\n      }\n    };\n    seg(x + 2.2 * ux, y + 2.2 * uy, x - 3 * ux, y - 3 * uy, 1);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux + 0.9 * nx, y - 4.6 * uy + 0.9 * ny, 0.6);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux - 0.9 * nx, y - 4.6 * uy - 0.9 * ny, 0.6);\n    if (u > 0.14 && u \u003c 0.5) {\n      // Wings folded back in the stoop.\n      for (const sg of [1, -1]) seg(x + 0.8 * ux + sg * nx, y + 0.8 * uy + sg * ny, x - 4 * ux + sg * 2.4 * nx, y - 4 * uy + sg * 2.4 * ny, 0.6);\n    } else {\n      // Spread and beating as it climbs away.\n      const fl = 1.6 * sin(hk.t * 15);\n      for (const sg of [1, -1]) {\n        const wx = x + sg * 3.2 * nx + 1.1 * ux, wy = y + sg * 3.2 * ny + 1.1 * uy;\n        seg(x + 0.5 * ux, y + 0.5 * uy, wx, wy, 0.9);\n        seg(wx, wy, x + sg * 6.2 * nx - (0.6 + fl) * ux, y + sg * 6.2 * ny - (0.6 + fl) * uy, 0.55);\n      }\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = min(1, D[i]), b = 1 - a;\n    display.setPixel(i & 63, i >> 6, min(255, F[o] * b + BAT[0] * a) | 0, min(255, F[o + 1] * b + BAT[1] * a) | 0, min(255, F[o + 2] * b + BAT[2] * a) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower."},{"name":"Bats","min":400,"max":1400,"about":"How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave."},{"name":"Wind","min":-1,"max":1,"about":"A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right."}],"start":[0,2,400,0.06],"measures":{"motion":1.359,"detail":0.0665,"edges":0.4877,"complexity":1.5604,"coverage":0.9427,"colour":0.3555,"drift":0.0712},"knobResponse":[0.2525,0.0481,0.0669,0.0629]},{"slug":"eruption","title":"Eruption","family":"volcano","round":25,"note":"해 질 녘 성층화산을 세로로 잘라 봐요. 아래 마그마 방에서 떠난 가스 덩어리가 황토와 잿빛 지층 사이 화도를 타고 올라 분화구에서 터지면, 화산탄이 포물선을 그리며 떨어지고 재 기둥은 패널 꼭대기까지 올라 번개를 품어요. K1 이 스트롬볼리식에서 하와이식 용암 분수를 지나 플리니식 재 기둥까지 분출을 바꾸고, K1 을 누르면 큰 폭발이 나요.","idea":"A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.","buttons":"K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.","code":"// ===== Patternflow pattern =====\n// Title:   Eruption\n// Family:  volcano\n// Idea:    A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the cutaway drawing of a stratovolcano in a geology textbook\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1\n//\n// Knob 1: Style. Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks.\n// Knob 2: Speed. At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower.\n// Knob 3: Pressure. How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own.\n// Knob 4: Wind. Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it.\n// Buttons: K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The axis, the crater rim's half width and crest row, the crater floor, the\n// old ground the cone was built on, the chamber's centre row, gravity in rows\n// per second squared, and the cells of lava down each flank.\nconst [C, RIM, RIMY, FLOOR, BASE, CHY, G, NL] = [32, 6, 53, 58, 86, 113, 34, 26];\n// The flank below the rim: steep at the summit, flattening to the panel's edge at row 84.\nconst flank = (dx) => RIMY + 31 * cl((dx - RIM) / 26, 0, 2) ** 0.8;\nconst SURF = new Float32Array(W + 1);\nfor (let x = 0; x \u003c= W; x++) {\n  const dx = abs(x - C);\n  SURF[x] = dx \u003c RIM ? FLOOR - (FLOOR - RIMY) * (dx / RIM) ** 2 : flank(dx) + 1.1 * (vn(x * 0.3, 7.5) - 0.5) * sm(RIM, RIM + 4, dx);\n}\nconst sAt = (X) => ((X = cl(X, 0, W - 0.001)), mix(SURF[floor(X)], SURF[floor(X) + 1], X - floor(X)));\n// The conduit's centre on each row, wandering a little on its way up.\nconst CXA = new Float32Array(H).map((_, y) => C + 1.3 * sin((y - FLOOR) * 0.11));\n// The dike leaves the conduit at row 99 and reaches the right flank here.\nconst VX = CXA[99] + 20;\n// How the older beds arch up over the chamber, column by column.\nconst BEND = new Float32Array(W).map((_, x) => exp(-(((x + 0.5 - C) / 15) ** 2)));\n\n// The cone's beds (lava, ochre tephra, ash, red scoria, pale pumice) and the\n// older rock under it (soil, sandstone, shale, red beds, limestone, dark\n// shale), each as colour index and thickness from the top down.\nconst CC = [[56, 50, 68], [134, 92, 40], [100, 96, 94], [112, 48, 32], [150, 130, 94]];\nconst BC = [[72, 48, 32], [142, 104, 50], [74, 74, 88], [118, 54, 36], [140, 130, 108], [46, 46, 62]];\nconst beds = (seq) => {\n  const out = [];\n  while (out.length \u003c 96) for (let i = 0; i \u003c seq.length; i += 2) for (let j = 0; j \u003c seq[i + 1]; j++) out.push(seq[i]);\n  return out;\n};\nconst CB = beds([0, 2, 1, 2, 2, 1, 0, 3, 3, 2, 1, 3, 4, 1, 0, 2, 2, 2, 3, 2, 0, 3, 1, 2, 2, 2, 4, 2, 0, 2, 3, 3, 1, 2]);\nconst BB = beds([0, 2, 1, 4, 2, 3, 3, 4, 4, 3, 5, 3, 1, 5, 3, 3, 2, 4, 4, 4, 5, 3, 1, 4, 3, 4, 2, 5]);\n\n// Magma from crust-dark red to white heat, as 256 steps over 0..1.25.\nconst LUT = new Float32Array(256 * 3);\n{\n  const K = [[0, 40, 6, 4], [0.2, 120, 14, 4], [0.4, 205, 46, 6], [0.6, 255, 110, 16], [0.78, 255, 182, 48], [0.95, 255, 236, 140], [1.15, 255, 255, 230]];\n  for (let i = 0; i \u003c 256; i++) {\n    const T = (i / 255) * 1.25;\n    let k = 0;\n    while (k \u003c K.length - 2 && T > K[k + 1][0]) k++;\n    const u = cl((T - K[k][0]) / (K[k + 1][0] - K[k][0]), 0, 1);\n    for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(K[k][c + 1], K[k + 1][c + 1], u);\n  }\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n\n// Sky rows: navy overhead, violet, and the last of the dusk low behind the flanks.\nconst SKY = [[0, 6, 9, 38], [40, 18, 20, 64], [64, 48, 26, 80], [86, 150, 64, 70]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), st: new Uint8ClampedArray(N * 3), kind: new Uint8Array(N), off: F32(N), gr: F32(N), vg: F32(N), sd: F32(N), A: F32(N), hot: F32(N),\n    t: 0, warm: 0, next: 0.5, slugs: [], parts: [], puffs: [], bolts: [], bub: [], glow: 0, fl: 0, flx: C, fly: 30, pr: 0.5, boost: 0, nf: 0, nv: 0, ndg: 0, npd: 1.5, lake: 0.5, pend: 0,\n    lv: [0, 1].map(() => ({ v: F32(NL), T: F32(NL), ph: 0 })),\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, dx = abs(X - C), s = sAt(X);\n    S.vg[i] = exp(-hypot(X - C, (Y - FLOOR + 1) * 0.8) / 15);\n    S.gr[i] = [0.86, 0.95, 1, 1.08][floor(hash(x, y + 77) * 4)];\n    S.sd[i] = Y - s;\n    if (Y \u003c s) {\n      // Sky, with a few stars high up.\n      let k = 0;\n      while (k \u003c SKY.length - 2 && Y > SKY[k + 1][0]) k++;\n      const u = sm(SKY[k][0], SKY[k + 1][0], Y), st = y \u003c 48 && hash(x, y) \u003c 0.014 ? 50 + 110 * hash(y, x) : 0;\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = mix(SKY[k][c + 1], SKY[k + 1][c + 1], u) + st * (c ? 1 : 0.9);\n    } else if (Y \u003c BASE - 3 * exp(-(((X - C) / 15) ** 2))) {\n      // The cone: beds laid parallel to the flanks, peaked over the old summit the crater blew away.\n      S.kind[i] = 1;\n      const ls = dx >= RIM ? flank(dx) : RIMY - (RIM - sqrt(dx * dx + 0.6)) * 0.8;\n      const d = cl(floor(Y - ls + 1.6 * (vn(x * 0.16, y * 0.09 + 30) - 0.5)), 0, 95), c0 = Y - s \u003c 1.4 ? [52, 44, 50] : CC[CB[d]];\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = c0[c] * S.gr[i];\n    } else {\n      S.kind[i] = 2;\n      S.off[i] = 1.6 * (vn(x * 0.11, y * 0.07 + 60) - 0.5);\n    }\n  }\n  for (let k = 0; k \u003c 14; k++) S.bub.push(bubble(0));\n}\n\n// A gas bubble somewhere low in the chamber.\nfunction bubble(P) {\n  return { x: C + (rnd() - 0.5) * (16 + 7 * P) * 1.4, y: CHY + rnd() * (7.5 + 2.5 * P) * 0.6 };\n}\n\nfunction puff(S, x, y, vy, r, a, tv, ny, fade, hot = 0.6, g = 0) {\n  // The oldest puff gives way when there are too many.\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vx: 0, vy, rx: r, ry: r, a, tv, ny, fade, hot, g, u: 22 });\n}\n\nfunction bolt(S) {\n  const c = S.puffs.filter((p) => !p.g && p.y \u003c 50 && p.rx > 3.5 && p.a > 0.25);\n  if (!c.length) return;\n  const p = c[floor(rnd() * c.length)], pts = [];\n  let x = p.x + (rnd() - 0.5) * p.rx, y = p.y - p.ry * 0.4;\n  const n = 5 + floor(rnd() * 8);\n  for (let j = 0; j \u003c n; j++) pts.push([x, y]), (x += (rnd() - 0.5) * 4), (y += 1.5 + rnd() * 1.5);\n  const m = pts[floor(n / 2)], br = [m];\n  for (let j = 0, bx = m[0], by = m[1], s = rnd() \u003c 0.5 ? -1 : 1; j \u003c 3; j++) br.push([(bx += s * (1 + rnd() * 2)), (by += 1 + rnd())]);\n  S.bolts.push({ pts, br, life: 0.24 });\n  [S.flx, S.fly] = pts[floor(n / 2)];\n}\n\n// A burst in the crater, its bombs, its ash and its light.\nfunction burst(S, str, haw) {\n  S.glow = min(2.2, S.glow + 0.9 * str);\n  S.boost += haw * 1.5;\n  // Bombs fly wide; a fan of finer spatter goes up steeper and falls back round the crater.\n  const nb = round((14 + 20 * str) * (1 - 0.6 * haw));\n  for (let n = 0; n \u003c nb; n++) {\n    const b = n % 3 ? 0 : 1, v = (b ? 24 + 22 * rnd() : 20 + 20 * rnd()) * sqrt(str) * (1 + 0.25 * S.P), a = (rnd() - 0.5) * (b ? 1.15 : 0.6);\n    fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, v, a, b);\n  }\n  for (let n = 0; n \u003c 2 + (str > 0.8 ? 1 : 0); n++) puff(S, C + (rnd() - 0.5) * 3, FLOOR - 3 - n * 3, -(14 + 10 * str), 3.5 + rnd(), 1 + 0.3 * str, -8, 2 + rnd() * 12, 0.04);\n  // Most bursts charge the fresh ash enough for a bolt a moment later.\n  if (rnd() \u003c 0.25 + 0.5 * str) S.pend = 0.5 + 0.4 * rnd();\n}\n\n// One bomb (b 1) or blob of spatter thrown from x, y at speed v, a radians off vertical.\nconst fling = (S, x, y, v, a, b = 0, vx = 0) => S.parts.push({ x, y, vx: v * sin(a) + vx, vy: -v * cos(a), T: 1, m: 0, b });\n\n// Lava poured into one flank's cell k: volume v at temperature T.\nfunction pour(L, k, v, T = 1) {\n  k = cl(k, 0, NL - 1);\n  L.T[k] = (L.T[k] * L.v[k] + T * v) / (L.v[k] + v + 1e-6);\n  L.v[k] += v;\n}\n\nfunction step(S, d) {\n  const s1 = S.k1, P = S.P, w = S.wind;\n  const strom = 1 - sm(0.2, 0.5, s1), haw = sm(0.15, 0.45, s1) * (1 - sm(0.6, 0.85, s1)), plin = sm(0.55, 0.9, s1);\n  Object.assign(S, { strom, haw, plin });\n  S.t += d;\n  const ax = 16 + 7 * P, ay = 7.5 + 2.5 * P, top = CHY - ay;\n  // Pressure builds in the chamber, and a slug of gas leaves for the conduit when it is ready.\n  S.pr = min(1, S.pr + d * (0.3 + 0.4 * P));\n  // A Plinian column draws on the chamber in long surges instead.\n  if (plin > 0) S.pr = mix(S.pr, 0.5 + 0.5 * sin(S.t * 1.6), min(1, plin * d * 3));\n  if ((S.next -= d) \u003c= 0 && plin \u003c 0.8) {\n    S.slugs.push({ y: top + 1, str: 0.6 + 0.4 * rnd() + 0.3 * P });\n    S.pr = max(0, S.pr - 0.6);\n    S.next = mix((1.3 + 1.7 * rnd()) / (1 + 0.7 * P), 0.5 + 0.5 * rnd(), max(haw, plin));\n  }\n  for (const g of S.slugs) {\n    // It speeds up as it expands near the top.\n    const u = cl((g.y - FLOOR) / (top - FLOOR), 0, 1);\n    g.y -= (16 + 30 * (1 - u)) * (1 + 0.5 * P) * d;\n    if (g.y \u003c= FLOOR + 1) (g.done = 1), burst(S, g.str * (strom + 0.35 * haw + 0.25 * plin), haw);\n  }\n  S.slugs = S.slugs.filter((g) => !g.done);\n  // Bubbles rise through the chamber and gather under its roof by the conduit's mouth.\n  for (const b of S.bub) {\n    const ex = C - b.x, v = (3 + 4 * P + 3 * S.pr) * d;\n    b.x += cl(ex, -1, 1) * v * 0.5 + sin(S.t * 2.3 + b.y) * 0.3 * v;\n    b.y -= v;\n    if (((b.x - C) / ax) ** 2 + ((b.y - CHY) / ay) ** 2 > 0.8) Object.assign(b, bubble(P));\n  }\n  // The fountain: a steady jet of spatter in Hawaiian style, surging after each slug,\n  // and a smaller one from the flank vent once the dike has broken out.\n  S.nf += d * haw * (60 + 50 * min(1, S.boost)) * (1 + 0.5 * P);\n  for (; S.nf >= 1; S.nf--) fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, (24 + 16 * rnd()) * (0.85 + 0.3 * P) * (1 + 0.3 * min(1, S.boost)), (rnd() - 0.5) * 0.45);\n  S.nv += d * 14 * sm(0.88, 1, P);\n  for (; S.nv >= 1; S.nv--) fling(S, VX + (rnd() - 0.5) * 2, sAt(VX) - 1, 10 + 8 * rnd(), (rnd() - 0.5) * 0.6, 0, 3);\n  S.boost = max(0, S.boost - d * 1.2);\n  // Gas and ash: a thin plume always, a roaring column in Plinian style.\n  S.ndg += d * (2.2 + 1.5 * haw + 11 * plin * (0.4 + S.pr));\n  for (; S.ndg >= 1; S.ndg--)\n    if (rnd() \u003c plin) puff(S, C + (rnd() - 0.5) * 5, FLOOR - 3, -(30 + 14 * rnd()), 5.5, 1, -20, 3 + 7 * rnd(), 0.04, 0.4);\n    else puff(S, C + (rnd() - 0.5) * 3, FLOOR - 2, -7, 3, 0.45 + 0.2 * haw, -6, 4 + 14 * rnd(), 0.045, 0.3);\n  // Plinian: part of the column collapses and pours down a flank.\n  if (plin > 0.3 && (S.npd -= d * plin) \u003c= 0) {\n    S.npd = 2 + 2 * rnd();\n    const g = rnd() \u003c 0.5 ? -1 : 1;\n    for (let n = 0; n \u003c 4; n++) puff(S, C + g * (RIM + 2 * n), RIMY + 2 * n, 0, 4, 1, 0, 0, 0.05, 1.2, g), (S.puffs[S.puffs.length - 1].u = 24 - 3 * n);\n  }\n  for (const p of S.puffs) {\n    if (p.g) {\n      // An avalanche of hot ash hugging the flank, slowing as it spreads, then lifting off.\n      p.x += p.g * p.u * d;\n      p.u = max(3, p.u - 3 * d);\n      p.rx += d * 2.5;\n      p.ry = min(8, p.ry + d * 1.5);\n      p.y = sAt(p.x) - p.ry * 0.35;\n      if (p.u \u003c 5 || p.x \u003c 1 || p.x > W - 1) Object.assign(p, { g: 0, vy: -3, tv: -5, ny: 14 + 10 * rnd(), fade: 0.06 });\n    } else {\n      const rise = sm(p.ny - 2, p.ny + 14, p.y);\n      p.vy += (p.tv * rise - p.vy) * 1.6 * d;\n      p.y += p.vy * d;\n      p.rx = min(30, p.rx + d * (0.8 + 0.12 * abs(p.vy) + 3.5 * (1 - rise) * p.a));\n      p.ry = min(12, p.ry + d * (0.6 + 0.05 * abs(p.vy)));\n    }\n    p.x += (p.vx + w * (4 + 18 * cl(1 - p.y / 60, 0, 1))) * d;\n    p.a -= d * p.fade;\n    p.hot = max(0, p.hot - d * 0.7);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.04 && p.x + p.rx > -4 && p.x - p.rx \u003c W + 4 && p.y + p.ry > -8);\n  // Bombs and spatter fly, land, roll and cool.\n  for (const q of S.parts) {\n    if (!q.m) {\n      q.vy += G * d;\n      q.vx += w * 7 * d;\n      q.x += q.vx * d;\n      q.y += q.vy * d;\n      q.T -= d * (q.b ? 0.16 : 0.35);\n      if (q.vy > 0 && q.y >= sAt(q.x)) {\n        const dx = abs(q.x - C);\n        if (dx \u003c RIM - 0.5) q.dead = 1;\n        else if (!q.b) (q.dead = 1), pour(S.lv[q.x > C ? 1 : 0], floor(dx - RIM), 0.05, max(0.5, q.T));\n        else Object.assign(q, { m: 1, u: 5 + abs(q.vx) * 0.3, s: q.x > C ? 1 : -1 });\n      }\n    } else {\n      q.x += q.s * q.u * d;\n      q.u = max(0, q.u - 6 * d);\n      q.y = sAt(q.x) - 0.5;\n      q.T -= d * 0.3;\n    }\n    if (q.T \u003c= 0 || q.x \u003c -2 || q.x > W + 2) q.dead = 1;\n  }\n  S.parts = S.parts.filter((q) => !q.dead);\n  if (S.parts.length > 400) S.parts.splice(0, S.parts.length - 400);\n  // Lava over the rim and down the flanks, slower as it cools and crusts.\n  const eff = (0.45 + 0.6 * P + 1.2 * haw) * (1 - 0.6 * plin);\n  for (let s = 0; s \u003c 2; s++) {\n    const L = S.lv[s], v = L.v, T = L.T;\n    pour(L, 0, eff * (s ? 0.55 : 1) * d);\n    if (s && P > 0.88) pour(L, floor(VX - C - RIM), 1.4 * sm(0.88, 1, P) * d);\n    L.ph += d * (1 + 2 * T[2]);\n    for (let k = NL - 1; k >= 0; k--) {\n      const f = min(v[k], v[k] * (0.2 + 2.2 * T[k] * T[k]) * (k \u003c 6 ? 1.6 : 0.9) * d);\n      v[k] -= f;\n      if (k \u003c NL - 1) pour(L, k + 1, f, T[k]);\n      T[k] = max(0, T[k] - d * (0.03 + 0.015 / (v[k] + 0.2)));\n      if (T[k] \u003c 0.1) v[k] = max(0, v[k] - d * 0.03);\n    }\n  }\n  S.lake = mix(S.lake, (1.2 + 1.2 * P + 4 * haw) * (1 - plin), min(1, d * 2));\n  // Lightning in the ash.\n  if (rnd() \u003c d * (0.2 + 1.3 * plin + 0.4 * S.glow)) bolt(S);\n  if (S.pend > 0 && (S.pend -= d) \u003c= 0) bolt(S);\n  for (const b of S.bolts) b.life -= d;\n  S.bolts = S.bolts.filter((b) => b.life > 0);\n  S.fl = S.bolts.reduce((m, b) => max(m, floor(b.life * 40) % 3 === 1 ? 0.35 : 1), 0);\n  S.glow *= exp(-d * 2.5);\n}\n\n// K1 tap: the big one.\nfunction blast(S) {\n  S.slugs.length = 0;\n  S.pr = 0;\n  burst(S, 2.4, 0);\n  S.glow = 2.2;\n  for (let n = 0; n \u003c 5; n++) puff(S, C + (rnd() - 0.5) * 6, FLOOR - 4, -(26 + 12 * rnd()), 4 + rnd() * 2, 1, -10, 2 + 8 * rnd(), 0.04, 1);\n  for (let s = 0; s \u003c 2; s++) pour(S.lv[s], 0, 1.6);\n  S.pend = 0.15;\n  S.next = 1.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2;\n  S.k1 = cl(k[0], 0, 1);\n  S.P = cl(k[2], 0, 1);\n  S.wind = cl(k[3], -1, 1);\n  // The volcano has been going for a while before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    for (let n = round(60 + 120 * sp); n-- > 0; ) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) blast(S);\n  step(S, cl(dt || 0, 0, 0.1) * sp);\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst lc = (T) => ((T = lut(T)), [LUT[T], LUT[T + 1], LUT[T + 2]]);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 === undefined) return;\n  F = S.f;\n  const { P, t, haw, plin, kind, st, A, hot, vg, wind } = S;\n  const ax = 16 + 7 * P + 0.8 * S.pr, ay = 7.5 + 2.5 * P + 0.5 * S.pr, top = CHY - ay, bamp = 3 + 6 * P + 1.4 * S.pr, bend = BEND.map((v) => v * bamp);\n  const L = 0.3 + 0.7 * S.glow + 0.6 * haw + 0.5 * plin, fl = S.fl;\n\n  // Sky, cone and the older beds bent up over the chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * 3, kd = kind[i];\n    if (kd === 0) {\n      const g = L * vg[i];\n      (F[o] = st[o] + 150 * g + 7 * fl), (F[o + 1] = st[o + 1] + 48 * g + 8 * fl), (F[o + 2] = st[o + 2] + 16 * g + 18 * fl);\n    } else if (kd === 1) {\n      const g = L * vg[i] * (S.sd[i] \u003c 2.5 ? 1 : 0.2);\n      (F[o] = st[o] + 120 * g), (F[o + 1] = st[o + 1] + 40 * g), (F[o + 2] = st[o + 2] + 10 * g);\n    } else {\n      const d = cl((i >> 6) + 0.5 - BASE + bend[i & 63] + S.off[i], 0, 94), d0 = floor(d), u = d - d0;\n      const a = BC[BB[d0]], b = BC[BB[d0 + 1]], gr = S.gr[i];\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(a[c], b[c], u) * gr;\n    }\n  }\n\n  // The magma: chamber, the feeder below it, the conduit, the dike and the sill, with the rock round them glowing.\n  const glowRock = (o, g) => {\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [210, 50, 16][c], min(0.85, g));\n  };\n  const melt = (o, T) => {\n    const k = lut(T);\n    (F[o] = LUT[k]), (F[o + 1] = LUT[k + 1]), (F[o + 2] = LUT[k + 2]);\n  };\n  for (let y = max(BASE, floor(top - 6)); y \u003c H; y++)\n    for (let x = max(0, floor(C - ax - 7)); x \u003c min(W, C + ax + 7); x++) {\n      const X = x + 0.5, Y = y + 0.5, e = hypot((X - C) / ax, (Y - CHY) / ay), o = (y * W + x) * 3;\n      if (e \u003c 1) {\n        const T = 0.28 + 0.38 * vn(X * 0.17 + 0.7 * sin(Y * 0.17 + t * 0.5), Y * 0.3 + t * 1.2) + 0.2 * (1 - e * e) - 0.25 * sm(0.72, 1, e) + 0.16 * S.pr + 0.1 * P + 0.35 * exp(-((X - C) ** 2) / 9 - ((Y - top) ** 2) / 6) * S.pr;\n        melt(o, T);\n      } else if (Y > CHY && abs(X - C - 1.5 * sin(y * 0.2)) \u003c 1.3) melt(o, 0.38 + 0.08 * sin(y * 0.5 - t * 3));\n      else glowRock(o, exp(-((e - 1) * ay) / 2.4) * (0.5 + 0.4 * S.pr + 0.2 * P));\n    }\n  for (const b of S.bub) put(b.x, b.y, lc(1.05));\n  const slug = (y) => S.slugs.reduce((m, g) => max(m, exp(-(((y - g.y) / 2.6) ** 2))), 0);\n  for (let y = FLOOR; y \u003c= top + 1; y++) {\n    const cx = CXA[y], sg = slug(y), hw = 1.35 + 1.3 * sg + 0.6 * plin;\n    for (let x = max(0, floor(cx - hw - 5)); x \u003c min(W, cx + hw + 5); x++) {\n      const o = (y * W + x) * 3, q = abs(x + 0.5 - cx);\n      if (q \u003c hw) {\n        const ves = hash(x, floor(y + t * 14)) \u003c 0.12 ? 0.25 : 0;\n        melt(o, mix(0.58 + 0.12 * sin(y * 0.45 + t * 7) + ves + 0.5 * sg, 0.5 + 0.6 * vn(x * 0.6, (y + t * 45) * 0.25), plin));\n      } else if (kind[y * W + x]) glowRock(o, exp(-(q - hw) / 1.5) * (0.4 + 0.5 * sg + 0.3 * plin));\n    }\n  }\n  // The dike towards the right flank, and the sill along the beds on the left.\n  const dk = sm(0.2, 0.9, P), sl = sm(0.45, 1, P);\n  for (let j = 0; j \u003c 46 * dk; j++) {\n    const u = j / 46, x = CXA[99] + (VX - CXA[99]) * u, y = 99 - (99 - sAt(VX)) * u;\n    put(x, y, lc(0.55 + 0.1 * sin(j * 0.6 - t * 5)));\n    put(x + 1, y, [210, 50, 16], 0.45);\n  }\n  for (let j = 0; j \u003c 20 * sl; j++) {\n    const x = CXA[93] - 2 - j, y = 93 + 0.006 * j * j + 2 * sin(j * 0.15);\n    put(x, y, lc(0.5 + 0.08 * sin(j * 0.7 + t * 4)));\n    if (j \u003c 14 * sl) put(x, y + 1, lc(0.42));\n  }\n\n  // The ash: every puff summed, then shaded over the sky.\n  A.fill(0);\n  hot.fill(0);\n  for (const p of S.puffs) {\n    const x0 = max(0, floor(p.x - p.rx)), x1 = min(W - 1, floor(p.x + p.rx)), y0 = max(0, floor(p.y - p.ry)), y1 = min(H - 1, floor(p.y + p.ry));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = (y + 0.5 - p.y) / p.ry;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = (x + 0.5 - p.x) / p.rx, q = 1 - dx * dx - dy * dy;\n        if (q > 0) (A[y * W + x] += p.a * q * q), (hot[y * W + x] += p.hot * q * q);\n      }\n    }\n  }\n  // Ash falling out of the plume aloft, slanting downwind as it falls.\n  const col = new Float32Array(W);\n  for (const p of S.puffs)\n    if (!p.g && p.y \u003c 45 && p.rx > 4) for (let x = max(0, floor(p.x - p.rx)); x \u003c min(W, p.x + p.rx); x++) col[x] += p.a * max(0, 1 - ((x + 0.5 - p.x) / p.rx) ** 2);\n  for (let y = 14; y \u003c 84; y++) {\n    const f = 0.11 * sm(12, 30, y) * (1 - sm(56, 84, y)), sh = wind * (y - 14) * 0.55;\n    for (let x = 0; x \u003c W; x++) {\n      const c = col[cl(round(x - sh), 0, W - 1)];\n      if (c > 0.05) A[y * W + x] += f * min(1.5, c) * (0.3 + vn(x * 0.9, y * 0.12 - t * 3));\n    }\n  }\n  const { flx, fly } = S;\n  for (let i = 0; i \u003c N; i++) {\n    if (A[i] \u003c 0.01 || kind[i]) continue;\n    const x = i & 63, y = i >> 6, o = i * 3, tex = vn(x * 0.22 - t * wind * 0.5, y * 0.2 + t * 0.7);\n    const al = min(0.94, 1 - exp(-A[i] * (1.3 + 1.7 * tex))), sh = 0.55 + 0.6 * tex, vl = 0.8 * L * vg[i] + 0.6 * hot[i], fy = fl * exp(-hypot(x - flx, (y - fly) * 0.7) / 16);\n    F[o] = mix(F[o], 104 * sh + 255 * vl + 130 * fy, al);\n    F[o + 1] = mix(F[o + 1], 98 * sh + 100 * vl + 140 * fy, al);\n    F[o + 2] = mix(F[o + 2], 100 * sh + 34 * vl + 210 * fy, al);\n  }\n\n  // The crater: the vent, the lava lake, and the flash of a burst.\n  const ll = FLOOR + 0.6 - S.lake;\n  for (let y = RIMY - 1; y \u003c= FLOOR + 1; y++)\n    for (let x = C - RIM; x \u003c C + RIM; x++) {\n      const i = y * W + x;\n      if (!kind[i] && y + 0.5 > ll) melt(i * 3, 0.55 + 0.3 * vn(x * 0.6 + t, y * 0.8) + 0.2 * S.glow - 0.12 * (y + 0.5 - ll \u003c 1 ? 1 : 0));\n    }\n  if (S.glow > 0.02)\n    for (let y = FLOOR - 14; y \u003c= FLOOR + 3; y++)\n      for (let x = C - 12; x \u003c C + 12; x++) {\n        const o = (y * W + x) * 3, g = S.glow * exp(-hypot(x + 0.5 - C, y + 0.5 - FLOOR + 1) / 3.2);\n        (F[o] += 255 * g), (F[o + 1] += 190 * g), (F[o + 2] += 90 * g);\n      }\n\n  // Lava down the flanks: hot and bright near the rim, crusting dark as it cools.\n  for (let s = 0; s \u003c 2; s++) {\n    const { v, T, ph } = S.lv[s];\n    for (let k = 0; k \u003c NL; k++) {\n      if (v[k] \u003c 0.01) continue;\n      const x = s ? C + RIM + k : C - RIM - 1 - k, y0 = min(SURF[x], SURF[x + 1]), y1 = max(SURF[x], SURF[x + 1]), th = min(4, v[k] * 3.2), al = min(1, v[k] * 8);\n      // Its glow on the air just above it.\n      for (let j = 1; j \u003c= 3; j++) put(x, y0 - th - j, [255, 90, 20], (0.35 * al * T[k]) / j);\n      for (let y = floor(y0 - th); y \u003c= floor(y1); y++) {\n        const n = vn(k * 0.7 - ph * 2, y * 0.6), tt = T[k], c = lc(0.22 + 0.62 * tt + 0.18 * n);\n        const cr = max(sm(0.75, 0.25, tt) * sm(0.3, 0.6, vn(k * 1.3 - ph * 2, y * 1.1 + 9)), sm(0.12, 0.02, tt)), g = S.gr[(y * W + x) & 8191];\n        put(x, y, [mix(c[0], 64 * g, cr), mix(c[1], 52 * g, cr), mix(c[2], 54 * g, cr)], al);\n      }\n    }\n  }\n\n  // Bombs and spatter, with a short trail while they fly.\n  for (const q of S.parts) {\n    const c = lc(0.25 + 0.85 * q.T);\n    if (!q.m) for (let j = 1; j \u003c= 3; j++) put(q.x - q.vx * 0.022 * j, q.y - q.vy * 0.022 * j, c, 0.5 / j);\n    put(q.x, q.y, c);\n    if (q.b && q.T > 0.3) put(q.x + 1, q.y, c, 0.6);\n  }\n\n  // Lightning.\n  for (const b of S.bolts) {\n    if (floor(b.life * 40) % 3 === 1) continue;\n    for (const pts of [b.pts, b.br])\n      for (let j = 1; j \u003c pts.length; j++) {\n        const [x0, y0] = pts[j - 1], [x1, y1] = pts[j], m = max(abs(x1 - x0), abs(y1 - y0)) * 1.5 + 1;\n        for (let u = 0; u \u003c= m; u++) {\n          const x = mix(x0, x1, u / m), y = mix(y0, y1, u / m);\n          put(x - 1, y, [120, 110, 255], 0.35), put(x + 1, y, [120, 110, 255], 0.35), put(x, y, [240, 240, 255]);\n        }\n      }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-eruption","type":"code","name":"eruption","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Eruption\n// Family:  volcano\n// Idea:    A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the cutaway drawing of a stratovolcano in a geology textbook\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1\n//\n// Knob 1: Style. Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks.\n// Knob 2: Speed. At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower.\n// Knob 3: Pressure. How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own.\n// Knob 4: Wind. Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it.\n// Buttons: K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The axis, the crater rim's half width and crest row, the crater floor, the\n// old ground the cone was built on, the chamber's centre row, gravity in rows\n// per second squared, and the cells of lava down each flank.\nconst [C, RIM, RIMY, FLOOR, BASE, CHY, G, NL] = [32, 6, 53, 58, 86, 113, 34, 26];\n// The flank below the rim: steep at the summit, flattening to the panel's edge at row 84.\nconst flank = (dx) => RIMY + 31 * cl((dx - RIM) / 26, 0, 2) ** 0.8;\nconst SURF = new Float32Array(W + 1);\nfor (let x = 0; x \u003c= W; x++) {\n  const dx = abs(x - C);\n  SURF[x] = dx \u003c RIM ? FLOOR - (FLOOR - RIMY) * (dx / RIM) ** 2 : flank(dx) + 1.1 * (vn(x * 0.3, 7.5) - 0.5) * sm(RIM, RIM + 4, dx);\n}\nconst sAt = (X) => ((X = cl(X, 0, W - 0.001)), mix(SURF[floor(X)], SURF[floor(X) + 1], X - floor(X)));\n// The conduit's centre on each row, wandering a little on its way up.\nconst CXA = new Float32Array(H).map((_, y) => C + 1.3 * sin((y - FLOOR) * 0.11));\n// The dike leaves the conduit at row 99 and reaches the right flank here.\nconst VX = CXA[99] + 20;\n// How the older beds arch up over the chamber, column by column.\nconst BEND = new Float32Array(W).map((_, x) => exp(-(((x + 0.5 - C) / 15) ** 2)));\n\n// The cone's beds (lava, ochre tephra, ash, red scoria, pale pumice) and the\n// older rock under it (soil, sandstone, shale, red beds, limestone, dark\n// shale), each as colour index and thickness from the top down.\nconst CC = [[56, 50, 68], [134, 92, 40], [100, 96, 94], [112, 48, 32], [150, 130, 94]];\nconst BC = [[72, 48, 32], [142, 104, 50], [74, 74, 88], [118, 54, 36], [140, 130, 108], [46, 46, 62]];\nconst beds = (seq) => {\n  const out = [];\n  while (out.length \u003c 96) for (let i = 0; i \u003c seq.length; i += 2) for (let j = 0; j \u003c seq[i + 1]; j++) out.push(seq[i]);\n  return out;\n};\nconst CB = beds([0, 2, 1, 2, 2, 1, 0, 3, 3, 2, 1, 3, 4, 1, 0, 2, 2, 2, 3, 2, 0, 3, 1, 2, 2, 2, 4, 2, 0, 2, 3, 3, 1, 2]);\nconst BB = beds([0, 2, 1, 4, 2, 3, 3, 4, 4, 3, 5, 3, 1, 5, 3, 3, 2, 4, 4, 4, 5, 3, 1, 4, 3, 4, 2, 5]);\n\n// Magma from crust-dark red to white heat, as 256 steps over 0..1.25.\nconst LUT = new Float32Array(256 * 3);\n{\n  const K = [[0, 40, 6, 4], [0.2, 120, 14, 4], [0.4, 205, 46, 6], [0.6, 255, 110, 16], [0.78, 255, 182, 48], [0.95, 255, 236, 140], [1.15, 255, 255, 230]];\n  for (let i = 0; i \u003c 256; i++) {\n    const T = (i / 255) * 1.25;\n    let k = 0;\n    while (k \u003c K.length - 2 && T > K[k + 1][0]) k++;\n    const u = cl((T - K[k][0]) / (K[k + 1][0] - K[k][0]), 0, 1);\n    for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(K[k][c + 1], K[k + 1][c + 1], u);\n  }\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n\n// Sky rows: navy overhead, violet, and the last of the dusk low behind the flanks.\nconst SKY = [[0, 6, 9, 38], [40, 18, 20, 64], [64, 48, 26, 80], [86, 150, 64, 70]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), st: new Uint8ClampedArray(N * 3), kind: new Uint8Array(N), off: F32(N), gr: F32(N), vg: F32(N), sd: F32(N), A: F32(N), hot: F32(N),\n    t: 0, warm: 0, next: 0.5, slugs: [], parts: [], puffs: [], bolts: [], bub: [], glow: 0, fl: 0, flx: C, fly: 30, pr: 0.5, boost: 0, nf: 0, nv: 0, ndg: 0, npd: 1.5, lake: 0.5, pend: 0,\n    lv: [0, 1].map(() => ({ v: F32(NL), T: F32(NL), ph: 0 })),\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, dx = abs(X - C), s = sAt(X);\n    S.vg[i] = exp(-hypot(X - C, (Y - FLOOR + 1) * 0.8) / 15);\n    S.gr[i] = [0.86, 0.95, 1, 1.08][floor(hash(x, y + 77) * 4)];\n    S.sd[i] = Y - s;\n    if (Y \u003c s) {\n      // Sky, with a few stars high up.\n      let k = 0;\n      while (k \u003c SKY.length - 2 && Y > SKY[k + 1][0]) k++;\n      const u = sm(SKY[k][0], SKY[k + 1][0], Y), st = y \u003c 48 && hash(x, y) \u003c 0.014 ? 50 + 110 * hash(y, x) : 0;\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = mix(SKY[k][c + 1], SKY[k + 1][c + 1], u) + st * (c ? 1 : 0.9);\n    } else if (Y \u003c BASE - 3 * exp(-(((X - C) / 15) ** 2))) {\n      // The cone: beds laid parallel to the flanks, peaked over the old summit the crater blew away.\n      S.kind[i] = 1;\n      const ls = dx >= RIM ? flank(dx) : RIMY - (RIM - sqrt(dx * dx + 0.6)) * 0.8;\n      const d = cl(floor(Y - ls + 1.6 * (vn(x * 0.16, y * 0.09 + 30) - 0.5)), 0, 95), c0 = Y - s \u003c 1.4 ? [52, 44, 50] : CC[CB[d]];\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = c0[c] * S.gr[i];\n    } else {\n      S.kind[i] = 2;\n      S.off[i] = 1.6 * (vn(x * 0.11, y * 0.07 + 60) - 0.5);\n    }\n  }\n  for (let k = 0; k \u003c 14; k++) S.bub.push(bubble(0));\n}\n\n// A gas bubble somewhere low in the chamber.\nfunction bubble(P) {\n  return { x: C + (rnd() - 0.5) * (16 + 7 * P) * 1.4, y: CHY + rnd() * (7.5 + 2.5 * P) * 0.6 };\n}\n\nfunction puff(S, x, y, vy, r, a, tv, ny, fade, hot = 0.6, g = 0) {\n  // The oldest puff gives way when there are too many.\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vx: 0, vy, rx: r, ry: r, a, tv, ny, fade, hot, g, u: 22 });\n}\n\nfunction bolt(S) {\n  const c = S.puffs.filter((p) => !p.g && p.y \u003c 50 && p.rx > 3.5 && p.a > 0.25);\n  if (!c.length) return;\n  const p = c[floor(rnd() * c.length)], pts = [];\n  let x = p.x + (rnd() - 0.5) * p.rx, y = p.y - p.ry * 0.4;\n  const n = 5 + floor(rnd() * 8);\n  for (let j = 0; j \u003c n; j++) pts.push([x, y]), (x += (rnd() - 0.5) * 4), (y += 1.5 + rnd() * 1.5);\n  const m = pts[floor(n / 2)], br = [m];\n  for (let j = 0, bx = m[0], by = m[1], s = rnd() \u003c 0.5 ? -1 : 1; j \u003c 3; j++) br.push([(bx += s * (1 + rnd() * 2)), (by += 1 + rnd())]);\n  S.bolts.push({ pts, br, life: 0.24 });\n  [S.flx, S.fly] = pts[floor(n / 2)];\n}\n\n// A burst in the crater, its bombs, its ash and its light.\nfunction burst(S, str, haw) {\n  S.glow = min(2.2, S.glow + 0.9 * str);\n  S.boost += haw * 1.5;\n  // Bombs fly wide; a fan of finer spatter goes up steeper and falls back round the crater.\n  const nb = round((14 + 20 * str) * (1 - 0.6 * haw));\n  for (let n = 0; n \u003c nb; n++) {\n    const b = n % 3 ? 0 : 1, v = (b ? 24 + 22 * rnd() : 20 + 20 * rnd()) * sqrt(str) * (1 + 0.25 * S.P), a = (rnd() - 0.5) * (b ? 1.15 : 0.6);\n    fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, v, a, b);\n  }\n  for (let n = 0; n \u003c 2 + (str > 0.8 ? 1 : 0); n++) puff(S, C + (rnd() - 0.5) * 3, FLOOR - 3 - n * 3, -(14 + 10 * str), 3.5 + rnd(), 1 + 0.3 * str, -8, 2 + rnd() * 12, 0.04);\n  // Most bursts charge the fresh ash enough for a bolt a moment later.\n  if (rnd() \u003c 0.25 + 0.5 * str) S.pend = 0.5 + 0.4 * rnd();\n}\n\n// One bomb (b 1) or blob of spatter thrown from x, y at speed v, a radians off vertical.\nconst fling = (S, x, y, v, a, b = 0, vx = 0) => S.parts.push({ x, y, vx: v * sin(a) + vx, vy: -v * cos(a), T: 1, m: 0, b });\n\n// Lava poured into one flank's cell k: volume v at temperature T.\nfunction pour(L, k, v, T = 1) {\n  k = cl(k, 0, NL - 1);\n  L.T[k] = (L.T[k] * L.v[k] + T * v) / (L.v[k] + v + 1e-6);\n  L.v[k] += v;\n}\n\nfunction step(S, d) {\n  const s1 = S.k1, P = S.P, w = S.wind;\n  const strom = 1 - sm(0.2, 0.5, s1), haw = sm(0.15, 0.45, s1) * (1 - sm(0.6, 0.85, s1)), plin = sm(0.55, 0.9, s1);\n  Object.assign(S, { strom, haw, plin });\n  S.t += d;\n  const ax = 16 + 7 * P, ay = 7.5 + 2.5 * P, top = CHY - ay;\n  // Pressure builds in the chamber, and a slug of gas leaves for the conduit when it is ready.\n  S.pr = min(1, S.pr + d * (0.3 + 0.4 * P));\n  // A Plinian column draws on the chamber in long surges instead.\n  if (plin > 0) S.pr = mix(S.pr, 0.5 + 0.5 * sin(S.t * 1.6), min(1, plin * d * 3));\n  if ((S.next -= d) \u003c= 0 && plin \u003c 0.8) {\n    S.slugs.push({ y: top + 1, str: 0.6 + 0.4 * rnd() + 0.3 * P });\n    S.pr = max(0, S.pr - 0.6);\n    S.next = mix((1.3 + 1.7 * rnd()) / (1 + 0.7 * P), 0.5 + 0.5 * rnd(), max(haw, plin));\n  }\n  for (const g of S.slugs) {\n    // It speeds up as it expands near the top.\n    const u = cl((g.y - FLOOR) / (top - FLOOR), 0, 1);\n    g.y -= (16 + 30 * (1 - u)) * (1 + 0.5 * P) * d;\n    if (g.y \u003c= FLOOR + 1) (g.done = 1), burst(S, g.str * (strom + 0.35 * haw + 0.25 * plin), haw);\n  }\n  S.slugs = S.slugs.filter((g) => !g.done);\n  // Bubbles rise through the chamber and gather under its roof by the conduit's mouth.\n  for (const b of S.bub) {\n    const ex = C - b.x, v = (3 + 4 * P + 3 * S.pr) * d;\n    b.x += cl(ex, -1, 1) * v * 0.5 + sin(S.t * 2.3 + b.y) * 0.3 * v;\n    b.y -= v;\n    if (((b.x - C) / ax) ** 2 + ((b.y - CHY) / ay) ** 2 > 0.8) Object.assign(b, bubble(P));\n  }\n  // The fountain: a steady jet of spatter in Hawaiian style, surging after each slug,\n  // and a smaller one from the flank vent once the dike has broken out.\n  S.nf += d * haw * (60 + 50 * min(1, S.boost)) * (1 + 0.5 * P);\n  for (; S.nf >= 1; S.nf--) fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, (24 + 16 * rnd()) * (0.85 + 0.3 * P) * (1 + 0.3 * min(1, S.boost)), (rnd() - 0.5) * 0.45);\n  S.nv += d * 14 * sm(0.88, 1, P);\n  for (; S.nv >= 1; S.nv--) fling(S, VX + (rnd() - 0.5) * 2, sAt(VX) - 1, 10 + 8 * rnd(), (rnd() - 0.5) * 0.6, 0, 3);\n  S.boost = max(0, S.boost - d * 1.2);\n  // Gas and ash: a thin plume always, a roaring column in Plinian style.\n  S.ndg += d * (2.2 + 1.5 * haw + 11 * plin * (0.4 + S.pr));\n  for (; S.ndg >= 1; S.ndg--)\n    if (rnd() \u003c plin) puff(S, C + (rnd() - 0.5) * 5, FLOOR - 3, -(30 + 14 * rnd()), 5.5, 1, -20, 3 + 7 * rnd(), 0.04, 0.4);\n    else puff(S, C + (rnd() - 0.5) * 3, FLOOR - 2, -7, 3, 0.45 + 0.2 * haw, -6, 4 + 14 * rnd(), 0.045, 0.3);\n  // Plinian: part of the column collapses and pours down a flank.\n  if (plin > 0.3 && (S.npd -= d * plin) \u003c= 0) {\n    S.npd = 2 + 2 * rnd();\n    const g = rnd() \u003c 0.5 ? -1 : 1;\n    for (let n = 0; n \u003c 4; n++) puff(S, C + g * (RIM + 2 * n), RIMY + 2 * n, 0, 4, 1, 0, 0, 0.05, 1.2, g), (S.puffs[S.puffs.length - 1].u = 24 - 3 * n);\n  }\n  for (const p of S.puffs) {\n    if (p.g) {\n      // An avalanche of hot ash hugging the flank, slowing as it spreads, then lifting off.\n      p.x += p.g * p.u * d;\n      p.u = max(3, p.u - 3 * d);\n      p.rx += d * 2.5;\n      p.ry = min(8, p.ry + d * 1.5);\n      p.y = sAt(p.x) - p.ry * 0.35;\n      if (p.u \u003c 5 || p.x \u003c 1 || p.x > W - 1) Object.assign(p, { g: 0, vy: -3, tv: -5, ny: 14 + 10 * rnd(), fade: 0.06 });\n    } else {\n      const rise = sm(p.ny - 2, p.ny + 14, p.y);\n      p.vy += (p.tv * rise - p.vy) * 1.6 * d;\n      p.y += p.vy * d;\n      p.rx = min(30, p.rx + d * (0.8 + 0.12 * abs(p.vy) + 3.5 * (1 - rise) * p.a));\n      p.ry = min(12, p.ry + d * (0.6 + 0.05 * abs(p.vy)));\n    }\n    p.x += (p.vx + w * (4 + 18 * cl(1 - p.y / 60, 0, 1))) * d;\n    p.a -= d * p.fade;\n    p.hot = max(0, p.hot - d * 0.7);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.04 && p.x + p.rx > -4 && p.x - p.rx \u003c W + 4 && p.y + p.ry > -8);\n  // Bombs and spatter fly, land, roll and cool.\n  for (const q of S.parts) {\n    if (!q.m) {\n      q.vy += G * d;\n      q.vx += w * 7 * d;\n      q.x += q.vx * d;\n      q.y += q.vy * d;\n      q.T -= d * (q.b ? 0.16 : 0.35);\n      if (q.vy > 0 && q.y >= sAt(q.x)) {\n        const dx = abs(q.x - C);\n        if (dx \u003c RIM - 0.5) q.dead = 1;\n        else if (!q.b) (q.dead = 1), pour(S.lv[q.x > C ? 1 : 0], floor(dx - RIM), 0.05, max(0.5, q.T));\n        else Object.assign(q, { m: 1, u: 5 + abs(q.vx) * 0.3, s: q.x > C ? 1 : -1 });\n      }\n    } else {\n      q.x += q.s * q.u * d;\n      q.u = max(0, q.u - 6 * d);\n      q.y = sAt(q.x) - 0.5;\n      q.T -= d * 0.3;\n    }\n    if (q.T \u003c= 0 || q.x \u003c -2 || q.x > W + 2) q.dead = 1;\n  }\n  S.parts = S.parts.filter((q) => !q.dead);\n  if (S.parts.length > 400) S.parts.splice(0, S.parts.length - 400);\n  // Lava over the rim and down the flanks, slower as it cools and crusts.\n  const eff = (0.45 + 0.6 * P + 1.2 * haw) * (1 - 0.6 * plin);\n  for (let s = 0; s \u003c 2; s++) {\n    const L = S.lv[s], v = L.v, T = L.T;\n    pour(L, 0, eff * (s ? 0.55 : 1) * d);\n    if (s && P > 0.88) pour(L, floor(VX - C - RIM), 1.4 * sm(0.88, 1, P) * d);\n    L.ph += d * (1 + 2 * T[2]);\n    for (let k = NL - 1; k >= 0; k--) {\n      const f = min(v[k], v[k] * (0.2 + 2.2 * T[k] * T[k]) * (k \u003c 6 ? 1.6 : 0.9) * d);\n      v[k] -= f;\n      if (k \u003c NL - 1) pour(L, k + 1, f, T[k]);\n      T[k] = max(0, T[k] - d * (0.03 + 0.015 / (v[k] + 0.2)));\n      if (T[k] \u003c 0.1) v[k] = max(0, v[k] - d * 0.03);\n    }\n  }\n  S.lake = mix(S.lake, (1.2 + 1.2 * P + 4 * haw) * (1 - plin), min(1, d * 2));\n  // Lightning in the ash.\n  if (rnd() \u003c d * (0.2 + 1.3 * plin + 0.4 * S.glow)) bolt(S);\n  if (S.pend > 0 && (S.pend -= d) \u003c= 0) bolt(S);\n  for (const b of S.bolts) b.life -= d;\n  S.bolts = S.bolts.filter((b) => b.life > 0);\n  S.fl = S.bolts.reduce((m, b) => max(m, floor(b.life * 40) % 3 === 1 ? 0.35 : 1), 0);\n  S.glow *= exp(-d * 2.5);\n}\n\n// K1 tap: the big one.\nfunction blast(S) {\n  S.slugs.length = 0;\n  S.pr = 0;\n  burst(S, 2.4, 0);\n  S.glow = 2.2;\n  for (let n = 0; n \u003c 5; n++) puff(S, C + (rnd() - 0.5) * 6, FLOOR - 4, -(26 + 12 * rnd()), 4 + rnd() * 2, 1, -10, 2 + 8 * rnd(), 0.04, 1);\n  for (let s = 0; s \u003c 2; s++) pour(S.lv[s], 0, 1.6);\n  S.pend = 0.15;\n  S.next = 1.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2;\n  S.k1 = cl(k[0], 0, 1);\n  S.P = cl(k[2], 0, 1);\n  S.wind = cl(k[3], -1, 1);\n  // The volcano has been going for a while before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    for (let n = round(60 + 120 * sp); n-- > 0; ) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) blast(S);\n  step(S, cl(dt || 0, 0, 0.1) * sp);\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst lc = (T) => ((T = lut(T)), [LUT[T], LUT[T + 1], LUT[T + 2]]);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 === undefined) return;\n  F = S.f;\n  const { P, t, haw, plin, kind, st, A, hot, vg, wind } = S;\n  const ax = 16 + 7 * P + 0.8 * S.pr, ay = 7.5 + 2.5 * P + 0.5 * S.pr, top = CHY - ay, bamp = 3 + 6 * P + 1.4 * S.pr, bend = BEND.map((v) => v * bamp);\n  const L = 0.3 + 0.7 * S.glow + 0.6 * haw + 0.5 * plin, fl = S.fl;\n\n  // Sky, cone and the older beds bent up over the chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * 3, kd = kind[i];\n    if (kd === 0) {\n      const g = L * vg[i];\n      (F[o] = st[o] + 150 * g + 7 * fl), (F[o + 1] = st[o + 1] + 48 * g + 8 * fl), (F[o + 2] = st[o + 2] + 16 * g + 18 * fl);\n    } else if (kd === 1) {\n      const g = L * vg[i] * (S.sd[i] \u003c 2.5 ? 1 : 0.2);\n      (F[o] = st[o] + 120 * g), (F[o + 1] = st[o + 1] + 40 * g), (F[o + 2] = st[o + 2] + 10 * g);\n    } else {\n      const d = cl((i >> 6) + 0.5 - BASE + bend[i & 63] + S.off[i], 0, 94), d0 = floor(d), u = d - d0;\n      const a = BC[BB[d0]], b = BC[BB[d0 + 1]], gr = S.gr[i];\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(a[c], b[c], u) * gr;\n    }\n  }\n\n  // The magma: chamber, the feeder below it, the conduit, the dike and the sill, with the rock round them glowing.\n  const glowRock = (o, g) => {\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [210, 50, 16][c], min(0.85, g));\n  };\n  const melt = (o, T) => {\n    const k = lut(T);\n    (F[o] = LUT[k]), (F[o + 1] = LUT[k + 1]), (F[o + 2] = LUT[k + 2]);\n  };\n  for (let y = max(BASE, floor(top - 6)); y \u003c H; y++)\n    for (let x = max(0, floor(C - ax - 7)); x \u003c min(W, C + ax + 7); x++) {\n      const X = x + 0.5, Y = y + 0.5, e = hypot((X - C) / ax, (Y - CHY) / ay), o = (y * W + x) * 3;\n      if (e \u003c 1) {\n        const T = 0.28 + 0.38 * vn(X * 0.17 + 0.7 * sin(Y * 0.17 + t * 0.5), Y * 0.3 + t * 1.2) + 0.2 * (1 - e * e) - 0.25 * sm(0.72, 1, e) + 0.16 * S.pr + 0.1 * P + 0.35 * exp(-((X - C) ** 2) / 9 - ((Y - top) ** 2) / 6) * S.pr;\n        melt(o, T);\n      } else if (Y > CHY && abs(X - C - 1.5 * sin(y * 0.2)) \u003c 1.3) melt(o, 0.38 + 0.08 * sin(y * 0.5 - t * 3));\n      else glowRock(o, exp(-((e - 1) * ay) / 2.4) * (0.5 + 0.4 * S.pr + 0.2 * P));\n    }\n  for (const b of S.bub) put(b.x, b.y, lc(1.05));\n  const slug = (y) => S.slugs.reduce((m, g) => max(m, exp(-(((y - g.y) / 2.6) ** 2))), 0);\n  for (let y = FLOOR; y \u003c= top + 1; y++) {\n    const cx = CXA[y], sg = slug(y), hw = 1.35 + 1.3 * sg + 0.6 * plin;\n    for (let x = max(0, floor(cx - hw - 5)); x \u003c min(W, cx + hw + 5); x++) {\n      const o = (y * W + x) * 3, q = abs(x + 0.5 - cx);\n      if (q \u003c hw) {\n        const ves = hash(x, floor(y + t * 14)) \u003c 0.12 ? 0.25 : 0;\n        melt(o, mix(0.58 + 0.12 * sin(y * 0.45 + t * 7) + ves + 0.5 * sg, 0.5 + 0.6 * vn(x * 0.6, (y + t * 45) * 0.25), plin));\n      } else if (kind[y * W + x]) glowRock(o, exp(-(q - hw) / 1.5) * (0.4 + 0.5 * sg + 0.3 * plin));\n    }\n  }\n  // The dike towards the right flank, and the sill along the beds on the left.\n  const dk = sm(0.2, 0.9, P), sl = sm(0.45, 1, P);\n  for (let j = 0; j \u003c 46 * dk; j++) {\n    const u = j / 46, x = CXA[99] + (VX - CXA[99]) * u, y = 99 - (99 - sAt(VX)) * u;\n    put(x, y, lc(0.55 + 0.1 * sin(j * 0.6 - t * 5)));\n    put(x + 1, y, [210, 50, 16], 0.45);\n  }\n  for (let j = 0; j \u003c 20 * sl; j++) {\n    const x = CXA[93] - 2 - j, y = 93 + 0.006 * j * j + 2 * sin(j * 0.15);\n    put(x, y, lc(0.5 + 0.08 * sin(j * 0.7 + t * 4)));\n    if (j \u003c 14 * sl) put(x, y + 1, lc(0.42));\n  }\n\n  // The ash: every puff summed, then shaded over the sky.\n  A.fill(0);\n  hot.fill(0);\n  for (const p of S.puffs) {\n    const x0 = max(0, floor(p.x - p.rx)), x1 = min(W - 1, floor(p.x + p.rx)), y0 = max(0, floor(p.y - p.ry)), y1 = min(H - 1, floor(p.y + p.ry));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = (y + 0.5 - p.y) / p.ry;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = (x + 0.5 - p.x) / p.rx, q = 1 - dx * dx - dy * dy;\n        if (q > 0) (A[y * W + x] += p.a * q * q), (hot[y * W + x] += p.hot * q * q);\n      }\n    }\n  }\n  // Ash falling out of the plume aloft, slanting downwind as it falls.\n  const col = new Float32Array(W);\n  for (const p of S.puffs)\n    if (!p.g && p.y \u003c 45 && p.rx > 4) for (let x = max(0, floor(p.x - p.rx)); x \u003c min(W, p.x + p.rx); x++) col[x] += p.a * max(0, 1 - ((x + 0.5 - p.x) / p.rx) ** 2);\n  for (let y = 14; y \u003c 84; y++) {\n    const f = 0.11 * sm(12, 30, y) * (1 - sm(56, 84, y)), sh = wind * (y - 14) * 0.55;\n    for (let x = 0; x \u003c W; x++) {\n      const c = col[cl(round(x - sh), 0, W - 1)];\n      if (c > 0.05) A[y * W + x] += f * min(1.5, c) * (0.3 + vn(x * 0.9, y * 0.12 - t * 3));\n    }\n  }\n  const { flx, fly } = S;\n  for (let i = 0; i \u003c N; i++) {\n    if (A[i] \u003c 0.01 || kind[i]) continue;\n    const x = i & 63, y = i >> 6, o = i * 3, tex = vn(x * 0.22 - t * wind * 0.5, y * 0.2 + t * 0.7);\n    const al = min(0.94, 1 - exp(-A[i] * (1.3 + 1.7 * tex))), sh = 0.55 + 0.6 * tex, vl = 0.8 * L * vg[i] + 0.6 * hot[i], fy = fl * exp(-hypot(x - flx, (y - fly) * 0.7) / 16);\n    F[o] = mix(F[o], 104 * sh + 255 * vl + 130 * fy, al);\n    F[o + 1] = mix(F[o + 1], 98 * sh + 100 * vl + 140 * fy, al);\n    F[o + 2] = mix(F[o + 2], 100 * sh + 34 * vl + 210 * fy, al);\n  }\n\n  // The crater: the vent, the lava lake, and the flash of a burst.\n  const ll = FLOOR + 0.6 - S.lake;\n  for (let y = RIMY - 1; y \u003c= FLOOR + 1; y++)\n    for (let x = C - RIM; x \u003c C + RIM; x++) {\n      const i = y * W + x;\n      if (!kind[i] && y + 0.5 > ll) melt(i * 3, 0.55 + 0.3 * vn(x * 0.6 + t, y * 0.8) + 0.2 * S.glow - 0.12 * (y + 0.5 - ll \u003c 1 ? 1 : 0));\n    }\n  if (S.glow > 0.02)\n    for (let y = FLOOR - 14; y \u003c= FLOOR + 3; y++)\n      for (let x = C - 12; x \u003c C + 12; x++) {\n        const o = (y * W + x) * 3, g = S.glow * exp(-hypot(x + 0.5 - C, y + 0.5 - FLOOR + 1) / 3.2);\n        (F[o] += 255 * g), (F[o + 1] += 190 * g), (F[o + 2] += 90 * g);\n      }\n\n  // Lava down the flanks: hot and bright near the rim, crusting dark as it cools.\n  for (let s = 0; s \u003c 2; s++) {\n    const { v, T, ph } = S.lv[s];\n    for (let k = 0; k \u003c NL; k++) {\n      if (v[k] \u003c 0.01) continue;\n      const x = s ? C + RIM + k : C - RIM - 1 - k, y0 = min(SURF[x], SURF[x + 1]), y1 = max(SURF[x], SURF[x + 1]), th = min(4, v[k] * 3.2), al = min(1, v[k] * 8);\n      // Its glow on the air just above it.\n      for (let j = 1; j \u003c= 3; j++) put(x, y0 - th - j, [255, 90, 20], (0.35 * al * T[k]) / j);\n      for (let y = floor(y0 - th); y \u003c= floor(y1); y++) {\n        const n = vn(k * 0.7 - ph * 2, y * 0.6), tt = T[k], c = lc(0.22 + 0.62 * tt + 0.18 * n);\n        const cr = max(sm(0.75, 0.25, tt) * sm(0.3, 0.6, vn(k * 1.3 - ph * 2, y * 1.1 + 9)), sm(0.12, 0.02, tt)), g = S.gr[(y * W + x) & 8191];\n        put(x, y, [mix(c[0], 64 * g, cr), mix(c[1], 52 * g, cr), mix(c[2], 54 * g, cr)], al);\n      }\n    }\n  }\n\n  // Bombs and spatter, with a short trail while they fly.\n  for (const q of S.parts) {\n    const c = lc(0.25 + 0.85 * q.T);\n    if (!q.m) for (let j = 1; j \u003c= 3; j++) put(q.x - q.vx * 0.022 * j, q.y - q.vy * 0.022 * j, c, 0.5 / j);\n    put(q.x, q.y, c);\n    if (q.b && q.T > 0.3) put(q.x + 1, q.y, c, 0.6);\n  }\n\n  // Lightning.\n  for (const b of S.bolts) {\n    if (floor(b.life * 40) % 3 === 1) continue;\n    for (const pts of [b.pts, b.br])\n      for (let j = 1; j \u003c pts.length; j++) {\n        const [x0, y0] = pts[j - 1], [x1, y1] = pts[j], m = max(abs(x1 - x0), abs(y1 - y0)) * 1.5 + 1;\n        for (let u = 0; u \u003c= m; u++) {\n          const x = mix(x0, x1, u / m), y = mix(y0, y1, u / m);\n          put(x - 1, y, [120, 110, 255], 0.35), put(x + 1, y, [120, 110, 255], 0.35), put(x, y, [240, 240, 255]);\n        }\n      }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Style","min":0,"max":1,"about":"Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower."},{"name":"Pressure","min":0,"max":1,"about":"How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own."},{"name":"Wind","min":-1,"max":1,"about":"Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.3557,"detail":0.0525,"edges":0.231,"complexity":2.1856,"coverage":1,"colour":0.2971,"drift":0.0844},"knobResponse":[0.082,0.0543,0.0923,0.0549]},{"slug":"essence-drop","title":"Essence Drop","family":"cosmetic","round":33,"note":"맑은 물빛 에센스에 짙은 색 방울이 느린 화면으로 떨어져 손가락 아홉 개의 왕관을 세우고, 파인 자리가 닫히며 솟은 기둥 끝에서 구슬이 떨어져 나가요. 방울의 짙은 색은 소용돌이 고리로 말려 가라앉으며 웅덩이에 풀려요. K3 을 올리면 왕관과 구슬이 사라지고 젤처럼 무겁게 잠기며, K1 은 색상환을 다 돌고 누르면 방울이 바로 떨어져요.","idea":"In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.","buttons":"K1 tap lets a drop fall now.","code":"// ===== Patternflow pattern =====\n// Title:   Essence Drop\n// Family:  cosmetic\n// Idea:    In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after slow-motion film of a drop falling into clear essence\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1\n//\n// Knob 1: Hue. The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker.\n// Knob 2: Speed. How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower.\n// Knob 3: Viscosity. Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume.\n// Knob 4: Size. The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs.\n// Buttons: K1 tap lets a drop fall now.\n\nconst W = 64, H = 128, N = W * H, Y0 = 66;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k) => {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n};\n// Light comes from the upper left.\nconst LX = -0.55, LY = -0.835;\nconst MAXP = 2000;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, visc: 0, size: 0.06, next: 0.4, T: 0,\n    ev: [], dye: new Float32Array(N), deep: new Float32Array(N), dt2: new Float32Array(N), sdf: new Float32Array(N), rip: new Float32Array(W),\n    px: new Float32Array(MAXP), py: new Float32Array(MAXP), pa: new Float32Array(MAXP), pe: new Int32Array(MAXP), np: 0,\n    circ: [], caps: [], pal: new Float32Array(13), palKey: NaN,\n  };\n}\n\nfunction spawn(S) {\n  const r = 3.4 + 4.2 * S.size, R = Math.random;\n  const x = 32 + (R() - 0.5) * 10;\n  // Nine fingers round the front of the crown, each its own length, and the\n  // beads they throw each their own speed, so the spray fans out.\n  const fing = [];\n  for (let j = 0; j \u003c 9; j++) fing.push([PI * (j + 0.5 + 0.35 * (R() - 0.5)) / 9, 0.6 + 0.65 * R(), 7 + 6 * R(), 4 + 5 * R()]);\n  S.ev.push({ id: (S.idn = (S.idn || 0) + 1), x, r, te: 0, Tf: 1.4 * (1 + 0.5 * S.visc), dyed: false, ga: 0, a: 0, yv: 0, fing });\n  if (S.ev.length > 4) S.ev.shift();\n}\n\n// The phases of one splash, as functions of tau, the seconds since impact on\n// the film's own clock: the cavity opens and shuts by 0.9, the crown stands\n// by 0.35 and falls by 1.1, the jet rises from 0.85 and is gone by 2.35.\nconst TC = 0.9, TCR = 1.1, TJ0 = 0.85, TJ = 1.5, TPINCH = 0.42;\nfunction slowOf(v) {\n  return 1 + 1.3 * v;\n}\n\n// The dye: when the drop goes under, a blob of particles is set in the\n// velocity field of a vortex pair, the cross-section of a vortex ring. The\n// pair moves down at U = G / (4 pi a), slowing as G decays and widening as it\n// slows, and the particles wind into its two curls and trail a stem.\nfunction stepDye(S, dts) {\n  const v = S.visc;\n  for (const e of S.ev) {\n    const tau = (e.te - e.Tf) / slowOf(v);\n    if (tau \u003c 0.08) continue;\n    if (!e.dyed) {\n      e.dyed = true;\n      e.a = 1.7 * e.r;\n      e.yv = Y0 + 2 * e.r;\n      e.ga = 4 * PI * e.a * (13 + 1.4 * e.r) * (1 - 0.55 * v);\n      const n = floor(160 + 40 * e.r);\n      for (let i = 0; i \u003c n; i++) {\n        if (S.np >= MAXP) break;\n        const ang = Math.random() * 2 * PI, rad = sqrt(Math.random()) * 1.9 * e.r;\n        S.px[S.np] = e.x + cos(ang) * rad;\n        S.py[S.np] = Y0 + 1.6 * e.r + sin(ang) * rad * 0.8;\n        S.pa[S.np] = 0;\n        S.pe[S.np] = e.id;\n        S.np++;\n      }\n    }\n    // Viscosity eats the ring: its spin decays over 2.8 s in water, 1.5 s in gel.\n    e.ga *= exp(-dts / (2.8 - 1.3 * v));\n    const U = e.ga / (4 * PI * e.a);\n    e.yv += U * dts;\n    e.a += 0.3 * e.r * dts * (1 - 0.6 * v);\n  }\n  const dye = S.dye;\n  let k = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    let e = null;\n    for (const f of S.ev) if (f.id === S.pe[i]) e = f;\n    let x = S.px[i], y = S.py[i];\n    const age = (S.pa[i] += dts);\n    if (!e || age > 12) continue;\n    // Two Lamb-Oseen cores, opposite spins, the fluid between them going down.\n    let ux = 0, uy = 0;\n    const d2 = (0.85 * e.a) ** 2;\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const dx = x - (e.x + s * e.a), dy = y - e.yv, g = (-s * e.ga) / (2 * PI * (dx * dx + dy * dy + d2));\n      ux += -g * dy;\n      uy += g * dx;\n    }\n    x += (ux + (Math.random() - 0.5) * 7) * dts;\n    y += (uy + (Math.random() - 0.5) * 7) * dts;\n    x = cl(x, 0.5, W - 1.5);\n    y = cl(y, Y0 + 1, H - 1.5);\n    // Each particle leaves colour where it passes, less as it ages, so the\n    // curls show where it went and the old colour spreads out.\n    const w = dts * 1.4 * exp(-age / 5), ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix;\n    dye[o] += w * (1 - fx) * (1 - fy);\n    dye[o + 1] += w * fx * (1 - fy);\n    dye[o + W] += w * (1 - fx) * fy;\n    dye[o + W + 1] += w * fx * fy;\n    S.px[k] = x;\n    S.py[k] = y;\n    S.pa[k] = age;\n    S.pe[k] = S.pe[i];\n    k++;\n  }\n  S.np = k;\n  // Diffusion and a slow fade into the pool: a gel holds the colour longer.\n  const t2 = S.dt2, kap = cl(dts * (1.6 - 1.1 * v), 0, 0.24), fade = exp(-dts / (7 + 5 * v));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, c = dye[i];\n      const l = (x > 0 ? dye[i - 1] : c) + (x \u003c W - 1 ? dye[i + 1] : c) + (y > 0 ? dye[i - W] : c) + (y \u003c H - 1 ? dye[i + W] : c) - 4 * c;\n      t2[i] = (c + kap * l) * fade;\n    }\n  dye.set(t2);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.visc = cl(k[2] || 0, 0, 1);\n  S.size = cl(k[3], 0, 1);\n  const dts = (d * S.speed) / 2;\n  S.T += dts;\n  if (input.btnPressed && input.btnPressed[0]) spawn(S);\n  S.next -= dts;\n  if (S.next \u003c= 0) {\n    spawn(S);\n    S.next += 5.5 * (1 + 0.4 * S.visc);\n  }\n  for (const e of S.ev) e.te += dts;\n  S.ev = S.ev.filter((e) => e.te - e.Tf \u003c 16 * slowOf(S.visc));\n  stepDye(S, dts);\n}\n\n// Shapes for the frame: circles and tapered capsules, each smooth-joined to\n// the pool so a bead touching the surface melts into it.\nfunction build(S) {\n  const C = (S.circ = []), K = (S.caps = []), v = S.visc, rip = S.rip;\n  rip.fill(0);\n  S.cav = [];\n  S.crowns = [];\n  for (const e of S.ev) {\n    const r = e.r, x0 = e.x;\n    if (e.te \u003c e.Tf) {\n      // Falling, faster and faster. The drop hangs from a thread out of the\n      // top; the thread stretches, breaks (later the thicker the essence) and\n      // its lower end balls up into a small bead that trails the drop.\n      const u = e.te / e.Tf, yb = -2 * r - 4 + (Y0 + 2 * r + 4) * (0.3 * u + 0.7 * u * u), cy = yb - r;\n      C.push([x0, cy, r, 1.4, 1]);\n      const tb = 0.45 + 0.42 * v;\n      if (u \u003c tb) K.push([x0, cy - 0.5 * r, x0, -6, 0.42 * r, 0.12 * r * (1 + v), 1.6, 1]);\n      else {\n        const f = (u - tb) / (1 - tb), sy = cy - r - 2 - (6 + 14 * v) * sqrt(f);\n        C.push([x0, sy, 0.32 * r, 1, 1]);\n        K.push([x0, -6, x0, -6 + (cy - 12 + 6) * max(0, 1 - 3 * f), 0.15 * r, 0.12 * r, 1, 1]);\n      }\n      continue;\n    }\n    const tau = (e.te - e.Tf) / slowOf(v);\n    // The drop sinks into the surface instead of vanishing at the touch: in a\n    // gel it takes 0.75 s and a thick neck joins it to the pool.\n    const ts = 0.15 + 0.6 * v;\n    if (tau \u003c ts) C.push([x0, Y0 - r + 2.2 * r * (tau / ts), r * (1 - 0.3 * (tau / ts)), 1.4 + 3 * v, 1]);\n    // Ripples: a packet from the impact and a smaller one when the jet falls,\n    // running out along the surface at 9 LEDs a second, 4 in a gel, about\n    // nine LEDs from crest to crest.\n    for (const [t0, a0] of [[0, 0.9 * (1 - 0.6 * v)], [TJ0 + TJ * 0.8, 0.45 * (1 - 0.7 * v)]]) {\n      const tt = tau - t0;\n      if (tt \u003c= 0) continue;\n      const c = 9 - 5 * v, A = (a0 * r * exp(-tt / 1.8)) / 3.6;\n      for (let x = 0; x \u003c W; x++) {\n        const s = abs(x + 0.5 - x0) - c * tt - 2, en = exp(-(s * s) / 60);\n        if (en > 0.01) rip[x] += A * en * sin(s * 0.7);\n      }\n    }\n    // The cavity: an air pocket pushed down under the surface.\n    if (tau \u003c TC) {\n      const Rc = r * (1.2 + 1.3 * (1 - exp(-tau / 0.18))) * (1 - 0.3 * v), Dc = r * 2.5 * (1 - 0.55 * v) * sin((PI * tau) / TC);\n      if (Dc > 0.3) S.cav.push([x0, Rc, Dc]);\n    }\n    // The crown: two thin walls leaning out, a translucent sheet between\n    // them, and fingers round the rim whose beads fly off at 0.42.\n    const hc = r * 3.1 * max(0, 1 - v / 0.7), R = r * (1.4 + 1.5 * (1 - exp(-min(tau, TCR) / 0.25)));\n    if (hc > 0.2 && tau \u003c TCR) {\n      const Hc = hc * Math.pow(sin((PI * tau) / TCR), 0.6), fl = 0.35 * Hc;\n      if (Hc > 0.5) {\n        for (let s = -1; s \u003c= 1; s += 2) K.push([x0 + s * R, Y0 + 1, x0 + s * (R + fl), Y0 - Hc, 0.75, 0.5, 1.2]);\n        S.crowns.push([x0, R, fl, Hc]);\n        if (tau \u003c 0.42 && v \u003c 0.5) {\n          const g = sm(tau / 0.3) * (1 - v / 0.5);\n          for (const [ph, lk] of e.fing) {\n            const cs = cos(ph), bx = x0 + (R + fl) * cs, lf = lk * 0.55 * hc * g, tx = bx + 0.35 * lf * cs, ty = Y0 - Hc - lf;\n            K.push([bx, Y0 - Hc + 0.5, tx, ty, 0.5, 0.3, 0.9]);\n            C.push([tx, ty, 0.26 * r, 0.9]);\n          }\n        }\n      }\n    }\n    if (tau >= 0.42 && v \u003c 0.5) {\n      // The beads thrown from the fingers fly out and up, then slow and drop back.\n      const t = tau - 0.42, Hp = hc * Math.pow(sin((PI * 0.42) / TCR), 0.6), Rp = r * (1.4 + 1.5 * (1 - exp(-0.42 / 0.25))) + 0.35 * Hp;\n      for (const [ph, lk, vy, vx] of e.fing) {\n        const cs = cos(ph), lf = lk * 0.55 * hc * (1 - v / 0.5);\n        const y = Y0 - Hp - lf - vy * t + 16 * t * t, x = x0 + (Rp + 0.35 * lf) * cs + vx * cs * t;\n        if (y \u003c Y0 + 2) C.push([x, y, 0.26 * r * (1 - v / 0.5), 0.9]);\n      }\n    }\n    // The jet: when the cavity snaps shut a column climbs out of the middle;\n    // in water its tip pinches off into a bead that flies on and falls back.\n    if (tau > TJ0) {\n      const s = (tau - TJ0) / TJ, hj = min(48, r * 8.5) * (1 - 0.8 * v), rb = 0.85 * r * (1 + 0.8 * v), pinch = v \u003c 0.55;\n      if (s \u003c 1) {\n        const Hj = hj * sin(PI * s);\n        const top = Y0 - Hj;\n        K.push([x0, Y0 + 3, x0, top, rb, (0.5 + 0.5 * v) * r, 2.5 + 2.5 * v]);\n        if (!pinch || s \u003c TPINCH) C.push([x0, top - 0.3 * r, (0.7 + 0.3 * v) * r, 1.3 + 2 * v]);\n      }\n      if (pinch && s >= TPINCH) {\n        const t = (s - TPINCH) * TJ, Hp = hj * sin(PI * TPINCH), y = Y0 - Hp - 0.9 * r - 7 * t + 18 * t * t;\n        if (y \u003c Y0 + 2) C.push([x0, y, 0.68 * r, 1.3]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  build(S);\n  const sdf = S.sdf, rip = S.rip, v = S.visc, deep = S.deep;\n  // The liquid's signed distance: negative inside. The pool's surface,\n  // minus the cavities, then every shape joined on smoothly. The falling drop\n  // is the concentrated essence, so where it is the colour is deep.\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i++) sdf[i] = Y0 + rip[x] - (y + 0.5);\n  deep.fill(0);\n  for (const [cx, R, D] of S.cav)\n    for (let y = Y0 - 2; y \u003c min(H, Y0 + D + 3); y++)\n      for (let x = max(0, floor(cx - R - 3)); x \u003c min(W, cx + R + 3); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - Y0) / D, da = (sqrt(dx * dx + dy * dy) - 1) * min(R, D), i = y * W + x;\n        sdf[i] = -smin(-sdf[i], da, 1.5);\n      }\n  for (const [ax, ay, bx, by, ra, rb, k, dp] of S.caps) {\n    const x0 = max(0, floor(min(ax, bx) - ra - k - 1)), x1 = min(W - 1, floor(max(ax, bx) + ra + k + 1));\n    const y0 = max(0, floor(min(ay, by) - ra - k - 1)), y1 = min(H - 1, floor(max(ay, by) + ra + k + 1));\n    const ex = bx - ax, ey = by - ay, ll = ex * ex + ey * ey || 1;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * ex + qy * ey) / ll, 0, 1);\n        const dd = Math.hypot(qx - ex * t, qy - ey * t) - (ra + (rb - ra) * t), i = y * W + x;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  for (const [cx, cy, r, k, dp] of S.circ) {\n    const x0 = max(0, floor(cx - r - k - 1)), x1 = min(W - 1, floor(cx + r + k + 1)), y0 = max(0, floor(cy - r - k - 1)), y1 = min(H - 1, floor(cy + r + k + 1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const i = y * W + x, dd = Math.hypot(x + 0.5 - cx, y + 0.5 - cy) - r;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  // Palette: backdrop, essence, and the deep colour the drop carries. A\n  // thicker essence holds more colour. From rose through orange and gold to\n  // lime, hue -0.12 to 0.35, any of these at half brightness reads brown,\n  // khaki or olive on the LEDs, so there everything is lifted towards cream\n  // and paled: the backdrop to 200 of 255 or more with a shallow vignette, the\n  // pool to about 215, and the deep colour goes brighter than the pool\n  // instead of darker.\n  const pal = S.pal, h = S.hue + 0.52, hf = h - floor(h), key = hf + 7 * v;\n  if (S.palKey !== key) {\n    const hw = hf > 0.5 ? hf - 1 : hf, wm = sm((hw + 0.12) / 0.06) * (1 - sm((hw - 0.28) / 0.07));\n    hsv(h + 0.02, 0.14 - 0.06 * wm, 1, pal, 0);\n    hsv(h + 0.06 * (1 - wm), 0.4 - 0.3 * wm, 1, pal, 10);\n    hsv(h, (0.38 + 0.22 * v) * (1 - 0.5 * wm), 1, pal, 3);\n    hsv(h + 0.015, 0.92 - 0.3 * wm, 1, pal, 6);\n    pal[9] = wm;\n    S.palKey = key;\n  }\n  const wm = pal[9], dv = 0.46 + 0.5 * wm, dye = S.dye, T = S.T;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const below = y + 0.5 - Y0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const d = sdf[i];\n      // The backdrop: a soft key light high in the middle, deepening towards\n      // the surface.\n      const gx = (x + 0.5 - 32) / 32, gy = (y - 14) / 46;\n      const gl = exp(-(gx * gx + gy * gy)), bv = min(1, 0.4 + 0.46 * gl + wm * (0.36 - 0.26 * gl));\n      let r = (pal[10] + (pal[0] - pal[10]) * gl) * bv, g = (pal[11] + (pal[1] - pal[11]) * gl) * bv, b = (pal[12] + (pal[2] - pal[12]) * gl) * bv;\n      // The crown's sheet: thin film between its walls, brighter at the two\n      // sides where the eye looks along it, and along the lip.\n      for (const [cx, R, fl, Hc] of S.crowns) {\n        const hgt = -below;\n        if (hgt \u003c -0.5 || hgt > Hc) continue;\n        const Rh = R + (fl * hgt) / Hc, u = abs(x + 0.5 - cx) / Rh;\n        if (u >= 1) continue;\n        const a = 0.16 + 0.3 * min(1, 1 / sqrt(1 - u * u) - 1) + 0.4 * exp(-((hgt - Hc + 0.6) ** 2));\n        r += (pal[3] * 0.92 - r) * a;\n        g += (pal[4] * 0.92 - g) * a;\n        b += (pal[5] * 0.92 - b) * a;\n      }\n      // The open surface, seen edge on: a gloss line along it, glinting white\n      // where a ripple tilts it towards the light. It is drawn across the\n      // boundary, so it does not flicker as the surface moves by a fraction.\n      const pd = Y0 + rip[x] - (y + 0.5), open = abs(d - pd) \u003c 0.02;\n      let spec = 0;\n      if (open && abs(pd) \u003c 2.5) {\n        const sl = ((x \u003c W - 1 ? rip[x + 1] : rip[x]) - (x > 0 ? rip[x - 1] : rip[x])) / 2, nd = (sl * LX - LY) / sqrt(1 + sl * sl);\n        spec = exp(-((pd + 0.3) ** 2) / 0.45) * (0.16 + 0.85 * Math.pow(max(0, nd), 12));\n      }\n      if (d \u003c 0.5) {\n        const cov = cl(0.5 - d, 0, 1);\n        // Inside the liquid: the essence, brighter just under the surface and\n        // deeper towards the bottom, slow shafts of light from the surface\n        // swaying through it, and the deep colour where the drop has gone.\n        const depth = cl(below / (H - Y0), 0, 1);\n        let lv = below \u003c 0 ? 0.88 + 0.09 * wm : 0.8 - 0.36 * depth + wm * (0.15 + 0.16 * depth);\n        if (below >= 0) {\n          const sx = x + 0.4 * below;\n          lv += 0.16 * (1 - depth) * (0.5 + 0.5 * sin(0.3 * sx - 0.7 * T + 1.3 * sin(0.11 * sx + 0.23 * T)));\n        }\n        lv = min(1, lv);\n        let lr = pal[3] * lv, lg = pal[4] * lv, lb = pal[5] * lv;\n        const da = max(deep[i] * 0.9, 1 - exp(-dye[i] * 0.9));\n        if (da > 0.003) {\n          lr += (pal[6] * dv - lr) * da;\n          lg += (pal[7] * dv - lg) * da;\n          lb += (pal[8] * dv - lb) * da;\n        }\n        let rim = 0, inner = 0;\n        if (!open) {\n          // Everything but the open surface: the normal from the distance\n          // field, a white highlight where it faces the light, a gloss on what\n          // faces up, a darker rim on the far side and light gathered inside\n          // the bottom of a bead.\n          const xm = x > 0 ? sdf[i - 1] : d, xp = x \u003c W - 1 ? sdf[i + 1] : d, ym = y > 0 ? sdf[i - W] : d, yp = y \u003c H - 1 ? sdf[i + W] : d;\n          let nx = xp - xm, ny = yp - ym;\n          const nl = Math.hypot(nx, ny) || 1;\n          nx /= nl;\n          ny /= nl;\n          const edge = cl(1 + d / 1.6, 0, 1), nd = nx * LX + ny * LY;\n          spec += edge * (0.9 * Math.pow(max(0, nd), 7) + 0.22 * max(0, -ny));\n          rim = edge * 0.35 * (1 - max(0, nd));\n          inner = cl((-d - 0.6) / 1.2, 0, 1) * cl((3 + d) / 1.5, 0, 1) * Math.pow(max(0, -nd), 2) * (below \u003c 1 ? 0.6 : 0);\n        }\n        lr = lr * (1 - rim) + inner * pal[3];\n        lg = lg * (1 - rim) + inner * pal[4];\n        lb = lb * (1 - rim) + inner * pal[5];\n        r += (lr - r) * cov;\n        g += (lg - g) * cov;\n        b += (lb - b) * cov;\n      }\n      r += spec;\n      g += spec;\n      b += spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","layer":{"id":"layer-essence-drop","type":"code","name":"essence-drop","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Essence Drop\n// Family:  cosmetic\n// Idea:    In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after slow-motion film of a drop falling into clear essence\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1\n//\n// Knob 1: Hue. The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker.\n// Knob 2: Speed. How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower.\n// Knob 3: Viscosity. Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume.\n// Knob 4: Size. The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs.\n// Buttons: K1 tap lets a drop fall now.\n\nconst W = 64, H = 128, N = W * H, Y0 = 66;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k) => {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n};\n// Light comes from the upper left.\nconst LX = -0.55, LY = -0.835;\nconst MAXP = 2000;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, visc: 0, size: 0.06, next: 0.4, T: 0,\n    ev: [], dye: new Float32Array(N), deep: new Float32Array(N), dt2: new Float32Array(N), sdf: new Float32Array(N), rip: new Float32Array(W),\n    px: new Float32Array(MAXP), py: new Float32Array(MAXP), pa: new Float32Array(MAXP), pe: new Int32Array(MAXP), np: 0,\n    circ: [], caps: [], pal: new Float32Array(13), palKey: NaN,\n  };\n}\n\nfunction spawn(S) {\n  const r = 3.4 + 4.2 * S.size, R = Math.random;\n  const x = 32 + (R() - 0.5) * 10;\n  // Nine fingers round the front of the crown, each its own length, and the\n  // beads they throw each their own speed, so the spray fans out.\n  const fing = [];\n  for (let j = 0; j \u003c 9; j++) fing.push([PI * (j + 0.5 + 0.35 * (R() - 0.5)) / 9, 0.6 + 0.65 * R(), 7 + 6 * R(), 4 + 5 * R()]);\n  S.ev.push({ id: (S.idn = (S.idn || 0) + 1), x, r, te: 0, Tf: 1.4 * (1 + 0.5 * S.visc), dyed: false, ga: 0, a: 0, yv: 0, fing });\n  if (S.ev.length > 4) S.ev.shift();\n}\n\n// The phases of one splash, as functions of tau, the seconds since impact on\n// the film's own clock: the cavity opens and shuts by 0.9, the crown stands\n// by 0.35 and falls by 1.1, the jet rises from 0.85 and is gone by 2.35.\nconst TC = 0.9, TCR = 1.1, TJ0 = 0.85, TJ = 1.5, TPINCH = 0.42;\nfunction slowOf(v) {\n  return 1 + 1.3 * v;\n}\n\n// The dye: when the drop goes under, a blob of particles is set in the\n// velocity field of a vortex pair, the cross-section of a vortex ring. The\n// pair moves down at U = G / (4 pi a), slowing as G decays and widening as it\n// slows, and the particles wind into its two curls and trail a stem.\nfunction stepDye(S, dts) {\n  const v = S.visc;\n  for (const e of S.ev) {\n    const tau = (e.te - e.Tf) / slowOf(v);\n    if (tau \u003c 0.08) continue;\n    if (!e.dyed) {\n      e.dyed = true;\n      e.a = 1.7 * e.r;\n      e.yv = Y0 + 2 * e.r;\n      e.ga = 4 * PI * e.a * (13 + 1.4 * e.r) * (1 - 0.55 * v);\n      const n = floor(160 + 40 * e.r);\n      for (let i = 0; i \u003c n; i++) {\n        if (S.np >= MAXP) break;\n        const ang = Math.random() * 2 * PI, rad = sqrt(Math.random()) * 1.9 * e.r;\n        S.px[S.np] = e.x + cos(ang) * rad;\n        S.py[S.np] = Y0 + 1.6 * e.r + sin(ang) * rad * 0.8;\n        S.pa[S.np] = 0;\n        S.pe[S.np] = e.id;\n        S.np++;\n      }\n    }\n    // Viscosity eats the ring: its spin decays over 2.8 s in water, 1.5 s in gel.\n    e.ga *= exp(-dts / (2.8 - 1.3 * v));\n    const U = e.ga / (4 * PI * e.a);\n    e.yv += U * dts;\n    e.a += 0.3 * e.r * dts * (1 - 0.6 * v);\n  }\n  const dye = S.dye;\n  let k = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    let e = null;\n    for (const f of S.ev) if (f.id === S.pe[i]) e = f;\n    let x = S.px[i], y = S.py[i];\n    const age = (S.pa[i] += dts);\n    if (!e || age > 12) continue;\n    // Two Lamb-Oseen cores, opposite spins, the fluid between them going down.\n    let ux = 0, uy = 0;\n    const d2 = (0.85 * e.a) ** 2;\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const dx = x - (e.x + s * e.a), dy = y - e.yv, g = (-s * e.ga) / (2 * PI * (dx * dx + dy * dy + d2));\n      ux += -g * dy;\n      uy += g * dx;\n    }\n    x += (ux + (Math.random() - 0.5) * 7) * dts;\n    y += (uy + (Math.random() - 0.5) * 7) * dts;\n    x = cl(x, 0.5, W - 1.5);\n    y = cl(y, Y0 + 1, H - 1.5);\n    // Each particle leaves colour where it passes, less as it ages, so the\n    // curls show where it went and the old colour spreads out.\n    const w = dts * 1.4 * exp(-age / 5), ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix;\n    dye[o] += w * (1 - fx) * (1 - fy);\n    dye[o + 1] += w * fx * (1 - fy);\n    dye[o + W] += w * (1 - fx) * fy;\n    dye[o + W + 1] += w * fx * fy;\n    S.px[k] = x;\n    S.py[k] = y;\n    S.pa[k] = age;\n    S.pe[k] = S.pe[i];\n    k++;\n  }\n  S.np = k;\n  // Diffusion and a slow fade into the pool: a gel holds the colour longer.\n  const t2 = S.dt2, kap = cl(dts * (1.6 - 1.1 * v), 0, 0.24), fade = exp(-dts / (7 + 5 * v));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, c = dye[i];\n      const l = (x > 0 ? dye[i - 1] : c) + (x \u003c W - 1 ? dye[i + 1] : c) + (y > 0 ? dye[i - W] : c) + (y \u003c H - 1 ? dye[i + W] : c) - 4 * c;\n      t2[i] = (c + kap * l) * fade;\n    }\n  dye.set(t2);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.visc = cl(k[2] || 0, 0, 1);\n  S.size = cl(k[3], 0, 1);\n  const dts = (d * S.speed) / 2;\n  S.T += dts;\n  if (input.btnPressed && input.btnPressed[0]) spawn(S);\n  S.next -= dts;\n  if (S.next \u003c= 0) {\n    spawn(S);\n    S.next += 5.5 * (1 + 0.4 * S.visc);\n  }\n  for (const e of S.ev) e.te += dts;\n  S.ev = S.ev.filter((e) => e.te - e.Tf \u003c 16 * slowOf(S.visc));\n  stepDye(S, dts);\n}\n\n// Shapes for the frame: circles and tapered capsules, each smooth-joined to\n// the pool so a bead touching the surface melts into it.\nfunction build(S) {\n  const C = (S.circ = []), K = (S.caps = []), v = S.visc, rip = S.rip;\n  rip.fill(0);\n  S.cav = [];\n  S.crowns = [];\n  for (const e of S.ev) {\n    const r = e.r, x0 = e.x;\n    if (e.te \u003c e.Tf) {\n      // Falling, faster and faster. The drop hangs from a thread out of the\n      // top; the thread stretches, breaks (later the thicker the essence) and\n      // its lower end balls up into a small bead that trails the drop.\n      const u = e.te / e.Tf, yb = -2 * r - 4 + (Y0 + 2 * r + 4) * (0.3 * u + 0.7 * u * u), cy = yb - r;\n      C.push([x0, cy, r, 1.4, 1]);\n      const tb = 0.45 + 0.42 * v;\n      if (u \u003c tb) K.push([x0, cy - 0.5 * r, x0, -6, 0.42 * r, 0.12 * r * (1 + v), 1.6, 1]);\n      else {\n        const f = (u - tb) / (1 - tb), sy = cy - r - 2 - (6 + 14 * v) * sqrt(f);\n        C.push([x0, sy, 0.32 * r, 1, 1]);\n        K.push([x0, -6, x0, -6 + (cy - 12 + 6) * max(0, 1 - 3 * f), 0.15 * r, 0.12 * r, 1, 1]);\n      }\n      continue;\n    }\n    const tau = (e.te - e.Tf) / slowOf(v);\n    // The drop sinks into the surface instead of vanishing at the touch: in a\n    // gel it takes 0.75 s and a thick neck joins it to the pool.\n    const ts = 0.15 + 0.6 * v;\n    if (tau \u003c ts) C.push([x0, Y0 - r + 2.2 * r * (tau / ts), r * (1 - 0.3 * (tau / ts)), 1.4 + 3 * v, 1]);\n    // Ripples: a packet from the impact and a smaller one when the jet falls,\n    // running out along the surface at 9 LEDs a second, 4 in a gel, about\n    // nine LEDs from crest to crest.\n    for (const [t0, a0] of [[0, 0.9 * (1 - 0.6 * v)], [TJ0 + TJ * 0.8, 0.45 * (1 - 0.7 * v)]]) {\n      const tt = tau - t0;\n      if (tt \u003c= 0) continue;\n      const c = 9 - 5 * v, A = (a0 * r * exp(-tt / 1.8)) / 3.6;\n      for (let x = 0; x \u003c W; x++) {\n        const s = abs(x + 0.5 - x0) - c * tt - 2, en = exp(-(s * s) / 60);\n        if (en > 0.01) rip[x] += A * en * sin(s * 0.7);\n      }\n    }\n    // The cavity: an air pocket pushed down under the surface.\n    if (tau \u003c TC) {\n      const Rc = r * (1.2 + 1.3 * (1 - exp(-tau / 0.18))) * (1 - 0.3 * v), Dc = r * 2.5 * (1 - 0.55 * v) * sin((PI * tau) / TC);\n      if (Dc > 0.3) S.cav.push([x0, Rc, Dc]);\n    }\n    // The crown: two thin walls leaning out, a translucent sheet between\n    // them, and fingers round the rim whose beads fly off at 0.42.\n    const hc = r * 3.1 * max(0, 1 - v / 0.7), R = r * (1.4 + 1.5 * (1 - exp(-min(tau, TCR) / 0.25)));\n    if (hc > 0.2 && tau \u003c TCR) {\n      const Hc = hc * Math.pow(sin((PI * tau) / TCR), 0.6), fl = 0.35 * Hc;\n      if (Hc > 0.5) {\n        for (let s = -1; s \u003c= 1; s += 2) K.push([x0 + s * R, Y0 + 1, x0 + s * (R + fl), Y0 - Hc, 0.75, 0.5, 1.2]);\n        S.crowns.push([x0, R, fl, Hc]);\n        if (tau \u003c 0.42 && v \u003c 0.5) {\n          const g = sm(tau / 0.3) * (1 - v / 0.5);\n          for (const [ph, lk] of e.fing) {\n            const cs = cos(ph), bx = x0 + (R + fl) * cs, lf = lk * 0.55 * hc * g, tx = bx + 0.35 * lf * cs, ty = Y0 - Hc - lf;\n            K.push([bx, Y0 - Hc + 0.5, tx, ty, 0.5, 0.3, 0.9]);\n            C.push([tx, ty, 0.26 * r, 0.9]);\n          }\n        }\n      }\n    }\n    if (tau >= 0.42 && v \u003c 0.5) {\n      // The beads thrown from the fingers fly out and up, then slow and drop back.\n      const t = tau - 0.42, Hp = hc * Math.pow(sin((PI * 0.42) / TCR), 0.6), Rp = r * (1.4 + 1.5 * (1 - exp(-0.42 / 0.25))) + 0.35 * Hp;\n      for (const [ph, lk, vy, vx] of e.fing) {\n        const cs = cos(ph), lf = lk * 0.55 * hc * (1 - v / 0.5);\n        const y = Y0 - Hp - lf - vy * t + 16 * t * t, x = x0 + (Rp + 0.35 * lf) * cs + vx * cs * t;\n        if (y \u003c Y0 + 2) C.push([x, y, 0.26 * r * (1 - v / 0.5), 0.9]);\n      }\n    }\n    // The jet: when the cavity snaps shut a column climbs out of the middle;\n    // in water its tip pinches off into a bead that flies on and falls back.\n    if (tau > TJ0) {\n      const s = (tau - TJ0) / TJ, hj = min(48, r * 8.5) * (1 - 0.8 * v), rb = 0.85 * r * (1 + 0.8 * v), pinch = v \u003c 0.55;\n      if (s \u003c 1) {\n        const Hj = hj * sin(PI * s);\n        const top = Y0 - Hj;\n        K.push([x0, Y0 + 3, x0, top, rb, (0.5 + 0.5 * v) * r, 2.5 + 2.5 * v]);\n        if (!pinch || s \u003c TPINCH) C.push([x0, top - 0.3 * r, (0.7 + 0.3 * v) * r, 1.3 + 2 * v]);\n      }\n      if (pinch && s >= TPINCH) {\n        const t = (s - TPINCH) * TJ, Hp = hj * sin(PI * TPINCH), y = Y0 - Hp - 0.9 * r - 7 * t + 18 * t * t;\n        if (y \u003c Y0 + 2) C.push([x0, y, 0.68 * r, 1.3]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  build(S);\n  const sdf = S.sdf, rip = S.rip, v = S.visc, deep = S.deep;\n  // The liquid's signed distance: negative inside. The pool's surface,\n  // minus the cavities, then every shape joined on smoothly. The falling drop\n  // is the concentrated essence, so where it is the colour is deep.\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i++) sdf[i] = Y0 + rip[x] - (y + 0.5);\n  deep.fill(0);\n  for (const [cx, R, D] of S.cav)\n    for (let y = Y0 - 2; y \u003c min(H, Y0 + D + 3); y++)\n      for (let x = max(0, floor(cx - R - 3)); x \u003c min(W, cx + R + 3); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - Y0) / D, da = (sqrt(dx * dx + dy * dy) - 1) * min(R, D), i = y * W + x;\n        sdf[i] = -smin(-sdf[i], da, 1.5);\n      }\n  for (const [ax, ay, bx, by, ra, rb, k, dp] of S.caps) {\n    const x0 = max(0, floor(min(ax, bx) - ra - k - 1)), x1 = min(W - 1, floor(max(ax, bx) + ra + k + 1));\n    const y0 = max(0, floor(min(ay, by) - ra - k - 1)), y1 = min(H - 1, floor(max(ay, by) + ra + k + 1));\n    const ex = bx - ax, ey = by - ay, ll = ex * ex + ey * ey || 1;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * ex + qy * ey) / ll, 0, 1);\n        const dd = Math.hypot(qx - ex * t, qy - ey * t) - (ra + (rb - ra) * t), i = y * W + x;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  for (const [cx, cy, r, k, dp] of S.circ) {\n    const x0 = max(0, floor(cx - r - k - 1)), x1 = min(W - 1, floor(cx + r + k + 1)), y0 = max(0, floor(cy - r - k - 1)), y1 = min(H - 1, floor(cy + r + k + 1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const i = y * W + x, dd = Math.hypot(x + 0.5 - cx, y + 0.5 - cy) - r;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  // Palette: backdrop, essence, and the deep colour the drop carries. A\n  // thicker essence holds more colour. From rose through orange and gold to\n  // lime, hue -0.12 to 0.35, any of these at half brightness reads brown,\n  // khaki or olive on the LEDs, so there everything is lifted towards cream\n  // and paled: the backdrop to 200 of 255 or more with a shallow vignette, the\n  // pool to about 215, and the deep colour goes brighter than the pool\n  // instead of darker.\n  const pal = S.pal, h = S.hue + 0.52, hf = h - floor(h), key = hf + 7 * v;\n  if (S.palKey !== key) {\n    const hw = hf > 0.5 ? hf - 1 : hf, wm = sm((hw + 0.12) / 0.06) * (1 - sm((hw - 0.28) / 0.07));\n    hsv(h + 0.02, 0.14 - 0.06 * wm, 1, pal, 0);\n    hsv(h + 0.06 * (1 - wm), 0.4 - 0.3 * wm, 1, pal, 10);\n    hsv(h, (0.38 + 0.22 * v) * (1 - 0.5 * wm), 1, pal, 3);\n    hsv(h + 0.015, 0.92 - 0.3 * wm, 1, pal, 6);\n    pal[9] = wm;\n    S.palKey = key;\n  }\n  const wm = pal[9], dv = 0.46 + 0.5 * wm, dye = S.dye, T = S.T;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const below = y + 0.5 - Y0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const d = sdf[i];\n      // The backdrop: a soft key light high in the middle, deepening towards\n      // the surface.\n      const gx = (x + 0.5 - 32) / 32, gy = (y - 14) / 46;\n      const gl = exp(-(gx * gx + gy * gy)), bv = min(1, 0.4 + 0.46 * gl + wm * (0.36 - 0.26 * gl));\n      let r = (pal[10] + (pal[0] - pal[10]) * gl) * bv, g = (pal[11] + (pal[1] - pal[11]) * gl) * bv, b = (pal[12] + (pal[2] - pal[12]) * gl) * bv;\n      // The crown's sheet: thin film between its walls, brighter at the two\n      // sides where the eye looks along it, and along the lip.\n      for (const [cx, R, fl, Hc] of S.crowns) {\n        const hgt = -below;\n        if (hgt \u003c -0.5 || hgt > Hc) continue;\n        const Rh = R + (fl * hgt) / Hc, u = abs(x + 0.5 - cx) / Rh;\n        if (u >= 1) continue;\n        const a = 0.16 + 0.3 * min(1, 1 / sqrt(1 - u * u) - 1) + 0.4 * exp(-((hgt - Hc + 0.6) ** 2));\n        r += (pal[3] * 0.92 - r) * a;\n        g += (pal[4] * 0.92 - g) * a;\n        b += (pal[5] * 0.92 - b) * a;\n      }\n      // The open surface, seen edge on: a gloss line along it, glinting white\n      // where a ripple tilts it towards the light. It is drawn across the\n      // boundary, so it does not flicker as the surface moves by a fraction.\n      const pd = Y0 + rip[x] - (y + 0.5), open = abs(d - pd) \u003c 0.02;\n      let spec = 0;\n      if (open && abs(pd) \u003c 2.5) {\n        const sl = ((x \u003c W - 1 ? rip[x + 1] : rip[x]) - (x > 0 ? rip[x - 1] : rip[x])) / 2, nd = (sl * LX - LY) / sqrt(1 + sl * sl);\n        spec = exp(-((pd + 0.3) ** 2) / 0.45) * (0.16 + 0.85 * Math.pow(max(0, nd), 12));\n      }\n      if (d \u003c 0.5) {\n        const cov = cl(0.5 - d, 0, 1);\n        // Inside the liquid: the essence, brighter just under the surface and\n        // deeper towards the bottom, slow shafts of light from the surface\n        // swaying through it, and the deep colour where the drop has gone.\n        const depth = cl(below / (H - Y0), 0, 1);\n        let lv = below \u003c 0 ? 0.88 + 0.09 * wm : 0.8 - 0.36 * depth + wm * (0.15 + 0.16 * depth);\n        if (below >= 0) {\n          const sx = x + 0.4 * below;\n          lv += 0.16 * (1 - depth) * (0.5 + 0.5 * sin(0.3 * sx - 0.7 * T + 1.3 * sin(0.11 * sx + 0.23 * T)));\n        }\n        lv = min(1, lv);\n        let lr = pal[3] * lv, lg = pal[4] * lv, lb = pal[5] * lv;\n        const da = max(deep[i] * 0.9, 1 - exp(-dye[i] * 0.9));\n        if (da > 0.003) {\n          lr += (pal[6] * dv - lr) * da;\n          lg += (pal[7] * dv - lg) * da;\n          lb += (pal[8] * dv - lb) * da;\n        }\n        let rim = 0, inner = 0;\n        if (!open) {\n          // Everything but the open surface: the normal from the distance\n          // field, a white highlight where it faces the light, a gloss on what\n          // faces up, a darker rim on the far side and light gathered inside\n          // the bottom of a bead.\n          const xm = x > 0 ? sdf[i - 1] : d, xp = x \u003c W - 1 ? sdf[i + 1] : d, ym = y > 0 ? sdf[i - W] : d, yp = y \u003c H - 1 ? sdf[i + W] : d;\n          let nx = xp - xm, ny = yp - ym;\n          const nl = Math.hypot(nx, ny) || 1;\n          nx /= nl;\n          ny /= nl;\n          const edge = cl(1 + d / 1.6, 0, 1), nd = nx * LX + ny * LY;\n          spec += edge * (0.9 * Math.pow(max(0, nd), 7) + 0.22 * max(0, -ny));\n          rim = edge * 0.35 * (1 - max(0, nd));\n          inner = cl((-d - 0.6) / 1.2, 0, 1) * cl((3 + d) / 1.5, 0, 1) * Math.pow(max(0, -nd), 2) * (below \u003c 1 ? 0.6 : 0);\n        }\n        lr = lr * (1 - rim) + inner * pal[3];\n        lg = lg * (1 - rim) + inner * pal[4];\n        lb = lb * (1 - rim) + inner * pal[5];\n        r += (lr - r) * cov;\n        g += (lg - g) * cov;\n        b += (lb - b) * cov;\n      }\n      r += spec;\n      g += spec;\n      b += spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker."},{"name":"Speed","min":0.2,"max":3,"about":"How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower."},{"name":"Viscosity","min":0,"max":1,"about":"Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume."},{"name":"Size","min":0,"max":1,"about":"The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs."}],"start":[0,2,0,0.06],"measures":{"motion":0.0508,"detail":0.0106,"edges":0.2549,"complexity":1.4637,"coverage":1,"colour":0.1457,"drift":0.0297},"knobResponse":[0.2403,0.0329,0.0375,0.0322]},{"slug":"euclid-pulse","title":"Euclid Pulse","family":"rhythm","round":1,"note":"유클리드 리듬 셋이 고리 셋에서 함께 돌아요. 바깥 두 고리의 박은 고리 밖 제 조각을 따라 빛으로 퍼져서 세운 패널의 위아래 끝까지 닿아요. 처음은 E(3,8) 이에요.","idea":"Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.","buttons":"K3 tap turns the outer rhythm one step later.","code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","layer":{"id":"layer-euclid-pulse","type":"code","name":"euclid-pulse","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three rings around the colour wheel together."},{"name":"Tempo","min":80,"max":180,"about":"Beats per minute; the hand goes round once every four beats."},{"name":"Pulses","min":3,"max":13,"about":"Hits on the outer ring; the middle ring takes about half as many."},{"name":"Steps","min":8,"max":16,"about":"Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams."}],"start":[0,80,3,8],"measures":{"motion":0.5845,"detail":0.0325,"edges":0.366,"complexity":0.4817,"coverage":0.4069,"colour":0.1498,"drift":0.1272},"knobResponse":[0.0702,0.0945,0.0699,0.0495]},{"slug":"excavation","title":"Excavation","family":"construction","round":25,"note":"도심 빌딩 사이의 깊은 터파기를 세로로 잘라 봐요. 굴착기가 바닥에 쌓은 흙을 갠트리의 클램셸이 100줄 위 덤프트럭까지 끌어올리고, 바닥이 한 단 깊어지면 흙막이 벽 사이에 강철 버팀보가 한 단 더 용접돼 걸려요. K1 을 돌리면 데크 틈으로 떨어지던 햇빛 기둥이 기울다가 밤의 나트륨등으로 바뀌고, 누르면 경고등 뒤에 발파가 일어나 바닥에 먼지가 차요.","idea":"A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.","buttons":"K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.","code":"// ===== Patternflow pattern =====\n// Title:   Excavation\n// Family:  construction\n// Idea:    A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the strutted basement excavations dug between city buildings\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1\n//\n// Knob 1: Hour. Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit.\n// Knob 2: Speed. At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too.\n// Knob 3: Depth. How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot.\n// Knob 4: Water. Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades.\n// Buttons: K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, acos, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street, the pit's inside, the opening's edge, the heap, the truck bed, the last stage.\nconst [GL, PL, PR, OR, HX, TT, FIN] = [20, 10, 53, 33, 21, 43, 11];\nconst strutY = (k) => 18 + 9 * k, floorY = (k) => 23 + 9 * k;\nconst KP = [29, 41], EXP = [37, 41, 44, 41];\n// Fill, clay, sand and gravel, weathered rock, rock, and the rows they end at.\nconst STRATA = [[96, 84, 78], [186, 106, 58], [206, 186, 142], [154, 138, 94], [118, 126, 146]];\nconst BOT = [27, 45, 64, 101, 999];\nconst layer = (x, y) => {\n  let i = 0;\n  while (i \u003c 4 && y >= BOT[i] + 5 * (vn(x * 0.09, i * 5.3) - 0.5)) i++;\n  return i;\n};\n// Noon, afternoon, dusk, night: sky top, horizon, sun, ambient, buildings.\nconst KEYS = [\n  [50, 116, 222, 168, 206, 240, 1, 0.95, 0.84, 0.92, 0.95, 1, 150, 158, 176],\n  [56, 100, 196, 232, 200, 160, 1, 0.82, 0.56, 0.8, 0.75, 0.72, 140, 128, 132],\n  [34, 32, 90, 236, 110, 70, 0.9, 0.5, 0.26, 0.5, 0.42, 0.5, 80, 66, 90],\n  [5, 7, 26, 22, 26, 60, 0, 0, 0, 0.13, 0.14, 0.22, 30, 32, 48],\n];\nconst WIN = [255, 196, 120], CAP = [176, 172, 166], DECK = [124, 118, 110], ROAD = [74, 74, 80], RAIN = [190, 210, 240], FLOOD = [1, 0.97, 0.9];\nconst WALLS = [[8, [120, 86, 54]], [9, [96, 104, 118]], [54, [96, 104, 118]], [55, [120, 86, 54]]];\nconst YEL = [250, 178, 26], GAN = [244, 204, 50], GRAB = [246, 142, 30], STEEL = [150, 160, 178], HOSE = [50, 80, 170];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F32(N * 3), lm: F32(N * 3), so: F32(N * 3), bw: F32(N * 3), sn: F32(N * 3), st: F32(N), shf: F32(N), sh: F32(200), rs: F32(H), srf: F32(W), dig: F32(W),\n    t: 0, rt: 0, nk: -1, cx: 42, du: [], pa: [], sl: -1, bl: -1, dust: 0.3, arc: 0, tx: 0, tv: 0, tph: 0, load: 2, tgo: 0,\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, L = layer(x, y), hh = hash(x, y), pd = hypot(x - 3, y - 24.5), px = (x - PL) % 7;\n    // The ground in section, each layer with its grain; a water main and ducts.\n    let k = 0.86 + 0.22 * hh, c = STRATA[L];\n    if (L === 0 && hh > 0.88) c = [150, 146, 140];\n    else if (L === 1) k = 0.9 + 0.14 * vn(x * 0.4, y * 0.7);\n    else if (L === 2 && hash(x >> 1, y >> 1) \u003c 0.2) c = [136, 132, 128];\n    else if (L === 3 && abs(vn(x * 0.3, y * 0.3) - 0.5) \u003c 0.04) k = 0.55;\n    else if (L === 4 && (x + y * 0.7 + 5 * vn(x * 0.2, y * 0.1)) % 13 \u003c 0.9) k = 0.6;\n    if (pd \u003c 2.2) (c = pd > 1.2 ? [96, 120, 150] : [26, 30, 36]), (k = 1);\n    if (x > 57 && x \u003c 63 && (y === 23 || y === 24) && x & 1) (c = [230, 120, 40]), (k = 1);\n    // The far wall: H-piles and lagging, shotcrete and rock bolts lower down.\n    const q = 0.8 + 0.35 * hash(floor((y - GL) / 3), floor((x - PL) / 7)), r = 0.84 + 0.22 * vn(x * 0.3, y * 0.3);\n    const b = y \u003c GL + 2 ? CAP : !px ? [86, 92, 104] : y > 65 ? (px === 3 && y % 8 === 4 ? [60, 60, 66] : [136 * r, 132 * r, 126 * r]) : (y - GL) % 3 > 1 ? [44, 34, 28] : [132 * q, 94 * q, 60 * q];\n    for (let j = 0; j \u003c 3; j++) (P.so[o + j] = c[j] * k), (P.bw[o + j] = b[j]);\n    P.st[i] = sm(0.42, 0.72, vn(x * 0.8, y * 0.06));\n  }\n  skyline(P);\n}\n\nfunction skyline(P) {\n  P.bd = [];\n  for (let x = 0, w, s; x \u003c W; x += w) (s = !x || x > 50), (w = !x ? 8 : s ? W - x : min(4 + floor(rnd() * 5), 56 - x)), P.bd.push([x, x + w - 1, s ? floor(rnd() * 3) : 6 + floor(rnd() * 8), rnd(), s]);\n}\n\n// A new lot, dug to stage k, with the grab already on its way down.\nfunction lot(P, k) {\n  Object.assign(P, { k, fy: floorY(k) + 2.5, hv: 64, wx: -1, mat: -1, ex: 41, ei: 1, sc: 1, ec: 0, full: 0, E: { p: [7, -9, 0] }, C: { p: [HX, 30, 1] } });\n  P.dig.fill(0);\n  go(P.E, 0, 0.7, [12, -3, 0]), go(P.C, 1, (P.fy - 43) / 46, [HX, P.fy - 13, 1]);\n}\n// A move eases a pose to b; the step functions chain moves.\nconst go = (m, ph, dur, b) => Object.assign(m, { ph, t: 0, dur: max(0.15, dur), a: m.p.slice(), b });\nfunction tick(m, d) {\n  const u = sm(0, 1, (m.t += d) / m.dur);\n  for (let i = 0; i \u003c 3; i++) m.p[i] = mix(m.a[i], m.b[i], u);\n  return u;\n}\nconst heapH = (P) => min(13, sqrt(1.1 * P.hv));\nconst heapTop = (P) => P.fy - heapH(P);\nconst matCol = (P) => STRATA[layer(30, P.fy + 2)];\nfunction puff(P, x, y, n, a, s = 1) {\n  for (let i = 0; i \u003c n; i++) P.du.push([x + (rnd() - 0.5) * 6 * s, y - rnd() * 2 * s, (1.5 + rnd() * 2) * s, a, (rnd() - 0.5) * 3 * s, -(2 + rnd() * 3) * s]);\n  P.dust = min(1, P.dust + 0.05 * n * a);\n}\n\n// Excavator: dig, lift, swing, drop it on the heap, swing back.\nfunction eStep(P, E) {\n  const ph = E.ph, up = [7, -9, 0];\n  if (ph === 0) go(E, 1, 1, [8, 1.5, 0]);\n  else if (ph === 1) {\n    const bx = round(P.ex + 8);\n    for (let i = -3; i \u003c= 3; i++) if (bx + i \u003c= PR) P.dig[bx + i] = max(P.dig[bx + i], 2.2 * cos(i * 0.39));\n    (P.fy += 32 / 44), (P.ec = 1), puff(P, bx, P.fy, 1, 0.3);\n    if (P.fy >= floorY(P.k + 1)) (P.fy = floorY(++P.k)), P.k \u003c FIN ? (P.wx = PL) : (P.mat = 0);\n    go(E, 2, 0.6, up);\n  } else if (ph === 2) go(E, 3, 1, [7, -9, PI]);\n  else if (ph === 3) go(E, 4, 0.6, [cl(P.ex - HX - 3, 6, 15), -heapH(P) * 0.7 - 3, PI]);\n  else if (ph === 4) (P.hv += 32), (P.ec = 0), puff(P, P.ex - E.p[0], heapTop(P), 2, 0.3), go(E, 5, 1.1, up);\n  else if (P.wx >= 0 || P.k >= FIN || P.hv > 150) go(E, 7, 0.5, up);\n  else if (ph === 5 && ++P.sc % 3 === 0) (P.ex0 = P.ex), (P.exT = EXP[(P.ei = (P.ei + 1) % 4)]), go(E, 6, 1.4, up);\n  else go(E, 0, 0.7, [12, -3, 0]);\n}\n\n// Grab: down open, close, haul up, over the truck, open.\nfunction cStep(P, C) {\n  const ph = C.ph, top = heapTop(P), up = [HX, 7, 0];\n  if (ph === 0) P.hv > 14 ? go(C, 1, 0.3 + (top - 12 - C.p[1]) / 46, [HX, top - 5, 1]) : go(C, 0, 0.3, up);\n  else if (ph === 1) go(C, 2, 0.7, [HX, top - 4, 0]);\n  else if (ph === 2) {\n    const g = min(P.hv, 60);\n    (P.hv -= g), (P.full = g > 4), puff(P, HX, top, 2, 0.3), go(C, 3, 0.4 + (C.p[1] - 7) / 36, up);\n  } else if (ph \u003c 5) P.tph === 0 && P.load \u003c 3 ? go(C, 5, 1.2, [TT, 7, 0]) : go(C, 4, 0.3, up);\n  else if (ph === 5) {\n    if (P.full) {\n      (P.load++), (P.full = 0), puff(P, TT, 11, 3, 0.5), P.load > 2 && (P.tgo = 0.6);\n      for (let i = 0; i \u003c 10; i++) P.pa.push([TT + (rnd() - 0.5) * 6, 13, 0, 4, 0.3, 2]);\n    }\n    go(C, 6, 0.6, [TT, 7, 1]);\n  } else go(C, ph === 6 ? 7 : 0, ph === 6 ? 1.1 : 0.2, up);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nk = round(cl(k[2], 8, 10)), h = (P.h = cl(k[0], 0, 1)), wt = (P.wt = cl(k[3], 0, 1));\n  if (nk !== P.nk) lot(P, (P.nk = nk));\n  (P.t += d), (P.rt += rd), (P.cx += 3.6 * d);\n  Object.assign(P, { dayF: 1 - sm(0.55, 0.92, h), sunI: (1 - sm(0.6, 0.85, h)) * (1 - 0.9 * sm(0.3, 0.85, wt)), slope: 0.12 + 0.95 * sm(0, 0.8, h), lampK: sm(0.45, 0.8, h) });\n  // K1 tap: the warning lamp, then the blast at the face.\n  if (input.btnPressed && input.btnPressed[0] && P.bl \u003c 0) P.bl = 0;\n  if (P.bl >= 0 && (P.bl += rd) >= 0.8 && !P.fired) {\n    P.fired = 1;\n    for (let i = 0; i \u003c 26; i++) P.pa.push([40 + (rnd() - 0.5) * 10, P.fy - 1, (rnd() - 0.5) * 30, -10 - rnd() * 22, 1.6, 2]);\n    for (let i = PL; i \u003c= PR; i++) P.dig[i] += 1.4 * exp(-(((i - 40) / 9) ** 2));\n    puff(P, 40, P.fy, 9, 1.2, 2), (P.fy += 0.8), (P.hv += 30), (P.dust = 1);\n  }\n  if (P.bl > 1.5) (P.bl = -1), (P.fired = 0);\n  const { E, C } = P, u = tick(E, d);\n  if (E.ph === 6) {\n    const nx = mix(P.ex0, P.exT, u);\n    (P.trk += nx - P.ex), (P.ex = nx);\n  }\n  if (u >= 1) eStep(P, E);\n  if (tick(C, d) >= 1) cStep(P, C);\n  if (P.full && C.ph === 3 && rnd() \u003c 4 * d) P.pa.push([C.p[0] + (rnd() - 0.5) * 5, C.p[1] + 7, 0, 2, 2, 2]);\n  // A truck leaves with three grabs and an empty one backs in.\n  if (P.tph === 0 && P.load > 2 && (P.tgo -= d) \u003c= 0) (P.tph = 1), (P.tv = 0);\n  if (P.tph === 1 && (P.tx += (P.tv = min(18, P.tv + 10 * d)) * d) > 30) (P.tph = 2), (P.load = 0);\n  if (P.tph === 2 && (P.tx -= (1.5 + 0.8 * P.tx) * d) \u003c= 0) (P.tx = 0), (P.tph = 0);\n  // The new strut is welded in from wall to wall.\n  if (P.wx >= 0) {\n    P.arc = rnd() \u003c 0.85 ? 0.5 + 0.5 * rnd() : 0;\n    if (rnd() \u003c 14 * d) P.pa.push([P.wx, strutY(P.k) + 2, (rnd() - 0.5) * 10, -2 - rnd() * 4, 0.6 + rnd() * 0.5, 0]);\n    if ((P.wx += 7 * d) > PR + 1) (P.wx = -1), (P.arc = 0);\n  }\n  // At the bottom: the blinding concrete, then on to the next lot.\n  if (P.k >= FIN && P.hv \u003c 15 && (P.mat += d / 6) > 1.4 && P.sl \u003c 0) (P.snap = 1), (P.sl = 0), lot(P, P.nk), skyline(P);\n  if (P.sl >= 0 && (P.sl += rd / 2.2) >= 1) P.sl = -1;\n  // Seepage drips below the water table.\n  const wtY = 78 - 34 * wt, e = exp(-0.25 * d);\n  if (P.fy > wtY + 6 && rnd() \u003c 6 * wt * d) P.pa.push([PL + 1 + rnd() * 42, wtY + rnd() * (P.fy - wtY - 5), 0, 0, 3, 1]);\n  for (let i = PL; i \u003c= PR; i++) P.dig[i] *= e;\n  P.dust = max(0.1, P.dust * e);\n  P.du = P.du.filter((p) => ((p[0] += p[4] * d), (p[1] += p[5] * d), (p[2] += 2.2 * d), (p[3] -= 0.22 * d) > 0));\n  P.pa = P.pa.filter((p) => ((p[3] += 40 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), (p[4] -= d) > 0 && p[1] \u003c (p[0] >= PL && p[0] \u003c= PR ? P.fy : H)));\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.3 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\nconst cloudA = (P, x, y) => cl((0.6 * vn((x + P.cx) * 0.07, y * 0.18) + 0.4 * vn((x + P.cx) * 0.19, y * 0.4 + 5) - 0.6 + 0.3 * P.wt) * 5, 0, 1);\n\nfunction lamp(x0, y0, r2, k, c) {\n  const R = Math.ceil(sqrt(r2 * 4.6)), gx = [];\n  for (let x = max(0, x0 - R); x \u003c= min(W - 1, x0 + R); x++) gx.push(x, k * exp(-((x - x0) ** 2) / r2));\n  for (let y = max(0, y0 - R); y \u003c= min(H - 1, y0 + R); y++)\n    for (let i = 0, g = exp(-((y - y0) ** 2) / r2); i \u003c gx.length; i += 2) for (let j = 0, o = (y * W + gx[i]) * 3; j \u003c 3; j++) LM[o + j] += c[j] * gx[i + 1] * g;\n}\n\n// Daylight with cloud shadows, the shaft of sun, the lamps.\nfunction light(P, K) {\n  const { sunI: sI, slope: s, rs, sh, shf, k: pk, lampK: nl } = P, ks = min(pk, FIN - 1);\n  for (let i = 0; i \u003c 200; i++) sh[i] = 1 - 0.85 * cloudA(P, i - 96, 7);\n  rs.fill(1);\n  for (let j = 1, y; j \u003c= ks; j++) (y = strutY(j)), (rs[y + 2] = rs[y + 4] = 0.6), (rs[y + 3] = 0.4);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, x0 = x - s * (y - GL), out = y \u003c GL + 2;\n    const a = out ? 1 : (0.62 - 0.003 * (y - GL)) * (x > OR ? 0.75 : 1);\n    const l = out ? 0.5 * sI * sh[x + 80] : sI > 0 && x0 > PL - 1.5 && x0 \u003c OR + 1.5 ? sI * sm(PL - 1.5, PL + 1, x0) * (1 - sm(OR - 1, OR + 1.5, x0)) * sh[floor(x0) + 80] * rs[y] * (1 - 0.0025 * (y - GL)) : 0;\n    shf[i] = out ? 0 : l;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[9 + c] * a + K[6 + c] * l * 0.95;\n  }\n  // Floods on the lowest strut; sodium lamps after dark.\n  lamp(17, strutY(ks) + 2, 260, 0.7, FLOOD), lamp(47, strutY(ks) + 2, 260, 0.7, FLOOD);\n  if (nl > 0) for (let j = 1; j \u003c= ks; j++) lamp(j & 1 ? 12 : 51, strutY(j) + 2, 60, 1.3 * nl, [1, 0.62, 0.24]);\n  if (P.arc > 0) lamp(round(P.wx), strutY(pk) + 1, 70, 1.4 * P.arc, [0.7, 0.85, 1]);\n  if (P.bl > 0.8) lamp(40, round(P.fy) - 3, 260, 1.8 * (1 - sm(0.8, 1.2, P.bl)), [1, 0.8, 0.5]);\n  const tx = P.C.p[0];\n  if (nl > 0)\n    for (let y = 8; y \u003c min(H, P.fy + 2); y++)\n      for (let hw = 1.5 + 0.16 * (y - 7), x = max(0, floor(tx - hw)); x \u003c= min(W - 1, tx + hw); x++)\n        for (let c = 0, e = ((0.9 * nl) / (1 + (y - 7) / 70)) * (1 - abs(x - tx) / hw); c \u003c 3; c++) LM[(y * W + x) * 3 + c] += e * (c > 1 ? 0.92 : 1);\n}\n\nfunction sky(P, K) {\n  const ov = 0.75 * sm(0.2, 1, P.wt), day = P.dayF, dk = 0.3 + 0.7 * day, cc = [0, 1, 2].map((c) => mix(mix(K[3 + c], 255, 0.55) * dk, 130 * dk, ov));\n  for (let i = 0; i \u003c GL * W; i++) {\n    const x = i & 63, y = i >> 6, u = y / (GL - 1), a = cloudA(P, x, y) * (0.9 - 0.4 * u);\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = mix(mix(mix(K[c], K[3 + c], u * u), 120 * (0.25 + 0.75 * day), ov), cc[c], a);\n  }\n  // The street's buildings, the two beside the pit tall.\n  for (const [x0, x1, top, v, side] of P.bd)\n    for (let y = top; y \u003c GL; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const win = (x - x0) % 3 === 1 && (y - top) % 3 === 1 && x \u003c x1, lit = hash(x * 7, y + floor(v * 99)) \u003c 0.45 && day \u003c 0.7;\n        for (let c = 0, b; c \u003c 3; c++) (b = K[12 + c] * (0.78 + 0.3 * v) * (x === x0 ? 0.8 : 1)), (b = win ? (lit ? WIN[c] * (1 - day) : b * 0.55 + 18 * c * day) : b), (F[(y * W + x) * 3 + c] = side ? b : mix(b, K[3 + c], 0.3));\n      }\n}\n\nfunction ground(P) {\n  const { so, bw, srf, wt, st, fy } = P, wtY = 78 - 34 * wt, sec = 0.42 + 0.52 * P.dayF, mc = matCol(P), hh = heapH(P), kc = STEEL.map((v) => v * 0.5 * sec);\n  for (let x = PL; x \u003c= PR; x++) srf[x] = fy + P.dig[x] + 0.6 * (hash(x, 7) - 0.5);\n  for (let i = GL * W; i \u003c N; i++) {\n    // Pavement, deck and caps; far wall and heap; the ground in section.\n    const x = i & 63, y = i >> 6, o = i * 3, pit = x >= PL && x \u003c= PR;\n    let A = so, a = o, L = 0, k = sec;\n    if (y \u003c GL + 2 && !(pit && x \u003c= OR)) (A = (x > 6 && x \u003c PL) || (x > PR && x \u003c 57) ? CAP : x > OR && x \u003c 56 ? DECK : ROAD), (a = 0), (L = 1), (k = y === GL ? 1.18 : A === DECK && (x + y) & 1 ? 0.86 : 1);\n    else if (pit && y \u003c srf[x]) (L = 1), y >= srf[x] - max(0, hh - abs(x - HX) * 1.1) ? ((A = mc), (a = 0), (k = 0.85 + 0.3 * hash(x, y))) : ((A = bw), (k = y > wtY ? 1 - 0.5 * wt * st[i] : 1));\n    else if (pit && y \u003c srf[x] + 1) (L = 1), (k = 1.15);\n    else if (!pit && y > wtY + 4) k *= 1 - 0.12 * wt;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = A[a + c] * k * (L ? LM[o + c] : 1);\n  }\n  // Walls and king posts down to their toes; the deck's beams.\n  for (let y = GL + 2; y \u003c 126; y++) {\n    for (const [x, c] of WALLS) for (let i = 0; i \u003c 3; i++) F[(y * W + x) * 3 + i] = c[i] * sec;\n    for (const x of KP) for (let i = 0; i \u003c 2; i++) y \u003c srf[x] ? sur(x + i, y, ...STEEL, 0.62 + 0.23 * i) : put(x + i, y, kc);\n  }\n  for (let x = OR + 1; x \u003c= PR; x++) sur(x, GL + 2, 70, 74, 84), sur(x, GL + 3, 90, 94, 104, x % 6 ? 0.7 : 1.2);\n  // Struts with wales and jacks.\n  for (let j = 1; j \u003c= min(P.k, FIN - 1); j++) {\n    const y = strutY(j), end = j === P.k && P.wx >= 0 ? P.wx : PR;\n    for (let x = PL; x \u003c= end; x++) sur(x, y, ...STEEL, x % 11 === 3 ? 0.8 : 1.25), sur(x, y + 1, ...STEEL, 0.75);\n    for (let i = -1; i \u003c= 2; i++) {\n      for (const x of [PL, PL + 1, PR - 1, PR]) sur(x, y + i, 80, 84, 96);\n      if (end >= PR) for (let x = 46; x \u003c= 48; x++) surc(x, y + i, YEL, i \u003c 0 || i > 1 ? 0.7 : 1);\n    }\n  }\n  // Blinding concrete on the last floor.\n  const me = PL + min(1, P.mat) * (P.ex - PL - 8);\n  if (P.mat > 0) for (let x = PL; x \u003c= me; x++) for (let j = 0, o; j \u003c 3; j++) (o = at(x, srf[x] - j)), put(x, srf[x] - j, [0, 1, 2].map((c) => 200 * max(0.55, LM[o + c]) * (j ? 0.9 : 1.1)));\n  if (P.mat > 0 && P.mat \u003c 1) line(30, GL + 1, me, fy - 3, [96, 96, 104]);\n  // The pump's pool, and its hose up the wall to the tank.\n  for (let x = 45; x \u003c= PR; x++)\n    for (let y = round(fy - 0.4 - 2.6 * wt), g; y \u003c srf[x]; y++) (g = 0.5 + 0.5 * sin(x * 1.3 + P.t * 5 + y * 2)), sur(x, y, 60 + 60 * g, 96 + 60 * g, 132 + 50 * g);\n  for (let j = 1; j \u003c= 2; j++) sur(51, fy - j, ...HOSE), sur(52, fy - j, ...HOSE);\n  for (let y = fy - 2; y > GL - 2; y--) surc(PR, y, HOSE);\n  for (let x = PR; x \u003c 60; x++) surc(x, GL - 2, HOSE);\n  for (let x = 59; x \u003c= 62; x++) for (let y = 16; y \u003c GL; y++) sur(x, y, 120, 140, 160, y === 16 ? 1.2 : 0.8);\n  if (wt > 0.03) for (let j = 0; j \u003c 2; j++) put(59 + j, GL - 2 + j, RAIN, min(1, wt * 6) * (0.5 + 0.5 * sin(P.t * 20 + j)));\n}\n\nfunction excavator(P) {\n  const ex = P.ex, gy = round(P.fy), [bu, bv, ph] = P.E.p, f = cos(ph), X = (u) => ex + u * f, hw = 4.5 * abs(f) + 3.2 * abs(sin(ph)), nl = P.lampK;\n  for (let i = -6; i \u003c= 6; i++) for (let j = 1; j \u003c= 3; j++) (abs(i) \u003c 6 || j === 2) && sur(ex + i, gy - j, ...(j !== 2 && (i + floor(P.trk)) & 1 ? [92, 92, 96] : [46, 46, 50]));\n  for (let i = -3; i \u003c= 3; i++) sur(ex + i, gy - 4, 52, 50, 48);\n  for (let j = 5; j \u003c= 7; j++) for (let x = round(ex - hw); x \u003c= round(ex + hw); x++) surc(x, gy - j, YEL, j === 5 ? 0.7 : (x - ex) * f \u003c -2.5 ? 0.82 : 1);\n  const ca = round(min(X(0.5), X(3.5))), cb = max(ca + 1, round(max(X(0.5), X(3.5))));\n  for (let j = 8; j \u003c= 11; j++) for (let x = ca; x \u003c= cb; x++) j === 11 || x === (f >= 0 ? ca : cb) ? surc(x, gy - j, YEL) : (sur(x, gy - j, 110, 150, 180, 0.9), add(x, gy - j, WIN, 0.5 * nl));\n  // Boom and arm reach the bucket by two-link IK.\n  const [pu, pv, L1, L2] = [3, -6, 9, 8.5];\n  let tu = bu - pu, tv = bv - pv;\n  const dd = hypot(tu, tv) || 1, dc = cl(dd, 2, L1 + L2 - 0.05);\n  (tu *= dc / dd), (tv *= dc / dd);\n  const t1 = atan2(tv, tu) - acos(cl((L1 * L1 + dc * dc - L2 * L2) / (2 * L1 * dc), -1, 1)), eu = pu + L1 * cos(t1), ev = pv + L1 * sin(t1), bx = X(pu + tu), by = gy + pv + tv;\n  line(X(pu), gy + pv, X(eu), gy + ev, YEL), line(X(pu), gy + pv + 1, X(eu), gy + ev + 1, YEL, 0.75);\n  line(X(4), gy - 5, X(pu + (eu - pu) * 0.55), gy + pv + (ev - pv) * 0.55 + 1, [150, 150, 156]);\n  line(X(eu), gy + ev, bx, by, YEL, 0.9);\n  for (let i = 0; i \u003c= 2; i++) sur(bx - i * f, by, 74, 74, 80), sur(bx - i * f, by + 1, 74, 74, 80, 0.8), P.ec && surc(bx - i * f, by - 1, matCol(P), 1.1);\n  add(X(4.5), gy - 9, FLOOD, 255 * nl);\n}\n\n// A worker in hi-vis, feet on row y; a headlamp after dusk.\nfunction man(P, x, y, arm) {\n  sur(x, y, 40, 48, 90), sur(x, y - 1, 255, 128, 20), sur(x, y - 2, 255, 255, 240), arm && sur(x + 1, y - 2 - (arm > 0.5), 255, 128, 20);\n  add(x, y - 2, FLOOD, 200 * P.lampK);\n}\n\nfunction grab(P) {\n  const [tx, by, op] = P.C.p, X = round(tx), Y = round(by), HW = [3, 3.4, 3.4, 3, 2];\n  for (let y = 7; y \u003c Y; y++) sur(X - 1, y, 200, 200, 210), sur(X + 1, y, 200, 200, 210);\n  for (let i = -1; i \u003c= 1; i++) surc(X + i, Y, GAN, 1.2), surc(X + i, Y + 1, GAN, 0.85);\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = -6, a; i \u003c= 6; i++) (a = abs(i)) >= op * (0.4 + 0.9 * j) - 0.01 && a \u003c= HW[j] + op * 0.9 * j && (j === 4 || (op \u003c 0.3 && !i) ? sur(X + i, Y + 2 + j, 96, 100, 110) : surc(X + i, Y + 2 + j, GRAB, j ? 1 : 1.2));\n  if (P.full && op \u003c 0.5) for (let i = -2; i \u003c= 2; i++) surc(X + i, Y + 2, matCol(P), 1.2);\n  for (let i = -3; i \u003c= 3; i++) sur(X + i, 5, 70, 74, 84), surc(X + i, 6, GAN, abs(i) \u003c 2 ? 0.6 : 1);\n}\n\nfunction gantry(P) {\n  for (let y = 2; y \u003c GL; y++) for (const x of [4, 58]) surc(x, y, GAN), (y + (x >> 2)) % 3 && surc(x + 1, y, GAN, 0.7);\n  for (let x = 3; x \u003c= 60; x++) surc(x, 2, GAN, 1.1), surc(x, 4, GAN), (x + 1) % 3 || surc(x, 3, GAN, 0.8);\n  put(32, 1, P.rt % 1.4 \u003c 0.7 ? [255, 40, 30] : [90, 16, 14]);\n  // The railing, and the signalman at the edge.\n  for (let x = 8; x \u003c= OR; x++) sur(x, 17, ...((x >> 1) & 1 ? [230, 60, 50] : [236, 236, 236])), x % 6 === 2 && (sur(x, 18, 200, 200, 200), sur(x, 19, 200, 200, 200));\n  man(P, 35, GL - 1, P.C.ph \u003c 3 ? (P.rt * 2) % 1 : 0);\n}\n\nfunction truck(P) {\n  const o = round(P.tx), mc = matCol(P), hL = [0, 1.6, 2.7, 3.7][min(3, P.load)];\n  if (o > 30) return;\n  for (let x = 37; x \u003c= 50; x++)\n    for (let y = 9; y \u003c= 16; y++)\n      y > 12 ? sur(x + o, y, 196, 56, 44, y === 13 ? 1.25 : (x - 37) % 4 ? 1 : 0.75) : y > 12 - hL * (1 - ((x - 43.5) / 7) ** 2) && surc(x + o, y, mc, 0.85 + 0.3 * hash(x, y));\n  for (let x = 51; x \u003c= 56; x++) for (let y = 10; y \u003c= 16; y++) (y > 10 || x > 51) && (y \u003c 14 && y > 10 && x > 52 ? sur(x + o, y, 60, 90, 120) : sur(x + o, y, 50, 96, 200));\n  for (let x = 37; x \u003c= 56; x++) sur(x + o, 17, 50, 50, 54);\n  for (const x of [39, 43, 53]) sur(x + o, 18, 30, 30, 34), sur(x + o + 1, 18, 30, 30, 34), sur(x + o, 19, 120, 120, 126), sur(x + o + 1, 19, 30, 30, 34);\n  add(57 + o, 15, FLOOD, 255 * P.lampK), add(36 + o, 16, [255, 30, 20], P.lampK);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  if (P.snap) P.sn.set(F), (P.snap = 0);\n  const hh = P.h * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0)), mc = matCol(P), fy = round(P.fy);\n  light(P, K), sky(P, K), gantry(P), ground(P), excavator(P);\n  man(P, 12, round(P.srf[12] - max(0, heapH(P) - 9.9)) - 1, 0);\n  if (P.wx >= 0) man(P, round(P.wx) - 1, fy - 1, 1);\n  truck(P), grab(P);\n  // Sparks, drips, spoil and dust.\n  for (const [x, y, , , l, k] of P.pa) k ? (k > 1 ? surc(x, y, mc, 1.3) : put(x, y, [170, 210, 255], 0.8)) : put(x, y, [255, 200, 90], min(1, l * 2));\n  for (const [px, py, r, a] of P.du) {\n    const o0 = at(cl(px, 0, 63), cl(py, 0, 127)), R = Math.ceil(r), pc = mc.map((v, c) => mix(v, 210, 0.5) * min(1.3, 0.3 + LM[o0 + c]));\n    for (let y = round(py) - R; y \u003c= py + R; y++)\n      for (let x = round(px) - R, q; x \u003c= px + R; x++) (q = 1 - ((x - px) ** 2 + (y - py) ** 2) / (r * r)) > 0 && put(x, y, pc, min(1, a * q * q * 0.9));\n  }\n  // Haze in the shaft, thicker with dust.\n  for (let i = 0, hz = 8 + 30 * P.dust; i \u003c N; i++) if (P.shf[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += K[6 + c] * P.shf[i] * hz;\n  if (P.arc > 0) add(round(P.wx), strutY(P.k) + 1, FLOOD, 500);\n  if (P.bl >= 0 && P.bl \u003c 0.8 && P.bl % 0.3 \u003c 0.15) put(34, GL - 4, [255, 170, 30]), add(34, GL - 3, [255, 140, 20], 0.6);\n  // Rain past halfway, not under the deck.\n  for (let i = 0, rain = sm(0.45, 1, P.wt); i \u003c 160 * rain; i++) {\n    const y = ((hash(i, 2) * 150 + P.t * 70) % 150) - 10, x = (hash(i, 1) * 80 + y * 0.25) % 64;\n    if (x \u003c= OR + 0.5 || x >= PR + 1 || y \u003c= GL + 1) for (let j = 0; j \u003c 3; j++) put(x - j * 0.25, y - j, RAIN, 0.6 * (1 - j / 3) * (0.4 + 0.6 * P.dayF));\n  }\n  const off = P.sl >= 0 ? round(64 * sm(0, 1, P.sl)) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const xs = x + off, B = xs \u003c W && off ? P.sn : F, o = (y * W + (xs % W)) * 3;\n      display.setPixel(x, y, min(255, B[o]) | 0, min(255, B[o + 1]) | 0, min(255, B[o + 2]) | 0);\n    }\n}\n","layer":{"id":"layer-excavation","type":"code","name":"excavation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Excavation\n// Family:  construction\n// Idea:    A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the strutted basement excavations dug between city buildings\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1\n//\n// Knob 1: Hour. Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit.\n// Knob 2: Speed. At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too.\n// Knob 3: Depth. How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot.\n// Knob 4: Water. Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades.\n// Buttons: K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, acos, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street, the pit's inside, the opening's edge, the heap, the truck bed, the last stage.\nconst [GL, PL, PR, OR, HX, TT, FIN] = [20, 10, 53, 33, 21, 43, 11];\nconst strutY = (k) => 18 + 9 * k, floorY = (k) => 23 + 9 * k;\nconst KP = [29, 41], EXP = [37, 41, 44, 41];\n// Fill, clay, sand and gravel, weathered rock, rock, and the rows they end at.\nconst STRATA = [[96, 84, 78], [186, 106, 58], [206, 186, 142], [154, 138, 94], [118, 126, 146]];\nconst BOT = [27, 45, 64, 101, 999];\nconst layer = (x, y) => {\n  let i = 0;\n  while (i \u003c 4 && y >= BOT[i] + 5 * (vn(x * 0.09, i * 5.3) - 0.5)) i++;\n  return i;\n};\n// Noon, afternoon, dusk, night: sky top, horizon, sun, ambient, buildings.\nconst KEYS = [\n  [50, 116, 222, 168, 206, 240, 1, 0.95, 0.84, 0.92, 0.95, 1, 150, 158, 176],\n  [56, 100, 196, 232, 200, 160, 1, 0.82, 0.56, 0.8, 0.75, 0.72, 140, 128, 132],\n  [34, 32, 90, 236, 110, 70, 0.9, 0.5, 0.26, 0.5, 0.42, 0.5, 80, 66, 90],\n  [5, 7, 26, 22, 26, 60, 0, 0, 0, 0.13, 0.14, 0.22, 30, 32, 48],\n];\nconst WIN = [255, 196, 120], CAP = [176, 172, 166], DECK = [124, 118, 110], ROAD = [74, 74, 80], RAIN = [190, 210, 240], FLOOD = [1, 0.97, 0.9];\nconst WALLS = [[8, [120, 86, 54]], [9, [96, 104, 118]], [54, [96, 104, 118]], [55, [120, 86, 54]]];\nconst YEL = [250, 178, 26], GAN = [244, 204, 50], GRAB = [246, 142, 30], STEEL = [150, 160, 178], HOSE = [50, 80, 170];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F32(N * 3), lm: F32(N * 3), so: F32(N * 3), bw: F32(N * 3), sn: F32(N * 3), st: F32(N), shf: F32(N), sh: F32(200), rs: F32(H), srf: F32(W), dig: F32(W),\n    t: 0, rt: 0, nk: -1, cx: 42, du: [], pa: [], sl: -1, bl: -1, dust: 0.3, arc: 0, tx: 0, tv: 0, tph: 0, load: 2, tgo: 0,\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, L = layer(x, y), hh = hash(x, y), pd = hypot(x - 3, y - 24.5), px = (x - PL) % 7;\n    // The ground in section, each layer with its grain; a water main and ducts.\n    let k = 0.86 + 0.22 * hh, c = STRATA[L];\n    if (L === 0 && hh > 0.88) c = [150, 146, 140];\n    else if (L === 1) k = 0.9 + 0.14 * vn(x * 0.4, y * 0.7);\n    else if (L === 2 && hash(x >> 1, y >> 1) \u003c 0.2) c = [136, 132, 128];\n    else if (L === 3 && abs(vn(x * 0.3, y * 0.3) - 0.5) \u003c 0.04) k = 0.55;\n    else if (L === 4 && (x + y * 0.7 + 5 * vn(x * 0.2, y * 0.1)) % 13 \u003c 0.9) k = 0.6;\n    if (pd \u003c 2.2) (c = pd > 1.2 ? [96, 120, 150] : [26, 30, 36]), (k = 1);\n    if (x > 57 && x \u003c 63 && (y === 23 || y === 24) && x & 1) (c = [230, 120, 40]), (k = 1);\n    // The far wall: H-piles and lagging, shotcrete and rock bolts lower down.\n    const q = 0.8 + 0.35 * hash(floor((y - GL) / 3), floor((x - PL) / 7)), r = 0.84 + 0.22 * vn(x * 0.3, y * 0.3);\n    const b = y \u003c GL + 2 ? CAP : !px ? [86, 92, 104] : y > 65 ? (px === 3 && y % 8 === 4 ? [60, 60, 66] : [136 * r, 132 * r, 126 * r]) : (y - GL) % 3 > 1 ? [44, 34, 28] : [132 * q, 94 * q, 60 * q];\n    for (let j = 0; j \u003c 3; j++) (P.so[o + j] = c[j] * k), (P.bw[o + j] = b[j]);\n    P.st[i] = sm(0.42, 0.72, vn(x * 0.8, y * 0.06));\n  }\n  skyline(P);\n}\n\nfunction skyline(P) {\n  P.bd = [];\n  for (let x = 0, w, s; x \u003c W; x += w) (s = !x || x > 50), (w = !x ? 8 : s ? W - x : min(4 + floor(rnd() * 5), 56 - x)), P.bd.push([x, x + w - 1, s ? floor(rnd() * 3) : 6 + floor(rnd() * 8), rnd(), s]);\n}\n\n// A new lot, dug to stage k, with the grab already on its way down.\nfunction lot(P, k) {\n  Object.assign(P, { k, fy: floorY(k) + 2.5, hv: 64, wx: -1, mat: -1, ex: 41, ei: 1, sc: 1, ec: 0, full: 0, E: { p: [7, -9, 0] }, C: { p: [HX, 30, 1] } });\n  P.dig.fill(0);\n  go(P.E, 0, 0.7, [12, -3, 0]), go(P.C, 1, (P.fy - 43) / 46, [HX, P.fy - 13, 1]);\n}\n// A move eases a pose to b; the step functions chain moves.\nconst go = (m, ph, dur, b) => Object.assign(m, { ph, t: 0, dur: max(0.15, dur), a: m.p.slice(), b });\nfunction tick(m, d) {\n  const u = sm(0, 1, (m.t += d) / m.dur);\n  for (let i = 0; i \u003c 3; i++) m.p[i] = mix(m.a[i], m.b[i], u);\n  return u;\n}\nconst heapH = (P) => min(13, sqrt(1.1 * P.hv));\nconst heapTop = (P) => P.fy - heapH(P);\nconst matCol = (P) => STRATA[layer(30, P.fy + 2)];\nfunction puff(P, x, y, n, a, s = 1) {\n  for (let i = 0; i \u003c n; i++) P.du.push([x + (rnd() - 0.5) * 6 * s, y - rnd() * 2 * s, (1.5 + rnd() * 2) * s, a, (rnd() - 0.5) * 3 * s, -(2 + rnd() * 3) * s]);\n  P.dust = min(1, P.dust + 0.05 * n * a);\n}\n\n// Excavator: dig, lift, swing, drop it on the heap, swing back.\nfunction eStep(P, E) {\n  const ph = E.ph, up = [7, -9, 0];\n  if (ph === 0) go(E, 1, 1, [8, 1.5, 0]);\n  else if (ph === 1) {\n    const bx = round(P.ex + 8);\n    for (let i = -3; i \u003c= 3; i++) if (bx + i \u003c= PR) P.dig[bx + i] = max(P.dig[bx + i], 2.2 * cos(i * 0.39));\n    (P.fy += 32 / 44), (P.ec = 1), puff(P, bx, P.fy, 1, 0.3);\n    if (P.fy >= floorY(P.k + 1)) (P.fy = floorY(++P.k)), P.k \u003c FIN ? (P.wx = PL) : (P.mat = 0);\n    go(E, 2, 0.6, up);\n  } else if (ph === 2) go(E, 3, 1, [7, -9, PI]);\n  else if (ph === 3) go(E, 4, 0.6, [cl(P.ex - HX - 3, 6, 15), -heapH(P) * 0.7 - 3, PI]);\n  else if (ph === 4) (P.hv += 32), (P.ec = 0), puff(P, P.ex - E.p[0], heapTop(P), 2, 0.3), go(E, 5, 1.1, up);\n  else if (P.wx >= 0 || P.k >= FIN || P.hv > 150) go(E, 7, 0.5, up);\n  else if (ph === 5 && ++P.sc % 3 === 0) (P.ex0 = P.ex), (P.exT = EXP[(P.ei = (P.ei + 1) % 4)]), go(E, 6, 1.4, up);\n  else go(E, 0, 0.7, [12, -3, 0]);\n}\n\n// Grab: down open, close, haul up, over the truck, open.\nfunction cStep(P, C) {\n  const ph = C.ph, top = heapTop(P), up = [HX, 7, 0];\n  if (ph === 0) P.hv > 14 ? go(C, 1, 0.3 + (top - 12 - C.p[1]) / 46, [HX, top - 5, 1]) : go(C, 0, 0.3, up);\n  else if (ph === 1) go(C, 2, 0.7, [HX, top - 4, 0]);\n  else if (ph === 2) {\n    const g = min(P.hv, 60);\n    (P.hv -= g), (P.full = g > 4), puff(P, HX, top, 2, 0.3), go(C, 3, 0.4 + (C.p[1] - 7) / 36, up);\n  } else if (ph \u003c 5) P.tph === 0 && P.load \u003c 3 ? go(C, 5, 1.2, [TT, 7, 0]) : go(C, 4, 0.3, up);\n  else if (ph === 5) {\n    if (P.full) {\n      (P.load++), (P.full = 0), puff(P, TT, 11, 3, 0.5), P.load > 2 && (P.tgo = 0.6);\n      for (let i = 0; i \u003c 10; i++) P.pa.push([TT + (rnd() - 0.5) * 6, 13, 0, 4, 0.3, 2]);\n    }\n    go(C, 6, 0.6, [TT, 7, 1]);\n  } else go(C, ph === 6 ? 7 : 0, ph === 6 ? 1.1 : 0.2, up);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nk = round(cl(k[2], 8, 10)), h = (P.h = cl(k[0], 0, 1)), wt = (P.wt = cl(k[3], 0, 1));\n  if (nk !== P.nk) lot(P, (P.nk = nk));\n  (P.t += d), (P.rt += rd), (P.cx += 3.6 * d);\n  Object.assign(P, { dayF: 1 - sm(0.55, 0.92, h), sunI: (1 - sm(0.6, 0.85, h)) * (1 - 0.9 * sm(0.3, 0.85, wt)), slope: 0.12 + 0.95 * sm(0, 0.8, h), lampK: sm(0.45, 0.8, h) });\n  // K1 tap: the warning lamp, then the blast at the face.\n  if (input.btnPressed && input.btnPressed[0] && P.bl \u003c 0) P.bl = 0;\n  if (P.bl >= 0 && (P.bl += rd) >= 0.8 && !P.fired) {\n    P.fired = 1;\n    for (let i = 0; i \u003c 26; i++) P.pa.push([40 + (rnd() - 0.5) * 10, P.fy - 1, (rnd() - 0.5) * 30, -10 - rnd() * 22, 1.6, 2]);\n    for (let i = PL; i \u003c= PR; i++) P.dig[i] += 1.4 * exp(-(((i - 40) / 9) ** 2));\n    puff(P, 40, P.fy, 9, 1.2, 2), (P.fy += 0.8), (P.hv += 30), (P.dust = 1);\n  }\n  if (P.bl > 1.5) (P.bl = -1), (P.fired = 0);\n  const { E, C } = P, u = tick(E, d);\n  if (E.ph === 6) {\n    const nx = mix(P.ex0, P.exT, u);\n    (P.trk += nx - P.ex), (P.ex = nx);\n  }\n  if (u >= 1) eStep(P, E);\n  if (tick(C, d) >= 1) cStep(P, C);\n  if (P.full && C.ph === 3 && rnd() \u003c 4 * d) P.pa.push([C.p[0] + (rnd() - 0.5) * 5, C.p[1] + 7, 0, 2, 2, 2]);\n  // A truck leaves with three grabs and an empty one backs in.\n  if (P.tph === 0 && P.load > 2 && (P.tgo -= d) \u003c= 0) (P.tph = 1), (P.tv = 0);\n  if (P.tph === 1 && (P.tx += (P.tv = min(18, P.tv + 10 * d)) * d) > 30) (P.tph = 2), (P.load = 0);\n  if (P.tph === 2 && (P.tx -= (1.5 + 0.8 * P.tx) * d) \u003c= 0) (P.tx = 0), (P.tph = 0);\n  // The new strut is welded in from wall to wall.\n  if (P.wx >= 0) {\n    P.arc = rnd() \u003c 0.85 ? 0.5 + 0.5 * rnd() : 0;\n    if (rnd() \u003c 14 * d) P.pa.push([P.wx, strutY(P.k) + 2, (rnd() - 0.5) * 10, -2 - rnd() * 4, 0.6 + rnd() * 0.5, 0]);\n    if ((P.wx += 7 * d) > PR + 1) (P.wx = -1), (P.arc = 0);\n  }\n  // At the bottom: the blinding concrete, then on to the next lot.\n  if (P.k >= FIN && P.hv \u003c 15 && (P.mat += d / 6) > 1.4 && P.sl \u003c 0) (P.snap = 1), (P.sl = 0), lot(P, P.nk), skyline(P);\n  if (P.sl >= 0 && (P.sl += rd / 2.2) >= 1) P.sl = -1;\n  // Seepage drips below the water table.\n  const wtY = 78 - 34 * wt, e = exp(-0.25 * d);\n  if (P.fy > wtY + 6 && rnd() \u003c 6 * wt * d) P.pa.push([PL + 1 + rnd() * 42, wtY + rnd() * (P.fy - wtY - 5), 0, 0, 3, 1]);\n  for (let i = PL; i \u003c= PR; i++) P.dig[i] *= e;\n  P.dust = max(0.1, P.dust * e);\n  P.du = P.du.filter((p) => ((p[0] += p[4] * d), (p[1] += p[5] * d), (p[2] += 2.2 * d), (p[3] -= 0.22 * d) > 0));\n  P.pa = P.pa.filter((p) => ((p[3] += 40 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), (p[4] -= d) > 0 && p[1] \u003c (p[0] >= PL && p[0] \u003c= PR ? P.fy : H)));\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.3 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\nconst cloudA = (P, x, y) => cl((0.6 * vn((x + P.cx) * 0.07, y * 0.18) + 0.4 * vn((x + P.cx) * 0.19, y * 0.4 + 5) - 0.6 + 0.3 * P.wt) * 5, 0, 1);\n\nfunction lamp(x0, y0, r2, k, c) {\n  const R = Math.ceil(sqrt(r2 * 4.6)), gx = [];\n  for (let x = max(0, x0 - R); x \u003c= min(W - 1, x0 + R); x++) gx.push(x, k * exp(-((x - x0) ** 2) / r2));\n  for (let y = max(0, y0 - R); y \u003c= min(H - 1, y0 + R); y++)\n    for (let i = 0, g = exp(-((y - y0) ** 2) / r2); i \u003c gx.length; i += 2) for (let j = 0, o = (y * W + gx[i]) * 3; j \u003c 3; j++) LM[o + j] += c[j] * gx[i + 1] * g;\n}\n\n// Daylight with cloud shadows, the shaft of sun, the lamps.\nfunction light(P, K) {\n  const { sunI: sI, slope: s, rs, sh, shf, k: pk, lampK: nl } = P, ks = min(pk, FIN - 1);\n  for (let i = 0; i \u003c 200; i++) sh[i] = 1 - 0.85 * cloudA(P, i - 96, 7);\n  rs.fill(1);\n  for (let j = 1, y; j \u003c= ks; j++) (y = strutY(j)), (rs[y + 2] = rs[y + 4] = 0.6), (rs[y + 3] = 0.4);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, x0 = x - s * (y - GL), out = y \u003c GL + 2;\n    const a = out ? 1 : (0.62 - 0.003 * (y - GL)) * (x > OR ? 0.75 : 1);\n    const l = out ? 0.5 * sI * sh[x + 80] : sI > 0 && x0 > PL - 1.5 && x0 \u003c OR + 1.5 ? sI * sm(PL - 1.5, PL + 1, x0) * (1 - sm(OR - 1, OR + 1.5, x0)) * sh[floor(x0) + 80] * rs[y] * (1 - 0.0025 * (y - GL)) : 0;\n    shf[i] = out ? 0 : l;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[9 + c] * a + K[6 + c] * l * 0.95;\n  }\n  // Floods on the lowest strut; sodium lamps after dark.\n  lamp(17, strutY(ks) + 2, 260, 0.7, FLOOD), lamp(47, strutY(ks) + 2, 260, 0.7, FLOOD);\n  if (nl > 0) for (let j = 1; j \u003c= ks; j++) lamp(j & 1 ? 12 : 51, strutY(j) + 2, 60, 1.3 * nl, [1, 0.62, 0.24]);\n  if (P.arc > 0) lamp(round(P.wx), strutY(pk) + 1, 70, 1.4 * P.arc, [0.7, 0.85, 1]);\n  if (P.bl > 0.8) lamp(40, round(P.fy) - 3, 260, 1.8 * (1 - sm(0.8, 1.2, P.bl)), [1, 0.8, 0.5]);\n  const tx = P.C.p[0];\n  if (nl > 0)\n    for (let y = 8; y \u003c min(H, P.fy + 2); y++)\n      for (let hw = 1.5 + 0.16 * (y - 7), x = max(0, floor(tx - hw)); x \u003c= min(W - 1, tx + hw); x++)\n        for (let c = 0, e = ((0.9 * nl) / (1 + (y - 7) / 70)) * (1 - abs(x - tx) / hw); c \u003c 3; c++) LM[(y * W + x) * 3 + c] += e * (c > 1 ? 0.92 : 1);\n}\n\nfunction sky(P, K) {\n  const ov = 0.75 * sm(0.2, 1, P.wt), day = P.dayF, dk = 0.3 + 0.7 * day, cc = [0, 1, 2].map((c) => mix(mix(K[3 + c], 255, 0.55) * dk, 130 * dk, ov));\n  for (let i = 0; i \u003c GL * W; i++) {\n    const x = i & 63, y = i >> 6, u = y / (GL - 1), a = cloudA(P, x, y) * (0.9 - 0.4 * u);\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = mix(mix(mix(K[c], K[3 + c], u * u), 120 * (0.25 + 0.75 * day), ov), cc[c], a);\n  }\n  // The street's buildings, the two beside the pit tall.\n  for (const [x0, x1, top, v, side] of P.bd)\n    for (let y = top; y \u003c GL; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const win = (x - x0) % 3 === 1 && (y - top) % 3 === 1 && x \u003c x1, lit = hash(x * 7, y + floor(v * 99)) \u003c 0.45 && day \u003c 0.7;\n        for (let c = 0, b; c \u003c 3; c++) (b = K[12 + c] * (0.78 + 0.3 * v) * (x === x0 ? 0.8 : 1)), (b = win ? (lit ? WIN[c] * (1 - day) : b * 0.55 + 18 * c * day) : b), (F[(y * W + x) * 3 + c] = side ? b : mix(b, K[3 + c], 0.3));\n      }\n}\n\nfunction ground(P) {\n  const { so, bw, srf, wt, st, fy } = P, wtY = 78 - 34 * wt, sec = 0.42 + 0.52 * P.dayF, mc = matCol(P), hh = heapH(P), kc = STEEL.map((v) => v * 0.5 * sec);\n  for (let x = PL; x \u003c= PR; x++) srf[x] = fy + P.dig[x] + 0.6 * (hash(x, 7) - 0.5);\n  for (let i = GL * W; i \u003c N; i++) {\n    // Pavement, deck and caps; far wall and heap; the ground in section.\n    const x = i & 63, y = i >> 6, o = i * 3, pit = x >= PL && x \u003c= PR;\n    let A = so, a = o, L = 0, k = sec;\n    if (y \u003c GL + 2 && !(pit && x \u003c= OR)) (A = (x > 6 && x \u003c PL) || (x > PR && x \u003c 57) ? CAP : x > OR && x \u003c 56 ? DECK : ROAD), (a = 0), (L = 1), (k = y === GL ? 1.18 : A === DECK && (x + y) & 1 ? 0.86 : 1);\n    else if (pit && y \u003c srf[x]) (L = 1), y >= srf[x] - max(0, hh - abs(x - HX) * 1.1) ? ((A = mc), (a = 0), (k = 0.85 + 0.3 * hash(x, y))) : ((A = bw), (k = y > wtY ? 1 - 0.5 * wt * st[i] : 1));\n    else if (pit && y \u003c srf[x] + 1) (L = 1), (k = 1.15);\n    else if (!pit && y > wtY + 4) k *= 1 - 0.12 * wt;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = A[a + c] * k * (L ? LM[o + c] : 1);\n  }\n  // Walls and king posts down to their toes; the deck's beams.\n  for (let y = GL + 2; y \u003c 126; y++) {\n    for (const [x, c] of WALLS) for (let i = 0; i \u003c 3; i++) F[(y * W + x) * 3 + i] = c[i] * sec;\n    for (const x of KP) for (let i = 0; i \u003c 2; i++) y \u003c srf[x] ? sur(x + i, y, ...STEEL, 0.62 + 0.23 * i) : put(x + i, y, kc);\n  }\n  for (let x = OR + 1; x \u003c= PR; x++) sur(x, GL + 2, 70, 74, 84), sur(x, GL + 3, 90, 94, 104, x % 6 ? 0.7 : 1.2);\n  // Struts with wales and jacks.\n  for (let j = 1; j \u003c= min(P.k, FIN - 1); j++) {\n    const y = strutY(j), end = j === P.k && P.wx >= 0 ? P.wx : PR;\n    for (let x = PL; x \u003c= end; x++) sur(x, y, ...STEEL, x % 11 === 3 ? 0.8 : 1.25), sur(x, y + 1, ...STEEL, 0.75);\n    for (let i = -1; i \u003c= 2; i++) {\n      for (const x of [PL, PL + 1, PR - 1, PR]) sur(x, y + i, 80, 84, 96);\n      if (end >= PR) for (let x = 46; x \u003c= 48; x++) surc(x, y + i, YEL, i \u003c 0 || i > 1 ? 0.7 : 1);\n    }\n  }\n  // Blinding concrete on the last floor.\n  const me = PL + min(1, P.mat) * (P.ex - PL - 8);\n  if (P.mat > 0) for (let x = PL; x \u003c= me; x++) for (let j = 0, o; j \u003c 3; j++) (o = at(x, srf[x] - j)), put(x, srf[x] - j, [0, 1, 2].map((c) => 200 * max(0.55, LM[o + c]) * (j ? 0.9 : 1.1)));\n  if (P.mat > 0 && P.mat \u003c 1) line(30, GL + 1, me, fy - 3, [96, 96, 104]);\n  // The pump's pool, and its hose up the wall to the tank.\n  for (let x = 45; x \u003c= PR; x++)\n    for (let y = round(fy - 0.4 - 2.6 * wt), g; y \u003c srf[x]; y++) (g = 0.5 + 0.5 * sin(x * 1.3 + P.t * 5 + y * 2)), sur(x, y, 60 + 60 * g, 96 + 60 * g, 132 + 50 * g);\n  for (let j = 1; j \u003c= 2; j++) sur(51, fy - j, ...HOSE), sur(52, fy - j, ...HOSE);\n  for (let y = fy - 2; y > GL - 2; y--) surc(PR, y, HOSE);\n  for (let x = PR; x \u003c 60; x++) surc(x, GL - 2, HOSE);\n  for (let x = 59; x \u003c= 62; x++) for (let y = 16; y \u003c GL; y++) sur(x, y, 120, 140, 160, y === 16 ? 1.2 : 0.8);\n  if (wt > 0.03) for (let j = 0; j \u003c 2; j++) put(59 + j, GL - 2 + j, RAIN, min(1, wt * 6) * (0.5 + 0.5 * sin(P.t * 20 + j)));\n}\n\nfunction excavator(P) {\n  const ex = P.ex, gy = round(P.fy), [bu, bv, ph] = P.E.p, f = cos(ph), X = (u) => ex + u * f, hw = 4.5 * abs(f) + 3.2 * abs(sin(ph)), nl = P.lampK;\n  for (let i = -6; i \u003c= 6; i++) for (let j = 1; j \u003c= 3; j++) (abs(i) \u003c 6 || j === 2) && sur(ex + i, gy - j, ...(j !== 2 && (i + floor(P.trk)) & 1 ? [92, 92, 96] : [46, 46, 50]));\n  for (let i = -3; i \u003c= 3; i++) sur(ex + i, gy - 4, 52, 50, 48);\n  for (let j = 5; j \u003c= 7; j++) for (let x = round(ex - hw); x \u003c= round(ex + hw); x++) surc(x, gy - j, YEL, j === 5 ? 0.7 : (x - ex) * f \u003c -2.5 ? 0.82 : 1);\n  const ca = round(min(X(0.5), X(3.5))), cb = max(ca + 1, round(max(X(0.5), X(3.5))));\n  for (let j = 8; j \u003c= 11; j++) for (let x = ca; x \u003c= cb; x++) j === 11 || x === (f >= 0 ? ca : cb) ? surc(x, gy - j, YEL) : (sur(x, gy - j, 110, 150, 180, 0.9), add(x, gy - j, WIN, 0.5 * nl));\n  // Boom and arm reach the bucket by two-link IK.\n  const [pu, pv, L1, L2] = [3, -6, 9, 8.5];\n  let tu = bu - pu, tv = bv - pv;\n  const dd = hypot(tu, tv) || 1, dc = cl(dd, 2, L1 + L2 - 0.05);\n  (tu *= dc / dd), (tv *= dc / dd);\n  const t1 = atan2(tv, tu) - acos(cl((L1 * L1 + dc * dc - L2 * L2) / (2 * L1 * dc), -1, 1)), eu = pu + L1 * cos(t1), ev = pv + L1 * sin(t1), bx = X(pu + tu), by = gy + pv + tv;\n  line(X(pu), gy + pv, X(eu), gy + ev, YEL), line(X(pu), gy + pv + 1, X(eu), gy + ev + 1, YEL, 0.75);\n  line(X(4), gy - 5, X(pu + (eu - pu) * 0.55), gy + pv + (ev - pv) * 0.55 + 1, [150, 150, 156]);\n  line(X(eu), gy + ev, bx, by, YEL, 0.9);\n  for (let i = 0; i \u003c= 2; i++) sur(bx - i * f, by, 74, 74, 80), sur(bx - i * f, by + 1, 74, 74, 80, 0.8), P.ec && surc(bx - i * f, by - 1, matCol(P), 1.1);\n  add(X(4.5), gy - 9, FLOOD, 255 * nl);\n}\n\n// A worker in hi-vis, feet on row y; a headlamp after dusk.\nfunction man(P, x, y, arm) {\n  sur(x, y, 40, 48, 90), sur(x, y - 1, 255, 128, 20), sur(x, y - 2, 255, 255, 240), arm && sur(x + 1, y - 2 - (arm > 0.5), 255, 128, 20);\n  add(x, y - 2, FLOOD, 200 * P.lampK);\n}\n\nfunction grab(P) {\n  const [tx, by, op] = P.C.p, X = round(tx), Y = round(by), HW = [3, 3.4, 3.4, 3, 2];\n  for (let y = 7; y \u003c Y; y++) sur(X - 1, y, 200, 200, 210), sur(X + 1, y, 200, 200, 210);\n  for (let i = -1; i \u003c= 1; i++) surc(X + i, Y, GAN, 1.2), surc(X + i, Y + 1, GAN, 0.85);\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = -6, a; i \u003c= 6; i++) (a = abs(i)) >= op * (0.4 + 0.9 * j) - 0.01 && a \u003c= HW[j] + op * 0.9 * j && (j === 4 || (op \u003c 0.3 && !i) ? sur(X + i, Y + 2 + j, 96, 100, 110) : surc(X + i, Y + 2 + j, GRAB, j ? 1 : 1.2));\n  if (P.full && op \u003c 0.5) for (let i = -2; i \u003c= 2; i++) surc(X + i, Y + 2, matCol(P), 1.2);\n  for (let i = -3; i \u003c= 3; i++) sur(X + i, 5, 70, 74, 84), surc(X + i, 6, GAN, abs(i) \u003c 2 ? 0.6 : 1);\n}\n\nfunction gantry(P) {\n  for (let y = 2; y \u003c GL; y++) for (const x of [4, 58]) surc(x, y, GAN), (y + (x >> 2)) % 3 && surc(x + 1, y, GAN, 0.7);\n  for (let x = 3; x \u003c= 60; x++) surc(x, 2, GAN, 1.1), surc(x, 4, GAN), (x + 1) % 3 || surc(x, 3, GAN, 0.8);\n  put(32, 1, P.rt % 1.4 \u003c 0.7 ? [255, 40, 30] : [90, 16, 14]);\n  // The railing, and the signalman at the edge.\n  for (let x = 8; x \u003c= OR; x++) sur(x, 17, ...((x >> 1) & 1 ? [230, 60, 50] : [236, 236, 236])), x % 6 === 2 && (sur(x, 18, 200, 200, 200), sur(x, 19, 200, 200, 200));\n  man(P, 35, GL - 1, P.C.ph \u003c 3 ? (P.rt * 2) % 1 : 0);\n}\n\nfunction truck(P) {\n  const o = round(P.tx), mc = matCol(P), hL = [0, 1.6, 2.7, 3.7][min(3, P.load)];\n  if (o > 30) return;\n  for (let x = 37; x \u003c= 50; x++)\n    for (let y = 9; y \u003c= 16; y++)\n      y > 12 ? sur(x + o, y, 196, 56, 44, y === 13 ? 1.25 : (x - 37) % 4 ? 1 : 0.75) : y > 12 - hL * (1 - ((x - 43.5) / 7) ** 2) && surc(x + o, y, mc, 0.85 + 0.3 * hash(x, y));\n  for (let x = 51; x \u003c= 56; x++) for (let y = 10; y \u003c= 16; y++) (y > 10 || x > 51) && (y \u003c 14 && y > 10 && x > 52 ? sur(x + o, y, 60, 90, 120) : sur(x + o, y, 50, 96, 200));\n  for (let x = 37; x \u003c= 56; x++) sur(x + o, 17, 50, 50, 54);\n  for (const x of [39, 43, 53]) sur(x + o, 18, 30, 30, 34), sur(x + o + 1, 18, 30, 30, 34), sur(x + o, 19, 120, 120, 126), sur(x + o + 1, 19, 30, 30, 34);\n  add(57 + o, 15, FLOOD, 255 * P.lampK), add(36 + o, 16, [255, 30, 20], P.lampK);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  if (P.snap) P.sn.set(F), (P.snap = 0);\n  const hh = P.h * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0)), mc = matCol(P), fy = round(P.fy);\n  light(P, K), sky(P, K), gantry(P), ground(P), excavator(P);\n  man(P, 12, round(P.srf[12] - max(0, heapH(P) - 9.9)) - 1, 0);\n  if (P.wx >= 0) man(P, round(P.wx) - 1, fy - 1, 1);\n  truck(P), grab(P);\n  // Sparks, drips, spoil and dust.\n  for (const [x, y, , , l, k] of P.pa) k ? (k > 1 ? surc(x, y, mc, 1.3) : put(x, y, [170, 210, 255], 0.8)) : put(x, y, [255, 200, 90], min(1, l * 2));\n  for (const [px, py, r, a] of P.du) {\n    const o0 = at(cl(px, 0, 63), cl(py, 0, 127)), R = Math.ceil(r), pc = mc.map((v, c) => mix(v, 210, 0.5) * min(1.3, 0.3 + LM[o0 + c]));\n    for (let y = round(py) - R; y \u003c= py + R; y++)\n      for (let x = round(px) - R, q; x \u003c= px + R; x++) (q = 1 - ((x - px) ** 2 + (y - py) ** 2) / (r * r)) > 0 && put(x, y, pc, min(1, a * q * q * 0.9));\n  }\n  // Haze in the shaft, thicker with dust.\n  for (let i = 0, hz = 8 + 30 * P.dust; i \u003c N; i++) if (P.shf[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += K[6 + c] * P.shf[i] * hz;\n  if (P.arc > 0) add(round(P.wx), strutY(P.k) + 1, FLOOD, 500);\n  if (P.bl >= 0 && P.bl \u003c 0.8 && P.bl % 0.3 \u003c 0.15) put(34, GL - 4, [255, 170, 30]), add(34, GL - 3, [255, 140, 20], 0.6);\n  // Rain past halfway, not under the deck.\n  for (let i = 0, rain = sm(0.45, 1, P.wt); i \u003c 160 * rain; i++) {\n    const y = ((hash(i, 2) * 150 + P.t * 70) % 150) - 10, x = (hash(i, 1) * 80 + y * 0.25) % 64;\n    if (x \u003c= OR + 0.5 || x >= PR + 1 || y \u003c= GL + 1) for (let j = 0; j \u003c 3; j++) put(x - j * 0.25, y - j, RAIN, 0.6 * (1 - j / 3) * (0.4 + 0.6 * P.dayF));\n  }\n  const off = P.sl >= 0 ? round(64 * sm(0, 1, P.sl)) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const xs = x + off, B = xs \u003c W && off ? P.sn : F, o = (y * W + (xs % W)) * 3;\n      display.setPixel(x, y, min(255, B[o]) | 0, min(255, B[o + 1]) | 0, min(255, B[o + 2]) | 0);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too."},{"name":"Depth","min":8,"max":10,"about":"How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot."},{"name":"Water","min":0,"max":1,"about":"Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades."}],"start":[0,2,8,0.06],"measures":{"motion":0.0546,"detail":0.0796,"edges":0.3258,"complexity":1.9604,"coverage":0.986,"colour":0.2478,"drift":0.0543},"knobResponse":[0.2505,0.0522,0.0454,0.0762]},{"slug":"explicit-formula","title":"Explicit Formula","family":"number","round":39,"note":"소수 거듭제곱마다 log p 씩 뛰는 계단 ψ(x) 를 제타 함수의 영점으로 다시 지어요. x 가 아래로, ψ 가 옆으로 가고, 영점이 한 쌍씩 더해질 때마다 매끈한 선 x 에 물결이 붙다가 계단으로 날카로워지고, 제자리를 찾은 계단 띠부터 켜져요. 오른쪽 끝 세 열이 임계선이라 더해진 영점이 제 높이에서 켜져요.","idea":"The prime staircase psi(x), x running down the rows and psi across, is rebuilt from the zeros of the zeta function one pair at a time: the bare line x - log 2 pi grows waves that sharpen into steps, each step snapping onto its prime power and its band lighting up as it does, while the zeros taken so far light up one by one down a strip at the right and a count at the top.","buttons":"K1 tap takes every zero out and starts adding them again from the first.","code":"// ===== Patternflow pattern =====\n// Title:   Explicit Formula\n// Family:  number\n// Idea:    The prime staircase psi(x), x running down the rows and psi across, is rebuilt from the zeros of the zeta function one pair at a time: the bare line x - log 2 pi grows waves that sharpen into steps, each step snapping onto its prime power and its band lighting up as it does, while the zeros taken so far light up one by one down a strip at the right and a count at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Riemann's explicit formula (Bernhard Riemann, 1859), in von Mangoldt's form for the Chebyshev function psi (Hans von Mangoldt, 1895), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Reach=24..144, Tilt=0..1\n//\n// Knob 1: Hue. Turns the fill round the wheel, the shortfall colour a quarter turn on; gold stays gold. At 0 azure fill, violet where the sum falls short of the staircase and gold where it runs past; at 0.25 violet with orange, at 0.5 pale orange with green, at 0.75 green with azure. Orange and yellow fill is paled and dims less in its shaded bands, so it never reads brown.\n// Knob 2: Speed. How fast the zeros come in, each a little faster than the last: at 2 the first is in after 0.7 s, 10 by 4.2 s, 100 by 10.9 s and all 200 by 13.1 s; the staircase holds for 4 s, the zeros are taken out again in 1.9 s and the bare line rests 1 s, 20 s round. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Reach. How far x runs down the 128 rows, from 1 to Reach, with psi = 0 on column 3 and psi = Reach on column 57. At 24, the start, 13 prime powers, 5.6 rows to each unit of x and steps 1.6 to 7 LEDs wide; at 84 33 of them; at 144 47, the steps under 2 LEDs, and the staircase leans on the line x as the prime number theorem says it must. The 200 zeros resolve the staircase less sharply the further x runs.\n// Knob 4: Tilt. Takes Tilt times x away from both curves and widens the scale to match. Up to 0.06 the staircase itself; at 1 only psi(x) - x is left, a sawtooth that slides left one unit for each unit of x and jumps right by log p at each prime power, drawn 5 LEDs to the unit at Reach 24: the part of psi that the zeros alone make, their waves summing to the teeth.\n// Buttons: K1 tap takes every zero out and starts adding them again from the first.\n\nconst W = 64, H = 128, SS = 4, NS = H * SS, NZ = 200;\n// The imaginary parts of the first 200 zeros of the zeta function on the\n// critical line, rho = 1/2 + i gamma, to six places. 14.134725 is the first,\n// 396.381854 the 200th.\nconst GAM = [\n  14.134725, 21.022040, 25.010858, 30.424876, 32.935062, 37.586178, 40.918719, 43.327073, 48.005151, 49.773832,\n  52.970321, 56.446248, 59.347044, 60.831779, 65.112544, 67.079811, 69.546402, 72.067158, 75.704691, 77.144840,\n  79.337375, 82.910381, 84.735493, 87.425275, 88.809111, 92.491899, 94.651344, 95.870634, 98.831194, 101.317851,\n  103.725538, 105.446623, 107.168611, 111.029536, 111.874659, 114.320221, 116.226680, 118.790783, 121.370125, 122.946829,\n  124.256819, 127.516684, 129.578704, 131.087689, 133.497737, 134.756510, 138.116042, 139.736209, 141.123707, 143.111846,\n  146.000982, 147.422765, 150.053520, 150.925258, 153.024694, 156.112909, 157.597592, 158.849988, 161.188964, 163.030710,\n  165.537069, 167.184440, 169.094515, 169.911976, 173.411537, 174.754192, 176.441434, 178.377408, 179.916484, 182.207078,\n  184.874468, 185.598784, 187.228923, 189.416159, 192.026656, 193.079727, 195.265397, 196.876482, 198.015310, 201.264752,\n  202.493595, 204.189672, 205.394697, 207.906259, 209.576510, 211.690863, 213.347919, 214.547045, 216.169539, 219.067596,\n  220.714919, 221.430706, 224.007000, 224.983325, 227.421444, 229.337413, 231.250189, 231.987235, 233.693404, 236.524230,\n  237.769820, 239.555478, 241.049158, 242.823272, 244.070898, 247.136990, 248.101990, 249.573690, 251.014948, 253.069987,\n  255.306256, 256.380714, 258.610439, 259.874407, 260.805085, 263.573894, 265.557852, 266.614974, 267.921915, 269.970449,\n  271.494056, 273.459609, 275.587493, 276.452050, 278.250744, 279.229251, 282.465115, 283.211186, 284.835964, 286.667445,\n  287.911921, 289.579855, 291.846291, 293.558434, 294.965370, 295.573255, 297.979277, 299.840326, 301.649325, 302.696750,\n  304.864371, 305.728913, 307.219496, 310.109463, 311.165142, 312.427801, 313.985286, 315.475616, 317.734806, 318.853104,\n  321.160134, 322.144559, 323.466970, 324.862866, 327.443901, 329.033072, 329.953240, 331.474468, 333.645379, 334.211355,\n  336.841850, 338.339993, 339.858217, 341.042261, 342.054878, 344.661703, 346.347871, 347.272678, 349.316261, 350.408419,\n  351.878649, 353.488900, 356.017575, 357.151302, 357.952685, 359.743755, 361.289362, 363.331331, 364.736024, 366.212710,\n  367.993575, 368.968438, 370.050919, 373.061928, 373.864874, 375.825913, 376.324092, 378.436680, 379.872975, 381.484469,\n  383.443529, 384.956117, 385.861301, 387.222890, 388.846128, 391.456084, 392.245083, 393.427744, 395.582870, 396.381854,\n];\n// psi = 0 sits on column C0 and psi = Reach on column C0 + CW. The critical\n// line runs down columns ZC..ZC + 2, gamma 0 to GTOP over the 128 rows.\nconst C0 = 3, CW = 54, ZC = 61, GTOP = 400;\n// Zeros come in at dz/dt = ZB (ZA + z) a second at Speed 2: the first after\n// 0.7 s, 10 by 4.2 s, 100 by 10.9 s, all 200 by 13.1 s. Then they hold for\n// HOLD seconds, go out BACK times as fast and the bare line rests REST.\nconst ZA = 4, ZB = 0.3, HOLD = 4, BACK = 7, REST = 1;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst LOG2PI = Math.log(2 * Math.PI);\nconst { floor, min, max, abs, sqrt, log, exp, sin, cos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = [\n  0b111101101101111, 0b010110010010111, 0b111001111100111, 0b111001111001111, 0b101101111001001,\n  0b111100111001111, 0b111100111101111, 0b111001001001001, 0b111101111101111, 0b111101111001111,\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The prime powers p^k up to X, each with log p and k.\nfunction primePowers(X) {\n  const out = [];\n  for (let n = 2; n \u003c= X; n++) {\n    let p = 2;\n    while (n % p) p++;\n    let m = n, k = 0;\n    while (m % p === 0) (m /= p), k++;\n    if (m === 1) out.push([n, log(p), k]);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, reach: 0, tilt: 0, z: 0, stage: 0, clock: 0, nIn: 0,\n    xs: new Float64Array(NS), band: new Uint8Array(NS), base: new Float64Array(NS), tru: new Float64Array(NS), A: new Float64Array(NS),\n    v: new Float64Array(NS), lit: new Float32Array(64), err: new Float64Array(64), cnt: new Float64Array(64), bx: new Float64Array(64), cN: new Float32Array(SS), cT: new Float32Array(SS), pp: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    fill0: [0, 0, 0], fill1: [0, 0, 0], bg: [0, 0, 0], rim: [0, 0, 0], dot: [0, 0, 0], over: [0, 0, 0], short: [0, 0, 0],\n  };\n}\n\n// The pair rho, its conjugate at sample j: 2 Re(x^rho / rho)\n// = 2 sqrt(x) (cos(g L) / 2 + g sin(g L)) / (1/4 + g^2), L = log x.\nfunction term(S, n, j) {\n  const g = GAM[n], x = S.xs[j], L = log(x);\n  return (2 * sqrt(x) * (0.5 * cos(g * L) + g * sin(g * L))) / (0.25 + g * g);\n}\n\n// Zero n fully in (sign 1) or taken out (sign -1).\nfunction addZero(S, n, sign) {\n  for (let j = 0; j \u003c NS; j++) S.A[j] += sign * term(S, n, j);\n}\n\nfunction setReach(S, X) {\n  S.reach = X;\n  S.pp = primePowers(X);\n  for (let j = 0; j \u003c NS; j++) {\n    // Row y holds x from 1 + y (X - 1) / 128 to one row further on.\n    const x = 1 + ((j + 0.5) / NS) * (X - 1);\n    S.xs[j] = x;\n    S.base[j] = x - LOG2PI - 0.5 * log(1 - 1 / (x * x));\n    let p = 0, c = 0;\n    for (const q of S.pp) if (q[0] \u003c= x) (p += q[1]), c++;\n    S.tru[j] = p;\n    S.band[j] = c;\n  }\n  S.A.fill(0);\n  S.lit.fill(0);\n  for (let n = 0; n \u003c S.nIn; n++) addZero(S, n, 1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 24, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  // Up to 0.06 upright as it is, so the opening shows the staircase itself.\n  S.tilt = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const X = round(cl(k[2], 24, 144));\n  if (X !== S.reach) setReach(S, X);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.stage = 0;\n    S.z = 0;\n  }\n  const sp = (d * S.speed) / 2;\n  if (S.stage === 0) {\n    S.z += sp * ZB * (ZA + S.z);\n    if (S.z >= NZ) (S.z = NZ), (S.stage = 1), (S.clock = 0);\n  } else if (S.stage === 1) {\n    S.clock += sp;\n    if (S.clock > HOLD) S.stage = 2;\n  } else if (S.stage === 2) {\n    S.z -= sp * ZB * BACK * (ZA + S.z);\n    if (S.z \u003c= 0) (S.z = 0), (S.stage = 3), (S.clock = 0);\n  } else {\n    S.clock += sp;\n    if (S.clock > REST) S.stage = 0;\n  }\n  const n = min(NZ, floor(S.z));\n  while (S.nIn \u003c n) addZero(S, S.nIn++, 1);\n  while (S.nIn > n) addZero(S, --S.nIn, -1);\n  // The sum at every sample, the fading zero in by its fraction.\n  const { v, xs, base, tru, A, err, cnt, bx, band, lit } = S, f = n \u003c NZ ? S.z - n : 0;\n  for (let j = 0; j \u003c NS; j++) v[j] = base[j] - A[j] - (f > 0 ? f * term(S, n, j) : 0);\n  // A band has snapped onto its step when the sum's mean distance from the\n  // staircase across it is under 0.04 sqrt(x); it starts to light at 0.12.\n  const nb = S.pp.length + 1;\n  err.fill(0, 0, nb);\n  cnt.fill(0, 0, nb);\n  bx.fill(0, 0, nb);\n  for (let j = 0; j \u003c NS; j++) {\n    const q = band[j];\n    err[q] += abs(v[j] - tru[j]);\n    bx[q] += xs[j];\n    cnt[q]++;\n  }\n  const ease = 1 - exp(-d / 0.3);\n  for (let q = 0; q \u003c nb; q++) {\n    const r = cnt[q] ? err[q] / cnt[q] / sqrt(bx[q] / cnt[q]) : 1, u = cl((0.12 - r) / 0.08, 0, 1);\n    lit[q] += (u * u * (3 - 2 * u) - lit[q]) * ease;\n  }\n}\n\n// A colour that would read brown or olive, a dark orange or yellow, is\n// paled toward grey and lifted.\nfunction tone(h, s, v, out) {\n  const hh = h - floor(h), warm = cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1) * (1 - v);\n  hsv(h, s * (1 - 0.9 * warm), v * (1 + 1.1 * warm), out);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, v, xs, tru, cN, cT, fill0, fill1, bg, rim, dot, over, short } = S;\n  const X = S.reach, n = S.nIn, f = n \u003c NZ ? S.z - n : 0, t = S.tilt;\n  // Columns: psi - t x, so at Tilt 1 only what the zeros add is left, the\n  // scale closing in from the whole of psi to about 2.2 sqrt(Reach).\n  const sc = CW / ((1 - t) * X + t * 2.2 * sqrt(X)), c0 = C0 + 35 * t;\n\n  // Orange and yellow fill dims less, so its shaded bands never read brown.\n  const h = S.hue + H0, hh = h - floor(h), keep = 1 - 0.7 * cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1);\n  tone(h, 0.8, 0.6, fill0);\n  tone(h + 0.05, 0.75, 1, fill1);\n  hsv(0.64, 0.45, 0.15, bg);\n  tone(h + 0.25, 0.65, 0.8, short);\n  hsv(h - 0.03, 0.2, 1, rim);\n  hsv(h, 0.35, 1, dot);\n  over[0] = 1;\n  over[1] = 0.8;\n  over[2] = 0.45;\n  // The newest zero's wave, faintly in the fill while it comes in.\n  const wave = n \u003c NZ ? 0.1 * sin(PI * f) * sqrt(GAM[0] / GAM[n]) : 0, gw = n \u003c NZ ? GAM[n] : 0;\n\n  let prevC = c0 + (v[0] - t * xs[0]) * sc;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1);\n    const fr = fill0[0] + (fill1[0] - fill0[0]) * u, fg = fill0[1] + (fill1[1] - fill0[1]) * u, fb = fill0[2] + (fill1[2] - fill0[2]) * u;\n    const bk = 0.8 + 0.4 * u;\n    // Where the curve runs in this row: the span between the last sample of\n    // the row above and every sample of this one.\n    let lo = prevC, hi = prevC;\n    for (let q = 0; q \u003c SS; q++) {\n      const j = y * SS + q, cc = c0 + (v[j] - t * xs[j]) * sc;\n      cN[q] = cc;\n      cT[q] = c0 + (tru[j] - t * xs[j]) * sc;\n      if (cc \u003c lo) lo = cc;\n      if (cc > hi) hi = cc;\n      prevC = cc;\n    }\n    // Between one prime power and the next the fill is a band, every other\n    // band a little lighter, so the gaps between them show as band heights,\n    // and a band stays dim until the sum has snapped onto its step.\n    const bq = S.band[y * SS + 2];\n    const wv = (1 + wave * sin(gw * log(xs[y * SS + 2]))) * (bq & 1 ? 1.08 : 0.92) * (0.45 + 0.55 * S.lit[bq]);\n    const edge = (cN[0] + cN[1] + cN[2] + cN[3]) / 4;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Under both the sum and the staircase: the fill. Under the sum alone,\n      // where it runs past the staircase: gold. Under the staircase alone,\n      // where the sum falls short: the second colour. Under neither: dark.\n      let both = 0, ov = 0, sh = 0;\n      for (let q = 0; q \u003c SS; q++) {\n        const a = cl(cN[q] - x, 0, 1), b = cl(cT[q] - x, 0, 1), m = a \u003c b ? a : b;\n        both += m;\n        ov += a - m;\n        sh += b - m;\n      }\n      both /= SS;\n      ov /= SS;\n      sh /= SS;\n      const no = 1 - both - ov - sh, gl = 1 - (1 - wv * (0.55 + 0.45 * exp((x - edge) / 9))) * keep;\n      let r = bg[0] * bk * no + fr * gl * both + over[0] * ov + short[0] * sh;\n      let g = bg[1] * bk * no + fg * gl * both + over[1] * ov + short[1] * sh;\n      let b = bg[2] * bk * no + fb * gl * both + over[2] * ov + short[2] * sh;\n      // The curve itself: every LED its span touches.\n      const rr = cl(1 - max(lo - (x + 1), x - hi), 0, 1) * 0.75;\n      r += (rim[0] - r) * rr;\n      g += (rim[1] - g) * rr;\n      b += (rim[2] - b) * rr;\n      R[p] = r;\n      G[p] = g;\n      B[p] = b;\n    }\n  }\n  // Ticks down the left edge at each prime power: three LEDs for a prime,\n  // two for a square, one for a higher power.\n  for (const q of S.pp) {\n    const y = floor(((q[0] - 1) / (X - 1)) * H);\n    if (y \u003c 0 || y >= H) continue;\n    const len = q[2] === 1 ? 3 : q[2] === 2 ? 2 : 1;\n    for (let x = 0; x \u003c len; x++) {\n      const p = y * W + x;\n      R[p] = over[0];\n      G[p] = over[1];\n      B[p] = over[2];\n    }\n  }\n  // The critical line: every zero a dot at its height, dim until it is in.\n  for (let x = ZC; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      R[p] *= 0.5;\n      G[p] *= 0.5;\n      B[p] *= 0.5;\n    }\n  for (let m = 0; m \u003c NZ; m++) {\n    const yy = (GAM[m] / GTOP) * H - 0.5, y0 = floor(yy), fy = yy - y0;\n    const a = m \u003c n ? 1 : m === n ? 0.15 + 0.85 * f : 0.15, flash = m === n ? 1 : m === n - 1 ? 1 - f : 0;\n    for (let x = ZC; x \u003c W; x++)\n      for (let e = 0; e \u003c 2; e++) {\n        const y = y0 + e, wgt = e ? fy : 1 - fy;\n        if (y \u003c 0 || y >= H) continue;\n        const p = y * W + x;\n        R[p] += wgt * a * (dot[0] + flash);\n        G[p] += wgt * a * (dot[1] + flash);\n        B[p] += wgt * a * (dot[2] + flash);\n      }\n  }\n  // How many zeros are in, at the top right.\n  const digits = String(min(NZ, round(S.z)));\n  let x0 = ZC - 3 - (digits.length * 8 - 2);\n  for (const ch of digits) {\n    const bits = FONT[+ch];\n    for (let r = 0; r \u003c 5; r++)\n      for (let cc = 0; cc \u003c 3; cc++)\n        if ((bits >> (14 - r * 3 - cc)) & 1)\n          for (let a = 0; a \u003c 4; a++) {\n            const p = (3 + r * 2 + (a >> 1)) * W + x0 + cc * 2 + (a & 1);\n            R[p] = dot[0];\n            G[p] = dot[1];\n            B[p] = dot[2];\n          }\n    x0 += 8;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","layer":{"id":"layer-explicit-formula","type":"code","name":"explicit-formula","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Explicit Formula\n// Family:  number\n// Idea:    The prime staircase psi(x), x running down the rows and psi across, is rebuilt from the zeros of the zeta function one pair at a time: the bare line x - log 2 pi grows waves that sharpen into steps, each step snapping onto its prime power and its band lighting up as it does, while the zeros taken so far light up one by one down a strip at the right and a count at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Riemann's explicit formula (Bernhard Riemann, 1859), in von Mangoldt's form for the Chebyshev function psi (Hans von Mangoldt, 1895), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Reach=24..144, Tilt=0..1\n//\n// Knob 1: Hue. Turns the fill round the wheel, the shortfall colour a quarter turn on; gold stays gold. At 0 azure fill, violet where the sum falls short of the staircase and gold where it runs past; at 0.25 violet with orange, at 0.5 pale orange with green, at 0.75 green with azure. Orange and yellow fill is paled and dims less in its shaded bands, so it never reads brown.\n// Knob 2: Speed. How fast the zeros come in, each a little faster than the last: at 2 the first is in after 0.7 s, 10 by 4.2 s, 100 by 10.9 s and all 200 by 13.1 s; the staircase holds for 4 s, the zeros are taken out again in 1.9 s and the bare line rests 1 s, 20 s round. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Reach. How far x runs down the 128 rows, from 1 to Reach, with psi = 0 on column 3 and psi = Reach on column 57. At 24, the start, 13 prime powers, 5.6 rows to each unit of x and steps 1.6 to 7 LEDs wide; at 84 33 of them; at 144 47, the steps under 2 LEDs, and the staircase leans on the line x as the prime number theorem says it must. The 200 zeros resolve the staircase less sharply the further x runs.\n// Knob 4: Tilt. Takes Tilt times x away from both curves and widens the scale to match. Up to 0.06 the staircase itself; at 1 only psi(x) - x is left, a sawtooth that slides left one unit for each unit of x and jumps right by log p at each prime power, drawn 5 LEDs to the unit at Reach 24: the part of psi that the zeros alone make, their waves summing to the teeth.\n// Buttons: K1 tap takes every zero out and starts adding them again from the first.\n\nconst W = 64, H = 128, SS = 4, NS = H * SS, NZ = 200;\n// The imaginary parts of the first 200 zeros of the zeta function on the\n// critical line, rho = 1/2 + i gamma, to six places. 14.134725 is the first,\n// 396.381854 the 200th.\nconst GAM = [\n  14.134725, 21.022040, 25.010858, 30.424876, 32.935062, 37.586178, 40.918719, 43.327073, 48.005151, 49.773832,\n  52.970321, 56.446248, 59.347044, 60.831779, 65.112544, 67.079811, 69.546402, 72.067158, 75.704691, 77.144840,\n  79.337375, 82.910381, 84.735493, 87.425275, 88.809111, 92.491899, 94.651344, 95.870634, 98.831194, 101.317851,\n  103.725538, 105.446623, 107.168611, 111.029536, 111.874659, 114.320221, 116.226680, 118.790783, 121.370125, 122.946829,\n  124.256819, 127.516684, 129.578704, 131.087689, 133.497737, 134.756510, 138.116042, 139.736209, 141.123707, 143.111846,\n  146.000982, 147.422765, 150.053520, 150.925258, 153.024694, 156.112909, 157.597592, 158.849988, 161.188964, 163.030710,\n  165.537069, 167.184440, 169.094515, 169.911976, 173.411537, 174.754192, 176.441434, 178.377408, 179.916484, 182.207078,\n  184.874468, 185.598784, 187.228923, 189.416159, 192.026656, 193.079727, 195.265397, 196.876482, 198.015310, 201.264752,\n  202.493595, 204.189672, 205.394697, 207.906259, 209.576510, 211.690863, 213.347919, 214.547045, 216.169539, 219.067596,\n  220.714919, 221.430706, 224.007000, 224.983325, 227.421444, 229.337413, 231.250189, 231.987235, 233.693404, 236.524230,\n  237.769820, 239.555478, 241.049158, 242.823272, 244.070898, 247.136990, 248.101990, 249.573690, 251.014948, 253.069987,\n  255.306256, 256.380714, 258.610439, 259.874407, 260.805085, 263.573894, 265.557852, 266.614974, 267.921915, 269.970449,\n  271.494056, 273.459609, 275.587493, 276.452050, 278.250744, 279.229251, 282.465115, 283.211186, 284.835964, 286.667445,\n  287.911921, 289.579855, 291.846291, 293.558434, 294.965370, 295.573255, 297.979277, 299.840326, 301.649325, 302.696750,\n  304.864371, 305.728913, 307.219496, 310.109463, 311.165142, 312.427801, 313.985286, 315.475616, 317.734806, 318.853104,\n  321.160134, 322.144559, 323.466970, 324.862866, 327.443901, 329.033072, 329.953240, 331.474468, 333.645379, 334.211355,\n  336.841850, 338.339993, 339.858217, 341.042261, 342.054878, 344.661703, 346.347871, 347.272678, 349.316261, 350.408419,\n  351.878649, 353.488900, 356.017575, 357.151302, 357.952685, 359.743755, 361.289362, 363.331331, 364.736024, 366.212710,\n  367.993575, 368.968438, 370.050919, 373.061928, 373.864874, 375.825913, 376.324092, 378.436680, 379.872975, 381.484469,\n  383.443529, 384.956117, 385.861301, 387.222890, 388.846128, 391.456084, 392.245083, 393.427744, 395.582870, 396.381854,\n];\n// psi = 0 sits on column C0 and psi = Reach on column C0 + CW. The critical\n// line runs down columns ZC..ZC + 2, gamma 0 to GTOP over the 128 rows.\nconst C0 = 3, CW = 54, ZC = 61, GTOP = 400;\n// Zeros come in at dz/dt = ZB (ZA + z) a second at Speed 2: the first after\n// 0.7 s, 10 by 4.2 s, 100 by 10.9 s, all 200 by 13.1 s. Then they hold for\n// HOLD seconds, go out BACK times as fast and the bare line rests REST.\nconst ZA = 4, ZB = 0.3, HOLD = 4, BACK = 7, REST = 1;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst LOG2PI = Math.log(2 * Math.PI);\nconst { floor, min, max, abs, sqrt, log, exp, sin, cos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = [\n  0b111101101101111, 0b010110010010111, 0b111001111100111, 0b111001111001111, 0b101101111001001,\n  0b111100111001111, 0b111100111101111, 0b111001001001001, 0b111101111101111, 0b111101111001111,\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The prime powers p^k up to X, each with log p and k.\nfunction primePowers(X) {\n  const out = [];\n  for (let n = 2; n \u003c= X; n++) {\n    let p = 2;\n    while (n % p) p++;\n    let m = n, k = 0;\n    while (m % p === 0) (m /= p), k++;\n    if (m === 1) out.push([n, log(p), k]);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, reach: 0, tilt: 0, z: 0, stage: 0, clock: 0, nIn: 0,\n    xs: new Float64Array(NS), band: new Uint8Array(NS), base: new Float64Array(NS), tru: new Float64Array(NS), A: new Float64Array(NS),\n    v: new Float64Array(NS), lit: new Float32Array(64), err: new Float64Array(64), cnt: new Float64Array(64), bx: new Float64Array(64), cN: new Float32Array(SS), cT: new Float32Array(SS), pp: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    fill0: [0, 0, 0], fill1: [0, 0, 0], bg: [0, 0, 0], rim: [0, 0, 0], dot: [0, 0, 0], over: [0, 0, 0], short: [0, 0, 0],\n  };\n}\n\n// The pair rho, its conjugate at sample j: 2 Re(x^rho / rho)\n// = 2 sqrt(x) (cos(g L) / 2 + g sin(g L)) / (1/4 + g^2), L = log x.\nfunction term(S, n, j) {\n  const g = GAM[n], x = S.xs[j], L = log(x);\n  return (2 * sqrt(x) * (0.5 * cos(g * L) + g * sin(g * L))) / (0.25 + g * g);\n}\n\n// Zero n fully in (sign 1) or taken out (sign -1).\nfunction addZero(S, n, sign) {\n  for (let j = 0; j \u003c NS; j++) S.A[j] += sign * term(S, n, j);\n}\n\nfunction setReach(S, X) {\n  S.reach = X;\n  S.pp = primePowers(X);\n  for (let j = 0; j \u003c NS; j++) {\n    // Row y holds x from 1 + y (X - 1) / 128 to one row further on.\n    const x = 1 + ((j + 0.5) / NS) * (X - 1);\n    S.xs[j] = x;\n    S.base[j] = x - LOG2PI - 0.5 * log(1 - 1 / (x * x));\n    let p = 0, c = 0;\n    for (const q of S.pp) if (q[0] \u003c= x) (p += q[1]), c++;\n    S.tru[j] = p;\n    S.band[j] = c;\n  }\n  S.A.fill(0);\n  S.lit.fill(0);\n  for (let n = 0; n \u003c S.nIn; n++) addZero(S, n, 1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 24, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  // Up to 0.06 upright as it is, so the opening shows the staircase itself.\n  S.tilt = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const X = round(cl(k[2], 24, 144));\n  if (X !== S.reach) setReach(S, X);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.stage = 0;\n    S.z = 0;\n  }\n  const sp = (d * S.speed) / 2;\n  if (S.stage === 0) {\n    S.z += sp * ZB * (ZA + S.z);\n    if (S.z >= NZ) (S.z = NZ), (S.stage = 1), (S.clock = 0);\n  } else if (S.stage === 1) {\n    S.clock += sp;\n    if (S.clock > HOLD) S.stage = 2;\n  } else if (S.stage === 2) {\n    S.z -= sp * ZB * BACK * (ZA + S.z);\n    if (S.z \u003c= 0) (S.z = 0), (S.stage = 3), (S.clock = 0);\n  } else {\n    S.clock += sp;\n    if (S.clock > REST) S.stage = 0;\n  }\n  const n = min(NZ, floor(S.z));\n  while (S.nIn \u003c n) addZero(S, S.nIn++, 1);\n  while (S.nIn > n) addZero(S, --S.nIn, -1);\n  // The sum at every sample, the fading zero in by its fraction.\n  const { v, xs, base, tru, A, err, cnt, bx, band, lit } = S, f = n \u003c NZ ? S.z - n : 0;\n  for (let j = 0; j \u003c NS; j++) v[j] = base[j] - A[j] - (f > 0 ? f * term(S, n, j) : 0);\n  // A band has snapped onto its step when the sum's mean distance from the\n  // staircase across it is under 0.04 sqrt(x); it starts to light at 0.12.\n  const nb = S.pp.length + 1;\n  err.fill(0, 0, nb);\n  cnt.fill(0, 0, nb);\n  bx.fill(0, 0, nb);\n  for (let j = 0; j \u003c NS; j++) {\n    const q = band[j];\n    err[q] += abs(v[j] - tru[j]);\n    bx[q] += xs[j];\n    cnt[q]++;\n  }\n  const ease = 1 - exp(-d / 0.3);\n  for (let q = 0; q \u003c nb; q++) {\n    const r = cnt[q] ? err[q] / cnt[q] / sqrt(bx[q] / cnt[q]) : 1, u = cl((0.12 - r) / 0.08, 0, 1);\n    lit[q] += (u * u * (3 - 2 * u) - lit[q]) * ease;\n  }\n}\n\n// A colour that would read brown or olive, a dark orange or yellow, is\n// paled toward grey and lifted.\nfunction tone(h, s, v, out) {\n  const hh = h - floor(h), warm = cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1) * (1 - v);\n  hsv(h, s * (1 - 0.9 * warm), v * (1 + 1.1 * warm), out);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, v, xs, tru, cN, cT, fill0, fill1, bg, rim, dot, over, short } = S;\n  const X = S.reach, n = S.nIn, f = n \u003c NZ ? S.z - n : 0, t = S.tilt;\n  // Columns: psi - t x, so at Tilt 1 only what the zeros add is left, the\n  // scale closing in from the whole of psi to about 2.2 sqrt(Reach).\n  const sc = CW / ((1 - t) * X + t * 2.2 * sqrt(X)), c0 = C0 + 35 * t;\n\n  // Orange and yellow fill dims less, so its shaded bands never read brown.\n  const h = S.hue + H0, hh = h - floor(h), keep = 1 - 0.7 * cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1);\n  tone(h, 0.8, 0.6, fill0);\n  tone(h + 0.05, 0.75, 1, fill1);\n  hsv(0.64, 0.45, 0.15, bg);\n  tone(h + 0.25, 0.65, 0.8, short);\n  hsv(h - 0.03, 0.2, 1, rim);\n  hsv(h, 0.35, 1, dot);\n  over[0] = 1;\n  over[1] = 0.8;\n  over[2] = 0.45;\n  // The newest zero's wave, faintly in the fill while it comes in.\n  const wave = n \u003c NZ ? 0.1 * sin(PI * f) * sqrt(GAM[0] / GAM[n]) : 0, gw = n \u003c NZ ? GAM[n] : 0;\n\n  let prevC = c0 + (v[0] - t * xs[0]) * sc;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1);\n    const fr = fill0[0] + (fill1[0] - fill0[0]) * u, fg = fill0[1] + (fill1[1] - fill0[1]) * u, fb = fill0[2] + (fill1[2] - fill0[2]) * u;\n    const bk = 0.8 + 0.4 * u;\n    // Where the curve runs in this row: the span between the last sample of\n    // the row above and every sample of this one.\n    let lo = prevC, hi = prevC;\n    for (let q = 0; q \u003c SS; q++) {\n      const j = y * SS + q, cc = c0 + (v[j] - t * xs[j]) * sc;\n      cN[q] = cc;\n      cT[q] = c0 + (tru[j] - t * xs[j]) * sc;\n      if (cc \u003c lo) lo = cc;\n      if (cc > hi) hi = cc;\n      prevC = cc;\n    }\n    // Between one prime power and the next the fill is a band, every other\n    // band a little lighter, so the gaps between them show as band heights,\n    // and a band stays dim until the sum has snapped onto its step.\n    const bq = S.band[y * SS + 2];\n    const wv = (1 + wave * sin(gw * log(xs[y * SS + 2]))) * (bq & 1 ? 1.08 : 0.92) * (0.45 + 0.55 * S.lit[bq]);\n    const edge = (cN[0] + cN[1] + cN[2] + cN[3]) / 4;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Under both the sum and the staircase: the fill. Under the sum alone,\n      // where it runs past the staircase: gold. Under the staircase alone,\n      // where the sum falls short: the second colour. Under neither: dark.\n      let both = 0, ov = 0, sh = 0;\n      for (let q = 0; q \u003c SS; q++) {\n        const a = cl(cN[q] - x, 0, 1), b = cl(cT[q] - x, 0, 1), m = a \u003c b ? a : b;\n        both += m;\n        ov += a - m;\n        sh += b - m;\n      }\n      both /= SS;\n      ov /= SS;\n      sh /= SS;\n      const no = 1 - both - ov - sh, gl = 1 - (1 - wv * (0.55 + 0.45 * exp((x - edge) / 9))) * keep;\n      let r = bg[0] * bk * no + fr * gl * both + over[0] * ov + short[0] * sh;\n      let g = bg[1] * bk * no + fg * gl * both + over[1] * ov + short[1] * sh;\n      let b = bg[2] * bk * no + fb * gl * both + over[2] * ov + short[2] * sh;\n      // The curve itself: every LED its span touches.\n      const rr = cl(1 - max(lo - (x + 1), x - hi), 0, 1) * 0.75;\n      r += (rim[0] - r) * rr;\n      g += (rim[1] - g) * rr;\n      b += (rim[2] - b) * rr;\n      R[p] = r;\n      G[p] = g;\n      B[p] = b;\n    }\n  }\n  // Ticks down the left edge at each prime power: three LEDs for a prime,\n  // two for a square, one for a higher power.\n  for (const q of S.pp) {\n    const y = floor(((q[0] - 1) / (X - 1)) * H);\n    if (y \u003c 0 || y >= H) continue;\n    const len = q[2] === 1 ? 3 : q[2] === 2 ? 2 : 1;\n    for (let x = 0; x \u003c len; x++) {\n      const p = y * W + x;\n      R[p] = over[0];\n      G[p] = over[1];\n      B[p] = over[2];\n    }\n  }\n  // The critical line: every zero a dot at its height, dim until it is in.\n  for (let x = ZC; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      R[p] *= 0.5;\n      G[p] *= 0.5;\n      B[p] *= 0.5;\n    }\n  for (let m = 0; m \u003c NZ; m++) {\n    const yy = (GAM[m] / GTOP) * H - 0.5, y0 = floor(yy), fy = yy - y0;\n    const a = m \u003c n ? 1 : m === n ? 0.15 + 0.85 * f : 0.15, flash = m === n ? 1 : m === n - 1 ? 1 - f : 0;\n    for (let x = ZC; x \u003c W; x++)\n      for (let e = 0; e \u003c 2; e++) {\n        const y = y0 + e, wgt = e ? fy : 1 - fy;\n        if (y \u003c 0 || y >= H) continue;\n        const p = y * W + x;\n        R[p] += wgt * a * (dot[0] + flash);\n        G[p] += wgt * a * (dot[1] + flash);\n        B[p] += wgt * a * (dot[2] + flash);\n      }\n  }\n  // How many zeros are in, at the top right.\n  const digits = String(min(NZ, round(S.z)));\n  let x0 = ZC - 3 - (digits.length * 8 - 2);\n  for (const ch of digits) {\n    const bits = FONT[+ch];\n    for (let r = 0; r \u003c 5; r++)\n      for (let cc = 0; cc \u003c 3; cc++)\n        if ((bits >> (14 - r * 3 - cc)) & 1)\n          for (let a = 0; a \u003c 4; a++) {\n            const p = (3 + r * 2 + (a >> 1)) * W + x0 + cc * 2 + (a & 1);\n            R[p] = dot[0];\n            G[p] = dot[1];\n            B[p] = dot[2];\n          }\n    x0 += 8;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Reach=24..144, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the fill round the wheel, the shortfall colour a quarter turn on; gold stays gold. At 0 azure fill, violet where the sum falls short of the staircase and gold where it runs past; at 0.25 violet with orange, at 0.5 pale orange with green, at 0.75 green with azure. Orange and yellow fill is paled and dims less in its shaded bands, so it never reads brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the zeros come in, each a little faster than the last: at 2 the first is in after 0.7 s, 10 by 4.2 s, 100 by 10.9 s and all 200 by 13.1 s; the staircase holds for 4 s, the zeros are taken out again in 1.9 s and the bare line rests 1 s, 20 s round. At 0.2 ten times slower, at 3 one and a half times faster."},{"name":"Reach","min":24,"max":144,"about":"How far x runs down the 128 rows, from 1 to Reach, with psi = 0 on column 3 and psi = Reach on column 57. At 24, the start, 13 prime powers, 5.6 rows to each unit of x and steps 1.6 to 7 LEDs wide; at 84 33 of them; at 144 47, the steps under 2 LEDs, and the staircase leans on the line x as the prime number theorem says it must. The 200 zeros resolve the staircase less sharply the further x runs."},{"name":"Tilt","min":0,"max":1,"about":"Takes Tilt times x away from both curves and widens the scale to match. Up to 0.06 the staircase itself; at 1 only psi(x) - x is left, a sawtooth that slides left one unit for each unit of x and jumps right by log p at each prime power, drawn 5 LEDs to the unit at Reach 24: the part of psi that the zeros alone make, their waves summing to the teeth."}],"start":[0,2,24,0.06],"measures":{"motion":0.0929,"detail":0.028,"edges":0.4504,"complexity":0.7997,"coverage":0.9982,"colour":0.172,"drift":0.1028},"knobResponse":[0.141,0.0429,0.064,0.081]},{"slug":"ferris-wheel","title":"Ferris Wheel","family":"fair","round":25,"note":"밤 호숫가에서 지름 59 LED 의 관람차가 돌고, 곤돌라는 바퀴가 돌아도 늘 똑바로 매달려 있어요. 살과 테두리의 불빛이 쇼 여섯 가지를 6.5초씩 이어 가고, 호수가 바퀴와 불빛을 일렁이며 비춰요. K4 Wind 를 올리면 구름이 몰려오고 물그림자가 긴 빛줄기로 부서지며, 버튼은 다음 쇼로 넘겨요.","idea":"A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.","buttons":"K1 tap starts the next show at once.","code":"// ===== Patternflow pattern =====\n// Title:   Ferris Wheel\n// Family:  fair\n// Idea:    A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the light shows of the observation wheels on lake and river fronts\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1\n//\n// Knob 1: Lights. Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet.\n// Knob 2: Speed. How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower.\n// Knob 3: Spokes. How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one.\n// Knob 4: Wind. Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light.\n// Buttons: K1 tap starts the next show at once.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst fr = (v) => v - floor(v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The wheel: hub, outer rim with the lights, inner rim, and the truss between.\nconst CX = 32, CY = 38.5, R = 29.5, RI = 26.3, HUB = 3.6;\n// The first row of the lake, which is the line the scene mirrors in, the\n// promenade the legs stand on, and how much the reflection is squeezed.\nconst SEA = 87, FOOT = 84, SQ = 0.72;\n// Light bins along each spoke and round the rim; the shows paint these.\nconst NB = 24, NR = 120;\nconst SHOWS = 6, DUR = 6.5, FADE = 0.35;\nconst CLOUD = [12, 14, 28], LAKE = [3, 7, 22], TINT = [0.85, 0.92, 1];\n// A sine table for the ripples, which take five sines an LED.\nconst SN = F32(1024).map((_, i) => sin((i * TAU) / 1024));\nconst sn = (v) => SN[(v * 162.97) & 1023];\nconst STEEL = [26, 28, 42], LEG = [22, 24, 38], WARM = [255, 214, 150], WHITE = [255, 250, 240];\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, wt: 0, co: 0, rot: 0.2, st: 0, sh: 0, prev: -1, ps: 0, ns: 12, ng: 12, wind: 0.06, h: 0.53,\n    f: F32(N * 3), cn: F32(256 * 76), sky: F32(SEA * W * 3), gm: F32(SEA * W), fg: F32(N * 3), fm: F32(N), ga: F32(N * 3),\n    sp: F32(32 * NB * 3), rm: F32(NR * 3), hb: [0, 0, 0], sp2: F32(32 * NB * 3), rm2: F32(NR * 3), hb2: [0, 0, 0],\n    stars: [], people: [], cab: [],\n  });\n  // Night sky, paler towards the horizon, and the hills behind the far shore\n  // with a few houses lit.\n  for (let y = 0; y \u003c SEA; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y / SEA, o = (y * W + x) * 3, hy = 77 + 2.4 * sin(x * 0.11 + 0.7) + 1.4 * sin(x * 0.29 + 2);\n      let c = [3 + 14 * v * v, 5 + 18 * v * v, 22 + 46 * v * v];\n      if (y > hy) c = [7, 8, 18];\n      if (y > hy + 1 && hash(x, y) \u003c 0.025) c = [120, 96, 60];\n      P.sky.set(c, o);\n      // Where the wheel's light lands on the haze: round the wheel and low over the shore.\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2);\n      P.gm[y * W + x] = 0.75 * exp(-(max(0, r - 18) ** 2) / 420) + 0.45 * exp(-(SEA - y) / 22);\n    }\n  // Cloud: three octaves of value noise 256 wide, so it can scroll round.\n  const seed = floor(rnd() * 999);\n  const vn = (x, y, cx, cy, s) => {\n    const nx = 256 / cx, gx = x / cx, gy = y / cy, ix = floor(gx), iy = floor(gy), u = sm(0, 1, gx - ix), v = sm(0, 1, gy - iy);\n    const h = (i, j) => hash(((ix + i) % nx) + s, iy + j);\n    return mix(mix(h(0, 0), h(1, 0), u), mix(h(0, 1), h(1, 1), u), v);\n  };\n  for (let y = 0; y \u003c 76; y++) for (let x = 0; x \u003c 256; x++) P.cn[y * 256 + x] = 0.55 * vn(x, y, 32, 9, seed) + 0.3 * vn(x, y, 16, 5, seed + 7) + 0.15 * vn(x, y, 8, 3, seed + 13);\n  for (let i = 0; i \u003c 36; i++) P.stars.push([floor(rnd() * W), floor(rnd() * 46), 40 + rnd() * 70, rnd() * TAU, 0.6 + rnd()]);\n  // The promenade, the boarding platform with its stairs, two lamps and the\n  // ticket booth, kept as one layer with its own coverage.\n  const fg = (x, y, c, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    P.fg.set(c, (y * W + x) * 3);\n    P.fm[y * W + x] = a;\n  };\n  const glow = (gx, gy, c, k, s) => {\n    for (let y = max(0, gy - 12); y \u003c min(SEA, gy + 12); y++)\n      for (let x = max(0, gx - 12); x \u003c min(W, gx + 12); x++) {\n        const g = k * exp(-((x - gx) ** 2 + (y - gy) ** 2) / s);\n        for (let n = 0; n \u003c 3; n++) P.ga[(y * W + x) * 3 + n] += c[n] * g;\n      }\n  };\n  for (let x = 0; x \u003c W; x++) {\n    fg(x, 84, [34, 28, 32]);\n    fg(x, 85, [28, 24, 30]);\n    fg(x, 86, [64, 60, 70]);\n  }\n  for (let x = 22; x \u003c= 42; x++) fg(x, 77, [78, 74, 92]), fg(x, 78, [30, 30, 42]);\n  for (const x of [24, 32, 40]) for (let y = 79; y \u003c 84; y++) fg(x, y, [22, 22, 32]);\n  for (let i = 0; i \u003c 6; i++) fg(21 - i, 78 + i, [60, 56, 70]), fg(21 - i, 79 + i, [26, 24, 34]);\n  for (const lx of [5, 46]) {\n    for (let y = 76; y \u003c 84; y++) fg(lx, y, [36, 36, 48]);\n    fg(lx, 75, [255, 230, 180]);\n    fg(lx - 1, 75, [120, 100, 70]);\n    fg(lx + 1, 75, [120, 100, 70]);\n    glow(lx, 76, WARM, 0.32, 14);\n  }\n  for (let x = 53; x \u003c= 62; x++) {\n    const st = ((x - 53) >> 1) & 1 ? [226, 218, 206] : [200, 36, 56];\n    fg(x, 72, st);\n    if (!(x & 1)) fg(x, 73, st);\n    for (let y = 74; y \u003c 84; y++) fg(x, y, x === 53 || x === 62 ? [40, 22, 30] : [70, 34, 46]);\n  }\n  for (let y = 75; y \u003c= 78; y++) for (let x = 55; x \u003c= 60; x++) fg(x, y, [255, 196, 120].map((v) => v * (0.85 - 0.08 * (y - 75))));\n  for (const [x, y] of [[58, 76], [57, 78], [58, 78], [59, 78]]) fg(x, y, [40, 24, 24]);\n  fg(58, 77, [56, 32, 30]);\n  for (let x = 54; x \u003c= 61; x++) fg(x, 79, [160, 116, 70]), fg(x, 81, (x & 1) ? [240, 200, 90] : [110, 70, 40]);\n  glow(58, 80, [255, 180, 100], 0.28, 18);\n  // People on the promenade, a queue at the foot of the stairs and two who walk.\n  for (const [x, w] of [[9, 0], [14, 0], [17, 0], [49, 0], [27, 2.2], [40, -1.6]])\n    P.people.push({ x: x + 0.5, w, c: hsv(rnd(), 0.5, 0.25 + 0.15 * rnd()), sk: rnd() \u003c 0.5 });\n  for (let i = 0; i \u003c 32; i++) P.cab.push([0.55 + 0.45 * rnd(), rnd() \u003c 0.4]);\n}\n\nfunction next(P) {\n  P.prev = P.sh;\n  P.ps = P.st;\n  P.sh = (P.sh + 1) % SHOWS;\n  P.st = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  const v = cl(k[1], 0.2, 3) / 2;\n  let ns = round(cl(k[2], 12, 32));\n  if (ns > 18) ns += ns & 1;\n  Object.assign(P, { h: fr(0.53 + cl(k[0], 0, 1)), ns, ng: ns > 18 ? ns / 2 : ns, wind: cl(k[3], 0, 1) });\n  P.t += dt;\n  P.wt += dt * v * (0.7 + 1.5 * P.wind);\n  P.co += dt * v * (1 + 10 * P.wind);\n  P.rot += (dt * v * TAU) / 40;\n  P.st += dt * v;\n  if ((input.btnPressed && input.btnPressed[0]) || P.st >= DUR) next(P);\n  for (const q of P.people)\n    if (q.w) {\n      q.x += q.w * dt * v;\n      if (q.x > W + 3) q.x = -3;\n      if (q.x \u003c -3) q.x = W + 3;\n    }\n}\n\n// One show at its time s paints the spoke bins, the rim bins and the hub.\nfunction paint(P, sh, s, SP, RM, HB) {\n  const ns = P.ns, [A, B, C] = P.pal, rot = P.rot;\n  const spk = (k, b, c, I) => {\n    const o = (k * NB + b) * 3;\n    (SP[o] = c[0] * I), (SP[o + 1] = c[1] * I), (SP[o + 2] = c[2] * I);\n  };\n  const rim = (j, c, I) => ((RM[j * 3] = c[0] * I), (RM[j * 3 + 1] = c[1] * I), (RM[j * 3 + 2] = c[2] * I));\n  const lerp = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n  const hub = (c, I) => ((HB[0] = c[0] * I), (HB[1] = c[1] * I), (HB[2] = c[2] * I));\n  const uB = (b) => (b + 0.5) / NB;\n  if (sh === 0) {\n    // Light runs out along the spokes, brightest where a beam sweeps round\n    // against the turn; marquee bulbs chase round the rim and three white\n    // comets run through them.\n    const sw = fr(-s * 0.3), mq = floor(s * 9);\n    for (let k = 0; k \u003c ns; k++) {\n      const dl = fr(k / ns - sw), bm = exp(-dl / 0.22), wt = 0.5 * exp(-dl * ns * 1.5);\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), ds = exp(-(((fr(u * 2 - s * 1.1) - 0.5) / 0.17) ** 2));\n        spk(k, b, lerp(lerp(C, A, u), WHITE, wt), 0.14 + 0.25 * bm + 0.61 * ds * (0.45 + 0.55 * bm));\n      }\n    }\n    for (let j = 0; j \u003c NR; j++) {\n      let I = 0;\n      for (let m = 0; m \u003c 3; m++) I = max(I, exp(-fr(fr(s * 0.42 + m / 3) - j / NR) / 0.04));\n      rim(j, lerp(B, WHITE, I), max(I, (floor(j / 2) + mq) % 3 ? 0.22 : 0.9));\n    }\n    hub(A, 0.8);\n  } else if (sh === 1) {\n    // A colour wipe across the whole wheel, lit full, with a white front.\n    const X = CX + 35 * cos((PI * s) / 3.25), f0 = 0.88 * sm(0, 0.5, s);\n    const col = (x) => lerp(lerp(A, B, sm(X - 2.5, X + 2.5, x)), WHITE, 0.7 * exp(-(((x - X) / 2.2) ** 2)));\n    for (let k = 0; k \u003c ns; k++) {\n      const c = cos(rot + (TAU * k) / ns);\n      for (let b = 0; b \u003c NB; b++) spk(k, b, col(CX + (HUB + uB(b) * (R - HUB)) * c), f0);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, col(CX + R * cos(rot + (TAU * (j + 0.5)) / NR)), f0);\n    hub(col(CX), f0);\n  } else if (sh === 2) {\n    // A spiral arm winds out from the hub and round the wheel.\n    for (let k = 0; k \u003c ns; k++)\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), v = fr(u * 0.9 + k / ns - s * 0.45);\n        spk(k, b, lerp(B, C, u), 0.07 + 0.93 * exp(-(((v - 0.5) / 0.2) ** 2)));\n      }\n    for (let j = 0; j \u003c NR; j++) rim(j, A, fr((j / NR) * ns * 0.5 - s * 0.9) \u003c 0.5 ? 0.95 : 0.12);\n    hub(B, 0.9);\n  } else if (sh === 3) {\n    // Spoke after spoke lights up round the wheel and holds before it blinks out.\n    const n = (s / 3.6) * ns, blink = s > 4.8 && fr((s - 4.8) * 2.6) > 0.5;\n    for (let k = 0; k \u003c ns; k++) {\n      const I = blink ? 0.04 : k \u003c floor(n) ? 0.9 : k === floor(n) ? fr(n) : 0.05;\n      for (let b = 0; b \u003c NB; b++) spk(k, b, k === floor(n) ? WHITE : k & 1 ? B : A, I);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, C, blink ? 0.04 : j / NR \u003c n / ns ? 0.95 : 0.08);\n    hub(WHITE, blink ? 0.1 : 0.85);\n  } else if (sh === 4) {\n    // Rings run out from the hub, each a colour, and flash the rim on arriving.\n    SP.fill(0, 0, ns * NB * 3);\n    let Ir = 0.08, Ih = 0.2, cr = A;\n    for (let m = 0; m \u003c 3; m++) {\n      // Rings are born in the order A, C, B, so each takes the next colour.\n      const f = fr(s * 0.4 + m / 3), c = P.pal[m], e = exp(-(((1 - f) / 0.06) ** 2));\n      for (let k = 0; k \u003c ns; k++)\n        for (let b = 0; b \u003c NB; b++) {\n          const I = exp(-(((uB(b) - f) / 0.07) ** 2)), o = (k * NB + b) * 3;\n          for (let n = 0; n \u003c 3; n++) SP[o + n] += c[n] * I;\n        }\n      if (e > Ir) (Ir = e), (cr = c);\n      Ih = max(Ih, exp(-((f / 0.08) ** 2)));\n    }\n    for (let k = 0; k \u003c ns * NB * 3; k++) SP[k] += 14;\n    for (let j = 0; j \u003c NR; j++) rim(j, cr, max(0.1, Ir));\n    hub(WHITE, Ih);\n  } else {\n    // Every spoke its own colour, the rainbow turning round, with sparkles.\n    const tw = floor(s * 7);\n    for (let k = 0; k \u003c ns; k++) {\n      const c = hsv(P.h + fr(k / ns + s * 0.12), 0.85, 1);\n      for (let b = 0; b \u003c NB; b++) hash(k * NB + b, tw) \u003c 0.07 ? spk(k, b, WHITE, 1) : spk(k, b, c, 0.72);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, hsv(P.h + fr(j / NR - s * 0.25), 0.8, 1), 0.75);\n    hub(WHITE, 0.8);\n  }\n}\n\nlet F;\nconst add = (x, y, c, k) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] += c[n] * k;\n};\nconst put = (x, y, c, k = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// A leg of the A-frame from the hub to the promenade, a dark girder.\nfunction leg(ax, ay, bx, by, hw, edge) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy;\n  for (let y = floor(ay); y \u003c= by; y++)\n    for (let x = max(0, floor(min(ax, bx) - 2)); x \u003c= min(W - 1, max(ax, bx) + 2); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, d = sqrt(ex * ex + ey * ey);\n      const w = cl(hw + 0.5 - d, 0, 1);\n      if (w \u003c= 0) continue;\n      const o = (y * W + x) * 3, lit = 0.5 + 0.5 * cl((d - hw + 0.6) * 1.5, 0, 1);\n      const fl = 0.32 * exp(-(FOOT - y) / 9);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], LEG[n] + edge[n] * lit + WARM[n] * fl, w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.f) return;\n  F = P.f;\n  const ns = P.ns, rot = P.rot, t = P.t;\n  P.pal = [hsv(P.h, 0.85, 1), hsv(P.h + 0.42, 0.8, 1), hsv(P.h + 0.2, 0.75, 1)];\n  const SP = P.sp, RM = P.rm, HB = P.hb;\n  paint(P, P.sh, P.st, SP, RM, HB);\n  if (P.prev >= 0 && P.st \u003c FADE) {\n    const q = P.st / FADE;\n    paint(P, P.prev, P.ps + P.st, P.sp2, P.rm2, P.hb2);\n    for (let i = 0; i \u003c ns * NB * 3; i++) SP[i] = mix(P.sp2[i], SP[i], q);\n    for (let i = 0; i \u003c NR * 3; i++) RM[i] = mix(P.rm2[i], RM[i], q);\n    for (let n = 0; n \u003c 3; n++) HB[n] = mix(P.hb2[n], HB[n], q);\n  }\n  // The wheel's light in the haze: the mean colour of every bin.\n  const gc = [0, 0, 0], ws = ((R - HUB) / NB) * ns, wr = (TAU * R) / NR;\n  for (let i = 0; i \u003c ns * NB; i++) for (let n = 0; n \u003c 3; n++) gc[n] += SP[i * 3 + n] * ws;\n  for (let j = 0; j \u003c NR; j++) for (let n = 0; n \u003c 3; n++) gc[n] += RM[j * 3 + n] * wr * ns;\n  for (let n = 0; n \u003c 3; n++) gc[n] /= ns * NB * ws + NR * wr * ns;\n  // The haze takes a dim show nearly whole and a bright one by less.\n  const gk = 0.62 / (1 + (1.6 * max(...gc)) / 255);\n  for (let n = 0; n \u003c 3; n++) gc[n] *= gk;\n\n  // Sky, haze, stars and a thin moon.\n  for (let i = 0, o = 0; i \u003c SEA * W; i++, o += 3) {\n    const g = P.gm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = P.sky[o + n] + gc[n] * g;\n  }\n  for (const [x, y, b, ph, sp] of P.stars) add(x, y, [1, 1, 1.15], b * (0.65 + 0.35 * sin(t * sp + ph)));\n  for (let y = 3; y \u003c 11; y++)\n    for (let x = 51; x \u003c 60; x++) {\n      const a = (x + 0.5 - 55) ** 2 + (y + 0.5 - 7) ** 2, b = (x + 0.5 - 56.6) ** 2 + (y + 0.5 - 6) ** 2;\n      const k = cl(3.4 - sqrt(a), 0, 1) * cl(sqrt(b) - 2.9, 0, 1);\n      if (k > 0) add(x, y, [236, 228, 196], k);\n    }\n  // Clouds come in on the wind, lit from below by the wheel.\n  const wd = P.wind, th = 0.68 - 0.4 * wd, co = floor(P.co), cf = P.co - co;\n  for (let y = 0; y \u003c 76; y++) {\n    const hf = sm(76, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const c0 = y * 256, n = mix(P.cn[c0 + ((x + co) & 255)], P.cn[c0 + ((x + co + 1) & 255)], cf), dn = sm(th - 0.04, th + 0.22, n) * hf * 0.7;\n      if (dn \u003c= 0) continue;\n      const i = y * W + x, o = i * 3, g = 3 * (P.gm[i] + 0.2);\n      for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], CLOUD[k] + gc[k] * g, dn);\n    }\n  }\n\n  // Spokes, truss and rims, lit from the show's bins.\n  const st = STEEL.map((v, n) => v + gc[n] * 0.5);\n  for (let y = 7; y \u003c= 70; y++) {\n    const dy = y + 0.5 - CY;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - CX, r2 = dx * dx + dy * dy;\n      if (r2 > (R + 1.4) ** 2) continue;\n      const r = sqrt(r2), o = (y * W + x) * 3;\n      let a = (atan2(dy, dx) - rot) / TAU;\n      a -= floor(a);\n      const q = a * ns, kk = round(q), d = (abs(q - kk) * TAU * r) / ns;\n      const wsp = r > HUB && r \u003c R ? cl(1.25 - 1.5 * d, 0, 1) : 0;\n      const wrm = cl(1.25 - 1.5 * abs(r - R), 0, 1);\n      let wst = cl(1 - 1.6 * abs(r - RI), 0, 1) * 0.8;\n      if (r > RI && r \u003c R) {\n        const z = abs(fr(a * ns * 2) - 0.5) * 2, tt = (r - RI) / (R - RI);\n        wst = max(wst, cl(1 - 2.2 * abs(z - tt), 0, 1) * 0.7);\n      }\n      const occ = max(wsp, wrm, wst);\n      if (occ \u003c= 0) continue;\n      const so = ((kk % ns) * NB + min(NB - 1, floor(((r - HUB) / (R - HUB)) * NB))) * 3, ro = (floor(a * NR) % NR) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = F[o + n] * (1 - 0.85 * occ) + st[n] * occ + SP[so + n] * wsp + RM[ro + n] * wrm;\n    }\n  }\n\n  // The gondolas hang level from the rim, swinging in the wind.\n  const [A, B, C] = P.pal, step = ns / P.ng;\n  for (let i = 0; i \u003c P.ng; i++) {\n    const ang = rot + (TAU * i * step) / ns, px = CX + R * cos(ang), py = CY + R * sin(ang);\n    const sw = wd * (0.45 * sin(t * 1.8 + i * 1.1) + 0.25 * sin(t * 3.1 + i * 2.3)) + 0.05 * sin(t * 1.4 + i);\n    const gx = round(px - 0.5), gy = round(py - 0.5), cx = round(px - 0.5 + 3.2 * sin(sw)), [wk, empty] = P.cab[i];\n    const body = [A, B, C][i % 3].map((v, n) => v * 0.62 + gc[n]);\n    put(gx, gy, [150, 150, 170]);\n    put(round(px - 0.5 + 1.2 * sin(sw)), gy + 1, [60, 60, 76]);\n    for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + 2, body), put(cx + dx, gy + 5, body, 0.75);\n    for (let dy = 3; dy \u003c= 4; dy++) {\n      put(cx - 2, gy + dy, body, 0.85);\n      put(cx + 2, gy + dy, body, 0.85);\n      for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + dy, WARM, (empty || dx || dy > 3 ? 0.78 : 0.2) * wk);\n    }\n  }\n\n  // The A-frame in front of the wheel, and the hub on it.\n  const edge = gc.map((v) => v * 1.4);\n  leg(CX, CY, 12, FOOT, 0.85, edge);\n  leg(CX, CY, 52, FOOT, 0.85, edge);\n  for (let y = 33; y \u003c= 44; y++)\n    for (let x = 26; x \u003c= 38; x++) {\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2), k = cl(HUB + 0.5 - r, 0, 1);\n      if (k \u003c= 0) continue;\n      const o = (y * W + x) * 3, core = exp(-(r * r) / 2.5);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], 30 + HB[n] * (1 - r / 6) + WHITE[n] * core * 0.6, k);\n    }\n\n  // The shore: promenade, platform, lamps, booth, the warm light they throw.\n  for (let i = 70 * W, o = i * 3; i \u003c SEA * W; i++, o += 3) {\n    const m = P.fm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], P.fg[o + n], m) + P.ga[o + n];\n  }\n  for (let x = 23; x \u003c= 41; x += 2) put(x, 76, B, floor(t * 4 - x / 2) % 3 ? 0.35 : 0.85);\n  for (let x = 53; x \u003c= 62; x += 2) put(x, 71, WARM, floor(t * 5 + x / 2) % 2 ? 0.3 : 1);\n  for (const q of P.people) {\n    const x = floor(q.x), gait = q.w ? floor(q.x * 1.5) & 1 : 0;\n    put(x, 79, q.sk ? [150, 110, 86] : [70, 52, 44]);\n    for (let y = 80; y \u003c= 82; y++) put(x, y, q.c), put(x + 1, y, q.c, 0.8);\n    put(x + gait, 83, [16, 16, 24]);\n    put(x + 1 - gait, 83, [16, 16, 24], 0.7);\n  }\n\n  // The lake: the scene above, mirrored, squeezed and broken by the ripples.\n  const wt = P.wt, gw = 0.55 + 0.35 * wd, pw = 3 - 1.2 * wd, sp = 0.5 + 6 * wd;\n  const row = (ys, sx) => (cl(round(ys), 0, SEA - 1) * W + sx) * 3;\n  for (let y = SEA; y \u003c H; y++) {\n    const d = y + 0.5 - SEA, dn = d / (H - SEA), amp = (0.35 + 1.9 * wd) * (0.45 + dn), rf = 0.7 - 0.3 * dn;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = amp * (0.6 * sn(d * 0.75 - wt * 1.9 + x * 0.04) + 0.4 * sn(d * 2.3 + x * 0.37 - wt * 3.3));\n      const ys = SEA - 0.5 - d / SQ + amp * 0.45 * sn(x * 0.45 + d * 1.1 - wt * 2.6), sx = cl(round(x + ox), 0, W - 1);\n      const hl = (0.5 + 0.5 * sn(d * 1.7 - wt * 1.4 + 1.6 * sn(x * 0.15 + d * 0.3 + wt * 0.5))) ** pw, o = (y * W + x) * 3;\n      // Choppy water stretches each light into a streak: the brightest of the\n      // rows a wave face can show here, above the mirror point and below it.\n      const s1 = row(ys, sx), s0 = row(ys - sp, sx), s2 = row(ys + sp, sx), s3 = row(ys - sp / 2, sx), s4 = row(ys + sp / 2, sx);\n      for (let n = 0; n \u003c 3; n++)\n        F[o + n] = LAKE[n] * (1 + dn * 0.5) + gc[n] * gw * hl + (0.55 * F[s1 + n] + 0.5 * max(F[s0 + n], F[s2 + n], F[s3 + n], F[s4 + n])) * rf * TINT[n];\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-ferris-wheel","type":"code","name":"ferris-wheel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ferris Wheel\n// Family:  fair\n// Idea:    A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the light shows of the observation wheels on lake and river fronts\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1\n//\n// Knob 1: Lights. Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet.\n// Knob 2: Speed. How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower.\n// Knob 3: Spokes. How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one.\n// Knob 4: Wind. Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light.\n// Buttons: K1 tap starts the next show at once.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst fr = (v) => v - floor(v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The wheel: hub, outer rim with the lights, inner rim, and the truss between.\nconst CX = 32, CY = 38.5, R = 29.5, RI = 26.3, HUB = 3.6;\n// The first row of the lake, which is the line the scene mirrors in, the\n// promenade the legs stand on, and how much the reflection is squeezed.\nconst SEA = 87, FOOT = 84, SQ = 0.72;\n// Light bins along each spoke and round the rim; the shows paint these.\nconst NB = 24, NR = 120;\nconst SHOWS = 6, DUR = 6.5, FADE = 0.35;\nconst CLOUD = [12, 14, 28], LAKE = [3, 7, 22], TINT = [0.85, 0.92, 1];\n// A sine table for the ripples, which take five sines an LED.\nconst SN = F32(1024).map((_, i) => sin((i * TAU) / 1024));\nconst sn = (v) => SN[(v * 162.97) & 1023];\nconst STEEL = [26, 28, 42], LEG = [22, 24, 38], WARM = [255, 214, 150], WHITE = [255, 250, 240];\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, wt: 0, co: 0, rot: 0.2, st: 0, sh: 0, prev: -1, ps: 0, ns: 12, ng: 12, wind: 0.06, h: 0.53,\n    f: F32(N * 3), cn: F32(256 * 76), sky: F32(SEA * W * 3), gm: F32(SEA * W), fg: F32(N * 3), fm: F32(N), ga: F32(N * 3),\n    sp: F32(32 * NB * 3), rm: F32(NR * 3), hb: [0, 0, 0], sp2: F32(32 * NB * 3), rm2: F32(NR * 3), hb2: [0, 0, 0],\n    stars: [], people: [], cab: [],\n  });\n  // Night sky, paler towards the horizon, and the hills behind the far shore\n  // with a few houses lit.\n  for (let y = 0; y \u003c SEA; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y / SEA, o = (y * W + x) * 3, hy = 77 + 2.4 * sin(x * 0.11 + 0.7) + 1.4 * sin(x * 0.29 + 2);\n      let c = [3 + 14 * v * v, 5 + 18 * v * v, 22 + 46 * v * v];\n      if (y > hy) c = [7, 8, 18];\n      if (y > hy + 1 && hash(x, y) \u003c 0.025) c = [120, 96, 60];\n      P.sky.set(c, o);\n      // Where the wheel's light lands on the haze: round the wheel and low over the shore.\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2);\n      P.gm[y * W + x] = 0.75 * exp(-(max(0, r - 18) ** 2) / 420) + 0.45 * exp(-(SEA - y) / 22);\n    }\n  // Cloud: three octaves of value noise 256 wide, so it can scroll round.\n  const seed = floor(rnd() * 999);\n  const vn = (x, y, cx, cy, s) => {\n    const nx = 256 / cx, gx = x / cx, gy = y / cy, ix = floor(gx), iy = floor(gy), u = sm(0, 1, gx - ix), v = sm(0, 1, gy - iy);\n    const h = (i, j) => hash(((ix + i) % nx) + s, iy + j);\n    return mix(mix(h(0, 0), h(1, 0), u), mix(h(0, 1), h(1, 1), u), v);\n  };\n  for (let y = 0; y \u003c 76; y++) for (let x = 0; x \u003c 256; x++) P.cn[y * 256 + x] = 0.55 * vn(x, y, 32, 9, seed) + 0.3 * vn(x, y, 16, 5, seed + 7) + 0.15 * vn(x, y, 8, 3, seed + 13);\n  for (let i = 0; i \u003c 36; i++) P.stars.push([floor(rnd() * W), floor(rnd() * 46), 40 + rnd() * 70, rnd() * TAU, 0.6 + rnd()]);\n  // The promenade, the boarding platform with its stairs, two lamps and the\n  // ticket booth, kept as one layer with its own coverage.\n  const fg = (x, y, c, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    P.fg.set(c, (y * W + x) * 3);\n    P.fm[y * W + x] = a;\n  };\n  const glow = (gx, gy, c, k, s) => {\n    for (let y = max(0, gy - 12); y \u003c min(SEA, gy + 12); y++)\n      for (let x = max(0, gx - 12); x \u003c min(W, gx + 12); x++) {\n        const g = k * exp(-((x - gx) ** 2 + (y - gy) ** 2) / s);\n        for (let n = 0; n \u003c 3; n++) P.ga[(y * W + x) * 3 + n] += c[n] * g;\n      }\n  };\n  for (let x = 0; x \u003c W; x++) {\n    fg(x, 84, [34, 28, 32]);\n    fg(x, 85, [28, 24, 30]);\n    fg(x, 86, [64, 60, 70]);\n  }\n  for (let x = 22; x \u003c= 42; x++) fg(x, 77, [78, 74, 92]), fg(x, 78, [30, 30, 42]);\n  for (const x of [24, 32, 40]) for (let y = 79; y \u003c 84; y++) fg(x, y, [22, 22, 32]);\n  for (let i = 0; i \u003c 6; i++) fg(21 - i, 78 + i, [60, 56, 70]), fg(21 - i, 79 + i, [26, 24, 34]);\n  for (const lx of [5, 46]) {\n    for (let y = 76; y \u003c 84; y++) fg(lx, y, [36, 36, 48]);\n    fg(lx, 75, [255, 230, 180]);\n    fg(lx - 1, 75, [120, 100, 70]);\n    fg(lx + 1, 75, [120, 100, 70]);\n    glow(lx, 76, WARM, 0.32, 14);\n  }\n  for (let x = 53; x \u003c= 62; x++) {\n    const st = ((x - 53) >> 1) & 1 ? [226, 218, 206] : [200, 36, 56];\n    fg(x, 72, st);\n    if (!(x & 1)) fg(x, 73, st);\n    for (let y = 74; y \u003c 84; y++) fg(x, y, x === 53 || x === 62 ? [40, 22, 30] : [70, 34, 46]);\n  }\n  for (let y = 75; y \u003c= 78; y++) for (let x = 55; x \u003c= 60; x++) fg(x, y, [255, 196, 120].map((v) => v * (0.85 - 0.08 * (y - 75))));\n  for (const [x, y] of [[58, 76], [57, 78], [58, 78], [59, 78]]) fg(x, y, [40, 24, 24]);\n  fg(58, 77, [56, 32, 30]);\n  for (let x = 54; x \u003c= 61; x++) fg(x, 79, [160, 116, 70]), fg(x, 81, (x & 1) ? [240, 200, 90] : [110, 70, 40]);\n  glow(58, 80, [255, 180, 100], 0.28, 18);\n  // People on the promenade, a queue at the foot of the stairs and two who walk.\n  for (const [x, w] of [[9, 0], [14, 0], [17, 0], [49, 0], [27, 2.2], [40, -1.6]])\n    P.people.push({ x: x + 0.5, w, c: hsv(rnd(), 0.5, 0.25 + 0.15 * rnd()), sk: rnd() \u003c 0.5 });\n  for (let i = 0; i \u003c 32; i++) P.cab.push([0.55 + 0.45 * rnd(), rnd() \u003c 0.4]);\n}\n\nfunction next(P) {\n  P.prev = P.sh;\n  P.ps = P.st;\n  P.sh = (P.sh + 1) % SHOWS;\n  P.st = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  const v = cl(k[1], 0.2, 3) / 2;\n  let ns = round(cl(k[2], 12, 32));\n  if (ns > 18) ns += ns & 1;\n  Object.assign(P, { h: fr(0.53 + cl(k[0], 0, 1)), ns, ng: ns > 18 ? ns / 2 : ns, wind: cl(k[3], 0, 1) });\n  P.t += dt;\n  P.wt += dt * v * (0.7 + 1.5 * P.wind);\n  P.co += dt * v * (1 + 10 * P.wind);\n  P.rot += (dt * v * TAU) / 40;\n  P.st += dt * v;\n  if ((input.btnPressed && input.btnPressed[0]) || P.st >= DUR) next(P);\n  for (const q of P.people)\n    if (q.w) {\n      q.x += q.w * dt * v;\n      if (q.x > W + 3) q.x = -3;\n      if (q.x \u003c -3) q.x = W + 3;\n    }\n}\n\n// One show at its time s paints the spoke bins, the rim bins and the hub.\nfunction paint(P, sh, s, SP, RM, HB) {\n  const ns = P.ns, [A, B, C] = P.pal, rot = P.rot;\n  const spk = (k, b, c, I) => {\n    const o = (k * NB + b) * 3;\n    (SP[o] = c[0] * I), (SP[o + 1] = c[1] * I), (SP[o + 2] = c[2] * I);\n  };\n  const rim = (j, c, I) => ((RM[j * 3] = c[0] * I), (RM[j * 3 + 1] = c[1] * I), (RM[j * 3 + 2] = c[2] * I));\n  const lerp = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n  const hub = (c, I) => ((HB[0] = c[0] * I), (HB[1] = c[1] * I), (HB[2] = c[2] * I));\n  const uB = (b) => (b + 0.5) / NB;\n  if (sh === 0) {\n    // Light runs out along the spokes, brightest where a beam sweeps round\n    // against the turn; marquee bulbs chase round the rim and three white\n    // comets run through them.\n    const sw = fr(-s * 0.3), mq = floor(s * 9);\n    for (let k = 0; k \u003c ns; k++) {\n      const dl = fr(k / ns - sw), bm = exp(-dl / 0.22), wt = 0.5 * exp(-dl * ns * 1.5);\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), ds = exp(-(((fr(u * 2 - s * 1.1) - 0.5) / 0.17) ** 2));\n        spk(k, b, lerp(lerp(C, A, u), WHITE, wt), 0.14 + 0.25 * bm + 0.61 * ds * (0.45 + 0.55 * bm));\n      }\n    }\n    for (let j = 0; j \u003c NR; j++) {\n      let I = 0;\n      for (let m = 0; m \u003c 3; m++) I = max(I, exp(-fr(fr(s * 0.42 + m / 3) - j / NR) / 0.04));\n      rim(j, lerp(B, WHITE, I), max(I, (floor(j / 2) + mq) % 3 ? 0.22 : 0.9));\n    }\n    hub(A, 0.8);\n  } else if (sh === 1) {\n    // A colour wipe across the whole wheel, lit full, with a white front.\n    const X = CX + 35 * cos((PI * s) / 3.25), f0 = 0.88 * sm(0, 0.5, s);\n    const col = (x) => lerp(lerp(A, B, sm(X - 2.5, X + 2.5, x)), WHITE, 0.7 * exp(-(((x - X) / 2.2) ** 2)));\n    for (let k = 0; k \u003c ns; k++) {\n      const c = cos(rot + (TAU * k) / ns);\n      for (let b = 0; b \u003c NB; b++) spk(k, b, col(CX + (HUB + uB(b) * (R - HUB)) * c), f0);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, col(CX + R * cos(rot + (TAU * (j + 0.5)) / NR)), f0);\n    hub(col(CX), f0);\n  } else if (sh === 2) {\n    // A spiral arm winds out from the hub and round the wheel.\n    for (let k = 0; k \u003c ns; k++)\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), v = fr(u * 0.9 + k / ns - s * 0.45);\n        spk(k, b, lerp(B, C, u), 0.07 + 0.93 * exp(-(((v - 0.5) / 0.2) ** 2)));\n      }\n    for (let j = 0; j \u003c NR; j++) rim(j, A, fr((j / NR) * ns * 0.5 - s * 0.9) \u003c 0.5 ? 0.95 : 0.12);\n    hub(B, 0.9);\n  } else if (sh === 3) {\n    // Spoke after spoke lights up round the wheel and holds before it blinks out.\n    const n = (s / 3.6) * ns, blink = s > 4.8 && fr((s - 4.8) * 2.6) > 0.5;\n    for (let k = 0; k \u003c ns; k++) {\n      const I = blink ? 0.04 : k \u003c floor(n) ? 0.9 : k === floor(n) ? fr(n) : 0.05;\n      for (let b = 0; b \u003c NB; b++) spk(k, b, k === floor(n) ? WHITE : k & 1 ? B : A, I);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, C, blink ? 0.04 : j / NR \u003c n / ns ? 0.95 : 0.08);\n    hub(WHITE, blink ? 0.1 : 0.85);\n  } else if (sh === 4) {\n    // Rings run out from the hub, each a colour, and flash the rim on arriving.\n    SP.fill(0, 0, ns * NB * 3);\n    let Ir = 0.08, Ih = 0.2, cr = A;\n    for (let m = 0; m \u003c 3; m++) {\n      // Rings are born in the order A, C, B, so each takes the next colour.\n      const f = fr(s * 0.4 + m / 3), c = P.pal[m], e = exp(-(((1 - f) / 0.06) ** 2));\n      for (let k = 0; k \u003c ns; k++)\n        for (let b = 0; b \u003c NB; b++) {\n          const I = exp(-(((uB(b) - f) / 0.07) ** 2)), o = (k * NB + b) * 3;\n          for (let n = 0; n \u003c 3; n++) SP[o + n] += c[n] * I;\n        }\n      if (e > Ir) (Ir = e), (cr = c);\n      Ih = max(Ih, exp(-((f / 0.08) ** 2)));\n    }\n    for (let k = 0; k \u003c ns * NB * 3; k++) SP[k] += 14;\n    for (let j = 0; j \u003c NR; j++) rim(j, cr, max(0.1, Ir));\n    hub(WHITE, Ih);\n  } else {\n    // Every spoke its own colour, the rainbow turning round, with sparkles.\n    const tw = floor(s * 7);\n    for (let k = 0; k \u003c ns; k++) {\n      const c = hsv(P.h + fr(k / ns + s * 0.12), 0.85, 1);\n      for (let b = 0; b \u003c NB; b++) hash(k * NB + b, tw) \u003c 0.07 ? spk(k, b, WHITE, 1) : spk(k, b, c, 0.72);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, hsv(P.h + fr(j / NR - s * 0.25), 0.8, 1), 0.75);\n    hub(WHITE, 0.8);\n  }\n}\n\nlet F;\nconst add = (x, y, c, k) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] += c[n] * k;\n};\nconst put = (x, y, c, k = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// A leg of the A-frame from the hub to the promenade, a dark girder.\nfunction leg(ax, ay, bx, by, hw, edge) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy;\n  for (let y = floor(ay); y \u003c= by; y++)\n    for (let x = max(0, floor(min(ax, bx) - 2)); x \u003c= min(W - 1, max(ax, bx) + 2); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, d = sqrt(ex * ex + ey * ey);\n      const w = cl(hw + 0.5 - d, 0, 1);\n      if (w \u003c= 0) continue;\n      const o = (y * W + x) * 3, lit = 0.5 + 0.5 * cl((d - hw + 0.6) * 1.5, 0, 1);\n      const fl = 0.32 * exp(-(FOOT - y) / 9);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], LEG[n] + edge[n] * lit + WARM[n] * fl, w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.f) return;\n  F = P.f;\n  const ns = P.ns, rot = P.rot, t = P.t;\n  P.pal = [hsv(P.h, 0.85, 1), hsv(P.h + 0.42, 0.8, 1), hsv(P.h + 0.2, 0.75, 1)];\n  const SP = P.sp, RM = P.rm, HB = P.hb;\n  paint(P, P.sh, P.st, SP, RM, HB);\n  if (P.prev >= 0 && P.st \u003c FADE) {\n    const q = P.st / FADE;\n    paint(P, P.prev, P.ps + P.st, P.sp2, P.rm2, P.hb2);\n    for (let i = 0; i \u003c ns * NB * 3; i++) SP[i] = mix(P.sp2[i], SP[i], q);\n    for (let i = 0; i \u003c NR * 3; i++) RM[i] = mix(P.rm2[i], RM[i], q);\n    for (let n = 0; n \u003c 3; n++) HB[n] = mix(P.hb2[n], HB[n], q);\n  }\n  // The wheel's light in the haze: the mean colour of every bin.\n  const gc = [0, 0, 0], ws = ((R - HUB) / NB) * ns, wr = (TAU * R) / NR;\n  for (let i = 0; i \u003c ns * NB; i++) for (let n = 0; n \u003c 3; n++) gc[n] += SP[i * 3 + n] * ws;\n  for (let j = 0; j \u003c NR; j++) for (let n = 0; n \u003c 3; n++) gc[n] += RM[j * 3 + n] * wr * ns;\n  for (let n = 0; n \u003c 3; n++) gc[n] /= ns * NB * ws + NR * wr * ns;\n  // The haze takes a dim show nearly whole and a bright one by less.\n  const gk = 0.62 / (1 + (1.6 * max(...gc)) / 255);\n  for (let n = 0; n \u003c 3; n++) gc[n] *= gk;\n\n  // Sky, haze, stars and a thin moon.\n  for (let i = 0, o = 0; i \u003c SEA * W; i++, o += 3) {\n    const g = P.gm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = P.sky[o + n] + gc[n] * g;\n  }\n  for (const [x, y, b, ph, sp] of P.stars) add(x, y, [1, 1, 1.15], b * (0.65 + 0.35 * sin(t * sp + ph)));\n  for (let y = 3; y \u003c 11; y++)\n    for (let x = 51; x \u003c 60; x++) {\n      const a = (x + 0.5 - 55) ** 2 + (y + 0.5 - 7) ** 2, b = (x + 0.5 - 56.6) ** 2 + (y + 0.5 - 6) ** 2;\n      const k = cl(3.4 - sqrt(a), 0, 1) * cl(sqrt(b) - 2.9, 0, 1);\n      if (k > 0) add(x, y, [236, 228, 196], k);\n    }\n  // Clouds come in on the wind, lit from below by the wheel.\n  const wd = P.wind, th = 0.68 - 0.4 * wd, co = floor(P.co), cf = P.co - co;\n  for (let y = 0; y \u003c 76; y++) {\n    const hf = sm(76, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const c0 = y * 256, n = mix(P.cn[c0 + ((x + co) & 255)], P.cn[c0 + ((x + co + 1) & 255)], cf), dn = sm(th - 0.04, th + 0.22, n) * hf * 0.7;\n      if (dn \u003c= 0) continue;\n      const i = y * W + x, o = i * 3, g = 3 * (P.gm[i] + 0.2);\n      for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], CLOUD[k] + gc[k] * g, dn);\n    }\n  }\n\n  // Spokes, truss and rims, lit from the show's bins.\n  const st = STEEL.map((v, n) => v + gc[n] * 0.5);\n  for (let y = 7; y \u003c= 70; y++) {\n    const dy = y + 0.5 - CY;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - CX, r2 = dx * dx + dy * dy;\n      if (r2 > (R + 1.4) ** 2) continue;\n      const r = sqrt(r2), o = (y * W + x) * 3;\n      let a = (atan2(dy, dx) - rot) / TAU;\n      a -= floor(a);\n      const q = a * ns, kk = round(q), d = (abs(q - kk) * TAU * r) / ns;\n      const wsp = r > HUB && r \u003c R ? cl(1.25 - 1.5 * d, 0, 1) : 0;\n      const wrm = cl(1.25 - 1.5 * abs(r - R), 0, 1);\n      let wst = cl(1 - 1.6 * abs(r - RI), 0, 1) * 0.8;\n      if (r > RI && r \u003c R) {\n        const z = abs(fr(a * ns * 2) - 0.5) * 2, tt = (r - RI) / (R - RI);\n        wst = max(wst, cl(1 - 2.2 * abs(z - tt), 0, 1) * 0.7);\n      }\n      const occ = max(wsp, wrm, wst);\n      if (occ \u003c= 0) continue;\n      const so = ((kk % ns) * NB + min(NB - 1, floor(((r - HUB) / (R - HUB)) * NB))) * 3, ro = (floor(a * NR) % NR) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = F[o + n] * (1 - 0.85 * occ) + st[n] * occ + SP[so + n] * wsp + RM[ro + n] * wrm;\n    }\n  }\n\n  // The gondolas hang level from the rim, swinging in the wind.\n  const [A, B, C] = P.pal, step = ns / P.ng;\n  for (let i = 0; i \u003c P.ng; i++) {\n    const ang = rot + (TAU * i * step) / ns, px = CX + R * cos(ang), py = CY + R * sin(ang);\n    const sw = wd * (0.45 * sin(t * 1.8 + i * 1.1) + 0.25 * sin(t * 3.1 + i * 2.3)) + 0.05 * sin(t * 1.4 + i);\n    const gx = round(px - 0.5), gy = round(py - 0.5), cx = round(px - 0.5 + 3.2 * sin(sw)), [wk, empty] = P.cab[i];\n    const body = [A, B, C][i % 3].map((v, n) => v * 0.62 + gc[n]);\n    put(gx, gy, [150, 150, 170]);\n    put(round(px - 0.5 + 1.2 * sin(sw)), gy + 1, [60, 60, 76]);\n    for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + 2, body), put(cx + dx, gy + 5, body, 0.75);\n    for (let dy = 3; dy \u003c= 4; dy++) {\n      put(cx - 2, gy + dy, body, 0.85);\n      put(cx + 2, gy + dy, body, 0.85);\n      for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + dy, WARM, (empty || dx || dy > 3 ? 0.78 : 0.2) * wk);\n    }\n  }\n\n  // The A-frame in front of the wheel, and the hub on it.\n  const edge = gc.map((v) => v * 1.4);\n  leg(CX, CY, 12, FOOT, 0.85, edge);\n  leg(CX, CY, 52, FOOT, 0.85, edge);\n  for (let y = 33; y \u003c= 44; y++)\n    for (let x = 26; x \u003c= 38; x++) {\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2), k = cl(HUB + 0.5 - r, 0, 1);\n      if (k \u003c= 0) continue;\n      const o = (y * W + x) * 3, core = exp(-(r * r) / 2.5);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], 30 + HB[n] * (1 - r / 6) + WHITE[n] * core * 0.6, k);\n    }\n\n  // The shore: promenade, platform, lamps, booth, the warm light they throw.\n  for (let i = 70 * W, o = i * 3; i \u003c SEA * W; i++, o += 3) {\n    const m = P.fm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], P.fg[o + n], m) + P.ga[o + n];\n  }\n  for (let x = 23; x \u003c= 41; x += 2) put(x, 76, B, floor(t * 4 - x / 2) % 3 ? 0.35 : 0.85);\n  for (let x = 53; x \u003c= 62; x += 2) put(x, 71, WARM, floor(t * 5 + x / 2) % 2 ? 0.3 : 1);\n  for (const q of P.people) {\n    const x = floor(q.x), gait = q.w ? floor(q.x * 1.5) & 1 : 0;\n    put(x, 79, q.sk ? [150, 110, 86] : [70, 52, 44]);\n    for (let y = 80; y \u003c= 82; y++) put(x, y, q.c), put(x + 1, y, q.c, 0.8);\n    put(x + gait, 83, [16, 16, 24]);\n    put(x + 1 - gait, 83, [16, 16, 24], 0.7);\n  }\n\n  // The lake: the scene above, mirrored, squeezed and broken by the ripples.\n  const wt = P.wt, gw = 0.55 + 0.35 * wd, pw = 3 - 1.2 * wd, sp = 0.5 + 6 * wd;\n  const row = (ys, sx) => (cl(round(ys), 0, SEA - 1) * W + sx) * 3;\n  for (let y = SEA; y \u003c H; y++) {\n    const d = y + 0.5 - SEA, dn = d / (H - SEA), amp = (0.35 + 1.9 * wd) * (0.45 + dn), rf = 0.7 - 0.3 * dn;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = amp * (0.6 * sn(d * 0.75 - wt * 1.9 + x * 0.04) + 0.4 * sn(d * 2.3 + x * 0.37 - wt * 3.3));\n      const ys = SEA - 0.5 - d / SQ + amp * 0.45 * sn(x * 0.45 + d * 1.1 - wt * 2.6), sx = cl(round(x + ox), 0, W - 1);\n      const hl = (0.5 + 0.5 * sn(d * 1.7 - wt * 1.4 + 1.6 * sn(x * 0.15 + d * 0.3 + wt * 0.5))) ** pw, o = (y * W + x) * 3;\n      // Choppy water stretches each light into a streak: the brightest of the\n      // rows a wave face can show here, above the mirror point and below it.\n      const s1 = row(ys, sx), s0 = row(ys - sp, sx), s2 = row(ys + sp, sx), s3 = row(ys - sp / 2, sx), s4 = row(ys + sp / 2, sx);\n      for (let n = 0; n \u003c 3; n++)\n        F[o + n] = LAKE[n] * (1 + dn * 0.5) + gc[n] * gw * hl + (0.55 * F[s1 + n] + 0.5 * max(F[s0 + n], F[s2 + n], F[s3 + n], F[s4 + n])) * rf * TINT[n];\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower."},{"name":"Spokes","min":12,"max":32,"about":"How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one."},{"name":"Wind","min":0,"max":1,"about":"Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light."}],"start":[0,2,12,0.06],"measures":{"motion":0.2782,"detail":0.0637,"edges":0.3285,"complexity":1.8086,"coverage":0.9981,"colour":0.1705,"drift":0.1001},"knobResponse":[0.0444,0.0524,0.0479,0.0788]},{"slug":"fiddlehead","title":"Fiddlehead","family":"growth","round":21,"note":"봄 숲 바닥의 타임랩스예요. 털 덮인 고사리 순이 지난해 낙엽을 뚫고 올라와 아래부터 풀리며 패널 꼭대기에서 휘는 잎이 되고, 그사이 늙은 잎은 누렇게 시들어 쓰러지고 숲 지붕 틈으로 든 빛살이 그 위를 미끄러져요.","idea":"A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-fiddlehead","type":"code","name":"fiddlehead","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fern","min":0,"max":3,"about":"Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps."},{"name":"Fronds","min":6,"max":18,"about":"How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18."},{"name":"Breeze","min":-1,"max":1,"about":"Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster."}],"start":[0,2,6,0.06],"measures":{"motion":0.2772,"detail":0.0937,"edges":0.4428,"complexity":2.2973,"coverage":0.9858,"colour":0.1938,"drift":0.0784},"knobResponse":[0.0694,0.0969,0.0478,0.0882]},{"slug":"figure-eight-orbit","title":"Figure-Eight Orbit","family":"physics","round":38,"note":"같은 질량 셋이 뉴턴 중력으로 패널 높이만 한 8자 하나를 3분의 1주기씩 떨어져 돌아요. 식으로 그린 곡선이 아니라 한 걸음씩 푼 궤도라서, K4 로 처음 속도를 밀면 8자가 흔들리다가 더 밀면 둘이 짝을 짓고 하나가 패널 밖으로 튕겨 나가요. K3 은 꼬리를 늘려 세 혜성을 겹친 8자 띠로 바꾸고, K1 을 누르면 도는 궤도를 살짝 밀어요.","idea":"Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.","buttons":"K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Figure-Eight Orbit\n// Family:  physics\n// Idea:    Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: figure-eight solution of the three-body problem (Cris Moore, 1993; Alain Chenciner and Richard Montgomery, 2000), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1\n//\n// Knob 1: Hue. Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive.\n// Knob 2: Speed. At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2.\n// Knob 3: Trail. How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2.\n// Knob 4: Kick. Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest.\n// Buttons: K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, abs, hypot, round, cbrt, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Chenciner and Montgomery's starting values, G = m = 1: body 3 at the\n// crossing, bodies 1 and 2 opposite each other, both moving at half body 3's\n// velocity the other way. The period is 6.32591398.\nconst X1 = 0.97000436, Y1 = -0.24308753, VX3 = -0.93240737, VY3 = -0.86473146, PERIOD = 6.32591398;\n// Orbit to panel: the eight's long axis down the panel, SC LEDs to the unit.\n// It reaches 1.081 along that axis and 0.358 across, so 115 by 38 LEDs.\nconst SC = 53, CX = 31.5, CY = 63.5;\n// Under RS the pull is that of a uniform ball, so a close pass of a binary\n// stays finite. The eight never comes closer than 0.69, so it never feels it.\nconst RS = 0.05;\n// Step in orbit time: Yoshida's fourth-order leapfrog at H0, shortened by\n// (r / 0.5)^1.5 when two bodies are closer than 0.5.\nconst H0 = 1 / 128;\nconst YW1 = 1 / (2 - cbrt(2)), YW0 = -cbrt(2) * YW1;\nconst YC = [YW1 / 2, (YW0 + YW1) / 2, (YW0 + YW1) / 2, YW1 / 2], YD = [YW1, YW0, YW1];\n// Tail half-width at the head, in LEDs, and how far a body glows.\nconst HW = 3.6, GLOW = 6;\n// Opening hues: azure, rose, lime.\nconst HUE0 = 0.58;\n// Longest tail, in periods, and so the history the pattern keeps.\nconst LMAX = 2;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trail: 0.33, kick: 0, kickSet: -1, kickWait: 0, begun: false,\n    p: new Float64Array(6), v: new Float64Array(6), a: new Float64Array(6),\n    clock: 0, carry: 0, out: 0, fade: 1, phase: 0, nudges: 0,\n    // Per body and LED: when the body last passed (orbit time) and how close.\n    tv: new Float32Array(3 * N).fill(-1e9), td: new Float32Array(3 * N).fill(99),\n    lx: new Float32Array(3), ly: new Float32Array(3), warm: [0, 0, 0],\n    ref: new Float32Array(N), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n  drawReference(params.s);\n}\n\n// Pull on each body; under RS the force grows linearly from the centre.\nfunction accel(p, a) {\n  a.fill(0);\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) {\n      const dx = p[2 * j] - p[2 * i], dy = p[2 * j + 1] - p[2 * i + 1], r = sqrt(dx * dx + dy * dy), q = max(r, RS);\n      const f = 1 / (q * q * q);\n      a[2 * i] += dx * f;\n      a[2 * i + 1] += dy * f;\n      a[2 * j] -= dx * f;\n      a[2 * j + 1] -= dy * f;\n    }\n}\n\nfunction closest(p) {\n  let m = 1e9;\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) m = min(m, hypot(p[2 * j] - p[2 * i], p[2 * j + 1] - p[2 * i + 1]));\n  return m;\n}\n\n// One step of Yoshida's fourth-order symplectic integrator: three leapfrogs\n// of h w1, h w0, h w1, with w0 negative.\nfunction step(p, v, a, h) {\n  for (let s = 0; s \u003c 3; s++) {\n    for (let i = 0; i \u003c 6; i++) p[i] += YC[s] * h * v[i];\n    accel(p, a);\n    for (let i = 0; i \u003c 6; i++) v[i] += YD[s] * h * a[i];\n  }\n  for (let i = 0; i \u003c 6; i++) p[i] += YC[3] * h * v[i];\n}\n\nconst stepLength = (p) => H0 * min(1, (max(closest(p), RS) / 0.5) ** 1.5);\n\n// The kick: bodies i and j pushed apart along the line between them, each\n// by eps, and then every velocity scaled back to the kinetic energy before\n// the push. Positions do not move, so the energy stays what it was; the\n// momentum stays zero and the angular momentum stays zero too, as for the\n// eight itself, so only the shape of the motion changes.\nfunction push(S, i, j, eps) {\n  const { p, v } = S, dx = p[2 * i] - p[2 * j], dy = p[2 * i + 1] - p[2 * j + 1], r = hypot(dx, dy) || 1;\n  let k0 = 0, k1 = 0;\n  for (let n = 0; n \u003c 6; n++) k0 += v[n] * v[n];\n  v[2 * i] += (eps * dx) / r;\n  v[2 * i + 1] += (eps * dy) / r;\n  v[2 * j] -= (eps * dx) / r;\n  v[2 * j + 1] -= (eps * dy) / r;\n  for (let n = 0; n \u003c 6; n++) k1 += v[n] * v[n];\n  const f = sqrt(k0 / k1);\n  for (let n = 0; n \u003c 6; n++) v[n] *= f;\n}\n\n// Kick 0..1 to eps: nothing up to 0.06, then up to 0.45.\nconst epsOf = (k) => 0.45 * (max(0, k - 0.06) / 0.94) ** 1.2;\n\nfunction initial(S) {\n  const { p, v } = S;\n  p.set([X1, Y1, -X1, -Y1, 0, 0]);\n  v.set([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]);\n  push(S, 0, 1, epsOf(S.kick));\n  S.kickSet = S.kick;\n}\n\nconst toCol = (y) => CX + y * SC, toRow = (x) => CY - x * SC;\n\n// A tail at an LED: age a in orbit time, distance d in LEDs, tail length L.\n// It narrows from HW at the head to nothing at its end, and dims from full\n// at the head to 0.6 a third of a period behind it and 0.55 after that.\nfunction tailCover(a, d, L) {\n  if (a \u003c 0 || a >= L) return 0;\n  return cl((HW + 0.5) * (1 - a / L) ** 1.5 - d + 0.5, 0, 1);\n}\nconst tailBright = (a) => 0.55 + 0.45 * exp(-a / (0.15 * PERIOD));\nconst tailValue = (a, d, L) => tailCover(a, d, L) * tailBright(a);\n\n// Mark the LEDs round body k at orbit time t. Within one pass the closest\n// approach is kept; a later pass takes the LED when it would light it more.\nfunction deposit(S, k, t) {\n  const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]), R = HW + 1.5, L = LMAX * PERIOD;\n  if (bx \u003c -R || bx > W + R || by \u003c -R || by > H + R) return;\n  const o = k * N, tv = S.tv, td = S.td;\n  for (let y = max(0, floor(by - R)); y \u003c= min(H - 1, floor(by + R)); y++)\n    for (let x = max(0, floor(bx - R)); x \u003c= min(W - 1, floor(bx + R)); x++) {\n      const d = hypot(x + 0.5 - bx, y + 0.5 - by);\n      if (d > R) continue;\n      const q = o + y * W + x, t0 = tv[q];\n      if (abs(t - t0) \u003c 0.3) {\n        if (d \u003c td[q]) {\n          tv[q] = t;\n          td[q] = d;\n        }\n        continue;\n      }\n      const ref = max(t, t0), vNew = tailValue(ref - t, d, L), vOld = tailValue(ref - t0, td[q], L);\n      if (vNew > vOld || (vNew === vOld && t > t0)) {\n        tv[q] = t;\n        td[q] = d;\n      }\n    }\n}\n\n// Deposit body k if it has moved half an LED since it last did.\nfunction trace(S, t) {\n  for (let k = 0; k \u003c 3; k++) {\n    const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]);\n    if (hypot(bx - S.lx[k], by - S.ly[k]) \u003c 0.5) continue;\n    S.lx[k] = bx;\n    S.ly[k] = by;\n    deposit(S, k, t);\n  }\n}\n\nconst farthest = (p) => max(hypot(p[0], p[1]), hypot(p[2], p[3]), hypot(p[4], p[5]));\n\n// Start (or start again): the starting line-up with the current kick, and\n// its own past drawn behind it by running the orbit backward for up to LMAX\n// periods, or until a body would come in from off the panel.\nfunction restart(S) {\n  S.tv.fill(-1e9);\n  S.td.fill(99);\n  S.clock = 0;\n  S.carry = 0;\n  S.out = 0;\n  initial(S);\n  const { p, v, a } = S;\n  const p0 = Float64Array.from(p), v0 = Float64Array.from(v);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  let t = 0;\n  while (t > -LMAX * PERIOD && farthest(p) \u003c 1.4) {\n    trace(S, t);\n    const h = stepLength(p);\n    step(p, v, a, -h);\n    t -= h;\n  }\n  p.set(p0);\n  v.set(v0);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  trace(S, 0);\n}\n\n// Whole steps only, the remainder carried to the next frame, so at the\n// opening the step never changes and the integrator stays symplectic.\nfunction advance(S, dt) {\n  const { p, v, a } = S;\n  S.carry += dt;\n  for (let h = stepLength(p); S.carry >= h; h = stepLength(p)) {\n    step(p, v, a, h);\n    S.carry -= h;\n    S.clock += h;\n    trace(S, S.clock);\n  }\n}\n\n// The exact eight, sampled over one period, as a faint line under the tails.\nfunction drawReference(S) {\n  const p = Float64Array.from([X1, Y1, -X1, -Y1, 0, 0]);\n  const v = Float64Array.from([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]), a = new Float64Array(6);\n  const n = 1600, h = PERIOD / n, ref = S.ref;\n  for (let s = 0; s \u003c n; s++) {\n    const bx = toCol(p[1]), by = toRow(p[0]);\n    for (let y = max(0, floor(by - 1)); y \u003c= min(H - 1, floor(by + 1)); y++)\n      for (let x = max(0, floor(bx - 1)); x \u003c= min(W - 1, floor(bx + 1)); x++) {\n        const c = cl(1.1 - hypot(x + 0.5 - bx, y + 0.5 - by), 0, 1);\n        if (c > ref[y * W + x]) ref[y * W + x] = c;\n      }\n    step(p, v, a, h);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.33, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trail = cl(k[2], 0.33, 2);\n  S.kick = cl(k[3], 0, 1);\n  if (!S.begun) {\n    restart(S);\n    S.begun = true;\n  }\n  // A turned Kick starts the three again once the knob has rested 0.4 s,\n  // fading the old orbit out over 0.5 s and the new one in.\n  if (abs(S.kick - S.kickSet) > 0.004) {\n    S.kickWait += d;\n    if (S.kickWait > 0.4 && S.phase === 0) S.phase = -1;\n  } else S.kickWait = 0;\n  if (input.btnPressed && input.btnPressed[0] && S.phase === 0) {\n    const pair = S.nudges++ % 3;\n    push(S, pair, (pair + 1) % 3, max(0.05, epsOf(S.kick)));\n  }\n  // At Speed 2 the orbit's clock runs 1 unit a second.\n  advance(S, d * S.speed * 0.5);\n  // Off the panel: a body more than 1.35 from the centre.\n  if (farthest(S.p) > 1.35) S.out += d;\n  else S.out = max(0, S.out - d);\n  if ((S.out > 3 || farthest(S.p) > 8) && S.phase === 0) S.phase = -1;\n  if (S.phase \u003c 0) {\n    S.fade -= d / 0.5;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      restart(S);\n      S.kickWait = 0;\n      S.phase = 1;\n    }\n  } else if (S.phase > 0) {\n    S.fade += d / 0.5;\n    if (S.fade >= 1) {\n      S.fade = 1;\n      S.phase = 0;\n    }\n  }\n}\n\nfunction palette(S) {\n  for (let k = 0; k \u003c 3; k++) {\n    const h = S.hue + HUE0 + k / 3, hh = h - floor(h);\n    // Orange to yellow-green: paler and kept at full value, so a tail never\n    // reads brown or olive.\n    const warm = sm(0.02, 0.08, hh) * (1 - sm(0.2, 0.27, hh));\n    hsv(h, 0.85 - 0.3 * warm, 1, S.col[k]);\n    S.warm[k] = warm;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { tv, td, ref, col, clock, fade } = S, L = S.trail * PERIOD;\n  const bx = [0, 0, 0], by = [0, 0, 0];\n  for (let k = 0; k \u003c 3; k++) {\n    bx[k] = toCol(S.p[2 * k + 1]);\n    by[k] = toRow(S.p[2 * k]);\n  }\n  const ord = [0, 1, 2], ag = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The faint reference eight, then the tails painted oldest first, so\n      // the newest pass lies on top.\n      let r = 0.13 * ref[p], g = 0.13 * ref[p], b = 0.16 * ref[p];\n      for (let k = 0; k \u003c 3; k++) ag[k] = clock - tv[k * N + p];\n      ord[0] = 0;\n      ord[1] = 1;\n      ord[2] = 2;\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      if (ag[ord[1]] \u003c ag[ord[2]]) [ord[1], ord[2]] = [ord[2], ord[1]];\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      for (let n = 0; n \u003c 3; n++) {\n        const k = ord[n], age = ag[k], d = td[k * N + p], al = tailCover(age, d, L) * fade;\n        if (al \u003c= 0) continue;\n        const c = col[k], lv = 1 - (1 - tailBright(age)) * (1 - 0.8 * S.warm[k]), wh = 0.5 * (1 - age / L) ** 8 * cl(1 - d / HW, 0, 1);\n        r += ((c[0] + (1 - c[0]) * wh) * lv - r) * al;\n        g += ((c[1] + (1 - c[1]) * wh) * lv - g) * al;\n        b += ((c[2] + (1 - c[2]) * wh) * lv - b) * al;\n      }\n      // The bodies: a white core in a glow of the body's colour.\n      for (let k = 0; k \u003c 3; k++) {\n        const dx = x + 0.5 - bx[k], dy = y + 0.5 - by[k], d2 = dx * dx + dy * dy;\n        if (d2 >= GLOW * GLOW) continue;\n        const dd = sqrt(d2), halo = 0.7 * fade * (1 - dd / GLOW) ** 1.5, core = sm(2.8, 1.4, dd) * fade, c = col[k];\n        r = 1 - (1 - r) * (1 - c[0] * halo);\n        g = 1 - (1 - g) * (1 - c[1] * halo);\n        b = 1 - (1 - b) * (1 - c[2] * halo);\n        r += (1 - r) * core;\n        g += (1 - g) * core;\n        b += (1 - b) * core;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n\n","layer":{"id":"layer-figure-eight-orbit","type":"code","name":"figure-eight-orbit","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Figure-Eight Orbit\n// Family:  physics\n// Idea:    Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: figure-eight solution of the three-body problem (Cris Moore, 1993; Alain Chenciner and Richard Montgomery, 2000), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1\n//\n// Knob 1: Hue. Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive.\n// Knob 2: Speed. At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2.\n// Knob 3: Trail. How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2.\n// Knob 4: Kick. Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest.\n// Buttons: K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, abs, hypot, round, cbrt, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Chenciner and Montgomery's starting values, G = m = 1: body 3 at the\n// crossing, bodies 1 and 2 opposite each other, both moving at half body 3's\n// velocity the other way. The period is 6.32591398.\nconst X1 = 0.97000436, Y1 = -0.24308753, VX3 = -0.93240737, VY3 = -0.86473146, PERIOD = 6.32591398;\n// Orbit to panel: the eight's long axis down the panel, SC LEDs to the unit.\n// It reaches 1.081 along that axis and 0.358 across, so 115 by 38 LEDs.\nconst SC = 53, CX = 31.5, CY = 63.5;\n// Under RS the pull is that of a uniform ball, so a close pass of a binary\n// stays finite. The eight never comes closer than 0.69, so it never feels it.\nconst RS = 0.05;\n// Step in orbit time: Yoshida's fourth-order leapfrog at H0, shortened by\n// (r / 0.5)^1.5 when two bodies are closer than 0.5.\nconst H0 = 1 / 128;\nconst YW1 = 1 / (2 - cbrt(2)), YW0 = -cbrt(2) * YW1;\nconst YC = [YW1 / 2, (YW0 + YW1) / 2, (YW0 + YW1) / 2, YW1 / 2], YD = [YW1, YW0, YW1];\n// Tail half-width at the head, in LEDs, and how far a body glows.\nconst HW = 3.6, GLOW = 6;\n// Opening hues: azure, rose, lime.\nconst HUE0 = 0.58;\n// Longest tail, in periods, and so the history the pattern keeps.\nconst LMAX = 2;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trail: 0.33, kick: 0, kickSet: -1, kickWait: 0, begun: false,\n    p: new Float64Array(6), v: new Float64Array(6), a: new Float64Array(6),\n    clock: 0, carry: 0, out: 0, fade: 1, phase: 0, nudges: 0,\n    // Per body and LED: when the body last passed (orbit time) and how close.\n    tv: new Float32Array(3 * N).fill(-1e9), td: new Float32Array(3 * N).fill(99),\n    lx: new Float32Array(3), ly: new Float32Array(3), warm: [0, 0, 0],\n    ref: new Float32Array(N), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n  drawReference(params.s);\n}\n\n// Pull on each body; under RS the force grows linearly from the centre.\nfunction accel(p, a) {\n  a.fill(0);\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) {\n      const dx = p[2 * j] - p[2 * i], dy = p[2 * j + 1] - p[2 * i + 1], r = sqrt(dx * dx + dy * dy), q = max(r, RS);\n      const f = 1 / (q * q * q);\n      a[2 * i] += dx * f;\n      a[2 * i + 1] += dy * f;\n      a[2 * j] -= dx * f;\n      a[2 * j + 1] -= dy * f;\n    }\n}\n\nfunction closest(p) {\n  let m = 1e9;\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) m = min(m, hypot(p[2 * j] - p[2 * i], p[2 * j + 1] - p[2 * i + 1]));\n  return m;\n}\n\n// One step of Yoshida's fourth-order symplectic integrator: three leapfrogs\n// of h w1, h w0, h w1, with w0 negative.\nfunction step(p, v, a, h) {\n  for (let s = 0; s \u003c 3; s++) {\n    for (let i = 0; i \u003c 6; i++) p[i] += YC[s] * h * v[i];\n    accel(p, a);\n    for (let i = 0; i \u003c 6; i++) v[i] += YD[s] * h * a[i];\n  }\n  for (let i = 0; i \u003c 6; i++) p[i] += YC[3] * h * v[i];\n}\n\nconst stepLength = (p) => H0 * min(1, (max(closest(p), RS) / 0.5) ** 1.5);\n\n// The kick: bodies i and j pushed apart along the line between them, each\n// by eps, and then every velocity scaled back to the kinetic energy before\n// the push. Positions do not move, so the energy stays what it was; the\n// momentum stays zero and the angular momentum stays zero too, as for the\n// eight itself, so only the shape of the motion changes.\nfunction push(S, i, j, eps) {\n  const { p, v } = S, dx = p[2 * i] - p[2 * j], dy = p[2 * i + 1] - p[2 * j + 1], r = hypot(dx, dy) || 1;\n  let k0 = 0, k1 = 0;\n  for (let n = 0; n \u003c 6; n++) k0 += v[n] * v[n];\n  v[2 * i] += (eps * dx) / r;\n  v[2 * i + 1] += (eps * dy) / r;\n  v[2 * j] -= (eps * dx) / r;\n  v[2 * j + 1] -= (eps * dy) / r;\n  for (let n = 0; n \u003c 6; n++) k1 += v[n] * v[n];\n  const f = sqrt(k0 / k1);\n  for (let n = 0; n \u003c 6; n++) v[n] *= f;\n}\n\n// Kick 0..1 to eps: nothing up to 0.06, then up to 0.45.\nconst epsOf = (k) => 0.45 * (max(0, k - 0.06) / 0.94) ** 1.2;\n\nfunction initial(S) {\n  const { p, v } = S;\n  p.set([X1, Y1, -X1, -Y1, 0, 0]);\n  v.set([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]);\n  push(S, 0, 1, epsOf(S.kick));\n  S.kickSet = S.kick;\n}\n\nconst toCol = (y) => CX + y * SC, toRow = (x) => CY - x * SC;\n\n// A tail at an LED: age a in orbit time, distance d in LEDs, tail length L.\n// It narrows from HW at the head to nothing at its end, and dims from full\n// at the head to 0.6 a third of a period behind it and 0.55 after that.\nfunction tailCover(a, d, L) {\n  if (a \u003c 0 || a >= L) return 0;\n  return cl((HW + 0.5) * (1 - a / L) ** 1.5 - d + 0.5, 0, 1);\n}\nconst tailBright = (a) => 0.55 + 0.45 * exp(-a / (0.15 * PERIOD));\nconst tailValue = (a, d, L) => tailCover(a, d, L) * tailBright(a);\n\n// Mark the LEDs round body k at orbit time t. Within one pass the closest\n// approach is kept; a later pass takes the LED when it would light it more.\nfunction deposit(S, k, t) {\n  const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]), R = HW + 1.5, L = LMAX * PERIOD;\n  if (bx \u003c -R || bx > W + R || by \u003c -R || by > H + R) return;\n  const o = k * N, tv = S.tv, td = S.td;\n  for (let y = max(0, floor(by - R)); y \u003c= min(H - 1, floor(by + R)); y++)\n    for (let x = max(0, floor(bx - R)); x \u003c= min(W - 1, floor(bx + R)); x++) {\n      const d = hypot(x + 0.5 - bx, y + 0.5 - by);\n      if (d > R) continue;\n      const q = o + y * W + x, t0 = tv[q];\n      if (abs(t - t0) \u003c 0.3) {\n        if (d \u003c td[q]) {\n          tv[q] = t;\n          td[q] = d;\n        }\n        continue;\n      }\n      const ref = max(t, t0), vNew = tailValue(ref - t, d, L), vOld = tailValue(ref - t0, td[q], L);\n      if (vNew > vOld || (vNew === vOld && t > t0)) {\n        tv[q] = t;\n        td[q] = d;\n      }\n    }\n}\n\n// Deposit body k if it has moved half an LED since it last did.\nfunction trace(S, t) {\n  for (let k = 0; k \u003c 3; k++) {\n    const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]);\n    if (hypot(bx - S.lx[k], by - S.ly[k]) \u003c 0.5) continue;\n    S.lx[k] = bx;\n    S.ly[k] = by;\n    deposit(S, k, t);\n  }\n}\n\nconst farthest = (p) => max(hypot(p[0], p[1]), hypot(p[2], p[3]), hypot(p[4], p[5]));\n\n// Start (or start again): the starting line-up with the current kick, and\n// its own past drawn behind it by running the orbit backward for up to LMAX\n// periods, or until a body would come in from off the panel.\nfunction restart(S) {\n  S.tv.fill(-1e9);\n  S.td.fill(99);\n  S.clock = 0;\n  S.carry = 0;\n  S.out = 0;\n  initial(S);\n  const { p, v, a } = S;\n  const p0 = Float64Array.from(p), v0 = Float64Array.from(v);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  let t = 0;\n  while (t > -LMAX * PERIOD && farthest(p) \u003c 1.4) {\n    trace(S, t);\n    const h = stepLength(p);\n    step(p, v, a, -h);\n    t -= h;\n  }\n  p.set(p0);\n  v.set(v0);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  trace(S, 0);\n}\n\n// Whole steps only, the remainder carried to the next frame, so at the\n// opening the step never changes and the integrator stays symplectic.\nfunction advance(S, dt) {\n  const { p, v, a } = S;\n  S.carry += dt;\n  for (let h = stepLength(p); S.carry >= h; h = stepLength(p)) {\n    step(p, v, a, h);\n    S.carry -= h;\n    S.clock += h;\n    trace(S, S.clock);\n  }\n}\n\n// The exact eight, sampled over one period, as a faint line under the tails.\nfunction drawReference(S) {\n  const p = Float64Array.from([X1, Y1, -X1, -Y1, 0, 0]);\n  const v = Float64Array.from([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]), a = new Float64Array(6);\n  const n = 1600, h = PERIOD / n, ref = S.ref;\n  for (let s = 0; s \u003c n; s++) {\n    const bx = toCol(p[1]), by = toRow(p[0]);\n    for (let y = max(0, floor(by - 1)); y \u003c= min(H - 1, floor(by + 1)); y++)\n      for (let x = max(0, floor(bx - 1)); x \u003c= min(W - 1, floor(bx + 1)); x++) {\n        const c = cl(1.1 - hypot(x + 0.5 - bx, y + 0.5 - by), 0, 1);\n        if (c > ref[y * W + x]) ref[y * W + x] = c;\n      }\n    step(p, v, a, h);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.33, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trail = cl(k[2], 0.33, 2);\n  S.kick = cl(k[3], 0, 1);\n  if (!S.begun) {\n    restart(S);\n    S.begun = true;\n  }\n  // A turned Kick starts the three again once the knob has rested 0.4 s,\n  // fading the old orbit out over 0.5 s and the new one in.\n  if (abs(S.kick - S.kickSet) > 0.004) {\n    S.kickWait += d;\n    if (S.kickWait > 0.4 && S.phase === 0) S.phase = -1;\n  } else S.kickWait = 0;\n  if (input.btnPressed && input.btnPressed[0] && S.phase === 0) {\n    const pair = S.nudges++ % 3;\n    push(S, pair, (pair + 1) % 3, max(0.05, epsOf(S.kick)));\n  }\n  // At Speed 2 the orbit's clock runs 1 unit a second.\n  advance(S, d * S.speed * 0.5);\n  // Off the panel: a body more than 1.35 from the centre.\n  if (farthest(S.p) > 1.35) S.out += d;\n  else S.out = max(0, S.out - d);\n  if ((S.out > 3 || farthest(S.p) > 8) && S.phase === 0) S.phase = -1;\n  if (S.phase \u003c 0) {\n    S.fade -= d / 0.5;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      restart(S);\n      S.kickWait = 0;\n      S.phase = 1;\n    }\n  } else if (S.phase > 0) {\n    S.fade += d / 0.5;\n    if (S.fade >= 1) {\n      S.fade = 1;\n      S.phase = 0;\n    }\n  }\n}\n\nfunction palette(S) {\n  for (let k = 0; k \u003c 3; k++) {\n    const h = S.hue + HUE0 + k / 3, hh = h - floor(h);\n    // Orange to yellow-green: paler and kept at full value, so a tail never\n    // reads brown or olive.\n    const warm = sm(0.02, 0.08, hh) * (1 - sm(0.2, 0.27, hh));\n    hsv(h, 0.85 - 0.3 * warm, 1, S.col[k]);\n    S.warm[k] = warm;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { tv, td, ref, col, clock, fade } = S, L = S.trail * PERIOD;\n  const bx = [0, 0, 0], by = [0, 0, 0];\n  for (let k = 0; k \u003c 3; k++) {\n    bx[k] = toCol(S.p[2 * k + 1]);\n    by[k] = toRow(S.p[2 * k]);\n  }\n  const ord = [0, 1, 2], ag = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The faint reference eight, then the tails painted oldest first, so\n      // the newest pass lies on top.\n      let r = 0.13 * ref[p], g = 0.13 * ref[p], b = 0.16 * ref[p];\n      for (let k = 0; k \u003c 3; k++) ag[k] = clock - tv[k * N + p];\n      ord[0] = 0;\n      ord[1] = 1;\n      ord[2] = 2;\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      if (ag[ord[1]] \u003c ag[ord[2]]) [ord[1], ord[2]] = [ord[2], ord[1]];\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      for (let n = 0; n \u003c 3; n++) {\n        const k = ord[n], age = ag[k], d = td[k * N + p], al = tailCover(age, d, L) * fade;\n        if (al \u003c= 0) continue;\n        const c = col[k], lv = 1 - (1 - tailBright(age)) * (1 - 0.8 * S.warm[k]), wh = 0.5 * (1 - age / L) ** 8 * cl(1 - d / HW, 0, 1);\n        r += ((c[0] + (1 - c[0]) * wh) * lv - r) * al;\n        g += ((c[1] + (1 - c[1]) * wh) * lv - g) * al;\n        b += ((c[2] + (1 - c[2]) * wh) * lv - b) * al;\n      }\n      // The bodies: a white core in a glow of the body's colour.\n      for (let k = 0; k \u003c 3; k++) {\n        const dx = x + 0.5 - bx[k], dy = y + 0.5 - by[k], d2 = dx * dx + dy * dy;\n        if (d2 >= GLOW * GLOW) continue;\n        const dd = sqrt(d2), halo = 0.7 * fade * (1 - dd / GLOW) ** 1.5, core = sm(2.8, 1.4, dd) * fade, c = col[k];\n        r = 1 - (1 - r) * (1 - c[0] * halo);\n        g = 1 - (1 - g) * (1 - c[1] * halo);\n        b = 1 - (1 - b) * (1 - c[2] * halo);\n        r += (1 - r) * core;\n        g += (1 - g) * core;\n        b += (1 - b) * core;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2."},{"name":"Trail","min":0.33,"max":2,"about":"How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2."},{"name":"Kick","min":0,"max":1,"about":"Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest."}],"start":[0,2,0.33,0.06],"measures":{"motion":0.2677,"detail":0.0329,"edges":0.6811,"complexity":0.5694,"coverage":0.1522,"colour":0.2009,"drift":0.1349},"knobResponse":[0.0772,0.0891,0.0607,0.1032]},{"slug":"final-approach","title":"Final Approach","family":"flight","round":23,"note":"밤에 내려앉는 여객기 조종석에서 앞을 봐요. 활주로 등과 진입등이 도시 불빛이 깔린 지평선 아래로 모이고, 래빗 섬광등이 1초에 두 번 활주로 쪽으로 달려가요. 왼쪽 PAPI 가 흰 둘 빨강 둘을 보이다가, 플레어와 접지 뒤에는 중심선 등이 발밑으로 쏟아져 지나가요. K1 을 누르면 복행해요.","idea":"From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.","buttons":"K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.","code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","layer":{"id":"layer-final-approach","type":"code","name":"final-approach","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower."},{"name":"Weather","min":0,"max":3,"about":"A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late."},{"name":"Crosswind","min":-1,"max":1,"about":"The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare."}],"start":[0,2,0,0.06],"measures":{"motion":1.2895,"detail":0.0365,"edges":0.3949,"complexity":1.2312,"coverage":0.4908,"colour":0.0984,"drift":0.1085},"knobResponse":[0.0373,0.0632,0.3041,0.0884]},{"slug":"fire","title":"Fire","family":"sim","round":1,"note":"데모신의 불이에요. 바닥의 열이 올라가며 식고, K1 을 돌리면 나무 불에서 가스 불, 붕소 불까지 색이 바뀌어요.","idea":"The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.","buttons":"K1 tap drops a log on, and the fire flares and throws sparks.","code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-fire","type":"code","name":"fire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"What is burning: wood, then potassium lilac, gas blue, copper teal and boron green."},{"name":"Height","min":0.6,"max":4,"about":"How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the flames stand up; either way they lean and the gusts come with it."},{"name":"Crackle","min":0,"max":1,"about":"Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower."}],"start":[0,2,0,0.06],"measures":{"motion":0.9647,"detail":0.0218,"edges":0.1201,"complexity":0.8283,"coverage":0.5059,"colour":0.4964,"drift":0.2161},"knobResponse":[0.3207,0.2786,0.0846,0.0537]},{"slug":"fireflies","title":"Fireflies","family":"insect","round":16,"note":"풀밭 위 반딧불이 200마리가 따로 깜박이다가 서로의 깜박임을 보고 박자를 맞춰, 한꺼번에 깜박이는 무리와 어두운 쉼이 번갈아 와요. K4 가 결합의 세기이고, K1 을 누르면 손전등이 지나가며 박자를 흩어요.","idea":"Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.","buttons":"K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.","code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","layer":{"id":"layer-fireflies","type":"code","name":"fireflies","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Moon","min":0,"max":1,"about":"At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon."},{"name":"Pace","min":0.5,"max":4,"about":"At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it."},{"name":"Fireflies","min":200,"max":480,"about":"How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge."},{"name":"Coupling","min":0,"max":0.25,"about":"How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst."}],"start":[0,2,200,0.06],"measures":{"motion":0.3823,"detail":0.021,"edges":0.1814,"complexity":0.404,"coverage":0.3382,"colour":0.0994,"drift":0.0945},"knobResponse":[0.0808,0.0516,0.0623,0.0425]},{"slug":"flame-test","title":"Flame Test","family":"chemistry","round":22,"note":"분젠 버너의 파란 불꽃에 손이 니크롬 고리를 넣으면 불꽃이 그 염의 색으로 터져요. 구리는 청록, 나트륨은 짙은 노랑으로 타고 알갱이가 튀다가 파랗게 돌아오면, 고리를 염산에 씻어 이름표 붙은 다음 시계접시로 가요.","idea":"On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.","buttons":"K1 tap sends the loop to the next salt now.","code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-flame-test","type":"code","name":"flame-test","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salt","min":0,"max":8,"about":"Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker."},{"name":"Room","min":0,"max":1,"about":"The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand."},{"name":"Air","min":-1,"max":1,"about":"The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0593,"detail":0.0588,"edges":0.4458,"complexity":1.5027,"coverage":0.9519,"colour":0.1298,"drift":0.0434},"knobResponse":[0.0735,0.0457,0.2666,0.1163]},{"slug":"flip-clock","title":"Flip Clock","family":"time","round":2,"note":"세워 둔 넘김 시계예요. 위에 시, 아래에 분 카드가 있고, 바뀔 때마다 옛 카드의 윗장이 앞으로 넘어가 그 뒷면이 새 카드의 아랫장으로 내려앉아요.","idea":"A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.","buttons":"K1 tap sets the clock back to 09:58, and the flaps spin round to get there.","code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","layer":{"id":"layer-flip-clock","type":"code","name":"flip-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"The colour of the digits; the dark cards take a little of it."},{"name":"Rate","min":0,"max":3,"about":"From real time at 0 to a minute every second at 3, a minute every four seconds where it starts."},{"name":"Seconds","min":0,"max":1,"about":"Turn it up and a seconds card joins below, growing until all three are one size."},{"name":"Light","min":0,"max":1,"about":"How hard the light falls on the cards, from flat to a deep shadow under each falling flap."}],"start":[0,2,0,0.06],"measures":{"motion":0.0975,"detail":0.0443,"edges":0.7774,"complexity":0.213,"coverage":0.7633,"colour":0.1458,"drift":0.128},"knobResponse":[0.0983,0.1045,0.1894,0.032]},{"slug":"flipdot","title":"Flipdot","family":"type","round":22,"note":"버스 앞에 다는 형광 노랑 플립 디스크 행선판을 세워 놓았어요. 위 칸에 노선 번호, 아래 칸에 행선지가 7줄 점 글꼴로 서고, 쪽이 바뀔 때마다 디스크가 한 줄씩 넘어가며 판 전체를 노랗게 뒤집었다가 반전된 경유지 쪽을 써요. 넘어가는 동안의 디스크는 가는 모서리로 보여요.","idea":"A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.","buttons":"K1 tap ends the page now and the next wave starts.","code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","layer":{"id":"layer-flipdot","type":"code","name":"flipdot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Disc","min":0,"max":1,"about":"The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second."},{"name":"Route","min":0,"max":3,"about":"Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall."},{"name":"Wipe","min":0,"max":3,"about":"How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3."}],"start":[0,2,0,0.06],"measures":{"motion":0.1111,"detail":0.2452,"edges":0.47,"complexity":0.3774,"coverage":0.3252,"colour":0.3924,"drift":0.2652},"knobResponse":[0.0968,0.1699,0.0516,0.048]},{"slug":"flock","title":"Flock","family":"particle","round":1,"note":"새 90마리가 가까운 이웃만 보고 날아요. 보이지 않는 매가 무리를 쫓아 자꾸 갈라놓아요.","idea":"Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.","buttons":"K1 tap sends the unseen hawk diving into the flock.","code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","layer":{"id":"layer-flock","type":"code","name":"flock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flock's colours around the wheel; birds flying up and down sit either side of it."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the birds fly, and so how long their streaks are."},{"name":"Scatter","min":-1,"max":1,"about":"Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats."},{"name":"Trail","min":0.3,"max":2.5,"about":"How long a streak lasts; long trails leave the flock's recent path woven across the panel."}],"start":[0,2,0,0.3],"measures":{"motion":0.7954,"detail":0.0794,"edges":0.4039,"complexity":1.2562,"coverage":0.2957,"colour":0.1808,"drift":0.1151},"knobResponse":[0.0754,0.1076,0.0932,0.1053]},{"slug":"fluoroscope","title":"Fluoroscope","family":"body","round":27,"note":"형광 투시 화면의 어두운 판 위에서 해골이 러닝머신을 옆모습으로 걸어요. 정수리에서 발가락까지 128줄을 다 쓰고, 먼 쪽 다리와 팔은 흐리며 움직이는 뼈 뒤에 인광이 잠깐 남아요. K3 은 걸음을 두 발이 뜨는 달리기로 바꾸고, 누르면 돌아서서 앞모습으로 손을 흔들어요.","idea":"On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.","buttons":"K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.","code":"// ===== Patternflow pattern =====\n// Title:   Fluoroscope\n// Family:  body\n// Idea:    On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after cineradiography, the X-ray motion pictures of the 1950s\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1\n//\n// Knob 1: Screen. The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour.\n// Knob 2: Speed. The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower.\n// Knob 3: Gait. A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps.\n// Knob 4: Dose. The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body.\n// Buttons: K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, sqrt, exp, floor, ceil, atan2, hypot, PI } = Math;\nconst D = PI / 180;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// A figure 114 LEDs tall: limb lengths and half spans of hips and shoulders.\n// FLOOR is the top of the belt. Bones are drawn half again as thick as life.\nconst LT = 27.5, LS = 27.5, LU = 20.5, LF = 16, HZ = 5.2, SZ = 12.4, FLOOR = 122.5;\n\n// For the walk (toe-off at 60%) and then the run (toe-off at 40%), the thigh's\n// angle from vertical and the flexion of knee and ankle, in degrees every 10%\n// of a stride from heel strike, after clinical gait curves.\nconst GT = [\n  [24, 20, 12, 3, -6, -14, -10, 6, 19, 25],\n  [4, 16, 18, 10, 5, 14, 38, 60, 45, 15],\n  [0, -5, 3, 6, 8, 0, -16, -10, -2, 1],\n  [30, 18, 5, -5, -12, -6, 12, 30, 42, 40],\n  [20, 38, 40, 28, 18, 50, 90, 104, 76, 36],\n  [6, 16, 20, 10, -18, -14, -2, 6, 8, 6],\n];\n// A periodic Catmull-Rom spline through a row.\nfunction curve(r, p) {\n  const f = (p - floor(p)) * 10, i = floor(f) % 10, u = f - floor(f);\n  const a = r[(i + 9) % 10], b = r[i], c = r[(i + 1) % 10], d = r[(i + 2) % 10];\n  return b + 0.5 * u * (c - a + u * (2 * a - 5 * b + 4 * c - d + u * (3 * (b - c) + d - a)));\n}\nconst ang = (k, q, g) => mix(curve(GT[k], q), curve(GT[k + 3], q), g);\n// The jump, keyed in seconds: thigh, knee, ankle, shoulder, elbow, lean.\nconst JT = [0, 0.3, 0.46, 0.7, 0.9, 1.1, 1.5];\nconst JK = [\n  [0, 50, 2, 30, 10, 42, 0],\n  [0, 95, 4, 58, 16, 76, 0],\n  [0, 24, -34, -18, -6, 20, 0],\n  [0, -40, 58, 50, 25, 10, 0],\n  [10, 15, 45, 50, 35, 30, 10],\n  [0, 24, 2, 4, 8, 20, 0],\n];\nfunction key(r, u) {\n  let i = 0;\n  while (i \u003c 5 && u > JT[i + 1]) i++;\n  return mix(r[i], r[i + 1], sm(JT[i], JT[i + 1], u));\n}\n\n// The spine's curve in the trunk's frame (x forward, y down from the hips).\nconst CY = [-41, -36.5, -32.5, -28, -23.5, -19, -15.5, -11.5, -7.5, -4.5];\nconst CX = [-2.2, -1.9, -3, -4.6, -5.3, -4.8, -3.8, -2.4, -2, -2.8];\nfunction spx(y) {\n  let i = 0;\n  while (i \u003c 8 && y > CY[i + 1]) i++;\n  return mix(CX[i], CX[i + 1], (y - CY[i]) / (CY[i + 1] - CY[i]));\n}\n// 24 vertebral bodies from the neck down: x, y, half sizes, tilt.\nconst VT = new Float64Array(144);\nfor (let v = 0, y = -40.8; v \u003c 24; v++) {\n  const k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2, h = [1.25, 1.3, 2.3][k], c = y + h / 2;\n  VT.set([spx(c), c, [1.3, 1.6, 2.2][k], h * 0.4, [1.6, 1.9, 2.6][k], -atan2(spx(c + 0.5) - spx(c - 0.5), 1)], v * 6);\n  y += h;\n}\n// Seven ribs stand for twelve. Each row gives the half depth and width of the\n// cage, the drop of the front end and its sag. The last number is how far\n// round the bone goes before the cartilage, which the beam passes through.\nconst RIB = [\n  [4, 5.5, 4, 0.6, 0.95], [5.4, 8.2, 6.2, 0.9, 0.92], [6.1, 10, 7.6, 1.1, 0.88], [6.6, 11.2, 8.4, 1.2, 0.82],\n  [6.7, 11.6, 8.6, 1.2, 0.75], [6.5, 11.4, 8.2, 1.1, 0.64], [6, 10.6, 7, 1, 0.5],\n];\n// The hip bone as lines split by NaN: the iliac crest, the front border down\n// to the socket, the back border, the brim from sacrum to pubis.\nconst IL = [\n  -6.6, -5.5, 4, -5.6, -9.4, 6.2, -3.6, -11.6, 7.8, -1, -11.8, 8.8, 1.8, -10.4, 9.2, 3.8, -8, 9, 4.2, -7.4, 9, 3, -3.6, 7.5, 1.8, -2.6, 6,\n  NaN, 0, 0, -6.6, -5.5, 4, -5.4, -2.6, 4.6, -4.6, -1.2, 4.8, -3.2, 1.2, 4.2, -2.8, 4, 4.2, -2.4, 6.4, 4.2,\n  NaN, 0, 0, -4.2, -3.4, 3.6, -1.6, -1.6, 4.4, 0.5, -1, 4.6, 2.6, 0.6, 3.6, 4.4, 3, 1.2,\n];\n// Gas pockets in the gut: x, y, z, size.\nconst GAS = [2.6, -13.6, -5, 1.4, 3.2, -7, 3, 1, -0.4, -5, -2.4, 0.9, 4.4, -3.6, -4.4, 0.85];\n// Fingers: offset across the palm and length; the share of each phalanx.\nconst FO = [1.25, 0.42, -0.42, -1.2], FLN = [5.4, 6, 5.6, 4.6], PHL = [0.45, 0.32, 0.23];\n// Phosphors: the glow and its afterglow.\nconst PAL = [\n  [0.45, 0.7, 1, 0.35, 1, 0.55],\n  [0.3, 1, 0.4, 0.15, 0.7, 0.25],\n  [1, 0.62, 0.18, 0.9, 0.3, 0.05],\n  [0.72, 0.38, 1, 0.35, 0.3, 1],\n];\n\n// Bone and flesh add up apart as path length along the beam; G is afterglow.\nconst B = new Float32Array(N), T = new Float32Array(N), G = new Float32Array(N), GB = new Float32Array(N);\nconst LA = new Float64Array(6), AR = new Float64Array(4), PC = new Float64Array(6), MO = new Float64Array(6), MI = new Float64Array(6);\nconst FR = new Float64Array(13), AV = new Float64Array(9);\nlet TG = B;\nlet PSI = 0, CP = 1, SP = 0, OX = 25, OY = 63, LAM = 0, LC = 1, LSN = 0;\nlet HX = 0, HY = 0, ETA = 0, HC = 1, HS = 0, JA = 0, JC = 1, JS = 0;\nlet gx = 0, gy = 0, gz = 0, qx = 0, qy = 0, qz = 0, FROT = 0;\nlet e1x = 1, e1y = 0, e1z = 0, e2x = 0, e2y = 1, e2z = 0, e3x = 0, e3z = 1;\n\n// Frames: body, with x forward and y down, trunk, head, jaw, and a limb's\n// own, whose first axis runs along the bone.\nconst FB = (x, y, z) => ((gx = x), (gy = y), (gz = z), (FROT = 0));\nconst FT = (x, y, z) => ((gx = x * LC - y * LSN), (gy = x * LSN + y * LC), (gz = z), (FROT = LAM));\nconst FH = (x, y, z) => ((gx = HX + x * HC - y * HS), (gy = HY + x * HS + y * HC), (gz = z), (FROT = ETA));\nconst FL = (u, v, w) => (\n  (gx = FR[0] + FR[3] * u + FR[6] * v + FR[9] * w), (gy = FR[1] + FR[4] * u + FR[7] * v + FR[10] * w), (gz = FR[2] + FR[5] * u + FR[8] * v + FR[11] * w), (FROT = FR[12])\n);\nfunction FJ(x, y, z) {\n  const dx = x - 1.3, dy = y + 2.6;\n  FH(1.3 + dx * JC - dy * JS, -2.6 + dx * JS + dy * JC, z);\n  FROT += JA;\n}\nfunction P() {\n  qx = OX + gx * CP - gz * SP;\n  qy = OY + gy;\n  qz = gx * SP + gz * CP;\n}\n\n// A tapered rod, hollow when sh > 0: the chord through a tube of cortex.\nfunction tube(ax, ay, bx, by, ra, rb, w, sh) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6, m = max(ra, rb) + 0.8;\n  const x0 = max(0, ceil(min(ax, bx) - m)), x1 = min(W - 1, floor(max(ax, bx) + m));\n  const y0 = max(0, ceil(min(ay, by) - m)), y1 = min(H - 1, floor(max(ay, by) + m));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const ux = x - ax, uy = y - ay, t = cl((ux * dx + uy * dy) / l2, 0, 1);\n      const ex = ux - t * dx, ey = uy - t * dy, d2 = ex * ex + ey * ey, R = ra + (rb - ra) * t + 0.3, o = R * R - d2;\n      if (o \u003c= 0) continue;\n      const ri = R - 0.85, i = ri * ri - d2;\n      TG[y * W + x] += 2 * w * (sqrt(o) - (sh && ri > 0 && i > 0 ? sh * sqrt(i) : 0));\n    }\n}\n// An ellipsoid seen along the beam: its quadric, and the chord through it.\nfunction quad(M, a, b, c) {\n  const A = 1 / (a * a), Bq = 1 / (b * b), C = 1 / (c * c);\n  M[0] = e1x * e1x * A + e2x * e2x * Bq + e3x * e3x * C;\n  M[1] = e1x * e1y * A + e2x * e2y * Bq;\n  M[2] = e1y * e1y * A + e2y * e2y * Bq;\n  M[3] = e1x * e1z * A + e2x * e2z * Bq + e3x * e3z * C;\n  M[4] = e1y * e1z * A + e2y * e2z * Bq;\n  M[5] = e1z * e1z * A + e2z * e2z * Bq + e3z * e3z * C;\n}\nfunction chord(M, u, v) {\n  const b = M[3] * u + M[4] * v, d = b * b - M[5] * (M[0] * u * u + 2 * M[1] * u * v + M[2] * v * v - 1);\n  return d > 0 ? (2 * sqrt(d)) / M[5] : 0;\n}\n// Tilted th in the side plane, turned yaw about the vertical. With a shell t\n// the inside counts k less, so a skull's edge glows brighter than its face.\nfunction ell(cx, cy, a, b, c, th, yaw, w, t, k) {\n  (a += 0.3), (b += 0.3), (c += 0.3);\n  const ph = PSI + yaw, cp = cos(ph), sp = sin(ph), ct = cos(th), st = sin(th);\n  (e1x = ct * cp), (e1y = st), (e1z = ct * sp), (e2x = -st * cp), (e2y = ct), (e2z = -st * sp), (e3x = -sp), (e3z = cp);\n  quad(MO, a, b, c);\n  if (t) quad(MI, a - t, b - t, c - t);\n  const rx = hypot(e1x * a, e2x * b, e3x * c) + 0.5, ry = hypot(e1y * a, e2y * b) + 0.5;\n  const x0 = max(0, ceil(cx - rx)), x1 = min(W - 1, floor(cx + rx)), y0 = max(0, ceil(cy - ry)), y1 = min(H - 1, floor(cy + ry));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      let s = chord(MO, x - cx, y - cy);\n      if (s > 0 && t) s -= k * chord(MI, x - cx, y - cy);\n      if (s > 0) TG[y * W + x] += s * w;\n    }\n}\n// The far side of the body glows dimmer than the near side.\nconst wz = () => (TG === B ? cl(1 + 0.09 * qz, 0.45, 1.15) : 1);\nfunction E(F, x, y, z, a, b, c, th, yaw, w, t = 0, k = 0) {\n  F(x, y, z);\n  P();\n  ell(qx, qy, a, b, c, th + FROT, yaw, w * wz(), t, k);\n}\nfunction Tb(F, x1, y1, z1, x2, y2, z2, ra, rb, w, sh = 0) {\n  F(x1, y1, z1);\n  P();\n  const ax = qx, ay = qy, az = qz;\n  F(x2, y2, z2);\n  P();\n  qz = (qz + az) / 2;\n  tube(ax, ay, qx, qy, ra, rb, w * wz(), sh);\n}\n\nexport function setup(params) {\n  const bg = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x - 31.5) / 36, v = (y - 63.5) / 72;\n      bg[y * W + x] = (0.03 + 0.025 * Math.random()) * max(0, 1 - 0.8 * (u * u + v * v) ** 2);\n    }\n  params.s = { ph: 0.05, br: 0, belt: 0, turn: -1, jump: -1, dt: 1 / 30, scr: 0, spd: 2, gait: 0, dose: 0.06, amp: 1, bg };\n  G.fill(0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], b = input.btnPressed || [];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dt = dt || 1 / 30;\n  S.scr = cl(k[0], 0, 1);\n  S.spd = cl(k[1], 0.2, 3);\n  const g = (S.gait = cl(k[2], 0, 1));\n  S.dose = cl(k[3], 0, 1);\n  if (b[0] && S.turn \u003c 0) S.turn = 0;\n  if (b[1] && S.jump \u003c 0) S.jump = 0;\n  if (S.turn >= 0 && (S.turn += dt) > 5) S.turn = -1;\n  if (S.jump >= 0 && (S.jump += dt) > 1.5) S.jump = -1;\n  const a = (S.amp = S.turn \u003c 0 ? 1 : 1 - sm(0, 0.7, S.turn) * (1 - sm(4.3, 5, S.turn)));\n  const f = (mix(0.93, 1.4, g) * S.spd) / 2, to = mix(0.6, 0.4, g);\n  S.ph = (S.ph + dt * f * a) % 1;\n  // The belt runs as fast as the foot on it goes back, from strike to toe-off.\n  const ax = (q) => LT * sin(ang(0, q, g) * D) + LS * sin((ang(0, q, g) - ang(1, q, g)) * D);\n  S.belt += (dt * a * a * f * (ax(0) - ax(to))) / to;\n  S.br = (S.br + dt * mix(0.25, 0.5, g)) % 1;\n}\n\nfunction treadmill(belt) {\n  const y = FLOOR + 1.7, an = -belt / 2.3, c = 1.8 * cos(an), s = 1.8 * sin(an);\n  tube(4.5, y, 59.5, y, 0.8, 0.8, 0.45, 0.5);\n  tube(4.5, FLOOR + 0.1, 59.5, FLOOR + 0.1, 0.2, 0.2, 0.3, 0);\n  for (let x = 4.5; x \u003c 60; x += 55) {\n    ell(x, y, 2.1, 2.1, 2.1, 0, 0, 0.45, 0.6, 1);\n    tube(x - c, y - s, x + c, y + s, 0.35, 0.35, 0.5, 0);\n  }\n  for (let j = 0; j \u003c 8; j++) {\n    const x = 5 + ((((j * 7 - belt) % 56) + 56) % 56);\n    tube(x, FLOOR - 0.2, x + 1, FLOOR - 0.2, 0.3, 0.3, 0.5, 0);\n  }\n}\n\nfunction skull() {\n  // The vault, upper jaw, chin and hollow eye sockets; then the dense bone of\n  // the ear, the cheekbone, the teeth and the jaw.\n  E(FH, 1.8, -7.2, 0, 7, 6.1, 5.8, -0.12, 0, 0.7, 0.5, 1);\n  E(FH, 6.4, -1.6, 0, 2.6, 1.6, 3.4, 0.1, 0, 0.4, 0.5, 0.5);\n  E(FJ, 7.9, 3.2, 0, 1.4, 1.3, 2, 0, 0, 0.7, 0.5, 0.5);\n  Tb(FH, 7.6, -5.6, 0, 8.7, -3, 0, 0.45, 0.4, 0.9);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    E(FH, 6.2, -4.6, s * 2.7, 1.9, 2, 1.4, 0, s * 0.5, 0.7, 0.55, 1);\n    E(FH, 6, -4.6, s * 2.4, 1.6, 1.7, 1.6, 0, 0, -0.35);\n    E(FH, 6.2, -1.9, s * 2, 1.5, 1.1, 1.4, 0, 0, -0.3);\n    E(FH, 0.3, -3.4, s * 3.4, 1.7, 1.3, 1.4, 0.3, 0, 0.8);\n    Tb(FH, 2.2, -2.4, s * 5, 6.2, -2.9, s * 4.2, 0.55, 0.65, 0.8);\n    Tb(FH, 8.6, 0.1, 0, 7.4, 0.1, s * 2.3, 0.75, 0.7, 1);\n    Tb(FH, 7.4, 0.1, s * 2.3, 4.6, 0.2, s * 3.2, 0.7, 0.75, 1);\n    Tb(FJ, 8.2, 1.3, 0, 7.2, 1.3, s * 2.3, 0.7, 0.65, 1);\n    Tb(FJ, 7.2, 1.3, s * 2.3, 4.6, 1.2, s * 3.1, 0.65, 0.7, 1);\n    Tb(FJ, 8.3, 3.7, 0, 6.6, 3.5, s * 2.8, 1, 0.9, 0.9, 0.5);\n    Tb(FJ, 6.6, 3.5, s * 2.8, 2, 3.1, s * 4.7, 0.9, 0.85, 0.9, 0.5);\n    Tb(FJ, 2, 3.1, s * 4.7, 1.3, -2.2, s * 4.7, 0.85, 0.7, 0.9, 0.4);\n    Tb(FJ, 2.7, 0.8, s * 4.5, 3.5, -1.8, s * 4.3, 0.55, 0.35, 0.8);\n  }\n}\n\nfunction trunk(b) {\n  // Vertebrae, sacrum, tailbone, and the breastbone moving out on the breath.\n  for (let v = 0; v \u003c 24; v++) {\n    const o = v * 6, x = VT[o], y = VT[o + 1], a = VT[o + 2], k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2;\n    E(FT, x, y, 0, a, VT[o + 3], VT[o + 4], VT[o + 5], 0, 0.55, 0.45, 0.7);\n    Tb(FT, x - a + 0.2, y, 0, x - a - (v === 6 ? 3.6 : [2.2, 3, 3.4][k]), y + [0.5, 1.6, 0.4][k], 0, 0.45, 0.3, k === 1 ? 0.4 : 0.7);\n  }\n  Tb(FT, -3.6, -4.8, 0, -6.6, 2.6, 0, 2.5, 1, 0.8, 0.5);\n  Tb(FT, -6.6, 2.6, 0, -5.2, 5.6, 0, 0.8, 0.45, 0.8);\n  const sb = 0.5 * b;\n  Tb(FT, 5 + sb, -31, 0, 6.6 + sb, -23.5, 0, 1.2, 0.9, 0.9, 0.5);\n  Tb(FT, 6.6 + sb, -23.5, 0, 7 + sb, -19.5, 0, 0.9, 0.45, 0.8);\n  E(FT, 5.2 + sb, -29.8, 0, 1.3, 1.9, 2.4, -0.2, 0, 0.7, 0.5, 0.6);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    // Hip bone: faint wing, its lines, socket, obturator ring.\n    E(FT, -1.5, -6.5, s * 6, 5.4, 4.8, 2.6, -0.35, s * 0.55, 0.2, 0.5, 1);\n    for (let i = 3; i \u003c IL.length; i += 3)\n      if (IL[i] === IL[i] && IL[i - 3] === IL[i - 3]) Tb(FT, IL[i - 3], IL[i - 2], s * IL[i - 1], IL[i], IL[i + 1], s * IL[i + 2], 0.45, 0.45, 0.85);\n    E(FT, 0, 0, s * HZ, 3.2, 3.2, 3, 0, 0, 0.4, 0.6, 1);\n    E(FT, 1, 4.6, s * 3.8, 3.2, 2.2, 1.6, 0.3, s * 0.3, 0.4, 0.5, 1);\n    // Collarbone, shoulder blade, the spine of the blade and the coracoid.\n    Tb(FT, 4.6, -32.2, s * 1.6, 2.2, -33.3, s * 7.4, 0.85, 0.8, 0.9, 0.4);\n    Tb(FT, 2.2, -33.3, s * 7.4, -1, -34.6, s * 12, 0.8, 0.9, 0.9, 0.4);\n    E(FT, -5.6, -27.5, s * 8.3, 2, 6.2, 4.6, 0.1, s * 0.6, 0.2, 0.4, 1);\n    Tb(FT, -7.4, -30.6, s * 5.4, -1.4, -35, s * 11.6, 0.6, 0.75, 0.9);\n    Tb(FT, 0.4, -32.4, s * 10, 2.4, -31.6, s * 9, 0.5, 0.45, 0.8);\n    // The ribs swing up and out on the breath.\n    for (let i = 0; i \u003c 7; i++) {\n      const r = RIB[i], ya = -31.5 + 2.4 * i, xa = spx(ya) - 1.3, rx = r[0] * (1 + 0.06 * b), rz = r[1] * (1 + 0.04 * b), dr = r[2] - 1.3 * b;\n      let px = xa, py = ya, pz = s * 1.6;\n      for (let j = 1; j \u003c= 5; j++) {\n        const al = (r[4] * PI * j) / 5, ca = 1 - cos(al), x = xa + rx * ca, y = ya + (dr * ca) / 2 + r[3] * sin(al), z = s * (1.6 + rz * sin(al));\n        Tb(FT, px, py, pz, x, y, z, 0.3, 0.25, 0.9);\n        (px = x), (py = y), (pz = z);\n      }\n    }\n  }\n}\n\nfunction flesh(b) {\n  E(FH, 2.4, -6, 0, 8, 8.4, 6.8, -0.1, 0, 1);\n  Tb(FT, -1.6, -31, 0, -0.6, -41, 0, 4.6, 4.2, 1);\n  E(FT, -0.2 + 0.3 * b, -23.5, 0, 9.4 + 0.4 * b, 11.5, 12.6, 0.05, 0, 1);\n  E(FT, 1.4, -9.5, 0, 8.8, 8.6, 11.4, 0, 0, 1);\n  E(FT, -1.6, -0.8, 0, 8.8, 8, 12.4, 0, 0, 1);\n  // Air in the lungs and windpipe and in the gut; heart and liver a little denser.\n  for (let s = -1; s \u003c= 1; s += 2) E(FT, -0.3, -24.4 + 0.6 * b, s * 5.8, 5.6 + 0.3 * b, 8 + 0.5 * b, 5.4, 0.1, s * 0.15, -1);\n  Tb(FT, 2.4, -40.5, 0, 0.8, -28.6, 0, 1, 1, -1);\n  E(FT, 3.6, -19.4, -1.6, 4, 4.6, 4.2, 0.6, 0, 0.55);\n  E(FT, 1.4, -12.6, 3.2, 6, 4.2, 6.8, 0.3, 0, 0.3);\n  for (let i = 0; i \u003c 16; i += 4) E(FT, GAS[i], GAS[i + 1], GAS[i + 2], 1.8 * GAS[i + 3], 1.4 * GAS[i + 3], 1.8 * GAS[i + 3], 0, 0, -0.8);\n}\n\nfunction leg(i, s) {\n  const t1 = LA[i * 3], t2 = LA[i * 3 + 1], t3 = LA[i * 3 + 2], z = s * HZ, bone = TG === B;\n  const dx = sin(t1), dy = cos(t1), kx = LT * dx, ky = LT * dy, ex = sin(t2), ey = cos(t2), ax = kx + LS * ex, ay = ky + LS * ey, fx = cos(t3), fy = -sin(t3);\n  // Femur: head in its socket, neck, greater trochanter, shaft, condyles.\n  FR.set([0, 0, z, dx, dy, 0, dy, -dx, 0, 0, 0, s, -t1]);\n  if (!bone) Tb(FL, -1, 0, 0, LT, 0, 0, 6.4, 4.4, 1);\n  else {\n    E(FL, 0, 0, 0, 2.3, 2.3, 2.3, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 0, 0, 0, 2.6, 0, 2.6, 1.3, 1.4, 0.6);\n    E(FL, 1.6, -1.5, 3.2, 1.7, 2.1, 1.5, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 2.8, 0, 2.6, LT - 2.4, 0, 0.4, 1.75, 1.6, 1, 0.85);\n    E(FL, LT - 1.2, -0.3, 0, 2.5, 2.4, 3.4, 0, 0, 0.7, 0.6, 0.6);\n    // The kneecap rides over the joint, halfway between thigh and shank.\n    const h = (t1 + t2) / 2;\n    E(FB, kx + cos(h) * 3.2, ky - sin(h) * 3.2, z, 1, 1.8, 1.5, -h, 0, 0.85, 0.45, 0.5);\n  }\n  // Tibia and the thinner fibula behind it.\n  FR.set([kx, ky, z, ex, ey, 0, ey, -ex, 0, 0, 0, s, -t2]);\n  if (!bone) Tb(FL, 0, 0, 0, LS, 0, 0, 4.2, 2.4, 1), E(FL, 8, -1.6, 0, 3, 6.5, 3.2, 0, 0, 1);\n  else {\n    E(FL, 1.9, 0, 0, 2.8, 1.4, 3.3, 0, 0, 0.7, 0.5, 0.5);\n    Tb(FL, 3, 0.3, 0, LS - 1.8, 0, 0, 1.75, 1.2, 1, 0.85);\n    E(FL, LS - 1, 0, -0.4, 1.6, 1.7, 2.2, 0, 0, 0.75, 0.5, 0.4);\n    E(FL, 3.6, -1.9, 2, 1, 1, 1, 0, 0, 0.8);\n    Tb(FL, 4, -1.9, 2, LS - 0.8, -1, 2.4, 0.7, 0.6, 0.95, 0.3);\n    E(FL, LS + 0.3, -1, 2.6, 1, 1.5, 1, 0, 0, 0.8);\n  }\n  // Foot: talus, heel, arch, two metatarsals for five, and toes that stay flat\n  // on the belt as the heel lifts.\n  FR.set([ax, ay, z, fx, fy, 0, -fy, fx, 0, 0, 0, s, -t3]);\n  if (!bone) return Tb(FL, -3, 2.6, 0, 10, 3, 0, 2.3, 1.6, 1);\n  E(FL, 0.6, 1, 0, 2.2, 1.5, 1.6, 0, 0, 0.8, 0.5, 0.5);\n  E(FL, -2.4, 2.9, 0, 3.3, 1.8, 1.6, -0.3, 0, 0.8, 0.6, 0.55);\n  E(FL, 3.3, 1.7, 0, 1.5, 1.3, 1.8, 0, 0, 0.85);\n  E(FL, 2.6, 3.1, 0, 1.2, 1, 1.2, 0, 0, 0.8);\n  Tb(FL, 4.4, 1.9, 0, 9.2, 3.5, 0, 0.65, 0.6, 1, 0.3);\n  Tb(FL, 3.6, 3.4, 1, 8.4, 3.9, 1, 0.55, 0.5, 0.9);\n  FL(9.2, 3.5, 0);\n  const d = t3 \u003c 0 ? -t3 * (1 - sm(0.4, 3, FLOOR - OY - gy - 1.1)) : 0, c = cos(d), n = -sin(d);\n  Tb(FL, 9.2, 3.5, 0, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 0.5, 0.45, 0.95);\n  Tb(FL, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 9.2 + c * 4.2, 3.5 + n * 4.2, 0, 0.45, 0.4, 0.9);\n}\n\nfunction arm(s, sig, eps, k, wv) {\n  FT(-1, -33, s * SZ);\n  const sx = gx, sy = gy, sz = gz, au = sig + LAM, af = au + eps, V = AV;\n  // Axes of the upper arm and forearm, and the thumb side of the hand. In the\n  // wave the elbow goes out to the side and the forearm up, palm to you.\n  V.set([sin(au), cos(au), s * 0.1, sin(af), cos(af), s * 0.04, cos(af), -sin(af), 0]);\n  if (k > 0) {\n    const A = [0.2, 0.62, s * 0.76, 0.15, -cos(wv), s * (sin(wv) - 0.1), 0, 0, -s];\n    for (let j = 0; j \u003c 9; j++) V[j] = mix(V[j], A[j], k);\n  }\n  for (let j = 0; j \u003c 9; j += 3) {\n    const d = j === 6 ? V[6] * V[3] + V[7] * V[4] + V[8] * V[5] : 0;\n    for (let c = 0; c \u003c 3; c++) V[j + c] -= d * V[3 + c];\n    const l = hypot(V[j], V[j + 1], V[j + 2]) || 1;\n    for (let c = 0; c \u003c 3; c++) V[j + c] /= l;\n  }\n  const [ux, uy, uz, fx, fy, fz, px, py, pz] = V, ex = sx + LU * ux, ey = sy + LU * uy, ez = sz + LU * uz;\n  // The forearm's frame from the elbow, its third axis toward the palm.\n  FR.set([ex, ey, ez, fx, fy, fz, px, py, pz, s * (fy * pz - fz * py), s * (fz * px - fx * pz), s * (fx * py - fy * px), -af]);\n  if (TG === T) {\n    Tb(FB, sx, sy, sz, ex, ey, ez, 2.8, 2.2, 1);\n    Tb(FL, 0, 0, 0, LF, 0, 0, 2.2, 1.6, 1);\n    return Tb(FL, LF, 0, 0, LF + 7, 0, 0, 1.5, 1.1, 1);\n  }\n  // Humerus, ulna with the point of the elbow, radius, wrist, four fingers\n  // curled a little toward the palm, thumb.\n  E(FB, sx, sy, sz, 2.2, 2.2, 2.2, 0, 0, 0.8, 0.7, 0.5);\n  Tb(FB, sx + ux * 1.8, sy + uy * 1.8, sz + uz * 1.8, ex - ux * 1.3, ey - uy * 1.3, ez - uz * 1.3, 1.35, 1.15, 1, 0.85);\n  E(FB, ex - ux * 0.8, ey - uy * 0.8, ez - uz * 0.8, 1.3, 1.5, 2.5, -au, 0, 0.8, 0.5, 0.5);\n  E(FL, 0.3, -1, 0, 1, 1, 1, 0, 0, 0.9);\n  Tb(FL, 0.8, -0.5, 0, LF, -0.5, 0, 0.75, 0.55, 1, 0.5);\n  Tb(FL, 1.2, 0.5, 0, LF, 0.55, 0, 0.6, 0.95, 1, 0.5);\n  E(FL, LF + 1.4, 0, 0, 1.5, 1.3, 1.5, 0, 0, 0.9, 0.5, 0.4);\n  const c0 = mix(0.3, 0.06, k);\n  for (let j = 0; j \u003c 5; j++) {\n    const th = j > 3, o = th ? 2.2 : FO[j];\n    let x = LF + (th ? 3.2 : 5.8), y = o, z = 0, c = 0;\n    Tb(FL, LF + (th ? 1 : 2.2), th ? 0.9 : o / 2, 0, x, y, z, 0.5, 0.45, 0.95);\n    for (let m = 0; m \u003c (th ? 2 : 3); m++) {\n      c += c0;\n      const L = th ? 2 - 0.4 * m : FLN[j] * PHL[m], X = x + cos(c) * L, Y = y + (th ? 0.7 * L : 0), Z = z + sin(c) * L;\n      Tb(FL, x, y, z, X, Y, Z, 0.42, 0.36, 0.9);\n      (x = X), (y = Y), (z = Z);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const g = S.gait, a = S.amp, p = S.ph, u = S.jump, tt = S.turn, b = sin(2 * PI * S.br);\n  const wj = u \u003c 0 ? 0 : sm(0, 0.2, u) * (1 - sm(1.15, 1.5, u));\n  const tf = tt \u003c 0 ? 0 : sm(0.5, 1.4, tt) * (1 - sm(3.8, 4.7, tt));\n  const wave = tt \u003c 0 ? 0 : sm(1.4, 1.9, tt) * (1 - sm(3.3, 3.8, tt));\n  PSI = (PI / 2) * tf;\n  (CP = cos(PSI)), (SP = sin(PSI));\n  LAM = (mix(4, 11, g) * a + (wj ? key(JK[5], u) * wj : 0)) * D;\n  (LC = cos(LAM)), (LSN = sin(LAM));\n  // Legs half a stride apart, arms swinging against them; the lowest heel or\n  // ball stands on the belt.\n  let low = 0;\n  for (let i = 0; i \u003c 2; i++) {\n    const q = p + 0.5 * i, c = cos(2 * PI * q);\n    let th = ang(0, q, g) * a, kn = ang(1, q, g) * a + 3, an = ang(2, q, g) * a;\n    let sg = mix(-5 - 17 * c, -12 - 28 * c, g) * a, ep = mix(8, mix(14 + 8 * (1 - c), 80 + 9 * (1 - c), g), a);\n    if (wj) {\n      (th = mix(th, key(JK[0], u), wj)), (kn = mix(kn, key(JK[1], u), wj)), (an = mix(an, key(JK[2], u), wj));\n      (sg = mix(sg, key(JK[3], u), wj)), (ep = mix(ep, key(JK[4], u), wj));\n    }\n    const t1 = (LA[i * 3] = th * D), t2 = (LA[i * 3 + 1] = (th - kn) * D), t3 = (LA[i * 3 + 2] = (th - kn + an) * D);\n    const ay = LT * cos(t1) + LS * cos(t2);\n    low = max(low, ay + 4 * sin(t3) + 4.9 * cos(t3), ay - 9.2 * sin(t3) + 4.6 * cos(t3));\n    (AR[i * 2] = sg * D), (AR[i * 2 + 1] = ep * D);\n  }\n  // A run leaves the belt between steps; a jump leaves it higher.\n  const fl = g * g * a * 3.2 * max(0, (cos(4 * PI * (p - 0.45)) - 0.75) * 4) ** 1.5;\n  const v = (u - 0.46) / 0.44;\n  OY = FLOOR - low - fl - (v > 0 && v \u003c 1 ? 32 * v * (1 - v) : 0);\n  OX = mix(26.5 + 2.5 * g, 35, tf);\n  FT(-2.1, -41.4, 0);\n  (HX = gx), (HY = gy);\n  ETA = -LAM * 0.85 + 0.035 * sin(4 * PI * p) * a;\n  (HC = cos(ETA)), (HS = sin(ETA));\n  JA = 0.2 * wave * (0.6 + 0.4 * sin(tt * 9));\n  (JC = cos(JA)), (JS = sin(JA));\n  const wv = 0.3 * sin((tt - 1.9) * 2 * PI * 1.7) * sm(1.6, 2, tt);\n\n  B.fill(0);\n  T.fill(0);\n  TG = B;\n  treadmill(S.belt);\n  skull();\n  trunk(b);\n  for (let r = 0; r \u003c 2; r++) {\n    TG = r ? T : B;\n    leg(0, 1);\n    leg(1, -1);\n    arm(1, AR[0], AR[1], wave, wv);\n    arm(-1, AR[2], AR[3], 0, 0);\n  }\n  if (S.dose > 0.001) flesh(b);\n\n  // The screen turns bone and flesh to light. An afterglow fades behind what\n  // moves, and bright bone blooms a little.\n  const x3 = S.scr * 3, pi = min(2, floor(x3));\n  for (let j = 0; j \u003c 6; j++) PC[j] = mix(PAL[pi][j], PAL[pi + 1][j], x3 - pi);\n  const dec = exp(-S.dt / 0.07), gd = 0.62 * sqrt(S.dose), bg = S.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) GB[r + x] = 0.5 * G[r + x] + 0.25 * (G[r + (x ? x - 1 : x)] + G[r + (x \u003c W - 1 ? x + 1 : x)]);\n  for (let q = 0; q \u003c N; q++) {\n    const e = B[q] > 0 ? (1 - exp(-0.3 * B[q])) ** 1.35 : 0, t = T[q] > 0 ? gd * (1 - exp(-T[q] / 12)) : 0;\n    B[q] = e + t * (1 - e);\n    G[q] = max(B[q], GB[q] * dec);\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += B[r + cl(x + d, 0, W - 1)];\n      T[r + x] = a / 5;\n    }\n  const ch = (j, lv, w, ag) => min(255, 255 * (lv * (PC[j] + (1 - PC[j]) * w) + ag * PC[j + 3]));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += T[cl(y + d, 0, H - 1) * W + x];\n      const q = y * W + x, L = B[q], ag = (G[q] - L) * 0.3, lv = L + bg[q] + 0.045 * a, w = L * L * L * 0.75;\n      display.setPixel(x, y, ch(0, lv, w, ag), ch(1, lv, w, ag), ch(2, lv, w, ag));\n    }\n}\n","layer":{"id":"layer-fluoroscope","type":"code","name":"fluoroscope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fluoroscope\n// Family:  body\n// Idea:    On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after cineradiography, the X-ray motion pictures of the 1950s\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1\n//\n// Knob 1: Screen. The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour.\n// Knob 2: Speed. The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower.\n// Knob 3: Gait. A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps.\n// Knob 4: Dose. The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body.\n// Buttons: K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, sqrt, exp, floor, ceil, atan2, hypot, PI } = Math;\nconst D = PI / 180;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// A figure 114 LEDs tall: limb lengths and half spans of hips and shoulders.\n// FLOOR is the top of the belt. Bones are drawn half again as thick as life.\nconst LT = 27.5, LS = 27.5, LU = 20.5, LF = 16, HZ = 5.2, SZ = 12.4, FLOOR = 122.5;\n\n// For the walk (toe-off at 60%) and then the run (toe-off at 40%), the thigh's\n// angle from vertical and the flexion of knee and ankle, in degrees every 10%\n// of a stride from heel strike, after clinical gait curves.\nconst GT = [\n  [24, 20, 12, 3, -6, -14, -10, 6, 19, 25],\n  [4, 16, 18, 10, 5, 14, 38, 60, 45, 15],\n  [0, -5, 3, 6, 8, 0, -16, -10, -2, 1],\n  [30, 18, 5, -5, -12, -6, 12, 30, 42, 40],\n  [20, 38, 40, 28, 18, 50, 90, 104, 76, 36],\n  [6, 16, 20, 10, -18, -14, -2, 6, 8, 6],\n];\n// A periodic Catmull-Rom spline through a row.\nfunction curve(r, p) {\n  const f = (p - floor(p)) * 10, i = floor(f) % 10, u = f - floor(f);\n  const a = r[(i + 9) % 10], b = r[i], c = r[(i + 1) % 10], d = r[(i + 2) % 10];\n  return b + 0.5 * u * (c - a + u * (2 * a - 5 * b + 4 * c - d + u * (3 * (b - c) + d - a)));\n}\nconst ang = (k, q, g) => mix(curve(GT[k], q), curve(GT[k + 3], q), g);\n// The jump, keyed in seconds: thigh, knee, ankle, shoulder, elbow, lean.\nconst JT = [0, 0.3, 0.46, 0.7, 0.9, 1.1, 1.5];\nconst JK = [\n  [0, 50, 2, 30, 10, 42, 0],\n  [0, 95, 4, 58, 16, 76, 0],\n  [0, 24, -34, -18, -6, 20, 0],\n  [0, -40, 58, 50, 25, 10, 0],\n  [10, 15, 45, 50, 35, 30, 10],\n  [0, 24, 2, 4, 8, 20, 0],\n];\nfunction key(r, u) {\n  let i = 0;\n  while (i \u003c 5 && u > JT[i + 1]) i++;\n  return mix(r[i], r[i + 1], sm(JT[i], JT[i + 1], u));\n}\n\n// The spine's curve in the trunk's frame (x forward, y down from the hips).\nconst CY = [-41, -36.5, -32.5, -28, -23.5, -19, -15.5, -11.5, -7.5, -4.5];\nconst CX = [-2.2, -1.9, -3, -4.6, -5.3, -4.8, -3.8, -2.4, -2, -2.8];\nfunction spx(y) {\n  let i = 0;\n  while (i \u003c 8 && y > CY[i + 1]) i++;\n  return mix(CX[i], CX[i + 1], (y - CY[i]) / (CY[i + 1] - CY[i]));\n}\n// 24 vertebral bodies from the neck down: x, y, half sizes, tilt.\nconst VT = new Float64Array(144);\nfor (let v = 0, y = -40.8; v \u003c 24; v++) {\n  const k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2, h = [1.25, 1.3, 2.3][k], c = y + h / 2;\n  VT.set([spx(c), c, [1.3, 1.6, 2.2][k], h * 0.4, [1.6, 1.9, 2.6][k], -atan2(spx(c + 0.5) - spx(c - 0.5), 1)], v * 6);\n  y += h;\n}\n// Seven ribs stand for twelve. Each row gives the half depth and width of the\n// cage, the drop of the front end and its sag. The last number is how far\n// round the bone goes before the cartilage, which the beam passes through.\nconst RIB = [\n  [4, 5.5, 4, 0.6, 0.95], [5.4, 8.2, 6.2, 0.9, 0.92], [6.1, 10, 7.6, 1.1, 0.88], [6.6, 11.2, 8.4, 1.2, 0.82],\n  [6.7, 11.6, 8.6, 1.2, 0.75], [6.5, 11.4, 8.2, 1.1, 0.64], [6, 10.6, 7, 1, 0.5],\n];\n// The hip bone as lines split by NaN: the iliac crest, the front border down\n// to the socket, the back border, the brim from sacrum to pubis.\nconst IL = [\n  -6.6, -5.5, 4, -5.6, -9.4, 6.2, -3.6, -11.6, 7.8, -1, -11.8, 8.8, 1.8, -10.4, 9.2, 3.8, -8, 9, 4.2, -7.4, 9, 3, -3.6, 7.5, 1.8, -2.6, 6,\n  NaN, 0, 0, -6.6, -5.5, 4, -5.4, -2.6, 4.6, -4.6, -1.2, 4.8, -3.2, 1.2, 4.2, -2.8, 4, 4.2, -2.4, 6.4, 4.2,\n  NaN, 0, 0, -4.2, -3.4, 3.6, -1.6, -1.6, 4.4, 0.5, -1, 4.6, 2.6, 0.6, 3.6, 4.4, 3, 1.2,\n];\n// Gas pockets in the gut: x, y, z, size.\nconst GAS = [2.6, -13.6, -5, 1.4, 3.2, -7, 3, 1, -0.4, -5, -2.4, 0.9, 4.4, -3.6, -4.4, 0.85];\n// Fingers: offset across the palm and length; the share of each phalanx.\nconst FO = [1.25, 0.42, -0.42, -1.2], FLN = [5.4, 6, 5.6, 4.6], PHL = [0.45, 0.32, 0.23];\n// Phosphors: the glow and its afterglow.\nconst PAL = [\n  [0.45, 0.7, 1, 0.35, 1, 0.55],\n  [0.3, 1, 0.4, 0.15, 0.7, 0.25],\n  [1, 0.62, 0.18, 0.9, 0.3, 0.05],\n  [0.72, 0.38, 1, 0.35, 0.3, 1],\n];\n\n// Bone and flesh add up apart as path length along the beam; G is afterglow.\nconst B = new Float32Array(N), T = new Float32Array(N), G = new Float32Array(N), GB = new Float32Array(N);\nconst LA = new Float64Array(6), AR = new Float64Array(4), PC = new Float64Array(6), MO = new Float64Array(6), MI = new Float64Array(6);\nconst FR = new Float64Array(13), AV = new Float64Array(9);\nlet TG = B;\nlet PSI = 0, CP = 1, SP = 0, OX = 25, OY = 63, LAM = 0, LC = 1, LSN = 0;\nlet HX = 0, HY = 0, ETA = 0, HC = 1, HS = 0, JA = 0, JC = 1, JS = 0;\nlet gx = 0, gy = 0, gz = 0, qx = 0, qy = 0, qz = 0, FROT = 0;\nlet e1x = 1, e1y = 0, e1z = 0, e2x = 0, e2y = 1, e2z = 0, e3x = 0, e3z = 1;\n\n// Frames: body, with x forward and y down, trunk, head, jaw, and a limb's\n// own, whose first axis runs along the bone.\nconst FB = (x, y, z) => ((gx = x), (gy = y), (gz = z), (FROT = 0));\nconst FT = (x, y, z) => ((gx = x * LC - y * LSN), (gy = x * LSN + y * LC), (gz = z), (FROT = LAM));\nconst FH = (x, y, z) => ((gx = HX + x * HC - y * HS), (gy = HY + x * HS + y * HC), (gz = z), (FROT = ETA));\nconst FL = (u, v, w) => (\n  (gx = FR[0] + FR[3] * u + FR[6] * v + FR[9] * w), (gy = FR[1] + FR[4] * u + FR[7] * v + FR[10] * w), (gz = FR[2] + FR[5] * u + FR[8] * v + FR[11] * w), (FROT = FR[12])\n);\nfunction FJ(x, y, z) {\n  const dx = x - 1.3, dy = y + 2.6;\n  FH(1.3 + dx * JC - dy * JS, -2.6 + dx * JS + dy * JC, z);\n  FROT += JA;\n}\nfunction P() {\n  qx = OX + gx * CP - gz * SP;\n  qy = OY + gy;\n  qz = gx * SP + gz * CP;\n}\n\n// A tapered rod, hollow when sh > 0: the chord through a tube of cortex.\nfunction tube(ax, ay, bx, by, ra, rb, w, sh) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6, m = max(ra, rb) + 0.8;\n  const x0 = max(0, ceil(min(ax, bx) - m)), x1 = min(W - 1, floor(max(ax, bx) + m));\n  const y0 = max(0, ceil(min(ay, by) - m)), y1 = min(H - 1, floor(max(ay, by) + m));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const ux = x - ax, uy = y - ay, t = cl((ux * dx + uy * dy) / l2, 0, 1);\n      const ex = ux - t * dx, ey = uy - t * dy, d2 = ex * ex + ey * ey, R = ra + (rb - ra) * t + 0.3, o = R * R - d2;\n      if (o \u003c= 0) continue;\n      const ri = R - 0.85, i = ri * ri - d2;\n      TG[y * W + x] += 2 * w * (sqrt(o) - (sh && ri > 0 && i > 0 ? sh * sqrt(i) : 0));\n    }\n}\n// An ellipsoid seen along the beam: its quadric, and the chord through it.\nfunction quad(M, a, b, c) {\n  const A = 1 / (a * a), Bq = 1 / (b * b), C = 1 / (c * c);\n  M[0] = e1x * e1x * A + e2x * e2x * Bq + e3x * e3x * C;\n  M[1] = e1x * e1y * A + e2x * e2y * Bq;\n  M[2] = e1y * e1y * A + e2y * e2y * Bq;\n  M[3] = e1x * e1z * A + e2x * e2z * Bq + e3x * e3z * C;\n  M[4] = e1y * e1z * A + e2y * e2z * Bq;\n  M[5] = e1z * e1z * A + e2z * e2z * Bq + e3z * e3z * C;\n}\nfunction chord(M, u, v) {\n  const b = M[3] * u + M[4] * v, d = b * b - M[5] * (M[0] * u * u + 2 * M[1] * u * v + M[2] * v * v - 1);\n  return d > 0 ? (2 * sqrt(d)) / M[5] : 0;\n}\n// Tilted th in the side plane, turned yaw about the vertical. With a shell t\n// the inside counts k less, so a skull's edge glows brighter than its face.\nfunction ell(cx, cy, a, b, c, th, yaw, w, t, k) {\n  (a += 0.3), (b += 0.3), (c += 0.3);\n  const ph = PSI + yaw, cp = cos(ph), sp = sin(ph), ct = cos(th), st = sin(th);\n  (e1x = ct * cp), (e1y = st), (e1z = ct * sp), (e2x = -st * cp), (e2y = ct), (e2z = -st * sp), (e3x = -sp), (e3z = cp);\n  quad(MO, a, b, c);\n  if (t) quad(MI, a - t, b - t, c - t);\n  const rx = hypot(e1x * a, e2x * b, e3x * c) + 0.5, ry = hypot(e1y * a, e2y * b) + 0.5;\n  const x0 = max(0, ceil(cx - rx)), x1 = min(W - 1, floor(cx + rx)), y0 = max(0, ceil(cy - ry)), y1 = min(H - 1, floor(cy + ry));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      let s = chord(MO, x - cx, y - cy);\n      if (s > 0 && t) s -= k * chord(MI, x - cx, y - cy);\n      if (s > 0) TG[y * W + x] += s * w;\n    }\n}\n// The far side of the body glows dimmer than the near side.\nconst wz = () => (TG === B ? cl(1 + 0.09 * qz, 0.45, 1.15) : 1);\nfunction E(F, x, y, z, a, b, c, th, yaw, w, t = 0, k = 0) {\n  F(x, y, z);\n  P();\n  ell(qx, qy, a, b, c, th + FROT, yaw, w * wz(), t, k);\n}\nfunction Tb(F, x1, y1, z1, x2, y2, z2, ra, rb, w, sh = 0) {\n  F(x1, y1, z1);\n  P();\n  const ax = qx, ay = qy, az = qz;\n  F(x2, y2, z2);\n  P();\n  qz = (qz + az) / 2;\n  tube(ax, ay, qx, qy, ra, rb, w * wz(), sh);\n}\n\nexport function setup(params) {\n  const bg = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x - 31.5) / 36, v = (y - 63.5) / 72;\n      bg[y * W + x] = (0.03 + 0.025 * Math.random()) * max(0, 1 - 0.8 * (u * u + v * v) ** 2);\n    }\n  params.s = { ph: 0.05, br: 0, belt: 0, turn: -1, jump: -1, dt: 1 / 30, scr: 0, spd: 2, gait: 0, dose: 0.06, amp: 1, bg };\n  G.fill(0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], b = input.btnPressed || [];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dt = dt || 1 / 30;\n  S.scr = cl(k[0], 0, 1);\n  S.spd = cl(k[1], 0.2, 3);\n  const g = (S.gait = cl(k[2], 0, 1));\n  S.dose = cl(k[3], 0, 1);\n  if (b[0] && S.turn \u003c 0) S.turn = 0;\n  if (b[1] && S.jump \u003c 0) S.jump = 0;\n  if (S.turn >= 0 && (S.turn += dt) > 5) S.turn = -1;\n  if (S.jump >= 0 && (S.jump += dt) > 1.5) S.jump = -1;\n  const a = (S.amp = S.turn \u003c 0 ? 1 : 1 - sm(0, 0.7, S.turn) * (1 - sm(4.3, 5, S.turn)));\n  const f = (mix(0.93, 1.4, g) * S.spd) / 2, to = mix(0.6, 0.4, g);\n  S.ph = (S.ph + dt * f * a) % 1;\n  // The belt runs as fast as the foot on it goes back, from strike to toe-off.\n  const ax = (q) => LT * sin(ang(0, q, g) * D) + LS * sin((ang(0, q, g) - ang(1, q, g)) * D);\n  S.belt += (dt * a * a * f * (ax(0) - ax(to))) / to;\n  S.br = (S.br + dt * mix(0.25, 0.5, g)) % 1;\n}\n\nfunction treadmill(belt) {\n  const y = FLOOR + 1.7, an = -belt / 2.3, c = 1.8 * cos(an), s = 1.8 * sin(an);\n  tube(4.5, y, 59.5, y, 0.8, 0.8, 0.45, 0.5);\n  tube(4.5, FLOOR + 0.1, 59.5, FLOOR + 0.1, 0.2, 0.2, 0.3, 0);\n  for (let x = 4.5; x \u003c 60; x += 55) {\n    ell(x, y, 2.1, 2.1, 2.1, 0, 0, 0.45, 0.6, 1);\n    tube(x - c, y - s, x + c, y + s, 0.35, 0.35, 0.5, 0);\n  }\n  for (let j = 0; j \u003c 8; j++) {\n    const x = 5 + ((((j * 7 - belt) % 56) + 56) % 56);\n    tube(x, FLOOR - 0.2, x + 1, FLOOR - 0.2, 0.3, 0.3, 0.5, 0);\n  }\n}\n\nfunction skull() {\n  // The vault, upper jaw, chin and hollow eye sockets; then the dense bone of\n  // the ear, the cheekbone, the teeth and the jaw.\n  E(FH, 1.8, -7.2, 0, 7, 6.1, 5.8, -0.12, 0, 0.7, 0.5, 1);\n  E(FH, 6.4, -1.6, 0, 2.6, 1.6, 3.4, 0.1, 0, 0.4, 0.5, 0.5);\n  E(FJ, 7.9, 3.2, 0, 1.4, 1.3, 2, 0, 0, 0.7, 0.5, 0.5);\n  Tb(FH, 7.6, -5.6, 0, 8.7, -3, 0, 0.45, 0.4, 0.9);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    E(FH, 6.2, -4.6, s * 2.7, 1.9, 2, 1.4, 0, s * 0.5, 0.7, 0.55, 1);\n    E(FH, 6, -4.6, s * 2.4, 1.6, 1.7, 1.6, 0, 0, -0.35);\n    E(FH, 6.2, -1.9, s * 2, 1.5, 1.1, 1.4, 0, 0, -0.3);\n    E(FH, 0.3, -3.4, s * 3.4, 1.7, 1.3, 1.4, 0.3, 0, 0.8);\n    Tb(FH, 2.2, -2.4, s * 5, 6.2, -2.9, s * 4.2, 0.55, 0.65, 0.8);\n    Tb(FH, 8.6, 0.1, 0, 7.4, 0.1, s * 2.3, 0.75, 0.7, 1);\n    Tb(FH, 7.4, 0.1, s * 2.3, 4.6, 0.2, s * 3.2, 0.7, 0.75, 1);\n    Tb(FJ, 8.2, 1.3, 0, 7.2, 1.3, s * 2.3, 0.7, 0.65, 1);\n    Tb(FJ, 7.2, 1.3, s * 2.3, 4.6, 1.2, s * 3.1, 0.65, 0.7, 1);\n    Tb(FJ, 8.3, 3.7, 0, 6.6, 3.5, s * 2.8, 1, 0.9, 0.9, 0.5);\n    Tb(FJ, 6.6, 3.5, s * 2.8, 2, 3.1, s * 4.7, 0.9, 0.85, 0.9, 0.5);\n    Tb(FJ, 2, 3.1, s * 4.7, 1.3, -2.2, s * 4.7, 0.85, 0.7, 0.9, 0.4);\n    Tb(FJ, 2.7, 0.8, s * 4.5, 3.5, -1.8, s * 4.3, 0.55, 0.35, 0.8);\n  }\n}\n\nfunction trunk(b) {\n  // Vertebrae, sacrum, tailbone, and the breastbone moving out on the breath.\n  for (let v = 0; v \u003c 24; v++) {\n    const o = v * 6, x = VT[o], y = VT[o + 1], a = VT[o + 2], k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2;\n    E(FT, x, y, 0, a, VT[o + 3], VT[o + 4], VT[o + 5], 0, 0.55, 0.45, 0.7);\n    Tb(FT, x - a + 0.2, y, 0, x - a - (v === 6 ? 3.6 : [2.2, 3, 3.4][k]), y + [0.5, 1.6, 0.4][k], 0, 0.45, 0.3, k === 1 ? 0.4 : 0.7);\n  }\n  Tb(FT, -3.6, -4.8, 0, -6.6, 2.6, 0, 2.5, 1, 0.8, 0.5);\n  Tb(FT, -6.6, 2.6, 0, -5.2, 5.6, 0, 0.8, 0.45, 0.8);\n  const sb = 0.5 * b;\n  Tb(FT, 5 + sb, -31, 0, 6.6 + sb, -23.5, 0, 1.2, 0.9, 0.9, 0.5);\n  Tb(FT, 6.6 + sb, -23.5, 0, 7 + sb, -19.5, 0, 0.9, 0.45, 0.8);\n  E(FT, 5.2 + sb, -29.8, 0, 1.3, 1.9, 2.4, -0.2, 0, 0.7, 0.5, 0.6);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    // Hip bone: faint wing, its lines, socket, obturator ring.\n    E(FT, -1.5, -6.5, s * 6, 5.4, 4.8, 2.6, -0.35, s * 0.55, 0.2, 0.5, 1);\n    for (let i = 3; i \u003c IL.length; i += 3)\n      if (IL[i] === IL[i] && IL[i - 3] === IL[i - 3]) Tb(FT, IL[i - 3], IL[i - 2], s * IL[i - 1], IL[i], IL[i + 1], s * IL[i + 2], 0.45, 0.45, 0.85);\n    E(FT, 0, 0, s * HZ, 3.2, 3.2, 3, 0, 0, 0.4, 0.6, 1);\n    E(FT, 1, 4.6, s * 3.8, 3.2, 2.2, 1.6, 0.3, s * 0.3, 0.4, 0.5, 1);\n    // Collarbone, shoulder blade, the spine of the blade and the coracoid.\n    Tb(FT, 4.6, -32.2, s * 1.6, 2.2, -33.3, s * 7.4, 0.85, 0.8, 0.9, 0.4);\n    Tb(FT, 2.2, -33.3, s * 7.4, -1, -34.6, s * 12, 0.8, 0.9, 0.9, 0.4);\n    E(FT, -5.6, -27.5, s * 8.3, 2, 6.2, 4.6, 0.1, s * 0.6, 0.2, 0.4, 1);\n    Tb(FT, -7.4, -30.6, s * 5.4, -1.4, -35, s * 11.6, 0.6, 0.75, 0.9);\n    Tb(FT, 0.4, -32.4, s * 10, 2.4, -31.6, s * 9, 0.5, 0.45, 0.8);\n    // The ribs swing up and out on the breath.\n    for (let i = 0; i \u003c 7; i++) {\n      const r = RIB[i], ya = -31.5 + 2.4 * i, xa = spx(ya) - 1.3, rx = r[0] * (1 + 0.06 * b), rz = r[1] * (1 + 0.04 * b), dr = r[2] - 1.3 * b;\n      let px = xa, py = ya, pz = s * 1.6;\n      for (let j = 1; j \u003c= 5; j++) {\n        const al = (r[4] * PI * j) / 5, ca = 1 - cos(al), x = xa + rx * ca, y = ya + (dr * ca) / 2 + r[3] * sin(al), z = s * (1.6 + rz * sin(al));\n        Tb(FT, px, py, pz, x, y, z, 0.3, 0.25, 0.9);\n        (px = x), (py = y), (pz = z);\n      }\n    }\n  }\n}\n\nfunction flesh(b) {\n  E(FH, 2.4, -6, 0, 8, 8.4, 6.8, -0.1, 0, 1);\n  Tb(FT, -1.6, -31, 0, -0.6, -41, 0, 4.6, 4.2, 1);\n  E(FT, -0.2 + 0.3 * b, -23.5, 0, 9.4 + 0.4 * b, 11.5, 12.6, 0.05, 0, 1);\n  E(FT, 1.4, -9.5, 0, 8.8, 8.6, 11.4, 0, 0, 1);\n  E(FT, -1.6, -0.8, 0, 8.8, 8, 12.4, 0, 0, 1);\n  // Air in the lungs and windpipe and in the gut; heart and liver a little denser.\n  for (let s = -1; s \u003c= 1; s += 2) E(FT, -0.3, -24.4 + 0.6 * b, s * 5.8, 5.6 + 0.3 * b, 8 + 0.5 * b, 5.4, 0.1, s * 0.15, -1);\n  Tb(FT, 2.4, -40.5, 0, 0.8, -28.6, 0, 1, 1, -1);\n  E(FT, 3.6, -19.4, -1.6, 4, 4.6, 4.2, 0.6, 0, 0.55);\n  E(FT, 1.4, -12.6, 3.2, 6, 4.2, 6.8, 0.3, 0, 0.3);\n  for (let i = 0; i \u003c 16; i += 4) E(FT, GAS[i], GAS[i + 1], GAS[i + 2], 1.8 * GAS[i + 3], 1.4 * GAS[i + 3], 1.8 * GAS[i + 3], 0, 0, -0.8);\n}\n\nfunction leg(i, s) {\n  const t1 = LA[i * 3], t2 = LA[i * 3 + 1], t3 = LA[i * 3 + 2], z = s * HZ, bone = TG === B;\n  const dx = sin(t1), dy = cos(t1), kx = LT * dx, ky = LT * dy, ex = sin(t2), ey = cos(t2), ax = kx + LS * ex, ay = ky + LS * ey, fx = cos(t3), fy = -sin(t3);\n  // Femur: head in its socket, neck, greater trochanter, shaft, condyles.\n  FR.set([0, 0, z, dx, dy, 0, dy, -dx, 0, 0, 0, s, -t1]);\n  if (!bone) Tb(FL, -1, 0, 0, LT, 0, 0, 6.4, 4.4, 1);\n  else {\n    E(FL, 0, 0, 0, 2.3, 2.3, 2.3, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 0, 0, 0, 2.6, 0, 2.6, 1.3, 1.4, 0.6);\n    E(FL, 1.6, -1.5, 3.2, 1.7, 2.1, 1.5, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 2.8, 0, 2.6, LT - 2.4, 0, 0.4, 1.75, 1.6, 1, 0.85);\n    E(FL, LT - 1.2, -0.3, 0, 2.5, 2.4, 3.4, 0, 0, 0.7, 0.6, 0.6);\n    // The kneecap rides over the joint, halfway between thigh and shank.\n    const h = (t1 + t2) / 2;\n    E(FB, kx + cos(h) * 3.2, ky - sin(h) * 3.2, z, 1, 1.8, 1.5, -h, 0, 0.85, 0.45, 0.5);\n  }\n  // Tibia and the thinner fibula behind it.\n  FR.set([kx, ky, z, ex, ey, 0, ey, -ex, 0, 0, 0, s, -t2]);\n  if (!bone) Tb(FL, 0, 0, 0, LS, 0, 0, 4.2, 2.4, 1), E(FL, 8, -1.6, 0, 3, 6.5, 3.2, 0, 0, 1);\n  else {\n    E(FL, 1.9, 0, 0, 2.8, 1.4, 3.3, 0, 0, 0.7, 0.5, 0.5);\n    Tb(FL, 3, 0.3, 0, LS - 1.8, 0, 0, 1.75, 1.2, 1, 0.85);\n    E(FL, LS - 1, 0, -0.4, 1.6, 1.7, 2.2, 0, 0, 0.75, 0.5, 0.4);\n    E(FL, 3.6, -1.9, 2, 1, 1, 1, 0, 0, 0.8);\n    Tb(FL, 4, -1.9, 2, LS - 0.8, -1, 2.4, 0.7, 0.6, 0.95, 0.3);\n    E(FL, LS + 0.3, -1, 2.6, 1, 1.5, 1, 0, 0, 0.8);\n  }\n  // Foot: talus, heel, arch, two metatarsals for five, and toes that stay flat\n  // on the belt as the heel lifts.\n  FR.set([ax, ay, z, fx, fy, 0, -fy, fx, 0, 0, 0, s, -t3]);\n  if (!bone) return Tb(FL, -3, 2.6, 0, 10, 3, 0, 2.3, 1.6, 1);\n  E(FL, 0.6, 1, 0, 2.2, 1.5, 1.6, 0, 0, 0.8, 0.5, 0.5);\n  E(FL, -2.4, 2.9, 0, 3.3, 1.8, 1.6, -0.3, 0, 0.8, 0.6, 0.55);\n  E(FL, 3.3, 1.7, 0, 1.5, 1.3, 1.8, 0, 0, 0.85);\n  E(FL, 2.6, 3.1, 0, 1.2, 1, 1.2, 0, 0, 0.8);\n  Tb(FL, 4.4, 1.9, 0, 9.2, 3.5, 0, 0.65, 0.6, 1, 0.3);\n  Tb(FL, 3.6, 3.4, 1, 8.4, 3.9, 1, 0.55, 0.5, 0.9);\n  FL(9.2, 3.5, 0);\n  const d = t3 \u003c 0 ? -t3 * (1 - sm(0.4, 3, FLOOR - OY - gy - 1.1)) : 0, c = cos(d), n = -sin(d);\n  Tb(FL, 9.2, 3.5, 0, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 0.5, 0.45, 0.95);\n  Tb(FL, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 9.2 + c * 4.2, 3.5 + n * 4.2, 0, 0.45, 0.4, 0.9);\n}\n\nfunction arm(s, sig, eps, k, wv) {\n  FT(-1, -33, s * SZ);\n  const sx = gx, sy = gy, sz = gz, au = sig + LAM, af = au + eps, V = AV;\n  // Axes of the upper arm and forearm, and the thumb side of the hand. In the\n  // wave the elbow goes out to the side and the forearm up, palm to you.\n  V.set([sin(au), cos(au), s * 0.1, sin(af), cos(af), s * 0.04, cos(af), -sin(af), 0]);\n  if (k > 0) {\n    const A = [0.2, 0.62, s * 0.76, 0.15, -cos(wv), s * (sin(wv) - 0.1), 0, 0, -s];\n    for (let j = 0; j \u003c 9; j++) V[j] = mix(V[j], A[j], k);\n  }\n  for (let j = 0; j \u003c 9; j += 3) {\n    const d = j === 6 ? V[6] * V[3] + V[7] * V[4] + V[8] * V[5] : 0;\n    for (let c = 0; c \u003c 3; c++) V[j + c] -= d * V[3 + c];\n    const l = hypot(V[j], V[j + 1], V[j + 2]) || 1;\n    for (let c = 0; c \u003c 3; c++) V[j + c] /= l;\n  }\n  const [ux, uy, uz, fx, fy, fz, px, py, pz] = V, ex = sx + LU * ux, ey = sy + LU * uy, ez = sz + LU * uz;\n  // The forearm's frame from the elbow, its third axis toward the palm.\n  FR.set([ex, ey, ez, fx, fy, fz, px, py, pz, s * (fy * pz - fz * py), s * (fz * px - fx * pz), s * (fx * py - fy * px), -af]);\n  if (TG === T) {\n    Tb(FB, sx, sy, sz, ex, ey, ez, 2.8, 2.2, 1);\n    Tb(FL, 0, 0, 0, LF, 0, 0, 2.2, 1.6, 1);\n    return Tb(FL, LF, 0, 0, LF + 7, 0, 0, 1.5, 1.1, 1);\n  }\n  // Humerus, ulna with the point of the elbow, radius, wrist, four fingers\n  // curled a little toward the palm, thumb.\n  E(FB, sx, sy, sz, 2.2, 2.2, 2.2, 0, 0, 0.8, 0.7, 0.5);\n  Tb(FB, sx + ux * 1.8, sy + uy * 1.8, sz + uz * 1.8, ex - ux * 1.3, ey - uy * 1.3, ez - uz * 1.3, 1.35, 1.15, 1, 0.85);\n  E(FB, ex - ux * 0.8, ey - uy * 0.8, ez - uz * 0.8, 1.3, 1.5, 2.5, -au, 0, 0.8, 0.5, 0.5);\n  E(FL, 0.3, -1, 0, 1, 1, 1, 0, 0, 0.9);\n  Tb(FL, 0.8, -0.5, 0, LF, -0.5, 0, 0.75, 0.55, 1, 0.5);\n  Tb(FL, 1.2, 0.5, 0, LF, 0.55, 0, 0.6, 0.95, 1, 0.5);\n  E(FL, LF + 1.4, 0, 0, 1.5, 1.3, 1.5, 0, 0, 0.9, 0.5, 0.4);\n  const c0 = mix(0.3, 0.06, k);\n  for (let j = 0; j \u003c 5; j++) {\n    const th = j > 3, o = th ? 2.2 : FO[j];\n    let x = LF + (th ? 3.2 : 5.8), y = o, z = 0, c = 0;\n    Tb(FL, LF + (th ? 1 : 2.2), th ? 0.9 : o / 2, 0, x, y, z, 0.5, 0.45, 0.95);\n    for (let m = 0; m \u003c (th ? 2 : 3); m++) {\n      c += c0;\n      const L = th ? 2 - 0.4 * m : FLN[j] * PHL[m], X = x + cos(c) * L, Y = y + (th ? 0.7 * L : 0), Z = z + sin(c) * L;\n      Tb(FL, x, y, z, X, Y, Z, 0.42, 0.36, 0.9);\n      (x = X), (y = Y), (z = Z);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const g = S.gait, a = S.amp, p = S.ph, u = S.jump, tt = S.turn, b = sin(2 * PI * S.br);\n  const wj = u \u003c 0 ? 0 : sm(0, 0.2, u) * (1 - sm(1.15, 1.5, u));\n  const tf = tt \u003c 0 ? 0 : sm(0.5, 1.4, tt) * (1 - sm(3.8, 4.7, tt));\n  const wave = tt \u003c 0 ? 0 : sm(1.4, 1.9, tt) * (1 - sm(3.3, 3.8, tt));\n  PSI = (PI / 2) * tf;\n  (CP = cos(PSI)), (SP = sin(PSI));\n  LAM = (mix(4, 11, g) * a + (wj ? key(JK[5], u) * wj : 0)) * D;\n  (LC = cos(LAM)), (LSN = sin(LAM));\n  // Legs half a stride apart, arms swinging against them; the lowest heel or\n  // ball stands on the belt.\n  let low = 0;\n  for (let i = 0; i \u003c 2; i++) {\n    const q = p + 0.5 * i, c = cos(2 * PI * q);\n    let th = ang(0, q, g) * a, kn = ang(1, q, g) * a + 3, an = ang(2, q, g) * a;\n    let sg = mix(-5 - 17 * c, -12 - 28 * c, g) * a, ep = mix(8, mix(14 + 8 * (1 - c), 80 + 9 * (1 - c), g), a);\n    if (wj) {\n      (th = mix(th, key(JK[0], u), wj)), (kn = mix(kn, key(JK[1], u), wj)), (an = mix(an, key(JK[2], u), wj));\n      (sg = mix(sg, key(JK[3], u), wj)), (ep = mix(ep, key(JK[4], u), wj));\n    }\n    const t1 = (LA[i * 3] = th * D), t2 = (LA[i * 3 + 1] = (th - kn) * D), t3 = (LA[i * 3 + 2] = (th - kn + an) * D);\n    const ay = LT * cos(t1) + LS * cos(t2);\n    low = max(low, ay + 4 * sin(t3) + 4.9 * cos(t3), ay - 9.2 * sin(t3) + 4.6 * cos(t3));\n    (AR[i * 2] = sg * D), (AR[i * 2 + 1] = ep * D);\n  }\n  // A run leaves the belt between steps; a jump leaves it higher.\n  const fl = g * g * a * 3.2 * max(0, (cos(4 * PI * (p - 0.45)) - 0.75) * 4) ** 1.5;\n  const v = (u - 0.46) / 0.44;\n  OY = FLOOR - low - fl - (v > 0 && v \u003c 1 ? 32 * v * (1 - v) : 0);\n  OX = mix(26.5 + 2.5 * g, 35, tf);\n  FT(-2.1, -41.4, 0);\n  (HX = gx), (HY = gy);\n  ETA = -LAM * 0.85 + 0.035 * sin(4 * PI * p) * a;\n  (HC = cos(ETA)), (HS = sin(ETA));\n  JA = 0.2 * wave * (0.6 + 0.4 * sin(tt * 9));\n  (JC = cos(JA)), (JS = sin(JA));\n  const wv = 0.3 * sin((tt - 1.9) * 2 * PI * 1.7) * sm(1.6, 2, tt);\n\n  B.fill(0);\n  T.fill(0);\n  TG = B;\n  treadmill(S.belt);\n  skull();\n  trunk(b);\n  for (let r = 0; r \u003c 2; r++) {\n    TG = r ? T : B;\n    leg(0, 1);\n    leg(1, -1);\n    arm(1, AR[0], AR[1], wave, wv);\n    arm(-1, AR[2], AR[3], 0, 0);\n  }\n  if (S.dose > 0.001) flesh(b);\n\n  // The screen turns bone and flesh to light. An afterglow fades behind what\n  // moves, and bright bone blooms a little.\n  const x3 = S.scr * 3, pi = min(2, floor(x3));\n  for (let j = 0; j \u003c 6; j++) PC[j] = mix(PAL[pi][j], PAL[pi + 1][j], x3 - pi);\n  const dec = exp(-S.dt / 0.07), gd = 0.62 * sqrt(S.dose), bg = S.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) GB[r + x] = 0.5 * G[r + x] + 0.25 * (G[r + (x ? x - 1 : x)] + G[r + (x \u003c W - 1 ? x + 1 : x)]);\n  for (let q = 0; q \u003c N; q++) {\n    const e = B[q] > 0 ? (1 - exp(-0.3 * B[q])) ** 1.35 : 0, t = T[q] > 0 ? gd * (1 - exp(-T[q] / 12)) : 0;\n    B[q] = e + t * (1 - e);\n    G[q] = max(B[q], GB[q] * dec);\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += B[r + cl(x + d, 0, W - 1)];\n      T[r + x] = a / 5;\n    }\n  const ch = (j, lv, w, ag) => min(255, 255 * (lv * (PC[j] + (1 - PC[j]) * w) + ag * PC[j + 3]));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += T[cl(y + d, 0, H - 1) * W + x];\n      const q = y * W + x, L = B[q], ag = (G[q] - L) * 0.3, lv = L + bg[q] + 0.045 * a, w = L * L * L * 0.75;\n      display.setPixel(x, y, ch(0, lv, w, ag), ch(1, lv, w, ag), ch(2, lv, w, ag));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Screen","min":0,"max":1,"about":"The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour."},{"name":"Speed","min":0.2,"max":3,"about":"The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower."},{"name":"Gait","min":0,"max":1,"about":"A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps."},{"name":"Dose","min":0,"max":1,"about":"The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body."}],"start":[0,2,0,0.06],"measures":{"motion":0.988,"detail":0.0374,"edges":0.3589,"complexity":1.506,"coverage":0.2562,"colour":0.1011,"drift":0.06},"knobResponse":[0.0534,0.0544,0.0908,0.0578]},{"slug":"flying-trapeze","title":"Flying Trapeze","family":"stage","round":24,"note":"밤의 서커스 천막 꼭대기를 올려다봐요. 빨강과 크림 줄무늬 천 아래에서 플라이어가 공중그네를 타고 나가 공중제비를 돌고, 무릎으로 매달린 캐처가 손을 잡아요. 팔로 스폿 셋이 연무 속에 빛줄기를 그으며 따라가고, 차례가 끝나면 그물로 떨어져 튀어 올라요. K1 을 누르면 북이 울리고 세 바퀴 공중제비가 나와요.","idea":"Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.","buttons":"K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.","code":"// ===== Patternflow pattern =====\n// Title:   Flying Trapeze\n// Family:  stage\n// Idea:    Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the flying trapeze act Jules Léotard first flew at the Cirque Napoléon in 1859\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1\n//\n// Knob 1: Lights. The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them.\n// Knob 2: Speed. How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Turns. The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer.\n// Knob 4: Haze. How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels.\n// Buttons: K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, ceil, round, atan2, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (s) => s - sin(TAU * s) * (0.8 / TAU);\nconst rnd = () => Math.random();\n// A swing of the fly bar out and back, in seconds at Speed 2.\nconst PB = 2.4;\nconst OM = TAU / PB;\n// The fly bar's crane and rope; the catcher's cradle, rope and swing.\nconst [PFX, PFY, LF] = [24, 30, 34];\nconst [PCX, PCY, LC, B] = [57, 30, 20, 0.18];\n// The board's top, where the next flyer waits on it, and the rope ladder.\nconst [BY, WX, LX] = [68, 1.2, 2.6];\n// Hips above feet, hands above hips, gravity, and the time of the flight back to the bar.\nconst [LEG, HL, G, TR] = [3.8, 5.7, 90, 0.45];\n// Follow spots below the panel behind the crowd, and how fast their cones open.\nconst SPOT = [[-14, 166], [78, 166], [32, 186]];\nconst TA = 0.046;\n// Gels by the Lights knob: house wash (0..1), three spots, two flyers and the catcher.\nconst PAL = [\n  [[1, 0.8, 0.52], [255, 226, 170], [255, 244, 222], [255, 206, 120], [255, 182, 36], [205, 222, 255], [70, 120, 255]],\n  [[1, 0.64, 0.5], [255, 182, 120], [255, 150, 150], [255, 208, 150], [255, 96, 112], [255, 206, 60], [250, 240, 230]],\n  [[0.82, 0.52, 0.86], [255, 122, 196], [186, 142, 255], [255, 166, 214], [255, 62, 196], [160, 104, 255], [110, 236, 214]],\n  [[0.46, 0.44, 1], [255, 76, 170], [66, 128, 255], [172, 96, 255], [255, 44, 156], [36, 150, 255], [245, 245, 255]],\n];\nconst [SKIN, STEEL, ROPE, BAR] = [[255, 196, 156], [170, 176, 190], [150, 138, 116], [215, 215, 225]];\nconst ONNET = { drop: 1, net: 1, up: 1, tada: 1 };\n\nconst mkF = (c) => ({ m: 'wait', x: WX, y: BY - LEG, ph: 0, fs: 1, a1: 2.9, a2: 2.9, l1: 0, l2: 0, k1: 0, k2: 0, hx: null, T: 0, sx: 0, sy: 0, c });\n// Thighs, knees and arms of a figure, both sides.\nconst lim = (f, l1, l2, k1, k2, a1, a2) => Object.assign(f, { l1, l2, k1, k2, a1, a2 });\nconst rest = (f) => ((f.hx = null), lim(f, 0, 0, 0, 0, 2.9, 2.9));\nconst barAt = (th) => [PFX + LF * sin(th), PFY + LF * cos(th)];\nconst netY = (x) => 98.5 + 1.6 * sin((PI * cl(x, 0, 63)) / 63);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = {\n    t: 0, started: false, F: F32(N * 3), LT: F32(N * 3), CA: F32(N * 3), CI: F32(N), AUD: F32(N), ROW: new Int8Array(N).fill(-1), POOL: F32(H),\n    bar: 'free', A: 0.55, phc: 0, fl: [mkF(4), mkF(5)], star: 0,\n    sp: SPOT.map(([sx, sy]) => ({ sx, sy, ax: 30, ay: 50, ux: 0, uy: -1, D: 110 })),\n    drum: 0, drumB: 0, pop: 0, wash: 1, trip: false, nextFin: true, turns: 1, net: { s: 0, v: 0, x: 32 }, fx: [], phones: [], P: PAL[0].map((c) => c.slice()), hz: 0.3,\n  };\n  // The canvas: red and cream panels running down from the peak, each billowing between its seams.\n  for (let y = 0; y \u003c H; y++) {\n    S.POOL[y] = exp(-(((y - 17) / 15) ** 2));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, dx = x - 32, dy = y - 5, a = atan2(dx, dy);\n      const red = 0.5 + 0.5 * cl(sin(a * 7) * 4, -1, 1);\n      const k = (0.84 - 0.16 * cos(a * 14)) * sm(2.5, 6, sqrt(dx * dx + dy * dy));\n      S.CA[i * 3] = mix(0.95, 0.88, red) * k;\n      S.CA[i * 3 + 1] = mix(0.86, 0.12, red) * k;\n      S.CA[i * 3 + 2] = mix(0.68, 0.12, red) * k;\n      S.CI[i] = (0.3 + 0.7 * exp(-((dx * dx) / 900 + (dy * dy) / 300))) * sm(40, 20, y);\n    }\n  }\n  // The crowd: rows of heads and shoulders, bigger towards the front, each row a solid band below.\n  [[108.5, 1.9, 4.6], [114, 2.3, 5.4], [120.5, 2.8, 6.4], [127.5, 3.4, 7.6]].forEach(([base, r, gap], k) => {\n    for (let cx = -2 + rnd() * gap; cx \u003c W + 3; cx += gap * (0.8 + 0.4 * rnd())) {\n      const hy = base - r * 1.15 + (rnd() - 0.5) * 1.2, hx = cx + rnd() - 0.5;\n      for (let y = max(0, floor(hy - r - 1)); y \u003c H; y++)\n        for (let x = max(0, floor(hx - r * 2.4)); x \u003c= min(W - 1, ceil(hx + r * 2.4)); x++) {\n          const hd = r + 0.5 - sqrt((x - hx) ** 2 + (y - hy) ** 2);\n          const sh = 1 - sqrt(((x - hx) / (r * 2.2)) ** 2 + ((y - base) / (r * 0.9)) ** 2);\n          const c = y >= base ? 1 : cl(max(hd, sh * r * 2), 0, 1), i = y * W + x;\n          if (c > S.AUD[i]) S.AUD[i] = c;\n          if (c > 0.5) S.ROW[i] = k;\n        }\n      if (rnd() \u003c 0.09) S.phones.push([round(hx + 1), round(hy - r - 1)]);\n    }\n  });\n  params.s = S;\n}\n\n// The catcher at swing angle psi: knees over the bar, body hanging, arms reaching for the flyer.\nfunction cpose(psi) {\n  const ps = psi * 1.2, bx = PCX + LC * sin(psi), by = PCY + LC * cos(psi), sx = sin(ps), sy = cos(ps);\n  const hx = bx + 1.9 * sx, hy = by + 1.9 * sy;\n  const ax = sx * cos(0.2) - sy * sin(0.2), ay = sy * cos(0.2) + sx * sin(0.2);\n  return { bx, by, x: hx, y: hy, ph: PI - ps, fs: 1, l1: 0, l2: 0, k1: 1.5, k2: 1.3, hx: hx + 3 * sx + 2.7 * ax, hy: hy + 3 * sy + 2.7 * ay };\n}\n\nfunction newRound(S, go, who) {\n  const trip = S.trip, turns = trip ? 3 : S.turns, fin = trip || S.nextFin, tf = 0.75 + 0.25 * turns, tr = go + 1.5 * PB;\n  S.trip = false;\n  S.nextFin = !fin;\n  S.rd = { turns, fin, tf, h: 8 + 3 * turns, tg: go, tr, tc: tr + tf, rel: false, A0: S.A, A: 0.55 + 0.03 * (turns - 1), t0: S.t, over: false };\n  S.star = who;\n  // The catcher times his swing to be out at the front of it when she arrives.\n  const dt = max(0.3, S.rd.tc - S.t);\n  let k = round((S.phc + OM * dt) / TAU);\n  if ((TAU * k - S.phc) / dt \u003c 0.6 * OM) k++;\n  S.ct = { ph: TAU * k, t: S.rd.tc, ev: 0 };\n}\n\nconst burst = (S, n) => {\n  for (let i = 0; i \u003c n; i++) S.fx.push({ x: 2 + rnd() * 60, y: 106 + rnd() * 20, a: 1, w: rnd() * 0.25 });\n};\n\nfunction catcherEvent(S, ev) {\n  const rd = S.rd, f = S.fl[S.star];\n  f.T = 0;\n  f.ph0 = f.ph;\n  if (ev === 0) {\n    // The catch: the house comes up and the crowd's cameras go off.\n    if (f.m === 'fly') f.m = 'caught';\n    burst(S, 7, (S.pop = 1));\n    S.ct = rd.fin ? { ph: S.phc + 1.5 * PI, t: S.t + 2.4, ev: 2 } : { ph: S.phc + TAU, t: rd.tg + 3.5 * PB - TR, ev: 1 };\n  } else if (ev === 1) [f.m, f.sx, f.sy] = ['ret', f.x, f.y];\n  else {\n    // He lets her go on the swing back, and she falls turning over into the net.\n    [f.m, f.vx, f.vy] = ['drop', f.vx0, f.vy0];\n    const dy = netY(f.x + f.vx * 0.9) - 1 - f.y;\n    f.TF = (-f.vy + sqrt(f.vy * f.vy + 2 * G * max(1, dy))) / G;\n    rd.over = true;\n  }\n}\n\nfunction stepFlyer(S, f, d, i) {\n  const rd = S.rd, t = S.t, th = S.th, [hbx, hby] = barAt(-S.A), [bx, by] = barAt(th), nt = S.net;\n  f.T += d;\n  switch (f.m) {\n    case 'wait':\n    case 'hold': {\n      // Standing on the board; the one whose turn it is steps up and takes the bar.\n      const h = f.m === 'hold', gx = h ? hbx - 1 : WX;\n      rest(f);\n      f.x += cl(gx - f.x, -7 * d, 7 * d);\n      [f.fs, f.y, f.ph] = [1, BY - LEG, h ? 0.12 * sm(3, 0.5, abs(gx - f.x)) : 0.04 * sin(t * 1.3 + i)];\n      if (!h) break;\n      if (abs(gx - f.x) \u003c 1.5) [f.hx, f.hy] = [hbx, hby];\n      if (t >= rd.tg) [S.bar, f.m, f.T, f.sx, f.sy] = ['free', 'swing', 0, f.x, f.y];\n      break;\n    }\n    case 'swing':\n    case 'ride': {\n      f.fs = f.m === 'ride' ? -1 : 1;\n      const k = f.m === 'swing' ? sm(0, 0.3, f.T) : 1, u = (f.fs * th) / S.A;\n      [f.x, f.y, f.ph] = [mix(f.sx, bx + HL * sin(th), k), mix(f.sy, by + HL * cos(th), k), -th * k];\n      // Legs lead at the front of each swing and trail at the back.\n      const l = (0.95 * max(0, u) + 0.35 * min(0, u)) * k;\n      lim(f, l, l, 0.25 * max(0, -u) * k, 0.25 * max(0, -u) * k, f.a1, f.a2);\n      [f.hx, f.hy] = [bx, by];\n      if (f.m === 'swing' && !rd.rel && t >= rd.tr) {\n        // Let go at the top of the swing, aimed at where the catcher's hands will be.\n        const c = cpose(-B);\n        rd.rel = true;\n        Object.assign(f, { m: 'fly', Rx: f.x, Ry: f.y, Cx: c.hx + HL * sin(-0.8 * B), Cy: c.hy + HL * cos(-0.8 * B), phR: f.ph, pkR: f.l1, hx: null });\n      }\n      if (f.m === 'ride' && t >= rd.tg + 4 * PB) {\n        // Home on the board. The flyer who was waiting takes the bar next.\n        S.bar = 'hook';\n        rd.over = true;\n        [f.m, f.T, f.sx, f.sy] = ['land', 0, f.x, f.y];\n        const o = S.fl[1 - i];\n        if (o.m === 'wait') o.m = 'hold';\n        f.next = o.m === 'hold' ? 'wait' : 'hold';\n        newRound(S, t + 1.1, o.m === 'hold' ? 1 - i : i);\n      }\n      break;\n    }\n    case 'fly': {\n      const s = cl((t - rd.tr) / rd.tf, 0, 1), u = sm(0.04, 0.22, s) * (1 - sm(0.7, 0.9, s));\n      [f.x, f.y, f.ph] = [mix(f.Rx, f.Cx, s), mix(f.Ry, f.Cy, s) - 4 * rd.h * s * (1 - s), mix(f.phR, 0.8 * B - TAU * rd.turns, ease(s))];\n      const l = max(f.pkR * (1 - sm(0, 0.12, s)), 2.2 * u);\n      lim(f, l, l, 2.4 * u, 2.4 * u, 2 * u, 2 * u);\n      break;\n    }\n    case 'caught': {\n      const c = S.cp, tp = S.psi * 0.8;\n      [f.x, f.y, f.ph, f.fs, f.hx, f.hy] = [c.hx + HL * sin(tp), c.hy + HL * cos(tp), -tp, 1, c.hx, c.hy];\n      lim(f, 0.4 * sin(S.phc + 0.6), 0.4 * sin(S.phc + 0.6), 0, 0, 0, 0);\n      break;\n    }\n    case 'ret': {\n      // A half turn in the air and back to the fly bar, which comes out to meet her.\n      const s = cl(f.T / TR, 0, 1), [ex, ey] = barAt(rd.A);\n      [f.x, f.y, f.ph, f.fs] = [mix(f.sx, ex + HL * sin(rd.A), s), mix(f.sy, ey + HL * cos(rd.A), s) - 18 * s * (1 - s), mix(f.ph0, -rd.A, s), s \u003c 0.5 ? 1 : -1];\n      const a = sin(PI * s);\n      f.hx = null;\n      lim(f, 0.3 * a, 0.3 * a, 0, 0, 1.3 * a, -1.3 * a);\n      if (s >= 1) f.m = 'ride';\n      break;\n    }\n    case 'land': {\n      const k = sm(0, 0.35, f.T);\n      rest(f);\n      [f.x, f.y, f.ph, f.hx, f.hy] = [mix(f.sx, hbx - 1, k), mix(f.sy, BY - LEG, k), mix(f.ph, 0, k), hbx, hby];\n      if (f.T > 0.4) f.m = f.next;\n      break;\n    }\n    case 'drop': {\n      f.vy += G * d;\n      [f.x, f.y] = [f.x + f.vx * d, f.y + f.vy * d];\n      const s = cl(f.T / f.TF, 0, 1), u = sm(0.1, 0.3, s) * (1 - sm(0.62, 0.85, s));\n      f.ph = mix(f.ph0, -PI / 2 - TAU, ease(s));\n      lim(f, 2.2 * u, 2.2 * u, 2.4 * u, 2.4 * u, 0.6 + 1.4 * u, 0.6 + 1.4 * u).hx = null;\n      if (f.y >= netY(f.x) - 1) {\n        [f.m, f.T, nt.x] = ['net', 0, f.x];\n        S.pop = max(S.pop, 0.8);\n        burst(S, 6);\n      }\n      break;\n    }\n    case 'net': {\n      // Bouncing on her back: a stiff spring while she is in the net, a fall while she is out.\n      const n = max(1, ceil(d / 0.006)), h = d / n;\n      for (let j = 0; j \u003c n; j++) {\n        const pen = f.y - (netY(f.x) - 1);\n        f.vy += (G - (pen > 0 ? 420 * pen + 7 * f.vy : 0)) * h;\n        [f.y, f.x, f.vx] = [f.y + f.vy * h, f.x + f.vx * h, f.vx * (1 - 2.5 * h)];\n        if (pen > 0) [nt.s, nt.v] = [pen, f.vy];\n        else (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s += nt.v * h);\n      }\n      [nt.x, nt.hold, f.ph] = [f.x, true, -PI / 2];\n      lim(f, 0.6, 0.6, 0.4, 0.4, 1.6 + 0.5 * sin(f.T * 9), 1.6 - 0.5 * sin(f.T * 9));\n      if (f.T > 2.6) [f.m, f.T, f.sy] = ['up', 0, f.y];\n      break;\n    }\n    case 'up':\n    case 'tada':\n    case 'walk': {\n      nt.s += (1.5 - nt.s) * min(1, d * 8);\n      [nt.v, nt.x, nt.hold] = [0, f.x, true];\n      const top = netY(f.x) + nt.s - LEG - 0.6;\n      if (f.m === 'up') {\n        const k = sm(0, 0.5, f.T);\n        rest(f);\n        [f.ph, f.y] = [mix(-PI / 2, 0, k), mix(f.sy, top, k)];\n        if (f.T > 0.55) [f.m, f.T] = ['tada', 0];\n      } else if (f.m === 'tada') {\n        // Arms up for the crowd.\n        [f.ph, f.y] = [0, top];\n        lim(f, 0, 0, 0, 0, 0.55, -0.55);\n        if (f.T > 0.8) [f.m, f.T] = ['walk', 0];\n      } else {\n        // Bouncing along the net to the ladder.\n        const w = sin(f.T * 8);\n        [f.fs, f.x, f.y, f.ph] = [-1, f.x - 13 * d, top - 1.1 * abs(w), 0];\n        lim(f, 0.5 * w, -0.5 * w, 0, 0, PI - 0.5 * w, PI + 0.5 * w);\n        if (f.x \u003c= LX) [f.m, f.T] = ['climb', 0];\n      }\n      break;\n    }\n    case 'climb': {\n      // Up the rope ladder to the board.\n      const w = sin(f.T * 9);\n      [f.x, f.y, f.fs, f.ph, f.hx] = [LX, f.y - 12 * d, -1, 0, null];\n      const p = max(0, w), q = max(0, -w);\n      lim(f, 0.9 * p, 0.9 * q, 1.5 * p, 1.5 * q, 0.35 + 0.45 * w, 0.35 - 0.45 * w);\n      if (f.y \u003c= BY - LEG) [f.y, f.m] = [BY - LEG, 'wait'];\n      break;\n    }\n  }\n  if (d > 0) [f.vx0, f.vy0] = [(f.x - f.px) / d, (f.y - f.py) / d];\n  [f.px, f.py] = [f.x, f.y];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], rdt = cl(dt || 0, 0, 0.1), d = rdt * (cl(kv[1], 0.2, 3) / 2);\n  const u = cl(kv[0], 0, 1) * 3, pi = min(2, floor(u));\n  for (let j = 0; j \u003c 7; j++) for (let c = 0; c \u003c 3; c++) S.P[j][c] = mix(PAL[pi][j][c], PAL[pi + 1][j][c], u - pi);\n  [S.turns, S.hz] = [cl(round(kv[2]), 1, 3), 0.26 + 0.74 * cl(kv[3], 0, 1)];\n  if (!S.started) {\n    // Open mid-act: the first flyer is already out on her first swing.\n    [S.started, S.fl[0].m, S.fl[0].T] = [true, 'swing', 1];\n    newRound(S, -0.9, 0);\n    [S.A, S.phc] = [S.rd.A, S.ct.ph - OM * S.rd.tc];\n  }\n  const tp = S.t, t = (S.t += d), rd = S.rd;\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drum roll: this trick becomes the triple if she has not let go yet, else the next one.\n    S.drumB = 1;\n    if (!rd.rel && !rd.over) {\n      Object.assign(rd, { turns: 3, fin: true, tf: 1.5, h: 17, tc: rd.tr + 1.5 });\n      S.nextFin = false;\n      if (S.ct && S.ct.ev === 0) S.ct.t = rd.tc;\n    } else S.trip = true;\n  }\n  S.A = S.bar === 'hook' && !rd.over ? mix(rd.A0, rd.A, sm(rd.t0, rd.tg, t)) : rd.A;\n  S.th = S.bar === 'hook' ? -S.A : -S.A * cos(OM * (t - rd.tg));\n  // The catcher, phase-locked to the next thing he has to be on time for.\n  const ct = S.ct, rem = ct ? ct.t - tp : 0;\n  S.phc = ct ? (rem \u003c= d ? ct.ph : S.phc + ((ct.ph - S.phc) * d) / rem) : S.phc + OM * d;\n  S.cp = cpose((S.psi = -B * cos(S.phc)));\n  if (ct && rem \u003c= d) (S.ct = null), catcherEvent(S, ct.ev);\n  const nt = S.net, h = min(d, 0.02);\n  nt.hold = false;\n  S.fl.forEach((f, i) => stepFlyer(S, f, d, i));\n  // An empty net rings and settles.\n  if (!nt.hold) (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s = (nt.s + nt.v * h) * exp(-d * 3));\n  // After a drop the bar swings empty until it comes back to the board and the next flyer hooks it.\n  const R = S.rd;\n  const w = S.fl.findIndex((f) => f.m === 'wait');\n  if (R.over && S.bar === 'free' && w >= 0 && floor((t - R.tg) / PB) > floor((tp - R.tg) / PB)) [S.bar, S.fl[w].m] = ['hook', 'hold'], newRound(S, t + 0.7, w);\n  // Light cues: the house dims for the drum roll, more for a bigger trick, and comes up on the catch.\n  const r = S.rd, star = S.fl[S.star];\n  const roll = (!r.rel && t > r.tg + 0.5 * PB) || star.m === 'fly' || S.drumB > 0 ? 1 : 0;\n  S.drum += (roll - S.drum) * (1 - exp(-d * 4));\n  S.drumB = max(0, S.drumB - rdt * 0.4);\n  S.pop *= exp(-d * 0.9);\n  S.wash = (1 - S.drum * (0.3 + 0.22 * (r.turns - 1))) * (1 + 0.8 * S.pop);\n  // The follow spots: two on the flyer, the third on the catcher unless the trick is big.\n  const fin = S.fl.find((f) => ONNET[f.m]);\n  const tg = [fin || star, fin && t \u003c r.tg + 0.4 ? fin : star, S.drum > 0.5 && r.turns >= 2 ? star : { x: S.cp.x, y: S.cp.y + 3 }];\n  const k = 1 - exp(-d * 8);\n  S.sp.forEach((s, j) => {\n    const vx = (s.ax += (tg[j].x - s.ax) * k) - s.sx, vy = (s.ay += (tg[j].y - 1 - s.ay) * k) - s.sy, D = (s.D = sqrt(vx * vx + vy * vy));\n    [s.ux, s.uy] = [vx / D, vy / D];\n  });\n  // Camera flashes in the crowd.\n  if (rnd() \u003c rdt * 0.9) burst(S, 1);\n  for (const e of S.fx) e.a -= rdt * 9;\n  S.fx = S.fx.filter((e) => e.a > 0);\n}\n\n// A stroke lit by the light field, with optional sequin sparkle.\nfunction seg(S, ax, ay, bx, by, r, c, sp) {\n  const { F, LT } = S, dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6;\n  const x1 = min(W - 1, ceil(max(ax, bx) + r + 1)), y1 = min(H - 1, ceil(max(ay, by) + r + 1));\n  for (let y = max(0, floor(min(ay, by) - r - 1)); y \u003c= y1; y++)\n    for (let x = max(0, floor(min(ax, bx) - r - 1)); x \u003c= x1; x++) {\n      const t = cl(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1), ex = x - ax - dx * t, ey = y - ay - dy * t;\n      const a = cl(r + 0.5 - sqrt(ex * ex + ey * ey), 0, 1);\n      if (a \u003c= 0) continue;\n      const q = (y * W + x) * 3, s = sp ? 0.72 + 0.56 * rnd() : 1;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += (c[j] * LT[q + j] * s - F[q + j]) * a;\n    }\n}\n\nfunction glow(F, x, y, r, c, k) {\n  for (let yy = max(0, floor(y - r)); yy \u003c= min(H - 1, ceil(y + r)); yy++)\n    for (let xx = max(0, floor(x - r)); xx \u003c= min(W - 1, ceil(x + r)); xx++) {\n      const g = k * exp(-((xx - x) ** 2 + (yy - y) ** 2) / (0.25 * r * r)), q = (yy * W + xx) * 3;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += c[j] * g;\n    }\n}\n\n// A stick figure: hips at (x, y), body angle ph (0 is head up), facing fs.\nfunction fig(S, f, col) {\n  const bx = sin(f.ph), by = -cos(f.ph), nx = cos(f.ph) * f.fs, ny = sin(f.ph) * f.fs;\n  const dv = (a, l) => [(bx * cos(a) + nx * sin(a)) * l, (by * cos(a) + ny * sin(a)) * l];\n  const shx = f.x + bx * 3, shy = f.y + by * 3;\n  for (const [l, k] of [[f.l1, f.k1], [f.l2, f.k2]]) {\n    const [kx, ky] = dv(PI - l, 1.9), [fx, fy] = dv(PI - l + k, 1.9);\n    seg(S, f.x, f.y, f.x + kx, f.y + ky, 0.6, col, 1);\n    seg(S, f.x + kx, f.y + ky, f.x + kx + fx, f.y + ky + fy, 0.5, col, 1);\n  }\n  seg(S, f.x, f.y, shx, shy, 0.8, col, 1);\n  for (const a of [f.a1, f.a2]) {\n    const [ax, ay] = dv(a, 2.7);\n    seg(S, shx, shy, f.hx === null ? shx + ax : f.hx, f.hx === null ? shy + ay : f.hy, 0.42, SKIN, 0);\n  }\n  seg(S, shx + bx * 1.45, shy + by * 1.45, shx + bx * 1.55, shy + by * 1.55, 0.75, SKIN, 0);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { F, LT, CA, CI, AUD, ROW, POOL, P, wash, hz } = S, wc = P[0];\n  const hzA = hz * (0.7 - 0.22 * hz), halo = hz * hz * 0.18, hl = log(max(1, halo * 400));\n  const am = wc.map((v) => v * (0.12 + 0.12 * wash)), kc = 0.48 * 255 * wash, air = 9 * hz * wash;\n  const sp = S.sp.map((s, j) => [s.sx, s.sy, s.ux, s.uy, s.D, ...P[1 + j].map((v) => v / 255)]);\n  for (let y = 0; y \u003c H; y++) {\n    // The ring below the net glows in the house light behind the crowd.\n    const pb = POOL[y], ring = 50 * sm(117, 104, y) * sm(100, 104, y) * wash + air;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3, ci = CI[i] * kc;\n      let r = 4 + wc[0] * ring + CA[q] * wc[0] * ci, g = 4 + wc[1] * ring + CA[q + 1] * wc[1] * ci, b = 9 + wc[2] * ring + CA[q + 2] * wc[2] * ci;\n      let lr = 0, lg = 0, lb = 0;\n      const cv = CI[i] > 0.02 ? 0.9 * pb * sm(0, 0.3, CI[i]) * 255 : 0;\n      for (const s of sp) {\n        const vx = x - s[0], vy = y - s[1], al = vx * s[2] + vy * s[3], pp = abs(vx * s[3] - vy * s[2]), R = 0.8 + al * TA;\n        if (pp \u003c R) {\n          // Lit air along the beam, and past the flyer a pool where it lands on the canvas.\n          const p = sm(R, R * 0.45, pp), k = ((p * (al > s[4] ? 0.8 : 1) * 1.3) / (1 + (al / 110) ** 2)) * hzA * 255, c = cv > 0 && al > s[4] ? cv * p : 0;\n          (lr += s[5] * p), (lg += s[6] * p), (lb += s[7] * p);\n          (r += s[5] * (k + CA[q] * c)), (g += s[6] * (k + CA[q + 1] * c)), (b += s[7] * (k + CA[q + 2] * c));\n        }\n        // Haze scatters a wide glow round each beam.\n        if (pp \u003c (R + 9) * hl) {\n          const h = halo * exp(-pp / (R + 9)) * 255;\n          (r += s[5] * h), (g += s[6] * h), (b += s[7] * h);\n        }\n      }\n      (F[q] = r), (F[q + 1] = g), (F[q + 2] = b);\n      (LT[q] = min(1.25, lr * 1.2 + am[0])), (LT[q + 1] = min(1.25, lg * 1.2 + am[1])), (LT[q + 2] = min(1.25, lb * 1.2 + am[2]));\n    }\n  }\n  const t = S.t;\n  // The king pole, the ring of bulbs round the peak, which chase in a drum roll, and the bale ring.\n  seg(S, 32, 7, 32, 29, 0.7, STEEL, 0);\n  for (let j = 0; j \u003c 22; j++) {\n    const a = (TAU * j) / 22, x = 32 + 20 * sin(a), y = 6.5 + 5 * cos(a), ch = (((j / 22 - t * 0.9) % 1) + 1) % 1 \u003c 0.22 ? 1 : 0;\n    const v = (mix(0.75 + 0.15 * sin(t * 3 + j * 2.1), 0.3 + 0.9 * ch, S.drum) + 0.5 * S.pop) * (0.85 + 0.15 * cos(a));\n    glow(F, x, y, 3.2, [255, 196, 110], 0.42 * v);\n    const q = (round(y) * W + round(x)) * 3;\n    for (let k = 0; k \u003c 3; k++) F[q + k] += [200, 160, 90][k] * v;\n  }\n  seg(S, 30, 5, 34, 5, 1.1, [60, 62, 70], 0);\n  // The rig: a truss under the peak, guy lines, the uprights, the board and the ladder.\n  seg(S, 3, PFY - 2, 61, PFY - 2, 0.4, STEEL, 0);\n  seg(S, 3, PFY, 61, PFY, 0.35, STEEL, 0);\n  for (let x = 5; x \u003c 61; x += 4) seg(S, x, PFY - 2, x + 2, PFY, 0.25, STEEL, 0);\n  seg(S, 4, PFY - 2, 24, 7, 0.25, ROPE, 0);\n  seg(S, 60, PFY - 2, 40, 7, 0.25, ROPE, 0);\n  seg(S, 62, PFY - 2, 62, 103, 0.35, ROPE, 0);\n  seg(S, 0, PFY - 2, 0, BY, 0.35, ROPE, 0);\n  seg(S, 0, BY + 0.6, barAt(-S.rd.A)[0] + 0.4, BY + 0.6, 0.55, [190, 160, 120], 0);\n  seg(S, 1, BY + 1, 1, 97, 0.3, ROPE, 0);\n  seg(S, 4.2, BY + 1, 4.2, 97, 0.3, ROPE, 0);\n  for (let y = BY + 3; y \u003c 97; y += 3) seg(S, 1, y, 4.2, y, 0.25, ROPE, 0);\n  // The safety net, a sagging diamond mesh, dented where a flyer is in it.\n  const nt = S.net;\n  for (let x = 0; x \u003c W; x++) {\n    const dn = nt.s * exp(-(((x - nt.x) / 8) ** 2)), far = 94.5 + 1.2 * sin((PI * x) / 63) + 0.6 * dn, near = 103 + 2 * sin((PI * x) / 63) + dn;\n    for (let y = max(0, floor(far - 1)); y \u003c= min(H - 1, ceil(near + 1)); y++) {\n      const v = (y - far) / (near - far), fa = x * 0.34 + v * 3, fb = x * 0.34 - v * 3;\n      let ln = v > -0.06 && v \u003c 1.06 ? max(sm(0.3, 0.48, abs((fa % 1) - 0.5)), sm(0.3, 0.48, abs((((fb % 1) + 1) % 1) - 0.5))) : 0;\n      ln = max(ln, sm(0.9, 0.2, abs(y - far)), sm(0.9, 0.2, abs(y - near))) * 0.8;\n      const q = (y * W + x) * 3;\n      if (ln > 0) for (let j = 0; j \u003c 3; j++) F[q + j] += ([205, 196, 176][j] * LT[q + j] - F[q + j]) * ln;\n    }\n  }\n  // The fly bar on its ropes, the catcher's cradle, the catcher and the flyers.\n  const [bx, by] = barAt(S.th), c = S.cp;\n  for (const [px, py, x, y] of [[PFX, PFY, bx, by], [PCX, PCY, c.bx, c.by]]) {\n    seg(S, px - 1.2, py, x - 1.2, y, 0.28, ROPE, 0);\n    seg(S, px + 1.2, py, x + 1.2, y, 0.28, ROPE, 0);\n    seg(S, x - 1.8, y, x + 1.8, y, 0.45, BAR, 0);\n  }\n  fig(S, c, P[6]);\n  for (const f of S.fl) fig(S, f, P[f.c]);\n  // The crowd in front of it all, a dark sea, each head rimmed by the light behind it.\n  for (let i = W; i \u003c N; i++) {\n    const a = AUD[i];\n    if (a \u003c= 0) continue;\n    const q = i * 3, k = ROW[i], rim = k > ROW[i - W] ? (1 - 0.2 * k) * a : 0;\n    for (let j = 0; j \u003c 3; j++) F[q + j] += ((12 - 2.5 * k) * wc[j] - F[q + j]) * a + rim * (16 * wash * wc[j] + 60 * max(0, LT[q + j] - 0.3));\n  }\n  // Phones held up to film, and camera flashes.\n  for (const [x, y] of S.phones) if (x >= 0 && x \u003c W - 1) for (let j = 0; j \u003c 6; j++) F[(y * W + x) * 3 + j] += [70, 92, 130][j % 3];\n  for (const e of S.fx) glow(F, e.x, e.y, 2.2, [255, 250, 240], e.a * e.a * (1 - e.w));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-flying-trapeze","type":"code","name":"flying-trapeze","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flying Trapeze\n// Family:  stage\n// Idea:    Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the flying trapeze act Jules Léotard first flew at the Cirque Napoléon in 1859\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1\n//\n// Knob 1: Lights. The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them.\n// Knob 2: Speed. How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Turns. The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer.\n// Knob 4: Haze. How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels.\n// Buttons: K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, ceil, round, atan2, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (s) => s - sin(TAU * s) * (0.8 / TAU);\nconst rnd = () => Math.random();\n// A swing of the fly bar out and back, in seconds at Speed 2.\nconst PB = 2.4;\nconst OM = TAU / PB;\n// The fly bar's crane and rope; the catcher's cradle, rope and swing.\nconst [PFX, PFY, LF] = [24, 30, 34];\nconst [PCX, PCY, LC, B] = [57, 30, 20, 0.18];\n// The board's top, where the next flyer waits on it, and the rope ladder.\nconst [BY, WX, LX] = [68, 1.2, 2.6];\n// Hips above feet, hands above hips, gravity, and the time of the flight back to the bar.\nconst [LEG, HL, G, TR] = [3.8, 5.7, 90, 0.45];\n// Follow spots below the panel behind the crowd, and how fast their cones open.\nconst SPOT = [[-14, 166], [78, 166], [32, 186]];\nconst TA = 0.046;\n// Gels by the Lights knob: house wash (0..1), three spots, two flyers and the catcher.\nconst PAL = [\n  [[1, 0.8, 0.52], [255, 226, 170], [255, 244, 222], [255, 206, 120], [255, 182, 36], [205, 222, 255], [70, 120, 255]],\n  [[1, 0.64, 0.5], [255, 182, 120], [255, 150, 150], [255, 208, 150], [255, 96, 112], [255, 206, 60], [250, 240, 230]],\n  [[0.82, 0.52, 0.86], [255, 122, 196], [186, 142, 255], [255, 166, 214], [255, 62, 196], [160, 104, 255], [110, 236, 214]],\n  [[0.46, 0.44, 1], [255, 76, 170], [66, 128, 255], [172, 96, 255], [255, 44, 156], [36, 150, 255], [245, 245, 255]],\n];\nconst [SKIN, STEEL, ROPE, BAR] = [[255, 196, 156], [170, 176, 190], [150, 138, 116], [215, 215, 225]];\nconst ONNET = { drop: 1, net: 1, up: 1, tada: 1 };\n\nconst mkF = (c) => ({ m: 'wait', x: WX, y: BY - LEG, ph: 0, fs: 1, a1: 2.9, a2: 2.9, l1: 0, l2: 0, k1: 0, k2: 0, hx: null, T: 0, sx: 0, sy: 0, c });\n// Thighs, knees and arms of a figure, both sides.\nconst lim = (f, l1, l2, k1, k2, a1, a2) => Object.assign(f, { l1, l2, k1, k2, a1, a2 });\nconst rest = (f) => ((f.hx = null), lim(f, 0, 0, 0, 0, 2.9, 2.9));\nconst barAt = (th) => [PFX + LF * sin(th), PFY + LF * cos(th)];\nconst netY = (x) => 98.5 + 1.6 * sin((PI * cl(x, 0, 63)) / 63);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = {\n    t: 0, started: false, F: F32(N * 3), LT: F32(N * 3), CA: F32(N * 3), CI: F32(N), AUD: F32(N), ROW: new Int8Array(N).fill(-1), POOL: F32(H),\n    bar: 'free', A: 0.55, phc: 0, fl: [mkF(4), mkF(5)], star: 0,\n    sp: SPOT.map(([sx, sy]) => ({ sx, sy, ax: 30, ay: 50, ux: 0, uy: -1, D: 110 })),\n    drum: 0, drumB: 0, pop: 0, wash: 1, trip: false, nextFin: true, turns: 1, net: { s: 0, v: 0, x: 32 }, fx: [], phones: [], P: PAL[0].map((c) => c.slice()), hz: 0.3,\n  };\n  // The canvas: red and cream panels running down from the peak, each billowing between its seams.\n  for (let y = 0; y \u003c H; y++) {\n    S.POOL[y] = exp(-(((y - 17) / 15) ** 2));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, dx = x - 32, dy = y - 5, a = atan2(dx, dy);\n      const red = 0.5 + 0.5 * cl(sin(a * 7) * 4, -1, 1);\n      const k = (0.84 - 0.16 * cos(a * 14)) * sm(2.5, 6, sqrt(dx * dx + dy * dy));\n      S.CA[i * 3] = mix(0.95, 0.88, red) * k;\n      S.CA[i * 3 + 1] = mix(0.86, 0.12, red) * k;\n      S.CA[i * 3 + 2] = mix(0.68, 0.12, red) * k;\n      S.CI[i] = (0.3 + 0.7 * exp(-((dx * dx) / 900 + (dy * dy) / 300))) * sm(40, 20, y);\n    }\n  }\n  // The crowd: rows of heads and shoulders, bigger towards the front, each row a solid band below.\n  [[108.5, 1.9, 4.6], [114, 2.3, 5.4], [120.5, 2.8, 6.4], [127.5, 3.4, 7.6]].forEach(([base, r, gap], k) => {\n    for (let cx = -2 + rnd() * gap; cx \u003c W + 3; cx += gap * (0.8 + 0.4 * rnd())) {\n      const hy = base - r * 1.15 + (rnd() - 0.5) * 1.2, hx = cx + rnd() - 0.5;\n      for (let y = max(0, floor(hy - r - 1)); y \u003c H; y++)\n        for (let x = max(0, floor(hx - r * 2.4)); x \u003c= min(W - 1, ceil(hx + r * 2.4)); x++) {\n          const hd = r + 0.5 - sqrt((x - hx) ** 2 + (y - hy) ** 2);\n          const sh = 1 - sqrt(((x - hx) / (r * 2.2)) ** 2 + ((y - base) / (r * 0.9)) ** 2);\n          const c = y >= base ? 1 : cl(max(hd, sh * r * 2), 0, 1), i = y * W + x;\n          if (c > S.AUD[i]) S.AUD[i] = c;\n          if (c > 0.5) S.ROW[i] = k;\n        }\n      if (rnd() \u003c 0.09) S.phones.push([round(hx + 1), round(hy - r - 1)]);\n    }\n  });\n  params.s = S;\n}\n\n// The catcher at swing angle psi: knees over the bar, body hanging, arms reaching for the flyer.\nfunction cpose(psi) {\n  const ps = psi * 1.2, bx = PCX + LC * sin(psi), by = PCY + LC * cos(psi), sx = sin(ps), sy = cos(ps);\n  const hx = bx + 1.9 * sx, hy = by + 1.9 * sy;\n  const ax = sx * cos(0.2) - sy * sin(0.2), ay = sy * cos(0.2) + sx * sin(0.2);\n  return { bx, by, x: hx, y: hy, ph: PI - ps, fs: 1, l1: 0, l2: 0, k1: 1.5, k2: 1.3, hx: hx + 3 * sx + 2.7 * ax, hy: hy + 3 * sy + 2.7 * ay };\n}\n\nfunction newRound(S, go, who) {\n  const trip = S.trip, turns = trip ? 3 : S.turns, fin = trip || S.nextFin, tf = 0.75 + 0.25 * turns, tr = go + 1.5 * PB;\n  S.trip = false;\n  S.nextFin = !fin;\n  S.rd = { turns, fin, tf, h: 8 + 3 * turns, tg: go, tr, tc: tr + tf, rel: false, A0: S.A, A: 0.55 + 0.03 * (turns - 1), t0: S.t, over: false };\n  S.star = who;\n  // The catcher times his swing to be out at the front of it when she arrives.\n  const dt = max(0.3, S.rd.tc - S.t);\n  let k = round((S.phc + OM * dt) / TAU);\n  if ((TAU * k - S.phc) / dt \u003c 0.6 * OM) k++;\n  S.ct = { ph: TAU * k, t: S.rd.tc, ev: 0 };\n}\n\nconst burst = (S, n) => {\n  for (let i = 0; i \u003c n; i++) S.fx.push({ x: 2 + rnd() * 60, y: 106 + rnd() * 20, a: 1, w: rnd() * 0.25 });\n};\n\nfunction catcherEvent(S, ev) {\n  const rd = S.rd, f = S.fl[S.star];\n  f.T = 0;\n  f.ph0 = f.ph;\n  if (ev === 0) {\n    // The catch: the house comes up and the crowd's cameras go off.\n    if (f.m === 'fly') f.m = 'caught';\n    burst(S, 7, (S.pop = 1));\n    S.ct = rd.fin ? { ph: S.phc + 1.5 * PI, t: S.t + 2.4, ev: 2 } : { ph: S.phc + TAU, t: rd.tg + 3.5 * PB - TR, ev: 1 };\n  } else if (ev === 1) [f.m, f.sx, f.sy] = ['ret', f.x, f.y];\n  else {\n    // He lets her go on the swing back, and she falls turning over into the net.\n    [f.m, f.vx, f.vy] = ['drop', f.vx0, f.vy0];\n    const dy = netY(f.x + f.vx * 0.9) - 1 - f.y;\n    f.TF = (-f.vy + sqrt(f.vy * f.vy + 2 * G * max(1, dy))) / G;\n    rd.over = true;\n  }\n}\n\nfunction stepFlyer(S, f, d, i) {\n  const rd = S.rd, t = S.t, th = S.th, [hbx, hby] = barAt(-S.A), [bx, by] = barAt(th), nt = S.net;\n  f.T += d;\n  switch (f.m) {\n    case 'wait':\n    case 'hold': {\n      // Standing on the board; the one whose turn it is steps up and takes the bar.\n      const h = f.m === 'hold', gx = h ? hbx - 1 : WX;\n      rest(f);\n      f.x += cl(gx - f.x, -7 * d, 7 * d);\n      [f.fs, f.y, f.ph] = [1, BY - LEG, h ? 0.12 * sm(3, 0.5, abs(gx - f.x)) : 0.04 * sin(t * 1.3 + i)];\n      if (!h) break;\n      if (abs(gx - f.x) \u003c 1.5) [f.hx, f.hy] = [hbx, hby];\n      if (t >= rd.tg) [S.bar, f.m, f.T, f.sx, f.sy] = ['free', 'swing', 0, f.x, f.y];\n      break;\n    }\n    case 'swing':\n    case 'ride': {\n      f.fs = f.m === 'ride' ? -1 : 1;\n      const k = f.m === 'swing' ? sm(0, 0.3, f.T) : 1, u = (f.fs * th) / S.A;\n      [f.x, f.y, f.ph] = [mix(f.sx, bx + HL * sin(th), k), mix(f.sy, by + HL * cos(th), k), -th * k];\n      // Legs lead at the front of each swing and trail at the back.\n      const l = (0.95 * max(0, u) + 0.35 * min(0, u)) * k;\n      lim(f, l, l, 0.25 * max(0, -u) * k, 0.25 * max(0, -u) * k, f.a1, f.a2);\n      [f.hx, f.hy] = [bx, by];\n      if (f.m === 'swing' && !rd.rel && t >= rd.tr) {\n        // Let go at the top of the swing, aimed at where the catcher's hands will be.\n        const c = cpose(-B);\n        rd.rel = true;\n        Object.assign(f, { m: 'fly', Rx: f.x, Ry: f.y, Cx: c.hx + HL * sin(-0.8 * B), Cy: c.hy + HL * cos(-0.8 * B), phR: f.ph, pkR: f.l1, hx: null });\n      }\n      if (f.m === 'ride' && t >= rd.tg + 4 * PB) {\n        // Home on the board. The flyer who was waiting takes the bar next.\n        S.bar = 'hook';\n        rd.over = true;\n        [f.m, f.T, f.sx, f.sy] = ['land', 0, f.x, f.y];\n        const o = S.fl[1 - i];\n        if (o.m === 'wait') o.m = 'hold';\n        f.next = o.m === 'hold' ? 'wait' : 'hold';\n        newRound(S, t + 1.1, o.m === 'hold' ? 1 - i : i);\n      }\n      break;\n    }\n    case 'fly': {\n      const s = cl((t - rd.tr) / rd.tf, 0, 1), u = sm(0.04, 0.22, s) * (1 - sm(0.7, 0.9, s));\n      [f.x, f.y, f.ph] = [mix(f.Rx, f.Cx, s), mix(f.Ry, f.Cy, s) - 4 * rd.h * s * (1 - s), mix(f.phR, 0.8 * B - TAU * rd.turns, ease(s))];\n      const l = max(f.pkR * (1 - sm(0, 0.12, s)), 2.2 * u);\n      lim(f, l, l, 2.4 * u, 2.4 * u, 2 * u, 2 * u);\n      break;\n    }\n    case 'caught': {\n      const c = S.cp, tp = S.psi * 0.8;\n      [f.x, f.y, f.ph, f.fs, f.hx, f.hy] = [c.hx + HL * sin(tp), c.hy + HL * cos(tp), -tp, 1, c.hx, c.hy];\n      lim(f, 0.4 * sin(S.phc + 0.6), 0.4 * sin(S.phc + 0.6), 0, 0, 0, 0);\n      break;\n    }\n    case 'ret': {\n      // A half turn in the air and back to the fly bar, which comes out to meet her.\n      const s = cl(f.T / TR, 0, 1), [ex, ey] = barAt(rd.A);\n      [f.x, f.y, f.ph, f.fs] = [mix(f.sx, ex + HL * sin(rd.A), s), mix(f.sy, ey + HL * cos(rd.A), s) - 18 * s * (1 - s), mix(f.ph0, -rd.A, s), s \u003c 0.5 ? 1 : -1];\n      const a = sin(PI * s);\n      f.hx = null;\n      lim(f, 0.3 * a, 0.3 * a, 0, 0, 1.3 * a, -1.3 * a);\n      if (s >= 1) f.m = 'ride';\n      break;\n    }\n    case 'land': {\n      const k = sm(0, 0.35, f.T);\n      rest(f);\n      [f.x, f.y, f.ph, f.hx, f.hy] = [mix(f.sx, hbx - 1, k), mix(f.sy, BY - LEG, k), mix(f.ph, 0, k), hbx, hby];\n      if (f.T > 0.4) f.m = f.next;\n      break;\n    }\n    case 'drop': {\n      f.vy += G * d;\n      [f.x, f.y] = [f.x + f.vx * d, f.y + f.vy * d];\n      const s = cl(f.T / f.TF, 0, 1), u = sm(0.1, 0.3, s) * (1 - sm(0.62, 0.85, s));\n      f.ph = mix(f.ph0, -PI / 2 - TAU, ease(s));\n      lim(f, 2.2 * u, 2.2 * u, 2.4 * u, 2.4 * u, 0.6 + 1.4 * u, 0.6 + 1.4 * u).hx = null;\n      if (f.y >= netY(f.x) - 1) {\n        [f.m, f.T, nt.x] = ['net', 0, f.x];\n        S.pop = max(S.pop, 0.8);\n        burst(S, 6);\n      }\n      break;\n    }\n    case 'net': {\n      // Bouncing on her back: a stiff spring while she is in the net, a fall while she is out.\n      const n = max(1, ceil(d / 0.006)), h = d / n;\n      for (let j = 0; j \u003c n; j++) {\n        const pen = f.y - (netY(f.x) - 1);\n        f.vy += (G - (pen > 0 ? 420 * pen + 7 * f.vy : 0)) * h;\n        [f.y, f.x, f.vx] = [f.y + f.vy * h, f.x + f.vx * h, f.vx * (1 - 2.5 * h)];\n        if (pen > 0) [nt.s, nt.v] = [pen, f.vy];\n        else (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s += nt.v * h);\n      }\n      [nt.x, nt.hold, f.ph] = [f.x, true, -PI / 2];\n      lim(f, 0.6, 0.6, 0.4, 0.4, 1.6 + 0.5 * sin(f.T * 9), 1.6 - 0.5 * sin(f.T * 9));\n      if (f.T > 2.6) [f.m, f.T, f.sy] = ['up', 0, f.y];\n      break;\n    }\n    case 'up':\n    case 'tada':\n    case 'walk': {\n      nt.s += (1.5 - nt.s) * min(1, d * 8);\n      [nt.v, nt.x, nt.hold] = [0, f.x, true];\n      const top = netY(f.x) + nt.s - LEG - 0.6;\n      if (f.m === 'up') {\n        const k = sm(0, 0.5, f.T);\n        rest(f);\n        [f.ph, f.y] = [mix(-PI / 2, 0, k), mix(f.sy, top, k)];\n        if (f.T > 0.55) [f.m, f.T] = ['tada', 0];\n      } else if (f.m === 'tada') {\n        // Arms up for the crowd.\n        [f.ph, f.y] = [0, top];\n        lim(f, 0, 0, 0, 0, 0.55, -0.55);\n        if (f.T > 0.8) [f.m, f.T] = ['walk', 0];\n      } else {\n        // Bouncing along the net to the ladder.\n        const w = sin(f.T * 8);\n        [f.fs, f.x, f.y, f.ph] = [-1, f.x - 13 * d, top - 1.1 * abs(w), 0];\n        lim(f, 0.5 * w, -0.5 * w, 0, 0, PI - 0.5 * w, PI + 0.5 * w);\n        if (f.x \u003c= LX) [f.m, f.T] = ['climb', 0];\n      }\n      break;\n    }\n    case 'climb': {\n      // Up the rope ladder to the board.\n      const w = sin(f.T * 9);\n      [f.x, f.y, f.fs, f.ph, f.hx] = [LX, f.y - 12 * d, -1, 0, null];\n      const p = max(0, w), q = max(0, -w);\n      lim(f, 0.9 * p, 0.9 * q, 1.5 * p, 1.5 * q, 0.35 + 0.45 * w, 0.35 - 0.45 * w);\n      if (f.y \u003c= BY - LEG) [f.y, f.m] = [BY - LEG, 'wait'];\n      break;\n    }\n  }\n  if (d > 0) [f.vx0, f.vy0] = [(f.x - f.px) / d, (f.y - f.py) / d];\n  [f.px, f.py] = [f.x, f.y];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], rdt = cl(dt || 0, 0, 0.1), d = rdt * (cl(kv[1], 0.2, 3) / 2);\n  const u = cl(kv[0], 0, 1) * 3, pi = min(2, floor(u));\n  for (let j = 0; j \u003c 7; j++) for (let c = 0; c \u003c 3; c++) S.P[j][c] = mix(PAL[pi][j][c], PAL[pi + 1][j][c], u - pi);\n  [S.turns, S.hz] = [cl(round(kv[2]), 1, 3), 0.26 + 0.74 * cl(kv[3], 0, 1)];\n  if (!S.started) {\n    // Open mid-act: the first flyer is already out on her first swing.\n    [S.started, S.fl[0].m, S.fl[0].T] = [true, 'swing', 1];\n    newRound(S, -0.9, 0);\n    [S.A, S.phc] = [S.rd.A, S.ct.ph - OM * S.rd.tc];\n  }\n  const tp = S.t, t = (S.t += d), rd = S.rd;\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drum roll: this trick becomes the triple if she has not let go yet, else the next one.\n    S.drumB = 1;\n    if (!rd.rel && !rd.over) {\n      Object.assign(rd, { turns: 3, fin: true, tf: 1.5, h: 17, tc: rd.tr + 1.5 });\n      S.nextFin = false;\n      if (S.ct && S.ct.ev === 0) S.ct.t = rd.tc;\n    } else S.trip = true;\n  }\n  S.A = S.bar === 'hook' && !rd.over ? mix(rd.A0, rd.A, sm(rd.t0, rd.tg, t)) : rd.A;\n  S.th = S.bar === 'hook' ? -S.A : -S.A * cos(OM * (t - rd.tg));\n  // The catcher, phase-locked to the next thing he has to be on time for.\n  const ct = S.ct, rem = ct ? ct.t - tp : 0;\n  S.phc = ct ? (rem \u003c= d ? ct.ph : S.phc + ((ct.ph - S.phc) * d) / rem) : S.phc + OM * d;\n  S.cp = cpose((S.psi = -B * cos(S.phc)));\n  if (ct && rem \u003c= d) (S.ct = null), catcherEvent(S, ct.ev);\n  const nt = S.net, h = min(d, 0.02);\n  nt.hold = false;\n  S.fl.forEach((f, i) => stepFlyer(S, f, d, i));\n  // An empty net rings and settles.\n  if (!nt.hold) (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s = (nt.s + nt.v * h) * exp(-d * 3));\n  // After a drop the bar swings empty until it comes back to the board and the next flyer hooks it.\n  const R = S.rd;\n  const w = S.fl.findIndex((f) => f.m === 'wait');\n  if (R.over && S.bar === 'free' && w >= 0 && floor((t - R.tg) / PB) > floor((tp - R.tg) / PB)) [S.bar, S.fl[w].m] = ['hook', 'hold'], newRound(S, t + 0.7, w);\n  // Light cues: the house dims for the drum roll, more for a bigger trick, and comes up on the catch.\n  const r = S.rd, star = S.fl[S.star];\n  const roll = (!r.rel && t > r.tg + 0.5 * PB) || star.m === 'fly' || S.drumB > 0 ? 1 : 0;\n  S.drum += (roll - S.drum) * (1 - exp(-d * 4));\n  S.drumB = max(0, S.drumB - rdt * 0.4);\n  S.pop *= exp(-d * 0.9);\n  S.wash = (1 - S.drum * (0.3 + 0.22 * (r.turns - 1))) * (1 + 0.8 * S.pop);\n  // The follow spots: two on the flyer, the third on the catcher unless the trick is big.\n  const fin = S.fl.find((f) => ONNET[f.m]);\n  const tg = [fin || star, fin && t \u003c r.tg + 0.4 ? fin : star, S.drum > 0.5 && r.turns >= 2 ? star : { x: S.cp.x, y: S.cp.y + 3 }];\n  const k = 1 - exp(-d * 8);\n  S.sp.forEach((s, j) => {\n    const vx = (s.ax += (tg[j].x - s.ax) * k) - s.sx, vy = (s.ay += (tg[j].y - 1 - s.ay) * k) - s.sy, D = (s.D = sqrt(vx * vx + vy * vy));\n    [s.ux, s.uy] = [vx / D, vy / D];\n  });\n  // Camera flashes in the crowd.\n  if (rnd() \u003c rdt * 0.9) burst(S, 1);\n  for (const e of S.fx) e.a -= rdt * 9;\n  S.fx = S.fx.filter((e) => e.a > 0);\n}\n\n// A stroke lit by the light field, with optional sequin sparkle.\nfunction seg(S, ax, ay, bx, by, r, c, sp) {\n  const { F, LT } = S, dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6;\n  const x1 = min(W - 1, ceil(max(ax, bx) + r + 1)), y1 = min(H - 1, ceil(max(ay, by) + r + 1));\n  for (let y = max(0, floor(min(ay, by) - r - 1)); y \u003c= y1; y++)\n    for (let x = max(0, floor(min(ax, bx) - r - 1)); x \u003c= x1; x++) {\n      const t = cl(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1), ex = x - ax - dx * t, ey = y - ay - dy * t;\n      const a = cl(r + 0.5 - sqrt(ex * ex + ey * ey), 0, 1);\n      if (a \u003c= 0) continue;\n      const q = (y * W + x) * 3, s = sp ? 0.72 + 0.56 * rnd() : 1;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += (c[j] * LT[q + j] * s - F[q + j]) * a;\n    }\n}\n\nfunction glow(F, x, y, r, c, k) {\n  for (let yy = max(0, floor(y - r)); yy \u003c= min(H - 1, ceil(y + r)); yy++)\n    for (let xx = max(0, floor(x - r)); xx \u003c= min(W - 1, ceil(x + r)); xx++) {\n      const g = k * exp(-((xx - x) ** 2 + (yy - y) ** 2) / (0.25 * r * r)), q = (yy * W + xx) * 3;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += c[j] * g;\n    }\n}\n\n// A stick figure: hips at (x, y), body angle ph (0 is head up), facing fs.\nfunction fig(S, f, col) {\n  const bx = sin(f.ph), by = -cos(f.ph), nx = cos(f.ph) * f.fs, ny = sin(f.ph) * f.fs;\n  const dv = (a, l) => [(bx * cos(a) + nx * sin(a)) * l, (by * cos(a) + ny * sin(a)) * l];\n  const shx = f.x + bx * 3, shy = f.y + by * 3;\n  for (const [l, k] of [[f.l1, f.k1], [f.l2, f.k2]]) {\n    const [kx, ky] = dv(PI - l, 1.9), [fx, fy] = dv(PI - l + k, 1.9);\n    seg(S, f.x, f.y, f.x + kx, f.y + ky, 0.6, col, 1);\n    seg(S, f.x + kx, f.y + ky, f.x + kx + fx, f.y + ky + fy, 0.5, col, 1);\n  }\n  seg(S, f.x, f.y, shx, shy, 0.8, col, 1);\n  for (const a of [f.a1, f.a2]) {\n    const [ax, ay] = dv(a, 2.7);\n    seg(S, shx, shy, f.hx === null ? shx + ax : f.hx, f.hx === null ? shy + ay : f.hy, 0.42, SKIN, 0);\n  }\n  seg(S, shx + bx * 1.45, shy + by * 1.45, shx + bx * 1.55, shy + by * 1.55, 0.75, SKIN, 0);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { F, LT, CA, CI, AUD, ROW, POOL, P, wash, hz } = S, wc = P[0];\n  const hzA = hz * (0.7 - 0.22 * hz), halo = hz * hz * 0.18, hl = log(max(1, halo * 400));\n  const am = wc.map((v) => v * (0.12 + 0.12 * wash)), kc = 0.48 * 255 * wash, air = 9 * hz * wash;\n  const sp = S.sp.map((s, j) => [s.sx, s.sy, s.ux, s.uy, s.D, ...P[1 + j].map((v) => v / 255)]);\n  for (let y = 0; y \u003c H; y++) {\n    // The ring below the net glows in the house light behind the crowd.\n    const pb = POOL[y], ring = 50 * sm(117, 104, y) * sm(100, 104, y) * wash + air;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3, ci = CI[i] * kc;\n      let r = 4 + wc[0] * ring + CA[q] * wc[0] * ci, g = 4 + wc[1] * ring + CA[q + 1] * wc[1] * ci, b = 9 + wc[2] * ring + CA[q + 2] * wc[2] * ci;\n      let lr = 0, lg = 0, lb = 0;\n      const cv = CI[i] > 0.02 ? 0.9 * pb * sm(0, 0.3, CI[i]) * 255 : 0;\n      for (const s of sp) {\n        const vx = x - s[0], vy = y - s[1], al = vx * s[2] + vy * s[3], pp = abs(vx * s[3] - vy * s[2]), R = 0.8 + al * TA;\n        if (pp \u003c R) {\n          // Lit air along the beam, and past the flyer a pool where it lands on the canvas.\n          const p = sm(R, R * 0.45, pp), k = ((p * (al > s[4] ? 0.8 : 1) * 1.3) / (1 + (al / 110) ** 2)) * hzA * 255, c = cv > 0 && al > s[4] ? cv * p : 0;\n          (lr += s[5] * p), (lg += s[6] * p), (lb += s[7] * p);\n          (r += s[5] * (k + CA[q] * c)), (g += s[6] * (k + CA[q + 1] * c)), (b += s[7] * (k + CA[q + 2] * c));\n        }\n        // Haze scatters a wide glow round each beam.\n        if (pp \u003c (R + 9) * hl) {\n          const h = halo * exp(-pp / (R + 9)) * 255;\n          (r += s[5] * h), (g += s[6] * h), (b += s[7] * h);\n        }\n      }\n      (F[q] = r), (F[q + 1] = g), (F[q + 2] = b);\n      (LT[q] = min(1.25, lr * 1.2 + am[0])), (LT[q + 1] = min(1.25, lg * 1.2 + am[1])), (LT[q + 2] = min(1.25, lb * 1.2 + am[2]));\n    }\n  }\n  const t = S.t;\n  // The king pole, the ring of bulbs round the peak, which chase in a drum roll, and the bale ring.\n  seg(S, 32, 7, 32, 29, 0.7, STEEL, 0);\n  for (let j = 0; j \u003c 22; j++) {\n    const a = (TAU * j) / 22, x = 32 + 20 * sin(a), y = 6.5 + 5 * cos(a), ch = (((j / 22 - t * 0.9) % 1) + 1) % 1 \u003c 0.22 ? 1 : 0;\n    const v = (mix(0.75 + 0.15 * sin(t * 3 + j * 2.1), 0.3 + 0.9 * ch, S.drum) + 0.5 * S.pop) * (0.85 + 0.15 * cos(a));\n    glow(F, x, y, 3.2, [255, 196, 110], 0.42 * v);\n    const q = (round(y) * W + round(x)) * 3;\n    for (let k = 0; k \u003c 3; k++) F[q + k] += [200, 160, 90][k] * v;\n  }\n  seg(S, 30, 5, 34, 5, 1.1, [60, 62, 70], 0);\n  // The rig: a truss under the peak, guy lines, the uprights, the board and the ladder.\n  seg(S, 3, PFY - 2, 61, PFY - 2, 0.4, STEEL, 0);\n  seg(S, 3, PFY, 61, PFY, 0.35, STEEL, 0);\n  for (let x = 5; x \u003c 61; x += 4) seg(S, x, PFY - 2, x + 2, PFY, 0.25, STEEL, 0);\n  seg(S, 4, PFY - 2, 24, 7, 0.25, ROPE, 0);\n  seg(S, 60, PFY - 2, 40, 7, 0.25, ROPE, 0);\n  seg(S, 62, PFY - 2, 62, 103, 0.35, ROPE, 0);\n  seg(S, 0, PFY - 2, 0, BY, 0.35, ROPE, 0);\n  seg(S, 0, BY + 0.6, barAt(-S.rd.A)[0] + 0.4, BY + 0.6, 0.55, [190, 160, 120], 0);\n  seg(S, 1, BY + 1, 1, 97, 0.3, ROPE, 0);\n  seg(S, 4.2, BY + 1, 4.2, 97, 0.3, ROPE, 0);\n  for (let y = BY + 3; y \u003c 97; y += 3) seg(S, 1, y, 4.2, y, 0.25, ROPE, 0);\n  // The safety net, a sagging diamond mesh, dented where a flyer is in it.\n  const nt = S.net;\n  for (let x = 0; x \u003c W; x++) {\n    const dn = nt.s * exp(-(((x - nt.x) / 8) ** 2)), far = 94.5 + 1.2 * sin((PI * x) / 63) + 0.6 * dn, near = 103 + 2 * sin((PI * x) / 63) + dn;\n    for (let y = max(0, floor(far - 1)); y \u003c= min(H - 1, ceil(near + 1)); y++) {\n      const v = (y - far) / (near - far), fa = x * 0.34 + v * 3, fb = x * 0.34 - v * 3;\n      let ln = v > -0.06 && v \u003c 1.06 ? max(sm(0.3, 0.48, abs((fa % 1) - 0.5)), sm(0.3, 0.48, abs((((fb % 1) + 1) % 1) - 0.5))) : 0;\n      ln = max(ln, sm(0.9, 0.2, abs(y - far)), sm(0.9, 0.2, abs(y - near))) * 0.8;\n      const q = (y * W + x) * 3;\n      if (ln > 0) for (let j = 0; j \u003c 3; j++) F[q + j] += ([205, 196, 176][j] * LT[q + j] - F[q + j]) * ln;\n    }\n  }\n  // The fly bar on its ropes, the catcher's cradle, the catcher and the flyers.\n  const [bx, by] = barAt(S.th), c = S.cp;\n  for (const [px, py, x, y] of [[PFX, PFY, bx, by], [PCX, PCY, c.bx, c.by]]) {\n    seg(S, px - 1.2, py, x - 1.2, y, 0.28, ROPE, 0);\n    seg(S, px + 1.2, py, x + 1.2, y, 0.28, ROPE, 0);\n    seg(S, x - 1.8, y, x + 1.8, y, 0.45, BAR, 0);\n  }\n  fig(S, c, P[6]);\n  for (const f of S.fl) fig(S, f, P[f.c]);\n  // The crowd in front of it all, a dark sea, each head rimmed by the light behind it.\n  for (let i = W; i \u003c N; i++) {\n    const a = AUD[i];\n    if (a \u003c= 0) continue;\n    const q = i * 3, k = ROW[i], rim = k > ROW[i - W] ? (1 - 0.2 * k) * a : 0;\n    for (let j = 0; j \u003c 3; j++) F[q + j] += ((12 - 2.5 * k) * wc[j] - F[q + j]) * a + rim * (16 * wash * wc[j] + 60 * max(0, LT[q + j] - 0.3));\n  }\n  // Phones held up to film, and camera flashes.\n  for (const [x, y] of S.phones) if (x >= 0 && x \u003c W - 1) for (let j = 0; j \u003c 6; j++) F[(y * W + x) * 3 + j] += [70, 92, 130][j % 3];\n  for (const e of S.fx) glow(F, e.x, e.y, 2.2, [255, 250, 240], e.a * e.a * (1 - e.w));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower."},{"name":"Turns","min":1,"max":3,"about":"The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer."},{"name":"Haze","min":0,"max":1,"about":"How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels."}],"start":[0,2,1,0.06],"measures":{"motion":0.3174,"detail":0.0396,"edges":0.2107,"complexity":1.4663,"coverage":0.506,"colour":0.1821,"drift":0.1332},"knobResponse":[0.0514,0.1017,0.0609,0.161]},{"slug":"foam-lather","title":"Foam Lather","family":"cosmetic","round":31,"note":"거품 클렌저를 낸 거품 사백 개가 패널을 채우고, 작은 거품은 줄어 사라지고 벽이 터지며 둘이 합쳐져요. 위로 갈수록 마른 벌집이 되고 아래는 물기 머금은 둥근 거품이에요. K1 은 색상환을 다 돌고, 누르면 아래에서 고운 거품을 새로 쳐 올려요.","idea":"Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.","buttons":"K1 tap whips a fresh batch of fine lather in from the bottom.","code":"// ===== Patternflow pattern =====\n// Title:   Foam Lather\n// Family:  cosmetic\n// Idea:    Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after cleansing foam whipped into lather\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1\n//\n// Knob 1: Hue. The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white.\n// Knob 2: Speed. How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower.\n// Knob 3: Size. The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up.\n// Knob 4: Wetness. How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid.\n// Buttons: K1 tap whips a fresh batch of fine lather in from the bottom.\n\nconst W = 64, H = 128;\nconst { min, max, floor, sqrt, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: sky blue.\nconst H0 = 0.57;\n// The foam is worked out over a margin M past every edge of the panel, so\n// bubbles at the edge have all their neighbours and the edge is no wall.\nconst M = 6, EW = W + 2 * M, EH = H + 2 * M, EN = EW * EH;\n// At most NB bubbles, each with up to NN neighbours on record.\nconst NB = 1100, NN = 16;\n// Gas through the walls: a bubble's area changes by K*(n - 6) LED^2 a second\n// at Speed 2, n its number of neighbours (von Neumann's law for 2D foam). The\n// 6 is the mean count of the bubbles on the panel, which comes out at 5.9 to\n// 6.1, and the dry foam at the top runs 1.2 times as fast.\nconst K = 1.6;\n// The foam rises RISE rows a second; a batch of lather comes every BATCH\n// seconds and pushes it up BOOST rows a second faster for two seconds.\nconst RISE = 1.2, BATCH = 15, BOOST = 14;\n// Packing grid for the bubbles, CS LEDs a cell.\nconst CS = 6, GX = Math.ceil(EW / CS) + 1, GY = Math.ceil(EH / CS) + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(NB), y: F(NB), r: F(NB), a: F(NB), tone: F(NB), n: 0, dead: new Uint8Array(NB),\n    nb: new Int16Array(NB * NN), nc: new Uint8Array(NB), edge: new Uint8Array(NB), fresh: true,\n    l1: new Int16Array(EN), l2: new Int16Array(EN), p1: F(EN), p2: F(EN),\n    head: new Int16Array(GX * GY), next: new Int16Array(NB),\n    fl: F(32 * 8), nfl: 0, dr: F(96 * 5), ndr: 0,\n    T: 0, since: 0, boost: 0, acc: 0, rate: 1, size: 0, wet: 0.06, hue: 0, started: false,\n    col: F(18), buf: F(W * H * 3),\n  };\n}\n\n// The radius of fresh lather.\nconst fresh = (S) => 2.1 + 3.2 * S.size;\n\nfunction add(S, x, y, r) {\n  if (S.n >= NB) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.r[i] = r;\n  S.a[i] = PI * r * r;\n  S.tone[i] = rnd();\n  S.dead[i] = 0;\n  S.nc[i] = 0;\n  S.edge[i] = 1;\n}\n\n// Liquid fraction at height y: it drains, so the foam is wettest at the\n// bottom; Wetness raises it everywhere.\nfunction liquid(S, y) {\n  const b = cl(y / H, 0, 1), dr = b ** 4;\n  return cl(0.02 + 0.3 * S.wet + (0.2 + 0.1 * S.wet) * dr, 0, 0.4);\n}\n\n// The panel filled with lather that has already risen and coarsened: fine\n// bubbles at the bottom, two and a half times as big at the top.\nfunction fill(S) {\n  S.n = 0;\n  const f = fresh(S);\n  let y = EH - M - f;\n  while (y > -M - 2) {\n    const rr = f * (1 + 1.5 * cl((H - y) / H, 0, 1) ** 1.2);\n    for (let x = -M + rnd() * rr; x \u003c W + M; ) {\n      const r = rr * (0.65 + 0.7 * rnd());\n      add(S, x, y + (rnd() - 0.5) * rr * 0.6, r);\n      x += r * 1.75 + rr * 0.15;\n    }\n    y -= rr * 1.6;\n  }\n  for (let k = 0; k \u003c 60; k++) pack(S, 0.6);\n}\n\n// Bubbles push apart wherever their discs overlap, the small ones giving\n// way more, so the foam stays packed and its cells polygonal.\nfunction pack(S, k) {\n  const { x, y, r, a, head, next } = S;\n  head.fill(-1);\n  let rmax = 0;\n  for (let i = 0; i \u003c S.n; i++) {\n    const gx = cl(floor((x[i] + M) / CS), 0, GX - 1), gy = cl(floor((y[i] + M) / CS), 0, GY - 1), c = gy * GX + gx;\n    next[i] = head[c];\n    head[c] = i;\n    if (r[i] > rmax) rmax = r[i];\n  }\n  for (let i = 0; i \u003c S.n; i++) {\n    const xi = x[i], yi = y[i], ri = r[i], reach = Math.ceil((ri + rmax) / CS);\n    const gx = cl(floor((xi + M) / CS), 0, GX - 1), gy = cl(floor((yi + M) / CS), 0, GY - 1);\n    for (let cy = max(0, gy - reach); cy \u003c= min(GY - 1, gy + reach); cy++)\n      for (let cx = max(0, gx - reach); cx \u003c= min(GX - 1, gx + reach); cx++)\n        for (let j = head[cy * GX + cx]; j >= 0; j = next[j]) {\n          if (j \u003c= i) continue;\n          const dx = x[j] - xi, dy = y[j] - yi, want = (ri + r[j]) * 0.96, d2 = dx * dx + dy * dy;\n          if (d2 >= want * want) continue;\n          const d = sqrt(d2) + 1e-4, push = ((want - d) / d) * k, wi = a[j] / (a[i] + a[j]);\n          x[i] -= dx * push * wi;\n          y[i] -= dy * push * wi;\n          x[j] += dx * push * (1 - wi);\n          y[j] += dy * push * (1 - wi);\n        }\n  }\n  // Soft walls just past the margin at the sides and the bottom.\n  for (let i = 0; i \u003c S.n; i++) {\n    const lo = -M + r[i] * 0.4, hi = W + M - r[i] * 0.4, bot = H + M - r[i] * 0.6;\n    if (x[i] \u003c lo) x[i] += (lo - x[i]) * 0.5;\n    if (x[i] > hi) x[i] += (hi - x[i]) * 0.5;\n    if (y[i] > bot) y[i] += (bot - y[i]) * 0.5;\n  }\n}\n\n// Every LED of the margined grid takes the bubble whose power distance\n// d^2 - r^2 is least (a Laguerre cell, which is how a 2D foam of mixed\n// sizes divides the plane), and remembers the runner-up for the wall.\nfunction label(S) {\n  const { x, y, r, l1, l2, p1, p2 } = S;\n  l1.fill(-1);\n  l2.fill(-1);\n  p1.fill(1e9);\n  p2.fill(1e9);\n  for (let i = 0; i \u003c S.n; i++) {\n    const R = max(r[i] * 1.4 + 1.3, r[i] * 1.8), w = r[i] * r[i], cx = x[i] + M, cy = y[i] + M;\n    const x0 = max(0, floor(cx - R)), x1 = min(EW - 1, floor(cx + R)), y0 = max(0, floor(cy - R)), y1 = min(EH - 1, floor(cy + R));\n    for (let Y = y0; Y \u003c= y1; Y++) {\n      const dy = Y + 0.5 - cy, dy2 = dy * dy - w;\n      for (let X = x0, p = Y * EW + x0; X \u003c= x1; X++, p++) {\n        const dx = X + 0.5 - cx, pd = dx * dx + dy2;\n        if (pd \u003c p1[p]) {\n          p2[p] = p1[p];\n          l2[p] = l1[p];\n          p1[p] = pd;\n          l1[p] = i;\n        } else if (pd \u003c p2[p]) {\n          p2[p] = pd;\n          l2[p] = i;\n        }\n      }\n    }\n  }\n  // Who touches whom: two cells are neighbours where their LEDs meet.\n  const { nb, nc, edge } = S;\n  nc.fill(0, 0, S.n);\n  for (let i = 0; i \u003c S.n; i++) edge[i] = x[i] - r[i] * 1.6 \u003c -M + 1 || x[i] + r[i] * 1.6 > W + M - 1 || y[i] - r[i] * 1.6 \u003c -M + 1 || y[i] + r[i] * 1.6 > H + M - 1 ? 1 : 0;\n  for (let Y = 0; Y \u003c EH - 1; Y++)\n    for (let X = 0, p = Y * EW; X \u003c EW - 1; X++, p++) {\n      const a = l1[p];\n      if (a \u003c 0) continue;\n      const b = l1[p + 1], c = l1[p + EW];\n      if (b >= 0 && b !== a) link(nb, nc, a, b);\n      if (c >= 0 && c !== a && c !== b) link(nb, nc, a, c);\n    }\n  S.fresh = true;\n}\n\nfunction link(nb, nc, a, b) {\n  const oa = a * NN;\n  for (let k = 0; k \u003c nc[a]; k++) if (nb[oa + k] === b) return;\n  if (nc[a] \u003c NN) nb[oa + nc[a]++] = b;\n  const ob = b * NN;\n  for (let k = 0; k \u003c nc[b]; k++) if (nb[ob + k] === a) return;\n  if (nc[b] \u003c NN) nb[ob + nc[b]++] = a;\n}\n\n// A wall bursts: a flash along it and a few droplets thrown off, and the\n// two bubbles become one with both their areas.\nfunction burst(S, i, j) {\n  const { x, y, r, a } = S;\n  const dx = x[j] - x[i], dy = y[j] - y[i], d = sqrt(dx * dx + dy * dy) + 1e-4;\n  const t = (d * d + r[i] * r[i] - r[j] * r[j]) / (2 * d * d), mx = x[i] + dx * t, my = y[i] + dy * t;\n  const half = min(r[i], r[j]) * 0.75, ux = -dy / d, uy = dx / d;\n  for (let k = 0; k \u003c 3 && S.ndr \u003c 96; k++) {\n    const o = S.ndr++ * 5, s = (rnd() - 0.5) * 2, sp = 10 + 14 * rnd(), side = rnd() \u003c 0.5 ? -1 : 1;\n    S.dr[o] = mx + ux * half * s;\n    S.dr[o + 1] = my + uy * half * s;\n    S.dr[o + 2] = (dx / d) * sp * side + ux * 4 * s;\n    S.dr[o + 3] = (dy / d) * sp * side + uy * 4 * s - 6;\n    S.dr[o + 4] = 1;\n  }\n  const A = a[i] + a[j];\n  x[i] = (x[i] * a[i] + x[j] * a[j]) / A;\n  y[i] = (y[i] * a[i] + y[j] * a[j]) / A;\n  a[i] = A;\n  r[i] = sqrt(A / PI);\n  S.dead[j] = 1;\n  if (S.nfl \u003c 32) {\n    const o = S.nfl++ * 8, f = S.fl;\n    f[o] = mx - ux * half;\n    f[o + 1] = my - uy * half;\n    f[o + 2] = mx + ux * half;\n    f[o + 3] = my + uy * half;\n    f[o + 4] = 1;\n    f[o + 5] = r[i];\n    f[o + 6] = x[i];\n    f[o + 7] = y[i];\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= BATCH) (S.since = 0), (S.boost = 2);\n  const { x, y, r, a, nb, nc, edge, dead } = S;\n  const n = S.n;\n  if (S.fresh) {\n    S.fresh = false;\n    // Gas runs from bubbles with fewer than six sides to those with more.\n    // The mean is taken over the bubbles away from the margin's edge, and\n    // those at the edge keep their size.\n    let sum = 0, cnt = 0;\n    for (let i = 0; i \u003c n; i++) if (!edge[i]) (sum += nc[i]), cnt++;\n    const mean = cnt ? sum / cnt : 6;\n    for (let i = 0; i \u003c n; i++) {\n      if (edge[i] || dead[i]) continue;\n      // A dry foam coarsens faster: its walls are thinner.\n      const dry = 1.3 - 2.5 * liquid(S, y[i]);\n      a[i] += K * (nc[i] - mean) * dry * st;\n      if (a[i] \u003c 2.5) {\n        dead[i] = 1;\n        continue;\n      }\n      r[i] = sqrt(a[i] / PI);\n    }\n    // Walls burst more often the drier and bigger the bubbles.\n    for (let i = 0; i \u003c n; i++) {\n      if (dead[i] || edge[i] || !nc[i]) continue;\n      const dry = cl(1 - liquid(S, y[i]) / 0.2, 0, 1);\n      if (rnd() > st * 0.014 * dry * (r[i] / 3) ** 2) continue;\n      const j = nb[i * NN + floor(rnd() * nc[i])];\n      if (j >= 0 && j \u003c n && !dead[j] && !edge[j]) burst(S, i, j);\n    }\n  }\n  // The foam rises; whatever leaves the top is gone.\n  const up = (RISE + (S.boost > 0 ? BOOST * sm(0, 0.4, S.boost) : 0)) * st;\n  S.boost = max(0, S.boost - st);\n  for (let i = 0; i \u003c n; i++) {\n    y[i] -= up;\n    if (y[i] + r[i] \u003c -M) dead[i] = 1;\n  }\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    if (dead[i]) continue;\n    if (k !== i) {\n      x[k] = x[i];\n      y[k] = y[i];\n      r[k] = r[i];\n      a[k] = a[i];\n      S.tone[k] = S.tone[i];\n    }\n    dead[k] = 0;\n    k++;\n  }\n  S.n = k;\n  // New lather comes in under the bottom edge as fast as the foam rises, a\n  // fresh batch finer still.\n  const f = fresh(S) * (S.boost > 0 ? 0.85 : 1);\n  S.acc += up * EW;\n  while (S.acc > 0 && S.n \u003c NB) {\n    const rr = f * (0.7 + 0.6 * rnd());\n    S.acc -= PI * rr * rr * 0.95;\n    add(S, -M + rnd() * EW, H + M - rr * (0.6 + rnd()), rr);\n  }\n  pack(S, 0.7);\n  // Flashes fade in a third of a second; droplets fly and fall.\n  for (let i = S.nfl - 1; i >= 0; i--) {\n    const o = i * 8;\n    S.fl[o + 4] -= st * 3;\n    if (S.fl[o + 4] \u003c= 0) {\n      const l = --S.nfl * 8;\n      for (let c = 0; c \u003c 8; c++) S.fl[o + c] = S.fl[l + c];\n    }\n  }\n  for (let i = S.ndr - 1; i >= 0; i--) {\n    const o = i * 5;\n    S.dr[o] += S.dr[o + 2] * st;\n    S.dr[o + 1] += S.dr[o + 3] * st;\n    S.dr[o + 3] += 60 * st;\n    S.dr[o + 4] -= st * 3;\n    if (S.dr[o + 4] \u003c= 0) {\n      const l = --S.ndr * 5;\n      for (let c = 0; c \u003c 5; c++) S.dr[o + c] = S.dr[l + c];\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.size = cl(k[2], 0, 1);\n  S.wet = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    fill(S);\n    for (let i = 0; i \u003c 30; i++) {\n      label(S);\n      step(S, 1 / 30);\n    }\n    S.since = 6;\n  }\n  if (input.btnPressed && input.btnPressed[0]) (S.boost = 2), (S.since = 0);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  label(S);\n  const { x, y, r, l1, l2, p1, p2, col, buf, tone } = S;\n  const hue = H0 + S.hue;\n  // Inside a bubble, its rim, the wall, the liquid between bubbles. Orange\n  // and yellow kept dim read brown and olive on LEDs, so near those hues\n  // the inside of a bubble is lit brighter.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.17) / 0.17);\n  hsv(hue, 0.5 - 0.12 * am, 0.52 + 0.34 * am, col, 0);\n  hsv(hue - 0.02, 0.4 - 0.05 * am, 0.85 + 0.13 * am, col, 3);\n  hsv(hue + 0.03, 0.12, 0.98, col, 6);\n  hsv(hue, 0.3, 0.72 + 0.16 * am, col, 9);\n  for (let Y = 0; Y \u003c H; Y++) {\n    const phi = liquid(S, Y), sd = 0.88 + 0.9 * (1 - min(1, phi / 0.36)) ** 2;\n    for (let X = 0; X \u003c W; X++) {\n      const p = (Y + M) * EW + X + M, i = l1[p], q = (Y * W + X) * 3;\n      if (i \u003c 0) {\n        buf[q] = col[9];\n        buf[q + 1] = col[10];\n        buf[q + 2] = col[11];\n        continue;\n      }\n      const px = X + 0.5, py = Y + 0.5, dx = px - x[i], dy = py - y[i], d = sqrt(dx * dx + dy * dy);\n      const j = l2[p];\n      let dw = 9;\n      if (j >= 0) {\n        const ex = x[j] - x[i], ey = y[j] - y[i];\n        dw = (p2[p] - p1[p]) / (2 * sqrt(ex * ex + ey * ey) + 1e-4);\n      }\n      // A bubble is its cell clipped to a disc: in a dry foam the disc\n      // covers the cell and the bubble is a polygon; in a wet one it is\n      // round, sitting in liquid that fills the corners between bubbles.\n      const ed = r[i] * sd - d, e = min(dw, ed);\n      let R, G, B;\n      if (e \u003c 0) {\n        // Liquid: milky, brightest against the bubbles it wets.\n        const k = exp(e * 0.9) * 0.35;\n        R = col[9] + (col[6] - col[9]) * k;\n        G = col[10] + (col[7] - col[10]) * k;\n        B = col[11] + (col[8] - col[11]) * k;\n      } else {\n        // The dome: dim through its middle, brighter round its rim as the\n        // film turns edge on and low on the right where the light that came\n        // in through it gathers, a thin bright wall, and a point of light up\n        // and to the left.\n        const u = d / (d + e + 1e-4), rr = r[i], gx = dx - rr * 0.3, gy = dy - rr * 0.34;\n        const g2 = 1 - (gx * gx + gy * gy) / (1.6 * rr * rr), lens = g2 > 0 ? g2 * g2 * 0.45 : 0, rim = max(u * u * u, lens);\n        const v = 0.85 + 0.3 * tone[i];\n        R = (col[0] * (1 - rim) + col[3] * rim) * v;\n        G = (col[1] * (1 - rim) + col[4] * rim) * v;\n        B = (col[2] * (1 - rim) + col[5] * rim) * v;\n        const s = 0.32 + 0.1 * rr, hx = dx + rr * 0.36, hy = dy + rr * 0.4, h2 = (hx * hx + hy * hy) / (2 * s * s);\n        const h5 = 1 - h2 * 0.2, hl = h5 > 0 ? h5 * h5 * h5 * h5 * h5 * 255 : 0;\n        // The wall, about 1.3 LEDs across: (1 - (e/1.3)^2)^2.\n        const w2 = 1 - e * e * 0.6, wl = w2 > 0 ? w2 * w2 * (ed \u003c dw ? 0.75 : 1) : 0;\n        R += (col[6] - R) * wl + hl;\n        G += (col[7] - G) * wl + hl;\n        B += (col[8] - B) * wl + hl;\n      }\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  }\n  // A burst wall flashes white along its length, and for a moment the new\n  // bubble it leaves is lit through.\n  for (let f = 0; f \u003c S.nfl; f++) {\n    const o = f * 8, fl = S.fl, life = fl[o + 4], len = Math.hypot(fl[o + 2] - fl[o], fl[o + 3] - fl[o + 1]);\n    const steps = max(2, Math.ceil(len * 2)), lf = life * life;\n    for (let k = 0; k \u003c= steps; k++) {\n      const t = k / steps;\n      spot(buf, fl[o] + (fl[o + 2] - fl[o]) * t, fl[o + 1] + (fl[o + 3] - fl[o + 1]) * t, lf * 200 * (1 - 0.6 * abs(t - 0.5)));\n    }\n    const rm = fl[o + 5] * 0.85, cx = fl[o + 6], cy = fl[o + 7];\n    for (let Y = max(0, floor(cy - rm)); Y \u003c= min(H - 1, floor(cy + rm)); Y++)\n      for (let X = max(0, floor(cx - rm)); X \u003c= min(W - 1, floor(cx + rm)); X++) {\n        const d2 = ((X + 0.5 - cx) ** 2 + (Y + 0.5 - cy) ** 2) / (rm * rm);\n        if (d2 >= 1) continue;\n        const w = (1 - d2) * lf * 0.7, q = (Y * W + X) * 3;\n        buf[q] += (col[6] - buf[q] * 0.5) * w;\n        buf[q + 1] += (col[7] - buf[q + 1] * 0.5) * w;\n        buf[q + 2] += (col[8] - buf[q + 2] * 0.5) * w;\n      }\n  }\n  for (let k = 0; k \u003c S.ndr; k++) {\n    const o = k * 5;\n    spot(buf, S.dr[o], S.dr[o + 1], S.dr[o + 4] * 200);\n  }\n  for (let p = 0, Y = 0; Y \u003c H; Y++) for (let X = 0; X \u003c W; X++, p += 3) display.setPixel(X, Y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// White light v shared over the four LEDs round x, y.\nfunction spot(buf, x, y, v) {\n  const X = floor(x - 0.5), Y = floor(y - 0.5), fx = x - 0.5 - X, fy = y - 0.5 - Y;\n  for (let k = 0; k \u003c 4; k++) {\n    const xx = X + (k & 1), yy = Y + (k >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const w = (k & 1 ? fx : 1 - fx) * (k >> 1 ? fy : 1 - fy) * v, q = (yy * W + xx) * 3;\n    buf[q] += w;\n    buf[q + 1] += w;\n    buf[q + 2] += w;\n  }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-foam-lather","type":"code","name":"foam-lather","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Foam Lather\n// Family:  cosmetic\n// Idea:    Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after cleansing foam whipped into lather\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1\n//\n// Knob 1: Hue. The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white.\n// Knob 2: Speed. How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower.\n// Knob 3: Size. The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up.\n// Knob 4: Wetness. How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid.\n// Buttons: K1 tap whips a fresh batch of fine lather in from the bottom.\n\nconst W = 64, H = 128;\nconst { min, max, floor, sqrt, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: sky blue.\nconst H0 = 0.57;\n// The foam is worked out over a margin M past every edge of the panel, so\n// bubbles at the edge have all their neighbours and the edge is no wall.\nconst M = 6, EW = W + 2 * M, EH = H + 2 * M, EN = EW * EH;\n// At most NB bubbles, each with up to NN neighbours on record.\nconst NB = 1100, NN = 16;\n// Gas through the walls: a bubble's area changes by K*(n - 6) LED^2 a second\n// at Speed 2, n its number of neighbours (von Neumann's law for 2D foam). The\n// 6 is the mean count of the bubbles on the panel, which comes out at 5.9 to\n// 6.1, and the dry foam at the top runs 1.2 times as fast.\nconst K = 1.6;\n// The foam rises RISE rows a second; a batch of lather comes every BATCH\n// seconds and pushes it up BOOST rows a second faster for two seconds.\nconst RISE = 1.2, BATCH = 15, BOOST = 14;\n// Packing grid for the bubbles, CS LEDs a cell.\nconst CS = 6, GX = Math.ceil(EW / CS) + 1, GY = Math.ceil(EH / CS) + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(NB), y: F(NB), r: F(NB), a: F(NB), tone: F(NB), n: 0, dead: new Uint8Array(NB),\n    nb: new Int16Array(NB * NN), nc: new Uint8Array(NB), edge: new Uint8Array(NB), fresh: true,\n    l1: new Int16Array(EN), l2: new Int16Array(EN), p1: F(EN), p2: F(EN),\n    head: new Int16Array(GX * GY), next: new Int16Array(NB),\n    fl: F(32 * 8), nfl: 0, dr: F(96 * 5), ndr: 0,\n    T: 0, since: 0, boost: 0, acc: 0, rate: 1, size: 0, wet: 0.06, hue: 0, started: false,\n    col: F(18), buf: F(W * H * 3),\n  };\n}\n\n// The radius of fresh lather.\nconst fresh = (S) => 2.1 + 3.2 * S.size;\n\nfunction add(S, x, y, r) {\n  if (S.n >= NB) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.r[i] = r;\n  S.a[i] = PI * r * r;\n  S.tone[i] = rnd();\n  S.dead[i] = 0;\n  S.nc[i] = 0;\n  S.edge[i] = 1;\n}\n\n// Liquid fraction at height y: it drains, so the foam is wettest at the\n// bottom; Wetness raises it everywhere.\nfunction liquid(S, y) {\n  const b = cl(y / H, 0, 1), dr = b ** 4;\n  return cl(0.02 + 0.3 * S.wet + (0.2 + 0.1 * S.wet) * dr, 0, 0.4);\n}\n\n// The panel filled with lather that has already risen and coarsened: fine\n// bubbles at the bottom, two and a half times as big at the top.\nfunction fill(S) {\n  S.n = 0;\n  const f = fresh(S);\n  let y = EH - M - f;\n  while (y > -M - 2) {\n    const rr = f * (1 + 1.5 * cl((H - y) / H, 0, 1) ** 1.2);\n    for (let x = -M + rnd() * rr; x \u003c W + M; ) {\n      const r = rr * (0.65 + 0.7 * rnd());\n      add(S, x, y + (rnd() - 0.5) * rr * 0.6, r);\n      x += r * 1.75 + rr * 0.15;\n    }\n    y -= rr * 1.6;\n  }\n  for (let k = 0; k \u003c 60; k++) pack(S, 0.6);\n}\n\n// Bubbles push apart wherever their discs overlap, the small ones giving\n// way more, so the foam stays packed and its cells polygonal.\nfunction pack(S, k) {\n  const { x, y, r, a, head, next } = S;\n  head.fill(-1);\n  let rmax = 0;\n  for (let i = 0; i \u003c S.n; i++) {\n    const gx = cl(floor((x[i] + M) / CS), 0, GX - 1), gy = cl(floor((y[i] + M) / CS), 0, GY - 1), c = gy * GX + gx;\n    next[i] = head[c];\n    head[c] = i;\n    if (r[i] > rmax) rmax = r[i];\n  }\n  for (let i = 0; i \u003c S.n; i++) {\n    const xi = x[i], yi = y[i], ri = r[i], reach = Math.ceil((ri + rmax) / CS);\n    const gx = cl(floor((xi + M) / CS), 0, GX - 1), gy = cl(floor((yi + M) / CS), 0, GY - 1);\n    for (let cy = max(0, gy - reach); cy \u003c= min(GY - 1, gy + reach); cy++)\n      for (let cx = max(0, gx - reach); cx \u003c= min(GX - 1, gx + reach); cx++)\n        for (let j = head[cy * GX + cx]; j >= 0; j = next[j]) {\n          if (j \u003c= i) continue;\n          const dx = x[j] - xi, dy = y[j] - yi, want = (ri + r[j]) * 0.96, d2 = dx * dx + dy * dy;\n          if (d2 >= want * want) continue;\n          const d = sqrt(d2) + 1e-4, push = ((want - d) / d) * k, wi = a[j] / (a[i] + a[j]);\n          x[i] -= dx * push * wi;\n          y[i] -= dy * push * wi;\n          x[j] += dx * push * (1 - wi);\n          y[j] += dy * push * (1 - wi);\n        }\n  }\n  // Soft walls just past the margin at the sides and the bottom.\n  for (let i = 0; i \u003c S.n; i++) {\n    const lo = -M + r[i] * 0.4, hi = W + M - r[i] * 0.4, bot = H + M - r[i] * 0.6;\n    if (x[i] \u003c lo) x[i] += (lo - x[i]) * 0.5;\n    if (x[i] > hi) x[i] += (hi - x[i]) * 0.5;\n    if (y[i] > bot) y[i] += (bot - y[i]) * 0.5;\n  }\n}\n\n// Every LED of the margined grid takes the bubble whose power distance\n// d^2 - r^2 is least (a Laguerre cell, which is how a 2D foam of mixed\n// sizes divides the plane), and remembers the runner-up for the wall.\nfunction label(S) {\n  const { x, y, r, l1, l2, p1, p2 } = S;\n  l1.fill(-1);\n  l2.fill(-1);\n  p1.fill(1e9);\n  p2.fill(1e9);\n  for (let i = 0; i \u003c S.n; i++) {\n    const R = max(r[i] * 1.4 + 1.3, r[i] * 1.8), w = r[i] * r[i], cx = x[i] + M, cy = y[i] + M;\n    const x0 = max(0, floor(cx - R)), x1 = min(EW - 1, floor(cx + R)), y0 = max(0, floor(cy - R)), y1 = min(EH - 1, floor(cy + R));\n    for (let Y = y0; Y \u003c= y1; Y++) {\n      const dy = Y + 0.5 - cy, dy2 = dy * dy - w;\n      for (let X = x0, p = Y * EW + x0; X \u003c= x1; X++, p++) {\n        const dx = X + 0.5 - cx, pd = dx * dx + dy2;\n        if (pd \u003c p1[p]) {\n          p2[p] = p1[p];\n          l2[p] = l1[p];\n          p1[p] = pd;\n          l1[p] = i;\n        } else if (pd \u003c p2[p]) {\n          p2[p] = pd;\n          l2[p] = i;\n        }\n      }\n    }\n  }\n  // Who touches whom: two cells are neighbours where their LEDs meet.\n  const { nb, nc, edge } = S;\n  nc.fill(0, 0, S.n);\n  for (let i = 0; i \u003c S.n; i++) edge[i] = x[i] - r[i] * 1.6 \u003c -M + 1 || x[i] + r[i] * 1.6 > W + M - 1 || y[i] - r[i] * 1.6 \u003c -M + 1 || y[i] + r[i] * 1.6 > H + M - 1 ? 1 : 0;\n  for (let Y = 0; Y \u003c EH - 1; Y++)\n    for (let X = 0, p = Y * EW; X \u003c EW - 1; X++, p++) {\n      const a = l1[p];\n      if (a \u003c 0) continue;\n      const b = l1[p + 1], c = l1[p + EW];\n      if (b >= 0 && b !== a) link(nb, nc, a, b);\n      if (c >= 0 && c !== a && c !== b) link(nb, nc, a, c);\n    }\n  S.fresh = true;\n}\n\nfunction link(nb, nc, a, b) {\n  const oa = a * NN;\n  for (let k = 0; k \u003c nc[a]; k++) if (nb[oa + k] === b) return;\n  if (nc[a] \u003c NN) nb[oa + nc[a]++] = b;\n  const ob = b * NN;\n  for (let k = 0; k \u003c nc[b]; k++) if (nb[ob + k] === a) return;\n  if (nc[b] \u003c NN) nb[ob + nc[b]++] = a;\n}\n\n// A wall bursts: a flash along it and a few droplets thrown off, and the\n// two bubbles become one with both their areas.\nfunction burst(S, i, j) {\n  const { x, y, r, a } = S;\n  const dx = x[j] - x[i], dy = y[j] - y[i], d = sqrt(dx * dx + dy * dy) + 1e-4;\n  const t = (d * d + r[i] * r[i] - r[j] * r[j]) / (2 * d * d), mx = x[i] + dx * t, my = y[i] + dy * t;\n  const half = min(r[i], r[j]) * 0.75, ux = -dy / d, uy = dx / d;\n  for (let k = 0; k \u003c 3 && S.ndr \u003c 96; k++) {\n    const o = S.ndr++ * 5, s = (rnd() - 0.5) * 2, sp = 10 + 14 * rnd(), side = rnd() \u003c 0.5 ? -1 : 1;\n    S.dr[o] = mx + ux * half * s;\n    S.dr[o + 1] = my + uy * half * s;\n    S.dr[o + 2] = (dx / d) * sp * side + ux * 4 * s;\n    S.dr[o + 3] = (dy / d) * sp * side + uy * 4 * s - 6;\n    S.dr[o + 4] = 1;\n  }\n  const A = a[i] + a[j];\n  x[i] = (x[i] * a[i] + x[j] * a[j]) / A;\n  y[i] = (y[i] * a[i] + y[j] * a[j]) / A;\n  a[i] = A;\n  r[i] = sqrt(A / PI);\n  S.dead[j] = 1;\n  if (S.nfl \u003c 32) {\n    const o = S.nfl++ * 8, f = S.fl;\n    f[o] = mx - ux * half;\n    f[o + 1] = my - uy * half;\n    f[o + 2] = mx + ux * half;\n    f[o + 3] = my + uy * half;\n    f[o + 4] = 1;\n    f[o + 5] = r[i];\n    f[o + 6] = x[i];\n    f[o + 7] = y[i];\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= BATCH) (S.since = 0), (S.boost = 2);\n  const { x, y, r, a, nb, nc, edge, dead } = S;\n  const n = S.n;\n  if (S.fresh) {\n    S.fresh = false;\n    // Gas runs from bubbles with fewer than six sides to those with more.\n    // The mean is taken over the bubbles away from the margin's edge, and\n    // those at the edge keep their size.\n    let sum = 0, cnt = 0;\n    for (let i = 0; i \u003c n; i++) if (!edge[i]) (sum += nc[i]), cnt++;\n    const mean = cnt ? sum / cnt : 6;\n    for (let i = 0; i \u003c n; i++) {\n      if (edge[i] || dead[i]) continue;\n      // A dry foam coarsens faster: its walls are thinner.\n      const dry = 1.3 - 2.5 * liquid(S, y[i]);\n      a[i] += K * (nc[i] - mean) * dry * st;\n      if (a[i] \u003c 2.5) {\n        dead[i] = 1;\n        continue;\n      }\n      r[i] = sqrt(a[i] / PI);\n    }\n    // Walls burst more often the drier and bigger the bubbles.\n    for (let i = 0; i \u003c n; i++) {\n      if (dead[i] || edge[i] || !nc[i]) continue;\n      const dry = cl(1 - liquid(S, y[i]) / 0.2, 0, 1);\n      if (rnd() > st * 0.014 * dry * (r[i] / 3) ** 2) continue;\n      const j = nb[i * NN + floor(rnd() * nc[i])];\n      if (j >= 0 && j \u003c n && !dead[j] && !edge[j]) burst(S, i, j);\n    }\n  }\n  // The foam rises; whatever leaves the top is gone.\n  const up = (RISE + (S.boost > 0 ? BOOST * sm(0, 0.4, S.boost) : 0)) * st;\n  S.boost = max(0, S.boost - st);\n  for (let i = 0; i \u003c n; i++) {\n    y[i] -= up;\n    if (y[i] + r[i] \u003c -M) dead[i] = 1;\n  }\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    if (dead[i]) continue;\n    if (k !== i) {\n      x[k] = x[i];\n      y[k] = y[i];\n      r[k] = r[i];\n      a[k] = a[i];\n      S.tone[k] = S.tone[i];\n    }\n    dead[k] = 0;\n    k++;\n  }\n  S.n = k;\n  // New lather comes in under the bottom edge as fast as the foam rises, a\n  // fresh batch finer still.\n  const f = fresh(S) * (S.boost > 0 ? 0.85 : 1);\n  S.acc += up * EW;\n  while (S.acc > 0 && S.n \u003c NB) {\n    const rr = f * (0.7 + 0.6 * rnd());\n    S.acc -= PI * rr * rr * 0.95;\n    add(S, -M + rnd() * EW, H + M - rr * (0.6 + rnd()), rr);\n  }\n  pack(S, 0.7);\n  // Flashes fade in a third of a second; droplets fly and fall.\n  for (let i = S.nfl - 1; i >= 0; i--) {\n    const o = i * 8;\n    S.fl[o + 4] -= st * 3;\n    if (S.fl[o + 4] \u003c= 0) {\n      const l = --S.nfl * 8;\n      for (let c = 0; c \u003c 8; c++) S.fl[o + c] = S.fl[l + c];\n    }\n  }\n  for (let i = S.ndr - 1; i >= 0; i--) {\n    const o = i * 5;\n    S.dr[o] += S.dr[o + 2] * st;\n    S.dr[o + 1] += S.dr[o + 3] * st;\n    S.dr[o + 3] += 60 * st;\n    S.dr[o + 4] -= st * 3;\n    if (S.dr[o + 4] \u003c= 0) {\n      const l = --S.ndr * 5;\n      for (let c = 0; c \u003c 5; c++) S.dr[o + c] = S.dr[l + c];\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.size = cl(k[2], 0, 1);\n  S.wet = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    fill(S);\n    for (let i = 0; i \u003c 30; i++) {\n      label(S);\n      step(S, 1 / 30);\n    }\n    S.since = 6;\n  }\n  if (input.btnPressed && input.btnPressed[0]) (S.boost = 2), (S.since = 0);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  label(S);\n  const { x, y, r, l1, l2, p1, p2, col, buf, tone } = S;\n  const hue = H0 + S.hue;\n  // Inside a bubble, its rim, the wall, the liquid between bubbles. Orange\n  // and yellow kept dim read brown and olive on LEDs, so near those hues\n  // the inside of a bubble is lit brighter.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.17) / 0.17);\n  hsv(hue, 0.5 - 0.12 * am, 0.52 + 0.34 * am, col, 0);\n  hsv(hue - 0.02, 0.4 - 0.05 * am, 0.85 + 0.13 * am, col, 3);\n  hsv(hue + 0.03, 0.12, 0.98, col, 6);\n  hsv(hue, 0.3, 0.72 + 0.16 * am, col, 9);\n  for (let Y = 0; Y \u003c H; Y++) {\n    const phi = liquid(S, Y), sd = 0.88 + 0.9 * (1 - min(1, phi / 0.36)) ** 2;\n    for (let X = 0; X \u003c W; X++) {\n      const p = (Y + M) * EW + X + M, i = l1[p], q = (Y * W + X) * 3;\n      if (i \u003c 0) {\n        buf[q] = col[9];\n        buf[q + 1] = col[10];\n        buf[q + 2] = col[11];\n        continue;\n      }\n      const px = X + 0.5, py = Y + 0.5, dx = px - x[i], dy = py - y[i], d = sqrt(dx * dx + dy * dy);\n      const j = l2[p];\n      let dw = 9;\n      if (j >= 0) {\n        const ex = x[j] - x[i], ey = y[j] - y[i];\n        dw = (p2[p] - p1[p]) / (2 * sqrt(ex * ex + ey * ey) + 1e-4);\n      }\n      // A bubble is its cell clipped to a disc: in a dry foam the disc\n      // covers the cell and the bubble is a polygon; in a wet one it is\n      // round, sitting in liquid that fills the corners between bubbles.\n      const ed = r[i] * sd - d, e = min(dw, ed);\n      let R, G, B;\n      if (e \u003c 0) {\n        // Liquid: milky, brightest against the bubbles it wets.\n        const k = exp(e * 0.9) * 0.35;\n        R = col[9] + (col[6] - col[9]) * k;\n        G = col[10] + (col[7] - col[10]) * k;\n        B = col[11] + (col[8] - col[11]) * k;\n      } else {\n        // The dome: dim through its middle, brighter round its rim as the\n        // film turns edge on and low on the right where the light that came\n        // in through it gathers, a thin bright wall, and a point of light up\n        // and to the left.\n        const u = d / (d + e + 1e-4), rr = r[i], gx = dx - rr * 0.3, gy = dy - rr * 0.34;\n        const g2 = 1 - (gx * gx + gy * gy) / (1.6 * rr * rr), lens = g2 > 0 ? g2 * g2 * 0.45 : 0, rim = max(u * u * u, lens);\n        const v = 0.85 + 0.3 * tone[i];\n        R = (col[0] * (1 - rim) + col[3] * rim) * v;\n        G = (col[1] * (1 - rim) + col[4] * rim) * v;\n        B = (col[2] * (1 - rim) + col[5] * rim) * v;\n        const s = 0.32 + 0.1 * rr, hx = dx + rr * 0.36, hy = dy + rr * 0.4, h2 = (hx * hx + hy * hy) / (2 * s * s);\n        const h5 = 1 - h2 * 0.2, hl = h5 > 0 ? h5 * h5 * h5 * h5 * h5 * 255 : 0;\n        // The wall, about 1.3 LEDs across: (1 - (e/1.3)^2)^2.\n        const w2 = 1 - e * e * 0.6, wl = w2 > 0 ? w2 * w2 * (ed \u003c dw ? 0.75 : 1) : 0;\n        R += (col[6] - R) * wl + hl;\n        G += (col[7] - G) * wl + hl;\n        B += (col[8] - B) * wl + hl;\n      }\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  }\n  // A burst wall flashes white along its length, and for a moment the new\n  // bubble it leaves is lit through.\n  for (let f = 0; f \u003c S.nfl; f++) {\n    const o = f * 8, fl = S.fl, life = fl[o + 4], len = Math.hypot(fl[o + 2] - fl[o], fl[o + 3] - fl[o + 1]);\n    const steps = max(2, Math.ceil(len * 2)), lf = life * life;\n    for (let k = 0; k \u003c= steps; k++) {\n      const t = k / steps;\n      spot(buf, fl[o] + (fl[o + 2] - fl[o]) * t, fl[o + 1] + (fl[o + 3] - fl[o + 1]) * t, lf * 200 * (1 - 0.6 * abs(t - 0.5)));\n    }\n    const rm = fl[o + 5] * 0.85, cx = fl[o + 6], cy = fl[o + 7];\n    for (let Y = max(0, floor(cy - rm)); Y \u003c= min(H - 1, floor(cy + rm)); Y++)\n      for (let X = max(0, floor(cx - rm)); X \u003c= min(W - 1, floor(cx + rm)); X++) {\n        const d2 = ((X + 0.5 - cx) ** 2 + (Y + 0.5 - cy) ** 2) / (rm * rm);\n        if (d2 >= 1) continue;\n        const w = (1 - d2) * lf * 0.7, q = (Y * W + X) * 3;\n        buf[q] += (col[6] - buf[q] * 0.5) * w;\n        buf[q + 1] += (col[7] - buf[q + 1] * 0.5) * w;\n        buf[q + 2] += (col[8] - buf[q + 2] * 0.5) * w;\n      }\n  }\n  for (let k = 0; k \u003c S.ndr; k++) {\n    const o = k * 5;\n    spot(buf, S.dr[o], S.dr[o + 1], S.dr[o + 4] * 200);\n  }\n  for (let p = 0, Y = 0; Y \u003c H; Y++) for (let X = 0; X \u003c W; X++, p += 3) display.setPixel(X, Y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// White light v shared over the four LEDs round x, y.\nfunction spot(buf, x, y, v) {\n  const X = floor(x - 0.5), Y = floor(y - 0.5), fx = x - 0.5 - X, fy = y - 0.5 - Y;\n  for (let k = 0; k \u003c 4; k++) {\n    const xx = X + (k & 1), yy = Y + (k >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const w = (k & 1 ? fx : 1 - fx) * (k >> 1 ? fy : 1 - fy) * v, q = (yy * W + xx) * 3;\n    buf[q] += w;\n    buf[q + 1] += w;\n    buf[q + 2] += w;\n  }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower."},{"name":"Size","min":0,"max":1,"about":"The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up."},{"name":"Wetness","min":0,"max":1,"about":"How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid."}],"start":[0,2,0,0.06],"measures":{"motion":0.1524,"detail":0.0833,"edges":0.3017,"complexity":2.5679,"coverage":1,"colour":0.1471,"drift":0.0328},"knobResponse":[0.1783,0.2037,0.1967,0.1202]},{"slug":"ford-circles","title":"Ford Circles","family":"number","round":28,"note":"세운 왼쪽 가장자리가 실수선이고, 분수 p/q 마다 반지름 1/(2q²) 인 원이 그 자리에 기대 서요. 화면은 황금비로 끝없이 들어가고, 맞닿은 두 원 사이의 중간수 자리에 더 작은 원이 자꾸 나와요. K3 이 과녁을 √2, √3, e, π 로 바꾸고, 누르면 스턴-브로코 나무를 따라 과녁까지 내려가는 길이 켜져요.","idea":"The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.","buttons":"K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.","code":"// ===== Patternflow pattern =====\n// Title:   Ford Circles\n// Family:  number\n// Idea:    The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ford circles (Lester R. Ford, 1938) and the Farey sequence (John Farey, 1816), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long.\n// Knob 3: Target. The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one.\n// Knob 4: Fill. Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid.\n// Buttons: K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, log, sin, abs, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Screen rows run down the real line with larger numbers at the top; the\n// target sits in the middle of row 64. Circles narrower than RMIN LEDs are\n// left out, and the window jumps to the next convergent with MARG to spare.\nconst CY = 64.5, TROW = 64, RMIN = 0.28, MARG = 1.08, MAXC = 1200, S0 = 132;\n\n// The continued fractions of the targets, a(i) for i = 0, 1, 2, ... The\n// golden ratio is [1; 1, 1, ...], the square roots of 2 and 3 repeat, e runs\n// [2; 1, 2, 1, 1, 4, 1, 1, 6, ...] and pi is written out to 50 terms. After\n// term 39 for e and 49 for pi the terms start over, so the number the zoom\n// falls into agrees with e and pi to more than 30 decimal places.\nconst PIC = [3, 7, 15, 1, 292, 1, 1, 1, 2, 1, 3, 1, 14, 2, 1, 1, 2, 2, 2, 2, 1, 84, 2, 1, 1, 15, 3, 13, 1, 4, 2, 6, 6, 99, 1, 2, 2, 6, 3, 5, 1, 1, 6, 8, 1, 7, 1, 2, 3, 7];\nconst TG = [\n  () => 1,\n  (i) => (i ? 2 : 1),\n  (i) => (i ? 2 - (i & 1) : 1),\n  (i) => {\n    if (!i) return 2;\n    i = 1 + ((i - 1) % 39);\n    return i % 3 === 2 ? (2 * (i + 1)) / 3 : 1;\n  },\n  (i) => PIC[i \u003c 50 ? i : 1 + ((i - 1) % 49)],\n];\n// [a(i); a(i+1), a(i+2), ...] to double precision.\nfunction tail(a, i) {\n  let v = a(i + 26);\n  for (let j = i + 25; j >= i; j--) v = a(j) + 1 / v;\n  return v;\n}\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\nconst smooth = (a, b, v) => {\n  const u = cl((v - a) / (b - a), 0, 1);\n  return u * u * (3 - 2 * u);\n};\n\n// The window is kept in the frame of the convergents p/q (index n) and\n// p'/q' (index n-1) of the target alpha. The map X -> (pX + p')/(qX + q')\n// sends the Ford circles onto themselves, sends 1/0 and 0/1 to p/q and p'/q',\n// and sends the tail t = [a(n+1); a(n+2), ...] to alpha. A fraction P/Q in\n// that frame lands on the LEDs at s(p/q - alpha) = sig D (P - tQ) / ((P + kQ)(t + k))\n// with radius sig / (2 (P + kQ)^2), where k = q'/q, D = pq' - p'q = +-1 and\n// sig = s/q^2. All of these stay small however deep the zoom goes, so it\n// can run for ever in double precision.\nfunction start(S, tgt) {\n  const a = TG[tgt];\n  S.tgt = tgt;\n  S.a = a;\n  S.n = 0;\n  S.k = 0;\n  S.D = -1;\n  S.lnq = 0;\n  S.t = tail(a, 1);\n  S.sig = max(S0, 64 * MARG * S.t + 1);\n  // p, q, p' and q' modulo 2^32, for each circle's own twinkle.\n  S.pn = a(0);\n  S.pm = 1;\n  S.qn = 1;\n  S.qm = 0;\n  S.fade = 0;\n}\n// The next convergent's frame is used as soon as the window sits wholly\n// between it and the one before: both tangent points off the panel, and the\n// two circles touching beyond the right edge.\nfunction advance(S) {\n  for (let g = 0; g \u003c 8; g++) {\n    const an = S.a(S.n + 1), k2 = 1 / (an + S.k), t2 = tail(S.a, S.n + 2);\n    if (S.sig * k2 * k2 \u003c= 64 * MARG * (t2 + k2)) return;\n    S.sig *= k2 * k2;\n    S.lnq -= log(k2);\n    S.k = k2;\n    S.t = t2;\n    S.D = -S.D;\n    S.n++;\n    const pn = (Math.imul(an, S.pn) + S.pm) | 0, qn = (Math.imul(an, S.qn) + S.qm) | 0;\n    S.pm = S.pn;\n    S.qm = S.qn;\n    S.pn = pn;\n    S.qn = qn;\n  }\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    time: 0, wave: -1, hue: 0, glow: 0.55, depth: 1.8, flat: 0.05,\n    Y: new Float64Array(MAXC), R: new Float64Array(MAXC), Wt: new Float64Array(MAXC),\n    PP: new Int32Array(MAXC), QQ: new Int32Array(MAXC), PA: new Int32Array(MAXC), PB: new Int32Array(MAXC),\n    CV: new Uint8Array(MAXC), PH: new Uint8Array(MAXC), stack: new Int32Array(MAXC * 4), conv: new Float64Array(96),\n    buf: new Float32Array(N * 3), col: [0, 0, 0],\n  });\n  start(S, 0);\n  S.tgt = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.time += d;\n  S.hue = k[0];\n  // Fill lights the inside of each circle in from its rim: a glow a few\n  // LEDs deep at first, then a flat fill under it up to a solid disc.\n  const u = cl(k[3], 0, 1), fk = sqrt(u);\n  S.glow = min(0.55, 2.4 * fk);\n  S.depth = 0.8 + 4 * fk;\n  S.flat = 0.85 * u;\n  const tgt = cl(round(k[2]), 0, 4);\n  if (tgt !== S.tgt) {\n    const first = S.tgt \u003c 0;\n    start(S, tgt);\n    if (first) S.fade = 1;\n  }\n  S.fade = min(1, S.fade + d * 2.5);\n  S.sig *= exp(d * cl(k[1], 0.2, 3) * 0.165);\n  advance(S);\n  if (S.wave >= 0) {\n    S.wave += d;\n    if (S.wave > WT) S.wave = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.wave = 0;\n}\n\n// Every circle that reaches the panel: the two convergents framing the\n// window, then the Stern-Brocot tree between them, each new fraction the\n// mediant of two that touch. A gap whose two tangent points both lie off one\n// end of the panel holds nothing on it, and a mediant too small to see has\n// only smaller ones below it.\nfunction circles(S) {\n  const { Y, R, Wt, PP, QQ, PA, PB, CV, PH, stack, conv } = S;\n  const sig = S.sig, k = S.k, t = S.t, D = S.D, tk = t + k, wmax = sqrt(sig / (2 * RMIN));\n  // The convergents of the tail are the convergents of the target.\n  let nc = 0;\n  for (let j = 0, h1 = 1, k1 = 0, h0 = S.a(S.n + 1), k0 = 1; j \u003c 40 && h0 + k * k0 \u003c= wmax; j++) {\n    conv[nc++] = h0;\n    conv[nc++] = k0;\n    const a = S.a(S.n + 2 + j), h2 = a * h0 + h1, k2 = a * k0 + k1;\n    (h1 = h0), (k1 = k0), (h0 = h2), (k0 = k2);\n  }\n  PP[0] = 0, QQ[0] = 1, Wt[0] = k, CV[0] = 1, PH[0] = 1;\n  if (k > 0) (R[0] = sig / (2 * k * k)), (Y[0] = CY + (D * sig * t) / (k * tk));\n  else (R[0] = 0), (Y[0] = CY + D * 1e30);\n  PP[1] = 1, QQ[1] = 0, Wt[1] = 1, CV[1] = 1, PH[1] = 1, R[1] = sig / 2, Y[1] = CY - (D * sig) / tk;\n  let n = 2, sp = 0;\n  stack[sp++] = 0;\n  stack[sp++] = 1;\n  while (sp > 0 && n \u003c MAXC) {\n    const b = stack[--sp], a = stack[--sp], ya = Y[a], yb = Y[b];\n    if ((ya \u003c -1 && yb \u003c -1) || (ya > H + 1 && yb > H + 1)) continue;\n    const P = PP[a] + PP[b], Q = QQ[a] + QQ[b], w = P + k * Q;\n    if (w > wmax) continue;\n    PP[n] = P, QQ[n] = Q, Wt[n] = w, PA[n] = a, PB[n] = b;\n    R[n] = sig / (2 * w * w);\n    Y[n] = CY - (D * sig * (P - t * Q)) / (w * tk);\n    let c = 0;\n    for (let j = 0; j \u003c nc; j += 2) if (conv[j] === P && conv[j + 1] === Q) c = 1;\n    CV[n] = c;\n    // On the descent to the target: the target lies between the parents.\n    PH[n] = (PP[a] - t * QQ[a]) * (PP[b] - t * QQ[b]) \u003c 0 ? 1 : 0;\n    stack[sp++] = a;\n    stack[sp++] = n;\n    stack[sp++] = n;\n    stack[sp++] = b;\n    n++;\n  }\n  return n;\n}\n\n// The rim is RW LEDs either side of the circle's edge.\nconst RW = 0.85;\n// Colour by denominator: the hue walks HA round the wheel and back as ln q\n// climbs by HL and HL again, so the circles stay on the cool side of the\n// wheel (teal, blue, violet, pink at the start) however deep the zoom goes.\nconst HA = 0.36, HL = 4;\n// The descent's front runs WV units of ln(size) a second; a tap lasts WT s.\nconst WV = 1.8, WT = 5;\nfunction disc(buf, r, yc, cr, cg, cb, ra, ga, gl, fa, cw) {\n  const y0 = max(0, floor(yc - r - 1)), y1 = min(H - 1, floor(yc + r + 1)), x1 = min(W - 1, floor(2 * r + 1)), rw = RW * cw;\n  for (let y = y0; y \u003c= y1; y++) {\n    const dy = y + 0.5 - yc, dy2 = dy * dy;\n    const ady = abs(dy), xs = ady \u003c= r ? dy2 / (r + sqrt(r * r - dy2)) : r;\n    for (let x = max(0, floor(xs - 2)); x \u003c= x1; x++) {\n      const X = x + 0.5, dist = sqrt((X - r) * (X - r) + dy2), d = (X * X - 2 * X * r + dy2) / (dist + r);\n      if (d > rw) {\n        if (X > r) break;\n        continue;\n      }\n      let v = ra * (d > -rw ? 1 - abs(d) / rw : 0);\n      if (d \u003c 0.5) v += cl(0.5 - d, 0, 1) * (fa + ga * exp(d / gl) + (y === TROW ? 0.32 : 0));\n      const p = (y * W + x) * 3;\n      buf[p] += cr * v;\n      buf[p + 1] += cg * v;\n      buf[p + 2] += cb * v;\n    }\n  }\n}\nfunction dot(buf, x, y, v, cr, cg, cb) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = xi + i, py = yi + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = v * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), p = (py * W + px) * 3;\n      buf[p] += cr * w;\n      buf[p + 1] += cg * w;\n      buf[p + 2] += cb * w;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const buf = S.buf, col = S.col, n = circles(S), { Y, R, Wt, PP, QQ, PA, PB, CV, PH } = S;\n  buf.fill(0);\n  // The target's ray. A circle the row through alpha crosses has\n  // |alpha - p/q| \u003c 1/(2q^2), and by Legendre's theorem that makes p/q a\n  // convergent of alpha: the zoom passes through convergents and nothing\n  // else. Convergents get whiter, wider rims; the row lights inside them.\n  for (let x = 0; x \u003c W; x++) {\n    const p = (TROW * W + x) * 3, v = 0.13 * (1 - x / 90);\n    buf[p] += 255 * v;\n    buf[p + 1] += 240 * v;\n    buf[p + 2] += 200 * v;\n  }\n  // After a K1 tap the Stern-Brocot descent into the target lights up: a\n  // front runs from the biggest circles to the smallest and lights each\n  // fraction whose two parents hold the target between them, so the light\n  // hops mediant by mediant, each circle touching the last, down to the\n  // spark on the line. The rest of the window dims while it runs.\n  const on = S.wave >= 0, wf = S.wave * WV - 1.2, wd = on ? smooth(0, 0.3, S.wave) * min(1, (WT - S.wave) / 0.9) : 0;\n  for (let i = 0; i \u003c n; i++) {\n    const r = R[i];\n    if (r \u003c RMIN || (i === 0 && S.k === 0)) continue;\n    const lq = (S.lnq + log(Wt[i])) / HL;\n    hsv(S.hue + 0.5 + HA * abs(lq - 2 * floor(lq / 2 + 0.5)), 0.82, 1, col);\n    let cr = col[0], cg = col[1], cb = col[2], ra = 0.9, cw = 1, ga = S.glow, fa = S.flat;\n    let vis = smooth(RMIN, 1.6, r);\n    if (CV[i]) (cr = cr * 0.65 + 89), (cg = cg * 0.65 + 84), (cb = cb * 0.65 + 70), (ra = 1), (cw = 1.3);\n    if (on && PH[i]) {\n      const lv = log(64 / r), fr = exp(-(((wf - lv) / 0.35) ** 2)), lit = smooth(-0.25, 0.25, wf - lv) * wd;\n      (cr += (255 - cr) * (0.25 * lit + 0.5 * fr)), (cg += (255 - cg) * (0.25 * lit + 0.5 * fr)), (cb += (255 - cb) * (0.25 * lit + 0.5 * fr));\n      (ra += 0.4 * lit + fr), (ga += 0.4 * lit), (fa += 0.12 * lit + 0.35 * fr), (cw += 0.4 * lit);\n    } else vis *= 1 - 0.55 * wd;\n    disc(buf, r, Y[i], cr, cg, cb, ra * vis, ga * vis, S.depth * (1 + 0.1 * min(r, 90)), fa * vis, cw);\n  }\n  // The points where circles touch glint, each at its own pace. Every\n  // tangency on the panel is a mediant touching one of its two parents.\n  const { pn, pm, qn, qm } = S;\n  for (let i = 2; i \u003c n; i++) {\n    const rm = R[i];\n    if (rm \u003c 1.2) continue;\n    const pa = Math.imul(pn, PP[i]) + Math.imul(pm, QQ[i]), qa = Math.imul(qn, PP[i]) + Math.imul(qm, QQ[i]);\n    const fr = on && PH[i] ? 2 * exp(-(((wf - log(64 / rm)) / 0.35) ** 2)) : 0;\n    for (let e = 0; e \u003c 2; e++) {\n      const j = e ? PB[i] : PA[i], rp = R[j];\n      if (j === 0 && S.k === 0) continue;\n      const tx = (2 * rp * rm) / (rp + rm), ty = Y[i] + (Y[j] > Y[i] ? 1 : -1) * ((2 * rm * sqrt(rp * rm)) / (rp + rm));\n      if (tx > W || ty \u003c -1 || ty > H) continue;\n      const h = hash(pa ^ (Math.imul(pn, PP[j]) + Math.imul(pm, QQ[j])), qa ^ (Math.imul(qn, PP[j]) + Math.imul(qm, QQ[j])));\n      const sn = sin(S.time * (1.1 + h * 1.7) + h * 40), g = (0.3 + 0.9 * sn ** 6 + fr) * smooth(1.2, 4, rm);\n      dot(buf, tx - 0.5, ty - 0.5, g * 1.6, 255, 245, 225);\n    }\n  }\n  // The target itself, a spark on the line.\n  dot(buf, 0.25, TROW, 1.4, 255, 250, 235);\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p] * f), min(255, buf[p + 1] * f), min(255, buf[p + 2] * f));\n}\n","layer":{"id":"layer-ford-circles","type":"code","name":"ford-circles","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ford Circles\n// Family:  number\n// Idea:    The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ford circles (Lester R. Ford, 1938) and the Farey sequence (John Farey, 1816), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long.\n// Knob 3: Target. The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one.\n// Knob 4: Fill. Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid.\n// Buttons: K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, log, sin, abs, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Screen rows run down the real line with larger numbers at the top; the\n// target sits in the middle of row 64. Circles narrower than RMIN LEDs are\n// left out, and the window jumps to the next convergent with MARG to spare.\nconst CY = 64.5, TROW = 64, RMIN = 0.28, MARG = 1.08, MAXC = 1200, S0 = 132;\n\n// The continued fractions of the targets, a(i) for i = 0, 1, 2, ... The\n// golden ratio is [1; 1, 1, ...], the square roots of 2 and 3 repeat, e runs\n// [2; 1, 2, 1, 1, 4, 1, 1, 6, ...] and pi is written out to 50 terms. After\n// term 39 for e and 49 for pi the terms start over, so the number the zoom\n// falls into agrees with e and pi to more than 30 decimal places.\nconst PIC = [3, 7, 15, 1, 292, 1, 1, 1, 2, 1, 3, 1, 14, 2, 1, 1, 2, 2, 2, 2, 1, 84, 2, 1, 1, 15, 3, 13, 1, 4, 2, 6, 6, 99, 1, 2, 2, 6, 3, 5, 1, 1, 6, 8, 1, 7, 1, 2, 3, 7];\nconst TG = [\n  () => 1,\n  (i) => (i ? 2 : 1),\n  (i) => (i ? 2 - (i & 1) : 1),\n  (i) => {\n    if (!i) return 2;\n    i = 1 + ((i - 1) % 39);\n    return i % 3 === 2 ? (2 * (i + 1)) / 3 : 1;\n  },\n  (i) => PIC[i \u003c 50 ? i : 1 + ((i - 1) % 49)],\n];\n// [a(i); a(i+1), a(i+2), ...] to double precision.\nfunction tail(a, i) {\n  let v = a(i + 26);\n  for (let j = i + 25; j >= i; j--) v = a(j) + 1 / v;\n  return v;\n}\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\nconst smooth = (a, b, v) => {\n  const u = cl((v - a) / (b - a), 0, 1);\n  return u * u * (3 - 2 * u);\n};\n\n// The window is kept in the frame of the convergents p/q (index n) and\n// p'/q' (index n-1) of the target alpha. The map X -> (pX + p')/(qX + q')\n// sends the Ford circles onto themselves, sends 1/0 and 0/1 to p/q and p'/q',\n// and sends the tail t = [a(n+1); a(n+2), ...] to alpha. A fraction P/Q in\n// that frame lands on the LEDs at s(p/q - alpha) = sig D (P - tQ) / ((P + kQ)(t + k))\n// with radius sig / (2 (P + kQ)^2), where k = q'/q, D = pq' - p'q = +-1 and\n// sig = s/q^2. All of these stay small however deep the zoom goes, so it\n// can run for ever in double precision.\nfunction start(S, tgt) {\n  const a = TG[tgt];\n  S.tgt = tgt;\n  S.a = a;\n  S.n = 0;\n  S.k = 0;\n  S.D = -1;\n  S.lnq = 0;\n  S.t = tail(a, 1);\n  S.sig = max(S0, 64 * MARG * S.t + 1);\n  // p, q, p' and q' modulo 2^32, for each circle's own twinkle.\n  S.pn = a(0);\n  S.pm = 1;\n  S.qn = 1;\n  S.qm = 0;\n  S.fade = 0;\n}\n// The next convergent's frame is used as soon as the window sits wholly\n// between it and the one before: both tangent points off the panel, and the\n// two circles touching beyond the right edge.\nfunction advance(S) {\n  for (let g = 0; g \u003c 8; g++) {\n    const an = S.a(S.n + 1), k2 = 1 / (an + S.k), t2 = tail(S.a, S.n + 2);\n    if (S.sig * k2 * k2 \u003c= 64 * MARG * (t2 + k2)) return;\n    S.sig *= k2 * k2;\n    S.lnq -= log(k2);\n    S.k = k2;\n    S.t = t2;\n    S.D = -S.D;\n    S.n++;\n    const pn = (Math.imul(an, S.pn) + S.pm) | 0, qn = (Math.imul(an, S.qn) + S.qm) | 0;\n    S.pm = S.pn;\n    S.qm = S.qn;\n    S.pn = pn;\n    S.qn = qn;\n  }\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    time: 0, wave: -1, hue: 0, glow: 0.55, depth: 1.8, flat: 0.05,\n    Y: new Float64Array(MAXC), R: new Float64Array(MAXC), Wt: new Float64Array(MAXC),\n    PP: new Int32Array(MAXC), QQ: new Int32Array(MAXC), PA: new Int32Array(MAXC), PB: new Int32Array(MAXC),\n    CV: new Uint8Array(MAXC), PH: new Uint8Array(MAXC), stack: new Int32Array(MAXC * 4), conv: new Float64Array(96),\n    buf: new Float32Array(N * 3), col: [0, 0, 0],\n  });\n  start(S, 0);\n  S.tgt = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.time += d;\n  S.hue = k[0];\n  // Fill lights the inside of each circle in from its rim: a glow a few\n  // LEDs deep at first, then a flat fill under it up to a solid disc.\n  const u = cl(k[3], 0, 1), fk = sqrt(u);\n  S.glow = min(0.55, 2.4 * fk);\n  S.depth = 0.8 + 4 * fk;\n  S.flat = 0.85 * u;\n  const tgt = cl(round(k[2]), 0, 4);\n  if (tgt !== S.tgt) {\n    const first = S.tgt \u003c 0;\n    start(S, tgt);\n    if (first) S.fade = 1;\n  }\n  S.fade = min(1, S.fade + d * 2.5);\n  S.sig *= exp(d * cl(k[1], 0.2, 3) * 0.165);\n  advance(S);\n  if (S.wave >= 0) {\n    S.wave += d;\n    if (S.wave > WT) S.wave = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.wave = 0;\n}\n\n// Every circle that reaches the panel: the two convergents framing the\n// window, then the Stern-Brocot tree between them, each new fraction the\n// mediant of two that touch. A gap whose two tangent points both lie off one\n// end of the panel holds nothing on it, and a mediant too small to see has\n// only smaller ones below it.\nfunction circles(S) {\n  const { Y, R, Wt, PP, QQ, PA, PB, CV, PH, stack, conv } = S;\n  const sig = S.sig, k = S.k, t = S.t, D = S.D, tk = t + k, wmax = sqrt(sig / (2 * RMIN));\n  // The convergents of the tail are the convergents of the target.\n  let nc = 0;\n  for (let j = 0, h1 = 1, k1 = 0, h0 = S.a(S.n + 1), k0 = 1; j \u003c 40 && h0 + k * k0 \u003c= wmax; j++) {\n    conv[nc++] = h0;\n    conv[nc++] = k0;\n    const a = S.a(S.n + 2 + j), h2 = a * h0 + h1, k2 = a * k0 + k1;\n    (h1 = h0), (k1 = k0), (h0 = h2), (k0 = k2);\n  }\n  PP[0] = 0, QQ[0] = 1, Wt[0] = k, CV[0] = 1, PH[0] = 1;\n  if (k > 0) (R[0] = sig / (2 * k * k)), (Y[0] = CY + (D * sig * t) / (k * tk));\n  else (R[0] = 0), (Y[0] = CY + D * 1e30);\n  PP[1] = 1, QQ[1] = 0, Wt[1] = 1, CV[1] = 1, PH[1] = 1, R[1] = sig / 2, Y[1] = CY - (D * sig) / tk;\n  let n = 2, sp = 0;\n  stack[sp++] = 0;\n  stack[sp++] = 1;\n  while (sp > 0 && n \u003c MAXC) {\n    const b = stack[--sp], a = stack[--sp], ya = Y[a], yb = Y[b];\n    if ((ya \u003c -1 && yb \u003c -1) || (ya > H + 1 && yb > H + 1)) continue;\n    const P = PP[a] + PP[b], Q = QQ[a] + QQ[b], w = P + k * Q;\n    if (w > wmax) continue;\n    PP[n] = P, QQ[n] = Q, Wt[n] = w, PA[n] = a, PB[n] = b;\n    R[n] = sig / (2 * w * w);\n    Y[n] = CY - (D * sig * (P - t * Q)) / (w * tk);\n    let c = 0;\n    for (let j = 0; j \u003c nc; j += 2) if (conv[j] === P && conv[j + 1] === Q) c = 1;\n    CV[n] = c;\n    // On the descent to the target: the target lies between the parents.\n    PH[n] = (PP[a] - t * QQ[a]) * (PP[b] - t * QQ[b]) \u003c 0 ? 1 : 0;\n    stack[sp++] = a;\n    stack[sp++] = n;\n    stack[sp++] = n;\n    stack[sp++] = b;\n    n++;\n  }\n  return n;\n}\n\n// The rim is RW LEDs either side of the circle's edge.\nconst RW = 0.85;\n// Colour by denominator: the hue walks HA round the wheel and back as ln q\n// climbs by HL and HL again, so the circles stay on the cool side of the\n// wheel (teal, blue, violet, pink at the start) however deep the zoom goes.\nconst HA = 0.36, HL = 4;\n// The descent's front runs WV units of ln(size) a second; a tap lasts WT s.\nconst WV = 1.8, WT = 5;\nfunction disc(buf, r, yc, cr, cg, cb, ra, ga, gl, fa, cw) {\n  const y0 = max(0, floor(yc - r - 1)), y1 = min(H - 1, floor(yc + r + 1)), x1 = min(W - 1, floor(2 * r + 1)), rw = RW * cw;\n  for (let y = y0; y \u003c= y1; y++) {\n    const dy = y + 0.5 - yc, dy2 = dy * dy;\n    const ady = abs(dy), xs = ady \u003c= r ? dy2 / (r + sqrt(r * r - dy2)) : r;\n    for (let x = max(0, floor(xs - 2)); x \u003c= x1; x++) {\n      const X = x + 0.5, dist = sqrt((X - r) * (X - r) + dy2), d = (X * X - 2 * X * r + dy2) / (dist + r);\n      if (d > rw) {\n        if (X > r) break;\n        continue;\n      }\n      let v = ra * (d > -rw ? 1 - abs(d) / rw : 0);\n      if (d \u003c 0.5) v += cl(0.5 - d, 0, 1) * (fa + ga * exp(d / gl) + (y === TROW ? 0.32 : 0));\n      const p = (y * W + x) * 3;\n      buf[p] += cr * v;\n      buf[p + 1] += cg * v;\n      buf[p + 2] += cb * v;\n    }\n  }\n}\nfunction dot(buf, x, y, v, cr, cg, cb) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = xi + i, py = yi + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = v * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), p = (py * W + px) * 3;\n      buf[p] += cr * w;\n      buf[p + 1] += cg * w;\n      buf[p + 2] += cb * w;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const buf = S.buf, col = S.col, n = circles(S), { Y, R, Wt, PP, QQ, PA, PB, CV, PH } = S;\n  buf.fill(0);\n  // The target's ray. A circle the row through alpha crosses has\n  // |alpha - p/q| \u003c 1/(2q^2), and by Legendre's theorem that makes p/q a\n  // convergent of alpha: the zoom passes through convergents and nothing\n  // else. Convergents get whiter, wider rims; the row lights inside them.\n  for (let x = 0; x \u003c W; x++) {\n    const p = (TROW * W + x) * 3, v = 0.13 * (1 - x / 90);\n    buf[p] += 255 * v;\n    buf[p + 1] += 240 * v;\n    buf[p + 2] += 200 * v;\n  }\n  // After a K1 tap the Stern-Brocot descent into the target lights up: a\n  // front runs from the biggest circles to the smallest and lights each\n  // fraction whose two parents hold the target between them, so the light\n  // hops mediant by mediant, each circle touching the last, down to the\n  // spark on the line. The rest of the window dims while it runs.\n  const on = S.wave >= 0, wf = S.wave * WV - 1.2, wd = on ? smooth(0, 0.3, S.wave) * min(1, (WT - S.wave) / 0.9) : 0;\n  for (let i = 0; i \u003c n; i++) {\n    const r = R[i];\n    if (r \u003c RMIN || (i === 0 && S.k === 0)) continue;\n    const lq = (S.lnq + log(Wt[i])) / HL;\n    hsv(S.hue + 0.5 + HA * abs(lq - 2 * floor(lq / 2 + 0.5)), 0.82, 1, col);\n    let cr = col[0], cg = col[1], cb = col[2], ra = 0.9, cw = 1, ga = S.glow, fa = S.flat;\n    let vis = smooth(RMIN, 1.6, r);\n    if (CV[i]) (cr = cr * 0.65 + 89), (cg = cg * 0.65 + 84), (cb = cb * 0.65 + 70), (ra = 1), (cw = 1.3);\n    if (on && PH[i]) {\n      const lv = log(64 / r), fr = exp(-(((wf - lv) / 0.35) ** 2)), lit = smooth(-0.25, 0.25, wf - lv) * wd;\n      (cr += (255 - cr) * (0.25 * lit + 0.5 * fr)), (cg += (255 - cg) * (0.25 * lit + 0.5 * fr)), (cb += (255 - cb) * (0.25 * lit + 0.5 * fr));\n      (ra += 0.4 * lit + fr), (ga += 0.4 * lit), (fa += 0.12 * lit + 0.35 * fr), (cw += 0.4 * lit);\n    } else vis *= 1 - 0.55 * wd;\n    disc(buf, r, Y[i], cr, cg, cb, ra * vis, ga * vis, S.depth * (1 + 0.1 * min(r, 90)), fa * vis, cw);\n  }\n  // The points where circles touch glint, each at its own pace. Every\n  // tangency on the panel is a mediant touching one of its two parents.\n  const { pn, pm, qn, qm } = S;\n  for (let i = 2; i \u003c n; i++) {\n    const rm = R[i];\n    if (rm \u003c 1.2) continue;\n    const pa = Math.imul(pn, PP[i]) + Math.imul(pm, QQ[i]), qa = Math.imul(qn, PP[i]) + Math.imul(qm, QQ[i]);\n    const fr = on && PH[i] ? 2 * exp(-(((wf - log(64 / rm)) / 0.35) ** 2)) : 0;\n    for (let e = 0; e \u003c 2; e++) {\n      const j = e ? PB[i] : PA[i], rp = R[j];\n      if (j === 0 && S.k === 0) continue;\n      const tx = (2 * rp * rm) / (rp + rm), ty = Y[i] + (Y[j] > Y[i] ? 1 : -1) * ((2 * rm * sqrt(rp * rm)) / (rp + rm));\n      if (tx > W || ty \u003c -1 || ty > H) continue;\n      const h = hash(pa ^ (Math.imul(pn, PP[j]) + Math.imul(pm, QQ[j])), qa ^ (Math.imul(qn, PP[j]) + Math.imul(qm, QQ[j])));\n      const sn = sin(S.time * (1.1 + h * 1.7) + h * 40), g = (0.3 + 0.9 * sn ** 6 + fr) * smooth(1.2, 4, rm);\n      dot(buf, tx - 0.5, ty - 0.5, g * 1.6, 255, 245, 225);\n    }\n  }\n  // The target itself, a spark on the line.\n  dot(buf, 0.25, TROW, 1.4, 255, 250, 235);\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p] * f), min(255, buf[p + 1] * f), min(255, buf[p + 2] * f));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long."},{"name":"Target","min":0,"max":4,"about":"The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one."},{"name":"Fill","min":0,"max":1,"about":"Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid."}],"start":[0,2,0,0.06],"measures":{"motion":0.6649,"detail":0.0489,"edges":0.4057,"complexity":1.3917,"coverage":0.8005,"colour":0.1799,"drift":0.1998},"knobResponse":[0.1431,0.2105,0.195,0.7368]},{"slug":"fortune-sweep","title":"Fortune's Sweep","family":"algo","round":37,"note":"금색 쓸기 선이 1초에 22줄씩 내려가고, 선 위로 포천의 해변선이 지나간 자리부터 보로노이 그림이 확정돼요. 해변선은 사이트 하나에 포물선 호 하나씩 이어진 목걸이라서, 선이 사이트를 지나면 호가 가시처럼 돋고 세 사이트를 지나는 빈 원이 선에 닿으면 가운데 호가 사라지며 꼭짓점이 금색 점으로 남아요. 지난 그림은 40% 밝기로 아래에서 기다려요. K4 는 가중치를 걸어 모서리를 쌍곡선으로 휘고, 누르면 새 사이트로 바로 다시 쓸어요.","idea":"A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.","buttons":"K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.","code":"// ===== Patternflow pattern =====\n// Title:   Fortune's Sweep\n// Family:  algo\n// Idea:    A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Fortune's sweep-line algorithm for Voronoi diagrams (Steven Fortune, 1986), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1\n//\n// Knob 1: Hue. Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green.\n// Knob 2: Speed. Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s.\n// Knob 3: Sites. How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77.\n// Knob 4: Weights. Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle.\n// Buttons: K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.\n\n// The picture is drawn per LED with no event queue. For a point p above the\n// sweep line at height L (y grows down), let D1(p) be the distance to its\n// nearest site, weighted when Weights is up. p is certain when D1(p) \u003c= L - p.y: no site the line has\n// not reached yet can come closer to p than the line itself. The beach line\n// is D1(p) = L - p.y, and on it the nearest site is always one the line has\n// passed, so the global nearest site is the right one and the diagram's\n// tables are built once a sweep. Only L changes from frame to frame.\n//\n// The circle events come from the diagram's vertices: a point v at weighted\n// distance r from three sites and no nearer to any other. Its event falls\n// at L = v.y + r, when the circle round v touches the sweep line from above.\n// Checked in a scratch script against the beach line worked out from the\n// parabolas themselves, each site's arc being the parabola with the site\n// for focus and y = L + w for directrix: 24 diagrams, four each of 16, 32\n// and 48 sites, unweighted and at full weight, 1,176 events. 26 fell within\n// 0.002 rows of the third site's own arrival or of a neighbouring event and\n// were left out. At each of the other 1,150, just before the event the\n// three sites' arcs lie side by side on the beach line, and just after it\n// the middle one is gone and the other two meet. Half a row before, the\n// arc about to vanish is at most 3 LEDs wide.\n\nconst W = 64, H = 128, N = W * H, MAXS = 48;\nconst { floor, min, max, sqrt, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Rows a second per unit of Speed.\nconst ROWS = 11;\n// The finished diagram holds this long before the next sweep, in seconds.\nconst HOLD = 0.6;\n// A circle event flashes this long, in seconds.\nconst FLASH = 0.6;\n// The last diagram fades to this share of its brightness as the next sweep starts.\nconst DIM = 0.4;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction newSet() {\n  return {\n    sx: new Float32Array(MAXS), sy: new Float32Array(MAXS), sr: new Float32Array(MAXS), sw: new Float32Array(MAXS),\n    pref: new Uint8Array(MAXS), tone: new Uint8Array(MAXS), gh: new Float32Array(MAXS * 3),\n    d1: new Float32Array(N), own: new Uint8Array(N), ed: new Float32Array(N), g1: new Float32Array(N),\n    adj: new Uint8Array(MAXS * MAXS), col: new Float32Array(MAXS * 3), tint: new Float32Array(MAXS * 3),\n    n: 0, wk: -1, hue: NaN, ev: [], evi: 0, lStart: -3, lEnd: 150,\n  };\n}\n\n// Best-candidate sampling, twelve tries a site: every prefix of the 48 is\n// spread about evenly, so Sites can take the first n.\nfunction scatter(S) {\n  for (let i = 0; i \u003c MAXS; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let t = 0, tries = i === 0 ? 1 : 12; t \u003c tries; t++) {\n      const x = 2 + random() * 60, y = 2 + random() * 124;\n      let d = 1e9;\n      for (let j = 0; j \u003c i; j++) {\n        const dx = x - S.sx[j], dy = y - S.sy[j];\n        d = min(d, dx * dx + dy * dy);\n      }\n      if (d > bd) (bd = d), (bx = x), (by = y);\n    }\n    S.sx[i] = bx;\n    S.sy[i] = by;\n    S.sr[i] = random();\n    S.pref[i] = floor(random() * 4);\n  }\n  S.n = 0;\n  S.hue = NaN;\n}\n\n// The vertices of the additively weighted diagram: |v - s| = r + w for the\n// three sites. Subtracting the squared equations pairwise leaves v linear in\n// r, and the first one then gives a quadratic in r. With no weights it is\n// the circumcircle.\nfunction vertices(S, a, b, c, out) {\n  const { sx, sy, sw } = S;\n  const ax = sx[a], ay = sy[a], wa = sw[a];\n  const m11 = 2 * (ax - sx[b]), m12 = 2 * (ay - sy[b]), m21 = 2 * (ax - sx[c]), m22 = 2 * (ay - sy[c]);\n  const det = m11 * m22 - m12 * m21;\n  if (abs(det) \u003c 1e-6) return 0;\n  const aa = ax * ax + ay * ay;\n  const k1 = sw[b] * sw[b] - wa * wa - sx[b] * sx[b] - sy[b] * sy[b] + aa, q1 = 2 * (sw[b] - wa);\n  const k2 = sw[c] * sw[c] - wa * wa - sx[c] * sx[c] - sy[c] * sy[c] + aa, q2 = 2 * (sw[c] - wa);\n  // v = P + Q r\n  const px = (k1 * m22 - m12 * k2) / det, py = (m11 * k2 - k1 * m21) / det;\n  const qx = (q1 * m22 - m12 * q2) / det, qy = (m11 * q2 - q1 * m21) / det;\n  const dx = px - ax, dy = py - ay;\n  const A = qx * qx + qy * qy - 1, B = 2 * (dx * qx + dy * qy - wa), C = dx * dx + dy * dy - wa * wa;\n  let k = 0;\n  const rs = [];\n  if (abs(A) \u003c 1e-9) {\n    if (abs(B) > 1e-9) rs.push(-C / B);\n  } else {\n    const disc = B * B - 4 * A * C;\n    if (disc \u003c 0) return 0;\n    const sq = sqrt(disc);\n    rs.push((-B - sq) / (2 * A), (-B + sq) / (2 * A));\n  }\n  const wmin = min(wa, sw[b], sw[c]);\n  for (const r of rs) {\n    if (r + wmin \u003c -1e-6) continue;\n    const vx = px + qx * r, vy = py + qy * r;\n    let empty = true;\n    for (let l = 0; l \u003c S.n && empty; l++) {\n      if (l === a || l === b || l === c) continue;\n      const ex = vx - sx[l], ey = vy - sy[l];\n      if (sqrt(ex * ex + ey * ey) - sw[l] \u003c r - 1e-4) empty = false;\n    }\n    if (!empty) continue;\n    // Only circles that reach the panel.\n    if (vx + r \u003c 0 || vx - r > W - 1 || vy + r \u003c 0 || vy - r > H - 1) continue;\n    out.push({ t: vy + r, x: vx, y: vy, r, fired: -1e9 });\n    k++;\n  }\n  return k;\n}\n\n// The tables of one diagram: nearest weighted distance, its site, the\n// distance in LEDs to the nearest edge and the slope of D1(p) - (L - p.y),\n// which turns the beach line's level into a distance in LEDs too.\nfunction build(S, n, wk) {\n  S.n = n;\n  S.wk = wk;\n  const wmax = 0.5 * sqrt(N / n) * wk;\n  const { sx, sy, sw, d1, own, ed, g1, adj } = S;\n  for (let i = 0; i \u003c n; i++) sw[i] = wmax * S.sr[i];\n  adj.fill(0);\n  let lEnd = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p - x) / W;\n    let b1 = 1e9, b2 = 1e9, i1 = 0, i2 = 0, r1 = 1, r2 = 1;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = x - sx[i], dy = y - sy[i], r = sqrt(dx * dx + dy * dy), d = r - sw[i];\n      if (d \u003c b1) (b2 = b1), (i2 = i1), (r2 = r1), (b1 = d), (i1 = i), (r1 = r);\n      else if (d \u003c b2) (b2 = d), (i2 = i), (r2 = r);\n    }\n    d1[p] = b1;\n    own[p] = i1;\n    r1 = max(r1, 1e-3);\n    r2 = max(r2, 1e-3);\n    const ux = (x - sx[i1]) / r1, uy = (y - sy[i1]) / r1, vx = (x - sx[i2]) / r2, vy = (y - sy[i2]) / r2;\n    const ge = sqrt((ux - vx) * (ux - vx) + (uy - vy) * (uy - vy));\n    ed[p] = (b2 - b1) / max(0.3, ge);\n    g1[p] = sqrt(ux * ux + (uy + 1) * (uy + 1));\n    if (ed[p] \u003c 1.5) adj[i1 * MAXS + i2] = adj[i2 * MAXS + i1] = 1;\n    if (y + b1 > lEnd) lEnd = y + b1;\n  }\n  S.lEnd = lEnd + 1.5;\n  let ls = -3;\n  for (let i = 0; i \u003c n; i++) ls = min(ls, sy[i] - sw[i] - 1);\n  S.lStart = ls;\n  // Four tones, neighbours apart where the greedy pass manages it.\n  for (let i = 0; i \u003c n; i++) {\n    let used = 0;\n    for (let j = 0; j \u003c i; j++) if (adj[i * MAXS + j]) used |= 1 \u003c\u003c S.tone[j];\n    let t = S.pref[i];\n    for (let k = 0; k \u003c 4; k++) if (!(used & (1 \u003c\u003c ((S.pref[i] + k) & 3)))) {\n      t = (S.pref[i] + k) & 3;\n      break;\n    }\n    S.tone[i] = t;\n  }\n  const ev = [];\n  for (let a = 0; a \u003c n; a++) for (let b = a + 1; b \u003c n; b++) for (let c = b + 1; c \u003c n; c++) vertices(S, a, b, c, ev);\n  // Off-panel vertices whose circle would only touch the line after the\n  // last LED is certain never fire: about one in twelve.\n  S.ev = ev.filter((e) => e.t \u003c= S.lEnd).sort((u, v) => u.t - v.t);\n  S.evi = 0;\n  S.hue = NaN;\n}\n\n// Calm tones round the base hue. Where a tone lands on red, orange or\n// yellow it is paled and lifted, as a dark orange cell reads brown and a\n// dark yellow one olive on the panel; yellow is lifted most.\nconst TONES = [[0, 0.72, 0.52], [0.075, 0.6, 0.46], [-0.085, 0.62, 0.5], [0.025, 0.42, 0.6]];\nconst band = (v, a, b, e) => cl((v - a) / e, 0, 1) * cl((b - v) / e, 0, 1);\nfunction paint(S, hue) {\n  for (let i = 0; i \u003c S.n; i++) {\n    const tn = TONES[S.tone[i]], h = hue + 0.56 + tn[0], hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh;\n    const warm = band(hw, -0.06, 0.3, 0.05), yel = band(hw, 0.08, 0.32, 0.05);\n    hsv(h, tn[1] * (1 - 0.3 * warm - 0.15 * yel), tn[2] + 0.28 * warm + 0.14 * yel, S.col, i * 3);\n    hsv(h, 0.32, 1, S.tint, i * 3);\n    // The waiting diagram is the same tone at 40%, except that a dim\n    // orange or yellow is brown and a dim lime is olive whatever is done to\n    // it, so those ghosts lean to wine below the yellow and to green above.\n    // The turn is a jump: a blend of the two goes through olive again.\n    const gw = band(hw, -0.07, 0.33, 0.04);\n    hsv(h + gw * ((hw \u003c 0.11 ? -0.03 : 0.36) - hw), tn[1] * 0.85, tn[2] * DIM * 1.05, S.gh, i * 3);\n  }\n  S.hue = hue;\n}\n\nfunction startSweep(st) {\n  const t = st.old;\n  st.old = st.cur;\n  st.cur = t;\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  st.L = st.cur.lStart;\n  st.fade = 1;\n  st.hold = 0;\n}\n\nexport function setup(params) {\n  const st = (params.s = {\n    cur: newSet(), old: newSet(), n: 16, wk: 0.06, hue: 0, speed: 2, L: 0, fade: 0, hold: 0, clock: 0,\n    buf: new Float32Array(N * 3), acc: new Float32Array(3), edge: new Float32Array(3), pale: new Float32Array(3),\n  });\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  startSweep(st);\n  // Open a third of the way down a sweep, with the first diagram waiting below.\n  st.L = 36;\n  st.fade = 0;\n  for (const e of st.cur.ev) if (e.t \u003c= st.L) e.fired = -1e9;\n  while (st.cur.evi \u003c st.cur.ev.length && st.cur.ev[st.cur.evi].t \u003c= st.L) st.cur.evi++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const st = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  st.hue = k[0];\n  st.speed = cl(k[1], 0.2, 3);\n  st.clock += d;\n  const n = round(cl(k[2], 16, 48)), wk = cl(k[3], 0, 1);\n  if (n !== st.n || abs(wk - st.wk) > 0.002) {\n    st.n = n;\n    st.wk = wk;\n    // The diagram changes under the sweep: rebuild both, and treat the\n    // events the line has already passed as fixed, without a flash.\n    for (const S of [st.cur, st.old]) build(S, n, wk);\n    const C = st.cur;\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.evi++;\n    st.L = max(st.L, C.lStart);\n  }\n  if (input.btnPressed && input.btnPressed[0]) startSweep(st);\n  const C = st.cur;\n  if (st.fade > 0) st.fade = max(0, st.fade - d / 0.9);\n  if (st.L \u003c C.lEnd) {\n    st.L = min(C.lEnd, st.L + d * st.speed * ROWS);\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.ev[C.evi++].fired = st.clock;\n  } else if ((st.hold += d) >= HOLD) startSweep(st);\n}\n\nexport function draw(display, params) {\n  const st = params.s;\n  if (!st) return;\n  const C = st.cur, O = st.old, L = st.L, buf = st.buf, acc = st.acc, edge = st.edge, pale = st.pale;\n  if (C.hue !== st.hue) paint(C, st.hue);\n  if (O.hue !== st.hue) paint(O, st.hue);\n  // Gold for the line and the circles at Hue 0, opposite the cells.\n  const ah = st.hue + 0.125, ahh = ah - floor(ah);\n  hsv(ah, 0.62 - 0.2 * cl((ahh - 0.2) / 0.1, 0, 1) * cl((0.4 - ahh) / 0.1, 0, 1), 1, acc, 0);\n  hsv(st.hue + 0.56, 0.18, 1, edge, 0);\n  hsv(st.hue + 0.56, 0.1, 1, pale, 0);\n  const fd = st.fade, ok = DIM + (1 - DIM) * fd;\n  const Cc = C.col, Ct = C.tint, Oc = O.col, Og = O.gh;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    // Between the beach line and the sweep line nothing is known yet: the\n    // old diagram shows there at two thirds of its waiting level.\n    const zone = y \u003c L ? 0.62 : 1;\n    // The line is a full row at any L, with a soft second row as it moves.\n    const sw = cl(1 - (abs(y - L) - 0.5) / 0.6, 0, 1);\n    for (let x = 0; x \u003c W; x++, p++) {\n      const oo = O.own[p] * 3, oe = cl(1 - O.ed[p] / 0.9, 0, 1) * 0.75;\n      let r = ((Og[oo] + (Oc[oo] - Og[oo]) * fd) * (1 - oe) + edge[0] * oe * ok) * zone;\n      let g = ((Og[oo + 1] + (Oc[oo + 1] - Og[oo + 1]) * fd) * (1 - oe) + edge[1] * oe * ok) * zone;\n      let b = ((Og[oo + 2] + (Oc[oo + 2] - Og[oo + 2]) * fd) * (1 - oe) + edge[2] * oe * ok) * zone;\n      const f = C.d1[p] - (L - y), dist = f / max(0.5, C.g1[p]);\n      if (dist \u003c 1.2) {\n        const co = C.own[p] * 3, m = cl(0.5 - dist, 0, 1);\n        // Fresh ground just behind the beach line glows and settles over\n        // about four rows.\n        const glow = 0.5 * exp(-max(0, -dist) / 3.5);\n        let nr = Cc[co] + (Ct[co] - Cc[co]) * glow, ng = Cc[co + 1] + (Ct[co + 1] - Cc[co + 1]) * glow, nb = Cc[co + 2] + (Ct[co + 2] - Cc[co + 2]) * glow;\n        const e = cl(1 - C.ed[p] / 0.9, 0, 1) * 0.92;\n        nr += (edge[0] - nr) * e;\n        ng += (edge[1] - ng) * e;\n        nb += (edge[2] - nb) * e;\n        r += (nr - r) * m;\n        g += (ng - g) * m;\n        b += (nb - b) * m;\n        // The arc itself, a pale bright tint of its own site, whitening where\n        // an edge meets it: those meeting points are the breakpoints that\n        // trace the edges down.\n        const a = cl(1 - abs(dist) / 0.8, 0, 1);\n        if (a > 0) {\n          const wh = e * 0.8;\n          r += (Ct[co] + (pale[0] - Ct[co]) * wh - r) * a;\n          g += (Ct[co + 1] + (pale[1] - Ct[co + 1]) * wh - g) * a;\n          b += (Ct[co + 2] + (pale[2] - Ct[co + 2]) * wh - b) * a;\n        }\n      }\n      if (sw > 0) {\n        r += (acc[0] - r) * sw;\n        g += (acc[1] - g) * sw;\n        b += (acc[2] - b) * sw;\n      }\n      buf[p * 3] = r;\n      buf[p * 3 + 1] = g;\n      buf[p * 3 + 2] = b;\n    }\n  }\n  const put = (x, y, r, g, b, a) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    buf[o] += (r - buf[o]) * a;\n    buf[o + 1] += (g - buf[o + 1]) * a;\n    buf[o + 2] += (b - buf[o + 2]) * a;\n  };\n  // Weight circles, faint, for sites that carry more than 1.5 LEDs.\n  for (let i = 0; i \u003c C.n; i++) {\n    const w = C.sw[i];\n    if (w \u003c 1.5) continue;\n    const seen = C.sy[i] - w \u003c= L, a = seen ? 0.3 : 0.22;\n    for (let y = max(0, floor(C.sy[i] - w - 1)); y \u003c= min(H - 1, C.sy[i] + w + 1); y++)\n      for (let x = max(0, floor(C.sx[i] - w - 1)); x \u003c= min(W - 1, C.sx[i] + w + 1); x++) {\n        const dx = x - C.sx[i], dy = y - C.sy[i], q = 1 - abs(sqrt(dx * dx + dy * dy) - w) / 0.6;\n        if (q > 0) put(x, y, pale[0], pale[1], pale[2], a * q);\n      }\n  }\n  // Circle events: the empty circle flashes in the line's colour, touching\n  // the line at its foot, and the vertex it fixes keeps a gold point.\n  for (let j = 0; j \u003c C.evi; j++) {\n    const e = C.ev[j], age = st.clock - e.fired;\n    put(round(e.x), round(e.y), acc[0], acc[1], acc[2], 0.85);\n    if (age >= FLASH) continue;\n    const fa = (1 - age / FLASH) * (1 - age / FLASH), R = e.r;\n    put(round(e.x), round(e.y), 1, 1, 1, fa);\n    for (let y = max(0, floor(e.y - R - 1)); y \u003c= min(H - 1, e.y + R + 1); y++)\n      for (let x = max(0, floor(e.x - R - 1)); x \u003c= min(W - 1, e.x + R + 1); x++) {\n        const dx = x - e.x, dy = y - e.y, q = 1 - abs(sqrt(dx * dx + dy * dy) - R) / 0.65;\n        if (q > 0) put(x, y, acc[0], acc[1], acc[2], q * fa * 0.9);\n      }\n  }\n  // Sites: white once the line has reached them, a dim grey point before.\n  for (let i = 0; i \u003c C.n; i++) {\n    const x = round(C.sx[i]), y = round(C.sy[i]);\n    if (C.sy[i] - C.sw[i] \u003c= L) {\n      put(x, y, 1, 1, 1, 1);\n      put(x - 1, y, 1, 1, 1, 0.35);\n      put(x + 1, y, 1, 1, 1, 0.35);\n      put(x, y - 1, 1, 1, 1, 0.35);\n      put(x, y + 1, 1, 1, 1, 0.35);\n    } else put(x, y, 0.5, 0.5, 0.5, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, round(255 * min(1, buf[p * 3])), round(255 * min(1, buf[p * 3 + 1])), round(255 * min(1, buf[p * 3 + 2])));\n}\n","layer":{"id":"layer-fortune-sweep","type":"code","name":"fortune-sweep","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fortune's Sweep\n// Family:  algo\n// Idea:    A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Fortune's sweep-line algorithm for Voronoi diagrams (Steven Fortune, 1986), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1\n//\n// Knob 1: Hue. Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green.\n// Knob 2: Speed. Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s.\n// Knob 3: Sites. How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77.\n// Knob 4: Weights. Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle.\n// Buttons: K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.\n\n// The picture is drawn per LED with no event queue. For a point p above the\n// sweep line at height L (y grows down), let D1(p) be the distance to its\n// nearest site, weighted when Weights is up. p is certain when D1(p) \u003c= L - p.y: no site the line has\n// not reached yet can come closer to p than the line itself. The beach line\n// is D1(p) = L - p.y, and on it the nearest site is always one the line has\n// passed, so the global nearest site is the right one and the diagram's\n// tables are built once a sweep. Only L changes from frame to frame.\n//\n// The circle events come from the diagram's vertices: a point v at weighted\n// distance r from three sites and no nearer to any other. Its event falls\n// at L = v.y + r, when the circle round v touches the sweep line from above.\n// Checked in a scratch script against the beach line worked out from the\n// parabolas themselves, each site's arc being the parabola with the site\n// for focus and y = L + w for directrix: 24 diagrams, four each of 16, 32\n// and 48 sites, unweighted and at full weight, 1,176 events. 26 fell within\n// 0.002 rows of the third site's own arrival or of a neighbouring event and\n// were left out. At each of the other 1,150, just before the event the\n// three sites' arcs lie side by side on the beach line, and just after it\n// the middle one is gone and the other two meet. Half a row before, the\n// arc about to vanish is at most 3 LEDs wide.\n\nconst W = 64, H = 128, N = W * H, MAXS = 48;\nconst { floor, min, max, sqrt, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Rows a second per unit of Speed.\nconst ROWS = 11;\n// The finished diagram holds this long before the next sweep, in seconds.\nconst HOLD = 0.6;\n// A circle event flashes this long, in seconds.\nconst FLASH = 0.6;\n// The last diagram fades to this share of its brightness as the next sweep starts.\nconst DIM = 0.4;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction newSet() {\n  return {\n    sx: new Float32Array(MAXS), sy: new Float32Array(MAXS), sr: new Float32Array(MAXS), sw: new Float32Array(MAXS),\n    pref: new Uint8Array(MAXS), tone: new Uint8Array(MAXS), gh: new Float32Array(MAXS * 3),\n    d1: new Float32Array(N), own: new Uint8Array(N), ed: new Float32Array(N), g1: new Float32Array(N),\n    adj: new Uint8Array(MAXS * MAXS), col: new Float32Array(MAXS * 3), tint: new Float32Array(MAXS * 3),\n    n: 0, wk: -1, hue: NaN, ev: [], evi: 0, lStart: -3, lEnd: 150,\n  };\n}\n\n// Best-candidate sampling, twelve tries a site: every prefix of the 48 is\n// spread about evenly, so Sites can take the first n.\nfunction scatter(S) {\n  for (let i = 0; i \u003c MAXS; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let t = 0, tries = i === 0 ? 1 : 12; t \u003c tries; t++) {\n      const x = 2 + random() * 60, y = 2 + random() * 124;\n      let d = 1e9;\n      for (let j = 0; j \u003c i; j++) {\n        const dx = x - S.sx[j], dy = y - S.sy[j];\n        d = min(d, dx * dx + dy * dy);\n      }\n      if (d > bd) (bd = d), (bx = x), (by = y);\n    }\n    S.sx[i] = bx;\n    S.sy[i] = by;\n    S.sr[i] = random();\n    S.pref[i] = floor(random() * 4);\n  }\n  S.n = 0;\n  S.hue = NaN;\n}\n\n// The vertices of the additively weighted diagram: |v - s| = r + w for the\n// three sites. Subtracting the squared equations pairwise leaves v linear in\n// r, and the first one then gives a quadratic in r. With no weights it is\n// the circumcircle.\nfunction vertices(S, a, b, c, out) {\n  const { sx, sy, sw } = S;\n  const ax = sx[a], ay = sy[a], wa = sw[a];\n  const m11 = 2 * (ax - sx[b]), m12 = 2 * (ay - sy[b]), m21 = 2 * (ax - sx[c]), m22 = 2 * (ay - sy[c]);\n  const det = m11 * m22 - m12 * m21;\n  if (abs(det) \u003c 1e-6) return 0;\n  const aa = ax * ax + ay * ay;\n  const k1 = sw[b] * sw[b] - wa * wa - sx[b] * sx[b] - sy[b] * sy[b] + aa, q1 = 2 * (sw[b] - wa);\n  const k2 = sw[c] * sw[c] - wa * wa - sx[c] * sx[c] - sy[c] * sy[c] + aa, q2 = 2 * (sw[c] - wa);\n  // v = P + Q r\n  const px = (k1 * m22 - m12 * k2) / det, py = (m11 * k2 - k1 * m21) / det;\n  const qx = (q1 * m22 - m12 * q2) / det, qy = (m11 * q2 - q1 * m21) / det;\n  const dx = px - ax, dy = py - ay;\n  const A = qx * qx + qy * qy - 1, B = 2 * (dx * qx + dy * qy - wa), C = dx * dx + dy * dy - wa * wa;\n  let k = 0;\n  const rs = [];\n  if (abs(A) \u003c 1e-9) {\n    if (abs(B) > 1e-9) rs.push(-C / B);\n  } else {\n    const disc = B * B - 4 * A * C;\n    if (disc \u003c 0) return 0;\n    const sq = sqrt(disc);\n    rs.push((-B - sq) / (2 * A), (-B + sq) / (2 * A));\n  }\n  const wmin = min(wa, sw[b], sw[c]);\n  for (const r of rs) {\n    if (r + wmin \u003c -1e-6) continue;\n    const vx = px + qx * r, vy = py + qy * r;\n    let empty = true;\n    for (let l = 0; l \u003c S.n && empty; l++) {\n      if (l === a || l === b || l === c) continue;\n      const ex = vx - sx[l], ey = vy - sy[l];\n      if (sqrt(ex * ex + ey * ey) - sw[l] \u003c r - 1e-4) empty = false;\n    }\n    if (!empty) continue;\n    // Only circles that reach the panel.\n    if (vx + r \u003c 0 || vx - r > W - 1 || vy + r \u003c 0 || vy - r > H - 1) continue;\n    out.push({ t: vy + r, x: vx, y: vy, r, fired: -1e9 });\n    k++;\n  }\n  return k;\n}\n\n// The tables of one diagram: nearest weighted distance, its site, the\n// distance in LEDs to the nearest edge and the slope of D1(p) - (L - p.y),\n// which turns the beach line's level into a distance in LEDs too.\nfunction build(S, n, wk) {\n  S.n = n;\n  S.wk = wk;\n  const wmax = 0.5 * sqrt(N / n) * wk;\n  const { sx, sy, sw, d1, own, ed, g1, adj } = S;\n  for (let i = 0; i \u003c n; i++) sw[i] = wmax * S.sr[i];\n  adj.fill(0);\n  let lEnd = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p - x) / W;\n    let b1 = 1e9, b2 = 1e9, i1 = 0, i2 = 0, r1 = 1, r2 = 1;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = x - sx[i], dy = y - sy[i], r = sqrt(dx * dx + dy * dy), d = r - sw[i];\n      if (d \u003c b1) (b2 = b1), (i2 = i1), (r2 = r1), (b1 = d), (i1 = i), (r1 = r);\n      else if (d \u003c b2) (b2 = d), (i2 = i), (r2 = r);\n    }\n    d1[p] = b1;\n    own[p] = i1;\n    r1 = max(r1, 1e-3);\n    r2 = max(r2, 1e-3);\n    const ux = (x - sx[i1]) / r1, uy = (y - sy[i1]) / r1, vx = (x - sx[i2]) / r2, vy = (y - sy[i2]) / r2;\n    const ge = sqrt((ux - vx) * (ux - vx) + (uy - vy) * (uy - vy));\n    ed[p] = (b2 - b1) / max(0.3, ge);\n    g1[p] = sqrt(ux * ux + (uy + 1) * (uy + 1));\n    if (ed[p] \u003c 1.5) adj[i1 * MAXS + i2] = adj[i2 * MAXS + i1] = 1;\n    if (y + b1 > lEnd) lEnd = y + b1;\n  }\n  S.lEnd = lEnd + 1.5;\n  let ls = -3;\n  for (let i = 0; i \u003c n; i++) ls = min(ls, sy[i] - sw[i] - 1);\n  S.lStart = ls;\n  // Four tones, neighbours apart where the greedy pass manages it.\n  for (let i = 0; i \u003c n; i++) {\n    let used = 0;\n    for (let j = 0; j \u003c i; j++) if (adj[i * MAXS + j]) used |= 1 \u003c\u003c S.tone[j];\n    let t = S.pref[i];\n    for (let k = 0; k \u003c 4; k++) if (!(used & (1 \u003c\u003c ((S.pref[i] + k) & 3)))) {\n      t = (S.pref[i] + k) & 3;\n      break;\n    }\n    S.tone[i] = t;\n  }\n  const ev = [];\n  for (let a = 0; a \u003c n; a++) for (let b = a + 1; b \u003c n; b++) for (let c = b + 1; c \u003c n; c++) vertices(S, a, b, c, ev);\n  // Off-panel vertices whose circle would only touch the line after the\n  // last LED is certain never fire: about one in twelve.\n  S.ev = ev.filter((e) => e.t \u003c= S.lEnd).sort((u, v) => u.t - v.t);\n  S.evi = 0;\n  S.hue = NaN;\n}\n\n// Calm tones round the base hue. Where a tone lands on red, orange or\n// yellow it is paled and lifted, as a dark orange cell reads brown and a\n// dark yellow one olive on the panel; yellow is lifted most.\nconst TONES = [[0, 0.72, 0.52], [0.075, 0.6, 0.46], [-0.085, 0.62, 0.5], [0.025, 0.42, 0.6]];\nconst band = (v, a, b, e) => cl((v - a) / e, 0, 1) * cl((b - v) / e, 0, 1);\nfunction paint(S, hue) {\n  for (let i = 0; i \u003c S.n; i++) {\n    const tn = TONES[S.tone[i]], h = hue + 0.56 + tn[0], hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh;\n    const warm = band(hw, -0.06, 0.3, 0.05), yel = band(hw, 0.08, 0.32, 0.05);\n    hsv(h, tn[1] * (1 - 0.3 * warm - 0.15 * yel), tn[2] + 0.28 * warm + 0.14 * yel, S.col, i * 3);\n    hsv(h, 0.32, 1, S.tint, i * 3);\n    // The waiting diagram is the same tone at 40%, except that a dim\n    // orange or yellow is brown and a dim lime is olive whatever is done to\n    // it, so those ghosts lean to wine below the yellow and to green above.\n    // The turn is a jump: a blend of the two goes through olive again.\n    const gw = band(hw, -0.07, 0.33, 0.04);\n    hsv(h + gw * ((hw \u003c 0.11 ? -0.03 : 0.36) - hw), tn[1] * 0.85, tn[2] * DIM * 1.05, S.gh, i * 3);\n  }\n  S.hue = hue;\n}\n\nfunction startSweep(st) {\n  const t = st.old;\n  st.old = st.cur;\n  st.cur = t;\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  st.L = st.cur.lStart;\n  st.fade = 1;\n  st.hold = 0;\n}\n\nexport function setup(params) {\n  const st = (params.s = {\n    cur: newSet(), old: newSet(), n: 16, wk: 0.06, hue: 0, speed: 2, L: 0, fade: 0, hold: 0, clock: 0,\n    buf: new Float32Array(N * 3), acc: new Float32Array(3), edge: new Float32Array(3), pale: new Float32Array(3),\n  });\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  startSweep(st);\n  // Open a third of the way down a sweep, with the first diagram waiting below.\n  st.L = 36;\n  st.fade = 0;\n  for (const e of st.cur.ev) if (e.t \u003c= st.L) e.fired = -1e9;\n  while (st.cur.evi \u003c st.cur.ev.length && st.cur.ev[st.cur.evi].t \u003c= st.L) st.cur.evi++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const st = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  st.hue = k[0];\n  st.speed = cl(k[1], 0.2, 3);\n  st.clock += d;\n  const n = round(cl(k[2], 16, 48)), wk = cl(k[3], 0, 1);\n  if (n !== st.n || abs(wk - st.wk) > 0.002) {\n    st.n = n;\n    st.wk = wk;\n    // The diagram changes under the sweep: rebuild both, and treat the\n    // events the line has already passed as fixed, without a flash.\n    for (const S of [st.cur, st.old]) build(S, n, wk);\n    const C = st.cur;\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.evi++;\n    st.L = max(st.L, C.lStart);\n  }\n  if (input.btnPressed && input.btnPressed[0]) startSweep(st);\n  const C = st.cur;\n  if (st.fade > 0) st.fade = max(0, st.fade - d / 0.9);\n  if (st.L \u003c C.lEnd) {\n    st.L = min(C.lEnd, st.L + d * st.speed * ROWS);\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.ev[C.evi++].fired = st.clock;\n  } else if ((st.hold += d) >= HOLD) startSweep(st);\n}\n\nexport function draw(display, params) {\n  const st = params.s;\n  if (!st) return;\n  const C = st.cur, O = st.old, L = st.L, buf = st.buf, acc = st.acc, edge = st.edge, pale = st.pale;\n  if (C.hue !== st.hue) paint(C, st.hue);\n  if (O.hue !== st.hue) paint(O, st.hue);\n  // Gold for the line and the circles at Hue 0, opposite the cells.\n  const ah = st.hue + 0.125, ahh = ah - floor(ah);\n  hsv(ah, 0.62 - 0.2 * cl((ahh - 0.2) / 0.1, 0, 1) * cl((0.4 - ahh) / 0.1, 0, 1), 1, acc, 0);\n  hsv(st.hue + 0.56, 0.18, 1, edge, 0);\n  hsv(st.hue + 0.56, 0.1, 1, pale, 0);\n  const fd = st.fade, ok = DIM + (1 - DIM) * fd;\n  const Cc = C.col, Ct = C.tint, Oc = O.col, Og = O.gh;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    // Between the beach line and the sweep line nothing is known yet: the\n    // old diagram shows there at two thirds of its waiting level.\n    const zone = y \u003c L ? 0.62 : 1;\n    // The line is a full row at any L, with a soft second row as it moves.\n    const sw = cl(1 - (abs(y - L) - 0.5) / 0.6, 0, 1);\n    for (let x = 0; x \u003c W; x++, p++) {\n      const oo = O.own[p] * 3, oe = cl(1 - O.ed[p] / 0.9, 0, 1) * 0.75;\n      let r = ((Og[oo] + (Oc[oo] - Og[oo]) * fd) * (1 - oe) + edge[0] * oe * ok) * zone;\n      let g = ((Og[oo + 1] + (Oc[oo + 1] - Og[oo + 1]) * fd) * (1 - oe) + edge[1] * oe * ok) * zone;\n      let b = ((Og[oo + 2] + (Oc[oo + 2] - Og[oo + 2]) * fd) * (1 - oe) + edge[2] * oe * ok) * zone;\n      const f = C.d1[p] - (L - y), dist = f / max(0.5, C.g1[p]);\n      if (dist \u003c 1.2) {\n        const co = C.own[p] * 3, m = cl(0.5 - dist, 0, 1);\n        // Fresh ground just behind the beach line glows and settles over\n        // about four rows.\n        const glow = 0.5 * exp(-max(0, -dist) / 3.5);\n        let nr = Cc[co] + (Ct[co] - Cc[co]) * glow, ng = Cc[co + 1] + (Ct[co + 1] - Cc[co + 1]) * glow, nb = Cc[co + 2] + (Ct[co + 2] - Cc[co + 2]) * glow;\n        const e = cl(1 - C.ed[p] / 0.9, 0, 1) * 0.92;\n        nr += (edge[0] - nr) * e;\n        ng += (edge[1] - ng) * e;\n        nb += (edge[2] - nb) * e;\n        r += (nr - r) * m;\n        g += (ng - g) * m;\n        b += (nb - b) * m;\n        // The arc itself, a pale bright tint of its own site, whitening where\n        // an edge meets it: those meeting points are the breakpoints that\n        // trace the edges down.\n        const a = cl(1 - abs(dist) / 0.8, 0, 1);\n        if (a > 0) {\n          const wh = e * 0.8;\n          r += (Ct[co] + (pale[0] - Ct[co]) * wh - r) * a;\n          g += (Ct[co + 1] + (pale[1] - Ct[co + 1]) * wh - g) * a;\n          b += (Ct[co + 2] + (pale[2] - Ct[co + 2]) * wh - b) * a;\n        }\n      }\n      if (sw > 0) {\n        r += (acc[0] - r) * sw;\n        g += (acc[1] - g) * sw;\n        b += (acc[2] - b) * sw;\n      }\n      buf[p * 3] = r;\n      buf[p * 3 + 1] = g;\n      buf[p * 3 + 2] = b;\n    }\n  }\n  const put = (x, y, r, g, b, a) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    buf[o] += (r - buf[o]) * a;\n    buf[o + 1] += (g - buf[o + 1]) * a;\n    buf[o + 2] += (b - buf[o + 2]) * a;\n  };\n  // Weight circles, faint, for sites that carry more than 1.5 LEDs.\n  for (let i = 0; i \u003c C.n; i++) {\n    const w = C.sw[i];\n    if (w \u003c 1.5) continue;\n    const seen = C.sy[i] - w \u003c= L, a = seen ? 0.3 : 0.22;\n    for (let y = max(0, floor(C.sy[i] - w - 1)); y \u003c= min(H - 1, C.sy[i] + w + 1); y++)\n      for (let x = max(0, floor(C.sx[i] - w - 1)); x \u003c= min(W - 1, C.sx[i] + w + 1); x++) {\n        const dx = x - C.sx[i], dy = y - C.sy[i], q = 1 - abs(sqrt(dx * dx + dy * dy) - w) / 0.6;\n        if (q > 0) put(x, y, pale[0], pale[1], pale[2], a * q);\n      }\n  }\n  // Circle events: the empty circle flashes in the line's colour, touching\n  // the line at its foot, and the vertex it fixes keeps a gold point.\n  for (let j = 0; j \u003c C.evi; j++) {\n    const e = C.ev[j], age = st.clock - e.fired;\n    put(round(e.x), round(e.y), acc[0], acc[1], acc[2], 0.85);\n    if (age >= FLASH) continue;\n    const fa = (1 - age / FLASH) * (1 - age / FLASH), R = e.r;\n    put(round(e.x), round(e.y), 1, 1, 1, fa);\n    for (let y = max(0, floor(e.y - R - 1)); y \u003c= min(H - 1, e.y + R + 1); y++)\n      for (let x = max(0, floor(e.x - R - 1)); x \u003c= min(W - 1, e.x + R + 1); x++) {\n        const dx = x - e.x, dy = y - e.y, q = 1 - abs(sqrt(dx * dx + dy * dy) - R) / 0.65;\n        if (q > 0) put(x, y, acc[0], acc[1], acc[2], q * fa * 0.9);\n      }\n  }\n  // Sites: white once the line has reached them, a dim grey point before.\n  for (let i = 0; i \u003c C.n; i++) {\n    const x = round(C.sx[i]), y = round(C.sy[i]);\n    if (C.sy[i] - C.sw[i] \u003c= L) {\n      put(x, y, 1, 1, 1, 1);\n      put(x - 1, y, 1, 1, 1, 0.35);\n      put(x + 1, y, 1, 1, 1, 0.35);\n      put(x, y - 1, 1, 1, 1, 0.35);\n      put(x, y + 1, 1, 1, 1, 0.35);\n    } else put(x, y, 0.5, 0.5, 0.5, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, round(255 * min(1, buf[p * 3])), round(255 * min(1, buf[p * 3 + 1])), round(255 * min(1, buf[p * 3 + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green."},{"name":"Speed","min":0.2,"max":3,"about":"Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s."},{"name":"Sites","min":16,"max":48,"about":"How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77."},{"name":"Weights","min":0,"max":1,"about":"Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle."}],"start":[0,2,16,0.06],"measures":{"motion":0.3617,"detail":0.032,"edges":0.4248,"complexity":0.6651,"coverage":1,"colour":0.1845,"drift":0.1987},"knobResponse":[0.2392,0.1674,0.1095,0.0757]},{"slug":"foxfire","title":"Foxfire","family":"fungi","round":19,"note":"밤 숲 바닥 단면에서 뽕나무버섯 균사가 그루터기와 통나무, 흙 속을 기어가며 갈라지고 실을 따라 연둣빛 펄스가 흘러요. 버섯 무리가 돋았다 시들며 숨 쉬듯 빛나고 포자가 위로 떠올라요. K1 을 누르면 피어 있는 갓이 한꺼번에 포자를 뿜어요.","idea":"A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.","buttons":"K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.","code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","layer":{"id":"layer-foxfire","type":"code","name":"foxfire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower."},{"name":"Spores","min":0,"max":1,"about":"How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel."},{"name":"Damp","min":0,"max":1,"about":"How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them."}],"start":[0,2,0,0.06],"measures":{"motion":0.0552,"detail":0.062,"edges":0.4422,"complexity":2.0011,"coverage":0.1963,"colour":0.1249,"drift":0.0326},"knobResponse":[0.0328,0.0383,0.0467,0.0368]},{"slug":"frost","title":"Frost","family":"fractal","round":17,"note":"밤 유리창에 서리 고사리가 아래 틀과 창틀에서 자라 들어와요. 가지는 대각선으로 곧게 뻗어 깃털처럼 곁가지를 내며 반짝이고, 유리 너머로 가로등과 눈발이 흐리게 비치다가 방이 데워지면 가운데부터 녹아 다시 자라요. K1 을 누르면 입김이 가운데를 닦아요.","idea":"Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.","buttons":"K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.","code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","layer":{"id":"layer-frost","type":"code","name":"frost","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun."},{"name":"Rime","min":0,"max":1,"about":"How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame."},{"name":"Glitter","min":0,"max":1,"about":"How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling."}],"start":[0,2,0,0.06],"measures":{"motion":0.0377,"detail":0.1373,"edges":0.4636,"complexity":2.383,"coverage":0.4303,"colour":0.1004,"drift":0.0382},"knobResponse":[0.0509,0.1276,0.1564,0.0602]},{"slug":"funicular","title":"Funicular","family":"rail","round":27,"note":"해 질 녘 산비탈에서 계단꼴 객차 둘이 케이블 하나에 매달려 오르내려요. 호숫가 마을의 역을 떠난 빨간 객차가 오르는 동안 꼭대기 기관실의 큰 바퀴가 돌며 파란 객차가 내려오고, 둘은 중턱의 압트 교행 구간에서 갈라진 선로로 비켜 지나가요. K1 을 끝까지 돌리면 창이 켜진 밤이 되고, 누르면 객차가 바로 떠나요.","idea":"Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.","buttons":"K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.","code":"// ===== Patternflow pattern =====\n// Title:   Funicular\n// Family:  rail\n// Idea:    Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the two-car funicular with an Abt passing loop\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1\n//\n// Knob 1: Dusk. Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit.\n// Knob 2: Speed. At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower.\n// Knob 3: Grade. How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher.\n// Knob 4: Snow. A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel.\n// Buttons: K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i | 0, 374761393) + Math.imul(j | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nconst ridge = (t, s) => 1 - abs(2 * vn(t, s) - 1);\n// True draws only the line: track, cable, cars and stations.\nconst BARE = false;\n\n// Rows of the valley end and the summit end of the track and of the quay. The bullwheel's radius.\nconst YA = 112, YB = 30, QY = 121, R = 5.5;\n// Seconds a run and a stop take at Speed 1.\nconst RUN = 16, DWELL = 6;\n\n// Each colour from blue hour, its first three numbers, to night, its last three.\nconst PAL = {\n  s0:[12,26,82,5,11,42,1,3,12], s1:[44,70,150,14,28,80,3,8,26], s2:[134,118,180,46,52,112,8,16,40],\n  s3:[240,164,124,116,76,100,20,26,52], far:[62,68,122,26,30,70,8,11,28], haze:[112,100,152,46,44,86,12,15,34],\n  fsn:[240,184,198,120,112,160,40,46,76], fsd:[140,144,196,66,70,122,24,30,56], far2:[36,48,90,14,20,50,4,7,18],\n  trL:[44,84,70,22,42,46,9,18,22], trD:[20,44,48,10,22,30,5,10,16], und:[9,22,26,5,11,16,2,5,9],\n  rock:[100,96,126,48,50,80,17,19,30], rockD:[46,46,76,22,24,46,7,9,17], snow:[236,206,222,140,140,180,54,60,88],\n  snowD:[146,156,206,76,84,136,28,34,60], bed:[56,52,54,30,28,32,12,12,15], rail:[190,188,200,120,120,140,70,70,84],\n  slp:[38,32,32,20,17,19,8,7,9], roof:[70,62,66,34,30,36,14,12,16], conc:[120,116,120,60,58,64,26,26,30],\n  stone:[130,122,116,64,60,62,26,24,28], lake:[26,38,92,10,14,40,2,4,12], cLo:[236,150,140,104,72,104,18,20,34],\n  cHi:[98,90,146,34,36,74,8,10,22],\n};\n// Town walls: cream, ochre, pink, blue-grey, white.\nconst HOUSE = [[178, 152, 112], [192, 132, 62], [184, 106, 112], [84, 132, 140], [184, 180, 188]];\nconst WARM = [255, 196, 108], LAMP = [255, 226, 168], STEEL = [224, 220, 206];\nconst LIV = [[206, 34, 30], [34, 84, 196]], DK = [40, 40, 44], TILE = [128, 60, 46];\nconst lerp3 = (p, k, i = k \u003c 0.5 ? 0 : 3, f = k * 2 - i / 3) => [0, 1, 2].map((c) => mix(p[i + c], p[i + 3 + c], f));\n\n// The line for a grade: its ends, its direction u, the normal n to its lower\n// right, the passing loop, and the shape of a car column by column.\nfunction geom(g) {\n  const xA = mix(8, 17, g), xB = mix(50, 43, g), L = hypot(xB - xA, YB - YA);\n  const ux = (xB - xA) / L, uy = (YB - YA) / L, tp = -uy / ux, hb = round(3 * tp + 3.2);\n  const Lca = 10 / ux, aLo = Lca / 2 + 1.5, aHi = L - Lca / 2 - 1.5;\n  const G = { xA, L, ux, uy, nx: -uy, ny: ux, tp, hb, Lca, aLo, aHi, aM: (aLo + aHi) / 2, hs: Lca / 2 + 2, lt: 13, WL: 4.6 };\n  // Columns 0..9: three compartments of three and the end wall, each floor level, so the car climbs in steps.\n  for (const k of [\"ct\", \"cf\", \"cr\"]) G[k] = new Int8Array(10);\n  let vr = 0;\n  for (let c = 0; c \u003c 10; c++) {\n    const fl = floor(-((c > 8 ? 2 : floor(c / 3)) * 3 - 2) * tp) - 2;\n    G.cf[c] = fl; G.ct[c] = fl - hb + 1; G.cr[c] = round(-(c - 4.5) * tp - 0.5);\n    vr = max(vr, -(c - 4.5) * tp - G.ct[c]);\n  }\n  G.VR = vr + 2;\n  // The bullwheel: the cable runs off the top of the track onto its left side.\n  G.wx = xB + 3 * ux + R * G.nx; G.wy = YB + 3 * uy + R * G.ny; G.px = xB - 5;\n  return G;\n}\nconst bump = (G, a) => sm(G.aM - G.hs - G.lt, G.aM - G.hs, a) * (1 - sm(G.aM + G.hs, G.aM + G.hs + G.lt, a));\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F(N * 3), bg: F(N * 3), A: F(N), D: F(N), SK: new Uint8Array(N), tk: new Int32Array(N), ntk: 0,\n    win: new Int32Array(900), wth: F(900), nw: 0, lamp: [], k1: -1, g: -1, k4: -1, G: null, c: {},\n    run: 0, tm: 1, dir: 1, pa: 0, wh: 0, flash: 0, lampsOn: 1, lampF: 300, t: 0, stars: [], fl: [], cx: 40, cl: F(128 * 64), houses: [],\n  });\n  // Clouds: streaks of soft noise in a strip that wraps every 128 columns.\n  const n = (X, y) => 0.6 * vn(X * 0.045, y * 0.22) + 0.4 * vn(X * 0.12 + 5, y * 0.45);\n  for (let i = 0; i \u003c 8192; i++) S.cl[i] = mix(n(i & 127, i >> 7), n((i & 127) + 128, i >> 7), (i & 127) / 128);\n  for (let i = 0; i \u003c 110; i++) S.stars.push({ x: floor(rnd() * W), y: floor(rnd() * 100), b: 0.25 + 0.75 * rnd() ** 2, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 260; i++) S.fl.push({ x: rnd() * W, y: rnd() * H, v: 0.6 + 0.8 * rnd(), ph: rnd() * TAU, z: rnd() });\n  // The town: a row of taller houses up the bank with a church, and a lower row on the quay.\n  for (const [b, i0, h0, hr] of [[QY - 6, 0, 7, 7], [QY - 1, 50, 4, 4]])\n    for (let x = i0 ? -2 : 0, i = i0; x \u003c W; i++) {\n      const ch = !i0 && x > 38 && !S.ch, w = ch ? 5 : 4 + floor(hash(i, 1) * 4);\n      if (ch) S.ch = 1;\n      S.houses.push({ x, b, w, h: ch ? 16 : h0 + floor(hash(i, 2) * hr), c: floor(hash(i, 3) * 5), ch, gab: hash(i, 4) \u003c 0.75 });\n      x += w + (i0 ? 1 + floor(hash(i, 5) * 3) : hash(i, 5) \u003c 0.2 ? 1 : 0);\n    }\n}\n\nfunction build(S, k1, g, k4) {\n  S.k1 = k1; S.g = g; S.k4 = k4; S.nw = 0; S.lamp.length = 0;\n  const G = (S.G = geom(g)), C = S.c, bg = S.bg, o = [0, 0, 0];\n  for (const key in PAL) C[key] = lerp3(PAL[key], k1);\n  const amb = mix(1, 0.3, k1), snl = 30 + 112 * k4 ** 0.75;\n  let ntk = 0;\n  const setc = (c, m = 1) => ((o[0] = c[0] * m), (o[1] = c[1] * m), (o[2] = c[2] * m));\n  const blend = (c, t) => ((o[0] = mix(o[0], c[0], t)), (o[1] = mix(o[1], c[1], t)), (o[2] = mix(o[2], c[2], t)));\n  const ad = (px, py) => [(px - G.xA) * G.ux + (py - YA) * G.uy, (px - G.xA) * G.nx + (py - YA) * G.ny];\n  const dg = (a) => 7 + 6 * bump(G, a) + 1.6 * vn(a * 0.2, 4);\n  const inBed = (a, d, of = G.WL * bump(G, a)) => a >= -1.5 && a \u003c= G.L + 1 && (abs(d + of) \u003c 2.7 || abs(d - of) \u003c 2.7);\n  const f1 = (x) => 46 + 22 * (1 - ridge(x * 0.07 + 3.3, 1.7)) + 3 * vn(x * 0.4, 5);\n  const f2 = (x) => 74 + 12 * (1 - ridge(x * 0.1 + 11, 2.3)) + 2 * vn(x * 0.5, 8);\n  const pk = (x) => 2 + (x \u003c G.px ? (G.px - x) * 2.6 : (x - G.px) * 1.7) + 4 * (vn(x * 0.3, 9) - 0.5);\n  const tl = (x) => 50 + 8 * (vn(x * 0.12, 2) - 0.5);\n  const face = (a, d) => d > -dg(a);\n  // Rock with strata and snow lying in the gullies.\n  const rock = (px, py, side) => {\n    const fa = vn(px * 0.16 + 3, py * 0.07), lit = side > 0 ? fa > 0.32 : fa > 0.72;\n    setc(lit ? C.rock : C.rockD, 0.82 + 0.3 * vn(px * 0.4, py * 0.2));\n    const st = ((py * 0.8 - px * 0.5 + 4 * vn(px * 0.08, py * 0.08)) / 5) % 1;\n    if (st \u003c 0.16) blend(C.rockD, 0.7);\n    const sn = sm(0.56, 0.66, 0.6 * vn(px * 0.3 + 5, py * 0.12) + 0.4 * vn(px * 0.8, py * 0.35) + (snl - py) / 160 + k4 * 0.5 - (st \u003c 0.3 ? 0.1 : 0));\n    if (sn > 0) blend(lit ? C.snow : C.snowD, sn);\n  };\n  // Firs on a jittered grid of cells three wide and four tall, the nearest in front.\n  const tree = (px, py) => {\n    const cx = floor(px / 3), cy = floor(py / 4);\n    let best = -1, tx = 0, ty = 0, th = 0;\n    for (let j = 0; j \u003c 3; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const X = cx + i, Y = cy - j, ax = (X + 0.2 + 0.6 * hash(X, Y)) * 3, ay = (Y + hash(Y, X + 7)) * 4, hh = 4 + 3 * hash(X + 3, Y);\n        if (py \u003c ay || py > ay + hh || abs(px - ax) > (py - ay) * 0.45 + 0.35 || ay + hh \u003c= best) continue;\n        const [ra, rd] = ad(ax, ay + hh);\n        if (!face(ra, rd) || inBed(ra, rd) || ay + hh \u003c tl(ax) || ay + hh > QY - 6) continue;\n        (best = ay + hh), (tx = ax), (ty = ay), (th = hh);\n      }\n    if (best \u003c 0) return 0;\n    setc(px \u003c tx ? C.trL : C.trD, 0.85 + 0.3 * hash(floor(tx), floor(ty)));\n    if (ty + th \u003c snl + 6 * (hash(floor(tx), 3) - 0.5) && py - ty \u003c th * 0.55) blend(C.snow, 0.75);\n    return 1;\n  };\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = y * W + x, px = x + 0.5, py = y + 0.5, [a, d] = ad(px, py);\n      S.A[k] = a; S.D[k] = d; S.SK[k] = 0;\n      // Sky: blue overhead going lavender lower down, with a peach glow behind the far peaks in the west.\n      const t = py / 104, s = t \u003c 0.4 ? 0 : t \u003c 0.76 ? 1 : 2, ft = s ? (t - [0, 0.4, 0.76][s]) / (s > 1 ? 0.24 : 0.36) : t / 0.4;\n      const sa = [C.s0, C.s1, C.s2][s], sb = [C.s1, C.s2, C.s3][s];\n      for (let c = 0; c \u003c 3; c++) o[c] = mix(sa[c], sb[c], sm(0, 1, ft));\n      blend(C.s3, 0.35 * exp(-max(0, 100 - py) / 18) * (1 - px / 90));\n      let sky = 1;\n      if (py >= f1(px)) {\n        // The far range in haze, snow on the peaks that stand highest.\n        const top = f1(px), lit = f1(px + 1) >= f1(px - 1);\n        setc(C.far); blend(C.haze, cl((py - top) / 28, 0, 0.8));\n        const sd = sm(0.5, 0.62, 0.55 * vn(px * 0.7, py * 0.3) + 0.45 * vn(px * 1.6, py * 0.8) + (54 - py) / 14 + k4 * 0.5);\n        if (sd > 0) blend(lit ? C.fsn : C.fsd, sd);\n        sky = 0;\n      }\n      if (py >= f2(px)) {\n        setc(C.far2, 0.85 + 0.25 * vn(px * 0.6, py * 0.6));\n        blend(C.haze, cl((py - f2(px)) / 30, 0, 0.35));\n        if (k4 > 0.3 && py \u003c f2(px) + 3 * k4 + 1) blend(C.snowD, 0.6 * k4);\n        sky = 0;\n      }\n      if (py >= pk(px)) (sky = 0), rock(px, py, px \u003c G.px ? 1 : -1);\n      if (face(a, d) && py \u003c QY) {\n        sky = 0;\n        if (py \u003c tl(px)) rock(px, py, d \u003c 2 || vn(px * 0.2, py * 0.2) > 0.5 ? 1 : -1);\n        else if (!tree(px, py)) setc(C.und, 0.8 + 0.4 * hash(x, y)), blend(C.snowD, 0.75 * sm(4, -4, py - snl + 6 * vn(px * 0.3, py * 0.1)));\n      } else if (py \u003c QY && py > 30 && d > -dg(a) - 8 && tree(px, py)) sky = 0;\n      S.SK[k] = sky;\n      if (BARE) setc(o, 0);\n      // The track bed: gravel, sleepers, two rails a track, rollers between them.\n      if (inBed(a, d)) {\n        const of = G.WL * bump(G, a), best = min(abs(d - of), abs(d + of));\n        setc(C.bed, 0.94 + 0.12 * hash(x * 7, y * 3));\n        if (best \u003c 2.2 && (a / 2.4) % 1 \u003c 0.4) blend(C.slp, 0.4);\n        if (best \u003c 0.6 && (a / 6) % 1 \u003c 0.2) setc(C.rail, 0.35);\n        if (abs(abs(d - of) - 1.8) \u003c 0.56 || abs(abs(d + of) - 1.8) \u003c 0.56) setc(C.rail, 0.9 + 0.1 * hash(x, y));\n        S.tk[ntk++] = k;\n      }\n      bg[k * 3] = o[0]; bg[k * 3 + 1] = o[1]; bg[k * 3 + 2] = o[2];\n    }\n  S.ntk = ntk;\n  const put = (x, y, c, t = 1, m = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    for (let i = 0, k = (y * W + x) * 3; i \u003c 3; i++) bg[k + i] = mix(bg[k + i], c[i] * m, t);\n  };\n  const glow = (x, y, s) => {\n    for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) put(x + i, y + j, LAMP, s * exp(-(i * i + j * j) / 1.44));\n    put(x, y, LAMP);\n  };\n  // A crescent moon once it is dark.\n  const mo = sm(0.45, 0.85, k1);\n  if (mo > 0 && !BARE)\n    for (let y = 6; y \u003c 22; y++)\n      for (let x = 6; x \u003c 22; x++) {\n        const r1 = hypot(x + 0.5 - 14, y + 0.5 - 13), m = cl(4.3 - r1, 0, 1) * cl(hypot(x + 0.5 - 16.2, y + 0.5 - 11.8) - 3.6, 0, 1);\n        if (!S.SK[y * W + x]) continue;\n        if (m > 0) put(x, y, [236, 230, 196], m * mo);\n        else if (r1 \u003c 10) put(x, y, [70, 76, 110], 0.5 * mo * exp(-(r1 - 4) / 2.5));\n      }\n\n  // The town, the back row stopping short of the valley station.\n  const town = (front) => {\n    if (BARE) return;\n    for (const h of S.houses) {\n      if ((h.b === QY - 1) !== front || (h.x + h.w > G.xA - 9 && h.x \u003c (front ? G.xA - 1 : G.xA + (G.Lca + 6) * G.ux))) continue;\n      const base = h.b, top = base - h.h, m = amb * (front ? 0.88 : 0.7), sn = snl > base - 3;\n      for (let x = h.x; x \u003c min(W, h.x + h.w); x++) {\n        for (let y = top; y \u003c= base; y++) put(x, y, HOUSE[h.c], 1, m * (x === h.x + h.w - 1 ? 0.72 : 1));\n        const rr = h.gab ? h.w / 2 + 0.5 - abs(x + 0.5 - (h.x + h.w / 2)) : 1;\n        for (let y = floor(top - rr); y \u003c top; y++) put(x, y, sn ? C.snow : h.c & 1 ? TILE : [64, 68, 88], 1, sn ? 1 : m);\n      }\n      if (h.ch) {\n        for (let y = top - 9; y \u003c top - 2; y++) for (let i = -1; i \u003c 2; i++) (!i || y > top - 6) && put(h.x + 2 + i, y, C.roof, 1, 1.4);\n        put(h.x + 2, top + 2, [250, 236, 190], 1, 0.9);\n      }\n      for (let wy = base - 2; wy > top + 1 + (h.ch ? 3 : 0); wy -= 3)\n        for (let wx = h.x + 1; wx \u003c h.x + h.w - 1; wx += 2) if (S.nw \u003c 900) (S.win[S.nw] = wy * W + wx), (S.wth[S.nw++] = hash(wx, wy)), put(wx, wy, [30, 24, 30], 1, amb + 0.3);\n    }\n  };\n  town(false);\n  // Stations: a tiled roof on pillars over the platform where a car stands, lit underneath.\n  const yT = (px) => YA - (px - G.xA) * G.tp;\n  const shed = (a0, a1) => {\n    const x0 = floor(G.xA + a0 * G.ux), x1 = ceil(G.xA + a1 * G.ux);\n    for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n      const px = x + 0.5, ac = (px - G.xA) / G.ux, ty = yT(px), end = x === x0 || x === x1 || x === round((x0 + x1) / 2);\n      if (ac \u003c a0 || ac > a1) continue;\n      for (let y = floor(ty - G.VR - 4); y \u003c= ceil(ty + 6); y++) {\n        const v = ty - (y + 0.5);\n        if (v > G.VR && v \u003c= G.VR + 3.4) v > G.VR + 2.3 ? put(x, y, y \u003c snl ? C.snow : [150, 76, 58], 1, y \u003c snl ? 1.1 : amb) : put(x, y, [118, 54, 42], 1, amb * (v > G.VR + 1.2 ? 1 : 0.55));\n        else if (v > 0.6 && v \u003c= G.VR) end ? put(x, y, [46, 42, 46]) : put(x, y, LAMP, 0.06 + 0.3 * exp(-(G.VR - v) / 4));\n        else if (v \u003c= 0.6 && v > -5.5 && !inBed(...ad(px, y + 0.5))) put(x, y, y % 3 ? C.conc : C.roof), put(x, y, LAMP, 0.18 + 0.12 * k1);\n      }\n    }\n    for (const f of [0.3, 0.72]) {\n      const px = G.xA + mix(a0, a1, f) * G.ux;\n      glow(floor(px), floor(yT(px) - G.VR + 1), 0.3 + 0.3 * k1);\n    }\n  };\n  shed(-2.5, G.Lca + 4.5);\n  shed(G.L - G.Lca - 4.5, G.L + 1.5);\n  // The valley station hall left of the track, an arched window over a lit door on the quay.\n  const vx0 = max(0, floor(G.xA - 9)), vx1 = floor(G.xA) - 1, vy0 = YA - 12, vc = (vx1 + 1 + max(vx0, G.xA - 9)) / 2;\n  for (let x = vx0; x \u003c= vx1; x++) {\n    for (let y = vy0; y \u003c QY; y++) put(x, y, HOUSE[0], 1, amb * (x === vx1 ? 0.7 : 0.95));\n    for (let y = floor(vy0 - 5.5 + abs(x + 0.5 - vc) * 1.2); y \u003c vy0; y++) put(x, y, y \u003c snl ? C.snow : TILE, 1, y \u003c snl ? 1 : amb);\n  }\n  for (let y = vy0 + 2; y \u003c QY; y++)\n    for (let x = floor(vc - 1.5); x \u003c vc + 1.5; x++)\n      if (y \u003c vy0 + 9 ? y > vy0 + 2 || abs(x + 0.5 - vc) \u003c 1 : y >= QY - 4 && abs(x + 0.5 - vc) \u003c 1) put(x, y, WARM, 0.92, mix(0.85, 1, k1));\n  town(true);\n\n  // The engine house on the summit, with the bullwheel behind its lit round window.\n  const ex0 = floor(G.wx - 8), ey0 = floor(G.wy - 8);\n  for (let y = ey0 - 6; y \u003c= G.wy + 8; y++)\n    for (let x = ex0; x \u003c W; x++) {\n      const rh = y - (ey0 - 6 + abs(x + 0.5 - G.wx) * 0.62), r = hypot(x + 0.5 - G.wx, y + 0.5 - G.wy);\n      if (r \u003c R + 1.2) put(x, y, [255, 200, 120], 1, mix(0.9, 1, k1) * (1 - 0.15 * r / R));\n      else if (y \u003c ey0) rh >= 0 && put(x, y, k4 > 0.05 && rh \u003c 1.2 ? C.snow : C.roof, 1, 1.2);\n      else put(x, y, C.stone, 1, (0.85 + 0.15 * (((y >> 1) + (x >> 2)) & 1)) * (x === ex0 ? 0.6 : 1));\n    }\n  // Lamps on posts beside the line, every nine steps.\n  for (let a = 7; a \u003c G.L - 6; a += 9) {\n    const of = G.WL * bump(G, a) + 5.6, lx = floor(G.xA + a * G.ux + of * G.nx), ly = floor(YA + a * G.uy + of * G.ny);\n    put(lx, ly + 1, DK), put(lx, ly + 2, DK), S.lamp.push(lx, ly, a);\n  }\n  if (!BARE)\n    for (let x = 0; x \u003c W; x++) {\n      put(x, QY, C.stone, 1, 0.8);\n      if (x % 8 === 4) put(x, QY - 1, DK), put(x, QY - 2, DK), glow(x, QY - 3, 0.12 + 0.25 * k1);\n    }\n}\n\n// Along a run the cars speed up for the first seventh and slow down for the last.\nfunction prof(t) {\n  const ta = 0.14, v = 1 / (1 - ta);\n  return t \u003c ta ? (v * t * t) / (2 * ta) : t \u003c 1 - ta ? v * (t - ta / 2) : 1 - (v * (1 - t) * (1 - t)) / (2 * ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues, h = min(dt, 0.1), sp = cl(kv[1], 0.2, 3) / 2, bp = input.btnPressed;\n  const k1 = cl(kv[0], 0, 1), g = cl(kv[2], 0, 1), k4 = cl(kv[3], 0, 1);\n  if (abs(k1 - S.k1) > 0.003 || abs(g - S.g) > 0.003 || abs(k4 - S.k4) > 0.003) build(S, k1, g, k4);\n  if (bp[0]) S.run ? (S.flash = 1) : (S.tm = min(S.tm, 0.8));\n  if (bp[1]) (S.lampsOn = 1 - S.lampsOn), (S.lampF = -10);\n  S.lampF += h * 40;\n  S.cx += h * sp * 3.6;\n  S.flash = max(0, S.flash - h);\n  S.t += h * sp;\n  const was = S.pa;\n  if (!S.run) {\n    S.tm -= h * sp * 2;\n    if (S.tm \u003c= 0) (S.run = 1), (S.tm = 0);\n  } else {\n    S.tm = min(1, S.tm + (h * sp * 2) / RUN);\n    S.pa = S.dir > 0 ? prof(S.tm) : 1 - prof(S.tm);\n    if (S.tm >= 1) (S.run = 0), (S.tm = DWELL), (S.dir = -S.dir);\n  }\n  S.wh += ((S.pa - was) * (S.G.aHi - S.G.aLo)) / R;\n  for (const q of S.fl) {\n    q.y += h * (6 + 12 * q.z) * q.v;\n    q.x = (q.x + h * (2.5 * sin(S.t * 0.7 + q.ph) - 1.5) + W) % W;\n    if (q.y > H) (q.y -= H + 2), (q.x = rnd() * W);\n  }\n}\n\nfunction drawCar(S, f, ac, side, liv, up, k1) {\n  const G = S.G, o = side * G.WL * bump(G, ac), Px = G.xA + ac * G.ux + o * G.nx, Py = YA + ac * G.uy + o * G.ny;\n  const x0 = round(Px - 5), ay = round(Py - (x0 + 5 - Px) * G.tp), hb = G.hb, lm = mix(1, 0.5, k1), fl = S.flash > 0 && (S.flash * 6) % 1 \u003c 0.5;\n  for (let c = 0; c \u003c 10; c++) {\n    const x = x0 + c, glass = c % 3 && c \u003c 9, b = c > 8 ? 2 : floor(c / 3);\n    if (x \u003c 0 || x >= W) continue;\n    for (let r = G.ct[c]; r \u003c= G.cr[c]; r++) {\n      const y = ay + r, rr = r - G.ct[c], q = (y * W + x) * 3;\n      if (y \u003c 0 || y >= H) continue;\n      let [cr, cg, cb] = liv, m = lm;\n      if (r === G.cr[c]) (cr = cg = cb = c === 1 || c === 8 ? 20 : 68);\n      else if (r > G.cf[c]) m *= 0.62;\n      else if (rr === 0) (cr = 210), (cg = 206), (cb = 196);\n      else if (rr === hb - 3) {\n        (cr = 228), (cg = 214), (cb = 180);\n        if (c === (up ? 9 : 0)) (cr = 255), (cg = 250), (cb = fl ? 120 : 220), (m = 1);\n        if (c === (up ? 0 : 9)) (cr = 255), (cg = 30), (cb = 20), (m = 1);\n      } else if (glass && rr >= 2 && rr \u003c= hb - 4) {\n        // Lit windows, a passenger's head and shoulders in some.\n        const head = rr >= hb - 5 && c % 3 === 1 + (hash(b, liv[2]) \u003c 0.5) && hash(b * 3, liv[2]) \u003c 0.7;\n        (cr = head ? 60 : 255), (cg = head ? 40 : 214), (cb = head ? 36 : 150), (m = 1);\n      }\n      f[q] = cr * m; f[q + 1] = cg * m; f[q + 2] = cb * m;\n    }\n  }\n  // The headlamp's beam on the track ahead.\n  const dr = up ? 1 : -1, ae = ac + (dr * G.Lca) / 2, bs = mix(0.16, 0.36, k1) * (fl ? 2.5 : 1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], s = (S.A[k] - ae) * dr, w = abs(S.D[k] - side * G.WL * bump(G, S.A[k])) - 0.8 - s * 0.08, e = bs * (1 - s / 15) ** 2 * cl(1 - w, 0, 1);\n    if (s >= 0 && s \u003c 15) (f[k * 3] += 255 * e), (f[k * 3 + 1] += 236 * e), (f[k * 3 + 2] += 190 * e);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S.G) build(S, 0, 0, 0.06);\n  const G = S.G, f = S.f, k1 = S.k1, k4 = S.k4, t = S.t, C = S.c;\n  f.set(S.bg);\n  if (!BARE) {\n    // Stars come out as it gets dark; the evening star is there from the start.\n    const sv = sm(0.1, 0.7, k1);\n    for (const s of S.stars) {\n      const k = s.y * W + s.x, e = sv * s.b * (0.7 + 0.3 * sin(time * (2 + s.ph / 3) + s.ph)) * (1 - s.y / 130);\n      if (S.SK[k]) (f[k * 3] += 220 * e), (f[k * 3 + 1] += 224 * e), (f[k * 3 + 2] += 240 * e);\n    }\n    // Two bands of cloud drifting east, lit underneath while the glow lasts.\n    const ox = floor(S.cx), fx = S.cx - ox;\n    for (let y = 2; y \u003c 62; y++) {\n      const band = exp(-(((y - 12) / 7) ** 2)) + 0.9 * exp(-(((y - 38) / 8) ** 2)), i0 = y * 128;\n      for (let x = 0; x \u003c W; x++) {\n        if (!S.SK[y * W + x] || band \u003c 0.05) continue;\n        const d0 = mix(S.cl[i0 + ((x - ox) & 127)], S.cl[i0 + ((x - ox - 1) & 127)], fx), d1 = S.cl[min(63, y + 2) * 128 + ((x - ox) & 127)];\n        const e = sm(0.44, 0.68, d0 * 0.8 + band * 0.44 - 0.1) * 0.9, lit = cl(0.45 + (d0 - d1) * 3 + (y - 30) / 60, 0, 1), q = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) f[q + c] = mix(f[q + c], mix(C.cHi[c], C.cLo[c], lit), e);\n      }\n    }\n    const vk = (52 * W + 11) * 3;\n    if (S.SK[vk / 3]) (f[vk] += 255), (f[vk + 1] += 246), (f[vk + 2] += 220);\n    // Windows in town: more lit as night comes, now and then one going on or off.\n    const pl = mix(0.42, 0.86, k1);\n    for (let i = 0; i \u003c S.nw; i++) {\n      const th = S.wth[i], k = S.win[i] * 3, m = 0.8 + 0.2 * hash(i, 9);\n      if (th \u003c pl + 0.05 * sin(t * 0.4 + th * 60)) (f[k] = WARM[0] * m), (f[k + 1] = WARM[1] * m), (f[k + 2] = WARM[2] * m);\n    }\n  }\n  // Lamps along the line.\n  for (let i = 0; i \u003c S.lamp.length; i += 3) {\n    const [x, y, a] = S.lamp.slice(i, i + 3), e = mix(0.55, 1, k1) * (S.lampsOn ? cl((S.lampF - a) / 4, 0, 1) : 1 - cl((S.lampF - G.L + a) / 4, 0, 1));\n    for (let j = -2; j \u003c= 2; j++)\n      for (let ii = -2, q = ((y + j) * W + x - 2) * 3; ii \u003c= 2; ii++, q += 3) {\n        const g = j || ii ? e * 0.35 * mix(0.3, 1, k1) * exp(-(ii * ii + j * j) / 2) : e;\n        if (x + ii >= 0 && x + ii \u003c W) for (let c = 0; c \u003c 3; c++) f[q + c] += LAMP[c] * g;\n      }\n  }\n  // The cable: a strand from each car up to the bullwheel, its lay sliding with it.\n  const aA = mix(G.aLo, G.aHi, S.pa), aB = G.aLo + G.aHi - aA, lm = mix(1, 0.55, k1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], a = S.A[k], d = S.D[k], of = G.WL * bump(G, a);\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const ac = s \u003c 0 ? aA : aB;\n      if (a \u003c ac + G.Lca / 2 - 0.5 || a > G.L + 2 || abs(d - s * of - s * 0.25) >= 0.55) continue;\n      const tx = (0.5 + 0.5 * cos((TAU * (a - ac)) / 3)) ** 2;\n      for (let c = 0; c \u003c 3; c++) f[k * 3 + c] = mix([78, 72, 70][c], STEEL[c], tx) * lm;\n      break;\n    }\n  }\n  // The cars: red on the upper track of the loop, blue on the lower.\n  const upA = S.run ? S.dir > 0 : S.dir \u003c 0;\n  drawCar(S, f, aA, -1, LIV[0], upA, k1);\n  drawCar(S, f, aB, 1, LIV[1], !upA, k1);\n  // The bullwheel turning behind the round window, six spokes on a hub.\n  for (let y = floor(G.wy - R - 1); y \u003c= G.wy + R + 1; y++)\n    for (let x = floor(G.wx - R - 1); x \u003c= min(W - 1, G.wx + R + 1); x++) {\n      const dx = x + 0.5 - G.wx, dy = y + 0.5 - G.wy, r = hypot(dx, dy), an = atan2(dy, dx) - S.wh;\n      const m = ((an % (PI / 3)) + PI / 3) % (PI / 3), sd = r * sin(min(m, PI / 3 - m));\n      if (r \u003c= R + 0.6 && (abs(r - R + 0.7) \u003c 0.75 || (r \u003c R - 1 && sd \u003c 0.5) || r \u003c 1.4)) f.set([34, 28, 30], (y * W + x) * 3);\n    }\n  // The lake: the quay and the town upside down, rippling.\n  if (!BARE)\n    for (let y = QY + 1; y \u003c H; y++) {\n      const dy = y - QY, sh = round(0.8 * sin(t * 0.9 + y * 1.3)), m = (0.95 - dy * 0.08) / 255;\n      for (let x = 0; x \u003c W; x++) for (let c = 0, q = (y * W + x) * 3, p = ((QY - dy) * W + cl(x + sh, 0, W - 1)) * 3; c \u003c 3; c++) f[q + c] = C.lake[c] * (1 + (y & 1) * 0.2) + f[p + c] ** 2 * m;\n    }\n  // Falling snow.\n  const nf = floor(cl((k4 - 0.1) / 0.9, 0, 1) * 260), sc = mix(235, 120, k1);\n  for (let i = 0; i \u003c nf; i++) {\n    const q0 = S.fl[i], q = (floor(q0.y) * W + floor(q0.x)) * 3, e = 0.45 + 0.55 * q0.z;\n    if (q0.y >= 0 && q0.y \u003c H) (f[q] = mix(f[q], sc, e)), (f[q + 1] = mix(f[q + 1], sc, e)), (f[q + 2] = mix(f[q + 2], sc * 1.06, e));\n  }\n  for (let k = 0, j = 0; k \u003c N; k++, j += 3) display.setPixel(k & 63, k >> 6, cl(f[j], 0, 255) | 0, cl(f[j + 1], 0, 255) | 0, cl(f[j + 2], 0, 255) | 0);\n}\n","layer":{"id":"layer-funicular","type":"code","name":"funicular","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Funicular\n// Family:  rail\n// Idea:    Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the two-car funicular with an Abt passing loop\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1\n//\n// Knob 1: Dusk. Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit.\n// Knob 2: Speed. At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower.\n// Knob 3: Grade. How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher.\n// Knob 4: Snow. A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel.\n// Buttons: K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i | 0, 374761393) + Math.imul(j | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nconst ridge = (t, s) => 1 - abs(2 * vn(t, s) - 1);\n// True draws only the line: track, cable, cars and stations.\nconst BARE = false;\n\n// Rows of the valley end and the summit end of the track and of the quay. The bullwheel's radius.\nconst YA = 112, YB = 30, QY = 121, R = 5.5;\n// Seconds a run and a stop take at Speed 1.\nconst RUN = 16, DWELL = 6;\n\n// Each colour from blue hour, its first three numbers, to night, its last three.\nconst PAL = {\n  s0:[12,26,82,5,11,42,1,3,12], s1:[44,70,150,14,28,80,3,8,26], s2:[134,118,180,46,52,112,8,16,40],\n  s3:[240,164,124,116,76,100,20,26,52], far:[62,68,122,26,30,70,8,11,28], haze:[112,100,152,46,44,86,12,15,34],\n  fsn:[240,184,198,120,112,160,40,46,76], fsd:[140,144,196,66,70,122,24,30,56], far2:[36,48,90,14,20,50,4,7,18],\n  trL:[44,84,70,22,42,46,9,18,22], trD:[20,44,48,10,22,30,5,10,16], und:[9,22,26,5,11,16,2,5,9],\n  rock:[100,96,126,48,50,80,17,19,30], rockD:[46,46,76,22,24,46,7,9,17], snow:[236,206,222,140,140,180,54,60,88],\n  snowD:[146,156,206,76,84,136,28,34,60], bed:[56,52,54,30,28,32,12,12,15], rail:[190,188,200,120,120,140,70,70,84],\n  slp:[38,32,32,20,17,19,8,7,9], roof:[70,62,66,34,30,36,14,12,16], conc:[120,116,120,60,58,64,26,26,30],\n  stone:[130,122,116,64,60,62,26,24,28], lake:[26,38,92,10,14,40,2,4,12], cLo:[236,150,140,104,72,104,18,20,34],\n  cHi:[98,90,146,34,36,74,8,10,22],\n};\n// Town walls: cream, ochre, pink, blue-grey, white.\nconst HOUSE = [[178, 152, 112], [192, 132, 62], [184, 106, 112], [84, 132, 140], [184, 180, 188]];\nconst WARM = [255, 196, 108], LAMP = [255, 226, 168], STEEL = [224, 220, 206];\nconst LIV = [[206, 34, 30], [34, 84, 196]], DK = [40, 40, 44], TILE = [128, 60, 46];\nconst lerp3 = (p, k, i = k \u003c 0.5 ? 0 : 3, f = k * 2 - i / 3) => [0, 1, 2].map((c) => mix(p[i + c], p[i + 3 + c], f));\n\n// The line for a grade: its ends, its direction u, the normal n to its lower\n// right, the passing loop, and the shape of a car column by column.\nfunction geom(g) {\n  const xA = mix(8, 17, g), xB = mix(50, 43, g), L = hypot(xB - xA, YB - YA);\n  const ux = (xB - xA) / L, uy = (YB - YA) / L, tp = -uy / ux, hb = round(3 * tp + 3.2);\n  const Lca = 10 / ux, aLo = Lca / 2 + 1.5, aHi = L - Lca / 2 - 1.5;\n  const G = { xA, L, ux, uy, nx: -uy, ny: ux, tp, hb, Lca, aLo, aHi, aM: (aLo + aHi) / 2, hs: Lca / 2 + 2, lt: 13, WL: 4.6 };\n  // Columns 0..9: three compartments of three and the end wall, each floor level, so the car climbs in steps.\n  for (const k of [\"ct\", \"cf\", \"cr\"]) G[k] = new Int8Array(10);\n  let vr = 0;\n  for (let c = 0; c \u003c 10; c++) {\n    const fl = floor(-((c > 8 ? 2 : floor(c / 3)) * 3 - 2) * tp) - 2;\n    G.cf[c] = fl; G.ct[c] = fl - hb + 1; G.cr[c] = round(-(c - 4.5) * tp - 0.5);\n    vr = max(vr, -(c - 4.5) * tp - G.ct[c]);\n  }\n  G.VR = vr + 2;\n  // The bullwheel: the cable runs off the top of the track onto its left side.\n  G.wx = xB + 3 * ux + R * G.nx; G.wy = YB + 3 * uy + R * G.ny; G.px = xB - 5;\n  return G;\n}\nconst bump = (G, a) => sm(G.aM - G.hs - G.lt, G.aM - G.hs, a) * (1 - sm(G.aM + G.hs, G.aM + G.hs + G.lt, a));\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F(N * 3), bg: F(N * 3), A: F(N), D: F(N), SK: new Uint8Array(N), tk: new Int32Array(N), ntk: 0,\n    win: new Int32Array(900), wth: F(900), nw: 0, lamp: [], k1: -1, g: -1, k4: -1, G: null, c: {},\n    run: 0, tm: 1, dir: 1, pa: 0, wh: 0, flash: 0, lampsOn: 1, lampF: 300, t: 0, stars: [], fl: [], cx: 40, cl: F(128 * 64), houses: [],\n  });\n  // Clouds: streaks of soft noise in a strip that wraps every 128 columns.\n  const n = (X, y) => 0.6 * vn(X * 0.045, y * 0.22) + 0.4 * vn(X * 0.12 + 5, y * 0.45);\n  for (let i = 0; i \u003c 8192; i++) S.cl[i] = mix(n(i & 127, i >> 7), n((i & 127) + 128, i >> 7), (i & 127) / 128);\n  for (let i = 0; i \u003c 110; i++) S.stars.push({ x: floor(rnd() * W), y: floor(rnd() * 100), b: 0.25 + 0.75 * rnd() ** 2, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 260; i++) S.fl.push({ x: rnd() * W, y: rnd() * H, v: 0.6 + 0.8 * rnd(), ph: rnd() * TAU, z: rnd() });\n  // The town: a row of taller houses up the bank with a church, and a lower row on the quay.\n  for (const [b, i0, h0, hr] of [[QY - 6, 0, 7, 7], [QY - 1, 50, 4, 4]])\n    for (let x = i0 ? -2 : 0, i = i0; x \u003c W; i++) {\n      const ch = !i0 && x > 38 && !S.ch, w = ch ? 5 : 4 + floor(hash(i, 1) * 4);\n      if (ch) S.ch = 1;\n      S.houses.push({ x, b, w, h: ch ? 16 : h0 + floor(hash(i, 2) * hr), c: floor(hash(i, 3) * 5), ch, gab: hash(i, 4) \u003c 0.75 });\n      x += w + (i0 ? 1 + floor(hash(i, 5) * 3) : hash(i, 5) \u003c 0.2 ? 1 : 0);\n    }\n}\n\nfunction build(S, k1, g, k4) {\n  S.k1 = k1; S.g = g; S.k4 = k4; S.nw = 0; S.lamp.length = 0;\n  const G = (S.G = geom(g)), C = S.c, bg = S.bg, o = [0, 0, 0];\n  for (const key in PAL) C[key] = lerp3(PAL[key], k1);\n  const amb = mix(1, 0.3, k1), snl = 30 + 112 * k4 ** 0.75;\n  let ntk = 0;\n  const setc = (c, m = 1) => ((o[0] = c[0] * m), (o[1] = c[1] * m), (o[2] = c[2] * m));\n  const blend = (c, t) => ((o[0] = mix(o[0], c[0], t)), (o[1] = mix(o[1], c[1], t)), (o[2] = mix(o[2], c[2], t)));\n  const ad = (px, py) => [(px - G.xA) * G.ux + (py - YA) * G.uy, (px - G.xA) * G.nx + (py - YA) * G.ny];\n  const dg = (a) => 7 + 6 * bump(G, a) + 1.6 * vn(a * 0.2, 4);\n  const inBed = (a, d, of = G.WL * bump(G, a)) => a >= -1.5 && a \u003c= G.L + 1 && (abs(d + of) \u003c 2.7 || abs(d - of) \u003c 2.7);\n  const f1 = (x) => 46 + 22 * (1 - ridge(x * 0.07 + 3.3, 1.7)) + 3 * vn(x * 0.4, 5);\n  const f2 = (x) => 74 + 12 * (1 - ridge(x * 0.1 + 11, 2.3)) + 2 * vn(x * 0.5, 8);\n  const pk = (x) => 2 + (x \u003c G.px ? (G.px - x) * 2.6 : (x - G.px) * 1.7) + 4 * (vn(x * 0.3, 9) - 0.5);\n  const tl = (x) => 50 + 8 * (vn(x * 0.12, 2) - 0.5);\n  const face = (a, d) => d > -dg(a);\n  // Rock with strata and snow lying in the gullies.\n  const rock = (px, py, side) => {\n    const fa = vn(px * 0.16 + 3, py * 0.07), lit = side > 0 ? fa > 0.32 : fa > 0.72;\n    setc(lit ? C.rock : C.rockD, 0.82 + 0.3 * vn(px * 0.4, py * 0.2));\n    const st = ((py * 0.8 - px * 0.5 + 4 * vn(px * 0.08, py * 0.08)) / 5) % 1;\n    if (st \u003c 0.16) blend(C.rockD, 0.7);\n    const sn = sm(0.56, 0.66, 0.6 * vn(px * 0.3 + 5, py * 0.12) + 0.4 * vn(px * 0.8, py * 0.35) + (snl - py) / 160 + k4 * 0.5 - (st \u003c 0.3 ? 0.1 : 0));\n    if (sn > 0) blend(lit ? C.snow : C.snowD, sn);\n  };\n  // Firs on a jittered grid of cells three wide and four tall, the nearest in front.\n  const tree = (px, py) => {\n    const cx = floor(px / 3), cy = floor(py / 4);\n    let best = -1, tx = 0, ty = 0, th = 0;\n    for (let j = 0; j \u003c 3; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const X = cx + i, Y = cy - j, ax = (X + 0.2 + 0.6 * hash(X, Y)) * 3, ay = (Y + hash(Y, X + 7)) * 4, hh = 4 + 3 * hash(X + 3, Y);\n        if (py \u003c ay || py > ay + hh || abs(px - ax) > (py - ay) * 0.45 + 0.35 || ay + hh \u003c= best) continue;\n        const [ra, rd] = ad(ax, ay + hh);\n        if (!face(ra, rd) || inBed(ra, rd) || ay + hh \u003c tl(ax) || ay + hh > QY - 6) continue;\n        (best = ay + hh), (tx = ax), (ty = ay), (th = hh);\n      }\n    if (best \u003c 0) return 0;\n    setc(px \u003c tx ? C.trL : C.trD, 0.85 + 0.3 * hash(floor(tx), floor(ty)));\n    if (ty + th \u003c snl + 6 * (hash(floor(tx), 3) - 0.5) && py - ty \u003c th * 0.55) blend(C.snow, 0.75);\n    return 1;\n  };\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = y * W + x, px = x + 0.5, py = y + 0.5, [a, d] = ad(px, py);\n      S.A[k] = a; S.D[k] = d; S.SK[k] = 0;\n      // Sky: blue overhead going lavender lower down, with a peach glow behind the far peaks in the west.\n      const t = py / 104, s = t \u003c 0.4 ? 0 : t \u003c 0.76 ? 1 : 2, ft = s ? (t - [0, 0.4, 0.76][s]) / (s > 1 ? 0.24 : 0.36) : t / 0.4;\n      const sa = [C.s0, C.s1, C.s2][s], sb = [C.s1, C.s2, C.s3][s];\n      for (let c = 0; c \u003c 3; c++) o[c] = mix(sa[c], sb[c], sm(0, 1, ft));\n      blend(C.s3, 0.35 * exp(-max(0, 100 - py) / 18) * (1 - px / 90));\n      let sky = 1;\n      if (py >= f1(px)) {\n        // The far range in haze, snow on the peaks that stand highest.\n        const top = f1(px), lit = f1(px + 1) >= f1(px - 1);\n        setc(C.far); blend(C.haze, cl((py - top) / 28, 0, 0.8));\n        const sd = sm(0.5, 0.62, 0.55 * vn(px * 0.7, py * 0.3) + 0.45 * vn(px * 1.6, py * 0.8) + (54 - py) / 14 + k4 * 0.5);\n        if (sd > 0) blend(lit ? C.fsn : C.fsd, sd);\n        sky = 0;\n      }\n      if (py >= f2(px)) {\n        setc(C.far2, 0.85 + 0.25 * vn(px * 0.6, py * 0.6));\n        blend(C.haze, cl((py - f2(px)) / 30, 0, 0.35));\n        if (k4 > 0.3 && py \u003c f2(px) + 3 * k4 + 1) blend(C.snowD, 0.6 * k4);\n        sky = 0;\n      }\n      if (py >= pk(px)) (sky = 0), rock(px, py, px \u003c G.px ? 1 : -1);\n      if (face(a, d) && py \u003c QY) {\n        sky = 0;\n        if (py \u003c tl(px)) rock(px, py, d \u003c 2 || vn(px * 0.2, py * 0.2) > 0.5 ? 1 : -1);\n        else if (!tree(px, py)) setc(C.und, 0.8 + 0.4 * hash(x, y)), blend(C.snowD, 0.75 * sm(4, -4, py - snl + 6 * vn(px * 0.3, py * 0.1)));\n      } else if (py \u003c QY && py > 30 && d > -dg(a) - 8 && tree(px, py)) sky = 0;\n      S.SK[k] = sky;\n      if (BARE) setc(o, 0);\n      // The track bed: gravel, sleepers, two rails a track, rollers between them.\n      if (inBed(a, d)) {\n        const of = G.WL * bump(G, a), best = min(abs(d - of), abs(d + of));\n        setc(C.bed, 0.94 + 0.12 * hash(x * 7, y * 3));\n        if (best \u003c 2.2 && (a / 2.4) % 1 \u003c 0.4) blend(C.slp, 0.4);\n        if (best \u003c 0.6 && (a / 6) % 1 \u003c 0.2) setc(C.rail, 0.35);\n        if (abs(abs(d - of) - 1.8) \u003c 0.56 || abs(abs(d + of) - 1.8) \u003c 0.56) setc(C.rail, 0.9 + 0.1 * hash(x, y));\n        S.tk[ntk++] = k;\n      }\n      bg[k * 3] = o[0]; bg[k * 3 + 1] = o[1]; bg[k * 3 + 2] = o[2];\n    }\n  S.ntk = ntk;\n  const put = (x, y, c, t = 1, m = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    for (let i = 0, k = (y * W + x) * 3; i \u003c 3; i++) bg[k + i] = mix(bg[k + i], c[i] * m, t);\n  };\n  const glow = (x, y, s) => {\n    for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) put(x + i, y + j, LAMP, s * exp(-(i * i + j * j) / 1.44));\n    put(x, y, LAMP);\n  };\n  // A crescent moon once it is dark.\n  const mo = sm(0.45, 0.85, k1);\n  if (mo > 0 && !BARE)\n    for (let y = 6; y \u003c 22; y++)\n      for (let x = 6; x \u003c 22; x++) {\n        const r1 = hypot(x + 0.5 - 14, y + 0.5 - 13), m = cl(4.3 - r1, 0, 1) * cl(hypot(x + 0.5 - 16.2, y + 0.5 - 11.8) - 3.6, 0, 1);\n        if (!S.SK[y * W + x]) continue;\n        if (m > 0) put(x, y, [236, 230, 196], m * mo);\n        else if (r1 \u003c 10) put(x, y, [70, 76, 110], 0.5 * mo * exp(-(r1 - 4) / 2.5));\n      }\n\n  // The town, the back row stopping short of the valley station.\n  const town = (front) => {\n    if (BARE) return;\n    for (const h of S.houses) {\n      if ((h.b === QY - 1) !== front || (h.x + h.w > G.xA - 9 && h.x \u003c (front ? G.xA - 1 : G.xA + (G.Lca + 6) * G.ux))) continue;\n      const base = h.b, top = base - h.h, m = amb * (front ? 0.88 : 0.7), sn = snl > base - 3;\n      for (let x = h.x; x \u003c min(W, h.x + h.w); x++) {\n        for (let y = top; y \u003c= base; y++) put(x, y, HOUSE[h.c], 1, m * (x === h.x + h.w - 1 ? 0.72 : 1));\n        const rr = h.gab ? h.w / 2 + 0.5 - abs(x + 0.5 - (h.x + h.w / 2)) : 1;\n        for (let y = floor(top - rr); y \u003c top; y++) put(x, y, sn ? C.snow : h.c & 1 ? TILE : [64, 68, 88], 1, sn ? 1 : m);\n      }\n      if (h.ch) {\n        for (let y = top - 9; y \u003c top - 2; y++) for (let i = -1; i \u003c 2; i++) (!i || y > top - 6) && put(h.x + 2 + i, y, C.roof, 1, 1.4);\n        put(h.x + 2, top + 2, [250, 236, 190], 1, 0.9);\n      }\n      for (let wy = base - 2; wy > top + 1 + (h.ch ? 3 : 0); wy -= 3)\n        for (let wx = h.x + 1; wx \u003c h.x + h.w - 1; wx += 2) if (S.nw \u003c 900) (S.win[S.nw] = wy * W + wx), (S.wth[S.nw++] = hash(wx, wy)), put(wx, wy, [30, 24, 30], 1, amb + 0.3);\n    }\n  };\n  town(false);\n  // Stations: a tiled roof on pillars over the platform where a car stands, lit underneath.\n  const yT = (px) => YA - (px - G.xA) * G.tp;\n  const shed = (a0, a1) => {\n    const x0 = floor(G.xA + a0 * G.ux), x1 = ceil(G.xA + a1 * G.ux);\n    for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n      const px = x + 0.5, ac = (px - G.xA) / G.ux, ty = yT(px), end = x === x0 || x === x1 || x === round((x0 + x1) / 2);\n      if (ac \u003c a0 || ac > a1) continue;\n      for (let y = floor(ty - G.VR - 4); y \u003c= ceil(ty + 6); y++) {\n        const v = ty - (y + 0.5);\n        if (v > G.VR && v \u003c= G.VR + 3.4) v > G.VR + 2.3 ? put(x, y, y \u003c snl ? C.snow : [150, 76, 58], 1, y \u003c snl ? 1.1 : amb) : put(x, y, [118, 54, 42], 1, amb * (v > G.VR + 1.2 ? 1 : 0.55));\n        else if (v > 0.6 && v \u003c= G.VR) end ? put(x, y, [46, 42, 46]) : put(x, y, LAMP, 0.06 + 0.3 * exp(-(G.VR - v) / 4));\n        else if (v \u003c= 0.6 && v > -5.5 && !inBed(...ad(px, y + 0.5))) put(x, y, y % 3 ? C.conc : C.roof), put(x, y, LAMP, 0.18 + 0.12 * k1);\n      }\n    }\n    for (const f of [0.3, 0.72]) {\n      const px = G.xA + mix(a0, a1, f) * G.ux;\n      glow(floor(px), floor(yT(px) - G.VR + 1), 0.3 + 0.3 * k1);\n    }\n  };\n  shed(-2.5, G.Lca + 4.5);\n  shed(G.L - G.Lca - 4.5, G.L + 1.5);\n  // The valley station hall left of the track, an arched window over a lit door on the quay.\n  const vx0 = max(0, floor(G.xA - 9)), vx1 = floor(G.xA) - 1, vy0 = YA - 12, vc = (vx1 + 1 + max(vx0, G.xA - 9)) / 2;\n  for (let x = vx0; x \u003c= vx1; x++) {\n    for (let y = vy0; y \u003c QY; y++) put(x, y, HOUSE[0], 1, amb * (x === vx1 ? 0.7 : 0.95));\n    for (let y = floor(vy0 - 5.5 + abs(x + 0.5 - vc) * 1.2); y \u003c vy0; y++) put(x, y, y \u003c snl ? C.snow : TILE, 1, y \u003c snl ? 1 : amb);\n  }\n  for (let y = vy0 + 2; y \u003c QY; y++)\n    for (let x = floor(vc - 1.5); x \u003c vc + 1.5; x++)\n      if (y \u003c vy0 + 9 ? y > vy0 + 2 || abs(x + 0.5 - vc) \u003c 1 : y >= QY - 4 && abs(x + 0.5 - vc) \u003c 1) put(x, y, WARM, 0.92, mix(0.85, 1, k1));\n  town(true);\n\n  // The engine house on the summit, with the bullwheel behind its lit round window.\n  const ex0 = floor(G.wx - 8), ey0 = floor(G.wy - 8);\n  for (let y = ey0 - 6; y \u003c= G.wy + 8; y++)\n    for (let x = ex0; x \u003c W; x++) {\n      const rh = y - (ey0 - 6 + abs(x + 0.5 - G.wx) * 0.62), r = hypot(x + 0.5 - G.wx, y + 0.5 - G.wy);\n      if (r \u003c R + 1.2) put(x, y, [255, 200, 120], 1, mix(0.9, 1, k1) * (1 - 0.15 * r / R));\n      else if (y \u003c ey0) rh >= 0 && put(x, y, k4 > 0.05 && rh \u003c 1.2 ? C.snow : C.roof, 1, 1.2);\n      else put(x, y, C.stone, 1, (0.85 + 0.15 * (((y >> 1) + (x >> 2)) & 1)) * (x === ex0 ? 0.6 : 1));\n    }\n  // Lamps on posts beside the line, every nine steps.\n  for (let a = 7; a \u003c G.L - 6; a += 9) {\n    const of = G.WL * bump(G, a) + 5.6, lx = floor(G.xA + a * G.ux + of * G.nx), ly = floor(YA + a * G.uy + of * G.ny);\n    put(lx, ly + 1, DK), put(lx, ly + 2, DK), S.lamp.push(lx, ly, a);\n  }\n  if (!BARE)\n    for (let x = 0; x \u003c W; x++) {\n      put(x, QY, C.stone, 1, 0.8);\n      if (x % 8 === 4) put(x, QY - 1, DK), put(x, QY - 2, DK), glow(x, QY - 3, 0.12 + 0.25 * k1);\n    }\n}\n\n// Along a run the cars speed up for the first seventh and slow down for the last.\nfunction prof(t) {\n  const ta = 0.14, v = 1 / (1 - ta);\n  return t \u003c ta ? (v * t * t) / (2 * ta) : t \u003c 1 - ta ? v * (t - ta / 2) : 1 - (v * (1 - t) * (1 - t)) / (2 * ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues, h = min(dt, 0.1), sp = cl(kv[1], 0.2, 3) / 2, bp = input.btnPressed;\n  const k1 = cl(kv[0], 0, 1), g = cl(kv[2], 0, 1), k4 = cl(kv[3], 0, 1);\n  if (abs(k1 - S.k1) > 0.003 || abs(g - S.g) > 0.003 || abs(k4 - S.k4) > 0.003) build(S, k1, g, k4);\n  if (bp[0]) S.run ? (S.flash = 1) : (S.tm = min(S.tm, 0.8));\n  if (bp[1]) (S.lampsOn = 1 - S.lampsOn), (S.lampF = -10);\n  S.lampF += h * 40;\n  S.cx += h * sp * 3.6;\n  S.flash = max(0, S.flash - h);\n  S.t += h * sp;\n  const was = S.pa;\n  if (!S.run) {\n    S.tm -= h * sp * 2;\n    if (S.tm \u003c= 0) (S.run = 1), (S.tm = 0);\n  } else {\n    S.tm = min(1, S.tm + (h * sp * 2) / RUN);\n    S.pa = S.dir > 0 ? prof(S.tm) : 1 - prof(S.tm);\n    if (S.tm >= 1) (S.run = 0), (S.tm = DWELL), (S.dir = -S.dir);\n  }\n  S.wh += ((S.pa - was) * (S.G.aHi - S.G.aLo)) / R;\n  for (const q of S.fl) {\n    q.y += h * (6 + 12 * q.z) * q.v;\n    q.x = (q.x + h * (2.5 * sin(S.t * 0.7 + q.ph) - 1.5) + W) % W;\n    if (q.y > H) (q.y -= H + 2), (q.x = rnd() * W);\n  }\n}\n\nfunction drawCar(S, f, ac, side, liv, up, k1) {\n  const G = S.G, o = side * G.WL * bump(G, ac), Px = G.xA + ac * G.ux + o * G.nx, Py = YA + ac * G.uy + o * G.ny;\n  const x0 = round(Px - 5), ay = round(Py - (x0 + 5 - Px) * G.tp), hb = G.hb, lm = mix(1, 0.5, k1), fl = S.flash > 0 && (S.flash * 6) % 1 \u003c 0.5;\n  for (let c = 0; c \u003c 10; c++) {\n    const x = x0 + c, glass = c % 3 && c \u003c 9, b = c > 8 ? 2 : floor(c / 3);\n    if (x \u003c 0 || x >= W) continue;\n    for (let r = G.ct[c]; r \u003c= G.cr[c]; r++) {\n      const y = ay + r, rr = r - G.ct[c], q = (y * W + x) * 3;\n      if (y \u003c 0 || y >= H) continue;\n      let [cr, cg, cb] = liv, m = lm;\n      if (r === G.cr[c]) (cr = cg = cb = c === 1 || c === 8 ? 20 : 68);\n      else if (r > G.cf[c]) m *= 0.62;\n      else if (rr === 0) (cr = 210), (cg = 206), (cb = 196);\n      else if (rr === hb - 3) {\n        (cr = 228), (cg = 214), (cb = 180);\n        if (c === (up ? 9 : 0)) (cr = 255), (cg = 250), (cb = fl ? 120 : 220), (m = 1);\n        if (c === (up ? 0 : 9)) (cr = 255), (cg = 30), (cb = 20), (m = 1);\n      } else if (glass && rr >= 2 && rr \u003c= hb - 4) {\n        // Lit windows, a passenger's head and shoulders in some.\n        const head = rr >= hb - 5 && c % 3 === 1 + (hash(b, liv[2]) \u003c 0.5) && hash(b * 3, liv[2]) \u003c 0.7;\n        (cr = head ? 60 : 255), (cg = head ? 40 : 214), (cb = head ? 36 : 150), (m = 1);\n      }\n      f[q] = cr * m; f[q + 1] = cg * m; f[q + 2] = cb * m;\n    }\n  }\n  // The headlamp's beam on the track ahead.\n  const dr = up ? 1 : -1, ae = ac + (dr * G.Lca) / 2, bs = mix(0.16, 0.36, k1) * (fl ? 2.5 : 1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], s = (S.A[k] - ae) * dr, w = abs(S.D[k] - side * G.WL * bump(G, S.A[k])) - 0.8 - s * 0.08, e = bs * (1 - s / 15) ** 2 * cl(1 - w, 0, 1);\n    if (s >= 0 && s \u003c 15) (f[k * 3] += 255 * e), (f[k * 3 + 1] += 236 * e), (f[k * 3 + 2] += 190 * e);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S.G) build(S, 0, 0, 0.06);\n  const G = S.G, f = S.f, k1 = S.k1, k4 = S.k4, t = S.t, C = S.c;\n  f.set(S.bg);\n  if (!BARE) {\n    // Stars come out as it gets dark; the evening star is there from the start.\n    const sv = sm(0.1, 0.7, k1);\n    for (const s of S.stars) {\n      const k = s.y * W + s.x, e = sv * s.b * (0.7 + 0.3 * sin(time * (2 + s.ph / 3) + s.ph)) * (1 - s.y / 130);\n      if (S.SK[k]) (f[k * 3] += 220 * e), (f[k * 3 + 1] += 224 * e), (f[k * 3 + 2] += 240 * e);\n    }\n    // Two bands of cloud drifting east, lit underneath while the glow lasts.\n    const ox = floor(S.cx), fx = S.cx - ox;\n    for (let y = 2; y \u003c 62; y++) {\n      const band = exp(-(((y - 12) / 7) ** 2)) + 0.9 * exp(-(((y - 38) / 8) ** 2)), i0 = y * 128;\n      for (let x = 0; x \u003c W; x++) {\n        if (!S.SK[y * W + x] || band \u003c 0.05) continue;\n        const d0 = mix(S.cl[i0 + ((x - ox) & 127)], S.cl[i0 + ((x - ox - 1) & 127)], fx), d1 = S.cl[min(63, y + 2) * 128 + ((x - ox) & 127)];\n        const e = sm(0.44, 0.68, d0 * 0.8 + band * 0.44 - 0.1) * 0.9, lit = cl(0.45 + (d0 - d1) * 3 + (y - 30) / 60, 0, 1), q = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) f[q + c] = mix(f[q + c], mix(C.cHi[c], C.cLo[c], lit), e);\n      }\n    }\n    const vk = (52 * W + 11) * 3;\n    if (S.SK[vk / 3]) (f[vk] += 255), (f[vk + 1] += 246), (f[vk + 2] += 220);\n    // Windows in town: more lit as night comes, now and then one going on or off.\n    const pl = mix(0.42, 0.86, k1);\n    for (let i = 0; i \u003c S.nw; i++) {\n      const th = S.wth[i], k = S.win[i] * 3, m = 0.8 + 0.2 * hash(i, 9);\n      if (th \u003c pl + 0.05 * sin(t * 0.4 + th * 60)) (f[k] = WARM[0] * m), (f[k + 1] = WARM[1] * m), (f[k + 2] = WARM[2] * m);\n    }\n  }\n  // Lamps along the line.\n  for (let i = 0; i \u003c S.lamp.length; i += 3) {\n    const [x, y, a] = S.lamp.slice(i, i + 3), e = mix(0.55, 1, k1) * (S.lampsOn ? cl((S.lampF - a) / 4, 0, 1) : 1 - cl((S.lampF - G.L + a) / 4, 0, 1));\n    for (let j = -2; j \u003c= 2; j++)\n      for (let ii = -2, q = ((y + j) * W + x - 2) * 3; ii \u003c= 2; ii++, q += 3) {\n        const g = j || ii ? e * 0.35 * mix(0.3, 1, k1) * exp(-(ii * ii + j * j) / 2) : e;\n        if (x + ii >= 0 && x + ii \u003c W) for (let c = 0; c \u003c 3; c++) f[q + c] += LAMP[c] * g;\n      }\n  }\n  // The cable: a strand from each car up to the bullwheel, its lay sliding with it.\n  const aA = mix(G.aLo, G.aHi, S.pa), aB = G.aLo + G.aHi - aA, lm = mix(1, 0.55, k1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], a = S.A[k], d = S.D[k], of = G.WL * bump(G, a);\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const ac = s \u003c 0 ? aA : aB;\n      if (a \u003c ac + G.Lca / 2 - 0.5 || a > G.L + 2 || abs(d - s * of - s * 0.25) >= 0.55) continue;\n      const tx = (0.5 + 0.5 * cos((TAU * (a - ac)) / 3)) ** 2;\n      for (let c = 0; c \u003c 3; c++) f[k * 3 + c] = mix([78, 72, 70][c], STEEL[c], tx) * lm;\n      break;\n    }\n  }\n  // The cars: red on the upper track of the loop, blue on the lower.\n  const upA = S.run ? S.dir > 0 : S.dir \u003c 0;\n  drawCar(S, f, aA, -1, LIV[0], upA, k1);\n  drawCar(S, f, aB, 1, LIV[1], !upA, k1);\n  // The bullwheel turning behind the round window, six spokes on a hub.\n  for (let y = floor(G.wy - R - 1); y \u003c= G.wy + R + 1; y++)\n    for (let x = floor(G.wx - R - 1); x \u003c= min(W - 1, G.wx + R + 1); x++) {\n      const dx = x + 0.5 - G.wx, dy = y + 0.5 - G.wy, r = hypot(dx, dy), an = atan2(dy, dx) - S.wh;\n      const m = ((an % (PI / 3)) + PI / 3) % (PI / 3), sd = r * sin(min(m, PI / 3 - m));\n      if (r \u003c= R + 0.6 && (abs(r - R + 0.7) \u003c 0.75 || (r \u003c R - 1 && sd \u003c 0.5) || r \u003c 1.4)) f.set([34, 28, 30], (y * W + x) * 3);\n    }\n  // The lake: the quay and the town upside down, rippling.\n  if (!BARE)\n    for (let y = QY + 1; y \u003c H; y++) {\n      const dy = y - QY, sh = round(0.8 * sin(t * 0.9 + y * 1.3)), m = (0.95 - dy * 0.08) / 255;\n      for (let x = 0; x \u003c W; x++) for (let c = 0, q = (y * W + x) * 3, p = ((QY - dy) * W + cl(x + sh, 0, W - 1)) * 3; c \u003c 3; c++) f[q + c] = C.lake[c] * (1 + (y & 1) * 0.2) + f[p + c] ** 2 * m;\n    }\n  // Falling snow.\n  const nf = floor(cl((k4 - 0.1) / 0.9, 0, 1) * 260), sc = mix(235, 120, k1);\n  for (let i = 0; i \u003c nf; i++) {\n    const q0 = S.fl[i], q = (floor(q0.y) * W + floor(q0.x)) * 3, e = 0.45 + 0.55 * q0.z;\n    if (q0.y >= 0 && q0.y \u003c H) (f[q] = mix(f[q], sc, e)), (f[q + 1] = mix(f[q + 1], sc, e)), (f[q + 2] = mix(f[q + 2], sc * 1.06, e));\n  }\n  for (let k = 0, j = 0; k \u003c N; k++, j += 3) display.setPixel(k & 63, k >> 6, cl(f[j], 0, 255) | 0, cl(f[j + 1], 0, 255) | 0, cl(f[j + 2], 0, 255) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower."},{"name":"Grade","min":0,"max":1,"about":"How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher."},{"name":"Snow","min":0,"max":1,"about":"A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel."}],"start":[0,2,0,0.06],"measures":{"motion":0.0963,"detail":0.0901,"edges":0.4693,"complexity":1.617,"coverage":0.9811,"colour":0.2158,"drift":0.0259},"knobResponse":[0.2342,0.0427,0.0962,0.1569]},{"slug":"galilean-moons","title":"Galilean Moons","family":"celestial","round":22,"note":"목성의 네 위성을 관측 도표로 그려요. 위쪽 접안렌즈에서는 줄무늬 목성이 돌고 이오의 그림자가 원반을 지나가며, 아래 도표에서는 위성마다 제 사인 곡선을 그리며 날짜가 위로 올라와요.","idea":"Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.","buttons":"K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.","code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","layer":{"id":"layer-galilean-moons","type":"code","name":"galilean-moons","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sky","min":0,"max":1,"about":"The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1."},{"name":"Speed","min":0.5,"max":24,"about":"Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second."},{"name":"Power","min":0,"max":1,"about":"The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits."},{"name":"Seeing","min":0,"max":1,"about":"Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0779,"detail":0.0747,"edges":0.5632,"complexity":0.743,"coverage":0.7778,"colour":0.1926,"drift":0.0306},"knobResponse":[0.5122,0.1178,0.1493,0.0539]},{"slug":"galton","title":"Galton Board","family":"data","round":2,"note":"깔때기에서 떨어진 공이 못마다 동전 던지듯 왼쪽이나 오른쪽으로 튀어 칸에 쌓이고, 종 모양이 서요. 칸 색은 가운데에서 표준편차 몇 개만큼 떨어졌는지를 보여 줘요.","idea":"Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.","buttons":"K1 tap opens the floor, the bins drain and the hopper fills again.","code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-galton","type":"code","name":"galton","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart."},{"name":"Rate","min":30,"max":240,"about":"Balls let through the neck each second, from a trickle to a pour."},{"name":"Bias","min":-0.3,"max":0.3,"about":"The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight."},{"name":"Rows","min":8,"max":15,"about":"Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins."}],"start":[0,30,0,8],"measures":{"motion":0.2909,"detail":0.0577,"edges":0.7232,"complexity":0.5234,"coverage":0.2361,"colour":0.1843,"drift":0.0246},"knobResponse":[0.0536,0.0477,0.0979,0.0715]},{"slug":"gaussian-moat","title":"Gaussian Moat","family":"number","round":31,"note":"LED 하나가 가우스 정수 하나라 가우스 소수가 옅은 점으로 깔리고, 1 + i 에서 걸음 √k 안의 소수로만 번지는 물길이 산호처럼 가지를 쳐요. 물길이 해자에 막히면 기슭이 깜박이고 k 가 커져 건너가요. K1 을 누르면 k 를 바로 한 칸 올려요.","idea":"Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.","buttons":"K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.","code":"// ===== Patternflow pattern =====\n// Title:   Gaussian Moat\n// Family:  number\n// Idea:    Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Gaussian moat problem (Basil Gordon, 1962), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1\n//\n// Knob 1: Hue. Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots.\n// Knob 2: Speed. At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower.\n// Knob 3: Step. The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go.\n// Knob 4: Reach. Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back.\n// Buttons: K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, abs, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The squared lengths a step between two Gaussian integers can have: the\n// sums of two squares, 1 left out since no two odd primes sit 1 apart.\nconst KS = [];\nfor (let n = 2; n \u003c= 50; n++) {\n  let ok = false;\n  for (let a = 0; a * a \u003c= n && !ok; a++) {\n    const b = Math.round(sqrt(n - a * a));\n    if (a * a + b * b === n) ok = true;\n  }\n  if (ok) KS.push(n);\n}\nconst KMAX = 50;\n\n// Every offset with dx^2 + dy^2 \u003c= 50, nearest first. A flood with step k\n// scans the first NK[k] of them; the moat line reads the first R49.\nconst OD = [];\nfor (let dy = -7; dy \u003c= 7; dy++)\n  for (let dx = -7; dx \u003c= 7; dx++) {\n    const d = dx * dx + dy * dy;\n    if (d \u003c= KMAX) OD.push([d, dx, dy]);\n  }\nOD.sort((p, q) => p[0] - q[0] || p[2] - q[2] || p[1] - q[1]);\nconst ODX = new Int8Array(OD.length), ODY = new Int8Array(OD.length), ODD = new Uint8Array(OD.length);\nOD.forEach((o, i) => {\n  ODD[i] = o[0];\n  ODX[i] = o[1];\n  ODY[i] = o[2];\n});\nconst NK = new Uint16Array(KMAX + 1);\nfor (let k = 0; k \u003c= KMAX; k++) {\n  let n = 0;\n  while (n \u003c OD.length && ODD[n] \u003c= k) n++;\n  NK[k] = n;\n}\nlet R49 = 0;\nwhile (R49 \u003c OD.length && ODD[R49] \u003c= 49) R49++;\n\n// Rational primes up to 7300 by a sieve, enough to test norms up to\n// 2 * 5072^2 by trial division, the far corner at Reach 1 plus the cycle.\nconst SP = [];\n{\n  const M = 7300, c = new Uint8Array(M + 1);\n  for (let i = 2; i \u003c= M; i++) {\n    if (c[i]) continue;\n    SP.push(i);\n    for (let j = i * i; j \u003c= M; j += i) c[j] = 1;\n  }\n}\nfunction isPrime(n) {\n  if (n \u003c 2) return false;\n  for (let i = 0; i \u003c SP.length; i++) {\n    const p = SP[i];\n    if (p * p > n) return true;\n    if (n % p === 0) return n === p;\n  }\n  return true;\n}\n// a + bi with a, b >= 0 is a Gaussian prime when its norm is a prime, or when\n// it lies on an axis and is a prime of the form 4n + 3.\nfunction gaussPrime(a, b) {\n  if (a === 0) return b % 4 === 3 && isPrime(b);\n  if (b === 0) return a % 4 === 3 && isPrime(a);\n  return isPrime(a * a + b * b);\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\n// Reach: the corner stays at the origin up to 0.1, then moves out along the\n// diagonal from 8 + 8i to 4800 + 4800i on a log scale. Each restart adds the\n// next of CYCLE, so the window wanders out where primes thin and comes back.\nconst reachOf = (u) => (u \u003c= 0.1 ? 0 : Math.round(8 * 600 ** ((u - 0.1) / 0.9)));\nconst CYCLE = [0, 24, 140];\n// The first k for a Step: the largest step length squared that fits.\nfunction firstK(step) {\n  let k = KS[0];\n  for (const q of KS) if (q \u003c= step * step + 1e-9) k = q;\n  return k;\n}\nconst nextK = (k) => {\n  for (const q of KS) if (q > k) return q;\n  return KMAX + 1;\n};\n\nconst DMAX = 1024;\n\nexport function setup(params) {\n  params.s = {\n    pr: new Uint8Array(N), dep: new Int16Array(N), par: new Int32Array(N), q: new Int32Array(N), born: new Float32Array(N),\n    ea: new Float32Array(N), ed: new Uint16Array(N), wa: new Float32Array(N), wash: new Float32Array(3), moat: new Float32Array(N), shore: [], grow: [], tg: 0.3, sp: 2, hueK: 0, startT: -1,\n    nPrime: 0, qlen: 0, lastQ: 0, plen: 1, head: 0, scan: 0, k: 2, k0: 2, off: -1, base: -1, stage: 0,\n    mode: 0, timer: 0, acc: 0, T: 0, fade: 1, moatA: 0,\n    hue: -1, pal: new Float32Array(DMAX * 3), dot: new Float32Array(3), buf: new Float32Array(N * 3),\n  };\n}\n\n// Lays out the window with its corner at off + off*i and seeds the flood at\n// the prime nearest the corner: 1 + i when the corner is the origin.\nfunction build(S, off) {\n  S.off = off;\n  S.nPrime = 0;\n  let seed = -1, best = 1e9;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, b = H - 1 - y, g = gaussPrime(x + off, b + off) ? 1 : 0;\n      S.pr[p] = g;\n      if (g) {\n        S.nPrime++;\n        const d = x * x + b * b;\n        if (d \u003c best) (best = d), (seed = p);\n      }\n    }\n  S.dep.fill(-1);\n  S.born.fill(-10);\n  S.ea.fill(0);\n  S.wa.fill(0);\n  S.moat.fill(0);\n  S.grow.length = 0;\n  S.shore = [];\n  S.qlen = 0;\n  S.head = 0;\n  S.scan = 0;\n  S.k = S.k0;\n  S.mode = 0;\n  S.timer = 0;\n  S.acc = 0;\n  S.moatA = 0;\n  S.lastQ = 0;\n  // A restart fades in over 0.6 s; the first window is there at once.\n  S.startT = S.T > 0 ? S.T : -1;\n  if (seed >= 0) {\n    S.dep[seed] = 0;\n    S.par[seed] = seed;\n    S.born[seed] = S.T;\n    S.q[S.qlen++] = seed;\n    soak(S, seed);\n  }\n}\n\n// The next prime the flood reaches: breadth first over the cluster, each\n// prime scanning its neighbours nearest first out to distance sqrt(k).\n// Only primes inside the window count, so a moat here is a moat of the\n// window: a prime just outside it could bridge one.\nfunction pull(S) {\n  const n = NK[min(S.k, KMAX)], pr = S.pr, dep = S.dep;\n  while (S.head \u003c S.qlen) {\n    const p = S.q[S.head], x = p & 63, y = p >> 6;\n    while (S.scan \u003c n) {\n      const i = S.scan++, X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        dep[c] = min(DMAX - 1, dep[p] + 1);\n        S.par[c] = p;\n        S.born[c] = S.T;\n        S.q[S.qlen++] = c;\n        return c;\n      }\n    }\n    S.head++;\n    S.scan = 0;\n  }\n  return -1;\n}\n\n// A segment a LED wide, soft at its sides, into the edge layer: each LED keeps\n// the strongest cover and the depth of the edge that gave it.\nfunction stamp(S, x0, y0, x1, y1, d, ea, ed) {\n  const vx = x1 - x0, vy = y1 - y0, L2 = vx * vx + vy * vy || 1;\n  const xa = max(0, floor(min(x0, x1)) - 1), xb = min(W - 1, Math.ceil(max(x0, x1)) + 1);\n  const ya = max(0, floor(min(y0, y1)) - 1), yb = min(H - 1, Math.ceil(max(y0, y1)) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const t = cl(((x - x0) * vx + (y - y0) * vy) / L2, 0, 1), ex = x0 + vx * t - x, ey = y0 + vy * t - y;\n      const a = 1 - sqrt(ex * ex + ey * ey) * 1.1;\n      if (a \u003c= 0) continue;\n      const p = y * W + x;\n      if (a > ea[p]) {\n        ea[p] = a;\n        if (ed) ed[p] = d;\n      }\n    }\n}\n\n// The ground the flood holds: a faint wash out to 2 LEDs round each reached\n// prime, so a moat shows as the dark band between the wash and the dots.\nfunction soak(S, p) {\n  const x0 = p & 63, y0 = p >> 6, wa = S.wa;\n  for (let dy = -2; dy \u003c= 2; dy++)\n    for (let dx = -2; dx \u003c= 2; dx++) {\n      const x = x0 + dx, y = y0 + dy;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const a = cl(1.15 - sqrt(dx * dx + dy * dy) * 0.38, 0, 1), q = y * W + x;\n      if (a > wa[q]) wa[q] = a;\n    }\n}\n\n// The flood has run out. The shore is every reached prime with an unreached\n// one within the next step; the moat line runs where the nearest reached\n// prime and the nearest unreached one are equally far.\nfunction meetMoat(S) {\n  const kn = min(nextK(S.k), KMAX), nk = NK[kn], pr = S.pr, dep = S.dep;\n  S.shore = [];\n  for (let h = 0; h \u003c S.qlen; h++) {\n    const p = S.q[h], x = p & 63, y = p >> 6;\n    for (let i = 1; i \u003c nk; i++) {\n      const X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        S.shore.push(p);\n        break;\n      }\n    }\n  }\n  const m = S.moat;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let dr = -1, du = -1;\n      for (let i = 0; i \u003c R49 && (dr \u003c 0 || du \u003c 0); i++) {\n        const X = x + ODX[i], Y = y + ODY[i];\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const c = Y * W + X;\n        if (!pr[c]) continue;\n        if (dep[c] >= 0) {\n          if (dr \u003c 0) dr = ODD[i];\n        } else if (du \u003c 0) du = ODD[i];\n      }\n      m[y * W + x] = dr > 0 && du > 0 ? max(0, 1 - abs(sqrt(dr) - sqrt(du)) * 0.8) : 0;\n    }\n  // A step that crossed nothing pulses for a third as long, so a prime\n  // trapped in a corner runs through its empty steps quickly.\n  S.plen = S.qlen > S.lastQ ? 1 : 0.35;\n  S.lastQ = S.qlen;\n}\n\nfunction raise(S) {\n  S.k = nextK(S.k);\n  S.head = 0;\n  S.scan = 0;\n  S.mode = S.k > KMAX ? 2 : 0;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 1.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(kv[1], 0.2, 3), k0 = firstK(cl(kv[2], 1.5, 4.5)), base = reachOf(cl(kv[3], 0, 1));\n  S.T += d;\n  S.hueK = kv[0] || 0;\n  if (base !== S.base) {\n    S.base = base;\n    S.stage = 0;\n    S.k0 = k0;\n    build(S, base);\n  } else if (k0 !== S.k0) {\n    // A longer first step carries on from here; a shorter one starts over.\n    const up = k0 > S.k0;\n    S.k0 = k0;\n    if (!up) build(S, S.off);\n    else if (S.mode \u003c 2 && k0 > S.k) {\n      S.k = k0;\n      S.head = 0;\n      S.scan = 0;\n      S.mode = 0;\n    }\n  }\n  const b = input.btnPressed || [];\n  if (b[0] && S.mode \u003c 2) raise(S);\n\n  // Each new edge grows from its parent for 0.3 s at Speed 2.\n  const tg = 0.6 / sp;\n  for (let i = S.grow.length - 1; i >= 0; i--) {\n    const c = S.grow[i];\n    if (S.T - S.born[c] >= tg) {\n      const p = S.par[c];\n      stamp(S, p & 63, p >> 6, c & 63, c >> 6, S.dep[c], S.ea, S.ed);\n      soak(S, c);\n      S.grow[i] = S.grow[S.grow.length - 1];\n      S.grow.pop();\n    }\n  }\n  S.tg = tg;\n\n  if (S.mode === 0) {\n    // A few dozen primes a second, more as the frontier (the primes queued\n    // but not yet scanned) widens: 56 a second at Speed 2 near 1 + i.\n    S.acc += d * sp * min(90, 28 + (S.qlen - S.head));\n    while (S.acc >= 1) {\n      S.acc -= 1;\n      const c = pull(S);\n      if (c >= 0) {\n        S.grow.push(c);\n        continue;\n      }\n      S.acc = 0;\n      if (S.qlen >= S.nPrime) {\n        S.mode = 2;\n        S.timer = 0;\n      } else {\n        meetMoat(S);\n        S.mode = 1;\n        S.timer = 0;\n      }\n      break;\n    }\n  } else if (S.mode === 1) {\n    // The moat: 0.7 s at Speed 2 of the shore pulsing, then k goes up.\n    S.timer += (d * sp * 0.72) / S.plen;\n    if (S.timer >= 1) raise(S);\n  } else {\n    // Filled: the coral holds for 3 s, fades for 1.5 s, and the next window\n    // in the cycle starts.\n    S.timer += d * sp * 0.5;\n    if (S.timer >= 4.5) {\n      S.stage = (S.stage + 1) % CYCLE.length;\n      build(S, S.base + CYCLE[S.stage]);\n    }\n  }\n  S.fade = S.mode === 2 ? cl((4.5 - S.timer) / 1.5, 0, 1) : cl((S.T - S.startT) / 0.6, 0, 1);\n  S.moatA = S.mode === 1 ? sin(PI * S.timer) : max(0, S.moatA - d * sp * 1.2);\n  S.sp = sp;\n}\n\n// Colours by depth: the hue runs out and back along a band of the wheel\n// every 72 steps of depth, so each breadth-first layer reads as a ring.\nfunction palette(S) {\n  const h0 = S.hueK + 0.13;\n  for (let i = 0; i \u003c DMAX; i++) {\n    let u = (i % 72) / 36;\n    if (u > 1) u = 2 - u;\n    hsv(h0 + 0.42 * u * u * (3 - 2 * u), 0.78, 1, S.pal, i * 3);\n  }\n  hsv(h0 + 0.5, 0.6, 0.3, S.dot, 0);\n  hsv(h0 + 0.47, 0.9, 0.26, S.wash, 0);\n  S.hue = S.hueK;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.hue !== S.hueK) palette(S);\n  const buf = S.buf, pal = S.pal, dot = S.dot, pr = S.pr, dep = S.dep, ea = S.ea, ed = S.ed, wa = S.wa, wash = S.wash, born = S.born, T = S.T;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const w = wa[p];\n    let r = wash[0] * w, g = wash[1] * w, b = wash[2] * w;\n    const a = ea[p];\n    if (a > 0) {\n      const c = ed[p] * 3, v = a * 0.62;\n      r = max(r, pal[c] * v);\n      g = max(g, pal[c + 1] * v);\n      b = max(b, pal[c + 2] * v);\n    }\n    if (pr[p]) {\n      const dd = dep[p];\n      if (dd \u003c 0) {\n        r = max(r, dot[0]);\n        g = max(g, dot[1]);\n        b = max(b, dot[2]);\n      } else {\n        // A new node flashes white and settles into its colour.\n        const c = dd * 3, fl = cl(1 - (T - born[p]) * 2.5, 0, 1);\n        r = pal[c] + (255 - pal[c]) * fl;\n        g = pal[c + 1] + (255 - pal[c + 1]) * fl;\n        b = pal[c + 2] + (255 - pal[c + 2]) * fl;\n      }\n    }\n    buf[o] = r;\n    buf[o + 1] = g;\n    buf[o + 2] = b;\n  }\n  // Edges still growing, from the parent toward the new prime.\n  if (S.grow.length) {\n    const tmp = S.tmp || (S.tmp = new Float32Array(N));\n    for (const c of S.grow) {\n      const p = S.par[c], t = cl((T - born[c]) / S.tg, 0, 1), x0 = p & 63, y0 = p >> 6, x1 = c & 63, y1 = c >> 6;\n      const xe = x0 + (x1 - x0) * t, ye = y0 + (y1 - y0) * t;\n      stamp(S, x0, y0, xe, ye, 0, tmp, null);\n      const xa = max(0, min(x0, x1) - 1), xb = min(W - 1, max(x0, x1) + 1), ya = max(0, min(y0, y1) - 1), yb = min(H - 1, max(y0, y1) + 1);\n      const cc = dep[c] * 3;\n      for (let y = ya; y \u003c= yb; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const q = y * W + x, v = tmp[q] * 0.8;\n          if (v \u003c= 0) continue;\n          tmp[q] = 0;\n          const o = q * 3;\n          buf[o] = max(buf[o], pal[cc] * v + 60 * v);\n          buf[o + 1] = max(buf[o + 1], pal[cc + 1] * v + 60 * v);\n          buf[o + 2] = max(buf[o + 2], pal[cc + 2] * v + 60 * v);\n        }\n    }\n  }\n  // The moat: its middle line glows pale and the shore primes pulse white.\n  if (S.moatA > 0.01) {\n    const m = S.moat, A = S.moatA;\n    for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n      const v = m[p] * A * 0.9;\n      if (v \u003c= 0) continue;\n      buf[o] += (170 - buf[o]) * v;\n      buf[o + 1] += (215 - buf[o + 1]) * v;\n      buf[o + 2] += (255 - buf[o + 2]) * v;\n    }\n    const pulse = 0.5 + 0.5 * sin(T * S.sp * 9);\n    for (const p of S.shore) {\n      const x = p & 63, y = p >> 6;\n      for (let dy = -1; dy \u003c= 1; dy++)\n        for (let dx = -1; dx \u003c= 1; dx++) {\n          const X = x + dx, Y = y + dy;\n          if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n          const o = (Y * W + X) * 3, v = A * (dx || dy ? 0.35 * pulse : 0.5 + 0.5 * pulse);\n          buf[o] += (255 - buf[o]) * v;\n          buf[o + 1] += (255 - buf[o + 1]) * v;\n          buf[o + 2] += (255 - buf[o + 2]) * v;\n        }\n    }\n  }\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * f, buf[p + 1] * f, buf[p + 2] * f);\n}\n","layer":{"id":"layer-gaussian-moat","type":"code","name":"gaussian-moat","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gaussian Moat\n// Family:  number\n// Idea:    Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Gaussian moat problem (Basil Gordon, 1962), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1\n//\n// Knob 1: Hue. Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots.\n// Knob 2: Speed. At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower.\n// Knob 3: Step. The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go.\n// Knob 4: Reach. Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back.\n// Buttons: K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, abs, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The squared lengths a step between two Gaussian integers can have: the\n// sums of two squares, 1 left out since no two odd primes sit 1 apart.\nconst KS = [];\nfor (let n = 2; n \u003c= 50; n++) {\n  let ok = false;\n  for (let a = 0; a * a \u003c= n && !ok; a++) {\n    const b = Math.round(sqrt(n - a * a));\n    if (a * a + b * b === n) ok = true;\n  }\n  if (ok) KS.push(n);\n}\nconst KMAX = 50;\n\n// Every offset with dx^2 + dy^2 \u003c= 50, nearest first. A flood with step k\n// scans the first NK[k] of them; the moat line reads the first R49.\nconst OD = [];\nfor (let dy = -7; dy \u003c= 7; dy++)\n  for (let dx = -7; dx \u003c= 7; dx++) {\n    const d = dx * dx + dy * dy;\n    if (d \u003c= KMAX) OD.push([d, dx, dy]);\n  }\nOD.sort((p, q) => p[0] - q[0] || p[2] - q[2] || p[1] - q[1]);\nconst ODX = new Int8Array(OD.length), ODY = new Int8Array(OD.length), ODD = new Uint8Array(OD.length);\nOD.forEach((o, i) => {\n  ODD[i] = o[0];\n  ODX[i] = o[1];\n  ODY[i] = o[2];\n});\nconst NK = new Uint16Array(KMAX + 1);\nfor (let k = 0; k \u003c= KMAX; k++) {\n  let n = 0;\n  while (n \u003c OD.length && ODD[n] \u003c= k) n++;\n  NK[k] = n;\n}\nlet R49 = 0;\nwhile (R49 \u003c OD.length && ODD[R49] \u003c= 49) R49++;\n\n// Rational primes up to 7300 by a sieve, enough to test norms up to\n// 2 * 5072^2 by trial division, the far corner at Reach 1 plus the cycle.\nconst SP = [];\n{\n  const M = 7300, c = new Uint8Array(M + 1);\n  for (let i = 2; i \u003c= M; i++) {\n    if (c[i]) continue;\n    SP.push(i);\n    for (let j = i * i; j \u003c= M; j += i) c[j] = 1;\n  }\n}\nfunction isPrime(n) {\n  if (n \u003c 2) return false;\n  for (let i = 0; i \u003c SP.length; i++) {\n    const p = SP[i];\n    if (p * p > n) return true;\n    if (n % p === 0) return n === p;\n  }\n  return true;\n}\n// a + bi with a, b >= 0 is a Gaussian prime when its norm is a prime, or when\n// it lies on an axis and is a prime of the form 4n + 3.\nfunction gaussPrime(a, b) {\n  if (a === 0) return b % 4 === 3 && isPrime(b);\n  if (b === 0) return a % 4 === 3 && isPrime(a);\n  return isPrime(a * a + b * b);\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\n// Reach: the corner stays at the origin up to 0.1, then moves out along the\n// diagonal from 8 + 8i to 4800 + 4800i on a log scale. Each restart adds the\n// next of CYCLE, so the window wanders out where primes thin and comes back.\nconst reachOf = (u) => (u \u003c= 0.1 ? 0 : Math.round(8 * 600 ** ((u - 0.1) / 0.9)));\nconst CYCLE = [0, 24, 140];\n// The first k for a Step: the largest step length squared that fits.\nfunction firstK(step) {\n  let k = KS[0];\n  for (const q of KS) if (q \u003c= step * step + 1e-9) k = q;\n  return k;\n}\nconst nextK = (k) => {\n  for (const q of KS) if (q > k) return q;\n  return KMAX + 1;\n};\n\nconst DMAX = 1024;\n\nexport function setup(params) {\n  params.s = {\n    pr: new Uint8Array(N), dep: new Int16Array(N), par: new Int32Array(N), q: new Int32Array(N), born: new Float32Array(N),\n    ea: new Float32Array(N), ed: new Uint16Array(N), wa: new Float32Array(N), wash: new Float32Array(3), moat: new Float32Array(N), shore: [], grow: [], tg: 0.3, sp: 2, hueK: 0, startT: -1,\n    nPrime: 0, qlen: 0, lastQ: 0, plen: 1, head: 0, scan: 0, k: 2, k0: 2, off: -1, base: -1, stage: 0,\n    mode: 0, timer: 0, acc: 0, T: 0, fade: 1, moatA: 0,\n    hue: -1, pal: new Float32Array(DMAX * 3), dot: new Float32Array(3), buf: new Float32Array(N * 3),\n  };\n}\n\n// Lays out the window with its corner at off + off*i and seeds the flood at\n// the prime nearest the corner: 1 + i when the corner is the origin.\nfunction build(S, off) {\n  S.off = off;\n  S.nPrime = 0;\n  let seed = -1, best = 1e9;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, b = H - 1 - y, g = gaussPrime(x + off, b + off) ? 1 : 0;\n      S.pr[p] = g;\n      if (g) {\n        S.nPrime++;\n        const d = x * x + b * b;\n        if (d \u003c best) (best = d), (seed = p);\n      }\n    }\n  S.dep.fill(-1);\n  S.born.fill(-10);\n  S.ea.fill(0);\n  S.wa.fill(0);\n  S.moat.fill(0);\n  S.grow.length = 0;\n  S.shore = [];\n  S.qlen = 0;\n  S.head = 0;\n  S.scan = 0;\n  S.k = S.k0;\n  S.mode = 0;\n  S.timer = 0;\n  S.acc = 0;\n  S.moatA = 0;\n  S.lastQ = 0;\n  // A restart fades in over 0.6 s; the first window is there at once.\n  S.startT = S.T > 0 ? S.T : -1;\n  if (seed >= 0) {\n    S.dep[seed] = 0;\n    S.par[seed] = seed;\n    S.born[seed] = S.T;\n    S.q[S.qlen++] = seed;\n    soak(S, seed);\n  }\n}\n\n// The next prime the flood reaches: breadth first over the cluster, each\n// prime scanning its neighbours nearest first out to distance sqrt(k).\n// Only primes inside the window count, so a moat here is a moat of the\n// window: a prime just outside it could bridge one.\nfunction pull(S) {\n  const n = NK[min(S.k, KMAX)], pr = S.pr, dep = S.dep;\n  while (S.head \u003c S.qlen) {\n    const p = S.q[S.head], x = p & 63, y = p >> 6;\n    while (S.scan \u003c n) {\n      const i = S.scan++, X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        dep[c] = min(DMAX - 1, dep[p] + 1);\n        S.par[c] = p;\n        S.born[c] = S.T;\n        S.q[S.qlen++] = c;\n        return c;\n      }\n    }\n    S.head++;\n    S.scan = 0;\n  }\n  return -1;\n}\n\n// A segment a LED wide, soft at its sides, into the edge layer: each LED keeps\n// the strongest cover and the depth of the edge that gave it.\nfunction stamp(S, x0, y0, x1, y1, d, ea, ed) {\n  const vx = x1 - x0, vy = y1 - y0, L2 = vx * vx + vy * vy || 1;\n  const xa = max(0, floor(min(x0, x1)) - 1), xb = min(W - 1, Math.ceil(max(x0, x1)) + 1);\n  const ya = max(0, floor(min(y0, y1)) - 1), yb = min(H - 1, Math.ceil(max(y0, y1)) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const t = cl(((x - x0) * vx + (y - y0) * vy) / L2, 0, 1), ex = x0 + vx * t - x, ey = y0 + vy * t - y;\n      const a = 1 - sqrt(ex * ex + ey * ey) * 1.1;\n      if (a \u003c= 0) continue;\n      const p = y * W + x;\n      if (a > ea[p]) {\n        ea[p] = a;\n        if (ed) ed[p] = d;\n      }\n    }\n}\n\n// The ground the flood holds: a faint wash out to 2 LEDs round each reached\n// prime, so a moat shows as the dark band between the wash and the dots.\nfunction soak(S, p) {\n  const x0 = p & 63, y0 = p >> 6, wa = S.wa;\n  for (let dy = -2; dy \u003c= 2; dy++)\n    for (let dx = -2; dx \u003c= 2; dx++) {\n      const x = x0 + dx, y = y0 + dy;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const a = cl(1.15 - sqrt(dx * dx + dy * dy) * 0.38, 0, 1), q = y * W + x;\n      if (a > wa[q]) wa[q] = a;\n    }\n}\n\n// The flood has run out. The shore is every reached prime with an unreached\n// one within the next step; the moat line runs where the nearest reached\n// prime and the nearest unreached one are equally far.\nfunction meetMoat(S) {\n  const kn = min(nextK(S.k), KMAX), nk = NK[kn], pr = S.pr, dep = S.dep;\n  S.shore = [];\n  for (let h = 0; h \u003c S.qlen; h++) {\n    const p = S.q[h], x = p & 63, y = p >> 6;\n    for (let i = 1; i \u003c nk; i++) {\n      const X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        S.shore.push(p);\n        break;\n      }\n    }\n  }\n  const m = S.moat;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let dr = -1, du = -1;\n      for (let i = 0; i \u003c R49 && (dr \u003c 0 || du \u003c 0); i++) {\n        const X = x + ODX[i], Y = y + ODY[i];\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const c = Y * W + X;\n        if (!pr[c]) continue;\n        if (dep[c] >= 0) {\n          if (dr \u003c 0) dr = ODD[i];\n        } else if (du \u003c 0) du = ODD[i];\n      }\n      m[y * W + x] = dr > 0 && du > 0 ? max(0, 1 - abs(sqrt(dr) - sqrt(du)) * 0.8) : 0;\n    }\n  // A step that crossed nothing pulses for a third as long, so a prime\n  // trapped in a corner runs through its empty steps quickly.\n  S.plen = S.qlen > S.lastQ ? 1 : 0.35;\n  S.lastQ = S.qlen;\n}\n\nfunction raise(S) {\n  S.k = nextK(S.k);\n  S.head = 0;\n  S.scan = 0;\n  S.mode = S.k > KMAX ? 2 : 0;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 1.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(kv[1], 0.2, 3), k0 = firstK(cl(kv[2], 1.5, 4.5)), base = reachOf(cl(kv[3], 0, 1));\n  S.T += d;\n  S.hueK = kv[0] || 0;\n  if (base !== S.base) {\n    S.base = base;\n    S.stage = 0;\n    S.k0 = k0;\n    build(S, base);\n  } else if (k0 !== S.k0) {\n    // A longer first step carries on from here; a shorter one starts over.\n    const up = k0 > S.k0;\n    S.k0 = k0;\n    if (!up) build(S, S.off);\n    else if (S.mode \u003c 2 && k0 > S.k) {\n      S.k = k0;\n      S.head = 0;\n      S.scan = 0;\n      S.mode = 0;\n    }\n  }\n  const b = input.btnPressed || [];\n  if (b[0] && S.mode \u003c 2) raise(S);\n\n  // Each new edge grows from its parent for 0.3 s at Speed 2.\n  const tg = 0.6 / sp;\n  for (let i = S.grow.length - 1; i >= 0; i--) {\n    const c = S.grow[i];\n    if (S.T - S.born[c] >= tg) {\n      const p = S.par[c];\n      stamp(S, p & 63, p >> 6, c & 63, c >> 6, S.dep[c], S.ea, S.ed);\n      soak(S, c);\n      S.grow[i] = S.grow[S.grow.length - 1];\n      S.grow.pop();\n    }\n  }\n  S.tg = tg;\n\n  if (S.mode === 0) {\n    // A few dozen primes a second, more as the frontier (the primes queued\n    // but not yet scanned) widens: 56 a second at Speed 2 near 1 + i.\n    S.acc += d * sp * min(90, 28 + (S.qlen - S.head));\n    while (S.acc >= 1) {\n      S.acc -= 1;\n      const c = pull(S);\n      if (c >= 0) {\n        S.grow.push(c);\n        continue;\n      }\n      S.acc = 0;\n      if (S.qlen >= S.nPrime) {\n        S.mode = 2;\n        S.timer = 0;\n      } else {\n        meetMoat(S);\n        S.mode = 1;\n        S.timer = 0;\n      }\n      break;\n    }\n  } else if (S.mode === 1) {\n    // The moat: 0.7 s at Speed 2 of the shore pulsing, then k goes up.\n    S.timer += (d * sp * 0.72) / S.plen;\n    if (S.timer >= 1) raise(S);\n  } else {\n    // Filled: the coral holds for 3 s, fades for 1.5 s, and the next window\n    // in the cycle starts.\n    S.timer += d * sp * 0.5;\n    if (S.timer >= 4.5) {\n      S.stage = (S.stage + 1) % CYCLE.length;\n      build(S, S.base + CYCLE[S.stage]);\n    }\n  }\n  S.fade = S.mode === 2 ? cl((4.5 - S.timer) / 1.5, 0, 1) : cl((S.T - S.startT) / 0.6, 0, 1);\n  S.moatA = S.mode === 1 ? sin(PI * S.timer) : max(0, S.moatA - d * sp * 1.2);\n  S.sp = sp;\n}\n\n// Colours by depth: the hue runs out and back along a band of the wheel\n// every 72 steps of depth, so each breadth-first layer reads as a ring.\nfunction palette(S) {\n  const h0 = S.hueK + 0.13;\n  for (let i = 0; i \u003c DMAX; i++) {\n    let u = (i % 72) / 36;\n    if (u > 1) u = 2 - u;\n    hsv(h0 + 0.42 * u * u * (3 - 2 * u), 0.78, 1, S.pal, i * 3);\n  }\n  hsv(h0 + 0.5, 0.6, 0.3, S.dot, 0);\n  hsv(h0 + 0.47, 0.9, 0.26, S.wash, 0);\n  S.hue = S.hueK;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.hue !== S.hueK) palette(S);\n  const buf = S.buf, pal = S.pal, dot = S.dot, pr = S.pr, dep = S.dep, ea = S.ea, ed = S.ed, wa = S.wa, wash = S.wash, born = S.born, T = S.T;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const w = wa[p];\n    let r = wash[0] * w, g = wash[1] * w, b = wash[2] * w;\n    const a = ea[p];\n    if (a > 0) {\n      const c = ed[p] * 3, v = a * 0.62;\n      r = max(r, pal[c] * v);\n      g = max(g, pal[c + 1] * v);\n      b = max(b, pal[c + 2] * v);\n    }\n    if (pr[p]) {\n      const dd = dep[p];\n      if (dd \u003c 0) {\n        r = max(r, dot[0]);\n        g = max(g, dot[1]);\n        b = max(b, dot[2]);\n      } else {\n        // A new node flashes white and settles into its colour.\n        const c = dd * 3, fl = cl(1 - (T - born[p]) * 2.5, 0, 1);\n        r = pal[c] + (255 - pal[c]) * fl;\n        g = pal[c + 1] + (255 - pal[c + 1]) * fl;\n        b = pal[c + 2] + (255 - pal[c + 2]) * fl;\n      }\n    }\n    buf[o] = r;\n    buf[o + 1] = g;\n    buf[o + 2] = b;\n  }\n  // Edges still growing, from the parent toward the new prime.\n  if (S.grow.length) {\n    const tmp = S.tmp || (S.tmp = new Float32Array(N));\n    for (const c of S.grow) {\n      const p = S.par[c], t = cl((T - born[c]) / S.tg, 0, 1), x0 = p & 63, y0 = p >> 6, x1 = c & 63, y1 = c >> 6;\n      const xe = x0 + (x1 - x0) * t, ye = y0 + (y1 - y0) * t;\n      stamp(S, x0, y0, xe, ye, 0, tmp, null);\n      const xa = max(0, min(x0, x1) - 1), xb = min(W - 1, max(x0, x1) + 1), ya = max(0, min(y0, y1) - 1), yb = min(H - 1, max(y0, y1) + 1);\n      const cc = dep[c] * 3;\n      for (let y = ya; y \u003c= yb; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const q = y * W + x, v = tmp[q] * 0.8;\n          if (v \u003c= 0) continue;\n          tmp[q] = 0;\n          const o = q * 3;\n          buf[o] = max(buf[o], pal[cc] * v + 60 * v);\n          buf[o + 1] = max(buf[o + 1], pal[cc + 1] * v + 60 * v);\n          buf[o + 2] = max(buf[o + 2], pal[cc + 2] * v + 60 * v);\n        }\n    }\n  }\n  // The moat: its middle line glows pale and the shore primes pulse white.\n  if (S.moatA > 0.01) {\n    const m = S.moat, A = S.moatA;\n    for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n      const v = m[p] * A * 0.9;\n      if (v \u003c= 0) continue;\n      buf[o] += (170 - buf[o]) * v;\n      buf[o + 1] += (215 - buf[o + 1]) * v;\n      buf[o + 2] += (255 - buf[o + 2]) * v;\n    }\n    const pulse = 0.5 + 0.5 * sin(T * S.sp * 9);\n    for (const p of S.shore) {\n      const x = p & 63, y = p >> 6;\n      for (let dy = -1; dy \u003c= 1; dy++)\n        for (let dx = -1; dx \u003c= 1; dx++) {\n          const X = x + dx, Y = y + dy;\n          if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n          const o = (Y * W + X) * 3, v = A * (dx || dy ? 0.35 * pulse : 0.5 + 0.5 * pulse);\n          buf[o] += (255 - buf[o]) * v;\n          buf[o + 1] += (255 - buf[o + 1]) * v;\n          buf[o + 2] += (255 - buf[o + 2]) * v;\n        }\n    }\n  }\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * f, buf[p + 1] * f, buf[p + 2] * f);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower."},{"name":"Step","min":1.5,"max":4.5,"about":"The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go."},{"name":"Reach","min":0,"max":1,"about":"Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back."}],"start":[0,2,1.5,0.06],"measures":{"motion":0.0332,"detail":0.138,"edges":0.7904,"complexity":0.3035,"coverage":0.2952,"colour":0.1811,"drift":0.1107},"knobResponse":[0.0371,0.0267,0.0437,0.056]},{"slug":"gear-train","title":"Gear Train","family":"machine","round":8,"note":"패널 발치의 크랭크가 색 톱니바퀴를 돌려요. 바퀴마다 아래 바퀴와 톱니를 맞물려 꼭대기까지 이어지고, 작은 바퀴일수록 빨리 돌아요. K4 를 올리면 모든 바퀴가 톱니 하나씩 딸깍 걸려 나가요.","idea":"A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.","buttons":"K1 tap reverses the crank; the train slows, stops and runs the other way.","code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-gear-train","type":"code","name":"gear-train","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second."},{"name":"Gears","min":4,"max":9,"about":"How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel."},{"name":"Tick","min":0,"max":1,"about":"Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet."}],"start":[0,2,4,0.06],"measures":{"motion":0.8362,"detail":0.0922,"edges":0.4218,"complexity":1.1517,"coverage":0.8876,"colour":0.5762,"drift":0.1048},"knobResponse":[0.3786,0.1249,0.2931,0.0655]},{"slug":"geyser","title":"Geyser","family":"volcano","round":26,"note":"눈 덮인 지열 지대의 간헐천을 땅속까지 잘라 봐요. 화도에 기포가 차면 청록 웅덩이가 유리 돔으로 부풀다 흰 물기둥으로 터지고, 김 구름이 바람에 흘러가요. K1 은 정오에서 오로라 밤까지 빛을 바꾸고, 누르면 바로 분출해요.","idea":"A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.","buttons":"K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.","code":"// ===== Patternflow pattern =====\n// Title:   Geyser\n// Family:  volcano\n// Idea:    A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after Strokkur in the Haukadalur geothermal field, Iceland\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1\n//\n// Knob 1: Light. A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing.\n// Knob 2: Speed. At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer.\n// Knob 3: Power. At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows.\n// Knob 4: Wind. At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it.\n// Buttons: K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst sc = (c, k) => c.map((v, n) => v * (k.length ? k[n] : k));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the pool's brim, the bowl's floor, the snow on the flat, the horizon,\n// the drained water level; the vent's column; the chamber's centre and radii.\nconst [BRIM, BOWL, GY, HZ, LOW, C] = [71, 80, 75, 61, 103, 32];\nconst [KX, KY, KRX, KRY] = [30.5, 116, 10, 6.5];\n// Gravity in rows per second squared.\nconst G = 150;\n// Seconds at Speed 2: refill, the big bubble's climb, the dome, the drain.\nconst [HEAT, RISE, DOME, FALL] = [7.5, 0.7, 0.45, 3.5];\n\n// The ground: the bowl, the sinter mound with a lip at the brim, the flat.\nconst SURF = new Float32Array(W).map((_, x) => {\n  const dx = abs(x + 0.5 - C);\n  if (dx \u003c 12) return BRIM + (BOWL - BRIM) * (1 - (dx / 12) ** 2) ** 0.7;\n  if (dx \u003c 27) return BRIM - 0.8 * (1 - sm(12, 16, dx)) + (GY - BRIM) * sm(14, 27, dx);\n  return GY + 0.8 * (vn(x * 0.2, 3) - 0.5);\n});\n// The conduit wanders a little and narrows at row 95.\nconst CXA = new Float32Array(H).map((_, y) => C - 0.5 + 0.8 * sin(y * 0.23) + 0.4 * sin(y * 0.61 + 1));\nconst CHW = new Float32Array(H).map((_, y) => 2 + 0.4 * sin(y * 0.37) - 0.6 * exp(-(((y - 95) / 3) ** 2)));\n// The hill behind the field on the right, the ice cap on the horizon at the left.\nconst HILL = new Float32Array(W).map((_, x) => HZ - 20 * sm(30, 66, x) ** 0.9 - 1.2 * vn(x * 0.35, 4));\nconst CAP = new Float32Array(W).map((_, x) => HZ - 1.5 - 2.6 * sqrt(max(0, 1 - ((x + 0.5 - 13) / 17) ** 2)));\n// Cracks feeding ground water to the chamber.\nconst FIS = [[[0, 94], [7, 98], [15, 104], [22, 112]], [[63, 103], [55, 108], [47, 113], [40, 117]]];\n// The beds, top down, colour and rows: sinter, geyserite, ochre, sinter, rust,\n// sulphur, grey clay, ochre, dark rust, tuff, sulphur, dark clay, basalt.\nconst LAY = [[206, 200, 186, 3], [176, 172, 166, 2], [172, 122, 54, 2], [196, 188, 172, 2], [150, 70, 40, 3], [206, 182, 62, 1], [126, 116, 108, 4], [162, 112, 52, 2], [120, 56, 36, 2], [104, 92, 84, 4], [200, 176, 64, 1], [84, 74, 72, 5], [58, 58, 68, 99]];\nconst SULF = [214, 190, 70], RUST = [158, 76, 42], LINE = [214, 210, 196], SNOW = [214, 222, 236];\nconst MAT = [[96, 116, 52], [214, 112, 38], [212, 186, 70]];\nconst COOL = [24, 62, 150], HOT = [44, 176, 204], FOAM = [212, 232, 236];\nconst JACK = [[200, 46, 40], [232, 192, 44], [40, 92, 200], [44, 44, 52], [58, 140, 92], [222, 112, 34], [150, 60, 150]];\n\n// Noon, blue hour, night: sky overhead and at the horizon, daylight, steam lit\n// and in shade, the cut rock, the water.\nconst LIGHT = [\n  [0, [20, 62, 152], [122, 156, 198], [0.95, 0.93, 0.88], [236, 234, 226], [118, 134, 168], 1, 1],\n  [0.5, [10, 24, 74], [66, 88, 148], [0.42, 0.48, 0.7], [158, 168, 212], [50, 60, 108], 0.85, 0.78],\n  [1, [3, 7, 24], [12, 26, 54], [0.24, 0.3, 0.42], [132, 154, 168], [30, 42, 70], 0.62, 0.6],\n];\nfunction lightAt(g) {\n  const a = LIGHT[g > 0.5 ? 1 : 0], b = LIGHT[g > 0.5 ? 2 : 1], u = (g - a[0]) / (b[0] - a[0]);\n  const m = (k) => (a[k].length ? a[k].map((v, c) => mix(v, b[k][c], u)) : mix(a[k], b[k], u));\n  return { top: m(1), low: m(2), amb: m(3), lit: m(4), dark: m(5), rock: m(6), water: m(7), sun: 1 - sm(0, 0.4, g), ag: sm(0.15, 0.45, g) * (1 - sm(0.55, 0.85, g)), moon: sm(0.6, 0.95, g), stars: sm(0.4, 0.85, g), aur: sm(0.6, 0.95, g) };\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), bg: F32(N * 3), rock: F32(N * 3), kind: new Uint8Array(N), sky: new Uint8Array(N), fu: F32(N), D: F32(N), CB: F32(N),\n    t: 0, ph: 0, pt: HEAT - 1.25, wl: BRIM, wl0: LOW, T: 0.9, T0: 0.25, hv: 0, dh: 0, bw: 6, key: -1, ca: 99, ja: 99,\n    bub: [], par: [], spr: [], puffs: [], pop: 0, nb: 0, np: 0, ns: 0, nv: 0, ox: 0, oy: 0, big: -1,\n  });\n  const { kind, fu, rock } = S;\n  // Kinds: 0 the view, 1 the bowl, 2 rock, 3 conduit, 4 crack, 5 chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5;\n    let k = Y >= SURF[x] ? 2 : abs(X - C) \u003c 12 && Y >= BRIM ? 1 : 0;\n    if (k === 2 && ((X - KX) / KRX) ** 2 + ((Y - KY) / KRY) ** 2 \u003c 1 + 0.5 * (vn(X * 0.35, Y * 0.35) - 0.5)) k = 5;\n    else if (k === 2 && y \u003c KY && abs(X - CXA[y]) \u003c CHW[y]) k = 3;\n    kind[i] = k;\n    if (!k && Y \u003c min(HILL[x], CAP[x])) S.sky[i] = 1;\n  }\n  for (const p of FIS)\n    for (let j = 1, len = 0; j \u003c p.length; j++) {\n      const [x0, y0] = p[j - 1], [x1, y1] = p[j], n = hypot(x1 - x0, y1 - y0) * 3;\n      for (let u = 0; u \u003c= n; u++) {\n        const i = floor(mix(y0, y1, u / n)) * W + floor(mix(x0, x1, u / n));\n        if (kind[i] === 2) (kind[i] = 4), (fu[i] = len + u / 3);\n      }\n      len += n / 3;\n    }\n  // The cut rock: beds bend with the ground, a silica lining and sulphur and\n  // rust stains round every water way, columnar basalt below, bacterial mats\n  // on the mound and snow on the flat.\n  const cav = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, dx = abs(X - C), s = SURF[x];\n    if (kind[i] >= 3) cav.push(i);\n    if (kind[i] !== 2) continue;\n    let d = Y - s + 2.4 * (vn(x * 0.08, y * 0.06 + 9) - 0.5) + 0.05 * (X - C), j = 0, dist = 9, gr = 0.9 + 0.18 * hash(x, y + 77);\n    while (d > LAY[j][3] && j \u003c LAY.length - 1) (d -= LAY[j][3]), j++;\n    let c = LAY[j];\n    if (j === LAY.length - 1) {\n      const jx = (X + 3 * vn(1.7, Y * 0.12)) / 6;\n      gr *= (jx - floor(jx) \u003c 0.17 ? 0.6 : 1) * (0.85 + 0.3 * hash(floor(jx), 5));\n    }\n    for (let v = -5; v \u003c= 5; v++)\n      for (let u = -5; u \u003c= 5; u++) {\n        const xx = x + u, yy = y + v, k = xx >= 0 && xx \u003c W && yy \u003c H ? kind[yy * W + xx] : 2;\n        if (k !== 2 && k) dist = min(dist, hypot(u, v) * (k === 4 ? 2.5 : 1));\n      }\n    if (dist \u003c 1.5) c = LINE;\n    else if (dist \u003c 5) c = c.map((v, n) => mix(v, (dist \u003c 3 ? SULF : RUST)[n], (5 - dist) * 0.17));\n    if (dx > 13 && dx \u003c 26 && Y - s \u003c 1.4) c = MAT[floor(cl(vn(X * 0.45, 2) * 2.2 - 0.3, 0, 2.99))];\n    if (dx >= 26 && Y - s \u003c 1.5) c = SNOW;\n    for (let n = 0; n \u003c 3; n++) rock[i * 3 + n] = c[n] * gr;\n  }\n  S.cav = Int32Array.from(cav);\n  // Visitors behind the rope on both sides, in their parkas.\n  S.ppl = [];\n  for (const [x0, x1] of [[2, 18], [46, 62]])\n    for (let x = x0 + rnd() * 2; x \u003c x1; x += 2.2 + rnd() * 2.4)\n      S.ppl.push({ x: floor(x), h: rnd() \u003c 0.3 ? 5 : 4, c: JACK[floor(rnd() * 7)], hat: rnd() \u003c 0.5, dl: rnd() * 0.9, up: rnd() \u003c 0.7 });\n}\n\n// The breeze in columns per second at row y, stronger aloft.\nconst wind = (S, y) => (6 + 16 * S.w) * (0.35 + 0.65 * sm(80, 8, y));\nfunction puff(S, x, y, r, a, vy, life, gr, rmax) {\n  if (S.puffs.length > 210) S.puffs.shift();\n  S.puffs.push({ x, y, r, a, vy, rise: -(1 + 2.5 * rnd()), life, gr, rmax, age: 0, ph: rnd() * 7 });\n}\nconst spray = (S, x, y, vx, vy) => S.spr.length \u003c 700 && S.spr.push({ x, y, vx, vy, life: 2.5 });\n\nfunction enter(S, ph) {\n  Object.assign(S, { ph, pt: 0, wl0: S.wl, T0: S.T });\n  if (ph === 2) S.ca = 0;\n  if (ph === 3) {\n    // The dome tears open in a ring of spray.\n    S.ja = 0;\n    for (let n = 0; n \u003c 40; n++) spray(S, C + (rnd() - 0.5) * S.bw * 1.6, BRIM - S.dh * rnd(), (rnd() - 0.5) * 70, -(40 + 90 * rnd()));\n    for (let n = 0; n \u003c 6; n++) puff(S, C + (rnd() - 0.5) * 12, BRIM - 3 - 4 * rnd(), 3 + rnd() * 2, 0.6, -(10 + 10 * rnd()), 8 + 3 * rnd(), 1.5, 12 + 6 * S.P);\n  }\n}\n\nfunction step(S, d, hold) {\n  const P = S.P, Dj = 1.1 + 1.1 * P, Rl = RISE - 0.35 * P, Dl = DOME - 0.2 * P, t = (S.t += d);\n  if (!hold) (S.pt += d), (S.ca += d), (S.ja += d);\n  if (S.pt >= [HEAT, Rl, Dl, Dj, FALL][S.ph]) enter(S, (S.ph + 1) % 5);\n  const { ph, pt } = S;\n  // The water level and how hot the water is.\n  if (ph === 0) (S.wl = mix(S.wl0, BRIM, sm(0, 6, pt))), (S.T = mix(S.T0, 1, sm(0, HEAT, pt)));\n  else if (ph === 1) (S.wl = mix(S.wl0, BRIM, sm(0, 0.5, pt))), (S.T = mix(S.T0, 1, sm(0, 0.4, pt)));\n  else if (ph === 2) S.wl = BRIM;\n  else if (ph === 3) (S.wl = BRIM), (S.T = 1 - 0.65 * sm(0, Dj, pt));\n  else (S.wl = mix(S.wl0, LOW, sm(0.2, 2.6, pt)) + 1.6 * exp(-pt * 1.1) * sin(pt * 10) * sm(0.3, 0.8, pt)), (S.T = mix(S.T0, 0.25, sm(0, FALL, pt)));\n  // The pool heaves before it goes, the big bubble climbs, the dome swells.\n  S.hv = ph === 0 ? (1.1 + P) * sm(4.5, 7.5, pt) * sin(t * 4.2) ** 2 : ph === 1 ? 1 + (2.2 + P) * sm(0, Rl, pt) : 0;\n  S.big = ph === 1 ? mix(KY - KRY + 1, BOWL - 2, sm(0, Rl, pt) ** 1.4) : -1;\n  S.bw = 7.5 + 4 * P;\n  S.dh = ph === 2 ? (9 + 7 * P) * sm(0, Dl, pt) ** 0.8 + 0.5 * sin(pt * 30) : 0;\n\n  // Steam bubbles grow as they climb from the chamber's floor. They collapse\n  // in cooler water; once it is hot through they reach the pool and pop.\n  for (S.nb += d * (1.5 + 18 * S.T * S.T) * (ph === 3 ? 3 : ph === 4 ? 0.3 : 1) * (1 + 0.8 * P); S.nb >= 1; S.nb--)\n    if (S.bub.length \u003c 160) S.bub.push({ x: KX + (rnd() - 0.5) * KRX * 1.3, y: KY + KRY * (0.25 + 0.5 * rnd()), r: 0.4, v: 3 + 4 * rnd() });\n  const cr = ph > 0 && ph \u003c 4 ? -9 : mix(106, BOWL - 4, sm(0.35, 0.92, S.T));\n  for (const b of S.bub) {\n    const yi = cl(floor(b.y), 0, H - 1), inC = b.y \u003c KY - KRY + 1.5;\n    if (inC) (b.x += (CXA[yi] + 0.5 - b.x) * min(1, d * 8)), (b.v = min(32, b.v + 26 * d));\n    else (b.x += (KX - b.x) * d * 0.4 * sm(KY, KY - KRY, b.y) + sin(t * 3 + b.y) * d), (b.v = min(14, b.v + 8 * d));\n    b.y -= b.v * d * (ph === 3 ? 1.8 : 1);\n    b.r = min(inC ? (b.y \u003c BOWL ? 1.2 : CHW[yi] - 0.3) : 2.3, b.r + d * (0.3 + 0.7 * S.T));\n    if (b.y \u003c cr || (S.big > 0 && b.y > S.big && b.y \u003c S.big + 10)) b.dead = 1;\n    else if (b.y \u003c= S.wl + 0.5) {\n      b.dead = 1;\n      if (S.wl \u003c BOWL) {\n        S.pop = min(1.5, S.pop + 0.15 * b.r);\n        if (rnd() \u003c 0.5) puff(S, b.x + (rnd() - 0.5) * 8, S.wl - 2, 1.8, 0.3, -6, 3 + 2 * rnd(), 1, 5);\n      }\n    }\n  }\n  S.bub = S.bub.filter((b) => !b.dead);\n  S.pop *= exp(-3 * d);\n\n  // The jet: slabs of water fly up and spread; past the top they break up.\n  if (ph === 3) {\n    const u = pt / Dj, v = sqrt(2 * G * (64 + 46 * P)) * (1 - 0.25 * sm(0.7, 1, u)) * (1 - 0.6 * sm(0.45, 0.8, P) * exp(-(((u - 0.48) / 0.09) ** 2)));\n    for (S.np += d * v * 0.6; S.np >= 1; S.np--) S.par.push({ x: C + (rnd() - 0.5) * 1.2, y: BRIM - 1 - v * d * rnd(), vy: -v * (0.95 + 0.1 * rnd()), w: (3.5 + 3.5 * P) * (0.85 + 0.3 * rnd()), a: 1, ap: 0 });\n  }\n  for (const q of S.par) {\n    q.vy += G * d;\n    q.y += q.vy * d;\n    q.x += wind(S, q.y) * 0.35 * d;\n    q.w += d * (4.5 + 4.5 * P) * (q.ap ? 2 : 1);\n    if (!q.ap && q.vy > -25) {\n      q.ap = 1;\n      for (let n = 0; n \u003c 2; n++) spray(S, q.x + (rnd() - 0.5) * q.w * 2, q.y, (rnd() - 0.5) * 64, q.vy + (rnd() - 0.6) * 30);\n    }\n    if (rnd() \u003c d * 3) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      spray(S, q.x + sd * q.w, q.y, sd * (8 + 26 * rnd()), q.vy * 0.75);\n    }\n    if (q.ap) q.a -= d * 1.6;\n    if (q.y > BRIM || q.a \u003c= 0) q.dead = 1;\n  }\n  S.par = S.par.filter((q) => !q.dead);\n  // Steam boils off the column while it stands and a little after.\n  if (S.ja \u003c Dj + 0.8 && S.par.length)\n    for (S.ns += d * (40 + 40 * P); S.ns >= 1; S.ns--) {\n      const q = S.par[floor(rnd() * S.par.length)];\n      puff(S, q.x + (rnd() - 0.5) * q.w * 1.8, q.y, 2.5 + q.w * 0.6, 0.55 + 0.25 * rnd(), max(-30, q.vy * 0.3), 10 + 4 * rnd() + 3 * P, 2 + 1.5 * rnd(), 17 + 7 * P);\n    }\n  for (const s of S.spr) {\n    s.vy = min(90, s.vy + G * 0.85 * d);\n    s.vx *= 1 - 0.5 * d;\n    s.x += (s.vx + wind(S, s.y) * 0.5) * d;\n    s.y += s.vy * d;\n    s.life -= d;\n    const x = floor(s.x), y = floor(s.y);\n    if (s.life \u003c 0 || x \u003c 0 || x >= W || y >= H || (y >= 0 && S.kind[y * W + x] && s.vy > 0)) s.dead = 1;\n  }\n  S.spr = S.spr.filter((s) => !s.dead);\n\n  // Gentle steam off the pool, and from small vents out on the field.\n  const wet = S.wl \u003c BOWL - 1;\n  for (S.nv += d * (2 + (wet ? 4 + 5 * S.T : 1) * (1 + P)); S.nv >= 1; S.nv--)\n    if (rnd() \u003c 0.7) puff(S, C + (rnd() - 0.5) * (wet ? 20 : 6), (wet ? S.wl : BOWL) - 1, 1.6 + rnd(), 0.22 + 0.2 * rnd(), -(5 + 3 * rnd()), 4 + 2 * rnd(), 1, 6);\n    else {\n      const v = [[7, 67], [52, 64], [21, 63], [60, 70]][floor(rnd() * 4)];\n      puff(S, v[0] + rnd() - 0.5, v[1], 1.1, 0.3, -(4 + 2 * rnd()), 3.5 + 2 * rnd(), 0.8, 4);\n    }\n  for (const q of S.puffs) {\n    q.age += d;\n    q.vy += (q.rise - q.vy) * 1.2 * d;\n    q.y += q.vy * d;\n    q.x += (wind(S, q.y) + 1.2 * sin(q.age * 1.1 + q.ph)) * d;\n    q.r = min(q.rmax, q.r + q.gr * d);\n  }\n  S.puffs = S.puffs.filter((q) => q.age \u003c q.life && q.y + q.r > -6 && q.x > -26 && q.x \u003c W + 26);\n  S.ox += wind(S, 25) * 0.2 * d;\n  S.oy -= 0.6 * d;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.g, S.P, S.w] = [cl(k[0], 0, 1), cl(k[2], 0, 1), cl(k[3], -1, 1)];\n  if (!S.init) {\n    // Open on a steaming field with the last cloud still high up; the pool holds its phase.\n    for (let n = 0; n \u003c 18; n++) puff(S, -10 + n * 4 + rnd() * 4, 8 + 24 * rnd(), 6 + 4 * rnd(), 0.4 + 0.15 * rnd(), -2, 15 + 4 * rnd(), 0.8, 16), (S.puffs[n].age = 2 + 4 * rnd());\n    for (let n = 0; n \u003c 150; n++) step(S, 1 / 30, 1);\n    S.bub.length = S.pop = S.t = 0;\n    S.init = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === 0 || S.ph === 4)) enter(S, 1);\n  step(S, (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2);\n}\n\n// The view and the cut rock, kept until the light changes.\nfunction backdrop(S) {\n  const L = (S.L = lightAt(S.g)), BG = S.bg, R = S.rock, { amb, top, low } = L;\n  S.key = round(S.g * 60);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, k = S.kind[i];\n    let c;\n    if (k >= 2) c = k === 2 ? [R[o], R[o + 1], R[o + 2]] : [26, 28, 36];\n    else if (k === 1) {\n      // The far wall of the bowl, wet sinter.\n      const v = (0.75 + 0.3 * hash(x, y)) * (0.8 + 0.25 * vn(X * 0.5, Y * 0.9));\n      c = [62 * v, 86 * v, 90 * v];\n    }\n    if (c) c = sc(c, L.rock);\n    else if (S.sky[i]) {\n      const sd = hypot(X - 9, Y - 53), md = hypot(X - 13, Y - 15), v = (Y / HZ) ** 1.3;\n      const sg = L.sun * (0.6 * exp(-sd / 9) + (sd \u003c 1.7 ? 1.1 : 0)), ag = L.ag * exp(-(((Y - 58) / 9) ** 2)) * (1 - X / 80);\n      const mg = L.moon * ((md \u003c 2.4 ? 0.9 : 0) + 0.12 * exp(-md / 5)), st = hash(x, y) \u003c 0.013 && Y \u003c 52 ? L.stars * (90 + 140 * hash(y, x)) : 0;\n      c = top.map((a, n) => mix(a, low[n], v) + sg * [255, 206, 130][n] + ag * [110, 92, 168][n] + mg * [228, 230, 238][n] + st * [0.85, 0.9, 1][n]);\n    } else if (Y \u003c HZ) {\n      // The ice cap; snow and scree on the hill.\n      const sn = vn(x * 0.16, y * 0.3) + 0.35 * vn(x * 0.5, y * 0.8) - 0.01 * (Y - HILL[x]) > 0.55;\n      c = Y \u003c HILL[x] ? [222, 232, 246].map((a, n) => a * amb[n] * 0.92 + low[n] * 0.1) : sc(sn ? sc(SNOW, 0.74 + 0.004 * x) : [64, 60, 62], amb);\n    } else if (Y \u003c HZ + 1.5) c = sc([92, 100, 118], amb);\n    else {\n      // The flat field: snow, and bare warm ground near the springs.\n      const f = (Y - HZ) / (GY - HZ), b = 0.7 * sm(0.6, 0.66, vn((X * 0.1) / (0.35 + f), y * 0.6)) * sm(27, 10, abs(X - C));\n      c = SNOW.map((a, n) => mix(a * (0.8 + 0.2 * f), [112, 92, 70][n], b) * amb[n]);\n    }\n    for (let n = 0; n \u003c 3; n++) BG[o + n] = c[n];\n  }\n}\n\n// Add an elliptical blob to a density field.\nfunction splat(A, cx, cy, rx, ry, a) {\n  const y1 = min(H - 1, cy + ry), x0 = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx);\n  for (let y = max(0, floor(cy - ry)); y \u003c= y1; y++) {\n    const dy = (y + 0.5 - cy) / ry, dd = 1 - dy * dy;\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = (x + 0.5 - cx) / rx, e = dd - dx * dx;\n      if (e > 0) A[y * W + x] += a * e;\n    }\n  }\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], c[n], a);\n}\n\n// Shade a density field over the frame, lit on the side facing the light.\nfunction shade(S, A, k0, lit, dark, tint, jet) {\n  for (let i = 0; i \u003c N; i++) {\n    const v = A[i];\n    if (v \u003c 0.015) continue;\n    const x = i & 63, y = i >> 6, o = i * 3;\n    const tex = jet ? vn(x * 0.5, (y + S.t * 10) * 0.25) : vn(x * 0.18 - S.ox, y * 0.18 - S.oy);\n    const al = min(0.95, 1 - exp(-v * (k0 + 1.6 * tex))), gx = v - A[x > 1 && y > 1 ? i - (jet ? 2 : 2 * W + 2) : i];\n    const sh = cl(0.52 + (jet ? 0.9 : 0.5) * gx + 0.45 * (tex - 0.5), 0.12, 1.02), tt = jet ? sm(BRIM - 16, BRIM, y) * 0.6 : 0;\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], mix(mix(dark[n], lit[n], sh), jet ? tint[n] : 0, tt), al);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  if (S.key !== round(S.g * 60)) backdrop(S);\n  F = S.f;\n  F.set(S.bg);\n  const L = S.L, { t, kind, D, CB, ph, wl, T, P } = S, amb = L.amb, Lw = L.water, Lr = L.rock;\n\n  // Aurora: a green hem, rays rising into violet.\n  if (L.aur > 0.01)\n    for (let k = 0; k \u003c 2; k++)\n      for (let x = 0; x \u003c W; x++) {\n        const yb = 30 + 8 * k + 5 * sin(x * 0.08 + t * 0.22 + k * 2.1) + 8 * (vn(x * 0.07 + t * 0.12, k * 7) - 0.5);\n        const I = L.aur * sm(0.3, 0.75, vn(x * 0.09 - t * 0.1 + k * 3, t * 0.04 + k)) * (0.5 + 0.5 * vn(x * 0.7 + t * 0.5, k * 11 + t * 0.3));\n        if (I \u003c 0.02) continue;\n        for (let y = max(0, floor(yb - 26)); y \u003c= yb; y++) {\n          const i = y * W + x, u = (yb - y) / 26, e = I * (u \u003c 0.08 ? u / 0.08 : exp(-u * 2.2)) * 0.9, v = sm(0.35, 1, u);\n          if (S.sky[i]) (F[i * 3] += mix(40, 96, v) * e), (F[i * 3 + 1] += mix(214, 60, v) * e), (F[i * 3 + 2] += mix(120, 176, v) * e);\n        }\n      }\n\n  // The visitors behind the rope; once the dome rises most hold up a phone.\n  for (const p of S.ppl) {\n    const hy = GY - p.h, jc = sc(p.c, amb);\n    put(p.x, GY - 1, sc([30, 30, 36], amb));\n    for (let y = hy + 1; y \u003c GY - 1; y++) put(p.x, y, jc);\n    put(p.x, hy, p.hat ? jc : sc([226, 186, 160], amb));\n    if (p.up && S.ca > p.dl && S.ca \u003c 6 + p.dl) put(p.x + 1, hy, jc), put(p.x + 1, hy - 1, L.stars > 0.3 ? [180, 210, 255] : [40, 40, 50]);\n  }\n  for (const x of [1, 8, 15, 49, 56, 63]) for (let y = GY - 3; y \u003c GY; y++) put(x, y, sc([70, 56, 40], amb));\n  for (let x = 1; x \u003c 64; x++) if (x \u003c 16 || x > 48) put(x, GY - 3 + (sin(((x - 1) / 7) * Math.PI) > 0.2 ? 1 : 0), sc([214, 184, 64], amb), 0.8);\n\n  // All the steam, summed and shaded.\n  D.fill(0);\n  for (const q of S.puffs) {\n    const a = q.a * sm(0, 0.4, q.age) * (1 - sm(q.life * 0.45, q.life, q.age));\n    if (a > 0.01) splat(D, q.x, q.y, q.r, q.r, a);\n  }\n  shade(S, D, 1.1, L.lit, L.dark);\n\n  // The pool in section, its heave, ripples and dome.\n  const foam = ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1.2, S.pt) : 0;\n  for (let x = 20; x \u003c 44; x++) {\n    const dx = x + 0.5 - C;\n    let top = wl - S.hv * max(0, 1 - (dx / 10) ** 2) + S.pop * sin(x * 1.3 - t * 14) * 0.6 + foam * 1.5 * (hash(x, floor(t * 20)) - 0.5);\n    const dome = S.dh > 0 && abs(dx) \u003c S.bw ? S.dh * (1 - (dx / S.bw) ** 2) ** 0.75 : 0;\n    if (dome) top = min(top, BRIM - dome);\n    for (let y = max(0, floor(top)); y \u003c SURF[x]; y++) {\n      const z = y + 0.5 - top;\n      if (z \u003c 0 || (kind[y * W + x] !== 1 && y >= BRIM)) continue;\n      let c;\n      if (dome && y \u003c BRIM) {\n        const nx = dx / S.bw, ny = (BRIM - y) / (S.dh + 0.1), sp = exp(-((nx + 0.42) ** 2) / 0.03 - (ny - 0.6) ** 2 / 0.08);\n        c = [40, 150, 176].map((v, n) => (mix(v, [110, 226, 230][n], ny * 0.8 + 0.3 * abs(nx)) * (0.85 + 0.25 * vn(x * 0.5, y * 0.5 - t * 6)) + 150 * sp + (z \u003c 1 ? 70 : 0)) * Lw);\n      } else if (z \u003c 1) c = sc([150, 224, 226], Lw);\n      else c = [60, 190, 200].map((v, n) => mix(v, [18, 70, 140][n], sm(0, 10, z)) * Lw * (0.88 + 0.24 * vn(x * 0.45 + t * 0.6, y * 0.7 - t * 0.4)));\n      if (foam && z \u003c 3 && hash(x, y + floor(t * 25)) \u003c 0.6 * foam) c = sc(FOAM, Lw);\n      put(x, y, c);\n    }\n  }\n\n  // The column and its spray.\n  CB.fill(0);\n  for (const q of S.par) splat(CB, q.x, q.y, q.w, 2.8, q.a);\n  if (S.par.length) shade(S, CB, 1.8, L.lit.map((v) => min(240, v * 1.04)), L.dark, [70 * Lw, 200 * Lw, 212 * Lw], 1);\n  for (const s of S.spr) {\n    const a = min(1, s.life * 1.5) * 0.85;\n    put(s.x - s.vx * 0.02, s.y - s.vy * 0.02, L.lit, a * 0.35);\n    put(s.x, s.y, L.lit, a);\n  }\n\n  // Under the ground: the conduit, the chamber and the cracks feeding it.\n  const froth = ph === 3 ? 1 - 0.5 * sm(0.6, 1, S.pt / (1.1 + 1.1 * P)) : ph === 2 ? 0.3 : ph === 1 ? 0.12 : 0;\n  const inflow = ph === 0 ? 1 - sm(4, 6.5, S.pt) * 0.8 : ph === 4 ? sm(1, 3, S.pt) : 0.2;\n  for (const i of S.cav) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = kind[i];\n    let r, g, b;\n    if (k === 4) {\n      const p = inflow * sm(0.55, 1, sin(S.fu[i] * 0.7 - t * 7));\n      (r = 20 + 80 * p), (g = 46 + 130 * p), (b = 104 + 110 * p);\n    } else if (k === 3 && y + 0.5 \u003c wl) {\n      // Drained: wet walls with a film running down.\n      const f = ph === 4 && hash(x, floor(y - t * 26)) \u003c 0.12;\n      (r = f ? 70 : 30), (g = f ? 104 : 33), (b = f ? 124 : 42);\n    } else if (froth && hash(x, floor(y + t * 80)) \u003c froth * (k === 5 ? 0.4 : 0.55)) [r, g, b] = FOAM;\n    else {\n      // Cool water blue, hot water turquoise.\n      const Tl = cl(T * (0.7 + 0.3 * sm(BOWL, KY + KRY, y)) + (k === 5 ? 0.08 : 0), 0, 1), sh = (0.86 + 0.28 * vn(x * 0.6, y * 0.3 + t * 2)) * (k === 3 && y === floor(wl) ? 1.3 : 1);\n      (r = mix(COOL[0], HOT[0], Tl) * sh), (g = mix(COOL[1], HOT[1], Tl) * sh), (b = mix(COOL[2], HOT[2], Tl) * sh);\n    }\n    (F[o] = r * Lr), (F[o + 1] = g * Lr), (F[o + 2] = b * Lr);\n  }\n  for (const { x, y, r } of S.bub)\n    if (r \u003c 0.9) put(x, y, FOAM, 0.85);\n    else\n      for (let v = floor(y - r); v \u003c= y + r; v++)\n        for (let u = floor(x - r); u \u003c= x + r; u++) {\n          const e = hypot(u + 0.5 - x, v + 0.5 - y) / r;\n          if (e \u003c 1) put(u, v, e > 0.6 ? [150, 220, 230] : FOAM, 0.9);\n        }\n  if (S.big > 0)\n    for (let y = floor(S.big); y \u003c S.big + 10; y++) {\n      const cx = CXA[y] + 0.5, hw = CHW[y] * min(1, 0.5 + 0.5 * (y + 1 - S.big)) - 0.3;\n      for (let x = floor(cx - hw); x \u003c cx + hw; x++) put(x, y, abs(x + 0.5 - cx) > hw - 1 ? [160, 236, 240] : [236, 246, 248], 0.97);\n    }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-geyser","type":"code","name":"geyser","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Geyser\n// Family:  volcano\n// Idea:    A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after Strokkur in the Haukadalur geothermal field, Iceland\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1\n//\n// Knob 1: Light. A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing.\n// Knob 2: Speed. At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer.\n// Knob 3: Power. At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows.\n// Knob 4: Wind. At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it.\n// Buttons: K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst sc = (c, k) => c.map((v, n) => v * (k.length ? k[n] : k));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the pool's brim, the bowl's floor, the snow on the flat, the horizon,\n// the drained water level; the vent's column; the chamber's centre and radii.\nconst [BRIM, BOWL, GY, HZ, LOW, C] = [71, 80, 75, 61, 103, 32];\nconst [KX, KY, KRX, KRY] = [30.5, 116, 10, 6.5];\n// Gravity in rows per second squared.\nconst G = 150;\n// Seconds at Speed 2: refill, the big bubble's climb, the dome, the drain.\nconst [HEAT, RISE, DOME, FALL] = [7.5, 0.7, 0.45, 3.5];\n\n// The ground: the bowl, the sinter mound with a lip at the brim, the flat.\nconst SURF = new Float32Array(W).map((_, x) => {\n  const dx = abs(x + 0.5 - C);\n  if (dx \u003c 12) return BRIM + (BOWL - BRIM) * (1 - (dx / 12) ** 2) ** 0.7;\n  if (dx \u003c 27) return BRIM - 0.8 * (1 - sm(12, 16, dx)) + (GY - BRIM) * sm(14, 27, dx);\n  return GY + 0.8 * (vn(x * 0.2, 3) - 0.5);\n});\n// The conduit wanders a little and narrows at row 95.\nconst CXA = new Float32Array(H).map((_, y) => C - 0.5 + 0.8 * sin(y * 0.23) + 0.4 * sin(y * 0.61 + 1));\nconst CHW = new Float32Array(H).map((_, y) => 2 + 0.4 * sin(y * 0.37) - 0.6 * exp(-(((y - 95) / 3) ** 2)));\n// The hill behind the field on the right, the ice cap on the horizon at the left.\nconst HILL = new Float32Array(W).map((_, x) => HZ - 20 * sm(30, 66, x) ** 0.9 - 1.2 * vn(x * 0.35, 4));\nconst CAP = new Float32Array(W).map((_, x) => HZ - 1.5 - 2.6 * sqrt(max(0, 1 - ((x + 0.5 - 13) / 17) ** 2)));\n// Cracks feeding ground water to the chamber.\nconst FIS = [[[0, 94], [7, 98], [15, 104], [22, 112]], [[63, 103], [55, 108], [47, 113], [40, 117]]];\n// The beds, top down, colour and rows: sinter, geyserite, ochre, sinter, rust,\n// sulphur, grey clay, ochre, dark rust, tuff, sulphur, dark clay, basalt.\nconst LAY = [[206, 200, 186, 3], [176, 172, 166, 2], [172, 122, 54, 2], [196, 188, 172, 2], [150, 70, 40, 3], [206, 182, 62, 1], [126, 116, 108, 4], [162, 112, 52, 2], [120, 56, 36, 2], [104, 92, 84, 4], [200, 176, 64, 1], [84, 74, 72, 5], [58, 58, 68, 99]];\nconst SULF = [214, 190, 70], RUST = [158, 76, 42], LINE = [214, 210, 196], SNOW = [214, 222, 236];\nconst MAT = [[96, 116, 52], [214, 112, 38], [212, 186, 70]];\nconst COOL = [24, 62, 150], HOT = [44, 176, 204], FOAM = [212, 232, 236];\nconst JACK = [[200, 46, 40], [232, 192, 44], [40, 92, 200], [44, 44, 52], [58, 140, 92], [222, 112, 34], [150, 60, 150]];\n\n// Noon, blue hour, night: sky overhead and at the horizon, daylight, steam lit\n// and in shade, the cut rock, the water.\nconst LIGHT = [\n  [0, [20, 62, 152], [122, 156, 198], [0.95, 0.93, 0.88], [236, 234, 226], [118, 134, 168], 1, 1],\n  [0.5, [10, 24, 74], [66, 88, 148], [0.42, 0.48, 0.7], [158, 168, 212], [50, 60, 108], 0.85, 0.78],\n  [1, [3, 7, 24], [12, 26, 54], [0.24, 0.3, 0.42], [132, 154, 168], [30, 42, 70], 0.62, 0.6],\n];\nfunction lightAt(g) {\n  const a = LIGHT[g > 0.5 ? 1 : 0], b = LIGHT[g > 0.5 ? 2 : 1], u = (g - a[0]) / (b[0] - a[0]);\n  const m = (k) => (a[k].length ? a[k].map((v, c) => mix(v, b[k][c], u)) : mix(a[k], b[k], u));\n  return { top: m(1), low: m(2), amb: m(3), lit: m(4), dark: m(5), rock: m(6), water: m(7), sun: 1 - sm(0, 0.4, g), ag: sm(0.15, 0.45, g) * (1 - sm(0.55, 0.85, g)), moon: sm(0.6, 0.95, g), stars: sm(0.4, 0.85, g), aur: sm(0.6, 0.95, g) };\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), bg: F32(N * 3), rock: F32(N * 3), kind: new Uint8Array(N), sky: new Uint8Array(N), fu: F32(N), D: F32(N), CB: F32(N),\n    t: 0, ph: 0, pt: HEAT - 1.25, wl: BRIM, wl0: LOW, T: 0.9, T0: 0.25, hv: 0, dh: 0, bw: 6, key: -1, ca: 99, ja: 99,\n    bub: [], par: [], spr: [], puffs: [], pop: 0, nb: 0, np: 0, ns: 0, nv: 0, ox: 0, oy: 0, big: -1,\n  });\n  const { kind, fu, rock } = S;\n  // Kinds: 0 the view, 1 the bowl, 2 rock, 3 conduit, 4 crack, 5 chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5;\n    let k = Y >= SURF[x] ? 2 : abs(X - C) \u003c 12 && Y >= BRIM ? 1 : 0;\n    if (k === 2 && ((X - KX) / KRX) ** 2 + ((Y - KY) / KRY) ** 2 \u003c 1 + 0.5 * (vn(X * 0.35, Y * 0.35) - 0.5)) k = 5;\n    else if (k === 2 && y \u003c KY && abs(X - CXA[y]) \u003c CHW[y]) k = 3;\n    kind[i] = k;\n    if (!k && Y \u003c min(HILL[x], CAP[x])) S.sky[i] = 1;\n  }\n  for (const p of FIS)\n    for (let j = 1, len = 0; j \u003c p.length; j++) {\n      const [x0, y0] = p[j - 1], [x1, y1] = p[j], n = hypot(x1 - x0, y1 - y0) * 3;\n      for (let u = 0; u \u003c= n; u++) {\n        const i = floor(mix(y0, y1, u / n)) * W + floor(mix(x0, x1, u / n));\n        if (kind[i] === 2) (kind[i] = 4), (fu[i] = len + u / 3);\n      }\n      len += n / 3;\n    }\n  // The cut rock: beds bend with the ground, a silica lining and sulphur and\n  // rust stains round every water way, columnar basalt below, bacterial mats\n  // on the mound and snow on the flat.\n  const cav = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, dx = abs(X - C), s = SURF[x];\n    if (kind[i] >= 3) cav.push(i);\n    if (kind[i] !== 2) continue;\n    let d = Y - s + 2.4 * (vn(x * 0.08, y * 0.06 + 9) - 0.5) + 0.05 * (X - C), j = 0, dist = 9, gr = 0.9 + 0.18 * hash(x, y + 77);\n    while (d > LAY[j][3] && j \u003c LAY.length - 1) (d -= LAY[j][3]), j++;\n    let c = LAY[j];\n    if (j === LAY.length - 1) {\n      const jx = (X + 3 * vn(1.7, Y * 0.12)) / 6;\n      gr *= (jx - floor(jx) \u003c 0.17 ? 0.6 : 1) * (0.85 + 0.3 * hash(floor(jx), 5));\n    }\n    for (let v = -5; v \u003c= 5; v++)\n      for (let u = -5; u \u003c= 5; u++) {\n        const xx = x + u, yy = y + v, k = xx >= 0 && xx \u003c W && yy \u003c H ? kind[yy * W + xx] : 2;\n        if (k !== 2 && k) dist = min(dist, hypot(u, v) * (k === 4 ? 2.5 : 1));\n      }\n    if (dist \u003c 1.5) c = LINE;\n    else if (dist \u003c 5) c = c.map((v, n) => mix(v, (dist \u003c 3 ? SULF : RUST)[n], (5 - dist) * 0.17));\n    if (dx > 13 && dx \u003c 26 && Y - s \u003c 1.4) c = MAT[floor(cl(vn(X * 0.45, 2) * 2.2 - 0.3, 0, 2.99))];\n    if (dx >= 26 && Y - s \u003c 1.5) c = SNOW;\n    for (let n = 0; n \u003c 3; n++) rock[i * 3 + n] = c[n] * gr;\n  }\n  S.cav = Int32Array.from(cav);\n  // Visitors behind the rope on both sides, in their parkas.\n  S.ppl = [];\n  for (const [x0, x1] of [[2, 18], [46, 62]])\n    for (let x = x0 + rnd() * 2; x \u003c x1; x += 2.2 + rnd() * 2.4)\n      S.ppl.push({ x: floor(x), h: rnd() \u003c 0.3 ? 5 : 4, c: JACK[floor(rnd() * 7)], hat: rnd() \u003c 0.5, dl: rnd() * 0.9, up: rnd() \u003c 0.7 });\n}\n\n// The breeze in columns per second at row y, stronger aloft.\nconst wind = (S, y) => (6 + 16 * S.w) * (0.35 + 0.65 * sm(80, 8, y));\nfunction puff(S, x, y, r, a, vy, life, gr, rmax) {\n  if (S.puffs.length > 210) S.puffs.shift();\n  S.puffs.push({ x, y, r, a, vy, rise: -(1 + 2.5 * rnd()), life, gr, rmax, age: 0, ph: rnd() * 7 });\n}\nconst spray = (S, x, y, vx, vy) => S.spr.length \u003c 700 && S.spr.push({ x, y, vx, vy, life: 2.5 });\n\nfunction enter(S, ph) {\n  Object.assign(S, { ph, pt: 0, wl0: S.wl, T0: S.T });\n  if (ph === 2) S.ca = 0;\n  if (ph === 3) {\n    // The dome tears open in a ring of spray.\n    S.ja = 0;\n    for (let n = 0; n \u003c 40; n++) spray(S, C + (rnd() - 0.5) * S.bw * 1.6, BRIM - S.dh * rnd(), (rnd() - 0.5) * 70, -(40 + 90 * rnd()));\n    for (let n = 0; n \u003c 6; n++) puff(S, C + (rnd() - 0.5) * 12, BRIM - 3 - 4 * rnd(), 3 + rnd() * 2, 0.6, -(10 + 10 * rnd()), 8 + 3 * rnd(), 1.5, 12 + 6 * S.P);\n  }\n}\n\nfunction step(S, d, hold) {\n  const P = S.P, Dj = 1.1 + 1.1 * P, Rl = RISE - 0.35 * P, Dl = DOME - 0.2 * P, t = (S.t += d);\n  if (!hold) (S.pt += d), (S.ca += d), (S.ja += d);\n  if (S.pt >= [HEAT, Rl, Dl, Dj, FALL][S.ph]) enter(S, (S.ph + 1) % 5);\n  const { ph, pt } = S;\n  // The water level and how hot the water is.\n  if (ph === 0) (S.wl = mix(S.wl0, BRIM, sm(0, 6, pt))), (S.T = mix(S.T0, 1, sm(0, HEAT, pt)));\n  else if (ph === 1) (S.wl = mix(S.wl0, BRIM, sm(0, 0.5, pt))), (S.T = mix(S.T0, 1, sm(0, 0.4, pt)));\n  else if (ph === 2) S.wl = BRIM;\n  else if (ph === 3) (S.wl = BRIM), (S.T = 1 - 0.65 * sm(0, Dj, pt));\n  else (S.wl = mix(S.wl0, LOW, sm(0.2, 2.6, pt)) + 1.6 * exp(-pt * 1.1) * sin(pt * 10) * sm(0.3, 0.8, pt)), (S.T = mix(S.T0, 0.25, sm(0, FALL, pt)));\n  // The pool heaves before it goes, the big bubble climbs, the dome swells.\n  S.hv = ph === 0 ? (1.1 + P) * sm(4.5, 7.5, pt) * sin(t * 4.2) ** 2 : ph === 1 ? 1 + (2.2 + P) * sm(0, Rl, pt) : 0;\n  S.big = ph === 1 ? mix(KY - KRY + 1, BOWL - 2, sm(0, Rl, pt) ** 1.4) : -1;\n  S.bw = 7.5 + 4 * P;\n  S.dh = ph === 2 ? (9 + 7 * P) * sm(0, Dl, pt) ** 0.8 + 0.5 * sin(pt * 30) : 0;\n\n  // Steam bubbles grow as they climb from the chamber's floor. They collapse\n  // in cooler water; once it is hot through they reach the pool and pop.\n  for (S.nb += d * (1.5 + 18 * S.T * S.T) * (ph === 3 ? 3 : ph === 4 ? 0.3 : 1) * (1 + 0.8 * P); S.nb >= 1; S.nb--)\n    if (S.bub.length \u003c 160) S.bub.push({ x: KX + (rnd() - 0.5) * KRX * 1.3, y: KY + KRY * (0.25 + 0.5 * rnd()), r: 0.4, v: 3 + 4 * rnd() });\n  const cr = ph > 0 && ph \u003c 4 ? -9 : mix(106, BOWL - 4, sm(0.35, 0.92, S.T));\n  for (const b of S.bub) {\n    const yi = cl(floor(b.y), 0, H - 1), inC = b.y \u003c KY - KRY + 1.5;\n    if (inC) (b.x += (CXA[yi] + 0.5 - b.x) * min(1, d * 8)), (b.v = min(32, b.v + 26 * d));\n    else (b.x += (KX - b.x) * d * 0.4 * sm(KY, KY - KRY, b.y) + sin(t * 3 + b.y) * d), (b.v = min(14, b.v + 8 * d));\n    b.y -= b.v * d * (ph === 3 ? 1.8 : 1);\n    b.r = min(inC ? (b.y \u003c BOWL ? 1.2 : CHW[yi] - 0.3) : 2.3, b.r + d * (0.3 + 0.7 * S.T));\n    if (b.y \u003c cr || (S.big > 0 && b.y > S.big && b.y \u003c S.big + 10)) b.dead = 1;\n    else if (b.y \u003c= S.wl + 0.5) {\n      b.dead = 1;\n      if (S.wl \u003c BOWL) {\n        S.pop = min(1.5, S.pop + 0.15 * b.r);\n        if (rnd() \u003c 0.5) puff(S, b.x + (rnd() - 0.5) * 8, S.wl - 2, 1.8, 0.3, -6, 3 + 2 * rnd(), 1, 5);\n      }\n    }\n  }\n  S.bub = S.bub.filter((b) => !b.dead);\n  S.pop *= exp(-3 * d);\n\n  // The jet: slabs of water fly up and spread; past the top they break up.\n  if (ph === 3) {\n    const u = pt / Dj, v = sqrt(2 * G * (64 + 46 * P)) * (1 - 0.25 * sm(0.7, 1, u)) * (1 - 0.6 * sm(0.45, 0.8, P) * exp(-(((u - 0.48) / 0.09) ** 2)));\n    for (S.np += d * v * 0.6; S.np >= 1; S.np--) S.par.push({ x: C + (rnd() - 0.5) * 1.2, y: BRIM - 1 - v * d * rnd(), vy: -v * (0.95 + 0.1 * rnd()), w: (3.5 + 3.5 * P) * (0.85 + 0.3 * rnd()), a: 1, ap: 0 });\n  }\n  for (const q of S.par) {\n    q.vy += G * d;\n    q.y += q.vy * d;\n    q.x += wind(S, q.y) * 0.35 * d;\n    q.w += d * (4.5 + 4.5 * P) * (q.ap ? 2 : 1);\n    if (!q.ap && q.vy > -25) {\n      q.ap = 1;\n      for (let n = 0; n \u003c 2; n++) spray(S, q.x + (rnd() - 0.5) * q.w * 2, q.y, (rnd() - 0.5) * 64, q.vy + (rnd() - 0.6) * 30);\n    }\n    if (rnd() \u003c d * 3) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      spray(S, q.x + sd * q.w, q.y, sd * (8 + 26 * rnd()), q.vy * 0.75);\n    }\n    if (q.ap) q.a -= d * 1.6;\n    if (q.y > BRIM || q.a \u003c= 0) q.dead = 1;\n  }\n  S.par = S.par.filter((q) => !q.dead);\n  // Steam boils off the column while it stands and a little after.\n  if (S.ja \u003c Dj + 0.8 && S.par.length)\n    for (S.ns += d * (40 + 40 * P); S.ns >= 1; S.ns--) {\n      const q = S.par[floor(rnd() * S.par.length)];\n      puff(S, q.x + (rnd() - 0.5) * q.w * 1.8, q.y, 2.5 + q.w * 0.6, 0.55 + 0.25 * rnd(), max(-30, q.vy * 0.3), 10 + 4 * rnd() + 3 * P, 2 + 1.5 * rnd(), 17 + 7 * P);\n    }\n  for (const s of S.spr) {\n    s.vy = min(90, s.vy + G * 0.85 * d);\n    s.vx *= 1 - 0.5 * d;\n    s.x += (s.vx + wind(S, s.y) * 0.5) * d;\n    s.y += s.vy * d;\n    s.life -= d;\n    const x = floor(s.x), y = floor(s.y);\n    if (s.life \u003c 0 || x \u003c 0 || x >= W || y >= H || (y >= 0 && S.kind[y * W + x] && s.vy > 0)) s.dead = 1;\n  }\n  S.spr = S.spr.filter((s) => !s.dead);\n\n  // Gentle steam off the pool, and from small vents out on the field.\n  const wet = S.wl \u003c BOWL - 1;\n  for (S.nv += d * (2 + (wet ? 4 + 5 * S.T : 1) * (1 + P)); S.nv >= 1; S.nv--)\n    if (rnd() \u003c 0.7) puff(S, C + (rnd() - 0.5) * (wet ? 20 : 6), (wet ? S.wl : BOWL) - 1, 1.6 + rnd(), 0.22 + 0.2 * rnd(), -(5 + 3 * rnd()), 4 + 2 * rnd(), 1, 6);\n    else {\n      const v = [[7, 67], [52, 64], [21, 63], [60, 70]][floor(rnd() * 4)];\n      puff(S, v[0] + rnd() - 0.5, v[1], 1.1, 0.3, -(4 + 2 * rnd()), 3.5 + 2 * rnd(), 0.8, 4);\n    }\n  for (const q of S.puffs) {\n    q.age += d;\n    q.vy += (q.rise - q.vy) * 1.2 * d;\n    q.y += q.vy * d;\n    q.x += (wind(S, q.y) + 1.2 * sin(q.age * 1.1 + q.ph)) * d;\n    q.r = min(q.rmax, q.r + q.gr * d);\n  }\n  S.puffs = S.puffs.filter((q) => q.age \u003c q.life && q.y + q.r > -6 && q.x > -26 && q.x \u003c W + 26);\n  S.ox += wind(S, 25) * 0.2 * d;\n  S.oy -= 0.6 * d;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.g, S.P, S.w] = [cl(k[0], 0, 1), cl(k[2], 0, 1), cl(k[3], -1, 1)];\n  if (!S.init) {\n    // Open on a steaming field with the last cloud still high up; the pool holds its phase.\n    for (let n = 0; n \u003c 18; n++) puff(S, -10 + n * 4 + rnd() * 4, 8 + 24 * rnd(), 6 + 4 * rnd(), 0.4 + 0.15 * rnd(), -2, 15 + 4 * rnd(), 0.8, 16), (S.puffs[n].age = 2 + 4 * rnd());\n    for (let n = 0; n \u003c 150; n++) step(S, 1 / 30, 1);\n    S.bub.length = S.pop = S.t = 0;\n    S.init = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === 0 || S.ph === 4)) enter(S, 1);\n  step(S, (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2);\n}\n\n// The view and the cut rock, kept until the light changes.\nfunction backdrop(S) {\n  const L = (S.L = lightAt(S.g)), BG = S.bg, R = S.rock, { amb, top, low } = L;\n  S.key = round(S.g * 60);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, k = S.kind[i];\n    let c;\n    if (k >= 2) c = k === 2 ? [R[o], R[o + 1], R[o + 2]] : [26, 28, 36];\n    else if (k === 1) {\n      // The far wall of the bowl, wet sinter.\n      const v = (0.75 + 0.3 * hash(x, y)) * (0.8 + 0.25 * vn(X * 0.5, Y * 0.9));\n      c = [62 * v, 86 * v, 90 * v];\n    }\n    if (c) c = sc(c, L.rock);\n    else if (S.sky[i]) {\n      const sd = hypot(X - 9, Y - 53), md = hypot(X - 13, Y - 15), v = (Y / HZ) ** 1.3;\n      const sg = L.sun * (0.6 * exp(-sd / 9) + (sd \u003c 1.7 ? 1.1 : 0)), ag = L.ag * exp(-(((Y - 58) / 9) ** 2)) * (1 - X / 80);\n      const mg = L.moon * ((md \u003c 2.4 ? 0.9 : 0) + 0.12 * exp(-md / 5)), st = hash(x, y) \u003c 0.013 && Y \u003c 52 ? L.stars * (90 + 140 * hash(y, x)) : 0;\n      c = top.map((a, n) => mix(a, low[n], v) + sg * [255, 206, 130][n] + ag * [110, 92, 168][n] + mg * [228, 230, 238][n] + st * [0.85, 0.9, 1][n]);\n    } else if (Y \u003c HZ) {\n      // The ice cap; snow and scree on the hill.\n      const sn = vn(x * 0.16, y * 0.3) + 0.35 * vn(x * 0.5, y * 0.8) - 0.01 * (Y - HILL[x]) > 0.55;\n      c = Y \u003c HILL[x] ? [222, 232, 246].map((a, n) => a * amb[n] * 0.92 + low[n] * 0.1) : sc(sn ? sc(SNOW, 0.74 + 0.004 * x) : [64, 60, 62], amb);\n    } else if (Y \u003c HZ + 1.5) c = sc([92, 100, 118], amb);\n    else {\n      // The flat field: snow, and bare warm ground near the springs.\n      const f = (Y - HZ) / (GY - HZ), b = 0.7 * sm(0.6, 0.66, vn((X * 0.1) / (0.35 + f), y * 0.6)) * sm(27, 10, abs(X - C));\n      c = SNOW.map((a, n) => mix(a * (0.8 + 0.2 * f), [112, 92, 70][n], b) * amb[n]);\n    }\n    for (let n = 0; n \u003c 3; n++) BG[o + n] = c[n];\n  }\n}\n\n// Add an elliptical blob to a density field.\nfunction splat(A, cx, cy, rx, ry, a) {\n  const y1 = min(H - 1, cy + ry), x0 = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx);\n  for (let y = max(0, floor(cy - ry)); y \u003c= y1; y++) {\n    const dy = (y + 0.5 - cy) / ry, dd = 1 - dy * dy;\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = (x + 0.5 - cx) / rx, e = dd - dx * dx;\n      if (e > 0) A[y * W + x] += a * e;\n    }\n  }\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], c[n], a);\n}\n\n// Shade a density field over the frame, lit on the side facing the light.\nfunction shade(S, A, k0, lit, dark, tint, jet) {\n  for (let i = 0; i \u003c N; i++) {\n    const v = A[i];\n    if (v \u003c 0.015) continue;\n    const x = i & 63, y = i >> 6, o = i * 3;\n    const tex = jet ? vn(x * 0.5, (y + S.t * 10) * 0.25) : vn(x * 0.18 - S.ox, y * 0.18 - S.oy);\n    const al = min(0.95, 1 - exp(-v * (k0 + 1.6 * tex))), gx = v - A[x > 1 && y > 1 ? i - (jet ? 2 : 2 * W + 2) : i];\n    const sh = cl(0.52 + (jet ? 0.9 : 0.5) * gx + 0.45 * (tex - 0.5), 0.12, 1.02), tt = jet ? sm(BRIM - 16, BRIM, y) * 0.6 : 0;\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], mix(mix(dark[n], lit[n], sh), jet ? tint[n] : 0, tt), al);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  if (S.key !== round(S.g * 60)) backdrop(S);\n  F = S.f;\n  F.set(S.bg);\n  const L = S.L, { t, kind, D, CB, ph, wl, T, P } = S, amb = L.amb, Lw = L.water, Lr = L.rock;\n\n  // Aurora: a green hem, rays rising into violet.\n  if (L.aur > 0.01)\n    for (let k = 0; k \u003c 2; k++)\n      for (let x = 0; x \u003c W; x++) {\n        const yb = 30 + 8 * k + 5 * sin(x * 0.08 + t * 0.22 + k * 2.1) + 8 * (vn(x * 0.07 + t * 0.12, k * 7) - 0.5);\n        const I = L.aur * sm(0.3, 0.75, vn(x * 0.09 - t * 0.1 + k * 3, t * 0.04 + k)) * (0.5 + 0.5 * vn(x * 0.7 + t * 0.5, k * 11 + t * 0.3));\n        if (I \u003c 0.02) continue;\n        for (let y = max(0, floor(yb - 26)); y \u003c= yb; y++) {\n          const i = y * W + x, u = (yb - y) / 26, e = I * (u \u003c 0.08 ? u / 0.08 : exp(-u * 2.2)) * 0.9, v = sm(0.35, 1, u);\n          if (S.sky[i]) (F[i * 3] += mix(40, 96, v) * e), (F[i * 3 + 1] += mix(214, 60, v) * e), (F[i * 3 + 2] += mix(120, 176, v) * e);\n        }\n      }\n\n  // The visitors behind the rope; once the dome rises most hold up a phone.\n  for (const p of S.ppl) {\n    const hy = GY - p.h, jc = sc(p.c, amb);\n    put(p.x, GY - 1, sc([30, 30, 36], amb));\n    for (let y = hy + 1; y \u003c GY - 1; y++) put(p.x, y, jc);\n    put(p.x, hy, p.hat ? jc : sc([226, 186, 160], amb));\n    if (p.up && S.ca > p.dl && S.ca \u003c 6 + p.dl) put(p.x + 1, hy, jc), put(p.x + 1, hy - 1, L.stars > 0.3 ? [180, 210, 255] : [40, 40, 50]);\n  }\n  for (const x of [1, 8, 15, 49, 56, 63]) for (let y = GY - 3; y \u003c GY; y++) put(x, y, sc([70, 56, 40], amb));\n  for (let x = 1; x \u003c 64; x++) if (x \u003c 16 || x > 48) put(x, GY - 3 + (sin(((x - 1) / 7) * Math.PI) > 0.2 ? 1 : 0), sc([214, 184, 64], amb), 0.8);\n\n  // All the steam, summed and shaded.\n  D.fill(0);\n  for (const q of S.puffs) {\n    const a = q.a * sm(0, 0.4, q.age) * (1 - sm(q.life * 0.45, q.life, q.age));\n    if (a > 0.01) splat(D, q.x, q.y, q.r, q.r, a);\n  }\n  shade(S, D, 1.1, L.lit, L.dark);\n\n  // The pool in section, its heave, ripples and dome.\n  const foam = ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1.2, S.pt) : 0;\n  for (let x = 20; x \u003c 44; x++) {\n    const dx = x + 0.5 - C;\n    let top = wl - S.hv * max(0, 1 - (dx / 10) ** 2) + S.pop * sin(x * 1.3 - t * 14) * 0.6 + foam * 1.5 * (hash(x, floor(t * 20)) - 0.5);\n    const dome = S.dh > 0 && abs(dx) \u003c S.bw ? S.dh * (1 - (dx / S.bw) ** 2) ** 0.75 : 0;\n    if (dome) top = min(top, BRIM - dome);\n    for (let y = max(0, floor(top)); y \u003c SURF[x]; y++) {\n      const z = y + 0.5 - top;\n      if (z \u003c 0 || (kind[y * W + x] !== 1 && y >= BRIM)) continue;\n      let c;\n      if (dome && y \u003c BRIM) {\n        const nx = dx / S.bw, ny = (BRIM - y) / (S.dh + 0.1), sp = exp(-((nx + 0.42) ** 2) / 0.03 - (ny - 0.6) ** 2 / 0.08);\n        c = [40, 150, 176].map((v, n) => (mix(v, [110, 226, 230][n], ny * 0.8 + 0.3 * abs(nx)) * (0.85 + 0.25 * vn(x * 0.5, y * 0.5 - t * 6)) + 150 * sp + (z \u003c 1 ? 70 : 0)) * Lw);\n      } else if (z \u003c 1) c = sc([150, 224, 226], Lw);\n      else c = [60, 190, 200].map((v, n) => mix(v, [18, 70, 140][n], sm(0, 10, z)) * Lw * (0.88 + 0.24 * vn(x * 0.45 + t * 0.6, y * 0.7 - t * 0.4)));\n      if (foam && z \u003c 3 && hash(x, y + floor(t * 25)) \u003c 0.6 * foam) c = sc(FOAM, Lw);\n      put(x, y, c);\n    }\n  }\n\n  // The column and its spray.\n  CB.fill(0);\n  for (const q of S.par) splat(CB, q.x, q.y, q.w, 2.8, q.a);\n  if (S.par.length) shade(S, CB, 1.8, L.lit.map((v) => min(240, v * 1.04)), L.dark, [70 * Lw, 200 * Lw, 212 * Lw], 1);\n  for (const s of S.spr) {\n    const a = min(1, s.life * 1.5) * 0.85;\n    put(s.x - s.vx * 0.02, s.y - s.vy * 0.02, L.lit, a * 0.35);\n    put(s.x, s.y, L.lit, a);\n  }\n\n  // Under the ground: the conduit, the chamber and the cracks feeding it.\n  const froth = ph === 3 ? 1 - 0.5 * sm(0.6, 1, S.pt / (1.1 + 1.1 * P)) : ph === 2 ? 0.3 : ph === 1 ? 0.12 : 0;\n  const inflow = ph === 0 ? 1 - sm(4, 6.5, S.pt) * 0.8 : ph === 4 ? sm(1, 3, S.pt) : 0.2;\n  for (const i of S.cav) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = kind[i];\n    let r, g, b;\n    if (k === 4) {\n      const p = inflow * sm(0.55, 1, sin(S.fu[i] * 0.7 - t * 7));\n      (r = 20 + 80 * p), (g = 46 + 130 * p), (b = 104 + 110 * p);\n    } else if (k === 3 && y + 0.5 \u003c wl) {\n      // Drained: wet walls with a film running down.\n      const f = ph === 4 && hash(x, floor(y - t * 26)) \u003c 0.12;\n      (r = f ? 70 : 30), (g = f ? 104 : 33), (b = f ? 124 : 42);\n    } else if (froth && hash(x, floor(y + t * 80)) \u003c froth * (k === 5 ? 0.4 : 0.55)) [r, g, b] = FOAM;\n    else {\n      // Cool water blue, hot water turquoise.\n      const Tl = cl(T * (0.7 + 0.3 * sm(BOWL, KY + KRY, y)) + (k === 5 ? 0.08 : 0), 0, 1), sh = (0.86 + 0.28 * vn(x * 0.6, y * 0.3 + t * 2)) * (k === 3 && y === floor(wl) ? 1.3 : 1);\n      (r = mix(COOL[0], HOT[0], Tl) * sh), (g = mix(COOL[1], HOT[1], Tl) * sh), (b = mix(COOL[2], HOT[2], Tl) * sh);\n    }\n    (F[o] = r * Lr), (F[o + 1] = g * Lr), (F[o + 2] = b * Lr);\n  }\n  for (const { x, y, r } of S.bub)\n    if (r \u003c 0.9) put(x, y, FOAM, 0.85);\n    else\n      for (let v = floor(y - r); v \u003c= y + r; v++)\n        for (let u = floor(x - r); u \u003c= x + r; u++) {\n          const e = hypot(u + 0.5 - x, v + 0.5 - y) / r;\n          if (e \u003c 1) put(u, v, e > 0.6 ? [150, 220, 230] : FOAM, 0.9);\n        }\n  if (S.big > 0)\n    for (let y = floor(S.big); y \u003c S.big + 10; y++) {\n      const cx = CXA[y] + 0.5, hw = CHW[y] * min(1, 0.5 + 0.5 * (y + 1 - S.big)) - 0.3;\n      for (let x = floor(cx - hw); x \u003c cx + hw; x++) put(x, y, abs(x + 0.5 - cx) > hw - 1 ? [160, 236, 240] : [236, 246, 248], 0.97);\n    }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer."},{"name":"Power","min":0,"max":1,"about":"At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows."},{"name":"Wind","min":-1,"max":1,"about":"At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.1931,"detail":0.0478,"edges":0.2475,"complexity":2.0465,"coverage":1,"colour":0.26,"drift":0.0438},"knobResponse":[0.2681,0.0644,0.048,0.0484]},{"slug":"gibbs-phenomenon","title":"Gibbs Phenomenon","family":"wave","round":36,"note":"사각파 한 주기가 가로로 놓이고, 아래로 내려갈수록 푸리에 부분합의 항이 늘어 맨 위 1항에서 맨 아래 32항까지 25줄마다 두 배가 돼요. 합이 파형을 넘어선 곳은 흰 금색으로 타서 점프마다 양옆에 뿔이 서고, 뿔은 아래로 갈수록 점프에 붙지만 높이는 언제나 점프의 8.95% 예요. K3 은 사각파를 톱니파를 거쳐 삼각파로 바꿔 점프와 함께 뿔을 지우고, K1 을 누르면 맨 아래 줄이 256항까지 달리며 그 합의 그래프가 금색 눈금에 닿아요.","idea":"One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.","buttons":"K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.","code":"// ===== Patternflow pattern =====\n// Title:   Gibbs Phenomenon\n// Family:  wave\n// Idea:    One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gibbs phenomenon (Henry Wilbraham, 1848; J. Willard Gibbs, 1899), with Fejér's means (Lipót Fejér, 1900), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1\n//\n// Knob 1: Hue. Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive.\n// Knob 2: Speed. How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows.\n// Knob 3: Shape. Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn.\n// Knob 4: Fejer. Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too.\n// Buttons: K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.\n\nconst W = 64, H = 128, NMAX = 32, RACE = 8;\n// Subsamples per column: four, and 24 in a column within one LED of a jump.\nconst SS = 4, SSJ = 24;\n// How far either side of a point the wave's own range is read, in radians:\n// a sum is past the wave where it leaves [min, max] of the wave over x +- DEL.\nconst DEL = 0.12;\n// The limit of the overshoot: (1/pi) int_0^pi sin t / t dt - 1/2 of the jump.\nconst GIBBS = 0.0894899;\n// The graph the button draws: value v at row GY - GS v.\nconst GY = 24, GS = 16;\nconst { floor, min, max, abs, sin, cos, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The three waves on [0, 2 pi), all between -1 and 1. The square is 1 on\n// (0, pi) and -1 on (pi, 2 pi); the sawtooth rises as x / pi from -1 just past\n// pi to 1 just before it; the triangle peaks at 1 at pi/2.\nconst sq = (x) => (x \u003c PI ? 1 : -1);\nconst saw = (x) => (x \u003c PI ? x / PI : x / PI - 2);\nconst tri = (x) => (x \u003c PI / 2 ? (2 * x) / PI : x \u003c (3 * PI) / 2 ? 2 - (2 * x) / PI : (2 * x) / PI - 4);\n// Their sine coefficients: 4 / (pi k) on odd k; 2 (-1)^(k+1) / (pi k);\n// 8 (-1)^((k-1)/2) / (pi k)^2 on odd k.\nconst bSq = (k) => (k & 1 ? 4 / (PI * k) : 0);\nconst bSaw = (k) => ((k & 1 ? 2 : -2) / (PI * k));\nconst bTri = (k) => (k & 1 ? ((k & 2 ? -8 : 8) / (PI * PI * k * k)) : 0);\n\n// Shape 0..1 as weights on square, sawtooth and triangle.\nfunction weights(s) {\n  return s \u003c 0.5 ? [1 - 2 * s, 2 * s, 0] : [0, 2 - 2 * s, 2 * s - 1];\n}\n\nconst wave = (x, w) => w[0] * sq(x) + w[1] * saw(x) + w[2] * tri(x);\n\n// The wave's range over [x - DEL, x + DEL]: the ends, and both sides of any\n// jump or corner inside.\nconst SPECIAL = [0, PI / 2, PI, (3 * PI) / 2, TAU];\nconst waveAt = (t, w) => wave(t - floor(t / TAU) * TAU, w);\nfunction localRange(x, w, out) {\n  let lo = waveAt(x - DEL, w), hi = lo, v = waveAt(x + DEL, w);\n  if (v \u003c lo) lo = v;\n  if (v > hi) hi = v;\n  for (let n = -1; n \u003c= 1; n++)\n    for (let j = 0; j \u003c SPECIAL.length; j++) {\n      const t = SPECIAL[j] + n * TAU;\n      if (t \u003c= x - DEL || t >= x + DEL) continue;\n      for (const u of [t - 1e-9, t + 1e-9]) {\n        v = waveAt(u, w);\n        if (v \u003c lo) lo = v;\n        if (v > hi) hi = v;\n      }\n    }\n  out[0] = lo;\n  out[1] = hi;\n}\n\nexport function setup(params) {\n  const NS = W * SSJ;\n  params.s = {\n    hue: 0, speed: 2, shape: 0, fejer: 0, phase: 0, race: -1, bo: new Float64Array(RACE * NMAX + 2), bs: new Float64Array(RACE * NMAX + 2),\n    sx: new Float64Array(NS), sl: new Float64Array(NS), sh: new Float64Array(NS),\n    sum: new Float32Array(H), ex: new Float32Array(H), gmin: new Float32Array(W), gmax: new Float32Array(W), rk: new Float64Array(H),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), rr: [0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.shape = cl(k[2], 0, 1);\n  // Up to 0.06 the plain sums, so the opening shows the full 8.95%.\n  S.fejer = (max(0, cl(k[3], 0, 1) - 0.06) / 0.94) ** 2;\n  // At Speed 2 the wave slides 0.4 radians a second.\n  S.phase = (S.phase + d * S.speed * 0.2) % TAU;\n  if (input.btnPressed && input.btnPressed[0] && S.race \u003c 0) S.race = 0;\n  if (S.race >= 0) {\n    S.race += d;\n    if (S.race > 6) S.race = -1;\n  }\n}\n\n// The race: the bottom row's count of terms is multiplied by up to 8, rising\n// over 2.5 seconds, holding for 2 and coming back in 1.5.\nfunction raceFactor(t) {\n  if (t \u003c 0) return 1;\n  const u = t \u003c 2.5 ? t / 2.5 : t \u003c 4.5 ? 1 : max(0, (6 - t) / 1.5);\n  const e = u * u * (3 - 2 * u);\n  return RACE ** e;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, sx, sl, sh, sum, ex, rk, rr } = S;\n  const w = weights(S.shape), lam = S.fejer, nTop = NMAX * raceFactor(S.race);\n  const NN = Math.ceil(nTop);\n  // Row r sums the first n = 32^(r / 127) terms of each series, so the count\n  // doubles every 25 rows, continuous in n: between n and n + 1 the next\n  // term comes in by the fraction. The square and the triangle have only odd\n  // harmonics, so their n-th term is harmonic 2n - 1; the sawtooth's is n.\n  for (let r = 0; r \u003c H; r++) rk[r] = nTop ** (r / (H - 1));\n  const { bo, bs } = S;\n  for (let n = 1; n \u003c= NN; n++) {\n    bo[n] = w[0] * bSq(2 * n - 1) + w[2] * bTri(2 * n - 1);\n    bs[n] = w[1] * bSaw(n);\n  }\n  // The jumps of the wave, where it has any, set where the columns go fine.\n  const jumpAt = [];\n  if (w[0] > 0.001) jumpAt.push(0);\n  if (w[0] + w[1] > 0.001) jumpAt.push(PI);\n  // The overshoot the rulers stand at: the larger jump, the one at pi, is\n  // 2 (w0 + w1) tall, from -(w0 + w1) to w0 + w1.\n  const top = w[0] + w[1], ruler = top * (1 + 2 * GIBBS);\n\n  const cp = [0, 0, 0], cn = [0, 0, 0], gold = [1, 0.85, 0.52];\n  // Round orange and yellow a half is lifted, up to 1.8 times, and paled a\n  // little, so it reads amber or butter and not brown or olive.\n  for (const [h, out] of [[S.hue + 0.56, cp], [S.hue + 0.8, cn]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.1, 0, 1);\n    hsv(h, 0.85 - 0.25 * warm, 1 + 0.8 * warm, out);\n  }\n  const graph = S.race >= 0;\n  for (let col = 0; col \u003c W; col++) {\n    // Wave coordinate of the column's left edge.\n    const x0 = (col / W) * TAU - S.phase;\n    let near = false;\n    for (const j of jumpAt) {\n      const dj = ((((x0 + PI / W - j) % TAU) + TAU + PI) % TAU) - PI;\n      if (abs(dj) \u003c (1.6 * TAU) / W) near = true;\n    }\n    const ns = near ? SSJ : SS;\n    let fbar = 0;\n    for (let i = 0; i \u003c ns; i++) {\n      let x = x0 + ((i + 0.5) / ns) * (TAU / W);\n      x -= floor(x / TAU) * TAU;\n      sx[i] = x;\n      fbar += wave(x, w) / ns;\n      localRange(x, w, rr);\n      sl[i] = rr[0];\n      sh[i] = rr[1];\n    }\n    sum.fill(0);\n    ex.fill(0);\n    let gmin = Infinity, gmax = -Infinity;\n    for (let i = 0; i \u003c ns; i++) {\n      const x = sx[i], c1 = 2 * cos(x), c2 = 2 * cos(2 * x), lo = sl[i], hi = sh[i];\n      // sin(nx) and sin((2n - 1)x) by the Chebyshev recurrence.\n      let a0 = 0, a1 = sin(x), o0 = -sin(x), o1 = sin(x);\n      // Plain sums and Fejer means of the odd series and of the sawtooth.\n      // Fejer averages the partial sums over the harmonic index: S_0..S_K\n      // over K + 1, so the odd series adds its unchanged even-index sum too.\n      let So = 0, To = 0, fo = 0, Ss = 0, Ts = 0, fs = 0, r = 0, last = 0;\n      for (let n = 1; n \u003c= NN && r \u003c H; n++) {\n        const So0 = So, fo0 = fo, Ss0 = Ss, fs0 = fs;\n        To += So;\n        So += bo[n] * o1;\n        To += So;\n        fo = To / (2 * n);\n        Ss += bs[n] * a1;\n        Ts += Ss;\n        fs = Ts / (n + 1);\n        while (r \u003c H && rk[r] \u003c= n + 1e-9) {\n          const q = rk[r] - (n - 1);\n          const plain = So0 + q * (So - So0) + Ss0 + q * (Ss - Ss0), mean = fo0 + q * (fo - fo0) + fs0 + q * (fs - fs0);\n          // Past the wave: above its local top where the sum is positive, below\n          // its local bottom where negative. Falling short is not overshoot.\n          const v = (1 - lam) * plain + lam * mean, e = v > 0 ? v - hi : lo - v;\n          sum[r] += v;\n          if (e > ex[r]) ex[r] = e;\n          if (r === H - 1) last = v;\n          r++;\n        }\n        const a2 = c1 * a1 - a0;\n        a0 = a1;\n        a1 = a2;\n        const o2 = c2 * o1 - o0;\n        o0 = o1;\n        o1 = o2;\n      }\n      // The bottom row's sum, for the graph.\n      if (last \u003c gmin) gmin = last;\n      if (last > gmax) gmax = last;\n    }\n    S.gmin[col] = gmin;\n    S.gmax[col] = gmax;\n    for (let r = 0; r \u003c H; r++) {\n      const v = sum[r] / ns, c = v >= 0 ? cp : cn;\n      // The wave's own halves: 0.1 plus 0.32 times the size of the sum, and\n      // 1.8 times how far the sum is past the wave (outward) or short of it,\n      // so the fringes beside each jump show as light and dark bands.\n      const lv = cl(0.1 + 0.32 * min(1, abs(v)) + 1.8 * (v >= 0 ? v - fbar : fbar - v), 0, 0.8);\n      // Past the wave: white-gold, full from about 80% of the overshoot's\n      // limit, so the horns burn and the ripples of the first rows glow.\n      const g = sm(0.25, 0.85, ex[r] / (2 * GIBBS)), p = r * W + col;\n      R[p] = 255 * (c[0] * lv * (1 - g) + gold[0] * g);\n      G[p] = 255 * (c[1] * lv * (1 - g) + gold[1] * g);\n      B[p] = 255 * (c[2] * lv * (1 - g) + gold[2] * g);\n    }\n  }\n\n  if (graph) {\n    // The bottom row's sum as a graph over the top of the panel, with dim\n    // rulers at the wave's top and bottom and gold ones 8.95% of the jump\n    // past them.\n    const t = S.race, fade = min(1, t / 0.3, (6 - t) / 0.5);\n    const rows = GY + GS * 1.45;\n    for (let r = 0; r \u003c= rows; r++)\n      for (let col = 0; col \u003c W; col++) {\n        const p = r * W + col, k = 1 - 0.8 * fade;\n        R[p] *= k;\n        G[p] *= k;\n        B[p] *= k;\n      }\n    const rule = (v, col3, lv) => {\n      const r = round(GY - GS * v);\n      for (let x = 0; x \u003c W; x += 2) {\n        const p = r * W + x;\n        R[p] += col3[0] * lv * fade;\n        G[p] += col3[1] * lv * fade;\n        B[p] += col3[2] * lv * fade;\n      }\n    };\n    rule(top, [1, 1, 1], 70);\n    rule(-top, [1, 1, 1], 70);\n    rule(ruler, gold, 220);\n    rule(-ruler, gold, 220);\n    for (let col = 0; col \u003c W; col++) {\n      const ra = round(GY - GS * S.gmax[col]), rb = round(GY - GS * S.gmin[col]);\n      for (let r = max(0, ra); r \u003c= min(H - 1, rb); r++) {\n        const p = r * W + col;\n        R[p] = 255 * fade + R[p] * (1 - fade);\n        G[p] = 255 * fade + G[p] * (1 - fade);\n        B[p] = 255 * fade + B[p] * (1 - fade);\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-gibbs-phenomenon","type":"code","name":"gibbs-phenomenon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gibbs Phenomenon\n// Family:  wave\n// Idea:    One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gibbs phenomenon (Henry Wilbraham, 1848; J. Willard Gibbs, 1899), with Fejér's means (Lipót Fejér, 1900), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1\n//\n// Knob 1: Hue. Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive.\n// Knob 2: Speed. How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows.\n// Knob 3: Shape. Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn.\n// Knob 4: Fejer. Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too.\n// Buttons: K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.\n\nconst W = 64, H = 128, NMAX = 32, RACE = 8;\n// Subsamples per column: four, and 24 in a column within one LED of a jump.\nconst SS = 4, SSJ = 24;\n// How far either side of a point the wave's own range is read, in radians:\n// a sum is past the wave where it leaves [min, max] of the wave over x +- DEL.\nconst DEL = 0.12;\n// The limit of the overshoot: (1/pi) int_0^pi sin t / t dt - 1/2 of the jump.\nconst GIBBS = 0.0894899;\n// The graph the button draws: value v at row GY - GS v.\nconst GY = 24, GS = 16;\nconst { floor, min, max, abs, sin, cos, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The three waves on [0, 2 pi), all between -1 and 1. The square is 1 on\n// (0, pi) and -1 on (pi, 2 pi); the sawtooth rises as x / pi from -1 just past\n// pi to 1 just before it; the triangle peaks at 1 at pi/2.\nconst sq = (x) => (x \u003c PI ? 1 : -1);\nconst saw = (x) => (x \u003c PI ? x / PI : x / PI - 2);\nconst tri = (x) => (x \u003c PI / 2 ? (2 * x) / PI : x \u003c (3 * PI) / 2 ? 2 - (2 * x) / PI : (2 * x) / PI - 4);\n// Their sine coefficients: 4 / (pi k) on odd k; 2 (-1)^(k+1) / (pi k);\n// 8 (-1)^((k-1)/2) / (pi k)^2 on odd k.\nconst bSq = (k) => (k & 1 ? 4 / (PI * k) : 0);\nconst bSaw = (k) => ((k & 1 ? 2 : -2) / (PI * k));\nconst bTri = (k) => (k & 1 ? ((k & 2 ? -8 : 8) / (PI * PI * k * k)) : 0);\n\n// Shape 0..1 as weights on square, sawtooth and triangle.\nfunction weights(s) {\n  return s \u003c 0.5 ? [1 - 2 * s, 2 * s, 0] : [0, 2 - 2 * s, 2 * s - 1];\n}\n\nconst wave = (x, w) => w[0] * sq(x) + w[1] * saw(x) + w[2] * tri(x);\n\n// The wave's range over [x - DEL, x + DEL]: the ends, and both sides of any\n// jump or corner inside.\nconst SPECIAL = [0, PI / 2, PI, (3 * PI) / 2, TAU];\nconst waveAt = (t, w) => wave(t - floor(t / TAU) * TAU, w);\nfunction localRange(x, w, out) {\n  let lo = waveAt(x - DEL, w), hi = lo, v = waveAt(x + DEL, w);\n  if (v \u003c lo) lo = v;\n  if (v > hi) hi = v;\n  for (let n = -1; n \u003c= 1; n++)\n    for (let j = 0; j \u003c SPECIAL.length; j++) {\n      const t = SPECIAL[j] + n * TAU;\n      if (t \u003c= x - DEL || t >= x + DEL) continue;\n      for (const u of [t - 1e-9, t + 1e-9]) {\n        v = waveAt(u, w);\n        if (v \u003c lo) lo = v;\n        if (v > hi) hi = v;\n      }\n    }\n  out[0] = lo;\n  out[1] = hi;\n}\n\nexport function setup(params) {\n  const NS = W * SSJ;\n  params.s = {\n    hue: 0, speed: 2, shape: 0, fejer: 0, phase: 0, race: -1, bo: new Float64Array(RACE * NMAX + 2), bs: new Float64Array(RACE * NMAX + 2),\n    sx: new Float64Array(NS), sl: new Float64Array(NS), sh: new Float64Array(NS),\n    sum: new Float32Array(H), ex: new Float32Array(H), gmin: new Float32Array(W), gmax: new Float32Array(W), rk: new Float64Array(H),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), rr: [0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.shape = cl(k[2], 0, 1);\n  // Up to 0.06 the plain sums, so the opening shows the full 8.95%.\n  S.fejer = (max(0, cl(k[3], 0, 1) - 0.06) / 0.94) ** 2;\n  // At Speed 2 the wave slides 0.4 radians a second.\n  S.phase = (S.phase + d * S.speed * 0.2) % TAU;\n  if (input.btnPressed && input.btnPressed[0] && S.race \u003c 0) S.race = 0;\n  if (S.race >= 0) {\n    S.race += d;\n    if (S.race > 6) S.race = -1;\n  }\n}\n\n// The race: the bottom row's count of terms is multiplied by up to 8, rising\n// over 2.5 seconds, holding for 2 and coming back in 1.5.\nfunction raceFactor(t) {\n  if (t \u003c 0) return 1;\n  const u = t \u003c 2.5 ? t / 2.5 : t \u003c 4.5 ? 1 : max(0, (6 - t) / 1.5);\n  const e = u * u * (3 - 2 * u);\n  return RACE ** e;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, sx, sl, sh, sum, ex, rk, rr } = S;\n  const w = weights(S.shape), lam = S.fejer, nTop = NMAX * raceFactor(S.race);\n  const NN = Math.ceil(nTop);\n  // Row r sums the first n = 32^(r / 127) terms of each series, so the count\n  // doubles every 25 rows, continuous in n: between n and n + 1 the next\n  // term comes in by the fraction. The square and the triangle have only odd\n  // harmonics, so their n-th term is harmonic 2n - 1; the sawtooth's is n.\n  for (let r = 0; r \u003c H; r++) rk[r] = nTop ** (r / (H - 1));\n  const { bo, bs } = S;\n  for (let n = 1; n \u003c= NN; n++) {\n    bo[n] = w[0] * bSq(2 * n - 1) + w[2] * bTri(2 * n - 1);\n    bs[n] = w[1] * bSaw(n);\n  }\n  // The jumps of the wave, where it has any, set where the columns go fine.\n  const jumpAt = [];\n  if (w[0] > 0.001) jumpAt.push(0);\n  if (w[0] + w[1] > 0.001) jumpAt.push(PI);\n  // The overshoot the rulers stand at: the larger jump, the one at pi, is\n  // 2 (w0 + w1) tall, from -(w0 + w1) to w0 + w1.\n  const top = w[0] + w[1], ruler = top * (1 + 2 * GIBBS);\n\n  const cp = [0, 0, 0], cn = [0, 0, 0], gold = [1, 0.85, 0.52];\n  // Round orange and yellow a half is lifted, up to 1.8 times, and paled a\n  // little, so it reads amber or butter and not brown or olive.\n  for (const [h, out] of [[S.hue + 0.56, cp], [S.hue + 0.8, cn]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.1, 0, 1);\n    hsv(h, 0.85 - 0.25 * warm, 1 + 0.8 * warm, out);\n  }\n  const graph = S.race >= 0;\n  for (let col = 0; col \u003c W; col++) {\n    // Wave coordinate of the column's left edge.\n    const x0 = (col / W) * TAU - S.phase;\n    let near = false;\n    for (const j of jumpAt) {\n      const dj = ((((x0 + PI / W - j) % TAU) + TAU + PI) % TAU) - PI;\n      if (abs(dj) \u003c (1.6 * TAU) / W) near = true;\n    }\n    const ns = near ? SSJ : SS;\n    let fbar = 0;\n    for (let i = 0; i \u003c ns; i++) {\n      let x = x0 + ((i + 0.5) / ns) * (TAU / W);\n      x -= floor(x / TAU) * TAU;\n      sx[i] = x;\n      fbar += wave(x, w) / ns;\n      localRange(x, w, rr);\n      sl[i] = rr[0];\n      sh[i] = rr[1];\n    }\n    sum.fill(0);\n    ex.fill(0);\n    let gmin = Infinity, gmax = -Infinity;\n    for (let i = 0; i \u003c ns; i++) {\n      const x = sx[i], c1 = 2 * cos(x), c2 = 2 * cos(2 * x), lo = sl[i], hi = sh[i];\n      // sin(nx) and sin((2n - 1)x) by the Chebyshev recurrence.\n      let a0 = 0, a1 = sin(x), o0 = -sin(x), o1 = sin(x);\n      // Plain sums and Fejer means of the odd series and of the sawtooth.\n      // Fejer averages the partial sums over the harmonic index: S_0..S_K\n      // over K + 1, so the odd series adds its unchanged even-index sum too.\n      let So = 0, To = 0, fo = 0, Ss = 0, Ts = 0, fs = 0, r = 0, last = 0;\n      for (let n = 1; n \u003c= NN && r \u003c H; n++) {\n        const So0 = So, fo0 = fo, Ss0 = Ss, fs0 = fs;\n        To += So;\n        So += bo[n] * o1;\n        To += So;\n        fo = To / (2 * n);\n        Ss += bs[n] * a1;\n        Ts += Ss;\n        fs = Ts / (n + 1);\n        while (r \u003c H && rk[r] \u003c= n + 1e-9) {\n          const q = rk[r] - (n - 1);\n          const plain = So0 + q * (So - So0) + Ss0 + q * (Ss - Ss0), mean = fo0 + q * (fo - fo0) + fs0 + q * (fs - fs0);\n          // Past the wave: above its local top where the sum is positive, below\n          // its local bottom where negative. Falling short is not overshoot.\n          const v = (1 - lam) * plain + lam * mean, e = v > 0 ? v - hi : lo - v;\n          sum[r] += v;\n          if (e > ex[r]) ex[r] = e;\n          if (r === H - 1) last = v;\n          r++;\n        }\n        const a2 = c1 * a1 - a0;\n        a0 = a1;\n        a1 = a2;\n        const o2 = c2 * o1 - o0;\n        o0 = o1;\n        o1 = o2;\n      }\n      // The bottom row's sum, for the graph.\n      if (last \u003c gmin) gmin = last;\n      if (last > gmax) gmax = last;\n    }\n    S.gmin[col] = gmin;\n    S.gmax[col] = gmax;\n    for (let r = 0; r \u003c H; r++) {\n      const v = sum[r] / ns, c = v >= 0 ? cp : cn;\n      // The wave's own halves: 0.1 plus 0.32 times the size of the sum, and\n      // 1.8 times how far the sum is past the wave (outward) or short of it,\n      // so the fringes beside each jump show as light and dark bands.\n      const lv = cl(0.1 + 0.32 * min(1, abs(v)) + 1.8 * (v >= 0 ? v - fbar : fbar - v), 0, 0.8);\n      // Past the wave: white-gold, full from about 80% of the overshoot's\n      // limit, so the horns burn and the ripples of the first rows glow.\n      const g = sm(0.25, 0.85, ex[r] / (2 * GIBBS)), p = r * W + col;\n      R[p] = 255 * (c[0] * lv * (1 - g) + gold[0] * g);\n      G[p] = 255 * (c[1] * lv * (1 - g) + gold[1] * g);\n      B[p] = 255 * (c[2] * lv * (1 - g) + gold[2] * g);\n    }\n  }\n\n  if (graph) {\n    // The bottom row's sum as a graph over the top of the panel, with dim\n    // rulers at the wave's top and bottom and gold ones 8.95% of the jump\n    // past them.\n    const t = S.race, fade = min(1, t / 0.3, (6 - t) / 0.5);\n    const rows = GY + GS * 1.45;\n    for (let r = 0; r \u003c= rows; r++)\n      for (let col = 0; col \u003c W; col++) {\n        const p = r * W + col, k = 1 - 0.8 * fade;\n        R[p] *= k;\n        G[p] *= k;\n        B[p] *= k;\n      }\n    const rule = (v, col3, lv) => {\n      const r = round(GY - GS * v);\n      for (let x = 0; x \u003c W; x += 2) {\n        const p = r * W + x;\n        R[p] += col3[0] * lv * fade;\n        G[p] += col3[1] * lv * fade;\n        B[p] += col3[2] * lv * fade;\n      }\n    };\n    rule(top, [1, 1, 1], 70);\n    rule(-top, [1, 1, 1], 70);\n    rule(ruler, gold, 220);\n    rule(-ruler, gold, 220);\n    for (let col = 0; col \u003c W; col++) {\n      const ra = round(GY - GS * S.gmax[col]), rb = round(GY - GS * S.gmin[col]);\n      for (let r = max(0, ra); r \u003c= min(H - 1, rb); r++) {\n        const p = r * W + col;\n        R[p] = 255 * fade + R[p] * (1 - fade);\n        G[p] = 255 * fade + G[p] * (1 - fade);\n        B[p] = 255 * fade + B[p] * (1 - fade);\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows."},{"name":"Shape","min":0,"max":1,"about":"Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn."},{"name":"Fejer","min":0,"max":1,"about":"Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too."}],"start":[0,2,0,0.06],"measures":{"motion":0.5169,"detail":0.0632,"edges":0.2237,"complexity":1.7176,"coverage":0.871,"colour":0.3287,"drift":0.2332},"knobResponse":[0.1974,0.2792,0.2184,0.2064]},{"slug":"gilbreath-table","title":"Gilbreath Table","family":"number","round":32,"note":"맨 윗줄은 소수 2, 3, 5, 7, …이고, 그 아래 줄마다 윗줄 이웃끼리 뺀 차의 절댓값이 내려와요. 소수 간격이 분홍과 흰빛으로 남은 위 열 줄은 붙박혀 있고, 그 아래는 0 과 2 가 만드는 삼각형 무늬로 표를 따라 내려가요. 왼쪽 끝 금빛 1 의 열은 1만 줄 아래에서도 끊기지 않아요.","idea":"The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.","buttons":"K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.","code":"// ===== Patternflow pattern =====\n// Title:   Gilbreath Table\n// Family:  number\n// Idea:    The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbreath's conjecture (Norman Gilbreath, 1958; first noted by François Proth, 1878), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white.\n// Knob 2: Speed. At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times.\n// Knob 3: Depth. Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2.\n// Knob 4: Zoom. LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells.\n// Buttons: K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.\n\nconst W = 64, H = 128, LIM = 200000, K0 = 96, RW = 128, LOOK = 16, DMAX = 10000, PRIME = 255;\nconst { floor, log, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The same, lifted and paled around orange and yellow, which go brown or\n// olive on the panel when they are dim.\nfunction hsvL(h, s, v, out, o) {\n  const a = h - floor(h), u = cl(1 - Math.abs(a - 0.12) / 0.11, 0, 1);\n  hsv(h, s * (1 - 0.25 * u), min(1, v * (1 + 0.45 * u)), out, o);\n}\n\n// Row 0: the 17984 primes below 200000, by a sieve.\nfunction primes() {\n  const comp = new Uint8Array(LIM + 1), out = [];\n  for (let i = 2; i \u003c= LIM; i++) {\n    if (comp[i]) continue;\n    out.push(i);\n    for (let j = i * i; j \u003c= LIM; j += i) comp[j] = 1;\n  }\n  return Int32Array.from(out);\n}\n\n// One row down: each cell becomes |next - this|, and the row loses a cell.\nfunction step(P) {\n  const a = P.work, n = --P.len;\n  for (let i = 0; i \u003c n; i++) {\n    const d = a[i + 1] - a[i];\n    a[i] = d \u003c 0 ? -d : d;\n  }\n  P.k++;\n}\n\n// Put the working row at row k >= 1. Down to row K0 by plain steps. By row\n// K0 every cell but the first is 0 or 2 (setup checks), so |a - b| is a XOR,\n// and by Lucas's theorem 2^s rows down cell n is cell n XOR cell n + 2^s: a\n// jump of thousands of rows is one pass a bit. The first cell stays\n// |cell 1 - 1| = 1 at each of those rows, which is the conjecture holding.\nfunction seek(P, k) {\n  if (k \u003c= K0) {\n    const g = P.work, p = P.pr;\n    for (let i = 0; i \u003c P.N - 1; i++) g[i] = p[i + 1] - p[i];\n    P.len = P.N - 1;\n    P.k = 1;\n    while (P.k \u003c k) step(P);\n    return;\n  }\n  P.work.set(P.base);\n  P.len = P.N - K0;\n  const m = k - K0;\n  for (let s = 14; s >= 0; s--) {\n    const j = 1 \u003c\u003c s;\n    if (!(m & j)) continue;\n    const a = P.work, n = P.len - j;\n    for (let i = 1; i \u003c n; i++) a[i] ^= a[i + j];\n    P.len = n;\n  }\n  P.k = k;\n}\n\n// Copy a row into a table at slot o, with a number for each cell: for a 0,\n// how many cells there are to the end of its run of 0s, which is how many\n// more rows it stays 0, since a run of 0s loses its last cell every row\n// down; for a 2, the length of its run of 2s. A run of 2s is the lid of a\n// triangle of 0s one shorter, so a long run is the top of a big triangle.\nfunction keep(src, ring, run, o) {\n  ring.set(src.subarray(0, RW), o);\n  for (let i = RW - 1, d = LOOK; i >= 0; i--) {\n    d = ring[o + i] === 0 ? min(LOOK, d + 1) : 0;\n    run[o + i] = d;\n  }\n  for (let i = 0; i \u003c RW; ) {\n    if (ring[o + i] !== 2) {\n      i++;\n      continue;\n    }\n    let j = i;\n    while (j \u003c RW && ring[o + j] === 2) j++;\n    run.fill(min(LOOK, j - i), o + i, o + j);\n    i = j;\n  }\n}\n\nconst keepBody = (P) => keep(P.work, P.ring, P.run, (P.k % H) * RW);\n\nfunction fill(P, r) {\n  r = cl(floor(r), 1, P.N - RW - H - 2);\n  P.top = r;\n  seek(P, r);\n  keepBody(P);\n  while (P.k \u003c r + H - 1) {\n    step(P);\n    keepBody(P);\n  }\n}\n\nexport function setup(params) {\n  const pr = primes(), N = pr.length;\n  const P = {\n    pr, N, work: new Uint8Array(N), base: null, len: 0, k: 0, top: 0, pos: 0, start: 0, pin: 11,\n    ring: new Uint8Array(H * RW), run: new Uint8Array(H * RW),\n    head: new Uint8Array((K0 + 1) * RW), hrun: new Uint8Array((K0 + 1) * RW),\n    hue: NaN, speed: 2, cell: -1, depth: -1, front: -1, rows: H,\n    lut: new Float32Array(256 * 3), zlut: new Float32Array((LOOK + 1) * 3), tlut: new Float32Array((LOOK + 1) * 3),\n  };\n  // The first K0 + 1 rows, kept for the pinned top; row 0 is drawn as primes.\n  P.head.fill(PRIME, 0, RW);\n  seek(P, 1);\n  for (;;) {\n    keep(P.work, P.head, P.hrun, P.k * RW);\n    if (P.k === K0) break;\n    step(P);\n  }\n  for (let i = 1; i \u003c P.len; i++) if (P.work[i] > 2) throw new Error(\"row \" + K0 + \" still holds \" + P.work[i]);\n  P.base = P.work.slice();\n  params.s = P;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  const cell = round(2 ** (cl(k[3], -1, 1) + 1)), depth = cl(k[2], 0, 1);\n  let refill = false;\n  if (cell !== P.cell) {\n    // Pin every row down to the last one that still holds a value above 2\n    // in the columns on show: 0 to 10 for 64 columns, 0 to 4 for 16.\n    P.cell = cell;\n    const cols = Math.ceil(W / cell);\n    let last = 1;\n    for (let r = 1; r \u003c= K0; r++)\n      for (let n = 1; n \u003c cols; n++) if (P.head[r * RW + n] > 2) last = r;\n    P.pin = last + 1;\n    P.rows = P.pin + Math.ceil((H - P.pin * cell - 1) / cell);\n    refill = true;\n  }\n  if (depth !== P.depth) (P.depth = depth), (refill = true);\n  if (refill || (input.btnPressed && input.btnPressed[0])) {\n    P.start = P.pin + floor(DMAX * P.depth * P.depth * P.depth);\n    P.pos = P.start;\n    fill(P, P.pos);\n    P.front = P.front \u003c 0 ? 0 : min(P.front, P.pin);\n  }\n  // The front works out 12 rows a second at Speed 1 until it reaches the\n  // bottom; from then on the lower part goes down the table 1.5 a second.\n  if (P.front \u003c P.rows) P.front += d * P.speed * 12;\n  else {\n    P.front = P.rows + 1;\n    P.pos += d * P.speed * 1.5;\n  }\n  // At the far end of the computed table the lower part starts over at Depth.\n  if (P.pos > P.N - RW - H - 2) (P.pos = P.start), fill(P, P.pos);\n  while (P.top \u003c floor(P.pos)) {\n    P.top++;\n    step(P);\n    keepBody(P);\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    const h = k[0], lut = P.lut, zl = P.zlut, tl = P.tlut;\n    hsv(h + 0.12, 0.8, 1, lut, 3);\n    for (let v = 3; v \u003c 256; v++) {\n      // 4 pink, 6 coral, then warmer and whiter up to the widest gaps.\n      const u = cl((log(v) - log(4)) / (log(40) - log(4)), 0, 1);\n      hsv(h + 0.9 + 0.1 * u, 0.7 * (1 - u) + 0.08, 0.84 + 0.16 * u, lut, v * 3);\n    }\n    hsv(h + 0.1, 0.06, 1, lut, PRIME * 3);\n    for (let z = 0; z \u003c= LOOK; z++) {\n      // A 0 is brighter near the slanted side of its triangle and deeper\n      // inside; a 2 is brighter the longer its run, so big triangles have a\n      // bright lid.\n      const u = cl((z - 1) / 7, 0, 1), w = cl((z - 1) / 6, 0, 1);\n      hsvL(h + 0.62 + 0.08 * u, 0.8, 0.32 - 0.18 * u, zl, z * 3);\n      hsvL(h + 0.5 - 0.04 * w, 0.8 - 0.3 * w, 0.54 + 0.4 * w, tl, z * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.depth \u003c 0) return;\n  const lut = P.lut, zl = P.zlut, tl = P.tlut, c = P.cell, split = P.pin * c, f = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    // The pinned rows, one dark LED row with the column of 1s going through\n    // it, then the moving part. Rows past the front are not worked out yet;\n    // the newest ones glow.\n    let r, z, o, j;\n    if (y \u003c split) (j = floor(y / c)), (r = P.head), (z = P.hrun), (o = j * RW);\n    else if (y === split) {\n      for (let x = 0; x \u003c W; x++) {\n        const g = x \u003c (c > 2 ? c - 1 : c) && f > P.pin ? 0.8 : 0;\n        display.setPixel(x, y, lut[3] * g, lut[4] * g, lut[5] * g);\n      }\n      continue;\n    } else {\n      const b = floor((y - split - 1) / c);\n      (j = P.pin + b), (r = P.ring), (z = P.run), (o = ((P.top + b) % H) * RW);\n    }\n    if (j >= f) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const glow = 0.75 * Math.exp(-(f - j) / 2.5);\n    const edgeY = c > 2 && (y \u003c split ? y % c : (y - split - 1) % c) === c - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const n = floor(x / c), v = r[o + n];\n      let R, G, B;\n      if (v === 0 || v === 2) {\n        const q = z[o + n] * 3, t = v ? tl : zl;\n        (R = t[q]), (G = t[q + 1]), (B = t[q + 2]);\n      } else {\n        const q = v * 3;\n        (R = lut[q]), (G = lut[q + 1]), (B = lut[q + 2]);\n      }\n      if (glow > 0.01) (R += (255 - R) * glow), (G += (255 - G) * glow), (B += (255 - B) * glow);\n      if (edgeY || (c > 2 && x % c === c - 1)) (R *= 0.45), (G *= 0.45), (B *= 0.45);\n      display.setPixel(x, y, R, G, B);\n    }\n  }\n}\n","layer":{"id":"layer-gilbreath-table","type":"code","name":"gilbreath-table","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gilbreath Table\n// Family:  number\n// Idea:    The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbreath's conjecture (Norman Gilbreath, 1958; first noted by François Proth, 1878), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white.\n// Knob 2: Speed. At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times.\n// Knob 3: Depth. Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2.\n// Knob 4: Zoom. LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells.\n// Buttons: K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.\n\nconst W = 64, H = 128, LIM = 200000, K0 = 96, RW = 128, LOOK = 16, DMAX = 10000, PRIME = 255;\nconst { floor, log, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The same, lifted and paled around orange and yellow, which go brown or\n// olive on the panel when they are dim.\nfunction hsvL(h, s, v, out, o) {\n  const a = h - floor(h), u = cl(1 - Math.abs(a - 0.12) / 0.11, 0, 1);\n  hsv(h, s * (1 - 0.25 * u), min(1, v * (1 + 0.45 * u)), out, o);\n}\n\n// Row 0: the 17984 primes below 200000, by a sieve.\nfunction primes() {\n  const comp = new Uint8Array(LIM + 1), out = [];\n  for (let i = 2; i \u003c= LIM; i++) {\n    if (comp[i]) continue;\n    out.push(i);\n    for (let j = i * i; j \u003c= LIM; j += i) comp[j] = 1;\n  }\n  return Int32Array.from(out);\n}\n\n// One row down: each cell becomes |next - this|, and the row loses a cell.\nfunction step(P) {\n  const a = P.work, n = --P.len;\n  for (let i = 0; i \u003c n; i++) {\n    const d = a[i + 1] - a[i];\n    a[i] = d \u003c 0 ? -d : d;\n  }\n  P.k++;\n}\n\n// Put the working row at row k >= 1. Down to row K0 by plain steps. By row\n// K0 every cell but the first is 0 or 2 (setup checks), so |a - b| is a XOR,\n// and by Lucas's theorem 2^s rows down cell n is cell n XOR cell n + 2^s: a\n// jump of thousands of rows is one pass a bit. The first cell stays\n// |cell 1 - 1| = 1 at each of those rows, which is the conjecture holding.\nfunction seek(P, k) {\n  if (k \u003c= K0) {\n    const g = P.work, p = P.pr;\n    for (let i = 0; i \u003c P.N - 1; i++) g[i] = p[i + 1] - p[i];\n    P.len = P.N - 1;\n    P.k = 1;\n    while (P.k \u003c k) step(P);\n    return;\n  }\n  P.work.set(P.base);\n  P.len = P.N - K0;\n  const m = k - K0;\n  for (let s = 14; s >= 0; s--) {\n    const j = 1 \u003c\u003c s;\n    if (!(m & j)) continue;\n    const a = P.work, n = P.len - j;\n    for (let i = 1; i \u003c n; i++) a[i] ^= a[i + j];\n    P.len = n;\n  }\n  P.k = k;\n}\n\n// Copy a row into a table at slot o, with a number for each cell: for a 0,\n// how many cells there are to the end of its run of 0s, which is how many\n// more rows it stays 0, since a run of 0s loses its last cell every row\n// down; for a 2, the length of its run of 2s. A run of 2s is the lid of a\n// triangle of 0s one shorter, so a long run is the top of a big triangle.\nfunction keep(src, ring, run, o) {\n  ring.set(src.subarray(0, RW), o);\n  for (let i = RW - 1, d = LOOK; i >= 0; i--) {\n    d = ring[o + i] === 0 ? min(LOOK, d + 1) : 0;\n    run[o + i] = d;\n  }\n  for (let i = 0; i \u003c RW; ) {\n    if (ring[o + i] !== 2) {\n      i++;\n      continue;\n    }\n    let j = i;\n    while (j \u003c RW && ring[o + j] === 2) j++;\n    run.fill(min(LOOK, j - i), o + i, o + j);\n    i = j;\n  }\n}\n\nconst keepBody = (P) => keep(P.work, P.ring, P.run, (P.k % H) * RW);\n\nfunction fill(P, r) {\n  r = cl(floor(r), 1, P.N - RW - H - 2);\n  P.top = r;\n  seek(P, r);\n  keepBody(P);\n  while (P.k \u003c r + H - 1) {\n    step(P);\n    keepBody(P);\n  }\n}\n\nexport function setup(params) {\n  const pr = primes(), N = pr.length;\n  const P = {\n    pr, N, work: new Uint8Array(N), base: null, len: 0, k: 0, top: 0, pos: 0, start: 0, pin: 11,\n    ring: new Uint8Array(H * RW), run: new Uint8Array(H * RW),\n    head: new Uint8Array((K0 + 1) * RW), hrun: new Uint8Array((K0 + 1) * RW),\n    hue: NaN, speed: 2, cell: -1, depth: -1, front: -1, rows: H,\n    lut: new Float32Array(256 * 3), zlut: new Float32Array((LOOK + 1) * 3), tlut: new Float32Array((LOOK + 1) * 3),\n  };\n  // The first K0 + 1 rows, kept for the pinned top; row 0 is drawn as primes.\n  P.head.fill(PRIME, 0, RW);\n  seek(P, 1);\n  for (;;) {\n    keep(P.work, P.head, P.hrun, P.k * RW);\n    if (P.k === K0) break;\n    step(P);\n  }\n  for (let i = 1; i \u003c P.len; i++) if (P.work[i] > 2) throw new Error(\"row \" + K0 + \" still holds \" + P.work[i]);\n  P.base = P.work.slice();\n  params.s = P;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  const cell = round(2 ** (cl(k[3], -1, 1) + 1)), depth = cl(k[2], 0, 1);\n  let refill = false;\n  if (cell !== P.cell) {\n    // Pin every row down to the last one that still holds a value above 2\n    // in the columns on show: 0 to 10 for 64 columns, 0 to 4 for 16.\n    P.cell = cell;\n    const cols = Math.ceil(W / cell);\n    let last = 1;\n    for (let r = 1; r \u003c= K0; r++)\n      for (let n = 1; n \u003c cols; n++) if (P.head[r * RW + n] > 2) last = r;\n    P.pin = last + 1;\n    P.rows = P.pin + Math.ceil((H - P.pin * cell - 1) / cell);\n    refill = true;\n  }\n  if (depth !== P.depth) (P.depth = depth), (refill = true);\n  if (refill || (input.btnPressed && input.btnPressed[0])) {\n    P.start = P.pin + floor(DMAX * P.depth * P.depth * P.depth);\n    P.pos = P.start;\n    fill(P, P.pos);\n    P.front = P.front \u003c 0 ? 0 : min(P.front, P.pin);\n  }\n  // The front works out 12 rows a second at Speed 1 until it reaches the\n  // bottom; from then on the lower part goes down the table 1.5 a second.\n  if (P.front \u003c P.rows) P.front += d * P.speed * 12;\n  else {\n    P.front = P.rows + 1;\n    P.pos += d * P.speed * 1.5;\n  }\n  // At the far end of the computed table the lower part starts over at Depth.\n  if (P.pos > P.N - RW - H - 2) (P.pos = P.start), fill(P, P.pos);\n  while (P.top \u003c floor(P.pos)) {\n    P.top++;\n    step(P);\n    keepBody(P);\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    const h = k[0], lut = P.lut, zl = P.zlut, tl = P.tlut;\n    hsv(h + 0.12, 0.8, 1, lut, 3);\n    for (let v = 3; v \u003c 256; v++) {\n      // 4 pink, 6 coral, then warmer and whiter up to the widest gaps.\n      const u = cl((log(v) - log(4)) / (log(40) - log(4)), 0, 1);\n      hsv(h + 0.9 + 0.1 * u, 0.7 * (1 - u) + 0.08, 0.84 + 0.16 * u, lut, v * 3);\n    }\n    hsv(h + 0.1, 0.06, 1, lut, PRIME * 3);\n    for (let z = 0; z \u003c= LOOK; z++) {\n      // A 0 is brighter near the slanted side of its triangle and deeper\n      // inside; a 2 is brighter the longer its run, so big triangles have a\n      // bright lid.\n      const u = cl((z - 1) / 7, 0, 1), w = cl((z - 1) / 6, 0, 1);\n      hsvL(h + 0.62 + 0.08 * u, 0.8, 0.32 - 0.18 * u, zl, z * 3);\n      hsvL(h + 0.5 - 0.04 * w, 0.8 - 0.3 * w, 0.54 + 0.4 * w, tl, z * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.depth \u003c 0) return;\n  const lut = P.lut, zl = P.zlut, tl = P.tlut, c = P.cell, split = P.pin * c, f = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    // The pinned rows, one dark LED row with the column of 1s going through\n    // it, then the moving part. Rows past the front are not worked out yet;\n    // the newest ones glow.\n    let r, z, o, j;\n    if (y \u003c split) (j = floor(y / c)), (r = P.head), (z = P.hrun), (o = j * RW);\n    else if (y === split) {\n      for (let x = 0; x \u003c W; x++) {\n        const g = x \u003c (c > 2 ? c - 1 : c) && f > P.pin ? 0.8 : 0;\n        display.setPixel(x, y, lut[3] * g, lut[4] * g, lut[5] * g);\n      }\n      continue;\n    } else {\n      const b = floor((y - split - 1) / c);\n      (j = P.pin + b), (r = P.ring), (z = P.run), (o = ((P.top + b) % H) * RW);\n    }\n    if (j >= f) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const glow = 0.75 * Math.exp(-(f - j) / 2.5);\n    const edgeY = c > 2 && (y \u003c split ? y % c : (y - split - 1) % c) === c - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const n = floor(x / c), v = r[o + n];\n      let R, G, B;\n      if (v === 0 || v === 2) {\n        const q = z[o + n] * 3, t = v ? tl : zl;\n        (R = t[q]), (G = t[q + 1]), (B = t[q + 2]);\n      } else {\n        const q = v * 3;\n        (R = lut[q]), (G = lut[q + 1]), (B = lut[q + 2]);\n      }\n      if (glow > 0.01) (R += (255 - R) * glow), (G += (255 - G) * glow), (B += (255 - B) * glow);\n      if (edgeY || (c > 2 && x % c === c - 1)) (R *= 0.45), (G *= 0.45), (B *= 0.45);\n      display.setPixel(x, y, R, G, B);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times."},{"name":"Depth","min":0,"max":1,"about":"Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2."},{"name":"Zoom","min":-1,"max":1,"about":"LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells."}],"start":[0,2,0,0.06],"measures":{"motion":0.5182,"detail":0.0975,"edges":0.6797,"complexity":0.1987,"coverage":0.9794,"colour":0.3745,"drift":0.1585},"knobResponse":[0.3124,0.3276,0.151,0.2734]},{"slug":"gilded-cream","title":"Gilded Cream","family":"cosmetic","round":35,"note":"금박 조각 여섯 개가 든 아이보리 크림을 옆에서 본 단면이 제빵사의 반죽처럼 두 배로 늘어나 제 위로 접혀요. 접을 때마다 조각이 길게 늘어 금빛 결이 되고, 다섯 번 접으면 서른두 겹의 가는 금선이 반짝임만 남기고 크림에 녹아든 뒤 새 조각이 떨어져요. K3 은 한 번에 세 겹이나 네 겹으로 접게 하고, K1 은 크림을 색상환 한 바퀴로 물들이며 누르면 한 번을 네 배 빠르게 접어요.","idea":"A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.","buttons":"K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Gilded Cream\n// Family:  cosmetic\n// Idea:    A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after the folded baker's map of ergodic theory and gold-leaf cream in white and gold packaging\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1\n//\n// Knob 1: Hue. Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold.\n// Knob 2: Speed. At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower.\n// Knob 3: Fold. How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer.\n// Knob 4: Gold. How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1.\n// Buttons: K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x5bd1e995, 0x27d4eb2d);\n  h = Math.imul(h ^ (h >>> 15), 0x165667b1);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the cream's own soft relief.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 17 + o * 6007) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\n// The cream as it was before any fold, in its own coordinates: u along the\n// slab, 0 to 1 across the panel, and v up through it, 0 at the bottom to 1\n// at the top. A raster of RU x RV holds where the gold is, which flake it\n// belongs to and how each crumpled facet of the leaf is tilted.\nconst RU = 256, RV = 256;\nconst MAXF = 17;\n\nfunction scatter(P) {\n  const { GC, GI, GX, GY } = P;\n  GC.fill(0);\n  GI.fill(-1);\n  const n = 6 + floor(11 * P.gold + 0.5), sf = 1 + 0.5 * P.gold, R = P.round * 977;\n  const vx = new Float32Array(10), vy = new Float32Array(10), va = new Float32Array(11);\n  for (let i = 0; i \u003c n; i++) {\n    const s = R + i * 53;\n    // Half sizes in LEDs: across the slab and up through it.\n    const a = (2.8 + 2.2 * hash(s)) * sf, b = (4 + 3.4 * hash(s + 1)) * sf;\n    const cu = 0.1 + 0.8 * hash(s + 2), cv = 0.08 + 0.84 * hash(s + 3), rot = (hash(s + 4) - 0.5) * 1.2;\n    // A torn flake: 6 to 9 corners at their own distances round the middle.\n    const k = 6 + floor(4 * hash(s + 5));\n    for (let m = 0; m \u003c k; m++) {\n      const an = (2 * PI * (m + 0.35 * (hash(s + 11 + m) - 0.5))) / k, r = 0.6 + 0.45 * hash(s + 23 + m);\n      va[m] = an;\n      vx[m] = r * cos(an);\n      vy[m] = r * sin(an);\n    }\n    va[k] = va[0] + 2 * PI;\n    const cr = cos(rot), sr = sin(rot), ext = max(a, b) * 1.1;\n    const i0 = max(0, floor((cu - ext / W) * RU)), i1 = min(RU - 1, floor((cu + ext / W) * RU));\n    const j0 = max(0, floor((cv - ext / H) * RV)), j1 = min(RV - 1, floor((cv + ext / H) * RV));\n    for (let j = j0; j \u003c= j1; j++)\n      for (let q0 = i0; q0 \u003c= i1; q0++) {\n        const dx = ((q0 + 0.5) / RU - cu) * W, dy = ((j + 0.5) / RV - cv) * H;\n        const lx = dx * cr + dy * sr, ly = -dx * sr + dy * cr, ex = lx / a, ey = ly / b, d = sqrt(ex * ex + ey * ey);\n        let th = Math.atan2(ey, ex);\n        if (th \u003c va[0]) th += 2 * PI;\n        let m = 0;\n        while (m \u003c k - 1 && th > va[m + 1]) m++;\n        // Where the ray from the middle meets the outline between corners m\n        // and m + 1.\n        const m1 = (m + 1) % k, ax = vx[m], ay = vy[m], bx = vx[m1] - ax, by = vy[m1] - ay;\n        const dc = cos(th) * by - sin(th) * bx, re = abs(dc) > 1e-6 ? (ax * by - ay * bx) / dc : 1;\n        const cov = cl((re - d) * min(a, b) * 2, 0, 1);\n        const q = j * RU + q0;\n        if (cov \u003c= GC[q]) continue;\n        GC[q] = cov;\n        GI[q] = i;\n        // Crumple facets about 2.5 LEDs across, each tilted its own way.\n        const fx = floor(lx / 2.5 + 50), fy = floor(ly / 2.5 + 50);\n        GX[q] = hash(s * 31 + fx * 7 + fy * 131) - 0.5;\n        GY[q] = hash(s * 37 + fx * 11 + fy * 173) - 0.5;\n      }\n    P.land[i] = 0.08 + 0.55 * hash(s + 9);\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    c: 0, hue: 0, speed: 2, k3: 2, gold: 0.06, goldBuilt: -1,\n    round: 0, folds: [], fk: 2, p: 0, ph: 0, pt: 0, fast: false,\n    GC: new Float32Array(RU * RV), GI: new Int8Array(RU * RV), GX: new Float32Array(RU * RV), GY: new Float32Array(RU * RV),\n    land: new Float32Array(MAXF),\n    hgt: new Float32Array(N), surf: new Float32Array(N), gcov: new Float32Array(N), gfx: new Float32Array(N), gfy: new Float32Array(N), gfl: new Float32Array(N),\n    hole: new Float32Array(N), lipd: new Float32Array(N), ob: new Float32Array(N), pal: new Float32Array(12), lastHue: NaN,\n  };\n}\n\n// The round, in seconds at Speed 2: the flakes land, then folds one after\n// another with a rest between, then the cream settles smooth.\nconst LAND = 0, FOLD = 1, REST = 2, SETTLE = 3;\nconst LAND_T = 0.7, FOLD_T = 2.0, REST_T = 0.7, SETTLE_T = 1.8;\n// Folds a round: until the leaf has been stretched past twenty times.\nconst foldsFor = (k) => (k === 2 ? 5 : 3);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.k3 = floor(cl(k[2], 2, 4) + 0.5);\n  P.gold = cl(k[3], 0, 1);\n  if (abs(P.gold - P.goldBuilt) > 0.004) (scatter(P), (P.goldBuilt = P.gold));\n  P.c += d;\n  // A tap waits for the next fold if none is under way.\n  if (input.btnPressed && input.btnPressed[0]) P.fast = true;\n  P.pt += P.ph === FOLD && P.fast ? d * 4 : d;\n  if (P.ph === LAND && P.pt >= LAND_T) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === REST && (P.pt >= REST_T || P.fast)) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === FOLD && P.pt >= FOLD_T) {\n    P.folds.push(P.fk);\n    P.pt = 0;\n    P.fast = false;\n    P.ph = P.folds.length >= foldsFor(P.fk) ? SETTLE : REST;\n  } else if (P.ph === SETTLE && P.pt >= SETTLE_T) {\n    // Fresh cream: the folds are forgotten and new flakes fall in.\n    P.round++;\n    P.folds = [];\n    P.ph = LAND;\n    P.pt = 0;\n    scatter(P);\n  }\n  P.p = P.ph === FOLD ? sm(P.pt / FOLD_T) : 0;\n}\n\n// Sub-samples down each LED: the folds pack the layers thinner than an LED.\nconst SUB = 4;\n// The sliding layer's end is rounded like a rolled lip, LIP LEDs deep.\nconst LIP = 4.5;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { GC, GI, GX, GY, hgt, surf, gcov, gfx, gfy, gfl, hole, lipd, ob, pal, folds, land } = P;\n  if (P.lastHue !== P.hue) {\n    // The cream's tint. Round blush, peach, ivory and pistachio it stays\n    // pale and light, where a deeper cream reads beige or khaki beside the\n    // gold.\n    let h = P.hue + 0.11;\n    h -= floor(h);\n    const warm = sm((h + 0.03) / 0.07) * (1 - sm((h - 0.22) / 0.08));\n    hsv(h, 0.27 - 0.13 * warm, 0.93 + 0.03 * warm, pal, 0);\n    // The same cream in its folds' shade: a little deeper, never grey.\n    hsv(h - 0.01, 0.36 - 0.14 * warm, 0.74 + 0.1 * warm, pal, 3);\n    // The cream down in the gap under a layer still sliding over.\n    hsv(h - 0.01, 0.31 - 0.15 * warm, 0.82 + 0.07 * warm, pal, 6);\n    P.lastHue = P.hue;\n  }\n  const c = P.c, L = 1 + (P.fk - 1) * P.p, nF = folds.length, folding = P.ph === FOLD;\n  // Mid-fold the slab's far end stands inside the panel.\n  const open = folding && L - floor(L) > 0.001;\n  // Settling: the layers' relief and the leaf fade away and the cream lies\n  // smooth; then the new flakes land one by one and the relief comes back.\n  const settle = P.ph === SETTLE ? sm(P.pt / (SETTLE_T * 0.8)) : 0;\n  const keep = P.ph === LAND ? sm(P.pt / LAND_T) : 1 - settle;\n  // How deep the groove between layers is for each fold, newest first: the\n  // newest folds show, the older ones knit together.\n  const amp = [];\n  let th = H / L;\n  amp.push(folding ? 2 * min(1.6, 0.1 * th) * sm(P.p * 3) : 0);\n  for (let i = nF - 1; i >= 0; i--) {\n    th /= folds[i];\n    amp.push(2 * min(1.6, 0.1 * th) * 0.62 ** (nF - 1 - i + P.p));\n  }\n  const landT = P.ph === LAND ? P.pt : 99;\n\n  for (let x = 0; x \u003c W; x++) {\n    const ux = (x + 0.5) / W;\n    // Under the lip the top of the layer below swells a little, unevenly.\n    const bul = (2 + 1.3 * sin(ux * 7.5 + 0.6 * c) + 0.7 * sin(ux * 17 - c)) / H;\n    for (let y = 0; y \u003c H; y++) {\n      let g = 0, gx = 0, gy = 0, fl = 0, hh = 0, emp = 0, nS = 0, dl = 99;\n      for (let sI = 0; sI \u003c SUB; sI++) {\n        let u = ux, v = (H - y - (sI + 0.5) / SUB) / H;\n        let rel = 0;\n        // The fold under way: the slab stretched to L times its length and\n        // as much thinner, laid back and forth across the panel from the\n        // bottom up, each layer the other way up from the one below.\n        {\n          let j = floor(v * L), w = v * L - j, s = j + (j & 1 ? 1 - u : u);\n          if (open && j + 1 > L) {\n            const send = L - ((1 - 2 * sqrt(w * (1 - w))) * LIP) / W;\n            let cv = cl((send - s) * W + 0.5, 0, 1);\n            if (cv \u003c 1 && j > 0 && v - j / L \u003c bul) {\n              cv = 1;\n              j -= 1;\n              w = 0.999;\n              s = j + (j & 1 ? 1 - u : u);\n            }\n            emp += (1 - cv) / SUB;\n            if (cv \u003c= 0) {\n              dl = min(dl, (s - send) * W);\n              continue;\n            }\n          }\n          // Each layer is rounded across its thickness, so a groove runs\n          // between it and the next.\n          if (amp[0] > 0) rel += amp[0] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / L;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The folds already made, newest first, back to the cream as it was.\n        for (let i = nF - 1, lv = 1; i >= 0; i--, lv++) {\n          const k = folds[i], j = min(k - 1, floor(v * k)), w = v * k - j, s = j + (j & 1 ? 1 - u : u);\n          rel += amp[lv] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / k;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The cream's own soft relief, drawn out with it, read once an LED.\n        if (nS === 0) hh += 0.55 * SUB * tap(u * 40, v * 64 + 17);\n        hh += rel;\n        nS++;\n        // The leaf.\n        const fu = cl(u * RU - 0.5, 0, RU - 1.001), fv = cl(v * RV - 0.5, 0, RV - 1.001);\n        const i0 = floor(fu), j0 = floor(fv), q = j0 * RU + i0;\n        const c00 = GC[q], c10 = GC[q + 1], c01 = GC[q + RU], c11 = GC[q + RU + 1];\n        if (c00 + c10 + c01 + c11 > 0) {\n          const tx = fu - i0, ty = fv - j0;\n          let cc = c00 + (c10 - c00) * tx + (c01 - c00) * ty + (c00 - c10 - c01 + c11) * tx * ty;\n          const qq = ty \u003c 0.5 ? (tx \u003c 0.5 ? q : q + 1) : tx \u003c 0.5 ? q + RU : q + RU + 1, id = GI[qq];\n          if (id >= 0 && landT \u003c 99) {\n            // A flake that is landing grows in with a flash.\n            const t = (landT - land[id]) / 0.18;\n            cc *= sm(t);\n            fl = max(fl, t > 0 ? exp(-((t - 1) ** 2) * 1.5) : 0);\n          }\n          g += cc;\n          gx += GX[qq] * cc;\n          gy += GY[qq] * cc;\n        }\n      }\n      const p = y * W + x;\n      hgt[p] = nS ? (hh / nS) * keep : 0;\n      gcov[p] = nS ? g / nS : 0;\n      gfx[p] = g > 0 ? gx / g : 0;\n      gfy[p] = g > 0 ? gy / g : 0;\n      gfl[p] = fl;\n      hole[p] = emp;\n      lipd[p] = dl;\n    }\n  }\n  // The gap, softened over a few LEDs: the cream rounds down into it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += hole[y * W + cl(x + d, 0, W - 1)] * (3 - abs(d));\n      surf[y * W + x] = a / 9;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += surf[cl(y + d, 0, H - 1) * W + x] * (3 - abs(d));\n      ob[y * W + x] = a / 9;\n    }\n  for (let p = 0; p \u003c N; p++) surf[p] = hgt[p] * (1 - hole[p]) - 2.6 * ob[p];\n\n  // A small lamp drifts over the cream; the cream answers with a soft satin\n  // sheen and the leaf with a sharp glint off whichever facets face it.\n  const Lx = 32 + 38 * sin(0.29 * c + 0.4), Ly = 64 + 58 * sin(0.21 * c + 1.1), Lz = 55;\n  const Ex = 32, Ey = 64, Ez = 220;\n  const cr = pal[0], cg = pal[1], cb = pal[2], dr = pal[3], dg = pal[4], db = pal[5], pr = pal[6], pg = pal[7], pb = pal[8];\n  // The leaf fades into the cream as it settles.\n  const gk = 1 - settle;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, ow = hole[p];\n      const zx = (surf[y * W + min(W - 1, x + 1)] - surf[y * W + max(0, x - 1)]) / 2;\n      const zy = (surf[min(H - 1, y + 1) * W + x] - surf[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - surf[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      (hx *= hi), (hy *= hi), (hz *= hi);\n      const dif = nx * lx + ny * ly + nz * lz;\n      // The cream: lit against a level surface, its folds a deeper tint and\n      // a little shade where it rounds down into the gap.\n      const sh = cl(1 + 1.1 * (dif - lz) - 0.25 * ob[p], 0, 1.3);\n      const dk = 1 - sm(sh), lift = max(0, sh - 1);\n      let r = cr + (dr - cr) * dk + lift * 0.25, gg = cg + (dg - cg) * dk + lift * 0.25, b = cb + (db - cb) * dk + lift * 0.25;\n      const nh = max(0, nx * hx + ny * hy + nz * hz);\n      const n2 = nh * nh, n4 = n2 * n2, n8 = n4 * n4, n16 = n8 * n8;\n      const sat = 0.1 * n8 * n4 * n2 + 0.12 * n16 * n16 * n16 * n8 * n4;\n      r += sat;\n      gg += sat;\n      b += sat;\n      // The leaf: deep gold turned from the lamp, bright gold towards it,\n      // and a white-gold glint where a facet mirrors it.\n      const gc = gcov[p] * gk;\n      if (gc > 0.002) {\n        const tx = gfx[p] * 0.9, ty = gfy[p] * 0.9;\n        const fnx = nx + tx, fny = ny + ty, fnz = nz, fn = 1 / sqrt(fnx * fnx + fny * fny + fnz * fnz);\n        const fd = max(0, (fnx * lx + fny * ly + fnz * lz) * fn), fh = max(0, (fnx * hx + fny * hy + fnz * hz) * fn);\n        const f2 = fh * fh, f8 = f2 * f2 * f2 * f2, f32 = f8 * f8 * f8 * f8;\n        const lit = 0.5 + 0.62 * fd, gl = 1.3 * f32 * f8 + 0.6 * gfl[p];\n        // A vein thinner than an LED still reads as a line of gold.\n        const a = min(1, gc * (1.25 + 0.3 * nF));\n        r += (0.9 * lit + gl - r) * a;\n        gg += (0.62 * lit + gl * 0.92 - gg) * a;\n        b += (0.16 * lit + gl * 0.7 - b) * a;\n      }\n      // Down in the gap: the cream below in its own shade.\n      if (ow > 0) {\n        // The sliding layer's lip shades the cream just past it.\n        const gs = cl(0.92 + 0.5 * (dif - lz), 0.76, 1.05) * (0.84 + 0.16 * sm(lipd[p] / 9));\n        r += (pr * gs - r) * ow;\n        gg += (pg * gs - gg) * ow;\n        b += (pb * gs - b) * ow;\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-gilded-cream","type":"code","name":"gilded-cream","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gilded Cream\n// Family:  cosmetic\n// Idea:    A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after the folded baker's map of ergodic theory and gold-leaf cream in white and gold packaging\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1\n//\n// Knob 1: Hue. Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold.\n// Knob 2: Speed. At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower.\n// Knob 3: Fold. How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer.\n// Knob 4: Gold. How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1.\n// Buttons: K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x5bd1e995, 0x27d4eb2d);\n  h = Math.imul(h ^ (h >>> 15), 0x165667b1);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the cream's own soft relief.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 17 + o * 6007) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\n// The cream as it was before any fold, in its own coordinates: u along the\n// slab, 0 to 1 across the panel, and v up through it, 0 at the bottom to 1\n// at the top. A raster of RU x RV holds where the gold is, which flake it\n// belongs to and how each crumpled facet of the leaf is tilted.\nconst RU = 256, RV = 256;\nconst MAXF = 17;\n\nfunction scatter(P) {\n  const { GC, GI, GX, GY } = P;\n  GC.fill(0);\n  GI.fill(-1);\n  const n = 6 + floor(11 * P.gold + 0.5), sf = 1 + 0.5 * P.gold, R = P.round * 977;\n  const vx = new Float32Array(10), vy = new Float32Array(10), va = new Float32Array(11);\n  for (let i = 0; i \u003c n; i++) {\n    const s = R + i * 53;\n    // Half sizes in LEDs: across the slab and up through it.\n    const a = (2.8 + 2.2 * hash(s)) * sf, b = (4 + 3.4 * hash(s + 1)) * sf;\n    const cu = 0.1 + 0.8 * hash(s + 2), cv = 0.08 + 0.84 * hash(s + 3), rot = (hash(s + 4) - 0.5) * 1.2;\n    // A torn flake: 6 to 9 corners at their own distances round the middle.\n    const k = 6 + floor(4 * hash(s + 5));\n    for (let m = 0; m \u003c k; m++) {\n      const an = (2 * PI * (m + 0.35 * (hash(s + 11 + m) - 0.5))) / k, r = 0.6 + 0.45 * hash(s + 23 + m);\n      va[m] = an;\n      vx[m] = r * cos(an);\n      vy[m] = r * sin(an);\n    }\n    va[k] = va[0] + 2 * PI;\n    const cr = cos(rot), sr = sin(rot), ext = max(a, b) * 1.1;\n    const i0 = max(0, floor((cu - ext / W) * RU)), i1 = min(RU - 1, floor((cu + ext / W) * RU));\n    const j0 = max(0, floor((cv - ext / H) * RV)), j1 = min(RV - 1, floor((cv + ext / H) * RV));\n    for (let j = j0; j \u003c= j1; j++)\n      for (let q0 = i0; q0 \u003c= i1; q0++) {\n        const dx = ((q0 + 0.5) / RU - cu) * W, dy = ((j + 0.5) / RV - cv) * H;\n        const lx = dx * cr + dy * sr, ly = -dx * sr + dy * cr, ex = lx / a, ey = ly / b, d = sqrt(ex * ex + ey * ey);\n        let th = Math.atan2(ey, ex);\n        if (th \u003c va[0]) th += 2 * PI;\n        let m = 0;\n        while (m \u003c k - 1 && th > va[m + 1]) m++;\n        // Where the ray from the middle meets the outline between corners m\n        // and m + 1.\n        const m1 = (m + 1) % k, ax = vx[m], ay = vy[m], bx = vx[m1] - ax, by = vy[m1] - ay;\n        const dc = cos(th) * by - sin(th) * bx, re = abs(dc) > 1e-6 ? (ax * by - ay * bx) / dc : 1;\n        const cov = cl((re - d) * min(a, b) * 2, 0, 1);\n        const q = j * RU + q0;\n        if (cov \u003c= GC[q]) continue;\n        GC[q] = cov;\n        GI[q] = i;\n        // Crumple facets about 2.5 LEDs across, each tilted its own way.\n        const fx = floor(lx / 2.5 + 50), fy = floor(ly / 2.5 + 50);\n        GX[q] = hash(s * 31 + fx * 7 + fy * 131) - 0.5;\n        GY[q] = hash(s * 37 + fx * 11 + fy * 173) - 0.5;\n      }\n    P.land[i] = 0.08 + 0.55 * hash(s + 9);\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    c: 0, hue: 0, speed: 2, k3: 2, gold: 0.06, goldBuilt: -1,\n    round: 0, folds: [], fk: 2, p: 0, ph: 0, pt: 0, fast: false,\n    GC: new Float32Array(RU * RV), GI: new Int8Array(RU * RV), GX: new Float32Array(RU * RV), GY: new Float32Array(RU * RV),\n    land: new Float32Array(MAXF),\n    hgt: new Float32Array(N), surf: new Float32Array(N), gcov: new Float32Array(N), gfx: new Float32Array(N), gfy: new Float32Array(N), gfl: new Float32Array(N),\n    hole: new Float32Array(N), lipd: new Float32Array(N), ob: new Float32Array(N), pal: new Float32Array(12), lastHue: NaN,\n  };\n}\n\n// The round, in seconds at Speed 2: the flakes land, then folds one after\n// another with a rest between, then the cream settles smooth.\nconst LAND = 0, FOLD = 1, REST = 2, SETTLE = 3;\nconst LAND_T = 0.7, FOLD_T = 2.0, REST_T = 0.7, SETTLE_T = 1.8;\n// Folds a round: until the leaf has been stretched past twenty times.\nconst foldsFor = (k) => (k === 2 ? 5 : 3);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.k3 = floor(cl(k[2], 2, 4) + 0.5);\n  P.gold = cl(k[3], 0, 1);\n  if (abs(P.gold - P.goldBuilt) > 0.004) (scatter(P), (P.goldBuilt = P.gold));\n  P.c += d;\n  // A tap waits for the next fold if none is under way.\n  if (input.btnPressed && input.btnPressed[0]) P.fast = true;\n  P.pt += P.ph === FOLD && P.fast ? d * 4 : d;\n  if (P.ph === LAND && P.pt >= LAND_T) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === REST && (P.pt >= REST_T || P.fast)) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === FOLD && P.pt >= FOLD_T) {\n    P.folds.push(P.fk);\n    P.pt = 0;\n    P.fast = false;\n    P.ph = P.folds.length >= foldsFor(P.fk) ? SETTLE : REST;\n  } else if (P.ph === SETTLE && P.pt >= SETTLE_T) {\n    // Fresh cream: the folds are forgotten and new flakes fall in.\n    P.round++;\n    P.folds = [];\n    P.ph = LAND;\n    P.pt = 0;\n    scatter(P);\n  }\n  P.p = P.ph === FOLD ? sm(P.pt / FOLD_T) : 0;\n}\n\n// Sub-samples down each LED: the folds pack the layers thinner than an LED.\nconst SUB = 4;\n// The sliding layer's end is rounded like a rolled lip, LIP LEDs deep.\nconst LIP = 4.5;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { GC, GI, GX, GY, hgt, surf, gcov, gfx, gfy, gfl, hole, lipd, ob, pal, folds, land } = P;\n  if (P.lastHue !== P.hue) {\n    // The cream's tint. Round blush, peach, ivory and pistachio it stays\n    // pale and light, where a deeper cream reads beige or khaki beside the\n    // gold.\n    let h = P.hue + 0.11;\n    h -= floor(h);\n    const warm = sm((h + 0.03) / 0.07) * (1 - sm((h - 0.22) / 0.08));\n    hsv(h, 0.27 - 0.13 * warm, 0.93 + 0.03 * warm, pal, 0);\n    // The same cream in its folds' shade: a little deeper, never grey.\n    hsv(h - 0.01, 0.36 - 0.14 * warm, 0.74 + 0.1 * warm, pal, 3);\n    // The cream down in the gap under a layer still sliding over.\n    hsv(h - 0.01, 0.31 - 0.15 * warm, 0.82 + 0.07 * warm, pal, 6);\n    P.lastHue = P.hue;\n  }\n  const c = P.c, L = 1 + (P.fk - 1) * P.p, nF = folds.length, folding = P.ph === FOLD;\n  // Mid-fold the slab's far end stands inside the panel.\n  const open = folding && L - floor(L) > 0.001;\n  // Settling: the layers' relief and the leaf fade away and the cream lies\n  // smooth; then the new flakes land one by one and the relief comes back.\n  const settle = P.ph === SETTLE ? sm(P.pt / (SETTLE_T * 0.8)) : 0;\n  const keep = P.ph === LAND ? sm(P.pt / LAND_T) : 1 - settle;\n  // How deep the groove between layers is for each fold, newest first: the\n  // newest folds show, the older ones knit together.\n  const amp = [];\n  let th = H / L;\n  amp.push(folding ? 2 * min(1.6, 0.1 * th) * sm(P.p * 3) : 0);\n  for (let i = nF - 1; i >= 0; i--) {\n    th /= folds[i];\n    amp.push(2 * min(1.6, 0.1 * th) * 0.62 ** (nF - 1 - i + P.p));\n  }\n  const landT = P.ph === LAND ? P.pt : 99;\n\n  for (let x = 0; x \u003c W; x++) {\n    const ux = (x + 0.5) / W;\n    // Under the lip the top of the layer below swells a little, unevenly.\n    const bul = (2 + 1.3 * sin(ux * 7.5 + 0.6 * c) + 0.7 * sin(ux * 17 - c)) / H;\n    for (let y = 0; y \u003c H; y++) {\n      let g = 0, gx = 0, gy = 0, fl = 0, hh = 0, emp = 0, nS = 0, dl = 99;\n      for (let sI = 0; sI \u003c SUB; sI++) {\n        let u = ux, v = (H - y - (sI + 0.5) / SUB) / H;\n        let rel = 0;\n        // The fold under way: the slab stretched to L times its length and\n        // as much thinner, laid back and forth across the panel from the\n        // bottom up, each layer the other way up from the one below.\n        {\n          let j = floor(v * L), w = v * L - j, s = j + (j & 1 ? 1 - u : u);\n          if (open && j + 1 > L) {\n            const send = L - ((1 - 2 * sqrt(w * (1 - w))) * LIP) / W;\n            let cv = cl((send - s) * W + 0.5, 0, 1);\n            if (cv \u003c 1 && j > 0 && v - j / L \u003c bul) {\n              cv = 1;\n              j -= 1;\n              w = 0.999;\n              s = j + (j & 1 ? 1 - u : u);\n            }\n            emp += (1 - cv) / SUB;\n            if (cv \u003c= 0) {\n              dl = min(dl, (s - send) * W);\n              continue;\n            }\n          }\n          // Each layer is rounded across its thickness, so a groove runs\n          // between it and the next.\n          if (amp[0] > 0) rel += amp[0] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / L;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The folds already made, newest first, back to the cream as it was.\n        for (let i = nF - 1, lv = 1; i >= 0; i--, lv++) {\n          const k = folds[i], j = min(k - 1, floor(v * k)), w = v * k - j, s = j + (j & 1 ? 1 - u : u);\n          rel += amp[lv] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / k;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The cream's own soft relief, drawn out with it, read once an LED.\n        if (nS === 0) hh += 0.55 * SUB * tap(u * 40, v * 64 + 17);\n        hh += rel;\n        nS++;\n        // The leaf.\n        const fu = cl(u * RU - 0.5, 0, RU - 1.001), fv = cl(v * RV - 0.5, 0, RV - 1.001);\n        const i0 = floor(fu), j0 = floor(fv), q = j0 * RU + i0;\n        const c00 = GC[q], c10 = GC[q + 1], c01 = GC[q + RU], c11 = GC[q + RU + 1];\n        if (c00 + c10 + c01 + c11 > 0) {\n          const tx = fu - i0, ty = fv - j0;\n          let cc = c00 + (c10 - c00) * tx + (c01 - c00) * ty + (c00 - c10 - c01 + c11) * tx * ty;\n          const qq = ty \u003c 0.5 ? (tx \u003c 0.5 ? q : q + 1) : tx \u003c 0.5 ? q + RU : q + RU + 1, id = GI[qq];\n          if (id >= 0 && landT \u003c 99) {\n            // A flake that is landing grows in with a flash.\n            const t = (landT - land[id]) / 0.18;\n            cc *= sm(t);\n            fl = max(fl, t > 0 ? exp(-((t - 1) ** 2) * 1.5) : 0);\n          }\n          g += cc;\n          gx += GX[qq] * cc;\n          gy += GY[qq] * cc;\n        }\n      }\n      const p = y * W + x;\n      hgt[p] = nS ? (hh / nS) * keep : 0;\n      gcov[p] = nS ? g / nS : 0;\n      gfx[p] = g > 0 ? gx / g : 0;\n      gfy[p] = g > 0 ? gy / g : 0;\n      gfl[p] = fl;\n      hole[p] = emp;\n      lipd[p] = dl;\n    }\n  }\n  // The gap, softened over a few LEDs: the cream rounds down into it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += hole[y * W + cl(x + d, 0, W - 1)] * (3 - abs(d));\n      surf[y * W + x] = a / 9;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += surf[cl(y + d, 0, H - 1) * W + x] * (3 - abs(d));\n      ob[y * W + x] = a / 9;\n    }\n  for (let p = 0; p \u003c N; p++) surf[p] = hgt[p] * (1 - hole[p]) - 2.6 * ob[p];\n\n  // A small lamp drifts over the cream; the cream answers with a soft satin\n  // sheen and the leaf with a sharp glint off whichever facets face it.\n  const Lx = 32 + 38 * sin(0.29 * c + 0.4), Ly = 64 + 58 * sin(0.21 * c + 1.1), Lz = 55;\n  const Ex = 32, Ey = 64, Ez = 220;\n  const cr = pal[0], cg = pal[1], cb = pal[2], dr = pal[3], dg = pal[4], db = pal[5], pr = pal[6], pg = pal[7], pb = pal[8];\n  // The leaf fades into the cream as it settles.\n  const gk = 1 - settle;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, ow = hole[p];\n      const zx = (surf[y * W + min(W - 1, x + 1)] - surf[y * W + max(0, x - 1)]) / 2;\n      const zy = (surf[min(H - 1, y + 1) * W + x] - surf[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - surf[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      (hx *= hi), (hy *= hi), (hz *= hi);\n      const dif = nx * lx + ny * ly + nz * lz;\n      // The cream: lit against a level surface, its folds a deeper tint and\n      // a little shade where it rounds down into the gap.\n      const sh = cl(1 + 1.1 * (dif - lz) - 0.25 * ob[p], 0, 1.3);\n      const dk = 1 - sm(sh), lift = max(0, sh - 1);\n      let r = cr + (dr - cr) * dk + lift * 0.25, gg = cg + (dg - cg) * dk + lift * 0.25, b = cb + (db - cb) * dk + lift * 0.25;\n      const nh = max(0, nx * hx + ny * hy + nz * hz);\n      const n2 = nh * nh, n4 = n2 * n2, n8 = n4 * n4, n16 = n8 * n8;\n      const sat = 0.1 * n8 * n4 * n2 + 0.12 * n16 * n16 * n16 * n8 * n4;\n      r += sat;\n      gg += sat;\n      b += sat;\n      // The leaf: deep gold turned from the lamp, bright gold towards it,\n      // and a white-gold glint where a facet mirrors it.\n      const gc = gcov[p] * gk;\n      if (gc > 0.002) {\n        const tx = gfx[p] * 0.9, ty = gfy[p] * 0.9;\n        const fnx = nx + tx, fny = ny + ty, fnz = nz, fn = 1 / sqrt(fnx * fnx + fny * fny + fnz * fnz);\n        const fd = max(0, (fnx * lx + fny * ly + fnz * lz) * fn), fh = max(0, (fnx * hx + fny * hy + fnz * hz) * fn);\n        const f2 = fh * fh, f8 = f2 * f2 * f2 * f2, f32 = f8 * f8 * f8 * f8;\n        const lit = 0.5 + 0.62 * fd, gl = 1.3 * f32 * f8 + 0.6 * gfl[p];\n        // A vein thinner than an LED still reads as a line of gold.\n        const a = min(1, gc * (1.25 + 0.3 * nF));\n        r += (0.9 * lit + gl - r) * a;\n        gg += (0.62 * lit + gl * 0.92 - gg) * a;\n        b += (0.16 * lit + gl * 0.7 - b) * a;\n      }\n      // Down in the gap: the cream below in its own shade.\n      if (ow > 0) {\n        // The sliding layer's lip shades the cream just past it.\n        const gs = cl(0.92 + 0.5 * (dif - lz), 0.76, 1.05) * (0.84 + 0.16 * sm(lipd[p] / 9));\n        r += (pr * gs - r) * ow;\n        gg += (pg * gs - gg) * ow;\n        b += (pb * gs - b) * ow;\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower."},{"name":"Fold","min":2,"max":4,"about":"How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer."},{"name":"Gold","min":0,"max":1,"about":"How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1."}],"start":[0,2,2,0.06],"measures":{"motion":0.2739,"detail":0.0073,"edges":0.2093,"complexity":0.5765,"coverage":1,"colour":0.1255,"drift":0.0414},"knobResponse":[0.2092,0.0648,0.051,0.0463]},{"slug":"giraffe","title":"Giraffe","family":"mammal","round":23,"note":"우산 아카시아의 납작한 수관 밑에서 그물무늬기린이 보라색 혀로 잔가지를 감아 잎을 훑고, 소등쪼기새가 목을 타고 뛰어다녀요. 가끔 앞다리를 A 자로 벌리고 목을 내려 웅덩이 물을 마시면 물에 동그란 물결이 퍼져요. K3 을 돌리면 무늬가 마사이기린이나 로스차일드기린의 것으로 바뀌고, 끝에는 흰 기린이 서요.","idea":"Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.","buttons":"K1 tap sends the giraffe down to drink now.","code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-giraffe","type":"code","name":"giraffe","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare."},{"name":"Coat","min":0,"max":3,"about":"Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand."},{"name":"Wind","min":0,"max":1,"about":"Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy."}],"start":[0,2,0,0.06],"measures":{"motion":0.123,"detail":0.074,"edges":0.4044,"complexity":1.9181,"coverage":0.9853,"colour":0.3367,"drift":0.0426},"knobResponse":[0.2454,0.0494,0.078,0.0609]},{"slug":"glassblower","title":"Glassblower","family":"glass","round":27,"note":"어두운 스윙 피트 위 발판에서 가퍼가 블로파이프 끝의 유리 덩어리를 진자처럼 흔들면, 덩어리가 아래로 늘어나 긴 화병이 되며 노랑에서 주황을 지나 진홍으로 식어요. 글로리 홀에서 다시 달궈 불고 또 흔든 뒤 잘라 내면 바닥의 컬릿 더미에 떨어져 부서져요. K1 이 코발트나 호박 같은 유리 색을 고르고, 버튼은 다시 달구기와 불기예요.","idea":"A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.","buttons":"K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.","code":"// ===== Patternflow pattern =====\n// Title:   Glassblower\n// Family:  glass\n// Idea:    A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the swing pit of a glass studio, where a gather is stretched long\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1\n//\n// Knob 1: Glass. The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same.\n// Knob 2: Speed. At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower.\n// Knob 3: Length. How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1.\n// Knob 4: Heat. How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter.\n// Buttons: K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.\n\nconst W = 64, H = 128, N = W * H, NN = 40;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, cbrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// Distance to a segment; TT is how far along it.\nlet TT = 0, QX = 0, QY = 0;\nfunction seg(px, py, ex, ey) {\n  TT = cl((px * ex + py * ey) / (ex * ex + ey * ey + 1e-6), 0, 1);\n  (QX = px - TT * ex), (QY = py - TT * ey);\n  return sqrt(QX * QX + QY * QY);\n}\n\n// Black body, 0..1: dark red, red, orange, yellow, near white.\nconst BBK = [0, 0, 0, 0, 0.12, 46, 3, 0, 0.25, 118, 10, 0, 0.38, 196, 34, 0, 0.5, 245, 80, 6, 0.62, 255, 132, 22, 0.75, 255, 180, 62, 0.87, 255, 222, 132, 1, 255, 246, 216];\nconst BB = new Float32Array(513 * 3);\nfor (let q = 0, k = 0; q \u003c= 512; q++) {\n  const T = q / 512;\n  while (k \u003c 28 && T > BBK[k + 4]) k += 4;\n  for (let c = 0; c \u003c 3; c++) BB[q * 3 + c] = mix(BBK[k + 1 + c], BBK[k + 5 + c], (T - BBK[k]) / (BBK[k + 4] - BBK[k]));\n}\nconst bq = (T) => (((T \u003c 0 ? 0 : T > 1 ? 1 : T) * 512 + 0.5) | 0) * 3;\n// Clear, cobalt, amber, green, ruby: colour and body when cold, then what passes of the glow.\nconst GLASS = [\n  [150, 212, 204, 0.3, 1, 0.97, 0.9], [34, 72, 238, 1, 0.3, 0.38, 1], [238, 138, 24, 1, 1, 0.62, 0.2],\n  [40, 208, 88, 1, 0.42, 1, 0.5], [228, 18, 70, 1, 1, 0.18, 0.4],\n];\n// As the glow fades the glass filters it, and the colour comes through.\nconst flt = (T) => 0.95 * (1 - sm(0.45, 0.85, T));\n\n// Deck, floor, the pit's opening, the glory hole (a drum seen end on at a slant), hands and pipe.\nconst DK = 26, FL = 31, PT = 35, OX0 = 19, OX1 = 47;\nconst MX = 49, MY = 15, MRX = 3.6, MRY = 7, FRX = 6.5, FRY = 11;\nconst PIPE = 27, BACK = 8, TH0 = 0.34, HX = 24.5, HY = 19.5, HX2 = 25.5, HY2 = 17.5;\nconst THF = atan2(MX - HX2, MY - HY2);\nconst GATHER = 0, OUT = 1, BLOW = 2, SWING = 3, LIFT = 4, REHEAT = 5, CUT = 6, EMPTY = 7;\nconst DUR = [1.3, 1, 0.8, 5, 0.9, 1.8, 1.4, 0.9];\nconst V0 = 1300, OM = (2 * PI) / 2.3, START = 13.6, FS = new Float32Array(NN), CP = new Float32Array(80);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), piece = () => ({ X: F(NN), Y: F(NN), R: F(NN), B: F(NN), T: F(NN), on: 0, dy: 0, vy: 0 });\n  const S = (params.s = {\n    t: 0, th: THF, rho: 1, sw: 0, be: 0, bv: 0, vx: 0, tx: 0, ty: 0, l: 4, R0: 3, bl: 9, rot: 0, pT: 0, boom: 0, tmax: 0.8, live: 0, k1: -1, gl: [0, 0, 0, 1, 1, 1, 1], pc: piece(), fall: piece(), sp: [], lt: F(84),\n    fa: F(N), se: F(N), ci: new Uint8Array(N), hc: F(256), cx: F(256), cn: F(256), top: F(W),\n    f: F(N * 3), lr: F(N), lg: F(N), lb: F(N), mat: new Uint8Array(N), al: F(N * 3), gm: F(N),\n    gd: F(N).fill(99), gs: F(N), gr: F(N), gu: F(N), gb: F(N), gt: F(N),\n  });\n  maps(S);\n  go(S, GATHER);\n}\n\nfunction maps(S) {\n  const M = S.mat, A = S.al, HG = S.top;\n  for (let x = 0; x \u003c W; x++) HG[x] = 122 - 10 * ((x + 0.5 - 33) / 31) ** 2 + 2 * (vn(x * 0.3, 5) - 0.5);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, gr = 0.85 + 0.3 * hash(x, y);\n    let m = 0, a = 0, c = [1, 0.9, 0.8];\n    if (((px - MX) / MRX) ** 2 + ((py - MY) / MRY) ** 2 \u003c 1) m = 3;\n    else if (((px - MX) / FRX) ** 2 + ((py - MY) / FRY) ** 2 \u003c 1) (m = 2), (a = 0.5 * (0.8 + 0.3 * hash(x, y + 7))), (c = [1, 0.84, 0.7]);\n    else if (x > MX && y \u003c FL && y > MY - FRY - 1) {\n      // The drum with a rim on top and two bands, a dark stand below.\n      m = 1;\n      a = y \u003c MY + FRY ? (y === MY - FRY ? 0.9 : 0.3 * (0.35 + 0.65 * cos(((py - MY) / FRY) * 1.45))) * (x === 56 || x === 61 ? 1.8 : 1) : y === MY + FRY ? 0.7 : 0.12;\n      c = [0.9, 0.93, 1];\n    } else if (y >= FL && y \u003c PT && (x \u003c OX0 || x > OX1)) (m = 4), (a = y === FL ? 0.8 : 0.3 * gr * (0.8 + 0.4 * hash(x >> 1, y))), (c = [1, 0.95, 0.88]);\n    else if ((y >= DK && y \u003c DK + 2 && x \u003c 23) || ((x === 3 || x === 19) && y >= DK && y \u003c FL)) (m = 5), (a = y === DK ? 0.9 : 0.35), (c = [0.9, 0.93, 1]);\n    else if (py >= HG[x]) {\n      // Broken glass: facets on a jittered grid, dark seams between them.\n      m = 7;\n      let d1 = 9, d2 = 9, id = 0, ci = 0;\n      for (let j = 0; j \u003c 9; j++) {\n        const cx = floor(x / 3) + (j % 3) - 1, cy = floor(y / 2.5) + floor(j / 3) - 1, d = (px - (cx + hash(cx, cy)) * 3) ** 2 + (py - (cy + hash(cy, cx + 9)) * 2.5) ** 2;\n        if (d \u003c d1) (d2 = d1), (d1 = d), (id = hash(cx + 31, cy)), (ci = cl((cy - 42) * 24 + cx + 1, 0, 254));\n        else if (d \u003c d2) d2 = d;\n      }\n      (S.ci[i] = ci), (S.cx[ci] += px), S.cn[ci]++;\n      (S.fa[i] = id), (S.se[i] = sm(0.9, 0.2, sqrt(d2) - sqrt(d1)) * 0.7 + (py - HG[x] \u003c 1 ? -0.3 : 0));\n    } else if (y >= FL) {\n      // Firebrick courses, sooted in clouds.\n      m = 6;\n      const r = floor(y / 3), sx = x + (r & 1) * 3;\n      a = y % 3 === 2 || sx % 7 === 6 ? 0.1 : 0.5 * (0.7 + 0.6 * hash(floor(sx / 7), r)) * (0.45 + 0.7 * vn(x * 0.11, y * 0.045)) * gr * (x \u003c 2 || x > 61 ? 0.45 : 1);\n      c = [1, 0.76, 0.58];\n    } else {\n      // Corrugated sheeting behind the shop.\n      a = 0.5 * (0.88 + 0.12 * cos(px * PI * 0.5)) * (x % 16 === 15 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 0.07, y * 0.15));\n      c = [0.95, 0.9, 0.85];\n    }\n    M[i] = m;\n    for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = a * c[j];\n  }\n}\n// Heat left in the heap where hot glass lands, shard by shard.\nfunction heat(S, x, y, T, r) {\n  for (let j = floor(y - r); j \u003c= y + r; j++)\n    for (let i = floor(x - r); i \u003c= x + r; i++) {\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || S.mat[j * W + i] !== 7) continue;\n      const c = S.ci[j * W + i];\n      S.hc[c] = max(S.hc[c], T * sm(r + 0.5, r * 0.3, sqrt((i + 0.5 - x) ** 2 + (j + 0.5 - y) ** 2)));\n    }\n}\n\nfunction go(S, ph) {\n  (S.ph = ph), (S.pt = 0), (S.th1 = S.th);\n  if (ph === GATHER) (S.pc.on = 1), (S.V = 60), (S.b = S.bt = 0), (S.sb = S.sbt = 0.3), (S.pass = 1), S.pc.T.fill(S.tmax);\n  else if (ph === BLOW) blow(S, S.pass > 1 ? 0.1 : 0.4);\n  else if (ph === SWING) S.sw = 0;\n}\nfunction next(S) {\n  const p = S.ph;\n  go(S, p === SWING ? (S.pass > 1 ? CUT : LIFT) : p === REHEAT ? OUT : p === EMPTY ? GATHER : p + 1);\n  if (p === REHEAT) S.pass++;\n}\nfunction blow(S, db) {\n  (S.bt = min(0.74, S.b + db)), (S.sbt = min(0.84, S.pass > 1 ? S.sb + 0.12 : 0.55)), (S.bl = 0);\n}\nconst live = (S) => S.pc.on && (S.ph === BLOW || S.ph === SWING || (S.ph === CUT && S.pt \u003c 0.4));\n\n// Radius from volume and length: a neck, a body narrowing down, a round end.\nfunction shape(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1);\n  let R = max(1, S.R0);\n  for (let it = 0; it \u003c 3; it++) {\n    let sum = 0;\n    for (let i = 0; i \u003c NN; i++) {\n      const s = i / (NN - 1), a = s * l, ct = 1 - min(1, (a + 0.25 * R) / (1.1 * R)), cb = 1 - min(1, (l - a) / (0.62 * R));\n      FS[i] = (1 - 0.38 * s) * sqrt(1 - ct * ct) * sqrt(max(0, 1 - cb * cb));\n      sum += FS[i] * FS[i];\n    }\n    R = max(1, sqrt(S.V / (PI * dl * max(1e-3, sum))));\n  }\n  S.R0 = R;\n  for (let i = 0; i \u003c NN; i++) {\n    const q = (i / (NN - 1) - 0.05) / (S.sb - 0.05), B = q > 0 && q \u003c 1 ? S.b * sqrt(1 - (2 * q - 1) ** 2) : 0;\n    (P.B[i] = B), (P.R[i] = (R * FS[i]) / sqrt(1 - B * B));\n  }\n}\n// Off the pipe along its axis, then hanging and trailing the swing; straight when lifted.\nfunction line(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1), th = S.th, w0 = 0.8 * S.R0 + 1.5;\n  let x = S.tx - sin(th) * 1.2, y = S.ty - cos(th) * 1.2;\n  for (let i = 0; i \u003c NN; i++) {\n    (P.X[i] = x), (P.Y[i] = y);\n    const s = i / (NN - 1), w = exp((-s * l) / w0), a = mix(th * w + (1 - w) * S.be * s ** 0.8, th, S.rho);\n    (x += sin(a) * dl), (y += cos(a) * dl);\n  }\n}\n// Radiative cooling, faster where the glass is thin.\nconst cool = (T, R, d) => T - ((0.22 * (T + 0.1)) / max(2.2, R) ** 0.7) * d;\n\nfunction step(S, d) {\n  (S.t += d), (S.pt += d);\n  const dur = () => (S.ph === SWING ? (S.pass > 1 ? 6.5 : 5) : DUR[S.ph]);\n  if (S.pt >= dur()) next(S);\n  const ph = S.ph, pt = S.pt, D = dur(), u = sm(0, 1, pt / D), P = S.pc, F = S.fall, HG = S.top;\n  let th = S.th, rho = S.rho, inH = 0;\n  S.env = 0;\n  if (ph === GATHER || ph === REHEAT) (th = THF + 0.015 * sin(S.t * 3)), (rho = inH = 1);\n  else if (ph === OUT) (th = mix(S.th1, TH0, u)), (rho = 1 - sm(0.3, 0.9, pt / D)), (inH = 1 - sm(0, 0.25, pt / D));\n  else if (ph === BLOW) (th = TH0 + 0.03 * sin(pt * 4)), (rho = 0);\n  else if (ph === SWING) {\n    S.env = sm(0, 1.4, pt) * (1 - sm(D - 1.1, D, pt));\n    S.sw += d * OM * sqrt(62 / S.L) * (1 - 0.15 * (S.l / S.L));\n    (th = TH0 + S.A * S.env * sin(S.sw)), (rho = 0);\n  } else if (ph === LIFT || ph === EMPTY) (th = mix(S.th1, THF, u)), (rho = sm(0, 0.3, pt / D)), (inH = sm(0.75, 1, pt / D));\n  else {\n    (th = mix(S.th1, TH0, sm(0, 0.4, pt))), (rho = 0);\n    if (P.on && pt >= 0.4) cut(S);\n  }\n  const q = cl((th - TH0) / (THF - TH0), 0, 1);\n  (S.th = th), (S.rho = rho), (S.hx = mix(HX, HX2, q)), (S.hy = mix(HY, HY2, q));\n  const tx = S.hx + PIPE * sin(th), ty = S.hy + PIPE * cos(th), vx = (tx - S.tx) / d, ax = cl((vx - S.vx) / d, -400, 400), Le = max(10, 0.55 * S.l);\n  (S.tx = tx), (S.ty = ty), (S.vx = vx);\n  // The hanging part is a pendulum on a moving pivot.\n  if (rho > 0.5) S.be = S.bv = 0;\n  else (S.bv += ((-190 / Le) * sin(S.be) - 1.3 * S.bv - (ax / Le) * cos(S.be)) * d), (S.be = cl(S.be + S.bv * d, -0.7, 0.7));\n  (S.b += (S.bt - S.b) * min(1, d * 4)), (S.sb += (S.sbt - S.sb) * min(1, d * 4)), (S.bl += d), (S.rot += d * (3 + 5 * inH));\n  if (P.on) {\n    if (ph === GATHER) (S.V = max(60, V0 * (S.L / 62) * sm(0, 1.1, pt))), (S.l = 1.9 * cbrt((3 * S.V) / (4 * PI)));\n    let tm = 0;\n    for (let i = 0; i \u003c NN; i++) tm += P.T[i] / NN;\n    if (rho \u003c 0.5) S.l += 0.42 * sm(0.15, 0.55, tm) * max(0, (S.pass > 1 ? S.L : 0.64 * S.L) - S.l) * (0.3 + 0.7 * S.env) * d;\n    shape(S), line(S);\n    // The glory hole brings it all back up.\n    for (let i = 0; i \u003c NN; i++) {\n      const T = P.T[i] + (S.tmax - P.T[i]) * (1 - exp(-1.9 * d)) * inH;\n      P.T[i] = mix(T, cool(T, P.R[i], d), 1 - inH);\n    }\n    (S.pT = mix(S.pT, P.T[0] * 0.7, min(1, d * 2))), (S.gx = P.X[NN >> 1]), (S.gy = P.Y[NN >> 1]);\n  } else S.pT *= exp(-d * 0.5);\n  if (F.on) {\n    (F.vy += 300 * d), (F.dy += F.vy * d), (S.gx = F.X[NN >> 1]), (S.gy = F.Y[NN >> 1] + F.dy);\n    for (let i = 0; i \u003c NN; i++) F.T[i] = cool(F.T[i], F.R[i], d);\n    // It hits the heap and goes to pieces.\n    const bx = F.X[NN - 1], hy = HG[cl(bx | 0, 0, W - 1)];\n    if (F.Y[NN - 1] + F.dy > hy - 1) {\n      heat(S, bx, hy + 1, F.T[NN - 1] + 0.1, 3.5);\n      for (let i = 0; i \u003c NN * 2; i++) {\n        const j = i >> 1;\n        S.sp.push({ x: F.X[j] + (rnd() - 0.5) * F.R[j], y: F.Y[j] + F.dy, vx: (rnd() - 0.5) * 60, vy: F.vy * (0.5 + 0.4 * rnd()) - 30 * rnd(), l: 9, T: F.T[j] });\n      }\n      (F.on = 0), (S.boom = 1), (S.bx = bx);\n    }\n  }\n  for (let c = 0; c \u003c 255; c++) if (S.hc[c] > 0) S.hc[c] -= 0.03 * (S.hc[c] + 0.08) * d;\n  S.boom = max(0, S.boom - d * 2.5);\n  for (const p of S.sp) {\n    (p.vy += 200 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 1.2);\n    if (p.x \u003c 0.5 || p.x > W - 0.5) (p.vx *= -0.5), (p.x = cl(p.x, 0.5, W - 0.5));\n    // A shard bounces, then settles into the heap and leaves its heat there.\n    if (p.l > 5 && p.y > HG[p.x | 0]) p.vy > 70 ? ((p.vy *= -0.35), (p.vx *= 0.6), (p.y = HG[p.x | 0])) : (heat(S, p.x, p.y + 1, p.T, 1.3 + rnd()), (p.l = 0));\n  }\n  S.sp = S.sp.filter((p) => p.l > 0 && p.y \u003c H + 2);\n}\n\n// The jacks score the neck and the piece drops away into the pit.\nfunction cut(S) {\n  const P = S.pc, F = S.fall;\n  for (const k of \"XYRBT\") F[k].set(P[k]);\n  (F.on = 1), (F.dy = F.vy = P.on = 0), (S.pT = 0.75), (S.l = 4), (S.V = 60);\n  for (let k = 0; k \u003c 14; k++) S.sp.push({ x: S.tx, y: S.ty + 1, vx: (rnd() - 0.5) * 34, vy: -10 - 28 * rnd(), l: 0.6 + 0.4 * rnd(), T: 0.8 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], -1, 1), k4 = cl(k[3], 0, 1);\n  if (k1 !== S.k1) {\n    const u = k1 * 4, i = min(3, floor(u)), f = sm(0.25, 0.75, u - i);\n    for (let c = 0; c \u003c 7; c++) S.gl[c] = mix(GLASS[i][c], GLASS[i + 1][c], f);\n    S.k1 = k1;\n  }\n  (S.L = 62 + 18 * k3), (S.A = 0.29 + 0.15 * k3), (S.hot = 0.84 + 0.16 * k4), (S.tmax = 0.86 + 0.18 * k4), (S.fI = 1 + 0.55 * k4);\n  if (!S.live) {\n    while (!S.live) step(S, 1 / 30), (S.live = S.t >= START ? 1 : 0);\n    // The last piece lies broken in the heap, still red.\n    heat(S, 31 + 6 * rnd(), 125, 0.44, 5);\n    for (let k = 0; k \u003c 7; k++) heat(S, 2 + 60 * rnd(), 112 + 16 * rnd(), 0.18 + 0.14 * rnd(), 1.5 + 2 * rnd());\n  }\n  const bp = input.btnPressed || [];\n  if (bp[0] && live(S)) go(S, LIFT);\n  if (bp[1] && live(S)) blow(S, 0.14);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\n// Lights: the glory hole, seven points along the gather, the heap's embers, the crash.\nfunction lights(S) {\n  const LT = S.lt, M = S.mat, HC = S.hc, GL = S.gl;\n  let n = 0;\n  const add = (x, y, T, w, sg, g = 0) => {\n    const o = n++ * 6, b = bq(T), f = g * flt(T);\n    (LT[o] = x), (LT[o + 1] = y), (LT[o + 5] = 1 / (sg * sg));\n    for (let c = 0; c \u003c 3; c++) LT[o + 2 + c] = (BB[b + c] / 255) * w * (1 - f + f * GL[4 + c]);\n  };\n  add(MX - 2.5, MY + 0.5, S.hot, S.fI * (0.92 + 0.12 * vn(S.t * 4, 3)), 13);\n  for (const P of [S.pc, S.fall]) {\n    if (!P.on) continue;\n    for (let i = 3; i \u003c NN; i += 6) {\n      const x = P.X[i], y = P.Y[i] + P.dy, m = x >= 0 && x \u003c W && y >= 0 && y \u003c H ? M[(y | 0) * W + (x | 0)] : 0;\n      if (y \u003c H + 12) add(x, y, P.T[i], 0.32 * min(2, P.R[i] / 3) * (m === 1 || m === 2 ? 0.15 : 1), 10 + 1.4 * P.R[i], 1);\n    }\n  }\n  for (let h = 0; h \u003c 2; h++) {\n    let w = 0, T = 0, sx = 0;\n    for (let c = 0; c \u003c 255; c++) {\n      const e = (HC[c] - 0.15) * S.cn[c], x = S.cx[c] / S.cn[c];\n      if (e > 0 && x \u003c 32 === !h) (w += e), (sx += e * x), (T = max(T, HC[c]));\n    }\n    if (w > 0) add(sx / w, 118, T, min(3, w * 0.12), 20, 0.7);\n  }\n  if (S.boom > 0) add(S.bx, 112, 0.75, S.boom * 1.6, 18);\n  return n;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  const F = S.f, M = S.mat, A = S.al, LR = S.lr, LG = S.lg, LB = S.lb, LT = S.lt, GM = S.gm, t = S.t, hot = S.hot, n = lights(S);\n  const lx = LT[0], ly = LT[1], fw = LT[2] / (BB[bq(hot)] / 255), gc = bq(hot * 0.6);\n  figure(S);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, o = i * 3, m = M[i], ds = (px - lx) ** 2 + (py - ly) ** 2, qa = 1 / (1 + ds * LT[5]);\n    // The glory hole's near pool and long reach; below the floor, only through the opening.\n    let fq = qa * qa + 0.62 / (1 + ds / 500);\n    if (y > FL + 1) {\n      const xc = lx + ((px - lx) * (FL - ly)) / (py - ly);\n      fq *= 0.06 + 0.94 * sm(OX0 - 3, OX0 + 3, xc) * sm(OX1 + 3, OX1 - 3, xc) * exp(-(py - FL) / 40);\n    }\n    let r = 0.004 + LT[2] * fq, g = 0.003 + LT[3] * fq, b = 0.003 + LT[4] * fq;\n    for (let j = 6; j \u003c n * 6; j += 6) {\n      const dx = px - LT[j], dy = py - LT[j + 1];\n      let q = 1 / (1 + (dx * dx + dy * dy) * LT[j + 5]);\n      q *= q;\n      (r += LT[j + 2] * q), (g += LT[j + 3] * q), (b += LT[j + 4] * q);\n    }\n    (LR[i] = r), (LG[i] = g), (LB[i] = b);\n    const ex = (px - MX) / MRX, ey = (py - MY) / MRY, e2 = ex * ex + ey * ey;\n    if (m === 3) {\n      // The mouth, hottest in the middle, the fire churning.\n      const c = bq(hot * (1 - 0.2 * e2) + 0.07 * (vn(x * 0.6, y * 0.5 - t * 5) - 0.5));\n      for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j];\n      continue;\n    }\n    // The refractory round the mouth glows from the heat.\n    const gw = m === 2 ? exp(-(sqrt(e2) - 1) * 2.4) * 0.9 * fw : 0;\n    (F[o] = A[o] * r * 255 + BB[gc] * gw), (F[o + 1] = A[o + 1] * g * 255 + BB[gc + 1] * gw), (F[o + 2] = A[o + 2] * b * 255 + BB[gc + 2] * gw);\n    // The gaffer, a silhouette with a rim of light.\n    const c = GM[i];\n    if (c > 0) {\n      const rim = max(1 - GM[i + 1], 0.6 * (1 - GM[i + W]), 0.4 * (1 - GM[i - W])) * 330;\n      (F[o] = mix(F[o], 5 + r * rim, c)), (F[o + 1] = mix(F[o + 1], 4 + g * rim, c)), (F[o + 2] = mix(F[o + 2], 4 + b * rim, c));\n    }\n  }\n  heap(S);\n  if (S.pc.on) glass(S, S.pc);\n  if (S.fall.on) glass(S, S.fall);\n  flames(S);\n  pipe(S);\n  for (const p of S.sp) {\n    const c = bq(p.l > 5 ? p.T + 0.1 : 0.55 + 0.4 * p.l), a = p.l > 5 ? 1 : min(1, p.l * 1.5);\n    put(F, p.x, p.y, c, a), put(F, p.x - p.vx * 0.025, p.y - p.vy * 0.025, c, a * 0.5);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction put(F, x, y, c, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j], a);\n}\n\n// The cullet heap: hot shards glow, cool ones show their colour and glint.\nfunction heap(S) {\n  const { f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL, hc: HC, ci: CI, fa: FA, se: SE } = S;\n  for (let i = 108 * W; i \u003c N; i++) {\n    if (M[i] !== 7) continue;\n    const o = i * 3, fa = FA[i], se = SE[i], T = HC[CI[i]] * (0.94 + 0.12 * fa), v = 1 - sm(0.1, 0.34, T), lum = (LR[i] + LG[i] + LB[i]) / 3;\n    const gl = max(0, cos(fa * 12.6 - 2 * atan2(S.gy - (i >> 6), S.gx - (i & 63)))) ** 10 * lum * 2.4 * v * (1 - se);\n    const b = (0.3 + 3 * lum) * (0.35 + 0.8 * fa) * (1 - se) * v * GL[3], c = bq(T), f = 0.7 * flt(T);\n    for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j] * (0.95 - 0.4 * se) * (1 - f + f * GL[4 + j]) + GL[j] * b + gl * (100 + GL[j]);\n  }\n}\n\n// The glass as capsules between nodes, the nearest one winning each LED.\nfunction glass(S, P) {\n  const { gd: GD, gs: GS, gr: GR, gu: GU, gb: GB, gt: GT, f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL } = S, oy = P.dy;\n  let X0 = W, X1 = -1, Y0 = H, Y1 = -1;\n  for (let i = 0; i \u003c NN - 1; i++) {\n    const ax = P.X[i], ay = P.Y[i] + oy, bx = P.X[i + 1], by = P.Y[i + 1] + oy, ra = P.R[i], rb = P.R[i + 1], rr = max(ra, rb) + 1;\n    const x0 = max(0, floor(min(ax, bx) - rr)), x1 = min(W - 1, ceil(max(ax, bx) + rr)), y0 = max(0, floor(min(ay, by) - rr)), y1 = min(H - 1, ceil(max(ay, by) + rr));\n    (X0 = min(X0, x0)), (X1 = max(X1, x1)), (Y0 = min(Y0, y0)), (Y1 = max(Y1, y1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const k = y * W + x, dd = seg(x + 0.5 - ax, y + 0.5 - ay, bx - ax, by - ay), r = ra + (rb - ra) * TT;\n        if (dd - r \u003c GD[k]) (GD[k] = dd - r), (GS[k] = (i + TT) / (NN - 1)), (GR[k] = r), (GU[k] = QX * (by - ay) - QY * (bx - ax) >= 0 ? dd : -dd), (GB[k] = mix(P.B[i], P.B[i + 1], TT)), (GT[k] = mix(P.T[i], P.T[i + 1], TT));\n      }\n  }\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const k = y * W + x, sd = GD[k], m = M[k];\n      if (sd >= 0.5) continue;\n      GD[k] = 99;\n      if (m === 1 || m === 2) continue;\n      const a = cl(0.5 - sd, 0, 1), r = max(0.5, GR[k]), d = GU[k], u = cl(d / r, -1, 1), ad = abs(d), rb = GB[k] * r, o = k * 3;\n      const ib = rb > 0.6 ? sm(0, 0.8, rb - ad) : 0, ch = 2 * r * sqrt(1 - u * u) * (1 - 0.5 * ib);\n      // More glow through more glass, less through the bubble; the skin cools first.\n      const e = 1 - exp(-0.3 * ch), T = GT[k] - 0.16 * u * u, st = sin(GS[k] * S.l * 0.55 - S.rot + u * 2.4);\n      const c = bq(T * (0.62 + 0.38 * e) * (1 + 0.05 * st) + 0.06 * (1 - u * u) - 0.08 * ib), dim = 1 - 0.28 * ib, v = 1 - sm(0.14, 0.42, T), f = flt(T);\n      // Cool glass shows its colour and a highlight.\n      const lum = (LR[k] + LG[k] + LB[k]) / 3, bod = (0.25 + 1.2 * lum) * (0.55 + 0.45 * (1 - u * u)) * (0.85 + 0.15 * st) * (1 - 0.35 * ib) * GL[3];\n      const sp = exp(-(((u - 0.45) / 0.2) ** 2)) * (0.25 + 1.3 * lum) * 160 * v;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j] * dim * (1 - f + f * GL[4 + j]) + v * (GL[j] * bod + sp), a);\n    }\n}\n\n// Fire licks out over the top lip of the glory hole.\nfunction flames(S) {\n  const F = S.f, t = S.t, amt = 1.5 + 3 * (S.hot - 0.84), top = MY - MRY + 2;\n  for (let y = max(0, top - 15); y \u003c top; y++) {\n    const h = (top - y) / 15;\n    for (let x = MX - 7; x \u003c MX + 6; x++) {\n      const dx = (x + 0.5 - (MX - 0.8 + 2.5 * h + sin(t * 3 + y * 0.4) * h)) / (4.4 * (1 - 0.35 * h));\n      const dens = sm(0.2, 0.55, vn(x * 0.3, y * 0.25 + t * 7) * (1.2 - h) * exp(-dx * dx) * amt), c = bq(0.48 + 0.36 * dens);\n      for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += BB[c + j] * dens;\n    }\n  }\n}\n\n// The gaffer: capsules for head, cap, body and limbs, posed by the pipe.\nfunction figure(S) {\n  const GM = S.gm, q = cl((S.th - TH0) / (THF - TH0), 0, 1), lean = (1 - q) * (0.9 + 1.4 * (S.th - TH0)), bob = 0.8 * sin(PI * cl(S.bl / 0.8, 0, 1));\n  const hpx = 14.5 + 0.5 * lean, hpy = 16.6, shx = 16 + lean, shy = 9.8 + 0.4 * lean, hx = S.hx, hy = S.hy;\n  const hdx = mix(16.8 + 1.2 * lean, hx - BACK * sin(S.th) - 2, bob), hdy = mix(5.4 + 0.3 * lean, hy - BACK * cos(S.th) - 2.4, bob);\n  const ebx = shx + 0.4 * (hx - shx) - 0.5, eby = shy + 0.62 * (hy - shy) + 1.8;\n  let n = 0;\n  const cap = (a, b, c, d, r) => ((CP[n] = a), (CP[n + 1] = b), (CP[n + 2] = c - a), (CP[n + 3] = d - b), (CP[n + 4] = r), (n += 5));\n  // Body, apron, neck, capped head, arm, legs, feet.\n  cap(hpx, hpy, shx, shy, 2.9), cap(hpx - 0.3, hpy + 1.5, hpx + 1.2, hpy + 3.2, 2.4), cap(shx, shy, hdx, hdy, 1.2), cap(hdx, hdy, hdx, hdy, 2.5), cap(hdx - 1.2, hdy - 1.7, hdx + 3.4, hdy - 1.3, 0.9);\n  cap(shx, shy, ebx, eby, 1.4), cap(ebx, eby, hx, hy, 1.2);\n  cap(hpx, hpy + 2, 12.2, 21.6, 1.7), cap(12.2, 21.6, 10.6, 25.4, 1.4), cap(hpx + 0.6, hpy + 2, 17.6, 21.2, 1.7), cap(17.6, 21.2, 18.4, 25.4, 1.4);\n  cap(10.2, 25.6, 12.4, 25.6, 0.9), cap(18.2, 25.6, 20.4, 25.6, 0.9);\n  for (let y = 0; y \u003c DK + 1; y++)\n    for (let x = 5; x \u003c 32; x++) {\n      let c = 0;\n      for (let j = 0; j \u003c n; j += 5) c = max(c, cl(CP[j + 4] + 0.5 - seg(x + 0.5 - CP[j], y + 0.5 - CP[j + 1], CP[j + 2], CP[j + 3]), 0, 1));\n      GM[y * W + x] = c;\n    }\n}\n\n// The blowpipe, steel, its far end hot from the glass.\nfunction pipe(S) {\n  const F = S.f, M = S.mat, st = sin(S.th), ct = cos(S.th), L = PIPE + BACK, ax = S.hx - BACK * st, ay = S.hy - BACK * ct, ex = L * st, ey = L * ct;\n  for (let y = max(0, floor(min(ay, ay + ey) - 1)); y \u003c= min(H - 1, max(ay, ay + ey) + 1); y++)\n    for (let x = max(0, floor(min(ax, ax + ex) - 1)); x \u003c= min(W - 1, max(ax, ax + ex) + 1); x++) {\n      const k = y * W + x, c = cl(1.1 - seg(x + 0.5 - ax, y + 0.5 - ay, ex, ey), 0, 1), hb = bq(S.pT * sm(PIPE - 7, PIPE + 1, TT * L - BACK)), o = k * 3;\n      if (c \u003c= 0 || M[k] === 1) continue;\n      (F[o] = mix(F[o], 26 + S.lr[k] * 190 + BB[hb], c)), (F[o + 1] = mix(F[o + 1], 26 + S.lg[k] * 190 + BB[hb + 1], c)), (F[o + 2] = mix(F[o + 2], 30 + S.lb[k] * 200 + BB[hb + 2], c));\n    }\n}\n","layer":{"id":"layer-glassblower","type":"code","name":"glassblower","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glassblower\n// Family:  glass\n// Idea:    A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the swing pit of a glass studio, where a gather is stretched long\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1\n//\n// Knob 1: Glass. The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same.\n// Knob 2: Speed. At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower.\n// Knob 3: Length. How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1.\n// Knob 4: Heat. How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter.\n// Buttons: K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.\n\nconst W = 64, H = 128, N = W * H, NN = 40;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, cbrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// Distance to a segment; TT is how far along it.\nlet TT = 0, QX = 0, QY = 0;\nfunction seg(px, py, ex, ey) {\n  TT = cl((px * ex + py * ey) / (ex * ex + ey * ey + 1e-6), 0, 1);\n  (QX = px - TT * ex), (QY = py - TT * ey);\n  return sqrt(QX * QX + QY * QY);\n}\n\n// Black body, 0..1: dark red, red, orange, yellow, near white.\nconst BBK = [0, 0, 0, 0, 0.12, 46, 3, 0, 0.25, 118, 10, 0, 0.38, 196, 34, 0, 0.5, 245, 80, 6, 0.62, 255, 132, 22, 0.75, 255, 180, 62, 0.87, 255, 222, 132, 1, 255, 246, 216];\nconst BB = new Float32Array(513 * 3);\nfor (let q = 0, k = 0; q \u003c= 512; q++) {\n  const T = q / 512;\n  while (k \u003c 28 && T > BBK[k + 4]) k += 4;\n  for (let c = 0; c \u003c 3; c++) BB[q * 3 + c] = mix(BBK[k + 1 + c], BBK[k + 5 + c], (T - BBK[k]) / (BBK[k + 4] - BBK[k]));\n}\nconst bq = (T) => (((T \u003c 0 ? 0 : T > 1 ? 1 : T) * 512 + 0.5) | 0) * 3;\n// Clear, cobalt, amber, green, ruby: colour and body when cold, then what passes of the glow.\nconst GLASS = [\n  [150, 212, 204, 0.3, 1, 0.97, 0.9], [34, 72, 238, 1, 0.3, 0.38, 1], [238, 138, 24, 1, 1, 0.62, 0.2],\n  [40, 208, 88, 1, 0.42, 1, 0.5], [228, 18, 70, 1, 1, 0.18, 0.4],\n];\n// As the glow fades the glass filters it, and the colour comes through.\nconst flt = (T) => 0.95 * (1 - sm(0.45, 0.85, T));\n\n// Deck, floor, the pit's opening, the glory hole (a drum seen end on at a slant), hands and pipe.\nconst DK = 26, FL = 31, PT = 35, OX0 = 19, OX1 = 47;\nconst MX = 49, MY = 15, MRX = 3.6, MRY = 7, FRX = 6.5, FRY = 11;\nconst PIPE = 27, BACK = 8, TH0 = 0.34, HX = 24.5, HY = 19.5, HX2 = 25.5, HY2 = 17.5;\nconst THF = atan2(MX - HX2, MY - HY2);\nconst GATHER = 0, OUT = 1, BLOW = 2, SWING = 3, LIFT = 4, REHEAT = 5, CUT = 6, EMPTY = 7;\nconst DUR = [1.3, 1, 0.8, 5, 0.9, 1.8, 1.4, 0.9];\nconst V0 = 1300, OM = (2 * PI) / 2.3, START = 13.6, FS = new Float32Array(NN), CP = new Float32Array(80);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), piece = () => ({ X: F(NN), Y: F(NN), R: F(NN), B: F(NN), T: F(NN), on: 0, dy: 0, vy: 0 });\n  const S = (params.s = {\n    t: 0, th: THF, rho: 1, sw: 0, be: 0, bv: 0, vx: 0, tx: 0, ty: 0, l: 4, R0: 3, bl: 9, rot: 0, pT: 0, boom: 0, tmax: 0.8, live: 0, k1: -1, gl: [0, 0, 0, 1, 1, 1, 1], pc: piece(), fall: piece(), sp: [], lt: F(84),\n    fa: F(N), se: F(N), ci: new Uint8Array(N), hc: F(256), cx: F(256), cn: F(256), top: F(W),\n    f: F(N * 3), lr: F(N), lg: F(N), lb: F(N), mat: new Uint8Array(N), al: F(N * 3), gm: F(N),\n    gd: F(N).fill(99), gs: F(N), gr: F(N), gu: F(N), gb: F(N), gt: F(N),\n  });\n  maps(S);\n  go(S, GATHER);\n}\n\nfunction maps(S) {\n  const M = S.mat, A = S.al, HG = S.top;\n  for (let x = 0; x \u003c W; x++) HG[x] = 122 - 10 * ((x + 0.5 - 33) / 31) ** 2 + 2 * (vn(x * 0.3, 5) - 0.5);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, gr = 0.85 + 0.3 * hash(x, y);\n    let m = 0, a = 0, c = [1, 0.9, 0.8];\n    if (((px - MX) / MRX) ** 2 + ((py - MY) / MRY) ** 2 \u003c 1) m = 3;\n    else if (((px - MX) / FRX) ** 2 + ((py - MY) / FRY) ** 2 \u003c 1) (m = 2), (a = 0.5 * (0.8 + 0.3 * hash(x, y + 7))), (c = [1, 0.84, 0.7]);\n    else if (x > MX && y \u003c FL && y > MY - FRY - 1) {\n      // The drum with a rim on top and two bands, a dark stand below.\n      m = 1;\n      a = y \u003c MY + FRY ? (y === MY - FRY ? 0.9 : 0.3 * (0.35 + 0.65 * cos(((py - MY) / FRY) * 1.45))) * (x === 56 || x === 61 ? 1.8 : 1) : y === MY + FRY ? 0.7 : 0.12;\n      c = [0.9, 0.93, 1];\n    } else if (y >= FL && y \u003c PT && (x \u003c OX0 || x > OX1)) (m = 4), (a = y === FL ? 0.8 : 0.3 * gr * (0.8 + 0.4 * hash(x >> 1, y))), (c = [1, 0.95, 0.88]);\n    else if ((y >= DK && y \u003c DK + 2 && x \u003c 23) || ((x === 3 || x === 19) && y >= DK && y \u003c FL)) (m = 5), (a = y === DK ? 0.9 : 0.35), (c = [0.9, 0.93, 1]);\n    else if (py >= HG[x]) {\n      // Broken glass: facets on a jittered grid, dark seams between them.\n      m = 7;\n      let d1 = 9, d2 = 9, id = 0, ci = 0;\n      for (let j = 0; j \u003c 9; j++) {\n        const cx = floor(x / 3) + (j % 3) - 1, cy = floor(y / 2.5) + floor(j / 3) - 1, d = (px - (cx + hash(cx, cy)) * 3) ** 2 + (py - (cy + hash(cy, cx + 9)) * 2.5) ** 2;\n        if (d \u003c d1) (d2 = d1), (d1 = d), (id = hash(cx + 31, cy)), (ci = cl((cy - 42) * 24 + cx + 1, 0, 254));\n        else if (d \u003c d2) d2 = d;\n      }\n      (S.ci[i] = ci), (S.cx[ci] += px), S.cn[ci]++;\n      (S.fa[i] = id), (S.se[i] = sm(0.9, 0.2, sqrt(d2) - sqrt(d1)) * 0.7 + (py - HG[x] \u003c 1 ? -0.3 : 0));\n    } else if (y >= FL) {\n      // Firebrick courses, sooted in clouds.\n      m = 6;\n      const r = floor(y / 3), sx = x + (r & 1) * 3;\n      a = y % 3 === 2 || sx % 7 === 6 ? 0.1 : 0.5 * (0.7 + 0.6 * hash(floor(sx / 7), r)) * (0.45 + 0.7 * vn(x * 0.11, y * 0.045)) * gr * (x \u003c 2 || x > 61 ? 0.45 : 1);\n      c = [1, 0.76, 0.58];\n    } else {\n      // Corrugated sheeting behind the shop.\n      a = 0.5 * (0.88 + 0.12 * cos(px * PI * 0.5)) * (x % 16 === 15 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 0.07, y * 0.15));\n      c = [0.95, 0.9, 0.85];\n    }\n    M[i] = m;\n    for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = a * c[j];\n  }\n}\n// Heat left in the heap where hot glass lands, shard by shard.\nfunction heat(S, x, y, T, r) {\n  for (let j = floor(y - r); j \u003c= y + r; j++)\n    for (let i = floor(x - r); i \u003c= x + r; i++) {\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || S.mat[j * W + i] !== 7) continue;\n      const c = S.ci[j * W + i];\n      S.hc[c] = max(S.hc[c], T * sm(r + 0.5, r * 0.3, sqrt((i + 0.5 - x) ** 2 + (j + 0.5 - y) ** 2)));\n    }\n}\n\nfunction go(S, ph) {\n  (S.ph = ph), (S.pt = 0), (S.th1 = S.th);\n  if (ph === GATHER) (S.pc.on = 1), (S.V = 60), (S.b = S.bt = 0), (S.sb = S.sbt = 0.3), (S.pass = 1), S.pc.T.fill(S.tmax);\n  else if (ph === BLOW) blow(S, S.pass > 1 ? 0.1 : 0.4);\n  else if (ph === SWING) S.sw = 0;\n}\nfunction next(S) {\n  const p = S.ph;\n  go(S, p === SWING ? (S.pass > 1 ? CUT : LIFT) : p === REHEAT ? OUT : p === EMPTY ? GATHER : p + 1);\n  if (p === REHEAT) S.pass++;\n}\nfunction blow(S, db) {\n  (S.bt = min(0.74, S.b + db)), (S.sbt = min(0.84, S.pass > 1 ? S.sb + 0.12 : 0.55)), (S.bl = 0);\n}\nconst live = (S) => S.pc.on && (S.ph === BLOW || S.ph === SWING || (S.ph === CUT && S.pt \u003c 0.4));\n\n// Radius from volume and length: a neck, a body narrowing down, a round end.\nfunction shape(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1);\n  let R = max(1, S.R0);\n  for (let it = 0; it \u003c 3; it++) {\n    let sum = 0;\n    for (let i = 0; i \u003c NN; i++) {\n      const s = i / (NN - 1), a = s * l, ct = 1 - min(1, (a + 0.25 * R) / (1.1 * R)), cb = 1 - min(1, (l - a) / (0.62 * R));\n      FS[i] = (1 - 0.38 * s) * sqrt(1 - ct * ct) * sqrt(max(0, 1 - cb * cb));\n      sum += FS[i] * FS[i];\n    }\n    R = max(1, sqrt(S.V / (PI * dl * max(1e-3, sum))));\n  }\n  S.R0 = R;\n  for (let i = 0; i \u003c NN; i++) {\n    const q = (i / (NN - 1) - 0.05) / (S.sb - 0.05), B = q > 0 && q \u003c 1 ? S.b * sqrt(1 - (2 * q - 1) ** 2) : 0;\n    (P.B[i] = B), (P.R[i] = (R * FS[i]) / sqrt(1 - B * B));\n  }\n}\n// Off the pipe along its axis, then hanging and trailing the swing; straight when lifted.\nfunction line(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1), th = S.th, w0 = 0.8 * S.R0 + 1.5;\n  let x = S.tx - sin(th) * 1.2, y = S.ty - cos(th) * 1.2;\n  for (let i = 0; i \u003c NN; i++) {\n    (P.X[i] = x), (P.Y[i] = y);\n    const s = i / (NN - 1), w = exp((-s * l) / w0), a = mix(th * w + (1 - w) * S.be * s ** 0.8, th, S.rho);\n    (x += sin(a) * dl), (y += cos(a) * dl);\n  }\n}\n// Radiative cooling, faster where the glass is thin.\nconst cool = (T, R, d) => T - ((0.22 * (T + 0.1)) / max(2.2, R) ** 0.7) * d;\n\nfunction step(S, d) {\n  (S.t += d), (S.pt += d);\n  const dur = () => (S.ph === SWING ? (S.pass > 1 ? 6.5 : 5) : DUR[S.ph]);\n  if (S.pt >= dur()) next(S);\n  const ph = S.ph, pt = S.pt, D = dur(), u = sm(0, 1, pt / D), P = S.pc, F = S.fall, HG = S.top;\n  let th = S.th, rho = S.rho, inH = 0;\n  S.env = 0;\n  if (ph === GATHER || ph === REHEAT) (th = THF + 0.015 * sin(S.t * 3)), (rho = inH = 1);\n  else if (ph === OUT) (th = mix(S.th1, TH0, u)), (rho = 1 - sm(0.3, 0.9, pt / D)), (inH = 1 - sm(0, 0.25, pt / D));\n  else if (ph === BLOW) (th = TH0 + 0.03 * sin(pt * 4)), (rho = 0);\n  else if (ph === SWING) {\n    S.env = sm(0, 1.4, pt) * (1 - sm(D - 1.1, D, pt));\n    S.sw += d * OM * sqrt(62 / S.L) * (1 - 0.15 * (S.l / S.L));\n    (th = TH0 + S.A * S.env * sin(S.sw)), (rho = 0);\n  } else if (ph === LIFT || ph === EMPTY) (th = mix(S.th1, THF, u)), (rho = sm(0, 0.3, pt / D)), (inH = sm(0.75, 1, pt / D));\n  else {\n    (th = mix(S.th1, TH0, sm(0, 0.4, pt))), (rho = 0);\n    if (P.on && pt >= 0.4) cut(S);\n  }\n  const q = cl((th - TH0) / (THF - TH0), 0, 1);\n  (S.th = th), (S.rho = rho), (S.hx = mix(HX, HX2, q)), (S.hy = mix(HY, HY2, q));\n  const tx = S.hx + PIPE * sin(th), ty = S.hy + PIPE * cos(th), vx = (tx - S.tx) / d, ax = cl((vx - S.vx) / d, -400, 400), Le = max(10, 0.55 * S.l);\n  (S.tx = tx), (S.ty = ty), (S.vx = vx);\n  // The hanging part is a pendulum on a moving pivot.\n  if (rho > 0.5) S.be = S.bv = 0;\n  else (S.bv += ((-190 / Le) * sin(S.be) - 1.3 * S.bv - (ax / Le) * cos(S.be)) * d), (S.be = cl(S.be + S.bv * d, -0.7, 0.7));\n  (S.b += (S.bt - S.b) * min(1, d * 4)), (S.sb += (S.sbt - S.sb) * min(1, d * 4)), (S.bl += d), (S.rot += d * (3 + 5 * inH));\n  if (P.on) {\n    if (ph === GATHER) (S.V = max(60, V0 * (S.L / 62) * sm(0, 1.1, pt))), (S.l = 1.9 * cbrt((3 * S.V) / (4 * PI)));\n    let tm = 0;\n    for (let i = 0; i \u003c NN; i++) tm += P.T[i] / NN;\n    if (rho \u003c 0.5) S.l += 0.42 * sm(0.15, 0.55, tm) * max(0, (S.pass > 1 ? S.L : 0.64 * S.L) - S.l) * (0.3 + 0.7 * S.env) * d;\n    shape(S), line(S);\n    // The glory hole brings it all back up.\n    for (let i = 0; i \u003c NN; i++) {\n      const T = P.T[i] + (S.tmax - P.T[i]) * (1 - exp(-1.9 * d)) * inH;\n      P.T[i] = mix(T, cool(T, P.R[i], d), 1 - inH);\n    }\n    (S.pT = mix(S.pT, P.T[0] * 0.7, min(1, d * 2))), (S.gx = P.X[NN >> 1]), (S.gy = P.Y[NN >> 1]);\n  } else S.pT *= exp(-d * 0.5);\n  if (F.on) {\n    (F.vy += 300 * d), (F.dy += F.vy * d), (S.gx = F.X[NN >> 1]), (S.gy = F.Y[NN >> 1] + F.dy);\n    for (let i = 0; i \u003c NN; i++) F.T[i] = cool(F.T[i], F.R[i], d);\n    // It hits the heap and goes to pieces.\n    const bx = F.X[NN - 1], hy = HG[cl(bx | 0, 0, W - 1)];\n    if (F.Y[NN - 1] + F.dy > hy - 1) {\n      heat(S, bx, hy + 1, F.T[NN - 1] + 0.1, 3.5);\n      for (let i = 0; i \u003c NN * 2; i++) {\n        const j = i >> 1;\n        S.sp.push({ x: F.X[j] + (rnd() - 0.5) * F.R[j], y: F.Y[j] + F.dy, vx: (rnd() - 0.5) * 60, vy: F.vy * (0.5 + 0.4 * rnd()) - 30 * rnd(), l: 9, T: F.T[j] });\n      }\n      (F.on = 0), (S.boom = 1), (S.bx = bx);\n    }\n  }\n  for (let c = 0; c \u003c 255; c++) if (S.hc[c] > 0) S.hc[c] -= 0.03 * (S.hc[c] + 0.08) * d;\n  S.boom = max(0, S.boom - d * 2.5);\n  for (const p of S.sp) {\n    (p.vy += 200 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 1.2);\n    if (p.x \u003c 0.5 || p.x > W - 0.5) (p.vx *= -0.5), (p.x = cl(p.x, 0.5, W - 0.5));\n    // A shard bounces, then settles into the heap and leaves its heat there.\n    if (p.l > 5 && p.y > HG[p.x | 0]) p.vy > 70 ? ((p.vy *= -0.35), (p.vx *= 0.6), (p.y = HG[p.x | 0])) : (heat(S, p.x, p.y + 1, p.T, 1.3 + rnd()), (p.l = 0));\n  }\n  S.sp = S.sp.filter((p) => p.l > 0 && p.y \u003c H + 2);\n}\n\n// The jacks score the neck and the piece drops away into the pit.\nfunction cut(S) {\n  const P = S.pc, F = S.fall;\n  for (const k of \"XYRBT\") F[k].set(P[k]);\n  (F.on = 1), (F.dy = F.vy = P.on = 0), (S.pT = 0.75), (S.l = 4), (S.V = 60);\n  for (let k = 0; k \u003c 14; k++) S.sp.push({ x: S.tx, y: S.ty + 1, vx: (rnd() - 0.5) * 34, vy: -10 - 28 * rnd(), l: 0.6 + 0.4 * rnd(), T: 0.8 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], -1, 1), k4 = cl(k[3], 0, 1);\n  if (k1 !== S.k1) {\n    const u = k1 * 4, i = min(3, floor(u)), f = sm(0.25, 0.75, u - i);\n    for (let c = 0; c \u003c 7; c++) S.gl[c] = mix(GLASS[i][c], GLASS[i + 1][c], f);\n    S.k1 = k1;\n  }\n  (S.L = 62 + 18 * k3), (S.A = 0.29 + 0.15 * k3), (S.hot = 0.84 + 0.16 * k4), (S.tmax = 0.86 + 0.18 * k4), (S.fI = 1 + 0.55 * k4);\n  if (!S.live) {\n    while (!S.live) step(S, 1 / 30), (S.live = S.t >= START ? 1 : 0);\n    // The last piece lies broken in the heap, still red.\n    heat(S, 31 + 6 * rnd(), 125, 0.44, 5);\n    for (let k = 0; k \u003c 7; k++) heat(S, 2 + 60 * rnd(), 112 + 16 * rnd(), 0.18 + 0.14 * rnd(), 1.5 + 2 * rnd());\n  }\n  const bp = input.btnPressed || [];\n  if (bp[0] && live(S)) go(S, LIFT);\n  if (bp[1] && live(S)) blow(S, 0.14);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\n// Lights: the glory hole, seven points along the gather, the heap's embers, the crash.\nfunction lights(S) {\n  const LT = S.lt, M = S.mat, HC = S.hc, GL = S.gl;\n  let n = 0;\n  const add = (x, y, T, w, sg, g = 0) => {\n    const o = n++ * 6, b = bq(T), f = g * flt(T);\n    (LT[o] = x), (LT[o + 1] = y), (LT[o + 5] = 1 / (sg * sg));\n    for (let c = 0; c \u003c 3; c++) LT[o + 2 + c] = (BB[b + c] / 255) * w * (1 - f + f * GL[4 + c]);\n  };\n  add(MX - 2.5, MY + 0.5, S.hot, S.fI * (0.92 + 0.12 * vn(S.t * 4, 3)), 13);\n  for (const P of [S.pc, S.fall]) {\n    if (!P.on) continue;\n    for (let i = 3; i \u003c NN; i += 6) {\n      const x = P.X[i], y = P.Y[i] + P.dy, m = x >= 0 && x \u003c W && y >= 0 && y \u003c H ? M[(y | 0) * W + (x | 0)] : 0;\n      if (y \u003c H + 12) add(x, y, P.T[i], 0.32 * min(2, P.R[i] / 3) * (m === 1 || m === 2 ? 0.15 : 1), 10 + 1.4 * P.R[i], 1);\n    }\n  }\n  for (let h = 0; h \u003c 2; h++) {\n    let w = 0, T = 0, sx = 0;\n    for (let c = 0; c \u003c 255; c++) {\n      const e = (HC[c] - 0.15) * S.cn[c], x = S.cx[c] / S.cn[c];\n      if (e > 0 && x \u003c 32 === !h) (w += e), (sx += e * x), (T = max(T, HC[c]));\n    }\n    if (w > 0) add(sx / w, 118, T, min(3, w * 0.12), 20, 0.7);\n  }\n  if (S.boom > 0) add(S.bx, 112, 0.75, S.boom * 1.6, 18);\n  return n;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  const F = S.f, M = S.mat, A = S.al, LR = S.lr, LG = S.lg, LB = S.lb, LT = S.lt, GM = S.gm, t = S.t, hot = S.hot, n = lights(S);\n  const lx = LT[0], ly = LT[1], fw = LT[2] / (BB[bq(hot)] / 255), gc = bq(hot * 0.6);\n  figure(S);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, o = i * 3, m = M[i], ds = (px - lx) ** 2 + (py - ly) ** 2, qa = 1 / (1 + ds * LT[5]);\n    // The glory hole's near pool and long reach; below the floor, only through the opening.\n    let fq = qa * qa + 0.62 / (1 + ds / 500);\n    if (y > FL + 1) {\n      const xc = lx + ((px - lx) * (FL - ly)) / (py - ly);\n      fq *= 0.06 + 0.94 * sm(OX0 - 3, OX0 + 3, xc) * sm(OX1 + 3, OX1 - 3, xc) * exp(-(py - FL) / 40);\n    }\n    let r = 0.004 + LT[2] * fq, g = 0.003 + LT[3] * fq, b = 0.003 + LT[4] * fq;\n    for (let j = 6; j \u003c n * 6; j += 6) {\n      const dx = px - LT[j], dy = py - LT[j + 1];\n      let q = 1 / (1 + (dx * dx + dy * dy) * LT[j + 5]);\n      q *= q;\n      (r += LT[j + 2] * q), (g += LT[j + 3] * q), (b += LT[j + 4] * q);\n    }\n    (LR[i] = r), (LG[i] = g), (LB[i] = b);\n    const ex = (px - MX) / MRX, ey = (py - MY) / MRY, e2 = ex * ex + ey * ey;\n    if (m === 3) {\n      // The mouth, hottest in the middle, the fire churning.\n      const c = bq(hot * (1 - 0.2 * e2) + 0.07 * (vn(x * 0.6, y * 0.5 - t * 5) - 0.5));\n      for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j];\n      continue;\n    }\n    // The refractory round the mouth glows from the heat.\n    const gw = m === 2 ? exp(-(sqrt(e2) - 1) * 2.4) * 0.9 * fw : 0;\n    (F[o] = A[o] * r * 255 + BB[gc] * gw), (F[o + 1] = A[o + 1] * g * 255 + BB[gc + 1] * gw), (F[o + 2] = A[o + 2] * b * 255 + BB[gc + 2] * gw);\n    // The gaffer, a silhouette with a rim of light.\n    const c = GM[i];\n    if (c > 0) {\n      const rim = max(1 - GM[i + 1], 0.6 * (1 - GM[i + W]), 0.4 * (1 - GM[i - W])) * 330;\n      (F[o] = mix(F[o], 5 + r * rim, c)), (F[o + 1] = mix(F[o + 1], 4 + g * rim, c)), (F[o + 2] = mix(F[o + 2], 4 + b * rim, c));\n    }\n  }\n  heap(S);\n  if (S.pc.on) glass(S, S.pc);\n  if (S.fall.on) glass(S, S.fall);\n  flames(S);\n  pipe(S);\n  for (const p of S.sp) {\n    const c = bq(p.l > 5 ? p.T + 0.1 : 0.55 + 0.4 * p.l), a = p.l > 5 ? 1 : min(1, p.l * 1.5);\n    put(F, p.x, p.y, c, a), put(F, p.x - p.vx * 0.025, p.y - p.vy * 0.025, c, a * 0.5);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction put(F, x, y, c, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j], a);\n}\n\n// The cullet heap: hot shards glow, cool ones show their colour and glint.\nfunction heap(S) {\n  const { f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL, hc: HC, ci: CI, fa: FA, se: SE } = S;\n  for (let i = 108 * W; i \u003c N; i++) {\n    if (M[i] !== 7) continue;\n    const o = i * 3, fa = FA[i], se = SE[i], T = HC[CI[i]] * (0.94 + 0.12 * fa), v = 1 - sm(0.1, 0.34, T), lum = (LR[i] + LG[i] + LB[i]) / 3;\n    const gl = max(0, cos(fa * 12.6 - 2 * atan2(S.gy - (i >> 6), S.gx - (i & 63)))) ** 10 * lum * 2.4 * v * (1 - se);\n    const b = (0.3 + 3 * lum) * (0.35 + 0.8 * fa) * (1 - se) * v * GL[3], c = bq(T), f = 0.7 * flt(T);\n    for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j] * (0.95 - 0.4 * se) * (1 - f + f * GL[4 + j]) + GL[j] * b + gl * (100 + GL[j]);\n  }\n}\n\n// The glass as capsules between nodes, the nearest one winning each LED.\nfunction glass(S, P) {\n  const { gd: GD, gs: GS, gr: GR, gu: GU, gb: GB, gt: GT, f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL } = S, oy = P.dy;\n  let X0 = W, X1 = -1, Y0 = H, Y1 = -1;\n  for (let i = 0; i \u003c NN - 1; i++) {\n    const ax = P.X[i], ay = P.Y[i] + oy, bx = P.X[i + 1], by = P.Y[i + 1] + oy, ra = P.R[i], rb = P.R[i + 1], rr = max(ra, rb) + 1;\n    const x0 = max(0, floor(min(ax, bx) - rr)), x1 = min(W - 1, ceil(max(ax, bx) + rr)), y0 = max(0, floor(min(ay, by) - rr)), y1 = min(H - 1, ceil(max(ay, by) + rr));\n    (X0 = min(X0, x0)), (X1 = max(X1, x1)), (Y0 = min(Y0, y0)), (Y1 = max(Y1, y1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const k = y * W + x, dd = seg(x + 0.5 - ax, y + 0.5 - ay, bx - ax, by - ay), r = ra + (rb - ra) * TT;\n        if (dd - r \u003c GD[k]) (GD[k] = dd - r), (GS[k] = (i + TT) / (NN - 1)), (GR[k] = r), (GU[k] = QX * (by - ay) - QY * (bx - ax) >= 0 ? dd : -dd), (GB[k] = mix(P.B[i], P.B[i + 1], TT)), (GT[k] = mix(P.T[i], P.T[i + 1], TT));\n      }\n  }\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const k = y * W + x, sd = GD[k], m = M[k];\n      if (sd >= 0.5) continue;\n      GD[k] = 99;\n      if (m === 1 || m === 2) continue;\n      const a = cl(0.5 - sd, 0, 1), r = max(0.5, GR[k]), d = GU[k], u = cl(d / r, -1, 1), ad = abs(d), rb = GB[k] * r, o = k * 3;\n      const ib = rb > 0.6 ? sm(0, 0.8, rb - ad) : 0, ch = 2 * r * sqrt(1 - u * u) * (1 - 0.5 * ib);\n      // More glow through more glass, less through the bubble; the skin cools first.\n      const e = 1 - exp(-0.3 * ch), T = GT[k] - 0.16 * u * u, st = sin(GS[k] * S.l * 0.55 - S.rot + u * 2.4);\n      const c = bq(T * (0.62 + 0.38 * e) * (1 + 0.05 * st) + 0.06 * (1 - u * u) - 0.08 * ib), dim = 1 - 0.28 * ib, v = 1 - sm(0.14, 0.42, T), f = flt(T);\n      // Cool glass shows its colour and a highlight.\n      const lum = (LR[k] + LG[k] + LB[k]) / 3, bod = (0.25 + 1.2 * lum) * (0.55 + 0.45 * (1 - u * u)) * (0.85 + 0.15 * st) * (1 - 0.35 * ib) * GL[3];\n      const sp = exp(-(((u - 0.45) / 0.2) ** 2)) * (0.25 + 1.3 * lum) * 160 * v;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j] * dim * (1 - f + f * GL[4 + j]) + v * (GL[j] * bod + sp), a);\n    }\n}\n\n// Fire licks out over the top lip of the glory hole.\nfunction flames(S) {\n  const F = S.f, t = S.t, amt = 1.5 + 3 * (S.hot - 0.84), top = MY - MRY + 2;\n  for (let y = max(0, top - 15); y \u003c top; y++) {\n    const h = (top - y) / 15;\n    for (let x = MX - 7; x \u003c MX + 6; x++) {\n      const dx = (x + 0.5 - (MX - 0.8 + 2.5 * h + sin(t * 3 + y * 0.4) * h)) / (4.4 * (1 - 0.35 * h));\n      const dens = sm(0.2, 0.55, vn(x * 0.3, y * 0.25 + t * 7) * (1.2 - h) * exp(-dx * dx) * amt), c = bq(0.48 + 0.36 * dens);\n      for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += BB[c + j] * dens;\n    }\n  }\n}\n\n// The gaffer: capsules for head, cap, body and limbs, posed by the pipe.\nfunction figure(S) {\n  const GM = S.gm, q = cl((S.th - TH0) / (THF - TH0), 0, 1), lean = (1 - q) * (0.9 + 1.4 * (S.th - TH0)), bob = 0.8 * sin(PI * cl(S.bl / 0.8, 0, 1));\n  const hpx = 14.5 + 0.5 * lean, hpy = 16.6, shx = 16 + lean, shy = 9.8 + 0.4 * lean, hx = S.hx, hy = S.hy;\n  const hdx = mix(16.8 + 1.2 * lean, hx - BACK * sin(S.th) - 2, bob), hdy = mix(5.4 + 0.3 * lean, hy - BACK * cos(S.th) - 2.4, bob);\n  const ebx = shx + 0.4 * (hx - shx) - 0.5, eby = shy + 0.62 * (hy - shy) + 1.8;\n  let n = 0;\n  const cap = (a, b, c, d, r) => ((CP[n] = a), (CP[n + 1] = b), (CP[n + 2] = c - a), (CP[n + 3] = d - b), (CP[n + 4] = r), (n += 5));\n  // Body, apron, neck, capped head, arm, legs, feet.\n  cap(hpx, hpy, shx, shy, 2.9), cap(hpx - 0.3, hpy + 1.5, hpx + 1.2, hpy + 3.2, 2.4), cap(shx, shy, hdx, hdy, 1.2), cap(hdx, hdy, hdx, hdy, 2.5), cap(hdx - 1.2, hdy - 1.7, hdx + 3.4, hdy - 1.3, 0.9);\n  cap(shx, shy, ebx, eby, 1.4), cap(ebx, eby, hx, hy, 1.2);\n  cap(hpx, hpy + 2, 12.2, 21.6, 1.7), cap(12.2, 21.6, 10.6, 25.4, 1.4), cap(hpx + 0.6, hpy + 2, 17.6, 21.2, 1.7), cap(17.6, 21.2, 18.4, 25.4, 1.4);\n  cap(10.2, 25.6, 12.4, 25.6, 0.9), cap(18.2, 25.6, 20.4, 25.6, 0.9);\n  for (let y = 0; y \u003c DK + 1; y++)\n    for (let x = 5; x \u003c 32; x++) {\n      let c = 0;\n      for (let j = 0; j \u003c n; j += 5) c = max(c, cl(CP[j + 4] + 0.5 - seg(x + 0.5 - CP[j], y + 0.5 - CP[j + 1], CP[j + 2], CP[j + 3]), 0, 1));\n      GM[y * W + x] = c;\n    }\n}\n\n// The blowpipe, steel, its far end hot from the glass.\nfunction pipe(S) {\n  const F = S.f, M = S.mat, st = sin(S.th), ct = cos(S.th), L = PIPE + BACK, ax = S.hx - BACK * st, ay = S.hy - BACK * ct, ex = L * st, ey = L * ct;\n  for (let y = max(0, floor(min(ay, ay + ey) - 1)); y \u003c= min(H - 1, max(ay, ay + ey) + 1); y++)\n    for (let x = max(0, floor(min(ax, ax + ex) - 1)); x \u003c= min(W - 1, max(ax, ax + ex) + 1); x++) {\n      const k = y * W + x, c = cl(1.1 - seg(x + 0.5 - ax, y + 0.5 - ay, ex, ey), 0, 1), hb = bq(S.pT * sm(PIPE - 7, PIPE + 1, TT * L - BACK)), o = k * 3;\n      if (c \u003c= 0 || M[k] === 1) continue;\n      (F[o] = mix(F[o], 26 + S.lr[k] * 190 + BB[hb], c)), (F[o + 1] = mix(F[o + 1], 26 + S.lg[k] * 190 + BB[hb + 1], c)), (F[o + 2] = mix(F[o + 2], 30 + S.lb[k] * 200 + BB[hb + 2], c));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glass","min":0,"max":1,"about":"The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower."},{"name":"Length","min":-1,"max":1,"about":"How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1."},{"name":"Heat","min":0,"max":1,"about":"How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter."}],"start":[0,2,0,0.06],"measures":{"motion":0.2176,"detail":0.046,"edges":0.1956,"complexity":1.533,"coverage":0.4076,"colour":0.1924,"drift":0.0806},"knobResponse":[0.0366,0.0488,0.0315,0.0412]},{"slug":"glitter-fall","title":"Glitter Fall","family":"cosmetic","round":29,"note":"검은 화면 위로 분홍 글리터가 흔들리는 줄기로 쏟아지고, 육각 조각 하나하나가 제 박자로 돌다가 면이 빛을 향할 때 반짝여요. 바닥에 쌓인 더미는 바닥 틈으로 모래시계처럼 빠져요. K1 은 색상환을 다 돌고, 누르면 더미 윗층이 공중으로 튀어 올라요.","idea":"Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.","buttons":"K1 tap throws the top of the heap up into the air, and it flashes all the way back down.","code":"// ===== Patternflow pattern =====\n// Title:   Glitter Fall\n// Family:  cosmetic\n// Idea:    Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after loose cosmetic glitter poured under a display lamp\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1\n//\n// Knob 1: Hue. The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall.\n// Knob 2: Speed. How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower.\n// Knob 3: Amount. How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast.\n// Knob 4: Size. The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble.\n// Buttons: K1 tap throws the top of the heap up into the air, and it flashes all the way back down.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, abs, sqrt, log, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Every flake carries one of NS seeds, which fix its colour class, how it lies\n// once it has landed and how bright it is. A grain in the heap keeps its seed,\n// so the heap's texture and glints stay put while the lamp moves.\nconst NS = 1024;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst TX = new Float32Array(NS), TY = new Float32Array(NS), JIT = new Float32Array(NS), CLS = new Uint8Array(NS);\nfor (let i = 0; i \u003c NS; i++) {\n  // A landed flake lies roughly flat: its tilt is a small Gaussian.\n  const r = sqrt(-2 * log(hash(i * 4) + 1e-6)) * 0.3, a = 2 * PI * hash(i * 4 + 1);\n  TX[i] = r * cos(a);\n  TY[i] = r * sin(a);\n  JIT[i] = hash(i * 4 + 2);\n  const c = hash(i * 4 + 3);\n  // Main colour, a lighter tint, a deeper shade, and silver.\n  CLS[i] = c \u003c 0.5 ? 0 : c \u003c 0.7 ? 1 : c \u003c 0.85 ? 2 : 3;\n}\n// Hue offset, saturation and value of each class, and how much of the hue a\n// flash keeps. Silver keeps a breath of the hue so it sits in the same mix.\nconst PAL = [\n  [0, 0.85, 0.8, 0.45],\n  [-0.03, 0.55, 0.95, 0.35],\n  [0.03, 1, 0.65, 0.55],\n  [0, 0.1, 0.5, 0.08],\n];\n\n// The heap's grains sit one to an LED, stacked in columns from the floor up.\n// HEAP is how many grains make the floor open, LOW how many it keeps.\nconst HEAP = 2600, LOW = 1150;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), ph: F(MAXP), om: F(MAXP), al: F(MAXP), sw: F(MAXP), vt: F(MAXP), sd: new Uint16Array(MAXP),\n    n: 0, G: new Int16Array(N).fill(-1), h: new Int16Array(W), grains: 0, T: 0, acc: 0, ca: 0, dir: 1,\n    drain: 0, dx0: 0, dx1: 0, dtime: 0, started: false,\n    buf: F(N * 3), base: F(12), fl: F(12), hue: 0, amount: 1, size: 0.06, lx: 32, ly: 80,\n  };\n}\n\n// One flake into the air at x, y.\nfunction spawn(S, x, y, vx, vy, seed) {\n  if (S.n >= MAXP) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  // Its own spin: phase and rate, so each flash is a smooth function of time.\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.6 + 3 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n  S.al[i] = Math.random() * PI;\n  S.sw[i] = Math.random() * 2 * PI;\n  S.vt[i] = 12 + 6 * Math.random();\n  S.sd[i] = seed;\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.al[i] = S.al[j];\n  S.sw[i] = S.sw[j];\n  S.vt[i] = S.vt[j];\n  S.sd[i] = S.sd[j];\n}\n\n// Where the stream comes down: a centre that wanders the width of the panel.\nconst pour = (T) => 32 + 20 * sin(T * 0.19) + 7 * sin(T * 0.47 + 1.3);\n\n// Moves the top grain of column a onto the top of column b.\nfunction slide(S, a, b) {\n  const h = S.h, G = S.G, from = (H - h[a]) * W + a;\n  h[b]++;\n  G[(H - h[b]) * W + b] = G[from];\n  G[from] = -1;\n  h[a]--;\n}\n\n// The heap settles like sand: wherever a column stands two or more grains\n// above its neighbour, grains slip from its top down onto the neighbour's, at\n// most three a step, so a wall slumps to the angle of repose within a few\n// frames and the slope can be seen running.\nfunction settle(S) {\n  const h = S.h, G = S.G;\n  S.dir = -S.dir;\n  for (let k = 0; k \u003c W - 1; k++) {\n    const x = S.dir > 0 ? k : W - 2 - k;\n    let d = h[x] - h[x + 1];\n    // Some steps hold at 45 degrees and some do not, which roughens the slopes.\n    const lim = Math.random() \u003c 0.5 ? 2 : 3;\n    if (d >= lim) for (let n = min(3, d >> 1); n > 0; n--) slide(S, x, x + 1);\n    else if (-d >= lim) for (let n = min(3, -d >> 1); n > 0; n--) slide(S, x + 1, x);\n  }\n  // An open floor lets the grains over the slot fall out of the bottom: the\n  // whole column sinks by one, so its glitter is seen running down.\n  if (S.drain)\n    for (let x = S.dx0; x \u003c= S.dx1; x++) {\n      if (h[x] \u003c= 0 || Math.random() > 0.8) continue;\n      for (let y = H - 1; y > H - h[x]; y--) G[y * W + x] = G[(y - 1) * W + x];\n      G[(H - h[x]) * W + x] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\n// Lands a falling flake on top of column cx.\nfunction land(S, cx, seed) {\n  if (S.h[cx] >= H - 1) return;\n  S.h[cx]++;\n  S.G[(H - S.h[cx]) * W + cx] = seed;\n  S.grains++;\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const T = S.T;\n  // The lamp drifts round the lower two thirds of the panel.\n  S.lx = 32 + 34 * sin(T * 0.29);\n  S.ly = 84 + 34 * sin(T * 0.21 + 0.7);\n  // Pouring: a little over half the glitter comes down in the stream, the\n  // rest is sprinkled across the whole width.\n  S.acc += st * 80 * S.amount;\n  const c = pour(T);\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    const x = Math.random() \u003c 0.55 ? c + (Math.random() + Math.random() - 1) * 9 : Math.random() * W;\n    spawn(S, cl(x, 0, W - 0.01), -2 * Math.random(), 0, 12, floor(Math.random() * NS));\n  }\n  // Glitter falls slowly, rocking from side to side on its way down.\n  const k = min(1, 1.5 * st), air = 3 * sin(T * 0.37);\n  for (let i = S.n - 1; i >= 0; i--) {\n    S.sw[i] += st * 2;\n    S.vy[i] += (S.vt[i] - S.vy[i]) * k;\n    S.vx[i] += (air + 5 * sin(S.sw[i]) - S.vx[i]) * k;\n    S.ph[i] += S.om[i] * st;\n    const oy = S.y[i];\n    let x = S.x[i] + S.vx[i] * st;\n    const y = oy + S.vy[i] * st;\n    if (x \u003c 0) (x = -x), (S.vx[i] = abs(S.vx[i]));\n    if (x >= W) (x = 2 * W - 0.01 - x), (S.vx[i] = -abs(S.vx[i]));\n    S.x[i] = x;\n    S.y[i] = y;\n    if (S.vy[i] \u003c= 0 || y \u003c 0) continue;\n    // It lands once it reaches the top of the heap in its column.\n    const cx = floor(x);\n    if (y >= H - S.h[cx] - 0.5) {\n      land(S, cx, S.sd[i]);\n      kill(S, i);\n    }\n  }\n  S.ca += st * 30;\n  while (S.ca >= 1) {\n    S.ca -= 1;\n    settle(S);\n  }\n  // A deep heap opens the floor under where the stream has been piling it;\n  // the floor closes once about half of it has run out or after twelve seconds.\n  // The slot widens with the pour so it always drains faster than it fills.\n  if (!S.drain && S.grains > HEAP) {\n    const m = round(cl(c, 12, W - 13)), w = round(4 + 2 * S.amount);\n    S.drain = 1;\n    S.dx0 = m - w;\n    S.dx1 = m + w;\n    S.dtime = 0;\n  } else if (S.drain) {\n    S.dtime += st;\n    if (S.grains \u003c LOW || S.dtime > 12) S.drain = 0;\n  }\n}\n\n// K1: the top layer of the heap leaps into the air.\nfunction burst(S) {\n  const G = S.G, h = S.h;\n  for (let x = 0; x \u003c W; x++)\n    for (let got = 0; got \u003c 6 && h[x] > 2; got++) {\n      const i = (H - h[x]) * W + x;\n      spawn(S, x + Math.random(), H - h[x] + Math.random(), (x - 32) * 0.4 + (Math.random() - 0.5) * 30, -75 - 95 * Math.random(), G[i]);\n      G[i] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.amount = cl(k[2], 1, 3);\n  S.size = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open on a heap already lying in dunes and the stream already falling.\n    for (let x = 0; x \u003c W; x++) {\n      const h = round(17 + 6 * sin(x * 0.09 + 1) + 4 * sin(x * 0.23));\n      for (let y = H - h; y \u003c H; y++) S.G[y * W + x] = floor(Math.random() * NS);\n      S.h[x] = h;\n      S.grains += h;\n    }\n    for (let i = 0; i \u003c 300; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, d * rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, base = S.base, fl = S.fl, G = S.G, lx = S.lx, ly = S.ly;\n  const hue = S.hue + 0.92;\n  for (let c = 0; c \u003c 4; c++) {\n    const p = PAL[c];\n    hsv(hue + p[0], p[1], p[2] * 255, base, c * 3);\n    hsv(hue + p[0], p[3], 255, fl, c * 3);\n  }\n  // A deep field, warmed a little round the lamp but kept under what an LED\n  // shows as lit, so every flake reads against black.\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) {\n      const g = 9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 1800);\n      buf[q] = (4 + g) * (0.4 + base[0] / 425);\n      buf[q + 1] = (3 + g) * (0.4 + base[1] / 425);\n      buf[q + 2] = (6 + g) * (0.4 + base[2] / 425);\n    }\n  // The heap: each grain its seed's colour, lit by the lamp and shaded with\n  // depth. A grain glints when its tilt sends the lamp to the eye: the tilt\n  // needed changes across the heap and the lamp moves, so the glints travel.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = H - S.h[x]; y \u003c H; y++) {\n      const i = y * W + x, g = G[i];\n      if (g \u003c 0) continue;\n      // Silver grains in the heap take the light tint: grey ones read as grit.\n      const dep = y - H + S.h[x], ex = x - lx, ey = y - ly, c = CLS[g] * 3, cb = c === 9 ? 3 : c;\n      const lamp = 0.6 + 0.5 * exp(-(ex * ex + ey * ey) / 900);\n      const v = (0.6 + 0.25 * JIT[g]) * lamp * (dep \u003c 1 ? 1.25 : max(0.6, 1 - 0.01 * dep));\n      const hx = TX[g] - ex * 0.0105, hy = TY[g] - ey * 0.0105;\n      const gl = exp(-(hx * hx + hy * hy) / 0.016) * (dep \u003c 6 ? 1 : 0.6);\n      const q = i * 3;\n      buf[q] += base[cb] * v + fl[c] * gl * 1.4;\n      buf[q + 1] += base[cb + 1] * v + fl[c + 1] * gl * 1.4;\n      buf[q + 2] += base[cb + 2] * v + fl[c + 2] * gl * 1.4;\n      if (gl > 0.35) star(buf, x + 0.5, y + 0.5, fl, c, gl * 0.8, 1 + S.size * 2);\n    }\n  // The falling flakes: a hexagon turned in the plane and thinned as it\n  // tumbles, flashing when its face swings through the angle that sends the\n  // lamp's light to the eye: once a turn, the back being matt.\n  const r0 = 0.55 + 1.05 * S.size;\n  for (let i = 0; i \u003c S.n; i++) {\n    const x = S.x[i], y = S.y[i];\n    if (y \u003c -3 || y > H + 3) continue;\n    const g = S.sd[i], c = CLS[g] * 3, a = S.ph[i];\n    const sq = max(0.22, abs(cos(a))), f = exp((cos(a - (x - lx) * 0.006 - (y - ly) * 0.003) - 1) / 0.035);\n    // A big flake is dimmer per LED, so a heavy stream of them does not burn white.\n    const r = r0 * (0.8 + 0.4 * JIT[g]), v = ((0.5 + 0.35 * JIT[g]) * (0.55 + 0.45 * sq)) / (0.7 + 0.3 * r0);\n    const ca = cos(S.al[i]), sa = sin(S.al[i]), e = r + 1.2;\n    // Small flakes keep their light when they land between LEDs.\n    const norm = r \u003c 1 ? 1.15 / (0.35 + r) : 1;\n    for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n      for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n        const px = X + 0.5 - x, py = Y + 0.5 - y;\n        const u = abs(px * ca + py * sa) / sq, w = abs(py * ca - px * sa);\n        const dh = max(w, w * 0.5 + u * 0.866) - r;\n        const cov = cl(0.5 - dh, 0, 1) * norm;\n        if (cov \u003c= 0) continue;\n        const q = (Y * W + X) * 3, b = cov * v, h = (cov * f * 1.5) / (0.6 + 0.4 * r0);\n        buf[q] += base[c] * b + fl[c] * h;\n        buf[q + 1] += base[c + 1] * b + fl[c + 1] * h;\n        buf[q + 2] += base[c + 2] * b + fl[c + 2] * h;\n      }\n    if (f > 0.3) star(buf, x, y, fl, c, f, 1.5 + r0 * 1.5);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// A flash spills its light into a four-pointed star round the flake, the arms\n// fading out over len LEDs, with a breath on the diagonals.\nfunction star(buf, x, y, fl, c, f, len) {\n  const cx = floor(x), cy = floor(y), n = Math.ceil(len);\n  for (let k = 1; k \u003c= n; k++) {\n    const w = f * 0.75 * (1 - (k - 1) / (len + 0.5)) ** 2;\n    if (w \u003c= 0.01) break;\n    add(buf, cx + k, cy, fl, c, w);\n    add(buf, cx - k, cy, fl, c, w);\n    add(buf, cx, cy + k, fl, c, w);\n    add(buf, cx, cy - k, fl, c, w);\n  }\n  const dw = f * 0.22;\n  add(buf, cx + 1, cy + 1, fl, c, dw);\n  add(buf, cx - 1, cy + 1, fl, c, dw);\n  add(buf, cx + 1, cy - 1, fl, c, dw);\n  add(buf, cx - 1, cy - 1, fl, c, dw);\n}\nfunction add(buf, x, y, fl, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const q = (y * W + x) * 3;\n  buf[q] += fl[c] * w;\n  buf[q + 1] += fl[c + 1] * w;\n  buf[q + 2] += fl[c + 2] * w;\n}\n\n// Bright pile-ups roll off toward white instead of clipping flat.\nfunction knee(v) {\n  return v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65);\n}\n","layer":{"id":"layer-glitter-fall","type":"code","name":"glitter-fall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glitter Fall\n// Family:  cosmetic\n// Idea:    Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after loose cosmetic glitter poured under a display lamp\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1\n//\n// Knob 1: Hue. The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall.\n// Knob 2: Speed. How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower.\n// Knob 3: Amount. How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast.\n// Knob 4: Size. The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble.\n// Buttons: K1 tap throws the top of the heap up into the air, and it flashes all the way back down.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, abs, sqrt, log, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Every flake carries one of NS seeds, which fix its colour class, how it lies\n// once it has landed and how bright it is. A grain in the heap keeps its seed,\n// so the heap's texture and glints stay put while the lamp moves.\nconst NS = 1024;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst TX = new Float32Array(NS), TY = new Float32Array(NS), JIT = new Float32Array(NS), CLS = new Uint8Array(NS);\nfor (let i = 0; i \u003c NS; i++) {\n  // A landed flake lies roughly flat: its tilt is a small Gaussian.\n  const r = sqrt(-2 * log(hash(i * 4) + 1e-6)) * 0.3, a = 2 * PI * hash(i * 4 + 1);\n  TX[i] = r * cos(a);\n  TY[i] = r * sin(a);\n  JIT[i] = hash(i * 4 + 2);\n  const c = hash(i * 4 + 3);\n  // Main colour, a lighter tint, a deeper shade, and silver.\n  CLS[i] = c \u003c 0.5 ? 0 : c \u003c 0.7 ? 1 : c \u003c 0.85 ? 2 : 3;\n}\n// Hue offset, saturation and value of each class, and how much of the hue a\n// flash keeps. Silver keeps a breath of the hue so it sits in the same mix.\nconst PAL = [\n  [0, 0.85, 0.8, 0.45],\n  [-0.03, 0.55, 0.95, 0.35],\n  [0.03, 1, 0.65, 0.55],\n  [0, 0.1, 0.5, 0.08],\n];\n\n// The heap's grains sit one to an LED, stacked in columns from the floor up.\n// HEAP is how many grains make the floor open, LOW how many it keeps.\nconst HEAP = 2600, LOW = 1150;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), ph: F(MAXP), om: F(MAXP), al: F(MAXP), sw: F(MAXP), vt: F(MAXP), sd: new Uint16Array(MAXP),\n    n: 0, G: new Int16Array(N).fill(-1), h: new Int16Array(W), grains: 0, T: 0, acc: 0, ca: 0, dir: 1,\n    drain: 0, dx0: 0, dx1: 0, dtime: 0, started: false,\n    buf: F(N * 3), base: F(12), fl: F(12), hue: 0, amount: 1, size: 0.06, lx: 32, ly: 80,\n  };\n}\n\n// One flake into the air at x, y.\nfunction spawn(S, x, y, vx, vy, seed) {\n  if (S.n >= MAXP) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  // Its own spin: phase and rate, so each flash is a smooth function of time.\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.6 + 3 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n  S.al[i] = Math.random() * PI;\n  S.sw[i] = Math.random() * 2 * PI;\n  S.vt[i] = 12 + 6 * Math.random();\n  S.sd[i] = seed;\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.al[i] = S.al[j];\n  S.sw[i] = S.sw[j];\n  S.vt[i] = S.vt[j];\n  S.sd[i] = S.sd[j];\n}\n\n// Where the stream comes down: a centre that wanders the width of the panel.\nconst pour = (T) => 32 + 20 * sin(T * 0.19) + 7 * sin(T * 0.47 + 1.3);\n\n// Moves the top grain of column a onto the top of column b.\nfunction slide(S, a, b) {\n  const h = S.h, G = S.G, from = (H - h[a]) * W + a;\n  h[b]++;\n  G[(H - h[b]) * W + b] = G[from];\n  G[from] = -1;\n  h[a]--;\n}\n\n// The heap settles like sand: wherever a column stands two or more grains\n// above its neighbour, grains slip from its top down onto the neighbour's, at\n// most three a step, so a wall slumps to the angle of repose within a few\n// frames and the slope can be seen running.\nfunction settle(S) {\n  const h = S.h, G = S.G;\n  S.dir = -S.dir;\n  for (let k = 0; k \u003c W - 1; k++) {\n    const x = S.dir > 0 ? k : W - 2 - k;\n    let d = h[x] - h[x + 1];\n    // Some steps hold at 45 degrees and some do not, which roughens the slopes.\n    const lim = Math.random() \u003c 0.5 ? 2 : 3;\n    if (d >= lim) for (let n = min(3, d >> 1); n > 0; n--) slide(S, x, x + 1);\n    else if (-d >= lim) for (let n = min(3, -d >> 1); n > 0; n--) slide(S, x + 1, x);\n  }\n  // An open floor lets the grains over the slot fall out of the bottom: the\n  // whole column sinks by one, so its glitter is seen running down.\n  if (S.drain)\n    for (let x = S.dx0; x \u003c= S.dx1; x++) {\n      if (h[x] \u003c= 0 || Math.random() > 0.8) continue;\n      for (let y = H - 1; y > H - h[x]; y--) G[y * W + x] = G[(y - 1) * W + x];\n      G[(H - h[x]) * W + x] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\n// Lands a falling flake on top of column cx.\nfunction land(S, cx, seed) {\n  if (S.h[cx] >= H - 1) return;\n  S.h[cx]++;\n  S.G[(H - S.h[cx]) * W + cx] = seed;\n  S.grains++;\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const T = S.T;\n  // The lamp drifts round the lower two thirds of the panel.\n  S.lx = 32 + 34 * sin(T * 0.29);\n  S.ly = 84 + 34 * sin(T * 0.21 + 0.7);\n  // Pouring: a little over half the glitter comes down in the stream, the\n  // rest is sprinkled across the whole width.\n  S.acc += st * 80 * S.amount;\n  const c = pour(T);\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    const x = Math.random() \u003c 0.55 ? c + (Math.random() + Math.random() - 1) * 9 : Math.random() * W;\n    spawn(S, cl(x, 0, W - 0.01), -2 * Math.random(), 0, 12, floor(Math.random() * NS));\n  }\n  // Glitter falls slowly, rocking from side to side on its way down.\n  const k = min(1, 1.5 * st), air = 3 * sin(T * 0.37);\n  for (let i = S.n - 1; i >= 0; i--) {\n    S.sw[i] += st * 2;\n    S.vy[i] += (S.vt[i] - S.vy[i]) * k;\n    S.vx[i] += (air + 5 * sin(S.sw[i]) - S.vx[i]) * k;\n    S.ph[i] += S.om[i] * st;\n    const oy = S.y[i];\n    let x = S.x[i] + S.vx[i] * st;\n    const y = oy + S.vy[i] * st;\n    if (x \u003c 0) (x = -x), (S.vx[i] = abs(S.vx[i]));\n    if (x >= W) (x = 2 * W - 0.01 - x), (S.vx[i] = -abs(S.vx[i]));\n    S.x[i] = x;\n    S.y[i] = y;\n    if (S.vy[i] \u003c= 0 || y \u003c 0) continue;\n    // It lands once it reaches the top of the heap in its column.\n    const cx = floor(x);\n    if (y >= H - S.h[cx] - 0.5) {\n      land(S, cx, S.sd[i]);\n      kill(S, i);\n    }\n  }\n  S.ca += st * 30;\n  while (S.ca >= 1) {\n    S.ca -= 1;\n    settle(S);\n  }\n  // A deep heap opens the floor under where the stream has been piling it;\n  // the floor closes once about half of it has run out or after twelve seconds.\n  // The slot widens with the pour so it always drains faster than it fills.\n  if (!S.drain && S.grains > HEAP) {\n    const m = round(cl(c, 12, W - 13)), w = round(4 + 2 * S.amount);\n    S.drain = 1;\n    S.dx0 = m - w;\n    S.dx1 = m + w;\n    S.dtime = 0;\n  } else if (S.drain) {\n    S.dtime += st;\n    if (S.grains \u003c LOW || S.dtime > 12) S.drain = 0;\n  }\n}\n\n// K1: the top layer of the heap leaps into the air.\nfunction burst(S) {\n  const G = S.G, h = S.h;\n  for (let x = 0; x \u003c W; x++)\n    for (let got = 0; got \u003c 6 && h[x] > 2; got++) {\n      const i = (H - h[x]) * W + x;\n      spawn(S, x + Math.random(), H - h[x] + Math.random(), (x - 32) * 0.4 + (Math.random() - 0.5) * 30, -75 - 95 * Math.random(), G[i]);\n      G[i] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.amount = cl(k[2], 1, 3);\n  S.size = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open on a heap already lying in dunes and the stream already falling.\n    for (let x = 0; x \u003c W; x++) {\n      const h = round(17 + 6 * sin(x * 0.09 + 1) + 4 * sin(x * 0.23));\n      for (let y = H - h; y \u003c H; y++) S.G[y * W + x] = floor(Math.random() * NS);\n      S.h[x] = h;\n      S.grains += h;\n    }\n    for (let i = 0; i \u003c 300; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, d * rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, base = S.base, fl = S.fl, G = S.G, lx = S.lx, ly = S.ly;\n  const hue = S.hue + 0.92;\n  for (let c = 0; c \u003c 4; c++) {\n    const p = PAL[c];\n    hsv(hue + p[0], p[1], p[2] * 255, base, c * 3);\n    hsv(hue + p[0], p[3], 255, fl, c * 3);\n  }\n  // A deep field, warmed a little round the lamp but kept under what an LED\n  // shows as lit, so every flake reads against black.\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) {\n      const g = 9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 1800);\n      buf[q] = (4 + g) * (0.4 + base[0] / 425);\n      buf[q + 1] = (3 + g) * (0.4 + base[1] / 425);\n      buf[q + 2] = (6 + g) * (0.4 + base[2] / 425);\n    }\n  // The heap: each grain its seed's colour, lit by the lamp and shaded with\n  // depth. A grain glints when its tilt sends the lamp to the eye: the tilt\n  // needed changes across the heap and the lamp moves, so the glints travel.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = H - S.h[x]; y \u003c H; y++) {\n      const i = y * W + x, g = G[i];\n      if (g \u003c 0) continue;\n      // Silver grains in the heap take the light tint: grey ones read as grit.\n      const dep = y - H + S.h[x], ex = x - lx, ey = y - ly, c = CLS[g] * 3, cb = c === 9 ? 3 : c;\n      const lamp = 0.6 + 0.5 * exp(-(ex * ex + ey * ey) / 900);\n      const v = (0.6 + 0.25 * JIT[g]) * lamp * (dep \u003c 1 ? 1.25 : max(0.6, 1 - 0.01 * dep));\n      const hx = TX[g] - ex * 0.0105, hy = TY[g] - ey * 0.0105;\n      const gl = exp(-(hx * hx + hy * hy) / 0.016) * (dep \u003c 6 ? 1 : 0.6);\n      const q = i * 3;\n      buf[q] += base[cb] * v + fl[c] * gl * 1.4;\n      buf[q + 1] += base[cb + 1] * v + fl[c + 1] * gl * 1.4;\n      buf[q + 2] += base[cb + 2] * v + fl[c + 2] * gl * 1.4;\n      if (gl > 0.35) star(buf, x + 0.5, y + 0.5, fl, c, gl * 0.8, 1 + S.size * 2);\n    }\n  // The falling flakes: a hexagon turned in the plane and thinned as it\n  // tumbles, flashing when its face swings through the angle that sends the\n  // lamp's light to the eye: once a turn, the back being matt.\n  const r0 = 0.55 + 1.05 * S.size;\n  for (let i = 0; i \u003c S.n; i++) {\n    const x = S.x[i], y = S.y[i];\n    if (y \u003c -3 || y > H + 3) continue;\n    const g = S.sd[i], c = CLS[g] * 3, a = S.ph[i];\n    const sq = max(0.22, abs(cos(a))), f = exp((cos(a - (x - lx) * 0.006 - (y - ly) * 0.003) - 1) / 0.035);\n    // A big flake is dimmer per LED, so a heavy stream of them does not burn white.\n    const r = r0 * (0.8 + 0.4 * JIT[g]), v = ((0.5 + 0.35 * JIT[g]) * (0.55 + 0.45 * sq)) / (0.7 + 0.3 * r0);\n    const ca = cos(S.al[i]), sa = sin(S.al[i]), e = r + 1.2;\n    // Small flakes keep their light when they land between LEDs.\n    const norm = r \u003c 1 ? 1.15 / (0.35 + r) : 1;\n    for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n      for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n        const px = X + 0.5 - x, py = Y + 0.5 - y;\n        const u = abs(px * ca + py * sa) / sq, w = abs(py * ca - px * sa);\n        const dh = max(w, w * 0.5 + u * 0.866) - r;\n        const cov = cl(0.5 - dh, 0, 1) * norm;\n        if (cov \u003c= 0) continue;\n        const q = (Y * W + X) * 3, b = cov * v, h = (cov * f * 1.5) / (0.6 + 0.4 * r0);\n        buf[q] += base[c] * b + fl[c] * h;\n        buf[q + 1] += base[c + 1] * b + fl[c + 1] * h;\n        buf[q + 2] += base[c + 2] * b + fl[c + 2] * h;\n      }\n    if (f > 0.3) star(buf, x, y, fl, c, f, 1.5 + r0 * 1.5);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// A flash spills its light into a four-pointed star round the flake, the arms\n// fading out over len LEDs, with a breath on the diagonals.\nfunction star(buf, x, y, fl, c, f, len) {\n  const cx = floor(x), cy = floor(y), n = Math.ceil(len);\n  for (let k = 1; k \u003c= n; k++) {\n    const w = f * 0.75 * (1 - (k - 1) / (len + 0.5)) ** 2;\n    if (w \u003c= 0.01) break;\n    add(buf, cx + k, cy, fl, c, w);\n    add(buf, cx - k, cy, fl, c, w);\n    add(buf, cx, cy + k, fl, c, w);\n    add(buf, cx, cy - k, fl, c, w);\n  }\n  const dw = f * 0.22;\n  add(buf, cx + 1, cy + 1, fl, c, dw);\n  add(buf, cx - 1, cy + 1, fl, c, dw);\n  add(buf, cx + 1, cy - 1, fl, c, dw);\n  add(buf, cx - 1, cy - 1, fl, c, dw);\n}\nfunction add(buf, x, y, fl, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const q = (y * W + x) * 3;\n  buf[q] += fl[c] * w;\n  buf[q + 1] += fl[c + 1] * w;\n  buf[q + 2] += fl[c + 2] * w;\n}\n\n// Bright pile-ups roll off toward white instead of clipping flat.\nfunction knee(v) {\n  return v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower."},{"name":"Amount","min":1,"max":3,"about":"How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast."},{"name":"Size","min":0,"max":1,"about":"The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble."}],"start":[0,2,1,0.06],"measures":{"motion":1.3817,"detail":0.0894,"edges":0.4622,"complexity":1.3664,"coverage":0.3835,"colour":0.1675,"drift":0.0908},"knobResponse":[0.0974,0.131,0.1719,0.0961]},{"slug":"glyph-rain","title":"Glyph Rain","family":"type","round":1,"note":"3×5 글자가 줄마다 떨어지며 바뀌어요. 비가 지나간 글자는 옛 단말기의 초록 형광처럼 몇 초 남아 흐려져서, 아무 말도 하지 않는 글이 화면을 채워요.","idea":"Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.","buttons":"K4 tap switches between small glyphs and double-size ones.","code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-glyph-rain","type":"code","name":"glyph-rain","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rain around the colour wheel from phosphor green; the heads stay close to white."},{"name":"Fall","min":0.3,"max":6,"about":"How fast the columns fall, each at its own pace around this one."},{"name":"Density","min":0,"max":1,"about":"How many columns run and how long their tails hang, up to a full wall of text."},{"name":"Mutate","min":0,"max":1,"about":"How often a glyph already written turns into another; turned all the way, the whole wall boils."}],"start":[0,2,0,0.06],"measures":{"motion":0.2257,"detail":0.0998,"edges":0.7469,"complexity":0.2343,"coverage":0.2152,"colour":0.1998,"drift":0.0956},"knobResponse":[0.0655,0.0718,0.1045,0.0664]},{"slug":"gold-leaf","title":"Gold Leaf","family":"cosmetic","round":33,"note":"맑은 세럼에 구겨진 금박 조각 마흔 개가 떠서 위아래 두 대류 칸을 따라 천천히 돌 뿐 가라앉지 않아요. 조각이 뒤집힐 때마다 빛을 향한 면이 흰 금빛으로 번쩍이고 돌아선 면은 짙은 금으로 내려가며, 먼 조각은 작고 흐려요. K1 은 색상환을 다 돌아 금박을 장밋빛 금이나 푸른 박으로 바꾸고, 누르면 세럼을 저어 조각이 느린 소용돌이로 돌며 다섯 배 빨리 뒤집혀요.","idea":"Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.","buttons":"K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.","code":"// ===== Patternflow pattern =====\n// Title:   Gold Leaf\n// Family:  cosmetic\n// Idea:    Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a serum with flakes of gold leaf floating in it\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1\n//\n// Knob 1: Hue. Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown.\n// Knob 2: Speed. How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Flakes. How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil.\n// Knob 4: Size. How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one.\n// Buttons: K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXF = 120, SS = 3;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// The light: from the upper left and in front. Y runs down the panel, the\n// viewer looks along -z.\nconst LX = -0.4, LY = -0.7, LZ = 0.6, LN = sqrt(LX * LX + LY * LY + LZ * LZ);\nconst L = [LX / LN, LY / LN, LZ / LN];\nconst HV = [L[0], L[1], L[2] + 1], HN = sqrt(HV[0] ** 2 + HV[1] ** 2 + HV[2] ** 2);\nconst HH = [HV[0] / HN, HV[1] / HN, HV[2] / HN];\n\n// A torn flake: 6 to 9 points round a ragged outline, each pushed up or down\n// a little, fanned from an off-centre middle point into facets. The heights\n// are the crumple: every facet tilts its own way.\nfunction makeFlake() {\n  const rnd = Math.random, k = 6 + floor(rnd() * 4), e = 0.6 + 0.4 * rnd(), ea = rnd() * PI;\n  const v = [(rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3];\n  for (let i = 0; i \u003c k; i++) {\n    const a = (2 * PI * (i + 0.7 * (rnd() - 0.5))) / k, r = 0.55 + 0.45 * rnd();\n    const x = r * cos(a), y = r * sin(a) * e;\n    v.push(x * cos(ea) - y * sin(ea), x * sin(ea) + y * cos(ea), (rnd() - 0.5) * 0.8);\n  }\n  const nrm = [];\n  for (let i = 0; i \u003c k; i++) {\n    const a = 1 + i, b = 1 + ((i + 1) % k);\n    const ux = v[a * 3] - v[0], uy = v[a * 3 + 1] - v[1], uz = v[a * 3 + 2] - v[2];\n    const wx = v[b * 3] - v[0], wy = v[b * 3 + 1] - v[1], wz = v[b * 3 + 2] - v[2];\n    let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n    const l = sqrt(nx * nx + ny * ny + nz * nz) || 1;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    nrm.push(nx / l, ny / l, nz / l);\n  }\n  const ax = rnd() - 0.5, ay = rnd() - 0.5, az = rnd() - 0.5, al = sqrt(ax * ax + ay * ay + az * az) || 1;\n  const q0 = [rnd() - 0.5, rnd() - 0.5, rnd() - 0.5, rnd() - 0.5], ql = sqrt(q0.reduce((s, c) => s + c * c, 0)) || 1;\n  return {\n    k, v: new Float32Array(v), n: new Float32Array(nrm),\n    x: 3 + rnd() * (W - 6), y: 3 + rnd() * (H - 6), z: rnd(), sz: 0.75 + 0.5 * rnd(),\n    q: q0.map((c) => c / ql), axis: [ax / al, ay / al, az / al], spin: (0.5 + rnd()) * (rnd() \u003c 0.5 ? -1 : 1), ph: rnd() * 2 * PI,\n  };\n}\n\nexport function setup(params) {\n  const flakes = [];\n  for (let i = 0; i \u003c MAXF; i++) flakes.push(makeFlake());\n  params.s = {\n    flakes, t: 0, stir: 0, stirT: -1, hue: 0, count: 40, size: 0.06,\n    far: new Float32Array(N * 4), tmp: new Float32Array(N * 4), frame: new Float32Array(N * 3),\n    sub: new Int16Array(64 * 64 * SS * SS), lut: new Float32Array(256 * 3), lutHue: NaN, serum: [],\n  };\n}\n\n// The current: two slow convection cells stacked in the panel, from the\n// stream function sin(pi x/W) sin(2 pi y/H), which is zero on all four walls,\n// so the flakes go round and never leave. A weaker mode of smaller cells\n// swells and fades over a minute, so no flake runs the same loop twice.\n// Nothing pulls them down: the flakes float, they never settle.\nfunction flow(x, y, t, out) {\n  const X = (PI * x) / W, Y = (2 * PI * y) / H, s = 0.35 * sin(t * 0.11);\n  out[0] = sin(X) * cos(Y) + s * sin(2 * X) * 1.5 * cos(1.5 * Y) * 0.5;\n  out[1] = -cos(X) * sin(Y) - s * 2 * cos(2 * X) * sin(1.5 * Y) * 0.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 40, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.hue = k[0];\n  P.count = floor(cl(k[2], 40, 120));\n  P.size = cl(k[3], 0, 1);\n  P.t += d;\n  if (input.btnPressed && input.btnPressed[0]) P.stirT = 0;\n  // The stir: a second to wind up, then it dies away over about eight.\n  if (P.stirT >= 0) {\n    P.stirT += d;\n    P.stir = P.stirT \u003c 1 ? sm(0, 1, P.stirT) : exp(-(P.stirT - 1) / 3.5);\n    if (P.stirT > 20) (P.stirT = -1), (P.stir = 0);\n  }\n  const v = [0, 0], S = P.stir;\n  for (let i = 0; i \u003c MAXF; i++) {\n    const f = P.flakes[i];\n    flow(f.x, f.y, P.t, v);\n    // Near flakes move faster across the panel than far ones.\n    const par = 0.6 + 0.6 * f.z, sp = 2.6 * par;\n    let vx = v[0] * sp + 0.4 * sin(P.t * 0.5 + f.ph), vy = v[1] * sp + 0.4 * cos(P.t * 0.37 + f.ph * 1.3);\n    if (S > 0) {\n      // The vortex runs round ellipses the shape of the panel, fastest\n      // half way out, so the flakes swing round without piling on a wall.\n      const ex = (f.x - W / 2) / (W / 2), ey = (f.y - H / 2) / (H / 2), r = sqrt(ex * ex + ey * ey);\n      const g = S * 1.6 * cl(1.15 - r, 0, 1) * par;\n      vx += g * -0.5 * (f.y - H / 2);\n      vy += g * 2 * (f.x - W / 2);\n    }\n    f.x = cl(f.x + vx * d, 1, W - 2);\n    f.y = cl(f.y + vy * d, 1, H - 2);\n    // Tumble: turn about the flake's own axis, which wanders slowly.\n    const ang = f.spin * (1 + 4 * S) * d, a = f.axis;\n    a[0] += 0.3 * sin(P.t * 0.23 + f.ph) * d;\n    a[1] += 0.3 * cos(P.t * 0.19 + f.ph * 2) * d;\n    const al = sqrt(a[0] * a[0] + a[1] * a[1] + a[2] * a[2]);\n    a[0] /= al;\n    a[1] /= al;\n    a[2] /= al;\n    const sh = sin(ang / 2), ch = cos(ang / 2), dq = [ch, a[0] * sh, a[1] * sh, a[2] * sh], q = f.q;\n    const n0 = dq[0] * q[0] - dq[1] * q[1] - dq[2] * q[2] - dq[3] * q[3];\n    const n1 = dq[0] * q[1] + dq[1] * q[0] + dq[2] * q[3] - dq[3] * q[2];\n    const n2 = dq[0] * q[2] - dq[1] * q[3] + dq[2] * q[0] + dq[3] * q[1];\n    const n3 = dq[0] * q[3] + dq[1] * q[2] - dq[2] * q[1] + dq[3] * q[0];\n    const ql = sqrt(n0 * n0 + n1 * n1 + n2 * n2 + n3 * n3);\n    q[0] = n0 / ql;\n    q[1] = n1 / ql;\n    q[2] = n2 / ql;\n    q[3] = n3 / ql;\n  }\n}\n\n// The foil's colour against its light, 0 to 1.3 over 256 steps: deep, gold,\n// pale gold, white-gold.\nfunction buildLut(P) {\n  const h = P.hue + 0.115 - floor(P.hue + 0.115);\n  // Round orange and yellow the deep end stays bright and saturated so it\n  // reads as dark gold, not brown; round red and pink the foil is paler, rose\n  // gold rather than red.\n  const warm = sm(0.0, 0.05, h) * (1 - sm(0.17, 0.24, h)), rose = 1 - sm(0.02, 0.07, abs(h - 0.995 + (h \u003c 0.5 ? 1 : 0)));\n  const sat = 1 - 0.4 * rose, lift = max(warm, rose);\n  const stops = [\n    [0, hsv(h - 0.025, 0.95 * sat, 0.4 + 0.18 * lift)],\n    [0.35, hsv(h - 0.01, 0.88 * sat, 0.72 + 0.12 * lift)],\n    [0.7, hsv(h + 0.005, 0.68 * sat, 1)],\n    [1.0, hsv(h + 0.01, 0.34 * sat, 1)],\n    [1.3, hsv(h + 0.01, 0.06, 1)],\n  ];\n  for (let i = 0; i \u003c 256; i++) {\n    const b = (i / 255) * 1.3;\n    let j = 0;\n    while (j \u003c stops.length - 2 && b > stops[j + 1][0]) j++;\n    const [b0, c0] = stops[j], [b1, c1] = stops[j + 1], f = cl((b - b0) / (b1 - b0), 0, 1);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = (c0[c] + (c1[c] - c0[c]) * f) * 255;\n  }\n  // The serum: the foil's hue, faint and greyed, lighter at the top.\n  const top = hsv(h - 0.02, (0.5 - 0.2 * warm) * sat, 0.11), bot = hsv(h - 0.02, (0.6 - 0.2 * warm) * sat, 0.025);\n  const lit = hsv(h + 0.01, 0.3 * sat, 1);\n  P.serum = [top[0] * 255, top[1] * 255, top[2] * 255, bot[0] * 255, bot[1] * 255, bot[2] * 255, lit[0] * 255, lit[1] * 255, lit[2] * 255];\n  P.lutHue = P.hue;\n}\n\nconst rot = new Float32Array(9);\nfunction quatMat(q) {\n  const [w, x, y, z] = q;\n  rot[0] = 1 - 2 * (y * y + z * z); rot[1] = 2 * (x * y - w * z); rot[2] = 2 * (x * z + w * y);\n  rot[3] = 2 * (x * y + w * z); rot[4] = 1 - 2 * (x * x + z * z); rot[5] = 2 * (y * z - w * x);\n  rot[6] = 2 * (x * z - w * y); rot[7] = 2 * (y * z + w * x); rot[8] = 1 - 2 * (x * x + y * y);\n}\n\nconst PX = new Float32Array(10 * 3), FC = new Float32Array(9 * 4), ORD = [];\n\n// One flake into buffer buf (RGB, or RGBA premultiplied when far), over what\n// is there. Each LED takes 3 x 3 samples, 2 x 2 on a big flake; a facet\n// nearer the viewer covers the ones behind it, and the share of samples a\n// flake covers is how much of the LED it takes.\nfunction drawFlake(P, f, buf, rgba, dim, glints) {\n  quatMat(f.q);\n  const s = (6.5 + 6 * P.size) * f.sz * (0.5 + 0.7 * f.z), k = f.k, v = f.v, n = f.n, lut = P.lut;\n  let x0 = W, x1 = 0, y0 = H, y1 = 0;\n  for (let i = 0; i \u003c= k; i++) {\n    const a = v[i * 3], b = v[i * 3 + 1], c = v[i * 3 + 2];\n    const X = f.x + s * (rot[0] * a + rot[1] * b + rot[2] * c), Y = f.y + s * (rot[3] * a + rot[4] * b + rot[5] * c);\n    PX[i * 3] = X;\n    PX[i * 3 + 1] = Y;\n    PX[i * 3 + 2] = rot[6] * a + rot[7] * b + rot[8] * c;\n    x0 = min(x0, X);\n    x1 = max(x1, X);\n    y0 = min(y0, Y);\n    y1 = max(y1, Y);\n  }\n  // Big flakes need fewer samples to an LED for the same smooth edge.\n  const ss = s > 7 ? 2 : SS;\n  const bx = max(0, floor(x0)), by = max(0, floor(y0)), bw = min(W, floor(x1) + 1) - bx, bh = min(H, floor(y1) + 1) - by;\n  if (bw \u003c= 0 || bh \u003c= 0 || bw > 64 || bh > 64) return;\n  const sw = bw * ss, sub = P.sub;\n  sub.fill(-1, 0, sw * bh * ss);\n  ORD.length = 0;\n  for (let i = 0; i \u003c k; i++) {\n    // The facet's normal turned with the flake, towards the viewer: foil\n    // shines from both faces.\n    const a = n[i * 3], b = n[i * 3 + 1], c = n[i * 3 + 2];\n    let nx = rot[0] * a + rot[1] * b + rot[2] * c, ny = rot[3] * a + rot[4] * b + rot[5] * c, nz = rot[6] * a + rot[7] * b + rot[8] * c;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    const spec = max(0, nx * HH[0] + ny * HH[1] + nz * HH[2]) ** 18, diff = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n    // A little base light, the lamp's diffuse share, the glow of the serum\n    // above for facets tipped up, and a narrow highlight, cos^18, half\n    // strength 16 degrees off the mirror angle: a facet flashes as it\n    // sweeps through and its neighbours, tilted their own ways, stay deep.\n    const env = 0.5 - 0.5 * ny;\n    const br = (0.1 + 0.45 * diff + 0.25 * env + 0.95 * spec) * dim;\n    FC[i * 4] = cl(floor((br / 1.3) * 255), 0, 255);\n    FC[i * 4 + 1] = spec;\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    FC[i * 4 + 2] = (PX[2] + PX[j1 * 3 + 2] + PX[j2 * 3 + 2]) / 3;\n    ORD.push(i);\n  }\n  ORD.sort((a, b) => FC[a * 4 + 2] - FC[b * 4 + 2]);\n  for (const i of ORD) {\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    const ax = PX[0], ay = PX[1], bxx = PX[j1 * 3], byy = PX[j1 * 3 + 1], cx = PX[j2 * 3], cy = PX[j2 * 3 + 1];\n    const area = (bxx - ax) * (cy - ay) - (byy - ay) * (cx - ax);\n    if (abs(area) \u003c 1e-4) continue;\n    const sg = area > 0 ? 1 : -1;\n    const sx0 = max(0, floor((min(ax, bxx, cx) - bx) * ss)), sx1 = min(sw - 1, floor((max(ax, bxx, cx) - bx) * ss));\n    const sy0 = max(0, floor((min(ay, byy, cy) - by) * ss)), sy1 = min(bh * ss - 1, floor((max(ay, byy, cy) - by) * ss));\n    for (let sy = sy0; sy \u003c= sy1; sy++) {\n      const py = by + (sy + 0.5) / ss;\n      for (let sx = sx0; sx \u003c= sx1; sx++) {\n        const px = bx + (sx + 0.5) / ss;\n        const e0 = ((bxx - ax) * (py - ay) - (byy - ay) * (px - ax)) * sg;\n        const e1 = ((cx - bxx) * (py - byy) - (cy - byy) * (px - bxx)) * sg;\n        const e2 = ((ax - cx) * (py - cy) - (ay - cy) * (px - cx)) * sg;\n        if (e0 >= 0 && e1 >= 0 && e2 >= 0) sub[sy * sw + sx] = i;\n      }\n    }\n    if (glints && FC[i * 4 + 1] > 0.6) glints.push((ax + bxx + cx) / 3, (ay + byy + cy) / 3, FC[i * 4 + 1]);\n  }\n  for (let y = 0; y \u003c bh; y++)\n    for (let x = 0; x \u003c bw; x++) {\n      let r = 0, g = 0, b = 0, c = 0;\n      for (let u = 0; u \u003c ss; u++)\n        for (let w = 0; w \u003c ss; w++) {\n          const i = sub[(y * ss + u) * sw + x * ss + w];\n          if (i \u003c 0) continue;\n          const li = FC[i * 4] * 3;\n          r += lut[li];\n          g += lut[li + 1];\n          b += lut[li + 2];\n          c++;\n        }\n      if (!c) continue;\n      const al = c / (ss * ss), p = (by + y) * W + bx + x;\n      if (rgba) {\n        const o = p * 4;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n        buf[o + 3] = buf[o + 3] * (1 - al) + al;\n      } else {\n        const o = p * 3;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const fr = P.frame, far = P.far, tmp = P.tmp, t = P.t, sv = P.serum;\n  // The serum: a soft gradient and a slow caustic shimmer that fades with\n  // depth, light let in from the top.\n  const colw = P.colw || (P.colw = new Float32Array(W));\n  for (let x = 0; x \u003c W; x++) colw[x] = 1.5 * sin(x * 0.17 - t * 0.31);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / (H - 1), dep = exp(-y / 70), roww = 1.7 * sin(y * 0.11 + t * 0.4) + t * 0.23;\n    for (let x = 0; x \u003c W; x++) {\n      const a = sin(x * 0.19 + roww), b = sin(y * 0.13 + colw[x] - t * 0.17);\n      const c = a + b, caus = exp(-c * c * 6) * 0.9 * dep, o = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) fr[o + ch] = sv[ch] * (1 - g) + sv[3 + ch] * g + caus * 0.07 * sv[6 + ch];\n    }\n  }\n  const fl = P.flakes.slice(0, P.count).sort((a, b) => a.z - b.z);\n  far.fill(0);\n  let i = 0;\n  // Far flakes, dimmer, into their own layer, softened by a 1-2-1 blur.\n  for (; i \u003c fl.length && fl[i].z \u003c 0.35; i++) drawFlake(P, fl[i], far, true, 0.6 + 0.6 * fl[i].z, null);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) tmp[o + c] = (far[l + c] + 2 * far[o + c] + far[r + c]) / 4;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, u = y > 0 ? o - W * 4 : o, dn = y \u003c H - 1 ? o + W * 4 : o, f3 = (y * W + x) * 3;\n      const a = (tmp[u + 3] + 2 * tmp[o + 3] + tmp[dn + 3]) / 4;\n      for (let c = 0; c \u003c 3; c++) fr[f3 + c] = fr[f3 + c] * (1 - a) + (tmp[u + c] + 2 * tmp[o + c] + tmp[dn + c]) / 4;\n    }\n  // Near flakes, sharp, over the top; their brightest facets throw a glint.\n  const glints = [];\n  for (; i \u003c fl.length; i++) drawFlake(P, fl[i], fr, false, 1, fl[i].z > 0.6 ? glints : null);\n  for (let g = 0; g \u003c glints.length; g += 3) {\n    const gx = floor(glints[g]), gy = floor(glints[g + 1]), s = (glints[g + 2] - 0.6) / 0.4;\n    for (let r = -2; r \u003c= 2; r++) {\n      const a = s * (r === 0 ? 1 : abs(r) === 1 ? 0.55 : 0.22);\n      for (const [x, y] of r === 0 ? [[gx, gy]] : [[gx + r, gy], [gx, gy + r]]) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const o = (y * W + x) * 3;\n        fr[o] += 255 * a;\n        fr[o + 1] += 250 * a;\n        fr[o + 2] += 225 * a;\n      }\n    }\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, fr[o]), min(255, fr[o + 1]), min(255, fr[o + 2]));\n}\n","layer":{"id":"layer-gold-leaf","type":"code","name":"gold-leaf","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gold Leaf\n// Family:  cosmetic\n// Idea:    Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a serum with flakes of gold leaf floating in it\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1\n//\n// Knob 1: Hue. Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown.\n// Knob 2: Speed. How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Flakes. How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil.\n// Knob 4: Size. How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one.\n// Buttons: K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXF = 120, SS = 3;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// The light: from the upper left and in front. Y runs down the panel, the\n// viewer looks along -z.\nconst LX = -0.4, LY = -0.7, LZ = 0.6, LN = sqrt(LX * LX + LY * LY + LZ * LZ);\nconst L = [LX / LN, LY / LN, LZ / LN];\nconst HV = [L[0], L[1], L[2] + 1], HN = sqrt(HV[0] ** 2 + HV[1] ** 2 + HV[2] ** 2);\nconst HH = [HV[0] / HN, HV[1] / HN, HV[2] / HN];\n\n// A torn flake: 6 to 9 points round a ragged outline, each pushed up or down\n// a little, fanned from an off-centre middle point into facets. The heights\n// are the crumple: every facet tilts its own way.\nfunction makeFlake() {\n  const rnd = Math.random, k = 6 + floor(rnd() * 4), e = 0.6 + 0.4 * rnd(), ea = rnd() * PI;\n  const v = [(rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3];\n  for (let i = 0; i \u003c k; i++) {\n    const a = (2 * PI * (i + 0.7 * (rnd() - 0.5))) / k, r = 0.55 + 0.45 * rnd();\n    const x = r * cos(a), y = r * sin(a) * e;\n    v.push(x * cos(ea) - y * sin(ea), x * sin(ea) + y * cos(ea), (rnd() - 0.5) * 0.8);\n  }\n  const nrm = [];\n  for (let i = 0; i \u003c k; i++) {\n    const a = 1 + i, b = 1 + ((i + 1) % k);\n    const ux = v[a * 3] - v[0], uy = v[a * 3 + 1] - v[1], uz = v[a * 3 + 2] - v[2];\n    const wx = v[b * 3] - v[0], wy = v[b * 3 + 1] - v[1], wz = v[b * 3 + 2] - v[2];\n    let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n    const l = sqrt(nx * nx + ny * ny + nz * nz) || 1;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    nrm.push(nx / l, ny / l, nz / l);\n  }\n  const ax = rnd() - 0.5, ay = rnd() - 0.5, az = rnd() - 0.5, al = sqrt(ax * ax + ay * ay + az * az) || 1;\n  const q0 = [rnd() - 0.5, rnd() - 0.5, rnd() - 0.5, rnd() - 0.5], ql = sqrt(q0.reduce((s, c) => s + c * c, 0)) || 1;\n  return {\n    k, v: new Float32Array(v), n: new Float32Array(nrm),\n    x: 3 + rnd() * (W - 6), y: 3 + rnd() * (H - 6), z: rnd(), sz: 0.75 + 0.5 * rnd(),\n    q: q0.map((c) => c / ql), axis: [ax / al, ay / al, az / al], spin: (0.5 + rnd()) * (rnd() \u003c 0.5 ? -1 : 1), ph: rnd() * 2 * PI,\n  };\n}\n\nexport function setup(params) {\n  const flakes = [];\n  for (let i = 0; i \u003c MAXF; i++) flakes.push(makeFlake());\n  params.s = {\n    flakes, t: 0, stir: 0, stirT: -1, hue: 0, count: 40, size: 0.06,\n    far: new Float32Array(N * 4), tmp: new Float32Array(N * 4), frame: new Float32Array(N * 3),\n    sub: new Int16Array(64 * 64 * SS * SS), lut: new Float32Array(256 * 3), lutHue: NaN, serum: [],\n  };\n}\n\n// The current: two slow convection cells stacked in the panel, from the\n// stream function sin(pi x/W) sin(2 pi y/H), which is zero on all four walls,\n// so the flakes go round and never leave. A weaker mode of smaller cells\n// swells and fades over a minute, so no flake runs the same loop twice.\n// Nothing pulls them down: the flakes float, they never settle.\nfunction flow(x, y, t, out) {\n  const X = (PI * x) / W, Y = (2 * PI * y) / H, s = 0.35 * sin(t * 0.11);\n  out[0] = sin(X) * cos(Y) + s * sin(2 * X) * 1.5 * cos(1.5 * Y) * 0.5;\n  out[1] = -cos(X) * sin(Y) - s * 2 * cos(2 * X) * sin(1.5 * Y) * 0.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 40, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.hue = k[0];\n  P.count = floor(cl(k[2], 40, 120));\n  P.size = cl(k[3], 0, 1);\n  P.t += d;\n  if (input.btnPressed && input.btnPressed[0]) P.stirT = 0;\n  // The stir: a second to wind up, then it dies away over about eight.\n  if (P.stirT >= 0) {\n    P.stirT += d;\n    P.stir = P.stirT \u003c 1 ? sm(0, 1, P.stirT) : exp(-(P.stirT - 1) / 3.5);\n    if (P.stirT > 20) (P.stirT = -1), (P.stir = 0);\n  }\n  const v = [0, 0], S = P.stir;\n  for (let i = 0; i \u003c MAXF; i++) {\n    const f = P.flakes[i];\n    flow(f.x, f.y, P.t, v);\n    // Near flakes move faster across the panel than far ones.\n    const par = 0.6 + 0.6 * f.z, sp = 2.6 * par;\n    let vx = v[0] * sp + 0.4 * sin(P.t * 0.5 + f.ph), vy = v[1] * sp + 0.4 * cos(P.t * 0.37 + f.ph * 1.3);\n    if (S > 0) {\n      // The vortex runs round ellipses the shape of the panel, fastest\n      // half way out, so the flakes swing round without piling on a wall.\n      const ex = (f.x - W / 2) / (W / 2), ey = (f.y - H / 2) / (H / 2), r = sqrt(ex * ex + ey * ey);\n      const g = S * 1.6 * cl(1.15 - r, 0, 1) * par;\n      vx += g * -0.5 * (f.y - H / 2);\n      vy += g * 2 * (f.x - W / 2);\n    }\n    f.x = cl(f.x + vx * d, 1, W - 2);\n    f.y = cl(f.y + vy * d, 1, H - 2);\n    // Tumble: turn about the flake's own axis, which wanders slowly.\n    const ang = f.spin * (1 + 4 * S) * d, a = f.axis;\n    a[0] += 0.3 * sin(P.t * 0.23 + f.ph) * d;\n    a[1] += 0.3 * cos(P.t * 0.19 + f.ph * 2) * d;\n    const al = sqrt(a[0] * a[0] + a[1] * a[1] + a[2] * a[2]);\n    a[0] /= al;\n    a[1] /= al;\n    a[2] /= al;\n    const sh = sin(ang / 2), ch = cos(ang / 2), dq = [ch, a[0] * sh, a[1] * sh, a[2] * sh], q = f.q;\n    const n0 = dq[0] * q[0] - dq[1] * q[1] - dq[2] * q[2] - dq[3] * q[3];\n    const n1 = dq[0] * q[1] + dq[1] * q[0] + dq[2] * q[3] - dq[3] * q[2];\n    const n2 = dq[0] * q[2] - dq[1] * q[3] + dq[2] * q[0] + dq[3] * q[1];\n    const n3 = dq[0] * q[3] + dq[1] * q[2] - dq[2] * q[1] + dq[3] * q[0];\n    const ql = sqrt(n0 * n0 + n1 * n1 + n2 * n2 + n3 * n3);\n    q[0] = n0 / ql;\n    q[1] = n1 / ql;\n    q[2] = n2 / ql;\n    q[3] = n3 / ql;\n  }\n}\n\n// The foil's colour against its light, 0 to 1.3 over 256 steps: deep, gold,\n// pale gold, white-gold.\nfunction buildLut(P) {\n  const h = P.hue + 0.115 - floor(P.hue + 0.115);\n  // Round orange and yellow the deep end stays bright and saturated so it\n  // reads as dark gold, not brown; round red and pink the foil is paler, rose\n  // gold rather than red.\n  const warm = sm(0.0, 0.05, h) * (1 - sm(0.17, 0.24, h)), rose = 1 - sm(0.02, 0.07, abs(h - 0.995 + (h \u003c 0.5 ? 1 : 0)));\n  const sat = 1 - 0.4 * rose, lift = max(warm, rose);\n  const stops = [\n    [0, hsv(h - 0.025, 0.95 * sat, 0.4 + 0.18 * lift)],\n    [0.35, hsv(h - 0.01, 0.88 * sat, 0.72 + 0.12 * lift)],\n    [0.7, hsv(h + 0.005, 0.68 * sat, 1)],\n    [1.0, hsv(h + 0.01, 0.34 * sat, 1)],\n    [1.3, hsv(h + 0.01, 0.06, 1)],\n  ];\n  for (let i = 0; i \u003c 256; i++) {\n    const b = (i / 255) * 1.3;\n    let j = 0;\n    while (j \u003c stops.length - 2 && b > stops[j + 1][0]) j++;\n    const [b0, c0] = stops[j], [b1, c1] = stops[j + 1], f = cl((b - b0) / (b1 - b0), 0, 1);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = (c0[c] + (c1[c] - c0[c]) * f) * 255;\n  }\n  // The serum: the foil's hue, faint and greyed, lighter at the top.\n  const top = hsv(h - 0.02, (0.5 - 0.2 * warm) * sat, 0.11), bot = hsv(h - 0.02, (0.6 - 0.2 * warm) * sat, 0.025);\n  const lit = hsv(h + 0.01, 0.3 * sat, 1);\n  P.serum = [top[0] * 255, top[1] * 255, top[2] * 255, bot[0] * 255, bot[1] * 255, bot[2] * 255, lit[0] * 255, lit[1] * 255, lit[2] * 255];\n  P.lutHue = P.hue;\n}\n\nconst rot = new Float32Array(9);\nfunction quatMat(q) {\n  const [w, x, y, z] = q;\n  rot[0] = 1 - 2 * (y * y + z * z); rot[1] = 2 * (x * y - w * z); rot[2] = 2 * (x * z + w * y);\n  rot[3] = 2 * (x * y + w * z); rot[4] = 1 - 2 * (x * x + z * z); rot[5] = 2 * (y * z - w * x);\n  rot[6] = 2 * (x * z - w * y); rot[7] = 2 * (y * z + w * x); rot[8] = 1 - 2 * (x * x + y * y);\n}\n\nconst PX = new Float32Array(10 * 3), FC = new Float32Array(9 * 4), ORD = [];\n\n// One flake into buffer buf (RGB, or RGBA premultiplied when far), over what\n// is there. Each LED takes 3 x 3 samples, 2 x 2 on a big flake; a facet\n// nearer the viewer covers the ones behind it, and the share of samples a\n// flake covers is how much of the LED it takes.\nfunction drawFlake(P, f, buf, rgba, dim, glints) {\n  quatMat(f.q);\n  const s = (6.5 + 6 * P.size) * f.sz * (0.5 + 0.7 * f.z), k = f.k, v = f.v, n = f.n, lut = P.lut;\n  let x0 = W, x1 = 0, y0 = H, y1 = 0;\n  for (let i = 0; i \u003c= k; i++) {\n    const a = v[i * 3], b = v[i * 3 + 1], c = v[i * 3 + 2];\n    const X = f.x + s * (rot[0] * a + rot[1] * b + rot[2] * c), Y = f.y + s * (rot[3] * a + rot[4] * b + rot[5] * c);\n    PX[i * 3] = X;\n    PX[i * 3 + 1] = Y;\n    PX[i * 3 + 2] = rot[6] * a + rot[7] * b + rot[8] * c;\n    x0 = min(x0, X);\n    x1 = max(x1, X);\n    y0 = min(y0, Y);\n    y1 = max(y1, Y);\n  }\n  // Big flakes need fewer samples to an LED for the same smooth edge.\n  const ss = s > 7 ? 2 : SS;\n  const bx = max(0, floor(x0)), by = max(0, floor(y0)), bw = min(W, floor(x1) + 1) - bx, bh = min(H, floor(y1) + 1) - by;\n  if (bw \u003c= 0 || bh \u003c= 0 || bw > 64 || bh > 64) return;\n  const sw = bw * ss, sub = P.sub;\n  sub.fill(-1, 0, sw * bh * ss);\n  ORD.length = 0;\n  for (let i = 0; i \u003c k; i++) {\n    // The facet's normal turned with the flake, towards the viewer: foil\n    // shines from both faces.\n    const a = n[i * 3], b = n[i * 3 + 1], c = n[i * 3 + 2];\n    let nx = rot[0] * a + rot[1] * b + rot[2] * c, ny = rot[3] * a + rot[4] * b + rot[5] * c, nz = rot[6] * a + rot[7] * b + rot[8] * c;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    const spec = max(0, nx * HH[0] + ny * HH[1] + nz * HH[2]) ** 18, diff = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n    // A little base light, the lamp's diffuse share, the glow of the serum\n    // above for facets tipped up, and a narrow highlight, cos^18, half\n    // strength 16 degrees off the mirror angle: a facet flashes as it\n    // sweeps through and its neighbours, tilted their own ways, stay deep.\n    const env = 0.5 - 0.5 * ny;\n    const br = (0.1 + 0.45 * diff + 0.25 * env + 0.95 * spec) * dim;\n    FC[i * 4] = cl(floor((br / 1.3) * 255), 0, 255);\n    FC[i * 4 + 1] = spec;\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    FC[i * 4 + 2] = (PX[2] + PX[j1 * 3 + 2] + PX[j2 * 3 + 2]) / 3;\n    ORD.push(i);\n  }\n  ORD.sort((a, b) => FC[a * 4 + 2] - FC[b * 4 + 2]);\n  for (const i of ORD) {\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    const ax = PX[0], ay = PX[1], bxx = PX[j1 * 3], byy = PX[j1 * 3 + 1], cx = PX[j2 * 3], cy = PX[j2 * 3 + 1];\n    const area = (bxx - ax) * (cy - ay) - (byy - ay) * (cx - ax);\n    if (abs(area) \u003c 1e-4) continue;\n    const sg = area > 0 ? 1 : -1;\n    const sx0 = max(0, floor((min(ax, bxx, cx) - bx) * ss)), sx1 = min(sw - 1, floor((max(ax, bxx, cx) - bx) * ss));\n    const sy0 = max(0, floor((min(ay, byy, cy) - by) * ss)), sy1 = min(bh * ss - 1, floor((max(ay, byy, cy) - by) * ss));\n    for (let sy = sy0; sy \u003c= sy1; sy++) {\n      const py = by + (sy + 0.5) / ss;\n      for (let sx = sx0; sx \u003c= sx1; sx++) {\n        const px = bx + (sx + 0.5) / ss;\n        const e0 = ((bxx - ax) * (py - ay) - (byy - ay) * (px - ax)) * sg;\n        const e1 = ((cx - bxx) * (py - byy) - (cy - byy) * (px - bxx)) * sg;\n        const e2 = ((ax - cx) * (py - cy) - (ay - cy) * (px - cx)) * sg;\n        if (e0 >= 0 && e1 >= 0 && e2 >= 0) sub[sy * sw + sx] = i;\n      }\n    }\n    if (glints && FC[i * 4 + 1] > 0.6) glints.push((ax + bxx + cx) / 3, (ay + byy + cy) / 3, FC[i * 4 + 1]);\n  }\n  for (let y = 0; y \u003c bh; y++)\n    for (let x = 0; x \u003c bw; x++) {\n      let r = 0, g = 0, b = 0, c = 0;\n      for (let u = 0; u \u003c ss; u++)\n        for (let w = 0; w \u003c ss; w++) {\n          const i = sub[(y * ss + u) * sw + x * ss + w];\n          if (i \u003c 0) continue;\n          const li = FC[i * 4] * 3;\n          r += lut[li];\n          g += lut[li + 1];\n          b += lut[li + 2];\n          c++;\n        }\n      if (!c) continue;\n      const al = c / (ss * ss), p = (by + y) * W + bx + x;\n      if (rgba) {\n        const o = p * 4;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n        buf[o + 3] = buf[o + 3] * (1 - al) + al;\n      } else {\n        const o = p * 3;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const fr = P.frame, far = P.far, tmp = P.tmp, t = P.t, sv = P.serum;\n  // The serum: a soft gradient and a slow caustic shimmer that fades with\n  // depth, light let in from the top.\n  const colw = P.colw || (P.colw = new Float32Array(W));\n  for (let x = 0; x \u003c W; x++) colw[x] = 1.5 * sin(x * 0.17 - t * 0.31);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / (H - 1), dep = exp(-y / 70), roww = 1.7 * sin(y * 0.11 + t * 0.4) + t * 0.23;\n    for (let x = 0; x \u003c W; x++) {\n      const a = sin(x * 0.19 + roww), b = sin(y * 0.13 + colw[x] - t * 0.17);\n      const c = a + b, caus = exp(-c * c * 6) * 0.9 * dep, o = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) fr[o + ch] = sv[ch] * (1 - g) + sv[3 + ch] * g + caus * 0.07 * sv[6 + ch];\n    }\n  }\n  const fl = P.flakes.slice(0, P.count).sort((a, b) => a.z - b.z);\n  far.fill(0);\n  let i = 0;\n  // Far flakes, dimmer, into their own layer, softened by a 1-2-1 blur.\n  for (; i \u003c fl.length && fl[i].z \u003c 0.35; i++) drawFlake(P, fl[i], far, true, 0.6 + 0.6 * fl[i].z, null);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) tmp[o + c] = (far[l + c] + 2 * far[o + c] + far[r + c]) / 4;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, u = y > 0 ? o - W * 4 : o, dn = y \u003c H - 1 ? o + W * 4 : o, f3 = (y * W + x) * 3;\n      const a = (tmp[u + 3] + 2 * tmp[o + 3] + tmp[dn + 3]) / 4;\n      for (let c = 0; c \u003c 3; c++) fr[f3 + c] = fr[f3 + c] * (1 - a) + (tmp[u + c] + 2 * tmp[o + c] + tmp[dn + c]) / 4;\n    }\n  // Near flakes, sharp, over the top; their brightest facets throw a glint.\n  const glints = [];\n  for (; i \u003c fl.length; i++) drawFlake(P, fl[i], fr, false, 1, fl[i].z > 0.6 ? glints : null);\n  for (let g = 0; g \u003c glints.length; g += 3) {\n    const gx = floor(glints[g]), gy = floor(glints[g + 1]), s = (glints[g + 2] - 0.6) / 0.4;\n    for (let r = -2; r \u003c= 2; r++) {\n      const a = s * (r === 0 ? 1 : abs(r) === 1 ? 0.55 : 0.22);\n      for (const [x, y] of r === 0 ? [[gx, gy]] : [[gx + r, gy], [gx, gy + r]]) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const o = (y * W + x) * 3;\n        fr[o] += 255 * a;\n        fr[o + 1] += 250 * a;\n        fr[o + 2] += 225 * a;\n      }\n    }\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, fr[o]), min(255, fr[o + 1]), min(255, fr[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower."},{"name":"Flakes","min":40,"max":120,"about":"How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil."},{"name":"Size","min":0,"max":1,"about":"How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one."}],"start":[0,2,40,0.06],"measures":{"motion":0.1468,"detail":0.0417,"edges":0.5435,"complexity":1.0218,"coverage":0.4003,"colour":0.1903,"drift":0.1193},"knobResponse":[0.0888,0.0967,0.0947,0.1201]},{"slug":"goldbach-comet","title":"Goldbach Comet","family":"number","round":33,"note":"짝수 n 을 두 소수의 합으로 쓰는 가짓수를 매끈한 예측값으로 나눠 가로로 찍고, n 은 아래로 커져요. n 이 3 이나 5 나 7 로 나뉘는지에 따라 여덟 줄기가 색으로 갈라지고, 아래로 갈수록 줄기가 가늘어지며 52만까지 가면 처음부터 다시 흘러요. K3 은 7 부터 소수 하나씩 줄기를 접어 한 줄로 모으고, K1 을 누르면 8초 동안 다 접었다 펴요.","idea":"Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.","buttons":"K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.","code":"// ===== Patternflow pattern =====\n// Title:   Goldbach Comet\n// Family:  number\n// Idea:    Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Goldbach's comet, the partition counts of Goldbach's conjecture (Christian Goldbach, 1742), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1\n//\n// Knob 1: Hue. Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue.\n// Knob 2: Speed. How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes.\n// Knob 3: Correction. Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel.\n// Knob 4: Smear. How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count.\n// Buttons: K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.\n\nconst W = 64, H = 128, LOGM = 19, M = 1 \u003c\u003c LOGM, HN = M >> 1;\nconst U0 = 9, U1 = LOGM, SPAN = 4, CAP = 160, XS = 40, X0 = 8, MID = 0.6;\nconst L3 = Math.log(2), L5 = Math.log(4 / 3), L7 = Math.log(6 / 5);\nconst C2 = 0.6601618158468696;\nconst { min, max, floor, ceil, log, exp, cos, sin, PI, LN2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Complex FFT of size n in place. tc/ts hold e^(-i pi k / half) at\n// half + k for every stage, so each stage reads its twiddles in a row.\nfunction fft(re, im, n, tc, ts, sign) {\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      (re[i] = re[j]), (re[j] = t);\n      (t = im[i]), (im[i] = im[j]), (im[j] = t);\n    }\n  }\n  for (let half = 1; half \u003c n; half \u003c\u003c= 1)\n    for (let i = 0, len = half \u003c\u003c 1; i \u003c n; i += len)\n      for (let k = 0; k \u003c half; k++) {\n        const cr = tc[half + k], ci = sign * ts[half + k], a = i + k, b = a + half;\n        const br = re[b], bi = im[b], xr = br * cr - bi * ci, xi = br * ci + bi * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n      }\n}\n\n// g(n) for every even n up to 2^19, the number of ways n = p + q with\n// primes p \u003c= q. Odd primes 2a + 1 make a 0/1 string over a \u003c 2^18, and\n// its square under convolution counts the ordered pairs with\n// a + b = n/2 - 1. The string is real, so it rides as one complex string\n// of half the length (even a in the real part, odd a in the imaginary)\n// and is pulled apart after the transform. Pairing up the 43,390 primes\n// below 2^19 one by one would be 512 million steps; this is 55 to 110 ms.\n// Checked against counting pairs one by one for every even n below 20,000\n// and every 997th one above, up to g(2^19) = 2367: no misses. Run to 2^20\n// it gave g(10^6) = 5402 with rounding errors under 2e-11, but took twice\n// as long.\nfunction goldbach(comp) {\n  const n = HN, tc = new Float64Array(M), ts = new Float64Array(M);\n  // The top stage by rotation, started afresh from cos and sin every 64\n  // steps: 4096 calls to them instead of 262,144.\n  const sr = cos(-PI / n), si = sin(-PI / n);\n  for (let k = 0; k \u003c n; k++) {\n    if ((k & 63) === 0) (tc[n + k] = cos((-PI * k) / n)), (ts[n + k] = sin((-PI * k) / n));\n    else {\n      const a = tc[n + k - 1], b = ts[n + k - 1];\n      (tc[n + k] = a * sr - b * si), (ts[n + k] = a * si + b * sr);\n    }\n  }\n  for (let half = n >> 1; half >= 1; half >>= 1)\n    for (let k = 0, st = n / half; k \u003c half; k++) (tc[half + k] = tc[n + k * st]), (ts[half + k] = ts[n + k * st]);\n  const zr = new Float64Array(n), zi = new Float64Array(n);\n  for (let a = 1; a \u003c n; a++) if (!comp[2 * a + 1]) (a & 1 ? zi : zr)[a >> 1] = 1;\n  fft(zr, zi, n, tc, ts, 1);\n  // X[k] and X[k + n] of the full string from Z[k] and Z[n - k]; square\n  // them; fold the squares back into one half-length string, pairs k and\n  // n - k together so it can be done in place.\n  const out = new Float64Array(4);\n  const fold = (k, j, o) => {\n    const ar = zr[k], ai = zi[k], br = zr[j], bi = -zi[j];\n    const er = (ar + br) / 2, ei = (ai + bi) / 2, odr = (ai - bi) / 2, odi = -(ar - br) / 2;\n    const wr = tc[n + k], wi = ts[n + k], tr = odr * wr - odi * wi, ti = odr * wi + odi * wr;\n    const x1r = er + tr, x1i = ei + ti, x2r = er - tr, x2i = ei - ti;\n    const y1r = x1r * x1r - x1i * x1i, y1i = 2 * x1r * x1i, y2r = x2r * x2r - x2i * x2i, y2i = 2 * x2r * x2i;\n    const sr = (y1r + y2r) / 2, si = (y1i + y2i) / 2, dr = (y1r - y2r) / 2, di = (y1i - y2i) / 2;\n    out[o] = sr - (di * wr - dr * wi);\n    out[o + 1] = si + (dr * wr + di * wi);\n  };\n  for (let k = 0; k \u003c= n >> 1; k++) {\n    const j = (n - k) & (n - 1);\n    fold(k, j, 0);\n    fold(j, k, 2);\n    (zr[k] = out[0]), (zi[k] = out[1]), (zr[j] = out[2]), (zi[j] = out[3]);\n  }\n  fft(zr, zi, n, tc, ts, -1);\n  const g = new Int32Array(HN + 1);\n  for (let k = 0; k + 1 \u003c= HN; k++) {\n    const h = k + 1, c = Math.round((k & 1 ? zi[k >> 1] : zr[k >> 1]) / n) + (h & 1 && h > 2 && !comp[h] ? 1 : 0);\n    g[h] = c >> 1;\n  }\n  g[2] = 1;\n  return g;\n}\n\n// The Hardy-Littlewood count without its singular series: C2 times the\n// integral of dt / (ln t ln(n - t)) from 2 to n - 2, on a table of 97\n// points from n = 2^8 to 2^20 and read between them in ln n. C2 n / ln^2 n\n// alone falls 23% short at n = 2000 and 15% at 500,000, and that drift\n// would tip the streaks four LEDs across the tape. With the integral, g(n)\n// over the whole prediction averages 0.953 at n = 2000, 0.982 at 20,000\n// and 0.997 at 500,000, spread 5.7%, 2.9% and 0.9% about it, so a streak\n// narrows from a spread of about two LEDs to a third of one.\nfunction hlTable() {\n  const t = new Float64Array(97);\n  for (let j = 0; j \u003c 97; j++) {\n    const n = 2 ** (8 + j / 8), a = log(2), b = log(n / 2), K = 200, h = (b - a) / K;\n    let s = 0;\n    for (let i = 0; i \u003c= K; i++) {\n      const u = a + i * h, x = exp(u);\n      s += ((i === 0 || i === K ? 1 : i & 1 ? 4 : 2) * x) / (u * log(n - x));\n    }\n    t[j] = log((2 * C2 * s * h) / 3);\n  }\n  return t;\n}\n\nexport function setup(params) {\n  const comp = new Uint8Array(M + 1);\n  for (let i = 3; i * i \u003c= M; i += 2) if (!comp[i]) for (let j = i * i; j \u003c= M; j += 2 * i) comp[j] = 1;\n  const g = goldbach(comp), hl = hlTable();\n  // For each even n = 2h: which of 3, 5, 7 and 11 divide it (bits 1, 2, 4\n  // and 8), and the log of the rest of its singular series, the product of\n  // (p - 1)/(p - 2) over the odd primes p from 11 up that divide it.\n  const bits = new Uint8Array(HN + 1), lr = new Float32Array(HN + 1), res = new Float32Array(HN + 1);\n  for (let p = 3; p \u003c= HN; p += 2) {\n    if (comp[p]) continue;\n    if (p > 7) {\n      const f = log((p - 1) / (p - 2));\n      for (let h = p; h \u003c= HN; h += p) lr[h] += f;\n    } else for (let h = p, b = p === 3 ? 1 : p === 5 ? 2 : 4; h \u003c= HN; h += p) bits[h] |= b;\n  }\n  for (let h = 11; h \u003c= HN; h += 11) bits[h] |= 8;\n  // res is how far g(n) sits from the whole prediction, in ln: 0 would be\n  // exactly Hardy-Littlewood. The prediction is read off the table once\n  // every 16 numbers and drawn straight between.\n  let hA = 0, hB = 0;\n  const hlAt = (h) => {\n    const z = cl((log(2 * h) / LN2 - 8) * 8, 0, 96), j = min(95, floor(z));\n    return hl[j] + (hl[j + 1] - hl[j]) * (z - j);\n  };\n  for (let h = 4; h \u003c= HN; h++) {\n    if (((h - 4) & 15) === 0) (hA = hlAt(h)), (hB = hlAt(h + 16));\n    const b = bits[h], small = (b & 1 ? L3 : 0) + (b & 2 ? L5 : 0) + (b & 4 ? L7 : 0);\n    res[h] = log(g[h]) - lr[h] - small - (hA + ((hB - hA) * ((h - 4) & 15)) / 16);\n  }\n  params.s = {\n    bits, lr, res, u: 10.6, hue: 0, speed: 2, kap: 0, smear: 0.06, bump: -1,\n    acc: new Float32Array(W * 4), pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(W * H * 3),\n    off: new Float32Array(16), cls: new Uint8Array(16),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.smear = cl(k[3], 0, 1);\n  const k3 = cl(k[2], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.bump = 0;\n  // The tap sends the correction to the far end from the knob and back:\n  // in for three seconds, held for two, out for three.\n  let kap = k3;\n  if (P.bump >= 0) {\n    P.bump += d / 8;\n    const b = P.bump \u003c 3 / 8 ? sm((P.bump * 8) / 3) : P.bump \u003c 5 / 8 ? 1 : sm(((1 - P.bump) * 8) / 3);\n    kap = k3 + ((k3 \u003c 0.5 ? 1 : 0) - k3) * b;\n    if (P.bump >= 1) P.bump = -1;\n  }\n  P.kap = kap;\n  P.u += d * P.speed * 0.12;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { bits, lr, res, acc, pal, rgb, off, cls } = P;\n  if (P.palHue !== P.hue) {\n    // Gold, green, pink, sky blue and pale blue at Hue 0. The gold is kept\n    // light so a thin streak of it does not read brown.\n    const base = [[0.13, 0.62], [0.36, 0.75], [0.9, 0.55], [0.55, 0.7], [0.62, 0.35]];\n    for (let c = 0; c \u003c 5; c++) hsv(P.hue + base[c][0], base[c][1], 1, pal, c * 3);\n    P.palHue = P.hue;\n  }\n  // The correction comes in a prime at a time: the first third of the knob\n  // folds the 7s onto the streaks beside them, the second the 5s, the last\n  // the 3s, while everything glides to meet in the middle.\n  const kap = P.kap * 3, w7 = sm(kap), w5 = sm(kap - 1), w3 = sm(kap - 2);\n  for (let b = 0; b \u003c 16; b++) {\n    off[b] = (b & 1 ? L3 * (1 - w3) : 0) + (b & 2 ? L5 * (1 - w5) : 0) + (b & 4 ? L7 * (1 - w7) : 0);\n    cls[b] = (b & 1 ? 0 : b & 2 ? 1 : b & 4 ? 2 : b & 8 ? 3 : 4) * 3;\n  }\n  // Smear leaves in the primes from 11 up. Each of them moves its\n  // multiples right by ln((p - 1)/(p - 2)), 0.105 for 11, 0.087 for 13,\n  // 0.065 for 17, so left in they fan every streak out four LEDs wide.\n  const shift = X0 + XS * MID * w3 - 0.5, keep = P.smear;\n  // The view is four octaves of n, a strip of ln2 n: row y holds\n  // [u + y du, u + (y + 1) du). The tape runs from 2^9 to 2^19 and starts\n  // over after ten dark rows.\n  const du = SPAN / H, u0 = U0, tape = U1 - u0 + 10 * du;\n  for (let y = 0; y \u003c H; y++) {\n    acc.fill(0);\n    let uu = u0 + ((((P.u - u0 + y * du) % tape) + tape) % tape);\n    if (uu + du \u003c= U1) {\n      const hlo = max(4, ceil(2 ** uu / 2)), hhi = min(HN + 1, ceil(2 ** (uu + du) / 2));\n      const count = hhi - hlo;\n      // Every n in the row while there are few, every s-th when there are\n      // more than CAP. s is a power of 2: a stride of 17 would keep only\n      // multiples of 17 and move every streak 2.3 LEDs right by its 16/15.\n      const s = count > CAP ? 2 ** ceil(Math.log2(count / CAP)) : 1;\n      for (let h = ceil(hlo / s) * s; h \u003c hhi; h += s) {\n        const b = bits[h], x = shift + XS * (res[h] + keep * lr[h] + off[b]), x0 = floor(x), f = x - x0, c = cls[b];\n        if (x0 >= 0 && x0 \u003c W) {\n          const o = x0 * 4, w = 1 - f;\n          (acc[o] += w), (acc[o + 1] += w * pal[c]), (acc[o + 2] += w * pal[c + 1]), (acc[o + 3] += w * pal[c + 2]);\n        }\n        if (x0 + 1 >= 0 && x0 + 1 \u003c W) {\n          const o = x0 * 4 + 4;\n          (acc[o] += f), (acc[o + 1] += f * pal[c]), (acc[o + 2] += f * pal[c + 1]), (acc[o + 3] += f * pal[c + 2]);\n        }\n      }\n    }\n    // Dots in one LED add up, on a log scale against the busiest LED of the\n    // row: full at 40% of it, and one dot lights an LED to about a third in\n    // a crowded row and to half in a sparse one, so a lone dot in a far\n    // tail stays faint and the core of a streak stands out. The colour is\n    // the mix of the classes that landed there.\n    let top = 0;\n    for (let x = 0; x \u003c W; x++) top = max(top, acc[x * 4]);\n    const norm = 1 / log(1 + 2 * max(4, 0.4 * top));\n    for (let x = 0; x \u003c W; x++) {\n      const o = x * 4, a = acc[o], q = (y * W + x) * 3;\n      if (a \u003c= 0) {\n        rgb[q] = rgb[q + 1] = rgb[q + 2] = 0;\n        continue;\n      }\n      const lev = min(1, log(1 + 2 * a) * norm) / a;\n      rgb[q] = acc[o + 1] * lev;\n      rgb[q + 1] = acc[o + 2] * lev;\n      rgb[q + 2] = acc[o + 3] * lev;\n    }\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-goldbach-comet","type":"code","name":"goldbach-comet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Goldbach Comet\n// Family:  number\n// Idea:    Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Goldbach's comet, the partition counts of Goldbach's conjecture (Christian Goldbach, 1742), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1\n//\n// Knob 1: Hue. Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue.\n// Knob 2: Speed. How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes.\n// Knob 3: Correction. Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel.\n// Knob 4: Smear. How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count.\n// Buttons: K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.\n\nconst W = 64, H = 128, LOGM = 19, M = 1 \u003c\u003c LOGM, HN = M >> 1;\nconst U0 = 9, U1 = LOGM, SPAN = 4, CAP = 160, XS = 40, X0 = 8, MID = 0.6;\nconst L3 = Math.log(2), L5 = Math.log(4 / 3), L7 = Math.log(6 / 5);\nconst C2 = 0.6601618158468696;\nconst { min, max, floor, ceil, log, exp, cos, sin, PI, LN2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Complex FFT of size n in place. tc/ts hold e^(-i pi k / half) at\n// half + k for every stage, so each stage reads its twiddles in a row.\nfunction fft(re, im, n, tc, ts, sign) {\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      (re[i] = re[j]), (re[j] = t);\n      (t = im[i]), (im[i] = im[j]), (im[j] = t);\n    }\n  }\n  for (let half = 1; half \u003c n; half \u003c\u003c= 1)\n    for (let i = 0, len = half \u003c\u003c 1; i \u003c n; i += len)\n      for (let k = 0; k \u003c half; k++) {\n        const cr = tc[half + k], ci = sign * ts[half + k], a = i + k, b = a + half;\n        const br = re[b], bi = im[b], xr = br * cr - bi * ci, xi = br * ci + bi * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n      }\n}\n\n// g(n) for every even n up to 2^19, the number of ways n = p + q with\n// primes p \u003c= q. Odd primes 2a + 1 make a 0/1 string over a \u003c 2^18, and\n// its square under convolution counts the ordered pairs with\n// a + b = n/2 - 1. The string is real, so it rides as one complex string\n// of half the length (even a in the real part, odd a in the imaginary)\n// and is pulled apart after the transform. Pairing up the 43,390 primes\n// below 2^19 one by one would be 512 million steps; this is 55 to 110 ms.\n// Checked against counting pairs one by one for every even n below 20,000\n// and every 997th one above, up to g(2^19) = 2367: no misses. Run to 2^20\n// it gave g(10^6) = 5402 with rounding errors under 2e-11, but took twice\n// as long.\nfunction goldbach(comp) {\n  const n = HN, tc = new Float64Array(M), ts = new Float64Array(M);\n  // The top stage by rotation, started afresh from cos and sin every 64\n  // steps: 4096 calls to them instead of 262,144.\n  const sr = cos(-PI / n), si = sin(-PI / n);\n  for (let k = 0; k \u003c n; k++) {\n    if ((k & 63) === 0) (tc[n + k] = cos((-PI * k) / n)), (ts[n + k] = sin((-PI * k) / n));\n    else {\n      const a = tc[n + k - 1], b = ts[n + k - 1];\n      (tc[n + k] = a * sr - b * si), (ts[n + k] = a * si + b * sr);\n    }\n  }\n  for (let half = n >> 1; half >= 1; half >>= 1)\n    for (let k = 0, st = n / half; k \u003c half; k++) (tc[half + k] = tc[n + k * st]), (ts[half + k] = ts[n + k * st]);\n  const zr = new Float64Array(n), zi = new Float64Array(n);\n  for (let a = 1; a \u003c n; a++) if (!comp[2 * a + 1]) (a & 1 ? zi : zr)[a >> 1] = 1;\n  fft(zr, zi, n, tc, ts, 1);\n  // X[k] and X[k + n] of the full string from Z[k] and Z[n - k]; square\n  // them; fold the squares back into one half-length string, pairs k and\n  // n - k together so it can be done in place.\n  const out = new Float64Array(4);\n  const fold = (k, j, o) => {\n    const ar = zr[k], ai = zi[k], br = zr[j], bi = -zi[j];\n    const er = (ar + br) / 2, ei = (ai + bi) / 2, odr = (ai - bi) / 2, odi = -(ar - br) / 2;\n    const wr = tc[n + k], wi = ts[n + k], tr = odr * wr - odi * wi, ti = odr * wi + odi * wr;\n    const x1r = er + tr, x1i = ei + ti, x2r = er - tr, x2i = ei - ti;\n    const y1r = x1r * x1r - x1i * x1i, y1i = 2 * x1r * x1i, y2r = x2r * x2r - x2i * x2i, y2i = 2 * x2r * x2i;\n    const sr = (y1r + y2r) / 2, si = (y1i + y2i) / 2, dr = (y1r - y2r) / 2, di = (y1i - y2i) / 2;\n    out[o] = sr - (di * wr - dr * wi);\n    out[o + 1] = si + (dr * wr + di * wi);\n  };\n  for (let k = 0; k \u003c= n >> 1; k++) {\n    const j = (n - k) & (n - 1);\n    fold(k, j, 0);\n    fold(j, k, 2);\n    (zr[k] = out[0]), (zi[k] = out[1]), (zr[j] = out[2]), (zi[j] = out[3]);\n  }\n  fft(zr, zi, n, tc, ts, -1);\n  const g = new Int32Array(HN + 1);\n  for (let k = 0; k + 1 \u003c= HN; k++) {\n    const h = k + 1, c = Math.round((k & 1 ? zi[k >> 1] : zr[k >> 1]) / n) + (h & 1 && h > 2 && !comp[h] ? 1 : 0);\n    g[h] = c >> 1;\n  }\n  g[2] = 1;\n  return g;\n}\n\n// The Hardy-Littlewood count without its singular series: C2 times the\n// integral of dt / (ln t ln(n - t)) from 2 to n - 2, on a table of 97\n// points from n = 2^8 to 2^20 and read between them in ln n. C2 n / ln^2 n\n// alone falls 23% short at n = 2000 and 15% at 500,000, and that drift\n// would tip the streaks four LEDs across the tape. With the integral, g(n)\n// over the whole prediction averages 0.953 at n = 2000, 0.982 at 20,000\n// and 0.997 at 500,000, spread 5.7%, 2.9% and 0.9% about it, so a streak\n// narrows from a spread of about two LEDs to a third of one.\nfunction hlTable() {\n  const t = new Float64Array(97);\n  for (let j = 0; j \u003c 97; j++) {\n    const n = 2 ** (8 + j / 8), a = log(2), b = log(n / 2), K = 200, h = (b - a) / K;\n    let s = 0;\n    for (let i = 0; i \u003c= K; i++) {\n      const u = a + i * h, x = exp(u);\n      s += ((i === 0 || i === K ? 1 : i & 1 ? 4 : 2) * x) / (u * log(n - x));\n    }\n    t[j] = log((2 * C2 * s * h) / 3);\n  }\n  return t;\n}\n\nexport function setup(params) {\n  const comp = new Uint8Array(M + 1);\n  for (let i = 3; i * i \u003c= M; i += 2) if (!comp[i]) for (let j = i * i; j \u003c= M; j += 2 * i) comp[j] = 1;\n  const g = goldbach(comp), hl = hlTable();\n  // For each even n = 2h: which of 3, 5, 7 and 11 divide it (bits 1, 2, 4\n  // and 8), and the log of the rest of its singular series, the product of\n  // (p - 1)/(p - 2) over the odd primes p from 11 up that divide it.\n  const bits = new Uint8Array(HN + 1), lr = new Float32Array(HN + 1), res = new Float32Array(HN + 1);\n  for (let p = 3; p \u003c= HN; p += 2) {\n    if (comp[p]) continue;\n    if (p > 7) {\n      const f = log((p - 1) / (p - 2));\n      for (let h = p; h \u003c= HN; h += p) lr[h] += f;\n    } else for (let h = p, b = p === 3 ? 1 : p === 5 ? 2 : 4; h \u003c= HN; h += p) bits[h] |= b;\n  }\n  for (let h = 11; h \u003c= HN; h += 11) bits[h] |= 8;\n  // res is how far g(n) sits from the whole prediction, in ln: 0 would be\n  // exactly Hardy-Littlewood. The prediction is read off the table once\n  // every 16 numbers and drawn straight between.\n  let hA = 0, hB = 0;\n  const hlAt = (h) => {\n    const z = cl((log(2 * h) / LN2 - 8) * 8, 0, 96), j = min(95, floor(z));\n    return hl[j] + (hl[j + 1] - hl[j]) * (z - j);\n  };\n  for (let h = 4; h \u003c= HN; h++) {\n    if (((h - 4) & 15) === 0) (hA = hlAt(h)), (hB = hlAt(h + 16));\n    const b = bits[h], small = (b & 1 ? L3 : 0) + (b & 2 ? L5 : 0) + (b & 4 ? L7 : 0);\n    res[h] = log(g[h]) - lr[h] - small - (hA + ((hB - hA) * ((h - 4) & 15)) / 16);\n  }\n  params.s = {\n    bits, lr, res, u: 10.6, hue: 0, speed: 2, kap: 0, smear: 0.06, bump: -1,\n    acc: new Float32Array(W * 4), pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(W * H * 3),\n    off: new Float32Array(16), cls: new Uint8Array(16),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.smear = cl(k[3], 0, 1);\n  const k3 = cl(k[2], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.bump = 0;\n  // The tap sends the correction to the far end from the knob and back:\n  // in for three seconds, held for two, out for three.\n  let kap = k3;\n  if (P.bump >= 0) {\n    P.bump += d / 8;\n    const b = P.bump \u003c 3 / 8 ? sm((P.bump * 8) / 3) : P.bump \u003c 5 / 8 ? 1 : sm(((1 - P.bump) * 8) / 3);\n    kap = k3 + ((k3 \u003c 0.5 ? 1 : 0) - k3) * b;\n    if (P.bump >= 1) P.bump = -1;\n  }\n  P.kap = kap;\n  P.u += d * P.speed * 0.12;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { bits, lr, res, acc, pal, rgb, off, cls } = P;\n  if (P.palHue !== P.hue) {\n    // Gold, green, pink, sky blue and pale blue at Hue 0. The gold is kept\n    // light so a thin streak of it does not read brown.\n    const base = [[0.13, 0.62], [0.36, 0.75], [0.9, 0.55], [0.55, 0.7], [0.62, 0.35]];\n    for (let c = 0; c \u003c 5; c++) hsv(P.hue + base[c][0], base[c][1], 1, pal, c * 3);\n    P.palHue = P.hue;\n  }\n  // The correction comes in a prime at a time: the first third of the knob\n  // folds the 7s onto the streaks beside them, the second the 5s, the last\n  // the 3s, while everything glides to meet in the middle.\n  const kap = P.kap * 3, w7 = sm(kap), w5 = sm(kap - 1), w3 = sm(kap - 2);\n  for (let b = 0; b \u003c 16; b++) {\n    off[b] = (b & 1 ? L3 * (1 - w3) : 0) + (b & 2 ? L5 * (1 - w5) : 0) + (b & 4 ? L7 * (1 - w7) : 0);\n    cls[b] = (b & 1 ? 0 : b & 2 ? 1 : b & 4 ? 2 : b & 8 ? 3 : 4) * 3;\n  }\n  // Smear leaves in the primes from 11 up. Each of them moves its\n  // multiples right by ln((p - 1)/(p - 2)), 0.105 for 11, 0.087 for 13,\n  // 0.065 for 17, so left in they fan every streak out four LEDs wide.\n  const shift = X0 + XS * MID * w3 - 0.5, keep = P.smear;\n  // The view is four octaves of n, a strip of ln2 n: row y holds\n  // [u + y du, u + (y + 1) du). The tape runs from 2^9 to 2^19 and starts\n  // over after ten dark rows.\n  const du = SPAN / H, u0 = U0, tape = U1 - u0 + 10 * du;\n  for (let y = 0; y \u003c H; y++) {\n    acc.fill(0);\n    let uu = u0 + ((((P.u - u0 + y * du) % tape) + tape) % tape);\n    if (uu + du \u003c= U1) {\n      const hlo = max(4, ceil(2 ** uu / 2)), hhi = min(HN + 1, ceil(2 ** (uu + du) / 2));\n      const count = hhi - hlo;\n      // Every n in the row while there are few, every s-th when there are\n      // more than CAP. s is a power of 2: a stride of 17 would keep only\n      // multiples of 17 and move every streak 2.3 LEDs right by its 16/15.\n      const s = count > CAP ? 2 ** ceil(Math.log2(count / CAP)) : 1;\n      for (let h = ceil(hlo / s) * s; h \u003c hhi; h += s) {\n        const b = bits[h], x = shift + XS * (res[h] + keep * lr[h] + off[b]), x0 = floor(x), f = x - x0, c = cls[b];\n        if (x0 >= 0 && x0 \u003c W) {\n          const o = x0 * 4, w = 1 - f;\n          (acc[o] += w), (acc[o + 1] += w * pal[c]), (acc[o + 2] += w * pal[c + 1]), (acc[o + 3] += w * pal[c + 2]);\n        }\n        if (x0 + 1 >= 0 && x0 + 1 \u003c W) {\n          const o = x0 * 4 + 4;\n          (acc[o] += f), (acc[o + 1] += f * pal[c]), (acc[o + 2] += f * pal[c + 1]), (acc[o + 3] += f * pal[c + 2]);\n        }\n      }\n    }\n    // Dots in one LED add up, on a log scale against the busiest LED of the\n    // row: full at 40% of it, and one dot lights an LED to about a third in\n    // a crowded row and to half in a sparse one, so a lone dot in a far\n    // tail stays faint and the core of a streak stands out. The colour is\n    // the mix of the classes that landed there.\n    let top = 0;\n    for (let x = 0; x \u003c W; x++) top = max(top, acc[x * 4]);\n    const norm = 1 / log(1 + 2 * max(4, 0.4 * top));\n    for (let x = 0; x \u003c W; x++) {\n      const o = x * 4, a = acc[o], q = (y * W + x) * 3;\n      if (a \u003c= 0) {\n        rgb[q] = rgb[q + 1] = rgb[q + 2] = 0;\n        continue;\n      }\n      const lev = min(1, log(1 + 2 * a) * norm) / a;\n      rgb[q] = acc[o + 1] * lev;\n      rgb[q + 1] = acc[o + 2] * lev;\n      rgb[q + 2] = acc[o + 3] * lev;\n    }\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes."},{"name":"Correction","min":0,"max":1,"about":"Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel."},{"name":"Smear","min":0,"max":1,"about":"How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count."}],"start":[0,2,0,0.06],"measures":{"motion":1.5227,"detail":0.1448,"edges":0.6539,"complexity":1.6402,"coverage":0.5247,"colour":0.2628,"drift":0.0876},"knobResponse":[0.139,0.1117,0.2621,0.1127]},{"slug":"gosset-polytope","title":"Gosset Polytope","family":"geometry","round":28,"note":"E8 의 근 240개와 그 사이 모서리 6720개, 고셋의 4₂₁ 다면체를 8차원에서 두 창에 비춰요. 위 창은 30개씩 고리 여덟이 서는 콕서터 평면에서 열려 E7, E6, D5, D4, D6 의 평면을 지나 돌아오고, 아래 창은 몇 평면 앞서가요. 누르면 둘 다 콕서터 평면으로 돌아가요.","idea":"The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.","buttons":"K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.","code":"// ===== Patternflow pattern =====\n// Title:   Gosset Polytope\n// Family:  geometry\n// Idea:    The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gosset's 4₂₁ polytope (Thorold Gosset, 1900) and the E8 root system (Wilhelm Killing 1888, Élie Cartan 1894), in Peter McMullen's Petrie projection, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5\n//\n// Knob 1: Hue. Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan.\n// Knob 2: Speed. At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes.\n// Knob 3: Edges. How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white.\n// Knob 4: Plane. How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind.\n// Buttons: K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.\n\n// Each window is 64 LEDs square; the polytope fills a circle of radius 29.5\n// in it, so the outer ring of the Coxeter plane picture has 30 vertices about\n// six LEDs apart and the inner one 30 on a circle of radius six.\nconst W = 64, HV = 64, CX = 31.5, RAD = 29.5;\nconst { max, floor, ceil, round, sqrt, cos, sin, abs, exp, atan2, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst dot = (a, b) => a.reduce((s, x, i) => s + x * b[i], 0);\n\n// The roots: every (±1, ±1, 0, 0, 0, 0, 0, 0) in any order, 112 of them,\n// and every (±1/2)^8 with an even number of minus signs, 128 more.\nconst ROOTS = [];\nfor (let i = 0; i \u003c 8; i++)\n  for (let j = i + 1; j \u003c 8; j++)\n    for (let s = 0; s \u003c 4; s++) {\n      const v = new Array(8).fill(0);\n      v[i] = s & 1 ? -1 : 1;\n      v[j] = s & 2 ? -1 : 1;\n      ROOTS.push(v);\n    }\nfor (let m = 0; m \u003c 256; m++) {\n  let neg = 0;\n  for (let k = 0; k \u003c 8; k++) neg += (m >> k) & 1;\n  if (neg % 2 === 0) ROOTS.push([...Array(8)].map((_, k) => ((m >> k) & 1 ? -0.5 : 0.5)));\n}\nconst NV = ROOTS.length;\nconst RF = new Float64Array(NV * 8);\nROOTS.forEach((r, i) => r.forEach((x, k) => (RF[i * 8 + k] = x)));\n\n// Two roots are joined when they stand sqrt 2 apart, when their dot product\n// is 1: 56 edges at each vertex, 6720 in all.\nconst EDGE = [];\nfor (let i = 0; i \u003c NV; i++) for (let j = i + 1; j \u003c NV; j++) if (dot(ROOTS[i], ROOTS[j]) === 1) EDGE.push(i, j);\nconst NE = EDGE.length / 2;\nconst EI = Uint16Array.from(EDGE);\n\n// The simple roots of E8 (Bourbaki's numbering): a1 is the spinor root, a2\n// hangs off a4, and a1 a3 a4 a5 a6 a7 a8 is the long arm.\nconst e = (i, s = 1, j = -1, t = 0) => [...Array(8)].map((_, k) => (k === i ? s : k === j ? t : 0));\nconst SIMPLE = [[0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5], e(0, 1, 1, 1), e(1, 1, 0, -1), e(2, 1, 1, -1), e(3, 1, 2, -1), e(4, 1, 3, -1), e(5, 1, 4, -1), e(6, 1, 5, -1)];\n\n// The Coxeter plane of a simply laced root system from its simple roots\n// (Steinberg): colour the Dynkin diagram black and white, take the\n// Perron-Frobenius vector x of the diagram, and the plane is spanned by the\n// sum of x_i a_i over the black roots and the same sum over the white ones.\n// The product of all the reflections turns it by one h-th of a turn.\nfunction coxeterPlane(S) {\n  const k = S.length, adj = S.map((a) => S.map((b) => (dot(a, b) === -1 ? 1 : 0)));\n  const col = new Array(k).fill(-1), stack = [0];\n  col[0] = 0;\n  while (stack.length) {\n    const i = stack.pop();\n    for (let j = 0; j \u003c k; j++) if (adj[i][j] && col[j] \u003c 0) (col[j] = 1 - col[i]), stack.push(j);\n  }\n  let x = new Array(k).fill(1), lam = 0;\n  for (let it = 0; it \u003c 600; it++) {\n    const y = x.map((xi, i) => 2 * xi + adj[i].reduce((s, a, j) => s + a * x[j], 0));\n    lam = sqrt(dot(y, y)) - 2;\n    x = y.map((v) => v / (lam + 2));\n  }\n  const u = new Array(8).fill(0), w = new Array(8).fill(0);\n  S.forEach((a, i) => a.forEach((ai, d) => ((col[i] ? w : u)[d] += x[i] * ai)));\n  const nu = sqrt(dot(u, u));\n  for (let d = 0; d \u003c 8; d++) u[d] /= nu;\n  const pr = dot(w, u);\n  for (let d = 0; d \u003c 8; d++) w[d] -= pr * u[d];\n  const nw = sqrt(dot(w, w));\n  // The diagram's largest eigenvalue is 2 cos(pi / h), h the Coxeter number.\n  return [u, w.map((v) => v / nw), round(PI / Math.acos(lam / 2))];\n}\n\n// The round: E8 (30-fold), then down the chain E8 > E7 > E6 > D5 > D4 one\n// node of the diagram at a time (18, 12, 8 and 6-fold), up through D6\n// (10-fold) and back.\nconst STOPS = [SIMPLE, SIMPLE.slice(0, 7), SIMPLE.slice(0, 6), SIMPLE.slice(1, 6), SIMPLE.slice(1, 5), SIMPLE.slice(1, 7)].map(coxeterPlane);\nconst NS = STOPS.length;\n\n// Each swing is the shortest way from one plane to the next (a geodesic in\n// the Grassmannian): the two principal angles between the planes, turned\n// through together. The frame carries its own turn within the plane from\n// one swing to the next, so the windows never jump.\nfunction svd2(a, b, c, d) {\n  const E = (a + d) / 2, F = (a - d) / 2, G = (c + b) / 2, H = (c - b) / 2;\n  const Q = hypot(E, H), R = hypot(F, G), a1 = atan2(G, F), a2 = atan2(H, E);\n  // C = rot(phi) diag(Q + R, Q - R) rot(theta)\n  return { s1: Q + R, s2: Q - R, phi: (a2 + a1) / 2, th: (a2 - a1) / 2 };\n}\nconst comb = (p, q, cp, cq) => p.map((x, i) => cp * x + cq * q[i]);\n// Each stop is shown turned so a vertex of its outer polygon points straight\n// up; the turn is picked among the h equal ones to be the nearest to the\n// last, and the swing eases from one to the next.\nfunction upright(u, v, h, near) {\n  let best = 0, a = 0;\n  for (const r of ROOTS) {\n    const x = dot(r, u), y = dot(r, v), q = hypot(x, y);\n    if (q > best + 1e-9) (best = q), (a = atan2(y, x));\n  }\n  const t = -PI / 2 - a, step = (2 * PI) / h;\n  return t + round((near - t) / step) * step;\n}\nconst SEG = [];\nlet F = STOPS[0], turn = upright(F[0], F[1], 30, 0);\nfor (let k = 0; k \u003c NS; k++) {\n  let [v1, v2, h] = STOPS[(k + 1) % NS];\n  const [f1, f2] = F;\n  if (dot(f1, v1) * dot(f2, v2) - dot(f1, v2) * dot(f2, v1) \u003c 0) v2 = v2.map((x) => -x);\n  const { s1, s2, phi, th } = svd2(dot(f1, v1), dot(f1, v2), dot(f2, v1), dot(f2, v2));\n  const ca = cos(phi), sa = sin(phi), cb = cos(-th), sb = sin(-th);\n  // Principal vectors: P = F rot(phi), Q = V rot(theta)^T.\n  const p = [comb(f1, f2, ca, sa), comb(f1, f2, -sa, ca)];\n  const q = [comb(v1, v2, cb, sb), comb(v1, v2, -sb, cb)];\n  const ang = [], n = [];\n  [s1, s2].forEach((s, i) => {\n    const t = comb(q[i], p[i], 1, -cl(s, -1, 1)), nt = sqrt(dot(t, t));\n    ang.push(Math.acos(cl(s, -1, 1)));\n    n.push(nt > 1e-9 ? t.map((x) => x / nt) : new Array(8).fill(0));\n  });\n  F = [comb(q[0], q[1], cos(phi), -sin(phi)), comb(q[0], q[1], sin(phi), cos(phi))];\n  // Back on the Coxeter plane the frame may come round mirrored; the\n  // picture there is symmetric under the mirror, so turning a vertex up\n  // closes the loop all the same.\n  const next = upright(F[0], F[1], h, turn);\n  SEG.push({ p, n, ang, phi, t0: turn, t1: next });\n  turn = next;\n}\n\n// Where the frame stands at phase s (in stops): hold 5/12 of each stop, then\n// swing to the next with a smooth start and end. Returns the turn.\nconst HOLD = 5 / 12;\nfunction frameAt(s, out) {\n  const n = ((s % NS) + NS) % NS, k = floor(n), f = n - k, G = SEG[k];\n  let m = cl((f - HOLD) / (1 - HOLD), 0, 1);\n  m = m * m * m * (m * (m * 6 - 15) + 10);\n  const c1 = cos(m * G.ang[0]), s1 = sin(m * G.ang[0]), c2 = cos(m * G.ang[1]), s2 = sin(m * G.ang[1]);\n  const cp = cos(G.phi), sp = sin(G.phi);\n  for (let d = 0; d \u003c 8; d++) {\n    const g1 = c1 * G.p[0][d] + s1 * G.n[0][d], g2 = c2 * G.p[1][d] + s2 * G.n[1][d];\n    out[d] = g1 * cp - g2 * sp;\n    out[8 + d] = g1 * sp + g2 * cp;\n  }\n  return G.t0 + (G.t1 - G.t0) * m;\n}\n\n// Eight rings of 30 on the Coxeter plane; each vertex keeps the colour of\n// its ring wherever the swings carry it.\nconst RING = new Uint8Array(NV);\n{\n  const [u, v] = STOPS[0], rr = ROOTS.map((r) => hypot(dot(r, u), dot(r, v)));\n  const sorted = [...rr].sort((a, b) => a - b), levels = sorted.filter((x, i) => i === 0 || x - sorted[i - 1] > 1e-3);\n  rr.forEach((x, i) => (RING[i] = levels.filter((l) => l \u003c x + 1e-3).length - 1));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = {\n    ph: 0, lead: 1, hue: -1, ew: 1, snap: null,\n    buf: new Float32Array(W * HV * 2 * 3), fr: new Float64Array(16),\n    px: new Float32Array(NV), py: new Float32Array(NV),\n    vc: new Float32Array(NV * 3), ec: new Float32Array(NE * 3), rc: new Float32Array(8 * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.lead = cl(k[3], 1, 5);\n  P.ew = cl(k[2], -1, 1);\n  const hue = k[0] || 0;\n  if (hue !== P.hue) {\n    P.hue = hue;\n    for (let r = 0; r \u003c 8; r++) hsv(0.15 + hue - r * 0.095, 0.95 - 0.02 * r, 1, P.rc, r * 3);\n    for (let i = 0; i \u003c NV; i++) for (let c = 0; c \u003c 3; c++) P.vc[i * 3 + c] = P.rc[RING[i] * 3 + c];\n    for (let j = 0; j \u003c NE; j++) for (let c = 0; c \u003c 3; c++) P.ec[j * 3 + c] = (P.vc[EI[2 * j] * 3 + c] + P.vc[EI[2 * j + 1] * 3 + c]) / 2;\n  }\n  if (P.snap) {\n    P.snap.t += d;\n    const u = cl(P.snap.t / P.snap.T, 0, 1), m = u * u * (3 - 2 * u);\n    P.ph = P.snap.a + (P.snap.b - P.snap.a) * m;\n    if (u >= 1) P.snap = null;\n  } else {\n    P.ph = (P.ph + (d * sp) / 12) % NS;\n    // K1: run back or on to the nearer Coxeter plane, 0.4 s a stop.\n    if (input.btnPressed && input.btnPressed[0]) {\n      const b = round(P.ph / NS) * NS;\n      P.snap = { a: P.ph, b, t: 0, T: max(0.8, abs(b - P.ph) * 0.4) };\n    }\n  }\n}\n\n// One window: project the 240 roots onto the plane, draw the 6720 edges as\n// additive light, then the vertices on top.\nfunction view(P, ph, y0) {\n  const fr = P.fr, buf = P.buf, px = P.px, py = P.py;\n  const a = frameAt(ph, fr), ca = cos(a), sa = sin(a);\n  let rmax = 0;\n  for (let i = 0; i \u003c NV; i++) {\n    let x = 0, y = 0;\n    for (let d = 0, o = i * 8; d \u003c 8; d++) (x += RF[o + d] * fr[d]), (y += RF[o + d] * fr[8 + d]);\n    px[i] = ca * x - sa * y;\n    py[i] = sa * x + ca * y;\n    rmax = max(rmax, px[i] * px[i] + py[i] * py[i]);\n  }\n  const sc = RAD / sqrt(rmax), cy = y0 + 31.5;\n  for (let i = 0; i \u003c NV; i++) (px[i] = CX + px[i] * sc - 0.5), (py[i] = cy + py[i] * sc - 0.5);\n  const ew = P.ew \u003c= -1 ? 0 : 0.012 * (P.ew + 1) * (P.ew + 1), ec = P.ec, W3 = W * 3;\n  // RAD keeps every point a pixel inside the window, so no line needs clipping.\n  if (ew > 0)\n    for (let j = 0; j \u003c NE; j++) {\n      const i0 = EI[2 * j], i1 = EI[2 * j + 1];\n      let x = px[i0], y = py[i0];\n      const dx = px[i1] - x, dy = py[i1] - y, adx = dx \u003c 0 ? -dx : dx, ady = dy \u003c 0 ? -dy : dy;\n      const n = ceil(adx > ady ? adx : ady) || 1, w = (ew * sqrt(dx * dx + dy * dy)) / n;\n      const r = ec[j * 3] * w, g = ec[j * 3 + 1] * w, b = ec[j * 3 + 2] * w, sx = dx / n, sy = dy / n;\n      for (let s = 0; s \u003c= n; s++, x += sx, y += sy) {\n        const xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n        const w11 = fx * fy, w10 = fx - w11, w01 = fy - w11, w00 = 1 - fx - w01;\n        buf[q] += r * w00;\n        buf[q + 1] += g * w00;\n        buf[q + 2] += b * w00;\n        buf[q + 3] += r * w10;\n        buf[q + 4] += g * w10;\n        buf[q + 5] += b * w10;\n        buf[q + W3] += r * w01;\n        buf[q + W3 + 1] += g * w01;\n        buf[q + W3 + 2] += b * w01;\n        buf[q + W3 + 3] += r * w11;\n        buf[q + W3 + 4] += g * w11;\n        buf[q + W3 + 5] += b * w11;\n      }\n    }\n  // With the web turned off the vertices burn brighter.\n  const vc = P.vc, vw = 0.6 + 0.5 * max(0, -P.ew);\n  for (let i = 0; i \u003c NV; i++) {\n    const x = px[i], y = py[i], xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n    const w11 = fx * fy * vw, w10 = fx * vw - w11, w01 = fy * vw - w11, w00 = vw - fx * vw - w01;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = vc[i * 3 + c];\n      buf[q + c] += v * w00;\n      buf[q + 3 + c] += v * w10;\n      buf[q + W3 + c] += v * w01;\n      buf[q + W3 + 3 + c] += v * w11;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf;\n  buf.fill(0);\n  view(P, P.ph, 0);\n  view(P, P.ph + P.lead, HV);\n  for (let p = 0, y = 0; y \u003c 2 * HV; y++)\n    for (let x = 0; x \u003c W; x++, p += 3)\n      display.setPixel(x, y, 255 * (1 - exp(-1.6 * buf[p])), 255 * (1 - exp(-1.6 * buf[p + 1])), 255 * (1 - exp(-1.6 * buf[p + 2])));\n}\n","layer":{"id":"layer-gosset-polytope","type":"code","name":"gosset-polytope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gosset Polytope\n// Family:  geometry\n// Idea:    The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gosset's 4₂₁ polytope (Thorold Gosset, 1900) and the E8 root system (Wilhelm Killing 1888, Élie Cartan 1894), in Peter McMullen's Petrie projection, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5\n//\n// Knob 1: Hue. Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan.\n// Knob 2: Speed. At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes.\n// Knob 3: Edges. How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white.\n// Knob 4: Plane. How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind.\n// Buttons: K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.\n\n// Each window is 64 LEDs square; the polytope fills a circle of radius 29.5\n// in it, so the outer ring of the Coxeter plane picture has 30 vertices about\n// six LEDs apart and the inner one 30 on a circle of radius six.\nconst W = 64, HV = 64, CX = 31.5, RAD = 29.5;\nconst { max, floor, ceil, round, sqrt, cos, sin, abs, exp, atan2, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst dot = (a, b) => a.reduce((s, x, i) => s + x * b[i], 0);\n\n// The roots: every (±1, ±1, 0, 0, 0, 0, 0, 0) in any order, 112 of them,\n// and every (±1/2)^8 with an even number of minus signs, 128 more.\nconst ROOTS = [];\nfor (let i = 0; i \u003c 8; i++)\n  for (let j = i + 1; j \u003c 8; j++)\n    for (let s = 0; s \u003c 4; s++) {\n      const v = new Array(8).fill(0);\n      v[i] = s & 1 ? -1 : 1;\n      v[j] = s & 2 ? -1 : 1;\n      ROOTS.push(v);\n    }\nfor (let m = 0; m \u003c 256; m++) {\n  let neg = 0;\n  for (let k = 0; k \u003c 8; k++) neg += (m >> k) & 1;\n  if (neg % 2 === 0) ROOTS.push([...Array(8)].map((_, k) => ((m >> k) & 1 ? -0.5 : 0.5)));\n}\nconst NV = ROOTS.length;\nconst RF = new Float64Array(NV * 8);\nROOTS.forEach((r, i) => r.forEach((x, k) => (RF[i * 8 + k] = x)));\n\n// Two roots are joined when they stand sqrt 2 apart, when their dot product\n// is 1: 56 edges at each vertex, 6720 in all.\nconst EDGE = [];\nfor (let i = 0; i \u003c NV; i++) for (let j = i + 1; j \u003c NV; j++) if (dot(ROOTS[i], ROOTS[j]) === 1) EDGE.push(i, j);\nconst NE = EDGE.length / 2;\nconst EI = Uint16Array.from(EDGE);\n\n// The simple roots of E8 (Bourbaki's numbering): a1 is the spinor root, a2\n// hangs off a4, and a1 a3 a4 a5 a6 a7 a8 is the long arm.\nconst e = (i, s = 1, j = -1, t = 0) => [...Array(8)].map((_, k) => (k === i ? s : k === j ? t : 0));\nconst SIMPLE = [[0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5], e(0, 1, 1, 1), e(1, 1, 0, -1), e(2, 1, 1, -1), e(3, 1, 2, -1), e(4, 1, 3, -1), e(5, 1, 4, -1), e(6, 1, 5, -1)];\n\n// The Coxeter plane of a simply laced root system from its simple roots\n// (Steinberg): colour the Dynkin diagram black and white, take the\n// Perron-Frobenius vector x of the diagram, and the plane is spanned by the\n// sum of x_i a_i over the black roots and the same sum over the white ones.\n// The product of all the reflections turns it by one h-th of a turn.\nfunction coxeterPlane(S) {\n  const k = S.length, adj = S.map((a) => S.map((b) => (dot(a, b) === -1 ? 1 : 0)));\n  const col = new Array(k).fill(-1), stack = [0];\n  col[0] = 0;\n  while (stack.length) {\n    const i = stack.pop();\n    for (let j = 0; j \u003c k; j++) if (adj[i][j] && col[j] \u003c 0) (col[j] = 1 - col[i]), stack.push(j);\n  }\n  let x = new Array(k).fill(1), lam = 0;\n  for (let it = 0; it \u003c 600; it++) {\n    const y = x.map((xi, i) => 2 * xi + adj[i].reduce((s, a, j) => s + a * x[j], 0));\n    lam = sqrt(dot(y, y)) - 2;\n    x = y.map((v) => v / (lam + 2));\n  }\n  const u = new Array(8).fill(0), w = new Array(8).fill(0);\n  S.forEach((a, i) => a.forEach((ai, d) => ((col[i] ? w : u)[d] += x[i] * ai)));\n  const nu = sqrt(dot(u, u));\n  for (let d = 0; d \u003c 8; d++) u[d] /= nu;\n  const pr = dot(w, u);\n  for (let d = 0; d \u003c 8; d++) w[d] -= pr * u[d];\n  const nw = sqrt(dot(w, w));\n  // The diagram's largest eigenvalue is 2 cos(pi / h), h the Coxeter number.\n  return [u, w.map((v) => v / nw), round(PI / Math.acos(lam / 2))];\n}\n\n// The round: E8 (30-fold), then down the chain E8 > E7 > E6 > D5 > D4 one\n// node of the diagram at a time (18, 12, 8 and 6-fold), up through D6\n// (10-fold) and back.\nconst STOPS = [SIMPLE, SIMPLE.slice(0, 7), SIMPLE.slice(0, 6), SIMPLE.slice(1, 6), SIMPLE.slice(1, 5), SIMPLE.slice(1, 7)].map(coxeterPlane);\nconst NS = STOPS.length;\n\n// Each swing is the shortest way from one plane to the next (a geodesic in\n// the Grassmannian): the two principal angles between the planes, turned\n// through together. The frame carries its own turn within the plane from\n// one swing to the next, so the windows never jump.\nfunction svd2(a, b, c, d) {\n  const E = (a + d) / 2, F = (a - d) / 2, G = (c + b) / 2, H = (c - b) / 2;\n  const Q = hypot(E, H), R = hypot(F, G), a1 = atan2(G, F), a2 = atan2(H, E);\n  // C = rot(phi) diag(Q + R, Q - R) rot(theta)\n  return { s1: Q + R, s2: Q - R, phi: (a2 + a1) / 2, th: (a2 - a1) / 2 };\n}\nconst comb = (p, q, cp, cq) => p.map((x, i) => cp * x + cq * q[i]);\n// Each stop is shown turned so a vertex of its outer polygon points straight\n// up; the turn is picked among the h equal ones to be the nearest to the\n// last, and the swing eases from one to the next.\nfunction upright(u, v, h, near) {\n  let best = 0, a = 0;\n  for (const r of ROOTS) {\n    const x = dot(r, u), y = dot(r, v), q = hypot(x, y);\n    if (q > best + 1e-9) (best = q), (a = atan2(y, x));\n  }\n  const t = -PI / 2 - a, step = (2 * PI) / h;\n  return t + round((near - t) / step) * step;\n}\nconst SEG = [];\nlet F = STOPS[0], turn = upright(F[0], F[1], 30, 0);\nfor (let k = 0; k \u003c NS; k++) {\n  let [v1, v2, h] = STOPS[(k + 1) % NS];\n  const [f1, f2] = F;\n  if (dot(f1, v1) * dot(f2, v2) - dot(f1, v2) * dot(f2, v1) \u003c 0) v2 = v2.map((x) => -x);\n  const { s1, s2, phi, th } = svd2(dot(f1, v1), dot(f1, v2), dot(f2, v1), dot(f2, v2));\n  const ca = cos(phi), sa = sin(phi), cb = cos(-th), sb = sin(-th);\n  // Principal vectors: P = F rot(phi), Q = V rot(theta)^T.\n  const p = [comb(f1, f2, ca, sa), comb(f1, f2, -sa, ca)];\n  const q = [comb(v1, v2, cb, sb), comb(v1, v2, -sb, cb)];\n  const ang = [], n = [];\n  [s1, s2].forEach((s, i) => {\n    const t = comb(q[i], p[i], 1, -cl(s, -1, 1)), nt = sqrt(dot(t, t));\n    ang.push(Math.acos(cl(s, -1, 1)));\n    n.push(nt > 1e-9 ? t.map((x) => x / nt) : new Array(8).fill(0));\n  });\n  F = [comb(q[0], q[1], cos(phi), -sin(phi)), comb(q[0], q[1], sin(phi), cos(phi))];\n  // Back on the Coxeter plane the frame may come round mirrored; the\n  // picture there is symmetric under the mirror, so turning a vertex up\n  // closes the loop all the same.\n  const next = upright(F[0], F[1], h, turn);\n  SEG.push({ p, n, ang, phi, t0: turn, t1: next });\n  turn = next;\n}\n\n// Where the frame stands at phase s (in stops): hold 5/12 of each stop, then\n// swing to the next with a smooth start and end. Returns the turn.\nconst HOLD = 5 / 12;\nfunction frameAt(s, out) {\n  const n = ((s % NS) + NS) % NS, k = floor(n), f = n - k, G = SEG[k];\n  let m = cl((f - HOLD) / (1 - HOLD), 0, 1);\n  m = m * m * m * (m * (m * 6 - 15) + 10);\n  const c1 = cos(m * G.ang[0]), s1 = sin(m * G.ang[0]), c2 = cos(m * G.ang[1]), s2 = sin(m * G.ang[1]);\n  const cp = cos(G.phi), sp = sin(G.phi);\n  for (let d = 0; d \u003c 8; d++) {\n    const g1 = c1 * G.p[0][d] + s1 * G.n[0][d], g2 = c2 * G.p[1][d] + s2 * G.n[1][d];\n    out[d] = g1 * cp - g2 * sp;\n    out[8 + d] = g1 * sp + g2 * cp;\n  }\n  return G.t0 + (G.t1 - G.t0) * m;\n}\n\n// Eight rings of 30 on the Coxeter plane; each vertex keeps the colour of\n// its ring wherever the swings carry it.\nconst RING = new Uint8Array(NV);\n{\n  const [u, v] = STOPS[0], rr = ROOTS.map((r) => hypot(dot(r, u), dot(r, v)));\n  const sorted = [...rr].sort((a, b) => a - b), levels = sorted.filter((x, i) => i === 0 || x - sorted[i - 1] > 1e-3);\n  rr.forEach((x, i) => (RING[i] = levels.filter((l) => l \u003c x + 1e-3).length - 1));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = {\n    ph: 0, lead: 1, hue: -1, ew: 1, snap: null,\n    buf: new Float32Array(W * HV * 2 * 3), fr: new Float64Array(16),\n    px: new Float32Array(NV), py: new Float32Array(NV),\n    vc: new Float32Array(NV * 3), ec: new Float32Array(NE * 3), rc: new Float32Array(8 * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.lead = cl(k[3], 1, 5);\n  P.ew = cl(k[2], -1, 1);\n  const hue = k[0] || 0;\n  if (hue !== P.hue) {\n    P.hue = hue;\n    for (let r = 0; r \u003c 8; r++) hsv(0.15 + hue - r * 0.095, 0.95 - 0.02 * r, 1, P.rc, r * 3);\n    for (let i = 0; i \u003c NV; i++) for (let c = 0; c \u003c 3; c++) P.vc[i * 3 + c] = P.rc[RING[i] * 3 + c];\n    for (let j = 0; j \u003c NE; j++) for (let c = 0; c \u003c 3; c++) P.ec[j * 3 + c] = (P.vc[EI[2 * j] * 3 + c] + P.vc[EI[2 * j + 1] * 3 + c]) / 2;\n  }\n  if (P.snap) {\n    P.snap.t += d;\n    const u = cl(P.snap.t / P.snap.T, 0, 1), m = u * u * (3 - 2 * u);\n    P.ph = P.snap.a + (P.snap.b - P.snap.a) * m;\n    if (u >= 1) P.snap = null;\n  } else {\n    P.ph = (P.ph + (d * sp) / 12) % NS;\n    // K1: run back or on to the nearer Coxeter plane, 0.4 s a stop.\n    if (input.btnPressed && input.btnPressed[0]) {\n      const b = round(P.ph / NS) * NS;\n      P.snap = { a: P.ph, b, t: 0, T: max(0.8, abs(b - P.ph) * 0.4) };\n    }\n  }\n}\n\n// One window: project the 240 roots onto the plane, draw the 6720 edges as\n// additive light, then the vertices on top.\nfunction view(P, ph, y0) {\n  const fr = P.fr, buf = P.buf, px = P.px, py = P.py;\n  const a = frameAt(ph, fr), ca = cos(a), sa = sin(a);\n  let rmax = 0;\n  for (let i = 0; i \u003c NV; i++) {\n    let x = 0, y = 0;\n    for (let d = 0, o = i * 8; d \u003c 8; d++) (x += RF[o + d] * fr[d]), (y += RF[o + d] * fr[8 + d]);\n    px[i] = ca * x - sa * y;\n    py[i] = sa * x + ca * y;\n    rmax = max(rmax, px[i] * px[i] + py[i] * py[i]);\n  }\n  const sc = RAD / sqrt(rmax), cy = y0 + 31.5;\n  for (let i = 0; i \u003c NV; i++) (px[i] = CX + px[i] * sc - 0.5), (py[i] = cy + py[i] * sc - 0.5);\n  const ew = P.ew \u003c= -1 ? 0 : 0.012 * (P.ew + 1) * (P.ew + 1), ec = P.ec, W3 = W * 3;\n  // RAD keeps every point a pixel inside the window, so no line needs clipping.\n  if (ew > 0)\n    for (let j = 0; j \u003c NE; j++) {\n      const i0 = EI[2 * j], i1 = EI[2 * j + 1];\n      let x = px[i0], y = py[i0];\n      const dx = px[i1] - x, dy = py[i1] - y, adx = dx \u003c 0 ? -dx : dx, ady = dy \u003c 0 ? -dy : dy;\n      const n = ceil(adx > ady ? adx : ady) || 1, w = (ew * sqrt(dx * dx + dy * dy)) / n;\n      const r = ec[j * 3] * w, g = ec[j * 3 + 1] * w, b = ec[j * 3 + 2] * w, sx = dx / n, sy = dy / n;\n      for (let s = 0; s \u003c= n; s++, x += sx, y += sy) {\n        const xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n        const w11 = fx * fy, w10 = fx - w11, w01 = fy - w11, w00 = 1 - fx - w01;\n        buf[q] += r * w00;\n        buf[q + 1] += g * w00;\n        buf[q + 2] += b * w00;\n        buf[q + 3] += r * w10;\n        buf[q + 4] += g * w10;\n        buf[q + 5] += b * w10;\n        buf[q + W3] += r * w01;\n        buf[q + W3 + 1] += g * w01;\n        buf[q + W3 + 2] += b * w01;\n        buf[q + W3 + 3] += r * w11;\n        buf[q + W3 + 4] += g * w11;\n        buf[q + W3 + 5] += b * w11;\n      }\n    }\n  // With the web turned off the vertices burn brighter.\n  const vc = P.vc, vw = 0.6 + 0.5 * max(0, -P.ew);\n  for (let i = 0; i \u003c NV; i++) {\n    const x = px[i], y = py[i], xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n    const w11 = fx * fy * vw, w10 = fx * vw - w11, w01 = fy * vw - w11, w00 = vw - fx * vw - w01;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = vc[i * 3 + c];\n      buf[q + c] += v * w00;\n      buf[q + 3 + c] += v * w10;\n      buf[q + W3 + c] += v * w01;\n      buf[q + W3 + 3 + c] += v * w11;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf;\n  buf.fill(0);\n  view(P, P.ph, 0);\n  view(P, P.ph + P.lead, HV);\n  for (let p = 0, y = 0; y \u003c 2 * HV; y++)\n    for (let x = 0; x \u003c W; x++, p += 3)\n      display.setPixel(x, y, 255 * (1 - exp(-1.6 * buf[p])), 255 * (1 - exp(-1.6 * buf[p + 1])), 255 * (1 - exp(-1.6 * buf[p + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes."},{"name":"Edges","min":-1,"max":1,"about":"How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white."},{"name":"Plane","min":1,"max":5,"about":"How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind."}],"start":[0,2,0,1],"measures":{"motion":0.1027,"detail":0.0626,"edges":0.2381,"complexity":1.7381,"coverage":0.5762,"colour":0.1523,"drift":0.0443},"knobResponse":[0.101,0.0579,0.4228,0.087]},{"slug":"guilloche","title":"Guilloché","family":"line","round":16,"note":"장미 기관으로 깎은 은판의 보리알 띠와 물결 띠가 패널 높이의 타원으로 서고, 등불이 돌면 그 쪽을 향한 홈만 금빛으로 번쩍여요. K1 을 누르면 칼끝이 귀퉁이에서 가운데로 들어오며 판을 새 무늬로 다시 깎아요.","idea":"An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.","buttons":"K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.","code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","layer":{"id":"layer-guilloche","type":"code","name":"guilloche","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"Silver at 0, then champagne, yellow gold and rose gold at the far end."},{"name":"Light","min":0,"max":4,"about":"How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift."},{"name":"Lobes","min":12,"max":36,"about":"Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer."},{"name":"Phasing","min":0,"max":0.5,"about":"How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn."}],"start":[0,2,12,0.06],"measures":{"motion":0.3271,"detail":0.2382,"edges":0.6848,"complexity":2.494,"coverage":1,"colour":0.0828,"drift":0.1447},"knobResponse":[0.1324,0.1841,0.2378,0.2082]},{"slug":"hair-gloss","title":"Hair Gloss","family":"cosmetic","round":34,"note":"판 전체에 윤기 나는 긴 머리카락 230가닥이 위에서 끝까지 늘어져 산들바람에 흔들려요. 가닥이 빛과 눈의 반벡터에 직각인 줄에 흰 광택 띠가 서고 그 아래로 머리색의 둘째 띠가 따라와 머리가 흔들릴 때마다 오르내리며, 9초마다 보이지 않는 빗이 내려가 빗살 자리를 가르고 지나간 자리를 더 매끄럽고 반짝이게 해요.","idea":"Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.","buttons":"K1 tap sends the comb through now.","code":"// ===== Patternflow pattern =====\n// Title:   Hair Gloss\n// Family:  cosmetic\n// Idea:    Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the shine band of glossy hair in haircare displays; the highlights are a fibre highlight (James Kajiya and Timothy Kay, 1989), the white one shifted toward the root and a tinted one toward the tip (Stephen Marschner and others, 2003)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1\n//\n// Knob 1: Hue. The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue.\n// Knob 2: Speed. At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Wave. At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1.\n// Knob 4: Shine. How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it.\n// Buttons: K1 tap sends the comb through now.\n\nconst W = 64, H = 128, N = 230, Y0 = -2, ROWS = 160;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The sheet of hair leans toward the eye by tz per row. The primary highlight\n// sits where a strand's tangent is square to the half vector, tz about 0.3.\nconst TZ0 = -HY / HZ;\n\n// A smooth wobble along one strand: three sines at random pitch.\nfunction wobble(out, o) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c ROWS; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, wave: 0, shine: 0, begun: false, t: 0,\n    comb: -10, combing: false, combWait: 1.2, teeth: 0,\n    X0: new Float32Array(N), B: new Float32Array(N), SL: new Float32Array(N), D: new Float32Array(N), END: new Float32Array(N), TO: new Float32Array(N),\n    NX: new Float32Array(N * ROWS), NT: new Float32Array(N * ROWS),\n    fz: new Float32Array(ROWS).fill(1), part: new Float32Array(ROWS),\n    sx: new Float32Array(ROWS), tz: new Float32Array(ROWS), ws: new Float32Array(ROWS), wc: new Float32Array(ROWS),\n    acc: new Float32Array(W * H * 3), wt: new Float32Array(W * H), c: [0, 0, 0], body: [0, 0, 0], tint: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let i = 0; i \u003c N; i++) {\n    S.X0[i] = -7 + (78 * (i + random())) / N;\n    S.B[i] = 0.28 + 0.72 * random() ** 0.6;\n    S.TO[i] = (random() - 0.5) * 0.12;\n    S.SL[i] = (random() - 0.5) * 0.025;\n    S.D[i] = (random() - 0.5) * 0.6;\n    S.END[i] = 112 + 40 * random();\n    wobble(S.NX, i * ROWS);\n    wobble(S.NT, i * ROWS);\n  }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.t += ds;\n  // The comb: every 9 s at Speed 2 it runs down from above the panel to past\n  // the ends in 2.4 s. Hair it has passed lies smooth and loosens again over\n  // about 6 s; the partings behind its teeth close over about 1.2 s.\n  const was = S.comb;\n  if (!S.combing) {\n    S.combWait -= ds;\n    if (S.combWait \u003c= 0) startComb(S);\n  } else {\n    S.comb += (ds * 170) / 2.4;\n    if (S.comb > 160) {\n      S.combing = false;\n      S.combWait = 6.6;\n    }\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0;\n    S.fz[r] += (1 - S.fz[r]) * (1 - exp(-ds / 6));\n    S.part[r] *= exp(-ds / 1.2);\n    // The teeth bite over the 8 rows behind the comb's edge.\n    if (S.combing && y \u003c S.comb) {\n      const a = sm(0, 8, S.comb - y);\n      S.fz[r] = min(S.fz[r], 1 - 0.55 * a);\n      S.part[r] = max(S.part[r], a * (y >= was - 9 ? 1 : 0));\n    }\n  }\n}\n\nfunction startComb(S) {\n  S.combing = true;\n  S.comb = -10;\n  S.teeth = random() * 7;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wave = cl(k[2], 0, 1);\n  S.shine = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open with the band a third of the way down and rising.\n    S.t = 1.5;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.combing) startComb(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { acc, wt, sx, tz, ws, wc, fz, part, NX, NT, X0, B, SL, D, END, c, body, tint } = S;\n  acc.fill(0);\n  wt.fill(0);\n  const t = S.t, wv = S.wave;\n  // Per row: the breeze, a wave running down the hair that grows toward the\n  // ends; the lean of the sheet, which puts the shine band where tz meets\n  // TZ0 and slides it up and down as the hair sways; and the waves of wavy\n  // hair, sideways and in depth a quarter turn apart.\n  const yb = 46 + 13 * sin(2 * PI * (t / 6.5)) + 4 * sin(2 * PI * (t / 2.9) + 1);\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0, reach = ((y + 30) / 160) ** 1.6;\n    sx[r] = 3.2 * reach * sin(2 * PI * (y / 120 - t / 4.6)) + 1.1 * reach * sin(2 * PI * (y / 45 - t / 2.3) + 2);\n    const a = (2 * PI * y) / 44;\n    tz[r] = TZ0 + 0.016 * (1 - 0.6 * wv) * (yb - y) + 0.3 * wv * sin(a + 0.6 * sin(2 * PI * (t / 7.3)));\n    ws[r] = 3 * wv * cos(a);\n    wc[r] = 3 * wv * -sin(a);\n  }\n  const sh = S.shine, p1 = 0.5 * 320 * 4 ** sh, k1 = 0.9 + 0.4 * sh, p2 = 0.4 * p1, k2 = 0.45 + 0.15 * sh, k0 = 0.24 * (1 - sh);\n  const teeth = S.teeth;\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * ROWS, cd = cos(D[i]), sd = sin(D[i]), end = END[i], b = B[i], to = S.TO[i], x0 = X0[i], sl = SL[i];\n    let px = 0;\n    const last = min(H - 1, floor(end));\n    for (let r = 0; r \u003c= last - Y0; r++) {\n      const y = r + Y0, f = fz[r];\n      let x = x0 + sl * y + sx[r] + ws[r] * cd + wc[r] * sd + 0.4 * f * NX[o + r];\n      // Behind the comb the strands part round its teeth, 7 LEDs apart: each\n      // gap of 7 closes to 5.7, leaving a dark parting 1.3 LEDs wide.\n      const m = part[r];\n      if (m > 0.01) {\n        const u = (x - teeth) / 7, e = u - floor(u) - 0.5;\n        x -= m * 1.3 * e;\n      }\n      const tx = x - px;\n      px = x;\n      if (y \u003c 0) continue;\n      const z = tz[r] + to * f + 0.06 * f * NT[o + r];\n      const inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv;\n      // The primary highlight is shifted toward the root, the secondary,\n      // tinted by the hair, toward the tip.\n      const t1 = th - 0.05, t2 = th + 0.11;\n      const smooth = 1 + 0.45 * (1 - f);\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      // A sharp band and, wider and weaker, the sheen round it that a duller\n      // finish spreads out.\n      const s1 = smooth * (k1 * exp(p1 * l1) + k0 * exp(5 * l1)), s2 = smooth * k2 * exp(p2 * log(max(1e-6, 1 - t2 * t2)));\n      const lam = (0.55 * z + 0.82) / sqrt(1 + z * z), dif = b * (0.3 + 0.7 * max(0, lam));\n      const tip = cl((end - y) / 7, 0, 1), w0 = tip * (0.4 + 0.6 * tip);\n      const xi = floor(x), fr = x - xi, q = y * W + xi;\n      if (xi >= 0 && xi \u003c W) {\n        const w = (1 - fr) * w0;\n        acc[q * 3] += dif * w;\n        acc[q * 3 + 1] += s2 * b * w;\n        acc[q * 3 + 2] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q] += w;\n      }\n      if (xi + 1 >= 0 && xi + 1 \u003c W) {\n        const w = fr * w0;\n        acc[q * 3 + 3] += dif * w;\n        acc[q * 3 + 4] += s2 * b * w;\n        acc[q * 3 + 5] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q + 1] += w;\n      }\n    }\n  }\n  // Each LED: the mean of the strands over it, darker where they are fewer\n  // than 2.4. Channel 0 holds the body, 1 the tinted secondary, 2 the white\n  // primary.\n  // Orange and yellow read brown and olive at mid level on the panel, so\n  // round hue 0.12 the hair is lifted toward copper and honey blonde.\n  const h = S.hue + 0.76, hh = h - floor(h), warm = max(0, 1 - Math.abs(hh - 0.12) / 0.11);\n  hsv(h, 0.78 - 0.18 * warm, 1 + 0.6 * warm, body);\n  hsv(h, 0.8 - 0.2 * warm, 1, tint);\n  const RHO = (N / 78) * 0.8;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO);\n      const dv = acc[q * 3] / n, s2 = acc[q * 3 + 1] / n, s1 = acc[q * 3 + 2] / n;\n      for (let ch = 0; ch \u003c 3; ch++) c[ch] = 0.52 * dv * body[ch] + 0.9 * s2 * tint[ch] + s1 * (0.8 + 0.2 * tint[ch]);\n      display.setPixel(x, y, round(255 * (1 - exp(-1.4 * c[0]))), round(255 * (1 - exp(-1.4 * c[1]))), round(255 * (1 - exp(-1.4 * c[2]))));\n    }\n}\n","layer":{"id":"layer-hair-gloss","type":"code","name":"hair-gloss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hair Gloss\n// Family:  cosmetic\n// Idea:    Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the shine band of glossy hair in haircare displays; the highlights are a fibre highlight (James Kajiya and Timothy Kay, 1989), the white one shifted toward the root and a tinted one toward the tip (Stephen Marschner and others, 2003)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1\n//\n// Knob 1: Hue. The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue.\n// Knob 2: Speed. At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Wave. At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1.\n// Knob 4: Shine. How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it.\n// Buttons: K1 tap sends the comb through now.\n\nconst W = 64, H = 128, N = 230, Y0 = -2, ROWS = 160;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The sheet of hair leans toward the eye by tz per row. The primary highlight\n// sits where a strand's tangent is square to the half vector, tz about 0.3.\nconst TZ0 = -HY / HZ;\n\n// A smooth wobble along one strand: three sines at random pitch.\nfunction wobble(out, o) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c ROWS; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, wave: 0, shine: 0, begun: false, t: 0,\n    comb: -10, combing: false, combWait: 1.2, teeth: 0,\n    X0: new Float32Array(N), B: new Float32Array(N), SL: new Float32Array(N), D: new Float32Array(N), END: new Float32Array(N), TO: new Float32Array(N),\n    NX: new Float32Array(N * ROWS), NT: new Float32Array(N * ROWS),\n    fz: new Float32Array(ROWS).fill(1), part: new Float32Array(ROWS),\n    sx: new Float32Array(ROWS), tz: new Float32Array(ROWS), ws: new Float32Array(ROWS), wc: new Float32Array(ROWS),\n    acc: new Float32Array(W * H * 3), wt: new Float32Array(W * H), c: [0, 0, 0], body: [0, 0, 0], tint: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let i = 0; i \u003c N; i++) {\n    S.X0[i] = -7 + (78 * (i + random())) / N;\n    S.B[i] = 0.28 + 0.72 * random() ** 0.6;\n    S.TO[i] = (random() - 0.5) * 0.12;\n    S.SL[i] = (random() - 0.5) * 0.025;\n    S.D[i] = (random() - 0.5) * 0.6;\n    S.END[i] = 112 + 40 * random();\n    wobble(S.NX, i * ROWS);\n    wobble(S.NT, i * ROWS);\n  }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.t += ds;\n  // The comb: every 9 s at Speed 2 it runs down from above the panel to past\n  // the ends in 2.4 s. Hair it has passed lies smooth and loosens again over\n  // about 6 s; the partings behind its teeth close over about 1.2 s.\n  const was = S.comb;\n  if (!S.combing) {\n    S.combWait -= ds;\n    if (S.combWait \u003c= 0) startComb(S);\n  } else {\n    S.comb += (ds * 170) / 2.4;\n    if (S.comb > 160) {\n      S.combing = false;\n      S.combWait = 6.6;\n    }\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0;\n    S.fz[r] += (1 - S.fz[r]) * (1 - exp(-ds / 6));\n    S.part[r] *= exp(-ds / 1.2);\n    // The teeth bite over the 8 rows behind the comb's edge.\n    if (S.combing && y \u003c S.comb) {\n      const a = sm(0, 8, S.comb - y);\n      S.fz[r] = min(S.fz[r], 1 - 0.55 * a);\n      S.part[r] = max(S.part[r], a * (y >= was - 9 ? 1 : 0));\n    }\n  }\n}\n\nfunction startComb(S) {\n  S.combing = true;\n  S.comb = -10;\n  S.teeth = random() * 7;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wave = cl(k[2], 0, 1);\n  S.shine = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open with the band a third of the way down and rising.\n    S.t = 1.5;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.combing) startComb(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { acc, wt, sx, tz, ws, wc, fz, part, NX, NT, X0, B, SL, D, END, c, body, tint } = S;\n  acc.fill(0);\n  wt.fill(0);\n  const t = S.t, wv = S.wave;\n  // Per row: the breeze, a wave running down the hair that grows toward the\n  // ends; the lean of the sheet, which puts the shine band where tz meets\n  // TZ0 and slides it up and down as the hair sways; and the waves of wavy\n  // hair, sideways and in depth a quarter turn apart.\n  const yb = 46 + 13 * sin(2 * PI * (t / 6.5)) + 4 * sin(2 * PI * (t / 2.9) + 1);\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0, reach = ((y + 30) / 160) ** 1.6;\n    sx[r] = 3.2 * reach * sin(2 * PI * (y / 120 - t / 4.6)) + 1.1 * reach * sin(2 * PI * (y / 45 - t / 2.3) + 2);\n    const a = (2 * PI * y) / 44;\n    tz[r] = TZ0 + 0.016 * (1 - 0.6 * wv) * (yb - y) + 0.3 * wv * sin(a + 0.6 * sin(2 * PI * (t / 7.3)));\n    ws[r] = 3 * wv * cos(a);\n    wc[r] = 3 * wv * -sin(a);\n  }\n  const sh = S.shine, p1 = 0.5 * 320 * 4 ** sh, k1 = 0.9 + 0.4 * sh, p2 = 0.4 * p1, k2 = 0.45 + 0.15 * sh, k0 = 0.24 * (1 - sh);\n  const teeth = S.teeth;\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * ROWS, cd = cos(D[i]), sd = sin(D[i]), end = END[i], b = B[i], to = S.TO[i], x0 = X0[i], sl = SL[i];\n    let px = 0;\n    const last = min(H - 1, floor(end));\n    for (let r = 0; r \u003c= last - Y0; r++) {\n      const y = r + Y0, f = fz[r];\n      let x = x0 + sl * y + sx[r] + ws[r] * cd + wc[r] * sd + 0.4 * f * NX[o + r];\n      // Behind the comb the strands part round its teeth, 7 LEDs apart: each\n      // gap of 7 closes to 5.7, leaving a dark parting 1.3 LEDs wide.\n      const m = part[r];\n      if (m > 0.01) {\n        const u = (x - teeth) / 7, e = u - floor(u) - 0.5;\n        x -= m * 1.3 * e;\n      }\n      const tx = x - px;\n      px = x;\n      if (y \u003c 0) continue;\n      const z = tz[r] + to * f + 0.06 * f * NT[o + r];\n      const inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv;\n      // The primary highlight is shifted toward the root, the secondary,\n      // tinted by the hair, toward the tip.\n      const t1 = th - 0.05, t2 = th + 0.11;\n      const smooth = 1 + 0.45 * (1 - f);\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      // A sharp band and, wider and weaker, the sheen round it that a duller\n      // finish spreads out.\n      const s1 = smooth * (k1 * exp(p1 * l1) + k0 * exp(5 * l1)), s2 = smooth * k2 * exp(p2 * log(max(1e-6, 1 - t2 * t2)));\n      const lam = (0.55 * z + 0.82) / sqrt(1 + z * z), dif = b * (0.3 + 0.7 * max(0, lam));\n      const tip = cl((end - y) / 7, 0, 1), w0 = tip * (0.4 + 0.6 * tip);\n      const xi = floor(x), fr = x - xi, q = y * W + xi;\n      if (xi >= 0 && xi \u003c W) {\n        const w = (1 - fr) * w0;\n        acc[q * 3] += dif * w;\n        acc[q * 3 + 1] += s2 * b * w;\n        acc[q * 3 + 2] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q] += w;\n      }\n      if (xi + 1 >= 0 && xi + 1 \u003c W) {\n        const w = fr * w0;\n        acc[q * 3 + 3] += dif * w;\n        acc[q * 3 + 4] += s2 * b * w;\n        acc[q * 3 + 5] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q + 1] += w;\n      }\n    }\n  }\n  // Each LED: the mean of the strands over it, darker where they are fewer\n  // than 2.4. Channel 0 holds the body, 1 the tinted secondary, 2 the white\n  // primary.\n  // Orange and yellow read brown and olive at mid level on the panel, so\n  // round hue 0.12 the hair is lifted toward copper and honey blonde.\n  const h = S.hue + 0.76, hh = h - floor(h), warm = max(0, 1 - Math.abs(hh - 0.12) / 0.11);\n  hsv(h, 0.78 - 0.18 * warm, 1 + 0.6 * warm, body);\n  hsv(h, 0.8 - 0.2 * warm, 1, tint);\n  const RHO = (N / 78) * 0.8;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO);\n      const dv = acc[q * 3] / n, s2 = acc[q * 3 + 1] / n, s1 = acc[q * 3 + 2] / n;\n      for (let ch = 0; ch \u003c 3; ch++) c[ch] = 0.52 * dv * body[ch] + 0.9 * s2 * tint[ch] + s1 * (0.8 + 0.2 * tint[ch]);\n      display.setPixel(x, y, round(255 * (1 - exp(-1.4 * c[0]))), round(255 * (1 - exp(-1.4 * c[1]))), round(255 * (1 - exp(-1.4 * c[2]))));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Wave","min":0,"max":1,"about":"At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1."},{"name":"Shine","min":-1,"max":1,"about":"How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it."}],"start":[0,2,0,0.06],"measures":{"motion":0.1831,"detail":0.0305,"edges":0.0431,"complexity":2.5214,"coverage":0.9825,"colour":0.1258,"drift":0.1122},"knobResponse":[0.2098,0.1537,0.1722,0.1466]},{"slug":"hair-oil","title":"Hair Oil","family":"cosmetic","round":37,"note":"청록 머리결이 위에서 아래까지 흘러내리며 두 번 갈라져 끝에서는 스무 묶음이 되고, 그 위를 카지야-케이 광택 띠가 오르내려요. 금색 오일 방울이 위쪽에 떨어져 가닥을 따라 미끄러지다 갈림길에서 둘로 나뉘고, 방울이 지나간 가닥은 한 톤 짙어지며 광택이 여섯 배 날카로워진 채 13초에 반쯤 흐려져요. K3 은 1초에 떨어지는 방울을 4개까지 늘리고, 누르면 방울 12개가 위에서 한꺼번에 흘러내려요.","idea":"A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.","buttons":"K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.","code":"// ===== Patternflow pattern =====\n// Title:   Hair Oil\n// Family:  cosmetic\n// Idea:    A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after hair oil serums, with the strands lit by the Kajiya-Kay model (James Kajiya and Timothy Kay, 1989)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1\n//\n// Knob 1: Hue. The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness.\n// Knob 2: Speed. At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Drops. Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in.\n// Knob 4: Wave. At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28.\n// Buttons: K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.\n\nconst W = 64, H = 128, NB = 110, NF = 150;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\nconst TZ0 = -HY / HZ;\n\n// Locks: five across the panel near the top, each parting in two at about\n// row 53 and again at about row 92, so 20 fine locks at the ends.\nconst F1 = [45, 62], F2 = [84, 100];\n// Oil: a drop's slide speed in rows a second at Speed 2 on a strand hanging\n// straight down, the oil it leaves per row, the volume below which it soaks\n// in, and how long the gloss takes to fall to 1/e.\nconst V0 = 40, LOSS = 0.0045, VMIN = 0.08, TAU = 12, PULL = 0.55;\n\nfunction wobble(out, o, n) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c n; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, rate: 0.5, wave: 0.06, t: 0, warm: false, acc: 0,\n    // Front strands, sorted by root position, with their locks at three levels.\n    fx0: new Float32Array(NF), k0: new Int32Array(NF), k1: new Int32Array(NF), k2: new Int32Array(NF),\n    fbr: new Float32Array(NF), fto: new Float32Array(NF), bp: new Int32Array(NF), bs: new Int32Array(NF),\n    c0: new Float32Array(5), c1: new Float32Array(10), c2: new Float32Array(20), lph: new Float32Array(5),\n    bx0: new Float32Array(NB), bb: new Float32Array(NB), bto: new Float32Array(NB),\n    NX: new Float32Array((NF + NB) * H), NT: new Float32Array((NF + NB) * H),\n    xs: new Float32Array(NF * H), zs: new Float32Array(NF * H), ty: new Float32Array(NF * H), G: new Float32Array(NF * H),\n    f1: new Float32Array(H), f2: new Float32Array(H), lph1: new Float32Array(10), lph2: new Float32Array(20),\n    sa: new Float32Array(20 * H), ca: new Float32Array(20 * H), reach: new Float32Array(H), pullr: new Float32Array(H),\n    sx: new Float32Array(H), tz: new Float32Array(H), ws: new Float32Array(H), wz: new Float32Array(H),\n    drops: [], born: [],\n    ab: new Float32Array(W * H * 5), wt: new Float32Array(W * H), gl: new Float32Array(W * H), fb: new Float32Array(W * H * 3),\n    body: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], oil: [0, 0, 0],\n  });\n  for (let i = 0; i \u003c NF; i++) S.fx0[i] = -4 + (72 * (i + random())) / NF;\n  for (let i = 0; i \u003c NF; i++) {\n    S.k0[i] = min(4, floor(((S.fx0[i] + 4) / 72) * 5));\n    S.fbr[i] = 0.35 + 0.65 * random() ** 0.6;\n    S.fto[i] = (random() - 0.5) * 0.1;\n    S.bs[i] = 8 + floor(random() * 4);\n    S.bp[i] = floor(random() * 11);\n  }\n  // Each lock parts into the halves of its strands, so a fork is a real fork.\n  const split = (kin, kout, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      const mem = [];\n      for (let i = 0; i \u003c NF; i++) if (kin[i] === k) mem.push(i);\n      const half = mem.length >> 1;\n      mem.forEach((i, m) => (kout[i] = 2 * k + (m \u003c half ? 0 : 1)));\n    }\n  };\n  split(S.k0, S.k1, 5);\n  split(S.k1, S.k2, 10);\n  const centre = (kk, c, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      let s = 0, m = 0;\n      for (let i = 0; i \u003c NF; i++) if (kk[i] === k) (s += S.fx0[i]), m++;\n      c[k] = m ? s / m : 0;\n    }\n  };\n  centre(S.k0, S.c0, 5);\n  centre(S.k1, S.c1, 10);\n  centre(S.k2, S.c2, 20);\n  for (let k = 0; k \u003c 5; k++) S.lph[k] = random() * 2 * PI;\n  for (let k = 0; k \u003c 10; k++) S.lph1[k] = S.lph[k >> 1] + (k & 1 ? 1 : -1) * (0.7 + 0.5 * random());\n  for (let k = 0; k \u003c 20; k++) S.lph2[k] = S.lph1[k >> 1] + (k & 1 ? 1 : -1) * (0.5 + 0.5 * random());\n  for (let i = 0; i \u003c NB; i++) {\n    S.bx0[i] = -5 + (74 * (i + random())) / NB;\n    S.bb[i] = 0.3 + 0.7 * random();\n    S.bto[i] = (random() - 0.5) * 0.14;\n  }\n  for (let i = 0; i \u003c NF + NB; i++) {\n    wobble(S.NX, i * H, H);\n    wobble(S.NT, i * H, H);\n  }\n}\n\n// Rows: the breeze running down the hair, the waves, and the lean of the\n// sheet toward the eye, which puts the shine band where tz meets TZ0.\nfunction rows(S) {\n  const t = S.t, wv = (S.wave + 1) / 2;\n  const yb = 44 + 12 * sin(2 * PI * (t / 7)) + 3 * sin(2 * PI * (t / 3.1) + 1);\n  for (let r = 0; r \u003c H; r++) {\n    const reach = ((r + 30) / 158) ** 1.6, a = (2 * PI * r) / 40;\n    S.sx[r] = 3 * reach * sin(2 * PI * (r / 120 - t / 4.6)) + reach * sin(2 * PI * (r / 45 - t / 2.3) + 2);\n    S.ws[r] = 4 * wv * sin(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.wz[r] = 0.32 * wv * cos(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.f1[r] = sm(F1[0], F1[1], r);\n    S.f2[r] = sm(F2[0], F2[1], r);\n    S.tz[r] = TZ0 + 0.015 * (1 - 0.5 * wv) * (yb - r);\n  }\n}\n\n// Where each front strand runs this frame, and how steeply.\n// Each lock waves in its own phase, and the two halves of a lock drift a\n// third of a turn apart past its fork, so the fork opens as a Y. The phase\n// of a strand depends only on its fine lock, so the sines are taken once a\n// row for each of the 20 fine locks.\nfunction geometry(S) {\n  const { xs, zs, ty, sx, tz, f1, f2, NX, NT, G, sa, ca, reach, pullr } = S, t = S.t, wv = (S.wave + 1) / 2, sway = 0.5 * sin(2 * PI * (t / 6.1));\n  for (let r = 0; r \u003c H; r++) {\n    reach[r] = ((r + 30) / 158) ** 1.6;\n    pullr[r] = PULL * sm(3, 32, r);\n  }\n  for (let k = 0; k \u003c 20; k++) {\n    const p0 = S.lph[k >> 2], p1 = S.lph1[k >> 1], p2 = S.lph2[k];\n    for (let r = 0; r \u003c H; r++) {\n      const a = (2 * PI * r) / 40 + sway + p0 + (p1 - p0) * f1[r] + (p2 - p1) * f2[r];\n      sa[k * H + r] = 4 * wv * sin(a);\n      ca[k * H + r] = 0.32 * wv * cos(a);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const x0 = S.fx0[i], c0 = S.c0[S.k0[i]], c1 = S.c1[S.k1[i]], c2 = S.c2[S.k2[i]], o = i * H, ko = S.k2[i] * H;\n    const lock = 1.2 * sin(2 * PI * (t / 3.7) + S.lph[S.k0[i]]), to = S.fto[i];\n    let px = 0;\n    for (let r = 0; r \u003c H; r++) {\n      const c = c0 + (c1 - c0) * f1[r] + (c2 - c1) * f2[r];\n      // Oil lays a strand smoother: its own wiggle shrinks by half.\n      const g = G[o + r], calm = g \u003c 0.06 ? 1 : 1 - 0.5 * sm(0.06, 0.6, g);\n      const x = x0 + pullr[r] * (c - x0) + sx[r] + sa[ko + r] + lock * reach[r] + 0.45 * calm * NX[o + r];\n      xs[o + r] = x;\n      const tx = r ? x - px : 0, z = tz[r] + ca[ko + r] + to + 0.07 * calm * NT[o + r];\n      zs[o + r] = z;\n      ty[o + r] = 1 / sqrt(tx * tx + 1 + z * z);\n      px = x;\n    }\n  }\n}\n\nfunction spawn(S, i, y, vol) {\n  if (S.drops.length \u003c 48) S.drops.push({ i, y, vol, v: 0, age: 0, soak: 0 });\n}\n\n// The front strand whose root lies nearest x.\nfunction strandAt(S, x) {\n  let best = 0, bd = 1e9;\n  for (let i = 0; i \u003c NF; i++) {\n    const d = abs(S.fx0[i] - x);\n    if (d \u003c bd) (bd = d), (best = i);\n  }\n  return best;\n}\n\n// A drop moves down its strand, wetting the strands within its radius on\n// every row it crosses; at a fork a drop with oil enough splits, half going\n// down the sibling lock.\nfunction slide(S, dp, ds) {\n  const { xs, ty, G } = S;\n  if (dp.soak > 0) {\n    dp.soak += ds;\n    return dp.soak \u003c 0.5;\n  }\n  dp.age += ds;\n  const r0 = cl(floor(dp.y), 0, H - 1);\n  const steep = ty[dp.i * H + r0] ** 4;\n  const vt = V0 * (0.45 + 0.55 * sqrt(dp.vol)) * steep * (dp.age \u003c 0.2 ? dp.age / 0.2 : 1);\n  dp.v += (vt - dp.v) * min(1, ds * 6);\n  const y1 = dp.y + dp.v * ds;\n  for (let r = floor(dp.y) + 1; r \u003c= floor(y1); r++) {\n    if (r >= H) break;\n    if (r \u003c 0) continue;\n    const xc = xs[dp.i * H + r], rad = 0.7 + 1.3 * dp.vol, wet = 0.55 + 0.45 * min(1, dp.vol);\n    const lo = max(0, dp.i - 12), hi = min(NF - 1, dp.i + 12);\n    for (let j = lo; j \u003c= hi; j++) {\n      const q = j * H + r;\n      if (abs(xs[q] - xc) \u003c rad && G[q] \u003c wet) G[q] = wet;\n    }\n    dp.vol -= LOSS;\n    // Forks: the first at row 50, the second at row 88.\n    if ((r === 50 || r === 88) && dp.vol > 0.3) {\n      const kk = r === 50 ? S.k1 : S.k2, sib = kk[dp.i] ^ 1;\n      let best = -1, bd = 1e9;\n      for (let j = max(0, dp.i - 20); j \u003c= min(NF - 1, dp.i + 20); j++)\n        if (kk[j] === sib && abs(j - dp.i) \u003c bd) (bd = abs(j - dp.i)), (best = j);\n      if (best >= 0) {\n        dp.vol *= 0.5;\n        S.born.push({ i: best, y: r, vol: dp.vol, v: dp.v, age: 1, soak: 0 });\n      }\n    }\n  }\n  dp.y = y1;\n  if (dp.vol \u003c VMIN) dp.soak = 0.001;\n  return dp.y \u003c H + 3;\n}\n\nfunction step(S, d) {\n  const ds = d * (S.speed / 2);\n  S.t += ds;\n  rows(S);\n  geometry(S);\n  const fade = exp(-ds / TAU), G = S.G;\n  for (let q = 0; q \u003c G.length; q++) G[q] *= fade;\n  S.acc += S.rate * ds;\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    spawn(S, floor(random() * NF), 2 + random() * 22, 0.6 + 0.6 * random());\n  }\n  // A drop born at a fork waits for the end of the pass: filter would drop it.\n  S.born.length = 0;\n  S.drops = S.drops.filter((dp) => slide(S, dp, ds)).concat(S.born);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 0.5, 4);\n  S.wave = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on hair that has had oil for 20 seconds at Speed 2.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 200; i++) step(S, 0.1);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c 12; c++) spawn(S, strandAt(S, 2.6 + c * 5.3 + (random() - 0.5) * 2), 2 + random() * 4, 0.9 + 0.3 * random());\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ab, wt, gl, fb, xs, zs, G, NX, NT, sx, ws, wz, tz, body, deep, tint, oil } = S;\n  ab.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  const t = S.t;\n  // Kajiya-Kay: the band where the tangent lies square to the half vector,\n  // the white one shifted toward the root and a tinted one toward the tip.\n  // Dry hair has a soft band; oil makes it six times sharper and twice as\n  // bright, and darkens the body a shade.\n  const splat = (x, r, w0, dif, s1, s2, oilw, s3) => {\n    const xi = floor(x), fr = x - xi, q = r * W + xi;\n    for (let e = 0; e \u003c 2; e++) {\n      const xx = xi + e;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = (e ? fr : 1 - fr) * w0, p = (q + e) * 5;\n      ab[p] += dif * (1 - oilw) * w;\n      ab[p + 1] += dif * oilw * w;\n      ab[p + 2] += s1 * w;\n      ab[p + 3] += s2 * w;\n      ab[p + 4] += s3 * w;\n      wt[q + e] += w;\n    }\n  };\n  // Back layer: a dim, even curtain behind the locks.\n  for (let i = 0; i \u003c NB; i++) {\n    const o = (NF + i) * H, x0 = S.bx0[i], b = S.bb[i];\n    let px = x0;\n    for (let r = 0; r \u003c H; r++) {\n      const x = x0 + 0.8 * sx[r] + ws[r] + 0.5 * NX[o + r], tx = r ? x - px : 0;\n      px = x;\n      const z = tz[r] + wz[r] + S.bto[i] + 0.08 * NT[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const s1 = 0.35 * exp(40 * log(max(1e-6, 1 - (th - 0.05) ** 2)));\n      splat(x, r, 0.8, 0.4 * b * (0.4 + 0.6 * dif), 0.6 * s1 * b, 0, 0, 0);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const o = i * H, b = S.fbr[i], bs = S.bs[i], bp = S.bp[i];\n    for (let r = 0; r \u003c H; r++) {\n      const x = xs[o + r], tx = r ? x - xs[o + r - 1] : 0, ge = sm(0.06, 0.6, G[o + r]);\n      const z = zs[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const p1 = 70 * (1 + 5 * ge), t1 = th - 0.05, t2 = th + 0.11;\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      const s1 = (0.8 + 1.0 * ge) * exp(0.5 * p1 * l1);\n      // The oil film also gives a broad sheen of its own colour along the\n      // whole strand, which is what draws the streak down the fall.\n      const s3 = ge * (0.2 + 0.4 * exp(5 * l1));\n      const s2 = 0.45 * exp(0.5 * 0.4 * p1 * log(max(1e-6, 1 - t2 * t2)));\n      splat(x, r, 1.5, b * (0.4 + 0.6 * dif), s1 * (0.4 + 0.6 * b), s2 * b, ge, s3);\n      // The oil film on a fibre breaks into a string of tiny beads (Plateau\n      // and Rayleigh), one every 8 to 11 rows here; each holds a point of\n      // light that twinkles as the strand sways.\n      if (ge > 0.02 && (r + bp) % bs === 0) {\n        const xi = round(x);\n        if (xi >= 0 && xi \u003c W) {\n          const tw = 0.5 + 0.5 * sin(2 * PI * (t / 1.7) + i * 2.3 + r * 0.7);\n          gl[r * W + xi] += 0.9 * ge * tw * tw * tw;\n        }\n      }\n    }\n  }\n  // Colours. Orange, yellow and yellow-green read brown and olive at mid\n  // level, so from hue 0 to 0.26 the hair is lifted and paled toward rose\n  // gold, champagne and sage; deep blue reads nearly black, so round hue\n  // 0.66 it is paled a little toward cornflower.\n  const h = S.hue + 0.47, hh = h - floor(h), warm = sm(-0.03, 0.03, hh) * (1 - sm(0.22, 0.3, hh)), blue = sm(0.56, 0.62, hh) * (1 - sm(0.7, 0.77, hh));\n  hsv(h, 0.82 - 0.25 * warm - 0.22 * blue, 1 + 0.35 * warm + 0.1 * blue, body);\n  hsv(h + 0.015, 1 - 0.2 * warm - 0.1 * blue, 0.8 + 0.3 * warm + 0.1 * blue, deep);\n  hsv(h, 0.7 - 0.25 * warm - 0.15 * blue, 1, tint);\n  // The oil is the accent: two thirds of the way round from the hair, gold\n  // on teal at 0, and always at full brightness so it never goes muddy.\n  const ho = h + 0.66, oo = ho - floor(ho), ow = max(0, 1 - abs(oo - 0.1) / 0.12);\n  hsv(ho, 0.62 - 0.17 * ow, 1, oil);\n  const RHO = ((NF * 1.5 + NB * 0.8) / 72) * 0.85;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO), p = q * 5;\n      const d0 = ab[p] / n, d1 = ab[p + 1] / n, s1 = ab[p + 2] / n, s2 = ab[p + 3] / n, s3 = ab[p + 4] / n, gv = gl[q];\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const v = 0.6 * d0 * body[ch] + 0.6 * d1 * deep[ch] + 0.8 * s2 * tint[ch] + s1 * (0.82 + 0.18 * tint[ch]) + s3 * (0.5 * oil[ch] + 0.5) + gv * (0.6 * oil[ch] + 0.4);\n        fb[q * 3 + ch] = 1 - exp(-1.4 * v);\n      }\n    }\n  // The drops: a clear bead in the oil's colour, brighter toward its foot\n  // where it gathers the light, with a dark rim and a white point of light\n  // up and to the left.\n  for (const dp of S.drops) {\n    const grow = min(1, dp.age / 0.15), shrink = dp.soak > 0 ? 1 - dp.soak / 0.5 : 1;\n    const rb = (1.5 + 1.2 * sqrt(dp.vol)) * grow * shrink, r0 = cl(round(dp.y), 0, H - 1), xc = xs[dp.i * H + r0] + 0.5, yc = dp.y;\n    if (rb \u003c 0.3) continue;\n    for (let yy = floor(yc - rb - 1); yy \u003c= yc + rb + 1; yy++)\n      for (let xx = floor(xc - rb - 1); xx \u003c= xc + rb + 1; xx++) {\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const ex = xx + 0.5 - xc, ey = yy + 0.5 - yc, e = sqrt(ex * ex + ey * ey), cov = cl(rb + 0.5 - e, 0, 1);\n        if (cov \u003c= 0) continue;\n        const rim = 0.8 * sm(rb - 1.1, rb - 0.1, e), lit = 0.7 + 0.35 * cl(ey / rb, -1, 1);\n        const hot = cl(1.3 - 1.6 * sqrt((ex + 0.4 * rb) ** 2 + (ey + 0.45 * rb) ** 2), 0, 1), q = (yy * W + xx) * 3;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          const v = oil[ch] * lit * (1 - rim) + 0.15 * oil[ch] * rim + hot;\n          fb[q + ch] += (cl(v, 0, 1) - fb[q + ch]) * cov;\n        }\n      }\n  }\n  for (let q = 0; q \u003c W * H; q++) display.setPixel(q % W, (q / W) | 0, round(255 * fb[q * 3]), round(255 * fb[q * 3 + 1]), round(255 * fb[q * 3 + 2]));\n}\n","layer":{"id":"layer-hair-oil","type":"code","name":"hair-oil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hair Oil\n// Family:  cosmetic\n// Idea:    A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after hair oil serums, with the strands lit by the Kajiya-Kay model (James Kajiya and Timothy Kay, 1989)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1\n//\n// Knob 1: Hue. The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness.\n// Knob 2: Speed. At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Drops. Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in.\n// Knob 4: Wave. At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28.\n// Buttons: K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.\n\nconst W = 64, H = 128, NB = 110, NF = 150;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\nconst TZ0 = -HY / HZ;\n\n// Locks: five across the panel near the top, each parting in two at about\n// row 53 and again at about row 92, so 20 fine locks at the ends.\nconst F1 = [45, 62], F2 = [84, 100];\n// Oil: a drop's slide speed in rows a second at Speed 2 on a strand hanging\n// straight down, the oil it leaves per row, the volume below which it soaks\n// in, and how long the gloss takes to fall to 1/e.\nconst V0 = 40, LOSS = 0.0045, VMIN = 0.08, TAU = 12, PULL = 0.55;\n\nfunction wobble(out, o, n) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c n; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, rate: 0.5, wave: 0.06, t: 0, warm: false, acc: 0,\n    // Front strands, sorted by root position, with their locks at three levels.\n    fx0: new Float32Array(NF), k0: new Int32Array(NF), k1: new Int32Array(NF), k2: new Int32Array(NF),\n    fbr: new Float32Array(NF), fto: new Float32Array(NF), bp: new Int32Array(NF), bs: new Int32Array(NF),\n    c0: new Float32Array(5), c1: new Float32Array(10), c2: new Float32Array(20), lph: new Float32Array(5),\n    bx0: new Float32Array(NB), bb: new Float32Array(NB), bto: new Float32Array(NB),\n    NX: new Float32Array((NF + NB) * H), NT: new Float32Array((NF + NB) * H),\n    xs: new Float32Array(NF * H), zs: new Float32Array(NF * H), ty: new Float32Array(NF * H), G: new Float32Array(NF * H),\n    f1: new Float32Array(H), f2: new Float32Array(H), lph1: new Float32Array(10), lph2: new Float32Array(20),\n    sa: new Float32Array(20 * H), ca: new Float32Array(20 * H), reach: new Float32Array(H), pullr: new Float32Array(H),\n    sx: new Float32Array(H), tz: new Float32Array(H), ws: new Float32Array(H), wz: new Float32Array(H),\n    drops: [], born: [],\n    ab: new Float32Array(W * H * 5), wt: new Float32Array(W * H), gl: new Float32Array(W * H), fb: new Float32Array(W * H * 3),\n    body: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], oil: [0, 0, 0],\n  });\n  for (let i = 0; i \u003c NF; i++) S.fx0[i] = -4 + (72 * (i + random())) / NF;\n  for (let i = 0; i \u003c NF; i++) {\n    S.k0[i] = min(4, floor(((S.fx0[i] + 4) / 72) * 5));\n    S.fbr[i] = 0.35 + 0.65 * random() ** 0.6;\n    S.fto[i] = (random() - 0.5) * 0.1;\n    S.bs[i] = 8 + floor(random() * 4);\n    S.bp[i] = floor(random() * 11);\n  }\n  // Each lock parts into the halves of its strands, so a fork is a real fork.\n  const split = (kin, kout, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      const mem = [];\n      for (let i = 0; i \u003c NF; i++) if (kin[i] === k) mem.push(i);\n      const half = mem.length >> 1;\n      mem.forEach((i, m) => (kout[i] = 2 * k + (m \u003c half ? 0 : 1)));\n    }\n  };\n  split(S.k0, S.k1, 5);\n  split(S.k1, S.k2, 10);\n  const centre = (kk, c, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      let s = 0, m = 0;\n      for (let i = 0; i \u003c NF; i++) if (kk[i] === k) (s += S.fx0[i]), m++;\n      c[k] = m ? s / m : 0;\n    }\n  };\n  centre(S.k0, S.c0, 5);\n  centre(S.k1, S.c1, 10);\n  centre(S.k2, S.c2, 20);\n  for (let k = 0; k \u003c 5; k++) S.lph[k] = random() * 2 * PI;\n  for (let k = 0; k \u003c 10; k++) S.lph1[k] = S.lph[k >> 1] + (k & 1 ? 1 : -1) * (0.7 + 0.5 * random());\n  for (let k = 0; k \u003c 20; k++) S.lph2[k] = S.lph1[k >> 1] + (k & 1 ? 1 : -1) * (0.5 + 0.5 * random());\n  for (let i = 0; i \u003c NB; i++) {\n    S.bx0[i] = -5 + (74 * (i + random())) / NB;\n    S.bb[i] = 0.3 + 0.7 * random();\n    S.bto[i] = (random() - 0.5) * 0.14;\n  }\n  for (let i = 0; i \u003c NF + NB; i++) {\n    wobble(S.NX, i * H, H);\n    wobble(S.NT, i * H, H);\n  }\n}\n\n// Rows: the breeze running down the hair, the waves, and the lean of the\n// sheet toward the eye, which puts the shine band where tz meets TZ0.\nfunction rows(S) {\n  const t = S.t, wv = (S.wave + 1) / 2;\n  const yb = 44 + 12 * sin(2 * PI * (t / 7)) + 3 * sin(2 * PI * (t / 3.1) + 1);\n  for (let r = 0; r \u003c H; r++) {\n    const reach = ((r + 30) / 158) ** 1.6, a = (2 * PI * r) / 40;\n    S.sx[r] = 3 * reach * sin(2 * PI * (r / 120 - t / 4.6)) + reach * sin(2 * PI * (r / 45 - t / 2.3) + 2);\n    S.ws[r] = 4 * wv * sin(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.wz[r] = 0.32 * wv * cos(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.f1[r] = sm(F1[0], F1[1], r);\n    S.f2[r] = sm(F2[0], F2[1], r);\n    S.tz[r] = TZ0 + 0.015 * (1 - 0.5 * wv) * (yb - r);\n  }\n}\n\n// Where each front strand runs this frame, and how steeply.\n// Each lock waves in its own phase, and the two halves of a lock drift a\n// third of a turn apart past its fork, so the fork opens as a Y. The phase\n// of a strand depends only on its fine lock, so the sines are taken once a\n// row for each of the 20 fine locks.\nfunction geometry(S) {\n  const { xs, zs, ty, sx, tz, f1, f2, NX, NT, G, sa, ca, reach, pullr } = S, t = S.t, wv = (S.wave + 1) / 2, sway = 0.5 * sin(2 * PI * (t / 6.1));\n  for (let r = 0; r \u003c H; r++) {\n    reach[r] = ((r + 30) / 158) ** 1.6;\n    pullr[r] = PULL * sm(3, 32, r);\n  }\n  for (let k = 0; k \u003c 20; k++) {\n    const p0 = S.lph[k >> 2], p1 = S.lph1[k >> 1], p2 = S.lph2[k];\n    for (let r = 0; r \u003c H; r++) {\n      const a = (2 * PI * r) / 40 + sway + p0 + (p1 - p0) * f1[r] + (p2 - p1) * f2[r];\n      sa[k * H + r] = 4 * wv * sin(a);\n      ca[k * H + r] = 0.32 * wv * cos(a);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const x0 = S.fx0[i], c0 = S.c0[S.k0[i]], c1 = S.c1[S.k1[i]], c2 = S.c2[S.k2[i]], o = i * H, ko = S.k2[i] * H;\n    const lock = 1.2 * sin(2 * PI * (t / 3.7) + S.lph[S.k0[i]]), to = S.fto[i];\n    let px = 0;\n    for (let r = 0; r \u003c H; r++) {\n      const c = c0 + (c1 - c0) * f1[r] + (c2 - c1) * f2[r];\n      // Oil lays a strand smoother: its own wiggle shrinks by half.\n      const g = G[o + r], calm = g \u003c 0.06 ? 1 : 1 - 0.5 * sm(0.06, 0.6, g);\n      const x = x0 + pullr[r] * (c - x0) + sx[r] + sa[ko + r] + lock * reach[r] + 0.45 * calm * NX[o + r];\n      xs[o + r] = x;\n      const tx = r ? x - px : 0, z = tz[r] + ca[ko + r] + to + 0.07 * calm * NT[o + r];\n      zs[o + r] = z;\n      ty[o + r] = 1 / sqrt(tx * tx + 1 + z * z);\n      px = x;\n    }\n  }\n}\n\nfunction spawn(S, i, y, vol) {\n  if (S.drops.length \u003c 48) S.drops.push({ i, y, vol, v: 0, age: 0, soak: 0 });\n}\n\n// The front strand whose root lies nearest x.\nfunction strandAt(S, x) {\n  let best = 0, bd = 1e9;\n  for (let i = 0; i \u003c NF; i++) {\n    const d = abs(S.fx0[i] - x);\n    if (d \u003c bd) (bd = d), (best = i);\n  }\n  return best;\n}\n\n// A drop moves down its strand, wetting the strands within its radius on\n// every row it crosses; at a fork a drop with oil enough splits, half going\n// down the sibling lock.\nfunction slide(S, dp, ds) {\n  const { xs, ty, G } = S;\n  if (dp.soak > 0) {\n    dp.soak += ds;\n    return dp.soak \u003c 0.5;\n  }\n  dp.age += ds;\n  const r0 = cl(floor(dp.y), 0, H - 1);\n  const steep = ty[dp.i * H + r0] ** 4;\n  const vt = V0 * (0.45 + 0.55 * sqrt(dp.vol)) * steep * (dp.age \u003c 0.2 ? dp.age / 0.2 : 1);\n  dp.v += (vt - dp.v) * min(1, ds * 6);\n  const y1 = dp.y + dp.v * ds;\n  for (let r = floor(dp.y) + 1; r \u003c= floor(y1); r++) {\n    if (r >= H) break;\n    if (r \u003c 0) continue;\n    const xc = xs[dp.i * H + r], rad = 0.7 + 1.3 * dp.vol, wet = 0.55 + 0.45 * min(1, dp.vol);\n    const lo = max(0, dp.i - 12), hi = min(NF - 1, dp.i + 12);\n    for (let j = lo; j \u003c= hi; j++) {\n      const q = j * H + r;\n      if (abs(xs[q] - xc) \u003c rad && G[q] \u003c wet) G[q] = wet;\n    }\n    dp.vol -= LOSS;\n    // Forks: the first at row 50, the second at row 88.\n    if ((r === 50 || r === 88) && dp.vol > 0.3) {\n      const kk = r === 50 ? S.k1 : S.k2, sib = kk[dp.i] ^ 1;\n      let best = -1, bd = 1e9;\n      for (let j = max(0, dp.i - 20); j \u003c= min(NF - 1, dp.i + 20); j++)\n        if (kk[j] === sib && abs(j - dp.i) \u003c bd) (bd = abs(j - dp.i)), (best = j);\n      if (best >= 0) {\n        dp.vol *= 0.5;\n        S.born.push({ i: best, y: r, vol: dp.vol, v: dp.v, age: 1, soak: 0 });\n      }\n    }\n  }\n  dp.y = y1;\n  if (dp.vol \u003c VMIN) dp.soak = 0.001;\n  return dp.y \u003c H + 3;\n}\n\nfunction step(S, d) {\n  const ds = d * (S.speed / 2);\n  S.t += ds;\n  rows(S);\n  geometry(S);\n  const fade = exp(-ds / TAU), G = S.G;\n  for (let q = 0; q \u003c G.length; q++) G[q] *= fade;\n  S.acc += S.rate * ds;\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    spawn(S, floor(random() * NF), 2 + random() * 22, 0.6 + 0.6 * random());\n  }\n  // A drop born at a fork waits for the end of the pass: filter would drop it.\n  S.born.length = 0;\n  S.drops = S.drops.filter((dp) => slide(S, dp, ds)).concat(S.born);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 0.5, 4);\n  S.wave = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on hair that has had oil for 20 seconds at Speed 2.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 200; i++) step(S, 0.1);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c 12; c++) spawn(S, strandAt(S, 2.6 + c * 5.3 + (random() - 0.5) * 2), 2 + random() * 4, 0.9 + 0.3 * random());\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ab, wt, gl, fb, xs, zs, G, NX, NT, sx, ws, wz, tz, body, deep, tint, oil } = S;\n  ab.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  const t = S.t;\n  // Kajiya-Kay: the band where the tangent lies square to the half vector,\n  // the white one shifted toward the root and a tinted one toward the tip.\n  // Dry hair has a soft band; oil makes it six times sharper and twice as\n  // bright, and darkens the body a shade.\n  const splat = (x, r, w0, dif, s1, s2, oilw, s3) => {\n    const xi = floor(x), fr = x - xi, q = r * W + xi;\n    for (let e = 0; e \u003c 2; e++) {\n      const xx = xi + e;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = (e ? fr : 1 - fr) * w0, p = (q + e) * 5;\n      ab[p] += dif * (1 - oilw) * w;\n      ab[p + 1] += dif * oilw * w;\n      ab[p + 2] += s1 * w;\n      ab[p + 3] += s2 * w;\n      ab[p + 4] += s3 * w;\n      wt[q + e] += w;\n    }\n  };\n  // Back layer: a dim, even curtain behind the locks.\n  for (let i = 0; i \u003c NB; i++) {\n    const o = (NF + i) * H, x0 = S.bx0[i], b = S.bb[i];\n    let px = x0;\n    for (let r = 0; r \u003c H; r++) {\n      const x = x0 + 0.8 * sx[r] + ws[r] + 0.5 * NX[o + r], tx = r ? x - px : 0;\n      px = x;\n      const z = tz[r] + wz[r] + S.bto[i] + 0.08 * NT[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const s1 = 0.35 * exp(40 * log(max(1e-6, 1 - (th - 0.05) ** 2)));\n      splat(x, r, 0.8, 0.4 * b * (0.4 + 0.6 * dif), 0.6 * s1 * b, 0, 0, 0);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const o = i * H, b = S.fbr[i], bs = S.bs[i], bp = S.bp[i];\n    for (let r = 0; r \u003c H; r++) {\n      const x = xs[o + r], tx = r ? x - xs[o + r - 1] : 0, ge = sm(0.06, 0.6, G[o + r]);\n      const z = zs[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const p1 = 70 * (1 + 5 * ge), t1 = th - 0.05, t2 = th + 0.11;\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      const s1 = (0.8 + 1.0 * ge) * exp(0.5 * p1 * l1);\n      // The oil film also gives a broad sheen of its own colour along the\n      // whole strand, which is what draws the streak down the fall.\n      const s3 = ge * (0.2 + 0.4 * exp(5 * l1));\n      const s2 = 0.45 * exp(0.5 * 0.4 * p1 * log(max(1e-6, 1 - t2 * t2)));\n      splat(x, r, 1.5, b * (0.4 + 0.6 * dif), s1 * (0.4 + 0.6 * b), s2 * b, ge, s3);\n      // The oil film on a fibre breaks into a string of tiny beads (Plateau\n      // and Rayleigh), one every 8 to 11 rows here; each holds a point of\n      // light that twinkles as the strand sways.\n      if (ge > 0.02 && (r + bp) % bs === 0) {\n        const xi = round(x);\n        if (xi >= 0 && xi \u003c W) {\n          const tw = 0.5 + 0.5 * sin(2 * PI * (t / 1.7) + i * 2.3 + r * 0.7);\n          gl[r * W + xi] += 0.9 * ge * tw * tw * tw;\n        }\n      }\n    }\n  }\n  // Colours. Orange, yellow and yellow-green read brown and olive at mid\n  // level, so from hue 0 to 0.26 the hair is lifted and paled toward rose\n  // gold, champagne and sage; deep blue reads nearly black, so round hue\n  // 0.66 it is paled a little toward cornflower.\n  const h = S.hue + 0.47, hh = h - floor(h), warm = sm(-0.03, 0.03, hh) * (1 - sm(0.22, 0.3, hh)), blue = sm(0.56, 0.62, hh) * (1 - sm(0.7, 0.77, hh));\n  hsv(h, 0.82 - 0.25 * warm - 0.22 * blue, 1 + 0.35 * warm + 0.1 * blue, body);\n  hsv(h + 0.015, 1 - 0.2 * warm - 0.1 * blue, 0.8 + 0.3 * warm + 0.1 * blue, deep);\n  hsv(h, 0.7 - 0.25 * warm - 0.15 * blue, 1, tint);\n  // The oil is the accent: two thirds of the way round from the hair, gold\n  // on teal at 0, and always at full brightness so it never goes muddy.\n  const ho = h + 0.66, oo = ho - floor(ho), ow = max(0, 1 - abs(oo - 0.1) / 0.12);\n  hsv(ho, 0.62 - 0.17 * ow, 1, oil);\n  const RHO = ((NF * 1.5 + NB * 0.8) / 72) * 0.85;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO), p = q * 5;\n      const d0 = ab[p] / n, d1 = ab[p + 1] / n, s1 = ab[p + 2] / n, s2 = ab[p + 3] / n, s3 = ab[p + 4] / n, gv = gl[q];\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const v = 0.6 * d0 * body[ch] + 0.6 * d1 * deep[ch] + 0.8 * s2 * tint[ch] + s1 * (0.82 + 0.18 * tint[ch]) + s3 * (0.5 * oil[ch] + 0.5) + gv * (0.6 * oil[ch] + 0.4);\n        fb[q * 3 + ch] = 1 - exp(-1.4 * v);\n      }\n    }\n  // The drops: a clear bead in the oil's colour, brighter toward its foot\n  // where it gathers the light, with a dark rim and a white point of light\n  // up and to the left.\n  for (const dp of S.drops) {\n    const grow = min(1, dp.age / 0.15), shrink = dp.soak > 0 ? 1 - dp.soak / 0.5 : 1;\n    const rb = (1.5 + 1.2 * sqrt(dp.vol)) * grow * shrink, r0 = cl(round(dp.y), 0, H - 1), xc = xs[dp.i * H + r0] + 0.5, yc = dp.y;\n    if (rb \u003c 0.3) continue;\n    for (let yy = floor(yc - rb - 1); yy \u003c= yc + rb + 1; yy++)\n      for (let xx = floor(xc - rb - 1); xx \u003c= xc + rb + 1; xx++) {\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const ex = xx + 0.5 - xc, ey = yy + 0.5 - yc, e = sqrt(ex * ex + ey * ey), cov = cl(rb + 0.5 - e, 0, 1);\n        if (cov \u003c= 0) continue;\n        const rim = 0.8 * sm(rb - 1.1, rb - 0.1, e), lit = 0.7 + 0.35 * cl(ey / rb, -1, 1);\n        const hot = cl(1.3 - 1.6 * sqrt((ex + 0.4 * rb) ** 2 + (ey + 0.45 * rb) ** 2), 0, 1), q = (yy * W + xx) * 3;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          const v = oil[ch] * lit * (1 - rim) + 0.15 * oil[ch] * rim + hot;\n          fb[q + ch] += (cl(v, 0, 1) - fb[q + ch]) * cov;\n        }\n      }\n  }\n  for (let q = 0; q \u003c W * H; q++) display.setPixel(q % W, (q / W) | 0, round(255 * fb[q * 3]), round(255 * fb[q * 3 + 1]), round(255 * fb[q * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Drops","min":0.5,"max":4,"about":"Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in."},{"name":"Wave","min":-1,"max":1,"about":"At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28."}],"start":[0,2,0.5,0.06],"measures":{"motion":0.3092,"detail":0.0865,"edges":0.3007,"complexity":2.6843,"coverage":0.7924,"colour":0.1708,"drift":0.1096},"knobResponse":[0.1623,0.2029,0.0681,0.2493]},{"slug":"hairy-ball","title":"Hairy Ball","family":"noise","round":28,"note":"위에는 털 난 공, 아래에는 털 난 도넛이 빛을 받으며 돌아요. 공은 어떻게 빗어도 털이 갈 데 없는 가마가 하나나 둘 금빛으로 남고, 도넛은 한 바퀴 매끈하게 빗겨요. 귀퉁이의 2 와 0 은 둘의 오일러 지표예요. 누르면 둘 다 다시 빗어서 가마가 다른 자리로 뛰어요.","idea":"A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.","buttons":"K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.","code":"// ===== Patternflow pattern =====\n// Title:   Hairy Ball\n// Family:  noise\n// Idea:    A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the hairy ball theorem (Henri Poincaré 1885, L. E. J. Brouwer 1912) and the Poincaré–Hopf index theorem (Heinz Hopf, 1926), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1\n//\n// Knob 1: Hue. Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together.\n// Knob 2: Speed. At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower.\n// Knob 3: Length. The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter.\n// Knob 4: Comb. How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them.\n// Buttons: K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The sphere sits in the top half, the doughnut in the bottom half.\nconst SX = 32, SY = 31, RS = 24.5;\nconst TX = 32, TY = 97, TR = 18, TQ = 8.2;\n// Roots spread evenly at the same density on both: the doughnut's area\n// 4 pi^2 R r against the sphere's 4 pi R^2.\nconst NS = 1100, NT = round((NS * PI * TR * TQ) / (RS * RS));\n\n// Fixed grain: a seeded generator used once, so the roots never move on the skin.\nlet seed = 0x9e3779b9;\nfunction rnd() {\n  seed = (seed + 0x6d2b79f5) | 0;\n  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\n// Sphere roots on a jittered Fibonacci spiral, unit vectors.\nconst SP = new Float32Array(NS * 3), SJ = new Float32Array(NS * 2);\nfor (let i = 0; i \u003c NS; i++) {\n  const y = 1 - (2 * (i + 0.2 + 0.6 * rnd())) / NS, r = sqrt(max(0, 1 - y * y)), a = i * 2.39996323 + (rnd() - 0.5) * 0.9 * (2 / sqrt(NS)) / max(r, 0.05);\n  SP[i * 3] = r * cos(a);\n  SP[i * 3 + 1] = y;\n  SP[i * 3 + 2] = r * sin(a);\n  SJ[i * 2] = 0.8 + 0.35 * rnd();\n  SJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// Doughnut roots: u round the ring, v round the tube, v drawn with density\n// R + r cos v so the hair is as thick inside the hole as outside.\nconst TP = new Float32Array(NT * 3), TN = new Float32Array(NT * 3), TU = new Float32Array(NT * 3), TV = new Float32Array(NT * 3), TJ = new Float32Array(NT * 2);\nfor (let i = 0; i \u003c NT; i++) {\n  const u = 2 * PI * ((i * 0.7548776662 + 0.3 * rnd() / NT * 40) % 1), F = (i * 0.5698402910 + 0.5 + (rnd() - 0.5) * 0.02) % 1;\n  let v = 2 * PI * F;\n  for (let k = 0; k \u003c 8; k++) v -= (TR * v + TQ * sin(v) - 2 * PI * TR * F) / (TR + TQ * cos(v));\n  const cu = cos(u), su = sin(u), cv = cos(v), sv = sin(v), rr = TR + TQ * cv, o = i * 3;\n  TP[o] = rr * cu, TP[o + 1] = rr * su, TP[o + 2] = TQ * sv;\n  TN[o] = cv * cu, TN[o + 1] = cv * su, TN[o + 2] = sv;\n  TU[o] = -su, TU[o + 1] = cu, TU[o + 2] = 0;\n  TV[o] = -sv * cu, TV[o + 1] = -sv * su, TV[o + 2] = cv;\n  TJ[i * 2] = 0.8 + 0.35 * rnd();\n  TJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// 3x3 rotations, row major.\nconst mul = (A, B) => {\n  const C = new Array(9);\n  for (let r = 0; r \u003c 3; r++) for (let c = 0; c \u003c 3; c++) C[r * 3 + c] = A[r * 3] * B[c] + A[r * 3 + 1] * B[3 + c] + A[r * 3 + 2] * B[6 + c];\n  return C;\n};\nconst rx = (a) => [1, 0, 0, 0, cos(a), -sin(a), 0, sin(a), cos(a)];\nconst ry = (a) => [cos(a), 0, sin(a), 0, 1, 0, -sin(a), 0, cos(a)];\nconst rz = (a) => [cos(a), -sin(a), 0, sin(a), cos(a), 0, 0, 0, 1];\n\n// Light from the upper left, in front; H halfway to the eye.\nconst LX = -0.45 / 0.996, LY = -0.55 / 0.996, LZ = 0.7 / 0.996;\nconst HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The combs the sphere goes through: how far apart its two cowlicks stand\n// (1 opposite each other, 0 merged into one zero of index 2) and the angle\n// of the doughnut's hair (0 along the ring, pi/2 along the tube).\nconst PROG = [[0.55, 0.12], [0, 0.85], [1, -0.55], [0.3, 0.4], [0, -0.9], [1, 0.25]];\n\n// The sphere's body turns about its own vertical axis, tipped toward the\n// eye; the field turns inside it on its own, from the angles a.\nconst bodyM = (T) => mul(rx(-0.42 + 0.12 * sin(T * 0.21)), ry(T * 0.6));\nconst fieldM = (a, T) => mul(rz(a[0] + T * 0.09), mul(rx(a[1] + 0.5 * sin(T * 0.05 + 1)), rz(a[2])));\n// The two zeros in field coordinates sit at w = +-t on the stereographic\n// plane, symmetric about the south pole; t = 1 puts them opposite. Out\n// come both as unit vectors in M's frame.\nfunction zeros(M, t) {\n  const t2 = t * t, Z = [];\n  for (const sg of [1, -1]) {\n    const fx = (2 * sg * t) / (1 + t2), fz = (t2 - 1) / (1 + t2);\n    Z.push(M[0] * fx + M[2] * fz, M[3] * fx + M[5] * fz, M[6] * fx + M[8] * fz);\n  }\n  return Z;\n}\n// A new comb is turned so that a cowlick faces the eye for most of the\n// seven units it lasts, both of them when they stand close enough.\nfunction aim(T, sep, from) {\n  let best = -9, pick = from;\n  for (let c = 0; c \u003c 40; c++) {\n    const a = from.map((v) => v + (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.3 * Math.random()));\n    let lo = 9, sum = 0;\n    for (let j = 0; j \u003c 5; j++) {\n      const Tj = T + 0.8 + j * 1.5, Z = zeros(mul(bodyM(Tj), fieldM(a, Tj)), sep), v = max(Z[2], Z[5]) + 0.5 * min(Z[2], Z[5]);\n      (lo = min(lo, v)), (sum += v);\n    }\n    const score = lo + sum / 5;\n    if (score > best) (best = score), (pick = a);\n  }\n  return pick;\n}\n\n// 3x5 digits, one row of three bits per line, top first.\nconst DIG2 = [7, 1, 7, 4, 7], DIG0 = [7, 5, 5, 5, 7];\nfunction digit(buf, rows, x0, y0, c) {\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++)\n      if ((rows[j] >> (2 - i)) & 1) {\n        const q = ((y0 + j) * W + x0 + i) * 3;\n        for (let k = 0; k \u003c 3; k++) buf[q + k] = 40 + 120 * c[k];\n      }\n}\n\nexport function setup(params) {\n  const a = aim(-0.8, PROG[0][0], [0, 0, 0]);\n  params.s = {\n    T: 0, clock: 0, step: 0, a: a.slice(), ta: a,\n    sep: PROG[0][0], al: PROG[0][1],\n    hue: 0, len: 8, th: PI / 4,\n    buf: new Float32Array(N * 3), zb: new Float32Array(N), zh: new Float32Array(N),\n    cs: new Float32Array(3), ct: new Float32Array(3), cg: new Float32Array(3),\n  };\n}\n\nfunction recomb(P) {\n  P.step = (P.step + 1) % PROG.length;\n  P.clock = 0;\n  P.ta = aim(P.T, PROG[P.step][0], P.ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.len = cl(k[2], 8, 13);\n  P.th = (PI / 4) * (1 + cl(k[3], -1, 1));\n  const dT = d * cl(k[1], 0.2, 3) * 0.5;\n  P.T += dT;\n  P.clock += dT;\n  if (input.btnPressed && input.btnPressed[0]) recomb(P);\n  else if (P.clock > 7) recomb(P);\n  const e = 1 - exp(-max(dT, d * 0.5) * 2.4), g = PROG[P.step];\n  for (let i = 0; i \u003c 3; i++) P.a[i] += (P.ta[i] - P.a[i]) * e;\n  P.sep += (g[0] - P.sep) * e;\n  P.al += (g[1] - P.al) * e;\n}\n\n// One hair: root (x, y, z) on screen, direction (hx, hy, hz) times its\n// length, colour (r, g, b) at the tip; the root end is darker.\nfunction hair(P, x, y, z, hx, hy, hz, r, g, b) {\n  const n = max(2, ceil(Math.hypot(hx, hy) * 1.4) + 1), buf = P.buf, zb = P.zb, zh = P.zh;\n  for (let j = 0; j \u003c n; j++) {\n    const s = j / (n - 1), X = floor(x + hx * s), Y = floor(y + hy * s);\n    if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n    const p = Y * W + X, Z = z + hz * s;\n    if (Z \u003c zb[p] - 1.2 || Z \u003c= zh[p]) continue;\n    zh[p] = Z;\n    const m = 0.22 + 0.78 * s * s, q = p * 3;\n    buf[q] = r * m, buf[q + 1] = g * m, buf[q + 2] = b * m;\n  }\n}\n\n// Hair light after Kajiya and Kay: a fibre is lit by how square it lies to\n// the light and shines where it lies square to the half vector.\nfunction shade(tx, ty, tz, nx, ny, nz) {\n  const tl = tx * LX + ty * LY + tz * LZ, th = tx * HX + ty * HY + tz * HZ, nl = nx * LX + ny * LY + nz * LZ;\n  const lam = 0.22 + 0.78 * max(0, nl), dif = sqrt(max(0, 1 - tl * tl)), sp = (1 - th * th) ** 12;\n  return [lam * (0.35 + 0.65 * dif), 0.75 * sp * max(0, nl + 0.2)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf, zb = P.zb, zh = P.zh, cs = P.cs, ct = P.ct, cg = P.cg, T = P.T;\n  buf.fill(0);\n  zb.fill(-1e9);\n  zh.fill(-1e9);\n  hsv(P.hue + 0.6, 0.75, 1, cs, 0);\n  hsv(P.hue + 0.47, 0.8, 1, ct, 0);\n  hsv(P.hue + 0.12, 0.6, 1, cg, 0);\n  const pulse = 0.85 + 0.15 * sin(T * 3.1);\n\n  // The sphere.\n  const Mb = bodyM(T), Rf = fieldM(P.a, T), M = mul(Mb, Rf), t = P.sep, t2 = t * t, Z = zeros(M, t);\n  // Skin: dark, with the cowlicks glowing through.\n  const R2 = RS * RS;\n  for (let y = max(0, floor(SY - RS)); y \u003c= min(H - 1, ceil(SY + RS)); y++)\n    for (let x = max(0, floor(SX - RS)); x \u003c= min(W - 1, ceil(SX + RS)); x++) {\n      const dx = x + 0.5 - SX, dy = y + 0.5 - SY, rr = dx * dx + dy * dy;\n      if (rr >= R2) continue;\n      const dz = sqrt(R2 - rr), nx = dx / RS, ny = dy / RS, nz = dz / RS, p = y * W + x, q = p * 3;\n      zb[p] = dz;\n      const lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      const gl = exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.05) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.05);\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * (cs[c] * lam + cg[c] * min(1, gl) * 0.9 * pulse);\n    }\n  // The field: v(w) = e^{i theta} (w^2 - t^2) on the plane, carried back to\n  // the sphere. Its only zeros are w = t and w = -t, each of index 1; at\n  // t = 0 they merge into one zero of index 2. There is always one.\n  const kc = cos(P.th), ks = sin(P.th), L = P.len, lb = 0.35 - 0.02 * (L - 8);\n  for (let i = 0; i \u003c NS; i++) {\n    const o = i * 3, bx = SP[o], by = SP[o + 1], bz = SP[o + 2];\n    const nx = Mb[0] * bx + Mb[1] * by + Mb[2] * bz, ny = Mb[3] * bx + Mb[4] * by + Mb[5] * bz, nz = Mb[6] * bx + Mb[7] * by + Mb[8] * bz;\n    if (nz \u003c -0.3) continue;\n    // Into field coordinates: f = Rf^T b.\n    const fx = Rf[0] * bx + Rf[3] * by + Rf[6] * bz, fy = Rf[1] * bx + Rf[4] * by + Rf[7] * bz, fz = Rf[2] * bx + Rf[5] * by + Rf[8] * bz;\n    const den = max(1e-7, 1 - fz), a = fx / den, b = fy / den, re = a * a - b * b - t2, im = 2 * a * b;\n    const va = kc * re - ks * im, vb = ks * re + kc * im, s = 1 + a * a + b * b, qq = (a * va + b * vb) / s;\n    let gx = va - 2 * a * qq, gy = vb - 2 * b * qq, gz = 2 * qq;\n    const gn = Math.hypot(gx, gy, gz) || 1;\n    gx /= gn, gy /= gn, gz /= gn;\n    // Field direction on screen.\n    const dx = M[0] * gx + M[1] * gy + M[2] * gz, dy = M[3] * gx + M[4] * gy + M[5] * gz, dz = M[6] * gx + M[7] * gy + M[8] * gz;\n    // Near a zero the hair stands up and glows.\n    const gl = min(1, exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.07) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.07));\n    const lift = lb + 0.8 * gl, cL = cos(lift), sL = sin(lift);\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * SJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * SJ[i * 2] * li, w = 255 * sp, gg = 255 * gl * pulse;\n    hair(P, SX + RS * nx, SY + RS * ny, RS * nz, hx * len, hy * len, hz * len,\n      cs[0] * br + w + cg[0] * gg, cs[1] * br + w + cg[1] * gg, cs[2] * br + w + cg[2] * gg);\n  }\n\n  // The doughnut, seen from about 40 degrees above, spinning on its\n  // own axis and swaying. Its hair lies along cos(al) e_u + sin(al) e_v: no\n  // zero anywhere, which the torus allows because its Euler characteristic is 0.\n  const Mt = mul(ry(0.3 * sin(T * 0.13)), mul(rx(0.84 + 0.08 * sin(T * 0.17)), rz(T * 0.5)));\n  const RO = TR + TQ, ox = Mt[6], oy = Mt[7], oz = Mt[8];\n  for (let y = max(0, floor(TY - RO)); y \u003c= min(H - 1, ceil(TY + RO)); y++)\n    for (let x = max(0, floor(TX - RO)); x \u003c= min(W - 1, ceil(TX + RO)); x++) {\n      const dx = x + 0.5 - TX, dy = y + 0.5 - TY;\n      if (dx * dx + dy * dy >= RO * RO) continue;\n      // March a ray into the doughnut's own coordinates.\n      const z0 = RO + 1;\n      const px0 = Mt[0] * dx + Mt[3] * dy + Mt[6] * z0, py0 = Mt[1] * dx + Mt[4] * dy + Mt[7] * z0, pz0 = Mt[2] * dx + Mt[5] * dy + Mt[8] * z0;\n      let tt = 0, hit = false, px = 0, py = 0, pz = 0;\n      for (let it = 0; it \u003c 40 && tt \u003c 2 * z0; it++) {\n        px = px0 - ox * tt, py = py0 - oy * tt, pz = pz0 - oz * tt;\n        const qd = sqrt(px * px + py * py) - TR, dd = sqrt(qd * qd + pz * pz) - TQ;\n        if (dd \u003c 0.03) {\n          hit = true;\n          break;\n        }\n        tt += dd;\n      }\n      if (!hit) continue;\n      const rl = sqrt(px * px + py * py) || 1, bx = (px - (TR * px) / rl) / TQ, by = (py - (TR * py) / rl) / TQ, bz = pz / TQ;\n      const nx = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, ny = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, nz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n      const p = y * W + x, q = p * 3, lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      zb[p] = z0 - tt;\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * ct[c] * lam;\n    }\n  const ca = cos(P.al), sa = sin(P.al), cL = cos(lb), sL = sin(lb);\n  for (let i = 0; i \u003c NT; i++) {\n    const o = i * 3, bnx = TN[o], bny = TN[o + 1], bnz = TN[o + 2];\n    const nx = Mt[0] * bnx + Mt[1] * bny + Mt[2] * bnz, ny = Mt[3] * bnx + Mt[4] * bny + Mt[5] * bnz, nz = Mt[6] * bnx + Mt[7] * bny + Mt[8] * bnz;\n    const gx = ca * TU[o] + sa * TV[o], gy = ca * TU[o + 1] + sa * TV[o + 1], gz = ca * TU[o + 2] + sa * TV[o + 2];\n    const dx = Mt[0] * gx + Mt[1] * gy + Mt[2] * gz, dy = Mt[3] * gx + Mt[4] * gy + Mt[5] * gz, dz = Mt[6] * gx + Mt[7] * gy + Mt[8] * gz;\n    const bx = TP[o], by = TP[o + 1], bz = TP[o + 2];\n    const X = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, Y = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, Zz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * TJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * TJ[i * 2] * li, w = 255 * sp;\n    hair(P, TX + X, TY + Y, Zz, hx * len, hy * len, hz * len, ct[0] * br + w, ct[1] * br + w, ct[2] * br + w);\n  }\n\n  // The Euler characteristic beside each: 2 for the sphere, 0 for the torus.\n  digit(buf, DIG2, 59, 2, cs);\n  digit(buf, DIG0, 59, 121, ct);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-hairy-ball","type":"code","name":"hairy-ball","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hairy Ball\n// Family:  noise\n// Idea:    A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the hairy ball theorem (Henri Poincaré 1885, L. E. J. Brouwer 1912) and the Poincaré–Hopf index theorem (Heinz Hopf, 1926), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1\n//\n// Knob 1: Hue. Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together.\n// Knob 2: Speed. At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower.\n// Knob 3: Length. The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter.\n// Knob 4: Comb. How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them.\n// Buttons: K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The sphere sits in the top half, the doughnut in the bottom half.\nconst SX = 32, SY = 31, RS = 24.5;\nconst TX = 32, TY = 97, TR = 18, TQ = 8.2;\n// Roots spread evenly at the same density on both: the doughnut's area\n// 4 pi^2 R r against the sphere's 4 pi R^2.\nconst NS = 1100, NT = round((NS * PI * TR * TQ) / (RS * RS));\n\n// Fixed grain: a seeded generator used once, so the roots never move on the skin.\nlet seed = 0x9e3779b9;\nfunction rnd() {\n  seed = (seed + 0x6d2b79f5) | 0;\n  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\n// Sphere roots on a jittered Fibonacci spiral, unit vectors.\nconst SP = new Float32Array(NS * 3), SJ = new Float32Array(NS * 2);\nfor (let i = 0; i \u003c NS; i++) {\n  const y = 1 - (2 * (i + 0.2 + 0.6 * rnd())) / NS, r = sqrt(max(0, 1 - y * y)), a = i * 2.39996323 + (rnd() - 0.5) * 0.9 * (2 / sqrt(NS)) / max(r, 0.05);\n  SP[i * 3] = r * cos(a);\n  SP[i * 3 + 1] = y;\n  SP[i * 3 + 2] = r * sin(a);\n  SJ[i * 2] = 0.8 + 0.35 * rnd();\n  SJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// Doughnut roots: u round the ring, v round the tube, v drawn with density\n// R + r cos v so the hair is as thick inside the hole as outside.\nconst TP = new Float32Array(NT * 3), TN = new Float32Array(NT * 3), TU = new Float32Array(NT * 3), TV = new Float32Array(NT * 3), TJ = new Float32Array(NT * 2);\nfor (let i = 0; i \u003c NT; i++) {\n  const u = 2 * PI * ((i * 0.7548776662 + 0.3 * rnd() / NT * 40) % 1), F = (i * 0.5698402910 + 0.5 + (rnd() - 0.5) * 0.02) % 1;\n  let v = 2 * PI * F;\n  for (let k = 0; k \u003c 8; k++) v -= (TR * v + TQ * sin(v) - 2 * PI * TR * F) / (TR + TQ * cos(v));\n  const cu = cos(u), su = sin(u), cv = cos(v), sv = sin(v), rr = TR + TQ * cv, o = i * 3;\n  TP[o] = rr * cu, TP[o + 1] = rr * su, TP[o + 2] = TQ * sv;\n  TN[o] = cv * cu, TN[o + 1] = cv * su, TN[o + 2] = sv;\n  TU[o] = -su, TU[o + 1] = cu, TU[o + 2] = 0;\n  TV[o] = -sv * cu, TV[o + 1] = -sv * su, TV[o + 2] = cv;\n  TJ[i * 2] = 0.8 + 0.35 * rnd();\n  TJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// 3x3 rotations, row major.\nconst mul = (A, B) => {\n  const C = new Array(9);\n  for (let r = 0; r \u003c 3; r++) for (let c = 0; c \u003c 3; c++) C[r * 3 + c] = A[r * 3] * B[c] + A[r * 3 + 1] * B[3 + c] + A[r * 3 + 2] * B[6 + c];\n  return C;\n};\nconst rx = (a) => [1, 0, 0, 0, cos(a), -sin(a), 0, sin(a), cos(a)];\nconst ry = (a) => [cos(a), 0, sin(a), 0, 1, 0, -sin(a), 0, cos(a)];\nconst rz = (a) => [cos(a), -sin(a), 0, sin(a), cos(a), 0, 0, 0, 1];\n\n// Light from the upper left, in front; H halfway to the eye.\nconst LX = -0.45 / 0.996, LY = -0.55 / 0.996, LZ = 0.7 / 0.996;\nconst HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The combs the sphere goes through: how far apart its two cowlicks stand\n// (1 opposite each other, 0 merged into one zero of index 2) and the angle\n// of the doughnut's hair (0 along the ring, pi/2 along the tube).\nconst PROG = [[0.55, 0.12], [0, 0.85], [1, -0.55], [0.3, 0.4], [0, -0.9], [1, 0.25]];\n\n// The sphere's body turns about its own vertical axis, tipped toward the\n// eye; the field turns inside it on its own, from the angles a.\nconst bodyM = (T) => mul(rx(-0.42 + 0.12 * sin(T * 0.21)), ry(T * 0.6));\nconst fieldM = (a, T) => mul(rz(a[0] + T * 0.09), mul(rx(a[1] + 0.5 * sin(T * 0.05 + 1)), rz(a[2])));\n// The two zeros in field coordinates sit at w = +-t on the stereographic\n// plane, symmetric about the south pole; t = 1 puts them opposite. Out\n// come both as unit vectors in M's frame.\nfunction zeros(M, t) {\n  const t2 = t * t, Z = [];\n  for (const sg of [1, -1]) {\n    const fx = (2 * sg * t) / (1 + t2), fz = (t2 - 1) / (1 + t2);\n    Z.push(M[0] * fx + M[2] * fz, M[3] * fx + M[5] * fz, M[6] * fx + M[8] * fz);\n  }\n  return Z;\n}\n// A new comb is turned so that a cowlick faces the eye for most of the\n// seven units it lasts, both of them when they stand close enough.\nfunction aim(T, sep, from) {\n  let best = -9, pick = from;\n  for (let c = 0; c \u003c 40; c++) {\n    const a = from.map((v) => v + (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.3 * Math.random()));\n    let lo = 9, sum = 0;\n    for (let j = 0; j \u003c 5; j++) {\n      const Tj = T + 0.8 + j * 1.5, Z = zeros(mul(bodyM(Tj), fieldM(a, Tj)), sep), v = max(Z[2], Z[5]) + 0.5 * min(Z[2], Z[5]);\n      (lo = min(lo, v)), (sum += v);\n    }\n    const score = lo + sum / 5;\n    if (score > best) (best = score), (pick = a);\n  }\n  return pick;\n}\n\n// 3x5 digits, one row of three bits per line, top first.\nconst DIG2 = [7, 1, 7, 4, 7], DIG0 = [7, 5, 5, 5, 7];\nfunction digit(buf, rows, x0, y0, c) {\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++)\n      if ((rows[j] >> (2 - i)) & 1) {\n        const q = ((y0 + j) * W + x0 + i) * 3;\n        for (let k = 0; k \u003c 3; k++) buf[q + k] = 40 + 120 * c[k];\n      }\n}\n\nexport function setup(params) {\n  const a = aim(-0.8, PROG[0][0], [0, 0, 0]);\n  params.s = {\n    T: 0, clock: 0, step: 0, a: a.slice(), ta: a,\n    sep: PROG[0][0], al: PROG[0][1],\n    hue: 0, len: 8, th: PI / 4,\n    buf: new Float32Array(N * 3), zb: new Float32Array(N), zh: new Float32Array(N),\n    cs: new Float32Array(3), ct: new Float32Array(3), cg: new Float32Array(3),\n  };\n}\n\nfunction recomb(P) {\n  P.step = (P.step + 1) % PROG.length;\n  P.clock = 0;\n  P.ta = aim(P.T, PROG[P.step][0], P.ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.len = cl(k[2], 8, 13);\n  P.th = (PI / 4) * (1 + cl(k[3], -1, 1));\n  const dT = d * cl(k[1], 0.2, 3) * 0.5;\n  P.T += dT;\n  P.clock += dT;\n  if (input.btnPressed && input.btnPressed[0]) recomb(P);\n  else if (P.clock > 7) recomb(P);\n  const e = 1 - exp(-max(dT, d * 0.5) * 2.4), g = PROG[P.step];\n  for (let i = 0; i \u003c 3; i++) P.a[i] += (P.ta[i] - P.a[i]) * e;\n  P.sep += (g[0] - P.sep) * e;\n  P.al += (g[1] - P.al) * e;\n}\n\n// One hair: root (x, y, z) on screen, direction (hx, hy, hz) times its\n// length, colour (r, g, b) at the tip; the root end is darker.\nfunction hair(P, x, y, z, hx, hy, hz, r, g, b) {\n  const n = max(2, ceil(Math.hypot(hx, hy) * 1.4) + 1), buf = P.buf, zb = P.zb, zh = P.zh;\n  for (let j = 0; j \u003c n; j++) {\n    const s = j / (n - 1), X = floor(x + hx * s), Y = floor(y + hy * s);\n    if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n    const p = Y * W + X, Z = z + hz * s;\n    if (Z \u003c zb[p] - 1.2 || Z \u003c= zh[p]) continue;\n    zh[p] = Z;\n    const m = 0.22 + 0.78 * s * s, q = p * 3;\n    buf[q] = r * m, buf[q + 1] = g * m, buf[q + 2] = b * m;\n  }\n}\n\n// Hair light after Kajiya and Kay: a fibre is lit by how square it lies to\n// the light and shines where it lies square to the half vector.\nfunction shade(tx, ty, tz, nx, ny, nz) {\n  const tl = tx * LX + ty * LY + tz * LZ, th = tx * HX + ty * HY + tz * HZ, nl = nx * LX + ny * LY + nz * LZ;\n  const lam = 0.22 + 0.78 * max(0, nl), dif = sqrt(max(0, 1 - tl * tl)), sp = (1 - th * th) ** 12;\n  return [lam * (0.35 + 0.65 * dif), 0.75 * sp * max(0, nl + 0.2)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf, zb = P.zb, zh = P.zh, cs = P.cs, ct = P.ct, cg = P.cg, T = P.T;\n  buf.fill(0);\n  zb.fill(-1e9);\n  zh.fill(-1e9);\n  hsv(P.hue + 0.6, 0.75, 1, cs, 0);\n  hsv(P.hue + 0.47, 0.8, 1, ct, 0);\n  hsv(P.hue + 0.12, 0.6, 1, cg, 0);\n  const pulse = 0.85 + 0.15 * sin(T * 3.1);\n\n  // The sphere.\n  const Mb = bodyM(T), Rf = fieldM(P.a, T), M = mul(Mb, Rf), t = P.sep, t2 = t * t, Z = zeros(M, t);\n  // Skin: dark, with the cowlicks glowing through.\n  const R2 = RS * RS;\n  for (let y = max(0, floor(SY - RS)); y \u003c= min(H - 1, ceil(SY + RS)); y++)\n    for (let x = max(0, floor(SX - RS)); x \u003c= min(W - 1, ceil(SX + RS)); x++) {\n      const dx = x + 0.5 - SX, dy = y + 0.5 - SY, rr = dx * dx + dy * dy;\n      if (rr >= R2) continue;\n      const dz = sqrt(R2 - rr), nx = dx / RS, ny = dy / RS, nz = dz / RS, p = y * W + x, q = p * 3;\n      zb[p] = dz;\n      const lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      const gl = exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.05) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.05);\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * (cs[c] * lam + cg[c] * min(1, gl) * 0.9 * pulse);\n    }\n  // The field: v(w) = e^{i theta} (w^2 - t^2) on the plane, carried back to\n  // the sphere. Its only zeros are w = t and w = -t, each of index 1; at\n  // t = 0 they merge into one zero of index 2. There is always one.\n  const kc = cos(P.th), ks = sin(P.th), L = P.len, lb = 0.35 - 0.02 * (L - 8);\n  for (let i = 0; i \u003c NS; i++) {\n    const o = i * 3, bx = SP[o], by = SP[o + 1], bz = SP[o + 2];\n    const nx = Mb[0] * bx + Mb[1] * by + Mb[2] * bz, ny = Mb[3] * bx + Mb[4] * by + Mb[5] * bz, nz = Mb[6] * bx + Mb[7] * by + Mb[8] * bz;\n    if (nz \u003c -0.3) continue;\n    // Into field coordinates: f = Rf^T b.\n    const fx = Rf[0] * bx + Rf[3] * by + Rf[6] * bz, fy = Rf[1] * bx + Rf[4] * by + Rf[7] * bz, fz = Rf[2] * bx + Rf[5] * by + Rf[8] * bz;\n    const den = max(1e-7, 1 - fz), a = fx / den, b = fy / den, re = a * a - b * b - t2, im = 2 * a * b;\n    const va = kc * re - ks * im, vb = ks * re + kc * im, s = 1 + a * a + b * b, qq = (a * va + b * vb) / s;\n    let gx = va - 2 * a * qq, gy = vb - 2 * b * qq, gz = 2 * qq;\n    const gn = Math.hypot(gx, gy, gz) || 1;\n    gx /= gn, gy /= gn, gz /= gn;\n    // Field direction on screen.\n    const dx = M[0] * gx + M[1] * gy + M[2] * gz, dy = M[3] * gx + M[4] * gy + M[5] * gz, dz = M[6] * gx + M[7] * gy + M[8] * gz;\n    // Near a zero the hair stands up and glows.\n    const gl = min(1, exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.07) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.07));\n    const lift = lb + 0.8 * gl, cL = cos(lift), sL = sin(lift);\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * SJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * SJ[i * 2] * li, w = 255 * sp, gg = 255 * gl * pulse;\n    hair(P, SX + RS * nx, SY + RS * ny, RS * nz, hx * len, hy * len, hz * len,\n      cs[0] * br + w + cg[0] * gg, cs[1] * br + w + cg[1] * gg, cs[2] * br + w + cg[2] * gg);\n  }\n\n  // The doughnut, seen from about 40 degrees above, spinning on its\n  // own axis and swaying. Its hair lies along cos(al) e_u + sin(al) e_v: no\n  // zero anywhere, which the torus allows because its Euler characteristic is 0.\n  const Mt = mul(ry(0.3 * sin(T * 0.13)), mul(rx(0.84 + 0.08 * sin(T * 0.17)), rz(T * 0.5)));\n  const RO = TR + TQ, ox = Mt[6], oy = Mt[7], oz = Mt[8];\n  for (let y = max(0, floor(TY - RO)); y \u003c= min(H - 1, ceil(TY + RO)); y++)\n    for (let x = max(0, floor(TX - RO)); x \u003c= min(W - 1, ceil(TX + RO)); x++) {\n      const dx = x + 0.5 - TX, dy = y + 0.5 - TY;\n      if (dx * dx + dy * dy >= RO * RO) continue;\n      // March a ray into the doughnut's own coordinates.\n      const z0 = RO + 1;\n      const px0 = Mt[0] * dx + Mt[3] * dy + Mt[6] * z0, py0 = Mt[1] * dx + Mt[4] * dy + Mt[7] * z0, pz0 = Mt[2] * dx + Mt[5] * dy + Mt[8] * z0;\n      let tt = 0, hit = false, px = 0, py = 0, pz = 0;\n      for (let it = 0; it \u003c 40 && tt \u003c 2 * z0; it++) {\n        px = px0 - ox * tt, py = py0 - oy * tt, pz = pz0 - oz * tt;\n        const qd = sqrt(px * px + py * py) - TR, dd = sqrt(qd * qd + pz * pz) - TQ;\n        if (dd \u003c 0.03) {\n          hit = true;\n          break;\n        }\n        tt += dd;\n      }\n      if (!hit) continue;\n      const rl = sqrt(px * px + py * py) || 1, bx = (px - (TR * px) / rl) / TQ, by = (py - (TR * py) / rl) / TQ, bz = pz / TQ;\n      const nx = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, ny = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, nz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n      const p = y * W + x, q = p * 3, lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      zb[p] = z0 - tt;\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * ct[c] * lam;\n    }\n  const ca = cos(P.al), sa = sin(P.al), cL = cos(lb), sL = sin(lb);\n  for (let i = 0; i \u003c NT; i++) {\n    const o = i * 3, bnx = TN[o], bny = TN[o + 1], bnz = TN[o + 2];\n    const nx = Mt[0] * bnx + Mt[1] * bny + Mt[2] * bnz, ny = Mt[3] * bnx + Mt[4] * bny + Mt[5] * bnz, nz = Mt[6] * bnx + Mt[7] * bny + Mt[8] * bnz;\n    const gx = ca * TU[o] + sa * TV[o], gy = ca * TU[o + 1] + sa * TV[o + 1], gz = ca * TU[o + 2] + sa * TV[o + 2];\n    const dx = Mt[0] * gx + Mt[1] * gy + Mt[2] * gz, dy = Mt[3] * gx + Mt[4] * gy + Mt[5] * gz, dz = Mt[6] * gx + Mt[7] * gy + Mt[8] * gz;\n    const bx = TP[o], by = TP[o + 1], bz = TP[o + 2];\n    const X = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, Y = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, Zz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * TJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * TJ[i * 2] * li, w = 255 * sp;\n    hair(P, TX + X, TY + Y, Zz, hx * len, hy * len, hz * len, ct[0] * br + w, ct[1] * br + w, ct[2] * br + w);\n  }\n\n  // The Euler characteristic beside each: 2 for the sphere, 0 for the torus.\n  digit(buf, DIG2, 59, 2, cs);\n  digit(buf, DIG0, 59, 121, ct);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower."},{"name":"Length","min":8,"max":13,"about":"The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter."},{"name":"Comb","min":-1,"max":1,"about":"How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them."}],"start":[0,2,8,0.06],"measures":{"motion":1.5705,"detail":0.1196,"edges":0.4915,"complexity":1.6126,"coverage":0.5237,"colour":0.1866,"drift":0.0881},"knobResponse":[0.0995,0.1196,0.1223,0.076]},{"slug":"halftone","title":"Halftone","family":"print","round":2,"note":"떠도는 등불 넷이 비추는 저녁 하늘을 잉크마다 각도가 다른 망점으로 찍어요. 점은 농도만큼 자라고 줄며, K1 이 CMY, 리소, 벤데이, 신문 잉크를 골라요.","idea":"A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.","buttons":"K1 tap knocks the plates out of register, and they settle back.","code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-halftone","type":"code","name":"halftone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint."},{"name":"Speed","min":0.1,"max":5,"about":"How fast the lights drift under the screens."},{"name":"Screen","min":8,"max":13,"about":"How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones."},{"name":"Turn","min":0,"max":30,"about":"Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot."}],"start":[0,2,8,0.06],"measures":{"motion":0.0294,"detail":0.0277,"edges":0.6406,"complexity":0.1753,"coverage":0.9983,"colour":0.4355,"drift":0.0403},"knobResponse":[0.2427,0.1303,0.1431,0.1473]},{"slug":"hammersley-lines","title":"Hammersley Lines","family":"algo","round":32,"note":"왼쪽 아래를 원점으로 점이 빗방울처럼 하나씩 떨어져 쌓여요. 원점에서 그 칸까지의 상자 안에서 오른쪽 위로 이어지는 가장 긴 점 사슬의 길이로 띠를 칠해서, 점마다 꺾이는 계단 등고선이 쌍곡선 xy = 일정 꼴로 모여요. 오른쪽 위 모서리까지 가장 긴 사슬은 금빛 길이에요.","idea":"Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.","buttons":"K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.","code":"// ===== Patternflow pattern =====\n// Title:   Hammersley Lines\n// Family:  algo\n// Idea:    Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ulam's problem and Hammersley's process (John Hammersley, 1972), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1\n//\n// Knob 1: Hue. Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white.\n// Knob 2: Speed. How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins.\n// Knob 3: Points. How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000.\n// Knob 4: Bands. How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler.\n// Buttons: K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.\n\nconst W = 64, H = 128, N = W * H, MAXN = 1100;\nconst { floor, exp, log, max, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Drops fall this many rows a second at Speed 2.\nconst FALL = 320;\nconst HOLD = 1.2;\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nfunction clear(P) {\n  P.n = 0;\n  P.nd = 0;\n  P.made = 0;\n  P.next = 0;\n  P.hold = -1;\n  P.top = 0;\n  P.M.fill(0);\n  P.prevM.fill(0);\n  P.glow.fill(0);\n  P.dirty = true;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    px: F(MAXN), py: F(MAXN), pt: F(MAXN), ell: I(MAXN), pred: I(MAXN), byX: I(MAXN), byY: I(MAXN), rank: I(MAXN), chain: I(MAXN),\n    dx: F(MAXN), dy: F(MAXN), dt0: F(MAXN),\n    fen: I(MAXN + 1), fenI: I(MAXN + 1), cell: I(N), M: I(N), prevM: I(N), glow: F(N),\n    gold: new Uint8Array(N), oldR: F(N), oldG: F(N), oldB: F(N), cr: F(N), cg: F(N), cb: F(N),\n    n: 0, nd: 0, made: 0, next: 0, hold: -1, clock: 0, oldA: 0, target: 200, hue: 0, speed: 2, fill: 0.3, top: 0, dirty: true,\n  };\n  clear(params.s);\n}\n\n// Puts point k into a list kept sorted by one coordinate.\nfunction insert(list, key, k) {\n  let lo = 0, hi = k;\n  while (lo \u003c hi) {\n    const m = (lo + hi) >> 1;\n    if (key[list[m]] \u003c key[k]) lo = m + 1;\n    else hi = m;\n  }\n  for (let j = k; j > lo; j--) list[j] = list[j - 1];\n  list[lo] = k;\n}\n\n// A drop lands and becomes a point.\nfunction land(P, x, y) {\n  const k = P.n++;\n  (P.px[k] = x), (P.py[k] = y), (P.pt[k] = P.clock);\n  insert(P.byX, P.px, k);\n  insert(P.byY, P.py, k);\n  P.dirty = true;\n}\n\n// Longest chains. Taking the points left to right, the longest chain ending at\n// a point is one more than the longest ending at any earlier point below it;\n// a Fenwick tree over the points' height ranks keeps the best so far below\n// every height.\n// Then L on the pixel grid: L(x, y) is the longest chain among the points in\n// the box from the origin to the pixel's top right corner.\nfunction chains(P) {\n  const { px, py, ell, pred, byX, byY, rank, fen, fenI, cell, M, chain } = P, n = P.n;\n  for (let a = 0; a \u003c n; a++) rank[byY[a]] = a;\n  fen.fill(0);\n  fenI.fill(-1);\n  let best = 0, bestI = -1;\n  for (let a = 0; a \u003c n; a++) {\n    const p = byX[a], b = rank[p];\n    let l = 0, li = -1;\n    for (let i = b; i > 0; i -= i & -i) if (fen[i] > l) (l = fen[i]), (li = fenI[i]);\n    ell[p] = l + 1;\n    pred[p] = li;\n    for (let i = b + 1; i \u003c= n; i += i & -i) if (fen[i] \u003c l + 1) (fen[i] = l + 1), (fenI[i] = p);\n    if (l + 1 > best) (best = l + 1), (bestI = p);\n  }\n  P.top = best;\n  let c = 0;\n  for (let p = bestI; p >= 0; p = pred[p]) chain[c++] = p;\n  cell.fill(0);\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]);\n    if (ell[p] > cell[i]) cell[i] = ell[p];\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let v = cell[i];\n      if (x > 0 && M[i - 1] > v) v = M[i - 1];\n      if (j > 0 && M[i - W] > v) v = M[i - W];\n      M[i] = v;\n    }\n  // The longest chain as a gold path from the origin through its points to\n  // the far corner.\n  const { gold } = P;\n  gold.fill(0);\n  if (!c) return;\n  let x0 = 0, y0 = 0;\n  for (let k = c - 1; k >= -1; k--) {\n    const x1 = k >= 0 ? px[chain[k]] : W - 0.5, y1 = k >= 0 ? py[chain[k]] : H - 0.5;\n    const steps = max(1, Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 2));\n    for (let s = 0; s \u003c= steps; s++) {\n      const u = s / steps, xx = floor(x0 + (x1 - x0) * u), yy = floor(y0 + (y1 - y0) * u);\n      gold[yy * W + xx] = 1;\n    }\n    (x0 = x1), (y0 = y1);\n  }\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  clear(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 200, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  P.target = floor(cl(kv[2], 200, 1000));\n  P.fill = 0.9 * cl(kv[3], 0, 1) ** 0.4;\n  P.clock += d;\n  P.oldA *= exp(-d / 0.4);\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  // Poisson arrivals at the top of the panel: target points in 12 / Speed\n  // seconds. Each falls straight down to its place and lands there.\n  const rate = (P.target * P.speed) / 12;\n  if (P.hold \u003c 0) {\n    P.next -= d;\n    while (P.next \u003c= 0 && P.made \u003c P.target) {\n      const k = P.nd++;\n      (P.dx[k] = Math.random() * W), (P.dy[k] = Math.random() * H), (P.dt0[k] = P.clock + P.next);\n      P.made++;\n      P.next += -log(1 - Math.random()) / rate;\n    }\n  }\n  // Drops: dy is the landing height from the bottom; a drop starts at the top.\n  let w = 0;\n  for (let k = 0; k \u003c P.nd; k++) {\n    const fallen = (P.clock - P.dt0[k]) * FALL * (0.6 + 0.2 * P.speed);\n    if (fallen >= H - P.dy[k]) land(P, P.dx[k], P.dy[k]);\n    else (P.dx[w] = P.dx[k]), (P.dy[w] = P.dy[k]), (P.dt0[w] = P.dt0[k]), w++;\n  }\n  P.nd = w;\n  if (P.dirty) {\n    P.prevM.set(P.M);\n    chains(P);\n    // A landing lifts L by one wherever the new point lengthens the best\n    // chain; the level lines there flash white as they move.\n    const { M, prevM, glow } = P;\n    for (let i = 0; i \u003c N; i++) if (M[i] !== prevM[i]) glow[i] = 1;\n    P.dirty = false;\n  }\n  const g = exp(-d / 0.35), { glow } = P;\n  for (let i = 0; i \u003c N; i++) glow[i] *= g;\n  if (P.hold \u003c 0 && P.made >= P.target && P.nd === 0) P.hold = 0;\n  else if (P.hold >= 0 && (P.hold += d) > HOLD) restart(P);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { M, glow, gold, px, py, pt, cr, cg, cb, oldR, oldG, oldB } = P;\n  const h0 = P.hue, fill = P.fill, oa = P.oldA, now = P.clock;\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, L = M[i];\n      let R = 0, G = 0, B = 0;\n      const line = (x > 0 && M[i - 1] !== L) || (j > 0 && M[i - W] !== L);\n      // Band colour swings between cyan and magenta and back every 24 levels.\n      const ph = (L / 24) % 1, hue = h0 + 0.5 + 0.38 * (ph \u003c 0.5 ? 2 * ph : 2 - 2 * ph);\n      if (L > 0) {\n        hsv(hue, 0.85, fill * (0.55 + 0.45 * (L & 1)));\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      if (line) {\n        const gw = glow[i];\n        hsv(hue, 0.5 - 0.2 * gw, 0.5 + 0.45 * gw);\n        (R = max(R, C[0])), (G = max(G, C[1])), (B = max(B, C[2]));\n      }\n      if (gold[i]) {\n        hsv(h0 + 0.12, 0.7, 1);\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      cr[i] = R * 255;\n      cg[i] = G * 255;\n      cb[i] = B * 255;\n    }\n  // Points: white, brightest on landing.\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]), v = 190 + 65 * exp(-(now - pt[p]) / 0.4);\n    (cr[i] = max(cr[i], v)), (cg[i] = max(cg[i], v)), (cb[i] = max(cb[i], v));\n  }\n  // Falling drops: a short streak above the head.\n  const sp = FALL * (0.6 + 0.2 * P.speed);\n  for (let k = 0; k \u003c P.nd; k++) {\n    const head = H - (now - P.dt0[k]) * sp, x = floor(P.dx[k]);\n    for (let s = 0; s \u003c 4; s++) {\n      const y = floor(head) + s;\n      if (y \u003c 0 || y >= H || y \u003c P.dy[k]) continue;\n      const i = y * W + x, v = 200 - 45 * s;\n      (cr[i] = max(cr[i], v * 0.8)), (cg[i] = max(cg[i], v * 0.9)), (cb[i] = max(cb[i], v));\n    }\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let R = cr[i], G = cg[i], B = cb[i];\n      if (oa > 0.01) (R = max(R, oldR[i] * oa)), (G = max(G, oldG[i] * oa)), (B = max(B, oldB[i] * oa));\n      display.setPixel(x, H - 1 - j, R, G, B);\n    }\n}\n","layer":{"id":"layer-hammersley-lines","type":"code","name":"hammersley-lines","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hammersley Lines\n// Family:  algo\n// Idea:    Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ulam's problem and Hammersley's process (John Hammersley, 1972), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1\n//\n// Knob 1: Hue. Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white.\n// Knob 2: Speed. How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins.\n// Knob 3: Points. How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000.\n// Knob 4: Bands. How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler.\n// Buttons: K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.\n\nconst W = 64, H = 128, N = W * H, MAXN = 1100;\nconst { floor, exp, log, max, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Drops fall this many rows a second at Speed 2.\nconst FALL = 320;\nconst HOLD = 1.2;\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nfunction clear(P) {\n  P.n = 0;\n  P.nd = 0;\n  P.made = 0;\n  P.next = 0;\n  P.hold = -1;\n  P.top = 0;\n  P.M.fill(0);\n  P.prevM.fill(0);\n  P.glow.fill(0);\n  P.dirty = true;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    px: F(MAXN), py: F(MAXN), pt: F(MAXN), ell: I(MAXN), pred: I(MAXN), byX: I(MAXN), byY: I(MAXN), rank: I(MAXN), chain: I(MAXN),\n    dx: F(MAXN), dy: F(MAXN), dt0: F(MAXN),\n    fen: I(MAXN + 1), fenI: I(MAXN + 1), cell: I(N), M: I(N), prevM: I(N), glow: F(N),\n    gold: new Uint8Array(N), oldR: F(N), oldG: F(N), oldB: F(N), cr: F(N), cg: F(N), cb: F(N),\n    n: 0, nd: 0, made: 0, next: 0, hold: -1, clock: 0, oldA: 0, target: 200, hue: 0, speed: 2, fill: 0.3, top: 0, dirty: true,\n  };\n  clear(params.s);\n}\n\n// Puts point k into a list kept sorted by one coordinate.\nfunction insert(list, key, k) {\n  let lo = 0, hi = k;\n  while (lo \u003c hi) {\n    const m = (lo + hi) >> 1;\n    if (key[list[m]] \u003c key[k]) lo = m + 1;\n    else hi = m;\n  }\n  for (let j = k; j > lo; j--) list[j] = list[j - 1];\n  list[lo] = k;\n}\n\n// A drop lands and becomes a point.\nfunction land(P, x, y) {\n  const k = P.n++;\n  (P.px[k] = x), (P.py[k] = y), (P.pt[k] = P.clock);\n  insert(P.byX, P.px, k);\n  insert(P.byY, P.py, k);\n  P.dirty = true;\n}\n\n// Longest chains. Taking the points left to right, the longest chain ending at\n// a point is one more than the longest ending at any earlier point below it;\n// a Fenwick tree over the points' height ranks keeps the best so far below\n// every height.\n// Then L on the pixel grid: L(x, y) is the longest chain among the points in\n// the box from the origin to the pixel's top right corner.\nfunction chains(P) {\n  const { px, py, ell, pred, byX, byY, rank, fen, fenI, cell, M, chain } = P, n = P.n;\n  for (let a = 0; a \u003c n; a++) rank[byY[a]] = a;\n  fen.fill(0);\n  fenI.fill(-1);\n  let best = 0, bestI = -1;\n  for (let a = 0; a \u003c n; a++) {\n    const p = byX[a], b = rank[p];\n    let l = 0, li = -1;\n    for (let i = b; i > 0; i -= i & -i) if (fen[i] > l) (l = fen[i]), (li = fenI[i]);\n    ell[p] = l + 1;\n    pred[p] = li;\n    for (let i = b + 1; i \u003c= n; i += i & -i) if (fen[i] \u003c l + 1) (fen[i] = l + 1), (fenI[i] = p);\n    if (l + 1 > best) (best = l + 1), (bestI = p);\n  }\n  P.top = best;\n  let c = 0;\n  for (let p = bestI; p >= 0; p = pred[p]) chain[c++] = p;\n  cell.fill(0);\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]);\n    if (ell[p] > cell[i]) cell[i] = ell[p];\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let v = cell[i];\n      if (x > 0 && M[i - 1] > v) v = M[i - 1];\n      if (j > 0 && M[i - W] > v) v = M[i - W];\n      M[i] = v;\n    }\n  // The longest chain as a gold path from the origin through its points to\n  // the far corner.\n  const { gold } = P;\n  gold.fill(0);\n  if (!c) return;\n  let x0 = 0, y0 = 0;\n  for (let k = c - 1; k >= -1; k--) {\n    const x1 = k >= 0 ? px[chain[k]] : W - 0.5, y1 = k >= 0 ? py[chain[k]] : H - 0.5;\n    const steps = max(1, Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 2));\n    for (let s = 0; s \u003c= steps; s++) {\n      const u = s / steps, xx = floor(x0 + (x1 - x0) * u), yy = floor(y0 + (y1 - y0) * u);\n      gold[yy * W + xx] = 1;\n    }\n    (x0 = x1), (y0 = y1);\n  }\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  clear(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 200, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  P.target = floor(cl(kv[2], 200, 1000));\n  P.fill = 0.9 * cl(kv[3], 0, 1) ** 0.4;\n  P.clock += d;\n  P.oldA *= exp(-d / 0.4);\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  // Poisson arrivals at the top of the panel: target points in 12 / Speed\n  // seconds. Each falls straight down to its place and lands there.\n  const rate = (P.target * P.speed) / 12;\n  if (P.hold \u003c 0) {\n    P.next -= d;\n    while (P.next \u003c= 0 && P.made \u003c P.target) {\n      const k = P.nd++;\n      (P.dx[k] = Math.random() * W), (P.dy[k] = Math.random() * H), (P.dt0[k] = P.clock + P.next);\n      P.made++;\n      P.next += -log(1 - Math.random()) / rate;\n    }\n  }\n  // Drops: dy is the landing height from the bottom; a drop starts at the top.\n  let w = 0;\n  for (let k = 0; k \u003c P.nd; k++) {\n    const fallen = (P.clock - P.dt0[k]) * FALL * (0.6 + 0.2 * P.speed);\n    if (fallen >= H - P.dy[k]) land(P, P.dx[k], P.dy[k]);\n    else (P.dx[w] = P.dx[k]), (P.dy[w] = P.dy[k]), (P.dt0[w] = P.dt0[k]), w++;\n  }\n  P.nd = w;\n  if (P.dirty) {\n    P.prevM.set(P.M);\n    chains(P);\n    // A landing lifts L by one wherever the new point lengthens the best\n    // chain; the level lines there flash white as they move.\n    const { M, prevM, glow } = P;\n    for (let i = 0; i \u003c N; i++) if (M[i] !== prevM[i]) glow[i] = 1;\n    P.dirty = false;\n  }\n  const g = exp(-d / 0.35), { glow } = P;\n  for (let i = 0; i \u003c N; i++) glow[i] *= g;\n  if (P.hold \u003c 0 && P.made >= P.target && P.nd === 0) P.hold = 0;\n  else if (P.hold >= 0 && (P.hold += d) > HOLD) restart(P);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { M, glow, gold, px, py, pt, cr, cg, cb, oldR, oldG, oldB } = P;\n  const h0 = P.hue, fill = P.fill, oa = P.oldA, now = P.clock;\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, L = M[i];\n      let R = 0, G = 0, B = 0;\n      const line = (x > 0 && M[i - 1] !== L) || (j > 0 && M[i - W] !== L);\n      // Band colour swings between cyan and magenta and back every 24 levels.\n      const ph = (L / 24) % 1, hue = h0 + 0.5 + 0.38 * (ph \u003c 0.5 ? 2 * ph : 2 - 2 * ph);\n      if (L > 0) {\n        hsv(hue, 0.85, fill * (0.55 + 0.45 * (L & 1)));\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      if (line) {\n        const gw = glow[i];\n        hsv(hue, 0.5 - 0.2 * gw, 0.5 + 0.45 * gw);\n        (R = max(R, C[0])), (G = max(G, C[1])), (B = max(B, C[2]));\n      }\n      if (gold[i]) {\n        hsv(h0 + 0.12, 0.7, 1);\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      cr[i] = R * 255;\n      cg[i] = G * 255;\n      cb[i] = B * 255;\n    }\n  // Points: white, brightest on landing.\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]), v = 190 + 65 * exp(-(now - pt[p]) / 0.4);\n    (cr[i] = max(cr[i], v)), (cg[i] = max(cg[i], v)), (cb[i] = max(cb[i], v));\n  }\n  // Falling drops: a short streak above the head.\n  const sp = FALL * (0.6 + 0.2 * P.speed);\n  for (let k = 0; k \u003c P.nd; k++) {\n    const head = H - (now - P.dt0[k]) * sp, x = floor(P.dx[k]);\n    for (let s = 0; s \u003c 4; s++) {\n      const y = floor(head) + s;\n      if (y \u003c 0 || y >= H || y \u003c P.dy[k]) continue;\n      const i = y * W + x, v = 200 - 45 * s;\n      (cr[i] = max(cr[i], v * 0.8)), (cg[i] = max(cg[i], v * 0.9)), (cb[i] = max(cb[i], v));\n    }\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let R = cr[i], G = cg[i], B = cb[i];\n      if (oa > 0.01) (R = max(R, oldR[i] * oa)), (G = max(G, oldG[i] * oa)), (B = max(B, oldB[i] * oa));\n      display.setPixel(x, H - 1 - j, R, G, B);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins."},{"name":"Points","min":200,"max":1000,"about":"How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000."},{"name":"Bands","min":0,"max":1,"about":"How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler."}],"start":[0,2,200,0.06],"measures":{"motion":0.4589,"detail":0.1005,"edges":0.9193,"complexity":0.242,"coverage":0.9226,"colour":0.2106,"drift":0.1453},"knobResponse":[0.1723,0.2043,0.2559,0.3087]},{"slug":"hanging-scroll","title":"Hanging Scroll","family":"paper","round":23,"note":"어두운 도코노마 벽의 못에 족자가 걸리고, 아래 굴대가 내려가며 비단 표구 속 상아빛 종이에 그린 먹 산수를 한 줄씩 드러내요. 안개 낀 봉우리 아래 소나무와 폭포, 초가와 쪽배가 있고 붉은 낙관이 찍혀 있어요. 외풍에 조금 흔들리다 아래부터 말려 올라가면 바람 맞는 대나무가 내려오고, 달 아래 홍매와 파도 위 학이 뒤를 이어요.","idea":"A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.","buttons":"K1 tap rolls the scroll up now and unrolls the next painting.","code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","layer":{"id":"layer-hanging-scroll","type":"code","name":"hanging-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half."},{"name":"Painting","min":0,"max":3,"about":"Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down."},{"name":"Ink","min":0,"max":1,"about":"How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.177,"detail":0.0295,"edges":0.2326,"complexity":1.3758,"coverage":0.4677,"colour":0.1211,"drift":0.2049},"knobResponse":[0.0845,0.2,0.0646,0.0324]},{"slug":"harmonograph","title":"Harmonograph","family":"line","round":1,"note":"단순한 비에서 조금씩 어긋난 진자 셋이 닫히지 않는 그림을 그리고, 멎어 가며 가운데로 감겨 들어가요.","idea":"Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.","buttons":"K1 tap gives the pendulums a fresh push.","code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","layer":{"id":"layer-harmonograph","type":"code","name":"harmonograph","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the fresh line; older line turns a little round the wheel as it fades."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the pen travels; a slow pen's line lasts longer."},{"name":"Ratio","min":0,"max":7,"about":"Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune."},{"name":"Damping","min":0.02,"max":0.4,"about":"How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds."}],"start":[0,2,0,0.06],"measures":{"motion":0.0325,"detail":0.0469,"edges":0.3334,"complexity":0.8432,"coverage":0.2444,"colour":0.1802,"drift":0.053},"knobResponse":[0.0712,0.0419,0.0758,0.0561]},{"slug":"harp","title":"Harp","family":"music","round":16,"note":"무대에 선 페달 하프가 패널 높이를 다 채우고, 보이지 않는 하프 주자가 뜯은 줄이 렌즈 꼴로 번졌다가 잦아들어요. K3 은 펼친화음, 굴린 화음, 하모닉스, 글리산도 가운데 하나를 고르고, K1 을 누르면 29줄을 다 훑는 글리산도가 올라갔다 내려와요.","idea":"A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.","buttons":"K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.","code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","layer":{"id":"layer-harp","type":"code","name":"harp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210."},{"name":"Figure","min":0,"max":3,"about":"What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass."},{"name":"Damp","min":0,"max":1,"about":"At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds."}],"start":[0,2,0,0.06],"measures":{"motion":0.151,"detail":0.0758,"edges":0.4257,"complexity":1.512,"coverage":0.8852,"colour":0.2261,"drift":0.0747},"knobResponse":[0.0708,0.0671,0.0617,0.0595]},{"slug":"heawood-torus","title":"Heawood Torus","family":"topology","round":36,"note":"세로로 긴 토러스가 천천히 돌며 헤우드의 지도를 보여 줘요. 일곱 나라가 저마다 나머지 여섯과 모두 맞닿아서, 구 위의 지도와 달리 이 지도는 일곱 색이 있어야 칠해져요. K3 은 구멍을 넓혀 굵은 관을 가는 고리로 만들고, K1 을 누르면 여섯 초 동안 일곱 수도와 그 사이 길 21개가 흰 선으로 그려져요.","idea":"A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.","buttons":"K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.","code":"// ===== Patternflow pattern =====\n// Title:   Heawood Torus\n// Family:  topology\n// Idea:    A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Heawood's seven-colour map on the torus (Percy Heawood, 1890), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1\n//\n// Knob 1: Hue. Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red.\n// Knob 2: Speed. How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s.\n// Knob 3: Hole. The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall.\n// Knob 4: Tilt. How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above.\n// Buttons: K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sin, cos, abs, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The plane tiled by hexagons, the hexagon at axial (a, b) coloured\n// (a + 3b) mod 7. Its six neighbours sit at (+-1, 0), (0, +-1) and\n// +-(1, -1), so their colours differ from its own by +-1, +-3 and +-2: all\n// six other colours, once each. The colouring repeats on the lattice L of\n// (a, b) with a + 3b = 0 mod 7, which has index 7, so the torus plane / L\n// holds exactly one hexagon of each colour, and each touches the other six.\n// L is spanned by E1 = (2, -3) and E2 = (1, 2) (determinant 7); of all the\n// bases of L these two shear the hexagons least on the long, thin parameter\n// square of this torus.\nconst E1A = 2, E1B = -3, E2A = 1, E2B = 2;\n\n// Samples round the core curve and round the tube; samples along each road.\nconst NU = 600, NV = 120, NS = NU * NV, NR = 200;\n// The outer half width of the torus in LEDs, and its half height before it leans.\nconst RO = 31, HALF = 63;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The country at fractional axial coordinates (qa, qb): round to the nearest\n// hexagon centre in cube coordinates, then colour it.\nfunction country(qa, qb) {\n  const x = qa, z = qb, y = -x - z;\n  let rx = round(x), ry = round(y), rz = round(z);\n  const dx = abs(rx - x), dy = abs(ry - y), dz = abs(rz - z);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  return (((rx + 3 * rz) % 7) + 7) % 7;\n}\n\n// The surface: a tube of radius r round a stadium, two half circles of\n// radius rc joined by straights 2 ly long, standing up in the x-y plane.\n// (U, V) in the unit square is the fraction of the way round the stadium and\n// round the tube. core() writes the point of the stadium at U and its\n// outward normal in the plane, (cx, cy, ox, oy), at out[o..o+3]; the surface\n// point is (cx + r cos v ox, cy + r cos v oy, r sin v) with v = 2 pi V, and\n// its normal (cos v ox, cos v oy, sin v).\nfunction core(S, U, out, o) {\n  const rc = S.rc, ly = S.ly;\n  let s = (U - floor(U)) * S.per, cx, cy, ox, oy;\n  if (s \u003c 2 * ly) (cx = rc), (cy = -ly + s), (ox = 1), (oy = 0);\n  else if ((s -= 2 * ly) \u003c PI * rc) {\n    const a = s / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = ly + rc * oy);\n  } else if ((s -= PI * rc) \u003c 2 * ly) (cx = -rc), (cy = ly - s), (ox = -1), (oy = 0);\n  else {\n    const a = PI + (s - 2 * ly) / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = -ly + rc * oy);\n  }\n  out[o] = cx;\n  out[o + 1] = cy;\n  out[o + 2] = ox;\n  out[o + 3] = oy;\n}\n\n// The plane point U E1 + V E2 is the one painted at (U, V), so the square's\n// sides go to E1 and E2 and the map closes up on the torus. Back the other\n// way, (qa, qb) lands at U = (2 qa - qb) / 7, V = (3 qa + 2 qb) / 7.\nfunction build(S) {\n  S.rc = RO / (1 + S.ratio);\n  S.r = S.rc * S.ratio;\n  S.ly = HALF - RO;\n  S.per = 4 * S.ly + TAU * S.rc;\n  const { cc, tc, ts, cid, road } = S;\n  for (let j = 0; j \u003c NV; j++) {\n    tc[j] = cos((TAU * (j + 0.5)) / NV);\n    ts[j] = sin((TAU * (j + 0.5)) / NV);\n  }\n  for (let i = 0; i \u003c NU; i++) {\n    const U = (i + 0.5) / NU;\n    core(S, U, cc, 4 * i);\n    for (let j = 0; j \u003c NV; j++) cid[i * NV + j] = country(U * E1A + (j + 0.5) / NV * E2A, U * E1B + (j + 0.5) / NV * E2B);\n  }\n  // The dual graph: the capital of country a sits at the hexagon (a, 0), and\n  // three roads leave it toward (a + 1, 0), (a, 1) and (a + 1, -1). Seven\n  // capitals times three is all 21 roads of K7, each crossing one border.\n  const q4 = [0, 0, 0, 0];\n  let n = 0;\n  for (let a = 0; a \u003c 7; a++)\n    for (const [da, db] of [[1, 0], [0, 1], [1, -1]])\n      for (let t = 0; t \u003c NR; t++, n++) {\n        const qa = a + (da * t) / (NR - 1), qb = (db * t) / (NR - 1), v = (TAU * (3 * qa + 2 * qb)) / 7, o = 3 * n;\n        core(S, (2 * qa - qb) / 7, q4, 0);\n        road[o] = q4[0] + S.r * cos(v) * q4[2];\n        road[o + 1] = q4[1] + S.r * cos(v) * q4[3];\n        road[o + 2] = S.r * sin(v);\n      }\n}\n\nexport function setup(params) {\n  // The turn starts 0.4 short of face-on, so at Speed 2 the torus faces you\n  // squarely one second in and stands edge-on five seconds in.\n  params.s = {\n    hue: 0, speed: 2, ratio: -1, tilt: 0.06, spin: -0.4, nod: 0, roads: -1, rc: 0, r: 0, ly: 0, per: 0,\n    cc: new Float32Array(4 * NU), tc: new Float32Array(NV), ts: new Float32Array(NV), cid: new Uint8Array(NS), road: new Float32Array(3 * 21 * NR),\n    zb: new Float32Array(N), ib: new Int32Array(N), ib2: new Int32Array(N), cb: new Uint8Array(N), rb: new Uint8Array(N), pal: new Float32Array(21),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[3], 0, 1);\n  const ratio = 0.85 - 0.45 * cl(k[2], 0, 1);\n  if (abs(ratio - S.ratio) > 1e-4) {\n    S.ratio = ratio;\n    build(S);\n  }\n  S.spin += d * S.speed * 0.2;\n  S.nod += d * S.speed * 0.11;\n  if (S.roads >= 0) {\n    S.roads += d;\n    if (S.roads > 7) S.roads = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.roads = S.roads \u003c 0 ? 0 : min(S.roads, 0.5);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { cc, tc, ts, cid, zb, ib, ib2, cb, rb, road, pal } = S, r = S.r;\n  // Spin about the torus's long axis, then lean the top of that axis toward\n  // the viewer, who looks along +z.\n  const ph = S.spin, cp = cos(ph), sp = sin(ph);\n  const la = -(0.1 + 0.6 * S.tilt + 0.05 * sin(S.nod)), cla = cos(la), sla = sin(la);\n  const m0 = cp, m2 = sp;\n  const m3 = sla * sp, m4 = cla, m5 = -sla * cp;\n  const m6 = -cla * sp, m7 = sla, m8 = cla * cp;\n  // Fit the leaning torus to the panel height.\n  const sc = min(1, 63.5 / (HALF * cla - RO * sla));\n  zb.fill(1e9);\n  ib.fill(-1);\n  // Each sample's screen x, y and depth are a column part plus cos v and\n  // sin v times a part, so the loop over the tube is a few multiplies.\n  const Xb = sc * m2 * r, Yb = -sc * m5 * r, Zb = m8 * r;\n  for (let i = 0; i \u003c NU; i++) {\n    const cx = cc[4 * i], cy = cc[4 * i + 1], ox = cc[4 * i + 2], oy = cc[4 * i + 3], A = m6 * ox + m7 * oy;\n    const X0 = 32 + sc * m0 * cx, Xa = sc * m0 * r * ox, Y0 = 64 - sc * (m3 * cx + m4 * cy), Ya = -sc * r * (m3 * ox + m4 * oy);\n    const Z0 = m6 * cx + m7 * cy, Za = r * A;\n    for (let j = 0, k = i * NV; j \u003c NV; j++, k++) {\n      const cv = tc[j], sv = ts[j];\n      // Facing away from the eye.\n      if (cv * A + sv * m8 > 0.05) continue;\n      const px = floor(X0 + cv * Xa + sv * Xb), py = floor(Y0 + cv * Ya + sv * Yb);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px, Z = Z0 + cv * Za + sv * Zb;\n      if (Z \u003c zb[p]) (zb[p] = Z), (ib[p] = k);\n    }\n  }\n  // Fill LEDs that no front sample reached, or where the back of the tube\n  // shows through between two front samples.\n  ib2.set(ib);\n  for (let y = 1; y \u003c H - 1; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, z = zb[p];\n      for (let q = 1; q \u003c= W; q += W - 1) {\n        const a = zb[p - q], b = zb[p + q];\n        if (a \u003c 1e8 && b \u003c 1e8 && abs(a - b) \u003c 4 && z > max(a, b) + 3) {\n          ib2[p] = a \u003c b ? ib[p - q] : ib[p + q];\n          break;\n        }\n      }\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const k = ib2[p];\n    cb[p] = k \u003c 0 ? 255 : cid[k];\n    if (k >= 0 && k !== ib[p]) {\n      const i = (k / NV) | 0, j = k - i * NV, o = 4 * i;\n      zb[p] = m6 * (cc[o] + r * tc[j] * cc[o + 2]) + m7 * (cc[o + 1] + r * tc[j] * cc[o + 3]) + m8 * r * ts[j];\n    }\n  }\n\n  // The roads, where they lie on the visible surface, and the capitals at\n  // their ends as 2 x 2 dots.\n  const e = S.roads \u003c 0 ? 0 : sm(S.roads / 0.5) * (1 - sm(S.roads - 6));\n  if (e > 0) {\n    rb.fill(0);\n    for (let i = 0, o = 0; i \u003c 21 * NR; i++, o += 3) {\n      const x = road[o], y = road[o + 1], z = road[o + 2];\n      const px = floor(32 + sc * (m0 * x + m2 * z)), py = floor(64 - sc * (m3 * x + m4 * y + m5 * z));\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      if (m6 * x + m7 * y + m8 * z > zb[p] + 1.5) continue;\n      rb[p] = 1;\n      if (i % NR === 0 && px \u003c W - 1 && py \u003c H - 1) rb[p + 1] = rb[p + W] = rb[p + W + 1] = 1;\n    }\n  }\n\n  // The seven colours, a seventh apart, opening off red.\n  const h0 = S.hue + 1 / 14;\n  for (let c = 0; c \u003c 7; c++) hsv(h0 + c / 7, 1, 1, pal, 3 * c);\n  // Light from the upper left, in front.\n  const lx = -0.45, ly = 0.6, lz = -0.66;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, c = cb[p];\n      if (c === 255) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const k = ib2[p], i = (k / NV) | 0, j = k - i * NV, nx = tc[j] * cc[4 * i + 2], ny = tc[j] * cc[4 * i + 3], nz = ts[j];\n      const vx = m0 * nx + m2 * nz, vy = m3 * nx + m4 * ny + m5 * nz, vz = m6 * nx + m7 * ny + m8 * nz;\n      const dif = max(0, vx * lx + vy * ly + vz * lz);\n      // Half vector of the light and the eye at -z, for a small shine.\n      let hv = max(0, (vx * lx + vy * ly + vz * (lz - 1)) / 1.82);\n      (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv);\n      const spec = hv * 0.5;\n      const lit = (0.6 + 0.55 * dif) * (1 - 0.2 * e);\n      let R = pal[3 * c] * lit + spec, G = pal[3 * c + 1] * lit + spec, B = pal[3 * c + 2] * lit + spec;\n      // A dark LED where the country changes to the right or below, and\n      // where the surface folds behind a nearer part of the tube.\n      const r = x \u003c W - 1 ? cb[p + 1] : 255, b = y \u003c H - 1 ? cb[p + W] : 255, zf = zb[p] - 6;\n      if ((r !== 255 && r !== c) || (b !== 255 && b !== c) ||\n        (x > 0 && cb[p - 1] !== 255 && zb[p - 1] \u003c zf) || (r !== 255 && zb[p + 1] \u003c zf) ||\n        (y > 0 && cb[p - W] !== 255 && zb[p - W] \u003c zf) || (b !== 255 && zb[p + W] \u003c zf)) (R *= 0.08), (G *= 0.08), (B *= 0.08);\n      if (e > 0 && rb[p]) {\n        R += (1 - R) * e;\n        G += (1 - G) * e;\n        B += (1 - B) * e;\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(B * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-heawood-torus","type":"code","name":"heawood-torus","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Heawood Torus\n// Family:  topology\n// Idea:    A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Heawood's seven-colour map on the torus (Percy Heawood, 1890), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1\n//\n// Knob 1: Hue. Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red.\n// Knob 2: Speed. How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s.\n// Knob 3: Hole. The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall.\n// Knob 4: Tilt. How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above.\n// Buttons: K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sin, cos, abs, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The plane tiled by hexagons, the hexagon at axial (a, b) coloured\n// (a + 3b) mod 7. Its six neighbours sit at (+-1, 0), (0, +-1) and\n// +-(1, -1), so their colours differ from its own by +-1, +-3 and +-2: all\n// six other colours, once each. The colouring repeats on the lattice L of\n// (a, b) with a + 3b = 0 mod 7, which has index 7, so the torus plane / L\n// holds exactly one hexagon of each colour, and each touches the other six.\n// L is spanned by E1 = (2, -3) and E2 = (1, 2) (determinant 7); of all the\n// bases of L these two shear the hexagons least on the long, thin parameter\n// square of this torus.\nconst E1A = 2, E1B = -3, E2A = 1, E2B = 2;\n\n// Samples round the core curve and round the tube; samples along each road.\nconst NU = 600, NV = 120, NS = NU * NV, NR = 200;\n// The outer half width of the torus in LEDs, and its half height before it leans.\nconst RO = 31, HALF = 63;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The country at fractional axial coordinates (qa, qb): round to the nearest\n// hexagon centre in cube coordinates, then colour it.\nfunction country(qa, qb) {\n  const x = qa, z = qb, y = -x - z;\n  let rx = round(x), ry = round(y), rz = round(z);\n  const dx = abs(rx - x), dy = abs(ry - y), dz = abs(rz - z);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  return (((rx + 3 * rz) % 7) + 7) % 7;\n}\n\n// The surface: a tube of radius r round a stadium, two half circles of\n// radius rc joined by straights 2 ly long, standing up in the x-y plane.\n// (U, V) in the unit square is the fraction of the way round the stadium and\n// round the tube. core() writes the point of the stadium at U and its\n// outward normal in the plane, (cx, cy, ox, oy), at out[o..o+3]; the surface\n// point is (cx + r cos v ox, cy + r cos v oy, r sin v) with v = 2 pi V, and\n// its normal (cos v ox, cos v oy, sin v).\nfunction core(S, U, out, o) {\n  const rc = S.rc, ly = S.ly;\n  let s = (U - floor(U)) * S.per, cx, cy, ox, oy;\n  if (s \u003c 2 * ly) (cx = rc), (cy = -ly + s), (ox = 1), (oy = 0);\n  else if ((s -= 2 * ly) \u003c PI * rc) {\n    const a = s / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = ly + rc * oy);\n  } else if ((s -= PI * rc) \u003c 2 * ly) (cx = -rc), (cy = ly - s), (ox = -1), (oy = 0);\n  else {\n    const a = PI + (s - 2 * ly) / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = -ly + rc * oy);\n  }\n  out[o] = cx;\n  out[o + 1] = cy;\n  out[o + 2] = ox;\n  out[o + 3] = oy;\n}\n\n// The plane point U E1 + V E2 is the one painted at (U, V), so the square's\n// sides go to E1 and E2 and the map closes up on the torus. Back the other\n// way, (qa, qb) lands at U = (2 qa - qb) / 7, V = (3 qa + 2 qb) / 7.\nfunction build(S) {\n  S.rc = RO / (1 + S.ratio);\n  S.r = S.rc * S.ratio;\n  S.ly = HALF - RO;\n  S.per = 4 * S.ly + TAU * S.rc;\n  const { cc, tc, ts, cid, road } = S;\n  for (let j = 0; j \u003c NV; j++) {\n    tc[j] = cos((TAU * (j + 0.5)) / NV);\n    ts[j] = sin((TAU * (j + 0.5)) / NV);\n  }\n  for (let i = 0; i \u003c NU; i++) {\n    const U = (i + 0.5) / NU;\n    core(S, U, cc, 4 * i);\n    for (let j = 0; j \u003c NV; j++) cid[i * NV + j] = country(U * E1A + (j + 0.5) / NV * E2A, U * E1B + (j + 0.5) / NV * E2B);\n  }\n  // The dual graph: the capital of country a sits at the hexagon (a, 0), and\n  // three roads leave it toward (a + 1, 0), (a, 1) and (a + 1, -1). Seven\n  // capitals times three is all 21 roads of K7, each crossing one border.\n  const q4 = [0, 0, 0, 0];\n  let n = 0;\n  for (let a = 0; a \u003c 7; a++)\n    for (const [da, db] of [[1, 0], [0, 1], [1, -1]])\n      for (let t = 0; t \u003c NR; t++, n++) {\n        const qa = a + (da * t) / (NR - 1), qb = (db * t) / (NR - 1), v = (TAU * (3 * qa + 2 * qb)) / 7, o = 3 * n;\n        core(S, (2 * qa - qb) / 7, q4, 0);\n        road[o] = q4[0] + S.r * cos(v) * q4[2];\n        road[o + 1] = q4[1] + S.r * cos(v) * q4[3];\n        road[o + 2] = S.r * sin(v);\n      }\n}\n\nexport function setup(params) {\n  // The turn starts 0.4 short of face-on, so at Speed 2 the torus faces you\n  // squarely one second in and stands edge-on five seconds in.\n  params.s = {\n    hue: 0, speed: 2, ratio: -1, tilt: 0.06, spin: -0.4, nod: 0, roads: -1, rc: 0, r: 0, ly: 0, per: 0,\n    cc: new Float32Array(4 * NU), tc: new Float32Array(NV), ts: new Float32Array(NV), cid: new Uint8Array(NS), road: new Float32Array(3 * 21 * NR),\n    zb: new Float32Array(N), ib: new Int32Array(N), ib2: new Int32Array(N), cb: new Uint8Array(N), rb: new Uint8Array(N), pal: new Float32Array(21),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[3], 0, 1);\n  const ratio = 0.85 - 0.45 * cl(k[2], 0, 1);\n  if (abs(ratio - S.ratio) > 1e-4) {\n    S.ratio = ratio;\n    build(S);\n  }\n  S.spin += d * S.speed * 0.2;\n  S.nod += d * S.speed * 0.11;\n  if (S.roads >= 0) {\n    S.roads += d;\n    if (S.roads > 7) S.roads = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.roads = S.roads \u003c 0 ? 0 : min(S.roads, 0.5);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { cc, tc, ts, cid, zb, ib, ib2, cb, rb, road, pal } = S, r = S.r;\n  // Spin about the torus's long axis, then lean the top of that axis toward\n  // the viewer, who looks along +z.\n  const ph = S.spin, cp = cos(ph), sp = sin(ph);\n  const la = -(0.1 + 0.6 * S.tilt + 0.05 * sin(S.nod)), cla = cos(la), sla = sin(la);\n  const m0 = cp, m2 = sp;\n  const m3 = sla * sp, m4 = cla, m5 = -sla * cp;\n  const m6 = -cla * sp, m7 = sla, m8 = cla * cp;\n  // Fit the leaning torus to the panel height.\n  const sc = min(1, 63.5 / (HALF * cla - RO * sla));\n  zb.fill(1e9);\n  ib.fill(-1);\n  // Each sample's screen x, y and depth are a column part plus cos v and\n  // sin v times a part, so the loop over the tube is a few multiplies.\n  const Xb = sc * m2 * r, Yb = -sc * m5 * r, Zb = m8 * r;\n  for (let i = 0; i \u003c NU; i++) {\n    const cx = cc[4 * i], cy = cc[4 * i + 1], ox = cc[4 * i + 2], oy = cc[4 * i + 3], A = m6 * ox + m7 * oy;\n    const X0 = 32 + sc * m0 * cx, Xa = sc * m0 * r * ox, Y0 = 64 - sc * (m3 * cx + m4 * cy), Ya = -sc * r * (m3 * ox + m4 * oy);\n    const Z0 = m6 * cx + m7 * cy, Za = r * A;\n    for (let j = 0, k = i * NV; j \u003c NV; j++, k++) {\n      const cv = tc[j], sv = ts[j];\n      // Facing away from the eye.\n      if (cv * A + sv * m8 > 0.05) continue;\n      const px = floor(X0 + cv * Xa + sv * Xb), py = floor(Y0 + cv * Ya + sv * Yb);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px, Z = Z0 + cv * Za + sv * Zb;\n      if (Z \u003c zb[p]) (zb[p] = Z), (ib[p] = k);\n    }\n  }\n  // Fill LEDs that no front sample reached, or where the back of the tube\n  // shows through between two front samples.\n  ib2.set(ib);\n  for (let y = 1; y \u003c H - 1; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, z = zb[p];\n      for (let q = 1; q \u003c= W; q += W - 1) {\n        const a = zb[p - q], b = zb[p + q];\n        if (a \u003c 1e8 && b \u003c 1e8 && abs(a - b) \u003c 4 && z > max(a, b) + 3) {\n          ib2[p] = a \u003c b ? ib[p - q] : ib[p + q];\n          break;\n        }\n      }\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const k = ib2[p];\n    cb[p] = k \u003c 0 ? 255 : cid[k];\n    if (k >= 0 && k !== ib[p]) {\n      const i = (k / NV) | 0, j = k - i * NV, o = 4 * i;\n      zb[p] = m6 * (cc[o] + r * tc[j] * cc[o + 2]) + m7 * (cc[o + 1] + r * tc[j] * cc[o + 3]) + m8 * r * ts[j];\n    }\n  }\n\n  // The roads, where they lie on the visible surface, and the capitals at\n  // their ends as 2 x 2 dots.\n  const e = S.roads \u003c 0 ? 0 : sm(S.roads / 0.5) * (1 - sm(S.roads - 6));\n  if (e > 0) {\n    rb.fill(0);\n    for (let i = 0, o = 0; i \u003c 21 * NR; i++, o += 3) {\n      const x = road[o], y = road[o + 1], z = road[o + 2];\n      const px = floor(32 + sc * (m0 * x + m2 * z)), py = floor(64 - sc * (m3 * x + m4 * y + m5 * z));\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      if (m6 * x + m7 * y + m8 * z > zb[p] + 1.5) continue;\n      rb[p] = 1;\n      if (i % NR === 0 && px \u003c W - 1 && py \u003c H - 1) rb[p + 1] = rb[p + W] = rb[p + W + 1] = 1;\n    }\n  }\n\n  // The seven colours, a seventh apart, opening off red.\n  const h0 = S.hue + 1 / 14;\n  for (let c = 0; c \u003c 7; c++) hsv(h0 + c / 7, 1, 1, pal, 3 * c);\n  // Light from the upper left, in front.\n  const lx = -0.45, ly = 0.6, lz = -0.66;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, c = cb[p];\n      if (c === 255) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const k = ib2[p], i = (k / NV) | 0, j = k - i * NV, nx = tc[j] * cc[4 * i + 2], ny = tc[j] * cc[4 * i + 3], nz = ts[j];\n      const vx = m0 * nx + m2 * nz, vy = m3 * nx + m4 * ny + m5 * nz, vz = m6 * nx + m7 * ny + m8 * nz;\n      const dif = max(0, vx * lx + vy * ly + vz * lz);\n      // Half vector of the light and the eye at -z, for a small shine.\n      let hv = max(0, (vx * lx + vy * ly + vz * (lz - 1)) / 1.82);\n      (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv);\n      const spec = hv * 0.5;\n      const lit = (0.6 + 0.55 * dif) * (1 - 0.2 * e);\n      let R = pal[3 * c] * lit + spec, G = pal[3 * c + 1] * lit + spec, B = pal[3 * c + 2] * lit + spec;\n      // A dark LED where the country changes to the right or below, and\n      // where the surface folds behind a nearer part of the tube.\n      const r = x \u003c W - 1 ? cb[p + 1] : 255, b = y \u003c H - 1 ? cb[p + W] : 255, zf = zb[p] - 6;\n      if ((r !== 255 && r !== c) || (b !== 255 && b !== c) ||\n        (x > 0 && cb[p - 1] !== 255 && zb[p - 1] \u003c zf) || (r !== 255 && zb[p + 1] \u003c zf) ||\n        (y > 0 && cb[p - W] !== 255 && zb[p - W] \u003c zf) || (b !== 255 && zb[p + W] \u003c zf)) (R *= 0.08), (G *= 0.08), (B *= 0.08);\n      if (e > 0 && rb[p]) {\n        R += (1 - R) * e;\n        G += (1 - G) * e;\n        B += (1 - B) * e;\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(B * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s."},{"name":"Hole","min":0,"max":1,"about":"The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall."},{"name":"Tilt","min":0,"max":1,"about":"How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above."}],"start":[0,2,0,0.06],"measures":{"motion":0.4823,"detail":0.0527,"edges":0.4488,"complexity":0.5038,"coverage":0.538,"colour":0.6204,"drift":0.3781},"knobResponse":[0.4775,0.281,0.1318,0.1492]},{"slug":"helter-skelter","title":"Helter Skelter","family":"fair","round":19,"note":"밤 장터의 헬터 스켈터가 128줄을 다 써요. 사람들이 탑 안 계단을 올라 작은 창에 비치고, 꼭대기에서 매트에 앉아 전구 체이스와 함께 탑을 돌아 미끄러져 내려온 뒤 매트를 들고 아래 문으로 돌아가요.","idea":"A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","layer":{"id":"layer-helter-skelter","type":"code","name":"helter-skelter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower."},{"name":"Turns","min":3,"max":6,"about":"How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside."},{"name":"Stripes","min":-1,"max":1,"about":"The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them."}],"start":[0,2,3,0.06],"measures":{"motion":0.1978,"detail":0.0529,"edges":0.4142,"complexity":1.5797,"coverage":0.8591,"colour":0.2542,"drift":0.0688},"knobResponse":[0.0829,0.0365,0.0808,0.0347]},{"slug":"hexatic-phase","title":"Hexatic Phase","family":"particle","round":37,"note":"단단한 원판 440개가 주기 경계 상자 안에서 사건 사슬 몬테카를로로 밀치고, 원판마다 둘레의 육각 격자가 가리키는 쪽에 따라 색을 입어요. 색상환 한 바퀴가 격자 회전 60도라서 결정 조각이 한 색 덩어리로 헤엄치고 합쳐지며 돌고, 이웃이 다섯인 원판은 흰 점, 일곱인 원판은 흰 고리로 결정 경계를 따라 줄지어요. K3 은 채움 몫을 0.68 의 액체에서 0.76 의 고체까지 올리고, 누르면 상자가 녹았다가 다시 굳어요.","idea":"440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.","buttons":"K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.","code":"// ===== Patternflow pattern =====\n// Title:   Hexatic Phase\n// Family:  particle\n// Idea:    440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: hexatic phase of two-dimensional melting (Bertrand Halperin and David Nelson, 1978), hard disks (Berni Alder and Thomas Wainwright, 1962), event-chain Monte Carlo (Etienne Bernard, Werner Krauth and David Wilson, 2009), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1\n//\n// Knob 1: Hue. Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together.\n// Knob 2: Speed. Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it.\n// Knob 3: Density. The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs.\n// Knob 4: Cells. From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring.\n// Buttons: K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.\n\nconst W = 64, H = 128, N = 440, CX = 14, CY = 28, C = W / CX, NC = CX * CY, CAP = 12;\nconst { floor, min, max, sqrt, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wx = (v) => (v \u003c -32 ? v + W : v >= 32 ? v - W : v);\nconst wy = (v) => (v \u003c -64 ? v + H : v >= 64 ? v - H : v);\n// Disk diameter for a packing fraction: eta = N pi d^2 / 4 / (W H).\nconst diam = (eta) => sqrt((4 * eta * W * H) / (N * PI));\n\n// Hard disks have no energy, only the packing fraction. Halperin and Nelson\n// (after Kosterlitz and Thouless) said a 2D crystal melts in two steps: bound\n// pairs of dislocations unbind into a hexatic phase that keeps the lattice's\n// orientation over long distances but not its rows, and then the hexatic\n// melts into a liquid when the dislocations split into free 5s and 7s.\n// Bernard and Krauth (2011) found that for hard disks the liquid to hexatic\n// step is first order: the two coexist from 0.700 to 0.716, the hexatic\n// holds to 0.720, and the solid starts there.\n//\n// Measured here, mean over seconds 10 to 40, of the edge-weighted psi6 of\n// single disks, and the share of disks without six Voronoi neighbours:\n//   0.68  |psi6| 0.60  off six 27%    0.70  |psi6| 0.69  off six 15%\n//   0.72  |psi6| 0.75  off six  9%    0.74  |psi6| 0.84  off six  2%\n// The whole box's |psi6| goes 0.16, 0.50, 0.63, 0.79: with 440 disks the\n// patches reach the box long before the solid does.\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction cellAt(x, y) {\n  let cx = floor(x / C), cy = floor(y / C);\n  if (cx >= CX) cx -= CX;\n  if (cy >= CY) cy -= CY;\n  return cy * CX + cx;\n}\nfunction put(S, i) {\n  const c = cellAt(S.x[i], S.y[i]), k = S.cnt[c]++;\n  S.slot[c * CAP + k] = i;\n  S.cell[i] = c;\n  S.pos[i] = k;\n}\nfunction take(S, i) {\n  const c = S.cell[i], k = S.pos[i], last = --S.cnt[c], j = S.slot[c * CAP + last];\n  S.slot[c * CAP + k] = j;\n  S.pos[j] = k;\n}\n\n// One straight event chain: disk i moves along direction dir until it\n// touches another disk, which takes over the rest of the length, and so on\n// until the length is spent. Each chain leaves the uniform distribution of\n// valid configurations as it was, so a random mix of the four directions\n// does too, and the mix keeps the whole box from drifting one way.\nfunction chain(S, i, dir, len) {\n  const d = S.d, d2 = d * d, ex = dir === 0 ? 1 : dir === 2 ? -1 : 0, ey = dir === 1 ? 1 : dir === 3 ? -1 : 0;\n  const X = S.x, Y = S.y, cnt = S.cnt, slot = S.slot;\n  let lifts = 0;\n  while (len > 1e-9 && lifts \u003c 200) {\n    const xi = X[i], yi = Y[i], look = len \u003c 2 * C ? len : 2 * C, kf = 1 + floor((look + d) / C);\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n    let best = look, hit = -1;\n    for (let a = 0; a \u003c= kf; a++)\n      for (let b = -1; b \u003c= 1; b++) {\n        let qx = ex ? cx + ex * a : cx + b, qy = ex ? cy + b : cy + ey * a;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = slot[q * CAP + m];\n          if (j === i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), along = rx * ex + ry * ey, perp = ex ? ry : rx;\n          if (along \u003c= 0 || perp * perp >= d2) continue;\n          let s = along - sqrt(d2 - perp * perp);\n          if (s \u003c 0) s = 0;\n          if (s \u003c best) (best = s), (hit = j);\n        }\n      }\n    take(S, i);\n    let nx = xi + ex * best, ny = yi + ey * best;\n    nx = nx \u003c 0 ? nx + W : nx >= W ? nx - W : nx;\n    ny = ny \u003c 0 ? ny + H : ny >= H ? ny - H : ny;\n    X[i] = nx;\n    Y[i] = ny;\n    put(S, i);\n    len -= best;\n    if (hit >= 0) (i = hit), lifts++;\n  }\n  return lifts;\n}\n\n// The closest pair in the box. Disks grow to it and no further, so the box\n// is compressed without one overlap.\nfunction closest(S) {\n  const X = S.x, Y = S.y;\n  let m2 = C * C;\n  for (let i = 0; i \u003c N; i++) {\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0, xi = X[i], yi = Y[i];\n    for (let b = -1; b \u003c= 1; b++)\n      for (let a = -1; a \u003c= 1; a++) {\n        let qx = cx + a, qy = cy + b;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = S.cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = S.slot[q * CAP + m];\n          if (j \u003c= i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n          if (r2 \u003c m2) m2 = r2;\n        }\n      }\n  }\n  return sqrt(m2);\n}\n\n// Growth by a step of `rate`, then pushes: every overlapping pair is moved\n// apart along its axis, a few passes over the box. What overlap is left\n// after that is taken back by shrinking the disks to the closest pair, so the\n// chains never see two disks overlap.\nfunction grow(S, rate) {\n  if (S.dT \u003c= S.d) {\n    S.d = S.dT;\n    return;\n  }\n  const d1 = min(S.dT, S.d * (1 + rate)), X = S.x, Y = S.y;\n  for (let pass = 0; pass \u003c 4; pass++) {\n    let moved = 0;\n    for (let i = 0; i \u003c N; i++) {\n      const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m];\n            if (j \u003c= i) continue;\n            const rx = wx(X[j] - X[i]), ry = wy(Y[j] - Y[i]), r2 = rx * rx + ry * ry;\n            if (r2 >= d1 * d1 || r2 === 0) continue;\n            const r = sqrt(r2), f = (0.5 * (d1 - r) + 1e-4) / r;\n            X[i] -= rx * f;\n            Y[i] -= ry * f;\n            X[j] += rx * f;\n            Y[j] += ry * f;\n            moved++;\n          }\n        }\n    }\n    for (let i = 0; i \u003c N; i++) {\n      X[i] = (X[i] + W) % W;\n      Y[i] = (Y[i] + H) % H;\n      if (cellAt(X[i], Y[i]) !== S.cell[i]) take(S, i), put(S, i);\n    }\n    if (!moved) break;\n  }\n  S.d = min(d1, closest(S) * (1 - 1e-9));\n}\n\n// A batch of chains, each 1.5 diameters long in total.\nfunction chains(S, n) {\n  let lifts = 0;\n  for (let k = 0; k \u003c n; k++) lifts += chain(S, floor(random() * N), floor(random() * 4), 1.5 * S.d);\n  return lifts;\n}\n\n// The Voronoi cell of disk i, by clipping a square with the bisector of each\n// nearby disk, nearest first. Its edges give the neighbours and how much each\n// one counts: psi6 = sum over edges of length * exp(6 i theta) / perimeter.\nconst PX = new Float64Array(40), PY = new Float64Array(40), PL = new Int32Array(40);\nconst QX = new Float64Array(40), QY = new Float64Array(40), QL = new Int32Array(40);\nconst CR = new Float64Array(64), CRX = new Float64Array(64), CRY = new Float64Array(64), CJ = new Int32Array(64);\nconst NBMAX = 12, CPS = 1500;\n// Density range, growth per second at Speed 2, melt time.\nconst ETA0 = 0.68, ETA1 = 0.76, GROW = 0.02, MELT = 1.2, EASE = 0.3;\n// The coarse-grained |psi6| that turns slate into full colour, and the slate.\nconst O0 = 0.35, O1 = 0.62, SL = [0.13, 0.14, 0.2];\n\nfunction voronoi(S, i) {\n  const X = S.x, Y = S.y, xi = X[i], yi = Y[i], c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n  let nc = 0;\n  for (let b = -2; b \u003c= 2; b++)\n    for (let a = -2; a \u003c= 2; a++) {\n      let qx = cx + a, qy = cy + b;\n      qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n      qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n      const q = qy * CX + qx, n = S.cnt[q];\n      for (let m = 0; m \u003c n && nc \u003c 64; m++) {\n        const j = S.slot[q * CAP + m];\n        if (j === i) continue;\n        const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n        // Insertion into the list sorted by distance.\n        let k = nc++;\n        while (k > 0 && CR[k - 1] > r2) {\n          CR[k] = CR[k - 1];\n          CRX[k] = CRX[k - 1];\n          CRY[k] = CRY[k - 1];\n          CJ[k] = CJ[k - 1];\n          k--;\n        }\n        CR[k] = r2;\n        CRX[k] = rx;\n        CRY[k] = ry;\n        CJ[k] = j;\n      }\n    }\n  const HS = 2 * C;\n  let px = PX, py = PY, pl = PL, qx = QX, qy = QY, ql = QL, nv = 4;\n  px[0] = -HS, py[0] = -HS, px[1] = HS, py[1] = -HS, px[2] = HS, py[2] = HS, px[3] = -HS, py[3] = HS;\n  pl[0] = pl[1] = pl[2] = pl[3] = -1;\n  let far2 = 2 * HS * HS;\n  for (let k = 0; k \u003c nc; k++) {\n    // A bisector farther out than every corner cannot cut the cell.\n    if (CR[k] > 4 * far2) break;\n    const ax = CRX[k], ay = CRY[k], h = CR[k] / 2;\n    let no = 0;\n    for (let v = 0; v \u003c nv; v++) {\n      const w = v + 1 \u003c nv ? v + 1 : 0, sv = ax * px[v] + ay * py[v] - h, sw = ax * px[w] + ay * py[w] - h;\n      if (sv \u003c= 0) {\n        qx[no] = px[v], qy[no] = py[v], ql[no++] = pl[v];\n        if (sw > 0) {\n          const t = sv / (sv - sw);\n          qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = k;\n        }\n      } else if (sw \u003c= 0) {\n        const t = sv / (sv - sw);\n        qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = pl[v];\n      }\n    }\n    if (no === nv) {\n      let same = true;\n      for (let v = 0; v \u003c nv && same; v++) if (ql[v] !== pl[v]) same = false;\n      if (same) continue;\n    }\n    let t = px;\n    (px = qx), (qx = t), (t = py), (py = qy), (qy = t);\n    const tl = pl;\n    (pl = ql), (ql = tl), (nv = no);\n    far2 = 0;\n    for (let v = 0; v \u003c nv; v++) far2 = max(far2, px[v] * px[v] + py[v] * py[v]);\n  }\n  // Edges: label pl[v] runs from vertex v to vertex v + 1.\n  let sr = 0, si = 0, sl = 0, nn = 0;\n  for (let v = 0; v \u003c nv; v++) {\n    const k = pl[v];\n    if (k \u003c 0) continue;\n    const w = v + 1 \u003c nv ? v + 1 : 0, len = sqrt((px[w] - px[v]) ** 2 + (py[w] - py[v]) ** 2);\n    const r = sqrt(CR[k]), ux = CRX[k] / r, uy = CRY[k] / r;\n    // (ux + i uy)^6\n    const a2r = ux * ux - uy * uy, a2i = 2 * ux * uy, a4r = a2r * a2r - a2i * a2i, a4i = 2 * a2r * a2i;\n    sr += len * (a4r * a2r - a4i * a2i);\n    si += len * (a4r * a2i + a4i * a2r);\n    sl += len;\n    if (len > 1e-6 && nn \u003c NBMAX) S.nb[i * NBMAX + nn++] = CJ[k];\n  }\n  S.pr[i] = sl > 0 ? sr / sl : 0;\n  S.pi[i] = sl > 0 ? si / sl : 0;\n  S.nn[i] = nn;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    x: new Float64Array(N), y: new Float64Array(N), cell: new Int32Array(N), pos: new Int32Array(N),\n    cnt: new Int32Array(NC), slot: new Int32Array(NC * CAP),\n    pr: new Float32Array(N), pi: new Float32Array(N), nn: new Uint8Array(N), nb: new Int32Array(N * NBMAX),\n    qr: new Float32Array(N), qi: new Float32Array(N), col: new Float32Array(N * 3), sx: new Float64Array(N), sy: new Float64Array(N),\n    buf: new Float32Array(W * H * 3),\n    d: 2.6, dT: diam(0.68), hue: 0, speed: 2, eta: 0.68, cells: 0.06, warm: false, melt: 0, acc: 0, lifts: 0,\n  });\n  // Random sequential placement at a small diameter, 0.24 packing.\n  for (let i = 0; i \u003c N; i++) {\n    for (let tries = 0; tries \u003c 2000; tries++) {\n      const x = random() * W, y = random() * H;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) {\n        const rx = wx(S.x[j] - x), ry = wy(S.y[j] - y);\n        if (rx * rx + ry * ry \u003c S.d * S.d) ok = false;\n      }\n      if (ok) {\n        S.x[i] = x;\n        S.y[i] = y;\n        break;\n      }\n    }\n    put(S, i);\n  }\n}\n\nfunction analyse(S, ease) {\n  for (let i = 0; i \u003c N; i++) voronoi(S, i);\n  // Coarse grain over the disk and its Voronoi neighbours, then ease in time.\n  for (let i = 0; i \u003c N; i++) {\n    let r = S.pr[i], m = S.pi[i];\n    const n = S.nn[i];\n    for (let k = 0; k \u003c n; k++) {\n      const j = S.nb[i * NBMAX + k];\n      r += S.pr[j];\n      m += S.pi[j];\n    }\n    r /= n + 1;\n    m /= n + 1;\n    S.qr[i] += (r - S.qr[i]) * ease;\n    S.qi[i] += (m - S.qi[i]) * ease;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.68, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.eta = cl(k[2], ETA0, ETA1);\n  S.cells = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) S.melt = MELT;\n  S.melt = max(0, S.melt - d * S.speed / 2);\n  S.dT = diam(S.melt > 0 ? 0.6 : S.eta);\n  if (!S.warm) {\n    for (let r = 0; r \u003c 600 && S.d \u003c S.dT; r++) {\n      chains(S, 40);\n      grow(S, 0.004);\n    }\n    for (let r = 0; r \u003c 60; r++) chains(S, 40);\n    analyse(S, 1);\n    S.sx.set(S.x);\n    S.sy.set(S.y);\n    S.warm = true;\n  }\n  // Chains this frame, in three batches with a growth step after each.\n  S.acc += S.speed * CPS * d;\n  const n = floor(S.acc);\n  S.acc -= n;\n  let lifts = 0;\n  for (let b = 0; b \u003c 3; b++) {\n    lifts += chains(S, floor(n / 3) + (b \u003c n % 3 ? 1 : 0));\n    grow(S, (GROW * d * S.speed) / 2 / 3);\n  }\n  S.lifts = lifts;\n  analyse(S, 0.35);\n  // The disks are drawn where they have been over the last few frames, not\n  // where the last chain left them: each one rattles in its cage by about\n  // 0.4 LED from frame to frame, which flickers on the panel.\n  for (let i = 0; i \u003c N; i++) {\n    S.sx[i] += wx(S.x[i] - S.sx[i]) * EASE;\n    S.sy[i] += wy(S.y[i] - S.sy[i]) * EASE;\n    S.sx[i] = (S.sx[i] + W) % W;\n    S.sy[i] = (S.sy[i] + H) % H;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, col, sx: X, sy: Y } = S;\n  buf.fill(0);\n  // Disk colours: hue from the phase of psi6, and from its size a blend\n  // from a dim slate (liquid) to the full colour (crystal).\n  for (let i = 0; i \u003c N; i++) {\n    const r = S.qr[i], m = S.qi[i], mag = sqrt(r * r + m * m), o = sm(O0, O1, mag), n = S.nn[i], c = i * 3;\n    if (n !== 6) {\n      const w = 0.5 + 0.5 * o;\n      col[c] = col[c + 1] = col[c + 2] = n \u003c 6 ? w : -w;\n      continue;\n    }\n    const h = S.hue + 0.47 + atan2(m, r) / (2 * PI), hh = h - floor(h);\n    // Orange and yellow at less than full brightness read brown and olive,\n    // so there the colour goes paler instead.\n    const warm = sm(0.0, 0.05, hh) * (1 - sm(0.17, 0.24, hh));\n    hsv(h, 0.88 - 0.38 * warm, 1, col, c);\n    col[c] = SL[0] + (col[c] - SL[0]) * o;\n    col[c + 1] = SL[1] + (col[c + 1] - SL[1]) * o;\n    col[c + 2] = SL[2] + (col[c + 2] - SL[2]) * o;\n  }\n  const R = S.d / 2 - 0.25, R7 = R - 0.95;\n  for (let i = 0; i \u003c N; i++) {\n    const xi = X[i], yi = Y[i], c = i * 3;\n    let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n    // A 7-neighbour disk is a ring with a dark core.\n    const ring = cr \u003c 0;\n    if (ring) cr = cg = cb = -cr;\n    for (let yy = floor(yi - R - 1); yy \u003c= yi + R + 1; yy++)\n      for (let xx = floor(xi - R - 1); xx \u003c= xi + R + 1; xx++) {\n        const ex = xx + 0.5 - xi, ey = yy + 0.5 - yi, e = sqrt(ex * ex + ey * ey);\n        let cov = cl(R + 0.5 - e, 0, 1);\n        if (ring) cov *= cl(e - R7, 0, 1);\n        if (cov \u003c= 0) continue;\n        const px = (xx + W) % W, py = (yy + H) % H, p = (py * W + px) * 3;\n        buf[p] = max(buf[p], cr * cov);\n        buf[p + 1] = max(buf[p + 1], cg * cov);\n        buf[p + 2] = max(buf[p + 2], cb * cov);\n      }\n  }\n  if (S.cells > 0.02) cells(S, buf, col);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, round(255 * buf[p]), round(255 * buf[p + 1]), round(255 * buf[p + 2]));\n}\n\n// The Voronoi field: each LED takes the colour of its nearest disk, darkened\n// where the second nearest is almost as near, which draws the cell edges.\nfunction cells(S, buf, col) {\n  const X = S.x, Y = S.y, lv = S.cells;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const fx = x + 0.5, fy = y + 0.5, cx = floor(fx / C), cy = floor(fy / C);\n      let b1 = 1e9, b2 = 1e9, j1 = 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m], rx = wx(X[j] - fx), ry = wy(Y[j] - fy), r2 = rx * rx + ry * ry;\n            if (r2 \u003c b1) (b2 = b1), (b1 = r2), (j1 = j);\n            else if (r2 \u003c b2) b2 = r2;\n          }\n        }\n      // Distance to the bisector of the two nearest is (r2^2 - r1^2) / 2 r12;\n      // with r12 about one spacing this is close enough for a seam.\n      const edge = sm(0.1, 0.7, (b2 - b1) / (2 * S.d)), c = j1 * 3;\n      let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n      if (cr \u003c 0) cr = cg = cb = 0.05;\n      const g = lv * edge;\n      buf[p] = max(buf[p], cr * g);\n      buf[p + 1] = max(buf[p + 1], cg * g);\n      buf[p + 2] = max(buf[p + 2], cb * g);\n    }\n}\n\nfunction sm(a, b, v) {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n","layer":{"id":"layer-hexatic-phase","type":"code","name":"hexatic-phase","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hexatic Phase\n// Family:  particle\n// Idea:    440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: hexatic phase of two-dimensional melting (Bertrand Halperin and David Nelson, 1978), hard disks (Berni Alder and Thomas Wainwright, 1962), event-chain Monte Carlo (Etienne Bernard, Werner Krauth and David Wilson, 2009), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1\n//\n// Knob 1: Hue. Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together.\n// Knob 2: Speed. Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it.\n// Knob 3: Density. The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs.\n// Knob 4: Cells. From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring.\n// Buttons: K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.\n\nconst W = 64, H = 128, N = 440, CX = 14, CY = 28, C = W / CX, NC = CX * CY, CAP = 12;\nconst { floor, min, max, sqrt, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wx = (v) => (v \u003c -32 ? v + W : v >= 32 ? v - W : v);\nconst wy = (v) => (v \u003c -64 ? v + H : v >= 64 ? v - H : v);\n// Disk diameter for a packing fraction: eta = N pi d^2 / 4 / (W H).\nconst diam = (eta) => sqrt((4 * eta * W * H) / (N * PI));\n\n// Hard disks have no energy, only the packing fraction. Halperin and Nelson\n// (after Kosterlitz and Thouless) said a 2D crystal melts in two steps: bound\n// pairs of dislocations unbind into a hexatic phase that keeps the lattice's\n// orientation over long distances but not its rows, and then the hexatic\n// melts into a liquid when the dislocations split into free 5s and 7s.\n// Bernard and Krauth (2011) found that for hard disks the liquid to hexatic\n// step is first order: the two coexist from 0.700 to 0.716, the hexatic\n// holds to 0.720, and the solid starts there.\n//\n// Measured here, mean over seconds 10 to 40, of the edge-weighted psi6 of\n// single disks, and the share of disks without six Voronoi neighbours:\n//   0.68  |psi6| 0.60  off six 27%    0.70  |psi6| 0.69  off six 15%\n//   0.72  |psi6| 0.75  off six  9%    0.74  |psi6| 0.84  off six  2%\n// The whole box's |psi6| goes 0.16, 0.50, 0.63, 0.79: with 440 disks the\n// patches reach the box long before the solid does.\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction cellAt(x, y) {\n  let cx = floor(x / C), cy = floor(y / C);\n  if (cx >= CX) cx -= CX;\n  if (cy >= CY) cy -= CY;\n  return cy * CX + cx;\n}\nfunction put(S, i) {\n  const c = cellAt(S.x[i], S.y[i]), k = S.cnt[c]++;\n  S.slot[c * CAP + k] = i;\n  S.cell[i] = c;\n  S.pos[i] = k;\n}\nfunction take(S, i) {\n  const c = S.cell[i], k = S.pos[i], last = --S.cnt[c], j = S.slot[c * CAP + last];\n  S.slot[c * CAP + k] = j;\n  S.pos[j] = k;\n}\n\n// One straight event chain: disk i moves along direction dir until it\n// touches another disk, which takes over the rest of the length, and so on\n// until the length is spent. Each chain leaves the uniform distribution of\n// valid configurations as it was, so a random mix of the four directions\n// does too, and the mix keeps the whole box from drifting one way.\nfunction chain(S, i, dir, len) {\n  const d = S.d, d2 = d * d, ex = dir === 0 ? 1 : dir === 2 ? -1 : 0, ey = dir === 1 ? 1 : dir === 3 ? -1 : 0;\n  const X = S.x, Y = S.y, cnt = S.cnt, slot = S.slot;\n  let lifts = 0;\n  while (len > 1e-9 && lifts \u003c 200) {\n    const xi = X[i], yi = Y[i], look = len \u003c 2 * C ? len : 2 * C, kf = 1 + floor((look + d) / C);\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n    let best = look, hit = -1;\n    for (let a = 0; a \u003c= kf; a++)\n      for (let b = -1; b \u003c= 1; b++) {\n        let qx = ex ? cx + ex * a : cx + b, qy = ex ? cy + b : cy + ey * a;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = slot[q * CAP + m];\n          if (j === i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), along = rx * ex + ry * ey, perp = ex ? ry : rx;\n          if (along \u003c= 0 || perp * perp >= d2) continue;\n          let s = along - sqrt(d2 - perp * perp);\n          if (s \u003c 0) s = 0;\n          if (s \u003c best) (best = s), (hit = j);\n        }\n      }\n    take(S, i);\n    let nx = xi + ex * best, ny = yi + ey * best;\n    nx = nx \u003c 0 ? nx + W : nx >= W ? nx - W : nx;\n    ny = ny \u003c 0 ? ny + H : ny >= H ? ny - H : ny;\n    X[i] = nx;\n    Y[i] = ny;\n    put(S, i);\n    len -= best;\n    if (hit >= 0) (i = hit), lifts++;\n  }\n  return lifts;\n}\n\n// The closest pair in the box. Disks grow to it and no further, so the box\n// is compressed without one overlap.\nfunction closest(S) {\n  const X = S.x, Y = S.y;\n  let m2 = C * C;\n  for (let i = 0; i \u003c N; i++) {\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0, xi = X[i], yi = Y[i];\n    for (let b = -1; b \u003c= 1; b++)\n      for (let a = -1; a \u003c= 1; a++) {\n        let qx = cx + a, qy = cy + b;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = S.cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = S.slot[q * CAP + m];\n          if (j \u003c= i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n          if (r2 \u003c m2) m2 = r2;\n        }\n      }\n  }\n  return sqrt(m2);\n}\n\n// Growth by a step of `rate`, then pushes: every overlapping pair is moved\n// apart along its axis, a few passes over the box. What overlap is left\n// after that is taken back by shrinking the disks to the closest pair, so the\n// chains never see two disks overlap.\nfunction grow(S, rate) {\n  if (S.dT \u003c= S.d) {\n    S.d = S.dT;\n    return;\n  }\n  const d1 = min(S.dT, S.d * (1 + rate)), X = S.x, Y = S.y;\n  for (let pass = 0; pass \u003c 4; pass++) {\n    let moved = 0;\n    for (let i = 0; i \u003c N; i++) {\n      const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m];\n            if (j \u003c= i) continue;\n            const rx = wx(X[j] - X[i]), ry = wy(Y[j] - Y[i]), r2 = rx * rx + ry * ry;\n            if (r2 >= d1 * d1 || r2 === 0) continue;\n            const r = sqrt(r2), f = (0.5 * (d1 - r) + 1e-4) / r;\n            X[i] -= rx * f;\n            Y[i] -= ry * f;\n            X[j] += rx * f;\n            Y[j] += ry * f;\n            moved++;\n          }\n        }\n    }\n    for (let i = 0; i \u003c N; i++) {\n      X[i] = (X[i] + W) % W;\n      Y[i] = (Y[i] + H) % H;\n      if (cellAt(X[i], Y[i]) !== S.cell[i]) take(S, i), put(S, i);\n    }\n    if (!moved) break;\n  }\n  S.d = min(d1, closest(S) * (1 - 1e-9));\n}\n\n// A batch of chains, each 1.5 diameters long in total.\nfunction chains(S, n) {\n  let lifts = 0;\n  for (let k = 0; k \u003c n; k++) lifts += chain(S, floor(random() * N), floor(random() * 4), 1.5 * S.d);\n  return lifts;\n}\n\n// The Voronoi cell of disk i, by clipping a square with the bisector of each\n// nearby disk, nearest first. Its edges give the neighbours and how much each\n// one counts: psi6 = sum over edges of length * exp(6 i theta) / perimeter.\nconst PX = new Float64Array(40), PY = new Float64Array(40), PL = new Int32Array(40);\nconst QX = new Float64Array(40), QY = new Float64Array(40), QL = new Int32Array(40);\nconst CR = new Float64Array(64), CRX = new Float64Array(64), CRY = new Float64Array(64), CJ = new Int32Array(64);\nconst NBMAX = 12, CPS = 1500;\n// Density range, growth per second at Speed 2, melt time.\nconst ETA0 = 0.68, ETA1 = 0.76, GROW = 0.02, MELT = 1.2, EASE = 0.3;\n// The coarse-grained |psi6| that turns slate into full colour, and the slate.\nconst O0 = 0.35, O1 = 0.62, SL = [0.13, 0.14, 0.2];\n\nfunction voronoi(S, i) {\n  const X = S.x, Y = S.y, xi = X[i], yi = Y[i], c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n  let nc = 0;\n  for (let b = -2; b \u003c= 2; b++)\n    for (let a = -2; a \u003c= 2; a++) {\n      let qx = cx + a, qy = cy + b;\n      qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n      qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n      const q = qy * CX + qx, n = S.cnt[q];\n      for (let m = 0; m \u003c n && nc \u003c 64; m++) {\n        const j = S.slot[q * CAP + m];\n        if (j === i) continue;\n        const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n        // Insertion into the list sorted by distance.\n        let k = nc++;\n        while (k > 0 && CR[k - 1] > r2) {\n          CR[k] = CR[k - 1];\n          CRX[k] = CRX[k - 1];\n          CRY[k] = CRY[k - 1];\n          CJ[k] = CJ[k - 1];\n          k--;\n        }\n        CR[k] = r2;\n        CRX[k] = rx;\n        CRY[k] = ry;\n        CJ[k] = j;\n      }\n    }\n  const HS = 2 * C;\n  let px = PX, py = PY, pl = PL, qx = QX, qy = QY, ql = QL, nv = 4;\n  px[0] = -HS, py[0] = -HS, px[1] = HS, py[1] = -HS, px[2] = HS, py[2] = HS, px[3] = -HS, py[3] = HS;\n  pl[0] = pl[1] = pl[2] = pl[3] = -1;\n  let far2 = 2 * HS * HS;\n  for (let k = 0; k \u003c nc; k++) {\n    // A bisector farther out than every corner cannot cut the cell.\n    if (CR[k] > 4 * far2) break;\n    const ax = CRX[k], ay = CRY[k], h = CR[k] / 2;\n    let no = 0;\n    for (let v = 0; v \u003c nv; v++) {\n      const w = v + 1 \u003c nv ? v + 1 : 0, sv = ax * px[v] + ay * py[v] - h, sw = ax * px[w] + ay * py[w] - h;\n      if (sv \u003c= 0) {\n        qx[no] = px[v], qy[no] = py[v], ql[no++] = pl[v];\n        if (sw > 0) {\n          const t = sv / (sv - sw);\n          qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = k;\n        }\n      } else if (sw \u003c= 0) {\n        const t = sv / (sv - sw);\n        qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = pl[v];\n      }\n    }\n    if (no === nv) {\n      let same = true;\n      for (let v = 0; v \u003c nv && same; v++) if (ql[v] !== pl[v]) same = false;\n      if (same) continue;\n    }\n    let t = px;\n    (px = qx), (qx = t), (t = py), (py = qy), (qy = t);\n    const tl = pl;\n    (pl = ql), (ql = tl), (nv = no);\n    far2 = 0;\n    for (let v = 0; v \u003c nv; v++) far2 = max(far2, px[v] * px[v] + py[v] * py[v]);\n  }\n  // Edges: label pl[v] runs from vertex v to vertex v + 1.\n  let sr = 0, si = 0, sl = 0, nn = 0;\n  for (let v = 0; v \u003c nv; v++) {\n    const k = pl[v];\n    if (k \u003c 0) continue;\n    const w = v + 1 \u003c nv ? v + 1 : 0, len = sqrt((px[w] - px[v]) ** 2 + (py[w] - py[v]) ** 2);\n    const r = sqrt(CR[k]), ux = CRX[k] / r, uy = CRY[k] / r;\n    // (ux + i uy)^6\n    const a2r = ux * ux - uy * uy, a2i = 2 * ux * uy, a4r = a2r * a2r - a2i * a2i, a4i = 2 * a2r * a2i;\n    sr += len * (a4r * a2r - a4i * a2i);\n    si += len * (a4r * a2i + a4i * a2r);\n    sl += len;\n    if (len > 1e-6 && nn \u003c NBMAX) S.nb[i * NBMAX + nn++] = CJ[k];\n  }\n  S.pr[i] = sl > 0 ? sr / sl : 0;\n  S.pi[i] = sl > 0 ? si / sl : 0;\n  S.nn[i] = nn;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    x: new Float64Array(N), y: new Float64Array(N), cell: new Int32Array(N), pos: new Int32Array(N),\n    cnt: new Int32Array(NC), slot: new Int32Array(NC * CAP),\n    pr: new Float32Array(N), pi: new Float32Array(N), nn: new Uint8Array(N), nb: new Int32Array(N * NBMAX),\n    qr: new Float32Array(N), qi: new Float32Array(N), col: new Float32Array(N * 3), sx: new Float64Array(N), sy: new Float64Array(N),\n    buf: new Float32Array(W * H * 3),\n    d: 2.6, dT: diam(0.68), hue: 0, speed: 2, eta: 0.68, cells: 0.06, warm: false, melt: 0, acc: 0, lifts: 0,\n  });\n  // Random sequential placement at a small diameter, 0.24 packing.\n  for (let i = 0; i \u003c N; i++) {\n    for (let tries = 0; tries \u003c 2000; tries++) {\n      const x = random() * W, y = random() * H;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) {\n        const rx = wx(S.x[j] - x), ry = wy(S.y[j] - y);\n        if (rx * rx + ry * ry \u003c S.d * S.d) ok = false;\n      }\n      if (ok) {\n        S.x[i] = x;\n        S.y[i] = y;\n        break;\n      }\n    }\n    put(S, i);\n  }\n}\n\nfunction analyse(S, ease) {\n  for (let i = 0; i \u003c N; i++) voronoi(S, i);\n  // Coarse grain over the disk and its Voronoi neighbours, then ease in time.\n  for (let i = 0; i \u003c N; i++) {\n    let r = S.pr[i], m = S.pi[i];\n    const n = S.nn[i];\n    for (let k = 0; k \u003c n; k++) {\n      const j = S.nb[i * NBMAX + k];\n      r += S.pr[j];\n      m += S.pi[j];\n    }\n    r /= n + 1;\n    m /= n + 1;\n    S.qr[i] += (r - S.qr[i]) * ease;\n    S.qi[i] += (m - S.qi[i]) * ease;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.68, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.eta = cl(k[2], ETA0, ETA1);\n  S.cells = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) S.melt = MELT;\n  S.melt = max(0, S.melt - d * S.speed / 2);\n  S.dT = diam(S.melt > 0 ? 0.6 : S.eta);\n  if (!S.warm) {\n    for (let r = 0; r \u003c 600 && S.d \u003c S.dT; r++) {\n      chains(S, 40);\n      grow(S, 0.004);\n    }\n    for (let r = 0; r \u003c 60; r++) chains(S, 40);\n    analyse(S, 1);\n    S.sx.set(S.x);\n    S.sy.set(S.y);\n    S.warm = true;\n  }\n  // Chains this frame, in three batches with a growth step after each.\n  S.acc += S.speed * CPS * d;\n  const n = floor(S.acc);\n  S.acc -= n;\n  let lifts = 0;\n  for (let b = 0; b \u003c 3; b++) {\n    lifts += chains(S, floor(n / 3) + (b \u003c n % 3 ? 1 : 0));\n    grow(S, (GROW * d * S.speed) / 2 / 3);\n  }\n  S.lifts = lifts;\n  analyse(S, 0.35);\n  // The disks are drawn where they have been over the last few frames, not\n  // where the last chain left them: each one rattles in its cage by about\n  // 0.4 LED from frame to frame, which flickers on the panel.\n  for (let i = 0; i \u003c N; i++) {\n    S.sx[i] += wx(S.x[i] - S.sx[i]) * EASE;\n    S.sy[i] += wy(S.y[i] - S.sy[i]) * EASE;\n    S.sx[i] = (S.sx[i] + W) % W;\n    S.sy[i] = (S.sy[i] + H) % H;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, col, sx: X, sy: Y } = S;\n  buf.fill(0);\n  // Disk colours: hue from the phase of psi6, and from its size a blend\n  // from a dim slate (liquid) to the full colour (crystal).\n  for (let i = 0; i \u003c N; i++) {\n    const r = S.qr[i], m = S.qi[i], mag = sqrt(r * r + m * m), o = sm(O0, O1, mag), n = S.nn[i], c = i * 3;\n    if (n !== 6) {\n      const w = 0.5 + 0.5 * o;\n      col[c] = col[c + 1] = col[c + 2] = n \u003c 6 ? w : -w;\n      continue;\n    }\n    const h = S.hue + 0.47 + atan2(m, r) / (2 * PI), hh = h - floor(h);\n    // Orange and yellow at less than full brightness read brown and olive,\n    // so there the colour goes paler instead.\n    const warm = sm(0.0, 0.05, hh) * (1 - sm(0.17, 0.24, hh));\n    hsv(h, 0.88 - 0.38 * warm, 1, col, c);\n    col[c] = SL[0] + (col[c] - SL[0]) * o;\n    col[c + 1] = SL[1] + (col[c + 1] - SL[1]) * o;\n    col[c + 2] = SL[2] + (col[c + 2] - SL[2]) * o;\n  }\n  const R = S.d / 2 - 0.25, R7 = R - 0.95;\n  for (let i = 0; i \u003c N; i++) {\n    const xi = X[i], yi = Y[i], c = i * 3;\n    let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n    // A 7-neighbour disk is a ring with a dark core.\n    const ring = cr \u003c 0;\n    if (ring) cr = cg = cb = -cr;\n    for (let yy = floor(yi - R - 1); yy \u003c= yi + R + 1; yy++)\n      for (let xx = floor(xi - R - 1); xx \u003c= xi + R + 1; xx++) {\n        const ex = xx + 0.5 - xi, ey = yy + 0.5 - yi, e = sqrt(ex * ex + ey * ey);\n        let cov = cl(R + 0.5 - e, 0, 1);\n        if (ring) cov *= cl(e - R7, 0, 1);\n        if (cov \u003c= 0) continue;\n        const px = (xx + W) % W, py = (yy + H) % H, p = (py * W + px) * 3;\n        buf[p] = max(buf[p], cr * cov);\n        buf[p + 1] = max(buf[p + 1], cg * cov);\n        buf[p + 2] = max(buf[p + 2], cb * cov);\n      }\n  }\n  if (S.cells > 0.02) cells(S, buf, col);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, round(255 * buf[p]), round(255 * buf[p + 1]), round(255 * buf[p + 2]));\n}\n\n// The Voronoi field: each LED takes the colour of its nearest disk, darkened\n// where the second nearest is almost as near, which draws the cell edges.\nfunction cells(S, buf, col) {\n  const X = S.x, Y = S.y, lv = S.cells;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const fx = x + 0.5, fy = y + 0.5, cx = floor(fx / C), cy = floor(fy / C);\n      let b1 = 1e9, b2 = 1e9, j1 = 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m], rx = wx(X[j] - fx), ry = wy(Y[j] - fy), r2 = rx * rx + ry * ry;\n            if (r2 \u003c b1) (b2 = b1), (b1 = r2), (j1 = j);\n            else if (r2 \u003c b2) b2 = r2;\n          }\n        }\n      // Distance to the bisector of the two nearest is (r2^2 - r1^2) / 2 r12;\n      // with r12 about one spacing this is close enough for a seam.\n      const edge = sm(0.1, 0.7, (b2 - b1) / (2 * S.d)), c = j1 * 3;\n      let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n      if (cr \u003c 0) cr = cg = cb = 0.05;\n      const g = lv * edge;\n      buf[p] = max(buf[p], cr * g);\n      buf[p + 1] = max(buf[p + 1], cg * g);\n      buf[p + 2] = max(buf[p + 2], cb * g);\n    }\n}\n\nfunction sm(a, b, v) {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together."},{"name":"Speed","min":0.2,"max":3,"about":"Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it."},{"name":"Density","min":0.68,"max":0.76,"about":"The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs."},{"name":"Cells","min":0,"max":1,"about":"From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring."}],"start":[0,2,0.68,0.06],"measures":{"motion":2.3076,"detail":0.1862,"edges":0.5515,"complexity":2.0903,"coverage":0.6781,"colour":0.3428,"drift":0.1672},"knobResponse":[0.1472,0.2305,0.3425,0.068]},{"slug":"high-dive","title":"High Dive","family":"sport","round":23,"note":"밤의 실내 다이빙장을 옆에서 봐요. 다이버가 콘크리트 타워의 지그재그 계단을 올라 10 m 플랫폼 조명 아래 서고, 1.6초 동안 공중제비를 돌며 떨어져 물에 들어가면 물속에 기포 기둥이 오르고 전광판에 심판 일곱 명의 점수가 떠요. K3 이 앞으로 뛰기부터 세 바퀴 반과 비틀기까지 다이빙을 골라요.","idea":"A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.","buttons":"K1 tap sends the waiting diver off now, or hurries the one on the stairs.","code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","layer":{"id":"layer-high-dive","type":"code","name":"high-dive","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Pool","min":0,"max":1,"about":"The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls."},{"name":"Speed","min":0.2,"max":3,"about":"Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2."},{"name":"Dive","min":0,"max":4,"about":"The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty."},{"name":"Lights","min":0,"max":1,"about":"From a dim night practice with only the tower lamps on to full competition lights."}],"start":[0,2,0,0.06],"measures":{"motion":0.3915,"detail":0.0721,"edges":0.2796,"complexity":1.8967,"coverage":0.7436,"colour":0.2296,"drift":0.0344},"knobResponse":[0.0986,0.0554,0.0399,0.1523]},{"slug":"high-striker","title":"High Striker","family":"fair","round":20,"note":"밤 장터의 하이 스트라이커가 128줄을 다 써요. 줄 선 사람들이 차례로 망치를 내리치면 퍽이 실제 중력으로 레일을 오르며 눈금을 켜다가 떨어지고, 세게 친 판이나 K1 을 누른 판에는 꼭대기 놋쇠 종이 울려 전구가 깜박이고 하늘이 밝아져요.","idea":"A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.","buttons":"K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.","code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-high-striker","type":"code","name":"high-striker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Strength","min":60,"max":130,"about":"How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder."},{"name":"Gravity","min":-1,"max":1,"about":"The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker."}],"start":[0,2,60,0.06],"measures":{"motion":0.2551,"detail":0.0819,"edges":0.4794,"complexity":1.4989,"coverage":0.8211,"colour":0.2622,"drift":0.1521},"knobResponse":[0.0547,0.0439,0.0765,0.0768]},{"slug":"hofstadter-butterfly","title":"Hofstadter Butterfly","family":"fractal","round":30,"note":"자기장 속 격자 전자의 에너지 띠를 가로에, 자속을 세로에 놓았어요. 띠 사이 틈마다 홀 전도도의 정수로 칠해 날개가 서고, 같은 밀도의 줄이 날개를 따라 흘러요.","idea":"The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.","buttons":"K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.","code":"// ===== Patternflow pattern =====\n// Title:   Hofstadter Butterfly\n// Family:  fractal\n// Idea:    The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hofstadter's butterfly (Douglas Hofstadter, 1976), coloured by the gap labels of Thouless, Kohmoto, Nightingale and den Nijs (1982), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1\n//\n// Knob 1: Hue. Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on.\n// Knob 2: Speed. At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower.\n// Knob 3: Depth. The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in.\n// Knob 4: Coupling. lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was.\n// Buttons: K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.\n\nconst W = 64, H = 128, S = 6, NS = W * S;\nconst { floor, round, cos, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst BAND = 127, TM = 40;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The nearest fraction p/q to a with q at most Q; on a tie the smaller q, so\n// p/q comes out in lowest terms.\nfunction nearest(a, Q) {\n  let bp = 0, bq = 1, bd = 9;\n  for (let q = 1; q \u003c= Q; q++) {\n    const p = round(a * q), d = abs(a - p / q);\n    if (d \u003c bd - 1e-12) (bd = d), (bp = p), (bq = q);\n  }\n  return [bp, bq];\n}\n\n// Harper's equation, psi(n+1) + psi(n-1) + 2 lambda cos(2 pi alpha n + nu)\n// psi(n) = E psi(n), at alpha = p/q. Row y has flux (127 - y) / 127, so 0 at\n// the bottom and 1 at the top; column x has energy across -(2 + 2 lambda) to\n// 2 + 2 lambda, six samples to an LED.\n//\n// For each sample: the trace D of the product of the q transfer matrices\n// [[E - V(n), -1], [1, 0]], taken at nu = pi / 2q. Chambers' relation says the\n// trace at any other nu is D - 2 lambda^q cos(q nu), so E is in the spectrum\n// at phase nu where |D - 2 lambda^q cos(q nu)| \u003c= 2, and at some phase where\n// |D| \u003c= 2 + 2 lambda^q. Both are checked against the one cached D, so the\n// phase turns every frame for nothing.\n//\n// In a gap, r bands lie below E. r comes from a Sturm count: the negative\n// pivots of the chain cut off at 3q sites count its levels below E, which are\n// 3r give or take one. The gap labelling theorem puts the density there at\n// N = r / q = s + t p / q with whole s and t, so r = t p mod q, and t is r times\n// the inverse of p mod q, taken between -q/2 and q/2. t is the Hall\n// conductance of a filled gap in units of e^2/h. t = 0 only below and above\n// the whole spectrum.\nconst V = new Float64Array(128);\nfunction buildRow(P, y) {\n  const a = (H - 1 - y) / (H - 1), [p, q] = nearest(a, P.Q), lam = P.lam;\n  if (P.rp[y] === p && P.rq[y] === q && P.rlam[y] === lam) return 0;\n  (P.rp[y] = p), (P.rq[y] = q), (P.rlam[y] = lam);\n  const Em = 2 + 2 * lam, lq = lam ** q, lim = 2 + 2 * lq;\n  let pin = 1;\n  while ((p * pin) % q !== 1 % q) pin++;\n  for (let n = 0; n \u003c q; n++) V[n] = 2 * lam * cos((2 * PI * p * (n + 1)) / q + PI / (2 * q));\n  P.rl[y] = 2 * lq;\n  const o = y * NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const E = -Em + ((j + 0.5) * 2 * Em) / NS;\n    let a0 = 1, b0 = 0, c0 = 0, d0 = 1;\n    for (let n = 0; n \u003c q; n++) {\n      const v = E - V[n], na = v * a0 - c0, nb = v * b0 - d0;\n      (c0 = a0), (d0 = b0), (a0 = na), (b0 = nb);\n    }\n    const D = a0 + d0;\n    P.D[o + j] = D;\n    if (abs(D) \u003c= lim) {\n      (P.T[o + j] = BAND), (P.R[o + j] = 255);\n      continue;\n    }\n    let cnt = 0, dp = 1e300;\n    for (let k = 0; k \u003c 3; k++)\n      for (let n = 0; n \u003c q; n++) {\n        let dd = V[n] - E - 1 / dp;\n        if (dd === 0) dd = 1e-300;\n        if (dd \u003c 0) cnt++;\n        dp = dd;\n      }\n    const r = round(cnt / 3);\n    let t = (r * pin) % q;\n    if (t > q / 2) t -= q;\n    P.T[o + j] = r === 0 || r === q ? 0 : t;\n    P.R[o + j] = r;\n  }\n  return 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    D: new Float64Array(H * NS), T: new Int8Array(H * NS), R: new Uint8Array(H * NS),\n    rp: new Int32Array(H).fill(-1), rq: new Int32Array(H), rlam: new Float64Array(H), rl: new Float64Array(H),\n    Q: -1, lam: -1, next: H, phi: 0, wave: 0, hue: NaN, bw: 0, hold: 0,\n    pal: new Float32Array((2 * TM + 1) * 3), M: new Float32Array(2 * TM + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  const Q = round(cl(k[2], 16, 64)), K4 = cl(k[3], -1, 1);\n  const lam = abs(K4) \u003c 0.08 ? 1 : 2 ** (round(K4 * 50) / 50);\n  // The first frame builds all 128 rows (9 ms at Depth 16, 40 at 64). After a\n  // turn of K3 or K4 the rows are built again from the bottom, about 512\n  // periods' worth a frame, so a full redraw takes half a second; a row whose\n  // fraction and lambda did not change is kept.\n  const first = P.Q \u003c 0;\n  if (Q !== P.Q || lam !== P.lam) (P.Q = Q), (P.lam = lam), (P.next = 0);\n  for (let budget = first ? 1e9 : 512; budget > 0 && P.next \u003c H; ) budget -= buildRow(P, H - 1 - P.next++) * P.Q;\n  const sp = cl(k[1], 0.2, 3);\n  P.phi += d * sp;\n  P.wave += d * sp * 0.125;\n  if (input.btnPressed && input.btnPressed[0]) P.hold = 6;\n  P.hold = max(0, P.hold - d);\n  P.bw = cl(P.bw + (P.hold > 0 ? d : -d) * 1.5, 0, 1);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    for (let t = -TM; t \u003c= TM; t++) {\n      const o = (t + TM) * 3, at = abs(t);\n      if (t === 0) (P.pal[o] = 0), (P.pal[o + 1] = 0), (P.pal[o + 2] = 0);\n      else hsv(k[0] + (t > 0 ? 0.5 : 0.85) - 0.05 * min(at - 1, 4), 0.82, max(0.32, 1 / (1 + 0.2 * (at - 1))), P.pal, o);\n    }\n  }\n}\n\n// In a gap with label t, the density N = s + t alpha climbs t whole units from\n// the bottom of the panel to the top (Streda's formula: dN / d alpha = t).\n// Each gap is lit by cos(2 pi (2 N - w)), which needs only t alpha because s is\n// whole: as w grows, the lines of equal N rise through a gap at 1 / t of the\n// pace of the t = 1 wings, and sink where t is negative.\nconst WK = 2;\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.Q \u003c 0) return;\n  const pal = P.pal, M = P.M, bw = P.bw, cw = 1 - bw;\n  for (let y = 0; y \u003c H; y++) {\n    const c = P.rl[y] * cos(P.phi), o = y * NS, al = (H - 1 - y) / (H - 1);\n    for (let t = -TM; t \u003c= TM; t++) M[t + TM] = cw * (0.7 + 0.3 * cos(2 * PI * (WK * t * al - P.wave)));\n    let prev = P.R[o];\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0, miss = 0;\n      for (let j = x * S; j \u003c x * S + S; j++) {\n        const t = P.T[o + j], rr = P.R[o + j];\n        if (t === BAND) {\n          // White where the band is at the present phase, grey where it is at\n          // some other phase. In the 0, 1/2 and 1 rows the white slides across.\n          const w = abs(P.D[o + j] - c) \u003c= 2 ? 255 : 110;\n          (r += w), (g += w), (b += w);\n        } else {\n          // r changed between two gap samples: bands thinner than a sample lie\n          // between them, and their count lights the LED.\n          if (prev !== 255 && rr !== prev) miss += abs(rr - prev);\n          const q = (t + TM) * 3, f = M[t + TM];\n          (r += pal[q] * f), (g += pal[q + 1] * f), (b += pal[q + 2] * f);\n        }\n        prev = rr;\n      }\n      const wm = min(1, miss * (0.2 + 0.5 * bw));\n      (r /= S), (g /= S), (b /= S);\n      display.setPixel(x, y, r + (210 - r) * wm, g + (210 - g) * wm, b + (210 - b) * wm);\n    }\n  }\n}\n","layer":{"id":"layer-hofstadter-butterfly","type":"code","name":"hofstadter-butterfly","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hofstadter Butterfly\n// Family:  fractal\n// Idea:    The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hofstadter's butterfly (Douglas Hofstadter, 1976), coloured by the gap labels of Thouless, Kohmoto, Nightingale and den Nijs (1982), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1\n//\n// Knob 1: Hue. Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on.\n// Knob 2: Speed. At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower.\n// Knob 3: Depth. The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in.\n// Knob 4: Coupling. lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was.\n// Buttons: K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.\n\nconst W = 64, H = 128, S = 6, NS = W * S;\nconst { floor, round, cos, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst BAND = 127, TM = 40;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The nearest fraction p/q to a with q at most Q; on a tie the smaller q, so\n// p/q comes out in lowest terms.\nfunction nearest(a, Q) {\n  let bp = 0, bq = 1, bd = 9;\n  for (let q = 1; q \u003c= Q; q++) {\n    const p = round(a * q), d = abs(a - p / q);\n    if (d \u003c bd - 1e-12) (bd = d), (bp = p), (bq = q);\n  }\n  return [bp, bq];\n}\n\n// Harper's equation, psi(n+1) + psi(n-1) + 2 lambda cos(2 pi alpha n + nu)\n// psi(n) = E psi(n), at alpha = p/q. Row y has flux (127 - y) / 127, so 0 at\n// the bottom and 1 at the top; column x has energy across -(2 + 2 lambda) to\n// 2 + 2 lambda, six samples to an LED.\n//\n// For each sample: the trace D of the product of the q transfer matrices\n// [[E - V(n), -1], [1, 0]], taken at nu = pi / 2q. Chambers' relation says the\n// trace at any other nu is D - 2 lambda^q cos(q nu), so E is in the spectrum\n// at phase nu where |D - 2 lambda^q cos(q nu)| \u003c= 2, and at some phase where\n// |D| \u003c= 2 + 2 lambda^q. Both are checked against the one cached D, so the\n// phase turns every frame for nothing.\n//\n// In a gap, r bands lie below E. r comes from a Sturm count: the negative\n// pivots of the chain cut off at 3q sites count its levels below E, which are\n// 3r give or take one. The gap labelling theorem puts the density there at\n// N = r / q = s + t p / q with whole s and t, so r = t p mod q, and t is r times\n// the inverse of p mod q, taken between -q/2 and q/2. t is the Hall\n// conductance of a filled gap in units of e^2/h. t = 0 only below and above\n// the whole spectrum.\nconst V = new Float64Array(128);\nfunction buildRow(P, y) {\n  const a = (H - 1 - y) / (H - 1), [p, q] = nearest(a, P.Q), lam = P.lam;\n  if (P.rp[y] === p && P.rq[y] === q && P.rlam[y] === lam) return 0;\n  (P.rp[y] = p), (P.rq[y] = q), (P.rlam[y] = lam);\n  const Em = 2 + 2 * lam, lq = lam ** q, lim = 2 + 2 * lq;\n  let pin = 1;\n  while ((p * pin) % q !== 1 % q) pin++;\n  for (let n = 0; n \u003c q; n++) V[n] = 2 * lam * cos((2 * PI * p * (n + 1)) / q + PI / (2 * q));\n  P.rl[y] = 2 * lq;\n  const o = y * NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const E = -Em + ((j + 0.5) * 2 * Em) / NS;\n    let a0 = 1, b0 = 0, c0 = 0, d0 = 1;\n    for (let n = 0; n \u003c q; n++) {\n      const v = E - V[n], na = v * a0 - c0, nb = v * b0 - d0;\n      (c0 = a0), (d0 = b0), (a0 = na), (b0 = nb);\n    }\n    const D = a0 + d0;\n    P.D[o + j] = D;\n    if (abs(D) \u003c= lim) {\n      (P.T[o + j] = BAND), (P.R[o + j] = 255);\n      continue;\n    }\n    let cnt = 0, dp = 1e300;\n    for (let k = 0; k \u003c 3; k++)\n      for (let n = 0; n \u003c q; n++) {\n        let dd = V[n] - E - 1 / dp;\n        if (dd === 0) dd = 1e-300;\n        if (dd \u003c 0) cnt++;\n        dp = dd;\n      }\n    const r = round(cnt / 3);\n    let t = (r * pin) % q;\n    if (t > q / 2) t -= q;\n    P.T[o + j] = r === 0 || r === q ? 0 : t;\n    P.R[o + j] = r;\n  }\n  return 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    D: new Float64Array(H * NS), T: new Int8Array(H * NS), R: new Uint8Array(H * NS),\n    rp: new Int32Array(H).fill(-1), rq: new Int32Array(H), rlam: new Float64Array(H), rl: new Float64Array(H),\n    Q: -1, lam: -1, next: H, phi: 0, wave: 0, hue: NaN, bw: 0, hold: 0,\n    pal: new Float32Array((2 * TM + 1) * 3), M: new Float32Array(2 * TM + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  const Q = round(cl(k[2], 16, 64)), K4 = cl(k[3], -1, 1);\n  const lam = abs(K4) \u003c 0.08 ? 1 : 2 ** (round(K4 * 50) / 50);\n  // The first frame builds all 128 rows (9 ms at Depth 16, 40 at 64). After a\n  // turn of K3 or K4 the rows are built again from the bottom, about 512\n  // periods' worth a frame, so a full redraw takes half a second; a row whose\n  // fraction and lambda did not change is kept.\n  const first = P.Q \u003c 0;\n  if (Q !== P.Q || lam !== P.lam) (P.Q = Q), (P.lam = lam), (P.next = 0);\n  for (let budget = first ? 1e9 : 512; budget > 0 && P.next \u003c H; ) budget -= buildRow(P, H - 1 - P.next++) * P.Q;\n  const sp = cl(k[1], 0.2, 3);\n  P.phi += d * sp;\n  P.wave += d * sp * 0.125;\n  if (input.btnPressed && input.btnPressed[0]) P.hold = 6;\n  P.hold = max(0, P.hold - d);\n  P.bw = cl(P.bw + (P.hold > 0 ? d : -d) * 1.5, 0, 1);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    for (let t = -TM; t \u003c= TM; t++) {\n      const o = (t + TM) * 3, at = abs(t);\n      if (t === 0) (P.pal[o] = 0), (P.pal[o + 1] = 0), (P.pal[o + 2] = 0);\n      else hsv(k[0] + (t > 0 ? 0.5 : 0.85) - 0.05 * min(at - 1, 4), 0.82, max(0.32, 1 / (1 + 0.2 * (at - 1))), P.pal, o);\n    }\n  }\n}\n\n// In a gap with label t, the density N = s + t alpha climbs t whole units from\n// the bottom of the panel to the top (Streda's formula: dN / d alpha = t).\n// Each gap is lit by cos(2 pi (2 N - w)), which needs only t alpha because s is\n// whole: as w grows, the lines of equal N rise through a gap at 1 / t of the\n// pace of the t = 1 wings, and sink where t is negative.\nconst WK = 2;\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.Q \u003c 0) return;\n  const pal = P.pal, M = P.M, bw = P.bw, cw = 1 - bw;\n  for (let y = 0; y \u003c H; y++) {\n    const c = P.rl[y] * cos(P.phi), o = y * NS, al = (H - 1 - y) / (H - 1);\n    for (let t = -TM; t \u003c= TM; t++) M[t + TM] = cw * (0.7 + 0.3 * cos(2 * PI * (WK * t * al - P.wave)));\n    let prev = P.R[o];\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0, miss = 0;\n      for (let j = x * S; j \u003c x * S + S; j++) {\n        const t = P.T[o + j], rr = P.R[o + j];\n        if (t === BAND) {\n          // White where the band is at the present phase, grey where it is at\n          // some other phase. In the 0, 1/2 and 1 rows the white slides across.\n          const w = abs(P.D[o + j] - c) \u003c= 2 ? 255 : 110;\n          (r += w), (g += w), (b += w);\n        } else {\n          // r changed between two gap samples: bands thinner than a sample lie\n          // between them, and their count lights the LED.\n          if (prev !== 255 && rr !== prev) miss += abs(rr - prev);\n          const q = (t + TM) * 3, f = M[t + TM];\n          (r += pal[q] * f), (g += pal[q + 1] * f), (b += pal[q + 2] * f);\n        }\n        prev = rr;\n      }\n      const wm = min(1, miss * (0.2 + 0.5 * bw));\n      (r /= S), (g /= S), (b /= S);\n      display.setPixel(x, y, r + (210 - r) * wm, g + (210 - g) * wm, b + (210 - b) * wm);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower."},{"name":"Depth","min":16,"max":64,"about":"The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in."},{"name":"Coupling","min":-1,"max":1,"about":"lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was."}],"start":[0,2,16,0.06],"measures":{"motion":0.216,"detail":0.0564,"edges":0.3637,"complexity":0.928,"coverage":0.7618,"colour":0.4337,"drift":0.1658},"knobResponse":[0.2654,0.1807,0.0682,0.2004]},{"slug":"hopf-fibration","title":"Hopf Fibration","family":"topology","round":29,"note":"3차원 구면을 채운 원들을 입체 사영해 원근으로 그려요. 같은 위도의 밑점에서 온 원들이 겹겹의 토러스로 소용돌이치고, 가운데 세로선이 무한을 지나는 원이에요. K3 은 토러스 수(5~7)이고, K1 을 누르면 두 원만 남아 한 번 얽힌 것이 보여요.","idea":"The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.","buttons":"K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.","code":"// ===== Patternflow pattern =====\n// Title:   Hopf Fibration\n// Family:  topology\n// Idea:    The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hopf fibration (Heinz Hopf, 1931), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17\n//\n// Knob 1: Hue. Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point.\n// Knob 2: Speed. How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks.\n// Knob 3: Rings. How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line.\n// Knob 4: Fibres. How many fibres each torus has, from 14 to 17.\n// Buttons: K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, acos, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// Points round one fibre, and the most fibres on show: seven tori of\n// seventeen, the ring and the line.\nconst NT = 96, MAXF = 7 * 17 + 2, MAXS = MAXF * NT;\nconst CT = new Float32Array(NT), ST = new Float32Array(NT);\nfor (let i = 0; i \u003c NT; i++) (CT[i] = cos((TAU * i) / NT)), (ST[i] = sin((TAU * i) / NT));\n\n// Camera distance from the middle of the ring and focal length in LEDs: the\n// ring, radius 1, is 16 LEDs from the line. Depth bins for the painter.\nconst D = 7, F = D * 16, CX = 31.5, CY = 64, NB = 64, NEAR = 0.4;\n// Polar angles of the innermost and outermost circle of base points.\nconst TH0 = 0.6, TH1 = 2.35;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), I32 = (n) => new Int32Array(n);\n  params.s = {\n    T: 0, tilt: 0, tiltTo: 0, pair: 0, hue: 0, rings: 5, fib: 14, ns: 0, cam: new Float64Array(8),\n    buf: F32(N * 3),\n    // Every fibre point on screen with its depth.\n    sx: F32(MAXS), sy: F32(MAXS), sz: F32(MAXS),\n    col: F32(MAXF * 3), lit: F32(MAXF), pp: F32(MAXF),\n    // Segments as (first point, last point), sorted far to near by depth bin.\n    sa: I32(MAXS), sb: I32(MAXS), key: new Uint8Array(MAXS), ord: I32(MAXS), bin: I32(NB + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  // 1.3 a second at Speed 2, so the strands sweep across the panel rather\n  // than drift.\n  P.T += d * cl(k[1], 0.2, 3) * 1.3;\n  P.rings = cl(k[2], 5, 7);\n  P.fib = cl(k[3], 14, 17);\n  const b = input.btnPressed || [];\n  if (b[0]) P.pair = 5;\n  if (b[1]) P.tiltTo = P.tiltTo ? 0 : 1;\n  P.pair = max(0, P.pair - d);\n  P.tilt += cl(P.tiltTo - P.tilt, -d * 0.5, d * 0.5);\n}\n\n// One fibre into the point arrays. The base point sits at polar angle th\n// from the pole whose fibre is the ring, at longitude ph; with a = th/2 its\n// fibre is (cos a e^{i(t+ph)}, sin a e^{it}) on the 3-sphere, projected\n// stereographically from (0,0,0,1) and then through the camera.\nfunction fibre(P, f, th, ph, cam) {\n  const a = th / 2, ca = cos(a), sa = sin(a), cp = cos(ph) * ca, sp = sin(ph) * ca;\n  const rx = cam[0], ry = cam[1], ux = cam[2], uy = cam[3], uz = cam[4], fx = cam[5], fy = cam[6], fz = cam[7];\n  const sx = P.sx, sy = P.sy, sz = P.sz;\n  for (let i = 0, o = f * NT; i \u003c NT; i++, o++) {\n    const c = CT[i], s = ST[i], q = 1 / (1 - sa * s + 1e-6);\n    const X = (c * cp - s * sp) * q, Y = (s * cp + c * sp) * q, Z = sa * c * q;\n    const iz = F / (D + X * fx + Y * fy + Z * fz);\n    sz[o] = F / iz;\n    sx[o] = CX + (X * rx + Y * ry) * iz;\n    sy[o] = CY - (X * ux + Y * uy + Z * uz) * iz;\n  }\n}\n\n// One segment: an antialiased core whose half width hw comes from depth, and\n// a faint halo hl wide of the same light. Each LED is pulled toward the\n// line's colour by its cover, so a near strand passes over a far one with a\n// thin dark seam: that seam is what shows which of two fibres is in front.\n// The segment is walked one LED at a time along its longer axis and owns the\n// LEDs whose centres fall in [start, end) there, so the segments of one\n// fibre meet without gaps or double cover.\nfunction line(buf, x0, y0, x1, y1, r, g, b, hw, hl, op) {\n  const dx = x1 - x0, dy = y1 - y0, E = hw + 0.5 + hl, flat = abs(dx) >= abs(dy);\n  if (abs(dx) + abs(dy) \u003c 1e-3) return;\n  // Along the major axis a, across it c; k is the slope, cs the cosine that\n  // turns a distance across into a distance from the line.\n  const a0 = flat ? x0 : y0, a1 = flat ? x1 : y1, c0 = flat ? y0 : x0, k = flat ? dy / dx : dx / dy;\n  const cs = 1 / sqrt(1 + k * k), ec = E / cs, na = flat ? W : H, nc = flat ? H : W, sa = flat ? 3 : W * 3, sc = flat ? W * 3 : 3;\n  const s0 = max(0, Math.ceil(min(a0, a1) - 0.5)), s1 = min(na - 1, Math.ceil(max(a0, a1) - 0.5) - 1);\n  for (let i = s0; i \u003c= s1; i++) {\n    const cc = c0 + (i + 0.5 - a0) * k, j0 = max(0, Math.ceil(cc - ec - 0.5)), j1 = min(nc - 1, floor(cc + ec - 0.5));\n    for (let j = j0, q = i * sa + j0 * sc; j \u003c= j1; j++, q += sc) {\n      const e = (j + 0.5 - cc) * cs, dd = (e \u003c 0 ? -e : e) - hw;\n      if (dd > E - hw) continue;\n      const w = (dd \u003c -0.5 ? 1 : dd \u003c 0.2 ? 0.5 - dd : dd \u003c 0.5 ? 0.3 : (0.3 * (E - hw - dd)) / hl) * op;\n      buf[q] += (r - buf[q]) * w;\n      buf[q + 1] += (g - buf[q + 1]) * w;\n      buf[q + 2] += (b - buf[q + 2]) * w;\n    }\n  }\n}\n\n// One segment into the depth bins, unless it is off the panel or stretched\n// across it by passing close to the camera.\nfunction emit(P, a, b) {\n  const { sx, sy, sz } = P, x0 = sx[a], y0 = sy[a], x1 = sx[b], y1 = sy[b];\n  if (abs(x1 - x0) + abs(y1 - y0) >= 70) return;\n  if ((x0 \u003c -3 && x1 \u003c -3) || (x0 > W + 3 && x1 > W + 3) || (y0 \u003c -3 && y1 \u003c -3) || (y0 > H + 3 && y1 > H + 3)) return;\n  const kb = cl(floor((((sz[a] + sz[b]) / 2 - (D - 4)) / 8) * NB), 0, NB - 1);\n  P.key[P.ns] = kb;\n  P.sa[P.ns] = a;\n  P.sb[P.ns++] = b;\n  P.bin[kb + 1]++;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const T = P.T, buf = P.buf, { sx, sy, sz, sa, sb, key, ord, bin, col, lit } = P;\n  buf.fill(0);\n  // The camera turns slowly round the line and rocks between looking across\n  // the tori and looking down into the ring.\n  const az = 0.5 + T * 0.05, el = 0.75 + 0.2 * sin(T * 0.11);\n  const ce = cos(el), se = sin(el), ca = cos(az), sn = sin(az);\n  const cam = P.cam;\n  cam[0] = -sn;\n  cam[1] = ca;\n  cam[2] = -se * ca;\n  cam[3] = -se * sn;\n  cam[4] = ce;\n  cam[5] = -ce * ca;\n  cam[6] = -ce * sn;\n  cam[7] = -se;\n  const nr = P.rings, n = floor(P.fib), tl = sm(P.tilt) * 1.1, ct = cos(tl), st = sin(tl);\n  // After a K1 tap one fibre of the innermost torus and one of the next stay\n  // lit and the rest dim to under a third.\n  const hi = sm(P.pair) * 0.7, pick0 = 0, pick1 = floor(n / 2) + 1;\n  let nf = 0;\n  for (let j = 0; j \u003c 7; j++) {\n    const on = cl(nr - j, 0, 1);\n    if (on \u003c= 0) break;\n    // Latitudes spread evenly from near the ring's pole to near the line's,\n    // each breathing on its own phase; a ring the knob is still bringing in\n    // fades up on the outermost one while the others close up.\n    const u = min(j, nr - 1) / (nr - 1), th0 = TH0 + (TH1 - TH0) * u + 0.1 * sin(T * 0.35 + j * 1.7), dir = j & 1 ? -1 : 1;\n    for (let i = 0; i \u003c n; i++) {\n      const ph = (TAU * i) / n + dir * T * 0.25 + j * 0.4;\n      // The base point, its circle of latitude tipped about the x axis.\n      const bx = sin(th0) * cos(ph), by0 = sin(th0) * sin(ph), bz0 = cos(th0);\n      const by = by0 * ct - bz0 * st, bz = by0 * st + bz0 * ct;\n      fibre(P, nf, acos(cl(bz, -1, 1)), atan2(by, bx), cam);\n      // Hue from longitude, and paler toward the ring's pole, deeper and\n      // darker toward the line's.\n      hsv(P.hue + 0.55 + i / n, 0.45 + 0.5 * u, on * (1 - 0.4 * u), col, nf * 3);\n      const picked = (j === 0 && i === pick0) || (j === 1 && i === pick1);\n      lit[nf] = picked ? 1 + hi : 1 - hi;\n      P.pp[nf] = ph + j * 1.3;\n      nf++;\n    }\n  }\n  // The ring, fibre over one pole, and the line through infinity, the fibre\n  // over the other: on the panel a vertical line through the middle.\n  const rl = 1 - hi * 0.6;\n  fibre(P, nf, 0, 0, cam);\n  P.pp[nf] = 0;\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  lit[nf++] = rl;\n  for (let i = 0, o = nf * NT; i \u003c NT; i++, o++) {\n    const Z = (i / (NT - 1) - 0.5) * 60, zc = D + Z * cam[7];\n    sz[o] = zc;\n    sx[o] = CX;\n    sy[o] = CY - (F * Z * cam[4]) / zc;\n  }\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  P.pp[nf] = 0;\n  lit[nf++] = rl;\n\n  // Cut each fibre into segments as long as they can be while the curve\n  // between their ends stays within 0.3 LED of the chord (and under 12 LEDs),\n  // skipping what lies behind the camera or off the panel; bin them by depth.\n  bin.fill(0);\n  P.ns = 0;\n  for (let f = 0; f \u003c nf; f++) {\n    const o = f * NT, end = f \u003c nf - 1 ? NT : NT - 1;\n    let ia = 0;\n    for (let i = 1; i \u003c= end; ) {\n      const a = o + ia, b = o + (i % NT), ok = sz[a] > NEAR && sz[b] > NEAR;\n      if (ok && i \u003c end && i - ia \u003c 16) {\n        const dx = sx[b] - sx[a], dy = sy[b] - sy[a], m = o + ((ia + i) >> 1);\n        const dev = abs(dx * (sy[m] - sy[a]) - dy * (sx[m] - sx[a])) / (sqrt(dx * dx + dy * dy) + 1e-6);\n        if (abs(dx) + abs(dy) \u003c 12 && dev \u003c 0.3) {\n          i++;\n          continue;\n        }\n        if (i - ia > 1) {\n          emit(P, a, b - 1);\n          ia = i - 1;\n          continue;\n        }\n      }\n      if (ok) emit(P, a, b);\n      ia = i++;\n    }\n  }\n  const ns = P.ns;\n  for (let i = 1; i \u003c= NB; i++) bin[i] += bin[i - 1];\n  for (let s = 0; s \u003c ns; s++) ord[bin[key[s]]++] = s;\n  // Far to near. A fibre is lit 1 near the camera and a quarter far off,\n  // and its core is two LEDs wide near and one far; even far off it keeps a\n  // quarter-LED halo, so thin strands fade into the dark instead of stepping\n  // off it. A slow swell of light runs round every fibre at the same rate:\n  // the circle action of the fibration, which moves each point of the\n  // 3-sphere along its own fibre.\n  // Each fibre's swell starts from its own longitude so the whole picture\n  // never dims at once.\n  for (let r = ns - 1; r >= 0; r--) {\n    const s = ord[r], a = sa[s], b = sb[s], f = floor(a / NT), c = f * 3, lf = lit[f];\n    const dn = cl(((sz[a] + sz[b]) / 2 - (D - 3)) / 6, 0, 1) * (lf > 1 ? 2 - lf : 1);\n    const v = (1 - 0.75 * dn) * lf * (0.72 + 0.28 * cos((TAU * (a % NT)) / NT + P.pp[f] - 1.6 * T));\n    line(buf, sx[a], sy[a], sx[b], sy[b], min(255, col[c] * v), min(255, col[c + 1] * v), min(255, col[c + 2] * v), 0.25 + 0.6 * (1 - dn), 0.25 + 0.65 * (1 - dn), lf \u003c 1 ? lf * lf : 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-hopf-fibration","type":"code","name":"hopf-fibration","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hopf Fibration\n// Family:  topology\n// Idea:    The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hopf fibration (Heinz Hopf, 1931), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17\n//\n// Knob 1: Hue. Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point.\n// Knob 2: Speed. How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks.\n// Knob 3: Rings. How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line.\n// Knob 4: Fibres. How many fibres each torus has, from 14 to 17.\n// Buttons: K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, acos, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// Points round one fibre, and the most fibres on show: seven tori of\n// seventeen, the ring and the line.\nconst NT = 96, MAXF = 7 * 17 + 2, MAXS = MAXF * NT;\nconst CT = new Float32Array(NT), ST = new Float32Array(NT);\nfor (let i = 0; i \u003c NT; i++) (CT[i] = cos((TAU * i) / NT)), (ST[i] = sin((TAU * i) / NT));\n\n// Camera distance from the middle of the ring and focal length in LEDs: the\n// ring, radius 1, is 16 LEDs from the line. Depth bins for the painter.\nconst D = 7, F = D * 16, CX = 31.5, CY = 64, NB = 64, NEAR = 0.4;\n// Polar angles of the innermost and outermost circle of base points.\nconst TH0 = 0.6, TH1 = 2.35;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), I32 = (n) => new Int32Array(n);\n  params.s = {\n    T: 0, tilt: 0, tiltTo: 0, pair: 0, hue: 0, rings: 5, fib: 14, ns: 0, cam: new Float64Array(8),\n    buf: F32(N * 3),\n    // Every fibre point on screen with its depth.\n    sx: F32(MAXS), sy: F32(MAXS), sz: F32(MAXS),\n    col: F32(MAXF * 3), lit: F32(MAXF), pp: F32(MAXF),\n    // Segments as (first point, last point), sorted far to near by depth bin.\n    sa: I32(MAXS), sb: I32(MAXS), key: new Uint8Array(MAXS), ord: I32(MAXS), bin: I32(NB + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  // 1.3 a second at Speed 2, so the strands sweep across the panel rather\n  // than drift.\n  P.T += d * cl(k[1], 0.2, 3) * 1.3;\n  P.rings = cl(k[2], 5, 7);\n  P.fib = cl(k[3], 14, 17);\n  const b = input.btnPressed || [];\n  if (b[0]) P.pair = 5;\n  if (b[1]) P.tiltTo = P.tiltTo ? 0 : 1;\n  P.pair = max(0, P.pair - d);\n  P.tilt += cl(P.tiltTo - P.tilt, -d * 0.5, d * 0.5);\n}\n\n// One fibre into the point arrays. The base point sits at polar angle th\n// from the pole whose fibre is the ring, at longitude ph; with a = th/2 its\n// fibre is (cos a e^{i(t+ph)}, sin a e^{it}) on the 3-sphere, projected\n// stereographically from (0,0,0,1) and then through the camera.\nfunction fibre(P, f, th, ph, cam) {\n  const a = th / 2, ca = cos(a), sa = sin(a), cp = cos(ph) * ca, sp = sin(ph) * ca;\n  const rx = cam[0], ry = cam[1], ux = cam[2], uy = cam[3], uz = cam[4], fx = cam[5], fy = cam[6], fz = cam[7];\n  const sx = P.sx, sy = P.sy, sz = P.sz;\n  for (let i = 0, o = f * NT; i \u003c NT; i++, o++) {\n    const c = CT[i], s = ST[i], q = 1 / (1 - sa * s + 1e-6);\n    const X = (c * cp - s * sp) * q, Y = (s * cp + c * sp) * q, Z = sa * c * q;\n    const iz = F / (D + X * fx + Y * fy + Z * fz);\n    sz[o] = F / iz;\n    sx[o] = CX + (X * rx + Y * ry) * iz;\n    sy[o] = CY - (X * ux + Y * uy + Z * uz) * iz;\n  }\n}\n\n// One segment: an antialiased core whose half width hw comes from depth, and\n// a faint halo hl wide of the same light. Each LED is pulled toward the\n// line's colour by its cover, so a near strand passes over a far one with a\n// thin dark seam: that seam is what shows which of two fibres is in front.\n// The segment is walked one LED at a time along its longer axis and owns the\n// LEDs whose centres fall in [start, end) there, so the segments of one\n// fibre meet without gaps or double cover.\nfunction line(buf, x0, y0, x1, y1, r, g, b, hw, hl, op) {\n  const dx = x1 - x0, dy = y1 - y0, E = hw + 0.5 + hl, flat = abs(dx) >= abs(dy);\n  if (abs(dx) + abs(dy) \u003c 1e-3) return;\n  // Along the major axis a, across it c; k is the slope, cs the cosine that\n  // turns a distance across into a distance from the line.\n  const a0 = flat ? x0 : y0, a1 = flat ? x1 : y1, c0 = flat ? y0 : x0, k = flat ? dy / dx : dx / dy;\n  const cs = 1 / sqrt(1 + k * k), ec = E / cs, na = flat ? W : H, nc = flat ? H : W, sa = flat ? 3 : W * 3, sc = flat ? W * 3 : 3;\n  const s0 = max(0, Math.ceil(min(a0, a1) - 0.5)), s1 = min(na - 1, Math.ceil(max(a0, a1) - 0.5) - 1);\n  for (let i = s0; i \u003c= s1; i++) {\n    const cc = c0 + (i + 0.5 - a0) * k, j0 = max(0, Math.ceil(cc - ec - 0.5)), j1 = min(nc - 1, floor(cc + ec - 0.5));\n    for (let j = j0, q = i * sa + j0 * sc; j \u003c= j1; j++, q += sc) {\n      const e = (j + 0.5 - cc) * cs, dd = (e \u003c 0 ? -e : e) - hw;\n      if (dd > E - hw) continue;\n      const w = (dd \u003c -0.5 ? 1 : dd \u003c 0.2 ? 0.5 - dd : dd \u003c 0.5 ? 0.3 : (0.3 * (E - hw - dd)) / hl) * op;\n      buf[q] += (r - buf[q]) * w;\n      buf[q + 1] += (g - buf[q + 1]) * w;\n      buf[q + 2] += (b - buf[q + 2]) * w;\n    }\n  }\n}\n\n// One segment into the depth bins, unless it is off the panel or stretched\n// across it by passing close to the camera.\nfunction emit(P, a, b) {\n  const { sx, sy, sz } = P, x0 = sx[a], y0 = sy[a], x1 = sx[b], y1 = sy[b];\n  if (abs(x1 - x0) + abs(y1 - y0) >= 70) return;\n  if ((x0 \u003c -3 && x1 \u003c -3) || (x0 > W + 3 && x1 > W + 3) || (y0 \u003c -3 && y1 \u003c -3) || (y0 > H + 3 && y1 > H + 3)) return;\n  const kb = cl(floor((((sz[a] + sz[b]) / 2 - (D - 4)) / 8) * NB), 0, NB - 1);\n  P.key[P.ns] = kb;\n  P.sa[P.ns] = a;\n  P.sb[P.ns++] = b;\n  P.bin[kb + 1]++;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const T = P.T, buf = P.buf, { sx, sy, sz, sa, sb, key, ord, bin, col, lit } = P;\n  buf.fill(0);\n  // The camera turns slowly round the line and rocks between looking across\n  // the tori and looking down into the ring.\n  const az = 0.5 + T * 0.05, el = 0.75 + 0.2 * sin(T * 0.11);\n  const ce = cos(el), se = sin(el), ca = cos(az), sn = sin(az);\n  const cam = P.cam;\n  cam[0] = -sn;\n  cam[1] = ca;\n  cam[2] = -se * ca;\n  cam[3] = -se * sn;\n  cam[4] = ce;\n  cam[5] = -ce * ca;\n  cam[6] = -ce * sn;\n  cam[7] = -se;\n  const nr = P.rings, n = floor(P.fib), tl = sm(P.tilt) * 1.1, ct = cos(tl), st = sin(tl);\n  // After a K1 tap one fibre of the innermost torus and one of the next stay\n  // lit and the rest dim to under a third.\n  const hi = sm(P.pair) * 0.7, pick0 = 0, pick1 = floor(n / 2) + 1;\n  let nf = 0;\n  for (let j = 0; j \u003c 7; j++) {\n    const on = cl(nr - j, 0, 1);\n    if (on \u003c= 0) break;\n    // Latitudes spread evenly from near the ring's pole to near the line's,\n    // each breathing on its own phase; a ring the knob is still bringing in\n    // fades up on the outermost one while the others close up.\n    const u = min(j, nr - 1) / (nr - 1), th0 = TH0 + (TH1 - TH0) * u + 0.1 * sin(T * 0.35 + j * 1.7), dir = j & 1 ? -1 : 1;\n    for (let i = 0; i \u003c n; i++) {\n      const ph = (TAU * i) / n + dir * T * 0.25 + j * 0.4;\n      // The base point, its circle of latitude tipped about the x axis.\n      const bx = sin(th0) * cos(ph), by0 = sin(th0) * sin(ph), bz0 = cos(th0);\n      const by = by0 * ct - bz0 * st, bz = by0 * st + bz0 * ct;\n      fibre(P, nf, acos(cl(bz, -1, 1)), atan2(by, bx), cam);\n      // Hue from longitude, and paler toward the ring's pole, deeper and\n      // darker toward the line's.\n      hsv(P.hue + 0.55 + i / n, 0.45 + 0.5 * u, on * (1 - 0.4 * u), col, nf * 3);\n      const picked = (j === 0 && i === pick0) || (j === 1 && i === pick1);\n      lit[nf] = picked ? 1 + hi : 1 - hi;\n      P.pp[nf] = ph + j * 1.3;\n      nf++;\n    }\n  }\n  // The ring, fibre over one pole, and the line through infinity, the fibre\n  // over the other: on the panel a vertical line through the middle.\n  const rl = 1 - hi * 0.6;\n  fibre(P, nf, 0, 0, cam);\n  P.pp[nf] = 0;\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  lit[nf++] = rl;\n  for (let i = 0, o = nf * NT; i \u003c NT; i++, o++) {\n    const Z = (i / (NT - 1) - 0.5) * 60, zc = D + Z * cam[7];\n    sz[o] = zc;\n    sx[o] = CX;\n    sy[o] = CY - (F * Z * cam[4]) / zc;\n  }\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  P.pp[nf] = 0;\n  lit[nf++] = rl;\n\n  // Cut each fibre into segments as long as they can be while the curve\n  // between their ends stays within 0.3 LED of the chord (and under 12 LEDs),\n  // skipping what lies behind the camera or off the panel; bin them by depth.\n  bin.fill(0);\n  P.ns = 0;\n  for (let f = 0; f \u003c nf; f++) {\n    const o = f * NT, end = f \u003c nf - 1 ? NT : NT - 1;\n    let ia = 0;\n    for (let i = 1; i \u003c= end; ) {\n      const a = o + ia, b = o + (i % NT), ok = sz[a] > NEAR && sz[b] > NEAR;\n      if (ok && i \u003c end && i - ia \u003c 16) {\n        const dx = sx[b] - sx[a], dy = sy[b] - sy[a], m = o + ((ia + i) >> 1);\n        const dev = abs(dx * (sy[m] - sy[a]) - dy * (sx[m] - sx[a])) / (sqrt(dx * dx + dy * dy) + 1e-6);\n        if (abs(dx) + abs(dy) \u003c 12 && dev \u003c 0.3) {\n          i++;\n          continue;\n        }\n        if (i - ia > 1) {\n          emit(P, a, b - 1);\n          ia = i - 1;\n          continue;\n        }\n      }\n      if (ok) emit(P, a, b);\n      ia = i++;\n    }\n  }\n  const ns = P.ns;\n  for (let i = 1; i \u003c= NB; i++) bin[i] += bin[i - 1];\n  for (let s = 0; s \u003c ns; s++) ord[bin[key[s]]++] = s;\n  // Far to near. A fibre is lit 1 near the camera and a quarter far off,\n  // and its core is two LEDs wide near and one far; even far off it keeps a\n  // quarter-LED halo, so thin strands fade into the dark instead of stepping\n  // off it. A slow swell of light runs round every fibre at the same rate:\n  // the circle action of the fibration, which moves each point of the\n  // 3-sphere along its own fibre.\n  // Each fibre's swell starts from its own longitude so the whole picture\n  // never dims at once.\n  for (let r = ns - 1; r >= 0; r--) {\n    const s = ord[r], a = sa[s], b = sb[s], f = floor(a / NT), c = f * 3, lf = lit[f];\n    const dn = cl(((sz[a] + sz[b]) / 2 - (D - 3)) / 6, 0, 1) * (lf > 1 ? 2 - lf : 1);\n    const v = (1 - 0.75 * dn) * lf * (0.72 + 0.28 * cos((TAU * (a % NT)) / NT + P.pp[f] - 1.6 * T));\n    line(buf, sx[a], sy[a], sx[b], sy[b], min(255, col[c] * v), min(255, col[c + 1] * v), min(255, col[c + 2] * v), 0.25 + 0.6 * (1 - dn), 0.25 + 0.65 * (1 - dn), lf \u003c 1 ? lf * lf : 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks."},{"name":"Rings","min":5,"max":7,"about":"How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line."},{"name":"Fibres","min":14,"max":17,"about":"How many fibres each torus has, from 14 to 17."}],"start":[0,2,5,14],"measures":{"motion":1.6067,"detail":0.0653,"edges":0.2066,"complexity":1.8736,"coverage":0.5881,"colour":0.1771,"drift":0.0635},"knobResponse":[0.0967,0.1134,0.1017,0.0832]},{"slug":"horse-in-motion","title":"Horse in Motion","family":"film","round":27,"note":"양쪽에 퍼포레이션이 뚫린 필름이 영사기 게이트를 한 칸씩 끊어 내려가고, 램프가 비추는 가운데 칸에서 머이브리지의 경주마가 열두 장의 사진으로 달려요. 위아래 칸은 어둠 속에 흐리게 다음 차례를 기다려요. K3 이 그레이하운드와 앵무새, 달리는 사람의 필름으로 갈아 끼우고, 누르면 필름이 게이트에 걸려 타요.","idea":"A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.","buttons":"K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.","code":"// ===== Patternflow pattern =====\n// Title:   Horse in Motion\n// Family:  film\n// Idea:    A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after Eadweard Muybridge, The Horse in Motion (1878)\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1\n//\n// Knob 1: Tint. The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white.\n// Knob 2: Speed. Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds.\n// Knob 3: Subject. Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice.\n// Knob 4: Lamp. How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box.\n// Buttons: K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.\n\nconst W = 64, H = 128;\n// The strip: a frame every P rows with a frame line FL rows deep at its top,\n// the picture IW by IH between the perforations from column IX, and the gate\n// framing the frame whose top is on row GY. Four perforations a frame.\nconst P = 32, FL = 3, IW = 46, IH = P - FL, IX = 9, GY = 48, NP = 12, NI = IW * IH, NS = 4;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, atan2, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst fr = (v) => v - floor(v);\nfunction hash(a, b) {\n  let h = (Math.imul(a | 0, 374761393) + Math.imul(b | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// ---- The photographs, drawn once into masks: how much of each picture LED\n// the subject covers, 1 for its near side and FAR for limbs on the far side.\nconst MASK = new Float32Array(NS * NP * NI);\nconst FAR = 0.8;\nlet MO = 0;\nfunction cap(ax, ay, bx, by, ra, rb, v) {\n  const x0 = max(0, floor(min(ax - ra, bx - rb) - 1)), x1 = min(IW - 1, ceil(max(ax + ra, bx + rb)));\n  const y0 = max(0, floor(min(ay - ra, by - rb) - 1)), y1 = min(IH - 1, ceil(max(ay + ra, by + rb)));\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay;\n      const t = cl((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx, ey = py - t * dy;\n      const c = cl(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1) * v;\n      const i = MO + y * IW + x;\n      if (c > MASK[i]) MASK[i] = c;\n    }\n}\nconst dot = (x, y, r, v) => cap(x, y, x, y, r, r, v);\n// The body's own frame: x forward, y down, turned by the pitch.\nlet BX = 0, BY = 0, BC = 1, BS = 0;\nconst frame = (x, y, a) => ((BX = x), (BY = y), (BC = cos(a)), (BS = sin(a)));\nconst wx = (x, y) => BX + x * BC - y * BS;\nconst wy = (x, y) => BY + x * BS + y * BC;\nconst bcap = (x1, y1, x2, y2, ra, rb, v) => cap(wx(x1, y1), wy(x1, y1), wx(x2, y2), wy(x2, y2), ra, rb, v);\nconst bdot = (x, y, r, v) => dot(wx(x, y), wy(x, y), r, v);\n\n// Two bones from (tx, ty) towards (fx, fy), the joint bent forward (s = 1)\n// or back (s = -1). Leaves the joint in JX, JY and the reached end in FX, FY.\nlet JX = 0, JY = 0, FX = 0, FY = 0;\nfunction ik(tx, ty, fx, fy, a, b, s) {\n  let dx = fx - tx, dy = fy - ty;\n  const d = sqrt(dx * dx + dy * dy) || 1e-6;\n  const dc = cl(d, abs(a - b) + 0.05, a + b - 0.02);\n  (dx /= d), (dy /= d);\n  const ca = (a * a + dc * dc - b * b) / (2 * a * dc), sa = sqrt(max(0, 1 - ca * ca));\n  JX = tx + a * (ca * dx + s * sa * dy);\n  JY = ty + a * (ca * dy - s * sa * dx);\n  FX = tx + dx * dc;\n  FY = ty + dy * dc;\n}\n\n// One leg of a galloping animal. c is the leg's phase from touchdown; for\n// the share D of the stride the hoof stands on the ground (row GR) while the\n// body passes over it, from G[0] ahead of the top joint to G[1] behind; then\n// it lifts by G[2], folding (G[3] pulls it further behind first), and swings\n// forward, reaching G[4] past where it lands. The top joint (tx, ty) rides a\n// quarter of the sweep, hanging from the shoulder or hip (ux, uy).\n// L = bones a and b with their bend, then four radii.\nconst GR = 26.6;\nfunction leg(c, D, G, tx, ty, ux, uy, L, v) {\n  let hx, lift = 0;\n  if (c \u003c D) hx = G[0] - ((G[0] + G[1]) * c) / D;\n  else {\n    const s = (c - D) / (1 - D), w = sin(PI * s);\n    hx = -G[1] + (G[0] + G[1]) * ease(s) - G[3] * w * (1 - s) + G[4] * w * s * s;\n    lift = G[2] * sin(PI * s ** 0.75);\n  }\n  const Tx = wx(tx + 0.25 * hx, ty), Ty = wy(tx + 0.25 * hx, ty);\n  ik(Tx, Ty, wx(tx, ty) + hx, GR - lift, L[0], L[1], L[2]);\n  cap(wx(ux, uy), wy(ux, uy), Tx, Ty, L[3], L[4], v);\n  cap(Tx, Ty, JX, JY, L[4], L[5], v);\n  dot(JX, JY, L[5], v);\n  cap(JX, JY, FX, FY, L[5] * 0.75, L[6] * 0.7, v);\n  cap(FX, FY, FX + 0.6, FY + 0.2, L[6], L[6] * 0.9, v);\n}\n\n// Sallie Gardner at a 1:40 gait, ridden by G. Domm, seen from her right.\n// A transverse gallop: left hind, right hind, left fore, right fore, then\n// all four hooves off the ground with the legs gathered under the belly.\nconst LFH = [5.2, 5.2, 1, 2.3, 1.3, 0.75, 0.8], LHH = [5.4, 5.6, -1, 3, 1.4, 0.75, 0.8];\nconst GFH = [6, 5, 6.5, 1.5, 2.5], GHH = [4, 7, 5.5, 0, 1.5];\nfunction horse(c) {\n  const pitch = 0.07 * sin(TAU * (c - 0.3));\n  frame(21, 13.8 - 0.7 * cos(TAU * (c - 0.9)), pitch);\n  const fore = (td, v) => leg(fr(c - td), 0.32, GFH, 5.4, 2.8, 6.6, -0.6, LFH, v);\n  const hind = (td, v) => leg(fr(c - td), 0.32, GHH, -5, 2.4, -6.6, -1, LHH, v);\n  hind(0, FAR);\n  fore(0.33, FAR);\n  // Barrel, chest, withers and quarters.\n  bcap(-5, 0.4, 4.5, 0.2, 3.2, 3.5, 1);\n  bdot(6.6, -0.2, 3.2, 1);\n  bcap(3, -2.4, 6.2, -2, 2.4, 2.4, 1);\n  bdot(-6.6, -0.8, 3.6, 1);\n  bdot(-4.6, -1.6, 2.8, 1);\n  // Neck stretched out and nodding, head, jaw and ear.\n  const al = 0.6 - 0.1 * sin(TAU * (c - 0.3));\n  const nx = wx(6.4, -2), ny = wy(6.4, -2);\n  const px = nx + 9.4 * cos(al), py = ny - 9.4 * sin(al);\n  cap(nx, ny, px, py, 2.8, 1.5, 1);\n  cap(wx(7.8, 0.6), wy(7.8, 0.6), px, py + 1, 2, 1.2, 1);\n  const ga = 0.85 + 0.08 * sin(TAU * (c - 0.5));\n  const mx = px + 6.2 * cos(ga), my = py + 6.2 * sin(ga);\n  cap(px, py, mx, my, 1.6, 0.95, 1);\n  dot(px + 1.2 * cos(ga) - 0.8 * sin(ga), py + 1.2 * sin(ga) + 0.8 * cos(ga), 1.55, 1);\n  cap(px - 0.3, py - 1.1, px - 1.1, py - 3, 0.55, 0.3, 1);\n  // The tail streaming out behind.\n  let tx = wx(-9.6, -2.2), ty = wy(-9.6, -2.2);\n  const T = [-3, 1.2, 1.1, 1.2, -2.8, 1.5, 1.2, 1.3, -2.4, 2, 1.3, 0.5];\n  for (let j = 0; j \u003c 12; j += 4) {\n    const ux = tx + T[j], uy = ty + T[j + 1] + (0.5 + 0.15 * j) * sin(TAU * c - j / 4);\n    cap(tx, ty, ux, uy, T[j + 2], T[j + 3], 1);\n    (tx = ux), (ty = uy);\n  }\n  hind(0.1, 1);\n  fore(0.45, 1);\n  // The jockey, crouched forward with short stirrups, hands on the neck.\n  const sx = wx(1.5, -4.4), sy = wy(1.5, -4.4), a = 0.62 + 0.05 * sin(TAU * c);\n  const hx = sx + 5.6 * sin(a), hy = sy - 5.6 * cos(a);\n  cap(sx, sy, hx, hy, 1.6, 1.5, 1);\n  dot(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), 1.4, 1);\n  cap(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), hx + 3.6 * sin(a - 0.1), hy - 1.9 * cos(a - 0.1), 0.6, 0.4, 1);\n  const kx = wx(4.8, -5.2), ky = wy(4.8, -5.2);\n  cap(sx, sy, kx, ky, 1.4, 1.1, 1);\n  cap(kx, ky, wx(3.6, -1.2), wy(3.6, -1.2), 1, 0.8, 1);\n  const ex = hx + 1.8, ey = hy + 2.6, dx = wx(8.6, -4.6), dy = wy(8.6, -4.6);\n  cap(hx, hy, ex, ey, 0.8, 0.7, 1);\n  cap(ex, ey, dx, dy, 0.7, 0.6, 1);\n  cap(dx, dy, mx - 0.5, my - 0.4, 0.3, 0.3, 0.7);\n}\n\n// A greyhound in the rotary gallop: forefeet, the gathered flight\n// with the back arched and the hind feet reaching past the fore, hind feet,\n// then the long flight stretched out flat.\nconst LFD = [5.2, 5.6, 1, 1.9, 1, 0.55, 0.65], LHD = [5.6, 6, -1, 2.6, 1.15, 0.55, 0.65];\nconst GFD = [6, 4.5, 6, 1.6, 2.5], GHD = [4, 6.5, 5, 0, 2];\nfunction dog(c) {\n  const f = cos(TAU * (c - 0.38)), hl = 6.6 - 1.4 * f;\n  frame(22, 13.2 - 0.6 * f, 0.04 * sin(TAU * (c - 0.1)));\n  const fore = (td, v) => leg(fr(c - td), 0.24, GFD, hl - 1.6, 2.4, hl - 0.8, -0.8, LFD, v);\n  const hind = (td, v) => leg(fr(c - td), 0.24, GHD, -hl + 2.6, 1.6, -hl + 1.4, -1.2, LHD, v);\n  fore(0, FAR);\n  hind(0.53, FAR);\n  // Deep chest, the waist tucked up high under an arching loin.\n  bdot(hl - 1.5, 0.2, 3.2, 1);\n  bcap(hl - 1.5, 0, hl - 5.5, -0.7, 3.2, 2.4, 1);\n  bcap(hl - 5.5, -1.1, -hl + 2.5, -1.9 - 0.8 * f, 1.8, 1.5, 1);\n  bcap(0.5, -2.3 - 1.1 * f, -hl + 2, -2.1 - 0.7 * f, 1.3, 1.3, 1);\n  bdot(-hl + 1.5, -1.5 - 0.6 * f, 2.3, 1);\n  // Long neck, narrow head with a pointed muzzle, ears folded back.\n  const nx = wx(hl, -1.5), ny = wy(hl, -1.5), al = 0.55 + 0.1 * f;\n  const px = nx + 5.4 * cos(al), py = ny - 5.4 * sin(al);\n  cap(nx, ny, px, py, 2, 1.25, 1);\n  cap(px, py, px + 5 * cos(0.42), py + 5 * sin(0.42), 1.45, 0.55, 1);\n  cap(px - 0.4, py - 0.8, px - 2, py - 1.2, 0.6, 0.35, 1);\n  // A long thin tail, curving down and up again.\n  const tx = wx(-hl, -1.8), ty = wy(-hl, -1.8), w = sin(TAU * c);\n  cap(tx, ty, tx - 3, ty + 2.2 + w * 0.5, 0.8, 0.6, 1);\n  cap(tx - 3, ty + 2.2 + w * 0.5, tx - 6, ty + 3 + w, 0.6, 0.45, 1);\n  cap(tx - 6, ty + 3 + w, tx - 8.4, ty + 1.8 + 1.4 * w, 0.45, 0.35, 1);\n  fore(0.07, 1);\n  hind(0.45, 1);\n}\n\n// A sulphur-crested cockatoo flying to the right. Each wing tapers from the\n// shoulder to a fan of primaries; seen from the side its span shows only as\n// much as it is raised or lowered, and on the upstroke the hand folds back.\nfunction bird(c) {\n  const th = 0.12 + 1.07 * cos(TAU * c), up = max(0, sin(TAU * c)), dn = max(0, -sin(TAU * c));\n  frame(22, 16 + 1.4 * sin(TAU * c + 0.6), -0.06);\n  const wing = (o, v) => {\n    const sx = wx(1 + o, -1.6), sy = wy(1 + o, -1.6), e = sin(th);\n    const ax = sx + 0.8 * dn - 2.3, ay = sy - 5 * e + 0.3;\n    const bx = ax + 1.2 * dn - 3.5 * up + 0.6, by = ay - 5.6 * e;\n    cap(sx - 2.3, sy + 0.3, ax, ay, 2.5, 2.1, v);\n    cap(ax, ay, bx, by, 2.1, 1.1, v);\n    for (let j = 0; j \u003c 4; j++) {\n      const a = th + 0.12 - 0.2 * j;\n      cap(bx + 0.4 - 0.7 * j, by, bx - 0.8 - 1.1 * j - 1.4 * up, by - 3.6 * sin(a), 0.6, 0.3, v);\n    }\n  };\n  wing(-0.8, FAR);\n  bcap(-4, 0.3, 4, -0.4, 2.3, 2.6, 1);\n  bdot(6.2, -1.2, 2.1, 1);\n  bcap(7.6, -1.6, 9.8, -0.4, 1, 0.4, 1);\n  bcap(9.4, -0.8, 9.6, 0.5, 0.45, 0.3, 1);\n  // The crest laid back in flight.\n  bcap(6, -3, 2.2, -4.6 + 0.4 * sin(TAU * c), 0.9, 0.35, 1);\n  const e = MO + round(wy(6.8, -1.6) - 0.5) * IW + round(wx(6.8, -1.6) - 0.5);\n  MASK[e] = 0.35;\n  bcap(-3.4, 0.5, -12.5, 1.4, 1.5, 0.9, 1);\n  bcap(-3.4, 1, -12, 2.9, 1.1, 0.6, FAR);\n  wing(0, 1);\n}\n\n// A man running. Hip and knee follow keyframes eight to a stride and the\n// arms swing against the legs. The figure is set down so the lower foot\n// stands on the floor, a little above it in the two moments of flight.\nconst THI = [0.42, 0.12, -0.22, -0.5, -0.35, 0.35, 0.85, 0.75], KNE = [0.12, 0.55, 0.4, 0.35, 1.5, 2.1, 1.3, 0.4];\nconst key = (K, p) => {\n  const q = fr(p) * 8, i = floor(q), f = q - i;\n  return K[i] + (K[(i + 1) & 7] - K[i]) * (1 - cos(PI * f)) * 0.5;\n};\nconst RJ = new Float32Array(24);\nfunction runner(c) {\n  let low = 0;\n  for (let s = 0; s \u003c 2; s++) {\n    const ph = c + 0.5 * s, t = key(THI, ph), k = t - key(KNE, ph), o = s * 12;\n    const ua = -0.75 * sin(TAU * (ph - 0.55));\n    RJ.set([6.4 * sin(t), 6.4 * cos(t)], o);\n    RJ.set([RJ[o] + 6.2 * sin(k), RJ[o + 1] + 6.2 * cos(k)], o + 2);\n    RJ.set([RJ[o + 2] + 2.2 * sin(k + 1.45), RJ[o + 3] + 2.2 * cos(k + 1.45)], o + 4);\n    RJ.set([4.3 * sin(ua), 4.3 * cos(ua)], o + 6);\n    RJ.set([RJ[o + 6] + 3.8 * sin(ua + 1.7), RJ[o + 7] + 3.8 * cos(ua + 1.7)], o + 8);\n    low = max(low, RJ[o + 3] + 0.5, RJ[o + 5]);\n  }\n  const fl = fr(c * 2), lift = fl > 0.375 && fl \u003c 0.5 ? 1.2 * sin((PI * (fl - 0.375)) / 0.125) : 0;\n  const hx = 21, hy = 26.6 - low - lift, sx = hx + 1.3, sy = hy - 7.1;\n  const limb = (s, v) => {\n    const o = s * 12;\n    cap(hx, hy, hx + RJ[o], hy + RJ[o + 1], 1.7, 1.15, v);\n    cap(hx + RJ[o], hy + RJ[o + 1], hx + RJ[o + 2], hy + RJ[o + 3], 1.15, 0.7, v);\n    cap(hx + RJ[o + 2], hy + RJ[o + 3], hx + RJ[o + 4], hy + RJ[o + 5], 0.7, 0.5, v);\n  };\n  const arm = (s, v) => {\n    const o = s * 12;\n    cap(sx, sy, sx + RJ[o + 6], sy + RJ[o + 7], 0.95, 0.75, v);\n    cap(sx + RJ[o + 6], sy + RJ[o + 7], sx + RJ[o + 8], sy + RJ[o + 9], 0.75, 0.6, v);\n    dot(sx + RJ[o + 8], sy + RJ[o + 9], 0.75, v);\n  };\n  arm(1, FAR);\n  limb(1, FAR);\n  cap(hx, hy, sx, sy, 1.9, 2.2, 1);\n  cap(sx, sy, sx + 0.8, sy - 2, 0.9, 0.9, 1);\n  dot(sx + 0.9, sy - 2.8, 1.75, 1);\n  limb(0, 1);\n  arm(0, 1);\n}\nconst FIGS = [horse, dog, bird, runner];\n\n// The grounds behind them. At Palo Alto a white wall ruled with upright lines\n// stands behind the track, and the horse's shadow lies on the track under\n// her. In Philadelphia black cloth strung with a white thread grid hangs\n// behind a pale floor.\nconst BD = new Float32Array(2 * NI);\nconst FIG = [0.04, 0.9, 0.9, 0.9];\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const i = y * IW + x;\n    let t = y \u003c 22 ? (x % 4 === 1 ? 0.6 : 0.9) : y \u003c 23 ? 0.32 : y \u003c 24 ? 0.55 : 0.8 - 0.02 * (y - 24);\n    const sx = (x + 0.5 - 21) / 10, sy = (y + 0.5 - 27.3) / 1.4;\n    if (sx * sx + sy * sy \u003c 1) t *= 0.6;\n    BD[i] = t;\n    BD[NI + i] = y > 26 ? 0.3 : x % 6 === 2 || y % 6 === 3 ? 0.34 : 0.05;\n  }\n// Old lenses: the corners of every plate fall off.\nconst VG = new Float32Array(NI);\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const u = (x + 0.5) / IW - 0.5, v = (y + 0.5) / IH - 0.5;\n    VG[y * IW + x] = (1 - 0.5 * u * u) * (1 - 0.4 * v * v);\n  }\n\n// Film stocks: a curve from each stock's black to its clear base, bent\n// through the grey in the middle of the row.\nconst STOCK = [\n  [0.05, 0.025, 0.012, 0.62, 0.38, 0.18, 1, 0.9, 0.7],\n  [0.05, 0.022, 0, 0.75, 0.42, 0.08, 1, 0.74, 0.3],\n  [0.05, 0.01, 0.02, 0.72, 0.26, 0.36, 1, 0.7, 0.76],\n  [0.01, 0.025, 0.07, 0.16, 0.36, 0.72, 0.72, 0.86, 1],\n  [0.01, 0.04, 0.02, 0.2, 0.52, 0.3, 0.62, 1, 0.68],\n];\nconst LAMP = [1, 0.94, 0.82];\n\n// Columns: -1 the gate's rails, -2 black film edge, -3 perforation, -4 the\n// corner column of a perforation, 0.. the picture.\nconst COL = new Int8Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const e = min(x, W - 1 - x);\n  COL[x] = e === 0 ? -1 : e >= IX ? x - IX : e >= 2 && e \u003c= 6 ? (e === 2 || e === 6 ? -4 : -3) : -2;\n}\n\nexport function setup(params) {\n  for (let s = 0; s \u003c NS; s++)\n    for (let p = 0; p \u003c NP; p++) {\n      MO = (s * NP + p) * NI;\n      FIGS[s](p / NP);\n    }\n  // Dust and a stray hair on sixteen frames that repeat along the reel, and\n  // grain on the film's own rows.\n  const DU = new Float32Array(16 * NI).fill(1);\n  for (let f = 0; f \u003c 16; f++) {\n    for (let j = 0; j \u003c 4; j++) {\n      const x = floor(Math.random() * IW), y = floor(Math.random() * IH);\n      DU[f * NI + y * IW + x] = 0.25;\n      if (Math.random() \u003c 0.4 && x + 1 \u003c IW) DU[f * NI + y * IW + x + 1] = 0.55;\n    }\n    if (f % 7 === 3) {\n      let x = 5 + Math.random() * 36, y = 4 + Math.random() * 20, a = Math.random() * TAU;\n      for (let j = 0; j \u003c 9; j++) {\n        DU[f * NI + floor(y) * IW + floor(x)] = 0.35;\n        a += Math.random() - 0.5;\n        x = cl(x + cos(a), 0, IW - 1);\n        y = cl(y + sin(a), 0, IH - 1);\n      }\n    }\n  }\n  const GN = new Float32Array(W * 256);\n  for (let i = 0; i \u003c GN.length; i++) GN[i] = 0.95 + 0.1 * Math.random();\n  params.s = {\n    DU, GN, n: 0, cyc: 0.5, pos: 1, shut: 1, fps: 3, sub: -1, base: 0, sp: [], tint: -1, lamp: -9,\n    lut: new Float32Array(3 * 65), LY: new Float32Array(H), SP: new Float32Array(H), LX: new Float32Array(W), burns: [], ask: false,\n  };\n  const S = params.s;\n  for (let x = 0; x \u003c W; x++) {\n    const c = COL[x];\n    S.LX[x] = c >= 0 ? 1 - 0.1 * ((c - 22.5) / 23) ** 2 : c === -1 ? 0.1 : c === -2 ? 0.35 : 0.5;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const d = y \u003c GY + FL ? GY + FL - y : y > GY + P - 1 ? y - GY - P + 1 : 0;\n    S.LY[y] = d === 0 ? 1 - 0.08 * ((y - GY - FL - IH / 2) / (IH / 2)) ** 2 : 0.5 * exp(-d * 0.9);\n  }\n}\n\nfunction tune(S, k) {\n  const tint = cl(k[0], 0, 1);\n  if (tint !== S.tint) {\n    S.tint = tint;\n    const q = tint * (STOCK.length - 1), i = min(STOCK.length - 2, floor(q)), f = q - i;\n    for (let j = 0; j \u003c= 64; j++) {\n      const t = j / 64, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const A = STOCK[i], B = STOCK[i + 1];\n        const g = (s) => a * s[ch] + b * s[ch + 3] + c * s[ch + 6];\n        S.lut[j * 3 + ch] = g(A) + (g(B) - g(A)) * f;\n      }\n    }\n  }\n  const lamp = cl(k[3], -1, 1);\n  if (lamp !== S.lamp) {\n    S.lamp = lamp;\n    const b = 0.05 + 0.36 * (lamp + 1);\n    for (let y = 0; y \u003c H; y++) S.SP[y] = b * (0.6 + 0.4 * exp(-(((y - 65) / 34) ** 2)));\n  }\n}\n\n// Where the strip stands: sI rows pulled since the start; frame k holds rows\n// GY + sI + k P onwards.\nconst rows = (S) => round(S.pos * P);\nconst frameAt = (S, y) => floor((y - GY - rows(S)) / P);\nfunction subOf(S, k) {\n  let s = S.base;\n  for (const sp of S.sp) if (k \u003c= sp.k) s = sp.s;\n  return s;\n}\n\nconst BURN = 1.9;\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  tune(S, k);\n  const sub = cl(round(k[2]), 0, NS - 1);\n  if (S.sub \u003c 0) S.base = sub;\n  else if (sub !== S.sub) S.sp.push({ k: frameAt(S, 0) - 1, s: sub });\n  S.sub = sub;\n  while (S.sp.length && frameAt(S, H - 1) \u003c= S.sp[0].k) S.base = S.sp.shift().s;\n  S.fps = 1.5 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0] && !S.burns.some((b) => b.t \u003c BURN + 0.5)) S.ask = true;\n  const tp = min(0.16, 0.32 / S.fps);\n  // The film stands still while a frame burns, and a burnt frame is\n  // forgotten once it has gone off the bottom of the panel.\n  let held = false;\n  for (const b of S.burns) if ((b.t += dt) \u003c BURN) held = true;\n  if (S.burns.length) S.burns = S.burns.filter((b) => frameAt(S, H - 1) >= b.k && b.t \u003c 60);\n  if (!held) {\n    S.cyc += dt * S.fps;\n    if (S.cyc >= 1) (S.cyc -= 1), S.n++;\n  }\n  const tau = S.cyc / S.fps;\n  if (tau \u003c tp) {\n    const u = tau / tp;\n    S.pos = S.n + (1 - cos(PI * u)) / 2;\n    S.shut = 1 - 0.45 * sin(PI * u);\n  } else {\n    S.pos = S.n + 1;\n    S.shut = 1;\n    if (S.ask) {\n      S.ask = false;\n      const h = [0, 1, 2].map(() => Math.random() * TAU), kg = frameAt(S, GY + FL);\n      S.burns = S.burns.filter((b) => b.k !== kg);\n      S.burns.push({ k: kg, t: 0, x: 14 + 18 * Math.random(), y: 9 + 10 * Math.random(), h });\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const sI = rows(S), { lut, DU, GN, LX, LY, SP, burns } = S;\n  // A burn: first a blister, then a hole opening in it with a glowing rim\n  // that cools once the film moves on.\n  for (const b of burns) {\n    b.rh = 9.5 * ease((b.t - 0.35) / 1.3);\n    b.rb = b.rh + 1.2 + 2.6 * ease(b.t / 0.5);\n    b.gl = b.t \u003c BURN ? 1 : max(0, 1 - (b.t - BURN) / 1.4);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const v = y - GY - sI, k = floor(v / P), r = v - k * P, iy = r - FL;\n    const sub = subOf(S, k), mo = (sub * NP + (((-k % NP) + NP) % NP)) * NI, bo = sub ? NI : 0, fg = FIG[sub];\n    const pr = r & 7, hole = pr >= 3 && pr \u003c= 6, hedge = pr === 3 || pr === 6;\n    const ex = 0.93 + 0.1 * hash(k, 7), du = (k & 15) * NI, gn = (v & 255) * W;\n    let splice = false;\n    if (iy \u003c 0) for (const sp of S.sp) if (sp.k === k - 1) splice = true;\n    // A scratch down the emulsion, one every few frames, fixed to the film.\n    const seg = floor(k / 5), hs = hash(seg, 11);\n    const scx = hs \u003c 0.55 ? floor(hash(seg, 12) * 40) + 3 + (((v >> 3) & 3) === 1 ? 1 : 0) : -9;\n    const sc0 = hash(seg, 13) * 5 * P, sc1 = sc0 + (0.3 + hash(seg, 14)) * 3 * P, vs = v - seg * 5 * P;\n    const scr = vs > sc0 && vs \u003c sc1 ? scx : -9;\n    const ly = LY[y] * S.shut, sp = SP[y];\n    let burn = null;\n    for (const b of burns) if (b.k === k) burn = b;\n    for (let x = 0; x \u003c W; x++) {\n      const c = COL[x];\n      const a = ly * LX[x], L = 0.95 * a + sp * (1 - 0.95 * a);\n      let R, G, Bl;\n      if (c \u003c -2 && hole) {\n        // A perforation: the lamp straight through, its corners rounded.\n        const e = c === -4 && hedge ? 0.45 : 1;\n        R = LAMP[0] * L * e;\n        G = LAMP[1] * L * e;\n        Bl = LAMP[2] * L * e;\n      } else if (c === -1) {\n        R = G = Bl = 0.12 * L;\n      } else {\n        let t = 0.03;\n        let br = 0;\n        if (c >= 0 && iy >= 0) {\n          const i = iy * IW + c;\n          t = (BD[bo + i] + (fg - BD[bo + i]) * MASK[mo + i]) * VG[i] * ex * DU[du + i];\n          if (c === scr) t = min(1, t + 0.22);\n          if (burn) {\n            const dx = c + 0.5 - burn.x, dy = iy + 0.5 - burn.y, an = atan2(dy, dx), h = burn.h;\n            const d = sqrt(dx * dx + dy * dy) / (1 + 0.18 * sin(3 * an + h[0]) + 0.1 * sin(5 * an + h[1]) + 0.06 * sin(11 * an + h[2]));\n            if (d \u003c burn.rh) br = 1;\n            else if (d \u003c burn.rh + 1.4 && burn.rh > 0) br = 2;\n            else if (d \u003c burn.rb) {\n              t *= 0.3 + 0.5 * hash(c >> 1, (iy >> 1) + k * 31);\n              br = 3;\n            }\n          }\n        } else if (splice && c >= 0) t = r === 1 ? 0.55 : 0.2;\n        if (br === 1) {\n          R = LAMP[0] * L;\n          G = LAMP[1] * L;\n          Bl = LAMP[2] * L;\n        } else {\n          const j = round(cl(t, 0, 1) * 64) * 3, g = L * GN[gn + x];\n          R = lut[j] * g;\n          G = lut[j + 1] * g;\n          Bl = lut[j + 2] * g;\n          if (br === 3) (R = R * 0.8 + 0.1 * L), (G *= 0.6), (Bl *= 0.4);\n          if (br === 2) (R += burn.gl), (G += 0.42 * burn.gl), (Bl += 0.06 * burn.gl);\n        }\n      }\n      display.setPixel(x, y, min(255, 255 * R), min(255, 255 * G), min(255, 255 * Bl));\n    }\n  }\n}\n","layer":{"id":"layer-horse-in-motion","type":"code","name":"horse-in-motion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Horse in Motion\n// Family:  film\n// Idea:    A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after Eadweard Muybridge, The Horse in Motion (1878)\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1\n//\n// Knob 1: Tint. The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white.\n// Knob 2: Speed. Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds.\n// Knob 3: Subject. Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice.\n// Knob 4: Lamp. How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box.\n// Buttons: K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.\n\nconst W = 64, H = 128;\n// The strip: a frame every P rows with a frame line FL rows deep at its top,\n// the picture IW by IH between the perforations from column IX, and the gate\n// framing the frame whose top is on row GY. Four perforations a frame.\nconst P = 32, FL = 3, IW = 46, IH = P - FL, IX = 9, GY = 48, NP = 12, NI = IW * IH, NS = 4;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, atan2, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst fr = (v) => v - floor(v);\nfunction hash(a, b) {\n  let h = (Math.imul(a | 0, 374761393) + Math.imul(b | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// ---- The photographs, drawn once into masks: how much of each picture LED\n// the subject covers, 1 for its near side and FAR for limbs on the far side.\nconst MASK = new Float32Array(NS * NP * NI);\nconst FAR = 0.8;\nlet MO = 0;\nfunction cap(ax, ay, bx, by, ra, rb, v) {\n  const x0 = max(0, floor(min(ax - ra, bx - rb) - 1)), x1 = min(IW - 1, ceil(max(ax + ra, bx + rb)));\n  const y0 = max(0, floor(min(ay - ra, by - rb) - 1)), y1 = min(IH - 1, ceil(max(ay + ra, by + rb)));\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay;\n      const t = cl((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx, ey = py - t * dy;\n      const c = cl(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1) * v;\n      const i = MO + y * IW + x;\n      if (c > MASK[i]) MASK[i] = c;\n    }\n}\nconst dot = (x, y, r, v) => cap(x, y, x, y, r, r, v);\n// The body's own frame: x forward, y down, turned by the pitch.\nlet BX = 0, BY = 0, BC = 1, BS = 0;\nconst frame = (x, y, a) => ((BX = x), (BY = y), (BC = cos(a)), (BS = sin(a)));\nconst wx = (x, y) => BX + x * BC - y * BS;\nconst wy = (x, y) => BY + x * BS + y * BC;\nconst bcap = (x1, y1, x2, y2, ra, rb, v) => cap(wx(x1, y1), wy(x1, y1), wx(x2, y2), wy(x2, y2), ra, rb, v);\nconst bdot = (x, y, r, v) => dot(wx(x, y), wy(x, y), r, v);\n\n// Two bones from (tx, ty) towards (fx, fy), the joint bent forward (s = 1)\n// or back (s = -1). Leaves the joint in JX, JY and the reached end in FX, FY.\nlet JX = 0, JY = 0, FX = 0, FY = 0;\nfunction ik(tx, ty, fx, fy, a, b, s) {\n  let dx = fx - tx, dy = fy - ty;\n  const d = sqrt(dx * dx + dy * dy) || 1e-6;\n  const dc = cl(d, abs(a - b) + 0.05, a + b - 0.02);\n  (dx /= d), (dy /= d);\n  const ca = (a * a + dc * dc - b * b) / (2 * a * dc), sa = sqrt(max(0, 1 - ca * ca));\n  JX = tx + a * (ca * dx + s * sa * dy);\n  JY = ty + a * (ca * dy - s * sa * dx);\n  FX = tx + dx * dc;\n  FY = ty + dy * dc;\n}\n\n// One leg of a galloping animal. c is the leg's phase from touchdown; for\n// the share D of the stride the hoof stands on the ground (row GR) while the\n// body passes over it, from G[0] ahead of the top joint to G[1] behind; then\n// it lifts by G[2], folding (G[3] pulls it further behind first), and swings\n// forward, reaching G[4] past where it lands. The top joint (tx, ty) rides a\n// quarter of the sweep, hanging from the shoulder or hip (ux, uy).\n// L = bones a and b with their bend, then four radii.\nconst GR = 26.6;\nfunction leg(c, D, G, tx, ty, ux, uy, L, v) {\n  let hx, lift = 0;\n  if (c \u003c D) hx = G[0] - ((G[0] + G[1]) * c) / D;\n  else {\n    const s = (c - D) / (1 - D), w = sin(PI * s);\n    hx = -G[1] + (G[0] + G[1]) * ease(s) - G[3] * w * (1 - s) + G[4] * w * s * s;\n    lift = G[2] * sin(PI * s ** 0.75);\n  }\n  const Tx = wx(tx + 0.25 * hx, ty), Ty = wy(tx + 0.25 * hx, ty);\n  ik(Tx, Ty, wx(tx, ty) + hx, GR - lift, L[0], L[1], L[2]);\n  cap(wx(ux, uy), wy(ux, uy), Tx, Ty, L[3], L[4], v);\n  cap(Tx, Ty, JX, JY, L[4], L[5], v);\n  dot(JX, JY, L[5], v);\n  cap(JX, JY, FX, FY, L[5] * 0.75, L[6] * 0.7, v);\n  cap(FX, FY, FX + 0.6, FY + 0.2, L[6], L[6] * 0.9, v);\n}\n\n// Sallie Gardner at a 1:40 gait, ridden by G. Domm, seen from her right.\n// A transverse gallop: left hind, right hind, left fore, right fore, then\n// all four hooves off the ground with the legs gathered under the belly.\nconst LFH = [5.2, 5.2, 1, 2.3, 1.3, 0.75, 0.8], LHH = [5.4, 5.6, -1, 3, 1.4, 0.75, 0.8];\nconst GFH = [6, 5, 6.5, 1.5, 2.5], GHH = [4, 7, 5.5, 0, 1.5];\nfunction horse(c) {\n  const pitch = 0.07 * sin(TAU * (c - 0.3));\n  frame(21, 13.8 - 0.7 * cos(TAU * (c - 0.9)), pitch);\n  const fore = (td, v) => leg(fr(c - td), 0.32, GFH, 5.4, 2.8, 6.6, -0.6, LFH, v);\n  const hind = (td, v) => leg(fr(c - td), 0.32, GHH, -5, 2.4, -6.6, -1, LHH, v);\n  hind(0, FAR);\n  fore(0.33, FAR);\n  // Barrel, chest, withers and quarters.\n  bcap(-5, 0.4, 4.5, 0.2, 3.2, 3.5, 1);\n  bdot(6.6, -0.2, 3.2, 1);\n  bcap(3, -2.4, 6.2, -2, 2.4, 2.4, 1);\n  bdot(-6.6, -0.8, 3.6, 1);\n  bdot(-4.6, -1.6, 2.8, 1);\n  // Neck stretched out and nodding, head, jaw and ear.\n  const al = 0.6 - 0.1 * sin(TAU * (c - 0.3));\n  const nx = wx(6.4, -2), ny = wy(6.4, -2);\n  const px = nx + 9.4 * cos(al), py = ny - 9.4 * sin(al);\n  cap(nx, ny, px, py, 2.8, 1.5, 1);\n  cap(wx(7.8, 0.6), wy(7.8, 0.6), px, py + 1, 2, 1.2, 1);\n  const ga = 0.85 + 0.08 * sin(TAU * (c - 0.5));\n  const mx = px + 6.2 * cos(ga), my = py + 6.2 * sin(ga);\n  cap(px, py, mx, my, 1.6, 0.95, 1);\n  dot(px + 1.2 * cos(ga) - 0.8 * sin(ga), py + 1.2 * sin(ga) + 0.8 * cos(ga), 1.55, 1);\n  cap(px - 0.3, py - 1.1, px - 1.1, py - 3, 0.55, 0.3, 1);\n  // The tail streaming out behind.\n  let tx = wx(-9.6, -2.2), ty = wy(-9.6, -2.2);\n  const T = [-3, 1.2, 1.1, 1.2, -2.8, 1.5, 1.2, 1.3, -2.4, 2, 1.3, 0.5];\n  for (let j = 0; j \u003c 12; j += 4) {\n    const ux = tx + T[j], uy = ty + T[j + 1] + (0.5 + 0.15 * j) * sin(TAU * c - j / 4);\n    cap(tx, ty, ux, uy, T[j + 2], T[j + 3], 1);\n    (tx = ux), (ty = uy);\n  }\n  hind(0.1, 1);\n  fore(0.45, 1);\n  // The jockey, crouched forward with short stirrups, hands on the neck.\n  const sx = wx(1.5, -4.4), sy = wy(1.5, -4.4), a = 0.62 + 0.05 * sin(TAU * c);\n  const hx = sx + 5.6 * sin(a), hy = sy - 5.6 * cos(a);\n  cap(sx, sy, hx, hy, 1.6, 1.5, 1);\n  dot(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), 1.4, 1);\n  cap(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), hx + 3.6 * sin(a - 0.1), hy - 1.9 * cos(a - 0.1), 0.6, 0.4, 1);\n  const kx = wx(4.8, -5.2), ky = wy(4.8, -5.2);\n  cap(sx, sy, kx, ky, 1.4, 1.1, 1);\n  cap(kx, ky, wx(3.6, -1.2), wy(3.6, -1.2), 1, 0.8, 1);\n  const ex = hx + 1.8, ey = hy + 2.6, dx = wx(8.6, -4.6), dy = wy(8.6, -4.6);\n  cap(hx, hy, ex, ey, 0.8, 0.7, 1);\n  cap(ex, ey, dx, dy, 0.7, 0.6, 1);\n  cap(dx, dy, mx - 0.5, my - 0.4, 0.3, 0.3, 0.7);\n}\n\n// A greyhound in the rotary gallop: forefeet, the gathered flight\n// with the back arched and the hind feet reaching past the fore, hind feet,\n// then the long flight stretched out flat.\nconst LFD = [5.2, 5.6, 1, 1.9, 1, 0.55, 0.65], LHD = [5.6, 6, -1, 2.6, 1.15, 0.55, 0.65];\nconst GFD = [6, 4.5, 6, 1.6, 2.5], GHD = [4, 6.5, 5, 0, 2];\nfunction dog(c) {\n  const f = cos(TAU * (c - 0.38)), hl = 6.6 - 1.4 * f;\n  frame(22, 13.2 - 0.6 * f, 0.04 * sin(TAU * (c - 0.1)));\n  const fore = (td, v) => leg(fr(c - td), 0.24, GFD, hl - 1.6, 2.4, hl - 0.8, -0.8, LFD, v);\n  const hind = (td, v) => leg(fr(c - td), 0.24, GHD, -hl + 2.6, 1.6, -hl + 1.4, -1.2, LHD, v);\n  fore(0, FAR);\n  hind(0.53, FAR);\n  // Deep chest, the waist tucked up high under an arching loin.\n  bdot(hl - 1.5, 0.2, 3.2, 1);\n  bcap(hl - 1.5, 0, hl - 5.5, -0.7, 3.2, 2.4, 1);\n  bcap(hl - 5.5, -1.1, -hl + 2.5, -1.9 - 0.8 * f, 1.8, 1.5, 1);\n  bcap(0.5, -2.3 - 1.1 * f, -hl + 2, -2.1 - 0.7 * f, 1.3, 1.3, 1);\n  bdot(-hl + 1.5, -1.5 - 0.6 * f, 2.3, 1);\n  // Long neck, narrow head with a pointed muzzle, ears folded back.\n  const nx = wx(hl, -1.5), ny = wy(hl, -1.5), al = 0.55 + 0.1 * f;\n  const px = nx + 5.4 * cos(al), py = ny - 5.4 * sin(al);\n  cap(nx, ny, px, py, 2, 1.25, 1);\n  cap(px, py, px + 5 * cos(0.42), py + 5 * sin(0.42), 1.45, 0.55, 1);\n  cap(px - 0.4, py - 0.8, px - 2, py - 1.2, 0.6, 0.35, 1);\n  // A long thin tail, curving down and up again.\n  const tx = wx(-hl, -1.8), ty = wy(-hl, -1.8), w = sin(TAU * c);\n  cap(tx, ty, tx - 3, ty + 2.2 + w * 0.5, 0.8, 0.6, 1);\n  cap(tx - 3, ty + 2.2 + w * 0.5, tx - 6, ty + 3 + w, 0.6, 0.45, 1);\n  cap(tx - 6, ty + 3 + w, tx - 8.4, ty + 1.8 + 1.4 * w, 0.45, 0.35, 1);\n  fore(0.07, 1);\n  hind(0.45, 1);\n}\n\n// A sulphur-crested cockatoo flying to the right. Each wing tapers from the\n// shoulder to a fan of primaries; seen from the side its span shows only as\n// much as it is raised or lowered, and on the upstroke the hand folds back.\nfunction bird(c) {\n  const th = 0.12 + 1.07 * cos(TAU * c), up = max(0, sin(TAU * c)), dn = max(0, -sin(TAU * c));\n  frame(22, 16 + 1.4 * sin(TAU * c + 0.6), -0.06);\n  const wing = (o, v) => {\n    const sx = wx(1 + o, -1.6), sy = wy(1 + o, -1.6), e = sin(th);\n    const ax = sx + 0.8 * dn - 2.3, ay = sy - 5 * e + 0.3;\n    const bx = ax + 1.2 * dn - 3.5 * up + 0.6, by = ay - 5.6 * e;\n    cap(sx - 2.3, sy + 0.3, ax, ay, 2.5, 2.1, v);\n    cap(ax, ay, bx, by, 2.1, 1.1, v);\n    for (let j = 0; j \u003c 4; j++) {\n      const a = th + 0.12 - 0.2 * j;\n      cap(bx + 0.4 - 0.7 * j, by, bx - 0.8 - 1.1 * j - 1.4 * up, by - 3.6 * sin(a), 0.6, 0.3, v);\n    }\n  };\n  wing(-0.8, FAR);\n  bcap(-4, 0.3, 4, -0.4, 2.3, 2.6, 1);\n  bdot(6.2, -1.2, 2.1, 1);\n  bcap(7.6, -1.6, 9.8, -0.4, 1, 0.4, 1);\n  bcap(9.4, -0.8, 9.6, 0.5, 0.45, 0.3, 1);\n  // The crest laid back in flight.\n  bcap(6, -3, 2.2, -4.6 + 0.4 * sin(TAU * c), 0.9, 0.35, 1);\n  const e = MO + round(wy(6.8, -1.6) - 0.5) * IW + round(wx(6.8, -1.6) - 0.5);\n  MASK[e] = 0.35;\n  bcap(-3.4, 0.5, -12.5, 1.4, 1.5, 0.9, 1);\n  bcap(-3.4, 1, -12, 2.9, 1.1, 0.6, FAR);\n  wing(0, 1);\n}\n\n// A man running. Hip and knee follow keyframes eight to a stride and the\n// arms swing against the legs. The figure is set down so the lower foot\n// stands on the floor, a little above it in the two moments of flight.\nconst THI = [0.42, 0.12, -0.22, -0.5, -0.35, 0.35, 0.85, 0.75], KNE = [0.12, 0.55, 0.4, 0.35, 1.5, 2.1, 1.3, 0.4];\nconst key = (K, p) => {\n  const q = fr(p) * 8, i = floor(q), f = q - i;\n  return K[i] + (K[(i + 1) & 7] - K[i]) * (1 - cos(PI * f)) * 0.5;\n};\nconst RJ = new Float32Array(24);\nfunction runner(c) {\n  let low = 0;\n  for (let s = 0; s \u003c 2; s++) {\n    const ph = c + 0.5 * s, t = key(THI, ph), k = t - key(KNE, ph), o = s * 12;\n    const ua = -0.75 * sin(TAU * (ph - 0.55));\n    RJ.set([6.4 * sin(t), 6.4 * cos(t)], o);\n    RJ.set([RJ[o] + 6.2 * sin(k), RJ[o + 1] + 6.2 * cos(k)], o + 2);\n    RJ.set([RJ[o + 2] + 2.2 * sin(k + 1.45), RJ[o + 3] + 2.2 * cos(k + 1.45)], o + 4);\n    RJ.set([4.3 * sin(ua), 4.3 * cos(ua)], o + 6);\n    RJ.set([RJ[o + 6] + 3.8 * sin(ua + 1.7), RJ[o + 7] + 3.8 * cos(ua + 1.7)], o + 8);\n    low = max(low, RJ[o + 3] + 0.5, RJ[o + 5]);\n  }\n  const fl = fr(c * 2), lift = fl > 0.375 && fl \u003c 0.5 ? 1.2 * sin((PI * (fl - 0.375)) / 0.125) : 0;\n  const hx = 21, hy = 26.6 - low - lift, sx = hx + 1.3, sy = hy - 7.1;\n  const limb = (s, v) => {\n    const o = s * 12;\n    cap(hx, hy, hx + RJ[o], hy + RJ[o + 1], 1.7, 1.15, v);\n    cap(hx + RJ[o], hy + RJ[o + 1], hx + RJ[o + 2], hy + RJ[o + 3], 1.15, 0.7, v);\n    cap(hx + RJ[o + 2], hy + RJ[o + 3], hx + RJ[o + 4], hy + RJ[o + 5], 0.7, 0.5, v);\n  };\n  const arm = (s, v) => {\n    const o = s * 12;\n    cap(sx, sy, sx + RJ[o + 6], sy + RJ[o + 7], 0.95, 0.75, v);\n    cap(sx + RJ[o + 6], sy + RJ[o + 7], sx + RJ[o + 8], sy + RJ[o + 9], 0.75, 0.6, v);\n    dot(sx + RJ[o + 8], sy + RJ[o + 9], 0.75, v);\n  };\n  arm(1, FAR);\n  limb(1, FAR);\n  cap(hx, hy, sx, sy, 1.9, 2.2, 1);\n  cap(sx, sy, sx + 0.8, sy - 2, 0.9, 0.9, 1);\n  dot(sx + 0.9, sy - 2.8, 1.75, 1);\n  limb(0, 1);\n  arm(0, 1);\n}\nconst FIGS = [horse, dog, bird, runner];\n\n// The grounds behind them. At Palo Alto a white wall ruled with upright lines\n// stands behind the track, and the horse's shadow lies on the track under\n// her. In Philadelphia black cloth strung with a white thread grid hangs\n// behind a pale floor.\nconst BD = new Float32Array(2 * NI);\nconst FIG = [0.04, 0.9, 0.9, 0.9];\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const i = y * IW + x;\n    let t = y \u003c 22 ? (x % 4 === 1 ? 0.6 : 0.9) : y \u003c 23 ? 0.32 : y \u003c 24 ? 0.55 : 0.8 - 0.02 * (y - 24);\n    const sx = (x + 0.5 - 21) / 10, sy = (y + 0.5 - 27.3) / 1.4;\n    if (sx * sx + sy * sy \u003c 1) t *= 0.6;\n    BD[i] = t;\n    BD[NI + i] = y > 26 ? 0.3 : x % 6 === 2 || y % 6 === 3 ? 0.34 : 0.05;\n  }\n// Old lenses: the corners of every plate fall off.\nconst VG = new Float32Array(NI);\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const u = (x + 0.5) / IW - 0.5, v = (y + 0.5) / IH - 0.5;\n    VG[y * IW + x] = (1 - 0.5 * u * u) * (1 - 0.4 * v * v);\n  }\n\n// Film stocks: a curve from each stock's black to its clear base, bent\n// through the grey in the middle of the row.\nconst STOCK = [\n  [0.05, 0.025, 0.012, 0.62, 0.38, 0.18, 1, 0.9, 0.7],\n  [0.05, 0.022, 0, 0.75, 0.42, 0.08, 1, 0.74, 0.3],\n  [0.05, 0.01, 0.02, 0.72, 0.26, 0.36, 1, 0.7, 0.76],\n  [0.01, 0.025, 0.07, 0.16, 0.36, 0.72, 0.72, 0.86, 1],\n  [0.01, 0.04, 0.02, 0.2, 0.52, 0.3, 0.62, 1, 0.68],\n];\nconst LAMP = [1, 0.94, 0.82];\n\n// Columns: -1 the gate's rails, -2 black film edge, -3 perforation, -4 the\n// corner column of a perforation, 0.. the picture.\nconst COL = new Int8Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const e = min(x, W - 1 - x);\n  COL[x] = e === 0 ? -1 : e >= IX ? x - IX : e >= 2 && e \u003c= 6 ? (e === 2 || e === 6 ? -4 : -3) : -2;\n}\n\nexport function setup(params) {\n  for (let s = 0; s \u003c NS; s++)\n    for (let p = 0; p \u003c NP; p++) {\n      MO = (s * NP + p) * NI;\n      FIGS[s](p / NP);\n    }\n  // Dust and a stray hair on sixteen frames that repeat along the reel, and\n  // grain on the film's own rows.\n  const DU = new Float32Array(16 * NI).fill(1);\n  for (let f = 0; f \u003c 16; f++) {\n    for (let j = 0; j \u003c 4; j++) {\n      const x = floor(Math.random() * IW), y = floor(Math.random() * IH);\n      DU[f * NI + y * IW + x] = 0.25;\n      if (Math.random() \u003c 0.4 && x + 1 \u003c IW) DU[f * NI + y * IW + x + 1] = 0.55;\n    }\n    if (f % 7 === 3) {\n      let x = 5 + Math.random() * 36, y = 4 + Math.random() * 20, a = Math.random() * TAU;\n      for (let j = 0; j \u003c 9; j++) {\n        DU[f * NI + floor(y) * IW + floor(x)] = 0.35;\n        a += Math.random() - 0.5;\n        x = cl(x + cos(a), 0, IW - 1);\n        y = cl(y + sin(a), 0, IH - 1);\n      }\n    }\n  }\n  const GN = new Float32Array(W * 256);\n  for (let i = 0; i \u003c GN.length; i++) GN[i] = 0.95 + 0.1 * Math.random();\n  params.s = {\n    DU, GN, n: 0, cyc: 0.5, pos: 1, shut: 1, fps: 3, sub: -1, base: 0, sp: [], tint: -1, lamp: -9,\n    lut: new Float32Array(3 * 65), LY: new Float32Array(H), SP: new Float32Array(H), LX: new Float32Array(W), burns: [], ask: false,\n  };\n  const S = params.s;\n  for (let x = 0; x \u003c W; x++) {\n    const c = COL[x];\n    S.LX[x] = c >= 0 ? 1 - 0.1 * ((c - 22.5) / 23) ** 2 : c === -1 ? 0.1 : c === -2 ? 0.35 : 0.5;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const d = y \u003c GY + FL ? GY + FL - y : y > GY + P - 1 ? y - GY - P + 1 : 0;\n    S.LY[y] = d === 0 ? 1 - 0.08 * ((y - GY - FL - IH / 2) / (IH / 2)) ** 2 : 0.5 * exp(-d * 0.9);\n  }\n}\n\nfunction tune(S, k) {\n  const tint = cl(k[0], 0, 1);\n  if (tint !== S.tint) {\n    S.tint = tint;\n    const q = tint * (STOCK.length - 1), i = min(STOCK.length - 2, floor(q)), f = q - i;\n    for (let j = 0; j \u003c= 64; j++) {\n      const t = j / 64, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const A = STOCK[i], B = STOCK[i + 1];\n        const g = (s) => a * s[ch] + b * s[ch + 3] + c * s[ch + 6];\n        S.lut[j * 3 + ch] = g(A) + (g(B) - g(A)) * f;\n      }\n    }\n  }\n  const lamp = cl(k[3], -1, 1);\n  if (lamp !== S.lamp) {\n    S.lamp = lamp;\n    const b = 0.05 + 0.36 * (lamp + 1);\n    for (let y = 0; y \u003c H; y++) S.SP[y] = b * (0.6 + 0.4 * exp(-(((y - 65) / 34) ** 2)));\n  }\n}\n\n// Where the strip stands: sI rows pulled since the start; frame k holds rows\n// GY + sI + k P onwards.\nconst rows = (S) => round(S.pos * P);\nconst frameAt = (S, y) => floor((y - GY - rows(S)) / P);\nfunction subOf(S, k) {\n  let s = S.base;\n  for (const sp of S.sp) if (k \u003c= sp.k) s = sp.s;\n  return s;\n}\n\nconst BURN = 1.9;\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  tune(S, k);\n  const sub = cl(round(k[2]), 0, NS - 1);\n  if (S.sub \u003c 0) S.base = sub;\n  else if (sub !== S.sub) S.sp.push({ k: frameAt(S, 0) - 1, s: sub });\n  S.sub = sub;\n  while (S.sp.length && frameAt(S, H - 1) \u003c= S.sp[0].k) S.base = S.sp.shift().s;\n  S.fps = 1.5 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0] && !S.burns.some((b) => b.t \u003c BURN + 0.5)) S.ask = true;\n  const tp = min(0.16, 0.32 / S.fps);\n  // The film stands still while a frame burns, and a burnt frame is\n  // forgotten once it has gone off the bottom of the panel.\n  let held = false;\n  for (const b of S.burns) if ((b.t += dt) \u003c BURN) held = true;\n  if (S.burns.length) S.burns = S.burns.filter((b) => frameAt(S, H - 1) >= b.k && b.t \u003c 60);\n  if (!held) {\n    S.cyc += dt * S.fps;\n    if (S.cyc >= 1) (S.cyc -= 1), S.n++;\n  }\n  const tau = S.cyc / S.fps;\n  if (tau \u003c tp) {\n    const u = tau / tp;\n    S.pos = S.n + (1 - cos(PI * u)) / 2;\n    S.shut = 1 - 0.45 * sin(PI * u);\n  } else {\n    S.pos = S.n + 1;\n    S.shut = 1;\n    if (S.ask) {\n      S.ask = false;\n      const h = [0, 1, 2].map(() => Math.random() * TAU), kg = frameAt(S, GY + FL);\n      S.burns = S.burns.filter((b) => b.k !== kg);\n      S.burns.push({ k: kg, t: 0, x: 14 + 18 * Math.random(), y: 9 + 10 * Math.random(), h });\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const sI = rows(S), { lut, DU, GN, LX, LY, SP, burns } = S;\n  // A burn: first a blister, then a hole opening in it with a glowing rim\n  // that cools once the film moves on.\n  for (const b of burns) {\n    b.rh = 9.5 * ease((b.t - 0.35) / 1.3);\n    b.rb = b.rh + 1.2 + 2.6 * ease(b.t / 0.5);\n    b.gl = b.t \u003c BURN ? 1 : max(0, 1 - (b.t - BURN) / 1.4);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const v = y - GY - sI, k = floor(v / P), r = v - k * P, iy = r - FL;\n    const sub = subOf(S, k), mo = (sub * NP + (((-k % NP) + NP) % NP)) * NI, bo = sub ? NI : 0, fg = FIG[sub];\n    const pr = r & 7, hole = pr >= 3 && pr \u003c= 6, hedge = pr === 3 || pr === 6;\n    const ex = 0.93 + 0.1 * hash(k, 7), du = (k & 15) * NI, gn = (v & 255) * W;\n    let splice = false;\n    if (iy \u003c 0) for (const sp of S.sp) if (sp.k === k - 1) splice = true;\n    // A scratch down the emulsion, one every few frames, fixed to the film.\n    const seg = floor(k / 5), hs = hash(seg, 11);\n    const scx = hs \u003c 0.55 ? floor(hash(seg, 12) * 40) + 3 + (((v >> 3) & 3) === 1 ? 1 : 0) : -9;\n    const sc0 = hash(seg, 13) * 5 * P, sc1 = sc0 + (0.3 + hash(seg, 14)) * 3 * P, vs = v - seg * 5 * P;\n    const scr = vs > sc0 && vs \u003c sc1 ? scx : -9;\n    const ly = LY[y] * S.shut, sp = SP[y];\n    let burn = null;\n    for (const b of burns) if (b.k === k) burn = b;\n    for (let x = 0; x \u003c W; x++) {\n      const c = COL[x];\n      const a = ly * LX[x], L = 0.95 * a + sp * (1 - 0.95 * a);\n      let R, G, Bl;\n      if (c \u003c -2 && hole) {\n        // A perforation: the lamp straight through, its corners rounded.\n        const e = c === -4 && hedge ? 0.45 : 1;\n        R = LAMP[0] * L * e;\n        G = LAMP[1] * L * e;\n        Bl = LAMP[2] * L * e;\n      } else if (c === -1) {\n        R = G = Bl = 0.12 * L;\n      } else {\n        let t = 0.03;\n        let br = 0;\n        if (c >= 0 && iy >= 0) {\n          const i = iy * IW + c;\n          t = (BD[bo + i] + (fg - BD[bo + i]) * MASK[mo + i]) * VG[i] * ex * DU[du + i];\n          if (c === scr) t = min(1, t + 0.22);\n          if (burn) {\n            const dx = c + 0.5 - burn.x, dy = iy + 0.5 - burn.y, an = atan2(dy, dx), h = burn.h;\n            const d = sqrt(dx * dx + dy * dy) / (1 + 0.18 * sin(3 * an + h[0]) + 0.1 * sin(5 * an + h[1]) + 0.06 * sin(11 * an + h[2]));\n            if (d \u003c burn.rh) br = 1;\n            else if (d \u003c burn.rh + 1.4 && burn.rh > 0) br = 2;\n            else if (d \u003c burn.rb) {\n              t *= 0.3 + 0.5 * hash(c >> 1, (iy >> 1) + k * 31);\n              br = 3;\n            }\n          }\n        } else if (splice && c >= 0) t = r === 1 ? 0.55 : 0.2;\n        if (br === 1) {\n          R = LAMP[0] * L;\n          G = LAMP[1] * L;\n          Bl = LAMP[2] * L;\n        } else {\n          const j = round(cl(t, 0, 1) * 64) * 3, g = L * GN[gn + x];\n          R = lut[j] * g;\n          G = lut[j + 1] * g;\n          Bl = lut[j + 2] * g;\n          if (br === 3) (R = R * 0.8 + 0.1 * L), (G *= 0.6), (Bl *= 0.4);\n          if (br === 2) (R += burn.gl), (G += 0.42 * burn.gl), (Bl += 0.06 * burn.gl);\n        }\n      }\n      display.setPixel(x, y, min(255, 255 * R), min(255, 255 * G), min(255, 255 * Bl));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white."},{"name":"Speed","min":0.2,"max":3,"about":"Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds."},{"name":"Subject","min":0,"max":3,"about":"Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice."},{"name":"Lamp","min":-1,"max":1,"about":"How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box."}],"start":[0,2,0,0.06],"measures":{"motion":1.0766,"detail":0.056,"edges":0.3551,"complexity":1.5938,"coverage":0.6083,"colour":0.0988,"drift":0.0453},"knobResponse":[0.0878,0.0582,0.1145,0.1659]},{"slug":"hourglass","title":"Hourglass","family":"time","round":2,"note":"LED 하나가 모래 한 알이에요. 두 LED 목으로 흘러 위 더미는 가운데부터 꺼지고 아래에는 원뿔이 쌓이며, 위가 비면 유리가 반 바퀴 돌아 뒤집혀요.","idea":"One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.","buttons":"K1 tap turns the glass over now.","code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-hourglass","type":"code","name":"hourglass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sand","min":0,"max":1,"about":"The colour of the sand."},{"name":"Flow","min":0.5,"max":4,"about":"How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range."},{"name":"Glass","min":0,"max":1,"about":"The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube."},{"name":"Layers","min":1,"max":6,"about":"Colours each grain by when in the run it passed the neck, so the heap below grows rings of time."}],"start":[0,2,0,1],"measures":{"motion":0.0687,"detail":0.0755,"edges":0.7242,"complexity":0.1856,"coverage":0.3468,"colour":0.2248,"drift":0.051},"knobResponse":[0.0656,0.0293,0.076,0.03]},{"slug":"hyperbolic-band","title":"Hyperbolic Band","family":"space","round":28,"note":"칠각형이 한 꼭짓점에 셋씩 모인 쌍곡 평면을 띠 모형으로 세웠어요. 패널 너비 64 LED 에 평면의 폭이 다 들어가고, 쪽매는 띠를 따라 끝없이 올라가며 양옆 가장자리에서 한없이 작아져요. K3 이 {8,3}, {5,4}, {4,5}, {3,7} 로 쪽매를 바꾸고, 누르면 반 바퀴 돌아 제 모습으로 내려앉아요.","idea":"The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.","buttons":"K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.","code":"// ===== Patternflow pattern =====\n// Title:   Hyperbolic Band\n// Family:  space\n// Idea:    The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the band model of the hyperbolic plane, with the Poincaré disk (Eugenio Beltrami 1868, Henri Poincaré 1882) and Coxeter's regular {p,q} tilings, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1\n//\n// Knob 1: Hue. Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges.\n// Knob 2: Speed. How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that.\n// Knob 3: Tiling. Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}.\n// Knob 4: Lines. At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth.\n// Buttons: K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, log, asinh, acosh, abs, tanh, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The band |Im w| \u003c 1 goes onto the Poincaré disk by z = tanh(pi w / 4). Here\n// Im w runs across the panel, one unit to 32 LEDs, and Re w up it, so the\n// middle line of the band is the disk's real diameter, a geodesic. Along it a\n// unit of w is pi / 2 of hyperbolic length; at a distance v off it, a LED is\n// 1 / cos(pi v / 2) times longer.\nconst ZX = new Float64Array(N), ZY = new Float64Array(N), RHO = new Float64Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const v = (x + 0.5 - W / 2) / 32;\n  RHO[x] = PI / 64 / cos((PI * v) / 2);\n  for (let y = 0; y \u003c H; y++) {\n    const u = (H / 2 - y - 0.5) / 32, a = (PI * u) / 2, b = (PI * v) / 2, d = Math.cosh(a) + cos(b);\n    ZX[y * W + x] = Math.sinh(a) / d;\n    ZY[y * W + x] = sin(b) / d;\n  }\n}\n\n// The tilings. For each, the fundamental triangle of its reflection group:\n// the corner at the origin (a tile's centre) with angle pi/p between the real\n// axis and the ray at pi/p, and the circle mirror (the tile's edge) crossing\n// the real axis square at distance a. a is the tile's inradius, R its\n// circumradius, e half an edge. T is the shortest translation along the real\n// axis that is a symmetry: twice the gap between the mirrors that cross the\n// axis square, which depends on what the axis meets on its way.\nconst TIL = [[7, 3], [8, 3], [5, 4], [4, 5], [3, 7]].map(([p, q]) => {\n  const a = acosh(cos(PI / q) / sin(PI / p)), R = acosh(1 / (Math.tan(PI / p) * Math.tan(PI / q))), e = acosh(cos(PI / p) / sin(PI / q));\n  const m = tanh(a / 2), C = (m + 1 / m) / 2, r = (1 / m - m) / 2;\n  const T = p % 2 === 0 ? 2 * a : q % 2 === 0 ? 4 * (a + R) : 2 * (a + R + e);\n  const rc = new Float64Array(p), rs = new Float64Array(p);\n  for (let k = 0; k \u003c p; k++) (rc[k] = cos((2 * PI * k) / p)), (rs[k] = sin((2 * PI * k) / p));\n  // The wedge number, p added, taken round to 0..p-1.\n  const wr = new Int8Array(3 * p).map((_, i) => i % p);\n  return { p, q, a, R, C, r, r2: r * r, Tb: (2 * T) / PI, m0: (2 * a) / PI, rc, rs, wr, sf: sin(PI / p), cf: cos(PI / p) };\n});\n\nconst MAXIT = 40;\nconst CODE = new Int8Array(MAXIT);\nlet lutHue = NaN;\nconst LUT = new Float32Array(1024 * 3);\nfunction hsv(h, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const rgb = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = { s: 0, hue: 0, til: 0, lines: 0.06, speed: 2, spin: -1, m: 0, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.til = cl(Math.round(k[2]), 0, TIL.length - 1);\n  P.lines = cl(k[3], 0, 1);\n  const G = TIL[P.til];\n  // Tiles climb: the point of the tiling under the panel's centre moves down\n  // the band. 12 LEDs a second at Speed 2.\n  const slow = P.spin >= 0 ? 1 - 0.8 * sin(PI * P.spin) : 1;\n  P.s -= d * P.speed * 0.1875 * slow;\n  P.s -= G.Tb * floor(P.s / G.Tb + 0.5);\n  if (P.spin >= 0) {\n    P.spin += d / 3;\n    if (P.spin >= 1) P.spin = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) {\n    // The nearest point where a mirror crosses the axis square: the middle of\n    // an edge, or for even p a tile's centre too.\n    const h = G.Tb / 2;\n    P.m = G.m0 + h * Math.round((P.s - G.m0) / h);\n    P.spin = 0;\n  }\n}\n\n// Complex 2x2 Möbius matrices as [ar, ai, br, bi, cr, ci, dr, di].\nfunction mul(A, B) {\n  const o = [];\n  for (let i = 0; i \u003c 2; i++)\n    for (let j = 0; j \u003c 2; j++) {\n      const p = A[i * 4], pi = A[i * 4 + 1], q = A[i * 4 + 2], qi = A[i * 4 + 3];\n      const u = B[j * 2], ui = B[j * 2 + 1], v = B[4 + j * 2], vi = B[5 + j * 2];\n      o.push(p * u - pi * ui + q * v - qi * vi, p * ui + pi * u + q * vi + qi * v);\n    }\n  return o;\n}\nconst trans = (wb) => {\n  const t = tanh((PI * wb) / 4);\n  return [1, 0, t, 0, t, 0, 1, 0];\n};\nconst rot = (th) => [cos(th / 2), sin(th / 2), 0, 0, 0, 0, cos(th / 2), -sin(th / 2)];\n\n// The colour of a point of the tiling from where it sits on the band: cyan\n// glass on the middle line going through blue and violet to magenta at the\n// edges, and swinging a little along the band with the period T. Both are\n// kept by the half turn of K1 about any point where a mirror crosses the axis\n// square, and by the slide of one period.\nfunction hueAt(G, x, y) {\n  const u = (1 / PI) * log(((1 + x) ** 2 + y * y) / ((1 - x) ** 2 + y * y)), v = (2 / PI) * atan2(2 * y, 1 - x * x - y * y);\n  const h = 0.5 + 0.06 * cos((2 * PI * (u - G.m0)) / G.Tb) + 0.3 * sqrt(abs(v));\n  return (((h - floor(h)) * 1024) | 0) * 3;\n}\n\n// atan2 to a hundred-thousandth of a radian, which is all the fold needs to\n// pick its wedge: a point that lands a hair across a straight mirror is on\n// that mirror either way.\nfunction fat(y, x) {\n  const ax = x \u003c 0 ? -x : x, ay = y \u003c 0 ? -y : y, a = (ax \u003c ay ? ax : ay) / ((ax \u003c ay ? ay : ax) + 1e-300), q = a * a;\n  let r = ((-0.0464964749 * q + 0.15931422) * q - 0.327622764) * q * a + a;\n  if (ay > ax) r = PI / 2 - r;\n  if (x \u003c 0) r = PI - r;\n  return y \u003c 0 ? -r : r;\n}\n\nconst PREV = new Int8Array(MAXIT);\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const G = TIL[P.til], { p, C, r, r2, rc, rs, sf, cf, wr, a: ina, R: circ } = G, pp = p / PI;\n  const buf = P.buf, L = P.lines;\n  // From the panel's disk to the tiling: slide s along the axis, and during\n  // the K1 half turn, turn by th about the crossing m on the way.\n  let M = trans(P.s), mir = 0;\n  if (P.spin >= 0) {\n    const u = P.spin, th = PI * u * u * (3 - 2 * u);\n    M = mul(trans(P.m), mul(rot(th), trans(P.s - P.m)));\n    mir = sin(PI * u);\n  }\n  const [ar, ai, br, bi, cr, ci, dr, di] = M;\n  if (lutHue !== P.hue) for (let i = 0; i \u003c 1024; i++) hsv(i / 1024 + (lutHue = P.hue), LUT, i * 3);\n  const glassV = 1 - 0.78 * L, haze = 0.62 * glassV + 0.12 * L;\n  const lineR = 255 * L, lineG = 245 * L, lineB = 225 * L;\n  // The leading and the mirrors are lines of fixed hyperbolic width, box\n  // filtered over the LED, so they thin out with the tiles.\n  const hw = 0.035, mw = 0.025;\n  // The haze comes in as a tile's inradius drops from about three LEDs to one.\n  for (let x = 0; x \u003c W; x++) {\n    const rho = RHO[x], fog = sm(0.3 * ina, 1.1 * ina, rho);\n    let pn = -1, po = 0;\n    for (let y = 0; y \u003c H; y++) {\n      const i = y * W + x, zx = ZX[i], zy = ZY[i];\n      const nx = ar * zx - ai * zy + br, ny = ar * zy + ai * zx + bi;\n      const dx = cr * zx - ci * zy + dr, dy = cr * zy + ci * zx + di;\n      const qd = 1 / (dx * dx + dy * dy);\n      let X = (nx * dx + ny * dy) * qd, Y = (ny * dx - nx * dy) * qd;\n      let R = 0, Gc = 0, B = 0;\n      // Where the tiles are smaller than a LED, the glass's average colour.\n      if (fog > 0) {\n        const o = hueAt(G, X, Y);\n        R = LUT[o] * 255 * haze;\n        Gc = LUT[o + 1] * 255 * haze;\n        B = LUT[o + 2] * 255 * haze;\n      }\n      if (fog \u003c 1) {\n        // Fold into the fundamental triangle: turn into the wedge of angle\n        // pi/p, then reflect in the edge circle, until the edge is not crossed.\n        // Each turn and whether it flipped is kept, to find the tile's centre.\n        let n = 0, par = 0, ok = 1;\n        for (;;) {\n          const m = floor(fat(Y, X) * pp), f = m & 1, jj = wr[((m + 1) >> 1) + p];\n          const c = rc[jj], s = rs[jj], X1 = X * c + Y * s;\n          Y = Y * c - X * s;\n          X = X1;\n          if (f) Y = -Y;\n          par ^= f;\n          const ex = X - C, e2 = ex * ex + Y * Y;\n          if (e2 >= r2) break;\n          if (n >= MAXIT) {\n            ok = 0;\n            break;\n          }\n          CODE[n++] = jj * 2 + f;\n          const g = r2 / e2;\n          X = C + ex * g;\n          Y *= g;\n          par ^= 1;\n        }\n        if (!ok) {\n          const o = hueAt(G, X, Y);\n          (R = LUT[o] * 255 * haze), (Gc = LUT[o + 1] * 255 * haze), (B = LUT[o + 2] * 255 * haze);\n        } else {\n          // The same steps as the LED above: the same tile.\n          let same = n === pn;\n          for (let k = 0; same && k \u003c n; k++) same = CODE[k] === PREV[k];\n          if (!same) {\n            // The tile's centre is the origin taken back through the steps.\n            let cx = 0, cy = 0;\n            if (n > 0) {\n              cx = 1 / C;\n              for (let k = n - 1; k >= 0; k--) {\n                const jj = CODE[k] >> 1;\n                if (CODE[k] & 1) cy = -cy;\n                const c = rc[jj], s = rs[jj], x1 = cx * c - cy * s;\n                cy = cx * s + cy * c;\n                cx = x1;\n                if (k > 0) {\n                  const ex = cx - C, e2 = ex * ex + cy * cy, g = r2 / e2;\n                  cx = C + ex * g;\n                  cy *= g;\n                }\n              }\n            }\n            po = hueAt(G, cx, cy);\n            pn = n;\n            for (let k = 0; k \u003c n; k++) PREV[k] = CODE[k];\n          }\n          // Distances in the triangle: to the tile's edge, its centre, and the\n          // two straight mirrors that cut the tile into 2p facets.\n          const z2 = X * X + Y * Y, den = 1 - z2, zr = sqrt(z2);\n          const de = asinh((1 + z2 - 2 * C * X) / (r * den)), dc = log((1 + zr) / (1 - zr));\n          const dm = min(2 * Y, 2 * (X * sf - Y * cf)) / den;\n          const facet = 1 + (par ? -0.09 : 0.09) * min(1, dm / rho);\n          const gl = (1 - 0.42 * (dc / circ) ** 2) * facet * glassV * 255;\n          let r0 = LUT[po] * gl, g0 = LUT[po + 1] * gl, b0 = LUT[po + 2] * gl;\n          const cov = cl((min(de + rho / 2, hw) - max(de - rho / 2, -hw)) / rho, 0, 1);\n          r0 += (lineR - r0) * cov;\n          g0 += (lineG - g0) * cov;\n          b0 += (lineB - b0) * cov;\n          if (mir > 0) {\n            const mc = cl((min(dm + rho / 2, mw) - max(dm - rho / 2, -mw)) / rho, 0, 1) * mir * 0.85;\n            r0 += (250 - r0) * mc;\n            g0 += (235 - g0) * mc;\n            b0 += (200 - b0) * mc;\n          }\n          R = R * fog + r0 * (1 - fog);\n          Gc = Gc * fog + g0 * (1 - fog);\n          B = B * fog + b0 * (1 - fog);\n        }\n      }\n      const q = i * 3;\n      buf[q] = R;\n      buf[q + 1] = Gc;\n      buf[q + 2] = B;\n    }\n  }\n  for (let q = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, buf[q], buf[q + 1], buf[q + 2]);\n}\n","layer":{"id":"layer-hyperbolic-band","type":"code","name":"hyperbolic-band","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hyperbolic Band\n// Family:  space\n// Idea:    The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the band model of the hyperbolic plane, with the Poincaré disk (Eugenio Beltrami 1868, Henri Poincaré 1882) and Coxeter's regular {p,q} tilings, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1\n//\n// Knob 1: Hue. Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges.\n// Knob 2: Speed. How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that.\n// Knob 3: Tiling. Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}.\n// Knob 4: Lines. At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth.\n// Buttons: K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, log, asinh, acosh, abs, tanh, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The band |Im w| \u003c 1 goes onto the Poincaré disk by z = tanh(pi w / 4). Here\n// Im w runs across the panel, one unit to 32 LEDs, and Re w up it, so the\n// middle line of the band is the disk's real diameter, a geodesic. Along it a\n// unit of w is pi / 2 of hyperbolic length; at a distance v off it, a LED is\n// 1 / cos(pi v / 2) times longer.\nconst ZX = new Float64Array(N), ZY = new Float64Array(N), RHO = new Float64Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const v = (x + 0.5 - W / 2) / 32;\n  RHO[x] = PI / 64 / cos((PI * v) / 2);\n  for (let y = 0; y \u003c H; y++) {\n    const u = (H / 2 - y - 0.5) / 32, a = (PI * u) / 2, b = (PI * v) / 2, d = Math.cosh(a) + cos(b);\n    ZX[y * W + x] = Math.sinh(a) / d;\n    ZY[y * W + x] = sin(b) / d;\n  }\n}\n\n// The tilings. For each, the fundamental triangle of its reflection group:\n// the corner at the origin (a tile's centre) with angle pi/p between the real\n// axis and the ray at pi/p, and the circle mirror (the tile's edge) crossing\n// the real axis square at distance a. a is the tile's inradius, R its\n// circumradius, e half an edge. T is the shortest translation along the real\n// axis that is a symmetry: twice the gap between the mirrors that cross the\n// axis square, which depends on what the axis meets on its way.\nconst TIL = [[7, 3], [8, 3], [5, 4], [4, 5], [3, 7]].map(([p, q]) => {\n  const a = acosh(cos(PI / q) / sin(PI / p)), R = acosh(1 / (Math.tan(PI / p) * Math.tan(PI / q))), e = acosh(cos(PI / p) / sin(PI / q));\n  const m = tanh(a / 2), C = (m + 1 / m) / 2, r = (1 / m - m) / 2;\n  const T = p % 2 === 0 ? 2 * a : q % 2 === 0 ? 4 * (a + R) : 2 * (a + R + e);\n  const rc = new Float64Array(p), rs = new Float64Array(p);\n  for (let k = 0; k \u003c p; k++) (rc[k] = cos((2 * PI * k) / p)), (rs[k] = sin((2 * PI * k) / p));\n  // The wedge number, p added, taken round to 0..p-1.\n  const wr = new Int8Array(3 * p).map((_, i) => i % p);\n  return { p, q, a, R, C, r, r2: r * r, Tb: (2 * T) / PI, m0: (2 * a) / PI, rc, rs, wr, sf: sin(PI / p), cf: cos(PI / p) };\n});\n\nconst MAXIT = 40;\nconst CODE = new Int8Array(MAXIT);\nlet lutHue = NaN;\nconst LUT = new Float32Array(1024 * 3);\nfunction hsv(h, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const rgb = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = { s: 0, hue: 0, til: 0, lines: 0.06, speed: 2, spin: -1, m: 0, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.til = cl(Math.round(k[2]), 0, TIL.length - 1);\n  P.lines = cl(k[3], 0, 1);\n  const G = TIL[P.til];\n  // Tiles climb: the point of the tiling under the panel's centre moves down\n  // the band. 12 LEDs a second at Speed 2.\n  const slow = P.spin >= 0 ? 1 - 0.8 * sin(PI * P.spin) : 1;\n  P.s -= d * P.speed * 0.1875 * slow;\n  P.s -= G.Tb * floor(P.s / G.Tb + 0.5);\n  if (P.spin >= 0) {\n    P.spin += d / 3;\n    if (P.spin >= 1) P.spin = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) {\n    // The nearest point where a mirror crosses the axis square: the middle of\n    // an edge, or for even p a tile's centre too.\n    const h = G.Tb / 2;\n    P.m = G.m0 + h * Math.round((P.s - G.m0) / h);\n    P.spin = 0;\n  }\n}\n\n// Complex 2x2 Möbius matrices as [ar, ai, br, bi, cr, ci, dr, di].\nfunction mul(A, B) {\n  const o = [];\n  for (let i = 0; i \u003c 2; i++)\n    for (let j = 0; j \u003c 2; j++) {\n      const p = A[i * 4], pi = A[i * 4 + 1], q = A[i * 4 + 2], qi = A[i * 4 + 3];\n      const u = B[j * 2], ui = B[j * 2 + 1], v = B[4 + j * 2], vi = B[5 + j * 2];\n      o.push(p * u - pi * ui + q * v - qi * vi, p * ui + pi * u + q * vi + qi * v);\n    }\n  return o;\n}\nconst trans = (wb) => {\n  const t = tanh((PI * wb) / 4);\n  return [1, 0, t, 0, t, 0, 1, 0];\n};\nconst rot = (th) => [cos(th / 2), sin(th / 2), 0, 0, 0, 0, cos(th / 2), -sin(th / 2)];\n\n// The colour of a point of the tiling from where it sits on the band: cyan\n// glass on the middle line going through blue and violet to magenta at the\n// edges, and swinging a little along the band with the period T. Both are\n// kept by the half turn of K1 about any point where a mirror crosses the axis\n// square, and by the slide of one period.\nfunction hueAt(G, x, y) {\n  const u = (1 / PI) * log(((1 + x) ** 2 + y * y) / ((1 - x) ** 2 + y * y)), v = (2 / PI) * atan2(2 * y, 1 - x * x - y * y);\n  const h = 0.5 + 0.06 * cos((2 * PI * (u - G.m0)) / G.Tb) + 0.3 * sqrt(abs(v));\n  return (((h - floor(h)) * 1024) | 0) * 3;\n}\n\n// atan2 to a hundred-thousandth of a radian, which is all the fold needs to\n// pick its wedge: a point that lands a hair across a straight mirror is on\n// that mirror either way.\nfunction fat(y, x) {\n  const ax = x \u003c 0 ? -x : x, ay = y \u003c 0 ? -y : y, a = (ax \u003c ay ? ax : ay) / ((ax \u003c ay ? ay : ax) + 1e-300), q = a * a;\n  let r = ((-0.0464964749 * q + 0.15931422) * q - 0.327622764) * q * a + a;\n  if (ay > ax) r = PI / 2 - r;\n  if (x \u003c 0) r = PI - r;\n  return y \u003c 0 ? -r : r;\n}\n\nconst PREV = new Int8Array(MAXIT);\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const G = TIL[P.til], { p, C, r, r2, rc, rs, sf, cf, wr, a: ina, R: circ } = G, pp = p / PI;\n  const buf = P.buf, L = P.lines;\n  // From the panel's disk to the tiling: slide s along the axis, and during\n  // the K1 half turn, turn by th about the crossing m on the way.\n  let M = trans(P.s), mir = 0;\n  if (P.spin >= 0) {\n    const u = P.spin, th = PI * u * u * (3 - 2 * u);\n    M = mul(trans(P.m), mul(rot(th), trans(P.s - P.m)));\n    mir = sin(PI * u);\n  }\n  const [ar, ai, br, bi, cr, ci, dr, di] = M;\n  if (lutHue !== P.hue) for (let i = 0; i \u003c 1024; i++) hsv(i / 1024 + (lutHue = P.hue), LUT, i * 3);\n  const glassV = 1 - 0.78 * L, haze = 0.62 * glassV + 0.12 * L;\n  const lineR = 255 * L, lineG = 245 * L, lineB = 225 * L;\n  // The leading and the mirrors are lines of fixed hyperbolic width, box\n  // filtered over the LED, so they thin out with the tiles.\n  const hw = 0.035, mw = 0.025;\n  // The haze comes in as a tile's inradius drops from about three LEDs to one.\n  for (let x = 0; x \u003c W; x++) {\n    const rho = RHO[x], fog = sm(0.3 * ina, 1.1 * ina, rho);\n    let pn = -1, po = 0;\n    for (let y = 0; y \u003c H; y++) {\n      const i = y * W + x, zx = ZX[i], zy = ZY[i];\n      const nx = ar * zx - ai * zy + br, ny = ar * zy + ai * zx + bi;\n      const dx = cr * zx - ci * zy + dr, dy = cr * zy + ci * zx + di;\n      const qd = 1 / (dx * dx + dy * dy);\n      let X = (nx * dx + ny * dy) * qd, Y = (ny * dx - nx * dy) * qd;\n      let R = 0, Gc = 0, B = 0;\n      // Where the tiles are smaller than a LED, the glass's average colour.\n      if (fog > 0) {\n        const o = hueAt(G, X, Y);\n        R = LUT[o] * 255 * haze;\n        Gc = LUT[o + 1] * 255 * haze;\n        B = LUT[o + 2] * 255 * haze;\n      }\n      if (fog \u003c 1) {\n        // Fold into the fundamental triangle: turn into the wedge of angle\n        // pi/p, then reflect in the edge circle, until the edge is not crossed.\n        // Each turn and whether it flipped is kept, to find the tile's centre.\n        let n = 0, par = 0, ok = 1;\n        for (;;) {\n          const m = floor(fat(Y, X) * pp), f = m & 1, jj = wr[((m + 1) >> 1) + p];\n          const c = rc[jj], s = rs[jj], X1 = X * c + Y * s;\n          Y = Y * c - X * s;\n          X = X1;\n          if (f) Y = -Y;\n          par ^= f;\n          const ex = X - C, e2 = ex * ex + Y * Y;\n          if (e2 >= r2) break;\n          if (n >= MAXIT) {\n            ok = 0;\n            break;\n          }\n          CODE[n++] = jj * 2 + f;\n          const g = r2 / e2;\n          X = C + ex * g;\n          Y *= g;\n          par ^= 1;\n        }\n        if (!ok) {\n          const o = hueAt(G, X, Y);\n          (R = LUT[o] * 255 * haze), (Gc = LUT[o + 1] * 255 * haze), (B = LUT[o + 2] * 255 * haze);\n        } else {\n          // The same steps as the LED above: the same tile.\n          let same = n === pn;\n          for (let k = 0; same && k \u003c n; k++) same = CODE[k] === PREV[k];\n          if (!same) {\n            // The tile's centre is the origin taken back through the steps.\n            let cx = 0, cy = 0;\n            if (n > 0) {\n              cx = 1 / C;\n              for (let k = n - 1; k >= 0; k--) {\n                const jj = CODE[k] >> 1;\n                if (CODE[k] & 1) cy = -cy;\n                const c = rc[jj], s = rs[jj], x1 = cx * c - cy * s;\n                cy = cx * s + cy * c;\n                cx = x1;\n                if (k > 0) {\n                  const ex = cx - C, e2 = ex * ex + cy * cy, g = r2 / e2;\n                  cx = C + ex * g;\n                  cy *= g;\n                }\n              }\n            }\n            po = hueAt(G, cx, cy);\n            pn = n;\n            for (let k = 0; k \u003c n; k++) PREV[k] = CODE[k];\n          }\n          // Distances in the triangle: to the tile's edge, its centre, and the\n          // two straight mirrors that cut the tile into 2p facets.\n          const z2 = X * X + Y * Y, den = 1 - z2, zr = sqrt(z2);\n          const de = asinh((1 + z2 - 2 * C * X) / (r * den)), dc = log((1 + zr) / (1 - zr));\n          const dm = min(2 * Y, 2 * (X * sf - Y * cf)) / den;\n          const facet = 1 + (par ? -0.09 : 0.09) * min(1, dm / rho);\n          const gl = (1 - 0.42 * (dc / circ) ** 2) * facet * glassV * 255;\n          let r0 = LUT[po] * gl, g0 = LUT[po + 1] * gl, b0 = LUT[po + 2] * gl;\n          const cov = cl((min(de + rho / 2, hw) - max(de - rho / 2, -hw)) / rho, 0, 1);\n          r0 += (lineR - r0) * cov;\n          g0 += (lineG - g0) * cov;\n          b0 += (lineB - b0) * cov;\n          if (mir > 0) {\n            const mc = cl((min(dm + rho / 2, mw) - max(dm - rho / 2, -mw)) / rho, 0, 1) * mir * 0.85;\n            r0 += (250 - r0) * mc;\n            g0 += (235 - g0) * mc;\n            b0 += (200 - b0) * mc;\n          }\n          R = R * fog + r0 * (1 - fog);\n          Gc = Gc * fog + g0 * (1 - fog);\n          B = B * fog + b0 * (1 - fog);\n        }\n      }\n      const q = i * 3;\n      buf[q] = R;\n      buf[q + 1] = Gc;\n      buf[q + 2] = B;\n    }\n  }\n  for (let q = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, buf[q], buf[q + 1], buf[q + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that."},{"name":"Tiling","min":0,"max":4,"about":"Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}."},{"name":"Lines","min":0,"max":1,"about":"At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth."}],"start":[0,2,0,0.06],"measures":{"motion":1.4373,"detail":0.1076,"edges":0.286,"complexity":2.1332,"coverage":0.9802,"colour":0.6419,"drift":0.0932},"knobResponse":[0.5855,0.187,0.2223,0.3482]},{"slug":"iceberg","title":"Iceberg","family":"polar","round":26,"note":"물높이에서 자른 빙산이 9분의 1만 물 위에 내밀고 펭귄을 얹은 채 너울에 흔들리다, 판이 떨어져 물보라를 일으켜요. 물 아래 몸은 푸른 얼음 줄무늬와 탄산처럼 오르는 거품 줄기로 패널 바닥까지 내려가요. K1 은 백야의 해에서 오로라 뜬 극야로, 버튼은 판을 떼어 내요.","idea":"An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.","buttons":"K1 tap breaks a slab off the berg now.","code":"// ===== Patternflow pattern =====\n// Title:   Iceberg\n// Family:  polar\n// Idea:    An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the schoolbook drawing of an iceberg with eight ninths of it under the water\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1\n//\n// Knob 1: Light. Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora.\n// Knob 2: Speed. At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower.\n// Knob 3: Shape. A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom.\n// Knob 4: Swell. How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea.\n// Buttons: K1 tap breaks a slab off the berg now.\n\nconst W = 64, H = 128, N = W * H;\n// Sea level, horizon, the berg's middle; its grid (u across, v down from sea level) turns about row PV.\nconst WL = 30, HZ = 26, BX = 28, BW = 64, BH = 128, U0 = -32, V0 = -28, PV = 34, NB = BW * BH;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Caustic noise; the colour the water leaves at each row.\nconst CT = new Float32Array(4096).map((_, k) => vn(((k & 63) * 20) / 64, ((k >> 6) * 20) / 64, 20));\nconst AT = new Float32Array(H * 3).map((_, q) => exp(-max(0, floor(q / 3) + 0.5 - WL) / [26, 75, 170][q % 3]));\n\n// The top: a snow plain with sheer cliffs, or two spires.\nconst PIN = [[-13.5, 1], [-12, -3], [-10, -6], [-7.5, -10], [-5.5, -16], [-3.5, -19.5], [-1.5, -17.5], [0.5, -11], [2.5, -7.5], [4.5, -8.5], [6.5, -13], [8, -16], [9.5, -15], [11.5, -8], [13, -2.5], [14, 1]];\nfunction topAt(u, s) {\n  let i = 1;\n  while (i \u003c PIN.length - 1 && u > PIN[i][0]) i++;\n  const [a, b] = PIN[i - 1], [c, e] = PIN[i], A = u > 0 ? u : -u * 1.05;\n  const tab = A \u003c 15 ? -11 + 0.8 * (vn(u * 0.3, 3) - 0.5) + 1.3 * sm(12.5, 15, A) : mix(-9.7, 1, cl((A - 15) / 1.1, 0, 1));\n  return mix(tab, b + (e - b) * cl((u - a) / (c - a), 0, 1), s);\n}\n// Half widths under the water, tabular and pinnacle, a little lopsided.\nconst CV = [0, 5, 12, 22, 34, 46, 58, 68, 76, 82, 86];\nconst WT = [16.6, 20.5, 22, 22.5, 21.5, 21, 19.5, 16.5, 12.5, 8, 0];\nconst WP = [13.6, 15.5, 16.5, 16.5, 15.5, 14, 12, 9.5, 7, 4, 0];\nconst J = (h) => CV.map((_, i) => (i ? 0.88 + 0.24 * hash(i, h) : 1.03)), JL = J(5), JR = J(9);\nfunction edgeAt(v, s) {\n  const q = v / (1 + 0.1 * s);\n  if (v \u003c 0 || q >= 86) return [0, 0];\n  let i = 0;\n  while (CV[i + 1] \u003c= q) i++;\n  const f = (q - CV[i]) / (CV[i + 1] - CV[i]), w = mix(mix(WT[i], WP[i], s), mix(WT[i + 1], WP[i + 1], s), f), c = 2 * sin(v * 0.05);\n  return [c - w * mix(JL[i], JL[i + 1], f), c + w * mix(JR[i], JR[i + 1], f)];\n}\n\n// Midnight sun, noon, twilight: sky stops, lit and shaded face, snow, water top\n// and bottom, cloud lit and dark, shafts, light's side, ice, caustics.\nconst KF = [\n  [[[0, 28, 50, 116], [10, 100, 104, 166], [19, 232, 158, 132], [26, 250, 200, 128]], [246, 206, 158], [70, 118, 196], [242, 226, 206], [14, 86, 114], [3, 12, 40], [250, 196, 168], [118, 104, 150], [1, 1, 1, 1]],\n  [[[0, 118, 130, 148], [10, 156, 164, 178], [19, 186, 192, 200], [26, 200, 205, 210]], [214, 220, 226], [148, 166, 192], [226, 230, 236], [28, 108, 132], [5, 20, 48], [212, 216, 222], [128, 134, 150], [0.35, 0, 1.05, 0.5]],\n  [[[0, 6, 12, 42], [10, 16, 30, 80], [19, 38, 62, 120], [26, 62, 94, 148]], [160, 188, 232], [58, 84, 148], [176, 198, 236], [8, 44, 80], [2, 6, 24], [70, 86, 130], [26, 34, 66], [0.45, -1, 0.62, 0.5]],\n].map((k) => Float64Array.from(k.flat(2)));\n// Glacier ice; the pinnacle is older ice, bluer all through.\nconst BASE = [92, 192, 226], PALE = [190, 234, 246], CLEAR = [30, 120, 214], VEIN = [12, 50, 172], RIM = [40, 64, 60], TINT = [0.7, 0.9, 1.06];\nconst BLK = [12, 14, 22], WHT = [226, 228, 236], SUN = [255, 214, 150], MOON = [224, 228, 214], AUR = [30, 190, 110], LT = [0.55, 0.92, 1];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), pen = () => Object.fromEntries(\"on h u f st tu x y vx vy tt nb lx ly lt\".split(\" \").map((k) => [k, 0.5]));\n  params.s = {\n    f: F32(N * 3), ba: F32(N), sf: F32(W), rt: F32(176), row: F32(H * 3), P: new Float64Array(41), ex: F32(BH * 2), TT: F32(BW * 4 + 1),\n    M: F32(NB), IC: [F32(NB), F32(NB), F32(NB)], SN: F32(NB), NX: F32(NB), AL: F32(NB), D: F32(NB),\n    s: -1, t: 0.01, th: 0.01, thv: 0.01, thq: 0.01, by: 0.01, byv: 0.01, A: 0.5, k1: -1, k4: 0.06, live: 0, kx: 49.5, ky: 112.5,\n    next: 3.4, nd: 0.5, pend: null, crack: 0.5, cuts: [], pieces: [], bubs: [], spray: [], rings: [], vacc: [0.5, 0.5, 0.5, 0.5, 0.5], dv: null,\n    cl: [0, 1, 2, 3].map((k) => ({ x: 6 + k * 17 + 6 * rnd(), y: 5 + ((k * 5) % 13) + 2 * rnd(), w: 7 + 5 * rnd(), h: 1.7 + rnd() })),\n    kr: Array.from({ length: 46 }, () => ({ p: rnd() * 6.3, q: rnd() * 6.3, w: 0.4 + 0.5 * rnd(), r: 1 + 6 * rnd() })),\n    pens: [0, 1, 2, 3, 4].map((i) => Object.assign(pen(), { f: i % 2 ? 1 : -1, st: 0 })),\n  };\n}\n\nconst toW = (S, u, v) => [BX + cos(S.th) * u - sin(S.th) * (v - PV), WL + PV + S.by + sin(S.th) * u + cos(S.th) * (v - PV)];\n// What the cuts leave at u, v. Cuts heal outward as the berg turns.\nfunction cutA(cuts, u, v) {\n  let a = 1;\n  for (const c of cuts) if (v \u003c 0.6 && (u - c.cx) ** 2 + (v - c.cy) ** 2 \u003c 225) a *= cl(0.5 - (c.nx * u + c.ny * v - c.d), 0, 1);\n  return a;\n}\nconst topB = (S, u) => S.TT[cl(round((u - U0) * 4), 0, BW * 4)];\nfunction edgeU(S, side) {\n  for (let a = 0; a \u003c 26; a += 0.5) if (topB(S, side * a) > -1.5 || cutA(S.cuts, side * a, topB(S, side * a) + 0.7) \u003c 0.5) return side * (a - 1);\n  return side * 12;\n}\nconst surf = (S, x) => S.sf[cl(round(x), 0, W - 1)];\n\nfunction build(S, s) {\n  S.s = s;\n  const { M, SN, NX, AL, D, TT, ex } = S, E = [], face = [];\n  for (let q = 0; q \u003c= BW * 4; q++) TT[q] = topAt(U0 + q / 4, s);\n  for (let q = 0; q \u003c BH * 4; q++) E.push(edgeAt(V0 + (q + 0.5) / 4, s));\n  for (let k = 0; k \u003c NB; k++) {\n    let n = 0;\n    for (let j = 0; j \u003c 16; j++) {\n      const qu = (k & 63) * 4 + (j & 3), qv = (k >> 6) * 4 + (j >> 2), u = U0 + (qu + 0.5) / 4, v = V0 + (qv + 0.5) / 4;\n      if (v \u003c 0 ? v >= TT[qu] : u > E[qv][0] && u \u003c E[qv][1]) n++;\n    }\n    M[k] = n / 16;\n  }\n  // Distance to open water: a glowing rim, a darker core.\n  for (let k = 0; k \u003c NB; k++) D[k] = M[k] \u003c 0.5 ? 0 : 20;\n  for (let k = BW + 1; k \u003c NB - 1; k++) D[k] = min(D[k], D[k - 1] + 1, D[k - BW] + 1, D[k - BW - 1] + 1.4, D[k - BW + 1] + 1.4);\n  for (let k = NB - BW - 2; k > 0; k--) D[k] = min(D[k], D[k + 1] + 1, D[k + BW] + 1, D[k + BW + 1] + 1.4, D[k + BW - 1] + 1.4);\n  for (let j = 0; j \u003c BH * 2; j++) ex[j] = j & 1 ? -99 : 99;\n  for (let k = 0; k \u003c NB; k++) {\n    const gu = k & 63, gv = k >> 6, u = U0 + gu + 0.5, v = V0 + gv + 0.5;\n    if (M[k] \u003c= 0) continue;\n    // Facets: lit or shaded in the air; below, melt scallops lit on their lower walls.\n    let bd = 1e9, id = 0, sv = 0;\n    for (let j = 0; j \u003c 9; j++) {\n      const cu = floor(u / 5) + (j % 3) - 1, cv = floor(v / 5) + floor(j / 3) - 1, w = (cv + hash(cv, cu + 50)) * 5, dd = (u - (cu + hash(cu, cv)) * 5) ** 2 + (v - w) ** 2;\n      if (dd \u003c bd) (bd = dd), (id = hash(cu + 99, cv)), (sv = w);\n    }\n    const qu = gu * 4 + 2, sl = TT[min(BW * 4, qu + 2)] - TT[max(0, qu - 2)], dep = v - TT[qu];\n    NX[k] = mix(sl / sqrt(1 + sl * sl), cl(u / 24 + 1.3 * (id - 0.5), -1, 1), sm(1, 3, dep));\n    SN[k] = sm(2.4, 1.3, dep) * sm(1.6, 0.8, abs(sl));\n    AL[k] = (0.86 + 0.14 * hash(gu, 7)) * (0.88 + 0.24 * id) * (v > -1.5 && v \u003c 0 ? 0.7 : 1);\n    // Layers of white and clear blue ice, dark veins of refrozen meltwater.\n    const f = (v + u * 0.14 + 7 * vn(u * 0.04, v * 0.025 + 9)) / 8, n = floor(f), band = f - n, h1 = hash(n, 5);\n    const mot = (0.84 + 0.3 * vn(u * 0.1 + 3, v * 0.07)) * (1 + 0.2 * cl((v - sv) / 3, -1, 1));\n    const pale = sm(0.5, 0.6, band) * (1 - sm(0.6 + 0.3 * h1, 0.7 + 0.3 * h1, band)) * sm(0.25, 0.5, hash(n, 6)), clear = (1 - sm(0.2, 0.45, band)) * sm(0.4, 0.8, h1);\n    const vein = max(sm(0.11, 0.03, abs(vn(u * 0.08 + 11, v * 0.045) * 2 - 1)), 0.8 * sm(0.1, 0.025, abs(vn(u * 0.045 + 31, v * 0.11 + 5) * 2 - 1))) * sm(0.25, 0.5, vn(u * 0.035 + 20, v * 0.03));\n    const dk = D[k], core = (0.5 + 0.5 * exp(-max(0, dk - 1) / 5)) * (gv > 1 && M[k - 2 * BW] \u003c 0.5 ? 1.3 : 1) * (gv \u003c BH - 2 && M[k + 2 * BW] \u003c 0.5 ? 0.76 : 1);\n    for (let c = 0; c \u003c 3; c++) S.IC[c][k] = mix(mix(mix(BASE[c] * mot, PALE[c], 0.8 * pale), CLEAR[c], 0.6 * clear), VEIN[c], 0.9 * vein) * core * mix(1, TINT[c], s) + exp(-dk / 1.2) * RIM[c];\n    if (v > 3 && v \u003c 80 && dk > 1.5) face.push([u, v]);\n    (ex[gv * 2] = min(ex[gv * 2], u)), (ex[gv * 2 + 1] = max(ex[gv * 2 + 1], u));\n  }\n  S.vents = [0, 1, 2, 3, 4].map((i) => face[floor(hash(i, 41) * face.length)]);\n  // Penguin places: flat, three columns apart, clear of the slabs.\n  const slots = [];\n  for (const u of [0.5, -6, 6.5, -3, 3.5, -8, 8, -1.5, 2, -4.5, 5]) {\n    const q = round((u - U0) * 4);\n    if (abs(TT[q + 6] - TT[q - 6]) \u003c 1.6 && TT[q] \u003c -2.5 && TT[q] > -15 && slots.length \u003c 5 && slots.every((w) => abs(w - u) > 2.9)) slots.push(u + 0.01);\n  }\n  S.pens.forEach((p, i) => ((p.on = i \u003c slots.length ? 1 : 0), p.on && (p.h = slots[i]), p.st || (p.u = p.h)));\n}\n\nconst bub = (S, x, y, vy = -(4.5 + 5 * rnd()), wb = 0.6) => S.bubs.length \u003c 260 && S.bubs.push({ x, y, vy, wb, ph: rnd() * 6.3, dead: 0 });\nfunction splash(S, x, v, g) {\n  const y = surf(S, x) - 0.5;\n  for (let k = 0; k \u003c 7 + 29 * g; k++) S.spray.push({ x: x + (rnd() - 0.5) * (2 + 3 * g), y, vx: (rnd() - 0.5) * (10 + 14 * g), vy: -(6 + rnd() * (9 + 17 * g)), l: 0.99 });\n  S.rings.push({ x, t: 0.01, a: g ? min(3.2, 0.1 * v + 1.4) : 0.6 });\n  for (let k = 0; k \u003c 8 + 22 * g; k++) bub(S, x + (rnd() - 0.5) * 6, y + 1 + rnd() * (5 + 9 * g));\n}\n\n// A crack opens behind a slab of outer ice; it goes half a second later.\nfunction calve(S) {\n  if (S.pend || S.pieces.some((p) => p.f)) return;\n  let side = rnd() \u003c 0.5 ? -1 : 1;\n  if (S.cuts.some((c) => c.side === side && c.age \u003c 40)) side = -side;\n  let ue = edgeU(S, side);\n  if (abs(ue) \u003c 12) (side = -side), (ue = edgeU(S, side));\n  if (abs(ue) \u003c 12) return;\n  const px = side * max(9, abs(ue) - 3.5 - 3 * rnd()), nx = side * 0.993, d = nx * px + 0.6;\n  const c = { nx, ny: -0.12, d, d0: d, cx: px, cy: -5, side, age: 0.01, bu: 0.5, bv: 0.5, ex: 0.5, hx: 0.5, hy: 0.5 };\n  let u0 = 99, u1 = -99, v0 = 99, v1 = -99;\n  for (let k = 0; k \u003c NB; k++) {\n    const u = U0 + (k & 63) + 0.5, v = V0 + (k >> 6) + 0.5;\n    if (S.M[k] > 0.5 && cutA([c], u, v) \u003c 0.5 && cutA(S.cuts, u, v) > 0.5) (u0 = min(u0, u)), (u1 = max(u1, u)), (v0 = min(v0, v)), (v1 = max(v1, v));\n  }\n  if (u1 - u0 \u003c 1.5) return;\n  Object.assign(c, { bu: (u0 + u1) / 2, bv: (v0 + v1) / 2, hx: (u1 - u0) / 2 + 0.5, hy: (v1 - v0) / 2 + 0.5 });\n  c.ex = hypot(c.hx, c.hy) + 1.5;\n  (S.pend = c), (S.crack = 0.5);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d), A = S.A, sf = S.sf;\n  // The swell, and rings running out from each splash.\n  const swell = (x) => A * (0.7 * sin(x * 0.15 - t * 1.4) + 0.3 * sin(x * 0.34 + t * 0.95 + 1));\n  for (let x = 0; x \u003c W; x++) {\n    sf[x] = WL + swell(x + 0.5);\n    for (const r of S.rings) {\n      const q = abs(x + 0.5 - r.x) - 11 * r.t;\n      sf[x] += r.a * exp(-r.t * 0.5 - (q / 5) ** 2) * sin(q * 0.9);\n    }\n  }\n  for (const r of S.rings) r.t += d;\n  S.rings = S.rings.filter((r) => r.t \u003c 7);\n  S.thv += (-2.4 * (S.th - S.thq - 0.022 * A * cos(BX * 0.15 - t * 1.4)) - 0.45 * S.thv) * d;\n  S.byv += (-3 * (S.by - 0.5 * swell(BX)) - 1.2 * S.byv) * d;\n  (S.th += S.thv * d), (S.by += S.byv * d), (S.thq *= exp(-d / 60));\n  for (const c of S.cl) (c.x += (0.7 + 3 * S.k4) * d) > W + c.w + 2 && (c.x = -c.w - 2);\n\n  if (S.live && (S.next -= d) \u003c= 0) calve(S), (S.next = 15 + 10 * rnd());\n  if (S.pend && (S.crack -= d) \u003c= 0) {\n    // The berg loses weight on that side, rocks and settles leaning a little.\n    const c = S.pend, [x, y] = toW(S, c.bu, c.bv);\n    S.cuts.push(c);\n    S.pieces.push({ c, x, y, vx: c.side * 2.5, vy: 0.5, a: S.th, va: c.side * (1.4 + rnd()), f: 1, ta: 0.5 });\n    (S.pend = null), (S.thv -= c.side * 0.1), (S.thq -= c.side * 0.012), (S.byv -= 1.6);\n  }\n  for (const c of S.cuts) (c.age += d) > 20 && (c.d += d * 0.12);\n  S.cuts = S.cuts.filter((c) => c.age \u003c 130);\n  for (const p of S.pieces) {\n    if (p.f) {\n      (p.vy += 45 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.a += p.va * d);\n      if (p.y > surf(S, p.x) - 1) splash(S, p.x, p.vy, 1), (p.f = 0), (p.vy *= 0.3), (p.ta = round(p.a / (PI / 2)) * (PI / 2));\n    } else {\n      const c = p.c, hy = abs(sin(p.a - S.th)) * c.hx + abs(cos(p.a - S.th)) * c.hy;\n      (p.vy += (-5 * (p.y - surf(S, p.x) - 0.75 * hy) - 1.8 * p.vy) * d), (p.va += (-4 * (p.a - p.ta) - 1.6 * p.va) * d);\n      (p.y += p.vy * d), (p.a += p.va * d), (p.x += c.side * 1.4 * d);\n    }\n  }\n  S.pieces = S.pieces.filter((p) => abs(p.x - W / 2) \u003c W / 2 + p.c.ex + 2);\n  S.vents.forEach((v, i) => {\n    if (sin(t * 0.6 + i * 2.1) > -0.2) for (S.vacc[i] += d * 3.5; S.vacc[i] >= 1; S.vacc[i]--) bub(S, ...toW(S, v[0], v[1]), -(5 + 0.6 * i + 1.2 * rnd()), 0.9);\n  });\n  for (const b of S.bubs) {\n    (b.y += b.vy * d), (b.x += sin(t * 6 + b.ph) * b.wb * d);\n    if (b.y \u003c surf(S, b.x) + 0.3 || b.x \u003c -1 || b.x > W + 1) b.dead = 1;\n  }\n  S.bubs = S.bubs.filter((b) => !b.dead);\n  for (const p of S.spray) (p.vy += 50 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 0.8);\n  S.spray = S.spray.filter((p) => p.l > 0 && !(p.vy > 0 && p.y > surf(S, p.x) + 0.5));\n  (S.kx = 49 + 8 * sin(t * 0.1)), (S.ky = 112 + 7 * sin(t * 0.13 + 1));\n  penguins(S, d, t);\n}\n\n// Now and then a penguin waddles to the edge, jumps, swims to the krill and leaps back.\nfunction penguins(S, d, t) {\n  for (const p of S.pens) if (!p.st && rnd() \u003c d * 0.2) p.f = -p.f;\n  let p = S.dv;\n  if (!p && S.live && (S.nd -= d) \u003c= 0) {\n    const free = S.pens.filter((q) => !q.st && q.on);\n    if (!free.length) return;\n    p = S.dv = free.reduce((a, q) => (q.u > a.u ? q : a));\n    Object.assign(p, { st: 1, tu: edgeU(S, 1) - 0.5 });\n  }\n  if (!p) return;\n  if (p.st === 1 || p.st === 5) {\n    const g = p.st === 1 ? p.tu : p.h;\n    p.f = g > p.u ? 1 : -1;\n    p.u += p.f * min(abs(g - p.u), 4 * d);\n    if (abs(g - p.u) \u003c 0.01) {\n      if (p.st === 5) (p.st = 0), (S.dv = null), (S.nd = 5 + 6 * rnd());\n      else ([p.x, p.y] = toW(S, p.u, topB(S, p.u) - 0.3)), Object.assign(p, { st: 2, vx: 7, vy: -9 });\n    }\n  } else if (p.st === 2) {\n    (p.vy += 40 * d), (p.x += p.vx * d), (p.y += p.vy * d);\n    if (p.vy > 0 && p.y > surf(S, p.x)) splash(S, p.x, 8, 0), Object.assign(p, { st: 3, vy: 12, vx: 3, tt: 0.01, nb: 0.01 });\n  } else if (p.st === 3) {\n    const back = (p.tt += d) > 5, dx = (back ? W - 6 : S.kx + 5 * cos(t * 2.2)) - p.x, dy = (back ? WL - 2 : S.ky + 3 * sin(t * 2.2)) - p.y, r = hypot(dx, dy) + 1e-6, sp = back ? 17 : 14;\n    (p.vx += ((dx / r) * sp - p.vx) * min(1, 2.2 * d)), (p.vy += ((dy / r) * sp - p.vy) * min(1, 2.2 * d));\n    (p.x = cl(p.x + p.vx * d, 1, W - 2)), (p.y = min(p.y + p.vy * d, H - 3));\n    if ((p.nb += d) > 0.07) (p.nb = 0), bub(S, p.x - p.vx * 0.12, p.y - p.vy * 0.12);\n    if (back && p.y \u003c surf(S, p.x) + 1.5) splash(S, p.x, 6, 0), Object.assign(p, { st: 4, lx: p.x, ly: p.y, lt: 0.01, u: edgeU(S, 1) - 1 });\n  } else {\n    const [lx, ly] = toW(S, p.u, topB(S, p.u) - 0.3), l = (p.lt = min(1, p.lt + d / 0.7));\n    (p.vx = lx - p.x), (p.vy = ly - p.y), (p.x = mix(p.lx, lx, l)), (p.y = mix(p.ly, ly, l) - 40 * l * (1 - l));\n    if (l >= 1) p.st = 5;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 0, 1);\n  if (abs(k3 - S.s) > 0.01) build(S, k3);\n  (S.k4 = cl(k[3], 0, 1)), (S.A = 0.45 + 3 * S.k4);\n  if (k1 !== S.k1) {\n    const [a, b, u] = k1 \u003c 0.5 ? [0, 1, sm(0, 0.5, k1)] : [1, 2, sm(0.5, 1, k1)];\n    for (let j = 0; j \u003c 41; j++) S.P[j] = mix(KF[a][j], KF[b][j], u);\n    S.k1 = k1;\n  }\n  for (; !S.live; S.live = S.t > 4 ? 1 : 0) step(S, 1 / 30);\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nlet F, G, PL, RT, LR, LS, LC;\nconst LA = [0, 0, 0, 0], C3 = new Float64Array(3);\n// Light under water: slanting shafts, and caustics on the ice (one noise twice, crossed).\nfunction glow(x, y, dep, b) {\n  const q = x + LS * (y - WL) + 56, q0 = cl(floor(q), 0, 174);\n  let L = LR * mix(RT[q0], RT[q0 + 1], q - q0) * exp(-dep / 36) * 64 * (1 + 0.5 * b);\n  if (b > 0 && dep \u003c 34) L += LC * sm(0.75, 1, 1 - abs(CT[((y + LA[1]) & 63) * 64 + ((x + LA[0]) & 63)] - CT[((x + LA[2]) & 63) * 64 + ((y + LA[3]) & 63)]) * 4) * exp(-dep / 12) * (80 * b + 22);\n  return L;\n}\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst bl = (A, k, fx, fy) => mix(mix(A[k], A[k + 1], fx), mix(A[k + BW], A[k + BW + 1], fx), fy);\n// One LED of the berg, or of slab q, read at body point u, v.\nfunction paint(x, y, u, v, q) {\n  const S = G, P = PL, gx = u - U0 - 0.5, gy = v - V0 - 0.5, x0 = floor(gx), y0 = floor(gy), i = y * W + x, o = i * 3, s = S.sf[x], c = C3, pc = S.pend;\n  if (x0 \u003c 0 || y0 \u003c 0 || x0 >= BW - 1 || y0 >= BH - 1 || (q && (v > 0.6 || (u - q.cx) ** 2 + (v - q.cy) ** 2 > 225))) return;\n  const k = y0 * BW + x0, fx = gx - x0, fy = gy - y0, a = bl(S.M, k, fx, fy) * (q ? cl(0.5 + (q.nx * u + q.ny * v - q.d0), 0, 1) : S.cuts.length && v \u003c 0.6 ? cutA(S.cuts, u, v) : 1);\n  if (a \u003c 0.02) return;\n  if (y + 0.5 \u003c s) {\n    const nx = bl(S.NX, k, fx, fy), sn = bl(S.SN, k, fx, fy), al = bl(S.AL, k, fx, fy), li = P[38] ? cl(0.5 + 0.8 * nx * P[38], 0, 1) : 0.6 + 0.25 * nx;\n    for (let j = 0; j \u003c 3; j++) c[j] = mix(mix(P[19 + j], P[16 + j], li), P[22 + j] * (0.88 + 0.12 * li), sn) * al;\n  } else {\n    const L = glow(x, y, y + 0.5 - s, 1);\n    for (let j = 0; j \u003c 3; j++) c[j] = bl(S.IC[j], k, fx, fy) * AT[y * 3 + j] * P[39] + 0.35 * S.row[y * 3 + j] + L * LT[j];\n  }\n  const ck = pc && v \u003c 0.6 && abs(pc.nx * u + pc.ny * v - pc.d) \u003c 0.6 ? 0.4 : 1;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(q ? F[o + j] : 0, c[j] * ck, q ? a : 1);\n  S.ba[i] = max(S.ba[i], a);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  F = S.f;\n  const { ba, sf, rt, row, t, P, k1, ex } = S;\n  const sunA = 1 - sm(0, 0.4, k1), moonA = sm(0.6, 1, k1), aur = sm(0.7, 1, k1), stars = sm(0.55, 0.9, k1);\n  for (let y = 0; y \u003c H; y++) {\n    let k = 0;\n    while (k \u003c 2 && y > P[k * 4 + 4]) k++;\n    const u = y \u003c= HZ ? sm(P[k * 4], P[k * 4 + 4], y) : cl((y - WL) / 97, 0, 1) ** 0.75;\n    for (let j = 0; j \u003c 3; j++) row[y * 3 + j] = y \u003c= HZ ? mix(P[k * 4 + 1 + j], P[k * 4 + 5 + j], u) : mix(P[25 + j], P[28 + j], u);\n  }\n  for (let q = 0; q \u003c 176; q++) rt[q] = sm(0.45, 0.82, vn((q - 56) * 0.13 - t * 0.3, t * 0.05 + 7));\n  (G = S), (PL = P), (RT = rt), (LR = P[37]), (LS = P[38] * 0.45), (LC = P[40] * (0.7 + 0.6 * S.k4));\n  [7, -5, -6, 4].forEach((v, j) => (LA[j] = floor(t * v)));\n\n  // The berg first, then the background where it shows, then the slabs.\n  ba.fill(0);\n  const ct = cos(S.th), st = sin(S.th), oy = WL + PV + S.by;\n  for (let y = 0; y \u003c H; y++) {\n    const dy = y + 0.5 - oy, g0 = floor(ct * dy + PV - V0 - 0.5);\n    let u0 = 99, u1 = -99;\n    for (let j = max(0, g0 - 3); j \u003c= min(BH - 1, g0 + 3); j++) (u0 = min(u0, ex[j * 2])), (u1 = max(u1, ex[j * 2 + 1]));\n    for (let x = max(0, floor(BX + u0 - st * dy - 2)); x \u003c min(W, BX + u1 - st * dy + 3); x++) {\n      const dx = x + 0.5 - BX;\n      paint(x, y, ct * dx + st * dy, -st * dx + ct * dy + PV, null);\n    }\n  }\n  const sx = 55, sy = 21.5, mx = 12, my = 8, c = C3;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, A = ba[i], dep = y + 0.5 - sf[x];\n    if (A > 0.995) continue;\n    let g = 0, e = 0;\n    if (y \u003c HZ) {\n      const ds = hypot(x + 0.5 - sx, (y + 0.5 - sy) * 1.1), dm = hypot(x + 0.5 - mx, y + 0.5 - my), cu = aur > 0 ? 0.5 + 0.5 * sin(x * 0.2 + 3 * vn(x * 0.05 + t * 0.06, 1) + t * 0.25) : 0;\n      g = moonA * (0.25 * exp(-dm / 5) + (dm \u003c 2.6 && hypot(x - 0.8 - mx, y + 1.1 - my) > 2.3 ? 0.9 : 0)) + (stars > 0 && hash(x, y + 11) \u003c 0.016 ? stars * (0.25 + 0.5 * hash(y, x)) * (0.7 + 0.3 * sin(t * 3 + x * y)) * sm(HZ, 8, y) : 0);\n      e = cu ? aur * sm(19, 6, y) * sm(0, 4, y) * cu * cu * vn(x * 0.6, t * 0.4) : 0;\n      const gs = ds \u003c 30 ? sunA * (0.55 * exp(-ds / 7) + (ds \u003c 2.6 ? 1.2 : 0)) : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = row[y * 3 + j] + SUN[j] * gs + MOON[j] * g + AUR[j] * e;\n      for (const q of S.cl) {\n        const qx = (x + 0.5 - q.x) / q.w, qy = (y + 0.5 - q.y) / q.h;\n        if (qx * qx + qy * qy > 2) continue;\n        const a = 0.92 * sm(0, 0.45, 1 - qx * qx - qy * qy + 0.45 * (vn(x * 0.35 + q.w, y * 0.6) - 0.5)), u = sm(-1, 1, qy);\n        for (let j = 0; j \u003c 3; j++) c[j] = mix(c[j], mix(P[34 + j], P[31 + j], u), a);\n      }\n    } else if (dep \u003c 0) {\n      // The far sea: the sun's glitter path, whitecaps.\n      g = sunA * (abs(x + 0.5 - sx) \u003c 1.5 + (y - HZ) * 1.2 && hash(x, y + floor(t * 7) * 64) \u003c 0.45 ? 0.75 : 0);\n      e = S.k4 > 0.35 && hash(x + floor(t * 2) * 7, y) \u003c (S.k4 - 0.35) * 0.3 ? 0.8 : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[36 + j] * 0.55 + row[90 + j] * 0.45 + SUN[j] * g, 230, e);\n    } else {\n      // The surface's silver underside.\n      (g = glow(x, y, dep, 0)), (e = dep \u003c 2.5 ? (1 - dep / 2.5) * 0.5 : 0);\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[y * 3 + j] + (j ? 90 : 60) * e + g * LT[j], row[78 + j] * 0.9, dep \u003c 1 ? 0.55 : 0);\n    }\n    for (let j = 0; j \u003c 3; j++) F[o + j] = mix(c[j], F[o + j], A);\n  }\n  for (const p of S.pieces) {\n    const ca = cos(p.a), sa = sin(p.a), e = p.c.ex;\n    for (let y = max(0, floor(p.y - e)); y \u003c min(H, p.y + e); y++)\n      for (let x = max(0, floor(p.x - e)); x \u003c min(W, p.x + e); x++) {\n        const dx = x + 0.5 - p.x, dy = y + 0.5 - p.y;\n        paint(x, y, p.c.bu + ca * dx + sa * dy, p.c.bv - sa * dx + ca * dy, p.c);\n      }\n  }\n  sprites(S, t, ba);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction sprites(S, t, ba) {\n  for (const k of S.kr) {\n    const x = S.kx + cos(k.p + t * k.w) * k.r * 1.3, y = S.ky + sin(k.q + t * k.w * 1.3) * k.r * 0.7, i = floor(y) * W + floor(x);\n    if (i >= 0 && i \u003c N && ba[i] \u003c 0.5) put(x, y, [255, 128, 118], (0.25 + 0.35 * S.P[39]) * (0.7 + 0.3 * sin(t * 4 + k.p * 9)));\n  }\n  for (const b of S.bubs) put(b.x, b.y, [214, 246, 255], 0.6);\n  for (const p of S.pens) {\n    if (!p.st && !p.on) continue;\n    if (p.st === 0 || p.st === 1 || p.st === 5) {\n      const [x, y] = toW(S, p.u, topB(S, p.u) - 0.3), f = p.f, B = round(x - 0.5) + (f > 0 ? 0 : 1), Y = floor(y) - (p.st && sin(t * 14) > 0 ? 1 : 0);\n      put(B, Y - 3, BLK), put(B + f, Y - 3, BLK), put(B + 2 * f, Y - 3, [240, 168, 60], 0.8);\n      for (let j = 0; j \u003c 3; j++) put(B, Y - j, BLK), put(B + f, Y - j, WHT);\n    } else {\n      const r = hypot(p.vx, p.vy) + 1e-6, ux = p.vx / r, uy = p.vy / r;\n      for (let j = -1.5; j \u003c= 1.5; j += 0.5) put(p.x + ux * j, p.y + uy * j, BLK), j \u003c 1 && put(p.x + ux * j - uy * (ux \u003c 0 ? -1 : 1), p.y + uy * j + abs(ux), WHT, 0.9);\n    }\n  }\n  for (const p of S.spray) put(p.x, p.y, [232, 240, 246], min(1, p.l * 1.3));\n}\n","layer":{"id":"layer-iceberg","type":"code","name":"iceberg","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Iceberg\n// Family:  polar\n// Idea:    An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the schoolbook drawing of an iceberg with eight ninths of it under the water\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1\n//\n// Knob 1: Light. Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora.\n// Knob 2: Speed. At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower.\n// Knob 3: Shape. A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom.\n// Knob 4: Swell. How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea.\n// Buttons: K1 tap breaks a slab off the berg now.\n\nconst W = 64, H = 128, N = W * H;\n// Sea level, horizon, the berg's middle; its grid (u across, v down from sea level) turns about row PV.\nconst WL = 30, HZ = 26, BX = 28, BW = 64, BH = 128, U0 = -32, V0 = -28, PV = 34, NB = BW * BH;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Caustic noise; the colour the water leaves at each row.\nconst CT = new Float32Array(4096).map((_, k) => vn(((k & 63) * 20) / 64, ((k >> 6) * 20) / 64, 20));\nconst AT = new Float32Array(H * 3).map((_, q) => exp(-max(0, floor(q / 3) + 0.5 - WL) / [26, 75, 170][q % 3]));\n\n// The top: a snow plain with sheer cliffs, or two spires.\nconst PIN = [[-13.5, 1], [-12, -3], [-10, -6], [-7.5, -10], [-5.5, -16], [-3.5, -19.5], [-1.5, -17.5], [0.5, -11], [2.5, -7.5], [4.5, -8.5], [6.5, -13], [8, -16], [9.5, -15], [11.5, -8], [13, -2.5], [14, 1]];\nfunction topAt(u, s) {\n  let i = 1;\n  while (i \u003c PIN.length - 1 && u > PIN[i][0]) i++;\n  const [a, b] = PIN[i - 1], [c, e] = PIN[i], A = u > 0 ? u : -u * 1.05;\n  const tab = A \u003c 15 ? -11 + 0.8 * (vn(u * 0.3, 3) - 0.5) + 1.3 * sm(12.5, 15, A) : mix(-9.7, 1, cl((A - 15) / 1.1, 0, 1));\n  return mix(tab, b + (e - b) * cl((u - a) / (c - a), 0, 1), s);\n}\n// Half widths under the water, tabular and pinnacle, a little lopsided.\nconst CV = [0, 5, 12, 22, 34, 46, 58, 68, 76, 82, 86];\nconst WT = [16.6, 20.5, 22, 22.5, 21.5, 21, 19.5, 16.5, 12.5, 8, 0];\nconst WP = [13.6, 15.5, 16.5, 16.5, 15.5, 14, 12, 9.5, 7, 4, 0];\nconst J = (h) => CV.map((_, i) => (i ? 0.88 + 0.24 * hash(i, h) : 1.03)), JL = J(5), JR = J(9);\nfunction edgeAt(v, s) {\n  const q = v / (1 + 0.1 * s);\n  if (v \u003c 0 || q >= 86) return [0, 0];\n  let i = 0;\n  while (CV[i + 1] \u003c= q) i++;\n  const f = (q - CV[i]) / (CV[i + 1] - CV[i]), w = mix(mix(WT[i], WP[i], s), mix(WT[i + 1], WP[i + 1], s), f), c = 2 * sin(v * 0.05);\n  return [c - w * mix(JL[i], JL[i + 1], f), c + w * mix(JR[i], JR[i + 1], f)];\n}\n\n// Midnight sun, noon, twilight: sky stops, lit and shaded face, snow, water top\n// and bottom, cloud lit and dark, shafts, light's side, ice, caustics.\nconst KF = [\n  [[[0, 28, 50, 116], [10, 100, 104, 166], [19, 232, 158, 132], [26, 250, 200, 128]], [246, 206, 158], [70, 118, 196], [242, 226, 206], [14, 86, 114], [3, 12, 40], [250, 196, 168], [118, 104, 150], [1, 1, 1, 1]],\n  [[[0, 118, 130, 148], [10, 156, 164, 178], [19, 186, 192, 200], [26, 200, 205, 210]], [214, 220, 226], [148, 166, 192], [226, 230, 236], [28, 108, 132], [5, 20, 48], [212, 216, 222], [128, 134, 150], [0.35, 0, 1.05, 0.5]],\n  [[[0, 6, 12, 42], [10, 16, 30, 80], [19, 38, 62, 120], [26, 62, 94, 148]], [160, 188, 232], [58, 84, 148], [176, 198, 236], [8, 44, 80], [2, 6, 24], [70, 86, 130], [26, 34, 66], [0.45, -1, 0.62, 0.5]],\n].map((k) => Float64Array.from(k.flat(2)));\n// Glacier ice; the pinnacle is older ice, bluer all through.\nconst BASE = [92, 192, 226], PALE = [190, 234, 246], CLEAR = [30, 120, 214], VEIN = [12, 50, 172], RIM = [40, 64, 60], TINT = [0.7, 0.9, 1.06];\nconst BLK = [12, 14, 22], WHT = [226, 228, 236], SUN = [255, 214, 150], MOON = [224, 228, 214], AUR = [30, 190, 110], LT = [0.55, 0.92, 1];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), pen = () => Object.fromEntries(\"on h u f st tu x y vx vy tt nb lx ly lt\".split(\" \").map((k) => [k, 0.5]));\n  params.s = {\n    f: F32(N * 3), ba: F32(N), sf: F32(W), rt: F32(176), row: F32(H * 3), P: new Float64Array(41), ex: F32(BH * 2), TT: F32(BW * 4 + 1),\n    M: F32(NB), IC: [F32(NB), F32(NB), F32(NB)], SN: F32(NB), NX: F32(NB), AL: F32(NB), D: F32(NB),\n    s: -1, t: 0.01, th: 0.01, thv: 0.01, thq: 0.01, by: 0.01, byv: 0.01, A: 0.5, k1: -1, k4: 0.06, live: 0, kx: 49.5, ky: 112.5,\n    next: 3.4, nd: 0.5, pend: null, crack: 0.5, cuts: [], pieces: [], bubs: [], spray: [], rings: [], vacc: [0.5, 0.5, 0.5, 0.5, 0.5], dv: null,\n    cl: [0, 1, 2, 3].map((k) => ({ x: 6 + k * 17 + 6 * rnd(), y: 5 + ((k * 5) % 13) + 2 * rnd(), w: 7 + 5 * rnd(), h: 1.7 + rnd() })),\n    kr: Array.from({ length: 46 }, () => ({ p: rnd() * 6.3, q: rnd() * 6.3, w: 0.4 + 0.5 * rnd(), r: 1 + 6 * rnd() })),\n    pens: [0, 1, 2, 3, 4].map((i) => Object.assign(pen(), { f: i % 2 ? 1 : -1, st: 0 })),\n  };\n}\n\nconst toW = (S, u, v) => [BX + cos(S.th) * u - sin(S.th) * (v - PV), WL + PV + S.by + sin(S.th) * u + cos(S.th) * (v - PV)];\n// What the cuts leave at u, v. Cuts heal outward as the berg turns.\nfunction cutA(cuts, u, v) {\n  let a = 1;\n  for (const c of cuts) if (v \u003c 0.6 && (u - c.cx) ** 2 + (v - c.cy) ** 2 \u003c 225) a *= cl(0.5 - (c.nx * u + c.ny * v - c.d), 0, 1);\n  return a;\n}\nconst topB = (S, u) => S.TT[cl(round((u - U0) * 4), 0, BW * 4)];\nfunction edgeU(S, side) {\n  for (let a = 0; a \u003c 26; a += 0.5) if (topB(S, side * a) > -1.5 || cutA(S.cuts, side * a, topB(S, side * a) + 0.7) \u003c 0.5) return side * (a - 1);\n  return side * 12;\n}\nconst surf = (S, x) => S.sf[cl(round(x), 0, W - 1)];\n\nfunction build(S, s) {\n  S.s = s;\n  const { M, SN, NX, AL, D, TT, ex } = S, E = [], face = [];\n  for (let q = 0; q \u003c= BW * 4; q++) TT[q] = topAt(U0 + q / 4, s);\n  for (let q = 0; q \u003c BH * 4; q++) E.push(edgeAt(V0 + (q + 0.5) / 4, s));\n  for (let k = 0; k \u003c NB; k++) {\n    let n = 0;\n    for (let j = 0; j \u003c 16; j++) {\n      const qu = (k & 63) * 4 + (j & 3), qv = (k >> 6) * 4 + (j >> 2), u = U0 + (qu + 0.5) / 4, v = V0 + (qv + 0.5) / 4;\n      if (v \u003c 0 ? v >= TT[qu] : u > E[qv][0] && u \u003c E[qv][1]) n++;\n    }\n    M[k] = n / 16;\n  }\n  // Distance to open water: a glowing rim, a darker core.\n  for (let k = 0; k \u003c NB; k++) D[k] = M[k] \u003c 0.5 ? 0 : 20;\n  for (let k = BW + 1; k \u003c NB - 1; k++) D[k] = min(D[k], D[k - 1] + 1, D[k - BW] + 1, D[k - BW - 1] + 1.4, D[k - BW + 1] + 1.4);\n  for (let k = NB - BW - 2; k > 0; k--) D[k] = min(D[k], D[k + 1] + 1, D[k + BW] + 1, D[k + BW + 1] + 1.4, D[k + BW - 1] + 1.4);\n  for (let j = 0; j \u003c BH * 2; j++) ex[j] = j & 1 ? -99 : 99;\n  for (let k = 0; k \u003c NB; k++) {\n    const gu = k & 63, gv = k >> 6, u = U0 + gu + 0.5, v = V0 + gv + 0.5;\n    if (M[k] \u003c= 0) continue;\n    // Facets: lit or shaded in the air; below, melt scallops lit on their lower walls.\n    let bd = 1e9, id = 0, sv = 0;\n    for (let j = 0; j \u003c 9; j++) {\n      const cu = floor(u / 5) + (j % 3) - 1, cv = floor(v / 5) + floor(j / 3) - 1, w = (cv + hash(cv, cu + 50)) * 5, dd = (u - (cu + hash(cu, cv)) * 5) ** 2 + (v - w) ** 2;\n      if (dd \u003c bd) (bd = dd), (id = hash(cu + 99, cv)), (sv = w);\n    }\n    const qu = gu * 4 + 2, sl = TT[min(BW * 4, qu + 2)] - TT[max(0, qu - 2)], dep = v - TT[qu];\n    NX[k] = mix(sl / sqrt(1 + sl * sl), cl(u / 24 + 1.3 * (id - 0.5), -1, 1), sm(1, 3, dep));\n    SN[k] = sm(2.4, 1.3, dep) * sm(1.6, 0.8, abs(sl));\n    AL[k] = (0.86 + 0.14 * hash(gu, 7)) * (0.88 + 0.24 * id) * (v > -1.5 && v \u003c 0 ? 0.7 : 1);\n    // Layers of white and clear blue ice, dark veins of refrozen meltwater.\n    const f = (v + u * 0.14 + 7 * vn(u * 0.04, v * 0.025 + 9)) / 8, n = floor(f), band = f - n, h1 = hash(n, 5);\n    const mot = (0.84 + 0.3 * vn(u * 0.1 + 3, v * 0.07)) * (1 + 0.2 * cl((v - sv) / 3, -1, 1));\n    const pale = sm(0.5, 0.6, band) * (1 - sm(0.6 + 0.3 * h1, 0.7 + 0.3 * h1, band)) * sm(0.25, 0.5, hash(n, 6)), clear = (1 - sm(0.2, 0.45, band)) * sm(0.4, 0.8, h1);\n    const vein = max(sm(0.11, 0.03, abs(vn(u * 0.08 + 11, v * 0.045) * 2 - 1)), 0.8 * sm(0.1, 0.025, abs(vn(u * 0.045 + 31, v * 0.11 + 5) * 2 - 1))) * sm(0.25, 0.5, vn(u * 0.035 + 20, v * 0.03));\n    const dk = D[k], core = (0.5 + 0.5 * exp(-max(0, dk - 1) / 5)) * (gv > 1 && M[k - 2 * BW] \u003c 0.5 ? 1.3 : 1) * (gv \u003c BH - 2 && M[k + 2 * BW] \u003c 0.5 ? 0.76 : 1);\n    for (let c = 0; c \u003c 3; c++) S.IC[c][k] = mix(mix(mix(BASE[c] * mot, PALE[c], 0.8 * pale), CLEAR[c], 0.6 * clear), VEIN[c], 0.9 * vein) * core * mix(1, TINT[c], s) + exp(-dk / 1.2) * RIM[c];\n    if (v > 3 && v \u003c 80 && dk > 1.5) face.push([u, v]);\n    (ex[gv * 2] = min(ex[gv * 2], u)), (ex[gv * 2 + 1] = max(ex[gv * 2 + 1], u));\n  }\n  S.vents = [0, 1, 2, 3, 4].map((i) => face[floor(hash(i, 41) * face.length)]);\n  // Penguin places: flat, three columns apart, clear of the slabs.\n  const slots = [];\n  for (const u of [0.5, -6, 6.5, -3, 3.5, -8, 8, -1.5, 2, -4.5, 5]) {\n    const q = round((u - U0) * 4);\n    if (abs(TT[q + 6] - TT[q - 6]) \u003c 1.6 && TT[q] \u003c -2.5 && TT[q] > -15 && slots.length \u003c 5 && slots.every((w) => abs(w - u) > 2.9)) slots.push(u + 0.01);\n  }\n  S.pens.forEach((p, i) => ((p.on = i \u003c slots.length ? 1 : 0), p.on && (p.h = slots[i]), p.st || (p.u = p.h)));\n}\n\nconst bub = (S, x, y, vy = -(4.5 + 5 * rnd()), wb = 0.6) => S.bubs.length \u003c 260 && S.bubs.push({ x, y, vy, wb, ph: rnd() * 6.3, dead: 0 });\nfunction splash(S, x, v, g) {\n  const y = surf(S, x) - 0.5;\n  for (let k = 0; k \u003c 7 + 29 * g; k++) S.spray.push({ x: x + (rnd() - 0.5) * (2 + 3 * g), y, vx: (rnd() - 0.5) * (10 + 14 * g), vy: -(6 + rnd() * (9 + 17 * g)), l: 0.99 });\n  S.rings.push({ x, t: 0.01, a: g ? min(3.2, 0.1 * v + 1.4) : 0.6 });\n  for (let k = 0; k \u003c 8 + 22 * g; k++) bub(S, x + (rnd() - 0.5) * 6, y + 1 + rnd() * (5 + 9 * g));\n}\n\n// A crack opens behind a slab of outer ice; it goes half a second later.\nfunction calve(S) {\n  if (S.pend || S.pieces.some((p) => p.f)) return;\n  let side = rnd() \u003c 0.5 ? -1 : 1;\n  if (S.cuts.some((c) => c.side === side && c.age \u003c 40)) side = -side;\n  let ue = edgeU(S, side);\n  if (abs(ue) \u003c 12) (side = -side), (ue = edgeU(S, side));\n  if (abs(ue) \u003c 12) return;\n  const px = side * max(9, abs(ue) - 3.5 - 3 * rnd()), nx = side * 0.993, d = nx * px + 0.6;\n  const c = { nx, ny: -0.12, d, d0: d, cx: px, cy: -5, side, age: 0.01, bu: 0.5, bv: 0.5, ex: 0.5, hx: 0.5, hy: 0.5 };\n  let u0 = 99, u1 = -99, v0 = 99, v1 = -99;\n  for (let k = 0; k \u003c NB; k++) {\n    const u = U0 + (k & 63) + 0.5, v = V0 + (k >> 6) + 0.5;\n    if (S.M[k] > 0.5 && cutA([c], u, v) \u003c 0.5 && cutA(S.cuts, u, v) > 0.5) (u0 = min(u0, u)), (u1 = max(u1, u)), (v0 = min(v0, v)), (v1 = max(v1, v));\n  }\n  if (u1 - u0 \u003c 1.5) return;\n  Object.assign(c, { bu: (u0 + u1) / 2, bv: (v0 + v1) / 2, hx: (u1 - u0) / 2 + 0.5, hy: (v1 - v0) / 2 + 0.5 });\n  c.ex = hypot(c.hx, c.hy) + 1.5;\n  (S.pend = c), (S.crack = 0.5);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d), A = S.A, sf = S.sf;\n  // The swell, and rings running out from each splash.\n  const swell = (x) => A * (0.7 * sin(x * 0.15 - t * 1.4) + 0.3 * sin(x * 0.34 + t * 0.95 + 1));\n  for (let x = 0; x \u003c W; x++) {\n    sf[x] = WL + swell(x + 0.5);\n    for (const r of S.rings) {\n      const q = abs(x + 0.5 - r.x) - 11 * r.t;\n      sf[x] += r.a * exp(-r.t * 0.5 - (q / 5) ** 2) * sin(q * 0.9);\n    }\n  }\n  for (const r of S.rings) r.t += d;\n  S.rings = S.rings.filter((r) => r.t \u003c 7);\n  S.thv += (-2.4 * (S.th - S.thq - 0.022 * A * cos(BX * 0.15 - t * 1.4)) - 0.45 * S.thv) * d;\n  S.byv += (-3 * (S.by - 0.5 * swell(BX)) - 1.2 * S.byv) * d;\n  (S.th += S.thv * d), (S.by += S.byv * d), (S.thq *= exp(-d / 60));\n  for (const c of S.cl) (c.x += (0.7 + 3 * S.k4) * d) > W + c.w + 2 && (c.x = -c.w - 2);\n\n  if (S.live && (S.next -= d) \u003c= 0) calve(S), (S.next = 15 + 10 * rnd());\n  if (S.pend && (S.crack -= d) \u003c= 0) {\n    // The berg loses weight on that side, rocks and settles leaning a little.\n    const c = S.pend, [x, y] = toW(S, c.bu, c.bv);\n    S.cuts.push(c);\n    S.pieces.push({ c, x, y, vx: c.side * 2.5, vy: 0.5, a: S.th, va: c.side * (1.4 + rnd()), f: 1, ta: 0.5 });\n    (S.pend = null), (S.thv -= c.side * 0.1), (S.thq -= c.side * 0.012), (S.byv -= 1.6);\n  }\n  for (const c of S.cuts) (c.age += d) > 20 && (c.d += d * 0.12);\n  S.cuts = S.cuts.filter((c) => c.age \u003c 130);\n  for (const p of S.pieces) {\n    if (p.f) {\n      (p.vy += 45 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.a += p.va * d);\n      if (p.y > surf(S, p.x) - 1) splash(S, p.x, p.vy, 1), (p.f = 0), (p.vy *= 0.3), (p.ta = round(p.a / (PI / 2)) * (PI / 2));\n    } else {\n      const c = p.c, hy = abs(sin(p.a - S.th)) * c.hx + abs(cos(p.a - S.th)) * c.hy;\n      (p.vy += (-5 * (p.y - surf(S, p.x) - 0.75 * hy) - 1.8 * p.vy) * d), (p.va += (-4 * (p.a - p.ta) - 1.6 * p.va) * d);\n      (p.y += p.vy * d), (p.a += p.va * d), (p.x += c.side * 1.4 * d);\n    }\n  }\n  S.pieces = S.pieces.filter((p) => abs(p.x - W / 2) \u003c W / 2 + p.c.ex + 2);\n  S.vents.forEach((v, i) => {\n    if (sin(t * 0.6 + i * 2.1) > -0.2) for (S.vacc[i] += d * 3.5; S.vacc[i] >= 1; S.vacc[i]--) bub(S, ...toW(S, v[0], v[1]), -(5 + 0.6 * i + 1.2 * rnd()), 0.9);\n  });\n  for (const b of S.bubs) {\n    (b.y += b.vy * d), (b.x += sin(t * 6 + b.ph) * b.wb * d);\n    if (b.y \u003c surf(S, b.x) + 0.3 || b.x \u003c -1 || b.x > W + 1) b.dead = 1;\n  }\n  S.bubs = S.bubs.filter((b) => !b.dead);\n  for (const p of S.spray) (p.vy += 50 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 0.8);\n  S.spray = S.spray.filter((p) => p.l > 0 && !(p.vy > 0 && p.y > surf(S, p.x) + 0.5));\n  (S.kx = 49 + 8 * sin(t * 0.1)), (S.ky = 112 + 7 * sin(t * 0.13 + 1));\n  penguins(S, d, t);\n}\n\n// Now and then a penguin waddles to the edge, jumps, swims to the krill and leaps back.\nfunction penguins(S, d, t) {\n  for (const p of S.pens) if (!p.st && rnd() \u003c d * 0.2) p.f = -p.f;\n  let p = S.dv;\n  if (!p && S.live && (S.nd -= d) \u003c= 0) {\n    const free = S.pens.filter((q) => !q.st && q.on);\n    if (!free.length) return;\n    p = S.dv = free.reduce((a, q) => (q.u > a.u ? q : a));\n    Object.assign(p, { st: 1, tu: edgeU(S, 1) - 0.5 });\n  }\n  if (!p) return;\n  if (p.st === 1 || p.st === 5) {\n    const g = p.st === 1 ? p.tu : p.h;\n    p.f = g > p.u ? 1 : -1;\n    p.u += p.f * min(abs(g - p.u), 4 * d);\n    if (abs(g - p.u) \u003c 0.01) {\n      if (p.st === 5) (p.st = 0), (S.dv = null), (S.nd = 5 + 6 * rnd());\n      else ([p.x, p.y] = toW(S, p.u, topB(S, p.u) - 0.3)), Object.assign(p, { st: 2, vx: 7, vy: -9 });\n    }\n  } else if (p.st === 2) {\n    (p.vy += 40 * d), (p.x += p.vx * d), (p.y += p.vy * d);\n    if (p.vy > 0 && p.y > surf(S, p.x)) splash(S, p.x, 8, 0), Object.assign(p, { st: 3, vy: 12, vx: 3, tt: 0.01, nb: 0.01 });\n  } else if (p.st === 3) {\n    const back = (p.tt += d) > 5, dx = (back ? W - 6 : S.kx + 5 * cos(t * 2.2)) - p.x, dy = (back ? WL - 2 : S.ky + 3 * sin(t * 2.2)) - p.y, r = hypot(dx, dy) + 1e-6, sp = back ? 17 : 14;\n    (p.vx += ((dx / r) * sp - p.vx) * min(1, 2.2 * d)), (p.vy += ((dy / r) * sp - p.vy) * min(1, 2.2 * d));\n    (p.x = cl(p.x + p.vx * d, 1, W - 2)), (p.y = min(p.y + p.vy * d, H - 3));\n    if ((p.nb += d) > 0.07) (p.nb = 0), bub(S, p.x - p.vx * 0.12, p.y - p.vy * 0.12);\n    if (back && p.y \u003c surf(S, p.x) + 1.5) splash(S, p.x, 6, 0), Object.assign(p, { st: 4, lx: p.x, ly: p.y, lt: 0.01, u: edgeU(S, 1) - 1 });\n  } else {\n    const [lx, ly] = toW(S, p.u, topB(S, p.u) - 0.3), l = (p.lt = min(1, p.lt + d / 0.7));\n    (p.vx = lx - p.x), (p.vy = ly - p.y), (p.x = mix(p.lx, lx, l)), (p.y = mix(p.ly, ly, l) - 40 * l * (1 - l));\n    if (l >= 1) p.st = 5;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 0, 1);\n  if (abs(k3 - S.s) > 0.01) build(S, k3);\n  (S.k4 = cl(k[3], 0, 1)), (S.A = 0.45 + 3 * S.k4);\n  if (k1 !== S.k1) {\n    const [a, b, u] = k1 \u003c 0.5 ? [0, 1, sm(0, 0.5, k1)] : [1, 2, sm(0.5, 1, k1)];\n    for (let j = 0; j \u003c 41; j++) S.P[j] = mix(KF[a][j], KF[b][j], u);\n    S.k1 = k1;\n  }\n  for (; !S.live; S.live = S.t > 4 ? 1 : 0) step(S, 1 / 30);\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nlet F, G, PL, RT, LR, LS, LC;\nconst LA = [0, 0, 0, 0], C3 = new Float64Array(3);\n// Light under water: slanting shafts, and caustics on the ice (one noise twice, crossed).\nfunction glow(x, y, dep, b) {\n  const q = x + LS * (y - WL) + 56, q0 = cl(floor(q), 0, 174);\n  let L = LR * mix(RT[q0], RT[q0 + 1], q - q0) * exp(-dep / 36) * 64 * (1 + 0.5 * b);\n  if (b > 0 && dep \u003c 34) L += LC * sm(0.75, 1, 1 - abs(CT[((y + LA[1]) & 63) * 64 + ((x + LA[0]) & 63)] - CT[((x + LA[2]) & 63) * 64 + ((y + LA[3]) & 63)]) * 4) * exp(-dep / 12) * (80 * b + 22);\n  return L;\n}\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst bl = (A, k, fx, fy) => mix(mix(A[k], A[k + 1], fx), mix(A[k + BW], A[k + BW + 1], fx), fy);\n// One LED of the berg, or of slab q, read at body point u, v.\nfunction paint(x, y, u, v, q) {\n  const S = G, P = PL, gx = u - U0 - 0.5, gy = v - V0 - 0.5, x0 = floor(gx), y0 = floor(gy), i = y * W + x, o = i * 3, s = S.sf[x], c = C3, pc = S.pend;\n  if (x0 \u003c 0 || y0 \u003c 0 || x0 >= BW - 1 || y0 >= BH - 1 || (q && (v > 0.6 || (u - q.cx) ** 2 + (v - q.cy) ** 2 > 225))) return;\n  const k = y0 * BW + x0, fx = gx - x0, fy = gy - y0, a = bl(S.M, k, fx, fy) * (q ? cl(0.5 + (q.nx * u + q.ny * v - q.d0), 0, 1) : S.cuts.length && v \u003c 0.6 ? cutA(S.cuts, u, v) : 1);\n  if (a \u003c 0.02) return;\n  if (y + 0.5 \u003c s) {\n    const nx = bl(S.NX, k, fx, fy), sn = bl(S.SN, k, fx, fy), al = bl(S.AL, k, fx, fy), li = P[38] ? cl(0.5 + 0.8 * nx * P[38], 0, 1) : 0.6 + 0.25 * nx;\n    for (let j = 0; j \u003c 3; j++) c[j] = mix(mix(P[19 + j], P[16 + j], li), P[22 + j] * (0.88 + 0.12 * li), sn) * al;\n  } else {\n    const L = glow(x, y, y + 0.5 - s, 1);\n    for (let j = 0; j \u003c 3; j++) c[j] = bl(S.IC[j], k, fx, fy) * AT[y * 3 + j] * P[39] + 0.35 * S.row[y * 3 + j] + L * LT[j];\n  }\n  const ck = pc && v \u003c 0.6 && abs(pc.nx * u + pc.ny * v - pc.d) \u003c 0.6 ? 0.4 : 1;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(q ? F[o + j] : 0, c[j] * ck, q ? a : 1);\n  S.ba[i] = max(S.ba[i], a);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  F = S.f;\n  const { ba, sf, rt, row, t, P, k1, ex } = S;\n  const sunA = 1 - sm(0, 0.4, k1), moonA = sm(0.6, 1, k1), aur = sm(0.7, 1, k1), stars = sm(0.55, 0.9, k1);\n  for (let y = 0; y \u003c H; y++) {\n    let k = 0;\n    while (k \u003c 2 && y > P[k * 4 + 4]) k++;\n    const u = y \u003c= HZ ? sm(P[k * 4], P[k * 4 + 4], y) : cl((y - WL) / 97, 0, 1) ** 0.75;\n    for (let j = 0; j \u003c 3; j++) row[y * 3 + j] = y \u003c= HZ ? mix(P[k * 4 + 1 + j], P[k * 4 + 5 + j], u) : mix(P[25 + j], P[28 + j], u);\n  }\n  for (let q = 0; q \u003c 176; q++) rt[q] = sm(0.45, 0.82, vn((q - 56) * 0.13 - t * 0.3, t * 0.05 + 7));\n  (G = S), (PL = P), (RT = rt), (LR = P[37]), (LS = P[38] * 0.45), (LC = P[40] * (0.7 + 0.6 * S.k4));\n  [7, -5, -6, 4].forEach((v, j) => (LA[j] = floor(t * v)));\n\n  // The berg first, then the background where it shows, then the slabs.\n  ba.fill(0);\n  const ct = cos(S.th), st = sin(S.th), oy = WL + PV + S.by;\n  for (let y = 0; y \u003c H; y++) {\n    const dy = y + 0.5 - oy, g0 = floor(ct * dy + PV - V0 - 0.5);\n    let u0 = 99, u1 = -99;\n    for (let j = max(0, g0 - 3); j \u003c= min(BH - 1, g0 + 3); j++) (u0 = min(u0, ex[j * 2])), (u1 = max(u1, ex[j * 2 + 1]));\n    for (let x = max(0, floor(BX + u0 - st * dy - 2)); x \u003c min(W, BX + u1 - st * dy + 3); x++) {\n      const dx = x + 0.5 - BX;\n      paint(x, y, ct * dx + st * dy, -st * dx + ct * dy + PV, null);\n    }\n  }\n  const sx = 55, sy = 21.5, mx = 12, my = 8, c = C3;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, A = ba[i], dep = y + 0.5 - sf[x];\n    if (A > 0.995) continue;\n    let g = 0, e = 0;\n    if (y \u003c HZ) {\n      const ds = hypot(x + 0.5 - sx, (y + 0.5 - sy) * 1.1), dm = hypot(x + 0.5 - mx, y + 0.5 - my), cu = aur > 0 ? 0.5 + 0.5 * sin(x * 0.2 + 3 * vn(x * 0.05 + t * 0.06, 1) + t * 0.25) : 0;\n      g = moonA * (0.25 * exp(-dm / 5) + (dm \u003c 2.6 && hypot(x - 0.8 - mx, y + 1.1 - my) > 2.3 ? 0.9 : 0)) + (stars > 0 && hash(x, y + 11) \u003c 0.016 ? stars * (0.25 + 0.5 * hash(y, x)) * (0.7 + 0.3 * sin(t * 3 + x * y)) * sm(HZ, 8, y) : 0);\n      e = cu ? aur * sm(19, 6, y) * sm(0, 4, y) * cu * cu * vn(x * 0.6, t * 0.4) : 0;\n      const gs = ds \u003c 30 ? sunA * (0.55 * exp(-ds / 7) + (ds \u003c 2.6 ? 1.2 : 0)) : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = row[y * 3 + j] + SUN[j] * gs + MOON[j] * g + AUR[j] * e;\n      for (const q of S.cl) {\n        const qx = (x + 0.5 - q.x) / q.w, qy = (y + 0.5 - q.y) / q.h;\n        if (qx * qx + qy * qy > 2) continue;\n        const a = 0.92 * sm(0, 0.45, 1 - qx * qx - qy * qy + 0.45 * (vn(x * 0.35 + q.w, y * 0.6) - 0.5)), u = sm(-1, 1, qy);\n        for (let j = 0; j \u003c 3; j++) c[j] = mix(c[j], mix(P[34 + j], P[31 + j], u), a);\n      }\n    } else if (dep \u003c 0) {\n      // The far sea: the sun's glitter path, whitecaps.\n      g = sunA * (abs(x + 0.5 - sx) \u003c 1.5 + (y - HZ) * 1.2 && hash(x, y + floor(t * 7) * 64) \u003c 0.45 ? 0.75 : 0);\n      e = S.k4 > 0.35 && hash(x + floor(t * 2) * 7, y) \u003c (S.k4 - 0.35) * 0.3 ? 0.8 : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[36 + j] * 0.55 + row[90 + j] * 0.45 + SUN[j] * g, 230, e);\n    } else {\n      // The surface's silver underside.\n      (g = glow(x, y, dep, 0)), (e = dep \u003c 2.5 ? (1 - dep / 2.5) * 0.5 : 0);\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[y * 3 + j] + (j ? 90 : 60) * e + g * LT[j], row[78 + j] * 0.9, dep \u003c 1 ? 0.55 : 0);\n    }\n    for (let j = 0; j \u003c 3; j++) F[o + j] = mix(c[j], F[o + j], A);\n  }\n  for (const p of S.pieces) {\n    const ca = cos(p.a), sa = sin(p.a), e = p.c.ex;\n    for (let y = max(0, floor(p.y - e)); y \u003c min(H, p.y + e); y++)\n      for (let x = max(0, floor(p.x - e)); x \u003c min(W, p.x + e); x++) {\n        const dx = x + 0.5 - p.x, dy = y + 0.5 - p.y;\n        paint(x, y, p.c.bu + ca * dx + sa * dy, p.c.bv - sa * dx + ca * dy, p.c);\n      }\n  }\n  sprites(S, t, ba);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction sprites(S, t, ba) {\n  for (const k of S.kr) {\n    const x = S.kx + cos(k.p + t * k.w) * k.r * 1.3, y = S.ky + sin(k.q + t * k.w * 1.3) * k.r * 0.7, i = floor(y) * W + floor(x);\n    if (i >= 0 && i \u003c N && ba[i] \u003c 0.5) put(x, y, [255, 128, 118], (0.25 + 0.35 * S.P[39]) * (0.7 + 0.3 * sin(t * 4 + k.p * 9)));\n  }\n  for (const b of S.bubs) put(b.x, b.y, [214, 246, 255], 0.6);\n  for (const p of S.pens) {\n    if (!p.st && !p.on) continue;\n    if (p.st === 0 || p.st === 1 || p.st === 5) {\n      const [x, y] = toW(S, p.u, topB(S, p.u) - 0.3), f = p.f, B = round(x - 0.5) + (f > 0 ? 0 : 1), Y = floor(y) - (p.st && sin(t * 14) > 0 ? 1 : 0);\n      put(B, Y - 3, BLK), put(B + f, Y - 3, BLK), put(B + 2 * f, Y - 3, [240, 168, 60], 0.8);\n      for (let j = 0; j \u003c 3; j++) put(B, Y - j, BLK), put(B + f, Y - j, WHT);\n    } else {\n      const r = hypot(p.vx, p.vy) + 1e-6, ux = p.vx / r, uy = p.vy / r;\n      for (let j = -1.5; j \u003c= 1.5; j += 0.5) put(p.x + ux * j, p.y + uy * j, BLK), j \u003c 1 && put(p.x + ux * j - uy * (ux \u003c 0 ? -1 : 1), p.y + uy * j + abs(ux), WHT, 0.9);\n    }\n  }\n  for (const p of S.spray) put(p.x, p.y, [232, 240, 246], min(1, p.l * 1.3));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower."},{"name":"Shape","min":0,"max":1,"about":"A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom."},{"name":"Swell","min":0,"max":1,"about":"How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea."}],"start":[0,2,0,0.06],"measures":{"motion":0.1332,"detail":0.0357,"edges":0.189,"complexity":1.9213,"coverage":0.9971,"colour":0.3059,"drift":0.0544},"knobResponse":[0.1811,0.05,0.05,0.0489]},{"slug":"implosion","title":"Implosion","family":"construction","round":26,"note":"새벽 하늘 아래 스무 층 아파트에 장약 섬광이 층마다 타고 내려오면, 탑이 꺾이며 제자리로 주저앉고 회황색 먼지구름이 꼭대기까지 끓어올라요. 타임랩스로 비계 속에 새 탑이 서고, K1 을 누르면 바로 발파해요.","idea":"An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.","buttons":"K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.","code":"// ===== Patternflow pattern =====\n// Title:   Implosion\n// Family:  construction\n// Idea:    An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the explosive demolitions of 1960s concrete tower blocks\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1\n//\n// Knob 1: Light. Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust.\n// Knob 2: Speed. At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower.\n// Knob 3: Storeys. Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel.\n// Knob 4: Wind. Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it.\n// Buttons: K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = (a = 1) => Math.random() * a;\nconst side = () => (rnd() \u003c 0.5 ? -1 : 1);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every cx by cy cells.\nfunction vn(x, y, cx = 1e4, cy = 1e4) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (i, j) => hash(((i % cx) + cx) % cx, ((j % cy) + cy) % cy);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + h(xi + 1, yi + 1)) * su * sv;\n}\n\n// Ground row; the tower's front face from x 19 (22 wide) and side face (6).\nconst G = 110, X0 = 19, TW = 28, CX = 33;\n// One round at Speed 2, in seconds.\nconst T_CH = 2.4, T_FALL = 3, T_EX = 11, T_TL = 19, T_CLR = 25, T_RISE = 26.5, T_UP = 32.5, CYC = 36;\nconst MP = 240, PF = 12;\n// Dawn, morning, overcast, night: sky top, mid, horizon; ambient; sun; lit windows; floods; cloud lit, dark; cover.\nconst KEYS = [\n  [16, 30, 86, 52, 84, 156, 214, 146, 150, 0.4, 0.45, 0.66, 0.55, 0.32, 0.3, 0.34, 0.35, 236, 156, 156, 58, 60, 108, 0.5],\n  [46, 108, 206, 110, 164, 228, 236, 206, 160, 0.55, 0.58, 0.68, 1, 0.86, 0.62, 0.06, 0, 255, 244, 226, 150, 160, 190, 0.38],\n  [96, 102, 112, 136, 140, 146, 170, 170, 168, 0.66, 0.66, 0.68, 0.08, 0.08, 0.08, 0.12, 0.12, 190, 192, 196, 100, 104, 112, 0.9],\n  [3, 5, 18, 8, 14, 38, 34, 32, 58, 0.14, 0.15, 0.24, 0, 0, 0, 0.5, 1, 40, 38, 58, 12, 14, 28, 0.45],\n];\nconst TILE = [80, 110, 170], BRICK = [170, 84, 56], PALE = [190, 176, 150], RUST = [150, 80, 50], AMBER = [255, 150, 30];\nconst COATS = [[30, 34, 56], [56, 30, 36], [34, 46, 34], [50, 44, 34], [250, 120, 20]], SIL = [12, 12, 16], PHONE = [150, 180, 240];\nconst WIN = [204, 150, 83], GLASS = [60, 84, 110], MID = [0, 0, 0], LAMP = [200, 190, 150], DARK = [30, 28, 28], HOLE = [14, 12, 12], RED = [255, 40, 30];\nconst CON = [160, 154, 144], WARM = [255, 188, 104], YEL = [242, 182, 32], DUST0 = [150, 147, 142], DUST1 = [190, 164, 120];\nlet F, L, P;\n\nexport function setup(params) {\n  const f = (n) => new Float32Array(n);\n  P = params.s = { F: f(N * 3), NT: f(N), BA: f(N * 3), BU: f(N), BK: new Uint8Array(N), FL: f(N), SKY: f(H * 3), pf: f(MP * PF), np: 0, cr: [], T: 0, rt: 0, S: 0, cyc: 0, co: 0, w: 0 };\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.NT[i] = 0.5 * vn(x / 16, y / 16, 4, 8) + 0.3 * vn(x / 8, y / 8, 8, 16) + 0.2 * vn(x / 4, y / 4, 16, 32);\n    // Two floodlight masts by the fence aim up the tower.\n    for (const lx of [2, 61]) {\n      const dx = x - lx, dy = y - 82, dd = sqrt(dx * dx + dy * dy) + 0.5, ax = CX - lx, c = (dx * ax - dy * 32) / (dd * sqrt(ax * ax + 1024));\n      P.FL[i] += exp(-(1 - c) * 32) / (1 + dd / 40) + 0.9 * exp((-dd * dd) / 5);\n    }\n  }\n  scenery();\n  for (let x = 2; x \u003c 63; x += 3 + floor(rnd(3))) if (rnd() \u003c 0.85) P.cr.push([x, 111 + floor(rnd(4)), 4 + floor(rnd(3)), rnd(), rnd(), P.cr.length % 7 === 3 ? 4 : floor(rnd(4))]);\n  newRound();\n}\n\n// Street, site, two low blocks, far skyline and spire, chimney, a water cannon on a roof.\nfunction scenery() {\n  const top = [];\n  for (let x = 0; x \u003c W; ) for (let j = 0, w = 3 + rnd(6), t = 72 + rnd(16); j \u003c w && x \u003c W; j++) top[x++] = t;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, hh = hash(x, y), q = (x - 50) & 3;\n    let k = 2, c = 0, v = 1;\n    if (y > 118) (c = [58, 58, 64]), (v = 0.9 + 0.2 * hh);\n    else if (y === 118) c = [120, 118, 112];\n    else if (y >= G) (c = [118, 104, 86]), (v = 0.8 + 0.35 * hh);\n    else if (x > 50 && x \u003c 56 && y > 84 && y \u003c 90) c = abs(x - 53) + abs(y - 86.5) \u003c 1.6 ? [40, 44, 50] : [116, 120, 128];\n    else if (x \u003c 15 && y > 81) {\n      (c = y \u003c 84 ? [170, 160, 150] : [148, 92, 70]), (v = y \u003c 84 ? 1 : 0.88 + 0.2 * hash(x >> 1, y));\n      if (y > 85 && y \u003c 106 && x & 3 && (x & 3) \u003c 3 && (y - 86) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 48 && y > 89) {\n      (c = y \u003c 92 ? [190, 182, 170] : [176, 162, 138]), (v = 0.9 + 0.15 * hash(x, y >> 2));\n      if (y > 93 && y \u003c 108 && q && q \u003c 3 && (y - 94) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 55 && x \u003c 60 && y > 43) c = y === 44 ? [180, 172, 160] : y > 46 && y \u003c 54 && y % 5 > 1 && y % 5 \u003c 4 ? [176, 70, 56] : [150, 138, 124];\n    else if (y >= top[x] || (y > 57 && abs(x - 9) \u003c= (y - 58) / 6)) (k = 1), (c = [60, 66, 86]), (v = 0.85 + 0.25 * hash(x >> 2, 3));\n    else k = 0;\n    P.BK[i] = k;\n    if (c) for (let j = 0; j \u003c 3; j++) P.BA[i * 3 + j] = c[j] * v;\n  }\n}\n\n// The facade for S storeys: a kind per cell, each window's chance to be lit.\nfunction facade(S) {\n  const p = min(4, 100 / S), BH = round(S * p), BT = BH + 16, n = TW * BT, st = [], chg = [];\n  const A = new Float32Array(n), K = new Uint8Array(n), U = new Float32Array(n), RS = new Int16Array(BT).fill(-1);\n  for (let s = 0; s \u003c= S; s++) st.push(round(s * p));\n  for (let b = 0, s = 0; b \u003c BT; b++) {\n    while (s \u003c S - 1 && st[s + 1] \u003c= b) s++;\n    const r = b - st[s], wr = r === 1 || r === 2;\n    if (b \u003c BH) RS[b] = s;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = b * TW + c, bay = (c - 1) >> 2;\n      let k = 0, a = 0.92 + 0.14 * hash(s * 7 + bay, 11);\n      if (b \u003c BH) {\n        if (c \u003c 22) (k = !r ? 3 : c && c \u003c 21 && ((c - 1) & 3) \u003c 3 && wr ? 2 : 1), (U[j] = hash(s * 13 + bay, 3));\n        else (k = c > 23 && c \u003c 26 && wr ? 5 : 4), (a = c === 22 ? 1.15 : a), (U[j] = hash(s * 17 + c, 9));\n        if (!r) a *= 0.8;\n      } else if (b === BH) k = c \u003c 22 ? 6 : 0;\n      else if (b \u003c= BH + 4 && ((c > 4 && c \u003c 15) || (c > 15 && c \u003c 20 && b \u003c= BH + 3))) (k = 6), (a = 0.82);\n      else if (c === 10) k = b \u003c BT - 1 ? 7 : 8;\n      else if ((b === BH + 9 && c > 7 && c \u003c 13) || (b === BH + 7 && c === 11)) k = 7;\n      (K[j] = k), (A[j] = a);\n    }\n  }\n  for (let s = round(S * 0.78); s >= 2; s -= 3) chg.push(s);\n  Object.assign(P, { S, BH, BT, st, fa: A, fk: K, fu: U, rs: RS, chg: chg.concat([1, 0]), fold: st[round(S * 0.42)], fls: new Float32Array(S), bl: new Uint8Array(S) });\n}\n\nfunction newRound() {\n  Object.assign(P, { cyc: P.cyc + 1, dir: side(), fi: 0, b0: 0, b1: 0, pd1: 0, pc2: 0, a1: 0, a2: 0, bd: [] });\n  P.bl?.fill(0);\n  for (let j = 0; j \u003c 8; j++) P.bd.push([0, 0, 0, 0, rnd(6.28), 7 + rnd(10), 0, rnd(6)]);\n}\n\n// The lower floors give first; the upper block then folds into them.\nconst yS = (s) => G - 1 - (P.st[s] + P.st[s + 1]) / 2;\nconst fall = (tc) => (tc \u003c= 0 ? [0, 0] : [11 * tc * tc, tc > 0.5 ? 6 * (tc - 0.5) ** 2 : 0]);\nconst puff = (x, y, vx, vy, r, g, a, life, rise) => P.np \u003c MP && P.pf.set([x, y, vx, vy, r, r, g, a, 0, life, rise, rnd()], P.np++ * PF);\n// Dust from crushed floors: most climbs, some rolls out along the ground.\nfunction basePuff(kind) {\n  const x = X0 + rnd(TW), out = x - CX, roll = kind \u003c 2 && rnd() \u003c 0.4;\n  puff(x, G - 1 - rnd(4), out * 0.8 + rnd(12) - 6 + (roll ? Math.sign(out || 1) * (10 + rnd(10)) : 0), roll ? -1 - rnd(3) : -5 - rnd(12) - (kind > 1 ? 14 : 0), 3 + rnd(3), 2 + rnd(2.5), 1 + rnd(0.5), roll ? 12 + rnd(5) : 8.5 + rnd(5), roll ? 1 + rnd(3) : 8 + rnd(kind > 1 ? 30 : 24));\n}\n// A charge on storey s: its windows blow out and spit dust.\nfunction fire(s) {\n  const y = yS(s);\n  P.bl[s] = 1;\n  for (let n = 0; n \u003c 10; n++) {\n    const sd = n & 1 ? 1 : -1, ex = sd \u003c 0 ? X0 - 1 : X0 + TW;\n    puff(n \u003c 4 ? ex : X0 + 2 + rnd(TW - 4), y + rnd(2) - 1, sd * (n \u003c 4 ? 10 + rnd(12) : rnd(3)), -rnd(), 1 + rnd(0.8), 1.2 + rnd(), 0.7, 1.6 + rnd(), 0.5);\n  }\n  if (P.fi === 1) for (const b of P.bd) (b[6] = 1), (b[2] = (b[0] - CX) * 2 + rnd(14) - 7 + P.w * 14), (b[3] = -8 - rnd(14));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  P = params.s;\n  const k = input.knobValues || [0, 2, 20, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), S = round(cl(k[2], 20, 30)), w = (P.w = cl(k[3], -1, 1));\n  if (S !== P.S) facade(S);\n  P.rt += rd;\n  if (input.btnPressed?.[0]) P.T \u003c T_CH - 0.7 ? (P.T = T_CH - 0.7) : P.T >= T_TL && (newRound(), (P.T = T_CH - 0.7));\n  if ((P.T += d) >= CYC) newRound(), (P.T -= CYC);\n  const T = P.T, tl = 0.85 * sm(T_TL, T_TL + 1.2, T) * (1 - sm(CYC - 2.5, CYC - 0.4, T)), tc = T - T_FALL, [d1, c2] = T \u003c T_TL ? fall(tc) : [0, 0], cons = min(P.BT, d1 + c2), phM = 10 + S * 0.6;\n  // Time-lapse: a day every 2 s, and the clouds race.\n  const u = (P.he = mix(cl(k[0], 0, 1), 0.5 - 0.5 * cos(PI * (T - T_TL)), tl)) * 3, i = min(2, floor(u));\n  P.L = KEYS[i].map((v, j) => mix(v, KEYS[i + 1][j], u - i));\n  P.co += (w * 2 + tl * (w \u003c 0 ? -24 : 24)) * d;\n\n  // Charges, top to bottom, then the shudder.\n  while (P.fi \u003c P.chg.length && T >= T_CH + P.fi * 0.09 && T \u003c T_TL) fire(P.chg[P.fi++]);\n  P.gfl = 0;\n  P.chg.forEach((s, n) => (P.gfl = max(P.gfl, (P.fls[s] = T >= T_CH + n * 0.09 ? exp(-(T - T_CH - n * 0.09) * 9) : 0))));\n  P.shk = T > T_CH && T \u003c T_FALL + 0.6 ? round((rnd() - 0.5) * 2.6 * (1 - sm(T_FALL, T_FALL + 0.6, T))) : 0;\n\n  // The fall: dust where floors are crushed, at the foot and the fold.\n  if (tc > 0 && T \u003c T_TL) {\n    if (!P.b0) for (let n = (P.b0 = 24); n--; ) basePuff(1);\n    const e1 = max(0, d1 - P.pd1), e2 = max(0, c2 - P.pc2);\n    if (d1 + c2 \u003c P.BT) (P.a1 += e1 * 1.1), (P.a2 += e2 * 0.35);\n    for (; P.a1 >= 1; P.a1--) basePuff(0);\n    for (let sd; P.a2 >= 1; P.a2--) (sd = side()), puff(CX + sd * (8 + rnd(8)), min(G - 2, G - 1 - P.fold + d1), sd * (8 + rnd(14)), -2 - rnd(6), 2 + rnd(1.5), 3 + rnd(3), 0.7, 8 + rnd(4), 4 + rnd(6));\n    if (!P.b1 && cons >= P.BT) for (let n = (P.b1 = 20); n--; ) basePuff(2);\n    (P.pd1 = d1), (P.pc2 = c2);\n  }\n  P.ph = T \u003c T_FALL ? 0 : T \u003c T_TL ? phM * sm(0, 1, cons / P.BT) : phM * (1 - sm(T_TL + 0.5, T_CLR - 0.5, T));\n\n  // Puffs rise, slow, swell and drift, faster aloft.\n  const pf = P.pf, ex = 1 - exp(-0.7 * d), ey = 1 - exp(-0.9 * d);\n  for (let p = 0, q, age; p \u003c P.np; p++) {\n    if ((age = pf[(q = p * PF) + 8] += d) > pf[q + 9]) {\n      if (p-- \u003c --P.np) pf.copyWithin(q, P.np * PF, P.np * PF + PF);\n      continue;\n    }\n    pf[q + 2] += (w * (3 + 9 * (1 - pf[q + 1] / H)) - pf[q + 2]) * ex;\n    pf[q + 3] += (-pf[q + 10] * exp(-age / 4) - pf[q + 3]) * ey;\n    (pf[q] += pf[q + 2] * d), (pf[q + 1] = min(G - 0.35 * pf[q + 4], pf[q + 1] + pf[q + 3] * d)), (pf[q + 4] += (pf[q + 6] * d) / (1 + 0.4 * age));\n  }\n  const fly = (a, g, keep) => a.filter((b) => ((b[3] += g * d), (b[0] += b[2] * d), (b[1] += b[3] * d), keep(b)));\n  // Pigeons circle the roof until the first charge, then scatter.\n  for (const b of P.bd)\n    if (b[6]) fly([b], -4, () => 1), (b[7] += 14 * d);\n    else (b[4] += 0.9 * d), (b[0] = CX + cos(b[4]) * b[5] * 1.3), (b[1] = G - P.BH - 10 + sin(b[4]) * b[5] * 0.35), (b[7] += 9 * d);\n}\n\nconst idx = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] - F[o + j]) * a;\n}\nfunction add(x, y, c, k, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += c[j] * k;\n}\nfunction glow(x, y, c, k, r) {\n  for (let j = -r; j \u003c= r; j++) for (let i = -r; i \u003c= r; i++) add(x + i, y + j, c, k * exp(-(i * i + j * j) / (0.3 * r * r)));\n}\nconst lit = (c, m = 1, s = 0.5, f = 0) => [0, 1, 2].map((j) => c[j] * (L[9 + j] * m + L[12 + j] * s + f));\nfunction line(x0, y0, x1, y1, c) {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c);\n}\nconst fq = (x, y) => P.FL[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)] * L[16];\n\nfunction back() {\n  const { BA, BU, BK, FL, NT, SKY } = P, aw = abs(P.w), sx = 0.6 - 0.3 * aw, sh = 0.85 * P.w, sy = 1 + 0.8 * aw, th = 0.5 + (0.5 - L[23] - 0.15 * aw) * 0.32;\n  const sunV = 280 * sm(0.12, 0.3, P.he) * (1 - sm(0.42, 0.58, P.he)), night = sm(0.78, 1, P.he), fld = L[16], lw = L[15];\n  for (let y = 0; y \u003c H; y++) for (let c = 0, t = min(1, y / 96); c \u003c 3; c++) SKY[y * 3 + c] = mix(mix(L[c], L[3 + c], sm(0, 0.6, t)), L[6 + c], sm(0.4, 1, t) ** 2);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = BK[i], fb = fld * FL[i], so = y * 3;\n    if (!k) {\n      // Round clouds when calm, slanting streaks in wind; sun, moon, stars.\n      const n = NT[((floor(y * sy + 40) & 127) \u003c\u003c 6) | (floor(x * sx + y * sh + P.co) & 63)], cd = max(0, sm(th - 0.06, th + 0.08, n) * (1 - sm(66, 96, y)) * 0.9), lb = cl(0.15 + y / 110 + (n - th) * 2, 0, 1);\n      let sg = sunV > 0 ? sunV * exp(-((x - 9) ** 2 + (y - 60) ** 2) / 12) : 0;\n      if (night > 0) sg += night * (((x - 52) ** 2 + (y - 20) ** 2 \u003c 6) * 220 + (y \u003c 70 && hash(x, y) > 0.985 ? 90 + 60 * sin(P.rt * 3 + x) : 0));\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(SKY[so + c], mix(L[20 + c], L[17 + c], lb), cd) + sg * (1 - 0.15 * c) + (56 + 5 * c) * fb;\n    } else if (k === 3 && BU[i] \u003c lw * 1.1) F.set(WIN, o);\n    else {\n      const m = k === 3 ? 0.25 : 1, f = (y \u003c 84 ? 0.35 : 0.5) * (x \u003c 15 || x > 55 ? 1 : 0.6), gl = k === 3 ? 0.2 : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = k === 1 ? mix(BA[o + c] * L[9 + c], SKY[so + c], 0.55 - y / 400) : SKY[so + c] * gl + BA[o + c] * m * (L[9 + c] + L[12 + c] * f + fb * 0.6);\n    }\n  }\n  // Light masts; chimney smoke bending with the wind.\n  for (const lx of [2, 61]) {\n    for (let y = 82; y \u003c G; y++) put(lx, y, [30, 30, 34]);\n    if (fld > 0.05) put(lx, 82, [255, 250, 230], min(1, fld * 1.5));\n  }\n  const sc = lit([176, 172, 168]), ph = (P.rt * 0.5) % 1;\n  for (let j = 0; j \u003c 12; j++) {\n    const s = j + ph, x = 57.5 + P.w * (s * 2.2 + s * s * 0.14) + sin(P.rt * 0.7 + j) * 0.6, y = 42 - s * 2.4 * (1 - 0.55 * aw), r = 1.4 + s * 0.42, a = 0.45 * (1 - s / 12.5) * min(1, s);\n    for (let v = -ceil(r); v \u003c= r; v++) for (let u = -ceil(r), q; u \u003c= r; u++) if ((q = 1 - (u * u + v * v) / (r * r)) > 0) put(x + u, y + v, sc, a * q);\n  }\n}\n\n// The tower as it stands or falls. During the rebuild it rises in scaffolding.\nfunction tower() {\n  const { fa: A, fk: K, fu: U, rs: RS, FL, SKY, T, BT, BH, fold: F0 } = P, tc = T - T_FALL;\n  if (T >= T_TL && T \u003c T_RISE) return;\n  const reb = T >= T_RISE, built = reb ? BH * sm(T_RISE, T_UP, T) : BT, strip = reb ? BT * (1 - sm(T_UP, CYC - 0.6, T)) : 0, lw = L[15], fld = L[16], tick = floor(T * 20);\n  const [d1, c2] = reb ? [0, 0] : fall(tc), l1 = reb ? 0 : P.dir * 3 * sm(0.1, 1.2, tc), l2 = reb ? 0 : -P.dir * 10 * sm(0.3, 1.6, tc);\n  const scaf = lit([184, 186, 178]), net = lit([64, 124, 104]), slab = lit([130, 126, 118]), mast = lit([120, 124, 132]);\n  for (let y = max(0, G - BT - 1); y \u003c G; y++) {\n    // The block above the fold or the one under it; both shear.\n    let b = G - 1 + d1 + c2 - y, xo, up = 1;\n    if (b >= F0 + c2 && b \u003c BT) xo = l1 + (l2 * (b - F0 - c2)) / (BT - F0);\n    else if ((b = G - 1 + d1 - y) >= 0 && b \u003c F0) (xo = (l1 * b) / F0), (up = 0);\n    else continue;\n    const bi = floor(b), xs = round(xo + P.shk), s = RS[bi], fl = s >= 0 ? P.fls[s] : 0, rag = tc > 0 && !reb && (G - y \u003c 3 || (up && c2 > 0 && b - F0 - c2 \u003c 2));\n    const top = sm(70, 25, y), hy = (y >> 1) * 3, f2 = rag ? 0.55 : 1;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = bi * TW + c, k = K[j], x = X0 + c + xs;\n      if (!k || x \u003c 0 || x >= W || (rag && hash(x * 13 + y, tick) \u003c 0.4)) continue;\n      const o = (y * W + x) * 3, sd = k === 4 || k === 5, fq = FL[y * W + x] * fld;\n      let col = MID;\n      if (reb && (bi \u003c strip || (k > 5 && strip > BH))) {\n        if (bi >= built || k > 5) continue;\n        col = c % 3 === 0 || bi % 3 === 0 ? scaf : hash(c >> 2, bi >> 3) \u003c 0.4 ? net : k === 3 ? slab : hash(c >> 1, s) \u003c 0.12 ? LAMP : DARK;\n      } else if (k === 2 || k === 5) {\n        const v = sd ? 0.65 : 1;\n        if (s >= 0 && P.bl[s]) col = HOLE;\n        else if (U[j] \u003c lw) for (let q = 0, u = (0.7 + 0.3 * sin(U[j] * 60)) * v; q \u003c 3; q++) MID[q] = WARM[q] * u;\n        else for (let q = 0; q \u003c 3; q++) MID[q] = (SKY[hy + q] * 0.45 + L[6 + q] * 0.12 + 76 * fq) * v;\n      } else if (k === 7) col = mast;\n      else if (k === 8) col = (P.rt * 1.5) % 1 \u003c 0.5 ? RED : HOLE;\n      else for (let q = 0, m = sd ? 0.6 : 1, sn = (sd ? 0.06 : 0.55) + top * 0.4; q \u003c 3; q++) MID[q] = CON[q] * A[j] * (L[9 + q] * m + L[12 + q] * sn + fq * 1.6);\n      (F[o] = col[0] * f2 + fl * 300), (F[o + 1] = col[1] * f2 + fl * 250), (F[o + 2] = col[2] * f2 + fl * 170);\n    }\n  }\n  // Each charge lights the air by its floor.\n  for (const s of P.chg) {\n    const fl = P.fls[s], yc = yS(s);\n    if (fl > 0.02) for (let y = -6; y \u003c= 6; y++) for (let x = X0 - 9, dx; x \u003c X0 + TW + 9; x++) if ((dx = x \u003c X0 ? X0 - x : max(0, x - X0 - TW + 1))) add(x, yc + y, [255, 196, 120], fl * exp(-(dx * dx) / 12 - (y * y) / 8));\n  }\n}\n\nfunction pileH(x) {\n  const u = (x - CX) / 22;\n  return abs(u) >= 1 || P.ph \u003c 0.3 ? 0 : P.ph * (1 - u * u) ** 0.8 * (0.8 + 0.4 * vn(x * 0.25, P.cyc * 7)) + (hash(x, P.cyc) - 0.5) * 1.6 * min(1, P.ph / 4);\n}\n// Rubble: broken slabs, gaps, rebar and bits of painted rooms.\nfunction pile() {\n  if (P.ph \u003c 0.3) return;\n  for (let x = CX - 22; x \u003c= CX + 22; x++) {\n    const hp = pileH(x), sn = cl(0.45 - 0.3 * (pileH(x + 1) - pileH(x - 1)), 0, 1);\n    for (let y = round(G - hp), y0 = y; y \u003c G + 3; y++) {\n      const cx = floor((x + (y >> 1) * 1.7) / 3), v = hash(cx, (y >> 1) + P.cyc * 97), c = v > 0.96 ? TILE : v \u003c 0.05 ? BRICK : v > 0.9 ? PALE : CON, o = (y * W + x) * 3, f = fq(x, y);\n      let m = (1 - 0.35 * sm(0, 12, y - y0)) * (c === CON ? (0.65 + 0.45 * v) * (y & 1 ? 0.86 : 1.18) : 1);\n      if (y === y0 && hash(x, 9) \u003c 0.3) m = -1;\n      else if (hash(cx * 7 + x, y * 3 + P.cyc) \u003c 0.1) m *= 0.22;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = m \u003c 0 ? RUST[j] * (L[9 + j] + 0.3) : c[j] * m * (L[9 + j] + L[12 + j] * sn + f);\n    }\n  }\n}\n\n// Two long-reach diggers climb the heap and pick it apart.\nfunction digger(x, f, ph) {\n  const g = round(G - max(0, pileH(x) - 1)), q = fq(x, g) + 0.32, Y = lit(YEL, 1, 0.6, q), Yd = Y.map((v) => v * 0.7), D = lit([70, 68, 66], 1, 0.5, q);\n  for (let i = -4; i \u003c= 4; i++) put(x + i, g - 1, D, i & 1 ? 1 : 0.4), put(x + i, g - 2, D);\n  for (let i = -5; i \u003c= 2; i++) for (let j = 3; j \u003c= 5; j++) put(x + i * f, g - j, i \u003c -3 ? Yd : Y);\n  for (let j = 6; j \u003c= 9; j++) for (let i = 1; i \u003c= 3; i++) put(x + i * f, g - j, i === 2 && j > 6 && j \u003c 9 ? GLASS : Y);\n  const a1 = 1 + 0.3 * sin(ph), bx = x + 2 * f, by = g - 5, ex = bx + f * cos(a1) * 11, ey = by - sin(a1) * 11, a2 = -1.2 + 0.5 * sin(ph + 1.3), kx = ex + f * cos(a2) * 8, ky = ey - sin(a2) * 8;\n  line(bx, by, ex, ey, Y), line(bx - f, by, ex - f, ey, Yd), line(ex, ey, kx, ky, Y);\n  for (let i = 0; i \u003c 2; i++) for (let j = 0; j \u003c 3; j++) put(kx + i * f, ky + j, D);\n  if ((P.rt * 1.6 + f * 0.25) % 1 \u003c 0.5) glow(x + 2 * f, g - 10, AMBER, 0.45, 2);\n}\nfunction machines() {\n  const T = P.T, out = sm(T_CLR - 1, T_CLR + 0.5, T);\n  if (T > T_EX && T \u003c T_CLR + 1)\n    for (const [x0, xa, f, j] of [[-10, CX - 13, 1, 0], [76, CX + 13, -1, 1]])\n      digger(round(mix(mix(x0, xa, sm(T_EX + j, T_EX + 2.5 + j, T)), x0, out)), f, T * (T > T_TL ? 9 : 2.2) + j * 2);\n}\n\n// Fence, mesh, barrier tape; siren lights on two posts.\nfunction fence() {\n  const mc = lit([150, 152, 158]), pc = lit([96, 98, 104]), tape = lit([250, 210, 40], 1, 0.5, 0.15);\n  for (let y = 102; y \u003c 118; y++) for (let x = 0; x \u003c W; x++) x % 12 === 5 || y === 102 ? put(x, y, pc) : ((x + y) % 3 === 0 || (x - y + 300) % 3 === 0) && put(x, y, mc, 0.28);\n  for (let x = 0; x \u003c W; x++) put(x, 107 + round(sin(x * 0.6 + P.rt * 5) * (0.3 + abs(P.w))), (x + 40) % 4 \u003c 2 ? tape : SIL);\n  for (const [x, s] of [[5, 0], [53, 0.5]]) {\n    const on = P.T \u003c T_FALL + 0.8 && (P.rt * 2.5 + s) % 1 \u003c 0.45;\n    put(x, 100, on ? [255, 190, 80] : [90, 50, 20]);\n    if (on) glow(x, 100, AMBER, 0.6, 5);\n  }\n}\n\n// Each puff is a grainy ball lit by sun and sky, laid over the last, so billows keep their edges.\nfunction dust() {\n  const { NT, pf, FL } = P, fld = L[16] * 1.8, gf = P.gfl * 0.6, [L9, L10, L11, L12, L13, L14] = L.slice(9, 15);\n  for (let p = 0; p \u003c P.np; p++) {\n    const q = p * PF, px = pf[q], py = pf[q + 1], r = pf[q + 4], age = pf[q + 8], life = pf[q + 9];\n    const a = pf[q + 7] * sm(0, 0.25, age) * (1 - sm(0.4 * life, life, age)) * (pf[q + 5] / r) ** 0.35;\n    if (a \u003c 0.01) continue;\n    const t = pf[q + 11], ox = (p * 23) & 63, oy = p * 41 + floor(age * 3), ir = 1 / r, pb = 0.85 + 0.3 * hash(p, P.cyc);\n    const [a0, a1, a2] = DUST0.map((v, c) => mix(v, DUST1[c], t) * pb);\n    for (let y = max(0, ceil(py - r)), y1 = min(H - 1, floor(py + r)); y \u003c= y1; y++) {\n      const dy = (y - py) * ir, dy2 = dy * dy, row = y * W, nr = ((y + oy) & 127) \u003c\u003c 6, sh = 0.45 + 0.55 * sm(G, 40, y), sk = 0.8 - 0.25 * dy;\n      for (let x = max(0, ceil(px - r)), x1 = min(W - 1, floor(px + r)); x \u003c= x1; x++) {\n        const dx = (x - px) * ir, d2 = dx * dx + dy2;\n        if (d2 >= 1) continue;\n        const n = NT[nr | ((x + ox) & 63)];\n        let e = 2 - d2 * (0.7 + 2.4 * n);\n        if (e \u003c= 0.02) continue;\n        if (e > 1) e = 1;\n        const k = min(0.95, a * e * e * (3 - 2 * e)), i = row + x, o = i * 3, l = -0.6 * dx - 0.5 * dy + 0.62 * sqrt(1 - d2);\n        const gr = 0.4 + 1.2 * n, sun = (0.25 + 0.8 * (l > 0 ? l : 0)) * sh * gr, sky = sk * (0.55 + 0.45 * gr), fl = FL[i] * fld + gf;\n        F[o] += (a0 * (L9 * sky + L12 * sun + fl) - F[o]) * k;\n        F[o + 1] += (a1 * (L10 * sky + L13 * sun + fl) - F[o + 1]) * k;\n        F[o + 2] += (a2 * (L11 * sky + L14 * sun + fl) - F[o + 2]) * k;\n      }\n    }\n  }\n}\n\n// The crowd: coats, marshals in hi-vis, phones up once the siren goes.\nfunction people() {\n  const T = P.T, ph = T > T_CH - 1.5 && T \u003c T_TL ? 0.6 : 0.12, vest = lit(COATS[4], 1, 0.5, 0.2), strip = lit([220, 220, 210], 1, 0.5, 0.3);\n  for (const [x, hy, w, r1, , cc] of P.cr) {\n    const hw = w >> 1, coat = lit(COATS[cc & 3], 0.5, 0.25, 0.1);\n    for (let y = hy + 3, e; y \u003c H; y++) for (let i = -hw + (e = y === hy + 3); i \u003c= hw - !(w & 1) - e; i++) put(x + i, y, cc > 3 && y > hy + 3 && y \u003c hy + 9 ? (y === hy + 6 ? strip : vest) : coat);\n    for (let j = 0; j \u003c 3; j++) for (let i = -1; i \u003c= 1; i++) if (j || !i) put(x + i, hy + j, SIL);\n    if (r1 \u003c ph) {\n      const sc = T > T_CH && T \u003c 11 && hash(floor(P.rt * 30), x) \u003c 0.015 ? [255, 255, 255] : PHONE;\n      for (let j = -2; j \u003c 3; j++) put(x + 2, hy + j, j \u003c 0 ? sc : SIL);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  P = params.s;\n  if (!P || !P.L || !P.fk) return;\n  (F = P.F), (L = P.L);\n  back();\n  tower();\n  pile();\n  machines();\n  fence();\n  const wl = lit([170, 190, 210], 1, 0.5, 0.2), bc = L[16] > 0.7 ? [140, 140, 150] : [24, 24, 30];\n  // The water cannon on the right roof wets the site.\n  for (let j = 0, t; j \u003c 60 && P.T > 1 && P.T \u003c T_TL; j++) (t = ((j * 0.618 + P.rt * 0.8) % 1) * 1.5), add(52 + (P.w * 6 - 15 - 6 * hash(j, 5)) * t, 86 - (10 + 5 * hash(j, 6)) * t + 13 * t * t, wl, 0.2);\n  dust();\n  for (const [x, y, , , , , , fp] of P.bd) for (let i = -1, up = sin(fp) > 0 ? -1 : 0; i \u003c 2; i++) put(x + i, y + (i ? up : 0), bc);\n  people();\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, cl(F[o], 0, 255) | 0, cl(F[o + 1], 0, 255) | 0, cl(F[o + 2], 0, 255) | 0);\n}\n","layer":{"id":"layer-implosion","type":"code","name":"implosion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Implosion\n// Family:  construction\n// Idea:    An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the explosive demolitions of 1960s concrete tower blocks\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1\n//\n// Knob 1: Light. Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust.\n// Knob 2: Speed. At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower.\n// Knob 3: Storeys. Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel.\n// Knob 4: Wind. Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it.\n// Buttons: K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = (a = 1) => Math.random() * a;\nconst side = () => (rnd() \u003c 0.5 ? -1 : 1);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every cx by cy cells.\nfunction vn(x, y, cx = 1e4, cy = 1e4) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (i, j) => hash(((i % cx) + cx) % cx, ((j % cy) + cy) % cy);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + h(xi + 1, yi + 1)) * su * sv;\n}\n\n// Ground row; the tower's front face from x 19 (22 wide) and side face (6).\nconst G = 110, X0 = 19, TW = 28, CX = 33;\n// One round at Speed 2, in seconds.\nconst T_CH = 2.4, T_FALL = 3, T_EX = 11, T_TL = 19, T_CLR = 25, T_RISE = 26.5, T_UP = 32.5, CYC = 36;\nconst MP = 240, PF = 12;\n// Dawn, morning, overcast, night: sky top, mid, horizon; ambient; sun; lit windows; floods; cloud lit, dark; cover.\nconst KEYS = [\n  [16, 30, 86, 52, 84, 156, 214, 146, 150, 0.4, 0.45, 0.66, 0.55, 0.32, 0.3, 0.34, 0.35, 236, 156, 156, 58, 60, 108, 0.5],\n  [46, 108, 206, 110, 164, 228, 236, 206, 160, 0.55, 0.58, 0.68, 1, 0.86, 0.62, 0.06, 0, 255, 244, 226, 150, 160, 190, 0.38],\n  [96, 102, 112, 136, 140, 146, 170, 170, 168, 0.66, 0.66, 0.68, 0.08, 0.08, 0.08, 0.12, 0.12, 190, 192, 196, 100, 104, 112, 0.9],\n  [3, 5, 18, 8, 14, 38, 34, 32, 58, 0.14, 0.15, 0.24, 0, 0, 0, 0.5, 1, 40, 38, 58, 12, 14, 28, 0.45],\n];\nconst TILE = [80, 110, 170], BRICK = [170, 84, 56], PALE = [190, 176, 150], RUST = [150, 80, 50], AMBER = [255, 150, 30];\nconst COATS = [[30, 34, 56], [56, 30, 36], [34, 46, 34], [50, 44, 34], [250, 120, 20]], SIL = [12, 12, 16], PHONE = [150, 180, 240];\nconst WIN = [204, 150, 83], GLASS = [60, 84, 110], MID = [0, 0, 0], LAMP = [200, 190, 150], DARK = [30, 28, 28], HOLE = [14, 12, 12], RED = [255, 40, 30];\nconst CON = [160, 154, 144], WARM = [255, 188, 104], YEL = [242, 182, 32], DUST0 = [150, 147, 142], DUST1 = [190, 164, 120];\nlet F, L, P;\n\nexport function setup(params) {\n  const f = (n) => new Float32Array(n);\n  P = params.s = { F: f(N * 3), NT: f(N), BA: f(N * 3), BU: f(N), BK: new Uint8Array(N), FL: f(N), SKY: f(H * 3), pf: f(MP * PF), np: 0, cr: [], T: 0, rt: 0, S: 0, cyc: 0, co: 0, w: 0 };\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.NT[i] = 0.5 * vn(x / 16, y / 16, 4, 8) + 0.3 * vn(x / 8, y / 8, 8, 16) + 0.2 * vn(x / 4, y / 4, 16, 32);\n    // Two floodlight masts by the fence aim up the tower.\n    for (const lx of [2, 61]) {\n      const dx = x - lx, dy = y - 82, dd = sqrt(dx * dx + dy * dy) + 0.5, ax = CX - lx, c = (dx * ax - dy * 32) / (dd * sqrt(ax * ax + 1024));\n      P.FL[i] += exp(-(1 - c) * 32) / (1 + dd / 40) + 0.9 * exp((-dd * dd) / 5);\n    }\n  }\n  scenery();\n  for (let x = 2; x \u003c 63; x += 3 + floor(rnd(3))) if (rnd() \u003c 0.85) P.cr.push([x, 111 + floor(rnd(4)), 4 + floor(rnd(3)), rnd(), rnd(), P.cr.length % 7 === 3 ? 4 : floor(rnd(4))]);\n  newRound();\n}\n\n// Street, site, two low blocks, far skyline and spire, chimney, a water cannon on a roof.\nfunction scenery() {\n  const top = [];\n  for (let x = 0; x \u003c W; ) for (let j = 0, w = 3 + rnd(6), t = 72 + rnd(16); j \u003c w && x \u003c W; j++) top[x++] = t;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, hh = hash(x, y), q = (x - 50) & 3;\n    let k = 2, c = 0, v = 1;\n    if (y > 118) (c = [58, 58, 64]), (v = 0.9 + 0.2 * hh);\n    else if (y === 118) c = [120, 118, 112];\n    else if (y >= G) (c = [118, 104, 86]), (v = 0.8 + 0.35 * hh);\n    else if (x > 50 && x \u003c 56 && y > 84 && y \u003c 90) c = abs(x - 53) + abs(y - 86.5) \u003c 1.6 ? [40, 44, 50] : [116, 120, 128];\n    else if (x \u003c 15 && y > 81) {\n      (c = y \u003c 84 ? [170, 160, 150] : [148, 92, 70]), (v = y \u003c 84 ? 1 : 0.88 + 0.2 * hash(x >> 1, y));\n      if (y > 85 && y \u003c 106 && x & 3 && (x & 3) \u003c 3 && (y - 86) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 48 && y > 89) {\n      (c = y \u003c 92 ? [190, 182, 170] : [176, 162, 138]), (v = 0.9 + 0.15 * hash(x, y >> 2));\n      if (y > 93 && y \u003c 108 && q && q \u003c 3 && (y - 94) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 55 && x \u003c 60 && y > 43) c = y === 44 ? [180, 172, 160] : y > 46 && y \u003c 54 && y % 5 > 1 && y % 5 \u003c 4 ? [176, 70, 56] : [150, 138, 124];\n    else if (y >= top[x] || (y > 57 && abs(x - 9) \u003c= (y - 58) / 6)) (k = 1), (c = [60, 66, 86]), (v = 0.85 + 0.25 * hash(x >> 2, 3));\n    else k = 0;\n    P.BK[i] = k;\n    if (c) for (let j = 0; j \u003c 3; j++) P.BA[i * 3 + j] = c[j] * v;\n  }\n}\n\n// The facade for S storeys: a kind per cell, each window's chance to be lit.\nfunction facade(S) {\n  const p = min(4, 100 / S), BH = round(S * p), BT = BH + 16, n = TW * BT, st = [], chg = [];\n  const A = new Float32Array(n), K = new Uint8Array(n), U = new Float32Array(n), RS = new Int16Array(BT).fill(-1);\n  for (let s = 0; s \u003c= S; s++) st.push(round(s * p));\n  for (let b = 0, s = 0; b \u003c BT; b++) {\n    while (s \u003c S - 1 && st[s + 1] \u003c= b) s++;\n    const r = b - st[s], wr = r === 1 || r === 2;\n    if (b \u003c BH) RS[b] = s;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = b * TW + c, bay = (c - 1) >> 2;\n      let k = 0, a = 0.92 + 0.14 * hash(s * 7 + bay, 11);\n      if (b \u003c BH) {\n        if (c \u003c 22) (k = !r ? 3 : c && c \u003c 21 && ((c - 1) & 3) \u003c 3 && wr ? 2 : 1), (U[j] = hash(s * 13 + bay, 3));\n        else (k = c > 23 && c \u003c 26 && wr ? 5 : 4), (a = c === 22 ? 1.15 : a), (U[j] = hash(s * 17 + c, 9));\n        if (!r) a *= 0.8;\n      } else if (b === BH) k = c \u003c 22 ? 6 : 0;\n      else if (b \u003c= BH + 4 && ((c > 4 && c \u003c 15) || (c > 15 && c \u003c 20 && b \u003c= BH + 3))) (k = 6), (a = 0.82);\n      else if (c === 10) k = b \u003c BT - 1 ? 7 : 8;\n      else if ((b === BH + 9 && c > 7 && c \u003c 13) || (b === BH + 7 && c === 11)) k = 7;\n      (K[j] = k), (A[j] = a);\n    }\n  }\n  for (let s = round(S * 0.78); s >= 2; s -= 3) chg.push(s);\n  Object.assign(P, { S, BH, BT, st, fa: A, fk: K, fu: U, rs: RS, chg: chg.concat([1, 0]), fold: st[round(S * 0.42)], fls: new Float32Array(S), bl: new Uint8Array(S) });\n}\n\nfunction newRound() {\n  Object.assign(P, { cyc: P.cyc + 1, dir: side(), fi: 0, b0: 0, b1: 0, pd1: 0, pc2: 0, a1: 0, a2: 0, bd: [] });\n  P.bl?.fill(0);\n  for (let j = 0; j \u003c 8; j++) P.bd.push([0, 0, 0, 0, rnd(6.28), 7 + rnd(10), 0, rnd(6)]);\n}\n\n// The lower floors give first; the upper block then folds into them.\nconst yS = (s) => G - 1 - (P.st[s] + P.st[s + 1]) / 2;\nconst fall = (tc) => (tc \u003c= 0 ? [0, 0] : [11 * tc * tc, tc > 0.5 ? 6 * (tc - 0.5) ** 2 : 0]);\nconst puff = (x, y, vx, vy, r, g, a, life, rise) => P.np \u003c MP && P.pf.set([x, y, vx, vy, r, r, g, a, 0, life, rise, rnd()], P.np++ * PF);\n// Dust from crushed floors: most climbs, some rolls out along the ground.\nfunction basePuff(kind) {\n  const x = X0 + rnd(TW), out = x - CX, roll = kind \u003c 2 && rnd() \u003c 0.4;\n  puff(x, G - 1 - rnd(4), out * 0.8 + rnd(12) - 6 + (roll ? Math.sign(out || 1) * (10 + rnd(10)) : 0), roll ? -1 - rnd(3) : -5 - rnd(12) - (kind > 1 ? 14 : 0), 3 + rnd(3), 2 + rnd(2.5), 1 + rnd(0.5), roll ? 12 + rnd(5) : 8.5 + rnd(5), roll ? 1 + rnd(3) : 8 + rnd(kind > 1 ? 30 : 24));\n}\n// A charge on storey s: its windows blow out and spit dust.\nfunction fire(s) {\n  const y = yS(s);\n  P.bl[s] = 1;\n  for (let n = 0; n \u003c 10; n++) {\n    const sd = n & 1 ? 1 : -1, ex = sd \u003c 0 ? X0 - 1 : X0 + TW;\n    puff(n \u003c 4 ? ex : X0 + 2 + rnd(TW - 4), y + rnd(2) - 1, sd * (n \u003c 4 ? 10 + rnd(12) : rnd(3)), -rnd(), 1 + rnd(0.8), 1.2 + rnd(), 0.7, 1.6 + rnd(), 0.5);\n  }\n  if (P.fi === 1) for (const b of P.bd) (b[6] = 1), (b[2] = (b[0] - CX) * 2 + rnd(14) - 7 + P.w * 14), (b[3] = -8 - rnd(14));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  P = params.s;\n  const k = input.knobValues || [0, 2, 20, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), S = round(cl(k[2], 20, 30)), w = (P.w = cl(k[3], -1, 1));\n  if (S !== P.S) facade(S);\n  P.rt += rd;\n  if (input.btnPressed?.[0]) P.T \u003c T_CH - 0.7 ? (P.T = T_CH - 0.7) : P.T >= T_TL && (newRound(), (P.T = T_CH - 0.7));\n  if ((P.T += d) >= CYC) newRound(), (P.T -= CYC);\n  const T = P.T, tl = 0.85 * sm(T_TL, T_TL + 1.2, T) * (1 - sm(CYC - 2.5, CYC - 0.4, T)), tc = T - T_FALL, [d1, c2] = T \u003c T_TL ? fall(tc) : [0, 0], cons = min(P.BT, d1 + c2), phM = 10 + S * 0.6;\n  // Time-lapse: a day every 2 s, and the clouds race.\n  const u = (P.he = mix(cl(k[0], 0, 1), 0.5 - 0.5 * cos(PI * (T - T_TL)), tl)) * 3, i = min(2, floor(u));\n  P.L = KEYS[i].map((v, j) => mix(v, KEYS[i + 1][j], u - i));\n  P.co += (w * 2 + tl * (w \u003c 0 ? -24 : 24)) * d;\n\n  // Charges, top to bottom, then the shudder.\n  while (P.fi \u003c P.chg.length && T >= T_CH + P.fi * 0.09 && T \u003c T_TL) fire(P.chg[P.fi++]);\n  P.gfl = 0;\n  P.chg.forEach((s, n) => (P.gfl = max(P.gfl, (P.fls[s] = T >= T_CH + n * 0.09 ? exp(-(T - T_CH - n * 0.09) * 9) : 0))));\n  P.shk = T > T_CH && T \u003c T_FALL + 0.6 ? round((rnd() - 0.5) * 2.6 * (1 - sm(T_FALL, T_FALL + 0.6, T))) : 0;\n\n  // The fall: dust where floors are crushed, at the foot and the fold.\n  if (tc > 0 && T \u003c T_TL) {\n    if (!P.b0) for (let n = (P.b0 = 24); n--; ) basePuff(1);\n    const e1 = max(0, d1 - P.pd1), e2 = max(0, c2 - P.pc2);\n    if (d1 + c2 \u003c P.BT) (P.a1 += e1 * 1.1), (P.a2 += e2 * 0.35);\n    for (; P.a1 >= 1; P.a1--) basePuff(0);\n    for (let sd; P.a2 >= 1; P.a2--) (sd = side()), puff(CX + sd * (8 + rnd(8)), min(G - 2, G - 1 - P.fold + d1), sd * (8 + rnd(14)), -2 - rnd(6), 2 + rnd(1.5), 3 + rnd(3), 0.7, 8 + rnd(4), 4 + rnd(6));\n    if (!P.b1 && cons >= P.BT) for (let n = (P.b1 = 20); n--; ) basePuff(2);\n    (P.pd1 = d1), (P.pc2 = c2);\n  }\n  P.ph = T \u003c T_FALL ? 0 : T \u003c T_TL ? phM * sm(0, 1, cons / P.BT) : phM * (1 - sm(T_TL + 0.5, T_CLR - 0.5, T));\n\n  // Puffs rise, slow, swell and drift, faster aloft.\n  const pf = P.pf, ex = 1 - exp(-0.7 * d), ey = 1 - exp(-0.9 * d);\n  for (let p = 0, q, age; p \u003c P.np; p++) {\n    if ((age = pf[(q = p * PF) + 8] += d) > pf[q + 9]) {\n      if (p-- \u003c --P.np) pf.copyWithin(q, P.np * PF, P.np * PF + PF);\n      continue;\n    }\n    pf[q + 2] += (w * (3 + 9 * (1 - pf[q + 1] / H)) - pf[q + 2]) * ex;\n    pf[q + 3] += (-pf[q + 10] * exp(-age / 4) - pf[q + 3]) * ey;\n    (pf[q] += pf[q + 2] * d), (pf[q + 1] = min(G - 0.35 * pf[q + 4], pf[q + 1] + pf[q + 3] * d)), (pf[q + 4] += (pf[q + 6] * d) / (1 + 0.4 * age));\n  }\n  const fly = (a, g, keep) => a.filter((b) => ((b[3] += g * d), (b[0] += b[2] * d), (b[1] += b[3] * d), keep(b)));\n  // Pigeons circle the roof until the first charge, then scatter.\n  for (const b of P.bd)\n    if (b[6]) fly([b], -4, () => 1), (b[7] += 14 * d);\n    else (b[4] += 0.9 * d), (b[0] = CX + cos(b[4]) * b[5] * 1.3), (b[1] = G - P.BH - 10 + sin(b[4]) * b[5] * 0.35), (b[7] += 9 * d);\n}\n\nconst idx = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] - F[o + j]) * a;\n}\nfunction add(x, y, c, k, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += c[j] * k;\n}\nfunction glow(x, y, c, k, r) {\n  for (let j = -r; j \u003c= r; j++) for (let i = -r; i \u003c= r; i++) add(x + i, y + j, c, k * exp(-(i * i + j * j) / (0.3 * r * r)));\n}\nconst lit = (c, m = 1, s = 0.5, f = 0) => [0, 1, 2].map((j) => c[j] * (L[9 + j] * m + L[12 + j] * s + f));\nfunction line(x0, y0, x1, y1, c) {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c);\n}\nconst fq = (x, y) => P.FL[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)] * L[16];\n\nfunction back() {\n  const { BA, BU, BK, FL, NT, SKY } = P, aw = abs(P.w), sx = 0.6 - 0.3 * aw, sh = 0.85 * P.w, sy = 1 + 0.8 * aw, th = 0.5 + (0.5 - L[23] - 0.15 * aw) * 0.32;\n  const sunV = 280 * sm(0.12, 0.3, P.he) * (1 - sm(0.42, 0.58, P.he)), night = sm(0.78, 1, P.he), fld = L[16], lw = L[15];\n  for (let y = 0; y \u003c H; y++) for (let c = 0, t = min(1, y / 96); c \u003c 3; c++) SKY[y * 3 + c] = mix(mix(L[c], L[3 + c], sm(0, 0.6, t)), L[6 + c], sm(0.4, 1, t) ** 2);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = BK[i], fb = fld * FL[i], so = y * 3;\n    if (!k) {\n      // Round clouds when calm, slanting streaks in wind; sun, moon, stars.\n      const n = NT[((floor(y * sy + 40) & 127) \u003c\u003c 6) | (floor(x * sx + y * sh + P.co) & 63)], cd = max(0, sm(th - 0.06, th + 0.08, n) * (1 - sm(66, 96, y)) * 0.9), lb = cl(0.15 + y / 110 + (n - th) * 2, 0, 1);\n      let sg = sunV > 0 ? sunV * exp(-((x - 9) ** 2 + (y - 60) ** 2) / 12) : 0;\n      if (night > 0) sg += night * (((x - 52) ** 2 + (y - 20) ** 2 \u003c 6) * 220 + (y \u003c 70 && hash(x, y) > 0.985 ? 90 + 60 * sin(P.rt * 3 + x) : 0));\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(SKY[so + c], mix(L[20 + c], L[17 + c], lb), cd) + sg * (1 - 0.15 * c) + (56 + 5 * c) * fb;\n    } else if (k === 3 && BU[i] \u003c lw * 1.1) F.set(WIN, o);\n    else {\n      const m = k === 3 ? 0.25 : 1, f = (y \u003c 84 ? 0.35 : 0.5) * (x \u003c 15 || x > 55 ? 1 : 0.6), gl = k === 3 ? 0.2 : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = k === 1 ? mix(BA[o + c] * L[9 + c], SKY[so + c], 0.55 - y / 400) : SKY[so + c] * gl + BA[o + c] * m * (L[9 + c] + L[12 + c] * f + fb * 0.6);\n    }\n  }\n  // Light masts; chimney smoke bending with the wind.\n  for (const lx of [2, 61]) {\n    for (let y = 82; y \u003c G; y++) put(lx, y, [30, 30, 34]);\n    if (fld > 0.05) put(lx, 82, [255, 250, 230], min(1, fld * 1.5));\n  }\n  const sc = lit([176, 172, 168]), ph = (P.rt * 0.5) % 1;\n  for (let j = 0; j \u003c 12; j++) {\n    const s = j + ph, x = 57.5 + P.w * (s * 2.2 + s * s * 0.14) + sin(P.rt * 0.7 + j) * 0.6, y = 42 - s * 2.4 * (1 - 0.55 * aw), r = 1.4 + s * 0.42, a = 0.45 * (1 - s / 12.5) * min(1, s);\n    for (let v = -ceil(r); v \u003c= r; v++) for (let u = -ceil(r), q; u \u003c= r; u++) if ((q = 1 - (u * u + v * v) / (r * r)) > 0) put(x + u, y + v, sc, a * q);\n  }\n}\n\n// The tower as it stands or falls. During the rebuild it rises in scaffolding.\nfunction tower() {\n  const { fa: A, fk: K, fu: U, rs: RS, FL, SKY, T, BT, BH, fold: F0 } = P, tc = T - T_FALL;\n  if (T >= T_TL && T \u003c T_RISE) return;\n  const reb = T >= T_RISE, built = reb ? BH * sm(T_RISE, T_UP, T) : BT, strip = reb ? BT * (1 - sm(T_UP, CYC - 0.6, T)) : 0, lw = L[15], fld = L[16], tick = floor(T * 20);\n  const [d1, c2] = reb ? [0, 0] : fall(tc), l1 = reb ? 0 : P.dir * 3 * sm(0.1, 1.2, tc), l2 = reb ? 0 : -P.dir * 10 * sm(0.3, 1.6, tc);\n  const scaf = lit([184, 186, 178]), net = lit([64, 124, 104]), slab = lit([130, 126, 118]), mast = lit([120, 124, 132]);\n  for (let y = max(0, G - BT - 1); y \u003c G; y++) {\n    // The block above the fold or the one under it; both shear.\n    let b = G - 1 + d1 + c2 - y, xo, up = 1;\n    if (b >= F0 + c2 && b \u003c BT) xo = l1 + (l2 * (b - F0 - c2)) / (BT - F0);\n    else if ((b = G - 1 + d1 - y) >= 0 && b \u003c F0) (xo = (l1 * b) / F0), (up = 0);\n    else continue;\n    const bi = floor(b), xs = round(xo + P.shk), s = RS[bi], fl = s >= 0 ? P.fls[s] : 0, rag = tc > 0 && !reb && (G - y \u003c 3 || (up && c2 > 0 && b - F0 - c2 \u003c 2));\n    const top = sm(70, 25, y), hy = (y >> 1) * 3, f2 = rag ? 0.55 : 1;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = bi * TW + c, k = K[j], x = X0 + c + xs;\n      if (!k || x \u003c 0 || x >= W || (rag && hash(x * 13 + y, tick) \u003c 0.4)) continue;\n      const o = (y * W + x) * 3, sd = k === 4 || k === 5, fq = FL[y * W + x] * fld;\n      let col = MID;\n      if (reb && (bi \u003c strip || (k > 5 && strip > BH))) {\n        if (bi >= built || k > 5) continue;\n        col = c % 3 === 0 || bi % 3 === 0 ? scaf : hash(c >> 2, bi >> 3) \u003c 0.4 ? net : k === 3 ? slab : hash(c >> 1, s) \u003c 0.12 ? LAMP : DARK;\n      } else if (k === 2 || k === 5) {\n        const v = sd ? 0.65 : 1;\n        if (s >= 0 && P.bl[s]) col = HOLE;\n        else if (U[j] \u003c lw) for (let q = 0, u = (0.7 + 0.3 * sin(U[j] * 60)) * v; q \u003c 3; q++) MID[q] = WARM[q] * u;\n        else for (let q = 0; q \u003c 3; q++) MID[q] = (SKY[hy + q] * 0.45 + L[6 + q] * 0.12 + 76 * fq) * v;\n      } else if (k === 7) col = mast;\n      else if (k === 8) col = (P.rt * 1.5) % 1 \u003c 0.5 ? RED : HOLE;\n      else for (let q = 0, m = sd ? 0.6 : 1, sn = (sd ? 0.06 : 0.55) + top * 0.4; q \u003c 3; q++) MID[q] = CON[q] * A[j] * (L[9 + q] * m + L[12 + q] * sn + fq * 1.6);\n      (F[o] = col[0] * f2 + fl * 300), (F[o + 1] = col[1] * f2 + fl * 250), (F[o + 2] = col[2] * f2 + fl * 170);\n    }\n  }\n  // Each charge lights the air by its floor.\n  for (const s of P.chg) {\n    const fl = P.fls[s], yc = yS(s);\n    if (fl > 0.02) for (let y = -6; y \u003c= 6; y++) for (let x = X0 - 9, dx; x \u003c X0 + TW + 9; x++) if ((dx = x \u003c X0 ? X0 - x : max(0, x - X0 - TW + 1))) add(x, yc + y, [255, 196, 120], fl * exp(-(dx * dx) / 12 - (y * y) / 8));\n  }\n}\n\nfunction pileH(x) {\n  const u = (x - CX) / 22;\n  return abs(u) >= 1 || P.ph \u003c 0.3 ? 0 : P.ph * (1 - u * u) ** 0.8 * (0.8 + 0.4 * vn(x * 0.25, P.cyc * 7)) + (hash(x, P.cyc) - 0.5) * 1.6 * min(1, P.ph / 4);\n}\n// Rubble: broken slabs, gaps, rebar and bits of painted rooms.\nfunction pile() {\n  if (P.ph \u003c 0.3) return;\n  for (let x = CX - 22; x \u003c= CX + 22; x++) {\n    const hp = pileH(x), sn = cl(0.45 - 0.3 * (pileH(x + 1) - pileH(x - 1)), 0, 1);\n    for (let y = round(G - hp), y0 = y; y \u003c G + 3; y++) {\n      const cx = floor((x + (y >> 1) * 1.7) / 3), v = hash(cx, (y >> 1) + P.cyc * 97), c = v > 0.96 ? TILE : v \u003c 0.05 ? BRICK : v > 0.9 ? PALE : CON, o = (y * W + x) * 3, f = fq(x, y);\n      let m = (1 - 0.35 * sm(0, 12, y - y0)) * (c === CON ? (0.65 + 0.45 * v) * (y & 1 ? 0.86 : 1.18) : 1);\n      if (y === y0 && hash(x, 9) \u003c 0.3) m = -1;\n      else if (hash(cx * 7 + x, y * 3 + P.cyc) \u003c 0.1) m *= 0.22;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = m \u003c 0 ? RUST[j] * (L[9 + j] + 0.3) : c[j] * m * (L[9 + j] + L[12 + j] * sn + f);\n    }\n  }\n}\n\n// Two long-reach diggers climb the heap and pick it apart.\nfunction digger(x, f, ph) {\n  const g = round(G - max(0, pileH(x) - 1)), q = fq(x, g) + 0.32, Y = lit(YEL, 1, 0.6, q), Yd = Y.map((v) => v * 0.7), D = lit([70, 68, 66], 1, 0.5, q);\n  for (let i = -4; i \u003c= 4; i++) put(x + i, g - 1, D, i & 1 ? 1 : 0.4), put(x + i, g - 2, D);\n  for (let i = -5; i \u003c= 2; i++) for (let j = 3; j \u003c= 5; j++) put(x + i * f, g - j, i \u003c -3 ? Yd : Y);\n  for (let j = 6; j \u003c= 9; j++) for (let i = 1; i \u003c= 3; i++) put(x + i * f, g - j, i === 2 && j > 6 && j \u003c 9 ? GLASS : Y);\n  const a1 = 1 + 0.3 * sin(ph), bx = x + 2 * f, by = g - 5, ex = bx + f * cos(a1) * 11, ey = by - sin(a1) * 11, a2 = -1.2 + 0.5 * sin(ph + 1.3), kx = ex + f * cos(a2) * 8, ky = ey - sin(a2) * 8;\n  line(bx, by, ex, ey, Y), line(bx - f, by, ex - f, ey, Yd), line(ex, ey, kx, ky, Y);\n  for (let i = 0; i \u003c 2; i++) for (let j = 0; j \u003c 3; j++) put(kx + i * f, ky + j, D);\n  if ((P.rt * 1.6 + f * 0.25) % 1 \u003c 0.5) glow(x + 2 * f, g - 10, AMBER, 0.45, 2);\n}\nfunction machines() {\n  const T = P.T, out = sm(T_CLR - 1, T_CLR + 0.5, T);\n  if (T > T_EX && T \u003c T_CLR + 1)\n    for (const [x0, xa, f, j] of [[-10, CX - 13, 1, 0], [76, CX + 13, -1, 1]])\n      digger(round(mix(mix(x0, xa, sm(T_EX + j, T_EX + 2.5 + j, T)), x0, out)), f, T * (T > T_TL ? 9 : 2.2) + j * 2);\n}\n\n// Fence, mesh, barrier tape; siren lights on two posts.\nfunction fence() {\n  const mc = lit([150, 152, 158]), pc = lit([96, 98, 104]), tape = lit([250, 210, 40], 1, 0.5, 0.15);\n  for (let y = 102; y \u003c 118; y++) for (let x = 0; x \u003c W; x++) x % 12 === 5 || y === 102 ? put(x, y, pc) : ((x + y) % 3 === 0 || (x - y + 300) % 3 === 0) && put(x, y, mc, 0.28);\n  for (let x = 0; x \u003c W; x++) put(x, 107 + round(sin(x * 0.6 + P.rt * 5) * (0.3 + abs(P.w))), (x + 40) % 4 \u003c 2 ? tape : SIL);\n  for (const [x, s] of [[5, 0], [53, 0.5]]) {\n    const on = P.T \u003c T_FALL + 0.8 && (P.rt * 2.5 + s) % 1 \u003c 0.45;\n    put(x, 100, on ? [255, 190, 80] : [90, 50, 20]);\n    if (on) glow(x, 100, AMBER, 0.6, 5);\n  }\n}\n\n// Each puff is a grainy ball lit by sun and sky, laid over the last, so billows keep their edges.\nfunction dust() {\n  const { NT, pf, FL } = P, fld = L[16] * 1.8, gf = P.gfl * 0.6, [L9, L10, L11, L12, L13, L14] = L.slice(9, 15);\n  for (let p = 0; p \u003c P.np; p++) {\n    const q = p * PF, px = pf[q], py = pf[q + 1], r = pf[q + 4], age = pf[q + 8], life = pf[q + 9];\n    const a = pf[q + 7] * sm(0, 0.25, age) * (1 - sm(0.4 * life, life, age)) * (pf[q + 5] / r) ** 0.35;\n    if (a \u003c 0.01) continue;\n    const t = pf[q + 11], ox = (p * 23) & 63, oy = p * 41 + floor(age * 3), ir = 1 / r, pb = 0.85 + 0.3 * hash(p, P.cyc);\n    const [a0, a1, a2] = DUST0.map((v, c) => mix(v, DUST1[c], t) * pb);\n    for (let y = max(0, ceil(py - r)), y1 = min(H - 1, floor(py + r)); y \u003c= y1; y++) {\n      const dy = (y - py) * ir, dy2 = dy * dy, row = y * W, nr = ((y + oy) & 127) \u003c\u003c 6, sh = 0.45 + 0.55 * sm(G, 40, y), sk = 0.8 - 0.25 * dy;\n      for (let x = max(0, ceil(px - r)), x1 = min(W - 1, floor(px + r)); x \u003c= x1; x++) {\n        const dx = (x - px) * ir, d2 = dx * dx + dy2;\n        if (d2 >= 1) continue;\n        const n = NT[nr | ((x + ox) & 63)];\n        let e = 2 - d2 * (0.7 + 2.4 * n);\n        if (e \u003c= 0.02) continue;\n        if (e > 1) e = 1;\n        const k = min(0.95, a * e * e * (3 - 2 * e)), i = row + x, o = i * 3, l = -0.6 * dx - 0.5 * dy + 0.62 * sqrt(1 - d2);\n        const gr = 0.4 + 1.2 * n, sun = (0.25 + 0.8 * (l > 0 ? l : 0)) * sh * gr, sky = sk * (0.55 + 0.45 * gr), fl = FL[i] * fld + gf;\n        F[o] += (a0 * (L9 * sky + L12 * sun + fl) - F[o]) * k;\n        F[o + 1] += (a1 * (L10 * sky + L13 * sun + fl) - F[o + 1]) * k;\n        F[o + 2] += (a2 * (L11 * sky + L14 * sun + fl) - F[o + 2]) * k;\n      }\n    }\n  }\n}\n\n// The crowd: coats, marshals in hi-vis, phones up once the siren goes.\nfunction people() {\n  const T = P.T, ph = T > T_CH - 1.5 && T \u003c T_TL ? 0.6 : 0.12, vest = lit(COATS[4], 1, 0.5, 0.2), strip = lit([220, 220, 210], 1, 0.5, 0.3);\n  for (const [x, hy, w, r1, , cc] of P.cr) {\n    const hw = w >> 1, coat = lit(COATS[cc & 3], 0.5, 0.25, 0.1);\n    for (let y = hy + 3, e; y \u003c H; y++) for (let i = -hw + (e = y === hy + 3); i \u003c= hw - !(w & 1) - e; i++) put(x + i, y, cc > 3 && y > hy + 3 && y \u003c hy + 9 ? (y === hy + 6 ? strip : vest) : coat);\n    for (let j = 0; j \u003c 3; j++) for (let i = -1; i \u003c= 1; i++) if (j || !i) put(x + i, hy + j, SIL);\n    if (r1 \u003c ph) {\n      const sc = T > T_CH && T \u003c 11 && hash(floor(P.rt * 30), x) \u003c 0.015 ? [255, 255, 255] : PHONE;\n      for (let j = -2; j \u003c 3; j++) put(x + 2, hy + j, j \u003c 0 ? sc : SIL);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  P = params.s;\n  if (!P || !P.L || !P.fk) return;\n  (F = P.F), (L = P.L);\n  back();\n  tower();\n  pile();\n  machines();\n  fence();\n  const wl = lit([170, 190, 210], 1, 0.5, 0.2), bc = L[16] > 0.7 ? [140, 140, 150] : [24, 24, 30];\n  // The water cannon on the right roof wets the site.\n  for (let j = 0, t; j \u003c 60 && P.T > 1 && P.T \u003c T_TL; j++) (t = ((j * 0.618 + P.rt * 0.8) % 1) * 1.5), add(52 + (P.w * 6 - 15 - 6 * hash(j, 5)) * t, 86 - (10 + 5 * hash(j, 6)) * t + 13 * t * t, wl, 0.2);\n  dust();\n  for (const [x, y, , , , , , fp] of P.bd) for (let i = -1, up = sin(fp) > 0 ? -1 : 0; i \u003c 2; i++) put(x + i, y + (i ? up : 0), bc);\n  people();\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, cl(F[o], 0, 255) | 0, cl(F[o + 1], 0, 255) | 0, cl(F[o + 2], 0, 255) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower."},{"name":"Storeys","min":20,"max":30,"about":"Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel."},{"name":"Wind","min":-1,"max":1,"about":"Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it."}],"start":[0,2,20,0.06],"measures":{"motion":0.3241,"detail":0.034,"edges":0.2245,"complexity":1.918,"coverage":0.9298,"colour":0.1876,"drift":0.0773},"knobResponse":[0.3233,0.0558,0.0577,0.0486]},{"slug":"incense","title":"Incense","family":"noise","round":15,"note":"향 연기가 실처럼 곧게 오르다 몇 줄 위에서 흔들리고, 곧 소용돌이로 흩어져 위로 퍼져요. 돌탑 위 역류 향꽂이에서는 무거운 연기가 돌을 타고 흘러내려 접시에 고여요.","idea":"A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.","buttons":"K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.","code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-incense","type":"code","name":"incense","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10."},{"name":"Sticks","min":1,"max":3,"about":"One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner."},{"name":"Breeze","min":-1,"max":1,"about":"A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish."}],"start":[0,2,1,0.06],"measures":{"motion":0.2464,"detail":0.0379,"edges":0.3304,"complexity":1.0761,"coverage":0.3311,"colour":0.0945,"drift":0.0442},"knobResponse":[0.0522,0.0616,0.0686,0.0518]},{"slug":"indras-pearls","title":"Indra's Pearls","family":"geometry","round":31,"note":"마스킷 조각의 클라인 군이 그리는 극한 집합이 두 흰 벽 사이로 128줄을 내려가요. 접한 원의 목걸이 사이로 진주가 세대마다 작아지고, μ 가 첨점 사이를 오가며 목이 조였다 풀리고 겹 소용돌이가 감겼다 풀려요. K1 을 누르면 진주가 세대 차례로 켜져요.","idea":"The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.","buttons":"K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.","code":"// ===== Patternflow pattern =====\n// Title:   Indra's Pearls\n// Family:  geometry\n// Idea:    The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: limit set of a Kleinian group (Henri Poincaré, 1883), the Maskit slice as drawn in Indra's Pearls (David Mumford, Caroline Series and David Wright, 2002), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal.\n// Knob 2: Speed. At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower.\n// Knob 3: Shape. Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall.\n// Knob 4: Zoom. Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past.\n// Buttons: K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Cusps of the Maskit slice, mu = Re + i Im, from the cusp 0/1 at 2i to 1/2.\n// Each is the root of tr W_p/q(mu) = 2 with the largest imaginary part,\n// found by the Farey recursion on traces (tr a = -i mu, tr b = 2,\n// tr ab = -i mu - 2i). Between two of them the slice's edge dips well below\n// the chord, so mu on the chord, or a little above, stays inside the slice.\nconst CUSP = [\n  [0, 2], [-0.0216, 1.9374], [-0.0363, 1.9134], [-0.0674, 1.8745], [-0.1427, 1.8103],\n  [-0.2201, 1.7667], [-0.3522, 1.7214], [-0.5812, 1.6939], [-1, 1.7321],\n];\nconst NC = CUSP.length - 1;\n\n// The strip 0 \u003c Im z \u003c Im mu spans this many of the 64 columns at Zoom 0,\n// which leaves three LEDs on each side for the dark half-planes. Im mu runs\n// from 1.69 to 2.06, so that is 28 to 34 LEDs per unit of the plane.\nconst SPAN = 58;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    scroll: 0, ph: 0, sw: 0, hue: 0, shape: 0, zoom: 0.06, wave: -1,\n    mr: 0, mi: 2, uz: SPAN / 2, cx: 0, cy: 1, buf: new Float32Array(N * 3), pal: new Float32Array(64 * 3), palHue: -1,\n  };\n}\n\n// mu for a place c on the cusp chain (0..NC, and negative for its mirror,\n// Re mu -> -Re mu, which the slice shares) lifted by l into the slice.\nfunction muAt(c, l, P) {\n  const m = c \u003c 0 ? -1 : 1;\n  c = min(abs(c), NC);\n  const i = min(floor(c), NC - 1), f = c - i;\n  P.mr = m * (CUSP[i][0] + (CUSP[i + 1][0] - CUSP[i][0]) * f);\n  P.mi = CUSP[i][1] + (CUSP[i + 1][1] - CUSP[i][1]) * f + l;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.shape = cl(k[2], 0, 1);\n  P.zoom = cl(k[3], 0, 1);\n  P.ph += d * sp * 0.05;\n  P.sw += d * sp * 0.03;\n  // The lift above the cusp chain breathes between 0, where the chain\n  // pinches into tangent discs, and 0.06, where the invariant component\n  // opens into one winding band, every ten seconds at Speed 2. Over about\n  // seventeen seconds mu also swings along the chain and back: at Shape 0\n  // from the cusp 1/10 through 2i to its mirror image, so the spirals at the\n  // necks wind up one way, unwind and wind up the other way.\n  const lift = 0.06 * (0.5 - 0.5 * Math.cos(P.ph * 2 * PI)) ** 1.5;\n  const c = P.shape * NC + Math.sin(P.sw * 2 * PI) * (1.9 - 1.1 * P.shape);\n  muAt(c, lift, P);\n  // LEDs per unit of the plane, and the slide: five LEDs a second at Speed 2\n  // at any zoom. The picture repeats every 2 along Re z.\n  P.uz = (SPAN / P.mi) * 4 ** P.zoom;\n  // The zoom closes in on a fixed point of a, (mu - sqrt(mu^2 + 4)) / 2, the\n  // one in the lower half of the strip. It lies on the limit set at a neck\n  // of the chain, where the small pearls spiral in; the slide carries it\n  // through the middle of the view once a period.\n  const ar = P.mr * P.mr - P.mi * P.mi + 4, ai = 2 * P.mr * P.mi, am = sqrt(ar * ar + ai * ai);\n  let sr = sqrt(max(0, (am + ar) / 2)), si = sqrt(max(0, (am - ar) / 2));\n  if (ai \u003c 0) si = -si;\n  if (si \u003c 0) {\n    sr = -sr;\n    si = -si;\n  }\n  const zs = (1 - 4 ** -P.zoom) / 0.75;\n  P.cx = ((P.mr - sr) / 2) * zs;\n  P.cy = P.mi / 2 + ((P.mi - si) / 2 - P.mi / 2) * zs;\n  P.scroll = (P.scroll + (d * sp * 2.5) / P.uz) % 2;\n  const b = input.btnPressed || [];\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 14 ? -1 : P.wave + d * 2.2;\n}\n\n// One point z = x + iy through Jos Leys's escape algorithm for the Maskit\n// group a(z) = mu + 1/z, b(z) = z + 2. Each step wraps z into the strip of b\n// (sheared along mu), turns it half round about mu/2 if it lies above the\n// separation line (that half turn maps the limit set onto itself and swaps a\n// with its inverse), then applies a. It stops when z leaves the strip\n// 0 \u003c Im z \u003c Im mu (it was in a pearl, a disc that some word of the group\n// sends onto a half-plane), or falls into a 2-cycle (it is in the invariant\n// component, or in one of the discs it pinches into at a cusp). OUT holds\n// the kind, the step count and a distance to the limit set in plane units.\nconst OUT = new Float64Array(3);\n// 1 - e^-v in steps of 1/32 up to v = 12, for the separation line.\nconst SEP = new Float64Array(385);\nfor (let j = 0; j \u003c 385; j++) SEP[j] = 1 - exp(-j / 32);\nfunction trace(x, y, mr, t, maxIt) {\n  if (y \u003c 0 || y > t) {\n    OUT[0] = 0;\n    OUT[1] = 0;\n    OUT[2] = y \u003c 0 ? -y : y - t;\n    return;\n  }\n  const sh = mr / t, f = mr > 0 ? -1 : mr \u003c 0 ? 1 : 0, lean = (f * (2 * t - 1.95)) / 4, kk = 7.2 - (1.95 - t) * 15, hm = mr / 2, ht = t / 2, al = abs(lean);\n  let lx = x + 9, ly = y, llx = x - 9, lly = y, der = 1;\n  for (let i = 0; i \u003c maxIt; i++) {\n    const s = x - sh * y;\n    if (s >= 1 || s \u003c -1) x -= 2 * floor((s + 1) * 0.5);\n    const u = x - hm;\n    let up = y >= ht + al;\n    if (!up && y >= ht - al) {\n      const v = kk * (u > 0 ? u : -u) * 32;\n      let sep = 1;\n      if (v \u003c 383) {\n        const j = v | 0;\n        sep = SEP[j] + (SEP[j + 1] - SEP[j]) * (v - j);\n      }\n      up = y >= ht + (u > 0 ? lean : -lean) * sep;\n    }\n    if (up) {\n      x = mr - x;\n      y = t - y;\n    }\n    const r = 1 / (x * x + y * y);\n    der *= r;\n    x = mr + x * r;\n    y = t - y * r;\n    if (y \u003c 0 || y > t) {\n      OUT[0] = 1;\n      OUT[1] = i + 1;\n      OUT[2] = (y \u003c 0 ? -y : y - t) / der;\n      return;\n    }\n    const ex = x - llx, ey = y - lly;\n    if (ex * ex + ey * ey \u003c 1e-8) {\n      // How far the cycling point lies from the nearest limit set close to\n      // the fundamental domain: the two walls and the pearls a^-1(H-) and\n      // a^2(H-) that touch them at 0 and mu. Divided by the stretch of the\n      // word that brought it there, that is the distance back where it\n      // started, to first order.\n      let s2 = x - sh * y;\n      s2 -= 2 * floor((s2 + 1) / 2);\n      x = s2 + sh * y;\n      const rr = 0.5 / t, dt2 = t - rr;\n      let dd = min(y, t - y);\n      dd = min(dd, sqrt(x * x + (y - rr) * (y - rr)) - rr, sqrt((x - mr) * (x - mr) + (y - dt2) * (y - dt2)) - rr);\n      OUT[0] = 2;\n      OUT[1] = i + 1;\n      OUT[2] = max(0, dd) / der;\n      return;\n    }\n    llx = lx;\n    lly = ly;\n    lx = x;\n    ly = y;\n  }\n  OUT[0] = 3;\n  OUT[1] = maxIt;\n  OUT[2] = 0;\n}\n\n// Colours: 0..31 the invariant component by step count, 32..63 the pearls\n// by generation.\nfunction palette(P) {\n  const pal = P.pal, h = P.hue + 0.6;\n  for (let i = 0; i \u003c 32; i++) {\n    const u = i / 31;\n    // A dark orange or olive reads as brown, so the discs lift their light\n    // where the hue passes through them and turn gold instead.\n    let hh = h + 0.07 * u * u;\n    hh -= floor(hh);\n    const lift = max(0, 1 - abs(hh - 0.1) / 0.16);\n    hsv(hh, 0.85 - 0.3 * u * u, 0.2 + 0.5 * u * u + 0.5 * lift * (1 - u * u), pal, i * 3);\n    // Generation 1 teal, then cyan, sky, lavender and pink, paler as they\n    // shrink.\n    const g = min(i, 6) / 6;\n    hsv(h - 0.12 + 0.36 * g, 0.72 - 0.32 * g, 0.72 + 0.24 * g, pal, (32 + i) * 3);\n  }\n  P.palHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const buf = P.buf, pal = P.pal, mr = P.mr, t = P.mi;\n  const uz = P.uz, su = 1 / uz, maxIt = 40 + ((40 * P.zoom) | 0);\n  const y0 = P.cy - (W / 2) * su, x0 = P.cx - P.scroll - (H / 2) * su;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const x = x0 + (py + 0.5) * su;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      trace(x, y0 + (px + 0.5) * su, mr, t, maxIt);\n      const kind = OUT[0], n = OUT[1], de = OUT[2] * uz;\n      let r, g, b;\n      if (kind === 0) {\n        r = 0.02;\n        g = 0.02;\n        b = 0.05;\n      } else if (kind === 1) {\n        const o = (32 + min(n - 1, 31)) * 3;\n        // A pearl is a little darker at its rim, so neighbours part.\n        const v = 0.55 + 0.45 * min(1, de / 2.5);\n        r = pal[o] * v;\n        g = pal[o + 1] * v;\n        b = pal[o + 2] * v;\n        if (P.wave >= 0) {\n          const dw = P.wave - n, fl = exp(-dw * dw * 2) * 0.8;\n          r += (1 - r) * fl;\n          g += (1 - g) * fl;\n          b += (1 - b) * fl;\n        }\n      } else if (kind === 2) {\n        // The invariant component glows in from the limit set, about five\n        // LEDs deep, over a dark core.\n        const o = min(31, (31 * exp(-de / 5)) | 0) * 3;\n        r = pal[o];\n        g = pal[o + 1];\n        b = pal[o + 2];\n      } else {\n        r = 0.7;\n        g = 0.72;\n        b = 0.8;\n      }\n      // The limit set: a white line a LED or so wide wherever the distance\n      // to it is under a LED.\n      if (kind !== 3) {\n        const w = 0.92 * exp(-de * de * 2.4);\n        r += (0.92 - r) * w;\n        g += (0.94 - g) * w;\n        b += (1 - b) * w;\n      }\n      buf[p] = r * 255;\n      buf[p + 1] = g * 255;\n      buf[p + 2] = b * 255;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-indras-pearls","type":"code","name":"indras-pearls","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Indra's Pearls\n// Family:  geometry\n// Idea:    The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: limit set of a Kleinian group (Henri Poincaré, 1883), the Maskit slice as drawn in Indra's Pearls (David Mumford, Caroline Series and David Wright, 2002), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal.\n// Knob 2: Speed. At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower.\n// Knob 3: Shape. Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall.\n// Knob 4: Zoom. Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past.\n// Buttons: K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Cusps of the Maskit slice, mu = Re + i Im, from the cusp 0/1 at 2i to 1/2.\n// Each is the root of tr W_p/q(mu) = 2 with the largest imaginary part,\n// found by the Farey recursion on traces (tr a = -i mu, tr b = 2,\n// tr ab = -i mu - 2i). Between two of them the slice's edge dips well below\n// the chord, so mu on the chord, or a little above, stays inside the slice.\nconst CUSP = [\n  [0, 2], [-0.0216, 1.9374], [-0.0363, 1.9134], [-0.0674, 1.8745], [-0.1427, 1.8103],\n  [-0.2201, 1.7667], [-0.3522, 1.7214], [-0.5812, 1.6939], [-1, 1.7321],\n];\nconst NC = CUSP.length - 1;\n\n// The strip 0 \u003c Im z \u003c Im mu spans this many of the 64 columns at Zoom 0,\n// which leaves three LEDs on each side for the dark half-planes. Im mu runs\n// from 1.69 to 2.06, so that is 28 to 34 LEDs per unit of the plane.\nconst SPAN = 58;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    scroll: 0, ph: 0, sw: 0, hue: 0, shape: 0, zoom: 0.06, wave: -1,\n    mr: 0, mi: 2, uz: SPAN / 2, cx: 0, cy: 1, buf: new Float32Array(N * 3), pal: new Float32Array(64 * 3), palHue: -1,\n  };\n}\n\n// mu for a place c on the cusp chain (0..NC, and negative for its mirror,\n// Re mu -> -Re mu, which the slice shares) lifted by l into the slice.\nfunction muAt(c, l, P) {\n  const m = c \u003c 0 ? -1 : 1;\n  c = min(abs(c), NC);\n  const i = min(floor(c), NC - 1), f = c - i;\n  P.mr = m * (CUSP[i][0] + (CUSP[i + 1][0] - CUSP[i][0]) * f);\n  P.mi = CUSP[i][1] + (CUSP[i + 1][1] - CUSP[i][1]) * f + l;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.shape = cl(k[2], 0, 1);\n  P.zoom = cl(k[3], 0, 1);\n  P.ph += d * sp * 0.05;\n  P.sw += d * sp * 0.03;\n  // The lift above the cusp chain breathes between 0, where the chain\n  // pinches into tangent discs, and 0.06, where the invariant component\n  // opens into one winding band, every ten seconds at Speed 2. Over about\n  // seventeen seconds mu also swings along the chain and back: at Shape 0\n  // from the cusp 1/10 through 2i to its mirror image, so the spirals at the\n  // necks wind up one way, unwind and wind up the other way.\n  const lift = 0.06 * (0.5 - 0.5 * Math.cos(P.ph * 2 * PI)) ** 1.5;\n  const c = P.shape * NC + Math.sin(P.sw * 2 * PI) * (1.9 - 1.1 * P.shape);\n  muAt(c, lift, P);\n  // LEDs per unit of the plane, and the slide: five LEDs a second at Speed 2\n  // at any zoom. The picture repeats every 2 along Re z.\n  P.uz = (SPAN / P.mi) * 4 ** P.zoom;\n  // The zoom closes in on a fixed point of a, (mu - sqrt(mu^2 + 4)) / 2, the\n  // one in the lower half of the strip. It lies on the limit set at a neck\n  // of the chain, where the small pearls spiral in; the slide carries it\n  // through the middle of the view once a period.\n  const ar = P.mr * P.mr - P.mi * P.mi + 4, ai = 2 * P.mr * P.mi, am = sqrt(ar * ar + ai * ai);\n  let sr = sqrt(max(0, (am + ar) / 2)), si = sqrt(max(0, (am - ar) / 2));\n  if (ai \u003c 0) si = -si;\n  if (si \u003c 0) {\n    sr = -sr;\n    si = -si;\n  }\n  const zs = (1 - 4 ** -P.zoom) / 0.75;\n  P.cx = ((P.mr - sr) / 2) * zs;\n  P.cy = P.mi / 2 + ((P.mi - si) / 2 - P.mi / 2) * zs;\n  P.scroll = (P.scroll + (d * sp * 2.5) / P.uz) % 2;\n  const b = input.btnPressed || [];\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 14 ? -1 : P.wave + d * 2.2;\n}\n\n// One point z = x + iy through Jos Leys's escape algorithm for the Maskit\n// group a(z) = mu + 1/z, b(z) = z + 2. Each step wraps z into the strip of b\n// (sheared along mu), turns it half round about mu/2 if it lies above the\n// separation line (that half turn maps the limit set onto itself and swaps a\n// with its inverse), then applies a. It stops when z leaves the strip\n// 0 \u003c Im z \u003c Im mu (it was in a pearl, a disc that some word of the group\n// sends onto a half-plane), or falls into a 2-cycle (it is in the invariant\n// component, or in one of the discs it pinches into at a cusp). OUT holds\n// the kind, the step count and a distance to the limit set in plane units.\nconst OUT = new Float64Array(3);\n// 1 - e^-v in steps of 1/32 up to v = 12, for the separation line.\nconst SEP = new Float64Array(385);\nfor (let j = 0; j \u003c 385; j++) SEP[j] = 1 - exp(-j / 32);\nfunction trace(x, y, mr, t, maxIt) {\n  if (y \u003c 0 || y > t) {\n    OUT[0] = 0;\n    OUT[1] = 0;\n    OUT[2] = y \u003c 0 ? -y : y - t;\n    return;\n  }\n  const sh = mr / t, f = mr > 0 ? -1 : mr \u003c 0 ? 1 : 0, lean = (f * (2 * t - 1.95)) / 4, kk = 7.2 - (1.95 - t) * 15, hm = mr / 2, ht = t / 2, al = abs(lean);\n  let lx = x + 9, ly = y, llx = x - 9, lly = y, der = 1;\n  for (let i = 0; i \u003c maxIt; i++) {\n    const s = x - sh * y;\n    if (s >= 1 || s \u003c -1) x -= 2 * floor((s + 1) * 0.5);\n    const u = x - hm;\n    let up = y >= ht + al;\n    if (!up && y >= ht - al) {\n      const v = kk * (u > 0 ? u : -u) * 32;\n      let sep = 1;\n      if (v \u003c 383) {\n        const j = v | 0;\n        sep = SEP[j] + (SEP[j + 1] - SEP[j]) * (v - j);\n      }\n      up = y >= ht + (u > 0 ? lean : -lean) * sep;\n    }\n    if (up) {\n      x = mr - x;\n      y = t - y;\n    }\n    const r = 1 / (x * x + y * y);\n    der *= r;\n    x = mr + x * r;\n    y = t - y * r;\n    if (y \u003c 0 || y > t) {\n      OUT[0] = 1;\n      OUT[1] = i + 1;\n      OUT[2] = (y \u003c 0 ? -y : y - t) / der;\n      return;\n    }\n    const ex = x - llx, ey = y - lly;\n    if (ex * ex + ey * ey \u003c 1e-8) {\n      // How far the cycling point lies from the nearest limit set close to\n      // the fundamental domain: the two walls and the pearls a^-1(H-) and\n      // a^2(H-) that touch them at 0 and mu. Divided by the stretch of the\n      // word that brought it there, that is the distance back where it\n      // started, to first order.\n      let s2 = x - sh * y;\n      s2 -= 2 * floor((s2 + 1) / 2);\n      x = s2 + sh * y;\n      const rr = 0.5 / t, dt2 = t - rr;\n      let dd = min(y, t - y);\n      dd = min(dd, sqrt(x * x + (y - rr) * (y - rr)) - rr, sqrt((x - mr) * (x - mr) + (y - dt2) * (y - dt2)) - rr);\n      OUT[0] = 2;\n      OUT[1] = i + 1;\n      OUT[2] = max(0, dd) / der;\n      return;\n    }\n    llx = lx;\n    lly = ly;\n    lx = x;\n    ly = y;\n  }\n  OUT[0] = 3;\n  OUT[1] = maxIt;\n  OUT[2] = 0;\n}\n\n// Colours: 0..31 the invariant component by step count, 32..63 the pearls\n// by generation.\nfunction palette(P) {\n  const pal = P.pal, h = P.hue + 0.6;\n  for (let i = 0; i \u003c 32; i++) {\n    const u = i / 31;\n    // A dark orange or olive reads as brown, so the discs lift their light\n    // where the hue passes through them and turn gold instead.\n    let hh = h + 0.07 * u * u;\n    hh -= floor(hh);\n    const lift = max(0, 1 - abs(hh - 0.1) / 0.16);\n    hsv(hh, 0.85 - 0.3 * u * u, 0.2 + 0.5 * u * u + 0.5 * lift * (1 - u * u), pal, i * 3);\n    // Generation 1 teal, then cyan, sky, lavender and pink, paler as they\n    // shrink.\n    const g = min(i, 6) / 6;\n    hsv(h - 0.12 + 0.36 * g, 0.72 - 0.32 * g, 0.72 + 0.24 * g, pal, (32 + i) * 3);\n  }\n  P.palHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const buf = P.buf, pal = P.pal, mr = P.mr, t = P.mi;\n  const uz = P.uz, su = 1 / uz, maxIt = 40 + ((40 * P.zoom) | 0);\n  const y0 = P.cy - (W / 2) * su, x0 = P.cx - P.scroll - (H / 2) * su;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const x = x0 + (py + 0.5) * su;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      trace(x, y0 + (px + 0.5) * su, mr, t, maxIt);\n      const kind = OUT[0], n = OUT[1], de = OUT[2] * uz;\n      let r, g, b;\n      if (kind === 0) {\n        r = 0.02;\n        g = 0.02;\n        b = 0.05;\n      } else if (kind === 1) {\n        const o = (32 + min(n - 1, 31)) * 3;\n        // A pearl is a little darker at its rim, so neighbours part.\n        const v = 0.55 + 0.45 * min(1, de / 2.5);\n        r = pal[o] * v;\n        g = pal[o + 1] * v;\n        b = pal[o + 2] * v;\n        if (P.wave >= 0) {\n          const dw = P.wave - n, fl = exp(-dw * dw * 2) * 0.8;\n          r += (1 - r) * fl;\n          g += (1 - g) * fl;\n          b += (1 - b) * fl;\n        }\n      } else if (kind === 2) {\n        // The invariant component glows in from the limit set, about five\n        // LEDs deep, over a dark core.\n        const o = min(31, (31 * exp(-de / 5)) | 0) * 3;\n        r = pal[o];\n        g = pal[o + 1];\n        b = pal[o + 2];\n      } else {\n        r = 0.7;\n        g = 0.72;\n        b = 0.8;\n      }\n      // The limit set: a white line a LED or so wide wherever the distance\n      // to it is under a LED.\n      if (kind !== 3) {\n        const w = 0.92 * exp(-de * de * 2.4);\n        r += (0.92 - r) * w;\n        g += (0.94 - g) * w;\n        b += (1 - b) * w;\n      }\n      buf[p] = r * 255;\n      buf[p + 1] = g * 255;\n      buf[p + 2] = b * 255;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower."},{"name":"Shape","min":0,"max":1,"about":"Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall."},{"name":"Zoom","min":0,"max":1,"about":"Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past."}],"start":[0,2,0,0.06],"measures":{"motion":0.5032,"detail":0.058,"edges":0.429,"complexity":0.897,"coverage":1,"colour":0.18,"drift":0.2157},"knobResponse":[0.3262,0.2178,0.2586,0.2575]},{"slug":"infinity-series","title":"Infinity Series","family":"rhythm","round":38,"note":"페르 뇌르고르의 무한 수열이 네 줄 피아노 롤에 한 박에 1, 2, 4, 8음으로 떨어져 타격선에 닿아요. 박마다 네 줄이 함께 닿는데, 4음 줄은 1음 줄과 같은 음에, 2음과 8음 줄은 그 거울상에 닿아요. K3 은 한 박의 줄 수를 8 에서 40 으로 늘려 음을 길게 펴고, K4 는 수열의 더 먼 자리에서 시작해요.","idea":"Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Infinity Series\n// Family:  rhythm\n// Idea:    Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Per Nørgård's infinity series (1959), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1\n//\n// Knob 1: Hue. Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white.\n// Knob 2: Speed. The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start.\n// Knob 3: Beat. Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five.\n// Knob 4: Start. Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge.\n\nconst W = 64, H = 128;\n// Lanes: four, 16 columns each; pitches -7..7 on columns 0..14 of the lane,\n// pitch 0 on column 7, column 15 dark between lanes.\nconst LANES = 4, LW = 16, PMAX = 7, RATE = [1, 2, 4, 8];\n// The strike line: notes fall onto row SY and fade out below it.\nconst SY = 104;\n// Brightness of the held note on the beat behind the faster lanes.\nconst HOLD = 0.34;\nconst NA = 1 \u003c\u003c 16;\nconst { floor, min, max, abs, round, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The series: a(0) = 0, a(2n) = -a(n), a(2n + 1) = a(n) + 1.\nconst A = new Int8Array(NA);\nfor (let n = 1; n \u003c NA; n++) A[n] = n & 1 ? A[n >> 1] + 1 : -A[n >> 1];\nconst ser = (n) => A[((n % NA) + NA) % NA];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, beat: 0, start: 0, speed: 2, rpb: 8, hue: 0,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    up: [0, 0, 0], dn: [0, 0, 0], upOff: [0, 0, 0], dnOff: [0, 0, 0], upHold: [0, 0, 0], dnHold: [0, 0, 0], warm: [0, 0],\n  };\n}\n\nfunction startBeat(k) {\n  // Up to 0.06 note 0; above, beat 16 to 496 in steps of 16.\n  const u = cl(k, 0, 1);\n  return u \u003c= 0.06 ? 0 : 16 * max(1, round(((u - 0.06) / 0.94) * 31));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rpb = 8 * cl(round(cl(k[2], 8, 40) / 8), 1, 5);\n  const st = startBeat(k[3]);\n  // The roll opens with the start beat 1.5 beats above the strike line; a\n  // new Start jumps there.\n  if (!S.init || st !== S.start) {\n    S.start = st;\n    S.beat = st - 1.5;\n    S.init = true;\n  }\n  S.beat += d * S.speed;\n  // After 512 beats the roll goes back to its start, so the fastest lane\n  // reads no further than note 8 x 1008 = 8064, and no more than one note in\n  // 30 lies past seven steps from the middle.\n  if (S.beat > S.start + 512) S.beat -= 512 + 1.5;\n}\n\n// Adds light to one LED; the dark column between lanes stays dark.\nfunction add(S, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0 || (x & 15) === 15) return;\n  const p = y * W + x;\n  S.R[p] += c[0] * v;\n  S.G[p] += c[1] * v;\n  S.B[p] += c[2] * v;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { R, G, B, up, dn, upOff, dnOff, upHold, dnHold, warm } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The melody as it is, the melody upside down, and the notes between beats.\n  hsv(S.hue + 0.57, 0.8, 1, up);\n  hsv(S.hue + 0.93, 0.62, 1, dn);\n  // How far each colour is into orange or yellow, 0 to 1. Those are lifted\n  // toward white so they read amber or butter, not brown or olive, most of\n  // all in the dim held notes.\n  [up, dn].forEach((c, i) => {\n    const w = cl(2.5 * (min(c[0], c[1]) - c[2]), 0, 1);\n    warm[i] = w;\n    for (let j = 0; j \u003c 3; j++) c[j] = c[j] + (1 - c[j]) * 0.3 * w;\n  });\n  for (let j = 0; j \u003c 3; j++) {\n    // The notes between the beats: the lane's colour taken 55% toward white.\n    upOff[j] = 0.55 + 0.45 * up[j];\n    dnOff[j] = 0.55 + 0.45 * dn[j];\n    // The held notes: the colour itself, or up to 45% toward white and 1.6\n    // times as bright in orange and yellow.\n    upHold[j] = (up[j] + (1 - up[j]) * 0.45 * warm[0]) * HOLD * (1 + 0.6 * warm[0]);\n    dnHold[j] = (dn[j] + (1 - dn[j]) * 0.45 * warm[1]) * HOLD * (1 + 0.6 * warm[1]);\n  }\n  const T = S.beat, rpb = S.rpb, white = [1, 1, 1];\n\n  // Guides: each lane's pitch 0, the mirror line, and a line on every beat.\n  const grey = [0.55, 0.6, 0.75];\n  for (let l = 0; l \u003c LANES; l++) for (let y = 0; y \u003c H; y++) add(S, l * LW + PMAX, y, grey, 0.1);\n  const b0 = floor(T - (H - SY) / rpb) - 1, b1 = floor(T + SY / rpb) + 1;\n  for (let b = b0; b \u003c= b1; b++) {\n    const y = round(SY - (b - T) * rpb);\n    for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, y, grey, 0.13);\n  }\n\n  for (let l = 0; l \u003c LANES; l++) {\n    const s = RATE[l], x0 = l * LW, len = rpb / s;\n    // Notes on the beat in this lane play +a(m) (rates 1, 4) or -a(m) (2, 8).\n    const onC = l & 1 ? dn : up, offC = l & 1 ? dnOff : upOff, holdC = l & 1 ? dnHold : upHold, lw = warm[l & 1];\n    // Behind the lane's own notes, each note on the beat is held dim for the\n    // whole beat: the series read at the lane's step, which lands on lane\n    // 1's note in the lanes of 4 and on its mirror image in the lanes of 2\n    // and 8.\n    if (s > 1)\n      for (let m = max(0, b0); m \u003c= b1; m++) {\n        const a = ser(s * m), px = x0 + PMAX + cl(a, -PMAX, PMAX), yb = SY - (m - T) * rpb;\n        const ye = round(yb);\n        for (let y = ye - rpb + 1; y \u003c ye; y++) {\n          if (y \u003c 0 || y >= H) continue;\n          const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n          add(S, px, y, holdC, fade);\n          add(S, px - 1, y, holdC, 0.75 * fade);\n          add(S, px + 1, y, holdC, 0.75 * fade);\n        }\n      }\n    const n0 = floor((T - (H - SY) / rpb) * s) - 1, n1 = floor((T + SY / rpb) * s) + 1;\n    for (let n = max(0, n0); n \u003c= n1; n++) {\n      const a = ser(n), px = x0 + PMAX + cl(a, -PMAX, PMAX), on = n % s === 0;\n      // Rows the note covers: its onset at the bottom, the next onset at the top.\n      const yb = SY - (n / s - T) * rpb, yt = yb - len;\n      const gap = len >= 3 ? 1 : 0;\n      const c = on ? onC : offC, core = on ? 0.95 : 0.42 * (1 + 0.4 * lw), side = on ? 0.7 : 0.2 * (1 + 0.4 * lw);\n      const clip = abs(a) > PMAX ? 0.55 : 1;\n      // How long since this note struck, in beats: a flash that dies in about\n      // a sixth of a beat, longer for a downbeat.\n      const age = T - n / s, flash = age >= 0 && age \u003c 1 ? exp(-age * (on ? 9 : 16)) : 0;\n      // Rows are rounded at both ends, so a note of one row never drops out.\n      const ye = round(yb);\n      for (let y = round(yt) + gap; y \u003c ye; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        // Below the strike line the note has sounded and fades out.\n        const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n        const lit = (y >= SY - 2 ? 1 + 1.6 * flash : 1) * fade * clip;\n        add(S, px, y, c, core * lit);\n        add(S, px - 1, y, c, side * lit);\n        add(S, px + 1, y, c, side * lit);\n        if (y >= SY - 2 && flash > 0) add(S, px, y, white, 0.5 * flash * fade);\n      }\n      // The struck key on the strike line, and its glow on either side.\n      if (flash > 0) {\n        for (let dx = -2; dx \u003c= 2; dx++) {\n          const g = (on ? 1 : 0.5) * flash * (dx === 0 ? 1 : abs(dx) === 1 ? 0.55 : 0.2);\n          add(S, px + dx, SY, white, 0.5 * g);\n          add(S, px + dx, SY, c, 0.8 * g);\n          add(S, px + dx, SY + 1, c, 0.35 * g);\n        }\n      }\n    }\n  }\n\n  // The strike line itself, a dim rule across each lane.\n  for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, SY, grey, 0.16);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","layer":{"id":"layer-infinity-series","type":"code","name":"infinity-series","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Infinity Series\n// Family:  rhythm\n// Idea:    Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Per Nørgård's infinity series (1959), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1\n//\n// Knob 1: Hue. Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white.\n// Knob 2: Speed. The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start.\n// Knob 3: Beat. Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five.\n// Knob 4: Start. Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge.\n\nconst W = 64, H = 128;\n// Lanes: four, 16 columns each; pitches -7..7 on columns 0..14 of the lane,\n// pitch 0 on column 7, column 15 dark between lanes.\nconst LANES = 4, LW = 16, PMAX = 7, RATE = [1, 2, 4, 8];\n// The strike line: notes fall onto row SY and fade out below it.\nconst SY = 104;\n// Brightness of the held note on the beat behind the faster lanes.\nconst HOLD = 0.34;\nconst NA = 1 \u003c\u003c 16;\nconst { floor, min, max, abs, round, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The series: a(0) = 0, a(2n) = -a(n), a(2n + 1) = a(n) + 1.\nconst A = new Int8Array(NA);\nfor (let n = 1; n \u003c NA; n++) A[n] = n & 1 ? A[n >> 1] + 1 : -A[n >> 1];\nconst ser = (n) => A[((n % NA) + NA) % NA];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, beat: 0, start: 0, speed: 2, rpb: 8, hue: 0,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    up: [0, 0, 0], dn: [0, 0, 0], upOff: [0, 0, 0], dnOff: [0, 0, 0], upHold: [0, 0, 0], dnHold: [0, 0, 0], warm: [0, 0],\n  };\n}\n\nfunction startBeat(k) {\n  // Up to 0.06 note 0; above, beat 16 to 496 in steps of 16.\n  const u = cl(k, 0, 1);\n  return u \u003c= 0.06 ? 0 : 16 * max(1, round(((u - 0.06) / 0.94) * 31));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rpb = 8 * cl(round(cl(k[2], 8, 40) / 8), 1, 5);\n  const st = startBeat(k[3]);\n  // The roll opens with the start beat 1.5 beats above the strike line; a\n  // new Start jumps there.\n  if (!S.init || st !== S.start) {\n    S.start = st;\n    S.beat = st - 1.5;\n    S.init = true;\n  }\n  S.beat += d * S.speed;\n  // After 512 beats the roll goes back to its start, so the fastest lane\n  // reads no further than note 8 x 1008 = 8064, and no more than one note in\n  // 30 lies past seven steps from the middle.\n  if (S.beat > S.start + 512) S.beat -= 512 + 1.5;\n}\n\n// Adds light to one LED; the dark column between lanes stays dark.\nfunction add(S, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0 || (x & 15) === 15) return;\n  const p = y * W + x;\n  S.R[p] += c[0] * v;\n  S.G[p] += c[1] * v;\n  S.B[p] += c[2] * v;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { R, G, B, up, dn, upOff, dnOff, upHold, dnHold, warm } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The melody as it is, the melody upside down, and the notes between beats.\n  hsv(S.hue + 0.57, 0.8, 1, up);\n  hsv(S.hue + 0.93, 0.62, 1, dn);\n  // How far each colour is into orange or yellow, 0 to 1. Those are lifted\n  // toward white so they read amber or butter, not brown or olive, most of\n  // all in the dim held notes.\n  [up, dn].forEach((c, i) => {\n    const w = cl(2.5 * (min(c[0], c[1]) - c[2]), 0, 1);\n    warm[i] = w;\n    for (let j = 0; j \u003c 3; j++) c[j] = c[j] + (1 - c[j]) * 0.3 * w;\n  });\n  for (let j = 0; j \u003c 3; j++) {\n    // The notes between the beats: the lane's colour taken 55% toward white.\n    upOff[j] = 0.55 + 0.45 * up[j];\n    dnOff[j] = 0.55 + 0.45 * dn[j];\n    // The held notes: the colour itself, or up to 45% toward white and 1.6\n    // times as bright in orange and yellow.\n    upHold[j] = (up[j] + (1 - up[j]) * 0.45 * warm[0]) * HOLD * (1 + 0.6 * warm[0]);\n    dnHold[j] = (dn[j] + (1 - dn[j]) * 0.45 * warm[1]) * HOLD * (1 + 0.6 * warm[1]);\n  }\n  const T = S.beat, rpb = S.rpb, white = [1, 1, 1];\n\n  // Guides: each lane's pitch 0, the mirror line, and a line on every beat.\n  const grey = [0.55, 0.6, 0.75];\n  for (let l = 0; l \u003c LANES; l++) for (let y = 0; y \u003c H; y++) add(S, l * LW + PMAX, y, grey, 0.1);\n  const b0 = floor(T - (H - SY) / rpb) - 1, b1 = floor(T + SY / rpb) + 1;\n  for (let b = b0; b \u003c= b1; b++) {\n    const y = round(SY - (b - T) * rpb);\n    for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, y, grey, 0.13);\n  }\n\n  for (let l = 0; l \u003c LANES; l++) {\n    const s = RATE[l], x0 = l * LW, len = rpb / s;\n    // Notes on the beat in this lane play +a(m) (rates 1, 4) or -a(m) (2, 8).\n    const onC = l & 1 ? dn : up, offC = l & 1 ? dnOff : upOff, holdC = l & 1 ? dnHold : upHold, lw = warm[l & 1];\n    // Behind the lane's own notes, each note on the beat is held dim for the\n    // whole beat: the series read at the lane's step, which lands on lane\n    // 1's note in the lanes of 4 and on its mirror image in the lanes of 2\n    // and 8.\n    if (s > 1)\n      for (let m = max(0, b0); m \u003c= b1; m++) {\n        const a = ser(s * m), px = x0 + PMAX + cl(a, -PMAX, PMAX), yb = SY - (m - T) * rpb;\n        const ye = round(yb);\n        for (let y = ye - rpb + 1; y \u003c ye; y++) {\n          if (y \u003c 0 || y >= H) continue;\n          const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n          add(S, px, y, holdC, fade);\n          add(S, px - 1, y, holdC, 0.75 * fade);\n          add(S, px + 1, y, holdC, 0.75 * fade);\n        }\n      }\n    const n0 = floor((T - (H - SY) / rpb) * s) - 1, n1 = floor((T + SY / rpb) * s) + 1;\n    for (let n = max(0, n0); n \u003c= n1; n++) {\n      const a = ser(n), px = x0 + PMAX + cl(a, -PMAX, PMAX), on = n % s === 0;\n      // Rows the note covers: its onset at the bottom, the next onset at the top.\n      const yb = SY - (n / s - T) * rpb, yt = yb - len;\n      const gap = len >= 3 ? 1 : 0;\n      const c = on ? onC : offC, core = on ? 0.95 : 0.42 * (1 + 0.4 * lw), side = on ? 0.7 : 0.2 * (1 + 0.4 * lw);\n      const clip = abs(a) > PMAX ? 0.55 : 1;\n      // How long since this note struck, in beats: a flash that dies in about\n      // a sixth of a beat, longer for a downbeat.\n      const age = T - n / s, flash = age >= 0 && age \u003c 1 ? exp(-age * (on ? 9 : 16)) : 0;\n      // Rows are rounded at both ends, so a note of one row never drops out.\n      const ye = round(yb);\n      for (let y = round(yt) + gap; y \u003c ye; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        // Below the strike line the note has sounded and fades out.\n        const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n        const lit = (y >= SY - 2 ? 1 + 1.6 * flash : 1) * fade * clip;\n        add(S, px, y, c, core * lit);\n        add(S, px - 1, y, c, side * lit);\n        add(S, px + 1, y, c, side * lit);\n        if (y >= SY - 2 && flash > 0) add(S, px, y, white, 0.5 * flash * fade);\n      }\n      // The struck key on the strike line, and its glow on either side.\n      if (flash > 0) {\n        for (let dx = -2; dx \u003c= 2; dx++) {\n          const g = (on ? 1 : 0.5) * flash * (dx === 0 ? 1 : abs(dx) === 1 ? 0.55 : 0.2);\n          add(S, px + dx, SY, white, 0.5 * g);\n          add(S, px + dx, SY, c, 0.8 * g);\n          add(S, px + dx, SY + 1, c, 0.35 * g);\n        }\n      }\n    }\n  }\n\n  // The strike line itself, a dim rule across each lane.\n  for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, SY, grey, 0.16);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white."},{"name":"Speed","min":0.2,"max":3,"about":"The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start."},{"name":"Beat","min":8,"max":40,"about":"Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five."},{"name":"Start","min":0,"max":1,"about":"Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge."}],"start":[0,2,8,0.06],"measures":{"motion":1.2502,"detail":0.083,"edges":0.4948,"complexity":0.2954,"coverage":0.3381,"colour":0.176,"drift":0.0581},"knobResponse":[0.067,0.12,0.1058,0.141]},{"slug":"invasion-percolation","title":"Invasion Percolation","family":"sim","round":32,"note":"바닥 가운데 한 칸으로 들어온 침입 유체가 경계에서 문턱이 가장 낮은 칸을 하나씩 차지하며 위로 자라요. 차지한 차례대로 청록에서 보라로 물들고, 맨 윗줄과 끊겨 갇힌 방어 유체는 장미색으로 굳어요. 맨 윗줄에 닿으면 입구에서 거기까지 가장 짧은 통로가 금색으로 켜지고 새 문턱으로 다시 시작해요.","idea":"Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.","buttons":"K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.","code":"// ===== Patternflow pattern =====\n// Title:   Invasion Percolation\n// Family:  sim\n// Idea:    Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: invasion percolation (David Wilkinson and Jorge Willemsen, 1983), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold.\n// Knob 2: Speed. How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst.\n// Knob 3: Gravity. Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100.\n// Knob 4: Grain. How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes.\n// Buttons: K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.\n\nconst W = 64, H = 128, N = W * H, OUT = N, BIG = 1 \u003c\u003c 30;\nconst { floor, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Threshold tilt from bottom to top at Gravity 1.\nconst GA = 0.7;\n// Seconds the finished cluster stands, its channel lighting in the first 0.6.\nconst HOLD = 1.1;\n// Site percolation threshold of the square lattice (Newman and Ziff, 2000).\n// Of the thresholds the invader takes, 0.4 to 2 in a hundred lie above it.\nconst PC = 0.592746;\nconst JUMP = 17;\nconst INLET = N - W + (W >> 1);\n\n// The normal distribution function, after Abramowitz and Stegun 7.1.26.\nfunction phi(z) {\n  const x = Math.abs(z) / Math.SQRT2, t = 1 / (1 + 0.3275911 * x);\n  const e = 1 - ((((1.061405429 * t - 1.453152027) * t + 1.421413741) * t - 0.284496736) * t + 0.254829592) * t * exp(-x * x);\n  return z \u003c 0 ? 0.5 - 0.5 * e : 0.5 + 0.5 * e;\n}\n\n// Three box blurs of radius 2, across and then down: close to a Gaussian of\n// 2.45 cells.\nfunction blur(a, b) {\n  for (let pass = 0; pass \u003c 6; pass++) {\n    const across = pass % 2 === 0;\n    for (let i = 0; i \u003c N; i++) {\n      const x = i % W, y = (i / W) | 0;\n      let s = 0, n = 0;\n      for (let d = -2; d \u003c= 2; d++) {\n        const xx = across ? x + d : x, yy = across ? y : y + d;\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) (s += a[yy * W + xx]), n++;\n      }\n      b[i] = s / n;\n    }\n    a.set(b);\n  }\n}\n\n// Thresholds: white Gaussian noise mixed with its own blur by Grain, then\n// sent through the normal distribution function, so every cell's threshold\n// is uniform on [0, 1) whatever the grain and only the correlation changes.\nfunction field(P) {\n  const { r, g0, g1 } = P, a = P.grain, b = Math.sqrt(1 - a * a);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const v = b * g0[i] + a * g1[i];\n    r[i] = v;\n    m += v;\n    q += v * v;\n  }\n  m /= N;\n  const sd = Math.sqrt(Math.max(q / N - m * m, 1e-12));\n  for (let i = 0; i \u003c N; i++) r[i] = phi((r[i] - m) / sd);\n}\n\nfunction lattice(P) {\n  const { g0, g1 } = P;\n  for (let i = 0; i \u003c N; i++) g0[i] = Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n  g1.set(g0);\n  blur(g1, P.re);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) (m += g1[i]), (q += g1[i] * g1[i]);\n  m /= N;\n  const sd = Math.sqrt(q / N - m * m);\n  for (let i = 0; i \u003c N; i++) g1[i] = (g1[i] - m) / sd;\n  P.grain = NaN;\n  P.k = 0;\n  P.K = 0;\n  P.budget = 0;\n  P.hold = -1;\n  P.ord.fill(-1);\n  P.trap.fill(BIG);\n  P.path.fill(-1);\n  P.pathLen = 0;\n  P.grav = NaN;\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N + 1), I = () => new Int32Array(N + 1);\n  params.s = {\n    r: F(), re: F(), g0: F(), g1: F(), stepT: F(), dur: F(), cr: F(), cg: F(), cb: F(), oldR: F(), oldG: F(), oldB: F(),\n    seq: I(), ord: I(), path: I(), prev: I(), trap: I(), heap: I(), tmp: I(), cnt: I(), par: I(), nxt: I(), tail: I(), size: I(), join: I(),\n    inv: new Uint8Array(N + 1), inH: new Uint8Array(N + 1), good: new Uint8Array(N + 1),\n    pathLen: 0, k: 0, K: 0, budget: 0, clock: 0, hold: -1, oldA: 0, grav: NaN, grain: NaN, hue: 0, speed: 2, flash: 0,\n  };\n  lattice(params.s);\n}\n\n// From the cells already invaded, runs invasion without trapping to the top\n// row, then walks the run backwards with union-find over the defending cells\n// to learn which steps trapping would have refused and when each pocket of\n// defender was cut off from the top row.\nfunction compute(P) {\n  const { r, re, seq, ord, trap, heap, tmp, cnt, par, nxt, tail, size, join, inv, inH, good } = P;\n  const from = P.k, g = P.grav * GA;\n  for (let i = 0; i \u003c N; i++) re[i] = r[i] - (g * (H - 1 - ((i / W) | 0))) / (H - 1);\n  inv.fill(0);\n  inH.fill(0);\n  for (let j = 0; j \u003c from; j++) inv[seq[j]] = 1;\n  for (let i = 0; i \u003c N; i++) if (!inv[i] && trap[i] > from) (trap[i] = BIG), (ord[i] = -1);\n  let n = 0;\n  const push = (i) => {\n    if (inv[i] || inH[i] || trap[i] \u003c= from) return;\n    inH[i] = 1;\n    const v = re[i];\n    let c = n++;\n    while (c > 0) {\n      const p = (c - 1) >> 1;\n      if (re[heap[p]] \u003c= v) break;\n      heap[c] = heap[p];\n      c = p;\n    }\n    heap[c] = i;\n  };\n  const pop = () => {\n    const top = heap[0], last = heap[--n], v = re[last];\n    let c = 0;\n    for (;;) {\n      let m = 2 * c + 1;\n      if (m >= n) break;\n      if (m + 1 \u003c n && re[heap[m + 1]] \u003c re[heap[m]]) m++;\n      if (re[heap[m]] >= v) break;\n      heap[c] = heap[m];\n      c = m;\n    }\n    heap[c] = last;\n    return top;\n  };\n  const around = (i, f) => {\n    const x = i % W;\n    if (x > 0) f(i - 1);\n    if (x \u003c W - 1) f(i + 1);\n    if (i >= W) f(i - W);\n    if (i \u003c N - W) f(i + W);\n  };\n  push(INLET);\n  for (let j = 0; j \u003c from; j++) around(seq[j], push);\n  let M = 0;\n  while (n > 0) {\n    const i = pop();\n    inH[i] = 0;\n    inv[i] = 2;\n    tmp[M++] = i;\n    if (i \u003c W) break;\n    around(i, push);\n  }\n\n  for (let i = 0; i \u003c= N; i++) (par[i] = i), (nxt[i] = -1), (tail[i] = i), (size[i] = 1), (join[i] = -1);\n  const find = (i) => {\n    while (par[i] !== i) (par[i] = par[par[i]]), (i = par[i]);\n    return i;\n  };\n  let t = M;\n  const unite = (a, b) => {\n    a = find(a);\n    b = find(b);\n    if (a === b) return;\n    if (b === OUT) (b = a), (a = OUT);\n    if (a === OUT) {\n      for (let m = b; m >= 0; m = nxt[m]) join[m] = t;\n      par[b] = OUT;\n      return;\n    }\n    if (size[a] \u003c size[b]) {\n      const s = a;\n      (a = b), (b = s);\n    }\n    par[b] = a;\n    size[a] += size[b];\n    nxt[tail[a]] = b;\n    tail[a] = tail[b];\n  };\n  // The defender joins across corners too: a diagonal gap between two\n  // invaded cells lets it through.\n  const around8 = (i, f) => {\n    const x = i % W, l = x > 0, rr = x \u003c W - 1;\n    if (l) f(i - 1);\n    if (rr) f(i + 1);\n    if (i >= W) {\n      f(i - W);\n      if (l) f(i - W - 1);\n      if (rr) f(i - W + 1);\n    }\n    if (i \u003c N - W) {\n      f(i + W);\n      if (l) f(i + W - 1);\n      if (rr) f(i + W + 1);\n    }\n  };\n  for (let i = 0; i \u003c N; i++) {\n    if (inv[i]) continue;\n    if (i \u003c W) unite(i, OUT);\n    around8(i, (j) => !inv[j] && unite(i, j));\n  }\n  for (t = M - 1; t >= 0; t--) {\n    const c = tmp[t];\n    inv[c] = 0;\n    if (c \u003c W) unite(c, OUT);\n    around8(c, (j) => !inv[j] && unite(c, j));\n    good[t] = find(c) === OUT ? 1 : 0;\n  }\n  let k = from;\n  for (t = 0; t \u003c M; t++) {\n    if (good[t]) (seq[k] = tmp[t]), (ord[tmp[t]] = k), k++;\n    cnt[t] = k;\n  }\n  P.K = k;\n  for (let i = 0; i \u003c N; i++) {\n    if (trap[i] !== BIG || ord[i] >= 0) continue;\n    const j = join[i];\n    if (j >= 0 && j \u003c M) trap[i] = cnt[j];\n  }\n  durations(P);\n}\n\nfunction durations(P) {\n  const { re, seq, dur } = P;\n  let s = 0;\n  for (let k = 0; k \u003c P.K; k++) {\n    dur[k] = exp(JUMP * Math.min(re[seq[k]] - PC, 0.03));\n    s += dur[k];\n  }\n  const m = P.K / Math.max(s, 1e-9);\n  for (let k = 0; k \u003c P.K; k++) dur[k] *= m;\n}\n\n// The channel the invader flows through once it breaks through: the shortest\n// path inside the cluster from the inlet to the cell that reached the top row,\n// found breadth first. Each cell on it keeps its place along the path.\nfunction channel(P) {\n  const { ord, prev, heap: queue, path, seq, K } = P;\n  prev.fill(-2);\n  const end = seq[K - 1];\n  let qh = 0, qt = 0;\n  queue[qt++] = INLET;\n  prev[INLET] = -1;\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i === end) break;\n    const x = i % W;\n    for (const j of [i - W, x > 0 ? i - 1 : -1, x \u003c W - 1 ? i + 1 : -1, i + W])\n      if (j >= 0 && j \u003c N && ord[j] >= 0 && ord[j] \u003c K && prev[j] === -2) (prev[j] = i), (queue[qt++] = j);\n  }\n  let n = 0;\n  for (let i = end; i >= 0; i = prev[i]) n++;\n  P.pathLen = n;\n  for (let i = end; i >= 0; i = prev[i]) path[i] = --n;\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  lattice(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const g = cl(kv[2], -1, 1), gr = cl(kv[3], 0, 1);\n  P.clock += d;\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  if (P.hold \u003c 0 && (g !== P.grav || gr !== P.grain)) {\n    if (gr !== P.grain) (P.grain = gr), field(P);\n    P.grav = g;\n    compute(P);\n  }\n  P.oldA *= exp(-d / 0.45);\n  P.flash *= exp(-d / 0.4);\n  if (P.hold \u003c 0) {\n    P.budget += (d * P.K * P.speed) / 11;\n    while (P.k \u003c P.K && P.budget >= P.dur[P.k]) (P.budget -= P.dur[P.k]), (P.stepT[P.k] = P.clock), P.k++;\n    if (P.k >= P.K) (P.hold = 0), (P.flash = 1), channel(P);\n  } else if ((P.hold += d) > HOLD) restart(P);\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { r, ord, trap, stepT, path, cr, cg, cb, oldR, oldG, oldB, k, K } = P;\n  const h0 = P.hue, now = P.clock, oa = P.oldA, fl = P.flash, hold = P.hold;\n  hsv(h0 + 0.13, 0.5, 1);\n  const gR = C[0], gG = C[1], gB = C[2];\n  for (let i = 0; i \u003c N; i++) {\n    const o = ord[i];\n    let R, G, B;\n    if (o >= 0 && o \u003c k) {\n      const f = o / K;\n      const age = now - stepT[o];\n      hsv(h0 + 0.45 + 0.28 * f, 0.8, 0.55 + 0.25 * f + 0.2 * fl);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-age / 0.3);\n      if (w > 0.003) (R += (1 - R) * w), (G += (1 - G) * w), (B += (0.95 - B) * w);\n      const j = path[i];\n      if (j >= 0) {\n        const u = cl(hold / 0.6 - j / P.pathLen, 0, 1);\n        if (u > 0) (R += (gR - R) * u), (G += (gG - G) * u), (B += (gB - B) * u);\n      }\n    } else if (trap[i] \u003c= k) {\n      hsv(h0 + 0.95, 0.6, 0.1 + 0.22 * (1 - r[i]));\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-(now - stepT[trap[i] - 1]) / 0.5);\n      if (w > 0.003) (R += (1 - R) * w * 0.6), (G += (0.6 - G) * w * 0.6), (B += (0.8 - B) * w * 0.6);\n    } else {\n      hsv(h0 + 0.08, 0.35, 0.035 + 0.1 * (1 - r[i]) ** 1.5);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    }\n    R *= 255;\n    G *= 255;\n    B *= 255;\n    if (oa > 0.01) (R = Math.max(R, oldR[i] * oa)), (G = Math.max(G, oldG[i] * oa)), (B = Math.max(B, oldB[i] * oa));\n    (cr[i] = R), (cg[i] = G), (cb[i] = B);\n    display.setPixel(i % W, (i / W) | 0, R, G, B);\n  }\n}\n","layer":{"id":"layer-invasion-percolation","type":"code","name":"invasion-percolation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Invasion Percolation\n// Family:  sim\n// Idea:    Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: invasion percolation (David Wilkinson and Jorge Willemsen, 1983), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold.\n// Knob 2: Speed. How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst.\n// Knob 3: Gravity. Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100.\n// Knob 4: Grain. How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes.\n// Buttons: K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.\n\nconst W = 64, H = 128, N = W * H, OUT = N, BIG = 1 \u003c\u003c 30;\nconst { floor, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Threshold tilt from bottom to top at Gravity 1.\nconst GA = 0.7;\n// Seconds the finished cluster stands, its channel lighting in the first 0.6.\nconst HOLD = 1.1;\n// Site percolation threshold of the square lattice (Newman and Ziff, 2000).\n// Of the thresholds the invader takes, 0.4 to 2 in a hundred lie above it.\nconst PC = 0.592746;\nconst JUMP = 17;\nconst INLET = N - W + (W >> 1);\n\n// The normal distribution function, after Abramowitz and Stegun 7.1.26.\nfunction phi(z) {\n  const x = Math.abs(z) / Math.SQRT2, t = 1 / (1 + 0.3275911 * x);\n  const e = 1 - ((((1.061405429 * t - 1.453152027) * t + 1.421413741) * t - 0.284496736) * t + 0.254829592) * t * exp(-x * x);\n  return z \u003c 0 ? 0.5 - 0.5 * e : 0.5 + 0.5 * e;\n}\n\n// Three box blurs of radius 2, across and then down: close to a Gaussian of\n// 2.45 cells.\nfunction blur(a, b) {\n  for (let pass = 0; pass \u003c 6; pass++) {\n    const across = pass % 2 === 0;\n    for (let i = 0; i \u003c N; i++) {\n      const x = i % W, y = (i / W) | 0;\n      let s = 0, n = 0;\n      for (let d = -2; d \u003c= 2; d++) {\n        const xx = across ? x + d : x, yy = across ? y : y + d;\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) (s += a[yy * W + xx]), n++;\n      }\n      b[i] = s / n;\n    }\n    a.set(b);\n  }\n}\n\n// Thresholds: white Gaussian noise mixed with its own blur by Grain, then\n// sent through the normal distribution function, so every cell's threshold\n// is uniform on [0, 1) whatever the grain and only the correlation changes.\nfunction field(P) {\n  const { r, g0, g1 } = P, a = P.grain, b = Math.sqrt(1 - a * a);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const v = b * g0[i] + a * g1[i];\n    r[i] = v;\n    m += v;\n    q += v * v;\n  }\n  m /= N;\n  const sd = Math.sqrt(Math.max(q / N - m * m, 1e-12));\n  for (let i = 0; i \u003c N; i++) r[i] = phi((r[i] - m) / sd);\n}\n\nfunction lattice(P) {\n  const { g0, g1 } = P;\n  for (let i = 0; i \u003c N; i++) g0[i] = Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n  g1.set(g0);\n  blur(g1, P.re);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) (m += g1[i]), (q += g1[i] * g1[i]);\n  m /= N;\n  const sd = Math.sqrt(q / N - m * m);\n  for (let i = 0; i \u003c N; i++) g1[i] = (g1[i] - m) / sd;\n  P.grain = NaN;\n  P.k = 0;\n  P.K = 0;\n  P.budget = 0;\n  P.hold = -1;\n  P.ord.fill(-1);\n  P.trap.fill(BIG);\n  P.path.fill(-1);\n  P.pathLen = 0;\n  P.grav = NaN;\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N + 1), I = () => new Int32Array(N + 1);\n  params.s = {\n    r: F(), re: F(), g0: F(), g1: F(), stepT: F(), dur: F(), cr: F(), cg: F(), cb: F(), oldR: F(), oldG: F(), oldB: F(),\n    seq: I(), ord: I(), path: I(), prev: I(), trap: I(), heap: I(), tmp: I(), cnt: I(), par: I(), nxt: I(), tail: I(), size: I(), join: I(),\n    inv: new Uint8Array(N + 1), inH: new Uint8Array(N + 1), good: new Uint8Array(N + 1),\n    pathLen: 0, k: 0, K: 0, budget: 0, clock: 0, hold: -1, oldA: 0, grav: NaN, grain: NaN, hue: 0, speed: 2, flash: 0,\n  };\n  lattice(params.s);\n}\n\n// From the cells already invaded, runs invasion without trapping to the top\n// row, then walks the run backwards with union-find over the defending cells\n// to learn which steps trapping would have refused and when each pocket of\n// defender was cut off from the top row.\nfunction compute(P) {\n  const { r, re, seq, ord, trap, heap, tmp, cnt, par, nxt, tail, size, join, inv, inH, good } = P;\n  const from = P.k, g = P.grav * GA;\n  for (let i = 0; i \u003c N; i++) re[i] = r[i] - (g * (H - 1 - ((i / W) | 0))) / (H - 1);\n  inv.fill(0);\n  inH.fill(0);\n  for (let j = 0; j \u003c from; j++) inv[seq[j]] = 1;\n  for (let i = 0; i \u003c N; i++) if (!inv[i] && trap[i] > from) (trap[i] = BIG), (ord[i] = -1);\n  let n = 0;\n  const push = (i) => {\n    if (inv[i] || inH[i] || trap[i] \u003c= from) return;\n    inH[i] = 1;\n    const v = re[i];\n    let c = n++;\n    while (c > 0) {\n      const p = (c - 1) >> 1;\n      if (re[heap[p]] \u003c= v) break;\n      heap[c] = heap[p];\n      c = p;\n    }\n    heap[c] = i;\n  };\n  const pop = () => {\n    const top = heap[0], last = heap[--n], v = re[last];\n    let c = 0;\n    for (;;) {\n      let m = 2 * c + 1;\n      if (m >= n) break;\n      if (m + 1 \u003c n && re[heap[m + 1]] \u003c re[heap[m]]) m++;\n      if (re[heap[m]] >= v) break;\n      heap[c] = heap[m];\n      c = m;\n    }\n    heap[c] = last;\n    return top;\n  };\n  const around = (i, f) => {\n    const x = i % W;\n    if (x > 0) f(i - 1);\n    if (x \u003c W - 1) f(i + 1);\n    if (i >= W) f(i - W);\n    if (i \u003c N - W) f(i + W);\n  };\n  push(INLET);\n  for (let j = 0; j \u003c from; j++) around(seq[j], push);\n  let M = 0;\n  while (n > 0) {\n    const i = pop();\n    inH[i] = 0;\n    inv[i] = 2;\n    tmp[M++] = i;\n    if (i \u003c W) break;\n    around(i, push);\n  }\n\n  for (let i = 0; i \u003c= N; i++) (par[i] = i), (nxt[i] = -1), (tail[i] = i), (size[i] = 1), (join[i] = -1);\n  const find = (i) => {\n    while (par[i] !== i) (par[i] = par[par[i]]), (i = par[i]);\n    return i;\n  };\n  let t = M;\n  const unite = (a, b) => {\n    a = find(a);\n    b = find(b);\n    if (a === b) return;\n    if (b === OUT) (b = a), (a = OUT);\n    if (a === OUT) {\n      for (let m = b; m >= 0; m = nxt[m]) join[m] = t;\n      par[b] = OUT;\n      return;\n    }\n    if (size[a] \u003c size[b]) {\n      const s = a;\n      (a = b), (b = s);\n    }\n    par[b] = a;\n    size[a] += size[b];\n    nxt[tail[a]] = b;\n    tail[a] = tail[b];\n  };\n  // The defender joins across corners too: a diagonal gap between two\n  // invaded cells lets it through.\n  const around8 = (i, f) => {\n    const x = i % W, l = x > 0, rr = x \u003c W - 1;\n    if (l) f(i - 1);\n    if (rr) f(i + 1);\n    if (i >= W) {\n      f(i - W);\n      if (l) f(i - W - 1);\n      if (rr) f(i - W + 1);\n    }\n    if (i \u003c N - W) {\n      f(i + W);\n      if (l) f(i + W - 1);\n      if (rr) f(i + W + 1);\n    }\n  };\n  for (let i = 0; i \u003c N; i++) {\n    if (inv[i]) continue;\n    if (i \u003c W) unite(i, OUT);\n    around8(i, (j) => !inv[j] && unite(i, j));\n  }\n  for (t = M - 1; t >= 0; t--) {\n    const c = tmp[t];\n    inv[c] = 0;\n    if (c \u003c W) unite(c, OUT);\n    around8(c, (j) => !inv[j] && unite(c, j));\n    good[t] = find(c) === OUT ? 1 : 0;\n  }\n  let k = from;\n  for (t = 0; t \u003c M; t++) {\n    if (good[t]) (seq[k] = tmp[t]), (ord[tmp[t]] = k), k++;\n    cnt[t] = k;\n  }\n  P.K = k;\n  for (let i = 0; i \u003c N; i++) {\n    if (trap[i] !== BIG || ord[i] >= 0) continue;\n    const j = join[i];\n    if (j >= 0 && j \u003c M) trap[i] = cnt[j];\n  }\n  durations(P);\n}\n\nfunction durations(P) {\n  const { re, seq, dur } = P;\n  let s = 0;\n  for (let k = 0; k \u003c P.K; k++) {\n    dur[k] = exp(JUMP * Math.min(re[seq[k]] - PC, 0.03));\n    s += dur[k];\n  }\n  const m = P.K / Math.max(s, 1e-9);\n  for (let k = 0; k \u003c P.K; k++) dur[k] *= m;\n}\n\n// The channel the invader flows through once it breaks through: the shortest\n// path inside the cluster from the inlet to the cell that reached the top row,\n// found breadth first. Each cell on it keeps its place along the path.\nfunction channel(P) {\n  const { ord, prev, heap: queue, path, seq, K } = P;\n  prev.fill(-2);\n  const end = seq[K - 1];\n  let qh = 0, qt = 0;\n  queue[qt++] = INLET;\n  prev[INLET] = -1;\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i === end) break;\n    const x = i % W;\n    for (const j of [i - W, x > 0 ? i - 1 : -1, x \u003c W - 1 ? i + 1 : -1, i + W])\n      if (j >= 0 && j \u003c N && ord[j] >= 0 && ord[j] \u003c K && prev[j] === -2) (prev[j] = i), (queue[qt++] = j);\n  }\n  let n = 0;\n  for (let i = end; i >= 0; i = prev[i]) n++;\n  P.pathLen = n;\n  for (let i = end; i >= 0; i = prev[i]) path[i] = --n;\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  lattice(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const g = cl(kv[2], -1, 1), gr = cl(kv[3], 0, 1);\n  P.clock += d;\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  if (P.hold \u003c 0 && (g !== P.grav || gr !== P.grain)) {\n    if (gr !== P.grain) (P.grain = gr), field(P);\n    P.grav = g;\n    compute(P);\n  }\n  P.oldA *= exp(-d / 0.45);\n  P.flash *= exp(-d / 0.4);\n  if (P.hold \u003c 0) {\n    P.budget += (d * P.K * P.speed) / 11;\n    while (P.k \u003c P.K && P.budget >= P.dur[P.k]) (P.budget -= P.dur[P.k]), (P.stepT[P.k] = P.clock), P.k++;\n    if (P.k >= P.K) (P.hold = 0), (P.flash = 1), channel(P);\n  } else if ((P.hold += d) > HOLD) restart(P);\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { r, ord, trap, stepT, path, cr, cg, cb, oldR, oldG, oldB, k, K } = P;\n  const h0 = P.hue, now = P.clock, oa = P.oldA, fl = P.flash, hold = P.hold;\n  hsv(h0 + 0.13, 0.5, 1);\n  const gR = C[0], gG = C[1], gB = C[2];\n  for (let i = 0; i \u003c N; i++) {\n    const o = ord[i];\n    let R, G, B;\n    if (o >= 0 && o \u003c k) {\n      const f = o / K;\n      const age = now - stepT[o];\n      hsv(h0 + 0.45 + 0.28 * f, 0.8, 0.55 + 0.25 * f + 0.2 * fl);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-age / 0.3);\n      if (w > 0.003) (R += (1 - R) * w), (G += (1 - G) * w), (B += (0.95 - B) * w);\n      const j = path[i];\n      if (j >= 0) {\n        const u = cl(hold / 0.6 - j / P.pathLen, 0, 1);\n        if (u > 0) (R += (gR - R) * u), (G += (gG - G) * u), (B += (gB - B) * u);\n      }\n    } else if (trap[i] \u003c= k) {\n      hsv(h0 + 0.95, 0.6, 0.1 + 0.22 * (1 - r[i]));\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-(now - stepT[trap[i] - 1]) / 0.5);\n      if (w > 0.003) (R += (1 - R) * w * 0.6), (G += (0.6 - G) * w * 0.6), (B += (0.8 - B) * w * 0.6);\n    } else {\n      hsv(h0 + 0.08, 0.35, 0.035 + 0.1 * (1 - r[i]) ** 1.5);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    }\n    R *= 255;\n    G *= 255;\n    B *= 255;\n    if (oa > 0.01) (R = Math.max(R, oldR[i] * oa)), (G = Math.max(G, oldG[i] * oa)), (B = Math.max(B, oldB[i] * oa));\n    (cr[i] = R), (cg[i] = G), (cb[i] = B);\n    display.setPixel(i % W, (i / W) | 0, R, G, B);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst."},{"name":"Gravity","min":-1,"max":1,"about":"Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100."},{"name":"Grain","min":0,"max":1,"about":"How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes."}],"start":[0,2,0,0.06],"measures":{"motion":0.1366,"detail":0.0909,"edges":0.2189,"complexity":1.5161,"coverage":0.4669,"colour":0.1889,"drift":0.1552},"knobResponse":[0.0576,0.0663,0.1297,0.1267]},{"slug":"isospectral-drums","title":"Isospectral Drums","family":"wave","round":39,"note":"모양이 다른 북 두 개가 위아래에서 같은 높이의 소리로 울려요. 반정사각형 일곱 장으로 지은 고든, 웹, 월퍼트의 북이라 고유값이 하나도 다르지 않고, 가운데 띠의 눈금이 그 고유값이에요. 북마다 제 노드선을 그리며 같은 박자로 떨어요.","idea":"Two drums of different shape, each glued from the same seven half-squares, one above the other, ring in the same eigenmode at the same frequency, one tone where the membrane is up and the opposite tone where it is down with dark nodal lines between, while a strip between them marks their one shared spectrum and the mode they play as they climb it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Isospectral Drums\n// Family:  wave\n// Idea:    Two drums of different shape, each glued from the same seven half-squares, one above the other, ring in the same eigenmode at the same frequency, one tone where the membrane is up and the opposite tone where it is down with dark nodal lines between, while a strip between them marks their one shared spectrum and the mode they play as they climb it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: isospectral drums (Carolyn Gordon, David Webb and Scott Wolpert, 1992), the answer to Mark Kac's \"Can one hear the shape of a drum?\" (1966); the drums built from the Fano plane as Peter Buser, John Conway, Peter Doyle and Klaus-Dieter Semmler did (1994), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Mode=0..24, Beat=0..1\n//\n// Knob 1: Hue. Turns the two tones round the wheel together, always half a turn apart: at 0 the membrane is rose where it is up and aqua where it is down, at 0.1 coral and sky blue, at 0.25 yellow-lime and indigo, at 0.5 aqua and rose, at 0.75 indigo and yellow-lime. Orange and yellow tones are paled a little and lifted up to 1.5 times, so the dim parts of a swing do not turn brown or olive.\n// Knob 2: Speed. At 2 the fundamental swings once in 2.5 s and the 24th mode, 3.3 times higher, in 0.76 s, and on its climb the pair holds each mode 5 s. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Mode. At 0 the drums climb their spectrum on their own from the 6th mode, a step every 5 s at Speed 2, back to the fundamental after the 24th. From 1 to 24 they hold that mode: 1 is a single dome; at 9 the nodal lines are exactly the seams between the seven half-squares, because that mode is the half-square's own lowest mode turned over at every seam; by 24 each drum is cut into eight to ten nodal domains, never laid out the same in the two.\n// Knob 4: Beat. Mixes in the mode three steps up, to half and half at 1. The two frequencies beat and the nodal lines sweep across both drums and come back in the same rhythm, because the two drums share every frequency; the strip lights both modes.\n\nconst W = 64, H = 128;\n// Leg of a half-square in LEDs. A drum spans three legs each way, 58 LEDs\n// with its rim; the lower drum's grid starts at row 70.\nconst S = 19, NG = 3 * S + 1, X0 = 3, TOP = [0, 70];\n// Modes found at setup, and the Lanczos steps that find them.\nconst K = 24, M = 64;\n// The spectrum strip, rows 59 to 68: its axis runs from 0 to 1.05 times the\n// 24th eigenvalue across the drums' width.\nconst AX = 1.05, TICK = [0.7, 0.8, 0.85];\n// Fundamental frequency in Hz at Speed 2; seconds a mode is held on the\n// climb, of which the last XF fade into the next; the mode the climb opens on.\nconst F1 = 0.4, DWELL = 5, XF = 1.2, FIRST = 6;\n// Membrane level where it is flat, so the drums stay in sight between swings.\nconst FLOOR = 0.18;\n// Opening hue: rose up, aqua down.\nconst H0 = 0.96;\nconst { floor, min, max, abs, sqrt, cos, round, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The Fano plane: its seven points are the nonzero vectors (x, y, z) of\n// F2^3, held as the numbers 1 to 7, and so are its seven lines, a line v\n// holding the points p with p.v = 0. Three involutions of PSL(3,2) act on\n// both: a swaps x and z, b swaps y and z, c adds z to x. On lines an element\n// acts by its inverse transpose, which for a and b is themselves and for c\n// adds x to z.\nconst bit = (v, k) => (v >> k) & 1, vec = (x, y, z) => (x \u003c\u003c 2) | (y \u003c\u003c 1) | z;\nconst swapXZ = (v) => vec(bit(v, 0), bit(v, 1), bit(v, 2)), swapYZ = (v) => vec(bit(v, 2), bit(v, 0), bit(v, 1));\nconst ON_POINTS = [swapXZ, swapYZ, (v) => vec(bit(v, 2) ^ bit(v, 0), bit(v, 1), bit(v, 0))];\nconst ON_LINES = [swapXZ, swapYZ, (v) => vec(bit(v, 2), bit(v, 1), bit(v, 2) ^ bit(v, 0))];\n\n// The base tile is the half-square (0,0), (1,0), (0,1); a and b are its\n// legs, c its hypotenuse. Reflection across each, as (x, y) -> (m0 x + m1 y\n// + m4, m2 x + m3 y + m5). Legs on the LED axes and the hypotenuse at 45\n// degrees, so every reflection maps the LED grid onto itself.\nconst REF = [[1, 0, 0, -1, 0, 0], [-1, 0, 0, 1, 0, 0], [0, -1, -1, 0, 1, 1]];\nconst comp = (g, h) => [g[0] * h[0] + g[1] * h[2], g[0] * h[1] + g[1] * h[3], g[2] * h[0] + g[3] * h[2], g[2] * h[1] + g[3] * h[3], g[0] * h[4] + g[1] * h[5] + g[4], g[2] * h[4] + g[3] * h[5] + g[5]];\n\n// Copy i of the tile is glued to copy a(i) across side a, and so on; a\n// side an involution fixes is the drum's rim. The gluings make a tree, so\n// unfolding it from copy 1 places every copy in the plane.\nfunction unfold(inv) {\n  const g = [];\n  g[1] = [1, 0, 0, 1, 0, 0];\n  const q = [1];\n  while (q.length) {\n    const i = q.pop();\n    for (let s = 0; s \u003c 3; s++) {\n      const j = inv[s](i);\n      if (j !== i && !g[j]) {\n        g[j] = comp(g[i], REF[s]);\n        q.push(j);\n      }\n    }\n  }\n  return g.slice(1);\n}\n\n// Each grid point of the drum: 0 outside, 1 on the rim, 2 inside. A point\n// is inside when a step into every one of the eight 45-degree wedges round\n// it stays on the drum; every tile edge runs along a wedge's side.\nfunction drumMask(tiles, flip) {\n  let mx = 1e9, my = 1e9;\n  for (const g of tiles)\n    for (const [u, v] of [[0, 0], [1, 0], [0, 1]]) {\n      mx = min(mx, g[0] * u + g[1] * v + g[4]);\n      my = min(my, g[2] * u + g[3] * v + g[5]);\n    }\n  const on = (x, y) => {\n    for (const g of tiles) {\n      const px = x / S + mx - g[4], py = y / S + my - g[5];\n      const u = g[0] * px + g[2] * py, v = g[1] * px + g[3] * py;\n      if (u > -1e-9 && v > -1e-9 && u + v \u003c 1 + 1e-9) return true;\n    }\n    return false;\n  };\n  const m = new Uint8Array(NG * NG);\n  for (let y = 0; y \u003c NG; y++)\n    for (let x = 0; x \u003c NG; x++) {\n      const gy = flip ? NG - 1 - y : y;\n      if (!on(x, gy)) continue;\n      let all = true;\n      for (const [dx, dy] of [[2, 1], [1, 2], [-1, 2], [-2, 1], [-2, -1], [-1, -2], [1, -2], [2, -1]]) if (!on(x + 0.05 * dx, gy + 0.05 * dy)) all = false;\n      m[y * NG + x] = all ? 2 : 1;\n    }\n  return m;\n}\n\n// Implicit QL on a symmetric tridiagonal matrix (EISPACK's tql2): d the\n// diagonal, e[1..n-1] below it; z starts as the identity and leaves holding\n// the eigenvectors in its columns.\nfunction tql2(n, d, e, z) {\n  for (let i = 1; i \u003c n; i++) e[i - 1] = e[i];\n  e[n - 1] = 0;\n  let f = 0, tst = 0;\n  for (let l = 0; l \u003c n; l++) {\n    tst = max(tst, abs(d[l]) + abs(e[l]));\n    let m = l;\n    while (m \u003c n && abs(e[m]) > 2.2e-16 * tst) m++;\n    if (m > l)\n      do {\n        let g = d[l], p = (d[l + 1] - g) / (2 * e[l]), r = hypot(p, 1);\n        if (p \u003c 0) r = -r;\n        d[l] = e[l] / (p + r);\n        d[l + 1] = e[l] * (p + r);\n        const dl1 = d[l + 1];\n        let h = g - d[l];\n        for (let i = l + 2; i \u003c n; i++) d[i] -= h;\n        f += h;\n        p = d[m];\n        let c = 1, c2 = 1, c3 = 1, s = 0, s2 = 0;\n        const el1 = e[l + 1];\n        for (let i = m - 1; i >= l; i--) {\n          c3 = c2;\n          c2 = c;\n          s2 = s;\n          g = c * e[i];\n          h = c * p;\n          r = hypot(p, e[i]);\n          e[i + 1] = s * r;\n          s = e[i] / r;\n          c = p / r;\n          p = c * d[i] - s * g;\n          d[i + 1] = h + s * (c * g + s * d[i]);\n          for (let k = 0; k \u003c n; k++) {\n            const a = z[k * n + i], b = z[k * n + i + 1];\n            z[k * n + i + 1] = s * a + c * b;\n            z[k * n + i] = c * a - s * b;\n          }\n        }\n        p = (-s * s2 * c3 * el1 * e[l]) / dl1;\n        e[l] = s * p;\n        d[l] = c * p;\n      } while (abs(e[l]) > 2.2e-16 * tst);\n    d[l] += f;\n    e[l] = 0;\n  }\n}\n\n// The lowest K eigenpairs of the 5-point Dirichlet Laplacian on the drum's\n// inside points: Lanczos on its inverse, applied by a banded Cholesky\n// factor, with full reorthogonalisation. Eigenvalues in units of one LED.\n// Every reflection of the gluing maps the LED grid onto itself, so the two\n// pixel drums are isospectral exactly, not only in the limit: both have\n// 1179 inside points and the same 1179 eigenvalues, and the lowest 24 found\n// here for each agree to 1e-11.\nfunction drumModes(mask) {\n  const id = new Int32Array(NG * NG).fill(-1), pos = [];\n  for (let p = 0; p \u003c NG * NG; p++) if (mask[p] === 2) id[p] = pos.push(p) - 1;\n  const n = pos.length;\n  let bw = 1;\n  for (let i = 0; i \u003c n; i++) if (id[pos[i] - NG] >= 0) bw = max(bw, i - id[pos[i] - NG]);\n  const B = bw + 1, L = new Float64Array(n * B);\n  for (let i = 0; i \u003c n; i++)\n    for (let j = max(0, i - bw); j \u003c= i; j++) {\n      const dp = pos[i] - pos[j];\n      let s = i === j ? 4 : dp === 1 || dp === NG ? -1 : 0;\n      for (let k = max(0, i - bw); k \u003c j; k++) s -= L[i * B + i - k] * L[j * B + j - k];\n      L[i * B + i - j] = i === j ? sqrt(s) : s / L[j * B];\n    }\n  const solve = (b, x) => {\n    for (let i = 0; i \u003c n; i++) {\n      let s = b[i];\n      for (let k = max(0, i - bw); k \u003c i; k++) s -= L[i * B + i - k] * x[k];\n      x[i] = s / L[i * B];\n    }\n    for (let i = n - 1; i >= 0; i--) {\n      let s = x[i];\n      for (let k = i + 1; k \u003c= min(n - 1, i + bw); k++) s -= L[k * B + k - i] * x[k];\n      x[i] = s / L[i * B];\n    }\n  };\n  const Q = new Float64Array(M * n), w = new Float64Array(n), d = new Float64Array(M), e = new Float64Array(M);\n  // A fixed start, so both drums and every run find the same modes.\n  let seed = 12345, nn = 0;\n  for (let i = 0; i \u003c n; i++) {\n    seed = (seed * 1103515245 + 12345) >>> 0;\n    Q[i] = seed / 4294967296 - 0.5;\n    nn += Q[i] * Q[i];\n  }\n  for (let i = 0; i \u003c n; i++) Q[i] /= sqrt(nn);\n  for (let j = 0; j \u003c M; j++) {\n    solve(Q.subarray(j * n, j * n + n), w);\n    for (let pass = 0; pass \u003c 2; pass++)\n      for (let i = 0; i \u003c= j; i++) {\n        let dot = 0;\n        for (let k = 0; k \u003c n; k++) dot += w[k] * Q[i * n + k];\n        if (!pass && i === j) d[j] = dot;\n        for (let k = 0; k \u003c n; k++) w[k] -= dot * Q[i * n + k];\n      }\n    let b = 0;\n    for (let k = 0; k \u003c n; k++) b += w[k] * w[k];\n    b = sqrt(b);\n    if (j + 1 \u003c M) {\n      e[j + 1] = b;\n      for (let k = 0; k \u003c n; k++) Q[(j + 1) * n + k] = w[k] / b;\n    }\n  }\n  const z = new Float64Array(M * M);\n  for (let i = 0; i \u003c M; i++) z[i * M + i] = 1;\n  tql2(M, d, e, z);\n  const order = [...d.keys()].sort((a, b) => d[b] - d[a]).slice(0, K);\n  const lam = new Float64Array(K), V = new Float32Array(K * n);\n  order.forEach((col, m) => {\n    lam[m] = 1 / d[col];\n    const v = new Float64Array(n);\n    for (let j = 0; j \u003c M; j++) {\n      const c = z[j * M + col];\n      for (let i = 0; i \u003c n; i++) v[i] += c * Q[j * n + i];\n    }\n    // The sign of a mode is free: its strongest antinode is taken as up.\n    let big = 0;\n    for (let i = 0; i \u003c n; i++) if (abs(v[i]) > abs(big)) big = v[i];\n    for (let i = 0; i \u003c n; i++) V[m * n + i] = v[i] / big;\n  });\n  return { n, pos, lam, V };\n}\n\nexport function setup(params) {\n  // Drum A: copies of the tile at the points; drum B: at the lines.\n  const masks = [drumMask(unfold(ON_POINTS), true), drumMask(unfold(ON_LINES), true)];\n  params.s = {\n    hue: 0, speed: 2, mode: 0, beat: 0.06, t: 0, tour: 0,\n    masks, drums: masks.map(drumModes), w: new Float32Array(K), swing: new Float32Array(K), U: new Float32Array(NG * NG), strip: new Float32Array(W * 10 * 3),\n    up: [0, 0, 0], down: [0, 0, 0], rim: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  S.hue = k[0];\n  S.mode = round(cl(k[2], 0, K));\n  S.beat = cl(k[3], 0, 1);\n  S.t += d;\n  // The modes playing and their shares: one held mode, or on the climb the\n  // mode of this step fading into the next.\n  const w = S.w, base = [];\n  w.fill(0);\n  if (S.mode > 0) base.push([S.mode - 1, 1]);\n  else {\n    S.tour += d;\n    const step = floor(S.tour / DWELL), x = sm(DWELL - XF, DWELL, S.tour - step * DWELL), m = (FIRST - 1 + step) % K;\n    base.push([m, 1 - x], [(m + 1) % K, x]);\n  }\n  // Beat shares each mode with the one three steps above it (below, for\n  // the top three).\n  for (const [m, s] of base) {\n    w[m] += s * (1 - S.beat / 2);\n    w[m + 3 \u003c K ? m + 3 : m - 3] += (s * S.beat) / 2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { up, down, rim, w, U, swing } = S;\n  const lam = S.drums[0].lam, h = S.hue + H0;\n  // Yellow and orange read olive and brown when dim: there the tone is paled\n  // a little and the membrane lifted up to 1.5 times.\n  const warm = (hh) => cl(1.5 - abs(hh - floor(hh) - 0.16) / 0.08, 0, 1), wu = warm(h), wd = warm(h + 0.5);\n  hsv(h, 0.72 - 0.14 * wu, 1, up);\n  hsv(h + 0.5, 0.78 - 0.14 * wd, 1, down);\n  const lift = [1 + 0.5 * wu, 1 + 0.5 * wd];\n  hsv(h + 0.25, 0.12, 0.62, rim);\n  // Each mode swings as cos(omega t), omega in proportion to the square root\n  // of its eigenvalue, and the same omega in both drums.\n  for (let m = 0; m \u003c K; m++) swing[m] = w[m] > 0.002 ? cos(2 * PI * F1 * sqrt(lam[m] / lam[0]) * S.t) : 0;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  S.drums.forEach((D, di) => {\n    const mask = S.masks[di], { n, pos, V } = D, y0 = TOP[di];\n    U.fill(0);\n    let scale = 0;\n    for (let m = 0; m \u003c K; m++) {\n      if (w[m] \u003c= 0.002) continue;\n      const a = w[m] * swing[m];\n      scale += w[m];\n      for (let i = 0; i \u003c n; i++) U[pos[i]] += a * V[m * n + i];\n    }\n    scale = max(scale, 1e-6);\n    for (let gy = 0; gy \u003c NG; gy++)\n      for (let gx = 0; gx \u003c NG; gx++) {\n        const p = gy * NG + gx, kind = mask[p];\n        if (!kind) continue;\n        let r, g, b;\n        if (kind === 1) [r, g, b] = rim;\n        else {\n          // How far the nearest nodal line is, in LEDs: the value over the\n          // slope, the same at every moment of a swing.\n          const u = U[p], sx = (U[p + 1] - U[p - 1]) / 2, sy = (U[p + NG] - U[p - NG]) / 2;\n          const dist = abs(u) / sqrt(sx * sx + sy * sy + 1e-30), node = sm(0.15, 0.85, dist);\n          const a = min(1, abs(u) / scale), tone = u >= 0 ? up : down, wh = 0.35 * a * a * a;\n          const lv = (FLOOR + (1 - FLOOR) * a ** 0.7) * node * lift[u >= 0 ? 0 : 1];\n          r = (tone[0] + (1 - tone[0]) * wh) * lv;\n          g = (tone[1] + (1 - tone[1]) * wh) * lv;\n          b = (tone[2] + (1 - tone[2]) * wh) * lv;\n        }\n        display.setPixel(X0 + gx, y0 + gy, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n      }\n  });\n  // The shared spectrum: a dim tick at every eigenvalue, and the modes\n  // playing lit the full height of the strip, brightest at the top of their\n  // swing and in the tone of the side it swings to.\n  const span = (NG - 1) / (AX * lam[K - 1]), st = S.strip;\n  st.fill(0);\n  for (let m = 0; m \u003c K; m++) {\n    const xf = X0 + lam[m] * span, xi = floor(xf), fr = xf - xi;\n    const tone = swing[m] >= 0 ? up : down, on = cl(w[m] * 1.4, 0, 1) * (0.45 + 0.55 * abs(swing[m]));\n    for (let j = 0; j \u003c 10; j++) {\n      const tick = j >= 2 && j \u003c= 7 ? 0.26 : 0, lit = on * (j === 0 || j === 9 ? 0.5 : 1);\n      for (const [xx, f] of [[xi, 1 - fr], [xi + 1, fr]]) {\n        const q = (j * W + xx) * 3;\n        for (let c = 0; c \u003c 3; c++) st[q + c] += (tick * (1 - lit) * TICK[c] + lit * (tone[c] + (1 - tone[c]) * 0.35)) * f;\n      }\n    }\n  }\n  for (let j = 0; j \u003c 10; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (j * W + x) * 3;\n      display.setPixel(x, 59 + j, round(255 * min(1, st[q])), round(255 * min(1, st[q + 1])), round(255 * min(1, st[q + 2])));\n    }\n}\n","layer":{"id":"layer-isospectral-drums","type":"code","name":"isospectral-drums","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Isospectral Drums\n// Family:  wave\n// Idea:    Two drums of different shape, each glued from the same seven half-squares, one above the other, ring in the same eigenmode at the same frequency, one tone where the membrane is up and the opposite tone where it is down with dark nodal lines between, while a strip between them marks their one shared spectrum and the mode they play as they climb it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: isospectral drums (Carolyn Gordon, David Webb and Scott Wolpert, 1992), the answer to Mark Kac's \"Can one hear the shape of a drum?\" (1966); the drums built from the Fano plane as Peter Buser, John Conway, Peter Doyle and Klaus-Dieter Semmler did (1994), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Mode=0..24, Beat=0..1\n//\n// Knob 1: Hue. Turns the two tones round the wheel together, always half a turn apart: at 0 the membrane is rose where it is up and aqua where it is down, at 0.1 coral and sky blue, at 0.25 yellow-lime and indigo, at 0.5 aqua and rose, at 0.75 indigo and yellow-lime. Orange and yellow tones are paled a little and lifted up to 1.5 times, so the dim parts of a swing do not turn brown or olive.\n// Knob 2: Speed. At 2 the fundamental swings once in 2.5 s and the 24th mode, 3.3 times higher, in 0.76 s, and on its climb the pair holds each mode 5 s. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Mode. At 0 the drums climb their spectrum on their own from the 6th mode, a step every 5 s at Speed 2, back to the fundamental after the 24th. From 1 to 24 they hold that mode: 1 is a single dome; at 9 the nodal lines are exactly the seams between the seven half-squares, because that mode is the half-square's own lowest mode turned over at every seam; by 24 each drum is cut into eight to ten nodal domains, never laid out the same in the two.\n// Knob 4: Beat. Mixes in the mode three steps up, to half and half at 1. The two frequencies beat and the nodal lines sweep across both drums and come back in the same rhythm, because the two drums share every frequency; the strip lights both modes.\n\nconst W = 64, H = 128;\n// Leg of a half-square in LEDs. A drum spans three legs each way, 58 LEDs\n// with its rim; the lower drum's grid starts at row 70.\nconst S = 19, NG = 3 * S + 1, X0 = 3, TOP = [0, 70];\n// Modes found at setup, and the Lanczos steps that find them.\nconst K = 24, M = 64;\n// The spectrum strip, rows 59 to 68: its axis runs from 0 to 1.05 times the\n// 24th eigenvalue across the drums' width.\nconst AX = 1.05, TICK = [0.7, 0.8, 0.85];\n// Fundamental frequency in Hz at Speed 2; seconds a mode is held on the\n// climb, of which the last XF fade into the next; the mode the climb opens on.\nconst F1 = 0.4, DWELL = 5, XF = 1.2, FIRST = 6;\n// Membrane level where it is flat, so the drums stay in sight between swings.\nconst FLOOR = 0.18;\n// Opening hue: rose up, aqua down.\nconst H0 = 0.96;\nconst { floor, min, max, abs, sqrt, cos, round, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The Fano plane: its seven points are the nonzero vectors (x, y, z) of\n// F2^3, held as the numbers 1 to 7, and so are its seven lines, a line v\n// holding the points p with p.v = 0. Three involutions of PSL(3,2) act on\n// both: a swaps x and z, b swaps y and z, c adds z to x. On lines an element\n// acts by its inverse transpose, which for a and b is themselves and for c\n// adds x to z.\nconst bit = (v, k) => (v >> k) & 1, vec = (x, y, z) => (x \u003c\u003c 2) | (y \u003c\u003c 1) | z;\nconst swapXZ = (v) => vec(bit(v, 0), bit(v, 1), bit(v, 2)), swapYZ = (v) => vec(bit(v, 2), bit(v, 0), bit(v, 1));\nconst ON_POINTS = [swapXZ, swapYZ, (v) => vec(bit(v, 2) ^ bit(v, 0), bit(v, 1), bit(v, 0))];\nconst ON_LINES = [swapXZ, swapYZ, (v) => vec(bit(v, 2), bit(v, 1), bit(v, 2) ^ bit(v, 0))];\n\n// The base tile is the half-square (0,0), (1,0), (0,1); a and b are its\n// legs, c its hypotenuse. Reflection across each, as (x, y) -> (m0 x + m1 y\n// + m4, m2 x + m3 y + m5). Legs on the LED axes and the hypotenuse at 45\n// degrees, so every reflection maps the LED grid onto itself.\nconst REF = [[1, 0, 0, -1, 0, 0], [-1, 0, 0, 1, 0, 0], [0, -1, -1, 0, 1, 1]];\nconst comp = (g, h) => [g[0] * h[0] + g[1] * h[2], g[0] * h[1] + g[1] * h[3], g[2] * h[0] + g[3] * h[2], g[2] * h[1] + g[3] * h[3], g[0] * h[4] + g[1] * h[5] + g[4], g[2] * h[4] + g[3] * h[5] + g[5]];\n\n// Copy i of the tile is glued to copy a(i) across side a, and so on; a\n// side an involution fixes is the drum's rim. The gluings make a tree, so\n// unfolding it from copy 1 places every copy in the plane.\nfunction unfold(inv) {\n  const g = [];\n  g[1] = [1, 0, 0, 1, 0, 0];\n  const q = [1];\n  while (q.length) {\n    const i = q.pop();\n    for (let s = 0; s \u003c 3; s++) {\n      const j = inv[s](i);\n      if (j !== i && !g[j]) {\n        g[j] = comp(g[i], REF[s]);\n        q.push(j);\n      }\n    }\n  }\n  return g.slice(1);\n}\n\n// Each grid point of the drum: 0 outside, 1 on the rim, 2 inside. A point\n// is inside when a step into every one of the eight 45-degree wedges round\n// it stays on the drum; every tile edge runs along a wedge's side.\nfunction drumMask(tiles, flip) {\n  let mx = 1e9, my = 1e9;\n  for (const g of tiles)\n    for (const [u, v] of [[0, 0], [1, 0], [0, 1]]) {\n      mx = min(mx, g[0] * u + g[1] * v + g[4]);\n      my = min(my, g[2] * u + g[3] * v + g[5]);\n    }\n  const on = (x, y) => {\n    for (const g of tiles) {\n      const px = x / S + mx - g[4], py = y / S + my - g[5];\n      const u = g[0] * px + g[2] * py, v = g[1] * px + g[3] * py;\n      if (u > -1e-9 && v > -1e-9 && u + v \u003c 1 + 1e-9) return true;\n    }\n    return false;\n  };\n  const m = new Uint8Array(NG * NG);\n  for (let y = 0; y \u003c NG; y++)\n    for (let x = 0; x \u003c NG; x++) {\n      const gy = flip ? NG - 1 - y : y;\n      if (!on(x, gy)) continue;\n      let all = true;\n      for (const [dx, dy] of [[2, 1], [1, 2], [-1, 2], [-2, 1], [-2, -1], [-1, -2], [1, -2], [2, -1]]) if (!on(x + 0.05 * dx, gy + 0.05 * dy)) all = false;\n      m[y * NG + x] = all ? 2 : 1;\n    }\n  return m;\n}\n\n// Implicit QL on a symmetric tridiagonal matrix (EISPACK's tql2): d the\n// diagonal, e[1..n-1] below it; z starts as the identity and leaves holding\n// the eigenvectors in its columns.\nfunction tql2(n, d, e, z) {\n  for (let i = 1; i \u003c n; i++) e[i - 1] = e[i];\n  e[n - 1] = 0;\n  let f = 0, tst = 0;\n  for (let l = 0; l \u003c n; l++) {\n    tst = max(tst, abs(d[l]) + abs(e[l]));\n    let m = l;\n    while (m \u003c n && abs(e[m]) > 2.2e-16 * tst) m++;\n    if (m > l)\n      do {\n        let g = d[l], p = (d[l + 1] - g) / (2 * e[l]), r = hypot(p, 1);\n        if (p \u003c 0) r = -r;\n        d[l] = e[l] / (p + r);\n        d[l + 1] = e[l] * (p + r);\n        const dl1 = d[l + 1];\n        let h = g - d[l];\n        for (let i = l + 2; i \u003c n; i++) d[i] -= h;\n        f += h;\n        p = d[m];\n        let c = 1, c2 = 1, c3 = 1, s = 0, s2 = 0;\n        const el1 = e[l + 1];\n        for (let i = m - 1; i >= l; i--) {\n          c3 = c2;\n          c2 = c;\n          s2 = s;\n          g = c * e[i];\n          h = c * p;\n          r = hypot(p, e[i]);\n          e[i + 1] = s * r;\n          s = e[i] / r;\n          c = p / r;\n          p = c * d[i] - s * g;\n          d[i + 1] = h + s * (c * g + s * d[i]);\n          for (let k = 0; k \u003c n; k++) {\n            const a = z[k * n + i], b = z[k * n + i + 1];\n            z[k * n + i + 1] = s * a + c * b;\n            z[k * n + i] = c * a - s * b;\n          }\n        }\n        p = (-s * s2 * c3 * el1 * e[l]) / dl1;\n        e[l] = s * p;\n        d[l] = c * p;\n      } while (abs(e[l]) > 2.2e-16 * tst);\n    d[l] += f;\n    e[l] = 0;\n  }\n}\n\n// The lowest K eigenpairs of the 5-point Dirichlet Laplacian on the drum's\n// inside points: Lanczos on its inverse, applied by a banded Cholesky\n// factor, with full reorthogonalisation. Eigenvalues in units of one LED.\n// Every reflection of the gluing maps the LED grid onto itself, so the two\n// pixel drums are isospectral exactly, not only in the limit: both have\n// 1179 inside points and the same 1179 eigenvalues, and the lowest 24 found\n// here for each agree to 1e-11.\nfunction drumModes(mask) {\n  const id = new Int32Array(NG * NG).fill(-1), pos = [];\n  for (let p = 0; p \u003c NG * NG; p++) if (mask[p] === 2) id[p] = pos.push(p) - 1;\n  const n = pos.length;\n  let bw = 1;\n  for (let i = 0; i \u003c n; i++) if (id[pos[i] - NG] >= 0) bw = max(bw, i - id[pos[i] - NG]);\n  const B = bw + 1, L = new Float64Array(n * B);\n  for (let i = 0; i \u003c n; i++)\n    for (let j = max(0, i - bw); j \u003c= i; j++) {\n      const dp = pos[i] - pos[j];\n      let s = i === j ? 4 : dp === 1 || dp === NG ? -1 : 0;\n      for (let k = max(0, i - bw); k \u003c j; k++) s -= L[i * B + i - k] * L[j * B + j - k];\n      L[i * B + i - j] = i === j ? sqrt(s) : s / L[j * B];\n    }\n  const solve = (b, x) => {\n    for (let i = 0; i \u003c n; i++) {\n      let s = b[i];\n      for (let k = max(0, i - bw); k \u003c i; k++) s -= L[i * B + i - k] * x[k];\n      x[i] = s / L[i * B];\n    }\n    for (let i = n - 1; i >= 0; i--) {\n      let s = x[i];\n      for (let k = i + 1; k \u003c= min(n - 1, i + bw); k++) s -= L[k * B + k - i] * x[k];\n      x[i] = s / L[i * B];\n    }\n  };\n  const Q = new Float64Array(M * n), w = new Float64Array(n), d = new Float64Array(M), e = new Float64Array(M);\n  // A fixed start, so both drums and every run find the same modes.\n  let seed = 12345, nn = 0;\n  for (let i = 0; i \u003c n; i++) {\n    seed = (seed * 1103515245 + 12345) >>> 0;\n    Q[i] = seed / 4294967296 - 0.5;\n    nn += Q[i] * Q[i];\n  }\n  for (let i = 0; i \u003c n; i++) Q[i] /= sqrt(nn);\n  for (let j = 0; j \u003c M; j++) {\n    solve(Q.subarray(j * n, j * n + n), w);\n    for (let pass = 0; pass \u003c 2; pass++)\n      for (let i = 0; i \u003c= j; i++) {\n        let dot = 0;\n        for (let k = 0; k \u003c n; k++) dot += w[k] * Q[i * n + k];\n        if (!pass && i === j) d[j] = dot;\n        for (let k = 0; k \u003c n; k++) w[k] -= dot * Q[i * n + k];\n      }\n    let b = 0;\n    for (let k = 0; k \u003c n; k++) b += w[k] * w[k];\n    b = sqrt(b);\n    if (j + 1 \u003c M) {\n      e[j + 1] = b;\n      for (let k = 0; k \u003c n; k++) Q[(j + 1) * n + k] = w[k] / b;\n    }\n  }\n  const z = new Float64Array(M * M);\n  for (let i = 0; i \u003c M; i++) z[i * M + i] = 1;\n  tql2(M, d, e, z);\n  const order = [...d.keys()].sort((a, b) => d[b] - d[a]).slice(0, K);\n  const lam = new Float64Array(K), V = new Float32Array(K * n);\n  order.forEach((col, m) => {\n    lam[m] = 1 / d[col];\n    const v = new Float64Array(n);\n    for (let j = 0; j \u003c M; j++) {\n      const c = z[j * M + col];\n      for (let i = 0; i \u003c n; i++) v[i] += c * Q[j * n + i];\n    }\n    // The sign of a mode is free: its strongest antinode is taken as up.\n    let big = 0;\n    for (let i = 0; i \u003c n; i++) if (abs(v[i]) > abs(big)) big = v[i];\n    for (let i = 0; i \u003c n; i++) V[m * n + i] = v[i] / big;\n  });\n  return { n, pos, lam, V };\n}\n\nexport function setup(params) {\n  // Drum A: copies of the tile at the points; drum B: at the lines.\n  const masks = [drumMask(unfold(ON_POINTS), true), drumMask(unfold(ON_LINES), true)];\n  params.s = {\n    hue: 0, speed: 2, mode: 0, beat: 0.06, t: 0, tour: 0,\n    masks, drums: masks.map(drumModes), w: new Float32Array(K), swing: new Float32Array(K), U: new Float32Array(NG * NG), strip: new Float32Array(W * 10 * 3),\n    up: [0, 0, 0], down: [0, 0, 0], rim: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  S.hue = k[0];\n  S.mode = round(cl(k[2], 0, K));\n  S.beat = cl(k[3], 0, 1);\n  S.t += d;\n  // The modes playing and their shares: one held mode, or on the climb the\n  // mode of this step fading into the next.\n  const w = S.w, base = [];\n  w.fill(0);\n  if (S.mode > 0) base.push([S.mode - 1, 1]);\n  else {\n    S.tour += d;\n    const step = floor(S.tour / DWELL), x = sm(DWELL - XF, DWELL, S.tour - step * DWELL), m = (FIRST - 1 + step) % K;\n    base.push([m, 1 - x], [(m + 1) % K, x]);\n  }\n  // Beat shares each mode with the one three steps above it (below, for\n  // the top three).\n  for (const [m, s] of base) {\n    w[m] += s * (1 - S.beat / 2);\n    w[m + 3 \u003c K ? m + 3 : m - 3] += (s * S.beat) / 2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { up, down, rim, w, U, swing } = S;\n  const lam = S.drums[0].lam, h = S.hue + H0;\n  // Yellow and orange read olive and brown when dim: there the tone is paled\n  // a little and the membrane lifted up to 1.5 times.\n  const warm = (hh) => cl(1.5 - abs(hh - floor(hh) - 0.16) / 0.08, 0, 1), wu = warm(h), wd = warm(h + 0.5);\n  hsv(h, 0.72 - 0.14 * wu, 1, up);\n  hsv(h + 0.5, 0.78 - 0.14 * wd, 1, down);\n  const lift = [1 + 0.5 * wu, 1 + 0.5 * wd];\n  hsv(h + 0.25, 0.12, 0.62, rim);\n  // Each mode swings as cos(omega t), omega in proportion to the square root\n  // of its eigenvalue, and the same omega in both drums.\n  for (let m = 0; m \u003c K; m++) swing[m] = w[m] > 0.002 ? cos(2 * PI * F1 * sqrt(lam[m] / lam[0]) * S.t) : 0;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  S.drums.forEach((D, di) => {\n    const mask = S.masks[di], { n, pos, V } = D, y0 = TOP[di];\n    U.fill(0);\n    let scale = 0;\n    for (let m = 0; m \u003c K; m++) {\n      if (w[m] \u003c= 0.002) continue;\n      const a = w[m] * swing[m];\n      scale += w[m];\n      for (let i = 0; i \u003c n; i++) U[pos[i]] += a * V[m * n + i];\n    }\n    scale = max(scale, 1e-6);\n    for (let gy = 0; gy \u003c NG; gy++)\n      for (let gx = 0; gx \u003c NG; gx++) {\n        const p = gy * NG + gx, kind = mask[p];\n        if (!kind) continue;\n        let r, g, b;\n        if (kind === 1) [r, g, b] = rim;\n        else {\n          // How far the nearest nodal line is, in LEDs: the value over the\n          // slope, the same at every moment of a swing.\n          const u = U[p], sx = (U[p + 1] - U[p - 1]) / 2, sy = (U[p + NG] - U[p - NG]) / 2;\n          const dist = abs(u) / sqrt(sx * sx + sy * sy + 1e-30), node = sm(0.15, 0.85, dist);\n          const a = min(1, abs(u) / scale), tone = u >= 0 ? up : down, wh = 0.35 * a * a * a;\n          const lv = (FLOOR + (1 - FLOOR) * a ** 0.7) * node * lift[u >= 0 ? 0 : 1];\n          r = (tone[0] + (1 - tone[0]) * wh) * lv;\n          g = (tone[1] + (1 - tone[1]) * wh) * lv;\n          b = (tone[2] + (1 - tone[2]) * wh) * lv;\n        }\n        display.setPixel(X0 + gx, y0 + gy, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n      }\n  });\n  // The shared spectrum: a dim tick at every eigenvalue, and the modes\n  // playing lit the full height of the strip, brightest at the top of their\n  // swing and in the tone of the side it swings to.\n  const span = (NG - 1) / (AX * lam[K - 1]), st = S.strip;\n  st.fill(0);\n  for (let m = 0; m \u003c K; m++) {\n    const xf = X0 + lam[m] * span, xi = floor(xf), fr = xf - xi;\n    const tone = swing[m] >= 0 ? up : down, on = cl(w[m] * 1.4, 0, 1) * (0.45 + 0.55 * abs(swing[m]));\n    for (let j = 0; j \u003c 10; j++) {\n      const tick = j >= 2 && j \u003c= 7 ? 0.26 : 0, lit = on * (j === 0 || j === 9 ? 0.5 : 1);\n      for (const [xx, f] of [[xi, 1 - fr], [xi + 1, fr]]) {\n        const q = (j * W + xx) * 3;\n        for (let c = 0; c \u003c 3; c++) st[q + c] += (tick * (1 - lit) * TICK[c] + lit * (tone[c] + (1 - tone[c]) * 0.35)) * f;\n      }\n    }\n  }\n  for (let j = 0; j \u003c 10; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (j * W + x) * 3;\n      display.setPixel(x, 59 + j, round(255 * min(1, st[q])), round(255 * min(1, st[q + 1])), round(255 * min(1, st[q + 2])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Mode=0..24, Beat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two tones round the wheel together, always half a turn apart: at 0 the membrane is rose where it is up and aqua where it is down, at 0.1 coral and sky blue, at 0.25 yellow-lime and indigo, at 0.5 aqua and rose, at 0.75 indigo and yellow-lime. Orange and yellow tones are paled a little and lifted up to 1.5 times, so the dim parts of a swing do not turn brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the fundamental swings once in 2.5 s and the 24th mode, 3.3 times higher, in 0.76 s, and on its climb the pair holds each mode 5 s. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Mode","min":0,"max":24,"about":"At 0 the drums climb their spectrum on their own from the 6th mode, a step every 5 s at Speed 2, back to the fundamental after the 24th. From 1 to 24 they hold that mode: 1 is a single dome; at 9 the nodal lines are exactly the seams between the seven half-squares, because that mode is the half-square's own lowest mode turned over at every seam; by 24 each drum is cut into eight to ten nodal domains, never laid out the same in the two."},{"name":"Beat","min":0,"max":1,"about":"Mixes in the mode three steps up, to half and half at 1. The two frequencies beat and the nodal lines sweep across both drums and come back in the same rhythm, because the two drums share every frequency; the strip lights both modes."}],"start":[0,2,0,0.06],"measures":{"motion":0.2952,"detail":0.0452,"edges":0.3635,"complexity":0.7651,"coverage":0.3333,"colour":0.1729,"drift":0.0914},"knobResponse":[0.0911,0.0611,0.0587,0.04]},{"slug":"ivy","title":"Ivy","family":"growth","round":15,"note":"돌담을 타고 담쟁이가 꼭대기까지 올라요. 바람이 잎을 뒤집어 옅은 뒷면이 물결치고, 가을이면 잎이 노랑에서 진홍으로 물들어 떨어져요. 겨울에는 맨 줄기에 검푸른 열매가 남아요.","idea":"Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.","buttons":"K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.","code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-ivy","type":"code","name":"ivy","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it."},{"name":"Vines","min":2,"max":6,"about":"How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither."},{"name":"Wind","min":-1,"max":1,"about":"Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away."}],"start":[0,2,2,0.06],"measures":{"motion":0.0893,"detail":0.1136,"edges":0.3366,"complexity":2.0732,"coverage":0.8558,"colour":0.304,"drift":0.0713},"knobResponse":[0.1737,0.0489,0.1412,0.1012]},{"slug":"j-invariant","title":"J-Invariant","family":"fractal","round":29,"note":"클라인의 j 함수를 위 반평면에 칠해요. j 가 위쪽 값으로 보내는 삼각형은 옅은 금색, 아래쪽 값으로 보내는 삼각형은 짙은 파랑이라 같은 타일이 패널 아래 실수축으로 갈수록 잘게 되풀이되고, j 의 크기를 나눈 등고선 띠가 영점마다 흘러나와요. K3 을 돌리면 실수축 쪽으로 여덟 배까지 다가가고, K1 을 누르면 빛이 맨 위 타일부터 세대마다 아래로 번져요.","idea":"Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.","buttons":"K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.","code":"// ===== Patternflow pattern =====\n// Title:   J-Invariant\n// Family:  fractal\n// Idea:    Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the modular j-invariant (Richard Dedekind, 1877; Felix Klein, 1878), drawn by domain colouring, pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue.\n// Knob 2: Speed. At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower.\n// Knob 3: Depth. Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel.\n// Knob 4: Bands. The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat.\n// Buttons: K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, atan2, sqrt, abs, round, asinh, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// Re units per LED at Depth 0, and how far below the bottom row the real\n// axis lies, in LEDs.\nconst S0 = 1 / 96, GAP = 0.5;\n\n// One point of the half-plane: it is carried into the fundamental domain\n// |Re t| \u003c= 1/2, |t| >= 1 by t -> t + n and t -> -1/t, and j is read off\n// there, where |q| = |e^(2 pi i t)| \u003c= e^(-pi sqrt 3) \u003c 0.0044, so five terms\n// of each q-series are exact to the last bit that shows. The results land in\n// OUT: log|j|, arg j, how fast log j turns per unit of the original t, how\n// many times t -> -1/t was taken (the tile's generation, counted down from\n// the top) and the point in the fundamental domain.\nconst OUT = new Float64Array(6);\nfunction jAt(x, y) {\n  const y0 = y;\n  let gen = 0;\n  for (; gen \u003c 60; gen++) {\n    x -= round(x);\n    const r2 = x * x + y * y;\n    if (r2 >= 1) break;\n    x = -x / r2;\n    y = y / r2;\n  }\n  // q = e^(2 pi i t); E4 and E6 by their divisor sums, and the log of the\n  // eta product as L = sum sigma(m)/m q^m, so Delta = q e^(-24 L) and\n  // j = E4^3 / Delta.\n  const m = exp(-TAU * y), qr = m * cos(TAU * x), qi = m * sin(TAU * x);\n  const q2r = qr * qr - qi * qi, q2i = 2 * qr * qi;\n  const q3r = q2r * qr - q2i * qi, q3i = q2r * qi + q2i * qr;\n  const q4r = q2r * q2r - q2i * q2i, q4i = 2 * q2r * q2i;\n  const q5r = q4r * qr - q4i * qi, q5i = q4r * qi + q4i * qr;\n  const e4r = 1 + 240 * (qr + 9 * q2r + 28 * q3r + 73 * q4r + 126 * q5r);\n  const e4i = 240 * (qi + 9 * q2i + 28 * q3i + 73 * q4i + 126 * q5i);\n  const e6r = 1 - 504 * (qr + 33 * q2r + 244 * q3r + 1057 * q4r + 3126 * q5r);\n  const e6i = -504 * (qi + 33 * q2i + 244 * q3i + 1057 * q4i + 3126 * q5i);\n  const Lr = qr + 1.5 * q2r + (4 / 3) * q3r + 1.75 * q4r + 1.2 * q5r;\n  const Li = qi + 1.5 * q2i + (4 / 3) * q3i + 1.75 * q4i + 1.2 * q5i;\n  const a4 = e4r * e4r + e4i * e4i + 1e-30;\n  OUT[0] = 1.5 * log(a4) + TAU * y + 24 * Lr;\n  OUT[1] = 3 * atan2(e4i, e4r) - TAU * x + 24 * Li;\n  // d log j / dt = -2 pi i E6 / E4 (Ramanujan's identities), and the map\n  // into the domain shrinks lengths by y / y0.\n  OUT[2] = TAU * sqrt((e6r * e6r + e6i * e6i) / a4) * (y / y0);\n  OUT[3] = gen;\n  OUT[4] = x;\n  OUT[5] = y;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The phase palette. Where j is real the half-plane is cut into Klein's\n// triangles, and j maps each triangle onto one half of the plane of values:\n// those onto Im j > 0 take the light family, those onto Im j \u003c 0 the dark\n// one, so the two alternate across every edge as in Klein's own figure.\n// Across a triangle the phase runs through pi; f runs along a family from the\n// edge where j > 0 to the edge where j \u003c 0. 64 steps each, then the mean\n// colour the two families blend to where the triangles are too small to draw.\nconst PN = 64;\nfunction palette(P) {\n  const t = P.pal;\n  for (let f = 0; f \u003c PN; f++) {\n    const u = f / (PN - 1);\n    hsv(P.hue + 0.13 - 0.11 * u, 0.5 + 0.25 * u, 1, t, f * 3);\n    // A dark orange or olive reads as brown, so the dark family lifts its\n    // light where its hue passes through them.\n    let h = P.hue + 0.58 + 0.16 * u;\n    h -= floor(h);\n    const lift = max(0, 1 - abs(h - 0.13) / 0.14);\n    hsv(h, 0.9, 0.5 + 0.08 * u + 0.38 * lift, t, (PN + f) * 3);\n  }\n  for (let c = 0; c \u003c 3; c++) {\n    let a = 0;\n    for (let f = 0; f \u003c 2 * PN; f++) a += t[f * 3 + c];\n    t[2 * PN * 3 + c] = a / (2 * PN);\n  }\n  P.palHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = { x: 0.18, flow: 0, hue: 0, depth: 0, bands: 0.06, gold: 0, g: 0, wave: -1, pal: new Float32Array((2 * PN + 1) * 3), palHue: -1, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.depth = cl(k[2], 0, 1);\n  P.bands = cl(k[3], 0, 1);\n  // The window slides about four LEDs a second at Speed 2, whatever the\n  // zoom. j repeats every 1 along the axis.\n  const s = S0 * 8 ** -P.depth;\n  P.x = (P.x + d * sp * 2 * s) % 1;\n  P.flow += d * sp * 0.22;\n  const b = input.btnPressed || [];\n  // K1 sends a wave of light down the generations, two and a half a\n  // second; K2 lays the gold edges on or takes them off.\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 30 ? -1 : P.wave + d * 2.5;\n  if (b[1]) P.gold = 1 - P.gold;\n  P.g += (P.gold - P.g) * min(1, d * 5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const s = S0 * 8 ** -P.depth, buf = P.buf, pal = P.pal, MEAN = 2 * PN * 3;\n  // Bands: nepers of |j| per band, how much of each band is ramp, and how\n  // dark a band starts.\n  const L = 2.2 * 0.18 ** P.bands, ramp = 0.85 - 0.6 * P.bands, lo = 0.6 - 0.32 * P.bands;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const y = (H - py - 0.5 + GAP) * s;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      jAt(P.x + (px + 0.5 - W / 2) * s, y);\n      // How fast log j turns per LED. Near an image of i it stalls while\n      // the tiles round it stay small, so the tile size at this height,\n      // about y, sets a floor; and the last rows above the axis, where every\n      // tile is a few LEDs at most, fade whatever it says.\n      const g = max(OUT[2] * s, (5 * s) / y), hf = sm(2.5, 9, y / s);\n      // A band or a phase turn per LED or more cannot be drawn; the colour\n      // there would be static. Contrast and colour fade as they crowd, and\n      // the light with them, so the cusps and the axis sink into the dark\n      // instead of shimmering.\n      const cb = (1 - sm(0.25, 0.55, g / L)) * hf, ch = (1 - sm(0.3, 0.7, g / PI)) * hf;\n      let u = OUT[0] / L - P.flow;\n      u -= floor(u);\n      // A sawtooth: each band brightens slowly and drops at its edge.\n      const saw = u \u003c ramp ? u / ramp : (1 - u) / (1 - ramp);\n      const v = ((lo + (1 - lo) * saw) * cb + 0.78 * (1 - cb)) * (0.3 + 0.7 * ch);\n      let a = OUT[1] / TAU;\n      a -= floor(a);\n      const up = a \u003c 0.5, f = up ? 2 * a : 2 - 2 * a, fi = (f * (PN - 1)) | 0, o = (up ? fi : PN + fi) * 3;\n      // Half an LED either side of a triangle edge the two families blend.\n      const e = (min(f, 1 - f) * PI) / g, w = e \u003c 0.5 ? 0.5 - e : 0, o2 = (up ? PN + fi : fi) * 3;\n      let r = pal[o] + (pal[o2] - pal[o]) * w, gg = pal[o + 1] + (pal[o2 + 1] - pal[o + 1]) * w, b = pal[o + 2] + (pal[o2 + 2] - pal[o + 2]) * w;\n      r = (r * ch + pal[MEAN] * (1 - ch)) * v * 255;\n      gg = (gg * ch + pal[MEAN + 1] * (1 - ch)) * v * 255;\n      b = (b * ch + pal[MEAN + 2] * (1 - ch)) * v * 255;\n      if (P.wave >= 0) {\n        // The wave: a tile flares as the front reaches its generation and\n        // keeps a little of the light for a while after.\n        const dw = P.wave - OUT[3], fl = max(exp(-dw * dw * 3), dw > 0 ? 0.35 * exp(-dw * 0.7) : 0) * (0.3 + 0.7 * ch);\n        r += (255 - r) * fl * 0.8;\n        gg += (250 - gg) * fl * 0.8;\n        b += (235 - b) * fl * 0.8;\n      }\n      if (P.g > 0.01) {\n        // The tile edges as gold geodesics a LED wide, faded where the\n        // tiles are too small to draw. The hyperbolic distance to the nearer\n        // of the walls Re = +-1/2 and the floor |t| = 1, times y, is the\n        // distance on the panel.\n        const X = OUT[4], Y = OUT[5], e2 = (asinh(min(0.5 - abs(X), (X * X + Y * Y - 1) / 2) / Y) * y) / s;\n        const w2 = cl(1.1 - e2, 0, 1) * P.g * ch;\n        r += (255 - r) * w2;\n        gg += (205 - gg) * w2;\n        b += (90 - b) * w2;\n      }\n      buf[p] = r;\n      buf[p + 1] = gg;\n      buf[p + 2] = b;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-j-invariant","type":"code","name":"j-invariant","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   J-Invariant\n// Family:  fractal\n// Idea:    Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the modular j-invariant (Richard Dedekind, 1877; Felix Klein, 1878), drawn by domain colouring, pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue.\n// Knob 2: Speed. At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower.\n// Knob 3: Depth. Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel.\n// Knob 4: Bands. The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat.\n// Buttons: K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, atan2, sqrt, abs, round, asinh, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// Re units per LED at Depth 0, and how far below the bottom row the real\n// axis lies, in LEDs.\nconst S0 = 1 / 96, GAP = 0.5;\n\n// One point of the half-plane: it is carried into the fundamental domain\n// |Re t| \u003c= 1/2, |t| >= 1 by t -> t + n and t -> -1/t, and j is read off\n// there, where |q| = |e^(2 pi i t)| \u003c= e^(-pi sqrt 3) \u003c 0.0044, so five terms\n// of each q-series are exact to the last bit that shows. The results land in\n// OUT: log|j|, arg j, how fast log j turns per unit of the original t, how\n// many times t -> -1/t was taken (the tile's generation, counted down from\n// the top) and the point in the fundamental domain.\nconst OUT = new Float64Array(6);\nfunction jAt(x, y) {\n  const y0 = y;\n  let gen = 0;\n  for (; gen \u003c 60; gen++) {\n    x -= round(x);\n    const r2 = x * x + y * y;\n    if (r2 >= 1) break;\n    x = -x / r2;\n    y = y / r2;\n  }\n  // q = e^(2 pi i t); E4 and E6 by their divisor sums, and the log of the\n  // eta product as L = sum sigma(m)/m q^m, so Delta = q e^(-24 L) and\n  // j = E4^3 / Delta.\n  const m = exp(-TAU * y), qr = m * cos(TAU * x), qi = m * sin(TAU * x);\n  const q2r = qr * qr - qi * qi, q2i = 2 * qr * qi;\n  const q3r = q2r * qr - q2i * qi, q3i = q2r * qi + q2i * qr;\n  const q4r = q2r * q2r - q2i * q2i, q4i = 2 * q2r * q2i;\n  const q5r = q4r * qr - q4i * qi, q5i = q4r * qi + q4i * qr;\n  const e4r = 1 + 240 * (qr + 9 * q2r + 28 * q3r + 73 * q4r + 126 * q5r);\n  const e4i = 240 * (qi + 9 * q2i + 28 * q3i + 73 * q4i + 126 * q5i);\n  const e6r = 1 - 504 * (qr + 33 * q2r + 244 * q3r + 1057 * q4r + 3126 * q5r);\n  const e6i = -504 * (qi + 33 * q2i + 244 * q3i + 1057 * q4i + 3126 * q5i);\n  const Lr = qr + 1.5 * q2r + (4 / 3) * q3r + 1.75 * q4r + 1.2 * q5r;\n  const Li = qi + 1.5 * q2i + (4 / 3) * q3i + 1.75 * q4i + 1.2 * q5i;\n  const a4 = e4r * e4r + e4i * e4i + 1e-30;\n  OUT[0] = 1.5 * log(a4) + TAU * y + 24 * Lr;\n  OUT[1] = 3 * atan2(e4i, e4r) - TAU * x + 24 * Li;\n  // d log j / dt = -2 pi i E6 / E4 (Ramanujan's identities), and the map\n  // into the domain shrinks lengths by y / y0.\n  OUT[2] = TAU * sqrt((e6r * e6r + e6i * e6i) / a4) * (y / y0);\n  OUT[3] = gen;\n  OUT[4] = x;\n  OUT[5] = y;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The phase palette. Where j is real the half-plane is cut into Klein's\n// triangles, and j maps each triangle onto one half of the plane of values:\n// those onto Im j > 0 take the light family, those onto Im j \u003c 0 the dark\n// one, so the two alternate across every edge as in Klein's own figure.\n// Across a triangle the phase runs through pi; f runs along a family from the\n// edge where j > 0 to the edge where j \u003c 0. 64 steps each, then the mean\n// colour the two families blend to where the triangles are too small to draw.\nconst PN = 64;\nfunction palette(P) {\n  const t = P.pal;\n  for (let f = 0; f \u003c PN; f++) {\n    const u = f / (PN - 1);\n    hsv(P.hue + 0.13 - 0.11 * u, 0.5 + 0.25 * u, 1, t, f * 3);\n    // A dark orange or olive reads as brown, so the dark family lifts its\n    // light where its hue passes through them.\n    let h = P.hue + 0.58 + 0.16 * u;\n    h -= floor(h);\n    const lift = max(0, 1 - abs(h - 0.13) / 0.14);\n    hsv(h, 0.9, 0.5 + 0.08 * u + 0.38 * lift, t, (PN + f) * 3);\n  }\n  for (let c = 0; c \u003c 3; c++) {\n    let a = 0;\n    for (let f = 0; f \u003c 2 * PN; f++) a += t[f * 3 + c];\n    t[2 * PN * 3 + c] = a / (2 * PN);\n  }\n  P.palHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = { x: 0.18, flow: 0, hue: 0, depth: 0, bands: 0.06, gold: 0, g: 0, wave: -1, pal: new Float32Array((2 * PN + 1) * 3), palHue: -1, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.depth = cl(k[2], 0, 1);\n  P.bands = cl(k[3], 0, 1);\n  // The window slides about four LEDs a second at Speed 2, whatever the\n  // zoom. j repeats every 1 along the axis.\n  const s = S0 * 8 ** -P.depth;\n  P.x = (P.x + d * sp * 2 * s) % 1;\n  P.flow += d * sp * 0.22;\n  const b = input.btnPressed || [];\n  // K1 sends a wave of light down the generations, two and a half a\n  // second; K2 lays the gold edges on or takes them off.\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 30 ? -1 : P.wave + d * 2.5;\n  if (b[1]) P.gold = 1 - P.gold;\n  P.g += (P.gold - P.g) * min(1, d * 5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const s = S0 * 8 ** -P.depth, buf = P.buf, pal = P.pal, MEAN = 2 * PN * 3;\n  // Bands: nepers of |j| per band, how much of each band is ramp, and how\n  // dark a band starts.\n  const L = 2.2 * 0.18 ** P.bands, ramp = 0.85 - 0.6 * P.bands, lo = 0.6 - 0.32 * P.bands;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const y = (H - py - 0.5 + GAP) * s;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      jAt(P.x + (px + 0.5 - W / 2) * s, y);\n      // How fast log j turns per LED. Near an image of i it stalls while\n      // the tiles round it stay small, so the tile size at this height,\n      // about y, sets a floor; and the last rows above the axis, where every\n      // tile is a few LEDs at most, fade whatever it says.\n      const g = max(OUT[2] * s, (5 * s) / y), hf = sm(2.5, 9, y / s);\n      // A band or a phase turn per LED or more cannot be drawn; the colour\n      // there would be static. Contrast and colour fade as they crowd, and\n      // the light with them, so the cusps and the axis sink into the dark\n      // instead of shimmering.\n      const cb = (1 - sm(0.25, 0.55, g / L)) * hf, ch = (1 - sm(0.3, 0.7, g / PI)) * hf;\n      let u = OUT[0] / L - P.flow;\n      u -= floor(u);\n      // A sawtooth: each band brightens slowly and drops at its edge.\n      const saw = u \u003c ramp ? u / ramp : (1 - u) / (1 - ramp);\n      const v = ((lo + (1 - lo) * saw) * cb + 0.78 * (1 - cb)) * (0.3 + 0.7 * ch);\n      let a = OUT[1] / TAU;\n      a -= floor(a);\n      const up = a \u003c 0.5, f = up ? 2 * a : 2 - 2 * a, fi = (f * (PN - 1)) | 0, o = (up ? fi : PN + fi) * 3;\n      // Half an LED either side of a triangle edge the two families blend.\n      const e = (min(f, 1 - f) * PI) / g, w = e \u003c 0.5 ? 0.5 - e : 0, o2 = (up ? PN + fi : fi) * 3;\n      let r = pal[o] + (pal[o2] - pal[o]) * w, gg = pal[o + 1] + (pal[o2 + 1] - pal[o + 1]) * w, b = pal[o + 2] + (pal[o2 + 2] - pal[o + 2]) * w;\n      r = (r * ch + pal[MEAN] * (1 - ch)) * v * 255;\n      gg = (gg * ch + pal[MEAN + 1] * (1 - ch)) * v * 255;\n      b = (b * ch + pal[MEAN + 2] * (1 - ch)) * v * 255;\n      if (P.wave >= 0) {\n        // The wave: a tile flares as the front reaches its generation and\n        // keeps a little of the light for a while after.\n        const dw = P.wave - OUT[3], fl = max(exp(-dw * dw * 3), dw > 0 ? 0.35 * exp(-dw * 0.7) : 0) * (0.3 + 0.7 * ch);\n        r += (255 - r) * fl * 0.8;\n        gg += (250 - gg) * fl * 0.8;\n        b += (235 - b) * fl * 0.8;\n      }\n      if (P.g > 0.01) {\n        // The tile edges as gold geodesics a LED wide, faded where the\n        // tiles are too small to draw. The hyperbolic distance to the nearer\n        // of the walls Re = +-1/2 and the floor |t| = 1, times y, is the\n        // distance on the panel.\n        const X = OUT[4], Y = OUT[5], e2 = (asinh(min(0.5 - abs(X), (X * X + Y * Y - 1) / 2) / Y) * y) / s;\n        const w2 = cl(1.1 - e2, 0, 1) * P.g * ch;\n        r += (255 - r) * w2;\n        gg += (205 - gg) * w2;\n        b += (90 - b) * w2;\n      }\n      buf[p] = r;\n      buf[p + 1] = gg;\n      buf[p + 2] = b;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower."},{"name":"Depth","min":0,"max":1,"about":"Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel."},{"name":"Bands","min":0,"max":1,"about":"The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat."}],"start":[0,2,0,0.06],"measures":{"motion":0.3718,"detail":0.0494,"edges":0.1733,"complexity":2.6926,"coverage":1,"colour":0.3996,"drift":0.1786},"knobResponse":[0.3542,0.2406,0.2621,0.0689]},{"slug":"jacobs-ladder","title":"Jacob's Ladder","family":"light","round":6,"note":"두 막대가 가장 가까운 목에서 보랏빛 아크가 튀어, 벌어지는 V 를 타고 막대 끝까지 올라가 끊어져요. 위의 아크가 끝에 닿기 전에 목에서 다음 아크가 튀고, K4 를 올리면 지나간 아크가 사다리 가로대로 쌓여요.","idea":"An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.","buttons":"K1 tap strikes a new arc now.","code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-jacobs-ladder","type":"code","name":"jacobs-ladder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the gas the arc burns in, starting from the violet of an arc in air."},{"name":"Power","min":0.3,"max":3,"about":"How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone."},{"name":"Spread","min":0,"max":1,"about":"How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down."},{"name":"Exposure","min":0,"max":1,"about":"How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder."}],"start":[0,2,0,0.06],"measures":{"motion":0.8103,"detail":0.0208,"edges":0.2771,"complexity":0.702,"coverage":0.2778,"colour":0.0843,"drift":0.105},"knobResponse":[0.0479,0.0767,0.0696,0.0781]},{"slug":"jacquard","title":"Jacquard Loom","family":"textile","round":4,"note":"구멍 뚫린 카드가 한 장씩 내려와 날실을 들어 올리면 북이 씨실을 끌고 지나가고, 바디가 그 씨실을 쳐 넣어요. 아래로 짜여 내려가는 천에 카드 구멍이 적어 둔 다이아몬드가 서요.","idea":"A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.","buttons":"K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.","code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-jacquard","type":"code","name":"jacquard","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green."},{"name":"Speed","min":0.5,"max":5,"about":"Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak."},{"name":"Card","min":1,"max":4,"about":"The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down."},{"name":"Stripes","min":0,"max":1,"about":"How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks."}],"start":[0,2,1,0.06],"measures":{"motion":1.0063,"detail":0.2005,"edges":0.8201,"complexity":0.1835,"coverage":0.8529,"colour":0.5431,"drift":0.0411},"knobResponse":[0.3764,0.209,0.2197,0.1447]},{"slug":"jelly","title":"Jelly","family":"physics","round":2,"note":"젤리마다 질량 18개를 용수철과 안쪽 압력으로 묶은 고리예요. 키 큰 병에 떨어져 눌린 채 쌓여 출렁이다가, 하나씩 통 튀어 올라 다른 젤리 위로 굴러떨어져요.","idea":"Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.","buttons":"K1 tap shakes the jar.","code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","layer":{"id":"layer-jelly","type":"code","name":"jelly","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match."},{"name":"Gravity","min":-1,"max":3,"about":"Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid."},{"name":"Softness","min":0,"max":1,"about":"Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other."},{"name":"Count","min":4,"max":12,"about":"How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room."}],"start":[0,2,0,4],"measures":{"motion":0.4127,"detail":0.0345,"edges":0.4341,"complexity":0.5229,"coverage":0.4923,"colour":0.4252,"drift":0.1653},"knobResponse":[0.2349,0.3804,0.1184,0.2314]},{"slug":"johnson-mehl","title":"Johnson-Mehl","family":"cells","round":37,"note":"결정이 아무 때나 아무 데서 태어나 같은 빠르기로 원처럼 자라고, LED 마다 먼저 닿은 결정의 것이 돼요. 늦게 난 결정은 작고 둥글게 남아서 먼저 난 결정과 곧은 선이 아니라 쌍곡선 호에서 만나고, 한 상이 판을 다 채우면 다음 상이 그 위로 자라요. 위 12줄은 바뀐 몫을 아브라미 곡선과 나란히 그려요. K4 를 1로 돌리면 결정이 한꺼번에 태어나 경계가 곧은 보로노이가 되고, 누르면 다음 상이 바로 시작해요.","idea":"Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.","buttons":"K1 tap starts the next phase at once, over whatever has turned so far.","code":"// ===== Patternflow pattern =====\n// Title:   Johnson-Mehl\n// Family:  cells\n// Idea:    Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Johnson-Mehl tessellation (William Johnson and Robert Mehl, 1939), with Avrami's law (Melvin Avrami, 1939), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1\n//\n// Knob 1: Hue. Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan.\n// Knob 2: Speed. The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s.\n// Knob 3: Rate. The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3.\n// Knob 4: Mode. How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2.\n// Buttons: K1 tap starts the next phase at once, over whatever has turned so far.\n\n// Johnson and Mehl, and Avrami in the same year, asked how much of a sample\n// has turned by time t when nuclei appear at random, at rate I on the ground\n// not yet turned, and every grain grows at speed V. In the plane the answer\n// is X(t) = 1 - exp(-(pi / 3) I V^2 t^3). The exponent counts the nuclei, real\n// or phantom, whose discs would have reached a point by t; the chance that\n// none has is its exponential. A nucleus that falls on turned ground is a\n// phantom and is dropped: nucleate() looks at its cell first.\n//\n// Checked on this field, 64 by 115 LEDs, averaged over 120 phases at the\n// start knobs: the share turned stays within 0.015 of Avrami's curve all the\n// way; in Mode 1 within 0.013, at Rate 80 within 0.009. One phase alone\n// strays more, a median of 0.094 at Rate 4 and 0.034 at Rate 80, and the\n// strip shows one phase. Without the margin below the edges of the field\n// starve, as no grain can come in from outside: the share lagged the curve\n// by up to 0.063, and a phase took 2.14 Avrami times to fill instead of 1.82.\n\n// The plot takes the top 12 rows, a dark row parts it from the field, and\n// the field is the other 115.\nconst W = 64, H = 128, TOP = 12, FY = TOP + 1, FH = H - FY, FN = W * FH;\n// The grains grow on a grid 24 LEDs wider than the field on every side, and\n// nuclei are born there too, so the field is a window on a larger sample.\nconst M = 24, GW = W + 2 * M, GH = FH + 2 * M, GN = GW * GH;\n// Growth speed in LEDs a second at Speed 1; rate in nuclei per 10,000 LEDs\n// a second at Speed 1. The rim is the last 0.8 s of growth, 1.6 LEDs.\nconst V = 2, RATE_UNIT = 1e-4, RIM = 0.8, CACHE = 4096;\nconst { floor, sqrt, exp, log, random, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst G43 = 0.89298; // Gamma(4/3)\n// The phases take turns in three hues, blue, gold and rose at Hue 0, so a\n// phase never grows over one of its own colour, not even after a tap has\n// left two phases showing underneath it.\nconst PHASE = [0.56, 0.1, 0.88];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\n// Two numbers in [0, 1) from a grain's id: its orientation and its shade.\nfunction hash(id, salt) {\n  let h = Math.imul(id ^ salt, 0x9e3779b1);\n  h ^= h >>> 15;\n  h = Math.imul(h, 0x85ebca6b);\n  h ^= h >>> 13;\n  return (h >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: 0, speed: 2, rate: 4, mode: 0.06,\n    clock: 0, gen: 0, nextId: 1, nextBirth: Infinity, lambda: 0, ns: 0,\n    T: new Float32Array(GN), O: new Int32Array(GN), U: new Int32Array(FN), UP: new Uint8Array(FN),\n    meas: new Float32Array(W), filled: 0, X: 0, tEnd: 1,\n    cId: new Int32Array(CACHE).fill(-1), cRGB: new Float32Array(CACHE * 3), cHue: NaN, rgb: new Float32Array(3),\n  };\n}\n\n// The rate of the continuous part and the density of the nuclei all born\n// at once. A pure Johnson-Mehl run with rate I ends with I Gamma(4/3) tau\n// grains per LED, tau = (3 / (pi I V^2))^(1/3) the time at which Avrami's\n// exponent reaches 1. Mode m moves that share m of them to time 0, so the\n// grain count stays about the same from one end of the knob to the other.\nfunction rates(S) {\n  const I = S.rate * RATE_UNIT, tau = Math.cbrt(3 / (PI * I * V * V));\n  return { I, cont: (1 - S.mode) * I, sat: S.mode * I * G43 * tau };\n}\n\nfunction nucleate(S, x, y, t) {\n  const { T, O } = S;\n  const cx = floor(x), cy = floor(y);\n  if (T[cy * GW + cx] \u003c= t) return false;\n  const id = S.nextId++;\n  // T_i(p) = t_i + |p - x_i| / V, kept where it is the earliest. Only as\n  // far as the front can get by 2.5 plot spans, five times Avrami's time;\n  // by then a cell is still open with odds of exp(-25) or less. At Rate 80\n  // in Mode 1 that cut the 400 nuclei born on one frame from 18 ms to 3.\n  const R = V * max(0, 2.5 * S.tEnd - t);\n  const i0 = max(0, floor(x - R)), i1 = min(GW - 1, floor(x + R)), j0 = max(0, floor(y - R)), j1 = min(GH - 1, floor(y + R));\n  for (let j = j0; j \u003c= j1; j++) {\n    const dy = j + 0.5 - y, dy2 = dy * dy;\n    for (let i = i0, c = j * GW + i0; i \u003c= i1; i++, c++) {\n      const dx = i + 0.5 - x, a = t + sqrt(dx * dx + dy2) / V;\n      if (a \u003c T[c]) {\n        T[c] = a;\n        O[c] = id;\n      }\n    }\n  }\n  return true;\n}\n\nfunction drawWait(S) {\n  S.nextBirth = S.lambda > 0 ? S.clock - log(1 - random()) / S.lambda : Infinity;\n}\n\n// A new phase: what shows now becomes the layer underneath, the grid is\n// cleared, and the site-saturated share is born at once.\nfunction nextPhase(S) {\n  const { T, O, U, UP } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      if (T[c] \u003c= S.clock && O[c] > 0) {\n        U[p] = O[c];\n        UP[p] = par;\n      }\n    }\n  S.gen++;\n  S.clock = 0;\n  T.fill(Infinity);\n  O.fill(0);\n  const r = rates(S);\n  S.ns = r.sat;\n  S.lambda = r.cont * GN;\n  // The span first: it sets how far each nucleus below is drawn.\n  theoryEnd(S);\n  // A Poisson count of nuclei at time 0, by inversion.\n  const mean = r.sat * GN;\n  let n = 0;\n  if (mean > 0) {\n    let L = exp(-min(mean, 600)), p = 1, u = random();\n    if (mean > 600) n = floor(mean);\n    else {\n      let acc = L;\n      while (u > acc && n \u003c 4000) {\n        n++;\n        p *= mean / n;\n        acc += L * p;\n      }\n    }\n  }\n  for (let i = 0; i \u003c n; i++) nucleate(S, random() * GW, random() * GH, 0);\n  drawWait(S);\n  S.meas.fill(0);\n  S.filled = 0;\n  S.X = 0;\n}\n\n// Avrami: X(t) = 1 - exp(-pi V^2 (Ns t^2 + (1 - m) I t^3 / 3)). The plot\n// runs to twice the time at which the exponent is 1.\nfunction avramiExp(S, t) {\n  const r = rates(S);\n  return PI * V * V * (S.ns * t * t + (r.cont * t * t * t) / 3);\n}\nfunction theoryEnd(S) {\n  let lo = 0, hi = 1;\n  while (avramiExp(S, hi) \u003c 1) hi *= 2;\n  for (let k = 0; k \u003c 40; k++) {\n    const mid = 0.5 * (lo + hi);\n    if (avramiExp(S, mid) \u003c 1) lo = mid;\n    else hi = mid;\n  }\n  S.tEnd = 2 * hi;\n}\n\n// Advance the clock by d, birthing the continuous nuclei in order, and\n// measure the share of the field turned.\nfunction advance(S, d) {\n  const target = S.clock + d;\n  while (S.nextBirth \u003c= target) {\n    S.clock = S.nextBirth;\n    nucleate(S, random() * GW, random() * GH, S.clock);\n    drawWait(S);\n  }\n  S.clock = target;\n  let n = 0;\n  const T = S.T;\n  for (let y = 0; y \u003c FH; y++) for (let c = (y + M) * GW + M, e = c + W; c \u003c e; c++) if (T[c] \u003c= target) n++;\n  S.X = n / FN;\n  return n === FN;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 4, 80);\n  S.mode = cl(k[3], 0, 1);\n  const lam = rates(S).cont * GN;\n  if (lam !== S.lambda) {\n    S.lambda = lam;\n    drawWait(S);\n    theoryEnd(S);\n  }\n  if (!S.ready) {\n    // The first phase grows to the end before the first frame, so the\n    // panel opens full and the second phase starts over it.\n    S.gen = 2;\n    nextPhase(S);\n    while (!advance(S, 0.25) && S.clock \u003c 3 * S.tEnd);\n    nextPhase(S);\n    S.ready = true;\n  }\n  const tap = input.btnPressed && input.btnPressed[0];\n  const full = advance(S, d * S.speed);\n  // The plot takes one column per 64th of its time span.\n  while (S.filled \u003c W && S.clock >= ((S.filled + 1) / W) * S.tEnd) S.meas[S.filled++] = S.X;\n  if (full || tap || S.clock > 3 * S.tEnd) nextPhase(S);\n}\n\nfunction grainRGB(S, id, par, out) {\n  const slot = id & (CACHE - 1), o = slot * 3;\n  if (S.cId[slot] === id * 3 + par) {\n    out[0] = S.cRGB[o];\n    out[1] = S.cRGB[o + 1];\n    out[2] = S.cRGB[o + 2];\n    return;\n  }\n  const th = hash(id, 0x51ed), q = hash(id, 0x2c1b);\n  let h = S.hue + PHASE[par] + (th - 0.5) * 0.1;\n  h -= floor(h);\n  // Red, orange, gold and yellow keep their brightness and change shade by\n  // saturation; a darker gold reads olive and a darker orange brown. The\n  // lift fades out over lime and over rose.\n  const warm = h \u003c 0.2 ? 1 : h \u003c 0.27 ? (0.27 - h) / 0.07 : h > 0.95 ? 1 : h > 0.89 ? (h - 0.89) / 0.06 : 0;\n  const s = 0.5 + 0.4 * q - 0.05 * warm, v = 0.6 + 0.4 * (1 - q) + warm * (0.32 - 0.32 * (1 - q));\n  hsv(h, s, v, S.cRGB, o);\n  S.cId[slot] = id * 3 + par;\n  out[0] = S.cRGB[o];\n  out[1] = S.cRGB[o + 1];\n  out[2] = S.cRGB[o + 2];\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  if (S.cHue !== S.hue) {\n    S.cId.fill(-1);\n    S.cHue = S.hue;\n  }\n  const { T, O, U, UP, clock, rgb } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      let r, g, b;\n      if (T[c] \u003c= clock) {\n        const id = O[c];\n        grainRGB(S, id, par, rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] \u003c= clock && O[c + 1] !== id) || (y + 1 \u003c FH && T[c + GW] \u003c= clock && O[c + GW] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n        else {\n          const age = clock - T[c];\n          if (age \u003c RIM) {\n            const w = 0.8 * (1 - age / RIM);\n            r += (255 - r) * w;\n            g += (255 - g) * w;\n            b += (255 - b) * w;\n          }\n        }\n      } else {\n        const id = U[p];\n        grainRGB(S, id, UP[p], rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] > clock && U[p + 1] !== id) || (y + 1 \u003c FH && T[c + GW] > clock && U[p + W] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n      }\n      display.setPixel(x, y + FY, r, g, b);\n    }\n  }\n  // The plot: the share of the field turned so far, one column per 64th of\n  // the span, filled in the new phase's colour on black, and Avrami's curve\n  // as a pale line across the whole width. A dim fill read brown in gold.\n  const newC = [0, 0, 0];\n  hsv(S.hue + PHASE[par], 0.75, 1, newC, 0);\n  let prev = -1;\n  for (let x = 0; x \u003c W; x++) {\n    const hgt = x \u003c S.filled ? S.meas[x] * TOP : 0;\n    for (let yy = 0; yy \u003c TOP; yy++) {\n      const f = cl(hgt - (TOP - 1 - yy), 0, 1);\n      if (f > 0) display.setPixel(x, yy, newC[0] * f, newC[1] * f, newC[2] * f);\n    }\n    const t = ((x + 1) / W) * S.tEnd, X = 1 - exp(-avramiExp(S, t)), row = cl(floor((1 - X) * TOP - 0.001), 0, TOP - 1);\n    const a = prev \u003c 0 ? row : min(prev, row), bnd = prev \u003c 0 ? row : max(prev, row);\n    for (let yy = a; yy \u003c= bnd; yy++) display.setPixel(x, yy, 235, 235, 235);\n    prev = row;\n  }\n}\n","layer":{"id":"layer-johnson-mehl","type":"code","name":"johnson-mehl","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Johnson-Mehl\n// Family:  cells\n// Idea:    Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Johnson-Mehl tessellation (William Johnson and Robert Mehl, 1939), with Avrami's law (Melvin Avrami, 1939), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1\n//\n// Knob 1: Hue. Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan.\n// Knob 2: Speed. The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s.\n// Knob 3: Rate. The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3.\n// Knob 4: Mode. How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2.\n// Buttons: K1 tap starts the next phase at once, over whatever has turned so far.\n\n// Johnson and Mehl, and Avrami in the same year, asked how much of a sample\n// has turned by time t when nuclei appear at random, at rate I on the ground\n// not yet turned, and every grain grows at speed V. In the plane the answer\n// is X(t) = 1 - exp(-(pi / 3) I V^2 t^3). The exponent counts the nuclei, real\n// or phantom, whose discs would have reached a point by t; the chance that\n// none has is its exponential. A nucleus that falls on turned ground is a\n// phantom and is dropped: nucleate() looks at its cell first.\n//\n// Checked on this field, 64 by 115 LEDs, averaged over 120 phases at the\n// start knobs: the share turned stays within 0.015 of Avrami's curve all the\n// way; in Mode 1 within 0.013, at Rate 80 within 0.009. One phase alone\n// strays more, a median of 0.094 at Rate 4 and 0.034 at Rate 80, and the\n// strip shows one phase. Without the margin below the edges of the field\n// starve, as no grain can come in from outside: the share lagged the curve\n// by up to 0.063, and a phase took 2.14 Avrami times to fill instead of 1.82.\n\n// The plot takes the top 12 rows, a dark row parts it from the field, and\n// the field is the other 115.\nconst W = 64, H = 128, TOP = 12, FY = TOP + 1, FH = H - FY, FN = W * FH;\n// The grains grow on a grid 24 LEDs wider than the field on every side, and\n// nuclei are born there too, so the field is a window on a larger sample.\nconst M = 24, GW = W + 2 * M, GH = FH + 2 * M, GN = GW * GH;\n// Growth speed in LEDs a second at Speed 1; rate in nuclei per 10,000 LEDs\n// a second at Speed 1. The rim is the last 0.8 s of growth, 1.6 LEDs.\nconst V = 2, RATE_UNIT = 1e-4, RIM = 0.8, CACHE = 4096;\nconst { floor, sqrt, exp, log, random, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst G43 = 0.89298; // Gamma(4/3)\n// The phases take turns in three hues, blue, gold and rose at Hue 0, so a\n// phase never grows over one of its own colour, not even after a tap has\n// left two phases showing underneath it.\nconst PHASE = [0.56, 0.1, 0.88];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\n// Two numbers in [0, 1) from a grain's id: its orientation and its shade.\nfunction hash(id, salt) {\n  let h = Math.imul(id ^ salt, 0x9e3779b1);\n  h ^= h >>> 15;\n  h = Math.imul(h, 0x85ebca6b);\n  h ^= h >>> 13;\n  return (h >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: 0, speed: 2, rate: 4, mode: 0.06,\n    clock: 0, gen: 0, nextId: 1, nextBirth: Infinity, lambda: 0, ns: 0,\n    T: new Float32Array(GN), O: new Int32Array(GN), U: new Int32Array(FN), UP: new Uint8Array(FN),\n    meas: new Float32Array(W), filled: 0, X: 0, tEnd: 1,\n    cId: new Int32Array(CACHE).fill(-1), cRGB: new Float32Array(CACHE * 3), cHue: NaN, rgb: new Float32Array(3),\n  };\n}\n\n// The rate of the continuous part and the density of the nuclei all born\n// at once. A pure Johnson-Mehl run with rate I ends with I Gamma(4/3) tau\n// grains per LED, tau = (3 / (pi I V^2))^(1/3) the time at which Avrami's\n// exponent reaches 1. Mode m moves that share m of them to time 0, so the\n// grain count stays about the same from one end of the knob to the other.\nfunction rates(S) {\n  const I = S.rate * RATE_UNIT, tau = Math.cbrt(3 / (PI * I * V * V));\n  return { I, cont: (1 - S.mode) * I, sat: S.mode * I * G43 * tau };\n}\n\nfunction nucleate(S, x, y, t) {\n  const { T, O } = S;\n  const cx = floor(x), cy = floor(y);\n  if (T[cy * GW + cx] \u003c= t) return false;\n  const id = S.nextId++;\n  // T_i(p) = t_i + |p - x_i| / V, kept where it is the earliest. Only as\n  // far as the front can get by 2.5 plot spans, five times Avrami's time;\n  // by then a cell is still open with odds of exp(-25) or less. At Rate 80\n  // in Mode 1 that cut the 400 nuclei born on one frame from 18 ms to 3.\n  const R = V * max(0, 2.5 * S.tEnd - t);\n  const i0 = max(0, floor(x - R)), i1 = min(GW - 1, floor(x + R)), j0 = max(0, floor(y - R)), j1 = min(GH - 1, floor(y + R));\n  for (let j = j0; j \u003c= j1; j++) {\n    const dy = j + 0.5 - y, dy2 = dy * dy;\n    for (let i = i0, c = j * GW + i0; i \u003c= i1; i++, c++) {\n      const dx = i + 0.5 - x, a = t + sqrt(dx * dx + dy2) / V;\n      if (a \u003c T[c]) {\n        T[c] = a;\n        O[c] = id;\n      }\n    }\n  }\n  return true;\n}\n\nfunction drawWait(S) {\n  S.nextBirth = S.lambda > 0 ? S.clock - log(1 - random()) / S.lambda : Infinity;\n}\n\n// A new phase: what shows now becomes the layer underneath, the grid is\n// cleared, and the site-saturated share is born at once.\nfunction nextPhase(S) {\n  const { T, O, U, UP } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      if (T[c] \u003c= S.clock && O[c] > 0) {\n        U[p] = O[c];\n        UP[p] = par;\n      }\n    }\n  S.gen++;\n  S.clock = 0;\n  T.fill(Infinity);\n  O.fill(0);\n  const r = rates(S);\n  S.ns = r.sat;\n  S.lambda = r.cont * GN;\n  // The span first: it sets how far each nucleus below is drawn.\n  theoryEnd(S);\n  // A Poisson count of nuclei at time 0, by inversion.\n  const mean = r.sat * GN;\n  let n = 0;\n  if (mean > 0) {\n    let L = exp(-min(mean, 600)), p = 1, u = random();\n    if (mean > 600) n = floor(mean);\n    else {\n      let acc = L;\n      while (u > acc && n \u003c 4000) {\n        n++;\n        p *= mean / n;\n        acc += L * p;\n      }\n    }\n  }\n  for (let i = 0; i \u003c n; i++) nucleate(S, random() * GW, random() * GH, 0);\n  drawWait(S);\n  S.meas.fill(0);\n  S.filled = 0;\n  S.X = 0;\n}\n\n// Avrami: X(t) = 1 - exp(-pi V^2 (Ns t^2 + (1 - m) I t^3 / 3)). The plot\n// runs to twice the time at which the exponent is 1.\nfunction avramiExp(S, t) {\n  const r = rates(S);\n  return PI * V * V * (S.ns * t * t + (r.cont * t * t * t) / 3);\n}\nfunction theoryEnd(S) {\n  let lo = 0, hi = 1;\n  while (avramiExp(S, hi) \u003c 1) hi *= 2;\n  for (let k = 0; k \u003c 40; k++) {\n    const mid = 0.5 * (lo + hi);\n    if (avramiExp(S, mid) \u003c 1) lo = mid;\n    else hi = mid;\n  }\n  S.tEnd = 2 * hi;\n}\n\n// Advance the clock by d, birthing the continuous nuclei in order, and\n// measure the share of the field turned.\nfunction advance(S, d) {\n  const target = S.clock + d;\n  while (S.nextBirth \u003c= target) {\n    S.clock = S.nextBirth;\n    nucleate(S, random() * GW, random() * GH, S.clock);\n    drawWait(S);\n  }\n  S.clock = target;\n  let n = 0;\n  const T = S.T;\n  for (let y = 0; y \u003c FH; y++) for (let c = (y + M) * GW + M, e = c + W; c \u003c e; c++) if (T[c] \u003c= target) n++;\n  S.X = n / FN;\n  return n === FN;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 4, 80);\n  S.mode = cl(k[3], 0, 1);\n  const lam = rates(S).cont * GN;\n  if (lam !== S.lambda) {\n    S.lambda = lam;\n    drawWait(S);\n    theoryEnd(S);\n  }\n  if (!S.ready) {\n    // The first phase grows to the end before the first frame, so the\n    // panel opens full and the second phase starts over it.\n    S.gen = 2;\n    nextPhase(S);\n    while (!advance(S, 0.25) && S.clock \u003c 3 * S.tEnd);\n    nextPhase(S);\n    S.ready = true;\n  }\n  const tap = input.btnPressed && input.btnPressed[0];\n  const full = advance(S, d * S.speed);\n  // The plot takes one column per 64th of its time span.\n  while (S.filled \u003c W && S.clock >= ((S.filled + 1) / W) * S.tEnd) S.meas[S.filled++] = S.X;\n  if (full || tap || S.clock > 3 * S.tEnd) nextPhase(S);\n}\n\nfunction grainRGB(S, id, par, out) {\n  const slot = id & (CACHE - 1), o = slot * 3;\n  if (S.cId[slot] === id * 3 + par) {\n    out[0] = S.cRGB[o];\n    out[1] = S.cRGB[o + 1];\n    out[2] = S.cRGB[o + 2];\n    return;\n  }\n  const th = hash(id, 0x51ed), q = hash(id, 0x2c1b);\n  let h = S.hue + PHASE[par] + (th - 0.5) * 0.1;\n  h -= floor(h);\n  // Red, orange, gold and yellow keep their brightness and change shade by\n  // saturation; a darker gold reads olive and a darker orange brown. The\n  // lift fades out over lime and over rose.\n  const warm = h \u003c 0.2 ? 1 : h \u003c 0.27 ? (0.27 - h) / 0.07 : h > 0.95 ? 1 : h > 0.89 ? (h - 0.89) / 0.06 : 0;\n  const s = 0.5 + 0.4 * q - 0.05 * warm, v = 0.6 + 0.4 * (1 - q) + warm * (0.32 - 0.32 * (1 - q));\n  hsv(h, s, v, S.cRGB, o);\n  S.cId[slot] = id * 3 + par;\n  out[0] = S.cRGB[o];\n  out[1] = S.cRGB[o + 1];\n  out[2] = S.cRGB[o + 2];\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  if (S.cHue !== S.hue) {\n    S.cId.fill(-1);\n    S.cHue = S.hue;\n  }\n  const { T, O, U, UP, clock, rgb } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      let r, g, b;\n      if (T[c] \u003c= clock) {\n        const id = O[c];\n        grainRGB(S, id, par, rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] \u003c= clock && O[c + 1] !== id) || (y + 1 \u003c FH && T[c + GW] \u003c= clock && O[c + GW] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n        else {\n          const age = clock - T[c];\n          if (age \u003c RIM) {\n            const w = 0.8 * (1 - age / RIM);\n            r += (255 - r) * w;\n            g += (255 - g) * w;\n            b += (255 - b) * w;\n          }\n        }\n      } else {\n        const id = U[p];\n        grainRGB(S, id, UP[p], rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] > clock && U[p + 1] !== id) || (y + 1 \u003c FH && T[c + GW] > clock && U[p + W] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n      }\n      display.setPixel(x, y + FY, r, g, b);\n    }\n  }\n  // The plot: the share of the field turned so far, one column per 64th of\n  // the span, filled in the new phase's colour on black, and Avrami's curve\n  // as a pale line across the whole width. A dim fill read brown in gold.\n  const newC = [0, 0, 0];\n  hsv(S.hue + PHASE[par], 0.75, 1, newC, 0);\n  let prev = -1;\n  for (let x = 0; x \u003c W; x++) {\n    const hgt = x \u003c S.filled ? S.meas[x] * TOP : 0;\n    for (let yy = 0; yy \u003c TOP; yy++) {\n      const f = cl(hgt - (TOP - 1 - yy), 0, 1);\n      if (f > 0) display.setPixel(x, yy, newC[0] * f, newC[1] * f, newC[2] * f);\n    }\n    const t = ((x + 1) / W) * S.tEnd, X = 1 - exp(-avramiExp(S, t)), row = cl(floor((1 - X) * TOP - 0.001), 0, TOP - 1);\n    const a = prev \u003c 0 ? row : min(prev, row), bnd = prev \u003c 0 ? row : max(prev, row);\n    for (let yy = a; yy \u003c= bnd; yy++) display.setPixel(x, yy, 235, 235, 235);\n    prev = row;\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan."},{"name":"Speed","min":0.2,"max":3,"about":"The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s."},{"name":"Rate","min":4,"max":80,"about":"The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3."},{"name":"Mode","min":0,"max":1,"about":"How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2."}],"start":[0,2,4,0.06],"measures":{"motion":0.0659,"detail":0.0824,"edges":0.8775,"complexity":0.3635,"coverage":0.9103,"colour":0.4567,"drift":0.1875},"knobResponse":[0.3746,0.1973,0.3888,0.3417]},{"slug":"joukowsky-airfoil","title":"Joukowsky Airfoil","family":"physics","round":35,"note":"주콥스키 사상으로 원을 지나는 이상 흐름을 날개를 지나는 흐름으로 옮겼어요. 44줄 길이의 날개 위로 1초마다 맨 윗줄에서 놓은 염료 줄이 내려와 앞전의 붉은 정체점에서 갈라지고, 오른쪽 흡입면으로 간 반쪽이 뒷전에 12.6줄 먼저 닿아요. K3 은 받음각을 0도에서 15도로 올려 그 앞섬을 46줄까지 늘리고, K1 을 누르면 순환을 10초 동안 빼서 두 반쪽이 거의 같이 닿아요.","idea":"A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.","buttons":"K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.","code":"// ===== Patternflow pattern =====\n// Title:   Joukowsky Airfoil\n// Family:  physics\n// Idea:    A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joukowsky airfoil (Nikolai Zhukovsky, 1910)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12\n//\n// Knob 1: Hue. Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it.\n// Knob 2: Speed. How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten.\n// Knob 3: Attack. The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose.\n// Knob 4: Camber. The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows.\n// Buttons: K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.\n\n// Ideal flow past a circle in the ζ-plane, carried to flow past an airfoil\n// by z = ζ + c²/ζ. The circle goes through ζ = c, which lands on the sharp\n// trailing edge at z = 2c, and its centre ζ0 = -ε + iδ sits left of the\n// origin for thickness and above it for camber. With U = 1,\n//   W(ζ) = ζ' e^{-iα} + R² e^{iα}/ζ' + (iΓ/2π) log ζ',   ζ' = ζ - ζ0,\n// and the Kutta condition, that the flow leaves the trailing edge smoothly,\n// fixes Γ = 4πR sin(α + β), β the angle of ζ0 seen from c. Lengths are in\n// LEDs: c = 11, so the chord is 44 rows, centred on the panel, and ε =\n// 0.12 c makes the wing 6 LEDs at its thickest, 14% of the chord. The free\n// stream runs down the panel at one LED per unit of time.\nconst W = 64, H = 128, NP = W * H, CX = 32, CY = 64;\nconst C = 11, EPS = 0.12 * C, LAM = 20, DUTY = 2.2 / 20, TMAX = 400, CHUNK = 768, SPACE = 6;\nconst { min, max, floor, round, sqrt, sin, cos, atan2, abs, exp, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// One flow: the circle, the angle of attack and the circulation.\nfunction makeFlow(alphaDeg, camber, kutta) {\n  const a = (alphaDeg * PI) / 180, d = camber * 2 * C;\n  const z0r = -EPS, z0i = d, R = sqrt((C + EPS) ** 2 + d * d), beta = atan2(d, C + EPS);\n  const gam = kutta ? 4 * PI * R * sin(a + beta) : 0;\n  return { a, ca: cos(a), sa: sin(a), z0r, z0i, R, R2: R * R, beta, gam, key: alphaDeg.toFixed(1) + \"/\" + camber.toFixed(3) + \"/\" + kutta };\n}\n\n// The flow at ζ: o[0], o[1] = dζ/dt, o[2] = speed on the panel, o[3] =\n// |dz/dζ|. dζ/dt = conj(dW/dζ) / |dz/dζ|². At the trailing edge dz/dζ is 0;\n// with the Kutta condition dW/dζ is 0 there too and the floor on |dz/dζ|²\n// only keeps 0/0 away, without it the speed there is capped at 6.\nfunction flowAt(F, zr, zi, o) {\n  const pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n  const ir = pr / r2, ii = -pi / r2, i2r = ir * ir - ii * ii, i2i = 2 * ir * ii;\n  const er = F.ca * i2r - F.sa * i2i, ei = F.ca * i2i + F.sa * i2r, g = F.gam / TAU;\n  const wr = F.ca - F.R2 * er - g * ii, wi = -F.sa - F.R2 * ei + g * ir;\n  const q2 = zr * zr + zi * zi, jr = zr / q2, ji = -zi / q2, j2r = jr * jr - ji * ji, j2i = 2 * jr * ji;\n  const dr = 1 - C * C * j2r, di = -C * C * j2i, J2 = max(1e-8, dr * dr + di * di);\n  let sp = sqrt((wr * wr + wi * wi) / J2), k = 1;\n  if (sp > 6) (k = 6 / sp), (sp = 6);\n  o[0] = (k * wr) / J2;\n  o[1] = (-k * wi) / J2;\n  o[2] = sp;\n  o[3] = sqrt(J2);\n}\n\n// ζ to the panel: z = ζ + c²/ζ, turned back by α so the free stream runs\n// down the panel and the suction side faces right. o[0] = X, o[1] = Y.\nfunction toPanel(F, zr, zi, o) {\n  const q2 = zr * zr + zi * zi, xr = zr + (C * C * zr) / q2, xi = zi - (C * C * zi) / q2;\n  o[0] = CX + xi * F.ca - xr * F.sa;\n  o[1] = CY + xr * F.ca + xi * F.sa;\n}\n\n// The panel to ζ: of the two roots of ζ² - zζ + c² = 0, the one outside\n// the circle. o[2] = |ζ'|²; less than R² means the LED is inside the wing.\nfunction toZeta(F, X, Y, o) {\n  const pr = Y - CY, pi = X - CX, zr = pr * F.ca - pi * F.sa, zi = pr * F.sa + pi * F.ca;\n  const wr = zr * zr - zi * zi - 4 * C * C, wi = 2 * zr * zi, m = sqrt(wr * wr + wi * wi);\n  const sr = sqrt(max(0, (m + wr) / 2)), si = (wi \u003c 0 ? -1 : 1) * sqrt(max(0, (m - wr) / 2));\n  const ar = (zr + sr) / 2, ai = (zi + si) / 2, br = (zr - sr) / 2, bi = (zi - si) / 2;\n  const da = (ar - F.z0r) ** 2 + (ai - F.z0i) ** 2, db = (br - F.z0r) ** 2 + (bi - F.z0i) ** 2;\n  if (da >= db) (o[0] = ar), (o[1] = ai), (o[2] = da);\n  else (o[0] = br), (o[1] = bi), (o[2] = db);\n}\n\n// When the fluid at an LED crossed the top row: back along its stream line,\n// in the ζ-plane where the wing is a circle and easy to keep out of, adding\n// up time. Midpoint steps of 0.35 LED by the surface, up to 3 LEDs and 3\n// time units away from it.\nfunction arrival(F, X, Y, f, pos) {\n  toZeta(F, X, Y, f);\n  if (f[2] \u003c F.R2) return -1;\n  let zr = f[0], zi = f[1], T = 0;\n  for (let it = 0; it \u003c 400; it++) {\n    flowAt(F, zr, zi, f);\n    const pr = zr - F.z0r, pi = zi - F.z0i, dist = (sqrt(pr * pr + pi * pi) - F.R) * f[3];\n    const dt = min(cl(0.35 + 0.3 * dist, 0.35, 3) / max(f[2], 1e-6), 3);\n    flowAt(F, zr - 0.5 * dt * f[0], zi - 0.5 * dt * f[1], f);\n    zr -= dt * f[0];\n    zi -= dt * f[1];\n    const qr = zr - F.z0r, qi = zi - F.z0i, q2 = qr * qr + qi * qi;\n    if (q2 \u003c F.R2) {\n      const s = (F.R * 1.0001) / sqrt(q2);\n      zr = F.z0r + qr * s;\n      zi = F.z0i + qi * s;\n    }\n    T += dt;\n    toPanel(F, zr, zi, pos);\n    // Past the top row: give back the part of the step beyond it.\n    if (pos[1] \u003c= 0) return max(0, T + pos[1] / max(0.3, f[2]));\n    if (T > TMAX) return TMAX;\n  }\n  return TMAX;\n}\n\nfunction newField(F) {\n  return { F, T: new Float32Array(NP), G: new Float32Array(NP), psi: new Float32Array(NP), sp: new Float32Array(NP), body: new Float32Array(NP), next: 0, st: [0, 0, 0, 0] };\n}\n\n// Arrival times for LEDs from..to of a field; the rest once they are all in.\nfunction fill(Fd, to) {\n  const { F, T, G, psi, sp, body } = Fd, f = new Float64Array(4), pos = [0, 0];\n  for (let p = Fd.next; p \u003c to; p++) T[p] = arrival(F, (p % W) + 0.5, floor(p / W) + 0.5, f, pos);\n  Fd.next = to;\n  if (to \u003c NP) return false;\n  for (let p = 0; p \u003c NP; p++) {\n    toZeta(F, (p % W) + 0.5, floor(p / W) + 0.5, f);\n    const zr = f[0], zi = f[1], pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n    flowAt(F, zr, zi, f);\n    sp[p] = f[2];\n    // Inside the wing or within half an LED of its edge, by the distance\n    // to the circle stretched by |dz/dζ|.\n    body[p] = cl(0.5 - (sqrt(r2) - F.R) * f[3], 0, 1);\n    // ψ = Im W.\n    psi[p] = pi * F.ca - pr * F.sa + (F.R2 * (F.sa * pr - F.ca * pi)) / r2 + (F.gam / (2 * TAU)) * log(r2);\n  }\n  // How fast the arrival time changes across one LED, from the smaller of\n  // the two one-sided steps, so the jump in the wake behind the trailing\n  // edge does not count as steep.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p], d = (q) => (T[q] \u003c 0 ? 50 : min(50, abs(T[q] - t)));\n      const gx = min(x > 0 ? d(p - 1) : 50, x \u003c W - 1 ? d(p + 1) : 50), gy = min(y > 0 ? d(p - W) : 50, y \u003c H - 1 ? d(p + W) : 50);\n      G[p] = sqrt(gx * gx + gy * gy);\n    }\n  // The two stagnation points, where sin(θ - α) = -Γ / 4πR on the circle.\n  const s0 = cl(-F.gam / (4 * PI * F.R), -1, 1), th = [F.a + Math.asin(s0), F.a + PI - Math.asin(s0)];\n  for (let i = 0; i \u003c 2; i++) {\n    toPanel(F, F.z0r + F.R * cos(th[i]), F.z0i + F.R * sin(th[i]), pos);\n    Fd.st[i * 2] = pos[0];\n    Fd.st[i * 2 + 1] = pos[1];\n  }\n  return true;\n}\n\nexport function setup(params) {\n  params.s = { cur: null, old: null, nxt: null, fade: 1, s: 0, hue: 0, speed: 2, off: 0, pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(NP * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  // K1 takes the circulation away for 10 s; a second tap gives it back.\n  if (input.btnPressed && input.btnPressed[0]) P.off = P.off > 0 ? 0 : 10;\n  P.off = max(0, P.off - d);\n  const want = makeFlow(cl(k[2], 0, 15), cl(k[3], 0, 0.12), P.off \u003c= 0);\n  if (!P.cur) {\n    P.cur = newField(want);\n    fill(P.cur, NP);\n  } else if (!P.nxt && want.key !== P.cur.F.key) P.nxt = newField(want);\n  // A new flow is worked out 768 LEDs a frame, eleven frames for the panel,\n  // then faded in over 0.4 s; a knob still turning starts the next one.\n  if (P.nxt && fill(P.nxt, min(NP, P.nxt.next + CHUNK))) {\n    P.old = P.cur;\n    P.cur = P.nxt;\n    P.nxt = null;\n    P.fade = 0;\n  }\n  P.fade = min(1, P.fade + d / 0.4);\n  P.s += d * 10 * P.speed;\n}\n\nfunction paint(P, Fd, wgt, rgb) {\n  const { T, G, psi, sp, body } = Fd, pal = P.pal;\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) {\n    let r = 0.012, g = 0.016, b = 0.05;\n    // Stream lines every 6 units of ψ, about one LED wide wherever they are.\n    const u = psi[p] / SPACE, du = (abs(u - round(u)) * SPACE) / max(0.05, sp[p]), sl = 0.15 * exp(-2 * du * du);\n    r += sl * 0.45;\n    g += sl * 0.55;\n    b += sl * 0.8;\n    const t = T[p];\n    if (t >= 0) {\n      // The dye: a puff across the top row every 20 time units, lasting 2.2\n      // of them, so in the free stream a line 2.2 LEDs thick. Where the flow\n      // slows the lines crowd and thin; a line thinner than 1.6 LEDs is drawn\n      // 1.6 wide and dimmer, and where they come closer than 4 LEDs they\n      // merge into the haze they would make, 2.2/20 of full.\n      const ph = (P.s - t) / LAM - DUTY / 2, kk = round(ph), per = LAM / max(0.02, G[p]);\n      const wpx = DUTY * per, hw = max(0.8, wpx / 2), dpx = abs(ph - kk) * per;\n      const line = cl(hw + 0.5 - dpx, 0, 1) * min(1, wpx / (2 * hw)), mix = cl((per - 4) / 4, 0, 1);\n      const c = (((kk % 4) + 4) % 4) * 3, dye = line * mix, haze = DUTY * (1 - mix);\n      r += dye * pal[c] + haze * pal[12];\n      g += dye * pal[c + 1] + haze * pal[13];\n      b += dye * pal[c + 2] + haze * pal[14];\n    }\n    const bo = body[p];\n    r += (0.82 - r) * bo;\n    g += (0.84 - g) * bo;\n    b += (0.9 - b) * bo;\n    rgb[o] += wgt * r;\n    rgb[o + 1] += wgt * g;\n    rgb[o + 2] += wgt * b;\n  }\n}\n\n// The two stagnation points, a red LED each on the wing's edge.\nfunction marks(Fd, wgt, rgb) {\n  for (let i = 0; i \u003c 2; i++) {\n    const x = round(Fd.st[i * 2] - 0.5), y = round(Fd.st[i * 2 + 1] - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    rgb[o] += (1 - rgb[o]) * wgt;\n    rgb[o + 1] += (0.12 - rgb[o + 1]) * wgt;\n    rgb[o + 2] += (0.1 - rgb[o + 2]) * wgt;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cur) return;\n  const { pal, rgb } = P;\n  if (P.palHue !== P.hue) {\n    // Four dyes in turn, so a line can be followed past the wing: gold,\n    // green, blue and pink at Hue 0. The haze is their mean.\n    pal.fill(0, 12);\n    for (let i = 0; i \u003c 4; i++) {\n      hsv(P.hue + 0.12 + i * 0.25, 0.7, 1, pal, i * 3);\n      for (let c = 0; c \u003c 3; c++) pal[12 + c] += pal[i * 3 + c] / 4;\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  if (P.old && P.fade \u003c 1) paint(P, P.old, 1 - P.fade, rgb);\n  const w = P.old && P.fade \u003c 1 ? P.fade : 1;\n  paint(P, P.cur, w, rgb);\n  if (w \u003c 1) marks(P.old, 1 - w, rgb);\n  marks(P.cur, w, rgb);\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) display.setPixel(p % W, floor(p / W), min(255, rgb[o] * 255), min(255, rgb[o + 1] * 255), min(255, rgb[o + 2] * 255));\n}\n","layer":{"id":"layer-joukowsky-airfoil","type":"code","name":"joukowsky-airfoil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Joukowsky Airfoil\n// Family:  physics\n// Idea:    A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joukowsky airfoil (Nikolai Zhukovsky, 1910)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12\n//\n// Knob 1: Hue. Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it.\n// Knob 2: Speed. How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten.\n// Knob 3: Attack. The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose.\n// Knob 4: Camber. The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows.\n// Buttons: K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.\n\n// Ideal flow past a circle in the ζ-plane, carried to flow past an airfoil\n// by z = ζ + c²/ζ. The circle goes through ζ = c, which lands on the sharp\n// trailing edge at z = 2c, and its centre ζ0 = -ε + iδ sits left of the\n// origin for thickness and above it for camber. With U = 1,\n//   W(ζ) = ζ' e^{-iα} + R² e^{iα}/ζ' + (iΓ/2π) log ζ',   ζ' = ζ - ζ0,\n// and the Kutta condition, that the flow leaves the trailing edge smoothly,\n// fixes Γ = 4πR sin(α + β), β the angle of ζ0 seen from c. Lengths are in\n// LEDs: c = 11, so the chord is 44 rows, centred on the panel, and ε =\n// 0.12 c makes the wing 6 LEDs at its thickest, 14% of the chord. The free\n// stream runs down the panel at one LED per unit of time.\nconst W = 64, H = 128, NP = W * H, CX = 32, CY = 64;\nconst C = 11, EPS = 0.12 * C, LAM = 20, DUTY = 2.2 / 20, TMAX = 400, CHUNK = 768, SPACE = 6;\nconst { min, max, floor, round, sqrt, sin, cos, atan2, abs, exp, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// One flow: the circle, the angle of attack and the circulation.\nfunction makeFlow(alphaDeg, camber, kutta) {\n  const a = (alphaDeg * PI) / 180, d = camber * 2 * C;\n  const z0r = -EPS, z0i = d, R = sqrt((C + EPS) ** 2 + d * d), beta = atan2(d, C + EPS);\n  const gam = kutta ? 4 * PI * R * sin(a + beta) : 0;\n  return { a, ca: cos(a), sa: sin(a), z0r, z0i, R, R2: R * R, beta, gam, key: alphaDeg.toFixed(1) + \"/\" + camber.toFixed(3) + \"/\" + kutta };\n}\n\n// The flow at ζ: o[0], o[1] = dζ/dt, o[2] = speed on the panel, o[3] =\n// |dz/dζ|. dζ/dt = conj(dW/dζ) / |dz/dζ|². At the trailing edge dz/dζ is 0;\n// with the Kutta condition dW/dζ is 0 there too and the floor on |dz/dζ|²\n// only keeps 0/0 away, without it the speed there is capped at 6.\nfunction flowAt(F, zr, zi, o) {\n  const pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n  const ir = pr / r2, ii = -pi / r2, i2r = ir * ir - ii * ii, i2i = 2 * ir * ii;\n  const er = F.ca * i2r - F.sa * i2i, ei = F.ca * i2i + F.sa * i2r, g = F.gam / TAU;\n  const wr = F.ca - F.R2 * er - g * ii, wi = -F.sa - F.R2 * ei + g * ir;\n  const q2 = zr * zr + zi * zi, jr = zr / q2, ji = -zi / q2, j2r = jr * jr - ji * ji, j2i = 2 * jr * ji;\n  const dr = 1 - C * C * j2r, di = -C * C * j2i, J2 = max(1e-8, dr * dr + di * di);\n  let sp = sqrt((wr * wr + wi * wi) / J2), k = 1;\n  if (sp > 6) (k = 6 / sp), (sp = 6);\n  o[0] = (k * wr) / J2;\n  o[1] = (-k * wi) / J2;\n  o[2] = sp;\n  o[3] = sqrt(J2);\n}\n\n// ζ to the panel: z = ζ + c²/ζ, turned back by α so the free stream runs\n// down the panel and the suction side faces right. o[0] = X, o[1] = Y.\nfunction toPanel(F, zr, zi, o) {\n  const q2 = zr * zr + zi * zi, xr = zr + (C * C * zr) / q2, xi = zi - (C * C * zi) / q2;\n  o[0] = CX + xi * F.ca - xr * F.sa;\n  o[1] = CY + xr * F.ca + xi * F.sa;\n}\n\n// The panel to ζ: of the two roots of ζ² - zζ + c² = 0, the one outside\n// the circle. o[2] = |ζ'|²; less than R² means the LED is inside the wing.\nfunction toZeta(F, X, Y, o) {\n  const pr = Y - CY, pi = X - CX, zr = pr * F.ca - pi * F.sa, zi = pr * F.sa + pi * F.ca;\n  const wr = zr * zr - zi * zi - 4 * C * C, wi = 2 * zr * zi, m = sqrt(wr * wr + wi * wi);\n  const sr = sqrt(max(0, (m + wr) / 2)), si = (wi \u003c 0 ? -1 : 1) * sqrt(max(0, (m - wr) / 2));\n  const ar = (zr + sr) / 2, ai = (zi + si) / 2, br = (zr - sr) / 2, bi = (zi - si) / 2;\n  const da = (ar - F.z0r) ** 2 + (ai - F.z0i) ** 2, db = (br - F.z0r) ** 2 + (bi - F.z0i) ** 2;\n  if (da >= db) (o[0] = ar), (o[1] = ai), (o[2] = da);\n  else (o[0] = br), (o[1] = bi), (o[2] = db);\n}\n\n// When the fluid at an LED crossed the top row: back along its stream line,\n// in the ζ-plane where the wing is a circle and easy to keep out of, adding\n// up time. Midpoint steps of 0.35 LED by the surface, up to 3 LEDs and 3\n// time units away from it.\nfunction arrival(F, X, Y, f, pos) {\n  toZeta(F, X, Y, f);\n  if (f[2] \u003c F.R2) return -1;\n  let zr = f[0], zi = f[1], T = 0;\n  for (let it = 0; it \u003c 400; it++) {\n    flowAt(F, zr, zi, f);\n    const pr = zr - F.z0r, pi = zi - F.z0i, dist = (sqrt(pr * pr + pi * pi) - F.R) * f[3];\n    const dt = min(cl(0.35 + 0.3 * dist, 0.35, 3) / max(f[2], 1e-6), 3);\n    flowAt(F, zr - 0.5 * dt * f[0], zi - 0.5 * dt * f[1], f);\n    zr -= dt * f[0];\n    zi -= dt * f[1];\n    const qr = zr - F.z0r, qi = zi - F.z0i, q2 = qr * qr + qi * qi;\n    if (q2 \u003c F.R2) {\n      const s = (F.R * 1.0001) / sqrt(q2);\n      zr = F.z0r + qr * s;\n      zi = F.z0i + qi * s;\n    }\n    T += dt;\n    toPanel(F, zr, zi, pos);\n    // Past the top row: give back the part of the step beyond it.\n    if (pos[1] \u003c= 0) return max(0, T + pos[1] / max(0.3, f[2]));\n    if (T > TMAX) return TMAX;\n  }\n  return TMAX;\n}\n\nfunction newField(F) {\n  return { F, T: new Float32Array(NP), G: new Float32Array(NP), psi: new Float32Array(NP), sp: new Float32Array(NP), body: new Float32Array(NP), next: 0, st: [0, 0, 0, 0] };\n}\n\n// Arrival times for LEDs from..to of a field; the rest once they are all in.\nfunction fill(Fd, to) {\n  const { F, T, G, psi, sp, body } = Fd, f = new Float64Array(4), pos = [0, 0];\n  for (let p = Fd.next; p \u003c to; p++) T[p] = arrival(F, (p % W) + 0.5, floor(p / W) + 0.5, f, pos);\n  Fd.next = to;\n  if (to \u003c NP) return false;\n  for (let p = 0; p \u003c NP; p++) {\n    toZeta(F, (p % W) + 0.5, floor(p / W) + 0.5, f);\n    const zr = f[0], zi = f[1], pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n    flowAt(F, zr, zi, f);\n    sp[p] = f[2];\n    // Inside the wing or within half an LED of its edge, by the distance\n    // to the circle stretched by |dz/dζ|.\n    body[p] = cl(0.5 - (sqrt(r2) - F.R) * f[3], 0, 1);\n    // ψ = Im W.\n    psi[p] = pi * F.ca - pr * F.sa + (F.R2 * (F.sa * pr - F.ca * pi)) / r2 + (F.gam / (2 * TAU)) * log(r2);\n  }\n  // How fast the arrival time changes across one LED, from the smaller of\n  // the two one-sided steps, so the jump in the wake behind the trailing\n  // edge does not count as steep.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p], d = (q) => (T[q] \u003c 0 ? 50 : min(50, abs(T[q] - t)));\n      const gx = min(x > 0 ? d(p - 1) : 50, x \u003c W - 1 ? d(p + 1) : 50), gy = min(y > 0 ? d(p - W) : 50, y \u003c H - 1 ? d(p + W) : 50);\n      G[p] = sqrt(gx * gx + gy * gy);\n    }\n  // The two stagnation points, where sin(θ - α) = -Γ / 4πR on the circle.\n  const s0 = cl(-F.gam / (4 * PI * F.R), -1, 1), th = [F.a + Math.asin(s0), F.a + PI - Math.asin(s0)];\n  for (let i = 0; i \u003c 2; i++) {\n    toPanel(F, F.z0r + F.R * cos(th[i]), F.z0i + F.R * sin(th[i]), pos);\n    Fd.st[i * 2] = pos[0];\n    Fd.st[i * 2 + 1] = pos[1];\n  }\n  return true;\n}\n\nexport function setup(params) {\n  params.s = { cur: null, old: null, nxt: null, fade: 1, s: 0, hue: 0, speed: 2, off: 0, pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(NP * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  // K1 takes the circulation away for 10 s; a second tap gives it back.\n  if (input.btnPressed && input.btnPressed[0]) P.off = P.off > 0 ? 0 : 10;\n  P.off = max(0, P.off - d);\n  const want = makeFlow(cl(k[2], 0, 15), cl(k[3], 0, 0.12), P.off \u003c= 0);\n  if (!P.cur) {\n    P.cur = newField(want);\n    fill(P.cur, NP);\n  } else if (!P.nxt && want.key !== P.cur.F.key) P.nxt = newField(want);\n  // A new flow is worked out 768 LEDs a frame, eleven frames for the panel,\n  // then faded in over 0.4 s; a knob still turning starts the next one.\n  if (P.nxt && fill(P.nxt, min(NP, P.nxt.next + CHUNK))) {\n    P.old = P.cur;\n    P.cur = P.nxt;\n    P.nxt = null;\n    P.fade = 0;\n  }\n  P.fade = min(1, P.fade + d / 0.4);\n  P.s += d * 10 * P.speed;\n}\n\nfunction paint(P, Fd, wgt, rgb) {\n  const { T, G, psi, sp, body } = Fd, pal = P.pal;\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) {\n    let r = 0.012, g = 0.016, b = 0.05;\n    // Stream lines every 6 units of ψ, about one LED wide wherever they are.\n    const u = psi[p] / SPACE, du = (abs(u - round(u)) * SPACE) / max(0.05, sp[p]), sl = 0.15 * exp(-2 * du * du);\n    r += sl * 0.45;\n    g += sl * 0.55;\n    b += sl * 0.8;\n    const t = T[p];\n    if (t >= 0) {\n      // The dye: a puff across the top row every 20 time units, lasting 2.2\n      // of them, so in the free stream a line 2.2 LEDs thick. Where the flow\n      // slows the lines crowd and thin; a line thinner than 1.6 LEDs is drawn\n      // 1.6 wide and dimmer, and where they come closer than 4 LEDs they\n      // merge into the haze they would make, 2.2/20 of full.\n      const ph = (P.s - t) / LAM - DUTY / 2, kk = round(ph), per = LAM / max(0.02, G[p]);\n      const wpx = DUTY * per, hw = max(0.8, wpx / 2), dpx = abs(ph - kk) * per;\n      const line = cl(hw + 0.5 - dpx, 0, 1) * min(1, wpx / (2 * hw)), mix = cl((per - 4) / 4, 0, 1);\n      const c = (((kk % 4) + 4) % 4) * 3, dye = line * mix, haze = DUTY * (1 - mix);\n      r += dye * pal[c] + haze * pal[12];\n      g += dye * pal[c + 1] + haze * pal[13];\n      b += dye * pal[c + 2] + haze * pal[14];\n    }\n    const bo = body[p];\n    r += (0.82 - r) * bo;\n    g += (0.84 - g) * bo;\n    b += (0.9 - b) * bo;\n    rgb[o] += wgt * r;\n    rgb[o + 1] += wgt * g;\n    rgb[o + 2] += wgt * b;\n  }\n}\n\n// The two stagnation points, a red LED each on the wing's edge.\nfunction marks(Fd, wgt, rgb) {\n  for (let i = 0; i \u003c 2; i++) {\n    const x = round(Fd.st[i * 2] - 0.5), y = round(Fd.st[i * 2 + 1] - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    rgb[o] += (1 - rgb[o]) * wgt;\n    rgb[o + 1] += (0.12 - rgb[o + 1]) * wgt;\n    rgb[o + 2] += (0.1 - rgb[o + 2]) * wgt;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cur) return;\n  const { pal, rgb } = P;\n  if (P.palHue !== P.hue) {\n    // Four dyes in turn, so a line can be followed past the wing: gold,\n    // green, blue and pink at Hue 0. The haze is their mean.\n    pal.fill(0, 12);\n    for (let i = 0; i \u003c 4; i++) {\n      hsv(P.hue + 0.12 + i * 0.25, 0.7, 1, pal, i * 3);\n      for (let c = 0; c \u003c 3; c++) pal[12 + c] += pal[i * 3 + c] / 4;\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  if (P.old && P.fade \u003c 1) paint(P, P.old, 1 - P.fade, rgb);\n  const w = P.old && P.fade \u003c 1 ? P.fade : 1;\n  paint(P, P.cur, w, rgb);\n  if (w \u003c 1) marks(P.old, 1 - w, rgb);\n  marks(P.cur, w, rgb);\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) display.setPixel(p % W, floor(p / W), min(255, rgb[o] * 255), min(255, rgb[o + 1] * 255), min(255, rgb[o + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten."},{"name":"Attack","min":0,"max":15,"about":"The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose."},{"name":"Camber","min":0,"max":0.12,"about":"The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows."}],"start":[0,2,0,0.06],"measures":{"motion":1.8048,"detail":0.0682,"edges":0.3096,"complexity":0.7976,"coverage":0.3578,"colour":0.2135,"drift":0.0573},"knobResponse":[0.061,0.1268,0.1391,0.1409]},{"slug":"kaleidoscope","title":"Kaleidoscope","family":"geometry","round":1,"note":"움직이는 선 세 벌이 유리 한 조각을 자르고 거울이 그 조각을 꽃으로 접어요. 조각 사이에 1 LED 검은 납선이 있어요.","idea":"Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.","buttons":"K1 tap reverses the turn.","code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","layer":{"id":"layer-kaleidoscope","type":"code","name":"kaleidoscope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the glass colours around the colour wheel."},{"name":"Speed","min":0.1,"max":4,"about":"How fast the shards slide and the mirrors turn."},{"name":"Segments","min":6,"max":16,"about":"How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette."},{"name":"Twist","min":-1,"max":1,"about":"Bends the wedges into a spiral, one way below 0 and the other way above."}],"start":[0,2,6,0.06],"measures":{"motion":0.9384,"detail":0.1125,"edges":0.4099,"complexity":1.6131,"coverage":0.5499,"colour":0.359,"drift":0.2217},"knobResponse":[0.1659,0.2298,0.1535,0.1426]},{"slug":"kari-culik","title":"Kari-Culik Tiles","family":"algo","round":35,"note":"카리의 왕 타일 14장이 되풀이 없이 판을 덮어요. 한 줄이 x 를 2 나 2/3 로 곱하는 긴 곱셈이라 위아래 변에는 비티 숫자가 파랑 마름모로, 옆 변에는 올림수가 초록이나 보라에서 금색까지의 마름모로 이어져요. K3 은 맨 윗줄의 x 를 바꿔 다른 타일링을 깔고, K1 을 누르면 3초 동안 타일이 4분의 1 칸씩 떨어져 한 장씩 보여요.","idea":"Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.","buttons":"K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.","code":"// ===== Patternflow pattern =====\n// Title:   Kari-Culik Tiles\n// Family:  algo\n// Idea:    Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aperiodic Wang tiles from Beatty sequences (Jarkko Kari, 1996; Karel Culik II, 1996), Kari's set of 14, pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3.\n// Knob 2: Speed. How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s.\n// Knob 3: Start. The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles.\n// Knob 4: Size. Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8.\n// Buttons: K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.\n\n// The rule behind the tiles. Write x by its Beatty digits\n// a_n = floor((n + 1) x) - floor(n x), n over all the integers. A tile in a\n// row that multiplies by q has a_n(x) on top, a_n(qx) underneath, the carry\n// s_n = q floor(n x) - floor(n q x) on its left and s_(n+1) on its right, and\n// q a_n + s_n = b_n + s_(n+1) holds for each one, so the row is a long\n// multiplication done digit by digit. Rows stack with x_(i+1) = T(x_i),\n// 2x on [2/3, 1) and 2x/3 on [1, 2); T maps [2/3, 2) onto itself one to one,\n// so the rows can run either way. Kari states T on [1/2, 2], but [1/2, 2/3)\n// has nothing above it, and a tiling that scrolls up for ever lives in\n// [2/3, 2). No product of 2s and 2/3s is 1, so no row ever comes back.\n//\n// Counted over 5,400 rows from nine starts and 800 columns each, with exact\n// arithmetic and the identity checked on every tile, the rows use exactly 14\n// tiles, Kari's set: 4 that multiply by 2 and 10 by 2/3. The same count over\n// Culik's rows (3x on [1/3, 2/3), x/2 on [2/3, 2)) gives 12, one of them the\n// tile with 0 on all four edges, which covers the plane by itself. An\n// aperiodic set cannot hold such a tile, so Culik's 13 are not this plain\n// count, and the picture uses Kari's.\n//\n// In the log of x, T is a turn by log 2 round a circle log 3 long, so the\n// kinds of row follow a Sturmian word: a times-2 row (37%, log 1.5 / log 3\n// of them) is never next to another, and one or two times-2/3 rows lie\n// between them.\n\nconst W = 64, H = 128;\nconst { floor, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst Z = BigInt(0), ONE = BigInt(1), TWO = BigInt(2), THREE = BigInt(3), FOUR = BigInt(4);\n// Start = 0 lands on the square root of 2.\nconst START = 0.5606601717798213;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each row keeps x as an exact fraction p/q of BigInts. With floats the\n// product drifts off the true 2x/3 in its last bit, and a test run that way\n// turned up tiles with a carry of 1, which no row can have. The fractions\n// grow by a bit a row: 10,000 rows up, seven hours at Speed 2, they are\n// 10,053 bits long and one floor(n x) takes 9 microseconds.\nfunction floorDiv(n, p, q) {\n  const v = BigInt(n) * p;\n  let d = v / q;\n  if (v \u003c Z && d * q !== v) d -= ONE;\n  return Number(d);\n}\n\nfunction reduce(r) {\n  while ((r.p & ONE) === Z && (r.q & ONE) === Z) (r.p >>= ONE), (r.q >>= ONE);\n  while (r.p % THREE === Z && r.q % THREE === Z) (r.p /= THREE), (r.q /= THREE);\n  // kind 0 multiplies by 2 (x \u003c 1), kind 1 by 2/3.\n  r.kind = r.p \u003c r.q ? 0 : 1;\n  r.F = new Map();\n  return r;\n}\nconst forward = (r) => reduce({ p: TWO * r.p, q: r.kind === 0 ? r.q : THREE * r.q });\n// The row above: y/2 when y is 4/3 or more (it came from a times-2 row),\n// 3y/2 below that (from a times-2/3 row).\nconst backward = (r) => reduce({ p: THREE * r.p >= FOUR * r.q ? r.p : THREE * r.p, q: TWO * r.q });\n\n// floor(n x) for a row, kept per column while the row is on the panel.\nfunction fx(r, n) {\n  let v = r.F.get(n);\n  if (v === undefined) r.F.set(n, (v = floorDiv(n, r.p, r.q)));\n  return v;\n}\n\n// A new tiling with x at row index `at`. x is a fraction over 2^52, so the\n// top row's digits repeat only after 2^52 columns.\nfunction build(P, u, at) {\n  const x = 2 / 3 + (4 / 3) * ((((u + START) % 1) + 1) % 1);\n  const K = 2 ** 52;\n  P.rows = new Map([[at, reduce({ p: BigInt(round(x * K)), q: BigInt(K) })]]);\n  P.lo = P.hi = at;\n  P.start = u;\n}\n\nfunction row(P, i) {\n  while (i \u003c P.lo) {\n    const r = backward(P.rows.get(P.lo));\n    P.rows.set(--P.lo, r);\n  }\n  while (i > P.hi) {\n    const r = forward(P.rows.get(P.hi));\n    P.rows.set(++P.hi, r);\n  }\n  return P.rows.get(i);\n}\n\n// Which part of a D x D tile each pixel shows: 0 top, 1 right, 2 bottom,\n// 3 left, or 4 for a pixel on a diagonal, left dark so the triangles stay\n// apart. Two triangles that meet across a tile edge always carry the same\n// label, so the dark diagonals are all that is seen of the tile grid. A\n// lifted tile stands alone in its gap and needs no seams: its diagonal\n// pixels go to the top and bottom triangles.\nfunction triangles(D, seams) {\n  const t = new Uint8Array(D * D);\n  for (let v = 0; v \u003c D; v++)\n    for (let u = 0; u \u003c D; u++) {\n      const dT = v, dB = D - 1 - v, dL = u, dR = D - 1 - u, m = min(dT, dB, dL, dR);\n      const ties = (dT === m) + (dB === m) + (dL === m) + (dR === m);\n      t[v * D + u] = seams && ties > 1 ? 4 : dT === m ? 0 : dB === m ? 2 : dR === m ? 1 : 3;\n    }\n  return t;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, size: 8, scroll: 0, pan: 0, lift: 0, liftT: -1,\n    pal: new Float32Array(9 * 3), palHue: NaN, tri: new Map(), lab: new Int8Array(4),\n  };\n  build(params.s, 0, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 8], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = 2 * round(cl(k[3], 8, 16) / 2);\n  // A turn of Start puts its x on the top row showing now, and the rest of\n  // the tiling grows from there.\n  const u = cl(k[2], 0, 1);\n  if (u !== P.start) build(P, u, floor(-floor(P.scroll) / P.size));\n  P.scroll += d * P.speed * 1.5;\n  P.pan += d * P.speed * 0.5;\n  if (input.btnPressed && input.btnPressed[0]) P.liftT = 0;\n  if (P.liftT >= 0) {\n    P.liftT += d;\n    const t = P.liftT;\n    P.lift = t \u003c 0.5 ? sm(t / 0.5) : t \u003c 3.5 ? 1 : sm((4 - t) / 0.5);\n    if (t >= 4) (P.liftT = -1), (P.lift = 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const S = P.size, pal = P.pal, lab = P.lab;\n  if (P.palHue !== P.hue) {\n    // Labels 0-2 are the digits, a ramp in one blue; 3-4 the carries 0 and\n    // -1 of the times-2 rows; 5-8 the carries -1/3, 0, 1/3, 2/3 of the\n    // times-2/3 rows. Where the hue knob turns the blues to red, orange or\n    // yellow the dark digits are laid lighter, as a dim orange reads brown.\n    const c = [\n      [0.62, 0.85, 0.45], [0.58, 0.62, 0.78], [0.53, 0.22, 1],\n      [0.25, 0.8, 1], [0.45, 0.7, 0.9],\n      [0.78, 0.7, 1], [0.92, 0.62, 1], [0.04, 0.72, 1], [0.12, 0.6, 1],\n    ];\n    for (let j = 0; j \u003c 9; j++) {\n      let [h, s, v] = c[j];\n      h += P.hue;\n      const hh = h - floor(h) > 0.9 ? h - floor(h) - 1 : h - floor(h), warm = sm((hh + 0.04) / 0.08) * sm((0.24 - hh) / 0.06);\n      if (j \u003c 2) (v += (0.85 - v) * warm), (s *= 1 - 0.25 * warm);\n      hsv(h, s, v, pal, j * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The lift opens a gap of up to a quarter tile, in whole LEDs, and draws\n  // each tile that much smaller in the middle of its cell.\n  const gap = round(P.lift * (S / 4)), D = S - gap, off = gap >> 1;\n  const key = 2 * D + (gap === 0 ? 1 : 0);\n  let tri = P.tri.get(key);\n  if (!tri) P.tri.set(key, (tri = triangles(D, gap === 0)));\n  const sy = floor(P.scroll), sx = floor(P.pan);\n  const i0 = floor(-sy / S), i1 = floor((H - 1 - sy) / S);\n  const n0 = floor(sx / S), n1 = floor((W - 1 + sx) / S);\n  for (let i = i0; i \u003c= i1; i++) {\n    const r = row(P, i), r2 = row(P, i + 1);\n    for (let n = n0; n \u003c= n1; n++) {\n      const f0 = fx(r, n), f1 = fx(r, n + 1), g0 = fx(r2, n), g1 = fx(r2, n + 1);\n      lab[0] = f1 - f0;\n      lab[2] = g1 - g0;\n      // Left and right carries: s = 2 floor(nx) - floor(2nx) is 0 or -1;\n      // 3s = 2 floor(nx) - 3 floor(2nx/3) is -1, 0, 1 or 2.\n      if (r.kind === 0) (lab[3] = 3 + g0 - 2 * f0), (lab[1] = 3 + g1 - 2 * f1);\n      else (lab[3] = 6 + 2 * f0 - 3 * g0), (lab[1] = 6 + 2 * f1 - 3 * g1);\n      const X0 = n * S - sx, Y0 = i * S + sy;\n      for (let v = 0; v \u003c S; v++) {\n        const Y = Y0 + v;\n        if (Y \u003c 0 || Y >= H) continue;\n        const tv = v - off;\n        for (let u = 0; u \u003c S; u++) {\n          const X = X0 + u;\n          if (X \u003c 0 || X >= W) continue;\n          const tu = u - off;\n          const t = tv \u003c 0 || tu \u003c 0 || tv >= D || tu >= D ? 4 : tri[tv * D + tu];\n          if (t === 4) {\n            display.setPixel(X, Y, 0, 0, 0);\n            continue;\n          }\n          const o = lab[t] * 3;\n          display.setPixel(X, Y, pal[o] * 255, pal[o + 1] * 255, pal[o + 2] * 255);\n        }\n      }\n    }\n  }\n  // Rows that have slid off the bottom are let go; the panel only ever\n  // needs the rows from i0 down to i1 + 1.\n  while (P.hi > i1 + 2) P.rows.delete(P.hi--);\n}\n","layer":{"id":"layer-kari-culik","type":"code","name":"kari-culik","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kari-Culik Tiles\n// Family:  algo\n// Idea:    Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aperiodic Wang tiles from Beatty sequences (Jarkko Kari, 1996; Karel Culik II, 1996), Kari's set of 14, pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3.\n// Knob 2: Speed. How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s.\n// Knob 3: Start. The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles.\n// Knob 4: Size. Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8.\n// Buttons: K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.\n\n// The rule behind the tiles. Write x by its Beatty digits\n// a_n = floor((n + 1) x) - floor(n x), n over all the integers. A tile in a\n// row that multiplies by q has a_n(x) on top, a_n(qx) underneath, the carry\n// s_n = q floor(n x) - floor(n q x) on its left and s_(n+1) on its right, and\n// q a_n + s_n = b_n + s_(n+1) holds for each one, so the row is a long\n// multiplication done digit by digit. Rows stack with x_(i+1) = T(x_i),\n// 2x on [2/3, 1) and 2x/3 on [1, 2); T maps [2/3, 2) onto itself one to one,\n// so the rows can run either way. Kari states T on [1/2, 2], but [1/2, 2/3)\n// has nothing above it, and a tiling that scrolls up for ever lives in\n// [2/3, 2). No product of 2s and 2/3s is 1, so no row ever comes back.\n//\n// Counted over 5,400 rows from nine starts and 800 columns each, with exact\n// arithmetic and the identity checked on every tile, the rows use exactly 14\n// tiles, Kari's set: 4 that multiply by 2 and 10 by 2/3. The same count over\n// Culik's rows (3x on [1/3, 2/3), x/2 on [2/3, 2)) gives 12, one of them the\n// tile with 0 on all four edges, which covers the plane by itself. An\n// aperiodic set cannot hold such a tile, so Culik's 13 are not this plain\n// count, and the picture uses Kari's.\n//\n// In the log of x, T is a turn by log 2 round a circle log 3 long, so the\n// kinds of row follow a Sturmian word: a times-2 row (37%, log 1.5 / log 3\n// of them) is never next to another, and one or two times-2/3 rows lie\n// between them.\n\nconst W = 64, H = 128;\nconst { floor, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst Z = BigInt(0), ONE = BigInt(1), TWO = BigInt(2), THREE = BigInt(3), FOUR = BigInt(4);\n// Start = 0 lands on the square root of 2.\nconst START = 0.5606601717798213;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each row keeps x as an exact fraction p/q of BigInts. With floats the\n// product drifts off the true 2x/3 in its last bit, and a test run that way\n// turned up tiles with a carry of 1, which no row can have. The fractions\n// grow by a bit a row: 10,000 rows up, seven hours at Speed 2, they are\n// 10,053 bits long and one floor(n x) takes 9 microseconds.\nfunction floorDiv(n, p, q) {\n  const v = BigInt(n) * p;\n  let d = v / q;\n  if (v \u003c Z && d * q !== v) d -= ONE;\n  return Number(d);\n}\n\nfunction reduce(r) {\n  while ((r.p & ONE) === Z && (r.q & ONE) === Z) (r.p >>= ONE), (r.q >>= ONE);\n  while (r.p % THREE === Z && r.q % THREE === Z) (r.p /= THREE), (r.q /= THREE);\n  // kind 0 multiplies by 2 (x \u003c 1), kind 1 by 2/3.\n  r.kind = r.p \u003c r.q ? 0 : 1;\n  r.F = new Map();\n  return r;\n}\nconst forward = (r) => reduce({ p: TWO * r.p, q: r.kind === 0 ? r.q : THREE * r.q });\n// The row above: y/2 when y is 4/3 or more (it came from a times-2 row),\n// 3y/2 below that (from a times-2/3 row).\nconst backward = (r) => reduce({ p: THREE * r.p >= FOUR * r.q ? r.p : THREE * r.p, q: TWO * r.q });\n\n// floor(n x) for a row, kept per column while the row is on the panel.\nfunction fx(r, n) {\n  let v = r.F.get(n);\n  if (v === undefined) r.F.set(n, (v = floorDiv(n, r.p, r.q)));\n  return v;\n}\n\n// A new tiling with x at row index `at`. x is a fraction over 2^52, so the\n// top row's digits repeat only after 2^52 columns.\nfunction build(P, u, at) {\n  const x = 2 / 3 + (4 / 3) * ((((u + START) % 1) + 1) % 1);\n  const K = 2 ** 52;\n  P.rows = new Map([[at, reduce({ p: BigInt(round(x * K)), q: BigInt(K) })]]);\n  P.lo = P.hi = at;\n  P.start = u;\n}\n\nfunction row(P, i) {\n  while (i \u003c P.lo) {\n    const r = backward(P.rows.get(P.lo));\n    P.rows.set(--P.lo, r);\n  }\n  while (i > P.hi) {\n    const r = forward(P.rows.get(P.hi));\n    P.rows.set(++P.hi, r);\n  }\n  return P.rows.get(i);\n}\n\n// Which part of a D x D tile each pixel shows: 0 top, 1 right, 2 bottom,\n// 3 left, or 4 for a pixel on a diagonal, left dark so the triangles stay\n// apart. Two triangles that meet across a tile edge always carry the same\n// label, so the dark diagonals are all that is seen of the tile grid. A\n// lifted tile stands alone in its gap and needs no seams: its diagonal\n// pixels go to the top and bottom triangles.\nfunction triangles(D, seams) {\n  const t = new Uint8Array(D * D);\n  for (let v = 0; v \u003c D; v++)\n    for (let u = 0; u \u003c D; u++) {\n      const dT = v, dB = D - 1 - v, dL = u, dR = D - 1 - u, m = min(dT, dB, dL, dR);\n      const ties = (dT === m) + (dB === m) + (dL === m) + (dR === m);\n      t[v * D + u] = seams && ties > 1 ? 4 : dT === m ? 0 : dB === m ? 2 : dR === m ? 1 : 3;\n    }\n  return t;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, size: 8, scroll: 0, pan: 0, lift: 0, liftT: -1,\n    pal: new Float32Array(9 * 3), palHue: NaN, tri: new Map(), lab: new Int8Array(4),\n  };\n  build(params.s, 0, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 8], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = 2 * round(cl(k[3], 8, 16) / 2);\n  // A turn of Start puts its x on the top row showing now, and the rest of\n  // the tiling grows from there.\n  const u = cl(k[2], 0, 1);\n  if (u !== P.start) build(P, u, floor(-floor(P.scroll) / P.size));\n  P.scroll += d * P.speed * 1.5;\n  P.pan += d * P.speed * 0.5;\n  if (input.btnPressed && input.btnPressed[0]) P.liftT = 0;\n  if (P.liftT >= 0) {\n    P.liftT += d;\n    const t = P.liftT;\n    P.lift = t \u003c 0.5 ? sm(t / 0.5) : t \u003c 3.5 ? 1 : sm((4 - t) / 0.5);\n    if (t >= 4) (P.liftT = -1), (P.lift = 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const S = P.size, pal = P.pal, lab = P.lab;\n  if (P.palHue !== P.hue) {\n    // Labels 0-2 are the digits, a ramp in one blue; 3-4 the carries 0 and\n    // -1 of the times-2 rows; 5-8 the carries -1/3, 0, 1/3, 2/3 of the\n    // times-2/3 rows. Where the hue knob turns the blues to red, orange or\n    // yellow the dark digits are laid lighter, as a dim orange reads brown.\n    const c = [\n      [0.62, 0.85, 0.45], [0.58, 0.62, 0.78], [0.53, 0.22, 1],\n      [0.25, 0.8, 1], [0.45, 0.7, 0.9],\n      [0.78, 0.7, 1], [0.92, 0.62, 1], [0.04, 0.72, 1], [0.12, 0.6, 1],\n    ];\n    for (let j = 0; j \u003c 9; j++) {\n      let [h, s, v] = c[j];\n      h += P.hue;\n      const hh = h - floor(h) > 0.9 ? h - floor(h) - 1 : h - floor(h), warm = sm((hh + 0.04) / 0.08) * sm((0.24 - hh) / 0.06);\n      if (j \u003c 2) (v += (0.85 - v) * warm), (s *= 1 - 0.25 * warm);\n      hsv(h, s, v, pal, j * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The lift opens a gap of up to a quarter tile, in whole LEDs, and draws\n  // each tile that much smaller in the middle of its cell.\n  const gap = round(P.lift * (S / 4)), D = S - gap, off = gap >> 1;\n  const key = 2 * D + (gap === 0 ? 1 : 0);\n  let tri = P.tri.get(key);\n  if (!tri) P.tri.set(key, (tri = triangles(D, gap === 0)));\n  const sy = floor(P.scroll), sx = floor(P.pan);\n  const i0 = floor(-sy / S), i1 = floor((H - 1 - sy) / S);\n  const n0 = floor(sx / S), n1 = floor((W - 1 + sx) / S);\n  for (let i = i0; i \u003c= i1; i++) {\n    const r = row(P, i), r2 = row(P, i + 1);\n    for (let n = n0; n \u003c= n1; n++) {\n      const f0 = fx(r, n), f1 = fx(r, n + 1), g0 = fx(r2, n), g1 = fx(r2, n + 1);\n      lab[0] = f1 - f0;\n      lab[2] = g1 - g0;\n      // Left and right carries: s = 2 floor(nx) - floor(2nx) is 0 or -1;\n      // 3s = 2 floor(nx) - 3 floor(2nx/3) is -1, 0, 1 or 2.\n      if (r.kind === 0) (lab[3] = 3 + g0 - 2 * f0), (lab[1] = 3 + g1 - 2 * f1);\n      else (lab[3] = 6 + 2 * f0 - 3 * g0), (lab[1] = 6 + 2 * f1 - 3 * g1);\n      const X0 = n * S - sx, Y0 = i * S + sy;\n      for (let v = 0; v \u003c S; v++) {\n        const Y = Y0 + v;\n        if (Y \u003c 0 || Y >= H) continue;\n        const tv = v - off;\n        for (let u = 0; u \u003c S; u++) {\n          const X = X0 + u;\n          if (X \u003c 0 || X >= W) continue;\n          const tu = u - off;\n          const t = tv \u003c 0 || tu \u003c 0 || tv >= D || tu >= D ? 4 : tri[tv * D + tu];\n          if (t === 4) {\n            display.setPixel(X, Y, 0, 0, 0);\n            continue;\n          }\n          const o = lab[t] * 3;\n          display.setPixel(X, Y, pal[o] * 255, pal[o + 1] * 255, pal[o + 2] * 255);\n        }\n      }\n    }\n  }\n  // Rows that have slid off the bottom are let go; the panel only ever\n  // needs the rows from i0 down to i1 + 1.\n  while (P.hi > i1 + 2) P.rows.delete(P.hi--);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s."},{"name":"Start","min":0,"max":1,"about":"The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles."},{"name":"Size","min":8,"max":16,"about":"Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8."}],"start":[0,2,0,8],"measures":{"motion":1.0596,"detail":0.333,"edges":1,"complexity":0.1114,"coverage":0.75,"colour":0.4775,"drift":0.0797},"knobResponse":[0.3661,0.4609,0.2299,0.3929]},{"slug":"karman-street","title":"Kármán Street","family":"sim","round":37,"note":"반대로 도는 점 소용돌이 두 줄이 반 간격씩 어긋난 채 128줄을 위에서 아래로 흘러가요. 왼쪽 줄은 아쿠아, 오른쪽 줄은 장밋빛 염료를 감아 나선을 만들고, 두 줄 사이 거리와 간격의 비가 폰 카르만의 0.2806 이면 거리가 버티며 두 염료가 금색으로 바뀌어요. 처음 비 0.34 에서는 보이지 않던 흔들림이 12~24초 만에 자라 소용돌이가 짝을 지어 흩어지고, 그 뒤에 새 거리가 깔려요. K4 는 그 비를 0.13 에서 0.53 까지 옮기고, 누르면 새 거리를 바로 깔아요.","idea":"Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.","buttons":"K1 tap lays a fresh street at once, with a new small wobble.","code":"// ===== Patternflow pattern =====\n// Title:   Kármán Street\n// Family:  sim\n// Idea:    Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kármán vortex street and its stability (Theodore von Kármán, 1911), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25\n//\n// Knob 1: Hue. Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose.\n// Knob 2: Speed. How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower.\n// Knob 3: Vortices. Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it.\n// Knob 4: Offset. The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides.\n// Buttons: K1 tap lays a fresh street at once, with a new small wobble.\n\n// Each vortex is a whole row of copies 128 rows apart, so the panel is one\n// period top to bottom. A vertical row of vortices of circulation G spaced L\n// has the complex velocity -(i G / 2L) coth(pi (z - z0) / L), which in x and\n// y is the kernel in velAt() below. The row of n vortices spaced a = 128 / n is\n// the same sum as von Kármán's infinite row, so with the columns h apart and\n// staggered by a / 2 the street moves as one at (G / 2a) tanh(pi h / a).\n//\n// Growth of a random wobble of 1e-7 a, with G = a, measured as the slope of\n// ln(wobble) in a 600 s run (per second):\n//   h/a      0.13   0.20   0.25   0.2806  0.31   0.34   0.45   0.53\n//   n = 4   0.016  0.0076 0.0009 -0.001  0.0012 0.0054 0.014  0.017\n//   n = 8   0.031  0.0175 0.0041  0.001  0.0057 0.0117 0.028  0.034\n// At 0.2806 it stays inside +-0.0013, which is the measuring noise: the\n// street is neutrally stable there. The more vortices a period holds, the\n// narrower the nearly stable band round it, because a period of n allows\n// only wobbles whose phase steps by a multiple of 2 pi / n from one vortex\n// to the next; with 3 a column h/a = 0.34 grows at 0.0017, a third of the\n// rate with 4, which is why Vortices starts at 4. The pattern runs at\n// G = 30 a, so at 0.34 with 4 a column the wobble grows e-fold every 6 s\n// and at 0.2 every 4.4 s. Laid with a 5% wobble, the street at 0.34 came\n// apart (one vortex 0.3 a off its column) after 11.5 to 24 s, median 15.5,\n// over 34 streets in three four-minute runs, and at the two ends of the\n// knob after 3 to 7 s; at 0.2806 it lasted 106 to 237 s in five runs, as a\n// wobble that size is no longer small and grows on its own terms.\n\nconst W = 64, H = 128, N = W * H, L = 128, K = (2 * Math.PI) / L;\nconst { floor, min, max, exp, sin, cos, tanh, abs, PI } = Math;\nconst random = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// von Kármán's ratio: cosh(pi h / a) = sqrt 2.\nconst STABLE = Math.log(Math.SQRT2 + 1) / PI;\nconst NT = 3600, MAXV = 16;\n// Circulation per LED of spacing, the wobble a fresh street is laid with\n// (as a share of a), the speed the street is shown sliding down, and the\n// seconds between two lines of dye from one vortex.\nconst GAM = 30, EPS = 0.05, VSHOW = 5, PULSE = 2.4;\n// Dye cores: a tracer within RC of a vortex goes round as a solid body.\nconst RCF = 0.09;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  const S = (params.s = {\n    hue: 0, speed: 2, n: 4, ratio: STABLE + 0.06, want: [4, STABLE + 0.06], pend: 0,\n    vx: D(MAXV), vy: D(MAXV), vg: D(MAXV), x0: D(MAXV), m: 0, a: 32, wy: 0,\n    // Stage positions of the vortices and their precomputed exp and trig.\n    sx: D(MAXV * 4), sy: D(MAXV * 4), ex: D(MAXV * 4), ix: D(MAXV * 4), cy: D(MAXV * 4), sn: D(MAXV * 4),\n    kv: D(MAXV * 8),\n    tx: F(NT), ty: F(NT), age: F(NT), pt: D(MAXV), pp: new Uint8Array(MAXV),\n    kx: F(NT * 4), ky: F(NT * 4),\n    A: F(N), B: F(N), T: F(N), col: F(6),\n    broken: 0, fade: 1, out: 0, warm: false,\n  });\n  lay(S, 4, STABLE + 0.06);\n}\n\nfunction lay(S, n, ratio) {\n  const a = L / n, h = ratio * a, G = GAM * a;\n  S.n = n;\n  S.ratio = ratio;\n  S.a = a;\n  S.m = 2 * n;\n  // The left column spins one way and the right one the other, the way a\n  // wake's shear layers roll up, so on its own the street would climb at U\n  // through still water. The water is given a downward flow of VSHOW + U, so\n  // the street slides down at VSHOW and the dye that leaves it streams down\n  // faster between the vortices.\n  const U = (G / (2 * a)) * tanh((PI * h) / a);\n  S.wy = VSHOW + U;\n  const y0 = random() * a;\n  for (let i = 0; i \u003c n; i++) {\n    S.vx[i] = 32 - h / 2;\n    S.vy[i] = y0 + i * a;\n    S.vg[i] = -G;\n    S.vx[n + i] = 32 + h / 2;\n    S.vy[n + i] = y0 + i * a + a / 2;\n    S.vg[n + i] = G;\n  }\n  // The wobble: each vortex moved up to EPS a either way, then each\n  // column's mean move taken out again. A column shifted as a whole along\n  // the street breaks the half-spacing stagger, and then both columns push\n  // each other the same way sideways: the street drifted 8 LEDs off centre\n  // in 20 s before this.\n  for (let i = 0; i \u003c 2 * n; i++) {\n    S.x0[i] = S.vx[i];\n    S.kv[2 * i] = (random() - 0.5) * 2 * EPS * a;\n    S.kv[2 * i + 1] = (random() - 0.5) * 2 * EPS * a;\n  }\n  for (let c = 0; c \u003c 2; c++) {\n    let mx = 0, my = 0;\n    for (let i = c * n; i \u003c c * n + n; i++) (mx += S.kv[2 * i]), (my += S.kv[2 * i + 1]);\n    for (let i = c * n; i \u003c c * n + n; i++) {\n      S.vx[i] += S.kv[2 * i] - mx / n;\n      S.vy[i] += S.kv[2 * i + 1] - my / n;\n    }\n  }\n  // No dye yet; the vortices start dropping it at staggered moments.\n  S.age.fill(-1);\n  for (let p = 0; p \u003c S.m; p++) S.pt[p] = PULSE * (((p * 0.618) % 1) * 0.8 + 0.2 * random());\n  S.broken = 0;\n}\n\n// Every PULSE seconds a vortex drops a straight line of dye across its core,\n// alternating between two sets of tracers, so each set lives two pulses.\n// A continuous drip was tried first: in a steady swirl every radius then\n// fills its whole ring and the core reads as a speckled disc. A line laid\n// at once winds into a spiral, the inside turning faster than the outside.\nfunction pulse(S, p) {\n  const m = S.m, per = floor(NT / m), C = per >> 1, par = (S.pp[p] ^= 1), R = 0.56 * S.a;\n  const th = (random() - 0.5) * 0.6, c = cos(th), s = sin(th);\n  for (let j = par; j \u003c 2 * C; j += 2) {\n    const i = j * m + p, r = R * ((((j >> 1) + 0.5) / C) * 2 - 1);\n    S.tx[i] = S.vx[p] + r * c;\n    S.ty[i] = S.vy[p] + r * s;\n    S.age[i] = 0;\n  }\n}\n\n// Velocity at (x, y) from the vortices of stage s, written to out[o], out[o+1].\n// exp(K (x - xv)) is exp(K x) exp(-K xv) and the angle difference comes from\n// the sum formulas, so a tracer costs one exp, one sin and one cos per stage\n// whatever the number of vortices.\nfunction velAt(S, s, x, y, dl, skip, out, o) {\n  const m = S.m, b = s * MAXV, c2 = 1 / (2 * L);\n  const et = exp(K * x), it = 1 / et, cyt = cos(K * y), syt = sin(K * y);\n  let u = 0, v = 0;\n  for (let i = 0; i \u003c m; i++) {\n    if (i === skip) continue;\n    const j = b + i, E = et * S.ix[j], iE = it * S.ex[j];\n    const cY = cyt * S.cy[j] + syt * S.sn[j], sY = syt * S.cy[j] - cyt * S.sn[j];\n    const q = (S.vg[i] * c2) / (0.5 * (E + iE) - cY + dl);\n    u -= q * sY;\n    v += q * 0.5 * (E - iE);\n  }\n  out[o] = u;\n  out[o + 1] = v + S.wy;\n}\n\nfunction prep(S, s) {\n  for (let i = 0, b = s * MAXV; i \u003c S.m; i++) {\n    const x = S.sx[b + i], y = S.sy[b + i];\n    S.ex[b + i] = exp(K * x);\n    S.ix[b + i] = 1 / S.ex[b + i];\n    S.cy[b + i] = cos(K * y);\n    S.sn[b + i] = sin(K * y);\n  }\n}\n\n// One RK4 step of the vortices and the dye together.\nfunction step(S, h) {\n  const m = S.m, kv = S.kv, kx = S.kx, ky = S.ky;\n  const dv = 0.5 * (K * 0.5) * (K * 0.5), rc = RCF * S.a, dt = 0.5 * (K * rc) * (K * rc);\n  const cf = [0, 0.5, 0.5, 1];\n  for (let s = 0; s \u003c 4; s++) {\n    const b = s * MAXV;\n    for (let i = 0; i \u003c m; i++) {\n      S.sx[b + i] = S.vx[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i] : 0);\n      S.sy[b + i] = S.vy[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i + 1] : 0);\n    }\n    prep(S, s);\n    for (let i = 0; i \u003c m; i++) velAt(S, s, S.sx[b + i], S.sy[b + i], dv, i, kv, s * MAXV * 2 + 2 * i);\n    const tmp = [0, 0];\n    for (let i = 0; i \u003c NT; i++) {\n      if (S.age[i] \u003c 0) continue;\n      const x = S.tx[i] + (s ? cf[s] * h * kx[(s - 1) * NT + i] : 0), y = S.ty[i] + (s ? cf[s] * h * ky[(s - 1) * NT + i] : 0);\n      velAt(S, s, x, y, dt, -1, tmp, 0);\n      kx[s * NT + i] = tmp[0];\n      ky[s * NT + i] = tmp[1];\n    }\n  }\n  for (let i = 0; i \u003c m; i++) {\n    const o = 2 * i, M = MAXV * 2;\n    S.vx[i] += (h / 6) * (kv[o] + 2 * kv[M + o] + 2 * kv[2 * M + o] + kv[3 * M + o]);\n    S.vy[i] += (h / 6) * (kv[o + 1] + 2 * kv[M + o + 1] + 2 * kv[2 * M + o + 1] + kv[3 * M + o + 1]);\n    S.vy[i] -= L * floor(S.vy[i] / L);\n  }\n  for (let i = 0; i \u003c NT; i++) {\n    if (S.age[i] \u003c 0) continue;\n    S.tx[i] += (h / 6) * (kx[i] + 2 * kx[NT + i] + 2 * kx[2 * NT + i] + kx[3 * NT + i]);\n    S.ty[i] += (h / 6) * (ky[i] + 2 * ky[NT + i] + 2 * ky[2 * NT + i] + ky[3 * NT + i]);\n    S.ty[i] -= L * floor(S.ty[i] / L);\n    S.age[i] += h;\n    if (S.age[i] > 2 * PULSE || abs(S.tx[i] - 32) > 70) S.age[i] = -1;\n  }\n  for (let p = 0; p \u003c m; p++) if ((S.pt[p] -= h) \u003c= 0) {\n    S.pt[p] += PULSE;\n    pulse(S, p);\n  }\n}\n\n// How far the street has come apart: the largest sideways move of one\n// vortex from its column, the whole street's sideways drift taken out.\nfunction wobble(S) {\n  let mean = 0, off = 0, dev = 0;\n  for (let i = 0; i \u003c S.m; i++) mean += S.vx[i] - S.x0[i];\n  mean /= S.m;\n  for (let i = 0; i \u003c S.m; i++) {\n    dev = max(dev, abs(S.vx[i] - S.x0[i] - mean));\n    if (S.vx[i] \u003c -8 || S.vx[i] > W + 8) off++;\n  }\n  return [dev / S.a, off];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  const n = floor(cl(k[2], 4, 8) + 0.5), ratio = STABLE + cl(k[3], -0.15, 0.25);\n  if (!S.warm) {\n    S.warm = true;\n    if (n !== S.n || abs(ratio - S.ratio) > 1e-6) lay(S, n, ratio);\n    // Open with six seconds of dye already wound.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n  }\n  // A turned knob lays a new street once it has rested a third of a second.\n  if (n !== S.n || abs(ratio - S.ratio) > 0.004) {\n    if (n !== S.want[0] || abs(ratio - S.want[1]) > 1e-6) {\n      S.want = [n, ratio];\n      S.pend = 0.35;\n    } else if (S.pend > 0 && (S.pend -= d) \u003c= 0 && !S.out) S.out = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.out) S.out = 1;\n  // A core turns at G / (2 pi RC^2) radians a second, 18 with 4 a column\n  // and 37 with 8; a step is kept under 0.7 radian of that, which RK4\n  // carries without the core's dye spiralling in or out.\n  const h = (d * S.speed) / 2;\n  const sub = max(1, Math.ceil(((GAM / (2 * PI * RCF * RCF * S.a)) * h) / 0.7));\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n  const [dev, off] = wobble(S);\n  if (dev > 0.3) S.broken += h;\n  // Broken for 7 s, or half the vortices gone off the sides: lay a new one.\n  if (!S.out && (S.broken > 7 || off >= S.n)) S.out = 1;\n  if (S.out) {\n    S.fade -= d / 0.4;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      S.out = 0;\n      lay(S, n, ratio);\n      S.want = [n, ratio];\n      // Every vortex drops its first line in the 2.4 s run here, while the\n      // panel is dark, so the new street comes up whole.\n      for (let i = 0; i \u003c 72; i++) step(S, 1 / 30);\n    }\n  } else S.fade = min(1, S.fade + d / 0.6);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const A = S.A, B = S.B, T = S.T, col = S.col;\n  A.fill(0);\n  B.fill(0);\n  for (let i = 0; i \u003c NT; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / (2 * PULSE), env = min(1, age / 0.35) * (1 - u) ** 0.7;\n    const buf = i % S.m \u003c S.n ? A : B;\n    const fx = S.tx[i] - 0.5, fy = S.ty[i] - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n    if (ix \u003c -1 || ix >= W) continue;\n    const y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    if (ix >= 0) {\n      buf[y0 * W + ix] += env * (1 - ax) * (1 - ay);\n      buf[y1 * W + ix] += env * (1 - ax) * ay;\n    }\n    if (ix + 1 \u003c W) {\n      buf[y0 * W + ix + 1] += env * ax * (1 - ay);\n      buf[y1 * W + ix + 1] += env * ax * ay;\n    }\n  }\n  blur(A, T);\n  blur(B, T);\n  // Dyes: aqua and rose at Hue 0. Near von Kármán's ratio both turn gold,\n  // the left column deep and the right one pale, the mark of the one street\n  // that holds: full gold within 0.005 of it, half at 0.01.\n  const gd = (S.ratio - STABLE) / 0.012, gold = exp(-gd * gd);\n  const hA = S.hue + 0.5, hB = S.hue + 0.92;\n  const wA = max(warmth(hA), gold), wB = max(warmth(hB), gold);\n  hsv(hA, 0.8 - 0.35 * warmth(hA), 1, col, 0);\n  hsv(hB, 0.62 - 0.25 * warmth(hB), 1, col, 3);\n  const G1 = [1, 0.74, 0.3], G2 = [1, 0.9, 0.62];\n  for (let c = 0; c \u003c 3; c++) {\n    col[c] += (G1[c] - col[c]) * 0.92 * gold;\n    col[3 + c] += (G2[c] - col[3 + c]) * 0.92 * gold;\n  }\n  // Warm dye climbs to full brightness sooner and its faint end is lifted,\n  // so an old spiral of gold reads pale rather than olive.\n  const kA = 0.55 + 0.4 * wA, kB = 0.55 + 0.4 * wB, gA = 1 - 0.35 * wA, gB = 1 - 0.35 * wB, f = S.fade * 255;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const a = (1 - exp(-A[p] * kA)) ** gA, b = (1 - exp(-B[p] * kB)) ** gB, hi = max(0, a + b - 1.1) * 0.6;\n      display.setPixel(x, y, (col[0] * a + col[3] * b + hi) * f, (col[1] * a + col[4] * b + hi) * f, (col[2] * a + col[5] * b + hi) * f);\n    }\n}\n\n// 1 where a hue is orange to yellow-green, which read brown and olive when\n// dim, so there the dye is paler and climbs to full brightness sooner.\nfunction warmth(h) {\n  const t = h - floor(h);\n  return sm(0.0, 0.05, t) * (1 - sm(0.17, 0.24, t));\n}\n\n// [1 2 1] along rows then columns, wrapping top to bottom.\nfunction blur(a, t) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++) t[o + x] = 0.5 * a[o + x] + 0.25 * (a[o + (x > 0 ? x - 1 : x)] + a[o + (x \u003c W - 1 ? x + 1 : x)]);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W, u = ((y + H - 1) % H) * W, dn = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) a[o + x] = 0.5 * t[o + x] + 0.25 * (t[u + x] + t[dn + x]);\n  }\n}\n","layer":{"id":"layer-karman-street","type":"code","name":"karman-street","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kármán Street\n// Family:  sim\n// Idea:    Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kármán vortex street and its stability (Theodore von Kármán, 1911), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25\n//\n// Knob 1: Hue. Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose.\n// Knob 2: Speed. How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower.\n// Knob 3: Vortices. Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it.\n// Knob 4: Offset. The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides.\n// Buttons: K1 tap lays a fresh street at once, with a new small wobble.\n\n// Each vortex is a whole row of copies 128 rows apart, so the panel is one\n// period top to bottom. A vertical row of vortices of circulation G spaced L\n// has the complex velocity -(i G / 2L) coth(pi (z - z0) / L), which in x and\n// y is the kernel in velAt() below. The row of n vortices spaced a = 128 / n is\n// the same sum as von Kármán's infinite row, so with the columns h apart and\n// staggered by a / 2 the street moves as one at (G / 2a) tanh(pi h / a).\n//\n// Growth of a random wobble of 1e-7 a, with G = a, measured as the slope of\n// ln(wobble) in a 600 s run (per second):\n//   h/a      0.13   0.20   0.25   0.2806  0.31   0.34   0.45   0.53\n//   n = 4   0.016  0.0076 0.0009 -0.001  0.0012 0.0054 0.014  0.017\n//   n = 8   0.031  0.0175 0.0041  0.001  0.0057 0.0117 0.028  0.034\n// At 0.2806 it stays inside +-0.0013, which is the measuring noise: the\n// street is neutrally stable there. The more vortices a period holds, the\n// narrower the nearly stable band round it, because a period of n allows\n// only wobbles whose phase steps by a multiple of 2 pi / n from one vortex\n// to the next; with 3 a column h/a = 0.34 grows at 0.0017, a third of the\n// rate with 4, which is why Vortices starts at 4. The pattern runs at\n// G = 30 a, so at 0.34 with 4 a column the wobble grows e-fold every 6 s\n// and at 0.2 every 4.4 s. Laid with a 5% wobble, the street at 0.34 came\n// apart (one vortex 0.3 a off its column) after 11.5 to 24 s, median 15.5,\n// over 34 streets in three four-minute runs, and at the two ends of the\n// knob after 3 to 7 s; at 0.2806 it lasted 106 to 237 s in five runs, as a\n// wobble that size is no longer small and grows on its own terms.\n\nconst W = 64, H = 128, N = W * H, L = 128, K = (2 * Math.PI) / L;\nconst { floor, min, max, exp, sin, cos, tanh, abs, PI } = Math;\nconst random = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// von Kármán's ratio: cosh(pi h / a) = sqrt 2.\nconst STABLE = Math.log(Math.SQRT2 + 1) / PI;\nconst NT = 3600, MAXV = 16;\n// Circulation per LED of spacing, the wobble a fresh street is laid with\n// (as a share of a), the speed the street is shown sliding down, and the\n// seconds between two lines of dye from one vortex.\nconst GAM = 30, EPS = 0.05, VSHOW = 5, PULSE = 2.4;\n// Dye cores: a tracer within RC of a vortex goes round as a solid body.\nconst RCF = 0.09;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  const S = (params.s = {\n    hue: 0, speed: 2, n: 4, ratio: STABLE + 0.06, want: [4, STABLE + 0.06], pend: 0,\n    vx: D(MAXV), vy: D(MAXV), vg: D(MAXV), x0: D(MAXV), m: 0, a: 32, wy: 0,\n    // Stage positions of the vortices and their precomputed exp and trig.\n    sx: D(MAXV * 4), sy: D(MAXV * 4), ex: D(MAXV * 4), ix: D(MAXV * 4), cy: D(MAXV * 4), sn: D(MAXV * 4),\n    kv: D(MAXV * 8),\n    tx: F(NT), ty: F(NT), age: F(NT), pt: D(MAXV), pp: new Uint8Array(MAXV),\n    kx: F(NT * 4), ky: F(NT * 4),\n    A: F(N), B: F(N), T: F(N), col: F(6),\n    broken: 0, fade: 1, out: 0, warm: false,\n  });\n  lay(S, 4, STABLE + 0.06);\n}\n\nfunction lay(S, n, ratio) {\n  const a = L / n, h = ratio * a, G = GAM * a;\n  S.n = n;\n  S.ratio = ratio;\n  S.a = a;\n  S.m = 2 * n;\n  // The left column spins one way and the right one the other, the way a\n  // wake's shear layers roll up, so on its own the street would climb at U\n  // through still water. The water is given a downward flow of VSHOW + U, so\n  // the street slides down at VSHOW and the dye that leaves it streams down\n  // faster between the vortices.\n  const U = (G / (2 * a)) * tanh((PI * h) / a);\n  S.wy = VSHOW + U;\n  const y0 = random() * a;\n  for (let i = 0; i \u003c n; i++) {\n    S.vx[i] = 32 - h / 2;\n    S.vy[i] = y0 + i * a;\n    S.vg[i] = -G;\n    S.vx[n + i] = 32 + h / 2;\n    S.vy[n + i] = y0 + i * a + a / 2;\n    S.vg[n + i] = G;\n  }\n  // The wobble: each vortex moved up to EPS a either way, then each\n  // column's mean move taken out again. A column shifted as a whole along\n  // the street breaks the half-spacing stagger, and then both columns push\n  // each other the same way sideways: the street drifted 8 LEDs off centre\n  // in 20 s before this.\n  for (let i = 0; i \u003c 2 * n; i++) {\n    S.x0[i] = S.vx[i];\n    S.kv[2 * i] = (random() - 0.5) * 2 * EPS * a;\n    S.kv[2 * i + 1] = (random() - 0.5) * 2 * EPS * a;\n  }\n  for (let c = 0; c \u003c 2; c++) {\n    let mx = 0, my = 0;\n    for (let i = c * n; i \u003c c * n + n; i++) (mx += S.kv[2 * i]), (my += S.kv[2 * i + 1]);\n    for (let i = c * n; i \u003c c * n + n; i++) {\n      S.vx[i] += S.kv[2 * i] - mx / n;\n      S.vy[i] += S.kv[2 * i + 1] - my / n;\n    }\n  }\n  // No dye yet; the vortices start dropping it at staggered moments.\n  S.age.fill(-1);\n  for (let p = 0; p \u003c S.m; p++) S.pt[p] = PULSE * (((p * 0.618) % 1) * 0.8 + 0.2 * random());\n  S.broken = 0;\n}\n\n// Every PULSE seconds a vortex drops a straight line of dye across its core,\n// alternating between two sets of tracers, so each set lives two pulses.\n// A continuous drip was tried first: in a steady swirl every radius then\n// fills its whole ring and the core reads as a speckled disc. A line laid\n// at once winds into a spiral, the inside turning faster than the outside.\nfunction pulse(S, p) {\n  const m = S.m, per = floor(NT / m), C = per >> 1, par = (S.pp[p] ^= 1), R = 0.56 * S.a;\n  const th = (random() - 0.5) * 0.6, c = cos(th), s = sin(th);\n  for (let j = par; j \u003c 2 * C; j += 2) {\n    const i = j * m + p, r = R * ((((j >> 1) + 0.5) / C) * 2 - 1);\n    S.tx[i] = S.vx[p] + r * c;\n    S.ty[i] = S.vy[p] + r * s;\n    S.age[i] = 0;\n  }\n}\n\n// Velocity at (x, y) from the vortices of stage s, written to out[o], out[o+1].\n// exp(K (x - xv)) is exp(K x) exp(-K xv) and the angle difference comes from\n// the sum formulas, so a tracer costs one exp, one sin and one cos per stage\n// whatever the number of vortices.\nfunction velAt(S, s, x, y, dl, skip, out, o) {\n  const m = S.m, b = s * MAXV, c2 = 1 / (2 * L);\n  const et = exp(K * x), it = 1 / et, cyt = cos(K * y), syt = sin(K * y);\n  let u = 0, v = 0;\n  for (let i = 0; i \u003c m; i++) {\n    if (i === skip) continue;\n    const j = b + i, E = et * S.ix[j], iE = it * S.ex[j];\n    const cY = cyt * S.cy[j] + syt * S.sn[j], sY = syt * S.cy[j] - cyt * S.sn[j];\n    const q = (S.vg[i] * c2) / (0.5 * (E + iE) - cY + dl);\n    u -= q * sY;\n    v += q * 0.5 * (E - iE);\n  }\n  out[o] = u;\n  out[o + 1] = v + S.wy;\n}\n\nfunction prep(S, s) {\n  for (let i = 0, b = s * MAXV; i \u003c S.m; i++) {\n    const x = S.sx[b + i], y = S.sy[b + i];\n    S.ex[b + i] = exp(K * x);\n    S.ix[b + i] = 1 / S.ex[b + i];\n    S.cy[b + i] = cos(K * y);\n    S.sn[b + i] = sin(K * y);\n  }\n}\n\n// One RK4 step of the vortices and the dye together.\nfunction step(S, h) {\n  const m = S.m, kv = S.kv, kx = S.kx, ky = S.ky;\n  const dv = 0.5 * (K * 0.5) * (K * 0.5), rc = RCF * S.a, dt = 0.5 * (K * rc) * (K * rc);\n  const cf = [0, 0.5, 0.5, 1];\n  for (let s = 0; s \u003c 4; s++) {\n    const b = s * MAXV;\n    for (let i = 0; i \u003c m; i++) {\n      S.sx[b + i] = S.vx[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i] : 0);\n      S.sy[b + i] = S.vy[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i + 1] : 0);\n    }\n    prep(S, s);\n    for (let i = 0; i \u003c m; i++) velAt(S, s, S.sx[b + i], S.sy[b + i], dv, i, kv, s * MAXV * 2 + 2 * i);\n    const tmp = [0, 0];\n    for (let i = 0; i \u003c NT; i++) {\n      if (S.age[i] \u003c 0) continue;\n      const x = S.tx[i] + (s ? cf[s] * h * kx[(s - 1) * NT + i] : 0), y = S.ty[i] + (s ? cf[s] * h * ky[(s - 1) * NT + i] : 0);\n      velAt(S, s, x, y, dt, -1, tmp, 0);\n      kx[s * NT + i] = tmp[0];\n      ky[s * NT + i] = tmp[1];\n    }\n  }\n  for (let i = 0; i \u003c m; i++) {\n    const o = 2 * i, M = MAXV * 2;\n    S.vx[i] += (h / 6) * (kv[o] + 2 * kv[M + o] + 2 * kv[2 * M + o] + kv[3 * M + o]);\n    S.vy[i] += (h / 6) * (kv[o + 1] + 2 * kv[M + o + 1] + 2 * kv[2 * M + o + 1] + kv[3 * M + o + 1]);\n    S.vy[i] -= L * floor(S.vy[i] / L);\n  }\n  for (let i = 0; i \u003c NT; i++) {\n    if (S.age[i] \u003c 0) continue;\n    S.tx[i] += (h / 6) * (kx[i] + 2 * kx[NT + i] + 2 * kx[2 * NT + i] + kx[3 * NT + i]);\n    S.ty[i] += (h / 6) * (ky[i] + 2 * ky[NT + i] + 2 * ky[2 * NT + i] + ky[3 * NT + i]);\n    S.ty[i] -= L * floor(S.ty[i] / L);\n    S.age[i] += h;\n    if (S.age[i] > 2 * PULSE || abs(S.tx[i] - 32) > 70) S.age[i] = -1;\n  }\n  for (let p = 0; p \u003c m; p++) if ((S.pt[p] -= h) \u003c= 0) {\n    S.pt[p] += PULSE;\n    pulse(S, p);\n  }\n}\n\n// How far the street has come apart: the largest sideways move of one\n// vortex from its column, the whole street's sideways drift taken out.\nfunction wobble(S) {\n  let mean = 0, off = 0, dev = 0;\n  for (let i = 0; i \u003c S.m; i++) mean += S.vx[i] - S.x0[i];\n  mean /= S.m;\n  for (let i = 0; i \u003c S.m; i++) {\n    dev = max(dev, abs(S.vx[i] - S.x0[i] - mean));\n    if (S.vx[i] \u003c -8 || S.vx[i] > W + 8) off++;\n  }\n  return [dev / S.a, off];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  const n = floor(cl(k[2], 4, 8) + 0.5), ratio = STABLE + cl(k[3], -0.15, 0.25);\n  if (!S.warm) {\n    S.warm = true;\n    if (n !== S.n || abs(ratio - S.ratio) > 1e-6) lay(S, n, ratio);\n    // Open with six seconds of dye already wound.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n  }\n  // A turned knob lays a new street once it has rested a third of a second.\n  if (n !== S.n || abs(ratio - S.ratio) > 0.004) {\n    if (n !== S.want[0] || abs(ratio - S.want[1]) > 1e-6) {\n      S.want = [n, ratio];\n      S.pend = 0.35;\n    } else if (S.pend > 0 && (S.pend -= d) \u003c= 0 && !S.out) S.out = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.out) S.out = 1;\n  // A core turns at G / (2 pi RC^2) radians a second, 18 with 4 a column\n  // and 37 with 8; a step is kept under 0.7 radian of that, which RK4\n  // carries without the core's dye spiralling in or out.\n  const h = (d * S.speed) / 2;\n  const sub = max(1, Math.ceil(((GAM / (2 * PI * RCF * RCF * S.a)) * h) / 0.7));\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n  const [dev, off] = wobble(S);\n  if (dev > 0.3) S.broken += h;\n  // Broken for 7 s, or half the vortices gone off the sides: lay a new one.\n  if (!S.out && (S.broken > 7 || off >= S.n)) S.out = 1;\n  if (S.out) {\n    S.fade -= d / 0.4;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      S.out = 0;\n      lay(S, n, ratio);\n      S.want = [n, ratio];\n      // Every vortex drops its first line in the 2.4 s run here, while the\n      // panel is dark, so the new street comes up whole.\n      for (let i = 0; i \u003c 72; i++) step(S, 1 / 30);\n    }\n  } else S.fade = min(1, S.fade + d / 0.6);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const A = S.A, B = S.B, T = S.T, col = S.col;\n  A.fill(0);\n  B.fill(0);\n  for (let i = 0; i \u003c NT; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / (2 * PULSE), env = min(1, age / 0.35) * (1 - u) ** 0.7;\n    const buf = i % S.m \u003c S.n ? A : B;\n    const fx = S.tx[i] - 0.5, fy = S.ty[i] - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n    if (ix \u003c -1 || ix >= W) continue;\n    const y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    if (ix >= 0) {\n      buf[y0 * W + ix] += env * (1 - ax) * (1 - ay);\n      buf[y1 * W + ix] += env * (1 - ax) * ay;\n    }\n    if (ix + 1 \u003c W) {\n      buf[y0 * W + ix + 1] += env * ax * (1 - ay);\n      buf[y1 * W + ix + 1] += env * ax * ay;\n    }\n  }\n  blur(A, T);\n  blur(B, T);\n  // Dyes: aqua and rose at Hue 0. Near von Kármán's ratio both turn gold,\n  // the left column deep and the right one pale, the mark of the one street\n  // that holds: full gold within 0.005 of it, half at 0.01.\n  const gd = (S.ratio - STABLE) / 0.012, gold = exp(-gd * gd);\n  const hA = S.hue + 0.5, hB = S.hue + 0.92;\n  const wA = max(warmth(hA), gold), wB = max(warmth(hB), gold);\n  hsv(hA, 0.8 - 0.35 * warmth(hA), 1, col, 0);\n  hsv(hB, 0.62 - 0.25 * warmth(hB), 1, col, 3);\n  const G1 = [1, 0.74, 0.3], G2 = [1, 0.9, 0.62];\n  for (let c = 0; c \u003c 3; c++) {\n    col[c] += (G1[c] - col[c]) * 0.92 * gold;\n    col[3 + c] += (G2[c] - col[3 + c]) * 0.92 * gold;\n  }\n  // Warm dye climbs to full brightness sooner and its faint end is lifted,\n  // so an old spiral of gold reads pale rather than olive.\n  const kA = 0.55 + 0.4 * wA, kB = 0.55 + 0.4 * wB, gA = 1 - 0.35 * wA, gB = 1 - 0.35 * wB, f = S.fade * 255;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const a = (1 - exp(-A[p] * kA)) ** gA, b = (1 - exp(-B[p] * kB)) ** gB, hi = max(0, a + b - 1.1) * 0.6;\n      display.setPixel(x, y, (col[0] * a + col[3] * b + hi) * f, (col[1] * a + col[4] * b + hi) * f, (col[2] * a + col[5] * b + hi) * f);\n    }\n}\n\n// 1 where a hue is orange to yellow-green, which read brown and olive when\n// dim, so there the dye is paler and climbs to full brightness sooner.\nfunction warmth(h) {\n  const t = h - floor(h);\n  return sm(0.0, 0.05, t) * (1 - sm(0.17, 0.24, t));\n}\n\n// [1 2 1] along rows then columns, wrapping top to bottom.\nfunction blur(a, t) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++) t[o + x] = 0.5 * a[o + x] + 0.25 * (a[o + (x > 0 ? x - 1 : x)] + a[o + (x \u003c W - 1 ? x + 1 : x)]);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W, u = ((y + H - 1) % H) * W, dn = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) a[o + x] = 0.5 * t[o + x] + 0.25 * (t[u + x] + t[dn + x]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower."},{"name":"Vortices","min":4,"max":8,"about":"Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it."},{"name":"Offset","min":-0.15,"max":0.25,"about":"The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides."}],"start":[0,2,4,0.06],"measures":{"motion":0.4917,"detail":0.0363,"edges":0.1472,"complexity":1.3625,"coverage":0.3791,"colour":0.1414,"drift":0.0598},"knobResponse":[0.1029,0.0901,0.0896,0.103]},{"slug":"kdv-solitons","title":"KdV Solitons","family":"wave","round":31,"note":"맨 윗줄이 지금의 물결이고 지난 줄이 아래로 흘러내려요. 자부스키와 크루스칼의 코사인이 반 초 만에 가파라지며 솔리톤 여덟으로 갈리고, 키 큰 솔리톤이 작은 것을 지나칠 때마다 마루가 옆으로 비켜요. K1 을 누르면 큰 솔리톤 하나가 떨어져 무리를 뚫고 달려요.","idea":"Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.","buttons":"K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.","code":"// ===== Patternflow pattern =====\n// Title:   KdV Solitons\n// Family:  wave\n// Idea:    Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: solitons of the Korteweg-de Vries equation (Norman Zabusky and Martin Kruskal, 1965), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1\n//\n// Knob 1: Hue. Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale.\n// Knob 2: Speed. How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower.\n// Knob 3: Dispersion. The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often.\n// Knob 4: Start. The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run.\n// Buttons: K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.\n\nconst W = 64, H = 128;\nconst { min, max, floor, abs, sqrt, cos, sin, exp, tanh, cosh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The equation u_t + u u_x + delta^2 u_xxx = 0 on a ring of length 2, held on\n// 256 points, four to an LED column.\nconst NX = 256, MK = NX - 1, DX = 2 / NX, SUB = NX / W;\n// Rows of the diagram per unit of time, and history rows kept.\nconst RPT = 40, HR = H + 2;\n// Robert-Asselin filter on the leapfrog's middle level: it damps the\n// odd-even mode that otherwise grows to overflow after about five time units,\n// and takes under one percent off a soliton over a whole run.\nconst NU = 0.001;\n// Colour table over the height above the troughs, from UL to UH.\nconst NL = 512, UL = -0.5, UH = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p) * 255;\n  out[o + 1] = (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p) * 255;\n  out[o + 2] = (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p) * 255;\n}\n\n// Dark troughs, the crest hue at the top of a soliton, pale at the very top.\n// Below the crest the hue leans away round the wheel, so the small solitons\n// and the ripples between read as deeper water rather than a dim copy of the\n// crests. A dim orange or yellow reads brown or olive, so for crests from\n// pink round to yellow the lean runs the other way, through violet,\n// magenta and red, and only the brightest tones reach the crest hue; the two\n// leans meet at a yellow green, where the middle tones change side.\nconst LH = [0, 0.08, 0.17, 0.27, 0.27, 0.33, 0.5, 0.67, 0.83, 0.92, 1];\nconst LL = [-0.3, -0.36, -0.42, -0.47, 0.53, 0.15, 0.12, 0.12, 0, -0.2, -0.3];\nfunction lean(h) {\n  h -= floor(h);\n  for (let i = 1; i \u003c LH.length; i++) if (h \u003c= LH[i] && LH[i] > LH[i - 1]) return LL[i - 1] + ((LL[i] - LL[i - 1]) * (h - LH[i - 1])) / (LH[i] - LH[i - 1]);\n  return LL[0];\n}\nfunction palette(P) {\n  const t = P.lut, h0 = P.hue + 0.5, L = lean(h0);\n  for (let i = 0; i \u003c NL; i++) {\n    const e = UL + ((UH - UL) * i) / (NL - 1);\n    const v = cl(e / 2.5, 0, 1), w = cl((e - 2.1) / 1.4, 0, 1), q = cl((e - 0.3) / 1.9, 0, 1);\n    hsv(h0 + L * (1 - q) ** 0.6, 0.9 - 0.8 * w * w, 0.04 + 0.96 * v ** 1.15, t, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\n// du/dt at point i in the scheme's own differences.\nfunction rhs(u, i, d2) {\n  const m2 = u[(i - 2) & MK], m1 = u[(i - 1) & MK], z = u[i], p1 = u[(i + 1) & MK], p2 = u[(i + 2) & MK];\n  return -((p1 + z + m1) * (p1 - m1)) / (6 * DX) - (d2 * (p2 - 2 * p1 + 2 * m1 - m2)) / (2 * DX * DX * DX);\n}\n\n// Leapfrog is stable while dt times the largest rate of the linear scheme\n// stays under 1: |u|/dx for the u u_x term and 2.6 delta^2/dx^3 for the\n// third derivative (its worst wave is three grid cells long). A new dt, or a\n// new wave, starts the leapfrog again with one step back by Euler.\nfunction restartLeap(P) {\n  const d2 = P.delta * P.delta;\n  P.dt = 0.85 / (P.umax / DX + (2.6 * d2) / (DX * DX * DX));\n  const a = P.ua, b = P.ub;\n  for (let i = 0; i \u003c NX; i++) a[i] = b[i] - P.dt * rhs(b, i, d2);\n}\n\n// A starting wave into out, mean zero. Places and heights for the humps,\n// the plateau and the random sum are drawn fresh each run.\nfunction makeWave(P, kind, phase, out) {\n  const R = P.rnd;\n  if (kind) {\n    R[0] = Math.random() * 2;\n    R[1] = R[0] + 0.7 + Math.random() * 0.6;\n    R[2] = 1.05 + Math.random() * 0.3;\n    R[3] = 0.6 + Math.random() * 0.3;\n    for (let k = 1; k \u003c= 5; k++) (R[3 + k] = (0.3 + Math.random()) / k), (R[8 + k] = Math.random() * 2 * PI);\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    const x = i * DX;\n    let v = 0;\n    if (kind === 0) v = cos(PI * (x - phase));\n    else if (kind === 1) {\n      // Two humps, about 1.2 and 0.75 high.\n      const d1 = ((x - R[0] + 3) % 2) - 1, d2 = ((x - R[1] + 3) % 2) - 1;\n      v = R[2] * exp(-((d1 / 0.3) ** 2)) + R[3] * exp(-((d2 / 0.22) ** 2));\n    } else if (kind === 2) {\n      // A plateau 1.1 high and 0.8 wide with soft edges.\n      const d = ((x - R[0] + 3) % 2) - 1;\n      v = 0.55 * (tanh((d + 0.4) / 0.05) - tanh((d - 0.4) / 0.05));\n    } else for (let k = 1; k \u003c= 5; k++) v += R[3 + k] * cos(PI * k * x + R[8 + k]);\n    out[i] = v;\n  }\n  let s = 0, mx = 0;\n  for (let i = 0; i \u003c NX; i++) s += out[i];\n  s /= NX;\n  for (let i = 0; i \u003c NX; i++) mx = max(mx, abs((out[i] -= s)));\n  // The random sum peaks at 1, like the cosine.\n  if (kind === 3) for (let i = 0; i \u003c NX; i++) out[i] /= mx;\n}\n\nfunction begin(P, kind) {\n  P.ub.set(P.tg);\n  P.kind = kind;\n  P.tau = 0;\n  P.rec = 0;\n  P.drops = 0;\n  P.umax = 3;\n  restartLeap(P);\n}\n\n// The wave into one row of 64 columns as height above the troughs: a\n// little more than half the brightest of a column's four points and the\n// rest their mean, so a thin crest keeps its peak. The trough level follows\n// the lowest point of the wave over about a quarter time unit; it is -1 for\n// the cosine and sinks to about -0.7 once the solitons have taken their mass.\nfunction sample(P, out, o) {\n  const u = P.ub, bg = P.bg;\n  for (let c = 0, i = 0; c \u003c W; c++) {\n    let mx = -9, s = 0;\n    for (let k = 0; k \u003c SUB; k++, i++) {\n      const v = u[i];\n      s += v;\n      if (v > mx) mx = v;\n    }\n    out[o + c] = 0.55 * mx + (0.45 * s) / SUB - bg;\n  }\n}\n\n// The share of the wave's energy in the first cosine mode, 1 for the cosine\n// itself, and where that mode's crest stands.\nfunction mode1(P) {\n  const u = P.ub;\n  let c1 = 0, s1 = 0, e = 0;\n  for (let i = 0; i \u003c NX; i++) {\n    const a = PI * i * DX;\n    c1 += u[i] * cos(a);\n    s1 += u[i] * sin(a);\n    e += u[i] * u[i];\n  }\n  P.phase = atan2(s1, c1) / PI;\n  return (2 * (c1 * c1 + s1 * s1)) / (NX * e + 1e-9);\n}\n\n// A soliton 4.4 high over the trough, in the lowest stretch of the wave. Its\n// mass is taken evenly off the rest so the mean stays zero, and the older\n// leapfrog level gets it one step back along its path.\nfunction drop(P) {\n  const u = P.ub, a = P.ua;\n  let best = 99, at = 0;\n  for (let i = 0; i \u003c NX; i += 4) {\n    let s = 0;\n    for (let k = -12; k \u003c= 12; k++) s += u[(i + k) & MK];\n    if (s \u003c best) (best = s), (at = i);\n  }\n  const A = 4.4, w = P.delta * sqrt(12 / A), c = best / 25 + A / 3;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const tgt = pass ? a : u, back = pass ? c * P.dt : 0;\n    let m = 0;\n    for (let i = 0; i \u003c NX; i++) {\n      const d = ((((i - at) * DX + back + 3) % 2) - 1) / w;\n      m += P.uc[i] = A / cosh(d) ** 2;\n    }\n    for (let i = 0; i \u003c NX; i++) tgt[i] += P.uc[i] - m / NX;\n    if (!pass) P.bg -= m / NX;\n  }\n}\n\nfunction step(P, n) {\n  const d2 = P.delta * P.delta, k1 = P.dt / (3 * DX), k2 = (d2 * P.dt) / (DX * DX * DX);\n  for (let s = 0; s \u003c n; s++) {\n    const a = P.ua, b = P.ub, c = P.uc;\n    for (let i = 0; i \u003c NX; i++) {\n      const m2 = b[(i - 2) & MK], m1 = b[(i - 1) & MK], z = b[i], p1 = b[(i + 1) & MK], p2 = b[(i + 2) & MK];\n      c[i] = a[i] - k1 * (p1 + z + m1) * (p1 - m1) - k2 * (p2 - 2 * p1 + 2 * m1 - m2);\n    }\n    for (let i = 0; i \u003c NX; i++) b[i] += NU * (a[i] - 2 * b[i] + c[i]);\n    P.ua = b;\n    P.ub = c;\n    P.uc = a;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    ua: new Float64Array(NX), ub: new Float64Array(NX), uc: new Float64Array(NX), tg: new Float64Array(NX),\n    hist: new Float32Array(HR * W), now: new Float32Array(W), head: 0, frac: 0,\n    lut: new Float32Array(NL * 3), lutHue: -1, hue: 0, speed: 2, delta: 0.022,\n    dt: 1e-4, umax: 3, tau: 0, kind: -1, want: 0, wantT: 0, rnd: new Float64Array(14),\n    f1: 0, rising: 0, rec: 0, phase: 1, reform: -1, toKind: 0, rem: 1, rlen: 1, bg: -1, drops: 0,\n  };\n}\n\n// One row of time has passed: store it, keep dt safe, and watch for the\n// moment to start a new run.\nfunction row(P) {\n  const u = P.ub;\n  let um = 0, lo = 9, bad = false;\n  for (let i = 0; i \u003c NX; i++) {\n    const v = u[i];\n    if (!(v === v) || abs(v) > 40) bad = true;\n    else if (abs(v) > um) um = abs(v);\n    if (v \u003c lo) lo = v;\n  }\n  if (bad) return makeWave(P, P.kind, 1, P.tg), begin(P, P.kind);\n  P.bg += (lo - P.bg) * 0.1;\n  P.head = (P.head + HR - 1) % HR;\n  sample(P, P.hist, P.head * W);\n  // A taller wave than dt was set for: a smaller dt, from here.\n  if (um > 0.9 * P.umax) (P.umax = um * 1.4), restartLeap(P);\n  const f = mode1(P), Tr = 0.21 / P.delta, rowT = 1 / RPT;\n  // Each time the train gathers back, the energy flows into the first mode\n  // and out again; a peak of that share over 0.6 is one return.\n  if (f > P.f1) P.rising = 1;\n  else if (P.rising && P.f1 > 0.6 && P.tau > 0.5 * Tr) (P.rising = 0), P.rec++;\n  else P.rising = 0;\n  P.f1 = f;\n  if (P.reform \u003c 0) {\n    // The cosine runs through one return and is drawn back onto an exact\n    // cosine at the second, where the returning one stands; other starts,\n    // and runs a dropped soliton keeps from returning, start a fresh wave\n    // after about as long.\n    if (P.kind === 0 ? P.rec >= 1 && P.rising && f > 0.55 : P.tau > 1.2 * Tr) newRun(P, P.kind, P.kind ? 1 : 0.4);\n    else if (P.tau > 2.6 * Tr) newRun(P, P.kind, 1);\n  }\n  if (P.reform >= 0) {\n    // Both leapfrog levels are drawn over to the new wave, the cosine target\n    // following the returning crest, so that what is left of the old wave\n    // falls along a smoothstep; then the run starts from the new one exactly.\n    const r = (P.reform = min(1, P.reform + rowT / P.rlen)), rem = 1 - r * r * (3 - 2 * r), g = P.rem > 0 ? 1 - rem / P.rem : 1;\n    P.rem = rem;\n    if (P.toKind === 0) for (let i = 0; i \u003c NX; i++) P.tg[i] = cos(PI * (i * DX - P.phase));\n    for (let i = 0; i \u003c NX; i++) (u[i] += (P.tg[i] - u[i]) * g), (P.ua[i] += (P.tg[i] - P.ua[i]) * g);\n    if (r >= 1) (P.reform = -1), begin(P, P.toKind);\n  }\n}\n\n// A new run toward a wave of this kind, drawn over in len time units: 0.4\n// for the cosine coming back to itself, a whole unit for a different wave.\nfunction newRun(P, kind, len) {\n  P.reform = 0;\n  P.rem = 1;\n  P.rlen = len;\n  P.toKind = kind;\n  makeWave(P, kind, P.phase, P.tg);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.2, 3);\n  // Delta from 0.022 to 0.06 on a log scale.\n  const delta = 0.022 * (0.06 / 0.022) ** cl(k[2], 0, 1);\n  const kind = min(3, floor(cl(k[3], 0, 1) * 4));\n  if (abs(delta - P.delta) > 1e-6) (P.delta = delta), restartLeap(P);\n  if (P.kind \u003c 0) {\n    // Before the first frame the panel shows the starting wave as if it had\n    // been held still, so the diagram falls out of it.\n    makeWave(P, kind, 1, P.tg);\n    begin(P, kind);\n    P.bg = 9;\n    for (let i = 0; i \u003c NX; i++) P.bg = min(P.bg, P.ub[i]);\n    sample(P, P.hist, 0);\n    for (let r = 1; r \u003c HR; r++) P.hist.copyWithin(r * W, 0, W);\n  }\n  // A new Start is taken once the knob has rested on it a quarter second,\n  // and the wave is drawn over into it like any new run.\n  if (kind === (P.reform >= 0 ? P.toKind : P.kind)) P.wantT = 0;\n  else {\n    if (kind !== P.want) (P.want = kind), (P.wantT = 0);\n    if ((P.wantT += d) > 0.25) newRun(P, kind, 1);\n  }\n  const b = input.btnPressed || [];\n  // Four drops a run at most; past that the train is lost in white.\n  if (b[0] && P.drops \u003c 4) P.drops++, drop(P);\n\n  // 0.6 time units a second at Speed 2; the cosine breaks at 1/pi.\n  let left = d * P.speed * 0.3;\n  const rowT = 1 / RPT;\n  while (left > 1e-12) {\n    const run = min(left, (1 - P.frac) * rowT);\n    step(P, min(4000, max(1, round(run / P.dt))));\n    P.tau += run;\n    left -= run;\n    P.frac += run / rowT;\n    if (P.frac >= 1 - 1e-9) (P.frac = 0), row(P);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.kind \u003c 0) return;\n  if (P.lutHue !== P.hue) palette(P);\n  const now = P.now, hist = P.hist, lut = P.lut, f = P.frac, sc = (NL - 1) / (UH - UL);\n  sample(P, now, 0);\n  for (let y = 0; y \u003c H; y++) {\n    // Row y is the wave y rows of time ago. The newest stored row is f rows\n    // old; the top row is the wave now.\n    let ra = hist, ia, ib, w;\n    if (y \u003c= f) (ra = now), (ia = 0), (ib = P.head * W), (w = f > 0 ? y / f : 0);\n    else {\n      const kk = floor(y - f);\n      ia = ((P.head + kk) % HR) * W;\n      ib = ((P.head + kk + 1) % HR) * W;\n      w = y - f - kk;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const u = ra[ia + x] + (hist[ib + x] - ra[ia + x]) * w;\n      const o = cl(round((u - UL) * sc), 0, NL - 1) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-kdv-solitons","type":"code","name":"kdv-solitons","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   KdV Solitons\n// Family:  wave\n// Idea:    Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: solitons of the Korteweg-de Vries equation (Norman Zabusky and Martin Kruskal, 1965), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1\n//\n// Knob 1: Hue. Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale.\n// Knob 2: Speed. How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower.\n// Knob 3: Dispersion. The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often.\n// Knob 4: Start. The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run.\n// Buttons: K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.\n\nconst W = 64, H = 128;\nconst { min, max, floor, abs, sqrt, cos, sin, exp, tanh, cosh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The equation u_t + u u_x + delta^2 u_xxx = 0 on a ring of length 2, held on\n// 256 points, four to an LED column.\nconst NX = 256, MK = NX - 1, DX = 2 / NX, SUB = NX / W;\n// Rows of the diagram per unit of time, and history rows kept.\nconst RPT = 40, HR = H + 2;\n// Robert-Asselin filter on the leapfrog's middle level: it damps the\n// odd-even mode that otherwise grows to overflow after about five time units,\n// and takes under one percent off a soliton over a whole run.\nconst NU = 0.001;\n// Colour table over the height above the troughs, from UL to UH.\nconst NL = 512, UL = -0.5, UH = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p) * 255;\n  out[o + 1] = (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p) * 255;\n  out[o + 2] = (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p) * 255;\n}\n\n// Dark troughs, the crest hue at the top of a soliton, pale at the very top.\n// Below the crest the hue leans away round the wheel, so the small solitons\n// and the ripples between read as deeper water rather than a dim copy of the\n// crests. A dim orange or yellow reads brown or olive, so for crests from\n// pink round to yellow the lean runs the other way, through violet,\n// magenta and red, and only the brightest tones reach the crest hue; the two\n// leans meet at a yellow green, where the middle tones change side.\nconst LH = [0, 0.08, 0.17, 0.27, 0.27, 0.33, 0.5, 0.67, 0.83, 0.92, 1];\nconst LL = [-0.3, -0.36, -0.42, -0.47, 0.53, 0.15, 0.12, 0.12, 0, -0.2, -0.3];\nfunction lean(h) {\n  h -= floor(h);\n  for (let i = 1; i \u003c LH.length; i++) if (h \u003c= LH[i] && LH[i] > LH[i - 1]) return LL[i - 1] + ((LL[i] - LL[i - 1]) * (h - LH[i - 1])) / (LH[i] - LH[i - 1]);\n  return LL[0];\n}\nfunction palette(P) {\n  const t = P.lut, h0 = P.hue + 0.5, L = lean(h0);\n  for (let i = 0; i \u003c NL; i++) {\n    const e = UL + ((UH - UL) * i) / (NL - 1);\n    const v = cl(e / 2.5, 0, 1), w = cl((e - 2.1) / 1.4, 0, 1), q = cl((e - 0.3) / 1.9, 0, 1);\n    hsv(h0 + L * (1 - q) ** 0.6, 0.9 - 0.8 * w * w, 0.04 + 0.96 * v ** 1.15, t, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\n// du/dt at point i in the scheme's own differences.\nfunction rhs(u, i, d2) {\n  const m2 = u[(i - 2) & MK], m1 = u[(i - 1) & MK], z = u[i], p1 = u[(i + 1) & MK], p2 = u[(i + 2) & MK];\n  return -((p1 + z + m1) * (p1 - m1)) / (6 * DX) - (d2 * (p2 - 2 * p1 + 2 * m1 - m2)) / (2 * DX * DX * DX);\n}\n\n// Leapfrog is stable while dt times the largest rate of the linear scheme\n// stays under 1: |u|/dx for the u u_x term and 2.6 delta^2/dx^3 for the\n// third derivative (its worst wave is three grid cells long). A new dt, or a\n// new wave, starts the leapfrog again with one step back by Euler.\nfunction restartLeap(P) {\n  const d2 = P.delta * P.delta;\n  P.dt = 0.85 / (P.umax / DX + (2.6 * d2) / (DX * DX * DX));\n  const a = P.ua, b = P.ub;\n  for (let i = 0; i \u003c NX; i++) a[i] = b[i] - P.dt * rhs(b, i, d2);\n}\n\n// A starting wave into out, mean zero. Places and heights for the humps,\n// the plateau and the random sum are drawn fresh each run.\nfunction makeWave(P, kind, phase, out) {\n  const R = P.rnd;\n  if (kind) {\n    R[0] = Math.random() * 2;\n    R[1] = R[0] + 0.7 + Math.random() * 0.6;\n    R[2] = 1.05 + Math.random() * 0.3;\n    R[3] = 0.6 + Math.random() * 0.3;\n    for (let k = 1; k \u003c= 5; k++) (R[3 + k] = (0.3 + Math.random()) / k), (R[8 + k] = Math.random() * 2 * PI);\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    const x = i * DX;\n    let v = 0;\n    if (kind === 0) v = cos(PI * (x - phase));\n    else if (kind === 1) {\n      // Two humps, about 1.2 and 0.75 high.\n      const d1 = ((x - R[0] + 3) % 2) - 1, d2 = ((x - R[1] + 3) % 2) - 1;\n      v = R[2] * exp(-((d1 / 0.3) ** 2)) + R[3] * exp(-((d2 / 0.22) ** 2));\n    } else if (kind === 2) {\n      // A plateau 1.1 high and 0.8 wide with soft edges.\n      const d = ((x - R[0] + 3) % 2) - 1;\n      v = 0.55 * (tanh((d + 0.4) / 0.05) - tanh((d - 0.4) / 0.05));\n    } else for (let k = 1; k \u003c= 5; k++) v += R[3 + k] * cos(PI * k * x + R[8 + k]);\n    out[i] = v;\n  }\n  let s = 0, mx = 0;\n  for (let i = 0; i \u003c NX; i++) s += out[i];\n  s /= NX;\n  for (let i = 0; i \u003c NX; i++) mx = max(mx, abs((out[i] -= s)));\n  // The random sum peaks at 1, like the cosine.\n  if (kind === 3) for (let i = 0; i \u003c NX; i++) out[i] /= mx;\n}\n\nfunction begin(P, kind) {\n  P.ub.set(P.tg);\n  P.kind = kind;\n  P.tau = 0;\n  P.rec = 0;\n  P.drops = 0;\n  P.umax = 3;\n  restartLeap(P);\n}\n\n// The wave into one row of 64 columns as height above the troughs: a\n// little more than half the brightest of a column's four points and the\n// rest their mean, so a thin crest keeps its peak. The trough level follows\n// the lowest point of the wave over about a quarter time unit; it is -1 for\n// the cosine and sinks to about -0.7 once the solitons have taken their mass.\nfunction sample(P, out, o) {\n  const u = P.ub, bg = P.bg;\n  for (let c = 0, i = 0; c \u003c W; c++) {\n    let mx = -9, s = 0;\n    for (let k = 0; k \u003c SUB; k++, i++) {\n      const v = u[i];\n      s += v;\n      if (v > mx) mx = v;\n    }\n    out[o + c] = 0.55 * mx + (0.45 * s) / SUB - bg;\n  }\n}\n\n// The share of the wave's energy in the first cosine mode, 1 for the cosine\n// itself, and where that mode's crest stands.\nfunction mode1(P) {\n  const u = P.ub;\n  let c1 = 0, s1 = 0, e = 0;\n  for (let i = 0; i \u003c NX; i++) {\n    const a = PI * i * DX;\n    c1 += u[i] * cos(a);\n    s1 += u[i] * sin(a);\n    e += u[i] * u[i];\n  }\n  P.phase = atan2(s1, c1) / PI;\n  return (2 * (c1 * c1 + s1 * s1)) / (NX * e + 1e-9);\n}\n\n// A soliton 4.4 high over the trough, in the lowest stretch of the wave. Its\n// mass is taken evenly off the rest so the mean stays zero, and the older\n// leapfrog level gets it one step back along its path.\nfunction drop(P) {\n  const u = P.ub, a = P.ua;\n  let best = 99, at = 0;\n  for (let i = 0; i \u003c NX; i += 4) {\n    let s = 0;\n    for (let k = -12; k \u003c= 12; k++) s += u[(i + k) & MK];\n    if (s \u003c best) (best = s), (at = i);\n  }\n  const A = 4.4, w = P.delta * sqrt(12 / A), c = best / 25 + A / 3;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const tgt = pass ? a : u, back = pass ? c * P.dt : 0;\n    let m = 0;\n    for (let i = 0; i \u003c NX; i++) {\n      const d = ((((i - at) * DX + back + 3) % 2) - 1) / w;\n      m += P.uc[i] = A / cosh(d) ** 2;\n    }\n    for (let i = 0; i \u003c NX; i++) tgt[i] += P.uc[i] - m / NX;\n    if (!pass) P.bg -= m / NX;\n  }\n}\n\nfunction step(P, n) {\n  const d2 = P.delta * P.delta, k1 = P.dt / (3 * DX), k2 = (d2 * P.dt) / (DX * DX * DX);\n  for (let s = 0; s \u003c n; s++) {\n    const a = P.ua, b = P.ub, c = P.uc;\n    for (let i = 0; i \u003c NX; i++) {\n      const m2 = b[(i - 2) & MK], m1 = b[(i - 1) & MK], z = b[i], p1 = b[(i + 1) & MK], p2 = b[(i + 2) & MK];\n      c[i] = a[i] - k1 * (p1 + z + m1) * (p1 - m1) - k2 * (p2 - 2 * p1 + 2 * m1 - m2);\n    }\n    for (let i = 0; i \u003c NX; i++) b[i] += NU * (a[i] - 2 * b[i] + c[i]);\n    P.ua = b;\n    P.ub = c;\n    P.uc = a;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    ua: new Float64Array(NX), ub: new Float64Array(NX), uc: new Float64Array(NX), tg: new Float64Array(NX),\n    hist: new Float32Array(HR * W), now: new Float32Array(W), head: 0, frac: 0,\n    lut: new Float32Array(NL * 3), lutHue: -1, hue: 0, speed: 2, delta: 0.022,\n    dt: 1e-4, umax: 3, tau: 0, kind: -1, want: 0, wantT: 0, rnd: new Float64Array(14),\n    f1: 0, rising: 0, rec: 0, phase: 1, reform: -1, toKind: 0, rem: 1, rlen: 1, bg: -1, drops: 0,\n  };\n}\n\n// One row of time has passed: store it, keep dt safe, and watch for the\n// moment to start a new run.\nfunction row(P) {\n  const u = P.ub;\n  let um = 0, lo = 9, bad = false;\n  for (let i = 0; i \u003c NX; i++) {\n    const v = u[i];\n    if (!(v === v) || abs(v) > 40) bad = true;\n    else if (abs(v) > um) um = abs(v);\n    if (v \u003c lo) lo = v;\n  }\n  if (bad) return makeWave(P, P.kind, 1, P.tg), begin(P, P.kind);\n  P.bg += (lo - P.bg) * 0.1;\n  P.head = (P.head + HR - 1) % HR;\n  sample(P, P.hist, P.head * W);\n  // A taller wave than dt was set for: a smaller dt, from here.\n  if (um > 0.9 * P.umax) (P.umax = um * 1.4), restartLeap(P);\n  const f = mode1(P), Tr = 0.21 / P.delta, rowT = 1 / RPT;\n  // Each time the train gathers back, the energy flows into the first mode\n  // and out again; a peak of that share over 0.6 is one return.\n  if (f > P.f1) P.rising = 1;\n  else if (P.rising && P.f1 > 0.6 && P.tau > 0.5 * Tr) (P.rising = 0), P.rec++;\n  else P.rising = 0;\n  P.f1 = f;\n  if (P.reform \u003c 0) {\n    // The cosine runs through one return and is drawn back onto an exact\n    // cosine at the second, where the returning one stands; other starts,\n    // and runs a dropped soliton keeps from returning, start a fresh wave\n    // after about as long.\n    if (P.kind === 0 ? P.rec >= 1 && P.rising && f > 0.55 : P.tau > 1.2 * Tr) newRun(P, P.kind, P.kind ? 1 : 0.4);\n    else if (P.tau > 2.6 * Tr) newRun(P, P.kind, 1);\n  }\n  if (P.reform >= 0) {\n    // Both leapfrog levels are drawn over to the new wave, the cosine target\n    // following the returning crest, so that what is left of the old wave\n    // falls along a smoothstep; then the run starts from the new one exactly.\n    const r = (P.reform = min(1, P.reform + rowT / P.rlen)), rem = 1 - r * r * (3 - 2 * r), g = P.rem > 0 ? 1 - rem / P.rem : 1;\n    P.rem = rem;\n    if (P.toKind === 0) for (let i = 0; i \u003c NX; i++) P.tg[i] = cos(PI * (i * DX - P.phase));\n    for (let i = 0; i \u003c NX; i++) (u[i] += (P.tg[i] - u[i]) * g), (P.ua[i] += (P.tg[i] - P.ua[i]) * g);\n    if (r >= 1) (P.reform = -1), begin(P, P.toKind);\n  }\n}\n\n// A new run toward a wave of this kind, drawn over in len time units: 0.4\n// for the cosine coming back to itself, a whole unit for a different wave.\nfunction newRun(P, kind, len) {\n  P.reform = 0;\n  P.rem = 1;\n  P.rlen = len;\n  P.toKind = kind;\n  makeWave(P, kind, P.phase, P.tg);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.2, 3);\n  // Delta from 0.022 to 0.06 on a log scale.\n  const delta = 0.022 * (0.06 / 0.022) ** cl(k[2], 0, 1);\n  const kind = min(3, floor(cl(k[3], 0, 1) * 4));\n  if (abs(delta - P.delta) > 1e-6) (P.delta = delta), restartLeap(P);\n  if (P.kind \u003c 0) {\n    // Before the first frame the panel shows the starting wave as if it had\n    // been held still, so the diagram falls out of it.\n    makeWave(P, kind, 1, P.tg);\n    begin(P, kind);\n    P.bg = 9;\n    for (let i = 0; i \u003c NX; i++) P.bg = min(P.bg, P.ub[i]);\n    sample(P, P.hist, 0);\n    for (let r = 1; r \u003c HR; r++) P.hist.copyWithin(r * W, 0, W);\n  }\n  // A new Start is taken once the knob has rested on it a quarter second,\n  // and the wave is drawn over into it like any new run.\n  if (kind === (P.reform >= 0 ? P.toKind : P.kind)) P.wantT = 0;\n  else {\n    if (kind !== P.want) (P.want = kind), (P.wantT = 0);\n    if ((P.wantT += d) > 0.25) newRun(P, kind, 1);\n  }\n  const b = input.btnPressed || [];\n  // Four drops a run at most; past that the train is lost in white.\n  if (b[0] && P.drops \u003c 4) P.drops++, drop(P);\n\n  // 0.6 time units a second at Speed 2; the cosine breaks at 1/pi.\n  let left = d * P.speed * 0.3;\n  const rowT = 1 / RPT;\n  while (left > 1e-12) {\n    const run = min(left, (1 - P.frac) * rowT);\n    step(P, min(4000, max(1, round(run / P.dt))));\n    P.tau += run;\n    left -= run;\n    P.frac += run / rowT;\n    if (P.frac >= 1 - 1e-9) (P.frac = 0), row(P);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.kind \u003c 0) return;\n  if (P.lutHue !== P.hue) palette(P);\n  const now = P.now, hist = P.hist, lut = P.lut, f = P.frac, sc = (NL - 1) / (UH - UL);\n  sample(P, now, 0);\n  for (let y = 0; y \u003c H; y++) {\n    // Row y is the wave y rows of time ago. The newest stored row is f rows\n    // old; the top row is the wave now.\n    let ra = hist, ia, ib, w;\n    if (y \u003c= f) (ra = now), (ia = 0), (ib = P.head * W), (w = f > 0 ? y / f : 0);\n    else {\n      const kk = floor(y - f);\n      ia = ((P.head + kk) % HR) * W;\n      ib = ((P.head + kk + 1) % HR) * W;\n      w = y - f - kk;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const u = ra[ia + x] + (hist[ib + x] - ra[ia + x]) * w;\n      const o = cl(round((u - UL) * sc), 0, NL - 1) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower."},{"name":"Dispersion","min":0,"max":1,"about":"The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often."},{"name":"Start","min":0,"max":1,"about":"The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run."}],"start":[0,2,0,0.06],"measures":{"motion":0.5261,"detail":0.0597,"edges":0.2382,"complexity":1.5547,"coverage":0.8045,"colour":0.3345,"drift":0.2583},"knobResponse":[0.2224,0.1099,0.0581,0.2182]},{"slug":"kelvin-wake","title":"Kelvin Wake","family":"wave","round":34,"note":"고요한 물 위로 흰 거품 한 점이 아래에서 위로 올라가고, 그 뒤로 켈빈의 배 물결이 펼쳐져요. 물길을 가로지르는 굽은 가로 물마루와 비스듬한 짧은 발산 물결이 반각 19.47° 쐐기의 두 팔에서 만나 가장 밝은 첨점 줄을 이루고, 쐐기는 원천이 얼마나 빠르든 원천 뒤 90 LED 에서 패널 양옆에 닿아요. K3 은 원천을 빠르게 해 물결을 길게 늘이지만 쐐기의 각은 그대로예요.","idea":"A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.","buttons":"K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.","code":"// ===== Patternflow pattern =====\n// Title:   Kelvin Wake\n// Family:  wave\n// Idea:    A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kelvin ship-wave pattern (William Thomson, Lord Kelvin, 1887), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1\n//\n// Knob 1: Hue. The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Velocity. The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests.\n// Knob 4: Patch. The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7.\n// Buttons: K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.\n\nconst W = 64, H = 128, YC = 32, DX = 0.5, N = 256;\n// The wake is drawn to 150 LEDs behind its source and fades over the last\n// 45; sources come 190 LEDs apart, so 40 LEDs of still water separate them.\nconst LT = 150, FADE = 45, GAP = 190, ROWS = Math.ceil(LT / DX) + 2;\nconst { floor, sqrt, sin, cos, exp, abs, round, min, max, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// In-place radix-2 FFT with the + sign.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// The steady wake in the source's frame, x LEDs behind it and y LEDs to the\n// side, from the classical integral over wave directions theta:\n//   zeta(x, y) = Im  int sec^3(theta) exp(-(k a)^2 / 4) exp(i k (x cos theta + y sin theta)) dtheta,\n// k = k0 sec^2(theta), k0 = g / U^2 = 2 pi / lambda. The imaginary part is\n// the sine form, which is zero at x = 0, so the wake starts from nothing at\n// the source. Changing variable to the cross-track wavenumber\n// ky = k0 sec(theta) tan(theta) makes each row x one Fourier sum over ky:\n// sec^2(theta) = (1 + sqrt(1 + 4 (ky / k0)^2)) / 2, the along-track\n// wavenumber is k0 sec(theta), and sec^3 dtheta = sec^2 / (k0 (2 sec^2 - 1)) dky.\n// Only the slopes are drawn, so a row is two 256-point FFTs across y: the\n// same sum times i kx and times i ky. 256 LEDs across hold the wedge out to\n// x = 150, where it is 106 wide, so the FFT's wrap never reaches the panel.\n// Fitting the brightest crest beside the axis, row by row out to x = 320, as\n// s x - c x^(1/3) (the Airy fringe sits inside the caustic by c x^(1/3)) puts\n// the cusp line at 19.25 to 19.46 degrees over the whole Velocity range;\n// Kelvin's angle is arcsin(1/3) = 19.47.\nfunction build(T, lambda, a) {\n  const k0 = (2 * PI) / lambda;\n  const { ky, kx, B, r1, i1, r2, i2, ZX, ZY } = T;\n  for (let j = 0; j \u003c N; j++) {\n    const q = (2 * PI * (j \u003c N / 2 ? j : j - N)) / N, u = q / k0;\n    const s2 = (1 + sqrt(1 + 4 * u * u)) / 2, k = k0 * s2, aq = abs(q);\n    // A soft roll-off before the LED grid's Nyquist limit.\n    const win = aq \u003c 0.6 * PI ? 1 : cos(((aq - 0.6 * PI) / (0.4 * PI)) * 0.5 * PI) ** 2;\n    B[j] = (s2 / (k0 * (2 * s2 - 1))) * exp(-(((k * a) / 2) ** 2)) * win;\n    ky[j] = q;\n    kx[j] = k0 * sqrt(s2);\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const x = r * DX;\n    for (let j = 0; j \u003c N; j++) {\n      // Columns sit at y = m + 0.5, so the track runs between the two middle columns.\n      const ph = kx[j] * x + ky[j] * 0.5, c = B[j] * cos(ph), s = B[j] * sin(ph);\n      r1[j] = -kx[j] * s;\n      i1[j] = kx[j] * c;\n      r2[j] = -ky[j] * s;\n      i2[j] = ky[j] * c;\n    }\n    fft(r1, i1);\n    fft(r2, i2);\n    // The far end of the wake fades out: a source that has run for a finite\n    // time has a wake of finite length.\n    const f = 1 - sm(LT - FADE, LT, x);\n    for (let m = 0; m \u003c YC; m++) {\n      ZX[r * YC + m] = i1[m] * f;\n      ZY[r * YC + m] = i2[m] * f;\n    }\n  }\n  // One scale for the shading: the 99th percentile of the lit slope over\n  // the stretch that fits on the panel, both sides of the track.\n  const vals = T.vals;\n  let n = 0;\n  for (let r = floor(4 / DX); r \u003c floor(128 / DX); r += 2)\n    for (let m = 0; m \u003c YC; m++) {\n      const gx = ZX[r * YC + m], gy = ZY[r * YC + m];\n      vals[n++] = abs(gy * T.lx + gx * T.ly);\n      vals[n++] = abs(-gy * T.lx + gx * T.ly);\n    }\n  const v = vals.subarray(0, n).sort();\n  T.scale = 1 / (v[floor(n * 0.99)] || 1);\n}\n\nexport function setup(params) {\n  // The light comes from the upper left, low over the water.\n  const lx = -0.45, ly = -0.89;\n  params.s = {\n    hue: 0, speed: 2, vel: 1, patch: 0.06, warm: false, key: \"\", foamT: 0,\n    src: [], foam: [], cache: new Map(), c: [0, 0, 0],\n    work: {\n      ky: new Float64Array(N), kx: new Float64Array(N), B: new Float64Array(N),\n      r1: new Float64Array(N), i1: new Float64Array(N), r2: new Float64Array(N), i2: new Float64Array(N),\n    },\n    lx, ly, GX: new Float32Array(W * H), GY: new Float32Array(W * H), F: new Float32Array(W * H), tab: null,\n  };\n}\n\nfunction table(S) {\n  // Tables are cached by the quantised knob pair: Velocity in steps of 0.02,\n  // Patch in steps of 0.02.\n  const qv = round(S.vel * 50) / 50, qp = round(S.patch * 50) / 50, key = qv + \",\" + qp;\n  if (key === S.key) return;\n  S.key = key;\n  let T = S.cache.get(key);\n  if (!T) {\n    T = {\n      ...S.work, lx: S.lx, ly: S.ly, scale: 1, vals: new Float32Array(2 * YC * 128),\n      ZX: new Float32Array(ROWS * YC), ZY: new Float32Array(ROWS * YC),\n    };\n    build(T, 12 * qv * qv, 1.2 + 4.8 * qp);\n    if (S.cache.size > 6) S.cache.delete(S.cache.keys().next().value);\n    S.cache.set(key, T);\n  }\n  S.tab = T;\n}\n\n// Rows climbed per second.\nconst rate = (S) => 15 * S.vel * S.speed;\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.vel = cl(k[2], 1, 1.7);\n  S.patch = cl(k[3], 0, 1);\n  table(S);\n  const v = rate(S);\n  if (!S.warm) {\n    // Open so that 2.4 seconds in, a source is 40 LEDs below the top with the\n    // one before it already gone past.\n    const y0 = 40 + 2.4 * v;\n    S.src = [y0 - GAP, y0];\n    S.warm = true;\n  }\n  for (let i = 0; i \u003c S.src.length; i++) S.src[i] -= v * d;\n  while (S.src.length && S.src[0] \u003c -LT - 4) S.src.shift();\n  const last = S.src[S.src.length - 1];\n  if (last === undefined || last \u003c H + 6 - GAP) S.src.push(H + 6);\n  else if (input.btnPressed && input.btnPressed[0] && last \u003c H - 24) S.src.push(H + 6);\n  // Foam shed by each source stays where it fell on the still water and\n  // fades in about 0.4 seconds.\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  S.foamT += d * 60 * S.speed / 2;\n  for (const f of S.foam) f.life -= (d * S.speed) / 2 / 0.4;\n  S.foam = S.foam.filter((f) => f.life > 0);\n  while (S.foamT >= 1) {\n    S.foamT -= 1;\n    for (const ys of S.src)\n      if (ys > -4 && ys \u003c H + 4) {\n        const ang = random() * 2 * PI, r = rf * sqrt(random());\n        S.foam.push({ x: 31.5 + r * cos(ang), y: ys + 0.6 * r * sin(ang) + 1, life: 0.6 + 0.4 * random() });\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tab) return;\n  const T = S.tab, { ZX, ZY } = T, GX = S.GX, GY = S.GY, F = S.F, c = S.c;\n  GX.fill(0);\n  GY.fill(0);\n  F.fill(0);\n  for (const f of S.foam) {\n    const x = round(f.x), y = round(f.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) F[y * W + x] = max(F[y * W + x], min(1, f.life) * 0.85);\n  }\n  // Each source lays its wake, row by row, from the table: x behind it,\n  // linear between table rows; the cross-track slope is odd in y.\n  for (const ys of S.src)\n    for (let y = max(0, Math.ceil(ys)); y \u003c H; y++) {\n      const fx = (y - ys) / DX;\n      if (fx >= ROWS - 1) break;\n      const r = floor(fx), w = fx - r, o0 = r * YC, o1 = o0 + YC;\n      for (let m = 0; m \u003c YC; m++) {\n        const gx = ZX[o0 + m] * (1 - w) + ZX[o1 + m] * w, gy = ZY[o0 + m] * (1 - w) + ZY[o1 + m] * w;\n        GY[y * W + 32 + m] += gx;\n        GX[y * W + 32 + m] += gy;\n        GY[y * W + 31 - m] += gx;\n        GX[y * W + 31 - m] -= gy;\n      }\n    }\n  const h0 = S.hue + 0.55, hh = h0 - floor(h0);\n  // Amber, gold and lime water read brown or olive at the calm level, so\n  // there the water is lifted to 0.74 and its shadow faces lean to crimson.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.22, 0.32, hh));\n  const base = 0.34 + 0.4 * warm, sat0 = 0.82 + 0.1 * warm;\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Lit where the surface tilts towards the light.\n      const sh = -(GX[p] * S.lx + GY[p] * S.ly) * T.scale;\n      const up = sh > 0 ? min(1.4, sh) : 0, dn = sh \u003c 0 ? min(1, -sh) : 0;\n      let v = base + (1 - base) * pow(min(1, up), 0.75) - (base - 0.08 - 0.12 * warm) * pow(dn, 0.7);\n      let s = sat0 * (1 - 0.7 * sm(0.55, 1.25, up));\n      let hue = h0 + 0.03 * up - (0.02 + 0.08 * warm) * dn;\n      // The foam patch over each source.\n      let foam = F[p];\n      for (const ys of S.src) {\n        const dx = x - 31.5, dy = (y - ys) * 1.4, r2 = dx * dx + dy * dy;\n        if (r2 \u003c (rf + 1.5) * (rf + 1.5)) foam = max(foam, 1 - sm(rf - 1, rf + 1.5, sqrt(r2)));\n      }\n      if (foam > 0) {\n        v = v + (1 - v) * foam;\n        s *= 1 - foam;\n      }\n      hsv(hue, s, v, c);\n      display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n    }\n}\n","layer":{"id":"layer-kelvin-wake","type":"code","name":"kelvin-wake","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kelvin Wake\n// Family:  wave\n// Idea:    A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kelvin ship-wave pattern (William Thomson, Lord Kelvin, 1887), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1\n//\n// Knob 1: Hue. The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Velocity. The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests.\n// Knob 4: Patch. The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7.\n// Buttons: K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.\n\nconst W = 64, H = 128, YC = 32, DX = 0.5, N = 256;\n// The wake is drawn to 150 LEDs behind its source and fades over the last\n// 45; sources come 190 LEDs apart, so 40 LEDs of still water separate them.\nconst LT = 150, FADE = 45, GAP = 190, ROWS = Math.ceil(LT / DX) + 2;\nconst { floor, sqrt, sin, cos, exp, abs, round, min, max, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// In-place radix-2 FFT with the + sign.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// The steady wake in the source's frame, x LEDs behind it and y LEDs to the\n// side, from the classical integral over wave directions theta:\n//   zeta(x, y) = Im  int sec^3(theta) exp(-(k a)^2 / 4) exp(i k (x cos theta + y sin theta)) dtheta,\n// k = k0 sec^2(theta), k0 = g / U^2 = 2 pi / lambda. The imaginary part is\n// the sine form, which is zero at x = 0, so the wake starts from nothing at\n// the source. Changing variable to the cross-track wavenumber\n// ky = k0 sec(theta) tan(theta) makes each row x one Fourier sum over ky:\n// sec^2(theta) = (1 + sqrt(1 + 4 (ky / k0)^2)) / 2, the along-track\n// wavenumber is k0 sec(theta), and sec^3 dtheta = sec^2 / (k0 (2 sec^2 - 1)) dky.\n// Only the slopes are drawn, so a row is two 256-point FFTs across y: the\n// same sum times i kx and times i ky. 256 LEDs across hold the wedge out to\n// x = 150, where it is 106 wide, so the FFT's wrap never reaches the panel.\n// Fitting the brightest crest beside the axis, row by row out to x = 320, as\n// s x - c x^(1/3) (the Airy fringe sits inside the caustic by c x^(1/3)) puts\n// the cusp line at 19.25 to 19.46 degrees over the whole Velocity range;\n// Kelvin's angle is arcsin(1/3) = 19.47.\nfunction build(T, lambda, a) {\n  const k0 = (2 * PI) / lambda;\n  const { ky, kx, B, r1, i1, r2, i2, ZX, ZY } = T;\n  for (let j = 0; j \u003c N; j++) {\n    const q = (2 * PI * (j \u003c N / 2 ? j : j - N)) / N, u = q / k0;\n    const s2 = (1 + sqrt(1 + 4 * u * u)) / 2, k = k0 * s2, aq = abs(q);\n    // A soft roll-off before the LED grid's Nyquist limit.\n    const win = aq \u003c 0.6 * PI ? 1 : cos(((aq - 0.6 * PI) / (0.4 * PI)) * 0.5 * PI) ** 2;\n    B[j] = (s2 / (k0 * (2 * s2 - 1))) * exp(-(((k * a) / 2) ** 2)) * win;\n    ky[j] = q;\n    kx[j] = k0 * sqrt(s2);\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const x = r * DX;\n    for (let j = 0; j \u003c N; j++) {\n      // Columns sit at y = m + 0.5, so the track runs between the two middle columns.\n      const ph = kx[j] * x + ky[j] * 0.5, c = B[j] * cos(ph), s = B[j] * sin(ph);\n      r1[j] = -kx[j] * s;\n      i1[j] = kx[j] * c;\n      r2[j] = -ky[j] * s;\n      i2[j] = ky[j] * c;\n    }\n    fft(r1, i1);\n    fft(r2, i2);\n    // The far end of the wake fades out: a source that has run for a finite\n    // time has a wake of finite length.\n    const f = 1 - sm(LT - FADE, LT, x);\n    for (let m = 0; m \u003c YC; m++) {\n      ZX[r * YC + m] = i1[m] * f;\n      ZY[r * YC + m] = i2[m] * f;\n    }\n  }\n  // One scale for the shading: the 99th percentile of the lit slope over\n  // the stretch that fits on the panel, both sides of the track.\n  const vals = T.vals;\n  let n = 0;\n  for (let r = floor(4 / DX); r \u003c floor(128 / DX); r += 2)\n    for (let m = 0; m \u003c YC; m++) {\n      const gx = ZX[r * YC + m], gy = ZY[r * YC + m];\n      vals[n++] = abs(gy * T.lx + gx * T.ly);\n      vals[n++] = abs(-gy * T.lx + gx * T.ly);\n    }\n  const v = vals.subarray(0, n).sort();\n  T.scale = 1 / (v[floor(n * 0.99)] || 1);\n}\n\nexport function setup(params) {\n  // The light comes from the upper left, low over the water.\n  const lx = -0.45, ly = -0.89;\n  params.s = {\n    hue: 0, speed: 2, vel: 1, patch: 0.06, warm: false, key: \"\", foamT: 0,\n    src: [], foam: [], cache: new Map(), c: [0, 0, 0],\n    work: {\n      ky: new Float64Array(N), kx: new Float64Array(N), B: new Float64Array(N),\n      r1: new Float64Array(N), i1: new Float64Array(N), r2: new Float64Array(N), i2: new Float64Array(N),\n    },\n    lx, ly, GX: new Float32Array(W * H), GY: new Float32Array(W * H), F: new Float32Array(W * H), tab: null,\n  };\n}\n\nfunction table(S) {\n  // Tables are cached by the quantised knob pair: Velocity in steps of 0.02,\n  // Patch in steps of 0.02.\n  const qv = round(S.vel * 50) / 50, qp = round(S.patch * 50) / 50, key = qv + \",\" + qp;\n  if (key === S.key) return;\n  S.key = key;\n  let T = S.cache.get(key);\n  if (!T) {\n    T = {\n      ...S.work, lx: S.lx, ly: S.ly, scale: 1, vals: new Float32Array(2 * YC * 128),\n      ZX: new Float32Array(ROWS * YC), ZY: new Float32Array(ROWS * YC),\n    };\n    build(T, 12 * qv * qv, 1.2 + 4.8 * qp);\n    if (S.cache.size > 6) S.cache.delete(S.cache.keys().next().value);\n    S.cache.set(key, T);\n  }\n  S.tab = T;\n}\n\n// Rows climbed per second.\nconst rate = (S) => 15 * S.vel * S.speed;\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.vel = cl(k[2], 1, 1.7);\n  S.patch = cl(k[3], 0, 1);\n  table(S);\n  const v = rate(S);\n  if (!S.warm) {\n    // Open so that 2.4 seconds in, a source is 40 LEDs below the top with the\n    // one before it already gone past.\n    const y0 = 40 + 2.4 * v;\n    S.src = [y0 - GAP, y0];\n    S.warm = true;\n  }\n  for (let i = 0; i \u003c S.src.length; i++) S.src[i] -= v * d;\n  while (S.src.length && S.src[0] \u003c -LT - 4) S.src.shift();\n  const last = S.src[S.src.length - 1];\n  if (last === undefined || last \u003c H + 6 - GAP) S.src.push(H + 6);\n  else if (input.btnPressed && input.btnPressed[0] && last \u003c H - 24) S.src.push(H + 6);\n  // Foam shed by each source stays where it fell on the still water and\n  // fades in about 0.4 seconds.\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  S.foamT += d * 60 * S.speed / 2;\n  for (const f of S.foam) f.life -= (d * S.speed) / 2 / 0.4;\n  S.foam = S.foam.filter((f) => f.life > 0);\n  while (S.foamT >= 1) {\n    S.foamT -= 1;\n    for (const ys of S.src)\n      if (ys > -4 && ys \u003c H + 4) {\n        const ang = random() * 2 * PI, r = rf * sqrt(random());\n        S.foam.push({ x: 31.5 + r * cos(ang), y: ys + 0.6 * r * sin(ang) + 1, life: 0.6 + 0.4 * random() });\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tab) return;\n  const T = S.tab, { ZX, ZY } = T, GX = S.GX, GY = S.GY, F = S.F, c = S.c;\n  GX.fill(0);\n  GY.fill(0);\n  F.fill(0);\n  for (const f of S.foam) {\n    const x = round(f.x), y = round(f.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) F[y * W + x] = max(F[y * W + x], min(1, f.life) * 0.85);\n  }\n  // Each source lays its wake, row by row, from the table: x behind it,\n  // linear between table rows; the cross-track slope is odd in y.\n  for (const ys of S.src)\n    for (let y = max(0, Math.ceil(ys)); y \u003c H; y++) {\n      const fx = (y - ys) / DX;\n      if (fx >= ROWS - 1) break;\n      const r = floor(fx), w = fx - r, o0 = r * YC, o1 = o0 + YC;\n      for (let m = 0; m \u003c YC; m++) {\n        const gx = ZX[o0 + m] * (1 - w) + ZX[o1 + m] * w, gy = ZY[o0 + m] * (1 - w) + ZY[o1 + m] * w;\n        GY[y * W + 32 + m] += gx;\n        GX[y * W + 32 + m] += gy;\n        GY[y * W + 31 - m] += gx;\n        GX[y * W + 31 - m] -= gy;\n      }\n    }\n  const h0 = S.hue + 0.55, hh = h0 - floor(h0);\n  // Amber, gold and lime water read brown or olive at the calm level, so\n  // there the water is lifted to 0.74 and its shadow faces lean to crimson.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.22, 0.32, hh));\n  const base = 0.34 + 0.4 * warm, sat0 = 0.82 + 0.1 * warm;\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Lit where the surface tilts towards the light.\n      const sh = -(GX[p] * S.lx + GY[p] * S.ly) * T.scale;\n      const up = sh > 0 ? min(1.4, sh) : 0, dn = sh \u003c 0 ? min(1, -sh) : 0;\n      let v = base + (1 - base) * pow(min(1, up), 0.75) - (base - 0.08 - 0.12 * warm) * pow(dn, 0.7);\n      let s = sat0 * (1 - 0.7 * sm(0.55, 1.25, up));\n      let hue = h0 + 0.03 * up - (0.02 + 0.08 * warm) * dn;\n      // The foam patch over each source.\n      let foam = F[p];\n      for (const ys of S.src) {\n        const dx = x - 31.5, dy = (y - ys) * 1.4, r2 = dx * dx + dy * dy;\n        if (r2 \u003c (rf + 1.5) * (rf + 1.5)) foam = max(foam, 1 - sm(rf - 1, rf + 1.5, sqrt(r2)));\n      }\n      if (foam > 0) {\n        v = v + (1 - v) * foam;\n        s *= 1 - foam;\n      }\n      hsv(hue, s, v, c);\n      display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again."},{"name":"Velocity","min":1,"max":1.7,"about":"The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests."},{"name":"Patch","min":0,"max":1,"about":"The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7."}],"start":[0,2,1,0.06],"measures":{"motion":1.1485,"detail":0.0308,"edges":0.1674,"complexity":1.0448,"coverage":0.995,"colour":0.1633,"drift":0.0493},"knobResponse":[0.3266,0.0627,0.0628,0.0605]},{"slug":"kettle","title":"Kettle","family":"kitchen","round":20,"note":"밤 부엌 조리대의 유리 전기 주전자가 128줄을 다 써요. 받침의 파란 LED 고리가 물을 밑에서 밝히는 동안 열판의 잔 기포가 떠올랐다 꺼지는 철을 지나 큰 기포가 들끓고, 김이 주둥이에서 패널 꼭대기까지 오르다가 스위치가 딸깍 꺼져요. K1 을 누르면 바로 켜거나 꺼요.","idea":"A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.","buttons":"K1 tap switches the kettle on or off now.","code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-kettle","type":"code","name":"kettle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower."},{"name":"Fill","min":1,"max":1.7,"about":"How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil."},{"name":"Cold","min":0,"max":1,"about":"How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it."}],"start":[0,2,1,0.06],"measures":{"motion":0.2843,"detail":0.0449,"edges":0.2669,"complexity":1.5413,"coverage":0.6281,"colour":0.1671,"drift":0.1681},"knobResponse":[0.1034,0.0699,0.0403,0.056]},{"slug":"kingfisher","title":"Kingfisher","family":"bird","round":20,"note":"강둑 단면이 오리나무 가지부터 강바닥 자갈까지 128줄을 다 써요. 물총새가 가지에서 머리를 까딱이며 물을 보다가 곧장 내리꽂혀 물보라와 거품 줄을 남기고, 피라미를 물고 올라와 가지에 두드린 뒤 삼켜요. K1 을 누르면 바로 뛰어들어요.","idea":"A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.","buttons":"K1 tap sends the kingfisher down now, or as soon as it is back on the branch.","code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","layer":{"id":"layer-kingfisher","type":"code","name":"kingfisher","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen."},{"name":"Fish","min":6,"max":60,"about":"How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner."},{"name":"Current","min":-1,"max":1,"about":"Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea."}],"start":[0,2,6,0.06],"measures":{"motion":0.0867,"detail":0.0496,"edges":0.2577,"complexity":2.0204,"coverage":0.9952,"colour":0.1732,"drift":0.0377},"knobResponse":[0.186,0.0476,0.0402,0.0555]},{"slug":"kingman-coalescent","title":"Kingman Coalescent","family":"data","round":39,"note":"64개체 모런 집단이 앞으로 살고, 패널은 지금 살아 있는 64개체의 가계도예요. 맨 아랫줄이 지금, 위로 갈수록 과거이고, 같은 조상의 자손이 붙어 서도록 열을 줄 세워서 좁은 블록이 위로 갈수록 합쳐지는 불꽃 그림이 돼요. 마지막 두 갈래가 만나는 데 걸리는 시간이 전체의 절반쯤이라 긴 이음매 하나가 위쪽을 가르고, 한 집안이 사라지면 공통 조상이 앞으로 뛰어요.","idea":"A Moran population of 64 runs forward one birth at a time while the panel draws the family tree of the living as a flame chart, now along the bottom row and the past going up, each LED in the colour of the ancestor its column came from at that time, so the narrow blocks at the bottom merge fast into a few wide ones, the last two take about as long to meet as all the others together, and when one of them dies out the common ancestor jumps forward and the panel takes the survivor's colours.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Kingman Coalescent\n// Family:  data\n// Idea:    A Moran population of 64 runs forward one birth at a time while the panel draws the family tree of the living as a flame chart, now along the bottom row and the past going up, each LED in the colour of the ancestor its column came from at that time, so the narrow blocks at the bottom merge fast into a few wide ones, the last two take about as long to meet as all the others together, and when one of them dies out the common ancestor jumps forward and the panel takes the survivor's colours.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kingman's coalescent (John Kingman, 1982), traced back through a Moran population (Patrick Moran, 1958)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Span=3..9, Speed=0.2..3, Width=1..4, Mutation=0..1\n//\n// Knob 1: Span. How far back the top row reaches, in units of Kingman time: N(N-1)/2 = 2016 Moran events, about 31 generations of the 64. At 3 a row is 48 events and the common ancestor of all 64 sits on average 1.97 units back, at row 83 of 128; at 6 at row 42; at 9 a row is 143 events, the tree crowds into the bottom 28 rows and above it the one line of ancestors shows its mutations as bands.\n// Knob 2: Speed. At 2 the population runs 0.06 units of Kingman time a second, 121 births, and the panel climbs 2.5 rows a second at Span 3; the common ancestor of all 64 moves forward on average every 17 seconds, by about 43 rows. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Width. LEDs for each traced individual. At 1 all 64 are traced, one column each, and a block gets its dark seam from two LEDs wide; at 2 the first 32 of the population's 64 places, at 3 the first 21, at 4 the first 16, each 4 LEDs with a seam. The common ancestor of a sample can also move back, when a newborn's line joins the sample's tree above it: at 4 it moves forward every 0.34 units of Kingman time and back every 0.5.\n// Knob 4: Mutation. The chance that a birth carries a mutation, which steps the child's hue 0.05 to 0.11 round the wheel either way. 0.03 at 0 and 0.066 at the start, about two along each line per unit of Kingman time, so the two families of the last split mostly differ in colour; at 1 0.63, nearly every row of every block steps and the blocks turn to stripes.\n\nconst W = 64, H = 128, N = 64;\n// One unit of Kingman time: N(N-1)/2 Moran events, in which a given pair of\n// lineages meets once on average going back.\nconst UNIT = (N * (N - 1)) / 2;\n// Every individual ever born gets an id, in order of birth; its parent, the\n// event it was born in and its hue sit in a ring of the last RING births.\nconst RING = 1 \u003c\u003c 16, MASK = RING - 1;\n// Kingman time run before the first frame, so the history covers the panel.\nconst BURN = 16;\n// Kingman time per second at Speed 1.\nconst RATE = 0.03;\nconst { floor, round, random, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, ev: 0, next: 0, acc: 0, n: 0, span: 3, speed: 2, mu: 0.05, shift: 0,\n    par: new Int32Array(RING), born: new Float64Array(RING), hue: new Float32Array(RING),\n    slot: new Int32Array(N), front: new Int32Array(N), tm: 0, order: new Int32Array(N), anc: new Int32Array(W * H),\n    c: [0, 0, 0],\n  };\n}\n\n// The founders: N individuals with no parent, born at event 0.\nfunction found(S) {\n  for (let i = 0; i \u003c N; i++) {\n    S.par[i] = -1;\n    S.born[i] = 0;\n    S.hue[i] = 0.58;\n    S.slot[i] = i;\n  }\n  S.next = N;\n  S.ev = 0;\n}\n\n// One Moran event: a parent picked at random has a child, which takes the\n// place of another individual picked at random, who dies.\nfunction event(S) {\n  const p = floor(random() * N);\n  let d = floor(random() * (N - 1));\n  if (d >= p) d++;\n  const id = S.next++, j = id & MASK, pa = S.slot[p];\n  S.ev++;\n  S.par[j] = pa;\n  S.born[j] = S.ev;\n  // A mutation, with chance mu: the hue steps a little either way.\n  let m = 0;\n  if (random() \u003c S.mu) m = (random() \u003c 0.5 ? -1 : 1) * (0.05 + 0.06 * random());\n  S.hue[j] = S.hue[pa & MASK] + m;\n  S.slot[d] = id;\n}\n\nconst parent = (S, a) => (a \u003c N || S.next - a > RING - 2 * N ? -1 : S.par[a & MASK]);\n\n// Going back from the first n slots, always stepping the youngest ancestor\n// to its parent, until one is left: returns that common ancestor and, in\n// S.tm, the Moran events back to the merge of the last two lineages.\nfunction mrca(S, n) {\n  const f = S.front;\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = S.slot[i];\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === a) dup = true;\n    if (!dup) f[k++] = a;\n  }\n  S.tm = 0;\n  while (k > 1) {\n    let m = 0;\n    for (let j = 1; j \u003c k; j++) if (f[j] > f[m]) m = j;\n    const a = f[m], q = parent(S, a);\n    if (q \u003c 0) return -1;\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === q) dup = true;\n    if (dup) {\n      f[m] = f[--k];\n      S.tm = S.ev - S.born[a & MASK] + 1;\n    } else f[m] = q;\n  }\n  return f[0];\n}\n\n// Order of two individuals in the flame chart: follow both lines back to\n// where they meet; the one that is that ancestor itself comes first,\n// otherwise the one whose line left it earlier. The order of two living\n// individuals never changes, so the chart only moves where they are born\n// and die.\nfunction cmp(S, a, b) {\n  let pa = -1, pb = -1;\n  while (a !== b) {\n    if (a > b) {\n      const q = parent(S, a);\n      if (q \u003c 0) return a - b;\n      pa = a;\n      a = q;\n    } else {\n      const q = parent(S, b);\n      if (q \u003c 0) return a - b;\n      pb = b;\n      b = q;\n    }\n  }\n  if (pa \u003c 0) return -1;\n  if (pb \u003c 0) return 1;\n  return pa - pb;\n}\n\nfunction sortOrder(S) {\n  const { order, slot } = S, n = S.n;\n  for (let i = 1; i \u003c n; i++) {\n    const v = order[i], id = slot[v];\n    let j = i - 1;\n    while (j >= 0 && cmp(S, slot[order[j]], id) > 0) {\n      order[j + 1] = order[j];\n      j--;\n    }\n    order[j + 1] = v;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.span = cl(k[0], 3, 9);\n  S.speed = cl(k[1], 0.2, 3);\n  const w = round(cl(k[2], 1, 4)), n = floor(W / w);\n  S.mu = 0.03 + 0.6 * cl(k[3], 0, 1);\n  if (!S.init) {\n    found(S);\n    for (let e = 0; e \u003c BURN * UNIT; e++) event(S);\n    // Run on until the traced tree is a typical one, its last merge between\n    // 0.8 and 1.3 times Kingman's mean 2(1 - 1/n) back, and turn the colours\n    // so that the common ancestor is azure.\n    const mean = 2 * (1 - 1 / n) * UNIT;\n    for (let tries = 0; tries \u003c 60; tries++) {\n      const a = mrca(S, n);\n      if (a >= 0 && S.tm > 0.8 * mean && S.tm \u003c 1.3 * mean) break;\n      for (let e = 0; e \u003c UNIT / 5; e++) event(S);\n    }\n    const a = mrca(S, n);\n    if (a >= 0) S.shift = 0.58 - S.hue[a & MASK];\n    S.init = true;\n  }\n  if (n !== S.n) {\n    S.n = n;\n    for (let i = 0; i \u003c n; i++) S.order[i] = i;\n  }\n  S.acc += d * S.speed * RATE * UNIT;\n  while (S.acc >= 1) {\n    event(S);\n    S.acc -= 1;\n  }\n  sortOrder(S);\n  // Each lineage's ancestor at each row's time. Rows sit on a grid of\n  // absolute times, so the picture climbs a whole row at a time.\n  const { anc, order, slot, born } = S, step = (S.span * UNIT) / (H - 1), K = floor(S.ev / step);\n  for (let i = 0; i \u003c n; i++) {\n    let a = slot[order[i]];\n    anc[i] = a;\n    for (let r = 1; r \u003c H; r++) {\n      const T = (K - r + 1) * step;\n      for (;;) {\n        if (born[a & MASK] \u003c= T) break;\n        const q = parent(S, a);\n        if (q \u003c 0) break;\n        a = q;\n      }\n      anc[r * W + i] = a;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { anc, hue, c } = S, n = S.n;\n  const col = new Int32Array(W);\n  for (let x = 0; x \u003c W; x++) col[x] = floor((x * n) / W);\n  let top = -1;\n  for (let r = 0; r \u003c H; r++) {\n    const row = r * W, y = H - 1 - r;\n    if (top \u003c 0 && anc[row] === anc[row + n - 1]) top = r;\n    const val = 1 - 0.12 * (r / (H - 1));\n    // Each block: a run of columns with one ancestor in this row. A dark\n    // seam takes its first column when it is two or more wide, and it is\n    // shaded round like a tube.\n    for (let x0 = 0; x0 \u003c W; ) {\n      const a = anc[row + col[x0]];\n      let x1 = x0 + 1;\n      while (x1 \u003c W && anc[row + col[x1]] === a) x1++;\n      const seam = x0 > 0 && x1 - x0 > 1 ? 1 : 0, l0 = x0 + seam, wd = x1 - l0;\n      hsv(hue[a & MASK] + S.shift, 0.68, val, c);\n      for (let x = x0; x \u003c x1; x++) {\n        if (x \u003c l0) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const sh = 0.66 + 0.34 * sin((PI * (x - l0 + 0.5)) / wd);\n        let R = c[0] * 255 * sh, G = c[1] * 255 * sh, B = c[2] * 255 * sh;\n        // A merge: two blocks of the row below meet here.\n        if (r > 0 && x > x0 && anc[row - W + col[x]] !== anc[row - W + col[x - 1]]) {\n          const g = r === top ? 0.95 : 0.7;\n          R += (255 - R) * g;\n          G += (255 - G) * g;\n          B += (255 - B) * g;\n        }\n        display.setPixel(x, y, round(R), round(G), round(B));\n      }\n      x0 = x1;\n    }\n  }\n}\n","layer":{"id":"layer-kingman-coalescent","type":"code","name":"kingman-coalescent","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kingman Coalescent\n// Family:  data\n// Idea:    A Moran population of 64 runs forward one birth at a time while the panel draws the family tree of the living as a flame chart, now along the bottom row and the past going up, each LED in the colour of the ancestor its column came from at that time, so the narrow blocks at the bottom merge fast into a few wide ones, the last two take about as long to meet as all the others together, and when one of them dies out the common ancestor jumps forward and the panel takes the survivor's colours.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kingman's coalescent (John Kingman, 1982), traced back through a Moran population (Patrick Moran, 1958)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Span=3..9, Speed=0.2..3, Width=1..4, Mutation=0..1\n//\n// Knob 1: Span. How far back the top row reaches, in units of Kingman time: N(N-1)/2 = 2016 Moran events, about 31 generations of the 64. At 3 a row is 48 events and the common ancestor of all 64 sits on average 1.97 units back, at row 83 of 128; at 6 at row 42; at 9 a row is 143 events, the tree crowds into the bottom 28 rows and above it the one line of ancestors shows its mutations as bands.\n// Knob 2: Speed. At 2 the population runs 0.06 units of Kingman time a second, 121 births, and the panel climbs 2.5 rows a second at Span 3; the common ancestor of all 64 moves forward on average every 17 seconds, by about 43 rows. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Width. LEDs for each traced individual. At 1 all 64 are traced, one column each, and a block gets its dark seam from two LEDs wide; at 2 the first 32 of the population's 64 places, at 3 the first 21, at 4 the first 16, each 4 LEDs with a seam. The common ancestor of a sample can also move back, when a newborn's line joins the sample's tree above it: at 4 it moves forward every 0.34 units of Kingman time and back every 0.5.\n// Knob 4: Mutation. The chance that a birth carries a mutation, which steps the child's hue 0.05 to 0.11 round the wheel either way. 0.03 at 0 and 0.066 at the start, about two along each line per unit of Kingman time, so the two families of the last split mostly differ in colour; at 1 0.63, nearly every row of every block steps and the blocks turn to stripes.\n\nconst W = 64, H = 128, N = 64;\n// One unit of Kingman time: N(N-1)/2 Moran events, in which a given pair of\n// lineages meets once on average going back.\nconst UNIT = (N * (N - 1)) / 2;\n// Every individual ever born gets an id, in order of birth; its parent, the\n// event it was born in and its hue sit in a ring of the last RING births.\nconst RING = 1 \u003c\u003c 16, MASK = RING - 1;\n// Kingman time run before the first frame, so the history covers the panel.\nconst BURN = 16;\n// Kingman time per second at Speed 1.\nconst RATE = 0.03;\nconst { floor, round, random, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, ev: 0, next: 0, acc: 0, n: 0, span: 3, speed: 2, mu: 0.05, shift: 0,\n    par: new Int32Array(RING), born: new Float64Array(RING), hue: new Float32Array(RING),\n    slot: new Int32Array(N), front: new Int32Array(N), tm: 0, order: new Int32Array(N), anc: new Int32Array(W * H),\n    c: [0, 0, 0],\n  };\n}\n\n// The founders: N individuals with no parent, born at event 0.\nfunction found(S) {\n  for (let i = 0; i \u003c N; i++) {\n    S.par[i] = -1;\n    S.born[i] = 0;\n    S.hue[i] = 0.58;\n    S.slot[i] = i;\n  }\n  S.next = N;\n  S.ev = 0;\n}\n\n// One Moran event: a parent picked at random has a child, which takes the\n// place of another individual picked at random, who dies.\nfunction event(S) {\n  const p = floor(random() * N);\n  let d = floor(random() * (N - 1));\n  if (d >= p) d++;\n  const id = S.next++, j = id & MASK, pa = S.slot[p];\n  S.ev++;\n  S.par[j] = pa;\n  S.born[j] = S.ev;\n  // A mutation, with chance mu: the hue steps a little either way.\n  let m = 0;\n  if (random() \u003c S.mu) m = (random() \u003c 0.5 ? -1 : 1) * (0.05 + 0.06 * random());\n  S.hue[j] = S.hue[pa & MASK] + m;\n  S.slot[d] = id;\n}\n\nconst parent = (S, a) => (a \u003c N || S.next - a > RING - 2 * N ? -1 : S.par[a & MASK]);\n\n// Going back from the first n slots, always stepping the youngest ancestor\n// to its parent, until one is left: returns that common ancestor and, in\n// S.tm, the Moran events back to the merge of the last two lineages.\nfunction mrca(S, n) {\n  const f = S.front;\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = S.slot[i];\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === a) dup = true;\n    if (!dup) f[k++] = a;\n  }\n  S.tm = 0;\n  while (k > 1) {\n    let m = 0;\n    for (let j = 1; j \u003c k; j++) if (f[j] > f[m]) m = j;\n    const a = f[m], q = parent(S, a);\n    if (q \u003c 0) return -1;\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === q) dup = true;\n    if (dup) {\n      f[m] = f[--k];\n      S.tm = S.ev - S.born[a & MASK] + 1;\n    } else f[m] = q;\n  }\n  return f[0];\n}\n\n// Order of two individuals in the flame chart: follow both lines back to\n// where they meet; the one that is that ancestor itself comes first,\n// otherwise the one whose line left it earlier. The order of two living\n// individuals never changes, so the chart only moves where they are born\n// and die.\nfunction cmp(S, a, b) {\n  let pa = -1, pb = -1;\n  while (a !== b) {\n    if (a > b) {\n      const q = parent(S, a);\n      if (q \u003c 0) return a - b;\n      pa = a;\n      a = q;\n    } else {\n      const q = parent(S, b);\n      if (q \u003c 0) return a - b;\n      pb = b;\n      b = q;\n    }\n  }\n  if (pa \u003c 0) return -1;\n  if (pb \u003c 0) return 1;\n  return pa - pb;\n}\n\nfunction sortOrder(S) {\n  const { order, slot } = S, n = S.n;\n  for (let i = 1; i \u003c n; i++) {\n    const v = order[i], id = slot[v];\n    let j = i - 1;\n    while (j >= 0 && cmp(S, slot[order[j]], id) > 0) {\n      order[j + 1] = order[j];\n      j--;\n    }\n    order[j + 1] = v;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.span = cl(k[0], 3, 9);\n  S.speed = cl(k[1], 0.2, 3);\n  const w = round(cl(k[2], 1, 4)), n = floor(W / w);\n  S.mu = 0.03 + 0.6 * cl(k[3], 0, 1);\n  if (!S.init) {\n    found(S);\n    for (let e = 0; e \u003c BURN * UNIT; e++) event(S);\n    // Run on until the traced tree is a typical one, its last merge between\n    // 0.8 and 1.3 times Kingman's mean 2(1 - 1/n) back, and turn the colours\n    // so that the common ancestor is azure.\n    const mean = 2 * (1 - 1 / n) * UNIT;\n    for (let tries = 0; tries \u003c 60; tries++) {\n      const a = mrca(S, n);\n      if (a >= 0 && S.tm > 0.8 * mean && S.tm \u003c 1.3 * mean) break;\n      for (let e = 0; e \u003c UNIT / 5; e++) event(S);\n    }\n    const a = mrca(S, n);\n    if (a >= 0) S.shift = 0.58 - S.hue[a & MASK];\n    S.init = true;\n  }\n  if (n !== S.n) {\n    S.n = n;\n    for (let i = 0; i \u003c n; i++) S.order[i] = i;\n  }\n  S.acc += d * S.speed * RATE * UNIT;\n  while (S.acc >= 1) {\n    event(S);\n    S.acc -= 1;\n  }\n  sortOrder(S);\n  // Each lineage's ancestor at each row's time. Rows sit on a grid of\n  // absolute times, so the picture climbs a whole row at a time.\n  const { anc, order, slot, born } = S, step = (S.span * UNIT) / (H - 1), K = floor(S.ev / step);\n  for (let i = 0; i \u003c n; i++) {\n    let a = slot[order[i]];\n    anc[i] = a;\n    for (let r = 1; r \u003c H; r++) {\n      const T = (K - r + 1) * step;\n      for (;;) {\n        if (born[a & MASK] \u003c= T) break;\n        const q = parent(S, a);\n        if (q \u003c 0) break;\n        a = q;\n      }\n      anc[r * W + i] = a;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { anc, hue, c } = S, n = S.n;\n  const col = new Int32Array(W);\n  for (let x = 0; x \u003c W; x++) col[x] = floor((x * n) / W);\n  let top = -1;\n  for (let r = 0; r \u003c H; r++) {\n    const row = r * W, y = H - 1 - r;\n    if (top \u003c 0 && anc[row] === anc[row + n - 1]) top = r;\n    const val = 1 - 0.12 * (r / (H - 1));\n    // Each block: a run of columns with one ancestor in this row. A dark\n    // seam takes its first column when it is two or more wide, and it is\n    // shaded round like a tube.\n    for (let x0 = 0; x0 \u003c W; ) {\n      const a = anc[row + col[x0]];\n      let x1 = x0 + 1;\n      while (x1 \u003c W && anc[row + col[x1]] === a) x1++;\n      const seam = x0 > 0 && x1 - x0 > 1 ? 1 : 0, l0 = x0 + seam, wd = x1 - l0;\n      hsv(hue[a & MASK] + S.shift, 0.68, val, c);\n      for (let x = x0; x \u003c x1; x++) {\n        if (x \u003c l0) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const sh = 0.66 + 0.34 * sin((PI * (x - l0 + 0.5)) / wd);\n        let R = c[0] * 255 * sh, G = c[1] * 255 * sh, B = c[2] * 255 * sh;\n        // A merge: two blocks of the row below meet here.\n        if (r > 0 && x > x0 && anc[row - W + col[x]] !== anc[row - W + col[x - 1]]) {\n          const g = r === top ? 0.95 : 0.7;\n          R += (255 - R) * g;\n          G += (255 - G) * g;\n          B += (255 - B) * g;\n        }\n        display.setPixel(x, y, round(R), round(G), round(B));\n      }\n      x0 = x1;\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Span=3..9, Speed=0.2..3, Width=1..4, Mutation=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Span","min":3,"max":9,"about":"How far back the top row reaches, in units of Kingman time: N(N-1)/2 = 2016 Moran events, about 31 generations of the 64. At 3 a row is 48 events and the common ancestor of all 64 sits on average 1.97 units back, at row 83 of 128; at 6 at row 42; at 9 a row is 143 events, the tree crowds into the bottom 28 rows and above it the one line of ancestors shows its mutations as bands."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the population runs 0.06 units of Kingman time a second, 121 births, and the panel climbs 2.5 rows a second at Span 3; the common ancestor of all 64 moves forward on average every 17 seconds, by about 43 rows. At 0.2 ten times slower, at 3 one and a half times faster."},{"name":"Width","min":1,"max":4,"about":"LEDs for each traced individual. At 1 all 64 are traced, one column each, and a block gets its dark seam from two LEDs wide; at 2 the first 32 of the population's 64 places, at 3 the first 21, at 4 the first 16, each 4 LEDs with a seam. The common ancestor of a sample can also move back, when a newborn's line joins the sample's tree above it: at 4 it moves forward every 0.34 units of Kingman time and back every 0.5."},{"name":"Mutation","min":0,"max":1,"about":"The chance that a birth carries a mutation, which steps the child's hue 0.05 to 0.11 round the wheel either way. 0.03 at 0 and 0.066 at the start, about two along each line per unit of Kingman time, so the two families of the last split mostly differ in colour; at 1 0.63, nearly every row of every block steps and the blocks turn to stripes."}],"start":[3,2,1,0.06],"measures":{"motion":1.2518,"detail":0.0417,"edges":0.3173,"complexity":1.0432,"coverage":0.967,"colour":0.4104,"drift":0.1027},"knobResponse":[0.1845,0.106,0.0643,0.2761]},{"slug":"kintsugi","title":"Kintsugi","family":"pottery","round":25,"note":"어두운 쪽빛 천 위의 청자 찻사발에 금이 가고, 조각들이 조금 벌어져 돌아요. 깨진 날에 붉은 옻과 금이 돈 다음 다시 붙어요. 위에 매달린 종이 등이 흔들리며 금빛 이음매에 반짝임을 지나가게 하고, K3 Mends 를 올릴수록 지나온 깨짐의 금빛 그물이 촘촘해져요. K1 을 누르면 사발이 바로 깨져요.","idea":"A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.","buttons":"K1 tap breaks the bowl now, while it stands whole.","code":"// ===== Patternflow pattern =====\n// Title:   Kintsugi\n// Family:  pottery\n// Idea:    A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after kintsugi, the Japanese mending of broken ware with urushi lacquer and powdered gold\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1\n//\n// Knob 1: Glaze. Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on.\n// Knob 2: Speed. At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower.\n// Knob 3: Mends. How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze.\n// Knob 4: Lamp. Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it.\n// Buttons: K1 tap breaks the bowl now, while it stands whole.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The bowl turned about x = CX, its foot on the cloth at FB, HT tall with a\n// rim RT across, seen a little from above: a circle r across shows E * r tall.\n// Its picture is kept in a band of rows from BY0, BH rows tall.\nconst CX = 32, FB = 104, HT = 40, E = 0.3, RT = 28, HORIZON = 84, BY0 = 52, BH = 58, NB = 64 * BH;\nconst R = (h) => (h \u003c 4 ? 11.5 : 13.6 + 14.4 * sin((min(1, (h - 4) / (HT - 4)) * PI) / 2) ** 0.75);\n\n// Each glaze and the colour it pools to, from celadon to raku black.\nconst GLAZE = [\n  [[112, 184, 150], [62, 134, 128]],\n  [[238, 230, 214], [238, 150, 96]],\n  [[240, 120, 44], [150, 60, 26]],\n  [[46, 42, 42], [92, 74, 62]],\n];\nconst CLAY = [206, 158, 116], BODY = [232, 212, 178], URUSHI = [184, 44, 30], GOLD = [255, 206, 86], OLDG = [236, 160, 64], GLINT = [255, 246, 216], SHEEN = [255, 238, 210];\nconst WALL = [92, 74, 56], WOOD = [104, 66, 40], CLOTH = [46, 62, 132];\n// Rest, crack, open, gild, close and shine, in seconds at Speed 2.\nconst DUR = [5, 0.45, 1.3, 2.4, 1.5, 1.2];\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, tau: 0, wd: 2.4, count: 0, mends: 2, glaze: 0, gs: 0, PX: 33, LX: 33, LY: 29, fade: 1, flare: 0,\n    mat: new Uint8Array(NB), nrm: F32(NB * 3), ao: F32(NB), mot: F32(NB), jit: F32(NB), sid: new Int32Array(NB), fid: new Int32Array(NB), off: new Uint8Array(16),\n    col: F32(NB * 3), f: F32(N * 3), bg: F32(N * 3), dust: [],\n  });\n  geometry(P);\n  // The breaks the bowl has already been through, oldest first.\n  for (let k = 0; k \u003c 8; k++) seams(P, crack(P, 4 + floor(rnd() * 3)), 1 + floor(rnd() * 3));\n  brk(P);\n  backdrop(P);\n  swing(P);\n}\n\n// Where each LED of the bowl's picture sits on it: outer wall, inside, lip or\n// foot, which way it faces, how much the bowl shades it, and the glaze's pooling.\nfunction geometry(P) {\n  const { mat, nrm, ao, mot, jit } = P;\n  for (let b = 0; b \u003c NB; b++) {\n    const x = b & 63, y = (b >> 6) + BY0, px = x + 0.5 - CX, h0 = FB - y - 0.5;\n    let h = h0, r = 0, u = 9, c = 0, n = null, m = 0, a = 1;\n    for (let it = 0; it \u003c 4; it++) {\n      r = R(h);\n      u = px / r;\n      c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n      h = h0 + E * r * c;\n    }\n    r = R(h);\n    u = px / r;\n    if (h >= 0 && h \u003c= HT && u * u \u003c 1) {\n      c = sqrt(1 - u * u);\n      const dR = (R(h + 0.6) - R(h - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = h \u003c 4 ? 4 : h > HT - 1.1 ? 3 : 1;\n      n = m === 3 ? [u * 0.5, 0.8, 0.35] : [u * nl, -dR * nl, c * nl];\n      a = m === 4 ? 0.8 : 1;\n    } else {\n      const ex = px / RT, ey = (y + 0.5 - (FB - HT)) / (E * RT), e2 = ex * ex + ey * ey;\n      if (e2 >= 1) continue;\n      // Inside: the far wall seen over the rim, darker the deeper it goes.\n      let hb = HT;\n      for (let it = 0; it \u003c 4; it++) {\n        r = R(hb);\n        u = cl(px / r, -1, 1);\n        c = sqrt(1 - u * u);\n        hb = cl(h0 - E * r * c, 4, HT);\n      }\n      const dR = (R(hb + 0.6) - R(hb - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = e2 > 0.84 && ey \u003c 0.2 ? 3 : 2;\n      n = m === 3 ? [ex * 0.5, 0.8, 0.35] : [-u * nl, dR * nl, c * nl];\n      a = m === 3 ? 1 : (0.3 + 0.7 * ((hb - 4) / (HT - 4)) ** 0.6) * (1 - 0.35 * sm(0.2, 0.95, ey));\n    }\n    mat[b] = m;\n    nrm.set(n, b * 3);\n    ao[b] = a;\n    mot[b] = sm(0.3, 0.85, 0.75 * vn(x / 4.5, y / 3.5) + 0.25 * hash(x, y + 999)) * (m === 2 ? 1 : 0.8);\n    jit[b] = (hash(x + 77, y) - 0.5) * 0.6;\n  }\n}\n\n// A break: the bowl's picture split into n shards with ragged edges, taller\n// than wide, like cracks that run down from the rim.\nfunction crack(P, n) {\n  const S = [], reg = new Uint8Array(NB), ox = rnd() * 400, oy = rnd() * 400;\n  while (S.length \u003c n) {\n    const b = floor(rnd() * NB);\n    if (P.mat[b]) S.push([(b & 63) + 0.5, (b >> 6) + 0.5]);\n  }\n  for (let b = 0; b \u003c NB; b++) {\n    if (!P.mat[b]) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + 0.5;\n    const wx = x + 5 * (vn(x / 7 + ox, y / 7 + oy) - 0.5) + 1.6 * (vn(x / 2 + oy, y / 2) - 0.5);\n    const wy = y + 5 * (vn(x / 7 + oy, y / 7 + ox + 50) - 0.5) + 1.6 * (vn(x / 2, y / 2 + ox) - 0.5);\n    let best = 1e9;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = wx - S[i][0], dy = (wy - S[i][1]) * 0.75, dd = dx * dx + dy * dy;\n      if (dd \u003c best) (best = dd), (reg[b] = i + 1);\n    }\n  }\n  // Most breaks also knock a chip out of the rim, and the gold fills it.\n  if (rnd() \u003c 0.8) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 3);\n    const r = 2.4 + rnd() * 1.8, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) if (reg[b] && ((b & 63) - cx) ** 2 + ((b >> 6) - cy) ** 2 \u003c r * r) reg[b] = 255;\n  }\n  // Some lose a shard for good, and a piece of another bowl is set in its\n  // place (yobitsugi).\n  if (rnd() \u003c 0.55) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 1 && P.mat[c] !== 2);\n    const r = 4.5 + rnd() * 2.5, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) {\n      const x = b & 63, y = b >> 6, dx = x - cx, dy = (y - cy) * 1.25;\n      if (reg[b] && reg[b] \u003c 255 && dx * dx + dy * dy \u003c (r * (0.75 + 0.5 * vn(x / 3 + ox, y / 3))) ** 2) reg[b] = 254;\n    }\n  }\n  return reg;\n}\n// One side of a crack (for the seam it leaves) or both (for the edges it opens).\nfunction edge(reg, b, both) {\n  const r = reg[b], x = b & 63;\n  if (!r) return false;\n  for (const nb of [x \u003c 63 ? b + 1 : -1, x > 0 ? b - 1 : -1, b + 64 \u003c NB ? b + 64 : -1, b - 64]) {\n    if (nb \u003c 0 || !reg[nb] || reg[nb] === r) continue;\n    if (both || reg[nb] > r) return true;\n  }\n  return false;\n}\n// A closed break becomes the newest seam, with its gold chip and the piece\n// from another bowl, glazed off glazes along.\nfunction seams(P, reg, off) {\n  const id = ++P.count;\n  P.off[id & 15] = off;\n  for (let b = 0; b \u003c NB; b++) {\n    if (reg[b] === 254) P.fid[b] = id;\n    if (reg[b] === 255 || edge(reg, b, 0)) P.sid[b] = id;\n  }\n}\n\n// The next break: its shards, which way each one drifts and turns, the\n// crack's run from where it is struck, and the order the gold goes round.\nfunction brk(P) {\n  const n = 4 + floor(rnd() * 3), reg = crack(P, n), S = [];\n  for (let i = 0; i \u003c n; i++) S.push({ cx: 0, cy: 0, c: 0, rad: 0, e: [] });\n  for (let b = 0; b \u003c NB; b++)\n    if (reg[b] && reg[b] \u003c 254) {\n      const s = S[reg[b] - 1];\n      (s.cx += (b & 63) + 0.5), (s.cy += (b >> 6) + BY0 + 0.5), s.c++;\n    }\n  for (const s of S) {\n    if (!s.c) continue;\n    (s.cx /= s.c), (s.cy /= s.c);\n    const dx = s.cx - CX, sg = dx \u003c 0 ? -1 : 1;\n    Object.assign(s, { tx: dx * 0.28 + sg * (1.5 + rnd() * 1.5), ty: (s.cy - 80) * 0.16 + 1 + rnd(), rot: (rnd() - 0.5) * 0.5, p: rnd() * TAU, o: rnd() });\n  }\n  const cb = new Uint8Array(NB), ce = new Uint8Array(NB), ga = F32(NB), cd = F32(NB);\n  let ib;\n  do ib = floor(rnd() * NB);\n  while (P.mat[ib] !== 1);\n  let md = 1;\n  for (let b = 0; b \u003c NB; b++) {\n    if (!reg[b] || reg[b] > 253) continue;\n    const s = S[reg[b] - 1], x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5;\n    const dx = s.cx - x, dy = s.cy - y;\n    s.rad = max(s.rad, sqrt(dx * dx + dy * dy) + 1.5);\n    if (edge(reg, b, 1)) (ce[b] = 1), s.e.push(b), (ga[b] = (atan2(dy, dx) / TAU + 0.5 + s.o) % 1);\n    if (edge(reg, b, 0)) (cb[b] = 1), (md = max(md, (cd[b] = sqrt((x - (ib & 63)) ** 2 + (y - (ib >> 6) - BY0) ** 2))));\n  }\n  for (let b = 0; b \u003c NB; b++) cd[b] /= md;\n  Object.assign(P, { reg, S, cb, ce, ga, cd, noff: 1 + floor(rnd() * 3), ix: (ib & 63) + 0.5, iy: (ib >> 6) + BY0 + 0.5 });\n}\n\n// The plaster wall with straw in it, the beam the lantern hangs from, and the\n// folded indigo cloth, before the lantern lights them.\nfunction backdrop(P) {\n  const B = P.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, q = hash(x, y);\n      let col, f;\n      if (y \u003c 3) (col = WOOD), (f = (y === 2 ? 0.55 : 0.9) * (0.85 + 0.15 * vn(x / 6, y)));\n      else if (y \u003c HORIZON) (col = WALL), (f = (0.86 + 0.2 * vn(x / 4, y / 4) + 0.04 * q) * (q > 0.985 ? 1.3 : 1));\n      else {\n        // Folds that run across the cloth and ease towards the front.\n        const v = 0.5 + 0.5 * sin(x * 0.11 - y * 0.17 + 2.2 * sin(y * 0.05 + x * 0.04)) * sin(x * 0.07 + y * 0.05 + 1);\n        (col = CLOTH), (f = (0.6 + 0.5 * v ** 1.4) * (0.94 + 0.06 * ((x + y) & 1)) * (y === HORIZON ? 1.35 : 1));\n      }\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f;\n    }\n}\n\nfunction swing(P) {\n  const w = (TAU / 6.5) * P.tau, a = 0.42 * sin(w) + 0.07 * sin(2.3 * w + 1);\n  P.LX = P.PX + 26 * sin(a);\n  P.LY = 3 + 26 * cos(a);\n}\n\nfunction go(P, ph) {\n  if (ph === 5) seams(P, P.reg, P.noff), brk(P);\n  if (ph === 0) P.wd = DUR[0];\n  P.ph = ph;\n  P.pt = 0;\n}\n\n// Where a shard is now: turned by th about its middle and moved by tx, ty.\nfunction place(P, s) {\n  const ph = P.ph, p = P.pt / DUR[ph], e = ph === 2 ? 1 - (1 - p) ** 3 : ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1, p) : 0;\n  const th = (s.rot + 0.05 * sin(P.tau * 1.1 + s.p)) * e;\n  return [cos(th), sin(th), s.cx + (s.tx + 0.8 * sin(P.tau * 1.7 + s.p)) * e, s.cy + (s.ty + 0.6 * cos(P.tau * 1.3 + s.p)) * e];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.glaze = cl(k[0], 0, 1);\n  P.mends = round(cl(k[2], 2, 8));\n  P.PX = 32 + 14 * cl(k[3], -1, 1);\n  P.tau += d;\n  if (input.btnPressed && input.btnPressed[0] && (P.ph === 0 || P.ph === 5)) go(P, 1);\n  if ((P.pt += d) >= (P.ph ? DUR[P.ph] : P.wd)) go(P, (P.ph + 1) % 6);\n  const p = P.pt / DUR[P.ph];\n  P.fade = P.ph === 3 ? 1 - sm(0.2, 1, p) : P.ph === 4 ? 0 : 1;\n  P.flare = P.ph === 5 ? 1 - p : 0;\n  swing(P);\n\n  // Gold powder dusted on the lacquer falls past the shards to the cloth.\n  if (P.ph === 3 && p > 0.3 && rnd() \u003c d * 16) {\n    const s = P.S[floor(rnd() * P.S.length)];\n    if (s.e.length) {\n      const b = s.e[floor(rnd() * s.e.length)], [co, si, tx, ty] = place(P, s), qx = (b & 63) + 0.5 - s.cx, qy = (b >> 6) + BY0 + 0.5 - s.cy;\n      P.dust.push([co * qx - si * qy + tx, si * qx + co * qy + ty, 0, FB + 5 + rnd() * 19, 1, rnd() * TAU]);\n    }\n  }\n  P.dust = P.dust.filter((q) => {\n    if (q[1] \u003c q[3]) (q[2] += 40 * d), (q[1] = min(q[3], q[1] + q[2] * d));\n    else q[4] -= d / 10;\n    return q[4] > 0;\n  });\n  if (P.dust.length > 90) P.dust.shift();\n}\n\n// The bowl's colours for this moment: glaze lit by the lantern, the seams of\n// the mends it carries, and the crack, the bare clay, the lacquer and the\n// gold of the break under way.\nfunction shade(P) {\n  // The bowl's glaze and the three others, round the ring of four.\n  const G = [0, 1, 2, 3].map((k) => {\n    const g = P.glaze * 3 + k, i = floor(g) % 4, f = g - floor(g);\n    return [0, 1].map((j) => GLAZE[i][j].map((v, n) => mix(v, GLAZE[(i + 1) % 4][j][n], f)));\n  });\n  const { mat, nrm, ao, mot, jit, sid, fid, col, LX, LY, ph, count, fade, flare } = P, lo = count - P.mends, p = P.pt / (ph ? DUR[ph] : P.wd);\n  const lac = ph === 3 ? sm(0, 0.5, p) * 1.05 : ph === 4 ? 2 : 0, gil = ph === 3 ? sm(0.3, 1, p) * 1.05 : ph === 4 ? 2 : 0, open = ph >= 2 && ph \u003c= 4;\n  const vis = (id) => (id > lo ? (id === lo + 1 ? fade : 1) : 0);\n  let gs = 0, r = 0, gg = 0, bb = 0, kg = 0, gl = 0;\n  const gold = (a, age, fl) => {\n    const t = min(1, age / 8);\n    gs += a * fl * (kg + gl);\n    r = mix(r, (mix(GOLD[0], OLDG[0], t) * kg + GLINT[0] * gl) * fl, a);\n    gg = mix(gg, (mix(GOLD[1], OLDG[1], t) * kg + GLINT[1] * gl) * fl, a);\n    bb = mix(bb, (mix(GOLD[2], OLDG[2], t) * kg + GLINT[2] * gl) * fl, a);\n  };\n  const flat = (c, k) => ((r = c[0] * k), (gg = c[1] * k), (bb = c[2] * k));\n  for (let b = 0; b \u003c NB; b++) {\n    const m = mat[b];\n    if (!m) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5, o = b * 3, nx = nrm[o], ny = nrm[o + 1], nz = nrm[o + 2];\n    let lx = LX - x, ly = y - LY, lz = 24;\n    const dd = lx * lx + ly * ly + lz * lz, il = 1 / sqrt(dd), fall = 0.55 + 0.6 * exp(-dd / 5000);\n    (lx *= il), (ly *= il), (lz *= il);\n    const hz = lz + 1, hl = 1 / sqrt(lx * lx + ly * ly + hz * hz), dif = max(0, nx * lx + ny * ly + nz * lz) * fall;\n    kg = 0.62 + 0.55 * dif;\n    gl = min(1.1, 1.7 * fall * max(0, ((nx + jit[b]) * lx + ny * ly + nz * hz) * hl) ** 30);\n    if (m === 4) flat(CLAY, (0.16 + 0.8 * dif) * ao[b]);\n    else {\n      // Glaze, or the piece of another bowl set into it.\n      const t = mot[b], fi = fid[b], nw = ph === 4 && P.reg[b] === 254, gk = nw ? P.noff : fi > lo ? P.off[fi & 15] : 0, ga = !nw && fi === lo + 1 ? fade : 1;\n      const k = (0.2 + 0.3 * max(0, -ny) + 0.95 * dif) * ao[b] * (m === 3 ? 1.15 : 1), sh = 0.6 * fall * max(0, (nx * lx + ny * ly + nz * hz) * hl) ** 24;\n      const A = G[0], B = G[gk];\n      r = mix(mix(A[0][0], A[1][0], t), mix(B[0][0], B[1][0], t), ga) * k + SHEEN[0] * sh;\n      gg = mix(mix(A[0][1], A[1][1], t), mix(B[0][1], B[1][1], t), ga) * k + SHEEN[1] * sh;\n      bb = mix(mix(A[0][2], A[1][2], t), mix(B[0][2], B[1][2], t), ga) * k + SHEEN[2] * sh;\n    }\n    const id = sid[b], a = vis(id);\n    if (open && P.ce[b]) {\n      // An opened edge: bare clay, then red lacquer, then gold.\n      const q = P.ga[b];\n      if (q \u003c gil) gold(1, 0, 1.15);\n      else if (q \u003c lac) flat(URUSHI, 0.5 + 0.6 * dif);\n      else flat(BODY, 0.45 + 0.7 * dif);\n    } else if (a > 0) gold(a, count - id, id === count ? 1 + 0.6 * flare : 1);\n    else if (flare > 0) {\n      // Fresh gold glows a little past the line it fills.\n      for (let j = 0; j \u003c 4; j++) {\n        const nb = b + (j === 0 ? 1 : j === 1 ? -1 : j === 2 ? 64 : -64);\n        if (nb >= 0 && nb \u003c NB && sid[nb] === count) {\n          gold(0.6 * flare, 0, 1);\n          break;\n        }\n      }\n    }\n    if (ph === 1 && P.cb[b] && P.cd[b] \u003c p * 1.6) (r *= 0.12), (gg *= 0.12), (bb *= 0.12);\n    (col[o] = r), (col[o + 1] = gg), (col[o + 2] = bb);\n  }\n  P.gs = gs;\n}\n\n// The wall and cloth lit by the lantern, the bowl's shadow thrown away from\n// it, and the warm light its gold throws down on the cloth.\nfunction back(P, F) {\n  const { LX, LY, bg } = P, sx = CX - (LX - CX) * 0.45, gx = CX + (LX - CX) * 0.3, gk = min(1.6, P.gs / 700);\n  // The glows fall off as a column term times a row term.\n  const X = [], Y = [];\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - LX) ** 2;\n    X.push([exp(-dx / 380), exp(-dx / 1400), exp(-dx / 1500), gk * exp(-((x + 0.5 - gx) ** 2) / 600)]);\n  }\n  for (let y = 0; y \u003c H; y++) Y.push([1.2 * exp(-((y + 0.5 - LY) ** 2) / 380), 0.3 * exp(-((y - LY) ** 2) / 4000), 0.9 * exp(-((y - 118) ** 2) / 700), exp(-((y - 111) ** 2) / 160)]);\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const [a, b, c, d] = Y[y], ey = (y + 0.5 - FB - 3) / 7;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const C = X[x];\n      if (y \u003c HORIZON) {\n        const k = 0.3 + a * C[0] + b * C[1];\n        (F[o] = bg[o] * k), (F[o + 1] = bg[o + 1] * k), (F[o + 2] = bg[o + 2] * k);\n        continue;\n      }\n      const ex = (x + 0.5 - sx) / 31, g = d * C[3] * (bg[o + 2] / CLOTH[2]);\n      let k = 0.42 + c * C[2];\n      if (ey * ey \u003c 1.4 && ex * ex \u003c 1.4) k *= 1 - 0.72 * sm(1.15, 0.55, sqrt(ex * ex + ey * ey));\n      k *= 1 + 0.7 * g;\n      (F[o] = bg[o] * k + 96 * g), (F[o + 1] = bg[o + 1] * k + 74 * g), (F[o + 2] = bg[o + 2] * k + 16 * g);\n    }\n  }\n}\n\nconst put = (F, x, y, c, k) => {\n  if ((x = floor(x)) >= 0 && x \u003c W && (y = floor(y)) >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// The paper lantern on its cord: ribs across the lit paper, black lacquer caps.\nfunction lantern(P, F) {\n  const { LX, LY, PX } = P;\n  for (let t = 0; t \u003c 1; t += 0.04) put(F, mix(PX, LX, t), mix(3, LY - 10, t), [70, 58, 46], 1);\n  for (let yy = -10; yy \u003c= 10; yy++) {\n    const y = round(LY) + yy, cap = yy \u003c= -9 || yy >= 9, w = cap ? 3.6 : 6.3 * sqrt(max(0, 1 - (yy / 9.6) ** 2)) + 0.4;\n    for (let x = floor(LX - w); x \u003c= LX + w; x++) {\n      const dx = x + 0.5 - LX, cov = cl(w - Math.abs(dx) + 0.5, 0, 1);\n      if (y \u003c 0 || x \u003c 0 || x >= W || !cov) continue;\n      const o = (y * W + x) * 3, q = dx / w, gl = 1 - q * q, rib = (yy + 9) % 3 ? 1 : 0.7;\n      for (let n = 0; n \u003c 3; n++) {\n        const c = cap ? [38, 30, 26][n] * (1.2 - 0.4 * q) : mix([236, 118, 44][n], [255, 226, 160][n], gl * (1 - (yy / 10) ** 2)) * rib;\n        F[o + n] = mix(F[o + n], c, cov);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.mat) return;\n  const F = P.f, { col, mat, ph } = P;\n  shade(P);\n  back(P, F);\n  lantern(P, F);\n  if (ph >= 2 && ph \u003c= 4) {\n    // Each shard drawn where it has drifted, read back through its turn.\n    for (let i = 0; i \u003c P.S.length; i++) {\n      const s = P.S[i];\n      if (!s.c) continue;\n      const [co, si, tx, ty] = place(P, s);\n      for (let y = max(0, floor(ty - s.rad)); y \u003c= min(H - 1, ty + s.rad); y++)\n        for (let x = max(0, floor(tx - s.rad)); x \u003c= min(W - 1, tx + s.rad); x++) {\n          const dx = x + 0.5 - tx, dy = y + 0.5 - ty, bx = floor(co * dx + si * dy + s.cx), by = floor(-si * dx + co * dy + s.cy) - BY0;\n          if (bx \u003c 0 || bx > 63 || by \u003c 0 || by >= BH) continue;\n          const b = by * 64 + bx, o = (y * W + x) * 3;\n          if (P.reg[b] === i + 1) (F[o] = col[b * 3]), (F[o + 1] = col[b * 3 + 1]), (F[o + 2] = col[b * 3 + 2]);\n        }\n    }\n    // The lost chip comes back as gold, and the lost shard as a piece of\n    // another bowl, as the shards close.\n    const a = ph === 4 ? sm(0.4, 1, P.pt / DUR[4]) : 0;\n    if (a) for (let b = 0, o = BY0 * W * 3; b \u003c NB; b++, o += 3) if (P.reg[b] > 253) for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], col[b * 3 + n], a);\n  } else for (let b = 0; b \u003c NB; b++) if (mat[b]) F.set(col.subarray(b * 3, b * 3 + 3), (BY0 * W + b) * 3);\n  // The ring of the strike.\n  if (ph === 1) {\n    const p = P.pt / DUR[1];\n    for (let y = -7; y \u003c= 7; y++)\n      for (let x = -7; x \u003c= 7; x++) {\n        const k = (1 - p) * exp(-(x * x + y * y) / (2 + 10 * p)), xx = floor(P.ix + x), yy = floor(P.iy + y);\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let n = 0, o = (yy * W + xx) * 3; n \u003c 3; n++) F[o + n] += 255 * k;\n      }\n  }\n  for (const q of P.dust) {\n    const x = floor(q[0]), y = floor(q[1]), k = q[1] \u003c q[3] ? 0.9 : q[4] * (0.25 + 0.75 * max(0, sin(q[5] + P.tau * 4)) ** 3);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = mix(F[o + n], GOLD[n], k);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-kintsugi","type":"code","name":"kintsugi","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kintsugi\n// Family:  pottery\n// Idea:    A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after kintsugi, the Japanese mending of broken ware with urushi lacquer and powdered gold\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1\n//\n// Knob 1: Glaze. Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on.\n// Knob 2: Speed. At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower.\n// Knob 3: Mends. How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze.\n// Knob 4: Lamp. Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it.\n// Buttons: K1 tap breaks the bowl now, while it stands whole.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The bowl turned about x = CX, its foot on the cloth at FB, HT tall with a\n// rim RT across, seen a little from above: a circle r across shows E * r tall.\n// Its picture is kept in a band of rows from BY0, BH rows tall.\nconst CX = 32, FB = 104, HT = 40, E = 0.3, RT = 28, HORIZON = 84, BY0 = 52, BH = 58, NB = 64 * BH;\nconst R = (h) => (h \u003c 4 ? 11.5 : 13.6 + 14.4 * sin((min(1, (h - 4) / (HT - 4)) * PI) / 2) ** 0.75);\n\n// Each glaze and the colour it pools to, from celadon to raku black.\nconst GLAZE = [\n  [[112, 184, 150], [62, 134, 128]],\n  [[238, 230, 214], [238, 150, 96]],\n  [[240, 120, 44], [150, 60, 26]],\n  [[46, 42, 42], [92, 74, 62]],\n];\nconst CLAY = [206, 158, 116], BODY = [232, 212, 178], URUSHI = [184, 44, 30], GOLD = [255, 206, 86], OLDG = [236, 160, 64], GLINT = [255, 246, 216], SHEEN = [255, 238, 210];\nconst WALL = [92, 74, 56], WOOD = [104, 66, 40], CLOTH = [46, 62, 132];\n// Rest, crack, open, gild, close and shine, in seconds at Speed 2.\nconst DUR = [5, 0.45, 1.3, 2.4, 1.5, 1.2];\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, tau: 0, wd: 2.4, count: 0, mends: 2, glaze: 0, gs: 0, PX: 33, LX: 33, LY: 29, fade: 1, flare: 0,\n    mat: new Uint8Array(NB), nrm: F32(NB * 3), ao: F32(NB), mot: F32(NB), jit: F32(NB), sid: new Int32Array(NB), fid: new Int32Array(NB), off: new Uint8Array(16),\n    col: F32(NB * 3), f: F32(N * 3), bg: F32(N * 3), dust: [],\n  });\n  geometry(P);\n  // The breaks the bowl has already been through, oldest first.\n  for (let k = 0; k \u003c 8; k++) seams(P, crack(P, 4 + floor(rnd() * 3)), 1 + floor(rnd() * 3));\n  brk(P);\n  backdrop(P);\n  swing(P);\n}\n\n// Where each LED of the bowl's picture sits on it: outer wall, inside, lip or\n// foot, which way it faces, how much the bowl shades it, and the glaze's pooling.\nfunction geometry(P) {\n  const { mat, nrm, ao, mot, jit } = P;\n  for (let b = 0; b \u003c NB; b++) {\n    const x = b & 63, y = (b >> 6) + BY0, px = x + 0.5 - CX, h0 = FB - y - 0.5;\n    let h = h0, r = 0, u = 9, c = 0, n = null, m = 0, a = 1;\n    for (let it = 0; it \u003c 4; it++) {\n      r = R(h);\n      u = px / r;\n      c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n      h = h0 + E * r * c;\n    }\n    r = R(h);\n    u = px / r;\n    if (h >= 0 && h \u003c= HT && u * u \u003c 1) {\n      c = sqrt(1 - u * u);\n      const dR = (R(h + 0.6) - R(h - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = h \u003c 4 ? 4 : h > HT - 1.1 ? 3 : 1;\n      n = m === 3 ? [u * 0.5, 0.8, 0.35] : [u * nl, -dR * nl, c * nl];\n      a = m === 4 ? 0.8 : 1;\n    } else {\n      const ex = px / RT, ey = (y + 0.5 - (FB - HT)) / (E * RT), e2 = ex * ex + ey * ey;\n      if (e2 >= 1) continue;\n      // Inside: the far wall seen over the rim, darker the deeper it goes.\n      let hb = HT;\n      for (let it = 0; it \u003c 4; it++) {\n        r = R(hb);\n        u = cl(px / r, -1, 1);\n        c = sqrt(1 - u * u);\n        hb = cl(h0 - E * r * c, 4, HT);\n      }\n      const dR = (R(hb + 0.6) - R(hb - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = e2 > 0.84 && ey \u003c 0.2 ? 3 : 2;\n      n = m === 3 ? [ex * 0.5, 0.8, 0.35] : [-u * nl, dR * nl, c * nl];\n      a = m === 3 ? 1 : (0.3 + 0.7 * ((hb - 4) / (HT - 4)) ** 0.6) * (1 - 0.35 * sm(0.2, 0.95, ey));\n    }\n    mat[b] = m;\n    nrm.set(n, b * 3);\n    ao[b] = a;\n    mot[b] = sm(0.3, 0.85, 0.75 * vn(x / 4.5, y / 3.5) + 0.25 * hash(x, y + 999)) * (m === 2 ? 1 : 0.8);\n    jit[b] = (hash(x + 77, y) - 0.5) * 0.6;\n  }\n}\n\n// A break: the bowl's picture split into n shards with ragged edges, taller\n// than wide, like cracks that run down from the rim.\nfunction crack(P, n) {\n  const S = [], reg = new Uint8Array(NB), ox = rnd() * 400, oy = rnd() * 400;\n  while (S.length \u003c n) {\n    const b = floor(rnd() * NB);\n    if (P.mat[b]) S.push([(b & 63) + 0.5, (b >> 6) + 0.5]);\n  }\n  for (let b = 0; b \u003c NB; b++) {\n    if (!P.mat[b]) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + 0.5;\n    const wx = x + 5 * (vn(x / 7 + ox, y / 7 + oy) - 0.5) + 1.6 * (vn(x / 2 + oy, y / 2) - 0.5);\n    const wy = y + 5 * (vn(x / 7 + oy, y / 7 + ox + 50) - 0.5) + 1.6 * (vn(x / 2, y / 2 + ox) - 0.5);\n    let best = 1e9;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = wx - S[i][0], dy = (wy - S[i][1]) * 0.75, dd = dx * dx + dy * dy;\n      if (dd \u003c best) (best = dd), (reg[b] = i + 1);\n    }\n  }\n  // Most breaks also knock a chip out of the rim, and the gold fills it.\n  if (rnd() \u003c 0.8) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 3);\n    const r = 2.4 + rnd() * 1.8, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) if (reg[b] && ((b & 63) - cx) ** 2 + ((b >> 6) - cy) ** 2 \u003c r * r) reg[b] = 255;\n  }\n  // Some lose a shard for good, and a piece of another bowl is set in its\n  // place (yobitsugi).\n  if (rnd() \u003c 0.55) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 1 && P.mat[c] !== 2);\n    const r = 4.5 + rnd() * 2.5, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) {\n      const x = b & 63, y = b >> 6, dx = x - cx, dy = (y - cy) * 1.25;\n      if (reg[b] && reg[b] \u003c 255 && dx * dx + dy * dy \u003c (r * (0.75 + 0.5 * vn(x / 3 + ox, y / 3))) ** 2) reg[b] = 254;\n    }\n  }\n  return reg;\n}\n// One side of a crack (for the seam it leaves) or both (for the edges it opens).\nfunction edge(reg, b, both) {\n  const r = reg[b], x = b & 63;\n  if (!r) return false;\n  for (const nb of [x \u003c 63 ? b + 1 : -1, x > 0 ? b - 1 : -1, b + 64 \u003c NB ? b + 64 : -1, b - 64]) {\n    if (nb \u003c 0 || !reg[nb] || reg[nb] === r) continue;\n    if (both || reg[nb] > r) return true;\n  }\n  return false;\n}\n// A closed break becomes the newest seam, with its gold chip and the piece\n// from another bowl, glazed off glazes along.\nfunction seams(P, reg, off) {\n  const id = ++P.count;\n  P.off[id & 15] = off;\n  for (let b = 0; b \u003c NB; b++) {\n    if (reg[b] === 254) P.fid[b] = id;\n    if (reg[b] === 255 || edge(reg, b, 0)) P.sid[b] = id;\n  }\n}\n\n// The next break: its shards, which way each one drifts and turns, the\n// crack's run from where it is struck, and the order the gold goes round.\nfunction brk(P) {\n  const n = 4 + floor(rnd() * 3), reg = crack(P, n), S = [];\n  for (let i = 0; i \u003c n; i++) S.push({ cx: 0, cy: 0, c: 0, rad: 0, e: [] });\n  for (let b = 0; b \u003c NB; b++)\n    if (reg[b] && reg[b] \u003c 254) {\n      const s = S[reg[b] - 1];\n      (s.cx += (b & 63) + 0.5), (s.cy += (b >> 6) + BY0 + 0.5), s.c++;\n    }\n  for (const s of S) {\n    if (!s.c) continue;\n    (s.cx /= s.c), (s.cy /= s.c);\n    const dx = s.cx - CX, sg = dx \u003c 0 ? -1 : 1;\n    Object.assign(s, { tx: dx * 0.28 + sg * (1.5 + rnd() * 1.5), ty: (s.cy - 80) * 0.16 + 1 + rnd(), rot: (rnd() - 0.5) * 0.5, p: rnd() * TAU, o: rnd() });\n  }\n  const cb = new Uint8Array(NB), ce = new Uint8Array(NB), ga = F32(NB), cd = F32(NB);\n  let ib;\n  do ib = floor(rnd() * NB);\n  while (P.mat[ib] !== 1);\n  let md = 1;\n  for (let b = 0; b \u003c NB; b++) {\n    if (!reg[b] || reg[b] > 253) continue;\n    const s = S[reg[b] - 1], x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5;\n    const dx = s.cx - x, dy = s.cy - y;\n    s.rad = max(s.rad, sqrt(dx * dx + dy * dy) + 1.5);\n    if (edge(reg, b, 1)) (ce[b] = 1), s.e.push(b), (ga[b] = (atan2(dy, dx) / TAU + 0.5 + s.o) % 1);\n    if (edge(reg, b, 0)) (cb[b] = 1), (md = max(md, (cd[b] = sqrt((x - (ib & 63)) ** 2 + (y - (ib >> 6) - BY0) ** 2))));\n  }\n  for (let b = 0; b \u003c NB; b++) cd[b] /= md;\n  Object.assign(P, { reg, S, cb, ce, ga, cd, noff: 1 + floor(rnd() * 3), ix: (ib & 63) + 0.5, iy: (ib >> 6) + BY0 + 0.5 });\n}\n\n// The plaster wall with straw in it, the beam the lantern hangs from, and the\n// folded indigo cloth, before the lantern lights them.\nfunction backdrop(P) {\n  const B = P.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, q = hash(x, y);\n      let col, f;\n      if (y \u003c 3) (col = WOOD), (f = (y === 2 ? 0.55 : 0.9) * (0.85 + 0.15 * vn(x / 6, y)));\n      else if (y \u003c HORIZON) (col = WALL), (f = (0.86 + 0.2 * vn(x / 4, y / 4) + 0.04 * q) * (q > 0.985 ? 1.3 : 1));\n      else {\n        // Folds that run across the cloth and ease towards the front.\n        const v = 0.5 + 0.5 * sin(x * 0.11 - y * 0.17 + 2.2 * sin(y * 0.05 + x * 0.04)) * sin(x * 0.07 + y * 0.05 + 1);\n        (col = CLOTH), (f = (0.6 + 0.5 * v ** 1.4) * (0.94 + 0.06 * ((x + y) & 1)) * (y === HORIZON ? 1.35 : 1));\n      }\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f;\n    }\n}\n\nfunction swing(P) {\n  const w = (TAU / 6.5) * P.tau, a = 0.42 * sin(w) + 0.07 * sin(2.3 * w + 1);\n  P.LX = P.PX + 26 * sin(a);\n  P.LY = 3 + 26 * cos(a);\n}\n\nfunction go(P, ph) {\n  if (ph === 5) seams(P, P.reg, P.noff), brk(P);\n  if (ph === 0) P.wd = DUR[0];\n  P.ph = ph;\n  P.pt = 0;\n}\n\n// Where a shard is now: turned by th about its middle and moved by tx, ty.\nfunction place(P, s) {\n  const ph = P.ph, p = P.pt / DUR[ph], e = ph === 2 ? 1 - (1 - p) ** 3 : ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1, p) : 0;\n  const th = (s.rot + 0.05 * sin(P.tau * 1.1 + s.p)) * e;\n  return [cos(th), sin(th), s.cx + (s.tx + 0.8 * sin(P.tau * 1.7 + s.p)) * e, s.cy + (s.ty + 0.6 * cos(P.tau * 1.3 + s.p)) * e];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.glaze = cl(k[0], 0, 1);\n  P.mends = round(cl(k[2], 2, 8));\n  P.PX = 32 + 14 * cl(k[3], -1, 1);\n  P.tau += d;\n  if (input.btnPressed && input.btnPressed[0] && (P.ph === 0 || P.ph === 5)) go(P, 1);\n  if ((P.pt += d) >= (P.ph ? DUR[P.ph] : P.wd)) go(P, (P.ph + 1) % 6);\n  const p = P.pt / DUR[P.ph];\n  P.fade = P.ph === 3 ? 1 - sm(0.2, 1, p) : P.ph === 4 ? 0 : 1;\n  P.flare = P.ph === 5 ? 1 - p : 0;\n  swing(P);\n\n  // Gold powder dusted on the lacquer falls past the shards to the cloth.\n  if (P.ph === 3 && p > 0.3 && rnd() \u003c d * 16) {\n    const s = P.S[floor(rnd() * P.S.length)];\n    if (s.e.length) {\n      const b = s.e[floor(rnd() * s.e.length)], [co, si, tx, ty] = place(P, s), qx = (b & 63) + 0.5 - s.cx, qy = (b >> 6) + BY0 + 0.5 - s.cy;\n      P.dust.push([co * qx - si * qy + tx, si * qx + co * qy + ty, 0, FB + 5 + rnd() * 19, 1, rnd() * TAU]);\n    }\n  }\n  P.dust = P.dust.filter((q) => {\n    if (q[1] \u003c q[3]) (q[2] += 40 * d), (q[1] = min(q[3], q[1] + q[2] * d));\n    else q[4] -= d / 10;\n    return q[4] > 0;\n  });\n  if (P.dust.length > 90) P.dust.shift();\n}\n\n// The bowl's colours for this moment: glaze lit by the lantern, the seams of\n// the mends it carries, and the crack, the bare clay, the lacquer and the\n// gold of the break under way.\nfunction shade(P) {\n  // The bowl's glaze and the three others, round the ring of four.\n  const G = [0, 1, 2, 3].map((k) => {\n    const g = P.glaze * 3 + k, i = floor(g) % 4, f = g - floor(g);\n    return [0, 1].map((j) => GLAZE[i][j].map((v, n) => mix(v, GLAZE[(i + 1) % 4][j][n], f)));\n  });\n  const { mat, nrm, ao, mot, jit, sid, fid, col, LX, LY, ph, count, fade, flare } = P, lo = count - P.mends, p = P.pt / (ph ? DUR[ph] : P.wd);\n  const lac = ph === 3 ? sm(0, 0.5, p) * 1.05 : ph === 4 ? 2 : 0, gil = ph === 3 ? sm(0.3, 1, p) * 1.05 : ph === 4 ? 2 : 0, open = ph >= 2 && ph \u003c= 4;\n  const vis = (id) => (id > lo ? (id === lo + 1 ? fade : 1) : 0);\n  let gs = 0, r = 0, gg = 0, bb = 0, kg = 0, gl = 0;\n  const gold = (a, age, fl) => {\n    const t = min(1, age / 8);\n    gs += a * fl * (kg + gl);\n    r = mix(r, (mix(GOLD[0], OLDG[0], t) * kg + GLINT[0] * gl) * fl, a);\n    gg = mix(gg, (mix(GOLD[1], OLDG[1], t) * kg + GLINT[1] * gl) * fl, a);\n    bb = mix(bb, (mix(GOLD[2], OLDG[2], t) * kg + GLINT[2] * gl) * fl, a);\n  };\n  const flat = (c, k) => ((r = c[0] * k), (gg = c[1] * k), (bb = c[2] * k));\n  for (let b = 0; b \u003c NB; b++) {\n    const m = mat[b];\n    if (!m) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5, o = b * 3, nx = nrm[o], ny = nrm[o + 1], nz = nrm[o + 2];\n    let lx = LX - x, ly = y - LY, lz = 24;\n    const dd = lx * lx + ly * ly + lz * lz, il = 1 / sqrt(dd), fall = 0.55 + 0.6 * exp(-dd / 5000);\n    (lx *= il), (ly *= il), (lz *= il);\n    const hz = lz + 1, hl = 1 / sqrt(lx * lx + ly * ly + hz * hz), dif = max(0, nx * lx + ny * ly + nz * lz) * fall;\n    kg = 0.62 + 0.55 * dif;\n    gl = min(1.1, 1.7 * fall * max(0, ((nx + jit[b]) * lx + ny * ly + nz * hz) * hl) ** 30);\n    if (m === 4) flat(CLAY, (0.16 + 0.8 * dif) * ao[b]);\n    else {\n      // Glaze, or the piece of another bowl set into it.\n      const t = mot[b], fi = fid[b], nw = ph === 4 && P.reg[b] === 254, gk = nw ? P.noff : fi > lo ? P.off[fi & 15] : 0, ga = !nw && fi === lo + 1 ? fade : 1;\n      const k = (0.2 + 0.3 * max(0, -ny) + 0.95 * dif) * ao[b] * (m === 3 ? 1.15 : 1), sh = 0.6 * fall * max(0, (nx * lx + ny * ly + nz * hz) * hl) ** 24;\n      const A = G[0], B = G[gk];\n      r = mix(mix(A[0][0], A[1][0], t), mix(B[0][0], B[1][0], t), ga) * k + SHEEN[0] * sh;\n      gg = mix(mix(A[0][1], A[1][1], t), mix(B[0][1], B[1][1], t), ga) * k + SHEEN[1] * sh;\n      bb = mix(mix(A[0][2], A[1][2], t), mix(B[0][2], B[1][2], t), ga) * k + SHEEN[2] * sh;\n    }\n    const id = sid[b], a = vis(id);\n    if (open && P.ce[b]) {\n      // An opened edge: bare clay, then red lacquer, then gold.\n      const q = P.ga[b];\n      if (q \u003c gil) gold(1, 0, 1.15);\n      else if (q \u003c lac) flat(URUSHI, 0.5 + 0.6 * dif);\n      else flat(BODY, 0.45 + 0.7 * dif);\n    } else if (a > 0) gold(a, count - id, id === count ? 1 + 0.6 * flare : 1);\n    else if (flare > 0) {\n      // Fresh gold glows a little past the line it fills.\n      for (let j = 0; j \u003c 4; j++) {\n        const nb = b + (j === 0 ? 1 : j === 1 ? -1 : j === 2 ? 64 : -64);\n        if (nb >= 0 && nb \u003c NB && sid[nb] === count) {\n          gold(0.6 * flare, 0, 1);\n          break;\n        }\n      }\n    }\n    if (ph === 1 && P.cb[b] && P.cd[b] \u003c p * 1.6) (r *= 0.12), (gg *= 0.12), (bb *= 0.12);\n    (col[o] = r), (col[o + 1] = gg), (col[o + 2] = bb);\n  }\n  P.gs = gs;\n}\n\n// The wall and cloth lit by the lantern, the bowl's shadow thrown away from\n// it, and the warm light its gold throws down on the cloth.\nfunction back(P, F) {\n  const { LX, LY, bg } = P, sx = CX - (LX - CX) * 0.45, gx = CX + (LX - CX) * 0.3, gk = min(1.6, P.gs / 700);\n  // The glows fall off as a column term times a row term.\n  const X = [], Y = [];\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - LX) ** 2;\n    X.push([exp(-dx / 380), exp(-dx / 1400), exp(-dx / 1500), gk * exp(-((x + 0.5 - gx) ** 2) / 600)]);\n  }\n  for (let y = 0; y \u003c H; y++) Y.push([1.2 * exp(-((y + 0.5 - LY) ** 2) / 380), 0.3 * exp(-((y - LY) ** 2) / 4000), 0.9 * exp(-((y - 118) ** 2) / 700), exp(-((y - 111) ** 2) / 160)]);\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const [a, b, c, d] = Y[y], ey = (y + 0.5 - FB - 3) / 7;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const C = X[x];\n      if (y \u003c HORIZON) {\n        const k = 0.3 + a * C[0] + b * C[1];\n        (F[o] = bg[o] * k), (F[o + 1] = bg[o + 1] * k), (F[o + 2] = bg[o + 2] * k);\n        continue;\n      }\n      const ex = (x + 0.5 - sx) / 31, g = d * C[3] * (bg[o + 2] / CLOTH[2]);\n      let k = 0.42 + c * C[2];\n      if (ey * ey \u003c 1.4 && ex * ex \u003c 1.4) k *= 1 - 0.72 * sm(1.15, 0.55, sqrt(ex * ex + ey * ey));\n      k *= 1 + 0.7 * g;\n      (F[o] = bg[o] * k + 96 * g), (F[o + 1] = bg[o + 1] * k + 74 * g), (F[o + 2] = bg[o + 2] * k + 16 * g);\n    }\n  }\n}\n\nconst put = (F, x, y, c, k) => {\n  if ((x = floor(x)) >= 0 && x \u003c W && (y = floor(y)) >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// The paper lantern on its cord: ribs across the lit paper, black lacquer caps.\nfunction lantern(P, F) {\n  const { LX, LY, PX } = P;\n  for (let t = 0; t \u003c 1; t += 0.04) put(F, mix(PX, LX, t), mix(3, LY - 10, t), [70, 58, 46], 1);\n  for (let yy = -10; yy \u003c= 10; yy++) {\n    const y = round(LY) + yy, cap = yy \u003c= -9 || yy >= 9, w = cap ? 3.6 : 6.3 * sqrt(max(0, 1 - (yy / 9.6) ** 2)) + 0.4;\n    for (let x = floor(LX - w); x \u003c= LX + w; x++) {\n      const dx = x + 0.5 - LX, cov = cl(w - Math.abs(dx) + 0.5, 0, 1);\n      if (y \u003c 0 || x \u003c 0 || x >= W || !cov) continue;\n      const o = (y * W + x) * 3, q = dx / w, gl = 1 - q * q, rib = (yy + 9) % 3 ? 1 : 0.7;\n      for (let n = 0; n \u003c 3; n++) {\n        const c = cap ? [38, 30, 26][n] * (1.2 - 0.4 * q) : mix([236, 118, 44][n], [255, 226, 160][n], gl * (1 - (yy / 10) ** 2)) * rib;\n        F[o + n] = mix(F[o + n], c, cov);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.mat) return;\n  const F = P.f, { col, mat, ph } = P;\n  shade(P);\n  back(P, F);\n  lantern(P, F);\n  if (ph >= 2 && ph \u003c= 4) {\n    // Each shard drawn where it has drifted, read back through its turn.\n    for (let i = 0; i \u003c P.S.length; i++) {\n      const s = P.S[i];\n      if (!s.c) continue;\n      const [co, si, tx, ty] = place(P, s);\n      for (let y = max(0, floor(ty - s.rad)); y \u003c= min(H - 1, ty + s.rad); y++)\n        for (let x = max(0, floor(tx - s.rad)); x \u003c= min(W - 1, tx + s.rad); x++) {\n          const dx = x + 0.5 - tx, dy = y + 0.5 - ty, bx = floor(co * dx + si * dy + s.cx), by = floor(-si * dx + co * dy + s.cy) - BY0;\n          if (bx \u003c 0 || bx > 63 || by \u003c 0 || by >= BH) continue;\n          const b = by * 64 + bx, o = (y * W + x) * 3;\n          if (P.reg[b] === i + 1) (F[o] = col[b * 3]), (F[o + 1] = col[b * 3 + 1]), (F[o + 2] = col[b * 3 + 2]);\n        }\n    }\n    // The lost chip comes back as gold, and the lost shard as a piece of\n    // another bowl, as the shards close.\n    const a = ph === 4 ? sm(0.4, 1, P.pt / DUR[4]) : 0;\n    if (a) for (let b = 0, o = BY0 * W * 3; b \u003c NB; b++, o += 3) if (P.reg[b] > 253) for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], col[b * 3 + n], a);\n  } else for (let b = 0; b \u003c NB; b++) if (mat[b]) F.set(col.subarray(b * 3, b * 3 + 3), (BY0 * W + b) * 3);\n  // The ring of the strike.\n  if (ph === 1) {\n    const p = P.pt / DUR[1];\n    for (let y = -7; y \u003c= 7; y++)\n      for (let x = -7; x \u003c= 7; x++) {\n        const k = (1 - p) * exp(-(x * x + y * y) / (2 + 10 * p)), xx = floor(P.ix + x), yy = floor(P.iy + y);\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let n = 0, o = (yy * W + xx) * 3; n \u003c 3; n++) F[o + n] += 255 * k;\n      }\n  }\n  for (const q of P.dust) {\n    const x = floor(q[0]), y = floor(q[1]), k = q[1] \u003c q[3] ? 0.9 : q[4] * (0.25 + 0.75 * max(0, sin(q[5] + P.tau * 4)) ** 3);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = mix(F[o + n], GOLD[n], k);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glaze","min":0,"max":1,"about":"Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower."},{"name":"Mends","min":2,"max":8,"about":"How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze."},{"name":"Lamp","min":-1,"max":1,"about":"Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it."}],"start":[0,2,2,0.06],"measures":{"motion":0.1906,"detail":0.0509,"edges":0.2812,"complexity":2.0844,"coverage":0.9972,"colour":0.1903,"drift":0.136},"knobResponse":[0.0565,0.1068,0.0529,0.1171]},{"slug":"kolakoski","title":"Kolakoski","family":"number","round":35,"note":"제 런 길이 부호와 같은 1 과 2 의 수열이 열 단의 고드름으로 매달려요. 맨 아래 단은 3,000번 항부터 64항이 LED 하나씩 금색 1 과 보라 2 로 서고, 그 위 단마다 아래 단의 런을 만든 항이 런 너비로 앉아 같은 수열이 단마다 3분의 2 로 줄며 왼쪽으로 한 항씩 흘러요. K3 은 단을 16 까지 늘리고, K1 을 누르면 창이 10만 항 뒤로 건너뛰어 맨 위 눈금이 1 이 4 개 앞선 자리에서 2 가 46 개 앞선 자리로 옮겨요.","idea":"The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.","buttons":"K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.","code":"// ===== Patternflow pattern =====\n// Title:   Kolakoski\n// Family:  number\n// Idea:    The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kolakoski sequence (William Kolakoski, 1965), pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1\n//\n// Knob 1: Hue. Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot.\n// Knob 2: Speed. Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s.\n// Knob 3: Bands. How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel.\n// Knob 4: Falloff. Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round.\n// Buttons: K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.\n\n// Term i of the sequence is the length of run i: 1, 2, 2, 1, 1, 2, 1 is a\n// run of one 1, one of two 2s, two 1s, one 2, one 1, ... and the runs\n// alternate 1s and 2s. So term k has K[k] children, the terms of run k,\n// and up[j] is the run that term j sits in: its parent. Term 0 and term 1\n// are their own parents, and every other term climbs to term 1, from term\n// 3,000 in 19 steps, from term 100,000 in 27.\n//\n// Rufus Oldenburger described it first in 1939; Kolakoski asked about it in\n// the American Mathematical Monthly in 1965. Keane's question, whether the\n// share of 1s tends to 1/2, is still open. Counted here: 49,972 1s in the\n// first 100,000 terms, 499,986 in the first million, and the 1s never run\n// more than 66 ahead of the 2s or behind them in all that way.\n\nconst W = 64, H = 128, N = 1 \u003c\u003c 20, W0 = 3000, JUMP = 100000, TOP = 3;\nconst { floor, max, round, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  // 2^20 terms, written by reading the sequence itself two terms behind the\n  // pen: 28 ms.\n  const K = new Uint8Array(N);\n  K[0] = 1;\n  K[1] = 2;\n  K[2] = 2;\n  for (let len = 3, read = 2, val = 1; len \u003c N; val = 3 - val)\n    for (let c = 0, r = K[read++]; c \u003c r && len \u003c N; c++) K[len++] = val;\n  const up = new Int32Array(N), ones = new Int32Array(N + 1);\n  for (let k = 0, pos = 0; pos \u003c N; k++) for (let c = 0; c \u003c K[k] && pos \u003c N; c++) up[pos++] = k;\n  for (let i = 0; i \u003c N; i++) ones[i + 1] = ones[i] + (K[i] === 1 ? 1 : 0);\n  params.s = {\n    K, up, ones, w: W0, acc: 0, hue: 0, speed: 2, bands: 10, fall: 0.06,\n    pal: new Float32Array(12), palHue: NaN, anc: new Int32Array(16 * W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.bands = round(cl(k[2], 10, 16));\n  P.fall = cl(k[3], -1, 1);\n  // Whole terms only: a window between two terms would smear every band.\n  P.acc += d * P.speed * 1.5;\n  while (P.acc >= 1) (P.acc -= 1), P.w++;\n  if (input.btnPressed && input.btnPressed[0]) P.w += JUMP;\n  if (P.w + W >= N) P.w = W0 + ((P.w - W0) % (N - W - W0));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { K, up, anc, pal } = P;\n  if (P.palHue !== P.hue) {\n    // Pale and full gold for the 1s, pale and deep violet for the 2s: each\n    // band runs from the first at its top row to the second at its foot.\n    // The gold keeps its brightness all the way down, as a darker gold\n    // reads olive, and where the knob turns the violet to red, orange or\n    // yellow it is lifted the same way.\n    const h2 = P.hue + 0.72 - floor(P.hue + 0.72), hw = h2 > 0.9 ? h2 - 1 : h2, warm = cl((hw + 0.06) / 0.08, 0, 1) * cl((0.32 - hw) / 0.08, 0, 1);\n    hsv(P.hue + 0.11, 0.28, 1, pal, 0);\n    hsv(P.hue + 0.11, 0.7, 1, pal, 3);\n    hsv(h2, 0.38, 0.8 + 0.15 * warm, pal, 6);\n    hsv(h2, 0.7, 0.56 + 0.36 * warm, pal, 9);\n    P.palHue = P.hue;\n  }\n  // anc[b W + x] is the ancestor b generations up of the term under column\n  // x. A band's term boundaries fall where this changes, so each term is\n  // exactly as wide as its descendants in the window.\n  const B = P.bands;\n  for (let x = 0; x \u003c W; x++)\n    for (let b = 0, j = P.w + x; b \u003c B; b++, j = up[j]) anc[b * W + x] = j;\n  // Band heights grow by `ratio` a band going up, with a dark row between\n  // bands; the top band takes what rounding leaves.\n  const avail = H - TOP - (B - 1), ratio = pow(1.3, P.fall);\n  let sum = 0;\n  for (let b = 0; b \u003c B; b++) sum += pow(ratio, b);\n  for (let b = 0, y = H; b \u003c B; b++) {\n    const hgt = b === B - 1 ? y - TOP : max(3, round((avail * pow(ratio, b)) / sum)), y0 = y - hgt, row = b * W;\n    for (let x = 0; x \u003c W; x++) {\n      const a = anc[row + x], v = K[a], o = (v - 1) * 6;\n      // Neighbours of different value part by colour. Two of the same, the\n      // two terms of one run, get a dark seam on the first column of the\n      // right one when it is two LEDs or more; two 1-LED terms run together\n      // and the band above tells them apart.\n      let g = 255;\n      if (x > 0 && anc[row + x - 1] !== a && K[anc[row + x - 1]] === v && x + 1 \u003c W && anc[row + x + 1] === a) g = 40;\n      for (let yy = y0; yy \u003c y; yy++) {\n        const t = hgt > 1 ? (yy - y0) / (hgt - 1) : 1, u = 1 - t;\n        display.setPixel(x, yy, (pal[o] * u + pal[o + 3] * t) * g, (pal[o + 1] * u + pal[o + 4] * t) * g, (pal[o + 2] * u + pal[o + 5] * t) * g);\n      }\n    }\n    if (y0 - 1 >= TOP) for (let x = 0; x \u003c W; x++) display.setPixel(x, y0 - 1, 0, 0, 0);\n    y = y0 - 1;\n  }\n  // The gauge: 1s minus 2s among the first w + 64 terms, half an LED a\n  // term from the middle, toward the gold side when the 1s are ahead. The\n  // track is dim violet on the left, dim gold on the right.\n  const n = P.w + W, lead = 2 * P.ones[n] - n, mx = cl(32 + round(lead / 2), 0, W - 1);\n  for (let x = 0; x \u003c W; x++) {\n    const o = x \u003c 32 ? 9 : 3, g = x === 32 ? 0 : 70;\n    for (let yy = 0; yy \u003c 2; yy++) {\n      if (x === mx) display.setPixel(x, yy, 255, 255, 255);\n      else if (g === 0) display.setPixel(x, yy, 110, 110, 110);\n      else display.setPixel(x, yy, pal[o] * g, pal[o + 1] * g, pal[o + 2] * g);\n    }\n    display.setPixel(x, 2, 0, 0, 0);\n  }\n}\n","layer":{"id":"layer-kolakoski","type":"code","name":"kolakoski","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kolakoski\n// Family:  number\n// Idea:    The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kolakoski sequence (William Kolakoski, 1965), pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1\n//\n// Knob 1: Hue. Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot.\n// Knob 2: Speed. Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s.\n// Knob 3: Bands. How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel.\n// Knob 4: Falloff. Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round.\n// Buttons: K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.\n\n// Term i of the sequence is the length of run i: 1, 2, 2, 1, 1, 2, 1 is a\n// run of one 1, one of two 2s, two 1s, one 2, one 1, ... and the runs\n// alternate 1s and 2s. So term k has K[k] children, the terms of run k,\n// and up[j] is the run that term j sits in: its parent. Term 0 and term 1\n// are their own parents, and every other term climbs to term 1, from term\n// 3,000 in 19 steps, from term 100,000 in 27.\n//\n// Rufus Oldenburger described it first in 1939; Kolakoski asked about it in\n// the American Mathematical Monthly in 1965. Keane's question, whether the\n// share of 1s tends to 1/2, is still open. Counted here: 49,972 1s in the\n// first 100,000 terms, 499,986 in the first million, and the 1s never run\n// more than 66 ahead of the 2s or behind them in all that way.\n\nconst W = 64, H = 128, N = 1 \u003c\u003c 20, W0 = 3000, JUMP = 100000, TOP = 3;\nconst { floor, max, round, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  // 2^20 terms, written by reading the sequence itself two terms behind the\n  // pen: 28 ms.\n  const K = new Uint8Array(N);\n  K[0] = 1;\n  K[1] = 2;\n  K[2] = 2;\n  for (let len = 3, read = 2, val = 1; len \u003c N; val = 3 - val)\n    for (let c = 0, r = K[read++]; c \u003c r && len \u003c N; c++) K[len++] = val;\n  const up = new Int32Array(N), ones = new Int32Array(N + 1);\n  for (let k = 0, pos = 0; pos \u003c N; k++) for (let c = 0; c \u003c K[k] && pos \u003c N; c++) up[pos++] = k;\n  for (let i = 0; i \u003c N; i++) ones[i + 1] = ones[i] + (K[i] === 1 ? 1 : 0);\n  params.s = {\n    K, up, ones, w: W0, acc: 0, hue: 0, speed: 2, bands: 10, fall: 0.06,\n    pal: new Float32Array(12), palHue: NaN, anc: new Int32Array(16 * W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.bands = round(cl(k[2], 10, 16));\n  P.fall = cl(k[3], -1, 1);\n  // Whole terms only: a window between two terms would smear every band.\n  P.acc += d * P.speed * 1.5;\n  while (P.acc >= 1) (P.acc -= 1), P.w++;\n  if (input.btnPressed && input.btnPressed[0]) P.w += JUMP;\n  if (P.w + W >= N) P.w = W0 + ((P.w - W0) % (N - W - W0));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { K, up, anc, pal } = P;\n  if (P.palHue !== P.hue) {\n    // Pale and full gold for the 1s, pale and deep violet for the 2s: each\n    // band runs from the first at its top row to the second at its foot.\n    // The gold keeps its brightness all the way down, as a darker gold\n    // reads olive, and where the knob turns the violet to red, orange or\n    // yellow it is lifted the same way.\n    const h2 = P.hue + 0.72 - floor(P.hue + 0.72), hw = h2 > 0.9 ? h2 - 1 : h2, warm = cl((hw + 0.06) / 0.08, 0, 1) * cl((0.32 - hw) / 0.08, 0, 1);\n    hsv(P.hue + 0.11, 0.28, 1, pal, 0);\n    hsv(P.hue + 0.11, 0.7, 1, pal, 3);\n    hsv(h2, 0.38, 0.8 + 0.15 * warm, pal, 6);\n    hsv(h2, 0.7, 0.56 + 0.36 * warm, pal, 9);\n    P.palHue = P.hue;\n  }\n  // anc[b W + x] is the ancestor b generations up of the term under column\n  // x. A band's term boundaries fall where this changes, so each term is\n  // exactly as wide as its descendants in the window.\n  const B = P.bands;\n  for (let x = 0; x \u003c W; x++)\n    for (let b = 0, j = P.w + x; b \u003c B; b++, j = up[j]) anc[b * W + x] = j;\n  // Band heights grow by `ratio` a band going up, with a dark row between\n  // bands; the top band takes what rounding leaves.\n  const avail = H - TOP - (B - 1), ratio = pow(1.3, P.fall);\n  let sum = 0;\n  for (let b = 0; b \u003c B; b++) sum += pow(ratio, b);\n  for (let b = 0, y = H; b \u003c B; b++) {\n    const hgt = b === B - 1 ? y - TOP : max(3, round((avail * pow(ratio, b)) / sum)), y0 = y - hgt, row = b * W;\n    for (let x = 0; x \u003c W; x++) {\n      const a = anc[row + x], v = K[a], o = (v - 1) * 6;\n      // Neighbours of different value part by colour. Two of the same, the\n      // two terms of one run, get a dark seam on the first column of the\n      // right one when it is two LEDs or more; two 1-LED terms run together\n      // and the band above tells them apart.\n      let g = 255;\n      if (x > 0 && anc[row + x - 1] !== a && K[anc[row + x - 1]] === v && x + 1 \u003c W && anc[row + x + 1] === a) g = 40;\n      for (let yy = y0; yy \u003c y; yy++) {\n        const t = hgt > 1 ? (yy - y0) / (hgt - 1) : 1, u = 1 - t;\n        display.setPixel(x, yy, (pal[o] * u + pal[o + 3] * t) * g, (pal[o + 1] * u + pal[o + 4] * t) * g, (pal[o + 2] * u + pal[o + 5] * t) * g);\n      }\n    }\n    if (y0 - 1 >= TOP) for (let x = 0; x \u003c W; x++) display.setPixel(x, y0 - 1, 0, 0, 0);\n    y = y0 - 1;\n  }\n  // The gauge: 1s minus 2s among the first w + 64 terms, half an LED a\n  // term from the middle, toward the gold side when the 1s are ahead. The\n  // track is dim violet on the left, dim gold on the right.\n  const n = P.w + W, lead = 2 * P.ones[n] - n, mx = cl(32 + round(lead / 2), 0, W - 1);\n  for (let x = 0; x \u003c W; x++) {\n    const o = x \u003c 32 ? 9 : 3, g = x === 32 ? 0 : 70;\n    for (let yy = 0; yy \u003c 2; yy++) {\n      if (x === mx) display.setPixel(x, yy, 255, 255, 255);\n      else if (g === 0) display.setPixel(x, yy, 110, 110, 110);\n      else display.setPixel(x, yy, pal[o] * g, pal[o + 1] * g, pal[o + 2] * g);\n    }\n    display.setPixel(x, 2, 0, 0, 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot."},{"name":"Speed","min":0.2,"max":3,"about":"Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s."},{"name":"Bands","min":10,"max":16,"about":"How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel."},{"name":"Falloff","min":-1,"max":1,"about":"Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round."}],"start":[0,2,10,0.06],"measures":{"motion":0.3357,"detail":0.1184,"edges":0.9202,"complexity":0.2363,"coverage":0.9144,"colour":0.3543,"drift":0.0962},"knobResponse":[0.3404,0.1812,0.286,0.2965]},{"slug":"kuramoto-sivashinsky","title":"Kuramoto-Sivashinsky","family":"noise","round":37,"note":"쿠라모토-시바신스키 방정식을 패널 폭만 한 고리에서 한 열에 격자점 하나씩 풀고, 새 순간이 맨 위로 들어와 아래로 흘러서 128줄이 시공간 그림이 돼요. u 가 양인 청록 줄기와 음인 자홍 줄기가 흔들리고 갈라지고 합쳐지며 땋이고, u 가 0을 지나는 곳은 검게 비어요. K3 은 고리 길이를 22에서 66으로 늘려 두 줄기를 일곱 줄기로 만들고, K4 의 분산 항은 혼돈을 한쪽으로 기우는 펄스 열로 가라앉혀요. 누르면 앞면이 한 군데 패여요.","idea":"The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.","buttons":"K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.","code":"// ===== Patternflow pattern =====\n// Title:   Kuramoto-Sivashinsky\n// Family:  noise\n// Idea:    The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kuramoto-Sivashinsky equation (Yoshiki Kuramoto, 1976; Gregory Sivashinsky, 1977), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1\n//\n// Knob 1: Hue. Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal.\n// Knob 2: Speed. Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s.\n// Knob 3: Length. The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge.\n// Knob 4: Dispersion. A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative.\n// Buttons: K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.\n\n// The solver is ETDRK4, the exponential time-differencing Runge-Kutta\n// scheme of Steven Cox and Paul Matthews (2002), with the coefficients\n// taken as means round a circle in the complex plane, the way Aly-Khan\n// Kassam and Lloyd Trefethen (2005) do it, so they hold for every mode from\n// the growing ones to the most damped. In Fourier space\n//   v_t = (k^2 - k^4 + i delta k^3) v - (i k / 2) FFT(u^2),\n// the linear part solved exactly and only u^2 stepped, 0.25 time units a\n// step, five steps a row, 40 FFTs of size 64 a frame at Speed 2. At 0.4\n// time units a row the streaks hardly bent in 128 rows; at 1.25 they braid.\n//\n// Checked over 10,000 time units from the same start at delta 0:\n// - The energy, the mean of u^2, stays bounded: it averages 1.41 at L 22\n//   and 1.71 at L 66, and never passes 3.13.\n// - The fastest-growing wavelength is 2 pi sqrt 2, so a ring of length L\n//   should hold about L / 8.89 cells. Counting the positive humps of u\n//   (with a 0.4 dead band) gives 2.26 at L 22 against 2.48, 3.66 at 36\n//   against 4.05, 5.34 at 50 against 5.63 and 6.89 at 66 against 7.43:\n//   always 91 to 93 percent of it.\n// - 64 grid points resolve the ring up to L 66, where the highest mode\n//   never carries more than 0.65 percent of the largest. At L 100 it\n//   reached 21 percent, so the knob stops at 66.\nconst W = 64, H = 128, N = 64, STEP = 0.25, ROW = 1.25, RATE = 15, MC = 32, PRERUN = 100;\nconst { floor, exp, cos, sin, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// A complex FFT of size 64: bit reversal, then six rounds of butterflies.\nconst BR = new Uint8Array(N), CS = new Float64Array(N / 2), SN = new Float64Array(N / 2);\nfor (let i = 0; i \u003c N; i++) {\n  let r = 0;\n  for (let b = 0, v = i; b \u003c 6; b++, v >>= 1) r = (r \u003c\u003c 1) | (v & 1);\n  BR[i] = r;\n}\nfor (let k = 0; k \u003c N / 2; k++) (CS[k] = cos((TAU * k) / N)), (SN[k] = sin((TAU * k) / N));\n\nfunction fft(re, im, sign) {\n  for (let i = 0; i \u003c N; i++) {\n    const j = BR[i];\n    if (j > i) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let size = 2; size \u003c= N; size \u003c\u003c= 1) {\n    const half = size >> 1, step = N / size;\n    for (let i = 0; i \u003c N; i += size)\n      for (let k = 0; k \u003c half; k++) {\n        const wr = CS[k * step], wi = sign * SN[k * step], a = i + k, b = a + half;\n        const tr = re[b] * wr - im[b] * wi, ti = re[b] * wi + im[b] * wr;\n        re[b] = re[a] - tr;\n        im[b] = im[a] - ti;\n        re[a] += tr;\n        im[a] += ti;\n      }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\nconst f64 = () => new Float64Array(N);\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: -1, speed: 2, L: -1, delta: NaN, acc: 0, head: 0,\n    vr: f64(), vi: f64(), g: f64(),\n    Er: f64(), Ei: f64(), E2r: f64(), E2i: f64(), Qr: f64(), Qi: f64(),\n    f1r: f64(), f1i: f64(), f2r: f64(), f2i: f64(), f3r: f64(), f3i: f64(),\n    ar: f64(), ai: f64(), br: f64(), bi: f64(), cr: f64(), ci: f64(),\n    Nvr: f64(), Nvi: f64(), Nar: f64(), Nai: f64(), Nbr: f64(), Nbi: f64(), Ncr: f64(), Nci: f64(),\n    tr: f64(), ti: f64(), u: f64(),\n    hist: new Float32Array(H * N), next: new Float32Array(N), lut: new Uint8Array(2 * 257 * 3),\n  };\n}\n\n// The ETDRK4 coefficients for ring length L and dispersion delta. Mode n\n// has wavenumber k = 2 pi n / L for n below 32 and 2 pi (n - 64) / L above;\n// the Nyquist mode, n = 32, gets the damping of its true wavenumber but no\n// share of the nonlinear term, as an odd derivative cannot be taken there.\nfunction coefficients(S) {\n  const { L, delta, g } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const kk = (TAU * (n \u003c N / 2 ? n : n - N)) / L, kn = n === N / 2 ? (TAU * (N / 2)) / L : kk;\n    g[n] = n === N / 2 ? 0 : -0.5 * kk;\n    const zr = STEP * (kn * kn - kn * kn * kn * kn), zi = n === N / 2 ? 0 : STEP * delta * kk * kk * kk;\n    let em = exp(zr);\n    S.Er[n] = em * cos(zi);\n    S.Ei[n] = em * sin(zi);\n    em = exp(zr / 2);\n    S.E2r[n] = em * cos(zi / 2);\n    S.E2i[n] = em * sin(zi / 2);\n    let qr = 0, qi = 0, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0;\n    for (let j = 0; j \u003c MC; j++) {\n      const th = (TAU * (j + 0.5)) / MC, lr = zr + cos(th), li = zi + sin(th);\n      const ex = exp(lr), er = ex * cos(li), ei = ex * sin(li);\n      const hx = exp(lr / 2), hr = hx * cos(li / 2), hi = hx * sin(li / 2);\n      const l2r = lr * lr - li * li, l2i = 2 * lr * li;\n      const l3r = l2r * lr - l2i * li, l3i = l2r * li + l2i * lr;\n      const d1 = lr * lr + li * li, d3 = l3r * l3r + l3i * l3i;\n      qr += ((hr - 1) * lr + hi * li) / d1;\n      qi += (hi * lr - (hr - 1) * li) / d1;\n      let pr = 4 - 3 * lr + l2r, pi = -3 * li + l2i;\n      let nr = -4 - lr + er * pr - ei * pi, ni = -li + er * pi + ei * pr;\n      a1 += (nr * l3r + ni * l3i) / d3;\n      b1 += (ni * l3r - nr * l3i) / d3;\n      pr = lr - 2;\n      pi = li;\n      nr = 2 + lr + er * pr - ei * pi;\n      ni = li + er * pi + ei * pr;\n      a2 += (nr * l3r + ni * l3i) / d3;\n      b2 += (ni * l3r - nr * l3i) / d3;\n      pr = 4 - lr;\n      pi = -li;\n      nr = -4 - 3 * lr - l2r + er * pr - ei * pi;\n      ni = -3 * li - l2i + er * pi + ei * pr;\n      a3 += (nr * l3r + ni * l3i) / d3;\n      b3 += (ni * l3r - nr * l3i) / d3;\n    }\n    const m = STEP / MC;\n    S.Qr[n] = qr * m;\n    S.Qi[n] = qi * m;\n    S.f1r[n] = a1 * m;\n    S.f1i[n] = b1 * m;\n    S.f2r[n] = a2 * m;\n    S.f2i[n] = b2 * m;\n    S.f3r[n] = a3 * m;\n    S.f3i[n] = b3 * m;\n  }\n}\n\n// N(v) = -(i k / 2) FFT(u^2), u the real part of the inverse FFT of v.\nfunction nonlinear(S, xr, xi, outr, outi) {\n  const { tr, ti, g } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = xr[n]), (ti[n] = xi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) {\n    const u = tr[j] / N;\n    tr[j] = u * u;\n    ti[j] = 0;\n  }\n  fft(tr, ti, -1);\n  for (let n = 0; n \u003c N; n++) {\n    outr[n] = -g[n] * ti[n];\n    outi[n] = g[n] * tr[n];\n  }\n}\n\nfunction step(S) {\n  const { vr, vi, ar, ai, br, bi, cr, ci, Nvr, Nvi, Nar, Nai, Nbr, Nbi, Ncr, Nci, E2r, E2i, Qr, Qi } = S;\n  nonlinear(S, vr, vi, Nvr, Nvi);\n  for (let n = 0; n \u003c N; n++) {\n    ar[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nvr[n] - Qi[n] * Nvi[n];\n    ai[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nvi[n] + Qi[n] * Nvr[n];\n  }\n  nonlinear(S, ar, ai, Nar, Nai);\n  for (let n = 0; n \u003c N; n++) {\n    br[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nar[n] - Qi[n] * Nai[n];\n    bi[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nai[n] + Qi[n] * Nar[n];\n  }\n  nonlinear(S, br, bi, Nbr, Nbi);\n  for (let n = 0; n \u003c N; n++) {\n    const xr = 2 * Nbr[n] - Nvr[n], xi = 2 * Nbi[n] - Nvi[n];\n    cr[n] = E2r[n] * ar[n] - E2i[n] * ai[n] + Qr[n] * xr - Qi[n] * xi;\n    ci[n] = E2r[n] * ai[n] + E2i[n] * ar[n] + Qr[n] * xi + Qi[n] * xr;\n  }\n  nonlinear(S, cr, ci, Ncr, Nci);\n  const { Er, Ei, f1r, f1i, f2r, f2i, f3r, f3i } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const sr = Nar[n] + Nbr[n], si = Nai[n] + Nbi[n];\n    const nr =\n      Er[n] * vr[n] - Ei[n] * vi[n] +\n      (Nvr[n] * f1r[n] - Nvi[n] * f1i[n]) + 2 * (sr * f2r[n] - si * f2i[n]) + (Ncr[n] * f3r[n] - Nci[n] * f3i[n]);\n    const ni =\n      Er[n] * vi[n] + Ei[n] * vr[n] +\n      (Nvr[n] * f1i[n] + Nvi[n] * f1r[n]) + 2 * (sr * f2i[n] + si * f2r[n]) + (Ncr[n] * f3i[n] + Nci[n] * f3r[n]);\n    vr[n] = nr;\n    vi[n] = ni;\n  }\n  // u is real, so v_(64-n) is the conjugate of v_n. Round-off breaks that,\n  // and the broken part is invisible to u^2, so nothing holds it down: it\n  // grew at the linear rate of modes 2 and 3, 0.19 a time unit at L = 22,\n  // and blew the run up at t = 340. Folding it back each step keeps it at 0.\n  for (let n = 1; n \u003c N / 2; n++) {\n    const a = 0.5 * (vr[n] + vr[N - n]), b = 0.5 * (vi[n] - vi[N - n]);\n    vr[n] = vr[N - n] = a;\n    vi[n] = b;\n    vi[N - n] = -b;\n  }\n  vr[0] = vi[0] = vi[N / 2] = 0;\n}\n\n// u on the 64 grid points, one per column.\nfunction physical(S, out) {\n  const { tr, ti } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = S.vr[n]), (ti[n] = S.vi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) out[j] = tr[j] / N;\n}\n\nfunction advanceRow(S) {\n  for (let s = 0, n = round(ROW / STEP); s \u003c n; s++) step(S);\n}\n\n// The row just computed goes in at the head; `next` is one row ahead of it,\n// so the top of the panel can slide between the two.\nfunction pushRow(S) {\n  S.head = (S.head + H - 1) % H;\n  S.hist.set(S.next, S.head * N);\n  advanceRow(S);\n  physical(S, S.next);\n}\n\n// u is the slope of Sivashinsky's flame front, so a dent pushed into the\n// front shows in u as a dipole, up on one side and down on the other: the\n// derivative of a Gaussian, 4 columns wide, peaks of +-amp. It has no mean.\n// A plain bump had one, and taking it off shifted the whole row by 0.78,\n// a hard line straight across the diagram.\nfunction kick(S, x0, amp) {\n  const u = S.u;\n  physical(S, u);\n  for (let j = 0; j \u003c N; j++) {\n    let d = j - x0;\n    if (d > N / 2) d -= N;\n    if (d \u003c -N / 2) d += N;\n    const q = d / 4;\n    S.tr[j] = u[j] + amp * 1.6487 * q * exp(-0.5 * q * q);\n    S.ti[j] = 0;\n  }\n  fft(S.tr, S.ti, -1);\n  for (let n = 0; n \u003c N; n++) (S.vr[n] = S.tr[n]), (S.vi[n] = S.ti[n]);\n  S.vr[0] = S.vi[0] = 0;\n}\n\nfunction start(S) {\n  // Low modes with random phases, then PRERUN time units so the first\n  // frame is already chaos, then a full panel of history.\n  for (let n = 0; n \u003c N; n++) S.vr[n] = S.vi[n] = 0;\n  for (let n = 1; n \u003c= 6; n++) {\n    const ph = random() * TAU, a = (0.3 * N) / n;\n    S.vr[n] = a * cos(ph);\n    S.vi[n] = a * sin(ph);\n    S.vr[N - n] = a * cos(ph);\n    S.vi[N - n] = -a * sin(ph);\n  }\n  for (let s = 0, n = round(PRERUN / STEP); s \u003c n; s++) step(S);\n  physical(S, S.next);\n  for (let r = 0; r \u003c H; r++) pushRow(S);\n  S.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 22, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const L = cl(k[2], 22, 66), delta = cl(k[3], -1, 1);\n  if (L !== S.L || delta !== S.delta) {\n    S.L = L;\n    S.delta = delta;\n    coefficients(S);\n  }\n  if (!S.ready) start(S);\n  if (input.btnPressed && input.btnPressed[0]) kick(S, random() * N, 4);\n  S.acc += d * S.speed * RATE;\n  // 30 rows a second at 30 frames lands on 0.9999...; a hair of slack\n  // keeps it one row a frame instead of none and then two.\n  while (S.acc >= 1 - 1e-6) {\n    S.acc = Math.max(0, S.acc - 1);\n    pushRow(S);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  const lut = S.lut;\n  if (S.lutHue !== S.hue) {\n    // Two ramps of 257 steps, positive u then negative: black at zero,\n    // rising straight to full colour at |u| = 2.64, then paling to a tint at\n    // 3.3. A straight ramp keeps the steps between neighbours soft; the\n    // first, steeper ramp put a hard step on 23 percent of them.\n    for (let side = 0; side \u003c 2; side++) {\n      const h = S.hue + (side === 0 ? 0.5 : 0.86);\n      for (let i = 0; i \u003c= 256; i++) {\n        const a = i / 256, f = cl(a / 0.8, 0, 1), w = cl((a - 0.8) / 0.2, 0, 1);\n        hsv(h + 0.05 * (f - 1), 1 - 0.55 * w, f, lut, (side * 257 + i) * 3);\n      }\n    }\n    S.lutHue = S.hue;\n  }\n  // Pulses grow with the dispersion, |u| up to 3.5 at delta 0 and 4.7 at\n  // delta 1, so the map stretches with it and the pulses do not wash out pale.\n  const { hist, next, head, acc } = S, inv = 256 / (3.3 * (1 + 0.4 * abs(S.delta)));\n  for (let y = 0; y \u003c H; y++) {\n    // Display row y is `acc` of the way from history row y - 1 to row y,\n    // where row -1 is the one computed ahead.\n    const a = y - acc, r0 = floor(a), t = a - r0;\n    const A = r0 \u003c 0 ? next : null, o0 = ((head + r0 + H) % H) * N, o1 = ((head + r0 + 1) % H) * N;\n    for (let x = 0; x \u003c W; x++) {\n      const u0 = A ? A[x] : hist[o0 + x], u1 = r0 + 1 \u003c H ? hist[o1 + x] : u0;\n      const u = u0 + (u1 - u0) * t, i = Math.min(256, round(abs(u) * inv)), o = ((u \u003c 0 ? 257 : 0) + i) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-kuramoto-sivashinsky","type":"code","name":"kuramoto-sivashinsky","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kuramoto-Sivashinsky\n// Family:  noise\n// Idea:    The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kuramoto-Sivashinsky equation (Yoshiki Kuramoto, 1976; Gregory Sivashinsky, 1977), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1\n//\n// Knob 1: Hue. Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal.\n// Knob 2: Speed. Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s.\n// Knob 3: Length. The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge.\n// Knob 4: Dispersion. A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative.\n// Buttons: K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.\n\n// The solver is ETDRK4, the exponential time-differencing Runge-Kutta\n// scheme of Steven Cox and Paul Matthews (2002), with the coefficients\n// taken as means round a circle in the complex plane, the way Aly-Khan\n// Kassam and Lloyd Trefethen (2005) do it, so they hold for every mode from\n// the growing ones to the most damped. In Fourier space\n//   v_t = (k^2 - k^4 + i delta k^3) v - (i k / 2) FFT(u^2),\n// the linear part solved exactly and only u^2 stepped, 0.25 time units a\n// step, five steps a row, 40 FFTs of size 64 a frame at Speed 2. At 0.4\n// time units a row the streaks hardly bent in 128 rows; at 1.25 they braid.\n//\n// Checked over 10,000 time units from the same start at delta 0:\n// - The energy, the mean of u^2, stays bounded: it averages 1.41 at L 22\n//   and 1.71 at L 66, and never passes 3.13.\n// - The fastest-growing wavelength is 2 pi sqrt 2, so a ring of length L\n//   should hold about L / 8.89 cells. Counting the positive humps of u\n//   (with a 0.4 dead band) gives 2.26 at L 22 against 2.48, 3.66 at 36\n//   against 4.05, 5.34 at 50 against 5.63 and 6.89 at 66 against 7.43:\n//   always 91 to 93 percent of it.\n// - 64 grid points resolve the ring up to L 66, where the highest mode\n//   never carries more than 0.65 percent of the largest. At L 100 it\n//   reached 21 percent, so the knob stops at 66.\nconst W = 64, H = 128, N = 64, STEP = 0.25, ROW = 1.25, RATE = 15, MC = 32, PRERUN = 100;\nconst { floor, exp, cos, sin, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// A complex FFT of size 64: bit reversal, then six rounds of butterflies.\nconst BR = new Uint8Array(N), CS = new Float64Array(N / 2), SN = new Float64Array(N / 2);\nfor (let i = 0; i \u003c N; i++) {\n  let r = 0;\n  for (let b = 0, v = i; b \u003c 6; b++, v >>= 1) r = (r \u003c\u003c 1) | (v & 1);\n  BR[i] = r;\n}\nfor (let k = 0; k \u003c N / 2; k++) (CS[k] = cos((TAU * k) / N)), (SN[k] = sin((TAU * k) / N));\n\nfunction fft(re, im, sign) {\n  for (let i = 0; i \u003c N; i++) {\n    const j = BR[i];\n    if (j > i) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let size = 2; size \u003c= N; size \u003c\u003c= 1) {\n    const half = size >> 1, step = N / size;\n    for (let i = 0; i \u003c N; i += size)\n      for (let k = 0; k \u003c half; k++) {\n        const wr = CS[k * step], wi = sign * SN[k * step], a = i + k, b = a + half;\n        const tr = re[b] * wr - im[b] * wi, ti = re[b] * wi + im[b] * wr;\n        re[b] = re[a] - tr;\n        im[b] = im[a] - ti;\n        re[a] += tr;\n        im[a] += ti;\n      }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\nconst f64 = () => new Float64Array(N);\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: -1, speed: 2, L: -1, delta: NaN, acc: 0, head: 0,\n    vr: f64(), vi: f64(), g: f64(),\n    Er: f64(), Ei: f64(), E2r: f64(), E2i: f64(), Qr: f64(), Qi: f64(),\n    f1r: f64(), f1i: f64(), f2r: f64(), f2i: f64(), f3r: f64(), f3i: f64(),\n    ar: f64(), ai: f64(), br: f64(), bi: f64(), cr: f64(), ci: f64(),\n    Nvr: f64(), Nvi: f64(), Nar: f64(), Nai: f64(), Nbr: f64(), Nbi: f64(), Ncr: f64(), Nci: f64(),\n    tr: f64(), ti: f64(), u: f64(),\n    hist: new Float32Array(H * N), next: new Float32Array(N), lut: new Uint8Array(2 * 257 * 3),\n  };\n}\n\n// The ETDRK4 coefficients for ring length L and dispersion delta. Mode n\n// has wavenumber k = 2 pi n / L for n below 32 and 2 pi (n - 64) / L above;\n// the Nyquist mode, n = 32, gets the damping of its true wavenumber but no\n// share of the nonlinear term, as an odd derivative cannot be taken there.\nfunction coefficients(S) {\n  const { L, delta, g } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const kk = (TAU * (n \u003c N / 2 ? n : n - N)) / L, kn = n === N / 2 ? (TAU * (N / 2)) / L : kk;\n    g[n] = n === N / 2 ? 0 : -0.5 * kk;\n    const zr = STEP * (kn * kn - kn * kn * kn * kn), zi = n === N / 2 ? 0 : STEP * delta * kk * kk * kk;\n    let em = exp(zr);\n    S.Er[n] = em * cos(zi);\n    S.Ei[n] = em * sin(zi);\n    em = exp(zr / 2);\n    S.E2r[n] = em * cos(zi / 2);\n    S.E2i[n] = em * sin(zi / 2);\n    let qr = 0, qi = 0, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0;\n    for (let j = 0; j \u003c MC; j++) {\n      const th = (TAU * (j + 0.5)) / MC, lr = zr + cos(th), li = zi + sin(th);\n      const ex = exp(lr), er = ex * cos(li), ei = ex * sin(li);\n      const hx = exp(lr / 2), hr = hx * cos(li / 2), hi = hx * sin(li / 2);\n      const l2r = lr * lr - li * li, l2i = 2 * lr * li;\n      const l3r = l2r * lr - l2i * li, l3i = l2r * li + l2i * lr;\n      const d1 = lr * lr + li * li, d3 = l3r * l3r + l3i * l3i;\n      qr += ((hr - 1) * lr + hi * li) / d1;\n      qi += (hi * lr - (hr - 1) * li) / d1;\n      let pr = 4 - 3 * lr + l2r, pi = -3 * li + l2i;\n      let nr = -4 - lr + er * pr - ei * pi, ni = -li + er * pi + ei * pr;\n      a1 += (nr * l3r + ni * l3i) / d3;\n      b1 += (ni * l3r - nr * l3i) / d3;\n      pr = lr - 2;\n      pi = li;\n      nr = 2 + lr + er * pr - ei * pi;\n      ni = li + er * pi + ei * pr;\n      a2 += (nr * l3r + ni * l3i) / d3;\n      b2 += (ni * l3r - nr * l3i) / d3;\n      pr = 4 - lr;\n      pi = -li;\n      nr = -4 - 3 * lr - l2r + er * pr - ei * pi;\n      ni = -3 * li - l2i + er * pi + ei * pr;\n      a3 += (nr * l3r + ni * l3i) / d3;\n      b3 += (ni * l3r - nr * l3i) / d3;\n    }\n    const m = STEP / MC;\n    S.Qr[n] = qr * m;\n    S.Qi[n] = qi * m;\n    S.f1r[n] = a1 * m;\n    S.f1i[n] = b1 * m;\n    S.f2r[n] = a2 * m;\n    S.f2i[n] = b2 * m;\n    S.f3r[n] = a3 * m;\n    S.f3i[n] = b3 * m;\n  }\n}\n\n// N(v) = -(i k / 2) FFT(u^2), u the real part of the inverse FFT of v.\nfunction nonlinear(S, xr, xi, outr, outi) {\n  const { tr, ti, g } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = xr[n]), (ti[n] = xi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) {\n    const u = tr[j] / N;\n    tr[j] = u * u;\n    ti[j] = 0;\n  }\n  fft(tr, ti, -1);\n  for (let n = 0; n \u003c N; n++) {\n    outr[n] = -g[n] * ti[n];\n    outi[n] = g[n] * tr[n];\n  }\n}\n\nfunction step(S) {\n  const { vr, vi, ar, ai, br, bi, cr, ci, Nvr, Nvi, Nar, Nai, Nbr, Nbi, Ncr, Nci, E2r, E2i, Qr, Qi } = S;\n  nonlinear(S, vr, vi, Nvr, Nvi);\n  for (let n = 0; n \u003c N; n++) {\n    ar[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nvr[n] - Qi[n] * Nvi[n];\n    ai[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nvi[n] + Qi[n] * Nvr[n];\n  }\n  nonlinear(S, ar, ai, Nar, Nai);\n  for (let n = 0; n \u003c N; n++) {\n    br[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nar[n] - Qi[n] * Nai[n];\n    bi[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nai[n] + Qi[n] * Nar[n];\n  }\n  nonlinear(S, br, bi, Nbr, Nbi);\n  for (let n = 0; n \u003c N; n++) {\n    const xr = 2 * Nbr[n] - Nvr[n], xi = 2 * Nbi[n] - Nvi[n];\n    cr[n] = E2r[n] * ar[n] - E2i[n] * ai[n] + Qr[n] * xr - Qi[n] * xi;\n    ci[n] = E2r[n] * ai[n] + E2i[n] * ar[n] + Qr[n] * xi + Qi[n] * xr;\n  }\n  nonlinear(S, cr, ci, Ncr, Nci);\n  const { Er, Ei, f1r, f1i, f2r, f2i, f3r, f3i } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const sr = Nar[n] + Nbr[n], si = Nai[n] + Nbi[n];\n    const nr =\n      Er[n] * vr[n] - Ei[n] * vi[n] +\n      (Nvr[n] * f1r[n] - Nvi[n] * f1i[n]) + 2 * (sr * f2r[n] - si * f2i[n]) + (Ncr[n] * f3r[n] - Nci[n] * f3i[n]);\n    const ni =\n      Er[n] * vi[n] + Ei[n] * vr[n] +\n      (Nvr[n] * f1i[n] + Nvi[n] * f1r[n]) + 2 * (sr * f2i[n] + si * f2r[n]) + (Ncr[n] * f3i[n] + Nci[n] * f3r[n]);\n    vr[n] = nr;\n    vi[n] = ni;\n  }\n  // u is real, so v_(64-n) is the conjugate of v_n. Round-off breaks that,\n  // and the broken part is invisible to u^2, so nothing holds it down: it\n  // grew at the linear rate of modes 2 and 3, 0.19 a time unit at L = 22,\n  // and blew the run up at t = 340. Folding it back each step keeps it at 0.\n  for (let n = 1; n \u003c N / 2; n++) {\n    const a = 0.5 * (vr[n] + vr[N - n]), b = 0.5 * (vi[n] - vi[N - n]);\n    vr[n] = vr[N - n] = a;\n    vi[n] = b;\n    vi[N - n] = -b;\n  }\n  vr[0] = vi[0] = vi[N / 2] = 0;\n}\n\n// u on the 64 grid points, one per column.\nfunction physical(S, out) {\n  const { tr, ti } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = S.vr[n]), (ti[n] = S.vi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) out[j] = tr[j] / N;\n}\n\nfunction advanceRow(S) {\n  for (let s = 0, n = round(ROW / STEP); s \u003c n; s++) step(S);\n}\n\n// The row just computed goes in at the head; `next` is one row ahead of it,\n// so the top of the panel can slide between the two.\nfunction pushRow(S) {\n  S.head = (S.head + H - 1) % H;\n  S.hist.set(S.next, S.head * N);\n  advanceRow(S);\n  physical(S, S.next);\n}\n\n// u is the slope of Sivashinsky's flame front, so a dent pushed into the\n// front shows in u as a dipole, up on one side and down on the other: the\n// derivative of a Gaussian, 4 columns wide, peaks of +-amp. It has no mean.\n// A plain bump had one, and taking it off shifted the whole row by 0.78,\n// a hard line straight across the diagram.\nfunction kick(S, x0, amp) {\n  const u = S.u;\n  physical(S, u);\n  for (let j = 0; j \u003c N; j++) {\n    let d = j - x0;\n    if (d > N / 2) d -= N;\n    if (d \u003c -N / 2) d += N;\n    const q = d / 4;\n    S.tr[j] = u[j] + amp * 1.6487 * q * exp(-0.5 * q * q);\n    S.ti[j] = 0;\n  }\n  fft(S.tr, S.ti, -1);\n  for (let n = 0; n \u003c N; n++) (S.vr[n] = S.tr[n]), (S.vi[n] = S.ti[n]);\n  S.vr[0] = S.vi[0] = 0;\n}\n\nfunction start(S) {\n  // Low modes with random phases, then PRERUN time units so the first\n  // frame is already chaos, then a full panel of history.\n  for (let n = 0; n \u003c N; n++) S.vr[n] = S.vi[n] = 0;\n  for (let n = 1; n \u003c= 6; n++) {\n    const ph = random() * TAU, a = (0.3 * N) / n;\n    S.vr[n] = a * cos(ph);\n    S.vi[n] = a * sin(ph);\n    S.vr[N - n] = a * cos(ph);\n    S.vi[N - n] = -a * sin(ph);\n  }\n  for (let s = 0, n = round(PRERUN / STEP); s \u003c n; s++) step(S);\n  physical(S, S.next);\n  for (let r = 0; r \u003c H; r++) pushRow(S);\n  S.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 22, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const L = cl(k[2], 22, 66), delta = cl(k[3], -1, 1);\n  if (L !== S.L || delta !== S.delta) {\n    S.L = L;\n    S.delta = delta;\n    coefficients(S);\n  }\n  if (!S.ready) start(S);\n  if (input.btnPressed && input.btnPressed[0]) kick(S, random() * N, 4);\n  S.acc += d * S.speed * RATE;\n  // 30 rows a second at 30 frames lands on 0.9999...; a hair of slack\n  // keeps it one row a frame instead of none and then two.\n  while (S.acc >= 1 - 1e-6) {\n    S.acc = Math.max(0, S.acc - 1);\n    pushRow(S);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  const lut = S.lut;\n  if (S.lutHue !== S.hue) {\n    // Two ramps of 257 steps, positive u then negative: black at zero,\n    // rising straight to full colour at |u| = 2.64, then paling to a tint at\n    // 3.3. A straight ramp keeps the steps between neighbours soft; the\n    // first, steeper ramp put a hard step on 23 percent of them.\n    for (let side = 0; side \u003c 2; side++) {\n      const h = S.hue + (side === 0 ? 0.5 : 0.86);\n      for (let i = 0; i \u003c= 256; i++) {\n        const a = i / 256, f = cl(a / 0.8, 0, 1), w = cl((a - 0.8) / 0.2, 0, 1);\n        hsv(h + 0.05 * (f - 1), 1 - 0.55 * w, f, lut, (side * 257 + i) * 3);\n      }\n    }\n    S.lutHue = S.hue;\n  }\n  // Pulses grow with the dispersion, |u| up to 3.5 at delta 0 and 4.7 at\n  // delta 1, so the map stretches with it and the pulses do not wash out pale.\n  const { hist, next, head, acc } = S, inv = 256 / (3.3 * (1 + 0.4 * abs(S.delta)));\n  for (let y = 0; y \u003c H; y++) {\n    // Display row y is `acc` of the way from history row y - 1 to row y,\n    // where row -1 is the one computed ahead.\n    const a = y - acc, r0 = floor(a), t = a - r0;\n    const A = r0 \u003c 0 ? next : null, o0 = ((head + r0 + H) % H) * N, o1 = ((head + r0 + 1) % H) * N;\n    for (let x = 0; x \u003c W; x++) {\n      const u0 = A ? A[x] : hist[o0 + x], u1 = r0 + 1 \u003c H ? hist[o1 + x] : u0;\n      const u = u0 + (u1 - u0) * t, i = Math.min(256, round(abs(u) * inv)), o = ((u \u003c 0 ? 257 : 0) + i) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal."},{"name":"Speed","min":0.2,"max":3,"about":"Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s."},{"name":"Length","min":22,"max":66,"about":"The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge."},{"name":"Dispersion","min":-1,"max":1,"about":"A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative."}],"start":[0,2,22,0.06],"measures":{"motion":2.1967,"detail":0.0813,"edges":0.1461,"complexity":1.9024,"coverage":0.8129,"colour":0.4992,"drift":0.2147},"knobResponse":[0.3397,0.3051,0.3397,0.3324]},{"slug":"lakes-of-wada","title":"Lakes of Wada","family":"topology","round":34,"note":"섬 안의 두 호수와 바다가 차례로 1 LED 운하를 파요. 마른 땅이 파는 물에서 32, 16, 8, … LED 안에 들 때까지 차례마다 거리를 반으로 줄여 파고 서로 다른 물은 끝내 닿지 않아서, 다 판 섬은 하늘색 바다와 분홍, 연두 호수 사이에 가는 땅 벽만 남은 미로가 돼요. K3 은 호수를 다섯까지 늘리고, K1 을 누르면 섬이 잠기고 새 섬이 솟아요.","idea":"An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.","buttons":"K1 tap floods the island now and raises a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Lakes of Wada\n// Family:  topology\n// Idea:    An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Lakes of Wada (Kunizō Yoneyama, 1917, after Takeo Wada), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1\n//\n// Knob 1: Hue. Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink.\n// Knob 2: Speed. At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds.\n// Knob 3: Lakes. How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters.\n// Knob 4: Wander. How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends.\n// Buttons: K1 tap floods the island now and raises a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst LAND = -1, BIG = 30000;\n// Canal heads digging at once for the water whose turn it is.\nconst TIPS = 3;\n// The first turn's distance; every later turn halves it, down to 1.\nconst D0 = 32;\n// LEDs dug a second for each unit of Speed.\nconst RATE = 110;\n// Distance searches a frame may run, so a late turn full of short canals\n// spreads over frames instead of stalling one.\nconst SEARCHES = 14;\n// LEDs a turn digs before it starts no new canal, a third of it once the\n// distance is 4 or less, so the water whose turn comes at a fine distance\n// cannot take the whole island.\nconst TURN_CAP = 160;\n// Hue of the sea at Hue 0; the lakes follow round the wheel.\nconst H0 = 0.56;\n// Seconds of digging before the first frame, and the waters' saturation.\n// Six seconds at a RATE of 80 and full colour put the study's colour at 0.723\n// and its motion at 0.017, both past the ends of their map axes, which\n// emptied six cells of the map.\nconst PRE = 3, SAT = 0.88;\nconst NB = [1, -1, W, -W], ANG = [0, PI, PI / 2, -PI / 2];\nconst wrap = (a) => a - 2 * PI * floor((a + PI) / (2 * PI));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, wander: 0.06, warm: false, clock: 0, acc: 0,\n    phase: \"dig\", pt: 0, stage: 0, turnDug: 0, roundDug: 0, roundTurns: 0, stageSteps: 0, searches: 0, rr: 0,\n    wat: new Int8Array(N), born: new Float32Array(N), give: new Uint8Array(N),\n    D: new Int16Array(N), C: new Int16Array(N), cw: -1, clr: 2, F: new Float32Array(N), FD: new Int16Array(N), fdMax: 1, fMax: 1,\n    Q: new Int32Array(N), tips: [], c: [0, 0, 0], next: null,\n  };\n  for (let k = 0; k \u003c TIPS; k++) params.s.tips.push({ on: false, sleep: false, pos: 0, tgt: 0, T: new Int16Array(N), steps: 0, cap: 0, h: 0 });\n}\n\n// ---------- the island ----------\n\n// A smooth random field on a coarse lattice, eased between lattice points.\nfunction field(gx, gy) {\n  const g = new Float32Array((gx + 1) * (gy + 1));\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / (W - 1)) * gx, v = (y / (H - 1)) * gy;\n      const i = min(gx - 1, floor(u)), j = min(gy - 1, floor(v));\n      const fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * (gx + 1) + i], b = g[j * (gx + 1) + i + 1], c = g[(j + 1) * (gx + 1) + i], d = g[(j + 1) * (gx + 1) + i + 1];\n      out[y * W + x] = (a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv;\n    }\n  return out;\n}\n\n// A new island with n - 1 lakes: water 0 is the sea, 1..n-1 the lakes.\n// Every water is kept at least two LEDs from every other, so no two touch\n// even at a corner.\nfunction makeIsland(n) {\n  const wat = new Int8Array(N), f = new Float32Array(N), Q = new Int32Array(N);\n  const a = field(5, 9), b = field(11, 21);\n  const rx = 29.5 + random() * 2, ry = 59 + random() * 3, cx = 31.5 + (random() - 0.5) * 3, cy = 63.5 + (random() - 0.5) * 6;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = (x - cx) / rx, dy = (y - cy) / ry;\n      // The coast bends away from the panel's rim instead of running along it.\n      const rim = min(x, W - 1 - x, y, H - 1 - y);\n      f[p] = 0.6 * (1 - dx * dx - dy * dy) + 0.32 * a[p] + 0.12 * b[p] - 0.5 * (1 - sm(1.5, 6, rim));\n      const edge = rim \u003c 2;\n      wat[p] = f[p] > 0 && !edge ? LAND : 0;\n    }\n  // Keep the largest piece of land, and fill any pond the field left in it.\n  const lab = new Int32Array(N).fill(-1);\n  let best = -1, bestSize = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (wat[s] !== LAND || lab[s] >= 0) continue;\n    let qh = 0, qt = 0;\n    Q[qt++] = s;\n    lab[s] = s;\n    while (qh \u003c qt) {\n      const p = Q[qh++], x = p % W;\n      for (let k = 0; k \u003c 4; k++) {\n        const q = p + NB[k];\n        if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n        if (wat[q] === LAND && lab[q] \u003c 0) (lab[q] = s), (Q[qt++] = q);\n      }\n    }\n    if (qt > bestSize) (bestSize = qt), (best = s);\n  }\n  for (let p = 0; p \u003c N; p++) if (wat[p] === LAND && lab[p] !== best) wat[p] = 0;\n  const sea = new Uint8Array(N);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0;\n    if ((x === 0 || y === 0 || x === W - 1 || y === H - 1) && wat[p] !== LAND) (sea[p] = 1), (Q[qt++] = p);\n  }\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (!sea[q] && wat[q] !== LAND) (sea[q] = 1), (Q[qt++] = q);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) if (!sea[p]) wat[p] = LAND;\n  // Distance from the coast, through the land.\n  const cd = new Int16Array(N).fill(BIG);\n  qh = qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (cd[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && cd[q] === BIG) (cd[q] = cd[p] + 1), (Q[qt++] = q);\n    }\n  }\n  // The lakes, spread over the island: each the best of 60 tries, as far as\n  // it can be from the lakes already placed.\n  const lakes = [];\n  for (let w = 1; w \u003c n; w++) {\n    const r = 4 + random() * 2;\n    let bx = -1, by = -1, bs = -1;\n    for (let k = 0; k \u003c 60; k++) {\n      const p = floor(random() * N);\n      if (wat[p] !== LAND || cd[p] \u003c r + 9) continue;\n      const x = p % W, y = (p / W) | 0;\n      let s = 200 + random();\n      for (const l of lakes) s = min(s, sqrt((x - l.x) ** 2 + (y - l.y) ** 2) - l.r - r);\n      if (s > bs) (bs = s), (bx = x), (by = y);\n    }\n    if (bx \u003c 0) continue;\n    lakes.push({ x: bx, y: by, r });\n    const ph = random() * 6.28;\n    for (let y = max(2, floor(by - r - 2)); y \u003c= min(H - 3, by + r + 2); y++)\n      for (let x = max(2, floor(bx - r - 2)); x \u003c= min(W - 3, bx + r + 2); x++) {\n        const p = y * W + x, dx = x - bx, dy = y - by;\n        if (wat[p] !== LAND || cd[p] \u003c 3) continue;\n        const th = atan2(dy, dx);\n        if (sqrt(dx * dx + dy * dy) > r * (1 + 0.12 * sin(2 * th + ph) + 0.1 * sin(3 * th + 2 * ph))) continue;\n        let ok = true;\n        for (let v = -2; v \u003c= 2 && ok; v++) for (let u = -2; u \u003c= 2; u++) if (wat[p + v * W + u] > 0 && wat[p + v * W + u] !== w) ok = false;\n        if (ok) wat[p] = w;\n      }\n  }\n  let fMax = 0;\n  for (let p = 0; p \u003c N; p++) fMax = max(fMax, f[p]);\n  return { wat, f, fMax };\n}\n\nfunction begin(S, isl) {\n  S.wat.set(isl.wat);\n  S.F.set(isl.f);\n  S.fMax = isl.fMax;\n  S.born.fill(-99);\n  S.give.fill(0);\n  S.stage = 0;\n  S.cw = -1;\n  S.turnDug = 0;\n  S.roundDug = 0;\n  S.roundTurns = 0;\n  S.stageSteps = 0;\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n}\n\n// ---------- digging ----------\n\nconst turnWater = (S) => (S.stage + 1) % S.n;\nconst turnDist = (S) => max(1, floor(D0 / 2 ** S.stage));\n// How far a canal keeps from the other waters: a quarter of the turn's\n// distance, and never closer than one LED of land between. A long early\n// canal that ran up to another water's shore would close the way past it.\nconst turnClear = (S) => max(2, floor(turnDist(S) / 4));\n\n// Chebyshev distance from every cell to the nearest water other than w,\n// into S.C. The others hold still during w's turn, so once a turn is enough.\nfunction clearance(S, w) {\n  const { wat, C, Q } = S;\n  C.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] !== LAND && wat[p] !== w) (C[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W, y = (p / W) | 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        const u = x + dx, v = y + dy;\n        if (u \u003c 0 || u >= W || v \u003c 0 || v >= H) continue;\n        const q = v * W + u;\n        if (C[q] === BIG) (C[q] = C[p] + 1), (Q[qt++] = q);\n      }\n  }\n  S.cw = w;\n}\n\n// Land a canal of w may take at all: inside the panel's rim and clear of\n// the other waters.\nconst free = (S, c) => S.wat[c] === LAND && S.C[c] >= S.clr && c % W > 0 && c % W \u003c W - 1 && c >= W && c \u003c N - W;\n\n// May water w dig land cell c, coming from its own cell t? Of c's eight\n// neighbours only t and the two cells beside t may be water, so a canal\n// never runs alongside itself or another canal of its own water.\nfunction canDig(S, c, t, w) {\n  if (!free(S, c)) return false;\n  const wat = S.wat, cx = c % W, cy = (c / W) | 0, ex = (t % W) - cx, ey = ((t / W) | 0) - cy;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      if ((!dx && !dy) || wat[c + dy * W + dx] === LAND) continue;\n      // t itself, or a cell beside t across the canal's line.\n      if ((ex !== 0 && dx === ex) || (ey !== 0 && dy === ey)) continue;\n      return false;\n    }\n  return true;\n}\n\n// Land with no water at all among its eight neighbours: a canal can pass.\nfunction open(S, c) {\n  if (!free(S, c)) return false;\n  const wat = S.wat;\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) if (wat[c + dy * W + dx] !== LAND) return false;\n  return true;\n}\n\n// Distance through the land from water w (and from the targets the other\n// heads are already digging toward), into S.D.\nfunction distances(S, w, mine) {\n  const { wat, D, Q } = S;\n  D.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === w) (D[p] = 0), (Q[qt++] = p);\n  for (const t of S.tips) if (t !== mine && t.on && D[t.tgt] === BIG) (D[t.tgt] = 0), (Q[qt++] = t.tgt);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && D[q] === BIG) (D[q] = D[p] + 1), (Q[qt++] = q);\n    }\n  }\n}\n\nfunction dig(S, c, w) {\n  S.wat[c] = w;\n  S.born[c] = S.clock;\n  S.turnDug++;\n}\n\nfunction finish(S, tip) {\n  tip.on = false;\n  S.give[tip.tgt] = 1;\n  for (const t of S.tips) t.sleep = false;\n}\n\n// A new canal for this head: the land farthest from the water whose turn it\n// is, and the nearest place on that water's shore to set out from.\n// Returns 1 if it dug, 0 if this turn has nothing left for it, -1 to retry.\nfunction startCanal(S, tip) {\n  const w = turnWater(S), d = turnDist(S), { D, give, Q } = S;\n  S.searches++;\n  if (S.cw !== w) clearance(S, w);\n  S.clr = turnClear(S);\n  distances(S, w, tip);\n  let m = d + 1, cnt = 0, X = -1;\n  for (let p = 0; p \u003c N; p++) {\n    const v = D[p];\n    if (v \u003c m || v === BIG || give[p] || !free(S, p)) continue;\n    if (v > m) (m = v), (cnt = 0);\n    if (random() * ++cnt \u003c 1) X = p;\n  }\n  if (X \u003c 0) return 0;\n  // Distance to X through land a canal can cross; the first cells reached\n  // that w can dig from its shore are where the canal may start.\n  const T = tip.T;\n  T.fill(BIG);\n  let qh = 0, qt = 0, start = -1, from = -1, tmin = BIG, seen = 0;\n  T[X] = 0;\n  Q[qt++] = X;\n  const tryStart = (c) => {\n    for (let k = 0; k \u003c 4; k++) {\n      const t = c + NB[k];\n      if (S.wat[t] === w && canDig(S, c, t, w) && random() * ++seen \u003c 1) (start = c), (from = t), (tmin = T[c]);\n    }\n  };\n  tryStart(X);\n  while (qh \u003c qt && T[Q[qh]] \u003c= tmin) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG) continue;\n      if (open(S, q)) {\n        T[q] = T[p] + 1;\n        Q[qt++] = q;\n      } else if (S.wat[q] === LAND) {\n        T[q] = T[p] + 1;\n        if (T[q] \u003c= tmin) tryStart(q);\n      }\n    }\n  }\n  if (start \u003c 0) {\n    // No way in from w's shore: none of this land counts for the turn.\n    for (let i = 0; i \u003c qt; i++) give[Q[i]] = 1;\n    give[X] = 1;\n    return -1;\n  }\n  // Finish the map past the start, so a wandering head still knows its way.\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG || !open(S, q)) continue;\n      T[q] = T[p] + 1;\n      Q[qt++] = q;\n    }\n  }\n  dig(S, start, w);\n  Object.assign(tip, { on: true, pos: start, tgt: X, steps: 1, cap: 2 * T[start] + 12 });\n  tip.h = atan2(((start / W) | 0) - ((from / W) | 0), (start % W) - (from % W));\n  if (T[start] === 0) finish(S, tip);\n  return 1;\n}\n\n// One LED more for an active head: toward X along the land map, with the\n// heading drifting as Wander allows.\nfunction extend(S, tip) {\n  const w = turnWater(S), t = tip.pos, T = tip.T, u = S.wander;\n  const beta = 3.2 - 2.4 * u, kap = 0.5 + 2.0 * u, noise = 0.12 + 1.1 * u;\n  let best = -1, bs = -1e9;\n  for (let k = 0; k \u003c 4; k++) {\n    const c = t + NB[k];\n    if (!canDig(S, c, t, w)) continue;\n    const dT = T[c] === BIG ? 3 : T[c] - T[t];\n    const s = -beta * dT + kap * cos(ANG[k] - tip.h) + noise * random();\n    if (s > bs) (bs = s), (best = k);\n  }\n  if (best \u003c 0) {\n    finish(S, tip);\n    return false;\n  }\n  const c = t + NB[best];\n  dig(S, c, w);\n  tip.pos = c;\n  tip.steps++;\n  const tx = tip.tgt % W, ty = (tip.tgt / W) | 0, cx = c % W, cy = (c / W) | 0;\n  tip.h += 0.25 * wrap(ANG[best] - tip.h) + 0.12 * (1 - u) * wrap(atan2(ty - cy, tx - cx) - tip.h) + (random() - 0.5) * 1.3 * u;\n  if (T[c] === 0 || tip.steps >= tip.cap) finish(S, tip);\n  return true;\n}\n\nfunction nextTurn(S) {\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n  S.give.fill(0);\n  S.cw = -1;\n  // A whole round of turns at distance 1 that found almost nothing to dig:\n  // the labyrinth is finished.\n  if (turnDist(S) === 1) {\n    S.roundDug += S.turnDug;\n    if (++S.roundTurns >= S.n) {\n      if (S.roundDug \u003c 4) {\n        S.phase = \"hold\";\n        S.pt = 0;\n      }\n      S.roundDug = 0;\n      S.roundTurns = 0;\n    }\n  }\n  S.stage++;\n  S.turnDug = 0;\n  S.stageSteps = 0;\n}\n\n// One step of digging: one LED for one head, round robin. Once the turn has\n// dug its share no new canal starts, but the heads finish the ones they are\n// on, so a long canal into the far land is not left half dug.\nfunction step(S, limited) {\n  if (++S.stageSteps > 1400) {\n    nextTurn(S);\n    return;\n  }\n  const full = S.turnDug >= (turnDist(S) > 4 ? TURN_CAP : TURN_CAP / 3);\n  for (let tries = 0; tries \u003c TIPS * 2; tries++) {\n    const tip = S.tips[(S.rr = (S.rr + 1) % TIPS)];\n    if (tip.on) {\n      if (extend(S, tip)) return;\n      continue;\n    }\n    if (tip.sleep || full) continue;\n    if (limited && S.searches >= SEARCHES) return;\n    const r = startCanal(S, tip);\n    if (r === 1) return;\n    if (r === 0) tip.sleep = true;\n  }\n  if (S.tips.every((t) => !t.on && (t.sleep || full))) nextTurn(S);\n}\n\n// ---------- flood ----------\n\n// Distance from the sea through everything else, for the flood front.\nfunction floodMap(S) {\n  const { wat, FD, Q } = S;\n  FD.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (FD[p] = 0), (Q[qt++] = p);\n  let m = 1;\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N || FD[q] !== BIG) continue;\n      FD[q] = FD[p] + 1;\n      m = max(m, FD[q]);\n      Q[qt++] = q;\n    }\n  }\n  S.fdMax = m;\n}\n\nfunction startFlood(S) {\n  floodMap(S);\n  for (const t of S.tips) t.on = false;\n  S.phase = \"flood\";\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wander = cl(k[3], 0, 1);\n  const n = round(cl(k[2], 3, 5));\n  if (!S.warm) {\n    S.n = n;\n    begin(S, makeIsland(n));\n    // Open on an island the waters have been digging for PRE seconds at\n    // this Speed.\n    const pre = round(PRE * S.speed * RATE);\n    for (let i = 0; i \u003c pre; i++) step(S, false);\n    S.clock = 10;\n    S.warm = true;\n  } else if (n !== S.n && S.phase !== \"flood\" && S.phase !== \"rise\") {\n    S.next = n;\n    startFlood(S);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== \"flood\" && S.phase !== \"rise\") startFlood(S);\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  S.pt += ds;\n  if (S.phase === \"dig\") {\n    S.acc += d * S.speed * RATE;\n    S.searches = 0;\n    let steps = 0;\n    while (S.acc >= 1 && steps \u003c 200 && S.phase === \"dig\") {\n      step(S, true);\n      S.acc -= 1;\n      steps++;\n      if (S.searches >= SEARCHES) {\n        S.acc = min(S.acc, 2);\n        break;\n      }\n    }\n  } else if (S.phase === \"hold\" && S.pt > 3) startFlood(S);\n  else if (S.phase === \"flood\" && S.pt > 1.2) {\n    if (S.next) (S.n = S.next), (S.next = null);\n    begin(S, makeIsland(S.n));\n    S.phase = \"rise\";\n    S.pt = 0;\n  } else if (S.phase === \"rise\" && S.pt > 1) {\n    S.phase = \"dig\";\n    S.pt = 0;\n    S.acc = 0;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { wat, born, c, n } = S;\n  const front = S.phase === \"flood\" ? S.fdMax * sm(0, 1.1, S.pt) : -1;\n  const level = S.phase === \"rise\" ? S.fMax * (1 - sm(0, 0.95, S.pt)) : -1;\n  const tipAt = new Set();\n  for (const t of S.tips) if (t.on) tipAt.add(t.pos);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let w = wat[p], glow = 0;\n      if (front >= 0 && S.FD[p] \u003c= front) {\n        w = 0;\n        if (S.FD[p] > 0) glow = 0.7 * sm(4, 0, front - S.FD[p]);\n      } else if (level >= 0 && S.F[p] \u003c= level) {\n        w = 0;\n        glow = 0.6 * sm(0.06, 0, level - S.F[p]) * (S.F[p] > 0 ? 1 : 0);\n      }\n      if (w === LAND) {\n        display.setPixel(x, y, 14, 12, 10);\n        continue;\n      }\n      if (front \u003c 0 && level \u003c 0) glow = tipAt.has(p) ? 1 : exp(-(S.clock - born[p]) / 0.22);\n      hsv(S.hue + H0 + w / n, SAT, 1, c);\n      const v = 255, s = 1 - 0.85 * glow;\n      display.setPixel(x, y, round(v * (c[0] * s + 1 - s)), round(v * (c[1] * s + 1 - s)), round(v * (c[2] * s + 1 - s)));\n    }\n}\n","layer":{"id":"layer-lakes-of-wada","type":"code","name":"lakes-of-wada","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lakes of Wada\n// Family:  topology\n// Idea:    An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Lakes of Wada (Kunizō Yoneyama, 1917, after Takeo Wada), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1\n//\n// Knob 1: Hue. Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink.\n// Knob 2: Speed. At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds.\n// Knob 3: Lakes. How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters.\n// Knob 4: Wander. How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends.\n// Buttons: K1 tap floods the island now and raises a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst LAND = -1, BIG = 30000;\n// Canal heads digging at once for the water whose turn it is.\nconst TIPS = 3;\n// The first turn's distance; every later turn halves it, down to 1.\nconst D0 = 32;\n// LEDs dug a second for each unit of Speed.\nconst RATE = 110;\n// Distance searches a frame may run, so a late turn full of short canals\n// spreads over frames instead of stalling one.\nconst SEARCHES = 14;\n// LEDs a turn digs before it starts no new canal, a third of it once the\n// distance is 4 or less, so the water whose turn comes at a fine distance\n// cannot take the whole island.\nconst TURN_CAP = 160;\n// Hue of the sea at Hue 0; the lakes follow round the wheel.\nconst H0 = 0.56;\n// Seconds of digging before the first frame, and the waters' saturation.\n// Six seconds at a RATE of 80 and full colour put the study's colour at 0.723\n// and its motion at 0.017, both past the ends of their map axes, which\n// emptied six cells of the map.\nconst PRE = 3, SAT = 0.88;\nconst NB = [1, -1, W, -W], ANG = [0, PI, PI / 2, -PI / 2];\nconst wrap = (a) => a - 2 * PI * floor((a + PI) / (2 * PI));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, wander: 0.06, warm: false, clock: 0, acc: 0,\n    phase: \"dig\", pt: 0, stage: 0, turnDug: 0, roundDug: 0, roundTurns: 0, stageSteps: 0, searches: 0, rr: 0,\n    wat: new Int8Array(N), born: new Float32Array(N), give: new Uint8Array(N),\n    D: new Int16Array(N), C: new Int16Array(N), cw: -1, clr: 2, F: new Float32Array(N), FD: new Int16Array(N), fdMax: 1, fMax: 1,\n    Q: new Int32Array(N), tips: [], c: [0, 0, 0], next: null,\n  };\n  for (let k = 0; k \u003c TIPS; k++) params.s.tips.push({ on: false, sleep: false, pos: 0, tgt: 0, T: new Int16Array(N), steps: 0, cap: 0, h: 0 });\n}\n\n// ---------- the island ----------\n\n// A smooth random field on a coarse lattice, eased between lattice points.\nfunction field(gx, gy) {\n  const g = new Float32Array((gx + 1) * (gy + 1));\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / (W - 1)) * gx, v = (y / (H - 1)) * gy;\n      const i = min(gx - 1, floor(u)), j = min(gy - 1, floor(v));\n      const fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * (gx + 1) + i], b = g[j * (gx + 1) + i + 1], c = g[(j + 1) * (gx + 1) + i], d = g[(j + 1) * (gx + 1) + i + 1];\n      out[y * W + x] = (a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv;\n    }\n  return out;\n}\n\n// A new island with n - 1 lakes: water 0 is the sea, 1..n-1 the lakes.\n// Every water is kept at least two LEDs from every other, so no two touch\n// even at a corner.\nfunction makeIsland(n) {\n  const wat = new Int8Array(N), f = new Float32Array(N), Q = new Int32Array(N);\n  const a = field(5, 9), b = field(11, 21);\n  const rx = 29.5 + random() * 2, ry = 59 + random() * 3, cx = 31.5 + (random() - 0.5) * 3, cy = 63.5 + (random() - 0.5) * 6;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = (x - cx) / rx, dy = (y - cy) / ry;\n      // The coast bends away from the panel's rim instead of running along it.\n      const rim = min(x, W - 1 - x, y, H - 1 - y);\n      f[p] = 0.6 * (1 - dx * dx - dy * dy) + 0.32 * a[p] + 0.12 * b[p] - 0.5 * (1 - sm(1.5, 6, rim));\n      const edge = rim \u003c 2;\n      wat[p] = f[p] > 0 && !edge ? LAND : 0;\n    }\n  // Keep the largest piece of land, and fill any pond the field left in it.\n  const lab = new Int32Array(N).fill(-1);\n  let best = -1, bestSize = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (wat[s] !== LAND || lab[s] >= 0) continue;\n    let qh = 0, qt = 0;\n    Q[qt++] = s;\n    lab[s] = s;\n    while (qh \u003c qt) {\n      const p = Q[qh++], x = p % W;\n      for (let k = 0; k \u003c 4; k++) {\n        const q = p + NB[k];\n        if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n        if (wat[q] === LAND && lab[q] \u003c 0) (lab[q] = s), (Q[qt++] = q);\n      }\n    }\n    if (qt > bestSize) (bestSize = qt), (best = s);\n  }\n  for (let p = 0; p \u003c N; p++) if (wat[p] === LAND && lab[p] !== best) wat[p] = 0;\n  const sea = new Uint8Array(N);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0;\n    if ((x === 0 || y === 0 || x === W - 1 || y === H - 1) && wat[p] !== LAND) (sea[p] = 1), (Q[qt++] = p);\n  }\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (!sea[q] && wat[q] !== LAND) (sea[q] = 1), (Q[qt++] = q);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) if (!sea[p]) wat[p] = LAND;\n  // Distance from the coast, through the land.\n  const cd = new Int16Array(N).fill(BIG);\n  qh = qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (cd[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && cd[q] === BIG) (cd[q] = cd[p] + 1), (Q[qt++] = q);\n    }\n  }\n  // The lakes, spread over the island: each the best of 60 tries, as far as\n  // it can be from the lakes already placed.\n  const lakes = [];\n  for (let w = 1; w \u003c n; w++) {\n    const r = 4 + random() * 2;\n    let bx = -1, by = -1, bs = -1;\n    for (let k = 0; k \u003c 60; k++) {\n      const p = floor(random() * N);\n      if (wat[p] !== LAND || cd[p] \u003c r + 9) continue;\n      const x = p % W, y = (p / W) | 0;\n      let s = 200 + random();\n      for (const l of lakes) s = min(s, sqrt((x - l.x) ** 2 + (y - l.y) ** 2) - l.r - r);\n      if (s > bs) (bs = s), (bx = x), (by = y);\n    }\n    if (bx \u003c 0) continue;\n    lakes.push({ x: bx, y: by, r });\n    const ph = random() * 6.28;\n    for (let y = max(2, floor(by - r - 2)); y \u003c= min(H - 3, by + r + 2); y++)\n      for (let x = max(2, floor(bx - r - 2)); x \u003c= min(W - 3, bx + r + 2); x++) {\n        const p = y * W + x, dx = x - bx, dy = y - by;\n        if (wat[p] !== LAND || cd[p] \u003c 3) continue;\n        const th = atan2(dy, dx);\n        if (sqrt(dx * dx + dy * dy) > r * (1 + 0.12 * sin(2 * th + ph) + 0.1 * sin(3 * th + 2 * ph))) continue;\n        let ok = true;\n        for (let v = -2; v \u003c= 2 && ok; v++) for (let u = -2; u \u003c= 2; u++) if (wat[p + v * W + u] > 0 && wat[p + v * W + u] !== w) ok = false;\n        if (ok) wat[p] = w;\n      }\n  }\n  let fMax = 0;\n  for (let p = 0; p \u003c N; p++) fMax = max(fMax, f[p]);\n  return { wat, f, fMax };\n}\n\nfunction begin(S, isl) {\n  S.wat.set(isl.wat);\n  S.F.set(isl.f);\n  S.fMax = isl.fMax;\n  S.born.fill(-99);\n  S.give.fill(0);\n  S.stage = 0;\n  S.cw = -1;\n  S.turnDug = 0;\n  S.roundDug = 0;\n  S.roundTurns = 0;\n  S.stageSteps = 0;\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n}\n\n// ---------- digging ----------\n\nconst turnWater = (S) => (S.stage + 1) % S.n;\nconst turnDist = (S) => max(1, floor(D0 / 2 ** S.stage));\n// How far a canal keeps from the other waters: a quarter of the turn's\n// distance, and never closer than one LED of land between. A long early\n// canal that ran up to another water's shore would close the way past it.\nconst turnClear = (S) => max(2, floor(turnDist(S) / 4));\n\n// Chebyshev distance from every cell to the nearest water other than w,\n// into S.C. The others hold still during w's turn, so once a turn is enough.\nfunction clearance(S, w) {\n  const { wat, C, Q } = S;\n  C.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] !== LAND && wat[p] !== w) (C[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W, y = (p / W) | 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        const u = x + dx, v = y + dy;\n        if (u \u003c 0 || u >= W || v \u003c 0 || v >= H) continue;\n        const q = v * W + u;\n        if (C[q] === BIG) (C[q] = C[p] + 1), (Q[qt++] = q);\n      }\n  }\n  S.cw = w;\n}\n\n// Land a canal of w may take at all: inside the panel's rim and clear of\n// the other waters.\nconst free = (S, c) => S.wat[c] === LAND && S.C[c] >= S.clr && c % W > 0 && c % W \u003c W - 1 && c >= W && c \u003c N - W;\n\n// May water w dig land cell c, coming from its own cell t? Of c's eight\n// neighbours only t and the two cells beside t may be water, so a canal\n// never runs alongside itself or another canal of its own water.\nfunction canDig(S, c, t, w) {\n  if (!free(S, c)) return false;\n  const wat = S.wat, cx = c % W, cy = (c / W) | 0, ex = (t % W) - cx, ey = ((t / W) | 0) - cy;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      if ((!dx && !dy) || wat[c + dy * W + dx] === LAND) continue;\n      // t itself, or a cell beside t across the canal's line.\n      if ((ex !== 0 && dx === ex) || (ey !== 0 && dy === ey)) continue;\n      return false;\n    }\n  return true;\n}\n\n// Land with no water at all among its eight neighbours: a canal can pass.\nfunction open(S, c) {\n  if (!free(S, c)) return false;\n  const wat = S.wat;\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) if (wat[c + dy * W + dx] !== LAND) return false;\n  return true;\n}\n\n// Distance through the land from water w (and from the targets the other\n// heads are already digging toward), into S.D.\nfunction distances(S, w, mine) {\n  const { wat, D, Q } = S;\n  D.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === w) (D[p] = 0), (Q[qt++] = p);\n  for (const t of S.tips) if (t !== mine && t.on && D[t.tgt] === BIG) (D[t.tgt] = 0), (Q[qt++] = t.tgt);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && D[q] === BIG) (D[q] = D[p] + 1), (Q[qt++] = q);\n    }\n  }\n}\n\nfunction dig(S, c, w) {\n  S.wat[c] = w;\n  S.born[c] = S.clock;\n  S.turnDug++;\n}\n\nfunction finish(S, tip) {\n  tip.on = false;\n  S.give[tip.tgt] = 1;\n  for (const t of S.tips) t.sleep = false;\n}\n\n// A new canal for this head: the land farthest from the water whose turn it\n// is, and the nearest place on that water's shore to set out from.\n// Returns 1 if it dug, 0 if this turn has nothing left for it, -1 to retry.\nfunction startCanal(S, tip) {\n  const w = turnWater(S), d = turnDist(S), { D, give, Q } = S;\n  S.searches++;\n  if (S.cw !== w) clearance(S, w);\n  S.clr = turnClear(S);\n  distances(S, w, tip);\n  let m = d + 1, cnt = 0, X = -1;\n  for (let p = 0; p \u003c N; p++) {\n    const v = D[p];\n    if (v \u003c m || v === BIG || give[p] || !free(S, p)) continue;\n    if (v > m) (m = v), (cnt = 0);\n    if (random() * ++cnt \u003c 1) X = p;\n  }\n  if (X \u003c 0) return 0;\n  // Distance to X through land a canal can cross; the first cells reached\n  // that w can dig from its shore are where the canal may start.\n  const T = tip.T;\n  T.fill(BIG);\n  let qh = 0, qt = 0, start = -1, from = -1, tmin = BIG, seen = 0;\n  T[X] = 0;\n  Q[qt++] = X;\n  const tryStart = (c) => {\n    for (let k = 0; k \u003c 4; k++) {\n      const t = c + NB[k];\n      if (S.wat[t] === w && canDig(S, c, t, w) && random() * ++seen \u003c 1) (start = c), (from = t), (tmin = T[c]);\n    }\n  };\n  tryStart(X);\n  while (qh \u003c qt && T[Q[qh]] \u003c= tmin) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG) continue;\n      if (open(S, q)) {\n        T[q] = T[p] + 1;\n        Q[qt++] = q;\n      } else if (S.wat[q] === LAND) {\n        T[q] = T[p] + 1;\n        if (T[q] \u003c= tmin) tryStart(q);\n      }\n    }\n  }\n  if (start \u003c 0) {\n    // No way in from w's shore: none of this land counts for the turn.\n    for (let i = 0; i \u003c qt; i++) give[Q[i]] = 1;\n    give[X] = 1;\n    return -1;\n  }\n  // Finish the map past the start, so a wandering head still knows its way.\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG || !open(S, q)) continue;\n      T[q] = T[p] + 1;\n      Q[qt++] = q;\n    }\n  }\n  dig(S, start, w);\n  Object.assign(tip, { on: true, pos: start, tgt: X, steps: 1, cap: 2 * T[start] + 12 });\n  tip.h = atan2(((start / W) | 0) - ((from / W) | 0), (start % W) - (from % W));\n  if (T[start] === 0) finish(S, tip);\n  return 1;\n}\n\n// One LED more for an active head: toward X along the land map, with the\n// heading drifting as Wander allows.\nfunction extend(S, tip) {\n  const w = turnWater(S), t = tip.pos, T = tip.T, u = S.wander;\n  const beta = 3.2 - 2.4 * u, kap = 0.5 + 2.0 * u, noise = 0.12 + 1.1 * u;\n  let best = -1, bs = -1e9;\n  for (let k = 0; k \u003c 4; k++) {\n    const c = t + NB[k];\n    if (!canDig(S, c, t, w)) continue;\n    const dT = T[c] === BIG ? 3 : T[c] - T[t];\n    const s = -beta * dT + kap * cos(ANG[k] - tip.h) + noise * random();\n    if (s > bs) (bs = s), (best = k);\n  }\n  if (best \u003c 0) {\n    finish(S, tip);\n    return false;\n  }\n  const c = t + NB[best];\n  dig(S, c, w);\n  tip.pos = c;\n  tip.steps++;\n  const tx = tip.tgt % W, ty = (tip.tgt / W) | 0, cx = c % W, cy = (c / W) | 0;\n  tip.h += 0.25 * wrap(ANG[best] - tip.h) + 0.12 * (1 - u) * wrap(atan2(ty - cy, tx - cx) - tip.h) + (random() - 0.5) * 1.3 * u;\n  if (T[c] === 0 || tip.steps >= tip.cap) finish(S, tip);\n  return true;\n}\n\nfunction nextTurn(S) {\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n  S.give.fill(0);\n  S.cw = -1;\n  // A whole round of turns at distance 1 that found almost nothing to dig:\n  // the labyrinth is finished.\n  if (turnDist(S) === 1) {\n    S.roundDug += S.turnDug;\n    if (++S.roundTurns >= S.n) {\n      if (S.roundDug \u003c 4) {\n        S.phase = \"hold\";\n        S.pt = 0;\n      }\n      S.roundDug = 0;\n      S.roundTurns = 0;\n    }\n  }\n  S.stage++;\n  S.turnDug = 0;\n  S.stageSteps = 0;\n}\n\n// One step of digging: one LED for one head, round robin. Once the turn has\n// dug its share no new canal starts, but the heads finish the ones they are\n// on, so a long canal into the far land is not left half dug.\nfunction step(S, limited) {\n  if (++S.stageSteps > 1400) {\n    nextTurn(S);\n    return;\n  }\n  const full = S.turnDug >= (turnDist(S) > 4 ? TURN_CAP : TURN_CAP / 3);\n  for (let tries = 0; tries \u003c TIPS * 2; tries++) {\n    const tip = S.tips[(S.rr = (S.rr + 1) % TIPS)];\n    if (tip.on) {\n      if (extend(S, tip)) return;\n      continue;\n    }\n    if (tip.sleep || full) continue;\n    if (limited && S.searches >= SEARCHES) return;\n    const r = startCanal(S, tip);\n    if (r === 1) return;\n    if (r === 0) tip.sleep = true;\n  }\n  if (S.tips.every((t) => !t.on && (t.sleep || full))) nextTurn(S);\n}\n\n// ---------- flood ----------\n\n// Distance from the sea through everything else, for the flood front.\nfunction floodMap(S) {\n  const { wat, FD, Q } = S;\n  FD.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (FD[p] = 0), (Q[qt++] = p);\n  let m = 1;\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N || FD[q] !== BIG) continue;\n      FD[q] = FD[p] + 1;\n      m = max(m, FD[q]);\n      Q[qt++] = q;\n    }\n  }\n  S.fdMax = m;\n}\n\nfunction startFlood(S) {\n  floodMap(S);\n  for (const t of S.tips) t.on = false;\n  S.phase = \"flood\";\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wander = cl(k[3], 0, 1);\n  const n = round(cl(k[2], 3, 5));\n  if (!S.warm) {\n    S.n = n;\n    begin(S, makeIsland(n));\n    // Open on an island the waters have been digging for PRE seconds at\n    // this Speed.\n    const pre = round(PRE * S.speed * RATE);\n    for (let i = 0; i \u003c pre; i++) step(S, false);\n    S.clock = 10;\n    S.warm = true;\n  } else if (n !== S.n && S.phase !== \"flood\" && S.phase !== \"rise\") {\n    S.next = n;\n    startFlood(S);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== \"flood\" && S.phase !== \"rise\") startFlood(S);\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  S.pt += ds;\n  if (S.phase === \"dig\") {\n    S.acc += d * S.speed * RATE;\n    S.searches = 0;\n    let steps = 0;\n    while (S.acc >= 1 && steps \u003c 200 && S.phase === \"dig\") {\n      step(S, true);\n      S.acc -= 1;\n      steps++;\n      if (S.searches >= SEARCHES) {\n        S.acc = min(S.acc, 2);\n        break;\n      }\n    }\n  } else if (S.phase === \"hold\" && S.pt > 3) startFlood(S);\n  else if (S.phase === \"flood\" && S.pt > 1.2) {\n    if (S.next) (S.n = S.next), (S.next = null);\n    begin(S, makeIsland(S.n));\n    S.phase = \"rise\";\n    S.pt = 0;\n  } else if (S.phase === \"rise\" && S.pt > 1) {\n    S.phase = \"dig\";\n    S.pt = 0;\n    S.acc = 0;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { wat, born, c, n } = S;\n  const front = S.phase === \"flood\" ? S.fdMax * sm(0, 1.1, S.pt) : -1;\n  const level = S.phase === \"rise\" ? S.fMax * (1 - sm(0, 0.95, S.pt)) : -1;\n  const tipAt = new Set();\n  for (const t of S.tips) if (t.on) tipAt.add(t.pos);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let w = wat[p], glow = 0;\n      if (front >= 0 && S.FD[p] \u003c= front) {\n        w = 0;\n        if (S.FD[p] > 0) glow = 0.7 * sm(4, 0, front - S.FD[p]);\n      } else if (level >= 0 && S.F[p] \u003c= level) {\n        w = 0;\n        glow = 0.6 * sm(0.06, 0, level - S.F[p]) * (S.F[p] > 0 ? 1 : 0);\n      }\n      if (w === LAND) {\n        display.setPixel(x, y, 14, 12, 10);\n        continue;\n      }\n      if (front \u003c 0 && level \u003c 0) glow = tipAt.has(p) ? 1 : exp(-(S.clock - born[p]) / 0.22);\n      hsv(S.hue + H0 + w / n, SAT, 1, c);\n      const v = 255, s = 1 - 0.85 * glow;\n      display.setPixel(x, y, round(v * (c[0] * s + 1 - s)), round(v * (c[1] * s + 1 - s)), round(v * (c[2] * s + 1 - s)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds."},{"name":"Lakes","min":3,"max":5,"about":"How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters."},{"name":"Wander","min":0,"max":1,"about":"How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends."}],"start":[0,2,3,0.06],"measures":{"motion":0.0225,"detail":0.2272,"edges":1,"complexity":0.1697,"coverage":0.5713,"colour":0.6325,"drift":0.1351},"knobResponse":[0.4015,0.1136,0.142,0.1216]},{"slug":"lap-pool","title":"Lap Pool","family":"sport","round":21,"note":"야외 25 m 수영장을 바로 위에서 내려다본 그림이 128줄을 다 써요. 색 수모를 쓴 사람들이 레인마다 제 속도로 오가다 벽에서 플립 턴을 하고, 뒤로 퍼지는 V자 물결이 빨강·하양·파랑 레인 로프를 흔들어요. 타일 바닥에는 햇빛이 만든 물결 그물이 흘러요.","idea":"A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","layer":{"id":"layer-lap-pool","type":"code","name":"lap-pool","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stroke","min":0,"max":3,"about":"What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20."},{"name":"Swimmers","min":4,"max":15,"about":"Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15."},{"name":"Sun","min":-1,"max":1,"about":"Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes."}],"start":[0,2,4,0.06],"measures":{"motion":0.3073,"detail":0.1425,"edges":0.4977,"complexity":2.1556,"coverage":0.9906,"colour":0.3817,"drift":0.0257},"knobResponse":[0.044,0.0596,0.0629,0.1105]},{"slug":"lava-lake","title":"Lava Lake","family":"volcano","round":27,"note":"화구 가장자리에서 용암 호수를 곧장 내려다봐요. 검은 지각 판들이 노랗게 벌어진 확장 균열에서 떨어져 나와 변환 단층을 끼고 위아래로 흘러가다, 계단진 화구 벽 밑에서 밝은 이음매를 그으며 가라앉아요. K1 은 틈을 주황 용암 강으로 넓히고, 누르면 큰 가스 거품이 터져 용암을 튀겨요.","idea":"Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.","buttons":"K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.","code":"// ===== Patternflow pattern =====\n// Title:   Lava Lake\n// Family:  volcano\n// Idea:    Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the lava lakes of Erta Ale and Nyiragongo seen from the crater rim\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1\n//\n// Knob 1: Heat. At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter.\n// Knob 2: Speed. At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower.\n// Knob 3: Plates. At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three.\n// Knob 4: Spatter. How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder.\n// Buttons: K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.\n\nconst W = 64, H = 128, N = W * H;\n// Sparks at most; plates are 1 / AX wider than tall, stretched along the\n// crack; the crust drifts V LEDs per second at Speed 2.\nconst MAXP = 700, AX = 0.72, V = 1.6;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction h32(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return (h ^ (h >>> 16)) >>> 0;\n}\nconst hash = (i, j) => h32(i, j) / 4294967296;\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Smooth noise on a 128 x 128 torus, features about eight texels across.\nconst NZ = new Float32Array(128 * 128).map((_, k) => 0.65 * vn((k & 127) / 8, (k >> 7) / 8, 16) + 0.35 * vn((k & 127) / 4 + 3, (k >> 7) / 4, 32));\nfunction nz(u, v) {\n  const xi = floor(u), yi = floor(v), fx = u - xi, fy = v - yi, x0 = xi & 127, y0 = (yi & 127) \u003c\u003c 7, x1 = (x0 + 1) & 127, y1 = ((yi + 1) & 127) \u003c\u003c 7;\n  const a = NZ[y0 + x0], b = NZ[y0 + x1], c = NZ[y1 + x0];\n  return a + (b - a) * fx + (c - a) * fy + (a - b - c + NZ[y1 + x1]) * fx * fy;\n}\n// Lava by temperature: dull red, cherry, orange, yellow, the white of a fresh tear.\nconst STOPS = [[0, 30, 1, 0], [0.2, 104, 7, 0], [0.4, 184, 27, 2], [0.6, 238, 82, 7], [0.8, 250, 158, 36], [1, 254, 230, 148]];\nconst LUT = new Float32Array(257 * 3);\nfor (let q = 0; q \u003c= 256; q++) {\n  const T = q / 256;\n  let k = 0;\n  while (k \u003c 4 && T > STOPS[k + 1][0]) k++;\n  const [a, b] = [STOPS[k], STOPS[k + 1]], u = (T - a[0]) / (b[0] - a[0]);\n  for (let c = 0; c \u003c 3; c++) LUT[q * 3 + c] = mix(a[c + 1], b[c + 1], u);\n}\nconst lut = (T) => round(cl(T, 0, 1) * 256) * 3;\n// exp(-v) for v >= 0, read from a table.\nconst EX = new Float32Array(1025).map((_, k) => exp(-k / 64)), ex = (v) => (v \u003c 16 ? EX[(v * 64) | 0] : 0);\n// sin, read from a table.\nconst SN = new Float32Array(1024).map((_, k) => sin((k * PI) / 512)), fsin = (a) => SN[(a * 162.97) & 1023];\n\n// The shore of the lake under each column, and where the crater rim is.\nconst ST = new Float32Array(W), SB = new Float32Array(W), RT = new Float32Array(W), RB = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  ST[x] = 17.5 + 2.2 * sin(x * 0.11 + 1) + 1.4 * sin(x * 0.29 + 4) + 1.6 * (vn(x * 0.35, 2, 64) - 0.5);\n  SB[x] = 109.5 + 2.4 * sin(x * 0.09 + 3) + 1.3 * sin(x * 0.31) + 1.6 * (vn(x * 0.35, 9, 64) - 0.5);\n  RT[x] = 4 + 1.6 * sin(x * 0.07 + 2) + 1.4 * vn(x * 0.4, 5, 64);\n  RB[x] = H - 4 - 1.5 * sin(x * 0.08) - 1.4 * vn(x * 0.4, 7, 64);\n}\n// The walls: old lava beds stacked up the crater, the lip of each catching\n// the lake's light, and the rim at the top; a dark grain everywhere.\nconst WG = new Float32Array(N * 3), WA = new Float32Array(N);\nfor (let i = 0; i \u003c N; i++) {\n  const x = i & 63, y = i >> 6, top = y \u003c 64, u = top ? ST[x] - y - 0.5 : y + 0.5 - SB[x], g = h32(i, 77);\n  const q = u * 0.27 + 0.7 * vn(x * 0.1, top ? 1 : 30, 64) + 0.25 * vn(x * 0.4, top ? 4 : 40, 64), k = floor(q) + (top ? 0 : 50), f = q - floor(q);\n  WG[i * 3] = (g & 31) * 0.78;\n  WG[i * 3 + 1] = ((g >> 5) & 31) * 0.78;\n  WG[i * 3 + 2] = ((g >> 10) & 31) * 0.78;\n  const rim = top ? RT[x] - y - 0.5 : y + 0.5 - RB[x];\n  WA[i] = rim > 0.5 ? 0 : (rim > -0.5 ? 0.9 : (0.5 + 0.5 * hash(k, 3)) * sm(0.34, 0.08, f) * sm(0.12, 0.32, vn(x * 0.25, k * 7, 64))) * (0.8 + 0.4 * hash(i, 5));\n}\n\n// The fumaroles, each as its column and its height above the shore; the\n// last number is 1 on the top wall.\nconst VENTS = [[6, 5, 1], [27, 8, 1], [44, 4.5, 1], [15, 4.5, 0], [36, 7, 0], [55, 5, 0]];\n// Where the spreading crack steps sideways, and by how much: one fault at\n// the start, two or three as the crust breaks up.\nconst FAULTS = [[27, 11], [17, 9, 45, -8], [12, 8, 31, -10, 50, 8]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  params.s = {\n    PX: F32(MAXP), PY: F32(MAXP), PVX: F32(MAXP), PVY: F32(MAXP), PF: F32(MAXP), PT: F32(MAXP), PG: new Int8Array(MAXP), np: 0,\n    t: 0, off: 0, k3: -1, heat: 0, spat: 0.06, c: 13, pm: 0.18, tf: FAULTS[0], rb: 50,\n    bubs: [], fl: [], hot: [], puffs: [], vt: [0, 0, 0, 0, 0, 0], fnd: null, fe: 0, next: 1.2, nfl: 0.5,\n  };\n}\n\nfunction ridge(S, x) {\n  let y = S.rb + 2.2 * sin(x * 0.085 + S.t * 0.05) + 1.3 * sin(x * 0.23 - S.t * 0.037 + 2);\n  for (let k = 0; k \u003c S.tf.length; k += 2) y += S.tf[k + 1] * (1 / (1 + exp(-(x - S.tf[k]) / 0.6)) - 0.5);\n  return y;\n}\n\n// The crust on each side of the crack is one rigid sheet sliding away from\n// it, so its plates are cells of a jittered grid in the sheet's own frame.\n// Each frame the grid points the panel can see are kept in a table (tab).\nconst CELL = { id: 0, px: 0, py: 0, e: 9, em: 9 }, TPX = new Float32Array(2048), TPY = new Float32Array(2048), TID = new Uint32Array(2048), GY0 = [0, 0];\nlet GX0 = 0, TW = 1;\nconst grid = (gx, gy, s) => h32(gx + s * 7919, gy);\nfunction table(off, c) {\n  (GX0 = floor((-3 * AX) / c) - 2), (TW = floor((67 * AX) / c) + 3 - GX0);\n  for (let s = 0; s \u003c 2; s++) {\n    const y0 = (s ? -off : off) + s * 300 - 3, n = floor((y0 + 134) / c) + 3 - (GY0[s] = floor(y0 / c) - 2);\n    for (let j = 0; j \u003c n * TW && j \u003c 1024; j++) {\n      const gx = GX0 + (j % TW), gy = GY0[s] + floor(j / TW), h = grid(gx, gy, s), q = s * 1024 + j;\n      (TID[q] = h), (TPX[q] = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (TPY[q] = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n    }\n  }\n}\nfunction cells(xx, ya, s, c, pm, tab) {\n  const u = (xx * AX) / c, v = ya / c, cu = floor(u), cv = floor(v);\n  let d1 = 99, d2 = 99, d3 = 99, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0, i1 = 0, i2 = 0, i3 = 0;\n  for (let gy = cv - 1; gy \u003c= cv + 1; gy++)\n    for (let gx = cu - 1; gx \u003c= cu + 1; gx++) {\n      let h, px, py;\n      if (tab) {\n        const q = s * 1024 + (gy - GY0[s]) * TW + gx - GX0;\n        (h = TID[q]), (px = TPX[q]), (py = TPY[q]);\n      } else (h = grid(gx, gy, s)), (px = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (py = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n      const d = (px - u) * (px - u) + (py - v) * (py - v);\n      if (d \u003c d1) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d1), (a2 = a1), (b2 = b1), (i2 = i1), (d1 = d), (a1 = px), (b1 = py), (i1 = h);\n      else if (d \u003c d2) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d), (a2 = px), (b2 = py), (i2 = h);\n      else if (d \u003c d3) (d3 = d), (a3 = px), (b3 = py), (i3 = h);\n    }\n  // Some neighbours have frozen together into one bigger, odd-shaped plate.\n  let e = (c * (d2 - d1)) / (2 * sqrt(AX * AX * (a1 - a2) ** 2 + (b1 - b2) ** 2) + 1e-6), em = 9;\n  if (hash(i1 ^ i2, 99) \u003c pm) {\n    em = e;\n    e = hash(i1 ^ i3, 99) \u003c pm ? 9 : (c * (d3 - d1)) / (2 * sqrt(AX * AX * (a1 - a3) ** 2 + (b1 - b3) ** 2) + 1e-6);\n  }\n  (CELL.id = i1), (CELL.px = (a1 * c) / AX), (CELL.py = b1 * c), (CELL.e = e), (CELL.em = em);\n  return CELL;\n}\n\nfunction bubble(S, big) {\n  const x = 4 + rnd() * 56, y = mix(ST[floor(x)] + 7, SB[floor(x)] - 7, 0.1 + 0.8 * rnd());\n  const sg = y \u003c ridge(S, x) ? -1 : 1;\n  S.bubs.push({ x, y, sg, t0: S.t, r: big ? 4.5 + 2 * rnd() : 1.2 + rnd() * (1.4 + 1.8 * S.spat), big: big ? 1 : rnd() \u003c S.spat * 0.4 ? 0.6 : 0, done: 0 });\n}\nfunction spark(S, x, y, sp, tf) {\n  if (S.np >= MAXP) return;\n  const i = S.np++, a = rnd() * 2 * PI;\n  (S.PX[i] = x), (S.PY[i] = y), (S.PVX[i] = cos(a) * sp), (S.PVY[i] = sin(a) * sp), (S.PF[i] = tf), (S.PT[i] = 0.62 + 0.3 * rnd()), (S.PG[i] = 0);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d);\n  S.off += V * d;\n  // Gas bubbles: a couple of seconds apart at the start, often and bigger with Spatter.\n  if ((S.next -= d * (0.35 + 2.2 * S.spat)) \u003c= 0) bubble(S, rnd() \u003c (S.spat - 0.55) * 0.5), (S.next = 0.4 + rnd());\n  for (const b of S.bubs) {\n    const a = t - b.t0;\n    b.y += b.sg * V * d;\n    if (a > 0.6 && !b.done) {\n      b.done = 1;\n      S.fe = max(S.fe, 0.25 + 0.9 * b.big + 0.05 * b.r);\n      for (let k = 0; k \u003c 5 + 7 * b.r + 40 * b.big; k++) spark(S, b.x, b.y, 3 + rnd() * (6 + 3 * b.r), 0.25 + rnd() * (0.4 + 0.8 * b.big));\n    }\n    // A big bubble keeps a fountain going for a while.\n    if (b.big && a > 0.6 && a \u003c 0.6 + 2 * b.big) for (let k = 0; k \u003c 2 + 4 * b.big; k++) spark(S, b.x + rnd() - 0.5, b.y + rnd() - 0.5, 2 + rnd() * 13 * b.big, 0.4 + rnd() * 1.1 * b.big);\n  }\n  S.bubs = S.bubs.filter((b) => t - b.t0 \u003c 5);\n  // Sparks fly out from the burst, land on the crust and ride it as they cool.\n  const { PX, PY, PVX, PVY, PF, PT, PG } = S;\n  let j = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    if (PF[i] > 0) {\n      (PX[i] += PVX[i] * d), (PY[i] += PVY[i] * d);\n      if ((PF[i] -= d) \u003c= 0) {\n        const x = floor(cl(PX[i], 0, W - 1));\n        PG[i] = PY[i] \u003c ST[x] || PY[i] > SB[x] ? 0 : PY[i] \u003c ridge(S, PX[i]) ? -1 : 1;\n      }\n    } else (PT[i] -= d * 0.28), (PY[i] += PG[i] * V * d);\n    if (PT[i] \u003c= 0 || PX[i] \u003c -2 || PX[i] > W + 2 || PY[i] \u003c -2 || PY[i] > H + 2) continue;\n    (PX[j] = PX[i]), (PY[j] = PY[i]), (PVX[j] = PVX[i]), (PVY[j] = PVY[i]), (PF[j] = PF[i]), (PT[j] = PT[i]), (PG[j] = PG[i]), j++;\n  }\n  S.np = j;\n  // Where plates dive under the walls the crust breaks with a flash.\n  if ((S.nfl -= d * V) \u003c= 0) S.fl.push({ x: rnd() * W, top: rnd() \u003c 0.4, t0: t, a: 0.4 + 0.6 * rnd() }), (S.nfl = 0.3 + 1.1 * rnd());\n  S.fl = S.fl.filter((f) => t - f.t0 \u003c 1.6);\n  // Fumaroles in the walls breathe out puffs that the wind takes along the rim.\n  VENTS.forEach(([x, u, top], k) => {\n    if ((S.vt[k] -= d * (1.6 + 3 * S.spat)) \u003c= 0) (S.vt[k] = 0.6 + 0.6 * rnd()), S.puffs.push({ x: x + rnd() - 0.5, u, top, t0: t, r: 1.4 + rnd() + 2 * S.spat });\n  });\n  for (const p of S.puffs) (p.x += (2.2 + 0.6 * sin(t * 0.3)) * d), (p.u += 1.1 * d);\n  S.puffs = S.puffs.filter((p) => t - p.t0 \u003c 4.5 && p.x \u003c W + 6);\n  S.fe *= exp(-d / 0.5);\n  // A foundering plate sinks for two seconds, then the hole crusts over.\n  const f = S.fnd;\n  if (f && t - f.t0 > 2.2) S.hot.push({ s: f.s, id: f.id, t }), (S.fnd = null);\n  S.hot = S.hot.filter((h) => t - h.t \u003c 7);\n}\n\nfunction founder(S) {\n  if (S.fnd) return;\n  const x = 16 + rnd() * 32, y = 72 + rnd() * 16, c = cells(x, y - S.off + 300, 1, S.c, S.pm);\n  S.fnd = { s: 1, id: c.id, t0: S.t };\n  S.fe = max(S.fe, 0.5);\n  for (let k = 0; k \u003c 24; k++) spark(S, x + (rnd() - 0.5) * S.c, y + (rnd() - 0.5) * S.c * 0.7, 2 + 5 * rnd(), 0.2 + 0.4 * rnd());\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k3 = cl(k[2], 0, 1);\n  S.heat = cl(k[0], 0, 1);\n  S.spat = cl(k[3], 0, 1);\n  if (abs(k3 - S.k3) > 0.005) (S.k3 = k3), (S.c = mix(13, 6, k3)), (S.pm = mix(0.18, 0.06, k3)), (S.tf = FAULTS[min(2, floor(k3 * 2.6))]), (S.fnd = null);\n  const p = input.btnPressed || [];\n  if (p[0]) bubble(S, 1), (S.bubs[S.bubs.length - 1].t0 -= 0.3);\n  if (p[1]) founder(S);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nconst F = new Float32Array(N * 3), SD = new Float32Array(N), RC = new Float32Array(W + 2), RMN = new Float32Array(W), RMX = new Float32Array(W);\nconst LAKE = [205, 80, 46], STEAM = [170, 112, 100], FL = new Float32Array(W * 2), SHN = new Float32Array(W * 2), WRN = new Float32Array(W), HS = new Int8Array(8), HI = new Uint32Array(8), HT = new Float32Array(8);\n\n// The distance from (x, y) to the crack, along its line through the column centres.\nlet STEEP = 0;\nfunction ridgeDist(x, xx, yy) {\n  let best = 1e9;\n  for (let c = max(0, x - 5); c \u003c min(W, x + 5); c++) {\n    const ax = c + 0.5, ay = RC[c], ey = RC[c + 1] - ay;\n    const u = cl((xx - ax + (yy - ay) * ey) / (1 + ey * ey), 0, 1), dx = xx - ax - u, dy = yy - ay - ey * u, d = dx * dx + dy * dy;\n    if (d \u003c best) (best = d), (STEEP = abs(ey));\n  }\n  return sqrt(best);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k3 \u003c 0) return;\n  const { t, heat, off, c: C } = S;\n  for (let x = 0; x \u003c W + 1; x++) RC[x] = ridge(S, x + 0.5);\n  for (let x = 0; x \u003c W; x++) {\n    let a = 1e9, b = -1e9;\n    for (let c = max(0, x - 5); c \u003c= min(W, x + 5); c++) (a = min(a, RC[c])), (b = max(b, RC[c]));\n    (RMN[x] = a), (RMX[x] = b), (WRN[x] = 0.5 + nz(x * 0.9 + 70, t * 0.7 + 20));\n    for (let s = 0; s \u003c 2; s++) SHN[x * 2 + s] = sm(0.3, 0.75, nz(x * 1.4 + 90 + s * 40, t * 0.5));\n  }\n  const LL = (0.5 + 0.75 * heat) * (0.92 + 0.08 * sin(t * 0.45)) + S.fe;\n  const ws0 = 0.42 + 2.5 * heat, wr0 = 0.8 + 3.4 * heat, Lc = 1.6 + 7 * heat, opA = 0.22 - 0.3 * heat;\n  table(off, C);\n  const fnd = S.fnd, fp = fnd ? cl((t - fnd.t0) / 2.2, 0, 1) : 0, nh = min(8, S.hot.length);\n  for (let k = 0; k \u003c nh; k++) (HS[k] = S.hot[k].s), (HI[k] = S.hot[k].id), (HT[k] = S.hot[k].t);\n  // Flashes along each shore, per column.\n  FL.fill(0);\n  for (const f of S.fl) for (let x = 0; x \u003c W; x++) FL[x * 2 + (f.top ? 0 : 1)] += f.a * exp(-(((x + 0.5 - f.x) / 2.6) ** 2)) * sm(0, 0.1, t - f.t0) * exp(-(t - f.t0) / 0.45);\n\n  for (let y = 0; y \u003c H; y++) {\n    const yy = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, xx = x + 0.5, st = ST[x], sb = SB[x];\n      if (yy \u003c st || yy > sb) {\n        // Crater wall, lit red from the lake below: its foot, then the lip of each bed.\n        const top = yy \u003c st, u = top ? st - yy : yy - sb, a = WA[i];\n        const lw = LL * (1.7 * ex(u / 1.6) * (0.6 + 0.6 * a) + 2.4 * a * ex(u / 11));\n        for (let c = 0; c \u003c 3; c++) F[o + c] = WG[o + c] + LAKE[c] * lw;\n        continue;\n      }\n      const up = yy \u003c RC[x], s = up ? 0 : 1, sg = up ? -1 : 1, ya = yy - sg * off + s * 300;\n      // Plate edges bend a little: the grid is read through a slow warp.\n      const n1 = nz(xx * 1.3, ya * 1.3), n2 = nz(xx * 0.6 + 40, ya * 0.6), P = cells(xx + 3 * (n2 - 0.5), ya + 2.6 * (n1 - 0.5), s, C, S.pm, 1), id = P.id, e = P.e, em = P.em, px = P.px, py = P.py;\n      STEEP = 0;\n      const dr = yy > RMN[x] - 7 && yy \u003c RMX[x] + 7 ? ridgeDist(x, xx, yy) : abs(yy - RC[x]) * 0.92, tf = sm(1.2, 3, STEEP);\n      const ds = up ? yy - st : sb - yy;\n\n      // The crust: black, its grain and ropes fixed to the plate.\n      const lx = xx - px, ly = (ya - py) * sg, g = h32(x + s * 131, round(ya) + 5003), pt = (id & 255) / 255;\n      const rope = fsin(ly * 1.9 + 0.05 * lx * lx + pt * 40) * (0.6 + 0.4 * fsin(lx * 0.4 + pt * 9)), tilt = 0.45 + 0.55 * sm(0, 4, ds);\n      let cr = ((g & 31) * 0.76 + rope * 1.5 + pt * 2) * tilt, cg = (((g >> 5) & 31) * 0.74 + rope * 2) * tilt, cb = (((g >> 10) & 31) * 0.76 + rope * 2.5 + pt * 2.5) * tilt;\n      // Young crust near the crack still glows through; so does a plate that foundered and froze over.\n      let Tc = 0.62 * ex(dr / Lc) * (0.65 + 0.7 * n1), hot = 99;\n      for (let k = 0; k \u003c nh; k++) if (HS[k] === s && HI[k] === id) hot = t - HT[k];\n      if (hot \u003c 7) Tc = max(Tc, 0.9 * exp(-hot / 0.7) * (0.75 + 0.5 * n2));\n      Tc = max(Tc, 0.22 * ex(e / 0.7) * (0.6 + heat));\n      if (Tc > 0.02) {\n        const L = lut(Tc), gl = sm(0, 0.5, Tc) * (0.75 + 0.03 * ((g >> 12) & 15));\n        (cr += LUT[L] * gl), (cg += LUT[L + 1] * gl), (cb += LUT[L + 2] * gl);\n      }\n      if (em \u003c 1.2) cr += 14 * sm(1.2, 0.2, em + 0.8 * (n1 - 0.5));\n      // Seams between plates: some open and red, some crusted shut; near the crack they spread wider.\n      const ws = ws0 * (0.4 + 1.2 * n1) * (1 + 0.7 * ex(dr / 6)), op = sm(opA, opA + 0.12, n1);\n      let A = e \u003c ws + 0.35 ? sm(ws + 0.35, ws - 0.25, e) * op : 0, T = 0.57 + 0.27 * heat + 0.12 * ex(dr / 8) + 0.36 * (n2 - 0.5);\n      // The spreading crack: the hottest lava, opening and closing along its length.\n      const wr = wr0 * WRN[x] * (1 - 0.6 * tf), ar = dr \u003c wr + 0.6 ? sm(wr + 0.6, wr - 0.4, dr) : 0;\n      if (ar > A) (A = ar), (T = 0.9 + 0.1 * heat - 0.3 * (dr / (wr + 0.6)) ** 2 + 0.25 * (n1 - 0.5) - 0.3 * tf);\n      // The shore where the crust dives under, flashing as it breaks.\n      const sh = ds \u003c 5 ? sm(1.7, 0.2, ds) * SHN[x * 2 + s] + 0.7 * ex(e / 1.2) * sm(5, 0.5, ds) + FL[x * 2 + s] * sm(4, 0.3, ds) : 0;\n      if (sh > A) (A = min(1, sh)), (T = 0.45 + 0.3 * heat + 0.3 * min(1, sh) + 0.2 * (n2 - 0.5));\n      // A foundering plate: its edges melt inward as it tilts and sinks.\n      if (fnd && fnd.s === s && fnd.id === id) {\n        const fa = sm(fp * 0.5 * C + 0.6, fp * 0.5 * C - 0.4, e);\n        (cr *= 1 - 0.6 * fp), (cg *= 1 - 0.6 * fp), (cb *= 1 - 0.6 * fp);\n        if (fa > A) (A = fa), (T = 0.62 + 0.3 * (1 - fp) + 0.2 * (n1 - 0.5));\n      }\n      if (hot \u003c 7) {\n        // The hole skins over in small new plates, their cracks narrowing and dimming.\n        const k = exp(-hot / 1.3), w = 0.3 + 3.5 * k * k * k, ha = sm(w + 0.5, w - 0.4, cells(xx, ya, s + 2, 4.5, 0).e) * sm(7, 4, hot);\n        if (ha > A) (A = ha), (T = 0.24 + 0.72 * k + 0.8 * k * (nz(xx * 2.4, ya * 2.4 + 9) - 0.5));\n      }\n      if (A > 0.003) {\n        // Open lava wrinkles a dark skin on itself as it cools.\n        const sw = hot \u003c 7 ? 0.8 : sm(0.2, 0.6, heat), sk = A > 0.5 && sw > 0 ? sm(0.07, 0.01, abs(nz(xx * 2.2 + 5, ya * 2.2) - 0.5)) * sw * 0.7 : 0;\n        const L = lut(T), b = A * (1 - sk);\n        (cr = mix(cr, LUT[L] + ((g >> 15) & 15) - 7.5, b)), (cg = mix(cg, LUT[L + 1] + ((g >> 19) & 31) * 0.8 - 12, b)), (cb = mix(cb, LUT[L + 2] + ((g >>> 24) & 31) * 0.8, b));\n      }\n      (F[o] = cr), (F[o + 1] = cg), (F[o + 2] = cb);\n    }\n  }\n  overlay(S, t);\n  // Exposed for the lava, as a night photograph of a lava lake is: what only\n  // glows faintly sinks back into the black of the crust.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const m = max(F[o], F[o + 1], F[o + 2]), k = m > 24 && m \u003c 60 ? (12 + (m - 24) * 1.333) / m : 1;\n    display.setPixel(i & 63, i >> 6, cl(F[o] * k, 0, 255) | 0, cl(F[o + 1] * k, 0, 255) | 0, cl(F[o + 2] * k, 0, 255) | 0);\n  }\n}\n\nfunction add(x, y, L, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], LUT[L + c], min(1, a));\n}\n\nfunction overlay(S, t) {\n  // Bubbles: the crust domes and cracks in a ring, then tears open and freezes over.\n  for (const b of S.bubs) {\n    const a = t - b.t0, R = b.r, E = R * 1.3 + 2, fnt = 2 * b.big;\n    for (let y = max(0, floor(b.y - E)); y \u003c min(H, b.y + E); y++)\n      for (let x = max(0, floor(b.x - E)); x \u003c min(W, b.x + E); x++) {\n        if (y \u003c ST[x] || y > SB[x]) continue;\n        const dx = x + 0.5 - b.x, dy = y + 0.5 - b.y, d = sqrt(dx * dx + dy * dy), o = (y * W + x) * 3;\n        let A, T;\n        if (a \u003c 0.6) {\n          // The crust domes up and cracks: a ring and spokes.\n          const p = a / 0.6, rr = R * (0.6 + 0.4 * p), sp = d \u003c rr ? sm(0.3, 0.08, abs(sin(Math.atan2(dy, dx) * 2.5 + b.r))) * sm(0.5, rr, d) : 0;\n          (A = p * max(sm(1, 0.2, abs(d - rr)), 0.8 * sp)), (T = 0.4 + 0.45 * p);\n        } else {\n          // Torn open: white-hot, churning while a fountain plays, then a skin\n          // closes over it in small plates, as over a foundered one.\n          const c = a - 0.6, hot = c \u003c fnt ? 1 : exp(-(c - fnt) / (0.4 + 0.2 * R)), sk = nz(x * 2.3 + b.r * 9, y * 2.3 + b.t0 * 7 + (c \u003c fnt ? c * 5 : 0));\n          const rr = R * (c \u003c fnt ? 0.6 : 1) * (0.7 + 0.8 * nz(x * 1.1 + b.r * 5, y * 1.1 + 40)), w = 0.3 + 3 * hot * hot * hot;\n          (A = sm(rr + 0.5, rr - 0.5, d) * sm(w + 0.5, w - 0.4, cells(dx + 40, dy + 40, 9 + floor(b.r * 97), 3.2, 0).e) * sm(0, 0.15, hot)), (T = 0.22 + 0.66 * hot - (0.2 * d) / R + 0.5 * (sk - 0.5) + (c \u003c fnt ? 0.25 * sm(R * 0.6, 0, d) : 0));\n          A = max(A, 0.9 * sm(1, 0.2, abs(d - R * 1.15)) * exp(-c / 0.35));\n        }\n        if (A > 0) {\n          const L = lut(T);\n          for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], LUT[L + k], min(1, A));\n        }\n      }\n  }\n  // Steam: soft puffs that swell and thin out, lit from the lake below.\n  SD.fill(0);\n  for (const p of S.puffs) {\n    const a = t - p.t0, r = p.r + 0.8 * a, al = sm(0, 0.5, a) * sm(4.5, 1.5, a);\n    const sx = p.top ? ST[cl(floor(p.x), 0, W - 1)] : SB[cl(floor(p.x), 0, W - 1)], yc = p.top ? sx - p.u : sx + p.u;\n    for (let y = max(0, floor(yc - r)); y \u003c min(H, yc + r + 1); y++) {\n      const u = p.top ? sx - y - 0.5 : y + 0.5 - sx, dy = (u - p.u) / 0.8;\n      if (abs(dy) > r) continue;\n      for (let x = max(0, floor(p.x - r)); x \u003c min(W, p.x + r); x++) {\n        const dx = x + 0.5 - p.x, q = 1 - (dx * dx + dy * dy) / (r * r);\n        if (q \u003c= 0) continue;\n        SD[y * W + x] += al * q * q * (0.45 + 0.55 * ex(max(0, u) / 7)) * (0.7 + 0.6 * nz(x * 1.7 + p.t0 * 13, y * 1.7));\n      }\n    }\n  }\n  const sl = min(1, (0.65 + 0.6 * S.spat) * (S.fe + 0.6 + 0.6 * S.heat));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (SD[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += STEAM[c] * sl * min(1, SD[i]) * (1 - F[o + c] / 255);\n  // Sparks: white-hot in the air, orange where they land, then dull red and gone.\n  const { PX, PY, PVX, PVY, PF, PT, np } = S;\n  for (let i = 0; i \u003c np; i++) {\n    if (PF[i] > 0) {\n      const L = lut(0.93 + 0.07 * sin(i));\n      add(PX[i], PY[i], L, 1), add(PX[i] - PVX[i] * 0.04, PY[i] - PVY[i] * 0.04, L, 0.5);\n    } else add(PX[i], PY[i], lut(PT[i] * 0.85), sm(0, 0.3, PT[i]));\n  }\n}\n","layer":{"id":"layer-lava-lake","type":"code","name":"lava-lake","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lava Lake\n// Family:  volcano\n// Idea:    Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the lava lakes of Erta Ale and Nyiragongo seen from the crater rim\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1\n//\n// Knob 1: Heat. At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter.\n// Knob 2: Speed. At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower.\n// Knob 3: Plates. At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three.\n// Knob 4: Spatter. How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder.\n// Buttons: K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.\n\nconst W = 64, H = 128, N = W * H;\n// Sparks at most; plates are 1 / AX wider than tall, stretched along the\n// crack; the crust drifts V LEDs per second at Speed 2.\nconst MAXP = 700, AX = 0.72, V = 1.6;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction h32(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return (h ^ (h >>> 16)) >>> 0;\n}\nconst hash = (i, j) => h32(i, j) / 4294967296;\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Smooth noise on a 128 x 128 torus, features about eight texels across.\nconst NZ = new Float32Array(128 * 128).map((_, k) => 0.65 * vn((k & 127) / 8, (k >> 7) / 8, 16) + 0.35 * vn((k & 127) / 4 + 3, (k >> 7) / 4, 32));\nfunction nz(u, v) {\n  const xi = floor(u), yi = floor(v), fx = u - xi, fy = v - yi, x0 = xi & 127, y0 = (yi & 127) \u003c\u003c 7, x1 = (x0 + 1) & 127, y1 = ((yi + 1) & 127) \u003c\u003c 7;\n  const a = NZ[y0 + x0], b = NZ[y0 + x1], c = NZ[y1 + x0];\n  return a + (b - a) * fx + (c - a) * fy + (a - b - c + NZ[y1 + x1]) * fx * fy;\n}\n// Lava by temperature: dull red, cherry, orange, yellow, the white of a fresh tear.\nconst STOPS = [[0, 30, 1, 0], [0.2, 104, 7, 0], [0.4, 184, 27, 2], [0.6, 238, 82, 7], [0.8, 250, 158, 36], [1, 254, 230, 148]];\nconst LUT = new Float32Array(257 * 3);\nfor (let q = 0; q \u003c= 256; q++) {\n  const T = q / 256;\n  let k = 0;\n  while (k \u003c 4 && T > STOPS[k + 1][0]) k++;\n  const [a, b] = [STOPS[k], STOPS[k + 1]], u = (T - a[0]) / (b[0] - a[0]);\n  for (let c = 0; c \u003c 3; c++) LUT[q * 3 + c] = mix(a[c + 1], b[c + 1], u);\n}\nconst lut = (T) => round(cl(T, 0, 1) * 256) * 3;\n// exp(-v) for v >= 0, read from a table.\nconst EX = new Float32Array(1025).map((_, k) => exp(-k / 64)), ex = (v) => (v \u003c 16 ? EX[(v * 64) | 0] : 0);\n// sin, read from a table.\nconst SN = new Float32Array(1024).map((_, k) => sin((k * PI) / 512)), fsin = (a) => SN[(a * 162.97) & 1023];\n\n// The shore of the lake under each column, and where the crater rim is.\nconst ST = new Float32Array(W), SB = new Float32Array(W), RT = new Float32Array(W), RB = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  ST[x] = 17.5 + 2.2 * sin(x * 0.11 + 1) + 1.4 * sin(x * 0.29 + 4) + 1.6 * (vn(x * 0.35, 2, 64) - 0.5);\n  SB[x] = 109.5 + 2.4 * sin(x * 0.09 + 3) + 1.3 * sin(x * 0.31) + 1.6 * (vn(x * 0.35, 9, 64) - 0.5);\n  RT[x] = 4 + 1.6 * sin(x * 0.07 + 2) + 1.4 * vn(x * 0.4, 5, 64);\n  RB[x] = H - 4 - 1.5 * sin(x * 0.08) - 1.4 * vn(x * 0.4, 7, 64);\n}\n// The walls: old lava beds stacked up the crater, the lip of each catching\n// the lake's light, and the rim at the top; a dark grain everywhere.\nconst WG = new Float32Array(N * 3), WA = new Float32Array(N);\nfor (let i = 0; i \u003c N; i++) {\n  const x = i & 63, y = i >> 6, top = y \u003c 64, u = top ? ST[x] - y - 0.5 : y + 0.5 - SB[x], g = h32(i, 77);\n  const q = u * 0.27 + 0.7 * vn(x * 0.1, top ? 1 : 30, 64) + 0.25 * vn(x * 0.4, top ? 4 : 40, 64), k = floor(q) + (top ? 0 : 50), f = q - floor(q);\n  WG[i * 3] = (g & 31) * 0.78;\n  WG[i * 3 + 1] = ((g >> 5) & 31) * 0.78;\n  WG[i * 3 + 2] = ((g >> 10) & 31) * 0.78;\n  const rim = top ? RT[x] - y - 0.5 : y + 0.5 - RB[x];\n  WA[i] = rim > 0.5 ? 0 : (rim > -0.5 ? 0.9 : (0.5 + 0.5 * hash(k, 3)) * sm(0.34, 0.08, f) * sm(0.12, 0.32, vn(x * 0.25, k * 7, 64))) * (0.8 + 0.4 * hash(i, 5));\n}\n\n// The fumaroles, each as its column and its height above the shore; the\n// last number is 1 on the top wall.\nconst VENTS = [[6, 5, 1], [27, 8, 1], [44, 4.5, 1], [15, 4.5, 0], [36, 7, 0], [55, 5, 0]];\n// Where the spreading crack steps sideways, and by how much: one fault at\n// the start, two or three as the crust breaks up.\nconst FAULTS = [[27, 11], [17, 9, 45, -8], [12, 8, 31, -10, 50, 8]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  params.s = {\n    PX: F32(MAXP), PY: F32(MAXP), PVX: F32(MAXP), PVY: F32(MAXP), PF: F32(MAXP), PT: F32(MAXP), PG: new Int8Array(MAXP), np: 0,\n    t: 0, off: 0, k3: -1, heat: 0, spat: 0.06, c: 13, pm: 0.18, tf: FAULTS[0], rb: 50,\n    bubs: [], fl: [], hot: [], puffs: [], vt: [0, 0, 0, 0, 0, 0], fnd: null, fe: 0, next: 1.2, nfl: 0.5,\n  };\n}\n\nfunction ridge(S, x) {\n  let y = S.rb + 2.2 * sin(x * 0.085 + S.t * 0.05) + 1.3 * sin(x * 0.23 - S.t * 0.037 + 2);\n  for (let k = 0; k \u003c S.tf.length; k += 2) y += S.tf[k + 1] * (1 / (1 + exp(-(x - S.tf[k]) / 0.6)) - 0.5);\n  return y;\n}\n\n// The crust on each side of the crack is one rigid sheet sliding away from\n// it, so its plates are cells of a jittered grid in the sheet's own frame.\n// Each frame the grid points the panel can see are kept in a table (tab).\nconst CELL = { id: 0, px: 0, py: 0, e: 9, em: 9 }, TPX = new Float32Array(2048), TPY = new Float32Array(2048), TID = new Uint32Array(2048), GY0 = [0, 0];\nlet GX0 = 0, TW = 1;\nconst grid = (gx, gy, s) => h32(gx + s * 7919, gy);\nfunction table(off, c) {\n  (GX0 = floor((-3 * AX) / c) - 2), (TW = floor((67 * AX) / c) + 3 - GX0);\n  for (let s = 0; s \u003c 2; s++) {\n    const y0 = (s ? -off : off) + s * 300 - 3, n = floor((y0 + 134) / c) + 3 - (GY0[s] = floor(y0 / c) - 2);\n    for (let j = 0; j \u003c n * TW && j \u003c 1024; j++) {\n      const gx = GX0 + (j % TW), gy = GY0[s] + floor(j / TW), h = grid(gx, gy, s), q = s * 1024 + j;\n      (TID[q] = h), (TPX[q] = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (TPY[q] = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n    }\n  }\n}\nfunction cells(xx, ya, s, c, pm, tab) {\n  const u = (xx * AX) / c, v = ya / c, cu = floor(u), cv = floor(v);\n  let d1 = 99, d2 = 99, d3 = 99, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0, i1 = 0, i2 = 0, i3 = 0;\n  for (let gy = cv - 1; gy \u003c= cv + 1; gy++)\n    for (let gx = cu - 1; gx \u003c= cu + 1; gx++) {\n      let h, px, py;\n      if (tab) {\n        const q = s * 1024 + (gy - GY0[s]) * TW + gx - GX0;\n        (h = TID[q]), (px = TPX[q]), (py = TPY[q]);\n      } else (h = grid(gx, gy, s)), (px = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (py = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n      const d = (px - u) * (px - u) + (py - v) * (py - v);\n      if (d \u003c d1) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d1), (a2 = a1), (b2 = b1), (i2 = i1), (d1 = d), (a1 = px), (b1 = py), (i1 = h);\n      else if (d \u003c d2) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d), (a2 = px), (b2 = py), (i2 = h);\n      else if (d \u003c d3) (d3 = d), (a3 = px), (b3 = py), (i3 = h);\n    }\n  // Some neighbours have frozen together into one bigger, odd-shaped plate.\n  let e = (c * (d2 - d1)) / (2 * sqrt(AX * AX * (a1 - a2) ** 2 + (b1 - b2) ** 2) + 1e-6), em = 9;\n  if (hash(i1 ^ i2, 99) \u003c pm) {\n    em = e;\n    e = hash(i1 ^ i3, 99) \u003c pm ? 9 : (c * (d3 - d1)) / (2 * sqrt(AX * AX * (a1 - a3) ** 2 + (b1 - b3) ** 2) + 1e-6);\n  }\n  (CELL.id = i1), (CELL.px = (a1 * c) / AX), (CELL.py = b1 * c), (CELL.e = e), (CELL.em = em);\n  return CELL;\n}\n\nfunction bubble(S, big) {\n  const x = 4 + rnd() * 56, y = mix(ST[floor(x)] + 7, SB[floor(x)] - 7, 0.1 + 0.8 * rnd());\n  const sg = y \u003c ridge(S, x) ? -1 : 1;\n  S.bubs.push({ x, y, sg, t0: S.t, r: big ? 4.5 + 2 * rnd() : 1.2 + rnd() * (1.4 + 1.8 * S.spat), big: big ? 1 : rnd() \u003c S.spat * 0.4 ? 0.6 : 0, done: 0 });\n}\nfunction spark(S, x, y, sp, tf) {\n  if (S.np >= MAXP) return;\n  const i = S.np++, a = rnd() * 2 * PI;\n  (S.PX[i] = x), (S.PY[i] = y), (S.PVX[i] = cos(a) * sp), (S.PVY[i] = sin(a) * sp), (S.PF[i] = tf), (S.PT[i] = 0.62 + 0.3 * rnd()), (S.PG[i] = 0);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d);\n  S.off += V * d;\n  // Gas bubbles: a couple of seconds apart at the start, often and bigger with Spatter.\n  if ((S.next -= d * (0.35 + 2.2 * S.spat)) \u003c= 0) bubble(S, rnd() \u003c (S.spat - 0.55) * 0.5), (S.next = 0.4 + rnd());\n  for (const b of S.bubs) {\n    const a = t - b.t0;\n    b.y += b.sg * V * d;\n    if (a > 0.6 && !b.done) {\n      b.done = 1;\n      S.fe = max(S.fe, 0.25 + 0.9 * b.big + 0.05 * b.r);\n      for (let k = 0; k \u003c 5 + 7 * b.r + 40 * b.big; k++) spark(S, b.x, b.y, 3 + rnd() * (6 + 3 * b.r), 0.25 + rnd() * (0.4 + 0.8 * b.big));\n    }\n    // A big bubble keeps a fountain going for a while.\n    if (b.big && a > 0.6 && a \u003c 0.6 + 2 * b.big) for (let k = 0; k \u003c 2 + 4 * b.big; k++) spark(S, b.x + rnd() - 0.5, b.y + rnd() - 0.5, 2 + rnd() * 13 * b.big, 0.4 + rnd() * 1.1 * b.big);\n  }\n  S.bubs = S.bubs.filter((b) => t - b.t0 \u003c 5);\n  // Sparks fly out from the burst, land on the crust and ride it as they cool.\n  const { PX, PY, PVX, PVY, PF, PT, PG } = S;\n  let j = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    if (PF[i] > 0) {\n      (PX[i] += PVX[i] * d), (PY[i] += PVY[i] * d);\n      if ((PF[i] -= d) \u003c= 0) {\n        const x = floor(cl(PX[i], 0, W - 1));\n        PG[i] = PY[i] \u003c ST[x] || PY[i] > SB[x] ? 0 : PY[i] \u003c ridge(S, PX[i]) ? -1 : 1;\n      }\n    } else (PT[i] -= d * 0.28), (PY[i] += PG[i] * V * d);\n    if (PT[i] \u003c= 0 || PX[i] \u003c -2 || PX[i] > W + 2 || PY[i] \u003c -2 || PY[i] > H + 2) continue;\n    (PX[j] = PX[i]), (PY[j] = PY[i]), (PVX[j] = PVX[i]), (PVY[j] = PVY[i]), (PF[j] = PF[i]), (PT[j] = PT[i]), (PG[j] = PG[i]), j++;\n  }\n  S.np = j;\n  // Where plates dive under the walls the crust breaks with a flash.\n  if ((S.nfl -= d * V) \u003c= 0) S.fl.push({ x: rnd() * W, top: rnd() \u003c 0.4, t0: t, a: 0.4 + 0.6 * rnd() }), (S.nfl = 0.3 + 1.1 * rnd());\n  S.fl = S.fl.filter((f) => t - f.t0 \u003c 1.6);\n  // Fumaroles in the walls breathe out puffs that the wind takes along the rim.\n  VENTS.forEach(([x, u, top], k) => {\n    if ((S.vt[k] -= d * (1.6 + 3 * S.spat)) \u003c= 0) (S.vt[k] = 0.6 + 0.6 * rnd()), S.puffs.push({ x: x + rnd() - 0.5, u, top, t0: t, r: 1.4 + rnd() + 2 * S.spat });\n  });\n  for (const p of S.puffs) (p.x += (2.2 + 0.6 * sin(t * 0.3)) * d), (p.u += 1.1 * d);\n  S.puffs = S.puffs.filter((p) => t - p.t0 \u003c 4.5 && p.x \u003c W + 6);\n  S.fe *= exp(-d / 0.5);\n  // A foundering plate sinks for two seconds, then the hole crusts over.\n  const f = S.fnd;\n  if (f && t - f.t0 > 2.2) S.hot.push({ s: f.s, id: f.id, t }), (S.fnd = null);\n  S.hot = S.hot.filter((h) => t - h.t \u003c 7);\n}\n\nfunction founder(S) {\n  if (S.fnd) return;\n  const x = 16 + rnd() * 32, y = 72 + rnd() * 16, c = cells(x, y - S.off + 300, 1, S.c, S.pm);\n  S.fnd = { s: 1, id: c.id, t0: S.t };\n  S.fe = max(S.fe, 0.5);\n  for (let k = 0; k \u003c 24; k++) spark(S, x + (rnd() - 0.5) * S.c, y + (rnd() - 0.5) * S.c * 0.7, 2 + 5 * rnd(), 0.2 + 0.4 * rnd());\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k3 = cl(k[2], 0, 1);\n  S.heat = cl(k[0], 0, 1);\n  S.spat = cl(k[3], 0, 1);\n  if (abs(k3 - S.k3) > 0.005) (S.k3 = k3), (S.c = mix(13, 6, k3)), (S.pm = mix(0.18, 0.06, k3)), (S.tf = FAULTS[min(2, floor(k3 * 2.6))]), (S.fnd = null);\n  const p = input.btnPressed || [];\n  if (p[0]) bubble(S, 1), (S.bubs[S.bubs.length - 1].t0 -= 0.3);\n  if (p[1]) founder(S);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nconst F = new Float32Array(N * 3), SD = new Float32Array(N), RC = new Float32Array(W + 2), RMN = new Float32Array(W), RMX = new Float32Array(W);\nconst LAKE = [205, 80, 46], STEAM = [170, 112, 100], FL = new Float32Array(W * 2), SHN = new Float32Array(W * 2), WRN = new Float32Array(W), HS = new Int8Array(8), HI = new Uint32Array(8), HT = new Float32Array(8);\n\n// The distance from (x, y) to the crack, along its line through the column centres.\nlet STEEP = 0;\nfunction ridgeDist(x, xx, yy) {\n  let best = 1e9;\n  for (let c = max(0, x - 5); c \u003c min(W, x + 5); c++) {\n    const ax = c + 0.5, ay = RC[c], ey = RC[c + 1] - ay;\n    const u = cl((xx - ax + (yy - ay) * ey) / (1 + ey * ey), 0, 1), dx = xx - ax - u, dy = yy - ay - ey * u, d = dx * dx + dy * dy;\n    if (d \u003c best) (best = d), (STEEP = abs(ey));\n  }\n  return sqrt(best);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k3 \u003c 0) return;\n  const { t, heat, off, c: C } = S;\n  for (let x = 0; x \u003c W + 1; x++) RC[x] = ridge(S, x + 0.5);\n  for (let x = 0; x \u003c W; x++) {\n    let a = 1e9, b = -1e9;\n    for (let c = max(0, x - 5); c \u003c= min(W, x + 5); c++) (a = min(a, RC[c])), (b = max(b, RC[c]));\n    (RMN[x] = a), (RMX[x] = b), (WRN[x] = 0.5 + nz(x * 0.9 + 70, t * 0.7 + 20));\n    for (let s = 0; s \u003c 2; s++) SHN[x * 2 + s] = sm(0.3, 0.75, nz(x * 1.4 + 90 + s * 40, t * 0.5));\n  }\n  const LL = (0.5 + 0.75 * heat) * (0.92 + 0.08 * sin(t * 0.45)) + S.fe;\n  const ws0 = 0.42 + 2.5 * heat, wr0 = 0.8 + 3.4 * heat, Lc = 1.6 + 7 * heat, opA = 0.22 - 0.3 * heat;\n  table(off, C);\n  const fnd = S.fnd, fp = fnd ? cl((t - fnd.t0) / 2.2, 0, 1) : 0, nh = min(8, S.hot.length);\n  for (let k = 0; k \u003c nh; k++) (HS[k] = S.hot[k].s), (HI[k] = S.hot[k].id), (HT[k] = S.hot[k].t);\n  // Flashes along each shore, per column.\n  FL.fill(0);\n  for (const f of S.fl) for (let x = 0; x \u003c W; x++) FL[x * 2 + (f.top ? 0 : 1)] += f.a * exp(-(((x + 0.5 - f.x) / 2.6) ** 2)) * sm(0, 0.1, t - f.t0) * exp(-(t - f.t0) / 0.45);\n\n  for (let y = 0; y \u003c H; y++) {\n    const yy = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, xx = x + 0.5, st = ST[x], sb = SB[x];\n      if (yy \u003c st || yy > sb) {\n        // Crater wall, lit red from the lake below: its foot, then the lip of each bed.\n        const top = yy \u003c st, u = top ? st - yy : yy - sb, a = WA[i];\n        const lw = LL * (1.7 * ex(u / 1.6) * (0.6 + 0.6 * a) + 2.4 * a * ex(u / 11));\n        for (let c = 0; c \u003c 3; c++) F[o + c] = WG[o + c] + LAKE[c] * lw;\n        continue;\n      }\n      const up = yy \u003c RC[x], s = up ? 0 : 1, sg = up ? -1 : 1, ya = yy - sg * off + s * 300;\n      // Plate edges bend a little: the grid is read through a slow warp.\n      const n1 = nz(xx * 1.3, ya * 1.3), n2 = nz(xx * 0.6 + 40, ya * 0.6), P = cells(xx + 3 * (n2 - 0.5), ya + 2.6 * (n1 - 0.5), s, C, S.pm, 1), id = P.id, e = P.e, em = P.em, px = P.px, py = P.py;\n      STEEP = 0;\n      const dr = yy > RMN[x] - 7 && yy \u003c RMX[x] + 7 ? ridgeDist(x, xx, yy) : abs(yy - RC[x]) * 0.92, tf = sm(1.2, 3, STEEP);\n      const ds = up ? yy - st : sb - yy;\n\n      // The crust: black, its grain and ropes fixed to the plate.\n      const lx = xx - px, ly = (ya - py) * sg, g = h32(x + s * 131, round(ya) + 5003), pt = (id & 255) / 255;\n      const rope = fsin(ly * 1.9 + 0.05 * lx * lx + pt * 40) * (0.6 + 0.4 * fsin(lx * 0.4 + pt * 9)), tilt = 0.45 + 0.55 * sm(0, 4, ds);\n      let cr = ((g & 31) * 0.76 + rope * 1.5 + pt * 2) * tilt, cg = (((g >> 5) & 31) * 0.74 + rope * 2) * tilt, cb = (((g >> 10) & 31) * 0.76 + rope * 2.5 + pt * 2.5) * tilt;\n      // Young crust near the crack still glows through; so does a plate that foundered and froze over.\n      let Tc = 0.62 * ex(dr / Lc) * (0.65 + 0.7 * n1), hot = 99;\n      for (let k = 0; k \u003c nh; k++) if (HS[k] === s && HI[k] === id) hot = t - HT[k];\n      if (hot \u003c 7) Tc = max(Tc, 0.9 * exp(-hot / 0.7) * (0.75 + 0.5 * n2));\n      Tc = max(Tc, 0.22 * ex(e / 0.7) * (0.6 + heat));\n      if (Tc > 0.02) {\n        const L = lut(Tc), gl = sm(0, 0.5, Tc) * (0.75 + 0.03 * ((g >> 12) & 15));\n        (cr += LUT[L] * gl), (cg += LUT[L + 1] * gl), (cb += LUT[L + 2] * gl);\n      }\n      if (em \u003c 1.2) cr += 14 * sm(1.2, 0.2, em + 0.8 * (n1 - 0.5));\n      // Seams between plates: some open and red, some crusted shut; near the crack they spread wider.\n      const ws = ws0 * (0.4 + 1.2 * n1) * (1 + 0.7 * ex(dr / 6)), op = sm(opA, opA + 0.12, n1);\n      let A = e \u003c ws + 0.35 ? sm(ws + 0.35, ws - 0.25, e) * op : 0, T = 0.57 + 0.27 * heat + 0.12 * ex(dr / 8) + 0.36 * (n2 - 0.5);\n      // The spreading crack: the hottest lava, opening and closing along its length.\n      const wr = wr0 * WRN[x] * (1 - 0.6 * tf), ar = dr \u003c wr + 0.6 ? sm(wr + 0.6, wr - 0.4, dr) : 0;\n      if (ar > A) (A = ar), (T = 0.9 + 0.1 * heat - 0.3 * (dr / (wr + 0.6)) ** 2 + 0.25 * (n1 - 0.5) - 0.3 * tf);\n      // The shore where the crust dives under, flashing as it breaks.\n      const sh = ds \u003c 5 ? sm(1.7, 0.2, ds) * SHN[x * 2 + s] + 0.7 * ex(e / 1.2) * sm(5, 0.5, ds) + FL[x * 2 + s] * sm(4, 0.3, ds) : 0;\n      if (sh > A) (A = min(1, sh)), (T = 0.45 + 0.3 * heat + 0.3 * min(1, sh) + 0.2 * (n2 - 0.5));\n      // A foundering plate: its edges melt inward as it tilts and sinks.\n      if (fnd && fnd.s === s && fnd.id === id) {\n        const fa = sm(fp * 0.5 * C + 0.6, fp * 0.5 * C - 0.4, e);\n        (cr *= 1 - 0.6 * fp), (cg *= 1 - 0.6 * fp), (cb *= 1 - 0.6 * fp);\n        if (fa > A) (A = fa), (T = 0.62 + 0.3 * (1 - fp) + 0.2 * (n1 - 0.5));\n      }\n      if (hot \u003c 7) {\n        // The hole skins over in small new plates, their cracks narrowing and dimming.\n        const k = exp(-hot / 1.3), w = 0.3 + 3.5 * k * k * k, ha = sm(w + 0.5, w - 0.4, cells(xx, ya, s + 2, 4.5, 0).e) * sm(7, 4, hot);\n        if (ha > A) (A = ha), (T = 0.24 + 0.72 * k + 0.8 * k * (nz(xx * 2.4, ya * 2.4 + 9) - 0.5));\n      }\n      if (A > 0.003) {\n        // Open lava wrinkles a dark skin on itself as it cools.\n        const sw = hot \u003c 7 ? 0.8 : sm(0.2, 0.6, heat), sk = A > 0.5 && sw > 0 ? sm(0.07, 0.01, abs(nz(xx * 2.2 + 5, ya * 2.2) - 0.5)) * sw * 0.7 : 0;\n        const L = lut(T), b = A * (1 - sk);\n        (cr = mix(cr, LUT[L] + ((g >> 15) & 15) - 7.5, b)), (cg = mix(cg, LUT[L + 1] + ((g >> 19) & 31) * 0.8 - 12, b)), (cb = mix(cb, LUT[L + 2] + ((g >>> 24) & 31) * 0.8, b));\n      }\n      (F[o] = cr), (F[o + 1] = cg), (F[o + 2] = cb);\n    }\n  }\n  overlay(S, t);\n  // Exposed for the lava, as a night photograph of a lava lake is: what only\n  // glows faintly sinks back into the black of the crust.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const m = max(F[o], F[o + 1], F[o + 2]), k = m > 24 && m \u003c 60 ? (12 + (m - 24) * 1.333) / m : 1;\n    display.setPixel(i & 63, i >> 6, cl(F[o] * k, 0, 255) | 0, cl(F[o + 1] * k, 0, 255) | 0, cl(F[o + 2] * k, 0, 255) | 0);\n  }\n}\n\nfunction add(x, y, L, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], LUT[L + c], min(1, a));\n}\n\nfunction overlay(S, t) {\n  // Bubbles: the crust domes and cracks in a ring, then tears open and freezes over.\n  for (const b of S.bubs) {\n    const a = t - b.t0, R = b.r, E = R * 1.3 + 2, fnt = 2 * b.big;\n    for (let y = max(0, floor(b.y - E)); y \u003c min(H, b.y + E); y++)\n      for (let x = max(0, floor(b.x - E)); x \u003c min(W, b.x + E); x++) {\n        if (y \u003c ST[x] || y > SB[x]) continue;\n        const dx = x + 0.5 - b.x, dy = y + 0.5 - b.y, d = sqrt(dx * dx + dy * dy), o = (y * W + x) * 3;\n        let A, T;\n        if (a \u003c 0.6) {\n          // The crust domes up and cracks: a ring and spokes.\n          const p = a / 0.6, rr = R * (0.6 + 0.4 * p), sp = d \u003c rr ? sm(0.3, 0.08, abs(sin(Math.atan2(dy, dx) * 2.5 + b.r))) * sm(0.5, rr, d) : 0;\n          (A = p * max(sm(1, 0.2, abs(d - rr)), 0.8 * sp)), (T = 0.4 + 0.45 * p);\n        } else {\n          // Torn open: white-hot, churning while a fountain plays, then a skin\n          // closes over it in small plates, as over a foundered one.\n          const c = a - 0.6, hot = c \u003c fnt ? 1 : exp(-(c - fnt) / (0.4 + 0.2 * R)), sk = nz(x * 2.3 + b.r * 9, y * 2.3 + b.t0 * 7 + (c \u003c fnt ? c * 5 : 0));\n          const rr = R * (c \u003c fnt ? 0.6 : 1) * (0.7 + 0.8 * nz(x * 1.1 + b.r * 5, y * 1.1 + 40)), w = 0.3 + 3 * hot * hot * hot;\n          (A = sm(rr + 0.5, rr - 0.5, d) * sm(w + 0.5, w - 0.4, cells(dx + 40, dy + 40, 9 + floor(b.r * 97), 3.2, 0).e) * sm(0, 0.15, hot)), (T = 0.22 + 0.66 * hot - (0.2 * d) / R + 0.5 * (sk - 0.5) + (c \u003c fnt ? 0.25 * sm(R * 0.6, 0, d) : 0));\n          A = max(A, 0.9 * sm(1, 0.2, abs(d - R * 1.15)) * exp(-c / 0.35));\n        }\n        if (A > 0) {\n          const L = lut(T);\n          for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], LUT[L + k], min(1, A));\n        }\n      }\n  }\n  // Steam: soft puffs that swell and thin out, lit from the lake below.\n  SD.fill(0);\n  for (const p of S.puffs) {\n    const a = t - p.t0, r = p.r + 0.8 * a, al = sm(0, 0.5, a) * sm(4.5, 1.5, a);\n    const sx = p.top ? ST[cl(floor(p.x), 0, W - 1)] : SB[cl(floor(p.x), 0, W - 1)], yc = p.top ? sx - p.u : sx + p.u;\n    for (let y = max(0, floor(yc - r)); y \u003c min(H, yc + r + 1); y++) {\n      const u = p.top ? sx - y - 0.5 : y + 0.5 - sx, dy = (u - p.u) / 0.8;\n      if (abs(dy) > r) continue;\n      for (let x = max(0, floor(p.x - r)); x \u003c min(W, p.x + r); x++) {\n        const dx = x + 0.5 - p.x, q = 1 - (dx * dx + dy * dy) / (r * r);\n        if (q \u003c= 0) continue;\n        SD[y * W + x] += al * q * q * (0.45 + 0.55 * ex(max(0, u) / 7)) * (0.7 + 0.6 * nz(x * 1.7 + p.t0 * 13, y * 1.7));\n      }\n    }\n  }\n  const sl = min(1, (0.65 + 0.6 * S.spat) * (S.fe + 0.6 + 0.6 * S.heat));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (SD[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += STEAM[c] * sl * min(1, SD[i]) * (1 - F[o + c] / 255);\n  // Sparks: white-hot in the air, orange where they land, then dull red and gone.\n  const { PX, PY, PVX, PVY, PF, PT, np } = S;\n  for (let i = 0; i \u003c np; i++) {\n    if (PF[i] > 0) {\n      const L = lut(0.93 + 0.07 * sin(i));\n      add(PX[i], PY[i], L, 1), add(PX[i] - PVX[i] * 0.04, PY[i] - PVY[i] * 0.04, L, 0.5);\n    } else add(PX[i], PY[i], lut(PT[i] * 0.85), sm(0, 0.3, PT[i]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Heat","min":0,"max":1,"about":"At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower."},{"name":"Plates","min":0,"max":1,"about":"At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three."},{"name":"Spatter","min":0,"max":1,"about":"How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder."}],"start":[0,2,0,0.06],"measures":{"motion":0.2026,"detail":0.1176,"edges":0.3894,"complexity":2.2223,"coverage":0.271,"colour":0.2444,"drift":0.0498},"knobResponse":[0.229,0.0729,0.0899,0.0472]},{"slug":"lava-lamp","title":"Lava Lamp","family":"sim","round":3,"note":"전구 위 웅덩이에서 데워진 왁스가 목을 늘이며 떨어져 나와 방울로 떠오르고, 위에서 식으면 다시 가라앉아요. 파란 물속에서 식은 왁스는 주황, 뜨거운 왁스는 노랑이에요.","idea":"A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.","buttons":"K1 tap flares the bulb, and the lowest drop heats through and lets go.","code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-lava-lamp","type":"code","name":"lava-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot."},{"name":"Heat","min":0.3,"max":3,"about":"How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top."},{"name":"Wax","min":4,"max":10,"about":"How many drops are loose in the lamp; drops past the count sink into the pool and melt into it."},{"name":"Stretch","min":0,"max":1,"about":"At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it."}],"start":[0,2,4,0.06],"measures":{"motion":0.1138,"detail":0.0147,"edges":0.1844,"complexity":1.5488,"coverage":1,"colour":0.5657,"drift":0.068},"knobResponse":[0.5599,0.1621,0.1504,0.0519]},{"slug":"lichtenberg","title":"Lichtenberg","family":"fractal","round":26,"note":"소다물을 바른 단풍나무 판의 위아래 전극에서 깃털 잔가지를 단 프랙탈 나무가 파란 플라스마와 주황 불씨를 달고 서로를 향해 타 들어가고, 만나면 아크가 번쩍여요. K1 이 판의 나무를 바꾸고, 누르면 다음 판이에요.","idea":"High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.","buttons":"K1 tap cuts the power and slides the next board in now.","code":"// ===== Patternflow pattern =====\n// Title:   Lichtenberg\n// Family:  fractal\n// Idea:    High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after fractal wood burning and the dielectric breakdown model (Niemeyer, Pietronero and Wiesmann, 1984)\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1\n//\n// Knob 1: Wood. Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash.\n// Knob 2: Speed. At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower.\n// Knob 3: Pull. The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders.\n// Knob 4: Lead. Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway.\n// Buttons: K1 tap cuts the power and slides the next board in now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, exp, sqrt, pow, sin, abs, log2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The board at rest fills columns X0..X1 and rows Y0..Y1; the electrodes\n// touch it at (TX, TY) and (BX, BY).\nconst X0 = 2, X1 = 61, Y0 = 3, Y1 = 124, TX = 32, TY = 9, BX = 31, BY = 118;\n// A board slides down this far for the next, with a few rows of rig between.\nconst SL = 131;\n// Seconds at Speed 2: wet board before the power, growth until the trees\n// meet, the arc, the embers dying, the slide.\nconst SOAK = 1.0, TG = 4.8, ARC = 0.5, COOL = 3, SLIDE = 1.6;\n// Cells each tree adds a second at the front when it keeps pace with its\n// schedule, and fringe twigs a second for every cell of its channels.\nconst RATE = 200, TWIG = 0.14;\n// A cell that joined the tree this recently is still plasma.\nconst TIP = 0.16;\nconst DIRS = [[1, 0], [1, 1], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1], [1, -1]];\n// How readily a channel, a twig and a twig's twig sprout a fringe twig,\n// and how far each new generation runs: three or four LEDs, two, then one.\nconst GEN = [1, 0.4, 0.25], LEN = [2, 1, 0];\n// A channel feeding this many cells beyond it burns a groove one, two,\n// three and four steps wider, with a brown scorch round it: the trunks\n// near the electrodes run thick and dark.\nconst WIDE = [12, 50, 160, 500];\n// How dark the curl's bands run, in grain darkness.\nconst CURL = 0.45;\nconst N4 = [-1, 1, -W, W], ND = [-W - 1, -W + 1, W - 1, W + 1], LUT = [0, 1, 16];\n\n// Board, grain, knot and char colours for maple, birch, walnut and\n// black-stained oak, where the burn leaves grey ash.\nconst WOODS = [\n  [[228, 196, 150], [160, 110, 66], [128, 76, 40], [30, 19, 14]],\n  [[244, 232, 204], [210, 186, 142], [120, 90, 58], [30, 19, 14]],\n  [[140, 90, 58], [88, 54, 34], [50, 30, 18], [26, 16, 12]],\n  [[50, 44, 46], [30, 26, 28], [18, 14, 14], [92, 86, 80]],\n];\nconst SMOKE = [196, 190, 184], RIG = [16, 17, 22];\n\n// One board's wood: grain darkness (above 1 in a knot), how wet the soda\n// wash left each spot, and a per-channel speckle.\nfunction wood() {\n  const g = F32(N), wet = F32(N), nz = new Int8Array(N * 3);\n  const ox = rnd() * 300, oy = rnd() * 300, per = 2.6 + rnd() * 0.6, tilt = (rnd() - 0.5) * 0.06;\n  const knots = [];\n  for (let k = 0, nk = 1 + floor(rnd() * 3); k \u003c nk; k++)\n    knots.push([X0 + 9 + rnd() * (X1 - X0 - 18), Y0 + 14 + rnd() * (Y1 - Y0 - 28), 1.6 + rnd() * 1.4]);\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let u = x + tilt * y + 9 * (vn(x / 26 + ox, y / 40 + oy) - 0.5) + 2 * (vn(x / 7 + oy, y / 11 + ox) - 0.5), kd = 0;\n      for (const [kx, ky, kr] of knots) {\n        const dx = x - kx, dy = (y - ky) / 2.2, d2 = dx * dx + dy * dy;\n        // The grain bends round a knot and crowds in close to it.\n        u += (kr * kr * 3 * dx) / (d2 + kr * kr);\n        kd = max(kd, 1 - sqrt(d2) / kr);\n      }\n      // Thin dark latewood lines, a pore streak here and there, and the curl\n      // of figured maple across the grain, a band every two rows or so.\n      const c = 0.5 + 0.5 * Math.cos((2 * Math.PI * u) / per);\n      let v = c ** 4 * (0.8 + 0.6 * vn(x / 5 + ox, y / 30)) + 0.22 * (hash(x, floor(y / 4) + 7) - 0.5);\n      v += CURL * (0.5 + 0.5 * Math.sin((2 * Math.PI * (y + 1.5 * vn(x / 6 + oy, y / 20))) / 2.3));\n      if (kd > 0) v = 1 + kd * 0.6;\n      g[i] = cl(v, 0, 1.6);\n      wet[i] = 0.5 + 0.5 * vn(x / 9 + oy, y / 9 + ox);\n      for (let ch = 0; ch \u003c 3; ch++) nz[i * 3 + ch] = round((rnd() - 0.5) * 4);\n    }\n  return { g, wet, nz, col: F32(N * 3), at: -1 };\n}\n\n// A board's colours for this K1: grain, knots, lamp, bevels and speckle.\nfunction paint(B, wood) {\n  const wv = wood * 3, wi = min(2, floor(wv)), wf = wv - wi, WC = [];\n  for (let j = 0; j \u003c 4; j++) WC.push([0, 1, 2].map((c) => WOODS[wi][j][c] + (WOODS[wi + 1][j][c] - WOODS[wi][j][c]) * wf));\n  B.ch = WC[3];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x, gv = B.g[i], lo = gv \u003c= 1 ? 0 : 1, t = gv \u003c= 1 ? gv : (gv - 1) / 0.6;\n      let lf = 1.02 - 0.12 * (y / H);\n      if (x === X0 || y === Y0) lf *= 1.08;\n      if (x === X1 || y === Y1) lf *= 0.7;\n      for (let c = 0; c \u003c 3; c++) B.col[i * 3 + c] = (WC[lo][c] + (WC[lo + 1][c] - WC[lo][c]) * t) * lf + B.nz[i * 3 + c];\n    }\n  B.at = wood;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    time: 0, ph: 0, pt: 0, tau: 0, power: 0, wood: 0, eta: 1, lead: 0, ym: 64,\n    own: new Uint8Array(N), twg: new Uint8Array(N), par: new Int32Array(N), cnt: new Int32Array(N), born: F32(N),\n    phi: F32(N), phi0: F32(N), chr: F32(N), sco: F32(N), ht: F32(N),\n    cand: [new Int32Array(N), new Int32Array(N)], cw: [F32(N), F32(N)], nc: [0, 0], acc: [0, 0], tac: [0, 0], tw: [], ntw: 0, cells: [new Int32Array(N), new Int32Array(N)], ncell: [1, 1], nsk: [1, 1],\n    fr: [TY, BY], meet: -1, meetQ: -1, path: new Int32Array(N), np: 0,\n    pl: F32(N), sm: F32(N), puffs: [], ring: new Int32Array(512), nr: 0, hot: new Int32Array(32), nh: 0, flash: 0,\n    wa: wood(), wb: wood(),\n  });\n  for (let k = 0; k \u003c 256; k++) P.tw.push({ left: 0 }), k \u003c 70 && P.puffs.push({ on: 0 });\n  // The field round the two bare electrodes, solved once from a straight ramp.\n  for (let y = Y0; y \u003c= Y1; y++) for (let x = X0; x \u003c= X1; x++) P.phi[y * W + x] = cl((y - TY) / (BY - TY), 0, 1);\n  (P.own[TY * W + TX] = 1), (P.phi[TY * W + TX] = 0), (P.own[BY * W + BX] = 2), (P.phi[BY * W + BX] = 1);\n  relax(P, 400);\n  P.phi0.set(P.phi);\n  fresh(P);\n}\n\n// A clean board under the electrodes, wet and unburnt.\nfunction fresh(P) {\n  for (const a of [P.own, P.twg, P.cnt, P.chr, P.sco, P.ht]) a.fill(0);\n  P.par.fill(-1);\n  P.born.fill(-9);\n  P.phi.set(P.phi0);\n  for (const t of P.tw) t.left = 0;\n  const t = TY * W + TX, b = BY * W + BX;\n  (P.own[t] = P.cnt[t] = P.cnt[b] = 1), (P.own[b] = 2), (P.cells[0][0] = t), (P.cells[1][0] = b);\n  Object.assign(P, { ncell: [1, 1], nsk: [1, 1], fr: [TY, BY], acc: [0, 0], tac: [0, 0], meet: -1, meetQ: -1, np: 0, tau: 0 });\n}\n\n// Red-black over-relaxation of Laplace's equation on the board: the top tree\n// held at 0, the bottom one at 1, the board's edges insulating.\nfunction relax(P, sweeps) {\n  const { own, phi } = P;\n  for (let s = 0; s \u003c sweeps; s++)\n    for (let c = 0; c \u003c 2; c++)\n      for (let y = Y0; y \u003c= Y1; y++) {\n        const r = y * W;\n        for (let x = X0 + ((y + c) & 1); x \u003c= X1; x += 2) {\n          const i = r + x;\n          if (own[i]) continue;\n          const v = phi[i];\n          const a = x > X0 ? phi[i - 1] : v, b = x \u003c X1 ? phi[i + 1] : v, u = y > Y0 ? phi[i - W] : v, d = y \u003c Y1 ? phi[i + W] : v;\n          phi[i] = v + 1.85 * ((a + b + u + d) * 0.25 - v);\n        }\n      }\n}\n\n// A wood cell beside one cell of a tree, or touching one at a corner, may\n// join it, with a chance that goes as the field there to the power eta.\n// Nothing off the board ever joins, so neighbours need no bounds checks.\nfunction scan(P, eta) {\n  const { own, phi, cand, cw } = P, n = [0, 0], t = [0, 0];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      if (own[i]) continue;\n      // Neighbours of each tree counted in one number, four bits a tree.\n      const s4 = LUT[own[i - 1]] + LUT[own[i + 1]] + LUT[own[i - W]] + LUT[own[i + W]];\n      const s8 = LUT[own[i - W - 1]] + LUT[own[i - W + 1]] + LUT[own[i + W - 1]] + LUT[own[i + W + 1]];\n      for (let k = 0; k \u003c 2; k++) {\n        const a = (s4 >> (4 * k)) & 15;\n        if (a > 1 || (!a && ((s8 >> (4 * k)) & 15) !== 1)) continue;\n        t[k] += pow(max(k ? 1 - phi[i] : phi[i], 1e-5), eta);\n        cand[k][n[k]] = i;\n        cw[k][n[k]++] = t[k];\n      }\n    }\n  P.nc = n;\n}\n\n// A cell joins tree k only if branches stay one LED wide: nothing of the\n// tree may touch it but the cell it grows from and that cell's neighbours.\n// Touching the other tree is the meeting.\nfunction join(P, c, k, tw = 0) {\n  const { own } = P;\n  if (own[c]) return false;\n  let p = -1, m = 0;\n  for (const o of N4) if (own[c + o] === k) (p = c + o), m++;\n  if (m > 1) return false;\n  if (p \u003c 0) for (const o of ND) if (own[c + o] === k && p \u003c 0) p = c + o;\n  if (p \u003c 0) return false;\n  const px = p & 63, py = p >> 6;\n  let other = -1;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const q = c + dy * W + dx;\n      if (q === c || q === p || !own[q]) continue;\n      if (own[q] !== k) {\n        // The trees may not close before their time.\n        if (P.tau \u003c TG - 0.25) return false;\n        other = q;\n      } else if (abs((q & 63) - px) > 1 || abs((q >> 6) - py) > 1) return false;\n    }\n  add(P, c, p, k, tw);\n  if (other >= 0) (P.meet = c), (P.meetQ = other);\n  return true;\n}\n\nfunction add(P, c, p, k, tw) {\n  const { cnt, par } = P, y = c >> 6, x = c & 63;\n  (P.own[c] = k), (P.twg[c] = tw), (par[c] = p), (cnt[c] = P.ht[c] = P.chr[c] = 1), (P.born[c] = P.time), (P.phi[c] = k - 1);\n  P.fr[k - 1] = k === 1 ? max(P.fr[0], y) : min(P.fr[1], y);\n  scorch(P, x, y, 1, 0.04);\n  P.ring[P.nr++ & 511] = c;\n  P.cells[k - 1][P.ncell[k - 1]++] = c;\n  if (!tw) P.nsk[k - 1]++;\n  // The current that feeds every cell beyond reaches it through all the\n  // cells back to the electrode, and the busiest burn into wide grooves.\n  for (let a = p; a >= 0; a = par[a]) {\n    const w = WIDE.indexOf(++cnt[a]);\n    if (w >= 0) {\n      const ax = a & 63, ay = a >> 6, r = 1 + 0.6 * w;\n      scorch(P, ax, ay, r, w ? 0.9 : 0.7, 1);\n      scorch(P, ax, ay, r + 2, 0.35);\n    }\n  }\n}\n\n// With burn set, char a groove of radius r round (x, y), still warm;\n// without, brown the wood within r by v, less towards the edge.\nfunction scorch(P, x, y, r, v, burn) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy, q = qy * W + qx;\n      if (d2 > r * r || qx \u003c X0 || qx > X1 || qy \u003c Y0 || qy > Y1) continue;\n      if (!burn) P.sco[q] = min(1, P.sco[q] + v * (1 - d2 / (r * r + 1)));\n      else (P.chr[q] = max(P.chr[q], v)), (P.ht[q] = max(P.ht[q], 0.5 * v));\n    }\n}\n\nfunction grow(P, d) {\n  relax(P, 3);\n  // Each tree has a front it should have reached by now, eased in so the\n  // growth speeds up as the trees close (a hard pull sends leaders racing\n  // out at once), and a cell budget that rises steeply when it lags.\n  const s = min(1, P.tau / TG) ** (1.35 - 0.15 * P.eta), late = max(0, P.tau - TG);\n  const lag = [TY + (P.ym - TY) * s - P.fr[0], P.fr[1] - (BY - (BY - P.ym) * s)];\n  // The leading electrode's tree takes the larger share of the front's\n  // cells; fringe twigs sprout as fast as there is channel to carry them,\n  // fewer the harder the pull.\n  for (let k = 0; k \u003c 2; k++) {\n    const f = exp(cl(lag[k] / 6, -2, 2.5)), sh = 1 + (k ? 0.85 : -0.85) * P.lead;\n    P.acc[k] += d * RATE * sh * f * (1 + 4 * late);\n    P.tac[k] += d * TWIG * P.nsk[k] * ((4.5 - P.eta) / 3.5) ** 2;\n  }\n  twigs(P);\n  if (P.acc[0] \u003c 1 && P.acc[1] \u003c 1 && P.tac[0] \u003c 1 && P.tac[1] \u003c 1) return;\n  scan(P, P.eta + 2 * late);\n  for (let k = 0; k \u003c 2; k++) {\n    const n = min(120, floor(P.acc[k])), C = P.cand[k], S = P.cw[k], m = P.nc[k];\n    P.acc[k] -= n;\n    if (!m) continue;\n    const tot = S[m - 1];\n    for (let t = 0, tries = 0; t \u003c n && tries \u003c 3 * n; tries++) {\n      const r = rnd() * tot;\n      let lo = 0;\n      for (let hi = m - 1, mid; lo \u003c hi; ) (mid = (lo + hi) >> 1), S[mid] \u003c r ? (lo = mid + 1) : (hi = mid);\n      if (join(P, C[lo], k + 1)) t++;\n      if (P.meet >= 0) return;\n    }\n  }\n  // A fringe twig sprouts off a burnt channel, an eighth of a turn off it\n  // or now and then a quarter, and runs a few LEDs, bending as it goes. A\n  // twig sprouts shorter twigs of its own, three generations deep.\n  for (let tries = 0, k = 0; tries \u003c 300; tries++) {\n    if (P.tac[k] \u003c 1) k = 1 - k;\n    if (P.tac[k] \u003c 1) break;\n    const a = P.cells[k][floor(rnd() * P.ncell[k])], g = P.twg[a];\n    if (P.par[a] \u003c 0 || g > 2 || rnd() > GEN[g]) continue;\n    // The branch's way here, read over four cells so one step cannot throw it.\n    let b = a;\n    for (let n = 0; n \u003c 4 && P.par[b] >= 0; n++) b = P.par[b];\n    const j = round((Math.atan2((a >> 6) - (b >> 6), (a & 63) - (b & 63)) * 4) / Math.PI) & 7;\n    const dir = (j + (rnd() \u003c 0.5 ? 1 : 7) * (rnd() \u003c 0.85 ? 1 : 2)) & 7;\n    const x = (a & 63) + DIRS[dir][0], y = (a >> 6) + DIRS[dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, k + 1, g + 1)) continue;\n    P.tac[k]--;\n    if (P.meet >= 0) return;\n    Object.assign(P.tw[P.ntw++ & 255], { c, d0: dir, dir, k: k + 1, g: g + 1, left: LEN[g] + floor(rnd() * LEN[g]) });\n  }\n  P.tac = P.tac.map((v) => min(v, 4));\n}\n\nfunction twigs(P) {\n  for (const t of P.tw) {\n    if (t.left \u003c= 0) continue;\n    t.left--;\n    // A twig wanders an eighth of a turn, never further off its way.\n    if (rnd() \u003c 0.25) {\n      const dir = (t.dir + (rnd() \u003c 0.5 ? 1 : 7)) & 7, off = (dir - t.d0 + 8) & 7;\n      if (off \u003c= 1 || off >= 7) t.dir = dir;\n    }\n    const x = (t.c & 63) + DIRS[t.dir][0], y = (t.c >> 6) + DIRS[t.dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, t.k, t.g)) {\n      t.left = 0;\n      continue;\n    }\n    t.c = c;\n    if (P.meet >= 0) return;\n  }\n}\n\n// The joined path, from the top electrode to the bottom one.\nfunction trace(P) {\n  const top = P.own[P.meet] === 1 ? P.meet : P.meetQ, bot = top === P.meet ? P.meetQ : P.meet;\n  let n = 0;\n  for (let a = top; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.path.subarray(0, n).reverse();\n  for (let a = bot; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.np = n;\n  for (let j = 0; j \u003c n; j++) {\n    const a = P.path[j], x = a & 63, y = a >> 6;\n    scorch(P, x, y, 2, 1, 1);\n    scorch(P, x, y, 4, 0.5);\n    P.ht[a] = 1;\n  }\n}\n\nfunction go(P, ph) {\n  (P.ph = ph), (P.pt = 0);\n  if (ph === 1) P.power = 1;\n  if (ph === 2) trace(P), (P.flash = 1);\n  if (ph > 2) P.power = 0;\n  if (ph === 0) ([P.wa, P.wb] = [P.wb, P.wa]), fresh(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  (P.wood = cl(k[0], 0, 1)), (P.eta = cl(k[2], 1, 4)), (P.lead = cl(k[3], -1, 1));\n  P.ym = (TY + BY) / 2 - 44 * P.lead;\n  (P.time += d), (P.pt += d);\n  if (input.btnPressed && input.btnPressed[0] && P.ph > 0 && P.ph \u003c 4) go(P, 4);\n  const ph = P.ph;\n  if (ph === 0 && P.pt >= SOAK) go(P, 1);\n  else if (ph === 1) {\n    P.tau += d;\n    grow(P, d);\n    // A board the trees cannot cross trips the breaker without an arc.\n    if (P.meet >= 0) go(P, 2);\n    else if (P.tau > TG + 3) go(P, 3);\n  } else if (ph === 2) {\n    // The arc keeps its path white hot.\n    for (let j = 0; j \u003c P.np; j++) P.ht[P.path[j]] = 1;\n    if (P.pt >= ARC) go(P, 3);\n  } else if (ph === 3 && P.pt >= COOL) go(P, 4);\n  else if (ph === 4 && P.pt >= SLIDE) go(P, 0), (P.wb = wood());\n  P.flash = max(0, P.flash - d * 9);\n  heat(P, d), smoke(P, d);\n}\n\n// Embers: fresh channels glow and cool to char, while the power is on the\n// busy trunks stay hot, and anything hot browns the wood round it.\nfunction heat(P, d) {\n  const { ht, own, cnt, sco, hot } = P, dec = exp(-d / (P.power ? 0.3 : 0.9));\n  let sum = 0, nh = 0;\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let h = ht[i];\n      if (h \u003c 0.004 && !own[i]) continue;\n      h *= dec;\n      if (P.power && own[i] && cnt[i] > 24) h = max(h, min(0.6, 0.12 * (log2(cnt[i]) - 3.5)) * (0.85 + 0.15 * rnd()));\n      ht[i] = h;\n      if (h > 0.2 && (cnt[i] > 12 || !own[i])) {\n        sum += h;\n        for (const o of N4) sco[i + o] = min(1, sco[i + o] + d * h * 0.3);\n        if (nh \u003c 32) hot[nh++] = i;\n        else if (rnd() \u003c 0.05) hot[floor(rnd() * 32)] = i;\n      }\n    }\n  P.nh = nh;\n  P.heatSum = sum;\n}\n\n// Smoke puffs rise off the hot channels, spread and thin out.\nfunction smoke(P, d) {\n  let want = (P.ph === 4 ? 0 : P.heatSum) * d * 0.22;\n  for (const s of P.puffs) {\n    if (s.on) {\n      if ((s.age += d) > s.life) {\n        s.on = 0;\n        continue;\n      }\n      s.x += (s.vx + 3 * sin(s.age * 2.3 + s.y * 0.1)) * d;\n      s.y += s.vy * d;\n      s.r += d * 1.6;\n      continue;\n    }\n    if (want > rnd() && P.nh) {\n      const i = P.hot[floor(rnd() * P.nh)];\n      Object.assign(s, { on: 1, x: i & 63, y: i >> 6, vx: (rnd() - 0.5) * 4, vy: -8 - rnd() * 8, r: 1, a: 0.16 + rnd() * 0.16, age: 0, life: 2.5 + rnd() * 2 });\n      want -= 1;\n    }\n  }\n}\n\n// Plasma at (x, y): how strongly it covers each LED round it.\nfunction plasma(L, x, y, r, v) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy;\n      if (qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c H && d2 \u003c= r * r) L[qy * W + qx] += v / (1 + d2 * 2.5);\n    }\n}\n\n// Ember colour by heat: dull red, orange, then yellow-white.\nconst EK = [0, 0.25, 0.6, 1], EC = [[0, 0, 0], [175, 35, 6], [255, 110, 20], [255, 220, 140]];\nfunction ember(h, out) {\n  const j = h \u003c 0.25 ? 0 : h \u003c 0.6 ? 1 : 2, t = (min(h, 1) - EK[j]) / (EK[j + 1] - EK[j]);\n  for (let c = 0; c \u003c 3; c++) out[c] = EC[j][c] + (EC[j + 1][c] - EC[j][c]) * t;\n}\n\nconst EM = [0, 0, 0];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { own, chr, sco, ht, born, pl, sm } = P;\n  pl.fill(0);\n  sm.fill(0);\n  if (P.wa.at !== P.wood) paint(P.wa, P.wood);\n  if (P.ph === 4 && P.wb.at !== P.wood) paint(P.wb, P.wood);\n  const off = P.ph === 4 ? SL * (1 - (1 + Math.cos((Math.PI * min(1, P.pt / SLIDE)))) / 2) : 0, oy = round(off);\n\n  // Plasma at the tips, and short streamers crackling ahead of them.\n  if (P.power) {\n    for (let j = 0; j \u003c 512 && j \u003c P.nr; j++) {\n      const c = P.ring[(P.nr - 1 - j) & 511], age = P.time - born[c];\n      if (age > TIP) break;\n      // Twigs behind the front only flash orange.\n      if (P.twg[c] && (own[c] === 1 ? (c >> 6) \u003c P.fr[0] - 14 : (c >> 6) > P.fr[1] + 14)) continue;\n      const f = (1 - age / TIP) * (0.5 + 0.5 * rnd()), x = c & 63, y = (c >> 6) + oy;\n      plasma(pl, x, y, 1.5, f);\n      if (rnd() \u003c 0.2)\n        for (let st = 0, sx = x, sy = y, len = 2 + floor(rnd() * 5); st \u003c len; st++) {\n          if (rnd() \u003c 0.6) sy += own[c] === 1 ? 1 : -1;\n          else sx += rnd() \u003c 0.5 ? -1 : 1;\n          if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n          pl[sy * W + sx] += 0.9 - st * 0.12;\n        }\n    }\n    // A blue corona at each electrode.\n    const z = 0.4 + 0.4 * rnd();\n    plasma(pl, TX, TY + oy, 2.5, z);\n    plasma(pl, BX, BY + oy, 2.5, z);\n  }\n  // The arc down the joined path, flickering sideways.\n  if (P.ph === 2) {\n    const f = (1 - 0.6 * (P.pt / ARC)) * (0.7 + 0.3 * rnd()), seed = rnd() * 99;\n    for (let j = 0; j \u003c P.np; j++) {\n      const a = P.path[j], x = (a & 63) + round(1.6 * (vn(j * 0.3, seed) - 0.5)), y = a >> 6;\n      if (j % 2 === 0) plasma(pl, x, y, 3.5, 0.35 * f);\n      pl[y * W + x] += 3 * f;\n    }\n  }\n  for (const s of P.puffs) {\n    if (!s.on) continue;\n    // A wisp, twice as tall as it is wide.\n    const a = s.a * sin((Math.PI * s.age) / s.life), R = Math.ceil(s.r), R2 = 2 * R;\n    for (let dy = -R2; dy \u003c= R2; dy++)\n      for (let dx = -R; dx \u003c= R; dx++) {\n        const qx = round(s.x) + dx, qy = round(s.y) + dy, d2 = (dx * dx + dy * dy * 0.25) / (s.r * s.r);\n        if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H || d2 >= 1) continue;\n        sm[qy * W + qx] += a * (1 - d2) * (1 - d2);\n      }\n  }\n\n  const fl = P.flash * 70, CH = P.wa.ch, dry = P.ph > 1 ? 1 : P.ph ? P.tau / (TG + 0.5) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r, g, b;\n      // Which board, if any, is under this LED.\n      let yb = y - oy, B = P.wa, burnt = 1;\n      if (P.ph === 4 && yb \u003c Y0) (yb += SL), (B = P.wb), (burnt = 0);\n      if (x >= X0 && x \u003c= X1 && yb >= Y0 && yb \u003c= Y1) {\n        const i = yb * W + x, C = B.col;\n        // The wet wash glosses the wood; the current steams it off the whole\n        // board and the burn dries it at once.\n        const s = burnt ? sco[i] : 0, lf = 0.86 + 0.28 * B.wet[i] * max(0, 1 - 3 * s - (burnt ? dry : 0));\n        (r = C[i * 3] * lf), (g = C[i * 3 + 1] * lf), (b = C[i * 3 + 2] * lf);\n        if (burnt) {\n          if (s > 0) (r *= 1 - 0.5 * s), (g *= 1 - 0.66 * s), (b *= 1 - 0.8 * s);\n          const c = chr[i];\n          if (c > 0) (r += (CH[0] - r) * c), (g += (CH[1] - g) * c), (b += (CH[2] - b) * c);\n          const h = ht[i];\n          if (h > 0.02 && c > 0.3) {\n            // Thick char glows only along its rim.\n            const rim = (x > X0 && chr[i - 1] \u003c 0.5) || (x \u003c X1 && chr[i + 1] \u003c 0.5) || chr[i - W] \u003c 0.5 || chr[i + W] \u003c 0.5;\n            ember(h * (rim ? 1 : 0.45), EM);\n            (r = max(r, EM[0])), (g = max(g, EM[1])), (b = max(b, EM[2]));\n          }\n        }\n        (r += fl), (g += fl), (b += fl * 1.2);\n      } else {\n        // The dark rig behind, with the board's shadow to its right.\n        const sh = x > X1 ? 0.55 : 1, q = hash(x, y);\n        (r = (RIG[0] + 6 * q) * sh), (g = (RIG[1] + 6 * hash(y, x)) * sh), (b = (RIG[2] + 6 * q) * sh);\n        if (x === 0 || x === 63) (r = 64 + 10 * q), (g = 66 + 10 * q), (b = 74 + 10 * q);\n      }\n      const m = min(0.7, sm[p]);\n      (r += (SMOKE[0] - r) * m), (g += (SMOKE[1] - g) * m), (b += (SMOKE[2] - b) * m);\n      // Plasma: deep blue where it is thin, blue-white where it is thick.\n      const t = pl[p];\n      if (t > 0.01) {\n        const u = min(1, t), w = min(1, t / 2.5);\n        (r += (90 + 160 * w - r) * u), (g += (120 + 130 * w - g) * u), (b += (255 - b) * u);\n      }\n      display.setPixel(x, y, cl(r, 0, 255) | 0, cl(g, 0, 255) | 0, cl(b, 0, 255) | 0);\n    }\n  electrodes(display, P);\n}\n\n// Brass clamps with their tips on the board, the red lead in from the top\n// and the black one from the bottom.\nfunction electrodes(display, P) {\n  for (let e = 0; e \u003c 2; e++) {\n    const cx = e ? BX : TX, s = e ? -1 : 1, y0 = e ? H - 1 : 0, lead = e ? [[96, 98, 110], [36, 36, 42]] : [[236, 84, 64], [172, 28, 22]];\n    for (let j = 0; j \u003c= 8; j++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const lit = j === 4 || dx === -3, dark = j === 7 || dx === 3;\n        let c = null;\n        if (j \u003c= 3 && abs(dx) \u003c= 1) c = lead[dx \u003c 0 ? 0 : 1];\n        else if (j >= 4 && j \u003c= 7) c = lit ? [236, 200, 110] : dark ? [130, 96, 40] : [196, 156, 70];\n        else if (j === 8 && !dx) c = P.power ? [210, 220, 255] : [240, 214, 130];\n        if (c) display.setPixel(cx + dx, y0 + s * j, c[0], c[1], c[2]);\n      }\n  }\n}\n","layer":{"id":"layer-lichtenberg","type":"code","name":"lichtenberg","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lichtenberg\n// Family:  fractal\n// Idea:    High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after fractal wood burning and the dielectric breakdown model (Niemeyer, Pietronero and Wiesmann, 1984)\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1\n//\n// Knob 1: Wood. Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash.\n// Knob 2: Speed. At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower.\n// Knob 3: Pull. The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders.\n// Knob 4: Lead. Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway.\n// Buttons: K1 tap cuts the power and slides the next board in now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, exp, sqrt, pow, sin, abs, log2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The board at rest fills columns X0..X1 and rows Y0..Y1; the electrodes\n// touch it at (TX, TY) and (BX, BY).\nconst X0 = 2, X1 = 61, Y0 = 3, Y1 = 124, TX = 32, TY = 9, BX = 31, BY = 118;\n// A board slides down this far for the next, with a few rows of rig between.\nconst SL = 131;\n// Seconds at Speed 2: wet board before the power, growth until the trees\n// meet, the arc, the embers dying, the slide.\nconst SOAK = 1.0, TG = 4.8, ARC = 0.5, COOL = 3, SLIDE = 1.6;\n// Cells each tree adds a second at the front when it keeps pace with its\n// schedule, and fringe twigs a second for every cell of its channels.\nconst RATE = 200, TWIG = 0.14;\n// A cell that joined the tree this recently is still plasma.\nconst TIP = 0.16;\nconst DIRS = [[1, 0], [1, 1], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1], [1, -1]];\n// How readily a channel, a twig and a twig's twig sprout a fringe twig,\n// and how far each new generation runs: three or four LEDs, two, then one.\nconst GEN = [1, 0.4, 0.25], LEN = [2, 1, 0];\n// A channel feeding this many cells beyond it burns a groove one, two,\n// three and four steps wider, with a brown scorch round it: the trunks\n// near the electrodes run thick and dark.\nconst WIDE = [12, 50, 160, 500];\n// How dark the curl's bands run, in grain darkness.\nconst CURL = 0.45;\nconst N4 = [-1, 1, -W, W], ND = [-W - 1, -W + 1, W - 1, W + 1], LUT = [0, 1, 16];\n\n// Board, grain, knot and char colours for maple, birch, walnut and\n// black-stained oak, where the burn leaves grey ash.\nconst WOODS = [\n  [[228, 196, 150], [160, 110, 66], [128, 76, 40], [30, 19, 14]],\n  [[244, 232, 204], [210, 186, 142], [120, 90, 58], [30, 19, 14]],\n  [[140, 90, 58], [88, 54, 34], [50, 30, 18], [26, 16, 12]],\n  [[50, 44, 46], [30, 26, 28], [18, 14, 14], [92, 86, 80]],\n];\nconst SMOKE = [196, 190, 184], RIG = [16, 17, 22];\n\n// One board's wood: grain darkness (above 1 in a knot), how wet the soda\n// wash left each spot, and a per-channel speckle.\nfunction wood() {\n  const g = F32(N), wet = F32(N), nz = new Int8Array(N * 3);\n  const ox = rnd() * 300, oy = rnd() * 300, per = 2.6 + rnd() * 0.6, tilt = (rnd() - 0.5) * 0.06;\n  const knots = [];\n  for (let k = 0, nk = 1 + floor(rnd() * 3); k \u003c nk; k++)\n    knots.push([X0 + 9 + rnd() * (X1 - X0 - 18), Y0 + 14 + rnd() * (Y1 - Y0 - 28), 1.6 + rnd() * 1.4]);\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let u = x + tilt * y + 9 * (vn(x / 26 + ox, y / 40 + oy) - 0.5) + 2 * (vn(x / 7 + oy, y / 11 + ox) - 0.5), kd = 0;\n      for (const [kx, ky, kr] of knots) {\n        const dx = x - kx, dy = (y - ky) / 2.2, d2 = dx * dx + dy * dy;\n        // The grain bends round a knot and crowds in close to it.\n        u += (kr * kr * 3 * dx) / (d2 + kr * kr);\n        kd = max(kd, 1 - sqrt(d2) / kr);\n      }\n      // Thin dark latewood lines, a pore streak here and there, and the curl\n      // of figured maple across the grain, a band every two rows or so.\n      const c = 0.5 + 0.5 * Math.cos((2 * Math.PI * u) / per);\n      let v = c ** 4 * (0.8 + 0.6 * vn(x / 5 + ox, y / 30)) + 0.22 * (hash(x, floor(y / 4) + 7) - 0.5);\n      v += CURL * (0.5 + 0.5 * Math.sin((2 * Math.PI * (y + 1.5 * vn(x / 6 + oy, y / 20))) / 2.3));\n      if (kd > 0) v = 1 + kd * 0.6;\n      g[i] = cl(v, 0, 1.6);\n      wet[i] = 0.5 + 0.5 * vn(x / 9 + oy, y / 9 + ox);\n      for (let ch = 0; ch \u003c 3; ch++) nz[i * 3 + ch] = round((rnd() - 0.5) * 4);\n    }\n  return { g, wet, nz, col: F32(N * 3), at: -1 };\n}\n\n// A board's colours for this K1: grain, knots, lamp, bevels and speckle.\nfunction paint(B, wood) {\n  const wv = wood * 3, wi = min(2, floor(wv)), wf = wv - wi, WC = [];\n  for (let j = 0; j \u003c 4; j++) WC.push([0, 1, 2].map((c) => WOODS[wi][j][c] + (WOODS[wi + 1][j][c] - WOODS[wi][j][c]) * wf));\n  B.ch = WC[3];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x, gv = B.g[i], lo = gv \u003c= 1 ? 0 : 1, t = gv \u003c= 1 ? gv : (gv - 1) / 0.6;\n      let lf = 1.02 - 0.12 * (y / H);\n      if (x === X0 || y === Y0) lf *= 1.08;\n      if (x === X1 || y === Y1) lf *= 0.7;\n      for (let c = 0; c \u003c 3; c++) B.col[i * 3 + c] = (WC[lo][c] + (WC[lo + 1][c] - WC[lo][c]) * t) * lf + B.nz[i * 3 + c];\n    }\n  B.at = wood;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    time: 0, ph: 0, pt: 0, tau: 0, power: 0, wood: 0, eta: 1, lead: 0, ym: 64,\n    own: new Uint8Array(N), twg: new Uint8Array(N), par: new Int32Array(N), cnt: new Int32Array(N), born: F32(N),\n    phi: F32(N), phi0: F32(N), chr: F32(N), sco: F32(N), ht: F32(N),\n    cand: [new Int32Array(N), new Int32Array(N)], cw: [F32(N), F32(N)], nc: [0, 0], acc: [0, 0], tac: [0, 0], tw: [], ntw: 0, cells: [new Int32Array(N), new Int32Array(N)], ncell: [1, 1], nsk: [1, 1],\n    fr: [TY, BY], meet: -1, meetQ: -1, path: new Int32Array(N), np: 0,\n    pl: F32(N), sm: F32(N), puffs: [], ring: new Int32Array(512), nr: 0, hot: new Int32Array(32), nh: 0, flash: 0,\n    wa: wood(), wb: wood(),\n  });\n  for (let k = 0; k \u003c 256; k++) P.tw.push({ left: 0 }), k \u003c 70 && P.puffs.push({ on: 0 });\n  // The field round the two bare electrodes, solved once from a straight ramp.\n  for (let y = Y0; y \u003c= Y1; y++) for (let x = X0; x \u003c= X1; x++) P.phi[y * W + x] = cl((y - TY) / (BY - TY), 0, 1);\n  (P.own[TY * W + TX] = 1), (P.phi[TY * W + TX] = 0), (P.own[BY * W + BX] = 2), (P.phi[BY * W + BX] = 1);\n  relax(P, 400);\n  P.phi0.set(P.phi);\n  fresh(P);\n}\n\n// A clean board under the electrodes, wet and unburnt.\nfunction fresh(P) {\n  for (const a of [P.own, P.twg, P.cnt, P.chr, P.sco, P.ht]) a.fill(0);\n  P.par.fill(-1);\n  P.born.fill(-9);\n  P.phi.set(P.phi0);\n  for (const t of P.tw) t.left = 0;\n  const t = TY * W + TX, b = BY * W + BX;\n  (P.own[t] = P.cnt[t] = P.cnt[b] = 1), (P.own[b] = 2), (P.cells[0][0] = t), (P.cells[1][0] = b);\n  Object.assign(P, { ncell: [1, 1], nsk: [1, 1], fr: [TY, BY], acc: [0, 0], tac: [0, 0], meet: -1, meetQ: -1, np: 0, tau: 0 });\n}\n\n// Red-black over-relaxation of Laplace's equation on the board: the top tree\n// held at 0, the bottom one at 1, the board's edges insulating.\nfunction relax(P, sweeps) {\n  const { own, phi } = P;\n  for (let s = 0; s \u003c sweeps; s++)\n    for (let c = 0; c \u003c 2; c++)\n      for (let y = Y0; y \u003c= Y1; y++) {\n        const r = y * W;\n        for (let x = X0 + ((y + c) & 1); x \u003c= X1; x += 2) {\n          const i = r + x;\n          if (own[i]) continue;\n          const v = phi[i];\n          const a = x > X0 ? phi[i - 1] : v, b = x \u003c X1 ? phi[i + 1] : v, u = y > Y0 ? phi[i - W] : v, d = y \u003c Y1 ? phi[i + W] : v;\n          phi[i] = v + 1.85 * ((a + b + u + d) * 0.25 - v);\n        }\n      }\n}\n\n// A wood cell beside one cell of a tree, or touching one at a corner, may\n// join it, with a chance that goes as the field there to the power eta.\n// Nothing off the board ever joins, so neighbours need no bounds checks.\nfunction scan(P, eta) {\n  const { own, phi, cand, cw } = P, n = [0, 0], t = [0, 0];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      if (own[i]) continue;\n      // Neighbours of each tree counted in one number, four bits a tree.\n      const s4 = LUT[own[i - 1]] + LUT[own[i + 1]] + LUT[own[i - W]] + LUT[own[i + W]];\n      const s8 = LUT[own[i - W - 1]] + LUT[own[i - W + 1]] + LUT[own[i + W - 1]] + LUT[own[i + W + 1]];\n      for (let k = 0; k \u003c 2; k++) {\n        const a = (s4 >> (4 * k)) & 15;\n        if (a > 1 || (!a && ((s8 >> (4 * k)) & 15) !== 1)) continue;\n        t[k] += pow(max(k ? 1 - phi[i] : phi[i], 1e-5), eta);\n        cand[k][n[k]] = i;\n        cw[k][n[k]++] = t[k];\n      }\n    }\n  P.nc = n;\n}\n\n// A cell joins tree k only if branches stay one LED wide: nothing of the\n// tree may touch it but the cell it grows from and that cell's neighbours.\n// Touching the other tree is the meeting.\nfunction join(P, c, k, tw = 0) {\n  const { own } = P;\n  if (own[c]) return false;\n  let p = -1, m = 0;\n  for (const o of N4) if (own[c + o] === k) (p = c + o), m++;\n  if (m > 1) return false;\n  if (p \u003c 0) for (const o of ND) if (own[c + o] === k && p \u003c 0) p = c + o;\n  if (p \u003c 0) return false;\n  const px = p & 63, py = p >> 6;\n  let other = -1;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const q = c + dy * W + dx;\n      if (q === c || q === p || !own[q]) continue;\n      if (own[q] !== k) {\n        // The trees may not close before their time.\n        if (P.tau \u003c TG - 0.25) return false;\n        other = q;\n      } else if (abs((q & 63) - px) > 1 || abs((q >> 6) - py) > 1) return false;\n    }\n  add(P, c, p, k, tw);\n  if (other >= 0) (P.meet = c), (P.meetQ = other);\n  return true;\n}\n\nfunction add(P, c, p, k, tw) {\n  const { cnt, par } = P, y = c >> 6, x = c & 63;\n  (P.own[c] = k), (P.twg[c] = tw), (par[c] = p), (cnt[c] = P.ht[c] = P.chr[c] = 1), (P.born[c] = P.time), (P.phi[c] = k - 1);\n  P.fr[k - 1] = k === 1 ? max(P.fr[0], y) : min(P.fr[1], y);\n  scorch(P, x, y, 1, 0.04);\n  P.ring[P.nr++ & 511] = c;\n  P.cells[k - 1][P.ncell[k - 1]++] = c;\n  if (!tw) P.nsk[k - 1]++;\n  // The current that feeds every cell beyond reaches it through all the\n  // cells back to the electrode, and the busiest burn into wide grooves.\n  for (let a = p; a >= 0; a = par[a]) {\n    const w = WIDE.indexOf(++cnt[a]);\n    if (w >= 0) {\n      const ax = a & 63, ay = a >> 6, r = 1 + 0.6 * w;\n      scorch(P, ax, ay, r, w ? 0.9 : 0.7, 1);\n      scorch(P, ax, ay, r + 2, 0.35);\n    }\n  }\n}\n\n// With burn set, char a groove of radius r round (x, y), still warm;\n// without, brown the wood within r by v, less towards the edge.\nfunction scorch(P, x, y, r, v, burn) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy, q = qy * W + qx;\n      if (d2 > r * r || qx \u003c X0 || qx > X1 || qy \u003c Y0 || qy > Y1) continue;\n      if (!burn) P.sco[q] = min(1, P.sco[q] + v * (1 - d2 / (r * r + 1)));\n      else (P.chr[q] = max(P.chr[q], v)), (P.ht[q] = max(P.ht[q], 0.5 * v));\n    }\n}\n\nfunction grow(P, d) {\n  relax(P, 3);\n  // Each tree has a front it should have reached by now, eased in so the\n  // growth speeds up as the trees close (a hard pull sends leaders racing\n  // out at once), and a cell budget that rises steeply when it lags.\n  const s = min(1, P.tau / TG) ** (1.35 - 0.15 * P.eta), late = max(0, P.tau - TG);\n  const lag = [TY + (P.ym - TY) * s - P.fr[0], P.fr[1] - (BY - (BY - P.ym) * s)];\n  // The leading electrode's tree takes the larger share of the front's\n  // cells; fringe twigs sprout as fast as there is channel to carry them,\n  // fewer the harder the pull.\n  for (let k = 0; k \u003c 2; k++) {\n    const f = exp(cl(lag[k] / 6, -2, 2.5)), sh = 1 + (k ? 0.85 : -0.85) * P.lead;\n    P.acc[k] += d * RATE * sh * f * (1 + 4 * late);\n    P.tac[k] += d * TWIG * P.nsk[k] * ((4.5 - P.eta) / 3.5) ** 2;\n  }\n  twigs(P);\n  if (P.acc[0] \u003c 1 && P.acc[1] \u003c 1 && P.tac[0] \u003c 1 && P.tac[1] \u003c 1) return;\n  scan(P, P.eta + 2 * late);\n  for (let k = 0; k \u003c 2; k++) {\n    const n = min(120, floor(P.acc[k])), C = P.cand[k], S = P.cw[k], m = P.nc[k];\n    P.acc[k] -= n;\n    if (!m) continue;\n    const tot = S[m - 1];\n    for (let t = 0, tries = 0; t \u003c n && tries \u003c 3 * n; tries++) {\n      const r = rnd() * tot;\n      let lo = 0;\n      for (let hi = m - 1, mid; lo \u003c hi; ) (mid = (lo + hi) >> 1), S[mid] \u003c r ? (lo = mid + 1) : (hi = mid);\n      if (join(P, C[lo], k + 1)) t++;\n      if (P.meet >= 0) return;\n    }\n  }\n  // A fringe twig sprouts off a burnt channel, an eighth of a turn off it\n  // or now and then a quarter, and runs a few LEDs, bending as it goes. A\n  // twig sprouts shorter twigs of its own, three generations deep.\n  for (let tries = 0, k = 0; tries \u003c 300; tries++) {\n    if (P.tac[k] \u003c 1) k = 1 - k;\n    if (P.tac[k] \u003c 1) break;\n    const a = P.cells[k][floor(rnd() * P.ncell[k])], g = P.twg[a];\n    if (P.par[a] \u003c 0 || g > 2 || rnd() > GEN[g]) continue;\n    // The branch's way here, read over four cells so one step cannot throw it.\n    let b = a;\n    for (let n = 0; n \u003c 4 && P.par[b] >= 0; n++) b = P.par[b];\n    const j = round((Math.atan2((a >> 6) - (b >> 6), (a & 63) - (b & 63)) * 4) / Math.PI) & 7;\n    const dir = (j + (rnd() \u003c 0.5 ? 1 : 7) * (rnd() \u003c 0.85 ? 1 : 2)) & 7;\n    const x = (a & 63) + DIRS[dir][0], y = (a >> 6) + DIRS[dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, k + 1, g + 1)) continue;\n    P.tac[k]--;\n    if (P.meet >= 0) return;\n    Object.assign(P.tw[P.ntw++ & 255], { c, d0: dir, dir, k: k + 1, g: g + 1, left: LEN[g] + floor(rnd() * LEN[g]) });\n  }\n  P.tac = P.tac.map((v) => min(v, 4));\n}\n\nfunction twigs(P) {\n  for (const t of P.tw) {\n    if (t.left \u003c= 0) continue;\n    t.left--;\n    // A twig wanders an eighth of a turn, never further off its way.\n    if (rnd() \u003c 0.25) {\n      const dir = (t.dir + (rnd() \u003c 0.5 ? 1 : 7)) & 7, off = (dir - t.d0 + 8) & 7;\n      if (off \u003c= 1 || off >= 7) t.dir = dir;\n    }\n    const x = (t.c & 63) + DIRS[t.dir][0], y = (t.c >> 6) + DIRS[t.dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, t.k, t.g)) {\n      t.left = 0;\n      continue;\n    }\n    t.c = c;\n    if (P.meet >= 0) return;\n  }\n}\n\n// The joined path, from the top electrode to the bottom one.\nfunction trace(P) {\n  const top = P.own[P.meet] === 1 ? P.meet : P.meetQ, bot = top === P.meet ? P.meetQ : P.meet;\n  let n = 0;\n  for (let a = top; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.path.subarray(0, n).reverse();\n  for (let a = bot; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.np = n;\n  for (let j = 0; j \u003c n; j++) {\n    const a = P.path[j], x = a & 63, y = a >> 6;\n    scorch(P, x, y, 2, 1, 1);\n    scorch(P, x, y, 4, 0.5);\n    P.ht[a] = 1;\n  }\n}\n\nfunction go(P, ph) {\n  (P.ph = ph), (P.pt = 0);\n  if (ph === 1) P.power = 1;\n  if (ph === 2) trace(P), (P.flash = 1);\n  if (ph > 2) P.power = 0;\n  if (ph === 0) ([P.wa, P.wb] = [P.wb, P.wa]), fresh(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  (P.wood = cl(k[0], 0, 1)), (P.eta = cl(k[2], 1, 4)), (P.lead = cl(k[3], -1, 1));\n  P.ym = (TY + BY) / 2 - 44 * P.lead;\n  (P.time += d), (P.pt += d);\n  if (input.btnPressed && input.btnPressed[0] && P.ph > 0 && P.ph \u003c 4) go(P, 4);\n  const ph = P.ph;\n  if (ph === 0 && P.pt >= SOAK) go(P, 1);\n  else if (ph === 1) {\n    P.tau += d;\n    grow(P, d);\n    // A board the trees cannot cross trips the breaker without an arc.\n    if (P.meet >= 0) go(P, 2);\n    else if (P.tau > TG + 3) go(P, 3);\n  } else if (ph === 2) {\n    // The arc keeps its path white hot.\n    for (let j = 0; j \u003c P.np; j++) P.ht[P.path[j]] = 1;\n    if (P.pt >= ARC) go(P, 3);\n  } else if (ph === 3 && P.pt >= COOL) go(P, 4);\n  else if (ph === 4 && P.pt >= SLIDE) go(P, 0), (P.wb = wood());\n  P.flash = max(0, P.flash - d * 9);\n  heat(P, d), smoke(P, d);\n}\n\n// Embers: fresh channels glow and cool to char, while the power is on the\n// busy trunks stay hot, and anything hot browns the wood round it.\nfunction heat(P, d) {\n  const { ht, own, cnt, sco, hot } = P, dec = exp(-d / (P.power ? 0.3 : 0.9));\n  let sum = 0, nh = 0;\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let h = ht[i];\n      if (h \u003c 0.004 && !own[i]) continue;\n      h *= dec;\n      if (P.power && own[i] && cnt[i] > 24) h = max(h, min(0.6, 0.12 * (log2(cnt[i]) - 3.5)) * (0.85 + 0.15 * rnd()));\n      ht[i] = h;\n      if (h > 0.2 && (cnt[i] > 12 || !own[i])) {\n        sum += h;\n        for (const o of N4) sco[i + o] = min(1, sco[i + o] + d * h * 0.3);\n        if (nh \u003c 32) hot[nh++] = i;\n        else if (rnd() \u003c 0.05) hot[floor(rnd() * 32)] = i;\n      }\n    }\n  P.nh = nh;\n  P.heatSum = sum;\n}\n\n// Smoke puffs rise off the hot channels, spread and thin out.\nfunction smoke(P, d) {\n  let want = (P.ph === 4 ? 0 : P.heatSum) * d * 0.22;\n  for (const s of P.puffs) {\n    if (s.on) {\n      if ((s.age += d) > s.life) {\n        s.on = 0;\n        continue;\n      }\n      s.x += (s.vx + 3 * sin(s.age * 2.3 + s.y * 0.1)) * d;\n      s.y += s.vy * d;\n      s.r += d * 1.6;\n      continue;\n    }\n    if (want > rnd() && P.nh) {\n      const i = P.hot[floor(rnd() * P.nh)];\n      Object.assign(s, { on: 1, x: i & 63, y: i >> 6, vx: (rnd() - 0.5) * 4, vy: -8 - rnd() * 8, r: 1, a: 0.16 + rnd() * 0.16, age: 0, life: 2.5 + rnd() * 2 });\n      want -= 1;\n    }\n  }\n}\n\n// Plasma at (x, y): how strongly it covers each LED round it.\nfunction plasma(L, x, y, r, v) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy;\n      if (qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c H && d2 \u003c= r * r) L[qy * W + qx] += v / (1 + d2 * 2.5);\n    }\n}\n\n// Ember colour by heat: dull red, orange, then yellow-white.\nconst EK = [0, 0.25, 0.6, 1], EC = [[0, 0, 0], [175, 35, 6], [255, 110, 20], [255, 220, 140]];\nfunction ember(h, out) {\n  const j = h \u003c 0.25 ? 0 : h \u003c 0.6 ? 1 : 2, t = (min(h, 1) - EK[j]) / (EK[j + 1] - EK[j]);\n  for (let c = 0; c \u003c 3; c++) out[c] = EC[j][c] + (EC[j + 1][c] - EC[j][c]) * t;\n}\n\nconst EM = [0, 0, 0];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { own, chr, sco, ht, born, pl, sm } = P;\n  pl.fill(0);\n  sm.fill(0);\n  if (P.wa.at !== P.wood) paint(P.wa, P.wood);\n  if (P.ph === 4 && P.wb.at !== P.wood) paint(P.wb, P.wood);\n  const off = P.ph === 4 ? SL * (1 - (1 + Math.cos((Math.PI * min(1, P.pt / SLIDE)))) / 2) : 0, oy = round(off);\n\n  // Plasma at the tips, and short streamers crackling ahead of them.\n  if (P.power) {\n    for (let j = 0; j \u003c 512 && j \u003c P.nr; j++) {\n      const c = P.ring[(P.nr - 1 - j) & 511], age = P.time - born[c];\n      if (age > TIP) break;\n      // Twigs behind the front only flash orange.\n      if (P.twg[c] && (own[c] === 1 ? (c >> 6) \u003c P.fr[0] - 14 : (c >> 6) > P.fr[1] + 14)) continue;\n      const f = (1 - age / TIP) * (0.5 + 0.5 * rnd()), x = c & 63, y = (c >> 6) + oy;\n      plasma(pl, x, y, 1.5, f);\n      if (rnd() \u003c 0.2)\n        for (let st = 0, sx = x, sy = y, len = 2 + floor(rnd() * 5); st \u003c len; st++) {\n          if (rnd() \u003c 0.6) sy += own[c] === 1 ? 1 : -1;\n          else sx += rnd() \u003c 0.5 ? -1 : 1;\n          if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n          pl[sy * W + sx] += 0.9 - st * 0.12;\n        }\n    }\n    // A blue corona at each electrode.\n    const z = 0.4 + 0.4 * rnd();\n    plasma(pl, TX, TY + oy, 2.5, z);\n    plasma(pl, BX, BY + oy, 2.5, z);\n  }\n  // The arc down the joined path, flickering sideways.\n  if (P.ph === 2) {\n    const f = (1 - 0.6 * (P.pt / ARC)) * (0.7 + 0.3 * rnd()), seed = rnd() * 99;\n    for (let j = 0; j \u003c P.np; j++) {\n      const a = P.path[j], x = (a & 63) + round(1.6 * (vn(j * 0.3, seed) - 0.5)), y = a >> 6;\n      if (j % 2 === 0) plasma(pl, x, y, 3.5, 0.35 * f);\n      pl[y * W + x] += 3 * f;\n    }\n  }\n  for (const s of P.puffs) {\n    if (!s.on) continue;\n    // A wisp, twice as tall as it is wide.\n    const a = s.a * sin((Math.PI * s.age) / s.life), R = Math.ceil(s.r), R2 = 2 * R;\n    for (let dy = -R2; dy \u003c= R2; dy++)\n      for (let dx = -R; dx \u003c= R; dx++) {\n        const qx = round(s.x) + dx, qy = round(s.y) + dy, d2 = (dx * dx + dy * dy * 0.25) / (s.r * s.r);\n        if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H || d2 >= 1) continue;\n        sm[qy * W + qx] += a * (1 - d2) * (1 - d2);\n      }\n  }\n\n  const fl = P.flash * 70, CH = P.wa.ch, dry = P.ph > 1 ? 1 : P.ph ? P.tau / (TG + 0.5) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r, g, b;\n      // Which board, if any, is under this LED.\n      let yb = y - oy, B = P.wa, burnt = 1;\n      if (P.ph === 4 && yb \u003c Y0) (yb += SL), (B = P.wb), (burnt = 0);\n      if (x >= X0 && x \u003c= X1 && yb >= Y0 && yb \u003c= Y1) {\n        const i = yb * W + x, C = B.col;\n        // The wet wash glosses the wood; the current steams it off the whole\n        // board and the burn dries it at once.\n        const s = burnt ? sco[i] : 0, lf = 0.86 + 0.28 * B.wet[i] * max(0, 1 - 3 * s - (burnt ? dry : 0));\n        (r = C[i * 3] * lf), (g = C[i * 3 + 1] * lf), (b = C[i * 3 + 2] * lf);\n        if (burnt) {\n          if (s > 0) (r *= 1 - 0.5 * s), (g *= 1 - 0.66 * s), (b *= 1 - 0.8 * s);\n          const c = chr[i];\n          if (c > 0) (r += (CH[0] - r) * c), (g += (CH[1] - g) * c), (b += (CH[2] - b) * c);\n          const h = ht[i];\n          if (h > 0.02 && c > 0.3) {\n            // Thick char glows only along its rim.\n            const rim = (x > X0 && chr[i - 1] \u003c 0.5) || (x \u003c X1 && chr[i + 1] \u003c 0.5) || chr[i - W] \u003c 0.5 || chr[i + W] \u003c 0.5;\n            ember(h * (rim ? 1 : 0.45), EM);\n            (r = max(r, EM[0])), (g = max(g, EM[1])), (b = max(b, EM[2]));\n          }\n        }\n        (r += fl), (g += fl), (b += fl * 1.2);\n      } else {\n        // The dark rig behind, with the board's shadow to its right.\n        const sh = x > X1 ? 0.55 : 1, q = hash(x, y);\n        (r = (RIG[0] + 6 * q) * sh), (g = (RIG[1] + 6 * hash(y, x)) * sh), (b = (RIG[2] + 6 * q) * sh);\n        if (x === 0 || x === 63) (r = 64 + 10 * q), (g = 66 + 10 * q), (b = 74 + 10 * q);\n      }\n      const m = min(0.7, sm[p]);\n      (r += (SMOKE[0] - r) * m), (g += (SMOKE[1] - g) * m), (b += (SMOKE[2] - b) * m);\n      // Plasma: deep blue where it is thin, blue-white where it is thick.\n      const t = pl[p];\n      if (t > 0.01) {\n        const u = min(1, t), w = min(1, t / 2.5);\n        (r += (90 + 160 * w - r) * u), (g += (120 + 130 * w - g) * u), (b += (255 - b) * u);\n      }\n      display.setPixel(x, y, cl(r, 0, 255) | 0, cl(g, 0, 255) | 0, cl(b, 0, 255) | 0);\n    }\n  electrodes(display, P);\n}\n\n// Brass clamps with their tips on the board, the red lead in from the top\n// and the black one from the bottom.\nfunction electrodes(display, P) {\n  for (let e = 0; e \u003c 2; e++) {\n    const cx = e ? BX : TX, s = e ? -1 : 1, y0 = e ? H - 1 : 0, lead = e ? [[96, 98, 110], [36, 36, 42]] : [[236, 84, 64], [172, 28, 22]];\n    for (let j = 0; j \u003c= 8; j++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const lit = j === 4 || dx === -3, dark = j === 7 || dx === 3;\n        let c = null;\n        if (j \u003c= 3 && abs(dx) \u003c= 1) c = lead[dx \u003c 0 ? 0 : 1];\n        else if (j >= 4 && j \u003c= 7) c = lit ? [236, 200, 110] : dark ? [130, 96, 40] : [196, 156, 70];\n        else if (j === 8 && !dx) c = P.power ? [210, 220, 255] : [240, 214, 130];\n        if (c) display.setPixel(cx + dx, y0 + s * j, c[0], c[1], c[2]);\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wood","min":0,"max":1,"about":"Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower."},{"name":"Pull","min":1,"max":4,"about":"The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders."},{"name":"Lead","min":-1,"max":1,"about":"Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway."}],"start":[0,2,1,0.06],"measures":{"motion":0.2052,"detail":0.13,"edges":0.3965,"complexity":2.6118,"coverage":0.9587,"colour":0.1893,"drift":0.2406},"knobResponse":[0.4635,0.1257,0.0391,0.0652]},{"slug":"life","title":"Life","family":"automata","round":1,"note":"같은 여덟 이웃에 법칙이 여섯이에요. 세포가 나이만큼 색을 입어서 법칙마다 무엇이 남는지 보여요.","idea":"The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.","buttons":"K1 tap sweeps a fresh soup down the whole panel.","code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-life","type":"code","name":"life","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole palette, newborn to old to ghost, around the colour wheel."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from one to about 24."},{"name":"Rule","min":0,"max":5,"about":"0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345."},{"name":"Ghosts","min":0,"max":1,"about":"How long a dead cell glows on, from a short smear to long exposure."}],"start":[0,2,0,0.06],"measures":{"motion":0.6935,"detail":0.1138,"edges":0.7121,"complexity":0.3343,"coverage":0.2193,"colour":0.2429,"drift":0.1393},"knobResponse":[0.1027,0.1531,0.303,0.0806]},{"slug":"liftoff","title":"Liftoff","family":"flight","round":22,"note":"새벽 물 건너 발사대에서 로켓이 하얀 산소 김을 흘리며 서 있다가 김구름 속에 불을 붙이고 솟아올라요. 카메라가 따라 고개를 들면 하늘이 파랑에서 별 뜬 검정으로 바뀌고, Max-Q 와 단 분리를 지나 밝은 점이 되면 새 로켓이 발사대에 서요.","idea":"A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.","buttons":"K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.","code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","layer":{"id":"layer-liftoff","type":"code","name":"liftoff","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Rocket","min":0,"max":3,"about":"A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer."},{"name":"Stages","min":1,"max":3,"about":"1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb."},{"name":"Time","min":0,"max":1,"about":"Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun."}],"start":[0,2,1,0.06],"measures":{"motion":0.3231,"detail":0.0267,"edges":0.3728,"complexity":1.8839,"coverage":0.9986,"colour":0.2838,"drift":0.1066},"knobResponse":[0.0489,0.062,0.0431,0.4667]},{"slug":"lip-gloss","title":"Lip Gloss","family":"cosmetic","round":31,"note":"맑은 글로스가 위에서 부어져 옅은 벽을 타고 흘러내리고, 앞머리가 길이 다른 방울 줄기로 갈라져 끝마다 빛 한 점을 문 구슬이 맺혀요. 바닥에 닿은 구슬은 떨어지고 글로스는 얇아지며 맑아져요. K1 은 색상환을 다 돌고, 누르면 위에 새로 부어요.","idea":"A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.","buttons":"K1 tap pours a fresh band along the top now.","code":"// ===== Patternflow pattern =====\n// Title:   Lip Gloss\n// Family:  cosmetic\n// Idea:    A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after clear lip gloss sliding down a tester wall\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it.\n// Knob 2: Speed. How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Pour. How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front.\n// Knob 4: Shimmer. Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly.\n// Buttons: K1 tap pours a fresh band along the top now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: rose, not red.\nconst H0 = 0.935;\n// The film moves under gravity with a flux C*h^3 (a viscous film on a wall,\n// speed going as thickness squared), so a film one unit thick runs C rows a\n// second at its front at Speed 2. A pour lasts POUR seconds, one starts\n// every CYCLE seconds.\nconst C = 30, POUR = 3, CYCLE = 11;\n// Flecks of mica for the Shimmer knob, at most MAXF at once.\nconst MAXF = 700;\n// Beads hanging from the bottom edge, at most MAXD; one lets go once it holds\n// DROP units of gloss.\nconst MAXD = 24, DROP = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    h: F(N), hr: F(N), q: F(H), m: F(W), front: new Int16Array(W), hf: F(W),\n    T: 0, since: 0, pourLeft: 0, flow: 0, out: F(W),\n    dx: F(MAXD), dv: F(MAXD), df: F(MAXD), dvy: F(MAXD), nd: 0,\n    bx: F(MAXD * 3), by: F(MAXD * 3), br: F(MAXD * 3), nb: 0,\n    fx: F(MAXF), fy: F(MAXF), fp: F(MAXF), fw: F(MAXF), nf: 0, cover: 0,\n    hue: 0, rate: 1, amount: 0, shim: 0.06, started: false,\n    tint: F(3), absb: F(3), wall: F(3), pear: F(3), gain: 1, dim: 0.27, buf: F(N * 3),\n  };\n}\n\n// A fresh pour: how much gloss comes down each column. A film running down\n// a wall breaks its front into fingers (Huppert 1982), the columns that get\n// ahead taking more of the flow. Here the fingers are laid into the pour: a\n// thin sheet across the whole width with bumps on it of different heights,\n// and since the front runs at a speed that goes as thickness squared, each\n// bump runs ahead as a drip of its own length.\nfunction newPour(S) {\n  const P = S.amount, m = S.m, nf = round(3 + 5 * P + rnd() * 0.8);\n  const base = 0.1 + 0.95 * P;\n  for (let x = 0; x \u003c W; x++) m[x] = base * (0.9 + 0.2 * rnd());\n  for (let k = 0; k \u003c nf; k++) {\n    const c = ((k + 0.5 + (rnd() - 0.5) * 0.7) / nf) * W, w = (1.6 + 1.3 * rnd()) * (1.3 - 0.4 * P);\n    const a = (0.6 + 1.0 * rnd()) * (1 - 0.55 * P);\n    for (let x = 0; x \u003c W; x++) m[x] += a * exp(-(((x + 0.5 - c) / w) ** 2));\n  }\n  S.pourLeft = POUR * (1 - 0.35 * P);\n  S.since = 0;\n  S.flow = C * (0.85 + 0.6 * P);\n}\n\nfunction flecks(S, st) {\n  // Mica hangs all through the gloss: new flecks turn up wherever the film is\n  // thick enough to hold them, as many as Shimmer asks for the film there is,\n  // and each rides down at the surface speed of the film under it, half as\n  // fast again as the film's mean.\n  const h = S.h, want = min(MAXF, S.shim * 1000 * S.cover);\n  for (let tries = 0; tries \u003c 60 && S.nf \u003c want; tries++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (h[floor(y) * W + floor(x)] \u003c 0.15) continue;\n    const i = S.nf++;\n    S.fx[i] = x;\n    S.fy[i] = y;\n    S.fp[i] = rnd() * 2 * PI;\n    S.fw[i] = (1.5 + 2.5 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  }\n  for (let i = S.nf - 1; i >= 0; i--) {\n    const hh = h[floor(S.fy[i]) * W + floor(S.fx[i])];\n    S.fy[i] += 1.5 * C * hh * hh * st;\n    S.fp[i] += S.fw[i] * st;\n    if (S.fy[i] >= H || hh \u003c 0.06 || S.nf > want + 20) {\n      const j = --S.nf;\n      S.fx[i] = S.fx[j];\n      S.fy[i] = S.fy[j];\n      S.fp[i] = S.fp[j];\n      S.fw[i] = S.fw[j];\n    }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= CYCLE) newPour(S);\n  const h = S.h, q = S.q, m = S.m;\n  // The pour feeds the top row; as it ends it tapers off over half a second.\n  if (S.pourLeft > 0) {\n    const f = S.flow * min(1, S.pourLeft * 2) * st;\n    for (let x = 0; x \u003c W; x++) h[x] += m[x] * f;\n    S.pourLeft -= st;\n  }\n  // Each column runs down with flux C*h^3, worked upwind in steps short\n  // enough for the fastest wave, which runs at 3*C*h^2.\n  let hm = 0;\n  for (let p = 0; p \u003c N; p++) if (h[p] > hm) hm = h[p];\n  const n = Math.ceil((st * 3 * C * hm * hm) / 0.8) || 1, dt = st / n;\n  for (let k = 0; k \u003c n; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      for (let y = 0, p = x; y \u003c H; y++, p += W) {\n        const v = h[p];\n        q[y] = C * v * v * v;\n      }\n      h[x] -= dt * q[0];\n      S.out[x] += dt * q[H - 1];\n      for (let y = 1, p = x + W; y \u003c H; y++, p += W) h[p] += dt * (q[y - 1] - q[y]);\n    }\n  }\n  // Surface tension pulls a little gloss sideways, so the drips stay round.\n  const D = min(0.2, 0.7 * st);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let prev = h[o];\n    for (let x = 0; x \u003c W; x++) {\n      const c = h[o + x], r = x \u003c W - 1 ? h[o + x + 1] : c;\n      h[o + x] = c + D * (prev + r - 2 * c);\n      prev = c;\n    }\n  }\n  // A film thinner than 0.45 slowly soaks away, the thinner the faster, so\n  // the wall clears from the top, where the draining film is thinnest, while\n  // the drips stay.\n  const fade = 0.075 * st;\n  let cover = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const v = h[p];\n    if (v \u003c 0.45) h[p] = max(0, v - fade * (1 - v / 0.45));\n    if (v > 0.15) cover++;\n  }\n  S.cover = cover / N;\n  flecks(S, st);\n  drops(S, st);\n}\n\n// What runs off the bottom row gathers into a bead hanging from the edge\n// under its drip; a full bead lets go and falls away.\nfunction drops(S, st) {\n  const out = S.out;\n  for (let x = 0; x \u003c W; x++) {\n    const v = out[x];\n    if (v \u003c= 0) continue;\n    out[x] = 0;\n    let b = -1, bd = 4.5;\n    for (let i = 0; i \u003c S.nd; i++) {\n      const d = abs(S.dx[i] - x - 0.5);\n      if (S.df[i] \u003c 0 && d \u003c bd) (bd = d), (b = i);\n    }\n    if (b \u003c 0) {\n      if (S.nd >= MAXD) continue;\n      b = S.nd++;\n      S.dx[b] = x + 0.5;\n      S.dv[b] = 0;\n      S.df[b] = -1;\n    }\n    const nv = S.dv[b] + v;\n    S.dx[b] = (S.dx[b] * S.dv[b] + (x + 0.5) * v) / nv;\n    S.dv[b] = nv;\n  }\n  for (let i = S.nd - 1; i >= 0; i--) {\n    if (S.df[i] \u003c 0) {\n      // A bead nothing feeds any more slowly soaks away like the film.\n      S.dv[i] -= 0.12 * st;\n      if (S.dv[i] > DROP) (S.df[i] = 0), (S.dvy[i] = 20);\n      else if (S.dv[i] \u003c 0.05) S.df[i] = 99;\n      continue;\n    }\n    S.dvy[i] += 500 * st;\n    S.df[i] += S.dvy[i] * st;\n    if (S.df[i] > 14) {\n      const j = --S.nd;\n      S.dx[i] = S.dx[j];\n      S.dv[i] = S.dv[j];\n      S.df[i] = S.df[j];\n      S.dvy[i] = S.dvy[j];\n    }\n  }\n}\n\n// Adds a round bead of gloss, radius r and height A, centred at cx, cy.\nfunction dome(S, cx, cy, r, A) {\n  const { hr, h } = S;\n  if (S.nb \u003c MAXD * 3) {\n    S.bx[S.nb] = cx;\n    S.by[S.nb] = cy;\n    S.br[S.nb++] = r;\n  }\n  for (let y = max(0, floor(cy - r)); y \u003c= min(H - 1, floor(cy + r)); y++)\n    for (let X = max(0, floor(cx - r)); X \u003c= min(W - 1, floor(cx + r)); X++) {\n      const dx = (X + 0.5 - cx) / r, dy = (y + 0.5 - cy) / r, d2 = dx * dx + dy * dy;\n      if (d2 \u003c 1) {\n        const p = y * W + X;\n        hr[p] = max(hr[p], h[p] + A * sqrt(1 - d2));\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.amount = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    newPour(S);\n    // Open a second and a half into the first pour.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) newPour(S);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { h, hr, front, hf, buf, tint, absb, wall } = S;\n  const hue = H0 + S.hue;\n  // How the gloss tints the light that goes through it: each channel is cut\n  // by exp(-a*h), a taken from the tint so thick gloss is the deep colour.\n  hsv(hue, 0.8, 1, tint, 0);\n  for (let c = 0; c \u003c 3; c++) absb[c] = -Math.log(max(0.2, tint[c])) * 0.95;\n  // Orange and yellow tints darkened read brown and olive on LEDs; the wall\n  // is bright enough that they stay clear, and they get a touch more light.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.11) / 0.1);\n  S.gain = 1 + 0.08 * am;\n  S.dim = 0.27 * (1 - 0.85 * max(0, 1 - abs(hw - 0.13) / 0.16));\n  // The wall: a pale warm white with a breath of the tint.\n  hsv(hue + 0.04, 0.07, 1, wall, 0);\n  // Each column's front and the rim behind it: walking up from the bottom,\n  // every step where the film thickens adds to a ridge that fades over three\n  // rows, the capillary ridge a running film piles up at its front.\n  const kr = exp(-1 / 2.6);\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0, f = -1, fh = 0;\n    for (let y = H - 1; y >= 0; y--) {\n      const p = y * W + x, below = y \u003c H - 1 ? h[p + W] : 0, jump = h[p] - below;\n      r *= kr;\n      if (jump > 0.02) r += jump * 0.9;\n      if (f \u003c 0 && h[p] > 0.1) (f = y), (fh = h[p]);\n      hr[p] = h[p] + r;\n    }\n    front[x] = f;\n    hf[x] = fh;\n  }\n  S.nb = 0;\n  // Beads: where a column's front runs further than its neighbours', the\n  // gloss gathers into a round bead at the tip of the drip.\n  for (let x = 0; x \u003c W; x++) {\n    const f = front[x];\n    if (f \u003c 6 || f > H - 5) continue;\n    let tip = true, lo = 1e9;\n    for (let d = -3; d \u003c= 3 && tip; d++) {\n      if (!d) continue;\n      const xx = x + d;\n      if (xx \u003c 0 || xx >= W) continue;\n      if (front[xx] > f || (front[xx] === f && d \u003c 0)) tip = false;\n      lo = min(lo, front[xx]);\n    }\n    if (!tip || f - lo \u003c 2) continue;\n    const r = 2 + 1.8 * min(1.2, hf[x]);\n    dome(S, x + 0.5, f + 0.6 - r * 0.55, r, 0.5 + 0.7 * min(1.2, hf[x]));\n  }\n  for (let i = 0; i \u003c S.nd; i++) {\n    const r = 1.3 + 1.2 * sqrt(S.dv[i]);\n    dome(S, S.dx[i], H - 0.3 - r + max(0, S.df[i]), r, 0.6 + 0.15 * r);\n  }\n  // The light: a soft bar above the wall that glides down it, seen in the\n  // gloss as a mirror image moved by the slope of the surface, and a small\n  // lamp to one side that puts a point of light on every bead.\n  const T = S.T, ys = ((T * 9) % (H + 60)) - 30, lxa = 0.25 * sin(T * 0.37), lya = -0.32 + 0.08 * sin(T * 0.23);\n  let hx = lxa, hy = lya, hz = 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hl;\n  hy /= hl;\n  hz /= hl;\n  const sh = S.shim, pear = S.pear;\n  hsv(hue - 0.04, 0.3, 245, pear, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t0 = hr[p], t = t0 / (1 + 0.25 * t0);\n      const wb = (0.8 + 0.07 * exp(-(((x - 32) / 40) ** 2 + ((y - ys * 0.5 - 30) / 90) ** 2))) * 255;\n      const film = sm(0.02, 0.14, t);\n      let R = wall[0] * wb, G = wall[1] * wb, B = wall[2] * wb;\n      if (film > 0) {\n        // Thick gloss also dims the wall a little in every channel, the band\n        // and the beads most, so the deep parts read deeper; less so for the\n        // warm tints, which dimmed turn brown and olive.\n        const g = S.gain * exp(-S.dim * t * t);\n        R *= exp(-absb[0] * t) * g;\n        G *= exp(-absb[1] * t) * g;\n        B *= exp(-absb[2] * t) * g;\n        // Mica scatters light back out of the gloss, a pearly haze of the\n        // tint over the film that grows with Shimmer.\n        const pe = 0.42 * sh * film;\n        R += (pear[0] - R) * pe;\n        G += (pear[1] - G) * pe;\n        B += (pear[2] - B) * pe;\n        const gx = (hr[x \u003c W - 1 ? p + 1 : p] - hr[x > 0 ? p - 1 : p]) * 0.5;\n        const gy = (hr[y \u003c H - 1 ? p + W : p] - hr[y > 0 ? p - W : p]) * 0.5;\n        let nx = -gx * 3, ny = -gy * 3, nz = 1;\n        const nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        nx *= nl;\n        ny *= nl;\n        nz *= nl;\n        // The bar seen in the gloss.\n        const yr = y - ny * 22 + (x - 32) * 0.15, bar = exp(-(((yr - ys) / 5) ** 2)) * 0.26 * film;\n        // The lamp: a sharp highlight where the surface faces half way\n        // between it and the eye.\n        const nd = max(0, nx * hx + ny * hy + nz * hz), spot = pow(nd, 200) * film;\n        const s = (bar + spot * 1.3 * sm(0.08, 0.35, t)) * 255;\n        R += s;\n        G += s;\n        B += s;\n      }\n      const q = p * 3;\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  // Every bead holds a point of light on the side towards the lamp, and the\n  // light it gathers lands as a glow of the tint low on the far side.\n  const pl = sqrt(hx * hx + hy * hy) || 1, ux = hx / pl, uy = hy / pl;\n  for (let i = 0; i \u003c S.nb; i++) {\n    const r = S.br[i], cx = S.bx[i], cy = S.by[i];\n    glow(buf, cx + ux * r * 0.42, cy + uy * r * 0.42, 0.55 + 0.04 * r, 235, 235, 235);\n    glow(buf, cx - ux * r * 0.35, cy - uy * r * 0.35 + r * 0.15, r * 0.38, 110 * tint[0], 110 * tint[1], 110 * tint[2]);\n  }\n  // Mica flecks: a pale glint of the tint, flashing white as they turn to\n  // the lamp, a bright flash spilling onto the four LEDs round it.\n  for (let i = 0; i \u003c S.nf; i++) {\n    const x = floor(S.fx[i]), y = floor(S.fy[i]);\n    const f = exp((cos(S.fp[i]) - 1) / 0.08), q = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[q + c] += 70 * (0.4 + 0.6 * tint[c]) + 200 * f;\n    if (f > 0.6)\n      for (let k = 0; k \u003c 4; k++) {\n        const X = x + (k === 0 ? 1 : k === 1 ? -1 : 0), Y = y + (k === 2 ? 1 : k === 3 ? -1 : 0);\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const o = (Y * W + X) * 3;\n        buf[o] += 90 * f;\n        buf[o + 1] += 90 * f;\n        buf[o + 2] += 90 * f;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    display.setPixel(p % W, (p / W) | 0, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n  }\n}\n\n// A soft round spot of light, sigma s LEDs, added at x, y.\nfunction glow(buf, x, y, s, r, g, b) {\n  const e = s * 2.5, k = 1 / (2 * s * s);\n  for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n    for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n      const w = exp(-((X + 0.5 - x) ** 2 + (Y + 0.5 - y) ** 2) * k), q = (Y * W + X) * 3;\n      buf[q] += r * w;\n      buf[q + 1] += g * w;\n      buf[q + 2] += b * w;\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-lip-gloss","type":"code","name":"lip-gloss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lip Gloss\n// Family:  cosmetic\n// Idea:    A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after clear lip gloss sliding down a tester wall\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it.\n// Knob 2: Speed. How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Pour. How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front.\n// Knob 4: Shimmer. Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly.\n// Buttons: K1 tap pours a fresh band along the top now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: rose, not red.\nconst H0 = 0.935;\n// The film moves under gravity with a flux C*h^3 (a viscous film on a wall,\n// speed going as thickness squared), so a film one unit thick runs C rows a\n// second at its front at Speed 2. A pour lasts POUR seconds, one starts\n// every CYCLE seconds.\nconst C = 30, POUR = 3, CYCLE = 11;\n// Flecks of mica for the Shimmer knob, at most MAXF at once.\nconst MAXF = 700;\n// Beads hanging from the bottom edge, at most MAXD; one lets go once it holds\n// DROP units of gloss.\nconst MAXD = 24, DROP = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    h: F(N), hr: F(N), q: F(H), m: F(W), front: new Int16Array(W), hf: F(W),\n    T: 0, since: 0, pourLeft: 0, flow: 0, out: F(W),\n    dx: F(MAXD), dv: F(MAXD), df: F(MAXD), dvy: F(MAXD), nd: 0,\n    bx: F(MAXD * 3), by: F(MAXD * 3), br: F(MAXD * 3), nb: 0,\n    fx: F(MAXF), fy: F(MAXF), fp: F(MAXF), fw: F(MAXF), nf: 0, cover: 0,\n    hue: 0, rate: 1, amount: 0, shim: 0.06, started: false,\n    tint: F(3), absb: F(3), wall: F(3), pear: F(3), gain: 1, dim: 0.27, buf: F(N * 3),\n  };\n}\n\n// A fresh pour: how much gloss comes down each column. A film running down\n// a wall breaks its front into fingers (Huppert 1982), the columns that get\n// ahead taking more of the flow. Here the fingers are laid into the pour: a\n// thin sheet across the whole width with bumps on it of different heights,\n// and since the front runs at a speed that goes as thickness squared, each\n// bump runs ahead as a drip of its own length.\nfunction newPour(S) {\n  const P = S.amount, m = S.m, nf = round(3 + 5 * P + rnd() * 0.8);\n  const base = 0.1 + 0.95 * P;\n  for (let x = 0; x \u003c W; x++) m[x] = base * (0.9 + 0.2 * rnd());\n  for (let k = 0; k \u003c nf; k++) {\n    const c = ((k + 0.5 + (rnd() - 0.5) * 0.7) / nf) * W, w = (1.6 + 1.3 * rnd()) * (1.3 - 0.4 * P);\n    const a = (0.6 + 1.0 * rnd()) * (1 - 0.55 * P);\n    for (let x = 0; x \u003c W; x++) m[x] += a * exp(-(((x + 0.5 - c) / w) ** 2));\n  }\n  S.pourLeft = POUR * (1 - 0.35 * P);\n  S.since = 0;\n  S.flow = C * (0.85 + 0.6 * P);\n}\n\nfunction flecks(S, st) {\n  // Mica hangs all through the gloss: new flecks turn up wherever the film is\n  // thick enough to hold them, as many as Shimmer asks for the film there is,\n  // and each rides down at the surface speed of the film under it, half as\n  // fast again as the film's mean.\n  const h = S.h, want = min(MAXF, S.shim * 1000 * S.cover);\n  for (let tries = 0; tries \u003c 60 && S.nf \u003c want; tries++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (h[floor(y) * W + floor(x)] \u003c 0.15) continue;\n    const i = S.nf++;\n    S.fx[i] = x;\n    S.fy[i] = y;\n    S.fp[i] = rnd() * 2 * PI;\n    S.fw[i] = (1.5 + 2.5 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  }\n  for (let i = S.nf - 1; i >= 0; i--) {\n    const hh = h[floor(S.fy[i]) * W + floor(S.fx[i])];\n    S.fy[i] += 1.5 * C * hh * hh * st;\n    S.fp[i] += S.fw[i] * st;\n    if (S.fy[i] >= H || hh \u003c 0.06 || S.nf > want + 20) {\n      const j = --S.nf;\n      S.fx[i] = S.fx[j];\n      S.fy[i] = S.fy[j];\n      S.fp[i] = S.fp[j];\n      S.fw[i] = S.fw[j];\n    }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= CYCLE) newPour(S);\n  const h = S.h, q = S.q, m = S.m;\n  // The pour feeds the top row; as it ends it tapers off over half a second.\n  if (S.pourLeft > 0) {\n    const f = S.flow * min(1, S.pourLeft * 2) * st;\n    for (let x = 0; x \u003c W; x++) h[x] += m[x] * f;\n    S.pourLeft -= st;\n  }\n  // Each column runs down with flux C*h^3, worked upwind in steps short\n  // enough for the fastest wave, which runs at 3*C*h^2.\n  let hm = 0;\n  for (let p = 0; p \u003c N; p++) if (h[p] > hm) hm = h[p];\n  const n = Math.ceil((st * 3 * C * hm * hm) / 0.8) || 1, dt = st / n;\n  for (let k = 0; k \u003c n; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      for (let y = 0, p = x; y \u003c H; y++, p += W) {\n        const v = h[p];\n        q[y] = C * v * v * v;\n      }\n      h[x] -= dt * q[0];\n      S.out[x] += dt * q[H - 1];\n      for (let y = 1, p = x + W; y \u003c H; y++, p += W) h[p] += dt * (q[y - 1] - q[y]);\n    }\n  }\n  // Surface tension pulls a little gloss sideways, so the drips stay round.\n  const D = min(0.2, 0.7 * st);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let prev = h[o];\n    for (let x = 0; x \u003c W; x++) {\n      const c = h[o + x], r = x \u003c W - 1 ? h[o + x + 1] : c;\n      h[o + x] = c + D * (prev + r - 2 * c);\n      prev = c;\n    }\n  }\n  // A film thinner than 0.45 slowly soaks away, the thinner the faster, so\n  // the wall clears from the top, where the draining film is thinnest, while\n  // the drips stay.\n  const fade = 0.075 * st;\n  let cover = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const v = h[p];\n    if (v \u003c 0.45) h[p] = max(0, v - fade * (1 - v / 0.45));\n    if (v > 0.15) cover++;\n  }\n  S.cover = cover / N;\n  flecks(S, st);\n  drops(S, st);\n}\n\n// What runs off the bottom row gathers into a bead hanging from the edge\n// under its drip; a full bead lets go and falls away.\nfunction drops(S, st) {\n  const out = S.out;\n  for (let x = 0; x \u003c W; x++) {\n    const v = out[x];\n    if (v \u003c= 0) continue;\n    out[x] = 0;\n    let b = -1, bd = 4.5;\n    for (let i = 0; i \u003c S.nd; i++) {\n      const d = abs(S.dx[i] - x - 0.5);\n      if (S.df[i] \u003c 0 && d \u003c bd) (bd = d), (b = i);\n    }\n    if (b \u003c 0) {\n      if (S.nd >= MAXD) continue;\n      b = S.nd++;\n      S.dx[b] = x + 0.5;\n      S.dv[b] = 0;\n      S.df[b] = -1;\n    }\n    const nv = S.dv[b] + v;\n    S.dx[b] = (S.dx[b] * S.dv[b] + (x + 0.5) * v) / nv;\n    S.dv[b] = nv;\n  }\n  for (let i = S.nd - 1; i >= 0; i--) {\n    if (S.df[i] \u003c 0) {\n      // A bead nothing feeds any more slowly soaks away like the film.\n      S.dv[i] -= 0.12 * st;\n      if (S.dv[i] > DROP) (S.df[i] = 0), (S.dvy[i] = 20);\n      else if (S.dv[i] \u003c 0.05) S.df[i] = 99;\n      continue;\n    }\n    S.dvy[i] += 500 * st;\n    S.df[i] += S.dvy[i] * st;\n    if (S.df[i] > 14) {\n      const j = --S.nd;\n      S.dx[i] = S.dx[j];\n      S.dv[i] = S.dv[j];\n      S.df[i] = S.df[j];\n      S.dvy[i] = S.dvy[j];\n    }\n  }\n}\n\n// Adds a round bead of gloss, radius r and height A, centred at cx, cy.\nfunction dome(S, cx, cy, r, A) {\n  const { hr, h } = S;\n  if (S.nb \u003c MAXD * 3) {\n    S.bx[S.nb] = cx;\n    S.by[S.nb] = cy;\n    S.br[S.nb++] = r;\n  }\n  for (let y = max(0, floor(cy - r)); y \u003c= min(H - 1, floor(cy + r)); y++)\n    for (let X = max(0, floor(cx - r)); X \u003c= min(W - 1, floor(cx + r)); X++) {\n      const dx = (X + 0.5 - cx) / r, dy = (y + 0.5 - cy) / r, d2 = dx * dx + dy * dy;\n      if (d2 \u003c 1) {\n        const p = y * W + X;\n        hr[p] = max(hr[p], h[p] + A * sqrt(1 - d2));\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.amount = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    newPour(S);\n    // Open a second and a half into the first pour.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) newPour(S);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { h, hr, front, hf, buf, tint, absb, wall } = S;\n  const hue = H0 + S.hue;\n  // How the gloss tints the light that goes through it: each channel is cut\n  // by exp(-a*h), a taken from the tint so thick gloss is the deep colour.\n  hsv(hue, 0.8, 1, tint, 0);\n  for (let c = 0; c \u003c 3; c++) absb[c] = -Math.log(max(0.2, tint[c])) * 0.95;\n  // Orange and yellow tints darkened read brown and olive on LEDs; the wall\n  // is bright enough that they stay clear, and they get a touch more light.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.11) / 0.1);\n  S.gain = 1 + 0.08 * am;\n  S.dim = 0.27 * (1 - 0.85 * max(0, 1 - abs(hw - 0.13) / 0.16));\n  // The wall: a pale warm white with a breath of the tint.\n  hsv(hue + 0.04, 0.07, 1, wall, 0);\n  // Each column's front and the rim behind it: walking up from the bottom,\n  // every step where the film thickens adds to a ridge that fades over three\n  // rows, the capillary ridge a running film piles up at its front.\n  const kr = exp(-1 / 2.6);\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0, f = -1, fh = 0;\n    for (let y = H - 1; y >= 0; y--) {\n      const p = y * W + x, below = y \u003c H - 1 ? h[p + W] : 0, jump = h[p] - below;\n      r *= kr;\n      if (jump > 0.02) r += jump * 0.9;\n      if (f \u003c 0 && h[p] > 0.1) (f = y), (fh = h[p]);\n      hr[p] = h[p] + r;\n    }\n    front[x] = f;\n    hf[x] = fh;\n  }\n  S.nb = 0;\n  // Beads: where a column's front runs further than its neighbours', the\n  // gloss gathers into a round bead at the tip of the drip.\n  for (let x = 0; x \u003c W; x++) {\n    const f = front[x];\n    if (f \u003c 6 || f > H - 5) continue;\n    let tip = true, lo = 1e9;\n    for (let d = -3; d \u003c= 3 && tip; d++) {\n      if (!d) continue;\n      const xx = x + d;\n      if (xx \u003c 0 || xx >= W) continue;\n      if (front[xx] > f || (front[xx] === f && d \u003c 0)) tip = false;\n      lo = min(lo, front[xx]);\n    }\n    if (!tip || f - lo \u003c 2) continue;\n    const r = 2 + 1.8 * min(1.2, hf[x]);\n    dome(S, x + 0.5, f + 0.6 - r * 0.55, r, 0.5 + 0.7 * min(1.2, hf[x]));\n  }\n  for (let i = 0; i \u003c S.nd; i++) {\n    const r = 1.3 + 1.2 * sqrt(S.dv[i]);\n    dome(S, S.dx[i], H - 0.3 - r + max(0, S.df[i]), r, 0.6 + 0.15 * r);\n  }\n  // The light: a soft bar above the wall that glides down it, seen in the\n  // gloss as a mirror image moved by the slope of the surface, and a small\n  // lamp to one side that puts a point of light on every bead.\n  const T = S.T, ys = ((T * 9) % (H + 60)) - 30, lxa = 0.25 * sin(T * 0.37), lya = -0.32 + 0.08 * sin(T * 0.23);\n  let hx = lxa, hy = lya, hz = 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hl;\n  hy /= hl;\n  hz /= hl;\n  const sh = S.shim, pear = S.pear;\n  hsv(hue - 0.04, 0.3, 245, pear, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t0 = hr[p], t = t0 / (1 + 0.25 * t0);\n      const wb = (0.8 + 0.07 * exp(-(((x - 32) / 40) ** 2 + ((y - ys * 0.5 - 30) / 90) ** 2))) * 255;\n      const film = sm(0.02, 0.14, t);\n      let R = wall[0] * wb, G = wall[1] * wb, B = wall[2] * wb;\n      if (film > 0) {\n        // Thick gloss also dims the wall a little in every channel, the band\n        // and the beads most, so the deep parts read deeper; less so for the\n        // warm tints, which dimmed turn brown and olive.\n        const g = S.gain * exp(-S.dim * t * t);\n        R *= exp(-absb[0] * t) * g;\n        G *= exp(-absb[1] * t) * g;\n        B *= exp(-absb[2] * t) * g;\n        // Mica scatters light back out of the gloss, a pearly haze of the\n        // tint over the film that grows with Shimmer.\n        const pe = 0.42 * sh * film;\n        R += (pear[0] - R) * pe;\n        G += (pear[1] - G) * pe;\n        B += (pear[2] - B) * pe;\n        const gx = (hr[x \u003c W - 1 ? p + 1 : p] - hr[x > 0 ? p - 1 : p]) * 0.5;\n        const gy = (hr[y \u003c H - 1 ? p + W : p] - hr[y > 0 ? p - W : p]) * 0.5;\n        let nx = -gx * 3, ny = -gy * 3, nz = 1;\n        const nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        nx *= nl;\n        ny *= nl;\n        nz *= nl;\n        // The bar seen in the gloss.\n        const yr = y - ny * 22 + (x - 32) * 0.15, bar = exp(-(((yr - ys) / 5) ** 2)) * 0.26 * film;\n        // The lamp: a sharp highlight where the surface faces half way\n        // between it and the eye.\n        const nd = max(0, nx * hx + ny * hy + nz * hz), spot = pow(nd, 200) * film;\n        const s = (bar + spot * 1.3 * sm(0.08, 0.35, t)) * 255;\n        R += s;\n        G += s;\n        B += s;\n      }\n      const q = p * 3;\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  // Every bead holds a point of light on the side towards the lamp, and the\n  // light it gathers lands as a glow of the tint low on the far side.\n  const pl = sqrt(hx * hx + hy * hy) || 1, ux = hx / pl, uy = hy / pl;\n  for (let i = 0; i \u003c S.nb; i++) {\n    const r = S.br[i], cx = S.bx[i], cy = S.by[i];\n    glow(buf, cx + ux * r * 0.42, cy + uy * r * 0.42, 0.55 + 0.04 * r, 235, 235, 235);\n    glow(buf, cx - ux * r * 0.35, cy - uy * r * 0.35 + r * 0.15, r * 0.38, 110 * tint[0], 110 * tint[1], 110 * tint[2]);\n  }\n  // Mica flecks: a pale glint of the tint, flashing white as they turn to\n  // the lamp, a bright flash spilling onto the four LEDs round it.\n  for (let i = 0; i \u003c S.nf; i++) {\n    const x = floor(S.fx[i]), y = floor(S.fy[i]);\n    const f = exp((cos(S.fp[i]) - 1) / 0.08), q = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[q + c] += 70 * (0.4 + 0.6 * tint[c]) + 200 * f;\n    if (f > 0.6)\n      for (let k = 0; k \u003c 4; k++) {\n        const X = x + (k === 0 ? 1 : k === 1 ? -1 : 0), Y = y + (k === 2 ? 1 : k === 3 ? -1 : 0);\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const o = (Y * W + X) * 3;\n        buf[o] += 90 * f;\n        buf[o + 1] += 90 * f;\n        buf[o + 2] += 90 * f;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    display.setPixel(p % W, (p / W) | 0, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n  }\n}\n\n// A soft round spot of light, sigma s LEDs, added at x, y.\nfunction glow(buf, x, y, s, r, g, b) {\n  const e = s * 2.5, k = 1 / (2 * s * s);\n  for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n    for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n      const w = exp(-((X + 0.5 - x) ** 2 + (Y + 0.5 - y) ** 2) * k), q = (Y * W + X) * 3;\n      buf[q] += r * w;\n      buf[q + 1] += g * w;\n      buf[q + 2] += b * w;\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower."},{"name":"Pour","min":0,"max":1,"about":"How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front."},{"name":"Shimmer","min":0,"max":1,"about":"Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly."}],"start":[0,2,0,0.06],"measures":{"motion":0.0402,"detail":0.004,"edges":0.0558,"complexity":1.0787,"coverage":1,"colour":0.1859,"drift":0.0271},"knobResponse":[0.1707,0.0957,0.1771,0.0458]},{"slug":"littlewood-roots","title":"Littlewood Roots","family":"fractal","round":31,"note":"계수가 다 ±1 인 13차 다항식 8192개의 근 106,496개가 단위원 둘레에 옅은 레이스로 번지고, 1의 거듭제곱근 자리마다 구멍이 나요. 그레이 부호로 계수 하나씩 뒤집는 지금 다항식의 근이 불티로 옮겨 다니며 레이스를 다시 밝혀요. K1 을 누르면 단위원이 번쩍여요.","idea":"Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.","buttons":"K1 tap flashes the unit circle the lace hugs.","code":"// ===== Patternflow pattern =====\n// Title:   Littlewood Roots\n// Family:  fractal\n// Idea:    Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: roots of Littlewood polynomials (John Edensor Littlewood, 1966), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1\n//\n// Knob 1: Hue. Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white.\n// Knob 2: Speed. How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs.\n// Knob 3: Degree. The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16.\n// Knob 4: Glow. How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit.\n// Buttons: K1 tap flashes the unit circle the lace hugs.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 44 LEDs per unit: Re z from 0 to 1.45 across, Im z from 1.45 down to\n// -1.45, so the unit circle runs from row 20 to row 108. The set is the same\n// under z -> -z and z -> conj z, so the left half folds onto the right; all\n// roots lie in 1/2 \u003c |z| \u003c 2, and those beyond 1.45 are few.\nconst S = 44;\n// Widths in LEDs of the fine blur, the wide blur the lace is compared with,\n// the sparks and the light they leave.\nconst FINE = 0.6, WIDE = 2.5, SPARK = 1.8, DEP = 1.4;\nconst px = (re) => abs(re) * S - 0.5, py = (im) => H / 2 - 0.5 - im * S;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Normalised Gaussian kernels, three widths each side.\nfunction kernel(sg) {\n  const R = Math.ceil(sg * 3), k = new Float32Array(2 * R + 1);\n  let s = 0;\n  for (let i = -R; i \u003c= R; i++) s += k[i + R] = exp((-i * i) / (2 * sg * sg));\n  for (let i = 0; i \u003c= 2 * R; i++) k[i] /= s;\n  return k;\n}\nconst KF = kernel(FINE), KW = kernel(WIDE);\n\nexport function setup(params) {\n  params.s = {\n    n: 0, M: 0, i: 0, c: null, re: null, im: null, pr: null, pi: null, built: 0,\n    dens: new Float32Array(N), lace: new Float32Array(N), tmp: new Float32Array(N), wide: new Float32Array(N), glow: new Float32Array(N),\n    step: 0, hue: 0, sp: 2, tau: 1, ring: 0, glw: 0.06, col: new Float32Array(12), colHue: -1,\n  };\n}\n\n// The polynomial z^n + z^(n-1) + c(n-2) z^(n-2) + ... + c0 with every c = +-1.\n// Fixing the top two coefficients loses nothing: -p(-z) has the other sign\n// of z^(n-1), and its roots are -z, which fold onto the conjugates of the\n// roots of p. The walk starts at all +1, whose roots are the (n+1)th roots\n// of unity other than 1.\nfunction start(P, n) {\n  P.n = n;\n  P.M = 1 \u003c\u003c (n - 1);\n  P.i = 0;\n  P.built = 0;\n  P.c = new Float64Array(n + 1).fill(1);\n  P.re = new Float64Array(n);\n  P.im = new Float64Array(n);\n  P.pr = new Float64Array(n);\n  P.pi = new Float64Array(n);\n  for (let k = 0; k \u003c n; k++) {\n    const a = (2 * PI * (k + 1)) / (n + 1);\n    P.re[k] = P.pr[k] = cos(a);\n    P.im[k] = P.pi[k] = sin(a);\n  }\n  P.dens.fill(0);\n  P.lace.fill(0);\n}\n\n// Durand-Kerner (Weierstrass) iteration: every root at once moves by\n// p(z_r) / prod (z_r - z_s). Started from the roots of the polynomial one\n// sign flip back, it settles in about eight rounds. Returns false if it has\n// not settled.\nfunction solve(P, rounds) {\n  const n = P.n, c = P.c, re = P.re, im = P.im;\n  for (let it = 0; it \u003c rounds; it++) {\n    let mx = 0;\n    for (let r = 0; r \u003c n; r++) {\n      const x = re[r], y = im[r];\n      let pr = 1, pi = 0;\n      for (let k = n - 1; k >= 0; k--) {\n        const t = pr * x - pi * y + c[k];\n        pi = pr * y + pi * x;\n        pr = t;\n      }\n      let dr = 1, di = 0;\n      for (let s = 0; s \u003c n; s++) {\n        if (s === r) continue;\n        const ux = x - re[s], uy = y - im[s], t = dr * ux - di * uy;\n        di = dr * uy + di * ux;\n        dr = t;\n      }\n      let dd = dr * dr + di * di;\n      if (!(dd > 1e-30)) dd = 1e-30;\n      const qr = (pr * dr + pi * di) / dd, qi = (pi * dr - pr * di) / dd;\n      re[r] = x - qr;\n      im[r] = y - qi;\n      const m = qr * qr + qi * qi;\n      if (m > mx) mx = m;\n    }\n    if (mx \u003c 1e-13) return true;\n  }\n  return false;\n}\n\n// One step along the Gray code: flip the coefficient its index says, then\n// find the new roots. If the warm start fails (two roots nearly meeting),\n// start again from a circle.\nfunction advance(P) {\n  P.i = (P.i + 1) % P.M;\n  let b = P.n - 2;\n  if (P.i) for (b = 0; !((P.i >> b) & 1); b++);\n  P.c[b] = -P.c[b];\n  if (solve(P, 24)) return;\n  for (let k = 0; k \u003c P.n; k++) {\n    P.re[k] = 1.1 * cos((2 * PI * k) / P.n + 0.4);\n    P.im[k] = 1.1 * sin((2 * PI * k) / P.n + 0.4);\n  }\n  solve(P, 80);\n}\n\n// Bilinear splat of the folded roots into the density. The fold puts the\n// mirror line Re z = 0 half a LED left of column 0, so weight that falls\n// into column -1 belongs to column 0.\nfunction splat(P) {\n  const re = P.re, im = P.im, d = P.dens;\n  for (let r = 0; r \u003c P.n; r++) {\n    const X = px(re[r]), Y = py(im[r]);\n    const x0 = floor(X), y0 = floor(Y), fx = X - x0, fy = Y - y0;\n    if (!(x0 >= -1 && x0 \u003c W && y0 >= 0 && y0 \u003c H - 1)) continue;\n    const xa = x0 \u003c 0 ? 0 : x0, xb = x0 + 1;\n    d[y0 * W + xa] += (1 - fx) * (1 - fy);\n    d[(y0 + 1) * W + xa] += (1 - fx) * fy;\n    if (xb \u003c W) {\n      d[y0 * W + xb] += fx * (1 - fy);\n      d[(y0 + 1) * W + xb] += fx * fy;\n    }\n  }\n}\n\n// Separable blur of src into out with kernel k; the column left of 0 is the\n// mirror of column 0, as the fold makes it.\nfunction blur(src, out, tmp, k) {\n  const R = (k.length - 1) / 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        let xx = x + i;\n        if (xx \u003c 0) xx = -1 - xx;\n        else if (xx >= W) continue;\n        a += src[y * W + xx] * k[i + R];\n      }\n      tmp[y * W + x] = a;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        const yy = y + i;\n        if (yy >= 0 && yy \u003c H) a += tmp[yy * W + x] * k[i + R];\n      }\n      out[y * W + x] = a;\n    }\n}\n\n// The lace level, 0..1: the finely blurred density, normalised by the number\n// of roots expected in all so the lace fades in while it builds, and\n// sharpened against its own wide blur, so the holes round the roots of unity\n// go dark and the knots of the fringe stand out of the band.\nfunction tone(P) {\n  const L = P.lace, Wd = P.wide;\n  blur(P.dens, L, P.tmp, KF);\n  blur(P.dens, Wd, P.tmp, KW);\n  // About 3600 LEDs of band at this scale, so this makes its mean density 1.\n  const norm = 3600 / (P.M * P.n);\n  for (let p = 0; p \u003c N; p++) {\n    const a = L[p], q = a / (Wd[p] + 1e-9);\n    L[p] = min(1, min(1, (a * norm) / 2.5) ** 1.2 * min(1.6, q * q));\n  }\n}\n\nfunction blob(G, X, Y, sg, amp) {\n  const R = Math.ceil(sg * 2.6), k = 1 / (2 * sg * sg);\n  const xa = max(0, floor(X - R)), xb = min(W - 1, floor(X + R) + 1), ya = max(0, floor(Y - R)), yb = min(H - 1, floor(Y + R) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - X, dy = y - Y;\n      // The mirror image across Re z = 0 for blobs near the left edge.\n      const dm = x + 1 + X;\n      G[y * W + x] += amp * (exp(-(dx * dx + dy * dy) * k) + (X \u003c R ? exp(-(dm * dm + dy * dy) * k) : 0));\n    }\n}\n\nfunction colours(P) {\n  const h = P.hue + 0.42, c = P.col;\n  // The lace deep where it is thin and paler where it is dense, the light\n  // the sparks leave a little bluer, and the sparks nearly white.\n  hsv(h, 0.85, 1, c, 0);\n  hsv(h + 0.03, 0.4, 1, c, 9);\n  hsv(h + 0.07, 0.5, 1, c, 3);\n  hsv(h + 0.03, 0.18, 1, c, 6);\n  P.colHue = P.hue;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  // About a second at Glow 0, eight at 1.\n  P.glw = cl(k[3], 0, 1);\n  P.tau = 1.2 * 8 ** P.glw;\n  const n = round(cl(k[2], 13, 16));\n  if (n !== P.n) start(P, n);\n  if (P.built \u003c P.M) {\n    // Build the lace: about 1.3 million root updates a frame, so degree 13\n    // takes six frames and degree 16 about two seconds.\n    const per = max(64, floor(1.3e6 / (9 * n * n)));\n    for (let j = 0; j \u003c per && P.built \u003c P.M; j++, P.built++) {\n      advance(P);\n      splat(P);\n    }\n    tone(P);\n    if (P.built >= P.M) {\n      P.step = 0;\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n    }\n  } else {\n    // The walk: 4 x Speed flips a second. A spark glides from where it was\n    // to its new root over the first half of the step and lights the lace\n    // where it lands.\n    P.step += d * 4 * P.sp;\n    while (P.step >= 1) {\n      P.step -= 1;\n      for (let r = 0; r \u003c P.n; r++) blob(P.glow, px(P.re[r]), py(P.im[r]), DEP + 2.2 * P.glw, 0.55);\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n      advance(P);\n    }\n  }\n  const g = P.glow, f = exp(-d / P.tau);\n  for (let p = 0; p \u003c N; p++) g[p] *= f;\n  const b = input.btnPressed || [];\n  if (b[0]) P.ring = 1;\n  P.ring = max(0, P.ring - d * 0.6);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.colHue !== P.hue) colours(P);\n  const L = P.lace, G = P.glow, T = P.tmp, c = P.col;\n  // The sparks into the scratch buffer, eased between their old and new\n  // roots.\n  T.fill(0);\n  if (P.built >= P.M) {\n    let e = cl(P.step * 2, 0, 1);\n    e = e * e * (3 - 2 * e);\n    for (let r = 0; r \u003c P.n; r++) {\n      const x = P.pr[r] + (P.re[r] - P.pr[r]) * e, y = P.pi[r] + (P.im[r] - P.pi[r]) * e;\n      blob(T, px(x), py(y), SPARK + 1.4 * P.glw, 0.36);\n    }\n  }\n  const ring = P.ring * P.ring;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const l = L[p], lace = l > 0.09 ? (0.6 * (l - 0.09)) / 0.91 : 0, sp0 = T[p], m = 0.5 * l * l;\n      // The glow saturates softly and only lights the lace, so a place lit\n      // again and again shows the lace's own grain.\n      const gl = 0.4 * l * (1 - exp(-G[p] * 1.2));\n      let sp = sp0;\n      if (ring > 0) {\n        const re = (x + 0.5) / S, im = (H / 2 - 0.5 - y) / S, dr = (sqrt(re * re + im * im) - 1) * S;\n        sp += 0.45 * ring * exp(-dr * dr * 0.18);\n      }\n      const v1 = lace, v2 = gl, v3 = min(0.5, sp);\n      const lr = c[0] + (c[9] - c[0]) * m, lg = c[1] + (c[10] - c[1]) * m, lb = c[2] + (c[11] - c[2]) * m;\n      const r = lr * v1 + c[3] * v2 + c[6] * v3, g = lg * v1 + c[4] * v2 + c[7] * v3, b = lb * v1 + c[5] * v2 + c[8] * v3;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, b * 255));\n    }\n}\n","layer":{"id":"layer-littlewood-roots","type":"code","name":"littlewood-roots","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Littlewood Roots\n// Family:  fractal\n// Idea:    Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: roots of Littlewood polynomials (John Edensor Littlewood, 1966), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1\n//\n// Knob 1: Hue. Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white.\n// Knob 2: Speed. How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs.\n// Knob 3: Degree. The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16.\n// Knob 4: Glow. How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit.\n// Buttons: K1 tap flashes the unit circle the lace hugs.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 44 LEDs per unit: Re z from 0 to 1.45 across, Im z from 1.45 down to\n// -1.45, so the unit circle runs from row 20 to row 108. The set is the same\n// under z -> -z and z -> conj z, so the left half folds onto the right; all\n// roots lie in 1/2 \u003c |z| \u003c 2, and those beyond 1.45 are few.\nconst S = 44;\n// Widths in LEDs of the fine blur, the wide blur the lace is compared with,\n// the sparks and the light they leave.\nconst FINE = 0.6, WIDE = 2.5, SPARK = 1.8, DEP = 1.4;\nconst px = (re) => abs(re) * S - 0.5, py = (im) => H / 2 - 0.5 - im * S;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Normalised Gaussian kernels, three widths each side.\nfunction kernel(sg) {\n  const R = Math.ceil(sg * 3), k = new Float32Array(2 * R + 1);\n  let s = 0;\n  for (let i = -R; i \u003c= R; i++) s += k[i + R] = exp((-i * i) / (2 * sg * sg));\n  for (let i = 0; i \u003c= 2 * R; i++) k[i] /= s;\n  return k;\n}\nconst KF = kernel(FINE), KW = kernel(WIDE);\n\nexport function setup(params) {\n  params.s = {\n    n: 0, M: 0, i: 0, c: null, re: null, im: null, pr: null, pi: null, built: 0,\n    dens: new Float32Array(N), lace: new Float32Array(N), tmp: new Float32Array(N), wide: new Float32Array(N), glow: new Float32Array(N),\n    step: 0, hue: 0, sp: 2, tau: 1, ring: 0, glw: 0.06, col: new Float32Array(12), colHue: -1,\n  };\n}\n\n// The polynomial z^n + z^(n-1) + c(n-2) z^(n-2) + ... + c0 with every c = +-1.\n// Fixing the top two coefficients loses nothing: -p(-z) has the other sign\n// of z^(n-1), and its roots are -z, which fold onto the conjugates of the\n// roots of p. The walk starts at all +1, whose roots are the (n+1)th roots\n// of unity other than 1.\nfunction start(P, n) {\n  P.n = n;\n  P.M = 1 \u003c\u003c (n - 1);\n  P.i = 0;\n  P.built = 0;\n  P.c = new Float64Array(n + 1).fill(1);\n  P.re = new Float64Array(n);\n  P.im = new Float64Array(n);\n  P.pr = new Float64Array(n);\n  P.pi = new Float64Array(n);\n  for (let k = 0; k \u003c n; k++) {\n    const a = (2 * PI * (k + 1)) / (n + 1);\n    P.re[k] = P.pr[k] = cos(a);\n    P.im[k] = P.pi[k] = sin(a);\n  }\n  P.dens.fill(0);\n  P.lace.fill(0);\n}\n\n// Durand-Kerner (Weierstrass) iteration: every root at once moves by\n// p(z_r) / prod (z_r - z_s). Started from the roots of the polynomial one\n// sign flip back, it settles in about eight rounds. Returns false if it has\n// not settled.\nfunction solve(P, rounds) {\n  const n = P.n, c = P.c, re = P.re, im = P.im;\n  for (let it = 0; it \u003c rounds; it++) {\n    let mx = 0;\n    for (let r = 0; r \u003c n; r++) {\n      const x = re[r], y = im[r];\n      let pr = 1, pi = 0;\n      for (let k = n - 1; k >= 0; k--) {\n        const t = pr * x - pi * y + c[k];\n        pi = pr * y + pi * x;\n        pr = t;\n      }\n      let dr = 1, di = 0;\n      for (let s = 0; s \u003c n; s++) {\n        if (s === r) continue;\n        const ux = x - re[s], uy = y - im[s], t = dr * ux - di * uy;\n        di = dr * uy + di * ux;\n        dr = t;\n      }\n      let dd = dr * dr + di * di;\n      if (!(dd > 1e-30)) dd = 1e-30;\n      const qr = (pr * dr + pi * di) / dd, qi = (pi * dr - pr * di) / dd;\n      re[r] = x - qr;\n      im[r] = y - qi;\n      const m = qr * qr + qi * qi;\n      if (m > mx) mx = m;\n    }\n    if (mx \u003c 1e-13) return true;\n  }\n  return false;\n}\n\n// One step along the Gray code: flip the coefficient its index says, then\n// find the new roots. If the warm start fails (two roots nearly meeting),\n// start again from a circle.\nfunction advance(P) {\n  P.i = (P.i + 1) % P.M;\n  let b = P.n - 2;\n  if (P.i) for (b = 0; !((P.i >> b) & 1); b++);\n  P.c[b] = -P.c[b];\n  if (solve(P, 24)) return;\n  for (let k = 0; k \u003c P.n; k++) {\n    P.re[k] = 1.1 * cos((2 * PI * k) / P.n + 0.4);\n    P.im[k] = 1.1 * sin((2 * PI * k) / P.n + 0.4);\n  }\n  solve(P, 80);\n}\n\n// Bilinear splat of the folded roots into the density. The fold puts the\n// mirror line Re z = 0 half a LED left of column 0, so weight that falls\n// into column -1 belongs to column 0.\nfunction splat(P) {\n  const re = P.re, im = P.im, d = P.dens;\n  for (let r = 0; r \u003c P.n; r++) {\n    const X = px(re[r]), Y = py(im[r]);\n    const x0 = floor(X), y0 = floor(Y), fx = X - x0, fy = Y - y0;\n    if (!(x0 >= -1 && x0 \u003c W && y0 >= 0 && y0 \u003c H - 1)) continue;\n    const xa = x0 \u003c 0 ? 0 : x0, xb = x0 + 1;\n    d[y0 * W + xa] += (1 - fx) * (1 - fy);\n    d[(y0 + 1) * W + xa] += (1 - fx) * fy;\n    if (xb \u003c W) {\n      d[y0 * W + xb] += fx * (1 - fy);\n      d[(y0 + 1) * W + xb] += fx * fy;\n    }\n  }\n}\n\n// Separable blur of src into out with kernel k; the column left of 0 is the\n// mirror of column 0, as the fold makes it.\nfunction blur(src, out, tmp, k) {\n  const R = (k.length - 1) / 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        let xx = x + i;\n        if (xx \u003c 0) xx = -1 - xx;\n        else if (xx >= W) continue;\n        a += src[y * W + xx] * k[i + R];\n      }\n      tmp[y * W + x] = a;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        const yy = y + i;\n        if (yy >= 0 && yy \u003c H) a += tmp[yy * W + x] * k[i + R];\n      }\n      out[y * W + x] = a;\n    }\n}\n\n// The lace level, 0..1: the finely blurred density, normalised by the number\n// of roots expected in all so the lace fades in while it builds, and\n// sharpened against its own wide blur, so the holes round the roots of unity\n// go dark and the knots of the fringe stand out of the band.\nfunction tone(P) {\n  const L = P.lace, Wd = P.wide;\n  blur(P.dens, L, P.tmp, KF);\n  blur(P.dens, Wd, P.tmp, KW);\n  // About 3600 LEDs of band at this scale, so this makes its mean density 1.\n  const norm = 3600 / (P.M * P.n);\n  for (let p = 0; p \u003c N; p++) {\n    const a = L[p], q = a / (Wd[p] + 1e-9);\n    L[p] = min(1, min(1, (a * norm) / 2.5) ** 1.2 * min(1.6, q * q));\n  }\n}\n\nfunction blob(G, X, Y, sg, amp) {\n  const R = Math.ceil(sg * 2.6), k = 1 / (2 * sg * sg);\n  const xa = max(0, floor(X - R)), xb = min(W - 1, floor(X + R) + 1), ya = max(0, floor(Y - R)), yb = min(H - 1, floor(Y + R) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - X, dy = y - Y;\n      // The mirror image across Re z = 0 for blobs near the left edge.\n      const dm = x + 1 + X;\n      G[y * W + x] += amp * (exp(-(dx * dx + dy * dy) * k) + (X \u003c R ? exp(-(dm * dm + dy * dy) * k) : 0));\n    }\n}\n\nfunction colours(P) {\n  const h = P.hue + 0.42, c = P.col;\n  // The lace deep where it is thin and paler where it is dense, the light\n  // the sparks leave a little bluer, and the sparks nearly white.\n  hsv(h, 0.85, 1, c, 0);\n  hsv(h + 0.03, 0.4, 1, c, 9);\n  hsv(h + 0.07, 0.5, 1, c, 3);\n  hsv(h + 0.03, 0.18, 1, c, 6);\n  P.colHue = P.hue;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  // About a second at Glow 0, eight at 1.\n  P.glw = cl(k[3], 0, 1);\n  P.tau = 1.2 * 8 ** P.glw;\n  const n = round(cl(k[2], 13, 16));\n  if (n !== P.n) start(P, n);\n  if (P.built \u003c P.M) {\n    // Build the lace: about 1.3 million root updates a frame, so degree 13\n    // takes six frames and degree 16 about two seconds.\n    const per = max(64, floor(1.3e6 / (9 * n * n)));\n    for (let j = 0; j \u003c per && P.built \u003c P.M; j++, P.built++) {\n      advance(P);\n      splat(P);\n    }\n    tone(P);\n    if (P.built >= P.M) {\n      P.step = 0;\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n    }\n  } else {\n    // The walk: 4 x Speed flips a second. A spark glides from where it was\n    // to its new root over the first half of the step and lights the lace\n    // where it lands.\n    P.step += d * 4 * P.sp;\n    while (P.step >= 1) {\n      P.step -= 1;\n      for (let r = 0; r \u003c P.n; r++) blob(P.glow, px(P.re[r]), py(P.im[r]), DEP + 2.2 * P.glw, 0.55);\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n      advance(P);\n    }\n  }\n  const g = P.glow, f = exp(-d / P.tau);\n  for (let p = 0; p \u003c N; p++) g[p] *= f;\n  const b = input.btnPressed || [];\n  if (b[0]) P.ring = 1;\n  P.ring = max(0, P.ring - d * 0.6);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.colHue !== P.hue) colours(P);\n  const L = P.lace, G = P.glow, T = P.tmp, c = P.col;\n  // The sparks into the scratch buffer, eased between their old and new\n  // roots.\n  T.fill(0);\n  if (P.built >= P.M) {\n    let e = cl(P.step * 2, 0, 1);\n    e = e * e * (3 - 2 * e);\n    for (let r = 0; r \u003c P.n; r++) {\n      const x = P.pr[r] + (P.re[r] - P.pr[r]) * e, y = P.pi[r] + (P.im[r] - P.pi[r]) * e;\n      blob(T, px(x), py(y), SPARK + 1.4 * P.glw, 0.36);\n    }\n  }\n  const ring = P.ring * P.ring;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const l = L[p], lace = l > 0.09 ? (0.6 * (l - 0.09)) / 0.91 : 0, sp0 = T[p], m = 0.5 * l * l;\n      // The glow saturates softly and only lights the lace, so a place lit\n      // again and again shows the lace's own grain.\n      const gl = 0.4 * l * (1 - exp(-G[p] * 1.2));\n      let sp = sp0;\n      if (ring > 0) {\n        const re = (x + 0.5) / S, im = (H / 2 - 0.5 - y) / S, dr = (sqrt(re * re + im * im) - 1) * S;\n        sp += 0.45 * ring * exp(-dr * dr * 0.18);\n      }\n      const v1 = lace, v2 = gl, v3 = min(0.5, sp);\n      const lr = c[0] + (c[9] - c[0]) * m, lg = c[1] + (c[10] - c[1]) * m, lb = c[2] + (c[11] - c[2]) * m;\n      const r = lr * v1 + c[3] * v2 + c[6] * v3, g = lg * v1 + c[4] * v2 + c[7] * v3, b = lb * v1 + c[5] * v2 + c[8] * v3;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, b * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs."},{"name":"Degree","min":13,"max":16,"about":"The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16."},{"name":"Glow","min":0,"max":1,"about":"How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit."}],"start":[0,2,13,0.06],"measures":{"motion":0.2172,"detail":0.0303,"edges":0.1403,"complexity":0.6238,"coverage":0.2539,"colour":0.1322,"drift":0.0228},"knobResponse":[0.0566,0.0256,0.0365,0.0521]},{"slug":"loewner-trace","title":"Loewner Trace","family":"line","round":28,"note":"브라운 운동이 모는 슈람-뢰브너 곡선이 패널만 한 골짜기를 기어오르고, 그 곡선을 푸는 등각 사상의 격자가 곡선 끝을 돌아 휘어요. 화면은 곡선을 따라 끝없이 위로 흘러가요. K3 이 κ 를 4 에서 8 까지 올리면 곡선이 제 몸과 벽에 닿아 가둔 땅을 삼키고, 8 에서는 다 메워요. 누르면 새 브라운 경로로 다시 자라요.","idea":"A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.","buttons":"K1 tap starts a fresh Brownian path from the floor of the channel.","code":"// ===== Patternflow pattern =====\n// Title:   Loewner Trace\n// Family:  line\n// Idea:    A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schramm-Loewner evolution (Oded Schramm, 2000) grown with Loewner's equation (Charles Loewner, 1923), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages.\n// Knob 2: Speed. Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower.\n// Knob 3: Kappa. The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip.\n// Knob 4: Trace. Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black.\n// Buttons: K1 tap starts a fresh Brownian path from the floor of the channel.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, log, atan2, exp, abs, sin, cos, PI, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The panel is a half-strip of the plane 65 LEDs wide, its walls and floor\n// one LED beyond the outer LEDs so that none sits on the boundary. sin()\n// carries the half-strip onto the upper half-plane, where the Loewner\n// equation lives: the floor goes to [-1, 1], the walls to the rest of the\n// real line, and the top of the channel, however far it scrolls, to\n// infinity. Each row up the channel is a factor e^(pi/65) further out.\n// Scale invariance of SLE makes that a channel the curve climbs for ever.\nconst PX = PI / 65;\nconst M = 12; // Laurent terms of g_t at infinity, for rows that scroll in\nconst CAP = 1 \u003c\u003c 16; // steps of driving function kept for the tip\nconst BACK = 6000; // steps walked back when finding the tip\nconst V = 0.025; // LEDs the curve climbs a step, on average\nconst RATE = 600; // steps a second at Speed 1\nconst NEAR = 0.6; // an LED this close to the curve is the curve\nconst KNEAR = 0.1; // the next slit against the w-distance of the LED nearest the tip\nconst TIPROW = 52; // the view scrolls to keep the tip at least this far down\n\nfunction zOf(s, x, py) {\n  const xi = (x - 31.5) * PX, eta = (127 - py + 1 + s.scroll) * PX;\n  const a = exp(eta - s.lnL) * 0.5, b = exp(-eta - s.lnL) * 0.5, il = exp(-s.lnL);\n  const ch = a + b, sh = a - b, c = cos(xi);\n  return [sin(xi) * ch, c * sh, PX * sqrt(c * c * il * il + sh * sh)];\n}\n\nfunction fresh(s) {\n  s.scroll = 0;\n  s.lnL = 0;\n  s.t = 0;\n  s.Wd = 0;\n  s.n = 0;\n  s.tau = 0;\n  s.near = Infinity;\n  s.b.fill(0);\n  s.mk.fill(0);\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const [zx, zy, S] = zOf(s, x, py);\n      s.wx[p] = zx;\n      s.wy[p] = zy;\n      s.d2[p] = S * S;\n    }\n  s.tipx = 31.5;\n  s.tipy = 128;\n}\n\nfunction gauss(s) {\n  if (s.spare !== null) {\n    const g = s.spare;\n    s.spare = null;\n    return g;\n  }\n  let u = Math.random();\n  if (u \u003c 1e-12) u = 1e-12;\n  const r = sqrt(-2 * log(u)), a = 2 * PI * Math.random();\n  s.spare = r * sin(a);\n  return r * cos(a);\n}\n\n// One Loewner step: the driving point jumps, then a vertical slit of\n// half-plane capacity 2 dt grows at it. Every LED's g_t(z) goes through the\n// slit map w -> W + sqrt((w - W)^2 + 4 dt), and so do the Laurent\n// coefficients of g_t at infinity.\nfunction step(s, kappa) {\n  const il2 = exp(-2 * s.lnL), t = s.t;\n  const base = V * PX * sqrt((t + 0.25 * PX * PX * il2) * (il2 + 4 * t));\n  // Where the tip sits in a sheltered passage a small slit at W unrolls\n  // into a long arc on the panel; the LEDs closest to the tip in the\n  // w-plane say how small the next slit must be to stay within one of them.\n  const dt = max(base * 0.02, min(base, s.near * KNEAR));\n  s.Wd += sqrt(kappa * dt) * gauss(s);\n  const Wk = s.Wd, c4 = 4 * dt, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, tau = s.tau;\n  const near2 = NEAR * NEAR;\n  let mmin = Infinity;\n  for (let p = 0; p \u003c N; p++) {\n    if (mk[p]) continue;\n    const ux = wx[p] - Wk, uy = wy[p];\n    const a = ux * ux - uy * uy + c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = b / (2 * re);\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    wx[p] = Wk + re;\n    wy[p] = im;\n    if (m \u003c mmin) mmin = m;\n    const g = (d2[p] *= (ux * ux + uy * uy) / m);\n    if (im * im \u003c near2 * g) (mk[p] = 1), (mt[p] = tau);\n  }\n  s.near = mmin;\n  // Laurent coefficients: g = z (1 + sum V_k z^-k), V_1 = -W, V_k = b_{k-1}.\n  const Vc = s.Vc, P = s.P, Q = s.Q, bb = s.b;\n  Vc[0] = 1;\n  Vc[1] = -Wk;\n  for (let k = 2; k \u003c= M + 1; k++) Vc[k] = bb[k - 1];\n  for (let k = 0; k \u003c= M + 1; k++) {\n    let acc = 0;\n    for (let j = 0; j \u003c= k; j++) acc += Vc[j] * Vc[k - j];\n    P[k] = acc + (k === 2 ? c4 : 0);\n  }\n  Q[0] = 1;\n  for (let k = 1; k \u003c= M + 1; k++) {\n    let acc = P[k];\n    for (let j = 1; j \u003c k; j++) acc -= Q[j] * Q[k - j];\n    Q[k] = acc * 0.5;\n  }\n  for (let n = 1; n \u003c= M; n++) bb[n] = Q[n + 1];\n  if (s.n === CAP) {\n    s.hw.copyWithin(0, CAP / 2);\n    s.ht.copyWithin(0, CAP / 2);\n    s.n = CAP / 2;\n  }\n  s.hw[s.n] = Wk;\n  s.ht[s.n] = dt;\n  s.n++;\n  s.t = t + dt;\n}\n\n// For kappa above 4 the curve hits itself and the walls, and whatever it\n// closes off from the top of the channel leaves the domain: an LED no path\n// of open LEDs joins to the top row is swallowed. At 4 and below SLE is a\n// simple curve that touches nothing, so nothing is filled there, even where\n// two strands pass within an LED of each other.\nfunction fill(s) {\n  const mk = s.mk, seen = s.seen, st = s.stack;\n  seen.fill(0);\n  let top = 0;\n  for (let x = 0; x \u003c W; x++) if (!mk[x]) (seen[x] = 1), (st[top++] = x);\n  while (top) {\n    const p = st[--top], x = p % W;\n    if (x > 0 && !mk[p - 1] && !seen[p - 1]) (seen[p - 1] = 1), (st[top++] = p - 1);\n    if (x \u003c W - 1 && !mk[p + 1] && !seen[p + 1]) (seen[p + 1] = 1), (st[top++] = p + 1);\n    if (p >= W && !mk[p - W] && !seen[p - W]) (seen[p - W] = 1), (st[top++] = p - W);\n    if (p \u003c N - W && !mk[p + W] && !seen[p + W]) (seen[p + W] = 1), (st[top++] = p + W);\n  }\n  for (let p = 0; p \u003c N; p++) if (!mk[p] && !seen[p]) (mk[p] = 2), (s.mt[p] = s.tau);\n}\n\n// The tip, g_t^{-1}(W_t): the slit maps undone newest first.\nfunction tip(s) {\n  const n = s.n;\n  if (!n) return [0, 0];\n  let zx = s.hw[n - 1], zy = 2 * sqrt(s.ht[n - 1]), T = s.t - s.ht[n - 1];\n  const stop = max(0, n - BACK);\n  for (let k = n - 2; k >= stop; k--) {\n    const Wk = s.hw[k], c4 = 4 * s.ht[k];\n    T -= s.ht[k];\n    const ux = zx - Wk, uy = zy;\n    const a = ux * ux - uy * uy - c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = re > 0 ? b / (2 * re) : 0;\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    zx = Wk + re;\n    zy = im;\n  }\n  // Whatever lies further back is small beside the tip: g^{-1}(w) ~ w - 2T/w.\n  if (stop > 0 && T > 0) {\n    const r2 = zx * zx + zy * zy;\n    zx -= (2 * T * zx) / r2;\n    zy += (2 * T * zy) / r2;\n  }\n  return [zx, zy];\n}\n\n// Where a point of the half-plane sits on the panel: arcsin back to the strip.\nfunction toPanel(s, zx, zy) {\n  const il2 = exp(-2 * s.lnL);\n  // q = -i z + sqrt(1/L^2 - z^2), the root of larger modulus.\n  const ax = il2 - (zx * zx - zy * zy), ay = -2 * zx * zy, m = sqrt(ax * ax + ay * ay);\n  let rx, ry;\n  if (ax >= 0) (rx = sqrt((m + ax) * 0.5)), (ry = rx > 0 ? ay / (2 * rx) : 0);\n  else (ry = sqrt((m - ax) * 0.5)), (rx = abs(ay) / (2 * ry)), (ry = ay \u003c 0 ? -ry : ry);\n  let qx = zy + rx, qy = -zx + ry;\n  const q2x = zy - rx, q2y = -zx - ry;\n  if (q2x * q2x + q2y * q2y > qx * qx + qy * qy) (qx = q2x), (qy = q2y);\n  const xi = -atan2(qy, qx), eta = s.lnL + 0.5 * log(qx * qx + qy * qy);\n  return [xi / PX + 31.5, 128 + s.scroll - eta / PX];\n}\n\n// A row scrolling in at the top, far above the hull, takes g_t from its\n// Laurent series at infinity.\nfunction newRow(s) {\n  const wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, bb = s.b;\n  wx.copyWithin(W, 0, N - W);\n  wy.copyWithin(W, 0, N - W);\n  d2.copyWithin(W, 0, N - W);\n  mk.copyWithin(W, 0, N - W);\n  s.mt.copyWithin(W, 0, N - W);\n  s.scroll++;\n  for (let x = 0; x \u003c W; x++) {\n    const [zx, zy, S] = zOf(s, x, 0);\n    const r2 = zx * zx + zy * zy, yx = zx / r2, yy = -zy / r2;\n    // sum b_n y^n and sum n b_n y^(n-1) by Horner.\n    let fx = bb[M], fy = 0, dx = M * bb[M], dy = 0;\n    for (let n = M - 1; n >= 1; n--) {\n      const tx = fx * yx - fy * yy + bb[n];\n      fy = fx * yy + fy * yx;\n      fx = tx;\n      const ex = dx * yx - dy * yy + n * bb[n];\n      dy = dx * yy + dy * yx;\n      dx = ex;\n    }\n    const gx = fx * yx - fy * yy, gy = fx * yy + fy * yx;\n    const y2x = yx * yx - yy * yy, y2y = 2 * yx * yy;\n    const hx = 1 - (dx * y2x - dy * y2y), hy = -(dx * y2y + dy * y2x);\n    wx[x] = zx + gx;\n    wy[x] = zy + gy;\n    d2[x] = (hx * hx + hy * hy) * S * S;\n    mk[x] = 0;\n  }\n  // Keep the numbers small: SLE does not see the scale.\n  if (s.scroll * PX - s.lnL > 9) renorm(s, 4);\n}\n\nfunction renorm(s, lnl) {\n  const l = exp(lnl), il = 1 / l;\n  s.lnL += lnl;\n  for (let p = 0; p \u003c N; p++) {\n    s.wx[p] *= il;\n    s.wy[p] *= il;\n    s.d2[p] *= il * il;\n  }\n  s.Wd *= il;\n  s.t *= il * il;\n  for (let k = 0; k \u003c s.n; k++) (s.hw[k] *= il), (s.ht[k] *= il * il);\n  s.near *= il * il;\n  let f = il;\n  for (let n = 1; n \u003c= M; n++) (f *= il), (s.b[n] *= f);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float64Array(n);\n  params.s = {\n    wx: F(N), wy: F(N), d2: F(N), mk: new Uint8Array(N), mt: F(N),\n    b: F(M + 1), Vc: F(M + 2), P: F(M + 2), Q: F(M + 2), hw: F(CAP), ht: F(CAP),\n    seen: new Uint8Array(N), stack: new Int32Array(N), spare: null, acc: 0, hue: 0, kappa: 4, trace: 0.06,\n    buf: new Float32Array(N * 3), tlut: new Float32Array(LUT * 3), blut: new Float32Array(LUT * 3),\n    side: new Float32Array(12), lutHue: NaN,\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  s.hue = k[0];\n  s.kappa = cl(k[2], 4, 8);\n  s.trace = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) fresh(s);\n  const sp = cl(k[1], 0.2, 3);\n  s.acc += d * sp * RATE;\n  let n = floor(s.acc);\n  s.acc -= n;\n  s.tau += d * sp;\n  while (n-- > 0) step(s, s.kappa);\n  if (s.kappa > 4) fill(s);\n  const [zx, zy] = tip(s);\n  const [px, py] = toPanel(s, zx, zy);\n  s.tipx = px;\n  s.tipy = py;\n  const rows = min(3, ceilPos(TIPROW - py));\n  for (let i = 0; i \u003c rows; i++) newRow(s);\n  s.tipy = py + rows;\n}\nconst ceilPos = (v) => (v > 0 ? Math.ceil(v) : 0);\n\n// Colour stops, turned round the colour wheel by Hue: the trace by its age,\n// new to old; swallowed ground by when it was swallowed; the field on the\n// right and on the left of the curve; the rays and the rings of the grid.\nconst TRACE = [[255, 238, 196], [255, 178, 84], [250, 92, 112], [206, 62, 196], [124, 76, 236]];\nconst BUBBLE = [[150, 40, 92], [112, 34, 128], [58, 40, 128], [96, 30, 70], [150, 40, 92]];\nconst RIGHT = [16, 32, 78], LEFT = [8, 50, 72], RAY = [52, 150, 172], RING = [96, 112, 206];\nconst LUT = 64;\nfunction ramp(stops, out, rot) {\n  const n = stops.length - 1;\n  for (let i = 0; i \u003c LUT; i++) {\n    const u = (i / (LUT - 1)) * n, j = min(n - 1, floor(u)), f = u - j;\n    const c = [0, 1, 2].map((k) => stops[j][k] + (stops[j + 1][k] - stops[j][k]) * f);\n    turn(c, rot, out, i * 3);\n  }\n}\n// A hue turn that keeps the grey axis: rotation about (1, 1, 1).\nfunction turn(c, a, out, o) {\n  const co = cos(a), si = sin(a), k = (1 - co) / 3, r = sqrt(1 / 3) * si;\n  const m0 = co + k, m1 = k - r, m2 = k + r;\n  out[o] = cl(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255);\n  out[o + 1] = cl(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255);\n  out[o + 2] = cl(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255);\n}\n\n// The grid is the conformal map log(g_t(z) - W_t), which unrolls what is\n// left of the channel into a straight strip with the tip at minus infinity:\n// its level lines are circles round the tip and the rays out of it. Where a\n// cell grows large a finer grid fades in, up to three halvings.\nconst DELTA = PI / 8, LEVELS = 4, LOG7 = log(DELTA / 7);\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s) return;\n  const buf = s.buf, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, Wk = s.Wd;\n  const fld = 1 - s.trace, tr = s.tlut, bu = s.blut, side = s.side;\n  if (s.lutHue !== s.hue) {\n    const rot = s.hue * 2 * PI;\n    ramp(TRACE, tr, rot);\n    ramp(BUBBLE, bu, rot);\n    turn(RIGHT, rot, side, 0);\n    turn(LEFT, rot, side, 3);\n    turn(RAY, rot, side, 6);\n    turn(RING, rot, side, 9);\n    s.lutHue = s.hue;\n  }\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (mk[p]) {\n        const age = max(0, s.tau - mt[p]);\n        if (mk[p] === 1) {\n          const i = min(LUT - 1, floor((age / 8) * (LUT - 1))) * 3;\n          buf[q] = tr[i];\n          buf[q + 1] = tr[i + 1];\n          buf[q + 2] = tr[i + 2];\n        } else {\n          // Swallowed ground keeps the colour of the moment it was cut off,\n          // and dims as it ages.\n          const u = mt[p] / 5, i = floor((u - floor(u)) * (LUT - 1)) * 3, v = 0.55 + 0.45 * exp(-age / 6);\n          const hat = ((x + (floor(u * 7) & 1 ? 1 : -1) * (py - s.scroll) + 4096) & 3) === 0 ? 1 : 0.5;\n          buf[q] = bu[i] * v * hat;\n          buf[q + 1] = bu[i + 1] * v * hat;\n          buf[q + 2] = bu[i + 2] * v * hat;\n        }\n        continue;\n      }\n      const ux = wx[p] - Wk, uy = wy[p], r2 = ux * ux + uy * uy, rr = sqrt(r2);\n      const lr = log(rr), th = atan2(uy, ux), lg = 0.5 * log(d2[p]);\n      const cell = DELTA * exp(lr - lg); // LEDs per grid cell here\n      const fa = lr / DELTA, fb = th / DELTA;\n      // Lines, coarse to fine.\n      let ring = 0, ray = 0, cj = cell, sa = fa, sb = fb, chk = 0;\n      const lc = cl((lr - lg + LOG7) * 1.4427, 0, LEVELS - 1.001), jc = floor(lc), fc = lc - jc;\n      for (let j = 0; j \u003c LEVELS && (j \u003c= jc + 1 || cj >= 6); j++) {\n        const ia = floor(sa), ib = floor(sb), nb = round(sb);\n        // The rays at angle 0 and pi are the boundary itself, not grid. The\n        // ray at pi/2 is the hyperbolic geodesic from the tip to the top of\n        // the channel, where the curve is bound, and burns brighter.\n        const da = min(sa - ia, ia + 1 - sa) * cj, db = nb > 0 && nb \u003c 8 \u003c\u003c j ? abs(sb - nb) * cj : 99;\n        const fade = j === 0 ? cl((cj - 2) / 3, 0, 1) : cl((cj - 6) / 6, 0, 1) * 0.6;\n        ring = max(ring, cl(1 - da / 0.8, 0, 1) * fade);\n        ray = max(ray, cl(1 - db / 0.8, 0, 1) * fade * (j === 0 && nb === 4 ? 1.6 : 1));\n        if (j === jc) chk += ((ia + ib) & 1) * (1 - fc);\n        if (j === jc + 1) chk += ((ia + ib) & 1) * fc;\n        cj *= 0.5;\n        sa *= 2;\n        sb *= 2;\n      }\n      // The two sides of the curve: th / pi is the chance that a Brownian\n      // walker from here leaves by the left-hand side.\n      const hs = th / PI, cf = (0.82 + 0.36 * chk * cl((cell - 2) / 3, 0, 1)) * (0.4 + 0.6 * sqrt(uy / rr));\n      let r = (side[0] + (side[3] - side[0]) * hs) * cf * fld;\n      let gg = (side[1] + (side[4] - side[1]) * hs) * cf * fld;\n      let bl = (side[2] + (side[5] - side[2]) * hs) * cf * fld;\n      let li = ring * fld;\n      r += (side[9] - r) * li;\n      gg += (side[10] - gg) * li;\n      bl += (side[11] - bl) * li;\n      li = min(1, ray) * fld;\n      const hot = max(0, ray - 1) * 1.6 * fld;\n      r += (side[6] - r) * li;\n      gg += (side[7] - gg) * li;\n      bl += (side[8] - bl) * li;\n      r += (210 - r) * hot;\n      gg += (240 - gg) * hot;\n      bl += (240 - bl) * hot;\n      buf[q] = r;\n      buf[q + 1] = gg;\n      buf[q + 2] = bl;\n    }\n  // The tip.\n  const tx = s.tipx, ty = s.tipy;\n  for (let y = max(0, floor(ty - 3)); y \u003c= min(H - 1, floor(ty + 3)); y++)\n    for (let x = max(0, floor(tx - 3)); x \u003c= min(W - 1, floor(tx + 3)); x++) {\n      const dd = (x - tx) ** 2 + (y - ty) ** 2, w = exp(-dd / 1.5);\n      const q = (y * W + x) * 3;\n      buf[q] += (255 - buf[q]) * w;\n      buf[q + 1] += (250 - buf[q + 1]) * w;\n      buf[q + 2] += (235 - buf[q + 2]) * w;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-loewner-trace","type":"code","name":"loewner-trace","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Loewner Trace\n// Family:  line\n// Idea:    A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schramm-Loewner evolution (Oded Schramm, 2000) grown with Loewner's equation (Charles Loewner, 1923), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages.\n// Knob 2: Speed. Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower.\n// Knob 3: Kappa. The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip.\n// Knob 4: Trace. Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black.\n// Buttons: K1 tap starts a fresh Brownian path from the floor of the channel.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, log, atan2, exp, abs, sin, cos, PI, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The panel is a half-strip of the plane 65 LEDs wide, its walls and floor\n// one LED beyond the outer LEDs so that none sits on the boundary. sin()\n// carries the half-strip onto the upper half-plane, where the Loewner\n// equation lives: the floor goes to [-1, 1], the walls to the rest of the\n// real line, and the top of the channel, however far it scrolls, to\n// infinity. Each row up the channel is a factor e^(pi/65) further out.\n// Scale invariance of SLE makes that a channel the curve climbs for ever.\nconst PX = PI / 65;\nconst M = 12; // Laurent terms of g_t at infinity, for rows that scroll in\nconst CAP = 1 \u003c\u003c 16; // steps of driving function kept for the tip\nconst BACK = 6000; // steps walked back when finding the tip\nconst V = 0.025; // LEDs the curve climbs a step, on average\nconst RATE = 600; // steps a second at Speed 1\nconst NEAR = 0.6; // an LED this close to the curve is the curve\nconst KNEAR = 0.1; // the next slit against the w-distance of the LED nearest the tip\nconst TIPROW = 52; // the view scrolls to keep the tip at least this far down\n\nfunction zOf(s, x, py) {\n  const xi = (x - 31.5) * PX, eta = (127 - py + 1 + s.scroll) * PX;\n  const a = exp(eta - s.lnL) * 0.5, b = exp(-eta - s.lnL) * 0.5, il = exp(-s.lnL);\n  const ch = a + b, sh = a - b, c = cos(xi);\n  return [sin(xi) * ch, c * sh, PX * sqrt(c * c * il * il + sh * sh)];\n}\n\nfunction fresh(s) {\n  s.scroll = 0;\n  s.lnL = 0;\n  s.t = 0;\n  s.Wd = 0;\n  s.n = 0;\n  s.tau = 0;\n  s.near = Infinity;\n  s.b.fill(0);\n  s.mk.fill(0);\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const [zx, zy, S] = zOf(s, x, py);\n      s.wx[p] = zx;\n      s.wy[p] = zy;\n      s.d2[p] = S * S;\n    }\n  s.tipx = 31.5;\n  s.tipy = 128;\n}\n\nfunction gauss(s) {\n  if (s.spare !== null) {\n    const g = s.spare;\n    s.spare = null;\n    return g;\n  }\n  let u = Math.random();\n  if (u \u003c 1e-12) u = 1e-12;\n  const r = sqrt(-2 * log(u)), a = 2 * PI * Math.random();\n  s.spare = r * sin(a);\n  return r * cos(a);\n}\n\n// One Loewner step: the driving point jumps, then a vertical slit of\n// half-plane capacity 2 dt grows at it. Every LED's g_t(z) goes through the\n// slit map w -> W + sqrt((w - W)^2 + 4 dt), and so do the Laurent\n// coefficients of g_t at infinity.\nfunction step(s, kappa) {\n  const il2 = exp(-2 * s.lnL), t = s.t;\n  const base = V * PX * sqrt((t + 0.25 * PX * PX * il2) * (il2 + 4 * t));\n  // Where the tip sits in a sheltered passage a small slit at W unrolls\n  // into a long arc on the panel; the LEDs closest to the tip in the\n  // w-plane say how small the next slit must be to stay within one of them.\n  const dt = max(base * 0.02, min(base, s.near * KNEAR));\n  s.Wd += sqrt(kappa * dt) * gauss(s);\n  const Wk = s.Wd, c4 = 4 * dt, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, tau = s.tau;\n  const near2 = NEAR * NEAR;\n  let mmin = Infinity;\n  for (let p = 0; p \u003c N; p++) {\n    if (mk[p]) continue;\n    const ux = wx[p] - Wk, uy = wy[p];\n    const a = ux * ux - uy * uy + c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = b / (2 * re);\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    wx[p] = Wk + re;\n    wy[p] = im;\n    if (m \u003c mmin) mmin = m;\n    const g = (d2[p] *= (ux * ux + uy * uy) / m);\n    if (im * im \u003c near2 * g) (mk[p] = 1), (mt[p] = tau);\n  }\n  s.near = mmin;\n  // Laurent coefficients: g = z (1 + sum V_k z^-k), V_1 = -W, V_k = b_{k-1}.\n  const Vc = s.Vc, P = s.P, Q = s.Q, bb = s.b;\n  Vc[0] = 1;\n  Vc[1] = -Wk;\n  for (let k = 2; k \u003c= M + 1; k++) Vc[k] = bb[k - 1];\n  for (let k = 0; k \u003c= M + 1; k++) {\n    let acc = 0;\n    for (let j = 0; j \u003c= k; j++) acc += Vc[j] * Vc[k - j];\n    P[k] = acc + (k === 2 ? c4 : 0);\n  }\n  Q[0] = 1;\n  for (let k = 1; k \u003c= M + 1; k++) {\n    let acc = P[k];\n    for (let j = 1; j \u003c k; j++) acc -= Q[j] * Q[k - j];\n    Q[k] = acc * 0.5;\n  }\n  for (let n = 1; n \u003c= M; n++) bb[n] = Q[n + 1];\n  if (s.n === CAP) {\n    s.hw.copyWithin(0, CAP / 2);\n    s.ht.copyWithin(0, CAP / 2);\n    s.n = CAP / 2;\n  }\n  s.hw[s.n] = Wk;\n  s.ht[s.n] = dt;\n  s.n++;\n  s.t = t + dt;\n}\n\n// For kappa above 4 the curve hits itself and the walls, and whatever it\n// closes off from the top of the channel leaves the domain: an LED no path\n// of open LEDs joins to the top row is swallowed. At 4 and below SLE is a\n// simple curve that touches nothing, so nothing is filled there, even where\n// two strands pass within an LED of each other.\nfunction fill(s) {\n  const mk = s.mk, seen = s.seen, st = s.stack;\n  seen.fill(0);\n  let top = 0;\n  for (let x = 0; x \u003c W; x++) if (!mk[x]) (seen[x] = 1), (st[top++] = x);\n  while (top) {\n    const p = st[--top], x = p % W;\n    if (x > 0 && !mk[p - 1] && !seen[p - 1]) (seen[p - 1] = 1), (st[top++] = p - 1);\n    if (x \u003c W - 1 && !mk[p + 1] && !seen[p + 1]) (seen[p + 1] = 1), (st[top++] = p + 1);\n    if (p >= W && !mk[p - W] && !seen[p - W]) (seen[p - W] = 1), (st[top++] = p - W);\n    if (p \u003c N - W && !mk[p + W] && !seen[p + W]) (seen[p + W] = 1), (st[top++] = p + W);\n  }\n  for (let p = 0; p \u003c N; p++) if (!mk[p] && !seen[p]) (mk[p] = 2), (s.mt[p] = s.tau);\n}\n\n// The tip, g_t^{-1}(W_t): the slit maps undone newest first.\nfunction tip(s) {\n  const n = s.n;\n  if (!n) return [0, 0];\n  let zx = s.hw[n - 1], zy = 2 * sqrt(s.ht[n - 1]), T = s.t - s.ht[n - 1];\n  const stop = max(0, n - BACK);\n  for (let k = n - 2; k >= stop; k--) {\n    const Wk = s.hw[k], c4 = 4 * s.ht[k];\n    T -= s.ht[k];\n    const ux = zx - Wk, uy = zy;\n    const a = ux * ux - uy * uy - c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = re > 0 ? b / (2 * re) : 0;\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    zx = Wk + re;\n    zy = im;\n  }\n  // Whatever lies further back is small beside the tip: g^{-1}(w) ~ w - 2T/w.\n  if (stop > 0 && T > 0) {\n    const r2 = zx * zx + zy * zy;\n    zx -= (2 * T * zx) / r2;\n    zy += (2 * T * zy) / r2;\n  }\n  return [zx, zy];\n}\n\n// Where a point of the half-plane sits on the panel: arcsin back to the strip.\nfunction toPanel(s, zx, zy) {\n  const il2 = exp(-2 * s.lnL);\n  // q = -i z + sqrt(1/L^2 - z^2), the root of larger modulus.\n  const ax = il2 - (zx * zx - zy * zy), ay = -2 * zx * zy, m = sqrt(ax * ax + ay * ay);\n  let rx, ry;\n  if (ax >= 0) (rx = sqrt((m + ax) * 0.5)), (ry = rx > 0 ? ay / (2 * rx) : 0);\n  else (ry = sqrt((m - ax) * 0.5)), (rx = abs(ay) / (2 * ry)), (ry = ay \u003c 0 ? -ry : ry);\n  let qx = zy + rx, qy = -zx + ry;\n  const q2x = zy - rx, q2y = -zx - ry;\n  if (q2x * q2x + q2y * q2y > qx * qx + qy * qy) (qx = q2x), (qy = q2y);\n  const xi = -atan2(qy, qx), eta = s.lnL + 0.5 * log(qx * qx + qy * qy);\n  return [xi / PX + 31.5, 128 + s.scroll - eta / PX];\n}\n\n// A row scrolling in at the top, far above the hull, takes g_t from its\n// Laurent series at infinity.\nfunction newRow(s) {\n  const wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, bb = s.b;\n  wx.copyWithin(W, 0, N - W);\n  wy.copyWithin(W, 0, N - W);\n  d2.copyWithin(W, 0, N - W);\n  mk.copyWithin(W, 0, N - W);\n  s.mt.copyWithin(W, 0, N - W);\n  s.scroll++;\n  for (let x = 0; x \u003c W; x++) {\n    const [zx, zy, S] = zOf(s, x, 0);\n    const r2 = zx * zx + zy * zy, yx = zx / r2, yy = -zy / r2;\n    // sum b_n y^n and sum n b_n y^(n-1) by Horner.\n    let fx = bb[M], fy = 0, dx = M * bb[M], dy = 0;\n    for (let n = M - 1; n >= 1; n--) {\n      const tx = fx * yx - fy * yy + bb[n];\n      fy = fx * yy + fy * yx;\n      fx = tx;\n      const ex = dx * yx - dy * yy + n * bb[n];\n      dy = dx * yy + dy * yx;\n      dx = ex;\n    }\n    const gx = fx * yx - fy * yy, gy = fx * yy + fy * yx;\n    const y2x = yx * yx - yy * yy, y2y = 2 * yx * yy;\n    const hx = 1 - (dx * y2x - dy * y2y), hy = -(dx * y2y + dy * y2x);\n    wx[x] = zx + gx;\n    wy[x] = zy + gy;\n    d2[x] = (hx * hx + hy * hy) * S * S;\n    mk[x] = 0;\n  }\n  // Keep the numbers small: SLE does not see the scale.\n  if (s.scroll * PX - s.lnL > 9) renorm(s, 4);\n}\n\nfunction renorm(s, lnl) {\n  const l = exp(lnl), il = 1 / l;\n  s.lnL += lnl;\n  for (let p = 0; p \u003c N; p++) {\n    s.wx[p] *= il;\n    s.wy[p] *= il;\n    s.d2[p] *= il * il;\n  }\n  s.Wd *= il;\n  s.t *= il * il;\n  for (let k = 0; k \u003c s.n; k++) (s.hw[k] *= il), (s.ht[k] *= il * il);\n  s.near *= il * il;\n  let f = il;\n  for (let n = 1; n \u003c= M; n++) (f *= il), (s.b[n] *= f);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float64Array(n);\n  params.s = {\n    wx: F(N), wy: F(N), d2: F(N), mk: new Uint8Array(N), mt: F(N),\n    b: F(M + 1), Vc: F(M + 2), P: F(M + 2), Q: F(M + 2), hw: F(CAP), ht: F(CAP),\n    seen: new Uint8Array(N), stack: new Int32Array(N), spare: null, acc: 0, hue: 0, kappa: 4, trace: 0.06,\n    buf: new Float32Array(N * 3), tlut: new Float32Array(LUT * 3), blut: new Float32Array(LUT * 3),\n    side: new Float32Array(12), lutHue: NaN,\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  s.hue = k[0];\n  s.kappa = cl(k[2], 4, 8);\n  s.trace = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) fresh(s);\n  const sp = cl(k[1], 0.2, 3);\n  s.acc += d * sp * RATE;\n  let n = floor(s.acc);\n  s.acc -= n;\n  s.tau += d * sp;\n  while (n-- > 0) step(s, s.kappa);\n  if (s.kappa > 4) fill(s);\n  const [zx, zy] = tip(s);\n  const [px, py] = toPanel(s, zx, zy);\n  s.tipx = px;\n  s.tipy = py;\n  const rows = min(3, ceilPos(TIPROW - py));\n  for (let i = 0; i \u003c rows; i++) newRow(s);\n  s.tipy = py + rows;\n}\nconst ceilPos = (v) => (v > 0 ? Math.ceil(v) : 0);\n\n// Colour stops, turned round the colour wheel by Hue: the trace by its age,\n// new to old; swallowed ground by when it was swallowed; the field on the\n// right and on the left of the curve; the rays and the rings of the grid.\nconst TRACE = [[255, 238, 196], [255, 178, 84], [250, 92, 112], [206, 62, 196], [124, 76, 236]];\nconst BUBBLE = [[150, 40, 92], [112, 34, 128], [58, 40, 128], [96, 30, 70], [150, 40, 92]];\nconst RIGHT = [16, 32, 78], LEFT = [8, 50, 72], RAY = [52, 150, 172], RING = [96, 112, 206];\nconst LUT = 64;\nfunction ramp(stops, out, rot) {\n  const n = stops.length - 1;\n  for (let i = 0; i \u003c LUT; i++) {\n    const u = (i / (LUT - 1)) * n, j = min(n - 1, floor(u)), f = u - j;\n    const c = [0, 1, 2].map((k) => stops[j][k] + (stops[j + 1][k] - stops[j][k]) * f);\n    turn(c, rot, out, i * 3);\n  }\n}\n// A hue turn that keeps the grey axis: rotation about (1, 1, 1).\nfunction turn(c, a, out, o) {\n  const co = cos(a), si = sin(a), k = (1 - co) / 3, r = sqrt(1 / 3) * si;\n  const m0 = co + k, m1 = k - r, m2 = k + r;\n  out[o] = cl(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255);\n  out[o + 1] = cl(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255);\n  out[o + 2] = cl(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255);\n}\n\n// The grid is the conformal map log(g_t(z) - W_t), which unrolls what is\n// left of the channel into a straight strip with the tip at minus infinity:\n// its level lines are circles round the tip and the rays out of it. Where a\n// cell grows large a finer grid fades in, up to three halvings.\nconst DELTA = PI / 8, LEVELS = 4, LOG7 = log(DELTA / 7);\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s) return;\n  const buf = s.buf, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, Wk = s.Wd;\n  const fld = 1 - s.trace, tr = s.tlut, bu = s.blut, side = s.side;\n  if (s.lutHue !== s.hue) {\n    const rot = s.hue * 2 * PI;\n    ramp(TRACE, tr, rot);\n    ramp(BUBBLE, bu, rot);\n    turn(RIGHT, rot, side, 0);\n    turn(LEFT, rot, side, 3);\n    turn(RAY, rot, side, 6);\n    turn(RING, rot, side, 9);\n    s.lutHue = s.hue;\n  }\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (mk[p]) {\n        const age = max(0, s.tau - mt[p]);\n        if (mk[p] === 1) {\n          const i = min(LUT - 1, floor((age / 8) * (LUT - 1))) * 3;\n          buf[q] = tr[i];\n          buf[q + 1] = tr[i + 1];\n          buf[q + 2] = tr[i + 2];\n        } else {\n          // Swallowed ground keeps the colour of the moment it was cut off,\n          // and dims as it ages.\n          const u = mt[p] / 5, i = floor((u - floor(u)) * (LUT - 1)) * 3, v = 0.55 + 0.45 * exp(-age / 6);\n          const hat = ((x + (floor(u * 7) & 1 ? 1 : -1) * (py - s.scroll) + 4096) & 3) === 0 ? 1 : 0.5;\n          buf[q] = bu[i] * v * hat;\n          buf[q + 1] = bu[i + 1] * v * hat;\n          buf[q + 2] = bu[i + 2] * v * hat;\n        }\n        continue;\n      }\n      const ux = wx[p] - Wk, uy = wy[p], r2 = ux * ux + uy * uy, rr = sqrt(r2);\n      const lr = log(rr), th = atan2(uy, ux), lg = 0.5 * log(d2[p]);\n      const cell = DELTA * exp(lr - lg); // LEDs per grid cell here\n      const fa = lr / DELTA, fb = th / DELTA;\n      // Lines, coarse to fine.\n      let ring = 0, ray = 0, cj = cell, sa = fa, sb = fb, chk = 0;\n      const lc = cl((lr - lg + LOG7) * 1.4427, 0, LEVELS - 1.001), jc = floor(lc), fc = lc - jc;\n      for (let j = 0; j \u003c LEVELS && (j \u003c= jc + 1 || cj >= 6); j++) {\n        const ia = floor(sa), ib = floor(sb), nb = round(sb);\n        // The rays at angle 0 and pi are the boundary itself, not grid. The\n        // ray at pi/2 is the hyperbolic geodesic from the tip to the top of\n        // the channel, where the curve is bound, and burns brighter.\n        const da = min(sa - ia, ia + 1 - sa) * cj, db = nb > 0 && nb \u003c 8 \u003c\u003c j ? abs(sb - nb) * cj : 99;\n        const fade = j === 0 ? cl((cj - 2) / 3, 0, 1) : cl((cj - 6) / 6, 0, 1) * 0.6;\n        ring = max(ring, cl(1 - da / 0.8, 0, 1) * fade);\n        ray = max(ray, cl(1 - db / 0.8, 0, 1) * fade * (j === 0 && nb === 4 ? 1.6 : 1));\n        if (j === jc) chk += ((ia + ib) & 1) * (1 - fc);\n        if (j === jc + 1) chk += ((ia + ib) & 1) * fc;\n        cj *= 0.5;\n        sa *= 2;\n        sb *= 2;\n      }\n      // The two sides of the curve: th / pi is the chance that a Brownian\n      // walker from here leaves by the left-hand side.\n      const hs = th / PI, cf = (0.82 + 0.36 * chk * cl((cell - 2) / 3, 0, 1)) * (0.4 + 0.6 * sqrt(uy / rr));\n      let r = (side[0] + (side[3] - side[0]) * hs) * cf * fld;\n      let gg = (side[1] + (side[4] - side[1]) * hs) * cf * fld;\n      let bl = (side[2] + (side[5] - side[2]) * hs) * cf * fld;\n      let li = ring * fld;\n      r += (side[9] - r) * li;\n      gg += (side[10] - gg) * li;\n      bl += (side[11] - bl) * li;\n      li = min(1, ray) * fld;\n      const hot = max(0, ray - 1) * 1.6 * fld;\n      r += (side[6] - r) * li;\n      gg += (side[7] - gg) * li;\n      bl += (side[8] - bl) * li;\n      r += (210 - r) * hot;\n      gg += (240 - gg) * hot;\n      bl += (240 - bl) * hot;\n      buf[q] = r;\n      buf[q + 1] = gg;\n      buf[q + 2] = bl;\n    }\n  // The tip.\n  const tx = s.tipx, ty = s.tipy;\n  for (let y = max(0, floor(ty - 3)); y \u003c= min(H - 1, floor(ty + 3)); y++)\n    for (let x = max(0, floor(tx - 3)); x \u003c= min(W - 1, floor(tx + 3)); x++) {\n      const dd = (x - tx) ** 2 + (y - ty) ** 2, w = exp(-dd / 1.5);\n      const q = (y * W + x) * 3;\n      buf[q] += (255 - buf[q]) * w;\n      buf[q + 1] += (250 - buf[q + 1]) * w;\n      buf[q + 2] += (235 - buf[q + 2]) * w;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages."},{"name":"Speed","min":0.2,"max":3,"about":"Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower."},{"name":"Kappa","min":4,"max":8,"about":"The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip."},{"name":"Trace","min":0,"max":1,"about":"Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black."}],"start":[0,2,4,0.06],"measures":{"motion":2.6307,"detail":0.0738,"edges":0.5207,"complexity":1.219,"coverage":0.8893,"colour":0.2244,"drift":0.1264},"knobResponse":[0.1533,0.1433,0.1845,0.1423]},{"slug":"longcase-clock","title":"Longcase Clock","family":"time","round":18,"note":"촛불 켠 밤 방에 128줄을 다 쓰는 괘종시계가 서 있어요. 줄의 유리문 안에서 황동 추가 1초에 한 번씩 흔들리고 무게추가 내려가며, 다이얼 아치의 달 원판이 돌고, 정시마다 꼭대기 종이 번쩍이며 울려요. K3 을 돌리면 촛불이 시계 왼쪽에서 앞을 지나 오른쪽으로 옮겨 가고, 벽에 진 그림자가 반대쪽으로 넘어가요.","idea":"A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","layer":{"id":"layer-longcase-clock","type":"code","name":"longcase-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wood","min":0,"max":1,"about":"The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1."},{"name":"Speed","min":0,"max":3,"about":"How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window."},{"name":"Candle","min":0,"max":1,"about":"Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side."},{"name":"Lamp","min":0,"max":1,"about":"The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.144,"detail":0.0765,"edges":0.4175,"complexity":2.1824,"coverage":0.9202,"colour":0.2877,"drift":0.0825},"knobResponse":[0.0907,0.1391,0.1097,0.2042]},{"slug":"look-and-say","title":"Look and Say","family":"data","round":28,"note":"콘웨이의 보고 말하기 수열이 한 줄씩 제 위 줄을 소리 내어 읽으며 쪽을 내려와요. 줄이 한 걸음에 1.3배씩 길어지면 글자가 3×5 숫자에서 막대로, LED 하나에 숫자 하나로 작아지고, 콘웨이의 원소 92개가 저마다 제 색이에요. K3 이 씨앗을 3, 312, 311311, 고정점 22 로 바꿔요.","idea":"Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.","buttons":"K1 tap starts the page again from the next seed.","code":"// ===== Patternflow pattern =====\n// Title:   Look and Say\n// Family:  data\n// Idea:    Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the look-and-say sequence and its audioactive decay into 92 elements (John Horton Conway, 1986), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream.\n// Knob 2: Speed. How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long.\n// Knob 3: Seed. The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s).\n// Knob 4: Digits. At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold.\n// Buttons: K1 tap starts the page again from the next seed.\n\nconst W = 64, H = 128;\nconst { min, max, floor, ceil, exp, pow, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Conway's 92 elements, H to U: the name, the digits, and what the element\n// becomes when it is read aloud. Every term of the sequence from the eighth\n// on is a row of these, and each element decays on its own.\nconst TABLE = `H 22 H|He 13112221133211322112211213322112 Hf.Pa.H.Ca.Li|Li 312211322212221121123222112 He|Be 111312211312113221133211322112211213322112 Ge.Ca.Li|B 1321132122211322212221121123222112 Be|C 3113112211322112211213322112 B|N 111312212221121123222112 C|O 132112211213322112 N|F 31121123222112 O|Ne 111213322112 F|Na 123222112 Ne|Mg 3113322112 Pm.Na|Al 1113222112 Mg|Si 1322112 Al|P 311311222112 Ho.Si|S 1113122112 P|Cl 132112 S|Ar 3112 Cl|K 1112 Ar|Ca 12 K|Sc 3113112221133112 Ho.Pa.H.Ca.Co|Ti 11131221131112 Sc|V 13211312 Ti|Cr 31132 V|Mn 111311222112 Cr.Si|Fe 13122112 Mn|Co 32112 Fe|Ni 11133112 Zn.Co|Cu 131112 Ni|Zn 312 Cu|Ga 13221133122211332 Eu.Ca.Ac.H.Ca.Zn|Ge 31131122211311122113222 Ho.Ga|As 11131221131211322113322112 Ge.Na|Se 13211321222113222112 As|Br 3113112211322112 Se|Kr 11131221222112 Br|Rb 1321122112 Kr|Sr 3112112 Rb|Y 1112133 Sr.U|Zr 12322211331222113112211 Y.H.Ca.Tc|Nb 1113122113322113111221131221 Er.Zr|Mo 13211322211312113211 Nb|Tc 311322113212221 Mo|Ru 132211331222113112211 Eu.Ca.Tc|Rh 311311222113111221131221 Ho.Ru|Pd 111312211312113211 Rh|Ag 132113212221 Pd|Cd 3113112211 Ag|In 11131221 Cd|Sn 13211 In|Sb 3112221 Pm.Sn|Te 1322113312211 Eu.Ca.Sb|I 311311222113111221 Ho.Te|Xe 11131221131211 I|Cs 13211321 Xe|Ba 311311 Cs|La 11131 Ba|Ce 1321133112 La.H.Ca.Co|Pr 31131112 Ce|Nd 111312 Pr|Pm 132 Nd|Sm 311332 Pm.Ca.Zn|Eu 1113222 Sm|Gd 13221133112 Eu.Ca.Co|Tb 3113112221131112 Ho.Gd|Dy 111312211312 Tb|Ho 1321132 Dy|Er 311311222 Ho.Pm|Tm 11131221133112 Er.Ca.Co|Yb 1321131112 Tm|Lu 311312 Yb|Hf 11132 Lu|Ta 13112221133211322112211213322113 Hf.Pa.H.Ca.W|W 312211322212221121123222113 Ta|Re 111312211312113221133211322112211213322113 Ge.Ca.W|Os 1321132122211322212221121123222113 Re|Ir 3113112211322112211213322113 Os|Pt 111312212221121123222113 Ir|Au 132112211213322113 Pt|Hg 31121123222113 Au|Tl 111213322113 Hg|Pb 123222113 Tl|Bi 3113322113 Pm.Pb|Po 1113222113 Bi|At 1322113 Po|Rn 311311222113 Ho.At|Fr 1113122113 Rn|Ra 132113 Fr|Ac 3113 Ra|Th 1113 Ac|Pa 13 Th|U 3 Pa`;\nconst ROWS = TABLE.split(\"|\").map((r) => r.split(\" \"));\nconst NAME = ROWS.map((r) => r[0]);\nconst LEN = ROWS.map((r) => r[1].length);\nconst DEC = ROWS.map((r) => r[2].split(\".\").map((n) => NAME.indexOf(n)));\nconst NONE = 92;\n\n// The seeds: the first row, the row from which it is a compound of elements,\n// and that compound. Seed 1 runs seven rows before it splits into Hf.Sn.\nconst SEEDS = [\n  [\"1\", 8, \"Hf.Sn\"],\n  [\"3\", 1, \"U\"],\n  [\"312\", 1, \"Zn\"],\n  [\"311311\", 1, \"Ba\"],\n  [\"22\", 1, \"H\"],\n];\n\n// The four prints: cell width and height, digits a line, blank lines between\n// rows, top margin, and how many lines the row read and the row typed may\n// fill together before the page steps down to the next print. Numerals\n// first, then bars one LED wide and as tall as the digit, so a run of equal\n// digits stands as a flat step; then one LED a digit, two LEDs tall, then\n// one.\nconst LV = [\n  { cw: 4, ch: 6, per: 16, gap: 0, top: 1, fit: 16 },\n  { cw: 1, ch: 4, per: 64, gap: 1, top: 0, fit: 24 },\n  { cw: 1, ch: 2, per: 64, gap: 1, top: 0, fit: 48 },\n  { cw: 1, ch: 1, per: 64, gap: 1, top: 0, fit: 999 },\n];\n// 3x5 numerals 1, 2 and 3, one octal digit a row from the top. No other\n// digit ever appears: no run in these seeds is longer than three.\nconst FONT = [0, 0o26227, 0o71747, 0o71317];\n// The largest row the finest print still holds, in lines of 64.\nconst LAST = 120;\n// Rows the page rattles off at the start before it settles to reading.\nconst BURST = 20;\n\nfunction say(d) {\n  const o = [];\n  for (let i = 0; i \u003c d.length; ) {\n    let j = i + 1;\n    while (j \u003c d.length && d[j] === d[i]) j++;\n    o.push(j - i, d[i]);\n    i = j;\n  }\n  return Uint8Array.from(o);\n}\n\nfunction build(P, si) {\n  const [s0, at, comp] = SEEDS[si];\n  const T = [];\n  let d = Uint8Array.from(s0, (c) => +c), E = null;\n  for (let n = 1; n \u003c= 48; n++) {\n    if (n === at) E = comp.split(\".\").map((x) => NAME.indexOf(x));\n    else if (E) E = E.flatMap((k) => DEC[k]);\n    const e = new Uint8Array(d.length).fill(NONE), end = new Uint8Array(d.length);\n    if (E) {\n      let p = 0;\n      for (const k of E) e.fill(k, p, (p += LEN[k])), (end[p - 1] = 1);\n    }\n    T.push({ d, e, end, n: d.length, ri: null });\n    const nx = say(d);\n    if (nx.length > LAST * 64) break;\n    d = nx;\n  }\n  P.si = si;\n  P.T = T;\n  P.lv = 0;\n  P.ls = lines(T, 0);\n  P.l0 = P.ls;\n  P.sc = 0;\n  P.n = 0;\n  P.st = 1;\n  P.w = 0.1;\n  P.r = 0;\n  // The seed is on the page from the start.\n  P.typed = T[0].n;\n  P.at = new Float32Array(T[0].n).fill(P.clock - 1);\n  P.u = 0;\n}\n\n// Where each row starts, in lines of a print.\nfunction lines(T, lv) {\n  const L = LV[lv], ls = new Int32Array(T.length + 1);\n  for (let k = 0; k \u003c T.length; k++) ls[k + 1] = ls[k] + ceil(T[k].n / L.per) + L.gap;\n  return ls;\n}\nconst rowLines = (P, k, lv) => ceil(P.T[k].n / LV[lv].per);\n\n// The runs of the row being read: for each digit, the number of its run.\nfunction runs(t) {\n  if (t.ri) return;\n  t.ri = new Int32Array(t.n);\n  t.rs = [];\n  for (let i = 0, r = -1; i \u003c t.n; i++) {\n    if (i === 0 || t.d[i] !== t.d[i - 1]) r++, t.rs.push(i);\n    t.ri[i] = r;\n  }\n}\n\n// How long a row takes to type: seconds for its runs at the Speed knob.\nfunction dur(P, k) {\n  const runsN = P.T[k].n / 2, f = 2 / P.sp;\n  if (P.l0[k] \u003c BURST) return 0.15 * pow(f, 0.5);\n  if (P.lv === 0) return f * (0.2 + 0.55 * pow(runsN, 0.5));\n  return f * (0.5 + 0.55 * pow(runsN, 0.3));\n}\n\n// The scroll that keeps the typing line at the foot of the panel and the\n// reading head on it.\nfunction want(P, lv, ls, typed) {\n  const L = LV[lv], n = P.n;\n  if (n >= P.T.length) return P.sc;\n  const tl = ls[n] + floor(min(typed, P.T[n].n - 1) / L.per);\n  let s = L.top + (tl + 1) * L.ch + 1 - H;\n  if (n > 0) {\n    const src = P.T[n - 1], i = src.rs ? src.rs[min(src.rs.length - 1, floor(P.r))] : 0;\n    s = min(s, L.top + (ls[n - 1] + floor(i / L.per)) * L.ch - 2);\n  }\n  return max(0, s);\n}\n\nfunction next(P) {\n  P.n++;\n  P.r = 0;\n  P.typed = 0;\n  if (P.n >= P.T.length) return void ((P.st = 3), (P.w = 3));\n  const t = P.T[P.n];\n  runs(P.T[P.n - 1]);\n  P.at = new Float32Array(t.n);\n  P.st = 0;\n  const lv = P.lv;\n  if (lv \u003c 3 && rowLines(P, P.n - 1, lv) + rowLines(P, P.n, lv) > LV[lv].fit) {\n    // Step down a print: every digit flies from its old place to its new one.\n    P.nl = lv + 1;\n    P.nls = lines(P.T, lv + 1);\n    P.nsc = want(P, lv + 1, P.nls, 0);\n    P.st = 2;\n    P.u = 0;\n  }\n}\n\nexport function setup(params) {\n  params.s = { si: 0, off: 0, sp: 2, hue: 0, dig: 0.06, col: new Float32Array(93 * 4 * 3), buf: new Float32Array(W * H * 3), clock: 0 };\n  build(params.s, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.dig = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.off++;\n  const si = (round(cl(k[2], 1, 5)) - 1 + P.off) % SEEDS.length;\n  if (si !== P.si) build(P, si);\n  P.clock += d;\n  if (P.st === 0) {\n    const t = P.T[P.n], rn = t.n / 2;\n    P.r = min(rn, P.r + (d * rn) / dur(P, P.n));\n    // The count is spoken as the run lights up, the digit just after.\n    while (P.typed \u003c t.n && (P.typed >> 1) + (P.typed & 1 ? 0.55 : 0.12) \u003c= P.r) P.at[P.typed++] = P.clock;\n    if (P.typed >= t.n) (P.st = 1), (P.w = P.l0[P.n] \u003c BURST ? 0.03 : 0.35 * (2 / P.sp));\n  } else if (P.st === 1) {\n    P.w -= d;\n    if (P.w \u003c= 0) next(P);\n  } else if (P.st === 2) {\n    P.u += d / 1.6;\n    if (P.u >= 1) (P.lv = P.nl), (P.ls = P.nls), (P.sc = P.nsc), (P.st = 0);\n  } else if (P.st === 3) {\n    P.w -= d;\n    if (P.w \u003c= 0) (P.st = 4), (P.u = 0);\n  } else if (P.st === 4) {\n    P.u += d / 0.8;\n    if (P.u >= 1) build(P, P.si);\n  }\n  if (P.st !== 2) P.sc += (want(P, P.lv, P.ls, P.typed) - P.sc) * (1 - exp(-d * 10));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\n// Colour of each element and digit: element hue by place in Conway's table,\n// from pink at hydrogen through violet and blue to green at uranium, so an\n// element and what it decays into are near in colour. The Digits knob mixes\n// toward a hue for each digit. Rows before the split into elements are pale.\nconst tmp = new Float32Array(6);\nfunction palette(P) {\n  const h0 = P.hue + 0.95, col = P.col, k = cl((P.dig - 0.3) / 0.4, 0, 1), g = k * k * (3 - 2 * k);\n  for (let e = 0; e \u003c= NONE; e++)\n    for (let dg = 1; dg \u003c= 3; dg++) {\n      if (e === NONE) hsv(h0 + 0.2, 0.3, 1, tmp, 0);\n      else hsv(h0 - 0.58 * (e / 91), 0.75, 1, tmp, 0);\n      hsv(h0 + [0, 0.56, 0.85, 0.19][dg], 0.8, 1, tmp, 3);\n      const o = (e * 4 + dg) * 3;\n      for (let c = 0; c \u003c 3; c++) col[o + c] = tmp[c] + (tmp[c + 3] - tmp[c]) * g;\n    }\n}\n\n// One digit onto the buffer in print lv at (x, y), the palette colour at o\n// scaled by v and whitened by w. Behind a numeral lies a strip of tint, open\n// after the last digit of an element; a bar at the end of an element is dimmer.\nfunction put(P, lv, x, y, dg, o, v, w, tint, end) {\n  const buf = P.buf, col = P.col;\n  const r = col[o] * v, g = col[o + 1] * v, b = col[o + 2] * v;\n  const R = r + (255 - r) * w, G = g + (255 - g) * w, B = b + (255 - b) * w;\n  if (lv === 0) {\n    const bits = FONT[dg], tw = end ? 3 : 4;\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const yy = y + gy;\n      if (yy \u003c 0 || yy >= H) continue;\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c tw; gx++) {\n        const xx = x + gx;\n        if (xx >= W) break;\n        const q = (yy * W + xx) * 3;\n        if (gx \u003c 3 && row & (4 >> gx)) (buf[q] = R), (buf[q + 1] = G), (buf[q + 2] = B);\n        else if (tint > 0) (buf[q] = col[o] * tint), (buf[q + 1] = col[o + 1] * tint), (buf[q + 2] = col[o + 2] * tint);\n      }\n    }\n    return;\n  }\n  const m = lv === 1 ? (end ? 0.6 : 1) : lv === 2 ? [0, 0.7, 0.86, 1][dg] : [0, 0.8, 0.9, 1][dg];\n  for (let yy = lv === 1 ? y + 3 - dg : y, y1 = lv === 1 ? y + 3 : y + LV[lv].ch; yy \u003c y1; yy++) {\n    if (yy \u003c 0 || yy >= H || x >= W) continue;\n    const q = (yy * W + x) * 3;\n    buf[q] = R * m;\n    buf[q + 1] = G * m;\n    buf[q + 2] = B * m;\n  }\n}\n\n// Brightness and whitening of digit i of row k: rows long read are dim, the\n// row being read dims behind the reading head, the run under the head lights\n// up, and a digit just typed flashes.\nconst OLD = 0.62, SRC = 0.95;\nfunction look(P, k, i, out) {\n  const n = P.n;\n  out[0] = OLD;\n  out[1] = 0;\n  if (k === n && P.st \u003c= 1) {\n    out[0] = 1;\n    out[1] = 0.85 * exp(-(P.clock - P.at[i]) / 0.22);\n  } else if (k === n - 1 && P.st \u003c= 1) {\n    const t = P.T[k], dr = P.r - t.ri[i];\n    if (dr \u003c 0) out[0] = SRC;\n    else {\n      const tau = dur(P, n) / (P.T[n].n / 2), s = dr \u003c 1 ? 0 : ((dr - 1) * tau) / 0.25;\n      out[1] = 0.8 * exp(-s);\n      out[0] = OLD + (SRC - OLD) * exp(-s * 0.3);\n    }\n  } else if (k === n - 1) out[0] = SRC;\n}\n\nconst lk = new Float32Array(2);\nfunction drawPage(P, lv, ls, sc) {\n  const L = LV[lv], top = L.top - round(sc), tintBase = (1 - P.dig) * 0.13;\n  const last = min(P.n, P.T.length - 1);\n  for (let k = 0; k \u003c= last; k++) {\n    const t = P.T[k], y0 = top + ls[k] * L.ch;\n    if (y0 >= H) break;\n    if (y0 + (ls[k + 1] - ls[k]) * L.ch \u003c 0) continue;\n    const cnt = k === P.n ? (P.st \u003c= 1 ? P.typed : 0) : t.n;\n    for (let i = 0; i \u003c cnt; i++) {\n      const y = y0 + floor(i / L.per) * L.ch;\n      if (y + L.ch \u003c= 0) {\n        i += L.per - 1 - (i % L.per);\n        continue;\n      }\n      if (y >= H) break;\n      look(P, k, i, lk);\n      const e = t.e[i], dg = t.d[i];\n      put(P, lv, (i % L.per) * L.cw, y, dg, (e * 4 + dg) * 3, lk[0], lk[1], e === NONE ? 0 : tintBase * (0.6 + 0.4 * lk[0]), t.end[i]);\n    }\n  }\n}\n\n// Stepping down a print: line by line from the top, each numeral drops to a\n// block and flies to its place in the finer print.\nfunction drawFlight(P) {\n  const A = LV[P.lv], B = LV[P.nl], u = P.u, tintBase = (1 - P.dig) * 0.13;\n  const ta = A.top - round(P.sc), tb = B.top - round(P.nsc);\n  for (let k = 0; k \u003c P.n; k++) {\n    const t = P.T[k];\n    for (let i = 0; i \u003c t.n; i++) {\n      const xa = (i % A.per) * A.cw, ya = ta + (P.ls[k] + floor(i / A.per)) * A.ch;\n      const xb = (i % B.per) * B.cw, yb = tb + (P.nls[k] + floor(i / B.per)) * B.ch;\n      if ((ya \u003c -6 || ya >= H) && (yb \u003c -6 || yb >= H)) continue;\n      const v = k === P.n - 1 ? SRC : OLD, e = t.e[i], dg = t.d[i], o = (e * 4 + dg) * 3;\n      const s = cl((u * 1.5 - 0.5 * cl(ya / H, 0, 1)) * 1.25, 0, 1);\n      if (s \u003c= 0) put(P, P.lv, xa, ya, dg, o, v, 0, e === NONE ? 0 : tintBase * (0.6 + 0.4 * v), t.end[i]);\n      else {\n        const f = s * s * (3 - 2 * s);\n        put(P, P.nl, round(xa + (xb - xa) * f), round(ya + (yb - ya) * f), dg, o, v, 0.5 * (1 - f), 0, t.end[i]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  palette(P);\n  const buf = P.buf;\n  buf.fill(0);\n  if (P.st === 2) drawFlight(P);\n  else drawPage(P, P.lv, P.ls, P.sc);\n  const fade = P.st === 4 ? 1 - P.u : 1;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * fade, buf[p + 1] * fade, buf[p + 2] * fade);\n}\n","layer":{"id":"layer-look-and-say","type":"code","name":"look-and-say","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Look and Say\n// Family:  data\n// Idea:    Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the look-and-say sequence and its audioactive decay into 92 elements (John Horton Conway, 1986), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream.\n// Knob 2: Speed. How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long.\n// Knob 3: Seed. The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s).\n// Knob 4: Digits. At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold.\n// Buttons: K1 tap starts the page again from the next seed.\n\nconst W = 64, H = 128;\nconst { min, max, floor, ceil, exp, pow, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Conway's 92 elements, H to U: the name, the digits, and what the element\n// becomes when it is read aloud. Every term of the sequence from the eighth\n// on is a row of these, and each element decays on its own.\nconst TABLE = `H 22 H|He 13112221133211322112211213322112 Hf.Pa.H.Ca.Li|Li 312211322212221121123222112 He|Be 111312211312113221133211322112211213322112 Ge.Ca.Li|B 1321132122211322212221121123222112 Be|C 3113112211322112211213322112 B|N 111312212221121123222112 C|O 132112211213322112 N|F 31121123222112 O|Ne 111213322112 F|Na 123222112 Ne|Mg 3113322112 Pm.Na|Al 1113222112 Mg|Si 1322112 Al|P 311311222112 Ho.Si|S 1113122112 P|Cl 132112 S|Ar 3112 Cl|K 1112 Ar|Ca 12 K|Sc 3113112221133112 Ho.Pa.H.Ca.Co|Ti 11131221131112 Sc|V 13211312 Ti|Cr 31132 V|Mn 111311222112 Cr.Si|Fe 13122112 Mn|Co 32112 Fe|Ni 11133112 Zn.Co|Cu 131112 Ni|Zn 312 Cu|Ga 13221133122211332 Eu.Ca.Ac.H.Ca.Zn|Ge 31131122211311122113222 Ho.Ga|As 11131221131211322113322112 Ge.Na|Se 13211321222113222112 As|Br 3113112211322112 Se|Kr 11131221222112 Br|Rb 1321122112 Kr|Sr 3112112 Rb|Y 1112133 Sr.U|Zr 12322211331222113112211 Y.H.Ca.Tc|Nb 1113122113322113111221131221 Er.Zr|Mo 13211322211312113211 Nb|Tc 311322113212221 Mo|Ru 132211331222113112211 Eu.Ca.Tc|Rh 311311222113111221131221 Ho.Ru|Pd 111312211312113211 Rh|Ag 132113212221 Pd|Cd 3113112211 Ag|In 11131221 Cd|Sn 13211 In|Sb 3112221 Pm.Sn|Te 1322113312211 Eu.Ca.Sb|I 311311222113111221 Ho.Te|Xe 11131221131211 I|Cs 13211321 Xe|Ba 311311 Cs|La 11131 Ba|Ce 1321133112 La.H.Ca.Co|Pr 31131112 Ce|Nd 111312 Pr|Pm 132 Nd|Sm 311332 Pm.Ca.Zn|Eu 1113222 Sm|Gd 13221133112 Eu.Ca.Co|Tb 3113112221131112 Ho.Gd|Dy 111312211312 Tb|Ho 1321132 Dy|Er 311311222 Ho.Pm|Tm 11131221133112 Er.Ca.Co|Yb 1321131112 Tm|Lu 311312 Yb|Hf 11132 Lu|Ta 13112221133211322112211213322113 Hf.Pa.H.Ca.W|W 312211322212221121123222113 Ta|Re 111312211312113221133211322112211213322113 Ge.Ca.W|Os 1321132122211322212221121123222113 Re|Ir 3113112211322112211213322113 Os|Pt 111312212221121123222113 Ir|Au 132112211213322113 Pt|Hg 31121123222113 Au|Tl 111213322113 Hg|Pb 123222113 Tl|Bi 3113322113 Pm.Pb|Po 1113222113 Bi|At 1322113 Po|Rn 311311222113 Ho.At|Fr 1113122113 Rn|Ra 132113 Fr|Ac 3113 Ra|Th 1113 Ac|Pa 13 Th|U 3 Pa`;\nconst ROWS = TABLE.split(\"|\").map((r) => r.split(\" \"));\nconst NAME = ROWS.map((r) => r[0]);\nconst LEN = ROWS.map((r) => r[1].length);\nconst DEC = ROWS.map((r) => r[2].split(\".\").map((n) => NAME.indexOf(n)));\nconst NONE = 92;\n\n// The seeds: the first row, the row from which it is a compound of elements,\n// and that compound. Seed 1 runs seven rows before it splits into Hf.Sn.\nconst SEEDS = [\n  [\"1\", 8, \"Hf.Sn\"],\n  [\"3\", 1, \"U\"],\n  [\"312\", 1, \"Zn\"],\n  [\"311311\", 1, \"Ba\"],\n  [\"22\", 1, \"H\"],\n];\n\n// The four prints: cell width and height, digits a line, blank lines between\n// rows, top margin, and how many lines the row read and the row typed may\n// fill together before the page steps down to the next print. Numerals\n// first, then bars one LED wide and as tall as the digit, so a run of equal\n// digits stands as a flat step; then one LED a digit, two LEDs tall, then\n// one.\nconst LV = [\n  { cw: 4, ch: 6, per: 16, gap: 0, top: 1, fit: 16 },\n  { cw: 1, ch: 4, per: 64, gap: 1, top: 0, fit: 24 },\n  { cw: 1, ch: 2, per: 64, gap: 1, top: 0, fit: 48 },\n  { cw: 1, ch: 1, per: 64, gap: 1, top: 0, fit: 999 },\n];\n// 3x5 numerals 1, 2 and 3, one octal digit a row from the top. No other\n// digit ever appears: no run in these seeds is longer than three.\nconst FONT = [0, 0o26227, 0o71747, 0o71317];\n// The largest row the finest print still holds, in lines of 64.\nconst LAST = 120;\n// Rows the page rattles off at the start before it settles to reading.\nconst BURST = 20;\n\nfunction say(d) {\n  const o = [];\n  for (let i = 0; i \u003c d.length; ) {\n    let j = i + 1;\n    while (j \u003c d.length && d[j] === d[i]) j++;\n    o.push(j - i, d[i]);\n    i = j;\n  }\n  return Uint8Array.from(o);\n}\n\nfunction build(P, si) {\n  const [s0, at, comp] = SEEDS[si];\n  const T = [];\n  let d = Uint8Array.from(s0, (c) => +c), E = null;\n  for (let n = 1; n \u003c= 48; n++) {\n    if (n === at) E = comp.split(\".\").map((x) => NAME.indexOf(x));\n    else if (E) E = E.flatMap((k) => DEC[k]);\n    const e = new Uint8Array(d.length).fill(NONE), end = new Uint8Array(d.length);\n    if (E) {\n      let p = 0;\n      for (const k of E) e.fill(k, p, (p += LEN[k])), (end[p - 1] = 1);\n    }\n    T.push({ d, e, end, n: d.length, ri: null });\n    const nx = say(d);\n    if (nx.length > LAST * 64) break;\n    d = nx;\n  }\n  P.si = si;\n  P.T = T;\n  P.lv = 0;\n  P.ls = lines(T, 0);\n  P.l0 = P.ls;\n  P.sc = 0;\n  P.n = 0;\n  P.st = 1;\n  P.w = 0.1;\n  P.r = 0;\n  // The seed is on the page from the start.\n  P.typed = T[0].n;\n  P.at = new Float32Array(T[0].n).fill(P.clock - 1);\n  P.u = 0;\n}\n\n// Where each row starts, in lines of a print.\nfunction lines(T, lv) {\n  const L = LV[lv], ls = new Int32Array(T.length + 1);\n  for (let k = 0; k \u003c T.length; k++) ls[k + 1] = ls[k] + ceil(T[k].n / L.per) + L.gap;\n  return ls;\n}\nconst rowLines = (P, k, lv) => ceil(P.T[k].n / LV[lv].per);\n\n// The runs of the row being read: for each digit, the number of its run.\nfunction runs(t) {\n  if (t.ri) return;\n  t.ri = new Int32Array(t.n);\n  t.rs = [];\n  for (let i = 0, r = -1; i \u003c t.n; i++) {\n    if (i === 0 || t.d[i] !== t.d[i - 1]) r++, t.rs.push(i);\n    t.ri[i] = r;\n  }\n}\n\n// How long a row takes to type: seconds for its runs at the Speed knob.\nfunction dur(P, k) {\n  const runsN = P.T[k].n / 2, f = 2 / P.sp;\n  if (P.l0[k] \u003c BURST) return 0.15 * pow(f, 0.5);\n  if (P.lv === 0) return f * (0.2 + 0.55 * pow(runsN, 0.5));\n  return f * (0.5 + 0.55 * pow(runsN, 0.3));\n}\n\n// The scroll that keeps the typing line at the foot of the panel and the\n// reading head on it.\nfunction want(P, lv, ls, typed) {\n  const L = LV[lv], n = P.n;\n  if (n >= P.T.length) return P.sc;\n  const tl = ls[n] + floor(min(typed, P.T[n].n - 1) / L.per);\n  let s = L.top + (tl + 1) * L.ch + 1 - H;\n  if (n > 0) {\n    const src = P.T[n - 1], i = src.rs ? src.rs[min(src.rs.length - 1, floor(P.r))] : 0;\n    s = min(s, L.top + (ls[n - 1] + floor(i / L.per)) * L.ch - 2);\n  }\n  return max(0, s);\n}\n\nfunction next(P) {\n  P.n++;\n  P.r = 0;\n  P.typed = 0;\n  if (P.n >= P.T.length) return void ((P.st = 3), (P.w = 3));\n  const t = P.T[P.n];\n  runs(P.T[P.n - 1]);\n  P.at = new Float32Array(t.n);\n  P.st = 0;\n  const lv = P.lv;\n  if (lv \u003c 3 && rowLines(P, P.n - 1, lv) + rowLines(P, P.n, lv) > LV[lv].fit) {\n    // Step down a print: every digit flies from its old place to its new one.\n    P.nl = lv + 1;\n    P.nls = lines(P.T, lv + 1);\n    P.nsc = want(P, lv + 1, P.nls, 0);\n    P.st = 2;\n    P.u = 0;\n  }\n}\n\nexport function setup(params) {\n  params.s = { si: 0, off: 0, sp: 2, hue: 0, dig: 0.06, col: new Float32Array(93 * 4 * 3), buf: new Float32Array(W * H * 3), clock: 0 };\n  build(params.s, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.dig = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.off++;\n  const si = (round(cl(k[2], 1, 5)) - 1 + P.off) % SEEDS.length;\n  if (si !== P.si) build(P, si);\n  P.clock += d;\n  if (P.st === 0) {\n    const t = P.T[P.n], rn = t.n / 2;\n    P.r = min(rn, P.r + (d * rn) / dur(P, P.n));\n    // The count is spoken as the run lights up, the digit just after.\n    while (P.typed \u003c t.n && (P.typed >> 1) + (P.typed & 1 ? 0.55 : 0.12) \u003c= P.r) P.at[P.typed++] = P.clock;\n    if (P.typed >= t.n) (P.st = 1), (P.w = P.l0[P.n] \u003c BURST ? 0.03 : 0.35 * (2 / P.sp));\n  } else if (P.st === 1) {\n    P.w -= d;\n    if (P.w \u003c= 0) next(P);\n  } else if (P.st === 2) {\n    P.u += d / 1.6;\n    if (P.u >= 1) (P.lv = P.nl), (P.ls = P.nls), (P.sc = P.nsc), (P.st = 0);\n  } else if (P.st === 3) {\n    P.w -= d;\n    if (P.w \u003c= 0) (P.st = 4), (P.u = 0);\n  } else if (P.st === 4) {\n    P.u += d / 0.8;\n    if (P.u >= 1) build(P, P.si);\n  }\n  if (P.st !== 2) P.sc += (want(P, P.lv, P.ls, P.typed) - P.sc) * (1 - exp(-d * 10));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\n// Colour of each element and digit: element hue by place in Conway's table,\n// from pink at hydrogen through violet and blue to green at uranium, so an\n// element and what it decays into are near in colour. The Digits knob mixes\n// toward a hue for each digit. Rows before the split into elements are pale.\nconst tmp = new Float32Array(6);\nfunction palette(P) {\n  const h0 = P.hue + 0.95, col = P.col, k = cl((P.dig - 0.3) / 0.4, 0, 1), g = k * k * (3 - 2 * k);\n  for (let e = 0; e \u003c= NONE; e++)\n    for (let dg = 1; dg \u003c= 3; dg++) {\n      if (e === NONE) hsv(h0 + 0.2, 0.3, 1, tmp, 0);\n      else hsv(h0 - 0.58 * (e / 91), 0.75, 1, tmp, 0);\n      hsv(h0 + [0, 0.56, 0.85, 0.19][dg], 0.8, 1, tmp, 3);\n      const o = (e * 4 + dg) * 3;\n      for (let c = 0; c \u003c 3; c++) col[o + c] = tmp[c] + (tmp[c + 3] - tmp[c]) * g;\n    }\n}\n\n// One digit onto the buffer in print lv at (x, y), the palette colour at o\n// scaled by v and whitened by w. Behind a numeral lies a strip of tint, open\n// after the last digit of an element; a bar at the end of an element is dimmer.\nfunction put(P, lv, x, y, dg, o, v, w, tint, end) {\n  const buf = P.buf, col = P.col;\n  const r = col[o] * v, g = col[o + 1] * v, b = col[o + 2] * v;\n  const R = r + (255 - r) * w, G = g + (255 - g) * w, B = b + (255 - b) * w;\n  if (lv === 0) {\n    const bits = FONT[dg], tw = end ? 3 : 4;\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const yy = y + gy;\n      if (yy \u003c 0 || yy >= H) continue;\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c tw; gx++) {\n        const xx = x + gx;\n        if (xx >= W) break;\n        const q = (yy * W + xx) * 3;\n        if (gx \u003c 3 && row & (4 >> gx)) (buf[q] = R), (buf[q + 1] = G), (buf[q + 2] = B);\n        else if (tint > 0) (buf[q] = col[o] * tint), (buf[q + 1] = col[o + 1] * tint), (buf[q + 2] = col[o + 2] * tint);\n      }\n    }\n    return;\n  }\n  const m = lv === 1 ? (end ? 0.6 : 1) : lv === 2 ? [0, 0.7, 0.86, 1][dg] : [0, 0.8, 0.9, 1][dg];\n  for (let yy = lv === 1 ? y + 3 - dg : y, y1 = lv === 1 ? y + 3 : y + LV[lv].ch; yy \u003c y1; yy++) {\n    if (yy \u003c 0 || yy >= H || x >= W) continue;\n    const q = (yy * W + x) * 3;\n    buf[q] = R * m;\n    buf[q + 1] = G * m;\n    buf[q + 2] = B * m;\n  }\n}\n\n// Brightness and whitening of digit i of row k: rows long read are dim, the\n// row being read dims behind the reading head, the run under the head lights\n// up, and a digit just typed flashes.\nconst OLD = 0.62, SRC = 0.95;\nfunction look(P, k, i, out) {\n  const n = P.n;\n  out[0] = OLD;\n  out[1] = 0;\n  if (k === n && P.st \u003c= 1) {\n    out[0] = 1;\n    out[1] = 0.85 * exp(-(P.clock - P.at[i]) / 0.22);\n  } else if (k === n - 1 && P.st \u003c= 1) {\n    const t = P.T[k], dr = P.r - t.ri[i];\n    if (dr \u003c 0) out[0] = SRC;\n    else {\n      const tau = dur(P, n) / (P.T[n].n / 2), s = dr \u003c 1 ? 0 : ((dr - 1) * tau) / 0.25;\n      out[1] = 0.8 * exp(-s);\n      out[0] = OLD + (SRC - OLD) * exp(-s * 0.3);\n    }\n  } else if (k === n - 1) out[0] = SRC;\n}\n\nconst lk = new Float32Array(2);\nfunction drawPage(P, lv, ls, sc) {\n  const L = LV[lv], top = L.top - round(sc), tintBase = (1 - P.dig) * 0.13;\n  const last = min(P.n, P.T.length - 1);\n  for (let k = 0; k \u003c= last; k++) {\n    const t = P.T[k], y0 = top + ls[k] * L.ch;\n    if (y0 >= H) break;\n    if (y0 + (ls[k + 1] - ls[k]) * L.ch \u003c 0) continue;\n    const cnt = k === P.n ? (P.st \u003c= 1 ? P.typed : 0) : t.n;\n    for (let i = 0; i \u003c cnt; i++) {\n      const y = y0 + floor(i / L.per) * L.ch;\n      if (y + L.ch \u003c= 0) {\n        i += L.per - 1 - (i % L.per);\n        continue;\n      }\n      if (y >= H) break;\n      look(P, k, i, lk);\n      const e = t.e[i], dg = t.d[i];\n      put(P, lv, (i % L.per) * L.cw, y, dg, (e * 4 + dg) * 3, lk[0], lk[1], e === NONE ? 0 : tintBase * (0.6 + 0.4 * lk[0]), t.end[i]);\n    }\n  }\n}\n\n// Stepping down a print: line by line from the top, each numeral drops to a\n// block and flies to its place in the finer print.\nfunction drawFlight(P) {\n  const A = LV[P.lv], B = LV[P.nl], u = P.u, tintBase = (1 - P.dig) * 0.13;\n  const ta = A.top - round(P.sc), tb = B.top - round(P.nsc);\n  for (let k = 0; k \u003c P.n; k++) {\n    const t = P.T[k];\n    for (let i = 0; i \u003c t.n; i++) {\n      const xa = (i % A.per) * A.cw, ya = ta + (P.ls[k] + floor(i / A.per)) * A.ch;\n      const xb = (i % B.per) * B.cw, yb = tb + (P.nls[k] + floor(i / B.per)) * B.ch;\n      if ((ya \u003c -6 || ya >= H) && (yb \u003c -6 || yb >= H)) continue;\n      const v = k === P.n - 1 ? SRC : OLD, e = t.e[i], dg = t.d[i], o = (e * 4 + dg) * 3;\n      const s = cl((u * 1.5 - 0.5 * cl(ya / H, 0, 1)) * 1.25, 0, 1);\n      if (s \u003c= 0) put(P, P.lv, xa, ya, dg, o, v, 0, e === NONE ? 0 : tintBase * (0.6 + 0.4 * v), t.end[i]);\n      else {\n        const f = s * s * (3 - 2 * s);\n        put(P, P.nl, round(xa + (xb - xa) * f), round(ya + (yb - ya) * f), dg, o, v, 0.5 * (1 - f), 0, t.end[i]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  palette(P);\n  const buf = P.buf;\n  buf.fill(0);\n  if (P.st === 2) drawFlight(P);\n  else drawPage(P, P.lv, P.ls, P.sc);\n  const fade = P.st === 4 ? 1 - P.u : 1;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * fade, buf[p + 1] * fade, buf[p + 2] * fade);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long."},{"name":"Seed","min":1,"max":5,"about":"The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s)."},{"name":"Digits","min":0,"max":1,"about":"At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold."}],"start":[0,2,1,0.06],"measures":{"motion":1.7275,"detail":0.2216,"edges":0.866,"complexity":0.242,"coverage":0.6191,"colour":0.2962,"drift":0.1823},"knobResponse":[0.1154,0.1635,0.2082,0.064]},{"slug":"loose-powder","title":"Loose Powder","family":"cosmetic","round":29,"note":"꽃 무늬가 눌린 분홍 압축 파우더 위로 보이지 않는 퍼프가 그림자로만 내려와 자국을 내고, 들릴 때 하얀 가루 구름이 운모 반짝임과 함께 피어 위로 흘러가요. K3 을 올리면 무늬 비탈에 새틴 광이 돌고, 누르면 퍼프가 바로 내려와요.","idea":"A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.","buttons":"K1 tap brings the puff down now, once the last one has lifted.","code":"// ===== Patternflow pattern =====\n// Title:   Loose Powder\n// Family:  cosmetic\n// Idea:    A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the embossed relief of pressed face powder and the puff lifted from it\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1\n//\n// Knob 1: Hue. The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are.\n// Knob 2: Speed. How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower.\n// Knob 3: Shimmer. How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica.\n// Knob 4: Air. How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself.\n// Buttons: K1 tap brings the puff down now, once the last one has lifted.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, sqrt, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The powder ends at row FLOOR, where a gold line edges a white band: the\n// packaging, the only part of it on show. The medallion sits centred above.\nconst FLOOR = 115, MY = 57;\n\n// The emboss, as a height: an eight-petalled flower with a raised rim round\n// each petal, a ring at its heart, a wide ring cut off by the panel's sides\n// and fine rays beyond it. GRAIN is each LED's fixed bit of powder texture and\n// TW the seed of the mica that may sit there.\nconst E = new Float32Array(N), GRAIN = new Float32Array(N), TW = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = x + 0.5 - 32, dy = y + 0.5 - MY, r = hypot(dx, dy), a = atan2(dy, dx);\n    const pet = 21 + 6 * cos(a * 8);\n    let h = cl((pet - r) / 3, 0, 1) * 0.6;\n    h += 0.4 * exp(-(((r - pet) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 8.5) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 42) / 1.3) ** 2));\n    if (r > 44) h += 0.25 * (0.5 + 0.5 * cos(a * 48));\n    const i = y * W + x;\n    E[i] = h;\n    GRAIN[i] = (hash(i) - 0.5) * 0.07;\n    TW[i] = hash(i + 77777);\n  }\n\n// The LEDs that could hold mica, in the order Shimmer turns them on.\nconst MICA = Int32Array.from({ length: FLOOR * W }, (_, i) => i)\n  .filter((i) => TW[i] \u003c 0.02)\n  .sort((a, b) => TW[a] - TW[b]);\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), z: F(MAXP), vx: F(MAXP), vy: F(MAXP), vz: F(MAXP), ph: F(MAXP), om: F(MAXP), mica: new Uint8Array(MAXP),\n    n: 0, dent: F(N), wear: F(N).fill(1), dust: F(N), prof: F(N), hm: F(N), den: F(N), sh: F(N), tmp: F(N), buf: F(N * 3),\n    T: 0, u: 99, wisp: 0, px: 32, py: 64, pz: 40, started: false, hue: 0, shim: 1, air: 0.06, az: 0, col: F(6),\n  };\n}\n\n// One grain of powder into the air at height z. When the air is full, it\n// takes the place of a grain already there.\nfunction emit(S, x, y, z, vx, vy, vz) {\n  let i = S.n;\n  if (i >= MAXP) i = floor(Math.random() * MAXP);\n  else S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.z[i] = z;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  S.vz[i] = vz;\n  // A mica flake turns at its own rate and flashes once a turn.\n  S.mica[i] = Math.random() \u003c 0.04 * S.shim ? 1 : 0;\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.5 + 3.5 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n}\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.z[i] = S.z[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.vz[i] = S.vz[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.mica[i] = S.mica[j];\n}\n\n// The puff's round, in seconds at Speed 2: it comes down, presses, lifts, and\n// the cloud has the rest. R is its radius in LEDs, ZTOP how high it waits.\nconst DOWN = 1.2, PRESS = 0.8, LIFT = 0.7, ROUND = 7, R = 16, ZTOP = 34;\n\n// A new round: the puff picks a spot, and the dent it will press is drawn up.\nfunction start(S) {\n  S.u = 0;\n  S.px = 18 + Math.random() * 28;\n  S.py = 22 + Math.random() * (FLOOR - 46);\n  const p = S.prof;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = hypot(x + 0.5 - S.px, y + 0.5 - S.py);\n      p[y * W + x] = 1 - sstep(R * 0.3, R, r);\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.az = 0.32 * sin(S.T * 0.21) + 0.12 * sin(S.T * 0.53 + 1);\n  if (S.u > ROUND) start(S);\n  const u0 = S.u;\n  S.u += st;\n  const u = S.u;\n  // Height of the puff above the powder, and how deep it is pressed.\n  if (u \u003c DOWN) S.pz = ZTOP * (1 - sstep(0, DOWN, u));\n  else if (u \u003c DOWN + PRESS) S.pz = 0;\n  else S.pz = ZTOP * sstep(DOWN + PRESS, DOWN + PRESS + LIFT * 1.6, u);\n  const press = u \u003c DOWN ? 0 : u \u003c DOWN + PRESS ? sstep(DOWN, DOWN + PRESS * 0.6, u) : 1;\n  // Pressing dents the powder and flattens the emboss under the puff. Both\n  // come back slowly as the cloud dusts the surface, so the round can repeat.\n  const dent = S.dent, wear = S.wear, dust = S.dust, prof = S.prof;\n  const fd = exp(-st / 7), fw = st / 9, fu = exp(-st / 5);\n  for (let i = 0; i \u003c N; i++) {\n    dent[i] *= fd;\n    wear[i] += (1 - wear[i]) * fw;\n    dust[i] *= fu;\n    if (press > 0 && u \u003c DOWN + PRESS + 0.05) {\n      const p = prof[i] * press;\n      if (p > dent[i]) dent[i] = p;\n      const w = 1 - 0.6 * p;\n      if (w \u003c wear[i]) wear[i] = w;\n    }\n  }\n  // Squeezed out at the rim as it presses in, lifted out of the dent as it rises.\n  if (u0 \u003c DOWN + 0.1 && u >= DOWN + 0.1)\n    for (let k = 0; k \u003c 420; k++) {\n      const a = Math.random() * 2 * PI, s = 10 + 22 * Math.random();\n      emit(S, S.px + cos(a) * R * 0.9, S.py + sin(a) * R * 0.9, 0.5 + Math.random() * 2, cos(a) * s, sin(a) * s, 4 + 8 * Math.random());\n    }\n  if (u > DOWN + PRESS && u \u003c DOWN + PRESS + LIFT) {\n    const n = floor((850 * st) / LIFT + Math.random());\n    for (let k = 0; k \u003c n; k++) {\n      const a = Math.random() * 2 * PI, r = R * sqrt(Math.random()) * 0.9, s = 3 + 9 * Math.random();\n      emit(S, S.px + cos(a) * r, S.py + sin(a) * r, Math.random() * 3, cos(a) * s, sin(a) * s, 8 + 12 * Math.random());\n    }\n  }\n  // The air: slow eddies and a drift up the panel, both stronger with Air.\n  // A strong draught lifts wisps of loose powder off the surface by itself.\n  const A = S.air, T = S.T, kd = min(1, 1.2 * st), kz = min(1, 0.9 * st);\n  S.wisp += st * 160 * A * A;\n  while (S.wisp >= 1) {\n    S.wisp -= 1;\n    emit(S, Math.random() * W, 10 + Math.random() * (FLOOR - 10), 0.2, 0, 0, 2 + 4 * Math.random());\n  }\n  for (let i = S.n - 1; i >= 0; i--) {\n    const x = S.x[i], y = S.y[i];\n    const ex = (1.5 + 6 * A) * sin(y * 0.06 + T * 0.4) + (1 + 3 * A) * sin(y * 0.13 - T * 0.3 + x * 0.05);\n    const ey = -(2 + 16 * A) + (1.5 + 4 * A) * sin(x * 0.09 - T * 0.33);\n    S.vx[i] += (ex - S.vx[i]) * kd;\n    S.vy[i] += (ey - S.vy[i]) * kd;\n    S.vz[i] += (-1.3 - S.vz[i]) * kz;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + S.vy[i] * st;\n    S.z[i] += S.vz[i] * st;\n    S.ph[i] += S.om[i] * st;\n    const nx = S.x[i], ny = S.y[i];\n    if (nx \u003c -4 || nx > W + 4 || ny \u003c -6 || ny > FLOOR + 4) {\n      kill(S, i);\n      continue;\n    }\n    if (S.z[i] \u003c= 0) {\n      // Settling: it dusts the powder where it lands.\n      const p = floor(ny) * W + floor(nx);\n      if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c FLOOR) dust[p] = min(1.5, dust[p] + 0.05);\n      kill(S, i);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.shim = cl(k[2], 1, 5);\n  S.air = cl(k[3], 0, 1);\n  // Open with the last round's cloud still in the air and the next puff a\n  // second and a half away.\n  if (!S.started) {\n    S.started = true;\n    start(S);\n    for (let i = 0; i \u003c 162; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.u > DOWN + PRESS + LIFT) start(S);\n  step(S, d * rate);\n}\n\n// Spreads a splat buffer over its neighbours, for a soft cloud.\nfunction blur(a, t, passes) {\n  for (let pass = 0; pass \u003c passes; pass++) {\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        t[i] = (a[i] * 2 + (x > 0 ? a[i - 1] : a[i]) + (x \u003c W - 1 ? a[i + 1] : a[i])) * 0.25;\n      }\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        a[i] = (t[i] * 2 + (y > 0 ? t[i - W] : t[i]) + (y \u003c H - 1 ? t[i + W] : t[i])) * 0.25;\n      }\n  }\n}\nfunction splat(a, x, y, w) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i, py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      a[py * W + px] += w * (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n    }\n}\n\n// The four LEDs beside one, as offsets into the colour buffer.\nconst NB = [-3, 3, -W * 3, W * 3];\n\n// The light comes low from the upper left, so the relief stands out, and sways\n// a little: the sheen and the glints move with it.\nconst LA = atan2(-0.65, -0.55), LZ = 0.5;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, hm = S.hm, den = S.den, sh = S.sh, col = S.col;\n  hsv(S.hue + 0.95, 0.5, 205, col, 0);\n  hsv(S.hue + 0.95, 0.07, 255, col, 3);\n  const la = LA + S.az, lx = cos(la), ly = sin(la);\n  const hl = hypot(lx * 0.894, ly * 0.894, 1.447), hx = (lx * 0.894) / hl, hy = (ly * 0.894) / hl, hz = 1.447 / hl;\n  const sheen = 0.1 + 0.45 * (S.shim - 1);\n  // The height of the surface, then the cloud's density and its shadow,\n  // thrown away from the light by each grain's height.\n  for (let i = 0; i \u003c N; i++) hm[i] = E[i] * S.wear[i] - 0.9 * S.dent[i] + 0.25 * S.dust[i];\n  den.fill(0);\n  sh.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const z = S.z[i];\n    splat(den, S.x[i], S.y[i], 0.55);\n    splat(sh, S.x[i] - lx * z * 0.8, S.y[i] - ly * z * 0.8, 0.35);\n  }\n  blur(den, S.tmp, 2);\n  blur(sh, S.tmp, 1);\n  // The puff's shadow, cast away from the light, softer the higher it is.\n  const sx = S.px - lx * S.pz * 0.8, sy = S.py - ly * S.pz * 0.8, soft = 1.5 + S.pz * 0.3, dark = 0.36 - 0.2 * (S.pz / ZTOP);\n  const sr = R * (1 + S.pz * 0.01);\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3;\n      const gx = (hm[y * W + min(W - 1, x + 1)] - hm[y * W + max(0, x - 1)]) * 1.6;\n      const gy = (hm[min(FLOOR - 1, y + 1) * W + x] - hm[max(0, y - 1) * W + x]) * 1.6;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1), lam = max(0, (-gx * lx - gy * ly + LZ) * inv) / LZ;\n      // Shimmer: a satin sheen on the slopes that face halfway between the\n      // light and the eye.\n      let sp = max(0, (-gx * hx - gy * hy + hz) * inv);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp = sp * sp * sp * sheen;\n      let v = (0.42 + 0.5 * lam) * (1 + GRAIN[i]);\n      // Fresh loose powder on top is paler; the pressed patch a touch deeper.\n      const du = min(1, S.dust[i]) * 0.3, pr = S.dent[i] * 0.1;\n      v *= 1 - pr;\n      const c = sh[i] * 1.4;\n      v *= 1 - (0.16 * c) / (1 + c);\n      const ddx = x + 0.5 - sx, ddy = y + 0.5 - sy, dd = ddx * ddx + ddy * ddy;\n      if (S.pz \u003c ZTOP * 0.99 && dd \u003c (sr + soft) ** 2) v *= 1 - dark * (1 - sstep(sr - soft, sr + soft, sqrt(dd)));\n      let r = col[0] * v + 250 * sp, g = col[1] * v + 240 * sp, b = col[2] * v + 225 * sp;\n      r += (col[3] * v - r) * du;\n      g += (col[4] * v - g) * du;\n      b += (col[5] * v - b) * du;\n      // The cloud in the air, lit and pale.\n      const e = den[i] * 1.8, a = min(0.9, e / (1 + e));\n      buf[q] = r + (col[3] - r) * a;\n      buf[q + 1] = g + (col[4] - g) * a;\n      buf[q + 2] = b + (col[5] - b) * a;\n    }\n  // The white band, and the gold line along its top with a highlight that\n  // slides along it as the light sways.\n  {\n    const gx = 32 + 110 * S.az;\n    for (let y = FLOOR; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const q = (y * W + x) * 3, gold = y === FLOOR ? 1 : y === FLOOR + 1 ? 0.35 : 0;\n        const hl = 0.8 + 0.45 * exp(-((x - gx) ** 2) / 50);\n        buf[q] = 222 + (240 * hl - 222) * gold;\n        buf[q + 1] = 216 + (178 * hl - 216) * gold;\n        buf[q + 2] = 208 + (70 * hl - 208) * gold;\n      }\n  }\n  // Mica pressed into the powder: a few LEDs, more with Shimmer, each glinting\n  // when the swaying light passes the angle of its face.\n  const lim = 0.004 * S.shim;\n  for (let k = 0; k \u003c MICA.length && TW[MICA[k]] \u003c lim; k++) {\n    const i = MICA[k];\n    const g = exp((cos(TW[i] * 1500 + S.az * 7) - 1) / 0.03) * (1 - min(1, S.dent[i]));\n    if (g \u003c 0.02) continue;\n    const q = i * 3, v = 230 * g;\n    buf[q] += v;\n    buf[q + 1] += v * 0.92;\n    buf[q + 2] += v * 0.8;\n  }\n  // Mica in the cloud: each flake turns and flashes as its face meets the light.\n  for (let i = 0; i \u003c S.n; i++) {\n    if (!S.mica[i]) continue;\n    const f = exp((cos(S.ph[i]) - 1) / 0.05), v = 40 + 260 * f;\n    const x = floor(S.x[i]), y = floor(S.y[i]);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= FLOOR - 1) continue;\n    const q = (y * W + x) * 3;\n    buf[q] += v;\n    buf[q + 1] += v * 0.95;\n    buf[q + 2] += v * 0.85;\n    // A flash spills a little onto the LEDs beside it, or it looks pinpricked.\n    if (f > 0.3)\n      for (const o of NB) {\n        buf[q + o] += v * 0.25;\n        buf[q + o + 1] += v * 0.24;\n        buf[q + o + 2] += v * 0.21;\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-loose-powder","type":"code","name":"loose-powder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Loose Powder\n// Family:  cosmetic\n// Idea:    A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the embossed relief of pressed face powder and the puff lifted from it\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1\n//\n// Knob 1: Hue. The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are.\n// Knob 2: Speed. How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower.\n// Knob 3: Shimmer. How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica.\n// Knob 4: Air. How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself.\n// Buttons: K1 tap brings the puff down now, once the last one has lifted.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, sqrt, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The powder ends at row FLOOR, where a gold line edges a white band: the\n// packaging, the only part of it on show. The medallion sits centred above.\nconst FLOOR = 115, MY = 57;\n\n// The emboss, as a height: an eight-petalled flower with a raised rim round\n// each petal, a ring at its heart, a wide ring cut off by the panel's sides\n// and fine rays beyond it. GRAIN is each LED's fixed bit of powder texture and\n// TW the seed of the mica that may sit there.\nconst E = new Float32Array(N), GRAIN = new Float32Array(N), TW = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = x + 0.5 - 32, dy = y + 0.5 - MY, r = hypot(dx, dy), a = atan2(dy, dx);\n    const pet = 21 + 6 * cos(a * 8);\n    let h = cl((pet - r) / 3, 0, 1) * 0.6;\n    h += 0.4 * exp(-(((r - pet) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 8.5) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 42) / 1.3) ** 2));\n    if (r > 44) h += 0.25 * (0.5 + 0.5 * cos(a * 48));\n    const i = y * W + x;\n    E[i] = h;\n    GRAIN[i] = (hash(i) - 0.5) * 0.07;\n    TW[i] = hash(i + 77777);\n  }\n\n// The LEDs that could hold mica, in the order Shimmer turns them on.\nconst MICA = Int32Array.from({ length: FLOOR * W }, (_, i) => i)\n  .filter((i) => TW[i] \u003c 0.02)\n  .sort((a, b) => TW[a] - TW[b]);\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), z: F(MAXP), vx: F(MAXP), vy: F(MAXP), vz: F(MAXP), ph: F(MAXP), om: F(MAXP), mica: new Uint8Array(MAXP),\n    n: 0, dent: F(N), wear: F(N).fill(1), dust: F(N), prof: F(N), hm: F(N), den: F(N), sh: F(N), tmp: F(N), buf: F(N * 3),\n    T: 0, u: 99, wisp: 0, px: 32, py: 64, pz: 40, started: false, hue: 0, shim: 1, air: 0.06, az: 0, col: F(6),\n  };\n}\n\n// One grain of powder into the air at height z. When the air is full, it\n// takes the place of a grain already there.\nfunction emit(S, x, y, z, vx, vy, vz) {\n  let i = S.n;\n  if (i >= MAXP) i = floor(Math.random() * MAXP);\n  else S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.z[i] = z;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  S.vz[i] = vz;\n  // A mica flake turns at its own rate and flashes once a turn.\n  S.mica[i] = Math.random() \u003c 0.04 * S.shim ? 1 : 0;\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.5 + 3.5 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n}\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.z[i] = S.z[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.vz[i] = S.vz[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.mica[i] = S.mica[j];\n}\n\n// The puff's round, in seconds at Speed 2: it comes down, presses, lifts, and\n// the cloud has the rest. R is its radius in LEDs, ZTOP how high it waits.\nconst DOWN = 1.2, PRESS = 0.8, LIFT = 0.7, ROUND = 7, R = 16, ZTOP = 34;\n\n// A new round: the puff picks a spot, and the dent it will press is drawn up.\nfunction start(S) {\n  S.u = 0;\n  S.px = 18 + Math.random() * 28;\n  S.py = 22 + Math.random() * (FLOOR - 46);\n  const p = S.prof;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = hypot(x + 0.5 - S.px, y + 0.5 - S.py);\n      p[y * W + x] = 1 - sstep(R * 0.3, R, r);\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.az = 0.32 * sin(S.T * 0.21) + 0.12 * sin(S.T * 0.53 + 1);\n  if (S.u > ROUND) start(S);\n  const u0 = S.u;\n  S.u += st;\n  const u = S.u;\n  // Height of the puff above the powder, and how deep it is pressed.\n  if (u \u003c DOWN) S.pz = ZTOP * (1 - sstep(0, DOWN, u));\n  else if (u \u003c DOWN + PRESS) S.pz = 0;\n  else S.pz = ZTOP * sstep(DOWN + PRESS, DOWN + PRESS + LIFT * 1.6, u);\n  const press = u \u003c DOWN ? 0 : u \u003c DOWN + PRESS ? sstep(DOWN, DOWN + PRESS * 0.6, u) : 1;\n  // Pressing dents the powder and flattens the emboss under the puff. Both\n  // come back slowly as the cloud dusts the surface, so the round can repeat.\n  const dent = S.dent, wear = S.wear, dust = S.dust, prof = S.prof;\n  const fd = exp(-st / 7), fw = st / 9, fu = exp(-st / 5);\n  for (let i = 0; i \u003c N; i++) {\n    dent[i] *= fd;\n    wear[i] += (1 - wear[i]) * fw;\n    dust[i] *= fu;\n    if (press > 0 && u \u003c DOWN + PRESS + 0.05) {\n      const p = prof[i] * press;\n      if (p > dent[i]) dent[i] = p;\n      const w = 1 - 0.6 * p;\n      if (w \u003c wear[i]) wear[i] = w;\n    }\n  }\n  // Squeezed out at the rim as it presses in, lifted out of the dent as it rises.\n  if (u0 \u003c DOWN + 0.1 && u >= DOWN + 0.1)\n    for (let k = 0; k \u003c 420; k++) {\n      const a = Math.random() * 2 * PI, s = 10 + 22 * Math.random();\n      emit(S, S.px + cos(a) * R * 0.9, S.py + sin(a) * R * 0.9, 0.5 + Math.random() * 2, cos(a) * s, sin(a) * s, 4 + 8 * Math.random());\n    }\n  if (u > DOWN + PRESS && u \u003c DOWN + PRESS + LIFT) {\n    const n = floor((850 * st) / LIFT + Math.random());\n    for (let k = 0; k \u003c n; k++) {\n      const a = Math.random() * 2 * PI, r = R * sqrt(Math.random()) * 0.9, s = 3 + 9 * Math.random();\n      emit(S, S.px + cos(a) * r, S.py + sin(a) * r, Math.random() * 3, cos(a) * s, sin(a) * s, 8 + 12 * Math.random());\n    }\n  }\n  // The air: slow eddies and a drift up the panel, both stronger with Air.\n  // A strong draught lifts wisps of loose powder off the surface by itself.\n  const A = S.air, T = S.T, kd = min(1, 1.2 * st), kz = min(1, 0.9 * st);\n  S.wisp += st * 160 * A * A;\n  while (S.wisp >= 1) {\n    S.wisp -= 1;\n    emit(S, Math.random() * W, 10 + Math.random() * (FLOOR - 10), 0.2, 0, 0, 2 + 4 * Math.random());\n  }\n  for (let i = S.n - 1; i >= 0; i--) {\n    const x = S.x[i], y = S.y[i];\n    const ex = (1.5 + 6 * A) * sin(y * 0.06 + T * 0.4) + (1 + 3 * A) * sin(y * 0.13 - T * 0.3 + x * 0.05);\n    const ey = -(2 + 16 * A) + (1.5 + 4 * A) * sin(x * 0.09 - T * 0.33);\n    S.vx[i] += (ex - S.vx[i]) * kd;\n    S.vy[i] += (ey - S.vy[i]) * kd;\n    S.vz[i] += (-1.3 - S.vz[i]) * kz;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + S.vy[i] * st;\n    S.z[i] += S.vz[i] * st;\n    S.ph[i] += S.om[i] * st;\n    const nx = S.x[i], ny = S.y[i];\n    if (nx \u003c -4 || nx > W + 4 || ny \u003c -6 || ny > FLOOR + 4) {\n      kill(S, i);\n      continue;\n    }\n    if (S.z[i] \u003c= 0) {\n      // Settling: it dusts the powder where it lands.\n      const p = floor(ny) * W + floor(nx);\n      if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c FLOOR) dust[p] = min(1.5, dust[p] + 0.05);\n      kill(S, i);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.shim = cl(k[2], 1, 5);\n  S.air = cl(k[3], 0, 1);\n  // Open with the last round's cloud still in the air and the next puff a\n  // second and a half away.\n  if (!S.started) {\n    S.started = true;\n    start(S);\n    for (let i = 0; i \u003c 162; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.u > DOWN + PRESS + LIFT) start(S);\n  step(S, d * rate);\n}\n\n// Spreads a splat buffer over its neighbours, for a soft cloud.\nfunction blur(a, t, passes) {\n  for (let pass = 0; pass \u003c passes; pass++) {\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        t[i] = (a[i] * 2 + (x > 0 ? a[i - 1] : a[i]) + (x \u003c W - 1 ? a[i + 1] : a[i])) * 0.25;\n      }\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        a[i] = (t[i] * 2 + (y > 0 ? t[i - W] : t[i]) + (y \u003c H - 1 ? t[i + W] : t[i])) * 0.25;\n      }\n  }\n}\nfunction splat(a, x, y, w) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i, py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      a[py * W + px] += w * (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n    }\n}\n\n// The four LEDs beside one, as offsets into the colour buffer.\nconst NB = [-3, 3, -W * 3, W * 3];\n\n// The light comes low from the upper left, so the relief stands out, and sways\n// a little: the sheen and the glints move with it.\nconst LA = atan2(-0.65, -0.55), LZ = 0.5;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, hm = S.hm, den = S.den, sh = S.sh, col = S.col;\n  hsv(S.hue + 0.95, 0.5, 205, col, 0);\n  hsv(S.hue + 0.95, 0.07, 255, col, 3);\n  const la = LA + S.az, lx = cos(la), ly = sin(la);\n  const hl = hypot(lx * 0.894, ly * 0.894, 1.447), hx = (lx * 0.894) / hl, hy = (ly * 0.894) / hl, hz = 1.447 / hl;\n  const sheen = 0.1 + 0.45 * (S.shim - 1);\n  // The height of the surface, then the cloud's density and its shadow,\n  // thrown away from the light by each grain's height.\n  for (let i = 0; i \u003c N; i++) hm[i] = E[i] * S.wear[i] - 0.9 * S.dent[i] + 0.25 * S.dust[i];\n  den.fill(0);\n  sh.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const z = S.z[i];\n    splat(den, S.x[i], S.y[i], 0.55);\n    splat(sh, S.x[i] - lx * z * 0.8, S.y[i] - ly * z * 0.8, 0.35);\n  }\n  blur(den, S.tmp, 2);\n  blur(sh, S.tmp, 1);\n  // The puff's shadow, cast away from the light, softer the higher it is.\n  const sx = S.px - lx * S.pz * 0.8, sy = S.py - ly * S.pz * 0.8, soft = 1.5 + S.pz * 0.3, dark = 0.36 - 0.2 * (S.pz / ZTOP);\n  const sr = R * (1 + S.pz * 0.01);\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3;\n      const gx = (hm[y * W + min(W - 1, x + 1)] - hm[y * W + max(0, x - 1)]) * 1.6;\n      const gy = (hm[min(FLOOR - 1, y + 1) * W + x] - hm[max(0, y - 1) * W + x]) * 1.6;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1), lam = max(0, (-gx * lx - gy * ly + LZ) * inv) / LZ;\n      // Shimmer: a satin sheen on the slopes that face halfway between the\n      // light and the eye.\n      let sp = max(0, (-gx * hx - gy * hy + hz) * inv);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp = sp * sp * sp * sheen;\n      let v = (0.42 + 0.5 * lam) * (1 + GRAIN[i]);\n      // Fresh loose powder on top is paler; the pressed patch a touch deeper.\n      const du = min(1, S.dust[i]) * 0.3, pr = S.dent[i] * 0.1;\n      v *= 1 - pr;\n      const c = sh[i] * 1.4;\n      v *= 1 - (0.16 * c) / (1 + c);\n      const ddx = x + 0.5 - sx, ddy = y + 0.5 - sy, dd = ddx * ddx + ddy * ddy;\n      if (S.pz \u003c ZTOP * 0.99 && dd \u003c (sr + soft) ** 2) v *= 1 - dark * (1 - sstep(sr - soft, sr + soft, sqrt(dd)));\n      let r = col[0] * v + 250 * sp, g = col[1] * v + 240 * sp, b = col[2] * v + 225 * sp;\n      r += (col[3] * v - r) * du;\n      g += (col[4] * v - g) * du;\n      b += (col[5] * v - b) * du;\n      // The cloud in the air, lit and pale.\n      const e = den[i] * 1.8, a = min(0.9, e / (1 + e));\n      buf[q] = r + (col[3] - r) * a;\n      buf[q + 1] = g + (col[4] - g) * a;\n      buf[q + 2] = b + (col[5] - b) * a;\n    }\n  // The white band, and the gold line along its top with a highlight that\n  // slides along it as the light sways.\n  {\n    const gx = 32 + 110 * S.az;\n    for (let y = FLOOR; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const q = (y * W + x) * 3, gold = y === FLOOR ? 1 : y === FLOOR + 1 ? 0.35 : 0;\n        const hl = 0.8 + 0.45 * exp(-((x - gx) ** 2) / 50);\n        buf[q] = 222 + (240 * hl - 222) * gold;\n        buf[q + 1] = 216 + (178 * hl - 216) * gold;\n        buf[q + 2] = 208 + (70 * hl - 208) * gold;\n      }\n  }\n  // Mica pressed into the powder: a few LEDs, more with Shimmer, each glinting\n  // when the swaying light passes the angle of its face.\n  const lim = 0.004 * S.shim;\n  for (let k = 0; k \u003c MICA.length && TW[MICA[k]] \u003c lim; k++) {\n    const i = MICA[k];\n    const g = exp((cos(TW[i] * 1500 + S.az * 7) - 1) / 0.03) * (1 - min(1, S.dent[i]));\n    if (g \u003c 0.02) continue;\n    const q = i * 3, v = 230 * g;\n    buf[q] += v;\n    buf[q + 1] += v * 0.92;\n    buf[q + 2] += v * 0.8;\n  }\n  // Mica in the cloud: each flake turns and flashes as its face meets the light.\n  for (let i = 0; i \u003c S.n; i++) {\n    if (!S.mica[i]) continue;\n    const f = exp((cos(S.ph[i]) - 1) / 0.05), v = 40 + 260 * f;\n    const x = floor(S.x[i]), y = floor(S.y[i]);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= FLOOR - 1) continue;\n    const q = (y * W + x) * 3;\n    buf[q] += v;\n    buf[q + 1] += v * 0.95;\n    buf[q + 2] += v * 0.85;\n    // A flash spills a little onto the LEDs beside it, or it looks pinpricked.\n    if (f > 0.3)\n      for (const o of NB) {\n        buf[q + o] += v * 0.25;\n        buf[q + o + 1] += v * 0.24;\n        buf[q + o + 2] += v * 0.21;\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower."},{"name":"Shimmer","min":1,"max":5,"about":"How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica."},{"name":"Air","min":0,"max":1,"about":"How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself."}],"start":[0,2,1,0.06],"measures":{"motion":0.0756,"detail":0.0494,"edges":0.1592,"complexity":2.3434,"coverage":1,"colour":0.2039,"drift":0.0525},"knobResponse":[0.2504,0.0583,0.0484,0.0614]},{"slug":"lotion-ribbon","title":"Lotion Ribbon","family":"cosmetic","round":36,"note":"위에서 굵은 로션 줄기가 쏟아지며 가늘어지고, 닿는 자리에서 꿀처럼 똬리를 틀어 접힌 더미를 쌓아요. K3 은 로션의 무게라서 묽은 세럼은 작은 고리로 빨리 감기고 바디 버터는 25 LED 너비의 고리로 천천히 접혀요. K1 을 누르면 줄기가 끊기고, 더미가 가라앉은 뒤 새 줄기가 내려와요.","idea":"A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.","buttons":"K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.","code":"// ===== Patternflow pattern =====\n// Title:   Lotion Ribbon\n// Family:  cosmetic\n// Idea:    A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after the slow pour of body lotion in skincare films; the coiling follows liquid rope coiling (Neil Ribe, 2004) and the heap spreads as a viscous gravity current (Herbert Huppert, 1982)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Thick. How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up.\n// Knob 4: Gloss. At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim.\n// Buttons: K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.\n\nconst W = 64, H = 128, N = W * H;\n// The counter under the heap, one cell an LED: x 0..63, z from -28 at the\n// back to 36 at the front, below the bottom edge.\nconst GX = 64, GZ = 64, ZC = 28, NG = GX * GZ;\n// The heap's bulk flows on cells two LEDs square; the fresh folds lie on the\n// LED cells above it.\nconst BX = GX / 2, BZ = GZ / 2, NB = BX * BZ;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, pow, round, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[0] = r;\n  out[1] = g;\n  out[2] = b;\n}\n\n// The camera looks down at the counter from EL radians above level. A point\n// x across, Y up and z toward the eye lands on screen row FY - Y*CE + z*SE,\n// and lies Y*SE + z*CE toward the eye.\nconst EL = 0.5, CE = cos(EL), SE = sin(EL);\nconst FY = 113, AX = 32;\n// The spout is just above the top edge.\nconst YN = (FY + 4) / CE;\n// Gravity and the speed the lotion leaves the spout, in LEDs and seconds at\n// Speed 2, and the spout's radius at Thick 0.\nconst G = 8, V0 = 14, A0 = 5.6;\n// Coiling rate: the gravitational regime of liquid rope coiling,\n// Omega = CW * (g Q^3 / (nu a1^8))^(1/4), Q the flux, nu the viscosity and a1\n// the rope's radius where it lands.\nconst CW = 0.144;\n// The coil bends out from the stream's axis over HC coil radii of height,\n// winding a quarter turn ahead of the point where it lands.\nconst HC = 1.5;\n// Slump: the heap flows as a thin viscous layer, dh/dt = div(K h^3 grad h),\n// K = KS / nu. A fresh loop holds its fold TF * nu^(1/4) seconds before it\n// melts into the heap.\nconst KS = 3e-2, TF = 3;\n// The coil does not land on one circle: its centre wanders up to EC coil\n// radii off the axis, round and back about every PW seconds, so the loops\n// cross and fold over each other.\nconst EC = 0.7, PW = 5.3;\n// One pour lasts POUR seconds; after the tail lands the heap settles SETTLE\n// seconds, then sinks SINK LEDs a second while the next pour falls.\nconst POUR = 16, SETTLE = 0.8, SINK = 5;\n// Little swellings ride down the stream FB times a second, BA of the radius.\nconst FB = 1.1, BA = 0.05;\n// Opening hue: pink, not red.\nconst H0 = 0.9;\n\n// Light from the upper left and a little in front, and the eye, in world\n// axes and in the camera's (x right, y up the screen, z toward the eye).\nconst nrm = (v) => {\n  const l = Math.hypot(v[0], v[1], v[2]);\n  return [v[0] / l, v[1] / l, v[2] / l];\n};\nconst LW = nrm([-0.5, 0.75, 0.45]);\nconst VW = [0, SE, CE];\nconst HW = nrm([LW[0] + VW[0], LW[1] + VW[1], LW[2] + VW[2]]);\nconst toCam = (v) => [v[0], v[1] * CE - v[2] * SE, v[1] * SE + v[2] * CE];\nconst LC = toCam(LW), HCm = toCam(HW);\n// A tall strip light to the left of the eye: on the falling rope it draws a\n// highlight down its whole length.\nconst HS = nrm([-0.3, 0, 1]);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, thick: 0, gloss: 0, warm: false,\n    t: 0, phi: 0, tPour: 0,\n    // top: height of the rope's upper end (YN while the spout runs); tip: its\n    // lower end while a fresh pour is still falling, or -1 once it has landed.\n    top: YN, topV: 0, tip: -1, tipV: 0, cut: false, gone: false, wait: 0, sinking: false,\n    h: new Float32Array(NG), b: new Float32Array(NB), f: new Float32Array(NG), dh: new Float32Array(NB),\n    blur: new Float32Array(NG), tmp: new Float32Array(NG), hs: new Float32Array(NG), cc: new Float32Array(NG * 3), fl: new Float32Array(NG),\n    hdep: new Float32Array(N), col: new Float32Array(N * 3),\n    rdep: new Float32Array(N), rcov: new Float32Array(N), rcol: new Float32Array(N * 3),\n    bg: new Float32Array(N),\n    lit: [0, 0, 0], dark: [0, 0, 0], wall: [0, 0, 0], pearl: [0, 0, 0], c: [0, 0, 0], up: [0, 0, 0],\n    spec: new Float32Array(SPN), specKey: null,\n  };\n  const S = params.s;\n  // A soft glow on the wall behind the stream, falling off to near black in\n  // the top corners.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = (x + 0.5 - AX) / 26, dy = (y - 78) / 70;\n      S.bg[y * W + x] = 0.12 + 0.88 * exp(-dx * dx - dy * dy);\n    }\n}\n\n// The lotion's make-up at the current Thick.\nfunction lotion(S) {\n  const nu = pow(4, S.thick), a0 = A0 * pow(1.25, S.thick);\n  return { nu, a0, Q: PI * a0 * a0 * V0, K: KS / nu, tf: TF * pow(nu, 0.25) };\n}\n\n// Free fall from the spout: speed at height Y, and the radius that keeps the\n// mass flux pi a^2 v the same all the way down.\nconst speedAt = (Y) => sqrt(V0 * V0 + 2 * G * max(0, YN - Y));\nconst radiusAt = (a0, Y) => a0 * sqrt(V0 / speedAt(Y));\n\n// The heap's height under a point, bilinear.\nfunction heightAt(S, x, z) {\n  const u = cl(x - 0.5, 0, GX - 1.001), v = cl(z + ZC - 0.5, 0, GZ - 1.001);\n  const i = floor(u), j = floor(v), fu = u - i, fv = v - j, h = S.h, p = j * GX + i;\n  return (h[p] * (1 - fu) + h[p + 1] * fu) * (1 - fv) + (h[p + GX] * (1 - fu) + h[p + GX + 1] * fu) * fv;\n}\n\n// Where the rope lands now: the coil's radius and rate and the surface under it.\nfunction coil(S, L) {\n  const R0 = 8;\n  // The surface a little ahead of the contact, where the rope is about to lie.\n  let Yc = heightAt(S, AX + R0 * cos(S.phi + 0.3), R0 * sin(S.phi + 0.3));\n  const U1 = speedAt(Yc), a1 = radiusAt(L.a0, Yc);\n  const om = CW * pow((G * L.Q * L.Q * L.Q) / (L.nu * pow(a1, 8)), 0.25);\n  const R = U1 / om, ps = (2 * PI * S.t) / PW, e = EC * R * (0.6 + 0.4 * sin(ps * 0.37 + 1));\n  const cx = AX + e * cos(ps), cz = e * sin(ps * 1.3);\n  Yc = heightAt(S, cx + R * cos(S.phi + a1 / R), cz + R * sin(S.phi + a1 / R));\n  return { Yc, U1, a1, om, R, cx, cz };\n}\n\n// Lay a short piece of rope at (x, z): its volume pi a^2 ds spread over the\n// cells under it, heaped in the middle.\nfunction deposit(S, x, z, a, ds) {\n  const h = S.f, vol = PI * a * a * ds;\n  const i0 = max(0, floor(x - a - 0.5)), i1 = min(GX - 1, ceil(x + a - 0.5));\n  const j0 = max(0, floor(z + ZC - a - 0.5)), j1 = min(GZ - 1, ceil(z + ZC + a - 0.5));\n  let sum = 0;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) sum += q;\n    }\n  if (sum \u003c= 0) return;\n  const k = vol / sum;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) h[j * GX + i] += k * q;\n    }\n}\n\n// The heap flows: flux K h^3 times the slope across every face between two\n// bulk cells, none out through the counter's edges, so no lotion is lost.\nfunction slump(S, L, dt) {\n  const h = S.b, d = S.dh, k = L.K / 4;\n  let left = dt;\n  while (left > 1e-6) {\n    let hm = 0;\n    for (let p = 0; p \u003c NB; p++) if (h[p] > hm) hm = h[p];\n    const st = min(left, 0.2 / (k * hm * hm * hm + 1e-6));\n    d.fill(0);\n    for (let j = 0; j \u003c BZ; j++)\n      for (let i = 0; i \u003c BX; i++) {\n        const p = j * BX + i, a = h[p];\n        if (i \u003c BX - 1) {\n          const b = h[p + 1], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + 1] += f;\n        }\n        if (j \u003c BZ - 1) {\n          const b = h[p + BX], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + BX] += f;\n        }\n      }\n    for (let p = 0; p \u003c NB; p++) h[p] = max(0, h[p] + d[p] * st);\n    left -= st;\n  }\n}\n\n// The bulk under an LED cell, bilinear between bulk cell centres.\nfunction bulkAt(b, i, j) {\n  const u = cl(i * 0.5 - 0.25, 0, BX - 1.001), v = cl(j * 0.5 - 0.25, 0, BZ - 1.001);\n  const I = floor(u), J = floor(v), fu = u - I, fv = v - J, p = J * BX + I;\n  return (b[p] * (1 - fu) + b[p + 1] * fu) * (1 - fv) + (b[p + BX] * (1 - fu) + b[p + BX + 1] * fu) * fv;\n}\n\nfunction breakStream(S) {\n  if (S.cut || S.gone || S.tip >= 0) return;\n  S.cut = true;\n  S.topV = V0;\n}\n\nfunction step(S, dt) {\n  const L = lotion(S);\n  S.t += dt;\n  const C = coil(S, L);\n  // A fresh pour falls until its front reaches the heap.\n  if (S.tip >= 0) {\n    S.tipV += G * dt;\n    S.tip -= S.tipV * dt;\n    if (S.tip \u003c= C.Yc + C.a1) S.tip = -1;\n  }\n  if (!S.cut && !S.gone) {\n    S.tPour += dt;\n    if (S.tPour > POUR) breakStream(S);\n  }\n  // A broken stream's tail falls in.\n  if (S.cut) {\n    S.topV += G * dt;\n    S.top -= S.topV * dt;\n    if (S.top \u003c= C.Yc + C.a1) {\n      S.cut = false;\n      S.gone = true;\n      S.wait = SETTLE;\n    }\n  }\n  if (S.gone) {\n    S.wait -= dt;\n    if (S.wait \u003c= 0 && !S.sinking) {\n      // The heap sinks away and the next pour starts from the spout.\n      S.sinking = true;\n      S.gone = false;\n      S.top = YN;\n      S.tip = YN;\n      S.tipV = V0;\n      S.tPour = 0;\n    }\n  }\n  const { b, f } = S;\n  const toBulk = (p) => ((p / GX) >> 1) * BX + ((p % GX) >> 1);\n  if (S.sinking) {\n    let any = false;\n    for (let p = 0; p \u003c NG; p++) {\n      b[toBulk(p)] += f[p] / 4;\n      f[p] = 0;\n    }\n    for (let p = 0; p \u003c NB; p++) {\n      b[p] = max(0, b[p] - SINK * dt);\n      if (b[p] > 0) any = true;\n    }\n    if (!any) S.sinking = false;\n  }\n  // The rope lays itself down along the coil at the speed it arrives, so the\n  // contact runs round at Omega = U1 / R.\n  if (!S.gone && S.tip \u003c 0) {\n    const dphi = C.om * dt, n = max(1, ceil((C.R * dphi) / 0.5));\n    for (let k = 0; k \u003c n; k++) {\n      const ph = S.phi + (dphi * (k + 0.5)) / n;\n      deposit(S, C.cx + C.R * cos(ph), C.cz + C.R * sin(ph), C.a1, (C.R * dphi) / n);\n    }\n    S.phi += dphi;\n  }\n  // Loops melt into the heap, which flows.\n  const m = 1 - exp(-dt / L.tf);\n  for (let p = 0; p \u003c NG; p++) {\n    const v = f[p] * m;\n    f[p] -= v;\n    b[toBulk(p)] += v / 4;\n  }\n  slump(S, L, dt);\n  for (let j = 0, p = 0; j \u003c GZ; j++) for (let i = 0; i \u003c GX; i++, p++) S.h[p] = bulkAt(b, i, j) + f[p];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.thick = cl(k[2], -1, 1);\n  S.gloss = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open six seconds into a pour.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breakStream(S);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours for the hue: the lit lotion, its shadow side and the wall.\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime go brown or olive when deep: there the lotion is\n  // paled to cream and the wall taken down almost to black.\n  const warm = sm(0.0, 0.08, hh) * (1 - sm(0.22, 0.32, hh));\n  // A wetter finish is a little deeper in colour.\n  const wet = 0.5 + 0.5 * S.gloss;\n  hsv(h, (0.38 + 0.14 * wet) * (1 - 0.4 * warm), 0.8 - 0.08 * wet + 0.06 * warm, S.lit);\n  hsv(h + 0.015, (0.6 + 0.2 * wet) * (1 - 0.35 * warm), 0.4 - 0.1 * wet + 0.2 * warm, S.dark);\n  hsv(h - 0.04, 0.85 - 0.5 * warm, 0.2 - 0.15 * warm, S.wall);\n  // The pearl in the lotion glints a cooler shade at grazing angles.\n  hsv(h - 0.12, 0.45 - 0.15 * warm, 1, S.pearl);\n}\n\n// The highlight against how squarely a surface faces the half vector,\n// tabled once per Gloss. Satin at -1: a broad dim sheen; wet at 1: a narrow\n// hot highlight.\nconst SPN = 1024;\nfunction specTable(S) {\n  if (S.specKey === S.gloss) return;\n  S.specKey = S.gloss;\n  const g = S.gloss, P = 28 * pow(5, g), KSp = 0.6 + 0.35 * g;\n  for (let i = 0; i \u003c SPN; i++) {\n    const n = i / (SPN - 1), n2 = n * n;\n    S.spec[i] = KSp * pow(n, P) + 0.16 * max(0, -g) * n2 * n2;\n  }\n}\n\nfunction shade(S, nx, ny, nz, vx, vy, vz, lx, ly, lz, hx, hy, hz, strip, ao, out) {\n  // A wet finish has a bright rim.\n  const KR = 0.25 + 0.3 * max(0, S.gloss);\n  const nl = nx * lx + ny * ly + nz * lz;\n  const dif = cl((nl + 0.25) / 1.25, 0, 1);\n  let nh = max(0, nx * hx + ny * hy + nz * hz);\n  // The strip light, seen in the rope: only the turn of the rope across\n  // matters, not along it.\n  if (strip) {\n    const l = sqrt(nx * nx + nz * nz) + 1e-6;\n    nh = max(nh, ((nx * HS[0] + nz * HS[2]) / l) * (0.75 + 0.25 * l));\n  }\n  const sp = S.spec[round(cl(nh, 0, 1) * (SPN - 1))], e = 1 - cl(nx * vx + ny * vy + nz * vz, 0, 1);\n  const rim = KR * e * e * e;\n  const lit = S.lit, dk = S.dark, pe = S.pearl;\n  for (let c = 0; c \u003c 3; c++) out[c] = (dk[c] + (lit[c] - dk[c]) * dif) * ao + sp + rim * pe[c];\n}\n\n// Highlights roll off softly instead of clipping: a table over 0..2.\nconst TONE = new Uint8Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) TONE[i] = round(min(255, 319 * (1 - exp((-1.6 * 2 * i) / 1024))));\nconst tone = (v) => TONE[v \u003c= 0 ? 0 : v >= 2 ? 1024 : (v * 512) | 0];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  specTable(S);\n  const L = lotion(S), C = coil(S, L);\n  const { h, hdep, col, rdep, rcov, rcol, bg, wall, c, blur, tmp } = S;\n  // The heap's height blurred over 5 cells, for its shadow on the counter:\n  // a running sum along x, then along z.\n  for (let j = 0; j \u003c GZ; j++) {\n    const o = j * GX;\n    let a = h[o] * 3 + h[o + 1] + h[o + 2];\n    for (let i = 0; i \u003c GX; i++) {\n      tmp[o + i] = a * 0.2;\n      a += h[o + min(GX - 1, i + 3)] - h[o + max(0, i - 2)];\n    }\n  }\n  for (let i = 0; i \u003c GX; i++) {\n    let a = tmp[i] * 3 + tmp[GX + i] + tmp[2 * GX + i];\n    for (let j = 0; j \u003c GZ; j++) {\n      blur[j * GX + i] = a * 0.2;\n      a += tmp[min(GZ - 1, j + 3) * GX + i] - tmp[max(0, j - 2) * GX + i];\n    }\n  }\n  // Heights smoothed 1-2-1 for the normals, so the steep rim of the heap\n  // does not break into a comb along the grid.\n  const hs = S.hs;\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, l = i > 0 ? p - 1 : p, r = i \u003c GX - 1 ? p + 1 : p;\n      tmp[p] = (h[l] + 2 * h[p] + h[r]) * 0.25;\n    }\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, b0 = j > 0 ? p - GX : p, f0 = j \u003c GZ - 1 ? p + GX : p;\n      hs[p] = (tmp[b0] + 2 * tmp[p] + tmp[f0]) * 0.25;\n    }\n  // The wall.\n  for (let p = 0; p \u003c N; p++) {\n    const v = bg[p];\n    col[p * 3] = wall[0] * v;\n    col[p * 3 + 1] = wall[1] * v;\n    col[p * 3 + 2] = wall[2] * v;\n    hdep[p] = -1e9;\n    rdep[p] = -1e9;\n    rcov[p] = 0;\n  }\n  // Each cell's colour: the lotion lit from its normal, valleys between\n  // folds a little darker; and the bare counter, a satin shelf a little\n  // lighter than the wall, in the shade of the heap beside it.\n  const cc = S.cc, up = S.up;\n  shade(S, 0, 1, 0, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1, up);\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, z = j + 0.5 - ZC;\n      S.fl[p] = (0.55 + 0.25 * sm(-28, 28, z)) * (1 - 0.6 * sm(0, 4, blur[p]));\n      if (hs[p] \u003c 1e-3) {\n        cc[p * 3] = up[0];\n        cc[p * 3 + 1] = up[1];\n        cc[p * 3 + 2] = up[2];\n        continue;\n      }\n      const hl = hs[p - (i > 0 ? 1 : 0)], hr = hs[p + (i \u003c GX - 1 ? 1 : 0)];\n      const hb = hs[p - (j > 0 ? GX : 0)], hf = hs[p + (j \u003c GZ - 1 ? GX : 0)];\n      const gx = (hr - hl) * 0.5, gz = (hf - hb) * 0.5, inv = 1 / sqrt(gx * gx + 1 + gz * gz);\n      const lap = hl + hr + hb + hf - 4 * hs[p];\n      shade(S, -gx * inv, inv, -gz * inv, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1 - 0.3 * cl(lap * 0.25, 0, 1), c);\n      cc[p * 3] = c[0];\n      cc[p * 3 + 1] = c[1];\n      cc[p * 3 + 2] = c[2];\n    }\n  // The counter and the heap, column by column from the front back in half\n  // cells, height and colour taken between cell centres, each sample filling\n  // the rows its top rises above the samples in front of it.\n  const FL = S.fl;\n  for (let i = 0; i \u003c GX; i++) {\n    let yb = H;\n    for (let v = GZ - 1; v >= 0; v -= 0.5) {\n      const j = floor(v), fv = v - j, p = j * GX + i, p2 = j \u003c GZ - 1 ? p + GX : p;\n      const Yv = h[p] + (h[p2] - h[p]) * fv, z = v + 0.5 - ZC;\n      const y0 = ceil(FY - Yv * CE + z * SE - 0.5);\n      if (y0 >= yb) continue;\n      // Thin lotion lets the counter show through.\n      const film = sm(0.05, 0.9, Yv), fl = (FL[p] + (FL[p2] - FL[p]) * fv) * (1 - film);\n      const r = (cc[p * 3] + (cc[p2 * 3] - cc[p * 3]) * fv) * film + wall[0] * fl;\n      const g = (cc[p * 3 + 1] + (cc[p2 * 3 + 1] - cc[p * 3 + 1]) * fv) * film + wall[1] * fl;\n      const b = (cc[p * 3 + 2] + (cc[p2 * 3 + 2] - cc[p * 3 + 2]) * fv) * film + wall[2] * fl;\n      const dep = Yv * SE + z * CE;\n      for (let y = max(0, y0); y \u003c yb; y++) {\n        const q = y * W + i;\n        col[q * 3] = r;\n        col[q * 3 + 1] = g;\n        col[q * 3 + 2] = b;\n        hdep[q] = dep;\n      }\n      yb = y0;\n    }\n  }\n  // The rope: a chain of balls half an LED apart, each a sphere, the nearest\n  // surface's normal kept at every LED.\n  const ropeOn = !S.gone;\n  if (ropeOn) {\n    const t = S.t, top = min(S.top, YN + 3);\n    const landed = S.tip \u003c 0;\n    const coilTop = C.Yc + C.a1 + HC * C.R;\n    const low = landed ? coilTop : S.tip;\n    const ball = (x, Y, z, a) => {\n      if (a \u003c 0.3) return;\n      const sx = x, sy = FY - Y * CE + z * SE, dd = Y * SE + z * CE;\n      const x0 = max(0, floor(sx - a - 1)), x1 = min(W - 1, ceil(sx + a)), y0 = max(0, floor(sy - a - 1)), y1 = min(H - 1, ceil(sy + a));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let xx = x0; xx \u003c= x1; xx++) {\n          const dx = xx + 0.5 - sx, dy = y + 0.5 - sy, r = sqrt(dx * dx + dy * dy);\n          const cov = cl(a - r + 0.5, 0, 1);\n          if (cov \u003c= 0) continue;\n          const q = y * W + xx, uz = sqrt(max(0, 1 - (r * r) / (a * a)));\n          const depth = dd + a * uz;\n          if (cov \u003c rcov[q] - 0.02 || (cov \u003c= rcov[q] + 0.02 && depth \u003c= rdep[q])) continue;\n          const m = 1 / max(a, r + 1e-6);\n          rcov[q] = cov;\n          rdep[q] = depth;\n          rcol[q * 3] = dx * m;\n          rcol[q * 3 + 1] = -dy * m;\n          rcol[q * 3 + 2] = uz;\n        }\n    };\n    // The falling stream, with swellings that left the spout at a steady\n    // beat and stretch apart as the lotion speeds up.\n    for (let Y = top; Y > low; Y -= 0.5) {\n      const v = speedAt(Y), age = (v - V0) / G;\n      let a = radiusAt(L.a0, Y) * (1 + BA * sin(2 * PI * FB * (t - age)));\n      // A broken stream's upper end narrows to a rounded tail.\n      if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n      ball(AX, Y, 0, a);\n    }\n    if (!landed) ball(AX, S.tip, 0, radiusAt(L.a0, S.tip) * 1.15);\n    else {\n      // The coil: from the axis at its top it bends out to radius R, winding\n      // a quarter turn as it comes down level onto the heap.\n      const len = HC * C.R + 2 * C.R, n = ceil(len / 0.5);\n      for (let k = n; k >= 0; k--) {\n        const s = k / n, Y = C.Yc + C.a1 + HC * C.R * s * s;\n        if (Y > top) continue;\n        const r = C.R * (1 - s * s) * (1 - s * s), th = S.phi + s * PI * 0.5, e = (1 - s) * (1 - s);\n        let a = radiusAt(L.a0, Y);\n        if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n        ball(AX + (C.cx - AX) * e + r * cos(th), Y, C.cz * e + r * sin(th), a);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let r = col[q * 3], g = col[q * 3 + 1], b = col[q * 3 + 2];\n      const cv = rcov[q];\n      if (cv > 0 && rdep[q] > hdep[q]) {\n        // The rope, lit from the normal its nearest ball left here.\n        shade(S, rcol[q * 3], rcol[q * 3 + 1], rcol[q * 3 + 2], 0, 0, 1, LC[0], LC[1], LC[2], HCm[0], HCm[1], HCm[2], true, 1, c);\n        r += (c[0] - r) * cv;\n        g += (c[1] - g) * cv;\n        b += (c[2] - b) * cv;\n      }\n      display.setPixel(x, y, tone(r), tone(g), tone(b));\n    }\n}\n","layer":{"id":"layer-lotion-ribbon","type":"code","name":"lotion-ribbon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lotion Ribbon\n// Family:  cosmetic\n// Idea:    A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after the slow pour of body lotion in skincare films; the coiling follows liquid rope coiling (Neil Ribe, 2004) and the heap spreads as a viscous gravity current (Herbert Huppert, 1982)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Thick. How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up.\n// Knob 4: Gloss. At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim.\n// Buttons: K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.\n\nconst W = 64, H = 128, N = W * H;\n// The counter under the heap, one cell an LED: x 0..63, z from -28 at the\n// back to 36 at the front, below the bottom edge.\nconst GX = 64, GZ = 64, ZC = 28, NG = GX * GZ;\n// The heap's bulk flows on cells two LEDs square; the fresh folds lie on the\n// LED cells above it.\nconst BX = GX / 2, BZ = GZ / 2, NB = BX * BZ;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, pow, round, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[0] = r;\n  out[1] = g;\n  out[2] = b;\n}\n\n// The camera looks down at the counter from EL radians above level. A point\n// x across, Y up and z toward the eye lands on screen row FY - Y*CE + z*SE,\n// and lies Y*SE + z*CE toward the eye.\nconst EL = 0.5, CE = cos(EL), SE = sin(EL);\nconst FY = 113, AX = 32;\n// The spout is just above the top edge.\nconst YN = (FY + 4) / CE;\n// Gravity and the speed the lotion leaves the spout, in LEDs and seconds at\n// Speed 2, and the spout's radius at Thick 0.\nconst G = 8, V0 = 14, A0 = 5.6;\n// Coiling rate: the gravitational regime of liquid rope coiling,\n// Omega = CW * (g Q^3 / (nu a1^8))^(1/4), Q the flux, nu the viscosity and a1\n// the rope's radius where it lands.\nconst CW = 0.144;\n// The coil bends out from the stream's axis over HC coil radii of height,\n// winding a quarter turn ahead of the point where it lands.\nconst HC = 1.5;\n// Slump: the heap flows as a thin viscous layer, dh/dt = div(K h^3 grad h),\n// K = KS / nu. A fresh loop holds its fold TF * nu^(1/4) seconds before it\n// melts into the heap.\nconst KS = 3e-2, TF = 3;\n// The coil does not land on one circle: its centre wanders up to EC coil\n// radii off the axis, round and back about every PW seconds, so the loops\n// cross and fold over each other.\nconst EC = 0.7, PW = 5.3;\n// One pour lasts POUR seconds; after the tail lands the heap settles SETTLE\n// seconds, then sinks SINK LEDs a second while the next pour falls.\nconst POUR = 16, SETTLE = 0.8, SINK = 5;\n// Little swellings ride down the stream FB times a second, BA of the radius.\nconst FB = 1.1, BA = 0.05;\n// Opening hue: pink, not red.\nconst H0 = 0.9;\n\n// Light from the upper left and a little in front, and the eye, in world\n// axes and in the camera's (x right, y up the screen, z toward the eye).\nconst nrm = (v) => {\n  const l = Math.hypot(v[0], v[1], v[2]);\n  return [v[0] / l, v[1] / l, v[2] / l];\n};\nconst LW = nrm([-0.5, 0.75, 0.45]);\nconst VW = [0, SE, CE];\nconst HW = nrm([LW[0] + VW[0], LW[1] + VW[1], LW[2] + VW[2]]);\nconst toCam = (v) => [v[0], v[1] * CE - v[2] * SE, v[1] * SE + v[2] * CE];\nconst LC = toCam(LW), HCm = toCam(HW);\n// A tall strip light to the left of the eye: on the falling rope it draws a\n// highlight down its whole length.\nconst HS = nrm([-0.3, 0, 1]);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, thick: 0, gloss: 0, warm: false,\n    t: 0, phi: 0, tPour: 0,\n    // top: height of the rope's upper end (YN while the spout runs); tip: its\n    // lower end while a fresh pour is still falling, or -1 once it has landed.\n    top: YN, topV: 0, tip: -1, tipV: 0, cut: false, gone: false, wait: 0, sinking: false,\n    h: new Float32Array(NG), b: new Float32Array(NB), f: new Float32Array(NG), dh: new Float32Array(NB),\n    blur: new Float32Array(NG), tmp: new Float32Array(NG), hs: new Float32Array(NG), cc: new Float32Array(NG * 3), fl: new Float32Array(NG),\n    hdep: new Float32Array(N), col: new Float32Array(N * 3),\n    rdep: new Float32Array(N), rcov: new Float32Array(N), rcol: new Float32Array(N * 3),\n    bg: new Float32Array(N),\n    lit: [0, 0, 0], dark: [0, 0, 0], wall: [0, 0, 0], pearl: [0, 0, 0], c: [0, 0, 0], up: [0, 0, 0],\n    spec: new Float32Array(SPN), specKey: null,\n  };\n  const S = params.s;\n  // A soft glow on the wall behind the stream, falling off to near black in\n  // the top corners.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = (x + 0.5 - AX) / 26, dy = (y - 78) / 70;\n      S.bg[y * W + x] = 0.12 + 0.88 * exp(-dx * dx - dy * dy);\n    }\n}\n\n// The lotion's make-up at the current Thick.\nfunction lotion(S) {\n  const nu = pow(4, S.thick), a0 = A0 * pow(1.25, S.thick);\n  return { nu, a0, Q: PI * a0 * a0 * V0, K: KS / nu, tf: TF * pow(nu, 0.25) };\n}\n\n// Free fall from the spout: speed at height Y, and the radius that keeps the\n// mass flux pi a^2 v the same all the way down.\nconst speedAt = (Y) => sqrt(V0 * V0 + 2 * G * max(0, YN - Y));\nconst radiusAt = (a0, Y) => a0 * sqrt(V0 / speedAt(Y));\n\n// The heap's height under a point, bilinear.\nfunction heightAt(S, x, z) {\n  const u = cl(x - 0.5, 0, GX - 1.001), v = cl(z + ZC - 0.5, 0, GZ - 1.001);\n  const i = floor(u), j = floor(v), fu = u - i, fv = v - j, h = S.h, p = j * GX + i;\n  return (h[p] * (1 - fu) + h[p + 1] * fu) * (1 - fv) + (h[p + GX] * (1 - fu) + h[p + GX + 1] * fu) * fv;\n}\n\n// Where the rope lands now: the coil's radius and rate and the surface under it.\nfunction coil(S, L) {\n  const R0 = 8;\n  // The surface a little ahead of the contact, where the rope is about to lie.\n  let Yc = heightAt(S, AX + R0 * cos(S.phi + 0.3), R0 * sin(S.phi + 0.3));\n  const U1 = speedAt(Yc), a1 = radiusAt(L.a0, Yc);\n  const om = CW * pow((G * L.Q * L.Q * L.Q) / (L.nu * pow(a1, 8)), 0.25);\n  const R = U1 / om, ps = (2 * PI * S.t) / PW, e = EC * R * (0.6 + 0.4 * sin(ps * 0.37 + 1));\n  const cx = AX + e * cos(ps), cz = e * sin(ps * 1.3);\n  Yc = heightAt(S, cx + R * cos(S.phi + a1 / R), cz + R * sin(S.phi + a1 / R));\n  return { Yc, U1, a1, om, R, cx, cz };\n}\n\n// Lay a short piece of rope at (x, z): its volume pi a^2 ds spread over the\n// cells under it, heaped in the middle.\nfunction deposit(S, x, z, a, ds) {\n  const h = S.f, vol = PI * a * a * ds;\n  const i0 = max(0, floor(x - a - 0.5)), i1 = min(GX - 1, ceil(x + a - 0.5));\n  const j0 = max(0, floor(z + ZC - a - 0.5)), j1 = min(GZ - 1, ceil(z + ZC + a - 0.5));\n  let sum = 0;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) sum += q;\n    }\n  if (sum \u003c= 0) return;\n  const k = vol / sum;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) h[j * GX + i] += k * q;\n    }\n}\n\n// The heap flows: flux K h^3 times the slope across every face between two\n// bulk cells, none out through the counter's edges, so no lotion is lost.\nfunction slump(S, L, dt) {\n  const h = S.b, d = S.dh, k = L.K / 4;\n  let left = dt;\n  while (left > 1e-6) {\n    let hm = 0;\n    for (let p = 0; p \u003c NB; p++) if (h[p] > hm) hm = h[p];\n    const st = min(left, 0.2 / (k * hm * hm * hm + 1e-6));\n    d.fill(0);\n    for (let j = 0; j \u003c BZ; j++)\n      for (let i = 0; i \u003c BX; i++) {\n        const p = j * BX + i, a = h[p];\n        if (i \u003c BX - 1) {\n          const b = h[p + 1], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + 1] += f;\n        }\n        if (j \u003c BZ - 1) {\n          const b = h[p + BX], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + BX] += f;\n        }\n      }\n    for (let p = 0; p \u003c NB; p++) h[p] = max(0, h[p] + d[p] * st);\n    left -= st;\n  }\n}\n\n// The bulk under an LED cell, bilinear between bulk cell centres.\nfunction bulkAt(b, i, j) {\n  const u = cl(i * 0.5 - 0.25, 0, BX - 1.001), v = cl(j * 0.5 - 0.25, 0, BZ - 1.001);\n  const I = floor(u), J = floor(v), fu = u - I, fv = v - J, p = J * BX + I;\n  return (b[p] * (1 - fu) + b[p + 1] * fu) * (1 - fv) + (b[p + BX] * (1 - fu) + b[p + BX + 1] * fu) * fv;\n}\n\nfunction breakStream(S) {\n  if (S.cut || S.gone || S.tip >= 0) return;\n  S.cut = true;\n  S.topV = V0;\n}\n\nfunction step(S, dt) {\n  const L = lotion(S);\n  S.t += dt;\n  const C = coil(S, L);\n  // A fresh pour falls until its front reaches the heap.\n  if (S.tip >= 0) {\n    S.tipV += G * dt;\n    S.tip -= S.tipV * dt;\n    if (S.tip \u003c= C.Yc + C.a1) S.tip = -1;\n  }\n  if (!S.cut && !S.gone) {\n    S.tPour += dt;\n    if (S.tPour > POUR) breakStream(S);\n  }\n  // A broken stream's tail falls in.\n  if (S.cut) {\n    S.topV += G * dt;\n    S.top -= S.topV * dt;\n    if (S.top \u003c= C.Yc + C.a1) {\n      S.cut = false;\n      S.gone = true;\n      S.wait = SETTLE;\n    }\n  }\n  if (S.gone) {\n    S.wait -= dt;\n    if (S.wait \u003c= 0 && !S.sinking) {\n      // The heap sinks away and the next pour starts from the spout.\n      S.sinking = true;\n      S.gone = false;\n      S.top = YN;\n      S.tip = YN;\n      S.tipV = V0;\n      S.tPour = 0;\n    }\n  }\n  const { b, f } = S;\n  const toBulk = (p) => ((p / GX) >> 1) * BX + ((p % GX) >> 1);\n  if (S.sinking) {\n    let any = false;\n    for (let p = 0; p \u003c NG; p++) {\n      b[toBulk(p)] += f[p] / 4;\n      f[p] = 0;\n    }\n    for (let p = 0; p \u003c NB; p++) {\n      b[p] = max(0, b[p] - SINK * dt);\n      if (b[p] > 0) any = true;\n    }\n    if (!any) S.sinking = false;\n  }\n  // The rope lays itself down along the coil at the speed it arrives, so the\n  // contact runs round at Omega = U1 / R.\n  if (!S.gone && S.tip \u003c 0) {\n    const dphi = C.om * dt, n = max(1, ceil((C.R * dphi) / 0.5));\n    for (let k = 0; k \u003c n; k++) {\n      const ph = S.phi + (dphi * (k + 0.5)) / n;\n      deposit(S, C.cx + C.R * cos(ph), C.cz + C.R * sin(ph), C.a1, (C.R * dphi) / n);\n    }\n    S.phi += dphi;\n  }\n  // Loops melt into the heap, which flows.\n  const m = 1 - exp(-dt / L.tf);\n  for (let p = 0; p \u003c NG; p++) {\n    const v = f[p] * m;\n    f[p] -= v;\n    b[toBulk(p)] += v / 4;\n  }\n  slump(S, L, dt);\n  for (let j = 0, p = 0; j \u003c GZ; j++) for (let i = 0; i \u003c GX; i++, p++) S.h[p] = bulkAt(b, i, j) + f[p];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.thick = cl(k[2], -1, 1);\n  S.gloss = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open six seconds into a pour.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breakStream(S);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours for the hue: the lit lotion, its shadow side and the wall.\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime go brown or olive when deep: there the lotion is\n  // paled to cream and the wall taken down almost to black.\n  const warm = sm(0.0, 0.08, hh) * (1 - sm(0.22, 0.32, hh));\n  // A wetter finish is a little deeper in colour.\n  const wet = 0.5 + 0.5 * S.gloss;\n  hsv(h, (0.38 + 0.14 * wet) * (1 - 0.4 * warm), 0.8 - 0.08 * wet + 0.06 * warm, S.lit);\n  hsv(h + 0.015, (0.6 + 0.2 * wet) * (1 - 0.35 * warm), 0.4 - 0.1 * wet + 0.2 * warm, S.dark);\n  hsv(h - 0.04, 0.85 - 0.5 * warm, 0.2 - 0.15 * warm, S.wall);\n  // The pearl in the lotion glints a cooler shade at grazing angles.\n  hsv(h - 0.12, 0.45 - 0.15 * warm, 1, S.pearl);\n}\n\n// The highlight against how squarely a surface faces the half vector,\n// tabled once per Gloss. Satin at -1: a broad dim sheen; wet at 1: a narrow\n// hot highlight.\nconst SPN = 1024;\nfunction specTable(S) {\n  if (S.specKey === S.gloss) return;\n  S.specKey = S.gloss;\n  const g = S.gloss, P = 28 * pow(5, g), KSp = 0.6 + 0.35 * g;\n  for (let i = 0; i \u003c SPN; i++) {\n    const n = i / (SPN - 1), n2 = n * n;\n    S.spec[i] = KSp * pow(n, P) + 0.16 * max(0, -g) * n2 * n2;\n  }\n}\n\nfunction shade(S, nx, ny, nz, vx, vy, vz, lx, ly, lz, hx, hy, hz, strip, ao, out) {\n  // A wet finish has a bright rim.\n  const KR = 0.25 + 0.3 * max(0, S.gloss);\n  const nl = nx * lx + ny * ly + nz * lz;\n  const dif = cl((nl + 0.25) / 1.25, 0, 1);\n  let nh = max(0, nx * hx + ny * hy + nz * hz);\n  // The strip light, seen in the rope: only the turn of the rope across\n  // matters, not along it.\n  if (strip) {\n    const l = sqrt(nx * nx + nz * nz) + 1e-6;\n    nh = max(nh, ((nx * HS[0] + nz * HS[2]) / l) * (0.75 + 0.25 * l));\n  }\n  const sp = S.spec[round(cl(nh, 0, 1) * (SPN - 1))], e = 1 - cl(nx * vx + ny * vy + nz * vz, 0, 1);\n  const rim = KR * e * e * e;\n  const lit = S.lit, dk = S.dark, pe = S.pearl;\n  for (let c = 0; c \u003c 3; c++) out[c] = (dk[c] + (lit[c] - dk[c]) * dif) * ao + sp + rim * pe[c];\n}\n\n// Highlights roll off softly instead of clipping: a table over 0..2.\nconst TONE = new Uint8Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) TONE[i] = round(min(255, 319 * (1 - exp((-1.6 * 2 * i) / 1024))));\nconst tone = (v) => TONE[v \u003c= 0 ? 0 : v >= 2 ? 1024 : (v * 512) | 0];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  specTable(S);\n  const L = lotion(S), C = coil(S, L);\n  const { h, hdep, col, rdep, rcov, rcol, bg, wall, c, blur, tmp } = S;\n  // The heap's height blurred over 5 cells, for its shadow on the counter:\n  // a running sum along x, then along z.\n  for (let j = 0; j \u003c GZ; j++) {\n    const o = j * GX;\n    let a = h[o] * 3 + h[o + 1] + h[o + 2];\n    for (let i = 0; i \u003c GX; i++) {\n      tmp[o + i] = a * 0.2;\n      a += h[o + min(GX - 1, i + 3)] - h[o + max(0, i - 2)];\n    }\n  }\n  for (let i = 0; i \u003c GX; i++) {\n    let a = tmp[i] * 3 + tmp[GX + i] + tmp[2 * GX + i];\n    for (let j = 0; j \u003c GZ; j++) {\n      blur[j * GX + i] = a * 0.2;\n      a += tmp[min(GZ - 1, j + 3) * GX + i] - tmp[max(0, j - 2) * GX + i];\n    }\n  }\n  // Heights smoothed 1-2-1 for the normals, so the steep rim of the heap\n  // does not break into a comb along the grid.\n  const hs = S.hs;\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, l = i > 0 ? p - 1 : p, r = i \u003c GX - 1 ? p + 1 : p;\n      tmp[p] = (h[l] + 2 * h[p] + h[r]) * 0.25;\n    }\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, b0 = j > 0 ? p - GX : p, f0 = j \u003c GZ - 1 ? p + GX : p;\n      hs[p] = (tmp[b0] + 2 * tmp[p] + tmp[f0]) * 0.25;\n    }\n  // The wall.\n  for (let p = 0; p \u003c N; p++) {\n    const v = bg[p];\n    col[p * 3] = wall[0] * v;\n    col[p * 3 + 1] = wall[1] * v;\n    col[p * 3 + 2] = wall[2] * v;\n    hdep[p] = -1e9;\n    rdep[p] = -1e9;\n    rcov[p] = 0;\n  }\n  // Each cell's colour: the lotion lit from its normal, valleys between\n  // folds a little darker; and the bare counter, a satin shelf a little\n  // lighter than the wall, in the shade of the heap beside it.\n  const cc = S.cc, up = S.up;\n  shade(S, 0, 1, 0, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1, up);\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, z = j + 0.5 - ZC;\n      S.fl[p] = (0.55 + 0.25 * sm(-28, 28, z)) * (1 - 0.6 * sm(0, 4, blur[p]));\n      if (hs[p] \u003c 1e-3) {\n        cc[p * 3] = up[0];\n        cc[p * 3 + 1] = up[1];\n        cc[p * 3 + 2] = up[2];\n        continue;\n      }\n      const hl = hs[p - (i > 0 ? 1 : 0)], hr = hs[p + (i \u003c GX - 1 ? 1 : 0)];\n      const hb = hs[p - (j > 0 ? GX : 0)], hf = hs[p + (j \u003c GZ - 1 ? GX : 0)];\n      const gx = (hr - hl) * 0.5, gz = (hf - hb) * 0.5, inv = 1 / sqrt(gx * gx + 1 + gz * gz);\n      const lap = hl + hr + hb + hf - 4 * hs[p];\n      shade(S, -gx * inv, inv, -gz * inv, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1 - 0.3 * cl(lap * 0.25, 0, 1), c);\n      cc[p * 3] = c[0];\n      cc[p * 3 + 1] = c[1];\n      cc[p * 3 + 2] = c[2];\n    }\n  // The counter and the heap, column by column from the front back in half\n  // cells, height and colour taken between cell centres, each sample filling\n  // the rows its top rises above the samples in front of it.\n  const FL = S.fl;\n  for (let i = 0; i \u003c GX; i++) {\n    let yb = H;\n    for (let v = GZ - 1; v >= 0; v -= 0.5) {\n      const j = floor(v), fv = v - j, p = j * GX + i, p2 = j \u003c GZ - 1 ? p + GX : p;\n      const Yv = h[p] + (h[p2] - h[p]) * fv, z = v + 0.5 - ZC;\n      const y0 = ceil(FY - Yv * CE + z * SE - 0.5);\n      if (y0 >= yb) continue;\n      // Thin lotion lets the counter show through.\n      const film = sm(0.05, 0.9, Yv), fl = (FL[p] + (FL[p2] - FL[p]) * fv) * (1 - film);\n      const r = (cc[p * 3] + (cc[p2 * 3] - cc[p * 3]) * fv) * film + wall[0] * fl;\n      const g = (cc[p * 3 + 1] + (cc[p2 * 3 + 1] - cc[p * 3 + 1]) * fv) * film + wall[1] * fl;\n      const b = (cc[p * 3 + 2] + (cc[p2 * 3 + 2] - cc[p * 3 + 2]) * fv) * film + wall[2] * fl;\n      const dep = Yv * SE + z * CE;\n      for (let y = max(0, y0); y \u003c yb; y++) {\n        const q = y * W + i;\n        col[q * 3] = r;\n        col[q * 3 + 1] = g;\n        col[q * 3 + 2] = b;\n        hdep[q] = dep;\n      }\n      yb = y0;\n    }\n  }\n  // The rope: a chain of balls half an LED apart, each a sphere, the nearest\n  // surface's normal kept at every LED.\n  const ropeOn = !S.gone;\n  if (ropeOn) {\n    const t = S.t, top = min(S.top, YN + 3);\n    const landed = S.tip \u003c 0;\n    const coilTop = C.Yc + C.a1 + HC * C.R;\n    const low = landed ? coilTop : S.tip;\n    const ball = (x, Y, z, a) => {\n      if (a \u003c 0.3) return;\n      const sx = x, sy = FY - Y * CE + z * SE, dd = Y * SE + z * CE;\n      const x0 = max(0, floor(sx - a - 1)), x1 = min(W - 1, ceil(sx + a)), y0 = max(0, floor(sy - a - 1)), y1 = min(H - 1, ceil(sy + a));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let xx = x0; xx \u003c= x1; xx++) {\n          const dx = xx + 0.5 - sx, dy = y + 0.5 - sy, r = sqrt(dx * dx + dy * dy);\n          const cov = cl(a - r + 0.5, 0, 1);\n          if (cov \u003c= 0) continue;\n          const q = y * W + xx, uz = sqrt(max(0, 1 - (r * r) / (a * a)));\n          const depth = dd + a * uz;\n          if (cov \u003c rcov[q] - 0.02 || (cov \u003c= rcov[q] + 0.02 && depth \u003c= rdep[q])) continue;\n          const m = 1 / max(a, r + 1e-6);\n          rcov[q] = cov;\n          rdep[q] = depth;\n          rcol[q * 3] = dx * m;\n          rcol[q * 3 + 1] = -dy * m;\n          rcol[q * 3 + 2] = uz;\n        }\n    };\n    // The falling stream, with swellings that left the spout at a steady\n    // beat and stretch apart as the lotion speeds up.\n    for (let Y = top; Y > low; Y -= 0.5) {\n      const v = speedAt(Y), age = (v - V0) / G;\n      let a = radiusAt(L.a0, Y) * (1 + BA * sin(2 * PI * FB * (t - age)));\n      // A broken stream's upper end narrows to a rounded tail.\n      if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n      ball(AX, Y, 0, a);\n    }\n    if (!landed) ball(AX, S.tip, 0, radiusAt(L.a0, S.tip) * 1.15);\n    else {\n      // The coil: from the axis at its top it bends out to radius R, winding\n      // a quarter turn as it comes down level onto the heap.\n      const len = HC * C.R + 2 * C.R, n = ceil(len / 0.5);\n      for (let k = n; k >= 0; k--) {\n        const s = k / n, Y = C.Yc + C.a1 + HC * C.R * s * s;\n        if (Y > top) continue;\n        const r = C.R * (1 - s * s) * (1 - s * s), th = S.phi + s * PI * 0.5, e = (1 - s) * (1 - s);\n        let a = radiusAt(L.a0, Y);\n        if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n        ball(AX + (C.cx - AX) * e + r * cos(th), Y, C.cz * e + r * sin(th), a);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let r = col[q * 3], g = col[q * 3 + 1], b = col[q * 3 + 2];\n      const cv = rcov[q];\n      if (cv > 0 && rdep[q] > hdep[q]) {\n        // The rope, lit from the normal its nearest ball left here.\n        shade(S, rcol[q * 3], rcol[q * 3 + 1], rcol[q * 3 + 2], 0, 0, 1, LC[0], LC[1], LC[2], HCm[0], HCm[1], HCm[2], true, 1, c);\n        r += (c[0] - r) * cv;\n        g += (c[1] - g) * cv;\n        b += (c[2] - b) * cv;\n      }\n      display.setPixel(x, y, tone(r), tone(g), tone(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Thick","min":-1,"max":1,"about":"How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up."},{"name":"Gloss","min":-1,"max":1,"about":"At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim."}],"start":[0,2,0,0.06],"measures":{"motion":0.0659,"detail":0.0182,"edges":0.2668,"complexity":1.0681,"coverage":0.9585,"colour":0.134,"drift":0.0362},"knobResponse":[0.16,0.0263,0.0576,0.0386]},{"slug":"lunation","title":"Lunation","family":"celestial","round":16,"note":"망원 렌즈로 본 한 달을 빠르게 돌려요. 패널 너비만 한 달이 지구조에 비친 초승달에서 보름달로 차오르며 달의 바다와 크레이터를 드러내고, 하늘도 같이 밝아져요. K1 을 누르면 다음 보름에 개기월식이 들어 달이 구릿빛이 돼요.","idea":"One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.","buttons":"K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.","code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-lunation","type":"code","name":"lunation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Latitude","min":-90,"max":90,"about":"Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down."},{"name":"Days","min":0.5,"max":4,"about":"Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4."},{"name":"Zoom","min":0,"max":1,"about":"The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame."},{"name":"Exposure","min":-2,"max":2,"about":"Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white."}],"start":[0,2,0,0.06],"measures":{"motion":0.058,"detail":0.023,"edges":0.2973,"complexity":1.178,"coverage":0.7526,"colour":0.083,"drift":0.3482},"knobResponse":[0.0549,0.1588,0.1276,0.2614]},{"slug":"mandelbrot","title":"Mandel Dive","family":"fractal","round":2,"note":"망델브로 집합 전체가 서 있다가 가장자리의 한 점으로 끝없이 떨어져 들어가요. 처음 자리는 안테나 위의 미니 망델브로라서, 다 들어가면 처음과 같은 그림으로 녹아들어 다시 떨어져요.","idea":"The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.","buttons":"K1 tap starts the next dive now.","code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-mandelbrot","type":"code","name":"mandelbrot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour bands around the wheel."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the view falls, from one doubling every eight seconds to two a second."},{"name":"Spot","min":0,"max":3,"about":"Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral."},{"name":"Bands","min":1,"max":3.5,"about":"How tightly the colour bands are packed, from slow washes to fine contour rings."}],"start":[0,2,0,1],"measures":{"motion":1.8353,"detail":0.0554,"edges":0.2209,"complexity":1.9032,"coverage":0.846,"colour":0.2924,"drift":0.4001},"knobResponse":[0.262,0.2907,0.2828,0.2216]},{"slug":"marble-run","title":"Marble Run","family":"toy","round":17,"note":"패널 높이의 구슬 굴리기 장난감이에요. 고양이눈 유리구슬이 깔때기를 돌고 지그재그 레일 셋과 나선, 실로폰을 지나 내려오면 옆의 나사 리프트가 다시 꼭대기로 올리고, 구슬이 지나는 플라스틱 조각에는 불이 들어와요. K1 을 누르면 구슬 여섯 개를 깔때기에 쏟아요.","idea":"Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.","buttons":"K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.","code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-marble-run","type":"code","name":"marble-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paint","min":0,"max":1,"about":"Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again."},{"name":"Marbles","min":6,"max":28,"about":"How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop."},{"name":"Tilt","min":0,"max":1,"about":"How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them."}],"start":[0,2,6,0.06],"measures":{"motion":0.4936,"detail":0.087,"edges":0.6482,"complexity":0.8353,"coverage":0.464,"colour":0.2101,"drift":0.042},"knobResponse":[0.0707,0.0515,0.0698,0.0736]},{"slug":"marbling","title":"Marbling","family":"print","round":15,"note":"물 위에 떨어진 잉크 방울이 과녁처럼 번지고, 빗이 지나가면 깃털과 갈매기 무늬로 끌려가요. 종이를 들어 올리면 물이 비고 다음 판에 다시 방울이 떨어져요.","idea":"Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.","buttons":"K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.","code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","layer":{"id":"layer-marbling","type":"code","name":"marbling","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top."},{"name":"Drops","min":3,"max":8,"about":"How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count."},{"name":"Comb","min":0,"max":1,"about":"How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10."}],"start":[0,2,3,0.06],"measures":{"motion":1.6459,"detail":0.1305,"edges":0.9605,"complexity":0.2799,"coverage":0.6371,"colour":0.5767,"drift":0.3773},"knobResponse":[0.3451,0.3454,0.3519,0.2984]},{"slug":"marionette","title":"Marionette","family":"stage","round":25,"note":"작은 인형극 무대에서 어릿광대 꼭두각시가 팔로 스폿을 받으며 지그를 춰요. 머리와 두 손, 두 무릎, 등에 맨 실 일곱이 꼭대기 다리에서 인형사가 쥔 십자 조종대까지 올라가서, 조종대가 기울면 실이 따라 기울고 팔과 무릎이 끌려 올라가요. K4 가 스폿을 옆으로 옮기면 인형과 실의 그림자가 반대쪽 배경막에 서고, K1 을 누르면 인형이 무릎을 접고 높이 뛰었다가 인사해요.","idea":"A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.","buttons":"K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.","code":"// ===== Patternflow pattern =====\n// Title:   Marionette\n// Family:  stage\n// Idea:    A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the string marionettes of the European puppet theatres\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1\n//\n// Knob 1: Costume. The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald.\n// Knob 2: Speed. The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower.\n// Knob 3: Number. The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order.\n// Knob 4: Spot. Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side.\n// Buttons: K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// Rows: bridge rail, grip, top of the backcloth, its foot, the ankles' floor, the apron.\nconst [RAIL, GRIP, CLOTH, BACK, FLOOR, APRON] = [3, 11, 28, 108, 117, 124];\n// Gravity in LEDs/s² (the 46 LED puppet is about 60 cm), damping per step, beats a second at Speed 2.\nconst [G, DAMP, BPS] = [700, 0.992, 2.4];\n// The puppet standing, x from its middle: temples, shoulders, hips, elbows, hands, knees, ankles.\nconst REST = [-3, 74, 3, 74, -5, 80, 5, 80, -3, 94, 3, 94, -6, 88, 6, 88, -7, 96, 7, 96, -3, 106, 3, 106, -3, 117, 3, 117];\n// Bones and their stiffness. The neck's diagonals are soft so the head can nod.\nconst BONES = \"01 02 13 03. 12. 23 45 24 35 25 34 26 68 37 79 4a ac 5b bd\".split(\" \").map((s) => [parseInt(s[0], 16), parseInt(s[1], 16), s[2] ? 0.2 : 1]);\n// The threads in the order of their anchors: temples, hands, the small of the back, knees.\nconst STR = [[0], [1], [8], [9], [4, 5], [10], [11]];\n// How low each particle may go.\nconst LIM = [3.5, 3.5, 2, 2, 2, 2, 1.5, 1.5, 1.3, 1.3, 1.6, 1.6, 0, 0].map((v) => FLOOR - v);\n// Beats in each number.\nconst LEN = [14, 8, 10, 10, 12];\n// Each number's light: wash, follow spot, its radius, footlights, pin spot, rail lamps.\nconst CUES = [\n  [0.5, 0.42, 0.34, 1, 0.9, 0.72, 21, 0.5, 0, 1],\n  [0.05, 0.05, 0.1, 0.3, 0.3, 0.34, 13, 0.12, 1, 0.8],\n  [0.12, 0.2, 0.42, 0.72, 0.84, 1, 20, 0.08, 0, 0.7],\n  [0.42, 0.1, 0.16, 1, 0.66, 0.36, 17, 1.2, 0, 1],\n  [0.58, 0.55, 0.46, 1, 1, 0.94, 25, 0.45, 0, 1],\n];\nconst WOOD = [205, 150, 95], FACE = [232, 194, 156], GOLD = [255, 200, 80], FT = [1, 0.72, 0.42], LM = [1, 0.78, 0.52], PK = [1, 0.97, 0.9];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    p: F32(42), q: F32(42), f: F32(N * 3), lt: F32(N * 3), m: F32(N), alb: F32(N * 3), pi: new Int8Array(N),\n    b: 0, num: 0, nk: -1, cue: CUES[0].slice(), leap: -1, walk: 0, sx: 32, sy: 92, bell: [38, 62, 0, 0], dust: [], k1: 0, s4: 0.06, flash: 0, stc: [0, 0],\n    C: { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0 },\n  });\n  for (let i = 0; i \u003c 14; i++) (P.p[i * 3] = P.q[i * 3] = 32 + REST[i * 2]), (P.p[i * 3 + 1] = P.q[i * 3 + 1] = REST[i * 2 + 1]);\n  const p = P.p, A = (P.A = anchors(P.C));\n  P.bl = BONES.map(([a, b]) => sqrt((p[a * 3] - p[b * 3]) ** 2 + (p[a * 3 + 1] - p[b * 3 + 1]) ** 2));\n  P.sl = STR.map((s, j) => {\n    const m = mid(p, s);\n    return sqrt((m[0] - A[j][0]) ** 2 + (m[1] - A[j][1]) ** 2 + (m[2] - A[j][2]) ** 2) + (j > 4 ? 2 : 1);\n  });\n  paint(P);\n  phys(P, A, A, 1 / 120, 150);\n}\n\nconst mid = (p, s) => [0, 1, 2].map((c) => (p[s[0] * 3 + c] + p[s[s.length - 1] * 3 + c]) / 2);\n\n// The cross: a stick from the grip with a bar across it. The leg bar is in the other hand below it.\nfunction anchors(C) {\n  const cp = cos(C.p), sp = sin(C.p), cr = cos(C.r), sr = sin(C.r), cw = cos(C.w), sw = sin(C.w);\n  const T = (lx, ly) => {\n    const y1 = ly * cp, z1 = ly * sp, x2 = lx * cr - y1 * sr, y2 = lx * sr + y1 * cr;\n    return [C.x + x2 * cw + z1 * sw, C.y + y2, -x2 * sw + z1 * cw];\n  };\n  const L = (s, k) => [C.x + s * 7 * cw, C.y + 19 - k, 3 - s * 7 * sw];\n  return [T(-4, 5), T(4, 5), T(-12, 5), T(12, 5), T(0, 16), L(-1, C.kL), L(1, C.kR), T(0, 0)];\n}\n\n// Verlet steps: gravity, bones, threads that pull only when taut, the floor.\nfunction phys(P, A0, A1, h, n) {\n  const p = P.p, q = P.q, C = P.C, h2 = h * h, d = [0, 0, 0];\n  for (let st = 0; st \u003c n; st++) {\n    const f = (st + 1) / n;\n    let rx = p[9] - p[6], rz = p[11] - p[8];\n    const rl = sqrt(rx * rx + rz * rz) || 1;\n    (rx /= rl), (rz /= rl);\n    for (let i = 0; i \u003c 14; i++) {\n      // Knees bend forward, elbows out and back, the head leans in a bow.\n      const sd = i & 1 ? 30 : -30, a = i > 9 && i \u003c 12 ? [-90 * rz, 90 * rx] : i === 6 || i === 7 ? [sd * rx + 25 * rz, sd * rz - 25 * rx] : i \u003c 2 ? [-C.lean * 400 * rz, C.lean * 400 * rx] : [0, 0];\n      for (let c = 0, o = i * 3; c \u003c 3; c++, o++) {\n        const v = (p[o] - q[o]) * DAMP;\n        (q[o] = p[o]), (p[o] += v + (c === 1 ? G : a[c >> 1]) * h2);\n      }\n    }\n    for (let it = 0; it \u003c 6; it++) {\n      BONES.forEach(([a, b, k], j) => {\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = p[b * 3 + c] - p[a * 3 + c]), (l += d[c] * d[c]);\n        const m = (1 - P.bl[j] / (sqrt(l) || 1e-6)) * 0.5 * k;\n        for (let c = 0; c \u003c 3; c++) (p[a * 3 + c] += d[c] * m), (p[b * 3 + c] -= d[c] * m);\n      });\n      for (let s = 0; s \u003c 7; s++) {\n        const m = mid(p, STR[s]), L = max(4, P.sl[s] + (s \u003c 2 ? C.sH : s === 2 ? -C.hL : s === 3 ? -C.hR : s === 4 ? C.sB : 0));\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = m[c] - mix(A0[s][c], A1[s][c], f)), (l += d[c] * d[c]);\n        if ((l = sqrt(l)) > L) for (const i of STR[s]) for (let c = 0; c \u003c 3; c++) p[i * 3 + c] -= (d[c] * (l - L)) / l;\n      }\n      for (let i = 0; i \u003c 14; i++) {\n        const o = i * 3;\n        if (p[o + 1] > LIM[i]) {\n          // A foot that comes down hard raises dust.\n          if (i > 11 && it === 0 && p[o + 1] - q[o + 1] > 0.45 && P.stc[i - 12] \u003c= 0) stamp(P, p[o], p[o + 1] - q[o + 1]), (P.stc[i - 12] = 0.25);\n          (p[o + 1] = q[o + 1] = LIM[i]), (q[o] = p[o] - (p[o] - q[o]) * 0.5), (q[o + 2] = p[o + 2] - (p[o + 2] - q[o + 2]) * 0.5);\n        }\n        (p[o] = cl(p[o], 3, 60)), (p[o + 2] = cl(p[o + 2], -14, 14));\n      }\n    }\n  }\n}\n\nfunction stamp(P, x, v) {\n  for (let i = 0; i \u003c 7; i++) P.dust.push([x + (Math.random() - 0.5) * 4, FLOOR + 1, (Math.random() - 0.5) * 40, -6 - Math.random() * 14 * v, 0.5 + Math.random() * 0.5]);\n}\n\n// What the puppeteer does with the cross in each number, beat by beat.\nfunction script(n, b) {\n  const T = { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0, au: 0 };\n  const ph = fr(b), bu = sin(PI * ph), odd = floor(b) & 1;\n  if (n === 0) {\n    // The jig: a hop on every beat, knees and arms up in turn, across and back.\n    const tr = (TAU * b) / 8, sw = sin((PI * b) / 2), e = 1 - sm(LEN[0] - 1.5, LEN[0], b);\n    (T.x = 32 + 10 * sin(tr) * e), (T.w = 0.5 * cos(tr) * e), (T.y -= 3.5 * bu * e), (T[odd ? \"kR\" : \"kL\"] = 9 * bu * bu * e);\n    (T.r = 0.3 * sw), (T.hL = 13 * max(0, sw) * e), (T.hR = 13 * max(0, -sw) * e);\n  } else if (n === 1) {\n    // The bow: the head threads let out, the back thread holds, the cross tips over.\n    const u = sm(1, 2.4, b) * (1 - sm(5, 6.6, b));\n    (T.y += u), (T.p = -0.5 * u), (T.sH = 11 * u), (T.sB = -3 * u), (T.lean = 1.3 * u), (T.w = 0.6 * u), (T.hR = 12 * sm(0.2, 1.2, b) * (1 - sm(4.6, 6.2, b))), (T.au = 1);\n  } else if (n === 2) {\n    // The flop: all let go, a heap on the floor, the head comes up to look round, lifted back up, a shake.\n    const dr = sm(0.8, 1.15, b) * (1 - sm(5.2, 6.8, b)), lk = sm(2.2, 2.9, b) * (1 - sm(4.4, 5, b));\n    (T.x = 27), (T.y += 26 * dr), (T.sH = -14 * lk * dr), (T.w = 0.7 * dr + 0.6 * sin((TAU * (b - 2.2)) / 2.2) * lk), (T.au = 1);\n    T.r = 0.35 * sin(TAU * b) * sm(6.8, 7.3, b) * (1 - sm(9, 9.8, b));\n  } else if (n === 3) {\n    // The stamp: a knee drawn up slowly and let drop hard on the beat.\n    (T.x = 37), (T[odd ? \"kR\" : \"kL\"] = 11 * sm(0.1, 0.6, ph) * (1 - sm(0.82, 0.9, ph))), (T.r = (odd ? 0.22 : -0.22) * bu);\n    (T.lean = -0.25), (T.hL = T.hR = 5), (T.w = 0.3 * sin((TAU * b) / 4)), (T.au = 1);\n  } else {\n    // The strut: across the stage and back, facing the way it goes.\n    const tr = (TAU * b) / 12;\n    (T.x = 32 + 12 * cos(tr)), (T.w = -0.8 * sin(tr)), (T.y -= 1.5 * bu), (T[odd ? \"kR\" : \"kL\"] = 6 * bu), (T.r = 0.25 * sin(PI * b)), (T.p = -0.1);\n  }\n  return T;\n}\n\n// K1's leap, in seconds: crouch, jerk up, fly, land, bow.\nfunction leap(P, T, rd) {\n  const u = P.leap, a = 1 - sm(2.7, 3.3, u), air = sm(0.25, 0.4, u) * (1 - sm(0.55, 0.95, u)), tuck = sm(0.3, 0.45, u) * (1 - sm(0.75, 0.95, u));\n  const bow = sm(1.2, 1.7, u) * (1 - sm(2.4, 3, u)), cr = sm(0, 0.2, u) * (1 - sm(0.22, 0.32, u));\n  (T.y = mix(T.y, GRIP + 4 * cr - 10 * air + 4 * bow, a)), (T.kL = T.kR = mix(T.kL, 7 * tuck, a)), (T.hL = T.hR = mix(T.hL, 15 * tuck, a));\n  (T.sH = mix(T.sH, 10 * bow, a)), (T.lean = mix(T.lean, bow, a)), (T.p = mix(T.p, -0.5 * bow, a)), (T.r *= 1 - a), (T.w *= 1 - a), (T.x = mix(T.x, P.C.x, a));\n  if (u \u003c 0.4 && u + rd >= 0.4) P.flash = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05), d = (rd * cl(k[1], 0.2, 3)) / 2;\n  (P.k1 = cl(k[0], 0, 1)), (P.s4 = cl(k[3], -1, 1));\n  const nk = round(cl(k[2], 0, 4));\n  if (nk !== P.nk) {\n    if (P.nk \u003c 0) P.cue = CUES[nk].slice();\n    (P.nk = P.num = nk), (P.b = 0);\n  }\n  if ((P.b += d * BPS) >= LEN[P.num]) (P.b -= LEN[P.num]), (P.num = (P.num + 1) % 5);\n  if (input.btnPressed && input.btnPressed[0] && P.leap \u003c 0) P.leap = 0;\n  const T = script(P.num, P.b), C = P.C, x0 = C.x;\n  if (P.leap >= 0 && (leap(P, T, rd), (P.leap += rd) > 3.3)) P.leap = -1;\n  const ex = min(1, rd / 0.45), e = min(1, rd / 0.05);\n  for (const key in C) C[key] = mix(C[key], T[key], key === \"x\" ? ex : e);\n  // Steps wherever the cross travels in a number without its own.\n  const dx = abs(C.x - x0);\n  P.walk += dx / 5;\n  if (T.au && rd > 0) {\n    const lift = min(1, dx / rd / 6) * 6 * sin(PI * fr(P.walk)) ** 2;\n    floor(P.walk) & 1 ? (C.kR = max(C.kR, lift)) : (C.kL = max(C.kL, lift));\n  }\n  const A = anchors(C), n = max(1, ceil(rd * 120 - 1e-6));\n  if (rd > 0) phys(P, P.A, A, rd / n, n);\n  P.A = A;\n  for (let i = 0; i \u003c 10; i++) P.cue[i] = mix(P.cue[i], CUES[P.num][i], min(1, rd * 2.2));\n  // The follow spot keeps to the body.\n  const p = P.p;\n  (P.sx = mix(P.sx, (p[6] + p[9] + p[12] + p[15]) / 4, min(1, rd * 3.5))), (P.sy = mix(P.sy, (p[7] + p[10] + p[13] + p[16]) / 4 + 3, min(1, rd * 2.5)));\n  // The bell on the cap swings after the head.\n  const hd = head(p), B = P.bell, gx = hd.x + hd.ux * 7 - hd.uy * 6, gy = hd.y + hd.uy * 7 + hd.ux * 6 + 2;\n  (B[2] += ((gx - B[0]) * 160 - B[2] * 7) * rd), (B[3] += ((gy - B[1]) * 160 - B[3] * 7 + 60) * rd), (B[0] += B[2] * rd), (B[1] += B[3] * rd);\n  (B[0] = cl(B[0], gx - 6, gx + 6)), (B[1] = cl(B[1], gy - 6, gy + 6));\n  P.dust = P.dust.filter((s) => ((s[3] += 50 * rd), (s[0] += s[2] * rd), (s[1] = min(FLOOR + 2, s[1] + s[3] * rd)), (s[4] -= rd) > 0));\n  (P.stc[0] -= rd), (P.stc[1] -= rd), (P.flash = max(0, P.flash - rd * 1.5));\n}\n\n// The head: its middle, which way is up, how far it is turned and nodded.\nfunction head(p) {\n  const x = (p[0] + p[3]) / 2, y = (p[1] + p[4]) / 2 - 0.5, z = (p[2] + p[5]) / 2, sx = (p[6] + p[9]) / 2, sy = (p[7] + p[10]) / 2, sz = (p[8] + p[11]) / 2;\n  const l = Math.hypot(x - sx, y - sy) || 1;\n  return { x, y, ux: (x - sx) / l, uy: (y - sy) / l, yaw: atan2(-(p[5] - p[2]), p[3] - p[0]), nod: (z - sz) / 6.3 };\n}\n\n// What does not move: velvet, rail, backcloth, boards, apron.\nfunction paint(P) {\n  const A = P.alb, I = P.pi;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.05, 0.045, 0.06];\n    I[i] = -1;\n    if (y >= RAIL && y \u003c= RAIL + 3) {\n      const g = (0.8 + 0.3 * hash(floor((x + y * 7) / 11), y)) * (y === RAIL ? 1.2 : y === RAIL + 3 ? 0.6 : 1) * (0.92 + 0.08 * n);\n      c = [0.55 * g, 0.36 * g, 0.22 * g];\n    } else if (y >= CLOTH - 2 && y \u003c CLOTH) c = [0.13, 0.1, 0.08];\n    else if (y >= CLOTH && y \u003c BACK) {\n      // Painted night: stars over two rows of hills, in soft folds.\n      const hf = 86 + 4 * sin(x * 0.09 + 0.5) + 2 * sin(x * 0.27 + 1), hn = 97 + 3 * sin(x * 0.13 + 2) + 1.5 * sin(x * 0.41);\n      const cx = floor(x / 7), cy = floor(y / 8), r = hash(cx, cy + 50), sx = cx * 7 + 1 + floor(r * 5), sy = cy * 8 + 1 + floor(hash(cx + 9, cy) * 6);\n      I[i] = y >= hn ? 2 : y >= hf ? 1 : r \u003c 0.5 && y \u003c hf - 3 ? (x === sx && y === sy ? 3 : abs(x - sx) + abs(y - sy) === 1 ? 4 : 0) : 0;\n      c = [(0.8 + 0.2 * (0.5 + 0.5 * sin(x * 0.95 + 0.6 * sin(y * 0.05)))) * (0.95 + 0.1 * n), 0, 0];\n    } else if (y >= BACK && y \u003c APRON) {\n      // Boards running towards you.\n      const u = (x - 31.5) / ((y - 30) / (APRON - 30)) / 6 + 0.5, bd = floor(u), g = (0.8 + 0.2 * hash(bd, 3)) * mix(0.45, 1, cl(min(fr(u), 1 - fr(u)) * 9 - 0.3, 0, 1)) * (y > APRON - 3 ? 1.12 : 1) * (0.92 + 0.14 * hash(x, bd * 31 + floor(y / 3)));\n      c = [0.6 * g, 0.42 * g, 0.27 * g];\n    } else if (y >= APRON) c = y === APRON ? [0.4, 0.28, 0.18] : [0.14, 0.09, 0.07];\n    (A[o] = c[0]), (A[o + 1] = c[1]), (A[o + 2] = c[2]);\n  }\n}\n\nlet F, L, M, MODE, SIDE;\n// One LED of the puppet or cross: the shadow mask, or its colour in the light there.\nfunction dot(x, y, c, nx = 0, flat = 0) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const i = y * W + x, o = i * 3;\n  if (MODE === 0) return void (M[i] = 1);\n  const k = 1 - 0.2 * nx * nx + 0.4 * SIDE * nx;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = c[j] * max(flat, L[o + j]) * k;\n}\n// A capsule; the colour may be a function of how far along.\nfunction seg(x0, y0, x1, y1, r, c, flat = 0) {\n  const dx = x1 - x0, dy = y1 - y0, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = floor(min(y0, y1) - r); y \u003c= ceil(max(y0, y1) + r); y++)\n    for (let x = floor(min(x0, x1) - r); x \u003c= ceil(max(x0, x1) + r); x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / l2, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      if (ex * ex + ey * ey \u003c= r * r) dot(x, y, typeof c === \"function\" ? c(t) : c, cl(ex / r, -1, 1), flat);\n    }\n}\nconst disc = (x, y, r, c, flat) => seg(x, y, x, y, r, c, flat);\n\n// A thread: one LED wide over two columns, a faint halo, a glint that slides as it tilts.\nfunction thread(ax, ay, bx, by, gl) {\n  const n = ceil(abs(by - ay)) + 1, tilt = (bx - ax) / (by - ay || 1), g0 = 0.5 + 6 * (tilt + SIDE * 0.06);\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n, x = mix(ax, bx, t), y = round(mix(ay, by, t)), x0 = floor(x), f = x - x0;\n    if (y \u003c 0 || y >= H) continue;\n    if (MODE === 0) {\n      if (x0 >= 0 && x0 \u003c W) M[y * W + x0] = max(M[y * W + x0], 0.45);\n      continue;\n    }\n    const o = (y * W + cl(x0, 0, W - 1)) * 3, gls = gl * 150 * exp(-((((t - g0) * n) / 5) ** 2));\n    for (let e = -1; e \u003c 3; e++) {\n      const xx = x0 + e, a = e \u003c 0 ? 0.12 - 0.12 * f : e ? (e > 1 ? 0.12 * f : 0.12 + 0.88 * f) : 1 - 0.88 * f, q = (y * W + xx) * 3;\n      if (xx \u003c 0 || xx >= W) continue;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += a * (24 + 64 * L[o + j] + gls);\n    }\n  }\n}\n\nfunction puppet(P, C1, C2) {\n  const p = P.p, X = (i) => p[i * 3], Y = (i) => p[i * 3 + 1], Z = (i) => p[i * 3 + 2], tz = (Z(2) + Z(3) + Z(4) + Z(5)) / 4;\n  const stock = (t) => (floor(t * 5) & 1 ? C1 : [235, 228, 210]);\n  const limb = (a, b, c, up, low, r1, r2) => {\n    seg(X(a), Y(a), X(b), Y(b), r1, up), seg(X(b), Y(b), X(c), Y(c), r2, low);\n  };\n  const arm = (s) => (limb(2 + s, 6 + s, 8 + s, C2, C1, 1.6, 1.2), disc(X(8 + s), Y(8 + s), 1.4, FACE));\n  const leg = (s) => {\n    limb(4 + s, 10 + s, 12 + s, C2, stock, 1.8, 1.2);\n    const fx = X(12 + s), fy = Y(12 + s) + 1.2, yw = atan2(-(Z(3) - Z(2)), X(3) - X(2));\n    seg(fx - 1.2, fy, fx + 1.2 + 2.4 * sin(yw), fy, 1.1, C2.map((v) => v * 0.55)), dot(round(fx + 2.4 + 2.6 * sin(yw)), round(fy - 1), GOLD);\n  };\n  const parts = [[(Z(6) + Z(8)) / 2, () => arm(0)], [(Z(7) + Z(9)) / 2, () => arm(1)], [(Z(10) + Z(12)) / 2, () => leg(0)], [(Z(11) + Z(13)) / 2, () => leg(1)]];\n  for (const [z, f] of parts) if (z \u003c tz - 1) f();\n  // The doublet in diamonds, flaring to a hem of points, with a belt.\n  const sx = (X(2) + X(3)) / 2, sy = (Y(2) + Y(3)) / 2, hx = (X(4) + X(5)) / 2, hy = (Y(4) + Y(5)) / 2, ax = hx - sx, ay = hy - sy, al = ax * ax + ay * ay || 1;\n  let ex = X(3) - X(2) + X(5) - X(4), ey = Y(3) - Y(2) + Y(5) - Y(4);\n  const el = Math.hypot(ex, ey) || 1, hwS = max(2.5, Math.hypot(X(3) - X(2), Y(3) - Y(2)) / 2), hwH = max(2.5, Math.hypot(X(5) - X(4), Y(5) - Y(4)) * 0.62);\n  (ex /= el), (ey /= el);\n  for (let y = floor(min(sy, hy) - 6); y \u003c= ceil(max(sy, hy) + 6); y++)\n    for (let x = floor(min(sx, hx) - 7); x \u003c= ceil(max(sx, hx) + 7); x++) {\n      const v = ((x - sx) * ax + (y - sy) * ay) / al, hw = mix(hwS, hwH, v), u = ((x - sx - ax * v) * ex + (y - sy - ay * v) * ey) / hw;\n      if (v \u003c -0.05 || abs(u) > 1 || v > 1.1 + 0.12 * abs(fr(u * 2.5) - 0.5) * 2) continue;\n      const belt = v > 0.84 && v \u003c 0.94, dia = (floor(u * 1.6 + v * 3.2) + floor(u * 1.6 - v * 3.2)) & 1;\n      dot(x, y, belt ? (abs(u) \u003c 0.22 ? GOLD : [60, 40, 30]) : dia ? C1 : C2, u);\n    }\n  for (const [z, f] of parts) if (z >= tz - 1) f();\n  // The ruff, the head, the face, the cap and its bell.\n  seg(X(2), Y(2) - 1, X(3), Y(3) - 1, 1.7, (t) => (floor(t * 9) & 1 ? [250, 246, 236] : [205, 200, 192]));\n  const hd = head(p), R = 4.3, px = -hd.uy, py = hd.ux;\n  disc(hd.x, hd.y, R, FACE);\n  if (MODE && hd.nod \u003c 0.7)\n    for (const [ph, hy, c] of [[0.5, -0.4, [30, 22, 34]], [0.8, 1.2, [240, 120, 110]], [0, 2.1, [150, 40, 46]], [-0.5, -0.4, [30, 22, 34]], [-0.8, 1.2, [240, 120, 110]]]) {\n      const a = ph + hd.yaw;\n      if (cos(a) > 0.25) dot(round(hd.x + R * 0.85 * sin(a)), round(hd.y + hy + hd.nod * 3), c);\n    }\n  const b0x = hd.x + hd.ux * 3.1, b0y = hd.y + hd.uy * 3.1, b1x = hd.x + hd.ux * 8 + px, b1y = hd.y + hd.uy * 8 + py, [bx, by] = P.bell;\n  for (let i = 0, lx = b0x, ly = b0y; i \u003c= 8; i++) {\n    const t = i / 8, x = mix(mix(b0x, b1x, t), mix(b1x, bx, t), t), y = mix(mix(b0y, b1y, t), mix(b1y, by, t), t);\n    seg(lx, ly, x, y, mix(3.3, 0.8, t), C1), (lx = x), (ly = y);\n  }\n  seg(hd.x + hd.ux * 2.3 - px * 4, hd.y + hd.uy * 2.3 - py * 4, hd.x + hd.ux * 2.3 + px * 4, hd.y + hd.uy * 2.3 + py * 4, 0.9, C2);\n  disc(bx, by, 1.3, GOLD);\n}\n\n// The puppeteer's sleeves and hands, the cross and the leg bar.\nfunction cross(P) {\n  const A = P.A, [gx, gy] = A[7], sleeve = [46, 38, 60], skin = [232, 176, 140], cuff = [236, 232, 222];\n  const arm = (x0, x1, y1) => seg(x0, -3, x1, y1, 2.6, (t) => (t > 0.84 ? cuff : sleeve), 0.32);\n  seg(A[5][0] - 1.5, A[5][1], A[6][0] + 1.5, A[6][1], 0.7, WOOD, 0.35);\n  seg(gx, gy, A[4][0], A[4][1], 0.9, WOOD, 0.35), seg(A[2][0], A[2][1], A[3][0], A[3][1], 0.8, WOOD, 0.35);\n  for (let j = 0; j \u003c 7; j++) dot(round(A[j][0]), round(A[j][1]), [220, 220, 230], 0, 0.5);\n  arm(gx + 17, gx + 1.5, gy - 1.5), disc(gx + 0.5, gy - 0.5, 2.2, skin, 0.4);\n  arm(A[5][0] - 22, A[5][0] - 2.5, A[5][1] - 1), disc(A[5][0] - 2, A[5][1] - 0.5, 2, skin, 0.4);\n}\n\nfunction stage(P, pal) {\n  const [wr, wg, wb, sr0, sg0, sb0, rad0, foot, pin, lamp] = P.cue, s = P.s4, A = P.alb, I = P.pi, p = P.p;\n  const fl = 1 + 0.5 * P.flash, rad = rad0 + 7 * P.flash, S = [sr0 * fl, sg0 * fl, sb0 * fl], WS = [wr, wg, wb];\n  const px = P.sx - s * 11, py = P.sy, rx = rad * (1 + 0.45 * abs(s)), ry = rad * 1.35, sdx = -s * 15, fx = (p[36] + p[39]) / 2, pinX = P.sx;\n  const lift = [0, 1].map((j) => 1 - sm(0, 8, FLOOR - p[37 + j * 3]));\n  for (let y = 0; y \u003c H; y++) {\n    const ft = y \u003c APRON ? foot * exp((y - APRON) / 14) : 0, wash = y \u003c CLOTH - 2 ? (y >= RAIL && y \u003c= RAIL + 3 ? 0.3 : 0.08) : 1, cw = 2 + (y + 12) * 0.085;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = (x - px) / rx, dy = (y - py) / ry, pool = 1 - sm(0.84, 1, sqrt(dx * dx + dy * dy));\n      const lm = lamp * (1 / (1 + ((x - 4.5) ** 2 + (y - 10) ** 2) / 260) + 1 / (1 + ((x - 59.5) ** 2 + (y - 10) ** 2) / 260));\n      let cone = 0;\n      if (pin > 0.01) cone = y >= BACK ? pin * (1 - sm(0.7, 1, sqrt(((x - pinX) / 12) ** 2 + ((y - FLOOR - 1) / 4) ** 2))) : pin * (1 - sm(0.6, 1, abs(x - pinX) / cw));\n      for (let j = 0; j \u003c 3; j++) L[o + j] = wash * WS[j] + pool * S[j] + ft * FT[j] + lm * LM[j] + cone * PK[j];\n      // The shadow stands up from the feet, larger, away from the spot.\n      let sh = 0, k = 1;\n      if (y >= CLOTH && y \u003c APRON && pool > 0) {\n        const mx = round(fx + (x - fx - sdx) / 1.12), my = round(FLOOR + (y - FLOOR + 3) / 1.12);\n        if (mx >= 0 && mx \u003c W && my >= 0 && my \u003c H) sh = M[my * W + mx] * pool * 0.8;\n      }\n      if (y > BACK && y \u003c APRON) for (let j = 0; j \u003c 2; j++) k *= 1 - 0.6 * lift[j] * exp(-1.5 * (((x - p[36 + j * 3]) / 3.5) ** 2 + ((y - FLOOR - 1.5) / 1.3) ** 2));\n      const c = I[i] >= 0 ? pal[I[i]] : null, f = c ? A[o] : 1, cf = c ? 0.8 * cone : 0;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = (c ? c[j] : A[o + j]) * f * k * (L[o + j] - sh * S[j] - cf * PK[j]) * 255;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  [F, L, M, SIDE] = [P.f, P.lt, P.m, P.s4];\n  const h = 0.36 + P.k1, hc = 0.61 + 0.3 * sin(TAU * P.k1), A = P.A, p = P.p;\n  const C1 = hsv(h, 0.8, 0.8).map((v) => v * 255), C2 = hsv(h + 0.06, 0.75, 0.42).map((v) => v * 255);\n  const sky = hsv(hc, 0.62, 0.34), star = [0.95, 0.78, 0.4], pal = [sky, hsv(hc + 0.06, 0.55, 0.46), hsv(hc + 0.12, 0.6, 0.58), star, sky.map((v, j) => mix(v, star[j], 0.4))];\n  const threads = (from, to) => {\n    for (let s = from; s \u003c to; s++) {\n      const m = mid(p, STR[s]), side = s \u003c 2 ? (s ? 2 : -2) * cos(head(p).yaw) : 0;\n      thread(A[s][0], A[s][1], m[0] + side, m[1] - (s \u003c 2 ? 1 : 0), s === 4 ? 0.4 : 1);\n    }\n  };\n  // The shadow first: the puppet and its threads as a mask.\n  M.fill(0), (MODE = 0), threads(0, 7), puppet(P, C1, C2);\n  (MODE = 1), stage(P, pal);\n  threads(0, 7), puppet(P, C1, C2), cross(P);\n  // Dust from the stamps, the haze in the pin beam, the footlights.\n  for (const [x, y, , , l] of P.dust) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) F[o + j] += [190, 160, 130][j] * l * 0.6 * max(0.4, L[o + j]);\n  }\n  const pin = P.cue[8];\n  if (pin > 0.01)\n    for (let y = 0; y \u003c BACK; y++) {\n      const cw = 2 + (y + 12) * 0.085;\n      for (let x = 0; x \u003c W; x++) {\n        const c = pin * 0.09 * (1 - sm(0.6, 1, abs(x - P.sx) / cw)) * 255;\n        for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += c * PK[j];\n      }\n    }\n  // The clip lamps on the rail and the footlights.\n  for (const x of [4.5, 59.5]) {\n    seg(x - 2, 7.5, x + 2, 7.5, 1.2, [40, 80, 58], 0.5), seg(x - 0.5, 9.2, x + 0.5, 9.2, 0.6, [255, 226, 170], P.cue[9]);\n    for (let i = -3; i \u003c 4; i++) for (let j = 0; j \u003c 3; j++) F[(10 * W + round(x + i)) * 3 + j] += (80 * P.cue[9] * LM[j]) / (1 + i * i);\n  }\n  const fb = min(1, P.cue[7] * 1.2 + 0.15);\n  for (const x of [6, 19, 32, 45, 57])\n    for (let i = -2; i \u003c= 3; i++) {\n      const a = i === 0 || i === 1 ? fb : fb * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[(125 * W + x + i) * 3 + j] += 255 * a * FT[j];\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","layer":{"id":"layer-marionette","type":"code","name":"marionette","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marionette\n// Family:  stage\n// Idea:    A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the string marionettes of the European puppet theatres\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1\n//\n// Knob 1: Costume. The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald.\n// Knob 2: Speed. The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower.\n// Knob 3: Number. The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order.\n// Knob 4: Spot. Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side.\n// Buttons: K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// Rows: bridge rail, grip, top of the backcloth, its foot, the ankles' floor, the apron.\nconst [RAIL, GRIP, CLOTH, BACK, FLOOR, APRON] = [3, 11, 28, 108, 117, 124];\n// Gravity in LEDs/s² (the 46 LED puppet is about 60 cm), damping per step, beats a second at Speed 2.\nconst [G, DAMP, BPS] = [700, 0.992, 2.4];\n// The puppet standing, x from its middle: temples, shoulders, hips, elbows, hands, knees, ankles.\nconst REST = [-3, 74, 3, 74, -5, 80, 5, 80, -3, 94, 3, 94, -6, 88, 6, 88, -7, 96, 7, 96, -3, 106, 3, 106, -3, 117, 3, 117];\n// Bones and their stiffness. The neck's diagonals are soft so the head can nod.\nconst BONES = \"01 02 13 03. 12. 23 45 24 35 25 34 26 68 37 79 4a ac 5b bd\".split(\" \").map((s) => [parseInt(s[0], 16), parseInt(s[1], 16), s[2] ? 0.2 : 1]);\n// The threads in the order of their anchors: temples, hands, the small of the back, knees.\nconst STR = [[0], [1], [8], [9], [4, 5], [10], [11]];\n// How low each particle may go.\nconst LIM = [3.5, 3.5, 2, 2, 2, 2, 1.5, 1.5, 1.3, 1.3, 1.6, 1.6, 0, 0].map((v) => FLOOR - v);\n// Beats in each number.\nconst LEN = [14, 8, 10, 10, 12];\n// Each number's light: wash, follow spot, its radius, footlights, pin spot, rail lamps.\nconst CUES = [\n  [0.5, 0.42, 0.34, 1, 0.9, 0.72, 21, 0.5, 0, 1],\n  [0.05, 0.05, 0.1, 0.3, 0.3, 0.34, 13, 0.12, 1, 0.8],\n  [0.12, 0.2, 0.42, 0.72, 0.84, 1, 20, 0.08, 0, 0.7],\n  [0.42, 0.1, 0.16, 1, 0.66, 0.36, 17, 1.2, 0, 1],\n  [0.58, 0.55, 0.46, 1, 1, 0.94, 25, 0.45, 0, 1],\n];\nconst WOOD = [205, 150, 95], FACE = [232, 194, 156], GOLD = [255, 200, 80], FT = [1, 0.72, 0.42], LM = [1, 0.78, 0.52], PK = [1, 0.97, 0.9];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    p: F32(42), q: F32(42), f: F32(N * 3), lt: F32(N * 3), m: F32(N), alb: F32(N * 3), pi: new Int8Array(N),\n    b: 0, num: 0, nk: -1, cue: CUES[0].slice(), leap: -1, walk: 0, sx: 32, sy: 92, bell: [38, 62, 0, 0], dust: [], k1: 0, s4: 0.06, flash: 0, stc: [0, 0],\n    C: { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0 },\n  });\n  for (let i = 0; i \u003c 14; i++) (P.p[i * 3] = P.q[i * 3] = 32 + REST[i * 2]), (P.p[i * 3 + 1] = P.q[i * 3 + 1] = REST[i * 2 + 1]);\n  const p = P.p, A = (P.A = anchors(P.C));\n  P.bl = BONES.map(([a, b]) => sqrt((p[a * 3] - p[b * 3]) ** 2 + (p[a * 3 + 1] - p[b * 3 + 1]) ** 2));\n  P.sl = STR.map((s, j) => {\n    const m = mid(p, s);\n    return sqrt((m[0] - A[j][0]) ** 2 + (m[1] - A[j][1]) ** 2 + (m[2] - A[j][2]) ** 2) + (j > 4 ? 2 : 1);\n  });\n  paint(P);\n  phys(P, A, A, 1 / 120, 150);\n}\n\nconst mid = (p, s) => [0, 1, 2].map((c) => (p[s[0] * 3 + c] + p[s[s.length - 1] * 3 + c]) / 2);\n\n// The cross: a stick from the grip with a bar across it. The leg bar is in the other hand below it.\nfunction anchors(C) {\n  const cp = cos(C.p), sp = sin(C.p), cr = cos(C.r), sr = sin(C.r), cw = cos(C.w), sw = sin(C.w);\n  const T = (lx, ly) => {\n    const y1 = ly * cp, z1 = ly * sp, x2 = lx * cr - y1 * sr, y2 = lx * sr + y1 * cr;\n    return [C.x + x2 * cw + z1 * sw, C.y + y2, -x2 * sw + z1 * cw];\n  };\n  const L = (s, k) => [C.x + s * 7 * cw, C.y + 19 - k, 3 - s * 7 * sw];\n  return [T(-4, 5), T(4, 5), T(-12, 5), T(12, 5), T(0, 16), L(-1, C.kL), L(1, C.kR), T(0, 0)];\n}\n\n// Verlet steps: gravity, bones, threads that pull only when taut, the floor.\nfunction phys(P, A0, A1, h, n) {\n  const p = P.p, q = P.q, C = P.C, h2 = h * h, d = [0, 0, 0];\n  for (let st = 0; st \u003c n; st++) {\n    const f = (st + 1) / n;\n    let rx = p[9] - p[6], rz = p[11] - p[8];\n    const rl = sqrt(rx * rx + rz * rz) || 1;\n    (rx /= rl), (rz /= rl);\n    for (let i = 0; i \u003c 14; i++) {\n      // Knees bend forward, elbows out and back, the head leans in a bow.\n      const sd = i & 1 ? 30 : -30, a = i > 9 && i \u003c 12 ? [-90 * rz, 90 * rx] : i === 6 || i === 7 ? [sd * rx + 25 * rz, sd * rz - 25 * rx] : i \u003c 2 ? [-C.lean * 400 * rz, C.lean * 400 * rx] : [0, 0];\n      for (let c = 0, o = i * 3; c \u003c 3; c++, o++) {\n        const v = (p[o] - q[o]) * DAMP;\n        (q[o] = p[o]), (p[o] += v + (c === 1 ? G : a[c >> 1]) * h2);\n      }\n    }\n    for (let it = 0; it \u003c 6; it++) {\n      BONES.forEach(([a, b, k], j) => {\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = p[b * 3 + c] - p[a * 3 + c]), (l += d[c] * d[c]);\n        const m = (1 - P.bl[j] / (sqrt(l) || 1e-6)) * 0.5 * k;\n        for (let c = 0; c \u003c 3; c++) (p[a * 3 + c] += d[c] * m), (p[b * 3 + c] -= d[c] * m);\n      });\n      for (let s = 0; s \u003c 7; s++) {\n        const m = mid(p, STR[s]), L = max(4, P.sl[s] + (s \u003c 2 ? C.sH : s === 2 ? -C.hL : s === 3 ? -C.hR : s === 4 ? C.sB : 0));\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = m[c] - mix(A0[s][c], A1[s][c], f)), (l += d[c] * d[c]);\n        if ((l = sqrt(l)) > L) for (const i of STR[s]) for (let c = 0; c \u003c 3; c++) p[i * 3 + c] -= (d[c] * (l - L)) / l;\n      }\n      for (let i = 0; i \u003c 14; i++) {\n        const o = i * 3;\n        if (p[o + 1] > LIM[i]) {\n          // A foot that comes down hard raises dust.\n          if (i > 11 && it === 0 && p[o + 1] - q[o + 1] > 0.45 && P.stc[i - 12] \u003c= 0) stamp(P, p[o], p[o + 1] - q[o + 1]), (P.stc[i - 12] = 0.25);\n          (p[o + 1] = q[o + 1] = LIM[i]), (q[o] = p[o] - (p[o] - q[o]) * 0.5), (q[o + 2] = p[o + 2] - (p[o + 2] - q[o + 2]) * 0.5);\n        }\n        (p[o] = cl(p[o], 3, 60)), (p[o + 2] = cl(p[o + 2], -14, 14));\n      }\n    }\n  }\n}\n\nfunction stamp(P, x, v) {\n  for (let i = 0; i \u003c 7; i++) P.dust.push([x + (Math.random() - 0.5) * 4, FLOOR + 1, (Math.random() - 0.5) * 40, -6 - Math.random() * 14 * v, 0.5 + Math.random() * 0.5]);\n}\n\n// What the puppeteer does with the cross in each number, beat by beat.\nfunction script(n, b) {\n  const T = { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0, au: 0 };\n  const ph = fr(b), bu = sin(PI * ph), odd = floor(b) & 1;\n  if (n === 0) {\n    // The jig: a hop on every beat, knees and arms up in turn, across and back.\n    const tr = (TAU * b) / 8, sw = sin((PI * b) / 2), e = 1 - sm(LEN[0] - 1.5, LEN[0], b);\n    (T.x = 32 + 10 * sin(tr) * e), (T.w = 0.5 * cos(tr) * e), (T.y -= 3.5 * bu * e), (T[odd ? \"kR\" : \"kL\"] = 9 * bu * bu * e);\n    (T.r = 0.3 * sw), (T.hL = 13 * max(0, sw) * e), (T.hR = 13 * max(0, -sw) * e);\n  } else if (n === 1) {\n    // The bow: the head threads let out, the back thread holds, the cross tips over.\n    const u = sm(1, 2.4, b) * (1 - sm(5, 6.6, b));\n    (T.y += u), (T.p = -0.5 * u), (T.sH = 11 * u), (T.sB = -3 * u), (T.lean = 1.3 * u), (T.w = 0.6 * u), (T.hR = 12 * sm(0.2, 1.2, b) * (1 - sm(4.6, 6.2, b))), (T.au = 1);\n  } else if (n === 2) {\n    // The flop: all let go, a heap on the floor, the head comes up to look round, lifted back up, a shake.\n    const dr = sm(0.8, 1.15, b) * (1 - sm(5.2, 6.8, b)), lk = sm(2.2, 2.9, b) * (1 - sm(4.4, 5, b));\n    (T.x = 27), (T.y += 26 * dr), (T.sH = -14 * lk * dr), (T.w = 0.7 * dr + 0.6 * sin((TAU * (b - 2.2)) / 2.2) * lk), (T.au = 1);\n    T.r = 0.35 * sin(TAU * b) * sm(6.8, 7.3, b) * (1 - sm(9, 9.8, b));\n  } else if (n === 3) {\n    // The stamp: a knee drawn up slowly and let drop hard on the beat.\n    (T.x = 37), (T[odd ? \"kR\" : \"kL\"] = 11 * sm(0.1, 0.6, ph) * (1 - sm(0.82, 0.9, ph))), (T.r = (odd ? 0.22 : -0.22) * bu);\n    (T.lean = -0.25), (T.hL = T.hR = 5), (T.w = 0.3 * sin((TAU * b) / 4)), (T.au = 1);\n  } else {\n    // The strut: across the stage and back, facing the way it goes.\n    const tr = (TAU * b) / 12;\n    (T.x = 32 + 12 * cos(tr)), (T.w = -0.8 * sin(tr)), (T.y -= 1.5 * bu), (T[odd ? \"kR\" : \"kL\"] = 6 * bu), (T.r = 0.25 * sin(PI * b)), (T.p = -0.1);\n  }\n  return T;\n}\n\n// K1's leap, in seconds: crouch, jerk up, fly, land, bow.\nfunction leap(P, T, rd) {\n  const u = P.leap, a = 1 - sm(2.7, 3.3, u), air = sm(0.25, 0.4, u) * (1 - sm(0.55, 0.95, u)), tuck = sm(0.3, 0.45, u) * (1 - sm(0.75, 0.95, u));\n  const bow = sm(1.2, 1.7, u) * (1 - sm(2.4, 3, u)), cr = sm(0, 0.2, u) * (1 - sm(0.22, 0.32, u));\n  (T.y = mix(T.y, GRIP + 4 * cr - 10 * air + 4 * bow, a)), (T.kL = T.kR = mix(T.kL, 7 * tuck, a)), (T.hL = T.hR = mix(T.hL, 15 * tuck, a));\n  (T.sH = mix(T.sH, 10 * bow, a)), (T.lean = mix(T.lean, bow, a)), (T.p = mix(T.p, -0.5 * bow, a)), (T.r *= 1 - a), (T.w *= 1 - a), (T.x = mix(T.x, P.C.x, a));\n  if (u \u003c 0.4 && u + rd >= 0.4) P.flash = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05), d = (rd * cl(k[1], 0.2, 3)) / 2;\n  (P.k1 = cl(k[0], 0, 1)), (P.s4 = cl(k[3], -1, 1));\n  const nk = round(cl(k[2], 0, 4));\n  if (nk !== P.nk) {\n    if (P.nk \u003c 0) P.cue = CUES[nk].slice();\n    (P.nk = P.num = nk), (P.b = 0);\n  }\n  if ((P.b += d * BPS) >= LEN[P.num]) (P.b -= LEN[P.num]), (P.num = (P.num + 1) % 5);\n  if (input.btnPressed && input.btnPressed[0] && P.leap \u003c 0) P.leap = 0;\n  const T = script(P.num, P.b), C = P.C, x0 = C.x;\n  if (P.leap >= 0 && (leap(P, T, rd), (P.leap += rd) > 3.3)) P.leap = -1;\n  const ex = min(1, rd / 0.45), e = min(1, rd / 0.05);\n  for (const key in C) C[key] = mix(C[key], T[key], key === \"x\" ? ex : e);\n  // Steps wherever the cross travels in a number without its own.\n  const dx = abs(C.x - x0);\n  P.walk += dx / 5;\n  if (T.au && rd > 0) {\n    const lift = min(1, dx / rd / 6) * 6 * sin(PI * fr(P.walk)) ** 2;\n    floor(P.walk) & 1 ? (C.kR = max(C.kR, lift)) : (C.kL = max(C.kL, lift));\n  }\n  const A = anchors(C), n = max(1, ceil(rd * 120 - 1e-6));\n  if (rd > 0) phys(P, P.A, A, rd / n, n);\n  P.A = A;\n  for (let i = 0; i \u003c 10; i++) P.cue[i] = mix(P.cue[i], CUES[P.num][i], min(1, rd * 2.2));\n  // The follow spot keeps to the body.\n  const p = P.p;\n  (P.sx = mix(P.sx, (p[6] + p[9] + p[12] + p[15]) / 4, min(1, rd * 3.5))), (P.sy = mix(P.sy, (p[7] + p[10] + p[13] + p[16]) / 4 + 3, min(1, rd * 2.5)));\n  // The bell on the cap swings after the head.\n  const hd = head(p), B = P.bell, gx = hd.x + hd.ux * 7 - hd.uy * 6, gy = hd.y + hd.uy * 7 + hd.ux * 6 + 2;\n  (B[2] += ((gx - B[0]) * 160 - B[2] * 7) * rd), (B[3] += ((gy - B[1]) * 160 - B[3] * 7 + 60) * rd), (B[0] += B[2] * rd), (B[1] += B[3] * rd);\n  (B[0] = cl(B[0], gx - 6, gx + 6)), (B[1] = cl(B[1], gy - 6, gy + 6));\n  P.dust = P.dust.filter((s) => ((s[3] += 50 * rd), (s[0] += s[2] * rd), (s[1] = min(FLOOR + 2, s[1] + s[3] * rd)), (s[4] -= rd) > 0));\n  (P.stc[0] -= rd), (P.stc[1] -= rd), (P.flash = max(0, P.flash - rd * 1.5));\n}\n\n// The head: its middle, which way is up, how far it is turned and nodded.\nfunction head(p) {\n  const x = (p[0] + p[3]) / 2, y = (p[1] + p[4]) / 2 - 0.5, z = (p[2] + p[5]) / 2, sx = (p[6] + p[9]) / 2, sy = (p[7] + p[10]) / 2, sz = (p[8] + p[11]) / 2;\n  const l = Math.hypot(x - sx, y - sy) || 1;\n  return { x, y, ux: (x - sx) / l, uy: (y - sy) / l, yaw: atan2(-(p[5] - p[2]), p[3] - p[0]), nod: (z - sz) / 6.3 };\n}\n\n// What does not move: velvet, rail, backcloth, boards, apron.\nfunction paint(P) {\n  const A = P.alb, I = P.pi;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.05, 0.045, 0.06];\n    I[i] = -1;\n    if (y >= RAIL && y \u003c= RAIL + 3) {\n      const g = (0.8 + 0.3 * hash(floor((x + y * 7) / 11), y)) * (y === RAIL ? 1.2 : y === RAIL + 3 ? 0.6 : 1) * (0.92 + 0.08 * n);\n      c = [0.55 * g, 0.36 * g, 0.22 * g];\n    } else if (y >= CLOTH - 2 && y \u003c CLOTH) c = [0.13, 0.1, 0.08];\n    else if (y >= CLOTH && y \u003c BACK) {\n      // Painted night: stars over two rows of hills, in soft folds.\n      const hf = 86 + 4 * sin(x * 0.09 + 0.5) + 2 * sin(x * 0.27 + 1), hn = 97 + 3 * sin(x * 0.13 + 2) + 1.5 * sin(x * 0.41);\n      const cx = floor(x / 7), cy = floor(y / 8), r = hash(cx, cy + 50), sx = cx * 7 + 1 + floor(r * 5), sy = cy * 8 + 1 + floor(hash(cx + 9, cy) * 6);\n      I[i] = y >= hn ? 2 : y >= hf ? 1 : r \u003c 0.5 && y \u003c hf - 3 ? (x === sx && y === sy ? 3 : abs(x - sx) + abs(y - sy) === 1 ? 4 : 0) : 0;\n      c = [(0.8 + 0.2 * (0.5 + 0.5 * sin(x * 0.95 + 0.6 * sin(y * 0.05)))) * (0.95 + 0.1 * n), 0, 0];\n    } else if (y >= BACK && y \u003c APRON) {\n      // Boards running towards you.\n      const u = (x - 31.5) / ((y - 30) / (APRON - 30)) / 6 + 0.5, bd = floor(u), g = (0.8 + 0.2 * hash(bd, 3)) * mix(0.45, 1, cl(min(fr(u), 1 - fr(u)) * 9 - 0.3, 0, 1)) * (y > APRON - 3 ? 1.12 : 1) * (0.92 + 0.14 * hash(x, bd * 31 + floor(y / 3)));\n      c = [0.6 * g, 0.42 * g, 0.27 * g];\n    } else if (y >= APRON) c = y === APRON ? [0.4, 0.28, 0.18] : [0.14, 0.09, 0.07];\n    (A[o] = c[0]), (A[o + 1] = c[1]), (A[o + 2] = c[2]);\n  }\n}\n\nlet F, L, M, MODE, SIDE;\n// One LED of the puppet or cross: the shadow mask, or its colour in the light there.\nfunction dot(x, y, c, nx = 0, flat = 0) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const i = y * W + x, o = i * 3;\n  if (MODE === 0) return void (M[i] = 1);\n  const k = 1 - 0.2 * nx * nx + 0.4 * SIDE * nx;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = c[j] * max(flat, L[o + j]) * k;\n}\n// A capsule; the colour may be a function of how far along.\nfunction seg(x0, y0, x1, y1, r, c, flat = 0) {\n  const dx = x1 - x0, dy = y1 - y0, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = floor(min(y0, y1) - r); y \u003c= ceil(max(y0, y1) + r); y++)\n    for (let x = floor(min(x0, x1) - r); x \u003c= ceil(max(x0, x1) + r); x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / l2, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      if (ex * ex + ey * ey \u003c= r * r) dot(x, y, typeof c === \"function\" ? c(t) : c, cl(ex / r, -1, 1), flat);\n    }\n}\nconst disc = (x, y, r, c, flat) => seg(x, y, x, y, r, c, flat);\n\n// A thread: one LED wide over two columns, a faint halo, a glint that slides as it tilts.\nfunction thread(ax, ay, bx, by, gl) {\n  const n = ceil(abs(by - ay)) + 1, tilt = (bx - ax) / (by - ay || 1), g0 = 0.5 + 6 * (tilt + SIDE * 0.06);\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n, x = mix(ax, bx, t), y = round(mix(ay, by, t)), x0 = floor(x), f = x - x0;\n    if (y \u003c 0 || y >= H) continue;\n    if (MODE === 0) {\n      if (x0 >= 0 && x0 \u003c W) M[y * W + x0] = max(M[y * W + x0], 0.45);\n      continue;\n    }\n    const o = (y * W + cl(x0, 0, W - 1)) * 3, gls = gl * 150 * exp(-((((t - g0) * n) / 5) ** 2));\n    for (let e = -1; e \u003c 3; e++) {\n      const xx = x0 + e, a = e \u003c 0 ? 0.12 - 0.12 * f : e ? (e > 1 ? 0.12 * f : 0.12 + 0.88 * f) : 1 - 0.88 * f, q = (y * W + xx) * 3;\n      if (xx \u003c 0 || xx >= W) continue;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += a * (24 + 64 * L[o + j] + gls);\n    }\n  }\n}\n\nfunction puppet(P, C1, C2) {\n  const p = P.p, X = (i) => p[i * 3], Y = (i) => p[i * 3 + 1], Z = (i) => p[i * 3 + 2], tz = (Z(2) + Z(3) + Z(4) + Z(5)) / 4;\n  const stock = (t) => (floor(t * 5) & 1 ? C1 : [235, 228, 210]);\n  const limb = (a, b, c, up, low, r1, r2) => {\n    seg(X(a), Y(a), X(b), Y(b), r1, up), seg(X(b), Y(b), X(c), Y(c), r2, low);\n  };\n  const arm = (s) => (limb(2 + s, 6 + s, 8 + s, C2, C1, 1.6, 1.2), disc(X(8 + s), Y(8 + s), 1.4, FACE));\n  const leg = (s) => {\n    limb(4 + s, 10 + s, 12 + s, C2, stock, 1.8, 1.2);\n    const fx = X(12 + s), fy = Y(12 + s) + 1.2, yw = atan2(-(Z(3) - Z(2)), X(3) - X(2));\n    seg(fx - 1.2, fy, fx + 1.2 + 2.4 * sin(yw), fy, 1.1, C2.map((v) => v * 0.55)), dot(round(fx + 2.4 + 2.6 * sin(yw)), round(fy - 1), GOLD);\n  };\n  const parts = [[(Z(6) + Z(8)) / 2, () => arm(0)], [(Z(7) + Z(9)) / 2, () => arm(1)], [(Z(10) + Z(12)) / 2, () => leg(0)], [(Z(11) + Z(13)) / 2, () => leg(1)]];\n  for (const [z, f] of parts) if (z \u003c tz - 1) f();\n  // The doublet in diamonds, flaring to a hem of points, with a belt.\n  const sx = (X(2) + X(3)) / 2, sy = (Y(2) + Y(3)) / 2, hx = (X(4) + X(5)) / 2, hy = (Y(4) + Y(5)) / 2, ax = hx - sx, ay = hy - sy, al = ax * ax + ay * ay || 1;\n  let ex = X(3) - X(2) + X(5) - X(4), ey = Y(3) - Y(2) + Y(5) - Y(4);\n  const el = Math.hypot(ex, ey) || 1, hwS = max(2.5, Math.hypot(X(3) - X(2), Y(3) - Y(2)) / 2), hwH = max(2.5, Math.hypot(X(5) - X(4), Y(5) - Y(4)) * 0.62);\n  (ex /= el), (ey /= el);\n  for (let y = floor(min(sy, hy) - 6); y \u003c= ceil(max(sy, hy) + 6); y++)\n    for (let x = floor(min(sx, hx) - 7); x \u003c= ceil(max(sx, hx) + 7); x++) {\n      const v = ((x - sx) * ax + (y - sy) * ay) / al, hw = mix(hwS, hwH, v), u = ((x - sx - ax * v) * ex + (y - sy - ay * v) * ey) / hw;\n      if (v \u003c -0.05 || abs(u) > 1 || v > 1.1 + 0.12 * abs(fr(u * 2.5) - 0.5) * 2) continue;\n      const belt = v > 0.84 && v \u003c 0.94, dia = (floor(u * 1.6 + v * 3.2) + floor(u * 1.6 - v * 3.2)) & 1;\n      dot(x, y, belt ? (abs(u) \u003c 0.22 ? GOLD : [60, 40, 30]) : dia ? C1 : C2, u);\n    }\n  for (const [z, f] of parts) if (z >= tz - 1) f();\n  // The ruff, the head, the face, the cap and its bell.\n  seg(X(2), Y(2) - 1, X(3), Y(3) - 1, 1.7, (t) => (floor(t * 9) & 1 ? [250, 246, 236] : [205, 200, 192]));\n  const hd = head(p), R = 4.3, px = -hd.uy, py = hd.ux;\n  disc(hd.x, hd.y, R, FACE);\n  if (MODE && hd.nod \u003c 0.7)\n    for (const [ph, hy, c] of [[0.5, -0.4, [30, 22, 34]], [0.8, 1.2, [240, 120, 110]], [0, 2.1, [150, 40, 46]], [-0.5, -0.4, [30, 22, 34]], [-0.8, 1.2, [240, 120, 110]]]) {\n      const a = ph + hd.yaw;\n      if (cos(a) > 0.25) dot(round(hd.x + R * 0.85 * sin(a)), round(hd.y + hy + hd.nod * 3), c);\n    }\n  const b0x = hd.x + hd.ux * 3.1, b0y = hd.y + hd.uy * 3.1, b1x = hd.x + hd.ux * 8 + px, b1y = hd.y + hd.uy * 8 + py, [bx, by] = P.bell;\n  for (let i = 0, lx = b0x, ly = b0y; i \u003c= 8; i++) {\n    const t = i / 8, x = mix(mix(b0x, b1x, t), mix(b1x, bx, t), t), y = mix(mix(b0y, b1y, t), mix(b1y, by, t), t);\n    seg(lx, ly, x, y, mix(3.3, 0.8, t), C1), (lx = x), (ly = y);\n  }\n  seg(hd.x + hd.ux * 2.3 - px * 4, hd.y + hd.uy * 2.3 - py * 4, hd.x + hd.ux * 2.3 + px * 4, hd.y + hd.uy * 2.3 + py * 4, 0.9, C2);\n  disc(bx, by, 1.3, GOLD);\n}\n\n// The puppeteer's sleeves and hands, the cross and the leg bar.\nfunction cross(P) {\n  const A = P.A, [gx, gy] = A[7], sleeve = [46, 38, 60], skin = [232, 176, 140], cuff = [236, 232, 222];\n  const arm = (x0, x1, y1) => seg(x0, -3, x1, y1, 2.6, (t) => (t > 0.84 ? cuff : sleeve), 0.32);\n  seg(A[5][0] - 1.5, A[5][1], A[6][0] + 1.5, A[6][1], 0.7, WOOD, 0.35);\n  seg(gx, gy, A[4][0], A[4][1], 0.9, WOOD, 0.35), seg(A[2][0], A[2][1], A[3][0], A[3][1], 0.8, WOOD, 0.35);\n  for (let j = 0; j \u003c 7; j++) dot(round(A[j][0]), round(A[j][1]), [220, 220, 230], 0, 0.5);\n  arm(gx + 17, gx + 1.5, gy - 1.5), disc(gx + 0.5, gy - 0.5, 2.2, skin, 0.4);\n  arm(A[5][0] - 22, A[5][0] - 2.5, A[5][1] - 1), disc(A[5][0] - 2, A[5][1] - 0.5, 2, skin, 0.4);\n}\n\nfunction stage(P, pal) {\n  const [wr, wg, wb, sr0, sg0, sb0, rad0, foot, pin, lamp] = P.cue, s = P.s4, A = P.alb, I = P.pi, p = P.p;\n  const fl = 1 + 0.5 * P.flash, rad = rad0 + 7 * P.flash, S = [sr0 * fl, sg0 * fl, sb0 * fl], WS = [wr, wg, wb];\n  const px = P.sx - s * 11, py = P.sy, rx = rad * (1 + 0.45 * abs(s)), ry = rad * 1.35, sdx = -s * 15, fx = (p[36] + p[39]) / 2, pinX = P.sx;\n  const lift = [0, 1].map((j) => 1 - sm(0, 8, FLOOR - p[37 + j * 3]));\n  for (let y = 0; y \u003c H; y++) {\n    const ft = y \u003c APRON ? foot * exp((y - APRON) / 14) : 0, wash = y \u003c CLOTH - 2 ? (y >= RAIL && y \u003c= RAIL + 3 ? 0.3 : 0.08) : 1, cw = 2 + (y + 12) * 0.085;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = (x - px) / rx, dy = (y - py) / ry, pool = 1 - sm(0.84, 1, sqrt(dx * dx + dy * dy));\n      const lm = lamp * (1 / (1 + ((x - 4.5) ** 2 + (y - 10) ** 2) / 260) + 1 / (1 + ((x - 59.5) ** 2 + (y - 10) ** 2) / 260));\n      let cone = 0;\n      if (pin > 0.01) cone = y >= BACK ? pin * (1 - sm(0.7, 1, sqrt(((x - pinX) / 12) ** 2 + ((y - FLOOR - 1) / 4) ** 2))) : pin * (1 - sm(0.6, 1, abs(x - pinX) / cw));\n      for (let j = 0; j \u003c 3; j++) L[o + j] = wash * WS[j] + pool * S[j] + ft * FT[j] + lm * LM[j] + cone * PK[j];\n      // The shadow stands up from the feet, larger, away from the spot.\n      let sh = 0, k = 1;\n      if (y >= CLOTH && y \u003c APRON && pool > 0) {\n        const mx = round(fx + (x - fx - sdx) / 1.12), my = round(FLOOR + (y - FLOOR + 3) / 1.12);\n        if (mx >= 0 && mx \u003c W && my >= 0 && my \u003c H) sh = M[my * W + mx] * pool * 0.8;\n      }\n      if (y > BACK && y \u003c APRON) for (let j = 0; j \u003c 2; j++) k *= 1 - 0.6 * lift[j] * exp(-1.5 * (((x - p[36 + j * 3]) / 3.5) ** 2 + ((y - FLOOR - 1.5) / 1.3) ** 2));\n      const c = I[i] >= 0 ? pal[I[i]] : null, f = c ? A[o] : 1, cf = c ? 0.8 * cone : 0;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = (c ? c[j] : A[o + j]) * f * k * (L[o + j] - sh * S[j] - cf * PK[j]) * 255;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  [F, L, M, SIDE] = [P.f, P.lt, P.m, P.s4];\n  const h = 0.36 + P.k1, hc = 0.61 + 0.3 * sin(TAU * P.k1), A = P.A, p = P.p;\n  const C1 = hsv(h, 0.8, 0.8).map((v) => v * 255), C2 = hsv(h + 0.06, 0.75, 0.42).map((v) => v * 255);\n  const sky = hsv(hc, 0.62, 0.34), star = [0.95, 0.78, 0.4], pal = [sky, hsv(hc + 0.06, 0.55, 0.46), hsv(hc + 0.12, 0.6, 0.58), star, sky.map((v, j) => mix(v, star[j], 0.4))];\n  const threads = (from, to) => {\n    for (let s = from; s \u003c to; s++) {\n      const m = mid(p, STR[s]), side = s \u003c 2 ? (s ? 2 : -2) * cos(head(p).yaw) : 0;\n      thread(A[s][0], A[s][1], m[0] + side, m[1] - (s \u003c 2 ? 1 : 0), s === 4 ? 0.4 : 1);\n    }\n  };\n  // The shadow first: the puppet and its threads as a mask.\n  M.fill(0), (MODE = 0), threads(0, 7), puppet(P, C1, C2);\n  (MODE = 1), stage(P, pal);\n  threads(0, 7), puppet(P, C1, C2), cross(P);\n  // Dust from the stamps, the haze in the pin beam, the footlights.\n  for (const [x, y, , , l] of P.dust) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) F[o + j] += [190, 160, 130][j] * l * 0.6 * max(0.4, L[o + j]);\n  }\n  const pin = P.cue[8];\n  if (pin > 0.01)\n    for (let y = 0; y \u003c BACK; y++) {\n      const cw = 2 + (y + 12) * 0.085;\n      for (let x = 0; x \u003c W; x++) {\n        const c = pin * 0.09 * (1 - sm(0.6, 1, abs(x - P.sx) / cw)) * 255;\n        for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += c * PK[j];\n      }\n    }\n  // The clip lamps on the rail and the footlights.\n  for (const x of [4.5, 59.5]) {\n    seg(x - 2, 7.5, x + 2, 7.5, 1.2, [40, 80, 58], 0.5), seg(x - 0.5, 9.2, x + 0.5, 9.2, 0.6, [255, 226, 170], P.cue[9]);\n    for (let i = -3; i \u003c 4; i++) for (let j = 0; j \u003c 3; j++) F[(10 * W + round(x + i)) * 3 + j] += (80 * P.cue[9] * LM[j]) / (1 + i * i);\n  }\n  const fb = min(1, P.cue[7] * 1.2 + 0.15);\n  for (const x of [6, 19, 32, 45, 57])\n    for (let i = -2; i \u003c= 3; i++) {\n      const a = i === 0 || i === 1 ? fb : fb * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[(125 * W + x + i) * 3 + j] += 255 * a * FT[j];\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Costume","min":0,"max":1,"about":"The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald."},{"name":"Speed","min":0.2,"max":3,"about":"The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower."},{"name":"Number","min":0,"max":4,"about":"The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order."},{"name":"Spot","min":-1,"max":1,"about":"Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side."}],"start":[0,2,0,0.06],"measures":{"motion":0.7728,"detail":0.0499,"edges":0.328,"complexity":1.7055,"coverage":0.7031,"colour":0.18,"drift":0.1687},"knobResponse":[0.0905,0.1199,0.1924,0.0547]},{"slug":"maze","title":"Maze","family":"algo","round":2,"note":"미로를 한 칸씩 파고 나면 입구에서 너비 우선 물결이 퍼져 복도마다 거리만큼 색을 입혀요. 가장 짧은 길이 밝게 그어지고, 미로가 부서진 자리에 다음 미로가 파여요.","idea":"A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.","buttons":"K1 tap crumbles the maze and carves a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-maze","type":"code","name":"maze","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it."},{"name":"Speed","min":0,"max":4,"about":"Carving, flood and trace together, from about 50 carving steps a second to about 1100."},{"name":"Cell","min":2,"max":4,"about":"Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25."},{"name":"Carver","min":0,"max":3,"about":"0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row."}],"start":[0,2,2,0.06],"measures":{"motion":0.0785,"detail":0.1747,"edges":0.9998,"complexity":0.1404,"coverage":0.6288,"colour":0.2889,"drift":0.1789},"knobResponse":[0.1257,0.2208,0.2744,0.1999]},{"slug":"meander","title":"Meander","family":"line","round":30,"note":"패널 한가운데 세로로 난 길을 12번에서 32번 건너는 닫힌 곡선 하나예요. 한쪽 아치들이 길 위로 누웠다가 새 짝으로 펴져도 곡선은 늘 하나로 닫혀요.","idea":"A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.","buttons":"K1 tap folds both sides at once and opens a fresh meander of the same order.","code":"// ===== Patternflow pattern =====\n// Title:   Meander\n// Family:  line\n// Idea:    A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: meanders (Vladimir Arnold, 1988), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1\n//\n// Knob 1: Hue. Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse.\n// Knob 2: Speed. At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again.\n// Knob 3: Crossings. How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander.\n// Knob 4: Hollow. At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left.\n// Buttons: K1 tap folds both sides at once and opens a fresh meander of the same order.\n\n// The road runs down the middle, between columns 31 and 32. The 2n crossings\n// sit evenly on it from row 2 to row 126, 4 LEDs apart at n = 16, and the\n// widest arc on a side reaches 28.5 LEDs out, so its line stays off the wall.\n// A meander of order n is a pair of non-crossing matchings of those points,\n// arcs on the left and arcs on the right, that join into one loop. Arnold\n// asked how many there are: 1, 2, 8, 42, 262, 1828, ..., each about ten\n// times the last by n = 16 and the ratio creeping up towards 12.26. No\n// formula is known.\nconst W = 64, H = 128, NP = W * H, MID = 32, WMAX = 28.5, TOP = 2, SPAN = 124;\nconst { min, max, floor, ceil, sqrt, cos, acos, abs, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n// The arc's distance from the road: its semicircle r, cut off softly at the\n// width w its nesting gives it. Both grow from an arc to any arc round it,\n// so nested arcs never touch.\nconst smin = (w, r) => (w \u003c= 0 || r \u003c= 0 ? 0 : (w * r) / sqrt(sqrt(w * w * w * w + r * r * r * r)));\n\n// A non-crossing perfect matching of 2n points as a uniform random Dyck word,\n// by the cycle lemma: shuffle n opens and n + 1 closes, start just after the\n// first lowest point of the walk, drop the last close.\nconst WALK = new Int8Array(33);\nfunction dyck(n, P) {\n  const m = 2 * n + 1, a = WALK;\n  for (let i = 0; i \u003c m; i++) a[i] = i \u003c n ? 1 : -1;\n  for (let i = m - 1; i > 0; i--) {\n    const j = floor(random() * (i + 1)), t = a[i];\n    (a[i] = a[j]), (a[j] = t);\n  }\n  let s = 0, lo = 0, at = 0;\n  for (let i = 0; i \u003c m; i++) if ((s += a[i]) \u003c lo) (lo = s), (at = i);\n  const st = [];\n  for (let k = 0; k \u003c 2 * n; k++) {\n    if (a[(at + 1 + k) % m] > 0) st.push(k);\n    else {\n      const o = st.pop();\n      (P[o] = k), (P[k] = o);\n    }\n  }\n}\n\n// Left arcs and right arcs together are one closed curve when walking left,\n// right, left, ... from point 0 meets every point before it comes back.\nfunction oneLoop(L, R, n2) {\n  let i = 0, c = 0;\n  do (i = R[L[i]]), (c += 2);\n  while (i !== 0 && c \u003c= n2);\n  return c === n2;\n}\n\n// Each arc's height: 0 when no arc lies inside it, else one more than the\n// highest arc directly inside. It sets the arc's width, so a nest of any\n// depth fits between the road and the wall.\nfunction heights(P, n2, h) {\n  const st = new Int8Array(n2 + 1);\n  let sp = 0;\n  st[0] = -1;\n  for (let i = 0; i \u003c n2; i++) {\n    if (P[i] > i) st[++sp] = -1;\n    else {\n      const v = st[sp--] + 1;\n      h[i] = h[P[i]] = v;\n      if (v > st[sp]) st[sp] = v;\n    }\n  }\n  return st[0];\n}\n\nfunction dress(n, L, R) {\n  const hL = new Int8Array(2 * n), hR = new Int8Array(2 * n);\n  return { n, L, R, hL, hR, HL: heights(L, 2 * n, hL), HR: heights(R, 2 * n, hR) };\n}\n\n// A uniform random meander of order n: draw both sides until they close into\n// one loop. About one pair in 10 does at n = 6 and one in 210 at n = 16.\nfunction meander(n) {\n  for (; n > 1; n--) {\n    const L = new Int8Array(2 * n), R = new Int8Array(2 * n);\n    for (let t = 0; t \u003c 4000; t++) {\n      dyck(n, L), dyck(n, R);\n      if (oneLoop(L, R, 2 * n)) return dress(n, L, R);\n    }\n  }\n  return dress(1, new Int8Array([1, 0]), new Int8Array([1, 0]));\n}\n\n// The same meander with side X drawn again, the other side kept.\nfunction reside(M, X) {\n  const n = M.n, Q = new Int8Array(2 * n);\n  for (let t = 0; t \u003c 4000; t++) {\n    dyck(n, Q);\n    if (X ? oneLoop(M.L, Q, 2 * n) : oneLoop(Q, M.R, 2 * n)) return X ? dress(n, M.L, Q) : dress(n, Q, M.R);\n  }\n  return M;\n}\n\nexport function setup(params) {\n  params.s = {\n    M: null, n2: 0, ph: 0, side: 2, u: 0, next: 0, both: false, flow: 0, ck: 0, cu: 0,\n    // the loop, arc by arc: from point, to point, side (0 left, 1 right)\n    AF: new Int8Array(32), AT: new Int8Array(32), AS: new Int8Array(32),\n    // each kept arc's place on the loop before the last swap, at its start and end\n    OS: new Float32Array(32), OE: new Float32Array(32), OK: new Uint8Array(32), old: 0,\n    len: new Float32Array(32), cum: new Float32Array(33),\n    gp: new Float32Array(32 * 6), D: new Float32Array(NP), LA: new Int8Array(NP), LT: new Float32Array(NP),\n    hue: 0, speed: 2, hollow: 0.06, nT: 6,\n  };\n}\n\n// Walk the loop from point a, first along side s.\nfunction order(P, a, s) {\n  const M = P.M;\n  for (let k = 0; k \u003c P.n2; k++) {\n    const b = s ? M.R[a] : M.L[a];\n    (P.AF[k] = a), (P.AT[k] = b), (P.AS[k] = s);\n    (a = b), (s ^= 1);\n  }\n}\n\n// Swap in new arcs while the side is flat on the road. A one-side swap keeps\n// the pulse on the kept arc it is on, or the next one, and lets every kept\n// arc carry its old colours over into the new loop's while the side opens.\nfunction swap(P) {\n  const X = P.side;\n  if (X === 2) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), floor(random() * 2));\n    (P.ck = 0), (P.cu = 0), (P.old = 0), (P.side = 2);\n    return;\n  }\n  const Q = 1 - X, n2 = P.n2, L = P.cum[n2] || 1;\n  const os = new Float32Array(n2), oe = new Float32Array(n2);\n  for (let k = 0; k \u003c n2; k++)\n    if (P.AS[k] === Q) {\n      const i = P.AF[k], j = P.AT[k];\n      (os[i] = P.cum[k] / L), (oe[i] = P.cum[k + 1] / L);\n      (os[j] = P.cum[k + 1] / L), (oe[j] = P.cum[k] / L);\n    }\n  let a = P.AF[P.ck];\n  if (P.AS[P.ck] !== Q) (a = P.AT[P.ck]), (P.cu = 0);\n  P.M = reside(P.M, X);\n  order(P, a, Q);\n  P.ck = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    P.OK[k] = P.AS[k] === Q ? 1 : 0;\n    (P.OS[k] = os[P.AF[k]]), (P.OE[k] = oe[P.AF[k]]);\n  }\n  P.old = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nT = cl(round(cl(k[2], 12, 32) / 2), 6, 16);\n  P.hollow = cl(k[3], 0, 1);\n  if (!P.M) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), 0);\n    (P.ph = 2), (P.side = 2), (P.u = 0);\n  }\n  const s = P.speed;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.both = true;\n    if (P.ph === 0) P.u = 1;\n  }\n  // 0 hold, 1 close, 2 open; in clock units that run at Speed a second.\n  if (P.ph === 0) {\n    P.u += (d * s) / 7;\n    if (P.M.n !== P.nT) P.u = 1;\n    if (P.u >= 1) {\n      P.side = P.both || P.M.n !== P.nT ? 2 : P.next;\n      if (P.side \u003c 2) P.next ^= 1;\n      (P.both = false), (P.ph = 1), (P.u = 0);\n    }\n  } else if (P.ph === 1) {\n    P.u += (d * s) / 1.2;\n    if (P.u >= 1) swap(P), (P.ph = 2), (P.u = 0);\n  } else {\n    P.u += (d * s) / 1.8;\n    if (P.u >= 1) (P.ph = 0), (P.u = 0), (P.old = 0);\n  }\n  P.flow += d * s * 0.04;\n  // The pulse: 40 LEDs of curve a second per unit of Speed.\n  P.cu += (d * s * 40) / max(4, P.len[P.ck]);\n  while (P.cu >= 1) (P.cu -= 1), (P.ck = (P.ck + 1) % P.n2);\n}\n\n// The colour wheel once round the loop, 1024 steps.\nconst LUT = new Float32Array(1024 * 3);\nfor (let i = 0; i \u003c 1024; i++) {\n  const h = (i / 1024) * 6, j = floor(h), f = h - j;\n  const c = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][j];\n  for (let q = 0; q \u003c 3; q++) LUT[i * 3 + q] = c[q] ** 0.9;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.M) return;\n  const M = P.M, n2 = P.n2, sp = SPAN / (n2 - 1), g = P.gp;\n  const open = P.ph === 0 ? 1 : P.ph === 1 ? 1 - ease(P.u) : ease(P.u);\n  const sL = P.side === 1 ? 1 : open, sR = P.side === 0 ? 1 : open;\n  const mix = P.old ? ease(P.ph === 2 ? P.u : 1) : 1;\n  // Each arc: top and bottom y, centre, radius, width, side sign. While a\n  // side folds, its arcs all lose width at one rate, so the innermost lie flat\n  // first and the nest never crosses itself; it opens outermost first.\n  for (let k = 0; k \u003c n2; k++) {\n    const a = P.AF[k], b = P.AT[k], side = P.AS[k];\n    const h = side ? M.hR[a] : M.hL[a], Hs = side ? M.HR : M.HL, so = side ? sR : sL;\n    const ya = TOP + a * sp, yb = TOP + b * sp, o = k * 6;\n    (g[o] = min(ya, yb)), (g[o + 1] = max(ya, yb));\n    (g[o + 2] = (ya + yb) / 2), (g[o + 3] = abs(yb - ya) / 2);\n    g[o + 4] = (WMAX / (Hs + 1)) * cl(so * (Hs + 1) - (Hs - h), 0, h + 1);\n    g[o + 5] = side ? 1 : -1;\n  }\n  // The curve: sample every arc in loop order, keep for each LED the nearest\n  // sample, which arc it was on and how far along.\n  const D = P.D, LA = P.LA, LT = P.LT;\n  D.fill(9);\n  P.cum[0] = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    const o = k * 6, c = g[o + 2], R = g[o + 3], w = g[o + 4], sg = g[o + 5];\n    const down = P.AF[k] \u003c P.AT[k], ns = max(4, ceil((PI * R) / 0.4));\n    let px = 0, py = 0, len = 0;\n    for (let j = 0; j \u003c= ns; j++) {\n      const t = (PI * j) / ns, X = MID + sg * smin(w, R * Math.sin(t)), Y = c - R * cos(t);\n      if (j) len += sqrt((X - px) ** 2 + (Y - py) ** 2);\n      (px = X), (py = Y);\n      const tau = down ? j / ns : 1 - j / ns;\n      for (let yy = ceil(Y - 2.3), y1 = floor(Y + 1.3); yy \u003c= y1; yy++) {\n        if (yy \u003c 0 || yy >= H) continue;\n        const ey = yy + 0.5 - Y;\n        for (let xx = ceil(X - 2.3), x1 = floor(X + 1.3); xx \u003c= x1; xx++) {\n          if (xx \u003c 0 || xx >= W) continue;\n          const ex = xx + 0.5 - X, dd = ex * ex + ey * ey, p = yy * W + xx;\n          if (dd \u003c D[p]) (D[p] = dd), (LA[p] = k), (LT[p] = tau);\n        }\n      }\n    }\n    P.len[k] = len;\n    P.cum[k + 1] = P.cum[k] + len;\n  }\n  const Ltot = P.cum[n2] || 1, head = P.cum[P.ck] + P.cu * P.len[P.ck];\n  // Where on the loop a point is, 0..1, with a kept arc's old place blended\n  // into its new one while its side opens.\n  const at = (k, tau) => {\n    let f = (P.cum[k] + tau * P.len[k]) / Ltot;\n    if (mix \u003c 1 && P.OK[k]) {\n      let e = P.OS[k] + tau * (P.OE[k] - P.OS[k]) - f;\n      e -= round(e);\n      f += (1 - mix) * e;\n    }\n    return f;\n  };\n  // The pulse's head, for the glow round it.\n  const ho = P.ck * 6, hr = g[ho + 3], ht = PI * (P.AF[P.ck] \u003c P.AT[P.ck] ? P.cu : 1 - P.cu);\n  const hx = MID + g[ho + 5] * smin(g[ho + 4], hr * Math.sin(ht)), hy = g[ho + 2] - hr * cos(ht);\n  const hue0 = P.hue + 0.55 - P.flow, fillV = 255 * 0.97 * (1 - P.hollow) ** 1.2;\n  const lineS = 0.5 + 0.35 * P.hollow;\n  // The inside by the even-odd rule, row by row: a LED is inside when a ray\n  // from it to the right wall crosses the curve an odd number of times. The\n  // arcs a row meets on one side are nested, so the band a LED sits in takes\n  // the colour of the arc just outside it, at this row.\n  const fl = new Float32Array(16), ka = new Int8Array(16), ta = new Float32Array(16);\n  const fr = new Float32Array(16), kb = new Int8Array(16), tb = new Float32Array(16);\n  for (let yy = 0; yy \u003c H; yy++) {\n    const yc = yy + 0.5;\n    let nl = 0, nr = 0;\n    for (let k = 0; k \u003c n2; k++) {\n      const o = k * 6;\n      if (!(g[o] \u003c yc && yc \u003c g[o + 1])) continue;\n      const c = g[o + 2], R = g[o + 3], dy = yc - c, f = smin(g[o + 4], sqrt(R * R - dy * dy));\n      const t = acos(cl(-dy / R, -1, 1)) / PI, tau = P.AF[k] \u003c P.AT[k] ? t : 1 - t;\n      const A = g[o + 5] > 0 ? fr : fl, KK = g[o + 5] > 0 ? kb : ka, T = g[o + 5] > 0 ? tb : ta;\n      let i = g[o + 5] > 0 ? nr++ : nl++;\n      while (i > 0 && A[i - 1] > f) (A[i] = A[i - 1]), (KK[i] = KK[i - 1]), (T[i] = T[i - 1]), i--;\n      (A[i] = f), (KK[i] = k), (T[i] = tau);\n    }\n    for (let half = 0; half \u003c 2; half++) {\n      const A = half ? fr : fl, KK = half ? kb : ka, T = half ? tb : ta, n = half ? nr : nl;\n      let i = 0;\n      for (let q = 0; q \u003c 32; q++) {\n        const xx = half ? MID + q : MID - 1 - q, dist = q + 0.5, p = yy * W + xx;\n        while (i \u003c n && A[i] \u003c dist) i++;\n        let r = 0, gg = 0, b = 0;\n        const inside = half ? (nr - i) & 1 : (i + nr) & 1;\n        if (inside && fillV > 0) {\n          const f = at(KK[i], T[i]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          (r = LUT[ix] * fillV), (gg = LUT[ix + 1] * fillV), (b = LUT[ix + 2] * fillV);\n        }\n        // The road, a faint line on the dark and a darker one through the colour.\n        if (q === 0) {\n          if (inside && fillV > 0) (r *= 0.6), (gg *= 0.6), (b *= 0.6);\n          else (r += 34), (gg += 36), (b += 44);\n        }\n        const dl = sqrt(D[p]);\n        if (dl \u003c 2.3) {\n          const k = LA[p], f = at(k, LT[p]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          let behind = (head - (P.cum[k] + LT[p] * P.len[k])) % Ltot;\n          if (behind \u003c 0) behind += Ltot;\n          const pulse = exp(-behind / 24) + (behind > Ltot - 3 ? (behind - Ltot + 3) / 3 : 0);\n          const I = cl(1.75 - dl * 1.1, 0, 1), J = cl(2 - dl * 0.75, 0, 1) * pulse, wh = 1 - lineS;\n          let lr = 255 * (wh + lineS * LUT[ix]), lg = 255 * (wh + lineS * LUT[ix + 1]), lb = 255 * (wh + lineS * LUT[ix + 2]);\n          const pv = min(1, pulse);\n          (lr += (255 - lr) * pv), (lg += (250 - lg) * pv), (lb += (235 - lb) * pv);\n          const m = max(I, J);\n          (r += (lr - r) * m), (gg += (lg - gg) * m), (b += (lb - b) * m);\n        }\n        const ex = xx + 0.5 - hx, ey = yc - hy, e2 = ex * ex + ey * ey;\n        if (e2 \u003c 30) {\n          const gl = 0.9 * exp(-e2 / 6);\n          (r += (255 - r) * gl), (gg += (250 - gg) * gl), (b += (235 - b) * gl);\n        }\n        display.setPixel(xx, yy, min(255, r), min(255, gg), min(255, b));\n      }\n    }\n  }\n}\n","layer":{"id":"layer-meander","type":"code","name":"meander","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Meander\n// Family:  line\n// Idea:    A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: meanders (Vladimir Arnold, 1988), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1\n//\n// Knob 1: Hue. Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse.\n// Knob 2: Speed. At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again.\n// Knob 3: Crossings. How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander.\n// Knob 4: Hollow. At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left.\n// Buttons: K1 tap folds both sides at once and opens a fresh meander of the same order.\n\n// The road runs down the middle, between columns 31 and 32. The 2n crossings\n// sit evenly on it from row 2 to row 126, 4 LEDs apart at n = 16, and the\n// widest arc on a side reaches 28.5 LEDs out, so its line stays off the wall.\n// A meander of order n is a pair of non-crossing matchings of those points,\n// arcs on the left and arcs on the right, that join into one loop. Arnold\n// asked how many there are: 1, 2, 8, 42, 262, 1828, ..., each about ten\n// times the last by n = 16 and the ratio creeping up towards 12.26. No\n// formula is known.\nconst W = 64, H = 128, NP = W * H, MID = 32, WMAX = 28.5, TOP = 2, SPAN = 124;\nconst { min, max, floor, ceil, sqrt, cos, acos, abs, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n// The arc's distance from the road: its semicircle r, cut off softly at the\n// width w its nesting gives it. Both grow from an arc to any arc round it,\n// so nested arcs never touch.\nconst smin = (w, r) => (w \u003c= 0 || r \u003c= 0 ? 0 : (w * r) / sqrt(sqrt(w * w * w * w + r * r * r * r)));\n\n// A non-crossing perfect matching of 2n points as a uniform random Dyck word,\n// by the cycle lemma: shuffle n opens and n + 1 closes, start just after the\n// first lowest point of the walk, drop the last close.\nconst WALK = new Int8Array(33);\nfunction dyck(n, P) {\n  const m = 2 * n + 1, a = WALK;\n  for (let i = 0; i \u003c m; i++) a[i] = i \u003c n ? 1 : -1;\n  for (let i = m - 1; i > 0; i--) {\n    const j = floor(random() * (i + 1)), t = a[i];\n    (a[i] = a[j]), (a[j] = t);\n  }\n  let s = 0, lo = 0, at = 0;\n  for (let i = 0; i \u003c m; i++) if ((s += a[i]) \u003c lo) (lo = s), (at = i);\n  const st = [];\n  for (let k = 0; k \u003c 2 * n; k++) {\n    if (a[(at + 1 + k) % m] > 0) st.push(k);\n    else {\n      const o = st.pop();\n      (P[o] = k), (P[k] = o);\n    }\n  }\n}\n\n// Left arcs and right arcs together are one closed curve when walking left,\n// right, left, ... from point 0 meets every point before it comes back.\nfunction oneLoop(L, R, n2) {\n  let i = 0, c = 0;\n  do (i = R[L[i]]), (c += 2);\n  while (i !== 0 && c \u003c= n2);\n  return c === n2;\n}\n\n// Each arc's height: 0 when no arc lies inside it, else one more than the\n// highest arc directly inside. It sets the arc's width, so a nest of any\n// depth fits between the road and the wall.\nfunction heights(P, n2, h) {\n  const st = new Int8Array(n2 + 1);\n  let sp = 0;\n  st[0] = -1;\n  for (let i = 0; i \u003c n2; i++) {\n    if (P[i] > i) st[++sp] = -1;\n    else {\n      const v = st[sp--] + 1;\n      h[i] = h[P[i]] = v;\n      if (v > st[sp]) st[sp] = v;\n    }\n  }\n  return st[0];\n}\n\nfunction dress(n, L, R) {\n  const hL = new Int8Array(2 * n), hR = new Int8Array(2 * n);\n  return { n, L, R, hL, hR, HL: heights(L, 2 * n, hL), HR: heights(R, 2 * n, hR) };\n}\n\n// A uniform random meander of order n: draw both sides until they close into\n// one loop. About one pair in 10 does at n = 6 and one in 210 at n = 16.\nfunction meander(n) {\n  for (; n > 1; n--) {\n    const L = new Int8Array(2 * n), R = new Int8Array(2 * n);\n    for (let t = 0; t \u003c 4000; t++) {\n      dyck(n, L), dyck(n, R);\n      if (oneLoop(L, R, 2 * n)) return dress(n, L, R);\n    }\n  }\n  return dress(1, new Int8Array([1, 0]), new Int8Array([1, 0]));\n}\n\n// The same meander with side X drawn again, the other side kept.\nfunction reside(M, X) {\n  const n = M.n, Q = new Int8Array(2 * n);\n  for (let t = 0; t \u003c 4000; t++) {\n    dyck(n, Q);\n    if (X ? oneLoop(M.L, Q, 2 * n) : oneLoop(Q, M.R, 2 * n)) return X ? dress(n, M.L, Q) : dress(n, Q, M.R);\n  }\n  return M;\n}\n\nexport function setup(params) {\n  params.s = {\n    M: null, n2: 0, ph: 0, side: 2, u: 0, next: 0, both: false, flow: 0, ck: 0, cu: 0,\n    // the loop, arc by arc: from point, to point, side (0 left, 1 right)\n    AF: new Int8Array(32), AT: new Int8Array(32), AS: new Int8Array(32),\n    // each kept arc's place on the loop before the last swap, at its start and end\n    OS: new Float32Array(32), OE: new Float32Array(32), OK: new Uint8Array(32), old: 0,\n    len: new Float32Array(32), cum: new Float32Array(33),\n    gp: new Float32Array(32 * 6), D: new Float32Array(NP), LA: new Int8Array(NP), LT: new Float32Array(NP),\n    hue: 0, speed: 2, hollow: 0.06, nT: 6,\n  };\n}\n\n// Walk the loop from point a, first along side s.\nfunction order(P, a, s) {\n  const M = P.M;\n  for (let k = 0; k \u003c P.n2; k++) {\n    const b = s ? M.R[a] : M.L[a];\n    (P.AF[k] = a), (P.AT[k] = b), (P.AS[k] = s);\n    (a = b), (s ^= 1);\n  }\n}\n\n// Swap in new arcs while the side is flat on the road. A one-side swap keeps\n// the pulse on the kept arc it is on, or the next one, and lets every kept\n// arc carry its old colours over into the new loop's while the side opens.\nfunction swap(P) {\n  const X = P.side;\n  if (X === 2) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), floor(random() * 2));\n    (P.ck = 0), (P.cu = 0), (P.old = 0), (P.side = 2);\n    return;\n  }\n  const Q = 1 - X, n2 = P.n2, L = P.cum[n2] || 1;\n  const os = new Float32Array(n2), oe = new Float32Array(n2);\n  for (let k = 0; k \u003c n2; k++)\n    if (P.AS[k] === Q) {\n      const i = P.AF[k], j = P.AT[k];\n      (os[i] = P.cum[k] / L), (oe[i] = P.cum[k + 1] / L);\n      (os[j] = P.cum[k + 1] / L), (oe[j] = P.cum[k] / L);\n    }\n  let a = P.AF[P.ck];\n  if (P.AS[P.ck] !== Q) (a = P.AT[P.ck]), (P.cu = 0);\n  P.M = reside(P.M, X);\n  order(P, a, Q);\n  P.ck = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    P.OK[k] = P.AS[k] === Q ? 1 : 0;\n    (P.OS[k] = os[P.AF[k]]), (P.OE[k] = oe[P.AF[k]]);\n  }\n  P.old = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nT = cl(round(cl(k[2], 12, 32) / 2), 6, 16);\n  P.hollow = cl(k[3], 0, 1);\n  if (!P.M) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), 0);\n    (P.ph = 2), (P.side = 2), (P.u = 0);\n  }\n  const s = P.speed;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.both = true;\n    if (P.ph === 0) P.u = 1;\n  }\n  // 0 hold, 1 close, 2 open; in clock units that run at Speed a second.\n  if (P.ph === 0) {\n    P.u += (d * s) / 7;\n    if (P.M.n !== P.nT) P.u = 1;\n    if (P.u >= 1) {\n      P.side = P.both || P.M.n !== P.nT ? 2 : P.next;\n      if (P.side \u003c 2) P.next ^= 1;\n      (P.both = false), (P.ph = 1), (P.u = 0);\n    }\n  } else if (P.ph === 1) {\n    P.u += (d * s) / 1.2;\n    if (P.u >= 1) swap(P), (P.ph = 2), (P.u = 0);\n  } else {\n    P.u += (d * s) / 1.8;\n    if (P.u >= 1) (P.ph = 0), (P.u = 0), (P.old = 0);\n  }\n  P.flow += d * s * 0.04;\n  // The pulse: 40 LEDs of curve a second per unit of Speed.\n  P.cu += (d * s * 40) / max(4, P.len[P.ck]);\n  while (P.cu >= 1) (P.cu -= 1), (P.ck = (P.ck + 1) % P.n2);\n}\n\n// The colour wheel once round the loop, 1024 steps.\nconst LUT = new Float32Array(1024 * 3);\nfor (let i = 0; i \u003c 1024; i++) {\n  const h = (i / 1024) * 6, j = floor(h), f = h - j;\n  const c = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][j];\n  for (let q = 0; q \u003c 3; q++) LUT[i * 3 + q] = c[q] ** 0.9;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.M) return;\n  const M = P.M, n2 = P.n2, sp = SPAN / (n2 - 1), g = P.gp;\n  const open = P.ph === 0 ? 1 : P.ph === 1 ? 1 - ease(P.u) : ease(P.u);\n  const sL = P.side === 1 ? 1 : open, sR = P.side === 0 ? 1 : open;\n  const mix = P.old ? ease(P.ph === 2 ? P.u : 1) : 1;\n  // Each arc: top and bottom y, centre, radius, width, side sign. While a\n  // side folds, its arcs all lose width at one rate, so the innermost lie flat\n  // first and the nest never crosses itself; it opens outermost first.\n  for (let k = 0; k \u003c n2; k++) {\n    const a = P.AF[k], b = P.AT[k], side = P.AS[k];\n    const h = side ? M.hR[a] : M.hL[a], Hs = side ? M.HR : M.HL, so = side ? sR : sL;\n    const ya = TOP + a * sp, yb = TOP + b * sp, o = k * 6;\n    (g[o] = min(ya, yb)), (g[o + 1] = max(ya, yb));\n    (g[o + 2] = (ya + yb) / 2), (g[o + 3] = abs(yb - ya) / 2);\n    g[o + 4] = (WMAX / (Hs + 1)) * cl(so * (Hs + 1) - (Hs - h), 0, h + 1);\n    g[o + 5] = side ? 1 : -1;\n  }\n  // The curve: sample every arc in loop order, keep for each LED the nearest\n  // sample, which arc it was on and how far along.\n  const D = P.D, LA = P.LA, LT = P.LT;\n  D.fill(9);\n  P.cum[0] = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    const o = k * 6, c = g[o + 2], R = g[o + 3], w = g[o + 4], sg = g[o + 5];\n    const down = P.AF[k] \u003c P.AT[k], ns = max(4, ceil((PI * R) / 0.4));\n    let px = 0, py = 0, len = 0;\n    for (let j = 0; j \u003c= ns; j++) {\n      const t = (PI * j) / ns, X = MID + sg * smin(w, R * Math.sin(t)), Y = c - R * cos(t);\n      if (j) len += sqrt((X - px) ** 2 + (Y - py) ** 2);\n      (px = X), (py = Y);\n      const tau = down ? j / ns : 1 - j / ns;\n      for (let yy = ceil(Y - 2.3), y1 = floor(Y + 1.3); yy \u003c= y1; yy++) {\n        if (yy \u003c 0 || yy >= H) continue;\n        const ey = yy + 0.5 - Y;\n        for (let xx = ceil(X - 2.3), x1 = floor(X + 1.3); xx \u003c= x1; xx++) {\n          if (xx \u003c 0 || xx >= W) continue;\n          const ex = xx + 0.5 - X, dd = ex * ex + ey * ey, p = yy * W + xx;\n          if (dd \u003c D[p]) (D[p] = dd), (LA[p] = k), (LT[p] = tau);\n        }\n      }\n    }\n    P.len[k] = len;\n    P.cum[k + 1] = P.cum[k] + len;\n  }\n  const Ltot = P.cum[n2] || 1, head = P.cum[P.ck] + P.cu * P.len[P.ck];\n  // Where on the loop a point is, 0..1, with a kept arc's old place blended\n  // into its new one while its side opens.\n  const at = (k, tau) => {\n    let f = (P.cum[k] + tau * P.len[k]) / Ltot;\n    if (mix \u003c 1 && P.OK[k]) {\n      let e = P.OS[k] + tau * (P.OE[k] - P.OS[k]) - f;\n      e -= round(e);\n      f += (1 - mix) * e;\n    }\n    return f;\n  };\n  // The pulse's head, for the glow round it.\n  const ho = P.ck * 6, hr = g[ho + 3], ht = PI * (P.AF[P.ck] \u003c P.AT[P.ck] ? P.cu : 1 - P.cu);\n  const hx = MID + g[ho + 5] * smin(g[ho + 4], hr * Math.sin(ht)), hy = g[ho + 2] - hr * cos(ht);\n  const hue0 = P.hue + 0.55 - P.flow, fillV = 255 * 0.97 * (1 - P.hollow) ** 1.2;\n  const lineS = 0.5 + 0.35 * P.hollow;\n  // The inside by the even-odd rule, row by row: a LED is inside when a ray\n  // from it to the right wall crosses the curve an odd number of times. The\n  // arcs a row meets on one side are nested, so the band a LED sits in takes\n  // the colour of the arc just outside it, at this row.\n  const fl = new Float32Array(16), ka = new Int8Array(16), ta = new Float32Array(16);\n  const fr = new Float32Array(16), kb = new Int8Array(16), tb = new Float32Array(16);\n  for (let yy = 0; yy \u003c H; yy++) {\n    const yc = yy + 0.5;\n    let nl = 0, nr = 0;\n    for (let k = 0; k \u003c n2; k++) {\n      const o = k * 6;\n      if (!(g[o] \u003c yc && yc \u003c g[o + 1])) continue;\n      const c = g[o + 2], R = g[o + 3], dy = yc - c, f = smin(g[o + 4], sqrt(R * R - dy * dy));\n      const t = acos(cl(-dy / R, -1, 1)) / PI, tau = P.AF[k] \u003c P.AT[k] ? t : 1 - t;\n      const A = g[o + 5] > 0 ? fr : fl, KK = g[o + 5] > 0 ? kb : ka, T = g[o + 5] > 0 ? tb : ta;\n      let i = g[o + 5] > 0 ? nr++ : nl++;\n      while (i > 0 && A[i - 1] > f) (A[i] = A[i - 1]), (KK[i] = KK[i - 1]), (T[i] = T[i - 1]), i--;\n      (A[i] = f), (KK[i] = k), (T[i] = tau);\n    }\n    for (let half = 0; half \u003c 2; half++) {\n      const A = half ? fr : fl, KK = half ? kb : ka, T = half ? tb : ta, n = half ? nr : nl;\n      let i = 0;\n      for (let q = 0; q \u003c 32; q++) {\n        const xx = half ? MID + q : MID - 1 - q, dist = q + 0.5, p = yy * W + xx;\n        while (i \u003c n && A[i] \u003c dist) i++;\n        let r = 0, gg = 0, b = 0;\n        const inside = half ? (nr - i) & 1 : (i + nr) & 1;\n        if (inside && fillV > 0) {\n          const f = at(KK[i], T[i]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          (r = LUT[ix] * fillV), (gg = LUT[ix + 1] * fillV), (b = LUT[ix + 2] * fillV);\n        }\n        // The road, a faint line on the dark and a darker one through the colour.\n        if (q === 0) {\n          if (inside && fillV > 0) (r *= 0.6), (gg *= 0.6), (b *= 0.6);\n          else (r += 34), (gg += 36), (b += 44);\n        }\n        const dl = sqrt(D[p]);\n        if (dl \u003c 2.3) {\n          const k = LA[p], f = at(k, LT[p]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          let behind = (head - (P.cum[k] + LT[p] * P.len[k])) % Ltot;\n          if (behind \u003c 0) behind += Ltot;\n          const pulse = exp(-behind / 24) + (behind > Ltot - 3 ? (behind - Ltot + 3) / 3 : 0);\n          const I = cl(1.75 - dl * 1.1, 0, 1), J = cl(2 - dl * 0.75, 0, 1) * pulse, wh = 1 - lineS;\n          let lr = 255 * (wh + lineS * LUT[ix]), lg = 255 * (wh + lineS * LUT[ix + 1]), lb = 255 * (wh + lineS * LUT[ix + 2]);\n          const pv = min(1, pulse);\n          (lr += (255 - lr) * pv), (lg += (250 - lg) * pv), (lb += (235 - lb) * pv);\n          const m = max(I, J);\n          (r += (lr - r) * m), (gg += (lg - gg) * m), (b += (lb - b) * m);\n        }\n        const ex = xx + 0.5 - hx, ey = yc - hy, e2 = ex * ex + ey * ey;\n        if (e2 \u003c 30) {\n          const gl = 0.9 * exp(-e2 / 6);\n          (r += (255 - r) * gl), (gg += (250 - gg) * gl), (b += (235 - b) * gl);\n        }\n        display.setPixel(xx, yy, min(255, r), min(255, gg), min(255, b));\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again."},{"name":"Crossings","min":12,"max":32,"about":"How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander."},{"name":"Hollow","min":0,"max":1,"about":"At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left."}],"start":[0,2,12,0.06],"measures":{"motion":0.1079,"detail":0.0446,"edges":0.5226,"complexity":0.7574,"coverage":0.4978,"colour":0.5487,"drift":0.1848},"knobResponse":[0.3105,0.2838,0.4218,0.1979]},{"slug":"metro-map","title":"Metro Map","family":"city","round":15,"note":"해리 벡 식 지하철 노선도예요. 색 노선 넷이 45도로 꺾이며 위아래로 달리고, 갈아타는 역은 흰 고리예요. 흰 열차가 역마다 섰다 떠나고 끝에서 되돌아가요. K1 을 누르면 급행이 지나가요.","idea":"A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.","buttons":"K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.","code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-metro-map","type":"code","name":"metro-map","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole line palette round the colour wheel together; the river stays blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21."},{"name":"Lines","min":4,"max":7,"about":"How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges."},{"name":"Rush","min":0,"max":1,"about":"The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds."}],"start":[0,2,4,0.06],"measures":{"motion":0.0316,"detail":0.0683,"edges":0.914,"complexity":0.1388,"coverage":0.2043,"colour":0.2301,"drift":0.035},"knobResponse":[0.0664,0.0514,0.0687,0.0629]},{"slug":"milk-ring","title":"Milk Ring","family":"cosmetic","round":38,"note":"우윳빛 크림 방울이 색을 띤 세럼에 떨어져 테두리가 밝은 소용돌이 고리가 돼요. 고리는 가라앉으며 부풀다 작은 방울 몇 개로 갈라지고, 그 방울이 다시 작은 고리가 되어 가는 크림 실에 매달린 나무처럼 패널 아래로 늘어져요. K3 은 한 고리가 갈라지는 방울 수를 셋에서 여섯으로 늘리고, K1 을 누르면 방울이 바로 떨어져요.","idea":"Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.","buttons":"K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Milk Ring\n// Family:  cosmetic\n// Idea:    Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after drops of cream let fall into clear serum, the vortex rings they form and the cascade in which each ring breaks into smaller rings (J. J. Thomson and H. F. Newall, 1885)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive.\n// Knob 2: Speed. At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Drops. How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117.\n// Knob 4: Gel. How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain.\n// Buttons: K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\n// The serum's surface, rows above it are the air the drop falls through.\nconst SURF = 5;\n// Seen from a little above: a ring of radius R is an ellipse R wide and\n// R * TILT tall, its near half lower on the panel.\nconst TILT = 0.4;\n// Per generation: starting radius, the radius it swells to, starting sink\n// speed in LEDs a second, how long it sinks before its rim breaks.\nconst GEN = [\n  { r0: 2.4, r1: 10, v0: 24, brk: 3.2 },\n  { r0: 1.4, r1: 5.2, v0: 18, brk: 2.8 },\n  { r0: 0.9, r1: 2.8, v0: 14, brk: 99 },\n];\n// Every sink speed falls toward VS with time constant TV; radii swell with TR.\nconst VS = 3.2, TV = 1.3, TR = 1.6;\n// Seconds between drops at Speed 2 and Gel 1, and the run before the first frame.\nconst PERIOD = 7, PREROLL = 9;\n// Opening hue: rose.\nconst H0 = 0.93;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, gel: 1, begun: false, t: 0, next: 0, tk: 1,\n    rings: [], falling: [], ripples: [],\n    D: new Float32Array(N), F: new Float32Array(N), T: new Float32Array(N), G: new Float32Array(N), tmp: new Float32Array(N),\n    deep: [0, 0, 0], light: [0, 0, 0], cream: [0, 0, 0],\n  };\n}\n\n// Soft dot of cream into a field, a Gaussian of width s.\nfunction splat(A, x, y, s, w) {\n  const r = Math.ceil(2.2 * s), xi = round(x), yi = round(y), k = -0.5 / (s * s);\n  for (let j = max(0, yi - r); j \u003c= min(H - 1, yi + r); j++) {\n    const dy = j - y, ey = dy * dy;\n    for (let i = max(0, xi - r); i \u003c= min(W - 1, xi + r); i++) {\n      const dx = i - x;\n      A[j * W + i] += w * exp((dx * dx + ey) * k);\n    }\n  }\n}\n\n// A thin thread point, bilinear into the trail.\nfunction dab(T, x, y, w) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  for (let b = 0; b \u003c 2; b++)\n    for (let a = 0; a \u003c 2; a++) {\n      const xx = i + a, yy = j + b;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      T[yy * W + xx] += w * (a ? fx : 1 - fx) * (b ? fy : 1 - fy);\n    }\n}\n\nfunction newRing(S, g, x, y, z, vx, vz) {\n  const G0 = GEN[g];\n  S.rings.push({ g, x, y, z, vx, vz, age: 0, R: G0.r0, amp: 1, broken: false, spin: random() * 2 * PI, v0: G0.v0 * (0.85 + 0.3 * random()) });\n}\n\nfunction drop(S) {\n  S.falling.push({ x: 18 + random() * 28, y: -4, z: (random() - 0.5) * 6 });\n}\n\n// Sim time, in seconds at Speed 2 and Gel 1; the gel stretches it.\nfunction step(S, dt) {\n  // A thicker gel slows everything, keeps the rings smaller and holds the\n  // threads longer.\n  const ts = S.gel ** 0.6, d = dt / ts, rs = S.gel ** -0.2;\n  S.t += d;\n  if (S.t >= S.next) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  // The drop falls through the air and goes in at the surface.\n  for (let i = S.falling.length - 1; i >= 0; i--) {\n    const f = S.falling[i];\n    f.y += 34 * d;\n    if (f.y >= SURF + 1) {\n      newRing(S, 0, f.x, SURF + 2.5, f.z, 0, 0);\n      S.ripples.push({ x: f.x, age: 0 });\n      S.falling.splice(i, 1);\n    }\n  }\n  for (const rp of S.ripples) rp.age += d;\n  S.ripples = S.ripples.filter((rp) => rp.age \u003c 3);\n  const T = S.T, born = [];\n  for (const r of S.rings) {\n    const G0 = GEN[r.g];\n    r.age += d;\n    r.R = (G0.r0 + (G0.r1 - G0.r0) * (1 - exp(-r.age / TR))) * rs;\n    const vy = r.v0 * exp(-r.age / TV) + VS, k = exp(-d / 0.8);\n    const x0 = r.x, y0 = r.y + r.z * TILT;\n    r.y += vy * d;\n    r.x += r.vx * d;\n    r.z += r.vz * d;\n    r.vx *= k;\n    r.vz *= k;\n    // The thread: the ring leaves cream behind it, the same for every LED\n    // of the way it goes.\n    const y1 = r.y + r.z * TILT, len = sqrt((r.x - x0) ** 2 + (y1 - y0) ** 2);\n    dab(T, r.x, y1, (r.g === 0 ? 0.75 : 0.55) * len * r.amp);\n    if (!r.broken && r.age > G0.brk) {\n      // The rim breaks into n drops round the ring, each thrown a little\n      // outward and down, and the ring itself is spent into them.\n      r.broken = true;\n      const n = S.n, ph = r.spin;\n      for (let j = 0; j \u003c n; j++) {\n        const a = ph + (2 * PI * j) / n, c = cos(a), s = sin(a);\n        born.push([r.g + 1, r.x + r.R * c, r.y + 0.5, r.z + r.R * s, 7 * c, 7 * s]);\n      }\n    }\n    if (r.broken) r.amp -= d / 0.7;\n    // The last generation dissolves into the serum after 4 s.\n    if (r.g === GEN.length - 1 && r.age > 4) r.amp -= d / 3;\n  }\n  for (const b of born) newRing(S, b[0], b[1], b[2], b[3], b[4], b[5]);\n  S.rings = S.rings.filter((r) => r.amp > 0.01 && r.y \u003c H + 12);\n  // Threads fade, the fade gathered up and laid on every few frames.\n  S.tk *= exp(-d / (4 * S.gel));\n  if (S.tk \u003c 0.98) {\n    for (let p = 0; p \u003c N; p++) T[p] *= S.tk;\n    S.tk = 1;\n  }\n}\n\n// Draw every ring into the cream field.\nfunction render(S) {\n  const D = S.D, F = S.F;\n  D.fill(0);\n  F.fill(0);\n  for (const r of S.rings) {\n    const form = cl(r.age / 0.6, 0, 1), R = r.R, amp = r.amp;\n    const cy = r.y + r.z * TILT;\n    // A fresh drop is a round blob that opens into the ring.\n    if (form \u003c 1) splat(D, r.x, cy, 0.55 * R + 0.5, 1.3 * (1 - form) * amp);\n    // The ring: its core is an eighth of its radius thick, at least 0.55\n    // LED, laid as dots along it so that a line of them peaks at the weight.\n    const core = max(0.55, 0.12 * R), m = max(10, round(2 * PI * R * 1.6)), ds = (2 * PI * R) / m;\n    for (let j = 0; j \u003c m; j++) {\n      const a = (2 * PI * j) / m, c = cos(a), s = sin(a);\n      // The near half (s > 0) lower on the panel and brighter than the far\n      // half seen through the ring.\n      const w = (0.85 + 0.45 * s) * form * amp * (ds / (core * 2.5066));\n      splat(D, r.x + R * c, cy + R * s * TILT, core, w);\n    }\n    // The bell of milky serum the ring carries above it.\n    splat(F, r.x, cy - 0.45 * R, 0.6 * R + 0.5, 0.4 * form * amp);\n  }\n  for (const f of S.falling) {\n    splat(D, f.x, f.y, 1.1, 1.4);\n    splat(D, f.x, f.y - 1.6, 0.7, 0.5);\n  }\n}\n\n// Box blur of radius r, horizontal then vertical, A into B.\nfunction blur(A, B, tmp, r) {\n  const k = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += A[y * W + cl(x + i, 0, W - 1)];\n      tmp[y * W + x] = s * k;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += tmp[cl(y + i, 0, H - 1) * W + x];\n      B[y * W + x] = s * k;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 3, 6));\n  S.gel = cl(k[3], 1, 5);\n  if (!S.begun) {\n    // The gel stretches the run before as it stretches everything.\n    const n = round(PREROLL * 30 * S.gel ** 0.6);\n    for (let i = 0; i \u003c n; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  render(S);\n  const { D, F, T, G, tmp, deep, light, cream } = S;\n  blur(D, G, tmp, 2);\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime serum goes brown or olive when deep: there it\n  // is lifted, so the bottom of the glass is as bright as the top elsewhere.\n  const warm = cl(1.3 - abs(hh - 0.13) / 0.13, 0, 1);\n  hsv(h, 0.7 - 0.2 * warm, 0.3 + 0.34 * warm, deep);\n  hsv(h + 0.03, 0.5 - 0.1 * warm, 0.62 + 0.14 * warm, light);\n  hsv(h + 0.02, 0.4, 1, cream);\n  const t = S.t;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1), lg = (1 - u) ** 1.6;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vig = 0.8 + 0.2 * sin((PI * (x + 0.5)) / W);\n      // The serum: light from above, and a slow shimmer of caustics.\n      const sh = 0.07 * sin(x * 0.31 + y * 0.07 + t * 0.6 + 1.7 * sin(x * 0.11 - y * 0.05 - t * 0.4)) * lg;\n      let r = deep[0] + (light[0] - deep[0]) * lg, g = deep[1] + (light[1] - deep[1]) * lg, b = deep[2] + (light[2] - deep[2]) * lg;\n      r *= (1 + sh) * vig;\n      g *= (1 + sh) * vig;\n      b *= (1 + sh) * vig;\n      if (y \u003c SURF) {\n        r *= 0.25;\n        g *= 0.25;\n        b *= 0.25;\n      }\n      // Cream: the rings, a soft glow round them, the bell and the threads,\n      // tinted where it is thin and white where it is thick.\n      const C = D[p] + 0.5 * G[p] + F[p] + T[p];\n      const c = 1 - exp(-1.2 * C), wh = c * sqrt(c);\n      const cr = cream[0] + (1 - cream[0]) * wh, cg = cream[1] + (1 - cream[1]) * wh, cb = cream[2] + (1 - cream[2]) * wh;\n      r = r * (1 - 0.85 * c) + cr * c;\n      g = g * (1 - 0.85 * c) + cg * c;\n      b = b * (1 - 0.85 * c) + cb * c;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n  // The surface: a bright line, rippled where a drop went in.\n  for (let x = 0; x \u003c W; x++) {\n    let off = 0;\n    for (const rp of S.ripples) {\n      const dx = abs(x - rp.x), front = rp.age * 14;\n      off += 1.2 * exp(-rp.age / 0.8) * sin(dx * 0.9 - rp.age * 12) * exp(-((dx - front) ** 2) / 30);\n    }\n    const y = cl(round(SURF + off), 0, H - 1);\n    display.setPixel(x, y, round(255 * min(1, light[0] * 0.5 + 0.5)), round(255 * min(1, light[1] * 0.5 + 0.5)), round(255 * min(1, light[2] * 0.5 + 0.5)));\n  }\n}\n","layer":{"id":"layer-milk-ring","type":"code","name":"milk-ring","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Milk Ring\n// Family:  cosmetic\n// Idea:    Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after drops of cream let fall into clear serum, the vortex rings they form and the cascade in which each ring breaks into smaller rings (J. J. Thomson and H. F. Newall, 1885)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive.\n// Knob 2: Speed. At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Drops. How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117.\n// Knob 4: Gel. How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain.\n// Buttons: K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\n// The serum's surface, rows above it are the air the drop falls through.\nconst SURF = 5;\n// Seen from a little above: a ring of radius R is an ellipse R wide and\n// R * TILT tall, its near half lower on the panel.\nconst TILT = 0.4;\n// Per generation: starting radius, the radius it swells to, starting sink\n// speed in LEDs a second, how long it sinks before its rim breaks.\nconst GEN = [\n  { r0: 2.4, r1: 10, v0: 24, brk: 3.2 },\n  { r0: 1.4, r1: 5.2, v0: 18, brk: 2.8 },\n  { r0: 0.9, r1: 2.8, v0: 14, brk: 99 },\n];\n// Every sink speed falls toward VS with time constant TV; radii swell with TR.\nconst VS = 3.2, TV = 1.3, TR = 1.6;\n// Seconds between drops at Speed 2 and Gel 1, and the run before the first frame.\nconst PERIOD = 7, PREROLL = 9;\n// Opening hue: rose.\nconst H0 = 0.93;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, gel: 1, begun: false, t: 0, next: 0, tk: 1,\n    rings: [], falling: [], ripples: [],\n    D: new Float32Array(N), F: new Float32Array(N), T: new Float32Array(N), G: new Float32Array(N), tmp: new Float32Array(N),\n    deep: [0, 0, 0], light: [0, 0, 0], cream: [0, 0, 0],\n  };\n}\n\n// Soft dot of cream into a field, a Gaussian of width s.\nfunction splat(A, x, y, s, w) {\n  const r = Math.ceil(2.2 * s), xi = round(x), yi = round(y), k = -0.5 / (s * s);\n  for (let j = max(0, yi - r); j \u003c= min(H - 1, yi + r); j++) {\n    const dy = j - y, ey = dy * dy;\n    for (let i = max(0, xi - r); i \u003c= min(W - 1, xi + r); i++) {\n      const dx = i - x;\n      A[j * W + i] += w * exp((dx * dx + ey) * k);\n    }\n  }\n}\n\n// A thin thread point, bilinear into the trail.\nfunction dab(T, x, y, w) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  for (let b = 0; b \u003c 2; b++)\n    for (let a = 0; a \u003c 2; a++) {\n      const xx = i + a, yy = j + b;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      T[yy * W + xx] += w * (a ? fx : 1 - fx) * (b ? fy : 1 - fy);\n    }\n}\n\nfunction newRing(S, g, x, y, z, vx, vz) {\n  const G0 = GEN[g];\n  S.rings.push({ g, x, y, z, vx, vz, age: 0, R: G0.r0, amp: 1, broken: false, spin: random() * 2 * PI, v0: G0.v0 * (0.85 + 0.3 * random()) });\n}\n\nfunction drop(S) {\n  S.falling.push({ x: 18 + random() * 28, y: -4, z: (random() - 0.5) * 6 });\n}\n\n// Sim time, in seconds at Speed 2 and Gel 1; the gel stretches it.\nfunction step(S, dt) {\n  // A thicker gel slows everything, keeps the rings smaller and holds the\n  // threads longer.\n  const ts = S.gel ** 0.6, d = dt / ts, rs = S.gel ** -0.2;\n  S.t += d;\n  if (S.t >= S.next) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  // The drop falls through the air and goes in at the surface.\n  for (let i = S.falling.length - 1; i >= 0; i--) {\n    const f = S.falling[i];\n    f.y += 34 * d;\n    if (f.y >= SURF + 1) {\n      newRing(S, 0, f.x, SURF + 2.5, f.z, 0, 0);\n      S.ripples.push({ x: f.x, age: 0 });\n      S.falling.splice(i, 1);\n    }\n  }\n  for (const rp of S.ripples) rp.age += d;\n  S.ripples = S.ripples.filter((rp) => rp.age \u003c 3);\n  const T = S.T, born = [];\n  for (const r of S.rings) {\n    const G0 = GEN[r.g];\n    r.age += d;\n    r.R = (G0.r0 + (G0.r1 - G0.r0) * (1 - exp(-r.age / TR))) * rs;\n    const vy = r.v0 * exp(-r.age / TV) + VS, k = exp(-d / 0.8);\n    const x0 = r.x, y0 = r.y + r.z * TILT;\n    r.y += vy * d;\n    r.x += r.vx * d;\n    r.z += r.vz * d;\n    r.vx *= k;\n    r.vz *= k;\n    // The thread: the ring leaves cream behind it, the same for every LED\n    // of the way it goes.\n    const y1 = r.y + r.z * TILT, len = sqrt((r.x - x0) ** 2 + (y1 - y0) ** 2);\n    dab(T, r.x, y1, (r.g === 0 ? 0.75 : 0.55) * len * r.amp);\n    if (!r.broken && r.age > G0.brk) {\n      // The rim breaks into n drops round the ring, each thrown a little\n      // outward and down, and the ring itself is spent into them.\n      r.broken = true;\n      const n = S.n, ph = r.spin;\n      for (let j = 0; j \u003c n; j++) {\n        const a = ph + (2 * PI * j) / n, c = cos(a), s = sin(a);\n        born.push([r.g + 1, r.x + r.R * c, r.y + 0.5, r.z + r.R * s, 7 * c, 7 * s]);\n      }\n    }\n    if (r.broken) r.amp -= d / 0.7;\n    // The last generation dissolves into the serum after 4 s.\n    if (r.g === GEN.length - 1 && r.age > 4) r.amp -= d / 3;\n  }\n  for (const b of born) newRing(S, b[0], b[1], b[2], b[3], b[4], b[5]);\n  S.rings = S.rings.filter((r) => r.amp > 0.01 && r.y \u003c H + 12);\n  // Threads fade, the fade gathered up and laid on every few frames.\n  S.tk *= exp(-d / (4 * S.gel));\n  if (S.tk \u003c 0.98) {\n    for (let p = 0; p \u003c N; p++) T[p] *= S.tk;\n    S.tk = 1;\n  }\n}\n\n// Draw every ring into the cream field.\nfunction render(S) {\n  const D = S.D, F = S.F;\n  D.fill(0);\n  F.fill(0);\n  for (const r of S.rings) {\n    const form = cl(r.age / 0.6, 0, 1), R = r.R, amp = r.amp;\n    const cy = r.y + r.z * TILT;\n    // A fresh drop is a round blob that opens into the ring.\n    if (form \u003c 1) splat(D, r.x, cy, 0.55 * R + 0.5, 1.3 * (1 - form) * amp);\n    // The ring: its core is an eighth of its radius thick, at least 0.55\n    // LED, laid as dots along it so that a line of them peaks at the weight.\n    const core = max(0.55, 0.12 * R), m = max(10, round(2 * PI * R * 1.6)), ds = (2 * PI * R) / m;\n    for (let j = 0; j \u003c m; j++) {\n      const a = (2 * PI * j) / m, c = cos(a), s = sin(a);\n      // The near half (s > 0) lower on the panel and brighter than the far\n      // half seen through the ring.\n      const w = (0.85 + 0.45 * s) * form * amp * (ds / (core * 2.5066));\n      splat(D, r.x + R * c, cy + R * s * TILT, core, w);\n    }\n    // The bell of milky serum the ring carries above it.\n    splat(F, r.x, cy - 0.45 * R, 0.6 * R + 0.5, 0.4 * form * amp);\n  }\n  for (const f of S.falling) {\n    splat(D, f.x, f.y, 1.1, 1.4);\n    splat(D, f.x, f.y - 1.6, 0.7, 0.5);\n  }\n}\n\n// Box blur of radius r, horizontal then vertical, A into B.\nfunction blur(A, B, tmp, r) {\n  const k = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += A[y * W + cl(x + i, 0, W - 1)];\n      tmp[y * W + x] = s * k;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += tmp[cl(y + i, 0, H - 1) * W + x];\n      B[y * W + x] = s * k;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 3, 6));\n  S.gel = cl(k[3], 1, 5);\n  if (!S.begun) {\n    // The gel stretches the run before as it stretches everything.\n    const n = round(PREROLL * 30 * S.gel ** 0.6);\n    for (let i = 0; i \u003c n; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  render(S);\n  const { D, F, T, G, tmp, deep, light, cream } = S;\n  blur(D, G, tmp, 2);\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime serum goes brown or olive when deep: there it\n  // is lifted, so the bottom of the glass is as bright as the top elsewhere.\n  const warm = cl(1.3 - abs(hh - 0.13) / 0.13, 0, 1);\n  hsv(h, 0.7 - 0.2 * warm, 0.3 + 0.34 * warm, deep);\n  hsv(h + 0.03, 0.5 - 0.1 * warm, 0.62 + 0.14 * warm, light);\n  hsv(h + 0.02, 0.4, 1, cream);\n  const t = S.t;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1), lg = (1 - u) ** 1.6;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vig = 0.8 + 0.2 * sin((PI * (x + 0.5)) / W);\n      // The serum: light from above, and a slow shimmer of caustics.\n      const sh = 0.07 * sin(x * 0.31 + y * 0.07 + t * 0.6 + 1.7 * sin(x * 0.11 - y * 0.05 - t * 0.4)) * lg;\n      let r = deep[0] + (light[0] - deep[0]) * lg, g = deep[1] + (light[1] - deep[1]) * lg, b = deep[2] + (light[2] - deep[2]) * lg;\n      r *= (1 + sh) * vig;\n      g *= (1 + sh) * vig;\n      b *= (1 + sh) * vig;\n      if (y \u003c SURF) {\n        r *= 0.25;\n        g *= 0.25;\n        b *= 0.25;\n      }\n      // Cream: the rings, a soft glow round them, the bell and the threads,\n      // tinted where it is thin and white where it is thick.\n      const C = D[p] + 0.5 * G[p] + F[p] + T[p];\n      const c = 1 - exp(-1.2 * C), wh = c * sqrt(c);\n      const cr = cream[0] + (1 - cream[0]) * wh, cg = cream[1] + (1 - cream[1]) * wh, cb = cream[2] + (1 - cream[2]) * wh;\n      r = r * (1 - 0.85 * c) + cr * c;\n      g = g * (1 - 0.85 * c) + cg * c;\n      b = b * (1 - 0.85 * c) + cb * c;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n  // The surface: a bright line, rippled where a drop went in.\n  for (let x = 0; x \u003c W; x++) {\n    let off = 0;\n    for (const rp of S.ripples) {\n      const dx = abs(x - rp.x), front = rp.age * 14;\n      off += 1.2 * exp(-rp.age / 0.8) * sin(dx * 0.9 - rp.age * 12) * exp(-((dx - front) ** 2) / 30);\n    }\n    const y = cl(round(SURF + off), 0, H - 1);\n    display.setPixel(x, y, round(255 * min(1, light[0] * 0.5 + 0.5)), round(255 * min(1, light[1] * 0.5 + 0.5)), round(255 * min(1, light[2] * 0.5 + 0.5)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Drops","min":3,"max":6,"about":"How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117."},{"name":"Gel","min":1,"max":5,"about":"How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain."}],"start":[0,2,3,1],"measures":{"motion":0.0728,"detail":0.0206,"edges":0.212,"complexity":1.5604,"coverage":1,"colour":0.1167,"drift":0.0533},"knobResponse":[0.2862,0.0564,0.077,0.0544]},{"slug":"millefiori","title":"Millefiori","family":"glass","round":20,"note":"무라노 밀레피오리 접시 위로 시야가 천천히 미끄러지며, 1 LED 고리와 꽃잎으로 된 유리 막대 조각 수백 개가 어두운 유리에 촘촘히 박혀 지나가요. K1 을 누르면 새로 뽑은 막대로 만든 접시가 오른쪽에서 밀려 들어와요.","idea":"The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.","buttons":"K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.","code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-millefiori","type":"code","name":"millefiori","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds."},{"name":"Canes","min":6,"max":12,"about":"How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals."},{"name":"Light","min":0,"max":1,"about":"How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim."}],"start":[0,2,6,0.06],"measures":{"motion":1.2091,"detail":0.3373,"edges":0.8101,"complexity":1.6267,"coverage":1,"colour":0.5579,"drift":0.0871},"knobResponse":[0.1882,0.3627,0.3509,0.1412]},{"slug":"mitosis","title":"Mitosis","family":"microbe","round":27,"note":"검은 바탕에 찍은 면역형광 사진 속 세포 배양이에요. DNA 는 파랑, 미세소관은 초록, 액틴은 빨강으로 물든 세포가 둥글게 말려 염색체를 두 방추극 사이에 세우고, 양쪽 극으로 끌어 나눈 뒤 빨간 수축 고리에서 잘록해져 둘이 돼요. K1 이 염료를 바꾸고, 누르면 가운데 세포가 바로 분열을 시작해요.","idea":"A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.","buttons":"K1 tap sends the interphase cell nearest the middle into prophase now.","code":"// ===== Patternflow pattern =====\n// Title:   Mitosis\n// Family:  microbe\n// Idea:    A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after immunofluorescence micrographs of dividing cells\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1\n//\n// Knob 1: Stain. The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA.\n// Knob 2: Speed. At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower.\n// Knob 3: Cells. How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in.\n// Knob 4: Zoom. The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show.\n// Buttons: K1 tap sends the interphase cell nearest the middle into prophase now.\n\nconst W = 64, H = 128, N = W * H, TAU = 2 * Math.PI, NCH = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// A 64x64 tile of value noise that wraps, for chromatin.\nconst NT = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = ((k & 63) * 16) / 64, y = ((k >> 6) * 16) / 64, xi = floor(x), yi = floor(y), u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), a = hash(xi, yi), b = hash((xi + 1) % 16, yi), c = hash(xi, (yi + 1) % 16), d = hash((xi + 1) % 16, (yi + 1) % 16);\n  NT[k] = a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, x0 = xi & 63, y0 = (yi & 63) * 64, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) * 64;\n  return mix(mix(NT[y0 + x0], NT[y0 + x1], fx), mix(NT[y1 + x0], NT[y1 + x1], fx), fy);\n}\n\n// The cycle, as fractions of it: daughters spread, interphase, prophase,\n// prometaphase, metaphase, anaphase, telophase to the split at 1.\nconst P1 = 0.1, P2 = 0.5, P3 = 0.6, P4 = 0.67, P5 = 0.79, P6 = 0.86;\n\n// Dye hues in degrees: DNA, tubulin, actin, centrosome.\nconst STAINS = [\n  [240, 120, 0, 55],\n  [228, 352, 125, 185],\n  [192, 305, 55, 120],\n  [262, 60, 318, 170],\n];\nconst hueRGB = (h, out, o) => {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (((5 - 2 * j) + h / 60) % 6 + 6) % 6;\n    out[o + j] = 1 - max(0, min(k, 4 - k, 1));\n  }\n};\n\n// One buffer per dye (actin, tubulin, DNA, centrosome) and one for the body\n// haze. LIN holds the merged colour and BL its blur for the glow; TMP is scratch.\nconst SA = new Float32Array(N), ST = new Float32Array(N), SD = new Float32Array(N), SC = new Float32Array(N), HZ = new Float32Array(N);\nconst LIN = new Float32Array(N * 3), BL = new Float32Array(N * 3), TMP = new Float32Array(N * 3);\nlet Z = 1, TT = 0;\n\nfunction newCell(x, y, p, B) {\n  const c = {\n    x, y, vx: 0, vy: 0, a: rnd() * PI, hd: rnd() * TAU, p, rate: 0.85 + 0.3 * rnd(), B: B || 12 + 2 * rnd(),\n    sd: floor(rnd() * 9973), w1: rnd() * TAU, w2: rnd() * TAU, w3: rnd() * TAU, nf: 22 + floor(rnd() * 7), cang: rnd() * TAU,\n    ox: rnd() * 64, oy: rnd() * 64, tilt: (rnd() - 0.5) * 0.4, al: 1, out: 0, br: 0, bx: 0, by: 0,\n    ca: 1, sa: 0, e: 0, rl: 5, kk: 2, pin: 0, wa: 0, hdl: 0, lam: 0, cx: 1, fur: 0, nS: 0, rn: 3, cond: 0, dense: 0, dS: 0, dr: 2,\n    Lp: 3, sp: 0, net: 0, ast: 0, chA: 0, sh: 0.5, pf: 0, ip: 0, ft: 0, fa: 0, cu: 0, cv: 0, dup: 0, rad: 10, p1u: 0, p1v: 0, p2u: 0, p2v: 0,\n    ch: new Float32Array(NCH * 4), wt: new Float32Array(64), fw: new Float32Array(64), gp: new Float32Array(64),\n  };\n  for (let j = 0; j \u003c NCH; j++) {\n    const r = 0.75 * sqrt(rnd()), q = rnd() * TAU;\n    c.ch[j * 4] = r * cos(q);\n    c.ch[j * 4 + 1] = r * sin(q);\n    c.ch[j * 4 + 2] = ((j + 0.5) / NCH) * 2 - 1 + (rnd() - 0.5) * 0.15;\n    c.ch[j * 4 + 3] = rnd() * PI;\n  }\n  return c;\n}\n\n// Where the cell is in its cycle decides its shape and what each dye shows.\nfunction geo(c) {\n  const p = c.p, B = c.B, Rm = 0.8 * B;\n  let rho = 1, R = Rm, f;\n  if (p \u003c P1) (f = sm(0, P1, p)), (rho = 1 - f), (R = mix(0.59 * B, 0.74 * B, f));\n  else if (p \u003c P2) (rho = 0), (R = mix(0.74 * B, B, (p - P1) / (P2 - P1)));\n  else if (p \u003c P3) (f = sm(P2, P3, p)), (rho = f), (R = mix(B, Rm, f));\n  const fa = (c.fa = sm(P5, P6, p)), ft = (c.ft = sm(P6, 1, p));\n  let e = 0.3 * R * (1 - rho);\n  if (p >= P5) e = p \u003c P6 ? 0.3 * Rm * fa : mix(0.3, 0.58, ft) * Rm;\n  c.e = e;\n  c.rl = R - 0.45 * e;\n  c.kk = (p >= P6 ? mix(0.5, 0.06, ft) : 0.5) * R;\n  c.pin = p >= P6 ? 3 * ft * sqrt(ft) : 0;\n  c.wa = 0.16 * (1 - rho) + 0.025;\n  c.lam = 1 - rho;\n  c.cx = mix(0.85, 1.2, rho);\n  c.fur = ft;\n  c.hdl = c.hd - c.a;\n  // Nucleus: whole until the envelope breaks early in prometaphase.\n  c.rn = 0.44 * R;\n  c.nS = p \u003c P3 ? 1 : 1 - sm(P3, P3 + 0.035, p);\n  c.cond = p \u003c P2 || p >= P6 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dense = p \u003c P1 ? 1 - sm(0, P1, p) : p >= P6 ? 1 : 0;\n  c.dS = sm(0.3, 0.8, ft);\n  c.dr = mix(0.13, 0.22, ft) * B;\n  // Chromosomes gather on the plate; in anaphase the sisters part for the poles.\n  c.pf = sm(P3, P4, p);\n  c.chA = p \u003c P3 ? 0 : sm(P3, P3 + 0.03, p) * (1 - sm(0.25, 0.7, ft));\n  const Lp0 = 0.58 * Rm;\n  c.Lp = p \u003c P5 ? Lp0 : p \u003c P6 ? Lp0 + 0.7 * e : mix(0.79, 0.86, ft) * Rm;\n  c.sh = p \u003c P5 ? 0.5 : p \u003c P6 ? mix(0.5, c.Lp - 1.4, fa) : c.Lp - 1.4;\n  c.sp = p \u003c P3 ? 0 : p \u003c P6 ? sm(P3, P4, p) : 1 - ft;\n  c.ip = p \u003c P5 ? 0 : p \u003c P6 ? fa : 1;\n  c.net = p \u003c P1 ? mix(0.45, 1, sm(0, P1, p)) : p \u003c P2 ? 1 : p \u003c P3 ? 1 - sm(P2, P3, p) : 0;\n  c.ast = p \u003c P2 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dup = p > 0.4 && p \u003c P3 ? 1 : 0;\n  // Centrosome beside the nucleus; in prophase the pair travels round it to the poles.\n  c.cu = (c.rn + 1) * cos(c.cang);\n  c.cv = (c.rn + 1) * sin(c.cang);\n  if (p >= P2) {\n    const g = p \u003c P3 ? sm(P2, P3, p) : 1;\n    c.p1u = mix(c.cu, -c.Lp, g);\n    c.p1v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n    c.p2u = mix(c.cu, c.Lp, g);\n    c.p2v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n  }\n  // The ruffled outline and the leading edge, as a table round the cell.\n  for (let k = 0; k \u003c 64; k++) {\n    const th = (k * PI) / 32 - PI, fr = max(0, cos(th - c.hdl)), F = fr * fr * c.lam;\n    c.fw[k] = F;\n    c.gp[k] = 1 - 0.9 * c.lam * sm(0.4, 0.5, 0.5 + 0.28 * sin(3 * th + 2 * c.w2) + 0.22 * sin(7 * th + c.w3));\n    c.wt[k] = c.rl * c.wa * (0.5 * sin(2 * th + c.w1) + 0.3 * sin(3 * th + c.w2) + 0.2 * sin(5 * th + c.w3 + TT * 0.35) + 0.9 * F);\n  }\n  c.rad = (c.e + c.rl * (1 + 1.6 * c.wa) + 2) * Z;\n  c.ca = cos(c.a);\n  c.sa = sin(c.a);\n}\n\n// What shapeD found at the last point it was asked about, kept for drawCell.\n// A typed array, so writing it for every LED makes no garbage.\nconst G = new Float64Array(3);\n// Signed distance to the cell's outline in its own frame: two discs joined\n// smoothly, ruffled, bulging at the leading edge, pinched at the furrow.\nfunction shapeD(c, u, v) {\n  const e = c.e, rl = c.rl, kk = c.kk;\n  const d1 = hypot(u - e, v) - rl, d2 = hypot(u + e, v) - rl, h = cl(0.5 + (0.5 * (d2 - d1)) / kk, 0, 1);\n  let d = mix(d2, d1, h) - kk * h * (1 - h);\n  const th = (G[1] = atan2(v, u)), q = (th + PI) * (32 / PI), k = floor(q), f = q - k, k0 = k & 63, k1 = (k + 1) & 63;\n  G[0] = mix(c.fw[k0], c.fw[k1], f);\n  G[2] = mix(c.gp[k0], c.gp[k1], f);\n  d -= mix(c.wt[k0], c.wt[k1], f);\n  if (c.pin > 0) d += c.pin * exp(-u * u * 0.4);\n  return d;\n}\n\nfunction put(B, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n    const i = y * W + x;\n    if (v > B[i]) B[i] = v;\n  }\n}\n// A soft dot at a world point; weights sharpened so lines stay one LED wide.\nfunction dot(B, wx, wy, a) {\n  const x = (wx - 32) * Z + 31.5, y = (wy - 64) * Z + 63.5, x0 = floor(x), y0 = floor(y);\n  let fx = x - x0, fy = y - y0;\n  (fx = fx * fx * (3 - 2 * fx)), (fy = fy * fy * (3 - 2 * fy));\n  put(B, x0, y0, a * (1 - fx) * (1 - fy));\n  put(B, x0 + 1, y0, a * fx * (1 - fy));\n  put(B, x0, y0 + 1, a * (1 - fx) * fy);\n  put(B, x0 + 1, y0 + 1, a * fx * fy);\n}\n// A curve in the cell's frame from (au, av) to (bu, bv) bowed through (mu, mv).\nfunction curve(B, c, au, av, mu, mv, bu, bv, a) {\n  const n = max(2, ceil((hypot(mu - au, mv - av) + hypot(bu - mu, bv - mv)) * Z * 2.2));\n  for (let k = 0; k \u003c= n; k++) {\n    const t = k / n, s = 1 - t, u = s * s * au + 2 * s * t * mu + t * t * bu, v = s * s * av + 2 * s * t * mv + t * t * bv;\n    dot(B, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, a);\n  }\n}\nconst line = (B, c, au, av, bu, bv, a) => curve(B, c, au, av, (au + bu) / 2, (av + bv) / 2, bu, bv, a);\n\n// Microtubules grown out from (u0, v0) until they meet the cortex.\nfunction rays(c, u0, v0, n, ang, spread, len, a, sd) {\n  const st = 0.45 / Z;\n  for (let i = 0; i \u003c n; i++) {\n    const h1 = hash(c.sd + sd, i), h2 = hash(i, c.sd + sd + 7);\n    let q = ang + (n > 1 ? ((i + 0.5 * h1) / n - 0.5) * spread : 0), u = u0, v = v0;\n    const L = len * (0.7 + 0.45 * h2), curl = (h1 - 0.5) * 0.3, b = a * (0.9 + 0.25 * h2);\n    for (let s = 0; s \u003c L; s += st) {\n      q += curl * st + 0.12 * sin(s * 0.6 + i * 1.7) * st;\n      u += cos(q) * st;\n      v += sin(q) * st;\n      if (shapeD(c, u, v) > -1.6 - 1.4 * G[0]) break;\n      const nq = c.nS > 0.5 ? hypot(u / (c.rn * 1.1), v / (c.rn * 0.92)) : 2;\n      // Asters wrap round the nucleus until its envelope breaks.\n      if (nq \u003c 1 && sd) break;\n      dot(ST, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, nq \u003c 1 ? b * 0.3 : b);\n    }\n  }\n}\n\nfunction chromatin(c, u, v, cond) {\n  const tu = u * 1.5 + c.ox, tv = v * 1.5 + c.oy;\n  let t = mix(0.35 + 0.9 * nz(tu, tv) - 0.6 * exp(-((u - 0.3 * c.rn) ** 2 + (v + 0.2 * c.rn) ** 2) * 0.9), 1.2, c.dense);\n  if (cond > 0) t = mix(t, 1.5 * sm(0.14, 0.04, abs(nz(tu * 1.4 + 17, tv * 1.4 + 5) - 0.5)), cond);\n  return t;\n}\n\nfunction drawCell(c) {\n  const al = c.al, cx = (c.x - 32) * Z + 32, cy = (c.y - 64) * Z + 64, r = c.rad;\n  const x0 = max(0, floor(cx - r)), x1 = min(W - 1, ceil(cx + r)), y0 = max(0, floor(cy - r)), y1 = min(H - 1, ceil(cy + r));\n  if (x0 > x1 || y0 > y1) return;\n  const iz = 1 / Z, rn = c.rn, na = rn * 1.1, nb = rn * 0.92, r2 = r * r;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      if ((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2 > r2) continue;\n      const dx = (x + 0.5 - cx) * iz, dy = (y + 0.5 - cy) * iz, u = dx * c.ca + dy * c.sa, v = -dx * c.sa + dy * c.ca;\n      const d = shapeD(c, u, v);\n      if (d > 0.8) continue;\n      const i = y * W + x;\n      // Actin: the cortex, broad at the leading edge, and the ring at the furrow.\n      const fr = G[0], th = G[1];\n      let A = sm(-1.2, -0.7, d) * sm(0.35, -0.15, d) * c.cx * G[2];\n      if (fr > 0.05) A = max(A, fr * sm(-2.6, -1.9, d) * sm(0.35, -0.15, d) * (0.55 + 0.6 * nz(th * 20.372 + c.oy, c.ox + d)));\n      if (c.lam > 0.05 && d \u003c -1.2) {\n        // Stress fibres along the cell's long axis, some broken off short.\n        const q = (v + c.tilt * u) / 2.7 + c.ox, k = floor(q + 0.5), h = hash(c.sd + 11, k), e = (hash(k, c.sd) - 0.5) * c.rl;\n        if (h > 0.55 && abs(u - e) \u003c c.rl * (0.3 + 0.7 * h) && hypot(u / na, v / nb) > 1.15) A = max(A, c.lam * sm(0.62, 0.22, abs(q - k) * 2.7) * sm(-1.2, -2.2, d));\n      }\n      if (c.fur > 0) A = max(A, 1.3 * c.fur * exp(-u * u * 1.4) * sm(0.3, -0.5, d));\n      if (A * al > SA[i]) SA[i] = A * al;\n      if (d \u003c 0 && al > HZ[i]) HZ[i] = al * sm(0.5, -2, d);\n      // DNA: an interphase nucleus, or the two that reform in telophase.\n      let D = 0;\n      if (c.nS > 0) {\n        const dn = (hypot(u / na, v / nb) - 1) * nb;\n        if (dn \u003c 0.6) D = sm(0.55, -0.45, dn) * c.nS * chromatin(c, u, v, c.cond);\n      }\n      if (c.dS > 0) {\n        const dn = hypot(abs(u) - c.e, v) - c.dr;\n        if (dn \u003c 0.6) D = max(D, sm(0.55, -0.45, dn) * c.dS * chromatin(c, abs(u) - c.e, v, c.cond));\n      }\n      if (D * al > SD[i]) SD[i] = D * al;\n    }\n  const p = c.p, Rm = 0.8 * c.B;\n  // Interphase network from the centrosome.\n  if (c.net > 0.02) rays(c, c.cu, c.cv, c.nf, c.cang, TAU, c.net * 1.6 * c.rl, al, 0);\n  if (p \u003c P2) {\n    dot(SC, c.x + c.cu * c.ca - c.cv * c.sa, c.y + c.cu * c.sa + c.cv * c.ca, 1.2 * al);\n    if (c.dup) dot(SC, c.x + (c.cu + 0.8) * c.ca - c.cv * c.sa, c.y + (c.cu + 0.8) * c.sa + c.cv * c.ca, 1.2 * al);\n  } else {\n    // Asters, and the spindle between its poles.\n    const spr = mix(TAU, 2.2, c.sp), la = c.ast * c.rl * 1.2;\n    rays(c, c.p1u, c.p1v, 9, PI, spr, la, al, 3);\n    rays(c, c.p2u, c.p2v, 9, 0, spr, la, al, 5);\n    dot(SC, c.x + c.p1u * c.ca - c.p1v * c.sa, c.y + c.p1u * c.sa + c.p1v * c.ca, 1.25 * al);\n    dot(SC, c.x + c.p2u * c.ca - c.p2v * c.sa, c.y + c.p2u * c.sa + c.p2v * c.ca, 1.25 * al);\n    const hw = 0.42 * Rm, ch = c.ch, pf = c.pf * c.pf * (3 - 2 * c.pf);\n    for (let j = 0; j \u003c NCH; j++) {\n      const cu = mix(ch[j * 4] * c.rn, 0.25 * sin(TT * 3.5 + j), pf), cv = mix(ch[j * 4 + 1] * c.rn, ch[j * 4 + 2] * hw, pf), o = mix(ch[j * 4 + 3], PI / 2, pf);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const su = cu + s * c.sh * mix(-sin(o), 1, pf), sv = cv + s * c.sh * mix(cos(o), 0, pf);\n        if (c.sp > 0.02) curve(ST, c, s * c.Lp, 0, (s * c.Lp + su) / 2, sv * 1.3, su, sv, c.sp * al * 0.95);\n        if (c.chA > 0.02) {\n          // Sister chromatids, arms trailing back toward the plate in anaphase.\n          const tr = c.fa, du = mix(cos(o), -s * 0.9, tr) * 1.1, dv = mix(sin(o), 0.45 * (cv \u003c 0 ? -1 : 1), tr) * 1.1;\n          line(SD, c, su - du * (1 - tr), sv - dv * (1 - tr), su + du, sv + dv, 1.3 * c.chA * al);\n        }\n      }\n    }\n    // Central spindle, gathered into the midbody as the furrow closes.\n    if (c.ip > 0.02) {\n      const x = max(1.4, (c.sh - 0.8) * (1 - c.ft) + 1.6 * c.ft);\n      for (let k = -1; k \u003c= 1; k++) line(ST, c, -x, k * 1.1 * (1 - c.ft), x, k * 1.1 * (1 - c.ft), c.ip * al * (k ? 0.85 : 1.1));\n    }\n  }\n  // The midbody bridge back to the sister cell, with its ring.\n  if (c.br > 0.02) {\n    const dx = c.bx - c.x, dy = c.by - c.y, L = hypot(dx, dy), r0 = c.rl * 0.8;\n    if (L > r0) {\n      const ux = dx / L, uy = dy / L, n = ceil((L - r0) * Z * 2.2);\n      for (let k = 0; k \u003c= n; k++) dot(ST, c.x + ux * (r0 + ((L - r0) * k) / n), c.y + uy * (r0 + ((L - r0) * k) / n), c.br * al);\n      dot(SA, c.bx, c.by, 1.2 * c.br * al);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = { cells: [], t: 0, k1: -1, pal: new Float32Array(12), cool: 0, n: 0 };\n}\n\n// The emptiest spot in the field: best of a dozen tries.\nfunction freeSpot(S) {\n  let bx = 32, by = 64, bd = -1;\n  for (let k = 0; k \u003c 14; k++) {\n    const x = 6 + rnd() * 52, y = 6 + rnd() * 116;\n    let d = min(x + 6, 70 - x, y + 6, 134 - y) * 0.6;\n    for (const c of S.cells) d = min(d, hypot(c.x - x, c.y - y));\n    if (d > bd) (bd = d), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// Everything here runs on the slide's own clock, ds seconds a step.\nfunction step(S, ds) {\n  const cells = S.cells, n = S.n;\n  S.t += ds;\n  TT = S.t;\n  for (let i = cells.length - 1; i >= 0; i--) {\n    const c = cells[i];\n    c.p += (ds * c.rate) / 30;\n    if (c.br > 0) {\n      c.br = c.p \u003c 0.13 ? 1 - sm(0.07, 0.13, c.p) : 0;\n      if (hypot(c.bx - c.x, c.by - c.y) > c.rl * 2.4) c.br = max(0, c.br - ds * 2);\n    }\n    if (c.p >= 1) {\n      // Abscission: two daughters, each half the size, moving apart.\n      cells.splice(i, 1);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const d = newCell(c.x + s * c.e * c.ca, c.y + s * c.e * c.sa, 0, c.B * (0.95 + 0.1 * rnd()));\n        (d.vx = s * c.ca * 0.7), (d.vy = s * c.sa * 0.7), (d.br = 1), (d.bx = c.x), (d.by = c.y), (d.al = c.al), (d.out = c.out);\n        // Each daughter keeps its centrosome on the far side from its sister.\n        d.hd = c.a + (s \u003c 0 ? PI : 0) + (rnd() - 0.5);\n        d.cang = c.a + (s \u003c 0 ? PI : 0) - d.a;\n        cells.push(d);\n      }\n      continue;\n    }\n    // Crawling: interphase cells wander, round cells sit still.\n    const crawl = c.lam * 0.7;\n    c.hd += (rnd() - 0.5) * ds * 1.2;\n    c.vx *= exp(-ds * 0.6);\n    c.vy *= exp(-ds * 0.6);\n    c.x += (c.vx + cos(c.hd) * crawl) * ds;\n    c.y += (c.vy + sin(c.hd) * crawl) * ds;\n    // The walls turn a cell back and nudge it in.\n    const wx = sm(4, -3, c.x) - sm(60, 67, c.x), wy = sm(4, -3, c.y) - sm(124, 131, c.y);\n    if (wx || wy) {\n      c.hd = atan2(sin(c.hd) + wy * ds * 3, cos(c.hd) + wx * ds * 3);\n      (c.x += wx * ds * 2), (c.y += wy * ds * 2);\n    }\n    if (c.out) c.al -= ds * 0.45;\n    else c.al = min(1, c.al + ds * 0.5);\n  }\n  // Cells push gently apart.\n  for (let i = 0; i \u003c cells.length; i++)\n    for (let j = i + 1; j \u003c cells.length; j++) {\n      const a = cells[i], b = cells[j], dx = b.x - a.x, dy = b.y - a.y, d = hypot(dx, dy) + 1e-6, m = 0.8 * (a.rl + b.rl + a.e + b.e);\n      if (d \u003c 1.8 * m) {\n        const f = (((d \u003c m ? m - d : 0) * 0.5 + (1.8 * m - d) * 0.15) / d) * ds;\n        (a.x -= dx * f), (a.y -= dy * f), (b.x += dx * f), (b.y += dy * f);\n      }\n    }\n  for (let i = cells.length - 1; i >= 0; i--) if (cells[i].al \u003c= 0 && cells[i].out) cells.splice(i, 1);\n  // Keep the count: a crowded interphase cell lifts away, or a new one settles in.\n  let live = 0;\n  for (const c of cells) live += c.out ? 0 : 1;\n  S.cool -= ds;\n  if (live > n && (S.cool \u003c= 0 || live > n + 1)) {\n    let best = null, bs = -1;\n    for (const a of cells) {\n      if (a.out || a.p \u003c 0.14 || a.p > P2 - 0.04) continue;\n      let s = 0;\n      for (const b of cells) if (b !== a) s += max(0, a.rl + b.rl - hypot(a.x - b.x, a.y - b.y));\n      s += max(0, 10 - min(a.x, 64 - a.x, a.y, 128 - a.y));\n      if (s > bs) (bs = s), (best = a);\n    }\n    if (best) (best.out = 1), (S.cool = 0.8);\n  } else if (live \u003c n && S.cool \u003c= 0) {\n    const [x, y] = freeSpot(S), c = newCell(x, y, 0.12 + 0.6 * rnd());\n    c.al = 0;\n    cells.push(c);\n    S.cool = 0.5;\n  }\n  for (const c of cells) geo(c);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 9, 0.06], speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 9, 17));\n  Z = 1 + 1.15 * cl(k[3], 0, 1) ** 1.3;\n  if (k[0] !== S.k1) {\n    const s = cl(k[0], 0, 1) * 3, i = min(2, floor(s)), f = sm(0, 1, s - i);\n    for (let j = 0; j \u003c 4; j++) {\n      let a = STAINS[i][j], b = STAINS[i + 1][j];\n      if (b - a > 180) a += 360;\n      if (a - b > 180) b += 360;\n      hueRGB(mix(a, b, f), S.pal, j * 3);\n    }\n    S.k1 = k[0];\n  }\n  if (!S.cells.length) {\n    for (let i = 0; i \u003c S.n; i++) {\n      const [x, y] = freeSpot(S);\n      S.cells.push(newCell(x, y, (i + 0.8 * rnd()) / S.n));\n    }\n    for (const c of S.cells) geo(c);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    let best = null, bd = 1e9;\n    for (const c of S.cells) {\n      const d = hypot(c.x - 32, c.y - 64);\n      if (!c.out && c.p > P1 && c.p \u003c P2 && d \u003c bd) (bd = d), (best = c);\n    }\n    if (best) best.p = P2;\n  }\n  step(S, cl(dt || 0, 0, 0.1) * speed * 0.5);\n}\n\n// Box blur of radius 2 across and then down, for the glow.\nfunction blur(src, dst) {\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = y * W * 3 + ch;\n      for (let x = -2; x \u003c W; x++) {\n        if (x + 2 \u003c W) s += src[o + (x + 2) * 3];\n        if (x - 3 >= 0) s -= src[o + (x - 3) * 3];\n        if (x >= 0) dst[o + x * 3] = s / 5;\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = x * 3 + ch;\n      for (let y = -2; y \u003c H; y++) {\n        if (y + 2 \u003c H) s += dst[o + (y + 2) * W * 3];\n        if (y - 3 >= 0) s -= dst[o + (y - 3) * W * 3];\n        if (y >= 0) src[o + y * W * 3] = s / 5;\n      }\n    }\n}\n\n// Hard knee: a dye is either lit near full or left under the glow.\nconst knee = (v) => (v \u003c= 0.28 ? 0 : v >= 0.52 ? 255 : 255 * sm(0.28, 0.52, v));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.cells.length) return;\n  SA.fill(0), ST.fill(0), SD.fill(0), SC.fill(0), HZ.fill(0);\n  TT = S.t;\n  for (const c of S.cells) drawCell(c);\n  const P = S.pal;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = SA[i], t = ST[i], d = SD[i], z = SC[i];\n    if (a + t + d + z === 0) {\n      LIN[o] = LIN[o + 1] = LIN[o + 2] = BL[o] = BL[o + 1] = BL[o + 2] = 0;\n      continue;\n    }\n    LIN[o] = BL[o] = min(1, a * P[6] + t * P[3] + d * P[0] + z * P[9]);\n    LIN[o + 1] = BL[o + 1] = min(1, a * P[7] + t * P[4] + d * P[1] + z * P[10]);\n    LIN[o + 2] = BL[o + 2] = min(1, a * P[8] + t * P[5] + d * P[2] + z * P[11]);\n  }\n  blur(BL, TMP);\n  // The glow and a faint body haze stay under 21, below what counts as lit.\n  const h0 = 13 * P[3], h1 = 13 * P[4], h2 = 13 * P[5];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const h = HZ[i];\n    display.setPixel(\n      i & 63,\n      i >> 6,\n      max(knee(LIN[o]), min(21, 24 * BL[o] + h * h0)) | 0,\n      max(knee(LIN[o + 1]), min(21, 24 * BL[o + 1] + h * h1)) | 0,\n      max(knee(LIN[o + 2]), min(21, 24 * BL[o + 2] + h * h2)) | 0,\n    );\n  }\n}\n","layer":{"id":"layer-mitosis","type":"code","name":"mitosis","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mitosis\n// Family:  microbe\n// Idea:    A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after immunofluorescence micrographs of dividing cells\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1\n//\n// Knob 1: Stain. The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA.\n// Knob 2: Speed. At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower.\n// Knob 3: Cells. How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in.\n// Knob 4: Zoom. The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show.\n// Buttons: K1 tap sends the interphase cell nearest the middle into prophase now.\n\nconst W = 64, H = 128, N = W * H, TAU = 2 * Math.PI, NCH = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// A 64x64 tile of value noise that wraps, for chromatin.\nconst NT = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = ((k & 63) * 16) / 64, y = ((k >> 6) * 16) / 64, xi = floor(x), yi = floor(y), u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), a = hash(xi, yi), b = hash((xi + 1) % 16, yi), c = hash(xi, (yi + 1) % 16), d = hash((xi + 1) % 16, (yi + 1) % 16);\n  NT[k] = a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, x0 = xi & 63, y0 = (yi & 63) * 64, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) * 64;\n  return mix(mix(NT[y0 + x0], NT[y0 + x1], fx), mix(NT[y1 + x0], NT[y1 + x1], fx), fy);\n}\n\n// The cycle, as fractions of it: daughters spread, interphase, prophase,\n// prometaphase, metaphase, anaphase, telophase to the split at 1.\nconst P1 = 0.1, P2 = 0.5, P3 = 0.6, P4 = 0.67, P5 = 0.79, P6 = 0.86;\n\n// Dye hues in degrees: DNA, tubulin, actin, centrosome.\nconst STAINS = [\n  [240, 120, 0, 55],\n  [228, 352, 125, 185],\n  [192, 305, 55, 120],\n  [262, 60, 318, 170],\n];\nconst hueRGB = (h, out, o) => {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (((5 - 2 * j) + h / 60) % 6 + 6) % 6;\n    out[o + j] = 1 - max(0, min(k, 4 - k, 1));\n  }\n};\n\n// One buffer per dye (actin, tubulin, DNA, centrosome) and one for the body\n// haze. LIN holds the merged colour and BL its blur for the glow; TMP is scratch.\nconst SA = new Float32Array(N), ST = new Float32Array(N), SD = new Float32Array(N), SC = new Float32Array(N), HZ = new Float32Array(N);\nconst LIN = new Float32Array(N * 3), BL = new Float32Array(N * 3), TMP = new Float32Array(N * 3);\nlet Z = 1, TT = 0;\n\nfunction newCell(x, y, p, B) {\n  const c = {\n    x, y, vx: 0, vy: 0, a: rnd() * PI, hd: rnd() * TAU, p, rate: 0.85 + 0.3 * rnd(), B: B || 12 + 2 * rnd(),\n    sd: floor(rnd() * 9973), w1: rnd() * TAU, w2: rnd() * TAU, w3: rnd() * TAU, nf: 22 + floor(rnd() * 7), cang: rnd() * TAU,\n    ox: rnd() * 64, oy: rnd() * 64, tilt: (rnd() - 0.5) * 0.4, al: 1, out: 0, br: 0, bx: 0, by: 0,\n    ca: 1, sa: 0, e: 0, rl: 5, kk: 2, pin: 0, wa: 0, hdl: 0, lam: 0, cx: 1, fur: 0, nS: 0, rn: 3, cond: 0, dense: 0, dS: 0, dr: 2,\n    Lp: 3, sp: 0, net: 0, ast: 0, chA: 0, sh: 0.5, pf: 0, ip: 0, ft: 0, fa: 0, cu: 0, cv: 0, dup: 0, rad: 10, p1u: 0, p1v: 0, p2u: 0, p2v: 0,\n    ch: new Float32Array(NCH * 4), wt: new Float32Array(64), fw: new Float32Array(64), gp: new Float32Array(64),\n  };\n  for (let j = 0; j \u003c NCH; j++) {\n    const r = 0.75 * sqrt(rnd()), q = rnd() * TAU;\n    c.ch[j * 4] = r * cos(q);\n    c.ch[j * 4 + 1] = r * sin(q);\n    c.ch[j * 4 + 2] = ((j + 0.5) / NCH) * 2 - 1 + (rnd() - 0.5) * 0.15;\n    c.ch[j * 4 + 3] = rnd() * PI;\n  }\n  return c;\n}\n\n// Where the cell is in its cycle decides its shape and what each dye shows.\nfunction geo(c) {\n  const p = c.p, B = c.B, Rm = 0.8 * B;\n  let rho = 1, R = Rm, f;\n  if (p \u003c P1) (f = sm(0, P1, p)), (rho = 1 - f), (R = mix(0.59 * B, 0.74 * B, f));\n  else if (p \u003c P2) (rho = 0), (R = mix(0.74 * B, B, (p - P1) / (P2 - P1)));\n  else if (p \u003c P3) (f = sm(P2, P3, p)), (rho = f), (R = mix(B, Rm, f));\n  const fa = (c.fa = sm(P5, P6, p)), ft = (c.ft = sm(P6, 1, p));\n  let e = 0.3 * R * (1 - rho);\n  if (p >= P5) e = p \u003c P6 ? 0.3 * Rm * fa : mix(0.3, 0.58, ft) * Rm;\n  c.e = e;\n  c.rl = R - 0.45 * e;\n  c.kk = (p >= P6 ? mix(0.5, 0.06, ft) : 0.5) * R;\n  c.pin = p >= P6 ? 3 * ft * sqrt(ft) : 0;\n  c.wa = 0.16 * (1 - rho) + 0.025;\n  c.lam = 1 - rho;\n  c.cx = mix(0.85, 1.2, rho);\n  c.fur = ft;\n  c.hdl = c.hd - c.a;\n  // Nucleus: whole until the envelope breaks early in prometaphase.\n  c.rn = 0.44 * R;\n  c.nS = p \u003c P3 ? 1 : 1 - sm(P3, P3 + 0.035, p);\n  c.cond = p \u003c P2 || p >= P6 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dense = p \u003c P1 ? 1 - sm(0, P1, p) : p >= P6 ? 1 : 0;\n  c.dS = sm(0.3, 0.8, ft);\n  c.dr = mix(0.13, 0.22, ft) * B;\n  // Chromosomes gather on the plate; in anaphase the sisters part for the poles.\n  c.pf = sm(P3, P4, p);\n  c.chA = p \u003c P3 ? 0 : sm(P3, P3 + 0.03, p) * (1 - sm(0.25, 0.7, ft));\n  const Lp0 = 0.58 * Rm;\n  c.Lp = p \u003c P5 ? Lp0 : p \u003c P6 ? Lp0 + 0.7 * e : mix(0.79, 0.86, ft) * Rm;\n  c.sh = p \u003c P5 ? 0.5 : p \u003c P6 ? mix(0.5, c.Lp - 1.4, fa) : c.Lp - 1.4;\n  c.sp = p \u003c P3 ? 0 : p \u003c P6 ? sm(P3, P4, p) : 1 - ft;\n  c.ip = p \u003c P5 ? 0 : p \u003c P6 ? fa : 1;\n  c.net = p \u003c P1 ? mix(0.45, 1, sm(0, P1, p)) : p \u003c P2 ? 1 : p \u003c P3 ? 1 - sm(P2, P3, p) : 0;\n  c.ast = p \u003c P2 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dup = p > 0.4 && p \u003c P3 ? 1 : 0;\n  // Centrosome beside the nucleus; in prophase the pair travels round it to the poles.\n  c.cu = (c.rn + 1) * cos(c.cang);\n  c.cv = (c.rn + 1) * sin(c.cang);\n  if (p >= P2) {\n    const g = p \u003c P3 ? sm(P2, P3, p) : 1;\n    c.p1u = mix(c.cu, -c.Lp, g);\n    c.p1v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n    c.p2u = mix(c.cu, c.Lp, g);\n    c.p2v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n  }\n  // The ruffled outline and the leading edge, as a table round the cell.\n  for (let k = 0; k \u003c 64; k++) {\n    const th = (k * PI) / 32 - PI, fr = max(0, cos(th - c.hdl)), F = fr * fr * c.lam;\n    c.fw[k] = F;\n    c.gp[k] = 1 - 0.9 * c.lam * sm(0.4, 0.5, 0.5 + 0.28 * sin(3 * th + 2 * c.w2) + 0.22 * sin(7 * th + c.w3));\n    c.wt[k] = c.rl * c.wa * (0.5 * sin(2 * th + c.w1) + 0.3 * sin(3 * th + c.w2) + 0.2 * sin(5 * th + c.w3 + TT * 0.35) + 0.9 * F);\n  }\n  c.rad = (c.e + c.rl * (1 + 1.6 * c.wa) + 2) * Z;\n  c.ca = cos(c.a);\n  c.sa = sin(c.a);\n}\n\n// What shapeD found at the last point it was asked about, kept for drawCell.\n// A typed array, so writing it for every LED makes no garbage.\nconst G = new Float64Array(3);\n// Signed distance to the cell's outline in its own frame: two discs joined\n// smoothly, ruffled, bulging at the leading edge, pinched at the furrow.\nfunction shapeD(c, u, v) {\n  const e = c.e, rl = c.rl, kk = c.kk;\n  const d1 = hypot(u - e, v) - rl, d2 = hypot(u + e, v) - rl, h = cl(0.5 + (0.5 * (d2 - d1)) / kk, 0, 1);\n  let d = mix(d2, d1, h) - kk * h * (1 - h);\n  const th = (G[1] = atan2(v, u)), q = (th + PI) * (32 / PI), k = floor(q), f = q - k, k0 = k & 63, k1 = (k + 1) & 63;\n  G[0] = mix(c.fw[k0], c.fw[k1], f);\n  G[2] = mix(c.gp[k0], c.gp[k1], f);\n  d -= mix(c.wt[k0], c.wt[k1], f);\n  if (c.pin > 0) d += c.pin * exp(-u * u * 0.4);\n  return d;\n}\n\nfunction put(B, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n    const i = y * W + x;\n    if (v > B[i]) B[i] = v;\n  }\n}\n// A soft dot at a world point; weights sharpened so lines stay one LED wide.\nfunction dot(B, wx, wy, a) {\n  const x = (wx - 32) * Z + 31.5, y = (wy - 64) * Z + 63.5, x0 = floor(x), y0 = floor(y);\n  let fx = x - x0, fy = y - y0;\n  (fx = fx * fx * (3 - 2 * fx)), (fy = fy * fy * (3 - 2 * fy));\n  put(B, x0, y0, a * (1 - fx) * (1 - fy));\n  put(B, x0 + 1, y0, a * fx * (1 - fy));\n  put(B, x0, y0 + 1, a * (1 - fx) * fy);\n  put(B, x0 + 1, y0 + 1, a * fx * fy);\n}\n// A curve in the cell's frame from (au, av) to (bu, bv) bowed through (mu, mv).\nfunction curve(B, c, au, av, mu, mv, bu, bv, a) {\n  const n = max(2, ceil((hypot(mu - au, mv - av) + hypot(bu - mu, bv - mv)) * Z * 2.2));\n  for (let k = 0; k \u003c= n; k++) {\n    const t = k / n, s = 1 - t, u = s * s * au + 2 * s * t * mu + t * t * bu, v = s * s * av + 2 * s * t * mv + t * t * bv;\n    dot(B, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, a);\n  }\n}\nconst line = (B, c, au, av, bu, bv, a) => curve(B, c, au, av, (au + bu) / 2, (av + bv) / 2, bu, bv, a);\n\n// Microtubules grown out from (u0, v0) until they meet the cortex.\nfunction rays(c, u0, v0, n, ang, spread, len, a, sd) {\n  const st = 0.45 / Z;\n  for (let i = 0; i \u003c n; i++) {\n    const h1 = hash(c.sd + sd, i), h2 = hash(i, c.sd + sd + 7);\n    let q = ang + (n > 1 ? ((i + 0.5 * h1) / n - 0.5) * spread : 0), u = u0, v = v0;\n    const L = len * (0.7 + 0.45 * h2), curl = (h1 - 0.5) * 0.3, b = a * (0.9 + 0.25 * h2);\n    for (let s = 0; s \u003c L; s += st) {\n      q += curl * st + 0.12 * sin(s * 0.6 + i * 1.7) * st;\n      u += cos(q) * st;\n      v += sin(q) * st;\n      if (shapeD(c, u, v) > -1.6 - 1.4 * G[0]) break;\n      const nq = c.nS > 0.5 ? hypot(u / (c.rn * 1.1), v / (c.rn * 0.92)) : 2;\n      // Asters wrap round the nucleus until its envelope breaks.\n      if (nq \u003c 1 && sd) break;\n      dot(ST, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, nq \u003c 1 ? b * 0.3 : b);\n    }\n  }\n}\n\nfunction chromatin(c, u, v, cond) {\n  const tu = u * 1.5 + c.ox, tv = v * 1.5 + c.oy;\n  let t = mix(0.35 + 0.9 * nz(tu, tv) - 0.6 * exp(-((u - 0.3 * c.rn) ** 2 + (v + 0.2 * c.rn) ** 2) * 0.9), 1.2, c.dense);\n  if (cond > 0) t = mix(t, 1.5 * sm(0.14, 0.04, abs(nz(tu * 1.4 + 17, tv * 1.4 + 5) - 0.5)), cond);\n  return t;\n}\n\nfunction drawCell(c) {\n  const al = c.al, cx = (c.x - 32) * Z + 32, cy = (c.y - 64) * Z + 64, r = c.rad;\n  const x0 = max(0, floor(cx - r)), x1 = min(W - 1, ceil(cx + r)), y0 = max(0, floor(cy - r)), y1 = min(H - 1, ceil(cy + r));\n  if (x0 > x1 || y0 > y1) return;\n  const iz = 1 / Z, rn = c.rn, na = rn * 1.1, nb = rn * 0.92, r2 = r * r;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      if ((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2 > r2) continue;\n      const dx = (x + 0.5 - cx) * iz, dy = (y + 0.5 - cy) * iz, u = dx * c.ca + dy * c.sa, v = -dx * c.sa + dy * c.ca;\n      const d = shapeD(c, u, v);\n      if (d > 0.8) continue;\n      const i = y * W + x;\n      // Actin: the cortex, broad at the leading edge, and the ring at the furrow.\n      const fr = G[0], th = G[1];\n      let A = sm(-1.2, -0.7, d) * sm(0.35, -0.15, d) * c.cx * G[2];\n      if (fr > 0.05) A = max(A, fr * sm(-2.6, -1.9, d) * sm(0.35, -0.15, d) * (0.55 + 0.6 * nz(th * 20.372 + c.oy, c.ox + d)));\n      if (c.lam > 0.05 && d \u003c -1.2) {\n        // Stress fibres along the cell's long axis, some broken off short.\n        const q = (v + c.tilt * u) / 2.7 + c.ox, k = floor(q + 0.5), h = hash(c.sd + 11, k), e = (hash(k, c.sd) - 0.5) * c.rl;\n        if (h > 0.55 && abs(u - e) \u003c c.rl * (0.3 + 0.7 * h) && hypot(u / na, v / nb) > 1.15) A = max(A, c.lam * sm(0.62, 0.22, abs(q - k) * 2.7) * sm(-1.2, -2.2, d));\n      }\n      if (c.fur > 0) A = max(A, 1.3 * c.fur * exp(-u * u * 1.4) * sm(0.3, -0.5, d));\n      if (A * al > SA[i]) SA[i] = A * al;\n      if (d \u003c 0 && al > HZ[i]) HZ[i] = al * sm(0.5, -2, d);\n      // DNA: an interphase nucleus, or the two that reform in telophase.\n      let D = 0;\n      if (c.nS > 0) {\n        const dn = (hypot(u / na, v / nb) - 1) * nb;\n        if (dn \u003c 0.6) D = sm(0.55, -0.45, dn) * c.nS * chromatin(c, u, v, c.cond);\n      }\n      if (c.dS > 0) {\n        const dn = hypot(abs(u) - c.e, v) - c.dr;\n        if (dn \u003c 0.6) D = max(D, sm(0.55, -0.45, dn) * c.dS * chromatin(c, abs(u) - c.e, v, c.cond));\n      }\n      if (D * al > SD[i]) SD[i] = D * al;\n    }\n  const p = c.p, Rm = 0.8 * c.B;\n  // Interphase network from the centrosome.\n  if (c.net > 0.02) rays(c, c.cu, c.cv, c.nf, c.cang, TAU, c.net * 1.6 * c.rl, al, 0);\n  if (p \u003c P2) {\n    dot(SC, c.x + c.cu * c.ca - c.cv * c.sa, c.y + c.cu * c.sa + c.cv * c.ca, 1.2 * al);\n    if (c.dup) dot(SC, c.x + (c.cu + 0.8) * c.ca - c.cv * c.sa, c.y + (c.cu + 0.8) * c.sa + c.cv * c.ca, 1.2 * al);\n  } else {\n    // Asters, and the spindle between its poles.\n    const spr = mix(TAU, 2.2, c.sp), la = c.ast * c.rl * 1.2;\n    rays(c, c.p1u, c.p1v, 9, PI, spr, la, al, 3);\n    rays(c, c.p2u, c.p2v, 9, 0, spr, la, al, 5);\n    dot(SC, c.x + c.p1u * c.ca - c.p1v * c.sa, c.y + c.p1u * c.sa + c.p1v * c.ca, 1.25 * al);\n    dot(SC, c.x + c.p2u * c.ca - c.p2v * c.sa, c.y + c.p2u * c.sa + c.p2v * c.ca, 1.25 * al);\n    const hw = 0.42 * Rm, ch = c.ch, pf = c.pf * c.pf * (3 - 2 * c.pf);\n    for (let j = 0; j \u003c NCH; j++) {\n      const cu = mix(ch[j * 4] * c.rn, 0.25 * sin(TT * 3.5 + j), pf), cv = mix(ch[j * 4 + 1] * c.rn, ch[j * 4 + 2] * hw, pf), o = mix(ch[j * 4 + 3], PI / 2, pf);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const su = cu + s * c.sh * mix(-sin(o), 1, pf), sv = cv + s * c.sh * mix(cos(o), 0, pf);\n        if (c.sp > 0.02) curve(ST, c, s * c.Lp, 0, (s * c.Lp + su) / 2, sv * 1.3, su, sv, c.sp * al * 0.95);\n        if (c.chA > 0.02) {\n          // Sister chromatids, arms trailing back toward the plate in anaphase.\n          const tr = c.fa, du = mix(cos(o), -s * 0.9, tr) * 1.1, dv = mix(sin(o), 0.45 * (cv \u003c 0 ? -1 : 1), tr) * 1.1;\n          line(SD, c, su - du * (1 - tr), sv - dv * (1 - tr), su + du, sv + dv, 1.3 * c.chA * al);\n        }\n      }\n    }\n    // Central spindle, gathered into the midbody as the furrow closes.\n    if (c.ip > 0.02) {\n      const x = max(1.4, (c.sh - 0.8) * (1 - c.ft) + 1.6 * c.ft);\n      for (let k = -1; k \u003c= 1; k++) line(ST, c, -x, k * 1.1 * (1 - c.ft), x, k * 1.1 * (1 - c.ft), c.ip * al * (k ? 0.85 : 1.1));\n    }\n  }\n  // The midbody bridge back to the sister cell, with its ring.\n  if (c.br > 0.02) {\n    const dx = c.bx - c.x, dy = c.by - c.y, L = hypot(dx, dy), r0 = c.rl * 0.8;\n    if (L > r0) {\n      const ux = dx / L, uy = dy / L, n = ceil((L - r0) * Z * 2.2);\n      for (let k = 0; k \u003c= n; k++) dot(ST, c.x + ux * (r0 + ((L - r0) * k) / n), c.y + uy * (r0 + ((L - r0) * k) / n), c.br * al);\n      dot(SA, c.bx, c.by, 1.2 * c.br * al);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = { cells: [], t: 0, k1: -1, pal: new Float32Array(12), cool: 0, n: 0 };\n}\n\n// The emptiest spot in the field: best of a dozen tries.\nfunction freeSpot(S) {\n  let bx = 32, by = 64, bd = -1;\n  for (let k = 0; k \u003c 14; k++) {\n    const x = 6 + rnd() * 52, y = 6 + rnd() * 116;\n    let d = min(x + 6, 70 - x, y + 6, 134 - y) * 0.6;\n    for (const c of S.cells) d = min(d, hypot(c.x - x, c.y - y));\n    if (d > bd) (bd = d), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// Everything here runs on the slide's own clock, ds seconds a step.\nfunction step(S, ds) {\n  const cells = S.cells, n = S.n;\n  S.t += ds;\n  TT = S.t;\n  for (let i = cells.length - 1; i >= 0; i--) {\n    const c = cells[i];\n    c.p += (ds * c.rate) / 30;\n    if (c.br > 0) {\n      c.br = c.p \u003c 0.13 ? 1 - sm(0.07, 0.13, c.p) : 0;\n      if (hypot(c.bx - c.x, c.by - c.y) > c.rl * 2.4) c.br = max(0, c.br - ds * 2);\n    }\n    if (c.p >= 1) {\n      // Abscission: two daughters, each half the size, moving apart.\n      cells.splice(i, 1);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const d = newCell(c.x + s * c.e * c.ca, c.y + s * c.e * c.sa, 0, c.B * (0.95 + 0.1 * rnd()));\n        (d.vx = s * c.ca * 0.7), (d.vy = s * c.sa * 0.7), (d.br = 1), (d.bx = c.x), (d.by = c.y), (d.al = c.al), (d.out = c.out);\n        // Each daughter keeps its centrosome on the far side from its sister.\n        d.hd = c.a + (s \u003c 0 ? PI : 0) + (rnd() - 0.5);\n        d.cang = c.a + (s \u003c 0 ? PI : 0) - d.a;\n        cells.push(d);\n      }\n      continue;\n    }\n    // Crawling: interphase cells wander, round cells sit still.\n    const crawl = c.lam * 0.7;\n    c.hd += (rnd() - 0.5) * ds * 1.2;\n    c.vx *= exp(-ds * 0.6);\n    c.vy *= exp(-ds * 0.6);\n    c.x += (c.vx + cos(c.hd) * crawl) * ds;\n    c.y += (c.vy + sin(c.hd) * crawl) * ds;\n    // The walls turn a cell back and nudge it in.\n    const wx = sm(4, -3, c.x) - sm(60, 67, c.x), wy = sm(4, -3, c.y) - sm(124, 131, c.y);\n    if (wx || wy) {\n      c.hd = atan2(sin(c.hd) + wy * ds * 3, cos(c.hd) + wx * ds * 3);\n      (c.x += wx * ds * 2), (c.y += wy * ds * 2);\n    }\n    if (c.out) c.al -= ds * 0.45;\n    else c.al = min(1, c.al + ds * 0.5);\n  }\n  // Cells push gently apart.\n  for (let i = 0; i \u003c cells.length; i++)\n    for (let j = i + 1; j \u003c cells.length; j++) {\n      const a = cells[i], b = cells[j], dx = b.x - a.x, dy = b.y - a.y, d = hypot(dx, dy) + 1e-6, m = 0.8 * (a.rl + b.rl + a.e + b.e);\n      if (d \u003c 1.8 * m) {\n        const f = (((d \u003c m ? m - d : 0) * 0.5 + (1.8 * m - d) * 0.15) / d) * ds;\n        (a.x -= dx * f), (a.y -= dy * f), (b.x += dx * f), (b.y += dy * f);\n      }\n    }\n  for (let i = cells.length - 1; i >= 0; i--) if (cells[i].al \u003c= 0 && cells[i].out) cells.splice(i, 1);\n  // Keep the count: a crowded interphase cell lifts away, or a new one settles in.\n  let live = 0;\n  for (const c of cells) live += c.out ? 0 : 1;\n  S.cool -= ds;\n  if (live > n && (S.cool \u003c= 0 || live > n + 1)) {\n    let best = null, bs = -1;\n    for (const a of cells) {\n      if (a.out || a.p \u003c 0.14 || a.p > P2 - 0.04) continue;\n      let s = 0;\n      for (const b of cells) if (b !== a) s += max(0, a.rl + b.rl - hypot(a.x - b.x, a.y - b.y));\n      s += max(0, 10 - min(a.x, 64 - a.x, a.y, 128 - a.y));\n      if (s > bs) (bs = s), (best = a);\n    }\n    if (best) (best.out = 1), (S.cool = 0.8);\n  } else if (live \u003c n && S.cool \u003c= 0) {\n    const [x, y] = freeSpot(S), c = newCell(x, y, 0.12 + 0.6 * rnd());\n    c.al = 0;\n    cells.push(c);\n    S.cool = 0.5;\n  }\n  for (const c of cells) geo(c);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 9, 0.06], speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 9, 17));\n  Z = 1 + 1.15 * cl(k[3], 0, 1) ** 1.3;\n  if (k[0] !== S.k1) {\n    const s = cl(k[0], 0, 1) * 3, i = min(2, floor(s)), f = sm(0, 1, s - i);\n    for (let j = 0; j \u003c 4; j++) {\n      let a = STAINS[i][j], b = STAINS[i + 1][j];\n      if (b - a > 180) a += 360;\n      if (a - b > 180) b += 360;\n      hueRGB(mix(a, b, f), S.pal, j * 3);\n    }\n    S.k1 = k[0];\n  }\n  if (!S.cells.length) {\n    for (let i = 0; i \u003c S.n; i++) {\n      const [x, y] = freeSpot(S);\n      S.cells.push(newCell(x, y, (i + 0.8 * rnd()) / S.n));\n    }\n    for (const c of S.cells) geo(c);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    let best = null, bd = 1e9;\n    for (const c of S.cells) {\n      const d = hypot(c.x - 32, c.y - 64);\n      if (!c.out && c.p > P1 && c.p \u003c P2 && d \u003c bd) (bd = d), (best = c);\n    }\n    if (best) best.p = P2;\n  }\n  step(S, cl(dt || 0, 0, 0.1) * speed * 0.5);\n}\n\n// Box blur of radius 2 across and then down, for the glow.\nfunction blur(src, dst) {\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = y * W * 3 + ch;\n      for (let x = -2; x \u003c W; x++) {\n        if (x + 2 \u003c W) s += src[o + (x + 2) * 3];\n        if (x - 3 >= 0) s -= src[o + (x - 3) * 3];\n        if (x >= 0) dst[o + x * 3] = s / 5;\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = x * 3 + ch;\n      for (let y = -2; y \u003c H; y++) {\n        if (y + 2 \u003c H) s += dst[o + (y + 2) * W * 3];\n        if (y - 3 >= 0) s -= dst[o + (y - 3) * W * 3];\n        if (y >= 0) src[o + y * W * 3] = s / 5;\n      }\n    }\n}\n\n// Hard knee: a dye is either lit near full or left under the glow.\nconst knee = (v) => (v \u003c= 0.28 ? 0 : v >= 0.52 ? 255 : 255 * sm(0.28, 0.52, v));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.cells.length) return;\n  SA.fill(0), ST.fill(0), SD.fill(0), SC.fill(0), HZ.fill(0);\n  TT = S.t;\n  for (const c of S.cells) drawCell(c);\n  const P = S.pal;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = SA[i], t = ST[i], d = SD[i], z = SC[i];\n    if (a + t + d + z === 0) {\n      LIN[o] = LIN[o + 1] = LIN[o + 2] = BL[o] = BL[o + 1] = BL[o + 2] = 0;\n      continue;\n    }\n    LIN[o] = BL[o] = min(1, a * P[6] + t * P[3] + d * P[0] + z * P[9]);\n    LIN[o + 1] = BL[o + 1] = min(1, a * P[7] + t * P[4] + d * P[1] + z * P[10]);\n    LIN[o + 2] = BL[o + 2] = min(1, a * P[8] + t * P[5] + d * P[2] + z * P[11]);\n  }\n  blur(BL, TMP);\n  // The glow and a faint body haze stay under 21, below what counts as lit.\n  const h0 = 13 * P[3], h1 = 13 * P[4], h2 = 13 * P[5];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const h = HZ[i];\n    display.setPixel(\n      i & 63,\n      i >> 6,\n      max(knee(LIN[o]), min(21, 24 * BL[o] + h * h0)) | 0,\n      max(knee(LIN[o + 1]), min(21, 24 * BL[o + 1] + h * h1)) | 0,\n      max(knee(LIN[o + 2]), min(21, 24 * BL[o + 2] + h * h2)) | 0,\n    );\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stain","min":0,"max":1,"about":"The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower."},{"name":"Cells","min":9,"max":17,"about":"How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in."},{"name":"Zoom","min":0,"max":1,"about":"The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show."}],"start":[0,2,9,0.06],"measures":{"motion":0.3411,"detail":0.1419,"edges":0.8838,"complexity":0.8038,"coverage":0.2626,"colour":0.5399,"drift":0.2023},"knobResponse":[0.1544,0.1632,0.2075,0.2066]},{"slug":"moire-rings","title":"Moire Rings","family":"wave","round":1,"note":"동심원 두 벌이 서로 지나가고, 어긋나는 자리에 아무도 그리지 않은 무늬가 생겨요.","idea":"Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.","buttons":"K1 tap swaps which set of rings is drawn bright.","code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-moire-rings","type":"code","name":"moire-rings","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two-colour pair around the colour wheel."},{"name":"Speed","min":0.1,"max":6,"about":"How fast the two centres orbit."},{"name":"Rings","min":5,"max":16,"about":"Ring spacing in LEDs; small is a fine moire, large is a few fat bands."},{"name":"Spread","min":-1,"max":1,"about":"How far apart the two centres travel, and below 0 the second one turns the other way."}],"start":[0,2,5,0.06],"measures":{"motion":1.5703,"detail":0.2108,"edges":1,"complexity":0.1822,"coverage":0.7502,"colour":0.4676,"drift":0.1626},"knobResponse":[0.2556,0.2849,0.3431,0.2821]},{"slug":"mood-tint","title":"Mood Tint","family":"cosmetic","round":34,"note":"판 전체가 열에 색이 바뀌는 짙은 보라 코팅이에요. 보이지 않는 손끝이 누른 자리마다 지문 결이 든 옅은 난초색 타원이 피고, 열이 퍼지며 결부터 흐려지고 이웃 자국과 엉겨 붙었다가 다시 보라 속으로 줄어들어요. K1 을 누르면 손바닥 하나가 1.1초 동안 눌러요.","idea":"A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.","buttons":"K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.","code":"// ===== Patternflow pattern =====\n// Title:   Mood Tint\n// Family:  cosmetic\n// Idea:    A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after thermochromic lip tints and mood nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1\n//\n// Knob 1: Hue. The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive.\n// Knob 2: Speed. At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster.\n// Knob 3: Warmth. How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together.\n// Knob 4: Blend. How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring.\n// Buttons: K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Temperatures are in units of a fingertip at Warmth 0 above the room: the\n// room is 0, a fingertip 1. The coat turns at THETA.\nconst THETA = 0.4;\n// Heat diffusion in LED^2 a second and Newton cooling a second, at Speed 2.\nconst ALPHA = 1.1, COOL = 0.32;\n// How fast the coat under a pressed fingertip takes its warmth, a second.\nconst GRIP = 7;\n// Hue of the cool coat at Hue 0: violet. The warm coat is a paler, pinker shade.\nconst H0 = 0.76;\n// The colour table spans temperatures -0.2 to 1.8.\nconst LUT = 512, T0 = -0.2, T1 = 1.8;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, warmth: 0, blend: 0.06, warm: false, clock: 0, nextPress: 0,\n    T: new Float32Array(N), U: new Float32Array(N), room: new Float32Array(N),\n    presses: [], lut: new Uint8Array(LUT * 3), lutKey: \"\", c: [0, 0, 0], c2: [0, 0, 0],\n  };\n  const S = params.s;\n  // The room is not quite even: a soft field of +-0.05 that only the cool\n  // shade shows.\n  const g = [];\n  for (let i = 0; i \u003c 5 * 9; i++) g.push(random() * 2 - 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / W) * 4, v = (y / H) * 8, i = floor(u), j = floor(v), fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * 5 + i], b = g[j * 5 + i + 1], c = g[(j + 1) * 5 + i], d = g[(j + 1) * 5 + i + 1];\n      S.room[y * W + x] = 0.05 * ((a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv);\n    }\n}\n\n// A fingertip pad: an oval about 11 by 16 LEDs, tilted, with whorl ridges\n// 2.3 LEDs apart round a core a little below its middle.\nfunction fingertip(x, y) {\n  return {\n    x, y, rx: 5 + random() * 1.5, ry: 7 + random() * 1.8, a: (random() - 0.5) * 1.1,\n    core: 1 + random() * 2, ph: random() * 6.28, lam: 2.8, palm: false,\n    t: 0, dur: 0.45 + random() * 0.3,\n  };\n}\n\n// The coat's colour at each temperature, rebuilt when a knob moves it.\nfunction buildLut(S) {\n  const key = S.hue.toFixed(3) + S.blend.toFixed(3);\n  if (key === S.lutKey) return;\n  S.lutKey = key;\n  const h = S.hue + H0, hh = h - floor(h), c = S.c, c2 = S.c2;\n  // Orange and yellow go brown or olive when deep, so round them the cool\n  // shade stays bright.\n  const lift = sm(0.0, 0.06, hh) * (1 - sm(0.24, 0.33, hh));\n  const width = 0.012 + 0.6 * S.blend * S.blend;\n  for (let i = 0; i \u003c LUT; i++) {\n    const T = T0 + ((T1 - T0) * i) / (LUT - 1);\n    const m = sm(THETA - width, THETA + width, T);\n    // Cool: deeper the colder it is, a little lighter just short of turning.\n    const vc = 0.44 + 0.34 * lift + 0.12 * sm(-0.1, THETA, T);\n    hsv(h, 0.9 - 0.1 * lift, vc, c);\n    // Warm: pale, and paler the hotter, so a ridge pressed hot is a whiter line.\n    const hot = sm(THETA, THETA + 0.7, T);\n    hsv(h + 0.08, (0.5 - 0.42 * hot) * (1 - 0.5 * lift), 1, c2);\n    for (let k = 0; k \u003c 3; k++) S.lut[i * 3 + k] = round(255 * (c[k] + (c2[k] - c[k]) * m));\n  }\n}\n\n// One moment of the coat: presses warm it, heat spreads and drains away.\nfunction step(S, dt) {\n  const { T, U, room } = S;\n  const Tf = 1.6 ** S.warmth;\n  // Fingertips arrive in little groups of one to three, about every 0.42 s.\n  S.nextPress -= dt;\n  if (S.nextPress \u003c= 0) {\n    S.nextPress = 0.1 + random() * 0.35;\n    const n = random() \u003c 0.55 ? 1 : random() \u003c 0.7 ? 2 : 3;\n    const x0 = 6 + random() * (W - 12), y0 = 8 + random() * (H - 16);\n    for (let i = 0; i \u003c n; i++) S.presses.push(fingertip(x0 + (i - (n - 1) / 2) * 12 + (random() - 0.5) * 3, y0 + (random() - 0.5) * 8));\n  }\n  for (const P of S.presses) {\n    P.t += dt;\n    const env = sm(0, 0.12, P.t) * (1 - sm(P.dur - 0.1, P.dur, P.t));\n    if (env \u003c= 0) continue;\n    const ca = cos(P.a), sa = sin(P.a), R = max(P.rx, P.ry) + 2;\n    const k = 1 - exp(-GRIP * dt * env);\n    for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, P.y + R); y++)\n      for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, P.x + R); x++) {\n        const dx = x - P.x, dy = y - P.y, u = dx * ca + dy * sa, v = -dx * sa + dy * ca;\n        const rho = sqrt((u / P.rx) ** 2 + (v / P.ry) ** 2);\n        if (rho >= 1) continue;\n        let ridge;\n        if (P.palm) ridge = 0.5 + 0.5 * cos(u * 0.35 + 2.2 * sin(v * 0.11 + P.ph)) * cos(v * 0.5 + sin(u * 0.2));\n        else {\n          const vv = v - P.core, rw = sqrt(u * u + vv * vv * 0.7) + 0.8 * sin(atan2(vv, u) + P.ph);\n          ridge = 0.5 + 0.5 * cos((2 * PI * rw) / P.lam);\n        }\n        const s = (1 - sm(0.72, 1, rho)) * (0.58 + 0.42 * ridge);\n        const p = y * W + x, target = Tf * s;\n        if (target > T[p]) T[p] += (target - T[p]) * k;\n      }\n  }\n  S.presses = S.presses.filter((P) => P.t \u003c P.dur);\n  // Heat equation on the panel, its edges insulated, and Newton cooling\n  // toward the room.\n  const a = ALPHA * dt, c = COOL * dt;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p];\n      const l = x > 0 ? T[p - 1] : t, r = x \u003c W - 1 ? T[p + 1] : t, u = y > 0 ? T[p - W] : t, d = y \u003c H - 1 ? T[p + W] : t;\n      U[p] = t + a * (l + r + u + d - 4 * t) - c * (t - room[p]);\n    }\n  T.set(U);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.warmth = cl(k[2], -1, 1);\n  S.blend = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a coat that has been pressed for four seconds.\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const P = fingertip(10 + random() * (W - 20), 22 + random() * (H - 44));\n    Object.assign(P, { rx: 17, ry: 23, a: (random() - 0.5) * 0.5, palm: true, dur: 1.1 });\n    S.presses.push(P);\n  }\n  // Time on the coat runs at Speed / 2; steps stay under 0.07 s so the heat\n  // equation holds steady.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 0.07);\n    step(S, h);\n    left -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  buildLut(S);\n  const { T, lut } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = round(((cl(T[y * W + x], T0, T1) - T0) / (T1 - T0)) * (LUT - 1)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n}\n","layer":{"id":"layer-mood-tint","type":"code","name":"mood-tint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mood Tint\n// Family:  cosmetic\n// Idea:    A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after thermochromic lip tints and mood nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1\n//\n// Knob 1: Hue. The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive.\n// Knob 2: Speed. At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster.\n// Knob 3: Warmth. How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together.\n// Knob 4: Blend. How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring.\n// Buttons: K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Temperatures are in units of a fingertip at Warmth 0 above the room: the\n// room is 0, a fingertip 1. The coat turns at THETA.\nconst THETA = 0.4;\n// Heat diffusion in LED^2 a second and Newton cooling a second, at Speed 2.\nconst ALPHA = 1.1, COOL = 0.32;\n// How fast the coat under a pressed fingertip takes its warmth, a second.\nconst GRIP = 7;\n// Hue of the cool coat at Hue 0: violet. The warm coat is a paler, pinker shade.\nconst H0 = 0.76;\n// The colour table spans temperatures -0.2 to 1.8.\nconst LUT = 512, T0 = -0.2, T1 = 1.8;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, warmth: 0, blend: 0.06, warm: false, clock: 0, nextPress: 0,\n    T: new Float32Array(N), U: new Float32Array(N), room: new Float32Array(N),\n    presses: [], lut: new Uint8Array(LUT * 3), lutKey: \"\", c: [0, 0, 0], c2: [0, 0, 0],\n  };\n  const S = params.s;\n  // The room is not quite even: a soft field of +-0.05 that only the cool\n  // shade shows.\n  const g = [];\n  for (let i = 0; i \u003c 5 * 9; i++) g.push(random() * 2 - 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / W) * 4, v = (y / H) * 8, i = floor(u), j = floor(v), fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * 5 + i], b = g[j * 5 + i + 1], c = g[(j + 1) * 5 + i], d = g[(j + 1) * 5 + i + 1];\n      S.room[y * W + x] = 0.05 * ((a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv);\n    }\n}\n\n// A fingertip pad: an oval about 11 by 16 LEDs, tilted, with whorl ridges\n// 2.3 LEDs apart round a core a little below its middle.\nfunction fingertip(x, y) {\n  return {\n    x, y, rx: 5 + random() * 1.5, ry: 7 + random() * 1.8, a: (random() - 0.5) * 1.1,\n    core: 1 + random() * 2, ph: random() * 6.28, lam: 2.8, palm: false,\n    t: 0, dur: 0.45 + random() * 0.3,\n  };\n}\n\n// The coat's colour at each temperature, rebuilt when a knob moves it.\nfunction buildLut(S) {\n  const key = S.hue.toFixed(3) + S.blend.toFixed(3);\n  if (key === S.lutKey) return;\n  S.lutKey = key;\n  const h = S.hue + H0, hh = h - floor(h), c = S.c, c2 = S.c2;\n  // Orange and yellow go brown or olive when deep, so round them the cool\n  // shade stays bright.\n  const lift = sm(0.0, 0.06, hh) * (1 - sm(0.24, 0.33, hh));\n  const width = 0.012 + 0.6 * S.blend * S.blend;\n  for (let i = 0; i \u003c LUT; i++) {\n    const T = T0 + ((T1 - T0) * i) / (LUT - 1);\n    const m = sm(THETA - width, THETA + width, T);\n    // Cool: deeper the colder it is, a little lighter just short of turning.\n    const vc = 0.44 + 0.34 * lift + 0.12 * sm(-0.1, THETA, T);\n    hsv(h, 0.9 - 0.1 * lift, vc, c);\n    // Warm: pale, and paler the hotter, so a ridge pressed hot is a whiter line.\n    const hot = sm(THETA, THETA + 0.7, T);\n    hsv(h + 0.08, (0.5 - 0.42 * hot) * (1 - 0.5 * lift), 1, c2);\n    for (let k = 0; k \u003c 3; k++) S.lut[i * 3 + k] = round(255 * (c[k] + (c2[k] - c[k]) * m));\n  }\n}\n\n// One moment of the coat: presses warm it, heat spreads and drains away.\nfunction step(S, dt) {\n  const { T, U, room } = S;\n  const Tf = 1.6 ** S.warmth;\n  // Fingertips arrive in little groups of one to three, about every 0.42 s.\n  S.nextPress -= dt;\n  if (S.nextPress \u003c= 0) {\n    S.nextPress = 0.1 + random() * 0.35;\n    const n = random() \u003c 0.55 ? 1 : random() \u003c 0.7 ? 2 : 3;\n    const x0 = 6 + random() * (W - 12), y0 = 8 + random() * (H - 16);\n    for (let i = 0; i \u003c n; i++) S.presses.push(fingertip(x0 + (i - (n - 1) / 2) * 12 + (random() - 0.5) * 3, y0 + (random() - 0.5) * 8));\n  }\n  for (const P of S.presses) {\n    P.t += dt;\n    const env = sm(0, 0.12, P.t) * (1 - sm(P.dur - 0.1, P.dur, P.t));\n    if (env \u003c= 0) continue;\n    const ca = cos(P.a), sa = sin(P.a), R = max(P.rx, P.ry) + 2;\n    const k = 1 - exp(-GRIP * dt * env);\n    for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, P.y + R); y++)\n      for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, P.x + R); x++) {\n        const dx = x - P.x, dy = y - P.y, u = dx * ca + dy * sa, v = -dx * sa + dy * ca;\n        const rho = sqrt((u / P.rx) ** 2 + (v / P.ry) ** 2);\n        if (rho >= 1) continue;\n        let ridge;\n        if (P.palm) ridge = 0.5 + 0.5 * cos(u * 0.35 + 2.2 * sin(v * 0.11 + P.ph)) * cos(v * 0.5 + sin(u * 0.2));\n        else {\n          const vv = v - P.core, rw = sqrt(u * u + vv * vv * 0.7) + 0.8 * sin(atan2(vv, u) + P.ph);\n          ridge = 0.5 + 0.5 * cos((2 * PI * rw) / P.lam);\n        }\n        const s = (1 - sm(0.72, 1, rho)) * (0.58 + 0.42 * ridge);\n        const p = y * W + x, target = Tf * s;\n        if (target > T[p]) T[p] += (target - T[p]) * k;\n      }\n  }\n  S.presses = S.presses.filter((P) => P.t \u003c P.dur);\n  // Heat equation on the panel, its edges insulated, and Newton cooling\n  // toward the room.\n  const a = ALPHA * dt, c = COOL * dt;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p];\n      const l = x > 0 ? T[p - 1] : t, r = x \u003c W - 1 ? T[p + 1] : t, u = y > 0 ? T[p - W] : t, d = y \u003c H - 1 ? T[p + W] : t;\n      U[p] = t + a * (l + r + u + d - 4 * t) - c * (t - room[p]);\n    }\n  T.set(U);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.warmth = cl(k[2], -1, 1);\n  S.blend = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a coat that has been pressed for four seconds.\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const P = fingertip(10 + random() * (W - 20), 22 + random() * (H - 44));\n    Object.assign(P, { rx: 17, ry: 23, a: (random() - 0.5) * 0.5, palm: true, dur: 1.1 });\n    S.presses.push(P);\n  }\n  // Time on the coat runs at Speed / 2; steps stay under 0.07 s so the heat\n  // equation holds steady.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 0.07);\n    step(S, h);\n    left -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  buildLut(S);\n  const { T, lut } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = round(((cl(T[y * W + x], T0, T1) - T0) / (T1 - T0)) * (LUT - 1)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster."},{"name":"Warmth","min":-1,"max":1,"about":"How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together."},{"name":"Blend","min":0,"max":1,"about":"How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring."}],"start":[0,2,0,0.06],"measures":{"motion":0.0548,"detail":0.0134,"edges":0.483,"complexity":0.652,"coverage":1,"colour":0.1889,"drift":0.0997},"knobResponse":[0.4028,0.1176,0.1081,0.0933]},{"slug":"moth-lamp","title":"Moth Lamp","family":"insect","round":20,"note":"벽돌집 처마 밑 사슬에 매달린 옛 등이 흔들리고, 나방이 어둠에서 나선을 그리며 날아와 등을 돌다가 유리와 불빛 든 벽돌에 날개를 펴고 앉아요. K1 을 누르면 박쥐가 빛 속으로 날아들어 나방 한 마리를 채 가요.","idea":"An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.","buttons":"K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.","code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","layer":{"id":"layer-moth-lamp","type":"code","name":"moth-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds."},{"name":"Moths","min":12,"max":120,"about":"Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them."},{"name":"Breeze","min":-1,"max":1,"about":"A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers."}],"start":[0,2,12,0.06],"measures":{"motion":0.1073,"detail":0.0382,"edges":0.2646,"complexity":2.2012,"coverage":0.2737,"colour":0.0944,"drift":0.0456},"knobResponse":[0.0525,0.0467,0.0451,0.0578]},{"slug":"moving-sofa","title":"Moving Sofa","family":"geometry","round":34,"note":"폭 14 LED 의 ㄇ자 복도를 해머슬리 소파가 오른쪽 다리로 올라와 모퉁이를 돌고, 위를 건너 왼쪽 다리로 내려가요. 모퉁이마다 안쪽 모서리가 소파의 금빛 반원 홈 안을 지나가고, 소파 뒤에 옅게 붙어 온 띠가 벽에 깎여 나가 소파 모양만 남아요. K3 은 홈의 반지름을 0 의 반원판에서 넓이 2 인 소파까지 바꿔요.","idea":"Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Moving Sofa\n// Family:  geometry\n// Idea:    Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: moving sofa problem (Leo Moser, 1966) and Hammersley's sofa (John Hammersley, 1968), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1\n//\n// Knob 1: Hue. Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim.\n// Knob 2: Speed. At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds.\n// Knob 3: Hole. The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole.\n// Knob 4: Trail. How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, abs, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (t) => {\n  t = cl(t, 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// One corner of the hallway, in widths: the arm the sofa comes along is\n// 0 \u003c= wy \u003c= 1, wx \u003c= 1, the arm it leaves by 0 \u003c= wx \u003c= 1, wy \u003c= 1, the\n// inner corner the origin and the outer corner (1, 1). On the panel the right\n// corner has wx running up the right leg and wy across, X = XC + U wy and\n// Y = YC - U wx; the left corner is its mirror image, X -> 64 - X.\nconst U = 14, XC = 49, YC = 15;\n\n// Hole 0 is r = 2/pi, where the area pi/2 + 2r - pi r^2 / 2 is largest.\n// Gerver's sofa of 1992, area 2.2195, is larger still and is not drawn here.\nconst R_OPT = 2 / PI;\nconst holeRadius = (k) => (k \u003c 0 ? R_OPT * (1 + k) : R_OPT + (1 - R_OPT) * k);\n\n// Signed distance, in widths, to Hammersley's sofa with hole radius r: the\n// points with y >= 0 within 1 of the segment from (-r, 0) to (r, 0), less\n// the half disc of radius r on the origin. Negative inside. Below the flat\n// side it is the distance to the two flat pieces, so a sharp end of the hole\n// touching a wall does not bleed into the wall's LED.\nfunction sdf(x, y, r) {\n  const ax = abs(x);\n  if (y \u003c 0) {\n    const ex = ax \u003c r ? r - ax : ax > r + 1 ? ax - r - 1 : 0;\n    return sqrt(ex * ex + y * y);\n  }\n  const dx = ax > r ? ax - r : 0;\n  return max(-y, sqrt(dx * dx + y * y) - 1, r - sqrt(x * x + y * y));\n}\n// Whether the sofa's nearest edge to (x, y) is the hole's semicircle.\nconst notch = (x, y, r) => r > 0.02 && x * x + y * y \u003c (r + 0.12) * (r + 0.12) && abs(x) \u003c r + 0.04;\n\n// How far (x, y), in the sofa's frame, lies inside every position the\n// hallway has taken in a turn so far, th of the way round, starting from the\n// strip behind the sofa's front: negative once some wall has passed through\n// it. The outer wall a = 1 has kept (x - r, y) within 1 of the origin in the\n// directions 0..th, the wall b = 1 has done the same for (x + r, y) in the\n// directions 90..90+th degrees, and the inner corner has cut from the hole\n// the part below the chord from (-r, 0) at angle th. At th = 90 degrees\n// this is the sofa.\nfunction block(x, y, th, r) {\n  const ct = cos(th), st = sin(th);\n  let s = min(y, 1 - y, r + 1 - x);\n  const vx = x - r, vy = y;\n  if (vy >= 0 && vx * st - vy * ct >= 0) s = min(s, 1 - sqrt(vx * vx + vy * vy));\n  else s = min(s, 1 - vx, 1 - vx * ct - vy * st);\n  const wx = x + r, wy = y;\n  if (wx \u003c= 0 && wy * st + wx * ct >= 0) s = min(s, 1 - sqrt(wx * wx + wy * wy));\n  else s = min(s, 1 - wy, 1 + wx * st - wy * ct);\n  return min(s, max(sqrt(x * x + y * y) - r, -wx * st + wy * ct));\n}\n\n// The motion, seen from the sofa: the hallway is turned through th and its\n// inner corner sits at c. While th runs from 0 to 90 degrees c runs round\n// the hole's semicircle, c = r (cos 2th, sin 2th). By Thales the inner walls\n// then pass through the hole's two ends, and the outer walls stay tangent to\n// the two quarter discs, so the sofa touches both outer walls all the way\n// round. Phases, in seconds at Speed 2: up the right leg, round the right\n// corner, across the top, round the left corner (the right one mirrored and\n// run backwards), down the left leg.\nconst TA = 4.4, TB = 2.4, TC = 1.4;\nconst T1 = TA, T2 = T1 + TB, T3 = T2 + TC, T4 = T3 + TB, LIFE = T4 + TA;\n// A new sofa sets off as the last one starts round the right corner, so it\n// reaches that corner as the last one leaves the left.\nconst PERIOD = TB + TC + TB;\n// Up the leg from below the panel, and the run across the top.\nconst DA = 9.2, EC = (XC - (64 - XC)) / U;\nconst KE = 0.3, VE = 1 / (1 - KE / 2);\n// Constant speed, then a stop over the last KE of the way.\nfunction easeOut(t) {\n  t = cl(t, 0, 1);\n  if (t \u003c= 1 - KE) return VE * t;\n  const s = t - (1 - KE);\n  return VE * (1 - KE + s - (s * s) / (2 * KE));\n}\nfunction turn(th, r, o) {\n  o.th = th;\n  o.cx = r * cos(2 * th);\n  o.cy = r * sin(2 * th);\n}\n// Pose at phase ph: o.m is 1 when it is given in the left corner's mirrored\n// frame.\nfunction pose(ph, r, o) {\n  o.m = 0;\n  o.cy = 0;\n  if (ph \u003c T1) {\n    o.th = 0;\n    o.cx = r + DA * (1 - easeOut(ph / TA));\n  } else if (ph \u003c T2) turn((PI / 2) * sm((ph - T1) / TB), r, o);\n  else if (ph \u003c T3) {\n    o.th = PI / 2;\n    o.cx = -r - (EC - 2 * r) * sm((ph - T2) / TC);\n  } else {\n    o.m = 1;\n    if (ph \u003c T4) turn((PI / 2) * (1 - sm((ph - T3) / TB)), r, o);\n    else {\n      o.th = 0;\n      o.cx = r + DA * (1 - easeOut(1 - (ph - T4) / TA));\n    }\n  }\n  return o;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Calls f(X, Y, sx, sy) for every LED near the sofa at pose P, with (sx, sy)\n// the LED centre in the sofa's frame.\nfunction eachLed(P, r, f, xa = -r - 1, xb = r + 1) {\n  const ct = cos(P.th), st = sin(P.th);\n  let x0 = 99, x1 = -99, y0 = 999, y1 = -999;\n  for (const [sx, sy] of [[xa, 0], [xb, 0], [xa, 1], [xb, 1]]) {\n    const ex = sx - P.cx, ey = sy - P.cy, wx = ex * ct + ey * st, wy = -ex * st + ey * ct;\n    const X = XC + U * wy, Y = YC - U * wx;\n    x0 = min(x0, X), x1 = max(x1, X), y0 = min(y0, Y), y1 = max(y1, Y);\n  }\n  x0 = max(0, floor(x0) - 1), x1 = min(W - 1, floor(x1) + 1), y0 = max(0, floor(y0) - 1), y1 = min(H - 1, floor(y1) + 1);\n  for (let Y = y0; Y \u003c= y1; Y++)\n    for (let Xm = x0; Xm \u003c= x1; Xm++) {\n      const wx = (YC - (Y + 0.5)) / U, wy = (Xm + 0.5 - XC) / U;\n      f(P.m ? W - 1 - Xm : Xm, Y, P.cx + wx * ct - wy * st, P.cy + wx * st + wy * ct);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    clock: 0, hue: 0, speed: 2, hole: 0, trail: 0.06, r: R_OPT, warm: false,\n    wake: new Float32Array(N), buf: new Float32Array(N * 3),\n    pose: { th: 0, cx: 0, cy: 0, m: 0 }, c1: [0, 0, 0], c2: [0, 0, 0], c3: [0, 0, 0],\n  };\n}\n\n// Advance the clock by dc and let the floor's glow where the sofas have been\n// fade.\nfunction step(S, dc) {\n  S.clock += dc;\n  const keep = exp(-dc / (0.25 + 1.5 * S.trail + 6 * S.trail * S.trail)), r = S.r, wake = S.wake;\n  for (let p = 0; p \u003c N; p++) wake[p] *= keep;\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    eachLed(pose(ph, r, S.pose), r, (X, Y, sx, sy) => {\n      const cov = cl(0.5 - sdf(sx, sy, r) * U, 0, 1), p = Y * W + X;\n      if (cov > wake[p]) wake[p] = cov;\n    });\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.hole = cl(k[2], -1, 1);\n  S.trail = cl(k[3], 0, 1);\n  S.r = holeRadius(S.hole);\n  if (!S.warm) {\n    // Open with a sofa 1.6 s short of the right corner and four seconds of\n    // memory already laid down behind it.\n    S.clock = T1 - 1.6 - 4;\n    for (let i = 0; i \u003c 60; i++) step(S, 4 / 60);\n    S.warm = true;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, c1, c2, c3, wake } = S, r = S.r, h = S.hue + 0.52;\n  buf.fill(0);\n  const put = (p, c, v) => {\n    buf[p * 3] = max(buf[p * 3], c[0] * v);\n    buf[p * 3 + 1] = max(buf[p * 3 + 1], c[1] * v);\n    buf[p * 3 + 2] = max(buf[p * 3 + 2], c[2] * v);\n  };\n  const set = (p, c, v, al) => {\n    buf[p * 3] += (c[0] * v - buf[p * 3]) * al;\n    buf[p * 3 + 1] += (c[1] * v - buf[p * 3 + 1]) * al;\n    buf[p * 3 + 2] += (c[2] * v - buf[p * 3 + 2]) * al;\n  };\n\n  // Walls one LED outside the hallway, the solid between the legs hatched\n  // as on a floor plan, and the floor's glow where the sofas have passed.\n  hsv(h + 0.2, 0.45, 1, c1);\n  for (let Y = 0; Y \u003c H; Y++) put(Y * W, c1, 70), put(Y * W + 63, c1, 70);\n  for (let X = 0; X \u003c W; X++) put(X, c1, 70);\n  for (let Y = 15; Y \u003c H; Y++) put(Y * W + 15, c1, 70), put(Y * W + 48, c1, 70);\n  for (let X = 15; X \u003c= 48; X++) put(15 * W + X, c1, 70);\n  for (let Y = 16; Y \u003c H; Y++) for (let X = 16; X \u003c 48; X++) if ((X + Y) % 5 === 0) put(Y * W + X, c1, 40);\n  hsv(h + 0.05, 0.6, 1, c2);\n  for (let p = 0; p \u003c N; p++) if (wake[p] > 0.01) put(p, c2, 100 * wake[p]);\n\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    const P = pose(ph, r, S.pose);\n    // In a turn, the rest of the strip behind the sofa that every position\n    // of the hallway so far still holds: the walls shave it down to the sofa.\n    const u = ph >= T1 && ph \u003c T2 ? (ph - T1) / TB : ph >= T3 && ph \u003c T4 ? (ph - T3) / TB : -1;\n    if (u >= 0) {\n      const th = (PI / 2) * sm(u), al = sm(u / 0.12), back = min(r + 1 / max(sin(th), 1e-3), 12);\n      hsv(h, 0.45, 1, c1);\n      eachLed(P, r, (X, Y, sx, sy) => {\n        // Each corner's own hallway runs on for ever; the panel's other\n        // corner stops the strip.\n        if (X \u003c 1 || X > 62 || Y \u003c 1 || (Y > 14 && X > 14 && X \u003c 49)) return;\n        const x = P.m ? -sx : sx, ex = cl(0.5 + block(x, sy, th, r) * U, 0, 1) - cl(0.5 - sdf(sx, sy, r) * U, 0, 1);\n        if (ex > 0) put(Y * W + X, c1, 80 * ex * al);\n      }, P.m ? -r - 1 : -back, P.m ? back : r + 1);\n    }\n    hsv(h, 0.85, 1, c1);\n    hsv(h, 0.3, 1, c2);\n    hsv(h + 0.62, 0.55, 1, c3);\n    eachLed(P, r, (X, Y, sx, sy) => {\n      const dl = sdf(sx, sy, r) * U, cov = cl(0.5 - dl, 0, 1);\n      if (cov \u003c= 0) return;\n      const p = Y * W + X;\n      set(p, c1, 150, cov);\n      put(p, notch(sx, sy, r) ? c3 : c2, 255 * cl(1.6 + dl, 0, 1) * cov);\n    });\n  }\n  // The inner corners.\n  hsv(h + 0.62, 0.3, 1, c3);\n  put(15 * W + 48, c3, 255);\n  put(15 * W + 15, c3, 255);\n\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(min(255, buf[p * 3])), round(min(255, buf[p * 3 + 1])), round(min(255, buf[p * 3 + 2])));\n}\n","layer":{"id":"layer-moving-sofa","type":"code","name":"moving-sofa","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moving Sofa\n// Family:  geometry\n// Idea:    Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: moving sofa problem (Leo Moser, 1966) and Hammersley's sofa (John Hammersley, 1968), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1\n//\n// Knob 1: Hue. Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim.\n// Knob 2: Speed. At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds.\n// Knob 3: Hole. The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole.\n// Knob 4: Trail. How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, abs, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (t) => {\n  t = cl(t, 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// One corner of the hallway, in widths: the arm the sofa comes along is\n// 0 \u003c= wy \u003c= 1, wx \u003c= 1, the arm it leaves by 0 \u003c= wx \u003c= 1, wy \u003c= 1, the\n// inner corner the origin and the outer corner (1, 1). On the panel the right\n// corner has wx running up the right leg and wy across, X = XC + U wy and\n// Y = YC - U wx; the left corner is its mirror image, X -> 64 - X.\nconst U = 14, XC = 49, YC = 15;\n\n// Hole 0 is r = 2/pi, where the area pi/2 + 2r - pi r^2 / 2 is largest.\n// Gerver's sofa of 1992, area 2.2195, is larger still and is not drawn here.\nconst R_OPT = 2 / PI;\nconst holeRadius = (k) => (k \u003c 0 ? R_OPT * (1 + k) : R_OPT + (1 - R_OPT) * k);\n\n// Signed distance, in widths, to Hammersley's sofa with hole radius r: the\n// points with y >= 0 within 1 of the segment from (-r, 0) to (r, 0), less\n// the half disc of radius r on the origin. Negative inside. Below the flat\n// side it is the distance to the two flat pieces, so a sharp end of the hole\n// touching a wall does not bleed into the wall's LED.\nfunction sdf(x, y, r) {\n  const ax = abs(x);\n  if (y \u003c 0) {\n    const ex = ax \u003c r ? r - ax : ax > r + 1 ? ax - r - 1 : 0;\n    return sqrt(ex * ex + y * y);\n  }\n  const dx = ax > r ? ax - r : 0;\n  return max(-y, sqrt(dx * dx + y * y) - 1, r - sqrt(x * x + y * y));\n}\n// Whether the sofa's nearest edge to (x, y) is the hole's semicircle.\nconst notch = (x, y, r) => r > 0.02 && x * x + y * y \u003c (r + 0.12) * (r + 0.12) && abs(x) \u003c r + 0.04;\n\n// How far (x, y), in the sofa's frame, lies inside every position the\n// hallway has taken in a turn so far, th of the way round, starting from the\n// strip behind the sofa's front: negative once some wall has passed through\n// it. The outer wall a = 1 has kept (x - r, y) within 1 of the origin in the\n// directions 0..th, the wall b = 1 has done the same for (x + r, y) in the\n// directions 90..90+th degrees, and the inner corner has cut from the hole\n// the part below the chord from (-r, 0) at angle th. At th = 90 degrees\n// this is the sofa.\nfunction block(x, y, th, r) {\n  const ct = cos(th), st = sin(th);\n  let s = min(y, 1 - y, r + 1 - x);\n  const vx = x - r, vy = y;\n  if (vy >= 0 && vx * st - vy * ct >= 0) s = min(s, 1 - sqrt(vx * vx + vy * vy));\n  else s = min(s, 1 - vx, 1 - vx * ct - vy * st);\n  const wx = x + r, wy = y;\n  if (wx \u003c= 0 && wy * st + wx * ct >= 0) s = min(s, 1 - sqrt(wx * wx + wy * wy));\n  else s = min(s, 1 - wy, 1 + wx * st - wy * ct);\n  return min(s, max(sqrt(x * x + y * y) - r, -wx * st + wy * ct));\n}\n\n// The motion, seen from the sofa: the hallway is turned through th and its\n// inner corner sits at c. While th runs from 0 to 90 degrees c runs round\n// the hole's semicircle, c = r (cos 2th, sin 2th). By Thales the inner walls\n// then pass through the hole's two ends, and the outer walls stay tangent to\n// the two quarter discs, so the sofa touches both outer walls all the way\n// round. Phases, in seconds at Speed 2: up the right leg, round the right\n// corner, across the top, round the left corner (the right one mirrored and\n// run backwards), down the left leg.\nconst TA = 4.4, TB = 2.4, TC = 1.4;\nconst T1 = TA, T2 = T1 + TB, T3 = T2 + TC, T4 = T3 + TB, LIFE = T4 + TA;\n// A new sofa sets off as the last one starts round the right corner, so it\n// reaches that corner as the last one leaves the left.\nconst PERIOD = TB + TC + TB;\n// Up the leg from below the panel, and the run across the top.\nconst DA = 9.2, EC = (XC - (64 - XC)) / U;\nconst KE = 0.3, VE = 1 / (1 - KE / 2);\n// Constant speed, then a stop over the last KE of the way.\nfunction easeOut(t) {\n  t = cl(t, 0, 1);\n  if (t \u003c= 1 - KE) return VE * t;\n  const s = t - (1 - KE);\n  return VE * (1 - KE + s - (s * s) / (2 * KE));\n}\nfunction turn(th, r, o) {\n  o.th = th;\n  o.cx = r * cos(2 * th);\n  o.cy = r * sin(2 * th);\n}\n// Pose at phase ph: o.m is 1 when it is given in the left corner's mirrored\n// frame.\nfunction pose(ph, r, o) {\n  o.m = 0;\n  o.cy = 0;\n  if (ph \u003c T1) {\n    o.th = 0;\n    o.cx = r + DA * (1 - easeOut(ph / TA));\n  } else if (ph \u003c T2) turn((PI / 2) * sm((ph - T1) / TB), r, o);\n  else if (ph \u003c T3) {\n    o.th = PI / 2;\n    o.cx = -r - (EC - 2 * r) * sm((ph - T2) / TC);\n  } else {\n    o.m = 1;\n    if (ph \u003c T4) turn((PI / 2) * (1 - sm((ph - T3) / TB)), r, o);\n    else {\n      o.th = 0;\n      o.cx = r + DA * (1 - easeOut(1 - (ph - T4) / TA));\n    }\n  }\n  return o;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Calls f(X, Y, sx, sy) for every LED near the sofa at pose P, with (sx, sy)\n// the LED centre in the sofa's frame.\nfunction eachLed(P, r, f, xa = -r - 1, xb = r + 1) {\n  const ct = cos(P.th), st = sin(P.th);\n  let x0 = 99, x1 = -99, y0 = 999, y1 = -999;\n  for (const [sx, sy] of [[xa, 0], [xb, 0], [xa, 1], [xb, 1]]) {\n    const ex = sx - P.cx, ey = sy - P.cy, wx = ex * ct + ey * st, wy = -ex * st + ey * ct;\n    const X = XC + U * wy, Y = YC - U * wx;\n    x0 = min(x0, X), x1 = max(x1, X), y0 = min(y0, Y), y1 = max(y1, Y);\n  }\n  x0 = max(0, floor(x0) - 1), x1 = min(W - 1, floor(x1) + 1), y0 = max(0, floor(y0) - 1), y1 = min(H - 1, floor(y1) + 1);\n  for (let Y = y0; Y \u003c= y1; Y++)\n    for (let Xm = x0; Xm \u003c= x1; Xm++) {\n      const wx = (YC - (Y + 0.5)) / U, wy = (Xm + 0.5 - XC) / U;\n      f(P.m ? W - 1 - Xm : Xm, Y, P.cx + wx * ct - wy * st, P.cy + wx * st + wy * ct);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    clock: 0, hue: 0, speed: 2, hole: 0, trail: 0.06, r: R_OPT, warm: false,\n    wake: new Float32Array(N), buf: new Float32Array(N * 3),\n    pose: { th: 0, cx: 0, cy: 0, m: 0 }, c1: [0, 0, 0], c2: [0, 0, 0], c3: [0, 0, 0],\n  };\n}\n\n// Advance the clock by dc and let the floor's glow where the sofas have been\n// fade.\nfunction step(S, dc) {\n  S.clock += dc;\n  const keep = exp(-dc / (0.25 + 1.5 * S.trail + 6 * S.trail * S.trail)), r = S.r, wake = S.wake;\n  for (let p = 0; p \u003c N; p++) wake[p] *= keep;\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    eachLed(pose(ph, r, S.pose), r, (X, Y, sx, sy) => {\n      const cov = cl(0.5 - sdf(sx, sy, r) * U, 0, 1), p = Y * W + X;\n      if (cov > wake[p]) wake[p] = cov;\n    });\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.hole = cl(k[2], -1, 1);\n  S.trail = cl(k[3], 0, 1);\n  S.r = holeRadius(S.hole);\n  if (!S.warm) {\n    // Open with a sofa 1.6 s short of the right corner and four seconds of\n    // memory already laid down behind it.\n    S.clock = T1 - 1.6 - 4;\n    for (let i = 0; i \u003c 60; i++) step(S, 4 / 60);\n    S.warm = true;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, c1, c2, c3, wake } = S, r = S.r, h = S.hue + 0.52;\n  buf.fill(0);\n  const put = (p, c, v) => {\n    buf[p * 3] = max(buf[p * 3], c[0] * v);\n    buf[p * 3 + 1] = max(buf[p * 3 + 1], c[1] * v);\n    buf[p * 3 + 2] = max(buf[p * 3 + 2], c[2] * v);\n  };\n  const set = (p, c, v, al) => {\n    buf[p * 3] += (c[0] * v - buf[p * 3]) * al;\n    buf[p * 3 + 1] += (c[1] * v - buf[p * 3 + 1]) * al;\n    buf[p * 3 + 2] += (c[2] * v - buf[p * 3 + 2]) * al;\n  };\n\n  // Walls one LED outside the hallway, the solid between the legs hatched\n  // as on a floor plan, and the floor's glow where the sofas have passed.\n  hsv(h + 0.2, 0.45, 1, c1);\n  for (let Y = 0; Y \u003c H; Y++) put(Y * W, c1, 70), put(Y * W + 63, c1, 70);\n  for (let X = 0; X \u003c W; X++) put(X, c1, 70);\n  for (let Y = 15; Y \u003c H; Y++) put(Y * W + 15, c1, 70), put(Y * W + 48, c1, 70);\n  for (let X = 15; X \u003c= 48; X++) put(15 * W + X, c1, 70);\n  for (let Y = 16; Y \u003c H; Y++) for (let X = 16; X \u003c 48; X++) if ((X + Y) % 5 === 0) put(Y * W + X, c1, 40);\n  hsv(h + 0.05, 0.6, 1, c2);\n  for (let p = 0; p \u003c N; p++) if (wake[p] > 0.01) put(p, c2, 100 * wake[p]);\n\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    const P = pose(ph, r, S.pose);\n    // In a turn, the rest of the strip behind the sofa that every position\n    // of the hallway so far still holds: the walls shave it down to the sofa.\n    const u = ph >= T1 && ph \u003c T2 ? (ph - T1) / TB : ph >= T3 && ph \u003c T4 ? (ph - T3) / TB : -1;\n    if (u >= 0) {\n      const th = (PI / 2) * sm(u), al = sm(u / 0.12), back = min(r + 1 / max(sin(th), 1e-3), 12);\n      hsv(h, 0.45, 1, c1);\n      eachLed(P, r, (X, Y, sx, sy) => {\n        // Each corner's own hallway runs on for ever; the panel's other\n        // corner stops the strip.\n        if (X \u003c 1 || X > 62 || Y \u003c 1 || (Y > 14 && X > 14 && X \u003c 49)) return;\n        const x = P.m ? -sx : sx, ex = cl(0.5 + block(x, sy, th, r) * U, 0, 1) - cl(0.5 - sdf(sx, sy, r) * U, 0, 1);\n        if (ex > 0) put(Y * W + X, c1, 80 * ex * al);\n      }, P.m ? -r - 1 : -back, P.m ? back : r + 1);\n    }\n    hsv(h, 0.85, 1, c1);\n    hsv(h, 0.3, 1, c2);\n    hsv(h + 0.62, 0.55, 1, c3);\n    eachLed(P, r, (X, Y, sx, sy) => {\n      const dl = sdf(sx, sy, r) * U, cov = cl(0.5 - dl, 0, 1);\n      if (cov \u003c= 0) return;\n      const p = Y * W + X;\n      set(p, c1, 150, cov);\n      put(p, notch(sx, sy, r) ? c3 : c2, 255 * cl(1.6 + dl, 0, 1) * cov);\n    });\n  }\n  // The inner corners.\n  hsv(h + 0.62, 0.3, 1, c3);\n  put(15 * W + 48, c3, 255);\n  put(15 * W + 15, c3, 255);\n\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(min(255, buf[p * 3])), round(min(255, buf[p * 3 + 1])), round(min(255, buf[p * 3 + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds."},{"name":"Hole","min":-1,"max":1,"about":"The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole."},{"name":"Trail","min":0,"max":1,"about":"How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches."}],"start":[0,2,0,0.06],"measures":{"motion":0.3083,"detail":0.0578,"edges":0.2742,"complexity":0.3757,"coverage":0.3481,"colour":0.1671,"drift":0.1766},"knobResponse":[0.06,0.1158,0.0644,0.0648]},{"slug":"needlepoint","title":"Needlepoint","family":"textile","round":19,"note":"슬레이트 틀의 인쇄 캔버스를 바늘이 오른쪽 위 구석부터 바스켓위브로 한 대각선씩 메워 가요. 앵무새 쿠션이나 검은 바탕의 베를린 장미, 알파벳 샘플러가 다 차면 틀이 굴러 새 캔버스를 감아 와요.","idea":"A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","layer":{"id":"layer-needlepoint","type":"code","name":"needlepoint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wool","min":0,"max":1,"about":"Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground."},{"name":"Speed","min":0.2,"max":3,"about":"Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds."},{"name":"Design","min":0,"max":2,"about":"Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow."}],"start":[0,2,0,0.06],"measures":{"motion":0.1581,"detail":0.3325,"edges":0.8053,"complexity":1.8885,"coverage":0.6687,"colour":0.2513,"drift":0.043},"knobResponse":[0.1114,0.0649,0.1048,0.0607]},{"slug":"neon-alley","title":"Neon Alley","family":"city","round":16,"note":"밤 골목의 벽에 유리관을 구부린 네온 그림 간판이 지붕부터 젖은 길까지 걸려서, 관이 하나씩 켜지고 화살표가 달리고 지친 관 하나가 지직거려요. K1 을 누르면 정전이 됐다가 간판이 하나씩 다시 켜지고, K2 를 누르면 간판이 새로 걸려요.","idea":"The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.","buttons":"K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.","code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","layer":{"id":"layer-neon-alley","type":"code","name":"neon-alley","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta."},{"name":"Pace","min":0,"max":4,"about":"The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between."},{"name":"Wear","min":0,"max":1,"about":"How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark."},{"name":"Rain","min":0,"max":1,"about":"A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow."}],"start":[0,2,0,0.06],"measures":{"motion":0.7208,"detail":0.1177,"edges":0.5393,"complexity":0.4294,"coverage":0.2587,"colour":0.5724,"drift":0.1545},"knobResponse":[0.2671,0.0583,0.0882,0.0858]},{"slug":"night-flight","title":"Night Flight","family":"city","round":22,"note":"여객기 창으로 내려다본 밤 도시예요. 1 LED 가로등이 바둑판 길과 대로, 강 위 다리를 따라 레이스처럼 이어지고, 고속도로에는 흰 전조등과 빨간 미등이 흘러요. 도시는 초록 항법등과 흰 섬광등이 달린 날개 끝을 지나 왼쪽 아래로 천천히 미끄러져요.","idea":"A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.","buttons":"K3 tap flies over another city.","code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-night-flight","type":"code","name":"night-flight","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1."},{"name":"Speed","min":0.2,"max":3,"about":"Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it."},{"name":"Grid","min":0,"max":1,"about":"Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones."},{"name":"Haze","min":0,"max":1,"about":"Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through."}],"start":[0,2,0,0.06],"measures":{"motion":0.3475,"detail":0.3276,"edges":0.2578,"complexity":1.0097,"coverage":0.5044,"colour":0.2424,"drift":0.0667},"knobResponse":[0.0508,0.1119,0.0511,0.1477]},{"slug":"nixie","title":"Nixie","family":"circuit","round":21,"note":"회로판 소켓에 선 닉시관 속, 육각 그물 뒤에 겹겹이 선 숫자 철사 가운데 하나가 네온 주황으로 빛나요. 숫자가 돌다가 하나씩 멈추고, Mode 노브를 돌리면 주파수 계수기나 시계가 돼요.","idea":"Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.","buttons":"K1 tap runs every cathode in turn now.","code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-nixie","type":"code","name":"nixie","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gas","min":0,"max":1,"about":"What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops."},{"name":"Rows","min":1,"max":3,"about":"One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter."},{"name":"Mode","min":0,"max":3,"about":"Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3."}],"start":[0,2,1,0.06],"measures":{"motion":0.4696,"detail":0.0533,"edges":0.238,"complexity":1.7971,"coverage":0.5829,"colour":0.1892,"drift":0.1676},"knobResponse":[0.0576,0.0717,0.1676,0.0732]},{"slug":"noborigama","title":"Noborigama","family":"pottery","round":26,"note":"밤 언덕의 오름가마를 세로로 잘라 봐요. 불이 그릇 쌓인 칸들을 타고 올라 아래 칸은 희고 위 칸은 붉으며, 장작을 넣을 때마다 감시 구멍에서 불길이, 굴뚝에서 검은 연기와 불티가 나와요. K1 은 소성 날짜를 바꾸고, 누르면 모든 구멍에 한꺼번에 불을 넣어요.","idea":"A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.","buttons":"K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.","code":"// ===== Patternflow pattern =====\n// Title:   Noborigama\n// Family:  pottery\n// Idea:    A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the noborigama, the wood-fired climbing kiln of Japan and Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1\n//\n// Knob 1: Firing. The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white.\n// Knob 2: Speed. At 2 the potter stokes every few seconds; 0.2 is ten times slower.\n// Knob 3: Chambers. Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves.\n// Knob 4: Draft. Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame.\n// Buttons: K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi % p), b = hash(xi + 1, yi % p), c = hash(xi, (yi + 1) % p);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, (yi + 1) % p)) * su * sv;\n}\n// Fine noise that wraps every 256 rows, for the quick flicker of flame and smoke.\nconst FN = new Float32Array(64 * 256).map((_, i) => vn((i & 63) * 0.9, ((i >> 6) * 84) / 256, 84));\nconst fn = (x, y) => FN[(y & 255) * 64 + (x & 63)];\n\n// Brick, gas and flame by temperature: dull red at 0.15, orange at 0.6, white\n// heat at 1. Red stops at 232: pinned at 255 it hid the flicker of the hottest\n// chambers, since an LED reads by its brightest channel.\nconst RAMP = [[0, 24, 4, 2], [0.15, 92, 13, 4], [0.3, 158, 30, 6], [0.45, 204, 68, 12], [0.6, 226, 114, 24], [0.75, 232, 160, 50], [0.88, 232, 194, 96], [1, 232, 216, 160], [1.25, 236, 230, 204]];\nconst LUT = new Float32Array(768);\nfor (let i = 0; i \u003c 256; i++) {\n  let k = 0;\n  const T = i / 204;\n  while (k \u003c 7 && T > RAMP[k + 1][0]) k++;\n  const u = cl((T - RAMP[k][0]) / (RAMP[k + 1][0] - RAMP[k][0]), 0, 1);\n  for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(RAMP[k][c + 1], RAMP[k + 1][c + 1], u);\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n// One colour array for every put(), to spare the garbage collector.\nconst C3 = [0, 0, 0];\nconst lc = (T, b = 1) => ((T = lut(T)), C3[0] = LUT[T] * b, C3[1] = LUT[T + 1] * b, C3[2] = LUT[T + 2] * b, C3);\n\nconst SKY = 0, EARTH = 1, WALL = 3, GAS = 4, POT = 5, SHELF = 6, HOLE = 7, FLUE = 8;\n// A vault on low walls: roof height across a chamber, 0.4 at the walls, 1 at the crown.\nconst arch = (u) => 0.4 + 0.6 * sqrt(max(0, 1 - (2 * u - 1) ** 2));\nconst TOP = 18; // the chimney's mouth row\nconst WOOD = [150, 118, 66], TOWEL = [214, 204, 184], FACE = [176, 116, 78], COAT = [46, 60, 128], LEGS = [74, 62, 54], RIM = [255, 150, 60];\n// Jar, flared bowl, bottle and cup: half width up the pot, bottom to top.\nconst prof = (k, t) => (k === 0 ? (t > 0.84 ? 0.5 : 0.6 + 0.4 * sin(PI * t)) : k === 1 ? 0.5 + 0.5 * t : k === 2 ? (t \u003c 0.55 ? 0.55 + 0.45 * sin((PI * t) / 0.55) : t > 0.88 ? 0.5 : 0.3) : 0.8);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    t: 0, n: 0, kind: new Uint8Array(N), ch: new Uint8Array(N), V: F32(N), bg: F32(N * 3), gw: F32(N), f: F32(N * 3), A: F32(W * 64), K: F32(W * 64), Q: F32(W * 64),\n    T: F32(8).fill(-1), Hc: F32(8).fill(-1), age: F32(8).fill(9), q: F32(8), open: F32(8), Te: F32(8), Br: F32(8),\n    puffs: [], sparks: [], logs: [], slugs: [], ev: [], motes: [], pot: { A: 0, tgt: 0, mode: 1, tm: -1.6, thr: 0, k: 0, ph: 0 }, fb: { tm: 1, an: 0 }, flare: 0, np: 0, ns: 0,\n  });\n  for (let k = 0; k \u003c 40; k++) S.motes.push({ x: rnd() * W, y: rnd() * H, e: rnd() \u003c 0.45, ph: rnd() * 7 });\n  for (let k = 0; k \u003c 3; k++) S.logs.push({ c: 0, x: 8 + k * 6 + rnd() * 3, y: 120 + (k & 1), len: 5, life: 0.4 + 0.5 * rnd() });\n}\n\nconst front = (S) => ((S.k1 + 1) / 2) * (S.n + 0.3);\n\nfunction build(S, n) {\n  S.n = n;\n  const P = 77 / n, h = P - 3, Wc = 34 - 2 * n, s = (43 - Wc) / (n - 1);\n  // The firebox, then the chambers, each P rows above the last and s LEDs to the right.\n  const g = (S.g = [{ L: 6, W: 25, F: 123, h: 11 }]);\n  for (let c = 1; c \u003c= n; c++) g.push({ L: 14 + (c - 1) * s, W: Wc, F: 108 - (c - 1) * P, h });\n  // The roof row over X inside a chamber; with e = 2, the top of its brick.\n  const inT = (S.inT = (k, X, e = 0) => {\n    const q = g[k], u = (X - q.L + e) / (q.W + 2 * e);\n    return u > 0 && u \u003c 1 ? q.F - (q.h + e) * arch(u) : 1e3;\n  });\n  const outT = (k, X) => inT(k, X, 2), tp = g[n], CX = (S.CX = tp.L + 0.62 * tp.W);\n  const hill = (X) => (X \u003c 4 ? 123 : X \u003c tp.L - 2 ? mix(123, tp.F + 2, (X - 4) / (tp.L - 6)) : mix(tp.F + 2, tp.F - 5, (X - tp.L + 2) / (66 - tp.L)));\n  // Flame passages through each chamber's floor, over the crown of the one below.\n  const holes = [];\n  for (let c = 1; c \u003c= n; c++) for (let a = g[c - 1], x = round(a.L + 0.2 * a.W); x \u003c= a.L + 0.8 * a.W; x += 4) if (x > g[c].L && x \u003c g[c].L + Wc - 2) holes.push([x, c]);\n  const { kind, ch, V, bg, gw } = S;\n  S.stars = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, r = hash(x, y), nz = 0.8 + 0.4 * vn(x * 0.3, y * 0.3);\n    let k = SKY, c = 0, v = 0, col = [0, 0, 0];\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F && Y > inT(j, X)) k = GAS, c = j, v = (g[j].F - Y) / g[j].h;\n    if (!k && abs(X - CX) \u003c 2 && Y > TOP && Y \u003c inT(n, X) + 0.5) k = FLUE, c = n, v = (Y - TOP) / (inT(n, CX) - TOP);\n    if (!k) for (const [hx, hc] of holes) if (x === hx && Y > g[hc].F && Y \u003c inT(hc - 1, X)) k = HOLE, c = hc;\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F + 2 && Y > outT(j, X)) k = WALL, c = j;\n    if (!k && Y > TOP && ((abs(X - CX) \u003c 4 && Y \u003c outT(n, X) + 1) || (Y \u003c TOP + 2 && abs(X - CX) \u003c 5))) k = WALL, c = n + 1;\n    if (!k && Y > hill(X)) k = EARTH;\n    // The fire mouth in the firebox's front wall.\n    if (k === WALL && !c && x \u003c 6 && y > 116) k = GAS, v = (123 - Y) / 11;\n    kind[i] = k, ch[i] = c, V[i] = v;\n    if (k === SKY) {\n      const u = sm(0, 112, Y), dm = hypot(X - 11, Y - 11), e = 26 * exp(-dm / 3.5), st = r \u003c 0.014 && y \u003c 100 && dm > 12 ? 70 + 140 * hash(y, x) : 0;\n      col = [5 + 15 * u + e + st, 9 + 17 * u + e + st, 32 + 30 * u + e + st];\n      // A crescent moon.\n      if (dm \u003c 3.6 && hypot(X - 12.6, Y - 10) > 3.2) col = [226, 222, 196];\n      if (st) S.stars.push(i);\n    } else if (k === EARTH) {\n      // Beds along the slope, stones, grass on top.\n      const dd = Y - hill(X), bd = (0.7 + 0.5 * vn(dd * 0.3 + x * 0.04, 3.5 + x * 0.02)) * nz;\n      col = dd \u003c 1.5 ? [24, 38, 24] : r \u003c 0.035 ? [58, 52, 46] : [30 * bd, 23 * bd, 19 * bd];\n    }\n    // Brick, coursed on the chimney.\n    else if (k === WALL) col = [96, 66, 50].map((v2) => v2 * ((c > n ? y % 3 === 0 || (x + (floor(y / 3) & 1) * 2) % 4 === 0 : r \u003c 0.25) ? 0.62 : 0.85 + 0.3 * r));\n    bg.set(col, i * 3);\n  }\n  gw.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, k = kind[i];\n    // The brick the fire touches.\n    if (k === WALL) V[i] = [1, -1, W, -W].some((d) => kind[i + d] >= GAS && (abs(d) > 1 || (x + d) >> 6 === 0)) ? 1 : 0;\n    // Earth and air by the kiln are warm: how near each LED is to a wall, and whose.\n    if (k \u003c= EARTH) {\n      let best = 9;\n      for (let dy = -4; dy \u003c= 4; dy++)\n        for (let dx = -4; dx \u003c= 4; dx++) {\n          const X = x + dx, Y = y + dy, d = abs(dx) + abs(dy);\n          if (X >= 0 && X \u003c W && Y >= 0 && Y \u003c H && kind[Y * W + X] === WALL && d \u003c best) best = d, ch[i] = ch[Y * W + X];\n        }\n      gw[i] = best \u003c 9 ? exp(-best / 1.4) * (k ? 0.8 : 0.6) : 0;\n    }\n  }\n  // Shelves and pots: two or three levels a chamber, under the vault.\n  const nl = h >= 16 ? 3 : 2, lh = h / nl;\n  for (let c = 1; c \u003c= n; c++) {\n    const q = g[c], x0 = round(q.L + max(6, 0.22 * Wc)), x1 = floor(q.L + Wc - 1);\n    const set = (x, y, k2, v2) => kind[y * W + x] === GAS && ch[y * W + x] === c && ((kind[y * W + x] = k2), (V[y * W + x] = v2));\n    for (let j = 0; j \u003c nl; j++) {\n      const ys = round(q.F - j * lh), base = ys - 1;\n      if (j) {\n        for (let x = x0; x \u003c= x1; x++) if (inT(c, x + 0.5) \u003c ys - 1) set(x, ys, SHELF, 0);\n        for (let y = ys + 1; y \u003c round(q.F - (j - 1) * lh); y++) set(x0, y, SHELF, 0), set(x1 - 1, y, SHELF, 0);\n      }\n      for (let x = x0 + 1; x \u003c x1 - 1; ) {\n        const ty = floor(hash(c * 7 + j, x) * 4), w = [5, 5, 4, 3][ty];\n        const ph = min(floor(lh - 2), [5, 3, 6, 4][ty], floor(base - max(inT(c, x + 0.5), inT(c, x + w - 0.5)) - 1));\n        if (ph \u003c 2 || x + w > x1) break;\n        for (let r = 0; r \u003c ph; r++)\n          for (let xx = x; xx \u003c x + w; xx++) {\n            const dx = xx + 0.5 - x - w / 2;\n            if (abs(dx) \u003c= (prof(ty, (r + 0.5) / ph) * w) / 2 + 0.15) set(xx, base - r, POT, 0.5 - dx / w + (r === ph - 1 ? 0.2 : 0));\n          }\n        x += w + 1;\n      }\n    }\n  }\n  // Ladders up each chamber's front, and the potter's way between the stoke holes.\n  const xs = (c) => g[c].L - 4, px = [], py = [], at = [0], pl = [0];\n  S.lad = [];\n  S.spy = [0];\n  for (let c = 1; c \u003c= n; c++) {\n    const yw = outT(c, g[c].L - 1.5);\n    S.lad.push([round(xs(c)), yw, outT(c - 1, xs(c))]);\n    S.spy.push(round(g[c].F - max(5, 0.35 * h)));\n    at.push(px.length);\n    px.push(xs(c)), py.push(g[c].F + 2);\n    if (c \u003c n) {\n      px.push(xs(c)), py.push(yw);\n      for (let x = g[c].L - 1.5; x \u003c xs(c + 1); x += 1.5) px.push(x), py.push(outT(c, x));\n      px.push(xs(c + 1)), py.push(outT(c, xs(c + 1)));\n    }\n  }\n  for (let j = 1; j \u003c px.length; j++) pl.push(pl[j - 1] + hypot(px[j] - px[j - 1], py[j] - py[j - 1]));\n  Object.assign(S, { px, py, pl, Ac: at.map((j, c) => (c ? pl[j] : 0)) });\n  // The first time, the potter stands by the chamber above the one being fired.\n  const pt = S.pot;\n  if (!S.built) S.built = 1, pt.tgt = min(n, cl(round(front(S)), 1, n) + 1);\n  pt.tgt = min(pt.tgt, n);\n  pt.A = S.Ac[pt.tgt];\n  if (!pt.mode) pt.mode = 2;\n  S.logs = S.logs.filter((l) => l.c \u003c= n);\n  S.slugs = [];\n  S.ev = [];\n}\n\n// A stoke: reduction first, the flame starved and smoky, then the surge.\nconst red = (a) => (a \u003c 0.2 ? a / 0.2 : exp(-(a - 0.2) / 1.1));\nconst surge = (a) => sm(0.9, 2.1, a) * exp(-max(0, a - 2.1) / 2.4);\n\nfunction pulse(S, c, s) {\n  S.age[c] = 0, S.q[c] = s;\n  // Its black smoke reaches the chimney later the lower the chamber.\n  S.ev.push({ at: 0.25 + 0.12 * (S.n - c), fn: () => S.slugs.push({ y: S.inT(S.n, S.CX), a: 0.5 + 0.5 * s }) });\n}\n\nfunction stoke(S, c) {\n  const q = S.g[c];\n  pulse(S, c, 1);\n  S.logs.push({ c, x: q.L + (c ? 0.5 + rnd() * 2 : 2 + rnd() * 9), y: c ? round(q.F) - 1 : 120 + (rnd() \u003c 0.5), len: (c ? 3 : 4) + floor(rnd() * 3), life: 1 });\n  // The firebox's flame goes on through the first chamber.\n  if (!c) S.ev.push({ at: 0.35, fn: () => pulse(S, 1, 0.6) });\n}\n\nfunction throwTo(S, c, delay = 0) {\n  S.ev.push({ at: 0.3 + delay, fn: () => stoke(S, c) });\n  S.open[c] = 1.3 + delay;\n}\n\nfunction puff(S, x, y, vy, r, a, k) {\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vy, r, a, k, hot: 0.7 - 0.2 * k, ph: rnd() * 7 });\n}\n\nfunction spark(S, s) {\n  if (S.sparks.length > 160) S.sparks.shift();\n  const life = 0.8 + 1.4 * rnd();\n  S.sparks.push({ x: S.CX + (rnd() - 0.5) * 3, y: TOP - 1, vx: (rnd() - 0.5) * 6 * s, vy: -(10 + 14 * rnd()) * s, life, L: life });\n}\n\nfunction posAt(S, A) {\n  const { px, py, pl } = S;\n  let j = 1;\n  while (j \u003c pl.length - 1 && pl[j] \u003c A) j++;\n  const u = cl((A - pl[j - 1]) / max(1e-6, pl[j] - pl[j - 1]), 0, 1);\n  return [mix(px[j - 1], px[j], u), mix(py[j - 1], py[j], u), abs(px[j] - px[j - 1]) \u003c 0.01];\n}\n\nfunction step(S, d) {\n  S.t += d;\n  const { n, T, age, q, Hc, Te, Br, wind, pot: pt, fb } = S, fr = front(S), peak = 0.5 + 0.45 * sm(0, 0.5, (S.k1 + 1) / 2);\n  S.cf = cl(round(fr), 1, n);\n  for (let c = 0; c \u003c= n; c++) {\n    // Fired chambers hold white heat; above the one being fired each is cooler.\n    const tg = max(0.2, peak - (1.1 / n) * max(0, c - fr));\n    T[c] = T[c] \u003c 0 ? tg : T[c] + (tg - T[c]) * min(1, d * 0.8);\n    age[c] += d;\n    // Wind up the hill pulls on the chimney; wind down it chokes the draft.\n    Te[c] = T[c] + q[c] * (0.1 * surge(age[c]) - 0.15 * red(age[c])) + 0.02 * sin(S.t * 1.3 + c * 2.1) + 0.06 * wind;\n    Br[c] = 1 - 0.36 * q[c] * red(age[c]);\n    // Heat work for the cones creeps up and hardly comes back.\n    if (Hc[c] \u003c 0) Hc[c] = T[c] - 0.1;\n    Hc[c] += (Te[c] - Hc[c]) * d * (Te[c] > Hc[c] ? 0.07 : 0.02);\n    S.open[c] = max(0, S.open[c] - d);\n  }\n  Te[n + 1] = Te[n] - 0.22, Br[n + 1] = Br[n];\n  for (const e of S.ev) if ((e.at -= d) \u003c= 0) e.fn();\n  S.ev = S.ev.filter((e) => e.at > 0);\n  // The potter stokes twice, watches the spy hole, then goes where wood is needed.\n  pt.ph += d;\n  if (!pt.mode) {\n    pt.A += cl(S.Ac[pt.tgt] - pt.A, -13 * d, 13 * d);\n    if (abs(S.Ac[pt.tgt] - pt.A) \u003c 1e-3) pt.mode = 1, pt.tm = 0, pt.thr = 0;\n  } else if (pt.mode === 1) {\n    pt.tm += d;\n    if (pt.thr \u003c 2 && pt.tm > 0.3 + 0.7 * pt.thr) {\n      throwTo(S, pt.tgt);\n      pt.thr++;\n    }\n    if (pt.tm > 1.5) pt.mode = 2, pt.tm = 0.6 + 0.6 * rnd();\n  } else if ((pt.tm -= d) \u003c= 0) pt.tgt = ++pt.k % 3 ? S.cf : min(n, S.cf + 1), pt.mode = 0;\n  // The stoker feeds the fire mouth.\n  fb.an = max(0, fb.an - d);\n  if ((fb.tm -= d) \u003c= 0) fb.tm = 3 + rnd(), fb.an = 0.5, throwTo(S, 0);\n  for (const l of S.logs) l.life -= d * (0.12 + 0.2 * T[l.c]);\n  S.logs = S.logs.filter((l) => l.life > 0);\n  // Black smoke up the chimney: at the top, a billow, a flare and sparks.\n  for (const s of S.slugs)\n    if ((s.y -= d * 30) \u003c TOP) {\n      s.done = 1;\n      for (let j = 0; j \u003c 3; j++) puff(S, S.CX + (rnd() - 0.5) * 3, TOP - 1 - j * 2, -6 - 4 * rnd(), 3 + rnd(), 0.6 + 0.6 * s.a, 1);\n      for (let j = 0; j \u003c 14 * s.a; j++) spark(S, 1.3);\n      S.flare = min(1.4, S.flare + s.a);\n    }\n  S.slugs = S.slugs.filter((s) => !s.done);\n  S.flare = max(0.15 + 0.35 * sm(0.6, 1, T[n]), S.flare * exp(-d * 1.6));\n  air(S, d);\n  // Ash and embers.\n  for (const m of S.motes) m.x = (m.x + (wind * 9 + 1 + 1.5 * sin(S.t * 0.7 + m.ph)) * d + 65) % 65, m.y = (m.y + (m.e ? -3.5 : 2.2) * d + 129) % 129;\n}\n\n// A grey plume that slows and spreads under the top of the panel, and sparks.\nfunction air(S, d) {\n  const { n, T, wind } = S;\n  for (S.np += d * 6; S.np >= 1; S.np--) puff(S, S.CX + (rnd() - 0.5) * 2, TOP - 1, -7 - 3 * rnd(), 3, 0.55 + 0.2 * T[n], 0);\n  for (const p of S.puffs) {\n    // A strong wind bends the plume over and draws it out downwind.\n    p.vy += (-3.5 * (1 - 0.55 * abs(wind)) * cl(p.y / 12, 0.3, 1) - p.vy) * d * 1.2;\n    p.y += p.vy * d;\n    p.x += (wind * 18 * (0.5 + 0.5 * cl((TOP - p.y) / TOP, 0, 1)) + 1.2 * sin(S.t * 0.9 + p.ph)) * d;\n    p.r = min(10 + p.k, p.r + d * (1.5 + 1.2 * p.k + 2 * cl((8 - p.y) / 8, 0, 1)));\n    p.a -= d * (0.05 + 0.04 * (1 - p.k));\n    p.hot = max(0, p.hot - d * 1.4);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.03 && p.y + p.r > -3 && p.x > -14 && p.x \u003c W + 14);\n  for (S.ns += d * (2 + 5 * T[n]) * (1 + 0.6 * wind); S.ns >= 1; S.ns--) spark(S, 1);\n  for (const p of S.sparks) {\n    p.vy += (-6 - p.vy) * d * 1.5;\n    p.vx += ((rnd() - 0.5) * 40 + (wind * 16 - p.vx) * 2) * d;\n    p.x += p.vx * d, p.y += p.vy * d, p.life -= d;\n  }\n  S.sparks = S.sparks.filter((p) => p.life > 0 && p.y > -1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], n = cl(round(k[2]), 3, 6);\n  S.k1 = cl(k[0], -1, 1);\n  S.wind = cl(k[3], -1, 1);\n  if (n !== S.n) build(S, n);\n  // The kiln has been smoking for hours before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    step(S, 0);\n    for (let j = 0; j \u003c 75; j++) air(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c= n; c++) throwTo(S, c, 0.05 * c);\n  step(S, cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2));\n}\n\nlet F;\nfunction put(x, y, c, a = 1, add = 0) {\n  x = floor(x), y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = add ? F[o + i] + c[i] * a : mix(F[o + i], c[i], a);\n}\nfunction glow(x, y, r, c, a) {\n  for (let Y = floor(y - r); Y \u003c= y + r; Y++) for (let X = floor(x - r); X \u003c= x + r; X++) put(X, Y, c, a * max(0, 1 - hypot(X + 0.5 - x, Y + 0.5 - y) / r) ** 2, 1);\n}\n\n// A figure nine LEDs tall, feet on row y, facing the kiln: white towel, indigo\n// jacket lit orange on the kiln side, paper lantern.\nfunction figure(x, y, pose, ph, rim, lamp) {\n  x = round(x), y = round(y);\n  const a = floor(ph * 6) & 1 ? -1 : 1, pts = [[-1, -8, TOWEL], [0, -8, TOWEL], [0, -7, FACE, 1]];\n  for (let dy = -6; dy \u003c= -4; dy++) pts.push([-1, dy, COAT], [0, dy, COAT], [1, dy, COAT, 1]);\n  const L = (l, b) => pts.push([l, -3, LEGS], [b, -2, LEGS], [b, -1, LEGS], [b, 0, LEGS]);\n  if (pose === 1 && a \u003c 0) L(0, 0);\n  else if (pose === 2) L(a, a), L(-a, -a), pts.push([a, -7, COAT, 1], [-a, -3, LEGS]);\n  else L(-1, -1), L(1, 1);\n  if (pose === 3) pts.push(...(ph \u003c 0.5 ? [[-1, -7, COAT], [-2, -8, COAT]] : [[2, -5, COAT, 1], [3, -5, FACE, 1]]));\n  for (const [dx, dy, c, k] of pts) put(x + dx, y + dy, k ? c.map((v, i) => mix(v, RIM[i], rim)) : c);\n  if (lamp) put(x - 2, y - 4, [120, 70, 40]), put(x - 2, y - 3, [255, 222, 150]), put(x - 2, y - 2, [240, 160, 80]), glow(x - 1.5, y - 2, 7, [70, 44, 16], 1);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  F = S.f;\n  const { n, t, kind, ch, V, bg, gw, Te, Br, g, wind, A, K, Q, q, age } = S, lean = wind * 2.2 + 0.8, fs = 1 + 0.45 * wind, fo = floor(t * fs * 17);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const k = kind[i], c = ch[i], x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, T = Te[c], B = Br[c], v = V[i];\n    // Each LED: backdrop times m plus a ramp colour times b.\n    let j = lut(T * 0.7), b = 0, m = 0;\n    if (k \u003c= EARTH) m = 1, b = gw[i] * 0.28 * B;\n    else if (k === WALL) m = v ? 0.45 : 0.95, j = lut(T * 0.85 - 0.05), b = B * (v ? 0.5 : 0.1);\n    else if (k === GAS) {\n      let I = sm(0.25, 0.85, 0.65 * vn(X * 0.45 - lean * (0.3 + v) * 3 + c * 19, (Y + t * fs * 10) * 0.16) + 0.35 * fn(x, y + fo) + 0.25 * (1 - v) - 0.07);\n      // The firebox floor: a bed of embers under the logs.\n      if (!c && v \u003c 0.3) I = sm(0.35, 0.85, 0.7 * vn(X * 0.7, Y * 0.9 + t * 0.4) + 0.3 * vn(X * 1.7 + t, Y * 1.5) + 0.1);\n      // Darker flame is cooler, orange rather than grey. The firebox burns rougher.\n      const r = c ? 0.14 : 0.26;\n      j = lut(T - r + 2 * r * I), b = B * (1 - 2 * r + 2 * r * I);\n    } else if (k === POT) j = lut(T - 0.18), b = B * (0.32 + 0.22 * v + 0.14 * fn(x >> 1, y + (fo >> 1)));\n    else if (k === SHELF) j = lut(T - 0.2), b = B * 0.4;\n    else if (k === HOLE) j = lut(mix(Te[c - 1], T, 0.5) + 0.04), b = 0.85 + 0.15 * sin(t * 9 + x);\n    else {\n      // The flue: hot gas rising in bands, and each stoke's black smoke going up.\n      let dk = 0;\n      for (const s of S.slugs) dk = max(dk, s.a * exp(-(((Y - s.y) / 3) ** 2)));\n      j = lut(T - 0.12 - 0.2 * v + 0.1 * vn(X * 0.6, (Y + t * 22) * 0.3)), b = B * (0.6 + 0.3 * vn(X * 0.5 + 9, (Y + t * 26) * 0.2)) * (1 - 0.85 * dk);\n    }\n    for (let e = 0; e \u003c 3; e++) F[o + e] = bg[o + e] * m + LUT[j + e] * b;\n  }\n  for (const i of S.stars) for (let e = 0; e \u003c 3; e++) F[i * 3 + e] *= 0.75 + 0.25 * sin(t * 2.3 + i);\n\n  // Burning wood on the floors; in the firebox, thicker logs with their tops alight.\n  for (const l of S.logs)\n    for (let k = 0, T = Te[l.c], len = max(1, round(l.len * min(1, l.life * 1.6))); k \u003c len; k++) {\n      put(l.x + k, l.y, (k + floor(t * 4 + l.x)) % 3 ? lc(T - 0.45, 0.45) : lc(T + 0.1));\n      if (!l.c) put(l.x + k, l.y - 1, lc(T - 0.1 + 0.15 * sin(t * 7 + k + l.x)), 0.85);\n    }\n  for (const [lx, y0, y1] of S.lad) for (let y = floor(y0); y \u003c= y1; y++) put(lx - 1, y, WOOD, 0.7), put(lx + 1, y, WOOD, 0.7), y % 3 || put(lx, y, WOOD, 0.6);\n  for (let c = 1; c \u003c= n; c++) {\n    // The stoke hole, open while wood goes in, and the spy hole.\n    const T = Te[c], wx = floor(g[c].L - 1.5), sy = S.spy[c], fy = round(g[c].F), op = sm(0, 0.3, S.open[c]);\n    for (let y = fy - 3; y \u003c= fy - 2; y++) for (let x = wx; x \u003c= wx + 1; x++) put(x, y, op > 0.05 ? lc(T + 0.05, op) : lc(T - 0.3, 0.35));\n    if (op > 0.05) glow(wx - 1, fy - 2.5, 6, lc(T - 0.1), 0.35 * op);\n    put(wx, sy, lc(T, 0.9)), put(wx + 1, sy, lc(T));\n    for (let x = wx + 2; x \u003c= wx + 6; x++) put(x, sy + 2, lc(T - 0.2, 0.4));\n    // Three cones on a pad, each bending once the heat work passes its number.\n    for (let m = 0; m \u003c 3; m++) {\n      const b = sm(0.57 + 0.12 * m, 0.68 + 0.12 * m, S.Hc[c]), cx = wx + 2 + 2 * m + (b > 0.4), cc = lc(T - 0.15, 0.5);\n      put(cx - (b > 0.4), sy + 1, cc), put(cx, sy, cc, b \u003c 0.75 ? 1 : 0.5), put(cx, b \u003c 0.75 ? sy - 1 : sy + 1, cc);\n    }\n    // Flame out of the spy hole after a stoke, or whenever the wind chokes the chimney.\n    const s = max(q[c] * red(age[c]) * sm(0.15, 0.35, age[c]), 0.55 * q[c - 1] * red(age[c - 1] - 0.3) * sm(0.4, 0.6, age[c - 1])) + 0.3 * max(0, -wind) * (0.7 + 0.3 * sin(t * 3 + c));\n    if (s \u003c 0.05) continue;\n    const x0 = wx - 0.5, y0 = sy + 0.5, len = 2 + 9 * s * (0.8 + 0.2 * sin(t * 13 + c));\n    glow(x0, y0, 5, [120, 50, 10], s);\n    for (let j = 0; j \u003c len; j++) {\n      const u = j / len, x = x0 - j * (1 - 0.6 * max(0, wind)) + wind * j * 0.4, y = y0 - j * j * 0.06 - j * 0.15 + sin(t * 17 + j) * 0.4 * u;\n      put(x, y, lc(T + 0.45 - 0.6 * u), 1 - u * 0.3);\n      if (u \u003c 0.7) put(x, y - 1, lc(T + 0.25 - 0.6 * u), 0.8 - u), put(x, y + 1, lc(T + 0.1 - 0.6 * u), 0.5 - 0.5 * u);\n    }\n  }\n  const pt = S.pot, [px, py, climb] = posAt(S, pt.A), pose = pt.mode === 1 ? 3 : pt.mode ? 0 : climb ? 2 : 1;\n  figure(px, py, pose, pose === 3 ? (pt.tm % 0.7) / 0.7 : pt.ph, 0.25 + 0.6 * sm(0, 0.3, S.open[pt.tgt]) * (pose === 3), 1);\n  figure(1, 122, S.fb.an > 0 ? 3 : 0, 1 - S.fb.an / 0.5, 0.5 + 0.3 * sin(t * 7), 0);\n  glow(5, 120, 6, lc(Te[0] - 0.1), 0.35);\n\n  // Smoke: puffs summed, then shaded grey, lit from below, or black after a stoke.\n  A.fill(0), K.fill(0), Q.fill(0);\n  for (const p of S.puffs)\n    for (let y = max(0, floor(p.y - p.r)); y \u003c= min(63, p.y + p.r); y++)\n      for (let x = max(0, floor(p.x - p.r)); x \u003c= min(W - 1, p.x + p.r); x++) {\n        const dx = (x + 0.5 - p.x) / p.r, dy = (y + 0.5 - p.y) / p.r, w = p.a * (1 - dx * dx - dy * dy) ** 2, i = y * W + x;\n        if (dx * dx + dy * dy \u003c 1) A[i] += w, K[i] += w * p.k, Q[i] += w * p.hot;\n      }\n  for (let i = 0; i \u003c W * 64; i++) {\n    if (A[i] \u003c 0.01) continue;\n    const y = i >> 6, tx = 0.6 * vn((i & 63) * 0.25 - t * wind, y * 0.25 + t * 0.8) + 0.4 * fn(i, y + (fo >> 2)), gr = 0.7 + 0.5 * tx;\n    const al = min(0.95, (1 - exp(-A[i] * 2.2)) * (0.6 + 0.6 * tx)), dk = K[i] / A[i], hq = min(1, Q[i] / A[i]) * (0.4 + 0.6 * sm(30, 10, y));\n    const o = i * 3;\n    F[o] = mix(F[o], mix(118 * gr, 16, dk) + 160 * hq, al), F[o + 1] = mix(F[o + 1], mix(106 * gr, 11, dk) + 60 * hq, al), F[o + 2] = mix(F[o + 2], mix(104 * gr, 10, dk) + 14 * hq, al);\n  }\n  // Flame licking out of the chimney's mouth.\n  const fh = 2 + 7 * S.flare;\n  glow(S.CX, TOP, 6, [110, 40, 8], S.flare * 0.8);\n  for (let j = 0, u = 0; j \u003c fh; u = ++j / fh)\n    for (let e = -1; e \u003c 2; e++) (u \u003c 0.5 || !e) && put(S.CX + e + wind * j * 0.6 + sin(t * 11 + j) * 0.6 * u, TOP - 1 - j, lc(Te[n] - 0.05 - 0.45 * u - 0.2 * abs(e)), e ? 0.6 : 1 - 0.5 * u);\n  for (const p of S.sparks) put(p.x, p.y, lc(0.35 + 0.75 * (p.life / p.L)), min(1, p.life * 2));\n  for (const m of S.motes) put(m.x, m.y, m.e ? [230, 110, 30] : [80, 78, 84], m.e ? 0.5 + 0.4 * sin(t * 5 + m.ph) : 0.6);\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-noborigama","type":"code","name":"noborigama","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Noborigama\n// Family:  pottery\n// Idea:    A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the noborigama, the wood-fired climbing kiln of Japan and Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1\n//\n// Knob 1: Firing. The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white.\n// Knob 2: Speed. At 2 the potter stokes every few seconds; 0.2 is ten times slower.\n// Knob 3: Chambers. Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves.\n// Knob 4: Draft. Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame.\n// Buttons: K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi % p), b = hash(xi + 1, yi % p), c = hash(xi, (yi + 1) % p);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, (yi + 1) % p)) * su * sv;\n}\n// Fine noise that wraps every 256 rows, for the quick flicker of flame and smoke.\nconst FN = new Float32Array(64 * 256).map((_, i) => vn((i & 63) * 0.9, ((i >> 6) * 84) / 256, 84));\nconst fn = (x, y) => FN[(y & 255) * 64 + (x & 63)];\n\n// Brick, gas and flame by temperature: dull red at 0.15, orange at 0.6, white\n// heat at 1. Red stops at 232: pinned at 255 it hid the flicker of the hottest\n// chambers, since an LED reads by its brightest channel.\nconst RAMP = [[0, 24, 4, 2], [0.15, 92, 13, 4], [0.3, 158, 30, 6], [0.45, 204, 68, 12], [0.6, 226, 114, 24], [0.75, 232, 160, 50], [0.88, 232, 194, 96], [1, 232, 216, 160], [1.25, 236, 230, 204]];\nconst LUT = new Float32Array(768);\nfor (let i = 0; i \u003c 256; i++) {\n  let k = 0;\n  const T = i / 204;\n  while (k \u003c 7 && T > RAMP[k + 1][0]) k++;\n  const u = cl((T - RAMP[k][0]) / (RAMP[k + 1][0] - RAMP[k][0]), 0, 1);\n  for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(RAMP[k][c + 1], RAMP[k + 1][c + 1], u);\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n// One colour array for every put(), to spare the garbage collector.\nconst C3 = [0, 0, 0];\nconst lc = (T, b = 1) => ((T = lut(T)), C3[0] = LUT[T] * b, C3[1] = LUT[T + 1] * b, C3[2] = LUT[T + 2] * b, C3);\n\nconst SKY = 0, EARTH = 1, WALL = 3, GAS = 4, POT = 5, SHELF = 6, HOLE = 7, FLUE = 8;\n// A vault on low walls: roof height across a chamber, 0.4 at the walls, 1 at the crown.\nconst arch = (u) => 0.4 + 0.6 * sqrt(max(0, 1 - (2 * u - 1) ** 2));\nconst TOP = 18; // the chimney's mouth row\nconst WOOD = [150, 118, 66], TOWEL = [214, 204, 184], FACE = [176, 116, 78], COAT = [46, 60, 128], LEGS = [74, 62, 54], RIM = [255, 150, 60];\n// Jar, flared bowl, bottle and cup: half width up the pot, bottom to top.\nconst prof = (k, t) => (k === 0 ? (t > 0.84 ? 0.5 : 0.6 + 0.4 * sin(PI * t)) : k === 1 ? 0.5 + 0.5 * t : k === 2 ? (t \u003c 0.55 ? 0.55 + 0.45 * sin((PI * t) / 0.55) : t > 0.88 ? 0.5 : 0.3) : 0.8);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    t: 0, n: 0, kind: new Uint8Array(N), ch: new Uint8Array(N), V: F32(N), bg: F32(N * 3), gw: F32(N), f: F32(N * 3), A: F32(W * 64), K: F32(W * 64), Q: F32(W * 64),\n    T: F32(8).fill(-1), Hc: F32(8).fill(-1), age: F32(8).fill(9), q: F32(8), open: F32(8), Te: F32(8), Br: F32(8),\n    puffs: [], sparks: [], logs: [], slugs: [], ev: [], motes: [], pot: { A: 0, tgt: 0, mode: 1, tm: -1.6, thr: 0, k: 0, ph: 0 }, fb: { tm: 1, an: 0 }, flare: 0, np: 0, ns: 0,\n  });\n  for (let k = 0; k \u003c 40; k++) S.motes.push({ x: rnd() * W, y: rnd() * H, e: rnd() \u003c 0.45, ph: rnd() * 7 });\n  for (let k = 0; k \u003c 3; k++) S.logs.push({ c: 0, x: 8 + k * 6 + rnd() * 3, y: 120 + (k & 1), len: 5, life: 0.4 + 0.5 * rnd() });\n}\n\nconst front = (S) => ((S.k1 + 1) / 2) * (S.n + 0.3);\n\nfunction build(S, n) {\n  S.n = n;\n  const P = 77 / n, h = P - 3, Wc = 34 - 2 * n, s = (43 - Wc) / (n - 1);\n  // The firebox, then the chambers, each P rows above the last and s LEDs to the right.\n  const g = (S.g = [{ L: 6, W: 25, F: 123, h: 11 }]);\n  for (let c = 1; c \u003c= n; c++) g.push({ L: 14 + (c - 1) * s, W: Wc, F: 108 - (c - 1) * P, h });\n  // The roof row over X inside a chamber; with e = 2, the top of its brick.\n  const inT = (S.inT = (k, X, e = 0) => {\n    const q = g[k], u = (X - q.L + e) / (q.W + 2 * e);\n    return u > 0 && u \u003c 1 ? q.F - (q.h + e) * arch(u) : 1e3;\n  });\n  const outT = (k, X) => inT(k, X, 2), tp = g[n], CX = (S.CX = tp.L + 0.62 * tp.W);\n  const hill = (X) => (X \u003c 4 ? 123 : X \u003c tp.L - 2 ? mix(123, tp.F + 2, (X - 4) / (tp.L - 6)) : mix(tp.F + 2, tp.F - 5, (X - tp.L + 2) / (66 - tp.L)));\n  // Flame passages through each chamber's floor, over the crown of the one below.\n  const holes = [];\n  for (let c = 1; c \u003c= n; c++) for (let a = g[c - 1], x = round(a.L + 0.2 * a.W); x \u003c= a.L + 0.8 * a.W; x += 4) if (x > g[c].L && x \u003c g[c].L + Wc - 2) holes.push([x, c]);\n  const { kind, ch, V, bg, gw } = S;\n  S.stars = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, r = hash(x, y), nz = 0.8 + 0.4 * vn(x * 0.3, y * 0.3);\n    let k = SKY, c = 0, v = 0, col = [0, 0, 0];\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F && Y > inT(j, X)) k = GAS, c = j, v = (g[j].F - Y) / g[j].h;\n    if (!k && abs(X - CX) \u003c 2 && Y > TOP && Y \u003c inT(n, X) + 0.5) k = FLUE, c = n, v = (Y - TOP) / (inT(n, CX) - TOP);\n    if (!k) for (const [hx, hc] of holes) if (x === hx && Y > g[hc].F && Y \u003c inT(hc - 1, X)) k = HOLE, c = hc;\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F + 2 && Y > outT(j, X)) k = WALL, c = j;\n    if (!k && Y > TOP && ((abs(X - CX) \u003c 4 && Y \u003c outT(n, X) + 1) || (Y \u003c TOP + 2 && abs(X - CX) \u003c 5))) k = WALL, c = n + 1;\n    if (!k && Y > hill(X)) k = EARTH;\n    // The fire mouth in the firebox's front wall.\n    if (k === WALL && !c && x \u003c 6 && y > 116) k = GAS, v = (123 - Y) / 11;\n    kind[i] = k, ch[i] = c, V[i] = v;\n    if (k === SKY) {\n      const u = sm(0, 112, Y), dm = hypot(X - 11, Y - 11), e = 26 * exp(-dm / 3.5), st = r \u003c 0.014 && y \u003c 100 && dm > 12 ? 70 + 140 * hash(y, x) : 0;\n      col = [5 + 15 * u + e + st, 9 + 17 * u + e + st, 32 + 30 * u + e + st];\n      // A crescent moon.\n      if (dm \u003c 3.6 && hypot(X - 12.6, Y - 10) > 3.2) col = [226, 222, 196];\n      if (st) S.stars.push(i);\n    } else if (k === EARTH) {\n      // Beds along the slope, stones, grass on top.\n      const dd = Y - hill(X), bd = (0.7 + 0.5 * vn(dd * 0.3 + x * 0.04, 3.5 + x * 0.02)) * nz;\n      col = dd \u003c 1.5 ? [24, 38, 24] : r \u003c 0.035 ? [58, 52, 46] : [30 * bd, 23 * bd, 19 * bd];\n    }\n    // Brick, coursed on the chimney.\n    else if (k === WALL) col = [96, 66, 50].map((v2) => v2 * ((c > n ? y % 3 === 0 || (x + (floor(y / 3) & 1) * 2) % 4 === 0 : r \u003c 0.25) ? 0.62 : 0.85 + 0.3 * r));\n    bg.set(col, i * 3);\n  }\n  gw.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, k = kind[i];\n    // The brick the fire touches.\n    if (k === WALL) V[i] = [1, -1, W, -W].some((d) => kind[i + d] >= GAS && (abs(d) > 1 || (x + d) >> 6 === 0)) ? 1 : 0;\n    // Earth and air by the kiln are warm: how near each LED is to a wall, and whose.\n    if (k \u003c= EARTH) {\n      let best = 9;\n      for (let dy = -4; dy \u003c= 4; dy++)\n        for (let dx = -4; dx \u003c= 4; dx++) {\n          const X = x + dx, Y = y + dy, d = abs(dx) + abs(dy);\n          if (X >= 0 && X \u003c W && Y >= 0 && Y \u003c H && kind[Y * W + X] === WALL && d \u003c best) best = d, ch[i] = ch[Y * W + X];\n        }\n      gw[i] = best \u003c 9 ? exp(-best / 1.4) * (k ? 0.8 : 0.6) : 0;\n    }\n  }\n  // Shelves and pots: two or three levels a chamber, under the vault.\n  const nl = h >= 16 ? 3 : 2, lh = h / nl;\n  for (let c = 1; c \u003c= n; c++) {\n    const q = g[c], x0 = round(q.L + max(6, 0.22 * Wc)), x1 = floor(q.L + Wc - 1);\n    const set = (x, y, k2, v2) => kind[y * W + x] === GAS && ch[y * W + x] === c && ((kind[y * W + x] = k2), (V[y * W + x] = v2));\n    for (let j = 0; j \u003c nl; j++) {\n      const ys = round(q.F - j * lh), base = ys - 1;\n      if (j) {\n        for (let x = x0; x \u003c= x1; x++) if (inT(c, x + 0.5) \u003c ys - 1) set(x, ys, SHELF, 0);\n        for (let y = ys + 1; y \u003c round(q.F - (j - 1) * lh); y++) set(x0, y, SHELF, 0), set(x1 - 1, y, SHELF, 0);\n      }\n      for (let x = x0 + 1; x \u003c x1 - 1; ) {\n        const ty = floor(hash(c * 7 + j, x) * 4), w = [5, 5, 4, 3][ty];\n        const ph = min(floor(lh - 2), [5, 3, 6, 4][ty], floor(base - max(inT(c, x + 0.5), inT(c, x + w - 0.5)) - 1));\n        if (ph \u003c 2 || x + w > x1) break;\n        for (let r = 0; r \u003c ph; r++)\n          for (let xx = x; xx \u003c x + w; xx++) {\n            const dx = xx + 0.5 - x - w / 2;\n            if (abs(dx) \u003c= (prof(ty, (r + 0.5) / ph) * w) / 2 + 0.15) set(xx, base - r, POT, 0.5 - dx / w + (r === ph - 1 ? 0.2 : 0));\n          }\n        x += w + 1;\n      }\n    }\n  }\n  // Ladders up each chamber's front, and the potter's way between the stoke holes.\n  const xs = (c) => g[c].L - 4, px = [], py = [], at = [0], pl = [0];\n  S.lad = [];\n  S.spy = [0];\n  for (let c = 1; c \u003c= n; c++) {\n    const yw = outT(c, g[c].L - 1.5);\n    S.lad.push([round(xs(c)), yw, outT(c - 1, xs(c))]);\n    S.spy.push(round(g[c].F - max(5, 0.35 * h)));\n    at.push(px.length);\n    px.push(xs(c)), py.push(g[c].F + 2);\n    if (c \u003c n) {\n      px.push(xs(c)), py.push(yw);\n      for (let x = g[c].L - 1.5; x \u003c xs(c + 1); x += 1.5) px.push(x), py.push(outT(c, x));\n      px.push(xs(c + 1)), py.push(outT(c, xs(c + 1)));\n    }\n  }\n  for (let j = 1; j \u003c px.length; j++) pl.push(pl[j - 1] + hypot(px[j] - px[j - 1], py[j] - py[j - 1]));\n  Object.assign(S, { px, py, pl, Ac: at.map((j, c) => (c ? pl[j] : 0)) });\n  // The first time, the potter stands by the chamber above the one being fired.\n  const pt = S.pot;\n  if (!S.built) S.built = 1, pt.tgt = min(n, cl(round(front(S)), 1, n) + 1);\n  pt.tgt = min(pt.tgt, n);\n  pt.A = S.Ac[pt.tgt];\n  if (!pt.mode) pt.mode = 2;\n  S.logs = S.logs.filter((l) => l.c \u003c= n);\n  S.slugs = [];\n  S.ev = [];\n}\n\n// A stoke: reduction first, the flame starved and smoky, then the surge.\nconst red = (a) => (a \u003c 0.2 ? a / 0.2 : exp(-(a - 0.2) / 1.1));\nconst surge = (a) => sm(0.9, 2.1, a) * exp(-max(0, a - 2.1) / 2.4);\n\nfunction pulse(S, c, s) {\n  S.age[c] = 0, S.q[c] = s;\n  // Its black smoke reaches the chimney later the lower the chamber.\n  S.ev.push({ at: 0.25 + 0.12 * (S.n - c), fn: () => S.slugs.push({ y: S.inT(S.n, S.CX), a: 0.5 + 0.5 * s }) });\n}\n\nfunction stoke(S, c) {\n  const q = S.g[c];\n  pulse(S, c, 1);\n  S.logs.push({ c, x: q.L + (c ? 0.5 + rnd() * 2 : 2 + rnd() * 9), y: c ? round(q.F) - 1 : 120 + (rnd() \u003c 0.5), len: (c ? 3 : 4) + floor(rnd() * 3), life: 1 });\n  // The firebox's flame goes on through the first chamber.\n  if (!c) S.ev.push({ at: 0.35, fn: () => pulse(S, 1, 0.6) });\n}\n\nfunction throwTo(S, c, delay = 0) {\n  S.ev.push({ at: 0.3 + delay, fn: () => stoke(S, c) });\n  S.open[c] = 1.3 + delay;\n}\n\nfunction puff(S, x, y, vy, r, a, k) {\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vy, r, a, k, hot: 0.7 - 0.2 * k, ph: rnd() * 7 });\n}\n\nfunction spark(S, s) {\n  if (S.sparks.length > 160) S.sparks.shift();\n  const life = 0.8 + 1.4 * rnd();\n  S.sparks.push({ x: S.CX + (rnd() - 0.5) * 3, y: TOP - 1, vx: (rnd() - 0.5) * 6 * s, vy: -(10 + 14 * rnd()) * s, life, L: life });\n}\n\nfunction posAt(S, A) {\n  const { px, py, pl } = S;\n  let j = 1;\n  while (j \u003c pl.length - 1 && pl[j] \u003c A) j++;\n  const u = cl((A - pl[j - 1]) / max(1e-6, pl[j] - pl[j - 1]), 0, 1);\n  return [mix(px[j - 1], px[j], u), mix(py[j - 1], py[j], u), abs(px[j] - px[j - 1]) \u003c 0.01];\n}\n\nfunction step(S, d) {\n  S.t += d;\n  const { n, T, age, q, Hc, Te, Br, wind, pot: pt, fb } = S, fr = front(S), peak = 0.5 + 0.45 * sm(0, 0.5, (S.k1 + 1) / 2);\n  S.cf = cl(round(fr), 1, n);\n  for (let c = 0; c \u003c= n; c++) {\n    // Fired chambers hold white heat; above the one being fired each is cooler.\n    const tg = max(0.2, peak - (1.1 / n) * max(0, c - fr));\n    T[c] = T[c] \u003c 0 ? tg : T[c] + (tg - T[c]) * min(1, d * 0.8);\n    age[c] += d;\n    // Wind up the hill pulls on the chimney; wind down it chokes the draft.\n    Te[c] = T[c] + q[c] * (0.1 * surge(age[c]) - 0.15 * red(age[c])) + 0.02 * sin(S.t * 1.3 + c * 2.1) + 0.06 * wind;\n    Br[c] = 1 - 0.36 * q[c] * red(age[c]);\n    // Heat work for the cones creeps up and hardly comes back.\n    if (Hc[c] \u003c 0) Hc[c] = T[c] - 0.1;\n    Hc[c] += (Te[c] - Hc[c]) * d * (Te[c] > Hc[c] ? 0.07 : 0.02);\n    S.open[c] = max(0, S.open[c] - d);\n  }\n  Te[n + 1] = Te[n] - 0.22, Br[n + 1] = Br[n];\n  for (const e of S.ev) if ((e.at -= d) \u003c= 0) e.fn();\n  S.ev = S.ev.filter((e) => e.at > 0);\n  // The potter stokes twice, watches the spy hole, then goes where wood is needed.\n  pt.ph += d;\n  if (!pt.mode) {\n    pt.A += cl(S.Ac[pt.tgt] - pt.A, -13 * d, 13 * d);\n    if (abs(S.Ac[pt.tgt] - pt.A) \u003c 1e-3) pt.mode = 1, pt.tm = 0, pt.thr = 0;\n  } else if (pt.mode === 1) {\n    pt.tm += d;\n    if (pt.thr \u003c 2 && pt.tm > 0.3 + 0.7 * pt.thr) {\n      throwTo(S, pt.tgt);\n      pt.thr++;\n    }\n    if (pt.tm > 1.5) pt.mode = 2, pt.tm = 0.6 + 0.6 * rnd();\n  } else if ((pt.tm -= d) \u003c= 0) pt.tgt = ++pt.k % 3 ? S.cf : min(n, S.cf + 1), pt.mode = 0;\n  // The stoker feeds the fire mouth.\n  fb.an = max(0, fb.an - d);\n  if ((fb.tm -= d) \u003c= 0) fb.tm = 3 + rnd(), fb.an = 0.5, throwTo(S, 0);\n  for (const l of S.logs) l.life -= d * (0.12 + 0.2 * T[l.c]);\n  S.logs = S.logs.filter((l) => l.life > 0);\n  // Black smoke up the chimney: at the top, a billow, a flare and sparks.\n  for (const s of S.slugs)\n    if ((s.y -= d * 30) \u003c TOP) {\n      s.done = 1;\n      for (let j = 0; j \u003c 3; j++) puff(S, S.CX + (rnd() - 0.5) * 3, TOP - 1 - j * 2, -6 - 4 * rnd(), 3 + rnd(), 0.6 + 0.6 * s.a, 1);\n      for (let j = 0; j \u003c 14 * s.a; j++) spark(S, 1.3);\n      S.flare = min(1.4, S.flare + s.a);\n    }\n  S.slugs = S.slugs.filter((s) => !s.done);\n  S.flare = max(0.15 + 0.35 * sm(0.6, 1, T[n]), S.flare * exp(-d * 1.6));\n  air(S, d);\n  // Ash and embers.\n  for (const m of S.motes) m.x = (m.x + (wind * 9 + 1 + 1.5 * sin(S.t * 0.7 + m.ph)) * d + 65) % 65, m.y = (m.y + (m.e ? -3.5 : 2.2) * d + 129) % 129;\n}\n\n// A grey plume that slows and spreads under the top of the panel, and sparks.\nfunction air(S, d) {\n  const { n, T, wind } = S;\n  for (S.np += d * 6; S.np >= 1; S.np--) puff(S, S.CX + (rnd() - 0.5) * 2, TOP - 1, -7 - 3 * rnd(), 3, 0.55 + 0.2 * T[n], 0);\n  for (const p of S.puffs) {\n    // A strong wind bends the plume over and draws it out downwind.\n    p.vy += (-3.5 * (1 - 0.55 * abs(wind)) * cl(p.y / 12, 0.3, 1) - p.vy) * d * 1.2;\n    p.y += p.vy * d;\n    p.x += (wind * 18 * (0.5 + 0.5 * cl((TOP - p.y) / TOP, 0, 1)) + 1.2 * sin(S.t * 0.9 + p.ph)) * d;\n    p.r = min(10 + p.k, p.r + d * (1.5 + 1.2 * p.k + 2 * cl((8 - p.y) / 8, 0, 1)));\n    p.a -= d * (0.05 + 0.04 * (1 - p.k));\n    p.hot = max(0, p.hot - d * 1.4);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.03 && p.y + p.r > -3 && p.x > -14 && p.x \u003c W + 14);\n  for (S.ns += d * (2 + 5 * T[n]) * (1 + 0.6 * wind); S.ns >= 1; S.ns--) spark(S, 1);\n  for (const p of S.sparks) {\n    p.vy += (-6 - p.vy) * d * 1.5;\n    p.vx += ((rnd() - 0.5) * 40 + (wind * 16 - p.vx) * 2) * d;\n    p.x += p.vx * d, p.y += p.vy * d, p.life -= d;\n  }\n  S.sparks = S.sparks.filter((p) => p.life > 0 && p.y > -1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], n = cl(round(k[2]), 3, 6);\n  S.k1 = cl(k[0], -1, 1);\n  S.wind = cl(k[3], -1, 1);\n  if (n !== S.n) build(S, n);\n  // The kiln has been smoking for hours before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    step(S, 0);\n    for (let j = 0; j \u003c 75; j++) air(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c= n; c++) throwTo(S, c, 0.05 * c);\n  step(S, cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2));\n}\n\nlet F;\nfunction put(x, y, c, a = 1, add = 0) {\n  x = floor(x), y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = add ? F[o + i] + c[i] * a : mix(F[o + i], c[i], a);\n}\nfunction glow(x, y, r, c, a) {\n  for (let Y = floor(y - r); Y \u003c= y + r; Y++) for (let X = floor(x - r); X \u003c= x + r; X++) put(X, Y, c, a * max(0, 1 - hypot(X + 0.5 - x, Y + 0.5 - y) / r) ** 2, 1);\n}\n\n// A figure nine LEDs tall, feet on row y, facing the kiln: white towel, indigo\n// jacket lit orange on the kiln side, paper lantern.\nfunction figure(x, y, pose, ph, rim, lamp) {\n  x = round(x), y = round(y);\n  const a = floor(ph * 6) & 1 ? -1 : 1, pts = [[-1, -8, TOWEL], [0, -8, TOWEL], [0, -7, FACE, 1]];\n  for (let dy = -6; dy \u003c= -4; dy++) pts.push([-1, dy, COAT], [0, dy, COAT], [1, dy, COAT, 1]);\n  const L = (l, b) => pts.push([l, -3, LEGS], [b, -2, LEGS], [b, -1, LEGS], [b, 0, LEGS]);\n  if (pose === 1 && a \u003c 0) L(0, 0);\n  else if (pose === 2) L(a, a), L(-a, -a), pts.push([a, -7, COAT, 1], [-a, -3, LEGS]);\n  else L(-1, -1), L(1, 1);\n  if (pose === 3) pts.push(...(ph \u003c 0.5 ? [[-1, -7, COAT], [-2, -8, COAT]] : [[2, -5, COAT, 1], [3, -5, FACE, 1]]));\n  for (const [dx, dy, c, k] of pts) put(x + dx, y + dy, k ? c.map((v, i) => mix(v, RIM[i], rim)) : c);\n  if (lamp) put(x - 2, y - 4, [120, 70, 40]), put(x - 2, y - 3, [255, 222, 150]), put(x - 2, y - 2, [240, 160, 80]), glow(x - 1.5, y - 2, 7, [70, 44, 16], 1);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  F = S.f;\n  const { n, t, kind, ch, V, bg, gw, Te, Br, g, wind, A, K, Q, q, age } = S, lean = wind * 2.2 + 0.8, fs = 1 + 0.45 * wind, fo = floor(t * fs * 17);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const k = kind[i], c = ch[i], x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, T = Te[c], B = Br[c], v = V[i];\n    // Each LED: backdrop times m plus a ramp colour times b.\n    let j = lut(T * 0.7), b = 0, m = 0;\n    if (k \u003c= EARTH) m = 1, b = gw[i] * 0.28 * B;\n    else if (k === WALL) m = v ? 0.45 : 0.95, j = lut(T * 0.85 - 0.05), b = B * (v ? 0.5 : 0.1);\n    else if (k === GAS) {\n      let I = sm(0.25, 0.85, 0.65 * vn(X * 0.45 - lean * (0.3 + v) * 3 + c * 19, (Y + t * fs * 10) * 0.16) + 0.35 * fn(x, y + fo) + 0.25 * (1 - v) - 0.07);\n      // The firebox floor: a bed of embers under the logs.\n      if (!c && v \u003c 0.3) I = sm(0.35, 0.85, 0.7 * vn(X * 0.7, Y * 0.9 + t * 0.4) + 0.3 * vn(X * 1.7 + t, Y * 1.5) + 0.1);\n      // Darker flame is cooler, orange rather than grey. The firebox burns rougher.\n      const r = c ? 0.14 : 0.26;\n      j = lut(T - r + 2 * r * I), b = B * (1 - 2 * r + 2 * r * I);\n    } else if (k === POT) j = lut(T - 0.18), b = B * (0.32 + 0.22 * v + 0.14 * fn(x >> 1, y + (fo >> 1)));\n    else if (k === SHELF) j = lut(T - 0.2), b = B * 0.4;\n    else if (k === HOLE) j = lut(mix(Te[c - 1], T, 0.5) + 0.04), b = 0.85 + 0.15 * sin(t * 9 + x);\n    else {\n      // The flue: hot gas rising in bands, and each stoke's black smoke going up.\n      let dk = 0;\n      for (const s of S.slugs) dk = max(dk, s.a * exp(-(((Y - s.y) / 3) ** 2)));\n      j = lut(T - 0.12 - 0.2 * v + 0.1 * vn(X * 0.6, (Y + t * 22) * 0.3)), b = B * (0.6 + 0.3 * vn(X * 0.5 + 9, (Y + t * 26) * 0.2)) * (1 - 0.85 * dk);\n    }\n    for (let e = 0; e \u003c 3; e++) F[o + e] = bg[o + e] * m + LUT[j + e] * b;\n  }\n  for (const i of S.stars) for (let e = 0; e \u003c 3; e++) F[i * 3 + e] *= 0.75 + 0.25 * sin(t * 2.3 + i);\n\n  // Burning wood on the floors; in the firebox, thicker logs with their tops alight.\n  for (const l of S.logs)\n    for (let k = 0, T = Te[l.c], len = max(1, round(l.len * min(1, l.life * 1.6))); k \u003c len; k++) {\n      put(l.x + k, l.y, (k + floor(t * 4 + l.x)) % 3 ? lc(T - 0.45, 0.45) : lc(T + 0.1));\n      if (!l.c) put(l.x + k, l.y - 1, lc(T - 0.1 + 0.15 * sin(t * 7 + k + l.x)), 0.85);\n    }\n  for (const [lx, y0, y1] of S.lad) for (let y = floor(y0); y \u003c= y1; y++) put(lx - 1, y, WOOD, 0.7), put(lx + 1, y, WOOD, 0.7), y % 3 || put(lx, y, WOOD, 0.6);\n  for (let c = 1; c \u003c= n; c++) {\n    // The stoke hole, open while wood goes in, and the spy hole.\n    const T = Te[c], wx = floor(g[c].L - 1.5), sy = S.spy[c], fy = round(g[c].F), op = sm(0, 0.3, S.open[c]);\n    for (let y = fy - 3; y \u003c= fy - 2; y++) for (let x = wx; x \u003c= wx + 1; x++) put(x, y, op > 0.05 ? lc(T + 0.05, op) : lc(T - 0.3, 0.35));\n    if (op > 0.05) glow(wx - 1, fy - 2.5, 6, lc(T - 0.1), 0.35 * op);\n    put(wx, sy, lc(T, 0.9)), put(wx + 1, sy, lc(T));\n    for (let x = wx + 2; x \u003c= wx + 6; x++) put(x, sy + 2, lc(T - 0.2, 0.4));\n    // Three cones on a pad, each bending once the heat work passes its number.\n    for (let m = 0; m \u003c 3; m++) {\n      const b = sm(0.57 + 0.12 * m, 0.68 + 0.12 * m, S.Hc[c]), cx = wx + 2 + 2 * m + (b > 0.4), cc = lc(T - 0.15, 0.5);\n      put(cx - (b > 0.4), sy + 1, cc), put(cx, sy, cc, b \u003c 0.75 ? 1 : 0.5), put(cx, b \u003c 0.75 ? sy - 1 : sy + 1, cc);\n    }\n    // Flame out of the spy hole after a stoke, or whenever the wind chokes the chimney.\n    const s = max(q[c] * red(age[c]) * sm(0.15, 0.35, age[c]), 0.55 * q[c - 1] * red(age[c - 1] - 0.3) * sm(0.4, 0.6, age[c - 1])) + 0.3 * max(0, -wind) * (0.7 + 0.3 * sin(t * 3 + c));\n    if (s \u003c 0.05) continue;\n    const x0 = wx - 0.5, y0 = sy + 0.5, len = 2 + 9 * s * (0.8 + 0.2 * sin(t * 13 + c));\n    glow(x0, y0, 5, [120, 50, 10], s);\n    for (let j = 0; j \u003c len; j++) {\n      const u = j / len, x = x0 - j * (1 - 0.6 * max(0, wind)) + wind * j * 0.4, y = y0 - j * j * 0.06 - j * 0.15 + sin(t * 17 + j) * 0.4 * u;\n      put(x, y, lc(T + 0.45 - 0.6 * u), 1 - u * 0.3);\n      if (u \u003c 0.7) put(x, y - 1, lc(T + 0.25 - 0.6 * u), 0.8 - u), put(x, y + 1, lc(T + 0.1 - 0.6 * u), 0.5 - 0.5 * u);\n    }\n  }\n  const pt = S.pot, [px, py, climb] = posAt(S, pt.A), pose = pt.mode === 1 ? 3 : pt.mode ? 0 : climb ? 2 : 1;\n  figure(px, py, pose, pose === 3 ? (pt.tm % 0.7) / 0.7 : pt.ph, 0.25 + 0.6 * sm(0, 0.3, S.open[pt.tgt]) * (pose === 3), 1);\n  figure(1, 122, S.fb.an > 0 ? 3 : 0, 1 - S.fb.an / 0.5, 0.5 + 0.3 * sin(t * 7), 0);\n  glow(5, 120, 6, lc(Te[0] - 0.1), 0.35);\n\n  // Smoke: puffs summed, then shaded grey, lit from below, or black after a stoke.\n  A.fill(0), K.fill(0), Q.fill(0);\n  for (const p of S.puffs)\n    for (let y = max(0, floor(p.y - p.r)); y \u003c= min(63, p.y + p.r); y++)\n      for (let x = max(0, floor(p.x - p.r)); x \u003c= min(W - 1, p.x + p.r); x++) {\n        const dx = (x + 0.5 - p.x) / p.r, dy = (y + 0.5 - p.y) / p.r, w = p.a * (1 - dx * dx - dy * dy) ** 2, i = y * W + x;\n        if (dx * dx + dy * dy \u003c 1) A[i] += w, K[i] += w * p.k, Q[i] += w * p.hot;\n      }\n  for (let i = 0; i \u003c W * 64; i++) {\n    if (A[i] \u003c 0.01) continue;\n    const y = i >> 6, tx = 0.6 * vn((i & 63) * 0.25 - t * wind, y * 0.25 + t * 0.8) + 0.4 * fn(i, y + (fo >> 2)), gr = 0.7 + 0.5 * tx;\n    const al = min(0.95, (1 - exp(-A[i] * 2.2)) * (0.6 + 0.6 * tx)), dk = K[i] / A[i], hq = min(1, Q[i] / A[i]) * (0.4 + 0.6 * sm(30, 10, y));\n    const o = i * 3;\n    F[o] = mix(F[o], mix(118 * gr, 16, dk) + 160 * hq, al), F[o + 1] = mix(F[o + 1], mix(106 * gr, 11, dk) + 60 * hq, al), F[o + 2] = mix(F[o + 2], mix(104 * gr, 10, dk) + 14 * hq, al);\n  }\n  // Flame licking out of the chimney's mouth.\n  const fh = 2 + 7 * S.flare;\n  glow(S.CX, TOP, 6, [110, 40, 8], S.flare * 0.8);\n  for (let j = 0, u = 0; j \u003c fh; u = ++j / fh)\n    for (let e = -1; e \u003c 2; e++) (u \u003c 0.5 || !e) && put(S.CX + e + wind * j * 0.6 + sin(t * 11 + j) * 0.6 * u, TOP - 1 - j, lc(Te[n] - 0.05 - 0.45 * u - 0.2 * abs(e)), e ? 0.6 : 1 - 0.5 * u);\n  for (const p of S.sparks) put(p.x, p.y, lc(0.35 + 0.75 * (p.life / p.L)), min(1, p.life * 2));\n  for (const m of S.motes) put(m.x, m.y, m.e ? [230, 110, 30] : [80, 78, 84], m.e ? 0.5 + 0.4 * sin(t * 5 + m.ph) : 0.6);\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Firing","min":-1,"max":1,"about":"The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the potter stokes every few seconds; 0.2 is ten times slower."},{"name":"Chambers","min":3,"max":6,"about":"Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves."},{"name":"Draft","min":-1,"max":1,"about":"Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame."}],"start":[0,2,3,0.06],"measures":{"motion":0.141,"detail":0.0581,"edges":0.3934,"complexity":1.5788,"coverage":0.9717,"colour":0.2311,"drift":0.0397},"knobResponse":[0.0974,0.0413,0.0659,0.0443]},{"slug":"one-bit","title":"One Bit","family":"pixel","round":17,"note":"달밤 바닷가 벼랑에 선 등대를 두 색과 Bayer 순서 디더링만으로 그린 1비트 화면이에요. 빛줄기가 돌고 구름이 달 앞을 지나고 안개 둑이 바다 위에서 오르내려도 한 프레임에 뒤집히는 픽셀은 열 개 안팎이에요. K1 이 앰버 단말기, 게임보이, 매킨토시, 전자잉크, 플레이데이트의 두 색을 골라요.","idea":"A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","layer":{"id":"layer-one-bit","type":"code","name":"one-bit","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver."},{"name":"Time","min":0.2,"max":3,"about":"How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still."},{"name":"Fog","min":0,"max":1,"about":"How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear."},{"name":"Wind","min":0,"max":1,"about":"At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff."}],"start":[0,2,0,0.06],"measures":{"motion":0.0337,"detail":0.3203,"edges":1,"complexity":0.0918,"coverage":0.242,"colour":0.3801,"drift":0.0416},"knobResponse":[0.2143,0.057,0.0812,0.0548]},{"slug":"op-stripes","title":"Op Stripes","family":"wave","round":1,"note":"브리짓 라일리 식의 두 색 가로줄이에요. 밑으로 지나가는 넓은 부풂 둘이 줄 간격을 벌려서 평평한 패널이 부푸는 것처럼 보여요.","idea":"Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-op-stripes","type":"code","name":"op-stripes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown."},{"name":"Drift","min":0.1,"max":6,"about":"How fast the bulges travel under the stripes and the bend rolls along them."},{"name":"Stripes","min":14,"max":26,"about":"Stripe pairs from top to bottom where nothing is swelling."},{"name":"Swell","min":0,"max":1,"about":"How far the stripes open over a bulge, from a soft swell to a wide flat lens."}],"start":[0,2,14,0.06],"measures":{"motion":0.0622,"detail":0.0792,"edges":1,"complexity":0.0654,"coverage":1,"colour":0.6118,"drift":0.0499},"knobResponse":[0.4596,0.1655,0.1894,0.1993]},{"slug":"origami","title":"Origami","family":"paper","round":26,"note":"어두운 호두나무 탁자의 램프 아래에서 청록 종이 한 장이 아홉 단계로 한 주름씩 접혀 종이학이 돼요. 학은 날개를 한 번 친 뒤 다시 펼쳐지고, 펼친 종이에는 산접기와 골접기의 주름 무늬가 남아요. K1 이 세이가이하 무늬 종이와 금박 같은 종이를 고르고, 누르면 학이 바로 펼쳐져요.","idea":"A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.","buttons":"K1 tap opens the crane flat now, or lays the next sheet if it is already open.","code":"// ===== Patternflow pattern =====\n// Title:   Origami\n// Family:  paper\n// Idea:    A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the orizuru, the paper crane folded from the bird base\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1\n//\n// Knob 1: Paper. Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which.\n// Knob 2: Speed. How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Sheets. How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3.\n// Knob 4: Lamp. Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way.\n// Buttons: K1 tap opens the crane flat now, or lays the next sheet if it is already open.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, hypot, log, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// The sheet is a diamond with corners (0, ±1) and (±1, 0), its crease-pattern\n// coordinates. K is where the petal fold's hinge crosses the square base and Q\n// is half the width of a leg once it is thinned.\nconst K = 1 - Math.SQRT1_2;\nconst Q = Math.SQRT1_2 * Math.tan(PI / 16);\n\n// An affine map [a, b, c, d, e, f]: x' = a x + b y + e, y' = c x + d y + f.\nconst mul = (M, A) => [\n  M[0] * A[0] + M[1] * A[2], M[0] * A[1] + M[1] * A[3],\n  M[2] * A[0] + M[3] * A[2], M[2] * A[1] + M[3] * A[3],\n  M[0] * A[4] + M[1] * A[5] + M[4], M[2] * A[4] + M[3] * A[5] + M[5],\n];\nconst tx = (A, c, j) => A[0] * c[j] + A[1] * c[j + 1] + A[4];\nconst ty = (A, c, j) => A[2] * c[j] + A[3] * c[j + 1] + A[5];\n// A flap turned by theta about the hinge through (hx, hy) with unit normal\n// (nx, ny) toward the flap, as seen from straight above: k = cos(theta) - 1.\n// At k = -2 the flap lies flat on the other side, mirrored.\nfunction hingeM(h, k) {\n  const [hx, hy, nx, ny] = h;\n  const hn = hx * nx + hy * ny;\n  return [1 + k * nx * nx, k * nx * ny, k * nx * ny, 1 + k * ny * ny, -k * hn * nx, -k * hn * ny];\n}\n\n// The crane. Each step is one or more folds: a crease line, a point on the\n// side that moves, which facets go (by the eighth of the sheet they came from\n// or where they lie now), and +1 for a valley fold that lands on top or -1\n// for one that goes behind.\nconst ALL = () => true;\nconst sec = (...s) => (f) => s.includes(f.sec);\nconst low = (...s) => (f, x, y) => y > K && s.includes(f.sec);\nconst legL = (f, x, y) => x \u003c 0 && y > K;\nconst legR = (f, x, y) => x > 0 && y > K;\n// The legs turn up about a line through (0, YP) along NL, so neck and tail\n// rise at 40 degrees.\nconst YP = 0.34;\nconst NL = [-0.906, 0.423];\nconst CRANE = [\n  // In half, corner to corner.\n  [{ l: [-1, 0, 1, 0], s: [0, -1], m: 1, sel: ALL }],\n  // Turned so the fold lies along the top.\n  [],\n  // The side corners down to the bottom one: the square base.\n  [{ l: [0, 0, -0.5, 0.5], s: [-1, 0], m: 1, sel: ALL }, { l: [0, 0, 0.5, 0.5], s: [1, 0], m: 1, sel: ALL }],\n  // Kite folds, the front layer to the front and the back one behind.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: 1, sel: sec(3) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: 1, sel: sec(0) },\n    { l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: sec(2) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: sec(1) }],\n  // The petal folds: front and back layers lift up past the top.\n  [{ l: [-1, K, 1, K], s: [0, 1], m: 1, sel: sec(0, 3) }, { l: [-1, K, 1, K], s: [0, 1], m: -1, sel: sec(1, 2) }],\n  // The sides of the middle layers tuck in: the bird base.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: low(4, 5) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: low(6, 7) }],\n  // The legs thinned.\n  [{ l: [0, 1, -Q, K], s: [-K, K], m: -1, sel: legL }, { l: [0, 1, Q, K], s: [K, K], m: -1, sel: legR }],\n  // The legs reverse-folded up into neck and tail.\n  [{ l: [0, YP, NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legL }, { l: [0, YP, -NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legR }],\n  // The tip of the neck reverse-folded down into the head.\n  [{ l: [-0.515, -0.013, -0.374, 0.004], s: [-0.506, -0.084], m: -1, sel: (f, x) => f.H[8] && x \u003c 0 }],\n];\n// Seconds per step at Speed 2, and how the sheet lies on the table at each\n// state: turned 45 degrees it is a square on the panel.\nconst DUR = [1.1, 0.7, 1.1, 0.8, 1.1, 0.8, 0.7, 1.0, 0.6];\nconst PHI = [PI / 4, PI / 4, 0, 0, 0, 0, 0, 0, 0, 0];\n// The finished crane flaps its front wing about the line it was lifted on.\nconst FLAPH = [0, K, 0, -1, 1];\n\n// A crease as a point on it and its unit normal toward the side that moves.\nfunction lineOf(mv) {\n  const [x1, y1, x2, y2] = mv.l;\n  const l = hypot(x2 - x1, y2 - y1) * ((mv.s[0] - x1) * (y1 - y2) + (mv.s[1] - y1) * (x2 - x1) \u003c 0 ? -1 : 1);\n  return [x1, y1, (y1 - y2) / l, (x2 - x1) / l];\n}\n\n// Cut a convex polygon by the sign of d, keeping the side s.\nfunction clip(cp, d, s) {\n  const out = [];\n  d.forEach((v, i) => {\n    const j = (i + 1) % d.length;\n    const a = v * s;\n    const b = d[j] * s;\n    const t = a / (a - b);\n    if (a >= 0) out.push(cp[2 * i], cp[2 * i + 1]);\n    if (a * b \u003c 0) out.push(cp[2 * i] + t * (cp[2 * j] - cp[2 * i]), cp[2 * i + 1] + t * (cp[2 * j + 1] - cp[2 * i + 1]));\n  });\n  return out;\n}\n\n// Fold the sheet through every step once, cutting facets along each crease\n// they cross. Each facet keeps where it lies, which way up and in which layer\n// at every state, so any moment of the folding and unfolding is a lookup.\nfunction build(steps) {\n  const C = [[1, 0], [0.5, 0.5], [0, 1], [-0.5, 0.5], [-1, 0], [-0.5, -0.5], [0, -1], [0.5, -0.5]];\n  const F = C.map((c, s) => ({ cp: [0, 0, c[0], c[1], ...C[(s + 1) % 8]], sec: s, T: [[1, 0, 0, 1, 0, 0]], L: [0], H: [null] }));\n  const n = steps.length;\n  for (let k = 1; k \u003c= n; k++) {\n    const top = max(...F.map((f) => f.L[k - 1]));\n    const bot = min(...F.map((f) => f.L[k - 1]));\n    for (const f of F) (f.T[k] = f.T[k - 1]), (f.L[k] = f.L[k - 1]), (f.H[k] = null);\n    for (const mv of steps[k - 1]) {\n      const h = lineOf(mv);\n      const [px, py, nx, ny] = h;\n      const moved = [];\n      for (const f of F.slice()) {\n        if (f.H[k]) continue;\n        const A = f.T[k - 1];\n        const cp = f.cp;\n        const m = cp.length / 2;\n        let cx = 0;\n        let cy = 0;\n        const d = [];\n        for (let j = 0; j \u003c 2 * m; j += 2) {\n          const x = tx(A, cp, j);\n          const y = ty(A, cp, j);\n          (cx += x / m), (cy += y / m);\n          const dd = (x - px) * nx + (y - py) * ny;\n          d.push(abs(dd) \u003c 1e-9 ? 0 : dd);\n        }\n        if (!mv.sel(f, cx, cy) || max(...d) \u003c 1e-6) continue;\n        let g = f;\n        if (min(...d) \u003c -1e-6) {\n          g = { cp: clip(cp, d, 1), sec: f.sec, T: f.T.slice(), L: f.L.slice(), H: f.H.slice() };\n          f.cp = clip(cp, d, -1);\n          F.push(g);\n        }\n        moved.push(g);\n      }\n      let lo = 1e9;\n      let hi = -1e9;\n      for (const g of moved) (lo = min(lo, g.L[k - 1])), (hi = max(hi, g.L[k - 1]));\n      for (const g of moved) {\n        g.T[k] = mul(hingeM(h, -2), g.T[k - 1]);\n        g.H[k] = [px, py, nx, ny, mv.m];\n        g.L[k] = mv.m > 0 ? top + 1 + hi - g.L[k - 1] : bot - 1 - (g.L[k - 1] - lo);\n      }\n    }\n  }\n  // Facets that lie together at a state share a group there: a crease shows\n  // between two facets that lie together now but were parted at the deepest\n  // fold.\n  // And the extent of each state, turned as it lies, for the camera.\n  const nf = F.length;\n  const gid = new Int32Array(nf * (n + 1));\n  const det = new Int8Array(nf * (n + 1));\n  const box = [];\n  for (let k = 0; k \u003c= n; k++) {\n    const seen = new Map();\n    const c = cos(PHI[k]);\n    const s = sin(PHI[k]);\n    const b = [1e9, -1e9, 1e9, -1e9];\n    F.forEach((f, i) => {\n      const A = f.T[k];\n      const key = A.map((v) => round(v * 1e4)).join();\n      if (!seen.has(key)) seen.set(key, seen.size);\n      gid[i * (n + 1) + k] = seen.get(key);\n      det[i * (n + 1) + k] = A[0] * A[3] - A[1] * A[2] > 0 ? 1 : -1;\n      for (let j = 0; j \u003c f.cp.length; j += 2) {\n        const x = tx(A, f.cp, j);\n        const y = ty(A, f.cp, j);\n        const u = x * c - y * s;\n        const v = x * s + y * c;\n        (b[0] = min(b[0], u)), (b[1] = max(b[1], u)), (b[2] = min(b[2], v)), (b[3] = max(b[3], v));\n      }\n    });\n    const u = (b[0] + b[1]) / 2;\n    const v = (b[2] + b[3]) / 2;\n    box.push([u * c + v * s, -u * s + v * c, b[1] - b[0], b[3] - b[2]]);\n  }\n  const tilt = F32(nf * 2);\n  for (let i = 0; i \u003c nf * 2; i++) tilt[i] = Math.random() - 0.5;\n  return { F, n, gid, det, box, tilt };\n}\n\n// Papers: colour, second colour, print. 0 plain kami, 1 seigaiha waves,\n// 2 metal foil, 3 kanoko dots, 4 ichimatsu checks.\nconst PAPERS = [\n  [[0.16, 0.72, 0.8], null, 0],\n  [[0.13, 0.2, 0.58], [0.78, 0.86, 0.96], 1],\n  [[1, 0.78, 0.3], null, 2],\n  [[0.96, 0.46, 0.6], [1, 0.95, 0.96], 3],\n  [[0.98, 0.78, 0.12], null, 0],\n  [[0.12, 0.46, 0.26], [0.94, 0.88, 0.7], 4],\n  [[0.74, 0.78, 0.84], null, 2],\n  [[0.9, 0.16, 0.12], null, 0],\n];\nconst WHITE = [0.95, 0.93, 0.87];\n\nfunction print(kind, s, t) {\n  if (kind === 1) {\n    // Rows of scales two wide, each row half a scale lower and covering the one above.\n    const X = s * 3;\n    const Y = t * 3;\n    const j = ceil(2 * Y);\n    for (let jj = j + 1; jj >= j; jj--) {\n      const ox = jj & 1;\n      const dx = X - ox - 2 * round((X - ox) / 2);\n      const dy = Y - jj / 2;\n      const r = sqrt(dx * dx + dy * dy);\n      if (r \u003c 1 || jj === j) return (r * 3) % 1 \u003c 0.4 ? 1 : 0;\n    }\n  }\n  if (kind === 3) {\n    const X = s * 5;\n    const Y = t * 5;\n    const ox = floor(Y) & 1 ? 0.5 : 0;\n    const dx = X + ox - floor(X + ox) - 0.5;\n    const dy = Y - floor(Y) - 0.5;\n    return dx * dx + dy * dy \u003c 0.06 ? 1 : 0;\n  }\n  if (kind === 4) return (floor(s * 4 + 4) + floor(t * 4 + 4)) & 1;\n  return 0;\n}\n\n// The order a sheet goes through.\nconst WAIT = 0, IN = 1, REST = 2, FOLD = 3, HOLD = 4, SIT = 5, UNFOLD = 6, CREASE = 7;\n\nconst newSheet = (sl, first) =>\n  Object.assign(sl, { old: first ? null : { seq: sl.seq, kmax: sl.kmax }, seq: sl.seq + 1, ph: IN, pt: 0, k: 0, u: 1, kmax: 0, rush: false });\nconst slot = (i) => ({ i, ph: WAIT, pt: -2.4 * i, k: 0, u: 1, kmax: 0, seq: -1, old: null, rush: false });\nconst F32 = (n) => new Float32Array(n);\n\nexport function setup(params) {\n  const grain = F32(N);\n  for (let y = 0; y \u003c H; y++) {\n    let w = Math.random();\n    for (let x = 0; x \u003c W; x++) {\n      w += 0.25 * (Math.random() - 0.5);\n      grain[y * W + x] = 0.75 + 0.2 * sin(y * 0.9 + 3 * sin(x * 0.05 + y * 0.02)) + 0.1 * w;\n    }\n  }\n  params.s = { M: build(CRANE), slots: [slot(0)], n: 1, base: 0, rate: 1, lamp: 0.06, lampKey: null, grain, bg: F32(N * 3) };\n  for (const k of [\"LX\", \"LY\", \"LZ\", \"LI\", \"HZ\"]) params.s[k] = F32(N);\n}\n\nfunction stepSlot(sl, h, M) {\n  if (sl.rush && (sl.ph === UNFOLD || sl.ph === CREASE)) h *= 4;\n  sl.pt += h;\n  const ph = sl.ph;\n  if (ph === WAIT && sl.pt >= 0) newSheet(sl, true);\n  else if (ph === IN && sl.pt >= 1.2) Object.assign(sl, { ph: REST, pt: 0, old: null });\n  else if (ph === REST && sl.pt >= 1) Object.assign(sl, { ph: FOLD, k: 1, u: 0 });\n  else if (ph === FOLD) {\n    sl.u = min(1, sl.u + h / DUR[sl.k - 1]);\n    if (sl.u >= 1) Object.assign(sl, { kmax: max(sl.kmax, sl.k), ph: HOLD, pt: 0 });\n  } else if (ph === HOLD && sl.pt >= 0.25) {\n    if (sl.k \u003c M.n) Object.assign(sl, { k: sl.k + 1, u: 0, ph: FOLD });\n    else Object.assign(sl, { ph: SIT, pt: 0 });\n  } else if (ph === SIT && sl.pt >= 3) sl.ph = UNFOLD;\n  else if (ph === UNFOLD && (sl.u -= h / 0.45) \u003c= 0) {\n    if (sl.k > 1) (sl.k--), (sl.u += 1);\n    else Object.assign(sl, { k: 0, u: 1, ph: CREASE, pt: 0 });\n  } else if (ph === CREASE && (sl.pt >= 2.5 || sl.rush)) newSheet(sl, false);\n}\n\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.base = floor(cl(k[0], 0, 1) * (PAPERS.length - 0.01));\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.lamp = cl(k[3], -1, 1);\n  const n = cl(round(k[2]), 1, 3);\n  if (n !== S.n) {\n    S.n = n;\n    while (S.slots.length \u003c n) S.slots.push(slot(S.slots.length));\n    S.slots.length = n;\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sl of S.slots) {\n      if (sl.ph === FOLD || sl.ph === HOLD || sl.ph === SIT) {\n        if (sl.ph !== FOLD) sl.u = 1;\n        sl.kmax = max(sl.kmax, sl.k);\n        sl.ph = UNFOLD;\n      } else if (sl.ph !== WAIT) {\n        if (sl.ph === UNFOLD || sl.ph === CREASE) sl.rush = true;\n        else newSheet(sl, false);\n      }\n    }\n  for (const sl of S.slots) stepSlot(sl, dt * S.rate, S.M);\n}\n\n// The lamp: a bulb LH above the table at (lx, LY0). Each LED keeps the unit\n// vector to it, the half vector's height for the shine on foil, and how much\n// light reaches it. The table is dark walnut, kept below 24 of 255; on it lie\n// the pack of paper, the next sheet on top, and a bone folder.\nconst LH = 80;\nconst LY0 = 34;\nconst PC = cos(-0.2);\nconst PS = sin(-0.2);\nfunction lampField(S, next) {\n  const lx = 31.5 + 44 * S.lamp;\n  const { LX, LY, LZ, LI, HZ, bg, grain } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = lx - x - 0.5;\n      const dy = LY0 - y - 0.5;\n      const r2 = dx * dx + dy * dy;\n      const l = sqrt(r2 + LH * LH);\n      LX[p] = dx / l;\n      LY[p] = dy / l;\n      LZ[p] = LH / l;\n      LI[p] = (LH * LH) / (LH * LH + 0.4 * r2);\n      HZ[p] = (LZ[p] + 1) / sqrt(LX[p] * LX[p] + LY[p] * LY[p] + (LZ[p] + 1) * (LZ[p] + 1));\n      const lit = LI[p] * (0.22 + 0.9 * LZ[p]);\n      const w = min(21, 255 * 0.085 * (0.25 + 0.75 * LI[p]) * grain[p]);\n      let c = [w, w * 0.56, w * 0.32];\n      // The pack: four sheets a little askew, each showing an edge of its colour.\n      for (let j = 0; j \u003c 4; j++) {\n        const X = x + 0.5 + 1 - 0.9 * j;\n        const Y = y + 0.5 - 1 - 1.3 * j;\n        const u = (X * PC + Y * PS) / 13;\n        const v = (Y * PC - X * PS) / 13;\n        if (abs(u) \u003c 1 && abs(v) \u003c 1) {\n          const P = PAPERS[(next + j) % PAPERS.length];\n          const col = P[2] !== 2 && print(P[2], u, v) ? P[1] : P[0];\n          const e = (abs(u) > 0.92 || abs(v) > 0.92 ? 0.7 : 1) * (j ? 0.8 : 1) * (P[2] === 2 ? 0.75 : 1);\n          c = col.map((v) => 255 * v * lit * e);\n          break;\n        }\n      }\n      // The bone folder, rounded at both ends, its back catching the lamp.\n      const ax = x + 0.5 - 47;\n      const ay = y + 0.5 - 118;\n      const t = cl((ax * 14 - ay * 15) / 421, 0, 1);\n      const d = hypot(ax - 14 * t, ay + 15 * t);\n      if (d \u003c 1.7) c = [0.8, 0.74, 0.62].map((v) => 255 * v * lit * (0.75 + 0.35 * (1 - d / 1.7)));\n      bg[p * 3] = c[0];\n      bg[p * 3 + 1] = c[1];\n      bg[p * 3 + 2] = c[2];\n    }\n  S.lp = [lx, LY0, LH];\n}\n\n// Per frame: every facet on the table, as drawn.\n// RA maps it from the crease pattern to the panel, RN is its lit normal, RK\n// its draw order; RS the side up, RP the paper, RQ the sheet; RG and RX its\n// group now and at the deepest fold, RU and RL its side and layer there.\nconst MAXR = 1600;\nconst [RA, RN, RK, RL, RM] = [6, 3, 1, 1, 1].map((k) => F32(MAXR * k));\nconst [RS, RU] = [new Int8Array(MAXR), new Int8Array(MAXR)];\nconst [RP, RQ, RG, RX] = [0, 0, 0, 0].map(() => new Int32Array(MAXR));\nconst ORD = [];\nconst RCP = [];\nconst ID = new Int16Array(N);\nconst SHK = F32(N);\nconst VX = F32(64);\nconst VY = F32(64);\nlet nr = 0;\n\n// Fill a convex polygon with v; mode 0 writes facet ids, mode 1 raises the\n// shadow key.\nfunction fill(cnt, v, mode) {\n  let ya = 1e9;\n  let yb = -1e9;\n  for (let i = 0; i \u003c cnt; i++) (ya = min(ya, VY[i])), (yb = max(yb, VY[i]));\n  const y0 = max(0, ceil(ya - 0.5));\n  const y1 = min(H - 1, floor(yb - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 1e9;\n    let xr = -1e9;\n    for (let i = 0; i \u003c cnt; i++) {\n      const j = i + 1 \u003c cnt ? i + 1 : 0;\n      const ay = VY[i];\n      const by = VY[j];\n      if ((ay \u003c= py && by > py) || (by \u003c= py && ay > py)) {\n        const x = VX[i] + ((py - ay) / (by - ay)) * (VX[j] - VX[i]);\n        (xl = min(xl, x)), (xr = max(xr, x));\n      }\n    }\n    const x0 = max(0, ceil(xl - 0.5));\n    const x1 = min(W - 1, floor(xr - 0.5));\n    const row = y * W;\n    if (mode === 0) for (let x = x0; x \u003c= x1; x++) ID[row + x] = v;\n    else for (let x = x0; x \u003c= x1; x++) if (SHK[row + x] \u003c v) SHK[row + x] = v;\n  }\n}\n\n// The camera for state j of a sheet in its slot: turned PHI[j], scaled to fit.\nfunction viewOf(M, j, fw, fh, zmax) {\n  const b = M.box[j];\n  return [PHI[j], log(min(fw / b[2], fh / b[3], zmax)), b[0], b[1]];\n}\n\n// Put one sheet on the table: model M at step k, progress u, in slot\n// region (cy, fw, fh), paper index pi. dx and dphi slide a new sheet in.\nfunction placeSheet(S, M, k, u, flap, kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, keyBase, mem, qid) {\n  const n1 = M.n + 1;\n  const go = k > 0 && u > 0 && u \u003c 1;\n  const jb = k === 0 ? 0 : u >= 1 ? k : k - 1;\n  const a = viewOf(M, k > 0 ? k - 1 : 0, fw, fh, zmax);\n  const b = viewOf(M, k, fw, fh, zmax);\n  const w = k > 0 ? ease(u) : 1;\n  const phi = mix(a[0], b[0], w) + dphi;\n  const z = exp(mix(a[1], b[1], w));\n  const ccx = mix(a[2], b[2], w);\n  const ccy = mix(a[3], b[3], w);\n  const c = cos(phi) * z;\n  const s = sin(phi) * z;\n  const V = [c, -s, s, c, 31.5 + dx - (c * ccx - s * ccy), cyp + dy - (s * ccx + c * ccy)];\n  const [lx, ly, lh] = S.lp;\n  M.F.forEach((f, i) => {\n    if (nr >= MAXR) return;\n    const r = nr++;\n    // The hinge this facet turns on now, if any: the fold under way, or the\n    // finished crane's wing beat.\n    let hg = null;\n    let th = 0;\n    if (go && f.H[k]) (hg = f.H[k]), (th = PI * ease(u));\n    else if (flap > 0 && (f.sec === 0 || f.sec === 3)) (hg = FLAPH), (th = flap);\n    const A0 = f.T[jb];\n    const ct = cos(th);\n    const st = sin(th);\n    const A = mul(V, hg ? mul(hingeM(hg, ct - 1), A0) : A0);\n    RA.set(A, r * 6);\n    RCP[r] = f.cp;\n    let side = M.det[i * n1 + jb];\n    let nx = 0;\n    let ny = 0;\n    let nz = 1;\n    let key = f.L[jb];\n    if (hg) {\n      const m = hg[4];\n      // The hinge normal as it lies on the panel.\n      const hx = hg[2] * cos(phi) - hg[3] * sin(phi);\n      const hy = hg[2] * sin(phi) + hg[3] * cos(phi);\n      nx = -m * st * hx;\n      ny = -m * st * hy;\n      nz = ct;\n      if (ct \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz), (side = -side);\n      key = (m > 0 ? 1e6 : -1e6) + (ct >= 0 ? f.L[jb] : go ? f.L[k] : -f.L[jb]);\n      // A lifted flap throws its shadow away from the lamp.\n      if (m > 0 && st > 0.02) {\n        const cp = f.cp;\n        const cnt = cp.length / 2;\n        for (let j = 0; j \u003c cnt; j++) {\n          const hz = (((tx(A0, cp, 2 * j) - hg[0]) * hg[2] + (ty(A0, cp, 2 * j) - hg[1]) * hg[3]) * st * z) / lh;\n          const px = tx(A, cp, 2 * j);\n          const py = ty(A, cp, 2 * j);\n          VX[j] = px + hz * (px - lx);\n          VY[j] = py + hz * (py - ly);\n        }\n        fill(cnt, keyBase + key, 1);\n      }\n    }\n    // Paper never lies quite flat: each layer tips a little its own way, and a\n    // sheet opened out again keeps a tilt in every facet between its creases.\n    const g = M.gid[i * n1 + jb];\n    nx += 0.06 * M.tilt[2 * g] + 0.12 * mem * M.tilt[2 * i + 1];\n    ny += 0.06 * M.tilt[2 * g + 1] + 0.12 * mem * M.tilt[2 * i];\n    const nl = hypot(nx, ny, nz);\n    RN[r * 3] = nx / nl;\n    RN[r * 3 + 1] = ny / nl;\n    RN[r * 3 + 2] = nz / nl;\n    RS[r] = side;\n    RK[r] = keyBase + key;\n    RP[r] = pi;\n    RG[r] = g;\n    RX[r] = M.gid[i * n1 + kmax];\n    RU[r] = M.det[i * n1 + kmax];\n    RL[r] = f.L[kmax];\n    RQ[r] = qid;\n    RM[r] = mem;\n    ORD.push(r);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const next = (S.base + S.slots[0].seq + 1) % PAPERS.length;\n  const lk = S.lamp + 10 * next;\n  if (S.lampKey !== lk) (S.lampKey = lk), lampField(S, next);\n  const { M, LX, LY, LZ, LI, HZ, bg } = S;\n  nr = 0;\n  ORD.length = 0;\n  SHK.fill(-1e12);\n  const n = S.slots.length;\n  const sh = H / n;\n  const zmax = [74, 50, 34][n - 1];\n  const fw = n === 1 ? 60 : n === 2 ? 56 : 46;\n  const fh = sh - (n === 1 ? 12 : 8);\n  let q = 0;\n  for (const sl of S.slots) {\n    if (sl.ph === WAIT) continue;\n    const cyp = sl.i * sh + sh / 2;\n    const pi = (S.base + 3 * sl.i + sl.seq) % PAPERS.length;\n    if (sl.old) placeSheet(S, M, 0, 1, 0, sl.old.kmax, (S.base + 3 * sl.i + sl.old.seq) % PAPERS.length, cyp, fw, fh, zmax, 0, 0, 0, -1e8, 1, q++);\n    let dx = 0;\n    let dy = 0;\n    let dphi = 0;\n    if (sl.ph === IN) {\n      // Slid off the pack in the corner.\n      const e = 1 - ease(sl.pt / 1.2);\n      dx = -62 * e;\n      dy = (8 - cyp) * e;\n      dphi = -0.2 * e;\n    }\n    let flap = 0;\n    if (sl.ph === SIT) {\n      // The crane beats its wing once.\n      const t = (sl.pt - 0.6) / 1.6;\n      if (t > 0 && t \u003c 1) flap = 0.78 * PI * sin(PI * t) ** 2;\n    }\n    const mem = sl.ph === UNFOLD || sl.ph === CREASE ? 1 : 0;\n    placeSheet(S, M, sl.k, sl.u, flap, sl.kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, 0, mem, q++);\n  }\n  ORD.sort((a, b) => RK[a] - RK[b]);\n  ID.fill(-1);\n  for (const r of ORD) {\n    const cp = RCP[r];\n    const A = RA.subarray(r * 6, r * 6 + 6);\n    for (let j = 0; j \u003c cp.length; j += 2) (VX[j / 2] = tx(A, cp, j)), (VY[j / 2] = ty(A, cp, j));\n    fill(cp.length / 2, r, 0);\n  }\n  const lx = S.lp[0];\n  const sx = lx \u003c 31.5 ? -1 : 1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const r = ID[p];\n      if (r \u003c 0) {\n        const f = SHK[p] > -1e11 ? 0.55 : 1;\n        display.setPixel(x, y, bg[p * 3] * f, bg[p * 3 + 1] * f, bg[p * 3 + 2] * f);\n      } else {\n        // The print, found back in the crease pattern: paper square s, t in -1..1.\n        const o = r * 6;\n        const [a, b, c, d] = [RA[o], RA[o + 1], RA[o + 2], RA[o + 3]];\n        const det = a * d - b * c;\n        const P = PAPERS[RP[r]];\n        let col = P[0];\n        let kind = P[2];\n        if (RS[r] \u003c 0) (col = WHITE), (kind = -1);\n        else if (P[1] && abs(det) > 1e-3) {\n          const X = x + 0.5 - RA[o + 4];\n          const Y = y + 0.5 - RA[o + 5];\n          const cu = (d * X - b * Y) / det;\n          const cv = (a * Y - c * X) / det;\n          if (print(kind, cu + cv, cv - cu)) col = P[1];\n        }\n        const nz = RN[r * 3 + 2];\n        const I = LI[p];\n        const hz = max(0, nz * HZ[p]);\n        // Kami is matte with a little sheen; foil is darker but throws the lamp back.\n        const fo = kind === 2;\n        const lit = I * (0.22 + 0.9 * max(0, RN[r * 3] * LX[p] + RN[r * 3 + 1] * LY[p] + nz * LZ[p])) * (fo ? 0.8 : 1);\n        const sp = I * (fo ? 0.25 + 0.9 * hz ** 12 : 0.06 * hz ** 8);\n        // Shade under a lifted flap, and along the edge of a layer above.\n        const k = RK[r];\n        let f = SHK[p] > k ? 0.55 : 1;\n        const s = x - sx >= 0 && x - sx \u003c W && y > 0 ? ID[p - W - sx] : -1;\n        if (s >= 0 && RQ[s] === RQ[r] && RK[s] > k + 0.5 && RG[s] !== RG[r]) f *= 0.66;\n        // Creases left from the folding.\n        if (RM[r] > 0) {\n          for (const s of [x + 1 \u003c W ? ID[p + 1] : -1, y + 1 \u003c H ? ID[p + W] : -1])\n            if (s >= 0 && s !== r && RQ[s] === RQ[r] && RG[s] === RG[r] && RX[s] !== RX[r]) {\n              const up = RL[s] > RL[r] ? s : r;\n              f *= RU[up] * RS[r] > 0 ? 1.22 : 0.72;\n              break;\n            }\n        }\n        const m = 255 * f * (fo ? lit + sp : lit);\n        const e = fo ? 0 : 255 * f * sp;\n        display.setPixel(x, y, min(255, col[0] * m + e), min(255, col[1] * m + e), min(255, col[2] * m + e));\n      }\n    }\n}\n","layer":{"id":"layer-origami","type":"code","name":"origami","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Origami\n// Family:  paper\n// Idea:    A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the orizuru, the paper crane folded from the bird base\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1\n//\n// Knob 1: Paper. Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which.\n// Knob 2: Speed. How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Sheets. How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3.\n// Knob 4: Lamp. Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way.\n// Buttons: K1 tap opens the crane flat now, or lays the next sheet if it is already open.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, hypot, log, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// The sheet is a diamond with corners (0, ±1) and (±1, 0), its crease-pattern\n// coordinates. K is where the petal fold's hinge crosses the square base and Q\n// is half the width of a leg once it is thinned.\nconst K = 1 - Math.SQRT1_2;\nconst Q = Math.SQRT1_2 * Math.tan(PI / 16);\n\n// An affine map [a, b, c, d, e, f]: x' = a x + b y + e, y' = c x + d y + f.\nconst mul = (M, A) => [\n  M[0] * A[0] + M[1] * A[2], M[0] * A[1] + M[1] * A[3],\n  M[2] * A[0] + M[3] * A[2], M[2] * A[1] + M[3] * A[3],\n  M[0] * A[4] + M[1] * A[5] + M[4], M[2] * A[4] + M[3] * A[5] + M[5],\n];\nconst tx = (A, c, j) => A[0] * c[j] + A[1] * c[j + 1] + A[4];\nconst ty = (A, c, j) => A[2] * c[j] + A[3] * c[j + 1] + A[5];\n// A flap turned by theta about the hinge through (hx, hy) with unit normal\n// (nx, ny) toward the flap, as seen from straight above: k = cos(theta) - 1.\n// At k = -2 the flap lies flat on the other side, mirrored.\nfunction hingeM(h, k) {\n  const [hx, hy, nx, ny] = h;\n  const hn = hx * nx + hy * ny;\n  return [1 + k * nx * nx, k * nx * ny, k * nx * ny, 1 + k * ny * ny, -k * hn * nx, -k * hn * ny];\n}\n\n// The crane. Each step is one or more folds: a crease line, a point on the\n// side that moves, which facets go (by the eighth of the sheet they came from\n// or where they lie now), and +1 for a valley fold that lands on top or -1\n// for one that goes behind.\nconst ALL = () => true;\nconst sec = (...s) => (f) => s.includes(f.sec);\nconst low = (...s) => (f, x, y) => y > K && s.includes(f.sec);\nconst legL = (f, x, y) => x \u003c 0 && y > K;\nconst legR = (f, x, y) => x > 0 && y > K;\n// The legs turn up about a line through (0, YP) along NL, so neck and tail\n// rise at 40 degrees.\nconst YP = 0.34;\nconst NL = [-0.906, 0.423];\nconst CRANE = [\n  // In half, corner to corner.\n  [{ l: [-1, 0, 1, 0], s: [0, -1], m: 1, sel: ALL }],\n  // Turned so the fold lies along the top.\n  [],\n  // The side corners down to the bottom one: the square base.\n  [{ l: [0, 0, -0.5, 0.5], s: [-1, 0], m: 1, sel: ALL }, { l: [0, 0, 0.5, 0.5], s: [1, 0], m: 1, sel: ALL }],\n  // Kite folds, the front layer to the front and the back one behind.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: 1, sel: sec(3) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: 1, sel: sec(0) },\n    { l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: sec(2) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: sec(1) }],\n  // The petal folds: front and back layers lift up past the top.\n  [{ l: [-1, K, 1, K], s: [0, 1], m: 1, sel: sec(0, 3) }, { l: [-1, K, 1, K], s: [0, 1], m: -1, sel: sec(1, 2) }],\n  // The sides of the middle layers tuck in: the bird base.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: low(4, 5) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: low(6, 7) }],\n  // The legs thinned.\n  [{ l: [0, 1, -Q, K], s: [-K, K], m: -1, sel: legL }, { l: [0, 1, Q, K], s: [K, K], m: -1, sel: legR }],\n  // The legs reverse-folded up into neck and tail.\n  [{ l: [0, YP, NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legL }, { l: [0, YP, -NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legR }],\n  // The tip of the neck reverse-folded down into the head.\n  [{ l: [-0.515, -0.013, -0.374, 0.004], s: [-0.506, -0.084], m: -1, sel: (f, x) => f.H[8] && x \u003c 0 }],\n];\n// Seconds per step at Speed 2, and how the sheet lies on the table at each\n// state: turned 45 degrees it is a square on the panel.\nconst DUR = [1.1, 0.7, 1.1, 0.8, 1.1, 0.8, 0.7, 1.0, 0.6];\nconst PHI = [PI / 4, PI / 4, 0, 0, 0, 0, 0, 0, 0, 0];\n// The finished crane flaps its front wing about the line it was lifted on.\nconst FLAPH = [0, K, 0, -1, 1];\n\n// A crease as a point on it and its unit normal toward the side that moves.\nfunction lineOf(mv) {\n  const [x1, y1, x2, y2] = mv.l;\n  const l = hypot(x2 - x1, y2 - y1) * ((mv.s[0] - x1) * (y1 - y2) + (mv.s[1] - y1) * (x2 - x1) \u003c 0 ? -1 : 1);\n  return [x1, y1, (y1 - y2) / l, (x2 - x1) / l];\n}\n\n// Cut a convex polygon by the sign of d, keeping the side s.\nfunction clip(cp, d, s) {\n  const out = [];\n  d.forEach((v, i) => {\n    const j = (i + 1) % d.length;\n    const a = v * s;\n    const b = d[j] * s;\n    const t = a / (a - b);\n    if (a >= 0) out.push(cp[2 * i], cp[2 * i + 1]);\n    if (a * b \u003c 0) out.push(cp[2 * i] + t * (cp[2 * j] - cp[2 * i]), cp[2 * i + 1] + t * (cp[2 * j + 1] - cp[2 * i + 1]));\n  });\n  return out;\n}\n\n// Fold the sheet through every step once, cutting facets along each crease\n// they cross. Each facet keeps where it lies, which way up and in which layer\n// at every state, so any moment of the folding and unfolding is a lookup.\nfunction build(steps) {\n  const C = [[1, 0], [0.5, 0.5], [0, 1], [-0.5, 0.5], [-1, 0], [-0.5, -0.5], [0, -1], [0.5, -0.5]];\n  const F = C.map((c, s) => ({ cp: [0, 0, c[0], c[1], ...C[(s + 1) % 8]], sec: s, T: [[1, 0, 0, 1, 0, 0]], L: [0], H: [null] }));\n  const n = steps.length;\n  for (let k = 1; k \u003c= n; k++) {\n    const top = max(...F.map((f) => f.L[k - 1]));\n    const bot = min(...F.map((f) => f.L[k - 1]));\n    for (const f of F) (f.T[k] = f.T[k - 1]), (f.L[k] = f.L[k - 1]), (f.H[k] = null);\n    for (const mv of steps[k - 1]) {\n      const h = lineOf(mv);\n      const [px, py, nx, ny] = h;\n      const moved = [];\n      for (const f of F.slice()) {\n        if (f.H[k]) continue;\n        const A = f.T[k - 1];\n        const cp = f.cp;\n        const m = cp.length / 2;\n        let cx = 0;\n        let cy = 0;\n        const d = [];\n        for (let j = 0; j \u003c 2 * m; j += 2) {\n          const x = tx(A, cp, j);\n          const y = ty(A, cp, j);\n          (cx += x / m), (cy += y / m);\n          const dd = (x - px) * nx + (y - py) * ny;\n          d.push(abs(dd) \u003c 1e-9 ? 0 : dd);\n        }\n        if (!mv.sel(f, cx, cy) || max(...d) \u003c 1e-6) continue;\n        let g = f;\n        if (min(...d) \u003c -1e-6) {\n          g = { cp: clip(cp, d, 1), sec: f.sec, T: f.T.slice(), L: f.L.slice(), H: f.H.slice() };\n          f.cp = clip(cp, d, -1);\n          F.push(g);\n        }\n        moved.push(g);\n      }\n      let lo = 1e9;\n      let hi = -1e9;\n      for (const g of moved) (lo = min(lo, g.L[k - 1])), (hi = max(hi, g.L[k - 1]));\n      for (const g of moved) {\n        g.T[k] = mul(hingeM(h, -2), g.T[k - 1]);\n        g.H[k] = [px, py, nx, ny, mv.m];\n        g.L[k] = mv.m > 0 ? top + 1 + hi - g.L[k - 1] : bot - 1 - (g.L[k - 1] - lo);\n      }\n    }\n  }\n  // Facets that lie together at a state share a group there: a crease shows\n  // between two facets that lie together now but were parted at the deepest\n  // fold.\n  // And the extent of each state, turned as it lies, for the camera.\n  const nf = F.length;\n  const gid = new Int32Array(nf * (n + 1));\n  const det = new Int8Array(nf * (n + 1));\n  const box = [];\n  for (let k = 0; k \u003c= n; k++) {\n    const seen = new Map();\n    const c = cos(PHI[k]);\n    const s = sin(PHI[k]);\n    const b = [1e9, -1e9, 1e9, -1e9];\n    F.forEach((f, i) => {\n      const A = f.T[k];\n      const key = A.map((v) => round(v * 1e4)).join();\n      if (!seen.has(key)) seen.set(key, seen.size);\n      gid[i * (n + 1) + k] = seen.get(key);\n      det[i * (n + 1) + k] = A[0] * A[3] - A[1] * A[2] > 0 ? 1 : -1;\n      for (let j = 0; j \u003c f.cp.length; j += 2) {\n        const x = tx(A, f.cp, j);\n        const y = ty(A, f.cp, j);\n        const u = x * c - y * s;\n        const v = x * s + y * c;\n        (b[0] = min(b[0], u)), (b[1] = max(b[1], u)), (b[2] = min(b[2], v)), (b[3] = max(b[3], v));\n      }\n    });\n    const u = (b[0] + b[1]) / 2;\n    const v = (b[2] + b[3]) / 2;\n    box.push([u * c + v * s, -u * s + v * c, b[1] - b[0], b[3] - b[2]]);\n  }\n  const tilt = F32(nf * 2);\n  for (let i = 0; i \u003c nf * 2; i++) tilt[i] = Math.random() - 0.5;\n  return { F, n, gid, det, box, tilt };\n}\n\n// Papers: colour, second colour, print. 0 plain kami, 1 seigaiha waves,\n// 2 metal foil, 3 kanoko dots, 4 ichimatsu checks.\nconst PAPERS = [\n  [[0.16, 0.72, 0.8], null, 0],\n  [[0.13, 0.2, 0.58], [0.78, 0.86, 0.96], 1],\n  [[1, 0.78, 0.3], null, 2],\n  [[0.96, 0.46, 0.6], [1, 0.95, 0.96], 3],\n  [[0.98, 0.78, 0.12], null, 0],\n  [[0.12, 0.46, 0.26], [0.94, 0.88, 0.7], 4],\n  [[0.74, 0.78, 0.84], null, 2],\n  [[0.9, 0.16, 0.12], null, 0],\n];\nconst WHITE = [0.95, 0.93, 0.87];\n\nfunction print(kind, s, t) {\n  if (kind === 1) {\n    // Rows of scales two wide, each row half a scale lower and covering the one above.\n    const X = s * 3;\n    const Y = t * 3;\n    const j = ceil(2 * Y);\n    for (let jj = j + 1; jj >= j; jj--) {\n      const ox = jj & 1;\n      const dx = X - ox - 2 * round((X - ox) / 2);\n      const dy = Y - jj / 2;\n      const r = sqrt(dx * dx + dy * dy);\n      if (r \u003c 1 || jj === j) return (r * 3) % 1 \u003c 0.4 ? 1 : 0;\n    }\n  }\n  if (kind === 3) {\n    const X = s * 5;\n    const Y = t * 5;\n    const ox = floor(Y) & 1 ? 0.5 : 0;\n    const dx = X + ox - floor(X + ox) - 0.5;\n    const dy = Y - floor(Y) - 0.5;\n    return dx * dx + dy * dy \u003c 0.06 ? 1 : 0;\n  }\n  if (kind === 4) return (floor(s * 4 + 4) + floor(t * 4 + 4)) & 1;\n  return 0;\n}\n\n// The order a sheet goes through.\nconst WAIT = 0, IN = 1, REST = 2, FOLD = 3, HOLD = 4, SIT = 5, UNFOLD = 6, CREASE = 7;\n\nconst newSheet = (sl, first) =>\n  Object.assign(sl, { old: first ? null : { seq: sl.seq, kmax: sl.kmax }, seq: sl.seq + 1, ph: IN, pt: 0, k: 0, u: 1, kmax: 0, rush: false });\nconst slot = (i) => ({ i, ph: WAIT, pt: -2.4 * i, k: 0, u: 1, kmax: 0, seq: -1, old: null, rush: false });\nconst F32 = (n) => new Float32Array(n);\n\nexport function setup(params) {\n  const grain = F32(N);\n  for (let y = 0; y \u003c H; y++) {\n    let w = Math.random();\n    for (let x = 0; x \u003c W; x++) {\n      w += 0.25 * (Math.random() - 0.5);\n      grain[y * W + x] = 0.75 + 0.2 * sin(y * 0.9 + 3 * sin(x * 0.05 + y * 0.02)) + 0.1 * w;\n    }\n  }\n  params.s = { M: build(CRANE), slots: [slot(0)], n: 1, base: 0, rate: 1, lamp: 0.06, lampKey: null, grain, bg: F32(N * 3) };\n  for (const k of [\"LX\", \"LY\", \"LZ\", \"LI\", \"HZ\"]) params.s[k] = F32(N);\n}\n\nfunction stepSlot(sl, h, M) {\n  if (sl.rush && (sl.ph === UNFOLD || sl.ph === CREASE)) h *= 4;\n  sl.pt += h;\n  const ph = sl.ph;\n  if (ph === WAIT && sl.pt >= 0) newSheet(sl, true);\n  else if (ph === IN && sl.pt >= 1.2) Object.assign(sl, { ph: REST, pt: 0, old: null });\n  else if (ph === REST && sl.pt >= 1) Object.assign(sl, { ph: FOLD, k: 1, u: 0 });\n  else if (ph === FOLD) {\n    sl.u = min(1, sl.u + h / DUR[sl.k - 1]);\n    if (sl.u >= 1) Object.assign(sl, { kmax: max(sl.kmax, sl.k), ph: HOLD, pt: 0 });\n  } else if (ph === HOLD && sl.pt >= 0.25) {\n    if (sl.k \u003c M.n) Object.assign(sl, { k: sl.k + 1, u: 0, ph: FOLD });\n    else Object.assign(sl, { ph: SIT, pt: 0 });\n  } else if (ph === SIT && sl.pt >= 3) sl.ph = UNFOLD;\n  else if (ph === UNFOLD && (sl.u -= h / 0.45) \u003c= 0) {\n    if (sl.k > 1) (sl.k--), (sl.u += 1);\n    else Object.assign(sl, { k: 0, u: 1, ph: CREASE, pt: 0 });\n  } else if (ph === CREASE && (sl.pt >= 2.5 || sl.rush)) newSheet(sl, false);\n}\n\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.base = floor(cl(k[0], 0, 1) * (PAPERS.length - 0.01));\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.lamp = cl(k[3], -1, 1);\n  const n = cl(round(k[2]), 1, 3);\n  if (n !== S.n) {\n    S.n = n;\n    while (S.slots.length \u003c n) S.slots.push(slot(S.slots.length));\n    S.slots.length = n;\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sl of S.slots) {\n      if (sl.ph === FOLD || sl.ph === HOLD || sl.ph === SIT) {\n        if (sl.ph !== FOLD) sl.u = 1;\n        sl.kmax = max(sl.kmax, sl.k);\n        sl.ph = UNFOLD;\n      } else if (sl.ph !== WAIT) {\n        if (sl.ph === UNFOLD || sl.ph === CREASE) sl.rush = true;\n        else newSheet(sl, false);\n      }\n    }\n  for (const sl of S.slots) stepSlot(sl, dt * S.rate, S.M);\n}\n\n// The lamp: a bulb LH above the table at (lx, LY0). Each LED keeps the unit\n// vector to it, the half vector's height for the shine on foil, and how much\n// light reaches it. The table is dark walnut, kept below 24 of 255; on it lie\n// the pack of paper, the next sheet on top, and a bone folder.\nconst LH = 80;\nconst LY0 = 34;\nconst PC = cos(-0.2);\nconst PS = sin(-0.2);\nfunction lampField(S, next) {\n  const lx = 31.5 + 44 * S.lamp;\n  const { LX, LY, LZ, LI, HZ, bg, grain } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = lx - x - 0.5;\n      const dy = LY0 - y - 0.5;\n      const r2 = dx * dx + dy * dy;\n      const l = sqrt(r2 + LH * LH);\n      LX[p] = dx / l;\n      LY[p] = dy / l;\n      LZ[p] = LH / l;\n      LI[p] = (LH * LH) / (LH * LH + 0.4 * r2);\n      HZ[p] = (LZ[p] + 1) / sqrt(LX[p] * LX[p] + LY[p] * LY[p] + (LZ[p] + 1) * (LZ[p] + 1));\n      const lit = LI[p] * (0.22 + 0.9 * LZ[p]);\n      const w = min(21, 255 * 0.085 * (0.25 + 0.75 * LI[p]) * grain[p]);\n      let c = [w, w * 0.56, w * 0.32];\n      // The pack: four sheets a little askew, each showing an edge of its colour.\n      for (let j = 0; j \u003c 4; j++) {\n        const X = x + 0.5 + 1 - 0.9 * j;\n        const Y = y + 0.5 - 1 - 1.3 * j;\n        const u = (X * PC + Y * PS) / 13;\n        const v = (Y * PC - X * PS) / 13;\n        if (abs(u) \u003c 1 && abs(v) \u003c 1) {\n          const P = PAPERS[(next + j) % PAPERS.length];\n          const col = P[2] !== 2 && print(P[2], u, v) ? P[1] : P[0];\n          const e = (abs(u) > 0.92 || abs(v) > 0.92 ? 0.7 : 1) * (j ? 0.8 : 1) * (P[2] === 2 ? 0.75 : 1);\n          c = col.map((v) => 255 * v * lit * e);\n          break;\n        }\n      }\n      // The bone folder, rounded at both ends, its back catching the lamp.\n      const ax = x + 0.5 - 47;\n      const ay = y + 0.5 - 118;\n      const t = cl((ax * 14 - ay * 15) / 421, 0, 1);\n      const d = hypot(ax - 14 * t, ay + 15 * t);\n      if (d \u003c 1.7) c = [0.8, 0.74, 0.62].map((v) => 255 * v * lit * (0.75 + 0.35 * (1 - d / 1.7)));\n      bg[p * 3] = c[0];\n      bg[p * 3 + 1] = c[1];\n      bg[p * 3 + 2] = c[2];\n    }\n  S.lp = [lx, LY0, LH];\n}\n\n// Per frame: every facet on the table, as drawn.\n// RA maps it from the crease pattern to the panel, RN is its lit normal, RK\n// its draw order; RS the side up, RP the paper, RQ the sheet; RG and RX its\n// group now and at the deepest fold, RU and RL its side and layer there.\nconst MAXR = 1600;\nconst [RA, RN, RK, RL, RM] = [6, 3, 1, 1, 1].map((k) => F32(MAXR * k));\nconst [RS, RU] = [new Int8Array(MAXR), new Int8Array(MAXR)];\nconst [RP, RQ, RG, RX] = [0, 0, 0, 0].map(() => new Int32Array(MAXR));\nconst ORD = [];\nconst RCP = [];\nconst ID = new Int16Array(N);\nconst SHK = F32(N);\nconst VX = F32(64);\nconst VY = F32(64);\nlet nr = 0;\n\n// Fill a convex polygon with v; mode 0 writes facet ids, mode 1 raises the\n// shadow key.\nfunction fill(cnt, v, mode) {\n  let ya = 1e9;\n  let yb = -1e9;\n  for (let i = 0; i \u003c cnt; i++) (ya = min(ya, VY[i])), (yb = max(yb, VY[i]));\n  const y0 = max(0, ceil(ya - 0.5));\n  const y1 = min(H - 1, floor(yb - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 1e9;\n    let xr = -1e9;\n    for (let i = 0; i \u003c cnt; i++) {\n      const j = i + 1 \u003c cnt ? i + 1 : 0;\n      const ay = VY[i];\n      const by = VY[j];\n      if ((ay \u003c= py && by > py) || (by \u003c= py && ay > py)) {\n        const x = VX[i] + ((py - ay) / (by - ay)) * (VX[j] - VX[i]);\n        (xl = min(xl, x)), (xr = max(xr, x));\n      }\n    }\n    const x0 = max(0, ceil(xl - 0.5));\n    const x1 = min(W - 1, floor(xr - 0.5));\n    const row = y * W;\n    if (mode === 0) for (let x = x0; x \u003c= x1; x++) ID[row + x] = v;\n    else for (let x = x0; x \u003c= x1; x++) if (SHK[row + x] \u003c v) SHK[row + x] = v;\n  }\n}\n\n// The camera for state j of a sheet in its slot: turned PHI[j], scaled to fit.\nfunction viewOf(M, j, fw, fh, zmax) {\n  const b = M.box[j];\n  return [PHI[j], log(min(fw / b[2], fh / b[3], zmax)), b[0], b[1]];\n}\n\n// Put one sheet on the table: model M at step k, progress u, in slot\n// region (cy, fw, fh), paper index pi. dx and dphi slide a new sheet in.\nfunction placeSheet(S, M, k, u, flap, kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, keyBase, mem, qid) {\n  const n1 = M.n + 1;\n  const go = k > 0 && u > 0 && u \u003c 1;\n  const jb = k === 0 ? 0 : u >= 1 ? k : k - 1;\n  const a = viewOf(M, k > 0 ? k - 1 : 0, fw, fh, zmax);\n  const b = viewOf(M, k, fw, fh, zmax);\n  const w = k > 0 ? ease(u) : 1;\n  const phi = mix(a[0], b[0], w) + dphi;\n  const z = exp(mix(a[1], b[1], w));\n  const ccx = mix(a[2], b[2], w);\n  const ccy = mix(a[3], b[3], w);\n  const c = cos(phi) * z;\n  const s = sin(phi) * z;\n  const V = [c, -s, s, c, 31.5 + dx - (c * ccx - s * ccy), cyp + dy - (s * ccx + c * ccy)];\n  const [lx, ly, lh] = S.lp;\n  M.F.forEach((f, i) => {\n    if (nr >= MAXR) return;\n    const r = nr++;\n    // The hinge this facet turns on now, if any: the fold under way, or the\n    // finished crane's wing beat.\n    let hg = null;\n    let th = 0;\n    if (go && f.H[k]) (hg = f.H[k]), (th = PI * ease(u));\n    else if (flap > 0 && (f.sec === 0 || f.sec === 3)) (hg = FLAPH), (th = flap);\n    const A0 = f.T[jb];\n    const ct = cos(th);\n    const st = sin(th);\n    const A = mul(V, hg ? mul(hingeM(hg, ct - 1), A0) : A0);\n    RA.set(A, r * 6);\n    RCP[r] = f.cp;\n    let side = M.det[i * n1 + jb];\n    let nx = 0;\n    let ny = 0;\n    let nz = 1;\n    let key = f.L[jb];\n    if (hg) {\n      const m = hg[4];\n      // The hinge normal as it lies on the panel.\n      const hx = hg[2] * cos(phi) - hg[3] * sin(phi);\n      const hy = hg[2] * sin(phi) + hg[3] * cos(phi);\n      nx = -m * st * hx;\n      ny = -m * st * hy;\n      nz = ct;\n      if (ct \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz), (side = -side);\n      key = (m > 0 ? 1e6 : -1e6) + (ct >= 0 ? f.L[jb] : go ? f.L[k] : -f.L[jb]);\n      // A lifted flap throws its shadow away from the lamp.\n      if (m > 0 && st > 0.02) {\n        const cp = f.cp;\n        const cnt = cp.length / 2;\n        for (let j = 0; j \u003c cnt; j++) {\n          const hz = (((tx(A0, cp, 2 * j) - hg[0]) * hg[2] + (ty(A0, cp, 2 * j) - hg[1]) * hg[3]) * st * z) / lh;\n          const px = tx(A, cp, 2 * j);\n          const py = ty(A, cp, 2 * j);\n          VX[j] = px + hz * (px - lx);\n          VY[j] = py + hz * (py - ly);\n        }\n        fill(cnt, keyBase + key, 1);\n      }\n    }\n    // Paper never lies quite flat: each layer tips a little its own way, and a\n    // sheet opened out again keeps a tilt in every facet between its creases.\n    const g = M.gid[i * n1 + jb];\n    nx += 0.06 * M.tilt[2 * g] + 0.12 * mem * M.tilt[2 * i + 1];\n    ny += 0.06 * M.tilt[2 * g + 1] + 0.12 * mem * M.tilt[2 * i];\n    const nl = hypot(nx, ny, nz);\n    RN[r * 3] = nx / nl;\n    RN[r * 3 + 1] = ny / nl;\n    RN[r * 3 + 2] = nz / nl;\n    RS[r] = side;\n    RK[r] = keyBase + key;\n    RP[r] = pi;\n    RG[r] = g;\n    RX[r] = M.gid[i * n1 + kmax];\n    RU[r] = M.det[i * n1 + kmax];\n    RL[r] = f.L[kmax];\n    RQ[r] = qid;\n    RM[r] = mem;\n    ORD.push(r);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const next = (S.base + S.slots[0].seq + 1) % PAPERS.length;\n  const lk = S.lamp + 10 * next;\n  if (S.lampKey !== lk) (S.lampKey = lk), lampField(S, next);\n  const { M, LX, LY, LZ, LI, HZ, bg } = S;\n  nr = 0;\n  ORD.length = 0;\n  SHK.fill(-1e12);\n  const n = S.slots.length;\n  const sh = H / n;\n  const zmax = [74, 50, 34][n - 1];\n  const fw = n === 1 ? 60 : n === 2 ? 56 : 46;\n  const fh = sh - (n === 1 ? 12 : 8);\n  let q = 0;\n  for (const sl of S.slots) {\n    if (sl.ph === WAIT) continue;\n    const cyp = sl.i * sh + sh / 2;\n    const pi = (S.base + 3 * sl.i + sl.seq) % PAPERS.length;\n    if (sl.old) placeSheet(S, M, 0, 1, 0, sl.old.kmax, (S.base + 3 * sl.i + sl.old.seq) % PAPERS.length, cyp, fw, fh, zmax, 0, 0, 0, -1e8, 1, q++);\n    let dx = 0;\n    let dy = 0;\n    let dphi = 0;\n    if (sl.ph === IN) {\n      // Slid off the pack in the corner.\n      const e = 1 - ease(sl.pt / 1.2);\n      dx = -62 * e;\n      dy = (8 - cyp) * e;\n      dphi = -0.2 * e;\n    }\n    let flap = 0;\n    if (sl.ph === SIT) {\n      // The crane beats its wing once.\n      const t = (sl.pt - 0.6) / 1.6;\n      if (t > 0 && t \u003c 1) flap = 0.78 * PI * sin(PI * t) ** 2;\n    }\n    const mem = sl.ph === UNFOLD || sl.ph === CREASE ? 1 : 0;\n    placeSheet(S, M, sl.k, sl.u, flap, sl.kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, 0, mem, q++);\n  }\n  ORD.sort((a, b) => RK[a] - RK[b]);\n  ID.fill(-1);\n  for (const r of ORD) {\n    const cp = RCP[r];\n    const A = RA.subarray(r * 6, r * 6 + 6);\n    for (let j = 0; j \u003c cp.length; j += 2) (VX[j / 2] = tx(A, cp, j)), (VY[j / 2] = ty(A, cp, j));\n    fill(cp.length / 2, r, 0);\n  }\n  const lx = S.lp[0];\n  const sx = lx \u003c 31.5 ? -1 : 1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const r = ID[p];\n      if (r \u003c 0) {\n        const f = SHK[p] > -1e11 ? 0.55 : 1;\n        display.setPixel(x, y, bg[p * 3] * f, bg[p * 3 + 1] * f, bg[p * 3 + 2] * f);\n      } else {\n        // The print, found back in the crease pattern: paper square s, t in -1..1.\n        const o = r * 6;\n        const [a, b, c, d] = [RA[o], RA[o + 1], RA[o + 2], RA[o + 3]];\n        const det = a * d - b * c;\n        const P = PAPERS[RP[r]];\n        let col = P[0];\n        let kind = P[2];\n        if (RS[r] \u003c 0) (col = WHITE), (kind = -1);\n        else if (P[1] && abs(det) > 1e-3) {\n          const X = x + 0.5 - RA[o + 4];\n          const Y = y + 0.5 - RA[o + 5];\n          const cu = (d * X - b * Y) / det;\n          const cv = (a * Y - c * X) / det;\n          if (print(kind, cu + cv, cv - cu)) col = P[1];\n        }\n        const nz = RN[r * 3 + 2];\n        const I = LI[p];\n        const hz = max(0, nz * HZ[p]);\n        // Kami is matte with a little sheen; foil is darker but throws the lamp back.\n        const fo = kind === 2;\n        const lit = I * (0.22 + 0.9 * max(0, RN[r * 3] * LX[p] + RN[r * 3 + 1] * LY[p] + nz * LZ[p])) * (fo ? 0.8 : 1);\n        const sp = I * (fo ? 0.25 + 0.9 * hz ** 12 : 0.06 * hz ** 8);\n        // Shade under a lifted flap, and along the edge of a layer above.\n        const k = RK[r];\n        let f = SHK[p] > k ? 0.55 : 1;\n        const s = x - sx >= 0 && x - sx \u003c W && y > 0 ? ID[p - W - sx] : -1;\n        if (s >= 0 && RQ[s] === RQ[r] && RK[s] > k + 0.5 && RG[s] !== RG[r]) f *= 0.66;\n        // Creases left from the folding.\n        if (RM[r] > 0) {\n          for (const s of [x + 1 \u003c W ? ID[p + 1] : -1, y + 1 \u003c H ? ID[p + W] : -1])\n            if (s >= 0 && s !== r && RQ[s] === RQ[r] && RG[s] === RG[r] && RX[s] !== RX[r]) {\n              const up = RL[s] > RL[r] ? s : r;\n              f *= RU[up] * RS[r] > 0 ? 1.22 : 0.72;\n              break;\n            }\n        }\n        const m = 255 * f * (fo ? lit + sp : lit);\n        const e = fo ? 0 : 255 * f * sp;\n        display.setPixel(x, y, min(255, col[0] * m + e), min(255, col[1] * m + e), min(255, col[2] * m + e));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower."},{"name":"Sheets","min":1,"max":3,"about":"How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3."},{"name":"Lamp","min":-1,"max":1,"about":"Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way."}],"start":[0,2,1,0.06],"measures":{"motion":0.2431,"detail":0.0239,"edges":0.722,"complexity":0.6298,"coverage":0.2643,"colour":0.177,"drift":0.2549},"knobResponse":[0.2136,0.2519,0.2517,0.0599]},{"slug":"outer-billiards","title":"Outer Billiards","family":"geometry","round":30,"note":"정오각형 밖의 평면을 점마다 꼭짓점 대칭 뛰기 몇 번 만에 제자리로 오는지로 칠했어요. 십각형과 오각형 목걸이가 둘레를 감고, 흰 점 하나가 제 궤도를 뛰어요.","idea":"A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.","buttons":"K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.","code":"// ===== Patternflow pattern =====\n// Title:   Outer Billiards\n// Family:  geometry\n// Idea:    A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: outer billiards (Bernhard Neumann, 1959) and Sergei Tabachnikov's regular pentagon (1995), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green.\n// Knob 2: Speed. At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes.\n// Knob 3: Sides. The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second.\n// Knob 4: Zoom. How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1.\n// Buttons: K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, atan2, log, exp, PI, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst TAU = 2 * PI;\n\n// The map has the polygon's symmetry, turns by 2pi/n and mirrors in its\n// axes (a mirror turns the map into its inverse, which has the same periods),\n// so one wedge of angle pi/n holds it all. The wedge is gridded log-polar:\n// radius RA to RMAX in CR cells per e-fold, angle in steps of 1/CR.\nconst RA = 0.7, RMAX = 33, CR = 110, NI = ceil(CR * log(RMAX / RA));\nconst MAXIT = 4000, INSIDE = 65535, BUDGET = 500000;\n\n// Four sample points in each LED: radius in LEDs, CR times its log, angle in turns.\nconst SR = new Float32Array(NP * 4), SL = new Float32Array(NP * 4), SA = new Float32Array(NP * 4);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++)\n    for (let s = 0; s \u003c 4; s++) {\n      const q = (y * W + x) * 4 + s, dx = x + (s & 1 ? 0.75 : 0.25) - 32, dy = 64 - y - (s & 2 ? 0.75 : 0.25);\n      SR[q] = sqrt(dx * dx + dy * dy);\n      SL[q] = CR * log(SR[q]);\n      SA[q] = atan2(dy, dx) / TAU;\n    }\n\n// A regular n-gon on the unit circle, vertex 0 on the x axis; edge k runs\n// from vertex k to k + 1 and its outward normal is NX, NY.\nfunction makePoly(n) {\n  const G = { n, r: cos(PI / n), NJ: ceil((PI / n) * CR), next: 0, VX: [], VY: [], NX: [], NY: [] };\n  for (let k = 0; k \u003c n; k++) {\n    G.VX.push(cos((TAU * k) / n));\n    G.VY.push(sin((TAU * k) / n));\n    G.NX.push(cos((TAU * (k + 0.5)) / n));\n    G.NY.push(sin((TAU * (k + 0.5)) / n));\n  }\n  G.M = new Uint16Array(NI * G.NJ);\n  return G;\n}\n\n// The vertex x reflects in: the first, counterclockwise, of the run of edges\n// x can see, so the polygon lies right of the ray from x through it. -1 inside.\nfunction vtx(G, x, y) {\n  const { n, NX, NY, r } = G;\n  let prev = x * NX[n - 1] + y * NY[n - 1] > r;\n  for (let k = 0; k \u003c n; k++) {\n    const vis = x * NX[k] + y * NY[k] > r;\n    if (vis && !prev) return k;\n    prev = vis;\n  }\n  return -1;\n}\n\n// Two jumps make a translation, so after an even number of jumps a periodic\n// point is back exactly, up to rounding. A domain whose centre has odd period p\n// is turned half round by p jumps, and its points come back after 2p; every\n// point of a domain gets the same number that way.\nlet spent = 0;\nfunction period(G, x0, y0) {\n  let x = x0, y = y0;\n  for (let it = 1; it \u003c= MAXIT; it++) {\n    const k = vtx(G, x, y);\n    if (k \u003c 0) return (spent += it), INSIDE;\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    if (!(it & 1) && (x - x0) ** 2 + (y - y0) ** 2 \u003c 1e-14) return (spent += it), it;\n  }\n  spent += MAXIT;\n  return 0;\n}\n\n// Fill the wedge outward from the polygon, BUDGET jumps a frame.\nfunction grow(G) {\n  spent = 0;\n  const total = NI * G.NJ;\n  while (G.next \u003c total && spent \u003c BUDGET) {\n    const c = G.next++, i = (c / G.NJ) | 0, a = (c - i * G.NJ + 0.5) / CR, rho = RA * exp((i + 0.5) / CR);\n    G.M[c] = period(G, rho * cos(a), rho * sin(a));\n  }\n}\n\n// The domain of a periodic point: the points that see the same vertices for p\n// jumps. After j jumps a point X is at s X + c; each jump adds two half\n// planes, and a square clipped by them all is the domain. Its centroid.\nfunction domain(G, x0, y0, p) {\n  let poly = [[x0 - 30, y0 - 30], [x0 + 30, y0 - 30], [x0 + 30, y0 + 30], [x0 - 30, y0 + 30]];\n  const clip = (ax, ay, b) => {\n    const out = [];\n    for (let i = 0; i \u003c poly.length; i++) {\n      const A = poly[i], B = poly[(i + 1) % poly.length], d1 = ax * A[0] + ay * A[1] - b, d2 = ax * B[0] + ay * B[1] - b;\n      if (d1 \u003c= 0) out.push(A);\n      if (d1 \u003c 0 !== d2 \u003c 0) out.push([A[0] + (d1 / (d1 - d2)) * (B[0] - A[0]), A[1] + (d1 / (d1 - d2)) * (B[1] - A[1])]);\n    }\n    poly = out;\n  };\n  let s = 1, cx = 0, cy = 0, x = x0, y = y0;\n  for (let j = 0; j \u003c p && poly.length; j++) {\n    const k = vtx(G, x, y), m = (k + G.n - 1) % G.n;\n    clip(-s * G.NX[k], -s * G.NY[k], G.NX[k] * cx + G.NY[k] * cy - G.r);\n    clip(s * G.NX[m], s * G.NY[m], G.r - G.NX[m] * cx - G.NY[m] * cy);\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    cx = 2 * G.VX[k] - cx;\n    cy = 2 * G.VY[k] - cy;\n    s = -s;\n  }\n  let A = 0, X = 0, Y = 0;\n  for (let i = 0; i \u003c poly.length; i++) {\n    const [x1, y1] = poly[i], [x2, y2] = poly[(i + 1) % poly.length], c = x1 * y2 - x2 * y1;\n    A += c;\n    X += (x1 + x2) * c;\n    Y += (y1 + y2) * c;\n  }\n  return A > 1e-9 ? [X / (3 * A), Y / (3 * A), A / 2] : [x0, y0, 0];\n}\n\nconst POLYS = {};\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 5, zoom: 5.2, rot: PI / 2, t: 0,\n    orb: null, k: 0, ph: 0, hops: 0, seen: [], marks: [],\n    lut: new Float32Array((MAXIT + 1) * 3), lutKey: \"\",\n    buf: new Float32Array(NP * 3),\n  };\n}\n\n// A seed: of forty random cells of the wedge, the one whose domain is biggest\n// on the panel, give or take, and not one of the last two periods, moved to its\n// domain's centroid. The orbit is kept as a list, so it closes exactly however\n// long it runs, and must stay within 44 LEDs of the centre: the 128 rows hold\n// all of it and the 64 columns most.\nfunction pick(P, G) {\n  const Z = P.zoom, lo = 1.1, hi = 40 / Z;\n  let best = 0;\n  for (let t = 0; t \u003c 40; t++) {\n    const i = floor(CR * log((lo + (hi - lo) * random()) / RA)), j = floor((random() * PI * CR) / G.n), c = i * G.NJ + j;\n    if (c >= G.next) continue;\n    const p = G.M[c], rho = RA * exp((i + 0.5) / CR), a = (j + 0.5) / CR;\n    if (!p || p === INSIDE || p > 12 * G.n) continue;\n    const [cx, cy, area] = domain(G, rho * cos(a), rho * sin(a), p);\n    const score = sqrt(min(area * Z * Z, 300)) * (0.5 + random()) * (P.seen.includes(p) ? 0.25 : 1);\n    if (area * Z * Z \u003c 8 || score \u003c= best) continue;\n    const ox = [cx], oy = [cy];\n    let far = 0;\n    for (let h = 0; h \u003c p; h++) {\n      const k = vtx(G, ox[h], oy[h]);\n      if (k \u003c 0) break;\n      ox.push(2 * G.VX[k] - ox[h]);\n      oy.push(2 * G.VY[k] - oy[h]);\n      far = max(far, sqrt(ox[h] ** 2 + oy[h] ** 2));\n    }\n    if (ox.length \u003c= p || far * Z > 44) continue;\n    best = score;\n    P.orb = { ox, oy, p, far };\n  }\n  if (best) {\n    P.seen = [P.orb.p, P.seen[0]];\n    P.k = P.ph = P.hops = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const n = cl(round(kv[2]), 5, 12);\n  P.zoom = 5.2 * 2 ** (1.2 * cl(kv[3], -1, 1));\n  if (n !== P.n || !P.G) {\n    P.n = n;\n    P.G = POLYS[n] || (POLYS[n] = makePoly(n));\n    P.orb = null;\n  }\n  const G = P.G;\n  grow(G);\n  P.t += d;\n  P.rot += d * P.speed * 0.045;\n  // K1, or a zoom that has pushed the orbit off the panel: a new orbit.\n  if ((input.btnPressed && input.btnPressed[0]) || (P.orb && P.orb.far * P.zoom > 52)) P.orb = null;\n  if (!P.orb) {\n    if (G.next > CR * log(30 / P.zoom / RA) * G.NJ) pick(P, G);\n  } else {\n    P.ph += d * P.speed * 1.2;\n    while (P.ph >= 1) {\n      P.ph -= 1;\n      const o = P.orb;\n      P.k = (P.k + 1) % o.p;\n      P.marks.push([o.ox[P.k], o.oy[P.k], P.t, cl(o.p / (P.speed * 1.2), 4, 12)]);\n      if (P.marks.length > 120) P.marks.shift();\n      if (++P.hops >= max(o.p, 2 * o.p * (o.p \u003c 16))) P.orb = null;\n    }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The colour of a period.\nfunction makeLut(P) {\n  const L = P.lut;\n  for (let p = 1; p \u003c= MAXIT; p++) {\n    const v = cl(1.1 - 0.12 * log(p / (2 * P.n)) / log(2), 0.5, 1);\n    hsv(P.hue + 0.55 + 0.618034 * p, 0.85, v * 255, L, p * 3);\n  }\n  P.lutKey = P.hue + \",\" + P.n;\n}\n\n// Additive splat with bilinear weights, in LEDs.\nfunction splat(buf, x, y, a, r, g, b) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const X = x0 + i, Y = y0 + j;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const w = a * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), q = (Y * W + X) * 3;\n      buf[q] += w * r;\n      buf[q + 1] += w * g;\n      buf[q + 2] += w * b;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.G) return;\n  const G = P.G, { n, M, NJ, r } = G, Z = P.zoom, buf = P.buf, L = P.lut;\n  if (P.lutKey !== P.hue + \",\" + n) makeLut(P);\n  const off = CR * (log(Z) + log(RA)), turn = (P.rot / TAU) * n, K = (TAU / n) * CR, pin = PI / n;\n  const w = 0.55 / Z;\n  for (let p = 0; p \u003c NP; p++) {\n    let R = 0, Gc = 0, B = 0, first = -1, mixed = 0, tab = 0, rim = 0;\n    for (let s = 0; s \u003c 4; s++) {\n      const q = p * 4 + s, rho = SR[q] / Z;\n      let a = SA[q] * n - turn;\n      a -= floor(a);\n      if (a > 0.5) a = 1 - a;\n      let per = 0;\n      // In the polygon, or on its rim.\n      if (rho \u003c 1 + w) {\n        const dd = rho * cos(pin - (a * TAU) / n) - r;\n        if (dd \u003c w) {\n          dd > -w ? rim++ : tab++;\n          continue;\n        }\n      }\n      const i = floor(SL[q] - off), c = i * NJ + floor(a * K);\n      if (i >= 0 && i \u003c NI && c \u003c G.next) per = M[c];\n      if (per === INSIDE) per = 0;\n      if (first \u003c 0) first = per;\n      else if (per !== first) mixed = 1;\n      if (per) (R += L[per * 3]), (Gc += L[per * 3 + 1]), (B += L[per * 3 + 2]);\n    }\n    // Where the period changes inside a LED, a dark seam.\n    const f = mixed || (tab && R + Gc + B) ? 0.15 : 0.25;\n    buf[p * 3] = R * f + rim * 64 + tab * 9;\n    buf[p * 3 + 1] = Gc * f + rim * 63 + tab * 9;\n    buf[p * 3 + 2] = B * f + rim * 61 + tab * 12;\n  }\n  // The orbit: the points it has landed on, each fading over the time one\n  // round takes (4 to 12 seconds), and the jump under way, a streak from the\n  // point through the vertex to its image.\n  const ca = cos(P.rot), sa = sin(P.rot);\n  const sx = (x, y) => 32 + Z * (x * ca - y * sa), sy = (x, y) => 64 - Z * (x * sa + y * ca);\n  for (const [x, y, t, life] of P.marks) {\n    const a = 1 - (P.t - t) / life;\n    if (a > 0) splat(buf, sx(x, y), sy(x, y), a * 255, 1, 1, 1);\n  }\n  const o = P.orb;\n  if (o) {\n    const k = P.k, k1 = (k + 1) % o.p, x0 = o.ox[k], y0 = o.oy[k], x1 = o.ox[k1], y1 = o.oy[k1];\n    const u = cl(P.ph / 0.4, 0, 1), e = u * u * (3 - 2 * u), fade = P.ph \u003c 0.4 ? 1 : 1 - (P.ph - 0.4) / 0.6;\n    const ax = sx(x0, y0), ay = sy(x0, y0), bx = sx(x1, y1), by = sy(x1, y1);\n    const len = sqrt((bx - ax) ** 2 + (by - ay) ** 2), steps = ceil((len * e) / 0.4);\n    for (let j = 0; j \u003c= steps; j++) {\n      const v = steps ? (j / steps) * e : 0;\n      splat(buf, ax + (bx - ax) * v, ay + (by - ay) * v, 170 * fade * (0.3 + 0.7 * (v / (e || 1))), 1, 0.97, 0.9);\n    }\n    const hx = ax + (bx - ax) * e, hy = ay + (by - ay) * e;\n    splat(buf, hx, hy, 400, 1, 1, 1);\n    const vx = (ax + bx) / 2, vy = (ay + by) / 2, fl = exp(-(((e - 0.5) * 5) ** 2)) * fade;\n    splat(buf, vx, vy, 500 * fl, 1, 1, 1);\n    for (let j = 0; j \u003c 8; j++) splat(buf, vx + 1.5 * cos((j * PI) / 4), vy + 1.5 * sin((j * PI) / 4), 140 * fl, 1, 1, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-outer-billiards","type":"code","name":"outer-billiards","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Outer Billiards\n// Family:  geometry\n// Idea:    A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: outer billiards (Bernhard Neumann, 1959) and Sergei Tabachnikov's regular pentagon (1995), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green.\n// Knob 2: Speed. At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes.\n// Knob 3: Sides. The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second.\n// Knob 4: Zoom. How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1.\n// Buttons: K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, atan2, log, exp, PI, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst TAU = 2 * PI;\n\n// The map has the polygon's symmetry, turns by 2pi/n and mirrors in its\n// axes (a mirror turns the map into its inverse, which has the same periods),\n// so one wedge of angle pi/n holds it all. The wedge is gridded log-polar:\n// radius RA to RMAX in CR cells per e-fold, angle in steps of 1/CR.\nconst RA = 0.7, RMAX = 33, CR = 110, NI = ceil(CR * log(RMAX / RA));\nconst MAXIT = 4000, INSIDE = 65535, BUDGET = 500000;\n\n// Four sample points in each LED: radius in LEDs, CR times its log, angle in turns.\nconst SR = new Float32Array(NP * 4), SL = new Float32Array(NP * 4), SA = new Float32Array(NP * 4);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++)\n    for (let s = 0; s \u003c 4; s++) {\n      const q = (y * W + x) * 4 + s, dx = x + (s & 1 ? 0.75 : 0.25) - 32, dy = 64 - y - (s & 2 ? 0.75 : 0.25);\n      SR[q] = sqrt(dx * dx + dy * dy);\n      SL[q] = CR * log(SR[q]);\n      SA[q] = atan2(dy, dx) / TAU;\n    }\n\n// A regular n-gon on the unit circle, vertex 0 on the x axis; edge k runs\n// from vertex k to k + 1 and its outward normal is NX, NY.\nfunction makePoly(n) {\n  const G = { n, r: cos(PI / n), NJ: ceil((PI / n) * CR), next: 0, VX: [], VY: [], NX: [], NY: [] };\n  for (let k = 0; k \u003c n; k++) {\n    G.VX.push(cos((TAU * k) / n));\n    G.VY.push(sin((TAU * k) / n));\n    G.NX.push(cos((TAU * (k + 0.5)) / n));\n    G.NY.push(sin((TAU * (k + 0.5)) / n));\n  }\n  G.M = new Uint16Array(NI * G.NJ);\n  return G;\n}\n\n// The vertex x reflects in: the first, counterclockwise, of the run of edges\n// x can see, so the polygon lies right of the ray from x through it. -1 inside.\nfunction vtx(G, x, y) {\n  const { n, NX, NY, r } = G;\n  let prev = x * NX[n - 1] + y * NY[n - 1] > r;\n  for (let k = 0; k \u003c n; k++) {\n    const vis = x * NX[k] + y * NY[k] > r;\n    if (vis && !prev) return k;\n    prev = vis;\n  }\n  return -1;\n}\n\n// Two jumps make a translation, so after an even number of jumps a periodic\n// point is back exactly, up to rounding. A domain whose centre has odd period p\n// is turned half round by p jumps, and its points come back after 2p; every\n// point of a domain gets the same number that way.\nlet spent = 0;\nfunction period(G, x0, y0) {\n  let x = x0, y = y0;\n  for (let it = 1; it \u003c= MAXIT; it++) {\n    const k = vtx(G, x, y);\n    if (k \u003c 0) return (spent += it), INSIDE;\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    if (!(it & 1) && (x - x0) ** 2 + (y - y0) ** 2 \u003c 1e-14) return (spent += it), it;\n  }\n  spent += MAXIT;\n  return 0;\n}\n\n// Fill the wedge outward from the polygon, BUDGET jumps a frame.\nfunction grow(G) {\n  spent = 0;\n  const total = NI * G.NJ;\n  while (G.next \u003c total && spent \u003c BUDGET) {\n    const c = G.next++, i = (c / G.NJ) | 0, a = (c - i * G.NJ + 0.5) / CR, rho = RA * exp((i + 0.5) / CR);\n    G.M[c] = period(G, rho * cos(a), rho * sin(a));\n  }\n}\n\n// The domain of a periodic point: the points that see the same vertices for p\n// jumps. After j jumps a point X is at s X + c; each jump adds two half\n// planes, and a square clipped by them all is the domain. Its centroid.\nfunction domain(G, x0, y0, p) {\n  let poly = [[x0 - 30, y0 - 30], [x0 + 30, y0 - 30], [x0 + 30, y0 + 30], [x0 - 30, y0 + 30]];\n  const clip = (ax, ay, b) => {\n    const out = [];\n    for (let i = 0; i \u003c poly.length; i++) {\n      const A = poly[i], B = poly[(i + 1) % poly.length], d1 = ax * A[0] + ay * A[1] - b, d2 = ax * B[0] + ay * B[1] - b;\n      if (d1 \u003c= 0) out.push(A);\n      if (d1 \u003c 0 !== d2 \u003c 0) out.push([A[0] + (d1 / (d1 - d2)) * (B[0] - A[0]), A[1] + (d1 / (d1 - d2)) * (B[1] - A[1])]);\n    }\n    poly = out;\n  };\n  let s = 1, cx = 0, cy = 0, x = x0, y = y0;\n  for (let j = 0; j \u003c p && poly.length; j++) {\n    const k = vtx(G, x, y), m = (k + G.n - 1) % G.n;\n    clip(-s * G.NX[k], -s * G.NY[k], G.NX[k] * cx + G.NY[k] * cy - G.r);\n    clip(s * G.NX[m], s * G.NY[m], G.r - G.NX[m] * cx - G.NY[m] * cy);\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    cx = 2 * G.VX[k] - cx;\n    cy = 2 * G.VY[k] - cy;\n    s = -s;\n  }\n  let A = 0, X = 0, Y = 0;\n  for (let i = 0; i \u003c poly.length; i++) {\n    const [x1, y1] = poly[i], [x2, y2] = poly[(i + 1) % poly.length], c = x1 * y2 - x2 * y1;\n    A += c;\n    X += (x1 + x2) * c;\n    Y += (y1 + y2) * c;\n  }\n  return A > 1e-9 ? [X / (3 * A), Y / (3 * A), A / 2] : [x0, y0, 0];\n}\n\nconst POLYS = {};\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 5, zoom: 5.2, rot: PI / 2, t: 0,\n    orb: null, k: 0, ph: 0, hops: 0, seen: [], marks: [],\n    lut: new Float32Array((MAXIT + 1) * 3), lutKey: \"\",\n    buf: new Float32Array(NP * 3),\n  };\n}\n\n// A seed: of forty random cells of the wedge, the one whose domain is biggest\n// on the panel, give or take, and not one of the last two periods, moved to its\n// domain's centroid. The orbit is kept as a list, so it closes exactly however\n// long it runs, and must stay within 44 LEDs of the centre: the 128 rows hold\n// all of it and the 64 columns most.\nfunction pick(P, G) {\n  const Z = P.zoom, lo = 1.1, hi = 40 / Z;\n  let best = 0;\n  for (let t = 0; t \u003c 40; t++) {\n    const i = floor(CR * log((lo + (hi - lo) * random()) / RA)), j = floor((random() * PI * CR) / G.n), c = i * G.NJ + j;\n    if (c >= G.next) continue;\n    const p = G.M[c], rho = RA * exp((i + 0.5) / CR), a = (j + 0.5) / CR;\n    if (!p || p === INSIDE || p > 12 * G.n) continue;\n    const [cx, cy, area] = domain(G, rho * cos(a), rho * sin(a), p);\n    const score = sqrt(min(area * Z * Z, 300)) * (0.5 + random()) * (P.seen.includes(p) ? 0.25 : 1);\n    if (area * Z * Z \u003c 8 || score \u003c= best) continue;\n    const ox = [cx], oy = [cy];\n    let far = 0;\n    for (let h = 0; h \u003c p; h++) {\n      const k = vtx(G, ox[h], oy[h]);\n      if (k \u003c 0) break;\n      ox.push(2 * G.VX[k] - ox[h]);\n      oy.push(2 * G.VY[k] - oy[h]);\n      far = max(far, sqrt(ox[h] ** 2 + oy[h] ** 2));\n    }\n    if (ox.length \u003c= p || far * Z > 44) continue;\n    best = score;\n    P.orb = { ox, oy, p, far };\n  }\n  if (best) {\n    P.seen = [P.orb.p, P.seen[0]];\n    P.k = P.ph = P.hops = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const n = cl(round(kv[2]), 5, 12);\n  P.zoom = 5.2 * 2 ** (1.2 * cl(kv[3], -1, 1));\n  if (n !== P.n || !P.G) {\n    P.n = n;\n    P.G = POLYS[n] || (POLYS[n] = makePoly(n));\n    P.orb = null;\n  }\n  const G = P.G;\n  grow(G);\n  P.t += d;\n  P.rot += d * P.speed * 0.045;\n  // K1, or a zoom that has pushed the orbit off the panel: a new orbit.\n  if ((input.btnPressed && input.btnPressed[0]) || (P.orb && P.orb.far * P.zoom > 52)) P.orb = null;\n  if (!P.orb) {\n    if (G.next > CR * log(30 / P.zoom / RA) * G.NJ) pick(P, G);\n  } else {\n    P.ph += d * P.speed * 1.2;\n    while (P.ph >= 1) {\n      P.ph -= 1;\n      const o = P.orb;\n      P.k = (P.k + 1) % o.p;\n      P.marks.push([o.ox[P.k], o.oy[P.k], P.t, cl(o.p / (P.speed * 1.2), 4, 12)]);\n      if (P.marks.length > 120) P.marks.shift();\n      if (++P.hops >= max(o.p, 2 * o.p * (o.p \u003c 16))) P.orb = null;\n    }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The colour of a period.\nfunction makeLut(P) {\n  const L = P.lut;\n  for (let p = 1; p \u003c= MAXIT; p++) {\n    const v = cl(1.1 - 0.12 * log(p / (2 * P.n)) / log(2), 0.5, 1);\n    hsv(P.hue + 0.55 + 0.618034 * p, 0.85, v * 255, L, p * 3);\n  }\n  P.lutKey = P.hue + \",\" + P.n;\n}\n\n// Additive splat with bilinear weights, in LEDs.\nfunction splat(buf, x, y, a, r, g, b) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const X = x0 + i, Y = y0 + j;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const w = a * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), q = (Y * W + X) * 3;\n      buf[q] += w * r;\n      buf[q + 1] += w * g;\n      buf[q + 2] += w * b;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.G) return;\n  const G = P.G, { n, M, NJ, r } = G, Z = P.zoom, buf = P.buf, L = P.lut;\n  if (P.lutKey !== P.hue + \",\" + n) makeLut(P);\n  const off = CR * (log(Z) + log(RA)), turn = (P.rot / TAU) * n, K = (TAU / n) * CR, pin = PI / n;\n  const w = 0.55 / Z;\n  for (let p = 0; p \u003c NP; p++) {\n    let R = 0, Gc = 0, B = 0, first = -1, mixed = 0, tab = 0, rim = 0;\n    for (let s = 0; s \u003c 4; s++) {\n      const q = p * 4 + s, rho = SR[q] / Z;\n      let a = SA[q] * n - turn;\n      a -= floor(a);\n      if (a > 0.5) a = 1 - a;\n      let per = 0;\n      // In the polygon, or on its rim.\n      if (rho \u003c 1 + w) {\n        const dd = rho * cos(pin - (a * TAU) / n) - r;\n        if (dd \u003c w) {\n          dd > -w ? rim++ : tab++;\n          continue;\n        }\n      }\n      const i = floor(SL[q] - off), c = i * NJ + floor(a * K);\n      if (i >= 0 && i \u003c NI && c \u003c G.next) per = M[c];\n      if (per === INSIDE) per = 0;\n      if (first \u003c 0) first = per;\n      else if (per !== first) mixed = 1;\n      if (per) (R += L[per * 3]), (Gc += L[per * 3 + 1]), (B += L[per * 3 + 2]);\n    }\n    // Where the period changes inside a LED, a dark seam.\n    const f = mixed || (tab && R + Gc + B) ? 0.15 : 0.25;\n    buf[p * 3] = R * f + rim * 64 + tab * 9;\n    buf[p * 3 + 1] = Gc * f + rim * 63 + tab * 9;\n    buf[p * 3 + 2] = B * f + rim * 61 + tab * 12;\n  }\n  // The orbit: the points it has landed on, each fading over the time one\n  // round takes (4 to 12 seconds), and the jump under way, a streak from the\n  // point through the vertex to its image.\n  const ca = cos(P.rot), sa = sin(P.rot);\n  const sx = (x, y) => 32 + Z * (x * ca - y * sa), sy = (x, y) => 64 - Z * (x * sa + y * ca);\n  for (const [x, y, t, life] of P.marks) {\n    const a = 1 - (P.t - t) / life;\n    if (a > 0) splat(buf, sx(x, y), sy(x, y), a * 255, 1, 1, 1);\n  }\n  const o = P.orb;\n  if (o) {\n    const k = P.k, k1 = (k + 1) % o.p, x0 = o.ox[k], y0 = o.oy[k], x1 = o.ox[k1], y1 = o.oy[k1];\n    const u = cl(P.ph / 0.4, 0, 1), e = u * u * (3 - 2 * u), fade = P.ph \u003c 0.4 ? 1 : 1 - (P.ph - 0.4) / 0.6;\n    const ax = sx(x0, y0), ay = sy(x0, y0), bx = sx(x1, y1), by = sy(x1, y1);\n    const len = sqrt((bx - ax) ** 2 + (by - ay) ** 2), steps = ceil((len * e) / 0.4);\n    for (let j = 0; j \u003c= steps; j++) {\n      const v = steps ? (j / steps) * e : 0;\n      splat(buf, ax + (bx - ax) * v, ay + (by - ay) * v, 170 * fade * (0.3 + 0.7 * (v / (e || 1))), 1, 0.97, 0.9);\n    }\n    const hx = ax + (bx - ax) * e, hy = ay + (by - ay) * e;\n    splat(buf, hx, hy, 400, 1, 1, 1);\n    const vx = (ax + bx) / 2, vy = (ay + by) / 2, fl = exp(-(((e - 0.5) * 5) ** 2)) * fade;\n    splat(buf, vx, vy, 500 * fl, 1, 1, 1);\n    for (let j = 0; j \u003c 8; j++) splat(buf, vx + 1.5 * cos((j * PI) / 4), vy + 1.5 * sin((j * PI) / 4), 140 * fl, 1, 1, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes."},{"name":"Sides","min":5,"max":12,"about":"The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second."},{"name":"Zoom","min":-1,"max":1,"about":"How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1."}],"start":[0,2,5,0.06],"measures":{"motion":0.5156,"detail":0.1148,"edges":0.7368,"complexity":0.7773,"coverage":0.9999,"colour":0.6754,"drift":0.0832},"knobResponse":[0.5981,0.1953,0.4355,0.388]},{"slug":"pancakes","title":"Pancakes","family":"kitchen","round":21,"note":"길든 철판을 위에서 내려다봐요. 국자로 부은 반죽이 퍼지고 기포가 올라와 터지며 구멍을 남기는 동안, 뒤집개가 하나씩 뒤집어 노릇한 면을 보이고 다 익은 것을 숯색 접시에 쌓아요. K1 을 누르면 가장 많이 익은 것부터 바로 뒤집거나 접시로 옮겨요.","idea":"A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.","buttons":"K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.","code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","layer":{"id":"layer-pancakes","type":"code","name":"pancakes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Batter","min":0,"max":1,"about":"Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds."},{"name":"Pancakes","min":6,"max":12,"about":"How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them."},{"name":"Heat","min":0,"max":1,"about":"How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke."}],"start":[0,2,6,0.06],"measures":{"motion":0.2802,"detail":0.2275,"edges":0.2381,"complexity":2.2758,"coverage":0.9979,"colour":0.2408,"drift":0.1011},"knobResponse":[0.1406,0.1266,0.1876,0.1386]},{"slug":"paternoster","title":"Paternoster","family":"machine","round":19,"note":"옛 사무실 건물의 파테르노스터를 기계실에서 피트까지 잘라 보여요. 나무 칸들이 오른쪽으로 오르고 왼쪽으로 내려오며 꼭대기와 바닥의 사슬 바퀴를 넘어가고, 층마다 사람이 지나가는 칸에 올라타고 내려요.","idea":"A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","layer":{"id":"layer-paternoster","type":"code","name":"paternoster","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again."},{"name":"Floors","min":3,"max":6,"about":"Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain."},{"name":"Busy","min":0,"max":1,"about":"How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom."}],"start":[0,2,3,0.06],"measures":{"motion":0.1311,"detail":0.0811,"edges":0.4174,"complexity":0.5845,"coverage":0.8893,"colour":0.2319,"drift":0.047},"knobResponse":[0.1087,0.0733,0.147,0.0325]},{"slug":"pearl-sheen","title":"Pearl Sheen","family":"cosmetic","round":30,"note":"펄 안료를 부은 면이 새틴 결로 흘러내려요. 누운 결은 로즈이고 기운 결은 박막 간섭으로 금빛 쪽으로 넘어가며, 긴 반사띠가 면을 가로질러요.","idea":"Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.","buttons":"K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.","code":"// ===== Patternflow pattern =====\n// Title:   Pearl Sheen\n// Family:  cosmetic\n// Idea:    Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after thin-film interference in pearlescent mica pigments (titania-coated mica)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1\n//\n// Knob 1: Hue. Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta.\n// Knob 2: Speed. How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that.\n// Knob 3: Shift. The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold.\n// Knob 4: Sheen. The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour.\n// Buttons: K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, tanh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Smooth noise in a 256 x 256 tile, three octaves of 8, 16 and 32 cells,\n// built once in setup. The streaks are this tile stretched about twelve times\n// along the flow.\nconst T = 256, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = Math.random() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.45;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The interference colour of the flakes' coat against the optical path\n// difference 2 n d cos(theta), 0 to 1600 nm in 1024 steps. Each entry sums\n// the two-beam reflectance over the spectrum, 400 to 700 nm every 5 nm, under\n// three bell-shaped channel curves at 600, 545 and 455 nm. The air-to-titania\n// face turns its beam over and the titania-to-mica face does not, so the\n// reflectance is (1 - cos(2 pi path / lambda)) / 2. Only the chroma is kept,\n// the colour less its grey, scaled so the second order's strongest is about 1.\nconst LN = 1024, OPD_MAX = 1600;\nconst RAW = new Float32Array(LN * 3);\nfunction buildRaw() {\n  const chan = [[600, 45], [545, 40], [455, 32]], norm = [0, 0, 0], wts = [];\n  for (let l = 400; l \u003c= 700; l += 5) {\n    const w = chan.map(([m, s]) => exp(-(((l - m) / s) ** 2) / 2));\n    wts.push([l, w]);\n    for (let c = 0; c \u003c 3; c++) norm[c] += w[c];\n  }\n  for (let i = 0; i \u003c LN; i++) {\n    const opd = (i / (LN - 1)) * OPD_MAX, acc = [0, 0, 0];\n    for (const [l, w] of wts) {\n      const r = 0.5 - 0.5 * cos((2 * PI * opd) / l);\n      for (let c = 0; c \u003c 3; c++) acc[c] += r * w[c];\n    }\n    for (let c = 0; c \u003c 3; c++) acc[c] /= norm[c];\n    const m = (acc[0] + acc[1] + acc[2]) / 3;\n    for (let c = 0; c \u003c 3; c++) RAW[i * 3 + c] = (acc[c] - m) / 0.45;\n  }\n}\n\n// The angle of a chroma round the grey axis, red at 0.\nconst chromaAngle = (r, g, b) => atan2((sqrt(3) / 2) * (g - b), r - (g + b) / 2);\n\n// Hue turns the table round the grey axis. Warm entries get LIFT: orange and\n// yellow at half light read as brown and olive on the panel, so they are\n// lifted and their deep tones kept lighter.\nconst LUT = new Float32Array(LN * 3), LIFT = new Float32Array(LN);\nlet lutRot = NaN;\nfunction buildLut(a) {\n  const c = cos(a), s = sin(a), k = (1 - c) / 3, q = s / sqrt(3), m0 = c + k, m1 = k - q, m2 = k + q;\n  for (let i = 0, j = 0; j \u003c LN; i += 3, j++) {\n    const r = RAW[i], g = RAW[i + 1], b = RAW[i + 2];\n    LUT[i] = r * m0 + g * m1 + b * m2;\n    LUT[i + 1] = r * m2 + g * m0 + b * m1;\n    LUT[i + 2] = r * m1 + g * m2 + b * m0;\n    const y = cos(chromaAngle(LUT[i], LUT[i + 1], LUT[i + 2]) - 1);\n    LIFT[j] = y > 0 ? y * y : 0;\n  }\n}\n\n// A flat flake's light path: the second order's magenta, 980 nm. A tilted\n// flake sees the light slant through its coat, 2 n d cos(theta) is shorter,\n// and the colour moves on through orange to gold. Hue then turns the table so\n// the flat colour sits on the knob's hue and the gold on its neighbour.\nconst BASE = 980;\nlet baseAng = 0;\n\nexport function setup(params) {\n  buildTex();\n  buildRaw();\n  const bi = round((BASE / OPD_MAX) * (LN - 1)) * 3;\n  baseAng = chromaAngle(RAW[bi], RAW[bi + 1], RAW[bi + 2]);\n  lutRot = NaN;\n  params.s = {\n    t: 0, flow: 0, hue: 0, shift: 0, sheen: 0.06, stir: -1,\n    u: new Float32Array(N), h: new Float32Array(N), big: new Float32Array(N), fine: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.shift = cl(k[2], 0, 1);\n  P.sheen = cl(k[3], 0, 1);\n  P.t += d;\n  P.flow += d * cl(k[1], 0.2, 3);\n  if (P.stir >= 0) {\n    P.stir += d;\n    if (P.stir > 12) P.stir = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.stir = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const rot = 2 * PI * (P.hue + 0.97) - baseAng;\n  if (rot !== lutRot) buildLut((lutRot = rot));\n  const ub = P.u, hb = P.h, bb = P.big, fb = P.fine, t = P.t, f = P.flow;\n\n  // Across-the-flow coordinate u: the panel's x bent by two slow warps, one\n  // carried down by the pour and one drifting on its own. A streak is a line\n  // of constant u. The spatula pushes u aside above its edge.\n  const sa0 = P.stir, sy = sa0 >= 0 ? -0.3 + (4.6 * sa0) / 2.5 : 0;\n  const sAmp = sa0 \u003c 0 ? 0 : 0.32 * (sa0 \u003c 2.5 ? 1 : exp(-(sa0 - 2.5) / 1.6));\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, push = sAmp > 0 ? sAmp * 0.5 * (1 + tanh((sy - Y) / 0.22)) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const X = x / 32;\n      ub[y * W + x] = X + tap(X * 6 + 40, Y * 5 - f * 0.5 + 7) * 1.4 + tap(X * 3 + t * 0.3, Y * 3 + 90) * 0.9 - push * sin((PI * (x + 0.5)) / W);\n    }\n  }\n  // The surface: broad swells (big) and fine striations (fine), both long\n  // along u. Where the warp squeezes the striations finer than two LEDs can\n  // hold, they fade out instead of breaking into stair steps.\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, u = ub[i];\n      const dx = ub[y * W + (x \u003c W - 1 ? x + 1 : x)] - ub[y * W + (x > 0 ? x - 1 : x)], dy = ub[yd + x] - ub[yu + x];\n      const over = 27 * sqrt(dx * dx + dy * dy) - 2;\n      const big = tap(u * 22 + 130, Y * 4 - f * 0.6);\n      const fine = tap(u * 55, Y * 4 - f * 3) / (1 + (over > 0 ? over * over : 0));\n      bb[i] = big;\n      fb[i] = fine;\n      hb[i] = big + fine * 0.12;\n    }\n  }\n\n  const sh = P.shift, sp = 0.2 + 0.8 * P.sheen;\n  // How much shorter a fully tilted flake's path is, and how much the coat's\n  // thickness varies along the striations.\n  const dmax = 0.03 + 0.115 * sh, thin = 10 + 40 * sh;\n  // A long strip light seen in the surface. Its reflection sweeps across and\n  // back every 21 s with a second, dimmer strip trailing it; Sheen narrows both.\n  const sw = 0.8 - 0.65 * sp, iw = 1 / sw, amp = 0.46 + 0.3 * sp;\n  const sc = 1.2 * sin(t * 0.3), sc2 = sc + (sc > 0 ? -1.6 : 1.6), sa = 0.25 * sin(t * 0.13);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, xl = y * W + (x > 0 ? x - 1 : x), xr = y * W + (x \u003c W - 1 ? x + 1 : x);\n      const hx = (hb[xr] - hb[xl]) * 8, hy = (hb[yd + x] - hb[yu + x]) * 8;\n      const n2 = 1 / (1 + hx * hx + hy * hy);\n      // The straight-on view reflected, r = 2 (n.v) n - v, on a swatch that\n      // bulges a little, so the strip lands as one broad band.\n      const bulge = 0.8 * ((x - 32) / 32 + (y - 64) / 160);\n      const rq = -2 * n2 * (hx + sa * hy) + bulge, q = (rq - sc) * iw, q2 = (rq - sc2) * iw;\n      const glow = exp(-q * q) + 0.6 * exp(-q2 * q2);\n      // The flakes lie along the flow and tilt with the fine striations. A\n      // tilted flake sees the light at an angle, which shortens its path:\n      // flip runs from 0 for flakes within 18 degrees of flat to 1 past 45.\n      const fx = ((fb[xr] - fb[xl]) * 4 + hx * 0.4) * 2.2, fy = ((fb[yd + x] - fb[yu + x]) * 4 + hy * 0.4) * 2.2;\n      const c2 = 1 / (1 + fx * fx + fy * fy);\n      const a = cl((0.9 - c2) * 2.5, 0, 1), flip = a * a * (3 - 2 * a);\n      const j = cl(round((((BASE + thin * fb[i]) * (1 - dmax * flip)) / OPD_MAX) * (LN - 1)), 0, LN - 1), li = j * 3;\n      // The flakes catch the strip in finer lines of their own.\n      const fq = (bulge - 2 * c2 * (fx + sa * fy) - sc) * 2.2;\n      const gl = 0.75 * glow + 0.25 * exp(-fq * fq);\n      // Deep tones only in the troughs of the broad swells.\n      const B = bb[i], deep = B \u003c -0.1 ? (B > -0.35 ? (-0.1 - B) / 0.25 : 1) : 0;\n      let lum = 0.64 - 0.12 * sp + amp * gl - 0.26 * deep + (0.1 * flip * dmax) / 0.13;\n      if (lum > 0.95) lum = 0.95 + (lum - 0.95) * 0.4;\n      const sat = 0.45 + 0.12 * sp - 0.32 * gl + 0.45 * deep + 0.3 * sh * flip;\n      const yl = LIFT[j], L = (lum + 0.12 * yl + 0.2 * yl * deep) * 235, S = sat * (1 - 0.3 * yl);\n      display.setPixel(x, y, cl(L * (1 + S * LUT[li]), 0, 255), cl(L * (1 + S * LUT[li + 1]), 0, 255), cl(L * (1 + S * LUT[li + 2]), 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-pearl-sheen","type":"code","name":"pearl-sheen","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pearl Sheen\n// Family:  cosmetic\n// Idea:    Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after thin-film interference in pearlescent mica pigments (titania-coated mica)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1\n//\n// Knob 1: Hue. Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta.\n// Knob 2: Speed. How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that.\n// Knob 3: Shift. The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold.\n// Knob 4: Sheen. The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour.\n// Buttons: K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, tanh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Smooth noise in a 256 x 256 tile, three octaves of 8, 16 and 32 cells,\n// built once in setup. The streaks are this tile stretched about twelve times\n// along the flow.\nconst T = 256, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = Math.random() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.45;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The interference colour of the flakes' coat against the optical path\n// difference 2 n d cos(theta), 0 to 1600 nm in 1024 steps. Each entry sums\n// the two-beam reflectance over the spectrum, 400 to 700 nm every 5 nm, under\n// three bell-shaped channel curves at 600, 545 and 455 nm. The air-to-titania\n// face turns its beam over and the titania-to-mica face does not, so the\n// reflectance is (1 - cos(2 pi path / lambda)) / 2. Only the chroma is kept,\n// the colour less its grey, scaled so the second order's strongest is about 1.\nconst LN = 1024, OPD_MAX = 1600;\nconst RAW = new Float32Array(LN * 3);\nfunction buildRaw() {\n  const chan = [[600, 45], [545, 40], [455, 32]], norm = [0, 0, 0], wts = [];\n  for (let l = 400; l \u003c= 700; l += 5) {\n    const w = chan.map(([m, s]) => exp(-(((l - m) / s) ** 2) / 2));\n    wts.push([l, w]);\n    for (let c = 0; c \u003c 3; c++) norm[c] += w[c];\n  }\n  for (let i = 0; i \u003c LN; i++) {\n    const opd = (i / (LN - 1)) * OPD_MAX, acc = [0, 0, 0];\n    for (const [l, w] of wts) {\n      const r = 0.5 - 0.5 * cos((2 * PI * opd) / l);\n      for (let c = 0; c \u003c 3; c++) acc[c] += r * w[c];\n    }\n    for (let c = 0; c \u003c 3; c++) acc[c] /= norm[c];\n    const m = (acc[0] + acc[1] + acc[2]) / 3;\n    for (let c = 0; c \u003c 3; c++) RAW[i * 3 + c] = (acc[c] - m) / 0.45;\n  }\n}\n\n// The angle of a chroma round the grey axis, red at 0.\nconst chromaAngle = (r, g, b) => atan2((sqrt(3) / 2) * (g - b), r - (g + b) / 2);\n\n// Hue turns the table round the grey axis. Warm entries get LIFT: orange and\n// yellow at half light read as brown and olive on the panel, so they are\n// lifted and their deep tones kept lighter.\nconst LUT = new Float32Array(LN * 3), LIFT = new Float32Array(LN);\nlet lutRot = NaN;\nfunction buildLut(a) {\n  const c = cos(a), s = sin(a), k = (1 - c) / 3, q = s / sqrt(3), m0 = c + k, m1 = k - q, m2 = k + q;\n  for (let i = 0, j = 0; j \u003c LN; i += 3, j++) {\n    const r = RAW[i], g = RAW[i + 1], b = RAW[i + 2];\n    LUT[i] = r * m0 + g * m1 + b * m2;\n    LUT[i + 1] = r * m2 + g * m0 + b * m1;\n    LUT[i + 2] = r * m1 + g * m2 + b * m0;\n    const y = cos(chromaAngle(LUT[i], LUT[i + 1], LUT[i + 2]) - 1);\n    LIFT[j] = y > 0 ? y * y : 0;\n  }\n}\n\n// A flat flake's light path: the second order's magenta, 980 nm. A tilted\n// flake sees the light slant through its coat, 2 n d cos(theta) is shorter,\n// and the colour moves on through orange to gold. Hue then turns the table so\n// the flat colour sits on the knob's hue and the gold on its neighbour.\nconst BASE = 980;\nlet baseAng = 0;\n\nexport function setup(params) {\n  buildTex();\n  buildRaw();\n  const bi = round((BASE / OPD_MAX) * (LN - 1)) * 3;\n  baseAng = chromaAngle(RAW[bi], RAW[bi + 1], RAW[bi + 2]);\n  lutRot = NaN;\n  params.s = {\n    t: 0, flow: 0, hue: 0, shift: 0, sheen: 0.06, stir: -1,\n    u: new Float32Array(N), h: new Float32Array(N), big: new Float32Array(N), fine: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.shift = cl(k[2], 0, 1);\n  P.sheen = cl(k[3], 0, 1);\n  P.t += d;\n  P.flow += d * cl(k[1], 0.2, 3);\n  if (P.stir >= 0) {\n    P.stir += d;\n    if (P.stir > 12) P.stir = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.stir = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const rot = 2 * PI * (P.hue + 0.97) - baseAng;\n  if (rot !== lutRot) buildLut((lutRot = rot));\n  const ub = P.u, hb = P.h, bb = P.big, fb = P.fine, t = P.t, f = P.flow;\n\n  // Across-the-flow coordinate u: the panel's x bent by two slow warps, one\n  // carried down by the pour and one drifting on its own. A streak is a line\n  // of constant u. The spatula pushes u aside above its edge.\n  const sa0 = P.stir, sy = sa0 >= 0 ? -0.3 + (4.6 * sa0) / 2.5 : 0;\n  const sAmp = sa0 \u003c 0 ? 0 : 0.32 * (sa0 \u003c 2.5 ? 1 : exp(-(sa0 - 2.5) / 1.6));\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, push = sAmp > 0 ? sAmp * 0.5 * (1 + tanh((sy - Y) / 0.22)) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const X = x / 32;\n      ub[y * W + x] = X + tap(X * 6 + 40, Y * 5 - f * 0.5 + 7) * 1.4 + tap(X * 3 + t * 0.3, Y * 3 + 90) * 0.9 - push * sin((PI * (x + 0.5)) / W);\n    }\n  }\n  // The surface: broad swells (big) and fine striations (fine), both long\n  // along u. Where the warp squeezes the striations finer than two LEDs can\n  // hold, they fade out instead of breaking into stair steps.\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, u = ub[i];\n      const dx = ub[y * W + (x \u003c W - 1 ? x + 1 : x)] - ub[y * W + (x > 0 ? x - 1 : x)], dy = ub[yd + x] - ub[yu + x];\n      const over = 27 * sqrt(dx * dx + dy * dy) - 2;\n      const big = tap(u * 22 + 130, Y * 4 - f * 0.6);\n      const fine = tap(u * 55, Y * 4 - f * 3) / (1 + (over > 0 ? over * over : 0));\n      bb[i] = big;\n      fb[i] = fine;\n      hb[i] = big + fine * 0.12;\n    }\n  }\n\n  const sh = P.shift, sp = 0.2 + 0.8 * P.sheen;\n  // How much shorter a fully tilted flake's path is, and how much the coat's\n  // thickness varies along the striations.\n  const dmax = 0.03 + 0.115 * sh, thin = 10 + 40 * sh;\n  // A long strip light seen in the surface. Its reflection sweeps across and\n  // back every 21 s with a second, dimmer strip trailing it; Sheen narrows both.\n  const sw = 0.8 - 0.65 * sp, iw = 1 / sw, amp = 0.46 + 0.3 * sp;\n  const sc = 1.2 * sin(t * 0.3), sc2 = sc + (sc > 0 ? -1.6 : 1.6), sa = 0.25 * sin(t * 0.13);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, xl = y * W + (x > 0 ? x - 1 : x), xr = y * W + (x \u003c W - 1 ? x + 1 : x);\n      const hx = (hb[xr] - hb[xl]) * 8, hy = (hb[yd + x] - hb[yu + x]) * 8;\n      const n2 = 1 / (1 + hx * hx + hy * hy);\n      // The straight-on view reflected, r = 2 (n.v) n - v, on a swatch that\n      // bulges a little, so the strip lands as one broad band.\n      const bulge = 0.8 * ((x - 32) / 32 + (y - 64) / 160);\n      const rq = -2 * n2 * (hx + sa * hy) + bulge, q = (rq - sc) * iw, q2 = (rq - sc2) * iw;\n      const glow = exp(-q * q) + 0.6 * exp(-q2 * q2);\n      // The flakes lie along the flow and tilt with the fine striations. A\n      // tilted flake sees the light at an angle, which shortens its path:\n      // flip runs from 0 for flakes within 18 degrees of flat to 1 past 45.\n      const fx = ((fb[xr] - fb[xl]) * 4 + hx * 0.4) * 2.2, fy = ((fb[yd + x] - fb[yu + x]) * 4 + hy * 0.4) * 2.2;\n      const c2 = 1 / (1 + fx * fx + fy * fy);\n      const a = cl((0.9 - c2) * 2.5, 0, 1), flip = a * a * (3 - 2 * a);\n      const j = cl(round((((BASE + thin * fb[i]) * (1 - dmax * flip)) / OPD_MAX) * (LN - 1)), 0, LN - 1), li = j * 3;\n      // The flakes catch the strip in finer lines of their own.\n      const fq = (bulge - 2 * c2 * (fx + sa * fy) - sc) * 2.2;\n      const gl = 0.75 * glow + 0.25 * exp(-fq * fq);\n      // Deep tones only in the troughs of the broad swells.\n      const B = bb[i], deep = B \u003c -0.1 ? (B > -0.35 ? (-0.1 - B) / 0.25 : 1) : 0;\n      let lum = 0.64 - 0.12 * sp + amp * gl - 0.26 * deep + (0.1 * flip * dmax) / 0.13;\n      if (lum > 0.95) lum = 0.95 + (lum - 0.95) * 0.4;\n      const sat = 0.45 + 0.12 * sp - 0.32 * gl + 0.45 * deep + 0.3 * sh * flip;\n      const yl = LIFT[j], L = (lum + 0.12 * yl + 0.2 * yl * deep) * 235, S = sat * (1 - 0.3 * yl);\n      display.setPixel(x, y, cl(L * (1 + S * LUT[li]), 0, 255), cl(L * (1 + S * LUT[li + 1]), 0, 255), cl(L * (1 + S * LUT[li + 2]), 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that."},{"name":"Shift","min":0,"max":1,"about":"The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold."},{"name":"Sheen","min":0,"max":1,"about":"The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour."}],"start":[0,2,0,0.06],"measures":{"motion":0.0507,"detail":0.0087,"edges":0,"complexity":1.7213,"coverage":1,"colour":0.1379,"drift":0.0591},"knobResponse":[0.2049,0.0688,0.0476,0.2033]},{"slug":"peel-off","title":"Peel-Off","family":"cosmetic","round":33,"note":"보랏빛 젤 막이 진줏빛 살결을 덮고, 위에서부터 벗겨지는 막이 옅은 안쪽을 드러낸 원통으로 말려 128줄을 내려가요. 막이 아래로 빠지면 젖은 새 막이 위에서 흘러내려 반무광으로 마르고, K3 은 그 막을 비치는 얇은 막에서 거의 불투명한 막까지 두껍게 해요. K1 은 색상환을 다 돌고, 누르면 바로 벗기기 시작해요.","idea":"A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.","buttons":"K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.","code":"// ===== Patternflow pattern =====\n// Title:   Peel-Off\n// Family:  cosmetic\n// Idea:    A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a peel-off gel mask lifted off in one sheet\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1\n//\n// Knob 1: Hue. The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive.\n// Knob 2: Speed. How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower.\n// Knob 3: Thickness. How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine.\n// Knob 4: Curl. How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40.\n// Buttons: K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells, built once: the pearl of the skin and the gel's uneven thickness.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 7 + o * 9973) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// Phases: the film peels, the skin shows bare, a new coat flows on, it dries.\nconst PEEL = 0, BARE = 1, COAT = 2, DRY = 3;\nconst PEEL_T = 7.5, BARE_T = 1.2, COAT_T = 2.4, DRY_T = 3.8;\n\n// The light: above and a little left, in front.\nconst LX = -0.15, LY = -0.75, LZ = -0.64, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst HX = LX * LN, HY = LY * LN, HZ = LZ * LN - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    t: 0, hue: 0, speed: 2, thick: 0, curl: 0.06,\n    phase: PEEL, pt: 0, coatAge: 99, queue: false,\n    yf: new Float32Array(W), rr: new Float32Array(W), roll: 0, R0: 6,\n    unc: new Float32Array(N).fill(-1),\n    sticks: [{ x: 20, w: 9, a: 4, age: -0.8, len: 1.2 }, { x: 46, w: 7, a: 3.5, age: -2.6, len: 1.0 }],\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n}\n\n// Where the coat's leading edge is, pt seconds into the coat: it flows fast\n// from the top and slows as it reaches the bottom.\nconst coatFront = (pt) => -4 + 136 * (1 - (1 - min(1, pt / COAT_T)) ** 2);\n// When it passed row y, for how wet that row still is.\nconst coatPassed = (y) => COAT_T * (1 - sqrt(cl(1 - (y + 4) / 136, 0, 1)));\n\n// The peel line: it starts above the top edge and leaves below the bottom.\nfunction peelY(P, pr) {\n  const span = H + 2.6 * P.R0 + 6, e = pr \u003c 0.08 ? (pr * pr) / 0.16 : pr - 0.04;\n  return -1.3 * P.R0 - 2 + (span * e) / 0.96;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], 0, 1);\n  P.curl = cl(k[3], 0, 1);\n  P.R0 = 5.5 + 10 * P.curl;\n  const d = (d0 * P.speed) / 2;\n  P.t += d;\n  P.pt += d;\n  P.coatAge += d;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.phase === DRY) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n    else if (P.phase === BARE) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0), (P.queue = true);\n    else if (P.phase === COAT) P.queue = true;\n  }\n  if (P.phase === PEEL && P.pt >= PEEL_T) (P.phase = BARE), (P.pt = 0);\n  else if (P.phase === BARE && P.pt >= BARE_T) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0);\n  else if (P.phase === COAT && P.pt >= COAT_T) {\n    P.phase = P.queue ? PEEL : DRY;\n    P.pt = 0;\n    P.queue = false;\n    if (P.phase === PEEL) P.unc.fill(-1);\n  } else if (P.phase === DRY && P.pt >= DRY_T) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n\n  // Spots where the gel holds on. Each one holds the peel line back for about\n  // a second while the film stretches, up to 5 rows, then lets go: the line\n  // snaps forward past straight and settles in a fifth of a second.\n  for (const s of P.sticks) {\n    s.age += d;\n    if (s.age > s.len + 0.35) {\n      s.age = -0.3 - 1.4 * Math.random();\n      s.x = 6 + Math.random() * 52;\n      s.w = 6 + Math.random() * 6;\n      s.a = 2.5 + Math.random() * 3;\n      s.len = 0.8 + Math.random() * 0.6;\n    }\n  }\n  if (P.phase === PEEL) {\n    const pr = P.pt / PEEL_T, Y = peelY(P, pr), t = P.t;\n    // The roll gathers the sheet and grows by half on its way down.\n    const R = P.R0 * (0.85 + 0.45 * pr);\n    P.roll = Y;\n    for (let x = 0; x \u003c W; x++) {\n      let y = Y + 1.3 * sin(0.11 * x + 0.9 * t) + 0.8 * sin(0.27 * x - 1.4 * t + 1) + 1.2 * tap(x * 0.9, t * 3);\n      for (const s of P.sticks) {\n        if (s.age \u003c 0) continue;\n        const g = exp(-(((x - s.x) / s.w) ** 2));\n        let lag;\n        if (s.age \u003c s.len) lag = s.a * (s.age / s.len) ** 1.5;\n        else {\n          const q = s.age - s.len;\n          lag = s.a * exp(-q / 0.07) * cos(q * 26);\n        }\n        y -= lag * g;\n      }\n      P.yf[x] = y;\n      P.rr[x] = R * (1 + 0.07 * sin(0.2 * x + 0.5 * t));\n      // Skin the peel has just passed over keeps a fresh glow for a while.\n      const top = min(H, max(0, floor(y)));\n      for (let yy = 0; yy \u003c top; yy++) {\n        const p = yy * W + x;\n        if (P.unc[p] \u003c 0) P.unc[p] = t;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const t = P.t, ph = P.phase, k3 = P.thick, tint = P.tint;\n  if (P.lastHue !== P.hue) {\n    // From red through orange and gold to lime the gel is lifted towards\n    // coral, peach, butter and pale lime: less saturation and more light than\n    // the skin, so it reads as a lit jelly. At 0.6 of full these hues read as\n    // brick, tan, khaki and olive.\n    let h = P.hue + 0.78;\n    h -= floor(h);\n    let dh = h - 0.13;\n    if (dh > 0.5) dh -= 1;\n    P.warm = sm(1 - abs(dh) / 0.21);\n    hsv(h, 0.68 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm, tr = tint[0], tg = tint[1], tb = tint[2];\n  // The gel's own colour at the start knobs is about 0.6 of full: deep enough\n  // that the peel reads as a change of light, not only of colour.\n  const deepV = 0.6 + 0.65 * warm - 0.14 * k3 * (1 - warm), op = 0.55 + 0.4 * k3;\n  const cf = ph === COAT ? coatFront(P.pt) : 0;\n  // A strip light's reflection drifts slowly across the gel.\n  const sweep = 52 + 34 * sin(t * 0.21);\n  // The broad glow on the skin wanders.\n  const gx = 32 + 20 * sin(t * 0.17), gy = 64 + 40 * sin(t * 0.11 + 1);\n\n  for (let x = 0; x \u003c W; x++) {\n    const yf = P.yf[x], R = P.rr[x], wob = 1.5 * sin(0.2 * x + 3 * P.pt) + sin(0.37 * x - 2 * P.pt);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      // Is there gel here, and how wet is it?\n      let film;\n      if (ph === PEEL) film = y > yf;\n      else if (ph === DRY) film = true;\n      else if (ph === BARE) film = false;\n      else film = y \u003c cf + wob;\n      const wet = film ? exp(-max(0, P.coatAge - coatPassed(y)) / 1.4) : 0;\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and mint\n      // across the panel, a broad soft glow that wanders, fine shimmer, and a\n      // fresh glow where the film has just come off.\n      const q = 0.5 * tap(x * 0.45 + 7, y * 0.45 + t * 0.8) + (x * 0.6 + y) / 170 + t * 0.03;\n      const gl = exp(-((x - gx) ** 2 + (y - gy) ** 2 * 0.3) / 1300);\n      const fr = P.unc[p] >= 0 ? exp(-(t - P.unc[p]) / 2.2) : 0;\n      const L = 0.8 + 0.13 * gl + 0.1 * fr + 0.02 * (hash(p) - 0.5);\n      let r = (1 + 0.035 * cos(TAU * q) + 0.03 * fr) * L;\n      let g = (0.875 + 0.03 * cos(TAU * (q - 0.33))) * L;\n      let b = (0.83 + 0.04 * cos(TAU * (q - 0.67)) + 0.015 * fr) * L;\n      const hs = hash(p + 101);\n      if (hs \u003c 0.022) {\n        const tw = max(0, sin(t * (2.4 + 40 * hs) + hash(p + 5) * 40)) ** 10 * (0.4 + 0.3 * gl);\n        r += tw;\n        g += tw;\n        b += tw;\n      }\n\n      if (film) {\n        // The gel: its own deep colour over the skin seen through it, uneven\n        // in thickness, deeper while wet. Wet, the strip light shows as a\n        // sharp band that the coat's ripples bend; dry, a broad soft sheen\n        // over a fine satin grain.\n        const th = tap(x * 0.8 + 60, y * 0.8 + 31);\n        const dv = deepV * (1 + (0.2 * th - 0.1 * wet) * (1 - 0.7 * warm)), thr = 1 - op;\n        r = tr * dv * op + r * (0.5 + 0.5 * tr) * thr * 0.8;\n        g = tg * dv * op + g * (0.5 + 0.5 * tg) * thr * 0.8;\n        b = tb * dv * op + b * (0.5 + 0.5 * tb) * thr * 0.8;\n        const rip = ph === COAT ? 2.5 * wet * sin((y - cf) * 0.32 - P.pt * 5) * exp(-max(0, cf - y) / 30) : 0;\n        const band = x * 0.5 + y * 0.42 + th * 4 + rip - sweep;\n        const wd = 13 - 8.5 * wet, amp = 0.15 + 0.12 * k3 + 0.55 * wet;\n        let hl = amp * exp(-((band / wd) ** 2)) + 0.3 * wet * exp(-(((band + 24) / 2.5) ** 2));\n        // Behind the coat's edge the wet gel still moves in low swells, each\n        // catching a thin line of light, and they die out as it settles.\n        if (ph === COAT && y \u003c cf + wob) hl += 0.3 * wet * max(0, sin((y - cf - wob) * 0.42 - P.pt * 5)) ** 8 * exp(-(cf - y) / 26);\n        const grain = (1 - wet) * 0.04 * (hash(p + 33) - 0.5);\n        r += hl * (0.85 + 0.15 * tr) + grain;\n        g += hl * (0.85 + 0.15 * tg) + grain;\n        b += hl * (0.85 + 0.15 * tb) + grain;\n        // The new coat's leading edge is a ridge of wet gel: a line of light\n        // on its upper slope, deeper colour where it is thickest.\n        if (ph === COAT) {\n          const e = y - (cf + wob);\n          if (e > -6) {\n            const deep = 1 - 0.28 * exp(-(((e + 1.2) / 1.3) ** 2)), hi = 0.75 * exp(-(((e + 3.2) / 0.9) ** 2));\n            r = r * deep + hi;\n            g = g * deep + hi;\n            b = b * deep + hi;\n          }\n        }\n        // Below the curl, its shadow on the film, lighter on the warm hues,\n        // where a deep shadow turns butter to olive.\n        if (ph === PEEL) {\n          const sd = (0.45 - 0.22 * warm) * exp(-max(0, y - yf - R * 0.9) / (0.7 * R + 1));\n          r *= 1 - sd;\n          g *= 1 - sd;\n          b *= 1 - sd;\n        }\n      }\n\n      // The curl: a cylinder of film lying on the skin along the peel line,\n      // its paler underside out. Its material turns as it rolls, carrying faint\n      // stretch lines and the edge of the outer turn round with it, and light\n      // coming through the gel tints its lower edge.\n      if (ph === PEEL) {\n        const v = (y - yf) / R;\n        if (v \u003c -1 && v > -1.6) {\n          // A little shade on the skin just above the roll.\n          const ao = 0.2 * sm((v + 1.6) / 0.6);\n          r *= 1 - ao;\n          g *= 1 - ao;\n          b *= 1 - ao;\n        }\n        if (v > -1.05 && v \u003c 1.05) {\n          const vv = cl(v, -0.999, 0.999), nz = sqrt(1 - vv * vv);\n          const dif = max(0, (vv * LY - nz * LZ) * LN);\n          const sp = max(0, (vv * HY - nz * HZ) * HN) ** 30;\n          const s = atan2(vv, nz) * R - P.roll;\n          const str = 0.05 * sin(s * 0.8 + tap(x * 0.7, 40) * 5);\n          let ed = (s / (TAU * R)) % 1;\n          if (ed \u003c 0) ed += 1;\n          const line = 0.16 * exp(-(((ed > 0.5 ? ed - 1 : ed) / 0.025) ** 2));\n          const lit = (0.32 + 0.3 * warm + 0.62 * dif) * (1 + str - line);\n          const rim = (1 - nz) ** 2 * 0.4, glow = 0.35 * sm((vv - 0.1) / 0.8);\n          const ur = 0.3 + 0.7 * tr, ug = 0.3 + 0.7 * tg, ub = 0.3 + 0.7 * tb;\n          const cr = ur * lit + (rim + glow) * tr + sp;\n          const cg = ug * lit + (rim + glow) * tg + sp;\n          const cbl = ub * lit + (rim + glow) * tb + sp;\n          const cov = cl((1 - abs(v)) * R + 0.5, 0, 1);\n          r += (cr - r) * cov;\n          g += (cg - g) * cov;\n          b += (cbl - b) * cov;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-peel-off","type":"code","name":"peel-off","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Peel-Off\n// Family:  cosmetic\n// Idea:    A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a peel-off gel mask lifted off in one sheet\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1\n//\n// Knob 1: Hue. The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive.\n// Knob 2: Speed. How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower.\n// Knob 3: Thickness. How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine.\n// Knob 4: Curl. How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40.\n// Buttons: K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells, built once: the pearl of the skin and the gel's uneven thickness.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 7 + o * 9973) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// Phases: the film peels, the skin shows bare, a new coat flows on, it dries.\nconst PEEL = 0, BARE = 1, COAT = 2, DRY = 3;\nconst PEEL_T = 7.5, BARE_T = 1.2, COAT_T = 2.4, DRY_T = 3.8;\n\n// The light: above and a little left, in front.\nconst LX = -0.15, LY = -0.75, LZ = -0.64, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst HX = LX * LN, HY = LY * LN, HZ = LZ * LN - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    t: 0, hue: 0, speed: 2, thick: 0, curl: 0.06,\n    phase: PEEL, pt: 0, coatAge: 99, queue: false,\n    yf: new Float32Array(W), rr: new Float32Array(W), roll: 0, R0: 6,\n    unc: new Float32Array(N).fill(-1),\n    sticks: [{ x: 20, w: 9, a: 4, age: -0.8, len: 1.2 }, { x: 46, w: 7, a: 3.5, age: -2.6, len: 1.0 }],\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n}\n\n// Where the coat's leading edge is, pt seconds into the coat: it flows fast\n// from the top and slows as it reaches the bottom.\nconst coatFront = (pt) => -4 + 136 * (1 - (1 - min(1, pt / COAT_T)) ** 2);\n// When it passed row y, for how wet that row still is.\nconst coatPassed = (y) => COAT_T * (1 - sqrt(cl(1 - (y + 4) / 136, 0, 1)));\n\n// The peel line: it starts above the top edge and leaves below the bottom.\nfunction peelY(P, pr) {\n  const span = H + 2.6 * P.R0 + 6, e = pr \u003c 0.08 ? (pr * pr) / 0.16 : pr - 0.04;\n  return -1.3 * P.R0 - 2 + (span * e) / 0.96;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], 0, 1);\n  P.curl = cl(k[3], 0, 1);\n  P.R0 = 5.5 + 10 * P.curl;\n  const d = (d0 * P.speed) / 2;\n  P.t += d;\n  P.pt += d;\n  P.coatAge += d;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.phase === DRY) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n    else if (P.phase === BARE) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0), (P.queue = true);\n    else if (P.phase === COAT) P.queue = true;\n  }\n  if (P.phase === PEEL && P.pt >= PEEL_T) (P.phase = BARE), (P.pt = 0);\n  else if (P.phase === BARE && P.pt >= BARE_T) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0);\n  else if (P.phase === COAT && P.pt >= COAT_T) {\n    P.phase = P.queue ? PEEL : DRY;\n    P.pt = 0;\n    P.queue = false;\n    if (P.phase === PEEL) P.unc.fill(-1);\n  } else if (P.phase === DRY && P.pt >= DRY_T) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n\n  // Spots where the gel holds on. Each one holds the peel line back for about\n  // a second while the film stretches, up to 5 rows, then lets go: the line\n  // snaps forward past straight and settles in a fifth of a second.\n  for (const s of P.sticks) {\n    s.age += d;\n    if (s.age > s.len + 0.35) {\n      s.age = -0.3 - 1.4 * Math.random();\n      s.x = 6 + Math.random() * 52;\n      s.w = 6 + Math.random() * 6;\n      s.a = 2.5 + Math.random() * 3;\n      s.len = 0.8 + Math.random() * 0.6;\n    }\n  }\n  if (P.phase === PEEL) {\n    const pr = P.pt / PEEL_T, Y = peelY(P, pr), t = P.t;\n    // The roll gathers the sheet and grows by half on its way down.\n    const R = P.R0 * (0.85 + 0.45 * pr);\n    P.roll = Y;\n    for (let x = 0; x \u003c W; x++) {\n      let y = Y + 1.3 * sin(0.11 * x + 0.9 * t) + 0.8 * sin(0.27 * x - 1.4 * t + 1) + 1.2 * tap(x * 0.9, t * 3);\n      for (const s of P.sticks) {\n        if (s.age \u003c 0) continue;\n        const g = exp(-(((x - s.x) / s.w) ** 2));\n        let lag;\n        if (s.age \u003c s.len) lag = s.a * (s.age / s.len) ** 1.5;\n        else {\n          const q = s.age - s.len;\n          lag = s.a * exp(-q / 0.07) * cos(q * 26);\n        }\n        y -= lag * g;\n      }\n      P.yf[x] = y;\n      P.rr[x] = R * (1 + 0.07 * sin(0.2 * x + 0.5 * t));\n      // Skin the peel has just passed over keeps a fresh glow for a while.\n      const top = min(H, max(0, floor(y)));\n      for (let yy = 0; yy \u003c top; yy++) {\n        const p = yy * W + x;\n        if (P.unc[p] \u003c 0) P.unc[p] = t;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const t = P.t, ph = P.phase, k3 = P.thick, tint = P.tint;\n  if (P.lastHue !== P.hue) {\n    // From red through orange and gold to lime the gel is lifted towards\n    // coral, peach, butter and pale lime: less saturation and more light than\n    // the skin, so it reads as a lit jelly. At 0.6 of full these hues read as\n    // brick, tan, khaki and olive.\n    let h = P.hue + 0.78;\n    h -= floor(h);\n    let dh = h - 0.13;\n    if (dh > 0.5) dh -= 1;\n    P.warm = sm(1 - abs(dh) / 0.21);\n    hsv(h, 0.68 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm, tr = tint[0], tg = tint[1], tb = tint[2];\n  // The gel's own colour at the start knobs is about 0.6 of full: deep enough\n  // that the peel reads as a change of light, not only of colour.\n  const deepV = 0.6 + 0.65 * warm - 0.14 * k3 * (1 - warm), op = 0.55 + 0.4 * k3;\n  const cf = ph === COAT ? coatFront(P.pt) : 0;\n  // A strip light's reflection drifts slowly across the gel.\n  const sweep = 52 + 34 * sin(t * 0.21);\n  // The broad glow on the skin wanders.\n  const gx = 32 + 20 * sin(t * 0.17), gy = 64 + 40 * sin(t * 0.11 + 1);\n\n  for (let x = 0; x \u003c W; x++) {\n    const yf = P.yf[x], R = P.rr[x], wob = 1.5 * sin(0.2 * x + 3 * P.pt) + sin(0.37 * x - 2 * P.pt);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      // Is there gel here, and how wet is it?\n      let film;\n      if (ph === PEEL) film = y > yf;\n      else if (ph === DRY) film = true;\n      else if (ph === BARE) film = false;\n      else film = y \u003c cf + wob;\n      const wet = film ? exp(-max(0, P.coatAge - coatPassed(y)) / 1.4) : 0;\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and mint\n      // across the panel, a broad soft glow that wanders, fine shimmer, and a\n      // fresh glow where the film has just come off.\n      const q = 0.5 * tap(x * 0.45 + 7, y * 0.45 + t * 0.8) + (x * 0.6 + y) / 170 + t * 0.03;\n      const gl = exp(-((x - gx) ** 2 + (y - gy) ** 2 * 0.3) / 1300);\n      const fr = P.unc[p] >= 0 ? exp(-(t - P.unc[p]) / 2.2) : 0;\n      const L = 0.8 + 0.13 * gl + 0.1 * fr + 0.02 * (hash(p) - 0.5);\n      let r = (1 + 0.035 * cos(TAU * q) + 0.03 * fr) * L;\n      let g = (0.875 + 0.03 * cos(TAU * (q - 0.33))) * L;\n      let b = (0.83 + 0.04 * cos(TAU * (q - 0.67)) + 0.015 * fr) * L;\n      const hs = hash(p + 101);\n      if (hs \u003c 0.022) {\n        const tw = max(0, sin(t * (2.4 + 40 * hs) + hash(p + 5) * 40)) ** 10 * (0.4 + 0.3 * gl);\n        r += tw;\n        g += tw;\n        b += tw;\n      }\n\n      if (film) {\n        // The gel: its own deep colour over the skin seen through it, uneven\n        // in thickness, deeper while wet. Wet, the strip light shows as a\n        // sharp band that the coat's ripples bend; dry, a broad soft sheen\n        // over a fine satin grain.\n        const th = tap(x * 0.8 + 60, y * 0.8 + 31);\n        const dv = deepV * (1 + (0.2 * th - 0.1 * wet) * (1 - 0.7 * warm)), thr = 1 - op;\n        r = tr * dv * op + r * (0.5 + 0.5 * tr) * thr * 0.8;\n        g = tg * dv * op + g * (0.5 + 0.5 * tg) * thr * 0.8;\n        b = tb * dv * op + b * (0.5 + 0.5 * tb) * thr * 0.8;\n        const rip = ph === COAT ? 2.5 * wet * sin((y - cf) * 0.32 - P.pt * 5) * exp(-max(0, cf - y) / 30) : 0;\n        const band = x * 0.5 + y * 0.42 + th * 4 + rip - sweep;\n        const wd = 13 - 8.5 * wet, amp = 0.15 + 0.12 * k3 + 0.55 * wet;\n        let hl = amp * exp(-((band / wd) ** 2)) + 0.3 * wet * exp(-(((band + 24) / 2.5) ** 2));\n        // Behind the coat's edge the wet gel still moves in low swells, each\n        // catching a thin line of light, and they die out as it settles.\n        if (ph === COAT && y \u003c cf + wob) hl += 0.3 * wet * max(0, sin((y - cf - wob) * 0.42 - P.pt * 5)) ** 8 * exp(-(cf - y) / 26);\n        const grain = (1 - wet) * 0.04 * (hash(p + 33) - 0.5);\n        r += hl * (0.85 + 0.15 * tr) + grain;\n        g += hl * (0.85 + 0.15 * tg) + grain;\n        b += hl * (0.85 + 0.15 * tb) + grain;\n        // The new coat's leading edge is a ridge of wet gel: a line of light\n        // on its upper slope, deeper colour where it is thickest.\n        if (ph === COAT) {\n          const e = y - (cf + wob);\n          if (e > -6) {\n            const deep = 1 - 0.28 * exp(-(((e + 1.2) / 1.3) ** 2)), hi = 0.75 * exp(-(((e + 3.2) / 0.9) ** 2));\n            r = r * deep + hi;\n            g = g * deep + hi;\n            b = b * deep + hi;\n          }\n        }\n        // Below the curl, its shadow on the film, lighter on the warm hues,\n        // where a deep shadow turns butter to olive.\n        if (ph === PEEL) {\n          const sd = (0.45 - 0.22 * warm) * exp(-max(0, y - yf - R * 0.9) / (0.7 * R + 1));\n          r *= 1 - sd;\n          g *= 1 - sd;\n          b *= 1 - sd;\n        }\n      }\n\n      // The curl: a cylinder of film lying on the skin along the peel line,\n      // its paler underside out. Its material turns as it rolls, carrying faint\n      // stretch lines and the edge of the outer turn round with it, and light\n      // coming through the gel tints its lower edge.\n      if (ph === PEEL) {\n        const v = (y - yf) / R;\n        if (v \u003c -1 && v > -1.6) {\n          // A little shade on the skin just above the roll.\n          const ao = 0.2 * sm((v + 1.6) / 0.6);\n          r *= 1 - ao;\n          g *= 1 - ao;\n          b *= 1 - ao;\n        }\n        if (v > -1.05 && v \u003c 1.05) {\n          const vv = cl(v, -0.999, 0.999), nz = sqrt(1 - vv * vv);\n          const dif = max(0, (vv * LY - nz * LZ) * LN);\n          const sp = max(0, (vv * HY - nz * HZ) * HN) ** 30;\n          const s = atan2(vv, nz) * R - P.roll;\n          const str = 0.05 * sin(s * 0.8 + tap(x * 0.7, 40) * 5);\n          let ed = (s / (TAU * R)) % 1;\n          if (ed \u003c 0) ed += 1;\n          const line = 0.16 * exp(-(((ed > 0.5 ? ed - 1 : ed) / 0.025) ** 2));\n          const lit = (0.32 + 0.3 * warm + 0.62 * dif) * (1 + str - line);\n          const rim = (1 - nz) ** 2 * 0.4, glow = 0.35 * sm((vv - 0.1) / 0.8);\n          const ur = 0.3 + 0.7 * tr, ug = 0.3 + 0.7 * tg, ub = 0.3 + 0.7 * tb;\n          const cr = ur * lit + (rim + glow) * tr + sp;\n          const cg = ug * lit + (rim + glow) * tg + sp;\n          const cbl = ub * lit + (rim + glow) * tb + sp;\n          const cov = cl((1 - abs(v)) * R + 0.5, 0, 1);\n          r += (cr - r) * cov;\n          g += (cg - g) * cov;\n          b += (cbl - b) * cov;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower."},{"name":"Thickness","min":0,"max":1,"about":"How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine."},{"name":"Curl","min":0,"max":1,"about":"How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40."}],"start":[0,2,0,0.06],"measures":{"motion":0.2317,"detail":0.0136,"edges":0.1088,"complexity":2.1892,"coverage":1,"colour":0.193,"drift":0.226},"knobResponse":[0.1816,0.2118,0.0647,0.0647]},{"slug":"peg-light","title":"Peg Light","family":"toy","round":18,"note":"1967년 Lite-Brite 처럼 검은 판의 엇갈린 구멍에 색 페그를 하나씩 꽂아 로켓, 돛배, 화분, 물고기, 집, 광대 그림을 채워요. 다 차면 4초 머문 뒤 페그가 위에서부터 쓸려 빠지고 다음 종이가 올라가요. K1 을 누르면 판을 비우고 같은 그림을 처음부터 다시 꽂아요.","idea":"Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.","buttons":"K1 tap pushes every peg out and starts the same picture again.","code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-peg-light","type":"code","name":"peg-light","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulb","min":0,"max":1,"about":"The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first."},{"name":"Speed","min":0.2,"max":3,"about":"Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too."},{"name":"Picture","min":0,"max":5,"about":"Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order."},{"name":"Glow","min":0,"max":1,"about":"How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.0352,"detail":0.2377,"edges":0.8627,"complexity":0.6614,"coverage":0.1604,"colour":0.2171,"drift":0.0512},"knobResponse":[0.0548,0.0566,0.1395,0.0943]},{"slug":"pendulum-wave","title":"Pendulum Wave","family":"physics","round":24,"note":"길이가 조금씩 다른 진자 줄을 위에서 내려다봐요. 한꺼번에 놓은 추들이 한 줄로 흔들리다가 뱀처럼 휘고, 세 줄, 두 줄로 엇갈렸다가 28초 만에 다시 한 줄로 모여요. K1 이 강철에서 놋쇠와 구리를 지나 무지개 유리구슬까지 추를 바꾸고, K4 를 올리면 추가 지나간 자리에 빛 꼬리가 남아요.","idea":"Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.","buttons":"K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.","code":"// ===== Patternflow pattern =====\n// Title:   Pendulum Wave\n// Family:  physics\n// Idea:    Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the pendulum wave demonstration of the Harvard Natural Sciences Lecture Demonstrations, fifteen pendulums tuned to 51 to 65 swings a minute\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1\n//\n// Knob 1: Finish. The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow.\n// Knob 2: Speed. The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again.\n// Knob 3: Pendulums. How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22.\n// Knob 4: Trails. A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them.\n// Buttons: K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, cos, sqrt, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// The beam's centre line (it covers columns 30 and 31) and the swing.\nconst BX = 31;\nconst AMP = 22;\n// One cycle at Speed 2, in seconds, and how many times the longest\n// pendulum swings in it; each shorter one swings once more.\nconst TC = 28;\nconst N0 = 22;\n// The lamp, off the left edge, and the beam's height over the table, in\n// LEDs. The longest string is 13 LEDs, so its bob hangs 4 over the table.\nconst [LX, LY, LZ] = [-34, 58, 120];\nconst ZB = 17;\nconst L0 = 13;\nconst MAXN = 24;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The lamp's colour, and the metal, at Finish 0, 1/4, 1/2 and 3/4 and on.\nconst LAMPS = [\n  [184, 206, 248],\n  [255, 214, 160],\n  [255, 192, 142],\n  [238, 236, 226],\n  [238, 236, 226],\n];\nconst METALS = [\n  [196, 208, 226],\n  [236, 172, 72],\n  [240, 122, 74],\n  [240, 122, 74],\n  [240, 122, 74],\n];\nconst stop = (T, f) => {\n  const u = cl(f, 0, 1) * 4, i = min(3, floor(u));\n  return T[i].map((v, c) => mix(v, T[i + 1][c], u - i));\n};\n\n// The table: walnut boards running along the beam, and a pale epoxy bench.\n// The lamp's pool on it never moves, so it is worked out once.\nfunction build(P) {\n  const seams = [11, 37, 58];\n  const ax = 14 - LX, ay = 62 - LY, az = -LZ, al = sqrt(ax * ax + ay * ay + az * az);\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    let pk = 0;\n    for (const s of seams) if (x >= s) pk++;\n    const sx = x + pk * 17.3, warp = 2.2 * vn(sx * 0.12, y * 0.018 + pk * 7);\n    const grain = vn(sx * 0.62 + warp, y * 0.04 + pk * 13), fine = vn(sx * 1.9, y * 0.22 + pk * 5);\n    const k = (0.74 + 0.36 * grain + 0.12 * fine) * (seams.includes(x) ? 0.6 : 1) * (0.88 + 0.24 * hash(pk, 99));\n    P.wood[i * 3] = 0.76 * k;\n    P.wood[i * 3 + 1] = 0.37 * k;\n    P.wood[i * 3 + 2] = 0.16 * k;\n    const b = 0.95 + 0.05 * hash(x, y + 300) + 0.05 * vn(x * 0.25, y * 0.25);\n    P.bench[i * 3] = 0.8 * b;\n    P.bench[i * 3 + 1] = 0.84 * b;\n    P.bench[i * 3 + 2] = 0.8 * b;\n    // Inverse square and the floor's slant, inside the shade's cone.\n    const vx = x + 0.5 - LX, vy = y + 0.5 - LY, d = sqrt(vx * vx + vy * vy + LZ * LZ);\n    const ca = (vx * ax + vy * ay + LZ * -az) / (d * al);\n    const p = (LZ / d) ** 3 * (0.25 + 0.75 * sm(0.83, 0.97, ca));\n    P.pool[i] = p;\n    top = max(top, p);\n    // The beam's shadow: it lies level, so its shadow is a straight band.\n    const bx = LX + (BX - LX) * (LZ / (LZ - ZB)), hw = LZ / (LZ - ZB);\n    P.beamD[i] = 0.5 * (1 - sm(hw - 0.9, hw + 0.9, Math.abs(x + 0.5 - bx)));\n  }\n  for (let i = 0; i \u003c N; i++) P.pool[i] /= top;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    wood: F(N * 3), bench: F(N * 3), pool: F(N), beamD: F(N), D: F(N), tr: F(N * 3), f: F(N * 3),\n    x: F(MAXN), prev: F(MAXN), from: F(MAXN), y: F(MAXN), z: F(MAXN), r: F(MAXN),\n    c: 0, n: 0, hold: 0.3, board: 1, fin: 0, tau: 0.05, first: true,\n  };\n  params.s.from.fill(BX + AMP);\n  build(params.s);\n}\n\n// Where each pendulum hangs, how high its bob is and how big it looks.\nfunction layout(P, n) {\n  P.n = n;\n  const s = H / n, rb = min(2.35, 0.31 * s);\n  for (let i = 0; i \u003c MAXN; i++) {\n    P.y[i] = floor(s / 2 + s * i) + 0.5;\n    // A string's length goes as the square of its period.\n    P.z[i] = ZB - L0 * (N0 / (N0 + i)) ** 2;\n    P.r[i] = rb * (0.93 + 0.022 * P.z[i]);\n  }\n}\n\n// The colours the finish gives the lamp and each bob.\nfunction colours(P) {\n  const f = P.fin, n = P.n;\n  P.lamp = stop(LAMPS, f);\n  P.glass = sm(0.52, 0.74, f);\n  P.benchK = sm(0.5, 0.74, f);\n  // Brass and copper tint their own highlights; steel and glass do not.\n  P.tint = (0.15 + 0.7 * sm(0, 0.25, f)) * (1 - P.glass);\n  const m = stop(METALS, f), u = sm(0.75, 1, f);\n  P.col = [];\n  // Sea-green glass at 3/4, opening into a rainbow down the row at 1.\n  for (let i = 0; i \u003c n; i++) {\n    const b = hsv(mix(0.42, 0.02 + (0.8 * i) / (n - 1), u), 0.82, 1);\n    P.col.push(m.map((v, c) => mix(v, b[c], P.glass)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const real = cl(dt || 0, 0, 0.1), d = (real * cl(k[1], 0.2, 3)) / 2;\n  P.fin = cl(k[0], 0, 1);\n  P.tau = 0.05 + 0.3 * cl(k[3], 0, 1) ** 1.6;\n  const n = cl(round(k[2]), 16, 24);\n  if (n !== P.n) layout(P, n);\n  colours(P);\n\n  // The button: a board comes in, every bob is caught against it, and all\n  // are let go at once.\n  if (input.btnPressed && input.btnPressed[0] && P.hold \u003c 0) {\n    P.hold = 0;\n    P.from.set(P.x);\n  }\n  if (P.hold >= 0) {\n    P.hold += real;\n    const e = sm(0.05, 0.6, P.hold);\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = mix(P.from[i], BX + AMP, e);\n    P.board = sm(0, 0.35, P.hold);\n    if (P.hold >= 0.95) (P.hold = -1), (P.c = 0);\n  } else {\n    P.c = (P.c + d) % TC;\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = BX + AMP * cos((2 * PI * (N0 + i) * P.c) / TC);\n    P.board = max(0, P.board - real * 5);\n  }\n  if (P.first) (P.first = false), P.prev.set(P.x);\n\n  // The long exposure fades in the pendulums' own time, so a trail is as\n  // long on the table at any speed. Each bob paints the way it came this\n  // frame, older parts dimmer.\n  const tr = P.tr, fade = exp(-d / P.tau), span = max(d, 0.004);\n  for (let i = 0; i \u003c tr.length; i++) tr[i] *= fade;\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = P.prev[i], x1 = P.x[i], y = P.y[i], rt = P.r[i] * 0.8, steps = max(1, ceil(Math.abs(x1 - x0) / 0.6));\n    const col = P.col[i].map((v, c) => (v * 0.55 + P.lamp[c] * 0.25) * 0.85);\n    for (let s = 1; s \u003c= steps; s++) {\n      const t = s / steps, xs = mix(x0, x1, t), lev = exp((-(1 - t) * span) / P.tau);\n      for (let yy = floor(y - rt - 1); yy \u003c= y + rt + 1; yy++)\n        for (let xx = floor(xs - rt - 1); xx \u003c= xs + rt + 1; xx++) {\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const dx = xx + 0.5 - xs, dy = yy + 0.5 - y, q = (dx * dx + dy * dy) / (rt * rt);\n          if (q >= 1.6) continue;\n          const a = lev * exp(-1.6 * q), o = (yy * W + xx) * 3;\n          for (let c = 0; c \u003c 3; c++) tr[o + c] = max(tr[o + c], col[c] * a);\n        }\n    }\n  }\n  P.prev.set(P.x);\n}\n\n// Where the lamp throws a point at height z onto the table.\nconst proj = (x, y, z) => {\n  const k = LZ / (LZ - z);\n  return [LX + (x - LX) * k, LY + (y - LY) * k];\n};\n\n// A shiny ball, sampled two by two inside each LED.\nfunction ball(F, cx, cy, cz, r, base, lamp, g, tint) {\n  const sc = lamp.map((v, c) => v * mix(1, (base[c] / 255) * 1.15, tint));\n  // The light leans twice as far as the lamp really stands, so the glint\n  // sits clearly on the lamp's side of a ball five LEDs across.\n  let lx = 2 * (LX - cx), ly = 2 * (LY - cy), lz = LZ - cz;\n  const ll = sqrt(lx * lx + ly * ly + lz * lz);\n  (lx /= ll), (ly /= ll), (lz /= ll);\n  let hx = lx, hy = ly, hz = lz + 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  (hx /= hl), (hy /= hl), (hz /= hl);\n  const lxy = sqrt(lx * lx + ly * ly) || 1;\n  const col = [0, 0, 0];\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      let cov = 0;\n      col[0] = col[1] = col[2] = 0;\n      for (let sy = 0; sy \u003c 2; sy++)\n        for (let sx = 0; sx \u003c 2; sx++) {\n          const dx = (x + 0.25 + 0.5 * sx - cx) / r, dy = (y + 0.25 + 0.5 * sy - cy) / r, q = dx * dx + dy * dy;\n          if (q >= 1) continue;\n          cov += 0.25;\n          const nz = sqrt(1 - q), diff = max(0, dx * lx + dy * ly + nz * lz), nh = max(0, dx * hx + dy * hy + nz * hz), spec = nh ** 18, sheen = nh ** 3;\n          // Metal: the lamp's side lit, the rim holding the dark table.\n          const rim = 0.4 + 0.6 * nz, back = max(0, -(dx * lx + dy * ly) / lxy) * sqrt(q);\n          for (let c = 0; c \u003c 3; c++) {\n            const m = base[c] * (0.1 + 0.85 * diff * sqrt(diff)) * rim, gl = base[c] * (0.3 + 0.25 * diff + 0.9 * back);\n            col[c] += (mix(m, gl, g) + sc[c] * (spec * 1.6 + 0.12 * sheen)) * 0.25;\n          }\n        }\n      if (cov \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = F[o + c] * (1 - cov) + col[c];\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const F = P.f, D = P.D, n = P.n, lamp = P.lamp, g = P.glass, bk = P.benchK;\n\n  // Shadows on the table: the beam, each string and each bob. A bob higher\n  // up throws its shadow further from the lamp and softer.\n  D.set(P.beamD);\n  const sh = [];\n  for (let i = 0; i \u003c n; i++) {\n    const [sx, sy] = proj(P.x[i], P.y[i], P.z[i]), [px, py] = proj(BX, P.y[i], ZB);\n    sh.push([sx, sy]);\n    const rs = P.r[i] * 0.95, pen = 0.45 + 0.09 * P.z[i], dk = (0.9 - 0.02 * P.z[i]) * (1 - 0.15 * g);\n    for (let y = floor(sy - rs - pen - 1); y \u003c= sy + rs + pen + 1; y++)\n      for (let x = floor(sx - rs - pen - 1); x \u003c= sx + rs + pen + 1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const dd = sqrt((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2), v = dk * (1 - sm(rs - pen, rs + pen, dd)), j = y * W + x;\n        if (v > D[j]) D[j] = v;\n      }\n    const len = sqrt((sx - px) ** 2 + (sy - py) ** 2), m = ceil(len * 1.5);\n    for (let s = 0; s \u003c= m; s++) {\n      const t = s / max(1, m), x = floor(mix(px, sx, t)), y = floor(mix(py, sy, t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && D[y * W + x] \u003c 0.2) D[y * W + x] = 0.2;\n    }\n  }\n\n  // The table under the lamp.\n  const fl = 0.42;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const e = (0.1 + 0.9 * P.pool[i] * (1 - D[i])) * fl;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(P.wood[o + c], P.bench[o + c], bk) * lamp[c] * e + P.tr[o + c];\n  }\n  // A glass bead gathers the lamp into a spot of its colour in its shadow.\n  if (g > 0.01)\n    for (let i = 0; i \u003c n; i++) {\n      const [sx, sy] = sh[i], rc = P.r[i] * 0.55, col = P.col[i];\n      for (let y = floor(sy - 3); y \u003c= sy + 3; y++)\n        for (let x = floor(sx - 3); x \u003c= sx + 3; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const q = ((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2) / (rc * rc), a = g * 0.75 * exp(-q) * (0.4 + 0.6 * P.pool[y * W + x]), o = (y * W + x) * 3;\n          for (let c = 0; c \u003c 3; c++) F[o + c] += col[c] * a;\n        }\n    }\n\n  // Strings: a fine line from the beam out to each bob, catching the lamp.\n  for (let i = 0; i \u003c n; i++) {\n    const x1 = P.x[i], y = floor(P.y[i]), a0 = min(BX, x1), a1 = max(BX, x1);\n    for (let x = floor(a0); x \u003c a1; x++) {\n      if (x \u003c 0 || x >= W) continue;\n      const o = (y * W + x) * 3, a = 0.5 * cl(min(x + 1 - a0, a1 - x), 0, 1);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], lamp[c] * 0.5, a);\n    }\n  }\n  // The bobs, the higher ones last.\n  for (let i = 0; i \u003c n; i++) ball(F, P.x[i], P.y[i], P.z[i], P.r[i], P.col[i], lamp, g, P.tint);\n\n  // The release board, a strip of pale wood that holds the row straight.\n  if (P.board > 0.01) {\n    const bx = BX + AMP + 3.2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = floor(bx); x \u003c bx + 2 && x \u003c W; x++) {\n        const o = (y * W + x) * 3, v = x === floor(bx) ? 0.85 : 0.55;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [224, 186, 132][c] * (lamp[c] / 255) * v, P.board);\n      }\n  }\n\n  // The beam over everything: brushed metal, its lamp side bright, with a\n  // clamp at every pivot.\n  for (let y = 0; y \u003c H; y++) {\n    const grain = 0.92 + 0.08 * hash(y, 7);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = (x \u003c BX ? 0.5 : 0.24) * grain;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    const y = floor(P.y[i]);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = x \u003c BX ? 0.78 : 0.4;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-pendulum-wave","type":"code","name":"pendulum-wave","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pendulum Wave\n// Family:  physics\n// Idea:    Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the pendulum wave demonstration of the Harvard Natural Sciences Lecture Demonstrations, fifteen pendulums tuned to 51 to 65 swings a minute\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1\n//\n// Knob 1: Finish. The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow.\n// Knob 2: Speed. The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again.\n// Knob 3: Pendulums. How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22.\n// Knob 4: Trails. A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them.\n// Buttons: K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, cos, sqrt, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// The beam's centre line (it covers columns 30 and 31) and the swing.\nconst BX = 31;\nconst AMP = 22;\n// One cycle at Speed 2, in seconds, and how many times the longest\n// pendulum swings in it; each shorter one swings once more.\nconst TC = 28;\nconst N0 = 22;\n// The lamp, off the left edge, and the beam's height over the table, in\n// LEDs. The longest string is 13 LEDs, so its bob hangs 4 over the table.\nconst [LX, LY, LZ] = [-34, 58, 120];\nconst ZB = 17;\nconst L0 = 13;\nconst MAXN = 24;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The lamp's colour, and the metal, at Finish 0, 1/4, 1/2 and 3/4 and on.\nconst LAMPS = [\n  [184, 206, 248],\n  [255, 214, 160],\n  [255, 192, 142],\n  [238, 236, 226],\n  [238, 236, 226],\n];\nconst METALS = [\n  [196, 208, 226],\n  [236, 172, 72],\n  [240, 122, 74],\n  [240, 122, 74],\n  [240, 122, 74],\n];\nconst stop = (T, f) => {\n  const u = cl(f, 0, 1) * 4, i = min(3, floor(u));\n  return T[i].map((v, c) => mix(v, T[i + 1][c], u - i));\n};\n\n// The table: walnut boards running along the beam, and a pale epoxy bench.\n// The lamp's pool on it never moves, so it is worked out once.\nfunction build(P) {\n  const seams = [11, 37, 58];\n  const ax = 14 - LX, ay = 62 - LY, az = -LZ, al = sqrt(ax * ax + ay * ay + az * az);\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    let pk = 0;\n    for (const s of seams) if (x >= s) pk++;\n    const sx = x + pk * 17.3, warp = 2.2 * vn(sx * 0.12, y * 0.018 + pk * 7);\n    const grain = vn(sx * 0.62 + warp, y * 0.04 + pk * 13), fine = vn(sx * 1.9, y * 0.22 + pk * 5);\n    const k = (0.74 + 0.36 * grain + 0.12 * fine) * (seams.includes(x) ? 0.6 : 1) * (0.88 + 0.24 * hash(pk, 99));\n    P.wood[i * 3] = 0.76 * k;\n    P.wood[i * 3 + 1] = 0.37 * k;\n    P.wood[i * 3 + 2] = 0.16 * k;\n    const b = 0.95 + 0.05 * hash(x, y + 300) + 0.05 * vn(x * 0.25, y * 0.25);\n    P.bench[i * 3] = 0.8 * b;\n    P.bench[i * 3 + 1] = 0.84 * b;\n    P.bench[i * 3 + 2] = 0.8 * b;\n    // Inverse square and the floor's slant, inside the shade's cone.\n    const vx = x + 0.5 - LX, vy = y + 0.5 - LY, d = sqrt(vx * vx + vy * vy + LZ * LZ);\n    const ca = (vx * ax + vy * ay + LZ * -az) / (d * al);\n    const p = (LZ / d) ** 3 * (0.25 + 0.75 * sm(0.83, 0.97, ca));\n    P.pool[i] = p;\n    top = max(top, p);\n    // The beam's shadow: it lies level, so its shadow is a straight band.\n    const bx = LX + (BX - LX) * (LZ / (LZ - ZB)), hw = LZ / (LZ - ZB);\n    P.beamD[i] = 0.5 * (1 - sm(hw - 0.9, hw + 0.9, Math.abs(x + 0.5 - bx)));\n  }\n  for (let i = 0; i \u003c N; i++) P.pool[i] /= top;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    wood: F(N * 3), bench: F(N * 3), pool: F(N), beamD: F(N), D: F(N), tr: F(N * 3), f: F(N * 3),\n    x: F(MAXN), prev: F(MAXN), from: F(MAXN), y: F(MAXN), z: F(MAXN), r: F(MAXN),\n    c: 0, n: 0, hold: 0.3, board: 1, fin: 0, tau: 0.05, first: true,\n  };\n  params.s.from.fill(BX + AMP);\n  build(params.s);\n}\n\n// Where each pendulum hangs, how high its bob is and how big it looks.\nfunction layout(P, n) {\n  P.n = n;\n  const s = H / n, rb = min(2.35, 0.31 * s);\n  for (let i = 0; i \u003c MAXN; i++) {\n    P.y[i] = floor(s / 2 + s * i) + 0.5;\n    // A string's length goes as the square of its period.\n    P.z[i] = ZB - L0 * (N0 / (N0 + i)) ** 2;\n    P.r[i] = rb * (0.93 + 0.022 * P.z[i]);\n  }\n}\n\n// The colours the finish gives the lamp and each bob.\nfunction colours(P) {\n  const f = P.fin, n = P.n;\n  P.lamp = stop(LAMPS, f);\n  P.glass = sm(0.52, 0.74, f);\n  P.benchK = sm(0.5, 0.74, f);\n  // Brass and copper tint their own highlights; steel and glass do not.\n  P.tint = (0.15 + 0.7 * sm(0, 0.25, f)) * (1 - P.glass);\n  const m = stop(METALS, f), u = sm(0.75, 1, f);\n  P.col = [];\n  // Sea-green glass at 3/4, opening into a rainbow down the row at 1.\n  for (let i = 0; i \u003c n; i++) {\n    const b = hsv(mix(0.42, 0.02 + (0.8 * i) / (n - 1), u), 0.82, 1);\n    P.col.push(m.map((v, c) => mix(v, b[c], P.glass)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const real = cl(dt || 0, 0, 0.1), d = (real * cl(k[1], 0.2, 3)) / 2;\n  P.fin = cl(k[0], 0, 1);\n  P.tau = 0.05 + 0.3 * cl(k[3], 0, 1) ** 1.6;\n  const n = cl(round(k[2]), 16, 24);\n  if (n !== P.n) layout(P, n);\n  colours(P);\n\n  // The button: a board comes in, every bob is caught against it, and all\n  // are let go at once.\n  if (input.btnPressed && input.btnPressed[0] && P.hold \u003c 0) {\n    P.hold = 0;\n    P.from.set(P.x);\n  }\n  if (P.hold >= 0) {\n    P.hold += real;\n    const e = sm(0.05, 0.6, P.hold);\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = mix(P.from[i], BX + AMP, e);\n    P.board = sm(0, 0.35, P.hold);\n    if (P.hold >= 0.95) (P.hold = -1), (P.c = 0);\n  } else {\n    P.c = (P.c + d) % TC;\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = BX + AMP * cos((2 * PI * (N0 + i) * P.c) / TC);\n    P.board = max(0, P.board - real * 5);\n  }\n  if (P.first) (P.first = false), P.prev.set(P.x);\n\n  // The long exposure fades in the pendulums' own time, so a trail is as\n  // long on the table at any speed. Each bob paints the way it came this\n  // frame, older parts dimmer.\n  const tr = P.tr, fade = exp(-d / P.tau), span = max(d, 0.004);\n  for (let i = 0; i \u003c tr.length; i++) tr[i] *= fade;\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = P.prev[i], x1 = P.x[i], y = P.y[i], rt = P.r[i] * 0.8, steps = max(1, ceil(Math.abs(x1 - x0) / 0.6));\n    const col = P.col[i].map((v, c) => (v * 0.55 + P.lamp[c] * 0.25) * 0.85);\n    for (let s = 1; s \u003c= steps; s++) {\n      const t = s / steps, xs = mix(x0, x1, t), lev = exp((-(1 - t) * span) / P.tau);\n      for (let yy = floor(y - rt - 1); yy \u003c= y + rt + 1; yy++)\n        for (let xx = floor(xs - rt - 1); xx \u003c= xs + rt + 1; xx++) {\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const dx = xx + 0.5 - xs, dy = yy + 0.5 - y, q = (dx * dx + dy * dy) / (rt * rt);\n          if (q >= 1.6) continue;\n          const a = lev * exp(-1.6 * q), o = (yy * W + xx) * 3;\n          for (let c = 0; c \u003c 3; c++) tr[o + c] = max(tr[o + c], col[c] * a);\n        }\n    }\n  }\n  P.prev.set(P.x);\n}\n\n// Where the lamp throws a point at height z onto the table.\nconst proj = (x, y, z) => {\n  const k = LZ / (LZ - z);\n  return [LX + (x - LX) * k, LY + (y - LY) * k];\n};\n\n// A shiny ball, sampled two by two inside each LED.\nfunction ball(F, cx, cy, cz, r, base, lamp, g, tint) {\n  const sc = lamp.map((v, c) => v * mix(1, (base[c] / 255) * 1.15, tint));\n  // The light leans twice as far as the lamp really stands, so the glint\n  // sits clearly on the lamp's side of a ball five LEDs across.\n  let lx = 2 * (LX - cx), ly = 2 * (LY - cy), lz = LZ - cz;\n  const ll = sqrt(lx * lx + ly * ly + lz * lz);\n  (lx /= ll), (ly /= ll), (lz /= ll);\n  let hx = lx, hy = ly, hz = lz + 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  (hx /= hl), (hy /= hl), (hz /= hl);\n  const lxy = sqrt(lx * lx + ly * ly) || 1;\n  const col = [0, 0, 0];\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      let cov = 0;\n      col[0] = col[1] = col[2] = 0;\n      for (let sy = 0; sy \u003c 2; sy++)\n        for (let sx = 0; sx \u003c 2; sx++) {\n          const dx = (x + 0.25 + 0.5 * sx - cx) / r, dy = (y + 0.25 + 0.5 * sy - cy) / r, q = dx * dx + dy * dy;\n          if (q >= 1) continue;\n          cov += 0.25;\n          const nz = sqrt(1 - q), diff = max(0, dx * lx + dy * ly + nz * lz), nh = max(0, dx * hx + dy * hy + nz * hz), spec = nh ** 18, sheen = nh ** 3;\n          // Metal: the lamp's side lit, the rim holding the dark table.\n          const rim = 0.4 + 0.6 * nz, back = max(0, -(dx * lx + dy * ly) / lxy) * sqrt(q);\n          for (let c = 0; c \u003c 3; c++) {\n            const m = base[c] * (0.1 + 0.85 * diff * sqrt(diff)) * rim, gl = base[c] * (0.3 + 0.25 * diff + 0.9 * back);\n            col[c] += (mix(m, gl, g) + sc[c] * (spec * 1.6 + 0.12 * sheen)) * 0.25;\n          }\n        }\n      if (cov \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = F[o + c] * (1 - cov) + col[c];\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const F = P.f, D = P.D, n = P.n, lamp = P.lamp, g = P.glass, bk = P.benchK;\n\n  // Shadows on the table: the beam, each string and each bob. A bob higher\n  // up throws its shadow further from the lamp and softer.\n  D.set(P.beamD);\n  const sh = [];\n  for (let i = 0; i \u003c n; i++) {\n    const [sx, sy] = proj(P.x[i], P.y[i], P.z[i]), [px, py] = proj(BX, P.y[i], ZB);\n    sh.push([sx, sy]);\n    const rs = P.r[i] * 0.95, pen = 0.45 + 0.09 * P.z[i], dk = (0.9 - 0.02 * P.z[i]) * (1 - 0.15 * g);\n    for (let y = floor(sy - rs - pen - 1); y \u003c= sy + rs + pen + 1; y++)\n      for (let x = floor(sx - rs - pen - 1); x \u003c= sx + rs + pen + 1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const dd = sqrt((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2), v = dk * (1 - sm(rs - pen, rs + pen, dd)), j = y * W + x;\n        if (v > D[j]) D[j] = v;\n      }\n    const len = sqrt((sx - px) ** 2 + (sy - py) ** 2), m = ceil(len * 1.5);\n    for (let s = 0; s \u003c= m; s++) {\n      const t = s / max(1, m), x = floor(mix(px, sx, t)), y = floor(mix(py, sy, t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && D[y * W + x] \u003c 0.2) D[y * W + x] = 0.2;\n    }\n  }\n\n  // The table under the lamp.\n  const fl = 0.42;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const e = (0.1 + 0.9 * P.pool[i] * (1 - D[i])) * fl;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(P.wood[o + c], P.bench[o + c], bk) * lamp[c] * e + P.tr[o + c];\n  }\n  // A glass bead gathers the lamp into a spot of its colour in its shadow.\n  if (g > 0.01)\n    for (let i = 0; i \u003c n; i++) {\n      const [sx, sy] = sh[i], rc = P.r[i] * 0.55, col = P.col[i];\n      for (let y = floor(sy - 3); y \u003c= sy + 3; y++)\n        for (let x = floor(sx - 3); x \u003c= sx + 3; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const q = ((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2) / (rc * rc), a = g * 0.75 * exp(-q) * (0.4 + 0.6 * P.pool[y * W + x]), o = (y * W + x) * 3;\n          for (let c = 0; c \u003c 3; c++) F[o + c] += col[c] * a;\n        }\n    }\n\n  // Strings: a fine line from the beam out to each bob, catching the lamp.\n  for (let i = 0; i \u003c n; i++) {\n    const x1 = P.x[i], y = floor(P.y[i]), a0 = min(BX, x1), a1 = max(BX, x1);\n    for (let x = floor(a0); x \u003c a1; x++) {\n      if (x \u003c 0 || x >= W) continue;\n      const o = (y * W + x) * 3, a = 0.5 * cl(min(x + 1 - a0, a1 - x), 0, 1);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], lamp[c] * 0.5, a);\n    }\n  }\n  // The bobs, the higher ones last.\n  for (let i = 0; i \u003c n; i++) ball(F, P.x[i], P.y[i], P.z[i], P.r[i], P.col[i], lamp, g, P.tint);\n\n  // The release board, a strip of pale wood that holds the row straight.\n  if (P.board > 0.01) {\n    const bx = BX + AMP + 3.2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = floor(bx); x \u003c bx + 2 && x \u003c W; x++) {\n        const o = (y * W + x) * 3, v = x === floor(bx) ? 0.85 : 0.55;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [224, 186, 132][c] * (lamp[c] / 255) * v, P.board);\n      }\n  }\n\n  // The beam over everything: brushed metal, its lamp side bright, with a\n  // clamp at every pivot.\n  for (let y = 0; y \u003c H; y++) {\n    const grain = 0.92 + 0.08 * hash(y, 7);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = (x \u003c BX ? 0.5 : 0.24) * grain;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    const y = floor(P.y[i]);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = x \u003c BX ? 0.78 : 0.4;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Finish","min":0,"max":1,"about":"The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again."},{"name":"Pendulums","min":16,"max":24,"about":"How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22."},{"name":"Trails","min":0,"max":1,"about":"A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them."}],"start":[0,2,16,0.06],"measures":{"motion":0.7632,"detail":0.0304,"edges":0.1868,"complexity":1.4841,"coverage":0.886,"colour":0.0797,"drift":0.0334},"knobResponse":[0.1242,0.0438,0.0523,0.0491]},{"slug":"penrose","title":"Penrose","family":"geometry","round":25,"note":"굵은 마름모와 가는 마름모의 펜로즈 타일링이 다섯 겹 대칭의 가운데로 끝없이 들어가요. 가운데서 꽃잎 다섯 장 꼴로 열리는 빛의 고리가 지나가면 타일이 황금비만큼 작은 타일로 나뉘고, 굵은 마름모 다섯이 모인 별은 금색이에요. Glow 를 올리면 유리가 어두워져 고리 뒤만 밝고, K1 을 누르면 연과 화살(P2)로 바뀌어요.","idea":"A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.","buttons":"K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.","code":"// ===== Patternflow pattern =====\n// Title:   Penrose\n// Family:  geometry\n// Idea:    A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after Roger Penrose's rhomb tiling (P3) and Raphael Robinson's golden triangles\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1\n//\n// Knob 1: Hue. Turns all the tile colours round the colour wheel together.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute.\n// Knob 3: Size. The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them.\n// Knob 4: Glow. How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring.\n// Buttons: K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.\n\n// The centre sits on an LED column, so the edges along the five-fold axis\n// draw as one dark LED rather than two grey ones.\nconst W = 64, H = 128, N = W * H, CX = 31.5, CY = 64;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, round, hypot, PI } = Math;\nconst PHI = (1 + sqrt(5)) / 2;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The smallest Size, how far the splitting ring runs in one level, the reach\n// of its five petals and how many levels lie between the seed and the tiles.\nconst EMIN = 7, RHO = 130, PET = 0.12, DEEP = 6;\n\n// Robinson's golden triangles. A triangle [kind, A, B, C, parent] is half a\n// tile: AB and AC are tile edges, BC runs through the middle of the tile.\n// Kind 0 is the sharp one (36-72-72), kind 1 the blunt one (108-36-36).\n// Rhombs (P3) and kites and darts (P2) split them by different rules.\nfunction split(fam, T, out, idx, R) {\n  const put = (k, ax, ay, bx, by, cx, cy) => {\n    if (reach(ax, ay, bx, by, cx, cy) \u003c R) out.push([k, ax, ay, bx, by, cx, cy, idx]);\n  };\n  const [k, ax, ay, bx, by, cx, cy] = T;\n  const g = (p, q) => p + (q - p) / PHI;\n  if (fam === 0) {\n    if (k === 0) {\n      const px = g(ax, bx), py = g(ay, by);\n      put(0, cx, cy, px, py, bx, by);\n      put(1, px, py, cx, cy, ax, ay);\n    } else {\n      const qx = g(bx, ax), qy = g(by, ay), rx = g(bx, cx), ry = g(by, cy);\n      put(1, rx, ry, cx, cy, ax, ay);\n      put(1, qx, qy, rx, ry, bx, by);\n      put(0, rx, ry, qx, qy, ax, ay);\n    }\n  } else if (k === 0) {\n    const qx = g(ax, bx), qy = g(ay, by), rx = g(bx, cx), ry = g(by, cy);\n    put(1, rx, ry, qx, qy, bx, by);\n    put(0, qx, qy, ax, ay, rx, ry);\n    put(0, cx, cy, ax, ay, rx, ry);\n  } else {\n    const px = g(cx, ax), py = g(cy, ay);\n    put(1, bx, by, px, py, ax, ay);\n    put(0, px, py, cx, cy, bx, by);\n  }\n}\n\n// How far the origin is from a triangle.\nfunction seg(ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay, t = cl(-(ax * dx + ay * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(ax + t * dx, ay + t * dy);\n}\nfunction reach(ax, ay, bx, by, cx, cy) {\n  const s1 = ax * by - ay * bx, s2 = bx * cy - by * cx, s3 = cx * ay - cy * ax;\n  if ((s1 >= 0 && s2 >= 0 && s3 >= 0) || (s1 \u003c= 0 && s2 \u003c= 0 && s3 \u003c= 0)) return 0;\n  return min(seg(ax, ay, bx, by), seg(bx, by, cx, cy), seg(cx, cy, ax, ay));\n}\n\n// One tiling, three levels deep. Level 0 has tile edge 1; levels 1 and 2 are\n// it split once and twice. Level 2 blown up by phi squared and turned 36\n// degrees is level 0 again, which is what lets the zoom run for ever. The\n// rhombs grow from a star of five fat rhombs, kites and darts from a sun of\n// five kites; both come back to themselves every second split. Each level\n// reaches just past the corners of the panel at the smallest Size.\nfunction build(fam, scale) {\n  const s = EMIN * scale, R = [75 / s + 3, 75 / s + 2, 75 / (s * PHI) + 1.5];\n  let T = [];\n  for (let i = 0; i \u003c 10; i++) {\n    const a = -PI / 2 + ((2 * PI) / 5) * (i >> 1), b = a + (i & 1 ? PI : -PI) / 5, L = PHI ** DEEP;\n    if (fam === 0) T.push([1, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L * PHI, sin(a) * L * PHI, 0]);\n    else T.push([0, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L, sin(a) * L, 0]);\n  }\n  const levels = [];\n  for (let d = 0; d \u003c DEEP + 2; d++) {\n    const out = [];\n    T.forEach((t, i) => split(fam, t, out, i, R[max(0, d - DEEP + 1)]));\n    T = out;\n    if (d >= DEEP - 1) levels.push(T);\n  }\n  return levels;\n}\n\n// Every corner where tiles meet is one of seven kinds; for kites and darts\n// Conway named them sun, star, ace, deuce, jack, queen and king. A tile's\n// colour class comes from its kind and the kinds of its four corners: ten\n// classes of rhomb, eight of kite and dart.\nconst vkey = (x, y) => round(x * 4096) * 1048576 + round(y * 4096);\n// The angle at A, B and C in tenths of a turn, sharp then blunt, per tiling.\nconst ANG = [\n  [1, 2, 2, 3, 1, 1],\n  [2, 1, 2, 1, 3, 1],\n];\nfunction classify(fam, levels) {\n  const an = ANG[fam];\n  const maps = levels.map((L) => {\n    const V = new Map();\n    const add = (x, y, slot) => {\n      const k = vkey(x, y);\n      let c = V.get(k);\n      if (!c) V.set(k, (c = new Array(16).fill(0)));\n      c[slot]++;\n    };\n    for (const [k, ax, ay, bx, by, cx, cy] of L) {\n      add(ax, ay, k * 8 + an[k * 3]);\n      add(bx, by, k * 8 + 4 + an[k * 3 + 1]);\n      add(cx, cy, k * 8 + 4 + an[k * 3 + 2]);\n    }\n    // A corner cut off at the edge of the patch does not close to 360 degrees.\n    for (const [k, c] of V) V.set(k, c.reduce((s, n, i) => s + n * (i & 3), 0) === 10 ? c.join(\" \") : \"x\");\n    return V;\n  });\n  const vnames = [...new Set(maps.flatMap((V) => [...V.values()]))].sort(), X = vnames.indexOf(\"x\");\n  const id = new Map(vnames.map((n, i) => [n, i]));\n  const codes = levels.map((L, j) => {\n    const V = maps[j], vt = (x, y) => id.get(V.get(vkey(x, y))), mid = new Map();\n    L.forEach((t, i) => {\n      const k = vkey(t[3] + t[5], t[4] + t[6]);\n      mid.set(k, mid.has(k) ? [mid.get(k)[0], i] : [i]);\n    });\n    return L.map((t, i) => {\n      const pair = mid.get(vkey(t[3] + t[5], t[4] + t[6])), o = L[pair[0] === i ? pair[1] ?? i : pair[0]];\n      const a0 = vt(t[1], t[2]), a1 = vt(o[1], o[2]), b0 = vt(t[3], t[4]), b1 = vt(t[5], t[6]);\n      if (a0 === X || a1 === X || b0 === X || b1 === X) return t[0] * 4096;\n      return t[0] * 4096 + min(a0, a1) * 512 + max(a0, a1) * 64 + min(b0, b1) * 8 + max(b0, b1);\n    });\n  });\n  const names = [...new Set(codes.flat())].sort((p, q) => p - q), cls = new Map(names.map((n, i) => [n, i]));\n  return codes.map((L) => L.map((n) => cls.get(n)));\n}\n\n// Packed for drawing: corners, colour class, parent, and the tile's middle as\n// its distance from the centre (pulled in along five petals) and how far the\n// triangle can reach past it.\nconst petal = (x, y, r) => (r > 1e-6 ? (5 * x ** 4 * y - 10 * x * x * y ** 3 + y ** 5) / r ** 5 : 0);\nfunction pack(levels, cls) {\n  return levels.map((L, j) => {\n    const n = L.length, P = { n, xy: new Float32Array(n * 6), cls: new Uint8Array(cls[j]), par: new Int32Array(n), rq: new Float32Array(n), near: new Float32Array(n), age: new Float32Array(n) };\n    L.forEach((t, i) => {\n      for (let q = 0; q \u003c 6; q++) P.xy[i * 6 + q] = t[q + 1];\n      P.par[i] = t[7];\n      // The middle of BC is the middle of the whole tile, so both halves of\n      // a tile split together.\n      const mx = (t[3] + t[5]) / 2, my = (t[4] + t[6]) / 2, r = hypot(mx, my);\n      P.rq[i] = r * (1 + PET * petal(mx, my, r));\n      P.near[i] = r - max(hypot(t[1] - mx, t[2] - my), hypot(t[3] - mx, t[4] - my));\n    });\n    return P;\n  });\n}\n\n// P2 is drawn half a level larger so the two tilings show tiles of about the\n// same area.\nconst SCALE = [1, sqrt(PHI)];\nconst FAM = [0, 1].map((f) => {\n  const levels = build(f, SCALE[f]);\n  return pack(levels, classify(f, levels));\n});\n\n// Hue offset, saturation and brightness of each colour class, in class order:\n// the sharp kind first (thin rhombs, kites), then the blunt kind (fat rhombs,\n// darts), each led by a fallback for tiles cut off at the edge of the patch,\n// which never reach the panel. Fat rhombs round a five-pointed star and the\n// darts of a star are gold.\nconst PAL = [\n  [\n    [0.6, 0.8, 0.75],\n    [0.5, 0.85, 0.85],\n    [0.42, 0.7, 0.95],\n    [0.63, 0.85, 0.85],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.15, 0.85, 1],\n    [0.88, 0.75, 0.9],\n    [0.76, 0.8, 0.75],\n    [0.98, 0.8, 0.9],\n    [0.1, 0.89, 1],\n    [0.33, 0.8, 0.8],\n  ],\n  [\n    [0.55, 0.8, 0.8],\n    [0.5, 0.85, 0.85],\n    [0.36, 0.75, 0.85],\n    [0.62, 0.85, 0.85],\n    [0.45, 0.75, 0.95],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.9, 0.75, 0.9],\n    [0.02, 0.8, 0.95],\n    [0.78, 0.8, 0.8],\n  ],\n];\nconst GLOW = [255, 226, 150];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Each LED's distance from the centre, pulled in along five petals: the\n// regrouping ring after a K1 tap opens along it.\nconst RR = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const x = (p % W) + 0.5 - CX, y = floor(p / W) + 0.5 - CY, r = hypot(x, y);\n  RR[p] = r * (1 + PET * petal(x, y, r));\n}\n\nexport function setup(params) {\n  params.s = { Z: 0, rot: 0, fam: 0, to: -1, rm: 0, hue: 0, e: EMIN, glow: 0.06, buf: new Float32Array(N * 3), col: new Float32Array(16 * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.e = cl(k[2], EMIN, 15);\n  P.glow = cl(k[3], 0, 1);\n  // Two levels of zoom, phi squared, bring level 2 to where level 0 was, a\n  // tenth of a turn round.\n  P.Z += d * cl(k[1], 0.2, 3) * 0.15;\n  if (P.Z >= 2) (P.Z -= 2), (P.rot = (P.rot + PI / 5) % (2 * PI));\n  if (P.to >= 0) {\n    P.rm += d * 45;\n    if (P.rm > 86) (P.fam = P.to), (P.to = -1);\n  } else if (input.btnPressed && input.btnPressed[0]) (P.to = 1 - P.fam), (P.rm = 0);\n}\n\n// One golden triangle onto the LEDs, colour (r, g, b) and line light gl.\n// Within LW of a tile edge an LED darkens into the 1-LED line between tiles;\n// mode 1 and 2 keep only the LEDs inside or outside the regrouping ring.\nconst LW = 0.72;\nfunction tri(P, xy, o, co, si, r, g, b, gl, mode) {\n  const ax = CX + co * xy[o] - si * xy[o + 1], ay = CY + si * xy[o] + co * xy[o + 1];\n  const bx = CX + co * xy[o + 2] - si * xy[o + 3], by = CY + si * xy[o + 2] + co * xy[o + 3];\n  const cx = CX + co * xy[o + 4] - si * xy[o + 5], cy = CY + si * xy[o + 4] + co * xy[o + 5];\n  const x0 = max(0, ceil(min(ax, bx, cx) - 0.5)), x1 = min(W - 1, floor(max(ax, bx, cx) - 0.5));\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(H - 1, floor(max(ay, by, cy) - 0.5));\n  if (x0 > x1 || y0 > y1) return;\n  const sg = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax) > 0 ? 1 : -1, buf = P.buf;\n  // Signed distances to AB, BC and CA as a*X + b*Y + c, positive inside.\n  const l1 = sg / hypot(bx - ax, by - ay), l2 = sg / hypot(cx - bx, cy - by), l3 = sg / hypot(ax - cx, ay - cy);\n  const a1 = (ay - by) * l1, b1 = (bx - ax) * l1, c1 = ((by - ay) * ax - (bx - ax) * ay) * l1;\n  const a2 = (by - cy) * l2, b2 = (cx - bx) * l2, c2 = ((cy - by) * bx - (cx - bx) * by) * l2;\n  const a3 = (cy - ay) * l3, b3 = (ax - cx) * l3, c3 = ((ay - cy) * cx - (ax - cx) * cy) * l3;\n  for (let y = y0; y \u003c= y1; y++) {\n    const Y = y + 0.5, X = x0 + 0.5;\n    let d1 = a1 * X + b1 * Y + c1, d2 = a2 * X + b2 * Y + c2, d3 = a3 * X + b3 * Y + c3;\n    for (let x = x0, p = y * W + x0; x \u003c= x1; x++, p++, d1 += a1, d2 += a2, d3 += a3) {\n      if (d1 \u003c -0.001 || d2 \u003c -0.001 || d3 \u003c -0.001 || (mode && (RR[p] \u003c P.rm) !== (mode === 1))) continue;\n      // The line's light keeps to its core, so a small tile behind the ring\n      // keeps its colour.\n      const w = cl((LW - min(d1, d3)) * 2.2, 0, 1), m = 1 - 0.93 * w, v = w * w * gl, q = p * 3;\n      buf[q] = r * m + (GLOW[0] - r * m) * v;\n      buf[q + 1] = g * m + (GLOW[1] - g * m) * v;\n      buf[q + 2] = b * m + (GLOW[2] - b * m) * v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const h = P.Z >= 1 ? 1 : 0, rho = (P.Z - h) * RHO, buf = P.buf, col = P.col, dim = 1 - 0.65 * P.glow;\n  buf.fill(0);\n  const jobs = P.to \u003c 0 ? [[P.fam, 0]] : [[P.fam, 2], [P.to, 1]];\n  for (const [fi, mode] of jobs) {\n    const S = P.e * PHI ** P.Z * SCALE[fi], co = cos(P.rot) * S, si = sin(P.rot) * S, lim = 73 / S;\n    const Lc = FAM[fi][h], Lf = FAM[fi][h + 1], pal = PAL[fi];\n    for (let c = 0; c \u003c pal.length; c++) hsv(P.hue + pal[c][0], pal[c][1], pal[c][2], col, c * 3);\n    // A tile splits once the ring has passed its middle. The ring runs RHO\n    // LEDs a level, well past the corners, so every tile on show has split\n    // and its light has died before the next level begins.\n    for (let i = 0; i \u003c Lc.n; i++) {\n      const a = (Lc.age[i] = rho - S * Lc.rq[i]);\n      if (a > 0 || Lc.near[i] > lim) continue;\n      const c = Lc.cls[i] * 3;\n      tri(P, Lc.xy, i * 6, co, si, col[c] * dim, col[c + 1] * dim, col[c + 2] * dim, 0, mode);\n    }\n    // Behind the ring the new edges flash, and the glass lights up and fades\n    // back down to what Glow leaves it.\n    for (let j = 0; j \u003c Lf.n; j++) {\n      const a = Lc.age[Lf.par[j]];\n      if (a \u003c= 0 || Lf.near[j] > lim) continue;\n      const c = Lf.cls[j] * 3, lit = dim + (1 - dim) * exp(-a / 10), fl = 0.3 * P.glow * exp(-a / 5);\n      const r = col[c] * lit, g = col[c + 1] * lit, b = col[c + 2] * lit;\n      tri(P, Lf.xy, j * 6, co, si, r + (255 - r) * fl, g + (255 - g) * fl, b + (255 - b) * fl, exp(-a / 2.5), mode);\n    }\n  }\n  // The regrouping ring itself, a line of light.\n  if (P.to >= 0)\n    for (let p = 0; p \u003c N; p++) {\n      const w = 1 - abs(RR[p] - P.rm) / 1.6;\n      if (w > 0) for (let q = 0; q \u003c 3; q++) buf[p * 3 + q] += (GLOW[q] - buf[p * 3 + q]) * w * 0.85;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-penrose","type":"code","name":"penrose","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Penrose\n// Family:  geometry\n// Idea:    A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after Roger Penrose's rhomb tiling (P3) and Raphael Robinson's golden triangles\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1\n//\n// Knob 1: Hue. Turns all the tile colours round the colour wheel together.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute.\n// Knob 3: Size. The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them.\n// Knob 4: Glow. How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring.\n// Buttons: K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.\n\n// The centre sits on an LED column, so the edges along the five-fold axis\n// draw as one dark LED rather than two grey ones.\nconst W = 64, H = 128, N = W * H, CX = 31.5, CY = 64;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, round, hypot, PI } = Math;\nconst PHI = (1 + sqrt(5)) / 2;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The smallest Size, how far the splitting ring runs in one level, the reach\n// of its five petals and how many levels lie between the seed and the tiles.\nconst EMIN = 7, RHO = 130, PET = 0.12, DEEP = 6;\n\n// Robinson's golden triangles. A triangle [kind, A, B, C, parent] is half a\n// tile: AB and AC are tile edges, BC runs through the middle of the tile.\n// Kind 0 is the sharp one (36-72-72), kind 1 the blunt one (108-36-36).\n// Rhombs (P3) and kites and darts (P2) split them by different rules.\nfunction split(fam, T, out, idx, R) {\n  const put = (k, ax, ay, bx, by, cx, cy) => {\n    if (reach(ax, ay, bx, by, cx, cy) \u003c R) out.push([k, ax, ay, bx, by, cx, cy, idx]);\n  };\n  const [k, ax, ay, bx, by, cx, cy] = T;\n  const g = (p, q) => p + (q - p) / PHI;\n  if (fam === 0) {\n    if (k === 0) {\n      const px = g(ax, bx), py = g(ay, by);\n      put(0, cx, cy, px, py, bx, by);\n      put(1, px, py, cx, cy, ax, ay);\n    } else {\n      const qx = g(bx, ax), qy = g(by, ay), rx = g(bx, cx), ry = g(by, cy);\n      put(1, rx, ry, cx, cy, ax, ay);\n      put(1, qx, qy, rx, ry, bx, by);\n      put(0, rx, ry, qx, qy, ax, ay);\n    }\n  } else if (k === 0) {\n    const qx = g(ax, bx), qy = g(ay, by), rx = g(bx, cx), ry = g(by, cy);\n    put(1, rx, ry, qx, qy, bx, by);\n    put(0, qx, qy, ax, ay, rx, ry);\n    put(0, cx, cy, ax, ay, rx, ry);\n  } else {\n    const px = g(cx, ax), py = g(cy, ay);\n    put(1, bx, by, px, py, ax, ay);\n    put(0, px, py, cx, cy, bx, by);\n  }\n}\n\n// How far the origin is from a triangle.\nfunction seg(ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay, t = cl(-(ax * dx + ay * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(ax + t * dx, ay + t * dy);\n}\nfunction reach(ax, ay, bx, by, cx, cy) {\n  const s1 = ax * by - ay * bx, s2 = bx * cy - by * cx, s3 = cx * ay - cy * ax;\n  if ((s1 >= 0 && s2 >= 0 && s3 >= 0) || (s1 \u003c= 0 && s2 \u003c= 0 && s3 \u003c= 0)) return 0;\n  return min(seg(ax, ay, bx, by), seg(bx, by, cx, cy), seg(cx, cy, ax, ay));\n}\n\n// One tiling, three levels deep. Level 0 has tile edge 1; levels 1 and 2 are\n// it split once and twice. Level 2 blown up by phi squared and turned 36\n// degrees is level 0 again, which is what lets the zoom run for ever. The\n// rhombs grow from a star of five fat rhombs, kites and darts from a sun of\n// five kites; both come back to themselves every second split. Each level\n// reaches just past the corners of the panel at the smallest Size.\nfunction build(fam, scale) {\n  const s = EMIN * scale, R = [75 / s + 3, 75 / s + 2, 75 / (s * PHI) + 1.5];\n  let T = [];\n  for (let i = 0; i \u003c 10; i++) {\n    const a = -PI / 2 + ((2 * PI) / 5) * (i >> 1), b = a + (i & 1 ? PI : -PI) / 5, L = PHI ** DEEP;\n    if (fam === 0) T.push([1, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L * PHI, sin(a) * L * PHI, 0]);\n    else T.push([0, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L, sin(a) * L, 0]);\n  }\n  const levels = [];\n  for (let d = 0; d \u003c DEEP + 2; d++) {\n    const out = [];\n    T.forEach((t, i) => split(fam, t, out, i, R[max(0, d - DEEP + 1)]));\n    T = out;\n    if (d >= DEEP - 1) levels.push(T);\n  }\n  return levels;\n}\n\n// Every corner where tiles meet is one of seven kinds; for kites and darts\n// Conway named them sun, star, ace, deuce, jack, queen and king. A tile's\n// colour class comes from its kind and the kinds of its four corners: ten\n// classes of rhomb, eight of kite and dart.\nconst vkey = (x, y) => round(x * 4096) * 1048576 + round(y * 4096);\n// The angle at A, B and C in tenths of a turn, sharp then blunt, per tiling.\nconst ANG = [\n  [1, 2, 2, 3, 1, 1],\n  [2, 1, 2, 1, 3, 1],\n];\nfunction classify(fam, levels) {\n  const an = ANG[fam];\n  const maps = levels.map((L) => {\n    const V = new Map();\n    const add = (x, y, slot) => {\n      const k = vkey(x, y);\n      let c = V.get(k);\n      if (!c) V.set(k, (c = new Array(16).fill(0)));\n      c[slot]++;\n    };\n    for (const [k, ax, ay, bx, by, cx, cy] of L) {\n      add(ax, ay, k * 8 + an[k * 3]);\n      add(bx, by, k * 8 + 4 + an[k * 3 + 1]);\n      add(cx, cy, k * 8 + 4 + an[k * 3 + 2]);\n    }\n    // A corner cut off at the edge of the patch does not close to 360 degrees.\n    for (const [k, c] of V) V.set(k, c.reduce((s, n, i) => s + n * (i & 3), 0) === 10 ? c.join(\" \") : \"x\");\n    return V;\n  });\n  const vnames = [...new Set(maps.flatMap((V) => [...V.values()]))].sort(), X = vnames.indexOf(\"x\");\n  const id = new Map(vnames.map((n, i) => [n, i]));\n  const codes = levels.map((L, j) => {\n    const V = maps[j], vt = (x, y) => id.get(V.get(vkey(x, y))), mid = new Map();\n    L.forEach((t, i) => {\n      const k = vkey(t[3] + t[5], t[4] + t[6]);\n      mid.set(k, mid.has(k) ? [mid.get(k)[0], i] : [i]);\n    });\n    return L.map((t, i) => {\n      const pair = mid.get(vkey(t[3] + t[5], t[4] + t[6])), o = L[pair[0] === i ? pair[1] ?? i : pair[0]];\n      const a0 = vt(t[1], t[2]), a1 = vt(o[1], o[2]), b0 = vt(t[3], t[4]), b1 = vt(t[5], t[6]);\n      if (a0 === X || a1 === X || b0 === X || b1 === X) return t[0] * 4096;\n      return t[0] * 4096 + min(a0, a1) * 512 + max(a0, a1) * 64 + min(b0, b1) * 8 + max(b0, b1);\n    });\n  });\n  const names = [...new Set(codes.flat())].sort((p, q) => p - q), cls = new Map(names.map((n, i) => [n, i]));\n  return codes.map((L) => L.map((n) => cls.get(n)));\n}\n\n// Packed for drawing: corners, colour class, parent, and the tile's middle as\n// its distance from the centre (pulled in along five petals) and how far the\n// triangle can reach past it.\nconst petal = (x, y, r) => (r > 1e-6 ? (5 * x ** 4 * y - 10 * x * x * y ** 3 + y ** 5) / r ** 5 : 0);\nfunction pack(levels, cls) {\n  return levels.map((L, j) => {\n    const n = L.length, P = { n, xy: new Float32Array(n * 6), cls: new Uint8Array(cls[j]), par: new Int32Array(n), rq: new Float32Array(n), near: new Float32Array(n), age: new Float32Array(n) };\n    L.forEach((t, i) => {\n      for (let q = 0; q \u003c 6; q++) P.xy[i * 6 + q] = t[q + 1];\n      P.par[i] = t[7];\n      // The middle of BC is the middle of the whole tile, so both halves of\n      // a tile split together.\n      const mx = (t[3] + t[5]) / 2, my = (t[4] + t[6]) / 2, r = hypot(mx, my);\n      P.rq[i] = r * (1 + PET * petal(mx, my, r));\n      P.near[i] = r - max(hypot(t[1] - mx, t[2] - my), hypot(t[3] - mx, t[4] - my));\n    });\n    return P;\n  });\n}\n\n// P2 is drawn half a level larger so the two tilings show tiles of about the\n// same area.\nconst SCALE = [1, sqrt(PHI)];\nconst FAM = [0, 1].map((f) => {\n  const levels = build(f, SCALE[f]);\n  return pack(levels, classify(f, levels));\n});\n\n// Hue offset, saturation and brightness of each colour class, in class order:\n// the sharp kind first (thin rhombs, kites), then the blunt kind (fat rhombs,\n// darts), each led by a fallback for tiles cut off at the edge of the patch,\n// which never reach the panel. Fat rhombs round a five-pointed star and the\n// darts of a star are gold.\nconst PAL = [\n  [\n    [0.6, 0.8, 0.75],\n    [0.5, 0.85, 0.85],\n    [0.42, 0.7, 0.95],\n    [0.63, 0.85, 0.85],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.15, 0.85, 1],\n    [0.88, 0.75, 0.9],\n    [0.76, 0.8, 0.75],\n    [0.98, 0.8, 0.9],\n    [0.1, 0.89, 1],\n    [0.33, 0.8, 0.8],\n  ],\n  [\n    [0.55, 0.8, 0.8],\n    [0.5, 0.85, 0.85],\n    [0.36, 0.75, 0.85],\n    [0.62, 0.85, 0.85],\n    [0.45, 0.75, 0.95],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.9, 0.75, 0.9],\n    [0.02, 0.8, 0.95],\n    [0.78, 0.8, 0.8],\n  ],\n];\nconst GLOW = [255, 226, 150];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Each LED's distance from the centre, pulled in along five petals: the\n// regrouping ring after a K1 tap opens along it.\nconst RR = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const x = (p % W) + 0.5 - CX, y = floor(p / W) + 0.5 - CY, r = hypot(x, y);\n  RR[p] = r * (1 + PET * petal(x, y, r));\n}\n\nexport function setup(params) {\n  params.s = { Z: 0, rot: 0, fam: 0, to: -1, rm: 0, hue: 0, e: EMIN, glow: 0.06, buf: new Float32Array(N * 3), col: new Float32Array(16 * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.e = cl(k[2], EMIN, 15);\n  P.glow = cl(k[3], 0, 1);\n  // Two levels of zoom, phi squared, bring level 2 to where level 0 was, a\n  // tenth of a turn round.\n  P.Z += d * cl(k[1], 0.2, 3) * 0.15;\n  if (P.Z >= 2) (P.Z -= 2), (P.rot = (P.rot + PI / 5) % (2 * PI));\n  if (P.to >= 0) {\n    P.rm += d * 45;\n    if (P.rm > 86) (P.fam = P.to), (P.to = -1);\n  } else if (input.btnPressed && input.btnPressed[0]) (P.to = 1 - P.fam), (P.rm = 0);\n}\n\n// One golden triangle onto the LEDs, colour (r, g, b) and line light gl.\n// Within LW of a tile edge an LED darkens into the 1-LED line between tiles;\n// mode 1 and 2 keep only the LEDs inside or outside the regrouping ring.\nconst LW = 0.72;\nfunction tri(P, xy, o, co, si, r, g, b, gl, mode) {\n  const ax = CX + co * xy[o] - si * xy[o + 1], ay = CY + si * xy[o] + co * xy[o + 1];\n  const bx = CX + co * xy[o + 2] - si * xy[o + 3], by = CY + si * xy[o + 2] + co * xy[o + 3];\n  const cx = CX + co * xy[o + 4] - si * xy[o + 5], cy = CY + si * xy[o + 4] + co * xy[o + 5];\n  const x0 = max(0, ceil(min(ax, bx, cx) - 0.5)), x1 = min(W - 1, floor(max(ax, bx, cx) - 0.5));\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(H - 1, floor(max(ay, by, cy) - 0.5));\n  if (x0 > x1 || y0 > y1) return;\n  const sg = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax) > 0 ? 1 : -1, buf = P.buf;\n  // Signed distances to AB, BC and CA as a*X + b*Y + c, positive inside.\n  const l1 = sg / hypot(bx - ax, by - ay), l2 = sg / hypot(cx - bx, cy - by), l3 = sg / hypot(ax - cx, ay - cy);\n  const a1 = (ay - by) * l1, b1 = (bx - ax) * l1, c1 = ((by - ay) * ax - (bx - ax) * ay) * l1;\n  const a2 = (by - cy) * l2, b2 = (cx - bx) * l2, c2 = ((cy - by) * bx - (cx - bx) * by) * l2;\n  const a3 = (cy - ay) * l3, b3 = (ax - cx) * l3, c3 = ((ay - cy) * cx - (ax - cx) * cy) * l3;\n  for (let y = y0; y \u003c= y1; y++) {\n    const Y = y + 0.5, X = x0 + 0.5;\n    let d1 = a1 * X + b1 * Y + c1, d2 = a2 * X + b2 * Y + c2, d3 = a3 * X + b3 * Y + c3;\n    for (let x = x0, p = y * W + x0; x \u003c= x1; x++, p++, d1 += a1, d2 += a2, d3 += a3) {\n      if (d1 \u003c -0.001 || d2 \u003c -0.001 || d3 \u003c -0.001 || (mode && (RR[p] \u003c P.rm) !== (mode === 1))) continue;\n      // The line's light keeps to its core, so a small tile behind the ring\n      // keeps its colour.\n      const w = cl((LW - min(d1, d3)) * 2.2, 0, 1), m = 1 - 0.93 * w, v = w * w * gl, q = p * 3;\n      buf[q] = r * m + (GLOW[0] - r * m) * v;\n      buf[q + 1] = g * m + (GLOW[1] - g * m) * v;\n      buf[q + 2] = b * m + (GLOW[2] - b * m) * v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const h = P.Z >= 1 ? 1 : 0, rho = (P.Z - h) * RHO, buf = P.buf, col = P.col, dim = 1 - 0.65 * P.glow;\n  buf.fill(0);\n  const jobs = P.to \u003c 0 ? [[P.fam, 0]] : [[P.fam, 2], [P.to, 1]];\n  for (const [fi, mode] of jobs) {\n    const S = P.e * PHI ** P.Z * SCALE[fi], co = cos(P.rot) * S, si = sin(P.rot) * S, lim = 73 / S;\n    const Lc = FAM[fi][h], Lf = FAM[fi][h + 1], pal = PAL[fi];\n    for (let c = 0; c \u003c pal.length; c++) hsv(P.hue + pal[c][0], pal[c][1], pal[c][2], col, c * 3);\n    // A tile splits once the ring has passed its middle. The ring runs RHO\n    // LEDs a level, well past the corners, so every tile on show has split\n    // and its light has died before the next level begins.\n    for (let i = 0; i \u003c Lc.n; i++) {\n      const a = (Lc.age[i] = rho - S * Lc.rq[i]);\n      if (a > 0 || Lc.near[i] > lim) continue;\n      const c = Lc.cls[i] * 3;\n      tri(P, Lc.xy, i * 6, co, si, col[c] * dim, col[c + 1] * dim, col[c + 2] * dim, 0, mode);\n    }\n    // Behind the ring the new edges flash, and the glass lights up and fades\n    // back down to what Glow leaves it.\n    for (let j = 0; j \u003c Lf.n; j++) {\n      const a = Lc.age[Lf.par[j]];\n      if (a \u003c= 0 || Lf.near[j] > lim) continue;\n      const c = Lf.cls[j] * 3, lit = dim + (1 - dim) * exp(-a / 10), fl = 0.3 * P.glow * exp(-a / 5);\n      const r = col[c] * lit, g = col[c + 1] * lit, b = col[c + 2] * lit;\n      tri(P, Lf.xy, j * 6, co, si, r + (255 - r) * fl, g + (255 - g) * fl, b + (255 - b) * fl, exp(-a / 2.5), mode);\n    }\n  }\n  // The regrouping ring itself, a line of light.\n  if (P.to >= 0)\n    for (let p = 0; p \u003c N; p++) {\n      const w = 1 - abs(RR[p] - P.rm) / 1.6;\n      if (w > 0) for (let q = 0; q \u003c 3; q++) buf[p * 3 + q] += (GLOW[q] - buf[p * 3 + q]) * w * 0.85;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns all the tile colours round the colour wheel together."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute."},{"name":"Size","min":7,"max":15,"about":"The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them."},{"name":"Glow","min":0,"max":1,"about":"How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring."}],"start":[0,2,7,0.06],"measures":{"motion":1.7979,"detail":0.2641,"edges":0.8556,"complexity":1.1732,"coverage":0.804,"colour":0.583,"drift":0.0983},"knobResponse":[0.4132,0.358,0.3898,0.2306]},{"slug":"penrose-room","title":"Penrose Room","family":"physics","round":33,"note":"거울로 된 펜로즈의 방에서 빛 한 점이 떠돌고, 수백 개의 광선이 반사하며 복도와 위아래 반타원을 밝히는 동안 양옆 방은 캄캄해요. 빛이 반타원을 지나 옆방으로 건너가면 밝은 곳과 어두운 곳이 뒤바뀌어요. K3 은 복도 벽을 초점에서 4 LED 까지 옮겨 어둠에 빛이 새게 하고, K1 을 누르면 빛이 바로 건너가요.","idea":"A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.","buttons":"K1 tap sends the light across now, from the corridor into a side chamber or back.","code":"// ===== Patternflow pattern =====\n// Title:   Penrose Room\n// Family:  physics\n// Idea:    A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Penrose unilluminable room (Roger Penrose, 1958), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1\n//\n// Knob 1: Hue. The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive.\n// Knob 2: Speed. How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower.\n// Knob 3: Offset. How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow.\n// Knob 4: Bounces. How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue.\n// Buttons: K1 tap sends the light across now, from the corridor into a side chamber or back.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The room, in LEDs. Two half-ellipses with semi-axes 31.5 and 26 put their\n// flat sides at rows 26.5 and 101.5, and their arcs touch rows 0 and 127, so\n// the room is the whole panel. The foci sit on the flat sides at 17.78 either\n// side of the middle column; the outer walls are the ellipses' own tangents\n// at the ends of the major axis, columns 0 and 63.\nconst A = 31.5, B = 26, C = sqrt(A * A - B * B), CX = 32;\nconst YT = 0.5 + B, YB = 127.5 - B, YM = 64;\nconst IA2 = 1 / (A * A), IB2 = 1 / (B * B), EPS = 1e-6;\n// Each reflection keeps 60% of the light. The glow is LEVEL times the light\n// over the mean of the lit LEDs, raised to GAMMA: the mean shows at 128 of 255\n// and the glow round the lamp comes close to full. At 92 the swap moved the\n// picture 0.270 on the study's drift scale; at 128 it moves it 0.365.\nconst REFL = 0.6, LEVEL = 0.50, GAMMA = 0.7;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, off: 0, nb: 14, w: C,\n    buf: new Float32Array(N), tmp: new Float32Array(N), hz: new Float32Array(N), kb: new Float32Array(N), kz: new Float32Array(N), wall: new Float32Array(N), wallW: NaN,\n    lu: 0, ly: YM, region: 0, tau: 0, stay: 3.2, mode: 0,\n    tt: 0, from: 0, to: 0, expo: 0, bz: new Float64Array(8), col: new Float32Array(51),\n  };\n}\n\n// Where the light may stand: the corridor between the walls, or one side\n// chamber, a little clear of every wall.\nfunction clampTo(S, region, u) {\n  const w = S.w;\n  if (region === 0) return cl(u, -(w - 1.2), w - 1.2);\n  return region * cl(region * u, w + 1.2, A - 1.2);\n}\n\n// A slow wander that starts from the middle of the place, so the light\n// arrives at the middle and sets off from there without a jump.\nfunction wander(S) {\n  const w = S.w, t = S.tau;\n  const y = YM + 30 * sin(0.4 * t);\n  if (S.region === 0) return [(w - 3.5) * sin(0.55 * t), y];\n  const uc = (S.region * (w + A)) / 2, au = max(0, (A - w) / 2 - 2.5);\n  return [uc + au * sin(0.7 * t), y];\n}\n\n// Crossing over: a cubic curve that leaves straight up (or down) through the\n// flat side nearer the light, arcs through the half-ellipse and drops\n// straight into the middle of the other place. From the corridor it leaves\n// between the foci and from a chamber outside them, as a ray would.\nfunction startTransit(S) {\n  const u0 = S.lu, y0 = S.ly, w = S.w;\n  S.from = S.region;\n  S.to = S.region === 0 ? (u0 > 0.5 ? 1 : u0 \u003c -0.5 ? -1 : Math.random() \u003c 0.5 ? -1 : 1) : 0;\n  const u3 = S.to === 0 ? 0 : (S.to * (w + A)) / 2, cy = y0 \u003c= YM ? YT - 32 : YB + 32;\n  S.bz.set([u0, y0, u0, cy, u3, cy, u3, YM]);\n  S.mode = 1;\n  S.tt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.off = cl(k[2] || 0, -4, 4);\n  S.w = C + S.off;\n  S.nb = Math.round(40 * Math.pow(cl(k[3], 0, 1), 0.373));\n  const sp = S.speed / 2;\n\n  if (input.btnPressed && input.btnPressed[0] && S.mode === 0) startTransit(S);\n  if (S.mode === 0) {\n    S.tau += d * sp;\n    S.stay -= d * sp;\n    const p = wander(S);\n    S.lu = clampTo(S, S.region, p[0]);\n    S.ly = p[1];\n    if (S.stay \u003c= 0) startTransit(S);\n  } else {\n    S.tt = min(1, S.tt + (d * sp) / 1.8);\n    const e = S.tt * S.tt * (3 - 2 * S.tt), f = 1 - e, b = S.bz;\n    const c0 = f * f * f, c1 = 3 * f * f * e, c2 = 3 * f * e * e, c3 = e * e * e;\n    let u = c0 * b[0] + c1 * b[2] + c2 * b[4] + c3 * b[6];\n    const y = c0 * b[1] + c1 * b[3] + c2 * b[5] + c3 * b[7];\n    // Between the flat sides the light is in a place, never in a wall.\n    // In a half-ellipse it keeps clear of the arc: with the walls 4 LEDs out,\n    // the curve's top would just touch it.\n    let yy = y;\n    if (y > YT && y \u003c YB) u = clampTo(S, S.tt \u003c 0.5 ? S.from : S.to, u);\n    else {\n      const yc = y \u003c= YT ? YT : YB, v = y - yc, E = u * u * IA2 + v * v * IB2;\n      if (E > 0.85) {\n        const q = sqrt(0.85 / E);\n        u *= q;\n        yy = yc + v * q;\n      }\n    }\n    S.lu = u;\n    S.ly = yy;\n    if (S.tt >= 1) {\n      S.mode = 0;\n      S.region = S.to;\n      S.tau = 0;\n      S.stay = S.region === 0 ? 5 + 3 * Math.random() : 7 + 3 * Math.random();\n    }\n  }\n\n  // The light fades over about a sixth of a second, so a place goes dark\n  // soon after the light has left it.\n  const buf = S.buf, kb = S.kb, fade = exp(-d / 0.16);\n  for (let i = 0; i \u003c N; i++) {\n    buf[i] *= fade;\n    kb[i] *= fade;\n  }\n  trace(S, d * 30);\n  // Exposure follows the mean of the lit LEDs over about half a second, the\n  // way an eye adjusts, so a chamber, where every ray soon hits a wall and\n  // loses 40% of its light, glows about as bright as the corridor.\n  let sum = 0, n = 0;\n  for (let i = 0; i \u003c N; i++)\n    if (buf[i] > 0.5) {\n      sum += buf[i];\n      n++;\n    }\n  const m = n ? sum / n : 1;\n  S.expo = S.expo > 0 ? S.expo + (m - S.expo) * (1 - exp(-d / 0.5)) : m;\n}\n\n// Rays leave the light evenly spaced round the circle, the whole fan turned\n// by a random angle each frame, and bounce off the mirrors; each reflection\n// keeps 60% of the light, so the first few reflections draw the shapes and\n// the later ones fill in. A ray's path is added to the buffer one LED step at\n// a time, so a pixel gathers light in proportion to the rays crossing it.\nfunction trace(S, gain) {\n  const nb = S.nb, R = cl(floor(4200 / (nb + 1)), 120, 300), w = S.w, buf = S.buf, kb = S.kb;\n  const phase = Math.random(), w0 = (gain * 0.5 * 300) / R;\n  for (let r = 0; r \u003c R; r++) {\n    const th = (2 * PI * (r + phase)) / R;\n    let u = S.lu, y = S.ly, dx = cos(th), dy = sin(th), wt = w0;\n    for (let k = 0; k \u003c= nb; k++) {\n      let best = 1e9, kind = 0, nx = 0, ny = 0;\n      // The two arcs: an ellipse counts as a mirror only on its own side of\n      // its flat side, which is open to the room between them.\n      for (let e = 0; e \u003c 2; e++) {\n        const yc = e ? YB : YT, v = y - yc;\n        const qa = dx * dx * IA2 + dy * dy * IB2, qb = 2 * (u * dx * IA2 + v * dy * IB2), qc = u * u * IA2 + v * v * IB2 - 1;\n        const disc = qb * qb - 4 * qa * qc;\n        if (disc \u003c= 0) continue;\n        const sq = sqrt(disc);\n        for (let j = 0; j \u003c 2; j++) {\n          const t = (-qb + (j ? sq : -sq)) / (2 * qa);\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (e ? hy >= YB : hy \u003c= YT) {\n            best = t;\n            kind = 1;\n            nx = (u + dx * t) * IA2;\n            ny = (hy - yc) * IB2;\n            break;\n          }\n        }\n      }\n      // The outer walls and the two thin corridor walls, mirrors on both sides.\n      if (dx !== 0)\n        for (let j = 0; j \u003c 4; j++) {\n          const X = j === 0 ? A : j === 1 ? -A : j === 2 ? w : -w, t = (X - u) / dx;\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (hy >= YT && hy \u003c= YB) {\n            best = t;\n            kind = 2;\n          }\n        }\n      if (kind === 0) break;\n      const u1 = u + dx * best, y1 = y + dy * best;\n      const n = floor(best) + 1, sx = (dx * best) / n, sy = (dy * best) / n, ww = (wt * best) / n;\n      let px = CX + u + sx * 0.5, py = y + sy * 0.5;\n      for (let i = 0; i \u003c n; i++) {\n        const ix = px | 0, iy = py | 0;\n        if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H) {\n          buf[iy * W + ix] += ww;\n          kb[iy * W + ix] += ww * k;\n        }\n        px += sx;\n        py += sy;\n      }\n      u = u1;\n      y = y1;\n      if (kind === 2) dx = -dx;\n      else {\n        const q = (2 * (dx * nx + dy * ny)) / (nx * nx + ny * ny);\n        dx -= q * nx;\n        dy -= q * ny;\n      }\n      wt *= REFL;\n    }\n  }\n}\n\n// The walls as one-LED lines, anti-aliased by distance: the arcs, the outer\n// walls and the two corridor walls from focus to focus (or wherever Offset\n// has moved them).\nfunction buildWalls(S) {\n  const wall = S.wall, w = S.w;\n  for (let py = 0, i = 0; py \u003c H; py++)\n    for (let px = 0; px \u003c W; px++, i++) {\n      const u = px + 0.5 - CX, y = py + 0.5, au = abs(u);\n      let dmin = 9;\n      if (y \u003c= YT || y >= YB) {\n        const v = y - (y \u003c= YT ? YT : YB);\n        const E = u * u * IA2 + v * v * IB2, g = 2 * sqrt(u * u * IA2 * IA2 + v * v * IB2 * IB2);\n        dmin = abs(E - 1) / max(g, 1e-6);\n        dmin = min(dmin, sqrt((au - w) * (au - w) + v * v));\n      } else dmin = min(abs(au - A), abs(au - w));\n      wall[i] = cl(1 - dmin, 0, 1);\n    }\n  S.wallW = w;\n}\n\n// A soft blur, 1 4 6 4 1 across and then down, about an LED wide, so the\n// rays glow instead of drawing hard lines and the edge of the light steps\n// down by under 40 levels a LED.\nfunction blur(src, out, tmp) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++)\n      tmp[o + x] = (src[o + max(0, x - 2)] + 4 * src[o + max(0, x - 1)] + 6 * src[o + x] + 4 * src[o + min(W - 1, x + 1)] + src[o + min(W - 1, x + 2)]) / 16;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o0 = max(0, y - 2) * W, o1 = max(0, y - 1) * W, o2 = y * W, o3 = min(H - 1, y + 1) * W, o4 = min(H - 1, y + 2) * W;\n    for (let x = 0; x \u003c W; x++) out[o2 + x] = (tmp[o0 + x] + 4 * tmp[o1 + x] + 6 * tmp[o2 + x] + 4 * tmp[o3 + x] + tmp[o4 + x]) / 16;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.wallW !== S.w) buildWalls(S);\n  const hz = S.hz, kz = S.kz, wall = S.wall, col = S.col;\n  blur(S.buf, hz, S.tmp);\n  blur(S.kb, kz, S.tmp);\n  // Colour by how many mirrors the light has met: the direct light is a pale\n  // tint of the hue, and each reflection turns it a little further round the\n  // wheel and deeper, a sixth of a turn by the fifth.\n  // Round orange, yellow and yellow-green, 0.03 to 0.29 on the wheel, the\n  // colour goes paler so the dimmer far light reads as butter, not olive.\n  const h = S.hue + 0.5;\n  for (let j = 0; j \u003c 16; j++) {\n    const f = 1 - exp(-j / 3), hj = h + 0.17 * f, hf = hj - floor(hj);\n    const mud = cl((hf - 0.01) / 0.04, 0, 1) * cl((0.33 - hf) / 0.06, 0, 1);\n    hsv(hj, (0.18 + 0.62 * f) * (1 - 0.6 * mud), 1, col, j * 3);\n  }\n  hsv(h + 0.27, 0.45, 34, col, 48);\n  const lx = CX + S.lu, ly = S.ly, ie = 1 / max(1, S.expo);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const L = hz[i], v = min(1, LEVEL * Math.pow(L * ie, GAMMA));\n      // The mean number of reflections here, read between two palette steps.\n      const kb = L > 1e-4 ? min(14.99, kz[i] / L) : 0, j = floor(kb), f = kb - j, o = j * 3;\n      const ddx = x + 0.5 - lx, ddy = y + 0.5 - ly, core = 255 * exp(-(ddx * ddx + ddy * ddy) / 1.1);\n      // A wall is a dim line in the dark and a darker line across the glow,\n      // a mirror seen edge on, so it never stands 40 levels off its sides.\n      const wv = wall[i], g = 255 * v * (1 - 0.5 * wv);\n      const r = g * (col[o] + (col[o + 3] - col[o]) * f) + wv * col[48] + core;\n      const gg = g * (col[o + 1] + (col[o + 4] - col[o + 1]) * f) + wv * col[49] + core;\n      const b = g * (col[o + 2] + (col[o + 5] - col[o + 2]) * f) + wv * col[50] + core;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","layer":{"id":"layer-penrose-room","type":"code","name":"penrose-room","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Penrose Room\n// Family:  physics\n// Idea:    A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Penrose unilluminable room (Roger Penrose, 1958), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1\n//\n// Knob 1: Hue. The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive.\n// Knob 2: Speed. How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower.\n// Knob 3: Offset. How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow.\n// Knob 4: Bounces. How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue.\n// Buttons: K1 tap sends the light across now, from the corridor into a side chamber or back.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The room, in LEDs. Two half-ellipses with semi-axes 31.5 and 26 put their\n// flat sides at rows 26.5 and 101.5, and their arcs touch rows 0 and 127, so\n// the room is the whole panel. The foci sit on the flat sides at 17.78 either\n// side of the middle column; the outer walls are the ellipses' own tangents\n// at the ends of the major axis, columns 0 and 63.\nconst A = 31.5, B = 26, C = sqrt(A * A - B * B), CX = 32;\nconst YT = 0.5 + B, YB = 127.5 - B, YM = 64;\nconst IA2 = 1 / (A * A), IB2 = 1 / (B * B), EPS = 1e-6;\n// Each reflection keeps 60% of the light. The glow is LEVEL times the light\n// over the mean of the lit LEDs, raised to GAMMA: the mean shows at 128 of 255\n// and the glow round the lamp comes close to full. At 92 the swap moved the\n// picture 0.270 on the study's drift scale; at 128 it moves it 0.365.\nconst REFL = 0.6, LEVEL = 0.50, GAMMA = 0.7;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, off: 0, nb: 14, w: C,\n    buf: new Float32Array(N), tmp: new Float32Array(N), hz: new Float32Array(N), kb: new Float32Array(N), kz: new Float32Array(N), wall: new Float32Array(N), wallW: NaN,\n    lu: 0, ly: YM, region: 0, tau: 0, stay: 3.2, mode: 0,\n    tt: 0, from: 0, to: 0, expo: 0, bz: new Float64Array(8), col: new Float32Array(51),\n  };\n}\n\n// Where the light may stand: the corridor between the walls, or one side\n// chamber, a little clear of every wall.\nfunction clampTo(S, region, u) {\n  const w = S.w;\n  if (region === 0) return cl(u, -(w - 1.2), w - 1.2);\n  return region * cl(region * u, w + 1.2, A - 1.2);\n}\n\n// A slow wander that starts from the middle of the place, so the light\n// arrives at the middle and sets off from there without a jump.\nfunction wander(S) {\n  const w = S.w, t = S.tau;\n  const y = YM + 30 * sin(0.4 * t);\n  if (S.region === 0) return [(w - 3.5) * sin(0.55 * t), y];\n  const uc = (S.region * (w + A)) / 2, au = max(0, (A - w) / 2 - 2.5);\n  return [uc + au * sin(0.7 * t), y];\n}\n\n// Crossing over: a cubic curve that leaves straight up (or down) through the\n// flat side nearer the light, arcs through the half-ellipse and drops\n// straight into the middle of the other place. From the corridor it leaves\n// between the foci and from a chamber outside them, as a ray would.\nfunction startTransit(S) {\n  const u0 = S.lu, y0 = S.ly, w = S.w;\n  S.from = S.region;\n  S.to = S.region === 0 ? (u0 > 0.5 ? 1 : u0 \u003c -0.5 ? -1 : Math.random() \u003c 0.5 ? -1 : 1) : 0;\n  const u3 = S.to === 0 ? 0 : (S.to * (w + A)) / 2, cy = y0 \u003c= YM ? YT - 32 : YB + 32;\n  S.bz.set([u0, y0, u0, cy, u3, cy, u3, YM]);\n  S.mode = 1;\n  S.tt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.off = cl(k[2] || 0, -4, 4);\n  S.w = C + S.off;\n  S.nb = Math.round(40 * Math.pow(cl(k[3], 0, 1), 0.373));\n  const sp = S.speed / 2;\n\n  if (input.btnPressed && input.btnPressed[0] && S.mode === 0) startTransit(S);\n  if (S.mode === 0) {\n    S.tau += d * sp;\n    S.stay -= d * sp;\n    const p = wander(S);\n    S.lu = clampTo(S, S.region, p[0]);\n    S.ly = p[1];\n    if (S.stay \u003c= 0) startTransit(S);\n  } else {\n    S.tt = min(1, S.tt + (d * sp) / 1.8);\n    const e = S.tt * S.tt * (3 - 2 * S.tt), f = 1 - e, b = S.bz;\n    const c0 = f * f * f, c1 = 3 * f * f * e, c2 = 3 * f * e * e, c3 = e * e * e;\n    let u = c0 * b[0] + c1 * b[2] + c2 * b[4] + c3 * b[6];\n    const y = c0 * b[1] + c1 * b[3] + c2 * b[5] + c3 * b[7];\n    // Between the flat sides the light is in a place, never in a wall.\n    // In a half-ellipse it keeps clear of the arc: with the walls 4 LEDs out,\n    // the curve's top would just touch it.\n    let yy = y;\n    if (y > YT && y \u003c YB) u = clampTo(S, S.tt \u003c 0.5 ? S.from : S.to, u);\n    else {\n      const yc = y \u003c= YT ? YT : YB, v = y - yc, E = u * u * IA2 + v * v * IB2;\n      if (E > 0.85) {\n        const q = sqrt(0.85 / E);\n        u *= q;\n        yy = yc + v * q;\n      }\n    }\n    S.lu = u;\n    S.ly = yy;\n    if (S.tt >= 1) {\n      S.mode = 0;\n      S.region = S.to;\n      S.tau = 0;\n      S.stay = S.region === 0 ? 5 + 3 * Math.random() : 7 + 3 * Math.random();\n    }\n  }\n\n  // The light fades over about a sixth of a second, so a place goes dark\n  // soon after the light has left it.\n  const buf = S.buf, kb = S.kb, fade = exp(-d / 0.16);\n  for (let i = 0; i \u003c N; i++) {\n    buf[i] *= fade;\n    kb[i] *= fade;\n  }\n  trace(S, d * 30);\n  // Exposure follows the mean of the lit LEDs over about half a second, the\n  // way an eye adjusts, so a chamber, where every ray soon hits a wall and\n  // loses 40% of its light, glows about as bright as the corridor.\n  let sum = 0, n = 0;\n  for (let i = 0; i \u003c N; i++)\n    if (buf[i] > 0.5) {\n      sum += buf[i];\n      n++;\n    }\n  const m = n ? sum / n : 1;\n  S.expo = S.expo > 0 ? S.expo + (m - S.expo) * (1 - exp(-d / 0.5)) : m;\n}\n\n// Rays leave the light evenly spaced round the circle, the whole fan turned\n// by a random angle each frame, and bounce off the mirrors; each reflection\n// keeps 60% of the light, so the first few reflections draw the shapes and\n// the later ones fill in. A ray's path is added to the buffer one LED step at\n// a time, so a pixel gathers light in proportion to the rays crossing it.\nfunction trace(S, gain) {\n  const nb = S.nb, R = cl(floor(4200 / (nb + 1)), 120, 300), w = S.w, buf = S.buf, kb = S.kb;\n  const phase = Math.random(), w0 = (gain * 0.5 * 300) / R;\n  for (let r = 0; r \u003c R; r++) {\n    const th = (2 * PI * (r + phase)) / R;\n    let u = S.lu, y = S.ly, dx = cos(th), dy = sin(th), wt = w0;\n    for (let k = 0; k \u003c= nb; k++) {\n      let best = 1e9, kind = 0, nx = 0, ny = 0;\n      // The two arcs: an ellipse counts as a mirror only on its own side of\n      // its flat side, which is open to the room between them.\n      for (let e = 0; e \u003c 2; e++) {\n        const yc = e ? YB : YT, v = y - yc;\n        const qa = dx * dx * IA2 + dy * dy * IB2, qb = 2 * (u * dx * IA2 + v * dy * IB2), qc = u * u * IA2 + v * v * IB2 - 1;\n        const disc = qb * qb - 4 * qa * qc;\n        if (disc \u003c= 0) continue;\n        const sq = sqrt(disc);\n        for (let j = 0; j \u003c 2; j++) {\n          const t = (-qb + (j ? sq : -sq)) / (2 * qa);\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (e ? hy >= YB : hy \u003c= YT) {\n            best = t;\n            kind = 1;\n            nx = (u + dx * t) * IA2;\n            ny = (hy - yc) * IB2;\n            break;\n          }\n        }\n      }\n      // The outer walls and the two thin corridor walls, mirrors on both sides.\n      if (dx !== 0)\n        for (let j = 0; j \u003c 4; j++) {\n          const X = j === 0 ? A : j === 1 ? -A : j === 2 ? w : -w, t = (X - u) / dx;\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (hy >= YT && hy \u003c= YB) {\n            best = t;\n            kind = 2;\n          }\n        }\n      if (kind === 0) break;\n      const u1 = u + dx * best, y1 = y + dy * best;\n      const n = floor(best) + 1, sx = (dx * best) / n, sy = (dy * best) / n, ww = (wt * best) / n;\n      let px = CX + u + sx * 0.5, py = y + sy * 0.5;\n      for (let i = 0; i \u003c n; i++) {\n        const ix = px | 0, iy = py | 0;\n        if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H) {\n          buf[iy * W + ix] += ww;\n          kb[iy * W + ix] += ww * k;\n        }\n        px += sx;\n        py += sy;\n      }\n      u = u1;\n      y = y1;\n      if (kind === 2) dx = -dx;\n      else {\n        const q = (2 * (dx * nx + dy * ny)) / (nx * nx + ny * ny);\n        dx -= q * nx;\n        dy -= q * ny;\n      }\n      wt *= REFL;\n    }\n  }\n}\n\n// The walls as one-LED lines, anti-aliased by distance: the arcs, the outer\n// walls and the two corridor walls from focus to focus (or wherever Offset\n// has moved them).\nfunction buildWalls(S) {\n  const wall = S.wall, w = S.w;\n  for (let py = 0, i = 0; py \u003c H; py++)\n    for (let px = 0; px \u003c W; px++, i++) {\n      const u = px + 0.5 - CX, y = py + 0.5, au = abs(u);\n      let dmin = 9;\n      if (y \u003c= YT || y >= YB) {\n        const v = y - (y \u003c= YT ? YT : YB);\n        const E = u * u * IA2 + v * v * IB2, g = 2 * sqrt(u * u * IA2 * IA2 + v * v * IB2 * IB2);\n        dmin = abs(E - 1) / max(g, 1e-6);\n        dmin = min(dmin, sqrt((au - w) * (au - w) + v * v));\n      } else dmin = min(abs(au - A), abs(au - w));\n      wall[i] = cl(1 - dmin, 0, 1);\n    }\n  S.wallW = w;\n}\n\n// A soft blur, 1 4 6 4 1 across and then down, about an LED wide, so the\n// rays glow instead of drawing hard lines and the edge of the light steps\n// down by under 40 levels a LED.\nfunction blur(src, out, tmp) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++)\n      tmp[o + x] = (src[o + max(0, x - 2)] + 4 * src[o + max(0, x - 1)] + 6 * src[o + x] + 4 * src[o + min(W - 1, x + 1)] + src[o + min(W - 1, x + 2)]) / 16;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o0 = max(0, y - 2) * W, o1 = max(0, y - 1) * W, o2 = y * W, o3 = min(H - 1, y + 1) * W, o4 = min(H - 1, y + 2) * W;\n    for (let x = 0; x \u003c W; x++) out[o2 + x] = (tmp[o0 + x] + 4 * tmp[o1 + x] + 6 * tmp[o2 + x] + 4 * tmp[o3 + x] + tmp[o4 + x]) / 16;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.wallW !== S.w) buildWalls(S);\n  const hz = S.hz, kz = S.kz, wall = S.wall, col = S.col;\n  blur(S.buf, hz, S.tmp);\n  blur(S.kb, kz, S.tmp);\n  // Colour by how many mirrors the light has met: the direct light is a pale\n  // tint of the hue, and each reflection turns it a little further round the\n  // wheel and deeper, a sixth of a turn by the fifth.\n  // Round orange, yellow and yellow-green, 0.03 to 0.29 on the wheel, the\n  // colour goes paler so the dimmer far light reads as butter, not olive.\n  const h = S.hue + 0.5;\n  for (let j = 0; j \u003c 16; j++) {\n    const f = 1 - exp(-j / 3), hj = h + 0.17 * f, hf = hj - floor(hj);\n    const mud = cl((hf - 0.01) / 0.04, 0, 1) * cl((0.33 - hf) / 0.06, 0, 1);\n    hsv(hj, (0.18 + 0.62 * f) * (1 - 0.6 * mud), 1, col, j * 3);\n  }\n  hsv(h + 0.27, 0.45, 34, col, 48);\n  const lx = CX + S.lu, ly = S.ly, ie = 1 / max(1, S.expo);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const L = hz[i], v = min(1, LEVEL * Math.pow(L * ie, GAMMA));\n      // The mean number of reflections here, read between two palette steps.\n      const kb = L > 1e-4 ? min(14.99, kz[i] / L) : 0, j = floor(kb), f = kb - j, o = j * 3;\n      const ddx = x + 0.5 - lx, ddy = y + 0.5 - ly, core = 255 * exp(-(ddx * ddx + ddy * ddy) / 1.1);\n      // A wall is a dim line in the dark and a darker line across the glow,\n      // a mirror seen edge on, so it never stands 40 levels off its sides.\n      const wv = wall[i], g = 255 * v * (1 - 0.5 * wv);\n      const r = g * (col[o] + (col[o + 3] - col[o]) * f) + wv * col[48] + core;\n      const gg = g * (col[o + 1] + (col[o + 4] - col[o + 1]) * f) + wv * col[49] + core;\n      const b = g * (col[o + 2] + (col[o + 5] - col[o + 2]) * f) + wv * col[50] + core;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower."},{"name":"Offset","min":-4,"max":4,"about":"How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow."},{"name":"Bounces","min":0,"max":1,"about":"How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue."}],"start":[0,2,0,0.06],"measures":{"motion":0.1329,"detail":0.0175,"edges":0.0753,"complexity":1.6655,"coverage":0.6752,"colour":0.1329,"drift":0.3645},"knobResponse":[0.1321,0.1111,0.1163,0.0615]},{"slug":"pentomino-cover","title":"Pentomino Cover","family":"algo","round":34,"note":"6×10 직사각형을 크누스의 춤추는 링크가 열두 펜토미노로 채워요. 고를 수가 가장 적은 칸부터 조각을 놓고 막히면 빼서 아래쪽 조각들이 쉴 새 없이 들고 나며 윤곽만 잠깐 남기고, 다 덮이면 2초 동안 빛이 비스듬히 쓸고 판 아래에 눈금이 하나 늘어요. K3 은 판을 5×12, 4×15, 해가 둘뿐인 3×20 으로 바꿔요.","idea":"A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.","buttons":"K1 tap starts a new search in a new shuffled order.","code":"// ===== Patternflow pattern =====\n// Title:   Pentomino Cover\n// Family:  algo\n// Idea:    A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dancing Links and Algorithm X (Donald Knuth, 2000) on Solomon Golomb's pentominoes (1953), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1\n//\n// Knob 1: Hue. Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had.\n// Knob 2: Speed. Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3.\n// Knob 3: Board. 0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images.\n// Knob 4: Shuffle. How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search.\n// Buttons: K1 tap starts a new search in a new shuffled order.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, round, abs, pow, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The twelve pentominoes, F I L N P T U V W X Y Z.\nconst PIECES = [\n  [[1, 0], [2, 0], [0, 1], [1, 1], [1, 2]],\n  [[0, 0], [1, 0], [2, 0], [3, 0], [4, 0]],\n  [[0, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [0, 1], [1, 1], [0, 2]],\n  [[0, 0], [1, 0], [2, 0], [1, 1], [1, 2]],\n  [[0, 0], [2, 0], [0, 1], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [0, 2], [1, 2], [2, 2]],\n  [[0, 0], [0, 1], [1, 1], [1, 2], [2, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [1, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [1, 2], [2, 2]],\n];\nconst P_ = 4, X_ = 9;\n// Boards, columns by rows, and the LEDs a cell takes.\nconst BOARDS = [[6, 10, 10], [5, 12, 10], [4, 15, 8], [3, 20, 6]];\n\n// Every distinct orientation of a piece: the four turns first, then the\n// four turns of its mirror image, so flip marks the mirrored ones.\nfunction orientations(cells) {\n  const out = [], seen = new Set();\n  for (let f = 0; f \u003c 2; f++)\n    for (let q = 0; q \u003c 4; q++) {\n      let c = cells.map(([x, y]) => (f ? [-x, y] : [x, y]));\n      for (let k = 0; k \u003c q; k++) c = c.map(([x, y]) => [-y, x]);\n      const mx = min(...c.map((p) => p[0])), my = min(...c.map((p) => p[1]));\n      c = c.map(([x, y]) => [x - mx, y - my]).sort((a, b) => a[1] - b[1] || a[0] - b[0]);\n      const key = c.join(\";\");\n      if (!seen.has(key)) seen.add(key), out.push({ cells: c, flip: f });\n    }\n  return out;\n}\nconst ORIENT = PIECES.map(orientations);\n\n// The exact cover matrix: one column per piece, one per cell, and one\n// secondary column that keeps the count to solutions up to symmetry. The X\n// may only sit in the board's first quarter; when it sits on a mirror line\n// of the board the P may not be mirrored, and the secondary column holds\n// those two choices apart.\nfunction placements(bw, bh) {\n  const rows = [];\n  PIECES.forEach((_, pi) => {\n    for (const o of ORIENT[pi]) {\n      const ow = max(...o.cells.map((p) => p[0])) + 1, oh = max(...o.cells.map((p) => p[1])) + 1;\n      for (let y = 0; y + oh \u003c= bh; y++)\n        for (let x = 0; x + ow \u003c= bw; x++) {\n          let sec = pi === P_ && o.flip === 1;\n          if (pi === X_) {\n            const cx = x + 1, cy = y + 1;\n            if (2 * cx > bw - 1 || 2 * cy > bh - 1) continue;\n            sec = (bw % 2 === 1 && 2 * cx === bw - 1) || (bh % 2 === 1 && 2 * cy === bh - 1);\n          }\n          rows.push({ piece: pi, cells: o.cells.map(([a, b]) => (y + b) * bw + x + a), sec });\n        }\n    }\n  });\n  return rows;\n}\n\nconst MAXN = 16000;\nfunction newSearch(S, again) {\n  const [bw, bh] = BOARDS[S.board];\n  const rows = placements(bw, bh);\n  // Shuffle moves each row by up to twice that share of the list. A search\n  // started again keeps the order it had.\n  if (!again) S.jit = rows.map(() => random());\n  const key = rows.map((_, i) => i / rows.length + 2 * S.shuffle * S.jit[i]);\n  const order = rows.map((_, i) => i).sort((a, b) => key[a] - key[b]);\n  const NC = 12 + bw * bh, SEC = NC + 1;\n  const { L, R, U, D, C, RW, SZ } = S;\n  for (let c = 0; c \u003c= NC; c++) (L[c] = c - 1), (R[c] = c + 1), (U[c] = D[c] = C[c] = c), (SZ[c] = 0);\n  L[0] = NC;\n  R[NC] = 0;\n  L[SEC] = R[SEC] = U[SEC] = D[SEC] = C[SEC] = SEC;\n  let k = SEC + 1;\n  S.rows = order.map((i) => rows[i]);\n  S.rows.forEach((r, ri) => {\n    const cols = [1 + r.piece, ...r.cells.map((c) => 13 + c)];\n    if (r.sec) cols.push(SEC);\n    const first = k;\n    for (const c of cols) {\n      C[k] = c;\n      RW[k] = ri;\n      U[k] = U[c];\n      D[k] = c;\n      D[U[c]] = k;\n      U[c] = k;\n      SZ[c]++;\n      L[k] = k - 1;\n      R[k] = k + 1;\n      k++;\n    }\n    L[first] = k - 1;\n    R[k - 1] = first;\n  });\n  S.bw = bw;\n  S.bh = bh;\n  S.cs = BOARDS[S.board][2];\n  S.k = 0;\n  S.mode = 0;\n  S.done = false;\n  S.found = 0;\n  S.hold = 0;\n  S.cell.fill(-1);\n  S.age.fill(9);\n  S.ghost.fill(-1);\n  S.gAge.fill(9);\n  S.builtBoard = S.board;\n  S.builtShuffle = S.shuffle;\n}\n\nfunction cover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  L[R[c]] = L[c];\n  R[L[c]] = R[c];\n  for (let i = D[c]; i !== c; i = D[i])\n    for (let j = R[i]; j !== i; j = R[j]) (U[D[j]] = U[j]), (D[U[j]] = D[j]), SZ[C[j]]--;\n}\nfunction uncover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  for (let i = U[c]; i !== c; i = U[i])\n    for (let j = L[i]; j !== i; j = L[j]) SZ[C[j]]++, (U[D[j]] = j), (D[U[j]] = j);\n  L[R[c]] = c;\n  R[L[c]] = c;\n}\nfunction place(S, node, on) {\n  const r = S.rows[S.RW[node]];\n  for (const c of r.cells) {\n    if (on) (S.cell[c] = r.piece), (S.age[c] = 0);\n    else (S.ghost[c] = S.cell[c]), (S.gAge[c] = 0), (S.cell[c] = -1);\n  }\n}\n\n// Algorithm X, one node of the search tree a call: enter a level and cover\n// the column with the fewest rows left, try its next row, or step back.\n// Returns true when the board is full.\nfunction searchStep(S) {\n  const { L, R, D, C, SZ, col, row } = S;\n  if (S.mode === 0) {\n    if (R[0] === 0) {\n      S.mode = 2;\n      return true;\n    }\n    let c = R[0], best = 1e9;\n    for (let j = R[0]; j !== 0; j = R[j]) if (SZ[j] \u003c best) (best = SZ[j]), (c = j);\n    cover(S, c);\n    col[S.k] = c;\n    row[S.k] = D[c];\n    S.mode = 1;\n  } else if (S.mode === 1) {\n    const r = row[S.k];\n    if (r === col[S.k]) {\n      uncover(S, col[S.k]);\n      S.mode = 2;\n      return false;\n    }\n    for (let j = R[r]; j !== r; j = R[j]) cover(S, C[j]);\n    place(S, r, true);\n    S.k++;\n    S.mode = 0;\n  } else {\n    if (S.k === 0) {\n      S.done = true;\n      return false;\n    }\n    S.k--;\n    const r = row[S.k];\n    place(S, r, false);\n    for (let j = L[r]; j !== r; j = L[j]) uncover(S, C[j]);\n    row[S.k] = D[r];\n    S.mode = 1;\n  }\n  return false;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, board: 0, shuffle: 0.06, warm: false, acc: 0, sweep: 0,\n    L: new Int32Array(MAXN), R: new Int32Array(MAXN), U: new Int32Array(MAXN), D: new Int32Array(MAXN),\n    C: new Int32Array(MAXN), RW: new Int32Array(MAXN), SZ: new Int32Array(80), col: new Int32Array(16), row: new Int32Array(16),\n    cell: new Int8Array(60), age: new Float32Array(60), ghost: new Int8Array(60), gAge: new Float32Array(60),\n    key: new Int8Array(60), pc: new Int8Array(N), c: [0, 0, 0],\n  };\n}\n\n// A full cover holds for HOLD seconds; the search takes rate(Speed) steps a\n// second.\nconst HOLD = 2;\nconst rate = (sp) => 5 * pow(2, 3.5 * (sp - 0.2));\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.board = cl(round(k[2]), 0, 3);\n  S.shuffle = cl(k[3], 0, 1);\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (!S.warm || pressed || S.board !== S.builtBoard || abs(S.shuffle - S.builtShuffle) > 0.04) {\n    newSearch(S);\n    if (!S.warm) {\n      // Open about 1100 steps short of the first full board, so at Speed 2\n      // the first solution comes near 2.8 s.\n      let n = 0;\n      while (!searchStep(S) && !S.done) n++;\n      newSearch(S, true);\n      for (let i = 0; i \u003c n - 1100; i++) searchStep(S);\n      S.age.fill(9);\n      S.ghost.fill(-1);\n      S.warm = true;\n    }\n  }\n  for (let c = 0; c \u003c 60; c++) (S.age[c] += d), (S.gAge[c] += d);\n  if (S.hold > 0) {\n    S.hold = max(0, S.hold - d);\n    S.sweep += d / HOLD;\n    return;\n  }\n  if (S.done) {\n    newSearch(S);\n    return;\n  }\n  S.acc += d * rate(S.speed);\n  while (S.acc >= 1) {\n    S.acc--;\n    if (searchStep(S)) {\n      S.found++;\n      S.hold = HOLD;\n      S.sweep = 0;\n      S.acc = 0;\n      break;\n    }\n    if (S.done) break;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { bw, bh, cs, cell, age, ghost, gAge, key, pc, c } = S, base = S.hue + 0.55;\n  const BW = bw * cs + 1, BH = bh * cs + 1, ox = floor((W - BW) / 2), oy = floor((H - BH) / 2);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, 0, 0, 0);\n  // Each cell shows its piece, or for 0.18 s after the search takes a\n  // piece out, that piece's outline fading.\n  for (let i = 0; i \u003c bw * bh; i++) key[i] = cell[i] >= 0 ? cell[i] : ghost[i] >= 0 && gAge[i] \u003c 0.18 ? 12 + ghost[i] : -1;\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= bw || y >= bh ? -2 : key[y * bw + x]);\n  // A cell's own LEDs show its piece, a grid line between two cells of one\n  // piece that piece, any other grid line the dark seam.\n  pc.fill(-1);\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const gx = X % cs === 0, gy = Y % cs === 0, cx = floor(X / cs), cy = floor(Y / cs);\n      let q;\n      if (!gx && !gy) q = at(cx, cy);\n      else if (gx && !gy) q = at(cx - 1, cy) === at(cx, cy) ? at(cx, cy) : -1;\n      else if (!gx && gy) q = at(cx, cy - 1) === at(cx, cy) ? at(cx, cy) : -1;\n      else {\n        const a = at(cx - 1, cy - 1);\n        q = a === at(cx, cy - 1) && a === at(cx - 1, cy) && a === at(cx, cy) ? a : -1;\n      }\n      pc[(oy + Y) * W + ox + X] = q;\n    }\n  // A light sweeps across the board while a solution holds.\n  const band = S.hold > 0 ? -0.25 + 1.5 * cl(S.sweep, 0, 1) : -9;\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const p = (oy + Y) * W + ox + X, q = pc[p];\n      const cx = min(bw - 1, floor(X / cs)), cy = min(bh - 1, floor(Y / cs)), ci = cy * bw + cx;\n      const g = (X / BW + Y / BH) / 2 - band, lit = S.hold > 0 ? exp(-g * g * 90) : 0;\n      if (q >= 0 && q \u003c 12) {\n        // A slight bevel: lighter next to a seam above or to the left,\n        // darker next to one below or to the right.\n        const up = pc[p - W] \u003c 0 || pc[p - W] >= 12, lf = pc[p - 1] \u003c 0 || pc[p - 1] >= 12;\n        const dn = pc[p + W] \u003c 0 || pc[p + W] >= 12, rt = pc[p + 1] \u003c 0 || pc[p + 1] >= 12;\n        const fresh = cl(1 - age[ci] / 0.15, 0, 1);\n        const v = min(1, 0.82 + (up || lf ? 0.18 : 0) - (dn || rt ? 0.2 : 0) + 0.15 * fresh + 0.3 * lit);\n        hsv(base + q / 12, (0.72 - 0.3 * fresh) * (1 - 0.7 * lit), 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 255 * v), round(c[1] * 255 * v), round(c[2] * 255 * v));\n      } else if (q >= 12) {\n        // A piece just taken out leaves its outline for a moment.\n        if (pc[p - W] === q && pc[p + W] === q && pc[p - 1] === q && pc[p + 1] === q) continue;\n        const f = cl(1 - gAge[ci] / 0.18, 0, 1);\n        hsv(base + (q - 12) / 12, 0.6, 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 150 * f), round(c[1] * 150 * f), round(c[2] * 150 * f));\n      } else if (X === 0 || Y === 0 || X === BW - 1 || Y === BH - 1) display.setPixel(ox + X, oy + Y, 44, 44, 54);\n      else if (X % cs === 0 && Y % cs === 0) display.setPixel(ox + X, oy + Y, 40, 40, 48);\n    }\n  // One tick under the board for each solution this search has found, 31\n  // to a row; a full row turns dim and the next starts over it.\n  const ty = oy + BH + (oy > 6 ? 2 : 0), full = floor(S.found / 31), part = S.found % 31;\n  for (let i = 0; i \u003c 31; i++) {\n    const on = i \u003c part, x = 1 + 2 * i;\n    if (!on && full === 0) continue;\n    hsv(base + 0.1 * (on ? full : full - 1), on ? 0.25 : 0.5, 1, c);\n    const v = on ? (i === part - 1 && S.hold > 0 ? 255 : 190) : 70;\n    for (let y = ty; y \u003c min(H, ty + 2); y++) display.setPixel(x, y, round(c[0] * v), round(c[1] * v), round(c[2] * v));\n  }\n}\n","layer":{"id":"layer-pentomino-cover","type":"code","name":"pentomino-cover","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pentomino Cover\n// Family:  algo\n// Idea:    A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dancing Links and Algorithm X (Donald Knuth, 2000) on Solomon Golomb's pentominoes (1953), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1\n//\n// Knob 1: Hue. Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had.\n// Knob 2: Speed. Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3.\n// Knob 3: Board. 0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images.\n// Knob 4: Shuffle. How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search.\n// Buttons: K1 tap starts a new search in a new shuffled order.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, round, abs, pow, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The twelve pentominoes, F I L N P T U V W X Y Z.\nconst PIECES = [\n  [[1, 0], [2, 0], [0, 1], [1, 1], [1, 2]],\n  [[0, 0], [1, 0], [2, 0], [3, 0], [4, 0]],\n  [[0, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [0, 1], [1, 1], [0, 2]],\n  [[0, 0], [1, 0], [2, 0], [1, 1], [1, 2]],\n  [[0, 0], [2, 0], [0, 1], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [0, 2], [1, 2], [2, 2]],\n  [[0, 0], [0, 1], [1, 1], [1, 2], [2, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [1, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [1, 2], [2, 2]],\n];\nconst P_ = 4, X_ = 9;\n// Boards, columns by rows, and the LEDs a cell takes.\nconst BOARDS = [[6, 10, 10], [5, 12, 10], [4, 15, 8], [3, 20, 6]];\n\n// Every distinct orientation of a piece: the four turns first, then the\n// four turns of its mirror image, so flip marks the mirrored ones.\nfunction orientations(cells) {\n  const out = [], seen = new Set();\n  for (let f = 0; f \u003c 2; f++)\n    for (let q = 0; q \u003c 4; q++) {\n      let c = cells.map(([x, y]) => (f ? [-x, y] : [x, y]));\n      for (let k = 0; k \u003c q; k++) c = c.map(([x, y]) => [-y, x]);\n      const mx = min(...c.map((p) => p[0])), my = min(...c.map((p) => p[1]));\n      c = c.map(([x, y]) => [x - mx, y - my]).sort((a, b) => a[1] - b[1] || a[0] - b[0]);\n      const key = c.join(\";\");\n      if (!seen.has(key)) seen.add(key), out.push({ cells: c, flip: f });\n    }\n  return out;\n}\nconst ORIENT = PIECES.map(orientations);\n\n// The exact cover matrix: one column per piece, one per cell, and one\n// secondary column that keeps the count to solutions up to symmetry. The X\n// may only sit in the board's first quarter; when it sits on a mirror line\n// of the board the P may not be mirrored, and the secondary column holds\n// those two choices apart.\nfunction placements(bw, bh) {\n  const rows = [];\n  PIECES.forEach((_, pi) => {\n    for (const o of ORIENT[pi]) {\n      const ow = max(...o.cells.map((p) => p[0])) + 1, oh = max(...o.cells.map((p) => p[1])) + 1;\n      for (let y = 0; y + oh \u003c= bh; y++)\n        for (let x = 0; x + ow \u003c= bw; x++) {\n          let sec = pi === P_ && o.flip === 1;\n          if (pi === X_) {\n            const cx = x + 1, cy = y + 1;\n            if (2 * cx > bw - 1 || 2 * cy > bh - 1) continue;\n            sec = (bw % 2 === 1 && 2 * cx === bw - 1) || (bh % 2 === 1 && 2 * cy === bh - 1);\n          }\n          rows.push({ piece: pi, cells: o.cells.map(([a, b]) => (y + b) * bw + x + a), sec });\n        }\n    }\n  });\n  return rows;\n}\n\nconst MAXN = 16000;\nfunction newSearch(S, again) {\n  const [bw, bh] = BOARDS[S.board];\n  const rows = placements(bw, bh);\n  // Shuffle moves each row by up to twice that share of the list. A search\n  // started again keeps the order it had.\n  if (!again) S.jit = rows.map(() => random());\n  const key = rows.map((_, i) => i / rows.length + 2 * S.shuffle * S.jit[i]);\n  const order = rows.map((_, i) => i).sort((a, b) => key[a] - key[b]);\n  const NC = 12 + bw * bh, SEC = NC + 1;\n  const { L, R, U, D, C, RW, SZ } = S;\n  for (let c = 0; c \u003c= NC; c++) (L[c] = c - 1), (R[c] = c + 1), (U[c] = D[c] = C[c] = c), (SZ[c] = 0);\n  L[0] = NC;\n  R[NC] = 0;\n  L[SEC] = R[SEC] = U[SEC] = D[SEC] = C[SEC] = SEC;\n  let k = SEC + 1;\n  S.rows = order.map((i) => rows[i]);\n  S.rows.forEach((r, ri) => {\n    const cols = [1 + r.piece, ...r.cells.map((c) => 13 + c)];\n    if (r.sec) cols.push(SEC);\n    const first = k;\n    for (const c of cols) {\n      C[k] = c;\n      RW[k] = ri;\n      U[k] = U[c];\n      D[k] = c;\n      D[U[c]] = k;\n      U[c] = k;\n      SZ[c]++;\n      L[k] = k - 1;\n      R[k] = k + 1;\n      k++;\n    }\n    L[first] = k - 1;\n    R[k - 1] = first;\n  });\n  S.bw = bw;\n  S.bh = bh;\n  S.cs = BOARDS[S.board][2];\n  S.k = 0;\n  S.mode = 0;\n  S.done = false;\n  S.found = 0;\n  S.hold = 0;\n  S.cell.fill(-1);\n  S.age.fill(9);\n  S.ghost.fill(-1);\n  S.gAge.fill(9);\n  S.builtBoard = S.board;\n  S.builtShuffle = S.shuffle;\n}\n\nfunction cover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  L[R[c]] = L[c];\n  R[L[c]] = R[c];\n  for (let i = D[c]; i !== c; i = D[i])\n    for (let j = R[i]; j !== i; j = R[j]) (U[D[j]] = U[j]), (D[U[j]] = D[j]), SZ[C[j]]--;\n}\nfunction uncover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  for (let i = U[c]; i !== c; i = U[i])\n    for (let j = L[i]; j !== i; j = L[j]) SZ[C[j]]++, (U[D[j]] = j), (D[U[j]] = j);\n  L[R[c]] = c;\n  R[L[c]] = c;\n}\nfunction place(S, node, on) {\n  const r = S.rows[S.RW[node]];\n  for (const c of r.cells) {\n    if (on) (S.cell[c] = r.piece), (S.age[c] = 0);\n    else (S.ghost[c] = S.cell[c]), (S.gAge[c] = 0), (S.cell[c] = -1);\n  }\n}\n\n// Algorithm X, one node of the search tree a call: enter a level and cover\n// the column with the fewest rows left, try its next row, or step back.\n// Returns true when the board is full.\nfunction searchStep(S) {\n  const { L, R, D, C, SZ, col, row } = S;\n  if (S.mode === 0) {\n    if (R[0] === 0) {\n      S.mode = 2;\n      return true;\n    }\n    let c = R[0], best = 1e9;\n    for (let j = R[0]; j !== 0; j = R[j]) if (SZ[j] \u003c best) (best = SZ[j]), (c = j);\n    cover(S, c);\n    col[S.k] = c;\n    row[S.k] = D[c];\n    S.mode = 1;\n  } else if (S.mode === 1) {\n    const r = row[S.k];\n    if (r === col[S.k]) {\n      uncover(S, col[S.k]);\n      S.mode = 2;\n      return false;\n    }\n    for (let j = R[r]; j !== r; j = R[j]) cover(S, C[j]);\n    place(S, r, true);\n    S.k++;\n    S.mode = 0;\n  } else {\n    if (S.k === 0) {\n      S.done = true;\n      return false;\n    }\n    S.k--;\n    const r = row[S.k];\n    place(S, r, false);\n    for (let j = L[r]; j !== r; j = L[j]) uncover(S, C[j]);\n    row[S.k] = D[r];\n    S.mode = 1;\n  }\n  return false;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, board: 0, shuffle: 0.06, warm: false, acc: 0, sweep: 0,\n    L: new Int32Array(MAXN), R: new Int32Array(MAXN), U: new Int32Array(MAXN), D: new Int32Array(MAXN),\n    C: new Int32Array(MAXN), RW: new Int32Array(MAXN), SZ: new Int32Array(80), col: new Int32Array(16), row: new Int32Array(16),\n    cell: new Int8Array(60), age: new Float32Array(60), ghost: new Int8Array(60), gAge: new Float32Array(60),\n    key: new Int8Array(60), pc: new Int8Array(N), c: [0, 0, 0],\n  };\n}\n\n// A full cover holds for HOLD seconds; the search takes rate(Speed) steps a\n// second.\nconst HOLD = 2;\nconst rate = (sp) => 5 * pow(2, 3.5 * (sp - 0.2));\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.board = cl(round(k[2]), 0, 3);\n  S.shuffle = cl(k[3], 0, 1);\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (!S.warm || pressed || S.board !== S.builtBoard || abs(S.shuffle - S.builtShuffle) > 0.04) {\n    newSearch(S);\n    if (!S.warm) {\n      // Open about 1100 steps short of the first full board, so at Speed 2\n      // the first solution comes near 2.8 s.\n      let n = 0;\n      while (!searchStep(S) && !S.done) n++;\n      newSearch(S, true);\n      for (let i = 0; i \u003c n - 1100; i++) searchStep(S);\n      S.age.fill(9);\n      S.ghost.fill(-1);\n      S.warm = true;\n    }\n  }\n  for (let c = 0; c \u003c 60; c++) (S.age[c] += d), (S.gAge[c] += d);\n  if (S.hold > 0) {\n    S.hold = max(0, S.hold - d);\n    S.sweep += d / HOLD;\n    return;\n  }\n  if (S.done) {\n    newSearch(S);\n    return;\n  }\n  S.acc += d * rate(S.speed);\n  while (S.acc >= 1) {\n    S.acc--;\n    if (searchStep(S)) {\n      S.found++;\n      S.hold = HOLD;\n      S.sweep = 0;\n      S.acc = 0;\n      break;\n    }\n    if (S.done) break;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { bw, bh, cs, cell, age, ghost, gAge, key, pc, c } = S, base = S.hue + 0.55;\n  const BW = bw * cs + 1, BH = bh * cs + 1, ox = floor((W - BW) / 2), oy = floor((H - BH) / 2);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, 0, 0, 0);\n  // Each cell shows its piece, or for 0.18 s after the search takes a\n  // piece out, that piece's outline fading.\n  for (let i = 0; i \u003c bw * bh; i++) key[i] = cell[i] >= 0 ? cell[i] : ghost[i] >= 0 && gAge[i] \u003c 0.18 ? 12 + ghost[i] : -1;\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= bw || y >= bh ? -2 : key[y * bw + x]);\n  // A cell's own LEDs show its piece, a grid line between two cells of one\n  // piece that piece, any other grid line the dark seam.\n  pc.fill(-1);\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const gx = X % cs === 0, gy = Y % cs === 0, cx = floor(X / cs), cy = floor(Y / cs);\n      let q;\n      if (!gx && !gy) q = at(cx, cy);\n      else if (gx && !gy) q = at(cx - 1, cy) === at(cx, cy) ? at(cx, cy) : -1;\n      else if (!gx && gy) q = at(cx, cy - 1) === at(cx, cy) ? at(cx, cy) : -1;\n      else {\n        const a = at(cx - 1, cy - 1);\n        q = a === at(cx, cy - 1) && a === at(cx - 1, cy) && a === at(cx, cy) ? a : -1;\n      }\n      pc[(oy + Y) * W + ox + X] = q;\n    }\n  // A light sweeps across the board while a solution holds.\n  const band = S.hold > 0 ? -0.25 + 1.5 * cl(S.sweep, 0, 1) : -9;\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const p = (oy + Y) * W + ox + X, q = pc[p];\n      const cx = min(bw - 1, floor(X / cs)), cy = min(bh - 1, floor(Y / cs)), ci = cy * bw + cx;\n      const g = (X / BW + Y / BH) / 2 - band, lit = S.hold > 0 ? exp(-g * g * 90) : 0;\n      if (q >= 0 && q \u003c 12) {\n        // A slight bevel: lighter next to a seam above or to the left,\n        // darker next to one below or to the right.\n        const up = pc[p - W] \u003c 0 || pc[p - W] >= 12, lf = pc[p - 1] \u003c 0 || pc[p - 1] >= 12;\n        const dn = pc[p + W] \u003c 0 || pc[p + W] >= 12, rt = pc[p + 1] \u003c 0 || pc[p + 1] >= 12;\n        const fresh = cl(1 - age[ci] / 0.15, 0, 1);\n        const v = min(1, 0.82 + (up || lf ? 0.18 : 0) - (dn || rt ? 0.2 : 0) + 0.15 * fresh + 0.3 * lit);\n        hsv(base + q / 12, (0.72 - 0.3 * fresh) * (1 - 0.7 * lit), 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 255 * v), round(c[1] * 255 * v), round(c[2] * 255 * v));\n      } else if (q >= 12) {\n        // A piece just taken out leaves its outline for a moment.\n        if (pc[p - W] === q && pc[p + W] === q && pc[p - 1] === q && pc[p + 1] === q) continue;\n        const f = cl(1 - gAge[ci] / 0.18, 0, 1);\n        hsv(base + (q - 12) / 12, 0.6, 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 150 * f), round(c[1] * 150 * f), round(c[2] * 150 * f));\n      } else if (X === 0 || Y === 0 || X === BW - 1 || Y === BH - 1) display.setPixel(ox + X, oy + Y, 44, 44, 54);\n      else if (X % cs === 0 && Y % cs === 0) display.setPixel(ox + X, oy + Y, 40, 40, 48);\n    }\n  // One tick under the board for each solution this search has found, 31\n  // to a row; a full row turns dim and the next starts over it.\n  const ty = oy + BH + (oy > 6 ? 2 : 0), full = floor(S.found / 31), part = S.found % 31;\n  for (let i = 0; i \u003c 31; i++) {\n    const on = i \u003c part, x = 1 + 2 * i;\n    if (!on && full === 0) continue;\n    hsv(base + 0.1 * (on ? full : full - 1), on ? 0.25 : 0.5, 1, c);\n    const v = on ? (i === part - 1 && S.hold > 0 ? 255 : 190) : 70;\n    for (let y = ty; y \u003c min(H, ty + 2); y++) display.setPixel(x, y, round(c[0] * v), round(c[1] * v), round(c[2] * v));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had."},{"name":"Speed","min":0.2,"max":3,"about":"Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3."},{"name":"Board","min":0,"max":3,"about":"0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images."},{"name":"Shuffle","min":0,"max":1,"about":"How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search."}],"start":[0,2,0,0.06],"measures":{"motion":1.8284,"detail":0.0833,"edges":0.9414,"complexity":0.2159,"coverage":0.603,"colour":0.4009,"drift":0.2078},"knobResponse":[0.2347,0.2072,0.3116,0.2483]},{"slug":"percolation","title":"Percolation","family":"cells","round":30,"note":"LED 마다 정해 둔 난수가 p 보다 작으면 열리고, 이어진 자리끼리 제 색의 클러스터가 돼요. p 가 오르다 한 클러스터가 위아래 128줄을 이으면 금빛으로 켜지고 가장 짧은 길이 그어져요.","idea":"Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.","buttons":"K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.","code":"// ===== Patternflow pattern =====\n// Title:   Percolation\n// Family:  cells\n// Idea:    Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: percolation (Simon Broadbent and John Hammersley, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle.\n// Knob 2: Speed. How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s.\n// Knob 3: Window. How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site.\n// Knob 4: Small. How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour.\n// Buttons: K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sqrt, acos, imul } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Site percolation threshold of the square lattice with edge neighbours,\n// found numerically (Newman and Ziff, 2000, give 0.59274621). Below it every\n// cluster on the infinite lattice is finite; above it one is infinite; at it\n// the clusters are fractal, of dimension 91/48, at every scale.\nconst PC = 0.592746;\n// Phase speed of the sweep per unit of Speed, over the root of the sweep's\n// width in p, so a wide Window sweeps faster in p but not in proportion.\nconst RATE = 0.0657;\n// Crossing comes this many seconds after the start, at Speed 2.\nconst LEAD = 2.7;\n\n// Union-find with union by size and path halving.\nfunction find(par, i) {\n  while (par[i] !== i) {\n    const g = par[par[i]];\n    par[i] = g;\n    i = g;\n  }\n  return i;\n}\n\nfunction join(par, sz, a, b) {\n  a = find(par, a);\n  b = find(par, b);\n  if (a === b) return;\n  if (sz[a] \u003c sz[b]) {\n    const t = a;\n    a = b;\n    b = t;\n  }\n  par[b] = a;\n  sz[a] += sz[b];\n}\n\nfunction hash(i) {\n  let h = imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h ^= h >>> 13;\n  h = imul(h, 0xc2b2ae35);\n  h ^= h >>> 16;\n  return (h >>> 0) / 4294967296;\n}\n\n// p*, the lattice's own crossing point: open the sites one at a time in the\n// order of their numbers, as Newman and Ziff do, with the top row joined to\n// one extra node and the bottom row to another, and stop when the two meet.\n// On a 64-wide strip it lands a few hundredths either side of p_c; the\n// study's seed gives 0.6038.\nfunction threshold(P) {\n  const { u, par, sz } = P;\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => u[a] - u[b]);\n  const on = new Uint8Array(N);\n  (par[N] = N), (par[N + 1] = N + 1), (sz[N] = sz[N + 1] = 1);\n  for (const i of order) {\n    (on[i] = 1), (par[i] = i), (sz[i] = 1);\n    const x = i % W, y = (i / W) | 0;\n    if (x > 0 && on[i - 1]) join(par, sz, i, i - 1);\n    if (x \u003c W - 1 && on[i + 1]) join(par, sz, i, i + 1);\n    if (y === 0) join(par, sz, i, N);\n    else if (on[i - W]) join(par, sz, i, i - W);\n    if (y === H - 1) join(par, sz, i, N + 1);\n    else if (on[i + W]) join(par, sz, i, i + W);\n    if (find(par, N) === find(par, N + 1)) return u[i];\n  }\n  return 1;\n}\n\nfunction lattice(P) {\n  for (let i = 0; i \u003c N; i++) P.u[i] = Math.random();\n  P.pstar = threshold(P);\n  P.id.fill(-1);\n  (P.span = false), (P.soft = 1);\n}\n\n// The sweep runs from W below p_c (or below p*, on a lattice that crosses\n// early) to 0.3 W above p*, so every rise ends in a crossing. Returns the\n// phase speed.\nfunction sweep(P, win, speed) {\n  P.lo = min(PC, P.pstar) - win;\n  P.hi = P.pstar + 0.3 * win;\n  return (RATE * speed) / sqrt(P.hi - P.lo);\n}\n\n// Puts the phase LEAD seconds before the crossing at the given Window and\n// Speed. p = lo + (hi - lo)(1 - cos phase) / 2.\nfunction aim(P, win, speed) {\n  const w = sweep(P, win, speed);\n  P.phase = acos(cl(1 - (2 * (P.pstar - P.lo)) / (P.hi - P.lo), -1, 1)) - LEAD * w;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N + 2), F = () => new Float32Array(N);\n  const P = (params.s = {\n    u: F(), jit: F(), sat: F(), glow: F(), cr: F(), cg: F(), cb: F(),\n    par: I(), sz: I(), root: I(), id: I(), idSize: I(), idHue: F(),\n    best: I(), bestS: I(), muSite: I(), rid: I(), owner: I(), prev: I(), queue: I(), path: I(), pathK: I().fill(-1),\n    flag: new Uint8Array(N), used: new Uint8Array(N),\n    pathLen: 0, cur: 0, maxSize: 1, spanRoot: -1, flash: 0, pulse: 0, p: 0.5, pstar: PC, dt: 1 / 30,\n    hue: 0, speed: 2, win: 0.04, small: 0.06, soft: 1, phase: 0, span: false, lo: 0.55, hi: 0.62,\n  });\n  // A fixed tint per LED: hue off by up to 0.05 and saturation 0.6 to 0.98.\n  for (let i = 0; i \u003c N; i++) (P.jit[i] = (hash(i + 7919) - 0.5) * 0.1), (P.sat[i] = 0.6 + 0.38 * hash(i + 104729));\n  lattice(P);\n  // The opening is aimed for Window 0.04 and Speed 2 whatever the knobs say,\n  // so a faster Speed crosses sooner and a wider Window starts further down.\n  aim(P, 0.04, 2);\n}\n\n// Labels the clusters at the current p and hands each one a colour. A\n// cluster's colour is an id with a hue. When clusters merge, the merged one\n// keeps the id of whichever part was biggest a frame ago; when one splits,\n// the biggest piece keeps it and the rest take fresh ids, hued from their\n// lowest-numbered site. So the big clusters hold their colour through the\n// whole sweep and only the small ones change.\nfunction label(P) {\n  const { u, par, sz, root, flag, muSite, best, bestS, rid, owner, used, id, idSize, idHue, p } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (u[i] \u003c p) (par[i] = i), (sz[i] = 1);\n    else par[i] = -1;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    if (par[i] \u003c 0) continue;\n    if (i % W && par[i - 1] >= 0) join(par, sz, i, i - 1);\n    if (i >= W && par[i - W] >= 0) join(par, sz, i, i - W);\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const r = par[i] \u003c 0 ? -1 : find(par, i);\n    root[i] = r;\n    if (r === i) (flag[i] = 0), (muSite[i] = i), (best[i] = -1), (bestS[i] = -1);\n  }\n  // Which rows each cluster touches (1 top, 2 bottom), its lowest site, and\n  // of the ids its sites wore last frame, the one whose cluster was biggest.\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r \u003c 0) continue;\n    if (i \u003c W) flag[r] |= 1;\n    if (i >= N - W) flag[r] |= 2;\n    if (u[i] \u003c u[muSite[r]]) muSite[r] = i;\n    const a = id[i];\n    if (a >= 0 && idSize[a] > bestS[r]) (bestS[r] = idSize[a]), (best[r] = a);\n  }\n  owner.fill(-1);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && (owner[c] \u003c 0 || sz[r] > sz[owner[c]])) owner[c] = r;\n  }\n  used.fill(0);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && owner[c] === r) (rid[r] = c), (used[c] = 1);\n    else rid[r] = -1;\n  }\n  let big = 1, span = -1;\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    if (rid[r] \u003c 0) {\n      while (used[P.cur]) P.cur = (P.cur + 1) % N;\n      (rid[r] = P.cur), (used[P.cur] = 1), (idHue[P.cur] = hash(muSite[r]) - 0.5);\n    }\n    idSize[rid[r]] = sz[r];\n    if (sz[r] > big) big = sz[r];\n    if (flag[r] === 3 && (span \u003c 0 || sz[r] > sz[span])) span = r;\n  }\n  for (let i = 0; i \u003c N; i++) id[i] = root[i] \u003c 0 ? -1 : rid[root[i]];\n  P.maxSize = big;\n  P.spanRoot = span;\n}\n\n// The shortest open path from the top row to the bottom row inside the\n// crossing cluster: a breadth-first search from all its top-row sites at\n// once, stopped at the first bottom-row site it reaches.\nfunction shortest(P, R) {\n  const { root, prev, queue, pathK, path } = P;\n  for (let j = 0; j \u003c P.pathLen; j++) pathK[path[j]] = -1;\n  P.pathLen = 0;\n  if (R \u003c 0) return;\n  prev.fill(-2);\n  let qh = 0, qt = 0, end = -1;\n  for (let x = 0; x \u003c W; x++) if (root[x] === R) (prev[x] = -1), (queue[qt++] = x);\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i >= N - W) {\n      end = i;\n      break;\n    }\n    const x = i % W;\n    let n = i + W;\n    if (root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - 1;\n    if (x > 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i + 1;\n    if (x \u003c W - 1 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - W;\n    if (n >= 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n  }\n  let len = 0;\n  for (let i = end; i >= 0; i = prev[i]) len++;\n  let j = len;\n  for (let i = end; i >= 0; i = prev[i]) (path[--j] = i), (pathK[i] = j);\n  P.pathLen = len;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0.04, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.win = cl(k[2], 0.04, 0.2);\n  P.small = cl(k[3], -1, 1);\n  // K1: a fresh lattice, crossed 2.7 s from now at the current knobs.\n  if (input.btnPressed && input.btnPressed[0]) lattice(P), aim(P, P.win, P.speed);\n  P.phase += sweep(P, P.win, P.speed) * d;\n  P.p = P.lo + ((P.hi - P.lo) * (1 - cos(P.phase))) / 2;\n  label(P);\n  // The flash comes on the frame a cluster first joins top to bottom and\n  // fades in 0.6 s; the gold stays while it spans and fades in 0.35 s after.\n  const spanning = P.spanRoot >= 0;\n  if (spanning && !P.span) P.flash = 1;\n  P.span = spanning;\n  P.flash *= exp(-d / 0.6);\n  P.soft *= exp(-d / 0.5);\n  P.pulse += (30 + 25 * P.speed) * d;\n  const fall = exp(-d / 0.35), { root, flag, glow } = P;\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r >= 0 && flag[r] === 3) glow[i] = 1;\n    else glow[i] *= fall;\n  }\n  shortest(P, P.spanRoot);\n  P.dt = d;\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { u, root, id, sz, idHue, jit, sat, glow, pathK, cr, cg, cb, p } = P;\n  const gold = 0.125 + P.hue, sm = P.small, fl = P.flash;\n  // Small: brightness lo + (1 - lo) f^gam, f = log size / log largest size.\n  const lo = sm \u003c 0 ? 0.3 * (1 + sm) : 0.3 + 0.5 * sm, gam = sm \u003c 0 ? 1.2 - 2.8 * sm : 1.2;\n  const lb = 1 / log(max(2, P.maxSize));\n  // Each LED eases to its colour in 0.1 s, so a merge washes over a cluster\n  // instead of blinking; after a K1 tap, in 0.7 s.\n  const kk = 1 - exp(-P.dt / (0.1 + 0.6 * P.soft));\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    let R, G, B;\n    if (r \u003c 0) {\n      // A closed site keeps an ember under 20 of 255, brightest when its\n      // number is just above p and it is next to open.\n      const e = 1 - (u[i] - p) / (1 - p);\n      hsv(gold + 0.5 + jit[i], sat[i], 0.075 * e * e);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    } else {\n      // An open site burns brighter the longer it has been open, from 42% at\n      // u = p to full at u = 0, and comes up over its first 0.004 of p.\n      const f = log(sz[r]) * lb, v = lo + (1 - lo) * f ** gam;\n      const g = (0.42 + 0.58 * (1 - u[i] / p)) * cl((p - u[i]) / 0.004, 0, 1);\n      hsv(gold + 0.475 + 0.55 * idHue[id[i]] + jit[i], sat[i], v * g);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = glow[i];\n      if (w > 0.002) {\n        hsv(gold + 0.4 * jit[i], (0.4 + 0.45 * sat[i]) * (1 - fl), (0.6 + 0.38 * g) * (1 - fl) + fl);\n        (R += (C[0] - R) * w), (G += (C[1] - G) * w), (B += (C[2] - B) * w);\n      }\n      // The shortest path: white, with a drop every 48 sites running down it.\n      const j = pathK[i];\n      if (j >= 0) {\n        const q = (((P.pulse - j) % 48) + 48) % 48, b = 0.65 + 0.35 * max(0, 1 - q / 14);\n        (R += (1 - R) * b), (G += (0.97 - G) * b), (B += (0.9 - B) * b);\n      }\n    }\n    cr[i] += (R * 255 - cr[i]) * kk;\n    cg[i] += (G * 255 - cg[i]) * kk;\n    cb[i] += (B * 255 - cb[i]) * kk;\n    display.setPixel(i % W, (i / W) | 0, cr[i], cg[i], cb[i]);\n  }\n}\n","layer":{"id":"layer-percolation","type":"code","name":"percolation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Percolation\n// Family:  cells\n// Idea:    Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: percolation (Simon Broadbent and John Hammersley, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle.\n// Knob 2: Speed. How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s.\n// Knob 3: Window. How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site.\n// Knob 4: Small. How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour.\n// Buttons: K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sqrt, acos, imul } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Site percolation threshold of the square lattice with edge neighbours,\n// found numerically (Newman and Ziff, 2000, give 0.59274621). Below it every\n// cluster on the infinite lattice is finite; above it one is infinite; at it\n// the clusters are fractal, of dimension 91/48, at every scale.\nconst PC = 0.592746;\n// Phase speed of the sweep per unit of Speed, over the root of the sweep's\n// width in p, so a wide Window sweeps faster in p but not in proportion.\nconst RATE = 0.0657;\n// Crossing comes this many seconds after the start, at Speed 2.\nconst LEAD = 2.7;\n\n// Union-find with union by size and path halving.\nfunction find(par, i) {\n  while (par[i] !== i) {\n    const g = par[par[i]];\n    par[i] = g;\n    i = g;\n  }\n  return i;\n}\n\nfunction join(par, sz, a, b) {\n  a = find(par, a);\n  b = find(par, b);\n  if (a === b) return;\n  if (sz[a] \u003c sz[b]) {\n    const t = a;\n    a = b;\n    b = t;\n  }\n  par[b] = a;\n  sz[a] += sz[b];\n}\n\nfunction hash(i) {\n  let h = imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h ^= h >>> 13;\n  h = imul(h, 0xc2b2ae35);\n  h ^= h >>> 16;\n  return (h >>> 0) / 4294967296;\n}\n\n// p*, the lattice's own crossing point: open the sites one at a time in the\n// order of their numbers, as Newman and Ziff do, with the top row joined to\n// one extra node and the bottom row to another, and stop when the two meet.\n// On a 64-wide strip it lands a few hundredths either side of p_c; the\n// study's seed gives 0.6038.\nfunction threshold(P) {\n  const { u, par, sz } = P;\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => u[a] - u[b]);\n  const on = new Uint8Array(N);\n  (par[N] = N), (par[N + 1] = N + 1), (sz[N] = sz[N + 1] = 1);\n  for (const i of order) {\n    (on[i] = 1), (par[i] = i), (sz[i] = 1);\n    const x = i % W, y = (i / W) | 0;\n    if (x > 0 && on[i - 1]) join(par, sz, i, i - 1);\n    if (x \u003c W - 1 && on[i + 1]) join(par, sz, i, i + 1);\n    if (y === 0) join(par, sz, i, N);\n    else if (on[i - W]) join(par, sz, i, i - W);\n    if (y === H - 1) join(par, sz, i, N + 1);\n    else if (on[i + W]) join(par, sz, i, i + W);\n    if (find(par, N) === find(par, N + 1)) return u[i];\n  }\n  return 1;\n}\n\nfunction lattice(P) {\n  for (let i = 0; i \u003c N; i++) P.u[i] = Math.random();\n  P.pstar = threshold(P);\n  P.id.fill(-1);\n  (P.span = false), (P.soft = 1);\n}\n\n// The sweep runs from W below p_c (or below p*, on a lattice that crosses\n// early) to 0.3 W above p*, so every rise ends in a crossing. Returns the\n// phase speed.\nfunction sweep(P, win, speed) {\n  P.lo = min(PC, P.pstar) - win;\n  P.hi = P.pstar + 0.3 * win;\n  return (RATE * speed) / sqrt(P.hi - P.lo);\n}\n\n// Puts the phase LEAD seconds before the crossing at the given Window and\n// Speed. p = lo + (hi - lo)(1 - cos phase) / 2.\nfunction aim(P, win, speed) {\n  const w = sweep(P, win, speed);\n  P.phase = acos(cl(1 - (2 * (P.pstar - P.lo)) / (P.hi - P.lo), -1, 1)) - LEAD * w;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N + 2), F = () => new Float32Array(N);\n  const P = (params.s = {\n    u: F(), jit: F(), sat: F(), glow: F(), cr: F(), cg: F(), cb: F(),\n    par: I(), sz: I(), root: I(), id: I(), idSize: I(), idHue: F(),\n    best: I(), bestS: I(), muSite: I(), rid: I(), owner: I(), prev: I(), queue: I(), path: I(), pathK: I().fill(-1),\n    flag: new Uint8Array(N), used: new Uint8Array(N),\n    pathLen: 0, cur: 0, maxSize: 1, spanRoot: -1, flash: 0, pulse: 0, p: 0.5, pstar: PC, dt: 1 / 30,\n    hue: 0, speed: 2, win: 0.04, small: 0.06, soft: 1, phase: 0, span: false, lo: 0.55, hi: 0.62,\n  });\n  // A fixed tint per LED: hue off by up to 0.05 and saturation 0.6 to 0.98.\n  for (let i = 0; i \u003c N; i++) (P.jit[i] = (hash(i + 7919) - 0.5) * 0.1), (P.sat[i] = 0.6 + 0.38 * hash(i + 104729));\n  lattice(P);\n  // The opening is aimed for Window 0.04 and Speed 2 whatever the knobs say,\n  // so a faster Speed crosses sooner and a wider Window starts further down.\n  aim(P, 0.04, 2);\n}\n\n// Labels the clusters at the current p and hands each one a colour. A\n// cluster's colour is an id with a hue. When clusters merge, the merged one\n// keeps the id of whichever part was biggest a frame ago; when one splits,\n// the biggest piece keeps it and the rest take fresh ids, hued from their\n// lowest-numbered site. So the big clusters hold their colour through the\n// whole sweep and only the small ones change.\nfunction label(P) {\n  const { u, par, sz, root, flag, muSite, best, bestS, rid, owner, used, id, idSize, idHue, p } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (u[i] \u003c p) (par[i] = i), (sz[i] = 1);\n    else par[i] = -1;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    if (par[i] \u003c 0) continue;\n    if (i % W && par[i - 1] >= 0) join(par, sz, i, i - 1);\n    if (i >= W && par[i - W] >= 0) join(par, sz, i, i - W);\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const r = par[i] \u003c 0 ? -1 : find(par, i);\n    root[i] = r;\n    if (r === i) (flag[i] = 0), (muSite[i] = i), (best[i] = -1), (bestS[i] = -1);\n  }\n  // Which rows each cluster touches (1 top, 2 bottom), its lowest site, and\n  // of the ids its sites wore last frame, the one whose cluster was biggest.\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r \u003c 0) continue;\n    if (i \u003c W) flag[r] |= 1;\n    if (i >= N - W) flag[r] |= 2;\n    if (u[i] \u003c u[muSite[r]]) muSite[r] = i;\n    const a = id[i];\n    if (a >= 0 && idSize[a] > bestS[r]) (bestS[r] = idSize[a]), (best[r] = a);\n  }\n  owner.fill(-1);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && (owner[c] \u003c 0 || sz[r] > sz[owner[c]])) owner[c] = r;\n  }\n  used.fill(0);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && owner[c] === r) (rid[r] = c), (used[c] = 1);\n    else rid[r] = -1;\n  }\n  let big = 1, span = -1;\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    if (rid[r] \u003c 0) {\n      while (used[P.cur]) P.cur = (P.cur + 1) % N;\n      (rid[r] = P.cur), (used[P.cur] = 1), (idHue[P.cur] = hash(muSite[r]) - 0.5);\n    }\n    idSize[rid[r]] = sz[r];\n    if (sz[r] > big) big = sz[r];\n    if (flag[r] === 3 && (span \u003c 0 || sz[r] > sz[span])) span = r;\n  }\n  for (let i = 0; i \u003c N; i++) id[i] = root[i] \u003c 0 ? -1 : rid[root[i]];\n  P.maxSize = big;\n  P.spanRoot = span;\n}\n\n// The shortest open path from the top row to the bottom row inside the\n// crossing cluster: a breadth-first search from all its top-row sites at\n// once, stopped at the first bottom-row site it reaches.\nfunction shortest(P, R) {\n  const { root, prev, queue, pathK, path } = P;\n  for (let j = 0; j \u003c P.pathLen; j++) pathK[path[j]] = -1;\n  P.pathLen = 0;\n  if (R \u003c 0) return;\n  prev.fill(-2);\n  let qh = 0, qt = 0, end = -1;\n  for (let x = 0; x \u003c W; x++) if (root[x] === R) (prev[x] = -1), (queue[qt++] = x);\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i >= N - W) {\n      end = i;\n      break;\n    }\n    const x = i % W;\n    let n = i + W;\n    if (root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - 1;\n    if (x > 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i + 1;\n    if (x \u003c W - 1 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - W;\n    if (n >= 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n  }\n  let len = 0;\n  for (let i = end; i >= 0; i = prev[i]) len++;\n  let j = len;\n  for (let i = end; i >= 0; i = prev[i]) (path[--j] = i), (pathK[i] = j);\n  P.pathLen = len;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0.04, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.win = cl(k[2], 0.04, 0.2);\n  P.small = cl(k[3], -1, 1);\n  // K1: a fresh lattice, crossed 2.7 s from now at the current knobs.\n  if (input.btnPressed && input.btnPressed[0]) lattice(P), aim(P, P.win, P.speed);\n  P.phase += sweep(P, P.win, P.speed) * d;\n  P.p = P.lo + ((P.hi - P.lo) * (1 - cos(P.phase))) / 2;\n  label(P);\n  // The flash comes on the frame a cluster first joins top to bottom and\n  // fades in 0.6 s; the gold stays while it spans and fades in 0.35 s after.\n  const spanning = P.spanRoot >= 0;\n  if (spanning && !P.span) P.flash = 1;\n  P.span = spanning;\n  P.flash *= exp(-d / 0.6);\n  P.soft *= exp(-d / 0.5);\n  P.pulse += (30 + 25 * P.speed) * d;\n  const fall = exp(-d / 0.35), { root, flag, glow } = P;\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r >= 0 && flag[r] === 3) glow[i] = 1;\n    else glow[i] *= fall;\n  }\n  shortest(P, P.spanRoot);\n  P.dt = d;\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { u, root, id, sz, idHue, jit, sat, glow, pathK, cr, cg, cb, p } = P;\n  const gold = 0.125 + P.hue, sm = P.small, fl = P.flash;\n  // Small: brightness lo + (1 - lo) f^gam, f = log size / log largest size.\n  const lo = sm \u003c 0 ? 0.3 * (1 + sm) : 0.3 + 0.5 * sm, gam = sm \u003c 0 ? 1.2 - 2.8 * sm : 1.2;\n  const lb = 1 / log(max(2, P.maxSize));\n  // Each LED eases to its colour in 0.1 s, so a merge washes over a cluster\n  // instead of blinking; after a K1 tap, in 0.7 s.\n  const kk = 1 - exp(-P.dt / (0.1 + 0.6 * P.soft));\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    let R, G, B;\n    if (r \u003c 0) {\n      // A closed site keeps an ember under 20 of 255, brightest when its\n      // number is just above p and it is next to open.\n      const e = 1 - (u[i] - p) / (1 - p);\n      hsv(gold + 0.5 + jit[i], sat[i], 0.075 * e * e);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    } else {\n      // An open site burns brighter the longer it has been open, from 42% at\n      // u = p to full at u = 0, and comes up over its first 0.004 of p.\n      const f = log(sz[r]) * lb, v = lo + (1 - lo) * f ** gam;\n      const g = (0.42 + 0.58 * (1 - u[i] / p)) * cl((p - u[i]) / 0.004, 0, 1);\n      hsv(gold + 0.475 + 0.55 * idHue[id[i]] + jit[i], sat[i], v * g);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = glow[i];\n      if (w > 0.002) {\n        hsv(gold + 0.4 * jit[i], (0.4 + 0.45 * sat[i]) * (1 - fl), (0.6 + 0.38 * g) * (1 - fl) + fl);\n        (R += (C[0] - R) * w), (G += (C[1] - G) * w), (B += (C[2] - B) * w);\n      }\n      // The shortest path: white, with a drop every 48 sites running down it.\n      const j = pathK[i];\n      if (j >= 0) {\n        const q = (((P.pulse - j) % 48) + 48) % 48, b = 0.65 + 0.35 * max(0, 1 - q / 14);\n        (R += (1 - R) * b), (G += (0.97 - G) * b), (B += (0.9 - B) * b);\n      }\n    }\n    cr[i] += (R * 255 - cr[i]) * kk;\n    cg[i] += (G * 255 - cg[i]) * kk;\n    cb[i] += (B * 255 - cb[i]) * kk;\n    display.setPixel(i % W, (i / W) | 0, cr[i], cg[i], cb[i]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle."},{"name":"Speed","min":0.2,"max":3,"about":"How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s."},{"name":"Window","min":0.04,"max":0.2,"about":"How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site."},{"name":"Small","min":-1,"max":1,"about":"How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour."}],"start":[0,2,0.04,0.06],"measures":{"motion":0.076,"detail":0.3535,"edges":0.6496,"complexity":2.5378,"coverage":0.6081,"colour":0.3525,"drift":0.1555},"knobResponse":[0.2138,0.2514,0.1582,0.0547]},{"slug":"perron-tree","title":"Perron Tree","family":"geometry","round":29,"note":"키 120 LED 삼각형을 2^n 조각으로 잘라 페론처럼 한 단씩 겹쳐 밀면, 모든 방향을 품은 채 넓이가 30% 로 줄어든 나무가 돼요. 흰 바늘이 모든 방향을 돌며 싹에서 싹으로 건너뛰어요. K3 은 단 수(32~256 조각)이고 K1 을 누르면 삼각형부터 다시 지어요.","idea":"A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.","buttons":"K1 tap starts again from the single triangle.","code":"// ===== Patternflow pattern =====\n// Title:   Perron Tree\n// Family:  geometry\n// Idea:    A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kakeya needle problem (Sōichi Kakeya, 1917), Besicovitch set drawn as Oskar Perron's tree (1928), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1\n//\n// Knob 1: Hue. Turns the sweep of colours that marks each sliver's direction round the wheel.\n// Knob 2: Speed. How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three.\n// Knob 3: Depth. How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8.\n// Knob 4: Slide. How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was.\n// Buttons: K1 tap starts again from the single triangle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, cos, abs, pow, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The triangle: base on the bottom edge, BW LEDs wide, apex HT LEDs up.\nconst BW = 60, HT = 120, Y0 = 128, MAXN = 8, MAXM = 1 \u003c\u003c MAXN;\n// How much of the blurred light comes back as glow (the blur sums to 81).\nconst GLOW = 0.22 / 81;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0];\n  out[o + 1] = c[1];\n  out[o + 2] = c[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    lam: 0, hold: 0, phase: 0, needle: 0, n: 5, g: 0.8, hue: 0,\n    acc: new Float32Array(N * 3), trail: new Float32Array(N), fade: 1, blo: new Float32Array(N * 3), sh: new Float32Array(MAXM), tj: new Float32Array(MAXN + 1), dur: new Float32Array(MAXN + 1),\n    col: new Float32Array(MAXM * 3),\n  };\n}\n\n// Perron's slides. At level j the base pieces pair up in groups of 2^j and\n// the right half of each group slides left by tj[j]: first closing the gap\n// its heart left at the level before, then a further 2(1 - g) of its half\n// base, so the two halves cross at 2g - 1 of the group triangle's height and\n// fork into two sprouts above it. What lies below is the group's heart, its\n// triangle shrunk by g^j toward its left corner, and the next level slides\n// hearts the same way. (Stein's write-up of Schoenberg's version.)\nfunction slides(P, n, g) {\n  const w = BW / (1 \u003c\u003c n);\n  for (let j = 1; j \u003c= n; j++) {\n    const half = w * (1 \u003c\u003c (j - 1)), s = pow(g, j - 1);\n    P.tj[j] = half * (1 - s) + 2 * (1 - g) * s * half;\n  }\n  // Seconds per level at Speed 2: the first levels move a fraction of an\n  // LED and go by quickly, the last ones take their time.\n  for (let j = 1; j \u003c= n; j++) P.dur[j] = 0.3 + 1.7 * pow(P.tj[j] / P.tj[n], 0.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) / 2;\n  P.hue = cl(k[0], 0, 1);\n  const n = cl(round(k[2]), 5, MAXN), g = 0.8 - 0.12 * cl(k[3], -1, 1);\n  if (n !== P.n || abs(g - P.g) > 1e-4) {\n    // Keep the same share of the build when the depth changes.\n    const frac = P.lam / P.n;\n    P.n = n;\n    P.g = g;\n    P.lam = frac * n;\n  }\n  slides(P, P.n, P.g);\n  if (input.btnPressed && input.btnPressed[0]) (P.phase = 0), (P.lam = 0), (P.hold = 0);\n  // Build level by level, hold the tree, take it apart again from the top\n  // level down at twice the pace, rest on the whole triangle, and again.\n  if (P.phase === 0) {\n    P.lam += d / P.dur[min(P.n, floor(P.lam) + 1)];\n    if (P.lam >= P.n) (P.lam = P.n), (P.phase = 1), (P.hold = 0);\n  } else if (P.phase === 1) {\n    if ((P.hold += d) > 6) P.phase = 2;\n  } else if (P.phase === 2) {\n    P.lam -= (2 * d) / P.dur[cl(Math.ceil(P.lam), 1, P.n)];\n    if (P.lam \u003c= 0) (P.lam = 0), (P.phase = 3), (P.hold = 0);\n  } else if ((P.hold += d) > 1.2) P.phase = 0;\n  P.needle += d * 0.11;\n  P.fade = exp(-cl(dt || 0, 0, 0.1) / 0.12);\n}\n\n// One row of one sliver into the light buffer: the span [l, r) at row y.\n// A span under an LED wide is drawn one LED wide and dimmer, so the sprouts\n// taper in light rather than vanish between LEDs.\nfunction span(acc, y, l, r, cr, cg, cb) {\n  let wd = r - l, k = 1;\n  if (wd \u003c 1) {\n    const c = (l + r) / 2;\n    k = sqrt(max(wd, 0));\n    (l = c - 0.5), (r = c + 0.5), (wd = 1);\n  }\n  const x0 = max(0, floor(l)), x1 = min(W - 1, floor(r - 1e-6));\n  for (let x = x0, p = (y * W + x0) * 3; x \u003c= x1; x++, p += 3) {\n    const cov = (min(r, x + 1) - max(l, x)) * k;\n    if (cov \u003c= 0) continue;\n    acc[p] += cr * cov;\n    acc[p + 1] += cg * cov;\n    acc[p + 2] += cb * cov;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, M = 1 \u003c\u003c n, w = BW / M, acc = P.acc, sh = P.sh, col = P.col;\n  acc.fill(0);\n  // How far each level has slid: level j runs while lam goes from j-1 to j.\n  let lo = 1e9, hi = -1e9;\n  for (let i = 0; i \u003c M; i++) {\n    let s = 0;\n    for (let j = 1; j \u003c= n; j++) if ((i >> (j - 1)) & 1) s -= P.tj[j] * sm(P.lam - (j - 1));\n    sh[i] = s;\n    lo = min(lo, s + i * w, s + BW / 2);\n    hi = max(hi, s + (i + 1) * w, s + BW / 2);\n  }\n  // Keep the whole figure centred as it slides.\n  const ox = W / 2 - (lo + hi) / 2;\n  // Each sliver's colour from its direction, the hue sweeping 0.8 of the wheel\n  // from one side of the triangle to the other.\n  // One sliver alone tones to about 140 of 255, two to 200, four near white.\n  for (let i = 0; i \u003c M; i++) hsv(P.hue + 0.5 + (0.8 * (i + 0.5)) / M, 0.85, 0.5, col, i * 3);\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT;\n    if (f \u003c 0 || f > 1) continue;\n    for (let i = 0; i \u003c M; i++) {\n      const a = ox + sh[i] + BW / 2, l = ox + sh[i] + i * w, r = l + w;\n      span(acc, y, l + (a - l) * f, r + (a - r) * f, col[i * 3], col[i * 3 + 1], col[i * 3 + 2]);\n    }\n  }\n  // The needle: a segment the height of the triangle, swinging through every\n  // direction between its sides and back. Its direction picks the base point\n  // it stands on, and that point the sliver whose sprout holds it.\n  const sw = 0.5 - 0.5 * cos(P.needle * 2 * PI), b = sw * BW, i = min(M - 1, floor(b / w));\n  const bx = ox + sh[i] + b, ax = ox + sh[i] + BW / 2, tr = P.trail, fd = P.fade;\n  // Its light fades over about a tenth of a second, which softens each hop.\n  for (let p = 0; p \u003c N; p++) tr[p] *= fd;\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT, x = bx + (ax - bx) * f;\n    for (let xx = max(0, floor(x - 2)); xx \u003c= min(W - 1, floor(x + 2)); xx++) {\n      const dd = abs(xx + 0.5 - x), wgt = dd \u003c 0.5 ? 1 : dd \u003c 1.5 ? 0.9 * (1.5 - dd) : 0.12 * (2.5 - dd), p = y * W + xx;\n      if (wgt > tr[p]) tr[p] = wgt;\n    }\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const v = tr[p];\n    if (v \u003c 0.01) continue;\n    acc[q] += 1.6 * v;\n    acc[q + 1] += 1.55 * v;\n    acc[q + 2] += 1.4 * v;\n  }\n  // A soft glow round everything bright: a 5 by 5 blur, about a fifth of it\n  // added back, so the thin sprouts read from a few metres away.\n  const blo = P.blo;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W * 3; x \u003c W; x++, p += 3)\n      for (let c = 0; c \u003c 3; c++) blo[p + c] = (x > 1 ? acc[p + c - 6] : 0) + 2 * (x > 0 ? acc[p + c - 3] : 0) + 3 * acc[p + c] + 2 * (x \u003c W - 1 ? acc[p + c + 3] : 0) + (x \u003c W - 2 ? acc[p + c + 6] : 0);\n  // Overlaps add up: light piles toward white where many slivers cross.\n  const R = W * 3, tone = (q, y) => {\n    const g = (y > 1 ? blo[q - 2 * R] : 0) + 2 * (y > 0 ? blo[q - R] : 0) + 3 * blo[q] + 2 * (y \u003c H - 1 ? blo[q + R] : 0) + (y \u003c H - 2 ? blo[q + 2 * R] : 0);\n    return 255 * (1 - exp(-1.6 * (acc[q] + GLOW * g)));\n  };\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, tone(p, y), tone(p + 1, y), tone(p + 2, y));\n}\n","layer":{"id":"layer-perron-tree","type":"code","name":"perron-tree","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Perron Tree\n// Family:  geometry\n// Idea:    A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kakeya needle problem (Sōichi Kakeya, 1917), Besicovitch set drawn as Oskar Perron's tree (1928), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1\n//\n// Knob 1: Hue. Turns the sweep of colours that marks each sliver's direction round the wheel.\n// Knob 2: Speed. How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three.\n// Knob 3: Depth. How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8.\n// Knob 4: Slide. How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was.\n// Buttons: K1 tap starts again from the single triangle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, cos, abs, pow, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The triangle: base on the bottom edge, BW LEDs wide, apex HT LEDs up.\nconst BW = 60, HT = 120, Y0 = 128, MAXN = 8, MAXM = 1 \u003c\u003c MAXN;\n// How much of the blurred light comes back as glow (the blur sums to 81).\nconst GLOW = 0.22 / 81;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0];\n  out[o + 1] = c[1];\n  out[o + 2] = c[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    lam: 0, hold: 0, phase: 0, needle: 0, n: 5, g: 0.8, hue: 0,\n    acc: new Float32Array(N * 3), trail: new Float32Array(N), fade: 1, blo: new Float32Array(N * 3), sh: new Float32Array(MAXM), tj: new Float32Array(MAXN + 1), dur: new Float32Array(MAXN + 1),\n    col: new Float32Array(MAXM * 3),\n  };\n}\n\n// Perron's slides. At level j the base pieces pair up in groups of 2^j and\n// the right half of each group slides left by tj[j]: first closing the gap\n// its heart left at the level before, then a further 2(1 - g) of its half\n// base, so the two halves cross at 2g - 1 of the group triangle's height and\n// fork into two sprouts above it. What lies below is the group's heart, its\n// triangle shrunk by g^j toward its left corner, and the next level slides\n// hearts the same way. (Stein's write-up of Schoenberg's version.)\nfunction slides(P, n, g) {\n  const w = BW / (1 \u003c\u003c n);\n  for (let j = 1; j \u003c= n; j++) {\n    const half = w * (1 \u003c\u003c (j - 1)), s = pow(g, j - 1);\n    P.tj[j] = half * (1 - s) + 2 * (1 - g) * s * half;\n  }\n  // Seconds per level at Speed 2: the first levels move a fraction of an\n  // LED and go by quickly, the last ones take their time.\n  for (let j = 1; j \u003c= n; j++) P.dur[j] = 0.3 + 1.7 * pow(P.tj[j] / P.tj[n], 0.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) / 2;\n  P.hue = cl(k[0], 0, 1);\n  const n = cl(round(k[2]), 5, MAXN), g = 0.8 - 0.12 * cl(k[3], -1, 1);\n  if (n !== P.n || abs(g - P.g) > 1e-4) {\n    // Keep the same share of the build when the depth changes.\n    const frac = P.lam / P.n;\n    P.n = n;\n    P.g = g;\n    P.lam = frac * n;\n  }\n  slides(P, P.n, P.g);\n  if (input.btnPressed && input.btnPressed[0]) (P.phase = 0), (P.lam = 0), (P.hold = 0);\n  // Build level by level, hold the tree, take it apart again from the top\n  // level down at twice the pace, rest on the whole triangle, and again.\n  if (P.phase === 0) {\n    P.lam += d / P.dur[min(P.n, floor(P.lam) + 1)];\n    if (P.lam >= P.n) (P.lam = P.n), (P.phase = 1), (P.hold = 0);\n  } else if (P.phase === 1) {\n    if ((P.hold += d) > 6) P.phase = 2;\n  } else if (P.phase === 2) {\n    P.lam -= (2 * d) / P.dur[cl(Math.ceil(P.lam), 1, P.n)];\n    if (P.lam \u003c= 0) (P.lam = 0), (P.phase = 3), (P.hold = 0);\n  } else if ((P.hold += d) > 1.2) P.phase = 0;\n  P.needle += d * 0.11;\n  P.fade = exp(-cl(dt || 0, 0, 0.1) / 0.12);\n}\n\n// One row of one sliver into the light buffer: the span [l, r) at row y.\n// A span under an LED wide is drawn one LED wide and dimmer, so the sprouts\n// taper in light rather than vanish between LEDs.\nfunction span(acc, y, l, r, cr, cg, cb) {\n  let wd = r - l, k = 1;\n  if (wd \u003c 1) {\n    const c = (l + r) / 2;\n    k = sqrt(max(wd, 0));\n    (l = c - 0.5), (r = c + 0.5), (wd = 1);\n  }\n  const x0 = max(0, floor(l)), x1 = min(W - 1, floor(r - 1e-6));\n  for (let x = x0, p = (y * W + x0) * 3; x \u003c= x1; x++, p += 3) {\n    const cov = (min(r, x + 1) - max(l, x)) * k;\n    if (cov \u003c= 0) continue;\n    acc[p] += cr * cov;\n    acc[p + 1] += cg * cov;\n    acc[p + 2] += cb * cov;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, M = 1 \u003c\u003c n, w = BW / M, acc = P.acc, sh = P.sh, col = P.col;\n  acc.fill(0);\n  // How far each level has slid: level j runs while lam goes from j-1 to j.\n  let lo = 1e9, hi = -1e9;\n  for (let i = 0; i \u003c M; i++) {\n    let s = 0;\n    for (let j = 1; j \u003c= n; j++) if ((i >> (j - 1)) & 1) s -= P.tj[j] * sm(P.lam - (j - 1));\n    sh[i] = s;\n    lo = min(lo, s + i * w, s + BW / 2);\n    hi = max(hi, s + (i + 1) * w, s + BW / 2);\n  }\n  // Keep the whole figure centred as it slides.\n  const ox = W / 2 - (lo + hi) / 2;\n  // Each sliver's colour from its direction, the hue sweeping 0.8 of the wheel\n  // from one side of the triangle to the other.\n  // One sliver alone tones to about 140 of 255, two to 200, four near white.\n  for (let i = 0; i \u003c M; i++) hsv(P.hue + 0.5 + (0.8 * (i + 0.5)) / M, 0.85, 0.5, col, i * 3);\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT;\n    if (f \u003c 0 || f > 1) continue;\n    for (let i = 0; i \u003c M; i++) {\n      const a = ox + sh[i] + BW / 2, l = ox + sh[i] + i * w, r = l + w;\n      span(acc, y, l + (a - l) * f, r + (a - r) * f, col[i * 3], col[i * 3 + 1], col[i * 3 + 2]);\n    }\n  }\n  // The needle: a segment the height of the triangle, swinging through every\n  // direction between its sides and back. Its direction picks the base point\n  // it stands on, and that point the sliver whose sprout holds it.\n  const sw = 0.5 - 0.5 * cos(P.needle * 2 * PI), b = sw * BW, i = min(M - 1, floor(b / w));\n  const bx = ox + sh[i] + b, ax = ox + sh[i] + BW / 2, tr = P.trail, fd = P.fade;\n  // Its light fades over about a tenth of a second, which softens each hop.\n  for (let p = 0; p \u003c N; p++) tr[p] *= fd;\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT, x = bx + (ax - bx) * f;\n    for (let xx = max(0, floor(x - 2)); xx \u003c= min(W - 1, floor(x + 2)); xx++) {\n      const dd = abs(xx + 0.5 - x), wgt = dd \u003c 0.5 ? 1 : dd \u003c 1.5 ? 0.9 * (1.5 - dd) : 0.12 * (2.5 - dd), p = y * W + xx;\n      if (wgt > tr[p]) tr[p] = wgt;\n    }\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const v = tr[p];\n    if (v \u003c 0.01) continue;\n    acc[q] += 1.6 * v;\n    acc[q + 1] += 1.55 * v;\n    acc[q + 2] += 1.4 * v;\n  }\n  // A soft glow round everything bright: a 5 by 5 blur, about a fifth of it\n  // added back, so the thin sprouts read from a few metres away.\n  const blo = P.blo;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W * 3; x \u003c W; x++, p += 3)\n      for (let c = 0; c \u003c 3; c++) blo[p + c] = (x > 1 ? acc[p + c - 6] : 0) + 2 * (x > 0 ? acc[p + c - 3] : 0) + 3 * acc[p + c] + 2 * (x \u003c W - 1 ? acc[p + c + 3] : 0) + (x \u003c W - 2 ? acc[p + c + 6] : 0);\n  // Overlaps add up: light piles toward white where many slivers cross.\n  const R = W * 3, tone = (q, y) => {\n    const g = (y > 1 ? blo[q - 2 * R] : 0) + 2 * (y > 0 ? blo[q - R] : 0) + 3 * blo[q] + 2 * (y \u003c H - 1 ? blo[q + R] : 0) + (y \u003c H - 2 ? blo[q + 2 * R] : 0);\n    return 255 * (1 - exp(-1.6 * (acc[q] + GLOW * g)));\n  };\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, tone(p, y), tone(p + 1, y), tone(p + 2, y));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the sweep of colours that marks each sliver's direction round the wheel."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three."},{"name":"Depth","min":5,"max":8,"about":"How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8."},{"name":"Slide","min":-1,"max":1,"about":"How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was."}],"start":[0,2,5,0.06],"measures":{"motion":0.2474,"detail":0.037,"edges":0.3794,"complexity":1.0174,"coverage":0.2747,"colour":0.1818,"drift":0.2212},"knobResponse":[0.075,0.1981,0.1861,0.1179]},{"slug":"photochromic","title":"Photochromic","family":"cosmetic","round":38,"note":"LED 마다 맨 폴리시이거나 펄 조각인 옅은 매니큐어 위로 보이지 않는 UV 손전등이 구불구불 쓸고 지나가면, 지나간 자리가 순식간에 짙은 보석 색으로 바뀌었다가 몇 초에 걸쳐 다시 옅어져요. K3 은 펄 조각을 한 LED 에서 네 LED 너비로 키워 굵은 글리터로 바꾸고, K1 을 누르면 지난번과 반대쪽으로 한 번 더 쓸어요.","idea":"A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.","buttons":"K1 tap sends a stroke now, running the other way from the last one.","code":"// ===== Patternflow pattern =====\n// Title:   Photochromic\n// Family:  cosmetic\n// Idea:    A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after photochromic nail polish, pale in the shade, that deepens under UV light and fades back [Beer-Lambert law, August Beer, 1852]\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1\n//\n// Knob 1: Hue. Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening.\n// Knob 2: Speed. At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds.\n// Knob 3: Flakes. The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter.\n// Knob 4: Fade. How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture.\n// Buttons: K1 tap sends a stroke now, running the other way from the last one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sin, exp, round, random, LN10, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Seconds at Speed 2: a stroke every PERIOD, crossing in SWEEP. The first\n// stroke of a fresh start begins at FIRST; the one before it, which ended\n// 8.4 seconds before the start, is run through when the pattern opens.\nconst PERIOD = 13, SWEEP = 2.4, FIRST = 2.2;\n// The torch: a soft spot of sigma SIG LEDs, weaving AMP LEDs either side of\n// the middle; the dye switches at KON per second where it is brightest.\nconst SIG = 15, AMP = 20, KON = 10;\n// Optical density of the switched dye, so the depth of colour goes as\n// 1 - 10^(-OD a) (Beer-Lambert): it holds dark while most of the dye is\n// still switched and lets go toward the end.\nconst OD = 2;\n// The fade, from a = 0.95 to the a where the colour is half gone.\nconst HALF_A = 1.856;\n// Opening hue: violet, not red.\nconst H0 = 0.76;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, flakes: 1, fade: 0.06, t: 0, begun: false, k: 0, tx: -99, ty: -99, on: 0,\n    a: new Float32Array(N), g: new Float32Array(N), ph: new Float32Array(N), om: new Float32Array(N),\n    size: 0, pale: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], pearl: [0, 0, 0], extra: -1,\n  };\n}\n\n// The flakes for a size, one glint per LED, every LED of a flake sharing\n// it: 1 catches the light, -1 is turned away and shades the polish under\n// it, 0 is bare polish. At size 1 every LED holds mica, 38% catching the\n// light, 22% turned away; larger flakes are fewer, 30% and 10%.\nfunction flakes(S, size) {\n  const { g, ph, om } = S;\n  const cw = Math.ceil(W / size), nc = cw * Math.ceil(H / size);\n  const cg = new Float32Array(nc), cp = new Float32Array(nc), co = new Float32Array(nc);\n  for (let c = 0; c \u003c nc; c++) {\n    const u = random();\n    if (size === 1) cg[c] = u \u003c 0.4 ? 0 : u \u003c 0.62 ? -1 : 1;\n    else cg[c] = u \u003c 0.6 ? 0 : u \u003c 0.7 ? -1 : 1;\n    cp[c] = random() * TAU;\n    co[c] = 0.8 + 0.7 * random();\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = floor(y / size) * cw + floor(x / size), i = y * W + x;\n      // Flakes three or four across lose their corners.\n      const ex = x % size === 0 || x % size === size - 1, ey = y % size === 0 || y % size === size - 1;\n      g[i] = size > 2 && ex && ey ? 0 : cg[c];\n      ph[i] = cp[c];\n      om[i] = co[c];\n    }\n  S.size = size;\n}\n\n// Where stroke k has the torch at progress s (0..1): strokes alternate down\n// and up the panel, weaving side to side, each a little different.\nfunction torchAt(S, k, s) {\n  const down = (k & 1) === 0, w = 2.4 + 0.5 * ((k * 0.618 + 10) % 1), ph = k * 2.4;\n  S.ty = down ? -30 + s * (H + 60) : H + 30 - s * (H + 60);\n  S.tx = W / 2 + AMP * sin(TAU * w * s + ph);\n}\n\n// Advance the dye by dt seconds of pattern time: switched by the torch at\n// KON times its intensity, back by the thermal fade.\nfunction dye(S, dt) {\n  const a = S.a, half = 4.5 * 3 ** S.fade, decay = exp((-HALF_A / half) * dt);\n  for (let i = 0; i \u003c N; i++) a[i] *= decay;\n  if (!S.on) return;\n  const R = 3 * SIG, x0 = max(0, floor(S.tx - R)), x1 = min(W - 1, Math.ceil(S.tx + R));\n  const y0 = max(0, floor(S.ty - R)), y1 = min(H - 1, Math.ceil(S.ty + R));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, I = exp(-(dx * dx + dy * dy) / (2 * SIG * SIG));\n      if (I \u003c 0.01) continue;\n      const i = y * W + x;\n      a[i] += (1 - a[i]) * (1 - exp(-KON * I * dt));\n    }\n}\n\n// Run the clock from t0 to t1 in steps, strokes switching on and off.\nfunction run(S, t0, t1, step) {\n  for (let t = t0; t \u003c t1 - 1e-9; t += step) {\n    const d = min(step, t1 - t), tm = t + d;\n    const k = floor((tm - FIRST) / PERIOD), s = (tm - FIRST - k * PERIOD) / SWEEP;\n    S.on = 0;\n    if (s \u003c= 1) {\n      S.on = 1;\n      S.k = k;\n      torchAt(S, k, s);\n    }\n    if (S.extra >= 0) {\n      const se = (tm - S.extra) / SWEEP;\n      if (se \u003c= 1) {\n        S.on = 1;\n        torchAt(S, S.k + 1, se);\n      } else S.extra = -1;\n    }\n    dye(S, d);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.flakes = cl(k[2], 1, 4);\n  S.fade = cl(k[3], -1, 1);\n  const size = round(S.flakes);\n  if (size !== S.size) flakes(S, size);\n  if (!S.begun) {\n    S.t = FIRST - PERIOD - 0.3;\n    run(S, S.t, 0, 0.1);\n    S.t = 0;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.extra \u003c 0) S.extra = S.t;\n  const step = (d * S.speed) / 2;\n  if (step > 0) run(S, S.t, S.t + step, step);\n  S.t += step;\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Red, orange, yellow and lime go brown or olive when dark: there the\n  // polish deepens to a bright full colour instead, from a cream.\n  const dw = min(abs(hh - 0.12), 1 - abs(hh - 0.12)), warm = 1 - sm(0.12, 0.24, dw);\n  hsv(h, 0.32 - 0.1 * warm, 0.52 + 0.04 * warm, S.pale);\n  hsv(h + 0.015 * (1 - warm), 0.92 + 0.06 * warm, 0.11 + 0.5 * warm, S.deep);\n  hsv(h, 0.6 - 0.1 * warm, 0.5 + 0.4 * warm, S.tint);\n  hsv(h, 0.12, 1, S.pearl);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { a, g, ph, om, pale, deep, tint, pearl } = S, t = S.t, k = -OD * LN10, norm = 1 - exp(k);\n  const sig2 = 2 * (SIG * 1.2) ** 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // How deep the colour is: Beer-Lambert in the switched dye.\n      const D = (1 - exp(k * a[i])) / norm;\n      let r = pale[0] + (deep[0] - pale[0]) * D;\n      let gg = pale[1] + (deep[1] - pale[1]) * D;\n      let b = pale[2] + (deep[2] - pale[2]) * D;\n      // The flake: pearl white in the pale polish; under the dark dye the light\n      // crosses the dye twice on its way to the flake and back, so the\n      // flake goes dim and takes the colour. Now and then a flake turns half\n      // away from the room light.\n      const gl = g[i] * (sin(ph[i] + t * om[i]) > -0.8 ? 1 : 0.5);\n      if (gl \u003c 0) {\n        r *= 1 + 0.3 * gl;\n        gg *= 1 + 0.3 * gl;\n        b *= 1 + 0.3 * gl;\n      } else if (gl > 0) {\n        r += (pearl[0] + (tint[0] - pearl[0]) * D - r) * gl;\n        gg += (pearl[1] + (tint[1] - pearl[1]) * D - gg) * gl;\n        b += (pearl[2] + (tint[2] - pearl[2]) * D - b) * gl;\n      }\n      // The torch's violet spill.\n      if (S.on) {\n        const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, v = 0.12 * exp(-(dx * dx + dy * dy) / sig2);\n        r += v * 0.45;\n        b += v;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, gg)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-photochromic","type":"code","name":"photochromic","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Photochromic\n// Family:  cosmetic\n// Idea:    A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after photochromic nail polish, pale in the shade, that deepens under UV light and fades back [Beer-Lambert law, August Beer, 1852]\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1\n//\n// Knob 1: Hue. Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening.\n// Knob 2: Speed. At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds.\n// Knob 3: Flakes. The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter.\n// Knob 4: Fade. How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture.\n// Buttons: K1 tap sends a stroke now, running the other way from the last one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sin, exp, round, random, LN10, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Seconds at Speed 2: a stroke every PERIOD, crossing in SWEEP. The first\n// stroke of a fresh start begins at FIRST; the one before it, which ended\n// 8.4 seconds before the start, is run through when the pattern opens.\nconst PERIOD = 13, SWEEP = 2.4, FIRST = 2.2;\n// The torch: a soft spot of sigma SIG LEDs, weaving AMP LEDs either side of\n// the middle; the dye switches at KON per second where it is brightest.\nconst SIG = 15, AMP = 20, KON = 10;\n// Optical density of the switched dye, so the depth of colour goes as\n// 1 - 10^(-OD a) (Beer-Lambert): it holds dark while most of the dye is\n// still switched and lets go toward the end.\nconst OD = 2;\n// The fade, from a = 0.95 to the a where the colour is half gone.\nconst HALF_A = 1.856;\n// Opening hue: violet, not red.\nconst H0 = 0.76;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, flakes: 1, fade: 0.06, t: 0, begun: false, k: 0, tx: -99, ty: -99, on: 0,\n    a: new Float32Array(N), g: new Float32Array(N), ph: new Float32Array(N), om: new Float32Array(N),\n    size: 0, pale: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], pearl: [0, 0, 0], extra: -1,\n  };\n}\n\n// The flakes for a size, one glint per LED, every LED of a flake sharing\n// it: 1 catches the light, -1 is turned away and shades the polish under\n// it, 0 is bare polish. At size 1 every LED holds mica, 38% catching the\n// light, 22% turned away; larger flakes are fewer, 30% and 10%.\nfunction flakes(S, size) {\n  const { g, ph, om } = S;\n  const cw = Math.ceil(W / size), nc = cw * Math.ceil(H / size);\n  const cg = new Float32Array(nc), cp = new Float32Array(nc), co = new Float32Array(nc);\n  for (let c = 0; c \u003c nc; c++) {\n    const u = random();\n    if (size === 1) cg[c] = u \u003c 0.4 ? 0 : u \u003c 0.62 ? -1 : 1;\n    else cg[c] = u \u003c 0.6 ? 0 : u \u003c 0.7 ? -1 : 1;\n    cp[c] = random() * TAU;\n    co[c] = 0.8 + 0.7 * random();\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = floor(y / size) * cw + floor(x / size), i = y * W + x;\n      // Flakes three or four across lose their corners.\n      const ex = x % size === 0 || x % size === size - 1, ey = y % size === 0 || y % size === size - 1;\n      g[i] = size > 2 && ex && ey ? 0 : cg[c];\n      ph[i] = cp[c];\n      om[i] = co[c];\n    }\n  S.size = size;\n}\n\n// Where stroke k has the torch at progress s (0..1): strokes alternate down\n// and up the panel, weaving side to side, each a little different.\nfunction torchAt(S, k, s) {\n  const down = (k & 1) === 0, w = 2.4 + 0.5 * ((k * 0.618 + 10) % 1), ph = k * 2.4;\n  S.ty = down ? -30 + s * (H + 60) : H + 30 - s * (H + 60);\n  S.tx = W / 2 + AMP * sin(TAU * w * s + ph);\n}\n\n// Advance the dye by dt seconds of pattern time: switched by the torch at\n// KON times its intensity, back by the thermal fade.\nfunction dye(S, dt) {\n  const a = S.a, half = 4.5 * 3 ** S.fade, decay = exp((-HALF_A / half) * dt);\n  for (let i = 0; i \u003c N; i++) a[i] *= decay;\n  if (!S.on) return;\n  const R = 3 * SIG, x0 = max(0, floor(S.tx - R)), x1 = min(W - 1, Math.ceil(S.tx + R));\n  const y0 = max(0, floor(S.ty - R)), y1 = min(H - 1, Math.ceil(S.ty + R));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, I = exp(-(dx * dx + dy * dy) / (2 * SIG * SIG));\n      if (I \u003c 0.01) continue;\n      const i = y * W + x;\n      a[i] += (1 - a[i]) * (1 - exp(-KON * I * dt));\n    }\n}\n\n// Run the clock from t0 to t1 in steps, strokes switching on and off.\nfunction run(S, t0, t1, step) {\n  for (let t = t0; t \u003c t1 - 1e-9; t += step) {\n    const d = min(step, t1 - t), tm = t + d;\n    const k = floor((tm - FIRST) / PERIOD), s = (tm - FIRST - k * PERIOD) / SWEEP;\n    S.on = 0;\n    if (s \u003c= 1) {\n      S.on = 1;\n      S.k = k;\n      torchAt(S, k, s);\n    }\n    if (S.extra >= 0) {\n      const se = (tm - S.extra) / SWEEP;\n      if (se \u003c= 1) {\n        S.on = 1;\n        torchAt(S, S.k + 1, se);\n      } else S.extra = -1;\n    }\n    dye(S, d);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.flakes = cl(k[2], 1, 4);\n  S.fade = cl(k[3], -1, 1);\n  const size = round(S.flakes);\n  if (size !== S.size) flakes(S, size);\n  if (!S.begun) {\n    S.t = FIRST - PERIOD - 0.3;\n    run(S, S.t, 0, 0.1);\n    S.t = 0;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.extra \u003c 0) S.extra = S.t;\n  const step = (d * S.speed) / 2;\n  if (step > 0) run(S, S.t, S.t + step, step);\n  S.t += step;\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Red, orange, yellow and lime go brown or olive when dark: there the\n  // polish deepens to a bright full colour instead, from a cream.\n  const dw = min(abs(hh - 0.12), 1 - abs(hh - 0.12)), warm = 1 - sm(0.12, 0.24, dw);\n  hsv(h, 0.32 - 0.1 * warm, 0.52 + 0.04 * warm, S.pale);\n  hsv(h + 0.015 * (1 - warm), 0.92 + 0.06 * warm, 0.11 + 0.5 * warm, S.deep);\n  hsv(h, 0.6 - 0.1 * warm, 0.5 + 0.4 * warm, S.tint);\n  hsv(h, 0.12, 1, S.pearl);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { a, g, ph, om, pale, deep, tint, pearl } = S, t = S.t, k = -OD * LN10, norm = 1 - exp(k);\n  const sig2 = 2 * (SIG * 1.2) ** 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // How deep the colour is: Beer-Lambert in the switched dye.\n      const D = (1 - exp(k * a[i])) / norm;\n      let r = pale[0] + (deep[0] - pale[0]) * D;\n      let gg = pale[1] + (deep[1] - pale[1]) * D;\n      let b = pale[2] + (deep[2] - pale[2]) * D;\n      // The flake: pearl white in the pale polish; under the dark dye the light\n      // crosses the dye twice on its way to the flake and back, so the\n      // flake goes dim and takes the colour. Now and then a flake turns half\n      // away from the room light.\n      const gl = g[i] * (sin(ph[i] + t * om[i]) > -0.8 ? 1 : 0.5);\n      if (gl \u003c 0) {\n        r *= 1 + 0.3 * gl;\n        gg *= 1 + 0.3 * gl;\n        b *= 1 + 0.3 * gl;\n      } else if (gl > 0) {\n        r += (pearl[0] + (tint[0] - pearl[0]) * D - r) * gl;\n        gg += (pearl[1] + (tint[1] - pearl[1]) * D - gg) * gl;\n        b += (pearl[2] + (tint[2] - pearl[2]) * D - b) * gl;\n      }\n      // The torch's violet spill.\n      if (S.on) {\n        const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, v = 0.12 * exp(-(dx * dx + dy * dy) / sig2);\n        r += v * 0.45;\n        b += v;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, gg)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds."},{"name":"Flakes","min":1,"max":4,"about":"The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter."},{"name":"Fade","min":-1,"max":1,"about":"How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture."}],"start":[0,2,1,0.06],"measures":{"motion":0.1311,"detail":0.2098,"edges":0.7508,"complexity":1.4701,"coverage":0.9752,"colour":0.1059,"drift":0.3646},"knobResponse":[0.1323,0.3042,0.2265,0.1945]},{"slug":"pin-art","title":"Pin Art","family":"toy","round":22,"note":"핀 아트 장난감을 앞에서 봐요. 엇갈린 격자의 강철 핀 4096개가 패널을 채우고, 뒤에서 펼친 손이 눌러 들어오면 밀려 나온 핀만 비스듬한 등빛을 받아 빛나요. 장난감을 기울이면 핀이 물결치며 평평해지고 열쇠가 다음으로 눌러 들어와요.","idea":"A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.","buttons":"K1 tap tilts the toy flat now and presses the next object in.","code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","layer":{"id":"layer-pin-art","type":"code","name":"pin-art","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower."},{"name":"Object","min":0,"max":4,"about":"What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one."},{"name":"Light","min":0,"max":1,"about":"Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.0617,"detail":0.3463,"edges":0.9544,"complexity":1.3204,"coverage":0.7864,"colour":0.2041,"drift":0.3573},"knobResponse":[0.1597,0.2367,0.0944,0.0463]},{"slug":"pint","title":"Pint","family":"cells","round":18,"note":"탭이 패널 높이만 한 파인트 잔에 맥주를 따르면, 뿌연 맥주가 바닥부터 맑아지고 기포 줄이 오르는 동안 거품 머리가 밝은 테두리의 다각형 셀로 굵어져요. 누군가 다섯 모금에 나눠 마시며 잔에 레이싱 고리를 남기고, 바닥이 보이면 다시 따라요. K1 은 라거에서 앰버 에일, 레드 에일을 지나 스타우트까지 맥주를 바꾸고, 스타우트는 크림빛 서지가 바닥부터 검게 가라앉아요.","idea":"A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-pint","type":"code","name":"pint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Beer","min":0,"max":1,"about":"What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower."},{"name":"Fizz","min":4,"max":20,"about":"How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20."},{"name":"Head","min":0,"max":1,"about":"How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells."}],"start":[0,2,4,0.06],"measures":{"motion":0.1411,"detail":0.0425,"edges":0.5054,"complexity":1.0501,"coverage":0.678,"colour":0.3448,"drift":0.1113},"knobResponse":[0.1725,0.2433,0.0546,0.0641]},{"slug":"pinwheel-tiling","title":"Pinwheel Tiling","family":"geometry","round":32,"note":"다리가 1 과 2 인 직각삼각형 타일링 속으로 끝없이 들어가요. 3.6초마다 타일마다 이음매가 옅게 나타나 다섯 조각으로 갈라지고, 그 가운데 하나는 부모에서 26.6° 돌아가 있어요. 타일을 긴 다리의 방향으로 칠해서, 같은 색 무리가 서로 다른 각도로 기운 것이 보여요.","idea":"The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.","buttons":"K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.","code":"// ===== Patternflow pattern =====\n// Title:   Pinwheel Tiling\n// Family:  geometry\n// Idea:    The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: pinwheel tiling (John Conway and Charles Radin, 1994), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1\n//\n// Knob 1: Hue. Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other.\n// Knob 2: Speed. At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4.\n// Knob 3: Size. How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider.\n// Knob 4: Paint. At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers.\n// Buttons: K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5;\nconst { floor, sqrt, cos, sin, atan, atan2, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst S5 = sqrt(5), LS5 = log(S5), TAU = 2 * PI, A2 = atan(0.5);\n\n// The tile in its own frame: small angle at (0,0), right angle at (2,0),\n// large angle at (2,1). Conway's cut: the altitude from the right angle takes\n// one copy off the short side; the larger part is cut from the midpoint of\n// its hypotenuse to its right angle and to the midpoints of its two legs,\n// four copies in two mirror pairs. Each child is [small, right, large] in the\n// parent's frame. Children 2 and 3 keep the parent's hand, 0, 1 and 4 are\n// mirrored. Cut with the midpoint split instead, the tiles keep to eight\n// directions; with this cut the count grows with every level.\nconst KIDS = [\n  [[2, 0], [1.6, 0.8], [2, 1]],\n  [[1, 0], [1.8, 0.4], [2, 0]],\n  [[1, 0], [1.8, 0.4], [1.6, 0.8]],\n  [[1.6, 0.8], [0.8, 0.4], [1, 0]],\n  [[0, 0], [0.8, 0.4], [1, 0]],\n].map(([a, b, c]) => {\n  const ux = (b[0] - a[0]) / 2, uy = (b[1] - a[1]) / 2, vx = c[0] - b[0], vy = c[1] - b[1], det = ux * vy - vx * uy;\n  return { ax: a[0], ay: a[1], ux, uy, vx, vy, i00: vy / det, i01: -vx / det, i10: -uy / det, i11: ux / det, flip: det \u003c 0 };\n});\n\n// Points the zoom can dive into, each the fixed point of a chain of children\n// that keeps the hand: child 2 alone, a copy a fifth of the area turned by\n// arctan(1/2); child 3 twice; 2 then 3; 3 then 2. P is the chain's length in\n// levels, R its turn.\nconst DIVES = [\n  { zx: 1.5, zy: 0.5, P: 1, R: A2 },\n  { zx: 1.2, zy: 0.4, P: 2, R: 2 * A2 },\n  { zx: 1.375, zy: 0.375, P: 2, R: 2 * A2 - PI },\n  { zx: 1.125, zy: 0.375, P: 2, R: 2 * A2 - PI },\n];\nconst N0 = 8;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  params.s = {\n    z: 0, hue: 0, speed: 2, size: 13, paint: 0.06, dive: 0, prev: -1, fade: 1,\n    lut: new Float32Array(256 * 3 * 4), lutHue: NaN, out: new Float32Array(W * H * 3), tmp: new Float32Array(W * H * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = cl(k[2], 13, 40);\n  P.paint = cl(k[3], 0, 1);\n  P.z += d * P.speed * 0.14;\n  if (P.fade \u003c 1) P.fade = Math.min(1, P.fade + d / 0.8);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.prev = P.dive;\n    P.dive = (P.dive + 1) % DIVES.length;\n    P.fade = 0;\n  }\n}\n\n// Draws one dive into buf: RGB 0..255 per LED.\nfunction render(P, D, buf) {\n  const u = P.z % D.P, S = Math.pow(S5, N0 + u), phi = -D.R * (u / D.P);\n  const cp = cos(-phi) / S, sp = sin(-phi) / S;\n  // Depth d tiles span S * sqrt5^(1-d) LEDs along the hypotenuse; the deepest\n  // drawn is the last one at least Size long, and it fades in.\n  const lam = N0 + u + 1 - log(P.size) / LS5, dn = floor(lam), al = sm(0, 0.3, lam - dn), ac = sm(0.28, 0.42, lam - dn);\n  // Each level's seam: its scale on the panel, how far it reaches from the\n  // edge (a little wider for the older, larger tiles) and how dark it is.\n  const sig = new Float32Array(dn + 1), reach = new Float32Array(dn + 1), dark = new Float32Array(dn + 1);\n  for (let d = 0; d \u003c= dn; d++) {\n    sig[d] = S * Math.pow(S5, -d);\n    reach[d] = 1.1 + 0.45 * sm(1, 2.5, lam - d);\n    dark[d] = d === dn ? al : 1;\n  }\n  const lut = P.lut, paint = P.paint;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - CX, dy = y - CY;\n      let qx = D.zx + cp * dx - sp * dy, qy = D.zy + sp * dx + cp * dy;\n      let m00 = 1, m01 = 0, m10 = 0, m11 = 1, flip = false;\n      let a0 = 0, f0 = false, seam = 0;\n      for (let d = 1; d \u003c= dn; d++) {\n        if (d === dn) (a0 = atan2(m10, m00)), (f0 = flip);\n        let best = -9, bi = 0, bx = 0, by = 0;\n        for (let i = 0; i \u003c 5; i++) {\n          const K = KIDS[i], rx = qx - K.ax, ry = qy - K.ay;\n          const tx = K.i00 * rx + K.i01 * ry, ty = K.i10 * rx + K.i11 * ry;\n          const mg = Math.min(ty, 2 - tx, (tx - 2 * ty) / S5);\n          if (mg > best) {\n            (best = mg), (bi = i), (bx = tx), (by = ty);\n            // The children do not overlap: one inside is the one.\n            if (mg > 0) break;\n          }\n        }\n        const K = KIDS[bi];\n        const n00 = m00 * K.ux + m01 * K.uy, n01 = m00 * K.vx + m01 * K.vy, n10 = m10 * K.ux + m11 * K.uy, n11 = m10 * K.vx + m11 * K.vy;\n        (m00 = n00), (m01 = n01), (m10 = n10), (m11 = n11), (flip = flip !== K.flip);\n        (qx = bx), (qy = by);\n        const sd = dark[d] * cl(reach[d] - best * sig[d], 0, 1);\n        if (sd > seam) seam = sd;\n      }\n      const a1 = atan2(m10, m00);\n      const o = (y * W + x) * 3;\n      // Colour of the tile one level up and of the newest tile, mixed.\n      tint(lut, a0 + phi, f0, paint);\n      const r0 = cr, g0 = cg, b0 = cb;\n      tint(lut, a1 + phi, flip, paint);\n      const r = r0 + (cr - r0) * ac, g = g0 + (cg - g0) * ac, b = b0 + (cb - b0) * ac;\n      const v = 1 - 0.94 * seam;\n      buf[o] = r * v;\n      buf[o + 1] = g * v;\n      buf[o + 2] = b * v;\n    }\n}\n\n// A tile's colour from the direction of its long leg on the panel and its\n// hand: four tables of 256 directions, by direction and by light, each for\n// both hands.\nlet cr = 0, cg = 0, cb = 0;\nfunction tint(lut, ang, flip, paint) {\n  let t = ang / TAU;\n  t -= floor(t);\n  const i = ((floor(t * 256) & 255) + (flip ? 256 : 0)) * 3, j = i + 1536;\n  cr = lut[i] + (lut[j] - lut[i]) * paint;\n  cg = lut[i + 1] + (lut[j + 1] - lut[i + 1]) * paint;\n  cb = lut[i + 2] + (lut[j + 2] - lut[i + 2]) * paint;\n}\n\nfunction buildLut(P) {\n  for (let i = 0; i \u003c 256; i++) {\n    const t = i / 256, lit = 0.5 + 0.5 * cos(t * TAU - 2.2);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 1, P.lut, i * 3);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 0.8, P.lut, (256 + i) * 3);\n    hsv(P.hue + 0.55, 0.55, 0.35 + 0.65 * lit, P.lut, (512 + i) * 3);\n    hsv(P.hue + 0.62, 0.85, 0.25 + 0.6 * lit, P.lut, (768 + i) * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const out = P.out;\n  render(P, DIVES[P.dive], out);\n  if (P.fade \u003c 1 && P.prev >= 0) {\n    render(P, DIVES[P.prev], P.tmp);\n    const f = sm(0, 1, P.fade), tmp = P.tmp;\n    for (let i = 0; i \u003c out.length; i++) out[i] = tmp[i] + (out[i] - tmp[i]) * f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","layer":{"id":"layer-pinwheel-tiling","type":"code","name":"pinwheel-tiling","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pinwheel Tiling\n// Family:  geometry\n// Idea:    The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: pinwheel tiling (John Conway and Charles Radin, 1994), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1\n//\n// Knob 1: Hue. Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other.\n// Knob 2: Speed. At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4.\n// Knob 3: Size. How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider.\n// Knob 4: Paint. At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers.\n// Buttons: K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5;\nconst { floor, sqrt, cos, sin, atan, atan2, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst S5 = sqrt(5), LS5 = log(S5), TAU = 2 * PI, A2 = atan(0.5);\n\n// The tile in its own frame: small angle at (0,0), right angle at (2,0),\n// large angle at (2,1). Conway's cut: the altitude from the right angle takes\n// one copy off the short side; the larger part is cut from the midpoint of\n// its hypotenuse to its right angle and to the midpoints of its two legs,\n// four copies in two mirror pairs. Each child is [small, right, large] in the\n// parent's frame. Children 2 and 3 keep the parent's hand, 0, 1 and 4 are\n// mirrored. Cut with the midpoint split instead, the tiles keep to eight\n// directions; with this cut the count grows with every level.\nconst KIDS = [\n  [[2, 0], [1.6, 0.8], [2, 1]],\n  [[1, 0], [1.8, 0.4], [2, 0]],\n  [[1, 0], [1.8, 0.4], [1.6, 0.8]],\n  [[1.6, 0.8], [0.8, 0.4], [1, 0]],\n  [[0, 0], [0.8, 0.4], [1, 0]],\n].map(([a, b, c]) => {\n  const ux = (b[0] - a[0]) / 2, uy = (b[1] - a[1]) / 2, vx = c[0] - b[0], vy = c[1] - b[1], det = ux * vy - vx * uy;\n  return { ax: a[0], ay: a[1], ux, uy, vx, vy, i00: vy / det, i01: -vx / det, i10: -uy / det, i11: ux / det, flip: det \u003c 0 };\n});\n\n// Points the zoom can dive into, each the fixed point of a chain of children\n// that keeps the hand: child 2 alone, a copy a fifth of the area turned by\n// arctan(1/2); child 3 twice; 2 then 3; 3 then 2. P is the chain's length in\n// levels, R its turn.\nconst DIVES = [\n  { zx: 1.5, zy: 0.5, P: 1, R: A2 },\n  { zx: 1.2, zy: 0.4, P: 2, R: 2 * A2 },\n  { zx: 1.375, zy: 0.375, P: 2, R: 2 * A2 - PI },\n  { zx: 1.125, zy: 0.375, P: 2, R: 2 * A2 - PI },\n];\nconst N0 = 8;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  params.s = {\n    z: 0, hue: 0, speed: 2, size: 13, paint: 0.06, dive: 0, prev: -1, fade: 1,\n    lut: new Float32Array(256 * 3 * 4), lutHue: NaN, out: new Float32Array(W * H * 3), tmp: new Float32Array(W * H * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = cl(k[2], 13, 40);\n  P.paint = cl(k[3], 0, 1);\n  P.z += d * P.speed * 0.14;\n  if (P.fade \u003c 1) P.fade = Math.min(1, P.fade + d / 0.8);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.prev = P.dive;\n    P.dive = (P.dive + 1) % DIVES.length;\n    P.fade = 0;\n  }\n}\n\n// Draws one dive into buf: RGB 0..255 per LED.\nfunction render(P, D, buf) {\n  const u = P.z % D.P, S = Math.pow(S5, N0 + u), phi = -D.R * (u / D.P);\n  const cp = cos(-phi) / S, sp = sin(-phi) / S;\n  // Depth d tiles span S * sqrt5^(1-d) LEDs along the hypotenuse; the deepest\n  // drawn is the last one at least Size long, and it fades in.\n  const lam = N0 + u + 1 - log(P.size) / LS5, dn = floor(lam), al = sm(0, 0.3, lam - dn), ac = sm(0.28, 0.42, lam - dn);\n  // Each level's seam: its scale on the panel, how far it reaches from the\n  // edge (a little wider for the older, larger tiles) and how dark it is.\n  const sig = new Float32Array(dn + 1), reach = new Float32Array(dn + 1), dark = new Float32Array(dn + 1);\n  for (let d = 0; d \u003c= dn; d++) {\n    sig[d] = S * Math.pow(S5, -d);\n    reach[d] = 1.1 + 0.45 * sm(1, 2.5, lam - d);\n    dark[d] = d === dn ? al : 1;\n  }\n  const lut = P.lut, paint = P.paint;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - CX, dy = y - CY;\n      let qx = D.zx + cp * dx - sp * dy, qy = D.zy + sp * dx + cp * dy;\n      let m00 = 1, m01 = 0, m10 = 0, m11 = 1, flip = false;\n      let a0 = 0, f0 = false, seam = 0;\n      for (let d = 1; d \u003c= dn; d++) {\n        if (d === dn) (a0 = atan2(m10, m00)), (f0 = flip);\n        let best = -9, bi = 0, bx = 0, by = 0;\n        for (let i = 0; i \u003c 5; i++) {\n          const K = KIDS[i], rx = qx - K.ax, ry = qy - K.ay;\n          const tx = K.i00 * rx + K.i01 * ry, ty = K.i10 * rx + K.i11 * ry;\n          const mg = Math.min(ty, 2 - tx, (tx - 2 * ty) / S5);\n          if (mg > best) {\n            (best = mg), (bi = i), (bx = tx), (by = ty);\n            // The children do not overlap: one inside is the one.\n            if (mg > 0) break;\n          }\n        }\n        const K = KIDS[bi];\n        const n00 = m00 * K.ux + m01 * K.uy, n01 = m00 * K.vx + m01 * K.vy, n10 = m10 * K.ux + m11 * K.uy, n11 = m10 * K.vx + m11 * K.vy;\n        (m00 = n00), (m01 = n01), (m10 = n10), (m11 = n11), (flip = flip !== K.flip);\n        (qx = bx), (qy = by);\n        const sd = dark[d] * cl(reach[d] - best * sig[d], 0, 1);\n        if (sd > seam) seam = sd;\n      }\n      const a1 = atan2(m10, m00);\n      const o = (y * W + x) * 3;\n      // Colour of the tile one level up and of the newest tile, mixed.\n      tint(lut, a0 + phi, f0, paint);\n      const r0 = cr, g0 = cg, b0 = cb;\n      tint(lut, a1 + phi, flip, paint);\n      const r = r0 + (cr - r0) * ac, g = g0 + (cg - g0) * ac, b = b0 + (cb - b0) * ac;\n      const v = 1 - 0.94 * seam;\n      buf[o] = r * v;\n      buf[o + 1] = g * v;\n      buf[o + 2] = b * v;\n    }\n}\n\n// A tile's colour from the direction of its long leg on the panel and its\n// hand: four tables of 256 directions, by direction and by light, each for\n// both hands.\nlet cr = 0, cg = 0, cb = 0;\nfunction tint(lut, ang, flip, paint) {\n  let t = ang / TAU;\n  t -= floor(t);\n  const i = ((floor(t * 256) & 255) + (flip ? 256 : 0)) * 3, j = i + 1536;\n  cr = lut[i] + (lut[j] - lut[i]) * paint;\n  cg = lut[i + 1] + (lut[j + 1] - lut[i + 1]) * paint;\n  cb = lut[i + 2] + (lut[j + 2] - lut[i + 2]) * paint;\n}\n\nfunction buildLut(P) {\n  for (let i = 0; i \u003c 256; i++) {\n    const t = i / 256, lit = 0.5 + 0.5 * cos(t * TAU - 2.2);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 1, P.lut, i * 3);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 0.8, P.lut, (256 + i) * 3);\n    hsv(P.hue + 0.55, 0.55, 0.35 + 0.65 * lit, P.lut, (512 + i) * 3);\n    hsv(P.hue + 0.62, 0.85, 0.25 + 0.6 * lit, P.lut, (768 + i) * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const out = P.out;\n  render(P, DIVES[P.dive], out);\n  if (P.fade \u003c 1 && P.prev >= 0) {\n    render(P, DIVES[P.prev], P.tmp);\n    const f = sm(0, 1, P.fade), tmp = P.tmp;\n    for (let i = 0; i \u003c out.length; i++) out[i] = tmp[i] + (out[i] - tmp[i]) * f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4."},{"name":"Size","min":13,"max":40,"about":"How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider."},{"name":"Paint","min":0,"max":1,"about":"At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers."}],"start":[0,2,13,0.06],"measures":{"motion":2.1331,"detail":0.1861,"edges":0.7085,"complexity":1.6658,"coverage":0.856,"colour":0.5245,"drift":0.1667},"knobResponse":[0.362,0.3049,0.2869,0.2296]},{"slug":"pipe-organ","title":"Pipe Organ","family":"music","round":24,"note":"어두운 성당의 파이프오르간 정면이 패널을 채워요. 보이지 않는 오르가니스트가 여덟 화음 코랄을 되풀이하면, 소리 나는 파이프마다 입에서 빛이 켜지고 몸통을 따라 정상파 띠가 올라가요. 가운데 가장 긴 파이프가 가장 낮은 음이에요. K1 이 플루트의 파랑, 프린시펄의 은빛, 리드의 금빛과 빨강 사이에서 음전을 고르고, K1 을 누르면 파이프 열아홉이 다 울려요.","idea":"The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.","buttons":"K1 tap is full organ: every pipe in the front speaks at once for about three seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Pipe Organ\n// Family:  music\n// Idea:    The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower-and-flat fronts of North German Baroque organ cases and four-part chorale harmony\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1\n//\n// Knob 1: Stops. The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too.\n// Knob 2: Tempo. At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one.\n// Knob 3: Voices. How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord.\n// Knob 4: Tremulant. The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them.\n// Buttons: K1 tap is full organ: every pipe in the front speaks at once for about three seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Pipe d sounds the d-th note of a major scale up from the longest pipe, and\n// an open pipe halves its length each octave.\nconst STEP = [0, 2, 4, 5, 7, 9, 11];\nconst len = (d) => 92 * 2 ** (-(12 * floor(d / 7) + STEP[d % 7]) / 12);\n// The front: the lowest note in the middle of the centre tower, then pairs,\n// the lower note left and the next one right, as the C and C sharp chests of\n// a real case split a scale between the two sides.\nconst PIPES = [];\nfunction pair(d, x, w, top, mouth, base) {\n  const L = d ? (len(d) + len(d + 1)) / 2 : len(0);\n  const t = round(top >= 0 ? top : mouth - L);\n  const m = round(top >= 0 ? top + L : mouth);\n  const mh = w >= 5 ? 2 : 1;\n  PIPES[d] = { x, w, top: t, m, mh, f0: m + mh + 1, base };\n  if (d) PIPES[d + 1] = { x: W - x - w, w, top: t, m, mh, f0: m + mh + 1, base };\n}\n// The centre tower and the side towers hang from their crowns, so their\n// mouths step; the flats stand on equal feet, so their tops ramp.\npair(0, 29, 6, 9, 0, 110);\npair(1, 23, 5, 12, 0, 110);\npair(3, 1, 4, 30, 0, 110);\npair(5, 6, 4, 38, 0, 110);\npair(7, 19, 3, -1, 102, 110);\npair(9, 15, 3, -1, 102, 110);\npair(11, 11, 3, -1, 102, 110);\npair(13, 19, 3, -1, 44, 50);\npair(15, 15, 3, -1, 44, 50);\npair(17, 11, 3, -1, 44, 50);\nconst NP = 19;\n\n// Eight-chord phrases on the scale's chords, I = 0 to vi = 5. The first one\n// always opens the piece.\nconst PHRASES = [\n  [0, 4, 5, 3, 0, 1, 4, 0],\n  [0, 5, 1, 4, 0, 3, 4, 0],\n  [5, 3, 0, 4, 5, 1, 4, 4],\n  [0, 3, 0, 4, 5, 1, 4, 0],\n  [3, 4, 0, 5, 1, 0, 4, 0],\n  [0, 2, 5, 3, 1, 4, 4, 0],\n];\n// Voices in the order the knob adds them: soprano, bass, alto, tenor, then\n// three that fill the chord.\nconst VORD = [0, 3, 1, 2, 4, 5, 6];\n\n// Surfaces, as how much of each light they give back.\nconst TIN = [0.9, 0.95, 1];\nconst WOOD = [0.42, 0.25, 0.15];\nconst GILT = [1.3, 1, 0.42];\nconst DARK = [0.07, 0.05, 0.045];\nconst STONE = [0.9, 0.88, 0.84];\n// Grey daylight from the nave, the candles, and the lamp on the music desk.\nconst DAY = [56, 56, 64];\nconst CAN = [200, 126, 58];\nconst LAMP = [255, 210, 140];\n// The rose window's glass.\nconst RUBY = [230, 40, 60];\nconst SAPH = [50, 90, 255];\nconst AMBER = [255, 200, 80];\nconst GREEN = [60, 200, 110];\nconst ROSE = [RUBY, SAPH, GREEN, SAPH];\n// Stop colours: flute, principal, reed at the mouth and up the body, full organ.\nconst FLUTE = [0.35, 0.62, 1];\nconst PRIN = [0.84, 0.9, 1];\nconst REED0 = [1, 0.77, 0.27];\nconst REED1 = [1, 0.2, 0.08];\nconst FULL = [1, 0.86, 0.58];\n\n// Round tin: a highlight a third of the way across and a dark far edge.\nfunction shade(p) {\n  return (0.2 + 0.5 * sin(PI * p) ** 0.7 + 0.55 * exp(-(((p - 0.36) / 0.14) ** 2))) * (1.1 - 0.4 * p);\n}\n\n// Carved and gilt pipe shades: pierced scrolls.\nfunction fret(x, y) {\n  return sin(x * 1.25 + 2 * sin(y * 0.52)) * sin(y * 0.9 + 1.6 * sin(x * 0.61));\n}\n\nfunction build(P) {\n  const A = P.A;\n  const put = (x, y, c, k = 1, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    for (let n = 0; n \u003c 3; n++) A[o + n] = mix(A[o + n], c[n] * k, a);\n  };\n  // Left half and its mirror.\n  const two = (x, y, c, k, a) => (put(x, y, c, k, a), put(W - 1 - x, y, c, k, a));\n  const row = (x0, x1, y, c, k) => {\n    for (let x = x0; x \u003c= x1; x++) two(x, y, c, k);\n  };\n  // The church wall: courses of ashlar.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cs = floor(y / 5), off = (cs & 1) * 4, mortar = y % 5 === 4 || (x + off) % 8 === 7;\n      put(x, y, STONE, mortar ? 0.14 : 0.27 + 0.1 * hash(floor((x + off) / 8), cs));\n    }\n  // The case, dark inside.\n  for (let y = 0; y \u003c 114; y++) for (let x = 0; x \u003c 32; x++) if (x > 21 || (x > 9 ? y >= 11 : y >= 22)) two(x, y, DARK, 1);\n  // Stiles between the towers and the flats.\n  for (const [x, y0] of [[0, 30], [10, 16], [22, 9]]) for (let y = y0; y \u003c 110; y++) two(x, y, WOOD, 1.05 + 0.15 * sin(y * 0.8) * (y % 12 \u003c 2 ? 1 : 0));\n  // The side towers' crowns, each with a gilt urn and a flame on top.\n  row(0, 10, 29, GILT, 0.9);\n  for (let y = 26; y \u003c= 28; y++) row(0, 10, y, WOOD, 0.9);\n  for (const x of [2, 5, 8]) two(x, 27, GILT, 1.05);\n  row(0, 10, 25, GILT, 1.05);\n  row(0, 10, 24, WOOD, 0.7);\n  row(0, 10, 23, WOOD, 1);\n  row(0, 10, 22, GILT, 1.15);\n  const URN = [[21, 2], [20, 1], [19, 2], [18, 2], [17, 1], [16, 0], [15, 1], [14, 0]];\n  for (const [y, r] of URN) for (let x = 5 - r; x \u003c= 5 + r; x++) two(x, y, GILT, 1.15 - 0.18 * (x - 5 + r));\n  // The upper flats' cornice and a scroll pediment.\n  row(10, 22, 15, GILT, 0.9);\n  for (let y = 12; y \u003c= 14; y++) for (let x = 10; x \u003c= 22; x++) two(x, y, WOOD, y === 13 && x % 2 ? 1.25 : 0.9);\n  row(10, 22, 11, GILT, 1.1);\n  row(12, 20, 10, GILT, 0.75);\n  for (const [x, y] of [[12, 9], [13, 9], [19, 9], [20, 9], [14, 8], [15, 8], [17, 8], [18, 8], [16, 7], [16, 6]]) two(x, y, GILT, 1.05);\n  // The centre tower's crown, with a carved crest over it.\n  row(22, 31, 8, GILT, 0.95);\n  for (let y = 5; y \u003c= 7; y++) for (let x = 22; x \u003c= 31; x++) two(x, y, x % 4 === 1 && y === 6 ? GILT : WOOD, x % 4 === 1 && y === 6 ? 1.1 : 0.9);\n  row(22, 31, 4, GILT, 1.1);\n  for (let x = 23; x \u003c= 31; x++) {\n    const h = 4 * (1 - ((x - 31.5) / 9) ** 2);\n    for (let y = floor(4 - h); y \u003c 4; y++) if (fret(x, y + 3) > -0.2 || x === 31) two(x, y, GILT, x === 31 ? 1.25 : 0.8 + 0.3 * fret(x, y));\n  }\n  // Pipe shades over every pipe that stops short of the carving above it.\n  const GAP = [5, 14, 18, 28, 35, 45, 49, 58];\n  for (const q of PIPES) {\n    const y0 = q.base === 50 ? 16 : q.x === 1 || q.x === 6 || q.x > 53 ? 30 : q.x > 22 && q.x \u003c 41 ? 9 : 54;\n    for (let x = q.x - 1; x \u003c= q.x + q.w; x++) {\n      const own = x >= q.x && x \u003c q.x + q.w;\n      if (own || GAP.indexOf(x) >= 0)\n        for (let y = y0; y \u003c q.top; y++) {\n          const v = fret(x, y);\n          if (own && y === q.top - 1) put(x, y, GILT, 1.05);\n          else if (v > -0.1) put(x, y, GILT, 0.55 + 0.5 * v);\n        }\n    }\n  }\n  // Under the lower flats the pipe shades of the upper ones, and the shelf they stand on.\n  row(10, 22, 50, GILT, 0.95);\n  row(10, 22, 51, WOOD, 1);\n  row(10, 22, 52, WOOD, 0.9);\n  row(10, 22, 53, WOOD, 0.55);\n  // The pipes: body, mouth with its lips, and the conical foot.\n  for (const q of PIPES) {\n    const { x, w, top, m, mh, f0, base } = q;\n    for (let y = top; y \u003c m; y++) for (let j = 0; j \u003c w; j++) put(x + j, y, TIN, shade((j + 0.5) / w) * (y === top ? 0.7 : 1));\n    for (let j = 0; j \u003c w; j++) {\n      const inner = j > 0 && j \u003c w - 1, s = shade((j + 0.5) / w);\n      if (inner) put(x + j, m - 1, TIN, s * 1.3);\n      for (let y = m; y \u003c m + mh; y++) put(x + j, y, inner ? DARK : TIN, inner ? 0.8 : s);\n      put(x + j, m + mh, TIN, s * (inner ? 1.15 : 0.9));\n    }\n    if (w >= 5) for (let j = floor((w - 1) / 2); j \u003c= floor(w / 2); j++) put(x + j, m - 2, TIN, 1.25);\n    const cx = x + w / 2;\n    for (let y = f0; y \u003c base; y++) {\n      const hw = mix(w / 2, 0.7, (y - f0) / max(1, base - 1 - f0));\n      for (let xx = floor(cx - hw); xx \u003c= cx + hw; xx++) {\n        const cov = cl(hw - abs(xx + 0.5 - cx) + 0.5, 0, 1);\n        put(xx, y, TIN, 0.9 * shade(cl((xx + 0.5 - cx + hw) / (2 * hw), 0, 1)), cov);\n      }\n    }\n  }\n  // The impost the pipes stand on.\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 110, GILT, 1);\n    put(x, 111, WOOD, x % 16 === 0 ? 0.6 : 1);\n    put(x, 112, WOOD, x % 16 === 0 ? 0.6 : 0.95);\n    put(x, 113, WOOD, 0.5);\n  }\n  // Candles on the stiles between the side towers and the flats.\n  for (let y = 98; y \u003c= 101; y++) two(10, y, [0.95, 0.9, 0.8], 0.5);\n  for (let x = 9; x \u003c= 11; x++) two(x, 102, GILT, 0.6);\n  // The console: the music desk with its lamp, and one manual.\n  for (let y = 114; y \u003c H; y++) for (let x = 0; x \u003c W; x++) put(x, y, WOOD, 0.7);\n  for (let y = 114; y \u003c= 119; y++) for (let x = 16; x \u003c= 47; x++) put(x, y, WOOD, 0.85);\n  for (let y = 115; y \u003c= 119; y++)\n    for (let x = 21; x \u003c= 42; x++) put(x, y, [0.95, 0.9, 0.76], y === 116 || y === 118 ? 0.62 : hash(x, y) \u003c 0.13 ? 0.3 : 1);\n  for (let x = 27; x \u003c= 36; x++) put(x, 114, GILT, 1.15);\n  for (let k = 0; k \u003c 21; k++) {\n    for (let y = 121; y \u003c= 125; y++) for (let x = 3 * k; x \u003c 3 * k + 2; x++) put(x, y, [0.92, 0.88, 0.78], y === 125 ? 0.7 : 1);\n    const n = (k + 6) % 7;\n    if (k \u003c 20 && n !== 2 && n !== 6) for (let y = 121; y \u003c= 123; y++) put(3 * k + 2, y, DARK, 1), put(3 * k + 3, y, DARK, 1);\n  }\n  // Light: grey daylight from above, warm candlelight, the desk lamp.\n  for (let i = 0; i \u003c N; i++) {\n    const x = (i & 63) + 0.5, y = (i >> 6) + 0.5;\n    P.day[i] = 0.45 + 0.55 * (1 - y / H) ** 1.3;\n    P.cL[i] = 0.85 / (1 + ((x - 10.5) ** 2 + (y - 96) ** 2) / 450);\n    P.cR[i] = 0.85 / (1 + ((x - 53.5) ** 2 + (y - 96) ** 2) / 450);\n    P.lamp[i] = y > 115 ? 1.1 / (1 + (x - 32) ** 2 / 90 + (y - 115) ** 2 / 40) : 0.45 / (1 + ((x - 32) ** 2 + (y - 114) ** 2) / 140);\n  }\n}\n\n// The nearest scale degree in lo..hi under cap whose note is in pcs, moving\n// from prev, sitting still costing `same`.\nfunction near(lo, hi, pcs, prev, same, cap) {\n  let best = -1;\n  let bs = 1e9;\n  for (let d = lo; d \u003c= hi; d++) {\n    if (d >= cap || pcs.indexOf(d % 7) \u003c 0) continue;\n    const j = abs(d - prev), s = j + (j === 0 ? same : 0) + (j > 4 ? 2 : 0) + rnd() * 0.9;\n    if (s \u003c bs) (bs = s), (best = d);\n  }\n  return best \u003c 0 ? (cap \u003c 99 ? near(lo, hi, pcs, prev, same, 99) : prev) : best;\n}\n\n// The next chord of the chorale, voiced from the last one.\nfunction chord(P) {\n  if (P.pi >= P.ph.length) (P.ph = PHRASES[floor(rnd() * PHRASES.length)]), (P.pi = 0);\n  const r = P.ph[P.pi++], last = P.pi === P.ph.length, pen = P.pi === P.ph.length - 1;\n  const T = [r, (r + 2) % 7, (r + 4) % 7];\n  if (pen && r === 4 && rnd() \u003c 0.6) T.push(3);\n  const [s0, a0, t0, b0] = P.prev;\n  const B = near(0, 7, [!last && !pen && rnd() \u003c 0.3 ? T[1] : r], b0, 0, 99);\n  const S = near(11, 18, last && r === 0 ? [0] : T, s0, 1.6, 99);\n  const A = near(8, 14, T, a0, 0.4, S);\n  const miss = T.filter((c) => c !== S % 7 && c !== A % 7 && c !== B % 7);\n  const Tn = near(4, 11, miss.length ? miss : T, t0, 0.4, A);\n  const v = [S, A, Tn, B];\n  // Three more parts fill the chord: the bass an octave up, one in the middle, one high.\n  for (const goal of [B + 7, 10, 16]) {\n    let best = -1;\n    let bs = 1e9;\n    for (let d = 0; d \u003c NP; d++) {\n      const s = abs(d - goal) + rnd() * 0.5;\n      if (T.indexOf(d % 7) >= 0 && v.indexOf(d) \u003c 0 && s \u003c bs) (bs = s), (best = d);\n    }\n    v.push(best);\n  }\n  P.prev = v;\n  return { v, dur: last ? 2 : 1, last, pass: [-1, -1, -1, -1], at: 0 };\n}\n\n// A part moving a third walks through the note between on the half beat.\nfunction passing(c, nx) {\n  if (c.last) return;\n  for (let k = 0; k \u003c 4; k++) if (abs(nx.v[k] - c.v[k]) === 2 && rnd() \u003c (k ? 0.4 : 0.6)) c.pass[k] = (c.v[k] + nx.v[k]) / 2;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    A: F32(N * 3), F: F32(N * 3), day: F32(N), cL: F32(N), cR: F32(N), lamp: F32(N),\n    amp: F32(NP), tgt: F32(NP), on: F32(NP), chiff: F32(NP), keys: F32(NP),\n    t: 0, beat: 0, fullT: 99, full: 0, fl: 1, fr: 1, s: 0, tr: 0,\n    ph1: rnd() * 6.28, ph2: rnd() * 6.28, ph: PHRASES[0], pi: 0, prev: [14, 11, 7, 0, 7, 9, 16],\n  });\n  build(P);\n  P.cur = chord(P);\n  P.nx = chord(P);\n  passing(P.cur, P.nx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  const s = (P.s = cl(k[0], 0, 1));\n  const tempo = cl(k[1], 0.2, 3);\n  const nv = cl(round(k[2]), 1, 6);\n  const tr = (P.tr = cl(k[3], 0, 1));\n  const t = (P.t += d);\n  P.beat += (d * tempo) / 2;\n  while (P.beat >= P.cur.at + P.cur.dur) {\n    const at = P.cur.at + P.cur.dur;\n    P.cur = P.nx;\n    P.cur.at = at;\n    P.nx = chord(P);\n    passing(P.cur, P.nx);\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.fullT = 0;\n  P.fullT += d;\n  P.full = P.fullT \u003c 2.8 ? sm(0, 0.06, P.fullT) : 1 - sm(2.8, 3.6, P.fullT);\n\n  // Which pipes speak: each part's note, the octave above from the\n  // principals on, and with the reeds the octave below, the twelfth and the\n  // fifteenth.\n  const c = P.cur, pos = P.beat - c.at, r4 = 0.8 * sm(0.3, 0.55, s), r2 = 0.75 * sm(0.7, 0.92, s);\n  P.tgt.fill(0);\n  P.keys.fill(0);\n  if (!(c.last && pos > c.dur - 0.22))\n    for (let n = 0; n \u003c= nv; n++) {\n      const v = VORD[n], g = v \u003c 4 && c.pass[v] >= 0 && pos >= c.dur / 2 ? c.pass[v] : c.v[v];\n      if (g \u003c 0) continue;\n      P.tgt[g] = 1;\n      if (v !== 3) P.keys[g] = 1;\n      if (g + 7 \u003c NP) P.tgt[g + 7] = max(P.tgt[g + 7], r4);\n      if (g >= 7) P.tgt[g - 7] = max(P.tgt[g - 7], r2);\n      if (g + 11 \u003c NP) P.tgt[g + 11] = max(P.tgt[g + 11], r2);\n      if (g + 14 \u003c NP) P.tgt[g + 14] = max(P.tgt[g + 14], r2);\n    }\n  for (let i = 0; i \u003c NP; i++) {\n    const g = max(P.tgt[i], 0.9 * P.full);\n    if (g > 0.5 && P.on[i] \u003c 0.5) P.chiff[i] = 1;\n    P.on[i] = g;\n    P.amp[i] += (g - P.amp[i]) * (1 - exp(-d / (g > P.amp[i] ? 0.035 : 0.14)));\n    P.chiff[i] *= exp(-d / 0.18);\n  }\n  // Candles in the draught: as the tremulant shakes the wind they flicker\n  // harder and burn lower.\n  const fa = 0.05 + tr;\n  const fl = (ph) => 1 - 0.4 * fa + fa * (0.6 * sin(t * 7.1 + ph) + 0.45 * sin(t * 11.9 + 2 * ph) + 0.35 * sin(t * 4.3 + 3 * ph) * sin(t * 17.3));\n  P.fl = cl(fl(0), 0.1, 2);\n  P.fr = cl(fl(2.1), 0.1, 2);\n}\n\n// A stop's colour, u from the mouth (0) to the top (1).\nfunction stopCol(out, s, u, full) {\n  for (let n = 0; n \u003c 3; n++) {\n    const v = s \u003c 0.5 ? mix(FLUTE[n], PRIN[n], s * 2) : mix(PRIN[n], mix(REED0[n], REED1[n], min(1, u * 1.6)), s * 2 - 1);\n    out[n] = mix(v, FULL[n], full);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { A, F, day, cL, cR, lamp, t } = P;\n  // The case in daylight, candlelight and lamplight.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const dl = day[i], cn = cL[i] * P.fl + cR[i] * P.fr, lp = lamp[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = A[o + n] * (DAY[n] * dl + CAN[n] * cn + LAMP[n] * lp);\n  }\n  // The rose window's light, cast long and slow across the case.\n  const px = 32 + 17 * sin(t * 0.05 + P.ph1), py = 60 + 34 * sin(t * 0.031 + P.ph2), RX = 15, RY = 24;\n  const I0 = 0.65 * (0.8 + 0.2 * sin(t * 0.23 + P.ph1));\n  for (let y = max(0, floor(py - RY)); y \u003c= min(H - 1, py + RY); y++)\n    for (let x = max(0, floor(px - RX)); x \u003c= min(W - 1, px + RX); x++) {\n      const dx = (x + 0.5 - px) / RX, dy = (y + 0.5 - py) / RY, r = sqrt(dx * dx + dy * dy);\n      if (r >= 1) continue;\n      const a = atan2(dy, dx) / (2 * PI) + 0.5;\n      let c, lead;\n      if (r \u003c 0.2) (c = AMBER), (lead = r > 0.15);\n      else if (r \u003c 0.5) {\n        const q = a * 8;\n        (c = floor(q) & 1 ? RUBY : SAPH), (lead = q - floor(q) \u003c 0.1 || r \u003c 0.24);\n      } else {\n        const q = a * 16;\n        (c = ROSE[floor(q) & 3]), (lead = q - floor(q) \u003c 0.08 || r \u003c 0.54);\n      }\n      const kk = I0 * (lead ? 0.45 : 1) * sm(1, 0.82, r), o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * c[n] * kk;\n    }\n  // The pipes that speak: the mouth lights and a standing wave shimmers up\n  // the body, its bands creeping upward and wavering with the tremulant.\n  const s = P.s, tr = P.tr, gain = 240 * (0.8 + 0.4 * s), bands = 2 + 4 * s, floor0 = 0.45 - 0.25 * s;\n  // Many pipes at once light the case less each, or the chord drowns in its own light.\n  let ns = 0;\n  for (let i = 0; i \u003c NP; i++) ns += P.amp[i];\n  const spread = (1 - 0.6 * P.full) / (1 + 0.12 * max(0, ns - 2));\n  const trem = sin(2 * PI * 5.4 * t), tm = 1 - 0.9 * tr * (0.5 + 0.5 * trem), wob = 0.3 * tr * trem;\n  const col = [0, 0, 0];\n  for (let i = 0; i \u003c NP; i++) {\n    const am = P.amp[i];\n    if (am \u003c 0.004) continue;\n    const { x, w, top, m, mh, base } = PIPES[i];\n    const a = am * gain * tm, span = m - top, osc = 0.7 + 0.3 * cos(t * (5 + 0.6 * i) + i * 1.7);\n    const bm = max(bands, 5 * P.full), creep = 0.3 * t + i * 0.37;\n    // Its light on the polished tin and the gilt round it.\n    stopCol(col, s, 0.4, P.full);\n    const kb = am * tm * (0.22 + 0.5 * s) * spread * 255;\n    for (let y = max(0, top - 10); y \u003c min(H, base + 6); y++) {\n      const ly = kb * (y \u003c top ? exp((y - top) / 4) : y > m ? exp((m - y) / 7) : 1);\n      for (let xx = max(0, x - 16); xx \u003c min(W, x + w + 16); xx++) {\n        const dd = xx \u003c x ? x - xx : xx >= x + w ? xx - x - w + 1 : 0, lb = ly / (1 + dd * dd * 0.05), o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * col[n] * lb;\n      }\n    }\n    for (let y = top; y \u003c m; y++) {\n      const u = (m - 0.5 - y) / span;\n      const bv = abs(cos(PI * (bm * u - creep + wob))) ** 2.5 * osc;\n      const g = a * (0.75 + 0.25 * exp(-3 * u)) * (floor0 + (1 - floor0) * bv);\n      stopCol(col, s, u, P.full);\n      for (let j = -2; j \u003c w + 2; j++) {\n        const xx = x + j;\n        if (xx \u003c 0 || xx >= W) continue;\n        const cr = j \u003c 0 || j >= w ? (j === -1 || j === w ? 0.2 : 0.07) : 0.6 + 0.4 * sin((PI * (j + 0.5)) / w);\n        const o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += col[n] * g * cr;\n      }\n    }\n    // The mouth: hot in the slot, flaring as the pipe speaks, and a glow round it.\n    stopCol(col, s, 0, P.full);\n    const cx = x + w / 2, cy = m + mh / 2, hot = a * (0.8 + 1.1 * P.chiff[i]);\n    for (let y = m - 4; y \u003c= m + mh + 4; y++)\n      for (let xx = x - 3; xx \u003c x + w + 3; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const e = ((xx + 0.5 - cx) / (w / 2 + 1.2)) ** 2 + ((y + 0.5 - cy) / 2.6) ** 2;\n        if (e > 3) continue;\n        const slot = y >= m && y \u003c m + mh && xx > x && xx \u003c x + w - 1;\n        const o = (y * W + xx) * 3, k = slot ? hot * 2 : hot * 0.5 * exp(-e * 1.3);\n        for (let n = 0; n \u003c 3; n++) F[o + n] += mix(col[n], 1, slot ? 0.7 : 0.2) * k;\n      }\n  }\n  // The candle flames, each with a halo in the air round it.\n  for (const [x, f] of [[10, P.fl], [53, P.fr]]) {\n    for (let y = 92; y \u003c= 100; y++)\n      for (let xx = x - 3; xx \u003c= x + 3; xx++) {\n        const e = (xx - x) ** 2 + ((y - 96.5) * 0.8) ** 2, o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += CAN[n] * 0.45 * f * exp(-e / 3);\n      }\n    for (const [y, c, k] of [[97, [255, 250, 225], 1], [96, [255, 236, 160], min(1, f)], [95, [255, 190, 80], cl(f, 0, 1)], [94, [255, 120, 30], cl(f - 0.8, 0, 1)]]) {\n      const o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = max(F[o + n], c[n] * k);\n    }\n  }\n  // Keys held down on the manual.\n  for (let i = 0; i \u003c NP; i++)\n    if (P.keys[i] > 0)\n      for (let y = 121; y \u003c= 125; y++)\n        for (let x = 3 * (i + 1); x \u003c 3 * (i + 1) + 2; x++) {\n          const o = (y * W + x) * 3;\n          for (let n = 0; n \u003c 3; n++) F[o + n] *= y === 125 ? 0.35 : 0.6;\n        }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, knee(F[o]), knee(F[o + 1]), knee(F[o + 2]));\n}\n\n// Light past 180 rolls off towards 255, so a speaking pipe keeps its colour.\nfunction knee(v) {\n  return (v \u003c 180 ? v : 255 - 75 * exp(-(v - 180) / 75)) | 0;\n}\n","layer":{"id":"layer-pipe-organ","type":"code","name":"pipe-organ","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pipe Organ\n// Family:  music\n// Idea:    The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower-and-flat fronts of North German Baroque organ cases and four-part chorale harmony\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1\n//\n// Knob 1: Stops. The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too.\n// Knob 2: Tempo. At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one.\n// Knob 3: Voices. How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord.\n// Knob 4: Tremulant. The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them.\n// Buttons: K1 tap is full organ: every pipe in the front speaks at once for about three seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Pipe d sounds the d-th note of a major scale up from the longest pipe, and\n// an open pipe halves its length each octave.\nconst STEP = [0, 2, 4, 5, 7, 9, 11];\nconst len = (d) => 92 * 2 ** (-(12 * floor(d / 7) + STEP[d % 7]) / 12);\n// The front: the lowest note in the middle of the centre tower, then pairs,\n// the lower note left and the next one right, as the C and C sharp chests of\n// a real case split a scale between the two sides.\nconst PIPES = [];\nfunction pair(d, x, w, top, mouth, base) {\n  const L = d ? (len(d) + len(d + 1)) / 2 : len(0);\n  const t = round(top >= 0 ? top : mouth - L);\n  const m = round(top >= 0 ? top + L : mouth);\n  const mh = w >= 5 ? 2 : 1;\n  PIPES[d] = { x, w, top: t, m, mh, f0: m + mh + 1, base };\n  if (d) PIPES[d + 1] = { x: W - x - w, w, top: t, m, mh, f0: m + mh + 1, base };\n}\n// The centre tower and the side towers hang from their crowns, so their\n// mouths step; the flats stand on equal feet, so their tops ramp.\npair(0, 29, 6, 9, 0, 110);\npair(1, 23, 5, 12, 0, 110);\npair(3, 1, 4, 30, 0, 110);\npair(5, 6, 4, 38, 0, 110);\npair(7, 19, 3, -1, 102, 110);\npair(9, 15, 3, -1, 102, 110);\npair(11, 11, 3, -1, 102, 110);\npair(13, 19, 3, -1, 44, 50);\npair(15, 15, 3, -1, 44, 50);\npair(17, 11, 3, -1, 44, 50);\nconst NP = 19;\n\n// Eight-chord phrases on the scale's chords, I = 0 to vi = 5. The first one\n// always opens the piece.\nconst PHRASES = [\n  [0, 4, 5, 3, 0, 1, 4, 0],\n  [0, 5, 1, 4, 0, 3, 4, 0],\n  [5, 3, 0, 4, 5, 1, 4, 4],\n  [0, 3, 0, 4, 5, 1, 4, 0],\n  [3, 4, 0, 5, 1, 0, 4, 0],\n  [0, 2, 5, 3, 1, 4, 4, 0],\n];\n// Voices in the order the knob adds them: soprano, bass, alto, tenor, then\n// three that fill the chord.\nconst VORD = [0, 3, 1, 2, 4, 5, 6];\n\n// Surfaces, as how much of each light they give back.\nconst TIN = [0.9, 0.95, 1];\nconst WOOD = [0.42, 0.25, 0.15];\nconst GILT = [1.3, 1, 0.42];\nconst DARK = [0.07, 0.05, 0.045];\nconst STONE = [0.9, 0.88, 0.84];\n// Grey daylight from the nave, the candles, and the lamp on the music desk.\nconst DAY = [56, 56, 64];\nconst CAN = [200, 126, 58];\nconst LAMP = [255, 210, 140];\n// The rose window's glass.\nconst RUBY = [230, 40, 60];\nconst SAPH = [50, 90, 255];\nconst AMBER = [255, 200, 80];\nconst GREEN = [60, 200, 110];\nconst ROSE = [RUBY, SAPH, GREEN, SAPH];\n// Stop colours: flute, principal, reed at the mouth and up the body, full organ.\nconst FLUTE = [0.35, 0.62, 1];\nconst PRIN = [0.84, 0.9, 1];\nconst REED0 = [1, 0.77, 0.27];\nconst REED1 = [1, 0.2, 0.08];\nconst FULL = [1, 0.86, 0.58];\n\n// Round tin: a highlight a third of the way across and a dark far edge.\nfunction shade(p) {\n  return (0.2 + 0.5 * sin(PI * p) ** 0.7 + 0.55 * exp(-(((p - 0.36) / 0.14) ** 2))) * (1.1 - 0.4 * p);\n}\n\n// Carved and gilt pipe shades: pierced scrolls.\nfunction fret(x, y) {\n  return sin(x * 1.25 + 2 * sin(y * 0.52)) * sin(y * 0.9 + 1.6 * sin(x * 0.61));\n}\n\nfunction build(P) {\n  const A = P.A;\n  const put = (x, y, c, k = 1, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    for (let n = 0; n \u003c 3; n++) A[o + n] = mix(A[o + n], c[n] * k, a);\n  };\n  // Left half and its mirror.\n  const two = (x, y, c, k, a) => (put(x, y, c, k, a), put(W - 1 - x, y, c, k, a));\n  const row = (x0, x1, y, c, k) => {\n    for (let x = x0; x \u003c= x1; x++) two(x, y, c, k);\n  };\n  // The church wall: courses of ashlar.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cs = floor(y / 5), off = (cs & 1) * 4, mortar = y % 5 === 4 || (x + off) % 8 === 7;\n      put(x, y, STONE, mortar ? 0.14 : 0.27 + 0.1 * hash(floor((x + off) / 8), cs));\n    }\n  // The case, dark inside.\n  for (let y = 0; y \u003c 114; y++) for (let x = 0; x \u003c 32; x++) if (x > 21 || (x > 9 ? y >= 11 : y >= 22)) two(x, y, DARK, 1);\n  // Stiles between the towers and the flats.\n  for (const [x, y0] of [[0, 30], [10, 16], [22, 9]]) for (let y = y0; y \u003c 110; y++) two(x, y, WOOD, 1.05 + 0.15 * sin(y * 0.8) * (y % 12 \u003c 2 ? 1 : 0));\n  // The side towers' crowns, each with a gilt urn and a flame on top.\n  row(0, 10, 29, GILT, 0.9);\n  for (let y = 26; y \u003c= 28; y++) row(0, 10, y, WOOD, 0.9);\n  for (const x of [2, 5, 8]) two(x, 27, GILT, 1.05);\n  row(0, 10, 25, GILT, 1.05);\n  row(0, 10, 24, WOOD, 0.7);\n  row(0, 10, 23, WOOD, 1);\n  row(0, 10, 22, GILT, 1.15);\n  const URN = [[21, 2], [20, 1], [19, 2], [18, 2], [17, 1], [16, 0], [15, 1], [14, 0]];\n  for (const [y, r] of URN) for (let x = 5 - r; x \u003c= 5 + r; x++) two(x, y, GILT, 1.15 - 0.18 * (x - 5 + r));\n  // The upper flats' cornice and a scroll pediment.\n  row(10, 22, 15, GILT, 0.9);\n  for (let y = 12; y \u003c= 14; y++) for (let x = 10; x \u003c= 22; x++) two(x, y, WOOD, y === 13 && x % 2 ? 1.25 : 0.9);\n  row(10, 22, 11, GILT, 1.1);\n  row(12, 20, 10, GILT, 0.75);\n  for (const [x, y] of [[12, 9], [13, 9], [19, 9], [20, 9], [14, 8], [15, 8], [17, 8], [18, 8], [16, 7], [16, 6]]) two(x, y, GILT, 1.05);\n  // The centre tower's crown, with a carved crest over it.\n  row(22, 31, 8, GILT, 0.95);\n  for (let y = 5; y \u003c= 7; y++) for (let x = 22; x \u003c= 31; x++) two(x, y, x % 4 === 1 && y === 6 ? GILT : WOOD, x % 4 === 1 && y === 6 ? 1.1 : 0.9);\n  row(22, 31, 4, GILT, 1.1);\n  for (let x = 23; x \u003c= 31; x++) {\n    const h = 4 * (1 - ((x - 31.5) / 9) ** 2);\n    for (let y = floor(4 - h); y \u003c 4; y++) if (fret(x, y + 3) > -0.2 || x === 31) two(x, y, GILT, x === 31 ? 1.25 : 0.8 + 0.3 * fret(x, y));\n  }\n  // Pipe shades over every pipe that stops short of the carving above it.\n  const GAP = [5, 14, 18, 28, 35, 45, 49, 58];\n  for (const q of PIPES) {\n    const y0 = q.base === 50 ? 16 : q.x === 1 || q.x === 6 || q.x > 53 ? 30 : q.x > 22 && q.x \u003c 41 ? 9 : 54;\n    for (let x = q.x - 1; x \u003c= q.x + q.w; x++) {\n      const own = x >= q.x && x \u003c q.x + q.w;\n      if (own || GAP.indexOf(x) >= 0)\n        for (let y = y0; y \u003c q.top; y++) {\n          const v = fret(x, y);\n          if (own && y === q.top - 1) put(x, y, GILT, 1.05);\n          else if (v > -0.1) put(x, y, GILT, 0.55 + 0.5 * v);\n        }\n    }\n  }\n  // Under the lower flats the pipe shades of the upper ones, and the shelf they stand on.\n  row(10, 22, 50, GILT, 0.95);\n  row(10, 22, 51, WOOD, 1);\n  row(10, 22, 52, WOOD, 0.9);\n  row(10, 22, 53, WOOD, 0.55);\n  // The pipes: body, mouth with its lips, and the conical foot.\n  for (const q of PIPES) {\n    const { x, w, top, m, mh, f0, base } = q;\n    for (let y = top; y \u003c m; y++) for (let j = 0; j \u003c w; j++) put(x + j, y, TIN, shade((j + 0.5) / w) * (y === top ? 0.7 : 1));\n    for (let j = 0; j \u003c w; j++) {\n      const inner = j > 0 && j \u003c w - 1, s = shade((j + 0.5) / w);\n      if (inner) put(x + j, m - 1, TIN, s * 1.3);\n      for (let y = m; y \u003c m + mh; y++) put(x + j, y, inner ? DARK : TIN, inner ? 0.8 : s);\n      put(x + j, m + mh, TIN, s * (inner ? 1.15 : 0.9));\n    }\n    if (w >= 5) for (let j = floor((w - 1) / 2); j \u003c= floor(w / 2); j++) put(x + j, m - 2, TIN, 1.25);\n    const cx = x + w / 2;\n    for (let y = f0; y \u003c base; y++) {\n      const hw = mix(w / 2, 0.7, (y - f0) / max(1, base - 1 - f0));\n      for (let xx = floor(cx - hw); xx \u003c= cx + hw; xx++) {\n        const cov = cl(hw - abs(xx + 0.5 - cx) + 0.5, 0, 1);\n        put(xx, y, TIN, 0.9 * shade(cl((xx + 0.5 - cx + hw) / (2 * hw), 0, 1)), cov);\n      }\n    }\n  }\n  // The impost the pipes stand on.\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 110, GILT, 1);\n    put(x, 111, WOOD, x % 16 === 0 ? 0.6 : 1);\n    put(x, 112, WOOD, x % 16 === 0 ? 0.6 : 0.95);\n    put(x, 113, WOOD, 0.5);\n  }\n  // Candles on the stiles between the side towers and the flats.\n  for (let y = 98; y \u003c= 101; y++) two(10, y, [0.95, 0.9, 0.8], 0.5);\n  for (let x = 9; x \u003c= 11; x++) two(x, 102, GILT, 0.6);\n  // The console: the music desk with its lamp, and one manual.\n  for (let y = 114; y \u003c H; y++) for (let x = 0; x \u003c W; x++) put(x, y, WOOD, 0.7);\n  for (let y = 114; y \u003c= 119; y++) for (let x = 16; x \u003c= 47; x++) put(x, y, WOOD, 0.85);\n  for (let y = 115; y \u003c= 119; y++)\n    for (let x = 21; x \u003c= 42; x++) put(x, y, [0.95, 0.9, 0.76], y === 116 || y === 118 ? 0.62 : hash(x, y) \u003c 0.13 ? 0.3 : 1);\n  for (let x = 27; x \u003c= 36; x++) put(x, 114, GILT, 1.15);\n  for (let k = 0; k \u003c 21; k++) {\n    for (let y = 121; y \u003c= 125; y++) for (let x = 3 * k; x \u003c 3 * k + 2; x++) put(x, y, [0.92, 0.88, 0.78], y === 125 ? 0.7 : 1);\n    const n = (k + 6) % 7;\n    if (k \u003c 20 && n !== 2 && n !== 6) for (let y = 121; y \u003c= 123; y++) put(3 * k + 2, y, DARK, 1), put(3 * k + 3, y, DARK, 1);\n  }\n  // Light: grey daylight from above, warm candlelight, the desk lamp.\n  for (let i = 0; i \u003c N; i++) {\n    const x = (i & 63) + 0.5, y = (i >> 6) + 0.5;\n    P.day[i] = 0.45 + 0.55 * (1 - y / H) ** 1.3;\n    P.cL[i] = 0.85 / (1 + ((x - 10.5) ** 2 + (y - 96) ** 2) / 450);\n    P.cR[i] = 0.85 / (1 + ((x - 53.5) ** 2 + (y - 96) ** 2) / 450);\n    P.lamp[i] = y > 115 ? 1.1 / (1 + (x - 32) ** 2 / 90 + (y - 115) ** 2 / 40) : 0.45 / (1 + ((x - 32) ** 2 + (y - 114) ** 2) / 140);\n  }\n}\n\n// The nearest scale degree in lo..hi under cap whose note is in pcs, moving\n// from prev, sitting still costing `same`.\nfunction near(lo, hi, pcs, prev, same, cap) {\n  let best = -1;\n  let bs = 1e9;\n  for (let d = lo; d \u003c= hi; d++) {\n    if (d >= cap || pcs.indexOf(d % 7) \u003c 0) continue;\n    const j = abs(d - prev), s = j + (j === 0 ? same : 0) + (j > 4 ? 2 : 0) + rnd() * 0.9;\n    if (s \u003c bs) (bs = s), (best = d);\n  }\n  return best \u003c 0 ? (cap \u003c 99 ? near(lo, hi, pcs, prev, same, 99) : prev) : best;\n}\n\n// The next chord of the chorale, voiced from the last one.\nfunction chord(P) {\n  if (P.pi >= P.ph.length) (P.ph = PHRASES[floor(rnd() * PHRASES.length)]), (P.pi = 0);\n  const r = P.ph[P.pi++], last = P.pi === P.ph.length, pen = P.pi === P.ph.length - 1;\n  const T = [r, (r + 2) % 7, (r + 4) % 7];\n  if (pen && r === 4 && rnd() \u003c 0.6) T.push(3);\n  const [s0, a0, t0, b0] = P.prev;\n  const B = near(0, 7, [!last && !pen && rnd() \u003c 0.3 ? T[1] : r], b0, 0, 99);\n  const S = near(11, 18, last && r === 0 ? [0] : T, s0, 1.6, 99);\n  const A = near(8, 14, T, a0, 0.4, S);\n  const miss = T.filter((c) => c !== S % 7 && c !== A % 7 && c !== B % 7);\n  const Tn = near(4, 11, miss.length ? miss : T, t0, 0.4, A);\n  const v = [S, A, Tn, B];\n  // Three more parts fill the chord: the bass an octave up, one in the middle, one high.\n  for (const goal of [B + 7, 10, 16]) {\n    let best = -1;\n    let bs = 1e9;\n    for (let d = 0; d \u003c NP; d++) {\n      const s = abs(d - goal) + rnd() * 0.5;\n      if (T.indexOf(d % 7) >= 0 && v.indexOf(d) \u003c 0 && s \u003c bs) (bs = s), (best = d);\n    }\n    v.push(best);\n  }\n  P.prev = v;\n  return { v, dur: last ? 2 : 1, last, pass: [-1, -1, -1, -1], at: 0 };\n}\n\n// A part moving a third walks through the note between on the half beat.\nfunction passing(c, nx) {\n  if (c.last) return;\n  for (let k = 0; k \u003c 4; k++) if (abs(nx.v[k] - c.v[k]) === 2 && rnd() \u003c (k ? 0.4 : 0.6)) c.pass[k] = (c.v[k] + nx.v[k]) / 2;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    A: F32(N * 3), F: F32(N * 3), day: F32(N), cL: F32(N), cR: F32(N), lamp: F32(N),\n    amp: F32(NP), tgt: F32(NP), on: F32(NP), chiff: F32(NP), keys: F32(NP),\n    t: 0, beat: 0, fullT: 99, full: 0, fl: 1, fr: 1, s: 0, tr: 0,\n    ph1: rnd() * 6.28, ph2: rnd() * 6.28, ph: PHRASES[0], pi: 0, prev: [14, 11, 7, 0, 7, 9, 16],\n  });\n  build(P);\n  P.cur = chord(P);\n  P.nx = chord(P);\n  passing(P.cur, P.nx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  const s = (P.s = cl(k[0], 0, 1));\n  const tempo = cl(k[1], 0.2, 3);\n  const nv = cl(round(k[2]), 1, 6);\n  const tr = (P.tr = cl(k[3], 0, 1));\n  const t = (P.t += d);\n  P.beat += (d * tempo) / 2;\n  while (P.beat >= P.cur.at + P.cur.dur) {\n    const at = P.cur.at + P.cur.dur;\n    P.cur = P.nx;\n    P.cur.at = at;\n    P.nx = chord(P);\n    passing(P.cur, P.nx);\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.fullT = 0;\n  P.fullT += d;\n  P.full = P.fullT \u003c 2.8 ? sm(0, 0.06, P.fullT) : 1 - sm(2.8, 3.6, P.fullT);\n\n  // Which pipes speak: each part's note, the octave above from the\n  // principals on, and with the reeds the octave below, the twelfth and the\n  // fifteenth.\n  const c = P.cur, pos = P.beat - c.at, r4 = 0.8 * sm(0.3, 0.55, s), r2 = 0.75 * sm(0.7, 0.92, s);\n  P.tgt.fill(0);\n  P.keys.fill(0);\n  if (!(c.last && pos > c.dur - 0.22))\n    for (let n = 0; n \u003c= nv; n++) {\n      const v = VORD[n], g = v \u003c 4 && c.pass[v] >= 0 && pos >= c.dur / 2 ? c.pass[v] : c.v[v];\n      if (g \u003c 0) continue;\n      P.tgt[g] = 1;\n      if (v !== 3) P.keys[g] = 1;\n      if (g + 7 \u003c NP) P.tgt[g + 7] = max(P.tgt[g + 7], r4);\n      if (g >= 7) P.tgt[g - 7] = max(P.tgt[g - 7], r2);\n      if (g + 11 \u003c NP) P.tgt[g + 11] = max(P.tgt[g + 11], r2);\n      if (g + 14 \u003c NP) P.tgt[g + 14] = max(P.tgt[g + 14], r2);\n    }\n  for (let i = 0; i \u003c NP; i++) {\n    const g = max(P.tgt[i], 0.9 * P.full);\n    if (g > 0.5 && P.on[i] \u003c 0.5) P.chiff[i] = 1;\n    P.on[i] = g;\n    P.amp[i] += (g - P.amp[i]) * (1 - exp(-d / (g > P.amp[i] ? 0.035 : 0.14)));\n    P.chiff[i] *= exp(-d / 0.18);\n  }\n  // Candles in the draught: as the tremulant shakes the wind they flicker\n  // harder and burn lower.\n  const fa = 0.05 + tr;\n  const fl = (ph) => 1 - 0.4 * fa + fa * (0.6 * sin(t * 7.1 + ph) + 0.45 * sin(t * 11.9 + 2 * ph) + 0.35 * sin(t * 4.3 + 3 * ph) * sin(t * 17.3));\n  P.fl = cl(fl(0), 0.1, 2);\n  P.fr = cl(fl(2.1), 0.1, 2);\n}\n\n// A stop's colour, u from the mouth (0) to the top (1).\nfunction stopCol(out, s, u, full) {\n  for (let n = 0; n \u003c 3; n++) {\n    const v = s \u003c 0.5 ? mix(FLUTE[n], PRIN[n], s * 2) : mix(PRIN[n], mix(REED0[n], REED1[n], min(1, u * 1.6)), s * 2 - 1);\n    out[n] = mix(v, FULL[n], full);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { A, F, day, cL, cR, lamp, t } = P;\n  // The case in daylight, candlelight and lamplight.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const dl = day[i], cn = cL[i] * P.fl + cR[i] * P.fr, lp = lamp[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = A[o + n] * (DAY[n] * dl + CAN[n] * cn + LAMP[n] * lp);\n  }\n  // The rose window's light, cast long and slow across the case.\n  const px = 32 + 17 * sin(t * 0.05 + P.ph1), py = 60 + 34 * sin(t * 0.031 + P.ph2), RX = 15, RY = 24;\n  const I0 = 0.65 * (0.8 + 0.2 * sin(t * 0.23 + P.ph1));\n  for (let y = max(0, floor(py - RY)); y \u003c= min(H - 1, py + RY); y++)\n    for (let x = max(0, floor(px - RX)); x \u003c= min(W - 1, px + RX); x++) {\n      const dx = (x + 0.5 - px) / RX, dy = (y + 0.5 - py) / RY, r = sqrt(dx * dx + dy * dy);\n      if (r >= 1) continue;\n      const a = atan2(dy, dx) / (2 * PI) + 0.5;\n      let c, lead;\n      if (r \u003c 0.2) (c = AMBER), (lead = r > 0.15);\n      else if (r \u003c 0.5) {\n        const q = a * 8;\n        (c = floor(q) & 1 ? RUBY : SAPH), (lead = q - floor(q) \u003c 0.1 || r \u003c 0.24);\n      } else {\n        const q = a * 16;\n        (c = ROSE[floor(q) & 3]), (lead = q - floor(q) \u003c 0.08 || r \u003c 0.54);\n      }\n      const kk = I0 * (lead ? 0.45 : 1) * sm(1, 0.82, r), o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * c[n] * kk;\n    }\n  // The pipes that speak: the mouth lights and a standing wave shimmers up\n  // the body, its bands creeping upward and wavering with the tremulant.\n  const s = P.s, tr = P.tr, gain = 240 * (0.8 + 0.4 * s), bands = 2 + 4 * s, floor0 = 0.45 - 0.25 * s;\n  // Many pipes at once light the case less each, or the chord drowns in its own light.\n  let ns = 0;\n  for (let i = 0; i \u003c NP; i++) ns += P.amp[i];\n  const spread = (1 - 0.6 * P.full) / (1 + 0.12 * max(0, ns - 2));\n  const trem = sin(2 * PI * 5.4 * t), tm = 1 - 0.9 * tr * (0.5 + 0.5 * trem), wob = 0.3 * tr * trem;\n  const col = [0, 0, 0];\n  for (let i = 0; i \u003c NP; i++) {\n    const am = P.amp[i];\n    if (am \u003c 0.004) continue;\n    const { x, w, top, m, mh, base } = PIPES[i];\n    const a = am * gain * tm, span = m - top, osc = 0.7 + 0.3 * cos(t * (5 + 0.6 * i) + i * 1.7);\n    const bm = max(bands, 5 * P.full), creep = 0.3 * t + i * 0.37;\n    // Its light on the polished tin and the gilt round it.\n    stopCol(col, s, 0.4, P.full);\n    const kb = am * tm * (0.22 + 0.5 * s) * spread * 255;\n    for (let y = max(0, top - 10); y \u003c min(H, base + 6); y++) {\n      const ly = kb * (y \u003c top ? exp((y - top) / 4) : y > m ? exp((m - y) / 7) : 1);\n      for (let xx = max(0, x - 16); xx \u003c min(W, x + w + 16); xx++) {\n        const dd = xx \u003c x ? x - xx : xx >= x + w ? xx - x - w + 1 : 0, lb = ly / (1 + dd * dd * 0.05), o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * col[n] * lb;\n      }\n    }\n    for (let y = top; y \u003c m; y++) {\n      const u = (m - 0.5 - y) / span;\n      const bv = abs(cos(PI * (bm * u - creep + wob))) ** 2.5 * osc;\n      const g = a * (0.75 + 0.25 * exp(-3 * u)) * (floor0 + (1 - floor0) * bv);\n      stopCol(col, s, u, P.full);\n      for (let j = -2; j \u003c w + 2; j++) {\n        const xx = x + j;\n        if (xx \u003c 0 || xx >= W) continue;\n        const cr = j \u003c 0 || j >= w ? (j === -1 || j === w ? 0.2 : 0.07) : 0.6 + 0.4 * sin((PI * (j + 0.5)) / w);\n        const o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += col[n] * g * cr;\n      }\n    }\n    // The mouth: hot in the slot, flaring as the pipe speaks, and a glow round it.\n    stopCol(col, s, 0, P.full);\n    const cx = x + w / 2, cy = m + mh / 2, hot = a * (0.8 + 1.1 * P.chiff[i]);\n    for (let y = m - 4; y \u003c= m + mh + 4; y++)\n      for (let xx = x - 3; xx \u003c x + w + 3; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const e = ((xx + 0.5 - cx) / (w / 2 + 1.2)) ** 2 + ((y + 0.5 - cy) / 2.6) ** 2;\n        if (e > 3) continue;\n        const slot = y >= m && y \u003c m + mh && xx > x && xx \u003c x + w - 1;\n        const o = (y * W + xx) * 3, k = slot ? hot * 2 : hot * 0.5 * exp(-e * 1.3);\n        for (let n = 0; n \u003c 3; n++) F[o + n] += mix(col[n], 1, slot ? 0.7 : 0.2) * k;\n      }\n  }\n  // The candle flames, each with a halo in the air round it.\n  for (const [x, f] of [[10, P.fl], [53, P.fr]]) {\n    for (let y = 92; y \u003c= 100; y++)\n      for (let xx = x - 3; xx \u003c= x + 3; xx++) {\n        const e = (xx - x) ** 2 + ((y - 96.5) * 0.8) ** 2, o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += CAN[n] * 0.45 * f * exp(-e / 3);\n      }\n    for (const [y, c, k] of [[97, [255, 250, 225], 1], [96, [255, 236, 160], min(1, f)], [95, [255, 190, 80], cl(f, 0, 1)], [94, [255, 120, 30], cl(f - 0.8, 0, 1)]]) {\n      const o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = max(F[o + n], c[n] * k);\n    }\n  }\n  // Keys held down on the manual.\n  for (let i = 0; i \u003c NP; i++)\n    if (P.keys[i] > 0)\n      for (let y = 121; y \u003c= 125; y++)\n        for (let x = 3 * (i + 1); x \u003c 3 * (i + 1) + 2; x++) {\n          const o = (y * W + x) * 3;\n          for (let n = 0; n \u003c 3; n++) F[o + n] *= y === 125 ? 0.35 : 0.6;\n        }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, knee(F[o]), knee(F[o + 1]), knee(F[o + 2]));\n}\n\n// Light past 180 rolls off towards 255, so a speaking pipe keeps its colour.\nfunction knee(v) {\n  return (v \u003c 180 ? v : 255 - 75 * exp(-(v - 180) / 75)) | 0;\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stops","min":0,"max":1,"about":"The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too."},{"name":"Tempo","min":0.2,"max":3,"about":"At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one."},{"name":"Voices","min":1,"max":6,"about":"How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord."},{"name":"Tremulant","min":0,"max":1,"about":"The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them."}],"start":[0,2,1,0.06],"measures":{"motion":0.1017,"detail":0.1071,"edges":0.5078,"complexity":2.0828,"coverage":0.7769,"colour":0.1713,"drift":0.0578},"knobResponse":[0.0627,0.0467,0.0469,0.0424]},{"slug":"plait","title":"Plait","family":"textile","round":15,"note":"세 가닥이 바깥 가닥부터 가운데 위로 넘어가며 땋여 내려가요. 밑으로 들어가는 가닥은 어둡고, 다 땋으면 리본을 묶고 다음 가닥이 내려와요. K3 이 일곱 가닥 납작 땋기까지 가요.","idea":"Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.","buttons":"K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.","code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","layer":{"id":"layer-plait","type":"code","name":"plait","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the strands' colours together, starting from teal, blue and magenta."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds."},{"name":"Strands","min":3,"max":7,"about":"3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge."},{"name":"Tension","min":0,"max":1,"about":"At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7."}],"start":[0,2,3,0.06],"measures":{"motion":1.0033,"detail":0.0467,"edges":0.1711,"complexity":1.4043,"coverage":0.7414,"colour":0.4415,"drift":0.2976},"knobResponse":[0.2929,0.2273,0.2358,0.2751]},{"slug":"player-piano","title":"Player Piano","family":"music","round":15,"note":"자동 피아노의 구멍 뚫린 종이 두루마리가 내려와요. 구멍이 트래커 바를 지날 때마다 발치의 건반이 눌려 빛나요. 곡은 패턴이 그 자리에서 지어서, 화음은 가로줄로, 펼친 화음은 사선으로 읽혀요.","idea":"A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.","buttons":"K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.","code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-player-piano","type":"code","name":"player-piano","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the parts together, starting from a gold tune over a blue bass."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210."},{"name":"Hands","min":2,"max":5,"about":"2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next."},{"name":"Pedal","min":0,"max":1,"about":"At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise."}],"start":[0,2,2,0.06],"measures":{"motion":0.3229,"detail":0.0822,"edges":0.6181,"complexity":0.1256,"coverage":0.9461,"colour":0.1765,"drift":0.0751},"knobResponse":[0.0626,0.0796,0.0519,0.0503]},{"slug":"pole-vault","title":"Pole Vault","family":"sport","round":26,"note":"밤 경기장에서 카메라가 장대를 든 선수를 따라 달리고, 활처럼 휜 장대를 타고 거꾸로 오른 선수가 패널 꼭대기 가까운 가로대를 넘어 매트에 떨어지면 심판이 흰 깃발이나 빨간 깃발을 들어요. K3 이 가로대를 5.00 m 에서 6.20 m 까지 올리고, 누르면 다음 선수가 바로 달려요.","idea":"A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.","buttons":"K1 tap sends the next vaulter down the runway now.","code":"// ===== Patternflow pattern =====\n// Title:   Pole Vault\n// Family:  sport\n// Idea:    A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the pole vault in athletics\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1\n//\n// Knob 1: Colour. The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour.\n// Knob 2: Speed. Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2.\n// Knob 3: Bar. The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses.\n// Knob 4: Wind. Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run.\n// Buttons: K1 tap sends the next vaulter down the runway now.\n\nconst W = 64, H = 128, N = W * H;\n// The runway (GY), the pole's tip in the box, 14 rows a metre. A point z LEDs\n// nearer the camera lands OBX right and OBY down. The standards stand XS past\n// the box, ZS either side; the mat starts at MAT0, MZ either side, MH tall.\nconst GY = 104, BOXY = GY + 2, PXM = 14, OBX = 0.55, OBY = 0.22, XS = 5, ZS = 13, MAT0 = 3, MZ = 11, MH = 9;\n// The camera's left edge on the bar, gravity at Speed 2, the body.\nconst CAMF = -26, G = 170, TORSO = 4.2, ARM = 5, LEG = 3.3, TACC = 0.7, TA = 1.25, PSI1 = 1.64;\nconst [SET, RUN, POLE, FLY, MAT] = [0, 1, 2, 3, 4];\n// The stands texture: CW columns that wrap, rows ST to 83.\nconst CW = 256, ST = 17, CH = 84 - ST;\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, asin, acos, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst lerp = (a, b, u) => a + (b - a) * u;\nconst rnd = () => Math.random();\n// A camera flash somewhere in the stands.\nconst flash = (t0) => ({ x: floor(rnd() * W), y: ST + 2 + floor(rnd() * 64), t0 });\nconst F = (n) => new Float32Array(n);\nconst hash = (a, b) => ((Math.imul(a * 7919 + b * 104729, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\nconst md = (a, m) => ((a % m) + m) % m;\nconst sc3 = (c, k, o = 0) => [c[0] * k + o, c[1] * k + o, c[2] * k + o];\nlet C = null;\nconst put = (x, y, c) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && C.set(c, (y * W + x) * 3);\n\n// Poses: [time, body angle, arm, near hip, near knee, far hip, far knee]. On\n// the pole the body rocks back to head-down (-PI); after the half turn it\n// goes on the other way, face down over the bar and onto the back.\nconst TAKE = [1.5, 1.6, -0.5, 0.3];\nconst VAULT = [[0, 0.08, 0.15, 1.5, 1.6, -0.5, 0.3], [0.2, -0.3, 0.25, 1.1, 1.3, 0.6, 0.2], [0.42, -1.25, 0.4, 2.1, 1.8, 2, 1.5], [0.62, -2.4, 0.9, 0.9, 0.5, 0.8, 0.4], [0.82, -3.05, 2.5, 0.2, 0.05, 0.15, 0.05], [1, -3.14, 0.35, 0.1, 0, 0.1, 0]];\nconst FLYK = [[0, PI, 0.35, 0.1, 0, 0.1, 0], [1, 1.39 * PI, 0.4, 0.7, 0.4, 0.6, 0.5], [1.4, 1.95 * PI, 0.5, 0.6, 0.3, 0.5, 0.4], [2, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8]];\nconst MATK = [[0, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8], [0.4, 2.5 * PI, 1.7, 0.8, 0.9, 0.7, 1], [0.95, 2 * PI + 0.15, 2.7, 1.5, 1.8, 1.4, 1.7]];\nfunction key(T, u, out) {\n  let j = 0;\n  while (j \u003c T.length - 2 && u > T[j + 1][0]) j++;\n  const a = T[j], b = T[j + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  for (let i = 1; i \u003c 7; i++) out[i - 1] = a[i] + (b[i] - a[i]) * f;\n  return out;\n}\n// How far below the hip the lower foot is, for a body leaning th.\nconst drop = (th, L) => LEG * max(cos(th - L[0]) + cos(th - L[0] + L[1]), cos(th - L[2]) + cos(th - L[2] + L[3]));\n\n// Built once: the stands, two LEDs a seat in rows three deep, aisles, empty\n// seats in the team colour, the upper tier in the roof's shadow; the glare.\nfunction build(S) {\n  const cr = F(CW * CH * 3), seat = F(CW * CH), glare = F(30 * 128);\n  for (let y = 0; y \u003c CH; y++) {\n    const lo = y + ST >= 52, ty = y + ST - (lo ? 52 : ST), band = ty % 3, tier = floor(ty / 3) + lo * 40;\n    const li = lo ? 0.62 + (0.38 * ty) / 31 : 0.3 + (0.42 * ty) / 29;\n    for (let x = 0, sn = 0; x \u003c CW; x++, sn = x >> 1) {\n      let c = x % 48 \u003c 2 ? [58, 58, 64] : [20, 20, 25];\n      if (x % 48 > 1 && band \u003c 2)\n        if (hash(sn, tier) > 0.8) (seat[y * CW + x] = (0.24 + 0.08 * band) * li), (c = [3, 3, 4]);\n        else c = band ? sc3(hsv(hash(sn * 3, tier), 0.55, 0.2 + 0.14 * hash(tier, sn)), 255) : x & 1 ? [14, 11, 10] : hash(sn, tier + 99) \u003c 0.5 ? [112, 78, 58] : [60, 42, 32];\n      cr.set(sc3(c, li), (y * CW + x) * 3);\n    }\n  }\n  for (let i = 0; i \u003c 30 * 128; i++) {\n    const dx = (i % 128) - 64, dy = floor(i / 128) - 3.5, d2 = dx * dx + dy * dy;\n    glare[i] = 70 * exp(-d2 / 16) + 30 * exp(-d2 / 110) + 30 * exp(-dy * dy / 1.5 - abs(dx) / 12);\n  }\n  Object.assign(S, { cr, seat, glare });\n}\n\nexport function setup(params) {\n  const S = { t: 0, ph: SET, pt: 0, tset: 1.95, n: 0, notch: 0, miss: 0, base: 5, by: 34, cam: CAMF, wind: 0, hk: 0.13, marks: [], hudF: 0, verdict: 0, done: 0 };\n  Object.assign(S, { clear: true, fig: null, free: null, flashes: [], C: F(N * 3), q: F(6) });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  build(S);\n  params.s = S;\n  newVaulter(S);\n}\n\n// Each vaulter wears a different kit; the stand lights take the opposite colour.\nconst newVaulter = (S) => (S.vo = [0, 0.36, 0.62][S.n++ % 3]);\nfunction colours(S) {\n  const hue = (S.hk + S.vo) % 1, cols = [sc3(hsv(hue, 0.82, 1), 245), sc3(hsv((hue + 0.5) % 1, 0.75, 0.8), 210), [232, 168, 128], [150, 100, 70]];\n  S.cols = cols.concat(cols.map((c) => sc3(c, 0.62)));\n  S.acc = hsv((S.hk + 0.5) % 1, 0.75, 1);\n  S.tint = sc3(S.acc, 0.5, 0.5);\n}\n\n// The cut to the runway: the takeoff spot is where a straight pole reaches\n// the box from hands held straight up.\nfunction startRun(S) {\n  if (S.ph === MAT) newVaulter(S);\n  const h = S.base + 0.1 * S.notch, Lg = 92.5 - GY + PXM * h, th = 0.08, hy = GY - drop(th, TAKE) - 0.8;\n  const px = TORSO * sin(th) + ARM * sin(th + 0.15), py = hy - TORSO * cos(th) - ARM * cos(th + 0.15);\n  const dx = sqrt(Lg * Lg - (BOXY - py) ** 2), D = 88 + 16 * (h - 5);\n  S.R = { Lg, D, dist: 0, Xto: -dx - px, hy, bto: -asin((BOXY - py) / Lg), psi0: atan2(BOXY - py, dx) };\n  Object.assign(S, { ph: RUN, pt: 0, clear: rnd() \u003c 0.72 - 0.08 * S.notch, wob: rnd() \u003c 0.5, free: null, verdict: 0, done: 0, cam: S.R.Xto - D - 16 });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  runPose(S);\n}\n\nfunction runPose(S) {\n  const R = S.R, rem = R.D - R.dist, X = R.Xto - rem, ph = (R.dist / 15) * PI + 0.6, e2 = sm(1 - rem / 15), L = [];\n  for (let i = 0; i \u003c 2; i++) L.push(0.2 + 0.7 * sin(ph + i * PI), 0.25 + 1.3 * max(0, cos(ph + i * PI + 0.9)));\n  for (let i = 0; i \u003c 4; i++) L[i] = lerp(L[i], TAKE[i], e2);\n  const th = lerp(0.16, 0.08, e2), hy = lerp(GY - drop(th, L) - 0.3, R.hy, e2), e = sm(1 - rem / 19);\n  // The pole tip drops over the last strides; then the top hand goes up as\n  // the tip slides into the box.\n  const p1x = lerp(X - 1, X + TORSO * sin(th) + ARM * sin(th + 0.15), e), p1y = lerp(hy - 0.5, hy - TORSO * cos(th) - ARM * cos(th + 0.15), e);\n  const beta = lerp(lerp(1.25 + 0.04 * sin(ph * 2), 0.12, sm((70 - rem) / 51)), R.bto, e), dx = cos(beta), dy = -sin(beta);\n  S.fig = { x: X, y: hy, th, fc: 1, L, hands: [p1x, p1y, p1x + 4.5 * dx, p1y + 4.5 * dy] };\n  S.pole = { x: p1x - 2.5 * dx, y: p1y - 2.5 * dy, x1: p1x + R.Lg * dx, y1: p1y + R.Lg * dy };\n}\n\n// The bent pole as an arc of length L from the box to the top hand.\nconst ARC = F(5);\nfunction arc(px, py, c, L) {\n  const r = cl(c / L, 0.3, 1);\n  let x = sqrt(6 * (1 - r)) + 1e-4;\n  for (let i = 0; i \u003c 5; i++) x = cl(x - (sin(x) - r * x) / (cos(x) - r), 1e-4, 1.56);\n  const R = L / (2 * x), d = R * cos(x), cx = px / 2 + ((py - BOXY) / c) * d, cy = (py + BOXY) / 2 - (px / c) * d, a0 = atan2(BOXY - cy, -cx);\n  ARC.set([cx, cy, R, a0, md(atan2(py - cy, px - cx) - a0 + PI, 2 * PI) - PI]);\n  return ARC;\n}\n\nfunction polePose(S) {\n  const R = S.R, u = min(1, S.pt / TA), L = R.Lg;\n  const c = L * (1 - 0.25 * sin(PI * min(1, u / 0.78)) ** 1.4), psi = R.psi0 + (PSI1 - R.psi0) * (1 - (1 - u) ** 1.6);\n  const p1x = -c * cos(psi), p1y = BOXY - c * sin(psi), q = key(VAULT, u, S.q), th = q[0], a = q[1];\n  const fc = cos(PI * sm((u - 0.66) / 0.24)), ux = sin(th), uy = -cos(th);\n  // Hang the body from the top hand; the bottom hand is 4.5 LEDs down the arc.\n  const ax = ux * cos(a) + cos(th) * fc * sin(a), ay = uy * cos(a) + sin(th) * fc * sin(a);\n  const A = arc(p1x, p1y, c, L), b = A[3] + (A[4] * (L - 4.5)) / L;\n  S.fig = { x: p1x - ARM * ax - TORSO * ux, y: p1y - ARM * ay - TORSO * uy, th, fc, L: q.slice(2), hands: [p1x, p1y, A[0] + A[2] * cos(b), A[1] + A[2] * sin(b)] };\n  S.pole = { c, L, px: p1x, py: p1y };\n}\n\nfunction matPose(S, tau) {\n  const q = key(MATK, tau, S.q), c = S.clear, e = sm((tau - (c ? 1.1 : 1.6)) / 0.3), w = max(0, tau - 1.9) * 20, s = sin(w * 0.4);\n  let L = q.slice(2).map((v) => v * (1 - e)), arms = [lerp(q[1], c ? 0.25 : 2.9, e), lerp(q[1] + 0.3, c ? 0.45 : 3.1, e)];\n  // Up with arms high and a hop if the bar stayed; then off to the right.\n  const Y = lerp(GY - MH - 1 + 0.6 * sm((tau - 0.4) / 0.5), GY - MH - 6.6 - 1.5 * c * abs(sin((tau - 1.1) * 9)) * (tau \u003c 1.9), e);\n  if (w) [L, arms] = [[0.5 * s, 0.4, -0.5 * s, 0.4], [PI - 0.4 * s, PI + 0.4 * s]];\n  S.fig = { x: S.lx + 2 * sm(tau / 0.5) + w, y: w ? GY - MH - 6.6 : Y, th: w ? 0.05 : lerp(q[0], 2 * PI, e), fc: w ? 1 : -1, L, arms };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06];\n  const st = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2, first = S.t === 0;\n  S.hk = (0.13 + cl(k[0], 0, 1)) % 1;\n  S.base = round(cl(k[2], 5, 6.2) * 20) / 20;\n  S.wind = cl(k[3], -1, 1);\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === SET || S.ph === MAT)) startRun(S);\n  S.pt += st;\n  const R = S.R, b = S.bar, tau = S.pt, tgt = GY - PXM * (S.base + 0.1 * S.notch);\n  if (first) S.by = tgt;\n  if (b.st !== 1 && b.st !== 3) S.by += (tgt - S.by) * min(1, st * 3);\n  if (S.ph > POLE) S.cam = CAMF;\n\n  if (S.ph === SET) {\n    [S.cam, S.fig] = [CAMF, null];\n    if (tau >= S.tset) startRun(S);\n  } else if (S.ph === RUN) {\n    R.dist = min(R.D, R.dist + 62 * (1 + 0.12 * S.wind) * min(1, 0.3 + tau / TACC) * st);\n    const rem = R.D - R.dist;\n    runPose(S);\n    S.cam = R.Xto - rem - lerp(16, 6, sm(1 - rem / 40));\n    if (rem \u003c= 0) [S.ph, S.pt, R.cam] = [POLE, 0, S.cam];\n  } else if (S.ph === POLE) {\n    polePose(S);\n    S.cam = lerp(R.cam, CAMF, sm(tau / TA / 0.75));\n    if (tau >= TA) {\n      // Let go: the hips fly on to just over the bar, or into it.\n      const f = S.fig, ya = S.by - (S.clear ? 3.5 : 0.3), tap = sqrt((2 * max(3, f.y - ya)) / G);\n      S.fl = { x: f.x, y: f.y, vx: cl((XS + 1 - f.x) / tap, 6, 30), vy: G * tap, tap, tf: sqrt((2 * max(10, GY - MH - 1.5 - ya)) / G) };\n      S.free = { a: PI / 2 - PSI1, w: 1.4, L: R.Lg + 2.5, amax: acos(2 / (R.Lg + 2.5)) };\n      [S.ph, S.pt] = [FLY, 0];\n    }\n  } else if (S.ph === FLY) {\n    const f = S.fl, X = f.x + f.vx * tau, Y = f.y - f.vy * tau + 0.5 * G * tau * tau;\n    const q = key(FLYK, tau \u003c f.tap ? tau / f.tap : 1 + (tau - f.tap) / f.tf, S.q);\n    S.fig = { x: X, y: Y, th: q[0], fc: -1, L: q.slice(2), arms: [q[1], q[1] + 0.25] };\n    // Every camera in the house goes off at the top, the two in the infield first.\n    if (!f.fl && (f.fl = tau >= f.tap - 0.05))\n      for (let i = 0; i \u003c 18; i++) S.flashes.push(i \u003c 2 ? { x: i * 36 + 20, y: 114 + i * 5, t0: S.t + i * 0.1 } : flash(S.t + rnd() * 0.6));\n    if (tau >= f.tap + 0.05 && b.st === 0 && (!S.clear || S.wob)) [b.st, b.t] = [S.clear ? 2 : 1, 0];\n    if (tau > f.tap && Y >= GY - MH - 1.5) Object.assign(S, { ph: MAT, pt: 0, lx: X });\n  } else if (S.ph === MAT) {\n    matPose(S, tau);\n    if (tau >= 0.5 && !S.verdict) [S.verdict, S.hudF, S.miss] = [2 - S.clear, 1, S.miss + !S.clear, S.marks.push(S.clear ? \"0\" : \"X\")];\n    // A clearance puts the bar up a notch; a third miss sends it back.\n    if (tau >= 1.6 && !S.done && (S.done = 1) && (S.clear || S.miss >= 3)) [S.marks, S.miss, S.notch] = [[], 0, S.clear && S.notch \u003c 6 ? S.notch + 1 : 0];\n    if (tau >= 2.3 && b.st === 3) b.st = 4;\n    if (tau >= 2.9) Object.assign(S, { ph: SET, pt: 0, tset: 0.7, free: null }), newVaulter(S), (b.st = 0);\n  }\n\n  // The pole, once let go, falls back about the box onto the runway.\n  const P = S.free;\n  if (P) {\n    P.w += ((3 * G) / (2 * P.L)) * sin(P.a) * st;\n    P.a += P.w * st;\n    if (P.a > P.amax) [P.a, P.w] = [P.amax, P.w > 0.6 ? -0.3 * P.w : 0];\n  }\n  // The bar shivers, and when it was hit it falls off the pegs onto the mat.\n  b.t += st;\n  if (b.st === 1 && b.t > 0.3) Object.assign(b, { st: 3, y: [S.by - OBY * ZS, S.by + OBY * ZS], v: [0, 0] });\n  for (let i = 0, fl; i \u003c 2 && b.st === 3; i++) {\n    if (b.t \u003c 0.3 + i * 0.08) continue;\n    b.y[i] += (b.v[i] += G * st) * st;\n    if (b.y[i] > (fl = GY - MH + OBY * MZ * (2 * i - 1) - 0.5)) [b.y[i], b.v[i]] = [fl, b.v[i] > 40 ? -0.3 * b.v[i] : 0];\n  }\n  S.hudF = max(0, S.hudF - st * 1.6);\n  S.flashes = S.flashes.filter((f) => S.t - f.t0 \u003c 0.2);\n  if (rnd() \u003c st * 0.8) S.flashes.push(flash(S.t));\n}\n\n// A figure, hip at (hx, hy): th turns the body clockwise from upright, fc\n// faces it right (1) or left (-1). Arms reach for the hands, or hang at angles.\nconst PART = F(96);\nfunction figure(S, hx, hy, th, fc, arms, L, hands, cols, sc) {\n  hx -= S.cam;\n  const ux = sin(th), uy = -cos(th), fx = cos(th) * fc, fy = sin(th) * fc, nx = hx + ux * TORSO * sc, ny = hy + uy * TORSO * sc;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => (PART.set([ax, ay, bx, by, r * sc, c], n), (n += 6));\n  const limb = (x, y, a, l) => [x + l * sc * (ux * cos(a) + fx * sin(a)), y + l * sc * (uy * cos(a) + fy * sin(a))];\n  // Far limbs first and in shade, then the body, then the near limbs.\n  for (let side = 1; side >= 0; side--) {\n    const [kx, ky] = limb(hx, hy, PI - L[side * 2], LEG), d = side * 4;\n    const [ax, ay] = limb(kx, ky, PI - L[side * 2] + L[side * 2 + 1], LEG);\n    const [wx, wy] = hands ? [hands[side * 2] - S.cam, hands[side * 2 + 1]] : limb(nx, ny, arms[side], ARM);\n    part(hx, hy, kx, ky, 0.85, 1 + d);\n    part(kx, ky, ax, ay, 0.62, 2 + d);\n    part(nx, ny, wx, wy, 0.55, 2 + d);\n    if (side) part(hx, hy, nx, ny, 1.05, 0), part(nx + ux * 1.7 * sc, ny + uy * 1.7 * sc, nx + ux * 1.8 * sc, ny + uy * 1.8 * sc, 1.25, 3);\n  }\n  let [x0, x1, y0, y1] = [99, -99, 999, -99];\n  for (let j = 0; j \u003c n; j += 6) [x0, x1, y0, y1] = [min(x0, PART[j], PART[j + 2]), max(x1, PART[j], PART[j + 2]), min(y0, PART[j + 1], PART[j + 3]), max(y1, PART[j + 1], PART[j + 3])];\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, ceil(y1 + 2)); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, ceil(x1 + 2)); x++) {\n      const px = x + 0.5, py = y + 0.5, i = y * W + x;\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j], ay = PART[j + 1], dx = PART[j + 2] - ax, dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const col = cols[PART[j + 5]];\n        for (let c = 0; c \u003c 3; c++) C[i * 3 + c] += (col[c] - C[i * 3 + c]) * a;\n      }\n    }\n}\n\n// The pole, two samples an LED, each shared over four LEDs.\nconst POLEC = [235, 232, 214];\nfunction splat(x, y) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1), w = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy), k = (yy * W + xx) * 3;\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let c = 0; c \u003c 3; c++) C[k + c] += (POLEC[c] - C[k + c]) * w;\n  }\n}\nfunction seg(x0, y0, x1, y1) {\n  for (let i = 0, n = ceil(Math.hypot(x1 - x0, y1 - y0) * 2) + 1; i \u003c= n; i++) splat(lerp(x0, x1, i / n), lerp(y0, y1, i / n));\n}\n\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, M: 0x5fed, X: 0x5aad, \".\": 4 };\nfunction text(s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(x + (j % 3), y + floor(j / 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\n// A photographer kneeling in the infield, lens up at the bar.\nconst SNAP = \"..oo.....oo.cc.####c.######..####...###...##.##..\";\n\n// Sky, roof, stands, LED ribbon, boards, track and grass, each panning by its depth.\nfunction back(S) {\n  const { cr, seat } = S, cam = S.cam, t = S.t, A = S.acc, T = S.tint, s0 = round(cam * 0.4), bx = cam * 0.85;\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) {\n      let r, g, b, v = -1;\n      if (y \u003c 13) (r = 5 + y), (g = 8 + 1.2 * y + 4 * T[1]), (b = 22 + 2 * y);\n      else if (y \u003c ST) {\n        if (y === 15 && md(s0 + x, 3) === 0) v = 190;\n        else r = g = b = y === 13 ? 46 : y === 16 ? 10 : 22;\n      } else if (y >= 46 && y \u003c 52) {\n        v = y > 46 && y \u003c 51 ? (md(floor((s0 + x + t * 12) / 2) * 7 + y, 11) \u003c 5 ? 210 : 50) : 14;\n      } else if (y \u003c 84) {\n        const i = (y - ST) * CW + md(s0 + x, CW), sw = seat[i] * 255;\n        (r = cr[i * 3] * T[0] + sw * A[0]), (g = cr[i * 3 + 1] * T[1] + sw * A[1]), (b = cr[i * 3 + 2] * T[2] + sw * A[2]);\n      } else if (y \u003c 92) {\n        const u = x + bx, sg = floor(u / 40), l = u - sg * 40, on = y > 85 && y \u003c 90 && hash(floor((l + t * 9) / 2) + sg * 50, y) \u003c 0.5;\n        if (l \u003c 1 || y === 91) r = g = b = 6;\n        else if (md(sg, 2) ? on : !on) v = on ? 150 : 55;\n        else r = g = b = on ? 150 : 8;\n      } else if (y \u003c 107) {\n        // The track, then the runway with white edges and metre marks.\n        const X = x + cam, li = y > 100 ? 1 : 0.55 + 0.03 * (y - 92), sp = hash(md(floor(X), 997), y) * 14;\n        if (y === 96 || y === 101 || y === 106 || (y === 105 && md(floor(X), 14) === 0)) r = g = b = 175 * li;\n        else (r = (140 + sp) * li), (g = (58 + sp * 0.4) * li), (b = (40 + sp * 0.3) * li);\n      } else {\n        // Infield grass in mown stripes.\n        const q = (md(floor((x + cam * 1.15 + (y - 107) * 1.3) / 11), 2) ? 0.78 : 1) * (1 - (y - 107) * 0.02);\n        (r = 24 * q), (g = 74 * q), (b = 32 * q);\n      }\n      if (v >= 0) (r = A[0] * v + (y \u003c ST) * 60), (g = A[1] * v + (y \u003c ST) * 60), (b = A[2] * v + (y \u003c ST) * 60);\n      C[j] = r;\n      C[j + 1] = g;\n      C[j + 2] = b;\n    }\n  // Floodlight towers above the roof, and flags streaming or hanging limp.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 1; y \u003c 13; y++)\n      for (let x = xi - 5; x \u003c= xi + 5; x++)\n        if (y \u003c 7) put(x, y, y > 1 && y \u003c 6 && (x - xi) % 2 === 0 && abs(x - xi) \u003c 5 ? [255, 244, 222] : [40, 42, 52]);\n        else if (x === xi) put(x, y, [34, 36, 46]);\n  }\n  const wd = S.wind, e = cl(abs(wd) * 1.4 + 0.25, 0, 1) * (wd \u003c 0 ? -1 : 1), a = abs(e);\n  for (let fx = 20 - md(s0, 32) - 32; fx \u003c W + 6; fx += 32)\n    for (let i = 0; i \u003c 22; i++)\n      if (i \u003c 7) put(fx, 6 + i, [110, 110, 118]);\n      else put(round(fx + e * (i % 5 + 1)), 6 + floor((i - 7) / 5) + round((i % 5 + 1) * ((1 - a) * 0.9 + sin(t * (5 + 7 * a) - i) * 0.12 * a)), i > 11 && i \u003c 17 ? [235, 235, 235] : sc3(A, 230));\n  // The photographers in the infield, and camera flashes going off.\n  for (let k = 0; k \u003c 2; k++) for (let r = 0; r \u003c 49; r++) if (SNAP[r] !== \".\") put(round(k * 36 - 16 - cam * 1.15) + (r % 7), 113 + k * 5 + floor(r / 7), SNAP[r] === \"#\" && r > 6 ? [12, 14, 20] : [48, 48, 56]);\n  for (const f of S.flashes) {\n    const a = 1 - (t - f.t0) / 0.2;\n    for (let i = 0; i \u003c 25 && a \u003c= 1; i++) {\n      const dx = (i % 5) - 2, dy = floor(i / 5) - 2, x = f.x + dx, d = abs(dx) + abs(dy), j = ((f.y + dy) * W + x) * 3;\n      const v = (d ? (d > 1 ? (f.y > 100 && dx * dy === 0 ? 120 : 0) : 150) : 255) * a;\n      if (x >= 0 && x \u003c W && v > 0) for (let c = 0; c \u003c 3; c++) C[j + c] = max(C[j + c], v);\n    }\n  }\n}\n\n// The mat from a little above: the top, the end facing the runway and the side\n// facing us. Then the box and its stop board.\nfunction mat(S) {\n  const cam = S.cam, top = GY - MH, xe = round(-cam);\n  for (let y = 89; y \u003c 108; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const py = y + 0.5, X0 = x + 0.5 + cam, z = (py - top) / OBY, X = X0 - OBX * z, Xf = X0 - OBX * MZ, zl = (X0 - MAT0) / OBX, v = 0.86 + 0.012 * z;\n      if (abs(z) \u003c= MZ && X >= MAT0) put(x, y, md(X, 16) \u003c 1 || z > MZ - 1 ? [110, 150, 250] : [44 * v, 98 * v, 232 * v]);\n      else if (Xf >= MAT0 && py >= top + OBY * MZ && py \u003c= GY + OBY * MZ) put(x, y, abs(py - GY + 0.6) \u003c 0.6 && md(Xf, 9) > 3 ? [215, 220, 235] : md(Xf, 18) \u003c 1 ? [18, 40, 120] : [30, 66, 176]);\n      else if (abs(zl) \u003c= MZ && py >= top + OBY * zl && py \u003c= GY + OBY * zl) put(x, y, [22, 50, 140]);\n    }\n  for (let x = xe - 7; x \u003c= xe; x++) for (let y = GY - 1; y \u003c= GY + 1; y++) put(x, y, x === xe ? [200, 200, 212] : y \u003c GY ? [90, 90, 100] : [10, 10, 14]);\n}\n\nfunction standard(S, z) {\n  const x = round(XS + OBX * z - S.cam), yb = round(GY + OBY * z), yt = round(S.by + OBY * z - 5), near = z > 0;\n  for (let y = yt; y \u003c= yb; y++) for (let w = 0; w \u003c 1 + near; w++) put(x + w, y, sc3([1, 1.02, 1.12], (near ? (w ? 120 : 175) : 100) * (y === yt ? 1.25 : 1)));\n  for (let w = -2; w \u003c= 2; w++) put(x + w, yb, [60, 60, 66]);\n  put(x + (near ? -1 : 1), round(S.by + OBY * z), [220, 220, 225]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const cam = S.cam, P = S.pole, b = S.bar;\n  C = S.C;\n  colours(S);\n  back(S);\n  standard(S, -ZS);\n  mat(S);\n\n  // The pole: carried, bent into an arc in the box, then let go.\n  if (S.ph === RUN) seg(P.x - cam, P.y, P.x1 - cam, P.y1);\n  else if (S.ph === POLE) {\n    const A = arc(P.px, P.py, P.c, P.L), n = ceil(P.L * 2), a = A[3] + A[4], s = A[4] > 0 ? 2.5 : -2.5, ex = A[0] + A[2] * cos(a) - cam, ey = A[1] + A[2] * sin(a);\n    for (let i = 0; i \u003c= n; i++) splat(A[0] + A[2] * cos(A[3] + (A[4] * i) / n) - cam, A[1] + A[2] * sin(A[3] + (A[4] * i) / n));\n    seg(ex, ey, ex - s * sin(a), ey + s * cos(a));\n  } else if (S.free) seg(-cam, BOXY, -cam - S.free.L * sin(S.free.a), BOXY - S.free.L * cos(S.free.a));\n\n  // The bar, striped, on its pegs or on its way down.\n  let [y0, y1] = [S.by - OBY * ZS, S.by + OBY * ZS];\n  const w = b.st === 1 || b.st === 2 ? sin(b.t * 48) * exp(-b.t * (b.st === 2 ? 5 : 2)) * 1.3 : 0;\n  if (b.st >= 3) [y0, y1] = b.y;\n  for (let i = 0; i \u003c= 36 && b.st !== 4; i++) put(floor(lerp(XS - OBX * ZS, XS + OBX * ZS, i / 36) - cam), floor(lerp(y0 + w, y1 + w * 0.6, i / 36)), floor(i / 5.2) % 2 ? [240, 240, 236] : sc3(S.acc, 120, 60));\n\n  // The vaulter, then the near upright in front.\n  const f = S.fig;\n  if (f) figure(S, f.x, f.y, f.th, f.fc, f.arms, f.L, f.hands, S.cols, 1);\n  standard(S, ZS);\n\n  // The judge by the box, a flag up once the bar has settled.\n  const up = S.ph === MAT && S.verdict && S.pt \u003c 2.6, jc = [[34, 50, 120], [70, 70, 82], [225, 165, 125], [40, 40, 44]];\n  figure(S, -13.2, 101.6, 0, 1, [up ? 0.2 : 2.9, 2.95], [0, 0, 0, 0], null, jc.concat(jc), 0.85);\n  for (let r = 0; r \u003c 9 && up; r++) put(round(-12.3 - cam) + (r % 3), 91 + floor(r / 3), S.verdict === 1 ? [245, 245, 245] : [235, 25, 25]);\n\n  // Glare from the lamp banks, over everything.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 0; y \u003c 30; y++)\n      for (let x = max(0, xi - 60), j = (y * W + x) * 3; x \u003c min(W, xi + 60); x++, j += 3) {\n        const v = S.glare[y * 128 + x - xi + 64];\n        C[j] += v;\n        C[j + 1] += v * 0.96;\n        C[j + 2] += v * 0.88;\n      }\n  }\n\n  // The results board: height, marks at it, the vaulter's colours.\n  const hc = S.verdict === 1 ? [255, 255, 255] : [255, 40, 40];\n  for (let y = 1; y \u003c 13; y++) for (let x = 39; x \u003c 63; x++) for (let c = 0, j = (y * W + x) * 3; c \u003c 3; c++) C[j + c] = y === 1 ? S.acc[c] * 230 : C[j + c] * 0.2 + [6, 10, 26][c] * 0.8 + hc[c] * S.hudF * 0.75;\n  text((S.base + 0.1 * S.notch).toFixed(2) + \"M\", 41, 3, [255, 180, 40]);\n  S.marks.slice(-3).forEach((m, i) => text(m, 41 + i * 4, 8, m === \"X\" ? [255, 50, 40] : [240, 240, 240]));\n  for (let r = 0; r \u003c 30; r++) put(55 + (r % 6), 8 + floor(r / 6), r \u003c 12 ? S.cols[0] : S.cols[1]);\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","layer":{"id":"layer-pole-vault","type":"code","name":"pole-vault","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pole Vault\n// Family:  sport\n// Idea:    A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the pole vault in athletics\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1\n//\n// Knob 1: Colour. The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour.\n// Knob 2: Speed. Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2.\n// Knob 3: Bar. The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses.\n// Knob 4: Wind. Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run.\n// Buttons: K1 tap sends the next vaulter down the runway now.\n\nconst W = 64, H = 128, N = W * H;\n// The runway (GY), the pole's tip in the box, 14 rows a metre. A point z LEDs\n// nearer the camera lands OBX right and OBY down. The standards stand XS past\n// the box, ZS either side; the mat starts at MAT0, MZ either side, MH tall.\nconst GY = 104, BOXY = GY + 2, PXM = 14, OBX = 0.55, OBY = 0.22, XS = 5, ZS = 13, MAT0 = 3, MZ = 11, MH = 9;\n// The camera's left edge on the bar, gravity at Speed 2, the body.\nconst CAMF = -26, G = 170, TORSO = 4.2, ARM = 5, LEG = 3.3, TACC = 0.7, TA = 1.25, PSI1 = 1.64;\nconst [SET, RUN, POLE, FLY, MAT] = [0, 1, 2, 3, 4];\n// The stands texture: CW columns that wrap, rows ST to 83.\nconst CW = 256, ST = 17, CH = 84 - ST;\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, asin, acos, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst lerp = (a, b, u) => a + (b - a) * u;\nconst rnd = () => Math.random();\n// A camera flash somewhere in the stands.\nconst flash = (t0) => ({ x: floor(rnd() * W), y: ST + 2 + floor(rnd() * 64), t0 });\nconst F = (n) => new Float32Array(n);\nconst hash = (a, b) => ((Math.imul(a * 7919 + b * 104729, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\nconst md = (a, m) => ((a % m) + m) % m;\nconst sc3 = (c, k, o = 0) => [c[0] * k + o, c[1] * k + o, c[2] * k + o];\nlet C = null;\nconst put = (x, y, c) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && C.set(c, (y * W + x) * 3);\n\n// Poses: [time, body angle, arm, near hip, near knee, far hip, far knee]. On\n// the pole the body rocks back to head-down (-PI); after the half turn it\n// goes on the other way, face down over the bar and onto the back.\nconst TAKE = [1.5, 1.6, -0.5, 0.3];\nconst VAULT = [[0, 0.08, 0.15, 1.5, 1.6, -0.5, 0.3], [0.2, -0.3, 0.25, 1.1, 1.3, 0.6, 0.2], [0.42, -1.25, 0.4, 2.1, 1.8, 2, 1.5], [0.62, -2.4, 0.9, 0.9, 0.5, 0.8, 0.4], [0.82, -3.05, 2.5, 0.2, 0.05, 0.15, 0.05], [1, -3.14, 0.35, 0.1, 0, 0.1, 0]];\nconst FLYK = [[0, PI, 0.35, 0.1, 0, 0.1, 0], [1, 1.39 * PI, 0.4, 0.7, 0.4, 0.6, 0.5], [1.4, 1.95 * PI, 0.5, 0.6, 0.3, 0.5, 0.4], [2, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8]];\nconst MATK = [[0, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8], [0.4, 2.5 * PI, 1.7, 0.8, 0.9, 0.7, 1], [0.95, 2 * PI + 0.15, 2.7, 1.5, 1.8, 1.4, 1.7]];\nfunction key(T, u, out) {\n  let j = 0;\n  while (j \u003c T.length - 2 && u > T[j + 1][0]) j++;\n  const a = T[j], b = T[j + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  for (let i = 1; i \u003c 7; i++) out[i - 1] = a[i] + (b[i] - a[i]) * f;\n  return out;\n}\n// How far below the hip the lower foot is, for a body leaning th.\nconst drop = (th, L) => LEG * max(cos(th - L[0]) + cos(th - L[0] + L[1]), cos(th - L[2]) + cos(th - L[2] + L[3]));\n\n// Built once: the stands, two LEDs a seat in rows three deep, aisles, empty\n// seats in the team colour, the upper tier in the roof's shadow; the glare.\nfunction build(S) {\n  const cr = F(CW * CH * 3), seat = F(CW * CH), glare = F(30 * 128);\n  for (let y = 0; y \u003c CH; y++) {\n    const lo = y + ST >= 52, ty = y + ST - (lo ? 52 : ST), band = ty % 3, tier = floor(ty / 3) + lo * 40;\n    const li = lo ? 0.62 + (0.38 * ty) / 31 : 0.3 + (0.42 * ty) / 29;\n    for (let x = 0, sn = 0; x \u003c CW; x++, sn = x >> 1) {\n      let c = x % 48 \u003c 2 ? [58, 58, 64] : [20, 20, 25];\n      if (x % 48 > 1 && band \u003c 2)\n        if (hash(sn, tier) > 0.8) (seat[y * CW + x] = (0.24 + 0.08 * band) * li), (c = [3, 3, 4]);\n        else c = band ? sc3(hsv(hash(sn * 3, tier), 0.55, 0.2 + 0.14 * hash(tier, sn)), 255) : x & 1 ? [14, 11, 10] : hash(sn, tier + 99) \u003c 0.5 ? [112, 78, 58] : [60, 42, 32];\n      cr.set(sc3(c, li), (y * CW + x) * 3);\n    }\n  }\n  for (let i = 0; i \u003c 30 * 128; i++) {\n    const dx = (i % 128) - 64, dy = floor(i / 128) - 3.5, d2 = dx * dx + dy * dy;\n    glare[i] = 70 * exp(-d2 / 16) + 30 * exp(-d2 / 110) + 30 * exp(-dy * dy / 1.5 - abs(dx) / 12);\n  }\n  Object.assign(S, { cr, seat, glare });\n}\n\nexport function setup(params) {\n  const S = { t: 0, ph: SET, pt: 0, tset: 1.95, n: 0, notch: 0, miss: 0, base: 5, by: 34, cam: CAMF, wind: 0, hk: 0.13, marks: [], hudF: 0, verdict: 0, done: 0 };\n  Object.assign(S, { clear: true, fig: null, free: null, flashes: [], C: F(N * 3), q: F(6) });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  build(S);\n  params.s = S;\n  newVaulter(S);\n}\n\n// Each vaulter wears a different kit; the stand lights take the opposite colour.\nconst newVaulter = (S) => (S.vo = [0, 0.36, 0.62][S.n++ % 3]);\nfunction colours(S) {\n  const hue = (S.hk + S.vo) % 1, cols = [sc3(hsv(hue, 0.82, 1), 245), sc3(hsv((hue + 0.5) % 1, 0.75, 0.8), 210), [232, 168, 128], [150, 100, 70]];\n  S.cols = cols.concat(cols.map((c) => sc3(c, 0.62)));\n  S.acc = hsv((S.hk + 0.5) % 1, 0.75, 1);\n  S.tint = sc3(S.acc, 0.5, 0.5);\n}\n\n// The cut to the runway: the takeoff spot is where a straight pole reaches\n// the box from hands held straight up.\nfunction startRun(S) {\n  if (S.ph === MAT) newVaulter(S);\n  const h = S.base + 0.1 * S.notch, Lg = 92.5 - GY + PXM * h, th = 0.08, hy = GY - drop(th, TAKE) - 0.8;\n  const px = TORSO * sin(th) + ARM * sin(th + 0.15), py = hy - TORSO * cos(th) - ARM * cos(th + 0.15);\n  const dx = sqrt(Lg * Lg - (BOXY - py) ** 2), D = 88 + 16 * (h - 5);\n  S.R = { Lg, D, dist: 0, Xto: -dx - px, hy, bto: -asin((BOXY - py) / Lg), psi0: atan2(BOXY - py, dx) };\n  Object.assign(S, { ph: RUN, pt: 0, clear: rnd() \u003c 0.72 - 0.08 * S.notch, wob: rnd() \u003c 0.5, free: null, verdict: 0, done: 0, cam: S.R.Xto - D - 16 });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  runPose(S);\n}\n\nfunction runPose(S) {\n  const R = S.R, rem = R.D - R.dist, X = R.Xto - rem, ph = (R.dist / 15) * PI + 0.6, e2 = sm(1 - rem / 15), L = [];\n  for (let i = 0; i \u003c 2; i++) L.push(0.2 + 0.7 * sin(ph + i * PI), 0.25 + 1.3 * max(0, cos(ph + i * PI + 0.9)));\n  for (let i = 0; i \u003c 4; i++) L[i] = lerp(L[i], TAKE[i], e2);\n  const th = lerp(0.16, 0.08, e2), hy = lerp(GY - drop(th, L) - 0.3, R.hy, e2), e = sm(1 - rem / 19);\n  // The pole tip drops over the last strides; then the top hand goes up as\n  // the tip slides into the box.\n  const p1x = lerp(X - 1, X + TORSO * sin(th) + ARM * sin(th + 0.15), e), p1y = lerp(hy - 0.5, hy - TORSO * cos(th) - ARM * cos(th + 0.15), e);\n  const beta = lerp(lerp(1.25 + 0.04 * sin(ph * 2), 0.12, sm((70 - rem) / 51)), R.bto, e), dx = cos(beta), dy = -sin(beta);\n  S.fig = { x: X, y: hy, th, fc: 1, L, hands: [p1x, p1y, p1x + 4.5 * dx, p1y + 4.5 * dy] };\n  S.pole = { x: p1x - 2.5 * dx, y: p1y - 2.5 * dy, x1: p1x + R.Lg * dx, y1: p1y + R.Lg * dy };\n}\n\n// The bent pole as an arc of length L from the box to the top hand.\nconst ARC = F(5);\nfunction arc(px, py, c, L) {\n  const r = cl(c / L, 0.3, 1);\n  let x = sqrt(6 * (1 - r)) + 1e-4;\n  for (let i = 0; i \u003c 5; i++) x = cl(x - (sin(x) - r * x) / (cos(x) - r), 1e-4, 1.56);\n  const R = L / (2 * x), d = R * cos(x), cx = px / 2 + ((py - BOXY) / c) * d, cy = (py + BOXY) / 2 - (px / c) * d, a0 = atan2(BOXY - cy, -cx);\n  ARC.set([cx, cy, R, a0, md(atan2(py - cy, px - cx) - a0 + PI, 2 * PI) - PI]);\n  return ARC;\n}\n\nfunction polePose(S) {\n  const R = S.R, u = min(1, S.pt / TA), L = R.Lg;\n  const c = L * (1 - 0.25 * sin(PI * min(1, u / 0.78)) ** 1.4), psi = R.psi0 + (PSI1 - R.psi0) * (1 - (1 - u) ** 1.6);\n  const p1x = -c * cos(psi), p1y = BOXY - c * sin(psi), q = key(VAULT, u, S.q), th = q[0], a = q[1];\n  const fc = cos(PI * sm((u - 0.66) / 0.24)), ux = sin(th), uy = -cos(th);\n  // Hang the body from the top hand; the bottom hand is 4.5 LEDs down the arc.\n  const ax = ux * cos(a) + cos(th) * fc * sin(a), ay = uy * cos(a) + sin(th) * fc * sin(a);\n  const A = arc(p1x, p1y, c, L), b = A[3] + (A[4] * (L - 4.5)) / L;\n  S.fig = { x: p1x - ARM * ax - TORSO * ux, y: p1y - ARM * ay - TORSO * uy, th, fc, L: q.slice(2), hands: [p1x, p1y, A[0] + A[2] * cos(b), A[1] + A[2] * sin(b)] };\n  S.pole = { c, L, px: p1x, py: p1y };\n}\n\nfunction matPose(S, tau) {\n  const q = key(MATK, tau, S.q), c = S.clear, e = sm((tau - (c ? 1.1 : 1.6)) / 0.3), w = max(0, tau - 1.9) * 20, s = sin(w * 0.4);\n  let L = q.slice(2).map((v) => v * (1 - e)), arms = [lerp(q[1], c ? 0.25 : 2.9, e), lerp(q[1] + 0.3, c ? 0.45 : 3.1, e)];\n  // Up with arms high and a hop if the bar stayed; then off to the right.\n  const Y = lerp(GY - MH - 1 + 0.6 * sm((tau - 0.4) / 0.5), GY - MH - 6.6 - 1.5 * c * abs(sin((tau - 1.1) * 9)) * (tau \u003c 1.9), e);\n  if (w) [L, arms] = [[0.5 * s, 0.4, -0.5 * s, 0.4], [PI - 0.4 * s, PI + 0.4 * s]];\n  S.fig = { x: S.lx + 2 * sm(tau / 0.5) + w, y: w ? GY - MH - 6.6 : Y, th: w ? 0.05 : lerp(q[0], 2 * PI, e), fc: w ? 1 : -1, L, arms };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06];\n  const st = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2, first = S.t === 0;\n  S.hk = (0.13 + cl(k[0], 0, 1)) % 1;\n  S.base = round(cl(k[2], 5, 6.2) * 20) / 20;\n  S.wind = cl(k[3], -1, 1);\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === SET || S.ph === MAT)) startRun(S);\n  S.pt += st;\n  const R = S.R, b = S.bar, tau = S.pt, tgt = GY - PXM * (S.base + 0.1 * S.notch);\n  if (first) S.by = tgt;\n  if (b.st !== 1 && b.st !== 3) S.by += (tgt - S.by) * min(1, st * 3);\n  if (S.ph > POLE) S.cam = CAMF;\n\n  if (S.ph === SET) {\n    [S.cam, S.fig] = [CAMF, null];\n    if (tau >= S.tset) startRun(S);\n  } else if (S.ph === RUN) {\n    R.dist = min(R.D, R.dist + 62 * (1 + 0.12 * S.wind) * min(1, 0.3 + tau / TACC) * st);\n    const rem = R.D - R.dist;\n    runPose(S);\n    S.cam = R.Xto - rem - lerp(16, 6, sm(1 - rem / 40));\n    if (rem \u003c= 0) [S.ph, S.pt, R.cam] = [POLE, 0, S.cam];\n  } else if (S.ph === POLE) {\n    polePose(S);\n    S.cam = lerp(R.cam, CAMF, sm(tau / TA / 0.75));\n    if (tau >= TA) {\n      // Let go: the hips fly on to just over the bar, or into it.\n      const f = S.fig, ya = S.by - (S.clear ? 3.5 : 0.3), tap = sqrt((2 * max(3, f.y - ya)) / G);\n      S.fl = { x: f.x, y: f.y, vx: cl((XS + 1 - f.x) / tap, 6, 30), vy: G * tap, tap, tf: sqrt((2 * max(10, GY - MH - 1.5 - ya)) / G) };\n      S.free = { a: PI / 2 - PSI1, w: 1.4, L: R.Lg + 2.5, amax: acos(2 / (R.Lg + 2.5)) };\n      [S.ph, S.pt] = [FLY, 0];\n    }\n  } else if (S.ph === FLY) {\n    const f = S.fl, X = f.x + f.vx * tau, Y = f.y - f.vy * tau + 0.5 * G * tau * tau;\n    const q = key(FLYK, tau \u003c f.tap ? tau / f.tap : 1 + (tau - f.tap) / f.tf, S.q);\n    S.fig = { x: X, y: Y, th: q[0], fc: -1, L: q.slice(2), arms: [q[1], q[1] + 0.25] };\n    // Every camera in the house goes off at the top, the two in the infield first.\n    if (!f.fl && (f.fl = tau >= f.tap - 0.05))\n      for (let i = 0; i \u003c 18; i++) S.flashes.push(i \u003c 2 ? { x: i * 36 + 20, y: 114 + i * 5, t0: S.t + i * 0.1 } : flash(S.t + rnd() * 0.6));\n    if (tau >= f.tap + 0.05 && b.st === 0 && (!S.clear || S.wob)) [b.st, b.t] = [S.clear ? 2 : 1, 0];\n    if (tau > f.tap && Y >= GY - MH - 1.5) Object.assign(S, { ph: MAT, pt: 0, lx: X });\n  } else if (S.ph === MAT) {\n    matPose(S, tau);\n    if (tau >= 0.5 && !S.verdict) [S.verdict, S.hudF, S.miss] = [2 - S.clear, 1, S.miss + !S.clear, S.marks.push(S.clear ? \"0\" : \"X\")];\n    // A clearance puts the bar up a notch; a third miss sends it back.\n    if (tau >= 1.6 && !S.done && (S.done = 1) && (S.clear || S.miss >= 3)) [S.marks, S.miss, S.notch] = [[], 0, S.clear && S.notch \u003c 6 ? S.notch + 1 : 0];\n    if (tau >= 2.3 && b.st === 3) b.st = 4;\n    if (tau >= 2.9) Object.assign(S, { ph: SET, pt: 0, tset: 0.7, free: null }), newVaulter(S), (b.st = 0);\n  }\n\n  // The pole, once let go, falls back about the box onto the runway.\n  const P = S.free;\n  if (P) {\n    P.w += ((3 * G) / (2 * P.L)) * sin(P.a) * st;\n    P.a += P.w * st;\n    if (P.a > P.amax) [P.a, P.w] = [P.amax, P.w > 0.6 ? -0.3 * P.w : 0];\n  }\n  // The bar shivers, and when it was hit it falls off the pegs onto the mat.\n  b.t += st;\n  if (b.st === 1 && b.t > 0.3) Object.assign(b, { st: 3, y: [S.by - OBY * ZS, S.by + OBY * ZS], v: [0, 0] });\n  for (let i = 0, fl; i \u003c 2 && b.st === 3; i++) {\n    if (b.t \u003c 0.3 + i * 0.08) continue;\n    b.y[i] += (b.v[i] += G * st) * st;\n    if (b.y[i] > (fl = GY - MH + OBY * MZ * (2 * i - 1) - 0.5)) [b.y[i], b.v[i]] = [fl, b.v[i] > 40 ? -0.3 * b.v[i] : 0];\n  }\n  S.hudF = max(0, S.hudF - st * 1.6);\n  S.flashes = S.flashes.filter((f) => S.t - f.t0 \u003c 0.2);\n  if (rnd() \u003c st * 0.8) S.flashes.push(flash(S.t));\n}\n\n// A figure, hip at (hx, hy): th turns the body clockwise from upright, fc\n// faces it right (1) or left (-1). Arms reach for the hands, or hang at angles.\nconst PART = F(96);\nfunction figure(S, hx, hy, th, fc, arms, L, hands, cols, sc) {\n  hx -= S.cam;\n  const ux = sin(th), uy = -cos(th), fx = cos(th) * fc, fy = sin(th) * fc, nx = hx + ux * TORSO * sc, ny = hy + uy * TORSO * sc;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => (PART.set([ax, ay, bx, by, r * sc, c], n), (n += 6));\n  const limb = (x, y, a, l) => [x + l * sc * (ux * cos(a) + fx * sin(a)), y + l * sc * (uy * cos(a) + fy * sin(a))];\n  // Far limbs first and in shade, then the body, then the near limbs.\n  for (let side = 1; side >= 0; side--) {\n    const [kx, ky] = limb(hx, hy, PI - L[side * 2], LEG), d = side * 4;\n    const [ax, ay] = limb(kx, ky, PI - L[side * 2] + L[side * 2 + 1], LEG);\n    const [wx, wy] = hands ? [hands[side * 2] - S.cam, hands[side * 2 + 1]] : limb(nx, ny, arms[side], ARM);\n    part(hx, hy, kx, ky, 0.85, 1 + d);\n    part(kx, ky, ax, ay, 0.62, 2 + d);\n    part(nx, ny, wx, wy, 0.55, 2 + d);\n    if (side) part(hx, hy, nx, ny, 1.05, 0), part(nx + ux * 1.7 * sc, ny + uy * 1.7 * sc, nx + ux * 1.8 * sc, ny + uy * 1.8 * sc, 1.25, 3);\n  }\n  let [x0, x1, y0, y1] = [99, -99, 999, -99];\n  for (let j = 0; j \u003c n; j += 6) [x0, x1, y0, y1] = [min(x0, PART[j], PART[j + 2]), max(x1, PART[j], PART[j + 2]), min(y0, PART[j + 1], PART[j + 3]), max(y1, PART[j + 1], PART[j + 3])];\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, ceil(y1 + 2)); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, ceil(x1 + 2)); x++) {\n      const px = x + 0.5, py = y + 0.5, i = y * W + x;\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j], ay = PART[j + 1], dx = PART[j + 2] - ax, dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const col = cols[PART[j + 5]];\n        for (let c = 0; c \u003c 3; c++) C[i * 3 + c] += (col[c] - C[i * 3 + c]) * a;\n      }\n    }\n}\n\n// The pole, two samples an LED, each shared over four LEDs.\nconst POLEC = [235, 232, 214];\nfunction splat(x, y) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1), w = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy), k = (yy * W + xx) * 3;\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let c = 0; c \u003c 3; c++) C[k + c] += (POLEC[c] - C[k + c]) * w;\n  }\n}\nfunction seg(x0, y0, x1, y1) {\n  for (let i = 0, n = ceil(Math.hypot(x1 - x0, y1 - y0) * 2) + 1; i \u003c= n; i++) splat(lerp(x0, x1, i / n), lerp(y0, y1, i / n));\n}\n\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, M: 0x5fed, X: 0x5aad, \".\": 4 };\nfunction text(s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(x + (j % 3), y + floor(j / 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\n// A photographer kneeling in the infield, lens up at the bar.\nconst SNAP = \"..oo.....oo.cc.####c.######..####...###...##.##..\";\n\n// Sky, roof, stands, LED ribbon, boards, track and grass, each panning by its depth.\nfunction back(S) {\n  const { cr, seat } = S, cam = S.cam, t = S.t, A = S.acc, T = S.tint, s0 = round(cam * 0.4), bx = cam * 0.85;\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) {\n      let r, g, b, v = -1;\n      if (y \u003c 13) (r = 5 + y), (g = 8 + 1.2 * y + 4 * T[1]), (b = 22 + 2 * y);\n      else if (y \u003c ST) {\n        if (y === 15 && md(s0 + x, 3) === 0) v = 190;\n        else r = g = b = y === 13 ? 46 : y === 16 ? 10 : 22;\n      } else if (y >= 46 && y \u003c 52) {\n        v = y > 46 && y \u003c 51 ? (md(floor((s0 + x + t * 12) / 2) * 7 + y, 11) \u003c 5 ? 210 : 50) : 14;\n      } else if (y \u003c 84) {\n        const i = (y - ST) * CW + md(s0 + x, CW), sw = seat[i] * 255;\n        (r = cr[i * 3] * T[0] + sw * A[0]), (g = cr[i * 3 + 1] * T[1] + sw * A[1]), (b = cr[i * 3 + 2] * T[2] + sw * A[2]);\n      } else if (y \u003c 92) {\n        const u = x + bx, sg = floor(u / 40), l = u - sg * 40, on = y > 85 && y \u003c 90 && hash(floor((l + t * 9) / 2) + sg * 50, y) \u003c 0.5;\n        if (l \u003c 1 || y === 91) r = g = b = 6;\n        else if (md(sg, 2) ? on : !on) v = on ? 150 : 55;\n        else r = g = b = on ? 150 : 8;\n      } else if (y \u003c 107) {\n        // The track, then the runway with white edges and metre marks.\n        const X = x + cam, li = y > 100 ? 1 : 0.55 + 0.03 * (y - 92), sp = hash(md(floor(X), 997), y) * 14;\n        if (y === 96 || y === 101 || y === 106 || (y === 105 && md(floor(X), 14) === 0)) r = g = b = 175 * li;\n        else (r = (140 + sp) * li), (g = (58 + sp * 0.4) * li), (b = (40 + sp * 0.3) * li);\n      } else {\n        // Infield grass in mown stripes.\n        const q = (md(floor((x + cam * 1.15 + (y - 107) * 1.3) / 11), 2) ? 0.78 : 1) * (1 - (y - 107) * 0.02);\n        (r = 24 * q), (g = 74 * q), (b = 32 * q);\n      }\n      if (v >= 0) (r = A[0] * v + (y \u003c ST) * 60), (g = A[1] * v + (y \u003c ST) * 60), (b = A[2] * v + (y \u003c ST) * 60);\n      C[j] = r;\n      C[j + 1] = g;\n      C[j + 2] = b;\n    }\n  // Floodlight towers above the roof, and flags streaming or hanging limp.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 1; y \u003c 13; y++)\n      for (let x = xi - 5; x \u003c= xi + 5; x++)\n        if (y \u003c 7) put(x, y, y > 1 && y \u003c 6 && (x - xi) % 2 === 0 && abs(x - xi) \u003c 5 ? [255, 244, 222] : [40, 42, 52]);\n        else if (x === xi) put(x, y, [34, 36, 46]);\n  }\n  const wd = S.wind, e = cl(abs(wd) * 1.4 + 0.25, 0, 1) * (wd \u003c 0 ? -1 : 1), a = abs(e);\n  for (let fx = 20 - md(s0, 32) - 32; fx \u003c W + 6; fx += 32)\n    for (let i = 0; i \u003c 22; i++)\n      if (i \u003c 7) put(fx, 6 + i, [110, 110, 118]);\n      else put(round(fx + e * (i % 5 + 1)), 6 + floor((i - 7) / 5) + round((i % 5 + 1) * ((1 - a) * 0.9 + sin(t * (5 + 7 * a) - i) * 0.12 * a)), i > 11 && i \u003c 17 ? [235, 235, 235] : sc3(A, 230));\n  // The photographers in the infield, and camera flashes going off.\n  for (let k = 0; k \u003c 2; k++) for (let r = 0; r \u003c 49; r++) if (SNAP[r] !== \".\") put(round(k * 36 - 16 - cam * 1.15) + (r % 7), 113 + k * 5 + floor(r / 7), SNAP[r] === \"#\" && r > 6 ? [12, 14, 20] : [48, 48, 56]);\n  for (const f of S.flashes) {\n    const a = 1 - (t - f.t0) / 0.2;\n    for (let i = 0; i \u003c 25 && a \u003c= 1; i++) {\n      const dx = (i % 5) - 2, dy = floor(i / 5) - 2, x = f.x + dx, d = abs(dx) + abs(dy), j = ((f.y + dy) * W + x) * 3;\n      const v = (d ? (d > 1 ? (f.y > 100 && dx * dy === 0 ? 120 : 0) : 150) : 255) * a;\n      if (x >= 0 && x \u003c W && v > 0) for (let c = 0; c \u003c 3; c++) C[j + c] = max(C[j + c], v);\n    }\n  }\n}\n\n// The mat from a little above: the top, the end facing the runway and the side\n// facing us. Then the box and its stop board.\nfunction mat(S) {\n  const cam = S.cam, top = GY - MH, xe = round(-cam);\n  for (let y = 89; y \u003c 108; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const py = y + 0.5, X0 = x + 0.5 + cam, z = (py - top) / OBY, X = X0 - OBX * z, Xf = X0 - OBX * MZ, zl = (X0 - MAT0) / OBX, v = 0.86 + 0.012 * z;\n      if (abs(z) \u003c= MZ && X >= MAT0) put(x, y, md(X, 16) \u003c 1 || z > MZ - 1 ? [110, 150, 250] : [44 * v, 98 * v, 232 * v]);\n      else if (Xf >= MAT0 && py >= top + OBY * MZ && py \u003c= GY + OBY * MZ) put(x, y, abs(py - GY + 0.6) \u003c 0.6 && md(Xf, 9) > 3 ? [215, 220, 235] : md(Xf, 18) \u003c 1 ? [18, 40, 120] : [30, 66, 176]);\n      else if (abs(zl) \u003c= MZ && py >= top + OBY * zl && py \u003c= GY + OBY * zl) put(x, y, [22, 50, 140]);\n    }\n  for (let x = xe - 7; x \u003c= xe; x++) for (let y = GY - 1; y \u003c= GY + 1; y++) put(x, y, x === xe ? [200, 200, 212] : y \u003c GY ? [90, 90, 100] : [10, 10, 14]);\n}\n\nfunction standard(S, z) {\n  const x = round(XS + OBX * z - S.cam), yb = round(GY + OBY * z), yt = round(S.by + OBY * z - 5), near = z > 0;\n  for (let y = yt; y \u003c= yb; y++) for (let w = 0; w \u003c 1 + near; w++) put(x + w, y, sc3([1, 1.02, 1.12], (near ? (w ? 120 : 175) : 100) * (y === yt ? 1.25 : 1)));\n  for (let w = -2; w \u003c= 2; w++) put(x + w, yb, [60, 60, 66]);\n  put(x + (near ? -1 : 1), round(S.by + OBY * z), [220, 220, 225]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const cam = S.cam, P = S.pole, b = S.bar;\n  C = S.C;\n  colours(S);\n  back(S);\n  standard(S, -ZS);\n  mat(S);\n\n  // The pole: carried, bent into an arc in the box, then let go.\n  if (S.ph === RUN) seg(P.x - cam, P.y, P.x1 - cam, P.y1);\n  else if (S.ph === POLE) {\n    const A = arc(P.px, P.py, P.c, P.L), n = ceil(P.L * 2), a = A[3] + A[4], s = A[4] > 0 ? 2.5 : -2.5, ex = A[0] + A[2] * cos(a) - cam, ey = A[1] + A[2] * sin(a);\n    for (let i = 0; i \u003c= n; i++) splat(A[0] + A[2] * cos(A[3] + (A[4] * i) / n) - cam, A[1] + A[2] * sin(A[3] + (A[4] * i) / n));\n    seg(ex, ey, ex - s * sin(a), ey + s * cos(a));\n  } else if (S.free) seg(-cam, BOXY, -cam - S.free.L * sin(S.free.a), BOXY - S.free.L * cos(S.free.a));\n\n  // The bar, striped, on its pegs or on its way down.\n  let [y0, y1] = [S.by - OBY * ZS, S.by + OBY * ZS];\n  const w = b.st === 1 || b.st === 2 ? sin(b.t * 48) * exp(-b.t * (b.st === 2 ? 5 : 2)) * 1.3 : 0;\n  if (b.st >= 3) [y0, y1] = b.y;\n  for (let i = 0; i \u003c= 36 && b.st !== 4; i++) put(floor(lerp(XS - OBX * ZS, XS + OBX * ZS, i / 36) - cam), floor(lerp(y0 + w, y1 + w * 0.6, i / 36)), floor(i / 5.2) % 2 ? [240, 240, 236] : sc3(S.acc, 120, 60));\n\n  // The vaulter, then the near upright in front.\n  const f = S.fig;\n  if (f) figure(S, f.x, f.y, f.th, f.fc, f.arms, f.L, f.hands, S.cols, 1);\n  standard(S, ZS);\n\n  // The judge by the box, a flag up once the bar has settled.\n  const up = S.ph === MAT && S.verdict && S.pt \u003c 2.6, jc = [[34, 50, 120], [70, 70, 82], [225, 165, 125], [40, 40, 44]];\n  figure(S, -13.2, 101.6, 0, 1, [up ? 0.2 : 2.9, 2.95], [0, 0, 0, 0], null, jc.concat(jc), 0.85);\n  for (let r = 0; r \u003c 9 && up; r++) put(round(-12.3 - cam) + (r % 3), 91 + floor(r / 3), S.verdict === 1 ? [245, 245, 245] : [235, 25, 25]);\n\n  // Glare from the lamp banks, over everything.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 0; y \u003c 30; y++)\n      for (let x = max(0, xi - 60), j = (y * W + x) * 3; x \u003c min(W, xi + 60); x++, j += 3) {\n        const v = S.glare[y * 128 + x - xi + 64];\n        C[j] += v;\n        C[j + 1] += v * 0.96;\n        C[j + 2] += v * 0.88;\n      }\n  }\n\n  // The results board: height, marks at it, the vaulter's colours.\n  const hc = S.verdict === 1 ? [255, 255, 255] : [255, 40, 40];\n  for (let y = 1; y \u003c 13; y++) for (let x = 39; x \u003c 63; x++) for (let c = 0, j = (y * W + x) * 3; c \u003c 3; c++) C[j + c] = y === 1 ? S.acc[c] * 230 : C[j + c] * 0.2 + [6, 10, 26][c] * 0.8 + hc[c] * S.hudF * 0.75;\n  text((S.base + 0.1 * S.notch).toFixed(2) + \"M\", 41, 3, [255, 180, 40]);\n  S.marks.slice(-3).forEach((m, i) => text(m, 41 + i * 4, 8, m === \"X\" ? [255, 50, 40] : [240, 240, 240]));\n  for (let r = 0; r \u003c 30; r++) put(55 + (r % 6), 8 + floor(r / 6), r \u003c 12 ? S.cols[0] : S.cols[1]);\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour."},{"name":"Speed","min":0.2,"max":3,"about":"Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2."},{"name":"Bar","min":5,"max":6.2,"about":"The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses."},{"name":"Wind","min":-1,"max":1,"about":"Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run."}],"start":[0,2,5,0.06],"measures":{"motion":0.7696,"detail":0.0793,"edges":0.2827,"complexity":0.9294,"coverage":0.6904,"colour":0.1943,"drift":0.0642},"knobResponse":[0.0451,0.0895,0.0561,0.043]},{"slug":"polya-urn","title":"Pólya Urn","family":"data","round":38,"note":"폴리아 항아리 64개가 한 열에 하나씩 나란히 공을 뽑아요. 로그 시계를 따라 위에서는 크게 흔들리다 아래로 가며 저마다 다른 섞임 비율로 굳고, 한 판이 끝나면 열들이 굳은 비율대로 줄을 서서 고르게 퍼진 극한을 곧은 그러데이션으로 보여 줘요. K3 은 처음 공을 늘려 열들을 가운데 섞임으로 모으고, K4 는 한 번에 더하는 공을 늘려 바코드를 두 색으로 갈라요.","idea":"Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Pólya Urn\n// Family:  data\n// Idea:    Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Pólya's urn (Florian Eggenberger and George Pólya, 1923), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8\n//\n// Knob 1: Hue. Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive.\n// Knob 2: Speed. How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it.\n// Knob 3: Balls. The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends.\n// Knob 4: Added. Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one.\n\nconst W = 64, H = 128;\n// The clock: row r is draw n(r) = N0 ((1 + NMAX / N0)^(r / 127) - 1), 0 at\n// the top and NMAX at the bottom: the first draw lands on row 12, the tenth\n// on row 40, the hundredth on row 77.\nconst NMAX = 2000, N0 = 1;\n// One run fills the panel in FILL / Speed seconds; the finished run waits\n// HOLD1 seconds, sorts at SORTS transposition rounds a second, then shows the\n// ramp for HOLD2 seconds before the next run comes down over it.\nconst FILL = 16, HOLD1 = 1.2, SORTS = 26, HOLD2 = 3.2;\nconst { floor, min, max, abs, round, random, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Draw count at each row boundary.\nconst NAT = new Float64Array(H);\nfor (let r = 0; r \u003c H; r++) NAT[r] = round(N0 * (pow(1 + NMAX / N0, r / (H - 1)) - 1));\n\nexport function setup(params) {\n  params.s = {\n    init: false, phase: 0, t: 0, front: 0, rounds: 0, still: false,\n    balls: 1, added: 1, hue: 0, speed: 2,\n    // Each urn: balls of the first colour, all balls, draws made.\n    A: new Float64Array(W), T: new Float64Array(W), n: new Float64Array(W),\n    // Share of the first colour at each row, this run and the run before.\n    cur: new Float32Array(W * H), old: new Float32Array(W * H),\n    ca: [0, 0, 0], cb: [0, 0, 0],\n  };\n}\n\nfunction startRun(S) {\n  for (let i = 0; i \u003c W; i++) {\n    S.A[i] = S.balls;\n    S.T[i] = 2 * S.balls;\n    S.n[i] = 0;\n  }\n  S.front = 0;\n  S.t = 0;\n  S.phase = 0;\n  S.rounds = 0;\n  S.still = false;\n}\n\n// Run every urn on to row r's draw count and write the shares of the rows it\n// passes; the row the front stands in shows the share as it is now.\nfunction advance(S, rf) {\n  const { A, T, n, cur } = S, c = S.added;\n  const r1 = min(H - 1, floor(rf));\n  for (let i = 0; i \u003c W; i++) {\n    let a = A[i], t = T[i], k = n[i];\n    for (let r = S.front; r \u003c= r1; r++) {\n      const goal = NAT[r];\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[r * W + i] = a / t;\n    }\n    // Draws inside the row the front is crossing, toward the next row.\n    if (r1 \u003c H - 1) {\n      const goal = NAT[r1] + (NAT[r1 + 1] - NAT[r1]) * (rf - r1);\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[(r1 + 1) * W + i] = a / t;\n    }\n    A[i] = a;\n    T[i] = t;\n    n[i] = k;\n  }\n  S.front = r1 + 1;\n}\n\n// One round of odd-even transposition sort on the columns, by the bottom\n// row's share; whole columns move, their history with them.\nfunction sortRound(S) {\n  const { cur } = S, base = (H - 1) * W, odd = S.rounds & 1;\n  let moved = false;\n  for (let i = odd; i + 1 \u003c W; i += 2) {\n    if (cur[base + i] > cur[base + i + 1]) {\n      for (let r = 0; r \u003c H; r++) {\n        const p = r * W + i, v = cur[p];\n        cur[p] = cur[p + 1];\n        cur[p + 1] = v;\n      }\n      moved = true;\n    }\n  }\n  S.rounds++;\n  return moved;\n}\n\nfunction firstRun(S) {\n  // The panel opens on a finished run, so the first run comes down over it.\n  startRun(S);\n  advance(S, H - 1);\n  while (sortRound(S) || sortRound(S));\n  S.old.set(S.cur);\n  startRun(S);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const balls = round(cl(k[2], 1, 8)), added = round(cl(k[3], 1, 8));\n  // A change of Balls or Added starts a fresh run under the new rule.\n  if (S.init && (balls !== S.balls || added !== S.added)) {\n    S.balls = balls;\n    S.added = added;\n    // What is on the panel now becomes the run the new one comes down over.\n    if (S.phase === 0) S.old.set(S.cur.subarray(0, S.front * W));\n    else S.old.set(S.cur);\n    startRun(S);\n  }\n  S.balls = balls;\n  S.added = added;\n  if (!S.init) {\n    firstRun(S);\n    S.init = true;\n  }\n  S.t += d;\n  if (S.phase === 0) {\n    const rf = min(H - 1, (S.t * S.speed * (H - 1)) / FILL);\n    advance(S, rf);\n    if (rf >= H - 1) {\n      S.phase = 1;\n      S.t = 0;\n    }\n  } else if (S.phase === 1) {\n    if (S.t > HOLD1) {\n      S.phase = 2;\n      S.t = 0;\n    }\n  } else if (S.phase === 2) {\n    // Sorting rounds at SORTS a second; two rounds in a row that move\n    // nothing mean the columns are in order.\n    while (S.t > 1 / SORTS) {\n      S.t -= 1 / SORTS;\n      const moved = sortRound(S);\n      if (!moved && S.still) {\n        S.phase = 3;\n        S.t = 0;\n        break;\n      }\n      S.still = !moved;\n    }\n  } else if (S.t > HOLD2) {\n    S.old.set(S.cur);\n    startRun(S);\n  }\n}\n\nfunction colours(S) {\n  // The first colour, and the second a third of the wheel on; orange and\n  // yellow are paled and lifted.\n  for (const [h, out] of [[S.hue + 0.47, S.ca], [S.hue + 0.8, S.cb]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.12) / 0.1, 0, 1);\n    hsv(h, 0.78 - 0.3 * warm, 1, out);\n    if (warm > 0) {\n      const lift = 1 + 0.25 * warm;\n      out[0] = min(1, out[0] * lift);\n      out[1] = min(1, out[1] * lift);\n      out[2] = min(1, out[2] * lift);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  colours(S);\n  const { ca, cb, cur, old } = S;\n  const fill = S.phase === 0, fr = S.front;\n  for (let y = 0; y \u003c H; y++) {\n    const live = !fill || y \u003c fr;\n    const atFront = fill && y === fr - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, s = live ? cur[p] : old[p];\n      // The mix of the two colours by the share of the first, lifted halfway\n      // back to full brightness, so two colours either side of yellow mix to\n      // yellow and not olive. A mix in orange or yellow is lifted and paled\n      // further, a quarter of the way to white. The run before waits under\n      // the front at 70%, sorted, so the new barcode reads against its ramp.\n      let r = s * ca[0] + (1 - s) * cb[0], g = s * ca[1] + (1 - s) * cb[1], b = s * ca[2] + (1 - s) * cb[2];\n      const m = max(r, g, b), warm = cl((min(r, g) - b) / m, 0, 1);\n      const k = ((live ? 0.95 : 0.7) + (live ? 0.05 : 0.3) * warm) * (0.5 + 0.5 / m), pale = 0.25 * warm;\n      r = r * k + (1 - r * k) * pale;\n      g = g * k + (1 - g * k) * pale;\n      b = b * k + (1 - b * k) * pale;\n      if (atFront) {\n        r = r * 0.5 + 0.5;\n        g = g * 0.5 + 0.5;\n        b = b * 0.5 + 0.5;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","layer":{"id":"layer-polya-urn","type":"code","name":"polya-urn","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pólya Urn\n// Family:  data\n// Idea:    Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Pólya's urn (Florian Eggenberger and George Pólya, 1923), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8\n//\n// Knob 1: Hue. Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive.\n// Knob 2: Speed. How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it.\n// Knob 3: Balls. The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends.\n// Knob 4: Added. Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one.\n\nconst W = 64, H = 128;\n// The clock: row r is draw n(r) = N0 ((1 + NMAX / N0)^(r / 127) - 1), 0 at\n// the top and NMAX at the bottom: the first draw lands on row 12, the tenth\n// on row 40, the hundredth on row 77.\nconst NMAX = 2000, N0 = 1;\n// One run fills the panel in FILL / Speed seconds; the finished run waits\n// HOLD1 seconds, sorts at SORTS transposition rounds a second, then shows the\n// ramp for HOLD2 seconds before the next run comes down over it.\nconst FILL = 16, HOLD1 = 1.2, SORTS = 26, HOLD2 = 3.2;\nconst { floor, min, max, abs, round, random, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Draw count at each row boundary.\nconst NAT = new Float64Array(H);\nfor (let r = 0; r \u003c H; r++) NAT[r] = round(N0 * (pow(1 + NMAX / N0, r / (H - 1)) - 1));\n\nexport function setup(params) {\n  params.s = {\n    init: false, phase: 0, t: 0, front: 0, rounds: 0, still: false,\n    balls: 1, added: 1, hue: 0, speed: 2,\n    // Each urn: balls of the first colour, all balls, draws made.\n    A: new Float64Array(W), T: new Float64Array(W), n: new Float64Array(W),\n    // Share of the first colour at each row, this run and the run before.\n    cur: new Float32Array(W * H), old: new Float32Array(W * H),\n    ca: [0, 0, 0], cb: [0, 0, 0],\n  };\n}\n\nfunction startRun(S) {\n  for (let i = 0; i \u003c W; i++) {\n    S.A[i] = S.balls;\n    S.T[i] = 2 * S.balls;\n    S.n[i] = 0;\n  }\n  S.front = 0;\n  S.t = 0;\n  S.phase = 0;\n  S.rounds = 0;\n  S.still = false;\n}\n\n// Run every urn on to row r's draw count and write the shares of the rows it\n// passes; the row the front stands in shows the share as it is now.\nfunction advance(S, rf) {\n  const { A, T, n, cur } = S, c = S.added;\n  const r1 = min(H - 1, floor(rf));\n  for (let i = 0; i \u003c W; i++) {\n    let a = A[i], t = T[i], k = n[i];\n    for (let r = S.front; r \u003c= r1; r++) {\n      const goal = NAT[r];\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[r * W + i] = a / t;\n    }\n    // Draws inside the row the front is crossing, toward the next row.\n    if (r1 \u003c H - 1) {\n      const goal = NAT[r1] + (NAT[r1 + 1] - NAT[r1]) * (rf - r1);\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[(r1 + 1) * W + i] = a / t;\n    }\n    A[i] = a;\n    T[i] = t;\n    n[i] = k;\n  }\n  S.front = r1 + 1;\n}\n\n// One round of odd-even transposition sort on the columns, by the bottom\n// row's share; whole columns move, their history with them.\nfunction sortRound(S) {\n  const { cur } = S, base = (H - 1) * W, odd = S.rounds & 1;\n  let moved = false;\n  for (let i = odd; i + 1 \u003c W; i += 2) {\n    if (cur[base + i] > cur[base + i + 1]) {\n      for (let r = 0; r \u003c H; r++) {\n        const p = r * W + i, v = cur[p];\n        cur[p] = cur[p + 1];\n        cur[p + 1] = v;\n      }\n      moved = true;\n    }\n  }\n  S.rounds++;\n  return moved;\n}\n\nfunction firstRun(S) {\n  // The panel opens on a finished run, so the first run comes down over it.\n  startRun(S);\n  advance(S, H - 1);\n  while (sortRound(S) || sortRound(S));\n  S.old.set(S.cur);\n  startRun(S);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const balls = round(cl(k[2], 1, 8)), added = round(cl(k[3], 1, 8));\n  // A change of Balls or Added starts a fresh run under the new rule.\n  if (S.init && (balls !== S.balls || added !== S.added)) {\n    S.balls = balls;\n    S.added = added;\n    // What is on the panel now becomes the run the new one comes down over.\n    if (S.phase === 0) S.old.set(S.cur.subarray(0, S.front * W));\n    else S.old.set(S.cur);\n    startRun(S);\n  }\n  S.balls = balls;\n  S.added = added;\n  if (!S.init) {\n    firstRun(S);\n    S.init = true;\n  }\n  S.t += d;\n  if (S.phase === 0) {\n    const rf = min(H - 1, (S.t * S.speed * (H - 1)) / FILL);\n    advance(S, rf);\n    if (rf >= H - 1) {\n      S.phase = 1;\n      S.t = 0;\n    }\n  } else if (S.phase === 1) {\n    if (S.t > HOLD1) {\n      S.phase = 2;\n      S.t = 0;\n    }\n  } else if (S.phase === 2) {\n    // Sorting rounds at SORTS a second; two rounds in a row that move\n    // nothing mean the columns are in order.\n    while (S.t > 1 / SORTS) {\n      S.t -= 1 / SORTS;\n      const moved = sortRound(S);\n      if (!moved && S.still) {\n        S.phase = 3;\n        S.t = 0;\n        break;\n      }\n      S.still = !moved;\n    }\n  } else if (S.t > HOLD2) {\n    S.old.set(S.cur);\n    startRun(S);\n  }\n}\n\nfunction colours(S) {\n  // The first colour, and the second a third of the wheel on; orange and\n  // yellow are paled and lifted.\n  for (const [h, out] of [[S.hue + 0.47, S.ca], [S.hue + 0.8, S.cb]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.12) / 0.1, 0, 1);\n    hsv(h, 0.78 - 0.3 * warm, 1, out);\n    if (warm > 0) {\n      const lift = 1 + 0.25 * warm;\n      out[0] = min(1, out[0] * lift);\n      out[1] = min(1, out[1] * lift);\n      out[2] = min(1, out[2] * lift);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  colours(S);\n  const { ca, cb, cur, old } = S;\n  const fill = S.phase === 0, fr = S.front;\n  for (let y = 0; y \u003c H; y++) {\n    const live = !fill || y \u003c fr;\n    const atFront = fill && y === fr - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, s = live ? cur[p] : old[p];\n      // The mix of the two colours by the share of the first, lifted halfway\n      // back to full brightness, so two colours either side of yellow mix to\n      // yellow and not olive. A mix in orange or yellow is lifted and paled\n      // further, a quarter of the way to white. The run before waits under\n      // the front at 70%, sorted, so the new barcode reads against its ramp.\n      let r = s * ca[0] + (1 - s) * cb[0], g = s * ca[1] + (1 - s) * cb[1], b = s * ca[2] + (1 - s) * cb[2];\n      const m = max(r, g, b), warm = cl((min(r, g) - b) / m, 0, 1);\n      const k = ((live ? 0.95 : 0.7) + (live ? 0.05 : 0.3) * warm) * (0.5 + 0.5 / m), pale = 0.25 * warm;\n      r = r * k + (1 - r * k) * pale;\n      g = g * k + (1 - g * k) * pale;\n      b = b * k + (1 - b * k) * pale;\n      if (atFront) {\n        r = r * 0.5 + 0.5;\n        g = g * 0.5 + 0.5;\n        b = b * 0.5 + 0.5;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it."},{"name":"Balls","min":1,"max":8,"about":"The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends."},{"name":"Added","min":1,"max":8,"about":"Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one."}],"start":[0,2,1,1],"measures":{"motion":0.0395,"detail":0.0065,"edges":0.0554,"complexity":1.2351,"coverage":1,"colour":0.4287,"drift":0.1821},"knobResponse":[0.3523,0.0975,0.0619,0.0708]},{"slug":"pop-up-book","title":"Pop-up Book","family":"paper","round":21,"note":"탁자에 펼친 팝업북에서 성과 숲, 등대, 도시가 종이 카드 여러 겹으로 일어서고, 그동안 달이 홈을 따라 가고 사슴이 고개를 숙여요. 페이지가 넘어가면 장면이 가운데 접힌 선으로 납작하게 눕고, 넘어오는 페이지에서 다음 장면이 일어나요.","idea":"A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.","buttons":"K1 tap turns the page now.","code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-pop-up-book","type":"code","name":"pop-up-book","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":3,"about":"Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three."},{"name":"Layers","min":4,"max":6,"about":"How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain)."},{"name":"Lamp","min":0,"max":1,"about":"Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing."}],"start":[0,2,4,0.06],"measures":{"motion":0.2969,"detail":0.0558,"edges":0.4541,"complexity":0.5762,"coverage":0.9872,"colour":0.1893,"drift":0.1346},"knobResponse":[0.1392,0.0773,0.0475,0.1266]},{"slug":"popcorn","title":"Popcorn","family":"kitchen","round":19,"note":"영화관 팝콘 수레가 128줄을 다 써요. 케틀에서 낟알이 터져 뛰고 넘쳐 떨어지다가 케틀이 기울어 한 배치를 더미에 쏟고, K1 을 누르면 스쿱이 더미를 떠 가요.","idea":"A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.","buttons":"K1 tap sends the scoop in now.","code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-popcorn","type":"code","name":"popcorn","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1."},{"name":"Heat","min":0.2,"max":3,"about":"How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one."},{"name":"Batch","min":6,"max":16,"about":"The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap."},{"name":"Heap","min":0,"max":1,"about":"How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle."}],"start":[0,2,6,0.06],"measures":{"motion":0.2278,"detail":0.0649,"edges":0.5093,"complexity":0.7081,"coverage":0.9514,"colour":0.2616,"drift":0.0636},"knobResponse":[0.0358,0.0496,0.0725,0.0766]},{"slug":"population-pyramid","title":"Population Pyramid","family":"data","round":25,"note":"가상의 나라의 인구 피라미드가 한 살에 한 줄씩 움직여요. 왼쪽이 남자, 오른쪽이 여자이고, 10년마다 태어난 세대가 제 색 띠로 해마다 한 줄씩 올라가요. 1995년의 베이비붐 띠가 위로 올라가 2060년에 위가 무거운 항아리꼴이 되면, 1820년의 뾰족한 삼각형으로 돌아가 240년을 다시 지나요. K3 을 내리면 아래가 좁아져 거꾸로 선 피라미드가 되고, K1 을 누르면 그해가 전쟁이나 유행병이 되어 패인 홈이 위로 올라가요.","idea":"The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.","buttons":"K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.","code":"// ===== Patternflow pattern =====\n// Title:   Population Pyramid\n// Family:  data\n// Idea:    The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the animated age pyramids of national statistics offices and the cohort-component model demographers project with\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1\n//\n// Knob 1: Palette. Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part.\n// Knob 2: Speed. At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid.\n// Knob 3: Births. Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads.\n// Knob 4: Migration. Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed.\n// Buttons: K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, exp, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\n\n// Ages 0 to 105 have a row each; the top row holds everyone older.\nconst NA = 107;\n// Row of age 0, first bar column for men (going left) and for women (going right), the widest bar.\nconst [Y0, MX, FX, BAR] = [121, 30, 33, 23];\n// The story runs from 1820 to 2060 and goes back to 1820. The first start opens in OPEN, the boom in middle age and\n// the old reaching the top of the panel, with the years before it run unseen.\nconst [START, END, OPEN] = [1820, 2060, 1995];\n\n// Mortality level: 0 where a quarter of babies die in their first year and life lasts 30 to 33 years on average, 1 where it lasts 79 to 83.\nconst LK = [[1820, 0], [1850, 0.02], [1880, 0.14], [1910, 0.34], [1950, 0.66], [1975, 0.84], [2000, 0.94], [2060, 1]];\n// Children a woman, before Births scales them.\nconst TK = [[1820, 6], [1865, 6], [1885, 5.5], [1905, 4.3], [1926, 2.9], [1933, 2.2], [1940, 2.3], [1947, 3.1], [1955, 3.5], [1962, 3.3], [1968, 2.5], [1977, 1.8], [1992, 1.55], [2008, 1.25], [2035, 1.05], [2060, 1]];\n// Two wars, the influenza after the first, and a cholera year in the opening decade.\nconst EV = [[1914, 1918, 0], [1940, 1945, 0], [1919, 1919, 1], [1823, 1823, 1]];\n\nconst key = (K, y) => {\n  if (y \u003c= K[0][0]) return K[0][1];\n  for (let i = 1; i \u003c K.length; i++)\n    if (y \u003c= K[i][0]) {\n      const t = (y - K[i - 1][0]) / (K[i][0] - K[i - 1][0]);\n      return mix(K[i - 1][1], K[i][1], t * t * (3 - 2 * t));\n    }\n  return K[K.length - 1][1];\n};\n\n// Where in a woman's life the children come: a hump peaking at 28.\nconst PHI = new Float64Array(NA);\n{\n  let s = 0;\n  for (let a = 15; a \u003c 50; a++) s += PHI[a] = (a - 14) ** 2.5 * exp(-(a - 14) / 5.5);\n  for (let a = 15; a \u003c 50; a++) PHI[a] /= s;\n}\n// Where migrants are in life: around 26.\nconst MIG = new Float64Array(NA).map((_, a) => exp(-(((a - 26) / 8) ** 2)));\n\n// Yearly hazard of dying at age a. kind: -1 a plain year, 0 war, 1 epidemic, 2 famine.\nfunction hazard(a, L, male, kind) {\n  let h = a === 0 ? mix(0.27, 0.0035, L) : a \u003c 15 ? mix(0.04, 0.0003, L) * exp(-(a - 1) / 2.2) : 0;\n  h += mix(0.008, 0.0003, L) * (male && a > 14 && a \u003c 40 ? 1.9 : 1);\n  h += 0.1 * exp(0.1 * (a - mix(64, 86, L) - (male ? 0 : mix(2, 4, L))));\n  if (kind === 0 && male && a > 17 && a \u003c 43) h += 0.09;\n  if (kind === 1) h += 0.015 + (a > 17 && a \u003c 41 ? 0.025 : 0) + (a \u003c 5 ? 0.08 : 0) + (a > 64 ? 0.06 : 0);\n  if (kind === 2) h += 0.02 + (a \u003c 5 ? 0.07 : 0) + (a > 59 ? 0.04 : 0);\n  return h;\n}\n\n// A state is six rows of ages: men and women living here, the part of them who came as migrants, and those who left.\nconst SV = new Float64Array(NA);\n// One year of the cohort-component model: the dead leave, everyone is a year older, the year's births come in, migrants come or go.\nfunction step(src, dst, y, fk, mig, kind, push) {\n  const L = key(LK, y);\n  let b = 0;\n  for (let a = 15; a \u003c 50; a++) b += src[1][a] * PHI[a];\n  b *= key(TK, y) * fk * [1, 0.62, 0.75, 0.85][kind + 1] * (push ? 0.7 : 1);\n  for (let s = 0; s \u003c 2; s++) {\n    for (let a = 0; a \u003c NA; a++) SV[a] = exp(-hazard(a, L, !s, kind) * (a ? 1 : 0.5));\n    for (let k = s; k \u003c 6; k += 2) {\n      const S = src[k], D = dst[k];\n      D[NA - 1] = S[NA - 1] * SV[NA - 1] + S[NA - 2] * SV[NA - 2];\n      for (let a = NA - 2; a > 0; a--) D[a] = S[a - 1] * SV[a - 1];\n      D[0] = k \u003c 2 ? b * (s ? 0.488 : 0.512) * SV[0] : 0;\n    }\n    const [D, I, E] = [dst[s], dst[s + 2], dst[s + 4]];\n    for (let a = 12; a \u003c 60; a++)\n      if (mig > 0) {\n        const n = mig * 0.00045 * MIG[a] * (s ? 0.9 : 1.1);\n        (D[a] += n), (I[a] += n);\n      } else if (mig \u003c 0) {\n        const f = 1 - exp(mig * 0.035 * MIG[a]);\n        (E[a] += D[a] * f), (D[a] *= 1 - f), (I[a] *= 1 - f);\n      }\n  }\n  // Keep the people living here at one: the bars are shares of them.\n  let t = 0;\n  for (let a = 0; a \u003c NA; a++) t += dst[0][a] + dst[1][a];\n  for (const A of dst) for (let a = 0; a \u003c NA; a++) A[a] /= t;\n}\n\n// A crisis by the script, or by chance in the hungry decades.\nconst kindOf = (y) => {\n  for (const [a, b, k] of EV) if (y >= a && y \u003c= b) return k;\n  return y \u003c 1880 && rnd() \u003c 0.07 ? 2 : -1;\n};\n\n// 3x5 digits, then M and F.\nconst GL = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf, 0x5fed, 0x79a4];\n\nexport function setup(params) {\n  const S = () => Array.from({ length: 6 }, () => new Float64Array(NA));\n  params.s = { cur: S(), nxt: S(), tmp: S(), y: START, u: 0, scl: 0, f: new Float32Array(N * 3), ready: 0, war: 0, fade: 0, kinds: new Int8Array(END - START + 2) };\n}\n\n// Run the opening regime for 110 years, longer than anyone lives, so it reaches its own shape and the knobs show from the first frame,\n// then the story up to the year it opens on.\nfunction warm(P, fk, mig, open) {\n  for (let s = 0; s \u003c 6; s++) for (let a = 0; a \u003c NA; a++) P.cur[s][a] = s \u003c 2 ? exp(-0.04 * a) : 0;\n  for (let i = 0; i \u003c 110; i++) {\n    step(P.cur, P.tmp, START - 110 + i, fk, mig, rnd() \u003c 0.07 ? 2 : -1, 0);\n    [P.cur, P.tmp] = [P.tmp, P.cur];\n  }\n  P.y = START;\n  P.u = 0;\n  P.kinds.fill(-1);\n  next(P, fk, mig, 0);\n  while (P.y \u003c open) [P.cur, P.nxt] = [P.nxt, P.cur], P.y++, next(P, fk, mig, 0);\n  P.scl = 0;\n}\n\n// Work out the year being lived now, from the state at its first day.\nfunction next(P, fk, mig, push) {\n  const k = push ? push - 1 : kindOf(P.y);\n  P.kinds[P.y - START] = k;\n  step(P.cur, P.nxt, P.y, fk, mig, k, push);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const fk = exp(0.47 * cl(k[2], -1, 1)), k4 = cl(k[3], -1, 1), mig = Math.sign(k4) * max(0, abs(k4) - 0.1) / 0.9, spd = 1.5 * cl(k[1], 0.25, 6);\n  P.hue = k[0];\n  if (!P.ready) (P.ready = 1), warm(P, fk, mig, OPEN);\n  // K1 tap: this year is a war, then an epidemic, by turns.\n  if (input.btnPressed && input.btnPressed[0] && P.y \u003c END) next(P, fk, mig, (P.war ^= 1) ? 1 : 2);\n  if (P.fade > 0) {\n    // The story is over: hold the urn a moment, dim, start again from the old triangle, light up.\n    P.fade += d;\n    if (P.fade > 2 && P.y >= END) warm(P, fk, mig, START);\n    if (P.fade > 2.8) P.fade = 0;\n  } else {\n    P.u += d * spd;\n    for (let i = 0; i \u003c 6 && P.u >= 1; i++) {\n      P.u -= 1;\n      [P.cur, P.nxt] = [P.nxt, P.cur];\n      if (++P.y >= END) {\n        (P.u = 0), (P.fade = 0.001);\n        break;\n      }\n      next(P, fk, mig, 0);\n    }\n  }\n  // The widest bar sets the scale, followed gently so a single year does not jolt it.\n  let m = 1e-9;\n  for (let a = 0; a \u003c NA; a++) m = max(m, P.cur[0][a], P.cur[1][a], P.nxt[0][a], P.nxt[1][a]);\n  const want = BAR / m;\n  P.scl = P.scl ? P.scl * exp(cl(Math.log(want / P.scl), -1, 1) * min(1, d * 1.5)) : want;\n  P.scl = min(P.scl, (BAR + 0.5) / m);\n}\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i % 6].map((c) => c * 255);\n}\n\nlet FB;\nfunction put(x, y, c, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  FB[o] = c[0] * a;\n  FB[o + 1] = c[1] * a;\n  FB[o + 2] = c[2] * a;\n}\nfunction glyph(g, x, y, c, s = 1) {\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((GL[g] >> (14 - r * 3 - q)) & 1) for (let i = 0; i \u003c s; i++) for (let j = 0; j \u003c s; j++) put(x + q * s + j, y + r * s + i, c);\n}\nfunction num(n, x, y, c, w, s = 1) {\n  const t = String(n).padStart(w, \"0\");\n  for (let i = 0; i \u003c t.length; i++) glyph(+t[i], x + i * 4 * s, y, c, s);\n}\n\n// A birth decade's colours: the band, its migrants, its leavers and its label. Decades step bright, middle, dark;\n// the darker two keep off orange and yellow, which go brown and olive when dim.\nconst LV = [1, 0.66, 0.4];\nfunction decade(hue, c) {\n  const l = ((c % 3) + 3) % 3, h0 = hue + c * 0.137, h = l ? 0.2 + (h0 - floor(h0)) * 0.82 : h0;\n  return [hsv(h, 0.8, LV[l]), hsv(h, 0.3, max(0.8, LV[l])), hsv(h, 0.6, 0.55), hsv(h, 0.55, 1)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  FB = P.f;\n  FB.fill(0);\n  const u = P.u, hue = 0.55 + (P.hue || 0), vis = P.fade > 1.2 ? min(1, abs(P.fade - 2) / 0.8) : 1;\n  // The age-0 row holds last year's births; the bands move up a row half way through the year.\n  const yb = P.y - 1 + (u >= 0.5 ? 1 : 0);\n  const grid = [38, 38, 38], lab = [110, 110, 120];\n  // Faint lines every ten years of age, and the ages up the left side.\n  for (let a = 0; a \u003c= 100; a += 10) {\n    const y = Y0 - a;\n    for (let x = 1; x \u003c W; x += 2) put(x, y, grid);\n    if (a % 20 === 0) num(a, 0, y - 2, lab, 1);\n  }\n  // The bars, one row per year of age, mid-year between the two states.\n  const C = P.cur, X = P.nxt, at = (s, a) => mix(C[s][a], X[s][a], u) * P.scl, memo = {}, dec = (c) => memo[c] || (memo[c] = decade(hue, c));\n  for (let a = 0; a \u003c NA; a++) {\n    const y = Y0 - a, [c, pale, ghost] = dec(floor((yb - a) / 10));\n    for (let s = 0; s \u003c 2; s++) {\n      const len = min(BAR, at(s, a)), imm = min(len, at(s + 2, a)), out = min(BAR + 1 - len, at(s + 4, a));\n      const px = (i, q, f = 1) => put(s ? FX + i : MX - i, y, q, f);\n      const n = floor(len), fr = len - n;\n      for (let i = 0; i \u003c n; i++) px(i, i + 0.5 \u003c len - imm ? c : pale);\n      if (fr > 0.05) px(n, imm > 0.5 ? pale : c, fr);\n      // Those who left, dotted past the end of the bar.\n      for (let i = n + 1; i \u003c len + out; i++) if ((i + a) & 1) px(i, ghost);\n    }\n  }\n  // The birth decade of each band, written beside it on the right in its own colour.\n  for (let c = floor((yb - 106) / 10); c \u003c= floor(yb / 10); c++) {\n    const top = min(NA - 1, yb - c * 10), bot = max(0, yb - c * 10 - 9);\n    if (top - bot \u003c 4) continue;\n    // A decade with hardly anyone left keeps a dim label.\n    let w = 0;\n    for (let a = bot; a \u003c= top; a++) w = max(w, at(0, a), at(1, a));\n    num((c * 10) % 100, 57, Math.round(Y0 - cl(yb - c * 10 - 4.5, bot + 2, top - 2)) - 2, dec(c)[3].map((q) => q * cl(w / 3, 0.3, 1)), 2);\n  }\n  // The year being lived, in the colour of the decade being born, red in a year of war or epidemic.\n  const kind = P.kinds[P.y - START] ?? -1, ycol = kind === 0 || kind === 1 ? [255, 60, 40] : decade(hue, floor(P.y / 10))[3];\n  num(P.y, 17, 2, ycol, 4, 2);\n  glyph(10, 18, 123, lab), glyph(11, 43, 123, lab);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, FB[o] * vis) | 0, min(255, FB[o + 1] * vis) | 0, min(255, FB[o + 2] * vis) | 0);\n}\n","layer":{"id":"layer-population-pyramid","type":"code","name":"population-pyramid","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Population Pyramid\n// Family:  data\n// Idea:    The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the animated age pyramids of national statistics offices and the cohort-component model demographers project with\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1\n//\n// Knob 1: Palette. Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part.\n// Knob 2: Speed. At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid.\n// Knob 3: Births. Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads.\n// Knob 4: Migration. Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed.\n// Buttons: K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, exp, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\n\n// Ages 0 to 105 have a row each; the top row holds everyone older.\nconst NA = 107;\n// Row of age 0, first bar column for men (going left) and for women (going right), the widest bar.\nconst [Y0, MX, FX, BAR] = [121, 30, 33, 23];\n// The story runs from 1820 to 2060 and goes back to 1820. The first start opens in OPEN, the boom in middle age and\n// the old reaching the top of the panel, with the years before it run unseen.\nconst [START, END, OPEN] = [1820, 2060, 1995];\n\n// Mortality level: 0 where a quarter of babies die in their first year and life lasts 30 to 33 years on average, 1 where it lasts 79 to 83.\nconst LK = [[1820, 0], [1850, 0.02], [1880, 0.14], [1910, 0.34], [1950, 0.66], [1975, 0.84], [2000, 0.94], [2060, 1]];\n// Children a woman, before Births scales them.\nconst TK = [[1820, 6], [1865, 6], [1885, 5.5], [1905, 4.3], [1926, 2.9], [1933, 2.2], [1940, 2.3], [1947, 3.1], [1955, 3.5], [1962, 3.3], [1968, 2.5], [1977, 1.8], [1992, 1.55], [2008, 1.25], [2035, 1.05], [2060, 1]];\n// Two wars, the influenza after the first, and a cholera year in the opening decade.\nconst EV = [[1914, 1918, 0], [1940, 1945, 0], [1919, 1919, 1], [1823, 1823, 1]];\n\nconst key = (K, y) => {\n  if (y \u003c= K[0][0]) return K[0][1];\n  for (let i = 1; i \u003c K.length; i++)\n    if (y \u003c= K[i][0]) {\n      const t = (y - K[i - 1][0]) / (K[i][0] - K[i - 1][0]);\n      return mix(K[i - 1][1], K[i][1], t * t * (3 - 2 * t));\n    }\n  return K[K.length - 1][1];\n};\n\n// Where in a woman's life the children come: a hump peaking at 28.\nconst PHI = new Float64Array(NA);\n{\n  let s = 0;\n  for (let a = 15; a \u003c 50; a++) s += PHI[a] = (a - 14) ** 2.5 * exp(-(a - 14) / 5.5);\n  for (let a = 15; a \u003c 50; a++) PHI[a] /= s;\n}\n// Where migrants are in life: around 26.\nconst MIG = new Float64Array(NA).map((_, a) => exp(-(((a - 26) / 8) ** 2)));\n\n// Yearly hazard of dying at age a. kind: -1 a plain year, 0 war, 1 epidemic, 2 famine.\nfunction hazard(a, L, male, kind) {\n  let h = a === 0 ? mix(0.27, 0.0035, L) : a \u003c 15 ? mix(0.04, 0.0003, L) * exp(-(a - 1) / 2.2) : 0;\n  h += mix(0.008, 0.0003, L) * (male && a > 14 && a \u003c 40 ? 1.9 : 1);\n  h += 0.1 * exp(0.1 * (a - mix(64, 86, L) - (male ? 0 : mix(2, 4, L))));\n  if (kind === 0 && male && a > 17 && a \u003c 43) h += 0.09;\n  if (kind === 1) h += 0.015 + (a > 17 && a \u003c 41 ? 0.025 : 0) + (a \u003c 5 ? 0.08 : 0) + (a > 64 ? 0.06 : 0);\n  if (kind === 2) h += 0.02 + (a \u003c 5 ? 0.07 : 0) + (a > 59 ? 0.04 : 0);\n  return h;\n}\n\n// A state is six rows of ages: men and women living here, the part of them who came as migrants, and those who left.\nconst SV = new Float64Array(NA);\n// One year of the cohort-component model: the dead leave, everyone is a year older, the year's births come in, migrants come or go.\nfunction step(src, dst, y, fk, mig, kind, push) {\n  const L = key(LK, y);\n  let b = 0;\n  for (let a = 15; a \u003c 50; a++) b += src[1][a] * PHI[a];\n  b *= key(TK, y) * fk * [1, 0.62, 0.75, 0.85][kind + 1] * (push ? 0.7 : 1);\n  for (let s = 0; s \u003c 2; s++) {\n    for (let a = 0; a \u003c NA; a++) SV[a] = exp(-hazard(a, L, !s, kind) * (a ? 1 : 0.5));\n    for (let k = s; k \u003c 6; k += 2) {\n      const S = src[k], D = dst[k];\n      D[NA - 1] = S[NA - 1] * SV[NA - 1] + S[NA - 2] * SV[NA - 2];\n      for (let a = NA - 2; a > 0; a--) D[a] = S[a - 1] * SV[a - 1];\n      D[0] = k \u003c 2 ? b * (s ? 0.488 : 0.512) * SV[0] : 0;\n    }\n    const [D, I, E] = [dst[s], dst[s + 2], dst[s + 4]];\n    for (let a = 12; a \u003c 60; a++)\n      if (mig > 0) {\n        const n = mig * 0.00045 * MIG[a] * (s ? 0.9 : 1.1);\n        (D[a] += n), (I[a] += n);\n      } else if (mig \u003c 0) {\n        const f = 1 - exp(mig * 0.035 * MIG[a]);\n        (E[a] += D[a] * f), (D[a] *= 1 - f), (I[a] *= 1 - f);\n      }\n  }\n  // Keep the people living here at one: the bars are shares of them.\n  let t = 0;\n  for (let a = 0; a \u003c NA; a++) t += dst[0][a] + dst[1][a];\n  for (const A of dst) for (let a = 0; a \u003c NA; a++) A[a] /= t;\n}\n\n// A crisis by the script, or by chance in the hungry decades.\nconst kindOf = (y) => {\n  for (const [a, b, k] of EV) if (y >= a && y \u003c= b) return k;\n  return y \u003c 1880 && rnd() \u003c 0.07 ? 2 : -1;\n};\n\n// 3x5 digits, then M and F.\nconst GL = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf, 0x5fed, 0x79a4];\n\nexport function setup(params) {\n  const S = () => Array.from({ length: 6 }, () => new Float64Array(NA));\n  params.s = { cur: S(), nxt: S(), tmp: S(), y: START, u: 0, scl: 0, f: new Float32Array(N * 3), ready: 0, war: 0, fade: 0, kinds: new Int8Array(END - START + 2) };\n}\n\n// Run the opening regime for 110 years, longer than anyone lives, so it reaches its own shape and the knobs show from the first frame,\n// then the story up to the year it opens on.\nfunction warm(P, fk, mig, open) {\n  for (let s = 0; s \u003c 6; s++) for (let a = 0; a \u003c NA; a++) P.cur[s][a] = s \u003c 2 ? exp(-0.04 * a) : 0;\n  for (let i = 0; i \u003c 110; i++) {\n    step(P.cur, P.tmp, START - 110 + i, fk, mig, rnd() \u003c 0.07 ? 2 : -1, 0);\n    [P.cur, P.tmp] = [P.tmp, P.cur];\n  }\n  P.y = START;\n  P.u = 0;\n  P.kinds.fill(-1);\n  next(P, fk, mig, 0);\n  while (P.y \u003c open) [P.cur, P.nxt] = [P.nxt, P.cur], P.y++, next(P, fk, mig, 0);\n  P.scl = 0;\n}\n\n// Work out the year being lived now, from the state at its first day.\nfunction next(P, fk, mig, push) {\n  const k = push ? push - 1 : kindOf(P.y);\n  P.kinds[P.y - START] = k;\n  step(P.cur, P.nxt, P.y, fk, mig, k, push);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const fk = exp(0.47 * cl(k[2], -1, 1)), k4 = cl(k[3], -1, 1), mig = Math.sign(k4) * max(0, abs(k4) - 0.1) / 0.9, spd = 1.5 * cl(k[1], 0.25, 6);\n  P.hue = k[0];\n  if (!P.ready) (P.ready = 1), warm(P, fk, mig, OPEN);\n  // K1 tap: this year is a war, then an epidemic, by turns.\n  if (input.btnPressed && input.btnPressed[0] && P.y \u003c END) next(P, fk, mig, (P.war ^= 1) ? 1 : 2);\n  if (P.fade > 0) {\n    // The story is over: hold the urn a moment, dim, start again from the old triangle, light up.\n    P.fade += d;\n    if (P.fade > 2 && P.y >= END) warm(P, fk, mig, START);\n    if (P.fade > 2.8) P.fade = 0;\n  } else {\n    P.u += d * spd;\n    for (let i = 0; i \u003c 6 && P.u >= 1; i++) {\n      P.u -= 1;\n      [P.cur, P.nxt] = [P.nxt, P.cur];\n      if (++P.y >= END) {\n        (P.u = 0), (P.fade = 0.001);\n        break;\n      }\n      next(P, fk, mig, 0);\n    }\n  }\n  // The widest bar sets the scale, followed gently so a single year does not jolt it.\n  let m = 1e-9;\n  for (let a = 0; a \u003c NA; a++) m = max(m, P.cur[0][a], P.cur[1][a], P.nxt[0][a], P.nxt[1][a]);\n  const want = BAR / m;\n  P.scl = P.scl ? P.scl * exp(cl(Math.log(want / P.scl), -1, 1) * min(1, d * 1.5)) : want;\n  P.scl = min(P.scl, (BAR + 0.5) / m);\n}\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i % 6].map((c) => c * 255);\n}\n\nlet FB;\nfunction put(x, y, c, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  FB[o] = c[0] * a;\n  FB[o + 1] = c[1] * a;\n  FB[o + 2] = c[2] * a;\n}\nfunction glyph(g, x, y, c, s = 1) {\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((GL[g] >> (14 - r * 3 - q)) & 1) for (let i = 0; i \u003c s; i++) for (let j = 0; j \u003c s; j++) put(x + q * s + j, y + r * s + i, c);\n}\nfunction num(n, x, y, c, w, s = 1) {\n  const t = String(n).padStart(w, \"0\");\n  for (let i = 0; i \u003c t.length; i++) glyph(+t[i], x + i * 4 * s, y, c, s);\n}\n\n// A birth decade's colours: the band, its migrants, its leavers and its label. Decades step bright, middle, dark;\n// the darker two keep off orange and yellow, which go brown and olive when dim.\nconst LV = [1, 0.66, 0.4];\nfunction decade(hue, c) {\n  const l = ((c % 3) + 3) % 3, h0 = hue + c * 0.137, h = l ? 0.2 + (h0 - floor(h0)) * 0.82 : h0;\n  return [hsv(h, 0.8, LV[l]), hsv(h, 0.3, max(0.8, LV[l])), hsv(h, 0.6, 0.55), hsv(h, 0.55, 1)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  FB = P.f;\n  FB.fill(0);\n  const u = P.u, hue = 0.55 + (P.hue || 0), vis = P.fade > 1.2 ? min(1, abs(P.fade - 2) / 0.8) : 1;\n  // The age-0 row holds last year's births; the bands move up a row half way through the year.\n  const yb = P.y - 1 + (u >= 0.5 ? 1 : 0);\n  const grid = [38, 38, 38], lab = [110, 110, 120];\n  // Faint lines every ten years of age, and the ages up the left side.\n  for (let a = 0; a \u003c= 100; a += 10) {\n    const y = Y0 - a;\n    for (let x = 1; x \u003c W; x += 2) put(x, y, grid);\n    if (a % 20 === 0) num(a, 0, y - 2, lab, 1);\n  }\n  // The bars, one row per year of age, mid-year between the two states.\n  const C = P.cur, X = P.nxt, at = (s, a) => mix(C[s][a], X[s][a], u) * P.scl, memo = {}, dec = (c) => memo[c] || (memo[c] = decade(hue, c));\n  for (let a = 0; a \u003c NA; a++) {\n    const y = Y0 - a, [c, pale, ghost] = dec(floor((yb - a) / 10));\n    for (let s = 0; s \u003c 2; s++) {\n      const len = min(BAR, at(s, a)), imm = min(len, at(s + 2, a)), out = min(BAR + 1 - len, at(s + 4, a));\n      const px = (i, q, f = 1) => put(s ? FX + i : MX - i, y, q, f);\n      const n = floor(len), fr = len - n;\n      for (let i = 0; i \u003c n; i++) px(i, i + 0.5 \u003c len - imm ? c : pale);\n      if (fr > 0.05) px(n, imm > 0.5 ? pale : c, fr);\n      // Those who left, dotted past the end of the bar.\n      for (let i = n + 1; i \u003c len + out; i++) if ((i + a) & 1) px(i, ghost);\n    }\n  }\n  // The birth decade of each band, written beside it on the right in its own colour.\n  for (let c = floor((yb - 106) / 10); c \u003c= floor(yb / 10); c++) {\n    const top = min(NA - 1, yb - c * 10), bot = max(0, yb - c * 10 - 9);\n    if (top - bot \u003c 4) continue;\n    // A decade with hardly anyone left keeps a dim label.\n    let w = 0;\n    for (let a = bot; a \u003c= top; a++) w = max(w, at(0, a), at(1, a));\n    num((c * 10) % 100, 57, Math.round(Y0 - cl(yb - c * 10 - 4.5, bot + 2, top - 2)) - 2, dec(c)[3].map((q) => q * cl(w / 3, 0.3, 1)), 2);\n  }\n  // The year being lived, in the colour of the decade being born, red in a year of war or epidemic.\n  const kind = P.kinds[P.y - START] ?? -1, ycol = kind === 0 || kind === 1 ? [255, 60, 40] : decade(hue, floor(P.y / 10))[3];\n  num(P.y, 17, 2, ycol, 4, 2);\n  glyph(10, 18, 123, lab), glyph(11, 43, 123, lab);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, FB[o] * vis) | 0, min(255, FB[o + 1] * vis) | 0, min(255, FB[o + 2] * vis) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part."},{"name":"Speed","min":0.25,"max":6,"about":"At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid."},{"name":"Births","min":-1,"max":1,"about":"Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads."},{"name":"Migration","min":-1,"max":1,"about":"Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed."}],"start":[0,2,0,0.06],"measures":{"motion":0.1321,"detail":0.0783,"edges":0.6662,"complexity":0.212,"coverage":0.4183,"colour":0.3565,"drift":0.1142},"knobResponse":[0.1688,0.1844,0.07,0.0935]},{"slug":"potters-wheel","title":"Potter's Wheel","family":"pottery","round":24,"note":"밤의 도자기 공방에서 녹색 갓 램프 아래 물레가 돌아요. 두 손이 흙덩이를 가운데로 모아 벽을 끌어올리면 그릇이 76~92줄 높이로 자라고, 물레 자국이 램프 쪽에서 반짝이며 옆으로 흘러가요. 다 빚은 병과 항아리는 줄로 잘려 선반에 올라가 젖은 흙빛에서 하얗게 말라 가요. K1 이 흙을 테라코타에서 검은 흙까지 바꾸고, K1 을 누르면 그릇이 주저앉아요.","idea":"At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.","buttons":"K1 tap makes the wall slump, and the potter balls the clay up and centres it again.","code":"// ===== Patternflow pattern =====\n// Title:   Potter's Wheel\n// Family:  pottery\n// Idea:    At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after throwing a pot on the potter's wheel\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1\n//\n// Knob 1: Clay. The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it.\n// Knob 2: Speed. At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower.\n// Knob 3: Pots. How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln.\n// Knob 4: Lamp. Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it.\n// Buttons: K1 tap makes the wall slump, and the potter balls the clay up and centres it again.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, asin, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The wheel head's centre and radius, the splash pan round it, and the tilt\n// of the view: a circle r across on the wheel shows as an ellipse E * r tall.\nconst [CX, BY, E, WR, PR] = [32, 111, 0.21, 21, 34];\nconst PY = BY + 2.5;\n// Three shelf boards with seven slots each, the order the slots fill, and\n// the size a pot stands at on the shelf against its size on the wheel.\nconst SHELF = [26, 53, 80];\nconst SLOT = [];\nfor (const sy of SHELF) for (let i = 0; i \u003c 7; i++) SLOT.push([4.6 + i * 9.13, sy]);\nconst ORDER = [1, 5, 8, 12, 14, 20, 3, 9, 11, 0, 6, 7, 13, 15, 19, 2, 4, 10, 16, 18, 17];\nconst SHS = 0.27;\n\n// Each clay at every stage of drying, from thrown and wet to bone-dry.\nconst CLAY = [\n  [[255, 112, 56], [196, 96, 58], [238, 158, 108]],\n  [[236, 170, 104], [190, 148, 100], [244, 222, 182]],\n  [[194, 198, 206], [184, 184, 182], [250, 248, 240]],\n  [[110, 96, 96], [86, 80, 78], [156, 148, 142]],\n];\nconst SKIN = [150, 98, 76], WALL = [84, 62, 50], WOOD = [132, 90, 58], METAL = [150, 152, 156], PLASTIC = [76, 80, 90], SLEEVE = [58, 66, 86], SHINE = [255, 232, 196];\n\n// Pot shapes as a height and the radius at keys up the wall: cylinder, bottle,\n// vase with a belly and a flared lip, jar and trumpet vase on the wheel, and\n// bowls and cups from earlier in the evening on the shelves.\nconst SHAPES = [\n  (j) => [76 + 8 * j, [[0, 10.5], [0.45, 10.2 + j], [0.9, 9.6], [1, 11]]],\n  (j) => [84 + 8 * j, [[0, 11], [0.3, 14.5], [0.7, 4.2], [0.93, 4], [1, 5.6]]],\n  (j) => [82 + 8 * j, [[0, 8], [0.42, 15], [0.8, 5], [0.9, 5.4], [1, 9.5]]],\n  (j) => [76 + 6 * j, [[0, 8.5], [0.55, 15.5], [0.9, 9], [1, 10.5]]],\n  (j) => [86 + 6 * j, [[0, 9.5], [0.2, 9.8], [0.62, 5.5], [1, 14]]],\n  (j) => [26 + 6 * j, [[0, 7], [0.45, 14], [1, 19]]],\n  (j) => [40 + 6 * j, [[0, 9], [0.5, 11.5], [0.85, 10.5], [1, 12]]],\n];\nfunction key(K, v) {\n  let i = 0;\n  while (i \u003c K.length - 2 && v > K[i + 1][0]) i++;\n  return mix(K[i][1], K[i + 1][1], sm(K[i][0], K[i + 1][0], v));\n}\n// A radius looked up along a wall kept one entry per row.\nconst at = (pr, h, Hp, i) => ((h = cl(h, 0, Hp)), (i = h | 0), pr[i] + (pr[i + 1] - pr[i]) * (h - i));\nfunction newSpec(not, all) {\n  let type;\n  // The first throw of the night is always one of the three tallest.\n  do type = floor(rnd() * (all ? 7 : 5));\n  while (type === not || (not \u003c -1 && type % 3 === 0));\n  const [Hf, K0] = SHAPES[type](rnd()), g = 0.92 + 0.16 * rnd(), K = K0.map(([v, r]) => [v, r * g]);\n  const pr = F32(ceil(Hf) + 3);\n  for (let h = 0; h \u003c pr.length; h++) pr[h] = key(K, min(1, h / Hf)) + 1.4 * exp(-h / 2.2);\n  // Where the hands shape it: the belly, then the neck above.\n  let vb = 0.5, vn = 0.85, rb = 0, rn = 99;\n  for (const [v, r] of K) if (v > 0.1 && v \u003c 0.85 && r > rb) (rb = r), (vb = v);\n  for (const [v, r] of K) if (v > vb && v \u003c 1 && r \u003c rn) (rn = r), (vn = v);\n  return { type, Hf, pr, rim: K[K.length - 1][1], vb, vn };\n}\n\n// The steps of a throw, how long each takes at Speed 2, and how fast the\n// wheel turns through it (turns a second): slapped down, centred, opened,\n// three pulls, shaped, shown, wired off, lifted to the shelf, and the slump\n// and the balling up after a K1 tap.\nconst DUR = [0.45, 0.9, 0.5, 4.5, 2.6, 1.6, 0.9, 1.8, 1.2, 0.9];\nconst SPIN = [0.4, 1.3, 1.1, 0.95, 0.75, 0.65, 0.3, 0, 0.9, 1];\n// The cylinder after each pull, and its wall at the rim.\nconst RC = [12.5, 11.3, 10.5, 9.9], WALL_T = [4, 2.7, 2.1, 1.7];\nconst cyl = (k, h) => RC[k] - 0.012 * h + 1.4 * exp(-h / 2.2);\nconst dome = (v, r) => r * sqrt(max(0, 1 - v ** 2.4)) + 1.2 * exp(-v * 8);\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, rot: 0, w: 0.4, H: 11, ri: 0, wa: 0, wt: 0, yo: 0, sH: 11, sri: 0, n: 6, LX: 12, clay: 0,\n    pr: F32(128), snap: F32(128), f: F32(N * 3), bg: F32(N * 3),\n    hd: null, hs: null, g: null, wire: -1, pieces: [], sp: [], dr: [], free: 0, bgKey: -1,\n  });\n  P.spec = newSpec(-2);\n  // The pieces already on the shelves, newest first.\n  for (let i = 0; i \u003c 21; i++) P.pieces.push({ slot: ORDER[i], spec: newSpec(i ? P.pieces[i - 1].spec.type : -1, 1), dry: min(1, 0.1 + i * 0.17) });\n  // Old slip spattered in the pan.\n  for (let i = 0; i \u003c 60; i++) {\n    const a = rnd() * TAU, r = 0.66 + 0.3 * rnd();\n    P.sp.push(i \u003c 44 ? [CX + PR * r * sin(a), PY + PR * E * r * cos(a), rnd() \u003c 0.3 ? 2 : 1, 0.6 + 0.5 * rnd()] : [2 + rnd() * 60, PY + 8 + rnd() * 4, 1, 0.5 + 0.4 * rnd()]);\n  }\n  shape(P, 0);\n}\n\nfunction go(P, ph) {\n  // The oldest piece on show goes to the kiln and the new pot takes its place.\n  if (ph === 7) P.free = P.pieces.splice(min(P.n, P.pieces.length) - 1, 1)[0].slot;\n  if (ph === 0 && P.ph === 7) P.pieces.unshift({ slot: P.free, spec: P.spec, dry: 0 }), (P.spec = newSpec(P.spec.type));\n  P.snap.set(P.pr);\n  Object.assign(P, { ph, pt: 0, sH: P.H, sri: P.ri });\n}\n\nfunction fill(P, Hn, f) {\n  P.H = Hn;\n  for (let h = 0, n = min(126, ceil(Hn) + 2); h \u003c= n; h++) P.pr[h] = max(0, f(min(h, Hn)));\n}\nconst snapR = (P, v) => at(P.snap, v * P.sH, P.sH);\nconst offset = (P, h) => P.wa * sin(P.rot) + P.wt * (cl(h / P.H, 0, 1) ** 1.5) * sin(P.rot + 0.8);\n\n// The clay's wall for this moment of the throw, and where the hands are.\nfunction shape(P, p) {\n  const sp = P.spec;\n  let hand = null;\n  Object.assign(P, { wa: 0, wt: 0.2, yo: 0, g: null, wire: -1, ring: 0.07 });\n  switch (P.ph) {\n    case 0: {\n      // Slapped down from the hands, squashing as it lands.\n      const sq = p > 0.6 ? 1 - 0.3 * sin((PI * (p - 0.6)) / 0.4) : 1, r = 10.5 / sqrt(sq), Hn = 11 * sq;\n      P.yo = p \u003c 0.6 ? -56 * (1 - (p / 0.6) ** 2) : 0;\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 0.8), (P.ring = 0.04);\n      hand = [5, -0.3, 0];\n      break;\n    }\n    case 1: {\n      // Centred: coned up and pressed down again while the wobble dies.\n      const Hn = 11 + 10 * sin(PI * sm(0.1, 0.9, p)), r = 10.5 * sqrt(11 / Hn);\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 2.6 * (1 - sm(0, 0.8, p))), (P.ring = 0.05);\n      hand = [Hn * 0.42, -0.5 + 0.4 * sin(p * 20), 0];\n      break;\n    }\n    case 2: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 13, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), cyl(0, h), q));\n      (P.ri = (RC[0] - WALL_T[0]) * sm(0.15, 1, p)), (P.ring = 0.07);\n      hand = [Hn - 1.5, -0.2, 0];\n      break;\n    }\n    case 3: {\n      // Three pulls. The hands squeeze the wall from the base to the rim and\n      // a roll of clay rides up ahead of them.\n      const k = min(2, floor(P.pt / 1.5)), a = (P.pt - k * 1.5) / 1.2, Hp = sp.Hf * 0.93;\n      const HS = [13, mix(13, Hp, 0.55), mix(13, Hp, 0.82), Hp];\n      if (a \u003c= 1) {\n        const Hn = mix(HS[k], HS[k + 1], sm(0, 1, a)), hh = Hn * min(1, a * 1.04) * 0.95, roll = 1.3 * (1 - sm(0.9, 1, a));\n        fill(P, Hn, (h) => mix(cyl(k + 1, h), cyl(k, h), sm(hh - 1, hh + 2.5, h)) + roll * exp(-(((h - hh - 2.6) / 2.2) ** 2)) - 0.8 * exp(-(((h - hh) / 1.4) ** 2)));\n        P.ri = mix(RC[k] - WALL_T[k], RC[k + 1] - WALL_T[k + 1], sm(0.85, 1, a));\n        hand = [hh, -0.3, 0];\n      } else {\n        const Hn = HS[k + 1], b = (a - 1) / 0.25;\n        fill(P, Hn, (h) => cyl(k + 1, h));\n        P.ri = RC[k + 1] - WALL_T[k + 1];\n        hand = [mix(Hn * 0.95, 3, sm(0, 1, b)), 1.5 * sin(PI * b), 0];\n      }\n      break;\n    }\n    case 4: {\n      // Shaped: the belly pushed out from inside, then the neck collared in.\n      const q = sm(0, 1, p), Hn = mix(P.sH, sp.Hf, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), at(sp.pr, (h / Hn) * sp.Hf, sp.Hf), q));\n      P.ri = mix(P.sri, sp.rim - 1.4, q);\n      hand = [Hn * mix(sp.vb, sp.vn, sm(0.4, 0.75, p)), -0.2, 0];\n      break;\n    }\n    case 8: {\n      // Slumped: the wall sinks, bellies and flops round as the wheel turns.\n      const q = sm(0, 1, p), Hn = mix(P.sH, max(12, P.sH * 0.3), q ** 0.8);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), snapR(P, (h / Hn) * 0.6) * (1 + 0.7 * (h / Hn) ** 2) + (3 * h) / Hn, q));\n      P.ri = P.sri > 0 ? max(0, at(P.pr, Hn, Hn) - 1.8) : 0;\n      (P.wt = 6 * sin(PI * min(1, p * 1.3)) + 2), (P.wa = 1);\n      hand = [Hn * 0.5, 4 + 20 * sm(0, 0.3, p), 10 * sm(0, 0.3, p)];\n      break;\n    }\n    case 9: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 11, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), dome(h / Hn, 10.5), q));\n      (P.ri = P.sri * (1 - q)), (P.wa = 2.6), (P.wt = 2 * (1 - q)), (P.ring = 0.04);\n      hand = [Hn * 0.45, mix(6, -0.5, sm(0, 0.5, p)), 0];\n      break;\n    }\n    default: {\n      fill(P, sp.Hf, (h) => at(sp.pr, h, sp.Hf));\n      P.ri = sp.rim - 1.4;\n      // Shown: the hands come away.\n      if (P.ph === 5) hand = [sp.Hf * sp.vn, 2 + 30 * sm(0, 0.6, p), 22 * sm(0, 0.6, p)];\n      if (P.ph === 6) {\n        // Wired off: the hands come in to the wheel and draw the wire under.\n        const a = sm(0, 0.25, p), q = sm(0.25, 1, p), y = mix(BY + 20, BY + E * P.pr[0] * (1 - 2 * q) + 0.5, a);\n        P.wire = a \u003c 1 ? -1 : q;\n        P.hd = [CX - mix(40, 25, a), y, CX + mix(40, 25, a), y];\n        return;\n      }\n      if (P.ph === 7) {\n        // Lifted, then carried back to its slot on the shelf.\n        const q1 = sm(0, 0.3, p), q2 = sm(0.3, 1, p), [sx, sy] = SLOT[P.free], s = mix(1, SHS, q2 ** 0.6);\n        P.g = [mix(CX, sx, q2), mix(BY - 9 * q1, sy + 0.5, q2) - 14 * sin(PI * q2), s];\n        if (q2 \u003c 0.5) {\n          const r = sp.pr[3] * s, y = P.g[1] - 3 * s + 40 * sm(0.2, 0.5, q2);\n          P.hd = [P.g[0] - r, y, P.g[0] + r, y];\n        } else P.hd = null;\n        return;\n      }\n    }\n  }\n  if (hand) {\n    const [h, gap, dy] = hand, r = at(P.pr, h, P.H), o = offset(P, h), y = BY + P.yo - h + dy;\n    P.hd = [CX + o - r - gap, y, CX + o + r + gap, y];\n  } else P.hd = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.clay = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 6, 20));\n  P.LX = mix(9, 55, cl(k[3], 0, 1));\n  if (input.btnPressed && input.btnPressed[0] && P.ph >= 1 && P.ph \u003c= 5) go(P, 8);\n  if ((P.pt += d) >= DUR[P.ph]) go(P, [1, 2, 3, 4, 5, 6, 7, 0, 9, 1][P.ph]);\n  P.w += (SPIN[P.ph] - P.w) * min(1, d * 3);\n  P.rot += TAU * P.w * d;\n  const landing = P.ph === 0 && P.yo \u003c 0;\n  shape(P, P.pt / DUR[P.ph]);\n  // The hands follow their mark, easing over the big jumps between steps.\n  if (!P.hd) P.hs = null;\n  else if (!P.hs) P.hs = P.hd.slice();\n  else for (let i = 0; i \u003c 4; i++) abs(P.hd[i] - P.hs[i]) > 3 ? (P.hs[i] += (P.hd[i] - P.hs[i]) * min(1, d * 14)) : (P.hs[i] = P.hd[i]);\n\n  // Slip flung off the wall by the hands, and spattered as the lump lands.\n  const fling = (x, y, sd, n) => {\n    while (n--) P.dr.push([x, y, sd * (8 + rnd() * 26), -8 - rnd() * 26, PY - 4 + rnd() * 10]);\n  };\n  if (P.hs && (P.ph === 3 || P.ph === 4) && rnd() \u003c d * 3) rnd() \u003c 0.5 ? fling(P.hs[0], P.hs[1], -1, 1) : fling(P.hs[2], P.hs[3], 1, 1);\n  if (landing && P.yo === 0) fling(CX - 9, BY - 2, -1, 3), fling(CX + 9, BY - 2, 1, 3);\n  P.dr = P.dr.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 150 * d);\n    if (q[3] > 0 && q[1] >= q[4]) {\n      P.sp.push([q[0], q[1], rnd() \u003c 0.3 ? 2 : 1, 0.7 + 0.5 * rnd()]);\n      if (P.sp.length > 110) P.sp.shift();\n      return false;\n    }\n    return q[0] > -2 && q[0] \u003c W + 2;\n  });\n  for (const q of P.pieces) q.dry = min(1, q.dry + d / 75);\n}\n\n// The wall, the rack and the lamp's glow, kept until the lamp or the clay changes.\nfunction backdrop(P) {\n  P.bgKey = bgKey(P);\n  // Clay dust lies on everything in the room and takes the clay's colour.\n  const B = P.bg, LX = P.LX, dust = P.dust, wall = WALL.map((v, n) => mix(v, dust[n] * 0.4, 0.55)), wood = WOOD.map((v, n) => mix(v, dust[n] * 0.6, 0.35));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - LX, dy = y - 10, o = (y * W + x) * 3;\n      let f = 0.24 + 0.85 * exp(-(dx * dx + dy * dy * 0.3) / 1500), col = wall;\n      if (dy > 0) {\n        const cw = 4 + dy * 0.72;\n        f += 0.32 * sm(cw + 6, cw - 3, abs(dx)) * exp(-dy / 90);\n      }\n      f *= 0.9 + 0.16 * hash(x >> 1, y >> 1);\n      for (const sy of SHELF) {\n        if (y === sy) (col = wood), (f *= 1.35);\n        else if (y > sy && y \u003c= sy + 3) (col = wood), (f *= 0.75 + 0.15 * hash(x >> 2, sy));\n        else if (y > sy + 3 && y \u003c= sy + 6) f *= 0.45 + 0.17 * (y - sy - 4);\n      }\n      if ((x \u003c 2 || x > 61) && y \u003c SHELF[2] + 4) (col = wood), (f *= x === 1 || x === 62 ? 0.9 : 0.6);\n      const g = 0.55 * exp(-(dx * dx + (y - 10.5) ** 2) / 30);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f + [255, 196, 120][c] * g;\n    }\n}\n\n// The light from the lamp at a spot: its direction and how much reaches it.\nfunction light(P, x, y) {\n  const lx = cl((P.LX - x) / 24, -1.3, 1.3), ly = 0.3 + (y - 10) / 300, n = sqrt(lx * lx + ly * ly + 0.25);\n  return [lx / n, ly / n, 0.5 / n, 0.6 + 0.5 * exp(-((x - P.LX) ** 2 + ((y - 10) * 0.5) ** 2) / 1800)];\n}\n\nlet F;\nconst bgKey = (P) => round(P.LX * 8) * 64 + round(P.clay * 48);\n// A thrown shape turned on its axis, lit by the lamp: wall, rim and the\n// dark inside. Off-centre clay swings its axis round with the wheel.\nfunction solid(o) {\n  const { cx, by, s, pr, Hp, L, alb } = o, Hs = Hp * s, [l0, l1, l2, lm] = L;\n  let Rm = 0;\n  for (let i = 0; i \u003c= Hp + 1; i++) Rm = max(Rm, pr[i]);\n  Rm *= s;\n  const R = (h) => at(pr, h / s, Hp) * s, off = (h) => o.wa * o.s1 + o.wt * (cl(h / Hs, 0, 1) ** 1.5) * o.s2;\n  const RT = R(Hs), cT = cx + off(Hs), yT = by - Hs, ryT = E * RT + 0.35, ri = o.ri * s, ryi = E * ri + 0.25, wb = abs(o.wa) + abs(o.wt);\n  const hn = sqrt(l0 * l0 + l1 * l1 + (l2 + 1) ** 2), hx = l0 / hn, hy = l1 / hn, hz = (l2 + 1) / hn;\n  const y0 = max(0, floor(yT - ryT - 1)), y1 = min(H - 1, ceil(by + E * Rm + 1)), x0 = max(0, floor(cx - Rm - wb - 1)), x1 = min(W - 1, ceil(cx + Rm + wb + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, h0 = by - y - 0.5, ox = wb ? off(h0) : 0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx - ox, o3 = (y * W + x) * 3;\n      let h = h0, r = 0, u = 9, c = 0, k, sp = 0;\n      for (let it = 0; it \u003c 3; it++) {\n        r = R(h);\n        u = r > 0.05 ? px / r : 9;\n        c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n        h = h0 + E * r * c;\n      }\n      r = R(h);\n      u = r > 0.05 ? px / r : 9;\n      if (h >= 0 && h \u003c= Hs && u * u \u003c 1) {\n        c = sqrt(1 - u * u);\n        const hp = h / s, dR = (R(h + 0.6) - R(h - 0.6)) / 1.2 + o.ring * 2.03 * cos(hp * 2.03), nl = 1 / sqrt(1 + dR * dR);\n        const dif = max(0, (u * l0 - dR * l1 + c * l2) * nl), nh = max(0, (u * hx - dR * hy + c * hz) * nl);\n        k = (o.amb + 0.95 * dif + 0.2 * max(0, (-u * l0 + 0.4 * c) * nl)) * lm;\n        sp = o.spec * nh ** 40;\n        if (o.fl) {\n          // Slip streaks and grog flecks ride round with the wheel.\n          const az = asin(u) - o.rot, a = ((az % TAU) + TAU) % TAU, i = floor(a * 6.366), j = floor(hp / 2.3), q = hash(i, j);\n          const st = 1 + 0.1 * sin(3 * az + 1.3) + 0.07 * sin(5 * az + hp * 0.11);\n          k *= st;\n          sp *= st;\n          if (q \u003c 0.2 && abs(a - (i + 0.5) / 6.366) * r \u003c 0.7 && abs(hp - (j + 0.5) * 2.3) \u003c 0.75) k *= q \u003c 0.1 ? 1.5 : 0.55;\n        }\n      } else {\n        const ex = (x + 0.5 - cT) / RT, ey = (y + 0.5 - yT) / ryT;\n        if (RT \u003c 0.4 || ex * ex + ey * ey > 1) continue;\n        const ix = (x + 0.5 - cT) / (ri + 0.01), iy = (y + 0.5 - yT) / ryi;\n        if (ri > 0.4 && ix * ix + iy * iy \u003c 1) k = (0.05 + 0.42 * cl(-ix * l0 * 1.3 + 0.2, 0, 1) * (iy \u003c 0.3 ? 1 : 0.55)) * lm;\n        else (k = (0.3 + 0.8 * l1) * lm), (sp = o.spec * 0.3);\n      }\n      for (let n = 0; n \u003c 3; n++) F[o3 + n] = alb[n] * k + SHINE[n] * sp;\n    }\n}\n\n// The earlier pots on the shelves, wet and dark, then leather-hard, then pale.\nconst STILL = { s: SHS, wa: 0, wt: 0, s1: 0, s2: 0, rot: 0, ring: 0, fl: 0, amb: 0.38 };\nfunction shelves(P, C) {\n  // While a pot is carried over, its slot stands empty.\n  for (let i = 0; i \u003c min(P.n - (P.ph === 7), P.pieces.length); i++) {\n    const q = P.pieces[i], [sx, sy] = SLOT[q.slot], dr = q.dry, a = dr \u003c 0.45 ? dr / 0.45 : (dr - 0.45) / 0.55;\n    const alb = dr \u003c 0.45 ? C[0].map((v, n) => mix(v * 0.62, C[1][n], a)) : C[1].map((v, n) => mix(v, C[2][n], a));\n    solid({ ...STILL, cx: sx, by: sy + 0.5, pr: q.spec.pr, Hp: q.spec.Hf, ri: q.spec.rim - 1.4, alb, spec: 0.6 * (1 - sm(0, 0.4, dr)), L: light(P, sx, sy - 10) });\n  }\n}\n\nconst put = (x, y, col, k) => {\n  if ((x = round(x - 0.5)) >= 0 && x \u003c W && (y = round(y - 0.5)) >= 0 && y \u003c H) for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = col[c] * k;\n};\n\n// The lamp: a cord, an enamel shade and the bulb under it.\nfunction lamp(P) {\n  for (let y = 0; y \u003c 12; y++)\n    for (let x = max(0, floor(P.LX - 8)); x \u003c= min(W - 1, P.LX + 8); x++) {\n      const dx = x + 0.5 - P.LX;\n      if (abs(dx) >= (y \u003c 3 ? 0.6 : y \u003c 10 ? 1.3 + (y - 3) * 0.85 : y \u003c 11 ? 2.4 : 1.2)) continue;\n      const k = y > 2 && y \u003c 9 ? 0.7 + 0.6 * (1 - (y - 3) / 6) * (dx \u003c 0 ? 1 : 0.6) : 1;\n      put(x + 0.5, y + 0.5, y \u003c 3 ? [44, 38, 34] : y \u003c 9 ? [38, 72, 62] : [[236, 170, 96], [255, 244, 214], [255, 226, 168]][y - 9], k);\n    }\n}\n\n// The pot's shadow thrown on the wall behind, leaning away from the lamp.\nfunction shadow(P) {\n  for (let y = max(0, floor(BY - P.H - 6)); y \u003c 106; y++) {\n    const h = BY + 4 - y;\n    if (h \u003c 0 || h > P.H) continue;\n    const r = at(P.pr, h, P.H) * 1.08, xc = CX + (CX - P.LX) * (0.12 + h * 0.007);\n    for (let x = max(0, floor(xc - r - 2)); x \u003c= min(W - 1, xc + r + 2); x++) {\n      const k = 1 - 0.5 * sm(r + 1.5, r - 1, abs(x + 0.5 - xc)), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n}\n\n// The splash pan with its slip, and the wheel head turning in it.\nfunction wheel(P, A) {\n  const [l0, l1, l2, lm] = light(P, CX, PY), mt = METAL.map((v, n) => mix(v, A[n], 0.7)), side = (z) => 0.15 + 0.8 * max(0, z * l0 + sqrt(max(0, 1 - z * z)) * l2);\n  for (let y = 100; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ex = (x + 0.5 - CX) / PR, ey = (y + 0.5 - PY) / (PR * E), dd = ex * ex + ey * ey, o = (y * W + x) * 3;\n      const wx = (x + 0.5 - CX) / WR, wy = (y + 0.5 - BY) / (WR * E), wd = wx * wx + wy * wy;\n      let col, k;\n      if (wd \u003c 1) (col = mt), (k = (0.3 + 0.6 * l1) * lm * (0.9 + 0.1 * cos(sqrt(wd) * WR * 1.4)));\n      else if (wy > 0 && wx * wx \u003c 1 && y + 0.5 \u003c BY + WR * E * sqrt(1 - wx * wx) + 2.5) (col = METAL), (k = 0.5 * side(wx) * lm);\n      else if (dd \u003c 1) dd > 0.86 ? ((col = PLASTIC), (k = (0.6 + 0.6 * l1) * lm)) : ((col = A), (k = (ey \u003c 0 ? 0.26 + 0.12 * (1 + ey) : 0.4) * lm));\n      else if (ey > 0 && ex * ex \u003c 1 && y + 0.5 \u003c PY + PR * E * sqrt(1 - ex * ex) + 6) (col = PLASTIC), (k = side(ex) * lm);\n      else if (y > PY) (col = WALL), (k = 0.2);\n      else continue;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = col[c] * k;\n    }\n  // Slip spattered on the pan, then the wheel's own marks going round.\n  for (const [x, y, z, t] of P.sp) {\n    const ex = (x - CX) / WR, ey = (y - BY) / (WR * E);\n    if (ex * ex + ey * ey \u003c 1.1) continue;\n    put(x, y, A, 0.5 * t * lm);\n    if (z > 1) put(x + 1, y, A, 0.4 * t * lm);\n  }\n  for (let j = 0; j \u003c 6; j++) {\n    const a = P.rot + j * 1.9, r = j \u003c 2 ? 16 : 11.5 + j * 1.6;\n    put(CX + r * sin(a) + 0.5, BY + E * r * cos(a) + 0.5, j \u003c 2 ? [20, 20, 22] : A, j \u003c 2 ? 1 : 0.85 * lm);\n  }\n}\n\n// Skin lit by the lamp, round in section.\nfunction cap(ax, ay, bx, by, ra, rb, col, L, tip) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6, rm = max(ra, rb) + 1;\n  for (let y = max(0, floor(min(ay, by) - rm)); y \u003c= min(H - 1, max(ay, by) + rm); y++)\n    for (let x = max(0, floor(min(ax, bx) - rm)); x \u003c= min(W - 1, max(ax, bx) + rm); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, r = mix(ra, rb, t), dd = ex * ex + ey * ey;\n      if (dd > r * r) continue;\n      const nz = sqrt(1 - dd / (r * r)), k = (0.16 + 0.9 * max(0, (ex / r) * L[0] - (ey / r) * L[1] + nz * L[2])) * L[3], C = tip && t > 0.5 ? tip : col, o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = C[c] * k;\n    }\n}\n\n// A hand on the clay at x, y: the sleeve and forearm down to the side, the\n// back of the hand, the fingers round the wall with slip on them, the thumb.\nfunction hand(P, sd, x, y, slip) {\n  const L = light(P, x, y);\n  cap(x + sd * 22, y + 26, x + sd * 46, y + 62, 5.6, 6.6, SLEEVE, L);\n  cap(x + sd * 6.5, y + 3.5, x + sd * 23, y + 27, 3.4, 4.6, SKIN, L);\n  cap(x + sd * 7.5, y + 3.5, x + sd * 3.2, y - 0.3, 3.6, 3.3, SKIN, L);\n  cap(x + sd * 3.2, y - 0.3, x - sd * 1.8, y + 0.8, 2.6, 2, SKIN, L, slip);\n  cap(x + sd * 3.8, y - 3, x + sd * 2.6, y - 4.4, 1.4, 1.2, SKIN, L, slip);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.pr) return;\n  F = P.f;\n  const c = P.clay * 3, i0 = min(2, floor(c)), f = c - i0, C = [0, 1, 2].map((j) => CLAY[i0][j].map((v, n) => mix(v, CLAY[i0 + 1][j][n], f))), A = C[0];\n  P.dust = C[2];\n  if (P.bgKey !== bgKey(P)) backdrop(P);\n  F.set(P.bg);\n  shelves(P, C);\n  lamp(P);\n  if (!P.g) shadow(P);\n  wheel(P, A);\n  const wire = (front) => {\n    if (P.wire \u003c 0 || !P.hs || P.wire \u003c 0.5 !== front) return;\n    for (let x = P.hs[0]; x \u003c= P.hs[2]; x++) put(x + 0.5, P.hs[1] + 0.5, [220, 222, 230], 0.9);\n  };\n  wire(false);\n  const [gx, gy, gs] = P.g || [CX, BY + P.yo, 1];\n  solid({ cx: gx, by: gy, s: gs, pr: P.pr, Hp: P.H, ri: P.ri, wa: P.wa, wt: P.wt, s1: sin(P.rot), s2: sin(P.rot + 0.8), rot: P.rot, alb: A, spec: 0.9, L: light(P, gx, gy - P.H * gs * 0.5), ring: P.ring, fl: 1, amb: 0.08 });\n  wire(true);\n  if (P.hs) {\n    const slip = SKIN.map((v, n) => mix(v, A[n], 0.6));\n    hand(P, -1, P.hs[0], P.hs[1], slip);\n    hand(P, 1, P.hs[2], P.hs[3], slip);\n  }\n  for (const [x, y] of P.dr) put(x, y, A, 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-potters-wheel","type":"code","name":"potters-wheel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Potter's Wheel\n// Family:  pottery\n// Idea:    At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after throwing a pot on the potter's wheel\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1\n//\n// Knob 1: Clay. The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it.\n// Knob 2: Speed. At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower.\n// Knob 3: Pots. How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln.\n// Knob 4: Lamp. Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it.\n// Buttons: K1 tap makes the wall slump, and the potter balls the clay up and centres it again.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, asin, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The wheel head's centre and radius, the splash pan round it, and the tilt\n// of the view: a circle r across on the wheel shows as an ellipse E * r tall.\nconst [CX, BY, E, WR, PR] = [32, 111, 0.21, 21, 34];\nconst PY = BY + 2.5;\n// Three shelf boards with seven slots each, the order the slots fill, and\n// the size a pot stands at on the shelf against its size on the wheel.\nconst SHELF = [26, 53, 80];\nconst SLOT = [];\nfor (const sy of SHELF) for (let i = 0; i \u003c 7; i++) SLOT.push([4.6 + i * 9.13, sy]);\nconst ORDER = [1, 5, 8, 12, 14, 20, 3, 9, 11, 0, 6, 7, 13, 15, 19, 2, 4, 10, 16, 18, 17];\nconst SHS = 0.27;\n\n// Each clay at every stage of drying, from thrown and wet to bone-dry.\nconst CLAY = [\n  [[255, 112, 56], [196, 96, 58], [238, 158, 108]],\n  [[236, 170, 104], [190, 148, 100], [244, 222, 182]],\n  [[194, 198, 206], [184, 184, 182], [250, 248, 240]],\n  [[110, 96, 96], [86, 80, 78], [156, 148, 142]],\n];\nconst SKIN = [150, 98, 76], WALL = [84, 62, 50], WOOD = [132, 90, 58], METAL = [150, 152, 156], PLASTIC = [76, 80, 90], SLEEVE = [58, 66, 86], SHINE = [255, 232, 196];\n\n// Pot shapes as a height and the radius at keys up the wall: cylinder, bottle,\n// vase with a belly and a flared lip, jar and trumpet vase on the wheel, and\n// bowls and cups from earlier in the evening on the shelves.\nconst SHAPES = [\n  (j) => [76 + 8 * j, [[0, 10.5], [0.45, 10.2 + j], [0.9, 9.6], [1, 11]]],\n  (j) => [84 + 8 * j, [[0, 11], [0.3, 14.5], [0.7, 4.2], [0.93, 4], [1, 5.6]]],\n  (j) => [82 + 8 * j, [[0, 8], [0.42, 15], [0.8, 5], [0.9, 5.4], [1, 9.5]]],\n  (j) => [76 + 6 * j, [[0, 8.5], [0.55, 15.5], [0.9, 9], [1, 10.5]]],\n  (j) => [86 + 6 * j, [[0, 9.5], [0.2, 9.8], [0.62, 5.5], [1, 14]]],\n  (j) => [26 + 6 * j, [[0, 7], [0.45, 14], [1, 19]]],\n  (j) => [40 + 6 * j, [[0, 9], [0.5, 11.5], [0.85, 10.5], [1, 12]]],\n];\nfunction key(K, v) {\n  let i = 0;\n  while (i \u003c K.length - 2 && v > K[i + 1][0]) i++;\n  return mix(K[i][1], K[i + 1][1], sm(K[i][0], K[i + 1][0], v));\n}\n// A radius looked up along a wall kept one entry per row.\nconst at = (pr, h, Hp, i) => ((h = cl(h, 0, Hp)), (i = h | 0), pr[i] + (pr[i + 1] - pr[i]) * (h - i));\nfunction newSpec(not, all) {\n  let type;\n  // The first throw of the night is always one of the three tallest.\n  do type = floor(rnd() * (all ? 7 : 5));\n  while (type === not || (not \u003c -1 && type % 3 === 0));\n  const [Hf, K0] = SHAPES[type](rnd()), g = 0.92 + 0.16 * rnd(), K = K0.map(([v, r]) => [v, r * g]);\n  const pr = F32(ceil(Hf) + 3);\n  for (let h = 0; h \u003c pr.length; h++) pr[h] = key(K, min(1, h / Hf)) + 1.4 * exp(-h / 2.2);\n  // Where the hands shape it: the belly, then the neck above.\n  let vb = 0.5, vn = 0.85, rb = 0, rn = 99;\n  for (const [v, r] of K) if (v > 0.1 && v \u003c 0.85 && r > rb) (rb = r), (vb = v);\n  for (const [v, r] of K) if (v > vb && v \u003c 1 && r \u003c rn) (rn = r), (vn = v);\n  return { type, Hf, pr, rim: K[K.length - 1][1], vb, vn };\n}\n\n// The steps of a throw, how long each takes at Speed 2, and how fast the\n// wheel turns through it (turns a second): slapped down, centred, opened,\n// three pulls, shaped, shown, wired off, lifted to the shelf, and the slump\n// and the balling up after a K1 tap.\nconst DUR = [0.45, 0.9, 0.5, 4.5, 2.6, 1.6, 0.9, 1.8, 1.2, 0.9];\nconst SPIN = [0.4, 1.3, 1.1, 0.95, 0.75, 0.65, 0.3, 0, 0.9, 1];\n// The cylinder after each pull, and its wall at the rim.\nconst RC = [12.5, 11.3, 10.5, 9.9], WALL_T = [4, 2.7, 2.1, 1.7];\nconst cyl = (k, h) => RC[k] - 0.012 * h + 1.4 * exp(-h / 2.2);\nconst dome = (v, r) => r * sqrt(max(0, 1 - v ** 2.4)) + 1.2 * exp(-v * 8);\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, rot: 0, w: 0.4, H: 11, ri: 0, wa: 0, wt: 0, yo: 0, sH: 11, sri: 0, n: 6, LX: 12, clay: 0,\n    pr: F32(128), snap: F32(128), f: F32(N * 3), bg: F32(N * 3),\n    hd: null, hs: null, g: null, wire: -1, pieces: [], sp: [], dr: [], free: 0, bgKey: -1,\n  });\n  P.spec = newSpec(-2);\n  // The pieces already on the shelves, newest first.\n  for (let i = 0; i \u003c 21; i++) P.pieces.push({ slot: ORDER[i], spec: newSpec(i ? P.pieces[i - 1].spec.type : -1, 1), dry: min(1, 0.1 + i * 0.17) });\n  // Old slip spattered in the pan.\n  for (let i = 0; i \u003c 60; i++) {\n    const a = rnd() * TAU, r = 0.66 + 0.3 * rnd();\n    P.sp.push(i \u003c 44 ? [CX + PR * r * sin(a), PY + PR * E * r * cos(a), rnd() \u003c 0.3 ? 2 : 1, 0.6 + 0.5 * rnd()] : [2 + rnd() * 60, PY + 8 + rnd() * 4, 1, 0.5 + 0.4 * rnd()]);\n  }\n  shape(P, 0);\n}\n\nfunction go(P, ph) {\n  // The oldest piece on show goes to the kiln and the new pot takes its place.\n  if (ph === 7) P.free = P.pieces.splice(min(P.n, P.pieces.length) - 1, 1)[0].slot;\n  if (ph === 0 && P.ph === 7) P.pieces.unshift({ slot: P.free, spec: P.spec, dry: 0 }), (P.spec = newSpec(P.spec.type));\n  P.snap.set(P.pr);\n  Object.assign(P, { ph, pt: 0, sH: P.H, sri: P.ri });\n}\n\nfunction fill(P, Hn, f) {\n  P.H = Hn;\n  for (let h = 0, n = min(126, ceil(Hn) + 2); h \u003c= n; h++) P.pr[h] = max(0, f(min(h, Hn)));\n}\nconst snapR = (P, v) => at(P.snap, v * P.sH, P.sH);\nconst offset = (P, h) => P.wa * sin(P.rot) + P.wt * (cl(h / P.H, 0, 1) ** 1.5) * sin(P.rot + 0.8);\n\n// The clay's wall for this moment of the throw, and where the hands are.\nfunction shape(P, p) {\n  const sp = P.spec;\n  let hand = null;\n  Object.assign(P, { wa: 0, wt: 0.2, yo: 0, g: null, wire: -1, ring: 0.07 });\n  switch (P.ph) {\n    case 0: {\n      // Slapped down from the hands, squashing as it lands.\n      const sq = p > 0.6 ? 1 - 0.3 * sin((PI * (p - 0.6)) / 0.4) : 1, r = 10.5 / sqrt(sq), Hn = 11 * sq;\n      P.yo = p \u003c 0.6 ? -56 * (1 - (p / 0.6) ** 2) : 0;\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 0.8), (P.ring = 0.04);\n      hand = [5, -0.3, 0];\n      break;\n    }\n    case 1: {\n      // Centred: coned up and pressed down again while the wobble dies.\n      const Hn = 11 + 10 * sin(PI * sm(0.1, 0.9, p)), r = 10.5 * sqrt(11 / Hn);\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 2.6 * (1 - sm(0, 0.8, p))), (P.ring = 0.05);\n      hand = [Hn * 0.42, -0.5 + 0.4 * sin(p * 20), 0];\n      break;\n    }\n    case 2: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 13, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), cyl(0, h), q));\n      (P.ri = (RC[0] - WALL_T[0]) * sm(0.15, 1, p)), (P.ring = 0.07);\n      hand = [Hn - 1.5, -0.2, 0];\n      break;\n    }\n    case 3: {\n      // Three pulls. The hands squeeze the wall from the base to the rim and\n      // a roll of clay rides up ahead of them.\n      const k = min(2, floor(P.pt / 1.5)), a = (P.pt - k * 1.5) / 1.2, Hp = sp.Hf * 0.93;\n      const HS = [13, mix(13, Hp, 0.55), mix(13, Hp, 0.82), Hp];\n      if (a \u003c= 1) {\n        const Hn = mix(HS[k], HS[k + 1], sm(0, 1, a)), hh = Hn * min(1, a * 1.04) * 0.95, roll = 1.3 * (1 - sm(0.9, 1, a));\n        fill(P, Hn, (h) => mix(cyl(k + 1, h), cyl(k, h), sm(hh - 1, hh + 2.5, h)) + roll * exp(-(((h - hh - 2.6) / 2.2) ** 2)) - 0.8 * exp(-(((h - hh) / 1.4) ** 2)));\n        P.ri = mix(RC[k] - WALL_T[k], RC[k + 1] - WALL_T[k + 1], sm(0.85, 1, a));\n        hand = [hh, -0.3, 0];\n      } else {\n        const Hn = HS[k + 1], b = (a - 1) / 0.25;\n        fill(P, Hn, (h) => cyl(k + 1, h));\n        P.ri = RC[k + 1] - WALL_T[k + 1];\n        hand = [mix(Hn * 0.95, 3, sm(0, 1, b)), 1.5 * sin(PI * b), 0];\n      }\n      break;\n    }\n    case 4: {\n      // Shaped: the belly pushed out from inside, then the neck collared in.\n      const q = sm(0, 1, p), Hn = mix(P.sH, sp.Hf, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), at(sp.pr, (h / Hn) * sp.Hf, sp.Hf), q));\n      P.ri = mix(P.sri, sp.rim - 1.4, q);\n      hand = [Hn * mix(sp.vb, sp.vn, sm(0.4, 0.75, p)), -0.2, 0];\n      break;\n    }\n    case 8: {\n      // Slumped: the wall sinks, bellies and flops round as the wheel turns.\n      const q = sm(0, 1, p), Hn = mix(P.sH, max(12, P.sH * 0.3), q ** 0.8);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), snapR(P, (h / Hn) * 0.6) * (1 + 0.7 * (h / Hn) ** 2) + (3 * h) / Hn, q));\n      P.ri = P.sri > 0 ? max(0, at(P.pr, Hn, Hn) - 1.8) : 0;\n      (P.wt = 6 * sin(PI * min(1, p * 1.3)) + 2), (P.wa = 1);\n      hand = [Hn * 0.5, 4 + 20 * sm(0, 0.3, p), 10 * sm(0, 0.3, p)];\n      break;\n    }\n    case 9: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 11, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), dome(h / Hn, 10.5), q));\n      (P.ri = P.sri * (1 - q)), (P.wa = 2.6), (P.wt = 2 * (1 - q)), (P.ring = 0.04);\n      hand = [Hn * 0.45, mix(6, -0.5, sm(0, 0.5, p)), 0];\n      break;\n    }\n    default: {\n      fill(P, sp.Hf, (h) => at(sp.pr, h, sp.Hf));\n      P.ri = sp.rim - 1.4;\n      // Shown: the hands come away.\n      if (P.ph === 5) hand = [sp.Hf * sp.vn, 2 + 30 * sm(0, 0.6, p), 22 * sm(0, 0.6, p)];\n      if (P.ph === 6) {\n        // Wired off: the hands come in to the wheel and draw the wire under.\n        const a = sm(0, 0.25, p), q = sm(0.25, 1, p), y = mix(BY + 20, BY + E * P.pr[0] * (1 - 2 * q) + 0.5, a);\n        P.wire = a \u003c 1 ? -1 : q;\n        P.hd = [CX - mix(40, 25, a), y, CX + mix(40, 25, a), y];\n        return;\n      }\n      if (P.ph === 7) {\n        // Lifted, then carried back to its slot on the shelf.\n        const q1 = sm(0, 0.3, p), q2 = sm(0.3, 1, p), [sx, sy] = SLOT[P.free], s = mix(1, SHS, q2 ** 0.6);\n        P.g = [mix(CX, sx, q2), mix(BY - 9 * q1, sy + 0.5, q2) - 14 * sin(PI * q2), s];\n        if (q2 \u003c 0.5) {\n          const r = sp.pr[3] * s, y = P.g[1] - 3 * s + 40 * sm(0.2, 0.5, q2);\n          P.hd = [P.g[0] - r, y, P.g[0] + r, y];\n        } else P.hd = null;\n        return;\n      }\n    }\n  }\n  if (hand) {\n    const [h, gap, dy] = hand, r = at(P.pr, h, P.H), o = offset(P, h), y = BY + P.yo - h + dy;\n    P.hd = [CX + o - r - gap, y, CX + o + r + gap, y];\n  } else P.hd = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.clay = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 6, 20));\n  P.LX = mix(9, 55, cl(k[3], 0, 1));\n  if (input.btnPressed && input.btnPressed[0] && P.ph >= 1 && P.ph \u003c= 5) go(P, 8);\n  if ((P.pt += d) >= DUR[P.ph]) go(P, [1, 2, 3, 4, 5, 6, 7, 0, 9, 1][P.ph]);\n  P.w += (SPIN[P.ph] - P.w) * min(1, d * 3);\n  P.rot += TAU * P.w * d;\n  const landing = P.ph === 0 && P.yo \u003c 0;\n  shape(P, P.pt / DUR[P.ph]);\n  // The hands follow their mark, easing over the big jumps between steps.\n  if (!P.hd) P.hs = null;\n  else if (!P.hs) P.hs = P.hd.slice();\n  else for (let i = 0; i \u003c 4; i++) abs(P.hd[i] - P.hs[i]) > 3 ? (P.hs[i] += (P.hd[i] - P.hs[i]) * min(1, d * 14)) : (P.hs[i] = P.hd[i]);\n\n  // Slip flung off the wall by the hands, and spattered as the lump lands.\n  const fling = (x, y, sd, n) => {\n    while (n--) P.dr.push([x, y, sd * (8 + rnd() * 26), -8 - rnd() * 26, PY - 4 + rnd() * 10]);\n  };\n  if (P.hs && (P.ph === 3 || P.ph === 4) && rnd() \u003c d * 3) rnd() \u003c 0.5 ? fling(P.hs[0], P.hs[1], -1, 1) : fling(P.hs[2], P.hs[3], 1, 1);\n  if (landing && P.yo === 0) fling(CX - 9, BY - 2, -1, 3), fling(CX + 9, BY - 2, 1, 3);\n  P.dr = P.dr.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 150 * d);\n    if (q[3] > 0 && q[1] >= q[4]) {\n      P.sp.push([q[0], q[1], rnd() \u003c 0.3 ? 2 : 1, 0.7 + 0.5 * rnd()]);\n      if (P.sp.length > 110) P.sp.shift();\n      return false;\n    }\n    return q[0] > -2 && q[0] \u003c W + 2;\n  });\n  for (const q of P.pieces) q.dry = min(1, q.dry + d / 75);\n}\n\n// The wall, the rack and the lamp's glow, kept until the lamp or the clay changes.\nfunction backdrop(P) {\n  P.bgKey = bgKey(P);\n  // Clay dust lies on everything in the room and takes the clay's colour.\n  const B = P.bg, LX = P.LX, dust = P.dust, wall = WALL.map((v, n) => mix(v, dust[n] * 0.4, 0.55)), wood = WOOD.map((v, n) => mix(v, dust[n] * 0.6, 0.35));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - LX, dy = y - 10, o = (y * W + x) * 3;\n      let f = 0.24 + 0.85 * exp(-(dx * dx + dy * dy * 0.3) / 1500), col = wall;\n      if (dy > 0) {\n        const cw = 4 + dy * 0.72;\n        f += 0.32 * sm(cw + 6, cw - 3, abs(dx)) * exp(-dy / 90);\n      }\n      f *= 0.9 + 0.16 * hash(x >> 1, y >> 1);\n      for (const sy of SHELF) {\n        if (y === sy) (col = wood), (f *= 1.35);\n        else if (y > sy && y \u003c= sy + 3) (col = wood), (f *= 0.75 + 0.15 * hash(x >> 2, sy));\n        else if (y > sy + 3 && y \u003c= sy + 6) f *= 0.45 + 0.17 * (y - sy - 4);\n      }\n      if ((x \u003c 2 || x > 61) && y \u003c SHELF[2] + 4) (col = wood), (f *= x === 1 || x === 62 ? 0.9 : 0.6);\n      const g = 0.55 * exp(-(dx * dx + (y - 10.5) ** 2) / 30);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f + [255, 196, 120][c] * g;\n    }\n}\n\n// The light from the lamp at a spot: its direction and how much reaches it.\nfunction light(P, x, y) {\n  const lx = cl((P.LX - x) / 24, -1.3, 1.3), ly = 0.3 + (y - 10) / 300, n = sqrt(lx * lx + ly * ly + 0.25);\n  return [lx / n, ly / n, 0.5 / n, 0.6 + 0.5 * exp(-((x - P.LX) ** 2 + ((y - 10) * 0.5) ** 2) / 1800)];\n}\n\nlet F;\nconst bgKey = (P) => round(P.LX * 8) * 64 + round(P.clay * 48);\n// A thrown shape turned on its axis, lit by the lamp: wall, rim and the\n// dark inside. Off-centre clay swings its axis round with the wheel.\nfunction solid(o) {\n  const { cx, by, s, pr, Hp, L, alb } = o, Hs = Hp * s, [l0, l1, l2, lm] = L;\n  let Rm = 0;\n  for (let i = 0; i \u003c= Hp + 1; i++) Rm = max(Rm, pr[i]);\n  Rm *= s;\n  const R = (h) => at(pr, h / s, Hp) * s, off = (h) => o.wa * o.s1 + o.wt * (cl(h / Hs, 0, 1) ** 1.5) * o.s2;\n  const RT = R(Hs), cT = cx + off(Hs), yT = by - Hs, ryT = E * RT + 0.35, ri = o.ri * s, ryi = E * ri + 0.25, wb = abs(o.wa) + abs(o.wt);\n  const hn = sqrt(l0 * l0 + l1 * l1 + (l2 + 1) ** 2), hx = l0 / hn, hy = l1 / hn, hz = (l2 + 1) / hn;\n  const y0 = max(0, floor(yT - ryT - 1)), y1 = min(H - 1, ceil(by + E * Rm + 1)), x0 = max(0, floor(cx - Rm - wb - 1)), x1 = min(W - 1, ceil(cx + Rm + wb + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, h0 = by - y - 0.5, ox = wb ? off(h0) : 0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx - ox, o3 = (y * W + x) * 3;\n      let h = h0, r = 0, u = 9, c = 0, k, sp = 0;\n      for (let it = 0; it \u003c 3; it++) {\n        r = R(h);\n        u = r > 0.05 ? px / r : 9;\n        c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n        h = h0 + E * r * c;\n      }\n      r = R(h);\n      u = r > 0.05 ? px / r : 9;\n      if (h >= 0 && h \u003c= Hs && u * u \u003c 1) {\n        c = sqrt(1 - u * u);\n        const hp = h / s, dR = (R(h + 0.6) - R(h - 0.6)) / 1.2 + o.ring * 2.03 * cos(hp * 2.03), nl = 1 / sqrt(1 + dR * dR);\n        const dif = max(0, (u * l0 - dR * l1 + c * l2) * nl), nh = max(0, (u * hx - dR * hy + c * hz) * nl);\n        k = (o.amb + 0.95 * dif + 0.2 * max(0, (-u * l0 + 0.4 * c) * nl)) * lm;\n        sp = o.spec * nh ** 40;\n        if (o.fl) {\n          // Slip streaks and grog flecks ride round with the wheel.\n          const az = asin(u) - o.rot, a = ((az % TAU) + TAU) % TAU, i = floor(a * 6.366), j = floor(hp / 2.3), q = hash(i, j);\n          const st = 1 + 0.1 * sin(3 * az + 1.3) + 0.07 * sin(5 * az + hp * 0.11);\n          k *= st;\n          sp *= st;\n          if (q \u003c 0.2 && abs(a - (i + 0.5) / 6.366) * r \u003c 0.7 && abs(hp - (j + 0.5) * 2.3) \u003c 0.75) k *= q \u003c 0.1 ? 1.5 : 0.55;\n        }\n      } else {\n        const ex = (x + 0.5 - cT) / RT, ey = (y + 0.5 - yT) / ryT;\n        if (RT \u003c 0.4 || ex * ex + ey * ey > 1) continue;\n        const ix = (x + 0.5 - cT) / (ri + 0.01), iy = (y + 0.5 - yT) / ryi;\n        if (ri > 0.4 && ix * ix + iy * iy \u003c 1) k = (0.05 + 0.42 * cl(-ix * l0 * 1.3 + 0.2, 0, 1) * (iy \u003c 0.3 ? 1 : 0.55)) * lm;\n        else (k = (0.3 + 0.8 * l1) * lm), (sp = o.spec * 0.3);\n      }\n      for (let n = 0; n \u003c 3; n++) F[o3 + n] = alb[n] * k + SHINE[n] * sp;\n    }\n}\n\n// The earlier pots on the shelves, wet and dark, then leather-hard, then pale.\nconst STILL = { s: SHS, wa: 0, wt: 0, s1: 0, s2: 0, rot: 0, ring: 0, fl: 0, amb: 0.38 };\nfunction shelves(P, C) {\n  // While a pot is carried over, its slot stands empty.\n  for (let i = 0; i \u003c min(P.n - (P.ph === 7), P.pieces.length); i++) {\n    const q = P.pieces[i], [sx, sy] = SLOT[q.slot], dr = q.dry, a = dr \u003c 0.45 ? dr / 0.45 : (dr - 0.45) / 0.55;\n    const alb = dr \u003c 0.45 ? C[0].map((v, n) => mix(v * 0.62, C[1][n], a)) : C[1].map((v, n) => mix(v, C[2][n], a));\n    solid({ ...STILL, cx: sx, by: sy + 0.5, pr: q.spec.pr, Hp: q.spec.Hf, ri: q.spec.rim - 1.4, alb, spec: 0.6 * (1 - sm(0, 0.4, dr)), L: light(P, sx, sy - 10) });\n  }\n}\n\nconst put = (x, y, col, k) => {\n  if ((x = round(x - 0.5)) >= 0 && x \u003c W && (y = round(y - 0.5)) >= 0 && y \u003c H) for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = col[c] * k;\n};\n\n// The lamp: a cord, an enamel shade and the bulb under it.\nfunction lamp(P) {\n  for (let y = 0; y \u003c 12; y++)\n    for (let x = max(0, floor(P.LX - 8)); x \u003c= min(W - 1, P.LX + 8); x++) {\n      const dx = x + 0.5 - P.LX;\n      if (abs(dx) >= (y \u003c 3 ? 0.6 : y \u003c 10 ? 1.3 + (y - 3) * 0.85 : y \u003c 11 ? 2.4 : 1.2)) continue;\n      const k = y > 2 && y \u003c 9 ? 0.7 + 0.6 * (1 - (y - 3) / 6) * (dx \u003c 0 ? 1 : 0.6) : 1;\n      put(x + 0.5, y + 0.5, y \u003c 3 ? [44, 38, 34] : y \u003c 9 ? [38, 72, 62] : [[236, 170, 96], [255, 244, 214], [255, 226, 168]][y - 9], k);\n    }\n}\n\n// The pot's shadow thrown on the wall behind, leaning away from the lamp.\nfunction shadow(P) {\n  for (let y = max(0, floor(BY - P.H - 6)); y \u003c 106; y++) {\n    const h = BY + 4 - y;\n    if (h \u003c 0 || h > P.H) continue;\n    const r = at(P.pr, h, P.H) * 1.08, xc = CX + (CX - P.LX) * (0.12 + h * 0.007);\n    for (let x = max(0, floor(xc - r - 2)); x \u003c= min(W - 1, xc + r + 2); x++) {\n      const k = 1 - 0.5 * sm(r + 1.5, r - 1, abs(x + 0.5 - xc)), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n}\n\n// The splash pan with its slip, and the wheel head turning in it.\nfunction wheel(P, A) {\n  const [l0, l1, l2, lm] = light(P, CX, PY), mt = METAL.map((v, n) => mix(v, A[n], 0.7)), side = (z) => 0.15 + 0.8 * max(0, z * l0 + sqrt(max(0, 1 - z * z)) * l2);\n  for (let y = 100; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ex = (x + 0.5 - CX) / PR, ey = (y + 0.5 - PY) / (PR * E), dd = ex * ex + ey * ey, o = (y * W + x) * 3;\n      const wx = (x + 0.5 - CX) / WR, wy = (y + 0.5 - BY) / (WR * E), wd = wx * wx + wy * wy;\n      let col, k;\n      if (wd \u003c 1) (col = mt), (k = (0.3 + 0.6 * l1) * lm * (0.9 + 0.1 * cos(sqrt(wd) * WR * 1.4)));\n      else if (wy > 0 && wx * wx \u003c 1 && y + 0.5 \u003c BY + WR * E * sqrt(1 - wx * wx) + 2.5) (col = METAL), (k = 0.5 * side(wx) * lm);\n      else if (dd \u003c 1) dd > 0.86 ? ((col = PLASTIC), (k = (0.6 + 0.6 * l1) * lm)) : ((col = A), (k = (ey \u003c 0 ? 0.26 + 0.12 * (1 + ey) : 0.4) * lm));\n      else if (ey > 0 && ex * ex \u003c 1 && y + 0.5 \u003c PY + PR * E * sqrt(1 - ex * ex) + 6) (col = PLASTIC), (k = side(ex) * lm);\n      else if (y > PY) (col = WALL), (k = 0.2);\n      else continue;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = col[c] * k;\n    }\n  // Slip spattered on the pan, then the wheel's own marks going round.\n  for (const [x, y, z, t] of P.sp) {\n    const ex = (x - CX) / WR, ey = (y - BY) / (WR * E);\n    if (ex * ex + ey * ey \u003c 1.1) continue;\n    put(x, y, A, 0.5 * t * lm);\n    if (z > 1) put(x + 1, y, A, 0.4 * t * lm);\n  }\n  for (let j = 0; j \u003c 6; j++) {\n    const a = P.rot + j * 1.9, r = j \u003c 2 ? 16 : 11.5 + j * 1.6;\n    put(CX + r * sin(a) + 0.5, BY + E * r * cos(a) + 0.5, j \u003c 2 ? [20, 20, 22] : A, j \u003c 2 ? 1 : 0.85 * lm);\n  }\n}\n\n// Skin lit by the lamp, round in section.\nfunction cap(ax, ay, bx, by, ra, rb, col, L, tip) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6, rm = max(ra, rb) + 1;\n  for (let y = max(0, floor(min(ay, by) - rm)); y \u003c= min(H - 1, max(ay, by) + rm); y++)\n    for (let x = max(0, floor(min(ax, bx) - rm)); x \u003c= min(W - 1, max(ax, bx) + rm); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, r = mix(ra, rb, t), dd = ex * ex + ey * ey;\n      if (dd > r * r) continue;\n      const nz = sqrt(1 - dd / (r * r)), k = (0.16 + 0.9 * max(0, (ex / r) * L[0] - (ey / r) * L[1] + nz * L[2])) * L[3], C = tip && t > 0.5 ? tip : col, o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = C[c] * k;\n    }\n}\n\n// A hand on the clay at x, y: the sleeve and forearm down to the side, the\n// back of the hand, the fingers round the wall with slip on them, the thumb.\nfunction hand(P, sd, x, y, slip) {\n  const L = light(P, x, y);\n  cap(x + sd * 22, y + 26, x + sd * 46, y + 62, 5.6, 6.6, SLEEVE, L);\n  cap(x + sd * 6.5, y + 3.5, x + sd * 23, y + 27, 3.4, 4.6, SKIN, L);\n  cap(x + sd * 7.5, y + 3.5, x + sd * 3.2, y - 0.3, 3.6, 3.3, SKIN, L);\n  cap(x + sd * 3.2, y - 0.3, x - sd * 1.8, y + 0.8, 2.6, 2, SKIN, L, slip);\n  cap(x + sd * 3.8, y - 3, x + sd * 2.6, y - 4.4, 1.4, 1.2, SKIN, L, slip);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.pr) return;\n  F = P.f;\n  const c = P.clay * 3, i0 = min(2, floor(c)), f = c - i0, C = [0, 1, 2].map((j) => CLAY[i0][j].map((v, n) => mix(v, CLAY[i0 + 1][j][n], f))), A = C[0];\n  P.dust = C[2];\n  if (P.bgKey !== bgKey(P)) backdrop(P);\n  F.set(P.bg);\n  shelves(P, C);\n  lamp(P);\n  if (!P.g) shadow(P);\n  wheel(P, A);\n  const wire = (front) => {\n    if (P.wire \u003c 0 || !P.hs || P.wire \u003c 0.5 !== front) return;\n    for (let x = P.hs[0]; x \u003c= P.hs[2]; x++) put(x + 0.5, P.hs[1] + 0.5, [220, 222, 230], 0.9);\n  };\n  wire(false);\n  const [gx, gy, gs] = P.g || [CX, BY + P.yo, 1];\n  solid({ cx: gx, by: gy, s: gs, pr: P.pr, Hp: P.H, ri: P.ri, wa: P.wa, wt: P.wt, s1: sin(P.rot), s2: sin(P.rot + 0.8), rot: P.rot, alb: A, spec: 0.9, L: light(P, gx, gy - P.H * gs * 0.5), ring: P.ring, fl: 1, amb: 0.08 });\n  wire(true);\n  if (P.hs) {\n    const slip = SKIN.map((v, n) => mix(v, A[n], 0.6));\n    hand(P, -1, P.hs[0], P.hs[1], slip);\n    hand(P, 1, P.hs[2], P.hs[3], slip);\n  }\n  for (const [x, y] of P.dr) put(x, y, A, 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Clay","min":0,"max":1,"about":"The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower."},{"name":"Pots","min":6,"max":20,"about":"How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it."}],"start":[0,2,6,0.06],"measures":{"motion":0.6649,"detail":0.0524,"edges":0.2558,"complexity":1.7276,"coverage":0.8999,"colour":0.2006,"drift":0.0739},"knobResponse":[0.0662,0.0422,0.05,0.1325]},{"slug":"powder-burst","title":"Powder Burst","family":"cosmetic","round":37,"note":"어두운 스튜디오 바닥의 파우더 케이크가 6.3초마다 좌우를 번갈아 맞아 터지고, 마젠타 파우더가 둥근 머리를 이고 4초쯤 만에 패널 꼭대기 언저리까지 솟아요. 머리는 고리로 말리며 버섯 꼴이 되고, 가장자리에서 고운 먼지가 말려 나가고 무거운 알갱이는 포물선을 그리며 떨어지고, 운모가 가끔 반짝여요. K3 은 머리를 패널보다 넓게 키워 위로 빠져나가게 하고, K4 는 운모를 한 번에 1,460조각까지 늘려요. 누르면 바로 케이크를 쳐요.","idea":"In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.","buttons":"K1 tap strikes the cake now.","code":"// ===== Patternflow pattern =====\n// Title:   Powder Burst\n// Family:  cosmetic\n// Idea:    In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after the slow-motion powder explosions of cosmetics advertising\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive.\n// Knob 2: Speed. How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower.\n// Knob 3: Force. How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90.\n// Knob 4: Shimmer. Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment.\n// Buttons: K1 tap strikes the cake now.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 9000;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Kinds of particle: fine powder, heavy specks, mica flakes.\nconst FINE = 0, SPECK = 1, MICA = 2;\n// Strikes alive at once, kept in a ring.\nconst NB = 4;\n// How far below the head the eye is (see draw), the share of grains drawn\n// round the axis rather than in the plane, how thick powder turns to light\n// (1 - exp(-GAIN d)), and the dust's mean life in seconds.\nconst TILT = 0.12, GAIN = 3.6, FILL = 0.5, LIFE = 6.2;\n// Small eddies: a stream function of four travelling waves, 19 to 44 LEDs\n// long, whose curl wrinkles the cloud's edge without bunching the powder.\nconst WAVES = [\n  [44, 0.4, 0.5],\n  [33, 2.1, -0.7],\n  [25, 3.9, 0.8],\n  [19, 5.1, -1.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 1.9];\n});\n// And a finer set, 8 to 13 LEDs, that only the young powder feels: it\n// wrinkles the head's edge into billows.\nconst FINE_WAVES = [\n  [13, 0.9, 2.2],\n  [10.5, 2.8, -2.6],\n  [8, 4.6, 3.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 2.3];\n});\nconst GS = 4, GX = W / GS + 3, GY = H / GS + 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), kd: F(MAXP), g: F(MAXP), w: F(MAXP), ph: F(MAXP), ca: F(MAXP), sa: F(MAXP),\n    kind: new Uint8Array(MAXP), bid: new Uint8Array(MAXP), n: 0,\n    B0: F(NB).fill(-99), BX: F(NB), BY: F(NB), BD: F(NB), BR: F(NB), BP: F(NB), slot: 0, ring: new Float64Array(NB * 7), nr: 0, fl: [0, 0],\n    U: F(GX * GY), V: F(GX * GY), U2: F(GX * GY), V2: F(GX * GY), D: F(N), O: F(N), S: F(N), G: F(N), tmp: F(N), col: F(12),\n    T: 0, next: 0, side: rnd() \u003c 0.5 ? -1 : 1, hue: 0, force: 0, shim: 0.06, started: false,\n  };\n}\n\n// A strike at x0: the cake sits on the floor at row 116.\nfunction strike(S, x0) {\n  const q = (S.slot = (S.slot + 1) % NB), f = S.force;\n  S.B0[q] = S.T;\n  S.BP[q] = 0;\n  S.BX[q] = x0;\n  S.BY[q] = 116;\n  // How far the head climbs, and how wide its ring opens.\n  S.BD[q] = (80 + 50 * f) * (0.92 + 0.16 * rnd());\n  S.BR[q] = (14.5 + 4.5 * f) * (0.9 + 0.2 * rnd());\n  const nf = 2600, ns = round((90 + 110 * f) * (0.8 + 0.4 * rnd())), nm = 60 + round(1400 * S.shim);\n  for (let j = 0; j \u003c nf + ns + nm && S.n \u003c MAXP; j++) {\n    const i = S.n++, kind = j \u003c nf ? FINE : j \u003c nf + ns ? SPECK : MICA;\n    S.x[i] = x0 + (rnd() - 0.5) * 5;\n    S.y[i] = 115 + (rnd() - 0.5) * 2;\n    S.age[i] = -rnd() * 0.06;\n    S.kind[i] = kind;\n    S.bid[i] = q;\n    S.ph[i] = rnd() * 2 * PI;\n    const az = rnd() * 2 * PI, fill = rnd() \u003c FILL;\n    S.ca[i] = fill ? cos(az) : 1;\n    S.sa[i] = fill ? sin(az) : 0;\n    if (kind === SPECK) {\n      // Specks are thrown out of the cake on steep arcs and fall back.\n      const a = (rnd() + rnd() + rnd() - 1.5) * 1.1, sp = (60 + 50 * rnd()) * (1 + 0.5 * f);\n      S.vx[i] = sp * sin(a);\n      S.vy[i] = -sp * cos(a);\n      S.kd[i] = 0.5 + 0.4 * rnd();\n      S.g[i] = 55 + 25 * rnd();\n      S.life[i] = 2.4 + rnd();\n      S.w[i] = 0.5 + 0.5 * rnd();\n      continue;\n    }\n    // Fine powder is thrown from the cake to a place round the head's\n    // start and comes to rest there in about 0.2 s, its throw halving every\n    // 0.04 to 0.06 s, so the head forms full: 16% round its two eddies, 40%\n    // in a dome over them. Another 22% is lofted over the next 0.6 s and\n    // drawn up behind as the stem, 10% is a skirt flung low along the floor\n    // and 12% a spray that fans out high.\n    const kd = (S.kd[i] = 12 + 6 * rnd()), u = rnd(), R = S.BR[q];\n    let tx, ty;\n    if (u \u003c 0.16) {\n      // Round the two eddies of the head, the hubs it rolls up on.\n      const g = gauss2();\n      tx = x0 + (rnd() \u003c 0.5 ? -R : R) + g[0] * 0.28 * R;\n      ty = 104 + g[1] * 0.28 * R;\n    } else if (u \u003c 0.56 || kind === MICA) {\n      // A thick dome over the head: as the head climbs its outside runs\n      // down round the eddies and curls in under the cap.\n      const t = PI * (1.05 + 0.9 * rnd()), r = 1 - 0.4 * rnd() * rnd();\n      tx = x0 + r * cos(t) * 1.75 * R;\n      ty = 104 + r * sin(t) * 1.45 * R;\n    } else if (u \u003c 0.78) {\n      tx = x0 + (rnd() - 0.5) * 10;\n      ty = 112 - 6 * rnd();\n      S.age[i] = -0.1 - 0.6 * rnd();\n    } else if (u \u003c 0.88) {\n      tx = x0 + (rnd() \u003c 0.5 ? -1 : 1) * (8 + 18 * rnd()) * (1 + 0.4 * f);\n      ty = 114 - 4 * rnd();\n    } else {\n      const a = (rnd() - 0.5) * 2.4, r = (24 + 30 * rnd()) * (1 + 0.4 * f);\n      tx = x0 + r * sin(a);\n      ty = 108 - r * cos(a);\n    }\n    S.vx[i] = (tx - S.x[i]) * kd;\n    S.vy[i] = (ty - S.y[i]) * kd;\n    S.g[i] = 0.4 + 1.2 * rnd();\n    S.life[i] = LIFE * (0.8 + 0.4 * rnd());\n    S.w[i] = 0.6 + 0.6 * rnd();\n  }\n}\n\nfunction gauss2() {\n  const r = sqrt(-2 * Math.log(1 - rnd())), t = 2 * PI * rnd();\n  return [r * cos(t), r * sin(t)];\n}\n\nfunction round(v) {\n  return floor(v + 0.5);\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.kd[i] = S.kd[j];\n  S.g[i] = S.g[j];\n  S.w[i] = S.w[j];\n  S.ph[i] = S.ph[j];\n  S.ca[i] = S.ca[j];\n  S.sa[i] = S.sa[j];\n  S.kind[i] = S.kind[j];\n  S.bid[i] = S.bid[j];\n}\n\n// The eddies on a grid every 4 LEDs, read off between.\nfunction eddies(S) {\n  const T = S.T;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U[gy * GX + gx] = u;\n      S.V[gy * GX + gx] = v;\n      u = 0;\n      v = 0;\n      for (const [kx, ky, w, m, ph] of FINE_WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U2[gy * GX + gx] = u;\n      S.V2[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, h) {\n  S.T += h;\n  S.next -= h;\n  if (S.next \u003c= 0) {\n    // Strikes alternate sides of the middle, 9 to 15 LEDs out.\n    S.side = -S.side;\n    strike(S, 32 + S.side * (9 + 6 * rnd()));\n    S.next = 6.3 * (0.95 + 0.1 * rnd());\n  }\n  eddies(S);\n  // Each strike's head: the plume's ring, seen edge on as two eddies of\n  // opposite spin R apart either side of its axis, climbing D rows on a\n  // curve that slows as it goes.\n  const ring = S.ring;\n  let nr = 0;\n  for (let q = 0; q \u003c NB; q++) {\n    // The head forms once the thrown powder has come to rest round it,\n    // 0.3 s after the strike, and gathers speed over a quarter second.\n    const a = S.T - S.B0[q] - 0.3;\n    if (a \u003c 0 || a > 7) continue;\n    const tau = 2.6, D = S.BD[q], V = ((D / tau) * exp(-a / tau) + 3) * sm(0, 0.25, a);\n    S.BP[q] += V * h;\n    // A third of the climb is the eddies' own: their strength is what moves\n    // a pair of cores 0.65 R wide at V / 3, 4.42 pi R V / 3. The rest is the\n    // warm air the head rides on, a broad rising blob that carries the\n    // cores at the same 2V / 3 as the powder round them; full-strength\n    // eddies rolled the dome into the cores within a second and the head\n    // read as two lobes.\n    const R = S.BR[q], rc = 0.65 * R, o = nr * 7;\n    ring[o] = S.BX[q];\n    ring[o + 1] = S.BY[q] - 12 - S.BP[q];\n    ring[o + 2] = R;\n    ring[o + 3] = rc * rc;\n    ring[o + 4] = (R * (4 + 0.4225) * V) / 6;\n    ring[o + 5] = ((2 * V) / 3) * exp(1 / (1.9 * 1.9));\n    ring[o + 6] = 30 * exp(-a / 2);\n    nr++;\n  }\n  S.nr = nr;\n  const fl = S.fl;\n  for (let i = S.n - 1; i >= 0; i--) {\n    let age = S.age[i];\n    if (age \u003c 0) {\n      S.age[i] = age + h;\n      continue;\n    }\n    age = S.age[i] += h;\n    const x = S.x[i], y = S.y[i];\n    if (age > S.life[i] || y > H + 6 || y \u003c -30 || x \u003c -20 || x > W + 20) {\n      kill(S, i);\n      continue;\n    }\n    if (S.kind[i] === SPECK) {\n      flow(S, x, y, -1);\n      const kd = 1 - exp(-S.kd[i] * h);\n      S.vx[i] += (fl[0] - S.vx[i]) * kd;\n      S.vy[i] += (fl[1] - S.vy[i]) * kd + S.g[i] * h;\n      S.x[i] = x + S.vx[i] * h;\n      S.y[i] = y + S.vy[i] * h;\n    } else {\n      // Fine powder rides the air exactly, plus what is left of the throw\n      // from the strike and a slow settling. Given inertia instead, as the\n      // specks have, it was flung out of the head's two eddies and the head\n      // read as a hollow arch. It is moved by the midpoint rule: a plain\n      // step turned each eddy's core, 19 radians a second, into an outward\n      // spiral, and the head showed two dark holes like eye sockets.\n      const kd = exp(-S.kd[i] * 0.5 * h), tx = S.vx[i] * kd, ty = S.vy[i] * kd + S.g[i] * min(1, age * 0.3);\n      flow(S, x, y, age);\n      flow(S, x + 0.5 * h * (fl[0] + tx), y + 0.5 * h * (fl[1] + ty), age);\n      S.x[i] = x + h * (fl[0] + tx) + (rnd() - 0.5) * 0.5;\n      S.y[i] = y + h * (fl[1] + ty) + (rnd() - 0.5) * 0.5;\n      S.vx[i] *= kd * kd;\n      S.vy[i] *= kd * kd;\n    }\n    // The floor: powder that comes down stays down.\n    if (S.y[i] > 118) {\n      S.y[i] = 118;\n      S.vy[i] *= -0.2;\n      S.vx[i] *= 0.6;\n    }\n  }\n}\n\n// The air at (x, y), into S.fl: the heads' eddies, the column of air still\n// rising under each head, and for powder (age 0 and up) the small eddies,\n// which grow as it ages and spreads.\nfunction flow(S, x, y, age) {\n  const ring = S.ring;\n  let ux = 0, uy = 0;\n  for (let r = 0; r \u003c S.nr; r++) {\n    const o = r * 7, xc = ring[o], yc = ring[o + 1], R = ring[o + 2], rc2 = ring[o + 3], G = ring[o + 4];\n    // Left eddy spins so its inside runs up, the right one the other way.\n    let dx = x - xc + R, dy = y - yc, q = -G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    dx = x - xc - R;\n    q = G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    // The warm air the head rides on.\n    const ex = (x - xc) / (1.9 * R), ey = (y - yc + 0.2 * R) / (1.7 * R);\n    uy -= ring[o + 5] * exp(-ex * ex - ey * ey);\n    // Under the head a column of air keeps rising after it, lifting the\n    // late powder into a stem.\n    if (y > yc) {\n      const sx = (x - xc) / 7;\n      uy -= ring[o + 6] * exp(-sx * sx);\n    }\n  }\n  if (age >= 0) {\n    const U = S.U, V = S.V;\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const eu = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const ev = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    const amp = 0.8 + 1.6 * min(1, age * 0.4), a2 = 9 * exp(-age * 0.7);\n    const U2 = S.U2, V2 = S.V2;\n    const fu = (U2[g] * (1 - ax) + U2[g + 1] * ax) * (1 - ay) + (U2[g + GX] * (1 - ax) + U2[g + GX + 1] * ax) * ay;\n    const fv = (V2[g] * (1 - ax) + V2[g + 1] * ax) * (1 - ay) + (V2[g + GX] * (1 - ax) + V2[g + GX + 1] * ax) * ay;\n    ux += eu * amp + fu * a2;\n    uy += ev * amp + fv * a2;\n  }\n  S.fl[0] = ux;\n  S.fl[1] = uy;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.force = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open 1.5 s after the first strike, the head already rising.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  const h = d * rate;\n  const sub = h > 0.025 ? 2 : 1;\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, O = S.O, SP = S.S, G = S.G, tmp = S.tmp, col = S.col, T = S.T, sh = S.shim;\n  D.fill(0);\n  O.fill(0);\n  SP.fill(0);\n  G.fill(0);\n  // The flow is worked out in one plane through the head's axis, and the\n  // cloud is round that axis, so half the grains are drawn at an angle of\n  // their own round it, seen from a little below, and half in the plane,\n  // which keeps the curls at the head's rim. All in the plane, the head\n  // showed two lobes with dark between them where the jet up the middle\n  // swept it clean; all round the axis, a smooth ball.\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / S.life[i], u2 = u * u, env = min(1, age * 12) * (1 - u2 * u2);\n    const kind = S.kind[i], ax = S.BX[S.bid[i]], r = S.x[i] - ax;\n    const x = ax + r * S.ca[i], y = S.y[i] + r * S.sa[i] * TILT;\n    if (kind === SPECK) splat(SP, x, y, S.w[i] * env);\n    else if (kind === MICA) {\n      // A flake only shows when it turns to the light: a swell a few times\n      // a second, sharpened so most of the time it is dark. Flakes add no\n      // body to the cloud, so Shimmer leaves its size alone.\n      const tw = 0.5 + 0.5 * sin(S.ph[i] + (3 + 2 * sin(S.ph[i] * 3)) * T);\n      const t4 = tw * tw * tw * tw;\n      splat(G, x, y, env * t4 * t4 * (0.8 + 1.2 * sh));\n    } else {\n      // Powder older than a second and a half goes into a softer layer,\n      // so the trails behind the head spread into haze.\n      const old = sm(1, 2.5, age);\n      if (old \u003c 1) splat(D, x, y, S.w[i] * env * (1 - old));\n      if (old > 0) splat(O, x, y, S.w[i] * env * old);\n    }\n  }\n  blur(D, tmp, 2);\n  blur(D, tmp, 1);\n  blur(O, tmp, 3);\n  blur(O, tmp, 2);\n  for (let p = 0; p \u003c N; p++) D[p] += O[p];\n  // Pigment, its pale lit side, the pearl tint mica gives the lit side, and\n  // the glint colour. Coral to lemon read brown and olive when dim, so there\n  // the pigment is paler. Elsewhere the pigment is laid at full saturation\n  // and only the lit side of thick powder goes pale: with an orchid pink at\n  // 0.82 and thick powder paling all over, the cloud's colourfulness was\n  // 0.231, and this way it is 0.393, beside Tunnel on the colour x drift\n  // map, since the cell where it first stood beside Bokeh took Heawood\n  // Torus first.\n  const h = S.hue + 0.84, hf = h - floor(h), warm = sm(0.0, 0.05, hf) * (1 - sm(0.17, 0.24, hf));\n  hsv(h, 1.0 - 0.32 * warm, 1, col, 0);\n  hsv(h - 0.02, 0.6 - 0.12 * warm, 1, col, 3);\n  hsv(h + 0.08, 0.15, 1, col, 6);\n  hsv(h + 0.2, 0.4, 1, col, 9);\n  // Warm powder's faint end is lifted too: a fading peach cloud read as\n  // milky coffee.\n  const gain = GAIN + 0.3 * warm, ga = 1 - 0.4 * warm;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const d = D[p], a = (1 - exp(-d * gain)) ** ga, s = min(1.4, SP[p]), g = G[p];\n      // The studio light is above and to the left: where the cloud thickens\n      // downward or rightward its surface faces the light. Without it the\n      // head was a flat blob of colour.\n      const dn = y \u003c H - 1 ? D[p + W] : d, up = y > 0 ? D[p - W] : d, rt = x \u003c W - 1 ? D[p + 1] : d, lf = x > 0 ? D[p - 1] : d;\n      const nrm = cl(((dn - up) * 0.8 + (rt - lf) * 0.4) / (d + 0.5), -1, 1), lit = 0.98 + 0.4 * nrm;\n      // Thin powder glows in the pigment, thick powder goes pale and bright,\n      // and with mica its lit side turns pearl.\n      const wt = a * a * cl(0.22 + 0.6 * nrm, 0, 1), pm = sh * 0.9 * cl(0.55 + nrm, 0, 1);\n      let r = 0, gg = 0, b = 0;\n      for (let c = 0; c \u003c 3; c++) {\n        const lc = col[3 + c] * (1 - pm) + col[9 + c] * pm, v = (col[c] * (1 - wt) + lc * wt) * a * lit;\n        // Specks are pigment, glints are light.\n        const o = v + col[c] * s * 0.8 + col[6 + c] * g;\n        if (c === 0) r = o;\n        else if (c === 1) gg = o;\n        else b = o;\n      }\n      if (warm > 0) {\n        // Dim peach and lemon read brown and olive, so as warm powder dims\n        // it greys toward a pale dust of the same level instead.\n        const m = max(r, gg, b), k = 0.9 * warm * sqrt(1 - min(1, m / 0.85));\n        r += (m - r) * k;\n        gg += (m - gg) * k;\n        b += (m - b) * k;\n      }\n      display.setPixel(x, y, knee(r * 255), knee(gg * 255), knee(b * 255));\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-powder-burst","type":"code","name":"powder-burst","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Powder Burst\n// Family:  cosmetic\n// Idea:    In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after the slow-motion powder explosions of cosmetics advertising\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive.\n// Knob 2: Speed. How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower.\n// Knob 3: Force. How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90.\n// Knob 4: Shimmer. Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment.\n// Buttons: K1 tap strikes the cake now.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 9000;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Kinds of particle: fine powder, heavy specks, mica flakes.\nconst FINE = 0, SPECK = 1, MICA = 2;\n// Strikes alive at once, kept in a ring.\nconst NB = 4;\n// How far below the head the eye is (see draw), the share of grains drawn\n// round the axis rather than in the plane, how thick powder turns to light\n// (1 - exp(-GAIN d)), and the dust's mean life in seconds.\nconst TILT = 0.12, GAIN = 3.6, FILL = 0.5, LIFE = 6.2;\n// Small eddies: a stream function of four travelling waves, 19 to 44 LEDs\n// long, whose curl wrinkles the cloud's edge without bunching the powder.\nconst WAVES = [\n  [44, 0.4, 0.5],\n  [33, 2.1, -0.7],\n  [25, 3.9, 0.8],\n  [19, 5.1, -1.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 1.9];\n});\n// And a finer set, 8 to 13 LEDs, that only the young powder feels: it\n// wrinkles the head's edge into billows.\nconst FINE_WAVES = [\n  [13, 0.9, 2.2],\n  [10.5, 2.8, -2.6],\n  [8, 4.6, 3.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 2.3];\n});\nconst GS = 4, GX = W / GS + 3, GY = H / GS + 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), kd: F(MAXP), g: F(MAXP), w: F(MAXP), ph: F(MAXP), ca: F(MAXP), sa: F(MAXP),\n    kind: new Uint8Array(MAXP), bid: new Uint8Array(MAXP), n: 0,\n    B0: F(NB).fill(-99), BX: F(NB), BY: F(NB), BD: F(NB), BR: F(NB), BP: F(NB), slot: 0, ring: new Float64Array(NB * 7), nr: 0, fl: [0, 0],\n    U: F(GX * GY), V: F(GX * GY), U2: F(GX * GY), V2: F(GX * GY), D: F(N), O: F(N), S: F(N), G: F(N), tmp: F(N), col: F(12),\n    T: 0, next: 0, side: rnd() \u003c 0.5 ? -1 : 1, hue: 0, force: 0, shim: 0.06, started: false,\n  };\n}\n\n// A strike at x0: the cake sits on the floor at row 116.\nfunction strike(S, x0) {\n  const q = (S.slot = (S.slot + 1) % NB), f = S.force;\n  S.B0[q] = S.T;\n  S.BP[q] = 0;\n  S.BX[q] = x0;\n  S.BY[q] = 116;\n  // How far the head climbs, and how wide its ring opens.\n  S.BD[q] = (80 + 50 * f) * (0.92 + 0.16 * rnd());\n  S.BR[q] = (14.5 + 4.5 * f) * (0.9 + 0.2 * rnd());\n  const nf = 2600, ns = round((90 + 110 * f) * (0.8 + 0.4 * rnd())), nm = 60 + round(1400 * S.shim);\n  for (let j = 0; j \u003c nf + ns + nm && S.n \u003c MAXP; j++) {\n    const i = S.n++, kind = j \u003c nf ? FINE : j \u003c nf + ns ? SPECK : MICA;\n    S.x[i] = x0 + (rnd() - 0.5) * 5;\n    S.y[i] = 115 + (rnd() - 0.5) * 2;\n    S.age[i] = -rnd() * 0.06;\n    S.kind[i] = kind;\n    S.bid[i] = q;\n    S.ph[i] = rnd() * 2 * PI;\n    const az = rnd() * 2 * PI, fill = rnd() \u003c FILL;\n    S.ca[i] = fill ? cos(az) : 1;\n    S.sa[i] = fill ? sin(az) : 0;\n    if (kind === SPECK) {\n      // Specks are thrown out of the cake on steep arcs and fall back.\n      const a = (rnd() + rnd() + rnd() - 1.5) * 1.1, sp = (60 + 50 * rnd()) * (1 + 0.5 * f);\n      S.vx[i] = sp * sin(a);\n      S.vy[i] = -sp * cos(a);\n      S.kd[i] = 0.5 + 0.4 * rnd();\n      S.g[i] = 55 + 25 * rnd();\n      S.life[i] = 2.4 + rnd();\n      S.w[i] = 0.5 + 0.5 * rnd();\n      continue;\n    }\n    // Fine powder is thrown from the cake to a place round the head's\n    // start and comes to rest there in about 0.2 s, its throw halving every\n    // 0.04 to 0.06 s, so the head forms full: 16% round its two eddies, 40%\n    // in a dome over them. Another 22% is lofted over the next 0.6 s and\n    // drawn up behind as the stem, 10% is a skirt flung low along the floor\n    // and 12% a spray that fans out high.\n    const kd = (S.kd[i] = 12 + 6 * rnd()), u = rnd(), R = S.BR[q];\n    let tx, ty;\n    if (u \u003c 0.16) {\n      // Round the two eddies of the head, the hubs it rolls up on.\n      const g = gauss2();\n      tx = x0 + (rnd() \u003c 0.5 ? -R : R) + g[0] * 0.28 * R;\n      ty = 104 + g[1] * 0.28 * R;\n    } else if (u \u003c 0.56 || kind === MICA) {\n      // A thick dome over the head: as the head climbs its outside runs\n      // down round the eddies and curls in under the cap.\n      const t = PI * (1.05 + 0.9 * rnd()), r = 1 - 0.4 * rnd() * rnd();\n      tx = x0 + r * cos(t) * 1.75 * R;\n      ty = 104 + r * sin(t) * 1.45 * R;\n    } else if (u \u003c 0.78) {\n      tx = x0 + (rnd() - 0.5) * 10;\n      ty = 112 - 6 * rnd();\n      S.age[i] = -0.1 - 0.6 * rnd();\n    } else if (u \u003c 0.88) {\n      tx = x0 + (rnd() \u003c 0.5 ? -1 : 1) * (8 + 18 * rnd()) * (1 + 0.4 * f);\n      ty = 114 - 4 * rnd();\n    } else {\n      const a = (rnd() - 0.5) * 2.4, r = (24 + 30 * rnd()) * (1 + 0.4 * f);\n      tx = x0 + r * sin(a);\n      ty = 108 - r * cos(a);\n    }\n    S.vx[i] = (tx - S.x[i]) * kd;\n    S.vy[i] = (ty - S.y[i]) * kd;\n    S.g[i] = 0.4 + 1.2 * rnd();\n    S.life[i] = LIFE * (0.8 + 0.4 * rnd());\n    S.w[i] = 0.6 + 0.6 * rnd();\n  }\n}\n\nfunction gauss2() {\n  const r = sqrt(-2 * Math.log(1 - rnd())), t = 2 * PI * rnd();\n  return [r * cos(t), r * sin(t)];\n}\n\nfunction round(v) {\n  return floor(v + 0.5);\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.kd[i] = S.kd[j];\n  S.g[i] = S.g[j];\n  S.w[i] = S.w[j];\n  S.ph[i] = S.ph[j];\n  S.ca[i] = S.ca[j];\n  S.sa[i] = S.sa[j];\n  S.kind[i] = S.kind[j];\n  S.bid[i] = S.bid[j];\n}\n\n// The eddies on a grid every 4 LEDs, read off between.\nfunction eddies(S) {\n  const T = S.T;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U[gy * GX + gx] = u;\n      S.V[gy * GX + gx] = v;\n      u = 0;\n      v = 0;\n      for (const [kx, ky, w, m, ph] of FINE_WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U2[gy * GX + gx] = u;\n      S.V2[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, h) {\n  S.T += h;\n  S.next -= h;\n  if (S.next \u003c= 0) {\n    // Strikes alternate sides of the middle, 9 to 15 LEDs out.\n    S.side = -S.side;\n    strike(S, 32 + S.side * (9 + 6 * rnd()));\n    S.next = 6.3 * (0.95 + 0.1 * rnd());\n  }\n  eddies(S);\n  // Each strike's head: the plume's ring, seen edge on as two eddies of\n  // opposite spin R apart either side of its axis, climbing D rows on a\n  // curve that slows as it goes.\n  const ring = S.ring;\n  let nr = 0;\n  for (let q = 0; q \u003c NB; q++) {\n    // The head forms once the thrown powder has come to rest round it,\n    // 0.3 s after the strike, and gathers speed over a quarter second.\n    const a = S.T - S.B0[q] - 0.3;\n    if (a \u003c 0 || a > 7) continue;\n    const tau = 2.6, D = S.BD[q], V = ((D / tau) * exp(-a / tau) + 3) * sm(0, 0.25, a);\n    S.BP[q] += V * h;\n    // A third of the climb is the eddies' own: their strength is what moves\n    // a pair of cores 0.65 R wide at V / 3, 4.42 pi R V / 3. The rest is the\n    // warm air the head rides on, a broad rising blob that carries the\n    // cores at the same 2V / 3 as the powder round them; full-strength\n    // eddies rolled the dome into the cores within a second and the head\n    // read as two lobes.\n    const R = S.BR[q], rc = 0.65 * R, o = nr * 7;\n    ring[o] = S.BX[q];\n    ring[o + 1] = S.BY[q] - 12 - S.BP[q];\n    ring[o + 2] = R;\n    ring[o + 3] = rc * rc;\n    ring[o + 4] = (R * (4 + 0.4225) * V) / 6;\n    ring[o + 5] = ((2 * V) / 3) * exp(1 / (1.9 * 1.9));\n    ring[o + 6] = 30 * exp(-a / 2);\n    nr++;\n  }\n  S.nr = nr;\n  const fl = S.fl;\n  for (let i = S.n - 1; i >= 0; i--) {\n    let age = S.age[i];\n    if (age \u003c 0) {\n      S.age[i] = age + h;\n      continue;\n    }\n    age = S.age[i] += h;\n    const x = S.x[i], y = S.y[i];\n    if (age > S.life[i] || y > H + 6 || y \u003c -30 || x \u003c -20 || x > W + 20) {\n      kill(S, i);\n      continue;\n    }\n    if (S.kind[i] === SPECK) {\n      flow(S, x, y, -1);\n      const kd = 1 - exp(-S.kd[i] * h);\n      S.vx[i] += (fl[0] - S.vx[i]) * kd;\n      S.vy[i] += (fl[1] - S.vy[i]) * kd + S.g[i] * h;\n      S.x[i] = x + S.vx[i] * h;\n      S.y[i] = y + S.vy[i] * h;\n    } else {\n      // Fine powder rides the air exactly, plus what is left of the throw\n      // from the strike and a slow settling. Given inertia instead, as the\n      // specks have, it was flung out of the head's two eddies and the head\n      // read as a hollow arch. It is moved by the midpoint rule: a plain\n      // step turned each eddy's core, 19 radians a second, into an outward\n      // spiral, and the head showed two dark holes like eye sockets.\n      const kd = exp(-S.kd[i] * 0.5 * h), tx = S.vx[i] * kd, ty = S.vy[i] * kd + S.g[i] * min(1, age * 0.3);\n      flow(S, x, y, age);\n      flow(S, x + 0.5 * h * (fl[0] + tx), y + 0.5 * h * (fl[1] + ty), age);\n      S.x[i] = x + h * (fl[0] + tx) + (rnd() - 0.5) * 0.5;\n      S.y[i] = y + h * (fl[1] + ty) + (rnd() - 0.5) * 0.5;\n      S.vx[i] *= kd * kd;\n      S.vy[i] *= kd * kd;\n    }\n    // The floor: powder that comes down stays down.\n    if (S.y[i] > 118) {\n      S.y[i] = 118;\n      S.vy[i] *= -0.2;\n      S.vx[i] *= 0.6;\n    }\n  }\n}\n\n// The air at (x, y), into S.fl: the heads' eddies, the column of air still\n// rising under each head, and for powder (age 0 and up) the small eddies,\n// which grow as it ages and spreads.\nfunction flow(S, x, y, age) {\n  const ring = S.ring;\n  let ux = 0, uy = 0;\n  for (let r = 0; r \u003c S.nr; r++) {\n    const o = r * 7, xc = ring[o], yc = ring[o + 1], R = ring[o + 2], rc2 = ring[o + 3], G = ring[o + 4];\n    // Left eddy spins so its inside runs up, the right one the other way.\n    let dx = x - xc + R, dy = y - yc, q = -G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    dx = x - xc - R;\n    q = G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    // The warm air the head rides on.\n    const ex = (x - xc) / (1.9 * R), ey = (y - yc + 0.2 * R) / (1.7 * R);\n    uy -= ring[o + 5] * exp(-ex * ex - ey * ey);\n    // Under the head a column of air keeps rising after it, lifting the\n    // late powder into a stem.\n    if (y > yc) {\n      const sx = (x - xc) / 7;\n      uy -= ring[o + 6] * exp(-sx * sx);\n    }\n  }\n  if (age >= 0) {\n    const U = S.U, V = S.V;\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const eu = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const ev = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    const amp = 0.8 + 1.6 * min(1, age * 0.4), a2 = 9 * exp(-age * 0.7);\n    const U2 = S.U2, V2 = S.V2;\n    const fu = (U2[g] * (1 - ax) + U2[g + 1] * ax) * (1 - ay) + (U2[g + GX] * (1 - ax) + U2[g + GX + 1] * ax) * ay;\n    const fv = (V2[g] * (1 - ax) + V2[g + 1] * ax) * (1 - ay) + (V2[g + GX] * (1 - ax) + V2[g + GX + 1] * ax) * ay;\n    ux += eu * amp + fu * a2;\n    uy += ev * amp + fv * a2;\n  }\n  S.fl[0] = ux;\n  S.fl[1] = uy;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.force = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open 1.5 s after the first strike, the head already rising.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  const h = d * rate;\n  const sub = h > 0.025 ? 2 : 1;\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, O = S.O, SP = S.S, G = S.G, tmp = S.tmp, col = S.col, T = S.T, sh = S.shim;\n  D.fill(0);\n  O.fill(0);\n  SP.fill(0);\n  G.fill(0);\n  // The flow is worked out in one plane through the head's axis, and the\n  // cloud is round that axis, so half the grains are drawn at an angle of\n  // their own round it, seen from a little below, and half in the plane,\n  // which keeps the curls at the head's rim. All in the plane, the head\n  // showed two lobes with dark between them where the jet up the middle\n  // swept it clean; all round the axis, a smooth ball.\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / S.life[i], u2 = u * u, env = min(1, age * 12) * (1 - u2 * u2);\n    const kind = S.kind[i], ax = S.BX[S.bid[i]], r = S.x[i] - ax;\n    const x = ax + r * S.ca[i], y = S.y[i] + r * S.sa[i] * TILT;\n    if (kind === SPECK) splat(SP, x, y, S.w[i] * env);\n    else if (kind === MICA) {\n      // A flake only shows when it turns to the light: a swell a few times\n      // a second, sharpened so most of the time it is dark. Flakes add no\n      // body to the cloud, so Shimmer leaves its size alone.\n      const tw = 0.5 + 0.5 * sin(S.ph[i] + (3 + 2 * sin(S.ph[i] * 3)) * T);\n      const t4 = tw * tw * tw * tw;\n      splat(G, x, y, env * t4 * t4 * (0.8 + 1.2 * sh));\n    } else {\n      // Powder older than a second and a half goes into a softer layer,\n      // so the trails behind the head spread into haze.\n      const old = sm(1, 2.5, age);\n      if (old \u003c 1) splat(D, x, y, S.w[i] * env * (1 - old));\n      if (old > 0) splat(O, x, y, S.w[i] * env * old);\n    }\n  }\n  blur(D, tmp, 2);\n  blur(D, tmp, 1);\n  blur(O, tmp, 3);\n  blur(O, tmp, 2);\n  for (let p = 0; p \u003c N; p++) D[p] += O[p];\n  // Pigment, its pale lit side, the pearl tint mica gives the lit side, and\n  // the glint colour. Coral to lemon read brown and olive when dim, so there\n  // the pigment is paler. Elsewhere the pigment is laid at full saturation\n  // and only the lit side of thick powder goes pale: with an orchid pink at\n  // 0.82 and thick powder paling all over, the cloud's colourfulness was\n  // 0.231, and this way it is 0.393, beside Tunnel on the colour x drift\n  // map, since the cell where it first stood beside Bokeh took Heawood\n  // Torus first.\n  const h = S.hue + 0.84, hf = h - floor(h), warm = sm(0.0, 0.05, hf) * (1 - sm(0.17, 0.24, hf));\n  hsv(h, 1.0 - 0.32 * warm, 1, col, 0);\n  hsv(h - 0.02, 0.6 - 0.12 * warm, 1, col, 3);\n  hsv(h + 0.08, 0.15, 1, col, 6);\n  hsv(h + 0.2, 0.4, 1, col, 9);\n  // Warm powder's faint end is lifted too: a fading peach cloud read as\n  // milky coffee.\n  const gain = GAIN + 0.3 * warm, ga = 1 - 0.4 * warm;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const d = D[p], a = (1 - exp(-d * gain)) ** ga, s = min(1.4, SP[p]), g = G[p];\n      // The studio light is above and to the left: where the cloud thickens\n      // downward or rightward its surface faces the light. Without it the\n      // head was a flat blob of colour.\n      const dn = y \u003c H - 1 ? D[p + W] : d, up = y > 0 ? D[p - W] : d, rt = x \u003c W - 1 ? D[p + 1] : d, lf = x > 0 ? D[p - 1] : d;\n      const nrm = cl(((dn - up) * 0.8 + (rt - lf) * 0.4) / (d + 0.5), -1, 1), lit = 0.98 + 0.4 * nrm;\n      // Thin powder glows in the pigment, thick powder goes pale and bright,\n      // and with mica its lit side turns pearl.\n      const wt = a * a * cl(0.22 + 0.6 * nrm, 0, 1), pm = sh * 0.9 * cl(0.55 + nrm, 0, 1);\n      let r = 0, gg = 0, b = 0;\n      for (let c = 0; c \u003c 3; c++) {\n        const lc = col[3 + c] * (1 - pm) + col[9 + c] * pm, v = (col[c] * (1 - wt) + lc * wt) * a * lit;\n        // Specks are pigment, glints are light.\n        const o = v + col[c] * s * 0.8 + col[6 + c] * g;\n        if (c === 0) r = o;\n        else if (c === 1) gg = o;\n        else b = o;\n      }\n      if (warm > 0) {\n        // Dim peach and lemon read brown and olive, so as warm powder dims\n        // it greys toward a pale dust of the same level instead.\n        const m = max(r, gg, b), k = 0.9 * warm * sqrt(1 - min(1, m / 0.85));\n        r += (m - r) * k;\n        gg += (m - gg) * k;\n        b += (m - b) * k;\n      }\n      display.setPixel(x, y, knee(r * 255), knee(gg * 255), knee(b * 255));\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower."},{"name":"Force","min":0,"max":1,"about":"How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90."},{"name":"Shimmer","min":0,"max":1,"about":"Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment."}],"start":[0,2,0,0.06],"measures":{"motion":0.285,"detail":0.0166,"edges":0.0495,"complexity":1.3583,"coverage":0.4791,"colour":0.3931,"drift":0.3981},"knobResponse":[0.3053,0.2228,0.1341,0.0525]},{"slug":"proscenium","title":"Proscenium","family":"stage","round":23,"note":"금박 프로시니엄 아래 붉은 벨벳 막이 플라이로 올라가면 달빛 바다나 숲, 밤 도시, 눈 내리는 마을을 그린 배경막이 드러나고, 브리지 조명의 빛줄기가 연무를 갈라요. 발레리나가 팔로 스폿을 받으며 도약해 무대를 건너고, 막이 내리면 막 앞에서 인사해요. 맨 아래에는 실크해트를 쓴 사람이 섞인 앞줄 관객의 뒤통수가 있어요.","idea":"A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.","buttons":"K1 tap brings the curtain in now, or takes it out again if it is in.","code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","layer":{"id":"layer-proscenium","type":"code","name":"proscenium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gel","min":0,"max":1,"about":"The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower."},{"name":"Scene","min":0,"max":3,"about":"The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one."},{"name":"Haze","min":0,"max":1,"about":"How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel."}],"start":[0,2,0,0.06],"measures":{"motion":0.1444,"detail":0.0876,"edges":0.3879,"complexity":1.7658,"coverage":0.8713,"colour":0.2563,"drift":0.0949},"knobResponse":[0.0636,0.1625,0.077,0.1771]},{"slug":"pulse-bars","title":"Pulse Bars","family":"rhythm","round":1,"note":"음악 없는 하이파이 미터예요. 작은 드럼 머신이 혼자 치고 막대는 그 소리를 듣는 듯 춤춰요.","idea":"A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.","buttons":"K1 tap grows the bars from the middle line both ways instead of from the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","layer":{"id":"layer-pulse-bars","type":"code","name":"pulse-bars","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour starts at the bass end; it climbs a third of the wheel to the treble end."},{"name":"Tempo","min":90,"max":180,"about":"Beats per minute of the drum machine, with sixteenth-note hats."},{"name":"Bars","min":8,"max":32,"about":"How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth."},{"name":"Decay","min":0,"max":1,"about":"How long each hit rings; low is tight and punchy, high swells and hangs."}],"start":[0,90,8,0.06],"measures":{"motion":0.7885,"detail":0.0861,"edges":0.9999,"complexity":0.1776,"coverage":0.2209,"colour":0.2463,"drift":0.1392},"knobResponse":[0.0897,0.0556,0.0615,0.0607]},{"slug":"rabbit-ears","title":"Rabbit Ears","family":"glitch","round":19,"note":"옛 TV 가 토끼 귀 안테나로 늦은 밤 일기예보를 잡아요. 신호가 흔들리면 진행자와 지도가 색을 잃고 눈 속으로 사라졌다가 블랭킹 띠와 함께 굴러 돌아오고, 오른쪽에는 고스트가 따라붙어요. K1 을 누르면 TV 를 쳐서 그림이 한 바퀴 굴러요.","idea":"An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.","buttons":"K1 tap slaps the side of the set: the hold slips and the picture rolls round once.","code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","layer":{"id":"layer-rabbit-ears","type":"code","name":"rabbit-ears","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between."},{"name":"Signal","min":0,"max":1,"about":"How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow."},{"name":"Ghost","min":0,"max":1,"about":"The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1."}],"start":[0,2,0,0.06],"measures":{"motion":2.2448,"detail":0.1335,"edges":0.365,"complexity":2.3725,"coverage":0.9855,"colour":0.1077,"drift":0.2857},"knobResponse":[0.1208,0.2747,0.0525,0.0711]},{"slug":"rainstorm","title":"Rainstorm","family":"weather","round":2,"note":"빗줄기가 128줄을 다 떨어져 물웅덩이에 고리를 남기고, 가끔 갈라진 번개가 구름을 찢으며 쏟아지는 비를 한순간 밝혀요.","idea":"Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.","buttons":"K1 tap strikes lightning now.","code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-rainstorm","type":"code","name":"rainstorm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the night, the cloud and the rain, starting from slate blue."},{"name":"Rain","min":0.2,"max":3,"about":"From a drizzle of a few slow drops to a downpour."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it."},{"name":"Storm","min":0,"max":1,"about":"How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs."}],"start":[0,2,0,0.06],"measures":{"motion":2.22,"detail":0.0685,"edges":0.8841,"complexity":0.6564,"coverage":0.3785,"colour":0.0656,"drift":0.2647},"knobResponse":[0.0545,0.1279,0.1012,0.1302]},{"slug":"rauzy-fractal","title":"Rauzy Fractal","family":"fractal","round":28,"note":"트리보나치 치환의 라우지 프랙탈이 세 크기의 제 사본으로 판을 덮고, 그 고정점으로 끝없이 들어가요. 타일은 자라 한 크기 위가 되고, 가운데서 퍼지는 고리가 가장 큰 타일을 세 조각으로 나눠요. 누르면 조각 셋이 저마다의 벡터로 미끄러져 같은 테두리 안에 다시 맞물려요.","idea":"The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.","buttons":"K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.","code":"// ===== Patternflow pattern =====\n// Title:   Rauzy Fractal\n// Family:  fractal\n// Idea:    The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Rauzy fractal of the tribonacci substitution (Gérard Rauzy, 1982), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three.\n// Knob 3: Depth. How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4.\n// Knob 4: Glow. At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground.\n// Buttons: K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64;\nconst { min, floor, ceil, sqrt, cos, sin, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The tribonacci constant TH, the real root of x^3 = x^2 + x + 1, and beta,\n// one of the other two roots, |beta| = 1/sqrt(TH) = 0.7374.\nlet TH = 2;\nfor (let i = 0; i \u003c 40; i++) TH -= (TH ** 3 - TH * TH - TH - 1) / (3 * TH * TH - 2 * TH - 1);\nconst BR = (1 - TH) / 2, BI = sqrt(1 / TH - BR * BR), BM = sqrt(BR * BR + BI * BI), BA = atan2(BI, BR);\n// The substitution 1 -> 12, 2 -> 13, 3 -> 1 counts letters with the matrix\n// M = [[1,1,1],[1,0,0],[0,1,0]]. A vector v of letter counts lands in the\n// contracting plane as z(v) = v1 + v2 (beta - 1) + v3 / beta, and z(M v) is\n// beta z(v). ZX, ZY are z of one letter 1, 2 or 3.\nconst ZX = [1, BR - 1, BR * TH], ZY = [0, BI, -BI * TH];\n// The lattice of z(v) with v1 + v2 + v3 = 0, spanned by z(e2 - e3), z(e3 - e1).\nconst AX = ZX[1] - ZX[2], AY = ZY[1] - ZY[2], BX = ZX[2] - 1, BY = ZY[2], DET = AX * BY - AY * BX;\n// The height along the expanding direction, h(v) = TH v1 + (TH^2 - TH) v2 + v3,\n// written as AL (v1 + v2 + v3) + HX Re z(v) + HY Im z(v).\nconst LH = [TH, TH * TH - TH, 1];\nconst [AL, HX, HY] = (() => {\n  const m = [0, 1, 2].map((j) => [1, ZX[j], ZY[j]]);\n  const d3 = (a, b, c) => a[0] * (b[1] * c[2] - b[2] * c[1]) - a[1] * (b[0] * c[2] - b[2] * c[0]) + a[2] * (b[0] * c[1] - b[1] * c[0]);\n  const D = d3(m[0], m[1], m[2]), col = (k) => m.map((r, j) => r.map((v, q) => (q === k ? LH[j] : v)));\n  return [0, 1, 2].map((k) => { const c = col(k); return d3(c[0], c[1], c[2]) / D; });\n})();\n\n// The fixed word 1213121121312... and where each prefix lands. A torus cell\n// (the plane modulo the lattice, G x G cells) remembers the letter after a\n// prefix landing in it and, two bits a letter, the letters of its ancestors\n// under the substitution: the piece, then the piece of the piece, sixteen\n// deep. KA, KB say which copy of the fractal the prefix fell in.\nconst G = 256, GM = G - 1, NW = 160000;\nconst CH = new Int32Array(G * G), KA = new Int8Array(G * G), KB = new Int8Array(G * G);\nlet HR0 = 1e9, HR1 = -1e9, MX = 0, MY = 0;\n{\n  const ch = new Int32Array(NW);\n  let n = 0;\n  for (let m = 0; n \u003c NW; m++) {\n    const a = ch[m] & 3, up = ch[m] \u003c\u003c 2;\n    ch[n++] = up;\n    if (a \u003c 2 && n \u003c NW) ch[n++] = up | (a + 1);\n  }\n  let x = 0, y = 0;\n  for (let i = 0; i \u003c NW; i++) {\n    const a = (x * BY - y * BX) / DET, b = (AX * y - AY * x) / DET, fa = floor(a), fb = floor(b);\n    const c = min(GM, floor((a - fa) * G)) + min(GM, floor((b - fb) * G)) * G;\n    CH[c] = ch[i];\n    KA[c] = fa;\n    KB[c] = fb;\n    const hr = HX * x + HY * y;\n    if (hr \u003c HR0) HR0 = hr;\n    if (hr > HR1) HR1 = hr;\n    const l = ch[i] & 3;\n    MX += x / NW;\n    MY += y / NW;\n    x += ZX[l];\n    y += ZY[l];\n  }\n}\n\n// The middle of R is MX, MY; R_1 = beta R, R_2 = beta^2 R + 1 and\n// R_3 = beta^3 R + beta + 1, and CEN holds their middles.\nconst CEN = [];\n{\n  let x = MX, y = MY;\n  for (let i = 0; i \u003c 3; i++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    CEN.push(x + (i > 0 ? 1 : 0) + (i > 1 ? BR : 0), y + (i > 1 ? BI : 0));\n  }\n}\n\n// The self-replicating tiling: a copy z(v) + R_i of piece i for every\n// v in Z^3 with 0 \u003c= h(v) \u003c h(e_i). The pieces are R scaled by beta, beta^2\n// and beta^3, so every tile is the fractal itself at one of three sizes.\n// For a point p, the copy of piece i holding it has z(v) = p - r with r in\n// R, and only two or three counts v1 + v2 + v3 = k can pass the height test.\nlet TCH = 0, TID = 0, TX = 0, TY = 0;\nfunction tile(px, py) {\n  const cp = HX * px + HY * py, k1 = (HR1 - cp + LH[0]) / AL;\n  for (let k = ceil((HR0 - cp) / AL - 1e-6); k \u003c= k1; k++) {\n    const qx = px - k, a = (qx * BY - py * BX) / DET, b = (AX * py - AY * qx) / DET;\n    const fa = floor(a), fb = floor(b), c = (floor((a - fa) * G) & GM) + (floor((b - fb) * G) & GM) * G;\n    const ta = fa - KA[c], tb = fb - KB[c], ch = CH[c], t = ch & 3;\n    const v1 = k - tb, v2 = ta, v3 = tb - ta, h = LH[0] * v1 + LH[1] * v2 + v3;\n    if (h >= 0 && h \u003c LH[t]) {\n      TCH = ch;\n      TID = ((v1 * 1024 + v2) * 1024 + v3) * 4 + t;\n      TX = v1 * ZX[0] + v2 * ZX[1] + v3 * ZX[2] + CEN[t * 2];\n      TY = v1 * ZY[0] + v2 * ZY[1] + v3 * ZY[2] + CEN[t * 2 + 1];\n      return t;\n    }\n  }\n  return -1;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// A tile's colour follows its age. The smallest tiles (copies of piece 3)\n// are young, piece 2 middle-aged, piece 1 old; a level of zoom later each\n// has grown into the next, and the old ones have split into three. Hue,\n// saturation and value at ages 0, 1 and 2; LUT holds them from age -1 to 2.5\n// for each of a tile's own three pieces, which turn the hue by PH and light\n// it by PV.\nconst AGE = [\n  [0.86, 0.8, 0.85],\n  [0.68, 0.85, 0.95],\n  [0.5, 0.9, 1],\n];\nconst PH = [0, 0.035, -0.03], PV = [1, 0.7, 0.48];\nconst LN = 71, LA = -1, LS = 0.05;\n\n// The domain exchange: piece j of R moves by z(e_j), and the three land in\n// R again. A tile of type t is R scaled by beta^(t+1), so its pieces move by\n// beta^(t+1) z(e_j), EV[t*6 + j*2].\nconst EV = [];\n{\n  let x = 1, y = 0;\n  for (let t = 0; t \u003c 3; t++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    for (let j = 0; j \u003c 3; j++) EV.push(x * ZX[j] - y * ZY[j], x * ZY[j] + y * ZX[j]);\n  }\n}\n\n// LEDs a unit of the plane at the start of a level, the turn of the view per\n// level (a turn of beta less a third of a full turn, so three levels close\n// the loop), how far the splitting ring runs in a level, and the exchange's\n// slide, hold and settle in seconds.\nconst S0 = 24, ROT = BA - (2 * PI) / 3, RING = 140, EX1 = 1.5, EX2 = 2.3, EXT = 3.3;\n\nexport function setup(params) {\n  params.s = { m: 0, f: 0, ex: -1, hue: 0, depth: 1, glow: 0.06, id: new Float64Array(N), buf: new Float32Array(N * 3), lut: new Float32Array(3 * LN * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.depth = cl(k[2], 1, 4);\n  P.glow = cl(k[3], 0, 1);\n  if (P.ex >= 0) {\n    P.ex += d;\n    if (P.ex > EXT) P.ex = -1;\n  } else {\n    P.f += d * cl(k[1], 0.2, 3) * 0.1;\n    if (P.f >= 1) (P.f -= 1), (P.m = (P.m + 1) % 3);\n    if (input.btnPressed && input.btnPressed[0]) P.ex = 0;\n  }\n}\n\n// The light of a point from the pieces it lies in, level by level from\n// letter kk down; a piece of type s splits again s + 1 letters lower.\nfunction tone(ch, kk, D) {\n  let v = 1;\n  for (let n = 2; n \u003c= 5 && kk \u003c 16; n++) {\n    const s = (ch >> (2 * kk)) & 3, w = cl(D + 1 - n, 0, 1) * 0.5;\n    v *= 1 - w * (1 - PV[s]);\n    kk += 1 + s;\n  }\n  return v;\n}\n\n// The colour of the plane point (px, py) into CR, CG, CB, and its tile (and\n// once split, its piece) into CID. Returns the tile's type, or -1 on the\n// rare point the table cannot place.\nlet CR = 0, CG = 0, CB = 0, CID = 0;\nfunction shade(px, py, f, ring, sc, D, lut) {\n  const t = tile(px, py);\n  if (t \u003c 0) return -1;\n  const ch = TCH, s1 = (ch >> (2 * t + 2)) & 3;\n  let a = t ? 2 - t + f : 2, v = tone(ch, t + 2 + s1, D), li = (s1 * LN + round((a - LA) / LS)) * 3;\n  CID = TID * 4;\n  if (t === 0) {\n    // An old tile splits as the ring passes its middle: each piece takes\n    // the colour of the young tile it becomes, with a flash.\n    const sp = cl((ring - sqrt(TX * TX + TY * TY) / sc) / 16, 0, 1);\n    if (sp > 0) {\n      const s2 = (ch >> (4 + 2 * s1)) & 3, a2 = 1 - s1 + f, v2 = tone(ch, 3 + s1 + s2, D) * (1 + 1.4 * sp * (1 - sp));\n      const l2 = (s2 * LN + cl(round((a2 - LA) / LS), 0, LN - 1)) * 3, u = 1 - sp;\n      CR = (lut[li] * v * u + lut[l2] * v2 * sp);\n      CG = (lut[li + 1] * v * u + lut[l2 + 1] * v2 * sp);\n      CB = (lut[li + 2] * v * u + lut[l2 + 2] * v2 * sp);\n      if (sp > 0.5) CID += s1 + 1;\n      return 0;\n    }\n  }\n  CR = lut[li] * v;\n  CG = lut[li + 1] * v;\n  CB = lut[li + 2] * v;\n  return t;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.f, sc = BM ** f / S0, an = ROT * f - ((2 * PI) / 3) * P.m, co = cos(an) * sc, si = sin(an) * sc;\n  const ID = P.id, buf = P.buf, lut = P.lut, D = P.depth, ring = (f - 0.04) * RING;\n  for (let s = 0; s \u003c 3; s++)\n    for (let i = 0; i \u003c LN; i++) {\n      const a = cl(LA + i * LS, 0, 2), j = min(1, floor(a)), u = a - j, A = AGE[j], B = AGE[j + 1], young = cl(1 + (LA + i * LS) * 0.4, 0.6, 1);\n      hsv(P.hue + A[0] + (B[0] - A[0]) * u + PH[s], A[1] + (B[1] - A[1]) * u, (A[2] + (B[2] - A[2]) * u) * young * PV[s], lut, (s * LN + i) * 3);\n    }\n  // While the pieces slide, each LED looks for a piece that has arrived on\n  // it: a point q of a type-t tile in piece j with q + slide = p.\n  const ex = P.ex, sl = ex \u003c 0 ? 0 : sstep(0, EX1, ex), back = ex \u003c 0 ? 1 : sstep(EX2, EXT, ex);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const X = x + 0.5 - CX, Y = y + 0.5 - CY, px = co * X - si * Y, py = si * X + co * Y, o = p * 3;\n      let r = 0, g = 0, b = 0, id = -1;\n      if (back \u003c 1)\n        for (let e = 0; e \u003c 18 && id \u003c 0; e += 2) {\n          const t = (e / 6) | 0;\n          if (shade(px - sl * EV[e], py - sl * EV[e + 1], f, ring, sc, D, lut) === t && ((TCH >> (2 * t + 2)) & 3) === (e % 6) / 2)\n            (r = CR), (g = CG), (b = CB), (id = TID * 32 + 1 + e);\n        }\n      if (back > 0 && (shade(px, py, f, ring, sc, D, lut) >= 0 || shade(px + 0.3 * sc, py, f, ring, sc, D, lut) >= 0)) {\n        r += (CR - r) * back;\n        g += (CG - g) * back;\n        b += (CB - b) * back;\n        if (back > 0.5) id = CID;\n      }\n      ID[p] = id;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  // A seam between tiles: dark at Glow 0, pale light at 1.\n  const gl = P.glow, dim = 1 - 0.55 * gl;\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const s = (x \u003c W - 1 && ID[p + 1] !== ID[p]) || (y \u003c H - 1 && ID[p + W] !== ID[p]), o = p * 3;\n      for (let c = 0; c \u003c 3; c++) {\n        const v = min(255, buf[o + c]) * dim;\n        buf[o + c] = s ? v * (0.12 + 0.3 * gl) + 170 * gl : v;\n      }\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-rauzy-fractal","type":"code","name":"rauzy-fractal","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rauzy Fractal\n// Family:  fractal\n// Idea:    The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Rauzy fractal of the tribonacci substitution (Gérard Rauzy, 1982), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three.\n// Knob 3: Depth. How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4.\n// Knob 4: Glow. At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground.\n// Buttons: K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64;\nconst { min, floor, ceil, sqrt, cos, sin, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The tribonacci constant TH, the real root of x^3 = x^2 + x + 1, and beta,\n// one of the other two roots, |beta| = 1/sqrt(TH) = 0.7374.\nlet TH = 2;\nfor (let i = 0; i \u003c 40; i++) TH -= (TH ** 3 - TH * TH - TH - 1) / (3 * TH * TH - 2 * TH - 1);\nconst BR = (1 - TH) / 2, BI = sqrt(1 / TH - BR * BR), BM = sqrt(BR * BR + BI * BI), BA = atan2(BI, BR);\n// The substitution 1 -> 12, 2 -> 13, 3 -> 1 counts letters with the matrix\n// M = [[1,1,1],[1,0,0],[0,1,0]]. A vector v of letter counts lands in the\n// contracting plane as z(v) = v1 + v2 (beta - 1) + v3 / beta, and z(M v) is\n// beta z(v). ZX, ZY are z of one letter 1, 2 or 3.\nconst ZX = [1, BR - 1, BR * TH], ZY = [0, BI, -BI * TH];\n// The lattice of z(v) with v1 + v2 + v3 = 0, spanned by z(e2 - e3), z(e3 - e1).\nconst AX = ZX[1] - ZX[2], AY = ZY[1] - ZY[2], BX = ZX[2] - 1, BY = ZY[2], DET = AX * BY - AY * BX;\n// The height along the expanding direction, h(v) = TH v1 + (TH^2 - TH) v2 + v3,\n// written as AL (v1 + v2 + v3) + HX Re z(v) + HY Im z(v).\nconst LH = [TH, TH * TH - TH, 1];\nconst [AL, HX, HY] = (() => {\n  const m = [0, 1, 2].map((j) => [1, ZX[j], ZY[j]]);\n  const d3 = (a, b, c) => a[0] * (b[1] * c[2] - b[2] * c[1]) - a[1] * (b[0] * c[2] - b[2] * c[0]) + a[2] * (b[0] * c[1] - b[1] * c[0]);\n  const D = d3(m[0], m[1], m[2]), col = (k) => m.map((r, j) => r.map((v, q) => (q === k ? LH[j] : v)));\n  return [0, 1, 2].map((k) => { const c = col(k); return d3(c[0], c[1], c[2]) / D; });\n})();\n\n// The fixed word 1213121121312... and where each prefix lands. A torus cell\n// (the plane modulo the lattice, G x G cells) remembers the letter after a\n// prefix landing in it and, two bits a letter, the letters of its ancestors\n// under the substitution: the piece, then the piece of the piece, sixteen\n// deep. KA, KB say which copy of the fractal the prefix fell in.\nconst G = 256, GM = G - 1, NW = 160000;\nconst CH = new Int32Array(G * G), KA = new Int8Array(G * G), KB = new Int8Array(G * G);\nlet HR0 = 1e9, HR1 = -1e9, MX = 0, MY = 0;\n{\n  const ch = new Int32Array(NW);\n  let n = 0;\n  for (let m = 0; n \u003c NW; m++) {\n    const a = ch[m] & 3, up = ch[m] \u003c\u003c 2;\n    ch[n++] = up;\n    if (a \u003c 2 && n \u003c NW) ch[n++] = up | (a + 1);\n  }\n  let x = 0, y = 0;\n  for (let i = 0; i \u003c NW; i++) {\n    const a = (x * BY - y * BX) / DET, b = (AX * y - AY * x) / DET, fa = floor(a), fb = floor(b);\n    const c = min(GM, floor((a - fa) * G)) + min(GM, floor((b - fb) * G)) * G;\n    CH[c] = ch[i];\n    KA[c] = fa;\n    KB[c] = fb;\n    const hr = HX * x + HY * y;\n    if (hr \u003c HR0) HR0 = hr;\n    if (hr > HR1) HR1 = hr;\n    const l = ch[i] & 3;\n    MX += x / NW;\n    MY += y / NW;\n    x += ZX[l];\n    y += ZY[l];\n  }\n}\n\n// The middle of R is MX, MY; R_1 = beta R, R_2 = beta^2 R + 1 and\n// R_3 = beta^3 R + beta + 1, and CEN holds their middles.\nconst CEN = [];\n{\n  let x = MX, y = MY;\n  for (let i = 0; i \u003c 3; i++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    CEN.push(x + (i > 0 ? 1 : 0) + (i > 1 ? BR : 0), y + (i > 1 ? BI : 0));\n  }\n}\n\n// The self-replicating tiling: a copy z(v) + R_i of piece i for every\n// v in Z^3 with 0 \u003c= h(v) \u003c h(e_i). The pieces are R scaled by beta, beta^2\n// and beta^3, so every tile is the fractal itself at one of three sizes.\n// For a point p, the copy of piece i holding it has z(v) = p - r with r in\n// R, and only two or three counts v1 + v2 + v3 = k can pass the height test.\nlet TCH = 0, TID = 0, TX = 0, TY = 0;\nfunction tile(px, py) {\n  const cp = HX * px + HY * py, k1 = (HR1 - cp + LH[0]) / AL;\n  for (let k = ceil((HR0 - cp) / AL - 1e-6); k \u003c= k1; k++) {\n    const qx = px - k, a = (qx * BY - py * BX) / DET, b = (AX * py - AY * qx) / DET;\n    const fa = floor(a), fb = floor(b), c = (floor((a - fa) * G) & GM) + (floor((b - fb) * G) & GM) * G;\n    const ta = fa - KA[c], tb = fb - KB[c], ch = CH[c], t = ch & 3;\n    const v1 = k - tb, v2 = ta, v3 = tb - ta, h = LH[0] * v1 + LH[1] * v2 + v3;\n    if (h >= 0 && h \u003c LH[t]) {\n      TCH = ch;\n      TID = ((v1 * 1024 + v2) * 1024 + v3) * 4 + t;\n      TX = v1 * ZX[0] + v2 * ZX[1] + v3 * ZX[2] + CEN[t * 2];\n      TY = v1 * ZY[0] + v2 * ZY[1] + v3 * ZY[2] + CEN[t * 2 + 1];\n      return t;\n    }\n  }\n  return -1;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// A tile's colour follows its age. The smallest tiles (copies of piece 3)\n// are young, piece 2 middle-aged, piece 1 old; a level of zoom later each\n// has grown into the next, and the old ones have split into three. Hue,\n// saturation and value at ages 0, 1 and 2; LUT holds them from age -1 to 2.5\n// for each of a tile's own three pieces, which turn the hue by PH and light\n// it by PV.\nconst AGE = [\n  [0.86, 0.8, 0.85],\n  [0.68, 0.85, 0.95],\n  [0.5, 0.9, 1],\n];\nconst PH = [0, 0.035, -0.03], PV = [1, 0.7, 0.48];\nconst LN = 71, LA = -1, LS = 0.05;\n\n// The domain exchange: piece j of R moves by z(e_j), and the three land in\n// R again. A tile of type t is R scaled by beta^(t+1), so its pieces move by\n// beta^(t+1) z(e_j), EV[t*6 + j*2].\nconst EV = [];\n{\n  let x = 1, y = 0;\n  for (let t = 0; t \u003c 3; t++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    for (let j = 0; j \u003c 3; j++) EV.push(x * ZX[j] - y * ZY[j], x * ZY[j] + y * ZX[j]);\n  }\n}\n\n// LEDs a unit of the plane at the start of a level, the turn of the view per\n// level (a turn of beta less a third of a full turn, so three levels close\n// the loop), how far the splitting ring runs in a level, and the exchange's\n// slide, hold and settle in seconds.\nconst S0 = 24, ROT = BA - (2 * PI) / 3, RING = 140, EX1 = 1.5, EX2 = 2.3, EXT = 3.3;\n\nexport function setup(params) {\n  params.s = { m: 0, f: 0, ex: -1, hue: 0, depth: 1, glow: 0.06, id: new Float64Array(N), buf: new Float32Array(N * 3), lut: new Float32Array(3 * LN * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.depth = cl(k[2], 1, 4);\n  P.glow = cl(k[3], 0, 1);\n  if (P.ex >= 0) {\n    P.ex += d;\n    if (P.ex > EXT) P.ex = -1;\n  } else {\n    P.f += d * cl(k[1], 0.2, 3) * 0.1;\n    if (P.f >= 1) (P.f -= 1), (P.m = (P.m + 1) % 3);\n    if (input.btnPressed && input.btnPressed[0]) P.ex = 0;\n  }\n}\n\n// The light of a point from the pieces it lies in, level by level from\n// letter kk down; a piece of type s splits again s + 1 letters lower.\nfunction tone(ch, kk, D) {\n  let v = 1;\n  for (let n = 2; n \u003c= 5 && kk \u003c 16; n++) {\n    const s = (ch >> (2 * kk)) & 3, w = cl(D + 1 - n, 0, 1) * 0.5;\n    v *= 1 - w * (1 - PV[s]);\n    kk += 1 + s;\n  }\n  return v;\n}\n\n// The colour of the plane point (px, py) into CR, CG, CB, and its tile (and\n// once split, its piece) into CID. Returns the tile's type, or -1 on the\n// rare point the table cannot place.\nlet CR = 0, CG = 0, CB = 0, CID = 0;\nfunction shade(px, py, f, ring, sc, D, lut) {\n  const t = tile(px, py);\n  if (t \u003c 0) return -1;\n  const ch = TCH, s1 = (ch >> (2 * t + 2)) & 3;\n  let a = t ? 2 - t + f : 2, v = tone(ch, t + 2 + s1, D), li = (s1 * LN + round((a - LA) / LS)) * 3;\n  CID = TID * 4;\n  if (t === 0) {\n    // An old tile splits as the ring passes its middle: each piece takes\n    // the colour of the young tile it becomes, with a flash.\n    const sp = cl((ring - sqrt(TX * TX + TY * TY) / sc) / 16, 0, 1);\n    if (sp > 0) {\n      const s2 = (ch >> (4 + 2 * s1)) & 3, a2 = 1 - s1 + f, v2 = tone(ch, 3 + s1 + s2, D) * (1 + 1.4 * sp * (1 - sp));\n      const l2 = (s2 * LN + cl(round((a2 - LA) / LS), 0, LN - 1)) * 3, u = 1 - sp;\n      CR = (lut[li] * v * u + lut[l2] * v2 * sp);\n      CG = (lut[li + 1] * v * u + lut[l2 + 1] * v2 * sp);\n      CB = (lut[li + 2] * v * u + lut[l2 + 2] * v2 * sp);\n      if (sp > 0.5) CID += s1 + 1;\n      return 0;\n    }\n  }\n  CR = lut[li] * v;\n  CG = lut[li + 1] * v;\n  CB = lut[li + 2] * v;\n  return t;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.f, sc = BM ** f / S0, an = ROT * f - ((2 * PI) / 3) * P.m, co = cos(an) * sc, si = sin(an) * sc;\n  const ID = P.id, buf = P.buf, lut = P.lut, D = P.depth, ring = (f - 0.04) * RING;\n  for (let s = 0; s \u003c 3; s++)\n    for (let i = 0; i \u003c LN; i++) {\n      const a = cl(LA + i * LS, 0, 2), j = min(1, floor(a)), u = a - j, A = AGE[j], B = AGE[j + 1], young = cl(1 + (LA + i * LS) * 0.4, 0.6, 1);\n      hsv(P.hue + A[0] + (B[0] - A[0]) * u + PH[s], A[1] + (B[1] - A[1]) * u, (A[2] + (B[2] - A[2]) * u) * young * PV[s], lut, (s * LN + i) * 3);\n    }\n  // While the pieces slide, each LED looks for a piece that has arrived on\n  // it: a point q of a type-t tile in piece j with q + slide = p.\n  const ex = P.ex, sl = ex \u003c 0 ? 0 : sstep(0, EX1, ex), back = ex \u003c 0 ? 1 : sstep(EX2, EXT, ex);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const X = x + 0.5 - CX, Y = y + 0.5 - CY, px = co * X - si * Y, py = si * X + co * Y, o = p * 3;\n      let r = 0, g = 0, b = 0, id = -1;\n      if (back \u003c 1)\n        for (let e = 0; e \u003c 18 && id \u003c 0; e += 2) {\n          const t = (e / 6) | 0;\n          if (shade(px - sl * EV[e], py - sl * EV[e + 1], f, ring, sc, D, lut) === t && ((TCH >> (2 * t + 2)) & 3) === (e % 6) / 2)\n            (r = CR), (g = CG), (b = CB), (id = TID * 32 + 1 + e);\n        }\n      if (back > 0 && (shade(px, py, f, ring, sc, D, lut) >= 0 || shade(px + 0.3 * sc, py, f, ring, sc, D, lut) >= 0)) {\n        r += (CR - r) * back;\n        g += (CG - g) * back;\n        b += (CB - b) * back;\n        if (back > 0.5) id = CID;\n      }\n      ID[p] = id;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  // A seam between tiles: dark at Glow 0, pale light at 1.\n  const gl = P.glow, dim = 1 - 0.55 * gl;\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const s = (x \u003c W - 1 && ID[p + 1] !== ID[p]) || (y \u003c H - 1 && ID[p + W] !== ID[p]), o = p * 3;\n      for (let c = 0; c \u003c 3; c++) {\n        const v = min(255, buf[o + c]) * dim;\n        buf[o + c] = s ? v * (0.12 + 0.3 * gl) + 170 * gl : v;\n      }\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three."},{"name":"Depth","min":1,"max":4,"about":"How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4."},{"name":"Glow","min":0,"max":1,"about":"At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground."}],"start":[0,2,1,0.06],"measures":{"motion":0.2887,"detail":0.0655,"edges":0.9038,"complexity":0.1892,"coverage":0.9988,"colour":0.5834,"drift":0.167},"knobResponse":[0.5259,0.2583,0.0944,0.2959]},{"slug":"reaction-diffusion","title":"Reaction Diffusion","family":"sim","round":1,"note":"두 물질이 번지고 먹고 먹히며 산호와 미로와 점박이를 길러요. K3 가 종을 바꿔요.","idea":"Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.","buttons":"K1 tap reseeds the dish.","code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","layer":{"id":"layer-reaction-diffusion","type":"code","name":"reaction-diffusion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the culture's colour around the wheel."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the culture grows; at 2 it runs 240 steps a second."},{"name":"Species","min":0,"max":5,"about":"Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms."},{"name":"Grain","min":0,"max":1,"about":"Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree."}],"start":[0,2,0,0.06],"measures":{"motion":0.0572,"detail":0.0825,"edges":0.3087,"complexity":2.0894,"coverage":0.7212,"colour":0.4058,"drift":0.1337},"knobResponse":[0.314,0.2095,0.2824,0.2879]},{"slug":"renyi-parking","title":"Rényi Parking","family":"data","round":35,"note":"128줄이 저마다 60 LED 길이의 거리이고, 6 LED 짜리 차가 아무 데나 와서 들어갈 틈이 있을 때만 서요. 거리는 위에서 빈 채로 들어와 내려가며 차고, 바닥에 닿으면 차 길이만 한 틈이 하나도 없이 72% 쯤 막혀요. 먼저 온 차는 하늘색, 마지막 틈에 끼어든 차는 금색이며 옆 눈금이 바닥을 떠난 거리 128개의 평균을 예측값 0.722 의 금색 눈금에 대 보고, K3 은 차 길이를 6~15 LED 로 바꾸고 K1 을 누르면 차가 다 왼쪽으로 밀려 줄마다 채운 몫만 한 막대가 돼요.","idea":"Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.","buttons":"K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.","code":"// ===== Patternflow pattern =====\n// Title:   Rényi Parking\n// Family:  data\n// Idea:    Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Rényi's parking problem (Alfréd Rényi, 1958), with its lattice form, Flory's dimers (Paul Flory, 1939)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1\n//\n// Knob 1: Hue. Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too.\n// Knob 2: Speed. How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes.\n// Knob 3: Length. The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it.\n// Knob 4: Lattice. Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street.\n// Buttons: K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.\n\nconst W = 64, H = 128, S = 60, MAXC = 32, GX = 61;\n// Rényi's constant, the share an endless street fills once jammed.\nconst C = 0.7475979202534114;\nconst { min, max, floor, ceil, round, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The street's own clock: t car arrivals have been tried per car length of\n// street by the time it has come down tau rows. It runs slowly at the top\n// and without end at row 127, so every street leaves the panel jammed.\n// With 6-LED cars a street is on average 0.29 full at row 42 (t = 0.45),\n// 0.54 at row 85 (t = 1.8) and 0.70 at row 120, and from there to the\n// bottom the few cars that still fit squeeze in: the slow end of the\n// filling, which on an endless street never stops.\nconst A = 0.9;\nconst clockAt = (tau) => (tau >= H - 1 ? Infinity : (A * tau) / (H - 1 - tau));\n\n// The mean number of cars a jammed street holds. Parked anywhere, a street\n// x car lengths long holds M(x), where M = 0 below 1 and\n// M(x) = 1 + 2/(x - 1) times the integral of M from 0 to x - 1, since the\n// first car splits the street into two streets of random length. That is\n// solved here in steps of 1/2048 of a car: 7.2236 cars at x = 10, the\n// 6-LED cars, a fill of 0.7224. Rényi's C (x + 1) - 1 agrees with it to\n// 1e-5 from x = 6 up and is 0.0045 cars low at x = 4. On a grid of N\n// points with k to a car the same split gives M(n) = 1 + 2/(n - k + 1)\n// times the sum of M(j) for j \u003c= n - k, summed exactly.\nfunction renyi(x) {\n  const h = 1 / 2048, n = round(x / h), one = 2048;\n  if (n \u003c one) return 0;\n  const m = new Float64Array(n + 1), area = new Float64Array(n + 1);\n  for (let i = one; i \u003c= n; i++) {\n    // area[i] is the integral of M from 1 to i h by trapezoids, M being 0\n    // below 1 and jumping to 1 there.\n    m[i] = i === one ? 1 : 1 + (2 / (i * h - 1)) * area[i - one];\n    if (i > one) area[i] = area[i - 1] + (h * (m[i] + m[i - 1])) / 2;\n  }\n  return m[n];\n}\nfunction predict(L, k) {\n  if (!k) return (renyi(S / L) * L) / S;\n  const N = floor((S * k) / L + 1e-9), m = new Float64Array(N + 1);\n  let sum = 0;\n  for (let n = 0; n \u003c= N; n++) {\n    if (n >= k) sum += m[n - k];\n    m[n] = n \u003c k ? 0 : 1 + (2 * sum) / (n - k + 1);\n  }\n  return (m[N] * L) / S;\n}\n\nfunction newStreet() {\n  return { pos: new Float32Array(MAXC), at: new Float32Array(MAXC), n: 0, L: 6, k: 0, F: 0, next: 0, last: 1 };\n}\n\n// Where a car can still stop: for every gap the start points that leave room\n// for it, as a length in LEDs (anywhere) or a count of grid points (on a\n// grid). With pick >= 0 it returns the start point that far into them.\n// rate() turns the total into tries that succeed per unit of the street's\n// clock: one try per car length of street, spread evenly.\nfunction feasible(st, pick) {\n  const { pos, n, L, k } = st;\n  let total = 0, start = 0;\n  if (!k) {\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? pos[i] : S, room = end - start - L;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return start + (pick - total);\n        total += room;\n      }\n      if (i \u003c n) start = pos[i] + L;\n    }\n  } else {\n    const d = L / k, N = floor((S * k) / L + 1e-9);\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? round(pos[i] / d) : N, room = end - start - k + 1;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return (start + floor(pick - total)) * d;\n        total += room;\n      }\n      if (i \u003c n) start = round(pos[i] / d) + k;\n    }\n  }\n  return pick >= 0 ? -1 : total;\n}\n\nconst rate = (st) => (st.k ? st.F / st.k : st.F / st.L);\n\nfunction reset(st, L, k, pred) {\n  st.n = 0;\n  st.L = L;\n  st.k = k;\n  // The share parked when the last car is due to come, so the colours run\n  // from the first car to the last whatever the length.\n  st.last = max(0.05, pred - L / S);\n  st.F = feasible(st, -1);\n  st.next = -log(1 - Math.random()) / rate(st);\n}\n\n// Run a street's clock on to t: a try that lands in a feasible stretch\n// parks a car at a uniform place in it. Tries that land anywhere else are\n// turned away and change nothing, so only the successes are drawn, at the\n// rate of the feasible stretch. Each car keeps the share of the street that\n// was already parked when it came.\nfunction advance(st, t) {\n  while (st.F > 0 && st.next \u003c= t) {\n    const x = feasible(st, Math.random() * st.F);\n    if (x \u003c 0) break;\n    let i = st.n;\n    while (i > 0 && st.pos[i - 1] > x) (st.pos[i] = st.pos[i - 1]), (st.at[i] = st.at[i - 1]), i--;\n    st.pos[i] = x;\n    st.at[i] = (st.n * st.L) / S;\n    st.n++;\n    st.F = feasible(st, -1);\n    if (st.F > 0) st.next += -log(1 - Math.random()) / rate(st);\n  }\n}\n\nexport function setup(params) {\n  const streets = [];\n  for (let i = 0; i \u003c H; i++) streets.push(newStreet());\n  params.s = {\n    streets, head: 0, phase: 0.5, primed: false,\n    hue: 0, speed: 2, L: 6, k: 0, pred: predict(6, 0),\n    // The fills of the last 128 jammed streets of the current length and\n    // grid, as they leave the bottom.\n    outs: new Float32Array(H), outN: 0, outI: 0,\n    pack: -1, rgb: new Float32Array(W * H * 3), pal: new Float32Array(33 * 3), palHue: NaN,\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 6, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const L = round(cl(kv[2], 6, 15)), g = cl(kv[3], 0, 1), k = g \u003c 0.07 ? 0 : max(1, round(1 / g));\n  if (L !== P.L || k !== P.k) {\n    P.L = L;\n    P.k = k;\n    P.pred = predict(L, k);\n    P.outN = P.outI = 0;\n  }\n  // The first frame fills the panel with streets at every stage, each run\n  // on to the clock of its row, so the picture starts whole.\n  if (!P.primed) {\n    for (let r = 0; r \u003c H; r++) {\n      const st = P.streets[(P.head + r) % H];\n      reset(st, L, k, P.pred);\n      advance(st, clockAt(r + P.phase));\n    }\n    P.primed = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.pack \u003c 0) P.pack = 0;\n  if (P.pack >= 0) {\n    // The tap: 0.6 s to pack, 3 s held, 0.6 s back; the streets wait.\n    P.pack += d;\n    if (P.pack >= 4.2) P.pack = -1;\n    return;\n  }\n  P.phase += d * P.speed * 2;\n  while (P.phase >= 1) {\n    P.phase -= 1;\n    // The jammed bottom street leaves and comes back empty at the top.\n    const bottom = P.streets[(P.head + H - 1) % H];\n    if (bottom.L === P.L && bottom.k === P.k) {\n      P.outs[P.outI] = (bottom.n * bottom.L) / S;\n      P.outI = (P.outI + 1) % H;\n      P.outN = min(H, P.outN + 1);\n    }\n    P.head = (P.head + H - 1) % H;\n    reset(bottom, L, k, P.pred);\n  }\n  for (let r = 0; r \u003c H; r++) advance(P.streets[(P.head + r) % H], clockAt(r + P.phase));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.primed) return;\n  const { rgb, pal } = P;\n  if (P.palHue !== P.hue) {\n    // 33 steps from the first car to come to the last: azure through\n    // violet and rose to gold, brighter as it goes, so the latecomers read\n    // first. Between orange and lime a dim car would read brown or olive,\n    // so there the dim end is lifted.\n    for (let i = 0; i \u003c= 32; i++) {\n      const u = i / 32, h = P.hue + 0.58 + 0.55 * u, band = max(0, 1 - abs(h - floor(h) - 0.14) / 0.13);\n      const v = 0.6 + 0.4 * u;\n      hsv(h, 0.75 - 0.1 * u, max(v, v + (0.92 - v) * band), pal, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  const e = P.pack \u003c 0 ? 0 : P.pack \u003c 0.6 ? sm(P.pack / 0.6) : P.pack \u003c 3.6 ? 1 : sm((4.2 - P.pack) / 0.6);\n  for (let r = 0; r \u003c H; r++) {\n    const st = P.streets[(P.head + r) % H], L = st.L;\n    for (let i = 0; i \u003c st.n; i++) {\n      // A car covers the LEDs whose centres fall inside it, less half an\n      // LED at each end: L - 1 LEDs and a dark one, so cars that touch\n      // still read as two.\n      const x = st.pos[i] + (i * L - st.pos[i]) * e, x0 = max(0, ceil(x)), x1 = min(S - 1, ceil(x + L - 1) - 1);\n      const c = min(32, round((st.at[i] / st.last) * 32)) * 3;\n      for (let px = x0; px \u003c= x1; px++) {\n        const q = (r * W + px) * 3;\n        (rgb[q] = pal[c]), (rgb[q + 1] = pal[c + 1]), (rgb[q + 2] = pal[c + 2]);\n      }\n    }\n  }\n  const gold = [];\n  hsv(P.hue + 0.13, 0.7, 1, gold, 0);\n  // Packed, the gold line stands at the predicted fill across the streets.\n  if (e > 0.5) {\n    const gx = min(S - 1, floor(P.pred * S));\n    for (let r = 0; r \u003c H; r++) {\n      const q = (r * W + gx) * 3;\n      (rgb[q] = gold[0]), (rgb[q + 1] = gold[1]), (rgb[q + 2] = gold[2]);\n    }\n  }\n  // The gauge, three LEDs wide, from a fill of 0.65 at the bottom to 1 at\n  // the top: a bar to the mean of the last jammed streets, a white tick at\n  // Rényi's constant for an endless street and a gold one at the\n  // prediction for this one.\n  const rowOf = (f) => cl(round(H - 1 - ((f - 0.65) / 0.35) * (H - 1)), 0, H - 1);\n  if (P.outN) {\n    let s = 0;\n    for (let i = 0; i \u003c P.outN; i++) s += P.outs[i];\n    const top = rowOf(s / P.outN);\n    for (let y = top; y \u003c H; y++)\n      for (let x = GX; x \u003c W; x++) {\n        const q = (y * W + x) * 3;\n        (rgb[q] = 0.36), (rgb[q + 1] = 0.4), (rgb[q + 2] = 0.5);\n      }\n  }\n  const tick = (f, c) => {\n    const y = rowOf(f);\n    for (let x = GX - 1; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = c[0]), (rgb[q + 1] = c[1]), (rgb[q + 2] = c[2]);\n    }\n  };\n  tick(C, [0.85, 0.85, 0.85]);\n  tick(P.pred, gold);\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-renyi-parking","type":"code","name":"renyi-parking","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rényi Parking\n// Family:  data\n// Idea:    Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Rényi's parking problem (Alfréd Rényi, 1958), with its lattice form, Flory's dimers (Paul Flory, 1939)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1\n//\n// Knob 1: Hue. Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too.\n// Knob 2: Speed. How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes.\n// Knob 3: Length. The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it.\n// Knob 4: Lattice. Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street.\n// Buttons: K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.\n\nconst W = 64, H = 128, S = 60, MAXC = 32, GX = 61;\n// Rényi's constant, the share an endless street fills once jammed.\nconst C = 0.7475979202534114;\nconst { min, max, floor, ceil, round, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The street's own clock: t car arrivals have been tried per car length of\n// street by the time it has come down tau rows. It runs slowly at the top\n// and without end at row 127, so every street leaves the panel jammed.\n// With 6-LED cars a street is on average 0.29 full at row 42 (t = 0.45),\n// 0.54 at row 85 (t = 1.8) and 0.70 at row 120, and from there to the\n// bottom the few cars that still fit squeeze in: the slow end of the\n// filling, which on an endless street never stops.\nconst A = 0.9;\nconst clockAt = (tau) => (tau >= H - 1 ? Infinity : (A * tau) / (H - 1 - tau));\n\n// The mean number of cars a jammed street holds. Parked anywhere, a street\n// x car lengths long holds M(x), where M = 0 below 1 and\n// M(x) = 1 + 2/(x - 1) times the integral of M from 0 to x - 1, since the\n// first car splits the street into two streets of random length. That is\n// solved here in steps of 1/2048 of a car: 7.2236 cars at x = 10, the\n// 6-LED cars, a fill of 0.7224. Rényi's C (x + 1) - 1 agrees with it to\n// 1e-5 from x = 6 up and is 0.0045 cars low at x = 4. On a grid of N\n// points with k to a car the same split gives M(n) = 1 + 2/(n - k + 1)\n// times the sum of M(j) for j \u003c= n - k, summed exactly.\nfunction renyi(x) {\n  const h = 1 / 2048, n = round(x / h), one = 2048;\n  if (n \u003c one) return 0;\n  const m = new Float64Array(n + 1), area = new Float64Array(n + 1);\n  for (let i = one; i \u003c= n; i++) {\n    // area[i] is the integral of M from 1 to i h by trapezoids, M being 0\n    // below 1 and jumping to 1 there.\n    m[i] = i === one ? 1 : 1 + (2 / (i * h - 1)) * area[i - one];\n    if (i > one) area[i] = area[i - 1] + (h * (m[i] + m[i - 1])) / 2;\n  }\n  return m[n];\n}\nfunction predict(L, k) {\n  if (!k) return (renyi(S / L) * L) / S;\n  const N = floor((S * k) / L + 1e-9), m = new Float64Array(N + 1);\n  let sum = 0;\n  for (let n = 0; n \u003c= N; n++) {\n    if (n >= k) sum += m[n - k];\n    m[n] = n \u003c k ? 0 : 1 + (2 * sum) / (n - k + 1);\n  }\n  return (m[N] * L) / S;\n}\n\nfunction newStreet() {\n  return { pos: new Float32Array(MAXC), at: new Float32Array(MAXC), n: 0, L: 6, k: 0, F: 0, next: 0, last: 1 };\n}\n\n// Where a car can still stop: for every gap the start points that leave room\n// for it, as a length in LEDs (anywhere) or a count of grid points (on a\n// grid). With pick >= 0 it returns the start point that far into them.\n// rate() turns the total into tries that succeed per unit of the street's\n// clock: one try per car length of street, spread evenly.\nfunction feasible(st, pick) {\n  const { pos, n, L, k } = st;\n  let total = 0, start = 0;\n  if (!k) {\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? pos[i] : S, room = end - start - L;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return start + (pick - total);\n        total += room;\n      }\n      if (i \u003c n) start = pos[i] + L;\n    }\n  } else {\n    const d = L / k, N = floor((S * k) / L + 1e-9);\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? round(pos[i] / d) : N, room = end - start - k + 1;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return (start + floor(pick - total)) * d;\n        total += room;\n      }\n      if (i \u003c n) start = round(pos[i] / d) + k;\n    }\n  }\n  return pick >= 0 ? -1 : total;\n}\n\nconst rate = (st) => (st.k ? st.F / st.k : st.F / st.L);\n\nfunction reset(st, L, k, pred) {\n  st.n = 0;\n  st.L = L;\n  st.k = k;\n  // The share parked when the last car is due to come, so the colours run\n  // from the first car to the last whatever the length.\n  st.last = max(0.05, pred - L / S);\n  st.F = feasible(st, -1);\n  st.next = -log(1 - Math.random()) / rate(st);\n}\n\n// Run a street's clock on to t: a try that lands in a feasible stretch\n// parks a car at a uniform place in it. Tries that land anywhere else are\n// turned away and change nothing, so only the successes are drawn, at the\n// rate of the feasible stretch. Each car keeps the share of the street that\n// was already parked when it came.\nfunction advance(st, t) {\n  while (st.F > 0 && st.next \u003c= t) {\n    const x = feasible(st, Math.random() * st.F);\n    if (x \u003c 0) break;\n    let i = st.n;\n    while (i > 0 && st.pos[i - 1] > x) (st.pos[i] = st.pos[i - 1]), (st.at[i] = st.at[i - 1]), i--;\n    st.pos[i] = x;\n    st.at[i] = (st.n * st.L) / S;\n    st.n++;\n    st.F = feasible(st, -1);\n    if (st.F > 0) st.next += -log(1 - Math.random()) / rate(st);\n  }\n}\n\nexport function setup(params) {\n  const streets = [];\n  for (let i = 0; i \u003c H; i++) streets.push(newStreet());\n  params.s = {\n    streets, head: 0, phase: 0.5, primed: false,\n    hue: 0, speed: 2, L: 6, k: 0, pred: predict(6, 0),\n    // The fills of the last 128 jammed streets of the current length and\n    // grid, as they leave the bottom.\n    outs: new Float32Array(H), outN: 0, outI: 0,\n    pack: -1, rgb: new Float32Array(W * H * 3), pal: new Float32Array(33 * 3), palHue: NaN,\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 6, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const L = round(cl(kv[2], 6, 15)), g = cl(kv[3], 0, 1), k = g \u003c 0.07 ? 0 : max(1, round(1 / g));\n  if (L !== P.L || k !== P.k) {\n    P.L = L;\n    P.k = k;\n    P.pred = predict(L, k);\n    P.outN = P.outI = 0;\n  }\n  // The first frame fills the panel with streets at every stage, each run\n  // on to the clock of its row, so the picture starts whole.\n  if (!P.primed) {\n    for (let r = 0; r \u003c H; r++) {\n      const st = P.streets[(P.head + r) % H];\n      reset(st, L, k, P.pred);\n      advance(st, clockAt(r + P.phase));\n    }\n    P.primed = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.pack \u003c 0) P.pack = 0;\n  if (P.pack >= 0) {\n    // The tap: 0.6 s to pack, 3 s held, 0.6 s back; the streets wait.\n    P.pack += d;\n    if (P.pack >= 4.2) P.pack = -1;\n    return;\n  }\n  P.phase += d * P.speed * 2;\n  while (P.phase >= 1) {\n    P.phase -= 1;\n    // The jammed bottom street leaves and comes back empty at the top.\n    const bottom = P.streets[(P.head + H - 1) % H];\n    if (bottom.L === P.L && bottom.k === P.k) {\n      P.outs[P.outI] = (bottom.n * bottom.L) / S;\n      P.outI = (P.outI + 1) % H;\n      P.outN = min(H, P.outN + 1);\n    }\n    P.head = (P.head + H - 1) % H;\n    reset(bottom, L, k, P.pred);\n  }\n  for (let r = 0; r \u003c H; r++) advance(P.streets[(P.head + r) % H], clockAt(r + P.phase));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.primed) return;\n  const { rgb, pal } = P;\n  if (P.palHue !== P.hue) {\n    // 33 steps from the first car to come to the last: azure through\n    // violet and rose to gold, brighter as it goes, so the latecomers read\n    // first. Between orange and lime a dim car would read brown or olive,\n    // so there the dim end is lifted.\n    for (let i = 0; i \u003c= 32; i++) {\n      const u = i / 32, h = P.hue + 0.58 + 0.55 * u, band = max(0, 1 - abs(h - floor(h) - 0.14) / 0.13);\n      const v = 0.6 + 0.4 * u;\n      hsv(h, 0.75 - 0.1 * u, max(v, v + (0.92 - v) * band), pal, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  const e = P.pack \u003c 0 ? 0 : P.pack \u003c 0.6 ? sm(P.pack / 0.6) : P.pack \u003c 3.6 ? 1 : sm((4.2 - P.pack) / 0.6);\n  for (let r = 0; r \u003c H; r++) {\n    const st = P.streets[(P.head + r) % H], L = st.L;\n    for (let i = 0; i \u003c st.n; i++) {\n      // A car covers the LEDs whose centres fall inside it, less half an\n      // LED at each end: L - 1 LEDs and a dark one, so cars that touch\n      // still read as two.\n      const x = st.pos[i] + (i * L - st.pos[i]) * e, x0 = max(0, ceil(x)), x1 = min(S - 1, ceil(x + L - 1) - 1);\n      const c = min(32, round((st.at[i] / st.last) * 32)) * 3;\n      for (let px = x0; px \u003c= x1; px++) {\n        const q = (r * W + px) * 3;\n        (rgb[q] = pal[c]), (rgb[q + 1] = pal[c + 1]), (rgb[q + 2] = pal[c + 2]);\n      }\n    }\n  }\n  const gold = [];\n  hsv(P.hue + 0.13, 0.7, 1, gold, 0);\n  // Packed, the gold line stands at the predicted fill across the streets.\n  if (e > 0.5) {\n    const gx = min(S - 1, floor(P.pred * S));\n    for (let r = 0; r \u003c H; r++) {\n      const q = (r * W + gx) * 3;\n      (rgb[q] = gold[0]), (rgb[q + 1] = gold[1]), (rgb[q + 2] = gold[2]);\n    }\n  }\n  // The gauge, three LEDs wide, from a fill of 0.65 at the bottom to 1 at\n  // the top: a bar to the mean of the last jammed streets, a white tick at\n  // Rényi's constant for an endless street and a gold one at the\n  // prediction for this one.\n  const rowOf = (f) => cl(round(H - 1 - ((f - 0.65) / 0.35) * (H - 1)), 0, H - 1);\n  if (P.outN) {\n    let s = 0;\n    for (let i = 0; i \u003c P.outN; i++) s += P.outs[i];\n    const top = rowOf(s / P.outN);\n    for (let y = top; y \u003c H; y++)\n      for (let x = GX; x \u003c W; x++) {\n        const q = (y * W + x) * 3;\n        (rgb[q] = 0.36), (rgb[q + 1] = 0.4), (rgb[q + 2] = 0.5);\n      }\n  }\n  const tick = (f, c) => {\n    const y = rowOf(f);\n    for (let x = GX - 1; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = c[0]), (rgb[q + 1] = c[1]), (rgb[q + 2] = c[2]);\n    }\n  };\n  tick(C, [0.85, 0.85, 0.85]);\n  tick(P.pred, gold);\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes."},{"name":"Length","min":6,"max":15,"about":"The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it."},{"name":"Lattice","min":0,"max":1,"about":"Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street."}],"start":[0,2,6,0.06],"measures":{"motion":1.1003,"detail":0.1839,"edges":0.8784,"complexity":0.1342,"coverage":0.3299,"colour":0.3078,"drift":0.0658},"knobResponse":[0.1481,0.1885,0.1964,0.2206]},{"slug":"rice-planting","title":"Rice Planting","family":"farm","round":26,"note":"물 댄 논을 위에서 내려다봐요. 밀짚모자를 쓴 일꾼들이 못줄을 따라 뒷걸음질하며 모를 한 포기씩 꽂고, 앞쪽 거울 물에는 구름과 모춤, 백로가 있어요. K1 은 아침 안개에서 노을까지 돌리고, 누르면 남은 모를 한꺼번에 꽂고 줄을 넘겨요.","idea":"Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.","buttons":"K1 tap and the crew pushes in the rest of the row at once and the rope moves on.","code":"// ===== Patternflow pattern =====\n// Title:   Rice Planting\n// Family:  farm\n// Idea:    Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after monaegi, the hand transplanting of rice along a marked rope (motjul) in Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1\n//\n// Knob 1: Hour. A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange.\n// Knob 2: Speed. At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower.\n// Knob 3: Planters. Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look.\n// Knob 4: Wind. Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean.\n// Buttons: K1 tap and the crew pushes in the rest of the row at once and the rope moves on.\n\nconst W = 64, H = 128, N = W * H, PW = 61, NH = 14, NR = 25;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every p cells, so the sky texture tiles.\nfunction vnp(x, y, p, o) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const g = (a, b) => hash(a % p, (b % p) + o);\n  const a = g(xi, yi), b = g(xi + 1, yi), c = g(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + g(xi + 1, yi + 1)) * su * sv;\n}\n\n// A paddy and its left bund are 61 columns of the world; the hills of a row\n// stand every four columns, and the rows every four LEDs from row 5 to 101.\nconst HX = (j) => 5 + 4 * j;\nconst rowY = (r, dn) => (dn > 0 ? 5 + 4 * r : 101 - 4 * r);\n// The light by the hour: sky overhead, sky toward the sun, sunlit cloud,\n// cloud underside, light on the people and the fields, and mist.\nconst HOURS = [\n  [0, 46, 92, 168, 116, 150, 204, 250, 242, 236, 150, 162, 192, 0.88, 0.92, 0.98, 0.32],\n  [0.25, 36, 92, 186, 110, 160, 218, 254, 250, 244, 156, 172, 204, 0.96, 0.98, 1, 0.12],\n  [0.5, 18, 66, 176, 64, 126, 210, 255, 255, 255, 168, 180, 206, 1.05, 1.05, 1, 0],\n  [0.75, 44, 92, 176, 176, 164, 150, 255, 224, 170, 160, 140, 156, 1, 0.9, 0.74, 0],\n  [1, 36, 34, 98, 170, 86, 96, 255, 150, 70, 112, 64, 100, 0.82, 0.56, 0.46, 0.12],\n];\nfunction key(u) {\n  let i = 0;\n  while (i \u003c HOURS.length - 2 && u > HOURS[i + 1][0]) i++;\n  const a = HOURS[i], b = HOURS[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\nconst HAT = [234, 190, 102], SKIN = [226, 176, 136], PANTS = [[60, 62, 120], [126, 62, 110], [70, 84, 72]];\nconst SHIRTS = [[236, 236, 228], [104, 144, 224], [238, 136, 164], [150, 208, 96], [184, 152, 228], [214, 78, 70], [112, 204, 204], [70, 96, 176]];\nconst SEED = [134, 222, 72], LEAF = [70, 166, 56], ROOT = [168, 136, 100], TIE = [230, 200, 112], NUR = [96, 196, 66];\nconst ROPE = [200, 170, 116], MARK = [[240, 52, 40], [252, 216, 60]], GRASS = [62, 116, 40], EARTH = [134, 106, 74], MUD = [120, 92, 58];\nconst WHITE = [248, 248, 242], BILL = [244, 196, 40];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, f: F32(N * 3), rip: F32(N), tb: F32(H), ht: F32(16384), bm: new Uint8Array(W), cd: F32(16384), cs: F32(16384), nz: F32(16384), k: 0, dn: 1, r: 0, fl: new Uint8Array(NH),\n    mv: -1.5, sl: -1.5, cam: 0.5, n: 0, h: 0.5, w: 0.5, ox: rnd() * 128, oy: rnd() * 128, rp: [], bu: [], init: false,\n  });\n  // The sky: clouds with steep edges, the size of a few drift blocks, and a\n  // slower field that says where the wind roughens the water and where mist lies.\n  for (let i = 0; i \u003c 16384; i++) {\n    const x = i & 127, y = i >> 7, q = (f, o) => vnp((x * f) / 128, (y * f) / 128, f, o);\n    const v = 0.55 * q(6, 0) + 0.3 * q(14, 50) + 0.15 * q(32, 90);\n    P.cd[i] = sm(0.5, 0.6, v);\n    P.cs[i] = cl((v - 0.5) * 4, 0, 1);\n    P.nz[i] = 0.6 * q(5, 130) + 0.4 * q(12, 170);\n    P.ht[i] = hash(x, y);\n  }\n  P.crew = SHIRTS.map((s, i) => ({ sh: (i * 3 + floor(rnd() * 8)) % 8, pa: floor(rnd() * 3), sp: 0.85 + rnd() * 0.3, list: [], q: 0, ph: 0.5, home: 32.5, wig: rnd() * 7 }));\n  P.eg = { x: 10 + rnd() * 44, y: 84 + rnd() * 14, a: rnd() * 6.28, m: 0, t: 1 + rnd(), st: -1.5, sx: 0.5, sy: 0.5, tx: 0.5, ty: 0.5, sk: -1.5 };\n  P.ca = { x: 14 + rnd() * 36, tx: 32.5, w: 0.6 + rnd(), tt: -0.5 };\n  P.pu = { x: 18 + rnd() * 30, x1: 0, old: [] };\n  P.pu.x1 = P.pu.x + 10 + rnd() * 12;\n}\n\n// Each planter takes a run of the fourteen hills; on alternate rows they work it the other way.\nfunction assign(P) {\n  const n = P.n;\n  P.crew.forEach((c, i) => {\n    const a = floor((i * NH) / n), b = floor(((i + 1) * NH) / n);\n    c.list = [];\n    if (i \u003c n) for (let j = a; j \u003c b; j++) if (!P.fl[j]) c.list.push(j);\n    if (P.r & 1) c.list.reverse();\n    c.q = 0;\n    c.ph = 0;\n    if (i \u003c n) c.home = (HX(a) + HX(b - 1)) / 2;\n  });\n}\nconst fresh = (P) => (P.fl.fill(0), assign(P));\nconst ropeY = (P) => (P.mv >= 0 ? mix(rowY(P.r, P.dn), rowY(P.r + 1, P.dn), sm(0, 1, P.mv)) : rowY(P.r, P.dn));\nconst ring = (P, x, y, s, life = 0.9) => P.rp.length \u003c 48 && P.rp.push({ x: x + 1e-6, y: y + 1e-6, s, a: 1e-6, life });\nfunction plant(P, j) {\n  P.fl[j] = 1;\n  ring(P, P.k * PW + HX(j), rowY(P.r, P.dn), 0.9);\n}\n// Bundles of seedlings lie about the open water, waiting for the line; ft\n// is how far through its flight a thrown one is, below 0 once it floats.\nconst bun = (x, y, ft, tx, ty) => ({ x, y, fx: x, fy: y, tx, ty, a: floor(rnd() * 8), ft });\nfunction scatter(P, k, lo, hi) {\n  for (let i = 0; i \u003c 12; i++) P.bu.push(bun(k * PW + 8 + rnd() * 46, lo + rnd() * (hi - lo), -1.5, 0.5, 0.5));\n}\n// Where open water lies ahead of the line in this paddy, as rows lo..hi.\nfunction open(P, gap) {\n  const ry = ropeY(P);\n  return P.dn > 0 ? [ry + gap, 99] : [7, ry - gap];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 4, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(kv[1], 0.2, 3)) / 2, n = round(cl(kv[2], 4, 8));\n  P.h = cl(kv[0], 0, 1);\n  P.w = cl(kv[3], 0, 1);\n  if (!P.init) {\n    // They have been at it since dawn: the more hands, the further along.\n    P.n = n;\n    P.r = 8 + round((n - 4) * 1.5) + floor(rnd() * 2);\n    assign(P);\n    scatter(P, 0, rowY(P.r, 1) + 10, 99);\n    P.init = true;\n  }\n  if (n !== P.n) (P.n = n), assign(P);\n  P.t += d;\n  P.ox += (3.4 + 5 * P.w) * d;\n  P.oy += (1.4 + 2 * P.w) * d;\n  const btn = input.btnPressed && input.btnPressed[0];\n  if (P.sl \u003c 0) {\n    if (btn && P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) plant(P, j);\n    if (P.mv \u003c 0) {\n      for (let i = 0; i \u003c P.n; i++) {\n        const c = P.crew[i];\n        if (c.q >= c.list.length) continue;\n        const j = c.list[c.q], p0 = c.ph;\n        if (P.fl[j] && p0 \u003c 0.6) {\n          c.q++;\n          continue;\n        }\n        c.ph += (d * c.sp) / 0.36;\n        if (p0 \u003c 0.6 && c.ph >= 0.6) plant(P, j);\n        if (c.ph >= 1) (c.ph = 0), c.q++;\n      }\n      if (P.fl.every((v) => v)) {\n        if (P.r >= NR - 1) {\n          // The last row is in: the crew crosses the bund to the next paddy,\n          // where the carrier has already thrown the bundles.\n          P.sl = 0;\n          scatter(P, P.k + 1, 10, 96);\n          P.eg.m === 0 && fly(P, P.k + 1);\n        } else P.mv = 0;\n      }\n    } else if ((P.mv += d / 0.5) >= 1) {\n      (P.mv = -1), P.r++, fresh(P);\n      for (let i = 0; i \u003c P.n; i++) ring(P, P.k * PW + P.crew[i].home, rowY(P.r, P.dn) + P.dn * 10, 0.5);\n    }\n  } else if ((P.sl += d / 3.5) >= 1) (P.sl = -1), P.k++, (P.dn = -P.dn), (P.r = 0), fresh(P);\n  P.cam = P.k * PW + (P.sl >= 0 ? PW * sm(0, 1, P.sl) : 0);\n  const ry = ropeY(P), dn = P.dn;\n  // The line picks up the bundles it reaches.\n  P.bu = P.bu.filter((b) => {\n    const k = floor(b.x / PW);\n    return b.ft >= 0 || k > P.k || (k === P.k && (P.sl >= 0 || (b.y - ry) * dn > 5));\n  });\n  for (const b of P.bu)\n    if (b.ft >= 0 && (b.ft += d / 0.75) >= 1) (b.ft = -1.5), (b.x = b.tx), (b.y = b.ty), ring(P, b.x, b.y, 1.2, 1.2);\n  // The carrier on the levee throws a bundle ahead of the line now and then.\n  const C = P.ca;\n  if (C.tt > 0) C.tt -= d;\n  else if (abs(C.tx - C.x) > 0.6) C.x += Math.sign(C.tx - C.x) * 7 * d;\n  else if ((C.w -= d) \u003c 0) {\n    const [lo, hi] = open(P, 10);\n    if (P.sl \u003c 0 && hi - lo > 6 && P.bu.length \u003c 16) {\n      const ty = max(lo, hi - 46) + rnd() * (hi - max(lo, hi - 46));\n      P.bu.push(bun(C.x, 104.5, 1e-6, P.k * PW + 8 + rnd() * 46, ty));\n      C.tt = 0.5;\n    }\n    C.w = 1.6 + rnd() * 2.4;\n    C.tx = P.cam + 6 + rnd() * 52;\n  }\n  // The seedling puller works left along the nursery bed.\n  const U = P.pu;\n  U.x -= 0.5 * d;\n  if (U.x \u003c P.cam - 8) U.old.push([U.x + 2, U.x1]) > 3 && U.old.shift(), (U.x1 = (U.x = P.cam + 70) + 2);\n  egret(P, d, ry);\n  for (const q of P.rp) q.a += d;\n  P.rp = P.rp.filter((q) => q.a \u003c q.life);\n}\n\n// The egret flies to open water in paddy k, away from the line.\nfunction fly(P, k) {\n  const E = P.eg, [lo, hi] = k === P.k ? open(P, 26) : [12, 92];\n  if (hi - lo \u003c 8) return fly(P, k + 1);\n  Object.assign(E, { m: 1, t: 0, sx: E.x, sy: E.y, tx: k * PW + 8 + rnd() * 46, ty: lo + rnd() * (hi - lo) });\n  E.a = Math.atan2(E.ty - E.sy, E.tx - E.sx);\n}\nfunction egret(P, d, ry) {\n  const E = P.eg;\n  if (E.m === 1) {\n    if ((E.t += d / 2.4) >= 1) (E.m = 0), (E.x = E.tx), (E.y = E.ty), (E.t = 1.5), ring(P, E.x, E.y, 0.8);\n    return;\n  }\n  if (E.sk >= 0 && (E.sk += d / 0.35) >= 1) E.sk = -1;\n  // Too near the line, or left behind in a planted paddy: off it goes.\n  if (P.sl \u003c 0 && (floor(E.x / PW) \u003c P.k || (floor(E.x / PW) === P.k && (E.y - ry) * P.dn \u003c 15))) return fly(P, P.k);\n  if (E.st >= 0) {\n    E.st += d / 0.45;\n    const q = sm(0, 1, E.st);\n    E.x = mix(E.sx, E.tx, q);\n    E.y = mix(E.sy, E.ty, q);\n    if (E.st >= 1) (E.st = -1), ring(P, E.x - 1.5 * cos(E.a), E.y - 1.5 * sin(E.a), 0.45, 0.7);\n  } else if ((E.t -= d) \u003c 0) {\n    // A slow step, now and then a strike at something in the mud.\n    if (rnd() \u003c 0.25) (E.sk = 0), ring(P, E.x + 5 * cos(E.a), E.y + 5 * sin(E.a), 0.7);\n    else {\n      const lx = E.x - P.k * PW;\n      E.a += (rnd() - 0.5) * 1.4;\n      if (lx \u003c 10) E.a = 0.2 * (rnd() - 0.5);\n      if (lx > 52) E.a = PI + 0.2 * (rnd() - 0.5);\n      if (E.y > 96 || E.y \u003c 10) E.a = (E.y > 50 ? -PI : PI) / 2 + (rnd() - 0.5);\n      Object.assign(E, { st: 0, sx: E.x, sy: E.y, tx: E.x + 1.6 * cos(E.a), ty: E.y + 1.6 * sin(E.a) });\n    }\n    E.t = 0.6 + rnd() * 1.8;\n  }\n}\n\nlet F, L;\nfunction put(x, y, c, k = 1, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j] * k * L[j], a);\n}\n// Points given along a heading (u forward, v to the side), turned to angle a.\nfunction spr(x, y, a, pts) {\n  const c = cos(a), s = sin(a);\n  for (const [u, v, col, k] of pts) {\n    const px = round(x + u * c - v * s), py = round(y + u * s + v * c), o = (py * W + px) * 3;\n    if (col) put(px, py, col, k);\n    else if (px >= 0 && px \u003c W && py >= 0 && py \u003c H) (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n  }\n}\nfunction disc(x, y, r, col, sh) {\n  x = round(x);\n  y = round(y);\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const e = sqrt(dx * dx + dy * dy);\n      if (e > r + 0.35) continue;\n      put(x + dx, y + dy, col, (1.14 - 0.32 * (e / r) ** 2) * (e > r - 0.55 ? 0.82 : 1) - (sh * 0.1 * (dx + dy)) / r);\n    }\n}\nfunction line(ax, ay, bx, by, c, k) {\n  const n = max(1, round(max(abs(bx - ax), abs(by - ay))));\n  for (let i = 0; i \u003c= n; i++) put(mix(ax, bx, i / n), mix(ay, by, i / n), c, k);\n}\nconst BUNDLE = [[-2, 0, ROOT, 0.9], [-1, 0, TIE, 1], [0, 0, SEED, 0.95], [1, 0, LEAF, 1], [2, 0, LEAF, 0.8], [1, -1, LEAF, 0.75], [1, 1, LEAF, 0.75]];\n\n// One planter bent over, seen from above: the hat, the back and hips\n// behind it, the arms reaching out past the brim to the water, a bundle in\n// one hand and the other pushing a hill in at the rope.\nconst BACK = [3.4, 3.4, 3, 2.6, 2.1];\nfunction planter(P, c, x, y, dn, ry, x0, hr, walk) {\n  const sh = SHIRTS[c.sh], pa = PANTS[c.pa], st = walk ? round(sin(P.t * 9 + c.wig)) : 0;\n  let side = c.home \u003c 32 ? 1 : -1, e = 0, tx = x + side * 3, ty = y - dn * 3.6;\n  if (!walk && c.q \u003c c.list.length) {\n    const hx = x0 + HX(c.list[c.q]);\n    side = hx >= x ? 1 : -1;\n    e = c.ph \u003c 0.6 ? sm(0, 0.5, c.ph) : 1 - sm(0.65, 1, c.ph);\n    tx = mix(x + side * 3, hx, e);\n    ty = mix(y - dn * 3.6, ry + dn * 0.6, e);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    put(x + s, y + dn * (8 + (s * st > 0 ? 1 : 0)), pa, 0.7);\n    for (let dx = -1; dx \u003c= 1; dx++) put(x + dx, y + dn * 7, pa, 0.9 - 0.1 * abs(dx));\n  }\n  BACK.forEach((hw, j) => {\n    for (let dx = -3; dx \u003c= 3; dx++) if (abs(dx) \u003c= hw) put(x + dx, y + dn * (2 + j), sh, (0.98 - 0.07 * j) * (abs(dx) > hw - 1 ? 0.85 : 1));\n  });\n  line(x + side * 2.8, y + dn * 1.5, tx, ty, sh, 0.9);\n  put(tx, ty, SKIN);\n  const bx = x - side * 3.2, by = y - dn * 3;\n  line(x - side * 2.8, y + dn * 1.5, bx, by, sh, 0.9);\n  put(bx, by, SKIN);\n  put(bx, by - dn, SEED);\n  put(bx + side, by - dn * 1.6, LEAF, 0.9);\n  put(bx - side, by - dn, LEAF, 0.8);\n  disc(x + (tx - x) * 0.15, y - dn * e * 0.8, hr, HAT, 1);\n}\n\n// Ripple rings from every push, step and splash, summed per LED.\nfunction ripples(P, cam) {\n  const RIP = P.rip;\n  RIP.fill(0);\n  for (const q of P.rp) {\n    const R = 0.6 + q.a * 6.5, a = q.s * (1 - q.a / q.life), qx = q.x - cam;\n    for (let y = max(0, floor(q.y - R - 1)); y \u003c= min(H - 1, q.y + R + 1); y++)\n      for (let x = max(0, floor(qx - R - 1)); x \u003c= min(W - 1, qx + R + 1); x++) {\n        const e = abs(sqrt((x - qx) ** 2 + (y - q.y) ** 2) - R);\n        if (e \u003c 0.8) RIP[y * W + x] += a * (1 - e / 0.8);\n      }\n  }\n}\n\n// The bunds, the levee, the nursery, and the water mirroring the sky.\nfunction ground(P, K, cam, ry) {\n  const f = F, k = P.k, dn = P.dn, t = P.t, w = P.w, h = P.h, RIP = P.rip, CD = P.cd, CS = P.cs, NZ = P.nz, HT = P.ht, TB = P.tb;\n  const ox = floor(P.ox), oy = floor(P.oy), wo = floor(t * (3 + 6 * w)), ws = 0.75 - 0.6 * w, wa1 = min(1, w * 4);\n  // The sun's glint, near noon, sliding across the paddy with the hour.\n  const gu = cl((h - 0.22) / 0.56, 0, 1), gs = sm(0.22, 0.38, h) * (1 - sm(0.62, 0.8, h)), gx = 6 + 52 * gu, gy = 70 - 30 * sin(PI * gu);\n  // The nursery bed is bare where the seedlings have been pulled.\n  const BM = P.bm;\n  BM.fill(0);\n  for (const [a, b] of [...P.pu.old, [P.pu.x + 2, P.pu.x1]]) for (let x = max(0, ceil(a - cam)); x \u003c= min(W - 1, b - cam); x++) BM[x] = 1;\n  // How muddy the water is on each row of this paddy: churned round the\n  // crew's feet and behind them, settling further back.\n  for (let y = 0; y \u003c H; y++) {\n    const ds = (ry - y) * dn;\n    TB[y] = P.sl >= 0 ? 0.22 : sm(-14, -9, ds) * (0.16 + 0.3 * exp(-max(0, ds) / 14));\n  }\n  const [z0, z1, z2, s0, s1, s2, l0, l1, l2, h0, h1, h2, , , , mist] = K.slice(1), L0 = L[0], L1 = L[1], L2 = L[2], M0 = MUD[0] * L0, M1 = MUD[1] * L1, M2 = MUD[2] * L2;\n  const m0 = mix(s0, 250, 0.6), m1 = mix(s1, 250, 0.6), m2 = mix(s2, 250, 0.6), my = floor(t * 1.5), mx = floor(t * 2.5) + 40;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, wx = x + cam, kk = floor(wx / PW), lx = wx - kk * PW, o = i * 3, hv = HT[(wx & 127) | (y \u003c\u003c 7)];\n    const wet = y >= 3 && y \u003c= 103 && lx >= 3 ? 1 : y === 110 || y === 116 || y === 122 ? 0.7 : 0;\n    if (!wet) {\n      let c = GRASS, v = 0.8 + 0.4 * hv;\n      if (y >= 110) {\n        const bare = y >= 117 && y \u003c= 121 && BM[x];\n        (c = bare ? MUD : NUR), (v = bare ? 0.55 + 0.3 * hv : (y === 111 || y === 115 || y === 117 || y === 121 || y === 123 ? 0.62 : 0.72) + 0.45 * hv);\n      } else if (y >= 104) (c = y >= 106 && y \u003c= 108 ? EARTH : GRASS), (v = y === 104 ? 0.6 + 0.3 * hv : v);\n      else if (y \u003c 3 ? y === 1 : lx === 1) (c = EARTH), (v = 0.75 + 0.35 * hv);\n      else if (y === 2 || (y > 2 && lx === 2)) v *= 0.7;\n      f[o] = c[0] * v * L0;\n      f[o + 1] = c[1] * v * L1;\n      f[o + 2] = c[2] * v * L2;\n      continue;\n    }\n    const ci = ((y + oy) & 127) * 128 + ((x + ox) & 127), cd = CD[ci], cs = CS[ci], g = (0.28 * x) / 63 + 0.52 * (1 - y / 127);\n    let br = 0.9;\n    if (wa1 > 0) {\n      const nz = NZ[(((y >> 1) + wo) & 127) | ((((x >> 1) + (wo >> 1)) & 127) \u003c\u003c 7)];\n      // A cat's paw darkens the mirror and breaks it into glitter.\n      if (nz > ws) {\n        const wa = sm(ws, ws + 0.16, nz) * wa1;\n        br *= 1 - 0.3 * wa;\n        if (HT[((x * 5 + wo * 3) & 127) | (((y + wo) & 127) \u003c\u003c 7)] > 0.87) br += 0.45 * wa;\n      }\n    }\n    const tb = kk \u003c k ? 0.22 : kk === k && wet === 1 ? TB[y] : 0, rp = RIP[i];\n    let gl = 0;\n    if (gs > 0 && abs(x - gx) \u003c 16) {\n      gl = gs * exp(-((x - gx) ** 2 + ((y - gy) * 0.8) ** 2) / 40) * (1 - tb);\n      if (w > 0.1) gl *= mix(1, HT[((x * 7 + wo) & 127) | (y \u003c\u003c 7)] > 0.75 ? 2.6 : 0.25, w);\n    }\n    const r0 = z0 + (s0 - z0) * g, r1 = z1 + (s1 - z1) * g, r2 = z2 + (s2 - z2) * g;\n    const q0 = (r0 + (h0 + (l0 - h0) * cs - r0) * cd) * br, q1 = (r1 + (h1 + (l1 - h1) * cs - r1) * cd) * br, q2 = (r2 + (h2 + (l2 - h2) * cs - r2) * cd) * br;\n    // Morning mist lies over the water in drifting banks.\n    let ms = mist > 0.01 ? (NZ[((((y >> 1) + my) & 127) \u003c\u003c 7) | ((x + mx) & 127)] - 0.5) * 2.4 : 0;\n    ms = ms > 0 ? mist * min(ms, 0.7) : 0;\n    const m = 0.7 + 0.4 * hv, wk = wet \u003c 1 ? 0.8 : 1, c0 = (q0 + (M0 * m - q0) * tb + rp * (60 + 0.35 * q0) + 255 * L0 * gl) * wk;\n    const c1 = (q1 + (M1 * m - q1) * tb + rp * (60 + 0.35 * q1) + 255 * L1 * gl) * wk, c2 = (q2 + (M2 * m - q2) * tb + rp * (60 + 0.35 * q2) + 255 * L2 * gl) * wk;\n    f[o] = c0 + (m0 - c0) * ms;\n    f[o + 1] = c1 + (m1 - c1) * ms;\n    f[o + 2] = c2 + (m2 - c2) * ms;\n  }\n}\n\n// The rope with its markers, one per hill still to plant, and every hill\n// planted so far, leaning and swaying with the wind.\nfunction field(P, cam, ry) {\n  const k = P.k, dn = P.dn, t = P.t, w = P.w, x0 = k * PW - cam;\n  if (P.sl \u003c 0) {\n    const yr = round(ry);\n    for (let x = 1; x \u003c= 62; x++) put(x0 + x, yr, ROPE, 0.85);\n    if (P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) put(x0 + HX(j), yr, MARK[j % 3 === 2 ? 1 : 0]);\n  }\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW) && kk \u003c= k; kk++) {\n    const xk = kk * PW - cam;\n    for (let gi = 0; gi \u003c NR; gi++) {\n      const y = 5 + 4 * gi, ord = kk \u003c k ? -1 : dn > 0 ? gi : NR - 1 - gi;\n      if (kk === k && ord > P.r) continue;\n      for (let j = 0; j \u003c NH; j++) {\n        if (kk === k && ord === P.r && !P.fl[j]) continue;\n        const x = xk + HX(j), v = 0.85 + 0.3 * hash(kk * 31 + j, gi), sw = sin(t * 2.6 + x * 0.3 + y * 0.15) * (0.25 + 0.9 * w) + 0.9 * w, ln = round(cl(sw, -1, 1));\n        put(x, y, SEED, v);\n        put(x + ln, y - 1, LEAF, v);\n        put(x + (v > 1 ? 1 : -1), y, LEAF, 0.75 * v);\n      }\n    }\n  }\n}\n\n// The egret: wading with its neck folded (out in a strike), or on the wing.\nfunction egretDraw(P, cam) {\n  const E = P.eg, pts = [];\n  if (E.m === 0) {\n    const nk = E.sk >= 0 ? 1.8 + 2.4 * sin(PI * E.sk) : 1.8;\n    for (let u = -3.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -1.5; v \u003c= 1.5; v += 0.5) if ((u + 1) ** 2 / 6.5 + (v * v) / 2.1 \u003c= 1) pts.push([u, v, WHITE, 0.9 + 0.06 * v]);\n    for (let u = 2; u \u003c= nk + 0.5; u += 0.5) pts.push([u, 0.5 * sin(u * 1.6), WHITE, 1]);\n    pts.push([nk + 1, 0, WHITE, 1], [nk + 2, 0, BILL, 1], [nk + 2.8, 0, BILL, 0.8]);\n    spr(E.x - cam + 1, E.y + 1, E.a, pts.map(([u, v]) => [u, v, 0, 0.7]));\n    spr(E.x - cam, E.y, E.a, pts);\n    return;\n  }\n  const q = sm(0, 1, E.t), ex = mix(E.sx, E.tx, q) - cam, ey = mix(E.sy, E.ty, q) - 8 * sin(PI * E.t), sp = 3 + 3 * abs(sin(P.t * 8));\n  for (let u = -2; u \u003c= 1; u += 0.5) pts.push([u, 0, WHITE, 1], [u, 0.6, WHITE, 0.9], [u, -0.6, WHITE, 0.9]);\n  for (let v = 1; v \u003c= sp; v += 0.5) for (let s = -1; s \u003c= 1; s += 2) pts.push([-0.4 * (v / sp) ** 2, s * v, WHITE, v > sp - 1 ? 0.75 : 1], [0.6 - 0.6 * (v / sp), s * v, WHITE, 0.85]);\n  pts.push([2, 0, WHITE, 1], [3, 0, WHITE, 1], [4, 0, BILL, 1]);\n  spr(ex, ey, E.a, pts);\n}\n\n// The crew and the rope holders on the bunds, all in straw hats.\nfunction crew(P, cam, ry) {\n  const dn = P.dn, x0 = P.k * PW - cam, hr = P.n > 6 ? 2.6 : 3;\n  if (P.sl \u003c 0) {\n    for (let i = 0; i \u003c P.n; i++) {\n      const c = P.crew[i], lag = P.mv >= 0 ? sm(0.15, 1, P.mv) : 1, cy = mix(rowY(P.r, dn), ry, lag) + dn * 4;\n      planter(P, c, x0 + c.home, cy, dn, ry, x0, hr, false);\n    }\n    for (let hx = 1; hx \u003c 63; hx += 61) {\n      put(x0 + hx + (hx \u003c 9 ? -2 : 2), ry + dn * 2, SHIRTS[hx & 7], 0.8);\n      disc(x0 + hx, ry + dn * 0.5, 2, HAT, 1);\n    }\n    return;\n  }\n  const q = sm(0, 1, P.sl), y0 = rowY(NR - 1, dn) + dn * 4, y1 = rowY(0, -dn) - dn * 4, fd = q \u003c 0.5 ? dn : -dn;\n  for (let i = 0; i \u003c P.n; i++) planter(P, P.crew[i], P.crew[i].home, mix(y0, y1, q), fd, 0, 0, hr, true);\n  for (let hx = 1; hx \u003c 63; hx += 61) disc(hx, mix(y0, y1, q) - fd * 4, 2, HAT, 1);\n}\n\n// The carrier on the levee with bundles on his A-frame, the puller in the\n// nursery with the bundles he has tied laid in the channel, and every bundle\n// afloat or in the air.\nfunction helpers(P, cam) {\n  const C = P.ca, cx = C.x - cam, U = P.pu, ux = U.x - cam, pull = sin(P.t * 7);\n  for (const b of P.bu) if (b.ft \u003c 0) spr(b.x - cam, b.y, (b.a * PI) / 4, BUNDLE);\n  // Trays of seedlings from the nursery wait on the levee path.\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW); kk++)\n    for (let tx = 9; tx \u003c 60; tx += 36)\n      for (let dx = 0; dx \u003c 8; dx++)\n        for (let dy = 0; dy \u003c 3; dy++) put(kk * PW + tx + dx - cam, 106 + dy, dx % 7 ? NUR : ROOT, dx % 7 ? 0.75 + 0.4 * hash(dx + tx, dy + kk * 5) : 0.6);\n  for (let dx = -2; dx \u003c= 2; dx++) for (let dy = 2; dy \u003c= 4; dy++) put(cx + dx, 106 + dy, (dx + dy) & 1 ? SEED : LEAF, dy === 2 ? 0.75 : 0.95);\n  put(cx - 2, 109, TIE), put(cx + 2, 109, TIE);\n  if (C.tt > 0) line(cx + 1, 105, cx + 2, 101 + 2 * C.tt, SKIN, 0.9);\n  disc(cx, 106, 2, HAT, 1);\n  for (let bx = U.x + 6; bx \u003c U.x1 - 1; bx += 5) spr(bx - cam, 116, PI / 2, BUNDLE);\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = 2; dx \u003c= 4; dx++) put(ux + dx, 119 + dy, SHIRTS[5], 0.85);\n  line(ux - 1, 118, ux - 2.5 - pull, 118, SKIN, 0.9);\n  line(ux - 1, 120, ux - 2.5 + pull, 120, SKIN, 0.9);\n  disc(ux, 119, 2, HAT, 1);\n}\nfunction thrown(P, cam) {\n  for (const b of P.bu) if (b.ft >= 0) spr(mix(b.fx, b.tx, b.ft) - cam, mix(b.fy, b.ty, b.ft) - 7 * sin(PI * b.ft), b.ft * 9, BUNDLE);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const K = key(P.h), cam = floor(P.cam), ry = ropeY(P), f = (F = P.f);\n  L = [K[13], K[14], K[15]];\n  ripples(P, cam);\n  ground(P, K, cam, ry);\n  field(P, cam, ry);\n  if (P.eg.m === 0) egretDraw(P, cam);\n  crew(P, cam, ry);\n  helpers(P, cam);\n  thrown(P, cam);\n  if (P.eg.m === 1) egretDraw(P, cam);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","layer":{"id":"layer-rice-planting","type":"code","name":"rice-planting","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rice Planting\n// Family:  farm\n// Idea:    Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after monaegi, the hand transplanting of rice along a marked rope (motjul) in Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1\n//\n// Knob 1: Hour. A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange.\n// Knob 2: Speed. At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower.\n// Knob 3: Planters. Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look.\n// Knob 4: Wind. Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean.\n// Buttons: K1 tap and the crew pushes in the rest of the row at once and the rope moves on.\n\nconst W = 64, H = 128, N = W * H, PW = 61, NH = 14, NR = 25;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every p cells, so the sky texture tiles.\nfunction vnp(x, y, p, o) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const g = (a, b) => hash(a % p, (b % p) + o);\n  const a = g(xi, yi), b = g(xi + 1, yi), c = g(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + g(xi + 1, yi + 1)) * su * sv;\n}\n\n// A paddy and its left bund are 61 columns of the world; the hills of a row\n// stand every four columns, and the rows every four LEDs from row 5 to 101.\nconst HX = (j) => 5 + 4 * j;\nconst rowY = (r, dn) => (dn > 0 ? 5 + 4 * r : 101 - 4 * r);\n// The light by the hour: sky overhead, sky toward the sun, sunlit cloud,\n// cloud underside, light on the people and the fields, and mist.\nconst HOURS = [\n  [0, 46, 92, 168, 116, 150, 204, 250, 242, 236, 150, 162, 192, 0.88, 0.92, 0.98, 0.32],\n  [0.25, 36, 92, 186, 110, 160, 218, 254, 250, 244, 156, 172, 204, 0.96, 0.98, 1, 0.12],\n  [0.5, 18, 66, 176, 64, 126, 210, 255, 255, 255, 168, 180, 206, 1.05, 1.05, 1, 0],\n  [0.75, 44, 92, 176, 176, 164, 150, 255, 224, 170, 160, 140, 156, 1, 0.9, 0.74, 0],\n  [1, 36, 34, 98, 170, 86, 96, 255, 150, 70, 112, 64, 100, 0.82, 0.56, 0.46, 0.12],\n];\nfunction key(u) {\n  let i = 0;\n  while (i \u003c HOURS.length - 2 && u > HOURS[i + 1][0]) i++;\n  const a = HOURS[i], b = HOURS[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\nconst HAT = [234, 190, 102], SKIN = [226, 176, 136], PANTS = [[60, 62, 120], [126, 62, 110], [70, 84, 72]];\nconst SHIRTS = [[236, 236, 228], [104, 144, 224], [238, 136, 164], [150, 208, 96], [184, 152, 228], [214, 78, 70], [112, 204, 204], [70, 96, 176]];\nconst SEED = [134, 222, 72], LEAF = [70, 166, 56], ROOT = [168, 136, 100], TIE = [230, 200, 112], NUR = [96, 196, 66];\nconst ROPE = [200, 170, 116], MARK = [[240, 52, 40], [252, 216, 60]], GRASS = [62, 116, 40], EARTH = [134, 106, 74], MUD = [120, 92, 58];\nconst WHITE = [248, 248, 242], BILL = [244, 196, 40];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, f: F32(N * 3), rip: F32(N), tb: F32(H), ht: F32(16384), bm: new Uint8Array(W), cd: F32(16384), cs: F32(16384), nz: F32(16384), k: 0, dn: 1, r: 0, fl: new Uint8Array(NH),\n    mv: -1.5, sl: -1.5, cam: 0.5, n: 0, h: 0.5, w: 0.5, ox: rnd() * 128, oy: rnd() * 128, rp: [], bu: [], init: false,\n  });\n  // The sky: clouds with steep edges, the size of a few drift blocks, and a\n  // slower field that says where the wind roughens the water and where mist lies.\n  for (let i = 0; i \u003c 16384; i++) {\n    const x = i & 127, y = i >> 7, q = (f, o) => vnp((x * f) / 128, (y * f) / 128, f, o);\n    const v = 0.55 * q(6, 0) + 0.3 * q(14, 50) + 0.15 * q(32, 90);\n    P.cd[i] = sm(0.5, 0.6, v);\n    P.cs[i] = cl((v - 0.5) * 4, 0, 1);\n    P.nz[i] = 0.6 * q(5, 130) + 0.4 * q(12, 170);\n    P.ht[i] = hash(x, y);\n  }\n  P.crew = SHIRTS.map((s, i) => ({ sh: (i * 3 + floor(rnd() * 8)) % 8, pa: floor(rnd() * 3), sp: 0.85 + rnd() * 0.3, list: [], q: 0, ph: 0.5, home: 32.5, wig: rnd() * 7 }));\n  P.eg = { x: 10 + rnd() * 44, y: 84 + rnd() * 14, a: rnd() * 6.28, m: 0, t: 1 + rnd(), st: -1.5, sx: 0.5, sy: 0.5, tx: 0.5, ty: 0.5, sk: -1.5 };\n  P.ca = { x: 14 + rnd() * 36, tx: 32.5, w: 0.6 + rnd(), tt: -0.5 };\n  P.pu = { x: 18 + rnd() * 30, x1: 0, old: [] };\n  P.pu.x1 = P.pu.x + 10 + rnd() * 12;\n}\n\n// Each planter takes a run of the fourteen hills; on alternate rows they work it the other way.\nfunction assign(P) {\n  const n = P.n;\n  P.crew.forEach((c, i) => {\n    const a = floor((i * NH) / n), b = floor(((i + 1) * NH) / n);\n    c.list = [];\n    if (i \u003c n) for (let j = a; j \u003c b; j++) if (!P.fl[j]) c.list.push(j);\n    if (P.r & 1) c.list.reverse();\n    c.q = 0;\n    c.ph = 0;\n    if (i \u003c n) c.home = (HX(a) + HX(b - 1)) / 2;\n  });\n}\nconst fresh = (P) => (P.fl.fill(0), assign(P));\nconst ropeY = (P) => (P.mv >= 0 ? mix(rowY(P.r, P.dn), rowY(P.r + 1, P.dn), sm(0, 1, P.mv)) : rowY(P.r, P.dn));\nconst ring = (P, x, y, s, life = 0.9) => P.rp.length \u003c 48 && P.rp.push({ x: x + 1e-6, y: y + 1e-6, s, a: 1e-6, life });\nfunction plant(P, j) {\n  P.fl[j] = 1;\n  ring(P, P.k * PW + HX(j), rowY(P.r, P.dn), 0.9);\n}\n// Bundles of seedlings lie about the open water, waiting for the line; ft\n// is how far through its flight a thrown one is, below 0 once it floats.\nconst bun = (x, y, ft, tx, ty) => ({ x, y, fx: x, fy: y, tx, ty, a: floor(rnd() * 8), ft });\nfunction scatter(P, k, lo, hi) {\n  for (let i = 0; i \u003c 12; i++) P.bu.push(bun(k * PW + 8 + rnd() * 46, lo + rnd() * (hi - lo), -1.5, 0.5, 0.5));\n}\n// Where open water lies ahead of the line in this paddy, as rows lo..hi.\nfunction open(P, gap) {\n  const ry = ropeY(P);\n  return P.dn > 0 ? [ry + gap, 99] : [7, ry - gap];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 4, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(kv[1], 0.2, 3)) / 2, n = round(cl(kv[2], 4, 8));\n  P.h = cl(kv[0], 0, 1);\n  P.w = cl(kv[3], 0, 1);\n  if (!P.init) {\n    // They have been at it since dawn: the more hands, the further along.\n    P.n = n;\n    P.r = 8 + round((n - 4) * 1.5) + floor(rnd() * 2);\n    assign(P);\n    scatter(P, 0, rowY(P.r, 1) + 10, 99);\n    P.init = true;\n  }\n  if (n !== P.n) (P.n = n), assign(P);\n  P.t += d;\n  P.ox += (3.4 + 5 * P.w) * d;\n  P.oy += (1.4 + 2 * P.w) * d;\n  const btn = input.btnPressed && input.btnPressed[0];\n  if (P.sl \u003c 0) {\n    if (btn && P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) plant(P, j);\n    if (P.mv \u003c 0) {\n      for (let i = 0; i \u003c P.n; i++) {\n        const c = P.crew[i];\n        if (c.q >= c.list.length) continue;\n        const j = c.list[c.q], p0 = c.ph;\n        if (P.fl[j] && p0 \u003c 0.6) {\n          c.q++;\n          continue;\n        }\n        c.ph += (d * c.sp) / 0.36;\n        if (p0 \u003c 0.6 && c.ph >= 0.6) plant(P, j);\n        if (c.ph >= 1) (c.ph = 0), c.q++;\n      }\n      if (P.fl.every((v) => v)) {\n        if (P.r >= NR - 1) {\n          // The last row is in: the crew crosses the bund to the next paddy,\n          // where the carrier has already thrown the bundles.\n          P.sl = 0;\n          scatter(P, P.k + 1, 10, 96);\n          P.eg.m === 0 && fly(P, P.k + 1);\n        } else P.mv = 0;\n      }\n    } else if ((P.mv += d / 0.5) >= 1) {\n      (P.mv = -1), P.r++, fresh(P);\n      for (let i = 0; i \u003c P.n; i++) ring(P, P.k * PW + P.crew[i].home, rowY(P.r, P.dn) + P.dn * 10, 0.5);\n    }\n  } else if ((P.sl += d / 3.5) >= 1) (P.sl = -1), P.k++, (P.dn = -P.dn), (P.r = 0), fresh(P);\n  P.cam = P.k * PW + (P.sl >= 0 ? PW * sm(0, 1, P.sl) : 0);\n  const ry = ropeY(P), dn = P.dn;\n  // The line picks up the bundles it reaches.\n  P.bu = P.bu.filter((b) => {\n    const k = floor(b.x / PW);\n    return b.ft >= 0 || k > P.k || (k === P.k && (P.sl >= 0 || (b.y - ry) * dn > 5));\n  });\n  for (const b of P.bu)\n    if (b.ft >= 0 && (b.ft += d / 0.75) >= 1) (b.ft = -1.5), (b.x = b.tx), (b.y = b.ty), ring(P, b.x, b.y, 1.2, 1.2);\n  // The carrier on the levee throws a bundle ahead of the line now and then.\n  const C = P.ca;\n  if (C.tt > 0) C.tt -= d;\n  else if (abs(C.tx - C.x) > 0.6) C.x += Math.sign(C.tx - C.x) * 7 * d;\n  else if ((C.w -= d) \u003c 0) {\n    const [lo, hi] = open(P, 10);\n    if (P.sl \u003c 0 && hi - lo > 6 && P.bu.length \u003c 16) {\n      const ty = max(lo, hi - 46) + rnd() * (hi - max(lo, hi - 46));\n      P.bu.push(bun(C.x, 104.5, 1e-6, P.k * PW + 8 + rnd() * 46, ty));\n      C.tt = 0.5;\n    }\n    C.w = 1.6 + rnd() * 2.4;\n    C.tx = P.cam + 6 + rnd() * 52;\n  }\n  // The seedling puller works left along the nursery bed.\n  const U = P.pu;\n  U.x -= 0.5 * d;\n  if (U.x \u003c P.cam - 8) U.old.push([U.x + 2, U.x1]) > 3 && U.old.shift(), (U.x1 = (U.x = P.cam + 70) + 2);\n  egret(P, d, ry);\n  for (const q of P.rp) q.a += d;\n  P.rp = P.rp.filter((q) => q.a \u003c q.life);\n}\n\n// The egret flies to open water in paddy k, away from the line.\nfunction fly(P, k) {\n  const E = P.eg, [lo, hi] = k === P.k ? open(P, 26) : [12, 92];\n  if (hi - lo \u003c 8) return fly(P, k + 1);\n  Object.assign(E, { m: 1, t: 0, sx: E.x, sy: E.y, tx: k * PW + 8 + rnd() * 46, ty: lo + rnd() * (hi - lo) });\n  E.a = Math.atan2(E.ty - E.sy, E.tx - E.sx);\n}\nfunction egret(P, d, ry) {\n  const E = P.eg;\n  if (E.m === 1) {\n    if ((E.t += d / 2.4) >= 1) (E.m = 0), (E.x = E.tx), (E.y = E.ty), (E.t = 1.5), ring(P, E.x, E.y, 0.8);\n    return;\n  }\n  if (E.sk >= 0 && (E.sk += d / 0.35) >= 1) E.sk = -1;\n  // Too near the line, or left behind in a planted paddy: off it goes.\n  if (P.sl \u003c 0 && (floor(E.x / PW) \u003c P.k || (floor(E.x / PW) === P.k && (E.y - ry) * P.dn \u003c 15))) return fly(P, P.k);\n  if (E.st >= 0) {\n    E.st += d / 0.45;\n    const q = sm(0, 1, E.st);\n    E.x = mix(E.sx, E.tx, q);\n    E.y = mix(E.sy, E.ty, q);\n    if (E.st >= 1) (E.st = -1), ring(P, E.x - 1.5 * cos(E.a), E.y - 1.5 * sin(E.a), 0.45, 0.7);\n  } else if ((E.t -= d) \u003c 0) {\n    // A slow step, now and then a strike at something in the mud.\n    if (rnd() \u003c 0.25) (E.sk = 0), ring(P, E.x + 5 * cos(E.a), E.y + 5 * sin(E.a), 0.7);\n    else {\n      const lx = E.x - P.k * PW;\n      E.a += (rnd() - 0.5) * 1.4;\n      if (lx \u003c 10) E.a = 0.2 * (rnd() - 0.5);\n      if (lx > 52) E.a = PI + 0.2 * (rnd() - 0.5);\n      if (E.y > 96 || E.y \u003c 10) E.a = (E.y > 50 ? -PI : PI) / 2 + (rnd() - 0.5);\n      Object.assign(E, { st: 0, sx: E.x, sy: E.y, tx: E.x + 1.6 * cos(E.a), ty: E.y + 1.6 * sin(E.a) });\n    }\n    E.t = 0.6 + rnd() * 1.8;\n  }\n}\n\nlet F, L;\nfunction put(x, y, c, k = 1, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j] * k * L[j], a);\n}\n// Points given along a heading (u forward, v to the side), turned to angle a.\nfunction spr(x, y, a, pts) {\n  const c = cos(a), s = sin(a);\n  for (const [u, v, col, k] of pts) {\n    const px = round(x + u * c - v * s), py = round(y + u * s + v * c), o = (py * W + px) * 3;\n    if (col) put(px, py, col, k);\n    else if (px >= 0 && px \u003c W && py >= 0 && py \u003c H) (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n  }\n}\nfunction disc(x, y, r, col, sh) {\n  x = round(x);\n  y = round(y);\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const e = sqrt(dx * dx + dy * dy);\n      if (e > r + 0.35) continue;\n      put(x + dx, y + dy, col, (1.14 - 0.32 * (e / r) ** 2) * (e > r - 0.55 ? 0.82 : 1) - (sh * 0.1 * (dx + dy)) / r);\n    }\n}\nfunction line(ax, ay, bx, by, c, k) {\n  const n = max(1, round(max(abs(bx - ax), abs(by - ay))));\n  for (let i = 0; i \u003c= n; i++) put(mix(ax, bx, i / n), mix(ay, by, i / n), c, k);\n}\nconst BUNDLE = [[-2, 0, ROOT, 0.9], [-1, 0, TIE, 1], [0, 0, SEED, 0.95], [1, 0, LEAF, 1], [2, 0, LEAF, 0.8], [1, -1, LEAF, 0.75], [1, 1, LEAF, 0.75]];\n\n// One planter bent over, seen from above: the hat, the back and hips\n// behind it, the arms reaching out past the brim to the water, a bundle in\n// one hand and the other pushing a hill in at the rope.\nconst BACK = [3.4, 3.4, 3, 2.6, 2.1];\nfunction planter(P, c, x, y, dn, ry, x0, hr, walk) {\n  const sh = SHIRTS[c.sh], pa = PANTS[c.pa], st = walk ? round(sin(P.t * 9 + c.wig)) : 0;\n  let side = c.home \u003c 32 ? 1 : -1, e = 0, tx = x + side * 3, ty = y - dn * 3.6;\n  if (!walk && c.q \u003c c.list.length) {\n    const hx = x0 + HX(c.list[c.q]);\n    side = hx >= x ? 1 : -1;\n    e = c.ph \u003c 0.6 ? sm(0, 0.5, c.ph) : 1 - sm(0.65, 1, c.ph);\n    tx = mix(x + side * 3, hx, e);\n    ty = mix(y - dn * 3.6, ry + dn * 0.6, e);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    put(x + s, y + dn * (8 + (s * st > 0 ? 1 : 0)), pa, 0.7);\n    for (let dx = -1; dx \u003c= 1; dx++) put(x + dx, y + dn * 7, pa, 0.9 - 0.1 * abs(dx));\n  }\n  BACK.forEach((hw, j) => {\n    for (let dx = -3; dx \u003c= 3; dx++) if (abs(dx) \u003c= hw) put(x + dx, y + dn * (2 + j), sh, (0.98 - 0.07 * j) * (abs(dx) > hw - 1 ? 0.85 : 1));\n  });\n  line(x + side * 2.8, y + dn * 1.5, tx, ty, sh, 0.9);\n  put(tx, ty, SKIN);\n  const bx = x - side * 3.2, by = y - dn * 3;\n  line(x - side * 2.8, y + dn * 1.5, bx, by, sh, 0.9);\n  put(bx, by, SKIN);\n  put(bx, by - dn, SEED);\n  put(bx + side, by - dn * 1.6, LEAF, 0.9);\n  put(bx - side, by - dn, LEAF, 0.8);\n  disc(x + (tx - x) * 0.15, y - dn * e * 0.8, hr, HAT, 1);\n}\n\n// Ripple rings from every push, step and splash, summed per LED.\nfunction ripples(P, cam) {\n  const RIP = P.rip;\n  RIP.fill(0);\n  for (const q of P.rp) {\n    const R = 0.6 + q.a * 6.5, a = q.s * (1 - q.a / q.life), qx = q.x - cam;\n    for (let y = max(0, floor(q.y - R - 1)); y \u003c= min(H - 1, q.y + R + 1); y++)\n      for (let x = max(0, floor(qx - R - 1)); x \u003c= min(W - 1, qx + R + 1); x++) {\n        const e = abs(sqrt((x - qx) ** 2 + (y - q.y) ** 2) - R);\n        if (e \u003c 0.8) RIP[y * W + x] += a * (1 - e / 0.8);\n      }\n  }\n}\n\n// The bunds, the levee, the nursery, and the water mirroring the sky.\nfunction ground(P, K, cam, ry) {\n  const f = F, k = P.k, dn = P.dn, t = P.t, w = P.w, h = P.h, RIP = P.rip, CD = P.cd, CS = P.cs, NZ = P.nz, HT = P.ht, TB = P.tb;\n  const ox = floor(P.ox), oy = floor(P.oy), wo = floor(t * (3 + 6 * w)), ws = 0.75 - 0.6 * w, wa1 = min(1, w * 4);\n  // The sun's glint, near noon, sliding across the paddy with the hour.\n  const gu = cl((h - 0.22) / 0.56, 0, 1), gs = sm(0.22, 0.38, h) * (1 - sm(0.62, 0.8, h)), gx = 6 + 52 * gu, gy = 70 - 30 * sin(PI * gu);\n  // The nursery bed is bare where the seedlings have been pulled.\n  const BM = P.bm;\n  BM.fill(0);\n  for (const [a, b] of [...P.pu.old, [P.pu.x + 2, P.pu.x1]]) for (let x = max(0, ceil(a - cam)); x \u003c= min(W - 1, b - cam); x++) BM[x] = 1;\n  // How muddy the water is on each row of this paddy: churned round the\n  // crew's feet and behind them, settling further back.\n  for (let y = 0; y \u003c H; y++) {\n    const ds = (ry - y) * dn;\n    TB[y] = P.sl >= 0 ? 0.22 : sm(-14, -9, ds) * (0.16 + 0.3 * exp(-max(0, ds) / 14));\n  }\n  const [z0, z1, z2, s0, s1, s2, l0, l1, l2, h0, h1, h2, , , , mist] = K.slice(1), L0 = L[0], L1 = L[1], L2 = L[2], M0 = MUD[0] * L0, M1 = MUD[1] * L1, M2 = MUD[2] * L2;\n  const m0 = mix(s0, 250, 0.6), m1 = mix(s1, 250, 0.6), m2 = mix(s2, 250, 0.6), my = floor(t * 1.5), mx = floor(t * 2.5) + 40;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, wx = x + cam, kk = floor(wx / PW), lx = wx - kk * PW, o = i * 3, hv = HT[(wx & 127) | (y \u003c\u003c 7)];\n    const wet = y >= 3 && y \u003c= 103 && lx >= 3 ? 1 : y === 110 || y === 116 || y === 122 ? 0.7 : 0;\n    if (!wet) {\n      let c = GRASS, v = 0.8 + 0.4 * hv;\n      if (y >= 110) {\n        const bare = y >= 117 && y \u003c= 121 && BM[x];\n        (c = bare ? MUD : NUR), (v = bare ? 0.55 + 0.3 * hv : (y === 111 || y === 115 || y === 117 || y === 121 || y === 123 ? 0.62 : 0.72) + 0.45 * hv);\n      } else if (y >= 104) (c = y >= 106 && y \u003c= 108 ? EARTH : GRASS), (v = y === 104 ? 0.6 + 0.3 * hv : v);\n      else if (y \u003c 3 ? y === 1 : lx === 1) (c = EARTH), (v = 0.75 + 0.35 * hv);\n      else if (y === 2 || (y > 2 && lx === 2)) v *= 0.7;\n      f[o] = c[0] * v * L0;\n      f[o + 1] = c[1] * v * L1;\n      f[o + 2] = c[2] * v * L2;\n      continue;\n    }\n    const ci = ((y + oy) & 127) * 128 + ((x + ox) & 127), cd = CD[ci], cs = CS[ci], g = (0.28 * x) / 63 + 0.52 * (1 - y / 127);\n    let br = 0.9;\n    if (wa1 > 0) {\n      const nz = NZ[(((y >> 1) + wo) & 127) | ((((x >> 1) + (wo >> 1)) & 127) \u003c\u003c 7)];\n      // A cat's paw darkens the mirror and breaks it into glitter.\n      if (nz > ws) {\n        const wa = sm(ws, ws + 0.16, nz) * wa1;\n        br *= 1 - 0.3 * wa;\n        if (HT[((x * 5 + wo * 3) & 127) | (((y + wo) & 127) \u003c\u003c 7)] > 0.87) br += 0.45 * wa;\n      }\n    }\n    const tb = kk \u003c k ? 0.22 : kk === k && wet === 1 ? TB[y] : 0, rp = RIP[i];\n    let gl = 0;\n    if (gs > 0 && abs(x - gx) \u003c 16) {\n      gl = gs * exp(-((x - gx) ** 2 + ((y - gy) * 0.8) ** 2) / 40) * (1 - tb);\n      if (w > 0.1) gl *= mix(1, HT[((x * 7 + wo) & 127) | (y \u003c\u003c 7)] > 0.75 ? 2.6 : 0.25, w);\n    }\n    const r0 = z0 + (s0 - z0) * g, r1 = z1 + (s1 - z1) * g, r2 = z2 + (s2 - z2) * g;\n    const q0 = (r0 + (h0 + (l0 - h0) * cs - r0) * cd) * br, q1 = (r1 + (h1 + (l1 - h1) * cs - r1) * cd) * br, q2 = (r2 + (h2 + (l2 - h2) * cs - r2) * cd) * br;\n    // Morning mist lies over the water in drifting banks.\n    let ms = mist > 0.01 ? (NZ[((((y >> 1) + my) & 127) \u003c\u003c 7) | ((x + mx) & 127)] - 0.5) * 2.4 : 0;\n    ms = ms > 0 ? mist * min(ms, 0.7) : 0;\n    const m = 0.7 + 0.4 * hv, wk = wet \u003c 1 ? 0.8 : 1, c0 = (q0 + (M0 * m - q0) * tb + rp * (60 + 0.35 * q0) + 255 * L0 * gl) * wk;\n    const c1 = (q1 + (M1 * m - q1) * tb + rp * (60 + 0.35 * q1) + 255 * L1 * gl) * wk, c2 = (q2 + (M2 * m - q2) * tb + rp * (60 + 0.35 * q2) + 255 * L2 * gl) * wk;\n    f[o] = c0 + (m0 - c0) * ms;\n    f[o + 1] = c1 + (m1 - c1) * ms;\n    f[o + 2] = c2 + (m2 - c2) * ms;\n  }\n}\n\n// The rope with its markers, one per hill still to plant, and every hill\n// planted so far, leaning and swaying with the wind.\nfunction field(P, cam, ry) {\n  const k = P.k, dn = P.dn, t = P.t, w = P.w, x0 = k * PW - cam;\n  if (P.sl \u003c 0) {\n    const yr = round(ry);\n    for (let x = 1; x \u003c= 62; x++) put(x0 + x, yr, ROPE, 0.85);\n    if (P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) put(x0 + HX(j), yr, MARK[j % 3 === 2 ? 1 : 0]);\n  }\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW) && kk \u003c= k; kk++) {\n    const xk = kk * PW - cam;\n    for (let gi = 0; gi \u003c NR; gi++) {\n      const y = 5 + 4 * gi, ord = kk \u003c k ? -1 : dn > 0 ? gi : NR - 1 - gi;\n      if (kk === k && ord > P.r) continue;\n      for (let j = 0; j \u003c NH; j++) {\n        if (kk === k && ord === P.r && !P.fl[j]) continue;\n        const x = xk + HX(j), v = 0.85 + 0.3 * hash(kk * 31 + j, gi), sw = sin(t * 2.6 + x * 0.3 + y * 0.15) * (0.25 + 0.9 * w) + 0.9 * w, ln = round(cl(sw, -1, 1));\n        put(x, y, SEED, v);\n        put(x + ln, y - 1, LEAF, v);\n        put(x + (v > 1 ? 1 : -1), y, LEAF, 0.75 * v);\n      }\n    }\n  }\n}\n\n// The egret: wading with its neck folded (out in a strike), or on the wing.\nfunction egretDraw(P, cam) {\n  const E = P.eg, pts = [];\n  if (E.m === 0) {\n    const nk = E.sk >= 0 ? 1.8 + 2.4 * sin(PI * E.sk) : 1.8;\n    for (let u = -3.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -1.5; v \u003c= 1.5; v += 0.5) if ((u + 1) ** 2 / 6.5 + (v * v) / 2.1 \u003c= 1) pts.push([u, v, WHITE, 0.9 + 0.06 * v]);\n    for (let u = 2; u \u003c= nk + 0.5; u += 0.5) pts.push([u, 0.5 * sin(u * 1.6), WHITE, 1]);\n    pts.push([nk + 1, 0, WHITE, 1], [nk + 2, 0, BILL, 1], [nk + 2.8, 0, BILL, 0.8]);\n    spr(E.x - cam + 1, E.y + 1, E.a, pts.map(([u, v]) => [u, v, 0, 0.7]));\n    spr(E.x - cam, E.y, E.a, pts);\n    return;\n  }\n  const q = sm(0, 1, E.t), ex = mix(E.sx, E.tx, q) - cam, ey = mix(E.sy, E.ty, q) - 8 * sin(PI * E.t), sp = 3 + 3 * abs(sin(P.t * 8));\n  for (let u = -2; u \u003c= 1; u += 0.5) pts.push([u, 0, WHITE, 1], [u, 0.6, WHITE, 0.9], [u, -0.6, WHITE, 0.9]);\n  for (let v = 1; v \u003c= sp; v += 0.5) for (let s = -1; s \u003c= 1; s += 2) pts.push([-0.4 * (v / sp) ** 2, s * v, WHITE, v > sp - 1 ? 0.75 : 1], [0.6 - 0.6 * (v / sp), s * v, WHITE, 0.85]);\n  pts.push([2, 0, WHITE, 1], [3, 0, WHITE, 1], [4, 0, BILL, 1]);\n  spr(ex, ey, E.a, pts);\n}\n\n// The crew and the rope holders on the bunds, all in straw hats.\nfunction crew(P, cam, ry) {\n  const dn = P.dn, x0 = P.k * PW - cam, hr = P.n > 6 ? 2.6 : 3;\n  if (P.sl \u003c 0) {\n    for (let i = 0; i \u003c P.n; i++) {\n      const c = P.crew[i], lag = P.mv >= 0 ? sm(0.15, 1, P.mv) : 1, cy = mix(rowY(P.r, dn), ry, lag) + dn * 4;\n      planter(P, c, x0 + c.home, cy, dn, ry, x0, hr, false);\n    }\n    for (let hx = 1; hx \u003c 63; hx += 61) {\n      put(x0 + hx + (hx \u003c 9 ? -2 : 2), ry + dn * 2, SHIRTS[hx & 7], 0.8);\n      disc(x0 + hx, ry + dn * 0.5, 2, HAT, 1);\n    }\n    return;\n  }\n  const q = sm(0, 1, P.sl), y0 = rowY(NR - 1, dn) + dn * 4, y1 = rowY(0, -dn) - dn * 4, fd = q \u003c 0.5 ? dn : -dn;\n  for (let i = 0; i \u003c P.n; i++) planter(P, P.crew[i], P.crew[i].home, mix(y0, y1, q), fd, 0, 0, hr, true);\n  for (let hx = 1; hx \u003c 63; hx += 61) disc(hx, mix(y0, y1, q) - fd * 4, 2, HAT, 1);\n}\n\n// The carrier on the levee with bundles on his A-frame, the puller in the\n// nursery with the bundles he has tied laid in the channel, and every bundle\n// afloat or in the air.\nfunction helpers(P, cam) {\n  const C = P.ca, cx = C.x - cam, U = P.pu, ux = U.x - cam, pull = sin(P.t * 7);\n  for (const b of P.bu) if (b.ft \u003c 0) spr(b.x - cam, b.y, (b.a * PI) / 4, BUNDLE);\n  // Trays of seedlings from the nursery wait on the levee path.\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW); kk++)\n    for (let tx = 9; tx \u003c 60; tx += 36)\n      for (let dx = 0; dx \u003c 8; dx++)\n        for (let dy = 0; dy \u003c 3; dy++) put(kk * PW + tx + dx - cam, 106 + dy, dx % 7 ? NUR : ROOT, dx % 7 ? 0.75 + 0.4 * hash(dx + tx, dy + kk * 5) : 0.6);\n  for (let dx = -2; dx \u003c= 2; dx++) for (let dy = 2; dy \u003c= 4; dy++) put(cx + dx, 106 + dy, (dx + dy) & 1 ? SEED : LEAF, dy === 2 ? 0.75 : 0.95);\n  put(cx - 2, 109, TIE), put(cx + 2, 109, TIE);\n  if (C.tt > 0) line(cx + 1, 105, cx + 2, 101 + 2 * C.tt, SKIN, 0.9);\n  disc(cx, 106, 2, HAT, 1);\n  for (let bx = U.x + 6; bx \u003c U.x1 - 1; bx += 5) spr(bx - cam, 116, PI / 2, BUNDLE);\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = 2; dx \u003c= 4; dx++) put(ux + dx, 119 + dy, SHIRTS[5], 0.85);\n  line(ux - 1, 118, ux - 2.5 - pull, 118, SKIN, 0.9);\n  line(ux - 1, 120, ux - 2.5 + pull, 120, SKIN, 0.9);\n  disc(ux, 119, 2, HAT, 1);\n}\nfunction thrown(P, cam) {\n  for (const b of P.bu) if (b.ft >= 0) spr(mix(b.fx, b.tx, b.ft) - cam, mix(b.fy, b.ty, b.ft) - 7 * sin(PI * b.ft), b.ft * 9, BUNDLE);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const K = key(P.h), cam = floor(P.cam), ry = ropeY(P), f = (F = P.f);\n  L = [K[13], K[14], K[15]];\n  ripples(P, cam);\n  ground(P, K, cam, ry);\n  field(P, cam, ry);\n  if (P.eg.m === 0) egretDraw(P, cam);\n  crew(P, cam, ry);\n  helpers(P, cam);\n  thrown(P, cam);\n  if (P.eg.m === 1) egretDraw(P, cam);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower."},{"name":"Planters","min":4,"max":8,"about":"Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look."},{"name":"Wind","min":0,"max":1,"about":"Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean."}],"start":[0,2,4,0.06],"measures":{"motion":0.0782,"detail":0.0601,"edges":0.318,"complexity":2.2267,"coverage":1,"colour":0.2886,"drift":0.0509},"knobResponse":[0.2048,0.0848,0.0585,0.1025]},{"slug":"rice-terraces","title":"Rice Terraces","family":"farm","round":25,"note":"세운 패널 아래 끝에서 숲이 선 능선까지 물 댄 다랑논이 등고선처럼 휘어 쌓이고, 논마다 해 뜨는 하늘을 비춰요. 위로 갈수록 층이 얇아지고 노을빛이 짙어지며, 구름 반사가 거울 논들을 가로질러 흘러가고 가까운 논에서는 농부가 물소를 몰아 논을 갈아요. K1 을 돌리면 모가 줄지어 서고 초록으로 덮였다가 누렇게 익고, K1 을 누르면 맨 위 물꼬가 열려 물이 둑을 하나씩 넘어 내려가요.","idea":"Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.","buttons":"K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.","code":"// ===== Patternflow pattern =====\n// Title:   Rice Terraces\n// Family:  farm\n// Idea:    Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Hani rice terraces of Yuanyang and the terraces of Banaue\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1\n//\n// Knob 1: Season. At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble.\n// Knob 2: Speed. At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower.\n// Knob 3: Terraces. How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water.\n// Knob 4: Hour. Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door.\n// Buttons: K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Terrace 0 sits just under the panel, the last one at the ridge. The sky's\n// horizon row, and the classes a LED can belong to.\nconst [YB, YT, YH] = [134, 38, 34];\nconst [SKY, FAR, NEAR, WOOD, WATER, WALL, RIM] = [0, 1, 2, 3, 4, 5, 6];\n// The row of the sky (0 the zenith, 31 the horizon) that the water on each\n// panel row holds: low sky in the far paddies, the sky overhead in the near ones.\nconst RR = F32(H).map((v, y) => 26 - 20 * cl((y - 36) / 92, 0, 1) ** 0.9);\nconst FOAM = [220, 236, 250], LAG = 0.22, AT = [0.82, 0.88, 1], MUD = [7, 5.6, 4.4], STUB = [150, 120, 70];\n\n// Light by the hour: sky at the zenith, sky at the horizon, sunlit cloud,\n// then ambient and direct light and how much mist lies in the valley.\nconst HOURS = [\n  [0, 14, 22, 70, 150, 100, 150, 255, 150, 140, 0.3, 0.12, 1],\n  [0.07, 34, 64, 150, 255, 176, 110, 255, 200, 150, 0.5, 0.55, 0.95],\n  [0.25, 40, 100, 200, 190, 215, 235, 255, 245, 225, 0.7, 0.6, 0.4],\n  [0.5, 36, 96, 206, 170, 205, 240, 255, 255, 250, 0.74, 0.66, 0.15],\n  [0.72, 40, 80, 180, 250, 200, 130, 255, 215, 150, 0.64, 0.56, 0.2],\n  [0.86, 40, 36, 100, 255, 120, 70, 255, 140, 90, 0.42, 0.36, 0.4],\n  [1, 6, 8, 28, 40, 36, 70, 60, 60, 90, 0.16, 0, 0.6],\n];\n// The season: earth wall, bund rim, rice. Flooded, planted, green, ripening, cut.\nconst SEASONS = [\n  [0, 66, 48, 36, 206, 184, 150, 120, 200, 70],\n  [0.35, 60, 74, 40, 150, 196, 96, 110, 204, 60],\n  [0.65, 42, 84, 34, 110, 176, 64, 46, 156, 40],\n  [0.85, 80, 84, 40, 186, 176, 84, 184, 184, 50],\n  [1, 96, 76, 44, 224, 184, 96, 244, 178, 40],\n];\nfunction key(T, u) {\n  let i = 0;\n  while (i \u003c T.length - 2 && u > T[i + 1][0]) i++;\n  const a = T[i], b = T[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ox: 0, mt: 0, n: 0, surge: 99, sk: F32(32 * 3), cl: F32(128 * 32), f: F32(N * 3),\n    cls: new Uint8Array(N), kk: new Int8Array(N), e: F32(N), dep: F32(N), tx: F32(N), walk: [[10 + rnd() * 44, 1], [10 + rnd() * 44, -1]],\n  });\n  P.ox = rnd() * 128;\n  // Egrets: where each stands (column, how far up the steps), and how long it waits.\n  P.birds = [0, 1, 2].map(() => ({ x: 6 + rnd() * 52, kf: 0.05 + rnd() * 0.6, w: 1 + rnd() * 8, p: -1 }));\n  // Cloud noise, 128 columns that wrap and 32 rows from the zenith down.\n  for (let i = 0; i \u003c 128 * 32; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.06, y * 0.22) + 0.3 * vn(X * 0.15, y * 0.5 + 9) + 0.15 * vn(X * 0.4, y + 3);\n    P.cl[i] = mix(f(x), f(x - 128), x / 128);\n  }\n  for (let i = 0; i \u003c N; i++) P.tx[i] = vn((i & 63) * 0.5, (i >> 6) * 0.6);\n}\n\n// The terraces for n steps. A level u climbs the panel in steps that shrink\n// with distance, bent by slow noise into spurs and gullies; each whole value\n// of u is a bund. For each LED: which terrace, and whether it is water, the\n// earth wall under a bund, or the bund's lit rim.\nfunction build(P, n) {\n  const q = 0.28 ** (1 / n), L = -log(q), b0 = ((YB - YT) * L) / (1 - q ** n);\n  const V = (y) => ((y = 1 - ((YB - y) * L) / b0), y > 1e-4 ? log(y) / -L : 99);\n  const { cls, kk, e, dep } = P, u = F32(H + 20), yc = F32(n + 6);\n  const put = (x, y, k, i = y * W + x) => y >= 0 && y \u003c H && cls[i] >= WATER && ((cls[i] = RIM), (kk[i] = k));\n  P.lip = F32((n + 2) * W);\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    // A spur comes down left of centre and a gully cuts in on the right.\n    const sp = 1.3 * exp(-(((x - 24) / 13) ** 2)) - 1 * exp(-(((x - 55) / 9) ** 2));\n    for (let y = H + 19, m = -9; y >= 0; y--) {\n      const v0 = V(y), xs = (x - 32) / (q ** v0) ** 0.4 + 40;\n      const v = v0 + sp + 1.2 * (vn(xs * 0.035, v0 * 0.07) * 2 - 1 + 0.4 * (vn(xs * 0.085 + 7, v0 * 0.15 + 5) * 2 - 1));\n      u[y] = m = max(m, v);\n    }\n    // Where each bund crosses this column, to a fraction of a LED.\n    yc.fill(H + 40);\n    for (let y = H + 18; y >= 0; y--) for (let k = max(-3, floor(u[y + 1]) + 1); k \u003c= min(n, u[y]); k++) yc[k + 3] = y + (u[y] - k) / max(1e-3, u[y] - u[y + 1]);\n    for (let k = 0; k \u003c= n; k++) P.lip[k * W + x] = yc[k + 3];\n    let y = H - 1;\n    for (; y >= 0 && u[y] \u003c n; y--) {\n      const k = max(-3, floor(u[y])), lip = yc[k + 4], bp = yc[k + 3] \u003c H + 40 ? yc[k + 3] - lip : b0, d = y - lip, rh = cl(0.22 * bp - 0.6, 0, 3.5), i = y * W + x;\n      if (d \u003c 1) (cls[i] = RIM), (kk[i] = k + 1);\n      else if (d \u003c 1 + rh) (cls[i] = WALL), (kk[i] = k + 1), (e[i] = (d - 1) / rh);\n      else (cls[i] = WATER), (kk[i] = k), (e[i] = d - 1 - rh), (dep[i] = bp - 1 - rh);\n    }\n    P.ridge[x] = y;\n    const top = y - 5 - 3 * vn(x * 0.35, 4) - abs(sin(x * 0.9)) * 1.5;\n    for (; y >= 0; y--) {\n      const i = y * W + x;\n      cls[i] = y > top ? WOOD : y >= 22 + 4 * sin(0.06 * x + 0.5) + 2.5 * sin(0.17 * x + 2) ? NEAR : y >= 15 + 5 * sin(0.045 * x + 2.4) + 2 * sin(0.13 * x + 1) ? FAR : SKY;\n    }\n  }\n  // Close the rim where a bund steps a row or more from one column to the next.\n  for (let k = 1; k \u003c= n; k++)\n    for (let x = 0; x \u003c W - 1; x++) {\n      let a = ceil(P.lip[k * W + x]), b = ceil(P.lip[k * W + x + 1]), xa = x, xb = x + 1;\n      if (a > b) [a, b, xa, xb] = [b, a, xb, xa];\n      const m = floor((a + b) / 2);\n      for (let y = a + 1; y \u003c b; y++) put(y \u003c= m ? xa : xb, y, k);\n      if (b > a) put(xb, m, k);\n    }\n  // How bright each rim is: faint where the steps are thin and far, and\n  // brighter where the bund turns to face the light.\n  const lp = (k, x) => P.lip[k * W + cl(x, 0, W - 1)];\n  for (let i = 0; i \u003c N; i++)\n    if (cls[i] === RIM) {\n      const k = kk[i], x = i & 63;\n      e[i] = k > 0 ? cl((lp(k - 1, x) - lp(k, x) - 2) / 7, 0.2, 1) : 1;\n      dep[i] = k >= 0 ? lp(k, x + 1) - lp(k, x - 1) : 0;\n    }\n  for (P.kw = 1; P.lip[P.kw * W + 32] > 117; P.kw++);\n  P.n = n;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2);\n  const n = round(cl(k[2], 12, 24));\n  if (n !== P.n) build(P, n);\n  P.s = cl(k[0], 0, 1);\n  P.h = cl(k[3], 0, 1);\n  P.t += d;\n  P.ox += 5 * d;\n  P.mt += d;\n  P.surge += d;\n  if (input.btnPressed && input.btnPressed[0]) P.surge = 0;\n  // The ploughing team and the farmer up on the high bund walk to the end and turn.\n  for (const w of P.walk) {\n    w[0] += w[1] * 2.2 * d;\n    if (w[0] > 56 || w[0] \u003c 6) w[1] = -w[1];\n  }\n  // An egret waits, then flies to another paddy in a low arc.\n  for (const b of P.birds)\n    if (b.p >= 0) {\n      if ((b.p += d / 1.8) >= 1) Object.assign(b, { p: -1, x: b.tx, kf: b.tk, w: 4 + rnd() * 9 });\n    } else if ((b.w -= d) \u003c= 0) Object.assign(b, { p: 0, tx: 6 + rnd() * 52, tk: 0.05 + rnd() * 0.6, y0: egY(P, b.x, b.kf) });\n}\n\n// Where an egret stands: a little behind the bund of its terrace.\nconst egY = (P, x, kf) => P.lip[max(1, round(kf * P.n)) * W + round(cl(x, 0, 63))] - 2;\nfunction egrets(P, L, wet) {\n  const c = lit([250, 248, 240], L);\n  for (const b of P.birds) {\n    if (b.p \u003c 0) {\n      const x = b.x, y = egY(P, x, b.kf);\n      put(x, y, c), put(x, y - 1, c), put(x + 1, y - 2, c), put(x, y + 1, c, 0.35 * wet), put(x, y + 2, c, 0.25 * wet);\n    } else {\n      const y1 = egY(P, b.tx, b.tk), x = mix(b.x, b.tx, b.p), y = mix(b.y0, y1, b.p) - 14 * sin(PI * b.p), up = floor(P.t * 7) & 1;\n      put(x, y, c), put(x - 1, y - up, c), put(x + 1, y - up, c), put(x - 2, y - 2 * up, c, 0.7), put(x + 2, y - 2 * up, c, 0.7);\n    }\n  }\n}\n\n// The sky at table x and row r (0 the zenith, 31 the horizon), with its clouds.\nfunction skyAt(P, K, xx, r, out) {\n  const s = P.sk, c = P.cl, xi = floor(xx), fx = xx - xi, i = r * 128;\n  const v = mix(c[i + (xi & 127)], c[i + ((xi + 1) & 127)], fx), cd = cl((v - 0.46) * 8, 0, 1) * (0.4 + 0.6 * sm(0, 6, 31 - r));\n  const lit = 0.3 + 0.7 * cd;\n  for (let j = 0; j \u003c 3; j++) out[j] = mix(s[r * 3 + j], mix(mix(K[1 + j], K[4 + j], 0.5) * 0.75, K[7 + j], lit), cd * 0.94);\n  return cd;\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], a);\n}\nconst lit = (c, L) => c.map((v, j) => v * L[j]);\n\n// Hani houses: earth walls under tall thatch, lamps in the doors at night,\n// smoke from the hearth of the middle one.\nconst HOUSE = [\"..TTT..\", \".TTTTT.\", \"TTTTTTT\", \".WWDWW.\", \".WWDWW.\"];\nfunction village(P, L, night, amb) {\n  const th = lit([176, 128, 70], L), wa = lit([186, 150, 112], L), dr = night > 0.3 ? [255 * night, 170 * night, 80 * night] : [40, 30, 26];\n  for (const [hx, dy] of [[5, 3], [13, 5], [21, 2]]) {\n    const by = P.ridge[hx] + dy;\n    for (let i = -4; i \u003c= 4; i++) put(hx + i, by + 1, lit([70, 56, 40], L));\n    HOUSE.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && put(hx + i - 3, by - 4 + j, ch === \"T\" ? th.map((v) => v * (j === 2 ? 0.8 : 1)) : ch === \"W\" ? wa : dr)));\n  }\n  const by = P.ridge[13] + 1;\n  for (let j = 0; j \u003c 14; j++) put(14 + j * 0.3 + sin(P.t * 1.3 - j * 0.6) * 0.7, by - 3 - j, [220, 216, 220].map((v) => v * (0.4 + 0.6 * amb)), 0.6 * (1 - j / 14));\n}\n\n// Each bund lets a thread of water down its wall through a gap; when the\n// sluice is open the thread runs wide and white.\nfunction streams(P, fo, I) {\n  for (let k = 1; k \u003c P.n; k++) {\n    const x = 5 + floor(hash(k, 11) * 54), y0 = ceil(P.lip[k * W + x]), f = I[k + 3], w = f > 0.3 ? 1 : 0;\n    for (let y = y0; y \u003c y0 + 5 && y \u003c H; y++) {\n      const C = P.cls[y * W + x];\n      if (y > y0 && C === WATER) {\n        put(x, y, fo, 0.35);\n        break;\n      }\n      const st = (y - floor(P.t * 9)) % 3 === 0 ? 1 : 0.7;\n      for (let i = -w; i \u003c= w; i++) put(x + i, y, fo.map((v) => v * st), 0.85);\n    }\n  }\n}\n\n// A farmer ploughs behind his buffalo in a near paddy, both mirrored in the\n// water, and another farmer walks a high bund.\nconst BUFF = [\"......hh\", \".BBBBBBH\", \"BBBBBBBHH\", \".BBBBBB..\"];\nfunction walkers(P, L, s, sk) {\n  const near = P.walk[0], far = P.walk[1], dir = near[1], k = P.kw, wet = 1 - sm(0.3, 0.6, s);\n  const feet = (x) => P.lip[k * W + round(cl(x, 0, 63))] - 1 - 3 * wet;\n  const fig = (x, y, c) => (put(x, y, c), wet > 0 && put(x, 2 * feet(near[0]) - y + 1, c.map((v, j) => v * 0.6 + sk[60 + j] * 0.2), 0.6 * wet));\n  const bx = near[0], by = feet(bx), fx = bx - 5 * dir;\n  // The furrow of churned water behind them.\n  for (let i = 4; i \u003c 20; i++) put(fx - i * dir, feet(fx - i * dir), [120, 100, 80].map((v, j) => v * L[j]), 0.5 * wet * (1 - i / 20));\n  BUFF.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && fig(bx + (dir > 0 ? i - 4 : 4 - i), by - 3 + j, ch === \"h\" ? lit([230, 220, 200], L) : lit(j > 1 ? [30, 27, 30] : [70, 62, 62], L))));\n  const hat = lit([240, 210, 136], L), body = lit([30, 34, 70], L);\n  for (const [i, j, c] of [[0, -4, hat], [-1, -3, hat], [0, -3, hat], [1, -3, hat], [0, -2, body], [0, -1, body], [-dir, -1, body], [0, 0, body]]) fig(fx + i, by + j, c);\n  // The plough's handle between them.\n  fig(fx + dir, by - 1, [70, 56, 44]), fig(fx + 2 * dir, by, [70, 56, 44]);\n  const k2 = k + round((P.n - k) * 0.55), gx = far[0], gy = P.lip[k2 * W + round(gx)] - 1;\n  put(gx, gy - 1, hat), put(gx, gy, body);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const K = key(HOURS, P.h), S = key(SEASONS, P.s), f = (F = P.f), sk = P.sk, n = P.n, t = P.t, s = P.s, cls = P.cls, tx = P.tx;\n  const [amb, dir, mist] = [K[10], K[11], K[12]], night = sm(0.86, 1, P.h);\n  for (let r = 0; r \u003c 32; r++) {\n    const e = sm(0, 0.65, 1 - r / 31) ** 0.8;\n    for (let j = 0; j \u003c 3; j++) sk[r * 3 + j] = mix(K[4 + j], K[1 + j], e);\n  }\n  // The sun along its day from right to left.\n  const a = cl(P.h / 0.86, 0, 1) * PI, sx = 32 + 26 * cos(a), sy = 16 - 80 * sin(a) ** 1.5, side = sx > 32 ? 1 : -1, rs = 31 - 13 * (1 - sy / YH), sunUp = (1 - sm(11, 15, sy)) * (1 - night);\n  const rice1 = sm(0.1, 0.3, s), rice2 = sm(0.3, 0.6, s), cut = sm(0.88, 1, s);\n  const c = P.cl, ox = P.ox, col = [0, 0, 0], L = [0, 0, 0], L0 = AT.map((v, j) => amb * v + (dir * K[7 + j]) / 255);\n  const sh0 = (0.5 + 0.5 * sm(0, 0.2, P.h)) * (1 - night) * 0.8 * dir;\n  const far = AT.map((v, j) => K[1 + j] * 0.9 + 16), near = [30, 44, 70].map((v) => v * (amb + 0.3)), wood = [28, 66, 32].map((v) => v * 1.3);\n  // How hard water is spilling over each bund: the sluice opens at the top and\n  // the overflow runs down one terrace every LAG seconds.\n  const I = F32(n + 8), HZ = F32(n + 8), fo = FOAM.map((v, j) => mix(v, K[7 + j], 0.3) * (0.4 + 0.6 * sm(0.1, 0.5, amb)));\n  for (let k = -3; k \u003c= n + 1; k++) {\n    const tk = P.surge - (n - k) * LAG;\n    HZ[k + 3] = 0.35 * cl(k / n, 0, 1) ** 1.6;\n    I[k + 3] = tk > 0 ? exp(-tk * 0.9) * sm(0, 0.15, tk) : 0;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, C = cls[i];\n    // Cloud shadow on the hillside, sliding across.\n    const shade = cl((c[((floor(y * 0.22) + 3) & 31) * 128 + (floor(x * 0.75 + ox * 1.2 + 40) & 127)] - 0.48) * 4, 0, 1) * sh0;\n    for (let j = 0; j \u003c 3; j++) L[j] = L0[j] - (shade * K[7 + j]) / 255;\n    if (C \u003c WOOD) {\n      const r = cl(round(31 - 13 * (1 - y / YH)), 0, 31), cd = skyAt(P, K, x * 1.3 + ox, r, col);\n      if (C === SKY) {\n        const ds = Math.hypot(x - sx, (y - sy) * 1.1), g = (1 - night) * (0.5 * exp(-ds / 9) * (1 - cd * 0.6) + (ds \u003c 2.6 ? 1 : 0)), st = night > 0.2 && hash(x, y) > 0.985 ? 200 * night : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] += K[7 + j] * g + st;\n      } else for (let j = 0; j \u003c 3; j++) col[j] = (C === FAR ? mix(sk[84 + j], far[j], 0.45) : mix(sk[84 + j], near[j], 0.75)) * (0.9 + 0.1 * tx[i]);\n    } else if (C === WOOD) for (let j = 0; j \u003c 3; j++) col[j] = wood[j] * (0.6 + 0.6 * tx[i]) * L[j];\n    else {\n      const k = P.kk[i], ee = P.e[i], fl = I[k + 3];\n      if (C === WALL) {\n        // Water sheets down the wall when the terrace above overflows.\n        const st = fl > 0.01 ? 0.85 * fl : 0, sv = st ? 0.5 + 0.5 * sin(y * 1.9 - P.surge * 14 + x * 1.3) ** 2 : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(S[1 + j] * L[j] * (1.05 - 0.4 * ee), fo[j] * sv, st);\n      } else if (C === RIM) {\n        const ra = ee * (0.55 + 0.45 * cl(0.5 + 0.3 * P.dep[i] * side, 0, 1));\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(S[1 + j] * L[j], S[4 + j] * (L[j] + 0.3) + sk[84 + j] * 0.25, ra), fo[j], fl);\n      } else {\n        // The mirror: the far paddies hold the low sky, the near ones the sky\n        // overhead, and each holds its own wall dark along the back.\n        const dp = max(2, P.dep[i]), u = cl(ee / dp, 0, 1), rr = RR[y] - 3 * u, r = round(rr);\n        skyAt(P, K, (x - 32) * (0.4 + r / 40) + 32 + ox + k * 1.5, r, col);\n        const gust = cl((c[((floor(y * 0.3) + 17) & 31) * 128 + (floor(x * 0.5 + ox * 1.6) & 127)] - 0.55) * 5, 0, 1), back = dp > 4 ? 0.5 * exp(-ee / 0.9) : 0;\n        // Ripples run out from the wall when water spills in from above.\n        const fi = I[k + 4], rip = fi > 0.01 ? fi * (0.5 + 0.5 * sin(ee * 1.7 - (P.surge - (n - k - 1) * LAG) * 9)) * 0.5 : 0;\n        // The sun's own path down the paddies that hold its height of sky.\n        const gl = sunUp && abs(x - sx) \u003c 7 ? sunUp * exp(-(((x - sx) / 2.2) ** 2) - ((rr - rs) / 1.3) ** 2) * (1 - 0.6 * gust) * (0.75 + 0.25 * sin(x * 2.3 + y * 1.7 + t * 6)) : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(col[j] * 0.88, sk[45 + j] * 0.55, 0.5 * gust), S[1 + j] * L[j], back * (1 - fi)) + MUD[j] * L[j] + fo[j] * rip + K[7 + j] * gl;\n        // Rice: seedlings in rows along the contour, then a closed crop.\n        const ra = max((x + k) % 2 === 0 && floor(ee) % 2 === 0 ? rice1 : 0, rice2);\n        if (ra > 0) {\n          const v = (floor(ee) & 1 ? 1 : 0.84) * (0.9 + 0.2 * hash(x, y * 7 + k)) * (1 + 0.3 * cl((gust - 0.1) * 2, 0, 1)), isCut = (k * 7 + 23) % 10 \u003c cut * 3.5;\n          for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], (isCut ? STUB[j] * (x % 3 ? 1 : 0.7) : S[7 + j]) * L[j] * v, ra);\n        }\n      }\n      // The far steps fade into the haze.\n      const hz = HZ[k + 3];\n      for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], sk[72 + j] * 0.9, hz);\n    }\n    f[o] = col[0];\n    f[o + 1] = col[1];\n    f[o + 2] = col[2];\n  }\n  // The village under the forest, the bunds' outlets, the farmers.\n  village(P, L0, night, amb);\n  streams(P, fo, I);\n  walkers(P, L0, s, sk);\n  egrets(P, L0, 1 - sm(0.3, 0.6, s));\n  // Mist: a bank in the valley behind the ridge and a thinner one over the steps.\n  const mt = P.mt, y1 = 28 + 4 * sin(mt * 0.4), y2 = 66 + 22 * sin(mt * 0.2 + 1), mc = [0, 1, 2].map((j) => mix(sk[93 + j], 250, 0.55) * (0.7 + 0.3 * amb));\n  for (let y = 0; y \u003c H; y++) {\n    const w1 = mist * 0.9 * exp(-(((y - y1) / 6) ** 2)), w2 = mist * 0.45 * exp(-(((y - y2) / 7) ** 2));\n    if (w1 + w2 \u003c 0.01) continue;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      const dm = min(0.9, ((cls[i] \u003c WOOD ? w1 : 0) + w2) * (0.4 + 0.6 * vn(x * 0.08 + mt * 0.3, y * 0.2)));\n      for (let j = 0; j \u003c 3; j++) f[i * 3 + j] = mix(f[i * 3 + j], mc[j], dm);\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","layer":{"id":"layer-rice-terraces","type":"code","name":"rice-terraces","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rice Terraces\n// Family:  farm\n// Idea:    Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Hani rice terraces of Yuanyang and the terraces of Banaue\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1\n//\n// Knob 1: Season. At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble.\n// Knob 2: Speed. At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower.\n// Knob 3: Terraces. How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water.\n// Knob 4: Hour. Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door.\n// Buttons: K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Terrace 0 sits just under the panel, the last one at the ridge. The sky's\n// horizon row, and the classes a LED can belong to.\nconst [YB, YT, YH] = [134, 38, 34];\nconst [SKY, FAR, NEAR, WOOD, WATER, WALL, RIM] = [0, 1, 2, 3, 4, 5, 6];\n// The row of the sky (0 the zenith, 31 the horizon) that the water on each\n// panel row holds: low sky in the far paddies, the sky overhead in the near ones.\nconst RR = F32(H).map((v, y) => 26 - 20 * cl((y - 36) / 92, 0, 1) ** 0.9);\nconst FOAM = [220, 236, 250], LAG = 0.22, AT = [0.82, 0.88, 1], MUD = [7, 5.6, 4.4], STUB = [150, 120, 70];\n\n// Light by the hour: sky at the zenith, sky at the horizon, sunlit cloud,\n// then ambient and direct light and how much mist lies in the valley.\nconst HOURS = [\n  [0, 14, 22, 70, 150, 100, 150, 255, 150, 140, 0.3, 0.12, 1],\n  [0.07, 34, 64, 150, 255, 176, 110, 255, 200, 150, 0.5, 0.55, 0.95],\n  [0.25, 40, 100, 200, 190, 215, 235, 255, 245, 225, 0.7, 0.6, 0.4],\n  [0.5, 36, 96, 206, 170, 205, 240, 255, 255, 250, 0.74, 0.66, 0.15],\n  [0.72, 40, 80, 180, 250, 200, 130, 255, 215, 150, 0.64, 0.56, 0.2],\n  [0.86, 40, 36, 100, 255, 120, 70, 255, 140, 90, 0.42, 0.36, 0.4],\n  [1, 6, 8, 28, 40, 36, 70, 60, 60, 90, 0.16, 0, 0.6],\n];\n// The season: earth wall, bund rim, rice. Flooded, planted, green, ripening, cut.\nconst SEASONS = [\n  [0, 66, 48, 36, 206, 184, 150, 120, 200, 70],\n  [0.35, 60, 74, 40, 150, 196, 96, 110, 204, 60],\n  [0.65, 42, 84, 34, 110, 176, 64, 46, 156, 40],\n  [0.85, 80, 84, 40, 186, 176, 84, 184, 184, 50],\n  [1, 96, 76, 44, 224, 184, 96, 244, 178, 40],\n];\nfunction key(T, u) {\n  let i = 0;\n  while (i \u003c T.length - 2 && u > T[i + 1][0]) i++;\n  const a = T[i], b = T[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ox: 0, mt: 0, n: 0, surge: 99, sk: F32(32 * 3), cl: F32(128 * 32), f: F32(N * 3),\n    cls: new Uint8Array(N), kk: new Int8Array(N), e: F32(N), dep: F32(N), tx: F32(N), walk: [[10 + rnd() * 44, 1], [10 + rnd() * 44, -1]],\n  });\n  P.ox = rnd() * 128;\n  // Egrets: where each stands (column, how far up the steps), and how long it waits.\n  P.birds = [0, 1, 2].map(() => ({ x: 6 + rnd() * 52, kf: 0.05 + rnd() * 0.6, w: 1 + rnd() * 8, p: -1 }));\n  // Cloud noise, 128 columns that wrap and 32 rows from the zenith down.\n  for (let i = 0; i \u003c 128 * 32; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.06, y * 0.22) + 0.3 * vn(X * 0.15, y * 0.5 + 9) + 0.15 * vn(X * 0.4, y + 3);\n    P.cl[i] = mix(f(x), f(x - 128), x / 128);\n  }\n  for (let i = 0; i \u003c N; i++) P.tx[i] = vn((i & 63) * 0.5, (i >> 6) * 0.6);\n}\n\n// The terraces for n steps. A level u climbs the panel in steps that shrink\n// with distance, bent by slow noise into spurs and gullies; each whole value\n// of u is a bund. For each LED: which terrace, and whether it is water, the\n// earth wall under a bund, or the bund's lit rim.\nfunction build(P, n) {\n  const q = 0.28 ** (1 / n), L = -log(q), b0 = ((YB - YT) * L) / (1 - q ** n);\n  const V = (y) => ((y = 1 - ((YB - y) * L) / b0), y > 1e-4 ? log(y) / -L : 99);\n  const { cls, kk, e, dep } = P, u = F32(H + 20), yc = F32(n + 6);\n  const put = (x, y, k, i = y * W + x) => y >= 0 && y \u003c H && cls[i] >= WATER && ((cls[i] = RIM), (kk[i] = k));\n  P.lip = F32((n + 2) * W);\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    // A spur comes down left of centre and a gully cuts in on the right.\n    const sp = 1.3 * exp(-(((x - 24) / 13) ** 2)) - 1 * exp(-(((x - 55) / 9) ** 2));\n    for (let y = H + 19, m = -9; y >= 0; y--) {\n      const v0 = V(y), xs = (x - 32) / (q ** v0) ** 0.4 + 40;\n      const v = v0 + sp + 1.2 * (vn(xs * 0.035, v0 * 0.07) * 2 - 1 + 0.4 * (vn(xs * 0.085 + 7, v0 * 0.15 + 5) * 2 - 1));\n      u[y] = m = max(m, v);\n    }\n    // Where each bund crosses this column, to a fraction of a LED.\n    yc.fill(H + 40);\n    for (let y = H + 18; y >= 0; y--) for (let k = max(-3, floor(u[y + 1]) + 1); k \u003c= min(n, u[y]); k++) yc[k + 3] = y + (u[y] - k) / max(1e-3, u[y] - u[y + 1]);\n    for (let k = 0; k \u003c= n; k++) P.lip[k * W + x] = yc[k + 3];\n    let y = H - 1;\n    for (; y >= 0 && u[y] \u003c n; y--) {\n      const k = max(-3, floor(u[y])), lip = yc[k + 4], bp = yc[k + 3] \u003c H + 40 ? yc[k + 3] - lip : b0, d = y - lip, rh = cl(0.22 * bp - 0.6, 0, 3.5), i = y * W + x;\n      if (d \u003c 1) (cls[i] = RIM), (kk[i] = k + 1);\n      else if (d \u003c 1 + rh) (cls[i] = WALL), (kk[i] = k + 1), (e[i] = (d - 1) / rh);\n      else (cls[i] = WATER), (kk[i] = k), (e[i] = d - 1 - rh), (dep[i] = bp - 1 - rh);\n    }\n    P.ridge[x] = y;\n    const top = y - 5 - 3 * vn(x * 0.35, 4) - abs(sin(x * 0.9)) * 1.5;\n    for (; y >= 0; y--) {\n      const i = y * W + x;\n      cls[i] = y > top ? WOOD : y >= 22 + 4 * sin(0.06 * x + 0.5) + 2.5 * sin(0.17 * x + 2) ? NEAR : y >= 15 + 5 * sin(0.045 * x + 2.4) + 2 * sin(0.13 * x + 1) ? FAR : SKY;\n    }\n  }\n  // Close the rim where a bund steps a row or more from one column to the next.\n  for (let k = 1; k \u003c= n; k++)\n    for (let x = 0; x \u003c W - 1; x++) {\n      let a = ceil(P.lip[k * W + x]), b = ceil(P.lip[k * W + x + 1]), xa = x, xb = x + 1;\n      if (a > b) [a, b, xa, xb] = [b, a, xb, xa];\n      const m = floor((a + b) / 2);\n      for (let y = a + 1; y \u003c b; y++) put(y \u003c= m ? xa : xb, y, k);\n      if (b > a) put(xb, m, k);\n    }\n  // How bright each rim is: faint where the steps are thin and far, and\n  // brighter where the bund turns to face the light.\n  const lp = (k, x) => P.lip[k * W + cl(x, 0, W - 1)];\n  for (let i = 0; i \u003c N; i++)\n    if (cls[i] === RIM) {\n      const k = kk[i], x = i & 63;\n      e[i] = k > 0 ? cl((lp(k - 1, x) - lp(k, x) - 2) / 7, 0.2, 1) : 1;\n      dep[i] = k >= 0 ? lp(k, x + 1) - lp(k, x - 1) : 0;\n    }\n  for (P.kw = 1; P.lip[P.kw * W + 32] > 117; P.kw++);\n  P.n = n;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2);\n  const n = round(cl(k[2], 12, 24));\n  if (n !== P.n) build(P, n);\n  P.s = cl(k[0], 0, 1);\n  P.h = cl(k[3], 0, 1);\n  P.t += d;\n  P.ox += 5 * d;\n  P.mt += d;\n  P.surge += d;\n  if (input.btnPressed && input.btnPressed[0]) P.surge = 0;\n  // The ploughing team and the farmer up on the high bund walk to the end and turn.\n  for (const w of P.walk) {\n    w[0] += w[1] * 2.2 * d;\n    if (w[0] > 56 || w[0] \u003c 6) w[1] = -w[1];\n  }\n  // An egret waits, then flies to another paddy in a low arc.\n  for (const b of P.birds)\n    if (b.p >= 0) {\n      if ((b.p += d / 1.8) >= 1) Object.assign(b, { p: -1, x: b.tx, kf: b.tk, w: 4 + rnd() * 9 });\n    } else if ((b.w -= d) \u003c= 0) Object.assign(b, { p: 0, tx: 6 + rnd() * 52, tk: 0.05 + rnd() * 0.6, y0: egY(P, b.x, b.kf) });\n}\n\n// Where an egret stands: a little behind the bund of its terrace.\nconst egY = (P, x, kf) => P.lip[max(1, round(kf * P.n)) * W + round(cl(x, 0, 63))] - 2;\nfunction egrets(P, L, wet) {\n  const c = lit([250, 248, 240], L);\n  for (const b of P.birds) {\n    if (b.p \u003c 0) {\n      const x = b.x, y = egY(P, x, b.kf);\n      put(x, y, c), put(x, y - 1, c), put(x + 1, y - 2, c), put(x, y + 1, c, 0.35 * wet), put(x, y + 2, c, 0.25 * wet);\n    } else {\n      const y1 = egY(P, b.tx, b.tk), x = mix(b.x, b.tx, b.p), y = mix(b.y0, y1, b.p) - 14 * sin(PI * b.p), up = floor(P.t * 7) & 1;\n      put(x, y, c), put(x - 1, y - up, c), put(x + 1, y - up, c), put(x - 2, y - 2 * up, c, 0.7), put(x + 2, y - 2 * up, c, 0.7);\n    }\n  }\n}\n\n// The sky at table x and row r (0 the zenith, 31 the horizon), with its clouds.\nfunction skyAt(P, K, xx, r, out) {\n  const s = P.sk, c = P.cl, xi = floor(xx), fx = xx - xi, i = r * 128;\n  const v = mix(c[i + (xi & 127)], c[i + ((xi + 1) & 127)], fx), cd = cl((v - 0.46) * 8, 0, 1) * (0.4 + 0.6 * sm(0, 6, 31 - r));\n  const lit = 0.3 + 0.7 * cd;\n  for (let j = 0; j \u003c 3; j++) out[j] = mix(s[r * 3 + j], mix(mix(K[1 + j], K[4 + j], 0.5) * 0.75, K[7 + j], lit), cd * 0.94);\n  return cd;\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], a);\n}\nconst lit = (c, L) => c.map((v, j) => v * L[j]);\n\n// Hani houses: earth walls under tall thatch, lamps in the doors at night,\n// smoke from the hearth of the middle one.\nconst HOUSE = [\"..TTT..\", \".TTTTT.\", \"TTTTTTT\", \".WWDWW.\", \".WWDWW.\"];\nfunction village(P, L, night, amb) {\n  const th = lit([176, 128, 70], L), wa = lit([186, 150, 112], L), dr = night > 0.3 ? [255 * night, 170 * night, 80 * night] : [40, 30, 26];\n  for (const [hx, dy] of [[5, 3], [13, 5], [21, 2]]) {\n    const by = P.ridge[hx] + dy;\n    for (let i = -4; i \u003c= 4; i++) put(hx + i, by + 1, lit([70, 56, 40], L));\n    HOUSE.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && put(hx + i - 3, by - 4 + j, ch === \"T\" ? th.map((v) => v * (j === 2 ? 0.8 : 1)) : ch === \"W\" ? wa : dr)));\n  }\n  const by = P.ridge[13] + 1;\n  for (let j = 0; j \u003c 14; j++) put(14 + j * 0.3 + sin(P.t * 1.3 - j * 0.6) * 0.7, by - 3 - j, [220, 216, 220].map((v) => v * (0.4 + 0.6 * amb)), 0.6 * (1 - j / 14));\n}\n\n// Each bund lets a thread of water down its wall through a gap; when the\n// sluice is open the thread runs wide and white.\nfunction streams(P, fo, I) {\n  for (let k = 1; k \u003c P.n; k++) {\n    const x = 5 + floor(hash(k, 11) * 54), y0 = ceil(P.lip[k * W + x]), f = I[k + 3], w = f > 0.3 ? 1 : 0;\n    for (let y = y0; y \u003c y0 + 5 && y \u003c H; y++) {\n      const C = P.cls[y * W + x];\n      if (y > y0 && C === WATER) {\n        put(x, y, fo, 0.35);\n        break;\n      }\n      const st = (y - floor(P.t * 9)) % 3 === 0 ? 1 : 0.7;\n      for (let i = -w; i \u003c= w; i++) put(x + i, y, fo.map((v) => v * st), 0.85);\n    }\n  }\n}\n\n// A farmer ploughs behind his buffalo in a near paddy, both mirrored in the\n// water, and another farmer walks a high bund.\nconst BUFF = [\"......hh\", \".BBBBBBH\", \"BBBBBBBHH\", \".BBBBBB..\"];\nfunction walkers(P, L, s, sk) {\n  const near = P.walk[0], far = P.walk[1], dir = near[1], k = P.kw, wet = 1 - sm(0.3, 0.6, s);\n  const feet = (x) => P.lip[k * W + round(cl(x, 0, 63))] - 1 - 3 * wet;\n  const fig = (x, y, c) => (put(x, y, c), wet > 0 && put(x, 2 * feet(near[0]) - y + 1, c.map((v, j) => v * 0.6 + sk[60 + j] * 0.2), 0.6 * wet));\n  const bx = near[0], by = feet(bx), fx = bx - 5 * dir;\n  // The furrow of churned water behind them.\n  for (let i = 4; i \u003c 20; i++) put(fx - i * dir, feet(fx - i * dir), [120, 100, 80].map((v, j) => v * L[j]), 0.5 * wet * (1 - i / 20));\n  BUFF.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && fig(bx + (dir > 0 ? i - 4 : 4 - i), by - 3 + j, ch === \"h\" ? lit([230, 220, 200], L) : lit(j > 1 ? [30, 27, 30] : [70, 62, 62], L))));\n  const hat = lit([240, 210, 136], L), body = lit([30, 34, 70], L);\n  for (const [i, j, c] of [[0, -4, hat], [-1, -3, hat], [0, -3, hat], [1, -3, hat], [0, -2, body], [0, -1, body], [-dir, -1, body], [0, 0, body]]) fig(fx + i, by + j, c);\n  // The plough's handle between them.\n  fig(fx + dir, by - 1, [70, 56, 44]), fig(fx + 2 * dir, by, [70, 56, 44]);\n  const k2 = k + round((P.n - k) * 0.55), gx = far[0], gy = P.lip[k2 * W + round(gx)] - 1;\n  put(gx, gy - 1, hat), put(gx, gy, body);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const K = key(HOURS, P.h), S = key(SEASONS, P.s), f = (F = P.f), sk = P.sk, n = P.n, t = P.t, s = P.s, cls = P.cls, tx = P.tx;\n  const [amb, dir, mist] = [K[10], K[11], K[12]], night = sm(0.86, 1, P.h);\n  for (let r = 0; r \u003c 32; r++) {\n    const e = sm(0, 0.65, 1 - r / 31) ** 0.8;\n    for (let j = 0; j \u003c 3; j++) sk[r * 3 + j] = mix(K[4 + j], K[1 + j], e);\n  }\n  // The sun along its day from right to left.\n  const a = cl(P.h / 0.86, 0, 1) * PI, sx = 32 + 26 * cos(a), sy = 16 - 80 * sin(a) ** 1.5, side = sx > 32 ? 1 : -1, rs = 31 - 13 * (1 - sy / YH), sunUp = (1 - sm(11, 15, sy)) * (1 - night);\n  const rice1 = sm(0.1, 0.3, s), rice2 = sm(0.3, 0.6, s), cut = sm(0.88, 1, s);\n  const c = P.cl, ox = P.ox, col = [0, 0, 0], L = [0, 0, 0], L0 = AT.map((v, j) => amb * v + (dir * K[7 + j]) / 255);\n  const sh0 = (0.5 + 0.5 * sm(0, 0.2, P.h)) * (1 - night) * 0.8 * dir;\n  const far = AT.map((v, j) => K[1 + j] * 0.9 + 16), near = [30, 44, 70].map((v) => v * (amb + 0.3)), wood = [28, 66, 32].map((v) => v * 1.3);\n  // How hard water is spilling over each bund: the sluice opens at the top and\n  // the overflow runs down one terrace every LAG seconds.\n  const I = F32(n + 8), HZ = F32(n + 8), fo = FOAM.map((v, j) => mix(v, K[7 + j], 0.3) * (0.4 + 0.6 * sm(0.1, 0.5, amb)));\n  for (let k = -3; k \u003c= n + 1; k++) {\n    const tk = P.surge - (n - k) * LAG;\n    HZ[k + 3] = 0.35 * cl(k / n, 0, 1) ** 1.6;\n    I[k + 3] = tk > 0 ? exp(-tk * 0.9) * sm(0, 0.15, tk) : 0;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, C = cls[i];\n    // Cloud shadow on the hillside, sliding across.\n    const shade = cl((c[((floor(y * 0.22) + 3) & 31) * 128 + (floor(x * 0.75 + ox * 1.2 + 40) & 127)] - 0.48) * 4, 0, 1) * sh0;\n    for (let j = 0; j \u003c 3; j++) L[j] = L0[j] - (shade * K[7 + j]) / 255;\n    if (C \u003c WOOD) {\n      const r = cl(round(31 - 13 * (1 - y / YH)), 0, 31), cd = skyAt(P, K, x * 1.3 + ox, r, col);\n      if (C === SKY) {\n        const ds = Math.hypot(x - sx, (y - sy) * 1.1), g = (1 - night) * (0.5 * exp(-ds / 9) * (1 - cd * 0.6) + (ds \u003c 2.6 ? 1 : 0)), st = night > 0.2 && hash(x, y) > 0.985 ? 200 * night : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] += K[7 + j] * g + st;\n      } else for (let j = 0; j \u003c 3; j++) col[j] = (C === FAR ? mix(sk[84 + j], far[j], 0.45) : mix(sk[84 + j], near[j], 0.75)) * (0.9 + 0.1 * tx[i]);\n    } else if (C === WOOD) for (let j = 0; j \u003c 3; j++) col[j] = wood[j] * (0.6 + 0.6 * tx[i]) * L[j];\n    else {\n      const k = P.kk[i], ee = P.e[i], fl = I[k + 3];\n      if (C === WALL) {\n        // Water sheets down the wall when the terrace above overflows.\n        const st = fl > 0.01 ? 0.85 * fl : 0, sv = st ? 0.5 + 0.5 * sin(y * 1.9 - P.surge * 14 + x * 1.3) ** 2 : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(S[1 + j] * L[j] * (1.05 - 0.4 * ee), fo[j] * sv, st);\n      } else if (C === RIM) {\n        const ra = ee * (0.55 + 0.45 * cl(0.5 + 0.3 * P.dep[i] * side, 0, 1));\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(S[1 + j] * L[j], S[4 + j] * (L[j] + 0.3) + sk[84 + j] * 0.25, ra), fo[j], fl);\n      } else {\n        // The mirror: the far paddies hold the low sky, the near ones the sky\n        // overhead, and each holds its own wall dark along the back.\n        const dp = max(2, P.dep[i]), u = cl(ee / dp, 0, 1), rr = RR[y] - 3 * u, r = round(rr);\n        skyAt(P, K, (x - 32) * (0.4 + r / 40) + 32 + ox + k * 1.5, r, col);\n        const gust = cl((c[((floor(y * 0.3) + 17) & 31) * 128 + (floor(x * 0.5 + ox * 1.6) & 127)] - 0.55) * 5, 0, 1), back = dp > 4 ? 0.5 * exp(-ee / 0.9) : 0;\n        // Ripples run out from the wall when water spills in from above.\n        const fi = I[k + 4], rip = fi > 0.01 ? fi * (0.5 + 0.5 * sin(ee * 1.7 - (P.surge - (n - k - 1) * LAG) * 9)) * 0.5 : 0;\n        // The sun's own path down the paddies that hold its height of sky.\n        const gl = sunUp && abs(x - sx) \u003c 7 ? sunUp * exp(-(((x - sx) / 2.2) ** 2) - ((rr - rs) / 1.3) ** 2) * (1 - 0.6 * gust) * (0.75 + 0.25 * sin(x * 2.3 + y * 1.7 + t * 6)) : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(col[j] * 0.88, sk[45 + j] * 0.55, 0.5 * gust), S[1 + j] * L[j], back * (1 - fi)) + MUD[j] * L[j] + fo[j] * rip + K[7 + j] * gl;\n        // Rice: seedlings in rows along the contour, then a closed crop.\n        const ra = max((x + k) % 2 === 0 && floor(ee) % 2 === 0 ? rice1 : 0, rice2);\n        if (ra > 0) {\n          const v = (floor(ee) & 1 ? 1 : 0.84) * (0.9 + 0.2 * hash(x, y * 7 + k)) * (1 + 0.3 * cl((gust - 0.1) * 2, 0, 1)), isCut = (k * 7 + 23) % 10 \u003c cut * 3.5;\n          for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], (isCut ? STUB[j] * (x % 3 ? 1 : 0.7) : S[7 + j]) * L[j] * v, ra);\n        }\n      }\n      // The far steps fade into the haze.\n      const hz = HZ[k + 3];\n      for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], sk[72 + j] * 0.9, hz);\n    }\n    f[o] = col[0];\n    f[o + 1] = col[1];\n    f[o + 2] = col[2];\n  }\n  // The village under the forest, the bunds' outlets, the farmers.\n  village(P, L0, night, amb);\n  streams(P, fo, I);\n  walkers(P, L0, s, sk);\n  egrets(P, L0, 1 - sm(0.3, 0.6, s));\n  // Mist: a bank in the valley behind the ridge and a thinner one over the steps.\n  const mt = P.mt, y1 = 28 + 4 * sin(mt * 0.4), y2 = 66 + 22 * sin(mt * 0.2 + 1), mc = [0, 1, 2].map((j) => mix(sk[93 + j], 250, 0.55) * (0.7 + 0.3 * amb));\n  for (let y = 0; y \u003c H; y++) {\n    const w1 = mist * 0.9 * exp(-(((y - y1) / 6) ** 2)), w2 = mist * 0.45 * exp(-(((y - y2) / 7) ** 2));\n    if (w1 + w2 \u003c 0.01) continue;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      const dm = min(0.9, ((cls[i] \u003c WOOD ? w1 : 0) + w2) * (0.4 + 0.6 * vn(x * 0.08 + mt * 0.3, y * 0.2)));\n      for (let j = 0; j \u003c 3; j++) f[i * 3 + j] = mix(f[i * 3 + j], mc[j], dm);\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower."},{"name":"Terraces","min":12,"max":24,"about":"How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water."},{"name":"Hour","min":0,"max":1,"about":"Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door."}],"start":[0,2,12,0.06],"measures":{"motion":0.0809,"detail":0.0942,"edges":0.423,"complexity":2.2579,"coverage":1,"colour":0.1716,"drift":0.0563},"knobResponse":[0.1151,0.0688,0.1253,0.4152]},{"slug":"ripple-tank","title":"Ripple Tank","family":"sim","round":1,"note":"빗방울이 떨어진 자리마다 고리가 퍼지고 벽에 부딪혀 되돌아와 서로 겹쳐요.","idea":"Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-ripple-tank","type":"code","name":"ripple-tank","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the crests round the colour wheel; the troughs stay deep blue."},{"name":"Rain","min":0.5,"max":6,"about":"Drops per second."},{"name":"Damping","min":0,"max":1,"about":"How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far."},{"name":"Drop","min":2.5,"max":6,"about":"Size of each drop; small drops throw fine rings, big ones a slow swell."}],"start":[0,2,0,2.5],"measures":{"motion":4.7512,"detail":0.0907,"edges":0.3794,"complexity":1.2184,"coverage":0.4445,"colour":0.2076,"drift":0.234},"knobResponse":[0.0799,0.2629,0.1082,0.1339]},{"slug":"rule-scroll","title":"Rule Scroll","family":"automata","round":1,"note":"64칸 한 줄이 이웃을 보고 다음 줄을 써 내려가요. 8비트 숫자 하나가 삼각형이 될지 잡음이 될지 정해요.","idea":"A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.","buttons":"K1 tap starts again from a single cell.","code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","layer":{"id":"layer-rule-scroll","type":"code","name":"rule-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from 3 to 24, one row each."},{"name":"Rule","min":0,"max":11,"about":"Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126."},{"name":"Noise","min":0,"max":1,"about":"Random flips each generation, which show as white sparks and break ordered rules open."}],"start":[0,2,0,0.06],"measures":{"motion":3.3184,"detail":0.3747,"edges":0.8011,"complexity":0.6155,"coverage":0.494,"colour":0.4373,"drift":0.0401},"knobResponse":[0.2576,0.1939,0.2319,0.0376]},{"slug":"sandpile","title":"Sandpile","family":"automata","round":21,"note":"한 칸에 모래알이 넷 모이면 이웃 넷에 하나씩 넘기는 쟁반에 모래가 한 줌씩 떨어져요. 사태가 떨어진 자리에서 빛나는 고리로 번지며 네 색 레이스를 다시 쓰고, 쟁반이 다 차면 기울어 모래를 쏟아요.","idea":"Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.","buttons":"K1 tap tips the tray now.","code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","layer":{"id":"layer-sandpile","type":"code","name":"sandpile","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon."},{"name":"Speed","min":0.2,"max":3,"about":"Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile."},{"name":"Sources","min":1,"max":5,"about":"How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre."},{"name":"Scatter","min":0,"max":1,"about":"How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray."}],"start":[0,2,1,0.06],"measures":{"motion":0.6394,"detail":0.335,"edges":0.8978,"complexity":0.6311,"coverage":0.8294,"colour":0.2844,"drift":0.1509},"knobResponse":[0.2234,0.3094,0.3442,0.2665]},{"slug":"satin-fold","title":"Satin Fold","family":"cosmetic","round":30,"note":"한 점에 잡힌 연한 새틴이 부채꼴 주름으로 흔들리고, 광택이 주름을 따라 긴 줄로 서요. 금색 실 하나가 천을 건너며 주름마다 휘어요.","idea":"A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.","buttons":"K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Satin Fold\n// Family:  cosmetic\n// Idea:    A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after satin weave sheen and gold-foil packaging; the sheen is a fibre highlight (James Kajiya and Timothy Kay, 1989) with an anisotropic lobe (Gregory Ward, 1992)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1\n//\n// Knob 1: Hue. The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac.\n// Knob 2: Speed. How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half.\n// Knob 3: Folds. One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5.\n// Knob 4: Gold. The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon.\n// Buttons: K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.\n\nconst W = 64, H = 128;\nconst { sin, cos, sqrt, exp, floor, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The first fold family is a fan: the cloth is held at a point 160 LEDs\n// above the panel's middle and a little left, and 22 folds a radian hang from\n// it, tight at the top of the panel and wide at the bottom.\nconst PX = -14, PY = -160, FAN = 22, FAN_A = 6.5, RC = 160;\n// The others are straight waves: crest angle in degrees, wavelength in LEDs,\n// height in LEDs, bend of the crest, travel in radians a second at Speed 1,\n// swell phase. The last is pressed: its profile has sharp valleys. The first\n// row stands for the fan, which reads only its travel and phase from it.\nconst FOLDS = [\n  [0, 1, 0, 0, 0.42, 0.0],\n  [58, 46, 4.2, -0.004, -0.33, 2.1],\n  [100, 30, 2.6, 0.007, 0.55, 4.0],\n  [128, 24, 1.8, -0.008, -0.71, 1.2],\n  [76, 28, 1.4, 0.004, 0.62, 3.3],\n].map(([ang, lam, A, c, w, ph]) => {\n  const a = (ang * PI) / 180;\n  return { tx: cos(a), ty: sin(a), nx: -sin(a), ny: cos(a), k: (2 * PI) / lam, A, c, w, ph };\n});\n\n// Light from the left, a little above and in front; the eye straight on.\n// y runs down.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.6, -0.35, 0.72);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The floats of the satin weave run nearly across the panel, rising a little\n// to the right, so they cross the hanging folds and catch the light only\n// where they tilt square to the half vector.\nconst FX = 0.985, FY = -0.17;\n// The gold line in the cloth's own coordinates: through the middle, going\n// down to the right, bowed a little.\nconst [GX, GY] = (() => {\n  const l = Math.hypot(0.42, 1);\n  return [0.42 / l, 1 / l];\n})();\nconst MX = -GY, MY = GX;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The satin's ramp from the deepest hollow (0) to the brightest sheen (1):\n// the hue deep and saturated in the hollows, pale over the body, near white\n// in the streaks.\nconst RAMP = 256;\nfunction ramp(P) {\n  const hue = P.hue + 0.975;\n  for (let i = 0; i \u003c RAMP; i++) {\n    const s = i / (RAMP - 1);\n    let sat, val;\n    if (s \u003c 0.5) {\n      const u = s / 0.5;\n      sat = 0.46 + (0.18 - 0.46) * u;\n      val = 0.5 + (0.8 - 0.5) * u;\n    } else {\n      const u = (s - 0.5) / 0.5;\n      sat = 0.18 + (0.04 - 0.18) * u;\n      val = 0.8 + (0.97 - 0.8) * u;\n    }\n    hsv(hue - 0.015 * (1 - s), sat, val, P.lut, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = {\n    t: 0, clock: 0, hue: 0, speed: 2, folds: 1, gold: 0.06, gust: -1,\n    lut: new Float32Array(RAMP * 3), lutHue: NaN, cw: new Float32Array(W), cd: new Float32Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.folds = cl(k[2], 1, 5);\n  P.gold = cl(k[3], 0, 1);\n  P.t += d * P.speed;\n  P.clock += d;\n  if (P.gust >= 0) {\n    P.gust += d / 2.5;\n    if (P.gust >= 1) P.gust = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) P.gust = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) ramp(P);\n  const T = P.t, F = P.folds, lut = P.lut;\n  // Each family fades in over one step of Folds, and the whole cloth gets\n  // deeper as it does.\n  const depth = 0.75 + 0.18 * (F - 1);\n  const act = [];\n  for (let i = 0; i \u003c FOLDS.length; i++) {\n    const f = FOLDS[i], wgt = sm(0, 1, F - i);\n    if (wgt \u003c= 0) continue;\n    const swell = 0.72 + 0.28 * sin(0.37 * T + f.ph);\n    act.push({ ...f, A: (i ? f.A * swell : FAN_A) * wgt * depth, phase: f.w * T + f.ph, press: i === 4 });\n  }\n  const na = act.length, fan = act[0];\n  let tot = 0;\n  for (const f of act) tot += f.A;\n  // The gust: one ridge across the sheet that runs from the bottom up.\n  let gA = 0, gy0 = 0;\n  if (P.gust >= 0) {\n    gA = 5.5 * sin(PI * P.gust);\n    gy0 = 80 - 190 * P.gust;\n  }\n  const wa = 3.2;\n  // The panel sees the cloth a little from below, so a line on it shifts\n  // with the height of the cloth under it: 0.65 LED a LED of height at one\n  // fold family, less on the deep drapes.\n  const lean = 0.65 / (1 + 0.15 * (F - 1));\n  const g = P.gold, gAlpha = sm(0, 0.04, g), hw = 0.6 + 6 * g, sw = 1 + 2.5 * g;\n  const gf = 0.11 + 0.11 * g, gT = P.clock * (0.6 + 0.4 * P.speed);\n  // The warp's sideways part, one value a column.\n  const CW = P.cw, CD = P.cd;\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - 31.5) * 0.07 - T * 0.17 + 1.3;\n    CW[x] = wa * sin(u);\n    CD[x] = wa * 0.07 * cos(u);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const py = y - 63.5;\n    const s1 = sin(py * 0.045 + T * 0.23), c1 = cos(py * 0.045 + T * 0.23);\n    const dxdy = wa * 0.045 * c1;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5;\n      const dydx = CD[x];\n      const qx = px + wa * s1, qy = py + CW[x];\n      let h = 0, gx = 0, gy = 0;\n      {\n        // The fan: the fold phase goes with the angle round the point it\n        // hangs from, and leans with the distance. Its height grows as the\n        // square root of the distance, and a swell runs down it.\n        const dx = qx - PX, dy = qy - PY, r2 = dx * dx + dy * dy, r = sqrt(r2);\n        const th = FAN * Math.atan2(dx, dy) + 0.025 * r - fan.phase;\n        const sv = 0.045 * r - 0.5 * T, ms = 0.75 + 0.25 * sin(sv), rr = sqrt(r / RC);\n        const A = fan.A * rr * ms, dA = A / (2 * r) + fan.A * rr * 0.01125 * cos(sv);\n        const sn = sin(th), cs = cos(th);\n        h += A * sn;\n        const gr = dA * sn + A * cs * 0.025, ga = (A * cs * FAN) / r2;\n        gx += (gr * dx) / r + ga * dy;\n        gy += (gr * dy) / r - ga * dx;\n      }\n      for (let j = 1; j \u003c na; j++) {\n        const f = act[j];\n        const a = qx * f.tx + qy * f.ty, s = qx * f.nx + qy * f.ny + f.c * a * a;\n        const th = f.k * s - f.phase;\n        let v, dv;\n        if (f.press) {\n          // sqrt(sin^2 + e^2): round crests, sharp valleys.\n          const sn = sin(th), cs = cos(th), r = sqrt(sn * sn + 0.04);\n          v = f.A * (r - 0.6);\n          dv = (f.A * f.k * sn * cs) / r;\n        } else {\n          v = f.A * sin(th);\n          dv = f.A * f.k * cos(th);\n        }\n        h += v;\n        const ex = f.nx + 2 * f.c * a * f.tx, ey = f.ny + 2 * f.c * a * f.ty;\n        gx += dv * ex;\n        gy += dv * ey;\n      }\n      if (gA > 0) {\n        const e = (qy - gy0 - 0.006 * qx * qx) / 12, b = gA * exp(-e * e), d = (-2 * e * b) / 12;\n        h += b;\n        gx += d * -0.012 * qx;\n        gy += d;\n      }\n      // Back from the cloth's coordinates to the panel's.\n      const hx = gx + gy * dydx, hy = gx * dxdy + gy;\n      // Normal and the fibre's tangent on the surface.\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), Nx = -hx * nl, Ny = -hy * nl, Nz = nl;\n      let Tx = FX, Ty = FY, Tz = FX * hx + FY * hy;\n      const tl = 1 / sqrt(Tx * Tx + Ty * Ty + Tz * Tz);\n      (Tx *= tl), (Ty *= tl), (Tz *= tl);\n      const NL = Nx * LX + Ny * LY + Nz * LZ;\n      const dif = cl((NL + 0.45) / 1.45, 0, 1);\n      // Ward-like lobe: narrow along the fibre, broad across it.\n      const TH = Tx * HX + Ty * HY + Tz * HZ;\n      const Bx = Ny * Tz - Nz * Ty, By = Nz * Tx - Nx * Tz, Bz = Nx * Ty - Ny * Tx;\n      const BH = Bx * HX + By * HY + Bz * HZ;\n      const spec = 0.45 * exp(-(TH * TH) / 0.012 - (BH * BH) / 0.35) + 0.5 * exp(-(TH * TH) / 0.06 - (BH * BH) / 0.6);\n      // The hollows get less of the light, and less of the sheen.\n      const ao = sm(-0.9 * tot, 0.6 * tot, h);\n      const shade = cl(0.05 + 0.7 * dif * (0.4 + 0.6 * ao) + 0.5 * spec * (0.25 + 0.75 * ao), 0, 1);\n      const o = ((shade * (RAMP - 1)) | 0) * 3;\n      let r = lut[o], gg = lut[o + 1], b = lut[o + 2];\n      if (gAlpha > 0) {\n        const al = qx * GX + qy * GY;\n        const vv = qx * MX + qy * MY + 0.0018 * al * al - 4 + lean * h;\n        const ggx = MX + 0.0036 * al * GX, ggy = MY + 0.0036 * al * GY;\n        const vx = ggx + ggy * dydx + lean * hx, vy = ggx * dxdy + ggy + lean * hy;\n        // Where a fold turns the line back on itself it passes behind the\n        // fold, so it fades out there instead of spreading into a blot.\n        const gl = sqrt(vx * vx + vy * vy), sd = vv / Math.max(0.3, gl), dist = Math.abs(sd), seen = gAlpha * sm(0.3, 0.7, gl);\n        // The line stands a little off the cloth and shades it on the side\n        // away from the light.\n        if (sd \u003c 0) {\n          const sh = 1 - 0.3 * seen * sm(hw + 0.5 + sw, hw - 0.5, dist);\n          (r *= sh), (gg *= sh), (b *= sh);\n        }\n        const cov = cl(hw + 0.5 - dist, 0, 1) * seen;\n        if (cov > 0) {\n          const NH = Nx * HX + Ny * HY + Nz * HZ;\n          const gs = NH > 0.95 ? ((NH - 0.95) / 0.05) ** 4 : 0;\n          const tw = 0.5 + 0.5 * sin(al * gf - gT * 2.2);\n          const glint = tw ** 24 + gs;\n          const lit = 0.62 + 0.38 * dif, gw = cl(glint, 0, 1);\n          const gr = 252 * lit + (255 - 252 * lit) * gw, ggr = 184 * lit + (246 - 184 * lit) * gw, gb = 58 * lit + (205 - 58 * lit) * gw;\n          r += (gr - r) * cov;\n          gg += (ggr - gg) * cov;\n          b += (gb - b) * cov;\n        }\n      }\n      display.setPixel(x, y, r, gg, b);\n    }\n  }\n}\n","layer":{"id":"layer-satin-fold","type":"code","name":"satin-fold","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Satin Fold\n// Family:  cosmetic\n// Idea:    A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after satin weave sheen and gold-foil packaging; the sheen is a fibre highlight (James Kajiya and Timothy Kay, 1989) with an anisotropic lobe (Gregory Ward, 1992)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1\n//\n// Knob 1: Hue. The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac.\n// Knob 2: Speed. How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half.\n// Knob 3: Folds. One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5.\n// Knob 4: Gold. The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon.\n// Buttons: K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.\n\nconst W = 64, H = 128;\nconst { sin, cos, sqrt, exp, floor, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The first fold family is a fan: the cloth is held at a point 160 LEDs\n// above the panel's middle and a little left, and 22 folds a radian hang from\n// it, tight at the top of the panel and wide at the bottom.\nconst PX = -14, PY = -160, FAN = 22, FAN_A = 6.5, RC = 160;\n// The others are straight waves: crest angle in degrees, wavelength in LEDs,\n// height in LEDs, bend of the crest, travel in radians a second at Speed 1,\n// swell phase. The last is pressed: its profile has sharp valleys. The first\n// row stands for the fan, which reads only its travel and phase from it.\nconst FOLDS = [\n  [0, 1, 0, 0, 0.42, 0.0],\n  [58, 46, 4.2, -0.004, -0.33, 2.1],\n  [100, 30, 2.6, 0.007, 0.55, 4.0],\n  [128, 24, 1.8, -0.008, -0.71, 1.2],\n  [76, 28, 1.4, 0.004, 0.62, 3.3],\n].map(([ang, lam, A, c, w, ph]) => {\n  const a = (ang * PI) / 180;\n  return { tx: cos(a), ty: sin(a), nx: -sin(a), ny: cos(a), k: (2 * PI) / lam, A, c, w, ph };\n});\n\n// Light from the left, a little above and in front; the eye straight on.\n// y runs down.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.6, -0.35, 0.72);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The floats of the satin weave run nearly across the panel, rising a little\n// to the right, so they cross the hanging folds and catch the light only\n// where they tilt square to the half vector.\nconst FX = 0.985, FY = -0.17;\n// The gold line in the cloth's own coordinates: through the middle, going\n// down to the right, bowed a little.\nconst [GX, GY] = (() => {\n  const l = Math.hypot(0.42, 1);\n  return [0.42 / l, 1 / l];\n})();\nconst MX = -GY, MY = GX;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The satin's ramp from the deepest hollow (0) to the brightest sheen (1):\n// the hue deep and saturated in the hollows, pale over the body, near white\n// in the streaks.\nconst RAMP = 256;\nfunction ramp(P) {\n  const hue = P.hue + 0.975;\n  for (let i = 0; i \u003c RAMP; i++) {\n    const s = i / (RAMP - 1);\n    let sat, val;\n    if (s \u003c 0.5) {\n      const u = s / 0.5;\n      sat = 0.46 + (0.18 - 0.46) * u;\n      val = 0.5 + (0.8 - 0.5) * u;\n    } else {\n      const u = (s - 0.5) / 0.5;\n      sat = 0.18 + (0.04 - 0.18) * u;\n      val = 0.8 + (0.97 - 0.8) * u;\n    }\n    hsv(hue - 0.015 * (1 - s), sat, val, P.lut, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = {\n    t: 0, clock: 0, hue: 0, speed: 2, folds: 1, gold: 0.06, gust: -1,\n    lut: new Float32Array(RAMP * 3), lutHue: NaN, cw: new Float32Array(W), cd: new Float32Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.folds = cl(k[2], 1, 5);\n  P.gold = cl(k[3], 0, 1);\n  P.t += d * P.speed;\n  P.clock += d;\n  if (P.gust >= 0) {\n    P.gust += d / 2.5;\n    if (P.gust >= 1) P.gust = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) P.gust = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) ramp(P);\n  const T = P.t, F = P.folds, lut = P.lut;\n  // Each family fades in over one step of Folds, and the whole cloth gets\n  // deeper as it does.\n  const depth = 0.75 + 0.18 * (F - 1);\n  const act = [];\n  for (let i = 0; i \u003c FOLDS.length; i++) {\n    const f = FOLDS[i], wgt = sm(0, 1, F - i);\n    if (wgt \u003c= 0) continue;\n    const swell = 0.72 + 0.28 * sin(0.37 * T + f.ph);\n    act.push({ ...f, A: (i ? f.A * swell : FAN_A) * wgt * depth, phase: f.w * T + f.ph, press: i === 4 });\n  }\n  const na = act.length, fan = act[0];\n  let tot = 0;\n  for (const f of act) tot += f.A;\n  // The gust: one ridge across the sheet that runs from the bottom up.\n  let gA = 0, gy0 = 0;\n  if (P.gust >= 0) {\n    gA = 5.5 * sin(PI * P.gust);\n    gy0 = 80 - 190 * P.gust;\n  }\n  const wa = 3.2;\n  // The panel sees the cloth a little from below, so a line on it shifts\n  // with the height of the cloth under it: 0.65 LED a LED of height at one\n  // fold family, less on the deep drapes.\n  const lean = 0.65 / (1 + 0.15 * (F - 1));\n  const g = P.gold, gAlpha = sm(0, 0.04, g), hw = 0.6 + 6 * g, sw = 1 + 2.5 * g;\n  const gf = 0.11 + 0.11 * g, gT = P.clock * (0.6 + 0.4 * P.speed);\n  // The warp's sideways part, one value a column.\n  const CW = P.cw, CD = P.cd;\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - 31.5) * 0.07 - T * 0.17 + 1.3;\n    CW[x] = wa * sin(u);\n    CD[x] = wa * 0.07 * cos(u);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const py = y - 63.5;\n    const s1 = sin(py * 0.045 + T * 0.23), c1 = cos(py * 0.045 + T * 0.23);\n    const dxdy = wa * 0.045 * c1;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5;\n      const dydx = CD[x];\n      const qx = px + wa * s1, qy = py + CW[x];\n      let h = 0, gx = 0, gy = 0;\n      {\n        // The fan: the fold phase goes with the angle round the point it\n        // hangs from, and leans with the distance. Its height grows as the\n        // square root of the distance, and a swell runs down it.\n        const dx = qx - PX, dy = qy - PY, r2 = dx * dx + dy * dy, r = sqrt(r2);\n        const th = FAN * Math.atan2(dx, dy) + 0.025 * r - fan.phase;\n        const sv = 0.045 * r - 0.5 * T, ms = 0.75 + 0.25 * sin(sv), rr = sqrt(r / RC);\n        const A = fan.A * rr * ms, dA = A / (2 * r) + fan.A * rr * 0.01125 * cos(sv);\n        const sn = sin(th), cs = cos(th);\n        h += A * sn;\n        const gr = dA * sn + A * cs * 0.025, ga = (A * cs * FAN) / r2;\n        gx += (gr * dx) / r + ga * dy;\n        gy += (gr * dy) / r - ga * dx;\n      }\n      for (let j = 1; j \u003c na; j++) {\n        const f = act[j];\n        const a = qx * f.tx + qy * f.ty, s = qx * f.nx + qy * f.ny + f.c * a * a;\n        const th = f.k * s - f.phase;\n        let v, dv;\n        if (f.press) {\n          // sqrt(sin^2 + e^2): round crests, sharp valleys.\n          const sn = sin(th), cs = cos(th), r = sqrt(sn * sn + 0.04);\n          v = f.A * (r - 0.6);\n          dv = (f.A * f.k * sn * cs) / r;\n        } else {\n          v = f.A * sin(th);\n          dv = f.A * f.k * cos(th);\n        }\n        h += v;\n        const ex = f.nx + 2 * f.c * a * f.tx, ey = f.ny + 2 * f.c * a * f.ty;\n        gx += dv * ex;\n        gy += dv * ey;\n      }\n      if (gA > 0) {\n        const e = (qy - gy0 - 0.006 * qx * qx) / 12, b = gA * exp(-e * e), d = (-2 * e * b) / 12;\n        h += b;\n        gx += d * -0.012 * qx;\n        gy += d;\n      }\n      // Back from the cloth's coordinates to the panel's.\n      const hx = gx + gy * dydx, hy = gx * dxdy + gy;\n      // Normal and the fibre's tangent on the surface.\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), Nx = -hx * nl, Ny = -hy * nl, Nz = nl;\n      let Tx = FX, Ty = FY, Tz = FX * hx + FY * hy;\n      const tl = 1 / sqrt(Tx * Tx + Ty * Ty + Tz * Tz);\n      (Tx *= tl), (Ty *= tl), (Tz *= tl);\n      const NL = Nx * LX + Ny * LY + Nz * LZ;\n      const dif = cl((NL + 0.45) / 1.45, 0, 1);\n      // Ward-like lobe: narrow along the fibre, broad across it.\n      const TH = Tx * HX + Ty * HY + Tz * HZ;\n      const Bx = Ny * Tz - Nz * Ty, By = Nz * Tx - Nx * Tz, Bz = Nx * Ty - Ny * Tx;\n      const BH = Bx * HX + By * HY + Bz * HZ;\n      const spec = 0.45 * exp(-(TH * TH) / 0.012 - (BH * BH) / 0.35) + 0.5 * exp(-(TH * TH) / 0.06 - (BH * BH) / 0.6);\n      // The hollows get less of the light, and less of the sheen.\n      const ao = sm(-0.9 * tot, 0.6 * tot, h);\n      const shade = cl(0.05 + 0.7 * dif * (0.4 + 0.6 * ao) + 0.5 * spec * (0.25 + 0.75 * ao), 0, 1);\n      const o = ((shade * (RAMP - 1)) | 0) * 3;\n      let r = lut[o], gg = lut[o + 1], b = lut[o + 2];\n      if (gAlpha > 0) {\n        const al = qx * GX + qy * GY;\n        const vv = qx * MX + qy * MY + 0.0018 * al * al - 4 + lean * h;\n        const ggx = MX + 0.0036 * al * GX, ggy = MY + 0.0036 * al * GY;\n        const vx = ggx + ggy * dydx + lean * hx, vy = ggx * dxdy + ggy + lean * hy;\n        // Where a fold turns the line back on itself it passes behind the\n        // fold, so it fades out there instead of spreading into a blot.\n        const gl = sqrt(vx * vx + vy * vy), sd = vv / Math.max(0.3, gl), dist = Math.abs(sd), seen = gAlpha * sm(0.3, 0.7, gl);\n        // The line stands a little off the cloth and shades it on the side\n        // away from the light.\n        if (sd \u003c 0) {\n          const sh = 1 - 0.3 * seen * sm(hw + 0.5 + sw, hw - 0.5, dist);\n          (r *= sh), (gg *= sh), (b *= sh);\n        }\n        const cov = cl(hw + 0.5 - dist, 0, 1) * seen;\n        if (cov > 0) {\n          const NH = Nx * HX + Ny * HY + Nz * HZ;\n          const gs = NH > 0.95 ? ((NH - 0.95) / 0.05) ** 4 : 0;\n          const tw = 0.5 + 0.5 * sin(al * gf - gT * 2.2);\n          const glint = tw ** 24 + gs;\n          const lit = 0.62 + 0.38 * dif, gw = cl(glint, 0, 1);\n          const gr = 252 * lit + (255 - 252 * lit) * gw, ggr = 184 * lit + (246 - 184 * lit) * gw, gb = 58 * lit + (205 - 58 * lit) * gw;\n          r += (gr - r) * cov;\n          gg += (ggr - gg) * cov;\n          b += (gb - b) * cov;\n        }\n      }\n      display.setPixel(x, y, r, gg, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half."},{"name":"Folds","min":1,"max":5,"about":"One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5."},{"name":"Gold","min":0,"max":1,"about":"The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon."}],"start":[0,2,1,0.06],"measures":{"motion":0.094,"detail":0.0124,"edges":0.0787,"complexity":1.2735,"coverage":1,"colour":0.1403,"drift":0.1604},"knobResponse":[0.1121,0.2232,0.0933,0.0521]},{"slug":"scheidegger-rivers","title":"Scheidegger Rivers","family":"line","round":34,"note":"체크무늬로 놓인 LED 마다 물을 왼쪽 아래나 오른쪽 아래로 무작위로 보내는 샤이데거의 강 그물이에요. 모인 물의 로그로 밝혀서 위의 실개천이 아래로 갈수록 굵은 줄기로 합쳐지고, 바닥의 출구마다 다른 색으로 물든 강을 따라 빗방울이 흘러내리며, 가끔 한 자리가 방향을 바꾸면 큰 강이 옆 유역으로 넘어가 옛 물길이 마르고 새 물길이 줄마다 차올라요.","idea":"Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.","buttons":"K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.","code":"// ===== Patternflow pattern =====\n// Title:   Scheidegger Rivers\n// Family:  line\n// Idea:    Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Scheidegger's river network model (Adrian Scheidegger, 1967), pattern round 34; its rivers are coalescing random walks, whose scaling limit is the Brownian web (Balint Toth and Wendelin Werner, 1998)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1\n//\n// Knob 1: Hue. Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale.\n// Knob 2: Speed. At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it.\n// Knob 3: Bias. The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way.\n// Knob 4: Capture. How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn.\n// Buttons: K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.\n\nconst W = 64, H = 128, SW = W / 2, NS = SW * H;\nconst { floor, min, max, log, exp, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Site s sits in row y = s / 32 at x = 2 (s % 32) + (y & 1): the LEDs with\n// x + y even. Its two neighbours below are x - 1 and x + 1 in row y + 1,\n// wrapping round the sides.\nconst SX = new Int16Array(NS), SY = new Int16Array(NS);\nconst DL = new Int32Array(NS), DR = new Int32Array(NS), UL = new Int32Array(NS), UR = new Int32Array(NS);\nconst siteAt = (x, y) => y * SW + (((x % W) + W) % W >> 1);\nfor (let s = 0; s \u003c NS; s++) {\n  const y = floor(s / SW), x = 2 * (s % SW) + (y & 1);\n  SX[s] = x;\n  SY[s] = y;\n  DL[s] = y \u003c H - 1 ? siteAt(x - 1, y + 1) : -1;\n  DR[s] = y \u003c H - 1 ? siteAt(x + 1, y + 1) : -1;\n  UL[s] = y > 0 ? siteAt(x - 1, y - 1) : -1;\n  UR[s] = y > 0 ? siteAt(x + 1, y - 1) : -1;\n}\nconst FMAX = 1500, LFMAX = log(FMAX);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0, cap: 0.06, warm: false, sweep: 0, flipAcc: 0, bigAcc: 0, rainAcc: 0,\n    u: new Float32Array(NS), dn: new Int32Array(NS), F: new Float32Array(NS), Q: new Float32Array(NS),\n    out: new Int16Array(NS), prev: new Int16Array(NS), ov: new Int32Array(SW * SW), col: new Int8Array(SW).fill(-1),\n    col2: new Int8Array(SW), ho: new Float32Array(NS), cum: new Float64Array(NS),\n    drops: [], Lv: new Float32Array(W * H), Hu: new Float32Array(W * H), Sa: new Float32Array(W * H),\n    Wd: new Float32Array(W * H), Dr: new Float32Array(W * H), c: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let s = 0; s \u003c NS; s++) S.u[s] = random();\n}\n\n// Each site drains right when its own random number is under 0.5 + 0.48 Bias.\nfunction route(S) {\n  const p = 0.5 + 0.48 * S.bias;\n  for (let s = 0; s \u003c NS; s++) S.dn[s] = DL[s] \u003c 0 ? -1 : S.u[s] \u003c p ? DR[s] : DL[s];\n}\n\n// The exact flux, row by row from the top: 1 for the site itself plus all\n// that drains into it.\nfunction flux(S) {\n  const F = S.F, dn = S.dn;\n  F.fill(1);\n  for (let s = 0; s \u003c NS - SW; s++) F[dn[s]] += F[s];\n  // Which outlet in the bottom row each site reaches, from the bottom up.\n  for (let s = NS - 1; s >= 0; s--) S.out[s] = dn[s] \u003c 0 ? s - (NS - SW) : S.out[dn[s]];\n}\n\n// The water on show moves one row per sweep: a rerouted river drains and the\n// new one fills from the site that changed downwards.\nfunction sweep(S) {\n  const Q = S.Q, dn = S.dn;\n  for (let s = NS - 1; s >= SW; s--) {\n    let q = 1;\n    const a = UL[s], b = UR[s];\n    if (dn[a] === s) q += Q[a];\n    if (dn[b] === s) q += Q[b];\n    Q[s] = q;\n  }\n}\n\n// Basin colours. A basin draining at least AMIN sites through its outlet\n// holds one of four hue steps; after the network changes, each new basin\n// takes the colour of the old basin it shares most sites with, and a basin\n// with none to take gets the step farthest from those in use.\nconst STEPS = [-0.1, 0, 0.1, 0.2], AMIN = 120;\nfunction basins(S) {\n  const ov = S.ov, F = S.F, B = NS - SW;\n  ov.fill(0);\n  for (let s = 0; s \u003c NS; s++) ov[S.prev[s] * SW + S.out[s]]++;\n  const pairs = [];\n  for (let i = 0; i \u003c SW; i++)\n    if (S.col[i] >= 0) for (let j = 0; j \u003c SW; j++) if (F[B + j] >= AMIN && ov[i * SW + j] > 0) pairs.push([ov[i * SW + j], i, j]);\n  pairs.sort((a, b) => b[0] - a[0]);\n  const col = S.col2.fill(-1), taken = new Uint8Array(SW);\n  for (const [, i, j] of pairs)\n    if (!taken[i] && col[j] \u003c 0) {\n      taken[i] = 1;\n      col[j] = S.col[i];\n    }\n  for (let j = 0; j \u003c SW; j++)\n    if (F[B + j] >= AMIN && col[j] \u003c 0) {\n      let best = 0, far = -1;\n      for (let k = 0; k \u003c STEPS.length; k++) {\n        let near = 9;\n        for (let m = 0; m \u003c SW; m++) if (col[m] >= 0) near = min(near, Math.abs(STEPS[k] - STEPS[col[m]]));\n        if (near > far) (far = near), (best = k);\n      }\n      col[j] = best;\n    }\n  S.col.set(col);\n  S.prev.set(S.out);\n}\n\n// How many rows the two paths out of site s, one through each neighbour\n// below, run apart before they join (or reach the bottom).\nfunction apart(S, s) {\n  let a = DL[s], b = DR[s], n = 0;\n  while (a >= 0 && a !== b) {\n    a = S.dn[a];\n    b = S.dn[b];\n    n++;\n  }\n  return n;\n}\n\n// A capture: site s turns to its other neighbour, with the Metropolis chance\n// that keeps every site draining right with chance p in the long run.\nfunction flip(S, s) {\n  const p = 0.5 + 0.48 * S.bias, right = S.u[s] \u003c p;\n  const want = right ? 1 - p : p;\n  if (random() * max(p, 1 - p) > want) return false;\n  S.u[s] = right ? p + (1 - p) * random() : p * random();\n  S.dn[s] = right ? DL[s] : DR[s];\n  return true;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2;\n  route(S);\n  flux(S);\n  // Small captures land on any site; large ones on a site picked in\n  // proportion to the flux through it, among those whose other way down\n  // runs at least 10 rows apart from the river it leaves.\n  S.flipAcc += d * sp * 150 * S.cap;\n  S.bigAcc += d * sp * 20 * S.cap;\n  let changed = false;\n  while (S.flipAcc >= 1) {\n    S.flipAcc -= 1;\n    changed = flip(S, floor(random() * (NS - SW))) || changed;\n  }\n  if (S.bigAcc >= 1) {\n    const cum = S.cum;\n    let acc = 0;\n    for (let s = 0; s \u003c NS; s++) cum[s] = acc += S.F[s];\n    while (S.bigAcc >= 1) {\n      S.bigAcc -= 1;\n      for (let tries = 0; tries \u003c 8; tries++) {\n        const r = random() * acc;\n        let lo = 0, hi = NS - 1;\n        while (lo \u003c hi) {\n          const m = (lo + hi) >> 1;\n          if (cum[m] \u003c r) lo = m + 1;\n          else hi = m;\n        }\n        if (lo >= NS - SW || apart(S, lo) \u003c 10) continue;\n        changed = flip(S, lo) || changed;\n        break;\n      }\n    }\n  }\n  if (changed) flux(S);\n  S.sweep += d * sp * 40;\n  while (S.sweep >= 1) {\n    S.sweep -= 1;\n    sweep(S);\n  }\n  const k = 1 - exp(-d * sp * 3);\n  basins(S);\n  for (let s = 0; s \u003c NS; s++) {\n    const c = S.col[S.out[s]];\n    if (c >= 0) S.ho[s] += (STEPS[c] - S.ho[s]) * k;\n  }\n\n  // Rain: drops land on random sites and run down the rivers, two LED steps\n  // a row (across, then down).\n  S.rainAcc += d * sp * 14;\n  while (S.rainAcc >= 1) {\n    S.rainAcc -= 1;\n    addDrop(S, floor(random() * (NS - 8 * SW)));\n  }\n  const v = d * sp * 32;\n  const drops = S.drops;\n  for (let i = drops.length - 1; i >= 0; i--) {\n    const D = drops[i];\n    D.pos += v;\n    while (D.pos >= 1) {\n      D.pos -= 1;\n      if (D.mid \u003c 0) {\n        const t = S.dn[D.s];\n        if (t \u003c 0) {\n          D.gone = true;\n          break;\n        }\n        D.mid = SY[D.s] * W + SX[t];\n        D.s = t;\n        D.trail.unshift(D.mid);\n      } else {\n        D.mid = -1;\n        D.trail.unshift(SY[D.s] * W + SX[D.s]);\n      }\n      if (D.trail.length > 8) D.trail.pop();\n    }\n    if (D.gone) drops.splice(i, 1);\n  }\n}\n\nfunction addDrop(S, s) {\n  S.drops.push({ s, mid: -1, pos: random(), trail: [SY[s] * W + SX[s]], gone: false });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], -1, 1);\n  S.cap = cl(k[3], 0, 1);\n  if (!S.warm) {\n    route(S);\n    flux(S);\n    S.Q.set(S.F);\n    S.prev.set(S.out);\n    basins(S);\n    for (let s = 0; s \u003c NS; s++) S.ho[s] = S.col[S.out[s]] >= 0 ? STEPS[S.col[S.out[s]]] : 0;\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let i = 0; i \u003c 260; i++) addDrop(S, floor(random() * 24 * SW));\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { Lv, Hu, Sa, Wd, Dr, Q } = S;\n  Lv.fill(0);\n  Wd.fill(0);\n  Dr.fill(0);\n  // Each site lights its own LED and the LED beside it on the side it drains\n  // to, which is the LED above the site it drains into: a river is a stair of\n  // LEDs, across then down, and two streams meeting make a T.\n  for (let s = 0; s \u003c NS; s++) {\n    const g = cl(log(Q[s]) / LFMAX, 0, 1), L = 30 + 225 * g ** 1.35;\n    const p = SY[s] * W + SX[s], h = S.hue + 0.52 + S.ho[s], sat = 0.85 - 0.45 * g;\n    const wd = 1 + 1.8 * cl((log(Q[s]) - log(30)) / (LFMAX - log(30)), 0, 1);\n    if (L > Lv[p]) (Lv[p] = L), (Hu[p] = h), (Sa[p] = sat), (Wd[p] = wd);\n    const t = S.dn[s];\n    if (t >= 0) {\n      const m = SY[s] * W + SX[t];\n      if (L > Lv[m]) (Lv[m] = L), (Hu[m] = h), (Sa[m] = sat), (Wd[m] = wd);\n    }\n  }\n  for (const D of S.drops)\n    D.trail.forEach((p, i) => {\n      Dr[p] = max(Dr[p], i \u003c 2 ? 1 : 0.85 ** (i - 1));\n    });\n  const out = S.c;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let L = Lv[p], h = Hu[p], sa = Sa[p];\n      // Wide rivers spill onto the LEDs beside them.\n      for (const dx of [-2, -1, 1, 2]) {\n        const q = y * W + ((x + dx + W) % W), w = Wd[q] - Math.abs(dx);\n        if (w > 0) {\n          const v = Lv[q] * min(1, w) * (Math.abs(dx) === 1 ? 0.8 : 0.55);\n          if (v > L) (L = v), (h = Hu[q]), (sa = Sa[q]);\n        }\n      }\n      const dr = Dr[p];\n      if (dr > 0) {\n        L = L + (255 - L) * dr;\n        sa *= 1 - 0.85 * dr;\n      }\n      hsv(h, sa, 1, out);\n      display.setPixel(x, y, round(out[0] * L), round(out[1] * L), round(out[2] * L));\n    }\n}\n","layer":{"id":"layer-scheidegger-rivers","type":"code","name":"scheidegger-rivers","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Scheidegger Rivers\n// Family:  line\n// Idea:    Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Scheidegger's river network model (Adrian Scheidegger, 1967), pattern round 34; its rivers are coalescing random walks, whose scaling limit is the Brownian web (Balint Toth and Wendelin Werner, 1998)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1\n//\n// Knob 1: Hue. Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale.\n// Knob 2: Speed. At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it.\n// Knob 3: Bias. The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way.\n// Knob 4: Capture. How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn.\n// Buttons: K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.\n\nconst W = 64, H = 128, SW = W / 2, NS = SW * H;\nconst { floor, min, max, log, exp, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Site s sits in row y = s / 32 at x = 2 (s % 32) + (y & 1): the LEDs with\n// x + y even. Its two neighbours below are x - 1 and x + 1 in row y + 1,\n// wrapping round the sides.\nconst SX = new Int16Array(NS), SY = new Int16Array(NS);\nconst DL = new Int32Array(NS), DR = new Int32Array(NS), UL = new Int32Array(NS), UR = new Int32Array(NS);\nconst siteAt = (x, y) => y * SW + (((x % W) + W) % W >> 1);\nfor (let s = 0; s \u003c NS; s++) {\n  const y = floor(s / SW), x = 2 * (s % SW) + (y & 1);\n  SX[s] = x;\n  SY[s] = y;\n  DL[s] = y \u003c H - 1 ? siteAt(x - 1, y + 1) : -1;\n  DR[s] = y \u003c H - 1 ? siteAt(x + 1, y + 1) : -1;\n  UL[s] = y > 0 ? siteAt(x - 1, y - 1) : -1;\n  UR[s] = y > 0 ? siteAt(x + 1, y - 1) : -1;\n}\nconst FMAX = 1500, LFMAX = log(FMAX);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0, cap: 0.06, warm: false, sweep: 0, flipAcc: 0, bigAcc: 0, rainAcc: 0,\n    u: new Float32Array(NS), dn: new Int32Array(NS), F: new Float32Array(NS), Q: new Float32Array(NS),\n    out: new Int16Array(NS), prev: new Int16Array(NS), ov: new Int32Array(SW * SW), col: new Int8Array(SW).fill(-1),\n    col2: new Int8Array(SW), ho: new Float32Array(NS), cum: new Float64Array(NS),\n    drops: [], Lv: new Float32Array(W * H), Hu: new Float32Array(W * H), Sa: new Float32Array(W * H),\n    Wd: new Float32Array(W * H), Dr: new Float32Array(W * H), c: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let s = 0; s \u003c NS; s++) S.u[s] = random();\n}\n\n// Each site drains right when its own random number is under 0.5 + 0.48 Bias.\nfunction route(S) {\n  const p = 0.5 + 0.48 * S.bias;\n  for (let s = 0; s \u003c NS; s++) S.dn[s] = DL[s] \u003c 0 ? -1 : S.u[s] \u003c p ? DR[s] : DL[s];\n}\n\n// The exact flux, row by row from the top: 1 for the site itself plus all\n// that drains into it.\nfunction flux(S) {\n  const F = S.F, dn = S.dn;\n  F.fill(1);\n  for (let s = 0; s \u003c NS - SW; s++) F[dn[s]] += F[s];\n  // Which outlet in the bottom row each site reaches, from the bottom up.\n  for (let s = NS - 1; s >= 0; s--) S.out[s] = dn[s] \u003c 0 ? s - (NS - SW) : S.out[dn[s]];\n}\n\n// The water on show moves one row per sweep: a rerouted river drains and the\n// new one fills from the site that changed downwards.\nfunction sweep(S) {\n  const Q = S.Q, dn = S.dn;\n  for (let s = NS - 1; s >= SW; s--) {\n    let q = 1;\n    const a = UL[s], b = UR[s];\n    if (dn[a] === s) q += Q[a];\n    if (dn[b] === s) q += Q[b];\n    Q[s] = q;\n  }\n}\n\n// Basin colours. A basin draining at least AMIN sites through its outlet\n// holds one of four hue steps; after the network changes, each new basin\n// takes the colour of the old basin it shares most sites with, and a basin\n// with none to take gets the step farthest from those in use.\nconst STEPS = [-0.1, 0, 0.1, 0.2], AMIN = 120;\nfunction basins(S) {\n  const ov = S.ov, F = S.F, B = NS - SW;\n  ov.fill(0);\n  for (let s = 0; s \u003c NS; s++) ov[S.prev[s] * SW + S.out[s]]++;\n  const pairs = [];\n  for (let i = 0; i \u003c SW; i++)\n    if (S.col[i] >= 0) for (let j = 0; j \u003c SW; j++) if (F[B + j] >= AMIN && ov[i * SW + j] > 0) pairs.push([ov[i * SW + j], i, j]);\n  pairs.sort((a, b) => b[0] - a[0]);\n  const col = S.col2.fill(-1), taken = new Uint8Array(SW);\n  for (const [, i, j] of pairs)\n    if (!taken[i] && col[j] \u003c 0) {\n      taken[i] = 1;\n      col[j] = S.col[i];\n    }\n  for (let j = 0; j \u003c SW; j++)\n    if (F[B + j] >= AMIN && col[j] \u003c 0) {\n      let best = 0, far = -1;\n      for (let k = 0; k \u003c STEPS.length; k++) {\n        let near = 9;\n        for (let m = 0; m \u003c SW; m++) if (col[m] >= 0) near = min(near, Math.abs(STEPS[k] - STEPS[col[m]]));\n        if (near > far) (far = near), (best = k);\n      }\n      col[j] = best;\n    }\n  S.col.set(col);\n  S.prev.set(S.out);\n}\n\n// How many rows the two paths out of site s, one through each neighbour\n// below, run apart before they join (or reach the bottom).\nfunction apart(S, s) {\n  let a = DL[s], b = DR[s], n = 0;\n  while (a >= 0 && a !== b) {\n    a = S.dn[a];\n    b = S.dn[b];\n    n++;\n  }\n  return n;\n}\n\n// A capture: site s turns to its other neighbour, with the Metropolis chance\n// that keeps every site draining right with chance p in the long run.\nfunction flip(S, s) {\n  const p = 0.5 + 0.48 * S.bias, right = S.u[s] \u003c p;\n  const want = right ? 1 - p : p;\n  if (random() * max(p, 1 - p) > want) return false;\n  S.u[s] = right ? p + (1 - p) * random() : p * random();\n  S.dn[s] = right ? DL[s] : DR[s];\n  return true;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2;\n  route(S);\n  flux(S);\n  // Small captures land on any site; large ones on a site picked in\n  // proportion to the flux through it, among those whose other way down\n  // runs at least 10 rows apart from the river it leaves.\n  S.flipAcc += d * sp * 150 * S.cap;\n  S.bigAcc += d * sp * 20 * S.cap;\n  let changed = false;\n  while (S.flipAcc >= 1) {\n    S.flipAcc -= 1;\n    changed = flip(S, floor(random() * (NS - SW))) || changed;\n  }\n  if (S.bigAcc >= 1) {\n    const cum = S.cum;\n    let acc = 0;\n    for (let s = 0; s \u003c NS; s++) cum[s] = acc += S.F[s];\n    while (S.bigAcc >= 1) {\n      S.bigAcc -= 1;\n      for (let tries = 0; tries \u003c 8; tries++) {\n        const r = random() * acc;\n        let lo = 0, hi = NS - 1;\n        while (lo \u003c hi) {\n          const m = (lo + hi) >> 1;\n          if (cum[m] \u003c r) lo = m + 1;\n          else hi = m;\n        }\n        if (lo >= NS - SW || apart(S, lo) \u003c 10) continue;\n        changed = flip(S, lo) || changed;\n        break;\n      }\n    }\n  }\n  if (changed) flux(S);\n  S.sweep += d * sp * 40;\n  while (S.sweep >= 1) {\n    S.sweep -= 1;\n    sweep(S);\n  }\n  const k = 1 - exp(-d * sp * 3);\n  basins(S);\n  for (let s = 0; s \u003c NS; s++) {\n    const c = S.col[S.out[s]];\n    if (c >= 0) S.ho[s] += (STEPS[c] - S.ho[s]) * k;\n  }\n\n  // Rain: drops land on random sites and run down the rivers, two LED steps\n  // a row (across, then down).\n  S.rainAcc += d * sp * 14;\n  while (S.rainAcc >= 1) {\n    S.rainAcc -= 1;\n    addDrop(S, floor(random() * (NS - 8 * SW)));\n  }\n  const v = d * sp * 32;\n  const drops = S.drops;\n  for (let i = drops.length - 1; i >= 0; i--) {\n    const D = drops[i];\n    D.pos += v;\n    while (D.pos >= 1) {\n      D.pos -= 1;\n      if (D.mid \u003c 0) {\n        const t = S.dn[D.s];\n        if (t \u003c 0) {\n          D.gone = true;\n          break;\n        }\n        D.mid = SY[D.s] * W + SX[t];\n        D.s = t;\n        D.trail.unshift(D.mid);\n      } else {\n        D.mid = -1;\n        D.trail.unshift(SY[D.s] * W + SX[D.s]);\n      }\n      if (D.trail.length > 8) D.trail.pop();\n    }\n    if (D.gone) drops.splice(i, 1);\n  }\n}\n\nfunction addDrop(S, s) {\n  S.drops.push({ s, mid: -1, pos: random(), trail: [SY[s] * W + SX[s]], gone: false });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], -1, 1);\n  S.cap = cl(k[3], 0, 1);\n  if (!S.warm) {\n    route(S);\n    flux(S);\n    S.Q.set(S.F);\n    S.prev.set(S.out);\n    basins(S);\n    for (let s = 0; s \u003c NS; s++) S.ho[s] = S.col[S.out[s]] >= 0 ? STEPS[S.col[S.out[s]]] : 0;\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let i = 0; i \u003c 260; i++) addDrop(S, floor(random() * 24 * SW));\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { Lv, Hu, Sa, Wd, Dr, Q } = S;\n  Lv.fill(0);\n  Wd.fill(0);\n  Dr.fill(0);\n  // Each site lights its own LED and the LED beside it on the side it drains\n  // to, which is the LED above the site it drains into: a river is a stair of\n  // LEDs, across then down, and two streams meeting make a T.\n  for (let s = 0; s \u003c NS; s++) {\n    const g = cl(log(Q[s]) / LFMAX, 0, 1), L = 30 + 225 * g ** 1.35;\n    const p = SY[s] * W + SX[s], h = S.hue + 0.52 + S.ho[s], sat = 0.85 - 0.45 * g;\n    const wd = 1 + 1.8 * cl((log(Q[s]) - log(30)) / (LFMAX - log(30)), 0, 1);\n    if (L > Lv[p]) (Lv[p] = L), (Hu[p] = h), (Sa[p] = sat), (Wd[p] = wd);\n    const t = S.dn[s];\n    if (t >= 0) {\n      const m = SY[s] * W + SX[t];\n      if (L > Lv[m]) (Lv[m] = L), (Hu[m] = h), (Sa[m] = sat), (Wd[m] = wd);\n    }\n  }\n  for (const D of S.drops)\n    D.trail.forEach((p, i) => {\n      Dr[p] = max(Dr[p], i \u003c 2 ? 1 : 0.85 ** (i - 1));\n    });\n  const out = S.c;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let L = Lv[p], h = Hu[p], sa = Sa[p];\n      // Wide rivers spill onto the LEDs beside them.\n      for (const dx of [-2, -1, 1, 2]) {\n        const q = y * W + ((x + dx + W) % W), w = Wd[q] - Math.abs(dx);\n        if (w > 0) {\n          const v = Lv[q] * min(1, w) * (Math.abs(dx) === 1 ? 0.8 : 0.55);\n          if (v > L) (L = v), (h = Hu[q]), (sa = Sa[q]);\n        }\n      }\n      const dr = Dr[p];\n      if (dr > 0) {\n        L = L + (255 - L) * dr;\n        sa *= 1 - 0.85 * dr;\n      }\n      hsv(h, sa, 1, out);\n      display.setPixel(x, y, round(out[0] * L), round(out[1] * L), round(out[2] * L));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it."},{"name":"Bias","min":-1,"max":1,"about":"The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way."},{"name":"Capture","min":0,"max":1,"about":"How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn."}],"start":[0,2,0,0.06],"measures":{"motion":0.094,"detail":0.1271,"edges":0.515,"complexity":1.5978,"coverage":0.922,"colour":0.2023,"drift":0.0432},"knobResponse":[0.1672,0.0593,0.2285,0.1968]},{"slug":"schwarz-lantern","title":"Schwarz Lantern","family":"geometry","round":36,"note":"꼭짓점이 모두 원기둥 위에 있는 삼각형 랜턴이 패널 높이만큼 서서 돌고, 띠가 3개에서 40개로 늘었다 줄어요. 접힐수록 아코디언처럼 반짝이고, 왼쪽 막대가 넓이를 원기둥의 1.88배까지 올려요. K3 은 한 고리의 꼭짓점 수를 5에서 12로 바꿔 같은 띠 40개를 매끈한 기둥으로 남기고, K1 을 누르면 단번에 가장 구겨진 꼴로 접혔다가 천천히 풀려요.","idea":"A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.","buttons":"K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.","code":"// ===== Patternflow pattern =====\n// Title:   Schwarz Lantern\n// Family:  geometry\n// Idea:    A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schwarz lantern (Hermann Schwarz, 1880), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1\n//\n// Knob 1: Hue. The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round.\n// Knob 2: Speed. At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long.\n// Knob 3: Sides. Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves.\n// Knob 4: Light. The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep.\n// Buttons: K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.\n\nconst W = 64, H = 128, SS = 2, SW = W * SS, SH = H * SS, SN = SW * SH;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, log, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The cylinder: radius R and height HC in LEDs, its axis at column CX, seen\n// from EL radians above. The bands run from MMIN to MMAX.\nconst R = 26, HC = 114, CX = 34.5, EL = 0.2, MMIN = 3, MMAX = 40, NMAX = 12;\n// The gauge: the lantern's area over the cylinder's, a bar up from row G0 at\n// the left edge, GPX LEDs to the unit, with a mark at 1.\nconst G0 = 125, GPX = 44;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const V = (MMAX + 2) * NMAX;\n  params.s = {\n    hue: 0, speed: 2, n: 5, light: 0.06, spin: 0, sweep: 2.2, snap: -1, mu: MMIN, area: 1,\n    ox: new Float32Array(V), oy: new Float32Array(V), oz: new Float32Array(V),\n    vx: new Float32Array(V), vy: new Float32Array(V), vz: new Float32Array(V),\n    zb: new Float32Array(SN), cr: new Float32Array(SN), cg: new Float32Array(SN), cb: new Float32Array(SN), col: new Float32Array(3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = Math.round(cl(k[2], 5, NMAX));\n  S.light = cl(k[3], 0, 1);\n  S.spin += d * S.speed * 0.12;\n  S.sweep += d * S.speed * 0.16;\n  if (S.snap >= 0) {\n    S.snap += d;\n    if (S.snap > 4.6) S.snap = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.snap = S.snap \u003c 0 ? 0 : min(S.snap, 0.6);\n  // The bands: MMIN to MMAX and back, evenly in log, lingering at both ends.\n  const u = 0.5 - 0.5 * cos(S.sweep);\n  let mu = exp(log(MMIN) + log(MMAX / MMIN) * u);\n  if (S.snap >= 0) {\n    const e = S.snap \u003c 0.6 ? sm(S.snap / 0.6) : 1 - sm((S.snap - 2.6) / 2);\n    mu = exp(log(mu) + (log(MMAX) - log(mu)) * e);\n  }\n  S.mu = mu;\n}\n\n// Rasterise one triangle into the supersampled buffers, flat coloured, row\n// by row: on each row every edge bounds the run of samples on one side.\nfunction tri(S, ax, ay, az, bx, by, bz, cx, cy, cz, r, g, b) {\n  const { zb, cr, cg, cb } = S;\n  const det = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);\n  if (abs(det) \u003c 1e-6) return;\n  // Depth as a plane over the screen.\n  const dzx = ((bz - az) * (cy - ay) - (cz - az) * (by - ay)) / det;\n  const dzy = ((cz - az) * (bx - ax) - (bz - az) * (cx - ax)) / det;\n  const s = det > 0 ? 1 : -1;\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(SH - 1, floor(max(ay, by, cy) - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 0, xr = SW - 1;\n    for (let e = 0; e \u003c 3; e++) {\n      const x0 = e === 0 ? ax : e === 1 ? bx : cx, y0e = e === 0 ? ay : e === 1 ? by : cy;\n      const x1 = e === 0 ? bx : e === 1 ? cx : ax, y1e = e === 0 ? by : e === 1 ? cy : ay;\n      // Inside when s ((x1 - x0)(py - y0) - (y1 - y0)(px - x0)) >= 0, linear in px.\n      const A = -s * (y1e - y0e), B = s * ((x1 - x0) * (py - y0e) + (y1e - y0e) * x0);\n      if (abs(A) \u003c 1e-9) {\n        if (B \u003c 0) xr = -1;\n      } else if (A > 0) xl = max(xl, ceil(-B / A - 0.5));\n      else xr = min(xr, floor(-B / A - 0.5));\n    }\n    for (let x = xl; x \u003c= xr; x++) {\n      const z = az + dzx * (x + 0.5 - ax) + dzy * (py - ay), p = y * SW + x;\n      if (z \u003c zb[p]) {\n        zb[p] = z;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ox, oy, oz, vx, vy, vz, zb, cr, cg, cb, col } = S;\n  const n = S.n, mu = S.mu, K = ceil(mu - 1e-6);\n  const ce = cos(EL), se = sin(EL), cxs = CX * SS, cys = 64 * SS;\n  const ct = cos(S.spin), st = sin(S.spin);\n  // Ring k holds n corners at angles (2 pi j + pi k) / n, so each ring is\n  // turned pi / n from the last, at height k h / mu, the last held at the\n  // top: at a whole mu this is the lantern with mu bands, and between two\n  // whole values the top band opens from flat to full height.\n  for (let k = 0; k \u003c= K; k++) {\n    const y = min(HC, (k * HC) / mu);\n    for (let j = 0; j \u003c n; j++) {\n      const a = (TAU * j + PI * k) / n, x = R * cos(a), z = R * sin(a), o = k * n + j;\n      ox[o] = x;\n      oy[o] = y;\n      oz[o] = z;\n      // Turn about the axis, then look down by EL.\n      const xr = x * ct + z * st, zr = -x * st + z * ct, yc = y - HC / 2;\n      vx[o] = cxs + SS * xr;\n      vy[o] = cys - SS * (yc * ce + zr * se);\n      vz[o] = -yc * se + zr * ce;\n    }\n  }\n  zb.fill(1e9);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  // The light from the front left, its height set by K4: 44 degrees above\n  // at the opening, level at 0.5, 50 below at 1. The eye looks along +z.\n  const le = 0.87 - 1.74 * S.light, Lx = -0.55 * cos(le), Ly = sin(le), Lz = -0.83 * cos(le);\n  const Hx = Lx, Hy = Ly, Hz = Lz - 1, Hn = 1 / sqrt(Hx * Hx + Hy * Hy + Hz * Hz);\n  // The half vector of a second light high above and behind, for the\n  // glints off deep folds.\n  const Gx = 0.25, Gy = 0.8, Gz = -0.45, Gn = 1 / sqrt(Gx * Gx + Gy * Gy + Gz * Gz);\n  const h0 = S.hue + 0.55;\n  let area = 0;\n  for (let k = 0; k \u003c K; k++)\n    for (let j = 0; j \u003c n; j++)\n      for (let t = 0; t \u003c 2; t++) {\n        // t = 0: base on ring k, apex on ring k + 1 between the base's ends.\n        // t = 1: base on ring k + 1, apex on ring k between its ends.\n        const i0 = t === 0 ? k * n + j : (k + 1) * n + ((j + n - 1) % n);\n        const i1 = t === 0 ? k * n + ((j + 1) % n) : (k + 1) * n + j;\n        const i2 = t === 0 ? (k + 1) * n + j : k * n + j;\n        const ux = ox[i1] - ox[i0], uy = oy[i1] - oy[i0], uz = oz[i1] - oz[i0];\n        const wx = ox[i2] - ox[i0], wy = oy[i2] - oy[i0], wz = oz[i2] - oz[i0];\n        let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n        const nl = sqrt(nx * nx + ny * ny + nz * nz);\n        area += nl / 2;\n        if (nl \u003c 1e-9) continue;\n        (nx /= nl), (ny /= nl), (nz /= nl);\n        // Point the normal out of the cylinder.\n        if (nx * (ox[i0] + ox[i1] + ox[i2]) + nz * (oz[i0] + oz[i1] + oz[i2]) \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n        const rx = nx * ct + nz * st, rz0 = -nx * st + nz * ct;\n        const ry = ny * ce + rz0 * se, rz = -ny * se + rz0 * ce;\n        // Outside faces turn toward the eye; the inside shows through the top.\n        const out = rz \u003c 0, sx = out ? rx : -rx, sy = out ? ry : -ry, sz = out ? rz : -rz;\n        const dif = max(0, sx * Lx + sy * Ly + sz * Lz);\n        let lit, spec = 0;\n        if (out) {\n          const hv = max(0, (sx * Hx + sy * Hy + sz * Hz) * Hn), gv = max(0, (sx * Gx + sy * Gy + sz * Gz) * Gn);\n          spec = hv ** 40 * 0.6 + gv ** 40;\n          hsv(h0 + 0.1 * ny, 0.85 - 0.1 * abs(ny), 1, col, 0);\n          lit = 0.16 + 0.84 * dif;\n        } else {\n          hsv(h0 + 0.12, 0.7, 1, col, 0);\n          lit = 0.1 + 0.3 * dif;\n        }\n        tri(S, vx[i0], vy[i0], vz[i0], vx[i1], vy[i1], vz[i1], vx[i2], vy[i2], vz[i2], col[0] * lit + spec, col[1] * lit + spec, col[2] * lit + spec);\n      }\n  // Summed from the triangles themselves; at whole mu it equals\n  // A = 2 m n r sin(pi/n) sqrt((h/m)^2 + r^2 (1 - cos(pi/n))^2).\n  S.area = area / (TAU * R * HC);\n\n  const f = 255 / (SS * SS);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0;\n      for (let dy = 0; dy \u003c SS; dy++)\n        for (let dx = 0; dx \u003c SS; dx++) {\n          const p = (y * SS + dy) * SW + x * SS + dx;\n          r += cr[p];\n          g += cg[p];\n          b += cb[p];\n        }\n      // The gauge: a two-LED bar up the left edge, and a mark at 1, where\n      // the lantern's area would equal the cylinder's.\n      if ((x === 1 || x === 2) && y > G0 - S.area * GPX && y \u003c= G0) r = g = b = 190 / f;\n      if (x \u003c 5 && y === G0 - GPX) r = g = b = 255 / f;\n      display.setPixel(x, y, cl(r * f, 0, 255), cl(g * f, 0, 255), cl(b * f, 0, 255));\n    }\n}\n","layer":{"id":"layer-schwarz-lantern","type":"code","name":"schwarz-lantern","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Schwarz Lantern\n// Family:  geometry\n// Idea:    A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schwarz lantern (Hermann Schwarz, 1880), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1\n//\n// Knob 1: Hue. The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round.\n// Knob 2: Speed. At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long.\n// Knob 3: Sides. Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves.\n// Knob 4: Light. The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep.\n// Buttons: K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.\n\nconst W = 64, H = 128, SS = 2, SW = W * SS, SH = H * SS, SN = SW * SH;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, log, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The cylinder: radius R and height HC in LEDs, its axis at column CX, seen\n// from EL radians above. The bands run from MMIN to MMAX.\nconst R = 26, HC = 114, CX = 34.5, EL = 0.2, MMIN = 3, MMAX = 40, NMAX = 12;\n// The gauge: the lantern's area over the cylinder's, a bar up from row G0 at\n// the left edge, GPX LEDs to the unit, with a mark at 1.\nconst G0 = 125, GPX = 44;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const V = (MMAX + 2) * NMAX;\n  params.s = {\n    hue: 0, speed: 2, n: 5, light: 0.06, spin: 0, sweep: 2.2, snap: -1, mu: MMIN, area: 1,\n    ox: new Float32Array(V), oy: new Float32Array(V), oz: new Float32Array(V),\n    vx: new Float32Array(V), vy: new Float32Array(V), vz: new Float32Array(V),\n    zb: new Float32Array(SN), cr: new Float32Array(SN), cg: new Float32Array(SN), cb: new Float32Array(SN), col: new Float32Array(3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = Math.round(cl(k[2], 5, NMAX));\n  S.light = cl(k[3], 0, 1);\n  S.spin += d * S.speed * 0.12;\n  S.sweep += d * S.speed * 0.16;\n  if (S.snap >= 0) {\n    S.snap += d;\n    if (S.snap > 4.6) S.snap = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.snap = S.snap \u003c 0 ? 0 : min(S.snap, 0.6);\n  // The bands: MMIN to MMAX and back, evenly in log, lingering at both ends.\n  const u = 0.5 - 0.5 * cos(S.sweep);\n  let mu = exp(log(MMIN) + log(MMAX / MMIN) * u);\n  if (S.snap >= 0) {\n    const e = S.snap \u003c 0.6 ? sm(S.snap / 0.6) : 1 - sm((S.snap - 2.6) / 2);\n    mu = exp(log(mu) + (log(MMAX) - log(mu)) * e);\n  }\n  S.mu = mu;\n}\n\n// Rasterise one triangle into the supersampled buffers, flat coloured, row\n// by row: on each row every edge bounds the run of samples on one side.\nfunction tri(S, ax, ay, az, bx, by, bz, cx, cy, cz, r, g, b) {\n  const { zb, cr, cg, cb } = S;\n  const det = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);\n  if (abs(det) \u003c 1e-6) return;\n  // Depth as a plane over the screen.\n  const dzx = ((bz - az) * (cy - ay) - (cz - az) * (by - ay)) / det;\n  const dzy = ((cz - az) * (bx - ax) - (bz - az) * (cx - ax)) / det;\n  const s = det > 0 ? 1 : -1;\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(SH - 1, floor(max(ay, by, cy) - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 0, xr = SW - 1;\n    for (let e = 0; e \u003c 3; e++) {\n      const x0 = e === 0 ? ax : e === 1 ? bx : cx, y0e = e === 0 ? ay : e === 1 ? by : cy;\n      const x1 = e === 0 ? bx : e === 1 ? cx : ax, y1e = e === 0 ? by : e === 1 ? cy : ay;\n      // Inside when s ((x1 - x0)(py - y0) - (y1 - y0)(px - x0)) >= 0, linear in px.\n      const A = -s * (y1e - y0e), B = s * ((x1 - x0) * (py - y0e) + (y1e - y0e) * x0);\n      if (abs(A) \u003c 1e-9) {\n        if (B \u003c 0) xr = -1;\n      } else if (A > 0) xl = max(xl, ceil(-B / A - 0.5));\n      else xr = min(xr, floor(-B / A - 0.5));\n    }\n    for (let x = xl; x \u003c= xr; x++) {\n      const z = az + dzx * (x + 0.5 - ax) + dzy * (py - ay), p = y * SW + x;\n      if (z \u003c zb[p]) {\n        zb[p] = z;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ox, oy, oz, vx, vy, vz, zb, cr, cg, cb, col } = S;\n  const n = S.n, mu = S.mu, K = ceil(mu - 1e-6);\n  const ce = cos(EL), se = sin(EL), cxs = CX * SS, cys = 64 * SS;\n  const ct = cos(S.spin), st = sin(S.spin);\n  // Ring k holds n corners at angles (2 pi j + pi k) / n, so each ring is\n  // turned pi / n from the last, at height k h / mu, the last held at the\n  // top: at a whole mu this is the lantern with mu bands, and between two\n  // whole values the top band opens from flat to full height.\n  for (let k = 0; k \u003c= K; k++) {\n    const y = min(HC, (k * HC) / mu);\n    for (let j = 0; j \u003c n; j++) {\n      const a = (TAU * j + PI * k) / n, x = R * cos(a), z = R * sin(a), o = k * n + j;\n      ox[o] = x;\n      oy[o] = y;\n      oz[o] = z;\n      // Turn about the axis, then look down by EL.\n      const xr = x * ct + z * st, zr = -x * st + z * ct, yc = y - HC / 2;\n      vx[o] = cxs + SS * xr;\n      vy[o] = cys - SS * (yc * ce + zr * se);\n      vz[o] = -yc * se + zr * ce;\n    }\n  }\n  zb.fill(1e9);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  // The light from the front left, its height set by K4: 44 degrees above\n  // at the opening, level at 0.5, 50 below at 1. The eye looks along +z.\n  const le = 0.87 - 1.74 * S.light, Lx = -0.55 * cos(le), Ly = sin(le), Lz = -0.83 * cos(le);\n  const Hx = Lx, Hy = Ly, Hz = Lz - 1, Hn = 1 / sqrt(Hx * Hx + Hy * Hy + Hz * Hz);\n  // The half vector of a second light high above and behind, for the\n  // glints off deep folds.\n  const Gx = 0.25, Gy = 0.8, Gz = -0.45, Gn = 1 / sqrt(Gx * Gx + Gy * Gy + Gz * Gz);\n  const h0 = S.hue + 0.55;\n  let area = 0;\n  for (let k = 0; k \u003c K; k++)\n    for (let j = 0; j \u003c n; j++)\n      for (let t = 0; t \u003c 2; t++) {\n        // t = 0: base on ring k, apex on ring k + 1 between the base's ends.\n        // t = 1: base on ring k + 1, apex on ring k between its ends.\n        const i0 = t === 0 ? k * n + j : (k + 1) * n + ((j + n - 1) % n);\n        const i1 = t === 0 ? k * n + ((j + 1) % n) : (k + 1) * n + j;\n        const i2 = t === 0 ? (k + 1) * n + j : k * n + j;\n        const ux = ox[i1] - ox[i0], uy = oy[i1] - oy[i0], uz = oz[i1] - oz[i0];\n        const wx = ox[i2] - ox[i0], wy = oy[i2] - oy[i0], wz = oz[i2] - oz[i0];\n        let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n        const nl = sqrt(nx * nx + ny * ny + nz * nz);\n        area += nl / 2;\n        if (nl \u003c 1e-9) continue;\n        (nx /= nl), (ny /= nl), (nz /= nl);\n        // Point the normal out of the cylinder.\n        if (nx * (ox[i0] + ox[i1] + ox[i2]) + nz * (oz[i0] + oz[i1] + oz[i2]) \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n        const rx = nx * ct + nz * st, rz0 = -nx * st + nz * ct;\n        const ry = ny * ce + rz0 * se, rz = -ny * se + rz0 * ce;\n        // Outside faces turn toward the eye; the inside shows through the top.\n        const out = rz \u003c 0, sx = out ? rx : -rx, sy = out ? ry : -ry, sz = out ? rz : -rz;\n        const dif = max(0, sx * Lx + sy * Ly + sz * Lz);\n        let lit, spec = 0;\n        if (out) {\n          const hv = max(0, (sx * Hx + sy * Hy + sz * Hz) * Hn), gv = max(0, (sx * Gx + sy * Gy + sz * Gz) * Gn);\n          spec = hv ** 40 * 0.6 + gv ** 40;\n          hsv(h0 + 0.1 * ny, 0.85 - 0.1 * abs(ny), 1, col, 0);\n          lit = 0.16 + 0.84 * dif;\n        } else {\n          hsv(h0 + 0.12, 0.7, 1, col, 0);\n          lit = 0.1 + 0.3 * dif;\n        }\n        tri(S, vx[i0], vy[i0], vz[i0], vx[i1], vy[i1], vz[i1], vx[i2], vy[i2], vz[i2], col[0] * lit + spec, col[1] * lit + spec, col[2] * lit + spec);\n      }\n  // Summed from the triangles themselves; at whole mu it equals\n  // A = 2 m n r sin(pi/n) sqrt((h/m)^2 + r^2 (1 - cos(pi/n))^2).\n  S.area = area / (TAU * R * HC);\n\n  const f = 255 / (SS * SS);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0;\n      for (let dy = 0; dy \u003c SS; dy++)\n        for (let dx = 0; dx \u003c SS; dx++) {\n          const p = (y * SS + dy) * SW + x * SS + dx;\n          r += cr[p];\n          g += cg[p];\n          b += cb[p];\n        }\n      // The gauge: a two-LED bar up the left edge, and a mark at 1, where\n      // the lantern's area would equal the cylinder's.\n      if ((x === 1 || x === 2) && y > G0 - S.area * GPX && y \u003c= G0) r = g = b = 190 / f;\n      if (x \u003c 5 && y === G0 - GPX) r = g = b = 255 / f;\n      display.setPixel(x, y, cl(r * f, 0, 255), cl(g * f, 0, 255), cl(b * f, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long."},{"name":"Sides","min":5,"max":12,"about":"Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves."},{"name":"Light","min":0,"max":1,"about":"The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep."}],"start":[0,2,5,0.06],"measures":{"motion":2.2095,"detail":0.1257,"edges":0.8296,"complexity":0.2813,"coverage":0.7377,"colour":0.3317,"drift":0.1973},"knobResponse":[0.2726,0.2005,0.2242,0.2083]},{"slug":"searchlights","title":"Searchlights","family":"light","round":7,"note":"밤 도시의 지붕 뒤에서 탐조등 세 대가 가장자리가 또렷한 빛기둥을 천천히 휘둘러요. 기둥 둘이 겹친 자리는 하얗게 타고, K1 을 누르면 하늘을 가로지르는 비행기를 모든 기둥이 붙잡았다가 놓아줘요.","idea":"Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.","buttons":"K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.","code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","layer":{"id":"layer-searchlights","type":"code","name":"searchlights","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the lamps, starting from the cold blue-white of a xenon arc."},{"name":"Sweep","min":0.2,"max":4,"about":"How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds."},{"name":"Lights","min":3,"max":7,"about":"How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out."},{"name":"Haze","min":0,"max":1,"about":"How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky."}],"start":[0,2,3,0.06],"measures":{"motion":0.1662,"detail":0.0601,"edges":0.9751,"complexity":0.5201,"coverage":0.2833,"colour":0.1361,"drift":0.3569},"knobResponse":[0.0557,0.2929,0.2085,0.0855]},{"slug":"senbazuru","title":"Senbazuru","family":"paper","round":22,"note":"붉은 옻칠 고리에 실로 꿴 종이학이 줄줄이 매달려 금박 학 아래로 주황에서 초록, 파랑을 지나 보라와 분홍까지 띠를 이루고, 실 끝에는 금 구슬과 비단 술이 달려요. 어두운 절 방에 외풍이 불면 줄이 흔들리고 학이 실을 축으로 돌면서 접힌 면이 하나씩 등불을 받아 번쩍여요. K1 을 누르면 돌풍이 불어 학 하나가 떨어져 나뭇잎처럼 바닥으로 내려앉아요.","idea":"Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.","buttons":"K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-senbazuru","type":"code","name":"senbazuru","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow."},{"name":"Breeze","min":0.2,"max":3,"about":"How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin."},{"name":"Strands","min":8,"max":16,"about":"How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them."},{"name":"Light","min":0,"max":1,"about":"Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it."}],"start":[0,2,8,0.06],"measures":{"motion":0.5463,"detail":0.1059,"edges":0.4439,"complexity":2.0626,"coverage":0.7211,"colour":0.2483,"drift":0.1023},"knobResponse":[0.0684,0.1034,0.1073,0.1606]},{"slug":"sequins","title":"Sequins","family":"textile","round":23,"note":"뒤집히는 스팽글을 촘촘히 단 쿠션이 패널을 채워요. 은빛 비늘이 엇갈린 줄로 겹쳐 있고, 보이지 않는 손끝이 지나가면 스팽글이 차례로 모서리를 보이며 넘어가 하트, 별, 고양이 얼굴, 번개, 파도를 분홍 면으로 그려요. 손바닥이 위에서 아래로 쓸면 다시 은빛이 돼요.","idea":"A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.","buttons":"K1 tap sweeps the palm down the cushion now and the next drawing starts.","code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","layer":{"id":"layer-sequins","type":"code","name":"sequins","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower."},{"name":"Drawing","min":0,"max":4,"about":"What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.1482,"detail":0.3266,"edges":0.6744,"complexity":1.7886,"coverage":0.647,"colour":0.0886,"drift":0.2495},"knobResponse":[0.0553,0.0492,0.2354,0.1678]},{"slug":"serum-drip","title":"Serum Drip","family":"cosmetic","round":39,"note":"위 끝에서 흘러드는 금빛 세럼 실이 목이 졸리고 부풀어 구슬을 꿴 줄이 되고, 가는 실이 끊기며 큰 방울과 작은 위성 방울이 바닥의 웅덩이로 떨어져요. 세로 홈이 진 벽이 구슬마다 크게 비쳐요.","idea":"A thread of clear tinted serum falls from the top edge the height of the panel, necks and swells into beads on a string, the filaments between them thin and snap, and round drops with now and then a small satellite fall into a shallow pool at the bottom, while the stream keeps coming and the lit wall shows through every bead, magnified.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Serum Drip\n// Family:  cosmetic\n// Idea:    A thread of clear tinted serum falls from the top edge the height of the panel, necks and swells into beads on a string, the filaments between them thin and snap, and round drops with now and then a small satellite fall into a shallow pool at the bottom, while the stream keeps coming and the lit wall shows through every bead, magnified.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after a serum stretched from a dropper into a thread that beads up and breaks (the Plateau-Rayleigh instability, Joseph Plateau, 1873, and Lord Rayleigh, 1878)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=-1..1, Flow=-1..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, and the wall behind it takes a faint tint of the same hue. At 0 gold on a grey wall; at 0.04 yellow, 0.1 lime, 0.2 green, 0.36 aqua, 0.46 azure, 0.53 blue, 0.6 violet, 0.7 magenta, 0.78 rose, 0.86 red, 0.92 vermilion and 0.96 orange. From red-orange through gold to lime the wall is greyed and lifted a little and the pool lit from within, so the serum and its pool read amber, gold or lemon, never brown or olive.\n// Knob 2: Speed. At 2 the serum leaves the top edge at 28 LEDs a second, falls the height of the panel in about 3 seconds, and a drop breaks off about every 1.4 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Viscosity. At 0 the ripples grow down the thread into beads on a string, the filaments between them thin and snap about row 80, and drops 15 LEDs across fall into a pool 14 rows deep, now and then with a satellite. At -1 the serum is nine times thinner and snaps into clean drops about row 45. Turned up, the beads stay joined longer: from about 0.35 the thread reaches the pool unbroken as a string of beads, and at 1, nine times thicker than at 0, the ripples barely grow and the pool, draining slower, stands 21 rows deep.\n// Knob 4: Flow. How fast the serum leaves the top edge, 2.2 times slower at -1 and 2.2 times faster at 1. At -1 it cannot keep a thread going and drips: a drop swells below the top edge to 21 LEDs across and lets go about every 10 seconds; at -0.5 the thread breaks about row 60 into drops 19 across; from 0.5 it runs into the pool before it can break, and the pool rises to 19 rows.\n\nconst W = 64, H = 128, NMAX = 800, PMAX = 64;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The thread, in LEDs and seconds at Speed 2, is a slender-thread model: a\n// chain of slices of fixed volume between nodes on the vertical axis, each\n// slice a short cylinder. The area of the surface pulls on the nodes\n// (surface tension over density SIG), gravity GR pulls them down, and\n// viscosity resists stretching. A still thread in this model grows ripples\n// at the rates of Rayleigh's theory, fastest at nine radii. The serum leaves\n// an opening of radius A0, ZN above the top edge and never drawn.\n// TS slows the whole film down without changing a shape, Q scales the\n// thread: every rate below is set so the same shapes come at any Q.\nconst TS = 0.7, Q = 1.18;\nconst ZN = -5, A0 = 3.4 * Q, GR = 12 * Q * TS * TS, SIG = 2200 * Q ** 3 * TS * TS, DZ = 0.9, HCUT = 0.13;\n// A tremor in the flow ripples the thread's radius by about a sixth as it\n// leaves, at 8.8 radii, the wavelength that grows fastest on a thread at\n// rest, wandering a little either side of it. The fall stretches the\n// ripples as they go.\nconst LAM = 30 * Q;\n// Viscosity at Viscosity 0, in LEDs squared a second.\nconst NU0 = 55 * Q * Q * TS;\n// The pool's rest surface, its depth into the wall, and the ripple speed.\nconst POOL = 117, DEPTH = 18, CW = 40;\n// Opening hue: gold.\nconst H0 = 0.14;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  const F = () => new Float64Array(NMAX);\n  params.s = {\n    hue: 0, rate: 1, nu: 30, v0: 16, begun: false, t: 0,\n    n: 0, z: F(), u: F(), x: F(), V: F(), L: F(), h: F(), G: F(), f: F(), m: F(), lk: new Uint8Array(NMAX),\n    ca: F(), cb: F(), cc: F(), cd: F(),\n    drops: [], noise: 0, sway: random() * 6.28, pour: 0, ph: 0, jit: 0,\n    lvl: POOL, eta: new Float64Array(W), etv: new Float64Array(W),\n    PH: new Float64Array(2 * H), PX: new Float64Array(2 * H), PD: new Float64Array(2 * H), PT: new Float64Array(2 * H),\n    ser: [0, 0, 0], wall: [0, 0, 0],\n  };\n  const S = params.s;\n  // The node at the opening.\n  S.n = 1;\n  S.z[0] = ZN;\n  S.u[0] = S.v0;\n  S.x[0] = 32;\n}\n\n// Where the serum leaves the top edge: the hand above drifts slowly from\n// side to side, and the thread below keeps the curve of where it has been.\nconst openX = (S) => 32 + 5 * sin(S.sway + S.t * 0.6 * TS) + 1.5 * sin(S.sway * 2.3 + S.t * 1.4 * TS);\n\nfunction insert(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i + 1, i, S.n);\n  u.copyWithin(i + 1, i, S.n);\n  x.copyWithin(i + 1, i, S.n);\n  V.copyWithin(i + 1, i, S.n);\n  lk.copyWithin(i + 1, i, S.n);\n  S.n++;\n}\n\nfunction remove(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i, i + 1, S.n);\n  u.copyWithin(i, i + 1, S.n);\n  x.copyWithin(i, i + 1, S.n);\n  V.copyWithin(i, i + 1, S.n);\n  lk.copyWithin(i, i + 1, S.n);\n  S.n--;\n}\n\n// Node i is kinematic: the opening, or a node already in the pool.\nconst kin = (S, i) => i === 0 || S.z[i] > S.lvl;\n\nfunction step(S, dt) {\n  const { z, u, V, L, h, G, f, m, lk, ca, cb, cc, cd } = S, n = S.n;\n  // The node at the opening moves at the speed the serum leaves it.\n  u[0] = S.v0;\n  // Slices: length and radius.\n  for (let i = 0; i \u003c n - 1; i++) {\n    G[i] = 0;\n    if (!lk[i]) continue;\n    L[i] = max(1e-4, z[i + 1] - z[i]);\n    h[i] = sqrt(V[i] / (PI * L[i]));\n  }\n  // dArea / dLength of each slice: half a cylinder at each end (with a flat\n  // cap at a free end), a frustum between the middles of every two slices.\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    const hi = h[i], Li = L[i], dhi = -hi / (2 * Li);\n    const top = i === 0 || !lk[i - 1], bot = i + 1 === n - 1 || !lk[i + 1];\n    if (top) G[i] += PI * (hi / 2 - (kin(S, i) ? 0 : (hi * hi) / Li));\n    if (bot) G[i] += PI * (hi / 2 - (kin(S, i + 1) ? 0 : (hi * hi) / Li));\n    else {\n      const j = i + 1, hj = h[j], Lj = L[j], dhj = -hj / (2 * Lj), d = (Li + Lj) / 2, dl = hi - hj, Q = sqrt(d * d + dl * dl), hs = hi + hj;\n      G[i] += PI * (dhi * Q + (hs * (d / 2 + dl * dhi)) / Q);\n      G[j] += PI * (dhj * Q + (hs * (d / 2 - dl * dhj)) / Q);\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    f[i] = 0;\n    m[i] = 0;\n  }\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    f[i] += SIG * G[i];\n    f[i + 1] -= SIG * G[i];\n    m[i] += V[i] / 2;\n    m[i + 1] += V[i] / 2;\n  }\n  for (let i = 0; i \u003c n; i++) if (!kin(S, i) && m[i] > 0) u[i] += dt * (f[i] / m[i] + GR);\n  // Viscosity, implicit: each slice resists stretching with 3 nu V / L^2,\n  // solved along each chain as a tridiagonal system.\n  const nu = S.nu;\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      for (let i = a; i \u003c= b; i++) {\n        const cl0 = i > a ? (3 * nu * V[i - 1]) / (L[i - 1] * L[i - 1]) : 0, cr = i \u003c b ? (3 * nu * V[i]) / (L[i] * L[i]) : 0;\n        if (kin(S, i)) {\n          ca[i] = 0;\n          cb[i] = 1;\n          cc[i] = 0;\n          cd[i] = u[i];\n        } else {\n          ca[i] = -dt * cl0;\n          cb[i] = m[i] + dt * (cl0 + cr);\n          cc[i] = -dt * cr;\n          cd[i] = m[i] * u[i];\n        }\n      }\n      for (let i = a + 1; i \u003c= b; i++) {\n        const w = ca[i] / cb[i - 1];\n        cb[i] -= w * cc[i - 1];\n        cd[i] -= w * cd[i - 1];\n      }\n      u[b] = cd[b] / cb[b];\n      for (let i = b - 1; i >= a; i--) u[i] = (cd[i] - cc[i] * u[i + 1]) / cb[i];\n    }\n    a = b + 1;\n  }\n  for (let i = 0; i \u003c n; i++) z[i] += dt * u[i];\n  S.t += dt;\n}\n\n// After a step: feed the opening, split long slices, merge short ones, cut\n// the thread where it has thinned to nothing, roll free pieces up into drops,\n// and pour what reaches the pool into it.\nfunction tidy(S) {\n  const { z, u, x, V, lk } = S;\n  // The opening: a new slice each time the last one has left it.\n  if (z[0] >= ZN + DZ && S.n \u003c NMAX - 2) {\n    insert(S, 0);\n    z[0] = z[1] - DZ;\n    u[0] = S.v0;\n    x[0] = openX(S);\n    S.noise += 0.35 * (random() - 0.5) - 0.12 * S.noise;\n    S.jit += 0.2 * (random() - 0.5) - 0.05 * S.jit;\n    S.ph += ((2 * PI * DZ) / LAM) * (1 + 0.25 * S.jit);\n    V[0] = PI * A0 * A0 * DZ * (1 + 0.35 * sin(S.ph) + 0.04 * S.noise);\n    lk[0] = 1;\n  }\n  z[0] = max(z[0], ZN);\n  for (let i = 0; i \u003c S.n - 1; i++) {\n    if (!lk[i]) continue;\n    const L = z[i + 1] - z[i], hh = sqrt(V[i] / (PI * max(L, 1e-4))), lo = 0.22 + 0.2 * hh;\n    if (L > max(1, 2.6 * lo) && S.n \u003c NMAX - 2) {\n      insert(S, i + 1);\n      z[i + 1] = (z[i] + z[i + 2]) / 2;\n      u[i + 1] = (u[i] + u[i + 2]) / 2;\n      x[i + 1] = (x[i] + x[i + 2]) / 2;\n      V[i] /= 2;\n      V[i + 1] = V[i];\n      lk[i + 1] = 1;\n    } else if (hh \u003c HCUT) {\n      // Pinch-off.\n      lk[i] = 0;\n      if (i > 0 && lk[i - 1]) V[i - 1] += V[i] / 2;\n      if (i + 1 \u003c S.n - 1 && lk[i + 1]) V[i + 1] += V[i] / 2;\n    } else if (L \u003c lo) {\n      // Merge with a neighbour by dropping the shared node.\n      const left = i > 0 && lk[i - 1] && (!(i + 1 \u003c S.n - 1 && lk[i + 1]) || z[i] - z[i - 1] \u003c z[i + 2] - z[i + 1]);\n      const right = !left && i + 1 \u003c S.n - 1 && lk[i + 1];\n      if (left) {\n        // The dropped node's momentum goes half to each neighbour.\n        const mr = (V[i - 1] + V[i]) / 2, ma = V[i - 1] / 2, mb = V[i] / 2;\n        u[i - 1] = (u[i - 1] * ma + (u[i] * mr) / 2) / (ma + mr / 2);\n        u[i + 1] = (u[i + 1] * mb + (u[i] * mr) / 2) / (mb + mr / 2);\n        V[i - 1] += V[i];\n        remove(S, i);\n        i--;\n      } else if (right) {\n        const j = i + 1, mr = (V[i] + V[j]) / 2;\n        u[i] = (u[i] * V[i] / 2 + (u[j] * mr) / 2) / (V[i] / 2 + mr / 2);\n        u[j + 1] = (u[j + 1] * V[j] / 2 + (u[j] * mr) / 2) / (V[j] / 2 + mr / 2);\n        V[i] += V[j];\n        lk[i] = 1;\n        remove(S, j);\n      }\n    }\n  }\n  // Nodes left with no slice on either side go, but not the one at the opening.\n  for (let i = S.n - 1; i > 0; i--) if (!lk[i - 1] && !(i \u003c S.n - 1 && lk[i])) remove(S, i);\n  // Chains: roll a short free piece into a drop; pour what is in the pool.\n  let a = 0;\n  while (a \u003c S.n) {\n    let b = a;\n    while (b \u003c S.n - 1 && lk[b]) b++;\n    if (b > a) {\n      let vol = 0, mom = 0, zc = 0, xc = 0;\n      for (let i = a; i \u003c b; i++) {\n        vol += V[i];\n        mom += (V[i] * (u[i] + u[i + 1])) / 2;\n        zc += (V[i] * (z[i] + z[i + 1])) / 2;\n        xc += (V[i] * (x[i] + x[i + 1])) / 2;\n      }\n      const R = (0.75 * vol / PI) ** (1 / 3), len = z[b] - z[a];\n      if (a > 0 && (b - a \u003c= 2 || len \u003c 2.3 * R) && z[b] \u003c= S.lvl && S.drops.length \u003c PMAX) {\n        S.drops.push({ y: zc / vol, x: xc / vol, v: mom / vol, R, vol, e: cl(len / (2 * R) - 1, -0.4, 0.6), ph: 0 });\n        for (let i = b; i >= a; i--) remove(S, i);\n        continue;\n      }\n      // Slices wholly under the surface go into the pool.\n      while (b > a && z[b - 1] > S.lvl + 1) {\n        S.pour += V[b - 1];\n        remove(S, b);\n        lk[b - 1] = 0;\n        b--;\n      }\n    }\n    a = b + 1;\n  }\n}\n\nfunction drops(S, d) {\n  const { eta, etv } = S;\n  for (const p of S.drops) {\n    p.v += GR * d;\n    p.y += p.v * d;\n    // A drop rings at its lowest mode, sqrt(8 SIG / R^3), damped by viscosity.\n    p.ph += sqrt((8 * SIG) / (p.R * p.R * p.R)) * d;\n    p.e *= exp((-d * (5 * S.nu + 4)) / (p.R * p.R));\n  }\n  S.drops = S.drops.filter((p) => {\n    if (p.y - 0.3 * p.R \u003c S.lvl + eta[cl(round(p.x), 0, W - 1)]) return true;\n    S.pour += p.vol;\n    const k = p.vol * p.v * 0.0004;\n    for (let i = -6; i \u003c= 6; i++) {\n      const c = cl(round(p.x) + i, 0, W - 1);\n      etv[c] -= k * exp(-(i * i) / (p.R * p.R + 2));\n    }\n    return false;\n  });\n  // The pool fills with what comes in and drains back toward its rest level.\n  // A thicker serum drains away more slowly, so its pool stands higher.\n  S.lvl += -S.pour / (W * DEPTH) + (POOL - S.lvl) * min(1, d / (3 * (S.nu / NU0) ** 0.45));\n  S.pour = 0;\n  for (let i = 0; i \u003c W; i++) {\n    const l = eta[i > 0 ? i - 1 : i], r = eta[i \u003c W - 1 ? i + 1 : i];\n    etv[i] += d * (CW * CW * (l + r - 2 * eta[i]) - 4 * etv[i]);\n  }\n  for (let i = 0; i \u003c W; i++) eta[i] = cl(eta[i] + d * etv[i], -5, 5);\n}\n\nfunction advance(S, d) {\n  // Substeps short enough for the stiffest slice: a capillary wave as short\n  // as the slice rings at sqrt(SIG h / 2) (pi / L)^2.\n  let left = d;\n  while (left > 1e-6) {\n    let w = 0;\n    for (let i = 0; i \u003c S.n - 1; i++) {\n      if (!S.lk[i]) continue;\n      const L = max(0.05, S.z[i + 1] - S.z[i]), hh = sqrt(S.V[i] / (PI * L));\n      w = max(w, (sqrt((SIG * hh) / 2) * PI * PI) / (L * L));\n    }\n    const dt = min(left, 0.6 / max(w, 1), 1 / 120);\n    step(S, dt);\n    tidy(S);\n    drops(S, dt);\n    left -= dt;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.nu = NU0 * 9 ** cl(k[2], -1, 1);\n  S.v0 = 34 * Q * TS * 2.2 ** cl(k[3], -1, 1);\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c 90; i++) advance(S, 1 / 30);\n    // The pool opens at the level where it drains as fast as it fills.\n    S.lvl = POOL - (PI * A0 * A0 * S.v0 * 3 * (S.nu / NU0) ** 0.45) / (W * DEPTH);\n  }\n  advance(S, d * S.rate);\n}\n\n// The radius and centre of the liquid at half-row samples.\nfunction profile(S) {\n  const { PH, PX, PD, z, x, V, lk } = S, n = S.n;\n  PH.fill(0);\n  PD.fill(0);\n  const put = (za, ha, xa, zb, hb, xb) => {\n    const k0 = max(0, Math.ceil(2 * za - 0.5)), k1 = min(2 * H - 1, floor(2 * zb - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const zz = (k + 0.5) / 2, t = zb > za ? (zz - za) / (zb - za) : 0, hh = ha + (hb - ha) * t;\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = xa + (xb - xa) * t;\n        PD[k] = zb > za ? (hb - ha) / (zb - za) : 0;\n      }\n    }\n  };\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      let pz = 0, ph = 0, px = 0;\n      for (let i = a; i \u003c b; i++) {\n        const L = max(1e-3, z[i + 1] - z[i]), hh = sqrt(V[i] / (PI * L)), zm = (z[i] + z[i + 1]) / 2, xm = (x[i] + x[i + 1]) / 2;\n        if (i === a) {\n          // The upper end: the thread runs off the top edge, a free end is capped.\n          if (a === 0) put(z[a] - 2, hh, xm, zm, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm - cap * sqrt(1 - t0 * t0), hh * t0, xm, zm - cap * sqrt(1 - t1 * t1), hh * t1, xm);\n            }\n        } else put(pz, ph, px, zm, hh, xm);\n        if (i === b - 1) {\n          if (z[b] > S.lvl) put(zm, hh, xm, S.lvl + 2, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm + cap * sqrt(1 - t1 * t1), hh * t1, xm, zm + cap * sqrt(1 - t0 * t0), hh * t0, xm);\n            }\n        }\n        pz = zm;\n        ph = hh;\n        px = xm;\n      }\n    }\n    a = b + 1;\n  }\n  for (const p of S.drops) {\n    const dd = p.e * cos(p.ph), ry = p.R * (1 + dd), rx = p.R / sqrt(1 + dd);\n    const k0 = max(0, Math.ceil(2 * (p.y - ry) - 0.5)), k1 = min(2 * H - 1, floor(2 * (p.y + ry) - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const w = ((k + 0.5) / 2 - p.y) / ry, hh = rx * sqrt(max(0, 1 - w * w));\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = p.x;\n        PD[k] = (-rx * w) / ry / max(0.15, sqrt(max(0, 1 - w * w)));\n      }\n    }\n  }\n  // Smooth the radius along the thread so the light runs over it without\n  // steps, and take the slope from the smoothed radius.\n  const { PT } = S;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let k = 0; k \u003c 2 * H; k++) {\n      const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n      PT[k] = PH[k] > 0 && a > 0 && b > 0 ? 0.25 * a + 0.5 * PH[k] + 0.25 * b : PH[k];\n    }\n    PH.set(PT);\n  }\n  for (let k = 0; k \u003c 2 * H; k++) {\n    const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n    if (PH[k] > 0 && a > 0 && b > 0) PD[k] = cl(b - a, -4, 4);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  profile(S);\n  const { PH, PX, PD, ser, wall, eta } = S;\n  const hue = S.hue + H0;\n  hsv(hue, 0.85, 1, ser);\n  // Orange and yellow go brown and olive on a dim wall: there the wall is\n  // greyed and lifted and the pool glows with the serum's own colour.\n  const wu = (hue - floor(hue) - 0.13) / 0.19, wm = wu * wu \u003c 1 ? (1 - wu * wu) ** 2 : 0;\n  hsv(hue, 0.14 - 0.1 * wm, 1 + 0.18 * wm, wall);\n  const [sr, sg, sb] = ser, [wr, wg, wb] = wall;\n  // Absorption per LED of path through the serum, per channel.\n  const ar = 0.3 * (1 - sr), ag = 0.3 * (1 - sg), ab = 0.3 * (1 - sb);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let R = 0, G = 0, B = 0;\n      const px = x + 0.5, e0 = eta[max(0, x - 1)], e1 = eta[x], e2 = eta[min(W - 1, x + 1)];\n      const surf = S.lvl + 0.25 * e0 + 0.5 * e1 + 0.25 * e2, slope = (e2 - e0) / 2, pf = cl(y + 1 - surf, 0, 1);\n      if (pf \u003c 1)\n        for (let sub = 0; sub \u003c 2; sub++) {\n          const k = 2 * y + sub, zz = (k + 0.5) / 2, wv = lit(px, zz);\n          let r = wv * wr, g = wv * wg, b = wv * wb;\n          const hh = PH[k], dx = px - PX[k], cov = cl(hh - abs(dx) + 0.5, 0, 1);\n          if (cov > 0 && hh > 0.2) {\n            // Clear serum: the wall behind seen magnified through it and\n            // tinted by the path the light takes, a darker rim, an inner\n            // glow on the far side, a highlight down the near side.\n            const uu = cl(dx / hh, -0.97, 0.97), c = sqrt(1 - uu * uu), hz = PD[k], nn = 1 / sqrt(1 + hz * hz);\n            const nx = uu * nn, ny = c * nn, nz = -hz * nn;\n            const lv = 1.35 * lit(PX[k] + dx * 0.55, zz + 0.45 * hh * hz), path = 2 * hh * c + 0.5;\n            const rim = 1 - 0.5 * exp(-c * 4), glow = 0.7 * max(0, 0.55 * nx + 0.25 * ny + 0.55 * nz) ** 2;\n            const sp = max(0, -0.4 * nx + 0.82 * ny - 0.42 * nz), spec = 0.95 * sp ** 40 + 0.12 * sp ** 6;\n            r += (lv * wr * exp(-ar * path) * rim + sr * glow + spec - r) * cov;\n            g += (lv * wg * exp(-ag * path) * rim + sg * glow + spec - g) * cov;\n            b += (lv * wb * exp(-ab * path) * rim + sb * glow + spec - b) * cov;\n          }\n          R += r / 2;\n          G += g / 2;\n          B += b / 2;\n        }\n      if (pf > 0) {\n        // The pool: the wall seen through it, a little lower and deeper in\n        // colour further down, lit from within, a dark band under the surface.\n        const top = max(0, y + 0.5 - surf), wv = lit(px, surf + top * 0.75) * 1.15, path = 3 + 0.3 * top;\n        const dk = 1 - 0.35 * exp(-((top - 1.4) ** 2)), gl = 0.2 + 0.06 * wm;\n        R += ((wv * wr * exp(-0.4 * ar * path) + gl * sr) * dk - R) * pf;\n        G += ((wv * wg * exp(-0.4 * ag * path) + gl * sg) * dk - G) * pf;\n        B += ((wv * wb * exp(-0.4 * ab * path) + gl * sb) * dk - B) * pf;\n      }\n      // The bright line of the surface, brighter where a ripple tilts it to the light.\n      const ln = exp(-(((y + 0.5 - surf) / 0.55) ** 2)) * (0.5 + cl(-slope * 0.8, -0.35, 0.5));\n      R += ln;\n      G += ln;\n      B += ln;\n      display.setPixel(x, y, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n    }\n}\n\n// The lit wall, as a level: pale, light from the upper left, soft vertical\n// flutes 8 LEDs apart for the beads to magnify.\nconst lit = (x, z) => (0.4 + 0.24 * (1 - x / 90 - z / 300)) * (1 + 0.07 * cos((2 * PI * x) / 8));\n","layer":{"id":"layer-serum-drip","type":"code","name":"serum-drip","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Serum Drip\n// Family:  cosmetic\n// Idea:    A thread of clear tinted serum falls from the top edge the height of the panel, necks and swells into beads on a string, the filaments between them thin and snap, and round drops with now and then a small satellite fall into a shallow pool at the bottom, while the stream keeps coming and the lit wall shows through every bead, magnified.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after a serum stretched from a dropper into a thread that beads up and breaks (the Plateau-Rayleigh instability, Joseph Plateau, 1873, and Lord Rayleigh, 1878)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=-1..1, Flow=-1..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, and the wall behind it takes a faint tint of the same hue. At 0 gold on a grey wall; at 0.04 yellow, 0.1 lime, 0.2 green, 0.36 aqua, 0.46 azure, 0.53 blue, 0.6 violet, 0.7 magenta, 0.78 rose, 0.86 red, 0.92 vermilion and 0.96 orange. From red-orange through gold to lime the wall is greyed and lifted a little and the pool lit from within, so the serum and its pool read amber, gold or lemon, never brown or olive.\n// Knob 2: Speed. At 2 the serum leaves the top edge at 28 LEDs a second, falls the height of the panel in about 3 seconds, and a drop breaks off about every 1.4 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Viscosity. At 0 the ripples grow down the thread into beads on a string, the filaments between them thin and snap about row 80, and drops 15 LEDs across fall into a pool 14 rows deep, now and then with a satellite. At -1 the serum is nine times thinner and snaps into clean drops about row 45. Turned up, the beads stay joined longer: from about 0.35 the thread reaches the pool unbroken as a string of beads, and at 1, nine times thicker than at 0, the ripples barely grow and the pool, draining slower, stands 21 rows deep.\n// Knob 4: Flow. How fast the serum leaves the top edge, 2.2 times slower at -1 and 2.2 times faster at 1. At -1 it cannot keep a thread going and drips: a drop swells below the top edge to 21 LEDs across and lets go about every 10 seconds; at -0.5 the thread breaks about row 60 into drops 19 across; from 0.5 it runs into the pool before it can break, and the pool rises to 19 rows.\n\nconst W = 64, H = 128, NMAX = 800, PMAX = 64;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The thread, in LEDs and seconds at Speed 2, is a slender-thread model: a\n// chain of slices of fixed volume between nodes on the vertical axis, each\n// slice a short cylinder. The area of the surface pulls on the nodes\n// (surface tension over density SIG), gravity GR pulls them down, and\n// viscosity resists stretching. A still thread in this model grows ripples\n// at the rates of Rayleigh's theory, fastest at nine radii. The serum leaves\n// an opening of radius A0, ZN above the top edge and never drawn.\n// TS slows the whole film down without changing a shape, Q scales the\n// thread: every rate below is set so the same shapes come at any Q.\nconst TS = 0.7, Q = 1.18;\nconst ZN = -5, A0 = 3.4 * Q, GR = 12 * Q * TS * TS, SIG = 2200 * Q ** 3 * TS * TS, DZ = 0.9, HCUT = 0.13;\n// A tremor in the flow ripples the thread's radius by about a sixth as it\n// leaves, at 8.8 radii, the wavelength that grows fastest on a thread at\n// rest, wandering a little either side of it. The fall stretches the\n// ripples as they go.\nconst LAM = 30 * Q;\n// Viscosity at Viscosity 0, in LEDs squared a second.\nconst NU0 = 55 * Q * Q * TS;\n// The pool's rest surface, its depth into the wall, and the ripple speed.\nconst POOL = 117, DEPTH = 18, CW = 40;\n// Opening hue: gold.\nconst H0 = 0.14;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  const F = () => new Float64Array(NMAX);\n  params.s = {\n    hue: 0, rate: 1, nu: 30, v0: 16, begun: false, t: 0,\n    n: 0, z: F(), u: F(), x: F(), V: F(), L: F(), h: F(), G: F(), f: F(), m: F(), lk: new Uint8Array(NMAX),\n    ca: F(), cb: F(), cc: F(), cd: F(),\n    drops: [], noise: 0, sway: random() * 6.28, pour: 0, ph: 0, jit: 0,\n    lvl: POOL, eta: new Float64Array(W), etv: new Float64Array(W),\n    PH: new Float64Array(2 * H), PX: new Float64Array(2 * H), PD: new Float64Array(2 * H), PT: new Float64Array(2 * H),\n    ser: [0, 0, 0], wall: [0, 0, 0],\n  };\n  const S = params.s;\n  // The node at the opening.\n  S.n = 1;\n  S.z[0] = ZN;\n  S.u[0] = S.v0;\n  S.x[0] = 32;\n}\n\n// Where the serum leaves the top edge: the hand above drifts slowly from\n// side to side, and the thread below keeps the curve of where it has been.\nconst openX = (S) => 32 + 5 * sin(S.sway + S.t * 0.6 * TS) + 1.5 * sin(S.sway * 2.3 + S.t * 1.4 * TS);\n\nfunction insert(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i + 1, i, S.n);\n  u.copyWithin(i + 1, i, S.n);\n  x.copyWithin(i + 1, i, S.n);\n  V.copyWithin(i + 1, i, S.n);\n  lk.copyWithin(i + 1, i, S.n);\n  S.n++;\n}\n\nfunction remove(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i, i + 1, S.n);\n  u.copyWithin(i, i + 1, S.n);\n  x.copyWithin(i, i + 1, S.n);\n  V.copyWithin(i, i + 1, S.n);\n  lk.copyWithin(i, i + 1, S.n);\n  S.n--;\n}\n\n// Node i is kinematic: the opening, or a node already in the pool.\nconst kin = (S, i) => i === 0 || S.z[i] > S.lvl;\n\nfunction step(S, dt) {\n  const { z, u, V, L, h, G, f, m, lk, ca, cb, cc, cd } = S, n = S.n;\n  // The node at the opening moves at the speed the serum leaves it.\n  u[0] = S.v0;\n  // Slices: length and radius.\n  for (let i = 0; i \u003c n - 1; i++) {\n    G[i] = 0;\n    if (!lk[i]) continue;\n    L[i] = max(1e-4, z[i + 1] - z[i]);\n    h[i] = sqrt(V[i] / (PI * L[i]));\n  }\n  // dArea / dLength of each slice: half a cylinder at each end (with a flat\n  // cap at a free end), a frustum between the middles of every two slices.\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    const hi = h[i], Li = L[i], dhi = -hi / (2 * Li);\n    const top = i === 0 || !lk[i - 1], bot = i + 1 === n - 1 || !lk[i + 1];\n    if (top) G[i] += PI * (hi / 2 - (kin(S, i) ? 0 : (hi * hi) / Li));\n    if (bot) G[i] += PI * (hi / 2 - (kin(S, i + 1) ? 0 : (hi * hi) / Li));\n    else {\n      const j = i + 1, hj = h[j], Lj = L[j], dhj = -hj / (2 * Lj), d = (Li + Lj) / 2, dl = hi - hj, Q = sqrt(d * d + dl * dl), hs = hi + hj;\n      G[i] += PI * (dhi * Q + (hs * (d / 2 + dl * dhi)) / Q);\n      G[j] += PI * (dhj * Q + (hs * (d / 2 - dl * dhj)) / Q);\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    f[i] = 0;\n    m[i] = 0;\n  }\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    f[i] += SIG * G[i];\n    f[i + 1] -= SIG * G[i];\n    m[i] += V[i] / 2;\n    m[i + 1] += V[i] / 2;\n  }\n  for (let i = 0; i \u003c n; i++) if (!kin(S, i) && m[i] > 0) u[i] += dt * (f[i] / m[i] + GR);\n  // Viscosity, implicit: each slice resists stretching with 3 nu V / L^2,\n  // solved along each chain as a tridiagonal system.\n  const nu = S.nu;\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      for (let i = a; i \u003c= b; i++) {\n        const cl0 = i > a ? (3 * nu * V[i - 1]) / (L[i - 1] * L[i - 1]) : 0, cr = i \u003c b ? (3 * nu * V[i]) / (L[i] * L[i]) : 0;\n        if (kin(S, i)) {\n          ca[i] = 0;\n          cb[i] = 1;\n          cc[i] = 0;\n          cd[i] = u[i];\n        } else {\n          ca[i] = -dt * cl0;\n          cb[i] = m[i] + dt * (cl0 + cr);\n          cc[i] = -dt * cr;\n          cd[i] = m[i] * u[i];\n        }\n      }\n      for (let i = a + 1; i \u003c= b; i++) {\n        const w = ca[i] / cb[i - 1];\n        cb[i] -= w * cc[i - 1];\n        cd[i] -= w * cd[i - 1];\n      }\n      u[b] = cd[b] / cb[b];\n      for (let i = b - 1; i >= a; i--) u[i] = (cd[i] - cc[i] * u[i + 1]) / cb[i];\n    }\n    a = b + 1;\n  }\n  for (let i = 0; i \u003c n; i++) z[i] += dt * u[i];\n  S.t += dt;\n}\n\n// After a step: feed the opening, split long slices, merge short ones, cut\n// the thread where it has thinned to nothing, roll free pieces up into drops,\n// and pour what reaches the pool into it.\nfunction tidy(S) {\n  const { z, u, x, V, lk } = S;\n  // The opening: a new slice each time the last one has left it.\n  if (z[0] >= ZN + DZ && S.n \u003c NMAX - 2) {\n    insert(S, 0);\n    z[0] = z[1] - DZ;\n    u[0] = S.v0;\n    x[0] = openX(S);\n    S.noise += 0.35 * (random() - 0.5) - 0.12 * S.noise;\n    S.jit += 0.2 * (random() - 0.5) - 0.05 * S.jit;\n    S.ph += ((2 * PI * DZ) / LAM) * (1 + 0.25 * S.jit);\n    V[0] = PI * A0 * A0 * DZ * (1 + 0.35 * sin(S.ph) + 0.04 * S.noise);\n    lk[0] = 1;\n  }\n  z[0] = max(z[0], ZN);\n  for (let i = 0; i \u003c S.n - 1; i++) {\n    if (!lk[i]) continue;\n    const L = z[i + 1] - z[i], hh = sqrt(V[i] / (PI * max(L, 1e-4))), lo = 0.22 + 0.2 * hh;\n    if (L > max(1, 2.6 * lo) && S.n \u003c NMAX - 2) {\n      insert(S, i + 1);\n      z[i + 1] = (z[i] + z[i + 2]) / 2;\n      u[i + 1] = (u[i] + u[i + 2]) / 2;\n      x[i + 1] = (x[i] + x[i + 2]) / 2;\n      V[i] /= 2;\n      V[i + 1] = V[i];\n      lk[i + 1] = 1;\n    } else if (hh \u003c HCUT) {\n      // Pinch-off.\n      lk[i] = 0;\n      if (i > 0 && lk[i - 1]) V[i - 1] += V[i] / 2;\n      if (i + 1 \u003c S.n - 1 && lk[i + 1]) V[i + 1] += V[i] / 2;\n    } else if (L \u003c lo) {\n      // Merge with a neighbour by dropping the shared node.\n      const left = i > 0 && lk[i - 1] && (!(i + 1 \u003c S.n - 1 && lk[i + 1]) || z[i] - z[i - 1] \u003c z[i + 2] - z[i + 1]);\n      const right = !left && i + 1 \u003c S.n - 1 && lk[i + 1];\n      if (left) {\n        // The dropped node's momentum goes half to each neighbour.\n        const mr = (V[i - 1] + V[i]) / 2, ma = V[i - 1] / 2, mb = V[i] / 2;\n        u[i - 1] = (u[i - 1] * ma + (u[i] * mr) / 2) / (ma + mr / 2);\n        u[i + 1] = (u[i + 1] * mb + (u[i] * mr) / 2) / (mb + mr / 2);\n        V[i - 1] += V[i];\n        remove(S, i);\n        i--;\n      } else if (right) {\n        const j = i + 1, mr = (V[i] + V[j]) / 2;\n        u[i] = (u[i] * V[i] / 2 + (u[j] * mr) / 2) / (V[i] / 2 + mr / 2);\n        u[j + 1] = (u[j + 1] * V[j] / 2 + (u[j] * mr) / 2) / (V[j] / 2 + mr / 2);\n        V[i] += V[j];\n        lk[i] = 1;\n        remove(S, j);\n      }\n    }\n  }\n  // Nodes left with no slice on either side go, but not the one at the opening.\n  for (let i = S.n - 1; i > 0; i--) if (!lk[i - 1] && !(i \u003c S.n - 1 && lk[i])) remove(S, i);\n  // Chains: roll a short free piece into a drop; pour what is in the pool.\n  let a = 0;\n  while (a \u003c S.n) {\n    let b = a;\n    while (b \u003c S.n - 1 && lk[b]) b++;\n    if (b > a) {\n      let vol = 0, mom = 0, zc = 0, xc = 0;\n      for (let i = a; i \u003c b; i++) {\n        vol += V[i];\n        mom += (V[i] * (u[i] + u[i + 1])) / 2;\n        zc += (V[i] * (z[i] + z[i + 1])) / 2;\n        xc += (V[i] * (x[i] + x[i + 1])) / 2;\n      }\n      const R = (0.75 * vol / PI) ** (1 / 3), len = z[b] - z[a];\n      if (a > 0 && (b - a \u003c= 2 || len \u003c 2.3 * R) && z[b] \u003c= S.lvl && S.drops.length \u003c PMAX) {\n        S.drops.push({ y: zc / vol, x: xc / vol, v: mom / vol, R, vol, e: cl(len / (2 * R) - 1, -0.4, 0.6), ph: 0 });\n        for (let i = b; i >= a; i--) remove(S, i);\n        continue;\n      }\n      // Slices wholly under the surface go into the pool.\n      while (b > a && z[b - 1] > S.lvl + 1) {\n        S.pour += V[b - 1];\n        remove(S, b);\n        lk[b - 1] = 0;\n        b--;\n      }\n    }\n    a = b + 1;\n  }\n}\n\nfunction drops(S, d) {\n  const { eta, etv } = S;\n  for (const p of S.drops) {\n    p.v += GR * d;\n    p.y += p.v * d;\n    // A drop rings at its lowest mode, sqrt(8 SIG / R^3), damped by viscosity.\n    p.ph += sqrt((8 * SIG) / (p.R * p.R * p.R)) * d;\n    p.e *= exp((-d * (5 * S.nu + 4)) / (p.R * p.R));\n  }\n  S.drops = S.drops.filter((p) => {\n    if (p.y - 0.3 * p.R \u003c S.lvl + eta[cl(round(p.x), 0, W - 1)]) return true;\n    S.pour += p.vol;\n    const k = p.vol * p.v * 0.0004;\n    for (let i = -6; i \u003c= 6; i++) {\n      const c = cl(round(p.x) + i, 0, W - 1);\n      etv[c] -= k * exp(-(i * i) / (p.R * p.R + 2));\n    }\n    return false;\n  });\n  // The pool fills with what comes in and drains back toward its rest level.\n  // A thicker serum drains away more slowly, so its pool stands higher.\n  S.lvl += -S.pour / (W * DEPTH) + (POOL - S.lvl) * min(1, d / (3 * (S.nu / NU0) ** 0.45));\n  S.pour = 0;\n  for (let i = 0; i \u003c W; i++) {\n    const l = eta[i > 0 ? i - 1 : i], r = eta[i \u003c W - 1 ? i + 1 : i];\n    etv[i] += d * (CW * CW * (l + r - 2 * eta[i]) - 4 * etv[i]);\n  }\n  for (let i = 0; i \u003c W; i++) eta[i] = cl(eta[i] + d * etv[i], -5, 5);\n}\n\nfunction advance(S, d) {\n  // Substeps short enough for the stiffest slice: a capillary wave as short\n  // as the slice rings at sqrt(SIG h / 2) (pi / L)^2.\n  let left = d;\n  while (left > 1e-6) {\n    let w = 0;\n    for (let i = 0; i \u003c S.n - 1; i++) {\n      if (!S.lk[i]) continue;\n      const L = max(0.05, S.z[i + 1] - S.z[i]), hh = sqrt(S.V[i] / (PI * L));\n      w = max(w, (sqrt((SIG * hh) / 2) * PI * PI) / (L * L));\n    }\n    const dt = min(left, 0.6 / max(w, 1), 1 / 120);\n    step(S, dt);\n    tidy(S);\n    drops(S, dt);\n    left -= dt;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.nu = NU0 * 9 ** cl(k[2], -1, 1);\n  S.v0 = 34 * Q * TS * 2.2 ** cl(k[3], -1, 1);\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c 90; i++) advance(S, 1 / 30);\n    // The pool opens at the level where it drains as fast as it fills.\n    S.lvl = POOL - (PI * A0 * A0 * S.v0 * 3 * (S.nu / NU0) ** 0.45) / (W * DEPTH);\n  }\n  advance(S, d * S.rate);\n}\n\n// The radius and centre of the liquid at half-row samples.\nfunction profile(S) {\n  const { PH, PX, PD, z, x, V, lk } = S, n = S.n;\n  PH.fill(0);\n  PD.fill(0);\n  const put = (za, ha, xa, zb, hb, xb) => {\n    const k0 = max(0, Math.ceil(2 * za - 0.5)), k1 = min(2 * H - 1, floor(2 * zb - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const zz = (k + 0.5) / 2, t = zb > za ? (zz - za) / (zb - za) : 0, hh = ha + (hb - ha) * t;\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = xa + (xb - xa) * t;\n        PD[k] = zb > za ? (hb - ha) / (zb - za) : 0;\n      }\n    }\n  };\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      let pz = 0, ph = 0, px = 0;\n      for (let i = a; i \u003c b; i++) {\n        const L = max(1e-3, z[i + 1] - z[i]), hh = sqrt(V[i] / (PI * L)), zm = (z[i] + z[i + 1]) / 2, xm = (x[i] + x[i + 1]) / 2;\n        if (i === a) {\n          // The upper end: the thread runs off the top edge, a free end is capped.\n          if (a === 0) put(z[a] - 2, hh, xm, zm, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm - cap * sqrt(1 - t0 * t0), hh * t0, xm, zm - cap * sqrt(1 - t1 * t1), hh * t1, xm);\n            }\n        } else put(pz, ph, px, zm, hh, xm);\n        if (i === b - 1) {\n          if (z[b] > S.lvl) put(zm, hh, xm, S.lvl + 2, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm + cap * sqrt(1 - t1 * t1), hh * t1, xm, zm + cap * sqrt(1 - t0 * t0), hh * t0, xm);\n            }\n        }\n        pz = zm;\n        ph = hh;\n        px = xm;\n      }\n    }\n    a = b + 1;\n  }\n  for (const p of S.drops) {\n    const dd = p.e * cos(p.ph), ry = p.R * (1 + dd), rx = p.R / sqrt(1 + dd);\n    const k0 = max(0, Math.ceil(2 * (p.y - ry) - 0.5)), k1 = min(2 * H - 1, floor(2 * (p.y + ry) - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const w = ((k + 0.5) / 2 - p.y) / ry, hh = rx * sqrt(max(0, 1 - w * w));\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = p.x;\n        PD[k] = (-rx * w) / ry / max(0.15, sqrt(max(0, 1 - w * w)));\n      }\n    }\n  }\n  // Smooth the radius along the thread so the light runs over it without\n  // steps, and take the slope from the smoothed radius.\n  const { PT } = S;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let k = 0; k \u003c 2 * H; k++) {\n      const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n      PT[k] = PH[k] > 0 && a > 0 && b > 0 ? 0.25 * a + 0.5 * PH[k] + 0.25 * b : PH[k];\n    }\n    PH.set(PT);\n  }\n  for (let k = 0; k \u003c 2 * H; k++) {\n    const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n    if (PH[k] > 0 && a > 0 && b > 0) PD[k] = cl(b - a, -4, 4);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  profile(S);\n  const { PH, PX, PD, ser, wall, eta } = S;\n  const hue = S.hue + H0;\n  hsv(hue, 0.85, 1, ser);\n  // Orange and yellow go brown and olive on a dim wall: there the wall is\n  // greyed and lifted and the pool glows with the serum's own colour.\n  const wu = (hue - floor(hue) - 0.13) / 0.19, wm = wu * wu \u003c 1 ? (1 - wu * wu) ** 2 : 0;\n  hsv(hue, 0.14 - 0.1 * wm, 1 + 0.18 * wm, wall);\n  const [sr, sg, sb] = ser, [wr, wg, wb] = wall;\n  // Absorption per LED of path through the serum, per channel.\n  const ar = 0.3 * (1 - sr), ag = 0.3 * (1 - sg), ab = 0.3 * (1 - sb);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let R = 0, G = 0, B = 0;\n      const px = x + 0.5, e0 = eta[max(0, x - 1)], e1 = eta[x], e2 = eta[min(W - 1, x + 1)];\n      const surf = S.lvl + 0.25 * e0 + 0.5 * e1 + 0.25 * e2, slope = (e2 - e0) / 2, pf = cl(y + 1 - surf, 0, 1);\n      if (pf \u003c 1)\n        for (let sub = 0; sub \u003c 2; sub++) {\n          const k = 2 * y + sub, zz = (k + 0.5) / 2, wv = lit(px, zz);\n          let r = wv * wr, g = wv * wg, b = wv * wb;\n          const hh = PH[k], dx = px - PX[k], cov = cl(hh - abs(dx) + 0.5, 0, 1);\n          if (cov > 0 && hh > 0.2) {\n            // Clear serum: the wall behind seen magnified through it and\n            // tinted by the path the light takes, a darker rim, an inner\n            // glow on the far side, a highlight down the near side.\n            const uu = cl(dx / hh, -0.97, 0.97), c = sqrt(1 - uu * uu), hz = PD[k], nn = 1 / sqrt(1 + hz * hz);\n            const nx = uu * nn, ny = c * nn, nz = -hz * nn;\n            const lv = 1.35 * lit(PX[k] + dx * 0.55, zz + 0.45 * hh * hz), path = 2 * hh * c + 0.5;\n            const rim = 1 - 0.5 * exp(-c * 4), glow = 0.7 * max(0, 0.55 * nx + 0.25 * ny + 0.55 * nz) ** 2;\n            const sp = max(0, -0.4 * nx + 0.82 * ny - 0.42 * nz), spec = 0.95 * sp ** 40 + 0.12 * sp ** 6;\n            r += (lv * wr * exp(-ar * path) * rim + sr * glow + spec - r) * cov;\n            g += (lv * wg * exp(-ag * path) * rim + sg * glow + spec - g) * cov;\n            b += (lv * wb * exp(-ab * path) * rim + sb * glow + spec - b) * cov;\n          }\n          R += r / 2;\n          G += g / 2;\n          B += b / 2;\n        }\n      if (pf > 0) {\n        // The pool: the wall seen through it, a little lower and deeper in\n        // colour further down, lit from within, a dark band under the surface.\n        const top = max(0, y + 0.5 - surf), wv = lit(px, surf + top * 0.75) * 1.15, path = 3 + 0.3 * top;\n        const dk = 1 - 0.35 * exp(-((top - 1.4) ** 2)), gl = 0.2 + 0.06 * wm;\n        R += ((wv * wr * exp(-0.4 * ar * path) + gl * sr) * dk - R) * pf;\n        G += ((wv * wg * exp(-0.4 * ag * path) + gl * sg) * dk - G) * pf;\n        B += ((wv * wb * exp(-0.4 * ab * path) + gl * sb) * dk - B) * pf;\n      }\n      // The bright line of the surface, brighter where a ripple tilts it to the light.\n      const ln = exp(-(((y + 0.5 - surf) / 0.55) ** 2)) * (0.5 + cl(-slope * 0.8, -0.35, 0.5));\n      R += ln;\n      G += ln;\n      B += ln;\n      display.setPixel(x, y, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n    }\n}\n\n// The lit wall, as a level: pale, light from the upper left, soft vertical\n// flutes 8 LEDs apart for the beads to magnify.\nconst lit = (x, z) => (0.4 + 0.24 * (1 - x / 90 - z / 300)) * (1 + 0.07 * cos((2 * PI * x) / 8));\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Viscosity=-1..1, Flow=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel, and the wall behind it takes a faint tint of the same hue. At 0 gold on a grey wall; at 0.04 yellow, 0.1 lime, 0.2 green, 0.36 aqua, 0.46 azure, 0.53 blue, 0.6 violet, 0.7 magenta, 0.78 rose, 0.86 red, 0.92 vermilion and 0.96 orange. From red-orange through gold to lime the wall is greyed and lifted a little and the pool lit from within, so the serum and its pool read amber, gold or lemon, never brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the serum leaves the top edge at 28 LEDs a second, falls the height of the panel in about 3 seconds, and a drop breaks off about every 1.4 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Viscosity","min":-1,"max":1,"about":"At 0 the ripples grow down the thread into beads on a string, the filaments between them thin and snap about row 80, and drops 15 LEDs across fall into a pool 14 rows deep, now and then with a satellite. At -1 the serum is nine times thinner and snaps into clean drops about row 45. Turned up, the beads stay joined longer: from about 0.35 the thread reaches the pool unbroken as a string of beads, and at 1, nine times thicker than at 0, the ripples barely grow and the pool, draining slower, stands 21 rows deep."},{"name":"Flow","min":-1,"max":1,"about":"How fast the serum leaves the top edge, 2.2 times slower at -1 and 2.2 times faster at 1. At -1 it cannot keep a thread going and drips: a drop swells below the top edge to 21 LEDs across and lets go about every 10 seconds; at -0.5 the thread breaks about row 60 into drops 19 across; from 0.5 it runs into the pool before it can break, and the pool rises to 19 rows."}],"start":[0,2,0,0.06],"measures":{"motion":0.1144,"detail":0.0191,"edges":0.1005,"complexity":1.4238,"coverage":1,"colour":0.2611,"drift":0.048},"knobResponse":[0.2045,0.0526,0.0374,0.0514]},{"slug":"serum-fingers","title":"Serum Fingers","family":"cosmetic","round":38,"note":"유리판 두 장 사이 진한 크림에 묽은 세럼을 밑에서 밀어 넣으면, 둥근 손가락이 부풀고 갈라지며 위로 다투어 올라가요. LED 는 세럼이 닿을 때 한 번만 바뀌고, 한 손가락이 꼭대기에 닿으면 크림이 가는 손가락부터 다시 덮고 새로 밀어요. K3 은 표면 장력을 낮춰 굵은 손가락 셋을 가는 손가락 열둘로 바꾸고, K1 을 누르면 크림이 바로 다시 덮어요.","idea":"A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.","buttons":"K1 tap: the cream closes back now and a new press begins.","code":"// ===== Patternflow pattern =====\n// Title:   Serum Fingers\n// Family:  cosmetic\n// Idea:    A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after a thin serum pressed into thick cream between two glass plates (Saffman-Taylor viscous fingering, Philip Saffman and Geoffrey Taylor, 1958, in a Hele-Shaw cell, Henry Selby Hele-Shaw, 1898)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in.\n// Knob 2: Speed. At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster.\n// Knob 3: Fingers. Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press.\n// Knob 4: Inlet. Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press.\n// Buttons: K1 tap: the cream closes back now and a new press begins.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, cos, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Serum pressed in, in LEDs of area a second at Speed 2.\nconst Q0 = 580;\n// A fresh run opens with the first PRE seconds of a press already in.\nconst PRE = 0.6;\n// The cream gives way at a front LED as the pressure drop across it to the\n// power ETA, times the roughness of the glass there, times 1 + SIG phi, where\n// phi is how much more of the disc round it is serum than at a flat front:\n// below 0 at a fingertip, which is held back, above 0 in a crevice, which is\n// filled up to CAP times faster. That is the surface tension that keeps the\n// fingers round. SIG is for Fingers 0.\nconst ETA = 0.7, SIG = 2, CAP = 1.6;\n// Gauss-Seidel sweeps of the pressure each frame, over-relaxed.\nconst SWEEPS = 12, OMEGA = 1.9;\n// The disc the curvature is read over: cells within RC of a front cell. A\n// flat front fills PHI0 of it with serum.\nconst RC = 3.2;\nconst DISC = [];\nfor (let dy = -3; dy \u003c= 3; dy++) for (let dx = -3; dx \u003c= 3; dx++) if (dx * dx + dy * dy \u003c= RC * RC) DISC.push(dx, dy);\nlet PHI0 = 0;\n{\n  let a = 0, b = 0;\n  for (let k = 0; k \u003c DISC.length; k += 2) {\n    b++;\n    if (DISC[k + 1] \u003c 0) a++;\n  }\n  PHI0 = a / b;\n}\n// Opening hue: aqua serum.\nconst H0 = 0.5;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, fingers: 0, inlet: 0, sigma: SIG, begun: false,\n    st: new Uint8Array(N), fill: new Float32Array(N), P: new Float32Array(N),\n    eta: new Float32Array(N), phi: new Float32Array(N), band: new Float32Array(N), fill0: new Float32Array(N), dist: new Float32Array(N),\n    seed: new Uint8Array(N), tex: new Float32Array(N), front: new Int32Array(N), nf: 0,\n    vol: 0, mode: 0, timer: 0, maxd: 1,\n    A: new Float32Array(4 * N), T: new Float32Array(4 * N), ser: [0, 0, 0], pale: [0, 0, 0], cream: [0, 0, 0],\n  };\n  const S = params.s;\n  // The cream's own static mottle, a few soft lumps.\n  const lumps = [];\n  for (let k = 0; k \u003c 14; k++) lumps.push([random() * W, random() * H, 6 + random() * 14, random() - 0.5]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v = 0;\n      for (const [lx, ly, r, a] of lumps) v += a * exp(-((x - lx) ** 2 + (y - ly) ** 2) / (r * r));\n      S.tex[y * W + x] = v;\n    }\n}\n\n// A fresh press: the inlet filled, the rest cream, new roughness in the glass.\nfunction fresh(S) {\n  const { st, fill, P, eta, band, seed } = S;\n  st.fill(0);\n  fill.fill(0);\n  seed.fill(0);\n  // The inlet: a slot along the whole bottom at Inlet 0, narrowing to a half\n  // disc 5 LEDs across at the bottom centre at 1, its lip rounded at each\n  // end. Along the slot the lip is waved, from 3 waves across the panel at\n  // Fingers -1 to 12 at 1, so the fingers start at the width they would grow.\n  const half = 32 - 30 * S.inlet, RE = 2.6, nb = round(6 * 2 ** S.fingers), ph = random() * 2 * PI, amps = [];\n  for (let k = 0; k \u003c 16; k++) amps.push(2 + 4 * random());\n  for (let y = H - 6; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = max(0, abs(x + 0.5 - W / 2) - (half - RE)), up = H - (y + 0.5);\n      const wv = (2 * PI * nb * (x + 0.5)) / W + ph, amp = amps[floor(wv / (2 * PI) + 0.5) % amps.length];\n      const lip = dx > 0 ? sqrt(max(0, RE * RE - dx * dx)) : 2 + amp * (0.5 + 0.5 * cos(wv));\n      if (dx \u003c= RE && up \u003c= lip) {\n        const p = y * W + x;\n        st[p] = 1;\n        fill[p] = 1;\n        seed[p] = 1;\n        band[p] = 0;\n      }\n    }\n  // Roughness of the glass: two octaves of smooth noise, 8 and 4 LEDs\n  // across, so the front is nudged at the scale of a finger, not per LED.\n  const g8 = [], g4 = [];\n  for (let k = 0; k \u003c 9 * 17; k++) g8.push(random() - 0.5);\n  for (let k = 0; k \u003c 17 * 33; k++) g4.push(random() - 0.5);\n  const vn = (g, s, gw, x, y) => {\n    const u = x / s, v = y / s, i = floor(u), j = floor(v), fu = u - i, fv = v - j, a = j * gw + i;\n    return (g[a] * (1 - fu) + g[a + 1] * fu) * (1 - fv) + (g[a + gw] * (1 - fu) + g[a + gw + 1] * fu) * fv;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      eta[p] = 1 + 0.5 * vn(g8, 8, 9, x, y) + 0.3 * vn(g4, 4, 17, x, y);\n      P[p] = st[p] ? 1 : y / H;\n    }\n  S.vol = 0;\n  S.mode = 0;\n  S.timer = 0;\n}\n\n// The front: every cream LED next to the serum, and phi there.\nfunction boundary(S) {\n  const { st, fill, front, phi } = S;\n  let nf = 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (st[p]) continue;\n      if ((x > 0 && st[p - 1]) || (x \u003c W - 1 && st[p + 1]) || (y > 0 && st[p - W]) || (y \u003c H - 1 && st[p + W])) {\n        let s = 0, c = 0;\n        for (let k = 0; k \u003c DISC.length; k += 2) {\n          const xx = x + DISC[k], yy = y + DISC[k + 1];\n          if (xx \u003c 0 || xx >= W || yy >= H) continue;\n          c++;\n          if (yy \u003c 0) continue;\n          const q = yy * W + xx;\n          s += st[q] ? 1 : fill[q];\n        }\n        phi[p] = s / c - PHI0;\n        front[nf++] = p;\n      }\n    }\n  S.nf = nf;\n}\n\n// Over-relaxed sweeps of Laplace's equation for the pressure in the cream:\n// 1 in the serum, which is so thin it holds one pressure throughout, 0 at the\n// top edge, where the cream leaves the cell, and no flow through the sides\n// and the bottom.\nfunction relax(S, sweeps) {\n  const { st, P } = S;\n  for (let it = 0; it \u003c sweeps; it++)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        if (st[p]) continue;\n        let s = 0, c = 0;\n        if (y === 0) c++;\n        else {\n          s += st[p - W] ? 1 : P[p - W];\n          c++;\n        }\n        if (y \u003c H - 1) {\n          s += st[p + W] ? 1 : P[p + W];\n          c++;\n        }\n        if (x > 0) {\n          s += st[p - 1] ? 1 : P[p - 1];\n          c++;\n        }\n        if (x \u003c W - 1) {\n          s += st[p + 1] ? 1 : P[p + 1];\n          c++;\n        }\n        P[p] += OMEGA * (s / c - P[p]);\n      }\n}\n\nconst speed = (S, p) => max(0, 1 - S.P[p]) ** ETA * S.eta[p] * cl(1 + S.sigma * S.phi[p], 0, CAP);\n\n// Press in vol LEDs of serum, shared among the front LEDs by how fast the\n// cream gives way at each.\nfunction grow(S, vol) {\n  const { st, fill, P, band, front, nf } = S;\n  let tot = 0;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k];\n    tot += speed(S, p);\n  }\n  if (tot \u003c= 0) return;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k], v = speed(S, p);\n    if (v \u003c= 0) continue;\n    if (fill[p] === 0) band[p] = S.vol;\n    fill[p] += (vol * v) / tot;\n    if (fill[p] >= 1) {\n      fill[p] = 1;\n      st[p] = 1;\n      P[p] = 1;\n      // A finger at the top edge: the cell is full.\n      if (p \u003c 2 * W) S.mode = 1;\n    }\n  }\n  S.vol += vol;\n}\n\n// The cream closing back: every serum LED's distance to the cream, so the\n// fingers thin from their sides and the trunks go last.\nfunction startClear(S) {\n  const { st, fill, fill0, dist, seed } = S;\n  for (let p = 0; p \u003c N; p++) {\n    fill0[p] = fill[p];\n    dist[p] = fill[p] >= 1 && !seed[p] ? 1e9 : 0;\n  }\n  const D = 1, DD = 1.414;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x > 0) d = min(d, dist[p - 1] + D);\n      if (y > 0) {\n        d = min(d, dist[p - W] + D);\n        if (x > 0) d = min(d, dist[p - W - 1] + DD);\n        if (x \u003c W - 1) d = min(d, dist[p - W + 1] + DD);\n      }\n      dist[p] = d;\n    }\n  let m = 1;\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x \u003c W - 1) d = min(d, dist[p + 1] + D);\n      if (y \u003c H - 1) {\n        d = min(d, dist[p + W] + D);\n        if (x \u003c W - 1) d = min(d, dist[p + W + 1] + DD);\n        if (x > 0) d = min(d, dist[p + W - 1] + DD);\n      }\n      dist[p] = d;\n      if (d \u003c 1e8 && d > m) m = d;\n    }\n  S.maxd = m;\n  S.mode = 2;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.fingers = cl(k[2], -1, 1);\n  S.inlet = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const rate = S.speed / 2;\n  // Surface tension: 6 at Fingers -1, 2 at 0, 0.67 at 1.\n  S.sigma = SIG * 3 ** -S.fingers;\n  if (!S.begun) {\n    // Open with the first PRE seconds of a press already in, as at Speed 2.\n    fresh(S);\n    boundary(S);\n    relax(S, 200);\n    for (let i = 0; i \u003c PRE * 30; i++) {\n      boundary(S);\n      relax(S, SWEEPS);\n      grow(S, Q0 / 30);\n    }\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.mode \u003c 2) startClear(S);\n  if (S.mode === 0 || S.mode === 1) {\n    boundary(S);\n    relax(S, SWEEPS);\n    if (S.mode === 0) grow(S, Q0 * rate * d);\n    else {\n      S.timer += d * rate;\n      if (S.timer > 1.5) startClear(S);\n    }\n  } else if (S.mode === 2) {\n    S.timer += d * rate;\n    const u = S.timer / 3, R = (S.maxd + 1.5) * u * u;\n    const { fill, fill0, dist, st, seed } = S;\n    for (let p = 0; p \u003c N; p++) {\n      if (seed[p] || fill0[p] \u003c= 0) continue;\n      const f = min(fill0[p], cl(dist[p] - R, 0, 1));\n      fill[p] = f;\n      st[p] = f >= 1 ? 1 : 0;\n    }\n    if (u >= 1) {\n      fresh(S);\n      boundary(S);\n      relax(S, 60);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { fill, band, tex, ser, pale, cream, A, T } = S;\n  const h = S.hue + H0;\n  hsv(h, 0.72, 1, ser);\n  hsv(h + 0.06, 0.3, 1, pale);\n  hsv(h + 0.5, 0.1, 0.28, cream);\n  // The serum's colour, times how full each LED is, and the fill itself,\n  // softened by a 3 by 3 blur so the fingers' edges are round on the LEDs.\n  // Each LED's serum colour is set once, by how much had been pressed in\n  // when the serum got there: faint growth rings.\n  for (let p = 0; p \u003c N; p++) {\n    const f = fill[p], o = 4 * p;\n    if (f \u003c= 0) {\n      A[o] = A[o + 1] = A[o + 2] = A[o + 3] = 0;\n      continue;\n    }\n    const ring = 0.5 + 0.5 * cos((band[p] / 300) * 2 * PI), kk = (0.88 + 0.12 * ring) * f;\n    A[o] = (ser[0] + (pale[0] - ser[0]) * ring * 0.5) * kk;\n    A[o + 1] = (ser[1] + (pale[1] - ser[1]) * ring * 0.5) * kk;\n    A[o + 2] = (ser[2] + (pale[2] - ser[2]) * ring * 0.5) * kk;\n    A[o + 3] = f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = 4 * (y * W + x), l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) T[o + c] = 0.25 * A[l + c] + 0.5 * A[o + c] + 0.25 * A[r + c];\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, o = 4 * p, u = y > 0 ? o - 4 * W : o, d = y \u003c H - 1 ? o + 4 * W : o;\n      const f = 0.25 * T[u + 3] + 0.5 * T[o + 3] + 0.25 * T[d + 3], t = (1 + tex[p] * 0.25) * (1 - f);\n      const r = cream[0] * t + 0.25 * T[u] + 0.5 * T[o] + 0.25 * T[d];\n      const g = cream[1] * t + 0.25 * T[u + 1] + 0.5 * T[o + 1] + 0.25 * T[d + 1];\n      const b = cream[2] * t + 0.25 * T[u + 2] + 0.5 * T[o + 2] + 0.25 * T[d + 2];\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-serum-fingers","type":"code","name":"serum-fingers","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Serum Fingers\n// Family:  cosmetic\n// Idea:    A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after a thin serum pressed into thick cream between two glass plates (Saffman-Taylor viscous fingering, Philip Saffman and Geoffrey Taylor, 1958, in a Hele-Shaw cell, Henry Selby Hele-Shaw, 1898)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in.\n// Knob 2: Speed. At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster.\n// Knob 3: Fingers. Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press.\n// Knob 4: Inlet. Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press.\n// Buttons: K1 tap: the cream closes back now and a new press begins.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, cos, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Serum pressed in, in LEDs of area a second at Speed 2.\nconst Q0 = 580;\n// A fresh run opens with the first PRE seconds of a press already in.\nconst PRE = 0.6;\n// The cream gives way at a front LED as the pressure drop across it to the\n// power ETA, times the roughness of the glass there, times 1 + SIG phi, where\n// phi is how much more of the disc round it is serum than at a flat front:\n// below 0 at a fingertip, which is held back, above 0 in a crevice, which is\n// filled up to CAP times faster. That is the surface tension that keeps the\n// fingers round. SIG is for Fingers 0.\nconst ETA = 0.7, SIG = 2, CAP = 1.6;\n// Gauss-Seidel sweeps of the pressure each frame, over-relaxed.\nconst SWEEPS = 12, OMEGA = 1.9;\n// The disc the curvature is read over: cells within RC of a front cell. A\n// flat front fills PHI0 of it with serum.\nconst RC = 3.2;\nconst DISC = [];\nfor (let dy = -3; dy \u003c= 3; dy++) for (let dx = -3; dx \u003c= 3; dx++) if (dx * dx + dy * dy \u003c= RC * RC) DISC.push(dx, dy);\nlet PHI0 = 0;\n{\n  let a = 0, b = 0;\n  for (let k = 0; k \u003c DISC.length; k += 2) {\n    b++;\n    if (DISC[k + 1] \u003c 0) a++;\n  }\n  PHI0 = a / b;\n}\n// Opening hue: aqua serum.\nconst H0 = 0.5;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, fingers: 0, inlet: 0, sigma: SIG, begun: false,\n    st: new Uint8Array(N), fill: new Float32Array(N), P: new Float32Array(N),\n    eta: new Float32Array(N), phi: new Float32Array(N), band: new Float32Array(N), fill0: new Float32Array(N), dist: new Float32Array(N),\n    seed: new Uint8Array(N), tex: new Float32Array(N), front: new Int32Array(N), nf: 0,\n    vol: 0, mode: 0, timer: 0, maxd: 1,\n    A: new Float32Array(4 * N), T: new Float32Array(4 * N), ser: [0, 0, 0], pale: [0, 0, 0], cream: [0, 0, 0],\n  };\n  const S = params.s;\n  // The cream's own static mottle, a few soft lumps.\n  const lumps = [];\n  for (let k = 0; k \u003c 14; k++) lumps.push([random() * W, random() * H, 6 + random() * 14, random() - 0.5]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v = 0;\n      for (const [lx, ly, r, a] of lumps) v += a * exp(-((x - lx) ** 2 + (y - ly) ** 2) / (r * r));\n      S.tex[y * W + x] = v;\n    }\n}\n\n// A fresh press: the inlet filled, the rest cream, new roughness in the glass.\nfunction fresh(S) {\n  const { st, fill, P, eta, band, seed } = S;\n  st.fill(0);\n  fill.fill(0);\n  seed.fill(0);\n  // The inlet: a slot along the whole bottom at Inlet 0, narrowing to a half\n  // disc 5 LEDs across at the bottom centre at 1, its lip rounded at each\n  // end. Along the slot the lip is waved, from 3 waves across the panel at\n  // Fingers -1 to 12 at 1, so the fingers start at the width they would grow.\n  const half = 32 - 30 * S.inlet, RE = 2.6, nb = round(6 * 2 ** S.fingers), ph = random() * 2 * PI, amps = [];\n  for (let k = 0; k \u003c 16; k++) amps.push(2 + 4 * random());\n  for (let y = H - 6; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = max(0, abs(x + 0.5 - W / 2) - (half - RE)), up = H - (y + 0.5);\n      const wv = (2 * PI * nb * (x + 0.5)) / W + ph, amp = amps[floor(wv / (2 * PI) + 0.5) % amps.length];\n      const lip = dx > 0 ? sqrt(max(0, RE * RE - dx * dx)) : 2 + amp * (0.5 + 0.5 * cos(wv));\n      if (dx \u003c= RE && up \u003c= lip) {\n        const p = y * W + x;\n        st[p] = 1;\n        fill[p] = 1;\n        seed[p] = 1;\n        band[p] = 0;\n      }\n    }\n  // Roughness of the glass: two octaves of smooth noise, 8 and 4 LEDs\n  // across, so the front is nudged at the scale of a finger, not per LED.\n  const g8 = [], g4 = [];\n  for (let k = 0; k \u003c 9 * 17; k++) g8.push(random() - 0.5);\n  for (let k = 0; k \u003c 17 * 33; k++) g4.push(random() - 0.5);\n  const vn = (g, s, gw, x, y) => {\n    const u = x / s, v = y / s, i = floor(u), j = floor(v), fu = u - i, fv = v - j, a = j * gw + i;\n    return (g[a] * (1 - fu) + g[a + 1] * fu) * (1 - fv) + (g[a + gw] * (1 - fu) + g[a + gw + 1] * fu) * fv;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      eta[p] = 1 + 0.5 * vn(g8, 8, 9, x, y) + 0.3 * vn(g4, 4, 17, x, y);\n      P[p] = st[p] ? 1 : y / H;\n    }\n  S.vol = 0;\n  S.mode = 0;\n  S.timer = 0;\n}\n\n// The front: every cream LED next to the serum, and phi there.\nfunction boundary(S) {\n  const { st, fill, front, phi } = S;\n  let nf = 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (st[p]) continue;\n      if ((x > 0 && st[p - 1]) || (x \u003c W - 1 && st[p + 1]) || (y > 0 && st[p - W]) || (y \u003c H - 1 && st[p + W])) {\n        let s = 0, c = 0;\n        for (let k = 0; k \u003c DISC.length; k += 2) {\n          const xx = x + DISC[k], yy = y + DISC[k + 1];\n          if (xx \u003c 0 || xx >= W || yy >= H) continue;\n          c++;\n          if (yy \u003c 0) continue;\n          const q = yy * W + xx;\n          s += st[q] ? 1 : fill[q];\n        }\n        phi[p] = s / c - PHI0;\n        front[nf++] = p;\n      }\n    }\n  S.nf = nf;\n}\n\n// Over-relaxed sweeps of Laplace's equation for the pressure in the cream:\n// 1 in the serum, which is so thin it holds one pressure throughout, 0 at the\n// top edge, where the cream leaves the cell, and no flow through the sides\n// and the bottom.\nfunction relax(S, sweeps) {\n  const { st, P } = S;\n  for (let it = 0; it \u003c sweeps; it++)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        if (st[p]) continue;\n        let s = 0, c = 0;\n        if (y === 0) c++;\n        else {\n          s += st[p - W] ? 1 : P[p - W];\n          c++;\n        }\n        if (y \u003c H - 1) {\n          s += st[p + W] ? 1 : P[p + W];\n          c++;\n        }\n        if (x > 0) {\n          s += st[p - 1] ? 1 : P[p - 1];\n          c++;\n        }\n        if (x \u003c W - 1) {\n          s += st[p + 1] ? 1 : P[p + 1];\n          c++;\n        }\n        P[p] += OMEGA * (s / c - P[p]);\n      }\n}\n\nconst speed = (S, p) => max(0, 1 - S.P[p]) ** ETA * S.eta[p] * cl(1 + S.sigma * S.phi[p], 0, CAP);\n\n// Press in vol LEDs of serum, shared among the front LEDs by how fast the\n// cream gives way at each.\nfunction grow(S, vol) {\n  const { st, fill, P, band, front, nf } = S;\n  let tot = 0;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k];\n    tot += speed(S, p);\n  }\n  if (tot \u003c= 0) return;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k], v = speed(S, p);\n    if (v \u003c= 0) continue;\n    if (fill[p] === 0) band[p] = S.vol;\n    fill[p] += (vol * v) / tot;\n    if (fill[p] >= 1) {\n      fill[p] = 1;\n      st[p] = 1;\n      P[p] = 1;\n      // A finger at the top edge: the cell is full.\n      if (p \u003c 2 * W) S.mode = 1;\n    }\n  }\n  S.vol += vol;\n}\n\n// The cream closing back: every serum LED's distance to the cream, so the\n// fingers thin from their sides and the trunks go last.\nfunction startClear(S) {\n  const { st, fill, fill0, dist, seed } = S;\n  for (let p = 0; p \u003c N; p++) {\n    fill0[p] = fill[p];\n    dist[p] = fill[p] >= 1 && !seed[p] ? 1e9 : 0;\n  }\n  const D = 1, DD = 1.414;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x > 0) d = min(d, dist[p - 1] + D);\n      if (y > 0) {\n        d = min(d, dist[p - W] + D);\n        if (x > 0) d = min(d, dist[p - W - 1] + DD);\n        if (x \u003c W - 1) d = min(d, dist[p - W + 1] + DD);\n      }\n      dist[p] = d;\n    }\n  let m = 1;\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x \u003c W - 1) d = min(d, dist[p + 1] + D);\n      if (y \u003c H - 1) {\n        d = min(d, dist[p + W] + D);\n        if (x \u003c W - 1) d = min(d, dist[p + W + 1] + DD);\n        if (x > 0) d = min(d, dist[p + W - 1] + DD);\n      }\n      dist[p] = d;\n      if (d \u003c 1e8 && d > m) m = d;\n    }\n  S.maxd = m;\n  S.mode = 2;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.fingers = cl(k[2], -1, 1);\n  S.inlet = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const rate = S.speed / 2;\n  // Surface tension: 6 at Fingers -1, 2 at 0, 0.67 at 1.\n  S.sigma = SIG * 3 ** -S.fingers;\n  if (!S.begun) {\n    // Open with the first PRE seconds of a press already in, as at Speed 2.\n    fresh(S);\n    boundary(S);\n    relax(S, 200);\n    for (let i = 0; i \u003c PRE * 30; i++) {\n      boundary(S);\n      relax(S, SWEEPS);\n      grow(S, Q0 / 30);\n    }\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.mode \u003c 2) startClear(S);\n  if (S.mode === 0 || S.mode === 1) {\n    boundary(S);\n    relax(S, SWEEPS);\n    if (S.mode === 0) grow(S, Q0 * rate * d);\n    else {\n      S.timer += d * rate;\n      if (S.timer > 1.5) startClear(S);\n    }\n  } else if (S.mode === 2) {\n    S.timer += d * rate;\n    const u = S.timer / 3, R = (S.maxd + 1.5) * u * u;\n    const { fill, fill0, dist, st, seed } = S;\n    for (let p = 0; p \u003c N; p++) {\n      if (seed[p] || fill0[p] \u003c= 0) continue;\n      const f = min(fill0[p], cl(dist[p] - R, 0, 1));\n      fill[p] = f;\n      st[p] = f >= 1 ? 1 : 0;\n    }\n    if (u >= 1) {\n      fresh(S);\n      boundary(S);\n      relax(S, 60);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { fill, band, tex, ser, pale, cream, A, T } = S;\n  const h = S.hue + H0;\n  hsv(h, 0.72, 1, ser);\n  hsv(h + 0.06, 0.3, 1, pale);\n  hsv(h + 0.5, 0.1, 0.28, cream);\n  // The serum's colour, times how full each LED is, and the fill itself,\n  // softened by a 3 by 3 blur so the fingers' edges are round on the LEDs.\n  // Each LED's serum colour is set once, by how much had been pressed in\n  // when the serum got there: faint growth rings.\n  for (let p = 0; p \u003c N; p++) {\n    const f = fill[p], o = 4 * p;\n    if (f \u003c= 0) {\n      A[o] = A[o + 1] = A[o + 2] = A[o + 3] = 0;\n      continue;\n    }\n    const ring = 0.5 + 0.5 * cos((band[p] / 300) * 2 * PI), kk = (0.88 + 0.12 * ring) * f;\n    A[o] = (ser[0] + (pale[0] - ser[0]) * ring * 0.5) * kk;\n    A[o + 1] = (ser[1] + (pale[1] - ser[1]) * ring * 0.5) * kk;\n    A[o + 2] = (ser[2] + (pale[2] - ser[2]) * ring * 0.5) * kk;\n    A[o + 3] = f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = 4 * (y * W + x), l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) T[o + c] = 0.25 * A[l + c] + 0.5 * A[o + c] + 0.25 * A[r + c];\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, o = 4 * p, u = y > 0 ? o - 4 * W : o, d = y \u003c H - 1 ? o + 4 * W : o;\n      const f = 0.25 * T[u + 3] + 0.5 * T[o + 3] + 0.25 * T[d + 3], t = (1 + tex[p] * 0.25) * (1 - f);\n      const r = cream[0] * t + 0.25 * T[u] + 0.5 * T[o] + 0.25 * T[d];\n      const g = cream[1] * t + 0.25 * T[u + 1] + 0.5 * T[o + 1] + 0.25 * T[d + 1];\n      const b = cream[2] * t + 0.25 * T[u + 2] + 0.5 * T[o + 2] + 0.25 * T[d + 2];\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster."},{"name":"Fingers","min":-1,"max":1,"about":"Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press."},{"name":"Inlet","min":0,"max":1,"about":"Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press."}],"start":[0,2,0,0.06],"measures":{"motion":0.0418,"detail":0.0193,"edges":0.1667,"complexity":0.987,"coverage":1,"colour":0.3588,"drift":0.2509},"knobResponse":[0.1449,0.1034,0.0454,0.0842]},{"slug":"serum-gel","title":"Serum Gel","family":"cosmetic","round":29,"note":"연보라 젤 속에 진주와 캡슐, 기포가 떠서 천천히 흔들리고, 뒤쪽 벽에는 젤 표면을 지난 빛이 부드러운 그물로 어른거려요. K3 은 구슬 수를 여덟에서 마흔까지 바꾸고, 누르면 젤이 크게 출렁이며 구슬이 늘어났다 줄어들며 흔들리다 가라앉아요.","idea":"A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.","buttons":"K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.","code":"// ===== Patternflow pattern =====\n// Title:   Serum Gel\n// Family:  cosmetic\n// Idea:    A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the macro shots of serum and gel cream with suspended beads in skincare films\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1\n//\n// Knob 1: Hue. Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac.\n// Knob 2: Speed. How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still.\n// Knob 3: Beads. How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one.\n// Knob 4: Wobble. How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging.\n// Buttons: K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, pow, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The opening hue: lilac, not red.\nconst H0 = 0.78;\n// Light rays are cast from a grid SS times finer than the LEDs, over a\n// margin M beyond the panel so the edges get light from outside too. How\n// far each ray is bent is worked out on a coarser grid, GS LEDs a step,\n// since the ripples are much longer than that, and read between its points.\nconst SS = 1.5, M = 4, GS = 2, GW = (W + 2 * M) / GS + 2, GH = (H + 2 * M) / GS + 2;\nconst RW = (W + 2 * M) * SS, RH = (H + 2 * M) * SS;\n// The surface ripples: six waves 18 to 40 LEDs long.\nconst NWV = 6;\n// Specks of air, always there whatever the Beads knob says.\nconst SPECKS = 16;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The gel's low modes of wobble, as displacement fields: side to side with\n// the top swinging most, a bounce, a twist, and a squeeze. Each is a damped\n// spring with its angular frequency at Speed 2.\nconst MODES = 4;\nconst OMEGA = [3.1, 4.3, 2.6, 5.4];\n// They are kept on the coarse grid, which runs M LEDs past the panel on\n// every side; the gel past the panel's edges does not move.\nconst GN = GW * GH, MX = new Float32Array(MODES * GN), MY = new Float32Array(MODES * GN);\nfor (let j = 0; j \u003c GH; j++)\n  for (let i = 0; i \u003c GW; i++) {\n    const x = cl(i * GS - M, 0, W), y = cl(j * GS - M, 0, H), p = j * GW + i;\n    const sx = sin((PI * x) / W), sy = sin((PI * y) / H), top = cos((PI * y) / (2 * H));\n    MX[p] = sx * top;\n    MY[GN + p] = sx * sy;\n    MX[2 * GN + p] = (-(y - H / 2) / 40) * sx * sy;\n    MY[2 * GN + p] = ((x - W / 2) / 40) * sx * sy;\n    MX[3 * GN + p] = sin((2 * PI * x) / W) * sy;\n  }\n// A cosine table, 1024 steps a turn.\nconst CT = new Float32Array(1024).map((_, i) => cos((i * 2 * PI) / 1024));\nconst fcos = (a) => CT[(a * 162.97466) & 1023];\n\nexport function setup(params) {\n  params.s = {\n    t: 0, wv: new Float32Array(NWV * 8), ph: new Float32Array(NWV), md: new Float32Array(MODES * 2), drive: new Float32Array(MODES), dead: 0,\n    gx: new Float32Array(GN), gy: new Float32Array(GN), acc: new Float32Array(N), tmp: new Float32Array(N),\n    beads: [], want: 0, hue: 0, wob: 0.06, sp: 2, ready: false,\n    bg: new Float32Array(N * 3), col: new Float32Array(8 * 3),\n  };\n  const P = params.s;\n  // Each ripple: its wave vector, how fast it creeps (0.4 to 1.2 LEDs a\n  // second at Speed 2), its phase, the direction it bends light, and how\n  // fast it jiggles to and fro in place, as a gel's surface does.\n  for (let i = 0; i \u003c NWV; i++) {\n    const a = (i / NWV) * PI + rnd() * 0.5, L = 18 + rnd() * 22, o = i * 8;\n    P.wv[o] = (cos(a) * 2 * PI) / L;\n    P.wv[o + 1] = (sin(a) * 2 * PI) / L;\n    P.wv[o + 2] = ((0.4 + rnd() * 0.8) * 2 * PI) / L;\n    P.wv[o + 3] = rnd() * 2 * PI;\n    P.wv[o + 4] = cos(a);\n    P.wv[o + 5] = sin(a);\n    P.wv[o + 6] = 1.6 + rnd() * 1.6;\n    P.wv[o + 7] = rnd() * 2 * PI;\n  }\n}\n\n// A bead hanging at rest point (hx, hy), depth z from 0 (near) to 1 (far),\n// and where it is now. Kind 0 is a pearl, 3 a tinted capsule, 1 an air\n// bubble, 2 one of the specks of air that every gel holds. The fewer beads,\n// the bigger they are. Each new one tries a few places in its own band of\n// the panel's height and keeps the one furthest from the others, so they\n// spread out.\nfunction bead(P, n, kind, all, band, bands) {\n  const big = 10 * sqrt(8 / n), z = rnd(), f = 1 - 0.45 * z;\n  const r = kind === 2 ? 0.7 + rnd() * 0.8 : kind === 1 ? big * (0.3 + 0.3 * rnd()) * f : big * (0.65 + 0.35 * rnd()) * f;\n  let bx = 0, by = 0, best = -1;\n  for (let tries = 0; tries \u003c 12; tries++) {\n    const x = r + 1 + rnd() * (W - 2 * r - 2), y = cl(((band + rnd()) / bands) * H, r + 2, H - r - 3);\n    let near = 1e9;\n    for (const b of all) if (!b.gone && b.kind !== 2) near = min(near, sqrt((b.hx - x) ** 2 + (b.hy - y) ** 2) - b.r - r);\n    if (near > best) (best = near), (bx = x), (by = y);\n  }\n  if (kind === 0 && rnd() \u003c 0.4) kind = 3;\n  return { hx: bx, hy: by, x: bx, y: by, vx: 0, vy: 0, r, z, kind, ph: rnd() * 2 * PI, fq: 0.5 + rnd() * 0.5, a: 0, gone: false };\n}\n\n// Keep as many beads, pearls and capsules, as the knob asks for, and two\n// bubbles for every three beads: new ones fade in, spare ones fade out, and\n// the far ones are drawn first.\nfunction census(P, n) {\n  if (!P.beads.length) for (let i = 0; i \u003c SPECKS; i++) P.beads.push(bead(P, 8, 2, P.beads, i, SPECKS));\n  for (let kind = 0; kind \u003c 2; kind++) {\n    const want = kind ? Math.round((n * 2) / 3) : n, live = P.beads.filter((b) => !b.gone && (b.kind === kind || b.kind === kind + 3));\n    if (live.length \u003c want) for (let i = live.length; i \u003c want; i++) P.beads.push(bead(P, n, kind, P.beads, (i * 7) % want, want));\n    else for (let i = want; i \u003c live.length; i++) live[i].gone = true;\n  }\n  P.beads.sort((a, b) => b.z - a.z);\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\nfunction step(P, dt, sp, wob) {\n  P.t += dt * sp * 0.5;\n  // The modes ring like springs; a slow random push keeps them moving by as\n  // much as Wobble asks.\n  const md = P.md, dr = P.drive, k = sp * 0.5;\n  for (let m = 0; m \u003c MODES; m++) {\n    const w = OMEGA[m] * k, ze = 0.07;\n    dr[m] += (rnd() - 0.5) * dt * 6;\n    dr[m] *= 1 - dt * 0.8;\n    const f = dr[m] * (0.6 + 9 * wob) * w * w * 0.25;\n    let x = md[m * 2], v = md[m * 2 + 1];\n    v += (-w * w * x - 2 * ze * w * v + f) * dt;\n    x += v * dt;\n    md[m * 2] = x;\n    md[m * 2 + 1] = v;\n  }\n  // Beads hang from the gel on springs of their own, softer than the gel, so\n  // they lag behind its swing and then catch up; each drifts a little round\n  // its rest point on its own.\n  for (const b of P.beads) {\n    b.a = b.gone ? max(0, b.a - dt * 1.5) : min(1, b.a + dt * 1.5);\n    if (b.gone && b.a \u003c= 0) P.dead = 1;\n    const p = Math.round((b.hy + M) / GS) * GW + Math.round((b.hx + M) / GS);\n    let ux = 0, uy = 0;\n    for (let m = 0; m \u003c MODES; m++) {\n      ux += md[m * 2] * MX[m * GN + p];\n      uy += md[m * 2] * MY[m * GN + p];\n    }\n    const par = 1.15 - 0.4 * b.z, dfx = 1.4 * sin(P.t * b.fq + b.ph), dfy = 1.8 * sin(P.t * b.fq * 0.71 + b.ph * 1.3);\n    const tx = b.hx + ux * par + dfx, ty = b.hy + uy * par + dfy, w = 2.4 * k * (1.1 - 0.3 * b.z);\n    b.vx += ((tx - b.x) * w * w - 2 * 0.12 * w * b.vx) * dt;\n    b.vy += ((ty - b.y) * w * w - 2 * 0.12 * w * b.vy) * dt;\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n  }\n  if (P.dead) (P.beads = P.beads.filter((b) => !b.gone || b.a > 0)), (P.dead = 0);\n}\n\n// Light comes down through the gel's rippled surface and lands on the back\n// wall. Each ray is bent by the surface's slope where it entered, by up to a\n// few LEDs, and by the gel's wobble; where the rays crowd together the wall\n// is bright, the caustic net.\nfunction caustics(P, wob) {\n  const { gx, gy, acc, wv, md } = P;\n  // A jiggling gel ripples more: the bend grows with Wobble and with how\n  // hard the modes are swinging.\n  let e = 0;\n  for (let m = 0; m \u003c MODES; m++) e += abs(md[m * 2]);\n  const amp = (1.1 + 0.8 * wob + 0.15 * min(6, e)) / sqrt(NWV / 3), t = P.t * 2, ph = P.ph, jig = 0.5 + 0.8 * wob + 0.12 * min(6, e);\n  for (let w = 0; w \u003c NWV; w++) ph[w] = wv[w * 8 + 3] - wv[w * 8 + 2] * t + jig * sin(wv[w * 8 + 6] * t + wv[w * 8 + 7]);\n  const m0 = md[0] * 0.8, m1 = md[2] * 0.8, m2 = md[4] * 0.8, m3 = md[6] * 0.8;\n  for (let j = 0, q = 0; j \u003c GH; j++)\n    for (let i = 0; i \u003c GW; i++, q++) {\n      const x = i * GS - M, y = j * GS - M;\n      let sx = 0, sy = 0;\n      for (let w = 0; w \u003c NWV; w++) {\n        const c = fcos(wv[w * 8] * x + wv[w * 8 + 1] * y + ph[w]);\n        sx += wv[w * 8 + 4] * c;\n        sy += wv[w * 8 + 5] * c;\n      }\n      // The back wall moves with the gel, so the whole net swings with it.\n      gx[q] = sx * amp + m0 * MX[q] + m2 * MX[2 * GN + q] + m3 * MX[3 * GN + q];\n      gy[q] = sy * amp + m1 * MY[GN + q] + m2 * MY[2 * GN + q];\n    }\n  acc.fill(0);\n  const wgt = 1 / (SS * SS), inv = 1 / SS, gi = 1 / GS;\n  for (let rj = 0; rj \u003c RH; rj++) {\n    const fy = rj * inv, uy = fy * gi, j0 = floor(uy), ty = uy - j0;\n    for (let ri = 0; ri \u003c RW; ri++) {\n      const fx = ri * inv, ux = fx * gi, i0 = floor(ux), tx = ux - i0, q = j0 * GW + i0;\n      const X = fx - M + (gx[q] * (1 - tx) + gx[q + 1] * tx) * (1 - ty) + (gx[q + GW] * (1 - tx) + gx[q + GW + 1] * tx) * ty;\n      const Y = fy - M + (gy[q] * (1 - tx) + gy[q + 1] * tx) * (1 - ty) + (gy[q + GW] * (1 - tx) + gy[q + GW + 1] * tx) * ty;\n      const ix = floor(X), iy = floor(Y);\n      if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) continue;\n      const ax = X - ix, ay = Y - iy;\n      if (iy >= 0) {\n        if (ix >= 0) acc[iy * W + ix] += wgt * (1 - ax) * (1 - ay);\n        if (ix \u003c W - 1) acc[iy * W + ix + 1] += wgt * ax * (1 - ay);\n      }\n      if (iy \u003c H - 1) {\n        if (ix >= 0) acc[(iy + 1) * W + ix] += wgt * (1 - ax) * ay;\n        if (ix \u003c W - 1) acc[(iy + 1) * W + ix + 1] += wgt * ax * ay;\n      }\n    }\n  }\n  // Gel is not quite clear: the light softens on its way to the wall, and\n  // each line of it gets a halo on the LEDs beside it.\n  blur(acc, P.tmp);\n  blur(acc, P.tmp);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.wob = cl(k[3], 0, 1);\n  const n = cl(Math.round(k[2]), 8, 40);\n  if (n !== P.want) (P.want = n), census(P, n);\n  if (!P.ready) {\n    // The first frame already shows the gel settled and swaying.\n    for (const b of P.beads) b.a = 1;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, P.sp, P.wob);\n    P.ready = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A knock: the sway and the bounce get a hard kick, the others a little.\n    const s = rnd() \u003c 0.5 ? -1 : 1, w = P.sp * 0.5;\n    P.md[1] += s * 10 * OMEGA[0] * w;\n    P.md[3] += (rnd() - 0.5) * 8 * OMEGA[1] * w;\n    P.md[5] += (rnd() - 0.5) * 4 * OMEGA[2] * w;\n    P.md[7] += (rnd() - 0.5) * 3 * OMEGA[3] * w;\n  }\n  let t = d;\n  while (t > 1e-6) {\n    const h = min(t, 1 / 60);\n    step(P, h, P.sp, P.wob);\n    t -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  caustics(P, P.wob);\n  const { acc, bg, col } = P, hue = H0 + P.hue;\n  // Gel light and deep, caustic light, pearl one side, pearl rim, pearl\n  // other side, capsule body and its gathered light. Orange and yellow gel\n  // darkened reads as brown and olive on LEDs, so around those hues the gel\n  // is kept lighter, like honey.\n  const hw = (hue - floor(hue) + 0.38) % 1, am = max(0, 1 - abs(hw - 0.5) / 0.11);\n  hsv(hue, 0.72 - 0.12 * am, 0.62 + 0.3 * am, col, 0);\n  hsv(hue + 0.02, 0.85 - 0.1 * am, 0.3 + 0.38 * am, col, 3);\n  hsv(hue - 0.03, 0.35, 1, col, 6);\n  hsv(hue + 0.12, 0.2, 1, col, 9);\n  hsv(hue - 0.14, 0.6, 1, col, 12);\n  hsv(hue - 0.1, 0.2, 1, col, 15);\n  hsv(hue + 0.05, 0.95, 0.5, col, 18);\n  hsv(hue + 0.02, 0.5, 1, col, 21);\n  // The gel: light from above, so the top glows and the bottom is deeper,\n  // and over it the net of caustic light.\n  for (let y = 0; y \u003c H; y++) {\n    const g = 1 - (0.55 * y) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, l = cl(acc[p] - 0.6, 0, 1.6) * 0.5;\n      for (let q = 0; q \u003c 3; q++) bg[p * 3 + q] = col[q] * g + col[3 + q] * (1 - g) + col[6 + q] * l * (0.55 + 0.45 * g);\n    }\n  }\n  // Beads and bubbles, far ones first.\n  for (const b of P.beads) drawBead(P, b);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, bg[p * 3]), min(255, bg[p * 3 + 1]), min(255, bg[p * 3 + 2]));\n}\n\n// Pearls are lit from above through the gel, their white leaning one way\n// round the colour wheel on one side and the other way on the other, as a\n// pearl's sheen shifts, with a rim and a white highlight. A capsule is clear and deeply tinted: light coming down through\n// it gathers into a bright spot low inside it. An air bubble is clear, the\n// gel behind it brighter, with a thin bright rim and a highlight; a speck is\n// a point of light. Far ones sink into the gel's colour.\nfunction drawBead(P, b) {\n  // A bead swinging through the gel is drawn out a little along its path\n  // and squeezed across it, so it jiggles as it swings and settles round.\n  const ax = abs(b.vx), ay = abs(b.vy), qx = cl(1 + 0.02 * ax - 0.01 * ay, 0.82, 1.18), qy = cl(1 + 0.02 * ay - 0.01 * ax, 0.82, 1.18);\n  const { bg, col, acc } = P, r = b.r, x1 = max(0, floor(b.x - r * qx - 1)), x2 = min(W - 1, floor(b.x + r * qx + 1));\n  const y1 = max(0, floor(b.y - r * qy - 1)), y2 = min(H - 1, floor(b.y + r * qy + 1));\n  const fog = 0.45 * b.z, cp = cl(floor(b.y), 0, H - 1) * W + cl(floor(b.x), 0, W - 1), glint = 0.85 + 0.35 * cl(acc[cp] - 0.6, 0, 1.5);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const dx = (x + 0.5 - b.x) / (r * qx), dy = (y + 0.5 - b.y) / (r * qy), d2 = dx * dx + dy * dy, d = sqrt(d2);\n      const cov = cl((1 - d) * r + 0.5, 0, 1) * b.a;\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - d2)), p = (y * W + x) * 3, rim = pow(1 - nz, 2.2);\n      let R, G, B;\n      if (b.kind === 2) {\n        const k = 0.9 * (1 - d);\n        R = bg[p] + col[6] * k;\n        G = bg[p + 1] + col[7] * k;\n        B = bg[p + 2] + col[8] * k;\n      } else if (b.kind === 1) {\n        // Air in gel: clear in the middle, the light bent into a bright rim,\n        // and a highlight up towards the light.\n        const ring = sm((d - 0.6) / 0.25) * (1 - sm((d - 0.95) / 0.1)), hi = exp(-((dx + 0.35) ** 2 + (dy + 0.4) ** 2) * 22);\n        const k = 0.15 + 0.85 * ring;\n        R = bg[p] * 1.1 + col[6] * k * 0.85 + 255 * hi;\n        G = bg[p + 1] * 1.1 + col[7] * k * 0.85 + 255 * hi;\n        B = bg[p + 2] * 1.1 + col[8] * k * 0.85 + 255 * hi;\n      } else {\n        const hi = pow(max(0, -dx * 0.36 - dy * 0.5 + nz * 0.79), 40) * 255, edge = 1 - 0.3 * sm((d - 0.86) / 0.12);\n        if (b.kind === 0) {\n          const df = max(0, -dx * 0.3 - dy * 0.75 + nz * 0.6), lit = (0.72 + 0.4 * df) * glint * edge, u = cl(0.5 + 0.6 * (dx - dy) * 0.7, 0, 1);\n          R = (col[9] + (col[15] - col[9]) * u) * lit + col[12] * rim * 0.75 + hi;\n          G = (col[10] + (col[16] - col[10]) * u) * lit + col[13] * rim * 0.75 + hi;\n          B = (col[11] + (col[17] - col[11]) * u) * lit + col[14] * rim * 0.75 + hi;\n        } else {\n          const core = exp(-(dx * dx + (dy - 0.42) ** 2) * 5) * glint, body = 0.55 * edge;\n          R = col[18] * body + col[21] * core + col[21] * rim * 0.5 + hi;\n          G = col[19] * body + col[22] * core + col[22] * rim * 0.5 + hi;\n          B = col[20] * body + col[23] * core + col[23] * rim * 0.5 + hi;\n        }\n      }\n      R += (bg[p] - R) * fog;\n      G += (bg[p + 1] - G) * fog;\n      B += (bg[p + 2] - B) * fog;\n      bg[p] += (R - bg[p]) * cov;\n      bg[p + 1] += (G - bg[p + 1]) * cov;\n      bg[p + 2] += (B - bg[p + 2]) * cov;\n    }\n}\n","layer":{"id":"layer-serum-gel","type":"code","name":"serum-gel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Serum Gel\n// Family:  cosmetic\n// Idea:    A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the macro shots of serum and gel cream with suspended beads in skincare films\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1\n//\n// Knob 1: Hue. Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac.\n// Knob 2: Speed. How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still.\n// Knob 3: Beads. How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one.\n// Knob 4: Wobble. How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging.\n// Buttons: K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, pow, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The opening hue: lilac, not red.\nconst H0 = 0.78;\n// Light rays are cast from a grid SS times finer than the LEDs, over a\n// margin M beyond the panel so the edges get light from outside too. How\n// far each ray is bent is worked out on a coarser grid, GS LEDs a step,\n// since the ripples are much longer than that, and read between its points.\nconst SS = 1.5, M = 4, GS = 2, GW = (W + 2 * M) / GS + 2, GH = (H + 2 * M) / GS + 2;\nconst RW = (W + 2 * M) * SS, RH = (H + 2 * M) * SS;\n// The surface ripples: six waves 18 to 40 LEDs long.\nconst NWV = 6;\n// Specks of air, always there whatever the Beads knob says.\nconst SPECKS = 16;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The gel's low modes of wobble, as displacement fields: side to side with\n// the top swinging most, a bounce, a twist, and a squeeze. Each is a damped\n// spring with its angular frequency at Speed 2.\nconst MODES = 4;\nconst OMEGA = [3.1, 4.3, 2.6, 5.4];\n// They are kept on the coarse grid, which runs M LEDs past the panel on\n// every side; the gel past the panel's edges does not move.\nconst GN = GW * GH, MX = new Float32Array(MODES * GN), MY = new Float32Array(MODES * GN);\nfor (let j = 0; j \u003c GH; j++)\n  for (let i = 0; i \u003c GW; i++) {\n    const x = cl(i * GS - M, 0, W), y = cl(j * GS - M, 0, H), p = j * GW + i;\n    const sx = sin((PI * x) / W), sy = sin((PI * y) / H), top = cos((PI * y) / (2 * H));\n    MX[p] = sx * top;\n    MY[GN + p] = sx * sy;\n    MX[2 * GN + p] = (-(y - H / 2) / 40) * sx * sy;\n    MY[2 * GN + p] = ((x - W / 2) / 40) * sx * sy;\n    MX[3 * GN + p] = sin((2 * PI * x) / W) * sy;\n  }\n// A cosine table, 1024 steps a turn.\nconst CT = new Float32Array(1024).map((_, i) => cos((i * 2 * PI) / 1024));\nconst fcos = (a) => CT[(a * 162.97466) & 1023];\n\nexport function setup(params) {\n  params.s = {\n    t: 0, wv: new Float32Array(NWV * 8), ph: new Float32Array(NWV), md: new Float32Array(MODES * 2), drive: new Float32Array(MODES), dead: 0,\n    gx: new Float32Array(GN), gy: new Float32Array(GN), acc: new Float32Array(N), tmp: new Float32Array(N),\n    beads: [], want: 0, hue: 0, wob: 0.06, sp: 2, ready: false,\n    bg: new Float32Array(N * 3), col: new Float32Array(8 * 3),\n  };\n  const P = params.s;\n  // Each ripple: its wave vector, how fast it creeps (0.4 to 1.2 LEDs a\n  // second at Speed 2), its phase, the direction it bends light, and how\n  // fast it jiggles to and fro in place, as a gel's surface does.\n  for (let i = 0; i \u003c NWV; i++) {\n    const a = (i / NWV) * PI + rnd() * 0.5, L = 18 + rnd() * 22, o = i * 8;\n    P.wv[o] = (cos(a) * 2 * PI) / L;\n    P.wv[o + 1] = (sin(a) * 2 * PI) / L;\n    P.wv[o + 2] = ((0.4 + rnd() * 0.8) * 2 * PI) / L;\n    P.wv[o + 3] = rnd() * 2 * PI;\n    P.wv[o + 4] = cos(a);\n    P.wv[o + 5] = sin(a);\n    P.wv[o + 6] = 1.6 + rnd() * 1.6;\n    P.wv[o + 7] = rnd() * 2 * PI;\n  }\n}\n\n// A bead hanging at rest point (hx, hy), depth z from 0 (near) to 1 (far),\n// and where it is now. Kind 0 is a pearl, 3 a tinted capsule, 1 an air\n// bubble, 2 one of the specks of air that every gel holds. The fewer beads,\n// the bigger they are. Each new one tries a few places in its own band of\n// the panel's height and keeps the one furthest from the others, so they\n// spread out.\nfunction bead(P, n, kind, all, band, bands) {\n  const big = 10 * sqrt(8 / n), z = rnd(), f = 1 - 0.45 * z;\n  const r = kind === 2 ? 0.7 + rnd() * 0.8 : kind === 1 ? big * (0.3 + 0.3 * rnd()) * f : big * (0.65 + 0.35 * rnd()) * f;\n  let bx = 0, by = 0, best = -1;\n  for (let tries = 0; tries \u003c 12; tries++) {\n    const x = r + 1 + rnd() * (W - 2 * r - 2), y = cl(((band + rnd()) / bands) * H, r + 2, H - r - 3);\n    let near = 1e9;\n    for (const b of all) if (!b.gone && b.kind !== 2) near = min(near, sqrt((b.hx - x) ** 2 + (b.hy - y) ** 2) - b.r - r);\n    if (near > best) (best = near), (bx = x), (by = y);\n  }\n  if (kind === 0 && rnd() \u003c 0.4) kind = 3;\n  return { hx: bx, hy: by, x: bx, y: by, vx: 0, vy: 0, r, z, kind, ph: rnd() * 2 * PI, fq: 0.5 + rnd() * 0.5, a: 0, gone: false };\n}\n\n// Keep as many beads, pearls and capsules, as the knob asks for, and two\n// bubbles for every three beads: new ones fade in, spare ones fade out, and\n// the far ones are drawn first.\nfunction census(P, n) {\n  if (!P.beads.length) for (let i = 0; i \u003c SPECKS; i++) P.beads.push(bead(P, 8, 2, P.beads, i, SPECKS));\n  for (let kind = 0; kind \u003c 2; kind++) {\n    const want = kind ? Math.round((n * 2) / 3) : n, live = P.beads.filter((b) => !b.gone && (b.kind === kind || b.kind === kind + 3));\n    if (live.length \u003c want) for (let i = live.length; i \u003c want; i++) P.beads.push(bead(P, n, kind, P.beads, (i * 7) % want, want));\n    else for (let i = want; i \u003c live.length; i++) live[i].gone = true;\n  }\n  P.beads.sort((a, b) => b.z - a.z);\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\nfunction step(P, dt, sp, wob) {\n  P.t += dt * sp * 0.5;\n  // The modes ring like springs; a slow random push keeps them moving by as\n  // much as Wobble asks.\n  const md = P.md, dr = P.drive, k = sp * 0.5;\n  for (let m = 0; m \u003c MODES; m++) {\n    const w = OMEGA[m] * k, ze = 0.07;\n    dr[m] += (rnd() - 0.5) * dt * 6;\n    dr[m] *= 1 - dt * 0.8;\n    const f = dr[m] * (0.6 + 9 * wob) * w * w * 0.25;\n    let x = md[m * 2], v = md[m * 2 + 1];\n    v += (-w * w * x - 2 * ze * w * v + f) * dt;\n    x += v * dt;\n    md[m * 2] = x;\n    md[m * 2 + 1] = v;\n  }\n  // Beads hang from the gel on springs of their own, softer than the gel, so\n  // they lag behind its swing and then catch up; each drifts a little round\n  // its rest point on its own.\n  for (const b of P.beads) {\n    b.a = b.gone ? max(0, b.a - dt * 1.5) : min(1, b.a + dt * 1.5);\n    if (b.gone && b.a \u003c= 0) P.dead = 1;\n    const p = Math.round((b.hy + M) / GS) * GW + Math.round((b.hx + M) / GS);\n    let ux = 0, uy = 0;\n    for (let m = 0; m \u003c MODES; m++) {\n      ux += md[m * 2] * MX[m * GN + p];\n      uy += md[m * 2] * MY[m * GN + p];\n    }\n    const par = 1.15 - 0.4 * b.z, dfx = 1.4 * sin(P.t * b.fq + b.ph), dfy = 1.8 * sin(P.t * b.fq * 0.71 + b.ph * 1.3);\n    const tx = b.hx + ux * par + dfx, ty = b.hy + uy * par + dfy, w = 2.4 * k * (1.1 - 0.3 * b.z);\n    b.vx += ((tx - b.x) * w * w - 2 * 0.12 * w * b.vx) * dt;\n    b.vy += ((ty - b.y) * w * w - 2 * 0.12 * w * b.vy) * dt;\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n  }\n  if (P.dead) (P.beads = P.beads.filter((b) => !b.gone || b.a > 0)), (P.dead = 0);\n}\n\n// Light comes down through the gel's rippled surface and lands on the back\n// wall. Each ray is bent by the surface's slope where it entered, by up to a\n// few LEDs, and by the gel's wobble; where the rays crowd together the wall\n// is bright, the caustic net.\nfunction caustics(P, wob) {\n  const { gx, gy, acc, wv, md } = P;\n  // A jiggling gel ripples more: the bend grows with Wobble and with how\n  // hard the modes are swinging.\n  let e = 0;\n  for (let m = 0; m \u003c MODES; m++) e += abs(md[m * 2]);\n  const amp = (1.1 + 0.8 * wob + 0.15 * min(6, e)) / sqrt(NWV / 3), t = P.t * 2, ph = P.ph, jig = 0.5 + 0.8 * wob + 0.12 * min(6, e);\n  for (let w = 0; w \u003c NWV; w++) ph[w] = wv[w * 8 + 3] - wv[w * 8 + 2] * t + jig * sin(wv[w * 8 + 6] * t + wv[w * 8 + 7]);\n  const m0 = md[0] * 0.8, m1 = md[2] * 0.8, m2 = md[4] * 0.8, m3 = md[6] * 0.8;\n  for (let j = 0, q = 0; j \u003c GH; j++)\n    for (let i = 0; i \u003c GW; i++, q++) {\n      const x = i * GS - M, y = j * GS - M;\n      let sx = 0, sy = 0;\n      for (let w = 0; w \u003c NWV; w++) {\n        const c = fcos(wv[w * 8] * x + wv[w * 8 + 1] * y + ph[w]);\n        sx += wv[w * 8 + 4] * c;\n        sy += wv[w * 8 + 5] * c;\n      }\n      // The back wall moves with the gel, so the whole net swings with it.\n      gx[q] = sx * amp + m0 * MX[q] + m2 * MX[2 * GN + q] + m3 * MX[3 * GN + q];\n      gy[q] = sy * amp + m1 * MY[GN + q] + m2 * MY[2 * GN + q];\n    }\n  acc.fill(0);\n  const wgt = 1 / (SS * SS), inv = 1 / SS, gi = 1 / GS;\n  for (let rj = 0; rj \u003c RH; rj++) {\n    const fy = rj * inv, uy = fy * gi, j0 = floor(uy), ty = uy - j0;\n    for (let ri = 0; ri \u003c RW; ri++) {\n      const fx = ri * inv, ux = fx * gi, i0 = floor(ux), tx = ux - i0, q = j0 * GW + i0;\n      const X = fx - M + (gx[q] * (1 - tx) + gx[q + 1] * tx) * (1 - ty) + (gx[q + GW] * (1 - tx) + gx[q + GW + 1] * tx) * ty;\n      const Y = fy - M + (gy[q] * (1 - tx) + gy[q + 1] * tx) * (1 - ty) + (gy[q + GW] * (1 - tx) + gy[q + GW + 1] * tx) * ty;\n      const ix = floor(X), iy = floor(Y);\n      if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) continue;\n      const ax = X - ix, ay = Y - iy;\n      if (iy >= 0) {\n        if (ix >= 0) acc[iy * W + ix] += wgt * (1 - ax) * (1 - ay);\n        if (ix \u003c W - 1) acc[iy * W + ix + 1] += wgt * ax * (1 - ay);\n      }\n      if (iy \u003c H - 1) {\n        if (ix >= 0) acc[(iy + 1) * W + ix] += wgt * (1 - ax) * ay;\n        if (ix \u003c W - 1) acc[(iy + 1) * W + ix + 1] += wgt * ax * ay;\n      }\n    }\n  }\n  // Gel is not quite clear: the light softens on its way to the wall, and\n  // each line of it gets a halo on the LEDs beside it.\n  blur(acc, P.tmp);\n  blur(acc, P.tmp);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.wob = cl(k[3], 0, 1);\n  const n = cl(Math.round(k[2]), 8, 40);\n  if (n !== P.want) (P.want = n), census(P, n);\n  if (!P.ready) {\n    // The first frame already shows the gel settled and swaying.\n    for (const b of P.beads) b.a = 1;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, P.sp, P.wob);\n    P.ready = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A knock: the sway and the bounce get a hard kick, the others a little.\n    const s = rnd() \u003c 0.5 ? -1 : 1, w = P.sp * 0.5;\n    P.md[1] += s * 10 * OMEGA[0] * w;\n    P.md[3] += (rnd() - 0.5) * 8 * OMEGA[1] * w;\n    P.md[5] += (rnd() - 0.5) * 4 * OMEGA[2] * w;\n    P.md[7] += (rnd() - 0.5) * 3 * OMEGA[3] * w;\n  }\n  let t = d;\n  while (t > 1e-6) {\n    const h = min(t, 1 / 60);\n    step(P, h, P.sp, P.wob);\n    t -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  caustics(P, P.wob);\n  const { acc, bg, col } = P, hue = H0 + P.hue;\n  // Gel light and deep, caustic light, pearl one side, pearl rim, pearl\n  // other side, capsule body and its gathered light. Orange and yellow gel\n  // darkened reads as brown and olive on LEDs, so around those hues the gel\n  // is kept lighter, like honey.\n  const hw = (hue - floor(hue) + 0.38) % 1, am = max(0, 1 - abs(hw - 0.5) / 0.11);\n  hsv(hue, 0.72 - 0.12 * am, 0.62 + 0.3 * am, col, 0);\n  hsv(hue + 0.02, 0.85 - 0.1 * am, 0.3 + 0.38 * am, col, 3);\n  hsv(hue - 0.03, 0.35, 1, col, 6);\n  hsv(hue + 0.12, 0.2, 1, col, 9);\n  hsv(hue - 0.14, 0.6, 1, col, 12);\n  hsv(hue - 0.1, 0.2, 1, col, 15);\n  hsv(hue + 0.05, 0.95, 0.5, col, 18);\n  hsv(hue + 0.02, 0.5, 1, col, 21);\n  // The gel: light from above, so the top glows and the bottom is deeper,\n  // and over it the net of caustic light.\n  for (let y = 0; y \u003c H; y++) {\n    const g = 1 - (0.55 * y) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, l = cl(acc[p] - 0.6, 0, 1.6) * 0.5;\n      for (let q = 0; q \u003c 3; q++) bg[p * 3 + q] = col[q] * g + col[3 + q] * (1 - g) + col[6 + q] * l * (0.55 + 0.45 * g);\n    }\n  }\n  // Beads and bubbles, far ones first.\n  for (const b of P.beads) drawBead(P, b);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, bg[p * 3]), min(255, bg[p * 3 + 1]), min(255, bg[p * 3 + 2]));\n}\n\n// Pearls are lit from above through the gel, their white leaning one way\n// round the colour wheel on one side and the other way on the other, as a\n// pearl's sheen shifts, with a rim and a white highlight. A capsule is clear and deeply tinted: light coming down through\n// it gathers into a bright spot low inside it. An air bubble is clear, the\n// gel behind it brighter, with a thin bright rim and a highlight; a speck is\n// a point of light. Far ones sink into the gel's colour.\nfunction drawBead(P, b) {\n  // A bead swinging through the gel is drawn out a little along its path\n  // and squeezed across it, so it jiggles as it swings and settles round.\n  const ax = abs(b.vx), ay = abs(b.vy), qx = cl(1 + 0.02 * ax - 0.01 * ay, 0.82, 1.18), qy = cl(1 + 0.02 * ay - 0.01 * ax, 0.82, 1.18);\n  const { bg, col, acc } = P, r = b.r, x1 = max(0, floor(b.x - r * qx - 1)), x2 = min(W - 1, floor(b.x + r * qx + 1));\n  const y1 = max(0, floor(b.y - r * qy - 1)), y2 = min(H - 1, floor(b.y + r * qy + 1));\n  const fog = 0.45 * b.z, cp = cl(floor(b.y), 0, H - 1) * W + cl(floor(b.x), 0, W - 1), glint = 0.85 + 0.35 * cl(acc[cp] - 0.6, 0, 1.5);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const dx = (x + 0.5 - b.x) / (r * qx), dy = (y + 0.5 - b.y) / (r * qy), d2 = dx * dx + dy * dy, d = sqrt(d2);\n      const cov = cl((1 - d) * r + 0.5, 0, 1) * b.a;\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - d2)), p = (y * W + x) * 3, rim = pow(1 - nz, 2.2);\n      let R, G, B;\n      if (b.kind === 2) {\n        const k = 0.9 * (1 - d);\n        R = bg[p] + col[6] * k;\n        G = bg[p + 1] + col[7] * k;\n        B = bg[p + 2] + col[8] * k;\n      } else if (b.kind === 1) {\n        // Air in gel: clear in the middle, the light bent into a bright rim,\n        // and a highlight up towards the light.\n        const ring = sm((d - 0.6) / 0.25) * (1 - sm((d - 0.95) / 0.1)), hi = exp(-((dx + 0.35) ** 2 + (dy + 0.4) ** 2) * 22);\n        const k = 0.15 + 0.85 * ring;\n        R = bg[p] * 1.1 + col[6] * k * 0.85 + 255 * hi;\n        G = bg[p + 1] * 1.1 + col[7] * k * 0.85 + 255 * hi;\n        B = bg[p + 2] * 1.1 + col[8] * k * 0.85 + 255 * hi;\n      } else {\n        const hi = pow(max(0, -dx * 0.36 - dy * 0.5 + nz * 0.79), 40) * 255, edge = 1 - 0.3 * sm((d - 0.86) / 0.12);\n        if (b.kind === 0) {\n          const df = max(0, -dx * 0.3 - dy * 0.75 + nz * 0.6), lit = (0.72 + 0.4 * df) * glint * edge, u = cl(0.5 + 0.6 * (dx - dy) * 0.7, 0, 1);\n          R = (col[9] + (col[15] - col[9]) * u) * lit + col[12] * rim * 0.75 + hi;\n          G = (col[10] + (col[16] - col[10]) * u) * lit + col[13] * rim * 0.75 + hi;\n          B = (col[11] + (col[17] - col[11]) * u) * lit + col[14] * rim * 0.75 + hi;\n        } else {\n          const core = exp(-(dx * dx + (dy - 0.42) ** 2) * 5) * glint, body = 0.55 * edge;\n          R = col[18] * body + col[21] * core + col[21] * rim * 0.5 + hi;\n          G = col[19] * body + col[22] * core + col[22] * rim * 0.5 + hi;\n          B = col[20] * body + col[23] * core + col[23] * rim * 0.5 + hi;\n        }\n      }\n      R += (bg[p] - R) * fog;\n      G += (bg[p + 1] - G) * fog;\n      B += (bg[p + 2] - B) * fog;\n      bg[p] += (R - bg[p]) * cov;\n      bg[p + 1] += (G - bg[p + 1]) * cov;\n      bg[p + 2] += (B - bg[p + 2]) * cov;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still."},{"name":"Beads","min":8,"max":40,"about":"How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one."},{"name":"Wobble","min":0,"max":1,"about":"How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging."}],"start":[0,2,8,0.06],"measures":{"motion":0.1786,"detail":0.0286,"edges":0.0792,"complexity":2.417,"coverage":1,"colour":0.2132,"drift":0.1307},"knobResponse":[0.3676,0.1568,0.0763,0.0849]},{"slug":"server-rack","title":"Server Rack","family":"circuit","round":18,"note":"앞에서 본 42U 서버 랙이 패널을 채워요. 맨 위 스위치로 들어온 트래픽이 서버를 타고 내려가며 드라이브 불을 켜고, 백업이 스토리지 선반의 드라이브를 차례로 채워요. K4 를 올리면 바닥 타일에서 올라온 푸른 냉기 빛이 아래쪽 앞판을 물들여요.","idea":"A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","layer":{"id":"layer-server-rack","type":"code","name":"server-rack","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s."},{"name":"Load","min":0,"max":1,"about":"At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often."},{"name":"Aisle","min":0,"max":1,"about":"Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.3413,"detail":0.1038,"edges":0.3523,"complexity":1.287,"coverage":0.6285,"colour":0.2245,"drift":0.0981},"knobResponse":[0.0421,0.0369,0.0435,0.0677]},{"slug":"setting-mist","title":"Setting Mist","family":"cosmetic","round":31,"note":"왼쪽 밖에서 세팅 미스트가 1초에 한 번쯤 뿜어져, 얇은 원뿔이 3분의 1초 만에 구름으로 부풀고 소용돌이를 말며 흘러가다 가라앉아요. 짙은 물빛 바탕에 굵은 방울이 부드럽게 반짝여요. K1 은 색상환을 다 돌고, 누르면 크게 두 번 뿜어요.","idea":"Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.","buttons":"K1 tap fires a big double puff.","code":"// ===== Patternflow pattern =====\n// Title:   Setting Mist\n// Family:  cosmetic\n// Idea:    Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after a setting spray misted across a face\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1\n//\n// Knob 1: Hue. Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown.\n// Knob 2: Speed. How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower.\n// Knob 3: Spray. How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel.\n// Knob 4: Droplets. How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash.\n// Buttons: K1 tap fires a big double puff.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 6000;\nconst { min, max, floor, sin, cos, exp, abs, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The air: a stream function made of six travelling waves, 14 to 40 LEDs\n// long. Its curl moves the mist without bunching it, so the clouds roll.\n// [wavelength, direction, speed of travel, amplitude]\nconst WAVES = [\n  [40, 0.3, 0.6, 1.0],\n  [31, 1.9, -0.8, 0.9],\n  [24, 3.6, 0.9, 0.8],\n  [19, 4.9, -1.1, 0.7],\n  [16, 0.9, 1.3, 0.6],\n  [14, 2.7, -1.5, 0.5],\n].map(([l, a, w, m], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, (m * 4.2) / k, j * 2.4];\n});\n// The flow is worked out on a grid every 4 LEDs and read off between.\nconst GS = 4, GX = W / GS + 2, GY = H / GS + 2;\n// The ground is lit a little from the upper right: its level, 0..1.\nconst BGL = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const lx = (p % W) - 60, ly = floor(p / W) - 20;\n  BGL[p] = (26 + 26 * exp(-(lx * lx + ly * ly) / 5000)) / 255;\n}\n// Round orange and yellow the ground turns to deep navy, given at full\n// brightness like the hue colour it replaces.\nconst NAVY = [60, 95, 255];\n// Puffs are kept in a ring of NP, long enough for every cloud in the air.\nconst NP = 48;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), w: F(MAXP), gp: F(MAXP), gr: F(MAXP), dr: new Uint8Array(MAXP), pid: new Uint8Array(MAXP), ex: F(MAXP), ey: F(MAXP),\n    n: 0, T: 0, next: 0.3, nz: 0, puffs: [], slot: 0,\n    P0: F(NP).fill(-99), PY: F(NP), AX: F(NP), AY: F(NP), PL: F(NP), PG: F(NP), PR: F(NP),\n    U: F(GX * GY), V: F(GX * GY), D: F(N), Y: F(N), G: F(N), tmp: F(N), buf: F(N * 3), col: F(12),\n    hue: 0, spray: 0, drop: 0.06, started: false,\n  };\n}\n\n// A puff: the nozzle at height y, aimed at angle a (0 points straight right),\n// size s. It sprays for a fifth of a second. Its front rolls up like a smoke\n// ring: two eddies either side of the axis, carried out to reach PL and\n// slowing, which curl the cloud back on itself into billows.\nfunction puff(S, y, a, s, delay) {\n  const q = (S.slot = (S.slot + 1) % NP);\n  S.P0[q] = S.T + delay;\n  S.PY[q] = y;\n  S.AX[q] = cos(a);\n  S.AY[q] = sin(a);\n  S.PL[q] = (36 + 12 * s) * (0.85 + 0.3 * rnd());\n  S.PR[q] = 5 + 4 * s;\n  S.PG[q] = (220 + 100 * s) * (0.45 + 0.55 * rnd());\n  S.puffs.push({ q, y, a, s, t: -delay, left: round(380 * s), spread: 0.3 + 0.1 * s });\n}\n\n// The hand moves the bottle up and down the face: each puff comes from a new\n// height, aimed a little toward the middle of the panel.\nfunction fire(S, big) {\n  S.nz += 0.9 + rnd() * 0.8;\n  const y = 64 + 44 * sin(S.nz * 1.3) + (rnd() - 0.5) * 14;\n  const a = -0.45 * ((y - 64) / 64) + (rnd() - 0.5) * 0.3;\n  const s = big ? 2.2 : (1 + 0.7 * S.spray) * (0.8 + 0.4 * rnd());\n  puff(S, y, a, s, 0);\n  if (big || rnd() \u003c 0.22 + 0.3 * S.spray) {\n    const y2 = cl(y + (y \u003c 64 ? 1 : -1) * (14 + rnd() * 14), 8, H - 8);\n    puff(S, y2, -0.45 * ((y2 - 64) / 64) + (rnd() - 0.5) * 0.3, big ? 2 : s * (0.7 + 0.3 * rnd()), 0.16 + rnd() * 0.12);\n  }\n}\n\nfunction emit(S, p, k) {\n  for (let j = 0; j \u003c k && S.n \u003c MAXP; j++) {\n    const i = S.n++;\n    // Droplets leave the nozzle in a cone, faster along its axis.\n    const off = (rnd() + rnd() + rnd() - 1.5) * 2 * p.spread;\n    const a = p.a + off, v = (80 + 160 * rnd() * rnd()) * (0.85 + 0.15 * p.s) * (1 - 0.5 * abs(off));\n    // Each leaves at its own moment within the frame, so the burst does not\n    // start as one bright knot.\n    const lag = rnd() * 0.035;\n    S.x[i] = -3 + v * cos(a) * lag;\n    S.y[i] = p.y + (rnd() - 0.5) * 1.5 + v * sin(a) * lag;\n    S.vx[i] = v * cos(a);\n    S.vy[i] = v * sin(a);\n    S.age[i] = 0;\n    S.life[i] = 2.6 + 1.8 * rnd();\n    S.w[i] = 0.5 + 0.4 * rnd();\n    S.gp[i] = rnd() * 2 * PI;\n    S.gr[i] = 2 + 4 * rnd();\n    S.dr[i] = rnd() \u003c 0.3 + 0.3 * S.drop ? 1 : 0;\n    S.pid[i] = p.q;\n    // Each droplet also wanders off on its own, so the cloud keeps opening.\n    const e = rnd() * 2 * PI, es = 3 + 6 * rnd();\n    S.ex[i] = es * cos(e);\n    S.ey[i] = es * sin(e);\n  }\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.w[i] = S.w[j];\n  S.gp[i] = S.gp[j];\n  S.gr[i] = S.gr[j];\n  S.dr[i] = S.dr[j];\n  S.pid[i] = S.pid[j];\n  S.ex[i] = S.ex[j];\n  S.ey[i] = S.ey[j];\n}\n\nfunction flow(S) {\n  const T = S.T, U = S.U, V = S.V;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      U[gy * GX + gx] = u;\n      V[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  // Puffs on a clock: about one a second at Spray 0, three at Spray 1.\n  S.next -= st;\n  if (S.next \u003c= 0) {\n    fire(S, false);\n    S.next = (1.15 - 0.8 * S.spray) * (0.75 + 0.5 * rnd());\n  }\n  for (let q = S.puffs.length - 1; q >= 0; q--) {\n    const p = S.puffs[q];\n    p.t += st;\n    if (p.t \u003c 0) continue;\n    const k = p.t >= 0.2 ? p.left : min(p.left, round((p.left * st) / max(st, 0.2 - p.t + st)));\n    emit(S, p, k);\n    p.left -= k;\n    if (p.left \u003c= 0) S.puffs.splice(q, 1);\n  }\n  flow(S);\n  const U = S.U, V = S.V, drag = 3.1 - 1.1 * S.drop, fall = 2.5 + 7 * S.drop;\n  const kd = 1 - exp(-drag * st);\n  for (let i = S.n - 1; i >= 0; i--) {\n    const age = (S.age[i] += st);\n    if (age > S.life[i] || S.x[i] > W + 8 || S.y[i] \u003c -10 || S.y[i] > H + 10) {\n      kill(S, i);\n      continue;\n    }\n    const x = S.x[i], y = S.y[i];\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const u = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const v = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    // The young cloud churns hardest, then the air calms to a slow drift\n    // away from the nozzle, and the droplets sink as they age.\n    const churn = 1 + 1.6 * exp(-age * 1.6);\n    let ux = u * churn + 4 + S.ex[i], uy = v * churn - 1.5 + S.ey[i];\n    const q = S.pid[i], pa = S.T - S.P0[q];\n    if (pa \u003c 2.5) {\n      // The puff's two eddies, in the frame of its axis.\n      const ax = S.AX[q], ay = S.AY[q], f = S.PL[q] * (1 - exp(-pa / 0.22));\n      const dx = x + 3 - ax * f, dy = y - S.PY[q] - ay * f;\n      const sa = dx * ax + dy * ay, ta = dy * ax - dx * ay;\n      const R = S.PR[q] * (1 + 0.8 * pa), rc = 9 + 6 * pa, G = S.PG[q] * exp(-pa / 0.8);\n      const t1 = ta - R, t2 = ta + R;\n      const g1 = G / (sa * sa + t1 * t1 + rc), g2 = -G / (sa * sa + t2 * t2 + rc);\n      const vs = -(g1 * t1 + g2 * t2), vt = (g1 + g2) * sa;\n      ux += vs * ax - vt * ay;\n      uy += vs * ay + vt * ax;\n    }\n    S.vx[i] += (ux - S.vx[i]) * kd;\n    S.vy[i] += (uy - S.vy[i]) * kd;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + (S.vy[i] + fall * min(1, age * 0.6)) * st;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0] || 0;\n  S.spray = cl(k[2], 0, 1);\n  S.drop = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the mist already in the air.\n    for (let i = 0; i \u003c 75; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) fire(S, true);\n  step(S, d * rate);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  if (r \u003c 1) return;\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, Y = S.Y, G = S.G, tmp = S.tmp, buf = S.buf, col = S.col, T = S.T, dp = S.drop;\n  D.fill(0);\n  Y.fill(0);\n  G.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i], u = age / S.life[i];\n    const env = min(1, age * 18) * (1 - u) * (1 - u);\n    const x = S.x[i], y = S.y[i];\n    // For the first quarter second the droplets still fly in a thin cone;\n    // then they open into the soft cloud.\n    const yo = age \u003c 0.2 ? 1 : age > 0.6 ? 0 : (0.6 - age) / 0.4;\n    if (yo > 0) {\n      // Flying droplets smear into short streaks along their path.\n      const wy = S.w[i] * env * yo * 0.06, sx = S.vx[i] * 0.007, sy = S.vy[i] * 0.007;\n      for (let j = 0; j \u003c 4; j++) splat(Y, x - sx * j, y - sy * j, wy);\n    }\n    splat(D, x, y, S.w[i] * env * (1 - yo));\n    if (!S.dr[i]) continue;\n    // A droplet glints when it turns the light to the eye: a smooth swell\n    // a few times a second, so nothing strobes.\n    const tw = 0.5 + 0.5 * sin(S.gp[i] + S.gr[i] * T);\n    const t3 = tw * tw * tw, g = env * (1 - 0.8 * yo) * (0.04 + 0.3 * dp + (0.9 + dp) * t3 * t3 * t3);\n    splat(G, x, y, g);\n  }\n  // Haze is soft and wide; droplets keep their shape.\n  const r = 3 - round(2 * dp);\n  blur(D, tmp, r);\n  blur(D, tmp, r > 1 ? r - 1 : r);\n  blur(Y, tmp, 1);\n  blur(Y, tmp, 1);\n  for (let p = 0; p \u003c N; p++) D[p] += Y[p];\n  if (dp > 0.3) {\n    // Coarse spray: the droplets themselves as small soft dots in the cloud.\n    for (let i = 0; i \u003c S.n; i++) {\n      if (!S.dr[i]) continue;\n      const age = S.age[i], u = age / S.life[i];\n      splat(D, S.x[i], S.y[i], (dp - 0.3) * 1.1 * min(1, age * 18) * (1 - u) * (1 - u));\n    }\n  }\n  blur(G, tmp, dp > 0.6 ? 1 : 0);\n  // Deep ground, mist tint and glint colour from the hue. Dark orange reads\n  // brown and dark yellow olive, so round those hues the ground turns to\n  // navy and the mist is lifted to a brighter gold.\n  const h = S.hue + 0.48, hf = h - floor(h), wm = sm(hf / 0.06) * (1 - sm((hf - 0.17) / 0.1));\n  hsv(h, 0.9, 255, col, 0);\n  for (let c = 0; c \u003c 3; c++) col[c] += (NAVY[c] - col[c]) * wm;\n  hsv(h, 0.45 + 0.12 * wm, 255, col, 3);\n  hsv(h, 0.12 + 0.25 * wm, 255, col, 6);\n  const gain = (4.5 - 1.5 * dp) * (1 + 0.6 * wm);\n  for (let y = 0, q = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++, q += 3) {\n      const bg = BGL[p];\n      const a = 1 - exp(-D[p] * gain), g = G[p];\n      // Thin mist glows in the tint, thick mist goes to white.\n      const wt = a * a;\n      for (let c = 0; c \u003c 3; c++) {\n        const mist = col[3 + c] * (1 - wt) + 255 * wt;\n        buf[q + c] = col[c] * bg * (1 - a) + mist * a * 0.92 + col[6 + c] * g;\n      }\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-setting-mist","type":"code","name":"setting-mist","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Setting Mist\n// Family:  cosmetic\n// Idea:    Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after a setting spray misted across a face\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1\n//\n// Knob 1: Hue. Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown.\n// Knob 2: Speed. How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower.\n// Knob 3: Spray. How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel.\n// Knob 4: Droplets. How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash.\n// Buttons: K1 tap fires a big double puff.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 6000;\nconst { min, max, floor, sin, cos, exp, abs, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The air: a stream function made of six travelling waves, 14 to 40 LEDs\n// long. Its curl moves the mist without bunching it, so the clouds roll.\n// [wavelength, direction, speed of travel, amplitude]\nconst WAVES = [\n  [40, 0.3, 0.6, 1.0],\n  [31, 1.9, -0.8, 0.9],\n  [24, 3.6, 0.9, 0.8],\n  [19, 4.9, -1.1, 0.7],\n  [16, 0.9, 1.3, 0.6],\n  [14, 2.7, -1.5, 0.5],\n].map(([l, a, w, m], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, (m * 4.2) / k, j * 2.4];\n});\n// The flow is worked out on a grid every 4 LEDs and read off between.\nconst GS = 4, GX = W / GS + 2, GY = H / GS + 2;\n// The ground is lit a little from the upper right: its level, 0..1.\nconst BGL = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const lx = (p % W) - 60, ly = floor(p / W) - 20;\n  BGL[p] = (26 + 26 * exp(-(lx * lx + ly * ly) / 5000)) / 255;\n}\n// Round orange and yellow the ground turns to deep navy, given at full\n// brightness like the hue colour it replaces.\nconst NAVY = [60, 95, 255];\n// Puffs are kept in a ring of NP, long enough for every cloud in the air.\nconst NP = 48;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), w: F(MAXP), gp: F(MAXP), gr: F(MAXP), dr: new Uint8Array(MAXP), pid: new Uint8Array(MAXP), ex: F(MAXP), ey: F(MAXP),\n    n: 0, T: 0, next: 0.3, nz: 0, puffs: [], slot: 0,\n    P0: F(NP).fill(-99), PY: F(NP), AX: F(NP), AY: F(NP), PL: F(NP), PG: F(NP), PR: F(NP),\n    U: F(GX * GY), V: F(GX * GY), D: F(N), Y: F(N), G: F(N), tmp: F(N), buf: F(N * 3), col: F(12),\n    hue: 0, spray: 0, drop: 0.06, started: false,\n  };\n}\n\n// A puff: the nozzle at height y, aimed at angle a (0 points straight right),\n// size s. It sprays for a fifth of a second. Its front rolls up like a smoke\n// ring: two eddies either side of the axis, carried out to reach PL and\n// slowing, which curl the cloud back on itself into billows.\nfunction puff(S, y, a, s, delay) {\n  const q = (S.slot = (S.slot + 1) % NP);\n  S.P0[q] = S.T + delay;\n  S.PY[q] = y;\n  S.AX[q] = cos(a);\n  S.AY[q] = sin(a);\n  S.PL[q] = (36 + 12 * s) * (0.85 + 0.3 * rnd());\n  S.PR[q] = 5 + 4 * s;\n  S.PG[q] = (220 + 100 * s) * (0.45 + 0.55 * rnd());\n  S.puffs.push({ q, y, a, s, t: -delay, left: round(380 * s), spread: 0.3 + 0.1 * s });\n}\n\n// The hand moves the bottle up and down the face: each puff comes from a new\n// height, aimed a little toward the middle of the panel.\nfunction fire(S, big) {\n  S.nz += 0.9 + rnd() * 0.8;\n  const y = 64 + 44 * sin(S.nz * 1.3) + (rnd() - 0.5) * 14;\n  const a = -0.45 * ((y - 64) / 64) + (rnd() - 0.5) * 0.3;\n  const s = big ? 2.2 : (1 + 0.7 * S.spray) * (0.8 + 0.4 * rnd());\n  puff(S, y, a, s, 0);\n  if (big || rnd() \u003c 0.22 + 0.3 * S.spray) {\n    const y2 = cl(y + (y \u003c 64 ? 1 : -1) * (14 + rnd() * 14), 8, H - 8);\n    puff(S, y2, -0.45 * ((y2 - 64) / 64) + (rnd() - 0.5) * 0.3, big ? 2 : s * (0.7 + 0.3 * rnd()), 0.16 + rnd() * 0.12);\n  }\n}\n\nfunction emit(S, p, k) {\n  for (let j = 0; j \u003c k && S.n \u003c MAXP; j++) {\n    const i = S.n++;\n    // Droplets leave the nozzle in a cone, faster along its axis.\n    const off = (rnd() + rnd() + rnd() - 1.5) * 2 * p.spread;\n    const a = p.a + off, v = (80 + 160 * rnd() * rnd()) * (0.85 + 0.15 * p.s) * (1 - 0.5 * abs(off));\n    // Each leaves at its own moment within the frame, so the burst does not\n    // start as one bright knot.\n    const lag = rnd() * 0.035;\n    S.x[i] = -3 + v * cos(a) * lag;\n    S.y[i] = p.y + (rnd() - 0.5) * 1.5 + v * sin(a) * lag;\n    S.vx[i] = v * cos(a);\n    S.vy[i] = v * sin(a);\n    S.age[i] = 0;\n    S.life[i] = 2.6 + 1.8 * rnd();\n    S.w[i] = 0.5 + 0.4 * rnd();\n    S.gp[i] = rnd() * 2 * PI;\n    S.gr[i] = 2 + 4 * rnd();\n    S.dr[i] = rnd() \u003c 0.3 + 0.3 * S.drop ? 1 : 0;\n    S.pid[i] = p.q;\n    // Each droplet also wanders off on its own, so the cloud keeps opening.\n    const e = rnd() * 2 * PI, es = 3 + 6 * rnd();\n    S.ex[i] = es * cos(e);\n    S.ey[i] = es * sin(e);\n  }\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.w[i] = S.w[j];\n  S.gp[i] = S.gp[j];\n  S.gr[i] = S.gr[j];\n  S.dr[i] = S.dr[j];\n  S.pid[i] = S.pid[j];\n  S.ex[i] = S.ex[j];\n  S.ey[i] = S.ey[j];\n}\n\nfunction flow(S) {\n  const T = S.T, U = S.U, V = S.V;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      U[gy * GX + gx] = u;\n      V[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  // Puffs on a clock: about one a second at Spray 0, three at Spray 1.\n  S.next -= st;\n  if (S.next \u003c= 0) {\n    fire(S, false);\n    S.next = (1.15 - 0.8 * S.spray) * (0.75 + 0.5 * rnd());\n  }\n  for (let q = S.puffs.length - 1; q >= 0; q--) {\n    const p = S.puffs[q];\n    p.t += st;\n    if (p.t \u003c 0) continue;\n    const k = p.t >= 0.2 ? p.left : min(p.left, round((p.left * st) / max(st, 0.2 - p.t + st)));\n    emit(S, p, k);\n    p.left -= k;\n    if (p.left \u003c= 0) S.puffs.splice(q, 1);\n  }\n  flow(S);\n  const U = S.U, V = S.V, drag = 3.1 - 1.1 * S.drop, fall = 2.5 + 7 * S.drop;\n  const kd = 1 - exp(-drag * st);\n  for (let i = S.n - 1; i >= 0; i--) {\n    const age = (S.age[i] += st);\n    if (age > S.life[i] || S.x[i] > W + 8 || S.y[i] \u003c -10 || S.y[i] > H + 10) {\n      kill(S, i);\n      continue;\n    }\n    const x = S.x[i], y = S.y[i];\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const u = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const v = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    // The young cloud churns hardest, then the air calms to a slow drift\n    // away from the nozzle, and the droplets sink as they age.\n    const churn = 1 + 1.6 * exp(-age * 1.6);\n    let ux = u * churn + 4 + S.ex[i], uy = v * churn - 1.5 + S.ey[i];\n    const q = S.pid[i], pa = S.T - S.P0[q];\n    if (pa \u003c 2.5) {\n      // The puff's two eddies, in the frame of its axis.\n      const ax = S.AX[q], ay = S.AY[q], f = S.PL[q] * (1 - exp(-pa / 0.22));\n      const dx = x + 3 - ax * f, dy = y - S.PY[q] - ay * f;\n      const sa = dx * ax + dy * ay, ta = dy * ax - dx * ay;\n      const R = S.PR[q] * (1 + 0.8 * pa), rc = 9 + 6 * pa, G = S.PG[q] * exp(-pa / 0.8);\n      const t1 = ta - R, t2 = ta + R;\n      const g1 = G / (sa * sa + t1 * t1 + rc), g2 = -G / (sa * sa + t2 * t2 + rc);\n      const vs = -(g1 * t1 + g2 * t2), vt = (g1 + g2) * sa;\n      ux += vs * ax - vt * ay;\n      uy += vs * ay + vt * ax;\n    }\n    S.vx[i] += (ux - S.vx[i]) * kd;\n    S.vy[i] += (uy - S.vy[i]) * kd;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + (S.vy[i] + fall * min(1, age * 0.6)) * st;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0] || 0;\n  S.spray = cl(k[2], 0, 1);\n  S.drop = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the mist already in the air.\n    for (let i = 0; i \u003c 75; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) fire(S, true);\n  step(S, d * rate);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  if (r \u003c 1) return;\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, Y = S.Y, G = S.G, tmp = S.tmp, buf = S.buf, col = S.col, T = S.T, dp = S.drop;\n  D.fill(0);\n  Y.fill(0);\n  G.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i], u = age / S.life[i];\n    const env = min(1, age * 18) * (1 - u) * (1 - u);\n    const x = S.x[i], y = S.y[i];\n    // For the first quarter second the droplets still fly in a thin cone;\n    // then they open into the soft cloud.\n    const yo = age \u003c 0.2 ? 1 : age > 0.6 ? 0 : (0.6 - age) / 0.4;\n    if (yo > 0) {\n      // Flying droplets smear into short streaks along their path.\n      const wy = S.w[i] * env * yo * 0.06, sx = S.vx[i] * 0.007, sy = S.vy[i] * 0.007;\n      for (let j = 0; j \u003c 4; j++) splat(Y, x - sx * j, y - sy * j, wy);\n    }\n    splat(D, x, y, S.w[i] * env * (1 - yo));\n    if (!S.dr[i]) continue;\n    // A droplet glints when it turns the light to the eye: a smooth swell\n    // a few times a second, so nothing strobes.\n    const tw = 0.5 + 0.5 * sin(S.gp[i] + S.gr[i] * T);\n    const t3 = tw * tw * tw, g = env * (1 - 0.8 * yo) * (0.04 + 0.3 * dp + (0.9 + dp) * t3 * t3 * t3);\n    splat(G, x, y, g);\n  }\n  // Haze is soft and wide; droplets keep their shape.\n  const r = 3 - round(2 * dp);\n  blur(D, tmp, r);\n  blur(D, tmp, r > 1 ? r - 1 : r);\n  blur(Y, tmp, 1);\n  blur(Y, tmp, 1);\n  for (let p = 0; p \u003c N; p++) D[p] += Y[p];\n  if (dp > 0.3) {\n    // Coarse spray: the droplets themselves as small soft dots in the cloud.\n    for (let i = 0; i \u003c S.n; i++) {\n      if (!S.dr[i]) continue;\n      const age = S.age[i], u = age / S.life[i];\n      splat(D, S.x[i], S.y[i], (dp - 0.3) * 1.1 * min(1, age * 18) * (1 - u) * (1 - u));\n    }\n  }\n  blur(G, tmp, dp > 0.6 ? 1 : 0);\n  // Deep ground, mist tint and glint colour from the hue. Dark orange reads\n  // brown and dark yellow olive, so round those hues the ground turns to\n  // navy and the mist is lifted to a brighter gold.\n  const h = S.hue + 0.48, hf = h - floor(h), wm = sm(hf / 0.06) * (1 - sm((hf - 0.17) / 0.1));\n  hsv(h, 0.9, 255, col, 0);\n  for (let c = 0; c \u003c 3; c++) col[c] += (NAVY[c] - col[c]) * wm;\n  hsv(h, 0.45 + 0.12 * wm, 255, col, 3);\n  hsv(h, 0.12 + 0.25 * wm, 255, col, 6);\n  const gain = (4.5 - 1.5 * dp) * (1 + 0.6 * wm);\n  for (let y = 0, q = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++, q += 3) {\n      const bg = BGL[p];\n      const a = 1 - exp(-D[p] * gain), g = G[p];\n      // Thin mist glows in the tint, thick mist goes to white.\n      const wt = a * a;\n      for (let c = 0; c \u003c 3; c++) {\n        const mist = col[3 + c] * (1 - wt) + 255 * wt;\n        buf[q + c] = col[c] * bg * (1 - a) + mist * a * 0.92 + col[6 + c] * g;\n      }\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower."},{"name":"Spray","min":0,"max":1,"about":"How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel."},{"name":"Droplets","min":0,"max":1,"about":"How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash."}],"start":[0,2,0,0.06],"measures":{"motion":0.1908,"detail":0.0088,"edges":0.0593,"complexity":1.291,"coverage":1,"colour":0.0895,"drift":0.1077},"knobResponse":[0.1473,0.1003,0.1667,0.0634]},{"slug":"seven-shuffles","title":"Seven Shuffles","family":"algo","round":29,"note":"카드 한 벌을 옆에서 본 무지개 막대 더미를 리플 셔플로 섞어요. 한 번 섞을 때마다 그러데이션이 2, 4, 8 갈래로 엇갈려 끼다가 일곱 번쯤에 색종이처럼 흩어지고, 그다음 기수 정렬로 되돌려 다시 시작해요. K4 를 끝까지 돌리면 완벽한 파로 셔플이 되어 32장은 다섯 번 만에 처음 순서로 돌아와요.","idea":"A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.","buttons":"K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.","code":"// ===== Patternflow pattern =====\n// Title:   Seven Shuffles\n// Family:  algo\n// Idea:    A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbert-Shannon-Reeds riffle shuffle (Edgar Gilbert and Claude Shannon, 1955; Jim Reeds, 1981), seven shuffles suffice (Dave Bayer and Persi Diaconis, 1992), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1\n//\n// Knob 1: Hue. Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one.\n// Knob 2: Speed. How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer.\n// Knob 3: Cards. How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines.\n// Knob 4: Neatness. Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128).\n// Buttons: K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.\n\nconst W = 64, H = 128, NMAX = 128;\nconst { min, max, floor, round, exp, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (t) => ((t = cl(t, 0, 1)), t * t * (3 - 2 * t));\nconst rnd = () => Math.random();\n\n// The deck at rest spans columns XL to XL + BW. In a riffle the bottom packet\n// slides DX to the left and the top packet DX to the right, so where they\n// interleave each side shows only its own cards: a comb.\nconst XL = 8, BW = 48, DX = 6;\n// The strip on the left wall shows how far the deck is from random; the\n// marks on the right wall count the riffles.\nconst SX = 0, MX = 63;\n// Where the rainbow starts at Hue 0 (blue) and how much of the wheel it spans.\nconst H0 = 0.6, SPAN = 0.78;\n// Stop shuffling once the deck is this close to random, in total variation:\n// six riffles for 32 cards, seven for 52 (0.334, where six leave 0.614),\n// nine for 128.\nconst ENOUGH = 0.4;\n\n// Phases, and their length in seconds at Speed 2. A riffle splits the deck,\n// drops the cards together and squares it up; an unriffle pass does the\n// same backwards. REST holds the ordered deck before the first riffle, WAIT\n// the shuffled one before it is put back.\nconst REST = 0, SPLIT = 1, DROP = 2, JOIN = 3, PAUSE = 4, WAIT = 5;\nconst RIF = [0.8, 0.3, 0.9, 0.3, 0.25, 1.4], UNR = [0.8, 0.2, 0.55, 0.2, 0.08, 1.4];\n\n// log k! for the binomials in Bayer and Diaconis's formula.\nconst LF = new Float64Array(8400);\nfor (let i = 1; i \u003c LF.length; i++) LF[i] = LF[i - 1] + log(i);\n\n// Bayer and Diaconis: after k riffles, a deck whose order has r rising\n// sequences turns up with probability C(2^k + n - r, n) / 2^(kn), and the\n// Eulerian number A(n, r - 1) counts the orders with r of them. Half the\n// summed gap from 1/n! is the total variation distance from random.\nfunction tvTable(n) {\n  let row = new Float64Array(n + 1), nx = new Float64Array(n + 1);\n  row[0] = 1;\n  for (let m = 2; m \u003c= n; m++) {\n    nx.fill(0);\n    for (let j = 0; j \u003c m; j++) nx[j] = (j + 1) * row[j] + (m - j) * (j > 0 ? row[j - 1] : 0);\n    [row, nx] = [nx, row];\n  }\n  const tv = new Float64Array(14);\n  for (let k = 0; k \u003c 14; k++) {\n    const q = 2 ** k;\n    let s = 0;\n    for (let r = 1; r \u003c= n; r++) {\n      const w = exp(log(row[r - 1]) - LF[n]);\n      const ratio = q >= r ? exp(LF[q + n - r] - LF[q - r] - k * n * Math.LN2) : 0;\n      s += w * abs(ratio - 1);\n    }\n    tv[k] = min(1, s / 2);\n  }\n  return tv;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each card's colour by its place in the new deck, for this Hue.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let c = 0; c \u003c P.n; c++) hsv(hue + H0 + (SPAN * c) / (P.n - 1), 0.88, 255, P.col, c * 3);\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 32, nu: 0, sp: 2, hue: 0,\n    deck: new Int16Array(NMAX), from: new Float32Array(NMAX), to: new Float32Array(NMAX), side: new Int8Array(NMAX), nd: new Int16Array(NMAX),\n    job: 0, ph: REST, t: 0, k: 0, want: 0, pass: 0, bits: 5, tv: null, kmax: 6, faro: 5, strip: 1, glow: 0, mk: new Float32Array(16),\n    col: new Float32Array(NMAX * 3), buf: new Float32Array(W * H * 3), order: new Int16Array(NMAX),\n  };\n  fresh(params.s, 32);\n}\n\n// A new deck of n cards in order: card c at place c, counted from the bottom.\nfunction fresh(P, n) {\n  P.n = n;\n  for (let c = 0; c \u003c n; c++) P.deck[c] = c;\n  P.tv = tvTable(n);\n  P.kmax = 1;\n  while (P.kmax \u003c 13 && P.tv[P.kmax] >= ENOUGH) P.kmax++;\n  P.bits = 1;\n  while (1 \u003c\u003c P.bits \u003c n) P.bits++;\n  // How many perfect out-shuffles bring this deck home.\n  const a = new Int16Array(n), b = new Int16Array(n);\n  for (let c = 0; c \u003c n; c++) a[c] = c;\n  P.faro = 0;\n  do {\n    faro(a, b, n);\n    a.set(b.subarray(0, n));\n    P.faro++;\n  } while (P.faro \u003c 200 && !sorted(a, n));\n  P.job = 0, P.ph = REST, P.t = 0, P.k = 0, P.strip = 1;\n  P.mk.fill(0);\n  paint(P, P.hue);\n}\nfunction sorted(d, n) {\n  for (let i = 0; i \u003c n; i++) if (d[i] !== i) return false;\n  return true;\n}\n// The out-shuffle: the bottom half and the top half alternate from the\n// bottom up, so the bottom and top cards stay where they are.\nfunction faro(a, b, n) {\n  const c = (n + 1) >> 1;\n  for (let i = 0, l = 0, r = c; i \u003c n; i++) b[i] = i & 1 ? a[r++] : a[l++];\n}\n\n// Plan one riffle. The cut is binomial, as if each card picked a hand by a\n// coin; then the cards fall from the bottoms of the two packets, each from a\n// packet with chance in proportion to the cards it still holds. Neatness\n// pulls the cut to the middle and the falls toward strict alternation.\nfunction riffle(P) {\n  const n = P.n, nu = P.nu, d = P.deck;\n  let coin = 0;\n  for (let i = 0; i \u003c n; i++) coin += rnd() \u003c 0.5 ? 1 : 0;\n  const c = cl(round(n / 2 + (coin - n / 2) * (1 - nu) + (n & 1 ? 0.25 : 0)), 0, n);\n  let a = c, b = n - c, l = 0, r = c, last = 1;\n  for (let j = 0; j \u003c n; j++) {\n    const pg = a / (a + b), pa = last > 0 ? 1 : 0;\n    const fromL = b === 0 || (a > 0 && rnd() \u003c (1 - nu) * pg + nu * pa);\n    const card = fromL ? d[l++] : d[r++];\n    fromL ? a-- : b--;\n    last = fromL ? -1 : 1;\n    plan(P, card, fromL ? -1 : 1, j);\n  }\n  P.job = 0;\n}\n\n// Plan one unriffle: a pass of a binary radix sort. Cards whose original\n// place has a 0 in this bit slide left and drop to the bottom, the 1s slide\n// right and rise to the top, each side keeping its order. An inverse riffle\n// is exactly this with the bits drawn at random.\nfunction unriffle(P) {\n  const n = P.n, d = P.deck, bit = 1 \u003c\u003c P.pass;\n  let z = 0;\n  for (let i = 0; i \u003c n; i++) if (!(d[i] & bit)) z++;\n  for (let i = 0, lo = 0, hi = z; i \u003c n; i++) {\n    const card = d[i];\n    if (card & bit) plan(P, card, 1, hi++);\n    else plan(P, card, -1, lo++);\n  }\n  P.job = 1;\n}\n\nfunction plan(P, card, side, j) {\n  P.side[card] = side;\n  P.to[card] = j;\n  P.nd[j] = card;\n}\n\nfunction begin(P) {\n  for (let i = 0; i \u003c P.n; i++) P.from[P.deck[i]] = i;\n  P.ph = SPLIT, P.t = 0;\n}\n\n// What comes after a phase ends.\nfunction next(P) {\n  if (P.ph === SPLIT) return (P.ph = DROP), (P.t = 0);\n  if (P.ph === DROP) return (P.ph = JOIN), (P.t = 0);\n  if (P.ph === JOIN) {\n    for (let j = 0; j \u003c P.n; j++) P.deck[j] = P.nd[j];\n    if (P.job === 0) {\n      P.k++;\n      if (P.k \u003c= 16) P.mk[min(15, P.k - 1)] = 1;\n    } else P.pass++;\n    return (P.ph = PAUSE), (P.t = 0);\n  }\n  // At rest or after a pause, pick what the deck does next.\n  const home = sorted(P.deck, P.n);\n  if (P.job === 1 && P.pass \u003c P.bits) return unriffle(P), begin(P);\n  if (P.job === 1 || (home && P.k > 0)) {\n    // Back in order: by the radix sort, or by itself after perfect faros.\n    if (P.job === 0) P.glow = 1;\n    P.job = 0, P.k = 0;\n    if (P.want \u003c= 0) return (P.ph = REST), (P.t = 0);\n  }\n  if (P.want > 0 || (P.ph !== WAIT && P.k \u003c (P.nu > 0.97 ? max(P.faro, 1) : P.kmax) && P.k \u003c 12)) {\n    P.want = max(0, P.want - 1);\n    return riffle(P), begin(P);\n  }\n  if (P.ph !== WAIT) return (P.ph = WAIT), (P.t = 0);\n  P.pass = 0;\n  return unriffle(P), begin(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 32, 0.06], d = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[2], 32, NMAX));\n  if (n !== P.n) fresh(P, n);\n  if (P.hue !== k[0]) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  // Below a tenth the riffle is the pure random one the strip is true for.\n  P.nu = cl((k[3] - 0.1) / 0.9, 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.want++;\n    if (P.ph === REST || P.ph === WAIT) next(P);\n  }\n  // The hands slow down with Speed, but the waits between riffles do not\n  // drag on past a second or two.\n  const still = P.ph === REST || P.ph === WAIT || P.ph === PAUSE;\n  P.t += d * (still ? max(P.sp / 2, 0.75) : P.sp / 2);\n  const T = P.job ? UNR : RIF;\n  if (P.t >= T[P.ph]) next(P);\n\n  // The strip eases to the distance after k riffles, back to full once the\n  // deck is being put in order; it fades out as the riffles grow neat, where\n  // the formula no longer holds.\n  const goal = P.job === 1 ? 1 : P.tv[min(13, P.k)];\n  P.strip += (goal - P.strip) * min(1, d * 3);\n  P.glow = max(0, P.glow - d * 0.7);\n  for (let i = 0; i \u003c 16; i++) {\n    const on = i \u003c P.k && P.job === 0 ? 1 : 0;\n    P.mk[i] += (on * 0.55 - P.mk[i]) * min(1, d * (on ? 6 : 2.5));\n  }\n}\n\n// One card edge-on: h rows from row top, its face lit from above and its\n// lower edge dim (dark for the thick cards, a faint line at two rows a\n// card), across columns a to a + BW with the ends anti-aliased.\nfunction card(P, c, top, h, a, pass) {\n  const buf = P.buf, col = P.col, b = a + BW, gap = h >= 3 ? 0 : 0.28;\n  const g = P.glow * P.glow * 0.6, r0 = col[c * 3], g0 = col[c * 3 + 1], b0 = col[c * 3 + 2];\n  const R = r0 + (255 - r0) * g, G = g0 + (255 - g0) * g, B = b0 + (255 - b0) * g;\n  for (let yy = 0; yy \u003c h; yy++) {\n    const Y = top + yy, edge = yy === h - 1 && h > 1;\n    if (Y \u003c 0 || Y >= H || edge !== (pass === 0)) continue;\n    const lv = edge ? gap : 1 - 0.13 * yy;\n    for (let x = max(0, floor(a)); x \u003c= min(W - 1, floor(b)); x++) {\n      const w = (min(x + 1, b) - max(x, a)) * lv, q = (Y * W + x) * 3;\n      if (w \u003c= 0) continue;\n      buf[q] += (R - buf[q]) * w;\n      buf[q + 1] += (G - buf[q + 1]) * w;\n      buf[q + 2] += (B - buf[q + 2]) * w;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, buf = P.buf, T = P.job ? UNR : RIF, u = P.t / T[P.ph];\n  const h = n \u003c= 32 ? 4 : n \u003c= 42 ? 3 : n \u003c= 64 ? 2 : 1, y0 = floor((H - n * h) / 2);\n  buf.fill(0);\n  const moving = P.ph === SPLIT || P.ph === DROP || P.ph === JOIN;\n  // While the packets pass through each other the right one is in front.\n  const ord = P.order;\n  if (P.ph === SPLIT || P.ph === DROP) {\n    let m = 0;\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] \u003c 0) ord[m++] = P.nd[j];\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] > 0) ord[m++] = P.nd[j];\n  } else for (let j = 0; j \u003c n; j++) ord[j] = moving ? P.nd[j] : P.deck[j];\n  // Two passes: the dim edge rows first, then the faces, so a card passing\n  // in front never greys another card's face with its edge.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let j = 0; j \u003c n; j++) {\n      const c = ord[j];\n      let y = j, off = 0;\n      if (moving) {\n        const s = P.side[c] * DX;\n        if (P.ph === SPLIT) (y = P.from[c]), (off = s * ease(u));\n        else if (P.ph === DROP) (y = P.from[c] + (P.to[c] - P.from[c]) * ease(u)), (off = s);\n        else (y = P.to[c]), (off = s * (1 - ease(u)));\n      }\n      card(P, c, y0 + round((n - 1 - y) * h), h, XL + off, pass);\n    }\n  // The strip: full height while the deck is far from random, sinking as\n  // the riffles add up.\n  const fade = max(0, 1 - P.nu * 8), sh = P.strip * H;\n  if (fade > 0)\n    for (let y = 0; y \u003c H; y++) {\n      const w = cl(sh - (H - 1 - y), 0, 1) * fade * (H - y \u003c sh - 1.5 ? 0.38 : 0.85), q = (y * W + SX) * 3;\n      buf[q] = 230 * w, buf[q + 1] = 226 * w, buf[q + 2] = 214 * w;\n    }\n  // One mark per riffle down the right wall.\n  for (let i = 0; i \u003c 16; i++) {\n    const w = P.mk[i];\n    if (w \u003c 0.02) continue;\n    for (let y = 2 + i * 6; y \u003c 5 + i * 6 && y \u003c H; y++) {\n      const q = (y * W + MX) * 3;\n      buf[q] = 240 * w, buf[q + 1] = 236 * w, buf[q + 2] = 224 * w;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-seven-shuffles","type":"code","name":"seven-shuffles","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Seven Shuffles\n// Family:  algo\n// Idea:    A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbert-Shannon-Reeds riffle shuffle (Edgar Gilbert and Claude Shannon, 1955; Jim Reeds, 1981), seven shuffles suffice (Dave Bayer and Persi Diaconis, 1992), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1\n//\n// Knob 1: Hue. Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one.\n// Knob 2: Speed. How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer.\n// Knob 3: Cards. How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines.\n// Knob 4: Neatness. Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128).\n// Buttons: K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.\n\nconst W = 64, H = 128, NMAX = 128;\nconst { min, max, floor, round, exp, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (t) => ((t = cl(t, 0, 1)), t * t * (3 - 2 * t));\nconst rnd = () => Math.random();\n\n// The deck at rest spans columns XL to XL + BW. In a riffle the bottom packet\n// slides DX to the left and the top packet DX to the right, so where they\n// interleave each side shows only its own cards: a comb.\nconst XL = 8, BW = 48, DX = 6;\n// The strip on the left wall shows how far the deck is from random; the\n// marks on the right wall count the riffles.\nconst SX = 0, MX = 63;\n// Where the rainbow starts at Hue 0 (blue) and how much of the wheel it spans.\nconst H0 = 0.6, SPAN = 0.78;\n// Stop shuffling once the deck is this close to random, in total variation:\n// six riffles for 32 cards, seven for 52 (0.334, where six leave 0.614),\n// nine for 128.\nconst ENOUGH = 0.4;\n\n// Phases, and their length in seconds at Speed 2. A riffle splits the deck,\n// drops the cards together and squares it up; an unriffle pass does the\n// same backwards. REST holds the ordered deck before the first riffle, WAIT\n// the shuffled one before it is put back.\nconst REST = 0, SPLIT = 1, DROP = 2, JOIN = 3, PAUSE = 4, WAIT = 5;\nconst RIF = [0.8, 0.3, 0.9, 0.3, 0.25, 1.4], UNR = [0.8, 0.2, 0.55, 0.2, 0.08, 1.4];\n\n// log k! for the binomials in Bayer and Diaconis's formula.\nconst LF = new Float64Array(8400);\nfor (let i = 1; i \u003c LF.length; i++) LF[i] = LF[i - 1] + log(i);\n\n// Bayer and Diaconis: after k riffles, a deck whose order has r rising\n// sequences turns up with probability C(2^k + n - r, n) / 2^(kn), and the\n// Eulerian number A(n, r - 1) counts the orders with r of them. Half the\n// summed gap from 1/n! is the total variation distance from random.\nfunction tvTable(n) {\n  let row = new Float64Array(n + 1), nx = new Float64Array(n + 1);\n  row[0] = 1;\n  for (let m = 2; m \u003c= n; m++) {\n    nx.fill(0);\n    for (let j = 0; j \u003c m; j++) nx[j] = (j + 1) * row[j] + (m - j) * (j > 0 ? row[j - 1] : 0);\n    [row, nx] = [nx, row];\n  }\n  const tv = new Float64Array(14);\n  for (let k = 0; k \u003c 14; k++) {\n    const q = 2 ** k;\n    let s = 0;\n    for (let r = 1; r \u003c= n; r++) {\n      const w = exp(log(row[r - 1]) - LF[n]);\n      const ratio = q >= r ? exp(LF[q + n - r] - LF[q - r] - k * n * Math.LN2) : 0;\n      s += w * abs(ratio - 1);\n    }\n    tv[k] = min(1, s / 2);\n  }\n  return tv;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each card's colour by its place in the new deck, for this Hue.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let c = 0; c \u003c P.n; c++) hsv(hue + H0 + (SPAN * c) / (P.n - 1), 0.88, 255, P.col, c * 3);\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 32, nu: 0, sp: 2, hue: 0,\n    deck: new Int16Array(NMAX), from: new Float32Array(NMAX), to: new Float32Array(NMAX), side: new Int8Array(NMAX), nd: new Int16Array(NMAX),\n    job: 0, ph: REST, t: 0, k: 0, want: 0, pass: 0, bits: 5, tv: null, kmax: 6, faro: 5, strip: 1, glow: 0, mk: new Float32Array(16),\n    col: new Float32Array(NMAX * 3), buf: new Float32Array(W * H * 3), order: new Int16Array(NMAX),\n  };\n  fresh(params.s, 32);\n}\n\n// A new deck of n cards in order: card c at place c, counted from the bottom.\nfunction fresh(P, n) {\n  P.n = n;\n  for (let c = 0; c \u003c n; c++) P.deck[c] = c;\n  P.tv = tvTable(n);\n  P.kmax = 1;\n  while (P.kmax \u003c 13 && P.tv[P.kmax] >= ENOUGH) P.kmax++;\n  P.bits = 1;\n  while (1 \u003c\u003c P.bits \u003c n) P.bits++;\n  // How many perfect out-shuffles bring this deck home.\n  const a = new Int16Array(n), b = new Int16Array(n);\n  for (let c = 0; c \u003c n; c++) a[c] = c;\n  P.faro = 0;\n  do {\n    faro(a, b, n);\n    a.set(b.subarray(0, n));\n    P.faro++;\n  } while (P.faro \u003c 200 && !sorted(a, n));\n  P.job = 0, P.ph = REST, P.t = 0, P.k = 0, P.strip = 1;\n  P.mk.fill(0);\n  paint(P, P.hue);\n}\nfunction sorted(d, n) {\n  for (let i = 0; i \u003c n; i++) if (d[i] !== i) return false;\n  return true;\n}\n// The out-shuffle: the bottom half and the top half alternate from the\n// bottom up, so the bottom and top cards stay where they are.\nfunction faro(a, b, n) {\n  const c = (n + 1) >> 1;\n  for (let i = 0, l = 0, r = c; i \u003c n; i++) b[i] = i & 1 ? a[r++] : a[l++];\n}\n\n// Plan one riffle. The cut is binomial, as if each card picked a hand by a\n// coin; then the cards fall from the bottoms of the two packets, each from a\n// packet with chance in proportion to the cards it still holds. Neatness\n// pulls the cut to the middle and the falls toward strict alternation.\nfunction riffle(P) {\n  const n = P.n, nu = P.nu, d = P.deck;\n  let coin = 0;\n  for (let i = 0; i \u003c n; i++) coin += rnd() \u003c 0.5 ? 1 : 0;\n  const c = cl(round(n / 2 + (coin - n / 2) * (1 - nu) + (n & 1 ? 0.25 : 0)), 0, n);\n  let a = c, b = n - c, l = 0, r = c, last = 1;\n  for (let j = 0; j \u003c n; j++) {\n    const pg = a / (a + b), pa = last > 0 ? 1 : 0;\n    const fromL = b === 0 || (a > 0 && rnd() \u003c (1 - nu) * pg + nu * pa);\n    const card = fromL ? d[l++] : d[r++];\n    fromL ? a-- : b--;\n    last = fromL ? -1 : 1;\n    plan(P, card, fromL ? -1 : 1, j);\n  }\n  P.job = 0;\n}\n\n// Plan one unriffle: a pass of a binary radix sort. Cards whose original\n// place has a 0 in this bit slide left and drop to the bottom, the 1s slide\n// right and rise to the top, each side keeping its order. An inverse riffle\n// is exactly this with the bits drawn at random.\nfunction unriffle(P) {\n  const n = P.n, d = P.deck, bit = 1 \u003c\u003c P.pass;\n  let z = 0;\n  for (let i = 0; i \u003c n; i++) if (!(d[i] & bit)) z++;\n  for (let i = 0, lo = 0, hi = z; i \u003c n; i++) {\n    const card = d[i];\n    if (card & bit) plan(P, card, 1, hi++);\n    else plan(P, card, -1, lo++);\n  }\n  P.job = 1;\n}\n\nfunction plan(P, card, side, j) {\n  P.side[card] = side;\n  P.to[card] = j;\n  P.nd[j] = card;\n}\n\nfunction begin(P) {\n  for (let i = 0; i \u003c P.n; i++) P.from[P.deck[i]] = i;\n  P.ph = SPLIT, P.t = 0;\n}\n\n// What comes after a phase ends.\nfunction next(P) {\n  if (P.ph === SPLIT) return (P.ph = DROP), (P.t = 0);\n  if (P.ph === DROP) return (P.ph = JOIN), (P.t = 0);\n  if (P.ph === JOIN) {\n    for (let j = 0; j \u003c P.n; j++) P.deck[j] = P.nd[j];\n    if (P.job === 0) {\n      P.k++;\n      if (P.k \u003c= 16) P.mk[min(15, P.k - 1)] = 1;\n    } else P.pass++;\n    return (P.ph = PAUSE), (P.t = 0);\n  }\n  // At rest or after a pause, pick what the deck does next.\n  const home = sorted(P.deck, P.n);\n  if (P.job === 1 && P.pass \u003c P.bits) return unriffle(P), begin(P);\n  if (P.job === 1 || (home && P.k > 0)) {\n    // Back in order: by the radix sort, or by itself after perfect faros.\n    if (P.job === 0) P.glow = 1;\n    P.job = 0, P.k = 0;\n    if (P.want \u003c= 0) return (P.ph = REST), (P.t = 0);\n  }\n  if (P.want > 0 || (P.ph !== WAIT && P.k \u003c (P.nu > 0.97 ? max(P.faro, 1) : P.kmax) && P.k \u003c 12)) {\n    P.want = max(0, P.want - 1);\n    return riffle(P), begin(P);\n  }\n  if (P.ph !== WAIT) return (P.ph = WAIT), (P.t = 0);\n  P.pass = 0;\n  return unriffle(P), begin(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 32, 0.06], d = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[2], 32, NMAX));\n  if (n !== P.n) fresh(P, n);\n  if (P.hue !== k[0]) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  // Below a tenth the riffle is the pure random one the strip is true for.\n  P.nu = cl((k[3] - 0.1) / 0.9, 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.want++;\n    if (P.ph === REST || P.ph === WAIT) next(P);\n  }\n  // The hands slow down with Speed, but the waits between riffles do not\n  // drag on past a second or two.\n  const still = P.ph === REST || P.ph === WAIT || P.ph === PAUSE;\n  P.t += d * (still ? max(P.sp / 2, 0.75) : P.sp / 2);\n  const T = P.job ? UNR : RIF;\n  if (P.t >= T[P.ph]) next(P);\n\n  // The strip eases to the distance after k riffles, back to full once the\n  // deck is being put in order; it fades out as the riffles grow neat, where\n  // the formula no longer holds.\n  const goal = P.job === 1 ? 1 : P.tv[min(13, P.k)];\n  P.strip += (goal - P.strip) * min(1, d * 3);\n  P.glow = max(0, P.glow - d * 0.7);\n  for (let i = 0; i \u003c 16; i++) {\n    const on = i \u003c P.k && P.job === 0 ? 1 : 0;\n    P.mk[i] += (on * 0.55 - P.mk[i]) * min(1, d * (on ? 6 : 2.5));\n  }\n}\n\n// One card edge-on: h rows from row top, its face lit from above and its\n// lower edge dim (dark for the thick cards, a faint line at two rows a\n// card), across columns a to a + BW with the ends anti-aliased.\nfunction card(P, c, top, h, a, pass) {\n  const buf = P.buf, col = P.col, b = a + BW, gap = h >= 3 ? 0 : 0.28;\n  const g = P.glow * P.glow * 0.6, r0 = col[c * 3], g0 = col[c * 3 + 1], b0 = col[c * 3 + 2];\n  const R = r0 + (255 - r0) * g, G = g0 + (255 - g0) * g, B = b0 + (255 - b0) * g;\n  for (let yy = 0; yy \u003c h; yy++) {\n    const Y = top + yy, edge = yy === h - 1 && h > 1;\n    if (Y \u003c 0 || Y >= H || edge !== (pass === 0)) continue;\n    const lv = edge ? gap : 1 - 0.13 * yy;\n    for (let x = max(0, floor(a)); x \u003c= min(W - 1, floor(b)); x++) {\n      const w = (min(x + 1, b) - max(x, a)) * lv, q = (Y * W + x) * 3;\n      if (w \u003c= 0) continue;\n      buf[q] += (R - buf[q]) * w;\n      buf[q + 1] += (G - buf[q + 1]) * w;\n      buf[q + 2] += (B - buf[q + 2]) * w;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, buf = P.buf, T = P.job ? UNR : RIF, u = P.t / T[P.ph];\n  const h = n \u003c= 32 ? 4 : n \u003c= 42 ? 3 : n \u003c= 64 ? 2 : 1, y0 = floor((H - n * h) / 2);\n  buf.fill(0);\n  const moving = P.ph === SPLIT || P.ph === DROP || P.ph === JOIN;\n  // While the packets pass through each other the right one is in front.\n  const ord = P.order;\n  if (P.ph === SPLIT || P.ph === DROP) {\n    let m = 0;\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] \u003c 0) ord[m++] = P.nd[j];\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] > 0) ord[m++] = P.nd[j];\n  } else for (let j = 0; j \u003c n; j++) ord[j] = moving ? P.nd[j] : P.deck[j];\n  // Two passes: the dim edge rows first, then the faces, so a card passing\n  // in front never greys another card's face with its edge.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let j = 0; j \u003c n; j++) {\n      const c = ord[j];\n      let y = j, off = 0;\n      if (moving) {\n        const s = P.side[c] * DX;\n        if (P.ph === SPLIT) (y = P.from[c]), (off = s * ease(u));\n        else if (P.ph === DROP) (y = P.from[c] + (P.to[c] - P.from[c]) * ease(u)), (off = s);\n        else (y = P.to[c]), (off = s * (1 - ease(u)));\n      }\n      card(P, c, y0 + round((n - 1 - y) * h), h, XL + off, pass);\n    }\n  // The strip: full height while the deck is far from random, sinking as\n  // the riffles add up.\n  const fade = max(0, 1 - P.nu * 8), sh = P.strip * H;\n  if (fade > 0)\n    for (let y = 0; y \u003c H; y++) {\n      const w = cl(sh - (H - 1 - y), 0, 1) * fade * (H - y \u003c sh - 1.5 ? 0.38 : 0.85), q = (y * W + SX) * 3;\n      buf[q] = 230 * w, buf[q + 1] = 226 * w, buf[q + 2] = 214 * w;\n    }\n  // One mark per riffle down the right wall.\n  for (let i = 0; i \u003c 16; i++) {\n    const w = P.mk[i];\n    if (w \u003c 0.02) continue;\n    for (let y = 2 + i * 6; y \u003c 5 + i * 6 && y \u003c H; y++) {\n      const q = (y * W + MX) * 3;\n      buf[q] = 240 * w, buf[q + 1] = 236 * w, buf[q + 2] = 224 * w;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer."},{"name":"Cards","min":32,"max":128,"about":"How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines."},{"name":"Neatness","min":0,"max":1,"about":"Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128)."}],"start":[0,2,32,0.06],"measures":{"motion":3.42,"detail":0.1826,"edges":0.5208,"complexity":0.0962,"coverage":0.5604,"colour":0.575,"drift":0.2123},"knobResponse":[0.3602,0.3179,0.3253,0.2206]},{"slug":"shadow-play","title":"Shadow Play","family":"stage","round":26,"note":"등잔 불빛을 받은 흰 막에 와양 쿨릿 가죽 인형의 레이스 그림자가 비쳐요. 기사가 거인과 싸워 던져 버리면 구눙안이 떨며 쓸고 들어와 다음 장을 열고, K1 을 돌리면 막 뒤로 돌아가 금빛과 빨강, 남색 칠이 보여요.","idea":"Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.","buttons":"K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.","code":"// ===== Patternflow pattern =====\n// Title:   Shadow Play\n// Family:  stage\n// Idea:    Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the Javanese wayang kulit shadow play\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1\n//\n// Knob 1: View. At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp.\n// Knob 2: Speed. The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower.\n// Knob 3: Lamp. How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs.\n// Knob 4: Flicker. How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften.\n// Buttons: K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Rows: the top beam, the cloth, the line the puppets stand on, the hem, the banana trunk, the first row the audience can reach.\nconst BEAM = 3, CLOTH = 10, GROUND = 92, HEM = 103, TRUNK = 104, AUD = 88;\n// One scene in story seconds (real seconds at Speed 2).\nconst SCENE = 14.4;\n// The paint, seen from the dalang's side.\nconst GOLD = [0.95, 0.72, 0.26], RED = [0.86, 0.2, 0.13], INDIGO = [0.22, 0.3, 0.8], TEAL = [0.1, 0.52, 0.48], HAIR = [0.13, 0.1, 0.15];\nconst HORN = [0.32, 0.2, 0.11], BAMBOO = [0.62, 0.5, 0.3], IVORY = [0.96, 0.92, 0.82];\n// Lace: the punched holes, as a lattice in puppet space: spacing along, spacing across, laid diagonally.\nconst LA = [0, 2.5, 2.0, 1.9, 2.3], LB = [0, 2.5, 3.6, 1.9, 2.3], LD = [0, 0, 1, 0, 0], LR = [0, 0.9, 0.9, 0.8, 1.15];\n\n// Knight and ogre outlines in puppet space: x forward, y up from the soles.\nconst K_TORSO = [-5.2, 40.4, -3.6, 41.6, 3.2, 41.6, 4.6, 40.4, 3.4, 35, 1.9, 28.5, -2.1, 28.5, -3.6, 35];\nconst K_KAIN = [-3.2, 28.5, 3.2, 28.5, 4.4, 20, 3.4, 13, 1.6, 5, -0.6, 13, -4.5, 16, -9.8, 9.5, -5.8, 22];\nconst K_NOSE = [3.8, 49.6, 8.6, 45.2, 4.6, 46.4];\nconst O_TORSO = [-8.2, 47, -6.5, 48.4, 6, 48.4, 7.8, 46.5, 7, 38, 5.5, 31, -5.5, 31, -7.5, 39];\nconst O_KAIN = [-6.2, 31.5, 6.2, 31.5, 8.8, 21.5, 2, 17, -4, 19.5, -10, 23];\nconst O_CROWN = [-0.5, 58.5, 6.2, 58.5, 5.4, 62, 2.8, 67, 0.2, 61.8];\n\n// Where the knight and the ogre stand through a scene: story second, column (a scene that runs left to right).\nconst KX = [1.7, -16, 3.6, 18, 5.6, 14, 6, 23, 6.4, 14, 6.8, 17, 7.2, 13, 7.6, 24, 8, 16, 8.5, 20, 9, 22, 10.8, 28, 12.3, 86];\nconst OX = [2.3, 84, 4.2, 47, 5.6, 50, 6, 47, 6.4, 49, 6.8, 40, 7.2, 50, 7.6, 47, 8, 39, 8.5, 42, 9, 40];\nfunction key(t, k) {\n  if (t \u003c= k[0]) return k[1];\n  for (let i = 2; i \u003c k.length; i += 2) if (t \u003c k[i]) return mix(k[i - 1], k[i + 1], sm(k[i - 2], k[i], t));\n  return k[k.length - 1];\n}\nconst pose = (hc, sz) => ({ on: false, x: 32, y: GROUND, z: 0.02, rot: 0, face: 1, a1: 0, a2: 0, b1: 0, b2: 0, jaw: 0, hc, sz });\n\nexport function setup(params) {\n  const R = () => Math.random() * TAU;\n  const P = (params.s = {\n    M: new Float32Array(N), A: new Float32Array(N), C: new Float32Array(N * 3), F: new Float32Array(N * 3),\n    BG: new Float32Array(N * 3), PT: new Uint8Array(N), LW: new Float32Array(81), HB: new Float32Array((H - AUD) * W),\n    t: 0, rt: 0, view: 0, lamp: 0, fl: 0.06, knock: -1, ph: [R(), R(), R(), R(), R(), R(), R()], dir: Math.random() \u003c 0.5 ? 1 : -1,\n    K: pose(28, 1.22), O: pose(32, 1.12), G: pose(0, 1.04), I: 1, bil: 0, LX: 31.5, LY: 46, flame: 7, shx: 0, shy: 0,\n  });\n  // The puppets planted in the trunk at either end of the screen, only their fronts showing: an ogre king, a knight.\n  P.SIMP = [[-6.5, 1, 1.32, 0], [65.5, -1, 1.4, 1]].map(([x, face, sz, k]) => Object.assign(pose(30, sz), { x, face, k, y: GROUND + 4, a2: 0.1, b1: -0.1, b2: 0.15 }));\n  // Half the gunungan's width at each height: a leaf with a pointed tip.\n  for (let v = 0; v \u003c= 80; v++) P.LW[v] = v > 78 ? 0 : v \u003c 22 ? 18 * sqrt(1 - ((22 - v) / 31) ** 2) : 18 * (1 - ((v - 22) / 56) ** 1.7) ** 1.15;\n  // What does not move, as colour before the light: beam, border, posts, cloth, hem, trunk, floor.\n  const B = P.BG;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.02, 0.018, 0.03], t = 1;\n    if (y >= BEAM && y \u003c BEAM + 4) {\n      const g = [0.55, 0.85, 1, 0.65][y - BEAM] * ((x + (y & 1) * 2) % 5 === 0 ? 0.55 : 0.9 + 0.1 * n);\n      c = [0.5 * g, 0.31 * g, 0.16 * g];\n    } else if (y >= BEAM + 4 && y \u003c CLOTH) c = y === CLOTH - 1 ? (x & 1 ? [0.85, 0.62, 0.24] : [0.3, 0.07, 0.06]) : [0.34, 0.07, 0.06].map((v) => v * (0.85 + 0.15 * n));\n    else if (y >= CLOTH && y \u003c HEM && (x \u003c 2 || x > 61)) {\n      const g = x === 1 || x === 62 ? 0.75 : 0.42;\n      c = [0.46 * g, 0.28 * g, 0.15 * g];\n    } else if (y >= CLOTH && y \u003c HEM) (t = 0), (c = [0.955 + 0.045 * n - (y === 57 ? 0.07 : y === 58 ? 0.025 : 0) - (x & 1 ? 0.012 : 0), 0, 0]);\n    else if (y === HEM) c = [0.3, 0.06, 0.05];\n    else if (y >= TRUNK && y \u003c TRUNK + 8) {\n      const g = [0.7, 1, 0.95, 0.85, 0.72, 0.58, 0.44, 0.3][y - TRUNK] * (0.82 + 0.18 * hash(floor(x / 4) + y * 17, y));\n      (t = 2), (c = [0.6 * g, 0.64 * g, 0.4 * g]);\n    } else if (y >= TRUNK + 8) c = [0.05, 0.035, 0.03].map((v) => v * (1 - (y - TRUNK - 8) / 20));\n    (B[o] = c[0]), (B[o + 1] = c[1]), (B[o + 2] = c[2]), (P.PT[i] = t);\n  }\n}\n\n// The knight's scene, in story seconds, for a scene that runs left to right.\nfunction knight(t, Q, rt, kb) {\n  Q.on = t > 1.7 && t \u003c 12.3;\n  Q.x = key(t, KX);\n  const v = (key(t + 0.05, KX) - key(t - 0.05, KX)) * 10, walk = cl(abs(v) / 12, 0, 1), st = sin(PI * t * 2.6);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((Q.x - 14) / 9, 0, 1);\n  const point = sm(3.7, 4.1, t) * (1 - sm(4.8, 5.2, t)), heave = sm(8.5, 9.1, t) * (1 - sm(9.7, 10.5, t));\n  Q.y = GROUND - walk * 1.8 * abs(st);\n  Q.z = 0.03;\n  Q.rot = -0.05 * walk + fight * 0.06 * sin(w + 0.5) + heave * 0.16 - 0.14 * kb;\n  Q.a1 = 0.12 + 0.3 * walk * st + 1.45 * point + fight * 0.7 + 1.5 * reach + 2.5 * heave + 1.4 * kb;\n  Q.a2 = 0.15 + 0.35 * point + fight * 0.9 - 0.7 * reach + 0.2 * heave;\n  Q.b1 = -0.12 + 0.06 * sin(rt * 1.7) - 0.25 * walk * st + fight * 0.3 * sin(w + 2);\n  Q.b2 = 0.2;\n}\n\n// The ogre: in from the other side, a looming threat, the fight, the throw.\nfunction ogre(t, Q, rt, kb) {\n  Q.on = t > 2.3 && t \u003c 10.6;\n  const u = cl((t - 9.2) / 1.4, 0, 1);\n  Q.x = key(t, OX) + 30 * u;\n  const v = (key(t + 0.05, OX) - key(t - 0.05, OX)) * 10, walk = cl(abs(v) / 12, 0, 1) * (1 - u), st = sin(PI * t * 2.1);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((50 - Q.x) / 10, 0, 1);\n  const loom = sm(4.3, 4.9, t) * (1 - sm(4.95, 5.5, t));\n  Q.y = GROUND - walk * 2.6 * abs(st) - 115 * u * u;\n  Q.z = 0.03 + 0.16 * loom + 0.28 * u;\n  Q.rot = -0.04 * walk + 0.07 * walk * st - 0.1 * loom + fight * 0.07 * sin(w + 3.6) + 5.6 * u + 0.35 * kb;\n  Q.a1 = 0.3 + 0.25 * walk * st + 2.0 * loom + fight * (0.6 + 0.3 * sin(w)) + 1.6 * reach + 1.2 * u;\n  Q.a2 = 0.35 + 0.5 * loom + fight * 0.6 - 0.5 * reach;\n  Q.b1 = -0.4 - 0.3 * walk * st + 0.5 * loom; Q.b2 = 0.5;\n  Q.jaw = 0.08 + loom * (0.25 + 0.15 * sin(rt * 14)) + fight * 0.25 * (0.5 + 0.5 * sin(w * 2)) + 0.45 * u + 0.4 * kb;\n}\n\n// The gunungan: planted in the middle, pulled away trembling, back at the end.\nfunction gunungan(t, Q, rt, kb) {\n  Q.on = t \u003c 3.3 || t > 10.5;\n  let e, mv;\n  if (t \u003c 7) (e = cl((t - 1.4) / 1.9, 0, 1) ** 2), (Q.x = 32 + 58 * e), (mv = sin(PI * cl((t - 1.4) / 1.9, 0, 1)));\n  else (e = 1 - sm(10.5, 12.6, t)), (Q.x = 32 - 58 * e), (mv = sin(PI * e));\n  Q.y = 98 - 10 * mv;\n  Q.z = 0.02 + 0.3 * e;\n  Q.rot = -0.45 * e + (0.012 + 0.06 * mv + 0.12 * kb) * sin(rt * TAU * 8.5) + 0.01 * sin(rt * 2.3);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05);\n  (P.view = cl(k[0], 0, 1)), (P.lamp = cl(k[2], 0, 1)), (P.fl = cl(k[3], 0, 1));\n  (P.rt += rd), (P.t += (rd * cl(k[1], 0.2, 3)) / 2);\n  if (input.btnPressed && input.btnPressed[0]) P.knock = 0;\n  if (P.knock >= 0 && (P.knock += rd) > 1.2) P.knock = -1;\n  const kn = P.knock \u003c 0 ? 9 : P.knock, kb = kn \u003c 0.45 ? sin((PI * kn) / 0.45) : 0, kr = sin(PI * cl((kn - 0.1) / 0.5, 0, 1)), sh = kn \u003c 0.4 ? 1 - kn / 0.4 : 0;\n  // The flame: a breathing flicker, now and then a gutter, a sway that moves the light.\n  const f = P.fl, rt = P.rt, ph = P.ph, amp = 0.035 + 0.2 * f;\n  const n = 0.5 * sin(7.3 * rt + ph[0]) + 0.3 * sin(12.9 * rt + ph[1]) + 0.2 * sin(23.1 * rt + ph[2]), gut = max(0, sin(1.7 * rt + ph[3]) + 0.6 * sin(3.1 * rt + ph[6])) ** 3 * 0.25 * f;\n  P.I = 1 - 0.12 * f + amp * n - 0.35 * gut + 0.2 * sh;\n  // A draught also bellies the cloth away from the puppets, so their shadows swell and soften.\n  P.bil = 0.07 * f * (0.6 + 0.4 * sin(0.9 * rt + ph[5]));\n  P.LX = 31.5 + (1 + 11 * f) * (0.65 * sin(2.1 * rt + ph[4]) + 0.35 * sin(0.83 * rt + ph[5])) + 2 * amp * sin(9.7 * rt + ph[6]);\n  P.LY = 46 - 3 * gut - 3 * f * sin(1.3 * rt + ph[2]);\n  P.flame = 7 * (1 + 1.5 * f) * (1 + 0.8 * amp * sin(11.3 * rt + ph[1]) + 0.6 * gut);\n  (P.shx = 1.3 * sh * sin(kn * 70)), (P.shy = 0.9 * sh * sin(kn * 53 + 1));\n  // The play.\n  const sc = floor(P.t / SCENE), t = P.t - sc * SCENE, dir = sc & 1 ? -P.dir : P.dir;\n  (P.K.face = dir), (P.O.face = -dir), (P.G.face = dir);\n  knight(t, P.K, rt, kb), ogre(t, P.O, rt, kr), gunungan(t, P.G, rt, sh);\n  (P.K.x += 7 * kb), (P.O.x += 6 * kr);\n  for (const Q of [P.K, P.O, P.G]) if (dir \u003c 0) Q.x = 63 - Q.x;\n}\n\n// The puppet being drawn: screen from puppet space and back, its magnification and blur.\nlet M, A, C, TX, TY, F11, F12, F21, F22, I11, I12, I21, I22, MAG, PEN, HV, LC;\nfunction place(P, Q, D) {\n  const f = cl((Q.z + P.bil) / D, 0, 0.62), m = 1 / (1 - f), c = cos(Q.rot), s = sin(Q.rot), fc = Q.face, k = m * Q.sz, hc = Q.hc * Q.sz;\n  (MAG = k), (PEN = 1 + (P.flame * f) / (1 - f)), (HV = cl(1.25 - 0.42 * PEN, 0, 0.85));\n  (F11 = k * fc * c), (F12 = -k * fc * s), (F21 = -k * s), (F22 = -k * c);\n  TX = P.LX * (1 - m) + m * (Q.x + fc * s * hc) + P.shx;\n  TY = P.LY * (1 - m) + m * (Q.y - hc + c * hc) + P.shy;\n  const det = F11 * F22 - F12 * F21;\n  (I11 = F22 / det), (I12 = -F12 / det), (I21 = -F21 / det), (I22 = F11 / det);\n}\n\nfunction holes(u, v, k) {\n  let a = u, b = v;\n  if (LD[k]) (a = (u + v) * 0.7071), (b = (v - u) * 0.7071);\n  if (k === 4) (a += 0.8 * sin(v * 0.6 + abs(u) * 0.35)), (b += 0.5 * sin(abs(u) * 0.7));\n  const pa = LA[k], pb = LB[k], j = round(b / pb), aa = a + (j & 1) * pa * 0.5, du = aa - round(aa / pa) * pa, dv = b - j * pb;\n  return cl((LR[k] - sqrt(du * du + dv * dv)) * 1.15 + 0.1, 0, 1);\n}\n\n// The gunungan's inside: rim, gate, tree, the two beasts, and lace everywhere else.\nlet LN, LW;\nfunction leaf(u, v, hw) {\n  const au = abs(u);\n  (LN = 0), (LC = GOLD);\n  if (hw - au \u003c 1.4 || v \u003c 1.3) return (LC = RED), 1;\n  if (v \u003c 15 && au \u003c 8) {\n    if (v \u003c 9) return (LC = RED), au > 1 && au \u003c 3.3 && v > 2.2 && v \u003c 7.6 ? 0.12 : 1;\n    return au \u003c 8 - (v - 9) * 1.15 ? 1 : ((LN = 4), (LC = TEAL), 1);\n  }\n  if (au \u003c 1.9 - v * 0.012 && v \u003c 70) return 1;\n  for (let b = 0; b \u003c 6; b++) {\n    const vb = 19 + 8 * b + 0.5 * au + 0.02 * au * au;\n    if (abs(v - vb) \u003c 1.05 && au \u003c min(hw - 2.4, 15 - b)) return 1;\n  }\n  const bx = (au - 6.5) / 3.4, by = (v - 17.5) / 1.9;\n  if (bx * bx + by * by \u003c 1) return (LC = HORN), 1;\n  return (LN = 4), (LC = TEAL), 1;\n}\n\n// One part: kind 0 a tapered rod (x0, y0, x1, y1, r0, r1), 1 an ellipse (cx, cy, rx, ry, turn), 2 a polygon, 3 the gunungan's leaf.\n// lace picks the holes; a part with no colour is a hole cut through what is already there (lace is then how deep).\nfunction part(k, a, b, c, d, e, f, lace, col) {\n  let u0, u1, v0, v1, rp = 99;\n  const ce = cos(e || 0), se = sin(e || 0);\n  if (k === 0) {\n    const r = max(e, f);\n    (u0 = min(a, c) - r), (u1 = max(a, c) + r), (v0 = min(b, d) - r), (v1 = max(b, d) + r), (rp = r * MAG);\n  } else if (k === 1) {\n    const r = max(c, d);\n    (u0 = a - r), (u1 = a + r), (v0 = b - r), (v1 = b + r), (rp = min(c, d) * MAG);\n  } else if (k === 2) {\n    (u0 = v0 = 1e9), (u1 = v1 = -1e9);\n    for (let i = 0; i \u003c a.length; i += 2) (u0 = min(u0, a[i])), (u1 = max(u1, a[i])), (v0 = min(v0, a[i + 1])), (v1 = max(v1, a[i + 1]));\n  } else (u0 = -19), (u1 = 19), (v0 = 0), (v1 = 79);\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let q = 0; q \u003c 4; q++) {\n    const u = q & 1 ? u1 : u0, v = q & 2 ? v1 : v0, X = F11 * u + F12 * v + TX, Y = F21 * u + F22 * v + TY;\n    (x0 = min(x0, X)), (x1 = max(x1, X)), (y0 = min(y0, Y)), (y1 = max(y1, Y));\n  }\n  const pad = PEN * 0.5 + 0.5, thin = min(1, (2 * rp + 1) / PEN), abx = c - a, aby = d - b, ab2 = abx * abx + aby * aby || 1e-9;\n  const xa = max(0, floor(x0 - pad)), xb = min(W - 1, ceil(x1 + pad)), ya = max(0, floor(y0 - pad)), yb = min(H - 1, ceil(y1 + pad));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - TX, dy = y - TY, u = I11 * dx + I12 * dy, v = I21 * dx + I22 * dy;\n      let dd, op = 1, ln = lace, cc = col;\n      if (k === 0) {\n        const t = cl(((u - a) * abx + (v - b) * aby) / ab2, 0, 1), qx = u - a - abx * t, qy = v - b - aby * t;\n        dd = sqrt(qx * qx + qy * qy) - mix(e, f, t);\n      } else if (k === 1) {\n        const pu = u - a, pv = v - b, lu = (pu * ce + pv * se) / c, lv = (pv * ce - pu * se) / d;\n        dd = (sqrt(lu * lu + lv * lv) - 1) * min(c, d);\n      } else if (k === 2) {\n        let md = 1e9, ins = false;\n        for (let i = 0, j = a.length - 2; i \u003c a.length; j = i, i += 2) {\n          const xi = a[i], yi = a[i + 1], ex = a[j] - xi, ey = a[j + 1] - yi;\n          if (yi > v !== a[j + 1] > v && u \u003c (ex * (v - yi)) / ey + xi) ins = !ins;\n          const s = cl(((u - xi) * ex + (v - yi) * ey) / (ex * ex + ey * ey), 0, 1), qx = u - xi - ex * s, qy = v - yi - ey * s;\n          md = min(md, qx * qx + qy * qy);\n        }\n        dd = ins ? -sqrt(md) : sqrt(md);\n      } else {\n        const vi = cl(v, 0, 79.9), v0i = floor(vi), hw = mix(LW[v0i], LW[v0i + 1], vi - v0i);\n        dd = max(abs(u) - hw, -v, v - 78);\n        if (dd \u003c 0.6) (op = leaf(u, v, hw)), (ln = LN), (cc = LC);\n      }\n      const dp = dd * MAG;\n      if (dp > pad) continue;\n      let cs = cl(0.5 - dp / PEN, 0, 1) * thin, cv = cl(0.5 - dp, 0, 1);\n      const i = y * W + x, o = i * 3;\n      if (!cc) {\n        const dep = lace \u003c 0 ? 0.9 * holes(u, v, -lace) : lace, s = 1 - cs * dep * min(1, HV * 1.3), sv = 1 - cv * dep;\n        (M[i] *= s), (A[i] *= sv), (C[o] *= sv), (C[o + 1] *= sv), (C[o + 2] *= sv);\n        continue;\n      }\n      if (ln) {\n        const h = holes(u, v, ln);\n        (cs *= 1 - h * HV), (cv *= 1 - h * 0.85);\n      }\n      cs *= op;\n      cv *= op;\n      if (cs > M[i]) M[i] = cs;\n      if (cv > 0) (C[o] += (cc[0] - C[o]) * cv), (C[o + 1] += (cc[1] - C[o + 1]) * cv), (C[o + 2] += (cc[2] - C[o + 2]) * cv), (A[i] += (1 - A[i]) * cv);\n    }\n}\nconst rod = (x0, y0, x1, y1, r0, r1, lace, col) => part(0, x0, y0, x1, y1, r0, r1, lace, col);\nconst ell = (cx, cy, rx, ry, turn, lace, col) => part(1, cx, cy, rx, ry, turn, 0, lace, col);\nconst poly = (pts, lace, col) => part(2, pts, 0, 0, 0, 0, 0, lace, col);\n\n// An arm on its two joints, the pointing hand, and the thin rod down to the dalang's fist.\nfunction arm(sx, sy, a1, a2, l1, l2, r1, r2, col) {\n  const ex = sx + l1 * sin(a1), ey = sy - l1 * cos(a1), hx = ex + l2 * sin(a1 + a2), hy = ey - l2 * cos(a1 + a2);\n  rod(sx, sy, ex, ey, r1, r1 * 0.85, 0, col), rod(ex, ey, hx, hy, r2 * 0.95, r2 * 0.75, 0, col);\n  rod(hx, hy, hx + 2.4 * sin(a1 + a2 + 0.25), hy - 2.4 * cos(a1 + a2 + 0.25), r2 * 0.75, 0.3, 0, col);\n  rod(ex - 0.2, ey, ex + 0.2, ey, r1 * 1.15, r1 * 1.15, 0, GOLD);\n  const gx = 2 - hx, gy = -14 - hy, l = sqrt(gx * gx + gy * gy) || 1, L = min(l, 30) / l;\n  rod(hx, hy, hx + gx * L, hy + gy * L, 0.42, 0.42, 0, BAMBOO);\n}\n\nfunction drawKnight(Q) {\n  rod(0.4, 34, 0.4, -16, 0.5, 0.45, 0, HORN);\n  arm(-4.6, 39.4, Q.b1, Q.b2, 12, 12.5, 1.0, 0.85, GOLD);\n  rod(-1, 17, -2.6, 1.5, 1.15, 0.95, 0, GOLD), rod(-2.6, 0.8, 1.2, 0.6, 0.8, 0.7, 0, GOLD);\n  rod(1.5, 17, 3.6, 1.5, 1.15, 0.95, 0, GOLD), rod(3.6, 0.8, 7.6, 0.6, 0.8, 0.7, 0, GOLD);\n  poly(K_KAIN, 2, INDIGO);\n  rod(3, 27, 5.4, 11, 0.8, 0.45, 0, RED);\n  poly(K_TORSO, 0, GOLD);\n  rod(-2.6, 29, 2.4, 29, 1.1, 1.1, 0, RED);\n  rod(-2.2, 33, 2, 33, 0.9, 0.9, -1, null);\n  rod(0.5, 40.5, 1.8, 44, 1.3, 1.1, 0, GOLD);\n  ell(-1.6, 46, 1.1, 2.6, -0.5, 1, GOLD);\n  ell(2.2, 47, 2.8, 3.6, 0.35, 0, GOLD);\n  poly(K_NOSE, 0, GOLD);\n  rod(1.5, 50.5, -2.5, 53.4, 1.6, 1.4, 3, HAIR), rod(-2.5, 53.4, -4.8, 50.2, 1.4, 0.6, 3, HAIR);\n  rod(-0.5, 50, 4.2, 50.6, 0.7, 0.6, 0, GOLD);\n  rod(3.6, 48, 5.1, 47.6, 0.38, 0.38, 0.9, null);\n  rod(-3.4, 38.6, 0.3, 36.6, 0.75, 0.75, -3, null), rod(0.3, 36.6, 3.4, 38.6, 0.75, 0.75, -3, null);\n  arm(3.6, 39.4, Q.a1, Q.a2, 12, 12.5, 1.0, 0.85, GOLD);\n}\n\nfunction drawOgre(Q) {\n  rod(0.4, 40, 0.4, -16, 0.55, 0.5, 0, HORN);\n  arm(-7.5, 46, Q.b1, Q.b2, 12.5, 13, 1.6, 1.3, RED);\n  rod(-3, 27, -7, 15, 2, 1.6, 0, RED), rod(-7, 15, -7.5, 2, 1.6, 1.3, 0, RED), rod(-8.1, 1, -3.6, 0.8, 1.1, 1, 0, RED);\n  rod(3, 27, 7, 15, 2, 1.6, 0, RED), rod(7, 15, 7.5, 2, 1.6, 1.3, 0, RED), rod(7.5, 1, 12, 0.8, 1.1, 1, 0, RED);\n  poly(O_KAIN, 2, TEAL);\n  rod(5, 29, 8, 10, 1, 0.6, 0, GOLD);\n  poly(O_TORSO, 0, RED), ell(3.6, 37, 4.8, 5.4, 0, 0, RED);\n  rod(-5.5, 45.6, 0.5, 42.5, 1, 1, -3, null), rod(0.5, 42.5, 6, 45.6, 1, 1, -3, null), ell(-1.5, 38, 3, 4, 0.2, -1, null);\n  rod(-6, 31.2, 6, 31.2, 1.2, 1.2, 0, GOLD);\n  ell(-3.5, 54, 5.5, 7.5, 0.35, 3, HAIR);\n  rod(-6, 59, -10.5, 63, 1.3, 0.3, 0, HAIR), rod(-8, 52, -13, 50, 1.3, 0.3, 0, HAIR), rod(-6.5, 47.5, -10.5, 43, 1.1, 0.3, 0, HAIR);\n  rod(0.5, 47, 2, 51, 2.5, 2.2, 0, RED);\n  ell(3.2, 55.3, 5, 4.4, 0, 0, RED), ell(9.3, 54.8, 2.4, 2.0, 0, 0, RED);\n  const j = Q.jaw, jx = 3.5 + 6.3 * cos(j), jy = 50.6 - 6.3 * sin(j);\n  rod(3.5, 50.6, jx, jy, 1.3, 1.0, 0, RED), rod(jx - 0.9, jy + 0.5, jx - 0.5, jy + 2.7, 0.55, 0.15, 0, IVORY);\n  rod(7.6, 51.3, 7.9, 49.3, 0.5, 0.15, 0, IVORY);\n  poly(O_CROWN, 1, GOLD);\n  ell(-0.5, 53, 1.5, 3, -0.4, 1, GOLD);\n  rod(6.3, 56.4, 6.3, 56.4, 1.5, 1.5, 0.9, null);\n  rod(6.6, 56.4, 6.6, 56.4, 0.6, 0.6, 0, HAIR);\n  arm(6, 46, Q.a1, Q.a2, 12.5, 13, 1.6, 1.3, RED);\n}\n\nfunction drawGunungan() {\n  rod(0, 6, 0, -12, 0.7, 0.6, 0, HORN);\n  part(3, 0, 0, 0, 0, 0, 0, 0, GOLD);\n}\n\n// A soft-edged ellipse painted over the frame, or added as glow.\nfunction blob(F, cx, cy, rx, ry, col, a, add) {\n  for (let y = max(0, floor(cy - ry - 1)); y \u003c= min(H - 1, ceil(cy + ry + 1)); y++)\n    for (let x = max(0, floor(cx - rx - 1)); x \u003c= min(W - 1, ceil(cx + rx + 1)); x++) {\n      const ex = (x - cx) / rx, ey = (y - cy) / ry, d = sqrt(ex * ex + ey * ey), o = (y * W + x) * 3;\n      const c = add ? max(0, 1 - d) ** 2 * a : cl((1 - d) * min(rx, ry) + 0.5, 0, 1) * a;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = add ? F[o + j] + col[j] * c : mix(F[o + j], col[j], c);\n    }\n}\n\n// The audience: heads and shoulders against the light, [x, top, rx, ry, kind]: bare, a peci cap, a headscarf.\nconst RIM = [1, 0.76, 0.48];\nconst HEADS = [[6, 98, 4.6, 5.6, 1], [19, 95, 5, 6, 0], [33, 99.5, 4.4, 5.4, 2], [46, 96, 5, 6.2, 1], [58.5, 98.5, 4.6, 5.6, 0]];\n// Their outline, as coverage in rows AUD and down: head, ears or scarf, neck, shoulders.\nfunction audience(HB, rt) {\n  HB.fill(0);\n  for (let j = 0; j \u003c 5; j++) {\n    const [hx, ht, rx, ry, kd] = HEADS[j], cx = hx + 0.6 * sin(rt * 0.45 + j * 1.7), top = ht + 0.4 * sin(rt * 0.7 + j * 2.3), cy = top + ry, sr = rx * 2.6;\n    for (let y = floor(top - 3); y \u003c H; y++)\n      for (let x = max(0, floor(cx - sr)); x \u003c= min(W - 1, ceil(cx + sr)); x++) {\n        const ax = abs(x - cx), ex = ax / (rx + (kd === 2 ? 0.8 : 0)), ey = (y - cy) / ry, sx = ax / sr, sy = (y - top - 2 * ry - 11) / 9;\n        let d = min((sqrt(ex * ex + ey * ey) - 1) * rx, (sqrt(sx * sx + sy * sy) - 1) * 9);\n        if (kd === 1) d = min(d, max(ax - rx * (0.86 + 0.04 * (y - top)), abs(y - top + 0.2) - 2.3));\n        if (kd === 2) d = min(d, max(ax - rx * (0.9 + (y - cy) * 0.09), cy - y));\n        else d = min(d, (sqrt((ax - rx) ** 2 + (y - cy - 0.6) ** 2) - 1.1) * 1.5, max(ax - rx * 0.62, cy - y));\n        const i = (y - AUD) * W + x;\n        HB[i] = max(HB[i], cl(0.5 - d, 0, 1));\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  (M = P.M), (A = P.A), (C = P.C), (LW = P.LW);\n  M.fill(0), A.fill(0), C.fill(0);\n  const D = 1 - 0.55 * P.lamp;\n  for (const S of P.SIMP) place(P, S, D), S.k ? drawKnight(S) : drawOgre(S);\n  if (P.K.on) place(P, P.K, D), drawKnight(P.K);\n  if (P.O.on) place(P, P.O, D), drawOgre(P.O);\n  if (P.G.on) place(P, P.G, D), drawGunungan();\n  const F = P.F, B = P.BG, PT = P.PT, I = P.I, LX = P.LX, LY = P.LY, R2 = (46 * D) ** 2, vw = sm(0, 1, P.view), rd = 0.12 * (1 - P.I) * P.fl, top = I * 228 * (0.95 + 0.05 / D);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = x - LX, dy = y - LY, fo = 1 / (1 + (dx * dx + dy * dy) / R2), pt = PT[i];\n      if (pt === 0) {\n        // The cloth: lamp light through cotton, the shadows on it; or from behind, the paint over the dim cloth.\n        const L = top * (0.2 + 0.8 * fo) * B[o], lr = L, lg = L * (0.7 + 0.18 * fo - rd), lb = L * (0.36 + 0.3 * fo - rd), s = 1 - 0.94 * M[i];\n        let r = lr * s, g = lg * s, b = lb * s;\n        if (vw > 0) {\n          const k = 0.3 * (1 - A[i]), lit = I * (0.45 + 0.5 * fo) * 250;\n          (r = mix(r, lr * k + C[o] * lit, vw)), (g = mix(g, lg * k + C[o + 1] * lit, vw)), (b = mix(b, lb * k + C[o + 2] * lit, vw));\n        }\n        (F[o] = r), (F[o + 1] = g), (F[o + 2] = b);\n      } else {\n        const s = I * (0.3 + 0.7 * fo) * 255 * (pt === 2 ? 1 - 0.85 * M[i] : 1);\n        (F[o] = B[o] * s), (F[o + 1] = B[o + 1] * s), (F[o + 2] = B[o + 2] * s);\n      }\n    }\n  // From the dalang's side the blencong hangs in view: a bronze garuda on a chain, the flame at its beak.\n  if (vw > 0.01) {\n    const bx = LX + 2, fl = P.flame / 7;\n    for (let y = 0; y \u003c 11; y++) blob(F, round(bx), y, 0.6, 0.6, y & 1 ? [90, 62, 30] : [150, 105, 50], vw);\n    blob(F, bx + 6, 10.5, 2.2, 3.2, [150, 96, 36], vw), blob(F, bx, 13, 5, 2.2, [170, 112, 42], vw), blob(F, bx - 4.2, 11, 1.4, 1.6, [200, 140, 60], vw);\n    blob(F, bx - 6.2, 12.8 - fl, 1.6 * fl, 6 * fl, [255, 140, 40], 0.5 * vw * I, 1), blob(F, bx - 6.2, 12.5 - fl * 0.6, 0.8, 1.9 * fl, [255, 240, 190], vw);\n  }\n  // The audience against the light, the rims of their heads lit by the screen.\n  const HB = P.HB;\n  audience(HB, P.rt);\n  for (let y = AUD + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = (y - AUD) * W + x, c = HB[k];\n      if (c \u003c= 0) continue;\n      const o = (y * W + x) * 3, q = (min(y, HEM - 1) * W + x) * 3, side = min(x > 0 ? HB[k - 1] : 1, x \u003c W - 1 ? HB[k + 1] : 1);\n      const rim = (1 - (HB[k - W] + HB[k - 2 * W]) / 2) * 0.6 + (1 - side) * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = F[o + j] * (1 - c) + c * (6 + rim * RIM[j] * max(70, F[q] * 0.9));\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","layer":{"id":"layer-shadow-play","type":"code","name":"shadow-play","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shadow Play\n// Family:  stage\n// Idea:    Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the Javanese wayang kulit shadow play\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1\n//\n// Knob 1: View. At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp.\n// Knob 2: Speed. The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower.\n// Knob 3: Lamp. How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs.\n// Knob 4: Flicker. How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften.\n// Buttons: K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Rows: the top beam, the cloth, the line the puppets stand on, the hem, the banana trunk, the first row the audience can reach.\nconst BEAM = 3, CLOTH = 10, GROUND = 92, HEM = 103, TRUNK = 104, AUD = 88;\n// One scene in story seconds (real seconds at Speed 2).\nconst SCENE = 14.4;\n// The paint, seen from the dalang's side.\nconst GOLD = [0.95, 0.72, 0.26], RED = [0.86, 0.2, 0.13], INDIGO = [0.22, 0.3, 0.8], TEAL = [0.1, 0.52, 0.48], HAIR = [0.13, 0.1, 0.15];\nconst HORN = [0.32, 0.2, 0.11], BAMBOO = [0.62, 0.5, 0.3], IVORY = [0.96, 0.92, 0.82];\n// Lace: the punched holes, as a lattice in puppet space: spacing along, spacing across, laid diagonally.\nconst LA = [0, 2.5, 2.0, 1.9, 2.3], LB = [0, 2.5, 3.6, 1.9, 2.3], LD = [0, 0, 1, 0, 0], LR = [0, 0.9, 0.9, 0.8, 1.15];\n\n// Knight and ogre outlines in puppet space: x forward, y up from the soles.\nconst K_TORSO = [-5.2, 40.4, -3.6, 41.6, 3.2, 41.6, 4.6, 40.4, 3.4, 35, 1.9, 28.5, -2.1, 28.5, -3.6, 35];\nconst K_KAIN = [-3.2, 28.5, 3.2, 28.5, 4.4, 20, 3.4, 13, 1.6, 5, -0.6, 13, -4.5, 16, -9.8, 9.5, -5.8, 22];\nconst K_NOSE = [3.8, 49.6, 8.6, 45.2, 4.6, 46.4];\nconst O_TORSO = [-8.2, 47, -6.5, 48.4, 6, 48.4, 7.8, 46.5, 7, 38, 5.5, 31, -5.5, 31, -7.5, 39];\nconst O_KAIN = [-6.2, 31.5, 6.2, 31.5, 8.8, 21.5, 2, 17, -4, 19.5, -10, 23];\nconst O_CROWN = [-0.5, 58.5, 6.2, 58.5, 5.4, 62, 2.8, 67, 0.2, 61.8];\n\n// Where the knight and the ogre stand through a scene: story second, column (a scene that runs left to right).\nconst KX = [1.7, -16, 3.6, 18, 5.6, 14, 6, 23, 6.4, 14, 6.8, 17, 7.2, 13, 7.6, 24, 8, 16, 8.5, 20, 9, 22, 10.8, 28, 12.3, 86];\nconst OX = [2.3, 84, 4.2, 47, 5.6, 50, 6, 47, 6.4, 49, 6.8, 40, 7.2, 50, 7.6, 47, 8, 39, 8.5, 42, 9, 40];\nfunction key(t, k) {\n  if (t \u003c= k[0]) return k[1];\n  for (let i = 2; i \u003c k.length; i += 2) if (t \u003c k[i]) return mix(k[i - 1], k[i + 1], sm(k[i - 2], k[i], t));\n  return k[k.length - 1];\n}\nconst pose = (hc, sz) => ({ on: false, x: 32, y: GROUND, z: 0.02, rot: 0, face: 1, a1: 0, a2: 0, b1: 0, b2: 0, jaw: 0, hc, sz });\n\nexport function setup(params) {\n  const R = () => Math.random() * TAU;\n  const P = (params.s = {\n    M: new Float32Array(N), A: new Float32Array(N), C: new Float32Array(N * 3), F: new Float32Array(N * 3),\n    BG: new Float32Array(N * 3), PT: new Uint8Array(N), LW: new Float32Array(81), HB: new Float32Array((H - AUD) * W),\n    t: 0, rt: 0, view: 0, lamp: 0, fl: 0.06, knock: -1, ph: [R(), R(), R(), R(), R(), R(), R()], dir: Math.random() \u003c 0.5 ? 1 : -1,\n    K: pose(28, 1.22), O: pose(32, 1.12), G: pose(0, 1.04), I: 1, bil: 0, LX: 31.5, LY: 46, flame: 7, shx: 0, shy: 0,\n  });\n  // The puppets planted in the trunk at either end of the screen, only their fronts showing: an ogre king, a knight.\n  P.SIMP = [[-6.5, 1, 1.32, 0], [65.5, -1, 1.4, 1]].map(([x, face, sz, k]) => Object.assign(pose(30, sz), { x, face, k, y: GROUND + 4, a2: 0.1, b1: -0.1, b2: 0.15 }));\n  // Half the gunungan's width at each height: a leaf with a pointed tip.\n  for (let v = 0; v \u003c= 80; v++) P.LW[v] = v > 78 ? 0 : v \u003c 22 ? 18 * sqrt(1 - ((22 - v) / 31) ** 2) : 18 * (1 - ((v - 22) / 56) ** 1.7) ** 1.15;\n  // What does not move, as colour before the light: beam, border, posts, cloth, hem, trunk, floor.\n  const B = P.BG;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.02, 0.018, 0.03], t = 1;\n    if (y >= BEAM && y \u003c BEAM + 4) {\n      const g = [0.55, 0.85, 1, 0.65][y - BEAM] * ((x + (y & 1) * 2) % 5 === 0 ? 0.55 : 0.9 + 0.1 * n);\n      c = [0.5 * g, 0.31 * g, 0.16 * g];\n    } else if (y >= BEAM + 4 && y \u003c CLOTH) c = y === CLOTH - 1 ? (x & 1 ? [0.85, 0.62, 0.24] : [0.3, 0.07, 0.06]) : [0.34, 0.07, 0.06].map((v) => v * (0.85 + 0.15 * n));\n    else if (y >= CLOTH && y \u003c HEM && (x \u003c 2 || x > 61)) {\n      const g = x === 1 || x === 62 ? 0.75 : 0.42;\n      c = [0.46 * g, 0.28 * g, 0.15 * g];\n    } else if (y >= CLOTH && y \u003c HEM) (t = 0), (c = [0.955 + 0.045 * n - (y === 57 ? 0.07 : y === 58 ? 0.025 : 0) - (x & 1 ? 0.012 : 0), 0, 0]);\n    else if (y === HEM) c = [0.3, 0.06, 0.05];\n    else if (y >= TRUNK && y \u003c TRUNK + 8) {\n      const g = [0.7, 1, 0.95, 0.85, 0.72, 0.58, 0.44, 0.3][y - TRUNK] * (0.82 + 0.18 * hash(floor(x / 4) + y * 17, y));\n      (t = 2), (c = [0.6 * g, 0.64 * g, 0.4 * g]);\n    } else if (y >= TRUNK + 8) c = [0.05, 0.035, 0.03].map((v) => v * (1 - (y - TRUNK - 8) / 20));\n    (B[o] = c[0]), (B[o + 1] = c[1]), (B[o + 2] = c[2]), (P.PT[i] = t);\n  }\n}\n\n// The knight's scene, in story seconds, for a scene that runs left to right.\nfunction knight(t, Q, rt, kb) {\n  Q.on = t > 1.7 && t \u003c 12.3;\n  Q.x = key(t, KX);\n  const v = (key(t + 0.05, KX) - key(t - 0.05, KX)) * 10, walk = cl(abs(v) / 12, 0, 1), st = sin(PI * t * 2.6);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((Q.x - 14) / 9, 0, 1);\n  const point = sm(3.7, 4.1, t) * (1 - sm(4.8, 5.2, t)), heave = sm(8.5, 9.1, t) * (1 - sm(9.7, 10.5, t));\n  Q.y = GROUND - walk * 1.8 * abs(st);\n  Q.z = 0.03;\n  Q.rot = -0.05 * walk + fight * 0.06 * sin(w + 0.5) + heave * 0.16 - 0.14 * kb;\n  Q.a1 = 0.12 + 0.3 * walk * st + 1.45 * point + fight * 0.7 + 1.5 * reach + 2.5 * heave + 1.4 * kb;\n  Q.a2 = 0.15 + 0.35 * point + fight * 0.9 - 0.7 * reach + 0.2 * heave;\n  Q.b1 = -0.12 + 0.06 * sin(rt * 1.7) - 0.25 * walk * st + fight * 0.3 * sin(w + 2);\n  Q.b2 = 0.2;\n}\n\n// The ogre: in from the other side, a looming threat, the fight, the throw.\nfunction ogre(t, Q, rt, kb) {\n  Q.on = t > 2.3 && t \u003c 10.6;\n  const u = cl((t - 9.2) / 1.4, 0, 1);\n  Q.x = key(t, OX) + 30 * u;\n  const v = (key(t + 0.05, OX) - key(t - 0.05, OX)) * 10, walk = cl(abs(v) / 12, 0, 1) * (1 - u), st = sin(PI * t * 2.1);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((50 - Q.x) / 10, 0, 1);\n  const loom = sm(4.3, 4.9, t) * (1 - sm(4.95, 5.5, t));\n  Q.y = GROUND - walk * 2.6 * abs(st) - 115 * u * u;\n  Q.z = 0.03 + 0.16 * loom + 0.28 * u;\n  Q.rot = -0.04 * walk + 0.07 * walk * st - 0.1 * loom + fight * 0.07 * sin(w + 3.6) + 5.6 * u + 0.35 * kb;\n  Q.a1 = 0.3 + 0.25 * walk * st + 2.0 * loom + fight * (0.6 + 0.3 * sin(w)) + 1.6 * reach + 1.2 * u;\n  Q.a2 = 0.35 + 0.5 * loom + fight * 0.6 - 0.5 * reach;\n  Q.b1 = -0.4 - 0.3 * walk * st + 0.5 * loom; Q.b2 = 0.5;\n  Q.jaw = 0.08 + loom * (0.25 + 0.15 * sin(rt * 14)) + fight * 0.25 * (0.5 + 0.5 * sin(w * 2)) + 0.45 * u + 0.4 * kb;\n}\n\n// The gunungan: planted in the middle, pulled away trembling, back at the end.\nfunction gunungan(t, Q, rt, kb) {\n  Q.on = t \u003c 3.3 || t > 10.5;\n  let e, mv;\n  if (t \u003c 7) (e = cl((t - 1.4) / 1.9, 0, 1) ** 2), (Q.x = 32 + 58 * e), (mv = sin(PI * cl((t - 1.4) / 1.9, 0, 1)));\n  else (e = 1 - sm(10.5, 12.6, t)), (Q.x = 32 - 58 * e), (mv = sin(PI * e));\n  Q.y = 98 - 10 * mv;\n  Q.z = 0.02 + 0.3 * e;\n  Q.rot = -0.45 * e + (0.012 + 0.06 * mv + 0.12 * kb) * sin(rt * TAU * 8.5) + 0.01 * sin(rt * 2.3);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05);\n  (P.view = cl(k[0], 0, 1)), (P.lamp = cl(k[2], 0, 1)), (P.fl = cl(k[3], 0, 1));\n  (P.rt += rd), (P.t += (rd * cl(k[1], 0.2, 3)) / 2);\n  if (input.btnPressed && input.btnPressed[0]) P.knock = 0;\n  if (P.knock >= 0 && (P.knock += rd) > 1.2) P.knock = -1;\n  const kn = P.knock \u003c 0 ? 9 : P.knock, kb = kn \u003c 0.45 ? sin((PI * kn) / 0.45) : 0, kr = sin(PI * cl((kn - 0.1) / 0.5, 0, 1)), sh = kn \u003c 0.4 ? 1 - kn / 0.4 : 0;\n  // The flame: a breathing flicker, now and then a gutter, a sway that moves the light.\n  const f = P.fl, rt = P.rt, ph = P.ph, amp = 0.035 + 0.2 * f;\n  const n = 0.5 * sin(7.3 * rt + ph[0]) + 0.3 * sin(12.9 * rt + ph[1]) + 0.2 * sin(23.1 * rt + ph[2]), gut = max(0, sin(1.7 * rt + ph[3]) + 0.6 * sin(3.1 * rt + ph[6])) ** 3 * 0.25 * f;\n  P.I = 1 - 0.12 * f + amp * n - 0.35 * gut + 0.2 * sh;\n  // A draught also bellies the cloth away from the puppets, so their shadows swell and soften.\n  P.bil = 0.07 * f * (0.6 + 0.4 * sin(0.9 * rt + ph[5]));\n  P.LX = 31.5 + (1 + 11 * f) * (0.65 * sin(2.1 * rt + ph[4]) + 0.35 * sin(0.83 * rt + ph[5])) + 2 * amp * sin(9.7 * rt + ph[6]);\n  P.LY = 46 - 3 * gut - 3 * f * sin(1.3 * rt + ph[2]);\n  P.flame = 7 * (1 + 1.5 * f) * (1 + 0.8 * amp * sin(11.3 * rt + ph[1]) + 0.6 * gut);\n  (P.shx = 1.3 * sh * sin(kn * 70)), (P.shy = 0.9 * sh * sin(kn * 53 + 1));\n  // The play.\n  const sc = floor(P.t / SCENE), t = P.t - sc * SCENE, dir = sc & 1 ? -P.dir : P.dir;\n  (P.K.face = dir), (P.O.face = -dir), (P.G.face = dir);\n  knight(t, P.K, rt, kb), ogre(t, P.O, rt, kr), gunungan(t, P.G, rt, sh);\n  (P.K.x += 7 * kb), (P.O.x += 6 * kr);\n  for (const Q of [P.K, P.O, P.G]) if (dir \u003c 0) Q.x = 63 - Q.x;\n}\n\n// The puppet being drawn: screen from puppet space and back, its magnification and blur.\nlet M, A, C, TX, TY, F11, F12, F21, F22, I11, I12, I21, I22, MAG, PEN, HV, LC;\nfunction place(P, Q, D) {\n  const f = cl((Q.z + P.bil) / D, 0, 0.62), m = 1 / (1 - f), c = cos(Q.rot), s = sin(Q.rot), fc = Q.face, k = m * Q.sz, hc = Q.hc * Q.sz;\n  (MAG = k), (PEN = 1 + (P.flame * f) / (1 - f)), (HV = cl(1.25 - 0.42 * PEN, 0, 0.85));\n  (F11 = k * fc * c), (F12 = -k * fc * s), (F21 = -k * s), (F22 = -k * c);\n  TX = P.LX * (1 - m) + m * (Q.x + fc * s * hc) + P.shx;\n  TY = P.LY * (1 - m) + m * (Q.y - hc + c * hc) + P.shy;\n  const det = F11 * F22 - F12 * F21;\n  (I11 = F22 / det), (I12 = -F12 / det), (I21 = -F21 / det), (I22 = F11 / det);\n}\n\nfunction holes(u, v, k) {\n  let a = u, b = v;\n  if (LD[k]) (a = (u + v) * 0.7071), (b = (v - u) * 0.7071);\n  if (k === 4) (a += 0.8 * sin(v * 0.6 + abs(u) * 0.35)), (b += 0.5 * sin(abs(u) * 0.7));\n  const pa = LA[k], pb = LB[k], j = round(b / pb), aa = a + (j & 1) * pa * 0.5, du = aa - round(aa / pa) * pa, dv = b - j * pb;\n  return cl((LR[k] - sqrt(du * du + dv * dv)) * 1.15 + 0.1, 0, 1);\n}\n\n// The gunungan's inside: rim, gate, tree, the two beasts, and lace everywhere else.\nlet LN, LW;\nfunction leaf(u, v, hw) {\n  const au = abs(u);\n  (LN = 0), (LC = GOLD);\n  if (hw - au \u003c 1.4 || v \u003c 1.3) return (LC = RED), 1;\n  if (v \u003c 15 && au \u003c 8) {\n    if (v \u003c 9) return (LC = RED), au > 1 && au \u003c 3.3 && v > 2.2 && v \u003c 7.6 ? 0.12 : 1;\n    return au \u003c 8 - (v - 9) * 1.15 ? 1 : ((LN = 4), (LC = TEAL), 1);\n  }\n  if (au \u003c 1.9 - v * 0.012 && v \u003c 70) return 1;\n  for (let b = 0; b \u003c 6; b++) {\n    const vb = 19 + 8 * b + 0.5 * au + 0.02 * au * au;\n    if (abs(v - vb) \u003c 1.05 && au \u003c min(hw - 2.4, 15 - b)) return 1;\n  }\n  const bx = (au - 6.5) / 3.4, by = (v - 17.5) / 1.9;\n  if (bx * bx + by * by \u003c 1) return (LC = HORN), 1;\n  return (LN = 4), (LC = TEAL), 1;\n}\n\n// One part: kind 0 a tapered rod (x0, y0, x1, y1, r0, r1), 1 an ellipse (cx, cy, rx, ry, turn), 2 a polygon, 3 the gunungan's leaf.\n// lace picks the holes; a part with no colour is a hole cut through what is already there (lace is then how deep).\nfunction part(k, a, b, c, d, e, f, lace, col) {\n  let u0, u1, v0, v1, rp = 99;\n  const ce = cos(e || 0), se = sin(e || 0);\n  if (k === 0) {\n    const r = max(e, f);\n    (u0 = min(a, c) - r), (u1 = max(a, c) + r), (v0 = min(b, d) - r), (v1 = max(b, d) + r), (rp = r * MAG);\n  } else if (k === 1) {\n    const r = max(c, d);\n    (u0 = a - r), (u1 = a + r), (v0 = b - r), (v1 = b + r), (rp = min(c, d) * MAG);\n  } else if (k === 2) {\n    (u0 = v0 = 1e9), (u1 = v1 = -1e9);\n    for (let i = 0; i \u003c a.length; i += 2) (u0 = min(u0, a[i])), (u1 = max(u1, a[i])), (v0 = min(v0, a[i + 1])), (v1 = max(v1, a[i + 1]));\n  } else (u0 = -19), (u1 = 19), (v0 = 0), (v1 = 79);\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let q = 0; q \u003c 4; q++) {\n    const u = q & 1 ? u1 : u0, v = q & 2 ? v1 : v0, X = F11 * u + F12 * v + TX, Y = F21 * u + F22 * v + TY;\n    (x0 = min(x0, X)), (x1 = max(x1, X)), (y0 = min(y0, Y)), (y1 = max(y1, Y));\n  }\n  const pad = PEN * 0.5 + 0.5, thin = min(1, (2 * rp + 1) / PEN), abx = c - a, aby = d - b, ab2 = abx * abx + aby * aby || 1e-9;\n  const xa = max(0, floor(x0 - pad)), xb = min(W - 1, ceil(x1 + pad)), ya = max(0, floor(y0 - pad)), yb = min(H - 1, ceil(y1 + pad));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - TX, dy = y - TY, u = I11 * dx + I12 * dy, v = I21 * dx + I22 * dy;\n      let dd, op = 1, ln = lace, cc = col;\n      if (k === 0) {\n        const t = cl(((u - a) * abx + (v - b) * aby) / ab2, 0, 1), qx = u - a - abx * t, qy = v - b - aby * t;\n        dd = sqrt(qx * qx + qy * qy) - mix(e, f, t);\n      } else if (k === 1) {\n        const pu = u - a, pv = v - b, lu = (pu * ce + pv * se) / c, lv = (pv * ce - pu * se) / d;\n        dd = (sqrt(lu * lu + lv * lv) - 1) * min(c, d);\n      } else if (k === 2) {\n        let md = 1e9, ins = false;\n        for (let i = 0, j = a.length - 2; i \u003c a.length; j = i, i += 2) {\n          const xi = a[i], yi = a[i + 1], ex = a[j] - xi, ey = a[j + 1] - yi;\n          if (yi > v !== a[j + 1] > v && u \u003c (ex * (v - yi)) / ey + xi) ins = !ins;\n          const s = cl(((u - xi) * ex + (v - yi) * ey) / (ex * ex + ey * ey), 0, 1), qx = u - xi - ex * s, qy = v - yi - ey * s;\n          md = min(md, qx * qx + qy * qy);\n        }\n        dd = ins ? -sqrt(md) : sqrt(md);\n      } else {\n        const vi = cl(v, 0, 79.9), v0i = floor(vi), hw = mix(LW[v0i], LW[v0i + 1], vi - v0i);\n        dd = max(abs(u) - hw, -v, v - 78);\n        if (dd \u003c 0.6) (op = leaf(u, v, hw)), (ln = LN), (cc = LC);\n      }\n      const dp = dd * MAG;\n      if (dp > pad) continue;\n      let cs = cl(0.5 - dp / PEN, 0, 1) * thin, cv = cl(0.5 - dp, 0, 1);\n      const i = y * W + x, o = i * 3;\n      if (!cc) {\n        const dep = lace \u003c 0 ? 0.9 * holes(u, v, -lace) : lace, s = 1 - cs * dep * min(1, HV * 1.3), sv = 1 - cv * dep;\n        (M[i] *= s), (A[i] *= sv), (C[o] *= sv), (C[o + 1] *= sv), (C[o + 2] *= sv);\n        continue;\n      }\n      if (ln) {\n        const h = holes(u, v, ln);\n        (cs *= 1 - h * HV), (cv *= 1 - h * 0.85);\n      }\n      cs *= op;\n      cv *= op;\n      if (cs > M[i]) M[i] = cs;\n      if (cv > 0) (C[o] += (cc[0] - C[o]) * cv), (C[o + 1] += (cc[1] - C[o + 1]) * cv), (C[o + 2] += (cc[2] - C[o + 2]) * cv), (A[i] += (1 - A[i]) * cv);\n    }\n}\nconst rod = (x0, y0, x1, y1, r0, r1, lace, col) => part(0, x0, y0, x1, y1, r0, r1, lace, col);\nconst ell = (cx, cy, rx, ry, turn, lace, col) => part(1, cx, cy, rx, ry, turn, 0, lace, col);\nconst poly = (pts, lace, col) => part(2, pts, 0, 0, 0, 0, 0, lace, col);\n\n// An arm on its two joints, the pointing hand, and the thin rod down to the dalang's fist.\nfunction arm(sx, sy, a1, a2, l1, l2, r1, r2, col) {\n  const ex = sx + l1 * sin(a1), ey = sy - l1 * cos(a1), hx = ex + l2 * sin(a1 + a2), hy = ey - l2 * cos(a1 + a2);\n  rod(sx, sy, ex, ey, r1, r1 * 0.85, 0, col), rod(ex, ey, hx, hy, r2 * 0.95, r2 * 0.75, 0, col);\n  rod(hx, hy, hx + 2.4 * sin(a1 + a2 + 0.25), hy - 2.4 * cos(a1 + a2 + 0.25), r2 * 0.75, 0.3, 0, col);\n  rod(ex - 0.2, ey, ex + 0.2, ey, r1 * 1.15, r1 * 1.15, 0, GOLD);\n  const gx = 2 - hx, gy = -14 - hy, l = sqrt(gx * gx + gy * gy) || 1, L = min(l, 30) / l;\n  rod(hx, hy, hx + gx * L, hy + gy * L, 0.42, 0.42, 0, BAMBOO);\n}\n\nfunction drawKnight(Q) {\n  rod(0.4, 34, 0.4, -16, 0.5, 0.45, 0, HORN);\n  arm(-4.6, 39.4, Q.b1, Q.b2, 12, 12.5, 1.0, 0.85, GOLD);\n  rod(-1, 17, -2.6, 1.5, 1.15, 0.95, 0, GOLD), rod(-2.6, 0.8, 1.2, 0.6, 0.8, 0.7, 0, GOLD);\n  rod(1.5, 17, 3.6, 1.5, 1.15, 0.95, 0, GOLD), rod(3.6, 0.8, 7.6, 0.6, 0.8, 0.7, 0, GOLD);\n  poly(K_KAIN, 2, INDIGO);\n  rod(3, 27, 5.4, 11, 0.8, 0.45, 0, RED);\n  poly(K_TORSO, 0, GOLD);\n  rod(-2.6, 29, 2.4, 29, 1.1, 1.1, 0, RED);\n  rod(-2.2, 33, 2, 33, 0.9, 0.9, -1, null);\n  rod(0.5, 40.5, 1.8, 44, 1.3, 1.1, 0, GOLD);\n  ell(-1.6, 46, 1.1, 2.6, -0.5, 1, GOLD);\n  ell(2.2, 47, 2.8, 3.6, 0.35, 0, GOLD);\n  poly(K_NOSE, 0, GOLD);\n  rod(1.5, 50.5, -2.5, 53.4, 1.6, 1.4, 3, HAIR), rod(-2.5, 53.4, -4.8, 50.2, 1.4, 0.6, 3, HAIR);\n  rod(-0.5, 50, 4.2, 50.6, 0.7, 0.6, 0, GOLD);\n  rod(3.6, 48, 5.1, 47.6, 0.38, 0.38, 0.9, null);\n  rod(-3.4, 38.6, 0.3, 36.6, 0.75, 0.75, -3, null), rod(0.3, 36.6, 3.4, 38.6, 0.75, 0.75, -3, null);\n  arm(3.6, 39.4, Q.a1, Q.a2, 12, 12.5, 1.0, 0.85, GOLD);\n}\n\nfunction drawOgre(Q) {\n  rod(0.4, 40, 0.4, -16, 0.55, 0.5, 0, HORN);\n  arm(-7.5, 46, Q.b1, Q.b2, 12.5, 13, 1.6, 1.3, RED);\n  rod(-3, 27, -7, 15, 2, 1.6, 0, RED), rod(-7, 15, -7.5, 2, 1.6, 1.3, 0, RED), rod(-8.1, 1, -3.6, 0.8, 1.1, 1, 0, RED);\n  rod(3, 27, 7, 15, 2, 1.6, 0, RED), rod(7, 15, 7.5, 2, 1.6, 1.3, 0, RED), rod(7.5, 1, 12, 0.8, 1.1, 1, 0, RED);\n  poly(O_KAIN, 2, TEAL);\n  rod(5, 29, 8, 10, 1, 0.6, 0, GOLD);\n  poly(O_TORSO, 0, RED), ell(3.6, 37, 4.8, 5.4, 0, 0, RED);\n  rod(-5.5, 45.6, 0.5, 42.5, 1, 1, -3, null), rod(0.5, 42.5, 6, 45.6, 1, 1, -3, null), ell(-1.5, 38, 3, 4, 0.2, -1, null);\n  rod(-6, 31.2, 6, 31.2, 1.2, 1.2, 0, GOLD);\n  ell(-3.5, 54, 5.5, 7.5, 0.35, 3, HAIR);\n  rod(-6, 59, -10.5, 63, 1.3, 0.3, 0, HAIR), rod(-8, 52, -13, 50, 1.3, 0.3, 0, HAIR), rod(-6.5, 47.5, -10.5, 43, 1.1, 0.3, 0, HAIR);\n  rod(0.5, 47, 2, 51, 2.5, 2.2, 0, RED);\n  ell(3.2, 55.3, 5, 4.4, 0, 0, RED), ell(9.3, 54.8, 2.4, 2.0, 0, 0, RED);\n  const j = Q.jaw, jx = 3.5 + 6.3 * cos(j), jy = 50.6 - 6.3 * sin(j);\n  rod(3.5, 50.6, jx, jy, 1.3, 1.0, 0, RED), rod(jx - 0.9, jy + 0.5, jx - 0.5, jy + 2.7, 0.55, 0.15, 0, IVORY);\n  rod(7.6, 51.3, 7.9, 49.3, 0.5, 0.15, 0, IVORY);\n  poly(O_CROWN, 1, GOLD);\n  ell(-0.5, 53, 1.5, 3, -0.4, 1, GOLD);\n  rod(6.3, 56.4, 6.3, 56.4, 1.5, 1.5, 0.9, null);\n  rod(6.6, 56.4, 6.6, 56.4, 0.6, 0.6, 0, HAIR);\n  arm(6, 46, Q.a1, Q.a2, 12.5, 13, 1.6, 1.3, RED);\n}\n\nfunction drawGunungan() {\n  rod(0, 6, 0, -12, 0.7, 0.6, 0, HORN);\n  part(3, 0, 0, 0, 0, 0, 0, 0, GOLD);\n}\n\n// A soft-edged ellipse painted over the frame, or added as glow.\nfunction blob(F, cx, cy, rx, ry, col, a, add) {\n  for (let y = max(0, floor(cy - ry - 1)); y \u003c= min(H - 1, ceil(cy + ry + 1)); y++)\n    for (let x = max(0, floor(cx - rx - 1)); x \u003c= min(W - 1, ceil(cx + rx + 1)); x++) {\n      const ex = (x - cx) / rx, ey = (y - cy) / ry, d = sqrt(ex * ex + ey * ey), o = (y * W + x) * 3;\n      const c = add ? max(0, 1 - d) ** 2 * a : cl((1 - d) * min(rx, ry) + 0.5, 0, 1) * a;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = add ? F[o + j] + col[j] * c : mix(F[o + j], col[j], c);\n    }\n}\n\n// The audience: heads and shoulders against the light, [x, top, rx, ry, kind]: bare, a peci cap, a headscarf.\nconst RIM = [1, 0.76, 0.48];\nconst HEADS = [[6, 98, 4.6, 5.6, 1], [19, 95, 5, 6, 0], [33, 99.5, 4.4, 5.4, 2], [46, 96, 5, 6.2, 1], [58.5, 98.5, 4.6, 5.6, 0]];\n// Their outline, as coverage in rows AUD and down: head, ears or scarf, neck, shoulders.\nfunction audience(HB, rt) {\n  HB.fill(0);\n  for (let j = 0; j \u003c 5; j++) {\n    const [hx, ht, rx, ry, kd] = HEADS[j], cx = hx + 0.6 * sin(rt * 0.45 + j * 1.7), top = ht + 0.4 * sin(rt * 0.7 + j * 2.3), cy = top + ry, sr = rx * 2.6;\n    for (let y = floor(top - 3); y \u003c H; y++)\n      for (let x = max(0, floor(cx - sr)); x \u003c= min(W - 1, ceil(cx + sr)); x++) {\n        const ax = abs(x - cx), ex = ax / (rx + (kd === 2 ? 0.8 : 0)), ey = (y - cy) / ry, sx = ax / sr, sy = (y - top - 2 * ry - 11) / 9;\n        let d = min((sqrt(ex * ex + ey * ey) - 1) * rx, (sqrt(sx * sx + sy * sy) - 1) * 9);\n        if (kd === 1) d = min(d, max(ax - rx * (0.86 + 0.04 * (y - top)), abs(y - top + 0.2) - 2.3));\n        if (kd === 2) d = min(d, max(ax - rx * (0.9 + (y - cy) * 0.09), cy - y));\n        else d = min(d, (sqrt((ax - rx) ** 2 + (y - cy - 0.6) ** 2) - 1.1) * 1.5, max(ax - rx * 0.62, cy - y));\n        const i = (y - AUD) * W + x;\n        HB[i] = max(HB[i], cl(0.5 - d, 0, 1));\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  (M = P.M), (A = P.A), (C = P.C), (LW = P.LW);\n  M.fill(0), A.fill(0), C.fill(0);\n  const D = 1 - 0.55 * P.lamp;\n  for (const S of P.SIMP) place(P, S, D), S.k ? drawKnight(S) : drawOgre(S);\n  if (P.K.on) place(P, P.K, D), drawKnight(P.K);\n  if (P.O.on) place(P, P.O, D), drawOgre(P.O);\n  if (P.G.on) place(P, P.G, D), drawGunungan();\n  const F = P.F, B = P.BG, PT = P.PT, I = P.I, LX = P.LX, LY = P.LY, R2 = (46 * D) ** 2, vw = sm(0, 1, P.view), rd = 0.12 * (1 - P.I) * P.fl, top = I * 228 * (0.95 + 0.05 / D);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = x - LX, dy = y - LY, fo = 1 / (1 + (dx * dx + dy * dy) / R2), pt = PT[i];\n      if (pt === 0) {\n        // The cloth: lamp light through cotton, the shadows on it; or from behind, the paint over the dim cloth.\n        const L = top * (0.2 + 0.8 * fo) * B[o], lr = L, lg = L * (0.7 + 0.18 * fo - rd), lb = L * (0.36 + 0.3 * fo - rd), s = 1 - 0.94 * M[i];\n        let r = lr * s, g = lg * s, b = lb * s;\n        if (vw > 0) {\n          const k = 0.3 * (1 - A[i]), lit = I * (0.45 + 0.5 * fo) * 250;\n          (r = mix(r, lr * k + C[o] * lit, vw)), (g = mix(g, lg * k + C[o + 1] * lit, vw)), (b = mix(b, lb * k + C[o + 2] * lit, vw));\n        }\n        (F[o] = r), (F[o + 1] = g), (F[o + 2] = b);\n      } else {\n        const s = I * (0.3 + 0.7 * fo) * 255 * (pt === 2 ? 1 - 0.85 * M[i] : 1);\n        (F[o] = B[o] * s), (F[o + 1] = B[o + 1] * s), (F[o + 2] = B[o + 2] * s);\n      }\n    }\n  // From the dalang's side the blencong hangs in view: a bronze garuda on a chain, the flame at its beak.\n  if (vw > 0.01) {\n    const bx = LX + 2, fl = P.flame / 7;\n    for (let y = 0; y \u003c 11; y++) blob(F, round(bx), y, 0.6, 0.6, y & 1 ? [90, 62, 30] : [150, 105, 50], vw);\n    blob(F, bx + 6, 10.5, 2.2, 3.2, [150, 96, 36], vw), blob(F, bx, 13, 5, 2.2, [170, 112, 42], vw), blob(F, bx - 4.2, 11, 1.4, 1.6, [200, 140, 60], vw);\n    blob(F, bx - 6.2, 12.8 - fl, 1.6 * fl, 6 * fl, [255, 140, 40], 0.5 * vw * I, 1), blob(F, bx - 6.2, 12.5 - fl * 0.6, 0.8, 1.9 * fl, [255, 240, 190], vw);\n  }\n  // The audience against the light, the rims of their heads lit by the screen.\n  const HB = P.HB;\n  audience(HB, P.rt);\n  for (let y = AUD + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = (y - AUD) * W + x, c = HB[k];\n      if (c \u003c= 0) continue;\n      const o = (y * W + x) * 3, q = (min(y, HEM - 1) * W + x) * 3, side = min(x > 0 ? HB[k - 1] : 1, x \u003c W - 1 ? HB[k + 1] : 1);\n      const rim = (1 - (HB[k - W] + HB[k - 2 * W]) / 2) * 0.6 + (1 - side) * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = F[o + j] * (1 - c) + c * (6 + rim * RIM[j] * max(70, F[q] * 0.9));\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"View","min":0,"max":1,"about":"At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower."},{"name":"Lamp","min":0,"max":1,"about":"How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs."},{"name":"Flicker","min":0,"max":1,"about":"How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften."}],"start":[0,2,0,0.06],"measures":{"motion":1.0562,"detail":0.0589,"edges":0.3798,"complexity":1.779,"coverage":0.627,"colour":0.1416,"drift":0.2084},"knobResponse":[0.2162,0.1484,0.1028,0.0596]},{"slug":"sheet-mask","title":"Sheet Mask","family":"cosmetic","round":35,"note":"세럼에 젖은 시트 마스크가 위에서 내려와 진줏빛 살결에 닿는 대로 맑은 청록으로 비치고, 공기가 갇힌 자리는 흰 공기 방울 여섯 개로 볼록 솟아요. 보이지 않는 손바닥이 4.2초 동안 위에서 아래로 쓸며 방울을 양옆 끝으로 밀어내면, 매끈해진 시트 위로 떠도는 빛 한 점이 섬유 결에 부서져 반짝여요. K3 은 방울을 20개까지 늘리고 크게 부풀리며, K1 은 색상환을 다 돌고 누르면 손바닥이 0.8초 만에 한 번에 눌러 펴요.","idea":"A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.","buttons":"K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Sheet Mask\n// Family:  cosmetic\n// Idea:    A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cellulose sheet mask smoothed onto the face; the reverse of Peel-Off\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1\n//\n// Knob 1: Hue. The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive.\n// Knob 2: Speed. At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower.\n// Knob 3: Bubbles. How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear.\n// Knob 4: Weave. The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze.\n// Buttons: K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x2c1b3c6d, 0x297a2d39);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca6b);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n// A generator of its own for the fabric, so turning Weave changes only the\n// fabric and never where the next round's blisters land.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the skin's contour under the sheet and the mottle of the fabric.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 13 + o * 7919) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// The fabric, one value an LED round 0.5, wrapping both ways: a cloudy\n// mottle and short fibres laid in it. Weave makes the fibres longer and\n// thicker and turns them towards the two directions of a woven gauze.\nfunction weave(P, k) {\n  const F = P.F, R = rng(90731), s = 1 + 3 * k, align = sm((k - 0.15) / 0.75), wd = 0.6 + 0.35 * (s - 1);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[y * W + x] = 0.5 * tap((x * 2) / s + 11, (y * 2) / s + 5);\n  const splat = (fx, fy, a) => {\n    const ix = floor(fx), iy = floor(fy), tx = fx - ix, ty = fy - iy;\n    const x0 = ((ix % W) + W) % W, x1 = (x0 + 1) % W, y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    F[y0 * W + x0] += a * (1 - tx) * (1 - ty);\n    F[y0 * W + x1] += a * tx * (1 - ty);\n    F[y1 * W + x0] += a * (1 - tx) * ty;\n    F[y1 * W + x1] += a * tx * ty;\n  };\n  const n = floor(1500 / s);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = R() * W, y0 = R() * H, len = (2.8 + 2.4 * R()) * s;\n    let th = R() * PI;\n    if (R() \u003c align) th = (R() \u003c 0.5 ? 0 : PI / 2) + (R() - 0.5) * 0.22;\n    const a = 0.3 + 0.7 * R(), dx = cos(th), dy = sin(th);\n    for (let w = -wd / 2; w \u003c= wd / 2 + 1e-6; w += 0.7)\n      for (let t = -len / 2; t \u003c= len / 2; t += 0.5) splat(x0 + dx * t - dy * w, y0 + dy * t + dx * w, a * 0.5);\n  }\n  let m = 0, q = 0;\n  for (let p = 0; p \u003c N; p++) m += F[p];\n  m /= N;\n  for (let p = 0; p \u003c N; p++) q += (F[p] - m) ** 2;\n  const sd = sqrt(q / N) || 1;\n  for (let p = 0; p \u003c N; p++) F[p] = cl(0.5 + (0.22 * (F[p] - m)) / sd, 0, 1);\n  P.weaveK = k;\n}\n\n// The round: the sheet comes down, settles, the palm smooths it, it shines,\n// it lifts off, the skin shows bare. Durations in seconds at Speed 2.\nconst DESC = 0, HOLD = 1, SMOOTH = 2, GLOSS = 3, LIFT = 4, BARE = 5;\nconst DUR = [2.6, 1.0, 4.2, 3.0, 1.4, 0.7];\n// The palm's edge is a bow, its middle A rows ahead of its ends.\nconst A = 22, MAXB = 20;\n\n// Where each blister of round n would be trapped, its size and shape. All\n// twenty are placed every round, so Bubbles only says how many of them are\n// trapped and how big they swell, and the first six stay where they were.\nfunction trap(P) {\n  const n = P.round, b = P.bub;\n  for (let i = 0; i \u003c MAXB; i++) {\n    let x = 0, y = 0, r = 0;\n    for (let tr = 0; tr \u003c 10; tr++) {\n      const s = n * 7919 + i * 131 + tr * 17;\n      x = 7 + 50 * hash(s);\n      y = 10 + 108 * hash(s + 1);\n      r = 3.6 + 4.6 * hash(s + 2) ** 1.5;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) if ((b[j].x - x) ** 2 + ((b[j].y - y) / 1.1) ** 2 \u003c ((b[j].r + r) * 1.2 + 2) ** 2) ok = false;\n      if (ok) break;\n    }\n    const e = 0.8 + 0.45 * hash(n * 7919 + i * 131 + 999);\n    Object.assign(b[i], { x, y, r, rx: r * e, ry: r / e, h: 0.4 + 0.2 * r, age: -1, alive: true, side: hash(n * 31 + i) \u003c 0.5 ? -1 : 1 });\n  }\n  // Wrinkles the sheet lays down with: a few long shallow ridges of air.\n  P.wr = [];\n  for (let i = 0; i \u003c 2; i++) {\n    // Down the sheet, as it hung, one in each half.\n    const s = n * 4447 + i * 59, th = PI / 2 + (hash(s) - 0.5) * 0.9;\n    P.wr.push({ x: 8 + 20 * hash(s + 1) + 28 * i, y: 30 + 68 * hash(s + 2), tx: cos(th), ty: sin(th), len: 14 + 12 * hash(s + 3) });\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  const bub = [];\n  for (let i = 0; i \u003c MAXB; i++) bub.push({});\n  params.s = {\n    c: 0, hue: 0, speed: 2, nb: 6, grow: 0, gs: 1, k4: 0.06, weaveK: -1,\n    ph: DESC, pt: 0, round: 0, front: -40, fast: false,\n    bub, wr: [], F: new Float32Array(N), Z: new Float32Array(N), AIR: new Float32Array(N), RIM: new Float32Array(N), SHD: new Float32Array(N),\n    SQ: new Float32Array(N), SL: new Float32Array(N),\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n  // The skin's pearl, laid once: where its sheen sits on the colour wheel\n  // and how light it is.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      params.s.SQ[y * W + x] = 0.5 * tap(x * 0.4 + 7, y * 0.4) + (x * 0.6 + y) / 170;\n      params.s.SL[y * W + x] = 0.86 + 0.03 * tap(x * 1.3 + 50, y * 1.3);\n    }\n  trap(params.s);\n}\n\n// The sheet's hem and the line where it has wet through to the skin, as it\n// comes down: the hem falls fast and slows, the wet line follows.\nconst hemAt = (q) => -4 + 140 * (1 - (1 - min(1, q / 0.65)) ** 2);\nconst wetAt = (q) => -10 + 146 * sm(q);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nb = floor(cl(k[2], 6, 20) + 0.5);\n  P.grow = (P.nb - 6) / 14;\n  P.gs = 1 + 0.4 * P.grow;\n  P.k4 = cl(k[3], 0, 1);\n  if (abs(P.k4 - P.weaveK) > 0.004) weave(P, P.k4);\n  const d = (d0 * P.speed) / 2;\n  P.c += d;\n  P.pt += d;\n\n  const tap1 = input.btnPressed && input.btnPressed[0];\n  if (tap1) {\n    if (P.ph === DESC || P.ph === HOLD) {\n      // Blisters the wet line had not reached yet are never trapped.\n      for (const b of P.bub) if (b.age \u003c 0) b.alive = false;\n      (P.ph = SMOOTH), (P.pt = 0), (P.fast = true), (P.front = -A - 10);\n    } else if (P.ph === SMOOTH) P.fast = true;\n    else if (P.ph === GLOSS) (P.ph = LIFT), (P.pt = 0);\n  }\n  // Blisters beyond the count asked for are never trapped; once the palm is\n  // on the sheet the set is what it is.\n  if (P.ph === DESC || P.ph === HOLD) for (let i = 0; i \u003c MAXB; i++) P.bub[i].alive = i \u003c P.nb;\n  if (P.ph === SMOOTH) {\n    P.front = P.fast ? P.front + d * 220 : -A - 10 + (H + 2 * A + 30) * sm(P.pt / DUR[SMOOTH]) ** 0.9;\n    // The palm pushes each blister it reaches ahead of it and out towards\n    // the nearer side, faster the further out it already is; squeezed, the\n    // blister flattens along the palm's edge and loses a little air.\n    for (const b of P.bub) {\n      if (!b.alive) continue;\n      const u = (b.x - 31.5) / 32, yf = P.front - A * u * u, top = b.y - b.ry * P.gs * 0.55;\n      if (yf > top) {\n        const dy = yf - top;\n        const side = abs(u) \u003c 0.08 ? b.side : u \u003c 0 ? -1 : 1;\n        b.y += dy;\n        b.x += side * dy * (0.9 + 1.8 * abs(u));\n        b.ry = max(b.r * 0.55, b.ry * (1 - 0.012 * dy));\n        b.rx = min(b.r * 1.5, b.rx * (1 + 0.008 * dy));\n        b.h *= 1 - 0.006 * dy;\n      }\n      if (b.x - b.rx * P.gs * 0.3 > W || b.x + b.rx * P.gs * 0.3 \u003c 0 || b.y - b.ry * P.gs > H) b.alive = false;\n    }\n    if (P.front >= H + A + 19.9) (P.ph = GLOSS), (P.pt = 0), (P.fast = false);\n  }\n  if (P.ph !== SMOOTH && P.pt >= DUR[P.ph]) {\n    P.pt = 0;\n    if (P.ph === BARE) {\n      P.round++;\n      trap(P);\n      P.ph = DESC;\n    } else P.ph = P.ph === HOLD ? ((P.front = -A - 10), SMOOTH) : P.ph + 1;\n  }\n  // A blister fills as the wet line passes it, with a little overshoot.\n  if (P.ph === DESC || P.ph === HOLD) {\n    const wl = P.ph === DESC ? wetAt(P.pt / DUR[DESC]) : 999;\n    for (const b of P.bub) if (b.alive && b.age \u003c 0 && wl > b.y - b.ry * P.gs * 0.3) b.age = 0;\n  }\n  for (const b of P.bub) if (b.age >= 0) b.age += d;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { F, Z, AIR, RIM, SHD, SQ, SL, tint } = P, c = P.c, ph = P.ph, q = P.pt / DUR[ph];\n  if (P.lastHue !== P.hue) {\n    // From coral through peach and butter to lime the tint is paler and the\n    // wet sheet lighter: at the aqua's depth those hues read tan and olive.\n    let h = P.hue + 0.5;\n    h -= floor(h);\n    P.warm = sm((h + 0.02) / 0.07) * (1 - sm((h - 0.21) / 0.09));\n    hsv(h, 0.56 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm;\n\n  // Where the sheet is: below its hem there is only skin while it comes\n  // down, and behind the wet line it has soaked through.\n  const hem = ph === DESC ? hemAt(q) : ph === BARE ? -99 : 999;\n  const wl = ph === DESC ? wetAt(q) : ph >= BARE ? -99 : 999;\n  // Lifting: in the first third air runs in under the sheet from its edges\n  // and it goes white, then it rises off and fades.\n  const air = ph === LIFT ? sm(q / 0.32) : 0, fade = ph === LIFT ? sm((q - 0.3) / 0.7) : ph === BARE ? 1 : 0;\n  const rise = ph === LIFT ? 9 * sm((q - 0.25) / 0.75) : 0;\n  const pressedAll = ph === GLOSS || ph === LIFT;\n  // A small lamp drifts over the panel; the wet sheet mirrors it as a spot\n  // that the fibres break into glints and the blisters bend round.\n  const Lx = 32 + 40 * sin(0.37 * c + 0.5), Ly = 64 + 62 * sin(0.23 * c + 2), Lz = 45;\n  const Ex = 32, Ey = 70, Ez = 240;\n\n  // Heights: the skin's soft contour, the fibres standing a little, the\n  // wrinkles of a sheet not yet pressed, and the blisters.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, fy = (((y + floor(rise)) % H) + H) % H;\n      Z[p] = 1.1 * tap(x * 0.5, y * 0.5 + 40) + (0.22 + 0.3 * P.k4) * (F[fy * W + x] - 0.5);\n      AIR[p] = 0;\n      RIM[p] = 0;\n      SHD[p] = 0;\n    }\n  if (ph \u003c= SMOOTH) {\n    for (const w of P.wr) {\n      const ex = abs(w.tx) * w.len + 8, ey = abs(w.ty) * w.len + 8;\n      for (let y = max(0, floor(w.y - ey)); y \u003c min(H, w.y + ey); y++) {\n        for (let x = max(0, floor(w.x - ex)); x \u003c min(W, w.x + ex); x++) {\n          const dx = x - w.x, dy = y - w.y, a = dx * w.tx + dy * w.ty, n = -dx * w.ty + dy * w.tx;\n          if (abs(n) > 7 || abs(a) > w.len) continue;\n          // The palm presses a wrinkle flat as it passes.\n          const u = (x - 31.5) / 32, flat = ph === SMOOTH ? 1 - sm((P.front - A * u * u - y) / 2.5) : 1;\n          const v = exp(-((n / 3) ** 2)) * sm((w.len - abs(a)) / 9) * flat;\n          const p = y * W + x;\n          Z[p] += 0.45 * v;\n          AIR[p] = max(AIR[p], 0.25 * v);\n        }\n      }\n    }\n    for (const b of P.bub) {\n      if (!b.alive || b.age \u003c 0) continue;\n      // Filling: a springy swell to full size in about a third of a second.\n      const f = 1 - exp(-b.age / 0.09) * cos(b.age * 11), br = 1 + (ph === HOLD ? 0.03 * sin(c * 4 + b.r) : 0);\n      const rx = b.rx * P.gs * min(1.08, f) * br, ry = b.ry * P.gs * min(1.08, f) * br, hh = b.h * P.gs * f, rm = min(rx, ry);\n      let tlx = Lx - b.x, tly = Ly - b.y;\n      const tl = 1 / (sqrt(tlx * tlx + tly * tly) || 1);\n      (tlx *= tl), (tly *= tl);\n      const x0 = max(0, floor(b.x - rx - 4)), x1 = min(W - 1, floor(b.x + rx + 4));\n      const y0 = max(0, floor(b.y - ry - 4)), y1 = min(H - 1, floor(b.y + ry + 4));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let x = x0; x \u003c= x1; x++) {\n          const ex = (x - b.x) / rx, ey = (y - b.y) / ry, dd = ex * ex + ey * ey, p = y * W + x, dr = sqrt(dd);\n          const face = dr > 0 ? (ex * tlx + ey * tly) / dr : 0;\n          if (dd \u003c 1) {\n            // A pillow, rounder on top than a dome.\n            Z[p] += hh * sm((1 - dd) / 0.75);\n            AIR[p] = max(AIR[p], sm((1 - dr) / 0.3));\n          }\n          // A bright rim where the sheet lifts off the skin, brightest on\n          // the lamp's side, and a soft shadow on the skin past the far side.\n          RIM[p] = max(RIM[p], exp(-((((dr - 0.92) * rm) / 0.8) ** 2)) * (0.3 + 0.7 * max(0, face)));\n          if (dr > 0.9) SHD[p] = max(SHD[p], exp(-((((dr - 1) * rm) / 1.8) ** 2)) * max(0, -face));\n        }\n    }\n  }\n\n  const tr = tint[0], tg = tint[1], tb = tint[2];\n  const wetV = 0.88 + 0.09 * warm, mixT = 0.55 - 0.08 * warm;\n  const front = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const zx = (Z[y * W + min(W - 1, x + 1)] - Z[y * W + max(0, x - 1)]) / 2;\n      const zy = (Z[min(H - 1, y + 1) * W + x] - Z[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - Z[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      (vx *= vi), (vy *= vi), (vz *= vi);\n      let hx = lx + vx, hy = ly + vy, hz = lz + vz;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const nh = max(0, (nx * hx + ny * hy + nz * hz) * hi);\n      // Shading against what a level sheet would get, so only slopes show.\n      const shade = cl(1 + (nx * lx + ny * ly + nz * lz - lz), 0.55, 1.35);\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and\n      // mint across the panel.\n      const qq = SQ[p] + c * 0.03, Ls = SL[p];\n      let sr = (0.98 + 0.03 * cos(6.283 * qq)) * Ls, sg = (0.85 + 0.03 * cos(6.283 * (qq - 0.33))) * Ls, sb = (0.79 + 0.04 * cos(6.283 * (qq - 0.67))) * Ls;\n\n      // How far the sheet has soaked onto the skin here, 0 (air under it)\n      // to 1 (wet through), and how far the palm has pressed it.\n      const u = (x - 31.5) / 32, ai = AIR[p];\n      let contact = 1, pressed = pressedAll ? 1 : 0;\n      if (ph === DESC) contact = sm((wl + 3 * sin(0.21 * x + 3 * c) + 2 * tap(x * 1.7, 9) - y) / 5);\n      if (ph \u003c= SMOOTH) {\n        const yf = front - A * u * u;\n        pressed = ph === SMOOTH ? sm((yf - y) / 2.5) : 0;\n        // Not yet pressed, the sheet only half touches in places.\n        const part = 0.76 - 0.26 * P.grow + (0.24 + 0.26 * P.grow) * sm(0.5 + 1.6 * tap(x * 1.2 + 90, y * 1.2 + 30));\n        contact *= part + (1 - part) * pressed;\n        contact *= 1 - ai * (1 - pressed);\n      }\n      if (ph === LIFT) {\n        const ed = (0.6 * min(x + 0.5, W - 0.5 - x, (y + 0.5) / 2, (H - 0.5 - y) / 2)) / 32 + 0.4 * sm(0.5 + 1.4 * tap(x * 0.9 + 3, y * 0.9 + 70));\n        contact *= 1 - sm((air * 1.1 - ed) / 0.08);\n      }\n      const fib = F[((((y + floor(rise)) % H) + H) % H) * W + x] - 0.5;\n\n      // Wet through: the skin seen through the serum's tint, darker as\n      // anything wet is. Over air: a hanging sheet is near white with its\n      // fibres showing; a blister is the soaked sheet lit from inside, a\n      // pale clear tint.\n      const fk = 1 + 0.6 * P.k4, at = 0.08 + 0.42 * ai, af = (0.93 + 0.02 * ai) * (1 + 0.18 * fk * fib);\n      const ar = (1 - at + tr * at) * af, ag = (1 - at + tg * at) * af, ab = (1 - at + tb * at) * af;\n      const wk = wetV * (1 - 0.06 * pressed) * (1 + 0.1 * fk * fib);\n      const wr = (sr * (1 - mixT) + tr * mixT) * wk, wg = (sg * (1 - mixT) + tg * mixT) * wk, wb = (sb * (1 - mixT) + tb * mixT) * wk;\n      let r = ar + (wr - ar) * contact, g = ag + (wg - ag) * contact, b = ab + (wb - ab) * contact;\n      const sd = 1 - 0.2 * SHD[p] * (1 - pressed);\n      r *= shade * sd;\n      g *= shade * sd;\n      b *= shade * sd;\n      // The sheen: broad and soft on the half-dry sheet, tighter and much\n      // brighter where the palm has pressed the serum through.\n      const ks = 0.1 + 0.22 * contact + 0.22 * pressed, shin = 12 + 20 * contact + 110 * pressed;\n      // The blister's skin is wet serum too: a small sharp spot on each one.\n      let sp = ks * nh ** shin + 0.1 * pressed * nh ** 24 + 0.55 * ai * nh ** 70 + 0.3 * RIM[p] * (1 - pressed);\n      // The palm's edge pushes a bead of serum ahead of it: a bright line.\n      if (ph === SMOOTH) {\n        const e = y - (front - A * u * u);\n        sp += (0.18 + 0.1 * fib) * exp(-(((e - 1) / 1.1) ** 2)) + 0.08 * exp(-(((e - 3) / 1.8) ** 2));\n      }\n      r += sp * (0.92 + 0.08 * tr);\n      g += sp * (0.92 + 0.08 * tg);\n      b += sp * (0.92 + 0.08 * tb);\n\n      // Over the skin: the sheet is there above its hem and not yet lifted.\n      let have = 1 - fade;\n      if (ph === DESC) {\n        const hy = hem + 1.5 * sin(0.15 * x + 1.3 * c);\n        have = sm(hy - y + 0.5);\n        // The hanging sheet: drape folds running down from the wet line,\n        // and its shadow on the skin below the hem.\n        if (y > wl && y \u003c hy) {\n          const fold = 0.045 * sin(x * 0.42 + 2.2 * sin(y * 0.05 + c) + 1.5 * tap(x * 0.5, y * 0.2)) * sm((y - wl) / 12);\n          r *= 1 + fold;\n          g *= 1 + fold;\n          b *= 1 + fold;\n        }\n        const sh = 1 - 0.28 * exp(-max(0, y - hy) / 3.5) * sm(y - hy + 0.5);\n        (sr *= sh), (sg *= sh), (sb *= sh);\n        // The cut edge of the fabric catches the light.\n        const ed = 0.22 * exp(-(((y - hy + 0.8) / 0.7) ** 2));\n        (r += ed), (g += ed), (b += ed);\n      }\n      if (ph === LIFT) {\n        // The lifted sheet's shadow on the skin, softening as it rises.\n        const sh = 1 - 0.22 * (1 - fade) * air;\n        (sr *= sh), (sg *= sh), (sb *= sh);\n      }\n      // Bare skin keeps a film of serum that shines and slowly soaks in.\n      const dew = ph === LIFT ? sm((q - 0.2) / 0.5) : ph === BARE ? 1 - 0.6 * q : 0;\n      if (dew > 0) {\n        const ds = dew * 0.4 * nh ** 70;\n        (sr += ds), (sg += ds), (sb += ds * 0.96);\n      }\n      r = sr + (r - sr) * have;\n      g = sg + (g - sg) * have;\n      b = sb + (b - sb) * have;\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-sheet-mask","type":"code","name":"sheet-mask","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sheet Mask\n// Family:  cosmetic\n// Idea:    A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cellulose sheet mask smoothed onto the face; the reverse of Peel-Off\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1\n//\n// Knob 1: Hue. The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive.\n// Knob 2: Speed. At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower.\n// Knob 3: Bubbles. How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear.\n// Knob 4: Weave. The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze.\n// Buttons: K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x2c1b3c6d, 0x297a2d39);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca6b);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n// A generator of its own for the fabric, so turning Weave changes only the\n// fabric and never where the next round's blisters land.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the skin's contour under the sheet and the mottle of the fabric.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 13 + o * 7919) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// The fabric, one value an LED round 0.5, wrapping both ways: a cloudy\n// mottle and short fibres laid in it. Weave makes the fibres longer and\n// thicker and turns them towards the two directions of a woven gauze.\nfunction weave(P, k) {\n  const F = P.F, R = rng(90731), s = 1 + 3 * k, align = sm((k - 0.15) / 0.75), wd = 0.6 + 0.35 * (s - 1);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[y * W + x] = 0.5 * tap((x * 2) / s + 11, (y * 2) / s + 5);\n  const splat = (fx, fy, a) => {\n    const ix = floor(fx), iy = floor(fy), tx = fx - ix, ty = fy - iy;\n    const x0 = ((ix % W) + W) % W, x1 = (x0 + 1) % W, y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    F[y0 * W + x0] += a * (1 - tx) * (1 - ty);\n    F[y0 * W + x1] += a * tx * (1 - ty);\n    F[y1 * W + x0] += a * (1 - tx) * ty;\n    F[y1 * W + x1] += a * tx * ty;\n  };\n  const n = floor(1500 / s);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = R() * W, y0 = R() * H, len = (2.8 + 2.4 * R()) * s;\n    let th = R() * PI;\n    if (R() \u003c align) th = (R() \u003c 0.5 ? 0 : PI / 2) + (R() - 0.5) * 0.22;\n    const a = 0.3 + 0.7 * R(), dx = cos(th), dy = sin(th);\n    for (let w = -wd / 2; w \u003c= wd / 2 + 1e-6; w += 0.7)\n      for (let t = -len / 2; t \u003c= len / 2; t += 0.5) splat(x0 + dx * t - dy * w, y0 + dy * t + dx * w, a * 0.5);\n  }\n  let m = 0, q = 0;\n  for (let p = 0; p \u003c N; p++) m += F[p];\n  m /= N;\n  for (let p = 0; p \u003c N; p++) q += (F[p] - m) ** 2;\n  const sd = sqrt(q / N) || 1;\n  for (let p = 0; p \u003c N; p++) F[p] = cl(0.5 + (0.22 * (F[p] - m)) / sd, 0, 1);\n  P.weaveK = k;\n}\n\n// The round: the sheet comes down, settles, the palm smooths it, it shines,\n// it lifts off, the skin shows bare. Durations in seconds at Speed 2.\nconst DESC = 0, HOLD = 1, SMOOTH = 2, GLOSS = 3, LIFT = 4, BARE = 5;\nconst DUR = [2.6, 1.0, 4.2, 3.0, 1.4, 0.7];\n// The palm's edge is a bow, its middle A rows ahead of its ends.\nconst A = 22, MAXB = 20;\n\n// Where each blister of round n would be trapped, its size and shape. All\n// twenty are placed every round, so Bubbles only says how many of them are\n// trapped and how big they swell, and the first six stay where they were.\nfunction trap(P) {\n  const n = P.round, b = P.bub;\n  for (let i = 0; i \u003c MAXB; i++) {\n    let x = 0, y = 0, r = 0;\n    for (let tr = 0; tr \u003c 10; tr++) {\n      const s = n * 7919 + i * 131 + tr * 17;\n      x = 7 + 50 * hash(s);\n      y = 10 + 108 * hash(s + 1);\n      r = 3.6 + 4.6 * hash(s + 2) ** 1.5;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) if ((b[j].x - x) ** 2 + ((b[j].y - y) / 1.1) ** 2 \u003c ((b[j].r + r) * 1.2 + 2) ** 2) ok = false;\n      if (ok) break;\n    }\n    const e = 0.8 + 0.45 * hash(n * 7919 + i * 131 + 999);\n    Object.assign(b[i], { x, y, r, rx: r * e, ry: r / e, h: 0.4 + 0.2 * r, age: -1, alive: true, side: hash(n * 31 + i) \u003c 0.5 ? -1 : 1 });\n  }\n  // Wrinkles the sheet lays down with: a few long shallow ridges of air.\n  P.wr = [];\n  for (let i = 0; i \u003c 2; i++) {\n    // Down the sheet, as it hung, one in each half.\n    const s = n * 4447 + i * 59, th = PI / 2 + (hash(s) - 0.5) * 0.9;\n    P.wr.push({ x: 8 + 20 * hash(s + 1) + 28 * i, y: 30 + 68 * hash(s + 2), tx: cos(th), ty: sin(th), len: 14 + 12 * hash(s + 3) });\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  const bub = [];\n  for (let i = 0; i \u003c MAXB; i++) bub.push({});\n  params.s = {\n    c: 0, hue: 0, speed: 2, nb: 6, grow: 0, gs: 1, k4: 0.06, weaveK: -1,\n    ph: DESC, pt: 0, round: 0, front: -40, fast: false,\n    bub, wr: [], F: new Float32Array(N), Z: new Float32Array(N), AIR: new Float32Array(N), RIM: new Float32Array(N), SHD: new Float32Array(N),\n    SQ: new Float32Array(N), SL: new Float32Array(N),\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n  // The skin's pearl, laid once: where its sheen sits on the colour wheel\n  // and how light it is.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      params.s.SQ[y * W + x] = 0.5 * tap(x * 0.4 + 7, y * 0.4) + (x * 0.6 + y) / 170;\n      params.s.SL[y * W + x] = 0.86 + 0.03 * tap(x * 1.3 + 50, y * 1.3);\n    }\n  trap(params.s);\n}\n\n// The sheet's hem and the line where it has wet through to the skin, as it\n// comes down: the hem falls fast and slows, the wet line follows.\nconst hemAt = (q) => -4 + 140 * (1 - (1 - min(1, q / 0.65)) ** 2);\nconst wetAt = (q) => -10 + 146 * sm(q);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nb = floor(cl(k[2], 6, 20) + 0.5);\n  P.grow = (P.nb - 6) / 14;\n  P.gs = 1 + 0.4 * P.grow;\n  P.k4 = cl(k[3], 0, 1);\n  if (abs(P.k4 - P.weaveK) > 0.004) weave(P, P.k4);\n  const d = (d0 * P.speed) / 2;\n  P.c += d;\n  P.pt += d;\n\n  const tap1 = input.btnPressed && input.btnPressed[0];\n  if (tap1) {\n    if (P.ph === DESC || P.ph === HOLD) {\n      // Blisters the wet line had not reached yet are never trapped.\n      for (const b of P.bub) if (b.age \u003c 0) b.alive = false;\n      (P.ph = SMOOTH), (P.pt = 0), (P.fast = true), (P.front = -A - 10);\n    } else if (P.ph === SMOOTH) P.fast = true;\n    else if (P.ph === GLOSS) (P.ph = LIFT), (P.pt = 0);\n  }\n  // Blisters beyond the count asked for are never trapped; once the palm is\n  // on the sheet the set is what it is.\n  if (P.ph === DESC || P.ph === HOLD) for (let i = 0; i \u003c MAXB; i++) P.bub[i].alive = i \u003c P.nb;\n  if (P.ph === SMOOTH) {\n    P.front = P.fast ? P.front + d * 220 : -A - 10 + (H + 2 * A + 30) * sm(P.pt / DUR[SMOOTH]) ** 0.9;\n    // The palm pushes each blister it reaches ahead of it and out towards\n    // the nearer side, faster the further out it already is; squeezed, the\n    // blister flattens along the palm's edge and loses a little air.\n    for (const b of P.bub) {\n      if (!b.alive) continue;\n      const u = (b.x - 31.5) / 32, yf = P.front - A * u * u, top = b.y - b.ry * P.gs * 0.55;\n      if (yf > top) {\n        const dy = yf - top;\n        const side = abs(u) \u003c 0.08 ? b.side : u \u003c 0 ? -1 : 1;\n        b.y += dy;\n        b.x += side * dy * (0.9 + 1.8 * abs(u));\n        b.ry = max(b.r * 0.55, b.ry * (1 - 0.012 * dy));\n        b.rx = min(b.r * 1.5, b.rx * (1 + 0.008 * dy));\n        b.h *= 1 - 0.006 * dy;\n      }\n      if (b.x - b.rx * P.gs * 0.3 > W || b.x + b.rx * P.gs * 0.3 \u003c 0 || b.y - b.ry * P.gs > H) b.alive = false;\n    }\n    if (P.front >= H + A + 19.9) (P.ph = GLOSS), (P.pt = 0), (P.fast = false);\n  }\n  if (P.ph !== SMOOTH && P.pt >= DUR[P.ph]) {\n    P.pt = 0;\n    if (P.ph === BARE) {\n      P.round++;\n      trap(P);\n      P.ph = DESC;\n    } else P.ph = P.ph === HOLD ? ((P.front = -A - 10), SMOOTH) : P.ph + 1;\n  }\n  // A blister fills as the wet line passes it, with a little overshoot.\n  if (P.ph === DESC || P.ph === HOLD) {\n    const wl = P.ph === DESC ? wetAt(P.pt / DUR[DESC]) : 999;\n    for (const b of P.bub) if (b.alive && b.age \u003c 0 && wl > b.y - b.ry * P.gs * 0.3) b.age = 0;\n  }\n  for (const b of P.bub) if (b.age >= 0) b.age += d;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { F, Z, AIR, RIM, SHD, SQ, SL, tint } = P, c = P.c, ph = P.ph, q = P.pt / DUR[ph];\n  if (P.lastHue !== P.hue) {\n    // From coral through peach and butter to lime the tint is paler and the\n    // wet sheet lighter: at the aqua's depth those hues read tan and olive.\n    let h = P.hue + 0.5;\n    h -= floor(h);\n    P.warm = sm((h + 0.02) / 0.07) * (1 - sm((h - 0.21) / 0.09));\n    hsv(h, 0.56 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm;\n\n  // Where the sheet is: below its hem there is only skin while it comes\n  // down, and behind the wet line it has soaked through.\n  const hem = ph === DESC ? hemAt(q) : ph === BARE ? -99 : 999;\n  const wl = ph === DESC ? wetAt(q) : ph >= BARE ? -99 : 999;\n  // Lifting: in the first third air runs in under the sheet from its edges\n  // and it goes white, then it rises off and fades.\n  const air = ph === LIFT ? sm(q / 0.32) : 0, fade = ph === LIFT ? sm((q - 0.3) / 0.7) : ph === BARE ? 1 : 0;\n  const rise = ph === LIFT ? 9 * sm((q - 0.25) / 0.75) : 0;\n  const pressedAll = ph === GLOSS || ph === LIFT;\n  // A small lamp drifts over the panel; the wet sheet mirrors it as a spot\n  // that the fibres break into glints and the blisters bend round.\n  const Lx = 32 + 40 * sin(0.37 * c + 0.5), Ly = 64 + 62 * sin(0.23 * c + 2), Lz = 45;\n  const Ex = 32, Ey = 70, Ez = 240;\n\n  // Heights: the skin's soft contour, the fibres standing a little, the\n  // wrinkles of a sheet not yet pressed, and the blisters.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, fy = (((y + floor(rise)) % H) + H) % H;\n      Z[p] = 1.1 * tap(x * 0.5, y * 0.5 + 40) + (0.22 + 0.3 * P.k4) * (F[fy * W + x] - 0.5);\n      AIR[p] = 0;\n      RIM[p] = 0;\n      SHD[p] = 0;\n    }\n  if (ph \u003c= SMOOTH) {\n    for (const w of P.wr) {\n      const ex = abs(w.tx) * w.len + 8, ey = abs(w.ty) * w.len + 8;\n      for (let y = max(0, floor(w.y - ey)); y \u003c min(H, w.y + ey); y++) {\n        for (let x = max(0, floor(w.x - ex)); x \u003c min(W, w.x + ex); x++) {\n          const dx = x - w.x, dy = y - w.y, a = dx * w.tx + dy * w.ty, n = -dx * w.ty + dy * w.tx;\n          if (abs(n) > 7 || abs(a) > w.len) continue;\n          // The palm presses a wrinkle flat as it passes.\n          const u = (x - 31.5) / 32, flat = ph === SMOOTH ? 1 - sm((P.front - A * u * u - y) / 2.5) : 1;\n          const v = exp(-((n / 3) ** 2)) * sm((w.len - abs(a)) / 9) * flat;\n          const p = y * W + x;\n          Z[p] += 0.45 * v;\n          AIR[p] = max(AIR[p], 0.25 * v);\n        }\n      }\n    }\n    for (const b of P.bub) {\n      if (!b.alive || b.age \u003c 0) continue;\n      // Filling: a springy swell to full size in about a third of a second.\n      const f = 1 - exp(-b.age / 0.09) * cos(b.age * 11), br = 1 + (ph === HOLD ? 0.03 * sin(c * 4 + b.r) : 0);\n      const rx = b.rx * P.gs * min(1.08, f) * br, ry = b.ry * P.gs * min(1.08, f) * br, hh = b.h * P.gs * f, rm = min(rx, ry);\n      let tlx = Lx - b.x, tly = Ly - b.y;\n      const tl = 1 / (sqrt(tlx * tlx + tly * tly) || 1);\n      (tlx *= tl), (tly *= tl);\n      const x0 = max(0, floor(b.x - rx - 4)), x1 = min(W - 1, floor(b.x + rx + 4));\n      const y0 = max(0, floor(b.y - ry - 4)), y1 = min(H - 1, floor(b.y + ry + 4));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let x = x0; x \u003c= x1; x++) {\n          const ex = (x - b.x) / rx, ey = (y - b.y) / ry, dd = ex * ex + ey * ey, p = y * W + x, dr = sqrt(dd);\n          const face = dr > 0 ? (ex * tlx + ey * tly) / dr : 0;\n          if (dd \u003c 1) {\n            // A pillow, rounder on top than a dome.\n            Z[p] += hh * sm((1 - dd) / 0.75);\n            AIR[p] = max(AIR[p], sm((1 - dr) / 0.3));\n          }\n          // A bright rim where the sheet lifts off the skin, brightest on\n          // the lamp's side, and a soft shadow on the skin past the far side.\n          RIM[p] = max(RIM[p], exp(-((((dr - 0.92) * rm) / 0.8) ** 2)) * (0.3 + 0.7 * max(0, face)));\n          if (dr > 0.9) SHD[p] = max(SHD[p], exp(-((((dr - 1) * rm) / 1.8) ** 2)) * max(0, -face));\n        }\n    }\n  }\n\n  const tr = tint[0], tg = tint[1], tb = tint[2];\n  const wetV = 0.88 + 0.09 * warm, mixT = 0.55 - 0.08 * warm;\n  const front = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const zx = (Z[y * W + min(W - 1, x + 1)] - Z[y * W + max(0, x - 1)]) / 2;\n      const zy = (Z[min(H - 1, y + 1) * W + x] - Z[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - Z[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      (vx *= vi), (vy *= vi), (vz *= vi);\n      let hx = lx + vx, hy = ly + vy, hz = lz + vz;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const nh = max(0, (nx * hx + ny * hy + nz * hz) * hi);\n      // Shading against what a level sheet would get, so only slopes show.\n      const shade = cl(1 + (nx * lx + ny * ly + nz * lz - lz), 0.55, 1.35);\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and\n      // mint across the panel.\n      const qq = SQ[p] + c * 0.03, Ls = SL[p];\n      let sr = (0.98 + 0.03 * cos(6.283 * qq)) * Ls, sg = (0.85 + 0.03 * cos(6.283 * (qq - 0.33))) * Ls, sb = (0.79 + 0.04 * cos(6.283 * (qq - 0.67))) * Ls;\n\n      // How far the sheet has soaked onto the skin here, 0 (air under it)\n      // to 1 (wet through), and how far the palm has pressed it.\n      const u = (x - 31.5) / 32, ai = AIR[p];\n      let contact = 1, pressed = pressedAll ? 1 : 0;\n      if (ph === DESC) contact = sm((wl + 3 * sin(0.21 * x + 3 * c) + 2 * tap(x * 1.7, 9) - y) / 5);\n      if (ph \u003c= SMOOTH) {\n        const yf = front - A * u * u;\n        pressed = ph === SMOOTH ? sm((yf - y) / 2.5) : 0;\n        // Not yet pressed, the sheet only half touches in places.\n        const part = 0.76 - 0.26 * P.grow + (0.24 + 0.26 * P.grow) * sm(0.5 + 1.6 * tap(x * 1.2 + 90, y * 1.2 + 30));\n        contact *= part + (1 - part) * pressed;\n        contact *= 1 - ai * (1 - pressed);\n      }\n      if (ph === LIFT) {\n        const ed = (0.6 * min(x + 0.5, W - 0.5 - x, (y + 0.5) / 2, (H - 0.5 - y) / 2)) / 32 + 0.4 * sm(0.5 + 1.4 * tap(x * 0.9 + 3, y * 0.9 + 70));\n        contact *= 1 - sm((air * 1.1 - ed) / 0.08);\n      }\n      const fib = F[((((y + floor(rise)) % H) + H) % H) * W + x] - 0.5;\n\n      // Wet through: the skin seen through the serum's tint, darker as\n      // anything wet is. Over air: a hanging sheet is near white with its\n      // fibres showing; a blister is the soaked sheet lit from inside, a\n      // pale clear tint.\n      const fk = 1 + 0.6 * P.k4, at = 0.08 + 0.42 * ai, af = (0.93 + 0.02 * ai) * (1 + 0.18 * fk * fib);\n      const ar = (1 - at + tr * at) * af, ag = (1 - at + tg * at) * af, ab = (1 - at + tb * at) * af;\n      const wk = wetV * (1 - 0.06 * pressed) * (1 + 0.1 * fk * fib);\n      const wr = (sr * (1 - mixT) + tr * mixT) * wk, wg = (sg * (1 - mixT) + tg * mixT) * wk, wb = (sb * (1 - mixT) + tb * mixT) * wk;\n      let r = ar + (wr - ar) * contact, g = ag + (wg - ag) * contact, b = ab + (wb - ab) * contact;\n      const sd = 1 - 0.2 * SHD[p] * (1 - pressed);\n      r *= shade * sd;\n      g *= shade * sd;\n      b *= shade * sd;\n      // The sheen: broad and soft on the half-dry sheet, tighter and much\n      // brighter where the palm has pressed the serum through.\n      const ks = 0.1 + 0.22 * contact + 0.22 * pressed, shin = 12 + 20 * contact + 110 * pressed;\n      // The blister's skin is wet serum too: a small sharp spot on each one.\n      let sp = ks * nh ** shin + 0.1 * pressed * nh ** 24 + 0.55 * ai * nh ** 70 + 0.3 * RIM[p] * (1 - pressed);\n      // The palm's edge pushes a bead of serum ahead of it: a bright line.\n      if (ph === SMOOTH) {\n        const e = y - (front - A * u * u);\n        sp += (0.18 + 0.1 * fib) * exp(-(((e - 1) / 1.1) ** 2)) + 0.08 * exp(-(((e - 3) / 1.8) ** 2));\n      }\n      r += sp * (0.92 + 0.08 * tr);\n      g += sp * (0.92 + 0.08 * tg);\n      b += sp * (0.92 + 0.08 * tb);\n\n      // Over the skin: the sheet is there above its hem and not yet lifted.\n      let have = 1 - fade;\n      if (ph === DESC) {\n        const hy = hem + 1.5 * sin(0.15 * x + 1.3 * c);\n        have = sm(hy - y + 0.5);\n        // The hanging sheet: drape folds running down from the wet line,\n        // and its shadow on the skin below the hem.\n        if (y > wl && y \u003c hy) {\n          const fold = 0.045 * sin(x * 0.42 + 2.2 * sin(y * 0.05 + c) + 1.5 * tap(x * 0.5, y * 0.2)) * sm((y - wl) / 12);\n          r *= 1 + fold;\n          g *= 1 + fold;\n          b *= 1 + fold;\n        }\n        const sh = 1 - 0.28 * exp(-max(0, y - hy) / 3.5) * sm(y - hy + 0.5);\n        (sr *= sh), (sg *= sh), (sb *= sh);\n        // The cut edge of the fabric catches the light.\n        const ed = 0.22 * exp(-(((y - hy + 0.8) / 0.7) ** 2));\n        (r += ed), (g += ed), (b += ed);\n      }\n      if (ph === LIFT) {\n        // The lifted sheet's shadow on the skin, softening as it rises.\n        const sh = 1 - 0.22 * (1 - fade) * air;\n        (sr *= sh), (sg *= sh), (sb *= sh);\n      }\n      // Bare skin keeps a film of serum that shines and slowly soaks in.\n      const dew = ph === LIFT ? sm((q - 0.2) / 0.5) : ph === BARE ? 1 - 0.6 * q : 0;\n      if (dew > 0) {\n        const ds = dew * 0.4 * nh ** 70;\n        (sr += ds), (sg += ds), (sb += ds * 0.96);\n      }\n      r = sr + (r - sr) * have;\n      g = sg + (g - sg) * have;\n      b = sb + (b - sb) * have;\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower."},{"name":"Bubbles","min":6,"max":20,"about":"How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear."},{"name":"Weave","min":0,"max":1,"about":"The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze."}],"start":[0,2,6,0.06],"measures":{"motion":0.0942,"detail":0.0264,"edges":0.0175,"complexity":2.3054,"coverage":1,"colour":0.109,"drift":0.1087},"knobResponse":[0.2121,0.1814,0.0787,0.0461]},{"slug":"shimmer-oil","title":"Shimmer Oil","family":"cosmetic","round":36,"note":"보이지 않는 손끝이 마이카가 든 베리빛 바디 오일을 저으면, 납작한 조각들이 늘어난 자리에서는 일어서고 돌기만 하는 자리에서는 누운 채라 소용돌이 자체가 진주빛 실크 결로 보여요. K3 은 젓는 힘이라 1 에서는 소용돌이가 서로 말려 들며 결이 촘촘히 접혀요. K1 을 누르면 다른 손끝이 내려와 20 LED 쯤의 나선을 감아요.","idea":"An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.","buttons":"K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.","code":"// ===== Patternflow pattern =====\n// Title:   Shimmer Oil\n// Family:  cosmetic\n// Idea:    An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after shimmer body oils and Paul Matisse's Kalliroscope rheoscopic fluid (1960s), with the flakes turned by Jeffery's equation (G. B. Jeffery, 1922)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1\n//\n// Knob 1: Hue. Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Stir. How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls.\n// Knob 4: Mica. How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white.\n// Buttons: K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.\n\nconst W = 64, H = 128;\nconst { floor, min, sqrt, sin, cos, exp, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The flow lives on a grid of NX x NY cells, HS LEDs each, with free-slip\n// walls round the panel. It is solved as vorticity and stream function: the\n// stream function vanishes on the walls, so a sine series holds it exactly,\n// and the Poisson equation is a division in that series.\nconst NX = 24, NY = 48, HS = W / NX, MX = NX - 1, MY = NY - 1, GW = NX + 1, GN = GW * (NY + 1);\nconst SX = new Float32Array(MX * MX), SY = new Float32Array(MY * MY), LAM = new Float32Array(MX * MY);\nfor (let k = 1; k \u003c= MX; k++) for (let i = 1; i \u003c= MX; i++) SX[(k - 1) * MX + i - 1] = sin((PI * k * i) / NX);\nfor (let k = 1; k \u003c= MY; k++) for (let i = 1; i \u003c= MY; i++) SY[(k - 1) * MY + i - 1] = sin((PI * k * i) / NY);\n// Eigenvalues of the five-point Laplacian, so the stream function's\n// finite-difference Laplacian is exactly minus the vorticity.\nfor (let l = 1; l \u003c= MY; l++)\n  for (let k = 1; k \u003c= MX; k++)\n    LAM[(l - 1) * MX + k - 1] = (4 / (HS * HS)) * (sin((PI * k) / (2 * NX)) ** 2 + sin((PI * l) / (2 * NY)) ** 2);\n\n// Two-dimensional sine transform of the interior nodes (MY rows of MX).\nfunction dst2(src, dst, tmp) {\n  for (let j = 0; j \u003c MY; j++) {\n    const r = j * MX;\n    for (let k = 0; k \u003c MX; k++) {\n      const s = k * MX;\n      let a = 0;\n      for (let i = 0; i \u003c MX; i++) a += src[r + i] * SX[s + i];\n      tmp[r + k] = a;\n    }\n  }\n  for (let l = 0; l \u003c MY; l++) {\n    const s = l * MY, r = l * MX;\n    for (let k = 0; k \u003c MX; k++) dst[r + k] = 0;\n    for (let j = 0; j \u003c MY; j++) {\n      const c = SY[s + j], q = j * MX;\n      if (c === 0) continue;\n      for (let k = 0; k \u003c MX; k++) dst[r + k] += c * tmp[q + k];\n    }\n  }\n}\n\n// Flow constants at Speed 2: viscosity in LED^2 a second, skin friction a\n// second, and how fast the flakes settle back toward lying in the film, a\n// second.\nconst NU = 0.6, MU = 0.12, SETTLE = 0.24;\n// The largest traceless part of M: eigenvalues 36 and 1/36, a stretch of 6.\nconst DMAX = (36 - 1 / 36) / 2;\n// Flakes: a parcel of them to each LED, and one parcel in 25 also carries a\n// single large flake that glints. A flake's normal m turns with the flow as\n// A m, A = F^-T for the deformation F since the flakes lay down. The flakes\n// at rest lean E0 (about 14 degrees) every way, so a parcel's spread of\n// normals is set by M = A A^T alone (the turn left in A only spins an even\n// spread) and M is all a parcel carries. With M's eigenvalues s^2 and 1/s^2\n// and its axis e1 the flakes lie at E0 (s cos phi e1 + sin phi e2 / s), so\n// how they catch a light hangs on the stretch s and, for a light from one\n// side, on the angle between that side and e1.\nconst NP = W * H;\n// The tables hold the averages over phi, for s from 1 to 12 laid out on\n// 1 - 1/s.\nconst E0 = 0.25, NS = 96, NC = 33, SMAX = 12, EL = 0.95;\n// Soft front light, ring light, strip light by angle.\nconst RF = new Float32Array(NS), RR = new Float32Array(NS), RS = new Float32Array(NS * NC);\n{\n  const NPHI = 48, se = sin(EL), ce = cos(EL), cd = [], sd = [];\n  for (let j = 0; j \u003c NC; j++) {\n    const dl = 0.5 * Math.acos(-1 + (2 * j) / (NC - 1));\n    cd.push(se * cos(dl));\n    sd.push(se * sin(dl));\n  }\n  for (let i = 0; i \u003c NS; i++) {\n    const sg = 1 / (1 - (i / (NS - 1)) * (1 - 1 / SMAX));\n    let f = 0, r = 0;\n    for (let k = 0; k \u003c NPHI; k++) {\n      const ph = (PI * (k + 0.5)) / NPHI, m0 = E0 * sg * cos(ph), m1 = (E0 / sg) * sin(ph), inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const i2 = inv * inv, i4 = i2 * i2, i8 = i4 * i4;\n      f += i8 * i8 * i8;\n      // Flakes standing at about 45 degrees catch a low ring of light from\n      // every side; flat ones and edge-on ones miss most of it.\n      const rq = (inv - 0.707) * 3.5, rb = rq * rq \u003c 1 ? 1 - rq * rq : 0;\n      r += 0.05 + 0.95 * rb * rb;\n      for (let j = 0; j \u003c NC; j++) {\n        const d = (m0 * cd[j] + m1 * sd[j] + ce) * inv, d2 = d * d, d4 = d2 * d2;\n        RS[i * NC + j] += (d4 * d4) / NPHI;\n      }\n    }\n    RF[i] = f / NPHI;\n    RR[i] = r / NPHI;\n  }\n}\n\n// The fingertip's push, its radius in LEDs.\nconst SIG = 6.5;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, stir: 0, mica: 0.06, t: 0, fa: 0, par: 0, mdt: [0, 0], warm: false,\n    w: new Float32Array(GN), w2: new Float32Array(GN), psi: new Float32Array(GN),\n    u: new Float32Array(GN), v: new Float32Array(GN), ux: new Float32Array(GN), uy: new Float32Array(GN), vx: new Float32Array(GN),\n    a: new Float32Array(MX * MY), b: new Float32Array(MX * MY), c: new Float32Array(MX * MY), d: new Float32Array(MX * MY), q: new Float32Array((GW + 2) * (NY + 3)),\n    px: new Float32Array(NP), py: new Float32Array(NP),\n    M0: new Float32Array(NP), M1: new Float32Array(NP), M2: new Float32Array(NP),\n    gx: new Float32Array(NP), gy: new Float32Array(NP),\n    kp: new Float32Array(NP), cnt: new Int32Array(W * H), own: new Int32Array(W * H), gl: new Float32Array(W * H), lit: new Float32Array(W * H), wt: new Float32Array(W * H), tmp: new Float32Array(W * H),\n    swirl: null, c0: [0, 0, 0], c1: [0, 0, 0], c2: [0, 0, 0],\n  };\n  // Parcels start one to each LED, their flakes at rest.\n  for (let p = 0; p \u003c NP; p++) {\n    S.px[p] = (p % W) + random();\n    S.py[p] = floor(p / W) + random();\n    S.M0[p] = S.M2[p] = 1;\n    S.kp[p] = 0.8 + 0.4 * random();\n    if (random() \u003c 0.04) {\n      const a = random() * 2 * PI, r = E0 * (0.4 + 0.6 * random());\n      S.gx[p] = r * cos(a);\n      S.gy[p] = r * sin(a) + 1e-6;\n    }\n  }\n  // And the oil has been swirled before: a dozen soft eddies of either sign.\n  for (let n = 0; n \u003c 12; n++) {\n    const cx = 8 + random() * (W - 16), cy = 8 + random() * (H - 16), r = 6 + random() * 8, k = (random() \u003c 0.5 ? -1 : 1) * (2 + 3 * random());\n    for (let j = 1; j \u003c NY; j++)\n      for (let i = 1; i \u003c NX; i++) {\n        const dx = i * HS - cx, dy = j * HS - cy;\n        S.w[j * GW + i] += k * exp(-(dx * dx + dy * dy) / (r * r));\n      }\n  }\n  params.s = S;\n}\n\n// Where the fingertip is at time t: a slow loop that wanders over the panel.\nfunction finger(t) {\n  return [32 + 19 * sin(t * 0.7) + 4 * sin(t * 1.9), 64 + 44 * sin(t * 0.47 + 0.6) + 8 * cos(t * 1.3)];\n}\n\n// One step of the flow: carry the vorticity, push it with the fingertip,\n// let it decay, and solve for the stream function, velocity and its gradient.\nfunction flowStep(S, dt) {\n  const { w, w2, psi, u, v, ux, uy, vx, a, b, c } = S;\n  const force = 16 * (0.45 + 0.5 * S.stir + 1.3 * S.stir * S.stir);\n  const [fx, fy] = finger(S.t), [gx, gy] = finger(S.t + 0.02);\n  const vxs = (gx - fx) / 0.02, vys = (gy - fy) / 0.02;\n  const fr = exp(-MU * dt), sw = S.swirl;\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      // Back along the flow, in grid units.\n      let X = i - (u[g] * dt) / HS, Y = j - (v[g] * dt) / HS;\n      X = X \u003c 0 ? 0 : X > NX - 1e-4 ? NX - 1e-4 : X;\n      Y = Y \u003c 0 ? 0 : Y > NY - 1e-4 ? NY - 1e-4 : Y;\n      const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, q = j0 * GW + i0;\n      let val = (w[q] * (1 - tx) + w[q + 1] * tx) * (1 - ty) + (w[q + GW] * (1 - tx) + w[q + GW + 1] * tx) * ty;\n      // The fingertip drags the oil along with it: the curl of a force along\n      // its velocity, spread over a Gaussian of radius SIG.\n      const dx = i * HS - fx, dy = j * HS - fy, r2 = (dx * dx + dy * dy) / (SIG * SIG);\n      if (r2 \u003c 9) val += ((force * dt * -2) / (SIG * SIG)) * exp(-r2) * (vys * dx - vxs * dy);\n      if (sw) {\n        const ex = i * HS - sw.x, ey = j * HS - sw.y, e2 = (ex * ex + ey * ey) / (sw.r * sw.r);\n        if (e2 \u003c 9) val += sw.k * dt * exp(-e2) * (1 - 0.6 * e2);\n      }\n      w2[g] = val * fr;\n    }\n  if (sw && (sw.left -= dt) \u003c= 0) S.swirl = null;\n  // Viscosity, one explicit step of the five-point Laplacian (the vorticity\n  // is 0 on the walls).\n  const nu = (NU * dt) / (HS * HS);\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      w[g] = w2[g] + nu * (w2[g - 1] + w2[g + 1] + w2[g - GW] + w2[g + GW] - 4 * w2[g]);\n      a[(j - 1) * MX + i - 1] = w[g];\n    }\n  // The stream function: a division in the sine series.\n  dst2(a, b, c);\n  const norm = 4 / (NX * NY);\n  for (let n = 0; n \u003c MX * MY; n++) b[n] *= norm / LAM[n];\n  dst2(b, c, S.d);\n  for (let j = 1; j \u003c NY; j++) for (let i = 1; i \u003c NX; i++) psi[j * GW + i] = c[(j - 1) * MX + i - 1];\n  // Velocity u = dpsi/dy, v = -dpsi/dx and its gradient, by central\n  // differences; past a wall the stream function is mirrored with its sign\n  // turned over, as the sine series has it.\n  const Q = S.q, QW = GW + 2;\n  for (let j = 0; j \u003c= NY; j++) {\n    const r = (j + 1) * QW + 1;\n    for (let i = 0; i \u003c= NX; i++) Q[r + i] = psi[j * GW + i];\n    Q[r - 1] = -Q[r + 1];\n    Q[r + NX + 1] = -Q[r + NX - 1];\n  }\n  for (let i = 0; i \u003c QW; i++) {\n    Q[i] = -Q[2 * QW + i];\n    Q[(NY + 2) * QW + i] = -Q[NY * QW + i];\n  }\n  const h2 = 1 / (HS * HS), i2 = 1 / (2 * HS);\n  for (let j = 0; j \u003c= NY; j++)\n    for (let i = 0; i \u003c= NX; i++) {\n      const g = j * GW + i, q = (j + 1) * QW + i + 1, p0 = Q[q];\n      const pe = Q[q + 1], pw = Q[q - 1], pn = Q[q - QW], ps = Q[q + QW];\n      u[g] = (ps - pn) * i2;\n      v[g] = -(pe - pw) * i2;\n      uy[g] = (ps - 2 * p0 + pn) * h2;\n      vx[g] = -(pe - 2 * p0 + pw) * h2;\n      ux[g] = (Q[q + QW + 1] - Q[q - QW + 1] - Q[q + QW - 1] + Q[q - QW - 1]) * 0.25 * h2;\n    }\n}\n\n// The parcels ride the flow, and every flake in one turns as a flat disc of\n// no thickness does (Jeffery's equation): its normal m follows\n// dm/dt = K m with K = -(grad u)^T, so a flake turns its face across the\n// stretching and lies along the flow lines in shear. Then M follows\n// dM/dt = K M + M K^T, and the film draws M back toward the identity, the\n// flakes settling to rest.\nfunction flakeStep(S, dt) {\n  const { psi, ux, uy, vx, px, py, M0, M1, M2 } = S;\n  // Half the parcels turn their flakes each step, by the time since their\n  // last turn; all of them move.\n  const par = (S.par ^= 1), dm = S.mdt[par] + dt;\n  S.mdt[par] = 0;\n  S.mdt[par ^ 1] += dt;\n  const st = exp(-SETTLE * dm), ih = 1 / HS, XM = NX - 1e-4, YM = NY - 1e-4, hd = 0.5 * dt * ih;\n  for (let p = 0; p \u003c NP; p++) {\n    let x = px[p], y = py[p];\n    let X = x * ih, Y = y * ih;\n    X = X > XM ? XM : X;\n    Y = Y > YM ? YM : Y;\n    const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, g = j0 * GW + i0;\n    // Velocity from the bilinear stream function: divergence-free inside\n    // every cell.\n    const p00 = psi[g], p10 = psi[g + 1], p01 = psi[g + GW], p11 = psi[g + GW + 1];\n    const U = (1 - tx) * (p01 - p00) + tx * (p11 - p10), V = (1 - ty) * (p10 - p00) + ty * (p11 - p01);\n    if ((p & 1) === par) {\n      const w00 = (1 - tx) * (1 - ty), w10 = tx * (1 - ty), w01 = (1 - tx) * ty, w11 = tx * ty;\n      const a = ux[g] * w00 + ux[g + 1] * w10 + ux[g + GW] * w01 + ux[g + GW + 1] * w11;\n      const b = uy[g] * w00 + uy[g + 1] * w10 + uy[g + GW] * w01 + uy[g + GW + 1] * w11;\n      const c = vx[g] * w00 + vx[g + 1] * w10 + vx[g + GW] * w01 + vx[g + GW + 1] * w11;\n      // grad u = [[a, b], [c, -a]]. One step of m' = K m is the Cayley\n      // transform C = (I - K dt/2)^-1 (I + K dt/2); K has no trace, so\n      // C = ((1 - D) I + K dt) / (1 + D) with D = det(K dt) / 4, and det C = 1\n      // exactly, as the flow keeps area. M' = C M C^T.\n      const D = (dm * dm * (-a * a - b * c)) / 4, iD = 1 / (D > -0.8 ? 1 + D : 0.2), q = 1 - D;\n      const c00 = (q - dm * a) * iD, c01 = -dm * c * iD, c10 = -dm * b * iD, c11 = (q + dm * a) * iD;\n      const mp = M0[p], mq = M1[p], mr = M2[p];\n      const t00 = c00 * mp + c01 * mq, t01 = c00 * mq + c01 * mr, t10 = c10 * mp + c11 * mq, t11 = c10 * mq + c11 * mr;\n      // Settling: M's traceless part decays at the rate SETTLE, and past a\n      // stretch of 6 the film's drag holds it, so the flakes stop short of\n      // standing on edge. det M stays 1, as the flow keeps it: with the\n      // traceless part (d0, d1) the trace is 2 sqrt(1 + d0^2 + d1^2).\n      let d0 = 0.5 * (t00 * c00 + t01 * c01 - t10 * c10 - t11 * c11) * st, d1 = (t00 * c10 + t01 * c11) * st;\n      const dd = d0 * d0 + d1 * d1;\n      if (dd > DMAX * DMAX) {\n        const f = DMAX / sqrt(dd);\n        d0 *= f;\n        d1 *= f;\n      }\n      const h = sqrt(1 + d0 * d0 + d1 * d1);\n      M0[p] = h + d0;\n      M1[p] = d1;\n      M2[p] = h - d0;\n    }\n    // The parcel moves by the midpoint rule.\n    let Xm = X + hd * U, Ym = Y - hd * V;\n    Xm = Xm \u003c 0 ? 0 : Xm > XM ? XM : Xm;\n    Ym = Ym \u003c 0 ? 0 : Ym > YM ? YM : Ym;\n    const im = Xm | 0, jm = Ym | 0, sx = Xm - im, sy = Ym - jm, gm = jm * GW + im;\n    const q00 = psi[gm], q10 = psi[gm + 1], q01 = psi[gm + GW], q11 = psi[gm + GW + 1];\n    x += ((1 - sx) * (q01 - q00) + sx * (q11 - q10)) * ih * dt;\n    y -= ((1 - sy) * (q10 - q00) + sy * (q11 - q01)) * ih * dt;\n    px[p] = x \u003c 0.01 ? 0.01 : x > W - 0.01 ? W - 0.01 : x;\n    py[p] = y \u003c 0.01 ? 0.01 : y > H - 0.01 ? H - 0.01 : y;\n  }\n}\n\n// The flow keeps the oil's density even, and so would the parcels if they\n// moved exactly. Where they have drifted out of a LED that its neighbours\n// still reach, a parcel from a crowded LED is moved in, taking on the flakes\n// of a neighbour; up to 400 a frame.\nfunction even(S) {\n  const { px, py, M0, M1, M2, cnt, own } = S;\n  cnt.fill(0);\n  for (let p = 0; p \u003c NP; p++) {\n    const o = (py[p] | 0) * W + (px[p] | 0);\n    cnt[o]++;\n    own[o] = p;\n  }\n  let d = 0, moved = 0;\n  const start = (random() * W * H) | 0;\n  for (let n = 0; n \u003c W * H && moved \u003c 400; n++) {\n    const e = (start + n) % (W * H);\n    if (cnt[e] !== 0) continue;\n    const x = e % W, y = (e / W) | 0;\n    const nb = x > 0 && cnt[e - 1] ? e - 1 : x \u003c W - 1 && cnt[e + 1] ? e + 1 : y > 0 && cnt[e - W] ? e - W : y \u003c H - 1 && cnt[e + W] ? e + W : -1;\n    if (nb \u003c 0) continue;\n    while (d \u003c W * H && cnt[d] \u003c 3) d++;\n    if (d >= W * H) break;\n    const p = own[d], q = own[nb];\n    cnt[d]--;\n    cnt[e] = 1;\n    px[p] = x + 0.1 + 0.8 * random();\n    py[p] = y + 0.1 + 0.8 * random();\n    M0[p] = M0[q];\n    M1[p] = M1[q];\n    M2[p] = M2[q];\n    moved++;\n  }\n}\n\n// The flow is solved every 1/15 s of oil time, the flakes moved every step.\nfunction step(S, dt) {\n  S.fa += dt;\n  if (S.fa > 1 / 15 - 1e-6) {\n    flowStep(S, S.fa);\n    S.fa = 0;\n  }\n  flakeStep(S, dt);\n  S.t += dt;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.stir = cl(k[2], 0, 1);\n  S.mica = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on oil that has been stirred for 5.4 seconds, the flakes laid\n    // down for the last 4.2 of them.\n    for (let i = 0; i \u003c 4; i++) (S.t += 0.3), flowStep(S, 0.3);\n    for (let i = 0; i \u003c 6; i++) step(S, 0.4);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fingertip lands well away from the stirring one and turns a spiral.\n    const [fx, fy] = finger(S.t);\n    let x = 0, y = 0;\n    for (let n = 0; n \u003c 8; n++) {\n      x = 16 + random() * (W - 32);\n      y = 20 + random() * (H - 40);\n      if ((x - fx) ** 2 + (y - fy) ** 2 > 40 * 40) break;\n    }\n    S.swirl = { x, y, r: 10, k: random() \u003c 0.5 ? 22 : -22, left: 0.7 };\n  }\n  // Oil time runs at Speed / 2, in steps no longer than 1/15 s.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 1 / 15);\n    step(S, h);\n    left -= h;\n  }\n  even(S);\n}\n\nfunction blur(F, T) {\n  for (let y = 0; y \u003c H; y++) {\n    const r = y * W;\n    T[r] = 0.75 * F[r] + 0.25 * F[r + 1];\n    for (let x = 1; x \u003c W - 1; x++) T[r + x] = 0.5 * F[r + x] + 0.25 * (F[r + x - 1] + F[r + x + 1]);\n    T[r + W - 1] = 0.75 * F[r + W - 1] + 0.25 * F[r + W - 2];\n  }\n  for (let x = 0; x \u003c W; x++) {\n    F[x] = 0.75 * T[x] + 0.25 * T[x + W];\n    F[(H - 1) * W + x] = 0.75 * T[(H - 1) * W + x] + 0.25 * T[(H - 2) * W + x];\n  }\n  for (let o = W; o \u003c (H - 1) * W; o++) F[o] = 0.5 * T[o] + 0.25 * (T[o - W] + T[o + W]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { px, py, M0, M1, M2, gx, gy, kp, lit, wt, gl } = S;\n  const mica = S.mica, t = S.t;\n  // Three lights: a soft one over the viewer's shoulder for the flakes that\n  // lie flat, a low ring for the ones the flow has half stood up, and a strip\n  // low at one side, slowly circling, for those leaning toward it.\n  const az = 0.6 + 0.35 * t, c2a = cos(2 * az), s2a = sin(2 * az);\n  const h2x = sin(EL) * cos(az), h2y = sin(EL) * sin(az), h2z = cos(EL);\n  const wf = 0.15, wr = 0.85 + 0.3 * mica, ws = 1 + 0.6 * mica, wg = 0.5 + 1.5 * mica, gs = 0.6 * mica;\n  lit.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  // Large flakes glint once Mica brings them in, the flattest first.\n  const gcut = E0 * (1.05 - mica), sc = (NS - 1) / (1 - 1 / SMAX);\n  for (let p = 0; p \u003c NP; p++) {\n    const mp = M0[p], mq = M1[p], mr = M2[p], fro = mp + mr;\n    // The stretch s, the root of M's larger eigenvalue, and e1's angle to\n    // the strip.\n    const dd = mp - mr, an = sqrt(dd * dd + 4 * mq * mq), s1 = sqrt(0.5 * (fro + an));\n    const c2 = an > 1e-6 ? (dd * c2a + 2 * mq * s2a) / an : 0;\n    const ii = ((s1 > 1 ? 1 - 1 / s1 : 0) * sc + 0.5) | 0, i = ii \u003c NS ? ii : NS - 1, j = ((c2 + 1) * 0.5 * (NC - 1) + 0.5) | 0;\n    let val = wf * RF[i] + wr * RR[i] + ws * RS[i * NC + j];\n    val *= 1 - gs + gs * kp[p];\n    // Into the LED the parcel is over; the blur below spreads it. A large\n    // flake's glint stays in its own LED.\n    const o = (py[p] | 0) * W + (px[p] | 0), ex = gx[p], ey = gy[p];\n    if (ey !== 0 && ex * ex + ey * ey > gcut * gcut) {\n      // Its normal is sqrt(M) times its resting tilt; det M = 1, so\n      // sqrt(M) = (M + I) / sqrt(trace + 2).\n      const is = 1 / sqrt(fro + 2);\n      const m0 = ((mp + 1) * ex + mq * ey) * is, m1 = (mq * ex + (mr + 1) * ey) * is, inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const d = abs(h2x * m0 + h2y * m1 + h2z) * inv, d2 = d * d, d4 = d2 * d2, d8 = d4 * d4;\n      gl[o] += wg * d8 * d8 * d8;\n    }\n    lit[o] += val;\n    wt[o] += 1;\n  }\n  // A LED sees a little past its own square: a 1-2-1 blur each way.\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  // Colours: the oil's body and its sheen, whose brightest light leans a\n  // little round the wheel as pearl pigment does.\n  const h = S.hue + 0.88, hh = h - floor(h);\n  // Deep orange reads brown on the panel and deep yellow olive, so from\n  // orange to lime the oil glows instead: 0.82 of full, not 0.34.\n  const warm = sm(0.015, 0.05, hh) * (1 - sm(0.3, 0.38, hh));\n  const { c0, c1, c2 } = S;\n  hsv(h, 0.9 - 0.1 * warm, 0.34 + 0.48 * warm, c0);\n  hsv(h - 0.02, 0.42 - 0.12 * warm, 1, c1);\n  hsv(h - 0.12, 0.38 - 0.1 * warm, 1, c2);\n  const rest = RF[0] * wf + RR[0] * wr + RS[(NC - 1) >> 1] * ws;\n  for (let o = 0; o \u003c W * H; o++) {\n    // An LED no parcel reached shows flakes at rest.\n    const val = (lit[o] + 0.05 * rest) / (wt[o] + 0.05) + gl[o] * 0.5;\n    const s = val > 1.4 ? 1.4 : val, fl = val \u003c 0.4 ? 0 : val > 1 ? 1 : (val - 0.4) / 0.6, f = fl * fl * (3 - 2 * fl);\n    const sr = c1[0] + (c2[0] - c1[0]) * f, sg = c1[1] + (c2[1] - c1[1]) * f, sb = c1[2] + (c2[2] - c1[2]) * f;\n    const body = 1 - 0.55 * (s > 1 ? 1 : s);\n    // The brightest sheen runs on toward white.\n    const wl = val \u003c 0.75 ? 0 : val > 1.3 ? 1 : (val - 0.75) / 0.55, wh = wl * wl * (1.5 - wl), k = s * 0.85 * (1 - wh);\n    const r = 255 * (c0[0] * body + sr * k + wh), g = 255 * (c0[1] * body + sg * k + wh), b = 255 * (c0[2] * body + sb * k + wh);\n    display.setPixel(o % W, (o / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-shimmer-oil","type":"code","name":"shimmer-oil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shimmer Oil\n// Family:  cosmetic\n// Idea:    An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after shimmer body oils and Paul Matisse's Kalliroscope rheoscopic fluid (1960s), with the flakes turned by Jeffery's equation (G. B. Jeffery, 1922)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1\n//\n// Knob 1: Hue. Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Stir. How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls.\n// Knob 4: Mica. How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white.\n// Buttons: K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.\n\nconst W = 64, H = 128;\nconst { floor, min, sqrt, sin, cos, exp, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The flow lives on a grid of NX x NY cells, HS LEDs each, with free-slip\n// walls round the panel. It is solved as vorticity and stream function: the\n// stream function vanishes on the walls, so a sine series holds it exactly,\n// and the Poisson equation is a division in that series.\nconst NX = 24, NY = 48, HS = W / NX, MX = NX - 1, MY = NY - 1, GW = NX + 1, GN = GW * (NY + 1);\nconst SX = new Float32Array(MX * MX), SY = new Float32Array(MY * MY), LAM = new Float32Array(MX * MY);\nfor (let k = 1; k \u003c= MX; k++) for (let i = 1; i \u003c= MX; i++) SX[(k - 1) * MX + i - 1] = sin((PI * k * i) / NX);\nfor (let k = 1; k \u003c= MY; k++) for (let i = 1; i \u003c= MY; i++) SY[(k - 1) * MY + i - 1] = sin((PI * k * i) / NY);\n// Eigenvalues of the five-point Laplacian, so the stream function's\n// finite-difference Laplacian is exactly minus the vorticity.\nfor (let l = 1; l \u003c= MY; l++)\n  for (let k = 1; k \u003c= MX; k++)\n    LAM[(l - 1) * MX + k - 1] = (4 / (HS * HS)) * (sin((PI * k) / (2 * NX)) ** 2 + sin((PI * l) / (2 * NY)) ** 2);\n\n// Two-dimensional sine transform of the interior nodes (MY rows of MX).\nfunction dst2(src, dst, tmp) {\n  for (let j = 0; j \u003c MY; j++) {\n    const r = j * MX;\n    for (let k = 0; k \u003c MX; k++) {\n      const s = k * MX;\n      let a = 0;\n      for (let i = 0; i \u003c MX; i++) a += src[r + i] * SX[s + i];\n      tmp[r + k] = a;\n    }\n  }\n  for (let l = 0; l \u003c MY; l++) {\n    const s = l * MY, r = l * MX;\n    for (let k = 0; k \u003c MX; k++) dst[r + k] = 0;\n    for (let j = 0; j \u003c MY; j++) {\n      const c = SY[s + j], q = j * MX;\n      if (c === 0) continue;\n      for (let k = 0; k \u003c MX; k++) dst[r + k] += c * tmp[q + k];\n    }\n  }\n}\n\n// Flow constants at Speed 2: viscosity in LED^2 a second, skin friction a\n// second, and how fast the flakes settle back toward lying in the film, a\n// second.\nconst NU = 0.6, MU = 0.12, SETTLE = 0.24;\n// The largest traceless part of M: eigenvalues 36 and 1/36, a stretch of 6.\nconst DMAX = (36 - 1 / 36) / 2;\n// Flakes: a parcel of them to each LED, and one parcel in 25 also carries a\n// single large flake that glints. A flake's normal m turns with the flow as\n// A m, A = F^-T for the deformation F since the flakes lay down. The flakes\n// at rest lean E0 (about 14 degrees) every way, so a parcel's spread of\n// normals is set by M = A A^T alone (the turn left in A only spins an even\n// spread) and M is all a parcel carries. With M's eigenvalues s^2 and 1/s^2\n// and its axis e1 the flakes lie at E0 (s cos phi e1 + sin phi e2 / s), so\n// how they catch a light hangs on the stretch s and, for a light from one\n// side, on the angle between that side and e1.\nconst NP = W * H;\n// The tables hold the averages over phi, for s from 1 to 12 laid out on\n// 1 - 1/s.\nconst E0 = 0.25, NS = 96, NC = 33, SMAX = 12, EL = 0.95;\n// Soft front light, ring light, strip light by angle.\nconst RF = new Float32Array(NS), RR = new Float32Array(NS), RS = new Float32Array(NS * NC);\n{\n  const NPHI = 48, se = sin(EL), ce = cos(EL), cd = [], sd = [];\n  for (let j = 0; j \u003c NC; j++) {\n    const dl = 0.5 * Math.acos(-1 + (2 * j) / (NC - 1));\n    cd.push(se * cos(dl));\n    sd.push(se * sin(dl));\n  }\n  for (let i = 0; i \u003c NS; i++) {\n    const sg = 1 / (1 - (i / (NS - 1)) * (1 - 1 / SMAX));\n    let f = 0, r = 0;\n    for (let k = 0; k \u003c NPHI; k++) {\n      const ph = (PI * (k + 0.5)) / NPHI, m0 = E0 * sg * cos(ph), m1 = (E0 / sg) * sin(ph), inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const i2 = inv * inv, i4 = i2 * i2, i8 = i4 * i4;\n      f += i8 * i8 * i8;\n      // Flakes standing at about 45 degrees catch a low ring of light from\n      // every side; flat ones and edge-on ones miss most of it.\n      const rq = (inv - 0.707) * 3.5, rb = rq * rq \u003c 1 ? 1 - rq * rq : 0;\n      r += 0.05 + 0.95 * rb * rb;\n      for (let j = 0; j \u003c NC; j++) {\n        const d = (m0 * cd[j] + m1 * sd[j] + ce) * inv, d2 = d * d, d4 = d2 * d2;\n        RS[i * NC + j] += (d4 * d4) / NPHI;\n      }\n    }\n    RF[i] = f / NPHI;\n    RR[i] = r / NPHI;\n  }\n}\n\n// The fingertip's push, its radius in LEDs.\nconst SIG = 6.5;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, stir: 0, mica: 0.06, t: 0, fa: 0, par: 0, mdt: [0, 0], warm: false,\n    w: new Float32Array(GN), w2: new Float32Array(GN), psi: new Float32Array(GN),\n    u: new Float32Array(GN), v: new Float32Array(GN), ux: new Float32Array(GN), uy: new Float32Array(GN), vx: new Float32Array(GN),\n    a: new Float32Array(MX * MY), b: new Float32Array(MX * MY), c: new Float32Array(MX * MY), d: new Float32Array(MX * MY), q: new Float32Array((GW + 2) * (NY + 3)),\n    px: new Float32Array(NP), py: new Float32Array(NP),\n    M0: new Float32Array(NP), M1: new Float32Array(NP), M2: new Float32Array(NP),\n    gx: new Float32Array(NP), gy: new Float32Array(NP),\n    kp: new Float32Array(NP), cnt: new Int32Array(W * H), own: new Int32Array(W * H), gl: new Float32Array(W * H), lit: new Float32Array(W * H), wt: new Float32Array(W * H), tmp: new Float32Array(W * H),\n    swirl: null, c0: [0, 0, 0], c1: [0, 0, 0], c2: [0, 0, 0],\n  };\n  // Parcels start one to each LED, their flakes at rest.\n  for (let p = 0; p \u003c NP; p++) {\n    S.px[p] = (p % W) + random();\n    S.py[p] = floor(p / W) + random();\n    S.M0[p] = S.M2[p] = 1;\n    S.kp[p] = 0.8 + 0.4 * random();\n    if (random() \u003c 0.04) {\n      const a = random() * 2 * PI, r = E0 * (0.4 + 0.6 * random());\n      S.gx[p] = r * cos(a);\n      S.gy[p] = r * sin(a) + 1e-6;\n    }\n  }\n  // And the oil has been swirled before: a dozen soft eddies of either sign.\n  for (let n = 0; n \u003c 12; n++) {\n    const cx = 8 + random() * (W - 16), cy = 8 + random() * (H - 16), r = 6 + random() * 8, k = (random() \u003c 0.5 ? -1 : 1) * (2 + 3 * random());\n    for (let j = 1; j \u003c NY; j++)\n      for (let i = 1; i \u003c NX; i++) {\n        const dx = i * HS - cx, dy = j * HS - cy;\n        S.w[j * GW + i] += k * exp(-(dx * dx + dy * dy) / (r * r));\n      }\n  }\n  params.s = S;\n}\n\n// Where the fingertip is at time t: a slow loop that wanders over the panel.\nfunction finger(t) {\n  return [32 + 19 * sin(t * 0.7) + 4 * sin(t * 1.9), 64 + 44 * sin(t * 0.47 + 0.6) + 8 * cos(t * 1.3)];\n}\n\n// One step of the flow: carry the vorticity, push it with the fingertip,\n// let it decay, and solve for the stream function, velocity and its gradient.\nfunction flowStep(S, dt) {\n  const { w, w2, psi, u, v, ux, uy, vx, a, b, c } = S;\n  const force = 16 * (0.45 + 0.5 * S.stir + 1.3 * S.stir * S.stir);\n  const [fx, fy] = finger(S.t), [gx, gy] = finger(S.t + 0.02);\n  const vxs = (gx - fx) / 0.02, vys = (gy - fy) / 0.02;\n  const fr = exp(-MU * dt), sw = S.swirl;\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      // Back along the flow, in grid units.\n      let X = i - (u[g] * dt) / HS, Y = j - (v[g] * dt) / HS;\n      X = X \u003c 0 ? 0 : X > NX - 1e-4 ? NX - 1e-4 : X;\n      Y = Y \u003c 0 ? 0 : Y > NY - 1e-4 ? NY - 1e-4 : Y;\n      const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, q = j0 * GW + i0;\n      let val = (w[q] * (1 - tx) + w[q + 1] * tx) * (1 - ty) + (w[q + GW] * (1 - tx) + w[q + GW + 1] * tx) * ty;\n      // The fingertip drags the oil along with it: the curl of a force along\n      // its velocity, spread over a Gaussian of radius SIG.\n      const dx = i * HS - fx, dy = j * HS - fy, r2 = (dx * dx + dy * dy) / (SIG * SIG);\n      if (r2 \u003c 9) val += ((force * dt * -2) / (SIG * SIG)) * exp(-r2) * (vys * dx - vxs * dy);\n      if (sw) {\n        const ex = i * HS - sw.x, ey = j * HS - sw.y, e2 = (ex * ex + ey * ey) / (sw.r * sw.r);\n        if (e2 \u003c 9) val += sw.k * dt * exp(-e2) * (1 - 0.6 * e2);\n      }\n      w2[g] = val * fr;\n    }\n  if (sw && (sw.left -= dt) \u003c= 0) S.swirl = null;\n  // Viscosity, one explicit step of the five-point Laplacian (the vorticity\n  // is 0 on the walls).\n  const nu = (NU * dt) / (HS * HS);\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      w[g] = w2[g] + nu * (w2[g - 1] + w2[g + 1] + w2[g - GW] + w2[g + GW] - 4 * w2[g]);\n      a[(j - 1) * MX + i - 1] = w[g];\n    }\n  // The stream function: a division in the sine series.\n  dst2(a, b, c);\n  const norm = 4 / (NX * NY);\n  for (let n = 0; n \u003c MX * MY; n++) b[n] *= norm / LAM[n];\n  dst2(b, c, S.d);\n  for (let j = 1; j \u003c NY; j++) for (let i = 1; i \u003c NX; i++) psi[j * GW + i] = c[(j - 1) * MX + i - 1];\n  // Velocity u = dpsi/dy, v = -dpsi/dx and its gradient, by central\n  // differences; past a wall the stream function is mirrored with its sign\n  // turned over, as the sine series has it.\n  const Q = S.q, QW = GW + 2;\n  for (let j = 0; j \u003c= NY; j++) {\n    const r = (j + 1) * QW + 1;\n    for (let i = 0; i \u003c= NX; i++) Q[r + i] = psi[j * GW + i];\n    Q[r - 1] = -Q[r + 1];\n    Q[r + NX + 1] = -Q[r + NX - 1];\n  }\n  for (let i = 0; i \u003c QW; i++) {\n    Q[i] = -Q[2 * QW + i];\n    Q[(NY + 2) * QW + i] = -Q[NY * QW + i];\n  }\n  const h2 = 1 / (HS * HS), i2 = 1 / (2 * HS);\n  for (let j = 0; j \u003c= NY; j++)\n    for (let i = 0; i \u003c= NX; i++) {\n      const g = j * GW + i, q = (j + 1) * QW + i + 1, p0 = Q[q];\n      const pe = Q[q + 1], pw = Q[q - 1], pn = Q[q - QW], ps = Q[q + QW];\n      u[g] = (ps - pn) * i2;\n      v[g] = -(pe - pw) * i2;\n      uy[g] = (ps - 2 * p0 + pn) * h2;\n      vx[g] = -(pe - 2 * p0 + pw) * h2;\n      ux[g] = (Q[q + QW + 1] - Q[q - QW + 1] - Q[q + QW - 1] + Q[q - QW - 1]) * 0.25 * h2;\n    }\n}\n\n// The parcels ride the flow, and every flake in one turns as a flat disc of\n// no thickness does (Jeffery's equation): its normal m follows\n// dm/dt = K m with K = -(grad u)^T, so a flake turns its face across the\n// stretching and lies along the flow lines in shear. Then M follows\n// dM/dt = K M + M K^T, and the film draws M back toward the identity, the\n// flakes settling to rest.\nfunction flakeStep(S, dt) {\n  const { psi, ux, uy, vx, px, py, M0, M1, M2 } = S;\n  // Half the parcels turn their flakes each step, by the time since their\n  // last turn; all of them move.\n  const par = (S.par ^= 1), dm = S.mdt[par] + dt;\n  S.mdt[par] = 0;\n  S.mdt[par ^ 1] += dt;\n  const st = exp(-SETTLE * dm), ih = 1 / HS, XM = NX - 1e-4, YM = NY - 1e-4, hd = 0.5 * dt * ih;\n  for (let p = 0; p \u003c NP; p++) {\n    let x = px[p], y = py[p];\n    let X = x * ih, Y = y * ih;\n    X = X > XM ? XM : X;\n    Y = Y > YM ? YM : Y;\n    const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, g = j0 * GW + i0;\n    // Velocity from the bilinear stream function: divergence-free inside\n    // every cell.\n    const p00 = psi[g], p10 = psi[g + 1], p01 = psi[g + GW], p11 = psi[g + GW + 1];\n    const U = (1 - tx) * (p01 - p00) + tx * (p11 - p10), V = (1 - ty) * (p10 - p00) + ty * (p11 - p01);\n    if ((p & 1) === par) {\n      const w00 = (1 - tx) * (1 - ty), w10 = tx * (1 - ty), w01 = (1 - tx) * ty, w11 = tx * ty;\n      const a = ux[g] * w00 + ux[g + 1] * w10 + ux[g + GW] * w01 + ux[g + GW + 1] * w11;\n      const b = uy[g] * w00 + uy[g + 1] * w10 + uy[g + GW] * w01 + uy[g + GW + 1] * w11;\n      const c = vx[g] * w00 + vx[g + 1] * w10 + vx[g + GW] * w01 + vx[g + GW + 1] * w11;\n      // grad u = [[a, b], [c, -a]]. One step of m' = K m is the Cayley\n      // transform C = (I - K dt/2)^-1 (I + K dt/2); K has no trace, so\n      // C = ((1 - D) I + K dt) / (1 + D) with D = det(K dt) / 4, and det C = 1\n      // exactly, as the flow keeps area. M' = C M C^T.\n      const D = (dm * dm * (-a * a - b * c)) / 4, iD = 1 / (D > -0.8 ? 1 + D : 0.2), q = 1 - D;\n      const c00 = (q - dm * a) * iD, c01 = -dm * c * iD, c10 = -dm * b * iD, c11 = (q + dm * a) * iD;\n      const mp = M0[p], mq = M1[p], mr = M2[p];\n      const t00 = c00 * mp + c01 * mq, t01 = c00 * mq + c01 * mr, t10 = c10 * mp + c11 * mq, t11 = c10 * mq + c11 * mr;\n      // Settling: M's traceless part decays at the rate SETTLE, and past a\n      // stretch of 6 the film's drag holds it, so the flakes stop short of\n      // standing on edge. det M stays 1, as the flow keeps it: with the\n      // traceless part (d0, d1) the trace is 2 sqrt(1 + d0^2 + d1^2).\n      let d0 = 0.5 * (t00 * c00 + t01 * c01 - t10 * c10 - t11 * c11) * st, d1 = (t00 * c10 + t01 * c11) * st;\n      const dd = d0 * d0 + d1 * d1;\n      if (dd > DMAX * DMAX) {\n        const f = DMAX / sqrt(dd);\n        d0 *= f;\n        d1 *= f;\n      }\n      const h = sqrt(1 + d0 * d0 + d1 * d1);\n      M0[p] = h + d0;\n      M1[p] = d1;\n      M2[p] = h - d0;\n    }\n    // The parcel moves by the midpoint rule.\n    let Xm = X + hd * U, Ym = Y - hd * V;\n    Xm = Xm \u003c 0 ? 0 : Xm > XM ? XM : Xm;\n    Ym = Ym \u003c 0 ? 0 : Ym > YM ? YM : Ym;\n    const im = Xm | 0, jm = Ym | 0, sx = Xm - im, sy = Ym - jm, gm = jm * GW + im;\n    const q00 = psi[gm], q10 = psi[gm + 1], q01 = psi[gm + GW], q11 = psi[gm + GW + 1];\n    x += ((1 - sx) * (q01 - q00) + sx * (q11 - q10)) * ih * dt;\n    y -= ((1 - sy) * (q10 - q00) + sy * (q11 - q01)) * ih * dt;\n    px[p] = x \u003c 0.01 ? 0.01 : x > W - 0.01 ? W - 0.01 : x;\n    py[p] = y \u003c 0.01 ? 0.01 : y > H - 0.01 ? H - 0.01 : y;\n  }\n}\n\n// The flow keeps the oil's density even, and so would the parcels if they\n// moved exactly. Where they have drifted out of a LED that its neighbours\n// still reach, a parcel from a crowded LED is moved in, taking on the flakes\n// of a neighbour; up to 400 a frame.\nfunction even(S) {\n  const { px, py, M0, M1, M2, cnt, own } = S;\n  cnt.fill(0);\n  for (let p = 0; p \u003c NP; p++) {\n    const o = (py[p] | 0) * W + (px[p] | 0);\n    cnt[o]++;\n    own[o] = p;\n  }\n  let d = 0, moved = 0;\n  const start = (random() * W * H) | 0;\n  for (let n = 0; n \u003c W * H && moved \u003c 400; n++) {\n    const e = (start + n) % (W * H);\n    if (cnt[e] !== 0) continue;\n    const x = e % W, y = (e / W) | 0;\n    const nb = x > 0 && cnt[e - 1] ? e - 1 : x \u003c W - 1 && cnt[e + 1] ? e + 1 : y > 0 && cnt[e - W] ? e - W : y \u003c H - 1 && cnt[e + W] ? e + W : -1;\n    if (nb \u003c 0) continue;\n    while (d \u003c W * H && cnt[d] \u003c 3) d++;\n    if (d >= W * H) break;\n    const p = own[d], q = own[nb];\n    cnt[d]--;\n    cnt[e] = 1;\n    px[p] = x + 0.1 + 0.8 * random();\n    py[p] = y + 0.1 + 0.8 * random();\n    M0[p] = M0[q];\n    M1[p] = M1[q];\n    M2[p] = M2[q];\n    moved++;\n  }\n}\n\n// The flow is solved every 1/15 s of oil time, the flakes moved every step.\nfunction step(S, dt) {\n  S.fa += dt;\n  if (S.fa > 1 / 15 - 1e-6) {\n    flowStep(S, S.fa);\n    S.fa = 0;\n  }\n  flakeStep(S, dt);\n  S.t += dt;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.stir = cl(k[2], 0, 1);\n  S.mica = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on oil that has been stirred for 5.4 seconds, the flakes laid\n    // down for the last 4.2 of them.\n    for (let i = 0; i \u003c 4; i++) (S.t += 0.3), flowStep(S, 0.3);\n    for (let i = 0; i \u003c 6; i++) step(S, 0.4);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fingertip lands well away from the stirring one and turns a spiral.\n    const [fx, fy] = finger(S.t);\n    let x = 0, y = 0;\n    for (let n = 0; n \u003c 8; n++) {\n      x = 16 + random() * (W - 32);\n      y = 20 + random() * (H - 40);\n      if ((x - fx) ** 2 + (y - fy) ** 2 > 40 * 40) break;\n    }\n    S.swirl = { x, y, r: 10, k: random() \u003c 0.5 ? 22 : -22, left: 0.7 };\n  }\n  // Oil time runs at Speed / 2, in steps no longer than 1/15 s.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 1 / 15);\n    step(S, h);\n    left -= h;\n  }\n  even(S);\n}\n\nfunction blur(F, T) {\n  for (let y = 0; y \u003c H; y++) {\n    const r = y * W;\n    T[r] = 0.75 * F[r] + 0.25 * F[r + 1];\n    for (let x = 1; x \u003c W - 1; x++) T[r + x] = 0.5 * F[r + x] + 0.25 * (F[r + x - 1] + F[r + x + 1]);\n    T[r + W - 1] = 0.75 * F[r + W - 1] + 0.25 * F[r + W - 2];\n  }\n  for (let x = 0; x \u003c W; x++) {\n    F[x] = 0.75 * T[x] + 0.25 * T[x + W];\n    F[(H - 1) * W + x] = 0.75 * T[(H - 1) * W + x] + 0.25 * T[(H - 2) * W + x];\n  }\n  for (let o = W; o \u003c (H - 1) * W; o++) F[o] = 0.5 * T[o] + 0.25 * (T[o - W] + T[o + W]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { px, py, M0, M1, M2, gx, gy, kp, lit, wt, gl } = S;\n  const mica = S.mica, t = S.t;\n  // Three lights: a soft one over the viewer's shoulder for the flakes that\n  // lie flat, a low ring for the ones the flow has half stood up, and a strip\n  // low at one side, slowly circling, for those leaning toward it.\n  const az = 0.6 + 0.35 * t, c2a = cos(2 * az), s2a = sin(2 * az);\n  const h2x = sin(EL) * cos(az), h2y = sin(EL) * sin(az), h2z = cos(EL);\n  const wf = 0.15, wr = 0.85 + 0.3 * mica, ws = 1 + 0.6 * mica, wg = 0.5 + 1.5 * mica, gs = 0.6 * mica;\n  lit.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  // Large flakes glint once Mica brings them in, the flattest first.\n  const gcut = E0 * (1.05 - mica), sc = (NS - 1) / (1 - 1 / SMAX);\n  for (let p = 0; p \u003c NP; p++) {\n    const mp = M0[p], mq = M1[p], mr = M2[p], fro = mp + mr;\n    // The stretch s, the root of M's larger eigenvalue, and e1's angle to\n    // the strip.\n    const dd = mp - mr, an = sqrt(dd * dd + 4 * mq * mq), s1 = sqrt(0.5 * (fro + an));\n    const c2 = an > 1e-6 ? (dd * c2a + 2 * mq * s2a) / an : 0;\n    const ii = ((s1 > 1 ? 1 - 1 / s1 : 0) * sc + 0.5) | 0, i = ii \u003c NS ? ii : NS - 1, j = ((c2 + 1) * 0.5 * (NC - 1) + 0.5) | 0;\n    let val = wf * RF[i] + wr * RR[i] + ws * RS[i * NC + j];\n    val *= 1 - gs + gs * kp[p];\n    // Into the LED the parcel is over; the blur below spreads it. A large\n    // flake's glint stays in its own LED.\n    const o = (py[p] | 0) * W + (px[p] | 0), ex = gx[p], ey = gy[p];\n    if (ey !== 0 && ex * ex + ey * ey > gcut * gcut) {\n      // Its normal is sqrt(M) times its resting tilt; det M = 1, so\n      // sqrt(M) = (M + I) / sqrt(trace + 2).\n      const is = 1 / sqrt(fro + 2);\n      const m0 = ((mp + 1) * ex + mq * ey) * is, m1 = (mq * ex + (mr + 1) * ey) * is, inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const d = abs(h2x * m0 + h2y * m1 + h2z) * inv, d2 = d * d, d4 = d2 * d2, d8 = d4 * d4;\n      gl[o] += wg * d8 * d8 * d8;\n    }\n    lit[o] += val;\n    wt[o] += 1;\n  }\n  // A LED sees a little past its own square: a 1-2-1 blur each way.\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  // Colours: the oil's body and its sheen, whose brightest light leans a\n  // little round the wheel as pearl pigment does.\n  const h = S.hue + 0.88, hh = h - floor(h);\n  // Deep orange reads brown on the panel and deep yellow olive, so from\n  // orange to lime the oil glows instead: 0.82 of full, not 0.34.\n  const warm = sm(0.015, 0.05, hh) * (1 - sm(0.3, 0.38, hh));\n  const { c0, c1, c2 } = S;\n  hsv(h, 0.9 - 0.1 * warm, 0.34 + 0.48 * warm, c0);\n  hsv(h - 0.02, 0.42 - 0.12 * warm, 1, c1);\n  hsv(h - 0.12, 0.38 - 0.1 * warm, 1, c2);\n  const rest = RF[0] * wf + RR[0] * wr + RS[(NC - 1) >> 1] * ws;\n  for (let o = 0; o \u003c W * H; o++) {\n    // An LED no parcel reached shows flakes at rest.\n    const val = (lit[o] + 0.05 * rest) / (wt[o] + 0.05) + gl[o] * 0.5;\n    const s = val > 1.4 ? 1.4 : val, fl = val \u003c 0.4 ? 0 : val > 1 ? 1 : (val - 0.4) / 0.6, f = fl * fl * (3 - 2 * fl);\n    const sr = c1[0] + (c2[0] - c1[0]) * f, sg = c1[1] + (c2[1] - c1[1]) * f, sb = c1[2] + (c2[2] - c1[2]) * f;\n    const body = 1 - 0.55 * (s > 1 ? 1 : s);\n    // The brightest sheen runs on toward white.\n    const wl = val \u003c 0.75 ? 0 : val > 1.3 ? 1 : (val - 0.75) / 0.55, wh = wl * wl * (1.5 - wl), k = s * 0.85 * (1 - wh);\n    const r = 255 * (c0[0] * body + sr * k + wh), g = 255 * (c0[1] * body + sg * k + wh), b = 255 * (c0[2] * body + sb * k + wh);\n    display.setPixel(o % W, (o / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Stir","min":0,"max":1,"about":"How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls."},{"name":"Mica","min":0,"max":1,"about":"How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white."}],"start":[0,2,0,0.06],"measures":{"motion":0.1227,"detail":0.0154,"edges":0,"complexity":1.6312,"coverage":1,"colour":0.1493,"drift":0.0939},"knobResponse":[0.4877,0.1036,0.0703,0.0773]},{"slug":"shoot-em-up","title":"Shoot 'em Up","family":"pixel","round":24,"note":"세로로 흐르는 아케이드 슈팅 게임이 혼자 돌아요. 섬과 해안, 들판과 빨간 지붕 마을이 아래로 흘러가고, 흰 전투기가 노란 탄을 쏘며 S 자로 들어오는 편대와 포탑을 돌리는 포함을 떨어뜨려요. 화면 위 3분의 1을 덮는 보스가 내려와 고리와 나선 탄막을 뿌리다 연쇄 폭발로 부서져요. K1 이 열대 바다에서 붉은 협곡, 밤 도시, 우주 정거장까지 판을 바꾸고, K1 을 누르면 폭탄이 터져요.","idea":"An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.","buttons":"K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.","code":"// ===== Patternflow pattern =====\n// Title:   Shoot 'em Up\n// Family:  pixel\n// Idea:    An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the vertically scrolling arcade shooters of the 1980s\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1\n//\n// Knob 1: Stage. Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars.\n// Knob 2: Speed. The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in.\n// Knob 3: Waves. From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats.\n// Knob 4: Bullets. How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read.\n// Buttons: K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, abs, atan2, hypot, floor, round, sqrt, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = (a, b) => a + (b - a) * Math.random();\n// Ground scroll at Speed 2 in LEDs a second; clouds go 1.8 times as fast.\nconst V0 = 12, CLOUD = 1.8;\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), u = (x -= ix) * x * (3 - 2 * x), v = (y -= iy) * y * (3 - 2 * y);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\n\n// Ground types, one colour each in every stage's palette.\nconst [DEEP, WAVE, CAP, SHAL, SAND, GRASS, TREE, FLDA, FLDB, ROAD, ROOF, WALL, TRUNK, RIVER, LIGHT, HEDGE] = [...Array(16).keys()];\nconst PALS = [\n  \"123c9a1e5cc4d2ecff2aa8ccf0d4884aae3c1f6a2a9ccc4a6e9a3076706ad8482ef2e6c88a5a2a2c7ed8fff2c02e5226\",\n  \"5c20188a3a22d8966ab4502af0b464dc9a4c4a8a3cf2c278c8843e6e4630c8602ef6dcaa5a34182aa89affe6aa7a2c1a\",\n  \"0c1846172a628ca8e61c386a50506a163e340e2c2440446a2a2c481e1e30b43c96ffd25a2e222412265effa83c1c1c2c\",\n  \"08061c1e0e40e6e6ff34185e9a90885a62804c4440868ca8464c661c2034ff3c3cb8c2d83c343228dcff78ffc82a2e40\",\n].map((s) => s.match(/../g).map((h) => parseInt(h, 16)));\n// Clouds per stage: colour, underside shade, alpha, shadow shade.\nconst CLOUDS = [\n  [236, 242, 255, 0.74, 0.72, 0.62],\n  [236, 200, 156, 0.78, 0.6, 0.7],\n  [84, 96, 146, 0.7, 0.66, 0.72],\n  [150, 76, 214, 0.6, 0.5, 1],\n];\n\n// Sprites are rows of letters, \".\" clear; a mirrored one is its left half.\nfunction mk(src, pal, mirror) {\n  const rows = src.trim().split(/\\s+/), w = rows[0].length * (mirror ? 2 : 1), px = [], mask = new Uint8Array(w * rows.length);\n  rows.forEach((r, j) => {\n    for (let i = 0; i \u003c r.length; i++)\n      if (r[i] !== \".\") for (const x of mirror ? [i, w - 1 - i] : [i]) px.push(x, j, pal[r[i]]), (mask[j * w + x] = 1);\n  });\n  return { px, mask };\n}\nconst PLAYER = mk(\"....w.... ...wcw... ...wbw... ..gwbwg.. ..gwwwg.. .wgwwwgw. wwwwgwwww rww.g.wwr r..www..r ...r.r...\", { w: 0xdce4f0, c: 0x96f0ff, b: 0x286ee6, g: 0x828ca0, r: 0xe62832 });\nconst FIGHTER = mk(\"o.....o oo.d.oo ooodooo .odwdo. ..ddd.. ...d...\", { o: 0xff8c1e, d: 0xaa3214, w: 0xfff0c8 });\nconst DART = mk(\"mm...mm mmm.mmm .mmmmm. .mmcmm. ..mmm.. ..mdm.. ...m...\", { m: 0xd246e6, c: 0x78f0ff, d: 0x6e1e8c });\nconst BOAT = mk(\".kkkkk. kbbbbbk kbaaabk kbaaabk kbbbbbk kbbbbbk kbaaabk kbbbbbk .kbbbk. .kbbbk. ..kbk.. ...k...\", { k: 0x1e2028, b: 0x969baa, a: 0x5a5f6e });\n// The boss, 56 wide; \"e\" is its glowing core.\nconst BOSS = mk(\n  `\n.............kkgggk..kkkkkkk\nkk...........kacccc..kbbbbbb\nkykkk........kabbbc..kbbrrbb\nkybbbkkk.....kabbbc..kbbrrbb\nkbbbbbbbkk...kabbbc..kbbbbbb\nkbbbbbbbbbkkkbabbbc..kbbbbbb\nkbbrrrbbbbbbbbabbbc..kbbbkkk\nkaarrrrrrbbbbbabbbc..kbbbkee\nkccabbrrrrrrbbabbbckkbbbbkee\n.kkcaabgggrrrrabbbcbbbbbbkee\n...kcaagygbbrrrrrrbbbbbbbkee\n....kacgggbbbbbrrrrrrbbbbkee\n......kkcaabbbbbbbrrrbbbbkee\n........kacaaabgggbbbbbbbkee\n.........kkccabgygbbbbbbbkee\n...........kkaagggbbbbbbbkee\n.............kccaabbbbbbbkkk\n..............kkccabbbbbbbbb\n................kkcaabbbbbbb\n..................kccbbyybbb\n...................kkabbbbbb\n.....................kabbbbb\n.....................kcbbbbb\n......................kabbbb\n.......................kabbg\n.......................kcbbg\n........................kabg\n.........................kag\n.........................kcg\n..........................kg`,\n  { k: 0x14141e, c: 0x464a60, a: 0x787e96, b: 0xb4bacc, r: 0xdc323c, y: 0xffd646, g: 0x2c2c38, e: -1 },\n  true,\n);\nconst PALM = \"t.t.t .ttt. ttktt .ttt. t.t.t\".split(\" \");\n// 3x5 digits, a P, and a ship for the lives; one octal digit per row.\nconst GLYPH = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717, 0o75744, 0o22775];\nconst BUL = [\n  [255, 70, 170],\n  [70, 220, 255],\n  [255, 170, 40],\n];\n\n// The map repeats every 1024 rows: sea, coast, fields, town, river, coast. -1 is sea, 1 land.\nfunction profile(x, wy) {\n  const v = (wy % 1024) + 0.3 * (x - 32);\n  return v \u003c 250 || v > 830 ? -1 : v \u003c 290 ? (v - 270) / 20 : v \u003c 790 ? 1 : (810 - v) / 20;\n}\nconst ISL = {};\nfunction islands(sd, x, wy) {\n  let best = 0;\n  for (let j = floor(wy / 44) - 1, j1 = j + 2; j \u003c= j1; j++)\n    for (let i = floor(x / 32) - 1, i1 = i + 2; i \u003c= i1; i++) {\n      const ix = i * 32 + 4 + hash(i, j, sd + 2) * 24, iy = j * 44 + 6 + hash(i, j, sd + 3) * 32, r = 12 + hash(i, j, sd + 4) * 10;\n      const b = 1.9 * (1 - hypot(x - ix, wy - iy) / r);\n      if (b > best && hash(i, j, sd + 1) \u003c 0.7) ((best = b), (ISL.x = ix), (ISL.y = iy), (ISL.r = r));\n    }\n  return best;\n}\nfunction terrain(sd, x, wy) {\n  const pr = profile(x, wy);\n  let e = pr + 0.5 * (noise(x / 11, wy / 11, sd) - 0.5) + 0.24 * (noise(x / 4.5, wy / 4.5, sd + 9) - 0.5);\n  if (pr \u003c 0) e += islands(sd, x, wy) * min(1, -pr);\n  if (e \u003c -0.08) {\n    if (e > -0.12) return CAP;\n    if (e > -0.21) return SHAL;\n    const cx = x >> 3, cy = floor(wy / 5), h = hash(cx, cy, sd + 21), c0 = cx * 8 + floor(hash(cx, cy, sd + 22) * 6);\n    if (h \u003c 0.4 && wy === cy * 5 + floor(hash(cx, cy, sd + 23) * 4) && x >= c0 && x \u003c c0 + (h \u003c 0.15 ? 3 : 2)) return CAP;\n    return e > -0.36 || noise(x / 6, wy / 2, sd + 5) > 0.78 ? WAVE : DEEP;\n  }\n  if (e \u003c 0.08) return SAND;\n  if (pr \u003c -0.5) {\n    const dx = round(x - ISL.x), dy = round(wy - ISL.y), c = ISL.r > 13 && abs(dx) \u003c= 2 && abs(dy) \u003c= 2 ? PALM[dy + 2][dx + 2] : \".\";\n    return c === \".\" ? GRASS : c === \"k\" ? TRUNK : TREE;\n  }\n  const u = wy % 1024, dr = abs(x - 30 - 9 * sin(wy / 70));\n  if (u > 560 && u \u003c 770) {\n    const a = (u - 560) / 34, dv = abs(x - 32 - 23 * sin(a)) / sqrt(1 + (0.68 * cos(a)) ** 2);\n    if (dv \u003c 4.4) return dr \u003c 2.6 ? (dr > 1.6 ? WALL : ROAD) : dv \u003c 3.3 ? RIVER : SAND;\n  }\n  if (dr \u003c 1.6) return dr \u003c 0.6 && wy % 6 \u003c 3 ? LIGHT : ROAD;\n  if (u > 420 && u \u003c 510 && dr \u003c 22 + 6 * sin(wy / 9)) {\n    // The town: in each plot a house (roof, front wall, shadow) or a tree.\n    const lx = (x + 4) % 9, ly = wy % 9;\n    if (lx === 0 || ly === 0) return ROAD;\n    if (hash(floor((x + 4) / 9), floor(wy / 9), sd + 41) > 0.6) return hypot(lx - 4.5, ly - 4.5) \u003c 2.7 ? TREE : GRASS;\n    if (lx >= 2 && lx \u003c= 6 && ly >= 2) return ly === 2 ? WALL : ly > 7 ? GRASS : lx === 4 ? TRUNK : ROOF;\n    return (lx === 7 && ly >= 2 && ly \u003c= 6) || (ly === 1 && lx >= 3) ? HEDGE : GRASS;\n  }\n  const band = floor(wy / 14), gx = x + floor(hash(band, 0, sd + 51) * 16), h = hash(floor(gx / 16), band, sd + 52);\n  if (gx % 16 === 0 || wy % 14 === 0) return h \u003c 0.6 ? HEDGE : GRASS;\n  const kind = floor(h * 4);\n  if (kind \u003c 3) return (kind ? (kind > 1 ? hash(gx, wy, sd + 53) \u003c 0.12 : gx % 3 === 0) : wy % 3 === 0) ? FLDB : FLDA;\n  const tx = floor(gx / 5), ty = floor(wy / 5);\n  return hypot(gx - tx * 5 - 1 - hash(tx, ty, sd + 55) * 3, wy - ty * 5 - 1 - hash(tx, ty, sd + 56) * 3) \u003c 1.9 ? TREE : GRASS;\n}\n// A cloud: puffs on a flat base, 2 its body and 1 its underside.\nfunction newCloud(S, cw) {\n  const w = floor(rnd(22, 40)), h = floor(rnd(10, 16)), n = 3 + floor(w / 9), P = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = h * 0.5 * (0.5 + 0.5 * sin((PI * (i + 0.5)) / n)) + rnd(-0.6, 0.8);\n    P.push((w * (i + 0.5)) / n + rnd(-1.5, 1.5), h - 1.5 - r * 0.55, r);\n  }\n  const inn = (x, y) => x >= 0 && y >= 0 && x \u003c w && y \u003c= h - 1.5 && P.some((_, i) => i % 3 === 0 && hypot(x + 0.5 - P[i], y + 0.5 - P[i + 1]) \u003c P[i + 2]);\n  const m = new Uint8Array(w * h);\n  for (let y = 0; y \u003c h; y++) for (let x = 0; x \u003c w; x++) if (inn(x, y)) m[y * w + x] = inn(x, y + 2) ? 2 : 1;\n  S.clouds.push({ x: floor(rnd(-14, 56 - w / 2)), cw: cw + h, w, h, m });\n}\nfunction fill(S) {\n  for (const top = floor(S.scroll) + H + 24; S.gen \u003c top; S.gen++) for (let x = 0; x \u003c W; x++) S.ter[(S.gen & 255) * W + x] = terrain(S.sd, x, S.gen);\n  const cb = floor(S.scroll * CLOUD);\n  for (; S.cnext \u003c cb + H + 20; S.cnext += floor(rnd(24, 52))) newCloud(S, S.cnext);\n  S.clouds = S.clouds.filter((c) => cb + H - 1 - c.cw \u003c H);\n}\n\nexport function setup(params) {\n  const S = { t: 0, scroll: 85, gen: 83, cnext: 147, sd: floor(Math.random() * 9000), ter: new Uint8Array(256 * W), cb: new Uint8Array(N), buf: new Float32Array(N * 3), sh: new Float32Array(N) };\n  Object.assign(S, { clouds: [], en: [], boats: [], eb: [], ps: [], fx: [], pop: [], caps: [], bossAt: 3.2, bossN: 0, waveAt: 0.4, waveN: 0, boatAt: 0.2, kills: 0, score: 0, flash: 0 });\n  S.pl = { x: 32, y: 112, lvl: 0, lvlT: 0, ft: 0 };\n  fill(S);\n  params.s = S;\n}\n\nfunction shoot(S, x, y, a, v, c, big) {\n  if (S.eb.length \u003c 380) S.eb.push({ x, y, vx: cos(a) * v, vy: sin(a) * v, c, big });\n}\nfunction fan(S, x, y, m, gap, v) {\n  const g = atan2(S.pl.y - y, S.pl.x - x);\n  for (let i = 0; i \u003c m; i++) shoot(S, x, y, g + (i - (m - 1) / 2) * gap, v, 2, 0);\n}\nfunction boom(S, x, y, s) {\n  const sp = [];\n  for (let i = 0; i \u003c 4 + s * 3; i++) {\n    const a = rnd(0, 6.283);\n    sp.push(cos(a) * rnd(20, 50) * s, sin(a) * rnd(20, 50) * s);\n  }\n  S.fx.push({ x, y, t0: S.t, s, sp, d: 0.45 + 0.12 * s });\n}\nfunction score(S, x, y, v) {\n  S.pop.push({ x, y, v, t0: S.t });\n  S.score += v;\n}\n// A hit; a kill leaves an explosion, its score, and every ninth a capsule.\nfunction hurt(S, e, n, x, y) {\n  e.fl = 0.06;\n  if ((e.hp -= n) > 0) return;\n  boom(S, x, y, e.boat ? 1.3 : 1);\n  score(S, x, y - 4, e.boat ? 300 : e.k ? 150 : 100);\n  if (++S.kills % 9 === 0) S.caps.push({ x, y });\n}\nconst boatY = (S, b) => floor(S.scroll) + H - 1 - round(b.wy);\nconst yOf = (S, e) => (e.boat ? boatY(S, e) : e.y);\n\nfunction spawn(S) {\n  const w = S.waves;\n  if (S.t >= S.waveAt) {\n    const n = S.waveN++, m = 4 + round(w);\n    if (n % 2 === 0) {\n      const o = { k: 0, side: n % 4 ? -1 : 1, y0: rnd(8, 30) };\n      for (let i = 0; i \u003c m; i++) S.en.push({ ...o, born: S.t + i * 0.3, x: -99, y: -99, hp: 6 });\n    } else {\n      const cx = rnd(24, 40);\n      for (let i = 0; i \u003c (m | 1); i++) {\n        const r = (i + 1) >> 1;\n        S.en.push({ k: 1, born: S.t, x: cx + (i & 1 ? r : -r) * 6, y: -8 - r * 6, hy: 34 - r * 6, st: 0, hp: 7, hold: 0.5 + r * 0.25 + rnd(0, 0.2) });\n      }\n    }\n    S.waveAt = S.t + (n === 0 ? 0.45 : S.boss ? 2 : 1) * (3.3 / w ** 0.75);\n  }\n  if (S.t \u003c S.boatAt) return;\n  // A gunboat, where its hull fits on open water.\n  const wy = floor(S.scroll) + H + 8;\n  S.boatAt = S.t + 0.3;\n  for (let n = 0; n \u003c 6; n++) {\n    const x = floor(rnd(6, 58));\n    let ok = true;\n    for (let j = -7; j \u003c= 7; j += 2) for (let i = -4; i \u003c= 4; i += 2) ok &&= S.ter[((wy + j) & 255) * W + x + i] \u003c= CAP;\n    if (ok) return S.boats.push({ boat: 1, x, wy, hp: 10, ft: rnd(0.6, 1.6) }), (S.boatAt += rnd(1.1, 2.7) / w ** 0.7);\n  }\n}\n\nfunction stepEnemies(S, d) {\n  const f = S.fury;\n  for (const e of S.en) {\n    const a = S.t - e.born;\n    e.fl -= d;\n    if (a \u003c 0) continue;\n    if (e.k === 0) {\n      e.x = e.side > 0 ? -6 + 38 * a : 70 - 38 * a;\n      e.y = e.y0 + 14 * a + 13 * sin(3.2 * a);\n    } else if (e.st === 0) {\n      if ((e.y += 50 * d) >= e.hy) ((e.st = 1), (e.t1 = S.t));\n    } else if (e.st === 1) {\n      if (S.t - e.t1 > e.hold) {\n        const g = atan2(S.pl.y - e.y, S.pl.x - e.x);\n        ((e.st = 2), (e.vx = cos(g) * 30), (e.vy = sin(g) * 30));\n        if (Math.random() \u003c 0.35 + 0.65 * f) fan(S, e.x, e.y + 3, 1 + 2 * round(f * 1.5), 0.25, 42);\n      }\n    } else {\n      const k = min(130, hypot(e.vx, e.vy) + 110 * d) / hypot(e.vx, e.vy);\n      e.x += (e.vx *= k) * d;\n      e.y += (e.vy *= k) * d;\n    }\n  }\n  S.en = S.en.filter((e) => e.hp > 0 && e.y \u003c 140 && e.x > -20 && e.x \u003c 84);\n  for (const b of S.boats) {\n    const sy = boatY(S, b);\n    b.fl -= d;\n    b.a = atan2(S.pl.y - sy + 3, S.pl.x - b.x);\n    if ((b.ft -= d) \u003c= 0 && sy > 2 && sy \u003c 96) {\n      b.ft = 2.2 - 1.3 * f;\n      for (let i = f > 0.5 ? -1 : 0; i \u003c= (f > 0.5 ? 1 : 0); i++) shoot(S, b.x + cos(b.a) * 4, sy - 3 + sin(b.a) * 4, b.a + i * 0.25, 38, 2, 0);\n    }\n  }\n  S.boats = S.boats.filter((b) => b.hp > 0 && boatY(S, b) \u003c 140);\n}\n\nfunction stepBoss(S, d) {\n  const f = S.fury;\n  // The first boss is short, so its fight fits the first seconds.\n  if (!S.boss && S.t >= S.bossAt) S.boss = { x: 32, y: -34, t0: S.t, st: 0, hp: S.bossN ? 320 + 40 * S.bossN : 60, ph: S.bossN ? 2.8 : 1.6, ang: 0 };\n  const B = S.boss;\n  if (!B) return;\n  B.fl -= d;\n  if (B.st === 2) {\n    if (!(S.t \u003c B.nd)) {\n      boom(S, B.x + rnd(-22, 22), B.y + rnd(4, 24), rnd(0.7, 1.4));\n      B.nd = S.t + 0.07;\n    }\n    if (S.t - B.t2 > 1.7) {\n      boom(S, B.x, B.y + 12, 3.2);\n      for (let i = 0; i \u003c 6; i++) boom(S, B.x + rnd(-24, 24), B.y + rnd(4, 26), rnd(1, 1.8));\n      score(S, B.x - 6, B.y + 14, 5000);\n      S.caps.push({ x: B.x, y: B.y + 20 });\n      Object.assign(S, { flash: 0.75, boss: null, bossAt: S.t + rnd(18, 30), bossN: S.bossN + 1 });\n    }\n  } else if (B.st === 0) {\n    const u = min(1, (S.t - B.t0) / 1.4);\n    B.y = -34 + 40 * (1 - (1 - u) * (1 - u));\n    if (u >= 1) ((B.st = 1), (B.t1 = S.t));\n  } else {\n    // In turns: a ring, a spiral, aimed fans from the wing guns.\n    B.x = 32 + 3 * sin((S.t - B.t1) * 0.8);\n    const ph = floor((S.t - B.t1) / B.ph) % 3;\n    if (ph === 0 && !(S.t \u003c B.nr)) {\n      const n = floor(12 + 18 * f), a0 = rnd(0, 6.283);\n      B.nr = S.t + 1.5 - 0.8 * f;\n      for (let i = 0; i \u003c n; i++) shoot(S, B.x, B.y + 11, a0 + (i * 2 * PI) / n, 28, 0, 1);\n    }\n    if (ph === 1 && !(S.t \u003c B.nx)) {\n      const arms = f > 0.5 ? 3 : 2;\n      B.nx = S.t + 1 / (7 + 23 * f);\n      B.ang += 0.37;\n      for (let i = 0; i \u003c arms; i++) shoot(S, B.x, B.y + 11, B.ang + (i * 2 * PI) / arms, 32, 1, 0);\n    }\n    if (ph === 2 && !(S.t \u003c B.nf)) {\n      B.nf = S.t + 1.05 - 0.55 * f;\n      for (const s of [-1, 1]) fan(S, B.x + s * 19.5, B.y + 10, 3 + round(6 * f), 0.12 + 0.1 * f, 42);\n    }\n  }\n}\n\nfunction stepPlayer(S, d) {\n  const P = S.pl, B = S.boss;\n  if ((P.lvlT -= d) \u003c= 0 && P.lvl > 0) ((P.lvl -= 1), (P.lvlT = 14));\n  // Its aim: the boss, a capsule, or half way from its weave to the nearest enemy.\n  const wv = 32 + 18 * sin(S.t * 0.53);\n  let ax = wv, ny = -99;\n  if (B && B.st > 0) ax = B.x + 10 * sin(S.t * 1.1);\n  else if (S.caps.length) ax = S.caps[0].x;\n  else for (const e of [...S.en, ...S.boats]) if (yOf(S, e) > max(0, ny) && yOf(S, e) \u003c P.y - 14) ((ny = yOf(S, e)), (ax = 0.55 * e.x + 0.45 * wv));\n  // Then the nearby spot the bullets will miss on its way there.\n  let best = 1e9, bx = P.x, by = P.y;\n  for (const ox of [-14, -9, -5, -2, 0, 2, 5, 9, 14])\n    for (const oy of [-8, -3, 0, 4]) {\n      const cx = clamp(P.x + ox, 5, 58), cy = clamp(P.y + oy, 96, 116), dist = max(0.01, hypot(cx - P.x, cy - P.y));\n      let c = 0.05 * abs(cx - ax) + 0.04 * abs(cy - 111) + 0.015 * dist;\n      for (const b of S.eb)\n        for (const tau of abs(b.y - cy) \u003c 45 ? [0.05, 0.12, 0.2, 0.3, 0.42] : []) {\n          const k = min(1, (60 * tau) / dist), dx = b.x + b.vx * tau - P.x - (cx - P.x) * k, dy = b.y + b.vy * tau - P.y - (cy - P.y) * k;\n          c += max(0, 30 - dx * dx - 0.7 * dy * dy) / (tau \u003c 0.15 ? 6 : 15);\n        }\n      if (c \u003c best) ((best = c), (bx = cx), (by = cy));\n    }\n  P.x += clamp(bx - P.x, -60 * d, 60 * d);\n  P.y += clamp(by - P.y, -60 * d, 60 * d);\n  // Two streams, three after a capsule, five after two.\n  for (P.ft -= d; P.ft \u003c= 0; P.ft += 0.1)\n    for (const [x, vx] of [[-2, 0], [2, 0], [0, 0], [-3, -38], [3, 38]].slice(0, [2, 3, 5][P.lvl])) S.ps.push({ x: P.x + x, y: P.y - 5, vx, vy: -170 });\n}\n\nfunction stepShots(S, d) {\n  const B = S.boss, P = S.pl;\n  for (const s of S.ps) {\n    s.x += s.vx * d;\n    s.y += s.vy * d;\n    if (s.y \u003c -4) s.dead = 1;\n    for (const e of [...S.en, ...S.boats]) if (!s.dead && e.hp > 0 && abs(s.x - e.x) \u003c= 4 && abs(s.y - yOf(S, e)) \u003c= (e.boat ? 6 : 4)) ((s.dead = 1), hurt(S, e, 1, e.x, yOf(S, e)));\n    const ix = round(s.x - B?.x + 28), iy = round(s.y - B?.y);\n    if (!s.dead && B?.st === 1 && ix >= 0 && ix \u003c 56 && iy >= 0 && iy \u003c 30 && BOSS.mask[iy * 56 + ix]) ((s.dead = 1), (B.fl = 0.05), (S.score += 10), --B.hp);\n  }\n  // A bullet that reaches the fighter bursts on its shield.\n  for (const b of S.eb) {\n    b.x += b.vx * d;\n    b.y += b.vy * d;\n    if (b.x \u003c -3 || b.x > 66 || b.y \u003c -3 || b.y > 130) b.dead = 1;\n    else if (abs(b.x - P.x) \u003c 1.6 && abs(b.y - P.y) \u003c 2.5) ((b.dead = 1), boom(S, b.x, b.y, 0.4));\n  }\n  if (B?.st === 1 && B.hp \u003c= 0) ((B.st = 2), (B.t2 = S.t), (S.eb.length = 0));\n  for (const c of S.caps) {\n    c.y += 14 * d;\n    if (abs(c.x - P.x) \u003c 6 && abs(c.y - P.y) \u003c 7) ((c.dead = 1), (P.lvl = min(2, P.lvl + 1)), (P.lvlT = 16));\n  }\n  for (const k of [\"ps\", \"eb\", \"caps\"]) S[k] = S[k].filter((o) => !o.dead && o.y \u003c 134);\n  S.fx = S.fx.filter((f) => S.t - f.t0 \u003c f.d);\n  S.pop = S.pop.filter((p) => S.t - p.t0 \u003c 0.9);\n}\n\nfunction step(S, d) {\n  S.t += d;\n  S.scroll += V0 * d;\n  S.flash = max(0, S.flash - 2.6 * d);\n  fill(S);\n  spawn(S);\n  stepEnemies(S, d);\n  stepBoss(S, d);\n  stepPlayer(S, d);\n  stepShots(S, d);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.stage, S.waves, S.fury] = [clamp(k[0], 0, 1), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  // The first second plays before the first frame.\n  if (!S.started) {\n    S.started = 1;\n    for (let i = 0; i \u003c 30; i++) step(S, 1 / 30);\n  }\n  // The bomb clears the bullets and hurts everything on the screen.\n  if (input.btnPressed?.[0]) {\n    Object.assign(S, { flash: 0.9, bomb: S.t, eb: [] });\n    for (const e of [...S.en, ...S.boats]) if (e.hp > 0 && yOf(S, e) > 0) hurt(S, e, 4, e.x, yOf(S, e));\n    if (S.boss?.st === 1) S.boss.hp -= 15;\n  }\n  for (let d = (clamp(dt || 0, 0, 0.1) * clamp(k[1], 0.2, 3)) / 2; d > 0; d -= 1 / 30) step(S, min(d, 1 / 30));\n}\n\nfunction put(buf, x, y, r, g, b) {\n  const q = (round(y) * W + round(x)) * 3;\n  if (x > -0.5 && y > -0.5 && x \u003c W - 0.5 && y \u003c H - 0.5) ((buf[q] = r), (buf[q + 1] = g), (buf[q + 2] = b));\n}\nfunction mix(buf, q, r, g, b, a) {\n  buf[q] += (r - buf[q]) * a;\n  buf[q + 1] += (g - buf[q + 1]) * a;\n  buf[q + 2] += (b - buf[q + 2]) * a;\n}\n// Mode 1 draws a sprite white, 2 stamps its shadow.\nfunction spr(S, sp, x0, y0, mode, glow) {\n  const p = sp.px;\n  for (let i = 0; i \u003c p.length; i += 3) {\n    const x = x0 + p[i], y = y0 + p[i + 1], c = mode ? 0xffffff : p[i + 2];\n    if (mode === 2) {\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) S.sh[y * W + x] = min(S.sh[y * W + x], 0.55);\n    } else if (c \u003c 0) put(S.buf, x, y, ...glow);\n    else put(S.buf, x, y, c >> 16, (c >> 8) & 255, c & 255);\n  }\n}\nfunction number(buf, v, x0, y0, r, g, b) {\n  const s = String(v);\n  for (let n = 0; n \u003c s.length; n++)\n    for (let j = 0; j \u003c 15; j++) if ((GLYPH[\"0123456789PA\".indexOf(s[n])] >> (14 - j)) & 1) put(buf, x0 + n * 4 + (j % 3), y0 + floor(j / 3), r, g, b);\n}\n// A ring of width w, or a disc for w 0.\nfunction ring(buf, cx, cy, R, w, c) {\n  for (let y = floor(cy - R - w); y \u003c= cy + R + w; y++)\n    for (let x = floor(cx - R - w); x \u003c= cx + R + w; x++) if (w ? abs(hypot(x - cx, y - cy) - R) \u003c w : hypot(x - cx, y - cy) \u003c= R) put(buf, x, y, ...c);\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { buf, sh, cb, pl: P, boss: B, t } = S,\n    si = min(3, floor(S.stage * 4)), pal = PALS[si];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, wy = floor(S.scroll) + H - 1 - y; x \u003c W; x++) {\n      let k = S.ter[(wy & 255) * W + x];\n      if (k === CAP && (t * 1.6 + hash(x, wy, 3) * 4) % 2 > 1.55) k = WAVE;\n      put(buf, x, y, pal[k * 3], pal[k * 3 + 1], pal[k * 3 + 2]);\n      if (si === 2 && k === FLDA && (x + wy) % 2 === 0 && hash(x, wy, 5) \u003c 0.4) put(buf, x, y, 255, 214, 110);\n      const h = si === 3 && k === DEEP ? hash(x, wy, 6) : 1;\n      if (h \u003c 0.035) put(buf, x, y, ...Array(3).fill(90 + 4600 * h * (0.7 + 0.3 * sin(t * 4 + x * y))));\n    }\n  for (const b of S.boats) {\n    const y = boatY(S, b);\n    spr(S, BOAT, b.x - 3, y - 6, b.fl > 0 ? 1 : 0);\n    for (let i = 1; i \u003c= 3; i++) put(buf, b.x + cos(b.a) * i, y - 3 + sin(b.a) * i, 30, 30, 40);\n  }\n  // Shadows, then the clouds. Thick fire dims the ground as bullet-hell games do.\n  const C = CLOUDS[si];\n  cb.fill(0);\n  for (const c of S.clouds)\n    for (let j = 0, sy = floor(S.scroll * CLOUD) + H - 1 - c.cw; j \u003c c.h; j++)\n      for (let i = 0, x = c.x, y = sy + j; i \u003c c.w; i++, x++) if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && c.m[j * c.w + i]) cb[y * W + x] = c.m[j * c.w + i];\n  for (let i = 0; i \u003c N; i++) sh[i] = (i % W >= 6 && i >= 9 * W && cb[i - 9 * W - 6] ? C[5] : 1) * (1 - 0.36 * S.fury);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) + 2, round(e.y) + 6, 2);\n  if (B) spr(S, BOSS, round(B.x) - 22, round(B.y) + 9, 2);\n  spr(S, PLAYER, round(P.x) + 1, round(P.y) + 3, 2);\n  for (let i = 0; i \u003c N; i++) {\n    const l = cb[i], k = l === 1 ? C[3] : 1;\n    mix(buf, i * 3, 0, 0, 0, 1 - sh[i]);\n    if (l) mix(buf, i * 3, C[0] * k, C[1] * k, C[2] * k, C[4]);\n  }\n  for (const c of S.caps) ring(buf, c.x, c.y, 2.9, 0, floor(t * 7) % 2 ? [230, 40, 50] : [40, 90, 240]), number(buf, \"P\", c.x - 1, c.y - 2, 255, 255, 255);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) - 3, round(e.y) - 3, e.fl > 0 ? 1 : 0);\n  // The boss's core pulses cyan, or red as the fury rises.\n  const f = S.fury, p = 0.5 + 0.5 * sin(t * 9);\n  if (B) spr(S, BOSS, round(B.x) - 28, round(B.y), (B.st === 2 ? floor(t * 16) % 2 : B.fl > 0 && floor(t * 20) % 4 === 0) ? 1 : 0, [120 + 135 * f + 60 * p, 230 - 170 * f + 25 * p * (1 - f), 255 - 215 * f]);\n  for (const ex of [3, 5])\n    for (let j = 0, L = 2 + ((t * 24 + ex) % 3 | 0), c; j \u003c L; j++) put(buf, round(P.x) - 4 + ex, round(P.y) + 5 + j, 255 - 12 * (c = min(3, j + (L \u003c 3))) * c, 255 - 65 * c, 220 - 70 * c);\n  spr(S, PLAYER, round(P.x) - 4, round(P.y) - 5, 0);\n  for (const s of S.ps) for (let j = 0; j \u003c 3; j++) put(buf, s.x, s.y + j, 255, 255 - 28 * j, 230 - 85 * j);\n  // Explosions: a white flash, a ring cooling from yellow to red, sparks.\n  for (const f of S.fx) {\n    const a = (t - f.t0) / f.d, R = (1.5 + 4.5 * a) * f.s;\n    if (a \u003c 0.16) ring(buf, f.x, f.y, (1 + 10 * a) * f.s, 0, [255, 255, 235]);\n    else if (a \u003c 0.5) ring(buf, f.x, f.y, R * 0.5, 0, [255, a \u003c 0.3 ? 210 : 120, 40]);\n    if (a >= 0.16) ring(buf, f.x, f.y, R, 0.75, a \u003c 0.45 ? [255, 220, 80] : a \u003c 0.72 ? [255, 130, 30] : [180, 46, 24]);\n    for (let i = 0; a \u003c 0.85 && i \u003c f.sp.length; i += 2) put(buf, f.x + f.sp[i] * a * f.d, f.y + f.sp[i + 1] * a * f.d, 255, 245, 170);\n  }\n  for (const b of S.eb) {\n    const c = BUL[b.c];\n    for (let i = 0; i \u003c 9; i++) if (i % 2 || (b.big && i !== 4)) put(buf, b.x + (i % 3) - 1, b.y + floor(i / 3) - 1, ...c.map((v) => (i % 2 ? v : v * 0.6)));\n    put(buf, b.x, b.y, 255, 255, 255);\n  }\n  for (const p of S.pop) {\n    const a = (t - p.t0) / 0.9;\n    if (a \u003c 0.75 || floor(t * 20) % 2) number(buf, p.v, round(p.x - String(p.v).length * 2), round(p.y - a * 9), 255, 240, 120);\n  }\n  if (t - S.bomb \u003c 1) ring(buf, P.x, P.y, (t - S.bomb) * 150, 1.6, [200, 250, 255]);\n  for (let i = 0; S.flash > 0 && i \u003c N * 3; i++) buf[i] += (255 - buf[i]) * min(1, S.flash) * 0.85;\n  for (let i = 0; i \u003c 7 * W; i++) if (i % W \u003c 26 || i % W >= 50) mix(buf, i * 3, 0, 0, 0, 0.82);\n  number(buf, String(S.score % 1e6).padStart(6, \"0\"), 1, 1, 255, 255, 255);\n  number(buf, \"AAA\", 52, 1, 220, 228, 240);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","layer":{"id":"layer-shoot-em-up","type":"code","name":"shoot-em-up","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shoot 'em Up\n// Family:  pixel\n// Idea:    An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the vertically scrolling arcade shooters of the 1980s\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1\n//\n// Knob 1: Stage. Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars.\n// Knob 2: Speed. The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in.\n// Knob 3: Waves. From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats.\n// Knob 4: Bullets. How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read.\n// Buttons: K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, abs, atan2, hypot, floor, round, sqrt, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = (a, b) => a + (b - a) * Math.random();\n// Ground scroll at Speed 2 in LEDs a second; clouds go 1.8 times as fast.\nconst V0 = 12, CLOUD = 1.8;\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), u = (x -= ix) * x * (3 - 2 * x), v = (y -= iy) * y * (3 - 2 * y);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\n\n// Ground types, one colour each in every stage's palette.\nconst [DEEP, WAVE, CAP, SHAL, SAND, GRASS, TREE, FLDA, FLDB, ROAD, ROOF, WALL, TRUNK, RIVER, LIGHT, HEDGE] = [...Array(16).keys()];\nconst PALS = [\n  \"123c9a1e5cc4d2ecff2aa8ccf0d4884aae3c1f6a2a9ccc4a6e9a3076706ad8482ef2e6c88a5a2a2c7ed8fff2c02e5226\",\n  \"5c20188a3a22d8966ab4502af0b464dc9a4c4a8a3cf2c278c8843e6e4630c8602ef6dcaa5a34182aa89affe6aa7a2c1a\",\n  \"0c1846172a628ca8e61c386a50506a163e340e2c2440446a2a2c481e1e30b43c96ffd25a2e222412265effa83c1c1c2c\",\n  \"08061c1e0e40e6e6ff34185e9a90885a62804c4440868ca8464c661c2034ff3c3cb8c2d83c343228dcff78ffc82a2e40\",\n].map((s) => s.match(/../g).map((h) => parseInt(h, 16)));\n// Clouds per stage: colour, underside shade, alpha, shadow shade.\nconst CLOUDS = [\n  [236, 242, 255, 0.74, 0.72, 0.62],\n  [236, 200, 156, 0.78, 0.6, 0.7],\n  [84, 96, 146, 0.7, 0.66, 0.72],\n  [150, 76, 214, 0.6, 0.5, 1],\n];\n\n// Sprites are rows of letters, \".\" clear; a mirrored one is its left half.\nfunction mk(src, pal, mirror) {\n  const rows = src.trim().split(/\\s+/), w = rows[0].length * (mirror ? 2 : 1), px = [], mask = new Uint8Array(w * rows.length);\n  rows.forEach((r, j) => {\n    for (let i = 0; i \u003c r.length; i++)\n      if (r[i] !== \".\") for (const x of mirror ? [i, w - 1 - i] : [i]) px.push(x, j, pal[r[i]]), (mask[j * w + x] = 1);\n  });\n  return { px, mask };\n}\nconst PLAYER = mk(\"....w.... ...wcw... ...wbw... ..gwbwg.. ..gwwwg.. .wgwwwgw. wwwwgwwww rww.g.wwr r..www..r ...r.r...\", { w: 0xdce4f0, c: 0x96f0ff, b: 0x286ee6, g: 0x828ca0, r: 0xe62832 });\nconst FIGHTER = mk(\"o.....o oo.d.oo ooodooo .odwdo. ..ddd.. ...d...\", { o: 0xff8c1e, d: 0xaa3214, w: 0xfff0c8 });\nconst DART = mk(\"mm...mm mmm.mmm .mmmmm. .mmcmm. ..mmm.. ..mdm.. ...m...\", { m: 0xd246e6, c: 0x78f0ff, d: 0x6e1e8c });\nconst BOAT = mk(\".kkkkk. kbbbbbk kbaaabk kbaaabk kbbbbbk kbbbbbk kbaaabk kbbbbbk .kbbbk. .kbbbk. ..kbk.. ...k...\", { k: 0x1e2028, b: 0x969baa, a: 0x5a5f6e });\n// The boss, 56 wide; \"e\" is its glowing core.\nconst BOSS = mk(\n  `\n.............kkgggk..kkkkkkk\nkk...........kacccc..kbbbbbb\nkykkk........kabbbc..kbbrrbb\nkybbbkkk.....kabbbc..kbbrrbb\nkbbbbbbbkk...kabbbc..kbbbbbb\nkbbbbbbbbbkkkbabbbc..kbbbbbb\nkbbrrrbbbbbbbbabbbc..kbbbkkk\nkaarrrrrrbbbbbabbbc..kbbbkee\nkccabbrrrrrrbbabbbckkbbbbkee\n.kkcaabgggrrrrabbbcbbbbbbkee\n...kcaagygbbrrrrrrbbbbbbbkee\n....kacgggbbbbbrrrrrrbbbbkee\n......kkcaabbbbbbbrrrbbbbkee\n........kacaaabgggbbbbbbbkee\n.........kkccabgygbbbbbbbkee\n...........kkaagggbbbbbbbkee\n.............kccaabbbbbbbkkk\n..............kkccabbbbbbbbb\n................kkcaabbbbbbb\n..................kccbbyybbb\n...................kkabbbbbb\n.....................kabbbbb\n.....................kcbbbbb\n......................kabbbb\n.......................kabbg\n.......................kcbbg\n........................kabg\n.........................kag\n.........................kcg\n..........................kg`,\n  { k: 0x14141e, c: 0x464a60, a: 0x787e96, b: 0xb4bacc, r: 0xdc323c, y: 0xffd646, g: 0x2c2c38, e: -1 },\n  true,\n);\nconst PALM = \"t.t.t .ttt. ttktt .ttt. t.t.t\".split(\" \");\n// 3x5 digits, a P, and a ship for the lives; one octal digit per row.\nconst GLYPH = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717, 0o75744, 0o22775];\nconst BUL = [\n  [255, 70, 170],\n  [70, 220, 255],\n  [255, 170, 40],\n];\n\n// The map repeats every 1024 rows: sea, coast, fields, town, river, coast. -1 is sea, 1 land.\nfunction profile(x, wy) {\n  const v = (wy % 1024) + 0.3 * (x - 32);\n  return v \u003c 250 || v > 830 ? -1 : v \u003c 290 ? (v - 270) / 20 : v \u003c 790 ? 1 : (810 - v) / 20;\n}\nconst ISL = {};\nfunction islands(sd, x, wy) {\n  let best = 0;\n  for (let j = floor(wy / 44) - 1, j1 = j + 2; j \u003c= j1; j++)\n    for (let i = floor(x / 32) - 1, i1 = i + 2; i \u003c= i1; i++) {\n      const ix = i * 32 + 4 + hash(i, j, sd + 2) * 24, iy = j * 44 + 6 + hash(i, j, sd + 3) * 32, r = 12 + hash(i, j, sd + 4) * 10;\n      const b = 1.9 * (1 - hypot(x - ix, wy - iy) / r);\n      if (b > best && hash(i, j, sd + 1) \u003c 0.7) ((best = b), (ISL.x = ix), (ISL.y = iy), (ISL.r = r));\n    }\n  return best;\n}\nfunction terrain(sd, x, wy) {\n  const pr = profile(x, wy);\n  let e = pr + 0.5 * (noise(x / 11, wy / 11, sd) - 0.5) + 0.24 * (noise(x / 4.5, wy / 4.5, sd + 9) - 0.5);\n  if (pr \u003c 0) e += islands(sd, x, wy) * min(1, -pr);\n  if (e \u003c -0.08) {\n    if (e > -0.12) return CAP;\n    if (e > -0.21) return SHAL;\n    const cx = x >> 3, cy = floor(wy / 5), h = hash(cx, cy, sd + 21), c0 = cx * 8 + floor(hash(cx, cy, sd + 22) * 6);\n    if (h \u003c 0.4 && wy === cy * 5 + floor(hash(cx, cy, sd + 23) * 4) && x >= c0 && x \u003c c0 + (h \u003c 0.15 ? 3 : 2)) return CAP;\n    return e > -0.36 || noise(x / 6, wy / 2, sd + 5) > 0.78 ? WAVE : DEEP;\n  }\n  if (e \u003c 0.08) return SAND;\n  if (pr \u003c -0.5) {\n    const dx = round(x - ISL.x), dy = round(wy - ISL.y), c = ISL.r > 13 && abs(dx) \u003c= 2 && abs(dy) \u003c= 2 ? PALM[dy + 2][dx + 2] : \".\";\n    return c === \".\" ? GRASS : c === \"k\" ? TRUNK : TREE;\n  }\n  const u = wy % 1024, dr = abs(x - 30 - 9 * sin(wy / 70));\n  if (u > 560 && u \u003c 770) {\n    const a = (u - 560) / 34, dv = abs(x - 32 - 23 * sin(a)) / sqrt(1 + (0.68 * cos(a)) ** 2);\n    if (dv \u003c 4.4) return dr \u003c 2.6 ? (dr > 1.6 ? WALL : ROAD) : dv \u003c 3.3 ? RIVER : SAND;\n  }\n  if (dr \u003c 1.6) return dr \u003c 0.6 && wy % 6 \u003c 3 ? LIGHT : ROAD;\n  if (u > 420 && u \u003c 510 && dr \u003c 22 + 6 * sin(wy / 9)) {\n    // The town: in each plot a house (roof, front wall, shadow) or a tree.\n    const lx = (x + 4) % 9, ly = wy % 9;\n    if (lx === 0 || ly === 0) return ROAD;\n    if (hash(floor((x + 4) / 9), floor(wy / 9), sd + 41) > 0.6) return hypot(lx - 4.5, ly - 4.5) \u003c 2.7 ? TREE : GRASS;\n    if (lx >= 2 && lx \u003c= 6 && ly >= 2) return ly === 2 ? WALL : ly > 7 ? GRASS : lx === 4 ? TRUNK : ROOF;\n    return (lx === 7 && ly >= 2 && ly \u003c= 6) || (ly === 1 && lx >= 3) ? HEDGE : GRASS;\n  }\n  const band = floor(wy / 14), gx = x + floor(hash(band, 0, sd + 51) * 16), h = hash(floor(gx / 16), band, sd + 52);\n  if (gx % 16 === 0 || wy % 14 === 0) return h \u003c 0.6 ? HEDGE : GRASS;\n  const kind = floor(h * 4);\n  if (kind \u003c 3) return (kind ? (kind > 1 ? hash(gx, wy, sd + 53) \u003c 0.12 : gx % 3 === 0) : wy % 3 === 0) ? FLDB : FLDA;\n  const tx = floor(gx / 5), ty = floor(wy / 5);\n  return hypot(gx - tx * 5 - 1 - hash(tx, ty, sd + 55) * 3, wy - ty * 5 - 1 - hash(tx, ty, sd + 56) * 3) \u003c 1.9 ? TREE : GRASS;\n}\n// A cloud: puffs on a flat base, 2 its body and 1 its underside.\nfunction newCloud(S, cw) {\n  const w = floor(rnd(22, 40)), h = floor(rnd(10, 16)), n = 3 + floor(w / 9), P = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = h * 0.5 * (0.5 + 0.5 * sin((PI * (i + 0.5)) / n)) + rnd(-0.6, 0.8);\n    P.push((w * (i + 0.5)) / n + rnd(-1.5, 1.5), h - 1.5 - r * 0.55, r);\n  }\n  const inn = (x, y) => x >= 0 && y >= 0 && x \u003c w && y \u003c= h - 1.5 && P.some((_, i) => i % 3 === 0 && hypot(x + 0.5 - P[i], y + 0.5 - P[i + 1]) \u003c P[i + 2]);\n  const m = new Uint8Array(w * h);\n  for (let y = 0; y \u003c h; y++) for (let x = 0; x \u003c w; x++) if (inn(x, y)) m[y * w + x] = inn(x, y + 2) ? 2 : 1;\n  S.clouds.push({ x: floor(rnd(-14, 56 - w / 2)), cw: cw + h, w, h, m });\n}\nfunction fill(S) {\n  for (const top = floor(S.scroll) + H + 24; S.gen \u003c top; S.gen++) for (let x = 0; x \u003c W; x++) S.ter[(S.gen & 255) * W + x] = terrain(S.sd, x, S.gen);\n  const cb = floor(S.scroll * CLOUD);\n  for (; S.cnext \u003c cb + H + 20; S.cnext += floor(rnd(24, 52))) newCloud(S, S.cnext);\n  S.clouds = S.clouds.filter((c) => cb + H - 1 - c.cw \u003c H);\n}\n\nexport function setup(params) {\n  const S = { t: 0, scroll: 85, gen: 83, cnext: 147, sd: floor(Math.random() * 9000), ter: new Uint8Array(256 * W), cb: new Uint8Array(N), buf: new Float32Array(N * 3), sh: new Float32Array(N) };\n  Object.assign(S, { clouds: [], en: [], boats: [], eb: [], ps: [], fx: [], pop: [], caps: [], bossAt: 3.2, bossN: 0, waveAt: 0.4, waveN: 0, boatAt: 0.2, kills: 0, score: 0, flash: 0 });\n  S.pl = { x: 32, y: 112, lvl: 0, lvlT: 0, ft: 0 };\n  fill(S);\n  params.s = S;\n}\n\nfunction shoot(S, x, y, a, v, c, big) {\n  if (S.eb.length \u003c 380) S.eb.push({ x, y, vx: cos(a) * v, vy: sin(a) * v, c, big });\n}\nfunction fan(S, x, y, m, gap, v) {\n  const g = atan2(S.pl.y - y, S.pl.x - x);\n  for (let i = 0; i \u003c m; i++) shoot(S, x, y, g + (i - (m - 1) / 2) * gap, v, 2, 0);\n}\nfunction boom(S, x, y, s) {\n  const sp = [];\n  for (let i = 0; i \u003c 4 + s * 3; i++) {\n    const a = rnd(0, 6.283);\n    sp.push(cos(a) * rnd(20, 50) * s, sin(a) * rnd(20, 50) * s);\n  }\n  S.fx.push({ x, y, t0: S.t, s, sp, d: 0.45 + 0.12 * s });\n}\nfunction score(S, x, y, v) {\n  S.pop.push({ x, y, v, t0: S.t });\n  S.score += v;\n}\n// A hit; a kill leaves an explosion, its score, and every ninth a capsule.\nfunction hurt(S, e, n, x, y) {\n  e.fl = 0.06;\n  if ((e.hp -= n) > 0) return;\n  boom(S, x, y, e.boat ? 1.3 : 1);\n  score(S, x, y - 4, e.boat ? 300 : e.k ? 150 : 100);\n  if (++S.kills % 9 === 0) S.caps.push({ x, y });\n}\nconst boatY = (S, b) => floor(S.scroll) + H - 1 - round(b.wy);\nconst yOf = (S, e) => (e.boat ? boatY(S, e) : e.y);\n\nfunction spawn(S) {\n  const w = S.waves;\n  if (S.t >= S.waveAt) {\n    const n = S.waveN++, m = 4 + round(w);\n    if (n % 2 === 0) {\n      const o = { k: 0, side: n % 4 ? -1 : 1, y0: rnd(8, 30) };\n      for (let i = 0; i \u003c m; i++) S.en.push({ ...o, born: S.t + i * 0.3, x: -99, y: -99, hp: 6 });\n    } else {\n      const cx = rnd(24, 40);\n      for (let i = 0; i \u003c (m | 1); i++) {\n        const r = (i + 1) >> 1;\n        S.en.push({ k: 1, born: S.t, x: cx + (i & 1 ? r : -r) * 6, y: -8 - r * 6, hy: 34 - r * 6, st: 0, hp: 7, hold: 0.5 + r * 0.25 + rnd(0, 0.2) });\n      }\n    }\n    S.waveAt = S.t + (n === 0 ? 0.45 : S.boss ? 2 : 1) * (3.3 / w ** 0.75);\n  }\n  if (S.t \u003c S.boatAt) return;\n  // A gunboat, where its hull fits on open water.\n  const wy = floor(S.scroll) + H + 8;\n  S.boatAt = S.t + 0.3;\n  for (let n = 0; n \u003c 6; n++) {\n    const x = floor(rnd(6, 58));\n    let ok = true;\n    for (let j = -7; j \u003c= 7; j += 2) for (let i = -4; i \u003c= 4; i += 2) ok &&= S.ter[((wy + j) & 255) * W + x + i] \u003c= CAP;\n    if (ok) return S.boats.push({ boat: 1, x, wy, hp: 10, ft: rnd(0.6, 1.6) }), (S.boatAt += rnd(1.1, 2.7) / w ** 0.7);\n  }\n}\n\nfunction stepEnemies(S, d) {\n  const f = S.fury;\n  for (const e of S.en) {\n    const a = S.t - e.born;\n    e.fl -= d;\n    if (a \u003c 0) continue;\n    if (e.k === 0) {\n      e.x = e.side > 0 ? -6 + 38 * a : 70 - 38 * a;\n      e.y = e.y0 + 14 * a + 13 * sin(3.2 * a);\n    } else if (e.st === 0) {\n      if ((e.y += 50 * d) >= e.hy) ((e.st = 1), (e.t1 = S.t));\n    } else if (e.st === 1) {\n      if (S.t - e.t1 > e.hold) {\n        const g = atan2(S.pl.y - e.y, S.pl.x - e.x);\n        ((e.st = 2), (e.vx = cos(g) * 30), (e.vy = sin(g) * 30));\n        if (Math.random() \u003c 0.35 + 0.65 * f) fan(S, e.x, e.y + 3, 1 + 2 * round(f * 1.5), 0.25, 42);\n      }\n    } else {\n      const k = min(130, hypot(e.vx, e.vy) + 110 * d) / hypot(e.vx, e.vy);\n      e.x += (e.vx *= k) * d;\n      e.y += (e.vy *= k) * d;\n    }\n  }\n  S.en = S.en.filter((e) => e.hp > 0 && e.y \u003c 140 && e.x > -20 && e.x \u003c 84);\n  for (const b of S.boats) {\n    const sy = boatY(S, b);\n    b.fl -= d;\n    b.a = atan2(S.pl.y - sy + 3, S.pl.x - b.x);\n    if ((b.ft -= d) \u003c= 0 && sy > 2 && sy \u003c 96) {\n      b.ft = 2.2 - 1.3 * f;\n      for (let i = f > 0.5 ? -1 : 0; i \u003c= (f > 0.5 ? 1 : 0); i++) shoot(S, b.x + cos(b.a) * 4, sy - 3 + sin(b.a) * 4, b.a + i * 0.25, 38, 2, 0);\n    }\n  }\n  S.boats = S.boats.filter((b) => b.hp > 0 && boatY(S, b) \u003c 140);\n}\n\nfunction stepBoss(S, d) {\n  const f = S.fury;\n  // The first boss is short, so its fight fits the first seconds.\n  if (!S.boss && S.t >= S.bossAt) S.boss = { x: 32, y: -34, t0: S.t, st: 0, hp: S.bossN ? 320 + 40 * S.bossN : 60, ph: S.bossN ? 2.8 : 1.6, ang: 0 };\n  const B = S.boss;\n  if (!B) return;\n  B.fl -= d;\n  if (B.st === 2) {\n    if (!(S.t \u003c B.nd)) {\n      boom(S, B.x + rnd(-22, 22), B.y + rnd(4, 24), rnd(0.7, 1.4));\n      B.nd = S.t + 0.07;\n    }\n    if (S.t - B.t2 > 1.7) {\n      boom(S, B.x, B.y + 12, 3.2);\n      for (let i = 0; i \u003c 6; i++) boom(S, B.x + rnd(-24, 24), B.y + rnd(4, 26), rnd(1, 1.8));\n      score(S, B.x - 6, B.y + 14, 5000);\n      S.caps.push({ x: B.x, y: B.y + 20 });\n      Object.assign(S, { flash: 0.75, boss: null, bossAt: S.t + rnd(18, 30), bossN: S.bossN + 1 });\n    }\n  } else if (B.st === 0) {\n    const u = min(1, (S.t - B.t0) / 1.4);\n    B.y = -34 + 40 * (1 - (1 - u) * (1 - u));\n    if (u >= 1) ((B.st = 1), (B.t1 = S.t));\n  } else {\n    // In turns: a ring, a spiral, aimed fans from the wing guns.\n    B.x = 32 + 3 * sin((S.t - B.t1) * 0.8);\n    const ph = floor((S.t - B.t1) / B.ph) % 3;\n    if (ph === 0 && !(S.t \u003c B.nr)) {\n      const n = floor(12 + 18 * f), a0 = rnd(0, 6.283);\n      B.nr = S.t + 1.5 - 0.8 * f;\n      for (let i = 0; i \u003c n; i++) shoot(S, B.x, B.y + 11, a0 + (i * 2 * PI) / n, 28, 0, 1);\n    }\n    if (ph === 1 && !(S.t \u003c B.nx)) {\n      const arms = f > 0.5 ? 3 : 2;\n      B.nx = S.t + 1 / (7 + 23 * f);\n      B.ang += 0.37;\n      for (let i = 0; i \u003c arms; i++) shoot(S, B.x, B.y + 11, B.ang + (i * 2 * PI) / arms, 32, 1, 0);\n    }\n    if (ph === 2 && !(S.t \u003c B.nf)) {\n      B.nf = S.t + 1.05 - 0.55 * f;\n      for (const s of [-1, 1]) fan(S, B.x + s * 19.5, B.y + 10, 3 + round(6 * f), 0.12 + 0.1 * f, 42);\n    }\n  }\n}\n\nfunction stepPlayer(S, d) {\n  const P = S.pl, B = S.boss;\n  if ((P.lvlT -= d) \u003c= 0 && P.lvl > 0) ((P.lvl -= 1), (P.lvlT = 14));\n  // Its aim: the boss, a capsule, or half way from its weave to the nearest enemy.\n  const wv = 32 + 18 * sin(S.t * 0.53);\n  let ax = wv, ny = -99;\n  if (B && B.st > 0) ax = B.x + 10 * sin(S.t * 1.1);\n  else if (S.caps.length) ax = S.caps[0].x;\n  else for (const e of [...S.en, ...S.boats]) if (yOf(S, e) > max(0, ny) && yOf(S, e) \u003c P.y - 14) ((ny = yOf(S, e)), (ax = 0.55 * e.x + 0.45 * wv));\n  // Then the nearby spot the bullets will miss on its way there.\n  let best = 1e9, bx = P.x, by = P.y;\n  for (const ox of [-14, -9, -5, -2, 0, 2, 5, 9, 14])\n    for (const oy of [-8, -3, 0, 4]) {\n      const cx = clamp(P.x + ox, 5, 58), cy = clamp(P.y + oy, 96, 116), dist = max(0.01, hypot(cx - P.x, cy - P.y));\n      let c = 0.05 * abs(cx - ax) + 0.04 * abs(cy - 111) + 0.015 * dist;\n      for (const b of S.eb)\n        for (const tau of abs(b.y - cy) \u003c 45 ? [0.05, 0.12, 0.2, 0.3, 0.42] : []) {\n          const k = min(1, (60 * tau) / dist), dx = b.x + b.vx * tau - P.x - (cx - P.x) * k, dy = b.y + b.vy * tau - P.y - (cy - P.y) * k;\n          c += max(0, 30 - dx * dx - 0.7 * dy * dy) / (tau \u003c 0.15 ? 6 : 15);\n        }\n      if (c \u003c best) ((best = c), (bx = cx), (by = cy));\n    }\n  P.x += clamp(bx - P.x, -60 * d, 60 * d);\n  P.y += clamp(by - P.y, -60 * d, 60 * d);\n  // Two streams, three after a capsule, five after two.\n  for (P.ft -= d; P.ft \u003c= 0; P.ft += 0.1)\n    for (const [x, vx] of [[-2, 0], [2, 0], [0, 0], [-3, -38], [3, 38]].slice(0, [2, 3, 5][P.lvl])) S.ps.push({ x: P.x + x, y: P.y - 5, vx, vy: -170 });\n}\n\nfunction stepShots(S, d) {\n  const B = S.boss, P = S.pl;\n  for (const s of S.ps) {\n    s.x += s.vx * d;\n    s.y += s.vy * d;\n    if (s.y \u003c -4) s.dead = 1;\n    for (const e of [...S.en, ...S.boats]) if (!s.dead && e.hp > 0 && abs(s.x - e.x) \u003c= 4 && abs(s.y - yOf(S, e)) \u003c= (e.boat ? 6 : 4)) ((s.dead = 1), hurt(S, e, 1, e.x, yOf(S, e)));\n    const ix = round(s.x - B?.x + 28), iy = round(s.y - B?.y);\n    if (!s.dead && B?.st === 1 && ix >= 0 && ix \u003c 56 && iy >= 0 && iy \u003c 30 && BOSS.mask[iy * 56 + ix]) ((s.dead = 1), (B.fl = 0.05), (S.score += 10), --B.hp);\n  }\n  // A bullet that reaches the fighter bursts on its shield.\n  for (const b of S.eb) {\n    b.x += b.vx * d;\n    b.y += b.vy * d;\n    if (b.x \u003c -3 || b.x > 66 || b.y \u003c -3 || b.y > 130) b.dead = 1;\n    else if (abs(b.x - P.x) \u003c 1.6 && abs(b.y - P.y) \u003c 2.5) ((b.dead = 1), boom(S, b.x, b.y, 0.4));\n  }\n  if (B?.st === 1 && B.hp \u003c= 0) ((B.st = 2), (B.t2 = S.t), (S.eb.length = 0));\n  for (const c of S.caps) {\n    c.y += 14 * d;\n    if (abs(c.x - P.x) \u003c 6 && abs(c.y - P.y) \u003c 7) ((c.dead = 1), (P.lvl = min(2, P.lvl + 1)), (P.lvlT = 16));\n  }\n  for (const k of [\"ps\", \"eb\", \"caps\"]) S[k] = S[k].filter((o) => !o.dead && o.y \u003c 134);\n  S.fx = S.fx.filter((f) => S.t - f.t0 \u003c f.d);\n  S.pop = S.pop.filter((p) => S.t - p.t0 \u003c 0.9);\n}\n\nfunction step(S, d) {\n  S.t += d;\n  S.scroll += V0 * d;\n  S.flash = max(0, S.flash - 2.6 * d);\n  fill(S);\n  spawn(S);\n  stepEnemies(S, d);\n  stepBoss(S, d);\n  stepPlayer(S, d);\n  stepShots(S, d);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.stage, S.waves, S.fury] = [clamp(k[0], 0, 1), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  // The first second plays before the first frame.\n  if (!S.started) {\n    S.started = 1;\n    for (let i = 0; i \u003c 30; i++) step(S, 1 / 30);\n  }\n  // The bomb clears the bullets and hurts everything on the screen.\n  if (input.btnPressed?.[0]) {\n    Object.assign(S, { flash: 0.9, bomb: S.t, eb: [] });\n    for (const e of [...S.en, ...S.boats]) if (e.hp > 0 && yOf(S, e) > 0) hurt(S, e, 4, e.x, yOf(S, e));\n    if (S.boss?.st === 1) S.boss.hp -= 15;\n  }\n  for (let d = (clamp(dt || 0, 0, 0.1) * clamp(k[1], 0.2, 3)) / 2; d > 0; d -= 1 / 30) step(S, min(d, 1 / 30));\n}\n\nfunction put(buf, x, y, r, g, b) {\n  const q = (round(y) * W + round(x)) * 3;\n  if (x > -0.5 && y > -0.5 && x \u003c W - 0.5 && y \u003c H - 0.5) ((buf[q] = r), (buf[q + 1] = g), (buf[q + 2] = b));\n}\nfunction mix(buf, q, r, g, b, a) {\n  buf[q] += (r - buf[q]) * a;\n  buf[q + 1] += (g - buf[q + 1]) * a;\n  buf[q + 2] += (b - buf[q + 2]) * a;\n}\n// Mode 1 draws a sprite white, 2 stamps its shadow.\nfunction spr(S, sp, x0, y0, mode, glow) {\n  const p = sp.px;\n  for (let i = 0; i \u003c p.length; i += 3) {\n    const x = x0 + p[i], y = y0 + p[i + 1], c = mode ? 0xffffff : p[i + 2];\n    if (mode === 2) {\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) S.sh[y * W + x] = min(S.sh[y * W + x], 0.55);\n    } else if (c \u003c 0) put(S.buf, x, y, ...glow);\n    else put(S.buf, x, y, c >> 16, (c >> 8) & 255, c & 255);\n  }\n}\nfunction number(buf, v, x0, y0, r, g, b) {\n  const s = String(v);\n  for (let n = 0; n \u003c s.length; n++)\n    for (let j = 0; j \u003c 15; j++) if ((GLYPH[\"0123456789PA\".indexOf(s[n])] >> (14 - j)) & 1) put(buf, x0 + n * 4 + (j % 3), y0 + floor(j / 3), r, g, b);\n}\n// A ring of width w, or a disc for w 0.\nfunction ring(buf, cx, cy, R, w, c) {\n  for (let y = floor(cy - R - w); y \u003c= cy + R + w; y++)\n    for (let x = floor(cx - R - w); x \u003c= cx + R + w; x++) if (w ? abs(hypot(x - cx, y - cy) - R) \u003c w : hypot(x - cx, y - cy) \u003c= R) put(buf, x, y, ...c);\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { buf, sh, cb, pl: P, boss: B, t } = S,\n    si = min(3, floor(S.stage * 4)), pal = PALS[si];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, wy = floor(S.scroll) + H - 1 - y; x \u003c W; x++) {\n      let k = S.ter[(wy & 255) * W + x];\n      if (k === CAP && (t * 1.6 + hash(x, wy, 3) * 4) % 2 > 1.55) k = WAVE;\n      put(buf, x, y, pal[k * 3], pal[k * 3 + 1], pal[k * 3 + 2]);\n      if (si === 2 && k === FLDA && (x + wy) % 2 === 0 && hash(x, wy, 5) \u003c 0.4) put(buf, x, y, 255, 214, 110);\n      const h = si === 3 && k === DEEP ? hash(x, wy, 6) : 1;\n      if (h \u003c 0.035) put(buf, x, y, ...Array(3).fill(90 + 4600 * h * (0.7 + 0.3 * sin(t * 4 + x * y))));\n    }\n  for (const b of S.boats) {\n    const y = boatY(S, b);\n    spr(S, BOAT, b.x - 3, y - 6, b.fl > 0 ? 1 : 0);\n    for (let i = 1; i \u003c= 3; i++) put(buf, b.x + cos(b.a) * i, y - 3 + sin(b.a) * i, 30, 30, 40);\n  }\n  // Shadows, then the clouds. Thick fire dims the ground as bullet-hell games do.\n  const C = CLOUDS[si];\n  cb.fill(0);\n  for (const c of S.clouds)\n    for (let j = 0, sy = floor(S.scroll * CLOUD) + H - 1 - c.cw; j \u003c c.h; j++)\n      for (let i = 0, x = c.x, y = sy + j; i \u003c c.w; i++, x++) if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && c.m[j * c.w + i]) cb[y * W + x] = c.m[j * c.w + i];\n  for (let i = 0; i \u003c N; i++) sh[i] = (i % W >= 6 && i >= 9 * W && cb[i - 9 * W - 6] ? C[5] : 1) * (1 - 0.36 * S.fury);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) + 2, round(e.y) + 6, 2);\n  if (B) spr(S, BOSS, round(B.x) - 22, round(B.y) + 9, 2);\n  spr(S, PLAYER, round(P.x) + 1, round(P.y) + 3, 2);\n  for (let i = 0; i \u003c N; i++) {\n    const l = cb[i], k = l === 1 ? C[3] : 1;\n    mix(buf, i * 3, 0, 0, 0, 1 - sh[i]);\n    if (l) mix(buf, i * 3, C[0] * k, C[1] * k, C[2] * k, C[4]);\n  }\n  for (const c of S.caps) ring(buf, c.x, c.y, 2.9, 0, floor(t * 7) % 2 ? [230, 40, 50] : [40, 90, 240]), number(buf, \"P\", c.x - 1, c.y - 2, 255, 255, 255);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) - 3, round(e.y) - 3, e.fl > 0 ? 1 : 0);\n  // The boss's core pulses cyan, or red as the fury rises.\n  const f = S.fury, p = 0.5 + 0.5 * sin(t * 9);\n  if (B) spr(S, BOSS, round(B.x) - 28, round(B.y), (B.st === 2 ? floor(t * 16) % 2 : B.fl > 0 && floor(t * 20) % 4 === 0) ? 1 : 0, [120 + 135 * f + 60 * p, 230 - 170 * f + 25 * p * (1 - f), 255 - 215 * f]);\n  for (const ex of [3, 5])\n    for (let j = 0, L = 2 + ((t * 24 + ex) % 3 | 0), c; j \u003c L; j++) put(buf, round(P.x) - 4 + ex, round(P.y) + 5 + j, 255 - 12 * (c = min(3, j + (L \u003c 3))) * c, 255 - 65 * c, 220 - 70 * c);\n  spr(S, PLAYER, round(P.x) - 4, round(P.y) - 5, 0);\n  for (const s of S.ps) for (let j = 0; j \u003c 3; j++) put(buf, s.x, s.y + j, 255, 255 - 28 * j, 230 - 85 * j);\n  // Explosions: a white flash, a ring cooling from yellow to red, sparks.\n  for (const f of S.fx) {\n    const a = (t - f.t0) / f.d, R = (1.5 + 4.5 * a) * f.s;\n    if (a \u003c 0.16) ring(buf, f.x, f.y, (1 + 10 * a) * f.s, 0, [255, 255, 235]);\n    else if (a \u003c 0.5) ring(buf, f.x, f.y, R * 0.5, 0, [255, a \u003c 0.3 ? 210 : 120, 40]);\n    if (a >= 0.16) ring(buf, f.x, f.y, R, 0.75, a \u003c 0.45 ? [255, 220, 80] : a \u003c 0.72 ? [255, 130, 30] : [180, 46, 24]);\n    for (let i = 0; a \u003c 0.85 && i \u003c f.sp.length; i += 2) put(buf, f.x + f.sp[i] * a * f.d, f.y + f.sp[i + 1] * a * f.d, 255, 245, 170);\n  }\n  for (const b of S.eb) {\n    const c = BUL[b.c];\n    for (let i = 0; i \u003c 9; i++) if (i % 2 || (b.big && i !== 4)) put(buf, b.x + (i % 3) - 1, b.y + floor(i / 3) - 1, ...c.map((v) => (i % 2 ? v : v * 0.6)));\n    put(buf, b.x, b.y, 255, 255, 255);\n  }\n  for (const p of S.pop) {\n    const a = (t - p.t0) / 0.9;\n    if (a \u003c 0.75 || floor(t * 20) % 2) number(buf, p.v, round(p.x - String(p.v).length * 2), round(p.y - a * 9), 255, 240, 120);\n  }\n  if (t - S.bomb \u003c 1) ring(buf, P.x, P.y, (t - S.bomb) * 150, 1.6, [200, 250, 255]);\n  for (let i = 0; S.flash > 0 && i \u003c N * 3; i++) buf[i] += (255 - buf[i]) * min(1, S.flash) * 0.85;\n  for (let i = 0; i \u003c 7 * W; i++) if (i % W \u003c 26 || i % W >= 50) mix(buf, i * 3, 0, 0, 0, 0.82);\n  number(buf, String(S.score % 1e6).padStart(6, \"0\"), 1, 1, 255, 255, 255);\n  number(buf, \"AAA\", 52, 1, 220, 228, 240);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stage","min":0,"max":1,"about":"Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in."},{"name":"Waves","min":1,"max":5,"about":"From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats."},{"name":"Bullets","min":0,"max":1,"about":"How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read."}],"start":[0,2,1,0.06],"measures":{"motion":1.2251,"detail":0.0672,"edges":0.7429,"complexity":0.308,"coverage":0.995,"colour":0.3654,"drift":0.1128},"knobResponse":[0.2583,0.2156,0.0612,0.0985]},{"slug":"shoreline","title":"Shoreline","family":"ocean","round":17,"note":"드론으로 곧장 내려다본 해변이에요. 비스듬히 밀려온 너울이 모래톱 위에서 하얗게 부서지고 골에서 다시 일어나 기슭에서 한 번 더 부서진 뒤, 레이스 같은 거품 끝을 단 채 모래를 타고 올라갔다 물러나며 젖은 모래의 어두운 윤기를 남겨요.","idea":"A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","layer":{"id":"layer-shoreline","type":"code","name":"shoreline","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds."},{"name":"Height","min":1,"max":3,"about":"Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white."},{"name":"Tide","min":-1,"max":1,"about":"At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore."}],"start":[0,2,1,0.06],"measures":{"motion":0.1312,"detail":0.0226,"edges":0.2179,"complexity":0.5021,"coverage":1,"colour":0.3833,"drift":0.0432},"knobResponse":[0.2028,0.0707,0.0565,0.1108]},{"slug":"skein","title":"Skein","family":"bird","round":23,"note":"해 진 뒤 하늘을 올려다보면 기러기 떼가 V 자로 패널 위쪽, 북쪽으로 날아가요. 지친 선두가 한쪽 줄로 물러나면 다른 기러기가 앞에 서고, 커다란 보름달 앞을 지날 때는 새카만 실루엣이 돼요. 뒤따라온 작은 떼가 꼬리에 붙기도 해요.","idea":"Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.","buttons":"K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.","code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","layer":{"id":"layer-skein","type":"code","name":"skein","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower."},{"name":"Geese","min":7,"max":31,"about":"How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller."},{"name":"Wind","min":-1,"max":1,"about":"A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too."}],"start":[0,2,7,0.06],"measures":{"motion":0.2572,"detail":0.0301,"edges":0.4436,"complexity":1.9214,"coverage":0.9745,"colour":0.3836,"drift":0.0616},"knobResponse":[0.2529,0.0352,0.0331,0.0516]},{"slug":"skydiver","title":"Skydiver","family":"flight","round":25,"note":"강하장 위로 점프기가 지나가며 문에서 다이버들을 내보내요. 다이버들은 구름층을 뚫고 내려가 손을 잡아 고리를 만들었다가 흩어지고, 저마다 색 램에어 캐노피를 펴서 나선을 그리며 들판의 착지 원으로 내려와요. K1 을 끝까지 돌리면 해가 지평선에 걸린 노을 점프가 되고, K1 을 누르면 다음 비행기가 바로 들어와요.","idea":"A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.","buttons":"K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.","code":"// ===== Patternflow pattern =====\n// Title:   Skydiver\n// Family:  flight\n// Idea:    A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after formation skydiving loads at a drop zone\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1\n//\n// Knob 1: Hour. A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light.\n// Knob 2: Speed. At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower.\n// Knob 3: Divers. How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down.\n// Knob 4: Wind. The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you.\n// Buttons: K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the plane's fuselage, the flat base of the cloud deck, the horizon, the landing field.\nconst [PY, DB, HZ, GL] = [8, 30, 101, 118];\n// Depth goes onto the screen at this scale, nearer is lower; canopies are seen flatter.\nconst [ZS, ZC] = [0.55, 0.3];\n// Terminal velocity and the plane's speed in LEDs a second, the target, the windsock, seconds between loads.\nconst [VT, PV, TX, WX, CYCLE] = [8.5, 14, 34, 57, 15];\n// Sky top, middle, horizon; sun; lit and shaded cloud; daylight. Midday to sunset.\nconst KEYS = [\n  [8, 28, 104, 18, 62, 148, 112, 158, 204, 255, 250, 225, 252, 252, 255, 150, 162, 190, 1, 1, 1],\n  [12, 34, 112, 56, 96, 172, 196, 190, 184, 255, 226, 160, 255, 238, 210, 146, 140, 170, 1, 0.92, 0.8],\n  [20, 24, 90, 104, 84, 146, 255, 160, 84, 255, 186, 100, 255, 194, 136, 126, 96, 136, 1, 0.78, 0.58],\n  [12, 12, 50, 96, 46, 104, 255, 104, 44, 255, 136, 56, 255, 136, 96, 82, 54, 92, 0.86, 0.56, 0.42],\n];\nconst CAN = [[255, 30, 60], [255, 214, 0], [20, 110, 255], [255, 50, 190], [80, 235, 40], [255, 120, 0], [0, 220, 235], [150, 60, 255], [245, 245, 245], [255, 80, 80], [20, 190, 110], [255, 160, 200]];\nconst SUIT = [[255, 220, 40], [240, 40, 40], [40, 200, 255], [250, 250, 250], [255, 110, 0], [190, 70, 255], [60, 230, 90], [255, 80, 180]];\nconst HELM = [[250, 250, 250], [30, 30, 36], [255, 200, 0], [230, 40, 40]];\nconst STRIPE = [[200, 30, 40], [20, 70, 170], [230, 150, 0]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = { t: 0, rt: 0, loads: [], next: 0, cx: 0, w: 0, f: F32(N * 3), bg: F32(N * 3), key: -1, top: F32(128), far: F32(128) });\n  // Cumulus along a strip that wraps every 128 columns, each a cluster of round puffs: the deck and the far ones.\n  for (const [T, nc, sz] of [[P.top, 4, 1], [P.far, 6, 0.5]])\n    for (let k = 0; k \u003c nc; k++) {\n      const c = (k * 128) / nc + rnd() * 8, wd = (14 + rnd() * 14) * sz, hm = (5 + rnd() * 7) * sz;\n      for (let j = 0; j \u003c 11; j++) {\n        // Bubbles stacked higher towards the middle of the cloud.\n        const u = rnd() * 2 - 1, r = (2 + rnd() * 3.2) * (sz + 0.3) * 0.75, px = c + u * (wd / 2 - r * 0.5), e = max(0, (hm - r) * (1 - u * u) * (0.5 + 0.5 * rnd()));\n        for (let x = 0; x \u003c 128; x++) {\n          const dx = ((((x - px) % 128) + 192) % 128) - 64;\n          // A round top, and shoulders sloping down to the base.\n          const ax = abs(dx);\n          if (ax \u003c r + e) T[x] = max(T[x], ax \u003c r ? e + Math.sqrt(r * r - dx * dx) : e + r - ax);\n        }\n      }\n    }\n}\n\nconst shuffle = (n) => {\n  const a = [...Array(n).keys()];\n  for (let i = n - 1; i > 0; i--) {\n    const j = floor(rnd() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n};\n\n// A load: the plane runs in against the wind and puts the ring upwind of the target.\nfunction spawn(P, n, btn) {\n  // A big load gets out of the door faster, so every ring has the same time to build.\n  const w = P.w, dir = w >= 0 ? -1 : 1, len = 17 + n, ex = (0.5 + 0.06 * n) / (n - 1), half = ((n - 1) * ex) / 2, x0 = dir \u003c 0 ? 66 : -2;\n  const te0 = btn ? 1.3 : max(1.3, (dir * (31 - 12 * w - x0) + len - 12) / PV - half);\n  const cx = x0 + dir * PV * (te0 + half) - dir * (len - 12), ci = shuffle(CAN.length), si = shuffle(SUIT.length), rk = shuffle(n), lp = shuffle(n);\n  const d = [];\n  for (let i = 0; i \u003c n; i++) {\n    // Exit time, canopy colours (white or a second colour in the middle cells), suit, helmet,\n    // descent rate under canopy, which way the spiral turns, and the spot on the field.\n    d.push({\n      i, te: te0 + i * ex, st: 0, x: 0, y: 0, z: 0, h: 0, g: 0, o: 0, rank: rk[i], can: ci[i], cb: rnd() \u003c 0.5 ? 8 : ci[(i + 5) % 12], suit: si[i % 8], helm: floor(rnd() * 4),\n      zd: rnd() * 2 - 1, k: 2.2 + rnd() * 1.2, om: (rnd() \u003c 0.5 ? -1 : 1) * (0.8 + rnd() * 0.4), lx: TX + (lp[i] / (n - 1) - 0.5) * 26 + rnd() * 2, lz: rnd() * 12 - 4,\n    });\n  }\n  P.loads.push({ t: 0, n, dir, len, x0, te0, cx, px: x0, rot0: rnd() * TAU, rr: 4.6 / sin(PI / n), tb: te0 + 2 * half + 4.2, d, sc: STRIPE[floor(rnd() * 3)] });\n  if (P.loads.length > 4) P.loads.shift();\n}\n\nconst fall = (s) => (s \u003c= 0 ? 0 : VT * (s - (1 - exp(-1.5 * s)) / 1.5));\nconst thr = (s) => (s \u003c= 0 ? 0 : (PV * (1 - exp(-1.4 * s))) / 1.4);\n\nfunction runLoad(P, L, d) {\n  const T = (L.t += d), w = P.w, dir = L.dir, n = L.n;\n  L.px = L.x0 + dir * PV * T;\n  const s0 = T - L.te0, ccx = L.cx + w * 2 * max(0, s0), ccy = PY + 3 + fall(s0 - 0.15), rot = L.rot0 + 0.25 * s0;\n  const hf = atan2(1 - 0.9 * abs(w), -w), cf = cos(hf), sf = sin(hf);\n  for (const D of L.d) {\n    if (!D.st && T >= D.te) (D.st = 1), (D.xd = L.x0 + dir * PV * D.te - dir * (L.len - 6));\n    if (D.st === 1 && T >= L.tb) {\n      // Break-off: where the ring was, frozen, then turn away and track out.\n      const sb = L.tb - L.te0, th = L.rot0 + 0.25 * sb + (TAU * D.i) / n;\n      Object.assign(D, { st: 2, th, bx: L.cx + w * 2 * sb + L.rr * cos(th), bz: L.rr * sin(th), by: PY + 3 + fall(sb - 0.15) });\n    }\n    if (D.st === 1) {\n      const s = T - D.te, th = rot + (TAU * D.i) / n, g = sm(0.4, 2.3, s);\n      D.x = mix(D.xd + dir * thr(s) + w * 2 * s, ccx + L.rr * cos(th), g);\n      D.y = mix(PY + 3 + fall(s), ccy, g);\n      D.z = mix(D.zd, L.rr * sin(th), g);\n      D.h = th + PI;\n      D.g = g;\n    } else if (D.st === 2) {\n      const sb = T - L.tb, out = (10 + 0.6 * n) * (1 - exp(-1.1 * sb));\n      D.x = cl(D.bx + cos(D.th) * out, 2, 61);\n      D.z = D.bz + sin(D.th) * out * 0.6;\n      D.y = D.by + 9.5 * sb;\n      D.h = D.th + PI + PI * sm(0, 0.6, sb);\n      D.g = 0;\n      if (sb >= 0.7 + (1.4 * D.rank) / (n - 1)) Object.assign(D, { st: 3, td: T, yd: D.y, vy: 9.5, ax: D.x, az: D.z, h0: D.h });\n    } else if (D.st === 3) {\n      // Under canopy: open, slow down, spiral in over the field and turn to land.\n      const sc = T - D.td;\n      D.o = min(1, sc / 0.9);\n      D.vy += ((D.y > GL - 5 ? 1.3 : D.o > 0.55 ? D.k : 9.5) - D.vy) * min(1, 5 * d);\n      D.y += D.vy * d;\n      const pr = cl((D.y - D.yd) / (GL - D.yd), 0, 1), fx = D.lx - cf * 8, fz = D.lz - sf * 8;\n      if (pr \u003c 0.8) {\n        const e = sm(0, 0.8, pr), r = 13 * sin(PI * (pr / 0.8)) ** 0.6, h = D.h0 + D.om * sc, sg = D.om > 0 ? 1 : -1;\n        // The wind carries the spiral downwind on the way down, and the last turn brings it back.\n        D.x = mix(D.ax, fx, e) + sg * r * sin(h) + w * 12 * sin(PI * e);\n        D.z = mix(D.az, fz, e) - sg * r * cos(h);\n        const b = sm(0.65, 0.8, pr);\n        D.h = atan2(mix(sin(h), sf, b), mix(cos(h), cf, b));\n      } else {\n        const q = sm(0.8, 1, pr);\n        (D.x = mix(fx, D.lx, q)), (D.z = mix(fz, D.lz, q)), (D.h = hf);\n      }\n      D.x = cl(D.x, 3, 60);\n      D.fl = sm(GL - 5, GL, D.y);\n      if (D.y >= GL) Object.assign(D, { st: 4, tl: T, y: GL, x: D.lx, z: D.lz, h: hf });\n    } else if (D.st === 4 && T - D.tl > 7.5) D.st = 5;\n  }\n}\n\nfunction tick(P, d, n) {\n  P.t += d;\n  P.cx += (3.2 + 9 * P.w) * d;\n  if ((P.next -= d) \u003c= 0) spawn(P, n, 0), (P.next += CYCLE);\n  for (const L of P.loads) runLoad(P, L, d);\n  P.loads = P.loads.filter((L) => L.t \u003c 60 && L.d.some((D) => D.st \u003c 5));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), n = round(cl(k[2], 5, 12));\n  P.w = cl(k[3], -1, 1);\n  P.h = cl(k[0], 0, 1);\n  P.rt += rd;\n  // One load landing, one high under canopy, and the third plane on its run.\n  if (!P.ready) {\n    P.ready = 1;\n    P.next = 1e9;\n    for (const s of [0, 19, 30, 32.5]) {\n      while (P.t \u003c s - 1e-6) tick(P, 1 / 15, n);\n      s \u003c 32 && spawn(P, n, 0);\n    }\n    P.next = CYCLE - 2.5;\n  }\n  if (input.btnPressed && input.btnPressed[0]) spawn(P, n, 1), (P.next = CYCLE);\n  tick(P, d, n);\n}\n\nlet F, LT, K;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1) {\n  const o = at(x, y);\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction seg(x0, y0, x1, y1, c, a = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1;\n  for (let i = 0; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c, a);\n}\nconst lit = (c, k = 1) => [c[0] * LT[0] * k, c[1] * LT[1] * k, c[2] * LT[2] * k];\nconst KC = (i) => [K[i], K[i + 1], K[i + 2]];\n\n// Sky, sun, hills and the drop zone, kept until the hour moves.\nfunction backdrop(P) {\n  const B = P.bg, h = P.h, key = round(h * 300);\n  if (key === P.key) return;\n  P.key = key;\n  const zen = KC(0), mid = KC(3), hor = KC(6), sun = KC(9), sy = mix(-16, 90, sm(0.3, 1, h));\n  const FIELDS = [[74, 124, 44], [112, 140, 52], [150, 146, 72], [60, 104, 48], [126, 112, 64]];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    let c;\n    const hill = HZ - 1.5 - 2.5 * vn(x * 0.09, 50);\n    if (y \u003c hill) {\n      const f = y / HZ, u = f \u003c 0.6 ? sm(0, 1, f / 0.6) : ((f - 0.6) / 0.4) ** 1.6;\n      c = f \u003c 0.6 ? zen.map((v, j) => mix(v, mid[j], u)) : mid.map((v, j) => mix(v, hor[j], u));\n      const ds = Math.hypot(x - 47, (y - sy) * 1.1), g = 0.5 * exp(-ds / 9) + 0.25 * exp(-ds / 30);\n      c = ds \u003c 3.6 ? sun : c.map((v, j) => v + sun[j] * g * (0.4 + 0.6 * h));\n    } else if (y \u003c HZ) {\n      c = lit(hor.map((v, j) => mix(v, [44, 72, 70][j], 0.6)));\n    } else {\n      const zf = y - HZ + 2, gx = ((x - 32) * 24) / zf, gz = 260 / zf;\n      if (y >= 104 && y \u003c= 106) c = y === 105 && (floor(gx / 5) & 3) === 0 ? [220, 220, 220] : [92, 92, 98];\n      else if (y >= 109) c = [70, 150, 48].map((v) => v * (floor(gx / 7) & 1 ? 0.86 : 1));\n      else c = FIELDS[floor(hash(floor(gx / 40 + 60), floor(gz / 22)) * 5)];\n      const e = ((x - TX) / 11) ** 2 + ((y - GL) / 3.6) ** 2;\n      if (e \u003c 1) c = e \u003c 0.07 ? [245, 245, 245] : [204, 182, 132].map((v) => v * (e > 0.6 ? 0.84 : 1));\n      c = lit(c).map((v, j) => mix(v, hor[j], exp(-(zf - 2) / 4) * 0.65));\n    }\n    // The hangar by the runway, its door open.\n    if (x >= 3 && x \u003c= 16 && y \u003c= 105 && y >= 97 + ((x - 9.5) / 6.5) ** 2 * 3) c = lit(x > 6 && x \u003c 13 && y > 100 ? [34, 34, 42] : [196, 196, 204], y \u003c 99 ? 1.08 : 1);\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  }\n}\n\n// The far cumulus sitting on the horizon haze.\nfunction farClouds(P) {\n  const lt = KC(12), sh = KC(15), hor = KC(6);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x * 0.9 + P.cx * 0.6 + 40, i = floor(xx), f = xx - i, hgt = mix(P.far[i & 127], P.far[(i + 1) & 127], f);\n    for (let y = floor(98 - hgt); y \u003c= 98; y++) {\n      const u = (98 - y) / max(1, hgt), c = sh.map((v, j) => mix(mix(v, lt[j], cl(u * 1.3, 0, 1)), hor[j], 0.35));\n      put(x, y, c, cl(y - (98 - hgt) + 0.5, 0, 1) * 0.92);\n    }\n  }\n}\n\n// The deck the divers fall through: domes on top, a flat grey base.\nfunction deck(P) {\n  const lt = KC(12), sh = KC(15);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x + P.cx + 7, i = floor(xx), f = xx - i, hgt = mix(P.top[i & 127], P.top[(i + 1) & 127], f);\n    if (hgt \u003c 0.3) continue;\n    for (let y = floor(DB - hgt); y \u003c= DB; y++) {\n      const u = (DB - y) / max(1, hgt), b = cl(u * 1.15 + (vn(xx * 0.35, y * 0.4) - 0.5) * 0.6, 0, 1);\n      put(x, y, sh.map((v, j) => mix(v, lt[j], b)), cl(y - (DB - hgt) + 0.5, 0, 1) * (y === DB ? 0.7 : 0.95));\n    }\n  }\n}\n\nfunction plane(P, L) {\n  const { len, dir, px } = L, X = (u) => px - dir * (len - u), body = lit([236, 236, 242]), belly = lit([168, 170, 180]), glass = lit([50, 74, 110]), dark = [22, 22, 28];\n  for (let u = -1; u \u003c= len; u += 0.5) {\n    const x = X(u);\n    if (u \u003c 4.5) for (let y = PY - 2 - (u \u003c 2 ? 5 : 5 - (u - 2) * 2); y \u003c PY - 2; y++) put(x, y, body);\n    if (u \u003c 3.5) put(x, PY - 1, belly);\n    if (u \u003c 1) continue;\n    const bot = u \u003c 7 ? PY + 1 - (7 - u) * 0.45 : PY + 1, top = u > len - 3 ? PY - 2 + (u - len + 3) * 0.7 : PY - 2;\n    for (let y = ceil(top); y \u003c= bot; y++) put(x, y, y === PY ? lit(L.sc) : y > PY ? belly : body);\n  }\n  for (let u = 9; u \u003c len - 5; u += 2) put(X(u), PY - 1, glass);\n  put(X(len - 2), PY - 1, glass), put(X(len - 3), PY - 1, glass);\n  for (let u = len * 0.42; u \u003c= len * 0.66; u += 0.5) put(X(u), PY - 3, lit([214, 216, 224]));\n  for (let u = len * 0.6; u \u003c= len * 0.74; u += 0.5) put(X(u), PY - 2, lit([150, 150, 160]));\n  for (let y = PY - 5; y \u003c= PY; y++) put(X(len * 0.77), y, [220, 220, 230], 0.25 + 0.2 * rnd());\n  put(X(len * 0.55), PY + 2, dark), put(X(len - 2), PY + 2, dark);\n  // The door is open on the run in, with the next diver crouched in it.\n  const next = L.d.find((D) => !D.st);\n  if (next && L.t > L.te0 - 1.6) {\n    for (let u = 4.5; u \u003c= 6.5; u += 0.5) for (let y = PY - 1; y \u003c= PY + 1; y++) put(X(u), y, dark);\n    put(X(6), PY, lit(SUIT[next.suit])), put(X(6), PY - 1, lit(HELM[next.helm]));\n  }\n  if ((P.rt * 1.4) % 1 \u003c 0.25) put(X(len * 0.5), PY - 4, [255, 40, 30]);\n}\n\n// A diver in freefall seen from above and behind: spread arms and legs, the rig on the back, the helmet.\nconst bp = (D, a, b) => {\n  const c = cos(D.h) * 1.3, s = sin(D.h) * 1.3;\n  return [D.x + c * a - s * b, D.y + (D.z + s * a + c * b) * ZS];\n};\nfunction diver(D) {\n  const sc = lit(SUIT[D.suit]), ln = (a, b) => seg(...bp(D, ...a), ...bp(D, ...b), sc);\n  for (const m of [-1, 1]) {\n    ln([-0.9, 0.4 * m], [-2.8, 1.6 * m]);\n    if (D.g \u003c 0.97) ln([0.9, 0.8 * m], [2.1, 2.3 * m]);\n  }\n  ln([-0.9, 0], [0.9, 0]), ln([0.9, -0.9], [0.9, 0.9]);\n  put(...bp(D, -0.1, 0), [26, 26, 32]);\n  put(...bp(D, 1.9, 0), lit(HELM[D.helm]));\n}\n\n// A canopy: cells, lines, the jumper in the harness. On the ground it falls in behind the jumper, who gathers it up.\nfunction canopy(D, T) {\n  const sx = D.x, sy = D.y + D.z * ZS, ca = CAN[D.can], cb = CAN[D.cb], down = D.st === 4, sl = down ? T - D.tl : 0, a = 1 - sm(5.5, 7.5, sl);\n  const suit = lit(SUIT[D.suit]);\n  if (!down && D.o \u003c 0.3) {\n    // Pilot chute and bag going up.\n    seg(sx, sy - 1, sx, sy - 2 - D.o * 22, lit([200, 200, 210]), 0.5), put(sx, sy - 2 - D.o * 22, lit([245, 245, 245]));\n    put(sx, sy - 1, lit(HELM[D.helm])), put(sx, sy, suit), put(sx + 1, sy, suit);\n    return;\n  }\n  const kk = down ? 1 : sm(0.25, 0.8, D.o), pop = 1 + 0.18 * sin(PI * sm(0.55, 1, D.o)), c = sm(0, 1.2, sl);\n  const ch = cos(D.h), shh = sin(D.h), zm = 1 + D.z * 0.015, hs = (1 + 5.2 * kk) * pop * mix(1, 0.75, c) * zm, lr = (2 + 6 * kk) * (1 - c) * zm + 0.5 * c;\n  const ox = down ? -ch * 4 * c : 0, oy = down ? -shh * 4 * c * ZS : 0, cy = sy - 1.5 - lr + oy, droop = mix(1.1, 0.2, c) + D.fl * 0.6;\n  const svx = -shh * hs, svy = ch * hs * ZC, fx = ch * 2 * zm, fy = shh * 2 * ZC * (1 - c);\n  if (!down || c \u003c 1) for (const t of [-0.9, -0.35, 0.35, 0.9]) seg(sx, sy - 1.5, sx + ox + svx * t, cy + svy * t + droop * t * t + 1, lit([210, 210, 220]), 0.3 * a);\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let t = -1; t \u003c= 1; t += 0.45 / hs) {\n      const cell = min(8, floor((t + 1) * 4.5)), col = cell > 2 && cell \u003c 6 ? cb : ca, k = (cell & 1 ? 0.8 : 1) * (pass ? 1 : 0.5) * (1.12 - 0.12 * pop);\n      for (let q = -1; q \u003c= 1; q += 0.5) put(sx + ox + svx * t + fx * q, cy + svy * t + fy * q + droop * t * t + (pass ? 0 : 1), lit(col, k * (0.92 + 0.08 * q)), a);\n    }\n  put(sx, sy - 2, lit(HELM[D.helm]), a), put(sx, sy - 1, suit, a), put(sx + (D.fl > 0.3 ? 1 : 0), sy, suit.map((v) => v * 0.7), a);\n}\n\nfunction sock(P) {\n  const w = P.w, aw = abs(w), sx = w >= 0 ? 1 : -1;\n  for (let y = 104; y \u003c= 116; y++) put(WX, y, lit([200, 200, 206]));\n  for (let u = 0; u \u003c= 6; u += 0.5) {\n    const x = WX + sx * u * (0.3 + 0.7 * aw), y = 104 + u * (1 - aw) * 0.85 + sin(P.rt * 9 - u) * 0.35 * aw, col = lit(floor(u / 1.5) & 1 ? [240, 240, 240] : [255, 110, 20]);\n    put(x, y, col), u \u003c 4 && put(x, y + 1, col, 0.8);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  F = P.f;\n  const hh = P.h * 3, i0 = min(2, floor(hh));\n  K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  LT = KC(18);\n  backdrop(P);\n  F.set(P.bg);\n  // Cloud shadows crossing the fields.\n  for (let y = HZ; y \u003c H; y++) {\n    const zf = y - HZ + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const v = vn((((x - 32) * 24) / zf - P.cx * 1.1) * 0.035, (260 / zf) * 0.05), k = 1 - 0.5 * sm(0.45, 0.58, v), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n  farClouds(P);\n  sock(P);\n  const A = [];\n  for (const L of P.loads) for (const D of L.d) if (D.st === 4) canopy(D, L.t);\n  for (const L of P.loads) if (L.px > -40 && L.px \u003c 104) plane(P, L);\n  for (const L of P.loads) for (const D of L.d) if (D.st && D.st \u003c 4) A.push([D, L]);\n  A.sort((a, b) => a[0].z - b[0].z);\n  for (const [D, L] of A) {\n    if (D.st === 3) canopy(D, L.t);\n    else {\n      diver(D);\n      // Grips: the arms of two docked neighbours meet between them.\n      const E = L.d[(D.i + 1) % L.n];\n      if (D.st === 1 && E.st === 1 && D.g > 0.97 && E.g > 0.97) {\n        const d2 = (u, v) => (u[0] - v[0]) ** 2 + (u[1] - v[1]) ** 2, [a, b, c, e] = [bp(D, 0.9, -0.9), bp(D, 0.9, 0.9), bp(E, 0.9, -0.9), bp(E, 0.9, 0.9)];\n        const p = d2(a, c) + d2(a, e) \u003c d2(b, c) + d2(b, e) ? a : b, q = d2(p, c) \u003c d2(p, e) ? c : e;\n        const m = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];\n        seg(...p, ...m, lit(SUIT[D.suit])), seg(...m, ...q, lit(SUIT[E.suit]));\n      }\n    }\n  }\n  deck(P);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-skydiver","type":"code","name":"skydiver","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Skydiver\n// Family:  flight\n// Idea:    A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after formation skydiving loads at a drop zone\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1\n//\n// Knob 1: Hour. A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light.\n// Knob 2: Speed. At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower.\n// Knob 3: Divers. How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down.\n// Knob 4: Wind. The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you.\n// Buttons: K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the plane's fuselage, the flat base of the cloud deck, the horizon, the landing field.\nconst [PY, DB, HZ, GL] = [8, 30, 101, 118];\n// Depth goes onto the screen at this scale, nearer is lower; canopies are seen flatter.\nconst [ZS, ZC] = [0.55, 0.3];\n// Terminal velocity and the plane's speed in LEDs a second, the target, the windsock, seconds between loads.\nconst [VT, PV, TX, WX, CYCLE] = [8.5, 14, 34, 57, 15];\n// Sky top, middle, horizon; sun; lit and shaded cloud; daylight. Midday to sunset.\nconst KEYS = [\n  [8, 28, 104, 18, 62, 148, 112, 158, 204, 255, 250, 225, 252, 252, 255, 150, 162, 190, 1, 1, 1],\n  [12, 34, 112, 56, 96, 172, 196, 190, 184, 255, 226, 160, 255, 238, 210, 146, 140, 170, 1, 0.92, 0.8],\n  [20, 24, 90, 104, 84, 146, 255, 160, 84, 255, 186, 100, 255, 194, 136, 126, 96, 136, 1, 0.78, 0.58],\n  [12, 12, 50, 96, 46, 104, 255, 104, 44, 255, 136, 56, 255, 136, 96, 82, 54, 92, 0.86, 0.56, 0.42],\n];\nconst CAN = [[255, 30, 60], [255, 214, 0], [20, 110, 255], [255, 50, 190], [80, 235, 40], [255, 120, 0], [0, 220, 235], [150, 60, 255], [245, 245, 245], [255, 80, 80], [20, 190, 110], [255, 160, 200]];\nconst SUIT = [[255, 220, 40], [240, 40, 40], [40, 200, 255], [250, 250, 250], [255, 110, 0], [190, 70, 255], [60, 230, 90], [255, 80, 180]];\nconst HELM = [[250, 250, 250], [30, 30, 36], [255, 200, 0], [230, 40, 40]];\nconst STRIPE = [[200, 30, 40], [20, 70, 170], [230, 150, 0]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = { t: 0, rt: 0, loads: [], next: 0, cx: 0, w: 0, f: F32(N * 3), bg: F32(N * 3), key: -1, top: F32(128), far: F32(128) });\n  // Cumulus along a strip that wraps every 128 columns, each a cluster of round puffs: the deck and the far ones.\n  for (const [T, nc, sz] of [[P.top, 4, 1], [P.far, 6, 0.5]])\n    for (let k = 0; k \u003c nc; k++) {\n      const c = (k * 128) / nc + rnd() * 8, wd = (14 + rnd() * 14) * sz, hm = (5 + rnd() * 7) * sz;\n      for (let j = 0; j \u003c 11; j++) {\n        // Bubbles stacked higher towards the middle of the cloud.\n        const u = rnd() * 2 - 1, r = (2 + rnd() * 3.2) * (sz + 0.3) * 0.75, px = c + u * (wd / 2 - r * 0.5), e = max(0, (hm - r) * (1 - u * u) * (0.5 + 0.5 * rnd()));\n        for (let x = 0; x \u003c 128; x++) {\n          const dx = ((((x - px) % 128) + 192) % 128) - 64;\n          // A round top, and shoulders sloping down to the base.\n          const ax = abs(dx);\n          if (ax \u003c r + e) T[x] = max(T[x], ax \u003c r ? e + Math.sqrt(r * r - dx * dx) : e + r - ax);\n        }\n      }\n    }\n}\n\nconst shuffle = (n) => {\n  const a = [...Array(n).keys()];\n  for (let i = n - 1; i > 0; i--) {\n    const j = floor(rnd() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n};\n\n// A load: the plane runs in against the wind and puts the ring upwind of the target.\nfunction spawn(P, n, btn) {\n  // A big load gets out of the door faster, so every ring has the same time to build.\n  const w = P.w, dir = w >= 0 ? -1 : 1, len = 17 + n, ex = (0.5 + 0.06 * n) / (n - 1), half = ((n - 1) * ex) / 2, x0 = dir \u003c 0 ? 66 : -2;\n  const te0 = btn ? 1.3 : max(1.3, (dir * (31 - 12 * w - x0) + len - 12) / PV - half);\n  const cx = x0 + dir * PV * (te0 + half) - dir * (len - 12), ci = shuffle(CAN.length), si = shuffle(SUIT.length), rk = shuffle(n), lp = shuffle(n);\n  const d = [];\n  for (let i = 0; i \u003c n; i++) {\n    // Exit time, canopy colours (white or a second colour in the middle cells), suit, helmet,\n    // descent rate under canopy, which way the spiral turns, and the spot on the field.\n    d.push({\n      i, te: te0 + i * ex, st: 0, x: 0, y: 0, z: 0, h: 0, g: 0, o: 0, rank: rk[i], can: ci[i], cb: rnd() \u003c 0.5 ? 8 : ci[(i + 5) % 12], suit: si[i % 8], helm: floor(rnd() * 4),\n      zd: rnd() * 2 - 1, k: 2.2 + rnd() * 1.2, om: (rnd() \u003c 0.5 ? -1 : 1) * (0.8 + rnd() * 0.4), lx: TX + (lp[i] / (n - 1) - 0.5) * 26 + rnd() * 2, lz: rnd() * 12 - 4,\n    });\n  }\n  P.loads.push({ t: 0, n, dir, len, x0, te0, cx, px: x0, rot0: rnd() * TAU, rr: 4.6 / sin(PI / n), tb: te0 + 2 * half + 4.2, d, sc: STRIPE[floor(rnd() * 3)] });\n  if (P.loads.length > 4) P.loads.shift();\n}\n\nconst fall = (s) => (s \u003c= 0 ? 0 : VT * (s - (1 - exp(-1.5 * s)) / 1.5));\nconst thr = (s) => (s \u003c= 0 ? 0 : (PV * (1 - exp(-1.4 * s))) / 1.4);\n\nfunction runLoad(P, L, d) {\n  const T = (L.t += d), w = P.w, dir = L.dir, n = L.n;\n  L.px = L.x0 + dir * PV * T;\n  const s0 = T - L.te0, ccx = L.cx + w * 2 * max(0, s0), ccy = PY + 3 + fall(s0 - 0.15), rot = L.rot0 + 0.25 * s0;\n  const hf = atan2(1 - 0.9 * abs(w), -w), cf = cos(hf), sf = sin(hf);\n  for (const D of L.d) {\n    if (!D.st && T >= D.te) (D.st = 1), (D.xd = L.x0 + dir * PV * D.te - dir * (L.len - 6));\n    if (D.st === 1 && T >= L.tb) {\n      // Break-off: where the ring was, frozen, then turn away and track out.\n      const sb = L.tb - L.te0, th = L.rot0 + 0.25 * sb + (TAU * D.i) / n;\n      Object.assign(D, { st: 2, th, bx: L.cx + w * 2 * sb + L.rr * cos(th), bz: L.rr * sin(th), by: PY + 3 + fall(sb - 0.15) });\n    }\n    if (D.st === 1) {\n      const s = T - D.te, th = rot + (TAU * D.i) / n, g = sm(0.4, 2.3, s);\n      D.x = mix(D.xd + dir * thr(s) + w * 2 * s, ccx + L.rr * cos(th), g);\n      D.y = mix(PY + 3 + fall(s), ccy, g);\n      D.z = mix(D.zd, L.rr * sin(th), g);\n      D.h = th + PI;\n      D.g = g;\n    } else if (D.st === 2) {\n      const sb = T - L.tb, out = (10 + 0.6 * n) * (1 - exp(-1.1 * sb));\n      D.x = cl(D.bx + cos(D.th) * out, 2, 61);\n      D.z = D.bz + sin(D.th) * out * 0.6;\n      D.y = D.by + 9.5 * sb;\n      D.h = D.th + PI + PI * sm(0, 0.6, sb);\n      D.g = 0;\n      if (sb >= 0.7 + (1.4 * D.rank) / (n - 1)) Object.assign(D, { st: 3, td: T, yd: D.y, vy: 9.5, ax: D.x, az: D.z, h0: D.h });\n    } else if (D.st === 3) {\n      // Under canopy: open, slow down, spiral in over the field and turn to land.\n      const sc = T - D.td;\n      D.o = min(1, sc / 0.9);\n      D.vy += ((D.y > GL - 5 ? 1.3 : D.o > 0.55 ? D.k : 9.5) - D.vy) * min(1, 5 * d);\n      D.y += D.vy * d;\n      const pr = cl((D.y - D.yd) / (GL - D.yd), 0, 1), fx = D.lx - cf * 8, fz = D.lz - sf * 8;\n      if (pr \u003c 0.8) {\n        const e = sm(0, 0.8, pr), r = 13 * sin(PI * (pr / 0.8)) ** 0.6, h = D.h0 + D.om * sc, sg = D.om > 0 ? 1 : -1;\n        // The wind carries the spiral downwind on the way down, and the last turn brings it back.\n        D.x = mix(D.ax, fx, e) + sg * r * sin(h) + w * 12 * sin(PI * e);\n        D.z = mix(D.az, fz, e) - sg * r * cos(h);\n        const b = sm(0.65, 0.8, pr);\n        D.h = atan2(mix(sin(h), sf, b), mix(cos(h), cf, b));\n      } else {\n        const q = sm(0.8, 1, pr);\n        (D.x = mix(fx, D.lx, q)), (D.z = mix(fz, D.lz, q)), (D.h = hf);\n      }\n      D.x = cl(D.x, 3, 60);\n      D.fl = sm(GL - 5, GL, D.y);\n      if (D.y >= GL) Object.assign(D, { st: 4, tl: T, y: GL, x: D.lx, z: D.lz, h: hf });\n    } else if (D.st === 4 && T - D.tl > 7.5) D.st = 5;\n  }\n}\n\nfunction tick(P, d, n) {\n  P.t += d;\n  P.cx += (3.2 + 9 * P.w) * d;\n  if ((P.next -= d) \u003c= 0) spawn(P, n, 0), (P.next += CYCLE);\n  for (const L of P.loads) runLoad(P, L, d);\n  P.loads = P.loads.filter((L) => L.t \u003c 60 && L.d.some((D) => D.st \u003c 5));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), n = round(cl(k[2], 5, 12));\n  P.w = cl(k[3], -1, 1);\n  P.h = cl(k[0], 0, 1);\n  P.rt += rd;\n  // One load landing, one high under canopy, and the third plane on its run.\n  if (!P.ready) {\n    P.ready = 1;\n    P.next = 1e9;\n    for (const s of [0, 19, 30, 32.5]) {\n      while (P.t \u003c s - 1e-6) tick(P, 1 / 15, n);\n      s \u003c 32 && spawn(P, n, 0);\n    }\n    P.next = CYCLE - 2.5;\n  }\n  if (input.btnPressed && input.btnPressed[0]) spawn(P, n, 1), (P.next = CYCLE);\n  tick(P, d, n);\n}\n\nlet F, LT, K;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1) {\n  const o = at(x, y);\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction seg(x0, y0, x1, y1, c, a = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1;\n  for (let i = 0; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c, a);\n}\nconst lit = (c, k = 1) => [c[0] * LT[0] * k, c[1] * LT[1] * k, c[2] * LT[2] * k];\nconst KC = (i) => [K[i], K[i + 1], K[i + 2]];\n\n// Sky, sun, hills and the drop zone, kept until the hour moves.\nfunction backdrop(P) {\n  const B = P.bg, h = P.h, key = round(h * 300);\n  if (key === P.key) return;\n  P.key = key;\n  const zen = KC(0), mid = KC(3), hor = KC(6), sun = KC(9), sy = mix(-16, 90, sm(0.3, 1, h));\n  const FIELDS = [[74, 124, 44], [112, 140, 52], [150, 146, 72], [60, 104, 48], [126, 112, 64]];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    let c;\n    const hill = HZ - 1.5 - 2.5 * vn(x * 0.09, 50);\n    if (y \u003c hill) {\n      const f = y / HZ, u = f \u003c 0.6 ? sm(0, 1, f / 0.6) : ((f - 0.6) / 0.4) ** 1.6;\n      c = f \u003c 0.6 ? zen.map((v, j) => mix(v, mid[j], u)) : mid.map((v, j) => mix(v, hor[j], u));\n      const ds = Math.hypot(x - 47, (y - sy) * 1.1), g = 0.5 * exp(-ds / 9) + 0.25 * exp(-ds / 30);\n      c = ds \u003c 3.6 ? sun : c.map((v, j) => v + sun[j] * g * (0.4 + 0.6 * h));\n    } else if (y \u003c HZ) {\n      c = lit(hor.map((v, j) => mix(v, [44, 72, 70][j], 0.6)));\n    } else {\n      const zf = y - HZ + 2, gx = ((x - 32) * 24) / zf, gz = 260 / zf;\n      if (y >= 104 && y \u003c= 106) c = y === 105 && (floor(gx / 5) & 3) === 0 ? [220, 220, 220] : [92, 92, 98];\n      else if (y >= 109) c = [70, 150, 48].map((v) => v * (floor(gx / 7) & 1 ? 0.86 : 1));\n      else c = FIELDS[floor(hash(floor(gx / 40 + 60), floor(gz / 22)) * 5)];\n      const e = ((x - TX) / 11) ** 2 + ((y - GL) / 3.6) ** 2;\n      if (e \u003c 1) c = e \u003c 0.07 ? [245, 245, 245] : [204, 182, 132].map((v) => v * (e > 0.6 ? 0.84 : 1));\n      c = lit(c).map((v, j) => mix(v, hor[j], exp(-(zf - 2) / 4) * 0.65));\n    }\n    // The hangar by the runway, its door open.\n    if (x >= 3 && x \u003c= 16 && y \u003c= 105 && y >= 97 + ((x - 9.5) / 6.5) ** 2 * 3) c = lit(x > 6 && x \u003c 13 && y > 100 ? [34, 34, 42] : [196, 196, 204], y \u003c 99 ? 1.08 : 1);\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  }\n}\n\n// The far cumulus sitting on the horizon haze.\nfunction farClouds(P) {\n  const lt = KC(12), sh = KC(15), hor = KC(6);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x * 0.9 + P.cx * 0.6 + 40, i = floor(xx), f = xx - i, hgt = mix(P.far[i & 127], P.far[(i + 1) & 127], f);\n    for (let y = floor(98 - hgt); y \u003c= 98; y++) {\n      const u = (98 - y) / max(1, hgt), c = sh.map((v, j) => mix(mix(v, lt[j], cl(u * 1.3, 0, 1)), hor[j], 0.35));\n      put(x, y, c, cl(y - (98 - hgt) + 0.5, 0, 1) * 0.92);\n    }\n  }\n}\n\n// The deck the divers fall through: domes on top, a flat grey base.\nfunction deck(P) {\n  const lt = KC(12), sh = KC(15);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x + P.cx + 7, i = floor(xx), f = xx - i, hgt = mix(P.top[i & 127], P.top[(i + 1) & 127], f);\n    if (hgt \u003c 0.3) continue;\n    for (let y = floor(DB - hgt); y \u003c= DB; y++) {\n      const u = (DB - y) / max(1, hgt), b = cl(u * 1.15 + (vn(xx * 0.35, y * 0.4) - 0.5) * 0.6, 0, 1);\n      put(x, y, sh.map((v, j) => mix(v, lt[j], b)), cl(y - (DB - hgt) + 0.5, 0, 1) * (y === DB ? 0.7 : 0.95));\n    }\n  }\n}\n\nfunction plane(P, L) {\n  const { len, dir, px } = L, X = (u) => px - dir * (len - u), body = lit([236, 236, 242]), belly = lit([168, 170, 180]), glass = lit([50, 74, 110]), dark = [22, 22, 28];\n  for (let u = -1; u \u003c= len; u += 0.5) {\n    const x = X(u);\n    if (u \u003c 4.5) for (let y = PY - 2 - (u \u003c 2 ? 5 : 5 - (u - 2) * 2); y \u003c PY - 2; y++) put(x, y, body);\n    if (u \u003c 3.5) put(x, PY - 1, belly);\n    if (u \u003c 1) continue;\n    const bot = u \u003c 7 ? PY + 1 - (7 - u) * 0.45 : PY + 1, top = u > len - 3 ? PY - 2 + (u - len + 3) * 0.7 : PY - 2;\n    for (let y = ceil(top); y \u003c= bot; y++) put(x, y, y === PY ? lit(L.sc) : y > PY ? belly : body);\n  }\n  for (let u = 9; u \u003c len - 5; u += 2) put(X(u), PY - 1, glass);\n  put(X(len - 2), PY - 1, glass), put(X(len - 3), PY - 1, glass);\n  for (let u = len * 0.42; u \u003c= len * 0.66; u += 0.5) put(X(u), PY - 3, lit([214, 216, 224]));\n  for (let u = len * 0.6; u \u003c= len * 0.74; u += 0.5) put(X(u), PY - 2, lit([150, 150, 160]));\n  for (let y = PY - 5; y \u003c= PY; y++) put(X(len * 0.77), y, [220, 220, 230], 0.25 + 0.2 * rnd());\n  put(X(len * 0.55), PY + 2, dark), put(X(len - 2), PY + 2, dark);\n  // The door is open on the run in, with the next diver crouched in it.\n  const next = L.d.find((D) => !D.st);\n  if (next && L.t > L.te0 - 1.6) {\n    for (let u = 4.5; u \u003c= 6.5; u += 0.5) for (let y = PY - 1; y \u003c= PY + 1; y++) put(X(u), y, dark);\n    put(X(6), PY, lit(SUIT[next.suit])), put(X(6), PY - 1, lit(HELM[next.helm]));\n  }\n  if ((P.rt * 1.4) % 1 \u003c 0.25) put(X(len * 0.5), PY - 4, [255, 40, 30]);\n}\n\n// A diver in freefall seen from above and behind: spread arms and legs, the rig on the back, the helmet.\nconst bp = (D, a, b) => {\n  const c = cos(D.h) * 1.3, s = sin(D.h) * 1.3;\n  return [D.x + c * a - s * b, D.y + (D.z + s * a + c * b) * ZS];\n};\nfunction diver(D) {\n  const sc = lit(SUIT[D.suit]), ln = (a, b) => seg(...bp(D, ...a), ...bp(D, ...b), sc);\n  for (const m of [-1, 1]) {\n    ln([-0.9, 0.4 * m], [-2.8, 1.6 * m]);\n    if (D.g \u003c 0.97) ln([0.9, 0.8 * m], [2.1, 2.3 * m]);\n  }\n  ln([-0.9, 0], [0.9, 0]), ln([0.9, -0.9], [0.9, 0.9]);\n  put(...bp(D, -0.1, 0), [26, 26, 32]);\n  put(...bp(D, 1.9, 0), lit(HELM[D.helm]));\n}\n\n// A canopy: cells, lines, the jumper in the harness. On the ground it falls in behind the jumper, who gathers it up.\nfunction canopy(D, T) {\n  const sx = D.x, sy = D.y + D.z * ZS, ca = CAN[D.can], cb = CAN[D.cb], down = D.st === 4, sl = down ? T - D.tl : 0, a = 1 - sm(5.5, 7.5, sl);\n  const suit = lit(SUIT[D.suit]);\n  if (!down && D.o \u003c 0.3) {\n    // Pilot chute and bag going up.\n    seg(sx, sy - 1, sx, sy - 2 - D.o * 22, lit([200, 200, 210]), 0.5), put(sx, sy - 2 - D.o * 22, lit([245, 245, 245]));\n    put(sx, sy - 1, lit(HELM[D.helm])), put(sx, sy, suit), put(sx + 1, sy, suit);\n    return;\n  }\n  const kk = down ? 1 : sm(0.25, 0.8, D.o), pop = 1 + 0.18 * sin(PI * sm(0.55, 1, D.o)), c = sm(0, 1.2, sl);\n  const ch = cos(D.h), shh = sin(D.h), zm = 1 + D.z * 0.015, hs = (1 + 5.2 * kk) * pop * mix(1, 0.75, c) * zm, lr = (2 + 6 * kk) * (1 - c) * zm + 0.5 * c;\n  const ox = down ? -ch * 4 * c : 0, oy = down ? -shh * 4 * c * ZS : 0, cy = sy - 1.5 - lr + oy, droop = mix(1.1, 0.2, c) + D.fl * 0.6;\n  const svx = -shh * hs, svy = ch * hs * ZC, fx = ch * 2 * zm, fy = shh * 2 * ZC * (1 - c);\n  if (!down || c \u003c 1) for (const t of [-0.9, -0.35, 0.35, 0.9]) seg(sx, sy - 1.5, sx + ox + svx * t, cy + svy * t + droop * t * t + 1, lit([210, 210, 220]), 0.3 * a);\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let t = -1; t \u003c= 1; t += 0.45 / hs) {\n      const cell = min(8, floor((t + 1) * 4.5)), col = cell > 2 && cell \u003c 6 ? cb : ca, k = (cell & 1 ? 0.8 : 1) * (pass ? 1 : 0.5) * (1.12 - 0.12 * pop);\n      for (let q = -1; q \u003c= 1; q += 0.5) put(sx + ox + svx * t + fx * q, cy + svy * t + fy * q + droop * t * t + (pass ? 0 : 1), lit(col, k * (0.92 + 0.08 * q)), a);\n    }\n  put(sx, sy - 2, lit(HELM[D.helm]), a), put(sx, sy - 1, suit, a), put(sx + (D.fl > 0.3 ? 1 : 0), sy, suit.map((v) => v * 0.7), a);\n}\n\nfunction sock(P) {\n  const w = P.w, aw = abs(w), sx = w >= 0 ? 1 : -1;\n  for (let y = 104; y \u003c= 116; y++) put(WX, y, lit([200, 200, 206]));\n  for (let u = 0; u \u003c= 6; u += 0.5) {\n    const x = WX + sx * u * (0.3 + 0.7 * aw), y = 104 + u * (1 - aw) * 0.85 + sin(P.rt * 9 - u) * 0.35 * aw, col = lit(floor(u / 1.5) & 1 ? [240, 240, 240] : [255, 110, 20]);\n    put(x, y, col), u \u003c 4 && put(x, y + 1, col, 0.8);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  F = P.f;\n  const hh = P.h * 3, i0 = min(2, floor(hh));\n  K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  LT = KC(18);\n  backdrop(P);\n  F.set(P.bg);\n  // Cloud shadows crossing the fields.\n  for (let y = HZ; y \u003c H; y++) {\n    const zf = y - HZ + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const v = vn((((x - 32) * 24) / zf - P.cx * 1.1) * 0.035, (260 / zf) * 0.05), k = 1 - 0.5 * sm(0.45, 0.58, v), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n  farClouds(P);\n  sock(P);\n  const A = [];\n  for (const L of P.loads) for (const D of L.d) if (D.st === 4) canopy(D, L.t);\n  for (const L of P.loads) if (L.px > -40 && L.px \u003c 104) plane(P, L);\n  for (const L of P.loads) for (const D of L.d) if (D.st && D.st \u003c 4) A.push([D, L]);\n  A.sort((a, b) => a[0].z - b[0].z);\n  for (const [D, L] of A) {\n    if (D.st === 3) canopy(D, L.t);\n    else {\n      diver(D);\n      // Grips: the arms of two docked neighbours meet between them.\n      const E = L.d[(D.i + 1) % L.n];\n      if (D.st === 1 && E.st === 1 && D.g > 0.97 && E.g > 0.97) {\n        const d2 = (u, v) => (u[0] - v[0]) ** 2 + (u[1] - v[1]) ** 2, [a, b, c, e] = [bp(D, 0.9, -0.9), bp(D, 0.9, 0.9), bp(E, 0.9, -0.9), bp(E, 0.9, 0.9)];\n        const p = d2(a, c) + d2(a, e) \u003c d2(b, c) + d2(b, e) ? a : b, q = d2(p, c) \u003c d2(p, e) ? c : e;\n        const m = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];\n        seg(...p, ...m, lit(SUIT[D.suit])), seg(...m, ...q, lit(SUIT[E.suit]));\n      }\n    }\n  }\n  deck(P);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower."},{"name":"Divers","min":5,"max":12,"about":"How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down."},{"name":"Wind","min":-1,"max":1,"about":"The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you."}],"start":[0,2,5,0.06],"measures":{"motion":0.1475,"detail":0.0297,"edges":0.3609,"complexity":0.7202,"coverage":0.9986,"colour":0.3312,"drift":0.0468},"knobResponse":[0.1943,0.0707,0.0554,0.0919]},{"slug":"sled-dogs","title":"Sled Dogs","family":"polar","round":27,"note":"드론처럼 바로 위에서 본 개썰매 팀이 둘씩 갱라인에 매여 해빙 위를 달려 올라가요. 낮은 해가 개마다 긴 파란 그림자를 비스듬히 뒤로 던지고, 바람이 깎은 사스트루기 사이로 압력 능선과 다시 언 리드가 발밑을 흘러가요. K1 은 금빛 해에서 오로라 뜬 달밤으로 가고, 누르면 머셔가 외쳐 팀이 방향을 틀어요.","idea":"Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.","buttons":"K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.","code":"// ===== Patternflow pattern =====\n// Title:   Sled Dogs\n// Family:  polar\n// Idea:    Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after dog-sled teams on Arctic sea ice, here in pairs on a gangline (the tandem hitch) rather than the fan hitch used in Greenland\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1\n//\n// Knob 1: Light. A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow.\n// Knob 2: Speed. At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower.\n// Knob 3: Dogs. Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front.\n// Knob 4: Wind. Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice.\n// Buttons: K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.\n\nconst W = 64, H = 128, N = W * H;\n// The ice: a ring of world rows, x from -128 to 127.\nconst RX = 256, XO = 128, RY = 256, RN = RX * RY;\n// The shading grid and the window of heights around it.\nconst TW = 65, TH = 129, MX = 48, MY = 30, HW = TW + 2 * MX, HH = TH + 2 * MY;\n// Dogs are drawn in sixths of a metre, grown by Z.\nconst Z = 1.4, PITCH = 11 * Z, LAT = 2.5 * Z, STRIDE = 9 * Z, SLED = 15 * Z, PL = 1024;\nconst { min, max, floor, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rw = (y) => (((y % RY) + RY) % RY) * RX;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// The prevailing wind, which the sastrugi follow.\nconst GX = -0.8, GY = 0.6;\n// K1 stops: direct rgb, sky rgb, tan of elevation, aurora.\nconst KL = [\n  [0, 208, 146, 56, 64, 94, 160, 0.3, 0],\n  [0.33, 205, 122, 44, 60, 80, 142, 0.17, 0],\n  [0.6, 0, 0, 0, 84, 112, 186, 0.2, 0],\n  [1, 52, 64, 92, 12, 22, 52, 0.32, 1],\n].map((k) => Float64Array.from(k));\n// Coats from above, dark with a light face: black, grey, red, sable, black.\nconst COAT = [\n  [28, 26, 30, 64, 60, 60, 236, 232, 228],\n  [64, 62, 66, 112, 108, 104, 226, 222, 214],\n  [110, 56, 26, 150, 92, 50, 236, 220, 198],\n  [58, 42, 28, 104, 80, 56, 232, 216, 192],\n  [24, 22, 22, 44, 40, 38, 220, 214, 206],\n].map((c) => [0, 3, 6].map((j) => Float64Array.from(c.slice(j, j + 3), (v) => v / 255)));\nconst HARN = [1, 0.5, 0.04], LINE = [0.2, 0.17, 0.22], WOOD = [0.62, 0.46, 0.3], DARK = [0.26, 0.18, 0.12], LOAD = [0.44, 0.34, 0.24], RED = [0.78, 0.15, 0.1], FUR = [0.74, 0.66, 0.54];\n// Side views as capsules (a, h, a, h, r): a dog; the sled and musher.\nconst DOG = [-2, 2.75, 1.2, 2.95, 0.82, 1.2, 3.2, 2.7, 3.95, 0.6, 2.7, 3.95, 3.9, 3.65, 0.42, 2.55, 4.4, 2.7, 5, 0.22, -2.2, 3.2, -2.6, 4.2, 0.42, -2.6, 4.2, -1.8, 4.7, 0.36];\nconst SLD = [-1.5, 0.8, 14.5, 0.8, 0.55, 5.5, 1.8, 11.5, 1.8, 1, 2.6, 0.8, 2.6, 5.8, 0.3, 0.45, 0, 0.7, 5, 0.6, 0.7, 5, 0.9, 9, 1.15, 1, 10.2, 1, 10.3, 0.85, 1, 8.4, 2.5, 6, 0.4];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), U8 = (n) => new Uint8ClampedArray(n);\n  const S = (params.s = {\n    HT: F32(RN), AL: U8(RN * 3), MT: U8(RN), MK: U8(RN), LI: F32(RN), SQ: F32(RN), GN: new Int32Array(RN), gen: 1,\n    HL: F32(HW * HH), AM: F32(TW * TH * 3), DI: F32(TW * TH * 3), SM: F32(TW * TH), F: F32(N * 3), L: new Float64Array(9), TM: U8(1200), LC: new Float64Array(3),\n    PX: F32(PL), PY: F32(PL), np: PL, acc: 0.01, DX: F32(16), DY: F32(16), DF: F32(16), DO: F32(16), DC: U8(16), BX: F32(256), BY: F32(256), BA: F32(256), bi: 0,\n    lx: 0.01, ly: 0.01, th: 0.01, v: 20, vt: 20, ph: 0.01, t: 0.01, cx: -30, cy: -18, gy: 230, nd: 8, sbx: 0.01, sby: 0.01, sfx: 0.01, sfy: 0.01, ux: 0.01, uy: 0.01, run: 0.01, pt: 15.4,\n    rest: 0, restT: 0.01, turn: 1, turnT: 0.01, k1: -1, k4: 0.06, wind: 0.01, live: 0, cpY: [400, 50], cpX: [0, 0], feat: [], nf: 0, sk: 0,\n  });\n  for (let k = 0; k \u003c PL; k++) S.PY[k] = (PL - 1 - k) * 0.5;\n  for (let i = 0; i \u003c 16; i++) (S.DO[i] = hash(i, 3)), (S.DC[i] = floor(hash(i, 8) * 5));\n  for (let c = 0; c \u003c 1200; c++) S.TM[c] = c \u003c 205 ? c : 205 + 50 * (1 - exp(-(c - 205) / 50));\n  plan(S), plan(S), plan(S);\n  for (let y = 230; y > -53; y--) genRow(S, y);\n  S.gy = -53;\n}\n\n// The trail swings between control points.\nfunction trailX(S, y) {\n  const Y = S.cpY, X = S.cpX;\n  let i = 0;\n  while (i \u003c Y.length - 2 && Y[i + 1] > y) i++;\n  return mix(X[i], X[i + 1], sm(0, 1, (Y[i] - y) / (Y[i] - Y[i + 1])));\n}\n// Each obstacle lies across the way on; the trail swings round its end.\nfunction plan(S) {\n  const Y = S.cpY, X = S.cpX, ly = Y[Y.length - 1], lx = X[X.length - 1];\n  if (S.sk++ % 3 === 2) return Y.push(ly - 60 - 30 * rnd()), X.push(cl(lx + (rnd() - 0.5) * 20, -24, 24));\n  const side = abs(lx) > 6 ? (lx > 0 ? 1 : -1) : rnd() \u003c 0.5 ? 1 : -1, x0 = cl(lx - side * (9 + 5 * rnd()), -30, 30), y0 = ly - 60 - 20 * rnd(), sd = floor(rnd() * 999), ph = rnd() * 6;\n  Y.push(y0, y0 - 60 - 20 * rnd()), X.push(x0, cl(x0 + side * (9 + 6 * rnd()), -24, 24));\n  if (S.nf++ % 2 === 0) {\n    // A pressure ridge, square to the sun.\n    const a = -side * (0.5 + 0.4 * rnd()), len = 60 + 40 * rnd(), dx = side * cos(a), dy = sin(a);\n    S.feat.push({ k: 0, px: x0 + side * 4, py: y0, dx, dy, len, hh: 6 + 4 * rnd(), sd, ph, side, ol: 0, y0: y0 + min(0, dy * len) - 22, y1: y0 + max(0, dy * len) + 22 });\n  } else {\n    // A lead: slope, swing, wave number and width in dx, dy, len, hh.\n    const sl = (rnd() - 0.5) * 0.22, am = 3 + 4 * rnd(), w = 10 + 6 * rnd(), e = abs(sl) * (128 + abs(x0)) + am + w;\n    S.feat.push({ k: 1, px: x0, py: y0, dx: sl, dy: am, len: 0.03 + 0.03 * rnd(), hh: w, sd, ph, side, ol: 40 + 40 * rnd(), y0: y0 - e, y1: y0 + e });\n  }\n}\n\nfunction genRow(S, y) {\n  const o = rw(y), { HT, AL, MT } = S, fs = S.feat.filter((f) => y > f.y0 && y \u003c f.y1);\n  for (let i = 0; i \u003c RX; i++) {\n    // Sastrugi: crests with a long back to the sun and a steep lee face, broken into pieces.\n    const x = i - XO, u = x * GX + y * GY, v = -x * GY + y * GX, c = v * 0.085 + 2.4 * vn(u * 0.012, v * 0.012) + 0.7 * vn(u * 0.045, v * 0.03 + 20), cf = c - floor(c), ci = floor(c);\n    const sa = (cf \u003c 0.25 ? cf / 0.25 : (1 - cf) / 0.75) * sm(0.42, 0.75, vn(u * 0.06 + ci * 7.3, ci * 3.1)) * (0.25 + 0.75 * sm(0.3, 0.6, vn(x * 0.022 + 70, y * 0.022)));\n    let h = 0.95 * sa * sa + 0.15 * vn(u * 0.09 + 50, v * 0.34) + vn(x * 0.017 + 9, y * 0.017) - 0.5;\n    const g = 0.955 + 0.045 * hash(x, y);\n    let ar = 0.9 * g, ag = 0.94 * g, ab = g, mt = 0;\n    for (const f of fs) {\n      if (f.k === 0) {\n        // Tilted slabs, rubble at their feet.\n        const rx = x - f.px, ry = y - f.py, t = rx * f.dx + ry * f.dy;\n        if (t \u003c -8 || t > f.len + 8) continue;\n        const s = abs(ry * f.dx - rx * f.dy - 3 * sin(t * 0.06 + f.ph)), bk = floor(t / 3.4), e = sm(-4, 8, t) * sm(f.len + 4, f.len - 16, t), wb = 2.4 + 2.6 * hash(bk, f.sd + 1), gx = floor(x / 3), gy = floor(y / 3);\n        const hb = f.hh * (0.45 + 0.55 * hash(bk, f.sd)) * e;\n        let hr = hb * (1 - s / wb) + 0.5 * hb * (hash(bk, f.sd + 2) - 0.5) * (t / 3.4 - bk - 0.5), q = hash(bk, f.sd + 3);\n        if (hash(gx, gy + f.sd) \u003c 0.2 * e * sm(wb + 6, wb, s) && 0.8 + 1.4 * hash(gy, gx) > hr) (hr = 0.8 + 1.4 * hash(gy, gx)), (q = hash(gx + 7, gy));\n        if (hr > 0.2 && hr > h - 0.2) (h = max(h, hr) + 0.15), (mt = 1), (ar = mix(0.84, 0.44, q)), (ag = mix(0.93, 0.76, q)), (ab = mix(1, 0.92, q));\n      } else {\n        // A refrozen lead: dark young ice with frost flowers, and open water along part of it.\n        const yc = f.py + f.dx * (x - f.px) + f.dy * sin(x * f.len + f.ph), e = abs(y - yc) / (f.hh * (0.35 + 0.3 * vn(x * 0.045, f.sd)));\n        if (e > 1) {\n          h += 0.7 * max(0, 1.4 - e);\n          continue;\n        }\n        const sx = f.side * (x - f.px), gq = mix(0.14, 0.4, e * e) * (0.85 + 0.3 * vn(x * 0.2, y * 0.2)), fr = hash(x + 3, y) \u003c 0.07 ? 0.35 + 0.3 * hash(y, x) : 0;\n        (h = -0.45), (mt = 2), (ar = gq * 0.9 + fr), (ag = gq * 0.97 + fr), (ab = gq * 1.06 + fr);\n        if (e \u003c 0.8 * sm(5, 10, sx) * sm(f.ol + 10, f.ol, sx)) (mt = 3), (h = -0.6), (ar = 0.03), (ag = 0.07), (ab = 0.11);\n      }\n    }\n    const k = o + i;\n    (HT[k] = h), (AL[k * 3] = ar * 255), (AL[k * 3 + 1] = ag * 255), (AL[k * 3 + 2] = ab * 255), (MT[k] = mt), (S.MK[k] = S.GN[k] = 0);\n  }\n}\n\n// A paw print or runner groove in the snow; young ice takes none.\nfunction stamp(S, x, y, depth, bit) {\n  const i = floor(x + 0.5) + XO, yy = floor(y + 0.5), k = rw(yy) + i, A = S.AL;\n  if (i \u003c 0 || i >= RX || S.MK[k] & bit || S.MT[k] > 1) return;\n  S.MK[k] |= bit;\n  (S.HT[k] -= depth), (A[k * 3] *= 0.93), (A[k * 3 + 1] *= 0.95);\n  // Light it again.\n  for (let j = -2; j \u003c 3; j++) for (let q = max(0, i - 2); q \u003c min(RX, i + 3); q++) S.GN[rw(yy + j) + q] = 0;\n}\n\n// The point s LEDs back along the lead dog's path.\nconst PP = new Float64Array(2);\nfunction pathAt(S, s) {\n  const f = S.acc, last = (S.np - 1) & (PL - 1);\n  if (s \u003c= f) return (PP[0] = mix(S.lx, S.PX[last], s / max(f, 1e-6))), (PP[1] = mix(S.ly, S.PY[last], s / max(f, 1e-6)));\n  const k = (s - f) * 2, i = floor(k), r = k - i, a = (S.np - 1 - i) & (PL - 1), b = (S.np - 2 - i) & (PL - 1);\n  (PP[0] = mix(S.PX[a], S.PX[b], r)), (PP[1] = mix(S.PY[a], S.PY[b], r));\n}\n// Dogs in pairs on the path, the sled behind.\nfunction layout(S) {\n  // Long teams close up to fit the panel.\n  const n = S.nd, odd = n & 1, pt = (S.pt = min(PITCH, 76 / (((n + 1) >> 1) - 1))), sf = (((n + 1) >> 1) - 1) * pt + 8 * Z;\n  for (let i = 0; i \u003c n; i++) {\n    const side = odd && !i ? 0 : (odd ? i - 1 : i) & 1 ? 1 : -1, s = ((i + odd) >> 1) * pt + 0.6 * (S.DO[i] - 0.5) + (side > 0 ? 3.5 * Z : 0);\n    pathAt(S, s - 1);\n    const ax = PP[0], ay = PP[1];\n    pathAt(S, s + 1);\n    const fx = ax - PP[0], fy = ay - PP[1], l = sqrt(fx * fx + fy * fy) || 1;\n    pathAt(S, s);\n    (S.DX[i] = PP[0] - (fy / l) * side * LAT), (S.DY[i] = PP[1] + (fx / l) * side * LAT), (S.DF[i] = atan2(fx / l, -fy / l));\n  }\n  pathAt(S, sf), (S.sfx = PP[0]), (S.sfy = PP[1]);\n  pathAt(S, sf + SLED), (S.sbx = PP[0]), (S.sby = PP[1]);\n  (S.ux = (S.sfx - S.sbx) / SLED), (S.uy = (S.sfy - S.sby) / SLED);\n}\n\nfunction step(S, d, k4) {\n  S.t += d;\n  if (S.rest && (S.restT += d) > 10) S.rest = 0;\n  S.v += ((S.rest ? 0 : S.vt) - S.v) * min(1, d * (S.rest ? 1.6 : 0.9));\n  const v = S.v, rate = 0.065 * v * d;\n  // The lead dog aims 22 LEDs up the trail, or swings on a call.\n  let des = S.turnT > 0 ? ((S.turnT -= d), S.turn * 1.15) : cl(atan2(trailX(S, S.ly - 22) - S.lx, 22), -0.5, 0.5);\n  if (abs(S.lx) > 44) des = S.lx > 0 ? -0.6 : 0.6;\n  S.th += cl(des - S.th, -rate, rate);\n  const dist = v * d, fx = sin(S.th), fy = -cos(S.th), oph = S.ph;\n  (S.lx += fx * dist), (S.ly += fy * dist), (S.acc += dist), (S.ph += dist / STRIDE);\n  for (; S.acc >= 0.5; S.np++) (S.acc -= 0.5), (S.PX[S.np & (PL - 1)] = S.lx - fx * S.acc), (S.PY[S.np & (PL - 1)] = S.ly - fy * S.acc);\n  layout(S);\n  // Each foot leaves a print and each stride a breath; the runners cut grooves.\n  for (let i = 0; i \u003c S.nd; i++) {\n    const a = sin(S.DF[i]), b = -cos(S.DF[i]), o = S.DO[i];\n    for (let l = 0; l \u003c 4; l++) {\n      const fa = (LJ[l] + 1.5) * Z, fb = l & 1 ? Z : -Z;\n      if (floor(S.ph + o + LO[l]) > floor(oph + o + LO[l])) stamp(S, S.DX[i] + a * fa - b * fb, S.DY[i] + b * fa + a * fb, 0.22, 1);\n    }\n    if (floor(S.ph + o * 3) > floor(oph + o * 3)) {\n      const p = S.bi++ & 255;\n      (S.BX[p] = S.DX[i] + a * 4.6 * Z), (S.BY[p] = S.DY[i] + b * 4.6 * Z), (S.BA[p] = 0.01);\n    }\n  }\n  const ux = S.ux, uy = S.uy;\n  for (let e = -1; e \u003c= dist - 0.5; e += 0.5) for (let r = -2 * Z; r \u003c 3 * Z; r += 4 * Z) stamp(S, S.sbx - uy * r + ux * e, S.sby + ux * r + uy * e, 0.3, 2);\n  // The camera keeps the musher at row 118.\n  S.cx += ((S.lx + S.sbx) / 2 - 32 + (S.k1 \u003c 0.6 ? 6 : -6) - S.cx) * min(1, d * 1.5);\n  S.cy = S.sby - 118;\n  while (S.gy > S.cy - 40) genRow(S, --S.gy);\n  while (S.cpY[S.cpY.length - 1] > S.ly - 420) plan(S);\n  while (S.cpY.length > 4 && S.cpY[2] > S.ly + 300) S.cpY.shift(), S.cpX.shift();\n  S.feat = S.feat.filter((f) => f.y0 \u003c S.gy);\n  for (let p = 0, wv = (4 + 60 * k4) * d; p \u003c 256; p++) if (S.BA[p] \u003c 1.5) (S.BA[p] += d), (S.BX[p] += GX * wv), (S.BY[p] += GY * wv);\n  S.wind += (8 + 90 * k4) * d;\n}\n\n// Each leg from the side, joint to knee to foot; the hind pair lands first.\nconst LO = [0.5, 0.58, 0, 0.08], LJ = [1.1, 1.1, -1.9, -1.9], LG = new Float64Array(24);\nfunction legs(ph, run, bob) {\n  for (let l = 0; l \u003c 4; l++) {\n    const p = (((ph + LO[l]) % 1) + 1) % 1, R = 1.8 * run, ja = LJ[l], jh = 2.2 + bob, u = (p - 0.42) / 0.58;\n    const fa = ja + (p \u003c 0.42 ? R * (1 - p / 0.21) : -R + 2 * R * u * u * (3 - 2 * u)), fh = p \u003c 0.42 ? 0 : 0.9 * run * sin(PI * u);\n    const dx = fa - ja, dy = fh - jh, dd = sqrt(dx * dx + dy * dy), k = sqrt(max(0, 1.69 - (dd * dd) / 4)) / max(dd, 0.01), o = l * 6;\n    (LG[o] = ja), (LG[o + 1] = jh), (LG[o + 2] = (ja + fa) / 2 + dy * k), (LG[o + 3] = (jh + fh) / 2 - dx * k), (LG[o + 4] = fa), (LG[o + 5] = fh);\n  }\n}\n// Distance to a capsule; OO keeps the offset for shading.\nconst OO = new Float64Array(2);\nfunction cap(a, b, a0, b0, a1, b1, r) {\n  const pa = a - a0, pb = b - b0, ba = a1 - a0, bb = b1 - b0, t = cl((pa * ba + pb * bb) / (ba * ba + bb * bb + 1e-9), 0, 1), oa = pa - ba * t, ob = pb - bb * t;\n  (OO[0] = oa), (OO[1] = ob);\n  return sqrt(oa * oa + ob * ob) - r;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], k1 = cl(k[0], 0, 1), b = input.btnPressed || [];\n  (S.vt = 10 * cl(k[1], 0.2, 3)), (S.nd = cl(Math.round(k[2]), 8, 14)), (S.k4 = cl(k[3], 0, 1));\n  if (k1 !== S.k1) {\n    // New light: all ice is lit again.\n    let i = 0;\n    while (i \u003c KL.length - 2 && k1 > KL[i + 1][0]) i++;\n    for (let j = 1; j \u003c 9; j++) S.L[j] = mix(KL[i][j], KL[i + 1][j], sm(KL[i][0], KL[i + 1][0], k1));\n    (S.k1 = k1), S.gen++;\n  }\n  for (; !S.live; S.live = S.t > 6 ? 1 : 0) step(S, 1 / 30, S.k4);\n  if (b[0]) (S.turn = S.lx > 0 ? -1 : 1), (S.turnT = 1.6);\n  if (b[1]) (S.rest = 1 - S.rest), (S.restT = 0);\n  step(S, cl(dt || 0, 0, 0.1), S.k4);\n}\n\n// Per frame: the frame, the shadow mask, the light and the LED paint works on.\nlet F, SM, LC, LL, Lx, Ly, cE, sE, PO, La, Lb;\nfunction put(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  (F[o] += (r - F[o]) * a), (F[o + 1] += (g - F[o + 1]) * a), (F[o + 2] += (b - F[o + 2]) * a);\n}\n// Lay a part (distance d, radius r, 0 if flat) of colour c on LED PO.\nfunction paint(d, r, c, f) {\n  const q = cl(0.5 - d * Z, 0, 1) * f, nz = r ? sqrt(max(0, 1 - (OO[0] * OO[0] + OO[1] * OO[1]) / (r * r))) : 1, df = r ? max(0, ((OO[0] * La + OO[1] * Lb) / r) * cE + nz * sE) : sE;\n  if (q > 0) for (let k = 0; k \u003c 3; k++) F[PO + k] += (c[k] * (LL[k + 1] * min(2, df / sE) + LL[k + 4] * (0.55 + 0.45 * nz)) - F[PO + k]) * q;\n}\n// Nearest capsule of side view P; bob lifts the body.\nfunction side(P, a, h, bob) {\n  let d = 99;\n  for (let j = 0; j \u003c P.length; j += 5) d = min(d, cap(a, h, P[j], P[j + 1] + bob, P[j + 2], P[j + 3] + bob, P[j + 4]));\n  return d;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  (F = S.F), (SM = S.SM), (LC = S.LC), (LL = S.L);\n  const { HL, HT, AL, MT, AM, DI, L, TM, LI, SQ, GN, cx, cy, t, k4, gen, nd: n } = S, run = (S.run = cl(S.v / 6, 0, 1));\n  // Sun in the upper left, moon in the upper right.\n  const night = S.k1 > 0.6, lx = (Lx = night ? 0.85 : -0.8), ly = (Ly = night ? -0.53 : -0.6), te = L[7], aur = L[8];\n  (cE = 1 / sqrt(1 + te * te)), (sE = te * cE);\n  const dON = L[1] + L[2] + L[3] > 3, Kx = -lx / te, Ky = -ly / te, ox = floor(cx), oy = floor(cy), fx = cx - ox, fy = cy - oy;\n  let hmax = -9, hmin = 9;\n  for (let j = 0, q = 0; j \u003c HH; j++)\n    for (let i = 0, ro = rw(oy - MY + j); i \u003c HW; i++, q++) {\n      const h = (HL[q] = HT[ro + cl(ox - MX + i + XO, 0, RX - 1)]);\n      (hmax = max(hmax, h)), (hmin = min(hmin, h));\n    }\n  const ms = min(46, floor((hmax - hmin) / te) + 1);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0, ro = rw(oy + ty); tx \u003c TW; tx++) {\n      const wi = ro + cl(ox + tx + XO, 0, RX - 1);\n      // Ice keeps its light until the light or the ice changes.\n      if (GN[wi] !== gen) {\n        const k = (ty + MY) * HW + tx + MX, h = HL[k], gx = (HL[k + 1] - HL[k - 1]) * 0.7, gy = (HL[k + HW] - HL[k - HW]) * 0.7;\n        const inv = 1 / sqrt(gx * gx + gy * gy + 1), dif = (-gx * lx * cE - gy * ly * cE + sE) * inv;\n        let lt = 0;\n        if (dif > 0 && dON) {\n          let px = tx + MX + 0.5, py = ty + MY + 0.5, rh = h, oc = -1;\n          for (let s = 0; s \u003c ms && rh \u003c= hmax; s++) (px += lx), (py += ly), (rh += te), (oc = max(oc, HL[(py | 0) * HW + (px | 0)] - rh));\n          lt = min(2.2, dif / sE) * (1 - sm(-0.15, 0.3, oc));\n        }\n        // Slopes facing the light's side of the sky catch more sky.\n        const cav = cl(((HL[k - 1] + HL[k + 1] + HL[k - HW] + HL[k + HW]) * 0.25 - h) * 0.6, -0.15, 0.3), nh = cl((-gx * lx - gy * ly) * inv * 2.5, -0.6, 0.6);\n        (LI[wi] = lt), (SQ[wi] = (0.6 + 0.4 * inv) * (1 - cav) * (1 + 0.5 * nh)), (GN[wi] = gen);\n      }\n      // Aurora light; young ice and water mirror the sky.\n      const sk = SQ[wi], mt = MT[wi], o = (ty * TW + tx) * 3, lit = LI[wi] * (mt === 3 ? 0.1 : 1);\n      const eg = aur > 0 ? aur * 100 * (0.5 + 0.5 * sin((ox + tx) * 0.05 + (oy + ty) * 0.013 + 1.4 * sin((oy + ty) * 0.021 - t * 0.2) + t * 0.3)) ** 8 : 0;\n      const rf = mt > 1 ? 0.3 : 0;\n      for (let c = 0; c \u003c 3; c++) (AM[o + c] = (AL[wi * 3 + c] / 255) * (L[4 + c] * sk + eg * (c === 1 ? 1 : 0.15)) + rf * L[4 + c]), (DI[o + c] = (AL[wi * 3 + c] / 255) * L[1 + c] * lit);\n    }\n\n  // Shadows: each side view thrown along the snow.\n  SM.fill(0);\n  const ux = S.ux, uy = S.uy;\n  for (let i = 0; i \u003c n && dON; i++) {\n    const a = S.DF[i], ph = S.ph + S.DO[i], bob = 0.22 * run * sin(2 * PI * ph);\n    legs(ph, run, bob);\n    shadowOf(S.DX[i] - cx + fx, S.DY[i] - cy + fy, sin(a), -cos(a), Kx, Ky, 4.6, 5.6, DOG, bob, 1);\n  }\n  if (dON) shadowOf(S.sbx - cx + fx, S.sby - cy + fy, ux, uy, Kx, Ky, 16, 11, SLD, 0, 0);\n  // Snow between grid points, shadows taken out.\n  for (let i = 0, o = 0; i \u003c TW * TH; i++) for (let c = 0, s = 1 - 0.55 * SM[i]; c \u003c 3; c++, o++) AM[o] += DI[o] * s;\n  const w00 = (1 - fx) * (1 - fy), w10 = fx * (1 - fy), w01 = (1 - fx) * fy, w11 = fx * fy;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, q = y * TW * 3; x \u003c W; x++) for (let c = 0; c \u003c 3; c++, p++, q++) F[p] = w00 * AM[q] + w10 * AM[q + 3] + w01 * AM[q + TW * 3] + w11 * AM[q + TW * 3 + 3];\n\n  // Spindrift, under the dogs.\n  for (let c = 0; c \u003c 3; c++) LC[c] = L[4 + c] * 0.8 + L[1 + c] * 0.9;\n  if (k4 > 0.01) {\n    const th = 0.68 - 0.36 * k4, hz = 0.24 * k4 * k4;\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const wx = x + cx, wy = y + cy, al = wx * GX + wy * GY - S.wind, ac = -wx * GY + wy * GX, n1 = 0.62 * vn(al * 0.055, ac * 0.325);\n        if (n1 + 0.38 \u003c th && hz \u003c 0.004) continue;\n        const q = sm(th, th + 0.25, n1 + 0.38 * vn(al * 0.125 + 17, ac * 0.65 + 5)) * (0.4 + 0.6 * k4) * 0.9 + hz, p = i * 3;\n        for (let c = 0; c \u003c 3; c++) F[p + c] += ((LC[c] + 25 + 7.5 * c) * 1.1 - F[p + c]) * q;\n      }\n  }\n  // The team, then breath.\n  gangline(S);\n  for (let i = 0; i \u003c n; i++) dog(S, i);\n  sled(S.sbx - cx, S.sby - cy, ux, uy);\n  for (let p = 0; p \u003c 256; p++) {\n    const ag = S.BA[p], bx = S.BX[p] - cx, by = S.BY[p] - cy, r = 0.7 + ag * (1.2 + k4), al = 0.32 * (1 - ag / 1.5) * (1 - 0.5 * k4);\n    for (let y = floor(by - r); y \u003c= by + r && ag \u003c 1.5; y++)\n      for (let x = floor(bx - r); x \u003c= bx + r; x++) put(x, y, LC[0] * 1.15, LC[1] * 1.15, LC[2] * 1.15, al * (1 - ((x + 0.5 - bx) ** 2 + (y + 0.5 - by) ** 2) / (r * r)));\n  }\n  const tm = (v) => TM[min(1199, v | 0)];\n  for (let i = 0, p = 0; i \u003c N; i++, p += 3) display.setPixel(i & 63, i >> 6, tm(F[p]), tm(F[p + 1]), tm(F[p + 2]));\n}\n\n// A shadow: each grid point maps back to (a, h) in side view P.\nfunction shadowOf(x, y, Fx, Fy, Kx, Ky, A, Hh, P, bob, withLegs) {\n  const det = Fx * Ky - Fy * Kx, ax = abs(Fx) * A * Z, ay = abs(Fy) * A * Z, hx = Kx * Hh * Z, hy = Ky * Hh * Z;\n  for (let py = max(0, floor(y - ay + min(0, hy))); py \u003c= min(TH - 1, y + ay + max(0, hy)) && abs(det) > 0.05; py++)\n    for (let px = max(0, floor(x - ax + min(0, hx))); px \u003c= min(TW - 1, x + ax + max(0, hx)); px++) {\n      const rx = (px + 0.5 - x) / Z, ry = (py + 0.5 - y) / Z, a = (rx * Ky - ry * Kx) / det, h = (Fx * ry - Fy * rx) / det, i = py * TW + px;\n      if (h \u003c -0.6 || h > Hh || a \u003c -A || a > A) continue;\n      let d = side(P, a, h, bob);\n      for (let o = 0; o \u003c 24 && withLegs && h \u003c 3.2; o += 6) if (abs(a - LG[o + 2]) \u003c 2.2) d = min(d, cap(a, h, LG[o], LG[o + 1], LG[o + 2], LG[o + 3], 0.36), cap(a, h, LG[o + 2], LG[o + 3], LG[o + 4], LG[o + 5], 0.28));\n      SM[i] = max(SM[i], cl(0.6 - d * 1.4 * Z, 0, 1));\n    }\n}\n// The gangline, in soft dots from the lead dog to the sled.\nfunction gangline(S) {\n  for (let s = (S.nd & 1 ? 2.6 : -1) * Z; s \u003c (((S.nd + 1) >> 1) - 1) * S.pt + 8 * Z; s += 0.6) {\n    pathAt(S, s);\n    const x = PP[0] - S.cx - 0.5, y = PP[1] - S.cy - 0.5;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = floor(x) + (j & 1), Y = floor(y) + (j >> 1);\n      put(X, Y, LINE[0] * LC[0], LINE[1] * LC[1], LINE[2] * LC[2], 0.45 * (1 - abs(x - X)) * (1 - abs(y - Y)));\n    }\n  }\n}\n\n// A dog from above: legs, saddle, harness, neck, head, curled tail.\nfunction dog(S, i) {\n  const x = S.DX[i] - S.cx, y = S.DY[i] - S.cy, an = S.DF[i], Fx = sin(an), Fy = -cos(an), ph = S.ph + S.DO[i], [BK, SD, FC] = COAT[S.DC[i]], ext = sin(2 * PI * ph) * S.run, ts = i & 1 ? 1 : -1;\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  legs(ph, S.run, 0);\n  for (let py = max(0, floor(y - 5.4 * Z)); py \u003c= min(H - 1, y + 5.4 * Z); py++)\n    for (let px = max(0, floor(x - 5.4 * Z)); px \u003c= min(W - 1, x + 5.4 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx;\n      if (a * a + b * b > 30) continue;\n      PO = (py * W + px) * 3;\n      for (let l = 0; l \u003c 24; l += 6) paint(cap(a, b, LG[l], l % 12 ? 0.85 : -0.85, LG[l + 4], l % 12 ? 0.95 : -0.95, 0.38), 0.38, SD, 1);\n      const d = cap(a, b, -2.1 - 0.25 * ext, 0, 1.1 + 0.15 * ext, 0, 1.12), q = cl(0.5 - d * Z, 0, 1);\n      paint(d, 1.12, SD, 1);\n      if (q > 0) paint(d, 1.12, BK, sm(0.85, 0.35, abs(OO[1])) * q), abs(a - 0.7) \u003c 0.45 && paint(d, 1.12, HARN, q);\n      paint(cap(a, b, 1.4, 0, 2.7, 0, 0.55), 0.55, SD, 1);\n      paint(cap(a, b, 3, 0, 3.3, 0, 0.8), 0.8, FC, 1);\n      paint(cap(a, b, 3.5, 0, 4.4, 0, 0.42), 0.42, FC, 1);\n      paint(cap(a, b, -2.2, ts * 0.35, -2.2, ts * 0.35, 0.75), 0.75, FC, 1);\n    }\n}\n\n// The sled: runners, slats, load, handlebar, the musher.\nfunction sled(x, y, Fx, Fy) {\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  for (let py = max(0, floor(y - 17 * Z)); py \u003c= min(H - 1, y + 17 * Z); py++)\n    for (let px = max(0, floor(x - 17 * Z)); px \u003c= min(W - 1, x + 17 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx, ab = abs(b);\n      if (a \u003c -3 || a > 16 || ab > 3.2) continue;\n      PO = (py * W + px) * 3;\n      paint(cap(a, ab, -2.2, 2, 14.6, 2, 0.4), 0, DARK, 1);\n      paint(max(ab - 1.7, abs(a - 8.4) - 5.6), 0, a % 1.6 \u003c 1.1 ? WOOD : DARK, 1);\n      paint(max(ab - 1.3, abs(a - 8.7) - 3.2) - 0.25, 0, LOAD, 1);\n      paint(cap(a, b, 2.7, -2.3, 2.7, 2.3, 0.35), 0, DARK, 1);\n      paint(cap(a, b, 0.7, -1.4, 0.7, 1.4, 1), 1, RED, 1);\n      paint(cap(a, b, 1, 0, 1, 0, 1.1), 1.1, FUR, 1);\n    }\n}\n","layer":{"id":"layer-sled-dogs","type":"code","name":"sled-dogs","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sled Dogs\n// Family:  polar\n// Idea:    Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after dog-sled teams on Arctic sea ice, here in pairs on a gangline (the tandem hitch) rather than the fan hitch used in Greenland\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1\n//\n// Knob 1: Light. A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow.\n// Knob 2: Speed. At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower.\n// Knob 3: Dogs. Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front.\n// Knob 4: Wind. Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice.\n// Buttons: K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.\n\nconst W = 64, H = 128, N = W * H;\n// The ice: a ring of world rows, x from -128 to 127.\nconst RX = 256, XO = 128, RY = 256, RN = RX * RY;\n// The shading grid and the window of heights around it.\nconst TW = 65, TH = 129, MX = 48, MY = 30, HW = TW + 2 * MX, HH = TH + 2 * MY;\n// Dogs are drawn in sixths of a metre, grown by Z.\nconst Z = 1.4, PITCH = 11 * Z, LAT = 2.5 * Z, STRIDE = 9 * Z, SLED = 15 * Z, PL = 1024;\nconst { min, max, floor, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rw = (y) => (((y % RY) + RY) % RY) * RX;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// The prevailing wind, which the sastrugi follow.\nconst GX = -0.8, GY = 0.6;\n// K1 stops: direct rgb, sky rgb, tan of elevation, aurora.\nconst KL = [\n  [0, 208, 146, 56, 64, 94, 160, 0.3, 0],\n  [0.33, 205, 122, 44, 60, 80, 142, 0.17, 0],\n  [0.6, 0, 0, 0, 84, 112, 186, 0.2, 0],\n  [1, 52, 64, 92, 12, 22, 52, 0.32, 1],\n].map((k) => Float64Array.from(k));\n// Coats from above, dark with a light face: black, grey, red, sable, black.\nconst COAT = [\n  [28, 26, 30, 64, 60, 60, 236, 232, 228],\n  [64, 62, 66, 112, 108, 104, 226, 222, 214],\n  [110, 56, 26, 150, 92, 50, 236, 220, 198],\n  [58, 42, 28, 104, 80, 56, 232, 216, 192],\n  [24, 22, 22, 44, 40, 38, 220, 214, 206],\n].map((c) => [0, 3, 6].map((j) => Float64Array.from(c.slice(j, j + 3), (v) => v / 255)));\nconst HARN = [1, 0.5, 0.04], LINE = [0.2, 0.17, 0.22], WOOD = [0.62, 0.46, 0.3], DARK = [0.26, 0.18, 0.12], LOAD = [0.44, 0.34, 0.24], RED = [0.78, 0.15, 0.1], FUR = [0.74, 0.66, 0.54];\n// Side views as capsules (a, h, a, h, r): a dog; the sled and musher.\nconst DOG = [-2, 2.75, 1.2, 2.95, 0.82, 1.2, 3.2, 2.7, 3.95, 0.6, 2.7, 3.95, 3.9, 3.65, 0.42, 2.55, 4.4, 2.7, 5, 0.22, -2.2, 3.2, -2.6, 4.2, 0.42, -2.6, 4.2, -1.8, 4.7, 0.36];\nconst SLD = [-1.5, 0.8, 14.5, 0.8, 0.55, 5.5, 1.8, 11.5, 1.8, 1, 2.6, 0.8, 2.6, 5.8, 0.3, 0.45, 0, 0.7, 5, 0.6, 0.7, 5, 0.9, 9, 1.15, 1, 10.2, 1, 10.3, 0.85, 1, 8.4, 2.5, 6, 0.4];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), U8 = (n) => new Uint8ClampedArray(n);\n  const S = (params.s = {\n    HT: F32(RN), AL: U8(RN * 3), MT: U8(RN), MK: U8(RN), LI: F32(RN), SQ: F32(RN), GN: new Int32Array(RN), gen: 1,\n    HL: F32(HW * HH), AM: F32(TW * TH * 3), DI: F32(TW * TH * 3), SM: F32(TW * TH), F: F32(N * 3), L: new Float64Array(9), TM: U8(1200), LC: new Float64Array(3),\n    PX: F32(PL), PY: F32(PL), np: PL, acc: 0.01, DX: F32(16), DY: F32(16), DF: F32(16), DO: F32(16), DC: U8(16), BX: F32(256), BY: F32(256), BA: F32(256), bi: 0,\n    lx: 0.01, ly: 0.01, th: 0.01, v: 20, vt: 20, ph: 0.01, t: 0.01, cx: -30, cy: -18, gy: 230, nd: 8, sbx: 0.01, sby: 0.01, sfx: 0.01, sfy: 0.01, ux: 0.01, uy: 0.01, run: 0.01, pt: 15.4,\n    rest: 0, restT: 0.01, turn: 1, turnT: 0.01, k1: -1, k4: 0.06, wind: 0.01, live: 0, cpY: [400, 50], cpX: [0, 0], feat: [], nf: 0, sk: 0,\n  });\n  for (let k = 0; k \u003c PL; k++) S.PY[k] = (PL - 1 - k) * 0.5;\n  for (let i = 0; i \u003c 16; i++) (S.DO[i] = hash(i, 3)), (S.DC[i] = floor(hash(i, 8) * 5));\n  for (let c = 0; c \u003c 1200; c++) S.TM[c] = c \u003c 205 ? c : 205 + 50 * (1 - exp(-(c - 205) / 50));\n  plan(S), plan(S), plan(S);\n  for (let y = 230; y > -53; y--) genRow(S, y);\n  S.gy = -53;\n}\n\n// The trail swings between control points.\nfunction trailX(S, y) {\n  const Y = S.cpY, X = S.cpX;\n  let i = 0;\n  while (i \u003c Y.length - 2 && Y[i + 1] > y) i++;\n  return mix(X[i], X[i + 1], sm(0, 1, (Y[i] - y) / (Y[i] - Y[i + 1])));\n}\n// Each obstacle lies across the way on; the trail swings round its end.\nfunction plan(S) {\n  const Y = S.cpY, X = S.cpX, ly = Y[Y.length - 1], lx = X[X.length - 1];\n  if (S.sk++ % 3 === 2) return Y.push(ly - 60 - 30 * rnd()), X.push(cl(lx + (rnd() - 0.5) * 20, -24, 24));\n  const side = abs(lx) > 6 ? (lx > 0 ? 1 : -1) : rnd() \u003c 0.5 ? 1 : -1, x0 = cl(lx - side * (9 + 5 * rnd()), -30, 30), y0 = ly - 60 - 20 * rnd(), sd = floor(rnd() * 999), ph = rnd() * 6;\n  Y.push(y0, y0 - 60 - 20 * rnd()), X.push(x0, cl(x0 + side * (9 + 6 * rnd()), -24, 24));\n  if (S.nf++ % 2 === 0) {\n    // A pressure ridge, square to the sun.\n    const a = -side * (0.5 + 0.4 * rnd()), len = 60 + 40 * rnd(), dx = side * cos(a), dy = sin(a);\n    S.feat.push({ k: 0, px: x0 + side * 4, py: y0, dx, dy, len, hh: 6 + 4 * rnd(), sd, ph, side, ol: 0, y0: y0 + min(0, dy * len) - 22, y1: y0 + max(0, dy * len) + 22 });\n  } else {\n    // A lead: slope, swing, wave number and width in dx, dy, len, hh.\n    const sl = (rnd() - 0.5) * 0.22, am = 3 + 4 * rnd(), w = 10 + 6 * rnd(), e = abs(sl) * (128 + abs(x0)) + am + w;\n    S.feat.push({ k: 1, px: x0, py: y0, dx: sl, dy: am, len: 0.03 + 0.03 * rnd(), hh: w, sd, ph, side, ol: 40 + 40 * rnd(), y0: y0 - e, y1: y0 + e });\n  }\n}\n\nfunction genRow(S, y) {\n  const o = rw(y), { HT, AL, MT } = S, fs = S.feat.filter((f) => y > f.y0 && y \u003c f.y1);\n  for (let i = 0; i \u003c RX; i++) {\n    // Sastrugi: crests with a long back to the sun and a steep lee face, broken into pieces.\n    const x = i - XO, u = x * GX + y * GY, v = -x * GY + y * GX, c = v * 0.085 + 2.4 * vn(u * 0.012, v * 0.012) + 0.7 * vn(u * 0.045, v * 0.03 + 20), cf = c - floor(c), ci = floor(c);\n    const sa = (cf \u003c 0.25 ? cf / 0.25 : (1 - cf) / 0.75) * sm(0.42, 0.75, vn(u * 0.06 + ci * 7.3, ci * 3.1)) * (0.25 + 0.75 * sm(0.3, 0.6, vn(x * 0.022 + 70, y * 0.022)));\n    let h = 0.95 * sa * sa + 0.15 * vn(u * 0.09 + 50, v * 0.34) + vn(x * 0.017 + 9, y * 0.017) - 0.5;\n    const g = 0.955 + 0.045 * hash(x, y);\n    let ar = 0.9 * g, ag = 0.94 * g, ab = g, mt = 0;\n    for (const f of fs) {\n      if (f.k === 0) {\n        // Tilted slabs, rubble at their feet.\n        const rx = x - f.px, ry = y - f.py, t = rx * f.dx + ry * f.dy;\n        if (t \u003c -8 || t > f.len + 8) continue;\n        const s = abs(ry * f.dx - rx * f.dy - 3 * sin(t * 0.06 + f.ph)), bk = floor(t / 3.4), e = sm(-4, 8, t) * sm(f.len + 4, f.len - 16, t), wb = 2.4 + 2.6 * hash(bk, f.sd + 1), gx = floor(x / 3), gy = floor(y / 3);\n        const hb = f.hh * (0.45 + 0.55 * hash(bk, f.sd)) * e;\n        let hr = hb * (1 - s / wb) + 0.5 * hb * (hash(bk, f.sd + 2) - 0.5) * (t / 3.4 - bk - 0.5), q = hash(bk, f.sd + 3);\n        if (hash(gx, gy + f.sd) \u003c 0.2 * e * sm(wb + 6, wb, s) && 0.8 + 1.4 * hash(gy, gx) > hr) (hr = 0.8 + 1.4 * hash(gy, gx)), (q = hash(gx + 7, gy));\n        if (hr > 0.2 && hr > h - 0.2) (h = max(h, hr) + 0.15), (mt = 1), (ar = mix(0.84, 0.44, q)), (ag = mix(0.93, 0.76, q)), (ab = mix(1, 0.92, q));\n      } else {\n        // A refrozen lead: dark young ice with frost flowers, and open water along part of it.\n        const yc = f.py + f.dx * (x - f.px) + f.dy * sin(x * f.len + f.ph), e = abs(y - yc) / (f.hh * (0.35 + 0.3 * vn(x * 0.045, f.sd)));\n        if (e > 1) {\n          h += 0.7 * max(0, 1.4 - e);\n          continue;\n        }\n        const sx = f.side * (x - f.px), gq = mix(0.14, 0.4, e * e) * (0.85 + 0.3 * vn(x * 0.2, y * 0.2)), fr = hash(x + 3, y) \u003c 0.07 ? 0.35 + 0.3 * hash(y, x) : 0;\n        (h = -0.45), (mt = 2), (ar = gq * 0.9 + fr), (ag = gq * 0.97 + fr), (ab = gq * 1.06 + fr);\n        if (e \u003c 0.8 * sm(5, 10, sx) * sm(f.ol + 10, f.ol, sx)) (mt = 3), (h = -0.6), (ar = 0.03), (ag = 0.07), (ab = 0.11);\n      }\n    }\n    const k = o + i;\n    (HT[k] = h), (AL[k * 3] = ar * 255), (AL[k * 3 + 1] = ag * 255), (AL[k * 3 + 2] = ab * 255), (MT[k] = mt), (S.MK[k] = S.GN[k] = 0);\n  }\n}\n\n// A paw print or runner groove in the snow; young ice takes none.\nfunction stamp(S, x, y, depth, bit) {\n  const i = floor(x + 0.5) + XO, yy = floor(y + 0.5), k = rw(yy) + i, A = S.AL;\n  if (i \u003c 0 || i >= RX || S.MK[k] & bit || S.MT[k] > 1) return;\n  S.MK[k] |= bit;\n  (S.HT[k] -= depth), (A[k * 3] *= 0.93), (A[k * 3 + 1] *= 0.95);\n  // Light it again.\n  for (let j = -2; j \u003c 3; j++) for (let q = max(0, i - 2); q \u003c min(RX, i + 3); q++) S.GN[rw(yy + j) + q] = 0;\n}\n\n// The point s LEDs back along the lead dog's path.\nconst PP = new Float64Array(2);\nfunction pathAt(S, s) {\n  const f = S.acc, last = (S.np - 1) & (PL - 1);\n  if (s \u003c= f) return (PP[0] = mix(S.lx, S.PX[last], s / max(f, 1e-6))), (PP[1] = mix(S.ly, S.PY[last], s / max(f, 1e-6)));\n  const k = (s - f) * 2, i = floor(k), r = k - i, a = (S.np - 1 - i) & (PL - 1), b = (S.np - 2 - i) & (PL - 1);\n  (PP[0] = mix(S.PX[a], S.PX[b], r)), (PP[1] = mix(S.PY[a], S.PY[b], r));\n}\n// Dogs in pairs on the path, the sled behind.\nfunction layout(S) {\n  // Long teams close up to fit the panel.\n  const n = S.nd, odd = n & 1, pt = (S.pt = min(PITCH, 76 / (((n + 1) >> 1) - 1))), sf = (((n + 1) >> 1) - 1) * pt + 8 * Z;\n  for (let i = 0; i \u003c n; i++) {\n    const side = odd && !i ? 0 : (odd ? i - 1 : i) & 1 ? 1 : -1, s = ((i + odd) >> 1) * pt + 0.6 * (S.DO[i] - 0.5) + (side > 0 ? 3.5 * Z : 0);\n    pathAt(S, s - 1);\n    const ax = PP[0], ay = PP[1];\n    pathAt(S, s + 1);\n    const fx = ax - PP[0], fy = ay - PP[1], l = sqrt(fx * fx + fy * fy) || 1;\n    pathAt(S, s);\n    (S.DX[i] = PP[0] - (fy / l) * side * LAT), (S.DY[i] = PP[1] + (fx / l) * side * LAT), (S.DF[i] = atan2(fx / l, -fy / l));\n  }\n  pathAt(S, sf), (S.sfx = PP[0]), (S.sfy = PP[1]);\n  pathAt(S, sf + SLED), (S.sbx = PP[0]), (S.sby = PP[1]);\n  (S.ux = (S.sfx - S.sbx) / SLED), (S.uy = (S.sfy - S.sby) / SLED);\n}\n\nfunction step(S, d, k4) {\n  S.t += d;\n  if (S.rest && (S.restT += d) > 10) S.rest = 0;\n  S.v += ((S.rest ? 0 : S.vt) - S.v) * min(1, d * (S.rest ? 1.6 : 0.9));\n  const v = S.v, rate = 0.065 * v * d;\n  // The lead dog aims 22 LEDs up the trail, or swings on a call.\n  let des = S.turnT > 0 ? ((S.turnT -= d), S.turn * 1.15) : cl(atan2(trailX(S, S.ly - 22) - S.lx, 22), -0.5, 0.5);\n  if (abs(S.lx) > 44) des = S.lx > 0 ? -0.6 : 0.6;\n  S.th += cl(des - S.th, -rate, rate);\n  const dist = v * d, fx = sin(S.th), fy = -cos(S.th), oph = S.ph;\n  (S.lx += fx * dist), (S.ly += fy * dist), (S.acc += dist), (S.ph += dist / STRIDE);\n  for (; S.acc >= 0.5; S.np++) (S.acc -= 0.5), (S.PX[S.np & (PL - 1)] = S.lx - fx * S.acc), (S.PY[S.np & (PL - 1)] = S.ly - fy * S.acc);\n  layout(S);\n  // Each foot leaves a print and each stride a breath; the runners cut grooves.\n  for (let i = 0; i \u003c S.nd; i++) {\n    const a = sin(S.DF[i]), b = -cos(S.DF[i]), o = S.DO[i];\n    for (let l = 0; l \u003c 4; l++) {\n      const fa = (LJ[l] + 1.5) * Z, fb = l & 1 ? Z : -Z;\n      if (floor(S.ph + o + LO[l]) > floor(oph + o + LO[l])) stamp(S, S.DX[i] + a * fa - b * fb, S.DY[i] + b * fa + a * fb, 0.22, 1);\n    }\n    if (floor(S.ph + o * 3) > floor(oph + o * 3)) {\n      const p = S.bi++ & 255;\n      (S.BX[p] = S.DX[i] + a * 4.6 * Z), (S.BY[p] = S.DY[i] + b * 4.6 * Z), (S.BA[p] = 0.01);\n    }\n  }\n  const ux = S.ux, uy = S.uy;\n  for (let e = -1; e \u003c= dist - 0.5; e += 0.5) for (let r = -2 * Z; r \u003c 3 * Z; r += 4 * Z) stamp(S, S.sbx - uy * r + ux * e, S.sby + ux * r + uy * e, 0.3, 2);\n  // The camera keeps the musher at row 118.\n  S.cx += ((S.lx + S.sbx) / 2 - 32 + (S.k1 \u003c 0.6 ? 6 : -6) - S.cx) * min(1, d * 1.5);\n  S.cy = S.sby - 118;\n  while (S.gy > S.cy - 40) genRow(S, --S.gy);\n  while (S.cpY[S.cpY.length - 1] > S.ly - 420) plan(S);\n  while (S.cpY.length > 4 && S.cpY[2] > S.ly + 300) S.cpY.shift(), S.cpX.shift();\n  S.feat = S.feat.filter((f) => f.y0 \u003c S.gy);\n  for (let p = 0, wv = (4 + 60 * k4) * d; p \u003c 256; p++) if (S.BA[p] \u003c 1.5) (S.BA[p] += d), (S.BX[p] += GX * wv), (S.BY[p] += GY * wv);\n  S.wind += (8 + 90 * k4) * d;\n}\n\n// Each leg from the side, joint to knee to foot; the hind pair lands first.\nconst LO = [0.5, 0.58, 0, 0.08], LJ = [1.1, 1.1, -1.9, -1.9], LG = new Float64Array(24);\nfunction legs(ph, run, bob) {\n  for (let l = 0; l \u003c 4; l++) {\n    const p = (((ph + LO[l]) % 1) + 1) % 1, R = 1.8 * run, ja = LJ[l], jh = 2.2 + bob, u = (p - 0.42) / 0.58;\n    const fa = ja + (p \u003c 0.42 ? R * (1 - p / 0.21) : -R + 2 * R * u * u * (3 - 2 * u)), fh = p \u003c 0.42 ? 0 : 0.9 * run * sin(PI * u);\n    const dx = fa - ja, dy = fh - jh, dd = sqrt(dx * dx + dy * dy), k = sqrt(max(0, 1.69 - (dd * dd) / 4)) / max(dd, 0.01), o = l * 6;\n    (LG[o] = ja), (LG[o + 1] = jh), (LG[o + 2] = (ja + fa) / 2 + dy * k), (LG[o + 3] = (jh + fh) / 2 - dx * k), (LG[o + 4] = fa), (LG[o + 5] = fh);\n  }\n}\n// Distance to a capsule; OO keeps the offset for shading.\nconst OO = new Float64Array(2);\nfunction cap(a, b, a0, b0, a1, b1, r) {\n  const pa = a - a0, pb = b - b0, ba = a1 - a0, bb = b1 - b0, t = cl((pa * ba + pb * bb) / (ba * ba + bb * bb + 1e-9), 0, 1), oa = pa - ba * t, ob = pb - bb * t;\n  (OO[0] = oa), (OO[1] = ob);\n  return sqrt(oa * oa + ob * ob) - r;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], k1 = cl(k[0], 0, 1), b = input.btnPressed || [];\n  (S.vt = 10 * cl(k[1], 0.2, 3)), (S.nd = cl(Math.round(k[2]), 8, 14)), (S.k4 = cl(k[3], 0, 1));\n  if (k1 !== S.k1) {\n    // New light: all ice is lit again.\n    let i = 0;\n    while (i \u003c KL.length - 2 && k1 > KL[i + 1][0]) i++;\n    for (let j = 1; j \u003c 9; j++) S.L[j] = mix(KL[i][j], KL[i + 1][j], sm(KL[i][0], KL[i + 1][0], k1));\n    (S.k1 = k1), S.gen++;\n  }\n  for (; !S.live; S.live = S.t > 6 ? 1 : 0) step(S, 1 / 30, S.k4);\n  if (b[0]) (S.turn = S.lx > 0 ? -1 : 1), (S.turnT = 1.6);\n  if (b[1]) (S.rest = 1 - S.rest), (S.restT = 0);\n  step(S, cl(dt || 0, 0, 0.1), S.k4);\n}\n\n// Per frame: the frame, the shadow mask, the light and the LED paint works on.\nlet F, SM, LC, LL, Lx, Ly, cE, sE, PO, La, Lb;\nfunction put(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  (F[o] += (r - F[o]) * a), (F[o + 1] += (g - F[o + 1]) * a), (F[o + 2] += (b - F[o + 2]) * a);\n}\n// Lay a part (distance d, radius r, 0 if flat) of colour c on LED PO.\nfunction paint(d, r, c, f) {\n  const q = cl(0.5 - d * Z, 0, 1) * f, nz = r ? sqrt(max(0, 1 - (OO[0] * OO[0] + OO[1] * OO[1]) / (r * r))) : 1, df = r ? max(0, ((OO[0] * La + OO[1] * Lb) / r) * cE + nz * sE) : sE;\n  if (q > 0) for (let k = 0; k \u003c 3; k++) F[PO + k] += (c[k] * (LL[k + 1] * min(2, df / sE) + LL[k + 4] * (0.55 + 0.45 * nz)) - F[PO + k]) * q;\n}\n// Nearest capsule of side view P; bob lifts the body.\nfunction side(P, a, h, bob) {\n  let d = 99;\n  for (let j = 0; j \u003c P.length; j += 5) d = min(d, cap(a, h, P[j], P[j + 1] + bob, P[j + 2], P[j + 3] + bob, P[j + 4]));\n  return d;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  (F = S.F), (SM = S.SM), (LC = S.LC), (LL = S.L);\n  const { HL, HT, AL, MT, AM, DI, L, TM, LI, SQ, GN, cx, cy, t, k4, gen, nd: n } = S, run = (S.run = cl(S.v / 6, 0, 1));\n  // Sun in the upper left, moon in the upper right.\n  const night = S.k1 > 0.6, lx = (Lx = night ? 0.85 : -0.8), ly = (Ly = night ? -0.53 : -0.6), te = L[7], aur = L[8];\n  (cE = 1 / sqrt(1 + te * te)), (sE = te * cE);\n  const dON = L[1] + L[2] + L[3] > 3, Kx = -lx / te, Ky = -ly / te, ox = floor(cx), oy = floor(cy), fx = cx - ox, fy = cy - oy;\n  let hmax = -9, hmin = 9;\n  for (let j = 0, q = 0; j \u003c HH; j++)\n    for (let i = 0, ro = rw(oy - MY + j); i \u003c HW; i++, q++) {\n      const h = (HL[q] = HT[ro + cl(ox - MX + i + XO, 0, RX - 1)]);\n      (hmax = max(hmax, h)), (hmin = min(hmin, h));\n    }\n  const ms = min(46, floor((hmax - hmin) / te) + 1);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0, ro = rw(oy + ty); tx \u003c TW; tx++) {\n      const wi = ro + cl(ox + tx + XO, 0, RX - 1);\n      // Ice keeps its light until the light or the ice changes.\n      if (GN[wi] !== gen) {\n        const k = (ty + MY) * HW + tx + MX, h = HL[k], gx = (HL[k + 1] - HL[k - 1]) * 0.7, gy = (HL[k + HW] - HL[k - HW]) * 0.7;\n        const inv = 1 / sqrt(gx * gx + gy * gy + 1), dif = (-gx * lx * cE - gy * ly * cE + sE) * inv;\n        let lt = 0;\n        if (dif > 0 && dON) {\n          let px = tx + MX + 0.5, py = ty + MY + 0.5, rh = h, oc = -1;\n          for (let s = 0; s \u003c ms && rh \u003c= hmax; s++) (px += lx), (py += ly), (rh += te), (oc = max(oc, HL[(py | 0) * HW + (px | 0)] - rh));\n          lt = min(2.2, dif / sE) * (1 - sm(-0.15, 0.3, oc));\n        }\n        // Slopes facing the light's side of the sky catch more sky.\n        const cav = cl(((HL[k - 1] + HL[k + 1] + HL[k - HW] + HL[k + HW]) * 0.25 - h) * 0.6, -0.15, 0.3), nh = cl((-gx * lx - gy * ly) * inv * 2.5, -0.6, 0.6);\n        (LI[wi] = lt), (SQ[wi] = (0.6 + 0.4 * inv) * (1 - cav) * (1 + 0.5 * nh)), (GN[wi] = gen);\n      }\n      // Aurora light; young ice and water mirror the sky.\n      const sk = SQ[wi], mt = MT[wi], o = (ty * TW + tx) * 3, lit = LI[wi] * (mt === 3 ? 0.1 : 1);\n      const eg = aur > 0 ? aur * 100 * (0.5 + 0.5 * sin((ox + tx) * 0.05 + (oy + ty) * 0.013 + 1.4 * sin((oy + ty) * 0.021 - t * 0.2) + t * 0.3)) ** 8 : 0;\n      const rf = mt > 1 ? 0.3 : 0;\n      for (let c = 0; c \u003c 3; c++) (AM[o + c] = (AL[wi * 3 + c] / 255) * (L[4 + c] * sk + eg * (c === 1 ? 1 : 0.15)) + rf * L[4 + c]), (DI[o + c] = (AL[wi * 3 + c] / 255) * L[1 + c] * lit);\n    }\n\n  // Shadows: each side view thrown along the snow.\n  SM.fill(0);\n  const ux = S.ux, uy = S.uy;\n  for (let i = 0; i \u003c n && dON; i++) {\n    const a = S.DF[i], ph = S.ph + S.DO[i], bob = 0.22 * run * sin(2 * PI * ph);\n    legs(ph, run, bob);\n    shadowOf(S.DX[i] - cx + fx, S.DY[i] - cy + fy, sin(a), -cos(a), Kx, Ky, 4.6, 5.6, DOG, bob, 1);\n  }\n  if (dON) shadowOf(S.sbx - cx + fx, S.sby - cy + fy, ux, uy, Kx, Ky, 16, 11, SLD, 0, 0);\n  // Snow between grid points, shadows taken out.\n  for (let i = 0, o = 0; i \u003c TW * TH; i++) for (let c = 0, s = 1 - 0.55 * SM[i]; c \u003c 3; c++, o++) AM[o] += DI[o] * s;\n  const w00 = (1 - fx) * (1 - fy), w10 = fx * (1 - fy), w01 = (1 - fx) * fy, w11 = fx * fy;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, q = y * TW * 3; x \u003c W; x++) for (let c = 0; c \u003c 3; c++, p++, q++) F[p] = w00 * AM[q] + w10 * AM[q + 3] + w01 * AM[q + TW * 3] + w11 * AM[q + TW * 3 + 3];\n\n  // Spindrift, under the dogs.\n  for (let c = 0; c \u003c 3; c++) LC[c] = L[4 + c] * 0.8 + L[1 + c] * 0.9;\n  if (k4 > 0.01) {\n    const th = 0.68 - 0.36 * k4, hz = 0.24 * k4 * k4;\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const wx = x + cx, wy = y + cy, al = wx * GX + wy * GY - S.wind, ac = -wx * GY + wy * GX, n1 = 0.62 * vn(al * 0.055, ac * 0.325);\n        if (n1 + 0.38 \u003c th && hz \u003c 0.004) continue;\n        const q = sm(th, th + 0.25, n1 + 0.38 * vn(al * 0.125 + 17, ac * 0.65 + 5)) * (0.4 + 0.6 * k4) * 0.9 + hz, p = i * 3;\n        for (let c = 0; c \u003c 3; c++) F[p + c] += ((LC[c] + 25 + 7.5 * c) * 1.1 - F[p + c]) * q;\n      }\n  }\n  // The team, then breath.\n  gangline(S);\n  for (let i = 0; i \u003c n; i++) dog(S, i);\n  sled(S.sbx - cx, S.sby - cy, ux, uy);\n  for (let p = 0; p \u003c 256; p++) {\n    const ag = S.BA[p], bx = S.BX[p] - cx, by = S.BY[p] - cy, r = 0.7 + ag * (1.2 + k4), al = 0.32 * (1 - ag / 1.5) * (1 - 0.5 * k4);\n    for (let y = floor(by - r); y \u003c= by + r && ag \u003c 1.5; y++)\n      for (let x = floor(bx - r); x \u003c= bx + r; x++) put(x, y, LC[0] * 1.15, LC[1] * 1.15, LC[2] * 1.15, al * (1 - ((x + 0.5 - bx) ** 2 + (y + 0.5 - by) ** 2) / (r * r)));\n  }\n  const tm = (v) => TM[min(1199, v | 0)];\n  for (let i = 0, p = 0; i \u003c N; i++, p += 3) display.setPixel(i & 63, i >> 6, tm(F[p]), tm(F[p + 1]), tm(F[p + 2]));\n}\n\n// A shadow: each grid point maps back to (a, h) in side view P.\nfunction shadowOf(x, y, Fx, Fy, Kx, Ky, A, Hh, P, bob, withLegs) {\n  const det = Fx * Ky - Fy * Kx, ax = abs(Fx) * A * Z, ay = abs(Fy) * A * Z, hx = Kx * Hh * Z, hy = Ky * Hh * Z;\n  for (let py = max(0, floor(y - ay + min(0, hy))); py \u003c= min(TH - 1, y + ay + max(0, hy)) && abs(det) > 0.05; py++)\n    for (let px = max(0, floor(x - ax + min(0, hx))); px \u003c= min(TW - 1, x + ax + max(0, hx)); px++) {\n      const rx = (px + 0.5 - x) / Z, ry = (py + 0.5 - y) / Z, a = (rx * Ky - ry * Kx) / det, h = (Fx * ry - Fy * rx) / det, i = py * TW + px;\n      if (h \u003c -0.6 || h > Hh || a \u003c -A || a > A) continue;\n      let d = side(P, a, h, bob);\n      for (let o = 0; o \u003c 24 && withLegs && h \u003c 3.2; o += 6) if (abs(a - LG[o + 2]) \u003c 2.2) d = min(d, cap(a, h, LG[o], LG[o + 1], LG[o + 2], LG[o + 3], 0.36), cap(a, h, LG[o + 2], LG[o + 3], LG[o + 4], LG[o + 5], 0.28));\n      SM[i] = max(SM[i], cl(0.6 - d * 1.4 * Z, 0, 1));\n    }\n}\n// The gangline, in soft dots from the lead dog to the sled.\nfunction gangline(S) {\n  for (let s = (S.nd & 1 ? 2.6 : -1) * Z; s \u003c (((S.nd + 1) >> 1) - 1) * S.pt + 8 * Z; s += 0.6) {\n    pathAt(S, s);\n    const x = PP[0] - S.cx - 0.5, y = PP[1] - S.cy - 0.5;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = floor(x) + (j & 1), Y = floor(y) + (j >> 1);\n      put(X, Y, LINE[0] * LC[0], LINE[1] * LC[1], LINE[2] * LC[2], 0.45 * (1 - abs(x - X)) * (1 - abs(y - Y)));\n    }\n  }\n}\n\n// A dog from above: legs, saddle, harness, neck, head, curled tail.\nfunction dog(S, i) {\n  const x = S.DX[i] - S.cx, y = S.DY[i] - S.cy, an = S.DF[i], Fx = sin(an), Fy = -cos(an), ph = S.ph + S.DO[i], [BK, SD, FC] = COAT[S.DC[i]], ext = sin(2 * PI * ph) * S.run, ts = i & 1 ? 1 : -1;\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  legs(ph, S.run, 0);\n  for (let py = max(0, floor(y - 5.4 * Z)); py \u003c= min(H - 1, y + 5.4 * Z); py++)\n    for (let px = max(0, floor(x - 5.4 * Z)); px \u003c= min(W - 1, x + 5.4 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx;\n      if (a * a + b * b > 30) continue;\n      PO = (py * W + px) * 3;\n      for (let l = 0; l \u003c 24; l += 6) paint(cap(a, b, LG[l], l % 12 ? 0.85 : -0.85, LG[l + 4], l % 12 ? 0.95 : -0.95, 0.38), 0.38, SD, 1);\n      const d = cap(a, b, -2.1 - 0.25 * ext, 0, 1.1 + 0.15 * ext, 0, 1.12), q = cl(0.5 - d * Z, 0, 1);\n      paint(d, 1.12, SD, 1);\n      if (q > 0) paint(d, 1.12, BK, sm(0.85, 0.35, abs(OO[1])) * q), abs(a - 0.7) \u003c 0.45 && paint(d, 1.12, HARN, q);\n      paint(cap(a, b, 1.4, 0, 2.7, 0, 0.55), 0.55, SD, 1);\n      paint(cap(a, b, 3, 0, 3.3, 0, 0.8), 0.8, FC, 1);\n      paint(cap(a, b, 3.5, 0, 4.4, 0, 0.42), 0.42, FC, 1);\n      paint(cap(a, b, -2.2, ts * 0.35, -2.2, ts * 0.35, 0.75), 0.75, FC, 1);\n    }\n}\n\n// The sled: runners, slats, load, handlebar, the musher.\nfunction sled(x, y, Fx, Fy) {\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  for (let py = max(0, floor(y - 17 * Z)); py \u003c= min(H - 1, y + 17 * Z); py++)\n    for (let px = max(0, floor(x - 17 * Z)); px \u003c= min(W - 1, x + 17 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx, ab = abs(b);\n      if (a \u003c -3 || a > 16 || ab > 3.2) continue;\n      PO = (py * W + px) * 3;\n      paint(cap(a, ab, -2.2, 2, 14.6, 2, 0.4), 0, DARK, 1);\n      paint(max(ab - 1.7, abs(a - 8.4) - 5.6), 0, a % 1.6 \u003c 1.1 ? WOOD : DARK, 1);\n      paint(max(ab - 1.3, abs(a - 8.7) - 3.2) - 0.25, 0, LOAD, 1);\n      paint(cap(a, b, 2.7, -2.3, 2.7, 2.3, 0.35), 0, DARK, 1);\n      paint(cap(a, b, 0.7, -1.4, 0.7, 1.4, 1), 1, RED, 1);\n      paint(cap(a, b, 1, 0, 1, 0, 1.1), 1.1, FUR, 1);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower."},{"name":"Dogs","min":8,"max":14,"about":"Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front."},{"name":"Wind","min":0,"max":1,"about":"Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice."}],"start":[0,2,8,0.06],"measures":{"motion":0.9731,"detail":0.0564,"edges":0.2725,"complexity":2.1928,"coverage":0.9989,"colour":0.1125,"drift":0.1372},"knobResponse":[0.4249,0.2371,0.2343,0.1374]},{"slug":"slinky","title":"Slinky","family":"toy","round":21,"note":"슬링키가 패널 높이만큼 지그재그로 꺾인 계단을 한 칸씩 뒤집히며 내려가요. 코일이 활처럼 휘어 아래 칸으로 쏟아지고, 내려앉은 칸마다 계단등이 켜져요.","idea":"A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","layer":{"id":"layer-slinky","type":"code","name":"slinky","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spring","min":0,"max":1,"about":"Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower."},{"name":"Rise","min":6,"max":12,"about":"How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down."},{"name":"Lamp","min":-1,"max":1,"about":"The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them."}],"start":[0,2,6,0.06],"measures":{"motion":0.1152,"detail":0.057,"edges":0.2572,"complexity":1.8838,"coverage":0.9943,"colour":0.1312,"drift":0.056},"knobResponse":[0.1557,0.043,0.0908,0.2999]},{"slug":"smalti","title":"Smalti","family":"glass","round":19,"note":"라벤나 갈라 플라키디아의 별 궁륭과 기도하는 사도를 어두운 줄눈의 유리와 금 테세라로 128줄에 짜요. 등불이 벽을 오르내리면 저마다 조금씩 기운 금 큐브가 빛의 각도를 만날 때마다 번쩍여요.","idea":"A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","layer":{"id":"layer-smalti","type":"code","name":"smalti","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven."},{"name":"Tesserae","min":2,"max":4,"about":"How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes."},{"name":"Gold","min":0,"max":1,"about":"At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1."}],"start":[0,2,2,0.06],"measures":{"motion":0.0438,"detail":0.2001,"edges":1,"complexity":2.3202,"coverage":0.4186,"colour":0.2372,"drift":0.1208},"knobResponse":[0.0652,0.0785,0.082,0.0729]},{"slug":"snow-monkeys","title":"Snow Monkeys","family":"mammal","round":25,"note":"눈 내리는 지고쿠다니의 해 질 녘, 일본원숭이들이 김 오르는 노천 온천에 어깨까지 잠겨 머리에 눈을 얹은 채 졸거나 서로 털을 골라 줘요. 바위 위의 어미가 물로 걸어 들어오고, 덩어리진 김은 눈 덮인 삼나무 비탈을 지나 패널 꼭대기까지 피어올라요. K1 을 끝까지 돌리면 밤이 되어 석등이 김을 주황으로 물들이고, K1 을 누르면 새끼가 물보라를 일으키며 뛰어들어요.","idea":"At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.","buttons":"K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.","code":"// ===== Patternflow pattern =====\n// Title:   Snow Monkeys\n// Family:  mammal\n// Idea:    At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Japanese macaques (Macaca fuscata) that bathe in the hot spring at Jigokudani, Nagano\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1\n//\n// Knob 1: Light. The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it.\n// Knob 2: Speed. At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower.\n// Knob 3: Monkeys. How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam.\n// Knob 4: Wind. Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it.\n// Buttons: K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.\n\nconst W = 64, H = 128, N = W * H, GW = 32, GH = 64;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The back edge of the pool, and how big a monkey stands at a depth row.\nconst PB = 67;\nconst scl = (y) => 0.74 + (y - PB) * 0.0135;\n// The stone lantern's fire box.\nconst [LX, LY] = [8.5, 50.5];\n// The light from evening to night: ambient, sky overhead, sky at the ridge,\n// lit steam, and the lantern's strength.\nconst LIGHT = [\n  [0, 0.5, 0.6, 0.86, 24, 44, 104, 70, 98, 160, 196, 212, 240, 0.25],\n  [0.5, 0.36, 0.4, 0.66, 16, 20, 62, 84, 66, 118, 150, 156, 196, 0.65],\n  [1, 0.2, 0.24, 0.42, 5, 8, 24, 18, 24, 54, 84, 92, 130, 1.1],\n];\nconst LC = [1, 0.62, 0.3];\nconst SNOW = [232, 238, 250], FUR = [218, 184, 150], FACE = [250, 96, 92], EAR = [214, 132, 124], HAND = [120, 84, 78], EYE = [40, 22, 20];\nconst ROCK = [70, 64, 62], NEEDLE = [24, 46, 36], TRUNK = [52, 38, 30], WATER = [34, 70, 74], STONE = [118, 114, 108];\n// Boulders as half ellipses standing on their water line: centre, radii,\n// depth row. The back rim, the boulder in the pool, the near rocks.\nconst ROCKS = [\n  [2, 68, 12, 8, 66], [17, 69, 8, 6, 66], [30, 69, 9, 5, 66], [45, 68, 11, 6, 66], [61, 68, 10, 9, 66],\n  [53, 92, 13, 12, 90],\n  [6, 132, 15, 14, 126], [28, 133, 12, 12, 127], [48, 132, 11, 13, 126], [64, 129, 10, 15, 125],\n];\n// Cedars on the slope, far to near: apex x and row, height, nearness.\nconst TREES = [];\nfor (let i = 0; i \u003c 10; i++) TREES.push([2 + i * 6.7 + 3 * hash(i, 1), 4 + 9 * hash(i, 2), 16 + 8 * hash(i, 3), 0.3]);\nfor (let i = 0; i \u003c 7; i++) TREES.push([i * 10.5 + 5 * hash(i, 4), 16 + 12 * hash(i, 5), 24 + 10 * hash(i, 6), 0.6]);\nTREES.push([3, 12, 52, 1], [61, 6, 56, 1]);\n// Places in the order the Monkeys knob fills them: x, depth row (the seat\n// row on the rim), how low it sits in the water (0 shoulders out, 1 chin in\n// it), and what it does (0 looks about, 1 dozes, 2 grooms the one before\n// it, 3 sits on the rim rocks).\nconst SLOTS = [\n  [24, 101, 0.15, 1], [34, 93, 0.1, 2], [11, 117, 0.6, 1], [30, 64.5, 0, 3], [52, 119, 0.25, 0], [8, 90, 0.2, 0],\n  [41, 63, 0, 3], [61, 110, 0.3, 0], [31, 79, 0.15, 0], [37, 118, 0.3, 1], [23, 121, 0.5, 1], [14, 77, 0.2, 1],\n  [5, 104, 0.2, 0], [46, 86, 0.1, 0],\n];\n// The boulder seats and the way down into the water, as x and bottom row.\nconst SEAT = [52, 81], EDGE = [46, 83.5], FOOT = [44, 93], SPOT = [47, 103], BSEAT = [60, 83], BLAND = [53, 102], BFOOT = [60, 94];\n\nfunction ramp(g, c) {\n  let j = 0;\n  while (j \u003c LIGHT.length - 2 && g > LIGHT[j + 1][0]) j++;\n  const a = LIGHT[j], b = LIGHT[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, f: F32(N * 3), bg: F32(N * 3), il: F32(N * 3), lm: F32(N), z: new Uint8Array(N), G: F32(GW * GH), key: -1,\n    puffs: [], drops: [], acc: 0, vent: 0.5, fx: 0, fy: 0, gust: 0, w: 0, k1: 0, n: 3, spl: null,\n    R: { st: 0, t: 0, dur: 3, lk: 0, lt: 0, lc: 1 }, B: { st: 0, t: 0, nj: 6.2, lk: 0, lt: 0, lc: 2 },\n  });\n  P.sd = 7;\n  P.mk = SLOTS.map(([x, y, sk, pose], i) => ({ x, y, sk, pose, s: pose > 2 ? 0.86 : scl(y), p: 0, sw: i * 0.3, hy: y - 8, lk: pose === 2 ? -0.8 : 0, lt: 0, lc: 1 + rnd() * 3, e: pose === 1 ? 1 : 0, bl: 2 + rnd() * 3, ph: rnd() * 7, i }));\n  P.flakes = Array.from({ length: 180 }, () => {\n    const z = rnd();\n    return { x: rnd() * W, y: rnd() * H, z, ph: rnd() * 7, land: 40 + z * 88 };\n  });\n  P.flakes.forEach((f) => (f.y = rnd() * f.land));\n  P.rg = Array.from({ length: W }, (_, x) => 8 + 5 * vn(x * 0.07, 1.3) - 0.06 * x);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) P.lm[y * W + x] = exp(-((x + 0.5 - LX) ** 2 + (y + 0.5 - LY) ** 2 * 0.8) / 1500);\n}\n\nfunction spawn(P, x, y, a, g = rnd) {\n  P.puffs.push({ x, y, a, r: 2.5 + 2.5 * g(), age: 0, life: 7 + 5 * g(), vy: -(6 + 5 * g()), ph: g() * 7 });\n}\n\n// The steam: puffs off the water, thick clumps from the spring's mouth, all\n// rising, growing and fading, swayed by the gusts and leaned by the wind.\nfunction steam(P, d) {\n  const w = P.w;\n  P.gust = 0.55 * sin(P.t * 0.31) + 0.3 * sin(P.t * 0.83 + 2);\n  for (P.acc += d * 1.8; P.acc > 1; P.acc--) spawn(P, 2 + rnd() * 60 - w * 22, 74 + rnd() * 44, 0.2 + 0.25 * rnd());\n  if ((P.vent -= d) \u003c 0) {\n    P.vent = 0.7 + rnd() * 1.1;\n    const vx = [9, 22, 36][floor(rnd() * 3)] + rnd() * 6 - 3 - w * 14, vy = 72 + rnd() * 16;\n    for (let n = 0; n \u003c 3; n++) spawn(P, vx + rnd() * 8 - 4, vy + rnd() * 6, 0.4 + 0.25 * rnd());\n  }\n  // Wet fur steams in the cold: a wisp off each monkey's head now and then,\n  // from a generator of its own so the rest of the steam keeps its course.\n  for (const m of P.mk)\n    if (m.p > 0.5 && (m.sw -= d) \u003c 0) {\n      const g = () => ((P.sd = (Math.imul(P.sd, 1103515245) + 12345) >>> 0) / 4294967296);\n      m.sw = 0.35 + g() * 0.6;\n      spawn(P, m.x + (g() - 0.5) * 6 * m.s, m.hy - 3 * m.s, 0.25 + 0.2 * g(), g);\n    }\n  const wx = w * 15 + P.gust * 7;\n  for (const q of P.puffs) {\n    q.age += d;\n    const up = sm(84, 20, q.y);\n    q.x += (wx * (0.3 + 0.7 * up) + 1.6 * sin(q.age * 1.3 + q.ph)) * d;\n    q.y += q.vy * (0.5 + 0.5 * sm(0, 2.5, q.age)) * d;\n    q.r += (0.9 + 0.8 * abs(w)) * d;\n  }\n  P.puffs = P.puffs.filter((q) => q.age \u003c q.life * (1 - 0.35 * abs(w)) && q.y + q.r > -4 && q.x > -30 && q.x \u003c 94);\n  P.fx -= wx * 0.2 * d;\n  P.fy += 1.8 * d;\n}\n\n// Where the mother is on her way between the boulder and the pool, u 0..1.\nfunction path(u) {\n  if (u \u003c 0.3) {\n    const q = sm(0, 0.3, u);\n    return [mix(SEAT[0], EDGE[0], q), mix(SEAT[1], EDGE[1], q), 999, 90];\n  }\n  if (u \u003c 0.55) {\n    const q = sm(0.3, 0.55, u);\n    return [mix(EDGE[0], FOOT[0], q), mix(EDGE[1], FOOT[1], q), 999, 90 + 3 * q];\n  }\n  const q = sm(0.55, 1, u), wl = mix(FOOT[1], SPOT[1], q);\n  return [mix(FOOT[0], SPOT[0], q), wl + 9.5 * q * scl(wl), wl, wl];\n}\n\nfunction look(m, d) {\n  if ((m.lc -= d) \u003c 0) (m.lc = 1.2 + rnd() * 3), (m.lt = floor(rnd() * 3) - 1);\n  m.lk += (m.lt - m.lk) * min(1, d * 5);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.k1 = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 3, 14));\n  P.w = cl(k[3], -1, 1);\n  if (!P.init) {\n    // Open on a pool already steaming.\n    for (let i = 0; i \u003c 120; i++) (P.t += 0.1), steam(P, 0.1);\n    P.t = 0;\n    for (const m of P.mk) m.p = m.i \u003c P.n ? 1 : 0;\n    P.init = true;\n  }\n  const T = (P.t += d);\n  steam(P, d);\n  for (const m of P.mk) {\n    m.p = cl(m.p + (m.i \u003c P.n ? d : -d) * 0.8, 0, 1);\n    if (m.pose % 3 === 0) {\n      look(m, d);\n      if ((m.bl -= d) \u003c 0) m.bl = 2 + rnd() * 4;\n      m.e = m.bl \u003c 0.15 ? 1 : 0;\n    }\n  }\n  // The mother sits on the boulder until she wades in to soak. Later she climbs out again.\n  const R = P.R;\n  if ((R.t += d) >= R.dur) {\n    R.st = (R.st + 1) % 4;\n    (R.t = 0), (R.dur = [16 + rnd() * 6, 3, 18 + rnd() * 6, 3.4][R.st]);\n  }\n  look(R, d);\n  // The baby on the boulder: a leap, a splash, a paddle back and a climb.\n  const B = P.B;\n  if (input.btnPressed && input.btnPressed[0] && B.st === 0) B.nj = 0;\n  if (B.st === 0 && (B.nj -= d) \u003c= 0) (B.st = 1), (B.t = 0);\n  if (B.st) B.t += d;\n  if (B.st === 1 && B.t >= 0.7) {\n    (B.st = 2), (B.t = 0), (P.spl = { x: BLAND[0], y: BLAND[1], t: 0 });\n    for (let n = 0; n \u003c 34; n++) {\n      const a = (rnd() - 0.5) * 2.4;\n      P.drops.push([BLAND[0] + a * 2, BLAND[1] - 1, a * 14 + (rnd() - 0.5) * 6, -12 - rnd() * 22, BLAND[1] + (rnd() - 0.3) * 6]);\n    }\n    for (let n = 0; n \u003c 4; n++) spawn(P, BLAND[0] + rnd() * 10 - 5, BLAND[1] - 4, 0.8);\n  }\n  if (B.st === 2 && B.t >= 4.2) (B.st = 3), (B.t = 0);\n  if (B.st === 3 && B.t >= 1.3) (B.st = 0), (B.t = 0), (B.nj = 24 + rnd() * 10);\n  look(B, d);\n  if (P.spl && (P.spl.t += d) > 2) P.spl = null;\n  P.drops = P.drops.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 70 * d);\n    return !(q[3] > 0 && q[1] > q[4]);\n  });\n  for (const f of P.flakes) {\n    f.y += (5 + 9 * f.z) * (1 + 0.6 * abs(P.w)) * d;\n    f.x += ((P.w * 18 + P.gust * 4) * (0.4 + 0.6 * f.z) + 0.9 * sin(T * 1.7 + f.ph)) * d;\n    if (f.y > f.land) (f.y = -2 - rnd() * 4), (f.x = rnd() * W);\n    f.x = ((f.x % W) + W) % W;\n  }\n}\n\n// The valley, the rocks, the lantern and the still water, kept until the light changes.\nfunction backdrop(P) {\n  P.key = round(P.k1 * 60);\n  const g = P.k1, A = [0, 1, 2].map((c) => ramp(g, c)), top = [3, 4, 5].map((c) => ramp(g, c)), low = [6, 7, 8].map((c) => ramp(g, c));\n  const lamp = ramp(g, 12), BG = P.bg, IL = P.il, Z = P.z;\n  P.steamC = [9, 10, 11].map((c) => ramp(g, c));\n  P.lamp = lamp;\n  P.low = low;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, lm = P.lm[i];\n      for (let c = 0; c \u003c 3; c++) IL[o + c] = A[c] + LC[c] * lamp * lm;\n      let col = null, k = 1, z = 0;\n      const rg = P.rg[x];\n      if (y >= rg) {\n        // Snow on the slope, darker where scrub and rock break through.\n        col = SNOW;\n        k = 0.3 + 0.16 * vn(x * 0.12, y * 0.07) + 0.12 * (y / 66);\n        if (vn(x * 0.45 + 3, y * 0.28) > 0.7) k *= 0.45;\n      }\n      for (const [tx, ty, th, f] of TREES) {\n        // Tiers of drooping branches, each loaded with snow along its top.\n        const dx = abs(x + 0.5 - tx), ts = 3.2 + 2.6 * f, yy = y - ty - dx * 0.5, kq = floor(yy / ts), wi = yy - kq * ts;\n        if (yy \u003c 0 || y > ty + th + 3) continue;\n        if (y > ty + th) {\n          if (dx \u003c 0.4 + f) (col = TRUNK), (k = 0.6);\n          continue;\n        }\n        if (dx >= 0.5 + (y - ty) * 0.34 * (0.68 + 0.32 * (wi / ts)) * (0.85 + 0.3 * hash(kq, tx | 0))) continue;\n        if (wi \u003c 1 + 0.6 * f && hash(x, y) > 0.12) (col = SNOW), (k = 0.4 + 0.32 * f - 0.1 * (dx / th));\n        else (col = NEEDLE), (k = wi > ts - 0.7 ? 0.5 : 0.9 + 0.2 * hash(x + 7, y));\n        if (f \u003c 1) k = mix(k, 0.34, (1 - f) * 0.45);\n      }\n      if (y >= PB) (col = WATER), (z = 1), (k = 0.5 + 0.6 * ((y - PB) / 54));\n      for (const [cx, cy, rx, ry, dz] of ROCKS) {\n        const nx = (x + 0.5 - cx) / rx, ny = (y + 0.5 - cy) / ry, dd = nx * nx + ny * ny;\n        if (dd > 1 || y + 0.5 > cy) continue;\n        z = dz;\n        const nz = sqrt(1 - dd);\n        if (ny \u003c -0.42 - 0.22 * nz + 0.25 * (vn(x * 0.6, cy) - 0.5)) (col = SNOW), (k = 0.5 + 0.28 * nz - 0.12 * ny);\n        else (col = ROCK), (k = (0.6 + 0.5 * nz - 0.3 * nx) * (0.75 + 0.4 * vn(x * 0.5, y * 0.5)));\n      }\n      Z[i] = z;\n      if (!col) {\n        const v = (y / rg) ** 1.5;\n        for (let c = 0; c \u003c 3; c++) BG[o + c] = mix(top[c], low[c], v);\n        continue;\n      }\n      for (let c = 0; c \u003c 3; c++) BG[o + c] = col[c] * k * IL[o + c] + (z === 1 ? low[c] * 0.12 : 0);\n    }\n  // The stone lantern: finial, snowed roof, fire box with its glowing window,\n  // pillar and foot, standing on the rim rock.\n  const ROWS = [[42, 0.6, 1], [44, 3.6, 0], [46, 5, 1], [48, 2.6, 2], [54, 3.6, 1], [55, 1.3, 1], [60, 2.8, 1], [62, 0, 1]];\n  for (let r = 0; r \u003c ROWS.length - 1; r++)\n    for (let y = ROWS[r][0]; y \u003c ROWS[r + 1][0]; y++)\n      for (let x = 0; x \u003c 18; x++) {\n        const dx = abs(x + 0.5 - LX), hw = ROWS[r][1] + (r === 2 ? y - 46 : 0) * 0.6, o = (y * W + x) * 3;\n        if (dx > hw) continue;\n        const kind = ROWS[r][2], win = kind === 2 && dx \u003c 1.6 && y > 48 && y \u003c 53;\n        for (let c = 0; c \u003c 3; c++)\n          BG[o + c] = win ? [255, 200, 120][c] * min(1, 0.72 + 0.3 * lamp) : (kind ? STONE[c] * (0.6 + 0.25 * (LX - x) / hw) : SNOW[c] * 0.75) * IL[o + c];\n      }\n}\n\nlet F, IL, Z, M;\n// An ellipse of fur or skin on the monkey being drawn, under its water line\n// and behind any rock nearer than it.\nfunction blob(cx, cy, rx, ry, col, sn, fur) {\n  for (let y = max(0, floor(cy - ry)), y1 = min(H - 1, cy + ry); y \u003c= y1 && y + 0.5 \u003c M.wl; y++) {\n    const ny = (y + 0.5 - cy) / ry;\n    for (let x = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx); x \u003c= x1; x++) {\n      const nx = (x + 0.5 - cx) / rx, dd = nx * nx + ny * ny, i = y * W + x;\n      if (dd > 1 || Z[i] > M.z) continue;\n      const nz = sqrt(1 - dd);\n      let k, c = col;\n      if (fur) {\n        k = (0.36 + 0.55 * nz - 0.25 * ny - 0.12 * nx) * (0.84 + 0.3 * hash(x - M.x0, y - M.y0));\n        if (sn && ny \u003c sn * 0.5 - 1.05 + 0.25 * hash(x - M.x0, 9)) (c = SNOW), (k = 0.75 + 0.25 * nz);\n        else k *= 0.6 + 0.4 * sm(0.3, 2.2, M.wl - y - 0.5);\n      } else k = 0.72 + 0.3 * nz - 0.15 * ny;\n      paint(i, c, k);\n    }\n  }\n}\nfunction paint(i, c, k) {\n  const o = i * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k * (IL[o + n] * 0.6 + 0.4);\n}\nfunction dot(x, y, c, k) {\n  (x = floor(x)), (y = floor(y));\n  if (x >= 0 && x \u003c W && y >= 0 && y + 0.5 \u003c M.wl && Z[y * W + x] \u003c= M.z) paint(y * W + x, c, k);\n}\n// A limb of fur from a to b.\nfunction rod(ax, ay, bx, by, r, col) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = max(0, floor(min(ay, by) - r)); y \u003c= min(H - 1, max(ay, by) + r) && y + 0.5 \u003c M.wl; y++)\n    for (let x = max(0, floor(min(ax, bx) - r)); x \u003c= min(W - 1, max(ax, bx) + r); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t;\n      if (ex * ex + ey * ey > r * r || Z[y * W + x] > M.z) continue;\n      paint(y * W + x, col, (0.75 - 0.2 * (ey / r)) * (0.84 + 0.3 * hash(x, y)));\n    }\n}\n\n// One macaque: x, bottom row, scale, water line, depth, the turn of its head\n// (-1..1), how far it bows, eyes shut, snow on its head, sat on a rock.\nfunction monkey(x, yb, s, wl, z, lk, bow, shut, sn, sat) {\n  M = { wl, z, x0: floor(x), y0: floor(yb) };\n  blob(x, yb - 6.6 * s, 6.8 * s, 6.6 * s, FUR, sat ? 0.3 : 0, 1);\n  if (sat) {\n    for (const sd of [-1, 1]) {\n      blob(x + sd * 3.4 * s, yb - 2.6 * s, 2.7 * s, 2.3 * s, FUR, 0, 1);\n      blob(x + sd * 4.2 * s, yb - 0.6 * s, 1.5 * s, 0.9 * s, HAND, 0, 0);\n    }\n    for (const sd of [-1, 1]) rod(x + sd * 5 * s, yb - 10 * s, x + sd * 1.4 * s, yb - 4.8 * s, 1.4 * s, FUR);\n    blob(x, yb - 4.7 * s, 2 * s, 1 * s, HAND, 0, 0);\n  }\n  const R = 4.4 * s, hx = x + lk * 0.5 * s, hy = yb - (15.2 - bow) * s;\n  for (const sd of [-1, 1]) blob(hx + sd * R * (1 - 0.2 * lk * sd), hy - 0.3 * s, 1.1 * s + 0.2, 1.3 * s + 0.2, EAR, 0, 0);\n  blob(hx, hy, R * 1.05, R * 0.97, FUR, sn, 1);\n  const fx = hx + lk * 1.4 * s, fy = hy + (0.9 + bow * 0.25) * s;\n  blob(fx, fy, 2.2 * s * (1 - 0.2 * abs(lk)), 2.6 * s, FACE, 0, 0);\n  for (const sd of [-1, 1]) dot(fx + sd * 0.95 * s, fy - 0.6 * s, shut > 0.5 ? FACE : EYE, shut > 0.5 ? 0.45 : 1);\n  dot(fx, fy + 1.2 * s, FACE, 0.5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  if (P.key !== round(P.k1 * 60)) backdrop(P);\n  (F = P.f), (IL = P.il), (Z = P.z);\n  F.set(P.bg);\n  const T = P.t, lamp = P.lamp, BG = P.bg;\n  // The water: a slow shiver over it and the lantern's broken reflection.\n  for (let y = PB; y \u003c H; y++) {\n    const sx = 0.7 * sin(y * 0.5 + T * 1.3), rx = LX + 1.4 * sin(y * 0.9 + T * 3), rk = lamp * 140 * sm(104, 70, y);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (Z[i] !== 1) continue;\n      const r = vn(x * 0.3 + sx, y * 0.9 - T * 0.8), o = i * 3, dx = x + 0.5 - rx, ref = dx * dx \u003c 30 && rk ? rk * r * exp((-dx * dx) / 5) : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = BG[o + c] * (0.75 + 0.55 * r) + ref * LC[c];\n    }\n  }\n  // Who is where, back to front.\n  const L = [];\n  for (const m of P.mk) {\n    if (m.p \u003c= 0) continue;\n    if (m.pose > 2) {\n      // On the rim it slides down behind its rock as it goes.\n      const yb = m.y + 20 * (1 - m.p) * m.s;\n      m.hy = yb - 15.2 * m.s;\n      L.push([65, () => monkey(m.x, yb, m.s, 999, 65, m.lk, 0, m.e, 0.6, 1)]);\n      continue;\n    }\n    const wl = m.y + 0.35 * sin(T * 0.7 + m.ph), sk = m.sk + (m.pose === 1 ? 0.08 * sin(T * 0.5 + m.ph) : 0);\n    const yb = wl + (9.5 + 3.4 * sk + 20 * (1 - m.p)) * m.s;\n    m.hy = yb - (15.2 - (m.pose ? 1 : 0)) * m.s;\n    L.push([m.y, () => monkey(m.x, yb, m.s, wl, m.y, m.lk, m.pose ? 1 : 0, m.e, m.pose === 1 ? 1 : 0.55, 0), m]);\n  }\n  const R = P.R, u = R.st === 0 ? 0 : R.st === 2 ? 1 : R.st === 1 ? R.t / 3 : 1 - R.t / 3.4;\n  const [rx, ryb, rwl, rz] = path(u), rs = scl(rz);\n  L.push([rz, () => monkey(rx, ryb, rs, rwl, rz, R.lk, 0, R.st === 2 ? 1 : 0, 0.7, rwl > 900), rwl \u003c 900 && { x: rx, s: rs, p: 1, pose: 0, ph: 0 }]);\n  const B = P.B, bs = 0.64;\n  let bx, byb, bwl = 999, bz = 90;\n  if (B.st === 0) [bx, byb] = BSEAT;\n  else if (B.st === 1) {\n    const q = B.t / 0.7;\n    (bx = mix(BSEAT[0], BLAND[0], q)), (byb = mix(BSEAT[1], BLAND[1], q) - 14 * sin(PI * q)), (bz = mix(90, BLAND[1], q));\n  } else if (B.st === 2) {\n    const q = sm(0.8, 4.2, B.t);\n    (bwl = mix(BLAND[1], BFOOT[1], q)), (bx = mix(BLAND[0], BFOOT[0], q)), (bz = bwl);\n    byb = bwl + (12.5 + 14 * (1 - sm(0.15, 0.6, B.t))) * bs * scl(bwl);\n  } else {\n    const q = sm(0, 1.3, B.t);\n    (bx = mix(BFOOT[0], BSEAT[0], q)), (byb = mix(BFOOT[1], BSEAT[1], q)), (bz = mix(94, 90, q));\n  }\n  L.push([bz, () => monkey(bx, byb, bs * scl(bz), bwl, bz, B.lk, 0, 0, 0.4, B.st !== 2), B.st === 2 && { x: bx, s: 0.6, p: 1, pose: 0, ph: 3 }]);\n  L.sort((a, b) => a[0] - b[0]);\n  // Rings on the water round everyone in it.\n  for (const [z, , m] of L) {\n    if (!m) continue;\n    const s = m.s * m.p;\n    for (let n = 0; n \u003c 3; n++) {\n      const r = 6.5 * s + ((T * (m.pose === 1 ? 1.6 : 3) + n * 4.4 + m.ph) % 13), a = (1 - (r - 6.5 * s) / 13) * 0.8 * m.p;\n      for (let y = floor(z - r * 0.3 - 1); y \u003c= z + r * 0.3 + 1; y++)\n        for (let x = max(0, floor(m.x - r - 1)); x \u003c= min(W - 1, m.x + r + 1); x++) {\n          const i = y * W + x;\n          if (y >= H || Z[i] !== 1) continue;\n          const e = sqrt(((x + 0.5 - m.x) / r) ** 2 + ((y + 0.5 - z) / (r * 0.3)) ** 2);\n          if (abs(e - 1) * r \u003c 0.7) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += (P.low[c] * 0.6 + 60 * IL[i * 3 + c]) * a;\n        }\n    }\n  }\n  for (const [, fn, m] of L) {\n    fn();\n    // The groomer's hands in the fur of the one in front of it.\n    if (m && m.i === 0 && P.mk[1].p > 0.5) {\n      const g = P.mk[1], gs = g.s, hx = m.x + 2 * m.s, hy = m.hy - 3 * m.s;\n      M = { wl: g.y, z: m.y + 1, x0: 0, y0: 0 };\n      rod(g.x - 4.8 * gs, g.y - 1.5 * gs, hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.3 * gs, FUR);\n      rod(g.x - 2 * gs, g.y - 1.5 * gs, hx + 4 * m.s, hy + 5 * m.s + sin(T * 2.3), 1.3 * gs, FUR);\n      M.wl = 999;\n      blob(hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.2 * gs, 1 * gs, HAND, 0, 0);\n    }\n  }\n  // The splash: a plume, foam spreading and fading, a ring running out, and\n  // the drops falling back.\n  M = { wl: 999, z: 200, x0: 0, y0: 0 };\n  if (P.spl) {\n    const q = P.spl.t, { x: sx, y: sy } = P.spl, h = 7 * (1 - sm(0, 0.45, q));\n    if (h > 0.5) blob(sx, sy - h, 1.6 + 2 * q, h + 0.5, SNOW, 0, 0);\n    for (let y = floor(sy - 3), rx = 3 + 6 * q, ry = 1.4 + 1.2 * q; y \u003c= sy + 3 && q \u003c 1.4; y++)\n      for (let x = max(0, floor(sx - rx)); x \u003c= min(W - 1, sx + rx); x++) {\n        const e = 1 - ((x + 0.5 - sx) / rx) ** 2 - ((y + 0.5 - sy) / ry) ** 2, o = (y * W + x) * 3;\n        if (e > 0) for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * IL[o + c] * 1.2 - F[o + c]) * min(1, e * 3) * (1 - q / 1.4);\n      }\n    const r = 4 + 20 * q;\n    for (let x = 0; x \u003c W; x++)\n      for (const sd of [-1, 1]) {\n        const dx = (x + 0.5 - P.spl.x) / r, y = floor(P.spl.y + sd * r * 0.3 * sqrt(max(0, 1 - dx * dx)));\n        if (abs(dx) \u003c 1 && y \u003c H && Z[y * W + x] === 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] += 120 * (1 - q / 2) * IL[(y * W + x) * 3 + c];\n      }\n  }\n  for (const [x, y] of P.drops) dot(x, y, SNOW, 1);\n  // The steam over everything, lit by the sky and the lantern.\n  const G = P.G, SC = P.steamC;\n  G.fill(0);\n  for (const q of P.puffs) {\n    const a = q.a * sm(0, 0.9, q.age) * (1 - sm(q.life * 0.5, q.life, q.age)), gx = q.x / 2, gy = q.y / 2, rr = q.r * 0.75;\n    for (let j = max(0, floor(gy - rr * 1.3)); j \u003c= min(GH - 1, gy + rr * 1.3); j++)\n      for (let i = max(0, floor(gx - rr)); i \u003c= min(GW - 1, gx + rr); i++) {\n        const e = 1 - (i + 0.5 - gx) ** 2 / (rr * rr) - (j + 0.5 - gy) ** 2 / (rr * rr * 1.6);\n        if (e > 0) G[j * GW + i] += a * e * e;\n      }\n  }\n  // A low mist on the water, and the steam torn into wisps.\n  for (let j = 0, c = 0; j \u003c GH; j++)\n    for (let i = 0, mist = 0.2 * sm(PB - 8, PB + 14, j * 2 + 1); i \u003c GW; i++, c++)\n      if ((G[c] += mist) > 0.01) G[c] *= 0.2 + 0.85 * vn(i * 0.24 + P.fx, j * 0.17 + P.fy) + 0.45 * vn(i * 0.62 - P.fx, j * 0.44 + P.fy * 2);\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 2 - 0.25, j0 = cl(floor(v), 0, GH - 1), j1 = min(GH - 1, j0 + 1), fv = cl(v - j0, 0, 1), ay = 0.4 + 0.45 * sm(108, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const u2 = x / 2 - 0.25, i0 = cl(floor(u2), 0, GW - 1), i1 = min(GW - 1, i0 + 1), fu = cl(u2 - i0, 0, 1);\n      const D = mix(mix(G[j0 * GW + i0], G[j0 * GW + i1], fu), mix(G[j1 * GW + i0], G[j1 * GW + i1], fu), fv);\n      if (D \u003c 0.05) continue;\n      const a = ay * sm(0.05, 1.3, D), i = y * W + x, o = i * 3, lm = P.lm[i] * lamp * 200;\n      for (let c = 0; c \u003c 3; c++) F[o + c] += (SC[c] + LC[c] * lm - F[o + c]) * a;\n    }\n  }\n  // Snow falling, thicker in the wind.\n  const nf = floor(110 + 70 * abs(P.w));\n  for (let n = 0; n \u003c nf; n++) {\n    const f = P.flakes[n], x = floor(f.x), y = floor(f.y);\n    if (y \u003c 0 || y >= H) continue;\n    const i = y * W + x, o = i * 3, b = 0.45 + 0.5 * f.z;\n    for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * (IL[o + c] * 0.6 + 0.4) - F[o + c]) * b;\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-snow-monkeys","type":"code","name":"snow-monkeys","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Snow Monkeys\n// Family:  mammal\n// Idea:    At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Japanese macaques (Macaca fuscata) that bathe in the hot spring at Jigokudani, Nagano\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1\n//\n// Knob 1: Light. The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it.\n// Knob 2: Speed. At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower.\n// Knob 3: Monkeys. How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam.\n// Knob 4: Wind. Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it.\n// Buttons: K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.\n\nconst W = 64, H = 128, N = W * H, GW = 32, GH = 64;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The back edge of the pool, and how big a monkey stands at a depth row.\nconst PB = 67;\nconst scl = (y) => 0.74 + (y - PB) * 0.0135;\n// The stone lantern's fire box.\nconst [LX, LY] = [8.5, 50.5];\n// The light from evening to night: ambient, sky overhead, sky at the ridge,\n// lit steam, and the lantern's strength.\nconst LIGHT = [\n  [0, 0.5, 0.6, 0.86, 24, 44, 104, 70, 98, 160, 196, 212, 240, 0.25],\n  [0.5, 0.36, 0.4, 0.66, 16, 20, 62, 84, 66, 118, 150, 156, 196, 0.65],\n  [1, 0.2, 0.24, 0.42, 5, 8, 24, 18, 24, 54, 84, 92, 130, 1.1],\n];\nconst LC = [1, 0.62, 0.3];\nconst SNOW = [232, 238, 250], FUR = [218, 184, 150], FACE = [250, 96, 92], EAR = [214, 132, 124], HAND = [120, 84, 78], EYE = [40, 22, 20];\nconst ROCK = [70, 64, 62], NEEDLE = [24, 46, 36], TRUNK = [52, 38, 30], WATER = [34, 70, 74], STONE = [118, 114, 108];\n// Boulders as half ellipses standing on their water line: centre, radii,\n// depth row. The back rim, the boulder in the pool, the near rocks.\nconst ROCKS = [\n  [2, 68, 12, 8, 66], [17, 69, 8, 6, 66], [30, 69, 9, 5, 66], [45, 68, 11, 6, 66], [61, 68, 10, 9, 66],\n  [53, 92, 13, 12, 90],\n  [6, 132, 15, 14, 126], [28, 133, 12, 12, 127], [48, 132, 11, 13, 126], [64, 129, 10, 15, 125],\n];\n// Cedars on the slope, far to near: apex x and row, height, nearness.\nconst TREES = [];\nfor (let i = 0; i \u003c 10; i++) TREES.push([2 + i * 6.7 + 3 * hash(i, 1), 4 + 9 * hash(i, 2), 16 + 8 * hash(i, 3), 0.3]);\nfor (let i = 0; i \u003c 7; i++) TREES.push([i * 10.5 + 5 * hash(i, 4), 16 + 12 * hash(i, 5), 24 + 10 * hash(i, 6), 0.6]);\nTREES.push([3, 12, 52, 1], [61, 6, 56, 1]);\n// Places in the order the Monkeys knob fills them: x, depth row (the seat\n// row on the rim), how low it sits in the water (0 shoulders out, 1 chin in\n// it), and what it does (0 looks about, 1 dozes, 2 grooms the one before\n// it, 3 sits on the rim rocks).\nconst SLOTS = [\n  [24, 101, 0.15, 1], [34, 93, 0.1, 2], [11, 117, 0.6, 1], [30, 64.5, 0, 3], [52, 119, 0.25, 0], [8, 90, 0.2, 0],\n  [41, 63, 0, 3], [61, 110, 0.3, 0], [31, 79, 0.15, 0], [37, 118, 0.3, 1], [23, 121, 0.5, 1], [14, 77, 0.2, 1],\n  [5, 104, 0.2, 0], [46, 86, 0.1, 0],\n];\n// The boulder seats and the way down into the water, as x and bottom row.\nconst SEAT = [52, 81], EDGE = [46, 83.5], FOOT = [44, 93], SPOT = [47, 103], BSEAT = [60, 83], BLAND = [53, 102], BFOOT = [60, 94];\n\nfunction ramp(g, c) {\n  let j = 0;\n  while (j \u003c LIGHT.length - 2 && g > LIGHT[j + 1][0]) j++;\n  const a = LIGHT[j], b = LIGHT[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, f: F32(N * 3), bg: F32(N * 3), il: F32(N * 3), lm: F32(N), z: new Uint8Array(N), G: F32(GW * GH), key: -1,\n    puffs: [], drops: [], acc: 0, vent: 0.5, fx: 0, fy: 0, gust: 0, w: 0, k1: 0, n: 3, spl: null,\n    R: { st: 0, t: 0, dur: 3, lk: 0, lt: 0, lc: 1 }, B: { st: 0, t: 0, nj: 6.2, lk: 0, lt: 0, lc: 2 },\n  });\n  P.sd = 7;\n  P.mk = SLOTS.map(([x, y, sk, pose], i) => ({ x, y, sk, pose, s: pose > 2 ? 0.86 : scl(y), p: 0, sw: i * 0.3, hy: y - 8, lk: pose === 2 ? -0.8 : 0, lt: 0, lc: 1 + rnd() * 3, e: pose === 1 ? 1 : 0, bl: 2 + rnd() * 3, ph: rnd() * 7, i }));\n  P.flakes = Array.from({ length: 180 }, () => {\n    const z = rnd();\n    return { x: rnd() * W, y: rnd() * H, z, ph: rnd() * 7, land: 40 + z * 88 };\n  });\n  P.flakes.forEach((f) => (f.y = rnd() * f.land));\n  P.rg = Array.from({ length: W }, (_, x) => 8 + 5 * vn(x * 0.07, 1.3) - 0.06 * x);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) P.lm[y * W + x] = exp(-((x + 0.5 - LX) ** 2 + (y + 0.5 - LY) ** 2 * 0.8) / 1500);\n}\n\nfunction spawn(P, x, y, a, g = rnd) {\n  P.puffs.push({ x, y, a, r: 2.5 + 2.5 * g(), age: 0, life: 7 + 5 * g(), vy: -(6 + 5 * g()), ph: g() * 7 });\n}\n\n// The steam: puffs off the water, thick clumps from the spring's mouth, all\n// rising, growing and fading, swayed by the gusts and leaned by the wind.\nfunction steam(P, d) {\n  const w = P.w;\n  P.gust = 0.55 * sin(P.t * 0.31) + 0.3 * sin(P.t * 0.83 + 2);\n  for (P.acc += d * 1.8; P.acc > 1; P.acc--) spawn(P, 2 + rnd() * 60 - w * 22, 74 + rnd() * 44, 0.2 + 0.25 * rnd());\n  if ((P.vent -= d) \u003c 0) {\n    P.vent = 0.7 + rnd() * 1.1;\n    const vx = [9, 22, 36][floor(rnd() * 3)] + rnd() * 6 - 3 - w * 14, vy = 72 + rnd() * 16;\n    for (let n = 0; n \u003c 3; n++) spawn(P, vx + rnd() * 8 - 4, vy + rnd() * 6, 0.4 + 0.25 * rnd());\n  }\n  // Wet fur steams in the cold: a wisp off each monkey's head now and then,\n  // from a generator of its own so the rest of the steam keeps its course.\n  for (const m of P.mk)\n    if (m.p > 0.5 && (m.sw -= d) \u003c 0) {\n      const g = () => ((P.sd = (Math.imul(P.sd, 1103515245) + 12345) >>> 0) / 4294967296);\n      m.sw = 0.35 + g() * 0.6;\n      spawn(P, m.x + (g() - 0.5) * 6 * m.s, m.hy - 3 * m.s, 0.25 + 0.2 * g(), g);\n    }\n  const wx = w * 15 + P.gust * 7;\n  for (const q of P.puffs) {\n    q.age += d;\n    const up = sm(84, 20, q.y);\n    q.x += (wx * (0.3 + 0.7 * up) + 1.6 * sin(q.age * 1.3 + q.ph)) * d;\n    q.y += q.vy * (0.5 + 0.5 * sm(0, 2.5, q.age)) * d;\n    q.r += (0.9 + 0.8 * abs(w)) * d;\n  }\n  P.puffs = P.puffs.filter((q) => q.age \u003c q.life * (1 - 0.35 * abs(w)) && q.y + q.r > -4 && q.x > -30 && q.x \u003c 94);\n  P.fx -= wx * 0.2 * d;\n  P.fy += 1.8 * d;\n}\n\n// Where the mother is on her way between the boulder and the pool, u 0..1.\nfunction path(u) {\n  if (u \u003c 0.3) {\n    const q = sm(0, 0.3, u);\n    return [mix(SEAT[0], EDGE[0], q), mix(SEAT[1], EDGE[1], q), 999, 90];\n  }\n  if (u \u003c 0.55) {\n    const q = sm(0.3, 0.55, u);\n    return [mix(EDGE[0], FOOT[0], q), mix(EDGE[1], FOOT[1], q), 999, 90 + 3 * q];\n  }\n  const q = sm(0.55, 1, u), wl = mix(FOOT[1], SPOT[1], q);\n  return [mix(FOOT[0], SPOT[0], q), wl + 9.5 * q * scl(wl), wl, wl];\n}\n\nfunction look(m, d) {\n  if ((m.lc -= d) \u003c 0) (m.lc = 1.2 + rnd() * 3), (m.lt = floor(rnd() * 3) - 1);\n  m.lk += (m.lt - m.lk) * min(1, d * 5);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.k1 = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 3, 14));\n  P.w = cl(k[3], -1, 1);\n  if (!P.init) {\n    // Open on a pool already steaming.\n    for (let i = 0; i \u003c 120; i++) (P.t += 0.1), steam(P, 0.1);\n    P.t = 0;\n    for (const m of P.mk) m.p = m.i \u003c P.n ? 1 : 0;\n    P.init = true;\n  }\n  const T = (P.t += d);\n  steam(P, d);\n  for (const m of P.mk) {\n    m.p = cl(m.p + (m.i \u003c P.n ? d : -d) * 0.8, 0, 1);\n    if (m.pose % 3 === 0) {\n      look(m, d);\n      if ((m.bl -= d) \u003c 0) m.bl = 2 + rnd() * 4;\n      m.e = m.bl \u003c 0.15 ? 1 : 0;\n    }\n  }\n  // The mother sits on the boulder until she wades in to soak. Later she climbs out again.\n  const R = P.R;\n  if ((R.t += d) >= R.dur) {\n    R.st = (R.st + 1) % 4;\n    (R.t = 0), (R.dur = [16 + rnd() * 6, 3, 18 + rnd() * 6, 3.4][R.st]);\n  }\n  look(R, d);\n  // The baby on the boulder: a leap, a splash, a paddle back and a climb.\n  const B = P.B;\n  if (input.btnPressed && input.btnPressed[0] && B.st === 0) B.nj = 0;\n  if (B.st === 0 && (B.nj -= d) \u003c= 0) (B.st = 1), (B.t = 0);\n  if (B.st) B.t += d;\n  if (B.st === 1 && B.t >= 0.7) {\n    (B.st = 2), (B.t = 0), (P.spl = { x: BLAND[0], y: BLAND[1], t: 0 });\n    for (let n = 0; n \u003c 34; n++) {\n      const a = (rnd() - 0.5) * 2.4;\n      P.drops.push([BLAND[0] + a * 2, BLAND[1] - 1, a * 14 + (rnd() - 0.5) * 6, -12 - rnd() * 22, BLAND[1] + (rnd() - 0.3) * 6]);\n    }\n    for (let n = 0; n \u003c 4; n++) spawn(P, BLAND[0] + rnd() * 10 - 5, BLAND[1] - 4, 0.8);\n  }\n  if (B.st === 2 && B.t >= 4.2) (B.st = 3), (B.t = 0);\n  if (B.st === 3 && B.t >= 1.3) (B.st = 0), (B.t = 0), (B.nj = 24 + rnd() * 10);\n  look(B, d);\n  if (P.spl && (P.spl.t += d) > 2) P.spl = null;\n  P.drops = P.drops.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 70 * d);\n    return !(q[3] > 0 && q[1] > q[4]);\n  });\n  for (const f of P.flakes) {\n    f.y += (5 + 9 * f.z) * (1 + 0.6 * abs(P.w)) * d;\n    f.x += ((P.w * 18 + P.gust * 4) * (0.4 + 0.6 * f.z) + 0.9 * sin(T * 1.7 + f.ph)) * d;\n    if (f.y > f.land) (f.y = -2 - rnd() * 4), (f.x = rnd() * W);\n    f.x = ((f.x % W) + W) % W;\n  }\n}\n\n// The valley, the rocks, the lantern and the still water, kept until the light changes.\nfunction backdrop(P) {\n  P.key = round(P.k1 * 60);\n  const g = P.k1, A = [0, 1, 2].map((c) => ramp(g, c)), top = [3, 4, 5].map((c) => ramp(g, c)), low = [6, 7, 8].map((c) => ramp(g, c));\n  const lamp = ramp(g, 12), BG = P.bg, IL = P.il, Z = P.z;\n  P.steamC = [9, 10, 11].map((c) => ramp(g, c));\n  P.lamp = lamp;\n  P.low = low;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, lm = P.lm[i];\n      for (let c = 0; c \u003c 3; c++) IL[o + c] = A[c] + LC[c] * lamp * lm;\n      let col = null, k = 1, z = 0;\n      const rg = P.rg[x];\n      if (y >= rg) {\n        // Snow on the slope, darker where scrub and rock break through.\n        col = SNOW;\n        k = 0.3 + 0.16 * vn(x * 0.12, y * 0.07) + 0.12 * (y / 66);\n        if (vn(x * 0.45 + 3, y * 0.28) > 0.7) k *= 0.45;\n      }\n      for (const [tx, ty, th, f] of TREES) {\n        // Tiers of drooping branches, each loaded with snow along its top.\n        const dx = abs(x + 0.5 - tx), ts = 3.2 + 2.6 * f, yy = y - ty - dx * 0.5, kq = floor(yy / ts), wi = yy - kq * ts;\n        if (yy \u003c 0 || y > ty + th + 3) continue;\n        if (y > ty + th) {\n          if (dx \u003c 0.4 + f) (col = TRUNK), (k = 0.6);\n          continue;\n        }\n        if (dx >= 0.5 + (y - ty) * 0.34 * (0.68 + 0.32 * (wi / ts)) * (0.85 + 0.3 * hash(kq, tx | 0))) continue;\n        if (wi \u003c 1 + 0.6 * f && hash(x, y) > 0.12) (col = SNOW), (k = 0.4 + 0.32 * f - 0.1 * (dx / th));\n        else (col = NEEDLE), (k = wi > ts - 0.7 ? 0.5 : 0.9 + 0.2 * hash(x + 7, y));\n        if (f \u003c 1) k = mix(k, 0.34, (1 - f) * 0.45);\n      }\n      if (y >= PB) (col = WATER), (z = 1), (k = 0.5 + 0.6 * ((y - PB) / 54));\n      for (const [cx, cy, rx, ry, dz] of ROCKS) {\n        const nx = (x + 0.5 - cx) / rx, ny = (y + 0.5 - cy) / ry, dd = nx * nx + ny * ny;\n        if (dd > 1 || y + 0.5 > cy) continue;\n        z = dz;\n        const nz = sqrt(1 - dd);\n        if (ny \u003c -0.42 - 0.22 * nz + 0.25 * (vn(x * 0.6, cy) - 0.5)) (col = SNOW), (k = 0.5 + 0.28 * nz - 0.12 * ny);\n        else (col = ROCK), (k = (0.6 + 0.5 * nz - 0.3 * nx) * (0.75 + 0.4 * vn(x * 0.5, y * 0.5)));\n      }\n      Z[i] = z;\n      if (!col) {\n        const v = (y / rg) ** 1.5;\n        for (let c = 0; c \u003c 3; c++) BG[o + c] = mix(top[c], low[c], v);\n        continue;\n      }\n      for (let c = 0; c \u003c 3; c++) BG[o + c] = col[c] * k * IL[o + c] + (z === 1 ? low[c] * 0.12 : 0);\n    }\n  // The stone lantern: finial, snowed roof, fire box with its glowing window,\n  // pillar and foot, standing on the rim rock.\n  const ROWS = [[42, 0.6, 1], [44, 3.6, 0], [46, 5, 1], [48, 2.6, 2], [54, 3.6, 1], [55, 1.3, 1], [60, 2.8, 1], [62, 0, 1]];\n  for (let r = 0; r \u003c ROWS.length - 1; r++)\n    for (let y = ROWS[r][0]; y \u003c ROWS[r + 1][0]; y++)\n      for (let x = 0; x \u003c 18; x++) {\n        const dx = abs(x + 0.5 - LX), hw = ROWS[r][1] + (r === 2 ? y - 46 : 0) * 0.6, o = (y * W + x) * 3;\n        if (dx > hw) continue;\n        const kind = ROWS[r][2], win = kind === 2 && dx \u003c 1.6 && y > 48 && y \u003c 53;\n        for (let c = 0; c \u003c 3; c++)\n          BG[o + c] = win ? [255, 200, 120][c] * min(1, 0.72 + 0.3 * lamp) : (kind ? STONE[c] * (0.6 + 0.25 * (LX - x) / hw) : SNOW[c] * 0.75) * IL[o + c];\n      }\n}\n\nlet F, IL, Z, M;\n// An ellipse of fur or skin on the monkey being drawn, under its water line\n// and behind any rock nearer than it.\nfunction blob(cx, cy, rx, ry, col, sn, fur) {\n  for (let y = max(0, floor(cy - ry)), y1 = min(H - 1, cy + ry); y \u003c= y1 && y + 0.5 \u003c M.wl; y++) {\n    const ny = (y + 0.5 - cy) / ry;\n    for (let x = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx); x \u003c= x1; x++) {\n      const nx = (x + 0.5 - cx) / rx, dd = nx * nx + ny * ny, i = y * W + x;\n      if (dd > 1 || Z[i] > M.z) continue;\n      const nz = sqrt(1 - dd);\n      let k, c = col;\n      if (fur) {\n        k = (0.36 + 0.55 * nz - 0.25 * ny - 0.12 * nx) * (0.84 + 0.3 * hash(x - M.x0, y - M.y0));\n        if (sn && ny \u003c sn * 0.5 - 1.05 + 0.25 * hash(x - M.x0, 9)) (c = SNOW), (k = 0.75 + 0.25 * nz);\n        else k *= 0.6 + 0.4 * sm(0.3, 2.2, M.wl - y - 0.5);\n      } else k = 0.72 + 0.3 * nz - 0.15 * ny;\n      paint(i, c, k);\n    }\n  }\n}\nfunction paint(i, c, k) {\n  const o = i * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k * (IL[o + n] * 0.6 + 0.4);\n}\nfunction dot(x, y, c, k) {\n  (x = floor(x)), (y = floor(y));\n  if (x >= 0 && x \u003c W && y >= 0 && y + 0.5 \u003c M.wl && Z[y * W + x] \u003c= M.z) paint(y * W + x, c, k);\n}\n// A limb of fur from a to b.\nfunction rod(ax, ay, bx, by, r, col) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = max(0, floor(min(ay, by) - r)); y \u003c= min(H - 1, max(ay, by) + r) && y + 0.5 \u003c M.wl; y++)\n    for (let x = max(0, floor(min(ax, bx) - r)); x \u003c= min(W - 1, max(ax, bx) + r); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t;\n      if (ex * ex + ey * ey > r * r || Z[y * W + x] > M.z) continue;\n      paint(y * W + x, col, (0.75 - 0.2 * (ey / r)) * (0.84 + 0.3 * hash(x, y)));\n    }\n}\n\n// One macaque: x, bottom row, scale, water line, depth, the turn of its head\n// (-1..1), how far it bows, eyes shut, snow on its head, sat on a rock.\nfunction monkey(x, yb, s, wl, z, lk, bow, shut, sn, sat) {\n  M = { wl, z, x0: floor(x), y0: floor(yb) };\n  blob(x, yb - 6.6 * s, 6.8 * s, 6.6 * s, FUR, sat ? 0.3 : 0, 1);\n  if (sat) {\n    for (const sd of [-1, 1]) {\n      blob(x + sd * 3.4 * s, yb - 2.6 * s, 2.7 * s, 2.3 * s, FUR, 0, 1);\n      blob(x + sd * 4.2 * s, yb - 0.6 * s, 1.5 * s, 0.9 * s, HAND, 0, 0);\n    }\n    for (const sd of [-1, 1]) rod(x + sd * 5 * s, yb - 10 * s, x + sd * 1.4 * s, yb - 4.8 * s, 1.4 * s, FUR);\n    blob(x, yb - 4.7 * s, 2 * s, 1 * s, HAND, 0, 0);\n  }\n  const R = 4.4 * s, hx = x + lk * 0.5 * s, hy = yb - (15.2 - bow) * s;\n  for (const sd of [-1, 1]) blob(hx + sd * R * (1 - 0.2 * lk * sd), hy - 0.3 * s, 1.1 * s + 0.2, 1.3 * s + 0.2, EAR, 0, 0);\n  blob(hx, hy, R * 1.05, R * 0.97, FUR, sn, 1);\n  const fx = hx + lk * 1.4 * s, fy = hy + (0.9 + bow * 0.25) * s;\n  blob(fx, fy, 2.2 * s * (1 - 0.2 * abs(lk)), 2.6 * s, FACE, 0, 0);\n  for (const sd of [-1, 1]) dot(fx + sd * 0.95 * s, fy - 0.6 * s, shut > 0.5 ? FACE : EYE, shut > 0.5 ? 0.45 : 1);\n  dot(fx, fy + 1.2 * s, FACE, 0.5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  if (P.key !== round(P.k1 * 60)) backdrop(P);\n  (F = P.f), (IL = P.il), (Z = P.z);\n  F.set(P.bg);\n  const T = P.t, lamp = P.lamp, BG = P.bg;\n  // The water: a slow shiver over it and the lantern's broken reflection.\n  for (let y = PB; y \u003c H; y++) {\n    const sx = 0.7 * sin(y * 0.5 + T * 1.3), rx = LX + 1.4 * sin(y * 0.9 + T * 3), rk = lamp * 140 * sm(104, 70, y);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (Z[i] !== 1) continue;\n      const r = vn(x * 0.3 + sx, y * 0.9 - T * 0.8), o = i * 3, dx = x + 0.5 - rx, ref = dx * dx \u003c 30 && rk ? rk * r * exp((-dx * dx) / 5) : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = BG[o + c] * (0.75 + 0.55 * r) + ref * LC[c];\n    }\n  }\n  // Who is where, back to front.\n  const L = [];\n  for (const m of P.mk) {\n    if (m.p \u003c= 0) continue;\n    if (m.pose > 2) {\n      // On the rim it slides down behind its rock as it goes.\n      const yb = m.y + 20 * (1 - m.p) * m.s;\n      m.hy = yb - 15.2 * m.s;\n      L.push([65, () => monkey(m.x, yb, m.s, 999, 65, m.lk, 0, m.e, 0.6, 1)]);\n      continue;\n    }\n    const wl = m.y + 0.35 * sin(T * 0.7 + m.ph), sk = m.sk + (m.pose === 1 ? 0.08 * sin(T * 0.5 + m.ph) : 0);\n    const yb = wl + (9.5 + 3.4 * sk + 20 * (1 - m.p)) * m.s;\n    m.hy = yb - (15.2 - (m.pose ? 1 : 0)) * m.s;\n    L.push([m.y, () => monkey(m.x, yb, m.s, wl, m.y, m.lk, m.pose ? 1 : 0, m.e, m.pose === 1 ? 1 : 0.55, 0), m]);\n  }\n  const R = P.R, u = R.st === 0 ? 0 : R.st === 2 ? 1 : R.st === 1 ? R.t / 3 : 1 - R.t / 3.4;\n  const [rx, ryb, rwl, rz] = path(u), rs = scl(rz);\n  L.push([rz, () => monkey(rx, ryb, rs, rwl, rz, R.lk, 0, R.st === 2 ? 1 : 0, 0.7, rwl > 900), rwl \u003c 900 && { x: rx, s: rs, p: 1, pose: 0, ph: 0 }]);\n  const B = P.B, bs = 0.64;\n  let bx, byb, bwl = 999, bz = 90;\n  if (B.st === 0) [bx, byb] = BSEAT;\n  else if (B.st === 1) {\n    const q = B.t / 0.7;\n    (bx = mix(BSEAT[0], BLAND[0], q)), (byb = mix(BSEAT[1], BLAND[1], q) - 14 * sin(PI * q)), (bz = mix(90, BLAND[1], q));\n  } else if (B.st === 2) {\n    const q = sm(0.8, 4.2, B.t);\n    (bwl = mix(BLAND[1], BFOOT[1], q)), (bx = mix(BLAND[0], BFOOT[0], q)), (bz = bwl);\n    byb = bwl + (12.5 + 14 * (1 - sm(0.15, 0.6, B.t))) * bs * scl(bwl);\n  } else {\n    const q = sm(0, 1.3, B.t);\n    (bx = mix(BFOOT[0], BSEAT[0], q)), (byb = mix(BFOOT[1], BSEAT[1], q)), (bz = mix(94, 90, q));\n  }\n  L.push([bz, () => monkey(bx, byb, bs * scl(bz), bwl, bz, B.lk, 0, 0, 0.4, B.st !== 2), B.st === 2 && { x: bx, s: 0.6, p: 1, pose: 0, ph: 3 }]);\n  L.sort((a, b) => a[0] - b[0]);\n  // Rings on the water round everyone in it.\n  for (const [z, , m] of L) {\n    if (!m) continue;\n    const s = m.s * m.p;\n    for (let n = 0; n \u003c 3; n++) {\n      const r = 6.5 * s + ((T * (m.pose === 1 ? 1.6 : 3) + n * 4.4 + m.ph) % 13), a = (1 - (r - 6.5 * s) / 13) * 0.8 * m.p;\n      for (let y = floor(z - r * 0.3 - 1); y \u003c= z + r * 0.3 + 1; y++)\n        for (let x = max(0, floor(m.x - r - 1)); x \u003c= min(W - 1, m.x + r + 1); x++) {\n          const i = y * W + x;\n          if (y >= H || Z[i] !== 1) continue;\n          const e = sqrt(((x + 0.5 - m.x) / r) ** 2 + ((y + 0.5 - z) / (r * 0.3)) ** 2);\n          if (abs(e - 1) * r \u003c 0.7) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += (P.low[c] * 0.6 + 60 * IL[i * 3 + c]) * a;\n        }\n    }\n  }\n  for (const [, fn, m] of L) {\n    fn();\n    // The groomer's hands in the fur of the one in front of it.\n    if (m && m.i === 0 && P.mk[1].p > 0.5) {\n      const g = P.mk[1], gs = g.s, hx = m.x + 2 * m.s, hy = m.hy - 3 * m.s;\n      M = { wl: g.y, z: m.y + 1, x0: 0, y0: 0 };\n      rod(g.x - 4.8 * gs, g.y - 1.5 * gs, hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.3 * gs, FUR);\n      rod(g.x - 2 * gs, g.y - 1.5 * gs, hx + 4 * m.s, hy + 5 * m.s + sin(T * 2.3), 1.3 * gs, FUR);\n      M.wl = 999;\n      blob(hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.2 * gs, 1 * gs, HAND, 0, 0);\n    }\n  }\n  // The splash: a plume, foam spreading and fading, a ring running out, and\n  // the drops falling back.\n  M = { wl: 999, z: 200, x0: 0, y0: 0 };\n  if (P.spl) {\n    const q = P.spl.t, { x: sx, y: sy } = P.spl, h = 7 * (1 - sm(0, 0.45, q));\n    if (h > 0.5) blob(sx, sy - h, 1.6 + 2 * q, h + 0.5, SNOW, 0, 0);\n    for (let y = floor(sy - 3), rx = 3 + 6 * q, ry = 1.4 + 1.2 * q; y \u003c= sy + 3 && q \u003c 1.4; y++)\n      for (let x = max(0, floor(sx - rx)); x \u003c= min(W - 1, sx + rx); x++) {\n        const e = 1 - ((x + 0.5 - sx) / rx) ** 2 - ((y + 0.5 - sy) / ry) ** 2, o = (y * W + x) * 3;\n        if (e > 0) for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * IL[o + c] * 1.2 - F[o + c]) * min(1, e * 3) * (1 - q / 1.4);\n      }\n    const r = 4 + 20 * q;\n    for (let x = 0; x \u003c W; x++)\n      for (const sd of [-1, 1]) {\n        const dx = (x + 0.5 - P.spl.x) / r, y = floor(P.spl.y + sd * r * 0.3 * sqrt(max(0, 1 - dx * dx)));\n        if (abs(dx) \u003c 1 && y \u003c H && Z[y * W + x] === 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] += 120 * (1 - q / 2) * IL[(y * W + x) * 3 + c];\n      }\n  }\n  for (const [x, y] of P.drops) dot(x, y, SNOW, 1);\n  // The steam over everything, lit by the sky and the lantern.\n  const G = P.G, SC = P.steamC;\n  G.fill(0);\n  for (const q of P.puffs) {\n    const a = q.a * sm(0, 0.9, q.age) * (1 - sm(q.life * 0.5, q.life, q.age)), gx = q.x / 2, gy = q.y / 2, rr = q.r * 0.75;\n    for (let j = max(0, floor(gy - rr * 1.3)); j \u003c= min(GH - 1, gy + rr * 1.3); j++)\n      for (let i = max(0, floor(gx - rr)); i \u003c= min(GW - 1, gx + rr); i++) {\n        const e = 1 - (i + 0.5 - gx) ** 2 / (rr * rr) - (j + 0.5 - gy) ** 2 / (rr * rr * 1.6);\n        if (e > 0) G[j * GW + i] += a * e * e;\n      }\n  }\n  // A low mist on the water, and the steam torn into wisps.\n  for (let j = 0, c = 0; j \u003c GH; j++)\n    for (let i = 0, mist = 0.2 * sm(PB - 8, PB + 14, j * 2 + 1); i \u003c GW; i++, c++)\n      if ((G[c] += mist) > 0.01) G[c] *= 0.2 + 0.85 * vn(i * 0.24 + P.fx, j * 0.17 + P.fy) + 0.45 * vn(i * 0.62 - P.fx, j * 0.44 + P.fy * 2);\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 2 - 0.25, j0 = cl(floor(v), 0, GH - 1), j1 = min(GH - 1, j0 + 1), fv = cl(v - j0, 0, 1), ay = 0.4 + 0.45 * sm(108, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const u2 = x / 2 - 0.25, i0 = cl(floor(u2), 0, GW - 1), i1 = min(GW - 1, i0 + 1), fu = cl(u2 - i0, 0, 1);\n      const D = mix(mix(G[j0 * GW + i0], G[j0 * GW + i1], fu), mix(G[j1 * GW + i0], G[j1 * GW + i1], fu), fv);\n      if (D \u003c 0.05) continue;\n      const a = ay * sm(0.05, 1.3, D), i = y * W + x, o = i * 3, lm = P.lm[i] * lamp * 200;\n      for (let c = 0; c \u003c 3; c++) F[o + c] += (SC[c] + LC[c] * lm - F[o + c]) * a;\n    }\n  }\n  // Snow falling, thicker in the wind.\n  const nf = floor(110 + 70 * abs(P.w));\n  for (let n = 0; n \u003c nf; n++) {\n    const f = P.flakes[n], x = floor(f.x), y = floor(f.y);\n    if (y \u003c 0 || y >= H) continue;\n    const i = y * W + x, o = i * 3, b = 0.45 + 0.5 * f.z;\n    for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * (IL[o + c] * 0.6 + 0.4) - F[o + c]) * b;\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower."},{"name":"Monkeys","min":3,"max":14,"about":"How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam."},{"name":"Wind","min":-1,"max":1,"about":"Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it."}],"start":[0,2,3,0.06],"measures":{"motion":0.2849,"detail":0.086,"edges":0.3721,"complexity":2.5086,"coverage":0.9682,"colour":0.1461,"drift":0.1151},"knobResponse":[0.1114,0.1216,0.0428,0.1209]},{"slug":"soap-film","title":"Soap Film","family":"cosmetic","round":39,"note":"고리에 건 세안 거품의 막이 세로로 서서 빠져요. 위로 갈수록 얇아서 뉴턴의 색 띠가 가로로 쌓여 가라앉고, 옆에서 얇은 막이 기둥으로 올라오고, 위에서 검은 막이 내려와요. 다 얇아지면 막이 터지고 새 막이 아래에서 올라와요.","idea":"A soap film fills the panel and drains, thinner toward the top, so Newton's interference colours stack in bands that sink while slow eddies wind them into spirals, thin film pulled from the sides rises in plumes and the black film spreads down from the top, until the film bursts and a new one is drawn up from the bottom.","buttons":"K1 tap bursts the film now, and a new one is drawn up after it.","code":"// ===== Patternflow pattern =====\n// Title:   Soap Film\n// Family:  cosmetic\n// Idea:    A soap film fills the panel and drains, thinner toward the top, so Newton's interference colours stack in bands that sink while slow eddies wind them into spirals, thin film pulled from the sides rises in plumes and the black film spreads down from the top, until the film bursts and a new one is drawn up from the bottom.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after the film of a foaming cleanser stretched across a ring, coloured by thin-film interference in Newton's colour series (Isaac Newton, Opticks, 1704) and thinning from the top as it drains\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Light=0..1, Swirl=0..1\n//\n// Knob 1: Hue. Turns every colour of the film round the grey axis together; the black film stays grey. At 0 Newton's own colours: a gold and cream band of the first order under the black film, then indigo, blue, yellow, orange and magenta, then pastel greens and pinks lower down. At 0.25 the first-order band is green, at 0.5 sky blue, at 0.75 magenta, the rest following. Orange, yellow and lime that come out dark are lifted most of the way to full and paled a little, so they read amber, gold or lime and never brown or olive, and no colour of the film falls below a fifth.\n// Knob 2: Speed. At 2 the film opens 2 s into its drainage; the black film appears at the top within a second and comes down 7.7 LEDs a second, past the middle by 9 s, while the bottom thins from 950 nm when drawn to 550 six seconds later. When the black film is 68% of the way down, 11.8 s in, the film bursts: a hole opens near the top and its rim runs across the panel in 0.9 s throwing spray, the panel stays dark 0.4 s and a new film is drawn up from the bottom in 1.2 s, 15 s round after the first. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Light. The wall behind the film, black at 0, so the black film reads black. Turned up, a white wall shows through wherever the film reflects little: the black film and the hole of a burst go grey and then white, and the colours pale toward pastel; at 1 a pearly white sheet with pastel bands.\n// Knob 4: Swirl. How hard the eddies spin. One starts every 1.1 to 2.1 s somewhere in the film, 9 to 17 LEDs across its core, and spins up and down over 4 to 8 s; the film keeps the twist and drainage sorts it back into layers over about 8 s. At 0 an eddy winds the bands most of a turn at its core, at the start about one turn, at 1 two and a half, curling the gold edge of the black film into spirals.\n// Buttons: K1 tap bursts the film now, and a new one is drawn up after it.\n\nconst W = 64, H = 128, N = W * H;\n// Film index, and the thickness table in nm.\nconst NF = 1.33, HMAX = 1400;\n// Thinner than this the film is black film, nm.\nconst BLACK = 30;\n// Seconds of drainage at Speed 2 before the first frame.\nconst AGE0 = 2;\n// Gain and gamma of the table.\nconst GAIN = 0.95, GAM = 0.8;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// CIE 1931 colour matching, the piecewise Gaussian fit of Wyman, Sloan and\n// Shirley (2013).\nconst g1 = (l, m, a, b) => {\n  const t = (l - m) / (l \u003c m ? a : b);\n  return exp(-0.5 * t * t);\n};\nconst cmf = (l) => [\n  1.056 * g1(l, 599.8, 37.9, 31) + 0.362 * g1(l, 442, 16, 26.7) - 0.065 * g1(l, 501.1, 20.4, 26.2),\n  0.821 * g1(l, 568.8, 46.9, 40.5) + 0.286 * g1(l, 530.9, 16.3, 31.1),\n  1.217 * g1(l, 437, 11.8, 36) + 0.681 * g1(l, 459, 26, 13.8),\n];\nconst toRGB = (X, Y, Z) => [3.2406 * X - 1.5372 * Y - 0.4986 * Z, -0.9689 * X + 1.8758 * Y + 0.0415 * Z, 0.0557 * X - 0.204 * Y + 1.057 * Z];\n\n// Reflectance of a film h nm thick, two beams: the front face reflects with\n// r = (1 - n) / (1 + n) and the back with -r, a half wave apart, so\n// R = 4 r^2 sin^2(2 pi n h / lambda), zero as h goes to zero. Summed over\n// 400 to 700 nm in 10 nm steps against an equal-energy light and divided by\n// the full white, so a film reflecting every wavelength fully is 1, 1, 1.\nfunction baseTable() {\n  const L = [], C = [];\n  for (let l = 400; l \u003c= 700; l += 10) L.push(l), C.push(cmf(l));\n  let wx = 0, wy = 0, wz = 0;\n  for (const c of C) (wx += c[0]), (wy += c[1]), (wz += c[2]);\n  const wr = toRGB(wx, wy, wz);\n  const T = new Float32Array(HMAX * 3);\n  for (let h = 0; h \u003c HMAX; h++) {\n    let X = 0, Y = 0, Z = 0;\n    for (let i = 0; i \u003c L.length; i++) {\n      const s = sin((2 * PI * NF * h) / L[i]), R = s * s;\n      X += R * C[i][0];\n      Y += R * C[i][1];\n      Z += R * C[i][2];\n    }\n    const c = toRGB(X, Y, Z);\n    for (let k = 0; k \u003c 3; k++) T[h * 3 + k] = max(0, c[k] / wr[k]);\n  }\n  return T;\n}\n\nfunction hsvOf(r, g, b) {\n  const mx = max(r, g, b), mn = min(r, g, b), d = mx - mn;\n  let h = 0;\n  if (d > 1e-6) h = mx === r ? ((g - b) / d + 6) % 6 : mx === g ? (b - r) / d + 2 : (r - g) / d + 4;\n  return [h / 6, mx > 0 ? d / mx : 0, mx];\n}\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// The table as the panel shows it: turned round the grey axis by the hue,\n// a light gamma, and paled toward a white wall behind as Light turns up.\nfunction displayTable(S) {\n  const B = S.base, D = S.lut, a = 2 * PI * S.hue, ca = cos(a), sa = sin(a), k = (1 - ca) / 3, q = sa / sqrt(3);\n  const m = [ca + k, k - q, k + q, k + q, ca + k, k - q, k - q, k + q, ca + k];\n  const lw = S.light, tmp = [0, 0, 0];\n  for (let h = 0; h \u003c HMAX; h++) {\n    const r = B[h * 3], g = B[h * 3 + 1], b = B[h * 3 + 2];\n    const Y = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n    let R, G, Bb;\n    if (h \u003c BLACK) {\n      // Black film keeps its cool grey whatever the hue.\n      const v = (GAIN * Y) ** GAM;\n      (R = 0.85 * v), (G = 0.93 * v), (Bb = 1.1 * v);\n    } else {\n      R = min(1, max(0, m[0] * r + m[1] * g + m[2] * b) * GAIN) ** GAM;\n      G = min(1, max(0, m[3] * r + m[4] * g + m[5] * b) * GAIN) ** GAM;\n      Bb = min(1, max(0, m[6] * r + m[7] * g + m[8] * b) * GAIN) ** GAM;\n      // No colour of the film itself falls below a fifth; and orange, yellow\n      // and lime that come out dark, which read brown or olive, are lifted\n      // most of the way to full and paled a little.\n      const [hh, ss, vv] = hsvOf(R, G, Bb), warm = cl(1.4 - abs(hh - 0.15) / 0.12, 0, 1) * sm(0.97, 0.6, vv);\n      const v2 = 0.2 + 0.8 * vv;\n      hsv(hh, ss * (1 - 0.3 * warm), v2 + (0.95 - v2) * warm, tmp, 0);\n      (R = tmp[0]), (G = tmp[1]), (Bb = tmp[2]);\n    }\n    // A white wall behind shows through where the film reflects little.\n    const wl = lw * (0.35 + 0.65 * (1 - min(1, Y)));\n    D[h * 3] = 250 * (R + (1 - R) * wl);\n    D[h * 3 + 1] = 250 * (G + (1 - G) * wl);\n    D[h * 3 + 2] = 250 * (Bb + (1 - Bb) * wl);\n  }\n}\n\nconst hash = (n) => {\n  const s = sin(n * 12.9898) * 43758.5453;\n  return s - floor(s);\n};\n\n// Smooth value noise on a 64 x 64 lattice that wraps.\nfunction noise(L, x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx), uy = fy * fy * (3 - 2 * fy);\n  const x0 = xi & 63, y0 = yi & 63, x1 = (x0 + 1) & 63, y1 = (y0 + 1) & 63;\n  const a = L[y0 * 64 + x0], b = L[y0 * 64 + x1], c = L[y1 * 64 + x0], d = L[y1 * 64 + x1];\n  return a + (b - a) * ux + (c - a + (d - c - b + a) * ux) * uy;\n}\n\nexport function setup(params) {\n  const L = new Float32Array(64 * 64);\n  for (let i = 0; i \u003c L.length; i++) L[i] = random() * 2 - 1;\n  params.s = {\n    hue: -1, light: -1, speed: 2, swirl: 0, begun: false, t: 0, age: 0,\n    base: baseTable(), lut: new Float32Array(HMAX * 3), L,\n    MX: new Float32Array(N), MY: new Float32Array(N), T: new Float32Array(N),\n    NX: new Float32Array(N), NY: new Float32Array(N), NT: new Float32Array(N),\n    eddies: [], nextEddy: 0, nextPlume: 0, side: false, hole: null, draw: 0,\n  };\n  reset(params.s);\n}\n\n// A fresh film: every point where it was drawn, nothing thin in it yet.\nfunction reset(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.MX[y * W + x] = x;\n      S.MY[y * W + x] = y;\n    }\n  S.T.fill(0);\n  S.age = 0;\n}\n\nfunction spawnEddy(S) {\n  S.eddies.push({\n    x: 8 + random() * 48, y: 16 + random() * 104, R: 9 + random() * 8,\n    w: (random() \u003c 0.5 ? -1 : 1) * (0.7 + 0.6 * random()), age: 0, life: 4 + 4 * random(),\n    vx: (random() - 0.5) * 3, vy: (random() - 0.3) * 3,\n  });\n}\n\n// Thin film pulled out of the border at the sides, which then rises.\nfunction spawnPlume(S, front) {\n  S.side = !S.side;\n  const x0 = S.side ? 0.5 + random() * 3 : W - 1.5 - random() * 3;\n  const y0 = H * (front + (1 - front) * (0.25 + 0.75 * random())), r = 2 + random() * 1.5, a = 0.7 + 0.3 * random();\n  for (let y = max(0, floor(y0 - 7 * r)); y \u003c= min(H - 1, y0 + 7 * r); y++)\n    for (let x = max(0, floor(x0 - 3 * r)); x \u003c= min(W - 1, x0 + 3 * r); x++) {\n      const d2 = ((x - x0) ** 2 + ((y - y0) * 0.4) ** 2) / (r * r), p = y * W + x;\n      S.T[p] = min(1, S.T[p] + a * exp(-d2));\n    }\n}\n\nfunction bilerp(A, x, y) {\n  x = cl(x, 0, W - 1.001);\n  y = cl(y, 0, H - 1.001);\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  const a = A[p], b = A[p + 1], c = A[p + W], d = A[p + W + 1];\n  return a + (b - a) * fx + (c - a + (d - c - b + a) * fx) * fy;\n}\n\n// Where the black film reaches, 0 at the top and 1 at the bottom, for a\n// film of this age.\nconst frontAt = (age) => cl((age - 2.5) * 0.06, 0, 1);\n\nfunction step(S, d) {\n  S.t += d;\n  S.age += d;\n  const front = frontAt(S.age);\n  // Eddies: each spins up and down over its life; the film keeps the twist.\n  if (S.t > S.nextEddy) {\n    spawnEddy(S);\n    S.nextEddy = S.t + 1.1 + random();\n  }\n  for (const e of S.eddies) {\n    e.age += d;\n    e.x += e.vx * d;\n    e.y += e.vy * d;\n  }\n  S.eddies = S.eddies.filter((e) => e.age \u003c e.life);\n  if (S.t > S.nextPlume && !S.draw && !S.hole) {\n    spawnPlume(S, front);\n    S.nextPlume = S.t + 0.12 + 0.12 * random();\n  }\n  const { MX, MY, T, NX, NY, NT, L } = S, sw = 1.4 + 2.6 * S.swirl, t = S.t;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Fine turbulence everywhere, two noise fields as the flow.\n      const n1 = noise(L, x * 0.21 + t * 0.4, y * 0.21 - t * 0.3), n2 = noise(L, x * 0.21 + 17.3 - t * 0.35, y * 0.21 + 9.1 + t * 0.25);\n      let vx = 2.2 * n1, vy = 2.2 * n2;\n      for (const e of S.eddies) {\n        const dx = x - e.x, dy = y - e.y, r2 = dx * dx + dy * dy, R2 = e.R * e.R;\n        if (r2 > 6 * R2) continue;\n        const env = sin((PI * e.age) / e.life), om = sw * e.w * env * exp(-r2 / R2);\n        vx -= om * dy;\n        vy += om * dx;\n      }\n      const qx = x - vx * d, qy = y - vy * d;\n      NX[p] = bilerp(MX, qx, qy);\n      NY[p] = bilerp(MY, qx, qy);\n      // Thin film from the border is lighter and rises through the rest.\n      NT[p] = bilerp(T, qx, qy + 15 * T[p] * d) * (1 - 0.1 * d);\n    }\n  // Drainage sorts the film back into layers: every point eases toward where\n  // it is, over about 8 s.\n  const rx = 1 - exp(-d / 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      MX[p] = NX[p] + (x - NX[p]) * rx;\n      MY[p] = NY[p] + (y - NY[p]) * rx;\n      T[p] = NT[p];\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[3], 0, 1);\n  const hue = k[0] - floor(k[0]), light = cl(k[2], 0, 1);\n  if (abs(hue - S.hue) > 1e-3 || abs(light - S.light) > 1e-3) {\n    S.hue = hue;\n    S.light = light;\n    displayTable(S);\n  }\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c AGE0 * 10; i++) step(S, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.hole) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  const sd = (d * S.speed) / 2;\n  if (!S.hole && frontAt(S.age) > 0.68) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  if (S.hole) {\n    const o = S.hole;\n    if (o.r \u003c 160) o.r += 180 * sd;\n    else {\n      o.gap += sd;\n      if (o.gap > 0.4) {\n        reset(S);\n        S.hole = null;\n        S.draw = 1;\n      }\n    }\n  }\n  if (S.draw > 0) S.draw = max(0, S.draw - sd / 1.2);\n  step(S, sd);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { MX, MY, T, L, lut } = S, age = S.age, t = S.t;\n  const front = frontAt(age);\n  // Thickness at the bottom and just under the black film, nm.\n  const hb = 950 / sqrt(1 + age / 3), ht = 90 + 260 * exp(-age / 1.2);\n  const o = S.hole, dy = S.draw > 0 ? H * S.draw : -1, bgv = 255 * S.light;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (o && (x - o.x) ** 2 + (y - o.y) ** 2 \u003c o.r * o.r) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      if (y \u003c dy) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      // Where this bit of film sat when the film was layered, and how much\n      // thin film from the border it carries.\n      const mx = MX[p], my = MY[p];\n      let u = my / (H - 1) - 0.2 * T[p];\n      if (dy >= 0) u = (u - S.draw) / (1 - S.draw);\n      const edge = front - 0.02 + 0.025 * noise(L, mx * 0.09 + 31, t * 0.15), e0 = max(0, edge);\n      let h;\n      if (u \u003c edge) {\n        // Black film, 1 to 21 nm, reflecting next to nothing.\n        h = 11 + 6 * noise(L, mx * 0.45 + 5, my * 0.45) + 4 * noise(L, mx * 1.2 + 23, my * 1.2 - t * 0.3);\n      } else {\n        const s = cl((u - e0) / (1 - e0), 0, 1);\n        h = ht + (hb - ht) * s ** 0.8;\n        h += 16 * noise(L, mx * 0.75 + 40, my * 0.75) + 6 * noise(L, x * 0.55 + t * 0.6, y * 0.55);\n      }\n      h = cl(h, 0, HMAX - 2);\n      const hi = floor(h), f = h - hi, a = hi * 3;\n      let r = lut[a] + (lut[a + 3] - lut[a]) * f, g = lut[a + 1] + (lut[a + 4] - lut[a + 1]) * f, b = lut[a + 2] + (lut[a + 5] - lut[a + 2]) * f;\n      if (o) {\n        // The rim the burst gathers, running out ahead of the hole, and the\n        // spray it throws.\n        const dr = Math.hypot(x - o.x, y - o.y) - o.r;\n        let rim = dr \u003c 4 ? exp(-dr * 0.7) : 0;\n        if (dr \u003c 9 && hash(x * 7 + y * 131 + floor(o.r) * 17) > 0.9) rim = max(rim, 1 - dr / 9);\n        r += (250 - r) * rim;\n        g += (250 - g) * rim;\n        b += (255 - b) * rim;\n      }\n      display.setPixel(x, y, round(cl(r, 0, 255)), round(cl(g, 0, 255)), round(cl(b, 0, 255)));\n    }\n}\n","layer":{"id":"layer-soap-film","type":"code","name":"soap-film","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Soap Film\n// Family:  cosmetic\n// Idea:    A soap film fills the panel and drains, thinner toward the top, so Newton's interference colours stack in bands that sink while slow eddies wind them into spirals, thin film pulled from the sides rises in plumes and the black film spreads down from the top, until the film bursts and a new one is drawn up from the bottom.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after the film of a foaming cleanser stretched across a ring, coloured by thin-film interference in Newton's colour series (Isaac Newton, Opticks, 1704) and thinning from the top as it drains\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Light=0..1, Swirl=0..1\n//\n// Knob 1: Hue. Turns every colour of the film round the grey axis together; the black film stays grey. At 0 Newton's own colours: a gold and cream band of the first order under the black film, then indigo, blue, yellow, orange and magenta, then pastel greens and pinks lower down. At 0.25 the first-order band is green, at 0.5 sky blue, at 0.75 magenta, the rest following. Orange, yellow and lime that come out dark are lifted most of the way to full and paled a little, so they read amber, gold or lime and never brown or olive, and no colour of the film falls below a fifth.\n// Knob 2: Speed. At 2 the film opens 2 s into its drainage; the black film appears at the top within a second and comes down 7.7 LEDs a second, past the middle by 9 s, while the bottom thins from 950 nm when drawn to 550 six seconds later. When the black film is 68% of the way down, 11.8 s in, the film bursts: a hole opens near the top and its rim runs across the panel in 0.9 s throwing spray, the panel stays dark 0.4 s and a new film is drawn up from the bottom in 1.2 s, 15 s round after the first. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Light. The wall behind the film, black at 0, so the black film reads black. Turned up, a white wall shows through wherever the film reflects little: the black film and the hole of a burst go grey and then white, and the colours pale toward pastel; at 1 a pearly white sheet with pastel bands.\n// Knob 4: Swirl. How hard the eddies spin. One starts every 1.1 to 2.1 s somewhere in the film, 9 to 17 LEDs across its core, and spins up and down over 4 to 8 s; the film keeps the twist and drainage sorts it back into layers over about 8 s. At 0 an eddy winds the bands most of a turn at its core, at the start about one turn, at 1 two and a half, curling the gold edge of the black film into spirals.\n// Buttons: K1 tap bursts the film now, and a new one is drawn up after it.\n\nconst W = 64, H = 128, N = W * H;\n// Film index, and the thickness table in nm.\nconst NF = 1.33, HMAX = 1400;\n// Thinner than this the film is black film, nm.\nconst BLACK = 30;\n// Seconds of drainage at Speed 2 before the first frame.\nconst AGE0 = 2;\n// Gain and gamma of the table.\nconst GAIN = 0.95, GAM = 0.8;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// CIE 1931 colour matching, the piecewise Gaussian fit of Wyman, Sloan and\n// Shirley (2013).\nconst g1 = (l, m, a, b) => {\n  const t = (l - m) / (l \u003c m ? a : b);\n  return exp(-0.5 * t * t);\n};\nconst cmf = (l) => [\n  1.056 * g1(l, 599.8, 37.9, 31) + 0.362 * g1(l, 442, 16, 26.7) - 0.065 * g1(l, 501.1, 20.4, 26.2),\n  0.821 * g1(l, 568.8, 46.9, 40.5) + 0.286 * g1(l, 530.9, 16.3, 31.1),\n  1.217 * g1(l, 437, 11.8, 36) + 0.681 * g1(l, 459, 26, 13.8),\n];\nconst toRGB = (X, Y, Z) => [3.2406 * X - 1.5372 * Y - 0.4986 * Z, -0.9689 * X + 1.8758 * Y + 0.0415 * Z, 0.0557 * X - 0.204 * Y + 1.057 * Z];\n\n// Reflectance of a film h nm thick, two beams: the front face reflects with\n// r = (1 - n) / (1 + n) and the back with -r, a half wave apart, so\n// R = 4 r^2 sin^2(2 pi n h / lambda), zero as h goes to zero. Summed over\n// 400 to 700 nm in 10 nm steps against an equal-energy light and divided by\n// the full white, so a film reflecting every wavelength fully is 1, 1, 1.\nfunction baseTable() {\n  const L = [], C = [];\n  for (let l = 400; l \u003c= 700; l += 10) L.push(l), C.push(cmf(l));\n  let wx = 0, wy = 0, wz = 0;\n  for (const c of C) (wx += c[0]), (wy += c[1]), (wz += c[2]);\n  const wr = toRGB(wx, wy, wz);\n  const T = new Float32Array(HMAX * 3);\n  for (let h = 0; h \u003c HMAX; h++) {\n    let X = 0, Y = 0, Z = 0;\n    for (let i = 0; i \u003c L.length; i++) {\n      const s = sin((2 * PI * NF * h) / L[i]), R = s * s;\n      X += R * C[i][0];\n      Y += R * C[i][1];\n      Z += R * C[i][2];\n    }\n    const c = toRGB(X, Y, Z);\n    for (let k = 0; k \u003c 3; k++) T[h * 3 + k] = max(0, c[k] / wr[k]);\n  }\n  return T;\n}\n\nfunction hsvOf(r, g, b) {\n  const mx = max(r, g, b), mn = min(r, g, b), d = mx - mn;\n  let h = 0;\n  if (d > 1e-6) h = mx === r ? ((g - b) / d + 6) % 6 : mx === g ? (b - r) / d + 2 : (r - g) / d + 4;\n  return [h / 6, mx > 0 ? d / mx : 0, mx];\n}\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// The table as the panel shows it: turned round the grey axis by the hue,\n// a light gamma, and paled toward a white wall behind as Light turns up.\nfunction displayTable(S) {\n  const B = S.base, D = S.lut, a = 2 * PI * S.hue, ca = cos(a), sa = sin(a), k = (1 - ca) / 3, q = sa / sqrt(3);\n  const m = [ca + k, k - q, k + q, k + q, ca + k, k - q, k - q, k + q, ca + k];\n  const lw = S.light, tmp = [0, 0, 0];\n  for (let h = 0; h \u003c HMAX; h++) {\n    const r = B[h * 3], g = B[h * 3 + 1], b = B[h * 3 + 2];\n    const Y = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n    let R, G, Bb;\n    if (h \u003c BLACK) {\n      // Black film keeps its cool grey whatever the hue.\n      const v = (GAIN * Y) ** GAM;\n      (R = 0.85 * v), (G = 0.93 * v), (Bb = 1.1 * v);\n    } else {\n      R = min(1, max(0, m[0] * r + m[1] * g + m[2] * b) * GAIN) ** GAM;\n      G = min(1, max(0, m[3] * r + m[4] * g + m[5] * b) * GAIN) ** GAM;\n      Bb = min(1, max(0, m[6] * r + m[7] * g + m[8] * b) * GAIN) ** GAM;\n      // No colour of the film itself falls below a fifth; and orange, yellow\n      // and lime that come out dark, which read brown or olive, are lifted\n      // most of the way to full and paled a little.\n      const [hh, ss, vv] = hsvOf(R, G, Bb), warm = cl(1.4 - abs(hh - 0.15) / 0.12, 0, 1) * sm(0.97, 0.6, vv);\n      const v2 = 0.2 + 0.8 * vv;\n      hsv(hh, ss * (1 - 0.3 * warm), v2 + (0.95 - v2) * warm, tmp, 0);\n      (R = tmp[0]), (G = tmp[1]), (Bb = tmp[2]);\n    }\n    // A white wall behind shows through where the film reflects little.\n    const wl = lw * (0.35 + 0.65 * (1 - min(1, Y)));\n    D[h * 3] = 250 * (R + (1 - R) * wl);\n    D[h * 3 + 1] = 250 * (G + (1 - G) * wl);\n    D[h * 3 + 2] = 250 * (Bb + (1 - Bb) * wl);\n  }\n}\n\nconst hash = (n) => {\n  const s = sin(n * 12.9898) * 43758.5453;\n  return s - floor(s);\n};\n\n// Smooth value noise on a 64 x 64 lattice that wraps.\nfunction noise(L, x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx), uy = fy * fy * (3 - 2 * fy);\n  const x0 = xi & 63, y0 = yi & 63, x1 = (x0 + 1) & 63, y1 = (y0 + 1) & 63;\n  const a = L[y0 * 64 + x0], b = L[y0 * 64 + x1], c = L[y1 * 64 + x0], d = L[y1 * 64 + x1];\n  return a + (b - a) * ux + (c - a + (d - c - b + a) * ux) * uy;\n}\n\nexport function setup(params) {\n  const L = new Float32Array(64 * 64);\n  for (let i = 0; i \u003c L.length; i++) L[i] = random() * 2 - 1;\n  params.s = {\n    hue: -1, light: -1, speed: 2, swirl: 0, begun: false, t: 0, age: 0,\n    base: baseTable(), lut: new Float32Array(HMAX * 3), L,\n    MX: new Float32Array(N), MY: new Float32Array(N), T: new Float32Array(N),\n    NX: new Float32Array(N), NY: new Float32Array(N), NT: new Float32Array(N),\n    eddies: [], nextEddy: 0, nextPlume: 0, side: false, hole: null, draw: 0,\n  };\n  reset(params.s);\n}\n\n// A fresh film: every point where it was drawn, nothing thin in it yet.\nfunction reset(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.MX[y * W + x] = x;\n      S.MY[y * W + x] = y;\n    }\n  S.T.fill(0);\n  S.age = 0;\n}\n\nfunction spawnEddy(S) {\n  S.eddies.push({\n    x: 8 + random() * 48, y: 16 + random() * 104, R: 9 + random() * 8,\n    w: (random() \u003c 0.5 ? -1 : 1) * (0.7 + 0.6 * random()), age: 0, life: 4 + 4 * random(),\n    vx: (random() - 0.5) * 3, vy: (random() - 0.3) * 3,\n  });\n}\n\n// Thin film pulled out of the border at the sides, which then rises.\nfunction spawnPlume(S, front) {\n  S.side = !S.side;\n  const x0 = S.side ? 0.5 + random() * 3 : W - 1.5 - random() * 3;\n  const y0 = H * (front + (1 - front) * (0.25 + 0.75 * random())), r = 2 + random() * 1.5, a = 0.7 + 0.3 * random();\n  for (let y = max(0, floor(y0 - 7 * r)); y \u003c= min(H - 1, y0 + 7 * r); y++)\n    for (let x = max(0, floor(x0 - 3 * r)); x \u003c= min(W - 1, x0 + 3 * r); x++) {\n      const d2 = ((x - x0) ** 2 + ((y - y0) * 0.4) ** 2) / (r * r), p = y * W + x;\n      S.T[p] = min(1, S.T[p] + a * exp(-d2));\n    }\n}\n\nfunction bilerp(A, x, y) {\n  x = cl(x, 0, W - 1.001);\n  y = cl(y, 0, H - 1.001);\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  const a = A[p], b = A[p + 1], c = A[p + W], d = A[p + W + 1];\n  return a + (b - a) * fx + (c - a + (d - c - b + a) * fx) * fy;\n}\n\n// Where the black film reaches, 0 at the top and 1 at the bottom, for a\n// film of this age.\nconst frontAt = (age) => cl((age - 2.5) * 0.06, 0, 1);\n\nfunction step(S, d) {\n  S.t += d;\n  S.age += d;\n  const front = frontAt(S.age);\n  // Eddies: each spins up and down over its life; the film keeps the twist.\n  if (S.t > S.nextEddy) {\n    spawnEddy(S);\n    S.nextEddy = S.t + 1.1 + random();\n  }\n  for (const e of S.eddies) {\n    e.age += d;\n    e.x += e.vx * d;\n    e.y += e.vy * d;\n  }\n  S.eddies = S.eddies.filter((e) => e.age \u003c e.life);\n  if (S.t > S.nextPlume && !S.draw && !S.hole) {\n    spawnPlume(S, front);\n    S.nextPlume = S.t + 0.12 + 0.12 * random();\n  }\n  const { MX, MY, T, NX, NY, NT, L } = S, sw = 1.4 + 2.6 * S.swirl, t = S.t;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Fine turbulence everywhere, two noise fields as the flow.\n      const n1 = noise(L, x * 0.21 + t * 0.4, y * 0.21 - t * 0.3), n2 = noise(L, x * 0.21 + 17.3 - t * 0.35, y * 0.21 + 9.1 + t * 0.25);\n      let vx = 2.2 * n1, vy = 2.2 * n2;\n      for (const e of S.eddies) {\n        const dx = x - e.x, dy = y - e.y, r2 = dx * dx + dy * dy, R2 = e.R * e.R;\n        if (r2 > 6 * R2) continue;\n        const env = sin((PI * e.age) / e.life), om = sw * e.w * env * exp(-r2 / R2);\n        vx -= om * dy;\n        vy += om * dx;\n      }\n      const qx = x - vx * d, qy = y - vy * d;\n      NX[p] = bilerp(MX, qx, qy);\n      NY[p] = bilerp(MY, qx, qy);\n      // Thin film from the border is lighter and rises through the rest.\n      NT[p] = bilerp(T, qx, qy + 15 * T[p] * d) * (1 - 0.1 * d);\n    }\n  // Drainage sorts the film back into layers: every point eases toward where\n  // it is, over about 8 s.\n  const rx = 1 - exp(-d / 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      MX[p] = NX[p] + (x - NX[p]) * rx;\n      MY[p] = NY[p] + (y - NY[p]) * rx;\n      T[p] = NT[p];\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[3], 0, 1);\n  const hue = k[0] - floor(k[0]), light = cl(k[2], 0, 1);\n  if (abs(hue - S.hue) > 1e-3 || abs(light - S.light) > 1e-3) {\n    S.hue = hue;\n    S.light = light;\n    displayTable(S);\n  }\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c AGE0 * 10; i++) step(S, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.hole) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  const sd = (d * S.speed) / 2;\n  if (!S.hole && frontAt(S.age) > 0.68) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  if (S.hole) {\n    const o = S.hole;\n    if (o.r \u003c 160) o.r += 180 * sd;\n    else {\n      o.gap += sd;\n      if (o.gap > 0.4) {\n        reset(S);\n        S.hole = null;\n        S.draw = 1;\n      }\n    }\n  }\n  if (S.draw > 0) S.draw = max(0, S.draw - sd / 1.2);\n  step(S, sd);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { MX, MY, T, L, lut } = S, age = S.age, t = S.t;\n  const front = frontAt(age);\n  // Thickness at the bottom and just under the black film, nm.\n  const hb = 950 / sqrt(1 + age / 3), ht = 90 + 260 * exp(-age / 1.2);\n  const o = S.hole, dy = S.draw > 0 ? H * S.draw : -1, bgv = 255 * S.light;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (o && (x - o.x) ** 2 + (y - o.y) ** 2 \u003c o.r * o.r) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      if (y \u003c dy) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      // Where this bit of film sat when the film was layered, and how much\n      // thin film from the border it carries.\n      const mx = MX[p], my = MY[p];\n      let u = my / (H - 1) - 0.2 * T[p];\n      if (dy >= 0) u = (u - S.draw) / (1 - S.draw);\n      const edge = front - 0.02 + 0.025 * noise(L, mx * 0.09 + 31, t * 0.15), e0 = max(0, edge);\n      let h;\n      if (u \u003c edge) {\n        // Black film, 1 to 21 nm, reflecting next to nothing.\n        h = 11 + 6 * noise(L, mx * 0.45 + 5, my * 0.45) + 4 * noise(L, mx * 1.2 + 23, my * 1.2 - t * 0.3);\n      } else {\n        const s = cl((u - e0) / (1 - e0), 0, 1);\n        h = ht + (hb - ht) * s ** 0.8;\n        h += 16 * noise(L, mx * 0.75 + 40, my * 0.75) + 6 * noise(L, x * 0.55 + t * 0.6, y * 0.55);\n      }\n      h = cl(h, 0, HMAX - 2);\n      const hi = floor(h), f = h - hi, a = hi * 3;\n      let r = lut[a] + (lut[a + 3] - lut[a]) * f, g = lut[a + 1] + (lut[a + 4] - lut[a + 1]) * f, b = lut[a + 2] + (lut[a + 5] - lut[a + 2]) * f;\n      if (o) {\n        // The rim the burst gathers, running out ahead of the hole, and the\n        // spray it throws.\n        const dr = Math.hypot(x - o.x, y - o.y) - o.r;\n        let rim = dr \u003c 4 ? exp(-dr * 0.7) : 0;\n        if (dr \u003c 9 && hash(x * 7 + y * 131 + floor(o.r) * 17) > 0.9) rim = max(rim, 1 - dr / 9);\n        r += (250 - r) * rim;\n        g += (250 - g) * rim;\n        b += (255 - b) * rim;\n      }\n      display.setPixel(x, y, round(cl(r, 0, 255)), round(cl(g, 0, 255)), round(cl(b, 0, 255)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Light=0..1, Swirl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour of the film round the grey axis together; the black film stays grey. At 0 Newton's own colours: a gold and cream band of the first order under the black film, then indigo, blue, yellow, orange and magenta, then pastel greens and pinks lower down. At 0.25 the first-order band is green, at 0.5 sky blue, at 0.75 magenta, the rest following. Orange, yellow and lime that come out dark are lifted most of the way to full and paled a little, so they read amber, gold or lime and never brown or olive, and no colour of the film falls below a fifth."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the film opens 2 s into its drainage; the black film appears at the top within a second and comes down 7.7 LEDs a second, past the middle by 9 s, while the bottom thins from 950 nm when drawn to 550 six seconds later. When the black film is 68% of the way down, 11.8 s in, the film bursts: a hole opens near the top and its rim runs across the panel in 0.9 s throwing spray, the panel stays dark 0.4 s and a new film is drawn up from the bottom in 1.2 s, 15 s round after the first. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Light","min":0,"max":1,"about":"The wall behind the film, black at 0, so the black film reads black. Turned up, a white wall shows through wherever the film reflects little: the black film and the hole of a burst go grey and then white, and the colours pale toward pastel; at 1 a pearly white sheet with pastel bands."},{"name":"Swirl","min":0,"max":1,"about":"How hard the eddies spin. One starts every 1.1 to 2.1 s somewhere in the film, 9 to 17 LEDs across its core, and spins up and down over 4 to 8 s; the film keeps the twist and drainage sorts it back into layers over about 8 s. At 0 an eddy winds the bands most of a turn at its core, at the start about one turn, at 1 two and a half, curling the gold edge of the black film into spirals."}],"start":[0,2,0,0.06],"measures":{"motion":0.2419,"detail":0.0368,"edges":0.0854,"complexity":2.3422,"coverage":0.754,"colour":0.6118,"drift":0.3785},"knobResponse":[0.4809,0.5345,0.3525,0.1517]},{"slug":"sorting","title":"Sorting","family":"algo","round":2,"note":"막대 64개를 알고리즘 하나가 한 번에 한 동작씩 줄 세워요. 비교하는 막대는 희게, 바꾸는 막대는 붉게 켜지고, 다 서면 위에서 아래로 훑어 확인한 뒤 다시 섞어요.","idea":"Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.","buttons":"K1 tap throws the bars back into a heap.","code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-sorting","type":"code","name":"sorting","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the bars, which run from the shortest to the longest across a third of the colour wheel."},{"name":"Speed","min":0,"max":5,"about":"Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one."},{"name":"Algorithm","min":0,"max":7,"about":"0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand."},{"name":"Rows","min":2,"max":8,"about":"How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them."}],"start":[0,2,0,2],"measures":{"motion":1.5282,"detail":0.0322,"edges":0.8211,"complexity":0.0601,"coverage":0.5078,"colour":0.3589,"drift":0.1727},"knobResponse":[0.2105,0.2338,0.2297,0.1743]},{"slug":"sorting-network","title":"Sorting Network","family":"line","round":33,"note":"실 열여섯 가닥이 이웃끼리 한 쌍씩 자리를 바꿔 128줄 만에 순서가 거꾸로 되고, 다음 네트워크가 이어받아 실마다 패널을 사인 곡선으로 가로질러요. 균일한 무작위 정렬 네트워크라 바꾼 자리를 찍은 점이 가운데로 반원 꼴로 몰려요. K3 은 실을 32가닥까지 늘리고, K1 을 누르면 실 하나만 8초 동안 밝혀 그 곡선을 보여 줘요.","idea":"Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.","buttons":"K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.","code":"// ===== Patternflow pattern =====\n// Title:   Sorting Network\n// Family:  line\n// Idea:    Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: uniform random sorting networks (Omer Angel, Alexander Holroyd, Dan Romik, Bálint Virág, 2007), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1\n//\n// Knob 1: Hue. Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right.\n// Knob 2: Speed. Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds.\n// Knob 3: Wires. How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row.\n// Knob 4: Bubble. Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns.\n// Buttons: K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.\n\nconst W = 64, H = 128, NET = 128;\nconst HMAX = 12, HALF_PI = Math.PI / 2;\nconst { min, max, floor, ceil, sin, cos } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A uniformly random standard Young tableau of the staircase (n-1, ..., 1),\n// by the hook walk of Greene, Nijenhuis and Wilf (1979): start on a uniform\n// cell, jump to a uniform other cell of its hook until the walk stands on a\n// corner, write the largest number not yet used there, take the corner off.\n// T[r * (n-1) + c], 0-indexed, rows of n-1-r cells.\nfunction hookWalk(n) {\n  const R = n - 1, len = new Int32Array(R), T = new Int32Array(R * R);\n  for (let r = 0; r \u003c R; r++) len[r] = R - r;\n  let cells = (n * (n - 1)) / 2;\n  for (let val = cells; val >= 1; val--, cells--) {\n    let k = floor(Math.random() * cells), r = 0;\n    while (k >= len[r]) (k -= len[r]), r++;\n    let c = k;\n    for (;;) {\n      const arm = len[r] - 1 - c;\n      let leg = 0;\n      while (r + leg + 1 \u003c R && len[r + leg + 1] > c) leg++;\n      if (arm + leg === 0) break;\n      const h = floor(Math.random() * (arm + leg));\n      if (h \u003c arm) c += 1 + h;\n      else r += 1 + h - arm;\n    }\n    T[r * R + c] = val;\n    len[r]--;\n  }\n  return T;\n}\n\n// The tableau read row by row, 1 to N: under Edelman-Greene it is the\n// bubble-sort network run backwards in time, 1 | 2 1 | 3 2 1 | ..., where\n// the thread in place k walks left past all k threads before it in one\n// straight diagonal. Read column by column it is the mirror image.\nfunction readTableau(n, byRow) {\n  const R = n - 1, T = new Int32Array(R * R);\n  let v = 1;\n  for (let a = 0; a \u003c R; a++) for (let b = 0; b \u003c R - a; b++) T[byRow ? a * R + b : b * R + a] = v++;\n  return T;\n}\n\n// Edelman-Greene (1987), as Angel, Holroyd, Romik and Virag lay it out:\n// N times over, the largest entry N sits in a corner (i, j) with i + j = n,\n// 1-indexed; swap places j and j + 1; empty that cell and slide the hole to\n// (1, 1), each time moving in the larger of the neighbours above and to the\n// left; add 1 to every entry and write 1 in (1, 1). Adding 1 to everything\n// is kept as one offset, so a network costs N * n steps, not N * N. Checked\n// in a scratch script over 1400 networks with n from 3 to 32: every swap\n// takes a pair still in order and each network ends reversed; at n = 4 all\n// 16 reduced words of the longest permutation came out equally often.\nfunction edelmanGreene(T0, n, out) {\n  const R = n - 1, N = (n * (n - 1)) / 2, t = Int32Array.from(T0);\n  let off = 0;\n  for (let s = 0; s \u003c N; s++) {\n    let r = 0;\n    while (r \u003c R && t[r * R + R - 1 - r] + off !== N) r++;\n    let c = R - 1 - r;\n    out[s] = c;\n    for (;;) {\n      const up = r > 0 ? t[(r - 1) * R + c] : -1e9, lf = c > 0 ? t[r * R + c - 1] : -1e9;\n      if (r === 0 && c === 0) break;\n      if (up > lf) (t[r * R + c] = up), r--;\n      else (t[r * R + c] = lf), c--;\n    }\n    off++;\n    t[0] = 1 - off;\n  }\n}\n\n// Each cell gets (1 - b) * uniform + b * bubble. Both tableaux grow along\n// rows and down columns, so their blend does too, and ranking the cells by\n// it is a standard tableau again: a sorting network for every b.\nfunction network(P, net) {\n  const n = P.n, R = n - 1, N = (n * (n - 1)) / 2, b = P.bubble;\n  const Tb = (net.m & 1) === 0 ? P.tabRow : P.tabCol;\n  let T = net.tu;\n  if (b > 0) {\n    const key = new Float64Array(R * R), ids = [];\n    for (let r = 0; r \u003c R; r++) for (let c = 0; c \u003c R - r; c++) {\n      const i = r * R + c;\n      key[i] = (1 - b) * net.tu[i] + b * Tb[i];\n      ids.push(i);\n    }\n    ids.sort((x, y) => key[x] - key[y] || x - y);\n    T = new Int32Array(R * R);\n    for (let k = 0; k \u003c N; k++) T[ids[k]] = k + 1;\n  }\n  edelmanGreene(T, n, net.sw);\n  // The cheap form of the check, once a network: every swap must take a\n  // pair still in its starting order, and the end must be the reversal.\n  // A miss falls back on bubble sort, which is always right.\n  const a = Int32Array.from({ length: n }, (_, i) => i);\n  let ok = true;\n  for (let s = 0; s \u003c N && ok; s++) {\n    const p = net.sw[s], x = a[p];\n    if (x > a[p + 1]) ok = false;\n    (a[p] = a[p + 1]), (a[p + 1] = x);\n  }\n  for (let i = 0; i \u003c n && ok; i++) if (a[i] !== n - 1 - i) ok = false;\n  if (!ok) edelmanGreene(Tb, n, net.sw);\n  net.b = b;\n}\n\nfunction rebuild(P) {\n  const n = P.n;\n  P.tabRow = readTableau(n, true);\n  P.tabCol = readTableau(n, false);\n  P.nets = new Map();\n  P.cols = new Float32Array(n * 3);\n  // Four threads are drawn bright, both edges and two between, 0, 5, 10\n  // and 15 of sixteen: the edges swing all the way across on half a cosine,\n  // the two inside on arcs whose height the network picks.\n  P.lead = new Uint8Array(n);\n  for (let k = 0; k \u003c 4; k++) P.lead[Math.round((k * (n - 1)) / 3)] = 1;\n  P.colHue = NaN;\n  const cap = 4 * ((n * (n - 1)) / 2) + 8;\n  P.mt = new Float32Array(cap);\n  P.md = new Int8Array(cap);\n  P.mw = new Int32Array(cap);\n  P.mh = new Float32Array(cap);\n  P.mr = new Float32Array(cap);\n  P.dt_ = new Float32Array(cap);\n  P.dp = new Int32Array(cap);\n  P.da = new Int32Array(cap);\n  P.db = new Int32Array(cap);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 16, bubble: 0.06, scroll: 0, hl: -1, hlT: 0, hlA: 0,\n    buf: new Float32Array(W * H * 3),\n  };\n  rebuild(params.s);\n}\n\nfunction getNet(P, m) {\n  let net = P.nets.get(m);\n  if (!net) {\n    net = { m, tu: hookWalk(P.n), sw: new Int32Array((P.n * (P.n - 1)) / 2), b: -1 };\n    P.nets.set(m, net);\n  }\n  if (net.b !== P.bubble) network(P, net);\n  return net;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  const n = cl(Math.round(k[2]), 16, 32);\n  if (n !== P.n) (P.n = n), rebuild(P), (P.hl = -1), (P.hlT = 0);\n  // Bubble moves in steps of 1/200 so a knob resting between two readings\n  // does not rebuild the networks every frame.\n  P.bubble = Math.round(cl(k[3], 0, 1) * 200) / 200;\n  if (input.btnPressed && input.btnPressed[0]) {\n    let w = floor(Math.random() * (P.hl \u003c 0 ? P.n : P.n - 1));\n    if (P.hl >= 0 && w >= P.hl) w++;\n    P.hl = w;\n    P.hlT = 8;\n  }\n  P.hlT = max(0, P.hlT - d);\n  P.hlA += ((P.hlT > 0 ? 1 : 0) - P.hlA) * min(1, d * 5);\n  P.scroll += d * P.speed * 4;\n  const first = floor(P.scroll / NET) - 1;\n  for (const m of P.nets.keys()) if (m \u003c first) P.nets.delete(m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, N = (n * (n - 1)) / 2, buf = P.buf, sp = W / n;\n  if (P.colHue !== P.hue) {\n    // Gold through green, cyan and blue to violet: the thread that starts on\n    // the left is gold at Hue 0, the one on the right violet, never red.\n    for (let v = 0; v \u003c n; v++) hsv(P.hue + 0.14 + (0.64 * v) / (n - 1), 0.82, 1, P.cols, v * 3);\n    P.colHue = P.hue;\n  }\n  buf.fill(0);\n  // Every move in sight, in time order. Row y holds network time scroll + y;\n  // network m fills times 128 m to 128 (m + 1) and starts from the identity\n  // when m is even, from the reversal when m is odd, so threads run on from\n  // one network into the next and nothing has to be carried between them.\n  const T0 = P.scroll - HMAX - 1, T1 = P.scroll + H + HMAX + 1;\n  const cnt = new Int32Array(n), mt = P.mt, md = P.md, mw = P.mw, mh = P.mh, mr = P.mr;\n  // Moves are grouped by thread: thread w owns slots w * per .. w * per + per.\n  const per = floor(mt.length / n);\n  let nd = 0;\n  for (let m = floor(T0 / NET); m \u003c= floor(T1 / NET); m++) {\n    const net = getNet(P, m), st = new Int32Array(n);\n    for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n    for (let s = 0; s \u003c N; s++) {\n      const t = m * NET + ((s + 0.5) * NET) / N, p = net.sw[s], a = st[p], b = st[p + 1];\n      st[p] = b;\n      st[p + 1] = a;\n      if (t \u003c T0 || t > T1) continue;\n      if (cnt[a] >= per || cnt[b] >= per) continue;\n      const ia = a * per + cnt[a]++, ib = b * per + cnt[b]++;\n      (mt[ia] = t), (md[ia] = 1), (mw[ia] = p);\n      (mt[ib] = t), (md[ib] = -1), (mw[ib] = p + 1);\n      P.dt_[nd] = t;\n      P.dp[nd] = p;\n      P.da[nd] = a;\n      P.db[nd] = b;\n      nd++;\n    }\n  }\n  // A thread leaves the middle of its place halfway between its swaps,\n  // meets its partner on the boundary at the swap and settles in the middle\n  // of the next place halfway to its swap after, never taking more than\n  // HMAX rows a side. Each thread keeps its own timing, so it is always\n  // under way and still crosses its partner at the dot: both are on the\n  // boundary at the swap time.\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    for (let i = 0; i \u003c cnt[w]; i++) {\n      mh[o + i] = i > 0 ? min(HMAX, (mt[o + i] - mt[o + i - 1]) / 2) : HMAX;\n      mr[o + i] = i + 1 \u003c cnt[w] ? min(HMAX, (mt[o + i + 1] - mt[o + i]) / 2) : HMAX;\n    }\n  }\n  const hlA = P.hlA, cols = P.cols;\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    // Place of thread w at the top of the window: where its first move in\n    // sight starts from, or, with no move in sight, where it sits.\n    let i = 0;\n    let base = cnt[w] > 0 ? mw[o] - md[o] : placeAt(P, w, T0);\n    const lead = P.lead[w], lit = w === P.hl ? 1 : 1 - 0.75 * hlA;\n    const gain = ((lead ? 0.85 : 0.4) + (w === P.hl ? (1 - (lead ? 0.85 : 0.4)) * hlA : 0)) * lit;\n    const cr = cols[w * 3] * gain, cg = cols[w * 3 + 1] * gain, cb = cols[w * 3 + 2] * gain;\n    // A quarter cosine into the boundary and a quarter sine out of it.\n    const xAt = (t) => {\n      while (i \u003c cnt[w] && t >= mt[o + i] + mr[o + i]) (base += md[o + i]), i++;\n      let pos = base;\n      if (i \u003c cnt[w]) {\n        const u = t - mt[o + i];\n        if (u >= 0) pos += md[o + i] * (0.5 + 0.5 * sin((u / mr[o + i]) * HALF_PI));\n        else if (u > -mh[o + i]) pos += md[o + i] * 0.5 * (1 - cos(((u + mh[o + i]) / mh[o + i]) * HALF_PI));\n      }\n      return (pos + 0.5) * sp;\n    };\n    for (let y = 0; y \u003c H; y++) {\n      const t = P.scroll + y, xa = xAt(t), xm = xAt(t + 0.5), xb = xAt(t + 1);\n      const lo = min(xa, xm, xb), hi = max(xa, xm, xb);\n      const c0 = max(0, floor(lo - 1)), c1 = min(W - 1, ceil(hi + 1));\n      for (let c = c0; c \u003c= c1; c++) {\n        const cx = c + 0.5, dist = cx \u003c lo ? lo - cx : cx > hi ? cx - hi : 0;\n        const a = cl((1 - dist) * 1.6, 0, 1);\n        if (a \u003c= 0) continue;\n        const q = (y * W + c) * 3;\n        buf[q] += cr * a;\n        buf[q + 1] += cg * a;\n        buf[q + 2] += cb * a;\n      }\n    }\n  }\n  // The swaps: a pale dot where the two threads meet, half white and half\n  // the mix of the pair. Their density across the panel is the semicircle.\n  for (let j = 0; j \u003c nd; j++) {\n    const yc = P.dt_[j] - P.scroll, xc = (P.dp[j] + 1) * sp;\n    if (yc \u003c -2 || yc > H + 2) continue;\n    const a = P.da[j], b = P.db[j];\n    const dim = hlA > 0 && a !== P.hl && b !== P.hl ? 1 - 0.6 * hlA : 1;\n    const r = (0.55 + 0.25 * (cols[a * 3] + cols[b * 3])) * dim;\n    const g = (0.55 + 0.25 * (cols[a * 3 + 1] + cols[b * 3 + 1])) * dim;\n    const bl = (0.55 + 0.25 * (cols[a * 3 + 2] + cols[b * 3 + 2])) * dim;\n    for (let y = floor(yc - 1.5); y \u003c= ceil(yc + 1.5); y++) {\n      if (y \u003c 0 || y >= H) continue;\n      for (let x = floor(xc - 1.5); x \u003c= ceil(xc + 1.5); x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const dx = x + 0.5 - xc, dy = y + 0.5 - yc, f = cl(1.15 - (dx * dx + dy * dy) * 0.55, 0, 1);\n        if (f \u003c= 0) continue;\n        const q = (y * W + x) * 3;\n        buf[q] = max(buf[q], r * f);\n        buf[q + 1] = max(buf[q + 1], g * f);\n        buf[q + 2] = max(buf[q + 2], bl * f);\n      }\n    }\n  }\n  for (let p = 0, q = 0; p \u003c W * H; p++, q += 3) {\n    const x = p % W, y = (p / W) | 0;\n    display.setPixel(x, y, min(255, buf[q] * 255), min(255, buf[q + 1] * 255), min(255, buf[q + 2] * 255));\n  }\n}\n\n// Where thread w sits at time t, by playing its network from the start.\nfunction placeAt(P, w, t) {\n  const n = P.n, N = (n * (n - 1)) / 2, m = floor(t / NET), net = getNet(P, m);\n  let pos = m & 1 ? n - 1 - w : w;\n  const st = new Int32Array(n);\n  for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n  for (let s = 0; s \u003c N; s++) {\n    if (m * NET + ((s + 0.5) * NET) / N > t) break;\n    const p = net.sw[s], a = st[p];\n    st[p] = st[p + 1];\n    st[p + 1] = a;\n    if (st[p] === w) pos = p;\n    else if (st[p + 1] === w) pos = p + 1;\n  }\n  return pos;\n}\n","layer":{"id":"layer-sorting-network","type":"code","name":"sorting-network","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sorting Network\n// Family:  line\n// Idea:    Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: uniform random sorting networks (Omer Angel, Alexander Holroyd, Dan Romik, Bálint Virág, 2007), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1\n//\n// Knob 1: Hue. Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right.\n// Knob 2: Speed. Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds.\n// Knob 3: Wires. How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row.\n// Knob 4: Bubble. Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns.\n// Buttons: K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.\n\nconst W = 64, H = 128, NET = 128;\nconst HMAX = 12, HALF_PI = Math.PI / 2;\nconst { min, max, floor, ceil, sin, cos } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A uniformly random standard Young tableau of the staircase (n-1, ..., 1),\n// by the hook walk of Greene, Nijenhuis and Wilf (1979): start on a uniform\n// cell, jump to a uniform other cell of its hook until the walk stands on a\n// corner, write the largest number not yet used there, take the corner off.\n// T[r * (n-1) + c], 0-indexed, rows of n-1-r cells.\nfunction hookWalk(n) {\n  const R = n - 1, len = new Int32Array(R), T = new Int32Array(R * R);\n  for (let r = 0; r \u003c R; r++) len[r] = R - r;\n  let cells = (n * (n - 1)) / 2;\n  for (let val = cells; val >= 1; val--, cells--) {\n    let k = floor(Math.random() * cells), r = 0;\n    while (k >= len[r]) (k -= len[r]), r++;\n    let c = k;\n    for (;;) {\n      const arm = len[r] - 1 - c;\n      let leg = 0;\n      while (r + leg + 1 \u003c R && len[r + leg + 1] > c) leg++;\n      if (arm + leg === 0) break;\n      const h = floor(Math.random() * (arm + leg));\n      if (h \u003c arm) c += 1 + h;\n      else r += 1 + h - arm;\n    }\n    T[r * R + c] = val;\n    len[r]--;\n  }\n  return T;\n}\n\n// The tableau read row by row, 1 to N: under Edelman-Greene it is the\n// bubble-sort network run backwards in time, 1 | 2 1 | 3 2 1 | ..., where\n// the thread in place k walks left past all k threads before it in one\n// straight diagonal. Read column by column it is the mirror image.\nfunction readTableau(n, byRow) {\n  const R = n - 1, T = new Int32Array(R * R);\n  let v = 1;\n  for (let a = 0; a \u003c R; a++) for (let b = 0; b \u003c R - a; b++) T[byRow ? a * R + b : b * R + a] = v++;\n  return T;\n}\n\n// Edelman-Greene (1987), as Angel, Holroyd, Romik and Virag lay it out:\n// N times over, the largest entry N sits in a corner (i, j) with i + j = n,\n// 1-indexed; swap places j and j + 1; empty that cell and slide the hole to\n// (1, 1), each time moving in the larger of the neighbours above and to the\n// left; add 1 to every entry and write 1 in (1, 1). Adding 1 to everything\n// is kept as one offset, so a network costs N * n steps, not N * N. Checked\n// in a scratch script over 1400 networks with n from 3 to 32: every swap\n// takes a pair still in order and each network ends reversed; at n = 4 all\n// 16 reduced words of the longest permutation came out equally often.\nfunction edelmanGreene(T0, n, out) {\n  const R = n - 1, N = (n * (n - 1)) / 2, t = Int32Array.from(T0);\n  let off = 0;\n  for (let s = 0; s \u003c N; s++) {\n    let r = 0;\n    while (r \u003c R && t[r * R + R - 1 - r] + off !== N) r++;\n    let c = R - 1 - r;\n    out[s] = c;\n    for (;;) {\n      const up = r > 0 ? t[(r - 1) * R + c] : -1e9, lf = c > 0 ? t[r * R + c - 1] : -1e9;\n      if (r === 0 && c === 0) break;\n      if (up > lf) (t[r * R + c] = up), r--;\n      else (t[r * R + c] = lf), c--;\n    }\n    off++;\n    t[0] = 1 - off;\n  }\n}\n\n// Each cell gets (1 - b) * uniform + b * bubble. Both tableaux grow along\n// rows and down columns, so their blend does too, and ranking the cells by\n// it is a standard tableau again: a sorting network for every b.\nfunction network(P, net) {\n  const n = P.n, R = n - 1, N = (n * (n - 1)) / 2, b = P.bubble;\n  const Tb = (net.m & 1) === 0 ? P.tabRow : P.tabCol;\n  let T = net.tu;\n  if (b > 0) {\n    const key = new Float64Array(R * R), ids = [];\n    for (let r = 0; r \u003c R; r++) for (let c = 0; c \u003c R - r; c++) {\n      const i = r * R + c;\n      key[i] = (1 - b) * net.tu[i] + b * Tb[i];\n      ids.push(i);\n    }\n    ids.sort((x, y) => key[x] - key[y] || x - y);\n    T = new Int32Array(R * R);\n    for (let k = 0; k \u003c N; k++) T[ids[k]] = k + 1;\n  }\n  edelmanGreene(T, n, net.sw);\n  // The cheap form of the check, once a network: every swap must take a\n  // pair still in its starting order, and the end must be the reversal.\n  // A miss falls back on bubble sort, which is always right.\n  const a = Int32Array.from({ length: n }, (_, i) => i);\n  let ok = true;\n  for (let s = 0; s \u003c N && ok; s++) {\n    const p = net.sw[s], x = a[p];\n    if (x > a[p + 1]) ok = false;\n    (a[p] = a[p + 1]), (a[p + 1] = x);\n  }\n  for (let i = 0; i \u003c n && ok; i++) if (a[i] !== n - 1 - i) ok = false;\n  if (!ok) edelmanGreene(Tb, n, net.sw);\n  net.b = b;\n}\n\nfunction rebuild(P) {\n  const n = P.n;\n  P.tabRow = readTableau(n, true);\n  P.tabCol = readTableau(n, false);\n  P.nets = new Map();\n  P.cols = new Float32Array(n * 3);\n  // Four threads are drawn bright, both edges and two between, 0, 5, 10\n  // and 15 of sixteen: the edges swing all the way across on half a cosine,\n  // the two inside on arcs whose height the network picks.\n  P.lead = new Uint8Array(n);\n  for (let k = 0; k \u003c 4; k++) P.lead[Math.round((k * (n - 1)) / 3)] = 1;\n  P.colHue = NaN;\n  const cap = 4 * ((n * (n - 1)) / 2) + 8;\n  P.mt = new Float32Array(cap);\n  P.md = new Int8Array(cap);\n  P.mw = new Int32Array(cap);\n  P.mh = new Float32Array(cap);\n  P.mr = new Float32Array(cap);\n  P.dt_ = new Float32Array(cap);\n  P.dp = new Int32Array(cap);\n  P.da = new Int32Array(cap);\n  P.db = new Int32Array(cap);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 16, bubble: 0.06, scroll: 0, hl: -1, hlT: 0, hlA: 0,\n    buf: new Float32Array(W * H * 3),\n  };\n  rebuild(params.s);\n}\n\nfunction getNet(P, m) {\n  let net = P.nets.get(m);\n  if (!net) {\n    net = { m, tu: hookWalk(P.n), sw: new Int32Array((P.n * (P.n - 1)) / 2), b: -1 };\n    P.nets.set(m, net);\n  }\n  if (net.b !== P.bubble) network(P, net);\n  return net;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  const n = cl(Math.round(k[2]), 16, 32);\n  if (n !== P.n) (P.n = n), rebuild(P), (P.hl = -1), (P.hlT = 0);\n  // Bubble moves in steps of 1/200 so a knob resting between two readings\n  // does not rebuild the networks every frame.\n  P.bubble = Math.round(cl(k[3], 0, 1) * 200) / 200;\n  if (input.btnPressed && input.btnPressed[0]) {\n    let w = floor(Math.random() * (P.hl \u003c 0 ? P.n : P.n - 1));\n    if (P.hl >= 0 && w >= P.hl) w++;\n    P.hl = w;\n    P.hlT = 8;\n  }\n  P.hlT = max(0, P.hlT - d);\n  P.hlA += ((P.hlT > 0 ? 1 : 0) - P.hlA) * min(1, d * 5);\n  P.scroll += d * P.speed * 4;\n  const first = floor(P.scroll / NET) - 1;\n  for (const m of P.nets.keys()) if (m \u003c first) P.nets.delete(m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, N = (n * (n - 1)) / 2, buf = P.buf, sp = W / n;\n  if (P.colHue !== P.hue) {\n    // Gold through green, cyan and blue to violet: the thread that starts on\n    // the left is gold at Hue 0, the one on the right violet, never red.\n    for (let v = 0; v \u003c n; v++) hsv(P.hue + 0.14 + (0.64 * v) / (n - 1), 0.82, 1, P.cols, v * 3);\n    P.colHue = P.hue;\n  }\n  buf.fill(0);\n  // Every move in sight, in time order. Row y holds network time scroll + y;\n  // network m fills times 128 m to 128 (m + 1) and starts from the identity\n  // when m is even, from the reversal when m is odd, so threads run on from\n  // one network into the next and nothing has to be carried between them.\n  const T0 = P.scroll - HMAX - 1, T1 = P.scroll + H + HMAX + 1;\n  const cnt = new Int32Array(n), mt = P.mt, md = P.md, mw = P.mw, mh = P.mh, mr = P.mr;\n  // Moves are grouped by thread: thread w owns slots w * per .. w * per + per.\n  const per = floor(mt.length / n);\n  let nd = 0;\n  for (let m = floor(T0 / NET); m \u003c= floor(T1 / NET); m++) {\n    const net = getNet(P, m), st = new Int32Array(n);\n    for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n    for (let s = 0; s \u003c N; s++) {\n      const t = m * NET + ((s + 0.5) * NET) / N, p = net.sw[s], a = st[p], b = st[p + 1];\n      st[p] = b;\n      st[p + 1] = a;\n      if (t \u003c T0 || t > T1) continue;\n      if (cnt[a] >= per || cnt[b] >= per) continue;\n      const ia = a * per + cnt[a]++, ib = b * per + cnt[b]++;\n      (mt[ia] = t), (md[ia] = 1), (mw[ia] = p);\n      (mt[ib] = t), (md[ib] = -1), (mw[ib] = p + 1);\n      P.dt_[nd] = t;\n      P.dp[nd] = p;\n      P.da[nd] = a;\n      P.db[nd] = b;\n      nd++;\n    }\n  }\n  // A thread leaves the middle of its place halfway between its swaps,\n  // meets its partner on the boundary at the swap and settles in the middle\n  // of the next place halfway to its swap after, never taking more than\n  // HMAX rows a side. Each thread keeps its own timing, so it is always\n  // under way and still crosses its partner at the dot: both are on the\n  // boundary at the swap time.\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    for (let i = 0; i \u003c cnt[w]; i++) {\n      mh[o + i] = i > 0 ? min(HMAX, (mt[o + i] - mt[o + i - 1]) / 2) : HMAX;\n      mr[o + i] = i + 1 \u003c cnt[w] ? min(HMAX, (mt[o + i + 1] - mt[o + i]) / 2) : HMAX;\n    }\n  }\n  const hlA = P.hlA, cols = P.cols;\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    // Place of thread w at the top of the window: where its first move in\n    // sight starts from, or, with no move in sight, where it sits.\n    let i = 0;\n    let base = cnt[w] > 0 ? mw[o] - md[o] : placeAt(P, w, T0);\n    const lead = P.lead[w], lit = w === P.hl ? 1 : 1 - 0.75 * hlA;\n    const gain = ((lead ? 0.85 : 0.4) + (w === P.hl ? (1 - (lead ? 0.85 : 0.4)) * hlA : 0)) * lit;\n    const cr = cols[w * 3] * gain, cg = cols[w * 3 + 1] * gain, cb = cols[w * 3 + 2] * gain;\n    // A quarter cosine into the boundary and a quarter sine out of it.\n    const xAt = (t) => {\n      while (i \u003c cnt[w] && t >= mt[o + i] + mr[o + i]) (base += md[o + i]), i++;\n      let pos = base;\n      if (i \u003c cnt[w]) {\n        const u = t - mt[o + i];\n        if (u >= 0) pos += md[o + i] * (0.5 + 0.5 * sin((u / mr[o + i]) * HALF_PI));\n        else if (u > -mh[o + i]) pos += md[o + i] * 0.5 * (1 - cos(((u + mh[o + i]) / mh[o + i]) * HALF_PI));\n      }\n      return (pos + 0.5) * sp;\n    };\n    for (let y = 0; y \u003c H; y++) {\n      const t = P.scroll + y, xa = xAt(t), xm = xAt(t + 0.5), xb = xAt(t + 1);\n      const lo = min(xa, xm, xb), hi = max(xa, xm, xb);\n      const c0 = max(0, floor(lo - 1)), c1 = min(W - 1, ceil(hi + 1));\n      for (let c = c0; c \u003c= c1; c++) {\n        const cx = c + 0.5, dist = cx \u003c lo ? lo - cx : cx > hi ? cx - hi : 0;\n        const a = cl((1 - dist) * 1.6, 0, 1);\n        if (a \u003c= 0) continue;\n        const q = (y * W + c) * 3;\n        buf[q] += cr * a;\n        buf[q + 1] += cg * a;\n        buf[q + 2] += cb * a;\n      }\n    }\n  }\n  // The swaps: a pale dot where the two threads meet, half white and half\n  // the mix of the pair. Their density across the panel is the semicircle.\n  for (let j = 0; j \u003c nd; j++) {\n    const yc = P.dt_[j] - P.scroll, xc = (P.dp[j] + 1) * sp;\n    if (yc \u003c -2 || yc > H + 2) continue;\n    const a = P.da[j], b = P.db[j];\n    const dim = hlA > 0 && a !== P.hl && b !== P.hl ? 1 - 0.6 * hlA : 1;\n    const r = (0.55 + 0.25 * (cols[a * 3] + cols[b * 3])) * dim;\n    const g = (0.55 + 0.25 * (cols[a * 3 + 1] + cols[b * 3 + 1])) * dim;\n    const bl = (0.55 + 0.25 * (cols[a * 3 + 2] + cols[b * 3 + 2])) * dim;\n    for (let y = floor(yc - 1.5); y \u003c= ceil(yc + 1.5); y++) {\n      if (y \u003c 0 || y >= H) continue;\n      for (let x = floor(xc - 1.5); x \u003c= ceil(xc + 1.5); x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const dx = x + 0.5 - xc, dy = y + 0.5 - yc, f = cl(1.15 - (dx * dx + dy * dy) * 0.55, 0, 1);\n        if (f \u003c= 0) continue;\n        const q = (y * W + x) * 3;\n        buf[q] = max(buf[q], r * f);\n        buf[q + 1] = max(buf[q + 1], g * f);\n        buf[q + 2] = max(buf[q + 2], bl * f);\n      }\n    }\n  }\n  for (let p = 0, q = 0; p \u003c W * H; p++, q += 3) {\n    const x = p % W, y = (p / W) | 0;\n    display.setPixel(x, y, min(255, buf[q] * 255), min(255, buf[q + 1] * 255), min(255, buf[q + 2] * 255));\n  }\n}\n\n// Where thread w sits at time t, by playing its network from the start.\nfunction placeAt(P, w, t) {\n  const n = P.n, N = (n * (n - 1)) / 2, m = floor(t / NET), net = getNet(P, m);\n  let pos = m & 1 ? n - 1 - w : w;\n  const st = new Int32Array(n);\n  for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n  for (let s = 0; s \u003c N; s++) {\n    if (m * NET + ((s + 0.5) * NET) / N > t) break;\n    const p = net.sw[s], a = st[p];\n    st[p] = st[p + 1];\n    st[p + 1] = a;\n    if (st[p] === w) pos = p;\n    else if (st[p + 1] === w) pos = p + 1;\n  }\n  return pos;\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right."},{"name":"Speed","min":0.2,"max":3,"about":"Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds."},{"name":"Wires","min":16,"max":32,"about":"How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row."},{"name":"Bubble","min":0,"max":1,"about":"Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns."}],"start":[0,2,16,0.06],"measures":{"motion":1.187,"detail":0.1748,"edges":0.7005,"complexity":1.5147,"coverage":0.5118,"colour":0.2962,"drift":0.1325},"knobResponse":[0.1544,0.2402,0.3244,0.2291]},{"slug":"sparks","title":"Sparks","family":"particle","round":1,"note":"불꽃마다 흰빛에서 식어 가는 색이 제 나이를 보여 줘요. 꽃불 세 가지가 느슨한 박자로 터져요.","idea":"Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.","buttons":"K1 tap fires a shell straight away.","code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-sparks","type":"code","name":"sparks","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":1,"about":"At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour."},{"name":"Rate","min":0.6,"max":5,"about":"How often a rocket goes up; the beat stays loose, with doubles and the odd rest."},{"name":"Gravity","min":-1,"max":1,"about":"At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers."},{"name":"Trail","min":0.3,"max":1.8,"about":"Seconds a spark's streak takes to fade."}],"start":[0,2,0,0.3],"measures":{"motion":0.3313,"detail":0.0372,"edges":0.402,"complexity":0.7208,"coverage":0.1596,"colour":0.1435,"drift":0.1348},"knobResponse":[0.034,0.0885,0.063,0.0577]},{"slug":"spectrogram","title":"Spectrogram","family":"data","round":17,"note":"새벽 합창의 스펙트로그램이 폭포처럼 내려와요. 휘파람과 떨림, 짹 소리와 뻐꾸기의 두 음이 바람과 먼 찻길로 얼룩진 바닥 위에 밝게 그려지고, K3 을 누르면 손뼉 소리에 새들이 잠시 입을 다물어요.","idea":"A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.","buttons":"K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.","code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-spectrogram","type":"code","name":"spectrogram","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Map","min":0,"max":1,"about":"The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph."},{"name":"Scroll","min":0.5,"max":4,"about":"How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall."},{"name":"Birds","min":0,"max":1,"about":"How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all."},{"name":"Gain","min":-1,"max":1,"about":"Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel."}],"start":[0,2,0,0.06],"measures":{"motion":2.9689,"detail":0.133,"edges":0.3961,"complexity":2.4228,"coverage":0.9799,"colour":0.4061,"drift":0.0801},"knobResponse":[0.3109,0.1622,0.1596,0.4388]},{"slug":"sperner-lemma","title":"Sperner's Lemma","family":"topology","round":38,"note":"세운 삼각형을 작은 방으로 나누고, 꼭짓점마다 연속 사상이 가장 많이 줄이는 좌표의 번호를 붙여 파랑, 빨강, 초록 영토로 칠해요. 흰 걸음이 밑변의 1-2 문으로 들어와 방마다 다른 문으로 나가다가 세 번호를 다 가진 무지개 방에서 멈추고, 그 방은 사상의 고정점 위에 있어요. K3 은 사상을 고정점 둘레로 비틀어 영토 경계를 감고, K4 는 고정점을 늘려 무지개 방을 홀수 개로 늘려요.","idea":"A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Sperner's Lemma\n// Family:  topology\n// Idea:    A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Sperner's lemma (Emanuel Sperner, 1928) and the Brouwer fixed-point theorem it proves (L. E. J. Brouwer, 1911), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1\n//\n// Knob 1: Mesh. Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves.\n// Knob 2: Speed. At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Swirl. Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in.\n// Knob 4: Ripple. Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two.\n\nconst W = 64, H = 128, NMAX = 28, ST = NMAX + 1;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, hypot, PI } = Math;\nconst TAU = 2 * PI, R3 = sqrt(3);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The big triangle on the panel, pixel centres at x + 0.5: corner 1 bottom\n// left, corner 2 bottom right, corner 3 the apex. The base is the 1-2 side.\nconst P1x = 0.5, P1y = 127.2, P2x = 63.5, P2y = 127.2, P3x = 32, P3y = 0.8;\nconst E2x = P2x - P1x, E2y = P2y - P1y, E3x = P3x - P1x, E3y = P3y - P1y, DET = E2x * E3y - E3x * E2y;\n// Length of the gradient of each barycentric coordinate, in units per LED:\n// the distance from a pixel to a mesh line is its offset over this.\nconst G2 = hypot(E3y, E3x) / abs(DET), G3 = hypot(E2y, E2x) / abs(DET);\nconst G1 = hypot(E3y - E2y, E2x - E3x) / abs(DET);\n\n// The map f is defined on an equilateral triangle, corners E1 = (-1, 0),\n// E2 = (1, 0), E3 = (0, sqrt 3): f(q) = q + d(q), pulled back into the\n// triangle by the nearest point, so f is continuous and maps the triangle\n// into itself. d turns round the fixed point c by an angle that grows by\n// SWIRL radians per unit of distance at Swirl 1, and is STEP long from R0\n// out, shrinking to nothing at c.\nconst STEP = 0.12, R0 = 0.35, SWIRL = 3.4;\n// Radius of the glow round the head of the walk, in LEDs.\nconst GLOW = 7;\n// The ripple: two waves added to d, up to RIP times STEP.\nconst RIP = 3.5;\n\n// Label colours: 1 azure, 2 rose, 3 green. Each at its own brightness\n// (brightest channel 0.85, 0.62 and 0.4 of full), so a room that changes\n// label changes in brightness too and not only in hue; green at 0.4 still\n// looks about as bright to the eye as azure at 0.85.\nconst COL = [\n  [0.12 * 0.85, 0.42 * 0.85, 0.85],\n  [0.62, 0.18 * 0.62, 0.3 * 0.62],\n  [0.2 * 0.4 / 0.95, 0.4, 0.28 * 0.4 / 0.95],\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 0, speed: 2, swirl: 0, ripple: 0, t: 0, head: 0, begun: false,\n    lab: new Int8Array(ST * ST), cx: 0, cy: 0, turn: 0,\n    walks: [], main: null, rainbow: [], seen: new Uint8Array(2 * NMAX * NMAX),\n    line: new Float32Array(W * H), room: new Int32Array(W * H), R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    y: [0, 0, 0], hc: [0, 0, 0],\n  };\n}\n\n// Vertex (b, c) of an n-mesh has barycentric coordinates (n - b - c, b, c) / n.\nconst vid = (b, c) => c * ST + b;\n\n// Rooms: up room (i, j) has corners (i, j), (i + 1, j), (i, j + 1); down room\n// (i, j) has corners (i + 1, j), (i, j + 1), (i + 1, j + 1).\nconst rid = (i, j, down) => 2 * (j * NMAX + i) + down;\nfunction corners(r) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  return down ? [vid(i + 1, j), vid(i, j + 1), vid(i + 1, j + 1)] : [vid(i, j), vid(i + 1, j), vid(i, j + 1)];\n}\n// The three walls of a room, each as its two corners and the room behind it\n// (-1 for the base, -2 for the other two sides).\nfunction walls(r, n) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  if (down)\n    return [\n      [vid(i + 1, j), vid(i, j + 1), rid(i, j, 0)],\n      [vid(i, j + 1), vid(i + 1, j + 1), rid(i, j + 1, 0)],\n      [vid(i + 1, j), vid(i + 1, j + 1), rid(i + 1, j, 0)],\n    ];\n  return [\n    [vid(i, j), vid(i + 1, j), j > 0 ? rid(i, j - 1, 1) : -1],\n    [vid(i, j), vid(i, j + 1), i > 0 ? rid(i - 1, j, 1) : -2],\n    [vid(i + 1, j), vid(i, j + 1), i + j \u003c n - 1 ? rid(i, j, 1) : -2],\n  ];\n}\n\n// The map at barycentric x, written into y as barycentric coordinates.\n// Near the sides the turn and the ripple fade out (over the band where the\n// smallest coordinate is under EDGE), so there d points at c and q + d stays\n// inside: f has no fixed point on the sides, only where d is zero inside.\nconst EDGE = 0.16;\nfunction f(S, x1, x2, x3, y) {\n  const mb = min(x1, x2, x3), qx = x2 - x1, qy = R3 * x3, inner = sm(0, EDGE, mb);\n  const dx = S.cx - qx, dy = S.cy - qy, r = hypot(dx, dy);\n  let gx = 0, gy = 0;\n  if (r > 1e-12) {\n    const psi = (S.turn + S.swirl * SWIRL * r) * inner, m = (STEP * min(r, R0)) / R0 / r, cs = cos(psi), sn = sin(psi);\n    gx = (dx * cs - dy * sn) * m;\n    gy = (dx * sn + dy * cs) * m;\n  }\n  if (S.ripple > 0) {\n    const a = S.ripple ** 0.6 * RIP * STEP * sm(0, EDGE / 2, mb), ph = S.t * 0.21;\n    gx += a * sin(5.3 * qx + 3.1 * qy + ph);\n    gy += a * sin(-4.4 * qx + 4.9 * qy + 1.9 - 0.8 * ph);\n  }\n  let px = qx + gx, py = qy + gy;\n  // Back into the triangle by the nearest point.\n  let z3 = py / R3, z2 = (1 - z3 + px) / 2, z1 = (1 - z3 - px) / 2;\n  if (z1 \u003c 0 || z2 \u003c 0 || z3 \u003c 0) {\n    let best = Infinity, bx = 0, by = 0;\n    const E = [-1, 0, 1, 0, 0, R3];\n    for (let e = 0; e \u003c 3; e++) {\n      const ax = E[2 * e], ay = E[2 * e + 1], ex = E[(2 * e + 2) % 6] - ax, ey = E[(2 * e + 3) % 6] - ay;\n      const t = cl(((px - ax) * ex + (py - ay) * ey) / (ex * ex + ey * ey), 0, 1), sx = ax + t * ex, sy = ay + t * ey;\n      const d2 = (px - sx) ** 2 + (py - sy) ** 2;\n      if (d2 \u003c best) {\n        best = d2;\n        bx = sx;\n        by = sy;\n      }\n    }\n    px = bx;\n    py = by;\n    z3 = max(0, py / R3);\n    z2 = max(0, (1 - z3 + px) / 2);\n    z1 = max(0, 1 - z2 - z3);\n  }\n  y[0] = z1;\n  y[1] = z2;\n  y[2] = z3;\n}\n\n// Label every vertex: of the coordinates that are not zero, the one f takes\n// down the most. Such a one always exists because both sum to 1, and a\n// coordinate that is zero is never chosen, so each corner gets its own label\n// and each side only its two corners' labels: a Sperner labelling.\nfunction label(S) {\n  const n = S.n, y = S.y;\n  for (let c = 0; c \u003c= n; c++)\n    for (let b = 0; b + c \u003c= n; b++) {\n      const a = n - b - c, x = [a / n, b / n, c / n];\n      f(S, x[0], x[1], x[2], y);\n      let best = -Infinity, L = 0;\n      for (let i = 0; i \u003c 3; i++)\n        if (x[i] > 0 && x[i] - y[i] > best + 1e-12) {\n          best = x[i] - y[i];\n          L = i;\n        }\n      S.lab[vid(b, c)] = L;\n    }\n}\n\nconst isDoor = (S, va, vb) => S.lab[va] + S.lab[vb] === 1;\nfunction rainbow(S, r) {\n  const [a, b, c] = corners(r), L = S.lab;\n  return L[a] !== L[b] && L[b] !== L[c] && L[a] !== L[c];\n}\n\n// Walk from room r, having come in through the wall behind which lies\n// `from`: leave by the other door each time. Ends in a rainbow room (end =\n// room) or out through a door in the base (end = -1).\nfunction walk(S, r, from, pts) {\n  const n = S.n;\n  for (let guard = 0; guard \u003c 2 * n * n + 2; guard++) {\n    S.seen[r] = 1;\n    const cs = corners(r);\n    pts.push(centroid(n, cs));\n    if (rainbow(S, r)) return r;\n    const ws = walls(r, n);\n    let out = null;\n    for (const w of ws) if (isDoor(S, w[0], w[1]) && w[2] !== from) out = w;\n    if (!out) return r;\n    pts.push(mid(n, out[0], out[1]));\n    if (out[2] \u003c 0) return -1;\n    from = r;\n    r = out[2];\n  }\n  return -1;\n}\n\n// Panel position of vertex v of an n-mesh.\nfunction vpos(n, v) {\n  const b = v % ST, c = (v - b) / ST;\n  return [P1x + (E2x * b + E3x * c) / n, P1y + (E2y * b + E3y * c) / n];\n}\nfunction centroid(n, cs) {\n  const a = vpos(n, cs[0]), b = vpos(n, cs[1]), c = vpos(n, cs[2]);\n  return [(a[0] + b[0] + c[0]) / 3, (a[1] + b[1] + c[1]) / 3];\n}\nfunction mid(n, va, vb) {\n  const a = vpos(n, va), b = vpos(n, vb);\n  return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n}\n\n// All the door walks: from each door in the base, then from each rainbow\n// room no walk has reached yet. The main walk is the leftmost one from the\n// base that ends in a rainbow room; there is always one, because the base\n// holds an odd number of doors and walks from the base pair them up two by\n// two except where they end in a rainbow room.\nfunction walkAll(S) {\n  const n = S.n;\n  S.seen.fill(0);\n  S.walks = [];\n  S.main = null;\n  S.rainbow = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = rid(i, 0, 0);\n    if (S.seen[r] || !isDoor(S, vid(i, 0), vid(i + 1, 0))) continue;\n    const pts = [mid(n, vid(i, 0), vid(i + 1, 0))], end = walk(S, r, -1, pts);\n    const w = { pts, end, base: true };\n    S.walks.push(w);\n    if (end >= 0 && !S.main) S.main = w;\n  }\n  for (let j = 0; j \u003c n; j++)\n    for (let i = 0; i + j \u003c n; i++)\n      for (let down = 0; down \u003c 2; down++) {\n        if (down && i + j > n - 2) continue;\n        const r = rid(i, j, down);\n        if (!rainbow(S, r)) continue;\n        S.rainbow.push(r);\n        if (S.seen[r]) continue;\n        // Its one door, and on from the room behind it.\n        S.seen[r] = 1;\n        const pts = [centroid(n, corners(r))];\n        let end = r;\n        for (const w of walls(r, n))\n          if (isDoor(S, w[0], w[1])) {\n            pts.push(mid(n, w[0], w[1]));\n            end = w[2] >= 0 ? walk(S, w[2], r, pts) : -1;\n          }\n        S.walks.push({ pts, end, base: false });\n      }\n}\n\nfunction lengthOf(pts) {\n  let L = 0;\n  for (let k = 1; k \u003c pts.length; k++) L += hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n  return L;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [12, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.n = round(cl(k[0], 12, NMAX));\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[2], 0, 1);\n  // Up to 0.06 no ripple, so the opening has one fixed point.\n  S.ripple = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  if (!S.begun) {\n    // Open some way into the run, further in the faster it goes, so Speed\n    // shows from the first second.\n    S.t = 4 * S.speed;\n    S.begun = true;\n  }\n  S.t += (d * S.speed) / 2;\n  S.head += d * S.speed * 18;\n  // The fixed point of the map without ripple wanders inside the triangle,\n  // its barycentric coordinates never under 0.12, round its loop in 14\n  // seconds at Speed 2.\n  const t = S.t, rr = 0.13 + 0.08 * sin(0.6 * t + 0.6), ph = 0.45 * t + 1.1;\n  const c1 = 1 / 3 + rr * cos(ph), c2 = 1 / 3 + rr * cos(ph - TAU / 3), c3 = 1 - c1 - c2;\n  S.cx = c2 - c1;\n  S.cy = R3 * c3;\n  // The push leans up to 60 degrees either side of straight at c, back and\n  // forth every 12.6 seconds at Speed 2.\n  S.turn = 1.05 * sin(0.5 * t);\n  label(S);\n  walkAll(S);\n}\n\n// Light the line buffer along a polyline, with brightness fn(s) at arc\n// length s.\nfunction stroke(S, pts, fn) {\n  const L = S.line;\n  let s = 0;\n  for (let k = 1; k \u003c pts.length; k++) {\n    const ax = pts[k - 1][0], ay = pts[k - 1][1], bx = pts[k][0], by = pts[k][1];\n    const ex = bx - ax, ey = by - ay, len = hypot(ex, ey);\n    if (len \u003c 1e-6) continue;\n    const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n    const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, u = cl((px * ex + py * ey) / (len * len), 0, 1);\n        const dd = hypot(px - u * ex, py - u * ey), a = cl(1.25 - dd, 0, 1);\n        if (a \u003c= 0) continue;\n        const v = a * fn(s + u * len), p = y * W + x;\n        if (v > L[p]) L[p] = v;\n      }\n    s += len;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  const { n, lab, R, G, B, line, hc, room } = S;\n  line.fill(0);\n  const isMainEnd = (r) => S.main && S.main.end === r;\n  const rb = new Set(S.rainbow);\n  // The territories, the mesh and the rainbow rooms.\n  const lw = 0.5 + 0.3 * (NMAX - n) / 16;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, X = x + 0.5 - P1x, Y = y + 0.5 - P1y;\n      const l2 = (X * E3y - Y * E3x) / DET, l3 = (E2x * Y - E2y * X) / DET, l1 = 1 - l2 - l3;\n      if (l1 \u003c -0.004 || l2 \u003c -0.004 || l3 \u003c -0.004) {\n        R[p] = G[p] = B[p] = 0;\n        room[p] = -1;\n        continue;\n      }\n      const u = cl(l2 * n, 0, n - 1e-6), v = cl(l3 * n, 0, n - 1e-6);\n      let i = floor(u), j = floor(v);\n      if (i + j > n - 1) j = n - 1 - i;\n      const fu = u - i, fv = v - j, down = fu + fv > 1 ? 1 : 0;\n      const r = rid(i, j, down), cs = corners(r);\n      const w = down ? [fu + fv - 1, 1 - fu, 1 - fv] : [1 - fu - fv, fu, fv];\n      // Each corner's share of the room: the part nearer it than the others,\n      // so every vertex sits in a cell of its own label's colour.\n      let m = 0;\n      if (w[1] > w[m]) m = 1;\n      if (w[2] > w[m]) m = 2;\n      const c = COL[lab[cs[m]]];\n      // Mesh lines: dark walls, about one LED wide.\n      const a1 = u - i, b1 = v - j, w1 = u + v - floor(u + v);\n      const dm = min(min(a1, 1 - a1) / (n * G2), min(b1, 1 - b1) / (n * G3), min(w1, 1 - w1) / (n * G1));\n      const wl = 1 - sm(0.2, 0.75, dm);\n      room[p] = r;\n      if (rb.has(r)) {\n        // A rainbow room: a spinning wheel of every hue inside white walls.\n        const ctr = centroid(n, cs), a = atan2(y + 0.5 - ctr[1], x + 0.5 - ctr[0]) / TAU;\n        hsv(a + S.t * 0.6, 0.85, 1, hc);\n        const k = isMainEnd(r) ? 0.9 : 0.6;\n        R[p] = 255 * (hc[0] + (k - hc[0]) * wl);\n        G[p] = 255 * (hc[1] + (k - hc[1]) * wl);\n        B[p] = 255 * (hc[2] + (k - hc[2]) * wl);\n        continue;\n      }\n      const wall = 1 - lw * wl;\n      R[p] = c[0] * wall * 255;\n      G[p] = c[1] * wall * 255;\n      B[p] = c[2] * wall * 255;\n    }\n  // The other walks dim; the main one brighter, with a head running from\n  // the base door into the rainbow room and a pause there before it runs again.\n  // Each walk is drawn from door to door and stops at the wall of a rainbow\n  // room, so the room's own colours stay clear.\n  const trim = (w) => w.pts.slice(w.base ? 0 : 1, w.end >= 0 ? w.pts.length - 1 : w.pts.length);\n  for (const w of S.walks) if (w !== S.main) stroke(S, trim(w), () => 0.42);\n  if (S.main) {\n    const pts = trim(S.main), L = lengthOf(pts), cyc = L + 30, hs = S.head % cyc;\n    stroke(S, pts, (s) => {\n      const back = hs - s;\n      return back \u003c 0 ? 0.62 : 0.62 + 0.38 * Math.exp(-back / 9);\n    });\n    // A soft glow rides with the head, GLOW LEDs round, so the run up the\n    // walk shows from across the room and not only on the thin line.\n    if (hs \u003c L) {\n      let s = 0, hx = pts[0][0], hy = pts[0][1];\n      for (let k = 1; k \u003c pts.length; k++) {\n        const ex = pts[k][0] - pts[k - 1][0], ey = pts[k][1] - pts[k - 1][1], len = hypot(ex, ey);\n        if (s + len >= hs) {\n          const u = len > 0 ? (hs - s) / len : 0;\n          hx = pts[k - 1][0] + u * ex;\n          hy = pts[k - 1][1] + u * ey;\n          break;\n        }\n        s += len;\n      }\n      for (let y = max(0, floor(hy - GLOW)); y \u003c= min(H - 1, floor(hy + GLOW)); y++)\n        for (let x = max(0, floor(hx - GLOW)); x \u003c= min(W - 1, floor(hx + GLOW)); x++) {\n          const dd = hypot(x + 0.5 - hx, y + 0.5 - hy) / GLOW, p = y * W + x;\n          if (dd >= 1 || room[p] \u003c 0 || rb.has(room[p])) continue;\n          const g = 0.7 * (1 - dd) * (1 - dd);\n          R[p] += (255 - R[p]) * g;\n          G[p] += (255 - G[p]) * g;\n          B[p] += (255 - B[p]) * g;\n        }\n    }\n    // A halo round the room the walk ends in, flaring as the head arrives.\n    const ctr = centroid(n, corners(S.main.end)), fl = hs > L ? Math.exp(-(hs - L) / 12) : 0;\n    const rad = 5 + 3 * fl + 60 / n, amp = 0.3 + 0.5 * fl;\n    for (let y = max(0, floor(ctr[1] - rad)); y \u003c= min(H - 1, floor(ctr[1] + rad)); y++)\n      for (let x = max(0, floor(ctr[0] - rad)); x \u003c= min(W - 1, floor(ctr[0] + rad)); x++) {\n        const dd = hypot(x + 0.5 - ctr[0], (y + 0.5 - ctr[1]) * 0.6) / rad;\n        if (dd >= 1) continue;\n        const g = amp * (1 - dd) * (1 - dd), p = y * W + x;\n        if (room[p] \u003c 0 || rb.has(room[p])) continue;\n        R[p] += (255 - R[p]) * g;\n        G[p] += (255 - G[p]) * g;\n        B[p] += (255 - B[p]) * g;\n      }\n  }\n  for (let p = 0; p \u003c W * H; p++) {\n    const a = line[p];\n    const r = R[p] * (1 - a) + 255 * a, g = G[p] * (1 - a) + 255 * a, b = B[p] * (1 - a) + 255 * a;\n    display.setPixel(p % W, (p / W) | 0, round(min(255, r)), round(min(255, g)), round(min(255, b)));\n  }\n}\n","layer":{"id":"layer-sperner-lemma","type":"code","name":"sperner-lemma","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sperner's Lemma\n// Family:  topology\n// Idea:    A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Sperner's lemma (Emanuel Sperner, 1928) and the Brouwer fixed-point theorem it proves (L. E. J. Brouwer, 1911), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1\n//\n// Knob 1: Mesh. Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves.\n// Knob 2: Speed. At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Swirl. Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in.\n// Knob 4: Ripple. Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two.\n\nconst W = 64, H = 128, NMAX = 28, ST = NMAX + 1;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, hypot, PI } = Math;\nconst TAU = 2 * PI, R3 = sqrt(3);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The big triangle on the panel, pixel centres at x + 0.5: corner 1 bottom\n// left, corner 2 bottom right, corner 3 the apex. The base is the 1-2 side.\nconst P1x = 0.5, P1y = 127.2, P2x = 63.5, P2y = 127.2, P3x = 32, P3y = 0.8;\nconst E2x = P2x - P1x, E2y = P2y - P1y, E3x = P3x - P1x, E3y = P3y - P1y, DET = E2x * E3y - E3x * E2y;\n// Length of the gradient of each barycentric coordinate, in units per LED:\n// the distance from a pixel to a mesh line is its offset over this.\nconst G2 = hypot(E3y, E3x) / abs(DET), G3 = hypot(E2y, E2x) / abs(DET);\nconst G1 = hypot(E3y - E2y, E2x - E3x) / abs(DET);\n\n// The map f is defined on an equilateral triangle, corners E1 = (-1, 0),\n// E2 = (1, 0), E3 = (0, sqrt 3): f(q) = q + d(q), pulled back into the\n// triangle by the nearest point, so f is continuous and maps the triangle\n// into itself. d turns round the fixed point c by an angle that grows by\n// SWIRL radians per unit of distance at Swirl 1, and is STEP long from R0\n// out, shrinking to nothing at c.\nconst STEP = 0.12, R0 = 0.35, SWIRL = 3.4;\n// Radius of the glow round the head of the walk, in LEDs.\nconst GLOW = 7;\n// The ripple: two waves added to d, up to RIP times STEP.\nconst RIP = 3.5;\n\n// Label colours: 1 azure, 2 rose, 3 green. Each at its own brightness\n// (brightest channel 0.85, 0.62 and 0.4 of full), so a room that changes\n// label changes in brightness too and not only in hue; green at 0.4 still\n// looks about as bright to the eye as azure at 0.85.\nconst COL = [\n  [0.12 * 0.85, 0.42 * 0.85, 0.85],\n  [0.62, 0.18 * 0.62, 0.3 * 0.62],\n  [0.2 * 0.4 / 0.95, 0.4, 0.28 * 0.4 / 0.95],\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 0, speed: 2, swirl: 0, ripple: 0, t: 0, head: 0, begun: false,\n    lab: new Int8Array(ST * ST), cx: 0, cy: 0, turn: 0,\n    walks: [], main: null, rainbow: [], seen: new Uint8Array(2 * NMAX * NMAX),\n    line: new Float32Array(W * H), room: new Int32Array(W * H), R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    y: [0, 0, 0], hc: [0, 0, 0],\n  };\n}\n\n// Vertex (b, c) of an n-mesh has barycentric coordinates (n - b - c, b, c) / n.\nconst vid = (b, c) => c * ST + b;\n\n// Rooms: up room (i, j) has corners (i, j), (i + 1, j), (i, j + 1); down room\n// (i, j) has corners (i + 1, j), (i, j + 1), (i + 1, j + 1).\nconst rid = (i, j, down) => 2 * (j * NMAX + i) + down;\nfunction corners(r) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  return down ? [vid(i + 1, j), vid(i, j + 1), vid(i + 1, j + 1)] : [vid(i, j), vid(i + 1, j), vid(i, j + 1)];\n}\n// The three walls of a room, each as its two corners and the room behind it\n// (-1 for the base, -2 for the other two sides).\nfunction walls(r, n) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  if (down)\n    return [\n      [vid(i + 1, j), vid(i, j + 1), rid(i, j, 0)],\n      [vid(i, j + 1), vid(i + 1, j + 1), rid(i, j + 1, 0)],\n      [vid(i + 1, j), vid(i + 1, j + 1), rid(i + 1, j, 0)],\n    ];\n  return [\n    [vid(i, j), vid(i + 1, j), j > 0 ? rid(i, j - 1, 1) : -1],\n    [vid(i, j), vid(i, j + 1), i > 0 ? rid(i - 1, j, 1) : -2],\n    [vid(i + 1, j), vid(i, j + 1), i + j \u003c n - 1 ? rid(i, j, 1) : -2],\n  ];\n}\n\n// The map at barycentric x, written into y as barycentric coordinates.\n// Near the sides the turn and the ripple fade out (over the band where the\n// smallest coordinate is under EDGE), so there d points at c and q + d stays\n// inside: f has no fixed point on the sides, only where d is zero inside.\nconst EDGE = 0.16;\nfunction f(S, x1, x2, x3, y) {\n  const mb = min(x1, x2, x3), qx = x2 - x1, qy = R3 * x3, inner = sm(0, EDGE, mb);\n  const dx = S.cx - qx, dy = S.cy - qy, r = hypot(dx, dy);\n  let gx = 0, gy = 0;\n  if (r > 1e-12) {\n    const psi = (S.turn + S.swirl * SWIRL * r) * inner, m = (STEP * min(r, R0)) / R0 / r, cs = cos(psi), sn = sin(psi);\n    gx = (dx * cs - dy * sn) * m;\n    gy = (dx * sn + dy * cs) * m;\n  }\n  if (S.ripple > 0) {\n    const a = S.ripple ** 0.6 * RIP * STEP * sm(0, EDGE / 2, mb), ph = S.t * 0.21;\n    gx += a * sin(5.3 * qx + 3.1 * qy + ph);\n    gy += a * sin(-4.4 * qx + 4.9 * qy + 1.9 - 0.8 * ph);\n  }\n  let px = qx + gx, py = qy + gy;\n  // Back into the triangle by the nearest point.\n  let z3 = py / R3, z2 = (1 - z3 + px) / 2, z1 = (1 - z3 - px) / 2;\n  if (z1 \u003c 0 || z2 \u003c 0 || z3 \u003c 0) {\n    let best = Infinity, bx = 0, by = 0;\n    const E = [-1, 0, 1, 0, 0, R3];\n    for (let e = 0; e \u003c 3; e++) {\n      const ax = E[2 * e], ay = E[2 * e + 1], ex = E[(2 * e + 2) % 6] - ax, ey = E[(2 * e + 3) % 6] - ay;\n      const t = cl(((px - ax) * ex + (py - ay) * ey) / (ex * ex + ey * ey), 0, 1), sx = ax + t * ex, sy = ay + t * ey;\n      const d2 = (px - sx) ** 2 + (py - sy) ** 2;\n      if (d2 \u003c best) {\n        best = d2;\n        bx = sx;\n        by = sy;\n      }\n    }\n    px = bx;\n    py = by;\n    z3 = max(0, py / R3);\n    z2 = max(0, (1 - z3 + px) / 2);\n    z1 = max(0, 1 - z2 - z3);\n  }\n  y[0] = z1;\n  y[1] = z2;\n  y[2] = z3;\n}\n\n// Label every vertex: of the coordinates that are not zero, the one f takes\n// down the most. Such a one always exists because both sum to 1, and a\n// coordinate that is zero is never chosen, so each corner gets its own label\n// and each side only its two corners' labels: a Sperner labelling.\nfunction label(S) {\n  const n = S.n, y = S.y;\n  for (let c = 0; c \u003c= n; c++)\n    for (let b = 0; b + c \u003c= n; b++) {\n      const a = n - b - c, x = [a / n, b / n, c / n];\n      f(S, x[0], x[1], x[2], y);\n      let best = -Infinity, L = 0;\n      for (let i = 0; i \u003c 3; i++)\n        if (x[i] > 0 && x[i] - y[i] > best + 1e-12) {\n          best = x[i] - y[i];\n          L = i;\n        }\n      S.lab[vid(b, c)] = L;\n    }\n}\n\nconst isDoor = (S, va, vb) => S.lab[va] + S.lab[vb] === 1;\nfunction rainbow(S, r) {\n  const [a, b, c] = corners(r), L = S.lab;\n  return L[a] !== L[b] && L[b] !== L[c] && L[a] !== L[c];\n}\n\n// Walk from room r, having come in through the wall behind which lies\n// `from`: leave by the other door each time. Ends in a rainbow room (end =\n// room) or out through a door in the base (end = -1).\nfunction walk(S, r, from, pts) {\n  const n = S.n;\n  for (let guard = 0; guard \u003c 2 * n * n + 2; guard++) {\n    S.seen[r] = 1;\n    const cs = corners(r);\n    pts.push(centroid(n, cs));\n    if (rainbow(S, r)) return r;\n    const ws = walls(r, n);\n    let out = null;\n    for (const w of ws) if (isDoor(S, w[0], w[1]) && w[2] !== from) out = w;\n    if (!out) return r;\n    pts.push(mid(n, out[0], out[1]));\n    if (out[2] \u003c 0) return -1;\n    from = r;\n    r = out[2];\n  }\n  return -1;\n}\n\n// Panel position of vertex v of an n-mesh.\nfunction vpos(n, v) {\n  const b = v % ST, c = (v - b) / ST;\n  return [P1x + (E2x * b + E3x * c) / n, P1y + (E2y * b + E3y * c) / n];\n}\nfunction centroid(n, cs) {\n  const a = vpos(n, cs[0]), b = vpos(n, cs[1]), c = vpos(n, cs[2]);\n  return [(a[0] + b[0] + c[0]) / 3, (a[1] + b[1] + c[1]) / 3];\n}\nfunction mid(n, va, vb) {\n  const a = vpos(n, va), b = vpos(n, vb);\n  return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n}\n\n// All the door walks: from each door in the base, then from each rainbow\n// room no walk has reached yet. The main walk is the leftmost one from the\n// base that ends in a rainbow room; there is always one, because the base\n// holds an odd number of doors and walks from the base pair them up two by\n// two except where they end in a rainbow room.\nfunction walkAll(S) {\n  const n = S.n;\n  S.seen.fill(0);\n  S.walks = [];\n  S.main = null;\n  S.rainbow = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = rid(i, 0, 0);\n    if (S.seen[r] || !isDoor(S, vid(i, 0), vid(i + 1, 0))) continue;\n    const pts = [mid(n, vid(i, 0), vid(i + 1, 0))], end = walk(S, r, -1, pts);\n    const w = { pts, end, base: true };\n    S.walks.push(w);\n    if (end >= 0 && !S.main) S.main = w;\n  }\n  for (let j = 0; j \u003c n; j++)\n    for (let i = 0; i + j \u003c n; i++)\n      for (let down = 0; down \u003c 2; down++) {\n        if (down && i + j > n - 2) continue;\n        const r = rid(i, j, down);\n        if (!rainbow(S, r)) continue;\n        S.rainbow.push(r);\n        if (S.seen[r]) continue;\n        // Its one door, and on from the room behind it.\n        S.seen[r] = 1;\n        const pts = [centroid(n, corners(r))];\n        let end = r;\n        for (const w of walls(r, n))\n          if (isDoor(S, w[0], w[1])) {\n            pts.push(mid(n, w[0], w[1]));\n            end = w[2] >= 0 ? walk(S, w[2], r, pts) : -1;\n          }\n        S.walks.push({ pts, end, base: false });\n      }\n}\n\nfunction lengthOf(pts) {\n  let L = 0;\n  for (let k = 1; k \u003c pts.length; k++) L += hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n  return L;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [12, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.n = round(cl(k[0], 12, NMAX));\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[2], 0, 1);\n  // Up to 0.06 no ripple, so the opening has one fixed point.\n  S.ripple = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  if (!S.begun) {\n    // Open some way into the run, further in the faster it goes, so Speed\n    // shows from the first second.\n    S.t = 4 * S.speed;\n    S.begun = true;\n  }\n  S.t += (d * S.speed) / 2;\n  S.head += d * S.speed * 18;\n  // The fixed point of the map without ripple wanders inside the triangle,\n  // its barycentric coordinates never under 0.12, round its loop in 14\n  // seconds at Speed 2.\n  const t = S.t, rr = 0.13 + 0.08 * sin(0.6 * t + 0.6), ph = 0.45 * t + 1.1;\n  const c1 = 1 / 3 + rr * cos(ph), c2 = 1 / 3 + rr * cos(ph - TAU / 3), c3 = 1 - c1 - c2;\n  S.cx = c2 - c1;\n  S.cy = R3 * c3;\n  // The push leans up to 60 degrees either side of straight at c, back and\n  // forth every 12.6 seconds at Speed 2.\n  S.turn = 1.05 * sin(0.5 * t);\n  label(S);\n  walkAll(S);\n}\n\n// Light the line buffer along a polyline, with brightness fn(s) at arc\n// length s.\nfunction stroke(S, pts, fn) {\n  const L = S.line;\n  let s = 0;\n  for (let k = 1; k \u003c pts.length; k++) {\n    const ax = pts[k - 1][0], ay = pts[k - 1][1], bx = pts[k][0], by = pts[k][1];\n    const ex = bx - ax, ey = by - ay, len = hypot(ex, ey);\n    if (len \u003c 1e-6) continue;\n    const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n    const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, u = cl((px * ex + py * ey) / (len * len), 0, 1);\n        const dd = hypot(px - u * ex, py - u * ey), a = cl(1.25 - dd, 0, 1);\n        if (a \u003c= 0) continue;\n        const v = a * fn(s + u * len), p = y * W + x;\n        if (v > L[p]) L[p] = v;\n      }\n    s += len;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  const { n, lab, R, G, B, line, hc, room } = S;\n  line.fill(0);\n  const isMainEnd = (r) => S.main && S.main.end === r;\n  const rb = new Set(S.rainbow);\n  // The territories, the mesh and the rainbow rooms.\n  const lw = 0.5 + 0.3 * (NMAX - n) / 16;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, X = x + 0.5 - P1x, Y = y + 0.5 - P1y;\n      const l2 = (X * E3y - Y * E3x) / DET, l3 = (E2x * Y - E2y * X) / DET, l1 = 1 - l2 - l3;\n      if (l1 \u003c -0.004 || l2 \u003c -0.004 || l3 \u003c -0.004) {\n        R[p] = G[p] = B[p] = 0;\n        room[p] = -1;\n        continue;\n      }\n      const u = cl(l2 * n, 0, n - 1e-6), v = cl(l3 * n, 0, n - 1e-6);\n      let i = floor(u), j = floor(v);\n      if (i + j > n - 1) j = n - 1 - i;\n      const fu = u - i, fv = v - j, down = fu + fv > 1 ? 1 : 0;\n      const r = rid(i, j, down), cs = corners(r);\n      const w = down ? [fu + fv - 1, 1 - fu, 1 - fv] : [1 - fu - fv, fu, fv];\n      // Each corner's share of the room: the part nearer it than the others,\n      // so every vertex sits in a cell of its own label's colour.\n      let m = 0;\n      if (w[1] > w[m]) m = 1;\n      if (w[2] > w[m]) m = 2;\n      const c = COL[lab[cs[m]]];\n      // Mesh lines: dark walls, about one LED wide.\n      const a1 = u - i, b1 = v - j, w1 = u + v - floor(u + v);\n      const dm = min(min(a1, 1 - a1) / (n * G2), min(b1, 1 - b1) / (n * G3), min(w1, 1 - w1) / (n * G1));\n      const wl = 1 - sm(0.2, 0.75, dm);\n      room[p] = r;\n      if (rb.has(r)) {\n        // A rainbow room: a spinning wheel of every hue inside white walls.\n        const ctr = centroid(n, cs), a = atan2(y + 0.5 - ctr[1], x + 0.5 - ctr[0]) / TAU;\n        hsv(a + S.t * 0.6, 0.85, 1, hc);\n        const k = isMainEnd(r) ? 0.9 : 0.6;\n        R[p] = 255 * (hc[0] + (k - hc[0]) * wl);\n        G[p] = 255 * (hc[1] + (k - hc[1]) * wl);\n        B[p] = 255 * (hc[2] + (k - hc[2]) * wl);\n        continue;\n      }\n      const wall = 1 - lw * wl;\n      R[p] = c[0] * wall * 255;\n      G[p] = c[1] * wall * 255;\n      B[p] = c[2] * wall * 255;\n    }\n  // The other walks dim; the main one brighter, with a head running from\n  // the base door into the rainbow room and a pause there before it runs again.\n  // Each walk is drawn from door to door and stops at the wall of a rainbow\n  // room, so the room's own colours stay clear.\n  const trim = (w) => w.pts.slice(w.base ? 0 : 1, w.end >= 0 ? w.pts.length - 1 : w.pts.length);\n  for (const w of S.walks) if (w !== S.main) stroke(S, trim(w), () => 0.42);\n  if (S.main) {\n    const pts = trim(S.main), L = lengthOf(pts), cyc = L + 30, hs = S.head % cyc;\n    stroke(S, pts, (s) => {\n      const back = hs - s;\n      return back \u003c 0 ? 0.62 : 0.62 + 0.38 * Math.exp(-back / 9);\n    });\n    // A soft glow rides with the head, GLOW LEDs round, so the run up the\n    // walk shows from across the room and not only on the thin line.\n    if (hs \u003c L) {\n      let s = 0, hx = pts[0][0], hy = pts[0][1];\n      for (let k = 1; k \u003c pts.length; k++) {\n        const ex = pts[k][0] - pts[k - 1][0], ey = pts[k][1] - pts[k - 1][1], len = hypot(ex, ey);\n        if (s + len >= hs) {\n          const u = len > 0 ? (hs - s) / len : 0;\n          hx = pts[k - 1][0] + u * ex;\n          hy = pts[k - 1][1] + u * ey;\n          break;\n        }\n        s += len;\n      }\n      for (let y = max(0, floor(hy - GLOW)); y \u003c= min(H - 1, floor(hy + GLOW)); y++)\n        for (let x = max(0, floor(hx - GLOW)); x \u003c= min(W - 1, floor(hx + GLOW)); x++) {\n          const dd = hypot(x + 0.5 - hx, y + 0.5 - hy) / GLOW, p = y * W + x;\n          if (dd >= 1 || room[p] \u003c 0 || rb.has(room[p])) continue;\n          const g = 0.7 * (1 - dd) * (1 - dd);\n          R[p] += (255 - R[p]) * g;\n          G[p] += (255 - G[p]) * g;\n          B[p] += (255 - B[p]) * g;\n        }\n    }\n    // A halo round the room the walk ends in, flaring as the head arrives.\n    const ctr = centroid(n, corners(S.main.end)), fl = hs > L ? Math.exp(-(hs - L) / 12) : 0;\n    const rad = 5 + 3 * fl + 60 / n, amp = 0.3 + 0.5 * fl;\n    for (let y = max(0, floor(ctr[1] - rad)); y \u003c= min(H - 1, floor(ctr[1] + rad)); y++)\n      for (let x = max(0, floor(ctr[0] - rad)); x \u003c= min(W - 1, floor(ctr[0] + rad)); x++) {\n        const dd = hypot(x + 0.5 - ctr[0], (y + 0.5 - ctr[1]) * 0.6) / rad;\n        if (dd >= 1) continue;\n        const g = amp * (1 - dd) * (1 - dd), p = y * W + x;\n        if (room[p] \u003c 0 || rb.has(room[p])) continue;\n        R[p] += (255 - R[p]) * g;\n        G[p] += (255 - G[p]) * g;\n        B[p] += (255 - B[p]) * g;\n      }\n  }\n  for (let p = 0; p \u003c W * H; p++) {\n    const a = line[p];\n    const r = R[p] * (1 - a) + 255 * a, g = G[p] * (1 - a) + 255 * a, b = B[p] * (1 - a) + 255 * a;\n    display.setPixel(p % W, (p / W) | 0, round(min(255, r)), round(min(255, g)), round(min(255, b)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mesh","min":12,"max":28,"about":"Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Swirl","min":0,"max":1,"about":"Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in."},{"name":"Ripple","min":0,"max":1,"about":"Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two."}],"start":[12,2,0,0.06],"measures":{"motion":0.0411,"detail":0.0869,"edges":0.6362,"complexity":0.5552,"coverage":0.4564,"colour":0.2811,"drift":0.0451},"knobResponse":[0.0654,0.0563,0.0533,0.0518]},{"slug":"sponge-blend","title":"Sponge Blend","family":"cosmetic","round":31,"note":"옅은 바탕에 산호색 줄 하나가 그어지고, 보이지 않는 촉촉한 스펀지가 줄을 따라 1초에 여섯 번쯤 두드려 고운 구멍 자국을 찍으며 색을 바깥으로 펴요. 15초쯤이면 선이 넓은 점묘 그러데이션이 되고, 닦아 내고 다시 그어요. K1 은 색상환을 다 돌고, 누르면 새 줄을 그어요.","idea":"A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.","buttons":"K1 tap lays a fresh stripe of colour for the sponge to blend out.","code":"// ===== Patternflow pattern =====\n// Title:   Sponge Blend\n// Family:  cosmetic\n// Idea:    A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after foundation blended out with a damp makeup sponge\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1\n//\n// Knob 1: Hue. The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown.\n// Knob 2: Speed. How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower.\n// Knob 3: Coverage. How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab.\n// Knob 4: Grain. How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish.\n// Buttons: K1 tap lays a fresh stripe of colour for the sponge to blend out.\n\nconst W = 64, H = 128, N = W * H;\nconst TS = 128, TN = TS * TS;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sponge's pores: three tiles of noise blurred over 3, 5 and 7 LEDs, 128\n// LEDs square and wrapping, each LED's value turned into its rank 0..255.\n// Cutting a tile at rank 128 gives cells from two to four LEDs across, half of\n// them touching; cutting it lower leaves only the cores, small and sparse.\nlet TILES = null;\nfunction tiles() {\n  const out = [];\n  const raw = Float32Array.from({ length: TN }, (_, i) => hash(i + 911) - 0.5);\n  for (let r = 1; r \u003c= 3; r++) {\n    const b = new Float32Array(TN);\n    for (let y = 0; y \u003c TS; y++)\n      for (let x = 0; x \u003c TS; x++) {\n        let s = 0;\n        for (let dy = -r; dy \u003c= r; dy++) for (let dx = -r; dx \u003c= r; dx++) s += raw[((y + dy) & (TS - 1)) * TS + ((x + dx) & (TS - 1))];\n        b[y * TS + x] = s;\n      }\n    const order = Array.from({ length: TN }, (_, i) => i).sort((p, q) => b[p] - b[q]);\n    const rank = new Uint8Array(TN);\n    order.forEach((i, k) => (rank[i] = (k * 256) / TN));\n    out.push(rank);\n  }\n  return out;\n}\n\n// The base's grain is a fine checker: every other LED sits half a step above\n// the base and the rest half a step below, so neighbouring LEDs always differ\n// by about the same 28 to 41 levels and nothing reads as an outline. AMP is\n// each LED's own share of that step. The pores of a print are soft dips\n// spread over three LEDs, a few levels a LED, so they never cut an edge.\nconst AMP = Float32Array.from({ length: N }, (_, i) => 0.78 + 0.34 * hash(i + 4242));\nconst ODD = Uint8Array.from({ length: N }, (_, i) => ((i % W) + floor(i / W)) & 1);\nconst STEP = 0.175;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    A: F(N), c: F(N), pm: new Uint8Array(N), cn: F(N), sh: F(N), dist: F(N).fill(99), su: F(N),\n    phase: 0, pt: 0, lay: 0, len: 100, pts: F(98), u: 0, dir: 1, pass: 0, side: 1, load: 0, dabT: 0, n: 0,\n    hue: 0, speed: 2, cov: 0, grain: 0.06, started: false, col: F(6), T: 0,\n  };\n}\n\n// A new stripe: a gentle curve down most of the panel, or anywhere when\n// laid by hand. Every LED's distance from it and the place along it nearest\n// are kept for laying it on and for walking the sponge along it.\nfunction stripe(S, free) {\n  const r = Math.random;\n  let x0, y0, x1, y1;\n  if (free) {\n    const a = r() * PI, l = 50 + r() * 50, cx = 16 + r() * 32, cy = 30 + r() * 68;\n    x0 = cx - (cos(a) * l) / 2;\n    y0 = cy - (sin(a) * l) / 2;\n    x1 = cx + (cos(a) * l) / 2;\n    y1 = cy + (sin(a) * l) / 2;\n  } else {\n    x0 = 14 + r() * 36;\n    y0 = 8 + r() * 10;\n    x1 = 14 + r() * 36;\n    y1 = 110 + r() * 10;\n  }\n  const nx = -(y1 - y0), ny = x1 - x0, nl = sqrt(nx * nx + ny * ny) || 1, bend = (r() - 0.5) * 24;\n  const mx = (x0 + x1) / 2 + (nx / nl) * bend, my = (y0 + y1) / 2 + (ny / nl) * bend;\n  const P = S.pts;\n  let len = 0;\n  for (let k = 0; k \u003c 49; k++) {\n    const t = k / 48, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n    P[k * 2] = a * x0 + b * mx + c * x1;\n    P[k * 2 + 1] = a * y0 + b * my + c * y1;\n    if (k) len += Math.hypot(P[k * 2] - P[k * 2 - 2], P[k * 2 + 1] - P[k * 2 - 1]);\n  }\n  S.len = len;\n  S.wid = 11 + r() * 3;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let best = 1e9, bu = 0;\n      for (let k = 0; k \u003c 48; k++) {\n        const ax = P[k * 2], ay = P[k * 2 + 1], bx = P[k * 2 + 2] - ax, by = P[k * 2 + 3] - ay;\n        const t = cl(((x + 0.5 - ax) * bx + (y + 0.5 - ay) * by) / (bx * bx + by * by + 1e-6), 0, 1);\n        const dx = x + 0.5 - ax - bx * t, dy = y + 0.5 - ay - by * t, d = dx * dx + dy * dy;\n        if (d \u003c best) (best = d), (bu = (k + t) / 48);\n      }\n      S.dist[i] = sqrt(best);\n      S.su[i] = bu;\n    }\n  S.phase = 1;\n  S.lay = 0;\n  S.u = 0;\n  S.dir = 1;\n  S.pass = 0;\n  S.load = 0.3;\n}\n\n// Where the sponge comes down next: back and forth along the stripe, a step\n// at a time, zig-zagging to either side and further out with each pass.\nconst REACH = [6, 10, 14, 18, 12];\nfunction target(S) {\n  const P = S.pts, u = cl(S.u, 0, 1), k = min(47, floor(u * 48)), t = u * 48 - k;\n  const x = P[k * 2] + (P[k * 2 + 2] - P[k * 2]) * t, y = P[k * 2 + 1] + (P[k * 2 + 3] - P[k * 2 + 1]) * t;\n  const tx = P[k * 2 + 2] - P[k * 2], ty = P[k * 2 + 3] - P[k * 2 + 1], tl = sqrt(tx * tx + ty * ty) || 1;\n  const off = S.side * REACH[S.pass % REACH.length] * (0.2 + 0.8 * Math.random());\n  return [x - (ty / tl) * off + (Math.random() - 0.5) * 3, y + (tx / tl) * off + (Math.random() - 0.5) * 3];\n}\n\n// One dab: the sponge's touching cells give and take colour until each holds\n// nearer the patch's mean, with a little of what the sponge still carries\n// from the last dab, so the colour is dragged along the way it bounces. The\n// sponge soaks up a little each time, so a stripe thins as it spreads. The\n// print shows the touching cells as pores of deeper colour: all of them on a\n// fresh patch, and only their cores, smaller and fewer, each time the same\n// spot is dabbed again, until the patch is a smooth finish with fine pores.\nfunction dab(S, cx, cy) {\n  const cov = S.cov, R = 10 + 3 * cov, ox = floor(Math.random() * TS), oy = floor(Math.random() * TS);\n  const g = S.grain, tile = TILES[min(2, floor(g * 3))], rate = 0.7 + 0.25 * cov;\n  // A coarse sponge prints more and bigger pores, and prints them in thinner colour.\n  const fr = 0.36 + 0.24 * g, lo = 0.25 - 0.13 * g;\n  const A = S.A, pm = S.pm, cn = S.cn, sh = S.sh, C = S.c;\n  const E = R * 1.25, x0 = max(0, floor(cx - E)), x1 = min(W - 1, floor(cx + E)), y0 = max(0, floor(cy - E)), y1 = min(H - 1, floor(cy + E));\n  const p1 = Math.random() * 2 * PI, p2 = Math.random() * 2 * PI;\n  let sum = 0, area = 0;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy, th = Math.atan2(dy, dx), i = y * W + x;\n      // The sponge's tip is not a perfect circle, and turns from dab to dab.\n      const d = sqrt(dx * dx + dy * dy) / (R * (1 + 0.13 * sin(2 * th + p1) + 0.08 * sin(3 * th + p2)));\n      if (d >= 1) {\n        C[i] = 0;\n        continue;\n      }\n      const w = 1 - sm((d - 0.45) / 0.55);\n      const rk = tile[((y + oy) & (TS - 1)) * TS + ((x + ox) & (TS - 1))];\n      const c = w * (rk \u003c 128 ? 1 : 0.15) * rate;\n      C[i] = c;\n      sum += c * A[i];\n      area += c;\n      cn[i] += w;\n      sh[i] = max(sh[i], w);\n      // The print, except at the very rim where the sponge barely touched.\n      // Pores only show where colour sits, fewer the more it was dabbed.\n      if (w > 0.3 || hash(i + S.n * 131) \u003c w * 3) pm[i] = A[i] > lo && rk \u003c 256 * max(0.12, fr * exp(-cn[i] / 4)) ? 1 : 0;\n    }\n  if (area \u003c= 0) return;\n  const mean = sum / area, carry = 0.75 * mean + 0.25 * S.load;\n  S.load = mean;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, i = y * W + x0; x \u003c= x1; x++, i++) {\n      const c = C[i];\n      if (c > 0) A[i] = (A[i] + (carry - A[i]) * c) * (1 - 0.05 * c);\n    }\n  S.n++;\n}\n\nfunction stepT(S, st) {\n  if (S.phase === 1) {\n    // Laying the stripe on, top to bottom, in about a second.\n    S.lay = min(1, S.lay + st * 1.1);\n    const w2 = S.wid / 2, A = S.A;\n    for (let i = 0; i \u003c N; i++) {\n      const f = (S.lay - S.su[i]) * S.len;\n      if (f \u003c= 0) continue;\n      // A soft shoulder three LEDs wide on each side and at the tip, never a cliff.\n      const v = (1 - sm((S.dist[i] - w2 + 1.5) / 3)) * sm(f / 3);\n      if (v > A[i]) A[i] = v;\n    }\n    if (S.lay >= 1) {\n      S.phase = 2;\n      S.pt = 0;\n      S.dabT = 0.15;\n    }\n    return;\n  }\n  if (S.phase === 2) {\n    S.pt += st;\n    S.dabT -= st;\n    if (S.dabT \u003c= 0) {\n      S.dabT += 0.17 * (0.85 + 0.3 * Math.random());\n      const [x, y] = target(S);\n      dab(S, x, y);\n      S.side = -S.side;\n      S.u += (S.dir * 6.5) / S.len;\n      if (S.u > 1 || S.u \u003c 0) {\n        S.dir = -S.dir;\n        S.u = cl(S.u, 0, 1);\n        S.pass++;\n      }\n    }\n    if (S.pass >= REACH.length) {\n      S.phase = 3;\n      S.pt = 0;\n    }\n    return;\n  }\n  if (S.phase === 3) {\n    // A slow wipe from the top takes the colour off; then the next stripe.\n    S.pt += st;\n    const edge = S.pt * 110 - 10, A = S.A, cn = S.cn;\n    for (let y = 0; y \u003c H; y++) {\n      const k = cl((edge - y) / 12, 0, 1) * 0.25;\n      if (k \u003c= 0) break;\n      for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n        A[i] *= 1 - k;\n        cn[i] *= 1 - k;\n        if (A[i] \u003c 0.25) S.pm[i] = 0;\n      }\n    }\n    if (S.pt > 1.6) stripe(S, false);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.cov = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    if (!TILES) TILES = tiles();\n    // Open with the stripe more than half laid on.\n    stripe(S, false);\n    for (let i = 0; i \u003c 12; i++) stepT(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    stripe(S, true);\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  stepT(S, st);\n  // The wet shine dries in real time, over a second or two, so a fast sponge\n  // leaves several at once.\n  const fade = exp(-d * 1.4);\n  for (let i = 0; i \u003c N; i++) S.sh[i] *= fade;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const A = S.A, pm = S.pm, sh = S.sh, col = S.col;\n  const h = S.hue + 0.05, cov = S.cov;\n  // The base: a pale ivory with a breath of the hue. The colour: the hue at\n  // nearly the same brightness, so the blend shows as colour on a steady grain.\n  // Orange and gold read brown when dim, so round them the colour is lifted.\n  const hf = h - floor(h), wm = sm((hf - 0.03) / 0.05) * (1 - sm((hf - 0.15) / 0.07));\n  hsv(h, 0.06, 212, col, 0);\n  hsv(h, 0.5 + 0.18 * cov + 0.1 * wm, 208 + 18 * wm, col, 3);\n  // The damp canvas catches the light: two broad soft bands of sheen, about\n  // 18 levels at most and 35 LEDs wide, glide down it at 18 LEDs a second,\n  // tilted a little. They change by under a level from LED to LED, so they\n  // add no edge.\n  const cyc = H + 104, b0 = ((S.T * 18) % cyc) - 52, b1 = ((S.T * 18 + cyc / 2) % cyc) - 52;\n  // Grain also roughens the base: the checker's step grows by half from 0 to 1.\n  const g = S.grain, op = 0.65 + 0.35 * cov, dip = 0.05 + 0.03 * g, gs = STEP * (0.9 + 0.55 * g);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const sy = y + (x - 32) * 0.35, e0 = (sy - b0) / 15, e1 = (sy - b1) / 15;\n      const glow = 0.085 * (exp(-e0 * e0 * 0.5) + exp(-e1 * e1 * 0.5));\n      // How much pore is round this LED, 0..1 over its 3x3 neighbourhood.\n      let pv = 0;\n      for (let yy = max(0, y - 1); yy \u003c= min(H - 1, y + 1); yy++) for (let xx = max(0, x - 1), j = yy * W + xx; xx \u003c= min(W - 1, x + 1); xx++, j++) pv += pm[j];\n      pv /= 9;\n      // A pore holds more colour and sits a little deeper. A fresh dab is\n      // wet for a moment: its colour reads deeper and the base a touch\n      // brighter, then it dries back.\n      const ac = sqrt(cl(A[i], 0, 1)), wet = sh[i];\n      const a = min(1, ac * op * (1 + 0.45 * wet) + 0.45 * pv);\n      const l = 1 + glow + 0.08 * wet - dip * pv + gs * AMP[i] * (ODD[i] ? -0.5 : 0.5);\n      display.setPixel(x, y, (col[0] + (col[3] - col[0]) * a) * l, (col[1] + (col[4] - col[1]) * a) * l, (col[2] + (col[5] - col[2]) * a) * l);\n    }\n}\n","layer":{"id":"layer-sponge-blend","type":"code","name":"sponge-blend","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sponge Blend\n// Family:  cosmetic\n// Idea:    A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after foundation blended out with a damp makeup sponge\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1\n//\n// Knob 1: Hue. The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown.\n// Knob 2: Speed. How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower.\n// Knob 3: Coverage. How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab.\n// Knob 4: Grain. How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish.\n// Buttons: K1 tap lays a fresh stripe of colour for the sponge to blend out.\n\nconst W = 64, H = 128, N = W * H;\nconst TS = 128, TN = TS * TS;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sponge's pores: three tiles of noise blurred over 3, 5 and 7 LEDs, 128\n// LEDs square and wrapping, each LED's value turned into its rank 0..255.\n// Cutting a tile at rank 128 gives cells from two to four LEDs across, half of\n// them touching; cutting it lower leaves only the cores, small and sparse.\nlet TILES = null;\nfunction tiles() {\n  const out = [];\n  const raw = Float32Array.from({ length: TN }, (_, i) => hash(i + 911) - 0.5);\n  for (let r = 1; r \u003c= 3; r++) {\n    const b = new Float32Array(TN);\n    for (let y = 0; y \u003c TS; y++)\n      for (let x = 0; x \u003c TS; x++) {\n        let s = 0;\n        for (let dy = -r; dy \u003c= r; dy++) for (let dx = -r; dx \u003c= r; dx++) s += raw[((y + dy) & (TS - 1)) * TS + ((x + dx) & (TS - 1))];\n        b[y * TS + x] = s;\n      }\n    const order = Array.from({ length: TN }, (_, i) => i).sort((p, q) => b[p] - b[q]);\n    const rank = new Uint8Array(TN);\n    order.forEach((i, k) => (rank[i] = (k * 256) / TN));\n    out.push(rank);\n  }\n  return out;\n}\n\n// The base's grain is a fine checker: every other LED sits half a step above\n// the base and the rest half a step below, so neighbouring LEDs always differ\n// by about the same 28 to 41 levels and nothing reads as an outline. AMP is\n// each LED's own share of that step. The pores of a print are soft dips\n// spread over three LEDs, a few levels a LED, so they never cut an edge.\nconst AMP = Float32Array.from({ length: N }, (_, i) => 0.78 + 0.34 * hash(i + 4242));\nconst ODD = Uint8Array.from({ length: N }, (_, i) => ((i % W) + floor(i / W)) & 1);\nconst STEP = 0.175;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    A: F(N), c: F(N), pm: new Uint8Array(N), cn: F(N), sh: F(N), dist: F(N).fill(99), su: F(N),\n    phase: 0, pt: 0, lay: 0, len: 100, pts: F(98), u: 0, dir: 1, pass: 0, side: 1, load: 0, dabT: 0, n: 0,\n    hue: 0, speed: 2, cov: 0, grain: 0.06, started: false, col: F(6), T: 0,\n  };\n}\n\n// A new stripe: a gentle curve down most of the panel, or anywhere when\n// laid by hand. Every LED's distance from it and the place along it nearest\n// are kept for laying it on and for walking the sponge along it.\nfunction stripe(S, free) {\n  const r = Math.random;\n  let x0, y0, x1, y1;\n  if (free) {\n    const a = r() * PI, l = 50 + r() * 50, cx = 16 + r() * 32, cy = 30 + r() * 68;\n    x0 = cx - (cos(a) * l) / 2;\n    y0 = cy - (sin(a) * l) / 2;\n    x1 = cx + (cos(a) * l) / 2;\n    y1 = cy + (sin(a) * l) / 2;\n  } else {\n    x0 = 14 + r() * 36;\n    y0 = 8 + r() * 10;\n    x1 = 14 + r() * 36;\n    y1 = 110 + r() * 10;\n  }\n  const nx = -(y1 - y0), ny = x1 - x0, nl = sqrt(nx * nx + ny * ny) || 1, bend = (r() - 0.5) * 24;\n  const mx = (x0 + x1) / 2 + (nx / nl) * bend, my = (y0 + y1) / 2 + (ny / nl) * bend;\n  const P = S.pts;\n  let len = 0;\n  for (let k = 0; k \u003c 49; k++) {\n    const t = k / 48, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n    P[k * 2] = a * x0 + b * mx + c * x1;\n    P[k * 2 + 1] = a * y0 + b * my + c * y1;\n    if (k) len += Math.hypot(P[k * 2] - P[k * 2 - 2], P[k * 2 + 1] - P[k * 2 - 1]);\n  }\n  S.len = len;\n  S.wid = 11 + r() * 3;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let best = 1e9, bu = 0;\n      for (let k = 0; k \u003c 48; k++) {\n        const ax = P[k * 2], ay = P[k * 2 + 1], bx = P[k * 2 + 2] - ax, by = P[k * 2 + 3] - ay;\n        const t = cl(((x + 0.5 - ax) * bx + (y + 0.5 - ay) * by) / (bx * bx + by * by + 1e-6), 0, 1);\n        const dx = x + 0.5 - ax - bx * t, dy = y + 0.5 - ay - by * t, d = dx * dx + dy * dy;\n        if (d \u003c best) (best = d), (bu = (k + t) / 48);\n      }\n      S.dist[i] = sqrt(best);\n      S.su[i] = bu;\n    }\n  S.phase = 1;\n  S.lay = 0;\n  S.u = 0;\n  S.dir = 1;\n  S.pass = 0;\n  S.load = 0.3;\n}\n\n// Where the sponge comes down next: back and forth along the stripe, a step\n// at a time, zig-zagging to either side and further out with each pass.\nconst REACH = [6, 10, 14, 18, 12];\nfunction target(S) {\n  const P = S.pts, u = cl(S.u, 0, 1), k = min(47, floor(u * 48)), t = u * 48 - k;\n  const x = P[k * 2] + (P[k * 2 + 2] - P[k * 2]) * t, y = P[k * 2 + 1] + (P[k * 2 + 3] - P[k * 2 + 1]) * t;\n  const tx = P[k * 2 + 2] - P[k * 2], ty = P[k * 2 + 3] - P[k * 2 + 1], tl = sqrt(tx * tx + ty * ty) || 1;\n  const off = S.side * REACH[S.pass % REACH.length] * (0.2 + 0.8 * Math.random());\n  return [x - (ty / tl) * off + (Math.random() - 0.5) * 3, y + (tx / tl) * off + (Math.random() - 0.5) * 3];\n}\n\n// One dab: the sponge's touching cells give and take colour until each holds\n// nearer the patch's mean, with a little of what the sponge still carries\n// from the last dab, so the colour is dragged along the way it bounces. The\n// sponge soaks up a little each time, so a stripe thins as it spreads. The\n// print shows the touching cells as pores of deeper colour: all of them on a\n// fresh patch, and only their cores, smaller and fewer, each time the same\n// spot is dabbed again, until the patch is a smooth finish with fine pores.\nfunction dab(S, cx, cy) {\n  const cov = S.cov, R = 10 + 3 * cov, ox = floor(Math.random() * TS), oy = floor(Math.random() * TS);\n  const g = S.grain, tile = TILES[min(2, floor(g * 3))], rate = 0.7 + 0.25 * cov;\n  // A coarse sponge prints more and bigger pores, and prints them in thinner colour.\n  const fr = 0.36 + 0.24 * g, lo = 0.25 - 0.13 * g;\n  const A = S.A, pm = S.pm, cn = S.cn, sh = S.sh, C = S.c;\n  const E = R * 1.25, x0 = max(0, floor(cx - E)), x1 = min(W - 1, floor(cx + E)), y0 = max(0, floor(cy - E)), y1 = min(H - 1, floor(cy + E));\n  const p1 = Math.random() * 2 * PI, p2 = Math.random() * 2 * PI;\n  let sum = 0, area = 0;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy, th = Math.atan2(dy, dx), i = y * W + x;\n      // The sponge's tip is not a perfect circle, and turns from dab to dab.\n      const d = sqrt(dx * dx + dy * dy) / (R * (1 + 0.13 * sin(2 * th + p1) + 0.08 * sin(3 * th + p2)));\n      if (d >= 1) {\n        C[i] = 0;\n        continue;\n      }\n      const w = 1 - sm((d - 0.45) / 0.55);\n      const rk = tile[((y + oy) & (TS - 1)) * TS + ((x + ox) & (TS - 1))];\n      const c = w * (rk \u003c 128 ? 1 : 0.15) * rate;\n      C[i] = c;\n      sum += c * A[i];\n      area += c;\n      cn[i] += w;\n      sh[i] = max(sh[i], w);\n      // The print, except at the very rim where the sponge barely touched.\n      // Pores only show where colour sits, fewer the more it was dabbed.\n      if (w > 0.3 || hash(i + S.n * 131) \u003c w * 3) pm[i] = A[i] > lo && rk \u003c 256 * max(0.12, fr * exp(-cn[i] / 4)) ? 1 : 0;\n    }\n  if (area \u003c= 0) return;\n  const mean = sum / area, carry = 0.75 * mean + 0.25 * S.load;\n  S.load = mean;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, i = y * W + x0; x \u003c= x1; x++, i++) {\n      const c = C[i];\n      if (c > 0) A[i] = (A[i] + (carry - A[i]) * c) * (1 - 0.05 * c);\n    }\n  S.n++;\n}\n\nfunction stepT(S, st) {\n  if (S.phase === 1) {\n    // Laying the stripe on, top to bottom, in about a second.\n    S.lay = min(1, S.lay + st * 1.1);\n    const w2 = S.wid / 2, A = S.A;\n    for (let i = 0; i \u003c N; i++) {\n      const f = (S.lay - S.su[i]) * S.len;\n      if (f \u003c= 0) continue;\n      // A soft shoulder three LEDs wide on each side and at the tip, never a cliff.\n      const v = (1 - sm((S.dist[i] - w2 + 1.5) / 3)) * sm(f / 3);\n      if (v > A[i]) A[i] = v;\n    }\n    if (S.lay >= 1) {\n      S.phase = 2;\n      S.pt = 0;\n      S.dabT = 0.15;\n    }\n    return;\n  }\n  if (S.phase === 2) {\n    S.pt += st;\n    S.dabT -= st;\n    if (S.dabT \u003c= 0) {\n      S.dabT += 0.17 * (0.85 + 0.3 * Math.random());\n      const [x, y] = target(S);\n      dab(S, x, y);\n      S.side = -S.side;\n      S.u += (S.dir * 6.5) / S.len;\n      if (S.u > 1 || S.u \u003c 0) {\n        S.dir = -S.dir;\n        S.u = cl(S.u, 0, 1);\n        S.pass++;\n      }\n    }\n    if (S.pass >= REACH.length) {\n      S.phase = 3;\n      S.pt = 0;\n    }\n    return;\n  }\n  if (S.phase === 3) {\n    // A slow wipe from the top takes the colour off; then the next stripe.\n    S.pt += st;\n    const edge = S.pt * 110 - 10, A = S.A, cn = S.cn;\n    for (let y = 0; y \u003c H; y++) {\n      const k = cl((edge - y) / 12, 0, 1) * 0.25;\n      if (k \u003c= 0) break;\n      for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n        A[i] *= 1 - k;\n        cn[i] *= 1 - k;\n        if (A[i] \u003c 0.25) S.pm[i] = 0;\n      }\n    }\n    if (S.pt > 1.6) stripe(S, false);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.cov = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    if (!TILES) TILES = tiles();\n    // Open with the stripe more than half laid on.\n    stripe(S, false);\n    for (let i = 0; i \u003c 12; i++) stepT(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    stripe(S, true);\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  stepT(S, st);\n  // The wet shine dries in real time, over a second or two, so a fast sponge\n  // leaves several at once.\n  const fade = exp(-d * 1.4);\n  for (let i = 0; i \u003c N; i++) S.sh[i] *= fade;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const A = S.A, pm = S.pm, sh = S.sh, col = S.col;\n  const h = S.hue + 0.05, cov = S.cov;\n  // The base: a pale ivory with a breath of the hue. The colour: the hue at\n  // nearly the same brightness, so the blend shows as colour on a steady grain.\n  // Orange and gold read brown when dim, so round them the colour is lifted.\n  const hf = h - floor(h), wm = sm((hf - 0.03) / 0.05) * (1 - sm((hf - 0.15) / 0.07));\n  hsv(h, 0.06, 212, col, 0);\n  hsv(h, 0.5 + 0.18 * cov + 0.1 * wm, 208 + 18 * wm, col, 3);\n  // The damp canvas catches the light: two broad soft bands of sheen, about\n  // 18 levels at most and 35 LEDs wide, glide down it at 18 LEDs a second,\n  // tilted a little. They change by under a level from LED to LED, so they\n  // add no edge.\n  const cyc = H + 104, b0 = ((S.T * 18) % cyc) - 52, b1 = ((S.T * 18 + cyc / 2) % cyc) - 52;\n  // Grain also roughens the base: the checker's step grows by half from 0 to 1.\n  const g = S.grain, op = 0.65 + 0.35 * cov, dip = 0.05 + 0.03 * g, gs = STEP * (0.9 + 0.55 * g);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const sy = y + (x - 32) * 0.35, e0 = (sy - b0) / 15, e1 = (sy - b1) / 15;\n      const glow = 0.085 * (exp(-e0 * e0 * 0.5) + exp(-e1 * e1 * 0.5));\n      // How much pore is round this LED, 0..1 over its 3x3 neighbourhood.\n      let pv = 0;\n      for (let yy = max(0, y - 1); yy \u003c= min(H - 1, y + 1); yy++) for (let xx = max(0, x - 1), j = yy * W + xx; xx \u003c= min(W - 1, x + 1); xx++, j++) pv += pm[j];\n      pv /= 9;\n      // A pore holds more colour and sits a little deeper. A fresh dab is\n      // wet for a moment: its colour reads deeper and the base a touch\n      // brighter, then it dries back.\n      const ac = sqrt(cl(A[i], 0, 1)), wet = sh[i];\n      const a = min(1, ac * op * (1 + 0.45 * wet) + 0.45 * pv);\n      const l = 1 + glow + 0.08 * wet - dip * pv + gs * AMP[i] * (ODD[i] ? -0.5 : 0.5);\n      display.setPixel(x, y, (col[0] + (col[3] - col[0]) * a) * l, (col[1] + (col[4] - col[1]) * a) * l, (col[2] + (col[5] - col[2]) * a) * l);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower."},{"name":"Coverage","min":0,"max":1,"about":"How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab."},{"name":"Grain","min":0,"max":1,"about":"How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish."}],"start":[0,2,0,0.06],"measures":{"motion":0.0318,"detail":0.1277,"edges":0.0012,"complexity":1.8672,"coverage":1,"colour":0.1441,"drift":0.0382},"knobResponse":[0.095,0.0521,0.043,0.0383]},{"slug":"sprout","title":"Sprout","family":"growth","round":1,"note":"한 LED 씩 자라는 픽셀 들꽃밭이에요. 키 큰 접시꽃 둘이 패널 위쪽까지 올라가 꽃대 아래부터 피어요. 시든 꽃잎은 한 점씩 떨어져 발치에 쌓이고, 시드는 포기 곁에서 새 싹이 올라와요.","idea":"Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.","buttons":"K1 tap sows a seed now.","code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","layer":{"id":"layer-sprout","type":"code","name":"sprout","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The flower colour; each plant takes a shade either side of it."},{"name":"Grow","min":0.25,"max":6,"about":"How fast the tips climb, and with it how soon a plant flowers, withers and makes room."},{"name":"Branches","min":3,"max":14,"about":"How many tips a plant may have, from a stem with two side shoots to a small tree."},{"name":"Wind","min":-1,"max":1,"about":"Leans new growth and sways the tops; left of centre it blows the other way."}],"start":[0,2,3,0.06],"measures":{"motion":0.0426,"detail":0.1141,"edges":0.9949,"complexity":0.1635,"coverage":0.1685,"colour":0.2652,"drift":0.0313},"knobResponse":[0.0448,0.119,0.1279,0.0982]},{"slug":"stadium-billiard","title":"Stadium Billiard","family":"physics","round":28,"note":"공 이백 개가 방향을 1000분의 3 라디안 안에서만 달리해 한 점에서 흰 구슬 하나로 떠나요. 패널만 한 부니모비치 경기장의 둥근 끝이 구슬을 무지개 선으로 늘이고 접어서, 몇 초 만에 공들이 기체처럼 판을 채워요. K3 을 돌리면 탁자가 원이 되어 공이 흩어지지 않고, 누르면 새 무리가 떠나요.","idea":"Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.","buttons":"K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.","code":"// ===== Patternflow pattern =====\n// Title:   Stadium Billiard\n// Family:  physics\n// Idea:    Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Bunimovich stadium (Leonid Bunimovich, 1974), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1\n//\n// Knob 1: Hue. Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back.\n// Knob 2: Speed. At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots.\n// Knob 3: Round. At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up.\n// Knob 4: Trail. How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it.\n// Buttons: K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64, R = 32;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two hundred balls, launched with headings spread over FAN radians. VEL\n// LEDs a second per unit of Speed; TAU the shortest trail's time constant.\n// After CYCLE LEDs of flight the gas gathers for GATHER seconds and a new\n// bunch leaves. The cloth and its edge sit just under the 24/255 an LED\n// needs to count as lit, so the table shows on the panel as a faint shape.\nconst NB = 200;\nconst FAN = 3e-3, VEL = 62.5, TAU = 0.035;\nconst CYCLE = 1900, GATHER = 0.9;\nconst CLOTH = 0.075, RIM = 0.094;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nfunction inside(a, x, y, m) {\n  if (abs(y) \u003c= a) return abs(x) \u003c= R - m;\n  const cy = y > 0 ? a : -a;\n  return x * x + (y - cy) * (y - cy) \u003c= (R - m) * (R - m);\n}\n\n// Where along (dx, dy) a ball at (x, y) meets the wall, and the wall's\n// normal there.\nconst HIT = [0, 0, 0];\nfunction hit(a, x, y, dx, dy) {\n  let t = Infinity, nx = 0, ny = 0;\n  if (dx > 1e-12) {\n    const u = (R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = 1), (ny = 0);\n  } else if (dx \u003c -1e-12) {\n    const u = (-R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = -1), (ny = 0);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    const cy = s * a, py = y - cy, b = x * dx + py * dy, c = x * x + py * py - R * R, d = b * b - c;\n    if (d \u003c 0) continue;\n    const u = -b + sqrt(d);\n    if (u \u003c= 1e-9 || u >= t) continue;\n    const hy = y + u * dy - cy;\n    if (s * hy \u003c -1e-6) continue;\n    t = u;\n    nx = (x + u * dx) / R;\n    ny = hy / R;\n  }\n  HIT[0] = t;\n  HIT[1] = nx;\n  HIT[2] = ny;\n}\n\n// Lights the LEDs a ball passes between (x0, y0) and (x1, y1), each once,\n// w0 at the start fading up to w1 at the end.\nfunction trail(P, i, x0, y0, x1, y1, w0, w1) {\n  const n = max(1, ceil(sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)) / 0.6)), buf = P.buf, c = i * 3;\n  const cr = P.col[c], cg = P.col[c + 1], cb = P.col[c + 2];\n  for (let j = 1; j \u003c= n; j++) {\n    const t = j / n, X = floor(x0 + (x1 - x0) * t + CX), Y = floor(y0 + (y1 - y0) * t + CY);\n    const p = cl(Y, 0, H - 1) * W + cl(X, 0, W - 1);\n    if (p === P.lastp) continue;\n    P.lastp = p;\n    const w = w0 + (w1 - w0) * t, q = p * 3;\n    buf[q] += cr * w;\n    buf[q + 1] += cg * w;\n    buf[q + 2] += cb * w;\n  }\n}\n\n// Ball i flies s LEDs, bouncing off the walls exactly.\nfunction fly(P, i, s, w0, w1) {\n  const a = P.a;\n  let x = P.x[i], y = P.y[i], dx = P.dx[i], dy = P.dy[i], done = 0;\n  for (let k = 0; k \u003c 24 && done \u003c s; k++) {\n    hit(a, x, y, dx, dy);\n    // Every ray from inside meets the wall; a ball that finds none has been\n    // left outside, and goes back to the middle.\n    if (HIT[0] === Infinity && !inside(a, x, y, -0.5)) (x = 0), (y = 0);\n    const bounce = HIT[0] \u003c s - done, t = bounce ? HIT[0] : s - done;\n    const x1 = x + t * dx, y1 = y + t * dy;\n    trail(P, i, x, y, x1, y1, w0 + ((w1 - w0) * done) / s, w0 + ((w1 - w0) * (done + t)) / s);\n    x = x1;\n    y = y1;\n    done = bounce ? done + t : s;\n    if (bounce) {\n      const nx = HIT[1], ny = HIT[2], d = dx * nx + dy * ny;\n      dx -= 2 * d * nx;\n      dy -= 2 * d * ny;\n    }\n  }\n  P.x[i] = x;\n  P.y[i] = y;\n  P.dx[i] = dx;\n  P.dy[i] = dy;\n}\n\n// How far apart the two edge balls of a bunch launched from (x, y) at\n// angle th are after flying s LEDs.\nfunction split(a, x, y, th, s) {\n  const e = [];\n  for (const o of [-FAN / 2, FAN / 2]) {\n    let px = x, py = y, dx = cos(th + o), dy = sin(th + o), done = 0;\n    for (let k = 0; k \u003c 200 && done \u003c s; k++) {\n      hit(a, px, py, dx, dy);\n      if (HIT[0] >= s - done) {\n        px += (s - done) * dx;\n        py += (s - done) * dy;\n        break;\n      }\n      px += HIT[0] * dx;\n      py += HIT[0] * dy;\n      done += HIT[0];\n      const d = dx * HIT[1] + dy * HIT[2];\n      dx -= 2 * d * HIT[1];\n      dy -= 2 * d * HIT[2];\n    }\n    e.push(px, py);\n  }\n  return sqrt((e[0] - e[2]) ** 2 + (e[1] - e[3]) ** 2);\n}\n\n// A new launch: of sixteen spots and headings, the one whose bunch holds\n// together for the first 250 LEDs of flight and is furthest apart after 400\n// and 550, two and three and a half seconds at the opening speed. Headings\n// stay at least 30 degrees off the bouncing-ball orbits that run straight\n// across between the flat sides and take their time to come apart.\nfunction pick(P) {\n  const a = P.a;\n  let best = [0, 0, PI / 3], bd = -2;\n  for (let k = 0; k \u003c 16; k++) {\n    const x = (Math.random() * 2 - 1) * 20, y = (Math.random() * 2 - 1) * (a + 16);\n    if (!inside(a, x, y, 6)) continue;\n    let th = (0.17 + Math.random() * 0.3) * PI;\n    if (Math.random() \u003c 0.5) th = -th;\n    if (Math.random() \u003c 0.5) th = PI - th;\n    const d = a \u003c 4 ? 0 : split(a, x, y, th, 250) \u003c 6 ? split(a, x, y, th, 400) + split(a, x, y, th, 550) : -1;\n    if (d > bd) (bd = d), (best = [x, y, th]);\n  }\n  return best;\n}\n\nfunction launch(P, x, y, th) {\n  if (!inside(P.a, x, y, 1)) (x = 0), (y = 0);\n  for (let i = 0; i \u003c NB; i++) {\n    const t = th + FAN * (i / (NB - 1) - 0.5);\n    P.x[i] = x;\n    P.y[i] = y;\n    P.dx[i] = cos(t);\n    P.dy[i] = sin(t);\n  }\n  P.run = 0;\n  P.g = -1;\n}\n\n// The cloth: 1 on the table, 2 on its edge, 0 in the corners outside it.\nfunction table(P) {\n  const a = P.a, m = P.cloth;\n  for (let p = 0; p \u003c N; p++) m[p] = inside(a, (p % W) + 0.5 - CX, ((p / W) | 0) + 0.5 - CY, 0) ? 1 : 0;\n  const put = (x, y) => (m[cl(floor(y + CY), 0, H - 1) * W + cl(floor(x + CX), 0, W - 1)] = 2);\n  for (let y = -a; y \u003c= a; y += 0.5) put(-R + 0.01, y), put(R - 0.01, y);\n  for (let k = 0; k \u003c= 400; k++) {\n    const t = (k / 400) * PI, x = R * cos(t) * 0.9997, y = R * sin(t) * 0.9997;\n    put(x, a + y);\n    put(x, -a - y);\n  }\n}\n\nexport function setup(params) {\n  const F64 = (n) => new Float64Array(n);\n  params.s = {\n    x: F64(NB), y: F64(NB), dx: F64(NB), dy: F64(NB), gx: F64(NB), gy: F64(NB),\n    col: new Float32Array(NB * 3), buf: new Float32Array(N * 3), img: new Float32Array(N * 3),\n    a: 32, cloth: new Uint8Array(N), run: 0, g: -1, L: null, lastp: -1, hue: NaN, tint: [0, 0, 0, 0, 0, 0],\n  };\n  table(params.s);\n  launch(params.s, -19.9, 11.2, 2.389);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const v = VEL * cl(k[1], 0.2, 3), tr = cl(k[3], 0, 1), tau = TAU + 2.2 * tr * tr;\n  const f = exp(-d / tau), B = min(1, 0.07 / tau);\n  // Each ball keeps its place in the fan as a colour, six tenths of the\n  // wheel from one edge to the other, so the bead is white where they all\n  // overlap and the line it stretches into is a rainbow. The cloth turns\n  // from teal to violet and back and is never a dim orange, which reads brown.\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    for (let i = 0; i \u003c NB; i++) hsv(k[0] + 0.5 + 0.6 * (i / (NB - 1) - 0.5), 1, 1, P.col, i * 3);\n    const c = 0.52 + 0.28 * sin(PI * k[0]) ** 2;\n    hsv(c, 0.75, CLOTH, P.tint, 0);\n    hsv(c, 0.6, RIM, P.tint, 3);\n  }\n\n  // The table: two half circles of radius 32 joined by straight sides 2a long.\n  const a = 32 * (1 - cl(k[2], 0, 1));\n  if (abs(a - P.a) > 1e-6) {\n    P.a = a;\n    table(P);\n    for (let i = 0; i \u003c NB; i++) {\n      let x = P.x[i], y = P.y[i];\n      if (inside(a, x, y, 0.01)) continue;\n      const cy = abs(y) \u003c= a ? y : y > 0 ? a : -a, ox = x, oy = y - cy, r = sqrt(ox * ox + oy * oy) || 1;\n      x = (ox / r) * (R - 0.02);\n      y = cy + (oy / r) * (R - 0.02);\n      const nx = ox / r, ny = oy / r, dd = P.dx[i] * nx + P.dy[i] * ny;\n      if (dd > 0) (P.dx[i] -= 2 * dd * nx), (P.dy[i] -= 2 * dd * ny);\n      P.x[i] = x;\n      P.y[i] = y;\n    }\n  }\n\n  const buf = P.buf;\n  for (let q = 0; q \u003c N * 3; q++) buf[q] *= f;\n  if (P.g >= 0 && !inside(a, P.L[0], P.L[1], 1)) (P.L[0] = 0), (P.L[1] = 0);\n\n  if (P.g \u003c 0 && ((input.btnPressed && input.btnPressed[0]) || P.run > CYCLE)) {\n    P.L = pick(P);\n    P.g = 0;\n    P.gx.set(P.x);\n    P.gy.set(P.y);\n  }\n  if (P.g >= 0) {\n    // Gathering: every ball runs straight to the next launch spot.\n    const u0 = P.g / GATHER, u1 = min(1, (P.g + d) / GATHER);\n    const e0 = u0 * u0 * (3 - 2 * u0), e1 = u1 * u1 * (3 - 2 * u1), [lx, ly, th] = P.L;\n    for (let i = 0; i \u003c NB; i++) {\n      const x0 = P.gx[i] + (lx - P.gx[i]) * e0, y0 = P.gy[i] + (ly - P.gy[i]) * e0;\n      const x1 = P.gx[i] + (lx - P.gx[i]) * e1, y1 = P.gy[i] + (ly - P.gy[i]) * e1;\n      P.lastp = -1;\n      trail(P, i, x0, y0, x1, y1, B * f, B);\n      P.x[i] = x1;\n      P.y[i] = y1;\n    }\n    P.g += d;\n    if (u1 >= 1) launch(P, lx, ly, th);\n  } else if (d > 0) {\n    const s = v * d;\n    for (let i = 0; i \u003c NB; i++) {\n      P.lastp = -1;\n      fly(P, i, s, B * f, B);\n    }\n    P.run += s;\n  }\n  // Where the whole bunch passes at once the light piles up; capped, the\n  // bead's tail is no longer than a lone ball's.\n  for (let q = 0; q \u003c N * 3; q++) if (buf[q] > 1.5) buf[q] = 1.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const img = P.img, col = P.col, t = P.tint, m = P.cloth, buf = P.buf;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const o = m[p] === 2 ? 3 : 0, c = m[p] ? 1 : 0;\n    img[q] = max(buf[q], t[o] * c);\n    img[q + 1] = max(buf[q + 1], t[o + 1] * c);\n    img[q + 2] = max(buf[q + 2], t[o + 2] * c);\n  }\n  for (let i = 0; i \u003c NB; i++) {\n    const q = (cl(floor(P.y[i] + CY), 0, H - 1) * W + cl(floor(P.x[i] + CX), 0, W - 1)) * 3, c = i * 3;\n    img[q] += col[c];\n    img[q + 1] += col[c + 1];\n    img[q + 2] += col[c + 2];\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, img[q] * 255) | 0, min(255, img[q + 1] * 255) | 0, min(255, img[q + 2] * 255) | 0);\n  }\n}\n","layer":{"id":"layer-stadium-billiard","type":"code","name":"stadium-billiard","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Stadium Billiard\n// Family:  physics\n// Idea:    Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Bunimovich stadium (Leonid Bunimovich, 1974), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1\n//\n// Knob 1: Hue. Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back.\n// Knob 2: Speed. At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots.\n// Knob 3: Round. At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up.\n// Knob 4: Trail. How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it.\n// Buttons: K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64, R = 32;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two hundred balls, launched with headings spread over FAN radians. VEL\n// LEDs a second per unit of Speed; TAU the shortest trail's time constant.\n// After CYCLE LEDs of flight the gas gathers for GATHER seconds and a new\n// bunch leaves. The cloth and its edge sit just under the 24/255 an LED\n// needs to count as lit, so the table shows on the panel as a faint shape.\nconst NB = 200;\nconst FAN = 3e-3, VEL = 62.5, TAU = 0.035;\nconst CYCLE = 1900, GATHER = 0.9;\nconst CLOTH = 0.075, RIM = 0.094;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nfunction inside(a, x, y, m) {\n  if (abs(y) \u003c= a) return abs(x) \u003c= R - m;\n  const cy = y > 0 ? a : -a;\n  return x * x + (y - cy) * (y - cy) \u003c= (R - m) * (R - m);\n}\n\n// Where along (dx, dy) a ball at (x, y) meets the wall, and the wall's\n// normal there.\nconst HIT = [0, 0, 0];\nfunction hit(a, x, y, dx, dy) {\n  let t = Infinity, nx = 0, ny = 0;\n  if (dx > 1e-12) {\n    const u = (R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = 1), (ny = 0);\n  } else if (dx \u003c -1e-12) {\n    const u = (-R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = -1), (ny = 0);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    const cy = s * a, py = y - cy, b = x * dx + py * dy, c = x * x + py * py - R * R, d = b * b - c;\n    if (d \u003c 0) continue;\n    const u = -b + sqrt(d);\n    if (u \u003c= 1e-9 || u >= t) continue;\n    const hy = y + u * dy - cy;\n    if (s * hy \u003c -1e-6) continue;\n    t = u;\n    nx = (x + u * dx) / R;\n    ny = hy / R;\n  }\n  HIT[0] = t;\n  HIT[1] = nx;\n  HIT[2] = ny;\n}\n\n// Lights the LEDs a ball passes between (x0, y0) and (x1, y1), each once,\n// w0 at the start fading up to w1 at the end.\nfunction trail(P, i, x0, y0, x1, y1, w0, w1) {\n  const n = max(1, ceil(sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)) / 0.6)), buf = P.buf, c = i * 3;\n  const cr = P.col[c], cg = P.col[c + 1], cb = P.col[c + 2];\n  for (let j = 1; j \u003c= n; j++) {\n    const t = j / n, X = floor(x0 + (x1 - x0) * t + CX), Y = floor(y0 + (y1 - y0) * t + CY);\n    const p = cl(Y, 0, H - 1) * W + cl(X, 0, W - 1);\n    if (p === P.lastp) continue;\n    P.lastp = p;\n    const w = w0 + (w1 - w0) * t, q = p * 3;\n    buf[q] += cr * w;\n    buf[q + 1] += cg * w;\n    buf[q + 2] += cb * w;\n  }\n}\n\n// Ball i flies s LEDs, bouncing off the walls exactly.\nfunction fly(P, i, s, w0, w1) {\n  const a = P.a;\n  let x = P.x[i], y = P.y[i], dx = P.dx[i], dy = P.dy[i], done = 0;\n  for (let k = 0; k \u003c 24 && done \u003c s; k++) {\n    hit(a, x, y, dx, dy);\n    // Every ray from inside meets the wall; a ball that finds none has been\n    // left outside, and goes back to the middle.\n    if (HIT[0] === Infinity && !inside(a, x, y, -0.5)) (x = 0), (y = 0);\n    const bounce = HIT[0] \u003c s - done, t = bounce ? HIT[0] : s - done;\n    const x1 = x + t * dx, y1 = y + t * dy;\n    trail(P, i, x, y, x1, y1, w0 + ((w1 - w0) * done) / s, w0 + ((w1 - w0) * (done + t)) / s);\n    x = x1;\n    y = y1;\n    done = bounce ? done + t : s;\n    if (bounce) {\n      const nx = HIT[1], ny = HIT[2], d = dx * nx + dy * ny;\n      dx -= 2 * d * nx;\n      dy -= 2 * d * ny;\n    }\n  }\n  P.x[i] = x;\n  P.y[i] = y;\n  P.dx[i] = dx;\n  P.dy[i] = dy;\n}\n\n// How far apart the two edge balls of a bunch launched from (x, y) at\n// angle th are after flying s LEDs.\nfunction split(a, x, y, th, s) {\n  const e = [];\n  for (const o of [-FAN / 2, FAN / 2]) {\n    let px = x, py = y, dx = cos(th + o), dy = sin(th + o), done = 0;\n    for (let k = 0; k \u003c 200 && done \u003c s; k++) {\n      hit(a, px, py, dx, dy);\n      if (HIT[0] >= s - done) {\n        px += (s - done) * dx;\n        py += (s - done) * dy;\n        break;\n      }\n      px += HIT[0] * dx;\n      py += HIT[0] * dy;\n      done += HIT[0];\n      const d = dx * HIT[1] + dy * HIT[2];\n      dx -= 2 * d * HIT[1];\n      dy -= 2 * d * HIT[2];\n    }\n    e.push(px, py);\n  }\n  return sqrt((e[0] - e[2]) ** 2 + (e[1] - e[3]) ** 2);\n}\n\n// A new launch: of sixteen spots and headings, the one whose bunch holds\n// together for the first 250 LEDs of flight and is furthest apart after 400\n// and 550, two and three and a half seconds at the opening speed. Headings\n// stay at least 30 degrees off the bouncing-ball orbits that run straight\n// across between the flat sides and take their time to come apart.\nfunction pick(P) {\n  const a = P.a;\n  let best = [0, 0, PI / 3], bd = -2;\n  for (let k = 0; k \u003c 16; k++) {\n    const x = (Math.random() * 2 - 1) * 20, y = (Math.random() * 2 - 1) * (a + 16);\n    if (!inside(a, x, y, 6)) continue;\n    let th = (0.17 + Math.random() * 0.3) * PI;\n    if (Math.random() \u003c 0.5) th = -th;\n    if (Math.random() \u003c 0.5) th = PI - th;\n    const d = a \u003c 4 ? 0 : split(a, x, y, th, 250) \u003c 6 ? split(a, x, y, th, 400) + split(a, x, y, th, 550) : -1;\n    if (d > bd) (bd = d), (best = [x, y, th]);\n  }\n  return best;\n}\n\nfunction launch(P, x, y, th) {\n  if (!inside(P.a, x, y, 1)) (x = 0), (y = 0);\n  for (let i = 0; i \u003c NB; i++) {\n    const t = th + FAN * (i / (NB - 1) - 0.5);\n    P.x[i] = x;\n    P.y[i] = y;\n    P.dx[i] = cos(t);\n    P.dy[i] = sin(t);\n  }\n  P.run = 0;\n  P.g = -1;\n}\n\n// The cloth: 1 on the table, 2 on its edge, 0 in the corners outside it.\nfunction table(P) {\n  const a = P.a, m = P.cloth;\n  for (let p = 0; p \u003c N; p++) m[p] = inside(a, (p % W) + 0.5 - CX, ((p / W) | 0) + 0.5 - CY, 0) ? 1 : 0;\n  const put = (x, y) => (m[cl(floor(y + CY), 0, H - 1) * W + cl(floor(x + CX), 0, W - 1)] = 2);\n  for (let y = -a; y \u003c= a; y += 0.5) put(-R + 0.01, y), put(R - 0.01, y);\n  for (let k = 0; k \u003c= 400; k++) {\n    const t = (k / 400) * PI, x = R * cos(t) * 0.9997, y = R * sin(t) * 0.9997;\n    put(x, a + y);\n    put(x, -a - y);\n  }\n}\n\nexport function setup(params) {\n  const F64 = (n) => new Float64Array(n);\n  params.s = {\n    x: F64(NB), y: F64(NB), dx: F64(NB), dy: F64(NB), gx: F64(NB), gy: F64(NB),\n    col: new Float32Array(NB * 3), buf: new Float32Array(N * 3), img: new Float32Array(N * 3),\n    a: 32, cloth: new Uint8Array(N), run: 0, g: -1, L: null, lastp: -1, hue: NaN, tint: [0, 0, 0, 0, 0, 0],\n  };\n  table(params.s);\n  launch(params.s, -19.9, 11.2, 2.389);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const v = VEL * cl(k[1], 0.2, 3), tr = cl(k[3], 0, 1), tau = TAU + 2.2 * tr * tr;\n  const f = exp(-d / tau), B = min(1, 0.07 / tau);\n  // Each ball keeps its place in the fan as a colour, six tenths of the\n  // wheel from one edge to the other, so the bead is white where they all\n  // overlap and the line it stretches into is a rainbow. The cloth turns\n  // from teal to violet and back and is never a dim orange, which reads brown.\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    for (let i = 0; i \u003c NB; i++) hsv(k[0] + 0.5 + 0.6 * (i / (NB - 1) - 0.5), 1, 1, P.col, i * 3);\n    const c = 0.52 + 0.28 * sin(PI * k[0]) ** 2;\n    hsv(c, 0.75, CLOTH, P.tint, 0);\n    hsv(c, 0.6, RIM, P.tint, 3);\n  }\n\n  // The table: two half circles of radius 32 joined by straight sides 2a long.\n  const a = 32 * (1 - cl(k[2], 0, 1));\n  if (abs(a - P.a) > 1e-6) {\n    P.a = a;\n    table(P);\n    for (let i = 0; i \u003c NB; i++) {\n      let x = P.x[i], y = P.y[i];\n      if (inside(a, x, y, 0.01)) continue;\n      const cy = abs(y) \u003c= a ? y : y > 0 ? a : -a, ox = x, oy = y - cy, r = sqrt(ox * ox + oy * oy) || 1;\n      x = (ox / r) * (R - 0.02);\n      y = cy + (oy / r) * (R - 0.02);\n      const nx = ox / r, ny = oy / r, dd = P.dx[i] * nx + P.dy[i] * ny;\n      if (dd > 0) (P.dx[i] -= 2 * dd * nx), (P.dy[i] -= 2 * dd * ny);\n      P.x[i] = x;\n      P.y[i] = y;\n    }\n  }\n\n  const buf = P.buf;\n  for (let q = 0; q \u003c N * 3; q++) buf[q] *= f;\n  if (P.g >= 0 && !inside(a, P.L[0], P.L[1], 1)) (P.L[0] = 0), (P.L[1] = 0);\n\n  if (P.g \u003c 0 && ((input.btnPressed && input.btnPressed[0]) || P.run > CYCLE)) {\n    P.L = pick(P);\n    P.g = 0;\n    P.gx.set(P.x);\n    P.gy.set(P.y);\n  }\n  if (P.g >= 0) {\n    // Gathering: every ball runs straight to the next launch spot.\n    const u0 = P.g / GATHER, u1 = min(1, (P.g + d) / GATHER);\n    const e0 = u0 * u0 * (3 - 2 * u0), e1 = u1 * u1 * (3 - 2 * u1), [lx, ly, th] = P.L;\n    for (let i = 0; i \u003c NB; i++) {\n      const x0 = P.gx[i] + (lx - P.gx[i]) * e0, y0 = P.gy[i] + (ly - P.gy[i]) * e0;\n      const x1 = P.gx[i] + (lx - P.gx[i]) * e1, y1 = P.gy[i] + (ly - P.gy[i]) * e1;\n      P.lastp = -1;\n      trail(P, i, x0, y0, x1, y1, B * f, B);\n      P.x[i] = x1;\n      P.y[i] = y1;\n    }\n    P.g += d;\n    if (u1 >= 1) launch(P, lx, ly, th);\n  } else if (d > 0) {\n    const s = v * d;\n    for (let i = 0; i \u003c NB; i++) {\n      P.lastp = -1;\n      fly(P, i, s, B * f, B);\n    }\n    P.run += s;\n  }\n  // Where the whole bunch passes at once the light piles up; capped, the\n  // bead's tail is no longer than a lone ball's.\n  for (let q = 0; q \u003c N * 3; q++) if (buf[q] > 1.5) buf[q] = 1.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const img = P.img, col = P.col, t = P.tint, m = P.cloth, buf = P.buf;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const o = m[p] === 2 ? 3 : 0, c = m[p] ? 1 : 0;\n    img[q] = max(buf[q], t[o] * c);\n    img[q + 1] = max(buf[q + 1], t[o + 1] * c);\n    img[q + 2] = max(buf[q + 2], t[o + 2] * c);\n  }\n  for (let i = 0; i \u003c NB; i++) {\n    const q = (cl(floor(P.y[i] + CY), 0, H - 1) * W + cl(floor(P.x[i] + CX), 0, W - 1)) * 3, c = i * 3;\n    img[q] += col[c];\n    img[q + 1] += col[c + 1];\n    img[q + 2] += col[c + 2];\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, img[q] * 255) | 0, min(255, img[q + 1] * 255) | 0, min(255, img[q + 2] * 255) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots."},{"name":"Round","min":0,"max":1,"about":"At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up."},{"name":"Trail","min":0,"max":1,"about":"How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it."}],"start":[0,2,0,0.06],"measures":{"motion":2.3616,"detail":0.0707,"edges":0.5768,"complexity":0.586,"coverage":0.1863,"colour":0.2492,"drift":0.1225},"knobResponse":[0.0382,0.064,0.0378,0.0449]},{"slug":"stained-glass","title":"Stained Glass","family":"glass","round":18,"note":"고딕 첨두 창이 세운 패널을 다 채워요. 뾰족한 머리의 장미창과 몸통의 생명나무가 검은 납선에 끼운 보석빛 유리 조각으로 짜여 있고, 창 뒤로 해가 지나가면 그 쪽 조각이 희게 타오르고 구름 그림자가 지나가면 어두워져요. K3 은 유리를 자른 크기라서, 돌리면 테두리 네모와 마름모가 잘아지고 장미 꽃잎이 여덟 장에서 열두 장이 돼요.","idea":"A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","layer":{"id":"layer-stained-glass","type":"code","name":"stained-glass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glass","min":0,"max":1,"about":"Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves."},{"name":"Pieces","min":1,"max":4,"about":"How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8."},{"name":"Clouds","min":0,"max":1,"about":"At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches."}],"start":[0,2,1,0.06],"measures":{"motion":0.0274,"detail":0.1501,"edges":0.9911,"complexity":1.9492,"coverage":0.4248,"colour":0.2313,"drift":0.0531},"knobResponse":[0.1334,0.0459,0.0844,0.0693]},{"slug":"star-trails","title":"Star Trails","family":"celestial","round":12,"note":"삼각대에 세운 카메라가 셔터를 열어 둔 사이 하늘이 돌아서, 별마다 북극 둘레에 제 색의 호를 그려요. 능선 아래에는 랜턴을 켠 텐트가 있고, 가끔 떨어지는 별똥별은 궤적만큼 사진에 남아요. K1 을 누르면 별똥별이 하나 더 떨어져요.","idea":"A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.","buttons":"K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","layer":{"id":"layer-star-trails","type":"code","name":"star-trails","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Facing","min":-1,"max":1,"about":"Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes."},{"name":"Latitude","min":-1,"max":1,"about":"Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground."},{"name":"Exposure","min":0,"max":1,"about":"How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles."}],"start":[0,2,0,0.06],"measures":{"motion":0.019,"detail":0.0909,"edges":0.5036,"complexity":1.5537,"coverage":0.563,"colour":0.1007,"drift":0.036},"knobResponse":[0.2496,0.0367,0.1859,0.2144]},{"slug":"steiner-chain","title":"Steiner Chain","family":"geometry","round":39,"note":"위에서는 고리 안의 같은 원 여섯이 통째로 돌고, 아래는 그 사슬을 반전한 그림이라 원이 넓은 쪽을 지나며 부풀고 좁은 쪽에서 줄어요. 원마다 위아래가 같은 색이고, 어디서 시작해도 사슬이 닫히는 슈타이너의 포리즘이 접점의 흰 불꽃으로 보여요.","idea":"A ring of circles each touching its two neighbours and the two circles that hold it turns in the top square, rigid and equal, while the bottom square shows the same ring inverted in a point outside it, the circles swelling as they pass the wide side and shrinking through the narrow one, each in its own colour in both squares and every touch lit, so wherever the chain starts it always closes.","buttons":"K1 tap lays the chain again from where it stands, one circle at a time, and the last one closes the gap with a flash.","code":"// ===== Patternflow pattern =====\n// Title:   Steiner Chain\n// Family:  geometry\n// Idea:    A ring of circles each touching its two neighbours and the two circles that hold it turns in the top square, rigid and equal, while the bottom square shows the same ring inverted in a point outside it, the circles swelling as they pass the wide side and shrinking through the narrow one, each in its own colour in both squares and every touch lit, so wherever the chain starts it always closes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Steiner's porism (Jakob Steiner, 1826), shown through circle inversion, pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Circles=6..12, Speed=0.2..3, Turns=1..4, Offset=0..1\n//\n// Knob 1: Circles. How many circles the chain holds, 6 to 12, each in its own colour, hues spaced evenly round the wheel. At 6 the inner circle is a third of the outer one across and the chain circles are 10 LEDs in radius in the top square; at 12 the inner circle is 0.59 of the outer and the circles are beads 6.2 LEDs in radius.\n// Knob 2: Speed. At 2 the chain turns once in 30 seconds, and a fresh start lays it circle by circle in 1.5 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Turns. How many times the chain winds round before it closes, 1 to 4, at most (Circles - 1) / 2. Neighbours then stand 360 times Turns over Circles degrees apart, sin(180 Turns / Circles) = (1 - inner) / (1 + inner) fixes the inner circle, and the circles overlap in a rosette round it: 7 circles at 2 turns leave it 0.12 of the outer one across, at 3 turns 0.013. Where Turns and Circles share a factor the circles fall into that many chains, each closed: 6 circles at 2 turns are two chains of 3.\n// Knob 4: Offset. How near the chain the point of the inversion sits, and with it how far off-centre the inner circle of the bottom square stands: 12 LEDs above the centre at the start, where a circle passing the wide side at the bottom is 3.4 times as wide as one passing the narrow side; 3 times at 0, and 24 times at 1, where the inner circle stands 25 LEDs up, nearly touching the outer one, and the circles squeezing past it are beads 2 LEDs across.\n// Buttons: K1 tap lays the chain again from where it stands, one circle at a time, and the last one closes the gap with a flash.\n\nconst W = 64, H = 128;\nconst { floor, min, max, sqrt, sin, cos, exp, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Each square's centre and the outer circle's radius, in LEDs; pixel centres at x + 0.5.\nconst CX = 32, CY = [32, 96], RPX = 30.4;\n// The inversion point lies on this ray from the centre of the concentric\n// picture, above it. A point near the inversion point images far away, so\n// the wide side of the bottom square is at the bottom.\nconst PSI = -PI / 2;\n// Seconds per turn of the chain at Speed 2, and to lay it.\nconst TURN = 30, LAY = 1.5;\n// Opening hue of circle 0.\nconst H0 = 0.55;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nconst gcd = (a, b) => (b ? gcd(b, a % b) : a);\n\nexport function setup(params) {\n  params.s = {\n    n: 6, m: 1, q: 3.4, phi: 0, lay: 0, flash: [], begun: false,\n    // Per square: circles as x, y, r (the outer, the inner, then the chain in\n    // the order it is laid); each touch as its point x, y and the pair of\n    // circles that meet there.\n    C: [new Float64Array(3 * 14), new Float64Array(3 * 14)],\n    T: [new Float64Array(2 * 40), new Float64Array(2 * 40)], nt: 0, tri: [],\n    A: new Float32Array(3 * W * H), col: [0, 0, 0], fil: [0, 0, 0],\n  };\n}\n\n// The inversion point's distance a > 1 from the centre, in units of the\n// outer radius, at which a chain circle passing the near side images q times\n// as wide as one passing the far side: the gaps between the two circles on\n// the line through the point image to (1 - rho) / ((a - 1)(a - rho)) and\n// (1 - rho) / ((a + 1)(a + rho)), and their ratio is q.\nfunction dist(q, rho) {\n  const A = q - 1, B = (q + 1) * (1 + rho), C = (q - 1) * rho;\n  return (B + sqrt(B * B - 4 * A * C)) / (2 * A);\n}\n\n// The chain at start angle phi: circle i of sub-chain j, step k, centred on\n// the ring at angle phi + 2 pi (k m + j) / n. Square 0 is the concentric\n// picture; square 1 its image in the unit circle about the point a, scaled\n// so the outer circle's image is RPX across and centred.\nfunction geometry(S) {\n  const { n, m } = S, s = sin((PI * m) / n), rho = (1 - s) / (1 + s), r = (1 - rho) / 2, d = (1 + rho) / 2;\n  const g = gcd(n, m), len = n / g, a = dist(S.q, rho), ax = a * cos(PSI), ay = a * sin(PSI);\n  const inv = (x, y) => {\n    const u = x - ax, v = y - ay, k = 1 / (u * u + v * v);\n    return [ax + u * k, ay + v * k];\n  };\n  const invC = (x, y, rr) => {\n    const u = x - ax, v = y - ay, D = u * u + v * v - rr * rr;\n    return [ax + u / D, ay + v / D, rr / Math.abs(D)];\n  };\n  // Model circles: 0 the outer, 1 the inner, then the chain.\n  const M = [[0, 0, 1], [0, 0, rho]];\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const t = S.phi + (TAU * (k * m + j)) / n;\n      M.push([d * cos(t), d * sin(t), r]);\n    }\n  const O = invC(0, 0, 1), sc = RPX / O[2];\n  const C0 = S.C[0], C1 = S.C[1];\n  for (let i = 0; i \u003c M.length; i++) {\n    const [x, y, rr] = M[i], [X, Y, R] = invC(x, y, rr);\n    C0[3 * i] = CX + RPX * x;\n    C0[3 * i + 1] = CY[0] + RPX * y;\n    C0[3 * i + 2] = RPX * rr;\n    C1[3 * i] = CX + sc * (X - O[0]);\n    C1[3 * i + 1] = CY[1] + sc * (Y - O[1]);\n    C1[3 * i + 2] = sc * R;\n  }\n  // The touches: each circle with the outer and the inner, and each with\n  // the next in its sub-chain, the last with the first.\n  let nt = 0;\n  const T0 = S.T[0], T1 = S.T[1], tri = [];\n  const put = (x, y, a, b) => {\n    const [X, Y] = inv(x, y);\n    T0[2 * nt] = CX + RPX * x;\n    T0[2 * nt + 1] = CY[0] + RPX * y;\n    T1[2 * nt] = CX + sc * (X - O[0]);\n    T1[2 * nt + 1] = CY[1] + sc * (Y - O[1]);\n    tri.push([a, b]);\n    nt++;\n  };\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const i = 2 + j * len + k, nx = 2 + j * len + ((k + 1) % len);\n      const [x, y] = M[i], [x2, y2] = M[nx], ux = x / d, uy = y / d;\n      put(ux, uy, i, 0);\n      put(rho * ux, rho * uy, i, 1);\n      put((x + x2) / 2, (y + y2) / 2, i, nx);\n    }\n  S.nt = nt;\n  S.tri = tri;\n  S.model = M;\n  S.rho = rho;\n  S.a = a;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [6, 2, 1, 0.06], dd = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[0], 6, 12)), rate = cl(k[1], 0.2, 3) / 2;\n  const m = max(1, min(round(cl(k[2], 1, 4)), floor((n - 1) / 2)));\n  S.q = 3 * 8 ** cl(k[3], 0, 1);\n  if (n !== S.n || m !== S.m) {\n    S.n = n;\n    S.m = m;\n    S.flash = [];\n  }\n  if (!S.begun) {\n    S.begun = true;\n    S.lay = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lay = 0;\n    S.flash = [];\n  }\n  const wasLaid = S.lay >= LAY;\n  S.lay += dd * rate;\n  S.phi += (dd * rate * TAU) / TURN;\n  if (!wasLaid && S.lay >= LAY) S.flash.push(0);\n  for (let i = 0; i \u003c S.flash.length; i++) S.flash[i] += dd * rate;\n  S.flash = S.flash.filter((f) => f \u003c 0.8);\n  geometry(S);\n}\n\n// How far circle i is laid, 0..1: they go down one after another.\nfunction shown(S, i) {\n  if (i \u003c 2) return 1;\n  return cl(((S.lay / LAY) * S.n - (i - 2)) * 1.5, 0, 1);\n}\n\n// Orange and yellow go brown and olive dimmed, so their discs are lit\n// brighter inside and paler.\nconst warm = (h) => {\n  const u = (h - floor(h) - 0.13) / 0.14;\n  return u * u \u003c 1 ? (1 - u * u) ** 2 : 0;\n};\n\nfunction disc(A, x0, y0, r, w, c, f, lift, lo, hi) {\n  const ext = r + 2, rr = max(r, 0.35);\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, D = sqrt(dx * dx + dy * dy);\n      if (D > ext) continue;\n      const u = min(1, D / rr), fill = cl(rr - D + 0.5, 0, 1), e = (D - rr) / 0.7;\n      // A soft lit disc: dim in the middle, rising toward a bright rim, a\n      // glow on the upper left where the light comes from.\n      const hx = dx + 0.42 * rr, hy = dy + 0.42 * rr, glow = exp(-(hx * hx + hy * hy) / (0.22 * rr * rr + 0.6));\n      const vf = w * fill * (0.2 + 0.28 * u * u + 0.32 * glow) * lift;\n      let v = 0.85 * exp(-e * e);\n      if (r \u003c 1.5) v += (1.5 - r) * 0.5 * fill;\n      v *= w;\n      // Screen blend, so where wound chains overlap the lenses show without\n      // washing out to white.\n      const p = 3 * (y * W + x);\n      A[p] = 1 - (1 - A[p]) * (1 - min(1, c[0] * v + f[0] * vf));\n      A[p + 1] = 1 - (1 - A[p + 1]) * (1 - min(1, c[1] * v + f[1] * vf));\n      A[p + 2] = 1 - (1 - A[p + 2]) * (1 - min(1, c[2] * v + f[2] * vf));\n    }\n  }\n}\n\nfunction ring(A, x0, y0, r, lv, lo, hi) {\n  const ext = r + 2;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, e = (sqrt(dx * dx + dy * dy) - r) / 0.6;\n      if (e > 4 || e \u003c -4) continue;\n      const v = lv * exp(-e * e), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nfunction dot(A, x0, y0, s, lv, lo, hi) {\n  const ext = 3 * s;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, v = lv * exp(-(dx * dx + dy * dy) / (2 * s * s)), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { A, col, fil, n } = S;\n  A.fill(0);\n  for (let sq = 0; sq \u003c 2; sq++) {\n    const C = S.C[sq], T = S.T[sq], lo = sq * 64, hi = lo + 63;\n    ring(A, C[0], C[1], C[2], 0.5, lo, hi);\n    ring(A, C[3], C[4], C[5], 0.5, lo, hi);\n    for (let i = 2; i \u003c n + 2; i++) {\n      const w = shown(S, i);\n      if (w \u003c= 0) continue;\n      const h = H0 + (i - 2) / n, wm = warm(h);\n      hsv(h, 0.8, 1, col);\n      hsv(h, 0.74 - 0.3 * wm, 1, fil);\n      // A wound chain stacks its discs Turns deep, so each is filled fainter.\n      disc(A, C[3 * i], C[3 * i + 1], C[3 * i + 2], w, col, fil, (1 + 0.9 * wm) * S.m ** -0.7, lo, hi);\n    }\n    // Every touch, lit once both its circles are laid; small ones smaller.\n    for (let t = 0; t \u003c S.nt; t++) {\n      const [a, b] = S.tri[t], w = min(shown(S, a), shown(S, b));\n      if (w \u003c 1) continue;\n      const rr = min(C[3 * a + 2], b > 1 ? C[3 * b + 2] : 99);\n      dot(A, T[2 * t], T[2 * t + 1], cl(0.25 * rr, 0.45, 0.8), 0.75 / S.m, lo, hi);\n    }\n    // The closing: the touch between the last circle laid and the first.\n    for (const f of S.flash) {\n      const len = n / gcd(n, S.m), i = 2 + len - 1, t = 3 * (i - 2) + 2, e = 1 - f / 0.8;\n      dot(A, T[2 * t], T[2 * t + 1], 1.4 + 2.5 * f, 1.6 * e * e, lo, hi);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = 3 * (y * W + x);\n      display.setPixel(x, y, round(255 * min(1, A[p])), round(255 * min(1, A[p + 1])), round(255 * min(1, A[p + 2])));\n    }\n}\n","layer":{"id":"layer-steiner-chain","type":"code","name":"steiner-chain","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Steiner Chain\n// Family:  geometry\n// Idea:    A ring of circles each touching its two neighbours and the two circles that hold it turns in the top square, rigid and equal, while the bottom square shows the same ring inverted in a point outside it, the circles swelling as they pass the wide side and shrinking through the narrow one, each in its own colour in both squares and every touch lit, so wherever the chain starts it always closes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Steiner's porism (Jakob Steiner, 1826), shown through circle inversion, pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Circles=6..12, Speed=0.2..3, Turns=1..4, Offset=0..1\n//\n// Knob 1: Circles. How many circles the chain holds, 6 to 12, each in its own colour, hues spaced evenly round the wheel. At 6 the inner circle is a third of the outer one across and the chain circles are 10 LEDs in radius in the top square; at 12 the inner circle is 0.59 of the outer and the circles are beads 6.2 LEDs in radius.\n// Knob 2: Speed. At 2 the chain turns once in 30 seconds, and a fresh start lays it circle by circle in 1.5 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Turns. How many times the chain winds round before it closes, 1 to 4, at most (Circles - 1) / 2. Neighbours then stand 360 times Turns over Circles degrees apart, sin(180 Turns / Circles) = (1 - inner) / (1 + inner) fixes the inner circle, and the circles overlap in a rosette round it: 7 circles at 2 turns leave it 0.12 of the outer one across, at 3 turns 0.013. Where Turns and Circles share a factor the circles fall into that many chains, each closed: 6 circles at 2 turns are two chains of 3.\n// Knob 4: Offset. How near the chain the point of the inversion sits, and with it how far off-centre the inner circle of the bottom square stands: 12 LEDs above the centre at the start, where a circle passing the wide side at the bottom is 3.4 times as wide as one passing the narrow side; 3 times at 0, and 24 times at 1, where the inner circle stands 25 LEDs up, nearly touching the outer one, and the circles squeezing past it are beads 2 LEDs across.\n// Buttons: K1 tap lays the chain again from where it stands, one circle at a time, and the last one closes the gap with a flash.\n\nconst W = 64, H = 128;\nconst { floor, min, max, sqrt, sin, cos, exp, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Each square's centre and the outer circle's radius, in LEDs; pixel centres at x + 0.5.\nconst CX = 32, CY = [32, 96], RPX = 30.4;\n// The inversion point lies on this ray from the centre of the concentric\n// picture, above it. A point near the inversion point images far away, so\n// the wide side of the bottom square is at the bottom.\nconst PSI = -PI / 2;\n// Seconds per turn of the chain at Speed 2, and to lay it.\nconst TURN = 30, LAY = 1.5;\n// Opening hue of circle 0.\nconst H0 = 0.55;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nconst gcd = (a, b) => (b ? gcd(b, a % b) : a);\n\nexport function setup(params) {\n  params.s = {\n    n: 6, m: 1, q: 3.4, phi: 0, lay: 0, flash: [], begun: false,\n    // Per square: circles as x, y, r (the outer, the inner, then the chain in\n    // the order it is laid); each touch as its point x, y and the pair of\n    // circles that meet there.\n    C: [new Float64Array(3 * 14), new Float64Array(3 * 14)],\n    T: [new Float64Array(2 * 40), new Float64Array(2 * 40)], nt: 0, tri: [],\n    A: new Float32Array(3 * W * H), col: [0, 0, 0], fil: [0, 0, 0],\n  };\n}\n\n// The inversion point's distance a > 1 from the centre, in units of the\n// outer radius, at which a chain circle passing the near side images q times\n// as wide as one passing the far side: the gaps between the two circles on\n// the line through the point image to (1 - rho) / ((a - 1)(a - rho)) and\n// (1 - rho) / ((a + 1)(a + rho)), and their ratio is q.\nfunction dist(q, rho) {\n  const A = q - 1, B = (q + 1) * (1 + rho), C = (q - 1) * rho;\n  return (B + sqrt(B * B - 4 * A * C)) / (2 * A);\n}\n\n// The chain at start angle phi: circle i of sub-chain j, step k, centred on\n// the ring at angle phi + 2 pi (k m + j) / n. Square 0 is the concentric\n// picture; square 1 its image in the unit circle about the point a, scaled\n// so the outer circle's image is RPX across and centred.\nfunction geometry(S) {\n  const { n, m } = S, s = sin((PI * m) / n), rho = (1 - s) / (1 + s), r = (1 - rho) / 2, d = (1 + rho) / 2;\n  const g = gcd(n, m), len = n / g, a = dist(S.q, rho), ax = a * cos(PSI), ay = a * sin(PSI);\n  const inv = (x, y) => {\n    const u = x - ax, v = y - ay, k = 1 / (u * u + v * v);\n    return [ax + u * k, ay + v * k];\n  };\n  const invC = (x, y, rr) => {\n    const u = x - ax, v = y - ay, D = u * u + v * v - rr * rr;\n    return [ax + u / D, ay + v / D, rr / Math.abs(D)];\n  };\n  // Model circles: 0 the outer, 1 the inner, then the chain.\n  const M = [[0, 0, 1], [0, 0, rho]];\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const t = S.phi + (TAU * (k * m + j)) / n;\n      M.push([d * cos(t), d * sin(t), r]);\n    }\n  const O = invC(0, 0, 1), sc = RPX / O[2];\n  const C0 = S.C[0], C1 = S.C[1];\n  for (let i = 0; i \u003c M.length; i++) {\n    const [x, y, rr] = M[i], [X, Y, R] = invC(x, y, rr);\n    C0[3 * i] = CX + RPX * x;\n    C0[3 * i + 1] = CY[0] + RPX * y;\n    C0[3 * i + 2] = RPX * rr;\n    C1[3 * i] = CX + sc * (X - O[0]);\n    C1[3 * i + 1] = CY[1] + sc * (Y - O[1]);\n    C1[3 * i + 2] = sc * R;\n  }\n  // The touches: each circle with the outer and the inner, and each with\n  // the next in its sub-chain, the last with the first.\n  let nt = 0;\n  const T0 = S.T[0], T1 = S.T[1], tri = [];\n  const put = (x, y, a, b) => {\n    const [X, Y] = inv(x, y);\n    T0[2 * nt] = CX + RPX * x;\n    T0[2 * nt + 1] = CY[0] + RPX * y;\n    T1[2 * nt] = CX + sc * (X - O[0]);\n    T1[2 * nt + 1] = CY[1] + sc * (Y - O[1]);\n    tri.push([a, b]);\n    nt++;\n  };\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const i = 2 + j * len + k, nx = 2 + j * len + ((k + 1) % len);\n      const [x, y] = M[i], [x2, y2] = M[nx], ux = x / d, uy = y / d;\n      put(ux, uy, i, 0);\n      put(rho * ux, rho * uy, i, 1);\n      put((x + x2) / 2, (y + y2) / 2, i, nx);\n    }\n  S.nt = nt;\n  S.tri = tri;\n  S.model = M;\n  S.rho = rho;\n  S.a = a;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [6, 2, 1, 0.06], dd = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[0], 6, 12)), rate = cl(k[1], 0.2, 3) / 2;\n  const m = max(1, min(round(cl(k[2], 1, 4)), floor((n - 1) / 2)));\n  S.q = 3 * 8 ** cl(k[3], 0, 1);\n  if (n !== S.n || m !== S.m) {\n    S.n = n;\n    S.m = m;\n    S.flash = [];\n  }\n  if (!S.begun) {\n    S.begun = true;\n    S.lay = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lay = 0;\n    S.flash = [];\n  }\n  const wasLaid = S.lay >= LAY;\n  S.lay += dd * rate;\n  S.phi += (dd * rate * TAU) / TURN;\n  if (!wasLaid && S.lay >= LAY) S.flash.push(0);\n  for (let i = 0; i \u003c S.flash.length; i++) S.flash[i] += dd * rate;\n  S.flash = S.flash.filter((f) => f \u003c 0.8);\n  geometry(S);\n}\n\n// How far circle i is laid, 0..1: they go down one after another.\nfunction shown(S, i) {\n  if (i \u003c 2) return 1;\n  return cl(((S.lay / LAY) * S.n - (i - 2)) * 1.5, 0, 1);\n}\n\n// Orange and yellow go brown and olive dimmed, so their discs are lit\n// brighter inside and paler.\nconst warm = (h) => {\n  const u = (h - floor(h) - 0.13) / 0.14;\n  return u * u \u003c 1 ? (1 - u * u) ** 2 : 0;\n};\n\nfunction disc(A, x0, y0, r, w, c, f, lift, lo, hi) {\n  const ext = r + 2, rr = max(r, 0.35);\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, D = sqrt(dx * dx + dy * dy);\n      if (D > ext) continue;\n      const u = min(1, D / rr), fill = cl(rr - D + 0.5, 0, 1), e = (D - rr) / 0.7;\n      // A soft lit disc: dim in the middle, rising toward a bright rim, a\n      // glow on the upper left where the light comes from.\n      const hx = dx + 0.42 * rr, hy = dy + 0.42 * rr, glow = exp(-(hx * hx + hy * hy) / (0.22 * rr * rr + 0.6));\n      const vf = w * fill * (0.2 + 0.28 * u * u + 0.32 * glow) * lift;\n      let v = 0.85 * exp(-e * e);\n      if (r \u003c 1.5) v += (1.5 - r) * 0.5 * fill;\n      v *= w;\n      // Screen blend, so where wound chains overlap the lenses show without\n      // washing out to white.\n      const p = 3 * (y * W + x);\n      A[p] = 1 - (1 - A[p]) * (1 - min(1, c[0] * v + f[0] * vf));\n      A[p + 1] = 1 - (1 - A[p + 1]) * (1 - min(1, c[1] * v + f[1] * vf));\n      A[p + 2] = 1 - (1 - A[p + 2]) * (1 - min(1, c[2] * v + f[2] * vf));\n    }\n  }\n}\n\nfunction ring(A, x0, y0, r, lv, lo, hi) {\n  const ext = r + 2;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, e = (sqrt(dx * dx + dy * dy) - r) / 0.6;\n      if (e > 4 || e \u003c -4) continue;\n      const v = lv * exp(-e * e), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nfunction dot(A, x0, y0, s, lv, lo, hi) {\n  const ext = 3 * s;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, v = lv * exp(-(dx * dx + dy * dy) / (2 * s * s)), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { A, col, fil, n } = S;\n  A.fill(0);\n  for (let sq = 0; sq \u003c 2; sq++) {\n    const C = S.C[sq], T = S.T[sq], lo = sq * 64, hi = lo + 63;\n    ring(A, C[0], C[1], C[2], 0.5, lo, hi);\n    ring(A, C[3], C[4], C[5], 0.5, lo, hi);\n    for (let i = 2; i \u003c n + 2; i++) {\n      const w = shown(S, i);\n      if (w \u003c= 0) continue;\n      const h = H0 + (i - 2) / n, wm = warm(h);\n      hsv(h, 0.8, 1, col);\n      hsv(h, 0.74 - 0.3 * wm, 1, fil);\n      // A wound chain stacks its discs Turns deep, so each is filled fainter.\n      disc(A, C[3 * i], C[3 * i + 1], C[3 * i + 2], w, col, fil, (1 + 0.9 * wm) * S.m ** -0.7, lo, hi);\n    }\n    // Every touch, lit once both its circles are laid; small ones smaller.\n    for (let t = 0; t \u003c S.nt; t++) {\n      const [a, b] = S.tri[t], w = min(shown(S, a), shown(S, b));\n      if (w \u003c 1) continue;\n      const rr = min(C[3 * a + 2], b > 1 ? C[3 * b + 2] : 99);\n      dot(A, T[2 * t], T[2 * t + 1], cl(0.25 * rr, 0.45, 0.8), 0.75 / S.m, lo, hi);\n    }\n    // The closing: the touch between the last circle laid and the first.\n    for (const f of S.flash) {\n      const len = n / gcd(n, S.m), i = 2 + len - 1, t = 3 * (i - 2) + 2, e = 1 - f / 0.8;\n      dot(A, T[2 * t], T[2 * t + 1], 1.4 + 2.5 * f, 1.6 * e * e, lo, hi);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = 3 * (y * W + x);\n      display.setPixel(x, y, round(255 * min(1, A[p])), round(255 * min(1, A[p + 1])), round(255 * min(1, A[p + 2])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Circles=6..12, Speed=0.2..3, Turns=1..4, Offset=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Circles","min":6,"max":12,"about":"How many circles the chain holds, 6 to 12, each in its own colour, hues spaced evenly round the wheel. At 6 the inner circle is a third of the outer one across and the chain circles are 10 LEDs in radius in the top square; at 12 the inner circle is 0.59 of the outer and the circles are beads 6.2 LEDs in radius."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the chain turns once in 30 seconds, and a fresh start lays it circle by circle in 1.5 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Turns","min":1,"max":4,"about":"How many times the chain winds round before it closes, 1 to 4, at most (Circles - 1) / 2. Neighbours then stand 360 times Turns over Circles degrees apart, sin(180 Turns / Circles) = (1 - inner) / (1 + inner) fixes the inner circle, and the circles overlap in a rosette round it: 7 circles at 2 turns leave it 0.12 of the outer one across, at 3 turns 0.013. Where Turns and Circles share a factor the circles fall into that many chains, each closed: 6 circles at 2 turns are two chains of 3."},{"name":"Offset","min":0,"max":1,"about":"How near the chain the point of the inversion sits, and with it how far off-centre the inner circle of the bottom square stands: 12 LEDs above the centre at the start, where a circle passing the wide side at the bottom is 3.4 times as wide as one passing the narrow side; 3 times at 0, and 24 times at 1, where the inner circle stands 25 LEDs up, nearly touching the outer one, and the circles squeezing past it are beads 2 LEDs across."}],"start":[6,2,1,0.06],"measures":{"motion":0.3441,"detail":0.0929,"edges":0.4245,"complexity":1.7706,"coverage":0.6096,"colour":0.2864,"drift":0.1304},"knobResponse":[0.1921,0.201,0.172,0.0934]},{"slug":"sugar-scrub","title":"Sugar Scrub","family":"cosmetic","round":32,"note":"장밋빛 오일 밤 위에 설탕 결정 칠백 알쯤이 떠 있고, 보이지 않는 손끝이 지름 26 LED 원을 그리며 지나간 자리에 분홍빛 광택 고리가 남아요. 손끝에 끌린 알갱이는 구르며 하얀 십자로 반짝이고 녹아 작아져요. 10초마다 새 한 숟갈이 더미로 얹혔다가 다음 원에 쓸려 퍼져요.","idea":"Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.","buttons":"K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.","code":"// ===== Patternflow pattern =====\n// Title:   Sugar Scrub\n// Family:  cosmetic\n// Idea:    Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the sugar body scrub\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1\n//\n// Knob 1: Hue. The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid.\n// Knob 2: Speed. At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2.\n// Knob 3: Grain. The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm.\n// Knob 4: Oil. How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1.\n// Buttons: K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.\n\nconst W = 64, H = 128, N = W * H, MAXG = 3200;\nconst { floor, sqrt, exp, sin, cos, min, max, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Smooth value noise with a lattice cell LEDs wide, for the balm's relief.\nfunction valueNoise(cell) {\n  const gw = floor(W / cell) + 2, gh = floor(H / cell) + 2, g = new Float32Array(gw * gh), out = new Float32Array(N);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      (tx = tx * tx * (3 - 2 * tx)), (ty = ty * ty * (3 - 2 * ty));\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n    }\n  return out;\n}\n\nexport function setup(params) {\n  const n1 = valueNoise(9), n2 = valueNoise(3.5), N0 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) N0[i] = 0.65 * n1[i] + 0.35 * n2[i];\n  params.s = {\n    t: 0, hue: NaN, speed: 2, grain: 0, oil: 0.53,\n    S: Float32Array.from(N0), S2: new Float32Array(N), N0, G: new Float32Array(N), G2: new Float32Array(N),\n    gx: new Float32Array(MAXG), gy: new Float32Array(MAXG), vx: new Float32Array(MAXG), vy: new Float32Array(MAXG),\n    gs: new Float32Array(MAXG), ph: new Float32Array(MAXG), tx: new Float32Array(MAXG), ty: new Float32Array(MAXG), fall: new Uint8Array(MAXG), tint: new Float32Array(MAXG),\n    n: 0, filled: false, spoon: 3, goal: 0, queue: 0, fx: 0, fy: 0, fvx: 0, fvy: 0,\n    col: new Float32Array(12), img: new Float32Array(N * 3),\n  };\n}\n\n// The fingertip: circles of radius 13 at 0.7 rad a unit of time, round a\n// centre that wanders up and down most of the panel.\nfunction finger(t) {\n  const a = 0.7 * t, cx = 32 + 6 * sin(0.11 * t), cy = 64 + 36 * sin(0.09 * t - 2.6), r = 13 + 2 * sin(0.23 * t);\n  return [cx + r * cos(a), cy + r * sin(a)];\n}\n\nconst meanR = (P) => 0.95 + 0.55 * P.grain;\nconst target = (P) => {\n  const o = P.oil, cov = 0.72 * (1 - o) ** 1.6 + 0.03, r = meanR(P);\n  return min(MAXG, floor((cov * N) / (PI * r * r)));\n};\n\nfunction addGrain(P, x, y, cx, cy) {\n  if (P.n >= MAXG) return;\n  // A grain keeps its size as a share of the mean, so Grain resizes every\n  // grain on the panel at once.\n  const i = P.n++;\n  P.gs[i] = 0.55 + 0.9 * random();\n  P.ph[i] = random() * 2 * PI;\n  P.tint[i] = random();\n  (P.vx[i] = 0), (P.vy[i] = 0);\n  if (cx !== undefined) {\n    // Part of a spoonful: it starts in the heap's tight middle and is thrown\n    // out to where it lands.\n    (P.gx[i] = cx + (x - cx) * 0.25), (P.gy[i] = cy + (y - cy) * 0.25);\n    (P.tx[i] = x), (P.ty[i] = y), (P.fall[i] = 1);\n  } else (P.gx[i] = x), (P.gy[i] = y), (P.fall[i] = 0);\n}\n\nfunction kill(P, i) {\n  const j = --P.n;\n  for (const a of [P.gx, P.gy, P.vx, P.vy, P.gs, P.ph, P.tx, P.ty, P.fall, P.tint]) a[i] = a[j];\n}\n\n// A spoonful lands on the emptiest of five spots that are well clear of the\n// fingertip: a round heap 26 LEDs across, densest in the middle.\nfunction spoonful(P) {\n  let best = -Infinity, bx = 32, by = 30;\n  for (let c = 0; c \u003c 5; c++) {\n    const x = 14 + random() * 36, y = 14 + random() * (H - 28);\n    if (Math.hypot(x - P.fx, y - P.fy) \u003c 30) continue;\n    let near = 0;\n    for (let i = 0; i \u003c P.n; i += 3) if (abs(P.gx[i] - x) \u003c 12 && abs(P.gy[i] - y) \u003c 12) near++;\n    const score = -near + random();\n    if (score > best) (best = score), (bx = x), (by = y);\n  }\n  const m = floor(target(P) * 0.22) + 60;\n  for (let k = 0; k \u003c m; k++) {\n    const a = random() * 2 * PI, rr = random() ** 0.75;\n    addGrain(P, cl(bx + cos(a) * rr * 13, 0, W - 1), cl(by + sin(a) * rr * 13, 0, H - 1), bx, by);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.grain = cl(k[2], -1, 1);\n  P.oil = (cl(k[3], -1, 1) + 1) / 2;\n  // A turn of Grain or Oil changes how many grains the balm should hold:\n  // the difference is sprinkled on or melted away, 60 grains a frame.\n  const goal = target(P);\n  if (P.filled && goal !== P.goal) (P.queue += goal - P.goal), (P.goal = goal);\n  if (P.queue > 0) {\n    const m = min(60, P.queue);\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    P.queue -= m;\n  } else if (P.queue \u003c 0) {\n    const m = min(60, -P.queue, P.n);\n    for (let i = 0; i \u003c m; i++) kill(P, floor(random() * P.n));\n    P.queue += m;\n  }\n  if (!P.filled) {\n    // The jar has been in use a while: twelve seconds of rubbing at Speed 2\n    // run before the first frame, so the panel opens on swirled tracks, a\n    // heap or two and ridges of pushed grains, with the next spoonful due\n    // in three seconds.\n    const m = (P.goal = target(P));\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    for (let i = 0; i \u003c 120; i++) step(P, 0.1, 2, false);\n    P.filled = true;\n    P.spoon = 3;\n  }\n  step(P, d, P.speed, input.btnPressed && input.btnPressed[0]);\n}\n\nfunction step(P, d, sp, press) {\n  P.t += d * sp;\n  const [fx, fy] = finger(P.t), [px, py] = finger(P.t - 0.05);\n  (P.fx = fx), (P.fy = fy), (P.fvx = ((fx - px) / 0.05) * sp), (P.fvy = ((fy - py) / 0.05) * sp);\n  if (press) spoonful(P);\n  P.spoon -= d * sp * 0.5;\n  if (P.spoon \u003c= 0 || P.n \u003c target(P) * 0.35) (P.spoon = 10), spoonful(P);\n\n  // The oil the fingertip drags: its own velocity under the pad, falling off\n  // over 5 LEDs, and a push out from under it.\n  const sig2 = 2 * 5 * 5, oil = P.oil;\n  const vel = (x, y, out) => {\n    const dx = x - fx, dy = y - fy, r2 = dx * dx + dy * dy;\n    if (r2 > 400) return (out[0] = 0), (out[1] = 0), 0;\n    const e = exp(-r2 / sig2), r = sqrt(r2) + 0.5, push = 1.5 * sp * e;\n    out[0] = P.fvx * e * 0.8 + (push * dx) / r;\n    out[1] = P.fvy * e * 0.8 + (push * dy) / r;\n    return e;\n  };\n  const v = [0, 0];\n\n  // Grains trail the oil and roll; under the pad they melt.\n  const melt = 0.05 + 0.32 * oil, mr = meanR(P);\n  for (let i = 0; i \u003c P.n; i++) {\n    if (P.fall[i]) {\n      const u = min(1, d * 9);\n      P.gx[i] += (P.tx[i] - P.gx[i]) * u;\n      P.gy[i] += (P.ty[i] - P.gy[i]) * u;\n      if (abs(P.tx[i] - P.gx[i]) + abs(P.ty[i] - P.gy[i]) \u003c 0.1) P.fall[i] = 0;\n      P.ph[i] += d * 6;\n      continue;\n    }\n    const e = vel(P.gx[i], P.gy[i], v), lag = min(1, d * 7);\n    // Grains in the flow knock into each other and scatter a little.\n    const jit = e > 0.1 ? 14 * e * sp * d : 0;\n    P.vx[i] += (v[0] - P.vx[i]) * lag + jit * (random() - 0.5) * 4;\n    P.vy[i] += (v[1] - P.vy[i]) * lag + jit * (random() - 0.5) * 4;\n    P.gx[i] = cl(P.gx[i] + P.vx[i] * d, 0, W - 0.01);\n    P.gy[i] = cl(P.gy[i] + P.vy[i] * d, 0, H - 0.01);\n    const s = abs(P.vx[i]) + abs(P.vy[i]);\n    P.ph[i] += d * (0.35 * sp + (s * 1.3) / (P.gs[i] * mr));\n    if (e > 0.05) P.gs[i] -= (d * melt * e) / mr;\n    if (P.gs[i] \u003c 0.35) kill(P, i--);\n  }\n\n  // The balm: its texture is carried by the same flow and slowly settles\n  // back; the gloss is laid down under the pad, spreads and dries.\n  const S = P.S, S2 = P.S2, G = P.G, G2 = P.G2, N0 = P.N0;\n  const back = d * 0.04, dry = d * (0.12 - 0.08 * oil), lay = d * 1.6, spread = min(0.24, 1.5 * d);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, e = vel(x, y, v);\n      let s = S[i];\n      if (e > 0.002) {\n        const sx = cl(x - v[0] * d, 0, W - 1.001), sy = cl(y - v[1] * d, 0, H - 1.001), ix = sx | 0, iy = sy | 0, tx = sx - ix, ty = sy - iy, j = iy * W + ix;\n        s = S[j] * (1 - tx) * (1 - ty) + S[j + 1] * tx * (1 - ty) + S[j + W] * (1 - tx) * ty + S[j + W + 1] * tx * ty;\n      }\n      S2[i] = s + (N0[i] - s) * back;\n      const l = x > 0 ? G[i - 1] : G[i], r = x \u003c W - 1 ? G[i + 1] : G[i], u = y > 0 ? G[i - W] : G[i], b = y \u003c H - 1 ? G[i + W] : G[i];\n      G2[i] = min(1, G[i] + (l + r + u + b - 4 * G[i]) * spread - G[i] * dry + lay * e);\n    }\n  (P.S = S2), (P.S2 = S), (P.G = G2), (P.G2 = G);\n}\n\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { S, G, img, col } = P, oil = P.oil, h = P.hue + 0.955, mr = meanR(P);\n  // Dry balm, wet oil, the crystal body and the sheen.\n  hsv(h, 0.42, 0.84, col, 0);\n  hsv(h + 0.015, 0.74, 0.64, col, 3);\n  // The light comes from the upper left and swings slowly to and fro, so\n  // the sheen slides over the balm even where the fingertip is not.\n  const la = -2.2 + 0.5 * sin(P.t * 0.21), LX = 0.75 * cos(la), LY = 0.75 * sin(la), LZ = 0.66;\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  hsv(h - 0.02, 0.09, 1, col, 6);\n  hsv(h - 0.03, 0.1, 1, col, 9);\n  // More oil: a wetter, smoother balm.\n  const base = 0.2 + 0.55 * oil, sh = 3.2 * (1 - 0.65 * oil);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const wet = min(1, base + G[i]);\n      const hx = sh * ((x \u003c W - 1 ? S[i + 1] : S[i]) - (x > 0 ? S[i - 1] : S[i])) + 2 * ((x \u003c W - 1 ? G[i + 1] : G[i]) - (x > 0 ? G[i - 1] : G[i]));\n      const hy = sh * ((y \u003c H - 1 ? S[i + W] : S[i]) - (y > 0 ? S[i - W] : S[i])) + 2 * ((y \u003c H - 1 ? G[i + W] : G[i]) - (y > 0 ? G[i - W] : G[i]));\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), nx = -hx * nl, ny = -hy * nl, nz = nl;\n      const dif = 0.8 + 0.35 * (nx * LX + ny * LY + nz * LZ - 0.7);\n      // A sharp sheen on the balm's relief, and over the oil the fingertip\n      // laid down a broad film of light.\n      const nh = max(0, nx * HX + ny * HY + nz * HZ), spec = (nh ** 60 * 1.3 + nh ** 6 * 0.18) * wet + G[i] * (0.1 + 0.5 * nh ** 10);\n      const tex = 0.88 + 0.26 * (S[i] - 0.5);\n      for (let c = 0; c \u003c 3; c++) {\n        const b = (col[c] + (col[3 + c] - col[c]) * wet) * dif * tex;\n        img[i * 3 + c] = b + (col[9 + c] - b) * min(1, spec);\n      }\n    }\n  // The grains: a shadow down and right, a body lit from the upper left,\n  // and a flash when a facet turns to the light.\n  for (let k = 0; k \u003c P.n; k++) {\n    const gx = P.gx[k], gy = P.gy[k], r = P.gs[k] * mr, ph = P.ph[k];\n    const gl = max(0, cos(ph)) ** 24, x0 = floor(gx - r - 1), x1 = floor(gx + r + 1), y0 = floor(gy - r - 1), y1 = floor(gy + r + 1);\n    const wetHere = min(1, base + G[cl(floor(gy), 0, H - 1) * W + cl(floor(gx), 0, W - 1)]);\n    const op = 0.96 - 0.4 * wetHere, tv = 0.86 + 0.14 * P.tint[k];\n    for (let y = max(0, y0); y \u003c= min(H - 1, y1); y++)\n      for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n        const dx = x + 0.5 - gx, dy = y + 0.5 - gy, dd = sqrt(dx * dx + dy * dy), cov = cl(r + 0.6 - dd, 0, 1);\n        const i = (y * W + x) * 3;\n        const sdx = dx - 0.8, sdy = dy - 0.8, sc = cl(r + 0.5 - sqrt(sdx * sdx + sdy * sdy), 0, 1) * (1 - cov) * 0.16;\n        if (sc > 0) for (let c = 0; c \u003c 3; c++) img[i + c] *= 1 - sc;\n        if (cov \u003c= 0) continue;\n        const lit = (0.8 + 0.2 * cl(-(dx * 0.6 + dy * 0.8) / max(r, 0.6), -1, 1)) * tv;\n        const a = cov * op;\n        for (let c = 0; c \u003c 3; c++) img[i + c] += (col[6 + c] * lit - img[i + c]) * a;\n        if (gl > 0.02) {\n          const f = gl * cov * (dd \u003c 0.8 ? 1 : 0.55);\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * f;\n        }\n      }\n    // A bright flash throws a short cross.\n    if (gl > 0.7 && r > 0.6) {\n      const cx = floor(gx), cy = floor(gy), f = (gl - 0.7) * 2, arm = r > 1.1 ? 2 : 1;\n      for (let a = 1; a \u003c= arm; a++)\n        for (const [ox, oy] of [[a, 0], [-a, 0], [0, a], [0, -a]]) {\n          const x = cx + ox, y = cy + oy;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const i = (y * W + x) * 3, ff = f / a;\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * ff;\n        }\n    }\n  }\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, img[i * 3]), min(255, img[i * 3 + 1]), min(255, img[i * 3 + 2]));\n}\n","layer":{"id":"layer-sugar-scrub","type":"code","name":"sugar-scrub","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sugar Scrub\n// Family:  cosmetic\n// Idea:    Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the sugar body scrub\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1\n//\n// Knob 1: Hue. The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid.\n// Knob 2: Speed. At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2.\n// Knob 3: Grain. The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm.\n// Knob 4: Oil. How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1.\n// Buttons: K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.\n\nconst W = 64, H = 128, N = W * H, MAXG = 3200;\nconst { floor, sqrt, exp, sin, cos, min, max, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Smooth value noise with a lattice cell LEDs wide, for the balm's relief.\nfunction valueNoise(cell) {\n  const gw = floor(W / cell) + 2, gh = floor(H / cell) + 2, g = new Float32Array(gw * gh), out = new Float32Array(N);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      (tx = tx * tx * (3 - 2 * tx)), (ty = ty * ty * (3 - 2 * ty));\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n    }\n  return out;\n}\n\nexport function setup(params) {\n  const n1 = valueNoise(9), n2 = valueNoise(3.5), N0 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) N0[i] = 0.65 * n1[i] + 0.35 * n2[i];\n  params.s = {\n    t: 0, hue: NaN, speed: 2, grain: 0, oil: 0.53,\n    S: Float32Array.from(N0), S2: new Float32Array(N), N0, G: new Float32Array(N), G2: new Float32Array(N),\n    gx: new Float32Array(MAXG), gy: new Float32Array(MAXG), vx: new Float32Array(MAXG), vy: new Float32Array(MAXG),\n    gs: new Float32Array(MAXG), ph: new Float32Array(MAXG), tx: new Float32Array(MAXG), ty: new Float32Array(MAXG), fall: new Uint8Array(MAXG), tint: new Float32Array(MAXG),\n    n: 0, filled: false, spoon: 3, goal: 0, queue: 0, fx: 0, fy: 0, fvx: 0, fvy: 0,\n    col: new Float32Array(12), img: new Float32Array(N * 3),\n  };\n}\n\n// The fingertip: circles of radius 13 at 0.7 rad a unit of time, round a\n// centre that wanders up and down most of the panel.\nfunction finger(t) {\n  const a = 0.7 * t, cx = 32 + 6 * sin(0.11 * t), cy = 64 + 36 * sin(0.09 * t - 2.6), r = 13 + 2 * sin(0.23 * t);\n  return [cx + r * cos(a), cy + r * sin(a)];\n}\n\nconst meanR = (P) => 0.95 + 0.55 * P.grain;\nconst target = (P) => {\n  const o = P.oil, cov = 0.72 * (1 - o) ** 1.6 + 0.03, r = meanR(P);\n  return min(MAXG, floor((cov * N) / (PI * r * r)));\n};\n\nfunction addGrain(P, x, y, cx, cy) {\n  if (P.n >= MAXG) return;\n  // A grain keeps its size as a share of the mean, so Grain resizes every\n  // grain on the panel at once.\n  const i = P.n++;\n  P.gs[i] = 0.55 + 0.9 * random();\n  P.ph[i] = random() * 2 * PI;\n  P.tint[i] = random();\n  (P.vx[i] = 0), (P.vy[i] = 0);\n  if (cx !== undefined) {\n    // Part of a spoonful: it starts in the heap's tight middle and is thrown\n    // out to where it lands.\n    (P.gx[i] = cx + (x - cx) * 0.25), (P.gy[i] = cy + (y - cy) * 0.25);\n    (P.tx[i] = x), (P.ty[i] = y), (P.fall[i] = 1);\n  } else (P.gx[i] = x), (P.gy[i] = y), (P.fall[i] = 0);\n}\n\nfunction kill(P, i) {\n  const j = --P.n;\n  for (const a of [P.gx, P.gy, P.vx, P.vy, P.gs, P.ph, P.tx, P.ty, P.fall, P.tint]) a[i] = a[j];\n}\n\n// A spoonful lands on the emptiest of five spots that are well clear of the\n// fingertip: a round heap 26 LEDs across, densest in the middle.\nfunction spoonful(P) {\n  let best = -Infinity, bx = 32, by = 30;\n  for (let c = 0; c \u003c 5; c++) {\n    const x = 14 + random() * 36, y = 14 + random() * (H - 28);\n    if (Math.hypot(x - P.fx, y - P.fy) \u003c 30) continue;\n    let near = 0;\n    for (let i = 0; i \u003c P.n; i += 3) if (abs(P.gx[i] - x) \u003c 12 && abs(P.gy[i] - y) \u003c 12) near++;\n    const score = -near + random();\n    if (score > best) (best = score), (bx = x), (by = y);\n  }\n  const m = floor(target(P) * 0.22) + 60;\n  for (let k = 0; k \u003c m; k++) {\n    const a = random() * 2 * PI, rr = random() ** 0.75;\n    addGrain(P, cl(bx + cos(a) * rr * 13, 0, W - 1), cl(by + sin(a) * rr * 13, 0, H - 1), bx, by);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.grain = cl(k[2], -1, 1);\n  P.oil = (cl(k[3], -1, 1) + 1) / 2;\n  // A turn of Grain or Oil changes how many grains the balm should hold:\n  // the difference is sprinkled on or melted away, 60 grains a frame.\n  const goal = target(P);\n  if (P.filled && goal !== P.goal) (P.queue += goal - P.goal), (P.goal = goal);\n  if (P.queue > 0) {\n    const m = min(60, P.queue);\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    P.queue -= m;\n  } else if (P.queue \u003c 0) {\n    const m = min(60, -P.queue, P.n);\n    for (let i = 0; i \u003c m; i++) kill(P, floor(random() * P.n));\n    P.queue += m;\n  }\n  if (!P.filled) {\n    // The jar has been in use a while: twelve seconds of rubbing at Speed 2\n    // run before the first frame, so the panel opens on swirled tracks, a\n    // heap or two and ridges of pushed grains, with the next spoonful due\n    // in three seconds.\n    const m = (P.goal = target(P));\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    for (let i = 0; i \u003c 120; i++) step(P, 0.1, 2, false);\n    P.filled = true;\n    P.spoon = 3;\n  }\n  step(P, d, P.speed, input.btnPressed && input.btnPressed[0]);\n}\n\nfunction step(P, d, sp, press) {\n  P.t += d * sp;\n  const [fx, fy] = finger(P.t), [px, py] = finger(P.t - 0.05);\n  (P.fx = fx), (P.fy = fy), (P.fvx = ((fx - px) / 0.05) * sp), (P.fvy = ((fy - py) / 0.05) * sp);\n  if (press) spoonful(P);\n  P.spoon -= d * sp * 0.5;\n  if (P.spoon \u003c= 0 || P.n \u003c target(P) * 0.35) (P.spoon = 10), spoonful(P);\n\n  // The oil the fingertip drags: its own velocity under the pad, falling off\n  // over 5 LEDs, and a push out from under it.\n  const sig2 = 2 * 5 * 5, oil = P.oil;\n  const vel = (x, y, out) => {\n    const dx = x - fx, dy = y - fy, r2 = dx * dx + dy * dy;\n    if (r2 > 400) return (out[0] = 0), (out[1] = 0), 0;\n    const e = exp(-r2 / sig2), r = sqrt(r2) + 0.5, push = 1.5 * sp * e;\n    out[0] = P.fvx * e * 0.8 + (push * dx) / r;\n    out[1] = P.fvy * e * 0.8 + (push * dy) / r;\n    return e;\n  };\n  const v = [0, 0];\n\n  // Grains trail the oil and roll; under the pad they melt.\n  const melt = 0.05 + 0.32 * oil, mr = meanR(P);\n  for (let i = 0; i \u003c P.n; i++) {\n    if (P.fall[i]) {\n      const u = min(1, d * 9);\n      P.gx[i] += (P.tx[i] - P.gx[i]) * u;\n      P.gy[i] += (P.ty[i] - P.gy[i]) * u;\n      if (abs(P.tx[i] - P.gx[i]) + abs(P.ty[i] - P.gy[i]) \u003c 0.1) P.fall[i] = 0;\n      P.ph[i] += d * 6;\n      continue;\n    }\n    const e = vel(P.gx[i], P.gy[i], v), lag = min(1, d * 7);\n    // Grains in the flow knock into each other and scatter a little.\n    const jit = e > 0.1 ? 14 * e * sp * d : 0;\n    P.vx[i] += (v[0] - P.vx[i]) * lag + jit * (random() - 0.5) * 4;\n    P.vy[i] += (v[1] - P.vy[i]) * lag + jit * (random() - 0.5) * 4;\n    P.gx[i] = cl(P.gx[i] + P.vx[i] * d, 0, W - 0.01);\n    P.gy[i] = cl(P.gy[i] + P.vy[i] * d, 0, H - 0.01);\n    const s = abs(P.vx[i]) + abs(P.vy[i]);\n    P.ph[i] += d * (0.35 * sp + (s * 1.3) / (P.gs[i] * mr));\n    if (e > 0.05) P.gs[i] -= (d * melt * e) / mr;\n    if (P.gs[i] \u003c 0.35) kill(P, i--);\n  }\n\n  // The balm: its texture is carried by the same flow and slowly settles\n  // back; the gloss is laid down under the pad, spreads and dries.\n  const S = P.S, S2 = P.S2, G = P.G, G2 = P.G2, N0 = P.N0;\n  const back = d * 0.04, dry = d * (0.12 - 0.08 * oil), lay = d * 1.6, spread = min(0.24, 1.5 * d);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, e = vel(x, y, v);\n      let s = S[i];\n      if (e > 0.002) {\n        const sx = cl(x - v[0] * d, 0, W - 1.001), sy = cl(y - v[1] * d, 0, H - 1.001), ix = sx | 0, iy = sy | 0, tx = sx - ix, ty = sy - iy, j = iy * W + ix;\n        s = S[j] * (1 - tx) * (1 - ty) + S[j + 1] * tx * (1 - ty) + S[j + W] * (1 - tx) * ty + S[j + W + 1] * tx * ty;\n      }\n      S2[i] = s + (N0[i] - s) * back;\n      const l = x > 0 ? G[i - 1] : G[i], r = x \u003c W - 1 ? G[i + 1] : G[i], u = y > 0 ? G[i - W] : G[i], b = y \u003c H - 1 ? G[i + W] : G[i];\n      G2[i] = min(1, G[i] + (l + r + u + b - 4 * G[i]) * spread - G[i] * dry + lay * e);\n    }\n  (P.S = S2), (P.S2 = S), (P.G = G2), (P.G2 = G);\n}\n\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { S, G, img, col } = P, oil = P.oil, h = P.hue + 0.955, mr = meanR(P);\n  // Dry balm, wet oil, the crystal body and the sheen.\n  hsv(h, 0.42, 0.84, col, 0);\n  hsv(h + 0.015, 0.74, 0.64, col, 3);\n  // The light comes from the upper left and swings slowly to and fro, so\n  // the sheen slides over the balm even where the fingertip is not.\n  const la = -2.2 + 0.5 * sin(P.t * 0.21), LX = 0.75 * cos(la), LY = 0.75 * sin(la), LZ = 0.66;\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  hsv(h - 0.02, 0.09, 1, col, 6);\n  hsv(h - 0.03, 0.1, 1, col, 9);\n  // More oil: a wetter, smoother balm.\n  const base = 0.2 + 0.55 * oil, sh = 3.2 * (1 - 0.65 * oil);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const wet = min(1, base + G[i]);\n      const hx = sh * ((x \u003c W - 1 ? S[i + 1] : S[i]) - (x > 0 ? S[i - 1] : S[i])) + 2 * ((x \u003c W - 1 ? G[i + 1] : G[i]) - (x > 0 ? G[i - 1] : G[i]));\n      const hy = sh * ((y \u003c H - 1 ? S[i + W] : S[i]) - (y > 0 ? S[i - W] : S[i])) + 2 * ((y \u003c H - 1 ? G[i + W] : G[i]) - (y > 0 ? G[i - W] : G[i]));\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), nx = -hx * nl, ny = -hy * nl, nz = nl;\n      const dif = 0.8 + 0.35 * (nx * LX + ny * LY + nz * LZ - 0.7);\n      // A sharp sheen on the balm's relief, and over the oil the fingertip\n      // laid down a broad film of light.\n      const nh = max(0, nx * HX + ny * HY + nz * HZ), spec = (nh ** 60 * 1.3 + nh ** 6 * 0.18) * wet + G[i] * (0.1 + 0.5 * nh ** 10);\n      const tex = 0.88 + 0.26 * (S[i] - 0.5);\n      for (let c = 0; c \u003c 3; c++) {\n        const b = (col[c] + (col[3 + c] - col[c]) * wet) * dif * tex;\n        img[i * 3 + c] = b + (col[9 + c] - b) * min(1, spec);\n      }\n    }\n  // The grains: a shadow down and right, a body lit from the upper left,\n  // and a flash when a facet turns to the light.\n  for (let k = 0; k \u003c P.n; k++) {\n    const gx = P.gx[k], gy = P.gy[k], r = P.gs[k] * mr, ph = P.ph[k];\n    const gl = max(0, cos(ph)) ** 24, x0 = floor(gx - r - 1), x1 = floor(gx + r + 1), y0 = floor(gy - r - 1), y1 = floor(gy + r + 1);\n    const wetHere = min(1, base + G[cl(floor(gy), 0, H - 1) * W + cl(floor(gx), 0, W - 1)]);\n    const op = 0.96 - 0.4 * wetHere, tv = 0.86 + 0.14 * P.tint[k];\n    for (let y = max(0, y0); y \u003c= min(H - 1, y1); y++)\n      for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n        const dx = x + 0.5 - gx, dy = y + 0.5 - gy, dd = sqrt(dx * dx + dy * dy), cov = cl(r + 0.6 - dd, 0, 1);\n        const i = (y * W + x) * 3;\n        const sdx = dx - 0.8, sdy = dy - 0.8, sc = cl(r + 0.5 - sqrt(sdx * sdx + sdy * sdy), 0, 1) * (1 - cov) * 0.16;\n        if (sc > 0) for (let c = 0; c \u003c 3; c++) img[i + c] *= 1 - sc;\n        if (cov \u003c= 0) continue;\n        const lit = (0.8 + 0.2 * cl(-(dx * 0.6 + dy * 0.8) / max(r, 0.6), -1, 1)) * tv;\n        const a = cov * op;\n        for (let c = 0; c \u003c 3; c++) img[i + c] += (col[6 + c] * lit - img[i + c]) * a;\n        if (gl > 0.02) {\n          const f = gl * cov * (dd \u003c 0.8 ? 1 : 0.55);\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * f;\n        }\n      }\n    // A bright flash throws a short cross.\n    if (gl > 0.7 && r > 0.6) {\n      const cx = floor(gx), cy = floor(gy), f = (gl - 0.7) * 2, arm = r > 1.1 ? 2 : 1;\n      for (let a = 1; a \u003c= arm; a++)\n        for (const [ox, oy] of [[a, 0], [-a, 0], [0, a], [0, -a]]) {\n          const x = cx + ox, y = cy + oy;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const i = (y * W + x) * 3, ff = f / a;\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * ff;\n        }\n    }\n  }\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, img[i * 3]), min(255, img[i * 3 + 1]), min(255, img[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2."},{"name":"Grain","min":-1,"max":1,"about":"The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm."},{"name":"Oil","min":-1,"max":1,"about":"How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1."}],"start":[0,2,0,0.06],"measures":{"motion":0.0841,"detail":0.0638,"edges":0.1575,"complexity":2.6755,"coverage":1,"colour":0.1376,"drift":0.0416},"knobResponse":[0.1741,0.077,0.0995,0.1983]},{"slug":"sunglint","title":"Sunglint","family":"ocean","round":20,"note":"절벽에서 해를 마주 보면 수평선 아래로 윤슬 길이 내려오며 넓어져 패널을 채우고, 밀려오는 잔물결 줄마다 반짝임이 실려요. K1 을 누르면 돛단배가 빛 속을 검은 그림자로 가로질러요.","idea":"From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.","buttons":"K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.","code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","layer":{"id":"layer-sunglint","type":"code","name":"sunglint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet."},{"name":"Chop","min":0,"max":1,"about":"How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider."},{"name":"Wind","min":-1,"max":1,"about":"Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.5376,"detail":0.3357,"edges":0.4835,"complexity":2.2983,"coverage":0.8569,"colour":0.0799,"drift":0.0378},"knobResponse":[0.1189,0.329,0.2477,0.3023]},{"slug":"swatch-row","title":"Swatch Row","family":"cosmetic","round":30,"note":"보이지 않는 손가락이 아이보리 카드에 크림 안료를 한 줄씩 끌어 색조표를 채워요. 줄마다 한 단계씩 밝거나 짙고, K1 하나로 어떤 색 라인으로든 바뀌어요.","idea":"A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.","buttons":"K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.","code":"// ===== Patternflow pattern =====\n// Title:   Swatch Row\n// Family:  cosmetic\n// Idea:    A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after the makeup artist's swatch\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1\n//\n// Knob 1: Hue. Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum.\n// Knob 2: Speed. At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4.\n// Knob 3: Range. How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it.\n// Knob 4: Finish. At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles.\n// Buttons: K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.\n\nconst W = 64, H = 128, SL = 16, ROWS = H / SL, NT = W * SL;\nconst { min, floor, sqrt, sin, exp, abs, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Rose sits at 0.955 of the wheel; K1 adds to it.\nconst ROSE = 0.955;\n\n// The card: warm ivory, 198/186/164 in the middle, 10% dimmer at the side\n// edges and 7% at the ends, with a fixed paper grain of about 1%.\nconst GR = new Float32Array(W * H * 3);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - 32) / 32, dy = (y + 0.5 - 64) / 64;\n    const v = 1 - 0.1 * dx * dx - 0.07 * dy * dy + 0.024 * (hash(x, y, 7) - 0.5), i = (y * W + x) * 3;\n    (GR[i] = 198 * v), (GR[i + 1] = 186 * v), (GR[i + 2] = 164 * v);\n  }\n\n// Smooth value noise over a table of random numbers.\nconst n1 = (T, f) => {\n  const i = cl(floor(f), 0, T.length - 2), t = cl(f - i, 0, 1);\n  return T[i] + (T[i + 1] - T[i]) * t * t * (3 - 2 * t);\n};\nconst n2 = (T, n, fx, fy) => {\n  const i = cl(floor(fx), 0, T.length / n - 2), t = cl(fx - i, 0, 1), s = t * t * (3 - 2 * t);\n  return mix(n1(T.subarray(i * n, i * n + n), fy), n1(T.subarray(i * n + n, i * n + 2 * n), fy), s);\n};\nconst table = (n) => Float32Array.from({ length: n }, () => random());\n\n// One swatch, baked once into fields over its 64x16 slot: how opaque the\n// pigment is (A), how light against its own shade (V), where across the\n// stroke the LED sits (Q, -1 at the top edge, 1 at the bottom), how much the\n// highlight catches there (G), how far the finger must have come before it\n// lays this LED (R), and a fixed number for the sparkle (K).\n//\n// The stroke lands with a round cap of radius r, runs straight with a little\n// waver, and from a fraction ut of its length on the pigment runs out: the\n// stroke narrows, goes sheer, and the drag streaks, which follow the stroke,\n// drop out one by one, the weakest first, until the last one ends at xe.\nfunction swatch(n) {\n  const s = {\n    n, jit: (random() - 0.5) * 0.05, seed: floor(random() * 1e6),\n    A: new Float32Array(NT), V: new Float32Array(NT), Q: new Float32Array(NT), G: new Float32Array(NT), R: new Float32Array(NT), K: new Float32Array(NT),\n    p: 0, go: false, wait: 0, xa: 0, xb: 0, prev: null, wipe: 1, wwait: 0,\n  };\n  const r = 5.3 + random() * 0.6, x0 = 2 + random() * 3.5, xe = 58 + random() * 6, ut = 0.4 + random() * 0.16;\n  const slope = (random() - 0.5) * 0.04, amp = 0.2 + random() * 0.35, fr = 0.05 + random() * 0.06, ph = random() * 2 * PI, xm = (x0 + xe) / 2;\n  const T1 = table(24), T2 = table(24 * 10), T3 = table(24 * 24), TE = table(20);\n  for (let j = 0; j \u003c SL; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, xc = x + 0.5;\n      const yc = 7.5 + slope * (xc - xm) + amp * sin(xc * fr + ph), q = j + 0.5 - yc, u = (xc - x0) / (xe - x0);\n      let hw;\n      if (xc \u003c x0 + r) {\n        const d = (x0 + r - xc) / r;\n        hw = d >= 1 ? -1 : r * sqrt(1 - d * d);\n      } else hw = r * (1 - 0.06 * u - 0.24 * sm(ut, 1.1, u));\n      hw += 0.5 * (n1(TE, xc / 4 + 2) - 0.5);\n      const cov = cl(hw - abs(q) + 0.5, 0, 1);\n      const st = 0.62 * n1(T1, q * 1.15 + 11) + 0.38 * n2(T2, 24, xc / 8, q + 11);\n      // In the tail the streaks also break along their length, where the\n      // last of the pigment skips over the card.\n      const thin = sm(ut, 1, u), brk = n2(T3, 24, xc / 2.6, q * 1.3 + 11);\n      const keep = sm(-0.2, 0.2, st * 1.1 + 0.3 - thin * (1.05 + 0.7 * brk));\n      s.A[i] = cov * (0.93 + 0.07 * st) * keep * (1 - 0.5 * thin) * (1 - sm(0.94, 1.04, u));\n      // Where the finger landed the pigment piles up a shade deeper, and the\n      // drag pushes a little more of it to the two long edges.\n      const ce = xc - (x0 + r - sqrt(Math.max(0, r * r - q * q)));\n      let v = (1 + 0.24 * (st - 0.5)) * (1 - 0.1 * sm(0.55, 1, abs(q) / Math.max(hw, 0.5)));\n      if (ce \u003c 2.5) v *= 0.8 + 0.2 * cl(ce / 2.5, 0, 1);\n      s.V[i] = v;\n      s.Q[i] = q / Math.max(hw, 1);\n      s.G[i] = (0.45 + st) * (1 - 0.7 * thin);\n      s.R[i] = xc + 0.85 * (r - sqrt(Math.max(0, r * r - q * q)));\n      s.K[i] = hash(x, j, s.seed);\n    }\n  (s.xa = x0 - 1.5), (s.xb = xe + r + 2);\n  return s;\n}\n\n// The finger sets off quickly and slows as the pigment runs out.\nconst travel = (p) => 0.4 * p * p * (3 - 2 * p) + 0.6 * (1 - (1 - p) * (1 - p));\nconst fingerAt = (s) => s.xa + (s.xb - s.xa) * travel(s.p);\n\nexport function setup(params) {\n  const L = [];\n  for (let k = 0; k \u003c= ROWS; k++) {\n    const s = swatch(k);\n    if (k \u003c ROWS - 1) s.p = 1;\n    L.push(s);\n  }\n  // The card opens with seven swatches down and the eighth being dragged.\n  (L[ROWS - 1].go = true), (L[ROWS - 1].p = 0.12);\n  params.s = {\n    L, n: ROWS + 1, off: 0, phase: 0, pt: 0, t: 0, sweep: 30, hue: 0, speed: 2, width: 0.52, fin: 0.06,\n    col: new Float32Array((ROWS + 1) * 6), SH: new Float32Array(64), SW: new Float32Array(180),\n  };\n}\n\n// The stack glides up a row: the top swatch leaves, an empty slot comes in\n// at the bottom and the finger starts on the slot above it.\nfunction shift(P) {\n  P.L.shift();\n  P.L.push(swatch(P.n++));\n  (P.off = 0), (P.phase = 0), (P.pt = 0);\n  const B = P.L[ROWS - 1];\n  (B.go = true), (B.p = 0);\n}\n\n// K1: a pad wipes each swatch off left to right, row after row, and a\n// finger follows each wipe with a fresh stroke of the same shade.\nfunction reswatch(P) {\n  if (P.phase === 2) shift(P);\n  P.phase = 0;\n  for (let k = 0; k \u003c ROWS; k++) {\n    const old = P.L[k], s = swatch(old.n);\n    old.prev = null;\n    if (old.p > 0) (s.prev = old), (s.wipe = 0), (s.wwait = 0.07 * k);\n    (s.go = true), (s.p = 0), (s.wait = 0.07 * k + 0.3);\n    P.L[k] = s;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.width = 0.04 + 0.48 * (cl(k[2], -1, 1) + 1);\n  P.fin = cl(k[3], -1, 1);\n  const sp = P.speed, drag = 2.1 / sp, hold = 0.9 / sp, glide = 1.1 / sp;\n  P.t += d;\n  // A band of light crosses the card corner to corner every 18 s at Speed 2.\n  P.sweep += d * 7 * sp;\n  if (P.sweep > 200) P.sweep -= 250;\n  if (input.btnPressed && input.btnPressed[0]) reswatch(P);\n  for (const s of P.L) {\n    if (s.prev) {\n      if (s.wwait > 0) s.wwait -= d;\n      else if ((s.wipe += d / 0.45) >= 1) s.prev = null;\n    }\n    if (s.go && s.p \u003c 1) {\n      if (s.wait > 0) s.wait -= d;\n      else s.p = min(1, s.p + d / drag);\n    }\n  }\n  const B = P.L[ROWS - 1];\n  if (P.phase === 0) {\n    if (B.p >= 1) (P.phase = 1), (P.pt = 0);\n  } else if (P.phase === 1) {\n    if ((P.pt += d) >= hold) (P.phase = 2), (P.pt = 0);\n  } else {\n    P.pt += d;\n    const u = min(1, P.pt / glide);\n    P.off = SL * u * u * (3 - 2 * u);\n    if (u >= 1) shift(P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = 255 * rgb[c];\n}\n\n// The shade of swatch n: the range runs light to deep and back over 14\n// swatches, so the eight on the card always show a stretch of it.\nfunction tone(P, s, m, out, o) {\n  const a = s.n % 14, tri = (a \u003c= 7 ? a : 14 - a) / 7, w = P.width;\n  const d = cl(0.5 + w * (tri - 0.5) + s.jit, 0, 1);\n  const h = P.hue + ROSE + 0.05 * w * (0.5 - d);\n  hsv(h, 0.3 + 0.58 * d, (0.98 - 0.56 * d) * (1 + 0.12 * m), out, o);\n  // The highlight: a pale tint of the same hue, and towards metallic a\n  // champagne one.\n  hsv(h + 0.02 * m, (0.3 + 0.58 * d) * 0.35, 1, out, o + 3);\n  for (let c = 0; c \u003c 3; c++) out[o + 3 + c] = mix(mix(out[o + 3 + c], 255, 0.35), [255, 226, 186][c], 0.55 * m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.fin, m = sm(0.15, 1, f), col = P.col, SH = P.SH, SW = P.SW, L = P.L;\n  // Matte keeps 3% of a sheen, satin 50%, metallic 95%, narrower as it\n  // goes; metallic also throws a weaker second light off the lower edge.\n  const kS = 0.03 + 0.47 * sm(-1, 0, f) + 0.45 * sm(0, 1, f), wS = f \u003c 0 ? mix(0.4, 0.75, -f) : mix(0.4, 0.26, f);\n  for (let b = 0; b \u003c 64; b++) {\n    const q = -1.6 + (3.2 * b) / 63, e = (q + 0.3) / wS, e2 = (q - 0.72) / 0.16;\n    SH[b] = kS * exp(-e * e) + 0.35 * m * exp(-e2 * e2);\n  }\n  const base = mix(0.85, 0.5, m), amp = mix(0.45, 1.4, m);\n  for (let g = 0; g \u003c 180; g++) {\n    const e = (g - P.sweep) / 15;\n    SW[g] = exp(-e * e);\n  }\n  for (let k = 0; k \u003c= ROWS; k++) tone(P, L[k], m, col, k * 6);\n  const dens = 1 - 0.15 * m, t = P.t, off = round(P.off);\n  const XF = L.map((s) => (s.p \u003c 1 ? fingerAt(s) : 1e3)), PF = L.map((s) => (s.prev ? fingerAt(s.prev) : 0));\n  const WX = L.map((s) => -6 + 78 * s.wipe);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = y + off, k = floor(ty / SL), j = ty - k * SL, s = L[k], o = k * 6, xf = XF[k];\n    for (let x = 0; x \u003c W; x++) {\n      const gi = (y * W + x) * 3;\n      let r = GR[gi], g = GR[gi + 1], b = GR[gi + 2];\n      const i = j * W + x;\n      // The swatch being wiped off, still there right of the round edge of\n      // the pad.\n      if (s.prev) {\n        const S = s.prev, e = WX[k] - 2.5 * S.Q[i] * S.Q[i], a = S.A[i] * cl((PF[k] - S.R[i]) * 0.8 + 0.5, 0, 1) * sm(e - 2.5, e + 2.5, x);\n        if (a > 0.004) {\n          const v = S.V[i];\n          (r = mix(r, col[o] * v, a)), (g = mix(g, col[o + 1] * v, a)), (b = mix(b, col[o + 2] * v, a));\n        }\n      }\n      let a = s.A[i];\n      if (a > 0.004) {\n        let wet = 0;\n        if (xf \u003c 1e3) {\n          const dx = xf - s.R[i];\n          a *= cl(dx * 0.8 + 0.5, 0, 1);\n          if (dx > 0 && dx \u003c 4) wet = 0.5 * (1 - dx / 4);\n        }\n        if (a > 0.004) {\n          const Q = s.Q[i], v = s.V[i] * (1 - 0.42 * m * sm(-0.1, 0.6, Q));\n          let pr = col[o] * v, pg = col[o + 1] * v, pb = col[o + 2] * v;\n          const lt = SW[cl(round(y + 0.55 * x), 0, 179)];\n          const h = min(1, SH[cl(round(((Q + 1.6) * 63) / 3.2), 0, 63)] * s.G[i] * (base + amp * lt) + wet);\n          (pr = mix(pr, col[o + 3], h)), (pg = mix(pg, col[o + 4], h)), (pb = mix(pb, col[o + 5], h));\n          const K = s.K[i];\n          if (m > 0 && K > dens && a > 0.4) {\n            const tw = sin(K * 6283 + t * 2.6);\n            if (tw > 0.3) {\n              const z = (tw - 0.3) / 0.7, spk = z * z * m * (0.45 + 0.9 * lt);\n              (pr = mix(pr, 255, spk)), (pg = mix(pg, 248, spk)), (pb = mix(pb, 232, spk));\n            }\n          }\n          (r = mix(r, pr, a)), (g = mix(g, pg, a)), (b = mix(b, pb, a));\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-swatch-row","type":"code","name":"swatch-row","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Swatch Row\n// Family:  cosmetic\n// Idea:    A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after the makeup artist's swatch\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1\n//\n// Knob 1: Hue. Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum.\n// Knob 2: Speed. At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4.\n// Knob 3: Range. How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it.\n// Knob 4: Finish. At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles.\n// Buttons: K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.\n\nconst W = 64, H = 128, SL = 16, ROWS = H / SL, NT = W * SL;\nconst { min, floor, sqrt, sin, exp, abs, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Rose sits at 0.955 of the wheel; K1 adds to it.\nconst ROSE = 0.955;\n\n// The card: warm ivory, 198/186/164 in the middle, 10% dimmer at the side\n// edges and 7% at the ends, with a fixed paper grain of about 1%.\nconst GR = new Float32Array(W * H * 3);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - 32) / 32, dy = (y + 0.5 - 64) / 64;\n    const v = 1 - 0.1 * dx * dx - 0.07 * dy * dy + 0.024 * (hash(x, y, 7) - 0.5), i = (y * W + x) * 3;\n    (GR[i] = 198 * v), (GR[i + 1] = 186 * v), (GR[i + 2] = 164 * v);\n  }\n\n// Smooth value noise over a table of random numbers.\nconst n1 = (T, f) => {\n  const i = cl(floor(f), 0, T.length - 2), t = cl(f - i, 0, 1);\n  return T[i] + (T[i + 1] - T[i]) * t * t * (3 - 2 * t);\n};\nconst n2 = (T, n, fx, fy) => {\n  const i = cl(floor(fx), 0, T.length / n - 2), t = cl(fx - i, 0, 1), s = t * t * (3 - 2 * t);\n  return mix(n1(T.subarray(i * n, i * n + n), fy), n1(T.subarray(i * n + n, i * n + 2 * n), fy), s);\n};\nconst table = (n) => Float32Array.from({ length: n }, () => random());\n\n// One swatch, baked once into fields over its 64x16 slot: how opaque the\n// pigment is (A), how light against its own shade (V), where across the\n// stroke the LED sits (Q, -1 at the top edge, 1 at the bottom), how much the\n// highlight catches there (G), how far the finger must have come before it\n// lays this LED (R), and a fixed number for the sparkle (K).\n//\n// The stroke lands with a round cap of radius r, runs straight with a little\n// waver, and from a fraction ut of its length on the pigment runs out: the\n// stroke narrows, goes sheer, and the drag streaks, which follow the stroke,\n// drop out one by one, the weakest first, until the last one ends at xe.\nfunction swatch(n) {\n  const s = {\n    n, jit: (random() - 0.5) * 0.05, seed: floor(random() * 1e6),\n    A: new Float32Array(NT), V: new Float32Array(NT), Q: new Float32Array(NT), G: new Float32Array(NT), R: new Float32Array(NT), K: new Float32Array(NT),\n    p: 0, go: false, wait: 0, xa: 0, xb: 0, prev: null, wipe: 1, wwait: 0,\n  };\n  const r = 5.3 + random() * 0.6, x0 = 2 + random() * 3.5, xe = 58 + random() * 6, ut = 0.4 + random() * 0.16;\n  const slope = (random() - 0.5) * 0.04, amp = 0.2 + random() * 0.35, fr = 0.05 + random() * 0.06, ph = random() * 2 * PI, xm = (x0 + xe) / 2;\n  const T1 = table(24), T2 = table(24 * 10), T3 = table(24 * 24), TE = table(20);\n  for (let j = 0; j \u003c SL; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, xc = x + 0.5;\n      const yc = 7.5 + slope * (xc - xm) + amp * sin(xc * fr + ph), q = j + 0.5 - yc, u = (xc - x0) / (xe - x0);\n      let hw;\n      if (xc \u003c x0 + r) {\n        const d = (x0 + r - xc) / r;\n        hw = d >= 1 ? -1 : r * sqrt(1 - d * d);\n      } else hw = r * (1 - 0.06 * u - 0.24 * sm(ut, 1.1, u));\n      hw += 0.5 * (n1(TE, xc / 4 + 2) - 0.5);\n      const cov = cl(hw - abs(q) + 0.5, 0, 1);\n      const st = 0.62 * n1(T1, q * 1.15 + 11) + 0.38 * n2(T2, 24, xc / 8, q + 11);\n      // In the tail the streaks also break along their length, where the\n      // last of the pigment skips over the card.\n      const thin = sm(ut, 1, u), brk = n2(T3, 24, xc / 2.6, q * 1.3 + 11);\n      const keep = sm(-0.2, 0.2, st * 1.1 + 0.3 - thin * (1.05 + 0.7 * brk));\n      s.A[i] = cov * (0.93 + 0.07 * st) * keep * (1 - 0.5 * thin) * (1 - sm(0.94, 1.04, u));\n      // Where the finger landed the pigment piles up a shade deeper, and the\n      // drag pushes a little more of it to the two long edges.\n      const ce = xc - (x0 + r - sqrt(Math.max(0, r * r - q * q)));\n      let v = (1 + 0.24 * (st - 0.5)) * (1 - 0.1 * sm(0.55, 1, abs(q) / Math.max(hw, 0.5)));\n      if (ce \u003c 2.5) v *= 0.8 + 0.2 * cl(ce / 2.5, 0, 1);\n      s.V[i] = v;\n      s.Q[i] = q / Math.max(hw, 1);\n      s.G[i] = (0.45 + st) * (1 - 0.7 * thin);\n      s.R[i] = xc + 0.85 * (r - sqrt(Math.max(0, r * r - q * q)));\n      s.K[i] = hash(x, j, s.seed);\n    }\n  (s.xa = x0 - 1.5), (s.xb = xe + r + 2);\n  return s;\n}\n\n// The finger sets off quickly and slows as the pigment runs out.\nconst travel = (p) => 0.4 * p * p * (3 - 2 * p) + 0.6 * (1 - (1 - p) * (1 - p));\nconst fingerAt = (s) => s.xa + (s.xb - s.xa) * travel(s.p);\n\nexport function setup(params) {\n  const L = [];\n  for (let k = 0; k \u003c= ROWS; k++) {\n    const s = swatch(k);\n    if (k \u003c ROWS - 1) s.p = 1;\n    L.push(s);\n  }\n  // The card opens with seven swatches down and the eighth being dragged.\n  (L[ROWS - 1].go = true), (L[ROWS - 1].p = 0.12);\n  params.s = {\n    L, n: ROWS + 1, off: 0, phase: 0, pt: 0, t: 0, sweep: 30, hue: 0, speed: 2, width: 0.52, fin: 0.06,\n    col: new Float32Array((ROWS + 1) * 6), SH: new Float32Array(64), SW: new Float32Array(180),\n  };\n}\n\n// The stack glides up a row: the top swatch leaves, an empty slot comes in\n// at the bottom and the finger starts on the slot above it.\nfunction shift(P) {\n  P.L.shift();\n  P.L.push(swatch(P.n++));\n  (P.off = 0), (P.phase = 0), (P.pt = 0);\n  const B = P.L[ROWS - 1];\n  (B.go = true), (B.p = 0);\n}\n\n// K1: a pad wipes each swatch off left to right, row after row, and a\n// finger follows each wipe with a fresh stroke of the same shade.\nfunction reswatch(P) {\n  if (P.phase === 2) shift(P);\n  P.phase = 0;\n  for (let k = 0; k \u003c ROWS; k++) {\n    const old = P.L[k], s = swatch(old.n);\n    old.prev = null;\n    if (old.p > 0) (s.prev = old), (s.wipe = 0), (s.wwait = 0.07 * k);\n    (s.go = true), (s.p = 0), (s.wait = 0.07 * k + 0.3);\n    P.L[k] = s;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.width = 0.04 + 0.48 * (cl(k[2], -1, 1) + 1);\n  P.fin = cl(k[3], -1, 1);\n  const sp = P.speed, drag = 2.1 / sp, hold = 0.9 / sp, glide = 1.1 / sp;\n  P.t += d;\n  // A band of light crosses the card corner to corner every 18 s at Speed 2.\n  P.sweep += d * 7 * sp;\n  if (P.sweep > 200) P.sweep -= 250;\n  if (input.btnPressed && input.btnPressed[0]) reswatch(P);\n  for (const s of P.L) {\n    if (s.prev) {\n      if (s.wwait > 0) s.wwait -= d;\n      else if ((s.wipe += d / 0.45) >= 1) s.prev = null;\n    }\n    if (s.go && s.p \u003c 1) {\n      if (s.wait > 0) s.wait -= d;\n      else s.p = min(1, s.p + d / drag);\n    }\n  }\n  const B = P.L[ROWS - 1];\n  if (P.phase === 0) {\n    if (B.p >= 1) (P.phase = 1), (P.pt = 0);\n  } else if (P.phase === 1) {\n    if ((P.pt += d) >= hold) (P.phase = 2), (P.pt = 0);\n  } else {\n    P.pt += d;\n    const u = min(1, P.pt / glide);\n    P.off = SL * u * u * (3 - 2 * u);\n    if (u >= 1) shift(P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = 255 * rgb[c];\n}\n\n// The shade of swatch n: the range runs light to deep and back over 14\n// swatches, so the eight on the card always show a stretch of it.\nfunction tone(P, s, m, out, o) {\n  const a = s.n % 14, tri = (a \u003c= 7 ? a : 14 - a) / 7, w = P.width;\n  const d = cl(0.5 + w * (tri - 0.5) + s.jit, 0, 1);\n  const h = P.hue + ROSE + 0.05 * w * (0.5 - d);\n  hsv(h, 0.3 + 0.58 * d, (0.98 - 0.56 * d) * (1 + 0.12 * m), out, o);\n  // The highlight: a pale tint of the same hue, and towards metallic a\n  // champagne one.\n  hsv(h + 0.02 * m, (0.3 + 0.58 * d) * 0.35, 1, out, o + 3);\n  for (let c = 0; c \u003c 3; c++) out[o + 3 + c] = mix(mix(out[o + 3 + c], 255, 0.35), [255, 226, 186][c], 0.55 * m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.fin, m = sm(0.15, 1, f), col = P.col, SH = P.SH, SW = P.SW, L = P.L;\n  // Matte keeps 3% of a sheen, satin 50%, metallic 95%, narrower as it\n  // goes; metallic also throws a weaker second light off the lower edge.\n  const kS = 0.03 + 0.47 * sm(-1, 0, f) + 0.45 * sm(0, 1, f), wS = f \u003c 0 ? mix(0.4, 0.75, -f) : mix(0.4, 0.26, f);\n  for (let b = 0; b \u003c 64; b++) {\n    const q = -1.6 + (3.2 * b) / 63, e = (q + 0.3) / wS, e2 = (q - 0.72) / 0.16;\n    SH[b] = kS * exp(-e * e) + 0.35 * m * exp(-e2 * e2);\n  }\n  const base = mix(0.85, 0.5, m), amp = mix(0.45, 1.4, m);\n  for (let g = 0; g \u003c 180; g++) {\n    const e = (g - P.sweep) / 15;\n    SW[g] = exp(-e * e);\n  }\n  for (let k = 0; k \u003c= ROWS; k++) tone(P, L[k], m, col, k * 6);\n  const dens = 1 - 0.15 * m, t = P.t, off = round(P.off);\n  const XF = L.map((s) => (s.p \u003c 1 ? fingerAt(s) : 1e3)), PF = L.map((s) => (s.prev ? fingerAt(s.prev) : 0));\n  const WX = L.map((s) => -6 + 78 * s.wipe);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = y + off, k = floor(ty / SL), j = ty - k * SL, s = L[k], o = k * 6, xf = XF[k];\n    for (let x = 0; x \u003c W; x++) {\n      const gi = (y * W + x) * 3;\n      let r = GR[gi], g = GR[gi + 1], b = GR[gi + 2];\n      const i = j * W + x;\n      // The swatch being wiped off, still there right of the round edge of\n      // the pad.\n      if (s.prev) {\n        const S = s.prev, e = WX[k] - 2.5 * S.Q[i] * S.Q[i], a = S.A[i] * cl((PF[k] - S.R[i]) * 0.8 + 0.5, 0, 1) * sm(e - 2.5, e + 2.5, x);\n        if (a > 0.004) {\n          const v = S.V[i];\n          (r = mix(r, col[o] * v, a)), (g = mix(g, col[o + 1] * v, a)), (b = mix(b, col[o + 2] * v, a));\n        }\n      }\n      let a = s.A[i];\n      if (a > 0.004) {\n        let wet = 0;\n        if (xf \u003c 1e3) {\n          const dx = xf - s.R[i];\n          a *= cl(dx * 0.8 + 0.5, 0, 1);\n          if (dx > 0 && dx \u003c 4) wet = 0.5 * (1 - dx / 4);\n        }\n        if (a > 0.004) {\n          const Q = s.Q[i], v = s.V[i] * (1 - 0.42 * m * sm(-0.1, 0.6, Q));\n          let pr = col[o] * v, pg = col[o + 1] * v, pb = col[o + 2] * v;\n          const lt = SW[cl(round(y + 0.55 * x), 0, 179)];\n          const h = min(1, SH[cl(round(((Q + 1.6) * 63) / 3.2), 0, 63)] * s.G[i] * (base + amp * lt) + wet);\n          (pr = mix(pr, col[o + 3], h)), (pg = mix(pg, col[o + 4], h)), (pb = mix(pb, col[o + 5], h));\n          const K = s.K[i];\n          if (m > 0 && K > dens && a > 0.4) {\n            const tw = sin(K * 6283 + t * 2.6);\n            if (tw > 0.3) {\n              const z = (tw - 0.3) / 0.7, spk = z * z * m * (0.45 + 0.9 * lt);\n              (pr = mix(pr, 255, spk)), (pg = mix(pg, 248, spk)), (pb = mix(pb, 232, spk));\n            }\n          }\n          (r = mix(r, pr, a)), (g = mix(g, pg, a)), (b = mix(b, pb, a));\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4."},{"name":"Range","min":-1,"max":1,"about":"How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it."},{"name":"Finish","min":-1,"max":1,"about":"At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles."}],"start":[0,2,0,0.06],"measures":{"motion":0.1965,"detail":0.0215,"edges":0.0463,"complexity":1.8772,"coverage":1,"colour":0.2018,"drift":0.0306},"knobResponse":[0.1202,0.0645,0.0452,0.0494]},{"slug":"taffy-cream","title":"Taffy Cream","family":"cosmetic","round":37,"note":"라일락 크림과 아이보리 크림이 높은 통을 채우고, 보이지 않는 핀 셋이 둘씩 서로를 한 바퀴씩 돌며 태피처럼 잡아당겨요. 두 크림의 경계가 윤기 있는 주름으로 늘어나 한 주기에 13배쯤 길어지며 겹이 늘고 가늘어지다 파스텔로 섞이면, 아이보리 테를 두른 새 덩이가 핀이 지날 길에 놓여요. K3 은 핀을 다섯까지 늘리고, 누르면 새 덩이를 바로 놓아요.","idea":"A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.","buttons":"K1 tap lays a fresh dollop in now, on the path of the pins that turn next.","code":"// ===== Patternflow pattern =====\n// Title:   Taffy Cream\n// Family:  cosmetic\n// Idea:    A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after two-tone cream being pulled in a cosmetics mixing vat, with the pins moving as a taffy puller, a rod-stirring protocol in the sense of Philip Boyland, Hassan Aref and Mark Stremler (2000)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1\n//\n// Knob 1: Hue. The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white.\n// Knob 2: Speed. At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower.\n// Knob 3: Pins. How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns.\n// Knob 4: Gloss. At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen.\n// Buttons: K1 tap lays a fresh dollop in now, on the path of the pins that turn next.\n\n// The pins move as the taffy puller: pins on a line, neighbours turning\n// once round each other, the turns alternately clockwise and anticlockwise.\n// The braid of three pins is s1^2 s2^-2, and its Burau matrix at t = -1 is\n// [[5, 2], [2, 1]], whose larger eigenvalue is 3 + 2 sqrt 2 = 5.83, the\n// silver ratio squared: the least a line caught round the pins must be\n// stretched by in one period, whatever the cream between them does.\n// Boyland, Aref and Stremler's half turns, s1 s2^-1, give the golden ratio\n// squared, 2.62. For four and five pins the same matrices give at least 9.9\n// and 12.4 a period of three and four turns. Followed in a scratch script\n// through this pattern's own flow, a line across the middle of the vat grew\n// 17, 13 and 14 times in three periods with three pins, 13 a period with\n// four and 19 to 23 with five: above the floor, as the cream round each\n// pin is sheared besides.\n//\n// The flow: each moving pin carries the cream round it with a stream\n// function psi = (V x (p - r)) g(|p - r|), g = exp(-d^2 / 2 s^2), so cream\n// at the pin goes with the pin and cream a few s away stays put. Each pin\n// has a mirror image behind each of the four walls, moving as its\n// reflection, which takes psi to zero along the walls, so no cream crosses\n// them and it slides along them freely. The velocity is the curl of psi,\n// so the cream keeps its volume. It is worked out on the LED corners, once\n// a step, and read between them.\n//\n// The first try tapered psi to zero over the last 5 LEDs instead. A pin\n// passing 14 LEDs from a side wall left psi near 350 there, and the cream\n// a pin carries comes back round it in a ring two to three s out, so even\n// the top wall, 28 LEDs above the highest pin, saw psi near 75. Squeezed\n// to zero in 5 LEDs, either drove a jet of 40 to 50 LEDs a second along\n// the wall that combed the cream there into stair steps. With the images\n// every corner stays 3.5 s or more from any pin, where g is 0.002, and no\n// taper is needed.\n\nconst W = 64, H = 128, N = W * H;\n// The cream is followed on a grid twice as fine as the LEDs.\nconst GW = 128, GH = 256, GN = GW * GH;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n// One turn takes this many seconds at Speed 1.\nconst TURN = 6;\n// A dollop every this many turns.\nconst EVERY = 5;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The pins stand on x = 32, sp apart and centred in the vat.\nfunction layout(n) {\n  const sp = min(36, 116 / n), ys = [];\n  for (let j = 0; j \u003c n; j++) ys.push(64 + (j - (n - 1) / 2) * sp);\n  return { n, sp, ys, sg: 0.3 * sp };\n}\n\n// The turning pair and the two pins' places and velocities at phase f of\n// turn k: pair j = k mod (n - 1), clockwise for even j. The angle eases in\n// and out, so a turn starts and ends at rest and the next pair takes over.\nfunction pins(S, out) {\n  const L = S.lay, j = S.turn % (L.n - 1), dir = j % 2 === 0 ? 1 : -1, f = S.phase;\n  const cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const th = 2 * PI * (f - sin(2 * PI * f) / (2 * PI)), om = (2 * PI * (1 - cos(2 * PI * f))) / (S.turnLen || 1);\n  for (let k = 0; k \u003c 2; k++) {\n    const al = (k === 0 ? -PI / 2 : PI / 2) + dir * th;\n    out[k * 4] = 32 + R * cos(al);\n    out[k * 4 + 1] = cy + R * sin(al);\n    out[k * 4 + 2] = -R * sin(al) * dir * om;\n    out[k * 4 + 3] = R * cos(al) * dir * om;\n  }\n  return out;\n}\n\n// Velocity at (x, y) in LED units, written to S.vx, S.vy.\nfunction vel(S, x, y, P) {\n  const is2 = 1 / (S.lay.sg * S.lay.sg);\n  let px = 0, py = 0;\n  for (let k = 0; k \u003c 8; k += 4)\n    for (let m = 0; m \u003c 5; m++) {\n      // The pin, then its images behind the left, right, top and bottom walls.\n      const rx = m === 1 ? -P[k] : m === 2 ? 2 * W - P[k] : P[k], ry = m === 3 ? -P[k + 1] : m === 4 ? 2 * H - P[k + 1] : P[k + 1];\n      const vx = m === 1 || m === 2 ? -P[k + 2] : P[k + 2], vy = m === 3 || m === 4 ? -P[k + 3] : P[k + 3];\n      const dx = x - rx, dy = y - ry, d2 = (dx * dx + dy * dy) * is2;\n      if (d2 > 30) continue;\n      const g = Math.exp(-0.5 * d2), c = vx * dy - vy * dx;\n      px += -vy * g - c * g * dx * is2;\n      py += vx * g - c * g * dy * is2;\n    }\n  S.vx = py;\n  S.vy = -px;\n}\n\n// Catmull-Rom sample of the fine grid at grid coordinates (gx, gy), held\n// between the four nearest values so a stripe edge never rings.\nfunction sample(c, gx, gy) {\n  gx = cl(gx, 0, GW - 1.001);\n  gy = cl(gy, 0, GH - 1.001);\n  const ix = floor(gx), iy = floor(gy), fx = gx - ix, fy = gy - iy;\n  const wx0 = ((-0.5 * fx + 1) * fx - 0.5) * fx, wx1 = (1.5 * fx - 2.5) * fx * fx + 1, wx2 = ((-1.5 * fx + 2) * fx + 0.5) * fx, wx3 = (0.5 * fx - 0.5) * fx * fx;\n  const wy0 = ((-0.5 * fy + 1) * fy - 0.5) * fy, wy1 = (1.5 * fy - 2.5) * fy * fy + 1, wy2 = ((-1.5 * fy + 2) * fy + 0.5) * fy, wy3 = (0.5 * fy - 0.5) * fy * fy;\n  const x0 = max(ix - 1, 0), x2 = ix + 1, x3 = min(ix + 2, GW - 1);\n  let s = 0;\n  for (let k = 0; k \u003c 4; k++) {\n    const row = min(max(iy - 1 + k, 0), GH - 1) * GW, wy = k === 0 ? wy0 : k === 1 ? wy1 : k === 2 ? wy2 : wy3;\n    s += wy * (c[row + x0] * wx0 + c[row + ix] * wx1 + c[row + x2] * wx2 + c[row + x3] * wx3);\n  }\n  const a = c[iy * GW + ix], b = c[iy * GW + x2], d = c[(iy + 1) * GW + ix], e = c[(iy + 1) * GW + x2];\n  return cl(s, min(min(a, b), min(d, e)), max(max(a, b), max(d, e)));\n}\n\n// One step of the cream: each fine cell looks back along the flow, a\n// midpoint step, and takes what was there. Cells under LEDs whose corners\n// all move less than a ten-thousandth of an LED a step are copied as they\n// are; at that rate a still cell and a moving neighbour part by 0.2 LED in\n// a minute, and the turning pair changes long before.\nconst VW = W + 1, VH = H + 1;\nfunction advect(S, dt) {\n  const P = pins(S, S.P), c = S.c, o = S.c2, U = S.U, V = S.V, still = S.still;\n  for (let y = 0; y \u003c VH; y++)\n    for (let x = 0; x \u003c VW; x++) {\n      vel(S, x, y, P);\n      U[y * VW + x] = S.vx;\n      V[y * VW + x] = S.vy;\n    }\n  const lim = (1e-4 / dt) * (1e-4 / dt);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * VW + x, r = q + VW;\n      const m = max(max(U[q] * U[q] + V[q] * V[q], U[q + 1] * U[q + 1] + V[q + 1] * V[q + 1]), max(U[r] * U[r] + V[r] * V[r], U[r + 1] * U[r + 1] + V[r + 1] * V[r + 1]));\n      still[y * W + x] = m \u003c lim ? 1 : 0;\n    }\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, ly = gy >> 1;\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const p = gy * GW + gx;\n      if (still[ly * W + (gx >> 1)]) {\n        o[p] = c[p];\n        continue;\n      }\n      const x = (gx + 0.5) / 2;\n      // Bilinear velocity at (x, y), then at the midpoint back along it.\n      let ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, q = iy * VW + ix;\n      let vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      let vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      const mx = cl(x - 0.5 * dt * vx, 0, W - 0.001), my = cl(y - 0.5 * dt * vy, 0, H - 0.001);\n      (ix = floor(mx)), (iy = floor(my)), (fx = mx - ix), (fy = my - iy), (q = iy * VW + ix);\n      vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      o[p] = sample(c, (x - dt * vx) * 2 - 0.5, (y - dt * vy) * 2 - 0.5);\n    }\n  }\n  S.c = o;\n  S.c2 = c;\n}\n\n// A dollop: a tinted core with an ivory rim, its edge wobbling on two\n// harmonics, laid where the next turn's pins will pass.\nfunction dollop(S) {\n  const L = S.lay, j = S.turn % (L.n - 1), cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const al = random() * 2 * PI, x0 = 32 + R * cos(al) * 0.8, y0 = cy + R * sin(al) * 0.8;\n  const r1 = 0.36 * L.sp + 4, r2 = r1 + 4 + 0.08 * L.sp, p1 = random() * 6.3, p2 = random() * 6.3, c = S.c;\n  for (let gy = 0; gy \u003c GH; gy++)\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const dx = (gx + 0.5) / 2 - x0, dy = (gy + 0.5) / 2 - y0, d = sqrt(dx * dx + dy * dy);\n      if (d > r2 * 1.3 + 1) continue;\n      const an = Math.atan2(dy, dx), wob = 1 + 0.12 * sin(2 * an + p1) + 0.07 * sin(3 * an + p2);\n      const e = d / wob;\n      if (e > r2 + 0.5) continue;\n      const core = sm(r1 + 0.5 - e), rim = sm(r2 + 0.5 - e), p = gy * GW + gx;\n      c[p] = c[p] * (1 - rim) + core;\n    }\n}\n\nfunction fresh(S) {\n  // The vat opens with the tinted cream on the left and the ivory on the\n  // right, the line between them wavering across the pins.\n  const c = S.c, ph = random() * 6.3;\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, edge = 32 + 6 * sin((y / H) * 2 * PI * 1.5 + ph);\n    for (let gx = 0; gx \u003c GW; gx++) c[gy * GW + gx] = sm(edge + 0.5 - (gx + 0.5) / 2);\n  }\n}\n\nfunction step(S, d, lim = 3) {\n  S.turnLen = TURN / S.speed;\n  S.clock += d * S.speed;\n  // Substeps keep the pins under 3 LEDs a step: one at Speed 2, two at 3.\n  const vmax = (S.lay.sp / 2) * 4 * PI / S.turnLen, ns = max(1, Math.ceil((vmax * d) / lim));\n  for (let i = 0; i \u003c ns; i++) {\n    advect(S, d / ns);\n    S.phase += d / ns / S.turnLen;\n    if (S.phase >= 1) {\n      S.phase -= 1;\n      S.turn++;\n      if (++S.since >= EVERY) (S.since = 0), dollop(S);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    c: new Float32Array(GN), c2: new Float32Array(GN), led: new Float32Array(N), hgt: new Float32Array(N),\n    P: new Float64Array(8), vx: 0, vy: 0, U: new Float32Array(VW * VH), V: new Float32Array(VW * VH), still: new Uint8Array(N), lay: layout(3), n: 3, hue: 0, speed: 2, gloss: 0.06,\n    turn: 0, phase: 0, since: 0, turnLen: 3, clock: 0, warm: false, tint: [0, 0, 0], ivory: [1, 0.95, 0.86],\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.gloss = cl(k[3], 0, 1);\n  const n = Math.round(cl(k[2], 3, 5));\n  if (n !== S.n) {\n    // The pins are unseen, so they simply take their new places; the turn\n    // under way goes on with the new pair.\n    S.n = n;\n    S.lay = layout(n);\n  }\n  if (!S.warm) {\n    // Open a turn and a half in, the first folds already drawn. The 4.5 s\n    // run in steps of up to 6 LEDs, 60 of them, about 0.3 s of work.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 30; i++) step(S, 0.15, 6);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) dollop(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, led = S.led, hgt = S.hgt, tint = S.tint, iv = S.ivory;\n  // The tint: lilac at 0. From coral to lime it is brought up to full\n  // brightness and its shading made shallower, as a darker peach reads brown\n  // and a darker butter khaki. Next to butter and lime the ivory turns to a\n  // cooler white, or the two creams would be one.\n  const h = S.hue + 0.76, hh = h - floor(h);\n  const warm = sm(hh / 0.05) * sm((0.3 - hh) / 0.06) + sm((hh - 0.96) / 0.04), yel = sm((hh - 0.08) / 0.05) * sm((0.32 - hh) / 0.05);\n  hsv(h, 0.46 + 0.08 * warm, 0.9 + 0.1 * warm, tint);\n  iv[0] = 1 - 0.03 * yel;\n  iv[1] = 0.95 + 0.02 * yel;\n  iv[2] = 0.86 + 0.13 * yel;\n  const deep = 1 - 0.45 * warm;\n  // Each LED averages its 2 x 2 fine cells, so stripes under an LED wide\n  // blend into the pastel between the two creams.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 2 * y * GW + 2 * x;\n      led[y * W + x] = 0.25 * (c[g] + c[g + 1] + c[g + GW] + c[g + GW + 1]);\n    }\n  // The surface: the tinted cream stands a little proud of the ivory, so\n  // every fold has two slopes, and a slow swell runs under both.\n  const t = S.clock;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0, wsum = 0;\n      for (let v = -1; v \u003c= 1; v++)\n        for (let u = -1; u \u003c= 1; u++) {\n          const xx = cl(x + u, 0, W - 1), yy = cl(y + v, 0, H - 1), w = u === 0 && v === 0 ? 4 : u === 0 || v === 0 ? 2 : 1;\n          s += led[yy * W + xx] * w;\n          wsum += w;\n        }\n      hgt[y * W + x] = (2.4 * s) / wsum + 0.5 * sin(x * 0.11 + y * 0.05 + t * 0.4) * sin(y * 0.07 - t * 0.3);\n    }\n  // The light comes from the upper left and drifts across and back every\n  // 20 s of turning; Gloss tightens the highlight and brightens it.\n  const gl = S.gloss, la = -2.3 + 0.6 * sin((2 * PI * t) / 20), le = 0.75;\n  const lx = cos(la) * cos(le), ly = sin(la) * cos(le), lz = sin(le);\n  const hx = lx, hy = ly, hz = lz + 1, hn = sqrt(hx * hx + hy * hy + hz * hz);\n  const ex = pow(2, 2.5 + 4 * gl), ks = 0.2 + 0.7 * gl, slope = 0.7 + 1.2 * gl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (hgt[y * W + min(x + 1, W - 1)] - hgt[y * W + max(x - 1, 0)]) * 0.5 * slope;\n      const gy = (hgt[min(y + 1, H - 1) * W + x] - hgt[max(y - 1, 0) * W + x]) * 0.5 * slope;\n      const nl = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * nl, ny = -gy * nl, nz = nl;\n      // A broad satin sheen lifts flat cream by about 0.12; a tight gloss\n      // does not, so the lift is put back by hand and the ivory keeps its\n      // level at any Gloss instead of going beige.\n      const diff = 1 - (0.09 - 0.1 * gl + 0.28 * (lz - (nx * lx + ny * ly + nz * lz))) * deep;\n      const spec = ks * pow(max(0, (nx * hx + ny * hy + nz * hz) / hn), ex);\n      const m = led[p];\n      const r = (iv[0] + (tint[0] - iv[0]) * m) * diff + spec;\n      const g = (iv[1] + (tint[1] - iv[1]) * m) * diff + spec;\n      const b = (iv[2] + (tint[2] - iv[2]) * m) * diff + spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","layer":{"id":"layer-taffy-cream","type":"code","name":"taffy-cream","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Taffy Cream\n// Family:  cosmetic\n// Idea:    A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after two-tone cream being pulled in a cosmetics mixing vat, with the pins moving as a taffy puller, a rod-stirring protocol in the sense of Philip Boyland, Hassan Aref and Mark Stremler (2000)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1\n//\n// Knob 1: Hue. The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white.\n// Knob 2: Speed. At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower.\n// Knob 3: Pins. How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns.\n// Knob 4: Gloss. At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen.\n// Buttons: K1 tap lays a fresh dollop in now, on the path of the pins that turn next.\n\n// The pins move as the taffy puller: pins on a line, neighbours turning\n// once round each other, the turns alternately clockwise and anticlockwise.\n// The braid of three pins is s1^2 s2^-2, and its Burau matrix at t = -1 is\n// [[5, 2], [2, 1]], whose larger eigenvalue is 3 + 2 sqrt 2 = 5.83, the\n// silver ratio squared: the least a line caught round the pins must be\n// stretched by in one period, whatever the cream between them does.\n// Boyland, Aref and Stremler's half turns, s1 s2^-1, give the golden ratio\n// squared, 2.62. For four and five pins the same matrices give at least 9.9\n// and 12.4 a period of three and four turns. Followed in a scratch script\n// through this pattern's own flow, a line across the middle of the vat grew\n// 17, 13 and 14 times in three periods with three pins, 13 a period with\n// four and 19 to 23 with five: above the floor, as the cream round each\n// pin is sheared besides.\n//\n// The flow: each moving pin carries the cream round it with a stream\n// function psi = (V x (p - r)) g(|p - r|), g = exp(-d^2 / 2 s^2), so cream\n// at the pin goes with the pin and cream a few s away stays put. Each pin\n// has a mirror image behind each of the four walls, moving as its\n// reflection, which takes psi to zero along the walls, so no cream crosses\n// them and it slides along them freely. The velocity is the curl of psi,\n// so the cream keeps its volume. It is worked out on the LED corners, once\n// a step, and read between them.\n//\n// The first try tapered psi to zero over the last 5 LEDs instead. A pin\n// passing 14 LEDs from a side wall left psi near 350 there, and the cream\n// a pin carries comes back round it in a ring two to three s out, so even\n// the top wall, 28 LEDs above the highest pin, saw psi near 75. Squeezed\n// to zero in 5 LEDs, either drove a jet of 40 to 50 LEDs a second along\n// the wall that combed the cream there into stair steps. With the images\n// every corner stays 3.5 s or more from any pin, where g is 0.002, and no\n// taper is needed.\n\nconst W = 64, H = 128, N = W * H;\n// The cream is followed on a grid twice as fine as the LEDs.\nconst GW = 128, GH = 256, GN = GW * GH;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n// One turn takes this many seconds at Speed 1.\nconst TURN = 6;\n// A dollop every this many turns.\nconst EVERY = 5;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The pins stand on x = 32, sp apart and centred in the vat.\nfunction layout(n) {\n  const sp = min(36, 116 / n), ys = [];\n  for (let j = 0; j \u003c n; j++) ys.push(64 + (j - (n - 1) / 2) * sp);\n  return { n, sp, ys, sg: 0.3 * sp };\n}\n\n// The turning pair and the two pins' places and velocities at phase f of\n// turn k: pair j = k mod (n - 1), clockwise for even j. The angle eases in\n// and out, so a turn starts and ends at rest and the next pair takes over.\nfunction pins(S, out) {\n  const L = S.lay, j = S.turn % (L.n - 1), dir = j % 2 === 0 ? 1 : -1, f = S.phase;\n  const cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const th = 2 * PI * (f - sin(2 * PI * f) / (2 * PI)), om = (2 * PI * (1 - cos(2 * PI * f))) / (S.turnLen || 1);\n  for (let k = 0; k \u003c 2; k++) {\n    const al = (k === 0 ? -PI / 2 : PI / 2) + dir * th;\n    out[k * 4] = 32 + R * cos(al);\n    out[k * 4 + 1] = cy + R * sin(al);\n    out[k * 4 + 2] = -R * sin(al) * dir * om;\n    out[k * 4 + 3] = R * cos(al) * dir * om;\n  }\n  return out;\n}\n\n// Velocity at (x, y) in LED units, written to S.vx, S.vy.\nfunction vel(S, x, y, P) {\n  const is2 = 1 / (S.lay.sg * S.lay.sg);\n  let px = 0, py = 0;\n  for (let k = 0; k \u003c 8; k += 4)\n    for (let m = 0; m \u003c 5; m++) {\n      // The pin, then its images behind the left, right, top and bottom walls.\n      const rx = m === 1 ? -P[k] : m === 2 ? 2 * W - P[k] : P[k], ry = m === 3 ? -P[k + 1] : m === 4 ? 2 * H - P[k + 1] : P[k + 1];\n      const vx = m === 1 || m === 2 ? -P[k + 2] : P[k + 2], vy = m === 3 || m === 4 ? -P[k + 3] : P[k + 3];\n      const dx = x - rx, dy = y - ry, d2 = (dx * dx + dy * dy) * is2;\n      if (d2 > 30) continue;\n      const g = Math.exp(-0.5 * d2), c = vx * dy - vy * dx;\n      px += -vy * g - c * g * dx * is2;\n      py += vx * g - c * g * dy * is2;\n    }\n  S.vx = py;\n  S.vy = -px;\n}\n\n// Catmull-Rom sample of the fine grid at grid coordinates (gx, gy), held\n// between the four nearest values so a stripe edge never rings.\nfunction sample(c, gx, gy) {\n  gx = cl(gx, 0, GW - 1.001);\n  gy = cl(gy, 0, GH - 1.001);\n  const ix = floor(gx), iy = floor(gy), fx = gx - ix, fy = gy - iy;\n  const wx0 = ((-0.5 * fx + 1) * fx - 0.5) * fx, wx1 = (1.5 * fx - 2.5) * fx * fx + 1, wx2 = ((-1.5 * fx + 2) * fx + 0.5) * fx, wx3 = (0.5 * fx - 0.5) * fx * fx;\n  const wy0 = ((-0.5 * fy + 1) * fy - 0.5) * fy, wy1 = (1.5 * fy - 2.5) * fy * fy + 1, wy2 = ((-1.5 * fy + 2) * fy + 0.5) * fy, wy3 = (0.5 * fy - 0.5) * fy * fy;\n  const x0 = max(ix - 1, 0), x2 = ix + 1, x3 = min(ix + 2, GW - 1);\n  let s = 0;\n  for (let k = 0; k \u003c 4; k++) {\n    const row = min(max(iy - 1 + k, 0), GH - 1) * GW, wy = k === 0 ? wy0 : k === 1 ? wy1 : k === 2 ? wy2 : wy3;\n    s += wy * (c[row + x0] * wx0 + c[row + ix] * wx1 + c[row + x2] * wx2 + c[row + x3] * wx3);\n  }\n  const a = c[iy * GW + ix], b = c[iy * GW + x2], d = c[(iy + 1) * GW + ix], e = c[(iy + 1) * GW + x2];\n  return cl(s, min(min(a, b), min(d, e)), max(max(a, b), max(d, e)));\n}\n\n// One step of the cream: each fine cell looks back along the flow, a\n// midpoint step, and takes what was there. Cells under LEDs whose corners\n// all move less than a ten-thousandth of an LED a step are copied as they\n// are; at that rate a still cell and a moving neighbour part by 0.2 LED in\n// a minute, and the turning pair changes long before.\nconst VW = W + 1, VH = H + 1;\nfunction advect(S, dt) {\n  const P = pins(S, S.P), c = S.c, o = S.c2, U = S.U, V = S.V, still = S.still;\n  for (let y = 0; y \u003c VH; y++)\n    for (let x = 0; x \u003c VW; x++) {\n      vel(S, x, y, P);\n      U[y * VW + x] = S.vx;\n      V[y * VW + x] = S.vy;\n    }\n  const lim = (1e-4 / dt) * (1e-4 / dt);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * VW + x, r = q + VW;\n      const m = max(max(U[q] * U[q] + V[q] * V[q], U[q + 1] * U[q + 1] + V[q + 1] * V[q + 1]), max(U[r] * U[r] + V[r] * V[r], U[r + 1] * U[r + 1] + V[r + 1] * V[r + 1]));\n      still[y * W + x] = m \u003c lim ? 1 : 0;\n    }\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, ly = gy >> 1;\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const p = gy * GW + gx;\n      if (still[ly * W + (gx >> 1)]) {\n        o[p] = c[p];\n        continue;\n      }\n      const x = (gx + 0.5) / 2;\n      // Bilinear velocity at (x, y), then at the midpoint back along it.\n      let ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, q = iy * VW + ix;\n      let vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      let vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      const mx = cl(x - 0.5 * dt * vx, 0, W - 0.001), my = cl(y - 0.5 * dt * vy, 0, H - 0.001);\n      (ix = floor(mx)), (iy = floor(my)), (fx = mx - ix), (fy = my - iy), (q = iy * VW + ix);\n      vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      o[p] = sample(c, (x - dt * vx) * 2 - 0.5, (y - dt * vy) * 2 - 0.5);\n    }\n  }\n  S.c = o;\n  S.c2 = c;\n}\n\n// A dollop: a tinted core with an ivory rim, its edge wobbling on two\n// harmonics, laid where the next turn's pins will pass.\nfunction dollop(S) {\n  const L = S.lay, j = S.turn % (L.n - 1), cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const al = random() * 2 * PI, x0 = 32 + R * cos(al) * 0.8, y0 = cy + R * sin(al) * 0.8;\n  const r1 = 0.36 * L.sp + 4, r2 = r1 + 4 + 0.08 * L.sp, p1 = random() * 6.3, p2 = random() * 6.3, c = S.c;\n  for (let gy = 0; gy \u003c GH; gy++)\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const dx = (gx + 0.5) / 2 - x0, dy = (gy + 0.5) / 2 - y0, d = sqrt(dx * dx + dy * dy);\n      if (d > r2 * 1.3 + 1) continue;\n      const an = Math.atan2(dy, dx), wob = 1 + 0.12 * sin(2 * an + p1) + 0.07 * sin(3 * an + p2);\n      const e = d / wob;\n      if (e > r2 + 0.5) continue;\n      const core = sm(r1 + 0.5 - e), rim = sm(r2 + 0.5 - e), p = gy * GW + gx;\n      c[p] = c[p] * (1 - rim) + core;\n    }\n}\n\nfunction fresh(S) {\n  // The vat opens with the tinted cream on the left and the ivory on the\n  // right, the line between them wavering across the pins.\n  const c = S.c, ph = random() * 6.3;\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, edge = 32 + 6 * sin((y / H) * 2 * PI * 1.5 + ph);\n    for (let gx = 0; gx \u003c GW; gx++) c[gy * GW + gx] = sm(edge + 0.5 - (gx + 0.5) / 2);\n  }\n}\n\nfunction step(S, d, lim = 3) {\n  S.turnLen = TURN / S.speed;\n  S.clock += d * S.speed;\n  // Substeps keep the pins under 3 LEDs a step: one at Speed 2, two at 3.\n  const vmax = (S.lay.sp / 2) * 4 * PI / S.turnLen, ns = max(1, Math.ceil((vmax * d) / lim));\n  for (let i = 0; i \u003c ns; i++) {\n    advect(S, d / ns);\n    S.phase += d / ns / S.turnLen;\n    if (S.phase >= 1) {\n      S.phase -= 1;\n      S.turn++;\n      if (++S.since >= EVERY) (S.since = 0), dollop(S);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    c: new Float32Array(GN), c2: new Float32Array(GN), led: new Float32Array(N), hgt: new Float32Array(N),\n    P: new Float64Array(8), vx: 0, vy: 0, U: new Float32Array(VW * VH), V: new Float32Array(VW * VH), still: new Uint8Array(N), lay: layout(3), n: 3, hue: 0, speed: 2, gloss: 0.06,\n    turn: 0, phase: 0, since: 0, turnLen: 3, clock: 0, warm: false, tint: [0, 0, 0], ivory: [1, 0.95, 0.86],\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.gloss = cl(k[3], 0, 1);\n  const n = Math.round(cl(k[2], 3, 5));\n  if (n !== S.n) {\n    // The pins are unseen, so they simply take their new places; the turn\n    // under way goes on with the new pair.\n    S.n = n;\n    S.lay = layout(n);\n  }\n  if (!S.warm) {\n    // Open a turn and a half in, the first folds already drawn. The 4.5 s\n    // run in steps of up to 6 LEDs, 60 of them, about 0.3 s of work.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 30; i++) step(S, 0.15, 6);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) dollop(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, led = S.led, hgt = S.hgt, tint = S.tint, iv = S.ivory;\n  // The tint: lilac at 0. From coral to lime it is brought up to full\n  // brightness and its shading made shallower, as a darker peach reads brown\n  // and a darker butter khaki. Next to butter and lime the ivory turns to a\n  // cooler white, or the two creams would be one.\n  const h = S.hue + 0.76, hh = h - floor(h);\n  const warm = sm(hh / 0.05) * sm((0.3 - hh) / 0.06) + sm((hh - 0.96) / 0.04), yel = sm((hh - 0.08) / 0.05) * sm((0.32 - hh) / 0.05);\n  hsv(h, 0.46 + 0.08 * warm, 0.9 + 0.1 * warm, tint);\n  iv[0] = 1 - 0.03 * yel;\n  iv[1] = 0.95 + 0.02 * yel;\n  iv[2] = 0.86 + 0.13 * yel;\n  const deep = 1 - 0.45 * warm;\n  // Each LED averages its 2 x 2 fine cells, so stripes under an LED wide\n  // blend into the pastel between the two creams.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 2 * y * GW + 2 * x;\n      led[y * W + x] = 0.25 * (c[g] + c[g + 1] + c[g + GW] + c[g + GW + 1]);\n    }\n  // The surface: the tinted cream stands a little proud of the ivory, so\n  // every fold has two slopes, and a slow swell runs under both.\n  const t = S.clock;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0, wsum = 0;\n      for (let v = -1; v \u003c= 1; v++)\n        for (let u = -1; u \u003c= 1; u++) {\n          const xx = cl(x + u, 0, W - 1), yy = cl(y + v, 0, H - 1), w = u === 0 && v === 0 ? 4 : u === 0 || v === 0 ? 2 : 1;\n          s += led[yy * W + xx] * w;\n          wsum += w;\n        }\n      hgt[y * W + x] = (2.4 * s) / wsum + 0.5 * sin(x * 0.11 + y * 0.05 + t * 0.4) * sin(y * 0.07 - t * 0.3);\n    }\n  // The light comes from the upper left and drifts across and back every\n  // 20 s of turning; Gloss tightens the highlight and brightens it.\n  const gl = S.gloss, la = -2.3 + 0.6 * sin((2 * PI * t) / 20), le = 0.75;\n  const lx = cos(la) * cos(le), ly = sin(la) * cos(le), lz = sin(le);\n  const hx = lx, hy = ly, hz = lz + 1, hn = sqrt(hx * hx + hy * hy + hz * hz);\n  const ex = pow(2, 2.5 + 4 * gl), ks = 0.2 + 0.7 * gl, slope = 0.7 + 1.2 * gl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (hgt[y * W + min(x + 1, W - 1)] - hgt[y * W + max(x - 1, 0)]) * 0.5 * slope;\n      const gy = (hgt[min(y + 1, H - 1) * W + x] - hgt[max(y - 1, 0) * W + x]) * 0.5 * slope;\n      const nl = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * nl, ny = -gy * nl, nz = nl;\n      // A broad satin sheen lifts flat cream by about 0.12; a tight gloss\n      // does not, so the lift is put back by hand and the ivory keeps its\n      // level at any Gloss instead of going beige.\n      const diff = 1 - (0.09 - 0.1 * gl + 0.28 * (lz - (nx * lx + ny * ly + nz * lz))) * deep;\n      const spec = ks * pow(max(0, (nx * hx + ny * hy + nz * hz) / hn), ex);\n      const m = led[p];\n      const r = (iv[0] + (tint[0] - iv[0]) * m) * diff + spec;\n      const g = (iv[1] + (tint[1] - iv[1]) * m) * diff + spec;\n      const b = (iv[2] + (tint[2] - iv[2]) * m) * diff + spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower."},{"name":"Pins","min":3,"max":5,"about":"How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns."},{"name":"Gloss","min":0,"max":1,"about":"At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen."}],"start":[0,2,3,0.06],"measures":{"motion":0.1992,"detail":0.0229,"edges":0.0398,"complexity":1.5866,"coverage":1,"colour":0.2145,"drift":0.034},"knobResponse":[0.174,0.088,0.0927,0.0503]},{"slug":"talbot-carpet","title":"Talbot Carpet","family":"wave","round":32,"note":"좁은 슬릿 격자를 지난 빛의 세기를, 격자에서 멀어지는 거리를 세로로 두고 그려요. 슬릿 상이 한 탤벗 길이마다 그대로, 반 길이마다 반 주기 옆으로 되살아나고, 그 사이 분수 거리에서는 둘과 넷으로 갈라진 상과 곧은 빛줄기가 엇갈려요. 남색 골과 청록 바닥, 흰 방울이 1 LED 망점 위에서 1초에 15줄씩 올라가요.","idea":"Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.","buttons":"K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.","code":"// ===== Patternflow pattern =====\n// Title:   Talbot Carpet\n// Family:  wave\n// Idea:    Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Talbot effect (Henry Fox Talbot, 1836) and quantum carpets (Michael Berry, 1996), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4\n//\n// Knob 1: Hue. Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow.\n// Knob 2: Speed. How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds.\n// Knob 3: Slit. The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies.\n// Knob 4: Periods. How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter.\n// Buttons: K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.\n\nconst W = 64, H = 128, M = 256, R = 512;\nconst { floor, min, sin, cos, pow, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Share of the lit LEDs in the screen that go to beads: the brightest 14.5%\n// of each frame, which fixes the measured edges near 0.14.\nconst CUT = 0.855;\n\n// In-place radix-2 FFT with the + sign, so it sums c_n e^{+2 pi i n j / M}.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// psi(x, tau) = sum c_n exp(2 pi i (n x - n^2 tau)) for a slit of width w\n// centred on x = 0, 256 terms with a Gaussian roll-off, at R steps of tau\n// over one Talbot length. Each row keeps a running sum of |psi|^2 over one\n// period, so a column of any width is two lookups.\nfunction build(P) {\n  const w = P.w, c = new Float64Array(M), re = new Float64Array(M), im = new Float64Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    const n = k \u003c M / 2 ? k : k - M;\n    c[k] = (n === 0 ? w : sin(PI * n * w) / (PI * n)) * exp(-(n / 24) * (n / 24));\n  }\n  const S = P.sum;\n  for (let r = 0; r \u003c R; r++) {\n    for (let k = 0; k \u003c M; k++) {\n      const n = k \u003c M / 2 ? k : k - M;\n      // n^2 r is an integer, so the phase wraps exactly.\n      const ph = (-2 * PI * ((n * n * r) % R)) / R;\n      re[k] = c[k] * cos(ph);\n      im[k] = c[k] * sin(ph);\n    }\n    fft(re, im);\n    const o = r * (M + 1);\n    S[o] = 0;\n    for (let j = 0; j \u003c M; j++) S[o + j + 1] = S[o + j] + re[j] * re[j] + im[j] * im[j];\n  }\n  P.builtW = w;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Box blur, rows wrapping (the carpet is periodic across), columns clamped.\nfunction blur(src, dst, tmp, rad) {\n  const n = 2 * rad + 1;\n  for (let y = 0; y \u003c H; y++) {\n    let acc = 0;\n    for (let k = -rad; k \u003c= rad; k++) acc += src[y * W + ((k + W) % W)];\n    for (let x = 0; x \u003c W; x++) {\n      tmp[y * W + x] = acc / n;\n      acc += src[y * W + ((x + rad + 1) % W)] - src[y * W + ((x - rad + W) % W)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      let acc = 0;\n      for (let k = -rad; k \u003c= rad; k++) acc += tmp[cl(y + k, 0, H - 1) * W + x];\n      dst[y * W + x] = acc / n;\n    }\n}\n\nexport function setup(params) {\n  const N = W * H;\n  params.s = {\n    t: 0, hue: 0, speed: 2, w: 0.1, builtW: -1, per: 1,\n    sum: new Float32Array(R * (M + 1)), I: new Float32Array(N), G: new Float32Array(N), T: new Float32Array(N),\n    U: new Float32Array(N), Lv: new Int16Array(N), srt: new Float32Array(N / 2), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 1], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.w = round((0.1 + 0.35 * cl(k[2], 0, 1)) * 100) / 100;\n  P.per = cl(k[3], 1, 4);\n  if (P.w !== P.builtW) build(P);\n  P.t += d * P.speed * 0.06;\n  if (input.btnPressed && input.btnPressed[0]) P.t += 0.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { sum: S, I, G, T, U, Lv, srt, c } = P;\n  // Row y holds tau from t + y/128 to t + (y+1)/128: four table rows,\n  // averaged, and each LED the mean over its width of the period.\n  for (let y = 0; y \u003c H; y++) {\n    const ra = floor((P.t + y / H) * R), rb = Math.max(ra + 1, floor((P.t + (y + 1) / H) * R));\n    for (let x = 0; x \u003c W; x++) I[y * W + x] = 0;\n    for (let rr = ra; rr \u003c rb; rr++) {\n      const o = (((rr % R) + R) % R) * (M + 1);\n      const at = (u) => {\n        const q = floor(u / M), v = u - q * M, i = floor(v);\n        return q * S[o + M] + S[o + i] + (S[o + i + 1] - S[o + i]) * (v - i);\n      };\n      let prev = at((0.5 * M) | 0);\n      for (let x = 0; x \u003c W; x++) {\n        const u1 = (((x + 1) / W) * P.per + 0.5) * M, next = at(u1);\n        I[y * W + x] += (next - prev) / ((P.per * M) / W) / (rb - ra);\n        prev = next;\n      }\n    }\n  }\n  // The screen: LEDs with x + y odd carry a soft glow of the carpet, blurred\n  // so it never steps more than a few levels from one LED to the next. The\n  // others stand 40 above the darkest glow beside them, so every pair of\n  // neighbours differs by 40 or a little less, or they hold a bead at full\n  // brightness where the carpet is brightest.\n  blur(I, T, U, 2);\n  blur(T, G, U, 2);\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) srt[n++] = I[y * W + x];\n  srt.sort();\n  const hi = srt[floor(n * CUT)], top = srt[floor(n * 0.995)], mid = srt[n >> 1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = (y + 1) & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      Lv[p] = round(8 + 70 * cl(pow(G[p] / (2.2 * mid), 0.9), 0, 1));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = y & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      if (I[p] > hi) {\n        Lv[p] = 255;\n        continue;\n      }\n      let m = 255;\n      if (x > 0) m = min(m, Lv[p - 1]);\n      if (x \u003c W - 1) m = min(m, Lv[p + 1]);\n      if (y > 0) m = min(m, Lv[p - W]);\n      if (y \u003c H - 1) m = min(m, Lv[p + W]);\n      Lv[p] = m + 40;\n    }\n  // Colour carries the fine carpet at no cost to the screen: the canals\n  // deep and saturated, the floor paler and greener as it brightens.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, L = Lv[p];\n      if (L === 255) hsv(P.hue + 0.5, 0.35 * (1 - cl((I[p] - hi) / (top - hi), 0, 1)), 1, c);\n      else {\n        const t = cl(pow(I[p] / (2.5 * mid), 0.7), 0, 1);\n        hsv(P.hue + 0.64 - 0.14 * t, 1 - 0.5 * t, 1, c);\n      }\n      display.setPixel(x, y, round(c[0] * L), round(c[1] * L), round(c[2] * L));\n    }\n}\n","layer":{"id":"layer-talbot-carpet","type":"code","name":"talbot-carpet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Talbot Carpet\n// Family:  wave\n// Idea:    Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Talbot effect (Henry Fox Talbot, 1836) and quantum carpets (Michael Berry, 1996), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4\n//\n// Knob 1: Hue. Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow.\n// Knob 2: Speed. How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds.\n// Knob 3: Slit. The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies.\n// Knob 4: Periods. How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter.\n// Buttons: K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.\n\nconst W = 64, H = 128, M = 256, R = 512;\nconst { floor, min, sin, cos, pow, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Share of the lit LEDs in the screen that go to beads: the brightest 14.5%\n// of each frame, which fixes the measured edges near 0.14.\nconst CUT = 0.855;\n\n// In-place radix-2 FFT with the + sign, so it sums c_n e^{+2 pi i n j / M}.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// psi(x, tau) = sum c_n exp(2 pi i (n x - n^2 tau)) for a slit of width w\n// centred on x = 0, 256 terms with a Gaussian roll-off, at R steps of tau\n// over one Talbot length. Each row keeps a running sum of |psi|^2 over one\n// period, so a column of any width is two lookups.\nfunction build(P) {\n  const w = P.w, c = new Float64Array(M), re = new Float64Array(M), im = new Float64Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    const n = k \u003c M / 2 ? k : k - M;\n    c[k] = (n === 0 ? w : sin(PI * n * w) / (PI * n)) * exp(-(n / 24) * (n / 24));\n  }\n  const S = P.sum;\n  for (let r = 0; r \u003c R; r++) {\n    for (let k = 0; k \u003c M; k++) {\n      const n = k \u003c M / 2 ? k : k - M;\n      // n^2 r is an integer, so the phase wraps exactly.\n      const ph = (-2 * PI * ((n * n * r) % R)) / R;\n      re[k] = c[k] * cos(ph);\n      im[k] = c[k] * sin(ph);\n    }\n    fft(re, im);\n    const o = r * (M + 1);\n    S[o] = 0;\n    for (let j = 0; j \u003c M; j++) S[o + j + 1] = S[o + j] + re[j] * re[j] + im[j] * im[j];\n  }\n  P.builtW = w;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Box blur, rows wrapping (the carpet is periodic across), columns clamped.\nfunction blur(src, dst, tmp, rad) {\n  const n = 2 * rad + 1;\n  for (let y = 0; y \u003c H; y++) {\n    let acc = 0;\n    for (let k = -rad; k \u003c= rad; k++) acc += src[y * W + ((k + W) % W)];\n    for (let x = 0; x \u003c W; x++) {\n      tmp[y * W + x] = acc / n;\n      acc += src[y * W + ((x + rad + 1) % W)] - src[y * W + ((x - rad + W) % W)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      let acc = 0;\n      for (let k = -rad; k \u003c= rad; k++) acc += tmp[cl(y + k, 0, H - 1) * W + x];\n      dst[y * W + x] = acc / n;\n    }\n}\n\nexport function setup(params) {\n  const N = W * H;\n  params.s = {\n    t: 0, hue: 0, speed: 2, w: 0.1, builtW: -1, per: 1,\n    sum: new Float32Array(R * (M + 1)), I: new Float32Array(N), G: new Float32Array(N), T: new Float32Array(N),\n    U: new Float32Array(N), Lv: new Int16Array(N), srt: new Float32Array(N / 2), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 1], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.w = round((0.1 + 0.35 * cl(k[2], 0, 1)) * 100) / 100;\n  P.per = cl(k[3], 1, 4);\n  if (P.w !== P.builtW) build(P);\n  P.t += d * P.speed * 0.06;\n  if (input.btnPressed && input.btnPressed[0]) P.t += 0.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { sum: S, I, G, T, U, Lv, srt, c } = P;\n  // Row y holds tau from t + y/128 to t + (y+1)/128: four table rows,\n  // averaged, and each LED the mean over its width of the period.\n  for (let y = 0; y \u003c H; y++) {\n    const ra = floor((P.t + y / H) * R), rb = Math.max(ra + 1, floor((P.t + (y + 1) / H) * R));\n    for (let x = 0; x \u003c W; x++) I[y * W + x] = 0;\n    for (let rr = ra; rr \u003c rb; rr++) {\n      const o = (((rr % R) + R) % R) * (M + 1);\n      const at = (u) => {\n        const q = floor(u / M), v = u - q * M, i = floor(v);\n        return q * S[o + M] + S[o + i] + (S[o + i + 1] - S[o + i]) * (v - i);\n      };\n      let prev = at((0.5 * M) | 0);\n      for (let x = 0; x \u003c W; x++) {\n        const u1 = (((x + 1) / W) * P.per + 0.5) * M, next = at(u1);\n        I[y * W + x] += (next - prev) / ((P.per * M) / W) / (rb - ra);\n        prev = next;\n      }\n    }\n  }\n  // The screen: LEDs with x + y odd carry a soft glow of the carpet, blurred\n  // so it never steps more than a few levels from one LED to the next. The\n  // others stand 40 above the darkest glow beside them, so every pair of\n  // neighbours differs by 40 or a little less, or they hold a bead at full\n  // brightness where the carpet is brightest.\n  blur(I, T, U, 2);\n  blur(T, G, U, 2);\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) srt[n++] = I[y * W + x];\n  srt.sort();\n  const hi = srt[floor(n * CUT)], top = srt[floor(n * 0.995)], mid = srt[n >> 1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = (y + 1) & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      Lv[p] = round(8 + 70 * cl(pow(G[p] / (2.2 * mid), 0.9), 0, 1));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = y & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      if (I[p] > hi) {\n        Lv[p] = 255;\n        continue;\n      }\n      let m = 255;\n      if (x > 0) m = min(m, Lv[p - 1]);\n      if (x \u003c W - 1) m = min(m, Lv[p + 1]);\n      if (y > 0) m = min(m, Lv[p - W]);\n      if (y \u003c H - 1) m = min(m, Lv[p + W]);\n      Lv[p] = m + 40;\n    }\n  // Colour carries the fine carpet at no cost to the screen: the canals\n  // deep and saturated, the floor paler and greener as it brightens.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, L = Lv[p];\n      if (L === 255) hsv(P.hue + 0.5, 0.35 * (1 - cl((I[p] - hi) / (top - hi), 0, 1)), 1, c);\n      else {\n        const t = cl(pow(I[p] / (2.5 * mid), 0.7), 0, 1);\n        hsv(P.hue + 0.64 - 0.14 * t, 1 - 0.5 * t, 1, c);\n      }\n      display.setPixel(x, y, round(c[0] * L), round(c[1] * L), round(c[2] * L));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds."},{"name":"Slit","min":0,"max":1,"about":"The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies."},{"name":"Periods","min":1,"max":4,"about":"How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter."}],"start":[0,2,0,1],"measures":{"motion":0.9679,"detail":0.2277,"edges":0.1425,"complexity":1.3191,"coverage":0.9648,"colour":0.1367,"drift":0.088},"knobResponse":[0.1564,0.1417,0.1324,0.1293]},{"slug":"test-card","title":"Test Card","family":"glitch","round":1,"note":"텔레비전 컬러 바를, 수직 동기를 잃어 가는 수상기가 보여 주는 대로 그려요.","idea":"A television's colour bars, as a set that is losing its hold would show them.","buttons":"K1 tap tears the picture now.","code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","layer":{"id":"layer-test-card","type":"code","name":"test-card","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole set of bars round the colour wheel."},{"name":"Bursts","min":0.2,"max":6,"about":"How often the picture tears."},{"name":"Damage","min":0.15,"max":1,"about":"From a clean card with the odd twitch to bars torn apart and smeared."},{"name":"Roll","min":0,"max":1,"about":"The vertical hold: the picture starts to slip and roll."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.2635,"detail":0.0837,"edges":0.7844,"complexity":0.0808,"coverage":0.8476,"colour":0.6265,"drift":0.0606},"knobResponse":[0.3578,0.0535,0.0933,0.3676]},{"slug":"tetromino-well","title":"Tetromino Well","family":"algo","round":10,"note":"세운 패널이 너비 10칸, 높이 21칸의 테트리스 우물이에요. 지치지 않는 플레이어가 꼭대기에 기다리는 다음 조각을 보며 패널의 3분의 2 높이까지 쌓고, 오른쪽 한 줄을 비워 두었다가 긴 막대가 오면 네 줄을 한꺼번에 지워요. K1 을 누르면 긴 막대가 다음 조각으로 와요.","idea":"The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.","buttons":"K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.","code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","layer":{"id":"layer-tetromino-well","type":"code","name":"tetromino-well","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L."},{"name":"Speed","min":0.2,"max":3,"about":"How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one."},{"name":"Headroom","min":6,"max":18,"about":"The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor."},{"name":"Garbage","min":0,"max":1,"about":"The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it."}],"start":[0,2,6,0.06],"measures":{"motion":0.2184,"detail":0.0909,"edges":0.7088,"complexity":0.1224,"coverage":0.6512,"colour":0.4389,"drift":0.0999},"knobResponse":[0.2488,0.0464,0.2189,0.2009]},{"slug":"thermal","title":"Thermal","family":"flight","round":24,"note":"여름 오후의 밭 위에서 흰 글라이더가 열기류를 타고 타원을 그리며 맴돌아 올라가요. 말똥가리 둘이 더 좁게 같이 돌고, 꼭대기의 적운은 자라며 바닥이 어두워져요. 구름 바닥에 닿은 글라이더는 다음 열기류로 미끄러져 가고 아래에서 새 글라이더가 들어와요. K1 을 누르면 윈치가 글라이더 하나를 끌어올려요.","idea":"A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.","buttons":"K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.","code":"// ===== Patternflow pattern =====\n// Title:   Thermal\n// Family:  flight\n// Idea:    A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after thermal soaring under fair-weather cumulus over farmland\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1\n//\n// Knob 1: Hour. Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows.\n// Knob 2: Speed. At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower.\n// Knob 3: Gliders. One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up.\n// Knob 4: Wind. The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm.\n// Buttons: K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, round, pow, sign, PI } = Math;\nconst TAU = 2 * PI;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\nconst rnd = () => Math.random();\n// Rows: horizon, first field row, cloud base, where the thermal leaves the ground.\nconst [HOR, FY, YB, YG] = [97, 100, 36, 116];\n// The ploughed field the thermal comes off: its column and its distance.\nconst [SRCX, DSRC] = [29, 9.6];\n// We look up a little, so a level circle is a thin ellipse; the craft are drawn flatter so a banked wing does not stand on end.\nconst SE = sin(0.3);\nconst [BE, BC] = [sin(0.1), cos(0.1)];\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\nconst fbm = (x, y, s) => 0.55 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.15 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Pasture, beans, stubble, wheat, hay and plough in midday sun; 1 marks rows running away from us.\nconst CROP = [[70, 150, 45, 0], [38, 106, 36, 1], [216, 184, 94, 1], [198, 160, 66, 0], [142, 178, 74, 0], [96, 62, 40, 1]];\nconst PICK = [0, 0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Tapered strokes in the craft's axes: forward, right, up, twice, then two radii.\nconst GLIDER = [[3.6, 0, -0.1, -4.8, 0, 0.15, 0.85, 0.45], [0.6, 0, 0.25, 0.25, -9, 0.85, 0.75, 0.45], [0.6, 0, 0.25, 0.25, 9, 0.85, 0.75, 0.45], [-4.2, 0, 0.1, -4.9, 0, 2.4, 0.55, 0.45], [-4.9, -2.6, 2.4, -4.9, 2.6, 2.4, 0.45, 0.45]];\nconst BUZZ = [[1.3, 0, 0, -1.3, 0, 0, 0.6, 0.45], [0.2, 0, 0.1, -0.3, -3.7, 0.75, 0.8, 0.45], [0.2, 0, 0.1, -0.3, 3.7, 0.75, 0.8, 0.45], [-1.2, 0, 0, -2.5, 0, 0.1, 0.45, 0.65]];\n\n// A cumulus as puffs over a flat base: each puff's place (u across, v up), its radius r and when in its growth it appears.\nfunction puffs() {\n  const L = [];\n  const add = (u, v, r, t0) => L.push({ u: u + (rnd() - 0.5) * 0.14, v: v + (rnd() - 0.5) * 0.08, r: r * (0.88 + 0.24 * rnd()), t0, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 5; i++) add(-0.76 + i * 0.38, 0.2, 0.34, i === 2 ? 0 : 0.03 + 0.12 * rnd());\n  for (let i = 0; i \u003c 4; i++) add(-0.5 + i * 0.33, 0.45, 0.33, 0.08 + 0.17 * rnd());\n  for (let i = 0; i \u003c 3; i++) add(-0.3 + i * 0.3, 0.68, 0.3, 0.3 + 0.2 * rnd());\n  for (let i = 0; i \u003c 2; i++) add((rnd() - 0.5) * 0.4, 0.86, 0.26, 0.55 + 0.15 * rnd());\n  return L;\n}\nconst newCloud = (x, a) => ({ x, a, g: 0, al: 1, det: false, p: puffs(), sd: floor(rnd() * 999) });\n\n// Fields lie in strips at distance D (row = HOR + 180 / D), each cut into fields across.\nfunction buildFields(S) {\n  const strips = [], trees = [], us = ((SRCX - 32) * DSRC) / 64, hw = (11 * DSRC) / 64;\n  for (let D = 5.6; D \u003c 66; ) {\n    const D2 = D * (1.22 + 0.12 * rnd());\n    const wid = () => ((12 + 18 * rnd()) * pow(6 / D, 0.35) * D) / 64;\n    let b = [];\n    for (let u = -0.62 * D2 - rnd() * wid(); u \u003c 0.62 * D2 + 0.3; u += wid()) b.push(u);\n    const src = D \u003c= DSRC && DSRC \u003c D2;\n    if (src) {\n      b = b.filter((u) => u \u003c us - hw - 0.3 || u > us + hw + 0.3);\n      b.push(us - hw, us + hw);\n      b.sort((p, q) => p - q);\n    }\n    const t = [];\n    for (let j = 0; j \u003c b.length - 1; j++) {\n      let k;\n      do k = PICK[floor(rnd() * PICK.length)];\n      while (j && k === t[j - 1]);\n      t.push(k);\n    }\n    if (src) t[b.indexOf(us - hw)] = 5;\n    strips.push({ d0: D, d1: D2, b, t, hh: 0.12 + 0.08 * rnd(), i: strips.length });\n    // Trees in the hedge along each strip's near edge, and at some corners.\n    for (let j = 0; j \u003c 2; j++) if (rnd() \u003c 0.6) trees.push({ u: (rnd() - 0.5) * 1.1 * D, D: D + 0.05, rc: 0.2 + 0.14 * rnd() });\n    for (let j = 1; j \u003c b.length - 1; j++) if (rnd() \u003c 0.2) trees.push({ u: b[j], D: D + 0.05, rc: 0.2 + 0.12 * rnd() });\n    D = D2;\n  }\n  for (const tr of trees) tr.hc = tr.rc * 1.5 + 0.15;\n  S.strips = strips;\n  S.trees = trees.sort((p, q) => q.D - p.D);\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N);\n  const S = { t: 0, bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), A: F(), fu: F(), fd: F(), fn: F(), gl: [], down: [], clouds: [], far: [], spawn: [0, 0], cable: null, bb: [1e9, 1e9, -1, -1] };\n  buildFields(S);\n  for (let y = FY; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      S.fd[p] = 180 / (y + 0.5 - HOR);\n      S.fu[p] = ((x + 0.5 - 32) * S.fd[p]) / 64;\n      S.fn[p] = fbm(x * 0.15, y * 0.3, 11);\n    }\n  for (let i = 0; i \u003c 3; i++) S.far.push({ x: 8 + i * 24 + rnd() * 10, yb: 87 - i * 5 - rnd() * 2, hw: 5 + 2.5 * i + rnd() * 2, ht: 3 + i + rnd() * 1.5, p: puffs(), sd: floor(rnd() * 999), m: 0.35, e: 44 });\n  S.shad = [{ x: 6, D: 7.4, r: 19, rd: 2.6, m: 0.9, e: 62 }, { x: 50, D: 16, r: 15, rd: 5.5, m: 0.9, e: 60 }];\n  params.s = S;\n}\n\n// The thermal's centre at a row: it leans downwind with height and wanders a little.\nconst colX = (S, y) => SRCX + S.lean * (YG - y) + 1.5 * sin(S.t * 0.21);\nconst sunLight = (h, k = mix(1, 0.9, h)) => [mix(1, 1.16, h) * k, mix(1, 0.86, h) * k, mix(1, 0.56, h) * k];\nconst SHADE = [0.42, 0.47, 0.6];\nconst hazeOf = (h) => mix3([176, 202, 222], [236, 186, 122], h);\nfunction skyAt(x, y, h) {\n  const top = mix3([14, 50, 150], [30, 52, 128], h), mid = mix3([44, 108, 206], [70, 104, 178], h), t = y / 96;\n  const c = t \u003c 0.66 ? mix3(top, mid, sstep(0, 0.66, t)) : mix3(mid, hazeOf(h), sstep(0.66, 1, t));\n  const gw = pow(h, 1.5) * exp(-x / 24) * exp(-abs(y - 78) / 36);\n  return [c[0] + 110 * gw, c[1] + 64 * gw, c[2] + 14 * gw];\n}\n\n// The ground seen at a point of the panel: hedges, fields, their shadows, and the haze.\nfunction fieldAt(S, x, y, sun, Lsh, haze) {\n  const D = 180 / (y - HOR), u = ((x - 32) * D) / 64, st = S.strips;\n  let k = 0;\n  while (k \u003c st.length - 1 && D >= st[k].d1) k++;\n  let alb = null;\n  let lit = 1;\n  // The hedge on a strip's near edge hides the ground just behind it.\n  for (let j = k; j >= 0 && st[j].d0 > D * 0.8; j--) {\n    const s = st[j];\n    if (y >= HOR + (180 - 64 * s.hh * (0.7 + 0.6 * noise(u * 2.6, s.i * 9, 3))) / s.d0) {\n      const n = 0.8 + 0.4 * noise(u * 6, y, 5);\n      alb = [34 * n, 78 * n, 30 * n];\n      lit = 0.85;\n      break;\n    }\n  }\n  if (!alb) {\n    const s = st[k], b = s.b;\n    let j = 0;\n    while (j \u003c b.length - 2 && u >= b[j + 1]) j++;\n    const hwu = ((0.8 * pow(6 / D, 0.4) + 0.25) * D) / 64;\n    if (abs(u - b[j]) \u003c hwu || abs(u - b[j + 1]) \u003c hwu) {\n      alb = [30, 70, 28];\n      lit = 0.7;\n    } else {\n      const c = CROP[s.t[j]], tx = c[3] ? 0.97 + 0.17 * sin(u * TAU * 6.5) : 0.86 + 0.28 * fbm(u * 2.5, D * 0.7, s.t[j] + j);\n      alb = [c[0] * tx, c[1] * tx, c[2] * tx];\n      // Shadows of the hedges left and in front, and of the trees.\n      if (u - b[j] \u003c s.hh * Lsh * 0.85 || D - s.d0 \u003c s.hh * Lsh * 0.4) lit = 0;\n      else\n        for (const tr of S.trees) {\n          const du = u - tr.u - tr.hc * Lsh * 0.85, dd = D - tr.D - tr.hc * Lsh * 0.45;\n          if (abs(dd) > 3 + Lsh) continue;\n          const al = (du * 0.86 + dd * 0.5) / (tr.rc * (1 + 0.55 * Lsh)), pe = (-du * 0.5 + dd * 0.86) / (tr.rc * 1.8);\n          if (al * al + pe * pe \u003c 1) {\n            lit = 0;\n            break;\n          }\n        }\n    }\n  }\n  const hz = 0.55 * sstep(5, 75, D);\n  return [0, 1, 2].map((c) => mix(alb[c] * mix(SHADE[c], sun[c], lit), haze[c], hz));\n}\n\nfunction paint(S) {\n  const h = S.hour, sun = sunLight(h), haze = hazeOf(h), Lsh = 0.35 + 4.2 * pow(h, 1.6), bg = S.bg, ridgeF = mix3(haze, [64, 96, 116], 0.38);\n  const ridgeN = mix3(haze, [52 * sun[0], 98 * sun[1], 54 * sun[2]], 0.58);\n  for (let x = 0; x \u003c W; x++) {\n    const farT = 83 + 5 * fbm(x * 0.045, 1.3, 21), nearT = 91.5 + 3 * fbm(x * 0.09, 4.1, 22) - 1.5 * sstep(0.55, 0.8, noise(x * 0.5, 0, 23));\n    for (let y = 0; y \u003c H; y++) {\n      const q = (y * W + x) * 3;\n      bg[q] = bg[q + 1] = bg[q + 2] = 0;\n      // The open sky is smooth enough for one sample.\n      for (let k = y + 1 \u003c farT ? 3 : 0; k \u003c 4; k++) {\n        const xs = x + 0.25 + 0.5 * (k & 1), ys = y + 0.25 + 0.5 * (k >> 1);\n        let c;\n        if (ys >= FY) c = fieldAt(S, xs, ys, sun, Lsh, haze);\n        else if (ys >= nearT) c = ridgeN.map((v) => v * (0.84 + 0.3 * fbm(x * 0.35, ys * 0.9, 24)));\n        else if (ys >= farT) c = ridgeF;\n        else c = skyAt(xs, ys, h);\n        for (let i = 0; i \u003c 3; i++) bg[q + i] += y + 1 \u003c farT ? c[i] : c[i] / 4;\n      }\n    }\n  }\n  // Tree crowns, far ones first, lit from the sun's side.\n  for (const tr of S.trees) {\n    const cx = 32 + (64 * tr.u) / tr.D, cy = HOR + (180 - 64 * tr.hc) / tr.D, R = (64 * tr.rc) / tr.D, hz = 0.55 * sstep(5, 75, tr.D);\n    for (let y = max(FY - 4, floor(cy - R - 1)); y \u003c= min(H - 1, cy + R + 1); y++)\n      for (let x = max(0, floor(cx - R - 1)); x \u003c= min(W - 1, cx + R + 1); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - cy) / R, a = clamp((1 - sqrt(dx * dx + dy * dy)) * R + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const l = clamp(0.45 - 0.7 * dx - 0.4 * dy, 0, 1), n = 0.85 + 0.3 * hash(x, y, 31), q = (y * W + x) * 3;\n        [40, 94, 38].forEach((al, c) => (bg[q + c] += (mix(al * n * mix(SHADE[c], sun[c] * 1.1, l), haze[c], hz) - bg[q + c]) * a));\n      }\n  }\n  S.painted = h;\n}\n\nfunction addCraft(S, kind, st, X, yc, dir) {\n  const R = kind ? 5.5 + rnd() : 11.5 + rnd();\n  const o = { kind, st, X, yc, Z: -dir * R, R, dir, th: (-dir * PI) / 2, bank: st === \"climb\" ? 0.5 + 0.12 * kind : 0, pitch: 0, off: 0, s: 0, w: kind ? 1.75 + 0.3 * rnd() : 1.05, c0: kind ? 1.9 : 2.4 };\n  S.gl.push(o);\n  return o;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hour = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2, kg = clamp(k[2], 1, 4), n = (S.n = round(kg)), wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    S.wind = wind;\n    S.ks = 1 + 0.14 * (kg - 1);\n    S.lean = wind * 0.22;\n    for (let i = 0; i \u003c n; i++) addCraft(S, 0, \"climb\", 0, n === 1 ? 72 : 82 - (i * 36) / (n - 1), 1).th = rnd() * TAU;\n    for (const y of [86, 62]) addCraft(S, 1, \"climb\", 0, y, 1).th = rnd() * TAU;\n    for (let i = 0; i \u003c 56; i++) S.down.push({ y: YB + rnd() * (YG - YB), a: rnd() * TAU, r: 0.5 + rnd() * 5.5, v: 3 + rnd() * 3, tw: rnd() * TAU });\n    // The cloud of the last thermal is drifting off as the next one starts.\n    S.clouds.push(Object.assign(newCloud(colX(S, YB) + (wind \u003c 0 ? -24 : 24), 26), { det: true, al: 0.9 }), newCloud(colX(S, YB), 1.5));\n  }\n  const d = dt * tempo;\n  S.t += d;\n  S.wind += (wind - S.wind) * min(1, dt * 2);\n  S.ks += (1 + 0.14 * (kg - 1) - S.ks) * min(1, dt * 2);\n  S.lean = S.wind * 0.22;\n  const vd = (S.wind \u003c 0 ? -2 : 2) + 6 * S.wind;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const dir = rnd() \u003c 0.5 ? 1 : -1, o = addCraft(S, 0, \"launch\", dir > 0 ? 4 + rnd() * 10 : 50 + rnd() * 10, 0, dir);\n    Object.assign(o, { yc: 121 + o.Z * SE, X0: o.X, cable: true });\n  }\n\n  // The thermal's cloud builds for 26 s, then drifts off and thins as a new one starts.\n  for (const c of S.clouds) {\n    c.a += d;\n    c.g = 1 - exp(-c.a / 6.5);\n    if (c.det) {\n      c.x += vd * d;\n      c.al -= d / 8;\n    } else {\n      c.x += (colX(S, YB) - c.x) * min(1, d * 0.6);\n      if (c.a > 26) {\n        c.det = true;\n        S.clouds.push(newCloud(colX(S, YB), 0));\n      }\n    }\n  }\n  S.clouds = S.clouds.filter((c) => c.al > 0);\n  // Far cumulus and the shadows of clouds out of sight drift with the wind and come round again.\n  for (const f of S.far.concat(S.shad)) {\n    f.x += vd * f.m * d;\n    if ((f.x - 32) * vd > 0 && abs(f.x - 32) > f.e) f.x = 32 - sign(f.x - 32) * (f.e - 1);\n  }\n\n  // Gliders and buzzards: launched, gliding in, circling up, or gliding off.\n  for (const o of S.gl) {\n    const cx = colX(S, o.yc) + (o.kind ? 2 : 0);\n    if (o.st === \"launch\") {\n      o.s += d;\n      const v = 16 * min(1, o.s / 0.5);\n      o.pitch = o.cable ? 0.95 * sstep(0.5, 1.1, o.s) : max(0, o.pitch - d * 1.2);\n      o.X += o.dir * v * cos(o.pitch) * d;\n      o.yc -= v * sin(o.pitch) * d;\n      if (o.cable && o.yc \u003c 88) {\n        o.cable = false;\n        S.cable = { x: o.X + o.dir * 3, y: o.yc - o.Z * SE - 2.5, xw: o.X0 + o.dir * 58, t: 0 };\n      }\n      if (!o.cable && o.pitch \u003c= 0) {\n        o.st = \"climb\";\n        o.off = o.X - cx;\n      }\n    } else if (o.st === \"climb\") {\n      const th0 = o.th;\n      o.th += o.w * d;\n      o.off *= exp(-d * 0.35);\n      o.yc -= o.c0 * (1 + 0.45 * cos(o.th + 0.8)) * d;\n      o.bank += ((o.kind ? 0.62 : 0.5) - o.bank) * min(1, d * 2);\n      if (o.yc \u003c YB + (o.kind ? 18 : 8)) o.leave = true;\n      // Done, it straightens up the next time it flies across the panel.\n      if (o.leave && cos(th0) * cos(o.th) \u003c= 0) {\n        o.st = \"out\";\n        o.th = sin(o.th) > 0 ? PI / 2 : -PI / 2;\n        o.dir = -sign(sin(o.th));\n      }\n      o.X = cx + o.off + o.R * cos(o.th);\n      o.Z = o.R * sin(o.th);\n    } else {\n      o.X += o.dir * o.R * o.w * d;\n      o.yc += (o.st === \"out\" ? 0.8 : 0.4) * d;\n      o.bank *= exp(-d * 3);\n      if (o.st === \"in\" && o.dir * (o.X - cx) >= 0) o.st = \"climb\";\n      if (abs(o.X - 32) > 56) o.gone = true;\n    }\n  }\n  S.gl = S.gl.filter((o) => !o.gone);\n  // Too many: the highest leaves early. Too few: a newcomer glides in low.\n  for (const kind of [0, 1]) {\n    const act = S.gl.filter((o) => o.kind === kind && o.st !== \"out\");\n    const want = kind ? 2 : n;\n    S.spawn[kind] -= d;\n    if (act.length \u003c want && S.spawn[kind] \u003c= 0) {\n      const dir = rnd() \u003c 0.5 ? 1 : -1;\n      addCraft(S, kind, \"in\", 32 - dir * 46, (kind ? 84 : 86) + rnd() * 6, dir);\n      S.spawn[kind] = kind ? 1.5 + rnd() * 2 : 2.5;\n    } else if (act.length > want) {\n      const hi = act.filter((o) => o.st === \"climb\" && !o.leave).sort((p, q) => p.yc - q.yc)[0];\n      if (hi) hi.leave = true;\n    }\n  }\n  const cb = S.cable;\n  if (cb) {\n    cb.y += 9 * d;\n    if ((cb.t += d) > 2) S.cable = null;\n  }\n  // Thistledown rides the thermal up from the ploughed field.\n  for (const p of S.down) {\n    p.y -= p.v * d;\n    p.a += (1.6 / (1 + p.r * 0.3)) * d;\n    if (p.y \u003c YB + 1) {\n      p.y = YG - 3 + rnd() * 5;\n      p.r = 0.5 + rnd() * 5.5;\n    }\n  }\n}\n\n// A tapered stroke into the coverage buffer, growing the box drawn into.\nfunction stroke(S, ax, ay, bx, by, ra, rb) {\n  const { A, bb } = S, x0 = max(0, floor(min(ax, bx) - 2)), x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2)), y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  if (x0 > x1 || y0 > y1) return;\n  bb[0] = min(bb[0], x0);\n  bb[1] = min(bb[1], y0);\n  bb[2] = max(bb[2], x1);\n  bb[3] = max(bb[3], y1);\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = clamp((px * dx + py * dy) / ll, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      const a = clamp(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1), i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\nfunction flush(S, col, alpha) {\n  const { A, buf, bb } = S;\n  for (let y = bb[1]; y \u003c= bb[3]; y++)\n    for (let x = bb[0]; x \u003c= bb[2]; x++) {\n      const i = y * W + x, a = min(1, A[i] * alpha);\n      if (a \u003c= 0) continue;\n      A[i] = 0;\n      for (let c = 0; c \u003c 3; c++) buf[i * 3 + c] += (col[c] - buf[i * 3 + c]) * a;\n    }\n  bb[0] = bb[1] = 1e9;\n  bb[2] = bb[3] = -1;\n}\n\n// A craft in its own frame (heading, pitch, bank), seen from below and to the side.\nfunction craft(S, o, h) {\n  const cl = o.st === \"climb\", hx = cl ? -sin(o.th) : o.dir, hz = cl ? cos(o.th) : 0, cp = cos(o.pitch), sp = sin(o.pitch);\n  const F = [hx * cp, sp, hz * cp], U0 = [-hx * sp, cp, -hz * sp], R0 = [-hz, 0, hx], cb = cos(o.bank * 0.7), sb = sin(o.bank * 0.7);\n  const U = [U0[0] * cb + R0[0] * sb, U0[1] * cb, U0[2] * cb + R0[2] * sb], R = [R0[0] * cb - U0[0] * sb, -U0[1] * sb, R0[2] * cb - U0[2] * sb];\n  const sy = o.yc - o.Z * SE;\n  const P = (f, r, u) => [o.X + F[0] * f + R[0] * r + U[0] * u, sy - (F[1] * f + R[1] * r + U[1] * u) * BC - (F[2] * f + R[2] * r + U[2] * u) * BE];\n  for (const m of o.kind ? BUZZ : GLIDER) {\n    const a = P(m[0], m[1], m[2]), b = P(m[3], m[4], m[5]);\n    stroke(S, a[0], a[1], b[0], b[1], m[6], m[7]);\n  }\n  // From below we see the shaded underside; banked towards us, the sunlit top.\n  const top = sstep(-0.3, 0.4, -U[1] * BE + U[2] * BC);\n  if (o.kind) return flush(S, [mix(58, 86, top), mix(42, 62, top), mix(30, 40, top)], 1);\n  const f = 0.84 + 0.16 * top;\n  flush(S, mix3([236, 240, 246], [255, 226, 176], h).map((v) => v * f), 1.35);\n  // Once a turn the wing tilts to the sun and flashes.\n  const gx = mix(-0.35, -0.8, h), gz = mix(1, 0.6, h);\n  const gl = (sstep(0.92, 1, ((R0[0] * gx + R0[2] * gz) / sqrt(gx * gx + gz * gz)) * sign(o.bank || 1)) * abs(o.bank)) / 0.5;\n  if (gl \u003c 0.02) return;\n  const w = P(0.4, 3.5 * sign(o.bank || 1), 0.6);\n  for (let y = max(0, floor(w[1] - 5)); y \u003c= min(H - 1, w[1] + 5); y++)\n    for (let x = max(0, floor(w[0] - 5)); x \u003c= min(W - 1, w[0] + 5); x++) {\n      const ex = abs(x + 0.5 - w[0]), ey = abs(y + 0.5 - w[1]);\n      const v = gl * (exp(-sqrt(ex * ex + ey * ey) / 1.3) + 0.5 * exp(-min(ex, ey) * 2.5 - max(ex, ey) / 2.5)), q = (y * W + x) * 3;\n      S.buf[q] += 255 * v;\n      S.buf[q + 1] += 246 * v;\n      S.buf[q + 2] += mix(225, 170, h) * v;\n    }\n}\n\nfunction drawCloud(S, c, hw, ht, g, yb, al, haze) {\n  const { buf, t } = S, h = S.hour, B = [], lean = S.lean * 0.6;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9;\n  for (const p of c.p) {\n    const gr = sstep(p.t0, p.t0 + 0.25, g);\n    if (gr \u003c= 0.02) continue;\n    const r = p.r * hw * gr * (1 + 0.05 * sin(t * 0.7 + p.ph)), bx = c.x + p.u * hw + lean * p.v * ht + 0.04 * hw * sin(t * 0.5 + p.ph);\n    const by = yb - p.v * ht - 0.03 * ht * sin(t * 0.4 + p.ph * 2);\n    B.push(bx, by, r);\n    x0 = min(x0, bx - r);\n    x1 = max(x1, bx + r);\n    y0 = min(y0, by - r);\n  }\n  const L = [mix(-0.45, -0.85, h), mix(-0.7, -0.28, h), 0.5], ll = sqrt(L[0] * L[0] + L[1] * L[1] + L[2] * L[2]);\n  const litC = mix3([252, 252, 250], [255, 214, 150], h);\n  const shC = mix3([150, 162, 192], [150, 124, 146], h).map((v) => v * (1 - 0.2 * g * (c.det ? 0.5 : 1)));\n  const baseC = mix3([126, 132, 152], [108, 90, 100], h).map((v) => v * mix(1, 0.78, g));\n  const hz = hazeOf(h);\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, yb + 1); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, x1 + 2); x++) {\n      const px = x + 0.5, py = y + 0.5;\n      // The normal blends the puffs nearby, weighted by how deep inside each the pixel is.\n      let best = -9, r = 1, sw = 0, nx = 0, ny = 0;\n      for (let i = 0; i \u003c B.length; i += 3) {\n        const dx = (px - B[i]) / B[i + 2], dy = (py - B[i + 1]) / B[i + 2], v = 1 - sqrt(dx * dx + dy * dy);\n        if (v \u003c -0.5) continue;\n        if (v > best) {\n          best = v;\n          r = B[i + 2];\n        }\n        const w = exp(7 * v);\n        sw += w;\n        nx += dx * w;\n        ny += dy * w;\n      }\n      if (best \u003c -0.4) continue;\n      // Cauliflower edges; a cloud that is dying frays from the edges in.\n      const n = noise(px * 0.32, py * 0.32 - t * 0.12, c.sd);\n      const a = clamp((best + 0.32 * (n - 0.5) - (1 - al) * 0.8) * r * 0.7, 0, 1) * clamp(yb + 0.7 - py + 0.6 * noise(px * 0.4, 1, c.sd), 0, 1) * sqrt(al);\n      if (a \u003c= 0) continue;\n      nx /= sw;\n      ny /= sw;\n      const nz = sqrt(max(0, 1 - nx * nx - ny * ny));\n      const lw = clamp(((nx * L[0] + ny * L[1] + nz * L[2]) / ll + 0.45) / 1.45 + 0.3 * (n - 0.5), 0, 1) * (0.55 + 0.45 * clamp((yb - py) / (0.45 * ht), 0, 1));\n      const bs = sstep(yb - 2.6, yb - 0.6, py), q = (y * W + x) * 3;\n      for (let k = 0; k \u003c 3; k++) buf[q + k] += (mix(mix(mix(shC[k], litC[k], lw), baseC[k], bs), hz[k], haze) - buf[q + k]) * a;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.painted === undefined || abs(S.painted - S.hour) > 0.003) paint(S);\n  const h = S.hour, buf = S.buf;\n  buf.set(S.bg);\n\n  // Cloud shadows: each thermal cloud's, pushed off its field by the sun, and two from clouds out of sight.\n  const sh = [];\n  for (const c of S.clouds) {\n    const ru = (((8 + 18 * c.g) * S.ks * DSRC) / 64) * 0.95 * (c.det ? sqrt(c.al) : 1);\n    sh.push(((c.x - 29 + 30 * h) * DSRC) / 64, DSRC * (1.04 + 1.1 * h), ru, ru * 1.3 + 0.5, c.al * (0.55 + 0.45 * c.g));\n  }\n  for (const s of S.shad) sh.push(((s.x - 32) * s.D) / 64, s.D, (s.r * s.D) / 64, s.rd, 1);\n  const sc = [0.46, 0.5, 0.62];\n  for (let p = FY * W; p \u003c N; p++) {\n    let m = 0;\n    for (let i = 0; i \u003c sh.length; i += 5) {\n      const du = (S.fu[p] - sh[i]) / sh[i + 2], dv = (S.fd[p] - sh[i + 1]) / sh[i + 3], q = du * du + dv * dv;\n      if (q \u003c 2.2) m = max(m, sstep(1.05, 0.6, sqrt(q) + 0.35 * (S.fn[p] - 0.5)) * sh[i + 4]);\n    }\n    if (m > 0) for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= mix(1, sc[c], m);\n  }\n\n  // Far cumulus along the horizon, then the clouds the thermal builds.\n  for (const f of S.far) drawCloud(S, f, f.hw, f.ht, 1, f.yb, 0.9, 0.5);\n  for (const c of S.clouds) drawCloud(S, c, (8 + 18 * c.g) * S.ks, (6 + 26 * c.g) * S.ks, c.g, YB, c.det ? c.al : 1, 0);\n\n  // Thistledown catching the sun as it rises.\n  const dc = mix3([240, 240, 228], [255, 222, 160], h), nd = 26 + round((10 * (S.ks - 1)) / 0.14);\n  for (let i = 0; i \u003c nd; i++) {\n    const p = S.down[i], x = round(colX(S, p.y) + p.r * cos(p.a) + 0.8 * sin(S.t * 1.7 + p.tw) - 0.5), y = round(p.y + p.r * sin(p.a) * SE - 0.5);\n    if (x \u003c 0 || x >= W) continue;\n    const a = (0.45 + 0.4 * sin(S.t * 3 + p.tw * 5)) * sstep(YB, YB + 8, p.y) * sstep(YG + 2, YG - 6, p.y);\n    for (let k = 0, q = (y * W + x) * 3; k \u003c 3; k++) buf[q + k] += (dc[k] - buf[q + k]) * a;\n  }\n\n  // The winch cable, and the one that falls on its red parachute after release.\n  const dark = [36, 34, 38];\n  for (const o of S.gl)\n    if (o.cable) {\n      stroke(S, o.X + o.dir * 3 * cos(o.pitch), o.yc - o.Z * SE - 3 * sin(o.pitch), o.X0 + o.dir * 58, 118, 0.18, 0.18);\n      flush(S, dark, 0.75);\n    }\n  const cb = S.cable;\n  if (cb) {\n    stroke(S, cb.x, cb.y, cb.xw, 118, 0.18, 0.18);\n    flush(S, dark, 0.75 * (1 - cb.t / 2));\n    stroke(S, cb.x, cb.y - 1, cb.x, cb.y - 1, 0.7, 0.7);\n    flush(S, [230, 50, 40], 1 - cb.t / 2);\n  }\n  // Gliders and buzzards, the far side of their circles first.\n  for (const o of S.gl.slice().sort((p, q) => p.Z - q.Z)) craft(S, o, h);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","layer":{"id":"layer-thermal","type":"code","name":"thermal","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Thermal\n// Family:  flight\n// Idea:    A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after thermal soaring under fair-weather cumulus over farmland\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1\n//\n// Knob 1: Hour. Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows.\n// Knob 2: Speed. At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower.\n// Knob 3: Gliders. One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up.\n// Knob 4: Wind. The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm.\n// Buttons: K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, round, pow, sign, PI } = Math;\nconst TAU = 2 * PI;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\nconst rnd = () => Math.random();\n// Rows: horizon, first field row, cloud base, where the thermal leaves the ground.\nconst [HOR, FY, YB, YG] = [97, 100, 36, 116];\n// The ploughed field the thermal comes off: its column and its distance.\nconst [SRCX, DSRC] = [29, 9.6];\n// We look up a little, so a level circle is a thin ellipse; the craft are drawn flatter so a banked wing does not stand on end.\nconst SE = sin(0.3);\nconst [BE, BC] = [sin(0.1), cos(0.1)];\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\nconst fbm = (x, y, s) => 0.55 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.15 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Pasture, beans, stubble, wheat, hay and plough in midday sun; 1 marks rows running away from us.\nconst CROP = [[70, 150, 45, 0], [38, 106, 36, 1], [216, 184, 94, 1], [198, 160, 66, 0], [142, 178, 74, 0], [96, 62, 40, 1]];\nconst PICK = [0, 0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Tapered strokes in the craft's axes: forward, right, up, twice, then two radii.\nconst GLIDER = [[3.6, 0, -0.1, -4.8, 0, 0.15, 0.85, 0.45], [0.6, 0, 0.25, 0.25, -9, 0.85, 0.75, 0.45], [0.6, 0, 0.25, 0.25, 9, 0.85, 0.75, 0.45], [-4.2, 0, 0.1, -4.9, 0, 2.4, 0.55, 0.45], [-4.9, -2.6, 2.4, -4.9, 2.6, 2.4, 0.45, 0.45]];\nconst BUZZ = [[1.3, 0, 0, -1.3, 0, 0, 0.6, 0.45], [0.2, 0, 0.1, -0.3, -3.7, 0.75, 0.8, 0.45], [0.2, 0, 0.1, -0.3, 3.7, 0.75, 0.8, 0.45], [-1.2, 0, 0, -2.5, 0, 0.1, 0.45, 0.65]];\n\n// A cumulus as puffs over a flat base: each puff's place (u across, v up), its radius r and when in its growth it appears.\nfunction puffs() {\n  const L = [];\n  const add = (u, v, r, t0) => L.push({ u: u + (rnd() - 0.5) * 0.14, v: v + (rnd() - 0.5) * 0.08, r: r * (0.88 + 0.24 * rnd()), t0, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 5; i++) add(-0.76 + i * 0.38, 0.2, 0.34, i === 2 ? 0 : 0.03 + 0.12 * rnd());\n  for (let i = 0; i \u003c 4; i++) add(-0.5 + i * 0.33, 0.45, 0.33, 0.08 + 0.17 * rnd());\n  for (let i = 0; i \u003c 3; i++) add(-0.3 + i * 0.3, 0.68, 0.3, 0.3 + 0.2 * rnd());\n  for (let i = 0; i \u003c 2; i++) add((rnd() - 0.5) * 0.4, 0.86, 0.26, 0.55 + 0.15 * rnd());\n  return L;\n}\nconst newCloud = (x, a) => ({ x, a, g: 0, al: 1, det: false, p: puffs(), sd: floor(rnd() * 999) });\n\n// Fields lie in strips at distance D (row = HOR + 180 / D), each cut into fields across.\nfunction buildFields(S) {\n  const strips = [], trees = [], us = ((SRCX - 32) * DSRC) / 64, hw = (11 * DSRC) / 64;\n  for (let D = 5.6; D \u003c 66; ) {\n    const D2 = D * (1.22 + 0.12 * rnd());\n    const wid = () => ((12 + 18 * rnd()) * pow(6 / D, 0.35) * D) / 64;\n    let b = [];\n    for (let u = -0.62 * D2 - rnd() * wid(); u \u003c 0.62 * D2 + 0.3; u += wid()) b.push(u);\n    const src = D \u003c= DSRC && DSRC \u003c D2;\n    if (src) {\n      b = b.filter((u) => u \u003c us - hw - 0.3 || u > us + hw + 0.3);\n      b.push(us - hw, us + hw);\n      b.sort((p, q) => p - q);\n    }\n    const t = [];\n    for (let j = 0; j \u003c b.length - 1; j++) {\n      let k;\n      do k = PICK[floor(rnd() * PICK.length)];\n      while (j && k === t[j - 1]);\n      t.push(k);\n    }\n    if (src) t[b.indexOf(us - hw)] = 5;\n    strips.push({ d0: D, d1: D2, b, t, hh: 0.12 + 0.08 * rnd(), i: strips.length });\n    // Trees in the hedge along each strip's near edge, and at some corners.\n    for (let j = 0; j \u003c 2; j++) if (rnd() \u003c 0.6) trees.push({ u: (rnd() - 0.5) * 1.1 * D, D: D + 0.05, rc: 0.2 + 0.14 * rnd() });\n    for (let j = 1; j \u003c b.length - 1; j++) if (rnd() \u003c 0.2) trees.push({ u: b[j], D: D + 0.05, rc: 0.2 + 0.12 * rnd() });\n    D = D2;\n  }\n  for (const tr of trees) tr.hc = tr.rc * 1.5 + 0.15;\n  S.strips = strips;\n  S.trees = trees.sort((p, q) => q.D - p.D);\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N);\n  const S = { t: 0, bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), A: F(), fu: F(), fd: F(), fn: F(), gl: [], down: [], clouds: [], far: [], spawn: [0, 0], cable: null, bb: [1e9, 1e9, -1, -1] };\n  buildFields(S);\n  for (let y = FY; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      S.fd[p] = 180 / (y + 0.5 - HOR);\n      S.fu[p] = ((x + 0.5 - 32) * S.fd[p]) / 64;\n      S.fn[p] = fbm(x * 0.15, y * 0.3, 11);\n    }\n  for (let i = 0; i \u003c 3; i++) S.far.push({ x: 8 + i * 24 + rnd() * 10, yb: 87 - i * 5 - rnd() * 2, hw: 5 + 2.5 * i + rnd() * 2, ht: 3 + i + rnd() * 1.5, p: puffs(), sd: floor(rnd() * 999), m: 0.35, e: 44 });\n  S.shad = [{ x: 6, D: 7.4, r: 19, rd: 2.6, m: 0.9, e: 62 }, { x: 50, D: 16, r: 15, rd: 5.5, m: 0.9, e: 60 }];\n  params.s = S;\n}\n\n// The thermal's centre at a row: it leans downwind with height and wanders a little.\nconst colX = (S, y) => SRCX + S.lean * (YG - y) + 1.5 * sin(S.t * 0.21);\nconst sunLight = (h, k = mix(1, 0.9, h)) => [mix(1, 1.16, h) * k, mix(1, 0.86, h) * k, mix(1, 0.56, h) * k];\nconst SHADE = [0.42, 0.47, 0.6];\nconst hazeOf = (h) => mix3([176, 202, 222], [236, 186, 122], h);\nfunction skyAt(x, y, h) {\n  const top = mix3([14, 50, 150], [30, 52, 128], h), mid = mix3([44, 108, 206], [70, 104, 178], h), t = y / 96;\n  const c = t \u003c 0.66 ? mix3(top, mid, sstep(0, 0.66, t)) : mix3(mid, hazeOf(h), sstep(0.66, 1, t));\n  const gw = pow(h, 1.5) * exp(-x / 24) * exp(-abs(y - 78) / 36);\n  return [c[0] + 110 * gw, c[1] + 64 * gw, c[2] + 14 * gw];\n}\n\n// The ground seen at a point of the panel: hedges, fields, their shadows, and the haze.\nfunction fieldAt(S, x, y, sun, Lsh, haze) {\n  const D = 180 / (y - HOR), u = ((x - 32) * D) / 64, st = S.strips;\n  let k = 0;\n  while (k \u003c st.length - 1 && D >= st[k].d1) k++;\n  let alb = null;\n  let lit = 1;\n  // The hedge on a strip's near edge hides the ground just behind it.\n  for (let j = k; j >= 0 && st[j].d0 > D * 0.8; j--) {\n    const s = st[j];\n    if (y >= HOR + (180 - 64 * s.hh * (0.7 + 0.6 * noise(u * 2.6, s.i * 9, 3))) / s.d0) {\n      const n = 0.8 + 0.4 * noise(u * 6, y, 5);\n      alb = [34 * n, 78 * n, 30 * n];\n      lit = 0.85;\n      break;\n    }\n  }\n  if (!alb) {\n    const s = st[k], b = s.b;\n    let j = 0;\n    while (j \u003c b.length - 2 && u >= b[j + 1]) j++;\n    const hwu = ((0.8 * pow(6 / D, 0.4) + 0.25) * D) / 64;\n    if (abs(u - b[j]) \u003c hwu || abs(u - b[j + 1]) \u003c hwu) {\n      alb = [30, 70, 28];\n      lit = 0.7;\n    } else {\n      const c = CROP[s.t[j]], tx = c[3] ? 0.97 + 0.17 * sin(u * TAU * 6.5) : 0.86 + 0.28 * fbm(u * 2.5, D * 0.7, s.t[j] + j);\n      alb = [c[0] * tx, c[1] * tx, c[2] * tx];\n      // Shadows of the hedges left and in front, and of the trees.\n      if (u - b[j] \u003c s.hh * Lsh * 0.85 || D - s.d0 \u003c s.hh * Lsh * 0.4) lit = 0;\n      else\n        for (const tr of S.trees) {\n          const du = u - tr.u - tr.hc * Lsh * 0.85, dd = D - tr.D - tr.hc * Lsh * 0.45;\n          if (abs(dd) > 3 + Lsh) continue;\n          const al = (du * 0.86 + dd * 0.5) / (tr.rc * (1 + 0.55 * Lsh)), pe = (-du * 0.5 + dd * 0.86) / (tr.rc * 1.8);\n          if (al * al + pe * pe \u003c 1) {\n            lit = 0;\n            break;\n          }\n        }\n    }\n  }\n  const hz = 0.55 * sstep(5, 75, D);\n  return [0, 1, 2].map((c) => mix(alb[c] * mix(SHADE[c], sun[c], lit), haze[c], hz));\n}\n\nfunction paint(S) {\n  const h = S.hour, sun = sunLight(h), haze = hazeOf(h), Lsh = 0.35 + 4.2 * pow(h, 1.6), bg = S.bg, ridgeF = mix3(haze, [64, 96, 116], 0.38);\n  const ridgeN = mix3(haze, [52 * sun[0], 98 * sun[1], 54 * sun[2]], 0.58);\n  for (let x = 0; x \u003c W; x++) {\n    const farT = 83 + 5 * fbm(x * 0.045, 1.3, 21), nearT = 91.5 + 3 * fbm(x * 0.09, 4.1, 22) - 1.5 * sstep(0.55, 0.8, noise(x * 0.5, 0, 23));\n    for (let y = 0; y \u003c H; y++) {\n      const q = (y * W + x) * 3;\n      bg[q] = bg[q + 1] = bg[q + 2] = 0;\n      // The open sky is smooth enough for one sample.\n      for (let k = y + 1 \u003c farT ? 3 : 0; k \u003c 4; k++) {\n        const xs = x + 0.25 + 0.5 * (k & 1), ys = y + 0.25 + 0.5 * (k >> 1);\n        let c;\n        if (ys >= FY) c = fieldAt(S, xs, ys, sun, Lsh, haze);\n        else if (ys >= nearT) c = ridgeN.map((v) => v * (0.84 + 0.3 * fbm(x * 0.35, ys * 0.9, 24)));\n        else if (ys >= farT) c = ridgeF;\n        else c = skyAt(xs, ys, h);\n        for (let i = 0; i \u003c 3; i++) bg[q + i] += y + 1 \u003c farT ? c[i] : c[i] / 4;\n      }\n    }\n  }\n  // Tree crowns, far ones first, lit from the sun's side.\n  for (const tr of S.trees) {\n    const cx = 32 + (64 * tr.u) / tr.D, cy = HOR + (180 - 64 * tr.hc) / tr.D, R = (64 * tr.rc) / tr.D, hz = 0.55 * sstep(5, 75, tr.D);\n    for (let y = max(FY - 4, floor(cy - R - 1)); y \u003c= min(H - 1, cy + R + 1); y++)\n      for (let x = max(0, floor(cx - R - 1)); x \u003c= min(W - 1, cx + R + 1); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - cy) / R, a = clamp((1 - sqrt(dx * dx + dy * dy)) * R + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const l = clamp(0.45 - 0.7 * dx - 0.4 * dy, 0, 1), n = 0.85 + 0.3 * hash(x, y, 31), q = (y * W + x) * 3;\n        [40, 94, 38].forEach((al, c) => (bg[q + c] += (mix(al * n * mix(SHADE[c], sun[c] * 1.1, l), haze[c], hz) - bg[q + c]) * a));\n      }\n  }\n  S.painted = h;\n}\n\nfunction addCraft(S, kind, st, X, yc, dir) {\n  const R = kind ? 5.5 + rnd() : 11.5 + rnd();\n  const o = { kind, st, X, yc, Z: -dir * R, R, dir, th: (-dir * PI) / 2, bank: st === \"climb\" ? 0.5 + 0.12 * kind : 0, pitch: 0, off: 0, s: 0, w: kind ? 1.75 + 0.3 * rnd() : 1.05, c0: kind ? 1.9 : 2.4 };\n  S.gl.push(o);\n  return o;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hour = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2, kg = clamp(k[2], 1, 4), n = (S.n = round(kg)), wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    S.wind = wind;\n    S.ks = 1 + 0.14 * (kg - 1);\n    S.lean = wind * 0.22;\n    for (let i = 0; i \u003c n; i++) addCraft(S, 0, \"climb\", 0, n === 1 ? 72 : 82 - (i * 36) / (n - 1), 1).th = rnd() * TAU;\n    for (const y of [86, 62]) addCraft(S, 1, \"climb\", 0, y, 1).th = rnd() * TAU;\n    for (let i = 0; i \u003c 56; i++) S.down.push({ y: YB + rnd() * (YG - YB), a: rnd() * TAU, r: 0.5 + rnd() * 5.5, v: 3 + rnd() * 3, tw: rnd() * TAU });\n    // The cloud of the last thermal is drifting off as the next one starts.\n    S.clouds.push(Object.assign(newCloud(colX(S, YB) + (wind \u003c 0 ? -24 : 24), 26), { det: true, al: 0.9 }), newCloud(colX(S, YB), 1.5));\n  }\n  const d = dt * tempo;\n  S.t += d;\n  S.wind += (wind - S.wind) * min(1, dt * 2);\n  S.ks += (1 + 0.14 * (kg - 1) - S.ks) * min(1, dt * 2);\n  S.lean = S.wind * 0.22;\n  const vd = (S.wind \u003c 0 ? -2 : 2) + 6 * S.wind;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const dir = rnd() \u003c 0.5 ? 1 : -1, o = addCraft(S, 0, \"launch\", dir > 0 ? 4 + rnd() * 10 : 50 + rnd() * 10, 0, dir);\n    Object.assign(o, { yc: 121 + o.Z * SE, X0: o.X, cable: true });\n  }\n\n  // The thermal's cloud builds for 26 s, then drifts off and thins as a new one starts.\n  for (const c of S.clouds) {\n    c.a += d;\n    c.g = 1 - exp(-c.a / 6.5);\n    if (c.det) {\n      c.x += vd * d;\n      c.al -= d / 8;\n    } else {\n      c.x += (colX(S, YB) - c.x) * min(1, d * 0.6);\n      if (c.a > 26) {\n        c.det = true;\n        S.clouds.push(newCloud(colX(S, YB), 0));\n      }\n    }\n  }\n  S.clouds = S.clouds.filter((c) => c.al > 0);\n  // Far cumulus and the shadows of clouds out of sight drift with the wind and come round again.\n  for (const f of S.far.concat(S.shad)) {\n    f.x += vd * f.m * d;\n    if ((f.x - 32) * vd > 0 && abs(f.x - 32) > f.e) f.x = 32 - sign(f.x - 32) * (f.e - 1);\n  }\n\n  // Gliders and buzzards: launched, gliding in, circling up, or gliding off.\n  for (const o of S.gl) {\n    const cx = colX(S, o.yc) + (o.kind ? 2 : 0);\n    if (o.st === \"launch\") {\n      o.s += d;\n      const v = 16 * min(1, o.s / 0.5);\n      o.pitch = o.cable ? 0.95 * sstep(0.5, 1.1, o.s) : max(0, o.pitch - d * 1.2);\n      o.X += o.dir * v * cos(o.pitch) * d;\n      o.yc -= v * sin(o.pitch) * d;\n      if (o.cable && o.yc \u003c 88) {\n        o.cable = false;\n        S.cable = { x: o.X + o.dir * 3, y: o.yc - o.Z * SE - 2.5, xw: o.X0 + o.dir * 58, t: 0 };\n      }\n      if (!o.cable && o.pitch \u003c= 0) {\n        o.st = \"climb\";\n        o.off = o.X - cx;\n      }\n    } else if (o.st === \"climb\") {\n      const th0 = o.th;\n      o.th += o.w * d;\n      o.off *= exp(-d * 0.35);\n      o.yc -= o.c0 * (1 + 0.45 * cos(o.th + 0.8)) * d;\n      o.bank += ((o.kind ? 0.62 : 0.5) - o.bank) * min(1, d * 2);\n      if (o.yc \u003c YB + (o.kind ? 18 : 8)) o.leave = true;\n      // Done, it straightens up the next time it flies across the panel.\n      if (o.leave && cos(th0) * cos(o.th) \u003c= 0) {\n        o.st = \"out\";\n        o.th = sin(o.th) > 0 ? PI / 2 : -PI / 2;\n        o.dir = -sign(sin(o.th));\n      }\n      o.X = cx + o.off + o.R * cos(o.th);\n      o.Z = o.R * sin(o.th);\n    } else {\n      o.X += o.dir * o.R * o.w * d;\n      o.yc += (o.st === \"out\" ? 0.8 : 0.4) * d;\n      o.bank *= exp(-d * 3);\n      if (o.st === \"in\" && o.dir * (o.X - cx) >= 0) o.st = \"climb\";\n      if (abs(o.X - 32) > 56) o.gone = true;\n    }\n  }\n  S.gl = S.gl.filter((o) => !o.gone);\n  // Too many: the highest leaves early. Too few: a newcomer glides in low.\n  for (const kind of [0, 1]) {\n    const act = S.gl.filter((o) => o.kind === kind && o.st !== \"out\");\n    const want = kind ? 2 : n;\n    S.spawn[kind] -= d;\n    if (act.length \u003c want && S.spawn[kind] \u003c= 0) {\n      const dir = rnd() \u003c 0.5 ? 1 : -1;\n      addCraft(S, kind, \"in\", 32 - dir * 46, (kind ? 84 : 86) + rnd() * 6, dir);\n      S.spawn[kind] = kind ? 1.5 + rnd() * 2 : 2.5;\n    } else if (act.length > want) {\n      const hi = act.filter((o) => o.st === \"climb\" && !o.leave).sort((p, q) => p.yc - q.yc)[0];\n      if (hi) hi.leave = true;\n    }\n  }\n  const cb = S.cable;\n  if (cb) {\n    cb.y += 9 * d;\n    if ((cb.t += d) > 2) S.cable = null;\n  }\n  // Thistledown rides the thermal up from the ploughed field.\n  for (const p of S.down) {\n    p.y -= p.v * d;\n    p.a += (1.6 / (1 + p.r * 0.3)) * d;\n    if (p.y \u003c YB + 1) {\n      p.y = YG - 3 + rnd() * 5;\n      p.r = 0.5 + rnd() * 5.5;\n    }\n  }\n}\n\n// A tapered stroke into the coverage buffer, growing the box drawn into.\nfunction stroke(S, ax, ay, bx, by, ra, rb) {\n  const { A, bb } = S, x0 = max(0, floor(min(ax, bx) - 2)), x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2)), y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  if (x0 > x1 || y0 > y1) return;\n  bb[0] = min(bb[0], x0);\n  bb[1] = min(bb[1], y0);\n  bb[2] = max(bb[2], x1);\n  bb[3] = max(bb[3], y1);\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = clamp((px * dx + py * dy) / ll, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      const a = clamp(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1), i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\nfunction flush(S, col, alpha) {\n  const { A, buf, bb } = S;\n  for (let y = bb[1]; y \u003c= bb[3]; y++)\n    for (let x = bb[0]; x \u003c= bb[2]; x++) {\n      const i = y * W + x, a = min(1, A[i] * alpha);\n      if (a \u003c= 0) continue;\n      A[i] = 0;\n      for (let c = 0; c \u003c 3; c++) buf[i * 3 + c] += (col[c] - buf[i * 3 + c]) * a;\n    }\n  bb[0] = bb[1] = 1e9;\n  bb[2] = bb[3] = -1;\n}\n\n// A craft in its own frame (heading, pitch, bank), seen from below and to the side.\nfunction craft(S, o, h) {\n  const cl = o.st === \"climb\", hx = cl ? -sin(o.th) : o.dir, hz = cl ? cos(o.th) : 0, cp = cos(o.pitch), sp = sin(o.pitch);\n  const F = [hx * cp, sp, hz * cp], U0 = [-hx * sp, cp, -hz * sp], R0 = [-hz, 0, hx], cb = cos(o.bank * 0.7), sb = sin(o.bank * 0.7);\n  const U = [U0[0] * cb + R0[0] * sb, U0[1] * cb, U0[2] * cb + R0[2] * sb], R = [R0[0] * cb - U0[0] * sb, -U0[1] * sb, R0[2] * cb - U0[2] * sb];\n  const sy = o.yc - o.Z * SE;\n  const P = (f, r, u) => [o.X + F[0] * f + R[0] * r + U[0] * u, sy - (F[1] * f + R[1] * r + U[1] * u) * BC - (F[2] * f + R[2] * r + U[2] * u) * BE];\n  for (const m of o.kind ? BUZZ : GLIDER) {\n    const a = P(m[0], m[1], m[2]), b = P(m[3], m[4], m[5]);\n    stroke(S, a[0], a[1], b[0], b[1], m[6], m[7]);\n  }\n  // From below we see the shaded underside; banked towards us, the sunlit top.\n  const top = sstep(-0.3, 0.4, -U[1] * BE + U[2] * BC);\n  if (o.kind) return flush(S, [mix(58, 86, top), mix(42, 62, top), mix(30, 40, top)], 1);\n  const f = 0.84 + 0.16 * top;\n  flush(S, mix3([236, 240, 246], [255, 226, 176], h).map((v) => v * f), 1.35);\n  // Once a turn the wing tilts to the sun and flashes.\n  const gx = mix(-0.35, -0.8, h), gz = mix(1, 0.6, h);\n  const gl = (sstep(0.92, 1, ((R0[0] * gx + R0[2] * gz) / sqrt(gx * gx + gz * gz)) * sign(o.bank || 1)) * abs(o.bank)) / 0.5;\n  if (gl \u003c 0.02) return;\n  const w = P(0.4, 3.5 * sign(o.bank || 1), 0.6);\n  for (let y = max(0, floor(w[1] - 5)); y \u003c= min(H - 1, w[1] + 5); y++)\n    for (let x = max(0, floor(w[0] - 5)); x \u003c= min(W - 1, w[0] + 5); x++) {\n      const ex = abs(x + 0.5 - w[0]), ey = abs(y + 0.5 - w[1]);\n      const v = gl * (exp(-sqrt(ex * ex + ey * ey) / 1.3) + 0.5 * exp(-min(ex, ey) * 2.5 - max(ex, ey) / 2.5)), q = (y * W + x) * 3;\n      S.buf[q] += 255 * v;\n      S.buf[q + 1] += 246 * v;\n      S.buf[q + 2] += mix(225, 170, h) * v;\n    }\n}\n\nfunction drawCloud(S, c, hw, ht, g, yb, al, haze) {\n  const { buf, t } = S, h = S.hour, B = [], lean = S.lean * 0.6;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9;\n  for (const p of c.p) {\n    const gr = sstep(p.t0, p.t0 + 0.25, g);\n    if (gr \u003c= 0.02) continue;\n    const r = p.r * hw * gr * (1 + 0.05 * sin(t * 0.7 + p.ph)), bx = c.x + p.u * hw + lean * p.v * ht + 0.04 * hw * sin(t * 0.5 + p.ph);\n    const by = yb - p.v * ht - 0.03 * ht * sin(t * 0.4 + p.ph * 2);\n    B.push(bx, by, r);\n    x0 = min(x0, bx - r);\n    x1 = max(x1, bx + r);\n    y0 = min(y0, by - r);\n  }\n  const L = [mix(-0.45, -0.85, h), mix(-0.7, -0.28, h), 0.5], ll = sqrt(L[0] * L[0] + L[1] * L[1] + L[2] * L[2]);\n  const litC = mix3([252, 252, 250], [255, 214, 150], h);\n  const shC = mix3([150, 162, 192], [150, 124, 146], h).map((v) => v * (1 - 0.2 * g * (c.det ? 0.5 : 1)));\n  const baseC = mix3([126, 132, 152], [108, 90, 100], h).map((v) => v * mix(1, 0.78, g));\n  const hz = hazeOf(h);\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, yb + 1); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, x1 + 2); x++) {\n      const px = x + 0.5, py = y + 0.5;\n      // The normal blends the puffs nearby, weighted by how deep inside each the pixel is.\n      let best = -9, r = 1, sw = 0, nx = 0, ny = 0;\n      for (let i = 0; i \u003c B.length; i += 3) {\n        const dx = (px - B[i]) / B[i + 2], dy = (py - B[i + 1]) / B[i + 2], v = 1 - sqrt(dx * dx + dy * dy);\n        if (v \u003c -0.5) continue;\n        if (v > best) {\n          best = v;\n          r = B[i + 2];\n        }\n        const w = exp(7 * v);\n        sw += w;\n        nx += dx * w;\n        ny += dy * w;\n      }\n      if (best \u003c -0.4) continue;\n      // Cauliflower edges; a cloud that is dying frays from the edges in.\n      const n = noise(px * 0.32, py * 0.32 - t * 0.12, c.sd);\n      const a = clamp((best + 0.32 * (n - 0.5) - (1 - al) * 0.8) * r * 0.7, 0, 1) * clamp(yb + 0.7 - py + 0.6 * noise(px * 0.4, 1, c.sd), 0, 1) * sqrt(al);\n      if (a \u003c= 0) continue;\n      nx /= sw;\n      ny /= sw;\n      const nz = sqrt(max(0, 1 - nx * nx - ny * ny));\n      const lw = clamp(((nx * L[0] + ny * L[1] + nz * L[2]) / ll + 0.45) / 1.45 + 0.3 * (n - 0.5), 0, 1) * (0.55 + 0.45 * clamp((yb - py) / (0.45 * ht), 0, 1));\n      const bs = sstep(yb - 2.6, yb - 0.6, py), q = (y * W + x) * 3;\n      for (let k = 0; k \u003c 3; k++) buf[q + k] += (mix(mix(mix(shC[k], litC[k], lw), baseC[k], bs), hz[k], haze) - buf[q + k]) * a;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.painted === undefined || abs(S.painted - S.hour) > 0.003) paint(S);\n  const h = S.hour, buf = S.buf;\n  buf.set(S.bg);\n\n  // Cloud shadows: each thermal cloud's, pushed off its field by the sun, and two from clouds out of sight.\n  const sh = [];\n  for (const c of S.clouds) {\n    const ru = (((8 + 18 * c.g) * S.ks * DSRC) / 64) * 0.95 * (c.det ? sqrt(c.al) : 1);\n    sh.push(((c.x - 29 + 30 * h) * DSRC) / 64, DSRC * (1.04 + 1.1 * h), ru, ru * 1.3 + 0.5, c.al * (0.55 + 0.45 * c.g));\n  }\n  for (const s of S.shad) sh.push(((s.x - 32) * s.D) / 64, s.D, (s.r * s.D) / 64, s.rd, 1);\n  const sc = [0.46, 0.5, 0.62];\n  for (let p = FY * W; p \u003c N; p++) {\n    let m = 0;\n    for (let i = 0; i \u003c sh.length; i += 5) {\n      const du = (S.fu[p] - sh[i]) / sh[i + 2], dv = (S.fd[p] - sh[i + 1]) / sh[i + 3], q = du * du + dv * dv;\n      if (q \u003c 2.2) m = max(m, sstep(1.05, 0.6, sqrt(q) + 0.35 * (S.fn[p] - 0.5)) * sh[i + 4]);\n    }\n    if (m > 0) for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= mix(1, sc[c], m);\n  }\n\n  // Far cumulus along the horizon, then the clouds the thermal builds.\n  for (const f of S.far) drawCloud(S, f, f.hw, f.ht, 1, f.yb, 0.9, 0.5);\n  for (const c of S.clouds) drawCloud(S, c, (8 + 18 * c.g) * S.ks, (6 + 26 * c.g) * S.ks, c.g, YB, c.det ? c.al : 1, 0);\n\n  // Thistledown catching the sun as it rises.\n  const dc = mix3([240, 240, 228], [255, 222, 160], h), nd = 26 + round((10 * (S.ks - 1)) / 0.14);\n  for (let i = 0; i \u003c nd; i++) {\n    const p = S.down[i], x = round(colX(S, p.y) + p.r * cos(p.a) + 0.8 * sin(S.t * 1.7 + p.tw) - 0.5), y = round(p.y + p.r * sin(p.a) * SE - 0.5);\n    if (x \u003c 0 || x >= W) continue;\n    const a = (0.45 + 0.4 * sin(S.t * 3 + p.tw * 5)) * sstep(YB, YB + 8, p.y) * sstep(YG + 2, YG - 6, p.y);\n    for (let k = 0, q = (y * W + x) * 3; k \u003c 3; k++) buf[q + k] += (dc[k] - buf[q + k]) * a;\n  }\n\n  // The winch cable, and the one that falls on its red parachute after release.\n  const dark = [36, 34, 38];\n  for (const o of S.gl)\n    if (o.cable) {\n      stroke(S, o.X + o.dir * 3 * cos(o.pitch), o.yc - o.Z * SE - 3 * sin(o.pitch), o.X0 + o.dir * 58, 118, 0.18, 0.18);\n      flush(S, dark, 0.75);\n    }\n  const cb = S.cable;\n  if (cb) {\n    stroke(S, cb.x, cb.y, cb.xw, 118, 0.18, 0.18);\n    flush(S, dark, 0.75 * (1 - cb.t / 2));\n    stroke(S, cb.x, cb.y - 1, cb.x, cb.y - 1, 0.7, 0.7);\n    flush(S, [230, 50, 40], 1 - cb.t / 2);\n  }\n  // Gliders and buzzards, the far side of their circles first.\n  for (const o of S.gl.slice().sort((p, q) => p.Z - q.Z)) craft(S, o, h);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower."},{"name":"Gliders","min":1,"max":4,"about":"One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up."},{"name":"Wind","min":-1,"max":1,"about":"The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm."}],"start":[0,2,1,0.06],"measures":{"motion":0.0272,"detail":0.0308,"edges":0.2402,"complexity":1.2348,"coverage":0.9999,"colour":0.3714,"drift":0.0371},"knobResponse":[0.1132,0.0554,0.0527,0.073]},{"slug":"thomson-problem","title":"Thomson Problem","family":"physics","round":34,"note":"천천히 도는 구 위에서 같은 전하 100개가 서로 밀어 거의 삼각형인 격자로 앉아요. 이웃이 여섯인 전하는 가운데가 옅은 하늘색으로, 오일러 공식이 늘 열둘을 남기는 다섯 이웃 전하는 금색으로 빛나고, 일곱 이웃 전하가 생기면 자홍색이에요. K3 을 480 까지 올리면 열둘이 5-7-5 흉터로 자라고, K1 을 누르면 전하가 흩어졌다가 다시 격자로 앉아요.","idea":"Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.","buttons":"K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.","code":"// ===== Patternflow pattern =====\n// Title:   Thomson Problem\n// Family:  physics\n// Idea:    Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Thomson problem (J. J. Thomson, 1904), with the scars of Bowick, Nelson and Travesset (2000), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1\n//\n// Knob 1: Hue. Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue.\n// Knob 2: Speed. How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds.\n// Knob 3: Charges. 100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them.\n// Knob 4: Heat. A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander.\n// Buttons: K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5, RS = 29;\nconst NMIN = 100, NMAX = 480;\n// Sixfold, fivefold and sevenfold charges: hue offset, saturation at the\n// rim and at the centre, and peak level.\nconst TYPES = [\n  [0, 1, 0.4, 215],\n  [0.58, 1, 0.45, 250],\n  [0.3, 1, 0.4, 240],\n];\n// The glow's sigma in LEDs, or a fifth of the lattice spacing where that is less.\nconst SIG = 2.15;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Lattice spacing on the unit sphere: each charge holds (sqrt3/2) a^2 of the\n// 4 pi of surface.\nconst spacing = (n) => sqrt((8 * PI) / (sqrt(3) * n));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * log(u)) * cos(2 * PI * v);\n}\n\nfunction scatter(X, from, to) {\n  for (let i = from; i \u003c to; i++) {\n    const z = 2 * random() - 1, f = 2 * PI * random(), r = sqrt(1 - z * z);\n    X[3 * i] = r * cos(f);\n    X[3 * i + 1] = r * sin(f);\n    X[3 * i + 2] = z;\n  }\n}\n\n// One step of projected gradient descent on E = sum 1/r_ij, with momentum\n// beta. The step is 0.15 a^3; plain descent at 0.25 a^3 rang and never\n// settled. No charge moves more than a fifth of the spacing in one step, so a\n// fresh scatter, where two charges can sit almost on top of each other, stays\n// calm. Heat adds a random kick of up to 0.075 a per step.\nfunction relax(S, kick, beta) {\n  const { X, F, M } = S, n = S.n;\n  F.fill(0, 0, 3 * n);\n  for (let i = 0; i \u003c n; i++) {\n    const xi = X[3 * i], yi = X[3 * i + 1], zi = X[3 * i + 2];\n    let fx = 0, fy = 0, fz = 0;\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = xi - X[3 * j], dy = yi - X[3 * j + 1], dz = zi - X[3 * j + 2];\n      const r2 = dx * dx + dy * dy + dz * dz + 1e-9, q = 1 / (r2 * sqrt(r2));\n      fx += dx * q;\n      fy += dy * q;\n      fz += dz * q;\n      F[3 * j] -= dx * q;\n      F[3 * j + 1] -= dy * q;\n      F[3 * j + 2] -= dz * q;\n    }\n    F[3 * i] += fx;\n    F[3 * i + 1] += fy;\n    F[3 * i + 2] += fz;\n  }\n  const a = spacing(n), eta = 0.15 * a * a * a, cap = 0.2 * a, k = kick * a;\n  for (let i = 0; i \u003c n; i++) {\n    const o = 3 * i, x = X[o], y = X[o + 1], z = X[o + 2];\n    let fx = F[o], fy = F[o + 1], fz = F[o + 2];\n    const d = fx * x + fy * y + fz * z;\n    fx = beta * M[o] + eta * (fx - d * x);\n    fy = beta * M[o + 1] + eta * (fy - d * y);\n    fz = beta * M[o + 2] + eta * (fz - d * z);\n    const e = fx * x + fy * y + fz * z;\n    fx -= e * x;\n    fy -= e * y;\n    fz -= e * z;\n    const m = sqrt(fx * fx + fy * fy + fz * fz);\n    if (m > cap) {\n      fx *= cap / m;\n      fy *= cap / m;\n      fz *= cap / m;\n    }\n    M[o] = fx;\n    M[o + 1] = fy;\n    M[o + 2] = fz;\n    if (k > 0) {\n      fx += k * gauss();\n      fy += k * gauss();\n      fz += k * gauss();\n    }\n    const nx = x + fx, ny = y + fy, nz = z + fz, l = 1 / sqrt(nx * nx + ny * ny + nz * nz);\n    X[o] = nx * l;\n    X[o + 1] = ny * l;\n    X[o + 2] = nz * l;\n  }\n}\n\nfunction energy(X, n) {\n  let e = 0;\n  for (let i = 0; i \u003c n; i++)\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = X[3 * i] - X[3 * j], dy = X[3 * i + 1] - X[3 * j + 1], dz = X[3 * i + 2] - X[3 * j + 2];\n      e += 1 / sqrt(dx * dx + dy * dy + dz * dz);\n    }\n  return e;\n}\n\n// The Delaunay triangulation of points on a sphere is their convex hull.\n// Incremental hull: each new point removes the faces it sees and joins the\n// horizon around them to itself. E maps a directed edge u->v to its face.\nfunction hull(S) {\n  const P = S.U, n = S.n, { fa, fb, fc, fx, fy, fz, fd, vis, E } = S;\n  let nf = 0;\n  const add = (a, b, c) => {\n    const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n    const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n    const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n    const x = uy * vz - uz * vy, y = uz * vx - ux * vz, z = ux * vy - uy * vx;\n    fa[nf] = a;\n    fb[nf] = b;\n    fc[nf] = c;\n    fx[nf] = x;\n    fy[nf] = y;\n    fz[nf] = z;\n    fd[nf] = x * ax + y * ay + z * az;\n    vis[nf] = 0;\n    E[a * n + b] = nf;\n    E[b * n + c] = nf;\n    E[c * n + a] = nf;\n    return nf++;\n  };\n  // The fourth point of the first tetrahedron is the one farthest from the\n  // plane of the first three.\n  let k = 3, best = -1;\n  for (let j = 3; j \u003c n; j++) {\n    const v = abs(orient(P, 0, 1, 2, j));\n    if (v > best) (best = v), (k = j);\n  }\n  let live = [];\n  if (orient(P, 0, 1, 2, k) \u003c 0) live.push(add(0, 1, 2), add(1, 0, k), add(2, 1, k), add(0, 2, k));\n  else live.push(add(0, 2, 1), add(0, 1, k), add(1, 2, k), add(2, 0, k));\n  const seen = [], rim = [];\n  for (let p = 3; p \u003c n; p++) {\n    if (p === k) continue;\n    const px = P[3 * p], py = P[3 * p + 1], pz = P[3 * p + 2];\n    seen.length = 0;\n    for (let q = 0; q \u003c live.length; q++) {\n      const f = live[q];\n      if (fx[f] * px + fy[f] * py + fz[f] * pz - fd[f] > 1e-13) {\n        vis[f] = 1;\n        seen.push(f);\n      }\n    }\n    if (!seen.length) continue;\n    rim.length = 0;\n    for (const f of seen) {\n      const a = fa[f], b = fb[f], c = fc[f];\n      if (!vis[E[b * n + a]]) rim.push(a, b);\n      if (!vis[E[c * n + b]]) rim.push(b, c);\n      if (!vis[E[a * n + c]]) rim.push(c, a);\n    }\n    const next = [];\n    for (const f of live) if (!vis[f]) next.push(f);\n    for (let r = 0; r \u003c rim.length; r += 2) next.push(add(rim[r], rim[r + 1], p));\n    live = next;\n  }\n  // Keep the faces as the triangulation the flips look after from here on.\n  S.nt = live.length;\n  for (let t = 0; t \u003c live.length; t++) {\n    const f = live[t];\n    S.ta[t] = fa[f];\n    S.tb[t] = fb[f];\n    S.tc[t] = fc[f];\n  }\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = S.ta[t], b = S.tb[t], c = S.tc[t];\n    E[a * n + b] = t;\n    E[b * n + c] = t;\n    E[c * n + a] = t;\n  }\n}\n\n// (d - a) . ((b - a) x (c - a)): positive when d lies outside the plane of the\n// triangle abc, which on the sphere means inside its circumcircle.\nfunction orient(P, a, b, c, d) {\n  const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n  const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n  const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n  const wx = P[3 * d] - ax, wy = P[3 * d + 1] - ay, wz = P[3 * d + 2] - az;\n  return wx * (uy * vz - uz * vy) + wy * (uz * vx - ux * vz) + wz * (ux * vy - uy * vx);\n}\n\n// Between hulls the triangulation follows the charges by edge flips. An edge\n// flips only once the far point is inside the circumcircle by 2% of what a\n// perfect lattice holds it outside, so a nearly square quad does not toggle\n// a 5-7 pair from frame to frame. A face turned inside out asks for a new hull.\nfunction maintain(S) {\n  const P = S.U, n = S.n, { ta, tb, tc, E } = S;\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = ta[t], b = tb[t], c = tc[t];\n    const ux = P[3 * b] - P[3 * a], uy = P[3 * b + 1] - P[3 * a + 1], uz = P[3 * b + 2] - P[3 * a + 2];\n    const vx = P[3 * c] - P[3 * a], vy = P[3 * c + 1] - P[3 * a + 1], vz = P[3 * c + 2] - P[3 * a + 2];\n    const d = (uy * vz - uz * vy) * P[3 * a] + (uz * vx - ux * vz) * P[3 * a + 1] + (ux * vy - uy * vx) * P[3 * a + 2];\n    if (d \u003c= 0) return hull(S);\n  }\n  const a = spacing(n), thr = 0.02 * 0.433 * a * a * a * a;\n  for (let pass = 0; pass \u003c 8; pass++) {\n    let flips = 0;\n    for (let t = 0; t \u003c S.nt; t++)\n      for (let e = 0; e \u003c 3; e++) {\n        const u = e === 0 ? ta[t] : e === 1 ? tb[t] : tc[t];\n        const v = e === 0 ? tb[t] : e === 1 ? tc[t] : ta[t];\n        const w = e === 0 ? tc[t] : e === 1 ? ta[t] : tb[t];\n        if (u > v) continue;\n        const s = E[v * n + u];\n        const x = ta[s] !== u && ta[s] !== v ? ta[s] : tb[s] !== u && tb[s] !== v ? tb[s] : tc[s];\n        if (orient(P, u, v, w, x) > thr) {\n          ta[t] = w;\n          tb[t] = u;\n          tc[t] = x;\n          ta[s] = x;\n          tb[s] = v;\n          tc[s] = w;\n          E[w * n + u] = t;\n          E[u * n + x] = t;\n          E[x * n + w] = t;\n          E[x * n + v] = s;\n          E[v * n + w] = s;\n          E[w * n + x] = s;\n          flips++;\n          break;\n        }\n      }\n    if (!flips) break;\n  }\n}\n\n// U is the display position: the charge's position smoothed over about seven\n// steps and put back on the sphere, so heat shows as a wobble and not a buzz,\n// and the lattice is read from where the charges sit, not where they shiver.\nfunction smooth(S, k) {\n  const { X, V, U } = S;\n  for (let i = 0; i \u003c S.n; i++) {\n    const o = 3 * i;\n    V[o] += k * (X[o] - V[o]);\n    V[o + 1] += k * (X[o + 1] - V[o + 1]);\n    V[o + 2] += k * (X[o + 2] - V[o + 2]);\n    const l = 1 / sqrt(V[o] * V[o] + V[o + 1] * V[o + 1] + V[o + 2] * V[o + 2]);\n    U[o] = V[o] * l;\n    U[o + 1] = V[o + 1] * l;\n    U[o + 2] = V[o + 2] * l;\n  }\n}\n\nfunction degrees(S) {\n  const { deg, ta, tb, tc } = S;\n  deg.fill(0, 0, S.n);\n  for (let t = 0; t \u003c S.nt; t++) {\n    deg[ta[t]]++;\n    deg[tb[t]]++;\n    deg[tc[t]]++;\n  }\n}\n\n// The opening: a few scatters, each run down 400 steps with heavy momentum\n// (0.9), and the one with the lowest energy kept. At 100 charges the best of\n// five opens 0.02 above the known minimum 4448.3506, with just the twelve.\nfunction settle(S) {\n  const n = S.n, tries = n \u003c= 160 ? 5 : n \u003c= 300 ? 3 : 1, steps = n \u003c= 300 ? 400 : 300;\n  const keep = new Float64Array(3 * n);\n  let best = Infinity;\n  for (let r = 0; r \u003c tries; r++) {\n    scatter(S.X, 0, n);\n    S.M.fill(0);\n    for (let i = 0; i \u003c steps; i++) relax(S, 0, 0.9);\n    const e = energy(S.X, n);\n    if (e \u003c best) {\n      best = e;\n      keep.set(S.X.subarray(0, 3 * n));\n    }\n  }\n  S.X.set(keep);\n  S.V.set(keep);\n  S.U.set(keep);\n  S.M.fill(0);\n  hull(S);\n  degrees(S);\n  for (let i = 0; i \u003c n; i++) {\n    S.f5[i] = S.deg[i] \u003c 6 ? 1 : 0;\n    S.f7[i] = S.deg[i] > 6 ? 1 : 0;\n  }\n}\n\nfunction resize(S, n) {\n  const old = S.n;\n  S.n = n;\n  if (n > old) {\n    scatter(S.X, old, n);\n    for (let i = 3 * old; i \u003c 3 * n; i++) {\n      S.V[i] = S.U[i] = S.X[i];\n      S.M[i] = 0;\n    }\n    for (let i = old; i \u003c n; i++) S.f5[i] = S.f7[i] = 0;\n  }\n  hull(S);\n}\n\nexport function setup(params) {\n  const F = 16 * NMAX + 64;\n  params.s = {\n    n: 0, hue: 0, speed: 2, heat: 0.06, turn: 0, acc: 0, warm: false,\n    X: new Float64Array(3 * NMAX), F: new Float64Array(3 * NMAX), M: new Float64Array(3 * NMAX), V: new Float64Array(3 * NMAX), U: new Float64Array(3 * NMAX),\n    fa: new Int32Array(F), fb: new Int32Array(F), fc: new Int32Array(F), fx: new Float64Array(F), fy: new Float64Array(F), fz: new Float64Array(F), fd: new Float64Array(F), vis: new Uint8Array(F),\n    E: new Int32Array(NMAX * NMAX), ta: new Int32Array(2 * NMAX), tb: new Int32Array(2 * NMAX), tc: new Int32Array(2 * NMAX), nt: 0,\n    deg: new Int32Array(NMAX), f5: new Float32Array(NMAX), f7: new Float32Array(NMAX),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0, 0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, NMIN, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.heat = cl(k[3], 0, 1);\n  const n = round(cl(k[2], NMIN, NMAX)), kick = 0.075 * S.heat;\n  if (!S.warm) {\n    S.n = n;\n    settle(S);\n    S.warm = true;\n  } else if (n !== S.n) resize(S, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    scatter(S.X, 0, S.n);\n    S.M.fill(0);\n    S.V.set(S.X.subarray(0, 3 * S.n));\n    S.U.set(S.X.subarray(0, 3 * S.n));\n    hull(S);\n  }\n  // 30 steps a second for each unit of Speed, at most six a frame.\n  S.acc += d * S.speed * 30;\n  let steps = min(6, floor(S.acc));\n  S.acc -= floor(S.acc);\n  for (; steps > 0; steps--) {\n    relax(S, kick, 0.5);\n    smooth(S, 0.15);\n  }\n  maintain(S);\n  degrees(S);\n  const ease = 1 - exp(-d / 0.08);\n  for (let i = 0; i \u003c S.n; i++) {\n    S.f5[i] += ease * ((S.deg[i] \u003c 6 ? 1 : 0) - S.f5[i]);\n    S.f7[i] += ease * ((S.deg[i] > 6 ? 1 : 0) - S.f7[i]);\n  }\n  S.turn += d * S.speed * 0.1;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { U, R, G, B, c, f5, f7 } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The sphere turns about an axis leaning 20 degrees toward the viewer.\n  const ct = cos(S.turn), st = sin(S.turn), cx = cos(0.35), sx = sin(0.35);\n  const h = S.hue + 0.55;\n  // Each charge is one soft gaussian glow. Its colour runs from nearly white\n  // at the centre to the full hue at the rim: hsv(hue, s, 1) is white less s\n  // times (1 - the pure hue), and s falls with the square of the glow.\n  const T = TYPES.map(([dh, sr, sc, lv]) => {\n    const q = [0, 0, 0];\n    hsv(h + dh, 1, 1, q);\n    return [1 - q[0], 1 - q[1], 1 - q[2], sr, sr - sc, lv];\n  });\n  const sp = spacing(n) * RS, sig = min(SIG, 0.2 * sp);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = U[3 * i], y0 = U[3 * i + 1], z0 = U[3 * i + 2];\n    const x1 = ct * x0 + st * z0, z1 = -st * x0 + ct * z0;\n    const y = cx * y0 - sx * z1, z = sx * y0 + cx * z1, x = x1;\n    if (z \u003c -0.02) continue;\n    const t = cl((z + 0.02) / 0.37, 0, 1), w = t * t * (3 - 2 * t);\n    const a5 = f5[i], a7 = f7[i], a6 = 1 - a5 - a7;\n    for (let j = 0; j \u003c 6; j++) c[j] = T[0][j] * a6 + T[1][j] * a5 + T[2][j] * a7;\n    const L = c[5] * w * (0.55 + 0.45 * z), s = sig * (1 + 0.25 * (a5 + a7));\n    // Foreshortened toward the rim: narrower across the radius.\n    const px = CX + RS * x, py = CY - RS * y, rr = sqrt(x * x + y * y) || 1, rx = x / rr, ry = -y / rr;\n    const sr = s * (0.45 + 0.55 * z), ir = 1 / (2 * sr * sr), it = 1 / (2 * s * s), ext = 3 * s;\n    for (let yy = max(0, floor(py - ext)); yy \u003c= min(H - 1, py + ext); yy++)\n      for (let xx = max(0, floor(px - ext)); xx \u003c= min(W - 1, px + ext); xx++) {\n        const dx = xx - px, dy = yy - py, dr = dx * rx + dy * ry, dq = -dx * ry + dy * rx;\n        const g = exp(-dr * dr * ir - dq * dq * it), v = L * g, sat = v * (c[3] - c[4] * g * g * g), p = yy * W + xx;\n        R[p] += v - sat * c[0];\n        G[p] += v - sat * c[1];\n        B[p] += v - sat * c[2];\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-thomson-problem","type":"code","name":"thomson-problem","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Thomson Problem\n// Family:  physics\n// Idea:    Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Thomson problem (J. J. Thomson, 1904), with the scars of Bowick, Nelson and Travesset (2000), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1\n//\n// Knob 1: Hue. Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue.\n// Knob 2: Speed. How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds.\n// Knob 3: Charges. 100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them.\n// Knob 4: Heat. A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander.\n// Buttons: K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5, RS = 29;\nconst NMIN = 100, NMAX = 480;\n// Sixfold, fivefold and sevenfold charges: hue offset, saturation at the\n// rim and at the centre, and peak level.\nconst TYPES = [\n  [0, 1, 0.4, 215],\n  [0.58, 1, 0.45, 250],\n  [0.3, 1, 0.4, 240],\n];\n// The glow's sigma in LEDs, or a fifth of the lattice spacing where that is less.\nconst SIG = 2.15;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Lattice spacing on the unit sphere: each charge holds (sqrt3/2) a^2 of the\n// 4 pi of surface.\nconst spacing = (n) => sqrt((8 * PI) / (sqrt(3) * n));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * log(u)) * cos(2 * PI * v);\n}\n\nfunction scatter(X, from, to) {\n  for (let i = from; i \u003c to; i++) {\n    const z = 2 * random() - 1, f = 2 * PI * random(), r = sqrt(1 - z * z);\n    X[3 * i] = r * cos(f);\n    X[3 * i + 1] = r * sin(f);\n    X[3 * i + 2] = z;\n  }\n}\n\n// One step of projected gradient descent on E = sum 1/r_ij, with momentum\n// beta. The step is 0.15 a^3; plain descent at 0.25 a^3 rang and never\n// settled. No charge moves more than a fifth of the spacing in one step, so a\n// fresh scatter, where two charges can sit almost on top of each other, stays\n// calm. Heat adds a random kick of up to 0.075 a per step.\nfunction relax(S, kick, beta) {\n  const { X, F, M } = S, n = S.n;\n  F.fill(0, 0, 3 * n);\n  for (let i = 0; i \u003c n; i++) {\n    const xi = X[3 * i], yi = X[3 * i + 1], zi = X[3 * i + 2];\n    let fx = 0, fy = 0, fz = 0;\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = xi - X[3 * j], dy = yi - X[3 * j + 1], dz = zi - X[3 * j + 2];\n      const r2 = dx * dx + dy * dy + dz * dz + 1e-9, q = 1 / (r2 * sqrt(r2));\n      fx += dx * q;\n      fy += dy * q;\n      fz += dz * q;\n      F[3 * j] -= dx * q;\n      F[3 * j + 1] -= dy * q;\n      F[3 * j + 2] -= dz * q;\n    }\n    F[3 * i] += fx;\n    F[3 * i + 1] += fy;\n    F[3 * i + 2] += fz;\n  }\n  const a = spacing(n), eta = 0.15 * a * a * a, cap = 0.2 * a, k = kick * a;\n  for (let i = 0; i \u003c n; i++) {\n    const o = 3 * i, x = X[o], y = X[o + 1], z = X[o + 2];\n    let fx = F[o], fy = F[o + 1], fz = F[o + 2];\n    const d = fx * x + fy * y + fz * z;\n    fx = beta * M[o] + eta * (fx - d * x);\n    fy = beta * M[o + 1] + eta * (fy - d * y);\n    fz = beta * M[o + 2] + eta * (fz - d * z);\n    const e = fx * x + fy * y + fz * z;\n    fx -= e * x;\n    fy -= e * y;\n    fz -= e * z;\n    const m = sqrt(fx * fx + fy * fy + fz * fz);\n    if (m > cap) {\n      fx *= cap / m;\n      fy *= cap / m;\n      fz *= cap / m;\n    }\n    M[o] = fx;\n    M[o + 1] = fy;\n    M[o + 2] = fz;\n    if (k > 0) {\n      fx += k * gauss();\n      fy += k * gauss();\n      fz += k * gauss();\n    }\n    const nx = x + fx, ny = y + fy, nz = z + fz, l = 1 / sqrt(nx * nx + ny * ny + nz * nz);\n    X[o] = nx * l;\n    X[o + 1] = ny * l;\n    X[o + 2] = nz * l;\n  }\n}\n\nfunction energy(X, n) {\n  let e = 0;\n  for (let i = 0; i \u003c n; i++)\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = X[3 * i] - X[3 * j], dy = X[3 * i + 1] - X[3 * j + 1], dz = X[3 * i + 2] - X[3 * j + 2];\n      e += 1 / sqrt(dx * dx + dy * dy + dz * dz);\n    }\n  return e;\n}\n\n// The Delaunay triangulation of points on a sphere is their convex hull.\n// Incremental hull: each new point removes the faces it sees and joins the\n// horizon around them to itself. E maps a directed edge u->v to its face.\nfunction hull(S) {\n  const P = S.U, n = S.n, { fa, fb, fc, fx, fy, fz, fd, vis, E } = S;\n  let nf = 0;\n  const add = (a, b, c) => {\n    const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n    const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n    const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n    const x = uy * vz - uz * vy, y = uz * vx - ux * vz, z = ux * vy - uy * vx;\n    fa[nf] = a;\n    fb[nf] = b;\n    fc[nf] = c;\n    fx[nf] = x;\n    fy[nf] = y;\n    fz[nf] = z;\n    fd[nf] = x * ax + y * ay + z * az;\n    vis[nf] = 0;\n    E[a * n + b] = nf;\n    E[b * n + c] = nf;\n    E[c * n + a] = nf;\n    return nf++;\n  };\n  // The fourth point of the first tetrahedron is the one farthest from the\n  // plane of the first three.\n  let k = 3, best = -1;\n  for (let j = 3; j \u003c n; j++) {\n    const v = abs(orient(P, 0, 1, 2, j));\n    if (v > best) (best = v), (k = j);\n  }\n  let live = [];\n  if (orient(P, 0, 1, 2, k) \u003c 0) live.push(add(0, 1, 2), add(1, 0, k), add(2, 1, k), add(0, 2, k));\n  else live.push(add(0, 2, 1), add(0, 1, k), add(1, 2, k), add(2, 0, k));\n  const seen = [], rim = [];\n  for (let p = 3; p \u003c n; p++) {\n    if (p === k) continue;\n    const px = P[3 * p], py = P[3 * p + 1], pz = P[3 * p + 2];\n    seen.length = 0;\n    for (let q = 0; q \u003c live.length; q++) {\n      const f = live[q];\n      if (fx[f] * px + fy[f] * py + fz[f] * pz - fd[f] > 1e-13) {\n        vis[f] = 1;\n        seen.push(f);\n      }\n    }\n    if (!seen.length) continue;\n    rim.length = 0;\n    for (const f of seen) {\n      const a = fa[f], b = fb[f], c = fc[f];\n      if (!vis[E[b * n + a]]) rim.push(a, b);\n      if (!vis[E[c * n + b]]) rim.push(b, c);\n      if (!vis[E[a * n + c]]) rim.push(c, a);\n    }\n    const next = [];\n    for (const f of live) if (!vis[f]) next.push(f);\n    for (let r = 0; r \u003c rim.length; r += 2) next.push(add(rim[r], rim[r + 1], p));\n    live = next;\n  }\n  // Keep the faces as the triangulation the flips look after from here on.\n  S.nt = live.length;\n  for (let t = 0; t \u003c live.length; t++) {\n    const f = live[t];\n    S.ta[t] = fa[f];\n    S.tb[t] = fb[f];\n    S.tc[t] = fc[f];\n  }\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = S.ta[t], b = S.tb[t], c = S.tc[t];\n    E[a * n + b] = t;\n    E[b * n + c] = t;\n    E[c * n + a] = t;\n  }\n}\n\n// (d - a) . ((b - a) x (c - a)): positive when d lies outside the plane of the\n// triangle abc, which on the sphere means inside its circumcircle.\nfunction orient(P, a, b, c, d) {\n  const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n  const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n  const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n  const wx = P[3 * d] - ax, wy = P[3 * d + 1] - ay, wz = P[3 * d + 2] - az;\n  return wx * (uy * vz - uz * vy) + wy * (uz * vx - ux * vz) + wz * (ux * vy - uy * vx);\n}\n\n// Between hulls the triangulation follows the charges by edge flips. An edge\n// flips only once the far point is inside the circumcircle by 2% of what a\n// perfect lattice holds it outside, so a nearly square quad does not toggle\n// a 5-7 pair from frame to frame. A face turned inside out asks for a new hull.\nfunction maintain(S) {\n  const P = S.U, n = S.n, { ta, tb, tc, E } = S;\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = ta[t], b = tb[t], c = tc[t];\n    const ux = P[3 * b] - P[3 * a], uy = P[3 * b + 1] - P[3 * a + 1], uz = P[3 * b + 2] - P[3 * a + 2];\n    const vx = P[3 * c] - P[3 * a], vy = P[3 * c + 1] - P[3 * a + 1], vz = P[3 * c + 2] - P[3 * a + 2];\n    const d = (uy * vz - uz * vy) * P[3 * a] + (uz * vx - ux * vz) * P[3 * a + 1] + (ux * vy - uy * vx) * P[3 * a + 2];\n    if (d \u003c= 0) return hull(S);\n  }\n  const a = spacing(n), thr = 0.02 * 0.433 * a * a * a * a;\n  for (let pass = 0; pass \u003c 8; pass++) {\n    let flips = 0;\n    for (let t = 0; t \u003c S.nt; t++)\n      for (let e = 0; e \u003c 3; e++) {\n        const u = e === 0 ? ta[t] : e === 1 ? tb[t] : tc[t];\n        const v = e === 0 ? tb[t] : e === 1 ? tc[t] : ta[t];\n        const w = e === 0 ? tc[t] : e === 1 ? ta[t] : tb[t];\n        if (u > v) continue;\n        const s = E[v * n + u];\n        const x = ta[s] !== u && ta[s] !== v ? ta[s] : tb[s] !== u && tb[s] !== v ? tb[s] : tc[s];\n        if (orient(P, u, v, w, x) > thr) {\n          ta[t] = w;\n          tb[t] = u;\n          tc[t] = x;\n          ta[s] = x;\n          tb[s] = v;\n          tc[s] = w;\n          E[w * n + u] = t;\n          E[u * n + x] = t;\n          E[x * n + w] = t;\n          E[x * n + v] = s;\n          E[v * n + w] = s;\n          E[w * n + x] = s;\n          flips++;\n          break;\n        }\n      }\n    if (!flips) break;\n  }\n}\n\n// U is the display position: the charge's position smoothed over about seven\n// steps and put back on the sphere, so heat shows as a wobble and not a buzz,\n// and the lattice is read from where the charges sit, not where they shiver.\nfunction smooth(S, k) {\n  const { X, V, U } = S;\n  for (let i = 0; i \u003c S.n; i++) {\n    const o = 3 * i;\n    V[o] += k * (X[o] - V[o]);\n    V[o + 1] += k * (X[o + 1] - V[o + 1]);\n    V[o + 2] += k * (X[o + 2] - V[o + 2]);\n    const l = 1 / sqrt(V[o] * V[o] + V[o + 1] * V[o + 1] + V[o + 2] * V[o + 2]);\n    U[o] = V[o] * l;\n    U[o + 1] = V[o + 1] * l;\n    U[o + 2] = V[o + 2] * l;\n  }\n}\n\nfunction degrees(S) {\n  const { deg, ta, tb, tc } = S;\n  deg.fill(0, 0, S.n);\n  for (let t = 0; t \u003c S.nt; t++) {\n    deg[ta[t]]++;\n    deg[tb[t]]++;\n    deg[tc[t]]++;\n  }\n}\n\n// The opening: a few scatters, each run down 400 steps with heavy momentum\n// (0.9), and the one with the lowest energy kept. At 100 charges the best of\n// five opens 0.02 above the known minimum 4448.3506, with just the twelve.\nfunction settle(S) {\n  const n = S.n, tries = n \u003c= 160 ? 5 : n \u003c= 300 ? 3 : 1, steps = n \u003c= 300 ? 400 : 300;\n  const keep = new Float64Array(3 * n);\n  let best = Infinity;\n  for (let r = 0; r \u003c tries; r++) {\n    scatter(S.X, 0, n);\n    S.M.fill(0);\n    for (let i = 0; i \u003c steps; i++) relax(S, 0, 0.9);\n    const e = energy(S.X, n);\n    if (e \u003c best) {\n      best = e;\n      keep.set(S.X.subarray(0, 3 * n));\n    }\n  }\n  S.X.set(keep);\n  S.V.set(keep);\n  S.U.set(keep);\n  S.M.fill(0);\n  hull(S);\n  degrees(S);\n  for (let i = 0; i \u003c n; i++) {\n    S.f5[i] = S.deg[i] \u003c 6 ? 1 : 0;\n    S.f7[i] = S.deg[i] > 6 ? 1 : 0;\n  }\n}\n\nfunction resize(S, n) {\n  const old = S.n;\n  S.n = n;\n  if (n > old) {\n    scatter(S.X, old, n);\n    for (let i = 3 * old; i \u003c 3 * n; i++) {\n      S.V[i] = S.U[i] = S.X[i];\n      S.M[i] = 0;\n    }\n    for (let i = old; i \u003c n; i++) S.f5[i] = S.f7[i] = 0;\n  }\n  hull(S);\n}\n\nexport function setup(params) {\n  const F = 16 * NMAX + 64;\n  params.s = {\n    n: 0, hue: 0, speed: 2, heat: 0.06, turn: 0, acc: 0, warm: false,\n    X: new Float64Array(3 * NMAX), F: new Float64Array(3 * NMAX), M: new Float64Array(3 * NMAX), V: new Float64Array(3 * NMAX), U: new Float64Array(3 * NMAX),\n    fa: new Int32Array(F), fb: new Int32Array(F), fc: new Int32Array(F), fx: new Float64Array(F), fy: new Float64Array(F), fz: new Float64Array(F), fd: new Float64Array(F), vis: new Uint8Array(F),\n    E: new Int32Array(NMAX * NMAX), ta: new Int32Array(2 * NMAX), tb: new Int32Array(2 * NMAX), tc: new Int32Array(2 * NMAX), nt: 0,\n    deg: new Int32Array(NMAX), f5: new Float32Array(NMAX), f7: new Float32Array(NMAX),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0, 0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, NMIN, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.heat = cl(k[3], 0, 1);\n  const n = round(cl(k[2], NMIN, NMAX)), kick = 0.075 * S.heat;\n  if (!S.warm) {\n    S.n = n;\n    settle(S);\n    S.warm = true;\n  } else if (n !== S.n) resize(S, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    scatter(S.X, 0, S.n);\n    S.M.fill(0);\n    S.V.set(S.X.subarray(0, 3 * S.n));\n    S.U.set(S.X.subarray(0, 3 * S.n));\n    hull(S);\n  }\n  // 30 steps a second for each unit of Speed, at most six a frame.\n  S.acc += d * S.speed * 30;\n  let steps = min(6, floor(S.acc));\n  S.acc -= floor(S.acc);\n  for (; steps > 0; steps--) {\n    relax(S, kick, 0.5);\n    smooth(S, 0.15);\n  }\n  maintain(S);\n  degrees(S);\n  const ease = 1 - exp(-d / 0.08);\n  for (let i = 0; i \u003c S.n; i++) {\n    S.f5[i] += ease * ((S.deg[i] \u003c 6 ? 1 : 0) - S.f5[i]);\n    S.f7[i] += ease * ((S.deg[i] > 6 ? 1 : 0) - S.f7[i]);\n  }\n  S.turn += d * S.speed * 0.1;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { U, R, G, B, c, f5, f7 } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The sphere turns about an axis leaning 20 degrees toward the viewer.\n  const ct = cos(S.turn), st = sin(S.turn), cx = cos(0.35), sx = sin(0.35);\n  const h = S.hue + 0.55;\n  // Each charge is one soft gaussian glow. Its colour runs from nearly white\n  // at the centre to the full hue at the rim: hsv(hue, s, 1) is white less s\n  // times (1 - the pure hue), and s falls with the square of the glow.\n  const T = TYPES.map(([dh, sr, sc, lv]) => {\n    const q = [0, 0, 0];\n    hsv(h + dh, 1, 1, q);\n    return [1 - q[0], 1 - q[1], 1 - q[2], sr, sr - sc, lv];\n  });\n  const sp = spacing(n) * RS, sig = min(SIG, 0.2 * sp);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = U[3 * i], y0 = U[3 * i + 1], z0 = U[3 * i + 2];\n    const x1 = ct * x0 + st * z0, z1 = -st * x0 + ct * z0;\n    const y = cx * y0 - sx * z1, z = sx * y0 + cx * z1, x = x1;\n    if (z \u003c -0.02) continue;\n    const t = cl((z + 0.02) / 0.37, 0, 1), w = t * t * (3 - 2 * t);\n    const a5 = f5[i], a7 = f7[i], a6 = 1 - a5 - a7;\n    for (let j = 0; j \u003c 6; j++) c[j] = T[0][j] * a6 + T[1][j] * a5 + T[2][j] * a7;\n    const L = c[5] * w * (0.55 + 0.45 * z), s = sig * (1 + 0.25 * (a5 + a7));\n    // Foreshortened toward the rim: narrower across the radius.\n    const px = CX + RS * x, py = CY - RS * y, rr = sqrt(x * x + y * y) || 1, rx = x / rr, ry = -y / rr;\n    const sr = s * (0.45 + 0.55 * z), ir = 1 / (2 * sr * sr), it = 1 / (2 * s * s), ext = 3 * s;\n    for (let yy = max(0, floor(py - ext)); yy \u003c= min(H - 1, py + ext); yy++)\n      for (let xx = max(0, floor(px - ext)); xx \u003c= min(W - 1, px + ext); xx++) {\n        const dx = xx - px, dy = yy - py, dr = dx * rx + dy * ry, dq = -dx * ry + dy * rx;\n        const g = exp(-dr * dr * ir - dq * dq * it), v = L * g, sat = v * (c[3] - c[4] * g * g * g), p = yy * W + xx;\n        R[p] += v - sat * c[0];\n        G[p] += v - sat * c[1];\n        B[p] += v - sat * c[2];\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds."},{"name":"Charges","min":100,"max":480,"about":"100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them."},{"name":"Heat","min":0,"max":1,"about":"A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander."}],"start":[0,2,100,0.06],"measures":{"motion":0.1033,"detail":0.027,"edges":0.1646,"complexity":0.9152,"coverage":0.2589,"colour":0.1371,"drift":0.0297},"knobResponse":[0.0593,0.055,0.0527,0.0511]},{"slug":"three-gaps","title":"Three Gaps","family":"number","round":30,"note":"원 위에 α 씩 돌아가며 점을 찍으면 이웃 간격은 많아야 세 가지예요. 줄마다 점을 하나씩 더해 간격을 길이 등급으로 칠하고, α 가 분수에 닿으면 아래쪽이 줄무늬로 무너져요.","idea":"Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.","buttons":"K1 tap sends a straight to the stop at the end of the leg it is on.","code":"// ===== Patternflow pattern =====\n// Title:   Three Gaps\n// Family:  number\n// Idea:    Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: three-gap theorem (conjectured by Hugo Steinhaus, proved by Vera T. Sós, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair.\n// Knob 2: Speed. How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s.\n// Knob 3: Alpha. Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns.\n// Knob 4: Points. How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples.\n// Buttons: K1 tap sends a straight to the stop at the end of the leg it is on.\n\nconst W = 64, H = 128, SS = 4, NMAX = 160, Q = 21;\nconst { min, max, floor, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\nconst GOLD = (Math.sqrt(5) - 1) / 2, BRONZE = (Math.sqrt(13) - 3) / 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The two fractions with denominator at most 21 that hold a0 between them,\n// found by walking down the Stern-Brocot tree: 8/13 and 13/21 for 1/phi.\nfunction bracket(a0) {\n  let a = 0, b = 1, c = 1, d = 1;\n  for (;;) {\n    const p = a + c, q = b + d;\n    if (q > Q) break;\n    if (a0 \u003c p / q) (c = p), (d = q);\n    else (a = p), (b = q);\n  }\n  return [a / b, c / d];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, k3: -1, a0: GOLD, ends: [GOLD, GOLD], u: 0, nmax: 36, alpha: GOLD,\n    pos: new Float64Array(NMAX + 1), idx: new Int32Array(NMAX + 1), sep: new Float32Array(W),\n    row: new Float32Array(W * 3), lut: new Float32Array(3 * 64), lutHue: NaN,\n  };\n}\n\nconst stop = (P, i) => (i & 1 ? P.ends[i >> 1] : P.a0);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nmax = floor(30 + 100 * cl(k[3], 0, 1));\n  const k3 = cl(k[2], 0, 1);\n  if (k3 !== P.k3) {\n    P.k3 = k3;\n    P.a0 = GOLD + (BRONZE - GOLD) * k3;\n    // The nearer fraction first. On a fraction exactly, points would land on\n    // each other and floating point would shuffle their order; 3e-7 off it,\n    // on a0's side, they stay in order and the picture is the same.\n    const [lo, hi] = bracket(P.a0);\n    P.ends = P.a0 - lo \u003c hi - P.a0 ? [lo + 3e-7, hi - 3e-7] : [hi - 3e-7, lo + 3e-7];\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.u = floor(P.u) + 1;\n  // a goes a0, first fraction, a0, second fraction, a0, easing in and out of\n  // each stop; a longer leg takes longer, so the bottom row never runs away.\n  const s = floor(P.u) & 3, from = stop(P, s), to = stop(P, (s + 1) & 3);\n  P.u += (d * P.speed * 0.15) / (0.4 + abs(to - from) / 0.004);\n  const s2 = floor(P.u) & 3, A = stop(P, s2), B = stop(P, (s2 + 1) & 3);\n  P.alpha = A + (B - A) * ease(P.u - floor(P.u));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pos, idx, sep, row, lut } = P, a = P.alpha, nmax = P.nmax;\n  if (P.lutHue !== P.hue) {\n    // Colour by the rank of the length: yellow the longest, cyan the middle,\n    // magenta the shortest, and mixes for ranks in between. Mixed as light,\n    // not round the wheel, which would put a dark blue between cyan and\n    // magenta, then brought back to saturation 0.7 so a mix is not grey.\n    const c3 = new Float32Array(9);\n    for (let c = 0; c \u003c 3; c++) hsv(P.hue + 0.15 + c * 0.36, 0.88, 1, c3, c * 3);\n    for (let i = 0; i \u003c 64; i++) {\n      const r = (i / 63) * 2, j = min(1, floor(r)), f = r - j, o = i * 3;\n      for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = c3[j * 3 + ch] * (1 - f) + c3[j * 3 + 3 + ch] * f;\n      const mx = max(lut[o], lut[o + 1], lut[o + 2]), sat = 1 - min(lut[o], lut[o + 1], lut[o + 2]) / mx;\n      if (sat \u003c 0.7) for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = mx - ((mx - lut[o + ch]) * 0.7) / max(sat, 1e-3);\n    }\n    P.lutHue = P.hue;\n  }\n  const dv = [0, 0, 0, 0], dl = [0, 0, 0, 0], rank = [0, 0, 0, 0];\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) {\n    // Row y holds n points, n growing down the panel. New points go into the\n    // sorted list one at a time, so a frame sorts nothing twice.\n    const want = 1 + floor((y * nmax) / H);\n    let tick = -1;\n    while (n \u003c want) {\n      const p = n * a - floor(n * a);\n      let lo = 0, hi = n;\n      while (lo \u003c hi) {\n        const m = (lo + hi) >> 1;\n        if (pos[m] \u003c p) lo = m + 1;\n        else hi = m;\n      }\n      for (let j = n; j > lo; j--) (pos[j] = pos[j - 1]), (idx[j] = idx[j - 1]);\n      pos[lo] = p;\n      idx[lo] = n;\n      tick = floor(p * W);\n      n++;\n    }\n    pos[n] = 1;\n    idx[n] = 0;\n    // The gap from point i to point j is frac((j - i) a) long, so the index\n    // difference names the length, and the theorem says there are at most\n    // three. The newest point always lands in a longest gap and cuts it into\n    // one gap of each of the two shorter lengths already on the circle, which\n    // is why the longest is the sum of the other two. When the last longest\n    // gap is cut, the middle length is the longest and the cutting goes on.\n    let nc = 0;\n    for (let i = 0; i \u003c n; i++) {\n      const dd = idx[i + 1] - idx[i];\n      let c = 0;\n      while (c \u003c nc && dv[c] !== dd) c++;\n      if (c === nc && nc \u003c 4) (dv[nc] = dd), (dl[nc] = pos[i + 1] - pos[i]), nc++;\n    }\n    // Rank: how many lengths are longer, counting a length within 15% as\n    // half. Near a fraction p/q the shortest shrinks towards nothing and the\n    // other two meet, so their gaps go one colour as the three become two.\n    for (let c = 0; c \u003c nc; c++) {\n      let r = 0;\n      for (let e = 0; e \u003c nc; e++) if (e !== c) r += cl(0.5 + (dl[e] - dl[c]) / (0.3 * max(dl[e], dl[c])), 0, 1);\n      rank[c] = min(2, r);\n    }\n    // Points closer than a third of an LED count as one. A lone one between\n    // two gaps wider than an LED draws a dark line, darker the wider they are.\n    sep.fill(0);\n    let first = 0;\n    while (first \u003c n - 1 && (pos[first + 1] - pos[first]) * W \u003c 0.34) first++;\n    for (let i = 0, prev = -1; i \u003c n; i++) {\n      const gr = (pos[i + 1] - pos[i]) * W;\n      if (gr \u003c 0.34 && i \u003c n - 1) continue;\n      const gl = prev \u003c 0 ? (pos[first] + 1 - pos[n - 1]) * W : (pos[i] - pos[prev]) * W;\n      const x = floor(pos[i] * W);\n      sep[x] = max(sep[x], cl((min(gl, gr) - 1.1) / 2.4, 0, 1));\n      prev = i;\n    }\n    // Four samples to an LED. Brightness follows the gap's length times n,\n    // which runs about 0.4 to 1.9 at 1/phi: a gap brightens down the panel\n    // until a point cuts it.\n    row.fill(0);\n    let g = 0;\n    for (let x = 0; x \u003c W; x++)\n      for (let s = 0; s \u003c SS; s++) {\n        const u = (x + (s + 0.5) / SS) / W;\n        while (pos[g + 1] \u003c= u) g++;\n        const dd = idx[g + 1] - idx[g];\n        let c = 0;\n        while (c \u003c nc - 1 && dv[c] !== dd) c++;\n        const v = 0.6 + 0.4 * cl((n * (pos[g + 1] - pos[g]) - 0.4) / 1.3, 0, 1), q = floor(rank[c] * 31.5) * 3;\n        row[x * 3] += lut[q] * v;\n        row[x * 3 + 1] += lut[q + 1] * v;\n        row[x * 3 + 2] += lut[q + 2] * v;\n      }\n    // The newest point, white on the row where it arrives: they fall on a\n    // lattice, and each heads the dark line its point draws below.\n    for (let x = 0; x \u003c W; x++) {\n      const f = (255 / SS) * (1 - 0.85 * sep[x]);\n      if (x === tick) display.setPixel(x, y, 255, 255, 255);\n      else display.setPixel(x, y, row[x * 3] * f, row[x * 3 + 1] * f, row[x * 3 + 2] * f);\n    }\n  }\n}\n","layer":{"id":"layer-three-gaps","type":"code","name":"three-gaps","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Three Gaps\n// Family:  number\n// Idea:    Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: three-gap theorem (conjectured by Hugo Steinhaus, proved by Vera T. Sós, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair.\n// Knob 2: Speed. How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s.\n// Knob 3: Alpha. Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns.\n// Knob 4: Points. How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples.\n// Buttons: K1 tap sends a straight to the stop at the end of the leg it is on.\n\nconst W = 64, H = 128, SS = 4, NMAX = 160, Q = 21;\nconst { min, max, floor, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\nconst GOLD = (Math.sqrt(5) - 1) / 2, BRONZE = (Math.sqrt(13) - 3) / 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The two fractions with denominator at most 21 that hold a0 between them,\n// found by walking down the Stern-Brocot tree: 8/13 and 13/21 for 1/phi.\nfunction bracket(a0) {\n  let a = 0, b = 1, c = 1, d = 1;\n  for (;;) {\n    const p = a + c, q = b + d;\n    if (q > Q) break;\n    if (a0 \u003c p / q) (c = p), (d = q);\n    else (a = p), (b = q);\n  }\n  return [a / b, c / d];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, k3: -1, a0: GOLD, ends: [GOLD, GOLD], u: 0, nmax: 36, alpha: GOLD,\n    pos: new Float64Array(NMAX + 1), idx: new Int32Array(NMAX + 1), sep: new Float32Array(W),\n    row: new Float32Array(W * 3), lut: new Float32Array(3 * 64), lutHue: NaN,\n  };\n}\n\nconst stop = (P, i) => (i & 1 ? P.ends[i >> 1] : P.a0);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nmax = floor(30 + 100 * cl(k[3], 0, 1));\n  const k3 = cl(k[2], 0, 1);\n  if (k3 !== P.k3) {\n    P.k3 = k3;\n    P.a0 = GOLD + (BRONZE - GOLD) * k3;\n    // The nearer fraction first. On a fraction exactly, points would land on\n    // each other and floating point would shuffle their order; 3e-7 off it,\n    // on a0's side, they stay in order and the picture is the same.\n    const [lo, hi] = bracket(P.a0);\n    P.ends = P.a0 - lo \u003c hi - P.a0 ? [lo + 3e-7, hi - 3e-7] : [hi - 3e-7, lo + 3e-7];\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.u = floor(P.u) + 1;\n  // a goes a0, first fraction, a0, second fraction, a0, easing in and out of\n  // each stop; a longer leg takes longer, so the bottom row never runs away.\n  const s = floor(P.u) & 3, from = stop(P, s), to = stop(P, (s + 1) & 3);\n  P.u += (d * P.speed * 0.15) / (0.4 + abs(to - from) / 0.004);\n  const s2 = floor(P.u) & 3, A = stop(P, s2), B = stop(P, (s2 + 1) & 3);\n  P.alpha = A + (B - A) * ease(P.u - floor(P.u));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pos, idx, sep, row, lut } = P, a = P.alpha, nmax = P.nmax;\n  if (P.lutHue !== P.hue) {\n    // Colour by the rank of the length: yellow the longest, cyan the middle,\n    // magenta the shortest, and mixes for ranks in between. Mixed as light,\n    // not round the wheel, which would put a dark blue between cyan and\n    // magenta, then brought back to saturation 0.7 so a mix is not grey.\n    const c3 = new Float32Array(9);\n    for (let c = 0; c \u003c 3; c++) hsv(P.hue + 0.15 + c * 0.36, 0.88, 1, c3, c * 3);\n    for (let i = 0; i \u003c 64; i++) {\n      const r = (i / 63) * 2, j = min(1, floor(r)), f = r - j, o = i * 3;\n      for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = c3[j * 3 + ch] * (1 - f) + c3[j * 3 + 3 + ch] * f;\n      const mx = max(lut[o], lut[o + 1], lut[o + 2]), sat = 1 - min(lut[o], lut[o + 1], lut[o + 2]) / mx;\n      if (sat \u003c 0.7) for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = mx - ((mx - lut[o + ch]) * 0.7) / max(sat, 1e-3);\n    }\n    P.lutHue = P.hue;\n  }\n  const dv = [0, 0, 0, 0], dl = [0, 0, 0, 0], rank = [0, 0, 0, 0];\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) {\n    // Row y holds n points, n growing down the panel. New points go into the\n    // sorted list one at a time, so a frame sorts nothing twice.\n    const want = 1 + floor((y * nmax) / H);\n    let tick = -1;\n    while (n \u003c want) {\n      const p = n * a - floor(n * a);\n      let lo = 0, hi = n;\n      while (lo \u003c hi) {\n        const m = (lo + hi) >> 1;\n        if (pos[m] \u003c p) lo = m + 1;\n        else hi = m;\n      }\n      for (let j = n; j > lo; j--) (pos[j] = pos[j - 1]), (idx[j] = idx[j - 1]);\n      pos[lo] = p;\n      idx[lo] = n;\n      tick = floor(p * W);\n      n++;\n    }\n    pos[n] = 1;\n    idx[n] = 0;\n    // The gap from point i to point j is frac((j - i) a) long, so the index\n    // difference names the length, and the theorem says there are at most\n    // three. The newest point always lands in a longest gap and cuts it into\n    // one gap of each of the two shorter lengths already on the circle, which\n    // is why the longest is the sum of the other two. When the last longest\n    // gap is cut, the middle length is the longest and the cutting goes on.\n    let nc = 0;\n    for (let i = 0; i \u003c n; i++) {\n      const dd = idx[i + 1] - idx[i];\n      let c = 0;\n      while (c \u003c nc && dv[c] !== dd) c++;\n      if (c === nc && nc \u003c 4) (dv[nc] = dd), (dl[nc] = pos[i + 1] - pos[i]), nc++;\n    }\n    // Rank: how many lengths are longer, counting a length within 15% as\n    // half. Near a fraction p/q the shortest shrinks towards nothing and the\n    // other two meet, so their gaps go one colour as the three become two.\n    for (let c = 0; c \u003c nc; c++) {\n      let r = 0;\n      for (let e = 0; e \u003c nc; e++) if (e !== c) r += cl(0.5 + (dl[e] - dl[c]) / (0.3 * max(dl[e], dl[c])), 0, 1);\n      rank[c] = min(2, r);\n    }\n    // Points closer than a third of an LED count as one. A lone one between\n    // two gaps wider than an LED draws a dark line, darker the wider they are.\n    sep.fill(0);\n    let first = 0;\n    while (first \u003c n - 1 && (pos[first + 1] - pos[first]) * W \u003c 0.34) first++;\n    for (let i = 0, prev = -1; i \u003c n; i++) {\n      const gr = (pos[i + 1] - pos[i]) * W;\n      if (gr \u003c 0.34 && i \u003c n - 1) continue;\n      const gl = prev \u003c 0 ? (pos[first] + 1 - pos[n - 1]) * W : (pos[i] - pos[prev]) * W;\n      const x = floor(pos[i] * W);\n      sep[x] = max(sep[x], cl((min(gl, gr) - 1.1) / 2.4, 0, 1));\n      prev = i;\n    }\n    // Four samples to an LED. Brightness follows the gap's length times n,\n    // which runs about 0.4 to 1.9 at 1/phi: a gap brightens down the panel\n    // until a point cuts it.\n    row.fill(0);\n    let g = 0;\n    for (let x = 0; x \u003c W; x++)\n      for (let s = 0; s \u003c SS; s++) {\n        const u = (x + (s + 0.5) / SS) / W;\n        while (pos[g + 1] \u003c= u) g++;\n        const dd = idx[g + 1] - idx[g];\n        let c = 0;\n        while (c \u003c nc - 1 && dv[c] !== dd) c++;\n        const v = 0.6 + 0.4 * cl((n * (pos[g + 1] - pos[g]) - 0.4) / 1.3, 0, 1), q = floor(rank[c] * 31.5) * 3;\n        row[x * 3] += lut[q] * v;\n        row[x * 3 + 1] += lut[q + 1] * v;\n        row[x * 3 + 2] += lut[q + 2] * v;\n      }\n    // The newest point, white on the row where it arrives: they fall on a\n    // lattice, and each heads the dark line its point draws below.\n    for (let x = 0; x \u003c W; x++) {\n      const f = (255 / SS) * (1 - 0.85 * sep[x]);\n      if (x === tick) display.setPixel(x, y, 255, 255, 255);\n      else display.setPixel(x, y, row[x * 3] * f, row[x * 3 + 1] * f, row[x * 3 + 2] * f);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair."},{"name":"Speed","min":0.2,"max":3,"about":"How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s."},{"name":"Alpha","min":0,"max":1,"about":"Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns."},{"name":"Points","min":0,"max":1,"about":"How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples."}],"start":[0,2,0,0.06],"measures":{"motion":0.1477,"detail":0.1059,"edges":0.725,"complexity":0.2583,"coverage":0.9968,"colour":0.6429,"drift":0.149},"knobResponse":[0.4559,0.1669,0.3074,0.2544]},{"slug":"toner-pad","title":"Toner Pad","family":"cosmetic","round":35,"note":"섬유 400가닥이 아무렇게나 엇갈린 흰 솜 패드에 장밋빛 토너가 3.2초마다 한 방울씩 떨어져요. 젖는 앞은 잘 빨아올리는 섬유를 따라 손가락처럼 먼저 뻗고, 젖은 곳은 반투명해져 뒤의 빛을 토너 색으로 받으며 그 안의 섬유가 어둡게 드러나요. 패치는 가장자리부터 말라 흰 솜으로 돌아가요. K3 은 한 방울이 적시는 넓이를 1800 LED 에서 5400 LED 로 늘리고, K1 을 누르면 아직 젖은 곳을 피해 한 방울이 바로 떨어져요.","idea":"A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.","buttons":"K1 tap lets a drop fall at once, away from the patches still wet.","code":"// ===== Patternflow pattern =====\n// Title:   Toner Pad\n// Family:  cosmetic\n// Idea:    A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cotton pad soaking up toner\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1\n//\n// Knob 1: Hue. The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive.\n// Knob 2: Speed. How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower.\n// Knob 3: Toner. How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65.\n// Knob 4: Fibre. How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges.\n// Buttons: K1 tap lets a drop fall at once, away from the patches still wet.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n// Drops on the pad at once: a fifth, from quick taps, takes the place of the oldest.\nconst MAXD = 4;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    F: F(N), F2: F(N), tmp: F(N), CE: F(N), CS: F(N), CSE: F(N), CSW: F(N), J: F(N),\n    drops: [], pool: [F(N), F(N), F(N), F(N), F(N)],\n    // The heap's keys are 32-bit like the reach they are checked against, so a\n    // key is never read as stale because it was rounded on the way in.\n    hk: F(8 * N + 16), hv: new Int32Array(8 * N + 16),\n    T: 0, next: 0, hue: 0, speed: 2, toner: 0, fibre: 0.06, webKey: NaN, started: false, col: F(12), key: NaN,\n  };\n}\n\n// The web: fibres laid at random, each a slightly wavy strand, drawn soft\n// into F (how much fibre each LED sees) and marked on the links between\n// neighbouring LEDs it runs through, which is where the toner wicks fastest.\nfunction web(S) {\n  const g = S.fibre, Fd = S.F, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW;\n  Fd.fill(0);\n  CE.fill(0);\n  CS.fill(0);\n  CSE.fill(0);\n  CSW.fill(0);\n  for (let i = 0; i \u003c N; i++) S.J[i] = 0.9 + 0.2 * rnd();\n  const count = floor(420 - 300 * g), wid = 0.6 + 1.4 * g;\n  for (let f = 0; f \u003c count; f++) {\n    let x = -20 + rnd() * (W + 40), y = -20 + rnd() * (H + 40), th = rnd() * PI * 2, bend = 0;\n    const len = 40 + 50 * rnd(), b = 0.45 + 0.55 * rnd();\n    // Most strands carry the toner a little faster than the gaps; a few\n    // carry it about six times as fast, and the front runs out along them.\n    const u = rnd(), wick = 0.12 + 1.1 * u * u * u * u;\n    let px = -1, py = -1;\n    for (let t = 0; t \u003c len; t += 0.6) {\n      bend += (rnd() - 0.5) * 0.05;\n      bend *= 0.95;\n      th += bend * 0.5;\n      x += 0.6 * cos(th);\n      y += 0.6 * sin(th);\n      if (x \u003c 0 || y \u003c 0 || x >= W - 1 || y >= H - 1) {\n        px = -1;\n        continue;\n      }\n      // Soft splat of the strand.\n      const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix, w = 0.32 * b * wid;\n      Fd[o] += w * (1 - fx) * (1 - fy);\n      Fd[o + 1] += w * fx * (1 - fy);\n      Fd[o + W] += w * (1 - fx) * fy;\n      Fd[o + W + 1] += w * fx * fy;\n      // The link it crossed.\n      const cx = floor(x + 0.5), cy = floor(y + 0.5);\n      if (px >= 0 && (cx !== px || cy !== py)) {\n        const dx = cx - px, dy = cy - py, a = Math.min(cy, py) * W, k = wick;\n        if (abs(dx) \u003c= 1 && abs(dy) \u003c= 1) {\n          if (dy === 0) CE[cy * W + min(cx, px)] += k;\n          else if (dx === 0) CS[a + cx] += k;\n          else if (dx === dy) CSE[a + min(cx, px)] += k;\n          else CSW[a + max(cx, px)] += k;\n        }\n      }\n      px = cx;\n      py = cy;\n    }\n  }\n  for (let i = 0; i \u003c N; i++) Fd[i] = 1 - exp(-Fd[i] * 1.6);\n  // Deeper in the pad the fibres are out of focus: a second web, laid the\n  // same way and blurred over five LEDs, gives the white its soft depth.\n  const F2 = S.F2, tmp = S.tmp;\n  F2.fill(0);\n  for (let f = 0; f \u003c 260; f++) {\n    let x = rnd() * W, y = rnd() * H, th = rnd() * PI * 2;\n    for (let t = 0; t \u003c 50; t += 1) {\n      th += (rnd() - 0.5) * 0.08;\n      x += cos(th);\n      y += sin(th);\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) F2[floor(y) * W + floor(x)] += 0.5;\n    }\n  }\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += F2[y * W + cl(x + k, 0, W - 1)];\n        tmp[i] = a / 5;\n      }\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += tmp[cl(y + k, 0, H - 1) * W + x];\n        F2[i] = a / 5;\n      }\n  }\n  for (let i = 0; i \u003c N; i++) F2[i] = 1 - exp(-F2[i] * 3);\n}\n\n// How far the toner has to wick to reach each LED from a drop at (x0, y0):\n// the cheapest path, where crossing a link costs its length divided by how\n// well fibres carry along it. A front at a given reach has run furthest\n// along the fibres, so it is fingered and follows them.\nfunction reach(S, d, x0, y0) {\n  const hk = S.hk, hv = S.hv, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW, J = S.J, LIM = 45;\n  d.fill(1e9);\n  let n = 0;\n  const push = (k, v) => {\n    let i = n++;\n    while (i > 0) {\n      const p = (i - 1) >> 1;\n      if (hk[p] \u003c= k) break;\n      hk[i] = hk[p];\n      hv[i] = hv[p];\n      i = p;\n    }\n    hk[i] = k;\n    hv[i] = v;\n  };\n  for (let y = max(0, floor(y0 - 3)); y \u003c= min(H - 1, floor(y0 + 3)); y++)\n    for (let x = max(0, floor(x0 - 3)); x \u003c= min(W - 1, floor(x0 + 3)); x++) {\n      const r = Math.hypot(x + 0.5 - x0, y + 0.5 - y0);\n      if (r \u003c 3) {\n        d[y * W + x] = r * 0.4;\n        push(r * 0.4, y * W + x);\n      }\n    }\n  const speed = (c) => 1 / (1 + 4.5 * c);\n  while (n > 0) {\n    const k = hk[0], v = hv[0];\n    // Pop.\n    n--;\n    const lk = hk[n], lv = hv[n];\n    let i = 0;\n    while (true) {\n      let c = 2 * i + 1;\n      if (c >= n) break;\n      if (c + 1 \u003c n && hk[c + 1] \u003c hk[c]) c++;\n      if (hk[c] >= lk) break;\n      hk[i] = hk[c];\n      hv[i] = hv[c];\n      i = c;\n    }\n    hk[i] = lk;\n    hv[i] = lv;\n    if (k > d[v] || k > LIM) continue;\n    const x = v % W, y = (v - x) / W, j = J[v];\n    const rel = (u, cost) => {\n      const nk = k + cost * j;\n      if (nk \u003c d[u]) {\n        d[u] = nk;\n        push(nk, u);\n      }\n    };\n    if (x \u003c W - 1) rel(v + 1, speed(CE[v]));\n    if (x > 0) rel(v - 1, speed(CE[v - 1]));\n    if (y \u003c H - 1) {\n      rel(v + W, speed(CS[v]));\n      if (x \u003c W - 1) rel(v + W + 1, 1.414 * speed(CSE[v]));\n      if (x > 0) rel(v + W - 1, 1.414 * speed(CSW[v]));\n    }\n    if (y > 0) {\n      rel(v - W, speed(CS[v - W]));\n      if (x > 0) rel(v - W - 1, 1.414 * speed(CSE[v - W - 1]));\n      if (x \u003c W - 1) rel(v - W + 1, 1.414 * speed(CSW[v - W + 1]));\n    }\n  }\n  // Paths on a grid of LEDs come out in stair steps; two passes of a 3x3\n  // blur round the front off while keeping its fingers.\n  const tmp = S.tmp;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) tmp[i] = (xx > 0 ? d[i - 1] : d[i]) + d[i] + (xx \u003c W - 1 ? d[i + 1] : d[i]);\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) d[i] = ((yy > 0 ? tmp[i - W] : tmp[i]) + tmp[i] + (yy \u003c H - 1 ? tmp[i + W] : tmp[i])) / 9;\n  }\n}\n\nfunction drop(S, x, y, age) {\n  if (S.drops.length >= MAXD) S.pool.push(S.drops.shift().d);\n  const d = S.pool.pop();\n  reach(S, d, x, y);\n  S.drops.push({ d, x, y, t: age, R: spread(d, S.toner) });\n}\n\n// How far a drop's front runs: the reach at which the wet patch covers the\n// area its toner can fill, 1800 LEDs at Toner 0 and 5400 at 1, whatever the\n// web. Found by halving.\nfunction spread(d, toner) {\n  const A = 1800 + 3600 * toner;\n  let lo = 0, hi = 40;\n  for (let it = 0; it \u003c 18; it++) {\n    const R = (lo + hi) / 2;\n    let n = 0;\n    for (let i = 0; i \u003c N; i++) if (d[i] \u003c R) n++;\n    if (n \u003c A) lo = R;\n    else hi = R;\n  }\n  return (lo + hi) / 2;\n}\n\n// Somewhere new: of six tries, the one furthest from every patch still wet.\nfunction spot(S) {\n  let bx = 32, by = 64, best = -1;\n  for (let k = 0; k \u003c 6; k++) {\n    const x = 10 + rnd() * 44, y = 12 + rnd() * 104;\n    let dd = 1e9;\n    for (const e of S.drops) dd = min(dd, Math.hypot(x - e.x, (y - e.y) * 0.7));\n    if (dd > best) (best = dd), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// A drop's front: running out fast and slowing as the toner spreads thin,\n// holding, then drying back from the far edges towards where it fell.\nconst TS = 0.8, THOLD = 3.2, TDRY = 3.6;\nfunction front(e) {\n  const t = e.t;\n  if (t \u003c 0) return -9;\n  if (t \u003c THOLD) return e.R * sqrt(1 - exp(-t / TS));\n  const full = e.R * sqrt(1 - exp(-THOLD / TS));\n  return full * (1 - (t - THOLD) / TDRY);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.toner = cl(kv[2] || 0, 0, 1);\n  S.fibre = cl(kv[3], 0, 1);\n  const wk = Math.round(S.fibre * 25);\n  if (wk !== S.webKey) {\n    S.webKey = wk;\n    web(S);\n    for (const e of S.drops) {\n      reach(S, e.d, e.x, e.y);\n      e.R = spread(e.d, S.toner);\n    }\n  }\n  if (!S.started) {\n    S.started = true;\n    // Open on a patch drying in the lower half and a fresh drop about to land higher up.\n    drop(S, 22 + rnd() * 20, 88 + rnd() * 20, 4.2);\n    drop(S, 22 + rnd() * 20, 26 + rnd() * 24, -0.2);\n    S.next = 3.2;\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  for (const e of S.drops) e.t += st;\n  S.drops = S.drops.filter((e) => {\n    if (e.t \u003c THOLD + TDRY) return true;\n    S.pool.push(e.d);\n    return false;\n  });\n  S.next -= st;\n  if ((input.btnPressed && input.btnPressed[0]) || S.next \u003c= 0) {\n    const [x, y] = spot(S);\n    drop(S, x, y, 0);\n    S.next = 3.2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, Fd = S.F, F2 = S.F2, T = S.T;\n  const h = S.hue + 0.95, key = h;\n  if (S.key !== key) {\n    const hf = h - floor(h), wm = sm((hf + 0.03) / 0.06) * (1 - sm((hf - 0.24) / 0.06));\n    hsv(h, 0.03, 1, col, 0);\n    hsv(h, 0.55 - 0.2 * wm, 1, col, 3);\n    col[6] = wm;\n    S.key = key;\n  }\n  const wm = col[6];\n  const fr = S.drops.map(front);\n  // A drying patch also pales a little as it shrinks.\n  const mo = S.drops.map((e) => (e.t \u003c THOLD ? 1 : 1 - (0.4 * (e.t - THOLD)) / TDRY));\n  // A soft light behind the pad drifts slowly; wet cotton lets it through.\n  const gx = 32 + 20 * sin(T * 0.43), gy = 64 + 44 * sin(T * 0.29 + 1);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let wet = 0, deep = 0;\n      for (let k = 0; k \u003c S.drops.length; k++) {\n        const R = fr[k];\n        if (R \u003c= 0) continue;\n        const dd = S.drops[k].d[i], w = sm((R - dd) / 1.6 + 0.5) * mo[k];\n        if (w > wet) wet = w;\n        const dp = w * cl(1 - dd / (R + 2), 0, 1);\n        if (dp > deep) deep = dp;\n      }\n      const f = Fd[i], f2 = F2[i];\n      const gdx = x - gx, gdy = y - gy, glow = exp(-(gdx * gdx + gdy * gdy) / 900);\n      // Dry: matte white, the fibres a little brighter than the gaps.\n      const ld = 0.8 + 0.1 * f2 + 0.12 * f + 0.06 * glow;\n      // Wet: translucent and lit from behind in the toner's tint, deeper\n      // towards where the drop fell, and the fibres dark against it. A dark\n      // fibre in orange or gold would be a brown line, so the fibres go\n      // towards a cool grey, there more and only half as dark.\n      const lw = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2) * (1 - (0.58 - 0.3 * wm) * f), ti = 0.65 + 0.35 * deep;\n      let wr = (col[0] + (col[3] - col[0]) * ti) * lw, wg = (col[1] + (col[4] - col[1]) * ti) * lw, wb = (col[2] + (col[5] - col[2]) * ti) * lw;\n      const l0 = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2), ds = f * (0.25 + 0.55 * wm);\n      wr += (0.4 * l0 - wr) * ds;\n      wg += (0.43 * l0 - wg) * ds;\n      wb += (0.5 * l0 - wb) * ds;\n      let r = col[0] * ld + (wr - col[0] * ld) * wet, g = col[1] * ld + (wg - col[1] * ld) * wet, b = col[2] * ld + (wb - col[2] * ld) * wet;\n      // A drop that has just landed sits as a glossy bead for a moment before\n      // it soaks in: deeper tint under it and a highlight on its upper left.\n      for (const e of S.drops) {\n        if (e.t \u003c 0 || e.t > 0.6) continue;\n        const u = e.t / 0.6, rb = 3.2 * (1 - u * u), bx = x + 0.5 - e.x, by = y + 0.5 - e.y, q = (bx * bx + by * by) / (rb * rb + 0.01);\n        if (q >= 1.6) continue;\n        const cov = sm((1.3 - q) / 0.5), hx = bx / rb + 0.4, hy = by / rb + 0.4, hl = exp(-(hx * hx + hy * hy) * 5) * 0.6 * cov;\n        r = r * (1 - 0.25 * cov) + hl;\n        g = g * (1 - 0.25 * cov) + hl;\n        b = b * (1 - 0.25 * cov) + hl;\n      }\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","layer":{"id":"layer-toner-pad","type":"code","name":"toner-pad","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Toner Pad\n// Family:  cosmetic\n// Idea:    A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cotton pad soaking up toner\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1\n//\n// Knob 1: Hue. The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive.\n// Knob 2: Speed. How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower.\n// Knob 3: Toner. How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65.\n// Knob 4: Fibre. How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges.\n// Buttons: K1 tap lets a drop fall at once, away from the patches still wet.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n// Drops on the pad at once: a fifth, from quick taps, takes the place of the oldest.\nconst MAXD = 4;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    F: F(N), F2: F(N), tmp: F(N), CE: F(N), CS: F(N), CSE: F(N), CSW: F(N), J: F(N),\n    drops: [], pool: [F(N), F(N), F(N), F(N), F(N)],\n    // The heap's keys are 32-bit like the reach they are checked against, so a\n    // key is never read as stale because it was rounded on the way in.\n    hk: F(8 * N + 16), hv: new Int32Array(8 * N + 16),\n    T: 0, next: 0, hue: 0, speed: 2, toner: 0, fibre: 0.06, webKey: NaN, started: false, col: F(12), key: NaN,\n  };\n}\n\n// The web: fibres laid at random, each a slightly wavy strand, drawn soft\n// into F (how much fibre each LED sees) and marked on the links between\n// neighbouring LEDs it runs through, which is where the toner wicks fastest.\nfunction web(S) {\n  const g = S.fibre, Fd = S.F, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW;\n  Fd.fill(0);\n  CE.fill(0);\n  CS.fill(0);\n  CSE.fill(0);\n  CSW.fill(0);\n  for (let i = 0; i \u003c N; i++) S.J[i] = 0.9 + 0.2 * rnd();\n  const count = floor(420 - 300 * g), wid = 0.6 + 1.4 * g;\n  for (let f = 0; f \u003c count; f++) {\n    let x = -20 + rnd() * (W + 40), y = -20 + rnd() * (H + 40), th = rnd() * PI * 2, bend = 0;\n    const len = 40 + 50 * rnd(), b = 0.45 + 0.55 * rnd();\n    // Most strands carry the toner a little faster than the gaps; a few\n    // carry it about six times as fast, and the front runs out along them.\n    const u = rnd(), wick = 0.12 + 1.1 * u * u * u * u;\n    let px = -1, py = -1;\n    for (let t = 0; t \u003c len; t += 0.6) {\n      bend += (rnd() - 0.5) * 0.05;\n      bend *= 0.95;\n      th += bend * 0.5;\n      x += 0.6 * cos(th);\n      y += 0.6 * sin(th);\n      if (x \u003c 0 || y \u003c 0 || x >= W - 1 || y >= H - 1) {\n        px = -1;\n        continue;\n      }\n      // Soft splat of the strand.\n      const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix, w = 0.32 * b * wid;\n      Fd[o] += w * (1 - fx) * (1 - fy);\n      Fd[o + 1] += w * fx * (1 - fy);\n      Fd[o + W] += w * (1 - fx) * fy;\n      Fd[o + W + 1] += w * fx * fy;\n      // The link it crossed.\n      const cx = floor(x + 0.5), cy = floor(y + 0.5);\n      if (px >= 0 && (cx !== px || cy !== py)) {\n        const dx = cx - px, dy = cy - py, a = Math.min(cy, py) * W, k = wick;\n        if (abs(dx) \u003c= 1 && abs(dy) \u003c= 1) {\n          if (dy === 0) CE[cy * W + min(cx, px)] += k;\n          else if (dx === 0) CS[a + cx] += k;\n          else if (dx === dy) CSE[a + min(cx, px)] += k;\n          else CSW[a + max(cx, px)] += k;\n        }\n      }\n      px = cx;\n      py = cy;\n    }\n  }\n  for (let i = 0; i \u003c N; i++) Fd[i] = 1 - exp(-Fd[i] * 1.6);\n  // Deeper in the pad the fibres are out of focus: a second web, laid the\n  // same way and blurred over five LEDs, gives the white its soft depth.\n  const F2 = S.F2, tmp = S.tmp;\n  F2.fill(0);\n  for (let f = 0; f \u003c 260; f++) {\n    let x = rnd() * W, y = rnd() * H, th = rnd() * PI * 2;\n    for (let t = 0; t \u003c 50; t += 1) {\n      th += (rnd() - 0.5) * 0.08;\n      x += cos(th);\n      y += sin(th);\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) F2[floor(y) * W + floor(x)] += 0.5;\n    }\n  }\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += F2[y * W + cl(x + k, 0, W - 1)];\n        tmp[i] = a / 5;\n      }\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += tmp[cl(y + k, 0, H - 1) * W + x];\n        F2[i] = a / 5;\n      }\n  }\n  for (let i = 0; i \u003c N; i++) F2[i] = 1 - exp(-F2[i] * 3);\n}\n\n// How far the toner has to wick to reach each LED from a drop at (x0, y0):\n// the cheapest path, where crossing a link costs its length divided by how\n// well fibres carry along it. A front at a given reach has run furthest\n// along the fibres, so it is fingered and follows them.\nfunction reach(S, d, x0, y0) {\n  const hk = S.hk, hv = S.hv, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW, J = S.J, LIM = 45;\n  d.fill(1e9);\n  let n = 0;\n  const push = (k, v) => {\n    let i = n++;\n    while (i > 0) {\n      const p = (i - 1) >> 1;\n      if (hk[p] \u003c= k) break;\n      hk[i] = hk[p];\n      hv[i] = hv[p];\n      i = p;\n    }\n    hk[i] = k;\n    hv[i] = v;\n  };\n  for (let y = max(0, floor(y0 - 3)); y \u003c= min(H - 1, floor(y0 + 3)); y++)\n    for (let x = max(0, floor(x0 - 3)); x \u003c= min(W - 1, floor(x0 + 3)); x++) {\n      const r = Math.hypot(x + 0.5 - x0, y + 0.5 - y0);\n      if (r \u003c 3) {\n        d[y * W + x] = r * 0.4;\n        push(r * 0.4, y * W + x);\n      }\n    }\n  const speed = (c) => 1 / (1 + 4.5 * c);\n  while (n > 0) {\n    const k = hk[0], v = hv[0];\n    // Pop.\n    n--;\n    const lk = hk[n], lv = hv[n];\n    let i = 0;\n    while (true) {\n      let c = 2 * i + 1;\n      if (c >= n) break;\n      if (c + 1 \u003c n && hk[c + 1] \u003c hk[c]) c++;\n      if (hk[c] >= lk) break;\n      hk[i] = hk[c];\n      hv[i] = hv[c];\n      i = c;\n    }\n    hk[i] = lk;\n    hv[i] = lv;\n    if (k > d[v] || k > LIM) continue;\n    const x = v % W, y = (v - x) / W, j = J[v];\n    const rel = (u, cost) => {\n      const nk = k + cost * j;\n      if (nk \u003c d[u]) {\n        d[u] = nk;\n        push(nk, u);\n      }\n    };\n    if (x \u003c W - 1) rel(v + 1, speed(CE[v]));\n    if (x > 0) rel(v - 1, speed(CE[v - 1]));\n    if (y \u003c H - 1) {\n      rel(v + W, speed(CS[v]));\n      if (x \u003c W - 1) rel(v + W + 1, 1.414 * speed(CSE[v]));\n      if (x > 0) rel(v + W - 1, 1.414 * speed(CSW[v]));\n    }\n    if (y > 0) {\n      rel(v - W, speed(CS[v - W]));\n      if (x > 0) rel(v - W - 1, 1.414 * speed(CSE[v - W - 1]));\n      if (x \u003c W - 1) rel(v - W + 1, 1.414 * speed(CSW[v - W + 1]));\n    }\n  }\n  // Paths on a grid of LEDs come out in stair steps; two passes of a 3x3\n  // blur round the front off while keeping its fingers.\n  const tmp = S.tmp;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) tmp[i] = (xx > 0 ? d[i - 1] : d[i]) + d[i] + (xx \u003c W - 1 ? d[i + 1] : d[i]);\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) d[i] = ((yy > 0 ? tmp[i - W] : tmp[i]) + tmp[i] + (yy \u003c H - 1 ? tmp[i + W] : tmp[i])) / 9;\n  }\n}\n\nfunction drop(S, x, y, age) {\n  if (S.drops.length >= MAXD) S.pool.push(S.drops.shift().d);\n  const d = S.pool.pop();\n  reach(S, d, x, y);\n  S.drops.push({ d, x, y, t: age, R: spread(d, S.toner) });\n}\n\n// How far a drop's front runs: the reach at which the wet patch covers the\n// area its toner can fill, 1800 LEDs at Toner 0 and 5400 at 1, whatever the\n// web. Found by halving.\nfunction spread(d, toner) {\n  const A = 1800 + 3600 * toner;\n  let lo = 0, hi = 40;\n  for (let it = 0; it \u003c 18; it++) {\n    const R = (lo + hi) / 2;\n    let n = 0;\n    for (let i = 0; i \u003c N; i++) if (d[i] \u003c R) n++;\n    if (n \u003c A) lo = R;\n    else hi = R;\n  }\n  return (lo + hi) / 2;\n}\n\n// Somewhere new: of six tries, the one furthest from every patch still wet.\nfunction spot(S) {\n  let bx = 32, by = 64, best = -1;\n  for (let k = 0; k \u003c 6; k++) {\n    const x = 10 + rnd() * 44, y = 12 + rnd() * 104;\n    let dd = 1e9;\n    for (const e of S.drops) dd = min(dd, Math.hypot(x - e.x, (y - e.y) * 0.7));\n    if (dd > best) (best = dd), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// A drop's front: running out fast and slowing as the toner spreads thin,\n// holding, then drying back from the far edges towards where it fell.\nconst TS = 0.8, THOLD = 3.2, TDRY = 3.6;\nfunction front(e) {\n  const t = e.t;\n  if (t \u003c 0) return -9;\n  if (t \u003c THOLD) return e.R * sqrt(1 - exp(-t / TS));\n  const full = e.R * sqrt(1 - exp(-THOLD / TS));\n  return full * (1 - (t - THOLD) / TDRY);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.toner = cl(kv[2] || 0, 0, 1);\n  S.fibre = cl(kv[3], 0, 1);\n  const wk = Math.round(S.fibre * 25);\n  if (wk !== S.webKey) {\n    S.webKey = wk;\n    web(S);\n    for (const e of S.drops) {\n      reach(S, e.d, e.x, e.y);\n      e.R = spread(e.d, S.toner);\n    }\n  }\n  if (!S.started) {\n    S.started = true;\n    // Open on a patch drying in the lower half and a fresh drop about to land higher up.\n    drop(S, 22 + rnd() * 20, 88 + rnd() * 20, 4.2);\n    drop(S, 22 + rnd() * 20, 26 + rnd() * 24, -0.2);\n    S.next = 3.2;\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  for (const e of S.drops) e.t += st;\n  S.drops = S.drops.filter((e) => {\n    if (e.t \u003c THOLD + TDRY) return true;\n    S.pool.push(e.d);\n    return false;\n  });\n  S.next -= st;\n  if ((input.btnPressed && input.btnPressed[0]) || S.next \u003c= 0) {\n    const [x, y] = spot(S);\n    drop(S, x, y, 0);\n    S.next = 3.2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, Fd = S.F, F2 = S.F2, T = S.T;\n  const h = S.hue + 0.95, key = h;\n  if (S.key !== key) {\n    const hf = h - floor(h), wm = sm((hf + 0.03) / 0.06) * (1 - sm((hf - 0.24) / 0.06));\n    hsv(h, 0.03, 1, col, 0);\n    hsv(h, 0.55 - 0.2 * wm, 1, col, 3);\n    col[6] = wm;\n    S.key = key;\n  }\n  const wm = col[6];\n  const fr = S.drops.map(front);\n  // A drying patch also pales a little as it shrinks.\n  const mo = S.drops.map((e) => (e.t \u003c THOLD ? 1 : 1 - (0.4 * (e.t - THOLD)) / TDRY));\n  // A soft light behind the pad drifts slowly; wet cotton lets it through.\n  const gx = 32 + 20 * sin(T * 0.43), gy = 64 + 44 * sin(T * 0.29 + 1);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let wet = 0, deep = 0;\n      for (let k = 0; k \u003c S.drops.length; k++) {\n        const R = fr[k];\n        if (R \u003c= 0) continue;\n        const dd = S.drops[k].d[i], w = sm((R - dd) / 1.6 + 0.5) * mo[k];\n        if (w > wet) wet = w;\n        const dp = w * cl(1 - dd / (R + 2), 0, 1);\n        if (dp > deep) deep = dp;\n      }\n      const f = Fd[i], f2 = F2[i];\n      const gdx = x - gx, gdy = y - gy, glow = exp(-(gdx * gdx + gdy * gdy) / 900);\n      // Dry: matte white, the fibres a little brighter than the gaps.\n      const ld = 0.8 + 0.1 * f2 + 0.12 * f + 0.06 * glow;\n      // Wet: translucent and lit from behind in the toner's tint, deeper\n      // towards where the drop fell, and the fibres dark against it. A dark\n      // fibre in orange or gold would be a brown line, so the fibres go\n      // towards a cool grey, there more and only half as dark.\n      const lw = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2) * (1 - (0.58 - 0.3 * wm) * f), ti = 0.65 + 0.35 * deep;\n      let wr = (col[0] + (col[3] - col[0]) * ti) * lw, wg = (col[1] + (col[4] - col[1]) * ti) * lw, wb = (col[2] + (col[5] - col[2]) * ti) * lw;\n      const l0 = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2), ds = f * (0.25 + 0.55 * wm);\n      wr += (0.4 * l0 - wr) * ds;\n      wg += (0.43 * l0 - wg) * ds;\n      wb += (0.5 * l0 - wb) * ds;\n      let r = col[0] * ld + (wr - col[0] * ld) * wet, g = col[1] * ld + (wg - col[1] * ld) * wet, b = col[2] * ld + (wb - col[2] * ld) * wet;\n      // A drop that has just landed sits as a glossy bead for a moment before\n      // it soaks in: deeper tint under it and a highlight on its upper left.\n      for (const e of S.drops) {\n        if (e.t \u003c 0 || e.t > 0.6) continue;\n        const u = e.t / 0.6, rb = 3.2 * (1 - u * u), bx = x + 0.5 - e.x, by = y + 0.5 - e.y, q = (bx * bx + by * by) / (rb * rb + 0.01);\n        if (q >= 1.6) continue;\n        const cov = sm((1.3 - q) / 0.5), hx = bx / rb + 0.4, hy = by / rb + 0.4, hl = exp(-(hx * hx + hy * hy) * 5) * 0.6 * cov;\n        r = r * (1 - 0.25 * cov) + hl;\n        g = g * (1 - 0.25 * cov) + hl;\n        b = b * (1 - 0.25 * cov) + hl;\n      }\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower."},{"name":"Toner","min":0,"max":1,"about":"How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65."},{"name":"Fibre","min":0,"max":1,"about":"How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges."}],"start":[0,2,0,0.06],"measures":{"motion":0.0391,"detail":0.0359,"edges":0.0818,"complexity":1.8818,"coverage":1,"colour":0.1257,"drift":0.1404},"knobResponse":[0.0571,0.1234,0.1866,0.1574]},{"slug":"tower-crane","title":"Tower Crane","family":"construction","round":24,"note":"해 질 녘 올라가는 콘크리트 건물 옆에 노란 타워크레인이 서서, 마당의 벽판과 철근 다발, 거푸집, 콘크리트 버킷을 차례로 꼭대기 층에 올려요. 붐이 원근 속에서 돌며 짧아졌다 길어지고, 버킷이 바닥을 부으면 건물이 한 층 자라 새 층 창에 불이 들어와요. K1 을 끝까지 돌리면 밤이 되어 투광등이 켜져요.","idea":"A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.","buttons":"K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.","code":"// ===== Patternflow pattern =====\n// Title:   Tower Crane\n// Family:  construction\n// Idea:    A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower cranes that stand beside a rising concrete frame\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1\n//\n// Knob 1: Dusk. From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit.\n// Knob 2: Speed. At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower.\n// Knob 3: Floors. How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof.\n// Knob 4: Wind. Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable.\n// Buttons: K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street level, one storey, and the most floors that fit under the jib.\nconst [GY, FH, NMAX] = [114, 6, 13];\n// The frame, x 3 to 39: six columns two LEDs wide, five bays, the one by the crane the lift core.\nconst [BX0, BX1, CORE] = [3, 39, 4];\n// Mast centre, the jib's bottom chord at the root, jib and counter-jib lengths, top of the tower head.\nconst [MX, JY, JL, CJL, APEX] = [46, 15, 42, 15, 3];\n// The hook's highest row, the radius it picks at over the yard, the yard's load line.\nconst [HTOP, PICK_R, PICK_Y] = [21, 11, 120];\n// Wall panel, rebar, formwork, bucket: width, height, the column it is set down on.\nconst LW = [8, 11, 9, 5], LH = [5, 2, 4, 6], DROP = [35, 20, 12, 6];\n// Sky top, middle, horizon; sun; lit and shaded cloud; light on things. Afternoon to night.\nconst KEYS = [\n  [34, 72, 156, 128, 142, 186, 255, 190, 112, 255, 236, 170, 255, 236, 204, 150, 130, 160, 1, 0.9, 0.74],\n  [30, 50, 130, 168, 108, 140, 255, 140, 62, 255, 168, 78, 255, 170, 116, 104, 70, 108, 0.86, 0.64, 0.48],\n  [16, 20, 70, 64, 44, 96, 196, 86, 78, 226, 90, 52, 176, 92, 104, 46, 36, 66, 0.44, 0.38, 0.46],\n  [4, 6, 22, 10, 14, 40, 44, 34, 60, 0, 0, 0, 42, 36, 56, 16, 16, 30, 0.2, 0.21, 0.3],\n];\nconst FLC = [1, 0.94, 0.82];\nconst YEL = [255, 196, 22];\n// The floodlight tower in the yard and where it is aimed.\nconst [LX, LY] = [60.5, 84.5];\nconst [AX, AY] = (([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)])([-34, 31]);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F(N * 3), bg: F(N * 3), lm: F(N * 3), fl: F(N), row: F(H * 3), cloud: F(128 * 64), sky: new Int16Array(W),\n    t: 0, rt: 0, nk: -1, stage: 3, cage: 1, form: 1, item: -1, lightNew: -1, th: PI, r: 40, load: 3, ph: \"I\", sw: 0, swv: 0, vx: 0, ptx: 6,\n    on: new Uint8Array(NMAX), onT: F(NMAX).fill(9), nsw: 2.4, cx: 0, sp: [], weld: 0.4, welding: 0, wk: [], mix: 2, cars: [], ncar: 1.4,\n  });\n  // Clouds: a strip of soft noise that wraps every 128 columns.\n  for (let i = 0; i \u003c 128 * 64; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.05, y * 0.13) + 0.3 * vn(X * 0.13, y * 0.3 + 9) + 0.15 * vn(X * 0.4, y * 0.6 + 3);\n    P.cloud[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  // The city behind: blocks of four to nine columns.\n  for (let x = 0, w = 0, h = 0; x \u003c W; x++, w--) w > 0 || ((w = 4 + floor(rnd() * 6)), (h = 98 + floor(rnd() * 12))), (P.sky[x] = h);\n  for (let k = 0; k \u003c NMAX; k++) (P.on[k] = rnd() \u003c 0.35 ? 1 : 0), k \u003c 3 && P.wk.push({ x: 8 + k * 11 + rnd() * 4, tx: 8 + rnd() * 28, wait: rnd() * 2 });\n}\n\n// A move of the crane: slew angle, trolley radius and hook row, eased to where they go.\nfunction go(P, ph, dur, to) {\n  Object.assign(P, { ph, pt: 0, pd: dur, f0: [P.th, P.r, P.hy], f1: [to.th ?? P.th, to.r ?? P.r, to.hy ?? P.hy] });\n}\n\nconst deckY = (P) => GY - P.n * FH;\nconst tip = (P) => [MX + P.r * cos(P.th), JY + 1 - P.r * sin(P.th) * 0.1];\nconst bucketHy = (P) => deckY(P) - FH - 2 - LH[3] - 3;\n\nfunction finishFloor(P) {\n  if (P.n \u003c NMAX) P.n++;\n  else P.top = 1;\n  // The floor that has just been glazed lights up a moment later.\n  Object.assign(P, { stage: 0, cage: 0, form: 0, item: -1, pourX: -1, nsw: min(P.nsw, 0.7), lightNew: P.n - 3 });\n}\n\n// Down to the yard, rig, hoist, slew over, lower, set down (or pour), up again.\nfunction step(P) {\n  const T = P.ph, type = P.load;\n  if (T === \"A\") go(P, \"B\", 0.5, {});\n  else if (T === \"B\") (P.load = P.top && P.stage > 2 ? (P.stage = 0) : P.stage), go(P, \"C\", 2.8, { hy: HTOP });\n  else if (T === \"C\") go(P, \"D\", 2.4, { th: P.th + PI, r: MX - DROP[type] });\n  else if (T === \"D\") go(P, \"E\", 1.5, { hy: type === 3 ? bucketHy(P) : deckY(P) - 4 - LH[type] });\n  else if (T === \"E\") {\n    if (type === 3) (P.pourX = BX0), go(P, \"P\", 3, { r: MX - BX1 + 2 });\n    else {\n      // Set down: the panel goes into the core, rebar and formwork lie on the deck.\n      const x = round(tip(P)[0]);\n      if (type) (P.item = type), (P.ix = x), type \u003c 2 ? (P.cage = 0) : (P.form = 0);\n      for (const w of P.wk) w.tx = x + (rnd() - 0.5) * 10;\n      (P.stage = max(P.stage, type + 1)), (P.load = -1), go(P, \"F\", 0.9, {});\n    }\n  } else if (T === \"P\" || T === \"I\") finishFloor(P), go(P, \"F\", 0.4, {});\n  else if (T === \"F\") go(P, \"G\", 0.5, { hy: P.hy - 12 });\n  else (P.load = -1), go(P, \"A\", 1.5, { th: (floor(P.th / TAU + 1e-3) + 1) * TAU, r: PICK_R, hy: PICK_Y - LH[P.stage] - 3 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nf = round(cl(k[2], 9, 13));\n  if (nf !== P.nk) {\n    // A new count of floors: the hook keeps its place over the deck.\n    const sh = (nf - P.n) * FH;\n    P.nk = P.n = nf;\n    P.top = 0;\n    if (P.ph === \"I\") (P.hy = bucketHy(P)), (P.pourX = BX0), go(P, \"I\", 3, { r: MX - BX1 + 2 });\n    else if (\"EPFG\".includes(P.ph)) (P.hy -= sh), (P.f0[2] -= sh), (P.f1[2] -= sh);\n  }\n  P.w = cl(k[3], -1, 1);\n  const t = (P.t += d), k0 = cl(k[0], 0, 1);\n  P.rt += rd;\n  // The evening deepens a little and comes back once every minute and a half.\n  P.h = k0 + (1 - k0) * 0.05 * (1 - cos((TAU * t) / 90));\n  // K1 tap: everything for the floor is in place at once and the deck pours.\n  if (input.btnPressed && input.btnPressed[0] && P.pourX \u003c 0 && !P.top) Object.assign(P, { pourBtn: 1, pourX: BX0, stage: 3, cage: 1, form: 1 });\n  const lin = min(1, (P.pt += d) / P.pd), u = sm(0, 1, lin), pour = P.ph === \"P\" || P.ph === \"I\";\n  P.th = mix(P.f0[0], P.f1[0], u);\n  P.r = mix(P.f0[1], P.f1[1], pour ? lin : u);\n  P.hy = mix(P.f0[2], P.f1[2], u);\n  if (pour) P.pourX = max(P.pourX, tip(P)[0] + 2);\n  if (lin >= 1) step(P);\n  if (P.pourBtn && (P.pourX += 30 * d) > BX1) (P.pourBtn = 0), finishFloor(P);\n  // The load swings on its cable when the trolley speeds up or slows, and in the wind.\n  const [tx, ty] = tip(P), L = max(4, P.hy - ty);\n  if (d > 0) {\n    const vx = (tx - P.ptx) / d, ax = cl((vx - P.vx) / d, -30, 30), eq = P.w * (0.06 + 0.04 * sin(t * 1.7)) * (P.load >= 0 ? 1 : 1.6);\n    P.swv += (-(110 / L) * (P.sw - eq) - (0.5 * ax) / L - 1.4 * P.swv) * d;\n    P.sw = cl(P.sw + P.swv * d, -0.3, 0.3);\n    [P.ptx, P.vx] = [tx, vx];\n  }\n  // The rigger steadies the load before it goes up.\n  if (P.ph === \"B\") (P.sw *= 1 - min(1, 5 * d)), (P.swv *= 1 - min(1, 5 * d));\n  P.swx = cl(L * sin(P.sw), -2.5, 2.5);\n  // The rebar is tied up the columns and the formwork goes round them.\n  if (P.stage > 1) P.cage = min(1, P.cage + d * 0.3);\n  if (P.stage > 2) P.form = min(1, P.form + d * 0.3);\n  // A floor switches its lights on or off together.\n  for (let i = 0; i \u003c NMAX; i++) P.onT[i] += rd;\n  if ((P.nsw -= d) \u003c= 0) {\n    const f = P.lightNew >= 0 ? P.lightNew : floor(rnd() * max(1, P.n - 2));\n    P.on[f] = P.lightNew >= 0 ? 1 : 1 - P.on[f];\n    Object.assign(P, { lightNew: -1, nsw: 1.6 + rnd() * 2 }).onT[f] = 0;\n  }\n  // Welding on the deck, and its sparks falling down the face.\n  if ((P.weld -= d) \u003c= 0) (P.welding = 1 - P.welding), (P.weld = P.welding ? 1.4 + rnd() * 1.6 : 0.4 + rnd() * 0.8);\n  const wy = deckY(P) - 2;\n  if (P.welding) for (let n = 0; n \u003c 4; n++) if (rnd() \u003c d * 18) P.sp.push([18 + rnd(), wy, (rnd() - 0.5) * 14, -4 - rnd() * 7, 1 + rnd() * 0.9, 18.5, wy]);\n  P.sp = P.sp.filter((s) => ((s[5] = s[0]), (s[6] = s[1]), (s[3] += 46 * d), (s[0] += s[2] * d), (s[1] += s[3] * d), (s[4] -= d) > 0 && s[1] \u003c GY));\n  // Workers walk about the deck.\n  for (const w of P.wk)\n    if (abs(w.tx - w.x) > 0.3) w.x = cl(w.x + cl(w.tx - w.x, -4 * d, 4 * d), 5, 37);\n    else if ((w.wait -= d) \u003c= 0) (w.tx = 6 + rnd() * 30), (w.wait = 1 + rnd() * 3);\n  // The mixer comes in for the bucket and backs out after the pour.\n  P.mix += cl((P.stage >= 2 && !P.top ? 2 : -26) - P.mix, -9 * d, 9 * d);\n  // Cars along the street.\n  if ((P.ncar -= d) \u003c= 0) (P.ncar = 2 + rnd() * 4), P.cars.push(rnd() \u003c 0.5 ? [-8, 11 + rnd() * 6, floor(rnd() * 4)] : [W + 1, -11 - rnd() * 6, floor(rnd() * 4)]);\n  P.cars = P.cars.filter((c) => ((c[0] += c[1] * d), c[0] > -12 && c[0] \u003c W + 12));\n  // Clouds drift with the wind.\n  P.cx += (1.5 + 9 * P.w) * d;\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\n// A surface: its own colour under the light that falls on that LED.\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\n// A lamp's glow round it, and a worker three LEDs tall.\nconst glow = (x, y, c, k) => {\n  for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (i || j) add(x + i, y + j, c, k / (i * i + j * j));\n};\nconst man = (x, y, head = [250, 250, 240]) => (sur(x, y, 50, 56, 90), sur(x, y - 1, 255, 130, 20), surc(x, y - 2, head));\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.2 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\n\n// Sky, sun and the city beyond, kept until the evening moves on.\nfunction sky(P, K) {\n  const h = P.h, B = P.bg;\n  if (round(h * 300) === P.bgKey) return F.set(B);\n  P.bgKey = round(h * 300);\n  const row = P.row, night = sm(0.4, 0.9, h), vis = 1 - sm(0.78, 0.95, h);\n  for (let y = 0; y \u003c H; y++) {\n    const f = min(1, y / GY), a = f \u003c 0.5 ? 0 : 3, u = f \u003c 0.5 ? f / 0.5 : (f - 0.5) / 0.5;\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(K[a + c], K[a + 3 + c], a ? u * u : sm(0, 1, u));\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    if (y >= P.sky[x]) {\n      const win = night * (hash(x, y * 3) \u003c 0.16 && y & 1 ? 1 : 0);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = mix(K[3 + c], K[6 + c], 0.55) * 0.6 * (x & 1 ? 1 : 0.86) + win * [210, 160, 90][c];\n      continue;\n    }\n    const d = Math.hypot(x - 54.5, y - 61.5 - 52 * h), g = vis * (0.55 * exp(-((d - 3.6) ** 2) / 50) + 0.3 * exp(-d / 16));\n    for (let c = 0; c \u003c 3; c++) B[o + c] = d \u003c 3.6 && vis > 0 ? mix(row[y * 3 + c], K[9 + c], vis) : row[y * 3 + c] + K[9 + c] * g * 0.7;\n  }\n  F.set(B);\n}\n\nfunction clouds(P, K) {\n  const cover = 0.56 - 0.18 * abs(P.w), C = P.cloud;\n  for (let y = 0; y \u003c 100; y++) {\n    const ty = floor(y * 0.6) & 63, fade = 1 - sm(50, 100, y);\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= P.sky[x]) continue;\n      const v = C[(ty \u003c\u003c 7) | (floor(x + P.cx) & 127)], a = cl((v - cover) * 7, 0, 1) * fade, lt = cl(1.25 - (v - cover) * 4 + (y - 40) / 120, 0, 1);\n      if (a > 0.01) put(x, y, [mix(K[15], K[12], lt), mix(K[16], K[13], lt), mix(K[17], K[14], lt)], a * 0.92);\n    }\n  }\n}\n\n// The light on every surface: the day, cloud shadows, the floodlights after dusk.\nfunction light(P, K) {\n  const sunA = 1 - sm(0.45, 0.85, P.h), fon = sm(0.3, 0.55, P.h), FLb = P.fl, C = P.cloud;\n  const cover = 0.5 - 0.18 * abs(P.w), [tx, ty] = tip(P), hx = tx + P.swx * 0.5;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, v = C[((floor(y * 0.25 + 20) & 63) \u003c\u003c 7) | (floor(x * 0.8 + P.cx * 2.2 + 40) & 127)];\n    let fl = 0;\n    if (fon > 0) {\n      const dx = x + 0.5 - LX, dy = y + 0.5 - LY, dd = Math.hypot(dx, dy) + 0.01, ca = (dx * AX + dy * AY) / dd;\n      fl = (exp((ca - 1) / 0.03) * 1.2) / (1 + (dd / 60) ** 2);\n      if (y > ty + 1) {\n        const q = (x + 0.5 - hx) / (1.2 + 0.16 * (y - ty));\n        fl += (exp(-q * q) * 0.7) / (1 + ((y - ty) / 90) ** 2);\n      }\n      fl *= fon;\n    }\n    FLb[i] = fl;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[18 + c] * (1 - 0.45 * sunA * cl((v - cover) * 5, 0, 1)) + fl * FLC[c];\n  }\n}\n\n// The yard's gravel, the kerb, the street and its markings.\nfunction ground() {\n  for (let i = GY * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, n = 0.82 + 0.3 * hash(x, y + 900);\n    y === 126 && (x + 6) % 8 \u003c 2 ? sur(x, y, 190, 180, 120) : y > 123 ? sur(x, y, 62 * n, 60 * n, 66 * n) : y > 122 ? sur(x, y, 150, 146, 140) : sur(x, y, 150 * n, 126 * n, 98 * n);\n  }\n}\n\n// The concrete frame, its windows, and the floor going up on the deck.\nfunction building(P) {\n  const n = P.n, dk = deckY(P), g = n - 2, night = sm(0.4, 0.9, P.h), row = P.row;\n  for (let y = dk; y \u003c GY; y++) {\n    const k = floor((GY - 1 - y) / FH), ry = y - (GY - (k + 1) * FH);\n    for (let x = BX0; x \u003c= BX1; x++) {\n      const cx = (x - BX0) % 7, b = floor((x - BX0) / 7), bx = cx - 2;\n      if (ry === 0) sur(x, y, 228, 220, 206);\n      else if (cx \u003c 2) sur(x, y, 206, 198, 184);\n      else if (ry === 1) k \u003c g ? sur(x, y, 78, 86, 102) : sur(x, y, 178, 172, 162);\n      else if (b === CORE) sur(x, y, 196, 190, 180, (x + y) % 9 === 0 ? 0.8 : 0.95);\n      else if (k \u003c g && bx === 2) sur(x, y, 80, 80, 88);\n      else if (k \u003c g) {\n        // Glass: the sky in it, or a lit room behind.\n        const o = (y * W + x) * 3, rr = cl(round(y * 0.3 + 4), 0, GY - 1) * 3;\n        let on = P.on[k] ? hash(k, b * 7 + 1) \u003c 0.92 : hash(k, b * 7 + 3) \u003c 0.1 + 0.6 * night;\n        if (on && P.on[k] && P.onT[k] \u003c 0.5) on = hash(k * 13 + b, floor(P.onT[k] * 22)) > 0.45;\n        const lc = hash(k, b + 40) \u003c 0.75 ? [255, 184, 88] : [200, 228, 255], a = on ? 0.9 + 0.1 * night : 0;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(row[rr + c] * 0.42 + c * 5, lc[c], a) * (ry === 2 ? 1.12 : 1);\n      } else {\n        // An open floor: dark inside, the back columns, a work lamp at night.\n        if (night > 0.05 && bx === 2 && ry === 2 && hash(k, b) \u003c 0.6) put(x, y, [255, 214, 150].map((v) => v * night));\n        else sur(x, y, 60, 54, 52, bx === 2 ? 0.6 : 0.28);\n      }\n    }\n  }\n  // Ties from the mast to the frame.\n  for (let k = 2; k \u003c n; k += 3) for (let x = BX1 + 1; x \u003c MX - 2; x++) sur(x, GY - (k + 1) * FH + 1, 200, 170, 60);\n\n  // The floor on the deck: starter bars, the core panel, the rebar cages, the formwork.\n  const top = dk - FH, st = P.top ? 0 : P.stage;\n  if (st > 0) for (let y = top + 1; y \u003c dk; y++) for (let x = BX0 + 30; x \u003c= BX0 + 34; x++) sur(x, y, 176, 172, 164, x === BX0 + 32 ? 0.8 : 1);\n  for (let ci = 0; ci \u003c 6; ci++) {\n    const x = BX0 + ci * 7;\n    for (let j = 1; j \u003c= max(2, st > 1 ? round(P.cage * 5) : 0); j++) sur(x, dk - j, 176, 96, 50), j & 1 && sur(x + 1, dk - j, 130, 76, 44);\n    if (st > 2 && ci / 6 \u003c P.form) for (let j = 1; j \u003c FH; j++) sur(x, dk - j, 218, 162, 84), sur(x + 1, dk - j, 196, 140, 70);\n  }\n  if (st > 2) for (let x = BX0; x \u003c= BX0 + 36 * P.form; x++) for (let j = 0; j \u003c ((x - BX0) % 7 === 4 ? FH : 1); j++) j ? sur(x, top + j, 150, 150, 156, 0.8) : sur(x, top, 214, 156, 80);\n  if (P.pourX >= 0 && !P.top) for (let x = BX0; x \u003c= min(BX1, P.pourX); x++) sur(x, top, 140, 140, 150), (x - BX0) % 7 \u003c 2 && sur(x, top + 1, 140, 140, 150, 0.9);\n  if (P.item > 0) drawLoad(P.item, P.ix, dk - LH[P.item]);\n  // Topped out: a little fir tree on the roof.\n  if (P.top) for (let j = 0; j \u003c 5; j++) for (let i = -j; i \u003c= j; i++) sur(24 + i, dk - 6 + j, 40, 120, 60);\n  // The workers on the deck in hi-vis, and the welder by a column.\n  for (const w of P.wk) man(w.x, dk - 1);\n  man(17, dk - 1, [60, 60, 70]);\n}\n\n// One of the four loads, centred on x with its top on row y0.\nfunction drawLoad(type, cx, y0) {\n  const w = LW[type], h = LH[type], x0 = round(cx - w / 2), y = round(y0);\n  for (let j = 0; j \u003c h; j++)\n    for (let i = 0; i \u003c w; i++) {\n      const X = x0 + i, Y = y + j;\n      if (type === 0) (i \u003c 2 || i > 4 || !j || j > 3) && sur(X, Y, 150, 146, 140, i && j ? 1 : 1.25);\n      else if (type === 1) sur(X, Y, i === 2 || i === 8 ? 60 : 186, i === 2 || i === 8 ? 54 : 92, 48, j ? 0.72 : 1);\n      else if (type === 2) sur(X, Y, 226, 170, 92, j & 1 ? 0.55 : 1);\n      else if (i >= (j >= h - 2 ? 1 : 0) && i \u003c w - (j >= h - 2 ? 1 : 0)) sur(X, Y, 120, 120, 128, j === 1 ? 0.6 : j === 0 ? 1.3 : 1);\n    }\n  if (type === 3) sur(x0 + 2, y + h, 70, 70, 76);\n}\n\n// The hook block, its cable and slings, and whatever it carries.\nfunction hook(P) {\n  const [tx, ty] = tip(P), hx = tx + P.swx, hy = P.hy;\n  line(tx, ty + 1, hx, hy - 1, [120, 120, 130], 0.9);\n  for (let i = -1; i \u003c= 1; i++) surc(hx + i, hy - 1, YEL);\n  sur(hx, hy, 60, 60, 66), sur(hx, hy + 1, 90, 90, 96);\n  if (P.load >= 0) {\n    const w = LW[P.load] / 2 - 0.5;\n    line(hx, hy + 1, hx - w, hy + 3, [110, 110, 116], 0.8), line(hx, hy + 1, hx + w, hy + 3, [110, 110, 116], 0.8);\n    drawLoad(P.load, hx + 0.5, hy + 3);\n    // Concrete runs from the bucket into the forms.\n    if (P.ph === \"P\" || P.ph === \"I\") for (let j = hy + 10; j \u003c deckY(P) - FH; j++) sur(hx + 0.5, j, 140, 140, 150);\n  }\n}\n\n// The yard: stock waiting by the crane, the load being rigged, the floodlight tower.\nfunction yard(P) {\n  drawLoad(2, 53, 115), drawLoad(1, 54, 118);\n  if (P.ph === \"A\" || P.ph === \"B\") {\n    const s = P.stage, x = MX + PICK_R - LW[s] / 2 - 2, arm = P.ph === \"B\" ? (P.pt * 6) & 1 : 0;\n    drawLoad(s, MX + PICK_R + 0.5, PICK_Y - LH[s]);\n    man(x, PICK_Y - 1), sur(x + 1, PICK_Y - 2 - arm, 255, 130, 20);\n  }\n  for (let y = LY; y \u003c 122; y++) sur(62, y, 120, 120, 126);\n  const fon = sm(0.3, 0.55, P.h);\n  for (let x = 59; x \u003c= 62; x++) put(x, 83, [90, 90, 96]), put(x, 84, x \u003c 62 ? [70 + 185 * fon, 70 + 180 * fon, 76 + 154 * fon] : [90, 90, 96]);\n}\n\n// The crane: mast, ties, slewing ring, cab, tower head, jib and counter-jib.\nfunction crane(P) {\n  const c = cos(P.th), sn = sin(P.th), blink = P.rt % 1.2 \u003c 0.55, fon = sm(0.3, 0.55, P.h);\n  const jib = () => {\n    for (let s = 0; s \u003c= JL; s += 0.3) {\n      // Swung towards you the tip is nearer and bigger, swung away it shrinks.\n      const sc = 1 + (0.45 * s * sn) / JL, px = MX + s * c, py = JY - s * sn * 0.1, ht = (3 - (1.2 * s) / JL) * sc, tri = abs(((s / 2.4) % 2) - 1), wd = sn * 1.2 * sc;\n      surc(px - wd, py, YEL, 0.85), surc(px + wd, py, YEL, 0.85), surc(px, py - ht, YEL), surc(px + wd * (1 - tri), py - tri * ht, YEL, 0.75);\n    }\n  };\n  const counter = () => {\n    for (let s = 0; s \u003c= CJL; s += 0.3) {\n      const px = MX - s * c, py = JY + s * sn * 0.1;\n      surc(px, py, YEL, 0.85), surc(px, py - 1, YEL, s % 2 \u003c 0.6 ? 0.8 : 0);\n      if (s > 6 && s \u003c 8.5) for (let j = 1; j \u003c= 2; j++) sur(px, py - 1 - j, 80, 84, 92);\n      if (s > CJL - 5) for (let j = 1; j \u003c= 4; j++) sur(px, py + j, 190, 184, 172, (floor(s) & 1) === 0 ? 0.8 : 1);\n    }\n  };\n  const pend = () => {\n    line(MX, APEX + 1, MX + 28 * c, JY - 28 * sn * 0.1 - 2.2, [110, 104, 96], 0.8);\n    line(MX, APEX + 1, MX - CJL * c, JY + CJL * sn * 0.1 - 1, [110, 104, 96], 0.8);\n  };\n  const cab = () => {\n    for (let q = 0, i, j; q \u003c 12; q++)\n      (i = (q % 3) - 1), (j = (q / 3) | 0), j % 3 && i > -1 ? put(MX + 3.5 * c + i, JY + 1 + j, P.h > 0.5 ? [255 * fon, 226 * fon, 160 * fon] : [110, 150, 196]) : surc(MX + 3.5 * c + i, JY + 1 + j, [240, 232, 210]);\n  };\n  // What faces away is drawn first.\n  if (sn \u003c 0) jib(), pend(), cab();\n  else counter(), pend();\n  // The mast: two chords and a lattice of diagonals.\n  for (let y = JY + 3; y \u003c 118; y++) {\n    surc(MX - 2, y, YEL, 0.72), surc(MX + 2, y, YEL);\n    for (let xi = 1; xi \u003c= 3; xi++) if (((y + xi) & 3) === 0 || ((y - xi) & 3) === 0) surc(MX - 2 + xi, y, YEL, 0.8);\n  }\n  for (let x = MX - 4; x \u003c= MX + 4; x++) sur(x, 117, 170, 166, 160), sur(x, 118, 170, 166, 160), sur(x, 119, 170, 166, 160), abs(x - MX) \u003c 4 && (sur(x, JY + 1, 80, 80, 86), sur(x, JY + 2, 110, 110, 116));\n  // The tower head.\n  for (let y = APEX; y \u003c= JY - 3; y++) {\n    const hw = (1.6 * (y - APEX)) / (JY - 3 - APEX);\n    surc(MX - hw, y, YEL), surc(MX + hw, y, YEL);\n    if ((y & 1) === 0) for (let x = round(MX - hw); x \u003c= MX + hw; x++) surc(x, y, YEL, 0.8);\n  }\n  if (sn \u003c 0) counter(), pend();\n  else jib(), pend(), cab();\n  // The trolley, and the warning lights on the head and at the jib tip.\n  const [tx, ty] = tip(P);\n  sur(tx - 1, ty, 90, 90, 96), sur(tx, ty, 90, 90, 96), sur(tx + 1, ty, 90, 90, 96);\n  for (const [x, y] of [[MX, APEX - 1], [MX + JL * c, JY - JL * sn * 0.1 - 2]]) {\n    put(x, y, blink ? [255, 40, 28] : [110, 20, 16]);\n    if (blink) glow(x, y, [255, 30, 20], 0.12 + 0.3 * fon);\n  }\n}\n\n// The mixer, its drum turning.\nfunction mixer(P) {\n  const x0 = round(P.mix), night = sm(0.4, 0.9, P.h);\n  if (x0 \u003c -24) return;\n  for (let y = 115; y \u003c= 121; y++)\n    for (let i = 0; i \u003c 13; i++) {\n      const e = ((i - 6) / 6.8) ** 2 + ((y - 118 + (i - 6) * 0.18) / 3.4) ** 2;\n      if (e \u003c 1) sur(x0 + i, y, ...((((i * 0.7 + y * 1.4 - P.t * 9) % 4) + 4) % 4 \u003c 2 ? [240, 120, 40] : [230, 228, 220]), 1 - 0.3 * e);\n    }\n  for (let i = 0; i \u003c 20; i++) sur(x0 + i, 122, 70, 70, 76);\n  for (let y = 116; y \u003c 122; y++) for (let i = 15; i \u003c 20; i++) sur(x0 + i, y, ...(y \u003c 119 && i > 16 ? [110, 150, 190] : [230, 60, 40]));\n  for (const i of [2, 5, 16]) sur(x0 + i, 123, 30, 30, 34), sur(x0 + i + 1, 123, 30, 30, 34);\n  if (night > 0.1) add(x0 + 20, 120, [255, 240, 200], night);\n}\n\nfunction cars(P) {\n  const night = sm(0.35, 0.9, P.h), cols = [[200, 40, 36], [220, 220, 226], [40, 80, 170], [60, 64, 70]];\n  for (const [cx, v, ci] of P.cars) {\n    const x0 = round(cx), fx = v > 0 ? x0 + 6 : x0;\n    for (let i = 0; i \u003c 21; i++) i \u003c 14 ? surc(x0 + (i >> 1), 125 + (i & 1), cols[ci]) : i \u003c 17 && sur(x0 + i - 12, 124, 120, 150, 180);\n    add(fx, 125, [255, 250, 220], 0.3 + night), add(x0 + 6 - fx + x0, 125, [255, 20, 10], 0.2 + night);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  const hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  // The hook goes behind the frame when the jib swings away from you.\n  const behind = sin(P.th) \u003c -0.15, y = deckY(P) - 2, FLb = P.fl;\n  sky(P, K), clouds(P, K), light(P, K), ground(), behind && hook(P), building(P), yard(P), crane(P), mixer(P), cars(P), behind || hook(P);\n  // The welding arc, its sparks, and the floodlight beams in the dusk air.\n  if (P.welding) put(18, y, [235, 244, 255]), glow(18, y, [160, 190, 255], 0.36 + 0.24 * rnd());\n  for (const [x, y, , , l, px, py] of P.sp) put(px, py, [255, 120, 30], min(1, l * 1.4) * 0.6), put(x, y, [255, 170 + 80 * min(1, l), 70 * min(1, l)], min(1, l * 1.4));\n  if (P.h > 0.3) for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (FLb[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += FLb[i] * 22 * FLC[c];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-tower-crane","type":"code","name":"tower-crane","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tower Crane\n// Family:  construction\n// Idea:    A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower cranes that stand beside a rising concrete frame\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1\n//\n// Knob 1: Dusk. From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit.\n// Knob 2: Speed. At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower.\n// Knob 3: Floors. How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof.\n// Knob 4: Wind. Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable.\n// Buttons: K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street level, one storey, and the most floors that fit under the jib.\nconst [GY, FH, NMAX] = [114, 6, 13];\n// The frame, x 3 to 39: six columns two LEDs wide, five bays, the one by the crane the lift core.\nconst [BX0, BX1, CORE] = [3, 39, 4];\n// Mast centre, the jib's bottom chord at the root, jib and counter-jib lengths, top of the tower head.\nconst [MX, JY, JL, CJL, APEX] = [46, 15, 42, 15, 3];\n// The hook's highest row, the radius it picks at over the yard, the yard's load line.\nconst [HTOP, PICK_R, PICK_Y] = [21, 11, 120];\n// Wall panel, rebar, formwork, bucket: width, height, the column it is set down on.\nconst LW = [8, 11, 9, 5], LH = [5, 2, 4, 6], DROP = [35, 20, 12, 6];\n// Sky top, middle, horizon; sun; lit and shaded cloud; light on things. Afternoon to night.\nconst KEYS = [\n  [34, 72, 156, 128, 142, 186, 255, 190, 112, 255, 236, 170, 255, 236, 204, 150, 130, 160, 1, 0.9, 0.74],\n  [30, 50, 130, 168, 108, 140, 255, 140, 62, 255, 168, 78, 255, 170, 116, 104, 70, 108, 0.86, 0.64, 0.48],\n  [16, 20, 70, 64, 44, 96, 196, 86, 78, 226, 90, 52, 176, 92, 104, 46, 36, 66, 0.44, 0.38, 0.46],\n  [4, 6, 22, 10, 14, 40, 44, 34, 60, 0, 0, 0, 42, 36, 56, 16, 16, 30, 0.2, 0.21, 0.3],\n];\nconst FLC = [1, 0.94, 0.82];\nconst YEL = [255, 196, 22];\n// The floodlight tower in the yard and where it is aimed.\nconst [LX, LY] = [60.5, 84.5];\nconst [AX, AY] = (([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)])([-34, 31]);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F(N * 3), bg: F(N * 3), lm: F(N * 3), fl: F(N), row: F(H * 3), cloud: F(128 * 64), sky: new Int16Array(W),\n    t: 0, rt: 0, nk: -1, stage: 3, cage: 1, form: 1, item: -1, lightNew: -1, th: PI, r: 40, load: 3, ph: \"I\", sw: 0, swv: 0, vx: 0, ptx: 6,\n    on: new Uint8Array(NMAX), onT: F(NMAX).fill(9), nsw: 2.4, cx: 0, sp: [], weld: 0.4, welding: 0, wk: [], mix: 2, cars: [], ncar: 1.4,\n  });\n  // Clouds: a strip of soft noise that wraps every 128 columns.\n  for (let i = 0; i \u003c 128 * 64; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.05, y * 0.13) + 0.3 * vn(X * 0.13, y * 0.3 + 9) + 0.15 * vn(X * 0.4, y * 0.6 + 3);\n    P.cloud[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  // The city behind: blocks of four to nine columns.\n  for (let x = 0, w = 0, h = 0; x \u003c W; x++, w--) w > 0 || ((w = 4 + floor(rnd() * 6)), (h = 98 + floor(rnd() * 12))), (P.sky[x] = h);\n  for (let k = 0; k \u003c NMAX; k++) (P.on[k] = rnd() \u003c 0.35 ? 1 : 0), k \u003c 3 && P.wk.push({ x: 8 + k * 11 + rnd() * 4, tx: 8 + rnd() * 28, wait: rnd() * 2 });\n}\n\n// A move of the crane: slew angle, trolley radius and hook row, eased to where they go.\nfunction go(P, ph, dur, to) {\n  Object.assign(P, { ph, pt: 0, pd: dur, f0: [P.th, P.r, P.hy], f1: [to.th ?? P.th, to.r ?? P.r, to.hy ?? P.hy] });\n}\n\nconst deckY = (P) => GY - P.n * FH;\nconst tip = (P) => [MX + P.r * cos(P.th), JY + 1 - P.r * sin(P.th) * 0.1];\nconst bucketHy = (P) => deckY(P) - FH - 2 - LH[3] - 3;\n\nfunction finishFloor(P) {\n  if (P.n \u003c NMAX) P.n++;\n  else P.top = 1;\n  // The floor that has just been glazed lights up a moment later.\n  Object.assign(P, { stage: 0, cage: 0, form: 0, item: -1, pourX: -1, nsw: min(P.nsw, 0.7), lightNew: P.n - 3 });\n}\n\n// Down to the yard, rig, hoist, slew over, lower, set down (or pour), up again.\nfunction step(P) {\n  const T = P.ph, type = P.load;\n  if (T === \"A\") go(P, \"B\", 0.5, {});\n  else if (T === \"B\") (P.load = P.top && P.stage > 2 ? (P.stage = 0) : P.stage), go(P, \"C\", 2.8, { hy: HTOP });\n  else if (T === \"C\") go(P, \"D\", 2.4, { th: P.th + PI, r: MX - DROP[type] });\n  else if (T === \"D\") go(P, \"E\", 1.5, { hy: type === 3 ? bucketHy(P) : deckY(P) - 4 - LH[type] });\n  else if (T === \"E\") {\n    if (type === 3) (P.pourX = BX0), go(P, \"P\", 3, { r: MX - BX1 + 2 });\n    else {\n      // Set down: the panel goes into the core, rebar and formwork lie on the deck.\n      const x = round(tip(P)[0]);\n      if (type) (P.item = type), (P.ix = x), type \u003c 2 ? (P.cage = 0) : (P.form = 0);\n      for (const w of P.wk) w.tx = x + (rnd() - 0.5) * 10;\n      (P.stage = max(P.stage, type + 1)), (P.load = -1), go(P, \"F\", 0.9, {});\n    }\n  } else if (T === \"P\" || T === \"I\") finishFloor(P), go(P, \"F\", 0.4, {});\n  else if (T === \"F\") go(P, \"G\", 0.5, { hy: P.hy - 12 });\n  else (P.load = -1), go(P, \"A\", 1.5, { th: (floor(P.th / TAU + 1e-3) + 1) * TAU, r: PICK_R, hy: PICK_Y - LH[P.stage] - 3 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nf = round(cl(k[2], 9, 13));\n  if (nf !== P.nk) {\n    // A new count of floors: the hook keeps its place over the deck.\n    const sh = (nf - P.n) * FH;\n    P.nk = P.n = nf;\n    P.top = 0;\n    if (P.ph === \"I\") (P.hy = bucketHy(P)), (P.pourX = BX0), go(P, \"I\", 3, { r: MX - BX1 + 2 });\n    else if (\"EPFG\".includes(P.ph)) (P.hy -= sh), (P.f0[2] -= sh), (P.f1[2] -= sh);\n  }\n  P.w = cl(k[3], -1, 1);\n  const t = (P.t += d), k0 = cl(k[0], 0, 1);\n  P.rt += rd;\n  // The evening deepens a little and comes back once every minute and a half.\n  P.h = k0 + (1 - k0) * 0.05 * (1 - cos((TAU * t) / 90));\n  // K1 tap: everything for the floor is in place at once and the deck pours.\n  if (input.btnPressed && input.btnPressed[0] && P.pourX \u003c 0 && !P.top) Object.assign(P, { pourBtn: 1, pourX: BX0, stage: 3, cage: 1, form: 1 });\n  const lin = min(1, (P.pt += d) / P.pd), u = sm(0, 1, lin), pour = P.ph === \"P\" || P.ph === \"I\";\n  P.th = mix(P.f0[0], P.f1[0], u);\n  P.r = mix(P.f0[1], P.f1[1], pour ? lin : u);\n  P.hy = mix(P.f0[2], P.f1[2], u);\n  if (pour) P.pourX = max(P.pourX, tip(P)[0] + 2);\n  if (lin >= 1) step(P);\n  if (P.pourBtn && (P.pourX += 30 * d) > BX1) (P.pourBtn = 0), finishFloor(P);\n  // The load swings on its cable when the trolley speeds up or slows, and in the wind.\n  const [tx, ty] = tip(P), L = max(4, P.hy - ty);\n  if (d > 0) {\n    const vx = (tx - P.ptx) / d, ax = cl((vx - P.vx) / d, -30, 30), eq = P.w * (0.06 + 0.04 * sin(t * 1.7)) * (P.load >= 0 ? 1 : 1.6);\n    P.swv += (-(110 / L) * (P.sw - eq) - (0.5 * ax) / L - 1.4 * P.swv) * d;\n    P.sw = cl(P.sw + P.swv * d, -0.3, 0.3);\n    [P.ptx, P.vx] = [tx, vx];\n  }\n  // The rigger steadies the load before it goes up.\n  if (P.ph === \"B\") (P.sw *= 1 - min(1, 5 * d)), (P.swv *= 1 - min(1, 5 * d));\n  P.swx = cl(L * sin(P.sw), -2.5, 2.5);\n  // The rebar is tied up the columns and the formwork goes round them.\n  if (P.stage > 1) P.cage = min(1, P.cage + d * 0.3);\n  if (P.stage > 2) P.form = min(1, P.form + d * 0.3);\n  // A floor switches its lights on or off together.\n  for (let i = 0; i \u003c NMAX; i++) P.onT[i] += rd;\n  if ((P.nsw -= d) \u003c= 0) {\n    const f = P.lightNew >= 0 ? P.lightNew : floor(rnd() * max(1, P.n - 2));\n    P.on[f] = P.lightNew >= 0 ? 1 : 1 - P.on[f];\n    Object.assign(P, { lightNew: -1, nsw: 1.6 + rnd() * 2 }).onT[f] = 0;\n  }\n  // Welding on the deck, and its sparks falling down the face.\n  if ((P.weld -= d) \u003c= 0) (P.welding = 1 - P.welding), (P.weld = P.welding ? 1.4 + rnd() * 1.6 : 0.4 + rnd() * 0.8);\n  const wy = deckY(P) - 2;\n  if (P.welding) for (let n = 0; n \u003c 4; n++) if (rnd() \u003c d * 18) P.sp.push([18 + rnd(), wy, (rnd() - 0.5) * 14, -4 - rnd() * 7, 1 + rnd() * 0.9, 18.5, wy]);\n  P.sp = P.sp.filter((s) => ((s[5] = s[0]), (s[6] = s[1]), (s[3] += 46 * d), (s[0] += s[2] * d), (s[1] += s[3] * d), (s[4] -= d) > 0 && s[1] \u003c GY));\n  // Workers walk about the deck.\n  for (const w of P.wk)\n    if (abs(w.tx - w.x) > 0.3) w.x = cl(w.x + cl(w.tx - w.x, -4 * d, 4 * d), 5, 37);\n    else if ((w.wait -= d) \u003c= 0) (w.tx = 6 + rnd() * 30), (w.wait = 1 + rnd() * 3);\n  // The mixer comes in for the bucket and backs out after the pour.\n  P.mix += cl((P.stage >= 2 && !P.top ? 2 : -26) - P.mix, -9 * d, 9 * d);\n  // Cars along the street.\n  if ((P.ncar -= d) \u003c= 0) (P.ncar = 2 + rnd() * 4), P.cars.push(rnd() \u003c 0.5 ? [-8, 11 + rnd() * 6, floor(rnd() * 4)] : [W + 1, -11 - rnd() * 6, floor(rnd() * 4)]);\n  P.cars = P.cars.filter((c) => ((c[0] += c[1] * d), c[0] > -12 && c[0] \u003c W + 12));\n  // Clouds drift with the wind.\n  P.cx += (1.5 + 9 * P.w) * d;\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\n// A surface: its own colour under the light that falls on that LED.\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\n// A lamp's glow round it, and a worker three LEDs tall.\nconst glow = (x, y, c, k) => {\n  for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (i || j) add(x + i, y + j, c, k / (i * i + j * j));\n};\nconst man = (x, y, head = [250, 250, 240]) => (sur(x, y, 50, 56, 90), sur(x, y - 1, 255, 130, 20), surc(x, y - 2, head));\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.2 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\n\n// Sky, sun and the city beyond, kept until the evening moves on.\nfunction sky(P, K) {\n  const h = P.h, B = P.bg;\n  if (round(h * 300) === P.bgKey) return F.set(B);\n  P.bgKey = round(h * 300);\n  const row = P.row, night = sm(0.4, 0.9, h), vis = 1 - sm(0.78, 0.95, h);\n  for (let y = 0; y \u003c H; y++) {\n    const f = min(1, y / GY), a = f \u003c 0.5 ? 0 : 3, u = f \u003c 0.5 ? f / 0.5 : (f - 0.5) / 0.5;\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(K[a + c], K[a + 3 + c], a ? u * u : sm(0, 1, u));\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    if (y >= P.sky[x]) {\n      const win = night * (hash(x, y * 3) \u003c 0.16 && y & 1 ? 1 : 0);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = mix(K[3 + c], K[6 + c], 0.55) * 0.6 * (x & 1 ? 1 : 0.86) + win * [210, 160, 90][c];\n      continue;\n    }\n    const d = Math.hypot(x - 54.5, y - 61.5 - 52 * h), g = vis * (0.55 * exp(-((d - 3.6) ** 2) / 50) + 0.3 * exp(-d / 16));\n    for (let c = 0; c \u003c 3; c++) B[o + c] = d \u003c 3.6 && vis > 0 ? mix(row[y * 3 + c], K[9 + c], vis) : row[y * 3 + c] + K[9 + c] * g * 0.7;\n  }\n  F.set(B);\n}\n\nfunction clouds(P, K) {\n  const cover = 0.56 - 0.18 * abs(P.w), C = P.cloud;\n  for (let y = 0; y \u003c 100; y++) {\n    const ty = floor(y * 0.6) & 63, fade = 1 - sm(50, 100, y);\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= P.sky[x]) continue;\n      const v = C[(ty \u003c\u003c 7) | (floor(x + P.cx) & 127)], a = cl((v - cover) * 7, 0, 1) * fade, lt = cl(1.25 - (v - cover) * 4 + (y - 40) / 120, 0, 1);\n      if (a > 0.01) put(x, y, [mix(K[15], K[12], lt), mix(K[16], K[13], lt), mix(K[17], K[14], lt)], a * 0.92);\n    }\n  }\n}\n\n// The light on every surface: the day, cloud shadows, the floodlights after dusk.\nfunction light(P, K) {\n  const sunA = 1 - sm(0.45, 0.85, P.h), fon = sm(0.3, 0.55, P.h), FLb = P.fl, C = P.cloud;\n  const cover = 0.5 - 0.18 * abs(P.w), [tx, ty] = tip(P), hx = tx + P.swx * 0.5;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, v = C[((floor(y * 0.25 + 20) & 63) \u003c\u003c 7) | (floor(x * 0.8 + P.cx * 2.2 + 40) & 127)];\n    let fl = 0;\n    if (fon > 0) {\n      const dx = x + 0.5 - LX, dy = y + 0.5 - LY, dd = Math.hypot(dx, dy) + 0.01, ca = (dx * AX + dy * AY) / dd;\n      fl = (exp((ca - 1) / 0.03) * 1.2) / (1 + (dd / 60) ** 2);\n      if (y > ty + 1) {\n        const q = (x + 0.5 - hx) / (1.2 + 0.16 * (y - ty));\n        fl += (exp(-q * q) * 0.7) / (1 + ((y - ty) / 90) ** 2);\n      }\n      fl *= fon;\n    }\n    FLb[i] = fl;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[18 + c] * (1 - 0.45 * sunA * cl((v - cover) * 5, 0, 1)) + fl * FLC[c];\n  }\n}\n\n// The yard's gravel, the kerb, the street and its markings.\nfunction ground() {\n  for (let i = GY * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, n = 0.82 + 0.3 * hash(x, y + 900);\n    y === 126 && (x + 6) % 8 \u003c 2 ? sur(x, y, 190, 180, 120) : y > 123 ? sur(x, y, 62 * n, 60 * n, 66 * n) : y > 122 ? sur(x, y, 150, 146, 140) : sur(x, y, 150 * n, 126 * n, 98 * n);\n  }\n}\n\n// The concrete frame, its windows, and the floor going up on the deck.\nfunction building(P) {\n  const n = P.n, dk = deckY(P), g = n - 2, night = sm(0.4, 0.9, P.h), row = P.row;\n  for (let y = dk; y \u003c GY; y++) {\n    const k = floor((GY - 1 - y) / FH), ry = y - (GY - (k + 1) * FH);\n    for (let x = BX0; x \u003c= BX1; x++) {\n      const cx = (x - BX0) % 7, b = floor((x - BX0) / 7), bx = cx - 2;\n      if (ry === 0) sur(x, y, 228, 220, 206);\n      else if (cx \u003c 2) sur(x, y, 206, 198, 184);\n      else if (ry === 1) k \u003c g ? sur(x, y, 78, 86, 102) : sur(x, y, 178, 172, 162);\n      else if (b === CORE) sur(x, y, 196, 190, 180, (x + y) % 9 === 0 ? 0.8 : 0.95);\n      else if (k \u003c g && bx === 2) sur(x, y, 80, 80, 88);\n      else if (k \u003c g) {\n        // Glass: the sky in it, or a lit room behind.\n        const o = (y * W + x) * 3, rr = cl(round(y * 0.3 + 4), 0, GY - 1) * 3;\n        let on = P.on[k] ? hash(k, b * 7 + 1) \u003c 0.92 : hash(k, b * 7 + 3) \u003c 0.1 + 0.6 * night;\n        if (on && P.on[k] && P.onT[k] \u003c 0.5) on = hash(k * 13 + b, floor(P.onT[k] * 22)) > 0.45;\n        const lc = hash(k, b + 40) \u003c 0.75 ? [255, 184, 88] : [200, 228, 255], a = on ? 0.9 + 0.1 * night : 0;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(row[rr + c] * 0.42 + c * 5, lc[c], a) * (ry === 2 ? 1.12 : 1);\n      } else {\n        // An open floor: dark inside, the back columns, a work lamp at night.\n        if (night > 0.05 && bx === 2 && ry === 2 && hash(k, b) \u003c 0.6) put(x, y, [255, 214, 150].map((v) => v * night));\n        else sur(x, y, 60, 54, 52, bx === 2 ? 0.6 : 0.28);\n      }\n    }\n  }\n  // Ties from the mast to the frame.\n  for (let k = 2; k \u003c n; k += 3) for (let x = BX1 + 1; x \u003c MX - 2; x++) sur(x, GY - (k + 1) * FH + 1, 200, 170, 60);\n\n  // The floor on the deck: starter bars, the core panel, the rebar cages, the formwork.\n  const top = dk - FH, st = P.top ? 0 : P.stage;\n  if (st > 0) for (let y = top + 1; y \u003c dk; y++) for (let x = BX0 + 30; x \u003c= BX0 + 34; x++) sur(x, y, 176, 172, 164, x === BX0 + 32 ? 0.8 : 1);\n  for (let ci = 0; ci \u003c 6; ci++) {\n    const x = BX0 + ci * 7;\n    for (let j = 1; j \u003c= max(2, st > 1 ? round(P.cage * 5) : 0); j++) sur(x, dk - j, 176, 96, 50), j & 1 && sur(x + 1, dk - j, 130, 76, 44);\n    if (st > 2 && ci / 6 \u003c P.form) for (let j = 1; j \u003c FH; j++) sur(x, dk - j, 218, 162, 84), sur(x + 1, dk - j, 196, 140, 70);\n  }\n  if (st > 2) for (let x = BX0; x \u003c= BX0 + 36 * P.form; x++) for (let j = 0; j \u003c ((x - BX0) % 7 === 4 ? FH : 1); j++) j ? sur(x, top + j, 150, 150, 156, 0.8) : sur(x, top, 214, 156, 80);\n  if (P.pourX >= 0 && !P.top) for (let x = BX0; x \u003c= min(BX1, P.pourX); x++) sur(x, top, 140, 140, 150), (x - BX0) % 7 \u003c 2 && sur(x, top + 1, 140, 140, 150, 0.9);\n  if (P.item > 0) drawLoad(P.item, P.ix, dk - LH[P.item]);\n  // Topped out: a little fir tree on the roof.\n  if (P.top) for (let j = 0; j \u003c 5; j++) for (let i = -j; i \u003c= j; i++) sur(24 + i, dk - 6 + j, 40, 120, 60);\n  // The workers on the deck in hi-vis, and the welder by a column.\n  for (const w of P.wk) man(w.x, dk - 1);\n  man(17, dk - 1, [60, 60, 70]);\n}\n\n// One of the four loads, centred on x with its top on row y0.\nfunction drawLoad(type, cx, y0) {\n  const w = LW[type], h = LH[type], x0 = round(cx - w / 2), y = round(y0);\n  for (let j = 0; j \u003c h; j++)\n    for (let i = 0; i \u003c w; i++) {\n      const X = x0 + i, Y = y + j;\n      if (type === 0) (i \u003c 2 || i > 4 || !j || j > 3) && sur(X, Y, 150, 146, 140, i && j ? 1 : 1.25);\n      else if (type === 1) sur(X, Y, i === 2 || i === 8 ? 60 : 186, i === 2 || i === 8 ? 54 : 92, 48, j ? 0.72 : 1);\n      else if (type === 2) sur(X, Y, 226, 170, 92, j & 1 ? 0.55 : 1);\n      else if (i >= (j >= h - 2 ? 1 : 0) && i \u003c w - (j >= h - 2 ? 1 : 0)) sur(X, Y, 120, 120, 128, j === 1 ? 0.6 : j === 0 ? 1.3 : 1);\n    }\n  if (type === 3) sur(x0 + 2, y + h, 70, 70, 76);\n}\n\n// The hook block, its cable and slings, and whatever it carries.\nfunction hook(P) {\n  const [tx, ty] = tip(P), hx = tx + P.swx, hy = P.hy;\n  line(tx, ty + 1, hx, hy - 1, [120, 120, 130], 0.9);\n  for (let i = -1; i \u003c= 1; i++) surc(hx + i, hy - 1, YEL);\n  sur(hx, hy, 60, 60, 66), sur(hx, hy + 1, 90, 90, 96);\n  if (P.load >= 0) {\n    const w = LW[P.load] / 2 - 0.5;\n    line(hx, hy + 1, hx - w, hy + 3, [110, 110, 116], 0.8), line(hx, hy + 1, hx + w, hy + 3, [110, 110, 116], 0.8);\n    drawLoad(P.load, hx + 0.5, hy + 3);\n    // Concrete runs from the bucket into the forms.\n    if (P.ph === \"P\" || P.ph === \"I\") for (let j = hy + 10; j \u003c deckY(P) - FH; j++) sur(hx + 0.5, j, 140, 140, 150);\n  }\n}\n\n// The yard: stock waiting by the crane, the load being rigged, the floodlight tower.\nfunction yard(P) {\n  drawLoad(2, 53, 115), drawLoad(1, 54, 118);\n  if (P.ph === \"A\" || P.ph === \"B\") {\n    const s = P.stage, x = MX + PICK_R - LW[s] / 2 - 2, arm = P.ph === \"B\" ? (P.pt * 6) & 1 : 0;\n    drawLoad(s, MX + PICK_R + 0.5, PICK_Y - LH[s]);\n    man(x, PICK_Y - 1), sur(x + 1, PICK_Y - 2 - arm, 255, 130, 20);\n  }\n  for (let y = LY; y \u003c 122; y++) sur(62, y, 120, 120, 126);\n  const fon = sm(0.3, 0.55, P.h);\n  for (let x = 59; x \u003c= 62; x++) put(x, 83, [90, 90, 96]), put(x, 84, x \u003c 62 ? [70 + 185 * fon, 70 + 180 * fon, 76 + 154 * fon] : [90, 90, 96]);\n}\n\n// The crane: mast, ties, slewing ring, cab, tower head, jib and counter-jib.\nfunction crane(P) {\n  const c = cos(P.th), sn = sin(P.th), blink = P.rt % 1.2 \u003c 0.55, fon = sm(0.3, 0.55, P.h);\n  const jib = () => {\n    for (let s = 0; s \u003c= JL; s += 0.3) {\n      // Swung towards you the tip is nearer and bigger, swung away it shrinks.\n      const sc = 1 + (0.45 * s * sn) / JL, px = MX + s * c, py = JY - s * sn * 0.1, ht = (3 - (1.2 * s) / JL) * sc, tri = abs(((s / 2.4) % 2) - 1), wd = sn * 1.2 * sc;\n      surc(px - wd, py, YEL, 0.85), surc(px + wd, py, YEL, 0.85), surc(px, py - ht, YEL), surc(px + wd * (1 - tri), py - tri * ht, YEL, 0.75);\n    }\n  };\n  const counter = () => {\n    for (let s = 0; s \u003c= CJL; s += 0.3) {\n      const px = MX - s * c, py = JY + s * sn * 0.1;\n      surc(px, py, YEL, 0.85), surc(px, py - 1, YEL, s % 2 \u003c 0.6 ? 0.8 : 0);\n      if (s > 6 && s \u003c 8.5) for (let j = 1; j \u003c= 2; j++) sur(px, py - 1 - j, 80, 84, 92);\n      if (s > CJL - 5) for (let j = 1; j \u003c= 4; j++) sur(px, py + j, 190, 184, 172, (floor(s) & 1) === 0 ? 0.8 : 1);\n    }\n  };\n  const pend = () => {\n    line(MX, APEX + 1, MX + 28 * c, JY - 28 * sn * 0.1 - 2.2, [110, 104, 96], 0.8);\n    line(MX, APEX + 1, MX - CJL * c, JY + CJL * sn * 0.1 - 1, [110, 104, 96], 0.8);\n  };\n  const cab = () => {\n    for (let q = 0, i, j; q \u003c 12; q++)\n      (i = (q % 3) - 1), (j = (q / 3) | 0), j % 3 && i > -1 ? put(MX + 3.5 * c + i, JY + 1 + j, P.h > 0.5 ? [255 * fon, 226 * fon, 160 * fon] : [110, 150, 196]) : surc(MX + 3.5 * c + i, JY + 1 + j, [240, 232, 210]);\n  };\n  // What faces away is drawn first.\n  if (sn \u003c 0) jib(), pend(), cab();\n  else counter(), pend();\n  // The mast: two chords and a lattice of diagonals.\n  for (let y = JY + 3; y \u003c 118; y++) {\n    surc(MX - 2, y, YEL, 0.72), surc(MX + 2, y, YEL);\n    for (let xi = 1; xi \u003c= 3; xi++) if (((y + xi) & 3) === 0 || ((y - xi) & 3) === 0) surc(MX - 2 + xi, y, YEL, 0.8);\n  }\n  for (let x = MX - 4; x \u003c= MX + 4; x++) sur(x, 117, 170, 166, 160), sur(x, 118, 170, 166, 160), sur(x, 119, 170, 166, 160), abs(x - MX) \u003c 4 && (sur(x, JY + 1, 80, 80, 86), sur(x, JY + 2, 110, 110, 116));\n  // The tower head.\n  for (let y = APEX; y \u003c= JY - 3; y++) {\n    const hw = (1.6 * (y - APEX)) / (JY - 3 - APEX);\n    surc(MX - hw, y, YEL), surc(MX + hw, y, YEL);\n    if ((y & 1) === 0) for (let x = round(MX - hw); x \u003c= MX + hw; x++) surc(x, y, YEL, 0.8);\n  }\n  if (sn \u003c 0) counter(), pend();\n  else jib(), pend(), cab();\n  // The trolley, and the warning lights on the head and at the jib tip.\n  const [tx, ty] = tip(P);\n  sur(tx - 1, ty, 90, 90, 96), sur(tx, ty, 90, 90, 96), sur(tx + 1, ty, 90, 90, 96);\n  for (const [x, y] of [[MX, APEX - 1], [MX + JL * c, JY - JL * sn * 0.1 - 2]]) {\n    put(x, y, blink ? [255, 40, 28] : [110, 20, 16]);\n    if (blink) glow(x, y, [255, 30, 20], 0.12 + 0.3 * fon);\n  }\n}\n\n// The mixer, its drum turning.\nfunction mixer(P) {\n  const x0 = round(P.mix), night = sm(0.4, 0.9, P.h);\n  if (x0 \u003c -24) return;\n  for (let y = 115; y \u003c= 121; y++)\n    for (let i = 0; i \u003c 13; i++) {\n      const e = ((i - 6) / 6.8) ** 2 + ((y - 118 + (i - 6) * 0.18) / 3.4) ** 2;\n      if (e \u003c 1) sur(x0 + i, y, ...((((i * 0.7 + y * 1.4 - P.t * 9) % 4) + 4) % 4 \u003c 2 ? [240, 120, 40] : [230, 228, 220]), 1 - 0.3 * e);\n    }\n  for (let i = 0; i \u003c 20; i++) sur(x0 + i, 122, 70, 70, 76);\n  for (let y = 116; y \u003c 122; y++) for (let i = 15; i \u003c 20; i++) sur(x0 + i, y, ...(y \u003c 119 && i > 16 ? [110, 150, 190] : [230, 60, 40]));\n  for (const i of [2, 5, 16]) sur(x0 + i, 123, 30, 30, 34), sur(x0 + i + 1, 123, 30, 30, 34);\n  if (night > 0.1) add(x0 + 20, 120, [255, 240, 200], night);\n}\n\nfunction cars(P) {\n  const night = sm(0.35, 0.9, P.h), cols = [[200, 40, 36], [220, 220, 226], [40, 80, 170], [60, 64, 70]];\n  for (const [cx, v, ci] of P.cars) {\n    const x0 = round(cx), fx = v > 0 ? x0 + 6 : x0;\n    for (let i = 0; i \u003c 21; i++) i \u003c 14 ? surc(x0 + (i >> 1), 125 + (i & 1), cols[ci]) : i \u003c 17 && sur(x0 + i - 12, 124, 120, 150, 180);\n    add(fx, 125, [255, 250, 220], 0.3 + night), add(x0 + 6 - fx + x0, 125, [255, 20, 10], 0.2 + night);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  const hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  // The hook goes behind the frame when the jib swings away from you.\n  const behind = sin(P.th) \u003c -0.15, y = deckY(P) - 2, FLb = P.fl;\n  sky(P, K), clouds(P, K), light(P, K), ground(), behind && hook(P), building(P), yard(P), crane(P), mixer(P), cars(P), behind || hook(P);\n  // The welding arc, its sparks, and the floodlight beams in the dusk air.\n  if (P.welding) put(18, y, [235, 244, 255]), glow(18, y, [160, 190, 255], 0.36 + 0.24 * rnd());\n  for (const [x, y, , , l, px, py] of P.sp) put(px, py, [255, 120, 30], min(1, l * 1.4) * 0.6), put(x, y, [255, 170 + 80 * min(1, l), 70 * min(1, l)], min(1, l * 1.4));\n  if (P.h > 0.3) for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (FLb[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += FLb[i] * 22 * FLC[c];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower."},{"name":"Floors","min":9,"max":13,"about":"How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof."},{"name":"Wind","min":-1,"max":1,"about":"Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable."}],"start":[0,2,9,0.06],"measures":{"motion":0.1573,"detail":0.0705,"edges":0.403,"complexity":1.4462,"coverage":0.9851,"colour":0.2925,"drift":0.0434},"knobResponse":[0.3747,0.0499,0.0453,0.0999]},{"slug":"train-window","title":"Train Window","family":"space","round":17,"note":"달리는 기차 창밖이 층층이 흘러요. 먼 구름과 산은 느리게, 들판과 농가는 빠르게 지나가고 전차선 기둥은 휙 스쳐요. 깎은 비탈이 다가오면 터널이 창을 검게 덮고 나트륨등이 줄을 그으며 지나가요.","idea":"The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-train-window","type":"code","name":"train-window","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Time","min":0,"max":1,"about":"The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3."},{"name":"Hills","min":0,"max":1,"about":"At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds."},{"name":"Rain","min":0,"max":1,"about":"Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded."}],"start":[0,2,0,0.06],"measures":{"motion":0.6601,"detail":0.0493,"edges":0.717,"complexity":0.2041,"coverage":0.8669,"colour":0.2389,"drift":0.3599},"knobResponse":[0.2716,0.0947,0.2843,0.1097]},{"slug":"truchet","title":"Truchet","family":"geometry","round":1,"note":"타일마다 같은 사분원 둘이 있어요. 한 장을 90도 돌리면 길 둘이 하나로 이어지거나 하나가 둘로 끊겨요.","idea":"Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.","buttons":"K1 tap turns a quarter of the tiles at once.","code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-truchet","type":"code","name":"truchet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the path colours around the colour wheel."},{"name":"Flip Rate","min":0,"max":5,"about":"How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them."},{"name":"Tile","min":8,"max":20,"about":"Tile size in LEDs; small is a dense meander, large a few wide loops."},{"name":"Thickness","min":0,"max":1,"about":"Line width, from a thin wire to fat ribbons with small dark holes between them."}],"start":[0,2,8,0.06],"measures":{"motion":0.3464,"detail":0.1313,"edges":0.5615,"complexity":1.2014,"coverage":0.7147,"colour":0.3084,"drift":0.0597},"knobResponse":[0.1766,0.0939,0.1747,0.1431]},{"slug":"tunnel","title":"Tunnel","family":"space","round":1,"note":"가운데서 떨어진 거리로 나누면 평평한 체크무늬가 날아 들어가는 관이 돼요.","idea":"Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.","buttons":"K1 tap throws the far end of the tube to a new place.","code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","layer":{"id":"layer-tunnel","type":"code","name":"tunnel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the near rings; the far ones drift round the wheel from it."},{"name":"Speed","min":-3,"max":8,"about":"Flying forward, and below 0 backing out of the tube."},{"name":"Twist","min":-1,"max":1,"about":"Winds the tiles into a spiral, either way round."},{"name":"Tiles","min":8,"max":24,"about":"How many tiles go round the tube."}],"start":[0,2,0,8],"measures":{"motion":2.5151,"detail":0.0531,"edges":0.4689,"complexity":0.9004,"coverage":0.8993,"colour":0.486,"drift":0.3919},"knobResponse":[0.376,0.2448,0.256,0.2505]},{"slug":"turntables","title":"Turntables","family":"music","round":18,"note":"DJ 의 턴테이블 두 대가 믹서 띠를 사이에 두고 위아래로 서요. 판은 가만히 있는 방 불빛 아래에서 돌며 홈을 드러내고, DJ 는 기다리는 판을 손으로 잡았다가 킥에 맞춰 놓고 크로스페이더를 넘겨요. K2 Pitch 를 0 에 두면 플래터 테두리의 안쪽 스트로브 점이 멈춰 서요.","idea":"Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","layer":{"id":"layer-turntables","type":"code","name":"turntables","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light."},{"name":"Pitch","min":-8,"max":8,"about":"Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back."},{"name":"Scratch","min":0,"max":1,"about":"How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke."},{"name":"Light","min":0,"max":1,"about":"Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat."}],"start":[0,2,0,0.06],"measures":{"motion":0.2259,"detail":0.0842,"edges":0.4014,"complexity":1.294,"coverage":0.7108,"colour":0.1698,"drift":0.051},"knobResponse":[0.0432,0.0432,0.0448,0.0571]},{"slug":"typewriter","title":"Typewriter","family":"type","round":18,"note":"수동 타자기가 시 두 편을 3×5 픽셀 글자로 한 자씩 쳐요. 칠 때마다 활자대가 리본을 지나 튀어 올라 글자를 찍고 종이가 한 칸 왼쪽으로 밀리며, 줄 끝에서 벨이 번쩍이면 캐리지가 오른쪽으로 돌아오며 종이를 한 줄 올려요. K4 를 돌리면 리본이 닳아 글자가 옅어지고, 빨간 반쪽으로 치는 낱말이 늘어요.","idea":"A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","layer":{"id":"layer-typewriter","type":"code","name":"typewriter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet."},{"name":"Speed","min":0.2,"max":3,"about":"Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven."},{"name":"Spacing","min":1,"max":2,"about":"The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows)."},{"name":"Ribbon","min":0,"max":1,"about":"At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words."}],"start":[0,2,1,0.06],"measures":{"motion":0.4854,"detail":0.1156,"edges":0.8353,"complexity":0.7724,"coverage":0.9016,"colour":0.0948,"drift":0.1684},"knobResponse":[0.084,0.1398,0.167,0.0481]},{"slug":"veiled-lady","title":"Veiled Lady","family":"fungi","round":20,"note":"동트기 전 열대 숲 바닥을 손전등으로 비춘 망태버섯 타임랩스예요. 낙엽 속 흰 알이 터져 대가 패널 높이만큼 솟고, 올리브색 갓 밑에서 흰 레이스 망사가 낙엽 가까이까지 내려와요. 파리가 꼬였던 버섯이 시들어 쓰러지면 옆에서 다음 알이 부풀고, K1 을 돌리면 손전등이 UV 로 바뀌어 망사가 청록으로 빛나요.","idea":"A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.","buttons":"K1 tap starts a new egg now.","code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-veiled-lady","type":"code","name":"veiled-lady","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Torch","min":0,"max":1,"about":"A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower."},{"name":"Veil","min":0,"max":1,"about":"At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves."},{"name":"Rain","min":0,"max":1,"about":"Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net."}],"start":[0,2,0,0.06],"measures":{"motion":0.1497,"detail":0.0791,"edges":0.3662,"complexity":1.7099,"coverage":0.5698,"colour":0.1244,"drift":0.0576},"knobResponse":[0.0782,0.0485,0.0482,0.0673]},{"slug":"velvet-nap","title":"Velvet Nap","family":"cosmetic","round":34,"note":"판 전체가 에메랄드 무광 벨벳이고, 보이지 않는 손끝 둘이 천천히 글씨를 쓰듯 결을 쓸어요. 빛 쪽으로 밀린 결은 짙고 깊은 색으로, 빛을 따라 누운 결은 옅은 은빛으로 남아 서로 겹쳐 덮이고, 7초마다 손바닥이 22 LED 너비 띠를 위에서 아래로 쓸어 결을 한 방향으로 눕혀요.","idea":"The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.","buttons":"K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.","code":"// ===== Patternflow pattern =====\n// Title:   Velvet Nap\n// Family:  cosmetic\n// Idea:    The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the matte velvet of flocked compacts and velvet lip tints\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1\n//\n// Knob 1: Hue. The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive.\n// Knob 2: Speed. At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Width. The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel.\n// Knob 4: Pile. The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain.\n// Buttons: K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, round, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The pile of each LED is a vector in the plane of the cloth: its direction\n// is where the fibres lean, its length how far they lean, 0 upright and 1 as\n// far over as the pile goes. A palm lays it straight down the panel.\nconst PALM = 0.85;\n// The light comes from the left and a little below, 22 degrees above the\n// cloth, and sways 29 degrees either way every 12 seconds.\nconst ELEV = (22 * PI) / 180, LAZ = PI - 0.36, SWAY = 0.5;\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, width: 0, pile: 0.06, warm: false, clock: 0, palmT: 0, palmY: -99, palmX: 32, flat: 0,\n    qx: new Float32Array(N), qy: new Float32Array(N),\n    ga: new Float32Array(N), gl: new Float32Array(N), gb: new Float32Array(N),\n    fingers: [], c: [0, 0, 0], d: [0, 0, 0],\n  });\n  for (let p = 0; p \u003c N; p++) {\n    S.qy[p] = PALM;\n    // The fibre grain: each LED's tuft leans a little off the brushed way,\n    // a little more or less, and holds a little more or less dye.\n    S.ga[p] = (random() - 0.5) * 0.3;\n    S.gl[p] = 1 + (random() - 0.5) * 0.16;\n    S.gb[p] = 1 + (random() - 0.5) * 0.05;\n  }\n  for (let i = 0; i \u003c 2; i++) S.fingers.push(newFinger(i));\n}\n\n// The two fingers start one in each half of the panel.\nfunction newFinger(i) {\n  return {\n    x: 10 + random() * 44, y: (i + 0.15 + random() * 0.7) * 64, hd: random() * 2 * PI, turn: 0,\n    down: true, t: random() * 1.5, len: 1.2 + random() * 1.8,\n  };\n}\n\n// One finger, one step: it curves as it goes and steers away from the edges.\n// A stroke lasts 1.2 to 3 seconds, then the finger lifts for 0.2 to 0.5\n// seconds and comes down somewhere else.\nfunction moveFinger(S, f, ds) {\n  f.t += ds;\n  if (!f.down) {\n    if (f.t >= f.len) {\n      f.down = true;\n      f.t = 0;\n      f.len = 1.2 + random() * 1.8;\n      // It comes down where the velvet is least written: the best of four\n      // tries, scored by how far the pile round each is from the palm's.\n      let best = 1e9;\n      for (let k = 0; k \u003c 4; k++) {\n        const x = 6 + random() * (W - 13), y = 6 + random() * (H - 13);\n        let sc = 0;\n        for (let v = -9; v \u003c= 9; v += 3)\n          for (let u = -9; u \u003c= 9; u += 3) {\n            const p = cl(round(y + v), 0, H - 1) * W + cl(round(x + u), 0, W - 1);\n            sc += Math.abs(S.qx[p]) + Math.abs(S.qy[p] - PALM);\n          }\n        if (sc \u003c best) (best = sc), (f.x = x), (f.y = y);\n      }\n      f.hd = random() * 2 * PI;\n      f.turn = (random() - 0.5) * 3;\n    }\n    return false;\n  }\n  if (f.t >= f.len) {\n    f.down = false;\n    f.t = 0;\n    f.len = 0.2 + random() * 0.3;\n    return false;\n  }\n  f.turn += (random() - 0.5) * 14 * ds - f.turn * 0.8 * ds;\n  f.turn = cl(f.turn, -2.6, 2.6);\n  // Steer back towards the middle near an edge.\n  const mx = 10, cx = f.x \u003c mx ? 1 : f.x > W - 1 - mx ? -1 : 0, cy = f.y \u003c mx ? 1 : f.y > H - 1 - mx ? -1 : 0;\n  if (cx || cy) {\n    const want = atan2(cy || (32 - f.y) * 0.01, cx || (32 - f.x) * 0.01);\n    let dh = want - f.hd;\n    dh -= 2 * PI * Math.round(dh / (2 * PI));\n    f.turn += dh * 4 * ds;\n  }\n  f.hd += f.turn * ds;\n  return true;\n}\n\n// Brush the pile under the fingertip towards the way it moves.\nfunction brush(S, x, y, dx, dy, r) {\n  const r2 = (r + 1) * (r + 1);\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, y + r + 1); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, x + r + 1); xx++) {\n      const ex = xx - x, ey = yy - y, e2 = ex * ex + ey * ey;\n      if (e2 > r2) continue;\n      const w = 0.55 * (1 - sm(0.45 * r, r + 0.6, sqrt(e2))), p = yy * W + xx;\n      S.qx[p] += (dx - S.qx[p]) * w;\n      S.qy[p] += (dy - S.qy[p]) * w;\n    }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp, r = 2.2 + 3.6 * S.width, v = 26;\n  S.clock += ds;\n  for (const f of S.fingers) {\n    if (!moveFinger(S, f, ds)) continue;\n    const dx = cos(f.hd), dy = sin(f.hd), dist = v * ds, n = Math.max(1, Math.ceil(dist / 0.7));\n    for (let i = 0; i \u003c n; i++) {\n      f.x += (dx * dist) / n;\n      f.y += (dy * dist) / n;\n      brush(S, f.x, f.y, dx, dy, r);\n    }\n  }\n  // Every 7 seconds a palm strokes down one band 22 LEDs wide, from the\n  // top edge to the bottom in 1.6 seconds, and lays its pile straight down.\n  S.palmT += ds;\n  if (S.palmT >= 7) {\n    S.palmT -= 7;\n    S.palmY = -14;\n    S.palmX = 11 + random() * 42;\n  }\n  if (S.palmY > -50 && S.palmY \u003c H + 14) {\n    const y0 = S.palmY;\n    S.palmY += (156 / 1.6) * ds;\n    const ym = (y0 + S.palmY) / 2;\n    for (let y = max(0, floor(y0 - 12)); y \u003c= min(H - 1, S.palmY + 12); y++) {\n      const wy = 1 - sm(4, 12, Math.abs(y - ym));\n      if (wy \u003c= 0) continue;\n      for (let x = max(0, floor(S.palmX - 13)); x \u003c= min(W - 1, S.palmX + 13); x++) {\n        const w = 0.5 * wy * (1 - sm(7, 12, Math.abs(x - S.palmX))), p = y * W + x;\n        S.qx[p] += (0 - S.qx[p]) * w;\n        S.qy[p] += (PALM - S.qy[p]) * w;\n      }\n    }\n  }\n  if (S.flat > 0) {\n    S.flat -= ds;\n    for (let p = 0; p \u003c N; p++) {\n      S.qx[p] += (0 - S.qx[p]) * 0.2;\n      S.qy[p] += (PALM - S.qy[p]) * 0.2;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.width = cl(k[2], 0, 1);\n  S.pile = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on velvet that has been written on for fourteen seconds, with the\n    // next palm due 2.5 seconds in.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 420; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.palmT = 4.5;\n    S.palmY = -99;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.flat = 0.5;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, dcol = S.d;\n  // Pile length: a short nap leans 36 degrees when brushed and its sheen is\n  // broad; a long plush one leans 72 degrees with a tight bright sheen.\n  const u = (S.pile + 1) / 2, bmax = ((36 + 36 * u) * PI) / 180, pex = 3 + 4 * u;\n  const az = LAZ + SWAY * sin((2 * PI * S.clock) / 12);\n  const lx = cos(az) * cos(ELEV), ly = sin(az) * cos(ELEV), lz = sin(ELEV);\n  const h0 = S.hue + 0.42, hh = h0 - floor(h0);\n  // Orange, gold and chartreuse velvet read rust, mustard or olive at the\n  // body's level, so there the body is lifted towards 0.8 and its darker\n  // faces lean to ruby.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.24, 0.34, hh));\n  // The sheen is a pale tint of the dye.\n  hsv(h0, 0.18, 1, dcol);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const qx = S.qx[p], qy = S.qy[p];\n      let m = sqrt(qx * qx + qy * qy);\n      const ang = (m > 1e-4 ? atan2(qy, qx) : 0) + S.ga[p];\n      m = min(1, m * S.gl[p]);\n      // The fibre axis t: leaning by beta towards the pile's way.\n      const be = m * bmax, sb = sin(be), cb = cos(be);\n      const tx = sb * cos(ang), ty = sb * sin(ang), tz = cb;\n      const tl = tx * lx + ty * ly + tz * lz, sl = sqrt(max(0, 1 - tl * tl));\n      // Kajiya-Kay for a fibre: the lit side goes with the sine to the\n      // light, and a tuft seen end-on shows less of its side. The sheen is\n      // the reflection cone round the fibre crossing the eye straight ahead.\n      const diff = sl * (0.35 + 0.65 * sb);\n      const spec = pow(max(0, sl * sb - tl * cb), pex);\n      const body = (0.22 + 0.78 * diff) * S.gb[p];\n      const rich = 1 - diff;\n      hsv(h0 - (0.012 + 0.06 * warm) * rich, 0.78 + 0.2 * rich - 0.25 * spec, 1, c);\n      const vb = body * (0.8 + 0.2 * warm) + 0.5 * warm * (1 - body), vs = 0.55 * spec;\n      display.setPixel(\n        x, y,\n        round(255 * min(1, c[0] * vb + dcol[0] * vs)),\n        round(255 * min(1, c[1] * vb + dcol[1] * vs)),\n        round(255 * min(1, c[2] * vb + dcol[2] * vs)),\n      );\n    }\n}\n","layer":{"id":"layer-velvet-nap","type":"code","name":"velvet-nap","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Velvet Nap\n// Family:  cosmetic\n// Idea:    The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the matte velvet of flocked compacts and velvet lip tints\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1\n//\n// Knob 1: Hue. The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive.\n// Knob 2: Speed. At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Width. The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel.\n// Knob 4: Pile. The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain.\n// Buttons: K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, round, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The pile of each LED is a vector in the plane of the cloth: its direction\n// is where the fibres lean, its length how far they lean, 0 upright and 1 as\n// far over as the pile goes. A palm lays it straight down the panel.\nconst PALM = 0.85;\n// The light comes from the left and a little below, 22 degrees above the\n// cloth, and sways 29 degrees either way every 12 seconds.\nconst ELEV = (22 * PI) / 180, LAZ = PI - 0.36, SWAY = 0.5;\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, width: 0, pile: 0.06, warm: false, clock: 0, palmT: 0, palmY: -99, palmX: 32, flat: 0,\n    qx: new Float32Array(N), qy: new Float32Array(N),\n    ga: new Float32Array(N), gl: new Float32Array(N), gb: new Float32Array(N),\n    fingers: [], c: [0, 0, 0], d: [0, 0, 0],\n  });\n  for (let p = 0; p \u003c N; p++) {\n    S.qy[p] = PALM;\n    // The fibre grain: each LED's tuft leans a little off the brushed way,\n    // a little more or less, and holds a little more or less dye.\n    S.ga[p] = (random() - 0.5) * 0.3;\n    S.gl[p] = 1 + (random() - 0.5) * 0.16;\n    S.gb[p] = 1 + (random() - 0.5) * 0.05;\n  }\n  for (let i = 0; i \u003c 2; i++) S.fingers.push(newFinger(i));\n}\n\n// The two fingers start one in each half of the panel.\nfunction newFinger(i) {\n  return {\n    x: 10 + random() * 44, y: (i + 0.15 + random() * 0.7) * 64, hd: random() * 2 * PI, turn: 0,\n    down: true, t: random() * 1.5, len: 1.2 + random() * 1.8,\n  };\n}\n\n// One finger, one step: it curves as it goes and steers away from the edges.\n// A stroke lasts 1.2 to 3 seconds, then the finger lifts for 0.2 to 0.5\n// seconds and comes down somewhere else.\nfunction moveFinger(S, f, ds) {\n  f.t += ds;\n  if (!f.down) {\n    if (f.t >= f.len) {\n      f.down = true;\n      f.t = 0;\n      f.len = 1.2 + random() * 1.8;\n      // It comes down where the velvet is least written: the best of four\n      // tries, scored by how far the pile round each is from the palm's.\n      let best = 1e9;\n      for (let k = 0; k \u003c 4; k++) {\n        const x = 6 + random() * (W - 13), y = 6 + random() * (H - 13);\n        let sc = 0;\n        for (let v = -9; v \u003c= 9; v += 3)\n          for (let u = -9; u \u003c= 9; u += 3) {\n            const p = cl(round(y + v), 0, H - 1) * W + cl(round(x + u), 0, W - 1);\n            sc += Math.abs(S.qx[p]) + Math.abs(S.qy[p] - PALM);\n          }\n        if (sc \u003c best) (best = sc), (f.x = x), (f.y = y);\n      }\n      f.hd = random() * 2 * PI;\n      f.turn = (random() - 0.5) * 3;\n    }\n    return false;\n  }\n  if (f.t >= f.len) {\n    f.down = false;\n    f.t = 0;\n    f.len = 0.2 + random() * 0.3;\n    return false;\n  }\n  f.turn += (random() - 0.5) * 14 * ds - f.turn * 0.8 * ds;\n  f.turn = cl(f.turn, -2.6, 2.6);\n  // Steer back towards the middle near an edge.\n  const mx = 10, cx = f.x \u003c mx ? 1 : f.x > W - 1 - mx ? -1 : 0, cy = f.y \u003c mx ? 1 : f.y > H - 1 - mx ? -1 : 0;\n  if (cx || cy) {\n    const want = atan2(cy || (32 - f.y) * 0.01, cx || (32 - f.x) * 0.01);\n    let dh = want - f.hd;\n    dh -= 2 * PI * Math.round(dh / (2 * PI));\n    f.turn += dh * 4 * ds;\n  }\n  f.hd += f.turn * ds;\n  return true;\n}\n\n// Brush the pile under the fingertip towards the way it moves.\nfunction brush(S, x, y, dx, dy, r) {\n  const r2 = (r + 1) * (r + 1);\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, y + r + 1); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, x + r + 1); xx++) {\n      const ex = xx - x, ey = yy - y, e2 = ex * ex + ey * ey;\n      if (e2 > r2) continue;\n      const w = 0.55 * (1 - sm(0.45 * r, r + 0.6, sqrt(e2))), p = yy * W + xx;\n      S.qx[p] += (dx - S.qx[p]) * w;\n      S.qy[p] += (dy - S.qy[p]) * w;\n    }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp, r = 2.2 + 3.6 * S.width, v = 26;\n  S.clock += ds;\n  for (const f of S.fingers) {\n    if (!moveFinger(S, f, ds)) continue;\n    const dx = cos(f.hd), dy = sin(f.hd), dist = v * ds, n = Math.max(1, Math.ceil(dist / 0.7));\n    for (let i = 0; i \u003c n; i++) {\n      f.x += (dx * dist) / n;\n      f.y += (dy * dist) / n;\n      brush(S, f.x, f.y, dx, dy, r);\n    }\n  }\n  // Every 7 seconds a palm strokes down one band 22 LEDs wide, from the\n  // top edge to the bottom in 1.6 seconds, and lays its pile straight down.\n  S.palmT += ds;\n  if (S.palmT >= 7) {\n    S.palmT -= 7;\n    S.palmY = -14;\n    S.palmX = 11 + random() * 42;\n  }\n  if (S.palmY > -50 && S.palmY \u003c H + 14) {\n    const y0 = S.palmY;\n    S.palmY += (156 / 1.6) * ds;\n    const ym = (y0 + S.palmY) / 2;\n    for (let y = max(0, floor(y0 - 12)); y \u003c= min(H - 1, S.palmY + 12); y++) {\n      const wy = 1 - sm(4, 12, Math.abs(y - ym));\n      if (wy \u003c= 0) continue;\n      for (let x = max(0, floor(S.palmX - 13)); x \u003c= min(W - 1, S.palmX + 13); x++) {\n        const w = 0.5 * wy * (1 - sm(7, 12, Math.abs(x - S.palmX))), p = y * W + x;\n        S.qx[p] += (0 - S.qx[p]) * w;\n        S.qy[p] += (PALM - S.qy[p]) * w;\n      }\n    }\n  }\n  if (S.flat > 0) {\n    S.flat -= ds;\n    for (let p = 0; p \u003c N; p++) {\n      S.qx[p] += (0 - S.qx[p]) * 0.2;\n      S.qy[p] += (PALM - S.qy[p]) * 0.2;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.width = cl(k[2], 0, 1);\n  S.pile = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on velvet that has been written on for fourteen seconds, with the\n    // next palm due 2.5 seconds in.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 420; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.palmT = 4.5;\n    S.palmY = -99;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.flat = 0.5;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, dcol = S.d;\n  // Pile length: a short nap leans 36 degrees when brushed and its sheen is\n  // broad; a long plush one leans 72 degrees with a tight bright sheen.\n  const u = (S.pile + 1) / 2, bmax = ((36 + 36 * u) * PI) / 180, pex = 3 + 4 * u;\n  const az = LAZ + SWAY * sin((2 * PI * S.clock) / 12);\n  const lx = cos(az) * cos(ELEV), ly = sin(az) * cos(ELEV), lz = sin(ELEV);\n  const h0 = S.hue + 0.42, hh = h0 - floor(h0);\n  // Orange, gold and chartreuse velvet read rust, mustard or olive at the\n  // body's level, so there the body is lifted towards 0.8 and its darker\n  // faces lean to ruby.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.24, 0.34, hh));\n  // The sheen is a pale tint of the dye.\n  hsv(h0, 0.18, 1, dcol);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const qx = S.qx[p], qy = S.qy[p];\n      let m = sqrt(qx * qx + qy * qy);\n      const ang = (m > 1e-4 ? atan2(qy, qx) : 0) + S.ga[p];\n      m = min(1, m * S.gl[p]);\n      // The fibre axis t: leaning by beta towards the pile's way.\n      const be = m * bmax, sb = sin(be), cb = cos(be);\n      const tx = sb * cos(ang), ty = sb * sin(ang), tz = cb;\n      const tl = tx * lx + ty * ly + tz * lz, sl = sqrt(max(0, 1 - tl * tl));\n      // Kajiya-Kay for a fibre: the lit side goes with the sine to the\n      // light, and a tuft seen end-on shows less of its side. The sheen is\n      // the reflection cone round the fibre crossing the eye straight ahead.\n      const diff = sl * (0.35 + 0.65 * sb);\n      const spec = pow(max(0, sl * sb - tl * cb), pex);\n      const body = (0.22 + 0.78 * diff) * S.gb[p];\n      const rich = 1 - diff;\n      hsv(h0 - (0.012 + 0.06 * warm) * rich, 0.78 + 0.2 * rich - 0.25 * spec, 1, c);\n      const vb = body * (0.8 + 0.2 * warm) + 0.5 * warm * (1 - body), vs = 0.55 * spec;\n      display.setPixel(\n        x, y,\n        round(255 * min(1, c[0] * vb + dcol[0] * vs)),\n        round(255 * min(1, c[1] * vb + dcol[1] * vs)),\n        round(255 * min(1, c[2] * vb + dcol[2] * vs)),\n      );\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Width","min":0,"max":1,"about":"The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel."},{"name":"Pile","min":-1,"max":1,"about":"The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain."}],"start":[0,2,0,0.06],"measures":{"motion":0.0497,"detail":0.0465,"edges":0.1077,"complexity":1.9034,"coverage":1,"colour":0.202,"drift":0.1599},"knobResponse":[0.6367,0.0934,0.1478,0.2049]},{"slug":"voronoi","title":"Voronoi","family":"cells","round":2,"note":"흐름을 타고 도는 씨앗마다 가장 가까운 LED 를 제 유리 색으로 칠하고, 조각 사이에 1 LED 납선이 서요. K4 로 거리를 재는 법을 바꾸면 조각 가운데 둥근 유리가 원에서 마름모를 지나 정사각형이 돼요.","idea":"Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.","buttons":"K1 tap reshuffles the glass colours.","code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-voronoi","type":"code","name":"voronoi","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of most of the glass; a few panes take the colours across the wheel from it."},{"name":"Speed","min":0.2,"max":6,"about":"How fast the current carries the seeds round."},{"name":"Cells","min":20,"max":60,"about":"How many panes, from 20 big ones to 60 small ones."},{"name":"Metric","min":0,"max":2,"about":"How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square."}],"start":[0,2,20,0.06],"measures":{"motion":2.0975,"detail":0.1621,"edges":1,"complexity":0.2058,"coverage":0.8378,"colour":0.5986,"drift":0.1196},"knobResponse":[0.4827,0.3489,0.3517,0.1477]},{"slug":"waggle-dance","title":"Waggle Dance","family":"insect","round":24,"note":"관찰 벌통의 벌집 한 장이 패널 높이로 서요. 위에 봉한 꿀, 그 아래 여덟 색 꽃가루 띠와 애벌레 방이 있고, 벌 여든 마리가 기어 다녀요. 아래쪽 빈 벌집에서는 꽃가루를 단 벌이 몸을 흔들며 8 자 춤을 추고 따르는 벌들이 둘러서요. 춤의 각도가 해에서 본 꽃밭의 방향이라 K4 를 돌리면 모든 춤이 같이 돌아요.","idea":"Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.","buttons":"K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.","code":"// ===== Patternflow pattern =====\n// Title:   Waggle Dance\n// Family:  insect\n// Idea:    Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after Karl von Frisch's reading of the honeybee's waggle dance\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1\n//\n// Knob 1: Light. Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see.\n// Knob 2: Speed. At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower.\n// Knob 3: Bees. Eighty to 240; turned up, more walk in from the sides until they hide the comb.\n// Knob 4: Sun. The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass.\n// Buttons: K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Cells six LEDs across the flats, rows five apart (a hexagon squashed by\n// four in a hundred, so every cell is drawn alike); the frame's top bar,\n// its bottom bar and the entrance slot in it.\nconst [CW, RH, TOP, BOT, NC, NR, ENX] = [6, 5, 5, 123, 13, 27, 9];\nconst Y0 = TOP + 2.5;\nconst [EMPTY, HONEY, NECTAR, POLLEN, BROOD, LARVA, EGG] = [0, 1, 2, 3, 4, 5, 6];\nconst [CRAWL, REST, DIP, FOLLOW, DANCE, HOME, EXIT] = [0, 1, 2, 3, 4, 5, 6];\n// Pollen: orange, yellow, ochre, rust, purple-grey, buff, olive, red-orange.\nconst POLLENS = [[0.95, 0.52, 0.08], [0.95, 0.8, 0.16], [0.74, 0.54, 0.17], [0.6, 0.25, 0.1],\n  [0.44, 0.37, 0.5], [0.86, 0.68, 0.36], [0.55, 0.58, 0.24], [0.9, 0.4, 0.12]];\n// Bees: a dark race, the usual, a golden one. Thorax, then the amber bands.\nconst THX = [[0.5, 0.37, 0.2], [0.78, 0.56, 0.24], [0.9, 0.68, 0.3]];\nconst AMB = [[0.62, 0.44, 0.18], [1, 0.72, 0.2], [1, 0.84, 0.32]];\nconst [DARK, HEAD, WING] = [[0.3, 0.18, 0.08], [0.14, 0.1, 0.06], [0.8, 0.84, 0.9]];\nconst [SUNC, DAYC, WARM, REDC] = [[1, 0.84, 0.56], [1, 0.94, 0.82], [1, 0.66, 0.34], [1, 0.09, 0.035]];\n// Where the flowers lie, against the main field, and how often foragers come from each.\nconst FIELDS = [0, 0, 0.95, -1.9];\n\nconst { min, max, sin, cos, abs, sqrt, floor, round, exp, atan2, PI } = Math;\nconst len = (a, b) => sqrt(a * a + b * b);\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst wrap = (a) => a - 2 * PI * round(a / (2 * PI));\nconst rnd = () => Math.random();\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Distance from a cell's centre in its own hexagon, 3 on the wall.\nconst hexd = (dx, dy) => max(abs(dx), abs(0.5 * dx + 0.9 * dy), abs(0.5 * dx - 0.9 * dy));\nconst cellX = (r, c) => CW * (c - 1) + (r & 1 ? 3.5 : 0.5);\nconst cellY = (r) => Y0 + (r - 1) * RH;\nconst cap = (t) => t === BROOD || t === HONEY;\n\n// Which cell each LED sits in, and where in it.\nfunction grid(S) {\n  for (let y = TOP; y \u003c BOT; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r0 = round((y + 0.5 - Y0) / RH) + 1;\n      let [best, next] = [99, 99];\n      const p = y * W + x;\n      for (let r = max(0, r0 - 1); r \u003c= min(NR - 1, r0 + 1); r++) {\n        const off = r & 1 ? 3.5 : 0.5;\n        const c0 = round((x + 0.5 - off) / CW) + 1;\n        for (let c = max(0, c0 - 1); c \u003c= min(NC - 1, c0 + 1); c++) {\n          const dx = x + 0.5 - cellX(r, c);\n          const dy = y + 0.5 - cellY(r);\n          const d = hexd(dx, dy);\n          if (d \u003c best) {\n            next = best;\n            S.cid2[p] = S.cid[p];\n            best = d;\n            S.cid[p] = r * NC + c;\n            [S.hd[p], S.dx[p], S.dy[p]] = [d, dx, dy];\n          } else if (d \u003c next) {\n            next = d;\n            S.cid2[p] = r * NC + c;\n          }\n        }\n      }\n    }\n}\n\n// Honey over the top and down the corners, a band of pollen, brood below.\nfunction layout(S) {\n  for (let r = 0; r \u003c NR; r++)\n    for (let c = 0; c \u003c NC; c++) {\n      const i = r * NC + c;\n      const [x, y] = [cellX(r, c), cellY(r)];\n      const e = len((x - 32) / 33, (y - 70) / 28) + 0.05 * (sin(x * 0.21 + y * 0.13) + sin(y * 0.29 - x * 0.17 + 2));\n      const u = rnd();\n      let t;\n      if (y \u003c 24 || (e > 1.28 && y \u003c 64)) t = u \u003c 0.82 ? HONEY : u \u003c 0.95 ? NECTAR : EMPTY;\n      else if (e > 1 && y \u003c 72) t = u \u003c 0.62 ? POLLEN : u \u003c 0.78 ? NECTAR : EMPTY;\n      else if (e \u003c 0.72) t = u \u003c 0.68 ? BROOD : u \u003c 0.78 ? LARVA : u \u003c 0.81 ? EGG : EMPTY;\n      else if (e \u003c 1) t = u \u003c 0.34 ? LARVA : u \u003c 0.48 ? EGG : u \u003c 0.64 ? BROOD : u \u003c 0.68 ? POLLEN : EMPTY;\n      else t = u \u003c 0.12 ? POLLEN : u \u003c 0.27 ? NECTAR : EMPTY;\n      [S.type[i], S.age[i], S.tint[i], S.gap[i], S.pol[i]] = [t, rnd(), rnd(), rnd() * 6.283, floor(rnd() * 8)];\n    }\n}\n\n// Each LED's colour as it would be in white light, and how much of the\n// sun reaches it: cell bottoms stay in shadow.\nfunction paint(S) {\n  const { base, expo } = S;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    let r, g, b;\n    let ex = 1;\n    let dim = 0.66;\n    if (y \u003c TOP || y >= BOT) {\n      // Pine, the grain running along the bar, a groove where it meets the comb.\n      const gr = 0.8 + 0.2 * sin(x * 0.23 + 2 * sin(x * 0.07 + y * 1.3));\n      const edge = y === TOP - 1 || y === BOT ? 0.55 : 1;\n      const k = gr * edge * (0.9 + 0.1 * hash(p, 5));\n      [r, g, b] = [0.6 * k, 0.42 * k, 0.24 * k];\n      if (y > BOT + 1 && y \u003c H - 1 && abs(x + 0.5 - ENX) \u003c 5) [r, g, b] = [0.02, 0.015, 0.01];\n    } else {\n      const [i, d, dx, dy] = [S.cid[p], S.hd[p], S.dx[p], S.dy[p]];\n      const [t, tn, rr, lit] = [S.type[i], S.tint[i], len(dx, dy), -(dx + dy) / 3];\n      if (t === HONEY) {\n        dim = 1;\n        const k = (1 - 0.12 * (d / 2.6) ** 2 + 0.06 * lit) * (0.95 + 0.06 * hash(p, 1));\n        [r, g, b] = [(1 - 0.04 * tn) * k, (0.88 - 0.16 * tn) * k, (0.6 - 0.26 * tn) * k];\n      } else if (t === NECTAR) {\n        // Nectar: dark amber down in the cell, a bright meniscus round it, and a glint.\n        const f = (0.08 + 0.92 * sm(1.5, 2.4, d)) * (0.75 + 0.3 * tn);\n        [r, g, b] = [0.07 + 0.62 * f, 0.03 + 0.36 * f, 0.006 + 0.06 * f];\n        if (abs(dx + 1) \u003c 0.6 && abs(dy + 1) \u003c 0.7) [r, g, b] = [0.95, 0.9, 0.74];\n        ex = 0.6;\n      } else if (t === POLLEN) {\n        const c = POLLENS[S.pol[i]];\n        dim = 0.8;\n        // Packed down in the cell, its inside wall in shadow round it.\n        const k = (0.8 + 0.25 * tn) * (1 - 0.85 * sm(1.5, 2.3, d));\n        [r, g, b] = c.map((v, n) => v * k * (0.82 + 0.3 * hash(p, 2 + n)));\n        ex = 0.8;\n      } else if (t === BROOD) {\n        const k = (1 - 0.32 * (rr / 2.7) ** 2 + 0.1 * lit) * (hash(p, 6) \u003c 0.14 ? 0.78 : 1) * (0.9 + 0.15 * tn);\n        [r, g, b] = [0.8 * k, 0.68 * k, 0.5 * k];\n      } else {\n        // An open cell: dark at the bottom, its lower inside wall catching the light.\n        const lip = sm(1.6, 2.4, d) * (dy > 0.5 ? 1 : 0.3);\n        const k = (0.04 + 0.1 * lip) * (0.75 + 0.5 * tn);\n        [r, g, b] = [k, k * 0.68, k * 0.38];\n        ex = 0.2 + 0.8 * lip;\n        if (t === LARVA) {\n          // The larva curled in a C on its bed of jelly, bigger as it grows.\n          const a = S.age[i];\n          const [R, th] = [0.4 + 1.1 * a, 0.45 + 0.55 * a];\n          const ang = wrap(atan2(dy, dx) - S.gap[i]);\n          let on = a \u003c 0.3 ? sm(1.2, 0.5, rr) : sm(th + 0.3, th - 0.3, abs(rr - R)) * sm(0.5, 1, abs(ang));\n          if (rr \u003c 1.9) [r, g, b] = [r + 0.18, g + 0.17, b + 0.14];\n          const sh = 0.82 + 0.18 * clamp(lit + 0.5, 0, 1) + 0.05 * sin(ang * 5);\n          r += (0.97 * sh - r) * on;\n          g += (0.94 * sh - g) * on;\n          b += (0.85 * sh - b) * on;\n          ex += (0.9 - ex) * on;\n        } else if (t === EGG && rr \u003c 0.7) [r, g, b] = [0.86, 0.85, 0.78];\n      }\n      // The walls: pale wax round the honey, the rims of open cells lit,\n      // and a dark seam where two brood caps meet.\n      const w = sm(2.4, 2.6, d);\n      if (w > 0) {\n        const t2 = S.type[S.cid2[p]];\n        const pale = t === HONEY || t === NECTAR ? 1 : 0;\n        const seam = (t === BROOD || t2 === BROOD) && cap(t) && cap(t2) ? 0.15 : 1;\n        // Light from above rakes the slanted walls; the upright ones stand side on to it.\n        const k = (0.85 + 0.3 * hash(p, 8)) * seam * (!pale && abs(dx) > 2.6 ? 0.45 : 1);\n        r += ((0.34 + 0.18 * pale) * k - r) * w;\n        g += ((0.24 + 0.15 * pale) * k - g) * w;\n        b += ((0.11 + 0.08 * pale) * k - b) * w;\n        ex += ((seam \u003c 1 ? 0.15 : 1) - ex) * w;\n      }\n    }\n    // The comb sits back in the hive's shade; the bees on it catch the light.\n    base[q] = r * dim;\n    base[q + 1] = g * dim;\n    base[q + 2] = b * dim;\n    expo[p] = ex;\n  }\n}\n\n// The window throws its four panes of sun on the glass; they slide and lean with the sun.\nfunction sunPatch(S, s) {\n  const [cx, cy, sh] = [32 + 22 * s, 74 - 6 * abs(s), -0.5 * s];\n  for (let p = 0; p \u003c N; p++) {\n    const v = ((p / W) | 0) + 0.5 - cy;\n    const u = (p % W) + 0.5 - cx - sh * v;\n    let m = sm(22, 16, abs(u)) * sm(40, 33, abs(v));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(u));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(v + 5));\n    S.sun[p] = m;\n  }\n  S.sunK = s;\n}\n\nfunction newBee(S, x, y, h) {\n  const u = rnd();\n  const b = { x, y, h, m: CRAWL, t: rnd() * 3, v: 2.6 + 2.6 * rnd(), s: 1.12 + 0.14 * rnd(), tone: u \u003c 0.18 ? 0 : u \u003c 0.82 ? 1 : 2, ph: rnd() * 6.28, w: 0, wag: 0, wp: 0 };\n  S.bees.push(b);\n  return b;\n}\n\n// A bee to the dance floor on the lower comb, clear of the other dances.\nfunction spot(S) {\n  let best = [32, 104];\n  let far = -1;\n  for (let k = 0; k \u003c 24; k++) {\n    const x = 12 + 40 * rnd();\n    const y = 80 + 33 * rnd();\n    // The lower the better, near the entrance, but well clear of the others.\n    const d = min(24, ...S.dances.map((D) => len(D.cx - x, D.cy - y))) + 0.1 * y;\n    if (d > far) [far, best] = [d, [x, y]];\n  }\n  return best;\n}\n\nfunction newDance(S, b, vig) {\n  const [cx, cy] = spot(S);\n  // A forager from a rich patch runs longer, keeps at it and draws more followers.\n  const D = { b, cx, cy, fl: FIELDS[floor(rnd() * 4)] + 0.12 * (rnd() - 0.5), L: vig ? 11 : 8 + 2.5 * rnd(), tw: vig ? 1.25 : 0.85 + 0.3 * rnd(),\n    tr: vig ? 0.9 : 1 + 0.3 * rnd(), tau: 0, side: rnd() \u003c 0.5 ? -1 : 1, n: vig ? 26 : 9 + floor(10 * rnd()), amp: vig ? 1 : 0.65 + 0.2 * rnd(),\n    want: vig ? 10 : 6 + floor(3 * rnd()), on: false, foll: [], rec: 0, pc: floor(rnd() * 3) };\n  D.th = D.fl - S.sunA;\n  b.D = D;\n  S.dances.push(D);\n  return D;\n}\n\n// The bees nearest the dance turn and gather round it.\nfunction recruit(S, D, snap) {\n  const free = S.bees.filter((b) => (b.m === CRAWL || b.m === REST) && len(b.x - D.cx, b.y - D.cy) \u003c 24);\n  free.sort((a, b) => len(a.x - D.cx, a.y - D.cy) - len(b.x - D.cx, b.y - D.cy));\n  for (const b of free) {\n    if (D.foll.length >= D.want) break;\n    Object.assign(b, { m: FOLLOW, D, a: atan2(b.x - D.cx, -(b.y - D.cy)), t: 5 + 10 * rnd() });\n    D.foll.push(b);\n    if (snap) {\n      const R = D.L / 2 + 3.4;\n      b.x = D.cx + R * sin(b.a);\n      b.y = D.cy - R * cos(b.a);\n      b.h = b.a + PI;\n    }\n  }\n}\n\nfunction seek(b, tx, ty, sp, dt) {\n  const [dx, dy] = [tx - b.x, ty - b.y];\n  const r = len(dx, dy);\n  if (r > 0.25) {\n    const want = atan2(dx, -dy);\n    const e = wrap(want - b.h);\n    b.h += clamp(e, -5 * dt, 5 * dt);\n    const st = min(r, sp * dt) * max(0.15, cos(e));\n    b.x += sin(b.h) * st;\n    b.y -= cos(b.h) * st;\n  }\n  return r;\n}\n\nfunction stepDance(S, D, dt) {\n  const b = D.b;\n  D.th += clamp(wrap(D.fl - S.sunA - D.th), -1.5 * dt, 1.5 * dt);\n  const [ux, uy] = [sin(D.th), -cos(D.th)];\n  if (!D.on) {\n    // The forager hurries up from the entrance to where she will dance.\n    b.m = HOME;\n    if (seek(b, D.cx - (ux * D.L) / 2, D.cy - (uy * D.L) / 2, D.n > 20 ? 13 : 9, dt) \u003c 1.2) {\n      D.on = true;\n      b.m = DANCE;\n      recruit(S, D, false);\n    }\n    return;\n  }\n  D.tau += dt;\n  if (D.tau >= D.tw + D.tr) {\n    D.tau -= D.tw + D.tr;\n    D.side = -D.side;\n    if (--D.n \u003c= 0) {\n      // Done: she goes back out, and some of her followers go after the flowers.\n      [D.gone, b.m, b.wag] = [true, EXIT, 0];\n      for (const f of D.foll) [f.m, f.t] = [rnd() \u003c 0.4 ? EXIT : CRAWL, 1 + 2 * rnd()];\n      return;\n    }\n  }\n  let want;\n  if (D.tau \u003c D.tw) {\n    const f = D.tau / D.tw - 0.5;\n    b.x = D.cx + ux * D.L * f;\n    b.y = D.cy + uy * D.L * f;\n    want = D.th;\n    b.wag = D.amp;\n    b.wp += dt * 2 * PI * 13;\n  } else {\n    const s = (D.tau - D.tw) / D.tr;\n    const ps = D.side * PI * s;\n    const [rx, ry] = [ux * cos(ps) - uy * sin(ps), ux * sin(ps) + uy * cos(ps)];\n    b.x = D.cx + (rx * D.L) / 2;\n    b.y = D.cy + (ry * D.L) / 2;\n    want = atan2(-D.side * ry, -D.side * rx);\n    b.wag = 0;\n  }\n  b.h += clamp(wrap(want - b.h), -14 * dt, 14 * dt);\n  // Followers keep their place round her, turned to face her, and drift with her.\n  D.foll = D.foll.filter((f) => f.m === FOLLOW && f.D === D);\n  D.rec -= dt;\n  if (D.rec \u003c= 0) {\n    D.rec = 1.5;\n    if (D.foll.length \u003c D.want) recruit(S, D, false);\n  }\n  const da = atan2(b.x - D.cx, -(b.y - D.cy));\n  for (const f of D.foll) {\n    f.a += dt * 0.35 * sin(wrap(da - f.a));\n    const R = D.L / 2 + 3.4 + 0.4 * sin(S.t * 2 + f.ph);\n    if (seek(f, D.cx + R * sin(f.a), D.cy - R * cos(f.a), 6, dt) \u003c 1.2) f.h += clamp(wrap(atan2(b.x - f.x, -(b.y - f.y)) - f.h), -6 * dt, 6 * dt);\n    if ((f.t -= dt) \u003c= 0) [f.m, f.t, f.h] = [CRAWL, 1 + 2 * rnd(), f.h + PI];\n  }\n}\n\nfunction crawl(S, b, dt) {\n  b.w += (rnd() - 0.5) * 10 * sqrt(dt);\n  b.w *= 1 - min(1, 1.5 * dt);\n  let want = null;\n  const ex = b.x \u003c 4 ? 1 : b.x > W - 4 ? -1 : 0;\n  const ey = b.y \u003c TOP + 4 ? 1 : b.y > BOT - 4 ? -1 : 0;\n  if (ex || ey) want = atan2(ex, -ey);\n  b.h += b.w * dt;\n  if (want !== null) b.h += clamp(wrap(want - b.h), -3 * dt, 3 * dt);\n  const st = b.v * dt;\n  b.x += sin(b.h) * st;\n  b.y -= cos(b.h) * st;\n}\n\nfunction step(S, dt) {\n  const { bees } = S;\n  for (const b of bees) {\n    const m = b.m;\n    if (m === DANCE || m === HOME || m === FOLLOW) continue;\n    if (m === EXIT) {\n      if (seek(b, ENX, BOT + 1.5, 7, dt) \u003c 1.5) b.out = true;\n      continue;\n    }\n    // Others give the dancer and her followers room.\n    for (const D of S.dances) {\n      const [dx, dy] = [b.x - D.cx, b.y - D.cy];\n      const r = len(dx, dy);\n      if (D.on && r \u003c D.L / 2 + 9) {\n        if (m !== CRAWL) b.t = 0;\n        b.x += (dx / (r + 0.01)) * 4 * dt;\n        b.y += (dy / (r + 0.01)) * 4 * dt;\n        b.h += clamp(wrap(atan2(dx, -dy) - b.h), -4 * dt, 4 * dt);\n      }\n    }\n    if (m === CRAWL) crawl(S, b, dt);\n    else if (m === REST) b.h += sin(S.t * 6 + b.ph) * 0.5 * dt;\n    if ((b.t -= dt) > 0) continue;\n    // Backing out of a cell, she turns away.\n    if (m === DIP) [b.x, b.y, b.h] = [b.x - sin(b.h) * 1.5, b.y + cos(b.h) * 1.5, b.h + PI * (0.6 + 0.8 * rnd())];\n    const u = rnd();\n    b.m = CRAWL;\n    b.t = 1 + 3 * rnd();\n    if (u \u003c 0.28) [b.m, b.t] = [REST, 0.8 + 2.5 * rnd()];\n    else if (u \u003c 0.5 && m !== DIP) {\n      // Head first into a cell: to feed a larva, take nectar or pack pollen.\n      const hx = round(b.x + sin(b.h) * 2.2 - 0.5);\n      const hy = round(b.y - cos(b.h) * 2.2 - 0.5);\n      if (hx >= 0 && hx \u003c W && hy >= TOP + 2 && hy \u003c BOT - 2) {\n        const i = S.cid[hy * W + hx];\n        const t = S.type[i];\n        if (t !== HONEY && t !== BROOD) {\n          const r = floor(i / NC);\n          [b.m, b.t] = [DIP, 2 + 4 * rnd()];\n          b.x = cellX(r, i % NC) - sin(b.h) * 1.5;\n          b.y = cellY(r) + cos(b.h) * 1.5;\n        }\n      }\n    }\n  }\n  for (const D of S.dances) stepDance(S, D, dt);\n  S.dances = S.dances.filter((D) => !D.gone);\n  for (const b of bees) if (b.D && (b.D.gone || (b.m !== FOLLOW && b.m !== DANCE && b.m !== HOME))) b.D = null;\n  // Bees shoulder each other apart; those still at a cell or dancing stand firm.\n  for (const a of bees) {\n    if (a.m === REST || a.m === DIP || a.m === DANCE) continue;\n    for (const b of bees) {\n      const dx = a.x - b.x;\n      const dy = a.y - b.y;\n      if (abs(dx) > 3.6 || abs(dy) > 3.6 || b === a) continue;\n      const r = len(dx, dy);\n      if (r \u003c 3.6 && r > 0.01) {\n        a.x += (dx / r) * (3.6 - r) * 0.25;\n        a.y += (dy / r) * (3.6 - r) * 0.25;\n      }\n    }\n  }\n  S.bees = bees.filter((b) => !b.out);\n}\n\nexport function setup(params) {\n  const S = { t: 0, started: false, sunA: 0, sunK: 9, next: 6, add: 0, c0: 4.2, c1: 8.5, cd: 0.55, bees: [], dances: [] };\n  for (const k of [\"cid\", \"cid2\"]) S[k] = new Int16Array(N);\n  for (const k of [\"hd\", \"dx\", \"dy\", \"expo\", \"X\", \"amb\", \"pool\", \"sun\"]) S[k] = new Float32Array(N);\n  for (const k of [\"base\", \"A\", \"jit\"]) S[k] = new Float32Array(N * 3);\n  for (const k of [\"age\", \"tint\", \"gap\"]) S[k] = new Float32Array(NR * NC);\n  for (const k of [\"type\", \"pol\"]) S[k] = new Uint8Array(NR * NC);\n  grid(S);\n  layout(S);\n  paint(S);\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p % W, (p / W) | 0];\n    S.amb[p] = 0.74 + 0.2 * (1 - y / H) + 0.03 * sin(x * 0.11 + y * 0.05) - 0.12 * ((x - 31.5) / 32) ** 4;\n    S.pool[p] = 0.42 + 0.6 * exp(-((x - 40) ** 2 + (y - 74) ** 2) / 3000);\n    const j = 0.94 + 0.12 * hash(p, 19);\n    for (let c = 0; c \u003c 3; c++) S.jit[p * 3 + c] = j * (0.97 + 0.06 * hash(p, 20 + c));\n  }\n  params.s = S;\n}\n\nfunction start(S, n) {\n  // Bees thickest on the brood, two dances already going.\n  for (let k = 0; k \u003c n; k++) {\n    let x, y;\n    for (let j = 0; j \u003c 4; j++) {\n      x = 2 + 60 * rnd();\n      y = TOP + 3 + (BOT - TOP - 6) * rnd();\n      if (rnd() \u003c 0.35 + 0.65 * sm(30, 70, y)) break;\n    }\n    newBee(S, x, y, rnd() * 6.28);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const b = newBee(S, 0, 0, 0);\n    const D = newDance(S, b, false);\n    Object.assign(D, { fl: k ? 0.08 : -0.1, cx: k ? 20 : 43, cy: k ? 111 : 102, on: true, tau: rnd() * (D.tw + D.tr), rec: 1.5 });\n    D.th = D.fl - S.sunA;\n    b.m = DANCE;\n    stepDance(S, D, 0);\n    b.h = D.tau \u003c D.tw ? D.th : b.h;\n    recruit(S, D, true);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.light = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  const want = round(clamp(k[2], 80, 240));\n  const sk = clamp(k[3], -1, 1);\n  S.sunA = sk * PI;\n  if (abs(sk - S.sunK) > 0.002) sunPatch(S, sk);\n  if (!S.started) {\n    S.started = true;\n    start(S, want);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  // Clouds cross the sun now and then; the first one early.\n  if (S.t > S.c1 + 1.5) {\n    S.c0 = S.t + 8 + 20 * rnd();\n    S.c1 = S.c0 + 3 + 6 * rnd();\n    S.cd = 0.4 + 0.5 * rnd();\n  }\n  S.cloud = 1 - S.cd * sm(S.c0, S.c0 + 1.5, S.t) * sm(S.c1 + 1.5, S.c1, S.t);\n  const vig = input.btnPressed && input.btnPressed[0];\n  if ((S.next -= d) \u003c= 0 || vig) {\n    if (S.dances.length \u003c (vig ? 4 : 3)) {\n      const b = newBee(S, ENX + 4 * (rnd() - 0.5), BOT + 1, 0);\n      b.m = HOME;\n      newDance(S, b, vig);\n    }\n    if (!vig) S.next = 5 + 8 * rnd();\n  }\n  // Bees walk in from the sides, or go out at the entrance, to match the knob.\n  let ord = 0;\n  for (const b of S.bees) if (b.m \u003c= FOLLOW) ord++;\n  if ((S.add -= dt) \u003c= 0) {\n    S.add = 0.1;\n    if (ord \u003c want) {\n      const l = rnd() \u003c 0.5;\n      newBee(S, l ? -3 : W + 3, TOP + 8 + (BOT - TOP - 16) * rnd(), l ? PI / 2 : -PI / 2).t = 1.5;\n    } else if (ord > want + 2) {\n      const b = S.bees.find((b) => b.m === CRAWL);\n      if (b) b.m = EXIT;\n    }\n  }\n  step(S, d);\n}\n\n// One bee into the albedo: her body worked out on a 12 x 12 patch first,\n// then her shadow a step down and right, head, thorax, banded abdomen, wings.\nconst PC = new Float32Array(144);\nconst PP = new Uint8Array(144);\nfunction bee(S, b) {\n  const { A, X } = S;\n  const [s, fx, fy, dip, wg] = [b.s, sin(b.h), -cos(b.h), b.m === DIP, b.wag > 0];\n  const wag = wg ? b.wag * sin(b.wp) : b.m === REST ? 0.15 * sin(S.t * 9 + b.ph) : 0;\n  const [bl, th, am] = [wg ? 0.4 : 0, THX[b.tone], AMB[b.tone]];\n  const shim = 0.24 + 0.14 * sin(S.t * 2.3 + b.ph + b.x * 0.3);\n  // A box round her, the whole patch for a dancer and her blur.\n  const ax = wg ? 5 : s * (3.2 * abs(fx) + 1.9 * abs(fy)) + 0.5;\n  const ay = wg ? 5 : s * (3.2 * abs(fy) + 1.9 * abs(fx)) + 0.5;\n  const [x0, y0] = [floor(b.x - ax), floor(b.y - ay)];\n  const nw = min(12, floor(b.x + ax) - x0 + 2);\n  const nh = min(12, floor(b.y + ay) - y0 + 2);\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const X0 = x0 + i + 0.5 - b.x;\n      const Y0 = y0 + j + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      PC[k] = shape(u, v, s, dip, bl);\n      PP[k] = PART;\n    }\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      const c = PC[k];\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      const q = p * 3;\n      const sh = i && j ? PC[k - nw - 1] : 0;\n      if (sh > 0) {\n        const f = 1 - 0.7 * sh * (1 - c);\n        A[q] *= f;\n        A[q + 1] *= f;\n        A[q + 2] *= f;\n      }\n      const X0 = px + 0.5 - b.x;\n      const Y0 = py + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      // A waggling dancer buzzes her wings into a pale blur round her.\n      let wa = wg ? 0.55 * clamp(1.6 - len((u + 0.7) / 1.5, v / 1.7), 0, 1) : 0;\n      if (c \u003c= 0 && wa \u003c= 0) continue;\n      const pt = PP[k];\n      const col = pt === 1 ? HEAD : pt === 2 ? th : null;\n      const st = u > -0.85 ? 1 : u > -1.35 ? 0 : u > -1.9 ? 0.8 : 0;\n      if (u > -2.2 && u \u003c 0.3 && abs(v) > 0.35 && abs(v) \u003c 1.15) wa = max(wa, shim);\n      const a = max(c, wa);\n      for (let n = 0; n \u003c 3; n++) {\n        let e = col ? col[n] : DARK[n] + (am[n] - DARK[n]) * st;\n        e += (WING[n] - e) * wa;\n        A[q + n] += (e - A[q + n]) * a;\n      }\n      X[p] += (1 - X[p]) * a;\n    }\n  // A forager home from the field carries her pollen loads on her hind legs.\n  if (b.D && (b.m === DANCE || b.m === HOME)) {\n    const c = POLLENS[b.D.pc];\n    for (const sd of [-1, 1]) {\n      const px = round(b.x + s * (-0.7 * fx - sd * 1.25 * fy) - 0.5);\n      const py = round(b.y + s * (-0.7 * fy + sd * 1.25 * fx) - 0.5);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      [A[q], A[q + 1], A[q + 2], X[py * W + px]] = [...c, 1];\n    }\n  }\n}\n\n// Coverage of a bee's body at (u along, v across) in body lengths of\n// about five LEDs; PART says which piece.\nlet PART = 0;\nfunction shape(u, v, s, dip, bl) {\n  let c = clamp((1 - len((u + 1.3) / 1.5, v / (1.12 + bl))) * 1.2 * s + 0.5, 0, 1);\n  PART = 3;\n  if (!dip || u \u003c 0.3) {\n    const k = clamp((1 - len((u - 0.5) / 0.8, v)) * 0.9 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 2];\n  }\n  if (!dip) {\n    const k = clamp((1 - len((u - 1.65) / 0.6, v / 0.75)) * 0.7 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 1];\n  }\n  return c;\n}\n\nconst knee = (c) => (c \u003c 190 ? c : 190 + 65 * (1 - exp(-(c - 190) / 65)));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { A, X, base, expo, amb, sun, pool, jit } = S;\n  A.set(base);\n  X.set(expo);\n  for (const b of S.bees) if (b.m !== DANCE) bee(S, b);\n  for (const b of S.bees) if (b.m === DANCE) bee(S, b);\n  // The curtain closes on the sun first; the room light goes from daylight\n  // to a warm lamp over the hive by 0.5, and from that to the red lamp.\n  const L = S.light;\n  const [w, rd, pw] = [sm(0, 0.5, L), sm(0.5, 1, L), sm(0.15, 0.6, L)];\n  const dc = [0, 1, 2].map((c) => (DAYC[c] + (WARM[c] - DAYC[c]) * w + (REDC[c] - WARM[c]) * rd) * (1 - 0.1 * w - 0.1 * rd) * 255);\n  const sk = 0.9 * S.cloud * (1 - sm(0, 0.4, L)) * 255;\n  const o = [0, 0, 0];\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const a = amb[p] + (pool[p] - amb[p]) * pw;\n    const s = sun[p] * X[p] * sk;\n    for (let c = 0; c \u003c 3; c++) o[c] = knee(A[q + c] * (a * dc[c] + s * SUNC[c]) * jit[q + c]) | 0;\n    display.setPixel(p % W, (p / W) | 0, o[0], o[1], o[2]);\n  }\n}\n","layer":{"id":"layer-waggle-dance","type":"code","name":"waggle-dance","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Waggle Dance\n// Family:  insect\n// Idea:    Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after Karl von Frisch's reading of the honeybee's waggle dance\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1\n//\n// Knob 1: Light. Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see.\n// Knob 2: Speed. At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower.\n// Knob 3: Bees. Eighty to 240; turned up, more walk in from the sides until they hide the comb.\n// Knob 4: Sun. The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass.\n// Buttons: K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Cells six LEDs across the flats, rows five apart (a hexagon squashed by\n// four in a hundred, so every cell is drawn alike); the frame's top bar,\n// its bottom bar and the entrance slot in it.\nconst [CW, RH, TOP, BOT, NC, NR, ENX] = [6, 5, 5, 123, 13, 27, 9];\nconst Y0 = TOP + 2.5;\nconst [EMPTY, HONEY, NECTAR, POLLEN, BROOD, LARVA, EGG] = [0, 1, 2, 3, 4, 5, 6];\nconst [CRAWL, REST, DIP, FOLLOW, DANCE, HOME, EXIT] = [0, 1, 2, 3, 4, 5, 6];\n// Pollen: orange, yellow, ochre, rust, purple-grey, buff, olive, red-orange.\nconst POLLENS = [[0.95, 0.52, 0.08], [0.95, 0.8, 0.16], [0.74, 0.54, 0.17], [0.6, 0.25, 0.1],\n  [0.44, 0.37, 0.5], [0.86, 0.68, 0.36], [0.55, 0.58, 0.24], [0.9, 0.4, 0.12]];\n// Bees: a dark race, the usual, a golden one. Thorax, then the amber bands.\nconst THX = [[0.5, 0.37, 0.2], [0.78, 0.56, 0.24], [0.9, 0.68, 0.3]];\nconst AMB = [[0.62, 0.44, 0.18], [1, 0.72, 0.2], [1, 0.84, 0.32]];\nconst [DARK, HEAD, WING] = [[0.3, 0.18, 0.08], [0.14, 0.1, 0.06], [0.8, 0.84, 0.9]];\nconst [SUNC, DAYC, WARM, REDC] = [[1, 0.84, 0.56], [1, 0.94, 0.82], [1, 0.66, 0.34], [1, 0.09, 0.035]];\n// Where the flowers lie, against the main field, and how often foragers come from each.\nconst FIELDS = [0, 0, 0.95, -1.9];\n\nconst { min, max, sin, cos, abs, sqrt, floor, round, exp, atan2, PI } = Math;\nconst len = (a, b) => sqrt(a * a + b * b);\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst wrap = (a) => a - 2 * PI * round(a / (2 * PI));\nconst rnd = () => Math.random();\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Distance from a cell's centre in its own hexagon, 3 on the wall.\nconst hexd = (dx, dy) => max(abs(dx), abs(0.5 * dx + 0.9 * dy), abs(0.5 * dx - 0.9 * dy));\nconst cellX = (r, c) => CW * (c - 1) + (r & 1 ? 3.5 : 0.5);\nconst cellY = (r) => Y0 + (r - 1) * RH;\nconst cap = (t) => t === BROOD || t === HONEY;\n\n// Which cell each LED sits in, and where in it.\nfunction grid(S) {\n  for (let y = TOP; y \u003c BOT; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r0 = round((y + 0.5 - Y0) / RH) + 1;\n      let [best, next] = [99, 99];\n      const p = y * W + x;\n      for (let r = max(0, r0 - 1); r \u003c= min(NR - 1, r0 + 1); r++) {\n        const off = r & 1 ? 3.5 : 0.5;\n        const c0 = round((x + 0.5 - off) / CW) + 1;\n        for (let c = max(0, c0 - 1); c \u003c= min(NC - 1, c0 + 1); c++) {\n          const dx = x + 0.5 - cellX(r, c);\n          const dy = y + 0.5 - cellY(r);\n          const d = hexd(dx, dy);\n          if (d \u003c best) {\n            next = best;\n            S.cid2[p] = S.cid[p];\n            best = d;\n            S.cid[p] = r * NC + c;\n            [S.hd[p], S.dx[p], S.dy[p]] = [d, dx, dy];\n          } else if (d \u003c next) {\n            next = d;\n            S.cid2[p] = r * NC + c;\n          }\n        }\n      }\n    }\n}\n\n// Honey over the top and down the corners, a band of pollen, brood below.\nfunction layout(S) {\n  for (let r = 0; r \u003c NR; r++)\n    for (let c = 0; c \u003c NC; c++) {\n      const i = r * NC + c;\n      const [x, y] = [cellX(r, c), cellY(r)];\n      const e = len((x - 32) / 33, (y - 70) / 28) + 0.05 * (sin(x * 0.21 + y * 0.13) + sin(y * 0.29 - x * 0.17 + 2));\n      const u = rnd();\n      let t;\n      if (y \u003c 24 || (e > 1.28 && y \u003c 64)) t = u \u003c 0.82 ? HONEY : u \u003c 0.95 ? NECTAR : EMPTY;\n      else if (e > 1 && y \u003c 72) t = u \u003c 0.62 ? POLLEN : u \u003c 0.78 ? NECTAR : EMPTY;\n      else if (e \u003c 0.72) t = u \u003c 0.68 ? BROOD : u \u003c 0.78 ? LARVA : u \u003c 0.81 ? EGG : EMPTY;\n      else if (e \u003c 1) t = u \u003c 0.34 ? LARVA : u \u003c 0.48 ? EGG : u \u003c 0.64 ? BROOD : u \u003c 0.68 ? POLLEN : EMPTY;\n      else t = u \u003c 0.12 ? POLLEN : u \u003c 0.27 ? NECTAR : EMPTY;\n      [S.type[i], S.age[i], S.tint[i], S.gap[i], S.pol[i]] = [t, rnd(), rnd(), rnd() * 6.283, floor(rnd() * 8)];\n    }\n}\n\n// Each LED's colour as it would be in white light, and how much of the\n// sun reaches it: cell bottoms stay in shadow.\nfunction paint(S) {\n  const { base, expo } = S;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    let r, g, b;\n    let ex = 1;\n    let dim = 0.66;\n    if (y \u003c TOP || y >= BOT) {\n      // Pine, the grain running along the bar, a groove where it meets the comb.\n      const gr = 0.8 + 0.2 * sin(x * 0.23 + 2 * sin(x * 0.07 + y * 1.3));\n      const edge = y === TOP - 1 || y === BOT ? 0.55 : 1;\n      const k = gr * edge * (0.9 + 0.1 * hash(p, 5));\n      [r, g, b] = [0.6 * k, 0.42 * k, 0.24 * k];\n      if (y > BOT + 1 && y \u003c H - 1 && abs(x + 0.5 - ENX) \u003c 5) [r, g, b] = [0.02, 0.015, 0.01];\n    } else {\n      const [i, d, dx, dy] = [S.cid[p], S.hd[p], S.dx[p], S.dy[p]];\n      const [t, tn, rr, lit] = [S.type[i], S.tint[i], len(dx, dy), -(dx + dy) / 3];\n      if (t === HONEY) {\n        dim = 1;\n        const k = (1 - 0.12 * (d / 2.6) ** 2 + 0.06 * lit) * (0.95 + 0.06 * hash(p, 1));\n        [r, g, b] = [(1 - 0.04 * tn) * k, (0.88 - 0.16 * tn) * k, (0.6 - 0.26 * tn) * k];\n      } else if (t === NECTAR) {\n        // Nectar: dark amber down in the cell, a bright meniscus round it, and a glint.\n        const f = (0.08 + 0.92 * sm(1.5, 2.4, d)) * (0.75 + 0.3 * tn);\n        [r, g, b] = [0.07 + 0.62 * f, 0.03 + 0.36 * f, 0.006 + 0.06 * f];\n        if (abs(dx + 1) \u003c 0.6 && abs(dy + 1) \u003c 0.7) [r, g, b] = [0.95, 0.9, 0.74];\n        ex = 0.6;\n      } else if (t === POLLEN) {\n        const c = POLLENS[S.pol[i]];\n        dim = 0.8;\n        // Packed down in the cell, its inside wall in shadow round it.\n        const k = (0.8 + 0.25 * tn) * (1 - 0.85 * sm(1.5, 2.3, d));\n        [r, g, b] = c.map((v, n) => v * k * (0.82 + 0.3 * hash(p, 2 + n)));\n        ex = 0.8;\n      } else if (t === BROOD) {\n        const k = (1 - 0.32 * (rr / 2.7) ** 2 + 0.1 * lit) * (hash(p, 6) \u003c 0.14 ? 0.78 : 1) * (0.9 + 0.15 * tn);\n        [r, g, b] = [0.8 * k, 0.68 * k, 0.5 * k];\n      } else {\n        // An open cell: dark at the bottom, its lower inside wall catching the light.\n        const lip = sm(1.6, 2.4, d) * (dy > 0.5 ? 1 : 0.3);\n        const k = (0.04 + 0.1 * lip) * (0.75 + 0.5 * tn);\n        [r, g, b] = [k, k * 0.68, k * 0.38];\n        ex = 0.2 + 0.8 * lip;\n        if (t === LARVA) {\n          // The larva curled in a C on its bed of jelly, bigger as it grows.\n          const a = S.age[i];\n          const [R, th] = [0.4 + 1.1 * a, 0.45 + 0.55 * a];\n          const ang = wrap(atan2(dy, dx) - S.gap[i]);\n          let on = a \u003c 0.3 ? sm(1.2, 0.5, rr) : sm(th + 0.3, th - 0.3, abs(rr - R)) * sm(0.5, 1, abs(ang));\n          if (rr \u003c 1.9) [r, g, b] = [r + 0.18, g + 0.17, b + 0.14];\n          const sh = 0.82 + 0.18 * clamp(lit + 0.5, 0, 1) + 0.05 * sin(ang * 5);\n          r += (0.97 * sh - r) * on;\n          g += (0.94 * sh - g) * on;\n          b += (0.85 * sh - b) * on;\n          ex += (0.9 - ex) * on;\n        } else if (t === EGG && rr \u003c 0.7) [r, g, b] = [0.86, 0.85, 0.78];\n      }\n      // The walls: pale wax round the honey, the rims of open cells lit,\n      // and a dark seam where two brood caps meet.\n      const w = sm(2.4, 2.6, d);\n      if (w > 0) {\n        const t2 = S.type[S.cid2[p]];\n        const pale = t === HONEY || t === NECTAR ? 1 : 0;\n        const seam = (t === BROOD || t2 === BROOD) && cap(t) && cap(t2) ? 0.15 : 1;\n        // Light from above rakes the slanted walls; the upright ones stand side on to it.\n        const k = (0.85 + 0.3 * hash(p, 8)) * seam * (!pale && abs(dx) > 2.6 ? 0.45 : 1);\n        r += ((0.34 + 0.18 * pale) * k - r) * w;\n        g += ((0.24 + 0.15 * pale) * k - g) * w;\n        b += ((0.11 + 0.08 * pale) * k - b) * w;\n        ex += ((seam \u003c 1 ? 0.15 : 1) - ex) * w;\n      }\n    }\n    // The comb sits back in the hive's shade; the bees on it catch the light.\n    base[q] = r * dim;\n    base[q + 1] = g * dim;\n    base[q + 2] = b * dim;\n    expo[p] = ex;\n  }\n}\n\n// The window throws its four panes of sun on the glass; they slide and lean with the sun.\nfunction sunPatch(S, s) {\n  const [cx, cy, sh] = [32 + 22 * s, 74 - 6 * abs(s), -0.5 * s];\n  for (let p = 0; p \u003c N; p++) {\n    const v = ((p / W) | 0) + 0.5 - cy;\n    const u = (p % W) + 0.5 - cx - sh * v;\n    let m = sm(22, 16, abs(u)) * sm(40, 33, abs(v));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(u));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(v + 5));\n    S.sun[p] = m;\n  }\n  S.sunK = s;\n}\n\nfunction newBee(S, x, y, h) {\n  const u = rnd();\n  const b = { x, y, h, m: CRAWL, t: rnd() * 3, v: 2.6 + 2.6 * rnd(), s: 1.12 + 0.14 * rnd(), tone: u \u003c 0.18 ? 0 : u \u003c 0.82 ? 1 : 2, ph: rnd() * 6.28, w: 0, wag: 0, wp: 0 };\n  S.bees.push(b);\n  return b;\n}\n\n// A bee to the dance floor on the lower comb, clear of the other dances.\nfunction spot(S) {\n  let best = [32, 104];\n  let far = -1;\n  for (let k = 0; k \u003c 24; k++) {\n    const x = 12 + 40 * rnd();\n    const y = 80 + 33 * rnd();\n    // The lower the better, near the entrance, but well clear of the others.\n    const d = min(24, ...S.dances.map((D) => len(D.cx - x, D.cy - y))) + 0.1 * y;\n    if (d > far) [far, best] = [d, [x, y]];\n  }\n  return best;\n}\n\nfunction newDance(S, b, vig) {\n  const [cx, cy] = spot(S);\n  // A forager from a rich patch runs longer, keeps at it and draws more followers.\n  const D = { b, cx, cy, fl: FIELDS[floor(rnd() * 4)] + 0.12 * (rnd() - 0.5), L: vig ? 11 : 8 + 2.5 * rnd(), tw: vig ? 1.25 : 0.85 + 0.3 * rnd(),\n    tr: vig ? 0.9 : 1 + 0.3 * rnd(), tau: 0, side: rnd() \u003c 0.5 ? -1 : 1, n: vig ? 26 : 9 + floor(10 * rnd()), amp: vig ? 1 : 0.65 + 0.2 * rnd(),\n    want: vig ? 10 : 6 + floor(3 * rnd()), on: false, foll: [], rec: 0, pc: floor(rnd() * 3) };\n  D.th = D.fl - S.sunA;\n  b.D = D;\n  S.dances.push(D);\n  return D;\n}\n\n// The bees nearest the dance turn and gather round it.\nfunction recruit(S, D, snap) {\n  const free = S.bees.filter((b) => (b.m === CRAWL || b.m === REST) && len(b.x - D.cx, b.y - D.cy) \u003c 24);\n  free.sort((a, b) => len(a.x - D.cx, a.y - D.cy) - len(b.x - D.cx, b.y - D.cy));\n  for (const b of free) {\n    if (D.foll.length >= D.want) break;\n    Object.assign(b, { m: FOLLOW, D, a: atan2(b.x - D.cx, -(b.y - D.cy)), t: 5 + 10 * rnd() });\n    D.foll.push(b);\n    if (snap) {\n      const R = D.L / 2 + 3.4;\n      b.x = D.cx + R * sin(b.a);\n      b.y = D.cy - R * cos(b.a);\n      b.h = b.a + PI;\n    }\n  }\n}\n\nfunction seek(b, tx, ty, sp, dt) {\n  const [dx, dy] = [tx - b.x, ty - b.y];\n  const r = len(dx, dy);\n  if (r > 0.25) {\n    const want = atan2(dx, -dy);\n    const e = wrap(want - b.h);\n    b.h += clamp(e, -5 * dt, 5 * dt);\n    const st = min(r, sp * dt) * max(0.15, cos(e));\n    b.x += sin(b.h) * st;\n    b.y -= cos(b.h) * st;\n  }\n  return r;\n}\n\nfunction stepDance(S, D, dt) {\n  const b = D.b;\n  D.th += clamp(wrap(D.fl - S.sunA - D.th), -1.5 * dt, 1.5 * dt);\n  const [ux, uy] = [sin(D.th), -cos(D.th)];\n  if (!D.on) {\n    // The forager hurries up from the entrance to where she will dance.\n    b.m = HOME;\n    if (seek(b, D.cx - (ux * D.L) / 2, D.cy - (uy * D.L) / 2, D.n > 20 ? 13 : 9, dt) \u003c 1.2) {\n      D.on = true;\n      b.m = DANCE;\n      recruit(S, D, false);\n    }\n    return;\n  }\n  D.tau += dt;\n  if (D.tau >= D.tw + D.tr) {\n    D.tau -= D.tw + D.tr;\n    D.side = -D.side;\n    if (--D.n \u003c= 0) {\n      // Done: she goes back out, and some of her followers go after the flowers.\n      [D.gone, b.m, b.wag] = [true, EXIT, 0];\n      for (const f of D.foll) [f.m, f.t] = [rnd() \u003c 0.4 ? EXIT : CRAWL, 1 + 2 * rnd()];\n      return;\n    }\n  }\n  let want;\n  if (D.tau \u003c D.tw) {\n    const f = D.tau / D.tw - 0.5;\n    b.x = D.cx + ux * D.L * f;\n    b.y = D.cy + uy * D.L * f;\n    want = D.th;\n    b.wag = D.amp;\n    b.wp += dt * 2 * PI * 13;\n  } else {\n    const s = (D.tau - D.tw) / D.tr;\n    const ps = D.side * PI * s;\n    const [rx, ry] = [ux * cos(ps) - uy * sin(ps), ux * sin(ps) + uy * cos(ps)];\n    b.x = D.cx + (rx * D.L) / 2;\n    b.y = D.cy + (ry * D.L) / 2;\n    want = atan2(-D.side * ry, -D.side * rx);\n    b.wag = 0;\n  }\n  b.h += clamp(wrap(want - b.h), -14 * dt, 14 * dt);\n  // Followers keep their place round her, turned to face her, and drift with her.\n  D.foll = D.foll.filter((f) => f.m === FOLLOW && f.D === D);\n  D.rec -= dt;\n  if (D.rec \u003c= 0) {\n    D.rec = 1.5;\n    if (D.foll.length \u003c D.want) recruit(S, D, false);\n  }\n  const da = atan2(b.x - D.cx, -(b.y - D.cy));\n  for (const f of D.foll) {\n    f.a += dt * 0.35 * sin(wrap(da - f.a));\n    const R = D.L / 2 + 3.4 + 0.4 * sin(S.t * 2 + f.ph);\n    if (seek(f, D.cx + R * sin(f.a), D.cy - R * cos(f.a), 6, dt) \u003c 1.2) f.h += clamp(wrap(atan2(b.x - f.x, -(b.y - f.y)) - f.h), -6 * dt, 6 * dt);\n    if ((f.t -= dt) \u003c= 0) [f.m, f.t, f.h] = [CRAWL, 1 + 2 * rnd(), f.h + PI];\n  }\n}\n\nfunction crawl(S, b, dt) {\n  b.w += (rnd() - 0.5) * 10 * sqrt(dt);\n  b.w *= 1 - min(1, 1.5 * dt);\n  let want = null;\n  const ex = b.x \u003c 4 ? 1 : b.x > W - 4 ? -1 : 0;\n  const ey = b.y \u003c TOP + 4 ? 1 : b.y > BOT - 4 ? -1 : 0;\n  if (ex || ey) want = atan2(ex, -ey);\n  b.h += b.w * dt;\n  if (want !== null) b.h += clamp(wrap(want - b.h), -3 * dt, 3 * dt);\n  const st = b.v * dt;\n  b.x += sin(b.h) * st;\n  b.y -= cos(b.h) * st;\n}\n\nfunction step(S, dt) {\n  const { bees } = S;\n  for (const b of bees) {\n    const m = b.m;\n    if (m === DANCE || m === HOME || m === FOLLOW) continue;\n    if (m === EXIT) {\n      if (seek(b, ENX, BOT + 1.5, 7, dt) \u003c 1.5) b.out = true;\n      continue;\n    }\n    // Others give the dancer and her followers room.\n    for (const D of S.dances) {\n      const [dx, dy] = [b.x - D.cx, b.y - D.cy];\n      const r = len(dx, dy);\n      if (D.on && r \u003c D.L / 2 + 9) {\n        if (m !== CRAWL) b.t = 0;\n        b.x += (dx / (r + 0.01)) * 4 * dt;\n        b.y += (dy / (r + 0.01)) * 4 * dt;\n        b.h += clamp(wrap(atan2(dx, -dy) - b.h), -4 * dt, 4 * dt);\n      }\n    }\n    if (m === CRAWL) crawl(S, b, dt);\n    else if (m === REST) b.h += sin(S.t * 6 + b.ph) * 0.5 * dt;\n    if ((b.t -= dt) > 0) continue;\n    // Backing out of a cell, she turns away.\n    if (m === DIP) [b.x, b.y, b.h] = [b.x - sin(b.h) * 1.5, b.y + cos(b.h) * 1.5, b.h + PI * (0.6 + 0.8 * rnd())];\n    const u = rnd();\n    b.m = CRAWL;\n    b.t = 1 + 3 * rnd();\n    if (u \u003c 0.28) [b.m, b.t] = [REST, 0.8 + 2.5 * rnd()];\n    else if (u \u003c 0.5 && m !== DIP) {\n      // Head first into a cell: to feed a larva, take nectar or pack pollen.\n      const hx = round(b.x + sin(b.h) * 2.2 - 0.5);\n      const hy = round(b.y - cos(b.h) * 2.2 - 0.5);\n      if (hx >= 0 && hx \u003c W && hy >= TOP + 2 && hy \u003c BOT - 2) {\n        const i = S.cid[hy * W + hx];\n        const t = S.type[i];\n        if (t !== HONEY && t !== BROOD) {\n          const r = floor(i / NC);\n          [b.m, b.t] = [DIP, 2 + 4 * rnd()];\n          b.x = cellX(r, i % NC) - sin(b.h) * 1.5;\n          b.y = cellY(r) + cos(b.h) * 1.5;\n        }\n      }\n    }\n  }\n  for (const D of S.dances) stepDance(S, D, dt);\n  S.dances = S.dances.filter((D) => !D.gone);\n  for (const b of bees) if (b.D && (b.D.gone || (b.m !== FOLLOW && b.m !== DANCE && b.m !== HOME))) b.D = null;\n  // Bees shoulder each other apart; those still at a cell or dancing stand firm.\n  for (const a of bees) {\n    if (a.m === REST || a.m === DIP || a.m === DANCE) continue;\n    for (const b of bees) {\n      const dx = a.x - b.x;\n      const dy = a.y - b.y;\n      if (abs(dx) > 3.6 || abs(dy) > 3.6 || b === a) continue;\n      const r = len(dx, dy);\n      if (r \u003c 3.6 && r > 0.01) {\n        a.x += (dx / r) * (3.6 - r) * 0.25;\n        a.y += (dy / r) * (3.6 - r) * 0.25;\n      }\n    }\n  }\n  S.bees = bees.filter((b) => !b.out);\n}\n\nexport function setup(params) {\n  const S = { t: 0, started: false, sunA: 0, sunK: 9, next: 6, add: 0, c0: 4.2, c1: 8.5, cd: 0.55, bees: [], dances: [] };\n  for (const k of [\"cid\", \"cid2\"]) S[k] = new Int16Array(N);\n  for (const k of [\"hd\", \"dx\", \"dy\", \"expo\", \"X\", \"amb\", \"pool\", \"sun\"]) S[k] = new Float32Array(N);\n  for (const k of [\"base\", \"A\", \"jit\"]) S[k] = new Float32Array(N * 3);\n  for (const k of [\"age\", \"tint\", \"gap\"]) S[k] = new Float32Array(NR * NC);\n  for (const k of [\"type\", \"pol\"]) S[k] = new Uint8Array(NR * NC);\n  grid(S);\n  layout(S);\n  paint(S);\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p % W, (p / W) | 0];\n    S.amb[p] = 0.74 + 0.2 * (1 - y / H) + 0.03 * sin(x * 0.11 + y * 0.05) - 0.12 * ((x - 31.5) / 32) ** 4;\n    S.pool[p] = 0.42 + 0.6 * exp(-((x - 40) ** 2 + (y - 74) ** 2) / 3000);\n    const j = 0.94 + 0.12 * hash(p, 19);\n    for (let c = 0; c \u003c 3; c++) S.jit[p * 3 + c] = j * (0.97 + 0.06 * hash(p, 20 + c));\n  }\n  params.s = S;\n}\n\nfunction start(S, n) {\n  // Bees thickest on the brood, two dances already going.\n  for (let k = 0; k \u003c n; k++) {\n    let x, y;\n    for (let j = 0; j \u003c 4; j++) {\n      x = 2 + 60 * rnd();\n      y = TOP + 3 + (BOT - TOP - 6) * rnd();\n      if (rnd() \u003c 0.35 + 0.65 * sm(30, 70, y)) break;\n    }\n    newBee(S, x, y, rnd() * 6.28);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const b = newBee(S, 0, 0, 0);\n    const D = newDance(S, b, false);\n    Object.assign(D, { fl: k ? 0.08 : -0.1, cx: k ? 20 : 43, cy: k ? 111 : 102, on: true, tau: rnd() * (D.tw + D.tr), rec: 1.5 });\n    D.th = D.fl - S.sunA;\n    b.m = DANCE;\n    stepDance(S, D, 0);\n    b.h = D.tau \u003c D.tw ? D.th : b.h;\n    recruit(S, D, true);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.light = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  const want = round(clamp(k[2], 80, 240));\n  const sk = clamp(k[3], -1, 1);\n  S.sunA = sk * PI;\n  if (abs(sk - S.sunK) > 0.002) sunPatch(S, sk);\n  if (!S.started) {\n    S.started = true;\n    start(S, want);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  // Clouds cross the sun now and then; the first one early.\n  if (S.t > S.c1 + 1.5) {\n    S.c0 = S.t + 8 + 20 * rnd();\n    S.c1 = S.c0 + 3 + 6 * rnd();\n    S.cd = 0.4 + 0.5 * rnd();\n  }\n  S.cloud = 1 - S.cd * sm(S.c0, S.c0 + 1.5, S.t) * sm(S.c1 + 1.5, S.c1, S.t);\n  const vig = input.btnPressed && input.btnPressed[0];\n  if ((S.next -= d) \u003c= 0 || vig) {\n    if (S.dances.length \u003c (vig ? 4 : 3)) {\n      const b = newBee(S, ENX + 4 * (rnd() - 0.5), BOT + 1, 0);\n      b.m = HOME;\n      newDance(S, b, vig);\n    }\n    if (!vig) S.next = 5 + 8 * rnd();\n  }\n  // Bees walk in from the sides, or go out at the entrance, to match the knob.\n  let ord = 0;\n  for (const b of S.bees) if (b.m \u003c= FOLLOW) ord++;\n  if ((S.add -= dt) \u003c= 0) {\n    S.add = 0.1;\n    if (ord \u003c want) {\n      const l = rnd() \u003c 0.5;\n      newBee(S, l ? -3 : W + 3, TOP + 8 + (BOT - TOP - 16) * rnd(), l ? PI / 2 : -PI / 2).t = 1.5;\n    } else if (ord > want + 2) {\n      const b = S.bees.find((b) => b.m === CRAWL);\n      if (b) b.m = EXIT;\n    }\n  }\n  step(S, d);\n}\n\n// One bee into the albedo: her body worked out on a 12 x 12 patch first,\n// then her shadow a step down and right, head, thorax, banded abdomen, wings.\nconst PC = new Float32Array(144);\nconst PP = new Uint8Array(144);\nfunction bee(S, b) {\n  const { A, X } = S;\n  const [s, fx, fy, dip, wg] = [b.s, sin(b.h), -cos(b.h), b.m === DIP, b.wag > 0];\n  const wag = wg ? b.wag * sin(b.wp) : b.m === REST ? 0.15 * sin(S.t * 9 + b.ph) : 0;\n  const [bl, th, am] = [wg ? 0.4 : 0, THX[b.tone], AMB[b.tone]];\n  const shim = 0.24 + 0.14 * sin(S.t * 2.3 + b.ph + b.x * 0.3);\n  // A box round her, the whole patch for a dancer and her blur.\n  const ax = wg ? 5 : s * (3.2 * abs(fx) + 1.9 * abs(fy)) + 0.5;\n  const ay = wg ? 5 : s * (3.2 * abs(fy) + 1.9 * abs(fx)) + 0.5;\n  const [x0, y0] = [floor(b.x - ax), floor(b.y - ay)];\n  const nw = min(12, floor(b.x + ax) - x0 + 2);\n  const nh = min(12, floor(b.y + ay) - y0 + 2);\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const X0 = x0 + i + 0.5 - b.x;\n      const Y0 = y0 + j + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      PC[k] = shape(u, v, s, dip, bl);\n      PP[k] = PART;\n    }\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      const c = PC[k];\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      const q = p * 3;\n      const sh = i && j ? PC[k - nw - 1] : 0;\n      if (sh > 0) {\n        const f = 1 - 0.7 * sh * (1 - c);\n        A[q] *= f;\n        A[q + 1] *= f;\n        A[q + 2] *= f;\n      }\n      const X0 = px + 0.5 - b.x;\n      const Y0 = py + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      // A waggling dancer buzzes her wings into a pale blur round her.\n      let wa = wg ? 0.55 * clamp(1.6 - len((u + 0.7) / 1.5, v / 1.7), 0, 1) : 0;\n      if (c \u003c= 0 && wa \u003c= 0) continue;\n      const pt = PP[k];\n      const col = pt === 1 ? HEAD : pt === 2 ? th : null;\n      const st = u > -0.85 ? 1 : u > -1.35 ? 0 : u > -1.9 ? 0.8 : 0;\n      if (u > -2.2 && u \u003c 0.3 && abs(v) > 0.35 && abs(v) \u003c 1.15) wa = max(wa, shim);\n      const a = max(c, wa);\n      for (let n = 0; n \u003c 3; n++) {\n        let e = col ? col[n] : DARK[n] + (am[n] - DARK[n]) * st;\n        e += (WING[n] - e) * wa;\n        A[q + n] += (e - A[q + n]) * a;\n      }\n      X[p] += (1 - X[p]) * a;\n    }\n  // A forager home from the field carries her pollen loads on her hind legs.\n  if (b.D && (b.m === DANCE || b.m === HOME)) {\n    const c = POLLENS[b.D.pc];\n    for (const sd of [-1, 1]) {\n      const px = round(b.x + s * (-0.7 * fx - sd * 1.25 * fy) - 0.5);\n      const py = round(b.y + s * (-0.7 * fy + sd * 1.25 * fx) - 0.5);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      [A[q], A[q + 1], A[q + 2], X[py * W + px]] = [...c, 1];\n    }\n  }\n}\n\n// Coverage of a bee's body at (u along, v across) in body lengths of\n// about five LEDs; PART says which piece.\nlet PART = 0;\nfunction shape(u, v, s, dip, bl) {\n  let c = clamp((1 - len((u + 1.3) / 1.5, v / (1.12 + bl))) * 1.2 * s + 0.5, 0, 1);\n  PART = 3;\n  if (!dip || u \u003c 0.3) {\n    const k = clamp((1 - len((u - 0.5) / 0.8, v)) * 0.9 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 2];\n  }\n  if (!dip) {\n    const k = clamp((1 - len((u - 1.65) / 0.6, v / 0.75)) * 0.7 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 1];\n  }\n  return c;\n}\n\nconst knee = (c) => (c \u003c 190 ? c : 190 + 65 * (1 - exp(-(c - 190) / 65)));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { A, X, base, expo, amb, sun, pool, jit } = S;\n  A.set(base);\n  X.set(expo);\n  for (const b of S.bees) if (b.m !== DANCE) bee(S, b);\n  for (const b of S.bees) if (b.m === DANCE) bee(S, b);\n  // The curtain closes on the sun first; the room light goes from daylight\n  // to a warm lamp over the hive by 0.5, and from that to the red lamp.\n  const L = S.light;\n  const [w, rd, pw] = [sm(0, 0.5, L), sm(0.5, 1, L), sm(0.15, 0.6, L)];\n  const dc = [0, 1, 2].map((c) => (DAYC[c] + (WARM[c] - DAYC[c]) * w + (REDC[c] - WARM[c]) * rd) * (1 - 0.1 * w - 0.1 * rd) * 255);\n  const sk = 0.9 * S.cloud * (1 - sm(0, 0.4, L)) * 255;\n  const o = [0, 0, 0];\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const a = amb[p] + (pool[p] - amb[p]) * pw;\n    const s = sun[p] * X[p] * sk;\n    for (let c = 0; c \u003c 3; c++) o[c] = knee(A[q + c] * (a * dc[c] + s * SUNC[c]) * jit[q + c]) | 0;\n    display.setPixel(p % W, (p / W) | 0, o[0], o[1], o[2]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower."},{"name":"Bees","min":80,"max":240,"about":"Eighty to 240; turned up, more walk in from the sides until they hide the comb."},{"name":"Sun","min":-1,"max":1,"about":"The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass."}],"start":[0,2,80,0.06],"measures":{"motion":0.2561,"detail":0.1412,"edges":0.4465,"complexity":2.5302,"coverage":0.7323,"colour":0.2225,"drift":0.0504},"knobResponse":[0.1684,0.0666,0.1239,0.0576]},{"slug":"warp","title":"Warp","family":"space","round":15,"note":"별 사이를 워프로 날아요. 별은 앞쪽에서 얼음빛 파랑이고, 옆으로 지나가며 자홍 줄로 늘어나요. K1 을 누르면 워프에서 빠져 멈췄다가 흰 빛과 함께 다시 들어가요.","idea":"A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.","buttons":"K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.","code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","layer":{"id":"layer-warp","type":"code","name":"warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel."},{"name":"Warp","min":0.2,"max":4,"about":"How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel."},{"name":"Stars","min":420,"max":1400,"about":"How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard."},{"name":"Steer","min":-1,"max":1,"about":"The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn."}],"start":[0,2,420,0.06],"measures":{"motion":2.077,"detail":0.0623,"edges":0.3496,"complexity":0.991,"coverage":0.2025,"colour":0.1354,"drift":0.0642},"knobResponse":[0.0455,0.0994,0.1476,0.0712]},{"slug":"waterfall","title":"Waterfall","family":"weather","round":14,"note":"강이 벼랑 끝을 넘어 패널 높이를 다 떨어져 소에 닿아요. 벼랑 끝에서 청록 유리 같던 물은 떨어지며 하얘지고, 소에서 오르는 안개에 무지개 한 토막이 서요. K3 바람을 끝까지 돌리면 돌풍이 물줄기를 찢어 물보라로 날려 올리고, K1 을 누르면 통나무 하나가 벼랑 끝을 넘어와요.","idea":"A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.","buttons":"K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.","code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","layer":{"id":"layer-waterfall","type":"code","name":"waterfall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly."},{"name":"Spate","min":0,"max":1,"about":"How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match."}],"start":[0,2,0,0.06],"measures":{"motion":0.6549,"detail":0.0595,"edges":0.3161,"complexity":1.514,"coverage":0.9639,"colour":0.146,"drift":0.0724},"knobResponse":[0.0442,0.112,0.1828,0.287]},{"slug":"weaver","title":"Weaver","family":"bird","round":22,"note":"강 위로 뻗은 아카시아 가지 끝에서 수컷 마을베짜기새가 둥지를 지어요. 갈대 잎을 찢어 문 초록 띠를 벽에 꿰어 당기면 둥지가 고리에서 둥근 방으로, 다시 아래로 열린 입구로 한 가닥씩 자라고, 묵은 띠는 짚 색으로 바래요. K1 을 누르면 암컷이 날아와 둥지를 살피고, 다 지은 둥지가 퇴짜를 맞으면 수컷이 끊어 강에 떨어뜨리고 새 고리부터 다시 지어요.","idea":"A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.","buttons":"K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.","code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","layer":{"id":"layer-weaver","type":"code","name":"weaver","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plumage","min":0,"max":2,"about":"A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in."},{"name":"Nests","min":3,"max":9,"about":"Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance."},{"name":"Sky","min":0,"max":1,"about":"Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left."}],"start":[0,2,3,0.06],"measures":{"motion":0.1278,"detail":0.0716,"edges":0.3689,"complexity":2.2916,"coverage":0.9985,"colour":0.2367,"drift":0.0436},"knobResponse":[0.0466,0.0543,0.0568,0.2018]},{"slug":"whipped-soap","title":"Whipped Soap","family":"cosmetic","round":36,"note":"보이지 않는 별 깍지가 휘핑 바디 솝을 한 송이씩 짜는데, 한 바퀴가 앞 바퀴에 반쯤 얹히며 뾰족하게 솟아요. 쟁반이 두 칸 네 줄로 차면 긁개가 거품을 말아 아래로 밀어 내요. K3 은 깍지의 별 꼭짓점 수라서 굵은 골 두세 줄이 가는 골 네다섯 줄로 바뀌고, K1 을 누르면 쟁반을 바로 밀어요.","idea":"An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.","buttons":"K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.","code":"// ===== Patternflow pattern =====\n// Title:   Whipped Soap\n// Family:  cosmetic\n// Idea:    An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after whipped body soap piped into rosettes in handmade soap shops\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1\n//\n// Knob 1: Hue. Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Ridges. The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together.\n// Knob 4: Swirl. How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high.\n// Buttons: K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, ceil, min, max, sqrt, sin, cos, tan, atan2, abs, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The tray: two rosettes across and four down, each in a square 32 LEDs on a side.\nconst COLS = 2, ROWS = 4, NR = COLS * ROWS, CWD = W / COLS, CHT = H / ROWS;\n// The nozzle's path starts R0 LEDs from the rosette's centre; the bead it\n// lays is RB LEDs in radius across and stands SQ times that tall.\nconst R0 = 10, RB = 4.6, SQ = 1.2;\n// How deep the star's notches cut into the bead, and how far the star turns\n// round the bead for each LED the nozzle travels.\nconst NOTCH = 0.45, TWIST = 0.11;\n// The nozzle runs VN LEDs a second at Speed 2.\nconst VN = 30;\n// A turn lands on the foam laid at least LAG LEDs of path earlier: the\n// bead never sits on itself.\nconst LAG = 2.6 * RB;\n// A soft light from the upper left (x right, y down the panel, z out of\n// it), ELV radians above the tray, swings SWING radians either way and back\n// every SWAY seconds at Speed 2, so shadows and sheen slide round the swirls.\nconst ELV = 0.58, TANE = tan(ELV), AZ0 = atan2(-0.65, -0.6), SWING = 0.5, SWAY = 7;\n// Each LED keeps how high the foam stands toward the light, as a slope,\n// looking SHADOW LEDs out at three bearings across the swing.\nconst SHADOW = 16, NAZ = 3;\n// Opening hue: mint, not red.\nconst H0 = 0.45;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, ridges: 5, swirl: 0, begun: false,\n    hgt: new Float32Array(N), lag: new Float32Array(N), t: 0,\n    nx: new Float32Array(N), ny: new Float32Array(N), nz: new Float32Array(N).fill(1),\n    ao: new Float32Array(N).fill(1), hz: new Float32Array(N * NAZ), foam: new Float32Array(N),\n    pend: [], k: 0, pathS: 0, th: 0, ro: null, wait: 0,\n    scraping: false, ys: 0, vol: new Float32Array(W), roll: new Float32Array(W), tmp: new Float32Array(W),\n    dirty: [0, 0, W - 1, H - 1], prof: new Float32Array(41),\n    lit: [0, 0, 0], dark: [0, 0, 0], tray: [0, 0, 0],\n  };\n}\n\n// A rosette's place on the tray, a little off true as by hand, and where the\n// nozzle starts round it.\nfunction newRosette(S, k) {\n  const c = k % COLS, r = floor(k / COLS);\n  return {\n    cx: (c + 0.5) * CWD + (random() - 0.5) * 1.6, cy: (r + 0.5) * CHT + (random() - 0.5) * 1.6,\n    a0: random() * 2 * PI, dir: random() \u003c 0.5 ? 1 : -1, tw: random() * 2 * PI,\n  };\n}\n\n// The nozzle's path: angle th round the centre, out of 2 pi turns in all,\n// the radius closing from R0 to nothing. Each turn closes in by a step: the\n// bead's full width at Swirl -1, so the turns lie side by side; 0.9 of its\n// radius at 0, so each turn rests half on the one before; 0.57 at 1, a tall\n// cone.\nconst turnsOf = (S) => R0 / (RB * (S.swirl \u003c 0 ? 0.9 - 1.1 * S.swirl : 0.9 - 0.33 * S.swirl));\nfunction pathAt(S, ro, th) {\n  const T = 2 * PI * turnsOf(S), u = cl(th / T, 0, 1), r = R0 * (1 - u) ** 0.8;\n  const a = ro.a0 + ro.dir * th;\n  return { x: ro.cx + r * cos(a), y: ro.cy + r * sin(a), r, u, a };\n}\n\n// The star bead's top across its width. The star's outline,\n// rho = RB (1 - NOTCH + NOTCH (1 - |sin(n phi / 2)|)^2), sharp at the points\n// and round in the notches, is walked at 96 angles over its upper half, and\n// each edge between two of them lifts the 41 steps across it lies over.\nconst NP = 96;\nfunction profile(S, alpha, scale) {\n  const pr = S.prof, n = S.ridges;\n  pr.fill(0);\n  let ps = 0, pw = 0;\n  for (let m = 0; m \u003c= NP; m++) {\n    const ph = (m / NP) * PI, cr = 1 - abs(sin((n * (ph + alpha)) / 2));\n    const rho = RB * scale * (1 - NOTCH + NOTCH * cr * cr);\n    const s = ((rho * cos(ph)) / RB) * 20 + 20, w = rho * sin(ph) * SQ;\n    if (m > 0) {\n      const a = min(s, ps), b = max(s, ps);\n      for (let k = max(0, ceil(a)); k \u003c= min(40, floor(b)); k++) {\n        const t = b > a ? (k - ps) / (s - ps) : 0, v = pw + (w - pw) * t;\n        if (v > pr[k]) pr[k] = v;\n      }\n    }\n    ps = s;\n    pw = w;\n  }\n}\n\nfunction grow(S, x0, y0, x1, y1) {\n  const d = S.dirty;\n  d[0] = min(d[0], max(0, floor(x0)));\n  d[1] = min(d[1], max(0, floor(y0)));\n  d[2] = max(d[2], min(W - 1, ceil(x1)));\n  d[3] = max(d[3], min(H - 1, ceil(y1)));\n}\n\n// Height of the foam laid at least LAG earlier, under a point, bilinear.\nfunction lagAt(S, x, y) {\n  const u = cl(x - 0.5, 0, W - 1.001), v = cl(y - 0.5, 0, H - 1.001), i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n  const g = S.lag, p = j * W + i;\n  return (g[p] * (1 - fu) + g[p + 1] * fu) * (1 - fv) + (g[p + W] * (1 - fu) + g[p + W + 1] * fu) * fv;\n}\n\n// Lay the bead at one point of the path.\nfunction lay(S, ro, th) {\n  // The direction of travel, from a step back along the path, which still\n  // has length at the centre where the radius closes to nothing.\n  const P = pathAt(S, ro, th), Q = pathAt(S, ro, max(0, th - 0.15));\n  let tx = P.x - Q.x, ty = P.y - Q.y;\n  const tl = hypot(tx, ty);\n  if (tl \u003c 1e-4) {\n    tx = -sin(P.a) * ro.dir;\n    ty = cos(P.a) * ro.dir;\n  } else {\n    tx /= tl;\n    ty /= tl;\n  }\n  // Over the last tenth the bead thins to a point as the nozzle lifts away.\n  const scale = 1 - 0.75 * sm(0.88, 1, P.u), lift = 2.2 * sm(0.85, 1, P.u);\n  profile(S, ro.tw + TWIST * S.pathS, scale);\n  // The bead rests on the turn before: on the foam under the nozzle or a\n  // little outward of it, whichever stands higher.\n  const ox = P.r > 0.01 ? (P.x - ro.cx) / P.r : 0, oy = P.r > 0.01 ? (P.y - ro.cy) / P.r : 0, rest = 0.45 * RB;\n  const base = max(lagAt(S, P.x, P.y), lagAt(S, P.x + ox * rest, P.y + oy * rest) - 0.6) + lift, pr = S.prof, R = RB + 1;\n  for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, ceil(P.y + R)); y++)\n    for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, ceil(P.x + R)); x++) {\n      const dx = x + 0.5 - P.x, dy = y + 0.5 - P.y, along = dx * tx + dy * ty;\n      if (abs(along) > 0.75) continue;\n      const s = -dx * ty + dy * tx, b = ((s / RB) * 0.5 + 0.5) * 40;\n      if (b \u003c 0 || b > 40) continue;\n      const b0 = floor(b), b1 = min(40, b0 + 1), f = b - b0, w0 = pr[b0], w1 = pr[b1];\n      const v = base + w0 + (w1 - w0) * f, p = y * W + x;\n      if (v > S.hgt[p]) {\n        S.hgt[p] = v;\n        S.pend.push(p, v, S.pathS);\n      }\n    }\n  grow(S, P.x - R - 2, P.y - R - 2, P.x + R + SHADOW, P.y + R + SHADOW);\n}\n\n// Foam laid LAG or more of path ago becomes ground for the next turn.\nfunction settle(S, all) {\n  const q = S.pend;\n  let k = 0;\n  while (k \u003c q.length && (all || S.pathS - q[k + 2] > LAG)) {\n    const p = q[k];\n    if (q[k + 1] > S.lag[p]) S.lag[p] = q[k + 1];\n    k += 3;\n  }\n  if (k) q.splice(0, k);\n}\n\nfunction startScrape(S) {\n  if (S.scraping) return;\n  settle(S, true);\n  S.scraping = true;\n  S.ro = null;\n  S.ys = -8;\n  S.vol.fill(0);\n  S.roll.fill(0);\n}\n\nfunction step(S, dt) {\n  S.t += dt;\n  if (S.scraping) {\n    // A blade runs down the tray at 55 LEDs a second: everything above it\n    // is taken up, rolled ahead of it, and leaves past the bottom edge.\n    const y0 = S.ys, y1 = S.ys + 55 * dt;\n    for (let y = max(0, ceil(y0)); y \u003c min(H, ceil(y1)); y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        S.vol[x] += S.hgt[p];\n        S.hgt[p] = 0;\n        S.lag[p] = 0;\n      }\n    S.ys = y1;\n    // The roll spreads along the blade: its height across the panel is the\n    // scraped foam smoothed over about a rosette's width, lumpy as foam.\n    const v = S.vol, t = S.tmp, rl = S.roll;\n    for (let pass = 0; pass \u003c 2; pass++) {\n      const a = pass ? t : v, b = pass ? rl : t;\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let k = -7; k \u003c= 7; k++) sum += a[cl(x + k, 0, W - 1)];\n        b[x] = sum / 15;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) rl[x] = 0.55 * sqrt(rl[x]) * (0.85 + 0.15 * sin(x * 0.9 + S.ys * 0.21));\n    grow(S, 0, y0 - 3, W - 1, y1 + 10 + SHADOW);\n    if (S.ys > H + 14) {\n      S.scraping = false;\n      S.k = 0;\n      S.wait = 0.5;\n    }\n    return;\n  }\n  if (S.wait > 0) {\n    S.wait -= dt;\n    return;\n  }\n  if (!S.ro) {\n    if (S.k >= NR) {\n      startScrape(S);\n      return;\n    }\n    S.ro = newRosette(S, S.k);\n    S.th = 0;\n  }\n  // The nozzle runs on along its spiral, laying the bead every 0.4 LED.\n  const T = 2 * PI * turnsOf(S);\n  let left = VN * dt;\n  while (left > 0 && S.ro) {\n    const P = pathAt(S, S.ro, S.th), ds = min(0.4, left);\n    // Arc length per radian of the spiral, kept off zero at the centre.\n    const sp = max(1.2, hypot(P.r, (0.8 * R0 * (1 - P.u) ** -0.2) / T));\n    S.th += ds / sp;\n    S.pathS += ds;\n    left -= ds;\n    if (S.th >= T) {\n      lay(S, S.ro, T);\n      settle(S, true);\n      S.ro = null;\n      S.k++;\n      S.wait = 0.3;\n      break;\n    }\n    lay(S, S.ro, S.th);\n    settle(S, false);\n  }\n}\n\n// A whole rosette at once, for the tray the pattern opens on.\nfunction pipeNow(S) {\n  S.ro = newRosette(S, S.k);\n  S.th = 0;\n  while (S.ro) step(S, 0.02);\n  S.wait = 0;\n}\n\n// The roll of scraped foam ahead of the blade, at a column and row.\nfunction rollAt(S, x, y) {\n  const d = y + 0.5 - S.ys;\n  if (!S.scraping || d \u003c 0 || d > 8) return 0;\n  return S.roll[x] * sin((PI * d) / 8) ** 0.7;\n}\n\n// Survey the foam inside the dirty box: its normal, how far it sits in a\n// valley, and its horizon toward the light at each bearing.\nfunction survey(S) {\n  const d = S.dirty;\n  if (d[0] > d[2]) return;\n  const g = S.hgt, ht = (x, y) => {\n    const xi = cl(x, 0, W - 1), yi = cl(y, 0, H - 1);\n    return max(g[yi * W + xi], rollAt(S, xi, yi));\n  };\n  for (let y = d[1]; y \u003c= d[3]; y++)\n    for (let x = d[0]; x \u003c= d[2]; x++) {\n      const p = y * W + x, h0 = ht(x, y);\n      const gx = (ht(x + 1, y) - ht(x - 1, y)) * 0.5, gy = (ht(x, y + 1) - ht(x, y - 1)) * 0.5;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1);\n      S.nx[p] = -gx * inv;\n      S.ny[p] = -gy * inv;\n      S.nz[p] = inv;\n      // Valleys: the foam lower than its ring of neighbours two LEDs out.\n      const ring = (ht(x - 2, y) + ht(x + 2, y) + ht(x, y - 2) + ht(x, y + 2)) * 0.25;\n      S.ao[p] = 1 - 0.4 * sm(0, 2.2, ring - h0);\n      S.foam[p] = sm(0.08, 0.7, h0);\n      for (let k = 0; k \u003c NAZ; k++) {\n        const az = AZ0 + SWING * (k - 1), dx = cos(az), dy = sin(az);\n        let hor = -1;\n        for (let s = 1; s \u003c= SHADOW; s++) {\n          const e = (ht(round(x + dx * s), round(y + dy * s)) - h0) / s;\n          if (e > hor) hor = e;\n        }\n        S.hz[k * N + p] = hor;\n      }\n    }\n  d[0] = W;\n  d[1] = H;\n  d[2] = -1;\n  d[3] = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.ridges = round(cl(k[2], 5, 10));\n  S.swirl = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open on a tray half piped.\n    for (let i = 0; i \u003c 4; i++) pipeNow(S);\n    S.dirty = [0, 0, W - 1, H - 1];\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startScrape(S);\n  step(S, (d * S.speed) / 2);\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Peach, butter and lime go brown or olive when deep: there the foam is\n  // paled, its shadows lifted, and the tray taken down to near black.\n  const warm = sm(0.0, 0.07, hh) * (1 - sm(0.24, 0.34, hh));\n  hsv(h, 0.3 - 0.1 * warm, 1, S.lit);\n  hsv(h + 0.03, 0.5 - 0.2 * warm, 0.5 + 0.14 * warm, S.dark);\n  hsv(h + 0.05, 0.75 - 0.4 * warm, 0.24 - 0.15 * warm, S.tray);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  survey(S);\n  palette(S);\n  const { nx, ny, nz, ao, hz, foam, lit, dark, tray } = S;\n  // Where the light is now, and the half vector to the eye straight above.\n  const az = AZ0 + SWING * sin((2 * PI * S.t) / SWAY), ce = cos(ELV);\n  const lx = cos(az) * ce, ly = sin(az) * ce, lz = sin(ELV);\n  const hl = hypot(lx, ly, lz + 1), hx = lx / hl, hy = ly / hl, hz2 = (lz + 1) / hl;\n  const u = cl((az - AZ0) / SWING + 1, 0, 1.999), k = floor(u), fk = u - k, o0 = k * N, o1 = o0 + N;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, f = foam[p];\n      // Diffuse from the normal, darkened in valleys and where the foam\n      // toward the light stands above the light's own slope.\n      const hor = hz[o0 + p] + (hz[o1 + p] - hz[o0 + p]) * fk;\n      const shade = 1 - 0.8 * sm(TANE - 0.12, TANE + 0.4, hor);\n      const nl = max(0, nx[p] * lx + ny[p] * ly + nz[p] * lz);\n      const l = (0.2 + 0.8 * nl * shade) * ao[p];\n      // A faint sheen: matte foam, not frosting.\n      const nh = max(0, nx[p] * hx + ny[p] * hy + nz[p] * hz2), n2 = nh * nh, n4 = n2 * n2;\n      const sp = 0.14 * n4 * n4 * n4 * n2 * shade * f;\n      // Bare tray: its own colour, lit the same way and shadowed the same.\n      const tl = 0.2 + 0.8 * l;\n      const r = (dark[0] + (lit[0] - dark[0]) * l) * f + tray[0] * tl * (1 - f) + sp;\n      const g = (dark[1] + (lit[1] - dark[1]) * l) * f + tray[1] * tl * (1 - f) + sp;\n      const b = (dark[2] + (lit[2] - dark[2]) * l) * f + tray[2] * tl * (1 - f) + sp;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-whipped-soap","type":"code","name":"whipped-soap","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Whipped Soap\n// Family:  cosmetic\n// Idea:    An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after whipped body soap piped into rosettes in handmade soap shops\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1\n//\n// Knob 1: Hue. Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Ridges. The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together.\n// Knob 4: Swirl. How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high.\n// Buttons: K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, ceil, min, max, sqrt, sin, cos, tan, atan2, abs, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The tray: two rosettes across and four down, each in a square 32 LEDs on a side.\nconst COLS = 2, ROWS = 4, NR = COLS * ROWS, CWD = W / COLS, CHT = H / ROWS;\n// The nozzle's path starts R0 LEDs from the rosette's centre; the bead it\n// lays is RB LEDs in radius across and stands SQ times that tall.\nconst R0 = 10, RB = 4.6, SQ = 1.2;\n// How deep the star's notches cut into the bead, and how far the star turns\n// round the bead for each LED the nozzle travels.\nconst NOTCH = 0.45, TWIST = 0.11;\n// The nozzle runs VN LEDs a second at Speed 2.\nconst VN = 30;\n// A turn lands on the foam laid at least LAG LEDs of path earlier: the\n// bead never sits on itself.\nconst LAG = 2.6 * RB;\n// A soft light from the upper left (x right, y down the panel, z out of\n// it), ELV radians above the tray, swings SWING radians either way and back\n// every SWAY seconds at Speed 2, so shadows and sheen slide round the swirls.\nconst ELV = 0.58, TANE = tan(ELV), AZ0 = atan2(-0.65, -0.6), SWING = 0.5, SWAY = 7;\n// Each LED keeps how high the foam stands toward the light, as a slope,\n// looking SHADOW LEDs out at three bearings across the swing.\nconst SHADOW = 16, NAZ = 3;\n// Opening hue: mint, not red.\nconst H0 = 0.45;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, ridges: 5, swirl: 0, begun: false,\n    hgt: new Float32Array(N), lag: new Float32Array(N), t: 0,\n    nx: new Float32Array(N), ny: new Float32Array(N), nz: new Float32Array(N).fill(1),\n    ao: new Float32Array(N).fill(1), hz: new Float32Array(N * NAZ), foam: new Float32Array(N),\n    pend: [], k: 0, pathS: 0, th: 0, ro: null, wait: 0,\n    scraping: false, ys: 0, vol: new Float32Array(W), roll: new Float32Array(W), tmp: new Float32Array(W),\n    dirty: [0, 0, W - 1, H - 1], prof: new Float32Array(41),\n    lit: [0, 0, 0], dark: [0, 0, 0], tray: [0, 0, 0],\n  };\n}\n\n// A rosette's place on the tray, a little off true as by hand, and where the\n// nozzle starts round it.\nfunction newRosette(S, k) {\n  const c = k % COLS, r = floor(k / COLS);\n  return {\n    cx: (c + 0.5) * CWD + (random() - 0.5) * 1.6, cy: (r + 0.5) * CHT + (random() - 0.5) * 1.6,\n    a0: random() * 2 * PI, dir: random() \u003c 0.5 ? 1 : -1, tw: random() * 2 * PI,\n  };\n}\n\n// The nozzle's path: angle th round the centre, out of 2 pi turns in all,\n// the radius closing from R0 to nothing. Each turn closes in by a step: the\n// bead's full width at Swirl -1, so the turns lie side by side; 0.9 of its\n// radius at 0, so each turn rests half on the one before; 0.57 at 1, a tall\n// cone.\nconst turnsOf = (S) => R0 / (RB * (S.swirl \u003c 0 ? 0.9 - 1.1 * S.swirl : 0.9 - 0.33 * S.swirl));\nfunction pathAt(S, ro, th) {\n  const T = 2 * PI * turnsOf(S), u = cl(th / T, 0, 1), r = R0 * (1 - u) ** 0.8;\n  const a = ro.a0 + ro.dir * th;\n  return { x: ro.cx + r * cos(a), y: ro.cy + r * sin(a), r, u, a };\n}\n\n// The star bead's top across its width. The star's outline,\n// rho = RB (1 - NOTCH + NOTCH (1 - |sin(n phi / 2)|)^2), sharp at the points\n// and round in the notches, is walked at 96 angles over its upper half, and\n// each edge between two of them lifts the 41 steps across it lies over.\nconst NP = 96;\nfunction profile(S, alpha, scale) {\n  const pr = S.prof, n = S.ridges;\n  pr.fill(0);\n  let ps = 0, pw = 0;\n  for (let m = 0; m \u003c= NP; m++) {\n    const ph = (m / NP) * PI, cr = 1 - abs(sin((n * (ph + alpha)) / 2));\n    const rho = RB * scale * (1 - NOTCH + NOTCH * cr * cr);\n    const s = ((rho * cos(ph)) / RB) * 20 + 20, w = rho * sin(ph) * SQ;\n    if (m > 0) {\n      const a = min(s, ps), b = max(s, ps);\n      for (let k = max(0, ceil(a)); k \u003c= min(40, floor(b)); k++) {\n        const t = b > a ? (k - ps) / (s - ps) : 0, v = pw + (w - pw) * t;\n        if (v > pr[k]) pr[k] = v;\n      }\n    }\n    ps = s;\n    pw = w;\n  }\n}\n\nfunction grow(S, x0, y0, x1, y1) {\n  const d = S.dirty;\n  d[0] = min(d[0], max(0, floor(x0)));\n  d[1] = min(d[1], max(0, floor(y0)));\n  d[2] = max(d[2], min(W - 1, ceil(x1)));\n  d[3] = max(d[3], min(H - 1, ceil(y1)));\n}\n\n// Height of the foam laid at least LAG earlier, under a point, bilinear.\nfunction lagAt(S, x, y) {\n  const u = cl(x - 0.5, 0, W - 1.001), v = cl(y - 0.5, 0, H - 1.001), i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n  const g = S.lag, p = j * W + i;\n  return (g[p] * (1 - fu) + g[p + 1] * fu) * (1 - fv) + (g[p + W] * (1 - fu) + g[p + W + 1] * fu) * fv;\n}\n\n// Lay the bead at one point of the path.\nfunction lay(S, ro, th) {\n  // The direction of travel, from a step back along the path, which still\n  // has length at the centre where the radius closes to nothing.\n  const P = pathAt(S, ro, th), Q = pathAt(S, ro, max(0, th - 0.15));\n  let tx = P.x - Q.x, ty = P.y - Q.y;\n  const tl = hypot(tx, ty);\n  if (tl \u003c 1e-4) {\n    tx = -sin(P.a) * ro.dir;\n    ty = cos(P.a) * ro.dir;\n  } else {\n    tx /= tl;\n    ty /= tl;\n  }\n  // Over the last tenth the bead thins to a point as the nozzle lifts away.\n  const scale = 1 - 0.75 * sm(0.88, 1, P.u), lift = 2.2 * sm(0.85, 1, P.u);\n  profile(S, ro.tw + TWIST * S.pathS, scale);\n  // The bead rests on the turn before: on the foam under the nozzle or a\n  // little outward of it, whichever stands higher.\n  const ox = P.r > 0.01 ? (P.x - ro.cx) / P.r : 0, oy = P.r > 0.01 ? (P.y - ro.cy) / P.r : 0, rest = 0.45 * RB;\n  const base = max(lagAt(S, P.x, P.y), lagAt(S, P.x + ox * rest, P.y + oy * rest) - 0.6) + lift, pr = S.prof, R = RB + 1;\n  for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, ceil(P.y + R)); y++)\n    for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, ceil(P.x + R)); x++) {\n      const dx = x + 0.5 - P.x, dy = y + 0.5 - P.y, along = dx * tx + dy * ty;\n      if (abs(along) > 0.75) continue;\n      const s = -dx * ty + dy * tx, b = ((s / RB) * 0.5 + 0.5) * 40;\n      if (b \u003c 0 || b > 40) continue;\n      const b0 = floor(b), b1 = min(40, b0 + 1), f = b - b0, w0 = pr[b0], w1 = pr[b1];\n      const v = base + w0 + (w1 - w0) * f, p = y * W + x;\n      if (v > S.hgt[p]) {\n        S.hgt[p] = v;\n        S.pend.push(p, v, S.pathS);\n      }\n    }\n  grow(S, P.x - R - 2, P.y - R - 2, P.x + R + SHADOW, P.y + R + SHADOW);\n}\n\n// Foam laid LAG or more of path ago becomes ground for the next turn.\nfunction settle(S, all) {\n  const q = S.pend;\n  let k = 0;\n  while (k \u003c q.length && (all || S.pathS - q[k + 2] > LAG)) {\n    const p = q[k];\n    if (q[k + 1] > S.lag[p]) S.lag[p] = q[k + 1];\n    k += 3;\n  }\n  if (k) q.splice(0, k);\n}\n\nfunction startScrape(S) {\n  if (S.scraping) return;\n  settle(S, true);\n  S.scraping = true;\n  S.ro = null;\n  S.ys = -8;\n  S.vol.fill(0);\n  S.roll.fill(0);\n}\n\nfunction step(S, dt) {\n  S.t += dt;\n  if (S.scraping) {\n    // A blade runs down the tray at 55 LEDs a second: everything above it\n    // is taken up, rolled ahead of it, and leaves past the bottom edge.\n    const y0 = S.ys, y1 = S.ys + 55 * dt;\n    for (let y = max(0, ceil(y0)); y \u003c min(H, ceil(y1)); y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        S.vol[x] += S.hgt[p];\n        S.hgt[p] = 0;\n        S.lag[p] = 0;\n      }\n    S.ys = y1;\n    // The roll spreads along the blade: its height across the panel is the\n    // scraped foam smoothed over about a rosette's width, lumpy as foam.\n    const v = S.vol, t = S.tmp, rl = S.roll;\n    for (let pass = 0; pass \u003c 2; pass++) {\n      const a = pass ? t : v, b = pass ? rl : t;\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let k = -7; k \u003c= 7; k++) sum += a[cl(x + k, 0, W - 1)];\n        b[x] = sum / 15;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) rl[x] = 0.55 * sqrt(rl[x]) * (0.85 + 0.15 * sin(x * 0.9 + S.ys * 0.21));\n    grow(S, 0, y0 - 3, W - 1, y1 + 10 + SHADOW);\n    if (S.ys > H + 14) {\n      S.scraping = false;\n      S.k = 0;\n      S.wait = 0.5;\n    }\n    return;\n  }\n  if (S.wait > 0) {\n    S.wait -= dt;\n    return;\n  }\n  if (!S.ro) {\n    if (S.k >= NR) {\n      startScrape(S);\n      return;\n    }\n    S.ro = newRosette(S, S.k);\n    S.th = 0;\n  }\n  // The nozzle runs on along its spiral, laying the bead every 0.4 LED.\n  const T = 2 * PI * turnsOf(S);\n  let left = VN * dt;\n  while (left > 0 && S.ro) {\n    const P = pathAt(S, S.ro, S.th), ds = min(0.4, left);\n    // Arc length per radian of the spiral, kept off zero at the centre.\n    const sp = max(1.2, hypot(P.r, (0.8 * R0 * (1 - P.u) ** -0.2) / T));\n    S.th += ds / sp;\n    S.pathS += ds;\n    left -= ds;\n    if (S.th >= T) {\n      lay(S, S.ro, T);\n      settle(S, true);\n      S.ro = null;\n      S.k++;\n      S.wait = 0.3;\n      break;\n    }\n    lay(S, S.ro, S.th);\n    settle(S, false);\n  }\n}\n\n// A whole rosette at once, for the tray the pattern opens on.\nfunction pipeNow(S) {\n  S.ro = newRosette(S, S.k);\n  S.th = 0;\n  while (S.ro) step(S, 0.02);\n  S.wait = 0;\n}\n\n// The roll of scraped foam ahead of the blade, at a column and row.\nfunction rollAt(S, x, y) {\n  const d = y + 0.5 - S.ys;\n  if (!S.scraping || d \u003c 0 || d > 8) return 0;\n  return S.roll[x] * sin((PI * d) / 8) ** 0.7;\n}\n\n// Survey the foam inside the dirty box: its normal, how far it sits in a\n// valley, and its horizon toward the light at each bearing.\nfunction survey(S) {\n  const d = S.dirty;\n  if (d[0] > d[2]) return;\n  const g = S.hgt, ht = (x, y) => {\n    const xi = cl(x, 0, W - 1), yi = cl(y, 0, H - 1);\n    return max(g[yi * W + xi], rollAt(S, xi, yi));\n  };\n  for (let y = d[1]; y \u003c= d[3]; y++)\n    for (let x = d[0]; x \u003c= d[2]; x++) {\n      const p = y * W + x, h0 = ht(x, y);\n      const gx = (ht(x + 1, y) - ht(x - 1, y)) * 0.5, gy = (ht(x, y + 1) - ht(x, y - 1)) * 0.5;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1);\n      S.nx[p] = -gx * inv;\n      S.ny[p] = -gy * inv;\n      S.nz[p] = inv;\n      // Valleys: the foam lower than its ring of neighbours two LEDs out.\n      const ring = (ht(x - 2, y) + ht(x + 2, y) + ht(x, y - 2) + ht(x, y + 2)) * 0.25;\n      S.ao[p] = 1 - 0.4 * sm(0, 2.2, ring - h0);\n      S.foam[p] = sm(0.08, 0.7, h0);\n      for (let k = 0; k \u003c NAZ; k++) {\n        const az = AZ0 + SWING * (k - 1), dx = cos(az), dy = sin(az);\n        let hor = -1;\n        for (let s = 1; s \u003c= SHADOW; s++) {\n          const e = (ht(round(x + dx * s), round(y + dy * s)) - h0) / s;\n          if (e > hor) hor = e;\n        }\n        S.hz[k * N + p] = hor;\n      }\n    }\n  d[0] = W;\n  d[1] = H;\n  d[2] = -1;\n  d[3] = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.ridges = round(cl(k[2], 5, 10));\n  S.swirl = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open on a tray half piped.\n    for (let i = 0; i \u003c 4; i++) pipeNow(S);\n    S.dirty = [0, 0, W - 1, H - 1];\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startScrape(S);\n  step(S, (d * S.speed) / 2);\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Peach, butter and lime go brown or olive when deep: there the foam is\n  // paled, its shadows lifted, and the tray taken down to near black.\n  const warm = sm(0.0, 0.07, hh) * (1 - sm(0.24, 0.34, hh));\n  hsv(h, 0.3 - 0.1 * warm, 1, S.lit);\n  hsv(h + 0.03, 0.5 - 0.2 * warm, 0.5 + 0.14 * warm, S.dark);\n  hsv(h + 0.05, 0.75 - 0.4 * warm, 0.24 - 0.15 * warm, S.tray);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  survey(S);\n  palette(S);\n  const { nx, ny, nz, ao, hz, foam, lit, dark, tray } = S;\n  // Where the light is now, and the half vector to the eye straight above.\n  const az = AZ0 + SWING * sin((2 * PI * S.t) / SWAY), ce = cos(ELV);\n  const lx = cos(az) * ce, ly = sin(az) * ce, lz = sin(ELV);\n  const hl = hypot(lx, ly, lz + 1), hx = lx / hl, hy = ly / hl, hz2 = (lz + 1) / hl;\n  const u = cl((az - AZ0) / SWING + 1, 0, 1.999), k = floor(u), fk = u - k, o0 = k * N, o1 = o0 + N;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, f = foam[p];\n      // Diffuse from the normal, darkened in valleys and where the foam\n      // toward the light stands above the light's own slope.\n      const hor = hz[o0 + p] + (hz[o1 + p] - hz[o0 + p]) * fk;\n      const shade = 1 - 0.8 * sm(TANE - 0.12, TANE + 0.4, hor);\n      const nl = max(0, nx[p] * lx + ny[p] * ly + nz[p] * lz);\n      const l = (0.2 + 0.8 * nl * shade) * ao[p];\n      // A faint sheen: matte foam, not frosting.\n      const nh = max(0, nx[p] * hx + ny[p] * hy + nz[p] * hz2), n2 = nh * nh, n4 = n2 * n2;\n      const sp = 0.14 * n4 * n4 * n4 * n2 * shade * f;\n      // Bare tray: its own colour, lit the same way and shadowed the same.\n      const tl = 0.2 + 0.8 * l;\n      const r = (dark[0] + (lit[0] - dark[0]) * l) * f + tray[0] * tl * (1 - f) + sp;\n      const g = (dark[1] + (lit[1] - dark[1]) * l) * f + tray[1] * tl * (1 - f) + sp;\n      const b = (dark[2] + (lit[2] - dark[2]) * l) * f + tray[2] * tl * (1 - f) + sp;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Ridges","min":5,"max":10,"about":"The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together."},{"name":"Swirl","min":-1,"max":1,"about":"How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high."}],"start":[0,2,5,0.06],"measures":{"motion":0.0309,"detail":0.0537,"edges":0.3642,"complexity":1.1069,"coverage":0.9764,"colour":0.1274,"drift":0.0699},"knobResponse":[0.1534,0.0635,0.0442,0.1089]},{"slug":"wireworld","title":"Wireworld","family":"automata","round":16,"note":"구리선 회로를 전자가 파란 머리와 주황 꼬리로 달려요. 둘레 12, 18, 24, 30칸 클록 넷의 신호가 다이오드와 지연선을 지나 XOR 과 OR 게이트에서 만나고, 아래 램프 셋이 그 답을 깜박여요. K1 을 누르면 네 줄에 전자 여섯 개씩이 박자를 맞춰 들어가요.","idea":"A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.","buttons":"K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.","code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","layer":{"id":"layer-wireworld","type":"code","name":"wireworld","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":3,"about":"0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon."},{"name":"Speed","min":0,"max":4,"about":"Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell."},{"name":"Pulses","min":1,"max":3,"about":"One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out."},{"name":"Glow","min":0,"max":1,"about":"The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s."}],"start":[0,2,1,0.06],"measures":{"motion":0.2605,"detail":0.0895,"edges":0.7694,"complexity":0.461,"coverage":0.3111,"colour":0.2355,"drift":0.0855},"knobResponse":[0.0911,0.0637,0.0514,0.0736]},{"slug":"woodpecker","title":"Woodpecker","family":"bird","round":21,"note":"새벽 숲의 자작나무 줄기가 128줄을 다 쓰고, 오색딱따구리가 뻣뻣한 꽁지로 버티며 껑충껑충 오르다 멈춰 머리가 흐려지도록 두드려 부스러기를 튀기고 구멍을 내요. 꼭대기에 닿으면 물결치듯 날아 밑동으로 내려가 다시 오르고, K1 을 누르면 다음 걸음 뒤에 바로 두드려요.","idea":"A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.","buttons":"K1 tap makes the male stop and drum after his next hop.","code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","layer":{"id":"layer-woodpecker","type":"code","name":"woodpecker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tree","min":0,"max":2,"about":"A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower."},{"name":"Birds","min":1,"max":4,"about":"One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk."},{"name":"Light","min":0,"max":1,"about":"Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west."}],"start":[0,2,1,0.06],"measures":{"motion":0.092,"detail":0.0823,"edges":0.3471,"complexity":2.5826,"coverage":0.9376,"colour":0.1398,"drift":0.0454},"knobResponse":[0.1005,0.0437,0.0473,0.1346]},{"slug":"wythoff-nim","title":"Wythoff Nim","family":"algo","round":28,"note":"위토프 게임의 스프라그-그런디 값 표를 모서리로 세웠어요. 지는 자리(값 0)는 황금비 두 줄을 따라 금빛이고, 값 0, 1, 2 가 차례로 쓸고 지나가며 저마다의 두 줄에서 번쩍였다 표로 가라앉아요. 누르면 흰 말이 떨어져 이기는 수로 모서리까지 게임을 해요.","idea":"The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.","buttons":"K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.","code":"// ===== Patternflow pattern =====\n// Title:   Wythoff Nim\n// Family:  algo\n// Idea:    The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Wythoff's game (Willem Abraham Wythoff, 1907) and its Sprague-Grundy values (Roland Sprague 1935, Patrick Grundy 1939), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple.\n// Knob 2: Speed. How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half.\n// Knob 3: Zoom. LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays.\n// Knob 4: Glow. How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds.\n// Buttons: K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two heaps of x and y counters. A move takes any number from one heap, or\n// the same number from both; whoever takes the last counter wins. A\n// position's Grundy value is the smallest number not among the values one\n// move away: left along its row, up its column, up its diagonal. The\n// positions of value 0 are the ones to move to: (floor(n phi),\n// floor(n phi^2)) and their mirror images, on two rays of slopes phi and\n// 1/phi. Every other value gathers along the same two rays, wobbling off\n// them without ever falling into a period (Dress, Flammenkamp and Pink,\n// 1999), and down the middle the values grow like x + y.\nconst T = 82;\nconst G = new Int16Array(T * T);\nlet GALL = 0;\n{\n  const mark = new Int32Array(4 * T);\n  for (let y = 0, id = 1; y \u003c T; y++)\n    for (let x = 0; x \u003c T; x++, id++) {\n      for (let i = 0; i \u003c x; i++) mark[G[y * T + i]] = id;\n      for (let j = 0; j \u003c y; j++) mark[G[j * T + x]] = id;\n      for (let d = 1; d \u003c= min(x, y); d++) mark[G[(y - d) * T + x - d]] = id;\n      let m = 0;\n      while (mark[m] === id) m++;\n      G[y * T + x] = m;\n      GALL = max(GALL, m);\n    }\n}\n// The cells of each value, for the sweep.\nconst BY = Array.from({ length: GALL + 1 }, () => []);\nfor (let c = 0; c \u003c T * T; c++) BY[G[c]].push(c);\n\n// The table stands on its corner: position (x, y) is drawn at u = x - y\n// across and v = x + y down, s LEDs to a unit, with (0, 0) at the top.\n// Taking from one heap moves up and to the side at 45 degrees; taking from\n// both moves straight up, and the two rays run down from the corner 13\n// degrees either side of the middle. At Zoom 1 a cell is the LED at its\n// centre and the one above it.\nfunction place(P, s) {\n  P.s = s;\n  P.vis = 0;\n  const top = 0.5 + s;\n  for (let p = 0; p \u003c N; p++) {\n    const u = ((p % W) + 0.5 - 32.5) / s, v = (floor(p / W) + 0.5 - top) / s + 1e-3;\n    const xf = (u + v) / 2, yf = (v - u) / 2, x = round(xf), y = round(yf);\n    if (x \u003c 0 || y \u003c 0 || x >= T || y >= T) {\n      P.ci[p] = -1;\n      continue;\n    }\n    const c = y * T + x;\n    P.ci[p] = c;\n    P.vis = max(P.vis, G[c]);\n    // How far into the cell, in LEDs, for the lines between cells.\n    P.edge[p] = min(0.5 - abs(xf - x), 0.5 - abs(yf - y)) * 1.414 * s;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    ts: 0, K: -1, hue: -1, glow: 0.06, s: 0, vis: 0,\n    ci: new Int32Array(N), edge: new Float32Array(N),\n    L: new Float32Array(T * T), pw: new Float32Array(T * T), pl: new Float32Array(T * T),\n    pal: new Float32Array((GALL + 1) * 3), pb: new Float32Array((GALL + 1) * 3), game: null,\n  });\n  place(P, 1);\n}\n\n// The sweep's value climbs slowly through the small values, where the rays\n// are, and faster through the large ones: K = 12 (e^(2.5 t / 12) - 1), t in\n// seconds at Speed 2.\nconst C = 12, RATE = 2.5;\n\nfunction light(P, g) {\n  if (g >= 0 && g \u003c= GALL) for (const c of BY[g]) P.L[c] = 1;\n}\n\n// A move: to a position of value 0 if there is one (the winner's move),\n// otherwise a few counters from a heap or both (the loser's).\nfunction nextMove(x, y) {\n  if (G[y * T + x] !== 0) {\n    for (let i = 0; i \u003c x; i++) if (G[y * T + i] === 0) return [i, y, 1];\n    for (let j = 0; j \u003c y; j++) if (G[j * T + x] === 0) return [x, j, 1];\n    for (let q = min(x, y); q > 0; q--) if (G[(y - q) * T + x - q] === 0) return [x - q, y - q, 1];\n  }\n  for (;;) {\n    const kind = floor(random() * 3), a = kind === 0 ? x : kind === 1 ? y : min(x, y);\n    if (a \u003c 1) continue;\n    const q = 1 + floor(random() * min(a, 9));\n    return [kind === 1 ? x : x - q, kind === 0 ? y : y - q, 0];\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const s = round(cl(k[2], 1, 4));\n  if (abs(s - P.s) > 1e-3) place(P, s);\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    hsv(P.hue + 0.13, 0.8, 1, P.pal, 0);\n    hsv(P.hue + 0.13, 0.5, 1, P.pb, 0);\n    for (let g = 1; g \u003c= GALL; g++) {\n      const h = P.hue + 0.1 - 0.5 * (1 - exp(-g / 14)) - g / 900;\n      hsv(h, 0.85, 0.17 + 0.6 * exp(-g / 35), P.pal, g * 3);\n      hsv(h, 0.5, 1, P.pb, g * 3);\n    }\n  }\n  P.glow = cl(k[3], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2, ds = d * sp;\n\n  // The sweep.\n  const fade = exp(-ds / (0.45 + 1.6 * P.glow));\n  for (let c = 0; c \u003c T * T; c++) P.L[c] *= fade;\n  const k0 = P.K;\n  P.ts += ds;\n  P.K = P.ts \u003c 0 ? -1 : floor(C * (exp((P.ts * RATE) / C) - 1) + 1e-6);\n  for (let g = max(k0 + 1, 0); g \u003c= P.K; g++) light(P, g);\n  if (P.K > P.vis + 2) (P.ts = -0.8), (P.K = -1);\n\n  // The game.\n  const gd = d * (0.5 + 0.5 * sp), gone = exp(-d / (P.game ? 8 : 1.2));\n  for (let c = 0; c \u003c T * T; c++) (P.pw[c] *= gone), (P.pl[c] *= gone);\n  if (input.btnPressed && input.btnPressed[0]) {\n    const vmax = (H - 1.5 - P.s) / P.s, v = round(vmax * (0.6 + 0.35 * random()));\n    let u = round((random() - 0.5) * 1.6 * min(v, 31 / P.s));\n    if ((u + v) & 1) u += u > 0 ? -1 : 1;\n    const x = (u + v) >> 1, y = (v - u) >> 1;\n    P.game = { x, y, cx: x, cy: y, m: nextMove(x, y), f: 0, wait: 0.4 };\n  }\n  const gm = P.game;\n  if (gm) {\n    if (gm.wait > 0) gm.wait -= gd * 2;\n    else {\n      const [tx, ty, win] = gm.m, len = max(abs(tx - gm.x), abs(ty - gm.y));\n      gm.f = min(1, gm.f + (gd * 30) / (len + 8));\n      const sx = Math.sign(tx - gm.x), sy = Math.sign(ty - gm.y), at = round(gm.f * len);\n      for (let i = 0; i \u003c= at; i++) (win ? P.pw : P.pl)[(gm.y + sy * i) * T + gm.x + sx * i] = 1;\n      gm.cx = gm.x + sx * gm.f * len;\n      gm.cy = gm.y + sy * gm.f * len;\n      if (gm.f >= 1) {\n        gm.x = tx;\n        gm.y = ty;\n        gm.f = 0;\n        gm.wait = 0.5;\n        if (win) P.L[ty * T + tx] = 1;\n        if (tx === 0 && ty === 0) P.game = null;\n        else gm.m = nextMove(tx, ty);\n      }\n    }\n  }\n}\n\nconst WIN = [255, 226, 130], LOSE = [90, 180, 255];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const base = 1 - 0.85 * P.glow, grid = P.s > 2 ? 0.6 : 0, gm = P.game, S = P.s;\n  // The counter, a diamond of light where the game stands.\n  const ux = gm ? 32 + S * (gm.cx - gm.cy) : -99, vy = gm ? S + S * (gm.cx + gm.cy) - (S === 1 ? 0.5 : 0) : -99;\n  for (let p = 0; p \u003c N; p++) {\n    const c = P.ci[p], X = p % W, Y = floor(p / W);\n    if (c \u003c 0) {\n      display.setPixel(X, Y, 0, 0, 0);\n      continue;\n    }\n    const q = G[c] * 3, l = P.L[c], a = P.pw[c] * 0.8, b = P.pl[c] * 0.75, f = q ? base : 0.6 + 0.4 * base;\n    const e = 1 - grid * cl(1 - P.edge[p] * 1.6, 0, 1);\n    // A lit cell flashes white, fades to its own colour at full strength\n    // and then down into the table.\n    const m = min(1, l * 1.5), wt = l * l * l;\n    let r = P.pal[q] * f, g = P.pal[q + 1] * f, bl = P.pal[q + 2] * f;\n    r += (P.pb[q] + (255 - P.pb[q]) * wt - r) * m;\n    g += (P.pb[q + 1] + (255 - P.pb[q + 1]) * wt - g) * m;\n    bl += (P.pb[q + 2] + (255 - P.pb[q + 2]) * wt - bl) * m;\n    r += (LOSE[0] - r) * b + (WIN[0] - r) * a;\n    g += (LOSE[1] - g) * b + (WIN[1] - g) * a;\n    bl += (LOSE[2] - bl) * b + (WIN[2] - bl) * a;\n    const k = cl(S + 1.6 - abs(X - ux) - abs(Y - vy), 0, 1.6) / 1.6;\n    if (k > 0) (r += (255 - r) * k), (g += (255 - g) * k), (bl += (255 - bl) * k);\n    display.setPixel(X, Y, r * e, g * e, bl * e);\n  }\n}\n","layer":{"id":"layer-wythoff-nim","type":"code","name":"wythoff-nim","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Wythoff Nim\n// Family:  algo\n// Idea:    The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Wythoff's game (Willem Abraham Wythoff, 1907) and its Sprague-Grundy values (Roland Sprague 1935, Patrick Grundy 1939), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple.\n// Knob 2: Speed. How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half.\n// Knob 3: Zoom. LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays.\n// Knob 4: Glow. How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds.\n// Buttons: K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two heaps of x and y counters. A move takes any number from one heap, or\n// the same number from both; whoever takes the last counter wins. A\n// position's Grundy value is the smallest number not among the values one\n// move away: left along its row, up its column, up its diagonal. The\n// positions of value 0 are the ones to move to: (floor(n phi),\n// floor(n phi^2)) and their mirror images, on two rays of slopes phi and\n// 1/phi. Every other value gathers along the same two rays, wobbling off\n// them without ever falling into a period (Dress, Flammenkamp and Pink,\n// 1999), and down the middle the values grow like x + y.\nconst T = 82;\nconst G = new Int16Array(T * T);\nlet GALL = 0;\n{\n  const mark = new Int32Array(4 * T);\n  for (let y = 0, id = 1; y \u003c T; y++)\n    for (let x = 0; x \u003c T; x++, id++) {\n      for (let i = 0; i \u003c x; i++) mark[G[y * T + i]] = id;\n      for (let j = 0; j \u003c y; j++) mark[G[j * T + x]] = id;\n      for (let d = 1; d \u003c= min(x, y); d++) mark[G[(y - d) * T + x - d]] = id;\n      let m = 0;\n      while (mark[m] === id) m++;\n      G[y * T + x] = m;\n      GALL = max(GALL, m);\n    }\n}\n// The cells of each value, for the sweep.\nconst BY = Array.from({ length: GALL + 1 }, () => []);\nfor (let c = 0; c \u003c T * T; c++) BY[G[c]].push(c);\n\n// The table stands on its corner: position (x, y) is drawn at u = x - y\n// across and v = x + y down, s LEDs to a unit, with (0, 0) at the top.\n// Taking from one heap moves up and to the side at 45 degrees; taking from\n// both moves straight up, and the two rays run down from the corner 13\n// degrees either side of the middle. At Zoom 1 a cell is the LED at its\n// centre and the one above it.\nfunction place(P, s) {\n  P.s = s;\n  P.vis = 0;\n  const top = 0.5 + s;\n  for (let p = 0; p \u003c N; p++) {\n    const u = ((p % W) + 0.5 - 32.5) / s, v = (floor(p / W) + 0.5 - top) / s + 1e-3;\n    const xf = (u + v) / 2, yf = (v - u) / 2, x = round(xf), y = round(yf);\n    if (x \u003c 0 || y \u003c 0 || x >= T || y >= T) {\n      P.ci[p] = -1;\n      continue;\n    }\n    const c = y * T + x;\n    P.ci[p] = c;\n    P.vis = max(P.vis, G[c]);\n    // How far into the cell, in LEDs, for the lines between cells.\n    P.edge[p] = min(0.5 - abs(xf - x), 0.5 - abs(yf - y)) * 1.414 * s;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    ts: 0, K: -1, hue: -1, glow: 0.06, s: 0, vis: 0,\n    ci: new Int32Array(N), edge: new Float32Array(N),\n    L: new Float32Array(T * T), pw: new Float32Array(T * T), pl: new Float32Array(T * T),\n    pal: new Float32Array((GALL + 1) * 3), pb: new Float32Array((GALL + 1) * 3), game: null,\n  });\n  place(P, 1);\n}\n\n// The sweep's value climbs slowly through the small values, where the rays\n// are, and faster through the large ones: K = 12 (e^(2.5 t / 12) - 1), t in\n// seconds at Speed 2.\nconst C = 12, RATE = 2.5;\n\nfunction light(P, g) {\n  if (g >= 0 && g \u003c= GALL) for (const c of BY[g]) P.L[c] = 1;\n}\n\n// A move: to a position of value 0 if there is one (the winner's move),\n// otherwise a few counters from a heap or both (the loser's).\nfunction nextMove(x, y) {\n  if (G[y * T + x] !== 0) {\n    for (let i = 0; i \u003c x; i++) if (G[y * T + i] === 0) return [i, y, 1];\n    for (let j = 0; j \u003c y; j++) if (G[j * T + x] === 0) return [x, j, 1];\n    for (let q = min(x, y); q > 0; q--) if (G[(y - q) * T + x - q] === 0) return [x - q, y - q, 1];\n  }\n  for (;;) {\n    const kind = floor(random() * 3), a = kind === 0 ? x : kind === 1 ? y : min(x, y);\n    if (a \u003c 1) continue;\n    const q = 1 + floor(random() * min(a, 9));\n    return [kind === 1 ? x : x - q, kind === 0 ? y : y - q, 0];\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const s = round(cl(k[2], 1, 4));\n  if (abs(s - P.s) > 1e-3) place(P, s);\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    hsv(P.hue + 0.13, 0.8, 1, P.pal, 0);\n    hsv(P.hue + 0.13, 0.5, 1, P.pb, 0);\n    for (let g = 1; g \u003c= GALL; g++) {\n      const h = P.hue + 0.1 - 0.5 * (1 - exp(-g / 14)) - g / 900;\n      hsv(h, 0.85, 0.17 + 0.6 * exp(-g / 35), P.pal, g * 3);\n      hsv(h, 0.5, 1, P.pb, g * 3);\n    }\n  }\n  P.glow = cl(k[3], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2, ds = d * sp;\n\n  // The sweep.\n  const fade = exp(-ds / (0.45 + 1.6 * P.glow));\n  for (let c = 0; c \u003c T * T; c++) P.L[c] *= fade;\n  const k0 = P.K;\n  P.ts += ds;\n  P.K = P.ts \u003c 0 ? -1 : floor(C * (exp((P.ts * RATE) / C) - 1) + 1e-6);\n  for (let g = max(k0 + 1, 0); g \u003c= P.K; g++) light(P, g);\n  if (P.K > P.vis + 2) (P.ts = -0.8), (P.K = -1);\n\n  // The game.\n  const gd = d * (0.5 + 0.5 * sp), gone = exp(-d / (P.game ? 8 : 1.2));\n  for (let c = 0; c \u003c T * T; c++) (P.pw[c] *= gone), (P.pl[c] *= gone);\n  if (input.btnPressed && input.btnPressed[0]) {\n    const vmax = (H - 1.5 - P.s) / P.s, v = round(vmax * (0.6 + 0.35 * random()));\n    let u = round((random() - 0.5) * 1.6 * min(v, 31 / P.s));\n    if ((u + v) & 1) u += u > 0 ? -1 : 1;\n    const x = (u + v) >> 1, y = (v - u) >> 1;\n    P.game = { x, y, cx: x, cy: y, m: nextMove(x, y), f: 0, wait: 0.4 };\n  }\n  const gm = P.game;\n  if (gm) {\n    if (gm.wait > 0) gm.wait -= gd * 2;\n    else {\n      const [tx, ty, win] = gm.m, len = max(abs(tx - gm.x), abs(ty - gm.y));\n      gm.f = min(1, gm.f + (gd * 30) / (len + 8));\n      const sx = Math.sign(tx - gm.x), sy = Math.sign(ty - gm.y), at = round(gm.f * len);\n      for (let i = 0; i \u003c= at; i++) (win ? P.pw : P.pl)[(gm.y + sy * i) * T + gm.x + sx * i] = 1;\n      gm.cx = gm.x + sx * gm.f * len;\n      gm.cy = gm.y + sy * gm.f * len;\n      if (gm.f >= 1) {\n        gm.x = tx;\n        gm.y = ty;\n        gm.f = 0;\n        gm.wait = 0.5;\n        if (win) P.L[ty * T + tx] = 1;\n        if (tx === 0 && ty === 0) P.game = null;\n        else gm.m = nextMove(tx, ty);\n      }\n    }\n  }\n}\n\nconst WIN = [255, 226, 130], LOSE = [90, 180, 255];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const base = 1 - 0.85 * P.glow, grid = P.s > 2 ? 0.6 : 0, gm = P.game, S = P.s;\n  // The counter, a diamond of light where the game stands.\n  const ux = gm ? 32 + S * (gm.cx - gm.cy) : -99, vy = gm ? S + S * (gm.cx + gm.cy) - (S === 1 ? 0.5 : 0) : -99;\n  for (let p = 0; p \u003c N; p++) {\n    const c = P.ci[p], X = p % W, Y = floor(p / W);\n    if (c \u003c 0) {\n      display.setPixel(X, Y, 0, 0, 0);\n      continue;\n    }\n    const q = G[c] * 3, l = P.L[c], a = P.pw[c] * 0.8, b = P.pl[c] * 0.75, f = q ? base : 0.6 + 0.4 * base;\n    const e = 1 - grid * cl(1 - P.edge[p] * 1.6, 0, 1);\n    // A lit cell flashes white, fades to its own colour at full strength\n    // and then down into the table.\n    const m = min(1, l * 1.5), wt = l * l * l;\n    let r = P.pal[q] * f, g = P.pal[q + 1] * f, bl = P.pal[q + 2] * f;\n    r += (P.pb[q] + (255 - P.pb[q]) * wt - r) * m;\n    g += (P.pb[q + 1] + (255 - P.pb[q + 1]) * wt - g) * m;\n    bl += (P.pb[q + 2] + (255 - P.pb[q + 2]) * wt - bl) * m;\n    r += (LOSE[0] - r) * b + (WIN[0] - r) * a;\n    g += (LOSE[1] - g) * b + (WIN[1] - g) * a;\n    bl += (LOSE[2] - bl) * b + (WIN[2] - bl) * a;\n    const k = cl(S + 1.6 - abs(X - ux) - abs(Y - vy), 0, 1.6) / 1.6;\n    if (k > 0) (r += (255 - r) * k), (g += (255 - g) * k), (bl += (255 - bl) * k);\n    display.setPixel(X, Y, r * e, g * e, bl * e);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half."},{"name":"Zoom","min":1,"max":4,"about":"LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays."},{"name":"Glow","min":0,"max":1,"about":"How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds."}],"start":[0,2,1,0.06],"measures":{"motion":0.0944,"detail":0.0878,"edges":0.5187,"complexity":1.051,"coverage":0.875,"colour":0.3599,"drift":0.0676},"knobResponse":[0.2558,0.0431,0.2303,0.1714]},{"slug":"zen-garden","title":"Zen Garden","family":"line","round":18,"note":"곧장 내려다본 마른 돌 정원이에요. 갈퀴 자국이 이끼 두른 돌 둘레에서 고리로 휘고, 갈퀴가 15줄 띠씩 줄을 다시 그으며 떨어진 단풍잎을 거둬 가요. K1 을 돌리면 아침 해가 저녁 해로 옮겨 가며 돌 그림자와 고리의 밝은 쪽이 따라 돌아요.","idea":"A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","layer":{"id":"layer-zen-garden","type":"code","name":"zen-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds."},{"name":"Stones","min":3,"max":5,"about":"Three, four or five stone groups, each in its moss collar with two or three rings raked round it."},{"name":"Wind","min":0,"max":1,"about":"Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves."}],"start":[0,2,3,0.06],"measures":{"motion":0.0392,"detail":0.2481,"edges":0.4637,"complexity":1.6255,"coverage":0.96,"colour":0.1203,"drift":0.0759},"knobResponse":[0.1756,0.245,0.2327,0.2481]},{"slug":"zeta-loops","title":"Zeta Loops","family":"line","round":29,"note":"리만 제타 함수를 임계선 위에서 t 를 올리며 그려요. 실수축이 패널 위로 서 있고, 밝은 머리가 고리를 돌다가 영점마다 원점을 정확히 지나며 원점에서 고리가 퍼져요. K3 으로 임계선에서 벗어나면 고리가 원점을 비껴가고, K1 을 누르면 머리가 다음 영점까지 달려가요.","idea":"A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.","buttons":"K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.","code":"// ===== Patternflow pattern =====\n// Title:   Zeta Loops\n// Family:  line\n// Idea:    A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Riemann zeta function on the critical line (Bernhard Riemann, 1859), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1\n//\n// Knob 1: Hue. Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail.\n// Knob 2: Speed. How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower.\n// Knob 3: Sigma. How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn.\n// Knob 4: Trail. How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin.\n// Buttons: K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, sqrt, hypot, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The plane turned a quarter turn: the real axis runs up the panel through\n// column OX, the imaginary axis runs left, the origin sits OY rows down.\nconst OX = 32, OY = 92;\n// LEDs to one unit at t. The loops widen with t faster than the panel does,\n// so the view backs off a little as t climbs: 26 at the start, 15 by\n// t = 118, which keeps most of each loop inside the side walls and still\n// lets the later loops come out bigger.\nconst scaleAt = (t) => 26 / (1 + t / 70) ** 0.55;\n// t runs from 0 to TEND and starts again. Samples are DT apart in t.\nconst TEND = 118, DT = 0.008, CAP = 16384;\n\n// Euler-Maclaurin summation: the first N-1 terms of the Dirichlet series,\n// the integral of the tail, and six Bernoulli corrections. With N past\n// t / 2 pi the corrections shrink fast, and ten more terms make it good to\n// many digits at the t this pattern reaches.\nconst NMAX = 64;\nconst LN = new Float64Array(NMAX + 1).map((_, n) => (n ? log(n) : 0));\nconst BF = [1 / 12, -1 / 720, 1 / 30240, -1 / 1209600, 1 / 47900160, -691 / 1307674368000];\nfunction zeta(sr, si, out) {\n  const n0 = min(NMAX - 1, floor(abs(si) / (2 * PI)) + 10);\n  let zr = 0, zi = 0;\n  for (let n = 1; n \u003c n0; n++) {\n    const m = exp(-sr * LN[n]), a = -si * LN[n];\n    zr += m * cos(a);\n    zi += m * sin(a);\n  }\n  // N^-s, then N^(1-s) / (s - 1) and half of N^-s.\n  const L = LN[n0], m = exp(-sr * L), a = -si * L, pr = m * cos(a), pi = m * sin(a);\n  const dr = sr - 1, d2 = dr * dr + si * si, nr = n0 * pr, ni = n0 * pi;\n  zr += (nr * dr + ni * si) / d2 + pr / 2;\n  zi += (ni * dr - nr * si) / d2 + pi / 2;\n  // B2k / (2k)! times s(s+1)...(s+2k-2) times N^(-s-2k+1).\n  let cr = pr / n0, ci = pi / n0, fr = sr, fi = si;\n  for (let k = 0; k \u003c 6; k++) {\n    const c = BF[k];\n    zr += c * (fr * cr - fi * ci);\n    zi += c * (fr * ci + fi * cr);\n    const a1 = sr + 2 * k + 1, a2 = sr + 2 * k + 2;\n    const gr = fr * a1 - fi * si, gi = fr * si + fi * a1;\n    fr = gr * a2 - gi * si;\n    fi = gr * si + gi * a2;\n    cr /= n0 * n0;\n    ci /= n0 * n0;\n  }\n  out[0] = zr;\n  out[1] = zi;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, acc: 0, clock: 0, sc: 26, sig: 0, n: 0, head: -1, race: 0,\n    // Each sample: t, the point, sigma it was taken at, the clock, and 1 when\n    // the curve breaks before it (a restart).\n    T: new Float64Array(CAP), X: new Float32Array(CAP), Y: new Float32Array(CAP), S: new Float64Array(CAP),\n    C: new Float32Array(CAP), B: new Uint8Array(CAP),\n    fix: -1, fixN: 0, dPrev: 9, falling: 0, flashes: [], hue: 0, life: 3, z: new Float64Array(2),\n    R: new Float32Array(N), G: new Float32Array(N), Bl: new Float32Array(N), col: new Float32Array(3),\n    sR: new Float32Array(N), sG: new Float32Array(N), sB: new Float32Array(N), tmp: new Float32Array(N),\n  });\n  // The first frame already shows the curve on its way to the first zero at\n  // t = 14.13: eight seconds of drawing at half the opening speed.\n  for (let i = 0; i \u003c 240; i++) step(P, 1 / 30, 1, 0, 0.06);\n}\n\nfunction push(P, brk) {\n  zeta(0.5 + P.sig, P.t, P.z);\n  const i = (P.head = (P.head + 1) % CAP);\n  P.T[i] = P.t;\n  P.X[i] = P.z[0];\n  P.Y[i] = P.z[1];\n  P.S[i] = P.sig;\n  P.C[i] = P.clock;\n  P.B[i] = brk;\n  P.n = min(P.n + 1, CAP);\n  // A pass by the origin is the moment the distance stops falling. Its\n  // flash is as bright as the pass is close: full on the critical line, a\n  // glimmer a few LEDs off it.\n  const d = hypot(P.z[0], P.z[1]);\n  if (!brk && d > P.dPrev && P.falling && P.dPrev \u003c 0.6) {\n    const j = (i + CAP - 1) % CAP, k = (i + CAP - 2) % CAP;\n    const miss = segDist(P.X[k], P.Y[k], P.X[j], P.Y[j], P.X[i], P.Y[i]) * P.sc;\n    const s = exp(-(miss * miss) / 3);\n    if (s > 0.05) P.flashes.push([P.clock, s]);\n    if (P.race && P.t > P.race) P.race = 0;\n  }\n  P.falling = d \u003c P.dPrev ? 1 : 0;\n  P.dPrev = brk ? 9 : d;\n}\n\n// How close the two segments a-b-c come to the origin.\nfunction segDist(ax, ay, bx, by, cx, cy) {\n  const one = (px, py, qx, qy) => {\n    const dx = qx - px, dy = qy - py, l = dx * dx + dy * dy, u = l > 0 ? cl(-(px * dx + py * dy) / l, 0, 1) : 0;\n    return hypot(px + u * dx, py + u * dy);\n  };\n  return min(one(ax, ay, bx, by), one(bx, by, cx, cy));\n}\n\nfunction step(P, d, speed, sig, trail) {\n  P.clock += d;\n  P.life = 0.8 + 29.2 * trail ** 0.4;\n  P.sc += (scaleAt(P.t) - P.sc) * min(1, d * 1.5);\n  if (abs(sig - P.sig) > 0.002) (P.sig = sig), (P.fix = P.head), (P.fixN = P.n);\n  // t climbs a little slower as it rises, so the head's speed on the panel\n  // grows only slowly while the loops widen and the zeros crowd closer.\n  const rate = (speed * 1.55 * (P.race ? 10 : 1)) / (1 + P.t / 90);\n  P.acc += rate * d;\n  let brk = P.head \u003c 0 ? 1 : 0;\n  for (; P.acc >= DT; P.acc -= DT) {\n    P.t += DT;\n    if (P.t > TEND) (P.t = 0), (brk = 1), (P.race = 0);\n    push(P, brk);\n    brk = 0;\n  }\n  // The trail redraws itself at a new Sigma, newest first, a few hundred\n  // samples a frame.\n  if (P.fix >= 0) {\n    for (let c = 0; c \u003c 500 && P.fix >= 0; c++) {\n      const i = P.fix;\n      if (P.S[i] !== P.sig) {\n        zeta(0.5 + P.sig, P.T[i], P.z);\n        P.X[i] = P.z[0];\n        P.Y[i] = P.z[1];\n        P.S[i] = P.sig;\n      }\n      const j = (i + CAP - 1) % CAP;\n      P.fix = --P.fixN > 0 && P.clock - P.C[j] \u003c P.life ? j : -1;\n    }\n  }\n  P.flashes = P.flashes.filter((f) => P.clock - f[0] \u003c 1.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const b = input.btnPressed || [];\n  // The race runs past a zero the head is about to reach anyway and stops\n  // at the one after.\n  if (b[0]) P.race = P.t + 1;\n  if (b[1]) (P.t = TEND + 1), (P.race = 0);\n  step(P, d, cl(k[1], 0.2, 3), cl(k[2], -0.25, 0.25), cl(k[3], 0, 1));\n}\n\n// A soft dot of light, kept to the brightest of what is already there: full\n// on the LED under it, fading to nothing 1.3 LEDs out, so the curve draws\n// as a line a little under two LEDs wide.\nfunction dot(P, x, y, r, g, b) {\n  const cx = floor(x), cy = floor(y);\n  for (let yy = cy - 1; yy \u003c= cy + 1; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy + 0.5 - y;\n    for (let xx = cx - 1; xx \u003c= cx + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x, w = 1.3 - sqrt(dx * dx + dy * dy);\n      if (w \u003c= 0) continue;\n      const p = yy * W + xx, v = w > 1 ? 1 : w;\n      if (P.R[p] \u003c r * v) P.R[p] = r * v;\n      if (P.G[p] \u003c g * v) P.G[p] = g * v;\n      if (P.Bl[p] \u003c b * v) P.Bl[p] = b * v;\n    }\n  }\n}\n// Light added on top of the curve and its glow.\nconst add = (P, x, y, r, g, b) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  P.sR[p] += r;\n  P.sG[p] += g;\n  P.sB[p] += b;\n};\n\n// Two passes of a five-wide box along rows, then along columns, each a\n// running sum; the panel's edges count as dark.\nconst GLOW = 0.6;\nfunction box(a, o, step, n, out) {\n  let v = a[o] + a[o + step] + a[o + 2 * step];\n  for (let i = 0; i \u003c n; i++) {\n    out[o + i * step] = v / 5;\n    if (i + 3 \u003c n) v += a[o + (i + 3) * step];\n    if (i >= 2) v -= a[o + (i - 2) * step];\n  }\n}\nfunction blur(src, tmp, dst) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0; y \u003c H; y++) box(pass ? dst : src, y * W, 1, W, tmp);\n    for (let x = 0; x \u003c W; x++) box(tmp, x, W, H, dst);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const R = P.R, G = P.G, B = P.Bl, col = P.col;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The curve, oldest first, each segment walked in steps under half an LED.\n  const life = P.life;\n  let n = 0;\n  while (n \u003c P.n && P.clock - P.C[(P.head + CAP - n) % CAP] \u003c life) n++;\n  let i = (P.head + CAP - n + 1) % CAP;\n  for (let c = 0, px = 0, py = 0, ok = 0; c \u003c n; c++, i = (i + 1) % CAP) {\n    const age = P.clock - P.C[i];\n    const x = OX + 0.5 - P.Y[i] * P.sc, y = OY + 0.5 - P.X[i] * P.sc;\n    const f = 1 - age / life, v = sqrt(f);\n    // Young curve is pale, then the hue, then a deeper tail.\n    hsv(P.hue + 0.5 + 0.18 * (1 - f), 0.6 + 0.35 * min(1, (1 - f) * 4), v, col);\n    if (ok && !P.B[i]) {\n      const L = hypot(x - px, y - py), m = max(1, Math.ceil(L / 0.5));\n      for (let s = 1; s \u003c= m; s++) dot(P, px + ((x - px) * s) / m, py + ((y - py) * s) / m, col[0] * 255, col[1] * 255, col[2] * 255);\n    } else dot(P, x, y, col[0] * 255, col[1] * 255, col[2] * 255);\n    ok = 1;\n    px = x;\n    py = y;\n  }\n  // The curve glows: a soft blur of its own light, two box passes each\n  // way, laid under it. On the panel a bare 1-LED line looks thin.\n  const sR = P.sR, sG = P.sG, sB = P.sB;\n  blur(R, P.tmp, sR);\n  blur(G, P.tmp, sG);\n  blur(B, P.tmp, sB);\n  for (let p = 0; p \u003c N; p++) (sR[p] = R[p] + sR[p] * GLOW), (sG[p] = G[p] + sG[p] * GLOW), (sB[p] = B[p] + sB[p] * GLOW);\n  // The axes, dim: the real axis up the panel with a tick at each whole\n  // number, and a short stub of the imaginary axis through the origin.\n  for (let y = 0; y \u003c H; y++) {\n    const re = (OY - y) / P.sc, tick = abs(re - Math.round(re)) * P.sc \u003c 0.5;\n    add(P, OX, y, 14, 14, 18);\n    if (tick) for (let x = -2; x \u003c= 2; x++) if (x) add(P, OX + x, y, 16, 16, 20);\n  }\n  for (let x = OX - 6; x \u003c= OX + 6; x++) if (x !== OX) add(P, x, OY, 12, 12, 16);\n  // Each pass through the origin: the origin flares and a ring opens, in a\n  // pale rose that stays clear of the curve's colour and never browns.\n  hsv(P.hue + 0.92, 0.45, 1, col);\n  const fr = col[0] * 255, fg = col[1] * 255, fb = col[2] * 255;\n  for (const [c0, s] of P.flashes) {\n    const a = P.clock - c0, rad = 1.5 + a * 34, v = s * exp(-a * 2);\n    for (let y = max(0, floor(OY - rad - 2)); y \u003c= min(H - 1, OY + rad + 2); y++)\n      for (let x = max(0, floor(OX - rad - 2)); x \u003c= min(W - 1, OX + rad + 2); x++) {\n        const d = hypot(x - OX, y - OY), w = max(0, 1 - abs(d - rad) / 1.1) + max(0, 1 - d / 3.5) * exp(-a * 3) * 1.6;\n        if (w > 0) add(P, x, y, fr * v * w, fg * v * w, fb * v * w);\n      }\n  }\n  add(P, OX, OY, 40, 40, 44);\n  // The head: white with a small glow.\n  if (P.n) {\n    const h = P.head, hx = OX + 0.5 - P.Y[h] * P.sc, hy = OY + 0.5 - P.X[h] * P.sc;\n    for (let y = floor(hy) - 2; y \u003c= floor(hy) + 2; y++)\n      for (let x = floor(hx) - 2; x \u003c= floor(hx) + 2; x++) {\n        const d = hypot(x + 0.5 - hx, y + 0.5 - hy), w = exp(-d * d * 0.9);\n        add(P, x, y, 255 * w, 250 * w, 235 * w);\n      }\n  }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, sR[p]), min(255, sG[p]), min(255, sB[p]));\n}\n","layer":{"id":"layer-zeta-loops","type":"code","name":"zeta-loops","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Zeta Loops\n// Family:  line\n// Idea:    A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Riemann zeta function on the critical line (Bernhard Riemann, 1859), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1\n//\n// Knob 1: Hue. Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail.\n// Knob 2: Speed. How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower.\n// Knob 3: Sigma. How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn.\n// Knob 4: Trail. How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin.\n// Buttons: K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, sqrt, hypot, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The plane turned a quarter turn: the real axis runs up the panel through\n// column OX, the imaginary axis runs left, the origin sits OY rows down.\nconst OX = 32, OY = 92;\n// LEDs to one unit at t. The loops widen with t faster than the panel does,\n// so the view backs off a little as t climbs: 26 at the start, 15 by\n// t = 118, which keeps most of each loop inside the side walls and still\n// lets the later loops come out bigger.\nconst scaleAt = (t) => 26 / (1 + t / 70) ** 0.55;\n// t runs from 0 to TEND and starts again. Samples are DT apart in t.\nconst TEND = 118, DT = 0.008, CAP = 16384;\n\n// Euler-Maclaurin summation: the first N-1 terms of the Dirichlet series,\n// the integral of the tail, and six Bernoulli corrections. With N past\n// t / 2 pi the corrections shrink fast, and ten more terms make it good to\n// many digits at the t this pattern reaches.\nconst NMAX = 64;\nconst LN = new Float64Array(NMAX + 1).map((_, n) => (n ? log(n) : 0));\nconst BF = [1 / 12, -1 / 720, 1 / 30240, -1 / 1209600, 1 / 47900160, -691 / 1307674368000];\nfunction zeta(sr, si, out) {\n  const n0 = min(NMAX - 1, floor(abs(si) / (2 * PI)) + 10);\n  let zr = 0, zi = 0;\n  for (let n = 1; n \u003c n0; n++) {\n    const m = exp(-sr * LN[n]), a = -si * LN[n];\n    zr += m * cos(a);\n    zi += m * sin(a);\n  }\n  // N^-s, then N^(1-s) / (s - 1) and half of N^-s.\n  const L = LN[n0], m = exp(-sr * L), a = -si * L, pr = m * cos(a), pi = m * sin(a);\n  const dr = sr - 1, d2 = dr * dr + si * si, nr = n0 * pr, ni = n0 * pi;\n  zr += (nr * dr + ni * si) / d2 + pr / 2;\n  zi += (ni * dr - nr * si) / d2 + pi / 2;\n  // B2k / (2k)! times s(s+1)...(s+2k-2) times N^(-s-2k+1).\n  let cr = pr / n0, ci = pi / n0, fr = sr, fi = si;\n  for (let k = 0; k \u003c 6; k++) {\n    const c = BF[k];\n    zr += c * (fr * cr - fi * ci);\n    zi += c * (fr * ci + fi * cr);\n    const a1 = sr + 2 * k + 1, a2 = sr + 2 * k + 2;\n    const gr = fr * a1 - fi * si, gi = fr * si + fi * a1;\n    fr = gr * a2 - gi * si;\n    fi = gr * si + gi * a2;\n    cr /= n0 * n0;\n    ci /= n0 * n0;\n  }\n  out[0] = zr;\n  out[1] = zi;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, acc: 0, clock: 0, sc: 26, sig: 0, n: 0, head: -1, race: 0,\n    // Each sample: t, the point, sigma it was taken at, the clock, and 1 when\n    // the curve breaks before it (a restart).\n    T: new Float64Array(CAP), X: new Float32Array(CAP), Y: new Float32Array(CAP), S: new Float64Array(CAP),\n    C: new Float32Array(CAP), B: new Uint8Array(CAP),\n    fix: -1, fixN: 0, dPrev: 9, falling: 0, flashes: [], hue: 0, life: 3, z: new Float64Array(2),\n    R: new Float32Array(N), G: new Float32Array(N), Bl: new Float32Array(N), col: new Float32Array(3),\n    sR: new Float32Array(N), sG: new Float32Array(N), sB: new Float32Array(N), tmp: new Float32Array(N),\n  });\n  // The first frame already shows the curve on its way to the first zero at\n  // t = 14.13: eight seconds of drawing at half the opening speed.\n  for (let i = 0; i \u003c 240; i++) step(P, 1 / 30, 1, 0, 0.06);\n}\n\nfunction push(P, brk) {\n  zeta(0.5 + P.sig, P.t, P.z);\n  const i = (P.head = (P.head + 1) % CAP);\n  P.T[i] = P.t;\n  P.X[i] = P.z[0];\n  P.Y[i] = P.z[1];\n  P.S[i] = P.sig;\n  P.C[i] = P.clock;\n  P.B[i] = brk;\n  P.n = min(P.n + 1, CAP);\n  // A pass by the origin is the moment the distance stops falling. Its\n  // flash is as bright as the pass is close: full on the critical line, a\n  // glimmer a few LEDs off it.\n  const d = hypot(P.z[0], P.z[1]);\n  if (!brk && d > P.dPrev && P.falling && P.dPrev \u003c 0.6) {\n    const j = (i + CAP - 1) % CAP, k = (i + CAP - 2) % CAP;\n    const miss = segDist(P.X[k], P.Y[k], P.X[j], P.Y[j], P.X[i], P.Y[i]) * P.sc;\n    const s = exp(-(miss * miss) / 3);\n    if (s > 0.05) P.flashes.push([P.clock, s]);\n    if (P.race && P.t > P.race) P.race = 0;\n  }\n  P.falling = d \u003c P.dPrev ? 1 : 0;\n  P.dPrev = brk ? 9 : d;\n}\n\n// How close the two segments a-b-c come to the origin.\nfunction segDist(ax, ay, bx, by, cx, cy) {\n  const one = (px, py, qx, qy) => {\n    const dx = qx - px, dy = qy - py, l = dx * dx + dy * dy, u = l > 0 ? cl(-(px * dx + py * dy) / l, 0, 1) : 0;\n    return hypot(px + u * dx, py + u * dy);\n  };\n  return min(one(ax, ay, bx, by), one(bx, by, cx, cy));\n}\n\nfunction step(P, d, speed, sig, trail) {\n  P.clock += d;\n  P.life = 0.8 + 29.2 * trail ** 0.4;\n  P.sc += (scaleAt(P.t) - P.sc) * min(1, d * 1.5);\n  if (abs(sig - P.sig) > 0.002) (P.sig = sig), (P.fix = P.head), (P.fixN = P.n);\n  // t climbs a little slower as it rises, so the head's speed on the panel\n  // grows only slowly while the loops widen and the zeros crowd closer.\n  const rate = (speed * 1.55 * (P.race ? 10 : 1)) / (1 + P.t / 90);\n  P.acc += rate * d;\n  let brk = P.head \u003c 0 ? 1 : 0;\n  for (; P.acc >= DT; P.acc -= DT) {\n    P.t += DT;\n    if (P.t > TEND) (P.t = 0), (brk = 1), (P.race = 0);\n    push(P, brk);\n    brk = 0;\n  }\n  // The trail redraws itself at a new Sigma, newest first, a few hundred\n  // samples a frame.\n  if (P.fix >= 0) {\n    for (let c = 0; c \u003c 500 && P.fix >= 0; c++) {\n      const i = P.fix;\n      if (P.S[i] !== P.sig) {\n        zeta(0.5 + P.sig, P.T[i], P.z);\n        P.X[i] = P.z[0];\n        P.Y[i] = P.z[1];\n        P.S[i] = P.sig;\n      }\n      const j = (i + CAP - 1) % CAP;\n      P.fix = --P.fixN > 0 && P.clock - P.C[j] \u003c P.life ? j : -1;\n    }\n  }\n  P.flashes = P.flashes.filter((f) => P.clock - f[0] \u003c 1.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const b = input.btnPressed || [];\n  // The race runs past a zero the head is about to reach anyway and stops\n  // at the one after.\n  if (b[0]) P.race = P.t + 1;\n  if (b[1]) (P.t = TEND + 1), (P.race = 0);\n  step(P, d, cl(k[1], 0.2, 3), cl(k[2], -0.25, 0.25), cl(k[3], 0, 1));\n}\n\n// A soft dot of light, kept to the brightest of what is already there: full\n// on the LED under it, fading to nothing 1.3 LEDs out, so the curve draws\n// as a line a little under two LEDs wide.\nfunction dot(P, x, y, r, g, b) {\n  const cx = floor(x), cy = floor(y);\n  for (let yy = cy - 1; yy \u003c= cy + 1; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy + 0.5 - y;\n    for (let xx = cx - 1; xx \u003c= cx + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x, w = 1.3 - sqrt(dx * dx + dy * dy);\n      if (w \u003c= 0) continue;\n      const p = yy * W + xx, v = w > 1 ? 1 : w;\n      if (P.R[p] \u003c r * v) P.R[p] = r * v;\n      if (P.G[p] \u003c g * v) P.G[p] = g * v;\n      if (P.Bl[p] \u003c b * v) P.Bl[p] = b * v;\n    }\n  }\n}\n// Light added on top of the curve and its glow.\nconst add = (P, x, y, r, g, b) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  P.sR[p] += r;\n  P.sG[p] += g;\n  P.sB[p] += b;\n};\n\n// Two passes of a five-wide box along rows, then along columns, each a\n// running sum; the panel's edges count as dark.\nconst GLOW = 0.6;\nfunction box(a, o, step, n, out) {\n  let v = a[o] + a[o + step] + a[o + 2 * step];\n  for (let i = 0; i \u003c n; i++) {\n    out[o + i * step] = v / 5;\n    if (i + 3 \u003c n) v += a[o + (i + 3) * step];\n    if (i >= 2) v -= a[o + (i - 2) * step];\n  }\n}\nfunction blur(src, tmp, dst) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0; y \u003c H; y++) box(pass ? dst : src, y * W, 1, W, tmp);\n    for (let x = 0; x \u003c W; x++) box(tmp, x, W, H, dst);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const R = P.R, G = P.G, B = P.Bl, col = P.col;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The curve, oldest first, each segment walked in steps under half an LED.\n  const life = P.life;\n  let n = 0;\n  while (n \u003c P.n && P.clock - P.C[(P.head + CAP - n) % CAP] \u003c life) n++;\n  let i = (P.head + CAP - n + 1) % CAP;\n  for (let c = 0, px = 0, py = 0, ok = 0; c \u003c n; c++, i = (i + 1) % CAP) {\n    const age = P.clock - P.C[i];\n    const x = OX + 0.5 - P.Y[i] * P.sc, y = OY + 0.5 - P.X[i] * P.sc;\n    const f = 1 - age / life, v = sqrt(f);\n    // Young curve is pale, then the hue, then a deeper tail.\n    hsv(P.hue + 0.5 + 0.18 * (1 - f), 0.6 + 0.35 * min(1, (1 - f) * 4), v, col);\n    if (ok && !P.B[i]) {\n      const L = hypot(x - px, y - py), m = max(1, Math.ceil(L / 0.5));\n      for (let s = 1; s \u003c= m; s++) dot(P, px + ((x - px) * s) / m, py + ((y - py) * s) / m, col[0] * 255, col[1] * 255, col[2] * 255);\n    } else dot(P, x, y, col[0] * 255, col[1] * 255, col[2] * 255);\n    ok = 1;\n    px = x;\n    py = y;\n  }\n  // The curve glows: a soft blur of its own light, two box passes each\n  // way, laid under it. On the panel a bare 1-LED line looks thin.\n  const sR = P.sR, sG = P.sG, sB = P.sB;\n  blur(R, P.tmp, sR);\n  blur(G, P.tmp, sG);\n  blur(B, P.tmp, sB);\n  for (let p = 0; p \u003c N; p++) (sR[p] = R[p] + sR[p] * GLOW), (sG[p] = G[p] + sG[p] * GLOW), (sB[p] = B[p] + sB[p] * GLOW);\n  // The axes, dim: the real axis up the panel with a tick at each whole\n  // number, and a short stub of the imaginary axis through the origin.\n  for (let y = 0; y \u003c H; y++) {\n    const re = (OY - y) / P.sc, tick = abs(re - Math.round(re)) * P.sc \u003c 0.5;\n    add(P, OX, y, 14, 14, 18);\n    if (tick) for (let x = -2; x \u003c= 2; x++) if (x) add(P, OX + x, y, 16, 16, 20);\n  }\n  for (let x = OX - 6; x \u003c= OX + 6; x++) if (x !== OX) add(P, x, OY, 12, 12, 16);\n  // Each pass through the origin: the origin flares and a ring opens, in a\n  // pale rose that stays clear of the curve's colour and never browns.\n  hsv(P.hue + 0.92, 0.45, 1, col);\n  const fr = col[0] * 255, fg = col[1] * 255, fb = col[2] * 255;\n  for (const [c0, s] of P.flashes) {\n    const a = P.clock - c0, rad = 1.5 + a * 34, v = s * exp(-a * 2);\n    for (let y = max(0, floor(OY - rad - 2)); y \u003c= min(H - 1, OY + rad + 2); y++)\n      for (let x = max(0, floor(OX - rad - 2)); x \u003c= min(W - 1, OX + rad + 2); x++) {\n        const d = hypot(x - OX, y - OY), w = max(0, 1 - abs(d - rad) / 1.1) + max(0, 1 - d / 3.5) * exp(-a * 3) * 1.6;\n        if (w > 0) add(P, x, y, fr * v * w, fg * v * w, fb * v * w);\n      }\n  }\n  add(P, OX, OY, 40, 40, 44);\n  // The head: white with a small glow.\n  if (P.n) {\n    const h = P.head, hx = OX + 0.5 - P.Y[h] * P.sc, hy = OY + 0.5 - P.X[h] * P.sc;\n    for (let y = floor(hy) - 2; y \u003c= floor(hy) + 2; y++)\n      for (let x = floor(hx) - 2; x \u003c= floor(hx) + 2; x++) {\n        const d = hypot(x + 0.5 - hx, y + 0.5 - hy), w = exp(-d * d * 0.9);\n        add(P, x, y, 255 * w, 250 * w, 235 * w);\n      }\n  }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, sR[p]), min(255, sG[p]), min(255, sB[p]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail."},{"name":"Speed","min":0.2,"max":3,"about":"How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower."},{"name":"Sigma","min":-0.25,"max":0.25,"about":"How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn."},{"name":"Trail","min":0,"max":1,"about":"How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin."}],"start":[0,2,0,0.06],"measures":{"motion":0.1356,"detail":0.0457,"edges":0.4182,"complexity":0.8175,"coverage":0.1691,"colour":0.1955,"drift":0.0901},"knobResponse":[0.0373,0.0539,0.0648,0.0438]}],"families":{"algo":{"label":"알고리즘","color":"#e0c060"},"automata":{"label":"셀룰러 오토마타","color":"#9be15d"},"bird":{"label":"새","color":"#778800"},"body":{"label":"몸","color":"#bb5566"},"celestial":{"label":"천체","color":"#ffffaa"},"cells":{"label":"보로노이·셀","color":"#5fd0d0"},"chemistry":{"label":"화학·실험","color":"#00bb00"},"circuit":{"label":"전자 회로","color":"#2e7d32"},"city":{"label":"도시","color":"#22ff00"},"construction":{"label":"공사·건설","color":"#ffee00"},"cosmetic":{"label":"화장품 팝업","color":"#f2c6c2"},"data":{"label":"데이터 그림","color":"#7fe08a"},"fair":{"label":"놀이공원","color":"#ffffff"},"farm":{"label":"농사·밭","color":"#449911"},"film":{"label":"필름·영화","color":"#ff0000"},"flight":{"label":"비행","color":"#9944ee"},"fractal":{"label":"프랙탈","color":"#a3a0ff"},"fungi":{"label":"버섯·균사","color":"#00ff88"},"geometry":{"label":"기하·대칭","color":"#c77dff"},"glass":{"label":"유리","color":"#b0002a"},"glitch":{"label":"글리치","color":"#b0b8c8"},"growth":{"label":"자라남","color":"#d4c094"},"insect":{"label":"곤충","color":"#b4e61e"},"kitchen":{"label":"부엌","color":"#ff5500"},"light":{"label":"빛","color":"#7ef0d0"},"line":{"label":"선·궤적","color":"#ff7a45"},"machine":{"label":"기계·톱니","color":"#4a2cff"},"mammal":{"label":"짐승","color":"#998844"},"microbe":{"label":"미생물","color":"#aa00aa"},"mineral":{"label":"광물·결정","color":"#886688"},"music":{"label":"음악·악기","color":"#a0705a"},"noise":{"label":"노이즈·흐름","color":"#5ec8ff"},"number":{"label":"수론","color":"#00aaff"},"ocean":{"label":"바다","color":"#1f7fb8"},"paper":{"label":"종이","color":"#996600"},"particle":{"label":"입자","color":"#ffb02e"},"physics":{"label":"물리·스프링","color":"#ff9db0"},"pixel":{"label":"픽셀 아트","color":"#ffd166"},"polar":{"label":"얼음·극지","color":"#00ffff"},"pottery":{"label":"도자기","color":"#b05030"},"print":{"label":"망점·인쇄","color":"#f0a0e0"},"rail":{"label":"철도","color":"#00bb66"},"rhythm":{"label":"리듬·펄스","color":"#ff4d4d"},"sim":{"label":"시뮬레이션","color":"#3fe0a8"},"space":{"label":"공간·원근","color":"#e8e05a"},"sport":{"label":"운동·경기","color":"#337777"},"stage":{"label":"무대·공연","color":"#ff0066"},"textile":{"label":"직물·짜임","color":"#e04ad8"},"time":{"label":"시계·시간","color":"#ff8f5a"},"topology":{"label":"위상·매듭","color":"#80ff40"},"toy":{"label":"장난감","color":"#dd11ff"},"type":{"label":"글자","color":"#ff5fa2"},"volcano":{"label":"화산","color":"#bb2200"},"wave":{"label":"물결·간섭","color":"#4f7dff"},"weather":{"label":"날씨·자연","color":"#8fc0ff"}}}</script>
+<script id="study-data" type="application/json">{"patterns":[{"slug":"abyss","title":"Abyss","family":"ocean","round":16,"note":"물결 밑 햇빛층에서 심해 바닥까지 바다 한 기둥이 128줄에 서요. 빛내림과 정어리 떼 아래로 관해파리와 샛비늘치, 아귀의 미끼 불빛을 지나 잠수정이 등을 켜고 열수 분출공까지 내려갔다 올라와요. K1 을 누르면 죽은 고래가 기둥을 다 가라앉아 바닥에 뼈로 남아요.","idea":"One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.","buttons":"K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.","code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","layer":{"id":"layer-abyss","type":"code","name":"abyss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Night","min":0,"max":1,"about":"Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace."},{"name":"Current","min":-1,"max":1,"about":"A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream."},{"name":"Bloom","min":0,"max":1,"about":"From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens."}],"start":[0,2,0,0.06],"measures":{"motion":0.1244,"detail":0.039,"edges":0.3461,"complexity":1.1983,"coverage":0.6808,"colour":0.2784,"drift":0.0583},"knobResponse":[0.1135,0.059,0.0565,0.0734]},{"slug":"agate","title":"Agate","family":"mineral","round":20,"note":"라이트박스에 올린 블루 레이스 마노 단면이 패널을 거의 다 채우고, 1 LED 남짓한 하늘색 띠와 젖빛 띠가 갈색 껍질을 따라 겹겹이 들어가 석영 결정이 반짝이는 빈 속에 닿아요. 톱이 천천히 더 깊이 썰어 들어가며 띠가 흐르고, K1 을 누르면 날이 라이트박스를 가로지르며 새 마노 덩어리의 단면이 깔려요.","idea":"A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.","buttons":"K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.","code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-agate","type":"code","name":"agate","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stain","min":0,"max":1,"about":"The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds."},{"name":"Width","min":1,"max":4,"about":"How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands."},{"name":"Light","min":-1,"max":1,"about":"Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own."}],"start":[0,2,1,0.06],"measures":{"motion":0.2044,"detail":0.342,"edges":0.8294,"complexity":2.5192,"coverage":1,"colour":0.128,"drift":0.0573},"knobResponse":[0.1001,0.2798,0.2989,0.0578]},{"slug":"analemma","title":"Analemma","family":"celestial","round":15,"note":"일 년 동안 같은 시각에 찍은 해가 바다 위 하늘에 8자를 그려요. K1 이 시각을 아침에서 저녁까지 돌려 8자를 눕히고, K4 를 올리면 화성의 눈물방울 모양이 돼요.","idea":"A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.","buttons":"K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.","code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-analemma","type":"code","name":"analemma","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":-1,"max":1,"about":"The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings."},{"name":"Speed","min":0.2,"max":3,"about":"Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top."},{"name":"Latitude","min":-1,"max":1,"about":"Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea."},{"name":"Orbit","min":0,"max":1,"about":"The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop."}],"start":[0,2,0,0.06],"measures":{"motion":0.0266,"detail":0.0181,"edges":0.3039,"complexity":1.0442,"coverage":0.9984,"colour":0.1966,"drift":0.0308},"knobResponse":[0.0776,0.085,0.0971,0.0827]},{"slug":"anderson-localization","title":"Anderson Localization","family":"wave","round":38,"note":"위치 에너지가 무작위로 놓인 사슬의 한 자리에 양자 입자를 놓고, 자리를 가로로, 시간을 세로로 그려요. 깨끗한 사슬이라면 점선을 따라 패널 끝까지 벌어졌을 원뿔이 27 LED 너비에서 멈추고, 얼룩진 기둥으로 끝까지 서 있어요. K3 은 무질서를 키워 기둥을 12 LED 까지 좁히고, K1 을 누르면 새 에너지와 새 자리에서 바로 다시 시작해요.","idea":"A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.","buttons":"K1 tap launches now, on a new sample of energies and a new site.","code":"// ===== Patternflow pattern =====\n// Title:   Anderson Localization\n// Family:  wave\n// Idea:    A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Anderson localization (Philip W. Anderson, 1958), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16\n//\n// Knob 1: Hue. Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive.\n// Knob 2: Speed. How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s.\n// Knob 3: Disorder. The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8.\n// Knob 4: Samples. How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over.\n// Buttons: K1 tap launches now, on a new sample of energies and a new site.\n\nconst W = 64, H = 128, NS = 192, OFF = 64, MAXS = 16;\n// Time per row: 0.25 in units of the hopping, so 128 rows hold t = 0 to 32\n// and a clean cone, whose edge runs 2 sites per unit, reaches 32 sites out at\n// row 64. RK4 steps of 0.025, ten to a row.\nconst TROW = 0.25, STEPS = 10, DT = TROW / STEPS;\n// Rows per second at Speed 1.\nconst RATE = 10;\n// Brightness from the probability on a log scale: 1e-3 is dark, 0.4 full.\nconst LMIN = -3, LSPAN = 2.6;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst { floor, min, max, abs, log10, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, dis: 3, ns: 1, begun: false,\n    // u: each sample's site energies over W, uniform in [-1/2, 1/2].\n    u: new Float64Array(MAXS * NS), re: new Float64Array(MAXS * NS), im: new Float64Array(MAXS * NS), done: 0,\n    ya: new Float64Array(NS), yb: new Float64Array(NS), ka: new Float64Array(NS), kb: new Float64Array(NS),\n    sa: new Float64Array(NS), sb: new Float64Array(NS),\n    n0: 96, t: 0, row: 0, prog: 0, hold: 0, norm: 1,\n    rho: new Float32Array(W * H), vt: new Float32Array(W * H), cone: new Uint8Array(W * H), dim: new Float32Array(H),\n    lo: [0, 0, 0], mid: [0, 0, 0], hi: [0, 0, 0], pos: [0, 0, 0], neg: [0, 0, 0],\n  };\n}\n\n// dy/dt for y = re + i im under i dy/dt = H y, H y_n = -(y_n+1 + y_n-1) + V_n y_n,\n// with hard walls past both ends of the chain: d re = H im, d im = -H re.\nfunction deriv(a, b, u, o, Wd, ka, kb) {\n  for (let n = 0; n \u003c NS; n++) {\n    const V = Wd * u[o + n];\n    let ha = V * a[n], hb = V * b[n];\n    if (n > 0) {\n      ha -= a[n - 1];\n      hb -= b[n - 1];\n    }\n    if (n \u003c NS - 1) {\n      ha -= a[n + 1];\n      hb -= b[n + 1];\n    }\n    ka[n] = hb;\n    kb[n] = -ha;\n  }\n}\n\n// One RK4 step of one sample.\nfunction rk4(S, k, h) {\n  const o = k * NS, { re, im, u, ya, yb, ka, kb, sa, sb } = S, Wd = S.dis;\n  for (let n = 0; n \u003c NS; n++) {\n    ya[n] = re[o + n];\n    yb[n] = im[o + n];\n  }\n  // k1\n  const a0 = re.subarray(o, o + NS), b0 = im.subarray(o, o + NS);\n  deriv(a0, b0, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] = ka[n];\n    sb[n] = kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k2\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k3\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + h * ka[n];\n    yb[n] = b0[n] + h * kb[n];\n  }\n  // k4\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    a0[n] += (h / 6) * (sa[n] + ka[n]);\n    b0[n] += (h / 6) * (sb[n] + kb[n]);\n  }\n}\n\n// Put sample k on the launch site and run it up to the time of the run.\nfunction start(S, k) {\n  const o = k * NS;\n  S.re.fill(0, o, o + NS);\n  S.im.fill(0, o, o + NS);\n  S.re[o + S.n0] = 1;\n  const steps = round(S.t / DT);\n  for (let i = 0; i \u003c steps; i++) rk4(S, k, DT);\n}\n\n// A new run: fresh energies for every sample and a new site, picked so the\n// start lies in the middle 40 columns.\nfunction launch(S) {\n  for (let i = 0; i \u003c MAXS * NS; i++) S.u[i] = random() - 0.5;\n  S.n0 = OFF + 12 + floor(random() * 40);\n  S.t = 0;\n  S.row = 0;\n  S.prog = 0;\n  S.hold = 0;\n  for (let k = 0; k \u003c S.ns; k++) start(S, k);\n  S.done = S.ns;\n  // What is left of the run before stays at 40%.\n  S.dim.fill(0.4);\n}\n\n// Write the row for the present time, the samples' probability averaged.\nfunction writeRow(S) {\n  const r = S.row, { re, im, rho, vt, cone, u } = S, ns = S.ns, c0 = S.n0 - OFF, edge = 2 * S.t;\n  let norm = 0;\n  for (let n = 0; n \u003c NS; n++) norm += re[n] * re[n] + im[n] * im[n];\n  S.norm = norm;\n  for (let x = 0; x \u003c W; x++) {\n    const n = OFF + x;\n    let s = 0;\n    for (let k = 0; k \u003c ns; k++) {\n      const i = k * NS + n;\n      s += re[i] * re[i] + im[i] * im[i];\n    }\n    const p = r * W + x;\n    rho[p] = s / ns;\n    // The stripes show the first sample's energies, fainter as more samples\n    // are averaged, since the average has no one landscape.\n    vt[p] = u[n] / ns;\n    // The clean chain's light cone, n0 +- 2t, dotted every other row.\n    const d = abs(abs(x - c0) - edge);\n    cone[p] = r % 2 === 0 && d \u003c 0.5 && r > 0 ? 1 : 0;\n  }\n  S.dim[r] = 1;\n  S.row++;\n}\n\n// Run the present time forward to row r and write each row on the way.\nfunction advanceTo(S, target) {\n  while (S.row \u003c= target && S.row \u003c H) {\n    if (S.row > 0) {\n      for (let i = 0; i \u003c STEPS; i++) for (let k = 0; k \u003c S.ns; k++) rk4(S, k, DT);\n      S.t = S.row * TROW;\n    }\n    writeRow(S);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.dis = cl(k[2], 4, 12);\n  S.ns = round(cl(k[3], 1, MAXS));\n  if (!S.begun) {\n    // Open on a whole run already written, and a new one starting over it.\n    launch(S);\n    advanceTo(S, H - 1);\n    launch(S);\n    S.begun = true;\n  }\n  // Samples turned up in the middle of a run catch up to its time.\n  while (S.done \u003c S.ns) start(S, S.done++);\n  if (S.done > S.ns) S.done = S.ns;\n  if (input.btnPressed && input.btnPressed[0]) launch(S);\n  if (S.row >= H) {\n    S.hold += d * S.speed;\n    // Hold the finished run 1.5 s at Speed 2.\n    if (S.hold > 3) launch(S);\n    return;\n  }\n  S.prog += d * S.speed * RATE;\n  advanceTo(S, floor(S.prog));\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { rho, vt, cone, dim, lo, mid, hi, pos, neg } = S;\n  const h = S.hue + H0;\n  // Orange to yellow on the panel goes brown or olive when dim. Round there\n  // the tails turn toward rose instead of toward yellow, the body is paled\n  // to peach or butter, and everything is lifted.\n  const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.13, 0, 1);\n  hsv(h + 0.09 - 0.19 * warm, 1 - 0.2 * warm, 1, lo);\n  hsv(h, 0.85 - 0.4 * warm, 1, mid);\n  hsv(h - 0.04, 0.18, 1, hi);\n  hsv(h + 0.45, 0.7, 1, pos);\n  hsv(h + 0.3, 0.7, 1, neg);\n  const vlift = 1 + 0.4 * warm, head = S.row, mixOld = 0.5 + 0.4 * warm;\n  for (let y = 0; y \u003c H; y++) {\n    const old = dim[y] \u003c 1, dm = old ? dim[y] + 0.2 * warm : 1;\n    // Two rows of dark under the head, between the new run and the old.\n    const gap = old && y >= head && y \u003c head + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0, g = 0, b = 0;\n      if (!gap) {\n        const L = cl((log10(rho[p] + 1e-12) - LMIN) / LSPAN, 0, 1);\n        if (L > 0) {\n          const v = min(1, (0.1 + 0.9 * L) * vlift);\n          let c0 = lo, c1 = mid, f = L * 2;\n          if (L > 0.5) {\n            c0 = mid;\n            c1 = hi;\n            f = L * 2 - 1;\n          }\n          r = (c0[0] + (c1[0] - c0[0]) * f) * v;\n          g = (c0[1] + (c1[1] - c0[1]) * f) * v;\n          b = (c0[2] + (c1[2] - c0[2]) * f) * v;\n          // The run before is drawn half in the tails' colour, so it sits\n          // back and dims to violet or rose, not to grey or brown.\n          if (old) {\n            r += (lo[0] * v - r) * mixOld;\n            g += (lo[1] * v - g) * mixOld;\n            b += (lo[2] * v - b) * mixOld;\n          }\n        }\n        // The site energies, faint: high sites one tint, low sites another.\n        const e = vt[p], c = e > 0 ? pos : neg, a = 0.16 * abs(e) * 2;\n        r = max(r, c[0] * a);\n        g = max(g, c[1] * a);\n        b = max(b, c[2] * a);\n        if (cone[p]) {\n          r = max(r, 0.32);\n          g = max(g, 0.32);\n          b = max(b, 0.32);\n        }\n        r *= dm;\n        g *= dm;\n        b *= dm;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","layer":{"id":"layer-anderson-localization","type":"code","name":"anderson-localization","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Anderson Localization\n// Family:  wave\n// Idea:    A quantum particle starts on one site of a chain whose site energies are random, shown as faint stripes behind, and its probability is drawn with the sites across the panel and time running down it: the cone it opens stops growing about 13 sites either side and stands there as a speckled column for the rest of the run, while the dotted edges of the cone a clean chain would make run on to the sides.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Anderson localization (Philip W. Anderson, 1958), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16\n//\n// Knob 1: Hue. Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive.\n// Knob 2: Speed. How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s.\n// Knob 3: Disorder. The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8.\n// Knob 4: Samples. How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over.\n// Buttons: K1 tap launches now, on a new sample of energies and a new site.\n\nconst W = 64, H = 128, NS = 192, OFF = 64, MAXS = 16;\n// Time per row: 0.25 in units of the hopping, so 128 rows hold t = 0 to 32\n// and a clean cone, whose edge runs 2 sites per unit, reaches 32 sites out at\n// row 64. RK4 steps of 0.025, ten to a row.\nconst TROW = 0.25, STEPS = 10, DT = TROW / STEPS;\n// Rows per second at Speed 1.\nconst RATE = 10;\n// Brightness from the probability on a log scale: 1e-3 is dark, 0.4 full.\nconst LMIN = -3, LSPAN = 2.6;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst { floor, min, max, abs, log10, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, dis: 3, ns: 1, begun: false,\n    // u: each sample's site energies over W, uniform in [-1/2, 1/2].\n    u: new Float64Array(MAXS * NS), re: new Float64Array(MAXS * NS), im: new Float64Array(MAXS * NS), done: 0,\n    ya: new Float64Array(NS), yb: new Float64Array(NS), ka: new Float64Array(NS), kb: new Float64Array(NS),\n    sa: new Float64Array(NS), sb: new Float64Array(NS),\n    n0: 96, t: 0, row: 0, prog: 0, hold: 0, norm: 1,\n    rho: new Float32Array(W * H), vt: new Float32Array(W * H), cone: new Uint8Array(W * H), dim: new Float32Array(H),\n    lo: [0, 0, 0], mid: [0, 0, 0], hi: [0, 0, 0], pos: [0, 0, 0], neg: [0, 0, 0],\n  };\n}\n\n// dy/dt for y = re + i im under i dy/dt = H y, H y_n = -(y_n+1 + y_n-1) + V_n y_n,\n// with hard walls past both ends of the chain: d re = H im, d im = -H re.\nfunction deriv(a, b, u, o, Wd, ka, kb) {\n  for (let n = 0; n \u003c NS; n++) {\n    const V = Wd * u[o + n];\n    let ha = V * a[n], hb = V * b[n];\n    if (n > 0) {\n      ha -= a[n - 1];\n      hb -= b[n - 1];\n    }\n    if (n \u003c NS - 1) {\n      ha -= a[n + 1];\n      hb -= b[n + 1];\n    }\n    ka[n] = hb;\n    kb[n] = -ha;\n  }\n}\n\n// One RK4 step of one sample.\nfunction rk4(S, k, h) {\n  const o = k * NS, { re, im, u, ya, yb, ka, kb, sa, sb } = S, Wd = S.dis;\n  for (let n = 0; n \u003c NS; n++) {\n    ya[n] = re[o + n];\n    yb[n] = im[o + n];\n  }\n  // k1\n  const a0 = re.subarray(o, o + NS), b0 = im.subarray(o, o + NS);\n  deriv(a0, b0, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] = ka[n];\n    sb[n] = kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k2\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + 0.5 * h * ka[n];\n    yb[n] = b0[n] + 0.5 * h * kb[n];\n  }\n  // k3\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    sa[n] += 2 * ka[n];\n    sb[n] += 2 * kb[n];\n    ya[n] = a0[n] + h * ka[n];\n    yb[n] = b0[n] + h * kb[n];\n  }\n  // k4\n  deriv(ya, yb, u, o, Wd, ka, kb);\n  for (let n = 0; n \u003c NS; n++) {\n    a0[n] += (h / 6) * (sa[n] + ka[n]);\n    b0[n] += (h / 6) * (sb[n] + kb[n]);\n  }\n}\n\n// Put sample k on the launch site and run it up to the time of the run.\nfunction start(S, k) {\n  const o = k * NS;\n  S.re.fill(0, o, o + NS);\n  S.im.fill(0, o, o + NS);\n  S.re[o + S.n0] = 1;\n  const steps = round(S.t / DT);\n  for (let i = 0; i \u003c steps; i++) rk4(S, k, DT);\n}\n\n// A new run: fresh energies for every sample and a new site, picked so the\n// start lies in the middle 40 columns.\nfunction launch(S) {\n  for (let i = 0; i \u003c MAXS * NS; i++) S.u[i] = random() - 0.5;\n  S.n0 = OFF + 12 + floor(random() * 40);\n  S.t = 0;\n  S.row = 0;\n  S.prog = 0;\n  S.hold = 0;\n  for (let k = 0; k \u003c S.ns; k++) start(S, k);\n  S.done = S.ns;\n  // What is left of the run before stays at 40%.\n  S.dim.fill(0.4);\n}\n\n// Write the row for the present time, the samples' probability averaged.\nfunction writeRow(S) {\n  const r = S.row, { re, im, rho, vt, cone, u } = S, ns = S.ns, c0 = S.n0 - OFF, edge = 2 * S.t;\n  let norm = 0;\n  for (let n = 0; n \u003c NS; n++) norm += re[n] * re[n] + im[n] * im[n];\n  S.norm = norm;\n  for (let x = 0; x \u003c W; x++) {\n    const n = OFF + x;\n    let s = 0;\n    for (let k = 0; k \u003c ns; k++) {\n      const i = k * NS + n;\n      s += re[i] * re[i] + im[i] * im[i];\n    }\n    const p = r * W + x;\n    rho[p] = s / ns;\n    // The stripes show the first sample's energies, fainter as more samples\n    // are averaged, since the average has no one landscape.\n    vt[p] = u[n] / ns;\n    // The clean chain's light cone, n0 +- 2t, dotted every other row.\n    const d = abs(abs(x - c0) - edge);\n    cone[p] = r % 2 === 0 && d \u003c 0.5 && r > 0 ? 1 : 0;\n  }\n  S.dim[r] = 1;\n  S.row++;\n}\n\n// Run the present time forward to row r and write each row on the way.\nfunction advanceTo(S, target) {\n  while (S.row \u003c= target && S.row \u003c H) {\n    if (S.row > 0) {\n      for (let i = 0; i \u003c STEPS; i++) for (let k = 0; k \u003c S.ns; k++) rk4(S, k, DT);\n      S.t = S.row * TROW;\n    }\n    writeRow(S);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.dis = cl(k[2], 4, 12);\n  S.ns = round(cl(k[3], 1, MAXS));\n  if (!S.begun) {\n    // Open on a whole run already written, and a new one starting over it.\n    launch(S);\n    advanceTo(S, H - 1);\n    launch(S);\n    S.begun = true;\n  }\n  // Samples turned up in the middle of a run catch up to its time.\n  while (S.done \u003c S.ns) start(S, S.done++);\n  if (S.done > S.ns) S.done = S.ns;\n  if (input.btnPressed && input.btnPressed[0]) launch(S);\n  if (S.row >= H) {\n    S.hold += d * S.speed;\n    // Hold the finished run 1.5 s at Speed 2.\n    if (S.hold > 3) launch(S);\n    return;\n  }\n  S.prog += d * S.speed * RATE;\n  advanceTo(S, floor(S.prog));\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { rho, vt, cone, dim, lo, mid, hi, pos, neg } = S;\n  const h = S.hue + H0;\n  // Orange to yellow on the panel goes brown or olive when dim. Round there\n  // the tails turn toward rose instead of toward yellow, the body is paled\n  // to peach or butter, and everything is lifted.\n  const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.13, 0, 1);\n  hsv(h + 0.09 - 0.19 * warm, 1 - 0.2 * warm, 1, lo);\n  hsv(h, 0.85 - 0.4 * warm, 1, mid);\n  hsv(h - 0.04, 0.18, 1, hi);\n  hsv(h + 0.45, 0.7, 1, pos);\n  hsv(h + 0.3, 0.7, 1, neg);\n  const vlift = 1 + 0.4 * warm, head = S.row, mixOld = 0.5 + 0.4 * warm;\n  for (let y = 0; y \u003c H; y++) {\n    const old = dim[y] \u003c 1, dm = old ? dim[y] + 0.2 * warm : 1;\n    // Two rows of dark under the head, between the new run and the old.\n    const gap = old && y >= head && y \u003c head + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0, g = 0, b = 0;\n      if (!gap) {\n        const L = cl((log10(rho[p] + 1e-12) - LMIN) / LSPAN, 0, 1);\n        if (L > 0) {\n          const v = min(1, (0.1 + 0.9 * L) * vlift);\n          let c0 = lo, c1 = mid, f = L * 2;\n          if (L > 0.5) {\n            c0 = mid;\n            c1 = hi;\n            f = L * 2 - 1;\n          }\n          r = (c0[0] + (c1[0] - c0[0]) * f) * v;\n          g = (c0[1] + (c1[1] - c0[1]) * f) * v;\n          b = (c0[2] + (c1[2] - c0[2]) * f) * v;\n          // The run before is drawn half in the tails' colour, so it sits\n          // back and dims to violet or rose, not to grey or brown.\n          if (old) {\n            r += (lo[0] * v - r) * mixOld;\n            g += (lo[1] * v - g) * mixOld;\n            b += (lo[2] * v - b) * mixOld;\n          }\n        }\n        // The site energies, faint: high sites one tint, low sites another.\n        const e = vt[p], c = e > 0 ? pos : neg, a = 0.16 * abs(e) * 2;\n        r = max(r, c[0] * a);\n        g = max(g, c[1] * a);\n        b = max(b, c[2] * a);\n        if (cone[p]) {\n          r = max(r, 0.32);\n          g = max(g, 0.32);\n          b = max(b, 0.32);\n        }\n        r *= dm;\n        g *= dm;\n        b *= dm;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Disorder=4..12, Samples=1..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the wave round the wheel; the old run below the head and the stripes turn with it. At 0 tails violet, body azure, core pale cyan; at 0.1 blue, at 0.2 violet, at 0.35 pink, at 0.42 red, at 0.5 peach, at 0.58 butter, at 0.66 lime, at 0.85 mint. From 0.42 to 0.68 the tails turn toward rose instead of yellow and the body is paled and lifted up to 1.4 times, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast time is written down the panel. At 2 twenty rows a second, so a run of 128 rows (t = 0 to 32 in units of the hopping) takes 6.4 s and the finished run holds 1.5 s; at 0.2 64 s, at 3 4.3 s."},{"name":"Disorder","min":4,"max":12,"about":"The width W of the random site energies, uniform in [-W/2, W/2]. At 4 the localization length at the band centre is about 105/W^2 = 6.6 sites: the lit column, where the probability is over 1/1000, is 13 LEDs wide at row 8, 19 at row 16, 25 at row 32 and stops at 27 to 28 from row 48 on, where a clean cone would be 49 wide and growing. At 8 it stops at 12 LEDs by row 16; at 12 the particle hardly leaves its site and the column is 8 LEDs wide from row 8."},{"name":"Samples","min":1,"max":16,"about":"How many disorder samples run side by side from the same site, their probabilities averaged. At 1 the speckle of one sample, braided fringes and dark holes where its localized states beat; from about 8 the holes fill in, and at 16 the column is a smooth bell that falls off exponentially on both sides and stops widening. The stripes behind show the first sample's energies at 1/Samples of their strength, so they fade as the average takes over."}],"start":[0,2,4,1],"measures":{"motion":0.0706,"detail":0.0573,"edges":0.2197,"complexity":1.2567,"coverage":0.5738,"colour":0.1923,"drift":0.1291},"knobResponse":[0.0885,0.0786,0.0464,0.0484]},{"slug":"ant-farm","title":"Ant Farm","family":"insect","round":17,"note":"유리 사이에 모래를 채운 개미집에서 수확개미들이 바닥의 여왕 방까지 굴을 파고, 판 모래를 입구 옆 더미에 올리거나 오래된 막다른 굴에 다시 다져 넣어요. K1 을 누르면 뚜껑으로 물을 줘서 젖은 모래 얼룩이 천천히 아래로 번져요.","idea":"Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.","buttons":"K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","layer":{"id":"layer-ant-farm","type":"code","name":"ant-farm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fill","min":0,"max":1,"about":"Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second."},{"name":"Ants","min":40,"max":120,"about":"Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest."},{"name":"Lamp","min":0,"max":1,"about":"From daylight to the red lamp keepers watch by, because ants do not see red."}],"start":[0,2,40,0.06],"measures":{"motion":0.0748,"detail":0.0791,"edges":0.3143,"complexity":0.7035,"coverage":0.9824,"colour":0.2295,"drift":0.0611},"knobResponse":[0.2509,0.0544,0.0511,0.2616]},{"slug":"antoine-necklace","title":"Antoine's Necklace","family":"space","round":37,"note":"경기장 트랙 모양 유리 목걸이 안에 고리 18개가 이웃끼리 한 번씩 걸린 사슬이 들어 있고, 고리마다 목걸이 전체를 0.184배로 줄인 꼴이라 그 안에 또 사슬이 있어요. 카메라가 고리 하나로 9초에 한 세대씩 날아 들어가면 겉은 유리 테두리로 얇아지고 속 사슬이 단단해져서, 9초 뒤에는 색만 한 세대 넘어간 처음 그림이 돼요. K3 은 사슬의 고리를 30개까지 늘리고, 누르면 옆의 고리로 옮겨 들어가요.","idea":"A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.","buttons":"K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.","code":"// ===== Patternflow pattern =====\n// Title:   Antoine's Necklace\n// Family:  space\n// Idea:    A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Antoine's necklace (Louis Antoine, 1921), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90\n//\n// Knob 1: Hue. Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown.\n// Knob 2: Speed. How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s.\n// Knob 3: Links. Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12.\n// Knob 4: Turn. How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2.\n// Buttons: K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.\n\n// The shape. The core of the necklace is a stadium: two straight runs of\n// length 2L joined by two half circles of radius 1. The solid torus round it\n// has tube radius RHO. With L = 1 and RHO = 0.27 the outside is 2.54 wide and\n// 4.54 tall, and at a turn of 45 degrees it stands about twice as tall as it\n// is wide, like the panel.\n//\n// The links. A chain of N links runs round the core, one every P / N of arc\n// (P = 4L + 2 pi = 10.28). Every link is the necklace itself scaled by s, its\n// long axis along the core, and they alternate: even links lie in the\n// necklace's plane, odd links stand across it. The spacing is SPACE = 3.1\n// times a link's own core half width, so s = P / (3.1 N). Measured by\n// sampling every link's core at 96 points: at N = 18 the closest two\n// neighbours come within 0.47 of a link tube radius of touching, a link comes\n// within 0.38 of a tube radius of the parent's wall, and links two apart stay\n// 6 tube radii apart; at N = 30 these are 0.91, 4.1 and 6.1. The Gauss\n// linking integral, at 120 points a link for N = 18, 24 and 30, comes to 1\n// for every pair of neighbours and to 0 for every other pair. Uniform\n// spacing fails below 18: at 16 the bends turn neighbours 37 degrees against\n// each other, the end of one link swings towards the side of the next, and\n// the best scale still leaves them 0.05 of a tube radius into each other.\n//\n// Every link holds a chain built the same way, so the necklace is a fixed\n// set of similarity maps and it is the same at every scale. The dive target\n// is a flat link on a straight run, whose map is a pure shrink and shift,\n// x -> s x + c. The camera slides towards the map's fixed point\n// p = c / (1 - s), a point of the Cantor set, its distance to p shrinking by s\n// each generation, so the view at the end of one generation is the view at\n// its start. What changes is the colour: generations keep theirs as they grow.\n\nconst W = 64, H = 128, NPIX = W * H;\nconst L = 1, RHO = 0.27, SPACE = 3.1, P = 4 * L + 2 * Math.PI;\nconst BX = 1 + RHO, BY = L + 1 + RHO, BZ = RHO;\n// The camera stands 9 units from the necklace's middle with a focal length of\n// 222 LEDs, so the 4.54 units of height take 112 rows and the necklace's\n// neighbours in the chain it belongs to show above and below it.\nconst D0 = 9, F = 222;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Point and tangent of the core at arc length u, starting at the middle of\n// the right run and going up, so anticlockwise.\nfunction core(u, out) {\n  u = ((u % P) + P) % P;\n  let x, y, tx, ty;\n  if (u \u003c L) (x = 1), (y = u), (tx = 0), (ty = 1);\n  else if (u \u003c L + PI) {\n    const a = u - L;\n    (x = cos(a)), (y = L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else if (u \u003c 3 * L + PI) (x = -1), (y = L - (u - L - PI)), (tx = 0), (ty = -1);\n  else if (u \u003c 3 * L + 2 * PI) {\n    const a = PI + (u - 3 * L - PI);\n    (x = cos(a)), (y = -L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else (x = 1), (y = -L + (u - 3 * L - 2 * PI)), (tx = 0), (ty = 1);\n  out[0] = x;\n  out[1] = y;\n  out[2] = tx;\n  out[3] = ty;\n}\n\n// The N maps of one chain: rotation (columns: the link's across, along and\n// out-of-plane axes) and centre, all for a parent of size 1.\nfunction buildChain(N) {\n  const s = P / (SPACE * N), rot = new Float64Array(9 * N), ctr = new Float64Array(3 * N), targets = [], c = [0, 0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    core((i * P) / N, c);\n    const [x, y, tx, ty] = c, nx = ty, ny = -tx, o = 9 * i;\n    if (i % 2 === 0) {\n      // A flat link on a straight run gets no rotation at all, even on the\n      // left run where its axes point the other way: the stadium looks the\n      // same turned half round, and this keeps its map a pure shrink.\n      const flatRun = tx === 0;\n      rot.set(flatRun ? [1, 0, 0, 0, 1, 0, 0, 0, 1] : [nx, ny, 0, tx, ty, 0, 0, 0, 1], o);\n      if (flatRun) targets.push(i);\n    } else rot.set([0, 0, 1, tx, ty, 0, -ty, tx, 0], o);\n    ctr[3 * i] = x;\n    ctr[3 * i + 1] = y;\n  }\n  return { N, s, rot, ctr, targets };\n}\n\n// Ray directions through each LED, in view space (x right, y up, looking\n// down -z).\nconst RDX = new Float32Array(NPIX), RDY = new Float32Array(NPIX), RDZ = new Float32Array(NPIX);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - W / 2) / F, dy = -(y + 0.5 - H / 2) / F, n = 1 / sqrt(dx * dx + dy * dy + 1), p = y * W + x;\n    RDX[p] = dx * n;\n    RDY[p] = dy * n;\n    RDZ[p] = -n;\n  }\n\n// Light from the upper left and in front, and the half vector for the shine.\nconst LV = (() => {\n  const l = [-0.55, 0.6, 0.58], n = 1 / Math.hypot(...l);\n  const lx = l[0] * n, ly = l[1] * n, lz = l[2] * n, hz = lz + 1, hn = 1 / Math.hypot(lx, ly, hz);\n  return [lx, ly, lz, lx * hn, ly * hn, hz * hn];\n})();\n\n// Solidity and glass by apparent generation a = generation - zoom: a link is\n// solid from a = 0.85 up, thins to clear by a = 0.2, and its glass rim fades\n// out between a = 0 and a = -1, where it is the parent of the panel's parent.\nconst solidOf = (a) => sm(0.2, 0.85, a);\nconst glassOf = (a) => sm(-1, -0.25, a) * (1 - solidOf(a));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, links: 18, turn: 45, z: 0, gen: 0, clock: 0,\n    chain: buildChain(18), tgt: 0, ctx: 0, pend: false, from: null, glide: 1, gz0: 0,\n    zb: new Float32Array(NPIX), cr: new Float32Array(NPIX), cg: new Float32Array(NPIX), cb: new Float32Array(NPIX),\n    pal: new Float32Array(18), palHue: NaN, list: [],\n  };\n}\n\n// The camera's aim point for target index ti of a chain: p = c / (1 - s).\nfunction aim(ch, ti) {\n  const i = ch.targets[ti % ch.targets.length], k = 1 / (1 - ch.s);\n  return [ch.ctr[3 * i] * k, ch.ctr[3 * i + 1] * k, 0, i];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 18, 45], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.turn = cl(k[3], 45, 90);\n  const n = 2 * Math.round(cl(k[2], 18, 30) / 2);\n  if (n !== S.chain.N) {\n    S.chain = buildChain(n);\n    S.tgt = 0;\n    S.ctx = S.chain.targets[0];\n    S.glide = 1;\n    S.pend = false;\n  }\n  // The glide takes 1.5 s, which is gz of a generation. It must end before\n  // the wrap, so a tap late in a generation waits for the next one, where\n  // every target's path still starts from the same view.\n  const gz = (1.5 * S.speed) / 18;\n  if (input.btnPressed && input.btnPressed[0]) S.pend = true;\n  if (S.pend && S.glide >= 1 && S.z + gz \u003c 0.95) {\n    S.from = aim(S.chain, S.tgt);\n    S.tgt = (S.tgt + 1) % S.chain.targets.length;\n    S.glide = 0;\n    S.gz0 = S.z;\n    S.pend = false;\n  }\n  // If Speed is turned up during a glide it still ends by z = 0.97.\n  S.glide = min(1, max(S.glide + d / 1.5, (S.z - S.gz0) / (0.97 - S.gz0)));\n  S.clock += (d * S.speed) / 2;\n  S.z += (d * S.speed) / 18;\n  if (S.z >= 1) {\n    // One generation deeper: the target link becomes the necklace, and the\n    // necklace it sat in becomes the one round the panel.\n    S.z -= 1;\n    S.gen++;\n    S.glide = 1;\n    S.ctx = S.chain.targets[S.tgt];\n  }\n}\n\nfunction palette(S) {\n  // Three generation colours a third apart. At Hue 0 they are lime (glass of\n  // the opening), azure (the opening chain) and rose. Body colour and the\n  // floor its shaded side keeps: a red, orange or yellow body keeps more of\n  // its light and less of its saturation, as at half light it reads brown.\n  for (let g = 0; g \u003c 3; g++) {\n    const h = S.hue + 0.227 + g / 3, hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.02, hw) * (1 - sm(0.17, 0.27, hw));\n    hsv(h, 0.78 - 0.3 * warm, 1, S.pal, g * 6);\n    hsv(h, 0.28, 1, S.pal, g * 6 + 3);\n    S.pal[15 + g] = warm;\n  }\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const ch = S.chain, s = ch.s, z = S.z, sz = pow(s, z);\n  // The aim point, gliding after a tap.\n  let p = aim(ch, S.tgt);\n  if (S.glide \u003c 1 && S.from) {\n    const w = sm(0, 1, S.glide);\n    p = [S.from[0] + (p[0] - S.from[0]) * w, S.from[1] + (p[1] - S.from[1]) * w, 0, p[3]];\n  }\n  // View rotation: turn about the upright axis, then lean back 12 degrees.\n  // Halfway through each generation the necklace has swung 22 degrees\n  // further round, so the run the camera dives at turns to face along the\n  // view and the empty middle of the necklace narrows; it swings back by the\n  // end, and the swing starts and stops at rest, so the loop has no seam.\n  const sw = sin(PI * z), psi = ((S.turn + 22 * sw * sw + 8 * sin((2 * PI * S.clock) / 25)) * PI) / 180, tilt = (-12 * PI) / 180;\n  const cy = cos(psi), sy = sin(psi), ct = cos(tilt), st = sin(tilt);\n  // R = Rx(tilt) * Ry(psi), row-major.\n  const R = [cy, 0, sy, st * sy, ct, -st * cy, -ct * sy, st, ct * cy];\n  const k1 = 1 - sz, ox = p[0] * k1, oy = p[1] * k1;\n  // World point x -> view: R (x - (1 - s^z) p) - (0, 0, s^z D0).\n  const list = (S.list = []);\n  const near = 0.05 * sz * D0;\n  const visit = (Sc, M, cx, cy0, cz, gen) => {\n    // Centre in view.\n    const wx = cx - ox, wy = cy0 - oy, wz = cz;\n    const vx = R[0] * wx + R[1] * wy + R[2] * wz, vy = R[3] * wx + R[4] * wy + R[5] * wz, vz = R[6] * wx + R[7] * wy + R[8] * wz - sz * D0;\n    const rad = Sc * (BY + 0.05);\n    if (gen >= 0) {\n      if (vz - rad > -near) return;\n      const dz = -vz, ext = rad;\n      if (dz > ext) {\n        const sx = W / 2 + (F * vx) / dz, syy = H / 2 - (F * vy) / dz, pr = (F * ext) / (dz - ext);\n        if (sx + pr \u003c 0 || sx - pr > W || syy + pr \u003c 0 || syy - pr > H) return;\n        // A tube under a third of an LED thick is not drawn.\n        if ((F * Sc * RHO) / dz \u003c 0.17) return;\n      }\n      const a = gen - z, sol = solidOf(a), gl = glassOf(a);\n      if (sol > 0.004 || gl > 0.03) {\n        const MV = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n        for (let r = 0; r \u003c 3; r++)\n          for (let c = 0; c \u003c 3; c++) MV[r * 3 + c] = R[r * 3] * M[c] + R[r * 3 + 1] * M[3 + c] + R[r * 3 + 2] * M[6 + c];\n        list.push({ S: Sc, MV, vx, vy, vz, sol, gl, col: (((S.gen + gen) % 3) + 3) % 3 });\n      }\n      // Behind a link more than 97% solid its chain does not show.\n      if (sol >= 0.97 || gen >= 2) return;\n    }\n    for (let i = 0; i \u003c ch.N; i++) {\n      const o = 9 * i, Ri = ch.rot, ci = ch.ctr;\n      // Child rotation M * Ri (row-major M; Ri stored by columns).\n      const CM = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n      for (let r = 0; r \u003c 3; r++)\n        for (let c = 0; c \u003c 3; c++) CM[r * 3 + c] = M[r * 3] * Ri[o + c * 3] + M[r * 3 + 1] * Ri[o + c * 3 + 1] + M[r * 3 + 2] * Ri[o + c * 3 + 2];\n      const px = ci[3 * i], py = ci[3 * i + 1];\n      visit(Sc * s, CM, cx + Sc * (M[0] * px + M[1] * py), cy0 + Sc * (M[3] * px + M[4] * py), cz + Sc * (M[6] * px + M[7] * py), gen + 1);\n    }\n  };\n  // Start from the necklace the panel's necklace is a link of: the link the\n  // camera dived into last generation.\n  const ct0 = ch.ctr, ci0 = S.ctx;\n  visit(1 / s, [1, 0, 0, 0, 1, 0, 0, 0, 1], -ct0[3 * ci0] / s, -ct0[3 * ci0 + 1] / s, 0, -1);\n\n  const { zb, cr, cg, cb } = S;\n  zb.fill(Infinity);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  for (const e of list) if (e.sol >= 0.999) raster(S, e, true, sz);\n  const rest = list.filter((e) => e.sol \u003c 0.999).sort((a, b) => a.vz - b.vz);\n  for (const e of rest) raster(S, e, false, sz);\n  for (let i = 0; i \u003c NPIX; i++) display.setPixel(i % W, (i / W) | 0, cr[i] * 255, cg[i] * 255, cb[i] * 255);\n}\n\n// Trace every LED in the link's screen box against the link's own distance\n// field, in the link's frame where it has half width 1.\nfunction raster(S, e, solid, sz) {\n  const { MV, vx, vy, vz } = e, Sc = e.S, inv = 1 / Sc;\n  // Camera in link coordinates: MV^T (0 - centre) / S.\n  const ox = -(MV[0] * vx + MV[3] * vy + MV[6] * vz) * inv, oy = -(MV[1] * vx + MV[4] * vy + MV[7] * vz) * inv, oz = -(MV[2] * vx + MV[5] * vy + MV[8] * vz) * inv;\n  // Screen box from the eight corners of the link's box.\n  let x0 = W, x1 = -1, y0 = H, y1 = -1, full = false;\n  for (let c = 0; c \u003c 8; c++) {\n    const lx = c & 1 ? BX : -BX, ly = c & 2 ? BY : -BY, lz = c & 4 ? BZ : -BZ;\n    const px = vx + Sc * (MV[0] * lx + MV[1] * ly + MV[2] * lz), py = vy + Sc * (MV[3] * lx + MV[4] * ly + MV[5] * lz), pz = vz + Sc * (MV[6] * lx + MV[7] * ly + MV[8] * lz);\n    if (-pz \u003c 1e-3) {\n      full = true;\n      break;\n    }\n    const sx = W / 2 + (F * px) / -pz, sy = H / 2 - (F * py) / -pz;\n    if (sx \u003c x0) x0 = sx;\n    if (sx > x1) x1 = sx;\n    if (sy \u003c y0) y0 = sy;\n    if (sy > y1) y1 = sy;\n  }\n  if (full) (x0 = 0), (x1 = W - 1), (y0 = 0), (y1 = H - 1);\n  const X0 = max(0, floor(x0)), X1 = min(W - 1, floor(x1)), Y0 = max(0, floor(y0)), Y1 = min(H - 1, floor(y1));\n  if (X0 > X1 || Y0 > Y1) return;\n  const { zb, cr, cg, cb, pal } = S, g6 = e.col * 6, warm = pal[15 + e.col];\n  const br = pal[g6], bg = pal[g6 + 1], bb = pal[g6 + 2], gr = pal[g6 + 3], gg = pal[g6 + 4], gbb = pal[g6 + 5];\n  const [lx, ly, lz, hx, hy, hz] = LV;\n  const eps = 0.3 / F, sol = e.sol, gl = e.gl, dref = sz * D0;\n  for (let py = Y0; py \u003c= Y1; py++)\n    for (let px = X0; px \u003c= X1; px++) {\n      const p = py * W + px, rx = RDX[p], ry = RDY[p], rz = RDZ[p];\n      const dx = MV[0] * rx + MV[3] * ry + MV[6] * rz, dy = MV[1] * rx + MV[4] * ry + MV[7] * rz, dz = MV[2] * rx + MV[5] * ry + MV[8] * rz;\n      // Slab test against the box.\n      let t0 = 0, t1 = 1e9;\n      {\n        const ix = 1 / dx, a = (-BX - ox) * ix, b = (BX - ox) * ix;\n        t0 = max(t0, min(a, b));\n        t1 = min(t1, max(a, b));\n        const iy = 1 / dy, c = (-BY - oy) * iy, d = (BY - oy) * iy;\n        t0 = max(t0, min(c, d));\n        t1 = min(t1, max(c, d));\n        const iz = 1 / dz, f = (-BZ - oz) * iz, g = (BZ - oz) * iz;\n        t0 = max(t0, min(f, g));\n        t1 = min(t1, max(f, g));\n      }\n      if (t0 >= t1) continue;\n      const zmax = zb[p] * inv;\n      if (t0 >= zmax) continue;\n      let t = t0, hit = false, qx = 0, qy = 0, qz = 0, q = 0, rr = 0, dyy = 0;\n      for (let it = 0; it \u003c 48; it++) {\n        qx = ox + t * dx;\n        qy = oy + t * dy;\n        qz = oz + t * dz;\n        const ay = abs(qy) - L;\n        dyy = ay > 0 ? ay : 0;\n        rr = sqrt(qx * qx + dyy * dyy);\n        q = rr - 1;\n        const dist = sqrt(q * q + qz * qz) - RHO;\n        if (dist \u003c eps * t) {\n          hit = true;\n          break;\n        }\n        t += dist;\n        if (t > t1 || t > zmax) break;\n      }\n      if (!hit) continue;\n      // Normal in link coordinates, then in view.\n      const rinv = rr > 1e-6 ? 1 / rr : 0, gx = q * qx * rinv, gy = q * (qy \u003c 0 ? -dyy : dyy) * rinv;\n      let nl = sqrt(gx * gx + gy * gy + qz * qz);\n      nl = nl > 1e-9 ? 1 / nl : 0;\n      const nlx = gx * nl, nly = gy * nl, nlz = qz * nl;\n      const nx = MV[0] * nlx + MV[1] * nly + MV[2] * nlz, ny = MV[3] * nlx + MV[4] * nly + MV[5] * nlz, nz = MV[6] * nlx + MV[7] * nly + MV[8] * nlz;\n      const ndv = -(nx * rx + ny * ry + nz * rz), edge = abs(ndv);\n      const lam = max(0, nx * lx + ny * ly + nz * lz), spec = pow(max(0, nx * hx + ny * hy + nz * hz), 36);\n      const tv = t * Sc;\n      // Depth: nearer than the necklace's middle is brighter.\n      const fog = cl(1.25 - 0.55 * (tv / dref), 0.45, 1.2);\n      const amb = 0.2 + 0.25 * warm, body = (amb + (1 - amb) * lam) * sm(0.0, 0.45, edge) * fog;\n      let r = br * body + 0.75 * spec * fog, g = bg * body + 0.75 * spec * fog, b = bb * body + 0.75 * spec * fog;\n      if (solid) {\n        zb[p] = tv;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n        continue;\n      }\n      // Glass: a faint tint over its whole face, bright at the rim, and the\n      // shine. A thinning link blends its body over what lies behind it.\n      const rim = pow(1 - edge, 2.2), gw = gl * (0.05 + 0.85 * rim);\n      const keep = 1 - sol;\n      cr[p] = cr[p] * keep + r * sol + gr * gw + 0.5 * spec * gl;\n      cg[p] = cg[p] * keep + g * sol + gg * gw + 0.5 * spec * gl;\n      cb[p] = cb[p] * keep + b * sol + gbb * gw + 0.5 * spec * gl;\n    }\n}\n","layer":{"id":"layer-antoine-necklace","type":"code","name":"antoine-necklace","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Antoine's Necklace\n// Family:  space\n// Idea:    A glass necklace shaped like a running track holds a closed chain of solid links, each linked with its two neighbours and each a small copy of the whole necklace with its own chain inside, and the camera flies forever into one link: as it grows its surface thins to glass, the chain inside turns solid, and after nine seconds the picture is the start again, one generation deeper towards a point of Antoine's Cantor set.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Antoine's necklace (Louis Antoine, 1921), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90\n//\n// Knob 1: Hue. Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown.\n// Knob 2: Speed. How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s.\n// Knob 3: Links. Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12.\n// Knob 4: Turn. How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2.\n// Buttons: K1 tap picks the next link the camera dives into, among the links that lie flat on the two straight runs (three of them at 18 links), and the camera glides over to it in 1.5 s; a tap in the last part of a generation waits for the next one.\n\n// The shape. The core of the necklace is a stadium: two straight runs of\n// length 2L joined by two half circles of radius 1. The solid torus round it\n// has tube radius RHO. With L = 1 and RHO = 0.27 the outside is 2.54 wide and\n// 4.54 tall, and at a turn of 45 degrees it stands about twice as tall as it\n// is wide, like the panel.\n//\n// The links. A chain of N links runs round the core, one every P / N of arc\n// (P = 4L + 2 pi = 10.28). Every link is the necklace itself scaled by s, its\n// long axis along the core, and they alternate: even links lie in the\n// necklace's plane, odd links stand across it. The spacing is SPACE = 3.1\n// times a link's own core half width, so s = P / (3.1 N). Measured by\n// sampling every link's core at 96 points: at N = 18 the closest two\n// neighbours come within 0.47 of a link tube radius of touching, a link comes\n// within 0.38 of a tube radius of the parent's wall, and links two apart stay\n// 6 tube radii apart; at N = 30 these are 0.91, 4.1 and 6.1. The Gauss\n// linking integral, at 120 points a link for N = 18, 24 and 30, comes to 1\n// for every pair of neighbours and to 0 for every other pair. Uniform\n// spacing fails below 18: at 16 the bends turn neighbours 37 degrees against\n// each other, the end of one link swings towards the side of the next, and\n// the best scale still leaves them 0.05 of a tube radius into each other.\n//\n// Every link holds a chain built the same way, so the necklace is a fixed\n// set of similarity maps and it is the same at every scale. The dive target\n// is a flat link on a straight run, whose map is a pure shrink and shift,\n// x -> s x + c. The camera slides towards the map's fixed point\n// p = c / (1 - s), a point of the Cantor set, its distance to p shrinking by s\n// each generation, so the view at the end of one generation is the view at\n// its start. What changes is the colour: generations keep theirs as they grow.\n\nconst W = 64, H = 128, NPIX = W * H;\nconst L = 1, RHO = 0.27, SPACE = 3.1, P = 4 * L + 2 * Math.PI;\nconst BX = 1 + RHO, BY = L + 1 + RHO, BZ = RHO;\n// The camera stands 9 units from the necklace's middle with a focal length of\n// 222 LEDs, so the 4.54 units of height take 112 rows and the necklace's\n// neighbours in the chain it belongs to show above and below it.\nconst D0 = 9, F = 222;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Point and tangent of the core at arc length u, starting at the middle of\n// the right run and going up, so anticlockwise.\nfunction core(u, out) {\n  u = ((u % P) + P) % P;\n  let x, y, tx, ty;\n  if (u \u003c L) (x = 1), (y = u), (tx = 0), (ty = 1);\n  else if (u \u003c L + PI) {\n    const a = u - L;\n    (x = cos(a)), (y = L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else if (u \u003c 3 * L + PI) (x = -1), (y = L - (u - L - PI)), (tx = 0), (ty = -1);\n  else if (u \u003c 3 * L + 2 * PI) {\n    const a = PI + (u - 3 * L - PI);\n    (x = cos(a)), (y = -L + sin(a)), (tx = -sin(a)), (ty = cos(a));\n  } else (x = 1), (y = -L + (u - 3 * L - 2 * PI)), (tx = 0), (ty = 1);\n  out[0] = x;\n  out[1] = y;\n  out[2] = tx;\n  out[3] = ty;\n}\n\n// The N maps of one chain: rotation (columns: the link's across, along and\n// out-of-plane axes) and centre, all for a parent of size 1.\nfunction buildChain(N) {\n  const s = P / (SPACE * N), rot = new Float64Array(9 * N), ctr = new Float64Array(3 * N), targets = [], c = [0, 0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    core((i * P) / N, c);\n    const [x, y, tx, ty] = c, nx = ty, ny = -tx, o = 9 * i;\n    if (i % 2 === 0) {\n      // A flat link on a straight run gets no rotation at all, even on the\n      // left run where its axes point the other way: the stadium looks the\n      // same turned half round, and this keeps its map a pure shrink.\n      const flatRun = tx === 0;\n      rot.set(flatRun ? [1, 0, 0, 0, 1, 0, 0, 0, 1] : [nx, ny, 0, tx, ty, 0, 0, 0, 1], o);\n      if (flatRun) targets.push(i);\n    } else rot.set([0, 0, 1, tx, ty, 0, -ty, tx, 0], o);\n    ctr[3 * i] = x;\n    ctr[3 * i + 1] = y;\n  }\n  return { N, s, rot, ctr, targets };\n}\n\n// Ray directions through each LED, in view space (x right, y up, looking\n// down -z).\nconst RDX = new Float32Array(NPIX), RDY = new Float32Array(NPIX), RDZ = new Float32Array(NPIX);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - W / 2) / F, dy = -(y + 0.5 - H / 2) / F, n = 1 / sqrt(dx * dx + dy * dy + 1), p = y * W + x;\n    RDX[p] = dx * n;\n    RDY[p] = dy * n;\n    RDZ[p] = -n;\n  }\n\n// Light from the upper left and in front, and the half vector for the shine.\nconst LV = (() => {\n  const l = [-0.55, 0.6, 0.58], n = 1 / Math.hypot(...l);\n  const lx = l[0] * n, ly = l[1] * n, lz = l[2] * n, hz = lz + 1, hn = 1 / Math.hypot(lx, ly, hz);\n  return [lx, ly, lz, lx * hn, ly * hn, hz * hn];\n})();\n\n// Solidity and glass by apparent generation a = generation - zoom: a link is\n// solid from a = 0.85 up, thins to clear by a = 0.2, and its glass rim fades\n// out between a = 0 and a = -1, where it is the parent of the panel's parent.\nconst solidOf = (a) => sm(0.2, 0.85, a);\nconst glassOf = (a) => sm(-1, -0.25, a) * (1 - solidOf(a));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, links: 18, turn: 45, z: 0, gen: 0, clock: 0,\n    chain: buildChain(18), tgt: 0, ctx: 0, pend: false, from: null, glide: 1, gz0: 0,\n    zb: new Float32Array(NPIX), cr: new Float32Array(NPIX), cg: new Float32Array(NPIX), cb: new Float32Array(NPIX),\n    pal: new Float32Array(18), palHue: NaN, list: [],\n  };\n}\n\n// The camera's aim point for target index ti of a chain: p = c / (1 - s).\nfunction aim(ch, ti) {\n  const i = ch.targets[ti % ch.targets.length], k = 1 / (1 - ch.s);\n  return [ch.ctr[3 * i] * k, ch.ctr[3 * i + 1] * k, 0, i];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 18, 45], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.turn = cl(k[3], 45, 90);\n  const n = 2 * Math.round(cl(k[2], 18, 30) / 2);\n  if (n !== S.chain.N) {\n    S.chain = buildChain(n);\n    S.tgt = 0;\n    S.ctx = S.chain.targets[0];\n    S.glide = 1;\n    S.pend = false;\n  }\n  // The glide takes 1.5 s, which is gz of a generation. It must end before\n  // the wrap, so a tap late in a generation waits for the next one, where\n  // every target's path still starts from the same view.\n  const gz = (1.5 * S.speed) / 18;\n  if (input.btnPressed && input.btnPressed[0]) S.pend = true;\n  if (S.pend && S.glide >= 1 && S.z + gz \u003c 0.95) {\n    S.from = aim(S.chain, S.tgt);\n    S.tgt = (S.tgt + 1) % S.chain.targets.length;\n    S.glide = 0;\n    S.gz0 = S.z;\n    S.pend = false;\n  }\n  // If Speed is turned up during a glide it still ends by z = 0.97.\n  S.glide = min(1, max(S.glide + d / 1.5, (S.z - S.gz0) / (0.97 - S.gz0)));\n  S.clock += (d * S.speed) / 2;\n  S.z += (d * S.speed) / 18;\n  if (S.z >= 1) {\n    // One generation deeper: the target link becomes the necklace, and the\n    // necklace it sat in becomes the one round the panel.\n    S.z -= 1;\n    S.gen++;\n    S.glide = 1;\n    S.ctx = S.chain.targets[S.tgt];\n  }\n}\n\nfunction palette(S) {\n  // Three generation colours a third apart. At Hue 0 they are lime (glass of\n  // the opening), azure (the opening chain) and rose. Body colour and the\n  // floor its shaded side keeps: a red, orange or yellow body keeps more of\n  // its light and less of its saturation, as at half light it reads brown.\n  for (let g = 0; g \u003c 3; g++) {\n    const h = S.hue + 0.227 + g / 3, hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.02, hw) * (1 - sm(0.17, 0.27, hw));\n    hsv(h, 0.78 - 0.3 * warm, 1, S.pal, g * 6);\n    hsv(h, 0.28, 1, S.pal, g * 6 + 3);\n    S.pal[15 + g] = warm;\n  }\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const ch = S.chain, s = ch.s, z = S.z, sz = pow(s, z);\n  // The aim point, gliding after a tap.\n  let p = aim(ch, S.tgt);\n  if (S.glide \u003c 1 && S.from) {\n    const w = sm(0, 1, S.glide);\n    p = [S.from[0] + (p[0] - S.from[0]) * w, S.from[1] + (p[1] - S.from[1]) * w, 0, p[3]];\n  }\n  // View rotation: turn about the upright axis, then lean back 12 degrees.\n  // Halfway through each generation the necklace has swung 22 degrees\n  // further round, so the run the camera dives at turns to face along the\n  // view and the empty middle of the necklace narrows; it swings back by the\n  // end, and the swing starts and stops at rest, so the loop has no seam.\n  const sw = sin(PI * z), psi = ((S.turn + 22 * sw * sw + 8 * sin((2 * PI * S.clock) / 25)) * PI) / 180, tilt = (-12 * PI) / 180;\n  const cy = cos(psi), sy = sin(psi), ct = cos(tilt), st = sin(tilt);\n  // R = Rx(tilt) * Ry(psi), row-major.\n  const R = [cy, 0, sy, st * sy, ct, -st * cy, -ct * sy, st, ct * cy];\n  const k1 = 1 - sz, ox = p[0] * k1, oy = p[1] * k1;\n  // World point x -> view: R (x - (1 - s^z) p) - (0, 0, s^z D0).\n  const list = (S.list = []);\n  const near = 0.05 * sz * D0;\n  const visit = (Sc, M, cx, cy0, cz, gen) => {\n    // Centre in view.\n    const wx = cx - ox, wy = cy0 - oy, wz = cz;\n    const vx = R[0] * wx + R[1] * wy + R[2] * wz, vy = R[3] * wx + R[4] * wy + R[5] * wz, vz = R[6] * wx + R[7] * wy + R[8] * wz - sz * D0;\n    const rad = Sc * (BY + 0.05);\n    if (gen >= 0) {\n      if (vz - rad > -near) return;\n      const dz = -vz, ext = rad;\n      if (dz > ext) {\n        const sx = W / 2 + (F * vx) / dz, syy = H / 2 - (F * vy) / dz, pr = (F * ext) / (dz - ext);\n        if (sx + pr \u003c 0 || sx - pr > W || syy + pr \u003c 0 || syy - pr > H) return;\n        // A tube under a third of an LED thick is not drawn.\n        if ((F * Sc * RHO) / dz \u003c 0.17) return;\n      }\n      const a = gen - z, sol = solidOf(a), gl = glassOf(a);\n      if (sol > 0.004 || gl > 0.03) {\n        const MV = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n        for (let r = 0; r \u003c 3; r++)\n          for (let c = 0; c \u003c 3; c++) MV[r * 3 + c] = R[r * 3] * M[c] + R[r * 3 + 1] * M[3 + c] + R[r * 3 + 2] * M[6 + c];\n        list.push({ S: Sc, MV, vx, vy, vz, sol, gl, col: (((S.gen + gen) % 3) + 3) % 3 });\n      }\n      // Behind a link more than 97% solid its chain does not show.\n      if (sol >= 0.97 || gen >= 2) return;\n    }\n    for (let i = 0; i \u003c ch.N; i++) {\n      const o = 9 * i, Ri = ch.rot, ci = ch.ctr;\n      // Child rotation M * Ri (row-major M; Ri stored by columns).\n      const CM = [0, 0, 0, 0, 0, 0, 0, 0, 0];\n      for (let r = 0; r \u003c 3; r++)\n        for (let c = 0; c \u003c 3; c++) CM[r * 3 + c] = M[r * 3] * Ri[o + c * 3] + M[r * 3 + 1] * Ri[o + c * 3 + 1] + M[r * 3 + 2] * Ri[o + c * 3 + 2];\n      const px = ci[3 * i], py = ci[3 * i + 1];\n      visit(Sc * s, CM, cx + Sc * (M[0] * px + M[1] * py), cy0 + Sc * (M[3] * px + M[4] * py), cz + Sc * (M[6] * px + M[7] * py), gen + 1);\n    }\n  };\n  // Start from the necklace the panel's necklace is a link of: the link the\n  // camera dived into last generation.\n  const ct0 = ch.ctr, ci0 = S.ctx;\n  visit(1 / s, [1, 0, 0, 0, 1, 0, 0, 0, 1], -ct0[3 * ci0] / s, -ct0[3 * ci0 + 1] / s, 0, -1);\n\n  const { zb, cr, cg, cb } = S;\n  zb.fill(Infinity);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  for (const e of list) if (e.sol >= 0.999) raster(S, e, true, sz);\n  const rest = list.filter((e) => e.sol \u003c 0.999).sort((a, b) => a.vz - b.vz);\n  for (const e of rest) raster(S, e, false, sz);\n  for (let i = 0; i \u003c NPIX; i++) display.setPixel(i % W, (i / W) | 0, cr[i] * 255, cg[i] * 255, cb[i] * 255);\n}\n\n// Trace every LED in the link's screen box against the link's own distance\n// field, in the link's frame where it has half width 1.\nfunction raster(S, e, solid, sz) {\n  const { MV, vx, vy, vz } = e, Sc = e.S, inv = 1 / Sc;\n  // Camera in link coordinates: MV^T (0 - centre) / S.\n  const ox = -(MV[0] * vx + MV[3] * vy + MV[6] * vz) * inv, oy = -(MV[1] * vx + MV[4] * vy + MV[7] * vz) * inv, oz = -(MV[2] * vx + MV[5] * vy + MV[8] * vz) * inv;\n  // Screen box from the eight corners of the link's box.\n  let x0 = W, x1 = -1, y0 = H, y1 = -1, full = false;\n  for (let c = 0; c \u003c 8; c++) {\n    const lx = c & 1 ? BX : -BX, ly = c & 2 ? BY : -BY, lz = c & 4 ? BZ : -BZ;\n    const px = vx + Sc * (MV[0] * lx + MV[1] * ly + MV[2] * lz), py = vy + Sc * (MV[3] * lx + MV[4] * ly + MV[5] * lz), pz = vz + Sc * (MV[6] * lx + MV[7] * ly + MV[8] * lz);\n    if (-pz \u003c 1e-3) {\n      full = true;\n      break;\n    }\n    const sx = W / 2 + (F * px) / -pz, sy = H / 2 - (F * py) / -pz;\n    if (sx \u003c x0) x0 = sx;\n    if (sx > x1) x1 = sx;\n    if (sy \u003c y0) y0 = sy;\n    if (sy > y1) y1 = sy;\n  }\n  if (full) (x0 = 0), (x1 = W - 1), (y0 = 0), (y1 = H - 1);\n  const X0 = max(0, floor(x0)), X1 = min(W - 1, floor(x1)), Y0 = max(0, floor(y0)), Y1 = min(H - 1, floor(y1));\n  if (X0 > X1 || Y0 > Y1) return;\n  const { zb, cr, cg, cb, pal } = S, g6 = e.col * 6, warm = pal[15 + e.col];\n  const br = pal[g6], bg = pal[g6 + 1], bb = pal[g6 + 2], gr = pal[g6 + 3], gg = pal[g6 + 4], gbb = pal[g6 + 5];\n  const [lx, ly, lz, hx, hy, hz] = LV;\n  const eps = 0.3 / F, sol = e.sol, gl = e.gl, dref = sz * D0;\n  for (let py = Y0; py \u003c= Y1; py++)\n    for (let px = X0; px \u003c= X1; px++) {\n      const p = py * W + px, rx = RDX[p], ry = RDY[p], rz = RDZ[p];\n      const dx = MV[0] * rx + MV[3] * ry + MV[6] * rz, dy = MV[1] * rx + MV[4] * ry + MV[7] * rz, dz = MV[2] * rx + MV[5] * ry + MV[8] * rz;\n      // Slab test against the box.\n      let t0 = 0, t1 = 1e9;\n      {\n        const ix = 1 / dx, a = (-BX - ox) * ix, b = (BX - ox) * ix;\n        t0 = max(t0, min(a, b));\n        t1 = min(t1, max(a, b));\n        const iy = 1 / dy, c = (-BY - oy) * iy, d = (BY - oy) * iy;\n        t0 = max(t0, min(c, d));\n        t1 = min(t1, max(c, d));\n        const iz = 1 / dz, f = (-BZ - oz) * iz, g = (BZ - oz) * iz;\n        t0 = max(t0, min(f, g));\n        t1 = min(t1, max(f, g));\n      }\n      if (t0 >= t1) continue;\n      const zmax = zb[p] * inv;\n      if (t0 >= zmax) continue;\n      let t = t0, hit = false, qx = 0, qy = 0, qz = 0, q = 0, rr = 0, dyy = 0;\n      for (let it = 0; it \u003c 48; it++) {\n        qx = ox + t * dx;\n        qy = oy + t * dy;\n        qz = oz + t * dz;\n        const ay = abs(qy) - L;\n        dyy = ay > 0 ? ay : 0;\n        rr = sqrt(qx * qx + dyy * dyy);\n        q = rr - 1;\n        const dist = sqrt(q * q + qz * qz) - RHO;\n        if (dist \u003c eps * t) {\n          hit = true;\n          break;\n        }\n        t += dist;\n        if (t > t1 || t > zmax) break;\n      }\n      if (!hit) continue;\n      // Normal in link coordinates, then in view.\n      const rinv = rr > 1e-6 ? 1 / rr : 0, gx = q * qx * rinv, gy = q * (qy \u003c 0 ? -dyy : dyy) * rinv;\n      let nl = sqrt(gx * gx + gy * gy + qz * qz);\n      nl = nl > 1e-9 ? 1 / nl : 0;\n      const nlx = gx * nl, nly = gy * nl, nlz = qz * nl;\n      const nx = MV[0] * nlx + MV[1] * nly + MV[2] * nlz, ny = MV[3] * nlx + MV[4] * nly + MV[5] * nlz, nz = MV[6] * nlx + MV[7] * nly + MV[8] * nlz;\n      const ndv = -(nx * rx + ny * ry + nz * rz), edge = abs(ndv);\n      const lam = max(0, nx * lx + ny * ly + nz * lz), spec = pow(max(0, nx * hx + ny * hy + nz * hz), 36);\n      const tv = t * Sc;\n      // Depth: nearer than the necklace's middle is brighter.\n      const fog = cl(1.25 - 0.55 * (tv / dref), 0.45, 1.2);\n      const amb = 0.2 + 0.25 * warm, body = (amb + (1 - amb) * lam) * sm(0.0, 0.45, edge) * fog;\n      let r = br * body + 0.75 * spec * fog, g = bg * body + 0.75 * spec * fog, b = bb * body + 0.75 * spec * fog;\n      if (solid) {\n        zb[p] = tv;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n        continue;\n      }\n      // Glass: a faint tint over its whole face, bright at the rim, and the\n      // shine. A thinning link blends its body over what lies behind it.\n      const rim = pow(1 - edge, 2.2), gw = gl * (0.05 + 0.85 * rim);\n      const keep = 1 - sol;\n      cr[p] = cr[p] * keep + r * sol + gr * gw + 0.5 * spec * gl;\n      cg[p] = cg[p] * keep + g * sol + gg * gw + 0.5 * spec * gl;\n      cb[p] = cb[p] * keep + b * sol + gbb * gw + 0.5 * spec * gl;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Links=18..30, Turn=45..90","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three generation colours round the wheel together, a third apart. At 0 the chain is azure in pale lime glass and the chain inside each link is rose; a generation that comes round to red, orange or yellow is laid paler so its shaded side does not go brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the camera dives: at 2 one generation every 9 s, so a link grows 5.4 times as it fills the panel; at 0.2 one generation every 90 s, at 3 every 6 s."},{"name":"Links","min":18,"max":30,"about":"Links in every chain, 18 to 30 in steps of two. Each link is the whole necklace shrunk to 0.184 at 18 and 0.111 at 30, so at 18 a link stands about 21 rows tall at the opening and at 30 about 12."},{"name":"Turn","min":45,"max":90,"about":"How far the necklace is turned about its upright axis: at 45 degrees both kinds of link, the ones lying in the necklace's plane and the ones standing across it, show the same width; at 90 the necklace is seen edge on, the lying links shrink to slivers and the standing ones face the panel. On top of it the necklace swings 22 degrees further round and back once a generation, and sways 8 degrees every 25 s at Speed 2."}],"start":[0,2,18,45],"measures":{"motion":0.8976,"detail":0.0847,"edges":0.5082,"complexity":1.4555,"coverage":0.5229,"colour":0.1494,"drift":0.2617},"knobResponse":[0.1332,0.2651,0.185,0.2969]},{"slug":"aquarium","title":"Aquarium","family":"pixel","round":2,"note":"높은 수조에 흰동가리, 블루탱, 엔젤피시, 네온테트라 떼가 꼬리를 흔들며 헤엄쳐요. 모래 위 보물상자가 몇 초마다 뚜껑을 열어 공기 방울을 뱉고, K1 을 누르면 먹이가 떨어져 물고기가 몰려와요.","idea":"A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.","buttons":"K1 tap drops a pinch of food at the surface, and every fish goes for it.","code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","layer":{"id":"layer-aquarium","type":"code","name":"aquarium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet."},{"name":"Swim","min":0.2,"max":4,"about":"How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush."},{"name":"Fish","min":6,"max":18,"about":"How many fish live in the tank; new ones swim in from the side and spare ones swim out."},{"name":"Light","min":-1,"max":1,"about":"Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand."}],"start":[0,2,6,0.06],"measures":{"motion":0.1521,"detail":0.0707,"edges":0.4986,"complexity":0.73,"coverage":0.9459,"colour":0.2752,"drift":0.0492},"knobResponse":[0.1007,0.0662,0.0696,0.1627]},{"slug":"arnold-tongues","title":"Arnold Tongues","family":"rhythm","round":32,"note":"아래 가장자리의 분수 p/q 마다 혀가 하나씩 위로 자라 벌어져요. 양옆은 0/1 과 1/1 혀, 가운데는 분홍 1/2 혀, 그 양쪽은 초록 1/3 과 2/3 혀예요. 혀마다 q박에 한 번 번쩍여서 판 전체가 13박까지의 폴리리듬으로 뛰고, 회색 탐침선이 오르내리며 그 높이의 악마의 계단을 그어요.","idea":"The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.","buttons":"K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.","code":"// ===== Patternflow pattern =====\n// Title:   Arnold Tongues\n// Family:  rhythm\n// Idea:    The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold tongues of the circle map (Vladimir Arnold, 1961), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right.\n// Knob 2: Tempo. 0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2.\n// Knob 3: Zoom. At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second.\n// Knob 4: Depth. The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points.\n// Buttons: K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.\n\nconst W = 64, H = 128, SX = 3, NS = W * SX, QM = 21, T = 320, EPS = 1e-4, RUNS = 4;\nconst { floor, round, abs, exp, cos, min, max, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst GOLD2 = (3 - Math.sqrt(5)) / 2;\n\n// sin(2 pi u) from a table: the map runs 320 steps for each of 24576 points.\nconst LN = 4096, SIN = new Float64Array(LN + 1);\nfor (let i = 0; i \u003c= LN; i++) SIN[i] = Math.sin((TAU * i) / LN);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The lifted circle map th -> th + Om - (K / 2 pi) sin(2 pi th), from th = 0.\n// Row y has K = 1 - (1 - u)^2 with u = (127 - y) / 127: 0 at the bottom, 1 at\n// the top, and twice as many rows near the top, where the tongues spread, as\n// a straight scale would give. After 320 steps the point is locked to p/q\n// when th moved by exactly p over each of its last four runs of q steps; the\n// smallest such q wins. The rotation number rho is the mean step over the\n// last 256.\nconst kOf = (y) => {\n  const u = 1 - (H - 1 - y) / (H - 1);\n  return 1 - u * u;\n};\nconst BUF = new Float64Array(T + 1);\nfunction buildRow(P, y) {\n  const c = kOf(y) / TAU, o = y * NS, o0 = P.om0, dw = (P.om1 - P.om0) / NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const om = o0 + (j + 0.5) * dw;\n    let th = 0;\n    for (let n = 0; n \u003c T; n++) {\n      BUF[n] = th;\n      const u = (th - floor(th)) * LN, i = u | 0;\n      th += om - c * (SIN[i] + (SIN[i + 1] - SIN[i]) * (u - i));\n    }\n    BUF[T] = th;\n    let q = 1;\n    for (; q \u003c= QM; q++) {\n      const p = round(BUF[T] - BUF[T - q]);\n      let r = 0;\n      while (r \u003c RUNS && abs(BUF[T - r * q] - BUF[T - r * q - q] - p) \u003c EPS) r++;\n      if (r === RUNS) break;\n    }\n    P.Q[o + j] = q > QM ? 0 : q;\n    P.R[o + j] = (BUF[T] - BUF[T - 256]) / 256;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    Q: new Uint8Array(H * NS), R: new Float32Array(H * NS), zoom: -1, om0: 0, om1: 1, next: H,\n    beat: 0, hue: NaN, depth: 13, accent: 0,\n    pal: new Float32Array((QM + 1) * 3), dim: new Float32Array(256 * 3), env: new Float32Array(QM + 1),\n    row: new Float32Array(W * 3), lock: new Uint8Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const z = round(cl(k[2], 0, 1) * 200) / 200;\n  const first = P.zoom \u003c 0;\n  if (z !== P.zoom) {\n    // The window narrows to 0.12 wide and slides to the golden section.\n    P.zoom = z;\n    const w = exp(Math.log(0.12) * z), c = 0.5 + (GOLD2 - 0.5) * ((1 - w) / (1 - 0.12));\n    (P.om0 = c - w / 2), (P.om1 = c + w / 2), (P.next = 0);\n  }\n  // The first frame builds all 128 rows; after a turn of Zoom they are built\n  // again from the bottom, four rows a frame.\n  for (let b = first ? H : 4; b > 0 && P.next \u003c H; b--) buildRow(P, H - 1 - P.next++);\n  P.depth = round(2 + 19 * ((cl(k[3], -1, 1) + 1) / 2) ** 0.9);\n  P.beat += d * 0.8 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0]) (P.beat = 0), (P.accent = 1);\n  P.accent = max(0, P.accent - d * 0.9);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    // q = 1, the two wide tongues at the sides, stays dim so the rest show.\n    for (let q = 1; q \u003c= QM; q++) hsv(k[0] + 0.52 + GOLD2 * (q - 1), 0.78, q === 1 ? 0.3 : 0.66 - 0.008 * q, P.pal, q * 3);\n    for (let i = 0; i \u003c 256; i++) hsv(k[0] + 0.62 + (0.3 * i) / 255, 0.7, 0.17, P.dim, i * 3);\n  }\n  // Beat b lights every tongue whose q divides it, and the light dies away\n  // over the beat.\n  const b = floor(P.beat), f = P.beat - b;\n  for (let q = 1; q \u003c= QM; q++) P.env[q] = b % q === 0 ? exp(-3.2 * f) : 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.zoom \u003c 0) return;\n  const { Q, R, pal, dim, env, row, lock } = P, D = P.depth, acc = P.accent;\n  const f = P.beat - floor(P.beat), yb = (H - 1) * (1 - 1.3 * f), rs = 255 / (P.om1 - P.om0), r0 = P.om0;\n  // The scan line: up and down the panel once every 24 beats.\n  const yp = round((H - 1) * (0.5 + 0.5 * cos((TAU * P.beat) / 24)));\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * NS;\n    // On each beat a band of light runs up the tongues that beat lights.\n    const band = exp(-((y - yb) * (y - yb)) / 120);\n    row.fill(0);\n    for (let x = 0; x \u003c W; x++) {\n      // A tongue thinner than an LED still lights the whole LED, so long as\n      // it holds for a row above or below; a lone locked point, a thin\n      // tongue that bends across this column, lights its third.\n      let qs = 99, r = 0, g = 0, b = 0;\n      for (let j = x * SX; j \u003c x * SX + SX; j++) {\n        const q = Q[o + j];\n        if (q && q \u003c= D) {\n          if (q \u003c qs && ((y > 0 && Q[o + j - NS] === q) || (y \u003c H - 1 && Q[o + j + NS] === q))) qs = q;\n          (r += pal[q * 3]), (g += pal[q * 3 + 1]), (b += pal[q * 3 + 2]);\n        } else {\n          // Not locked, or locked past Depth: a dim colour that runs with rho.\n          const i = cl(round((R[o + j] - r0) * rs), 0, 255) * 3;\n          (r += dim[i]), (g += dim[i + 1]), (b += dim[i + 2]);\n        }\n      }\n      if (y === yp) lock[x] = qs \u003c 99 ? qs : 0;\n      if (qs \u003c 99) {\n        const e = min(1, env[qs] * (0.55 + 0.6 * band) + acc), m = 1 + 0.6 * e, wv = 130 * e;\n        display.setPixel(x, y, min(255, pal[qs * 3] * m + wv), min(255, pal[qs * 3 + 1] * m + wv), min(255, pal[qs * 3 + 2] * m + wv));\n      } else display.setPixel(x, y, r / SX, g / SX, b / SX);\n    }\n  }\n  // The devil's staircase at the scan line: rho against Omega, rho scaled so\n  // the bottom row's straight line rho = Omega would run corner to corner.\n  // Its flat steps are the tongues the line crosses, in their colours.\n  const o = yp * NS, sc = (H - 1) / (P.om1 - P.om0);\n  let py = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0;\n    for (let s = 0; s \u003c SX; s++) r += R[o + x * SX + s];\n    const sy = cl(round(H - 1 - (r / SX - r0) * sc), 0, H - 1);\n    const a = py \u003c 0 ? sy : py, y0 = min(a, sy), y1 = max(a, sy), q = lock[x];\n    for (let y = y0; y \u003c= y1; y++) display.setPixel(x, y, 170, 170, 165);\n    if (q) display.setPixel(x, sy, min(255, pal[q * 3] * 1.3 + 100), min(255, pal[q * 3 + 1] * 1.3 + 100), min(255, pal[q * 3 + 2] * 1.3 + 100));\n    py = sy;\n    if (x % 2 === 0 && (yp \u003c y0 || yp > y1)) display.setPixel(x, yp, 150, 150, 150);\n  }\n}\n","layer":{"id":"layer-arnold-tongues","type":"code","name":"arnold-tongues","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Arnold Tongues\n// Family:  rhythm\n// Idea:    The mode-locking map of the circle map, drive frequency Omega across and coupling K up the panel: every fraction p/q on the bottom edge grows a tongue that widens upward, each tongue flashes once every q beats so the panel plays all its locked rhythms at once, and a scan line climbing the panel draws the devil's staircase of the height it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold tongues of the circle map (Vladimir Arnold, 1961), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right.\n// Knob 2: Tempo. 0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2.\n// Knob 3: Zoom. At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second.\n// Knob 4: Depth. The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points.\n// Buttons: K1 tap is a downbeat: the count goes back to beat 0, which every q divides, so every tongue flashes white at once and the scan line starts again from the bottom.\n\nconst W = 64, H = 128, SX = 3, NS = W * SX, QM = 21, T = 320, EPS = 1e-4, RUNS = 4;\nconst { floor, round, abs, exp, cos, min, max, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst GOLD2 = (3 - Math.sqrt(5)) / 2;\n\n// sin(2 pi u) from a table: the map runs 320 steps for each of 24576 points.\nconst LN = 4096, SIN = new Float64Array(LN + 1);\nfor (let i = 0; i \u003c= LN; i++) SIN[i] = Math.sin((TAU * i) / LN);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The lifted circle map th -> th + Om - (K / 2 pi) sin(2 pi th), from th = 0.\n// Row y has K = 1 - (1 - u)^2 with u = (127 - y) / 127: 0 at the bottom, 1 at\n// the top, and twice as many rows near the top, where the tongues spread, as\n// a straight scale would give. After 320 steps the point is locked to p/q\n// when th moved by exactly p over each of its last four runs of q steps; the\n// smallest such q wins. The rotation number rho is the mean step over the\n// last 256.\nconst kOf = (y) => {\n  const u = 1 - (H - 1 - y) / (H - 1);\n  return 1 - u * u;\n};\nconst BUF = new Float64Array(T + 1);\nfunction buildRow(P, y) {\n  const c = kOf(y) / TAU, o = y * NS, o0 = P.om0, dw = (P.om1 - P.om0) / NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const om = o0 + (j + 0.5) * dw;\n    let th = 0;\n    for (let n = 0; n \u003c T; n++) {\n      BUF[n] = th;\n      const u = (th - floor(th)) * LN, i = u | 0;\n      th += om - c * (SIN[i] + (SIN[i + 1] - SIN[i]) * (u - i));\n    }\n    BUF[T] = th;\n    let q = 1;\n    for (; q \u003c= QM; q++) {\n      const p = round(BUF[T] - BUF[T - q]);\n      let r = 0;\n      while (r \u003c RUNS && abs(BUF[T - r * q] - BUF[T - r * q - q] - p) \u003c EPS) r++;\n      if (r === RUNS) break;\n    }\n    P.Q[o + j] = q > QM ? 0 : q;\n    P.R[o + j] = (BUF[T] - BUF[T - 256]) / 256;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    Q: new Uint8Array(H * NS), R: new Float32Array(H * NS), zoom: -1, om0: 0, om1: 1, next: H,\n    beat: 0, hue: NaN, depth: 13, accent: 0,\n    pal: new Float32Array((QM + 1) * 3), dim: new Float32Array(256 * 3), env: new Float32Array(QM + 1),\n    row: new Float32Array(W * 3), lock: new Uint8Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const z = round(cl(k[2], 0, 1) * 200) / 200;\n  const first = P.zoom \u003c 0;\n  if (z !== P.zoom) {\n    // The window narrows to 0.12 wide and slides to the golden section.\n    P.zoom = z;\n    const w = exp(Math.log(0.12) * z), c = 0.5 + (GOLD2 - 0.5) * ((1 - w) / (1 - 0.12));\n    (P.om0 = c - w / 2), (P.om1 = c + w / 2), (P.next = 0);\n  }\n  // The first frame builds all 128 rows; after a turn of Zoom they are built\n  // again from the bottom, four rows a frame.\n  for (let b = first ? H : 4; b > 0 && P.next \u003c H; b--) buildRow(P, H - 1 - P.next++);\n  P.depth = round(2 + 19 * ((cl(k[3], -1, 1) + 1) / 2) ** 0.9);\n  P.beat += d * 0.8 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0]) (P.beat = 0), (P.accent = 1);\n  P.accent = max(0, P.accent - d * 0.9);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    // q = 1, the two wide tongues at the sides, stays dim so the rest show.\n    for (let q = 1; q \u003c= QM; q++) hsv(k[0] + 0.52 + GOLD2 * (q - 1), 0.78, q === 1 ? 0.3 : 0.66 - 0.008 * q, P.pal, q * 3);\n    for (let i = 0; i \u003c 256; i++) hsv(k[0] + 0.62 + (0.3 * i) / 255, 0.7, 0.17, P.dim, i * 3);\n  }\n  // Beat b lights every tongue whose q divides it, and the light dies away\n  // over the beat.\n  const b = floor(P.beat), f = P.beat - b;\n  for (let q = 1; q \u003c= QM; q++) P.env[q] = b % q === 0 ? exp(-3.2 * f) : 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.zoom \u003c 0) return;\n  const { Q, R, pal, dim, env, row, lock } = P, D = P.depth, acc = P.accent;\n  const f = P.beat - floor(P.beat), yb = (H - 1) * (1 - 1.3 * f), rs = 255 / (P.om1 - P.om0), r0 = P.om0;\n  // The scan line: up and down the panel once every 24 beats.\n  const yp = round((H - 1) * (0.5 + 0.5 * cos((TAU * P.beat) / 24)));\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * NS;\n    // On each beat a band of light runs up the tongues that beat lights.\n    const band = exp(-((y - yb) * (y - yb)) / 120);\n    row.fill(0);\n    for (let x = 0; x \u003c W; x++) {\n      // A tongue thinner than an LED still lights the whole LED, so long as\n      // it holds for a row above or below; a lone locked point, a thin\n      // tongue that bends across this column, lights its third.\n      let qs = 99, r = 0, g = 0, b = 0;\n      for (let j = x * SX; j \u003c x * SX + SX; j++) {\n        const q = Q[o + j];\n        if (q && q \u003c= D) {\n          if (q \u003c qs && ((y > 0 && Q[o + j - NS] === q) || (y \u003c H - 1 && Q[o + j + NS] === q))) qs = q;\n          (r += pal[q * 3]), (g += pal[q * 3 + 1]), (b += pal[q * 3 + 2]);\n        } else {\n          // Not locked, or locked past Depth: a dim colour that runs with rho.\n          const i = cl(round((R[o + j] - r0) * rs), 0, 255) * 3;\n          (r += dim[i]), (g += dim[i + 1]), (b += dim[i + 2]);\n        }\n      }\n      if (y === yp) lock[x] = qs \u003c 99 ? qs : 0;\n      if (qs \u003c 99) {\n        const e = min(1, env[qs] * (0.55 + 0.6 * band) + acc), m = 1 + 0.6 * e, wv = 130 * e;\n        display.setPixel(x, y, min(255, pal[qs * 3] * m + wv), min(255, pal[qs * 3 + 1] * m + wv), min(255, pal[qs * 3 + 2] * m + wv));\n      } else display.setPixel(x, y, r / SX, g / SX, b / SX);\n    }\n  }\n  // The devil's staircase at the scan line: rho against Omega, rho scaled so\n  // the bottom row's straight line rho = Omega would run corner to corner.\n  // Its flat steps are the tongues the line crosses, in their colours.\n  const o = yp * NS, sc = (H - 1) / (P.om1 - P.om0);\n  let py = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0;\n    for (let s = 0; s \u003c SX; s++) r += R[o + x * SX + s];\n    const sy = cl(round(H - 1 - (r / SX - r0) * sc), 0, H - 1);\n    const a = py \u003c 0 ? sy : py, y0 = min(a, sy), y1 = max(a, sy), q = lock[x];\n    for (let y = y0; y \u003c= y1; y++) display.setPixel(x, y, 170, 170, 165);\n    if (q) display.setPixel(x, sy, min(255, pal[q * 3] * 1.3 + 100), min(255, pal[q * 3 + 1] * 1.3 + 100), min(255, pal[q * 3 + 2] * 1.3 + 100));\n    py = sy;\n    if (x % 2 === 0 && (yp \u003c y0 || yp > y1)) display.setPixel(x, yp, 150, 150, 150);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=0.2..3, Zoom=0..1, Depth=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the two q = 1 tongues filling the sides are dim teal and 1/2 is pink. The thirds are green and the quarters blue; the fifths are red-orange and the sevenths purple. The unlocked ground runs from navy on the left to plum on the right."},{"name":"Tempo","min":0.2,"max":3,"about":"0.8 beats a second per unit, 1.6 at 2. A tongue locked to p/q flashes on every q-th beat, so the sides flash on every beat and 1/2 on every second one. A band of light runs up the lit tongues within the beat. The scan line goes up and down the panel once every 24 beats, 15 seconds at 2."},{"name":"Zoom","min":0,"max":1,"about":"At 0 Omega runs 0 to 1 across the panel; at 1 it runs 0.322 to 0.442, ten times closer, round the golden section 0.382, where 1/3, 3/8, 5/13 and 2/5 crowd together. After a turn the map is worked out again from the bottom up in about a second."},{"name":"Depth","min":-1,"max":1,"about":"The largest q that gets a colour: 2 at -1, 13 at the start, 21 at 1. A point locked to a larger q stays in the dim ground with the unlocked points."}],"start":[0,2,0,0.06],"measures":{"motion":0.3954,"detail":0.0597,"edges":0.7533,"complexity":0.3067,"coverage":1,"colour":0.3016,"drift":0.0852},"knobResponse":[0.2048,0.0673,0.163,0.058]},{"slug":"aurora","title":"Aurora","family":"light","round":1,"note":"떠도는 선에 빛 커튼이 걸리고, 빛줄기는 커튼이 흔들리는 것보다 느리게 일렁여요.","idea":"Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n// @ramp oklab 0:#000000 0.18:#04122e 0.45:#0b6b5a 0.72:#3dff9a 0.9:#b8ffd9 1:#f0c8ff\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","layer":{"id":"layer-aurora","type":"code","name":"aurora","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":0.18,"color":"#04122e","alpha":1},{"position":0.45,"color":"#0b6b5a","alpha":1},{"position":0.72,"color":"#3dff9a","alpha":1},{"position":0.9,"color":"#b8ffd9","alpha":1},{"position":1,"color":"#f0c8ff","alpha":1}],"mode":"oklab","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sway","min":0,"max":1,"about":"How far the curtains swing from side to side."},{"name":"Speed","min":0.1,"max":5,"about":"How fast everything drifts."},{"name":"Curtains","min":1,"max":4,"about":"One curtain or a sky of up to four, each its own height."},{"name":"Rays","min":0,"max":1,"about":"From a smooth glow to sharp vertical rays."}],"start":[0,2,1,0.06],"measures":{"motion":0.0423,"detail":0.0219,"edges":0.176,"complexity":1.1219,"coverage":0.4849,"colour":0.2574,"drift":0.0814},"knobResponse":[0.0412,0.0639,0.142,0.0829]},{"slug":"axon","title":"Axon","family":"body","round":23,"note":"어두운 조직 속에서 신경세포 하나가 초록 형광으로 빛나요. 세포체를 떠난 스파이크가 수초 사이의 랑비에 결절을 하나씩 건너뛰며 축삭을 내려가고, 말단 단추가 시냅스 틈 너머로 신호를 넘기면 아래의 자홍색 신경세포가 따라 켜져요. K4 를 올리면 수초가 벗겨져 신호가 기어가다 꺼져요.","idea":"A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.","buttons":"K1 tap fires a burst of four spikes now.","code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","layer":{"id":"layer-axon","type":"code","name":"axon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei."},{"name":"Speed","min":0.2,"max":3,"about":"The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower."},{"name":"Rate","min":1,"max":8,"about":"How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8."},{"name":"Damage","min":0,"max":1,"about":"Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals."}],"start":[0,2,1,0.06],"measures":{"motion":0.2284,"detail":0.0799,"edges":0.4159,"complexity":1.8734,"coverage":0.4953,"colour":0.2394,"drift":0.0867},"knobResponse":[0.1239,0.0564,0.0498,0.061]},{"slug":"aztec-diamond","title":"Aztec Diamond","family":"cells","round":28,"note":"아즈텍 다이아몬드 여덟 개가 패널을 덮고 저마다 도미노 셔플로 자라요. 도미노가 제 방향으로 한 LED 씩 미끄러지고 빈 2×2 칸에 새 쌍이 들어서면, 다 자란 다이아몬드의 네 모서리는 한 색 벽돌로 얼고 북극권 원 안만 뒤섞여요. K3 이 가로와 세로의 몫을 기울여 원을 타원으로 바꾸고, 누르면 처음부터 다시 자라요.","idea":"Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.","buttons":"K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.","code":"// ===== Patternflow pattern =====\n// Title:   Aztec Diamond\n// Family:  cells\n// Idea:    Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino shuffling on the Aztec diamond (Elkies, Kuperberg, Larsen and Propp, 1992) and the arctic circle theorem (Jockusch, Propp and Shor, 1995), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1\n//\n// Knob 1: Hue. Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red.\n// Knob 2: Speed. At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower.\n// Knob 3: Bias. The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way.\n// Knob 4: Checker. How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED.\n// Buttons: K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, floor, abs, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n\n// The four kinds of domino, by orientation and by the colour of the\n// checkerboard square under their first cell: 0 north, 1 east, 2 south,\n// 3 west. At order k a horizontal domino whose left cell is (x, y) goes north\n// when x + y + k is odd and south when it is even; a vertical one goes west\n// when odd and east when even.\nconst kind = (x, y, v, k) => ((x + y + k) & 1 ? (v ? 3 : 0) : v ? 1 : 2);\nconst STEP = [[0, -1], [1, 0], [0, 1], [-1, 0]];\n\n// Aztec diamonds tile the plane. Two of order 32 stand whole on the panel,\n// one above the other; the gaps round them are diamonds of order 31, halved\n// by the sides and quartered by the corners. Those grow only to order 30, so\n// a one-LED diagonal of dark runs between every two diamonds.\n// [centre x, centre y, order, hold in seconds at Speed 2, clock at the start, order at the start]\nconst LAYOUT = [\n  [32, 32, 32, 15, -21, 32],\n  [32, 96, 32, 15, 0, 18],\n  [0, 64, 30, 50, 39, 30],\n  [64, 64, 30, 50, 25, 30],\n  [0, 0, 30, 50, 4, 30],\n  [64, 0, 30, 50, 32, 30],\n  [0, 128, 30, 50, 18, 30],\n  [64, 128, 30, 50, 11, 30],\n];\n\n// A diamond keeps its dominoes as lists (left or top cell, vertical or not,\n// grain) and two pictures of its cells to fade between: per cell 0 for empty\n// or 1 + the kind of the domino on it, and that domino's grain, 204 to 255.\nfunction makeDiamond([cx, cy, N, hold]) {\n  const F = 2 * N, M = N * (N + 1) + 4, C = F * F;\n  return {\n    cx, cy, N, F, hold, k: 0, n: 0, p: 0.5, wait: 0,\n    dx: new Int16Array(M), dy: new Int16Array(M), dv: new Uint8Array(M), dg: new Uint8Array(M),\n    grid: new Int16Array(C).fill(-1),\n    ft: new Uint8Array(C), fg: new Uint8Array(C), tt: new Uint8Array(C), tg: new Uint8Array(C),\n    stage: 0, sub: 1, u: 1, dur: 0.1, clock: 0,\n  };\n}\n\nfunction regrid(D) {\n  const g = D.grid, F = D.F;\n  g.fill(-1);\n  for (let i = 0; i \u003c D.n; i++) {\n    const c = D.dx[i] + D.dy[i] * F;\n    g[c] = i;\n    g[D.dv[i] ? c + F : c + 1] = i;\n  }\n}\n\nfunction add(D, x, y, v) {\n  const i = D.n++;\n  (D.dx[i] = x), (D.dy[i] = y), (D.dv[i] = v), (D.dg[i] = 204 + floor(random() * 52));\n  return i;\n}\n\n// Shuffling, order k to k + 1, in three moves. First the bad blocks go: a\n// south-going domino right above a north-going one, or an east-going one\n// right left of a west-going one, would pass through each other.\nfunction destroy(D) {\n  regrid(D);\n  const { dx, dy, dv, grid: g, k, F } = D;\n  const dead = new Uint8Array(D.n);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F;\n    if (t === 2) {\n      const j = g[c + F];\n      if (j >= 0 && !dv[j] && dx[j] === dx[i] && dy[j] === dy[i] + 1) dead[i] = dead[j] = 1;\n    } else if (t === 1) {\n      const j = g[c + 1];\n      if (j >= 0 && dv[j] && dx[j] === dx[i] + 1 && dy[j] === dy[i]) dead[i] = dead[j] = 1;\n    }\n  }\n  let m = 0;\n  for (let i = 0; i \u003c D.n; i++)\n    if (!dead[i]) (dx[m] = dx[i]), (dy[m] = dy[i]), (dv[m] = dv[i]), (D.dg[m] = D.dg[i]), m++;\n  D.n = m;\n}\n\n// Then every domino slides one cell in its own direction.\nfunction slide(D) {\n  const { dx, dy, dv, k } = D;\n  for (let i = 0; i \u003c D.n; i++) {\n    const s = STEP[kind(dx[i], dy[i], dv[i], k)];\n    (dx[i] += s[0]), (dy[i] += s[1]);\n  }\n  D.k = k + 1;\n  regrid(D);\n}\n\n// And the holes left in the bigger diamond, which always come as 2x2\n// blocks, each take a random pair: two horizontal with probability p,\n// two vertical otherwise.\nfunction create(D) {\n  const { grid: g, k, p, N, F } = D;\n  for (let y = N - k; y \u003c N + k; y++) {\n    const r = k - abs(2 * y + 1 - F) / 2 + 0.5;\n    for (let x = N - r; x \u003c N + r; x++) {\n      const c = x + y * F;\n      if (g[c] >= 0) continue;\n      if (random() \u003c p) {\n        g[c] = g[c + 1] = add(D, x, y, 0);\n        g[c + F] = g[c + F + 1] = add(D, x, y + 1, 0);\n      } else {\n        g[c] = g[c + F] = add(D, x, y, 1);\n        g[c + 1] = g[c + F + 1] = add(D, x + 1, y, 1);\n      }\n    }\n  }\n}\n\n// At full size the tiling keeps moving by flips: a 2x2 block covered by two\n// parallel dominoes turns over to the other pair with the same odds as a\n// fresh block. The weighted uniform measure stays put under it, so the\n// frozen corners hold still and only the arctic circle churns.\nfunction flips(D, tries) {\n  const { dx, dy, dv, grid: g, p, F } = D;\n  for (let t = 0; t \u003c tries; t++) {\n    const x = floor(random() * (F - 1)), y = floor(random() * (F - 1)), c = x + y * F, a = g[c];\n    if (a \u003c 0 || dx[a] !== x || dy[a] !== y) continue;\n    const h = random() \u003c p;\n    if (!dv[a]) {\n      const b = g[c + F];\n      if (b \u003c 0 || dv[b] || dx[b] !== x || dy[b] !== y + 1 || h) continue;\n      (dv[a] = dv[b] = 1), (dx[b] = x + 1), (dy[b] = y);\n      (g[c + F] = a), (g[c + 1] = b);\n    } else {\n      const b = g[c + 1];\n      if (b \u003c 0 || !dv[b] || dx[b] !== x + 1 || dy[b] !== y || !h) continue;\n      (dv[a] = dv[b] = 0), (dx[b] = x), (dy[b] = y + 1);\n      (g[c + 1] = a), (g[c + F] = b);\n    }\n  }\n}\n\n// The picture a diamond fades to.\nfunction paint(D) {\n  const { dx, dy, dv, dg, k, F, tt, tg } = D;\n  tt.fill(0);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F, c2 = dv[i] ? c + F : c + 1;\n    (tt[c] = tt[c2] = t + 1), (tg[c] = tg[c2] = dg[i]);\n  }\n}\n\nfunction retire(D, dur) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  (D.u = 0), (D.stage = 2), (D.dur = dur), (D.n = 0);\n  paint(D);\n}\n\n// One move of a diamond's life. Growing, a step from order k to k + 1 takes\n// two fades: the bad pairs go out while every other domino slides, then the\n// holes fill. Grown, it flips blocks a batch at a time until its hold runs\n// out, fades and grows again from order 1.\nfunction begin(D, P) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  D.u = 0;\n  const s = P.speed, T = 0.9 / s;\n  if (D.stage === 0) {\n    if (D.sub === 0) create(D), (D.sub = 1), (D.dur = 0.4 * T);\n    else if (D.k >= D.N) {\n      (D.stage = 1), (D.clock = -D.wait), (D.wait = 0);\n      return begin(D, P);\n    } else if (D.k === 0) (D.k = 1), regrid(D), create(D), (D.dur = 0.4 * T);\n    else destroy(D), slide(D), (D.sub = 0), (D.dur = 0.6 * T);\n  } else if (D.stage === 1) {\n    if (D.clock > (D.hold * 2) / s) {\n      if (D.N \u003c 32) D.hold = 40 + 20 * random();\n      return retire(D, 0.8);\n    }\n    flips(D, 500), (D.dur = 0.35 / s);\n  } else {\n    (D.stage = 0), (D.sub = 1), (D.k = 0), (D.n = 0);\n    return begin(D, P);\n  }\n  paint(D);\n}\n\n// Which diamond and which of its cells each LED shows; -1 is the dark seam.\nconst OWN = new Int8Array(NP).fill(-1), CELL = new Int32Array(NP);\nLAYOUT.forEach(([cx, cy, N], d) => {\n  for (let y = 0; y \u003c 2 * N; y++)\n    for (let x = 0; x \u003c 2 * N; x++) {\n      const X = cx - N + x, Y = cy - N + y;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H || abs(2 * x + 1 - 2 * N) + abs(2 * y + 1 - 2 * N) > 2 * N) continue;\n      (OWN[X + Y * W] = d), (CELL[X + Y * W] = x + y * 2 * N);\n    }\n});\n\nexport function setup(params) {\n  params.s = { fresh: true, speed: 2, hue: 0, dark: 0.4, D: LAYOUT.map(makeDiamond), col: new Float32Array(12) };\n}\n\n// The top diamond opens grown and churning, the bottom one at order 18 and\n// still growing, the six round them grown and due to regrow one by one,\n// the first after 11 seconds. They grow on the first frame, once Bias is known.\nfunction opening(P) {\n  P.D.forEach((D, i) => {\n    begin(D, P);\n    while (D.k \u003c LAYOUT[i][5] || (D.k >= D.N && D.stage === 0)) begin(D, P);\n    D.clock = LAYOUT[i][4];\n  });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const bias = cl(k[2], -1, 1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.dark = 0.38 * (1 + cl(k[3], -1, 1));\n  P.D.forEach((D, i) => (D.p = 0.5 + (i \u003c 2 ? 0.4 : -0.4) * bias));\n  if (P.fresh) (P.fresh = false), opening(P);\n  // K1: every diamond fades and grows again from order 1, all together; the\n  // bottom one then holds half a cycle longer, so the two take turns again.\n  if (input.btnPressed && input.btnPressed[0])\n    P.D.forEach((D, i) => {\n      D.wait = ((i === 1 ? 15 : i > 1 ? 30 * random() : 0) * 2) / P.speed;\n      retire(D, 0.4);\n    });\n  for (const D of P.D) {\n    D.clock += d;\n    D.u += d / D.dur;\n    if (D.u >= 1) begin(D, P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const col = P.col, sm = 1 - P.dark, E = P.D.map((D) => ease(cl(D.u, 0, 1)));\n  // Orange north, green east, blue south, magenta west at Hue 0.\n  for (let t = 0; t \u003c 4; t++) hsv(P.hue + 0.1 + t * 0.25, 0.94, 1, col, t * 3);\n  for (let p = 0; p \u003c NP; p++) {\n    const d = OWN[p], x = p % W, y = (p / W) | 0;\n    if (d \u003c 0) {\n      display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    // The checkerboard stays put on the LEDs while the dominoes slide over it.\n    const D = P.D[d], c = CELL[p], a = D.ft[c], b = D.tt[c], e = E[d], lv = (x + y) & 1 ? sm : 1;\n    let r = 0, g = 0, bl = 0;\n    if (a) {\n      const w = D.fg[c] * lv * (1 - e), q = (a - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    if (b) {\n      const w = D.tg[c] * lv * e, q = (b - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    display.setPixel(x, y, min(255, r), min(255, g), min(255, bl));\n  }\n}\n","layer":{"id":"layer-aztec-diamond","type":"code","name":"aztec-diamond","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aztec Diamond\n// Family:  cells\n// Idea:    Aztec diamonds tile the panel, two whole and six cut by its edges, and each grows by domino shuffling: every domino slides one LED out in its own direction, the holes fill with fresh pairs, and at full size the four corners have frozen into brick walls of one colour each while the dominoes churn on inside the arctic circle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino shuffling on the Aztec diamond (Elkies, Kuperberg, Larsen and Propp, 1992) and the arctic circle theorem (Jockusch, Propp and Shor, 1995), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1\n//\n// Knob 1: Hue. Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red.\n// Knob 2: Speed. At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower.\n// Knob 3: Bias. The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way.\n// Knob 4: Checker. How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED.\n// Buttons: K1 tap fades every diamond and grows all eight again from order 1 at once; after that the bottom diamond waits half a cycle, so the two whole ones take turns again.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, floor, abs, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n\n// The four kinds of domino, by orientation and by the colour of the\n// checkerboard square under their first cell: 0 north, 1 east, 2 south,\n// 3 west. At order k a horizontal domino whose left cell is (x, y) goes north\n// when x + y + k is odd and south when it is even; a vertical one goes west\n// when odd and east when even.\nconst kind = (x, y, v, k) => ((x + y + k) & 1 ? (v ? 3 : 0) : v ? 1 : 2);\nconst STEP = [[0, -1], [1, 0], [0, 1], [-1, 0]];\n\n// Aztec diamonds tile the plane. Two of order 32 stand whole on the panel,\n// one above the other; the gaps round them are diamonds of order 31, halved\n// by the sides and quartered by the corners. Those grow only to order 30, so\n// a one-LED diagonal of dark runs between every two diamonds.\n// [centre x, centre y, order, hold in seconds at Speed 2, clock at the start, order at the start]\nconst LAYOUT = [\n  [32, 32, 32, 15, -21, 32],\n  [32, 96, 32, 15, 0, 18],\n  [0, 64, 30, 50, 39, 30],\n  [64, 64, 30, 50, 25, 30],\n  [0, 0, 30, 50, 4, 30],\n  [64, 0, 30, 50, 32, 30],\n  [0, 128, 30, 50, 18, 30],\n  [64, 128, 30, 50, 11, 30],\n];\n\n// A diamond keeps its dominoes as lists (left or top cell, vertical or not,\n// grain) and two pictures of its cells to fade between: per cell 0 for empty\n// or 1 + the kind of the domino on it, and that domino's grain, 204 to 255.\nfunction makeDiamond([cx, cy, N, hold]) {\n  const F = 2 * N, M = N * (N + 1) + 4, C = F * F;\n  return {\n    cx, cy, N, F, hold, k: 0, n: 0, p: 0.5, wait: 0,\n    dx: new Int16Array(M), dy: new Int16Array(M), dv: new Uint8Array(M), dg: new Uint8Array(M),\n    grid: new Int16Array(C).fill(-1),\n    ft: new Uint8Array(C), fg: new Uint8Array(C), tt: new Uint8Array(C), tg: new Uint8Array(C),\n    stage: 0, sub: 1, u: 1, dur: 0.1, clock: 0,\n  };\n}\n\nfunction regrid(D) {\n  const g = D.grid, F = D.F;\n  g.fill(-1);\n  for (let i = 0; i \u003c D.n; i++) {\n    const c = D.dx[i] + D.dy[i] * F;\n    g[c] = i;\n    g[D.dv[i] ? c + F : c + 1] = i;\n  }\n}\n\nfunction add(D, x, y, v) {\n  const i = D.n++;\n  (D.dx[i] = x), (D.dy[i] = y), (D.dv[i] = v), (D.dg[i] = 204 + floor(random() * 52));\n  return i;\n}\n\n// Shuffling, order k to k + 1, in three moves. First the bad blocks go: a\n// south-going domino right above a north-going one, or an east-going one\n// right left of a west-going one, would pass through each other.\nfunction destroy(D) {\n  regrid(D);\n  const { dx, dy, dv, grid: g, k, F } = D;\n  const dead = new Uint8Array(D.n);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F;\n    if (t === 2) {\n      const j = g[c + F];\n      if (j >= 0 && !dv[j] && dx[j] === dx[i] && dy[j] === dy[i] + 1) dead[i] = dead[j] = 1;\n    } else if (t === 1) {\n      const j = g[c + 1];\n      if (j >= 0 && dv[j] && dx[j] === dx[i] + 1 && dy[j] === dy[i]) dead[i] = dead[j] = 1;\n    }\n  }\n  let m = 0;\n  for (let i = 0; i \u003c D.n; i++)\n    if (!dead[i]) (dx[m] = dx[i]), (dy[m] = dy[i]), (dv[m] = dv[i]), (D.dg[m] = D.dg[i]), m++;\n  D.n = m;\n}\n\n// Then every domino slides one cell in its own direction.\nfunction slide(D) {\n  const { dx, dy, dv, k } = D;\n  for (let i = 0; i \u003c D.n; i++) {\n    const s = STEP[kind(dx[i], dy[i], dv[i], k)];\n    (dx[i] += s[0]), (dy[i] += s[1]);\n  }\n  D.k = k + 1;\n  regrid(D);\n}\n\n// And the holes left in the bigger diamond, which always come as 2x2\n// blocks, each take a random pair: two horizontal with probability p,\n// two vertical otherwise.\nfunction create(D) {\n  const { grid: g, k, p, N, F } = D;\n  for (let y = N - k; y \u003c N + k; y++) {\n    const r = k - abs(2 * y + 1 - F) / 2 + 0.5;\n    for (let x = N - r; x \u003c N + r; x++) {\n      const c = x + y * F;\n      if (g[c] >= 0) continue;\n      if (random() \u003c p) {\n        g[c] = g[c + 1] = add(D, x, y, 0);\n        g[c + F] = g[c + F + 1] = add(D, x, y + 1, 0);\n      } else {\n        g[c] = g[c + F] = add(D, x, y, 1);\n        g[c + 1] = g[c + F + 1] = add(D, x + 1, y, 1);\n      }\n    }\n  }\n}\n\n// At full size the tiling keeps moving by flips: a 2x2 block covered by two\n// parallel dominoes turns over to the other pair with the same odds as a\n// fresh block. The weighted uniform measure stays put under it, so the\n// frozen corners hold still and only the arctic circle churns.\nfunction flips(D, tries) {\n  const { dx, dy, dv, grid: g, p, F } = D;\n  for (let t = 0; t \u003c tries; t++) {\n    const x = floor(random() * (F - 1)), y = floor(random() * (F - 1)), c = x + y * F, a = g[c];\n    if (a \u003c 0 || dx[a] !== x || dy[a] !== y) continue;\n    const h = random() \u003c p;\n    if (!dv[a]) {\n      const b = g[c + F];\n      if (b \u003c 0 || dv[b] || dx[b] !== x || dy[b] !== y + 1 || h) continue;\n      (dv[a] = dv[b] = 1), (dx[b] = x + 1), (dy[b] = y);\n      (g[c + F] = a), (g[c + 1] = b);\n    } else {\n      const b = g[c + 1];\n      if (b \u003c 0 || !dv[b] || dx[b] !== x + 1 || dy[b] !== y || !h) continue;\n      (dv[a] = dv[b] = 0), (dx[b] = x), (dy[b] = y + 1);\n      (g[c + 1] = a), (g[c + F] = b);\n    }\n  }\n}\n\n// The picture a diamond fades to.\nfunction paint(D) {\n  const { dx, dy, dv, dg, k, F, tt, tg } = D;\n  tt.fill(0);\n  for (let i = 0; i \u003c D.n; i++) {\n    const t = kind(dx[i], dy[i], dv[i], k), c = dx[i] + dy[i] * F, c2 = dv[i] ? c + F : c + 1;\n    (tt[c] = tt[c2] = t + 1), (tg[c] = tg[c2] = dg[i]);\n  }\n}\n\nfunction retire(D, dur) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  (D.u = 0), (D.stage = 2), (D.dur = dur), (D.n = 0);\n  paint(D);\n}\n\n// One move of a diamond's life. Growing, a step from order k to k + 1 takes\n// two fades: the bad pairs go out while every other domino slides, then the\n// holes fill. Grown, it flips blocks a batch at a time until its hold runs\n// out, fades and grows again from order 1.\nfunction begin(D, P) {\n  D.ft.set(D.tt), D.fg.set(D.tg);\n  D.u = 0;\n  const s = P.speed, T = 0.9 / s;\n  if (D.stage === 0) {\n    if (D.sub === 0) create(D), (D.sub = 1), (D.dur = 0.4 * T);\n    else if (D.k >= D.N) {\n      (D.stage = 1), (D.clock = -D.wait), (D.wait = 0);\n      return begin(D, P);\n    } else if (D.k === 0) (D.k = 1), regrid(D), create(D), (D.dur = 0.4 * T);\n    else destroy(D), slide(D), (D.sub = 0), (D.dur = 0.6 * T);\n  } else if (D.stage === 1) {\n    if (D.clock > (D.hold * 2) / s) {\n      if (D.N \u003c 32) D.hold = 40 + 20 * random();\n      return retire(D, 0.8);\n    }\n    flips(D, 500), (D.dur = 0.35 / s);\n  } else {\n    (D.stage = 0), (D.sub = 1), (D.k = 0), (D.n = 0);\n    return begin(D, P);\n  }\n  paint(D);\n}\n\n// Which diamond and which of its cells each LED shows; -1 is the dark seam.\nconst OWN = new Int8Array(NP).fill(-1), CELL = new Int32Array(NP);\nLAYOUT.forEach(([cx, cy, N], d) => {\n  for (let y = 0; y \u003c 2 * N; y++)\n    for (let x = 0; x \u003c 2 * N; x++) {\n      const X = cx - N + x, Y = cy - N + y;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H || abs(2 * x + 1 - 2 * N) + abs(2 * y + 1 - 2 * N) > 2 * N) continue;\n      (OWN[X + Y * W] = d), (CELL[X + Y * W] = x + y * 2 * N);\n    }\n});\n\nexport function setup(params) {\n  params.s = { fresh: true, speed: 2, hue: 0, dark: 0.4, D: LAYOUT.map(makeDiamond), col: new Float32Array(12) };\n}\n\n// The top diamond opens grown and churning, the bottom one at order 18 and\n// still growing, the six round them grown and due to regrow one by one,\n// the first after 11 seconds. They grow on the first frame, once Bias is known.\nfunction opening(P) {\n  P.D.forEach((D, i) => {\n    begin(D, P);\n    while (D.k \u003c LAYOUT[i][5] || (D.k >= D.N && D.stage === 0)) begin(D, P);\n    D.clock = LAYOUT[i][4];\n  });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const bias = cl(k[2], -1, 1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.dark = 0.38 * (1 + cl(k[3], -1, 1));\n  P.D.forEach((D, i) => (D.p = 0.5 + (i \u003c 2 ? 0.4 : -0.4) * bias));\n  if (P.fresh) (P.fresh = false), opening(P);\n  // K1: every diamond fades and grows again from order 1, all together; the\n  // bottom one then holds half a cycle longer, so the two take turns again.\n  if (input.btnPressed && input.btnPressed[0])\n    P.D.forEach((D, i) => {\n      D.wait = ((i === 1 ? 15 : i > 1 ? 30 * random() : 0) * 2) / P.speed;\n      retire(D, 0.4);\n    });\n  for (const D of P.D) {\n    D.clock += d;\n    D.u += d / D.dur;\n    if (D.u >= 1) begin(D, P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const col = P.col, sm = 1 - P.dark, E = P.D.map((D) => ease(cl(D.u, 0, 1)));\n  // Orange north, green east, blue south, magenta west at Hue 0.\n  for (let t = 0; t \u003c 4; t++) hsv(P.hue + 0.1 + t * 0.25, 0.94, 1, col, t * 3);\n  for (let p = 0; p \u003c NP; p++) {\n    const d = OWN[p], x = p % W, y = (p / W) | 0;\n    if (d \u003c 0) {\n      display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    // The checkerboard stays put on the LEDs while the dominoes slide over it.\n    const D = P.D[d], c = CELL[p], a = D.ft[c], b = D.tt[c], e = E[d], lv = (x + y) & 1 ? sm : 1;\n    let r = 0, g = 0, bl = 0;\n    if (a) {\n      const w = D.fg[c] * lv * (1 - e), q = (a - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    if (b) {\n      const w = D.tg[c] * lv * e, q = (b - 1) * 3;\n      (r += w * col[q]), (g += w * col[q + 1]), (bl += w * col[q + 2]);\n    }\n    display.setPixel(x, y, min(255, r), min(255, g), min(255, bl));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Checker=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four domino colours round the wheel together. At 0 the north-going dominoes are orange, east green, south blue and west magenta; each quarter turn hands the same four colours on to the next direction, and in between come other sets, at 0.15 lime, cyan, violet and red."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a diamond grows one order every 0.45 s, so order 1 to 32 takes 14 seconds, and a grown one churns for 15 seconds (the six cut ones for 40 to 60) before it fades and grows again; at 0.2 it all runs ten times slower."},{"name":"Bias","min":-1,"max":1,"about":"The odds that a fresh 2x2 block gets two horizontal dominoes rather than two vertical ones. At 0 they are even and every arctic boundary is a circle. Turned right, the two whole diamonds lean horizontal (0.9 at 1) and their circles flatten into wide ellipses while the six round them lean vertical into tall ones; turned left it goes the other way."},{"name":"Checker","min":-1,"max":1,"about":"How dark the dark squares of the checkerboard under the tiling burn; every domino covers one light and one dark square. At -1 both burn alike and the dominoes merge into flat fields of colour, at the start the dark squares burn at 60%, and at 1 at a quarter, so each domino shows as one bright LED."}],"start":[0,2,0,0.06],"measures":{"motion":0.2173,"detail":0.3498,"edges":0.9816,"complexity":1.6331,"coverage":0.888,"colour":0.6403,"drift":0.1071},"knobResponse":[0.459,0.1665,0.2603,0.1486]},{"slug":"bait-ball","title":"Bait Ball","family":"ocean","round":23,"note":"옆에서 본 푸른 바다를 정어리 떼 공이 거의 다 채워요. 떼가 한꺼번에 몸을 틀면 은빛 물결이 공을 가로지르고, 등을 돌리면 짙은 남색으로 가라앉아요. 상어와 돌고래가 뚫고 지나간 구멍은 뒤에서 다시 닫히고, 가넷이 수면에서 거품 꼬리를 끌며 내리꽂혀요.","idea":"Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.","buttons":"K1 tap sends a hunter charging through the ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-bait-ball","type":"code","name":"bait-ball","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower."},{"name":"Predators","min":1,"max":5,"about":"How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them."},{"name":"Sun","min":0,"max":1,"about":"The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel."}],"start":[0,2,1,0.06],"measures":{"motion":0.8889,"detail":0.2376,"edges":0.5511,"complexity":1.4993,"coverage":0.9518,"colour":0.2846,"drift":0.3724},"knobResponse":[0.0519,0.3412,0.1352,0.1016]},{"slug":"ballistic-deposition","title":"Ballistic Deposition","family":"particle","round":30,"note":"입자가 64열 위로 곧게 떨어져 처음 닿는 자리에 붙어요. 처마 밑이 빈 퇴적물이 내려앉은 차례대로 띠를 이루고, 띠의 경계가 거칠어지는 앞면의 지난 모습이에요.","idea":"Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.","buttons":"K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.","code":"// ===== Patternflow pattern =====\n// Title:   Ballistic Deposition\n// Family:  particle\n// Idea:    Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: ballistic deposition (Marjorie J. Vold, 1959), whose surface is in the Kardar-Parisi-Zhang class (1986), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24\n//\n// Knob 1: Hue. Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green.\n// Knob 2: Speed. Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second.\n// Knob 3: Slip. The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000.\n// Knob 4: Layers. How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows.\n// Buttons: K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.\n\n// On 64 columns that wrap round, the front's width grows from a flat start\n// as t^(1/3), the KPZ exponent, and stops near 4.5 rows once its bumps are\n// as wide as the panel; the bands keep each stage of it as it scrolls by.\nconst W = 64, H = 128, R = 512, RM = R - 1;\nconst { min, max, floor, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst MAXF = 1024, MAXL = 256;\nconst FALL = 70; // rows a second\nconst FRONT = 0.8; // the camera holds the mean front this far up the panel\nconst LID = 0x7fffffff;\n\nexport function setup(params) {\n  params.s = {\n    fresh: true,\n    h: new Int32Array(W), // rows taken in each column, counting the particles still falling to it\n    vh: new Int32Array(W), // the same for the particles that have landed\n    cell: new Int32Array(W * R), // particle number, 0 for a hole\n    row: new Int32Array(R).fill(-1), // the world row each ring row holds\n    n: 0, base: 0, acc: 0, t: 0,\n    fx: new Int16Array(MAXF), fy: new Float32Array(MAXF), fto: new Int32Array(MAXF), fn: new Int32Array(MAXF), nf: 0,\n    lx: new Int16Array(MAXL), ly: new Int32Array(MAXL), lt: new Float32Array(MAXL).fill(-9), li: 0,\n    hue: 0, layers: 6,\n    pal: new Float32Array(256 * 3), palKey: new Int32Array(256).fill(-1),\n  };\n}\n\n// Vold's rule. A particle falling down column x stops on its own column's top\n// or, if it sticks sideways, beside the top particle of a taller neighbour:\n// h_x \u003c- max(h_{x-1}, h_x + 1, h_{x+1}). The columns wrap round.\nfunction deposit(P, x, stick) {\n  const h = P.h;\n  let y = h[x];\n  if (stick) y = max(y, h[(x + 63) & 63] - 1, h[(x + 1) & 63] - 1);\n  h[x] = y + 1;\n  return y;\n}\n\n// The deposit lives in a ring of 512 rows; a row is wiped when a particle\n// first reaches it, and rows far below the camera are written over.\nfunction place(P, x, y, n) {\n  const rr = y & RM;\n  if (P.row[rr] !== y) {\n    if (P.row[rr] > y) return;\n    P.row[rr] = y;\n    P.cell.fill(0, rr * W, rr * W + W);\n  }\n  P.cell[rr * W + x] = n;\n  if (y >= P.vh[x]) P.vh[x] = y + 1;\n}\n\nconst meanH = (h) => {\n  let s = 0;\n  for (let x = 0; x \u003c W; x++) s += h[x];\n  return s / W;\n};\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 6], d = cl(dt || 0, 0, 0.1);\n  const speed = cl(k[1], 0.2, 3), slip = cl(k[2], 0, 1);\n  P.hue = k[0];\n  P.layers = cl(k[3], 6, 24);\n  P.t += d;\n  // The opening deposit is laid on a flat floor before the first frame,\n  // until its mean front stands at the camera's mark.\n  if (P.fresh) {\n    P.fresh = false;\n    while (meanH(P.h) \u003c FRONT * H)\n      for (let i = 0; i \u003c W; i++) {\n        const x = floor(random() * W);\n        place(P, x, deposit(P, x, random() >= slip), ++P.n);\n      }\n  }\n  // K1: a flat lid one row above the highest particle. The front starts\n  // flat again and roughens on top of it.\n  if (input.btnPressed && input.btnPressed[0]) {\n    let y = 0;\n    for (let x = 0; x \u003c W; x++) y = max(y, P.h[x]);\n    for (let x = 0; x \u003c W; x++) place(P, x, y, LID), (P.h[x] = y + 1);\n    for (let i = 0; i \u003c P.nf; i++) P.fto[i] = deposit(P, P.fx[i], random() >= slip);\n  }\n  // Each particle's landing is settled the moment it leaves the top, against\n  // the deposit as all earlier particles left it, so the order is Vold's\n  // one at a time; the fall to that place is only shown.\n  P.acc += 4 * Math.pow(75, (speed - 0.2) / 2.8) * d;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    if (P.nf >= MAXF) continue;\n    const i = P.nf++, x = floor(random() * W);\n    P.fx[i] = x;\n    P.fto[i] = deposit(P, x, random() >= slip);\n    P.fn[i] = ++P.n;\n    P.fy[i] = max(P.base + H + random() * FALL * d, P.fto[i] + 1);\n  }\n  for (let i = 0; i \u003c P.nf; i++) {\n    P.fy[i] -= FALL * d;\n    if (P.fy[i] > P.fto[i]) continue;\n    place(P, P.fx[i], P.fto[i], P.fn[i]);\n    const j = P.li++ & (MAXL - 1);\n    (P.lx[j] = P.fx[i]), (P.ly[j] = P.fto[i]), (P.lt[j] = P.t);\n    P.nf--;\n    (P.fx[i] = P.fx[P.nf]), (P.fy[i] = P.fy[P.nf]), (P.fto[i] = P.fto[P.nf]), (P.fn[i] = P.fn[P.nf]);\n    i--;\n  }\n  const goal = meanH(P.vh) - FRONT * H;\n  if (goal > P.base) P.base += (goal - P.base) * min(1, d * 4);\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const B = round(P.base), per = W * P.layers, pal = P.pal, key = P.palKey;\n  // A band is Layers times 64 particles, counted in landing order. Bands\n  // alternate between two colours 0.3 of the wheel apart, and the pair\n  // wanders 0.125 up the wheel and back over ten bands.\n  const colour = (n) => {\n    const b = floor((n - 1) / per), q = b & 255;\n    if (key[q] !== b) {\n      key[q] = b;\n      const odd = b & 1, u = b % 10, tri = u \u003c 5 ? u : 10 - u;\n      hsv(P.hue + 0.48 + 0.025 * tri + (odd ? 0.3 : 0), odd ? 0.8 : 0.9, odd ? 0.85 : 1, pal, q * 3);\n    }\n    return q * 3;\n  };\n  for (let sy = 0; sy \u003c H; sy++) {\n    // Older deposit dims with depth, to 55% at the bottom edge.\n    const wy = B + H - 1 - sy, rr = wy & RM, ok = wy >= 0 && P.row[rr] === wy, fade = 1 - 0.45 * cl((sy - 30) / 98, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const n = ok ? P.cell[rr * W + x] : 0;\n      if (!n) display.setPixel(x, sy, 0, 0, 0);\n      else if (n === LID) display.setPixel(x, sy, 200, 200, 200);\n      else {\n        const q = colour(n);\n        // The top particle of each column, the front itself, burns pale.\n        if (wy === P.vh[x] - 1) display.setPixel(x, sy, pal[q] * 0.35 + 166, pal[q + 1] * 0.35 + 166, pal[q + 2] * 0.35 + 166);\n        else display.setPixel(x, sy, pal[q] * fade, pal[q + 1] * fade, pal[q + 2] * fade);\n      }\n    }\n  }\n  // Fresh landings flash white and settle into their band's colour.\n  for (let j = 0; j \u003c MAXL; j++) {\n    const age = P.t - P.lt[j];\n    if (age > 0.4) continue;\n    const y = P.ly[j], sy = B + H - 1 - y, rr = y & RM, n = P.row[rr] === y ? P.cell[rr * W + P.lx[j]] : 0;\n    if (sy \u003c 0 || sy >= H || !n || n === LID) continue;\n    const q = colour(n), a = age / 0.4, w = 255 * (1 - a);\n    display.setPixel(P.lx[j], sy, w + pal[q] * a, w + pal[q + 1] * a, w + pal[q + 2] * a);\n  }\n  // Particles in flight: a white head and a short grey tail.\n  for (let i = 0; i \u003c P.nf; i++) {\n    const sy = B + H - 1 - floor(P.fy[i]);\n    for (let t = 0; t \u003c 3; t++) {\n      const y = sy - t, v = t ? 150 - 45 * t : 255;\n      if (y >= 0 && y \u003c H) display.setPixel(P.fx[i], y, v, v, v);\n    }\n  }\n}\n","layer":{"id":"layer-ballistic-deposition","type":"code","name":"ballistic-deposition","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ballistic Deposition\n// Family:  particle\n// Idea:    Particles fall straight down on to 64 columns and stick at the first thing they touch, the top of their own column or the side of a taller neighbour, so a porous deposit grows up the panel in coloured bands whose boundaries are the old fronts, rough and getting rougher, while the camera climbs with the front.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: ballistic deposition (Marjorie J. Vold, 1959), whose surface is in the Kardar-Parisi-Zhang class (1986), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24\n//\n// Knob 1: Hue. Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green.\n// Knob 2: Speed. Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second.\n// Knob 3: Slip. The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000.\n// Knob 4: Layers. How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows.\n// Buttons: K1 tap lays a flat white lid across the panel one row above the highest particle. The particles in the air land on it, and the front starts flat again and roughens above it, band by band.\n\n// On 64 columns that wrap round, the front's width grows from a flat start\n// as t^(1/3), the KPZ exponent, and stops near 4.5 rows once its bumps are\n// as wide as the panel; the bands keep each stage of it as it scrolls by.\nconst W = 64, H = 128, R = 512, RM = R - 1;\nconst { min, max, floor, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst MAXF = 1024, MAXL = 256;\nconst FALL = 70; // rows a second\nconst FRONT = 0.8; // the camera holds the mean front this far up the panel\nconst LID = 0x7fffffff;\n\nexport function setup(params) {\n  params.s = {\n    fresh: true,\n    h: new Int32Array(W), // rows taken in each column, counting the particles still falling to it\n    vh: new Int32Array(W), // the same for the particles that have landed\n    cell: new Int32Array(W * R), // particle number, 0 for a hole\n    row: new Int32Array(R).fill(-1), // the world row each ring row holds\n    n: 0, base: 0, acc: 0, t: 0,\n    fx: new Int16Array(MAXF), fy: new Float32Array(MAXF), fto: new Int32Array(MAXF), fn: new Int32Array(MAXF), nf: 0,\n    lx: new Int16Array(MAXL), ly: new Int32Array(MAXL), lt: new Float32Array(MAXL).fill(-9), li: 0,\n    hue: 0, layers: 6,\n    pal: new Float32Array(256 * 3), palKey: new Int32Array(256).fill(-1),\n  };\n}\n\n// Vold's rule. A particle falling down column x stops on its own column's top\n// or, if it sticks sideways, beside the top particle of a taller neighbour:\n// h_x \u003c- max(h_{x-1}, h_x + 1, h_{x+1}). The columns wrap round.\nfunction deposit(P, x, stick) {\n  const h = P.h;\n  let y = h[x];\n  if (stick) y = max(y, h[(x + 63) & 63] - 1, h[(x + 1) & 63] - 1);\n  h[x] = y + 1;\n  return y;\n}\n\n// The deposit lives in a ring of 512 rows; a row is wiped when a particle\n// first reaches it, and rows far below the camera are written over.\nfunction place(P, x, y, n) {\n  const rr = y & RM;\n  if (P.row[rr] !== y) {\n    if (P.row[rr] > y) return;\n    P.row[rr] = y;\n    P.cell.fill(0, rr * W, rr * W + W);\n  }\n  P.cell[rr * W + x] = n;\n  if (y >= P.vh[x]) P.vh[x] = y + 1;\n}\n\nconst meanH = (h) => {\n  let s = 0;\n  for (let x = 0; x \u003c W; x++) s += h[x];\n  return s / W;\n};\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 6], d = cl(dt || 0, 0, 0.1);\n  const speed = cl(k[1], 0.2, 3), slip = cl(k[2], 0, 1);\n  P.hue = k[0];\n  P.layers = cl(k[3], 6, 24);\n  P.t += d;\n  // The opening deposit is laid on a flat floor before the first frame,\n  // until its mean front stands at the camera's mark.\n  if (P.fresh) {\n    P.fresh = false;\n    while (meanH(P.h) \u003c FRONT * H)\n      for (let i = 0; i \u003c W; i++) {\n        const x = floor(random() * W);\n        place(P, x, deposit(P, x, random() >= slip), ++P.n);\n      }\n  }\n  // K1: a flat lid one row above the highest particle. The front starts\n  // flat again and roughens on top of it.\n  if (input.btnPressed && input.btnPressed[0]) {\n    let y = 0;\n    for (let x = 0; x \u003c W; x++) y = max(y, P.h[x]);\n    for (let x = 0; x \u003c W; x++) place(P, x, y, LID), (P.h[x] = y + 1);\n    for (let i = 0; i \u003c P.nf; i++) P.fto[i] = deposit(P, P.fx[i], random() >= slip);\n  }\n  // Each particle's landing is settled the moment it leaves the top, against\n  // the deposit as all earlier particles left it, so the order is Vold's\n  // one at a time; the fall to that place is only shown.\n  P.acc += 4 * Math.pow(75, (speed - 0.2) / 2.8) * d;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    if (P.nf >= MAXF) continue;\n    const i = P.nf++, x = floor(random() * W);\n    P.fx[i] = x;\n    P.fto[i] = deposit(P, x, random() >= slip);\n    P.fn[i] = ++P.n;\n    P.fy[i] = max(P.base + H + random() * FALL * d, P.fto[i] + 1);\n  }\n  for (let i = 0; i \u003c P.nf; i++) {\n    P.fy[i] -= FALL * d;\n    if (P.fy[i] > P.fto[i]) continue;\n    place(P, P.fx[i], P.fto[i], P.fn[i]);\n    const j = P.li++ & (MAXL - 1);\n    (P.lx[j] = P.fx[i]), (P.ly[j] = P.fto[i]), (P.lt[j] = P.t);\n    P.nf--;\n    (P.fx[i] = P.fx[P.nf]), (P.fy[i] = P.fy[P.nf]), (P.fto[i] = P.fto[P.nf]), (P.fn[i] = P.fn[P.nf]);\n    i--;\n  }\n  const goal = meanH(P.vh) - FRONT * H;\n  if (goal > P.base) P.base += (goal - P.base) * min(1, d * 4);\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const B = round(P.base), per = W * P.layers, pal = P.pal, key = P.palKey;\n  // A band is Layers times 64 particles, counted in landing order. Bands\n  // alternate between two colours 0.3 of the wheel apart, and the pair\n  // wanders 0.125 up the wheel and back over ten bands.\n  const colour = (n) => {\n    const b = floor((n - 1) / per), q = b & 255;\n    if (key[q] !== b) {\n      key[q] = b;\n      const odd = b & 1, u = b % 10, tri = u \u003c 5 ? u : 10 - u;\n      hsv(P.hue + 0.48 + 0.025 * tri + (odd ? 0.3 : 0), odd ? 0.8 : 0.9, odd ? 0.85 : 1, pal, q * 3);\n    }\n    return q * 3;\n  };\n  for (let sy = 0; sy \u003c H; sy++) {\n    // Older deposit dims with depth, to 55% at the bottom edge.\n    const wy = B + H - 1 - sy, rr = wy & RM, ok = wy >= 0 && P.row[rr] === wy, fade = 1 - 0.45 * cl((sy - 30) / 98, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const n = ok ? P.cell[rr * W + x] : 0;\n      if (!n) display.setPixel(x, sy, 0, 0, 0);\n      else if (n === LID) display.setPixel(x, sy, 200, 200, 200);\n      else {\n        const q = colour(n);\n        // The top particle of each column, the front itself, burns pale.\n        if (wy === P.vh[x] - 1) display.setPixel(x, sy, pal[q] * 0.35 + 166, pal[q + 1] * 0.35 + 166, pal[q + 2] * 0.35 + 166);\n        else display.setPixel(x, sy, pal[q] * fade, pal[q + 1] * fade, pal[q + 2] * fade);\n      }\n    }\n  }\n  // Fresh landings flash white and settle into their band's colour.\n  for (let j = 0; j \u003c MAXL; j++) {\n    const age = P.t - P.lt[j];\n    if (age > 0.4) continue;\n    const y = P.ly[j], sy = B + H - 1 - y, rr = y & RM, n = P.row[rr] === y ? P.cell[rr * W + P.lx[j]] : 0;\n    if (sy \u003c 0 || sy >= H || !n || n === LID) continue;\n    const q = colour(n), a = age / 0.4, w = 255 * (1 - a);\n    display.setPixel(P.lx[j], sy, w + pal[q] * a, w + pal[q + 1] * a, w + pal[q + 2] * a);\n  }\n  // Particles in flight: a white head and a short grey tail.\n  for (let i = 0; i \u003c P.nf; i++) {\n    const sy = B + H - 1 - floor(P.fy[i]);\n    for (let t = 0; t \u003c 3; t++) {\n      const y = sy - t, v = t ? 150 - 45 * t : 255;\n      if (y >= 0 && y \u003c H) display.setPixel(P.fx[i], y, v, v, v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Slip=0..1, Layers=6..24","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both band colours round the wheel together. At 0 the bands alternate cyan and violet, and over every ten bands the pair wanders to azure and pink and back; at 0.5 they are red and green."},{"name":"Speed","min":0.2,"max":3,"about":"Particles a second: 4 at 0.2, so each one can be followed down, 64 at 2, one layer a second with the front climbing 2 rows a second, and 300 at 3, a hail that pushes the deposit off the bottom 10 rows a second."},{"name":"Slip","min":0,"max":1,"about":"The chance that a particle slides past a taller neighbour's side and lands on its own column. At 0 every one sticks: the deposit fills 47% of its cells and the front's width settles near 4.5 rows after about 30 layers. At 1 it is random deposition: no holes, no sideways reach, needles of every length, and a width that grows as the square root of time without end, 10 rows after 100 layers and 30 after 1000."},{"name":"Layers","min":6,"max":24,"about":"How many layers of 64 particles each colour band holds: 6 at the start, a band about 13 rows thick in the porous deposit, up to 24, about 50 rows."}],"start":[0,2,0,6],"measures":{"motion":0.6499,"detail":0.2394,"edges":0.9298,"complexity":0.4248,"coverage":0.4131,"colour":0.4145,"drift":0.0572},"knobResponse":[0.2133,0.2835,0.2999,0.1051]},{"slug":"balloon-box","title":"Balloon Box","family":"weather","round":11,"note":"새벽 골짜기에 바람이 둘이에요. 낮은 바람은 열기구를 왼쪽으로, 높은 바람은 오른쪽으로 데려가고, 조종사가 버너로 높이를 바꾸면 풍선이 멈췄다 되돌아가요. 옆으로 나간 자리에는 새 풍선이 바람을 타고 들어오거나 들판에서 떠올라요. K1 을 누르면 모든 버너가 한꺼번에 켜져요.","idea":"Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.","buttons":"K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.","code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-balloon-box","type":"code","name":"balloon-box","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons."},{"name":"Wind","min":0.2,"max":3,"about":"How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds."},{"name":"Balloons","min":8,"max":16,"about":"How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back."},{"name":"Sunrise","min":0,"max":1,"about":"The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue."}],"start":[0,2,8,0.06],"measures":{"motion":0.167,"detail":0.0307,"edges":0.6336,"complexity":0.5511,"coverage":0.8946,"colour":0.5662,"drift":0.2806},"knobResponse":[0.306,0.2762,0.2316,0.2865]},{"slug":"bath-fizz","title":"Bath Fizz","family":"cosmetic","round":35,"note":"패널 아래에서 녹는 배스 파우더가 깊은 물속으로 안료 구름을 올려 보내요. 분홍에서 색상환을 따라 벌려 놓은 안료 세 가지가 버섯 머리로 말리며 128줄을 채우고 맞닿은 가장자리에서 섞여요. 가는 거품 줄기가 그 사이를 뚫고 올라가며 물을 끌어올려요. K3 은 거품을 1초에 60개에서 360개로 늘려 첫 구름이 위 20줄에 닿는 때를 7.6초에서 2.4초로 당기고, K1 을 누르면 세 색이 바닥에서 한꺼번에 터져요.","idea":"Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.","buttons":"K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.","code":"// ===== Patternflow pattern =====\n// Title:   Bath Fizz\n// Family:  cosmetic\n// Idea:    Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after underwater film of a fizzing bath powder clouding the water\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1\n//\n// Knob 1: Hue. Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo.\n// Knob 2: Speed. How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower.\n// Knob 3: Fizz. How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s.\n// Knob 4: Mix. How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac.\n// Buttons: K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.\n\nconst W = 64, H = 128, N = W * H;\n// The water is worked out on a grid of 2x2 LEDs; the pigment is carried at\n// full resolution through it, so the clouds keep a fine edge.\nconst GW = 32, GH = 64, GN = GW * GH;\nconst MAXB = 1200;\n// Deep indigo, given at full brightness like the water colour it replaces.\nconst INDIGO = [0.34, 0.3, 1];\nconst { min, max, floor, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    U: F(GN), V: F(GN), U0: F(GN), V0: F(GN), P: F(GN), DV: F(GN), L: F(GN), L0: F(GN), CU: F(GN), FB: F(GN),\n    A: [F(N), F(N), F(N)], TA: F(N), PI0: new Int32Array(N), PF: F(2 * N), BB: F(N), BT: F(N), DD: F(N),\n    bx: F(MAXB), by: F(MAXB), bs: F(MAXB), bp: F(MAXB), nb: 0,\n    // Three places along the bottom where the powder fizzes, one per colour.\n    src: [0, 1, 2].map((c) => ({ c, ph: (2 * PI * c) / 3 + rnd(), w: [0.11, 0.07, 0.09][c], next: 0.2 + 0.5 * c, puff: 0, bacc: 0 })),\n    T: 0, RS: F(W), RC: F(W), PW: F(256), pe: 0, hue: 0, speed: 2, fizz: 0, mix: 0.06, started: false, col: F(20), key: NaN,\n  };\n}\n\n// Bilinear read of a grid field at grid coordinates.\nfunction samp(F, x, y) {\n  x = cl(x, 0, GW - 1.001);\n  y = cl(y, 0, GH - 1.001);\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, i = iy * GW + ix;\n  return (F[i] * (1 - fx) + F[i + 1] * fx) * (1 - fy) + (F[i + GW] * (1 - fx) + F[i + GW + 1] * fx) * fy;\n}\n\n// A soft round blob added to a full-resolution field.\nfunction blob(A, cx, cy, r, w) {\n  const x0 = max(0, floor(cx - 2 * r)), x1 = min(W - 1, floor(cx + 2 * r)), y0 = max(0, floor(cy - 2 * r)), y1 = min(H - 1, floor(cy + 2 * r));\n  const k = 1 / (r * r);\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy;\n      A[y * W + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction gblob(G, cx, cy, r, w) {\n  // The same on the water's grid, given in LEDs.\n  const gx = cx / 2, gy = cy / 2, gr = r / 2, k = 1 / (gr * gr);\n  for (let y = max(0, floor(gy - 2 * gr)); y \u003c= min(GH - 1, floor(gy + 2 * gr)); y++)\n    for (let x = max(0, floor(gx - 2 * gr)); x \u003c= min(GW - 1, floor(gx + 2 * gr)); x++) {\n      const dx = x + 0.5 - gx, dy = y + 0.5 - gy;\n      G[y * GW + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction bubbles(S, x, n, spread) {\n  for (let j = 0; j \u003c n && S.nb \u003c MAXB; j++) {\n    const i = S.nb++;\n    S.bx[i] = x + (rnd() + rnd() - 1) * spread;\n    S.by[i] = H + 1 + rnd() * 4;\n    S.bs[i] = rnd();\n    S.bp[i] = rnd() * 2 * PI;\n  }\n}\n\n// A burst from one place: pigment and lift at the bottom, and its bubbles.\nfunction puff(S, s, x, k) {\n  blob(S.A[s.c], x, H - 2, 5 + 2 * k, 5.4 * k);\n  gblob(S.L, x, H - 3, 6 + 2 * k, 2.2 * k);\n}\n\nfunction burst(S) {\n  for (const s of S.src) {\n    const x = 6 + rnd() * 52;\n    puff(S, s, x, 2.2);\n    bubbles(S, x, 70, 5);\n  }\n}\n\nfunction fluid(S, st) {\n  const U = S.U, V = S.V, U0 = S.U0, V0 = S.V0, L = S.L, L0 = S.L0, P = S.P, DV = S.DV, CU = S.CU, FB = S.FB, f = S.fizz;\n  // Forces: the lift the fizz leaves in the water, and the drag of each\n  // rising bubble on the water round it.\n  const buoy = 34 * (1 + 0.9 * f);\n  for (let i = 0; i \u003c GN; i++) {\n    V[i] -= st * (buoy * L[i] + 7 * FB[i]);\n    FB[i] = 0;\n  }\n  // Vorticity confinement keeps the small curls that roll a cloud's edge over.\n  for (let y = 1; y \u003c GH - 1; y++)\n    for (let x = 1; x \u003c GW - 1; x++) {\n      const i = y * GW + x;\n      CU[i] = 0.5 * (V[i + 1] - V[i - 1] - U[i + GW] + U[i - GW]);\n    }\n  const eps = 2.2;\n  for (let y = 2; y \u003c GH - 2; y++)\n    for (let x = 2; x \u003c GW - 2; x++) {\n      const i = y * GW + x;\n      const nx = 0.5 * (abs(CU[i + 1]) - abs(CU[i - 1])), ny = 0.5 * (abs(CU[i + GW]) - abs(CU[i - GW])), nl = sqrt(nx * nx + ny * ny) + 1e-5;\n      U[i] += st * eps * (ny / nl) * CU[i];\n      V[i] -= st * eps * (nx / nl) * CU[i];\n    }\n  // Carry the water along itself.\n  U0.set(U);\n  V0.set(V);\n  L0.set(L);\n  const fade = exp(-st / 2.4);\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const px = x - st * U0[i], py = y - st * V0[i];\n      U[i] = samp(U0, px, py) * 0.995;\n      V[i] = samp(V0, px, py) * 0.995;\n      L[i] = samp(L0, px, py) * fade;\n    }\n  // Walls all round: the sides of the bath, its floor below the panel and the\n  // surface above.\n  for (let y = 0; y \u003c GH; y++) {\n    U[y * GW] = U[y * GW + GW - 1] = 0;\n  }\n  for (let x = 0; x \u003c GW; x++) {\n    V[x] = V[(GH - 1) * GW + x] = 0;\n  }\n  // Make it incompressible: what rises in the middle comes down at the sides.\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const ur = x \u003c GW - 1 ? U[i + 1] : 0, ul = x > 0 ? U[i - 1] : 0, vd = y \u003c GH - 1 ? V[i + GW] : 0, vu = y > 0 ? V[i - GW] : 0;\n      DV[i] = 0.5 * (ur - ul + vd - vu);\n    }\n  for (let it = 0; it \u003c 24; it++)\n    for (let y = 0, i = 0; y \u003c GH; y++)\n      for (let x = 0; x \u003c GW; x++, i++) {\n        const p = P[i];\n        const s = (x > 0 ? P[i - 1] : p) + (x \u003c GW - 1 ? P[i + 1] : p) + (y > 0 ? P[i - GW] : p) + (y \u003c GH - 1 ? P[i + GW] : p);\n        P[i] = p + 1.6 * ((s - DV[i]) / 4 - p);\n      }\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const p = P[i];\n      U[i] -= 0.5 * ((x \u003c GW - 1 ? P[i + 1] : p) - (x > 0 ? P[i - 1] : p));\n      V[i] -= 0.5 * ((y \u003c GH - 1 ? P[i + GW] : p) - (y > 0 ? P[i - GW] : p));\n    }\n}\n\nfunction pigment(S, st) {\n  const U = S.U, V = S.V, TA = S.TA, mix = S.mix, PI0 = S.PI0, PF = S.PF;\n  // The pigment is carried by the water, read at each LED's own place so it\n  // stays half a cell finer than the water. The trace back is worked out once\n  // for all three pigments.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const gx = (x + 0.5) / 2 - 0.5, gy = (y + 0.5) / 2 - 0.5;\n      const px = cl(x - 2 * st * samp(U, gx, gy), 0, W - 1.001), py = cl(y - 2 * st * samp(V, gx, gy), 0, H - 1.001);\n      const ix = floor(px), iy = floor(py);\n      PI0[i] = iy * W + ix;\n      PF[2 * i] = px - ix;\n      PF[2 * i + 1] = py - iy;\n    }\n  // Then it spreads a little, more the higher Mix, and slowly thins into the bath.\n  const kap = cl(st * (0.6 + 5 * mix), 0, 0.24), fade = exp(-st / 5);\n  for (const A of S.A) {\n    TA.set(A);\n    for (let i = 0; i \u003c N; i++) {\n      const j = PI0[i], fx = PF[2 * i], fy = PF[2 * i + 1];\n      A[i] = (TA[j] * (1 - fx) + TA[j + 1] * fx) * (1 - fy) + (TA[j + W] * (1 - fx) + TA[j + W + 1] * fx) * fy;\n    }\n    TA.set(A);\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const c = TA[i];\n        const l = (x > 0 ? TA[i - 1] : c) + (x \u003c W - 1 ? TA[i + 1] : c) + (y > 0 ? TA[i - W] : c) + (y \u003c H - 1 ? TA[i + W] : c) - 4 * c;\n        A[i] = (c + kap * l) * fade;\n      }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const f = S.fizz;\n  for (const s of S.src) {\n    // Each place wanders along the bottom as the powder tumbles, each at its\n    // own pace, so now and then two pass and their clouds go up together.\n    s.ph += st * s.w;\n    const x = 32 + 22 * sin(s.ph) + 4 * sin(2.7 * s.ph + s.c);\n    s.next -= st;\n    if (s.next \u003c= 0) {\n      s.puff = 0.8 + 0.6 * rnd();\n      s.next = (1.6 - 0.8 * f) * (0.6 + 0.8 * rnd());\n    }\n    s.puff *= exp(-st / 0.3);\n    const k = st * (0.5 + 0.4 * f + 4 * s.puff);\n    puff(S, s, x, k);\n    s.bacc += st * (30 + 110 * f) * (0.5 + s.puff);\n    const nb = floor(s.bacc);\n    s.bacc -= nb;\n    bubbles(S, x, nb, 1.5 + 1.5 * s.puff);\n  }\n  // Bubbles: small ones rise slower and zig-zag more, all ride the water\n  // sideways, and each pulls the water up with it.\n  const U = S.U, V = S.V, FB = S.FB;\n  let k = 0;\n  for (let i = 0; i \u003c S.nb; i++) {\n    let x = S.bx[i], y = S.by[i];\n    const s = S.bs[i], gx = x / 2 - 0.5, gy = y / 2 - 0.5;\n    const ph = (S.bp[i] += st * (7 + 5 * (1 - s)));\n    const rise = (24 + 20 * s) * (0.85 + 0.5 * f);\n    x += st * (1.2 * samp(U, gx, gy) + (2 + 3 * (1 - s)) * cos(ph));\n    y += st * (2 * samp(V, gx, gy) * 0.6 - rise);\n    if (y \u003c -1 || x \u003c -1 || x > W + 1) continue;\n    const ci = cl(floor(y / 2), 0, GH - 1) * GW + cl(floor(x / 2), 0, GW - 1);\n    FB[ci] += 0.5 + 0.5 * s;\n    S.bx[k] = x;\n    S.by[k] = y;\n    S.bs[k] = s;\n    S.bp[k] = S.bp[i];\n    k++;\n  }\n  S.nb = k;\n  fluid(S, st);\n  pigment(S, st);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.fizz = cl(kv[2] || 0, 0, 1);\n  S.mix = cl(kv[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the water already clouding: six and a half seconds of fizz,\n    // in coarse steps.\n    for (let i = 0; i \u003c 80; i++) step(S, 1 / 12);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, mix = S.mix, A0 = S.A[0], A1 = S.A[1], A2 = S.A[2], T = S.T;\n  // Palette: three pigments spread round the wheel from the hue, and deep\n  // water. A pigment from orange to lime is paled and its cloud thickens\n  // faster, because those hues at half brightness read brown and olive.\n  const h0 = S.hue + 0.92, key = h0 + 3 * mix;\n  if (S.key !== key) {\n    const hs = [h0, h0 - 0.17, h0 - 0.42];\n    for (let c = 0; c \u003c 3; c++) {\n      const hf = hs[c] - floor(hs[c]), wm = sm((hf - 0.02) / 0.05) * (1 - sm((hf - 0.24) / 0.06));\n      hsv(hs[c], 0.95 - 0.45 * wm, 1, col, c * 3);\n      col[9 + c] = 4.5 * (1 + wm);\n      col[16 + c] = wm;\n    }\n    // Deep water opposite the pigments; where that lands on orange or gold it\n    // would be brown, so there the water turns deep indigo.\n    const hw = h0 - 0.32, hf = hw - floor(hw), wm = sm((hf + 0.02) / 0.06) * (1 - sm((hf - 0.27) / 0.08));\n    hsv(hw, 0.8, 1, col, 12);\n    for (let c = 0; c \u003c 3; c++) col[12 + c] += (INDIGO[c] - col[12 + c]) * wm;\n    S.key = key;\n  }\n  // Bubbles: splatted, then a 3x3 blur so each is a soft bump two or three\n  // LEDs across rather than a hard dot.\n  const BB = S.BB, BT = S.BT;\n  BB.fill(0);\n  for (let i = 0; i \u003c S.nb; i++) {\n    const x = S.bx[i] - 0.5, y = S.by[i] - 0.5, ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, w = 0.7 + 0.5 * S.bs[i];\n    if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) continue;\n    const p = iy * W + ix;\n    BB[p] += w * (1 - fx) * (1 - fy);\n    BB[p + 1] += w * fx * (1 - fy);\n    BB[p + W] += w * (1 - fx) * fy;\n    BB[p + W + 1] += w * fx * fy;\n  }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BT[i] = (x > 0 ? BB[i - 1] : 0) + 2 * BB[i] + (x \u003c W - 1 ? BB[i + 1] : 0);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BB[i] = ((y > 0 ? BT[i - W] : 0) + 2 * BT[i] + (y \u003c H - 1 ? BT[i + W] : 0)) / 16;\n  // How sharply the strongest pigment takes a LED: at Mix 0 it takes it up to\n  // a narrow seam, at 1 the pigments add.\n  const pe = 1 + 7 * (1 - mix) * (1 - mix), PW = S.PW;\n  if (S.pe !== pe) {\n    for (let j = 0; j \u003c 256; j++) PW[j] = pow((j + 0.5) / 255, pe);\n    PW[255] = 1;\n    S.pe = pe;\n  }\n  const DD = S.DD;\n  for (let i = 0; i \u003c N; i++) DD[i] = A0[i] + A1[i] + A2[i];\n  // Slow shafts of light slant down through the water from the surface:\n  // sin(a(x) + 0.08 y), split so each row and column is worked out once.\n  const RS = S.RS, RC = S.RC;\n  for (let x = 0; x \u003c W; x++) {\n    const a = 0.16 * x + 0.5 * T + 1.2 * sin(0.05 * x - 0.3 * T);\n    RS[x] = sin(a);\n    RC[x] = cos(a);\n  }\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    // The water: light from the surface, falling off towards the floor.\n    const wl = 0.1 + 0.08 * exp(-y / 40), wr = 0.25 * wl * exp(-y / 70), sy = sin(0.08 * y), cy = cos(0.08 * y);\n    for (let x = 0; x \u003c W; x++, i++) {\n      const a0 = A0[i], a1 = A1[i], a2 = A2[i], D = DD[i];\n      const lw = wl + wr * (1 + RS[x] * cy + RC[x] * sy);\n      let r = col[12] * lw, g = col[13] * lw, b = col[14] * lw;\n      if (D > 0.002) {\n        // Each pigment's weight is its share of the strongest, to the power pe.\n        const am = a0 > a1 ? (a0 > a2 ? a0 : a2) : a1 > a2 ? a1 : a2, iv = 1 / am;\n        const q0 = a0 * iv, q1 = a1 * iv, q2 = a2 * iv;\n        const w0 = PW[(q0 * 255) | 0], w1 = PW[(q1 * 255) | 0], w2 = PW[(q2 * 255) | 0];\n        const ws = w0 + w1 + w2;\n        let cr = (w0 * col[0] + w1 * col[3] + w2 * col[6]) / ws, cg = (w0 * col[1] + w1 * col[4] + w2 * col[7]) / ws, cb = (w0 * col[2] + w1 * col[5] + w2 * col[8]) / ws;\n        // Opacity goes with the cube of the pigment, e^3 / (e^3 + 1): half at\n        // e = 1, nine tenths at e = 2 and nearly clear below a half, so old\n        // colour thins away and fresh clouds stand out on the water.\n        const e = a0 * col[9] + a1 * col[10] + a2 * col[11], e3 = e * e * e, op = e3 / (e3 + 1);\n        // A thinning cloud of orange, gold or lime would dim through brown and\n        // olive, so as it thins it pales towards a grey haze instead.\n        const wp = ((w0 * col[16] + w1 * col[17] + w2 * col[18]) / ws) * (1 - op * op);\n        cr += (0.8 - cr) * wp;\n        cg += (0.8 - cg) * wp;\n        cb += (0.8 - cb) * wp;\n        // Light from above catches the top of each billow and the cloud is\n        // brighter where it is thick.\n        const up = y > 1 ? D - DD[i - 2 * W] : 0;\n        const lv = cl(0.76 + 0.25 * (1 - exp(-2 * D)) + 0.35 * up, 0.5, 1);\n        r += (cr * lv - r) * op;\n        g += (cg * lv - g) * op;\n        b += (cb * lv - b) * op;\n      }\n      const bb = min(0.55, BB[i]);\n      r += bb * (1 - 0.4 * r);\n      g += bb * (1 - 0.4 * g);\n      b += bb * (1 - 0.4 * b);\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","layer":{"id":"layer-bath-fizz","type":"code","name":"bath-fizz","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bath Fizz\n// Family:  cosmetic\n// Idea:    Seen through bath water, fizzing powder somewhere below the panel sends up clouds of saturated pigment in three colours that billow up the 128 rows and roll over into mushroom caps, running into each other at their edges, while streams of fine bubbles rise through them and drag the colour up with them.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after underwater film of a fizzing bath powder clouding the water\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1\n//\n// Knob 1: Hue. Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo.\n// Knob 2: Speed. How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower.\n// Knob 3: Fizz. How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s.\n// Knob 4: Mix. How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac.\n// Buttons: K1 tap sets off a fresh burst: all three colours at once across the bottom and a rush of bubbles.\n\nconst W = 64, H = 128, N = W * H;\n// The water is worked out on a grid of 2x2 LEDs; the pigment is carried at\n// full resolution through it, so the clouds keep a fine edge.\nconst GW = 32, GH = 64, GN = GW * GH;\nconst MAXB = 1200;\n// Deep indigo, given at full brightness like the water colour it replaces.\nconst INDIGO = [0.34, 0.3, 1];\nconst { min, max, floor, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    U: F(GN), V: F(GN), U0: F(GN), V0: F(GN), P: F(GN), DV: F(GN), L: F(GN), L0: F(GN), CU: F(GN), FB: F(GN),\n    A: [F(N), F(N), F(N)], TA: F(N), PI0: new Int32Array(N), PF: F(2 * N), BB: F(N), BT: F(N), DD: F(N),\n    bx: F(MAXB), by: F(MAXB), bs: F(MAXB), bp: F(MAXB), nb: 0,\n    // Three places along the bottom where the powder fizzes, one per colour.\n    src: [0, 1, 2].map((c) => ({ c, ph: (2 * PI * c) / 3 + rnd(), w: [0.11, 0.07, 0.09][c], next: 0.2 + 0.5 * c, puff: 0, bacc: 0 })),\n    T: 0, RS: F(W), RC: F(W), PW: F(256), pe: 0, hue: 0, speed: 2, fizz: 0, mix: 0.06, started: false, col: F(20), key: NaN,\n  };\n}\n\n// Bilinear read of a grid field at grid coordinates.\nfunction samp(F, x, y) {\n  x = cl(x, 0, GW - 1.001);\n  y = cl(y, 0, GH - 1.001);\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, i = iy * GW + ix;\n  return (F[i] * (1 - fx) + F[i + 1] * fx) * (1 - fy) + (F[i + GW] * (1 - fx) + F[i + GW + 1] * fx) * fy;\n}\n\n// A soft round blob added to a full-resolution field.\nfunction blob(A, cx, cy, r, w) {\n  const x0 = max(0, floor(cx - 2 * r)), x1 = min(W - 1, floor(cx + 2 * r)), y0 = max(0, floor(cy - 2 * r)), y1 = min(H - 1, floor(cy + 2 * r));\n  const k = 1 / (r * r);\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy;\n      A[y * W + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction gblob(G, cx, cy, r, w) {\n  // The same on the water's grid, given in LEDs.\n  const gx = cx / 2, gy = cy / 2, gr = r / 2, k = 1 / (gr * gr);\n  for (let y = max(0, floor(gy - 2 * gr)); y \u003c= min(GH - 1, floor(gy + 2 * gr)); y++)\n    for (let x = max(0, floor(gx - 2 * gr)); x \u003c= min(GW - 1, floor(gx + 2 * gr)); x++) {\n      const dx = x + 0.5 - gx, dy = y + 0.5 - gy;\n      G[y * GW + x] += w * exp(-(dx * dx + dy * dy) * k);\n    }\n}\n\nfunction bubbles(S, x, n, spread) {\n  for (let j = 0; j \u003c n && S.nb \u003c MAXB; j++) {\n    const i = S.nb++;\n    S.bx[i] = x + (rnd() + rnd() - 1) * spread;\n    S.by[i] = H + 1 + rnd() * 4;\n    S.bs[i] = rnd();\n    S.bp[i] = rnd() * 2 * PI;\n  }\n}\n\n// A burst from one place: pigment and lift at the bottom, and its bubbles.\nfunction puff(S, s, x, k) {\n  blob(S.A[s.c], x, H - 2, 5 + 2 * k, 5.4 * k);\n  gblob(S.L, x, H - 3, 6 + 2 * k, 2.2 * k);\n}\n\nfunction burst(S) {\n  for (const s of S.src) {\n    const x = 6 + rnd() * 52;\n    puff(S, s, x, 2.2);\n    bubbles(S, x, 70, 5);\n  }\n}\n\nfunction fluid(S, st) {\n  const U = S.U, V = S.V, U0 = S.U0, V0 = S.V0, L = S.L, L0 = S.L0, P = S.P, DV = S.DV, CU = S.CU, FB = S.FB, f = S.fizz;\n  // Forces: the lift the fizz leaves in the water, and the drag of each\n  // rising bubble on the water round it.\n  const buoy = 34 * (1 + 0.9 * f);\n  for (let i = 0; i \u003c GN; i++) {\n    V[i] -= st * (buoy * L[i] + 7 * FB[i]);\n    FB[i] = 0;\n  }\n  // Vorticity confinement keeps the small curls that roll a cloud's edge over.\n  for (let y = 1; y \u003c GH - 1; y++)\n    for (let x = 1; x \u003c GW - 1; x++) {\n      const i = y * GW + x;\n      CU[i] = 0.5 * (V[i + 1] - V[i - 1] - U[i + GW] + U[i - GW]);\n    }\n  const eps = 2.2;\n  for (let y = 2; y \u003c GH - 2; y++)\n    for (let x = 2; x \u003c GW - 2; x++) {\n      const i = y * GW + x;\n      const nx = 0.5 * (abs(CU[i + 1]) - abs(CU[i - 1])), ny = 0.5 * (abs(CU[i + GW]) - abs(CU[i - GW])), nl = sqrt(nx * nx + ny * ny) + 1e-5;\n      U[i] += st * eps * (ny / nl) * CU[i];\n      V[i] -= st * eps * (nx / nl) * CU[i];\n    }\n  // Carry the water along itself.\n  U0.set(U);\n  V0.set(V);\n  L0.set(L);\n  const fade = exp(-st / 2.4);\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const px = x - st * U0[i], py = y - st * V0[i];\n      U[i] = samp(U0, px, py) * 0.995;\n      V[i] = samp(V0, px, py) * 0.995;\n      L[i] = samp(L0, px, py) * fade;\n    }\n  // Walls all round: the sides of the bath, its floor below the panel and the\n  // surface above.\n  for (let y = 0; y \u003c GH; y++) {\n    U[y * GW] = U[y * GW + GW - 1] = 0;\n  }\n  for (let x = 0; x \u003c GW; x++) {\n    V[x] = V[(GH - 1) * GW + x] = 0;\n  }\n  // Make it incompressible: what rises in the middle comes down at the sides.\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const ur = x \u003c GW - 1 ? U[i + 1] : 0, ul = x > 0 ? U[i - 1] : 0, vd = y \u003c GH - 1 ? V[i + GW] : 0, vu = y > 0 ? V[i - GW] : 0;\n      DV[i] = 0.5 * (ur - ul + vd - vu);\n    }\n  for (let it = 0; it \u003c 24; it++)\n    for (let y = 0, i = 0; y \u003c GH; y++)\n      for (let x = 0; x \u003c GW; x++, i++) {\n        const p = P[i];\n        const s = (x > 0 ? P[i - 1] : p) + (x \u003c GW - 1 ? P[i + 1] : p) + (y > 0 ? P[i - GW] : p) + (y \u003c GH - 1 ? P[i + GW] : p);\n        P[i] = p + 1.6 * ((s - DV[i]) / 4 - p);\n      }\n  for (let y = 0, i = 0; y \u003c GH; y++)\n    for (let x = 0; x \u003c GW; x++, i++) {\n      const p = P[i];\n      U[i] -= 0.5 * ((x \u003c GW - 1 ? P[i + 1] : p) - (x > 0 ? P[i - 1] : p));\n      V[i] -= 0.5 * ((y \u003c GH - 1 ? P[i + GW] : p) - (y > 0 ? P[i - GW] : p));\n    }\n}\n\nfunction pigment(S, st) {\n  const U = S.U, V = S.V, TA = S.TA, mix = S.mix, PI0 = S.PI0, PF = S.PF;\n  // The pigment is carried by the water, read at each LED's own place so it\n  // stays half a cell finer than the water. The trace back is worked out once\n  // for all three pigments.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const gx = (x + 0.5) / 2 - 0.5, gy = (y + 0.5) / 2 - 0.5;\n      const px = cl(x - 2 * st * samp(U, gx, gy), 0, W - 1.001), py = cl(y - 2 * st * samp(V, gx, gy), 0, H - 1.001);\n      const ix = floor(px), iy = floor(py);\n      PI0[i] = iy * W + ix;\n      PF[2 * i] = px - ix;\n      PF[2 * i + 1] = py - iy;\n    }\n  // Then it spreads a little, more the higher Mix, and slowly thins into the bath.\n  const kap = cl(st * (0.6 + 5 * mix), 0, 0.24), fade = exp(-st / 5);\n  for (const A of S.A) {\n    TA.set(A);\n    for (let i = 0; i \u003c N; i++) {\n      const j = PI0[i], fx = PF[2 * i], fy = PF[2 * i + 1];\n      A[i] = (TA[j] * (1 - fx) + TA[j + 1] * fx) * (1 - fy) + (TA[j + W] * (1 - fx) + TA[j + W + 1] * fx) * fy;\n    }\n    TA.set(A);\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const c = TA[i];\n        const l = (x > 0 ? TA[i - 1] : c) + (x \u003c W - 1 ? TA[i + 1] : c) + (y > 0 ? TA[i - W] : c) + (y \u003c H - 1 ? TA[i + W] : c) - 4 * c;\n        A[i] = (c + kap * l) * fade;\n      }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const f = S.fizz;\n  for (const s of S.src) {\n    // Each place wanders along the bottom as the powder tumbles, each at its\n    // own pace, so now and then two pass and their clouds go up together.\n    s.ph += st * s.w;\n    const x = 32 + 22 * sin(s.ph) + 4 * sin(2.7 * s.ph + s.c);\n    s.next -= st;\n    if (s.next \u003c= 0) {\n      s.puff = 0.8 + 0.6 * rnd();\n      s.next = (1.6 - 0.8 * f) * (0.6 + 0.8 * rnd());\n    }\n    s.puff *= exp(-st / 0.3);\n    const k = st * (0.5 + 0.4 * f + 4 * s.puff);\n    puff(S, s, x, k);\n    s.bacc += st * (30 + 110 * f) * (0.5 + s.puff);\n    const nb = floor(s.bacc);\n    s.bacc -= nb;\n    bubbles(S, x, nb, 1.5 + 1.5 * s.puff);\n  }\n  // Bubbles: small ones rise slower and zig-zag more, all ride the water\n  // sideways, and each pulls the water up with it.\n  const U = S.U, V = S.V, FB = S.FB;\n  let k = 0;\n  for (let i = 0; i \u003c S.nb; i++) {\n    let x = S.bx[i], y = S.by[i];\n    const s = S.bs[i], gx = x / 2 - 0.5, gy = y / 2 - 0.5;\n    const ph = (S.bp[i] += st * (7 + 5 * (1 - s)));\n    const rise = (24 + 20 * s) * (0.85 + 0.5 * f);\n    x += st * (1.2 * samp(U, gx, gy) + (2 + 3 * (1 - s)) * cos(ph));\n    y += st * (2 * samp(V, gx, gy) * 0.6 - rise);\n    if (y \u003c -1 || x \u003c -1 || x > W + 1) continue;\n    const ci = cl(floor(y / 2), 0, GH - 1) * GW + cl(floor(x / 2), 0, GW - 1);\n    FB[ci] += 0.5 + 0.5 * s;\n    S.bx[k] = x;\n    S.by[k] = y;\n    S.bs[k] = s;\n    S.bp[k] = S.bp[i];\n    k++;\n  }\n  S.nb = k;\n  fluid(S, st);\n  pigment(S, st);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.fizz = cl(kv[2] || 0, 0, 1);\n  S.mix = cl(kv[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the water already clouding: six and a half seconds of fizz,\n    // in coarse steps.\n    for (let i = 0; i \u003c 80; i++) step(S, 1 / 12);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, mix = S.mix, A0 = S.A[0], A1 = S.A[1], A2 = S.A[2], T = S.T;\n  // Palette: three pigments spread round the wheel from the hue, and deep\n  // water. A pigment from orange to lime is paled and its cloud thickens\n  // faster, because those hues at half brightness read brown and olive.\n  const h0 = S.hue + 0.92, key = h0 + 3 * mix;\n  if (S.key !== key) {\n    const hs = [h0, h0 - 0.17, h0 - 0.42];\n    for (let c = 0; c \u003c 3; c++) {\n      const hf = hs[c] - floor(hs[c]), wm = sm((hf - 0.02) / 0.05) * (1 - sm((hf - 0.24) / 0.06));\n      hsv(hs[c], 0.95 - 0.45 * wm, 1, col, c * 3);\n      col[9 + c] = 4.5 * (1 + wm);\n      col[16 + c] = wm;\n    }\n    // Deep water opposite the pigments; where that lands on orange or gold it\n    // would be brown, so there the water turns deep indigo.\n    const hw = h0 - 0.32, hf = hw - floor(hw), wm = sm((hf + 0.02) / 0.06) * (1 - sm((hf - 0.27) / 0.08));\n    hsv(hw, 0.8, 1, col, 12);\n    for (let c = 0; c \u003c 3; c++) col[12 + c] += (INDIGO[c] - col[12 + c]) * wm;\n    S.key = key;\n  }\n  // Bubbles: splatted, then a 3x3 blur so each is a soft bump two or three\n  // LEDs across rather than a hard dot.\n  const BB = S.BB, BT = S.BT;\n  BB.fill(0);\n  for (let i = 0; i \u003c S.nb; i++) {\n    const x = S.bx[i] - 0.5, y = S.by[i] - 0.5, ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, w = 0.7 + 0.5 * S.bs[i];\n    if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) continue;\n    const p = iy * W + ix;\n    BB[p] += w * (1 - fx) * (1 - fy);\n    BB[p + 1] += w * fx * (1 - fy);\n    BB[p + W] += w * (1 - fx) * fy;\n    BB[p + W + 1] += w * fx * fy;\n  }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BT[i] = (x > 0 ? BB[i - 1] : 0) + 2 * BB[i] + (x \u003c W - 1 ? BB[i + 1] : 0);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) BB[i] = ((y > 0 ? BT[i - W] : 0) + 2 * BT[i] + (y \u003c H - 1 ? BT[i + W] : 0)) / 16;\n  // How sharply the strongest pigment takes a LED: at Mix 0 it takes it up to\n  // a narrow seam, at 1 the pigments add.\n  const pe = 1 + 7 * (1 - mix) * (1 - mix), PW = S.PW;\n  if (S.pe !== pe) {\n    for (let j = 0; j \u003c 256; j++) PW[j] = pow((j + 0.5) / 255, pe);\n    PW[255] = 1;\n    S.pe = pe;\n  }\n  const DD = S.DD;\n  for (let i = 0; i \u003c N; i++) DD[i] = A0[i] + A1[i] + A2[i];\n  // Slow shafts of light slant down through the water from the surface:\n  // sin(a(x) + 0.08 y), split so each row and column is worked out once.\n  const RS = S.RS, RC = S.RC;\n  for (let x = 0; x \u003c W; x++) {\n    const a = 0.16 * x + 0.5 * T + 1.2 * sin(0.05 * x - 0.3 * T);\n    RS[x] = sin(a);\n    RC[x] = cos(a);\n  }\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    // The water: light from the surface, falling off towards the floor.\n    const wl = 0.1 + 0.08 * exp(-y / 40), wr = 0.25 * wl * exp(-y / 70), sy = sin(0.08 * y), cy = cos(0.08 * y);\n    for (let x = 0; x \u003c W; x++, i++) {\n      const a0 = A0[i], a1 = A1[i], a2 = A2[i], D = DD[i];\n      const lw = wl + wr * (1 + RS[x] * cy + RC[x] * sy);\n      let r = col[12] * lw, g = col[13] * lw, b = col[14] * lw;\n      if (D > 0.002) {\n        // Each pigment's weight is its share of the strongest, to the power pe.\n        const am = a0 > a1 ? (a0 > a2 ? a0 : a2) : a1 > a2 ? a1 : a2, iv = 1 / am;\n        const q0 = a0 * iv, q1 = a1 * iv, q2 = a2 * iv;\n        const w0 = PW[(q0 * 255) | 0], w1 = PW[(q1 * 255) | 0], w2 = PW[(q2 * 255) | 0];\n        const ws = w0 + w1 + w2;\n        let cr = (w0 * col[0] + w1 * col[3] + w2 * col[6]) / ws, cg = (w0 * col[1] + w1 * col[4] + w2 * col[7]) / ws, cb = (w0 * col[2] + w1 * col[5] + w2 * col[8]) / ws;\n        // Opacity goes with the cube of the pigment, e^3 / (e^3 + 1): half at\n        // e = 1, nine tenths at e = 2 and nearly clear below a half, so old\n        // colour thins away and fresh clouds stand out on the water.\n        const e = a0 * col[9] + a1 * col[10] + a2 * col[11], e3 = e * e * e, op = e3 / (e3 + 1);\n        // A thinning cloud of orange, gold or lime would dim through brown and\n        // olive, so as it thins it pales towards a grey haze instead.\n        const wp = ((w0 * col[16] + w1 * col[17] + w2 * col[18]) / ws) * (1 - op * op);\n        cr += (0.8 - cr) * wp;\n        cg += (0.8 - cg) * wp;\n        cb += (0.8 - cb) * wp;\n        // Light from above catches the top of each billow and the cloud is\n        // brighter where it is thick.\n        const up = y > 1 ? D - DD[i - 2 * W] : 0;\n        const lv = cl(0.76 + 0.25 * (1 - exp(-2 * D)) + 0.35 * up, 0.5, 1);\n        r += (cr * lv - r) * op;\n        g += (cg * lv - g) * op;\n        b += (cb * lv - b) * op;\n      }\n      const bb = min(0.55, BB[i]);\n      r += bb * (1 - 0.4 * r);\n      g += bb * (1 - 0.4 * g);\n      b += bb * (1 - 0.4 * b);\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fizz=0..1, Mix=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three pigments and the deep water round the whole wheel together, opening on pink, violet and aqua. A pigment that lands between orange and lime is laid paler and brighter, peach or butter, and thins to a pale haze, and water that would go brown turns deep indigo."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water moves: at 2 a bubble crosses the 128 rows in about four seconds and a cloud's colour thins away over five; at 0.2 everything runs ten times slower."},{"name":"Fizz","min":0,"max":1,"about":"How hard the powder fizzes: at 0 a gentle chug of about 60 bubbles a second and a puff from each colour every 1.6 s, the first cloud reaching the top 20 rows after 7.6 s; at 1 about 360 bubbles a second, a puff every 0.8 s, and the first cloud is up there in 2.4 s."},{"name":"Mix","min":0,"max":1,"about":"How far the colours run into each other: at 0 the strongest pigment takes each LED up to a seam a LED or two wide; at 1 the pigments spread nine times as fast and blend where they overlap, so pink and aqua meet in lilac."}],"start":[0,2,0,0.06],"measures":{"motion":0.7842,"detail":0.0381,"edges":0.0956,"complexity":2.4963,"coverage":1,"colour":0.5925,"drift":0.2882},"knobResponse":[0.3666,0.2615,0.3734,0.0989]},{"slug":"bauhaus","title":"Bauhaus","family":"geometry","round":1,"note":"바우하우스 포스터처럼 납작한 원반과 막대가 2×4 칸에 놓이고, 한 칸씩 천천히 다른 모양이나 색으로 바뀌어요.","idea":"A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.","buttons":"K1 tap deals the whole sheet again, a diagonal of cells at a time.","code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-bauhaus","type":"code","name":"bauhaus","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the red, yellow and blue together around the wheel; the cream stays cream."},{"name":"Pace","min":0.25,"max":6,"about":"How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once."},{"name":"Grid","min":4,"max":12,"about":"Cells down the long side, from four big squares to twelve small ones."},{"name":"Line","min":0,"max":1,"about":"How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing."}],"start":[0,2,4,0.06],"measures":{"motion":0.0436,"detail":0.04,"edges":0.8787,"complexity":0.0601,"coverage":0.5555,"colour":0.5847,"drift":0.0591},"knobResponse":[0.3486,0.141,0.3458,0.2172]},{"slug":"bernoulli-convolutions","title":"Bernoulli Convolutions","family":"fractal","round":38,"note":"128줄 하나하나가 λ 하나에 대한 ±1 ±λ ±λ² … 의 분포예요. 위의 칸토어 먼지에서 아래의 매끈한 종까지 항이 하나 더해질 때마다 모든 점이 둘로 쪼개지고, λ 가 피소 수의 역수인 열네 줄에서는 합이 같은 점에 거듭 내려앉아 흰 금빛으로 타요. K3 은 동전을 한쪽으로 기울여 종을 오른쪽 벽으로 밀고, K1 을 누르면 항을 다 걷었다가 첫 항부터 다시 쌓아요.","idea":"Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.","buttons":"K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.","code":"// ===== Patternflow pattern =====\n// Title:   Bernoulli Convolutions\n// Family:  fractal\n// Idea:    Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bernoulli convolutions (Børge Jessen and Aurel Wintner, 1935; Paul Erdős, 1939; Boris Solomyak, 1995), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1\n//\n// Knob 1: Hue. Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive.\n// Knob 2: Speed. At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed.\n// Knob 3: Bias. The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95.\n// Knob 4: Zoom. The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart.\n// Buttons: K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.\n\nconst W = 64, H = 128, M = 512, F = M / W;\n// Terms: the cycle falls to NLO and climbs to NHI; stages 0..NHI are kept.\nconst NLO = 6, NHI = 13;\n// Seconds at Speed 2: hold at NHI, per term falling, rest at NLO, per term\n// climbing. The first hold, the picture the pattern opens on, lasts OPEN\n// seconds at any speed.\nconst HOLD = 2.5, TF = 0.33, REST = 0.6, TC = 1.0, OPEN = 1.2;\n// Opening hue: violet and azure, not red.\nconst H0 = 0.62;\n// Pisot numbers in (1, 2), each the largest root of its polynomial (highest\n// power first). Their reciprocals are the lambdas where Erdos (1939) showed\n// the measure singular: the sums land on each other again and again.\nconst PISOT = [\n  [1, 0, -1, -1], // 1.3247, the plastic number\n  [1, -1, 0, 0, -1], // 1.3803\n  [1, -1, -1, 1, 0, -1], // 1.4433\n  [1, -1, 0, -1], // 1.4656\n  [1, -1, -1, 0, 1, 0, -1], // 1.5016\n  [1, 0, -1, -1, -1, -1], // 1.5342\n  [1, -1, -1, 0, 0, 1, 0, -1], // 1.5452\n  [1, -1, 0, -1, 0, -1], // 1.5701\n  [1, -1, -1], // 1.6180, the golden ratio\n  [1, -1, -1, 0, 0, -1], // 1.7049\n  [1, -2, 1, -1], // 1.7549\n  [1, -1, -1, -1], // 1.8393, the tribonacci constant\n  [1, -2, 0, 1, -1], // 1.8668\n  [1, -1, -1, -1, -1], // 1.9276\n];\nconst { floor, min, abs, exp, log2, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = [v, q, p, p, t, v][i];\n  out[o + 1] = [t, v, v, q, p, p][i];\n  out[o + 2] = [p, p, t, v, v, q][i];\n}\n\n// Newton from 2 down to the largest real root.\nfunction rootOf(c) {\n  let x = 2;\n  for (let it = 0; it \u003c 60; it++) {\n    let f = 0, d = 0;\n    for (let k = 0; k \u003c c.length; k++) {\n      d = d * x + f;\n      f = f * x + c[k];\n    }\n    x -= f / d;\n  }\n  return x;\n}\nconst LAMP = PISOT.map((c) => 1 / rootOf(c));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0.5, zoom: 0.06, built: false, bBias: -1, bZoom: -1, since: 0,\n    lam: new Float64Array(H), pis: new Int8Array(H).fill(-1),\n    h: new Float64Array(M), h2: new Float64Array(M + 1),\n    // Per stage, row and column: the mass of the row in the column, and\n    // the log2 of how many sign choices share a point there on average.\n    I: new Float32Array((NHI + 1) * H * W), G: new Float32Array((NHI + 1) * H * W),\n    phase: 0, pt: 0, lo: NLO, x: NHI, open: OPEN,\n    lut: new Float32Array(256 * 3), row: new Float32Array(W), gold: [1, 0.86, 0.56],\n  };\n}\n\n// The lambdas of the rows, the nearest row to each Pisot reciprocal moved\n// onto it exactly. Every other row's lambda is a binary fraction, and for\n// those no two sign choices ever give the same sum: the highest power that\n// differs leaves an odd numerator no lower power can cancel.\nfunction rows(S) {\n  const lo = 0.3 + 0.26 * S.zoom, hi = 0.9 - 0.12 * S.zoom, dl = (hi - lo) / (H - 1);\n  S.lo0 = lo;\n  S.hi0 = hi;\n  S.pis.fill(-1);\n  for (let r = 0; r \u003c H; r++) S.lam[r] = lo + dl * r;\n  LAMP.forEach((l, k) => {\n    const r = round((l - lo) / dl);\n    if (r >= 0 && r \u003c H && abs(S.lam[r] - l) \u003c= dl / 2 + 1e-12) {\n      S.lam[r] = l;\n      S.pis[r] = k;\n    }\n  });\n}\n\n// Every stage of every row. The fine histogram (M bins over the row's\n// range, u = x (1 - lambda) in [-1, 1]) starts as a point at 0 and is\n// pushed through nu -> p S+ nu + (1 - p) S- nu, S+- u = lambda u +- (1 - lambda),\n// once per term. On a Pisot row the sums are also kept exactly, as sorted\n// points with their mass, and points closer than 1e-9 are one point.\nfunction build(S) {\n  rows(S);\n  const p = S.bias, q = 1 - p, { h, h2, I, G } = S, c0 = M / 2 - 0.5;\n  G.fill(0);\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], sh = (1 - lam) * (M / 2);\n    h.fill(0);\n    h[M / 2 - 1] = 0.5;\n    h[M / 2] = 0.5;\n    for (let n = 0; n \u003c= NHI; n++) {\n      const o = (n * H + r) * W;\n      for (let c = 0; c \u003c W; c++) {\n        let m = 0;\n        for (let i = c * F; i \u003c c * F + F; i++) m += h[i];\n        I[o + c] = m;\n      }\n      if (n === NHI) break;\n      h2.fill(0);\n      for (let i = 0; i \u003c M; i++) {\n        const v = h[i];\n        if (v === 0) continue;\n        const base = c0 + lam * (i - c0);\n        for (let sgn = 0; sgn \u003c 2; sgn++) {\n          const f = base + (sgn ? sh : -sh), w = v * (sgn ? p : q), j = floor(f), fr = f - j;\n          if (j >= 0 && j \u003c M) h2[j] += w * (1 - fr);\n          if (j + 1 >= 0 && j + 1 \u003c M) h2[j + 1] += w * fr;\n        }\n      }\n      for (let i = 0; i \u003c M; i++) h[i] = h2[i];\n    }\n    if (S.pis[r] >= 0) exact(S, r, p);\n  }\n  S.built = true;\n  S.bBias = S.bias;\n  S.bZoom = S.zoom;\n  S.since = 0;\n}\n\n// The exact sums on a Pisot row, term by term in the order they shrink:\n// each point x splits into x + lambda^n (mass p) and x - lambda^n (mass 1 - p).\n// m is a point's mass; w the sum of its sign choices' squared masses, so\n// m^2 / w is how many choices it holds, weighted, and 1 when it holds one.\nfunction exact(S, r, p) {\n  const lam = S.lam[r], q = 1 - p, G = S.G, k1 = 1 - lam;\n  let X = new Float64Array([0]), Mm = new Float64Array([1]), Q = new Float64Array([1]);\n  const sm2 = new Float64Array(W), sq = new Float64Array(W);\n  for (let n = 1; n \u003c= NHI; n++) {\n    const a = lam ** (n - 1), L = X.length;\n    const X2 = new Float64Array(2 * L), M2 = new Float64Array(2 * L), Q2 = new Float64Array(2 * L);\n    let i = 0, j = 0, k = -1;\n    while (i \u003c L || j \u003c L) {\n      // Merge the two shifted copies, both already sorted.\n      let x, m, w;\n      if (j >= L || (i \u003c L && X[i] - a \u003c= X[j] + a)) {\n        x = X[i] - a;\n        m = Mm[i] * q;\n        w = Q[i] * q * q;\n        i++;\n      } else {\n        x = X[j] + a;\n        m = Mm[j] * p;\n        w = Q[j] * p * p;\n        j++;\n      }\n      if (k >= 0 && x - X2[k] \u003c 1e-9) {\n        M2[k] += m;\n        Q2[k] += w;\n      } else {\n        k++;\n        X2[k] = x;\n        M2[k] = m;\n        Q2[k] = w;\n      }\n    }\n    X = X2.subarray(0, k + 1);\n    Mm = M2.subarray(0, k + 1);\n    Q = Q2.subarray(0, k + 1);\n    sm2.fill(0);\n    sq.fill(0);\n    for (let t = 0; t \u003c= k; t++) {\n      const c = cl(floor((X[t] * k1 + 1) * (W / 2)), 0, W - 1);\n      sm2[c] += Mm[t] * Mm[t];\n      sq[c] += Q[t];\n    }\n    const o = (n * H + r) * W;\n    for (let c = 0; c \u003c W; c++) G[o + c] = sq[c] > 0 ? log2(sm2[c] / sq[c]) : 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], 0.5, 0.95);\n  S.zoom = cl(k[3], 0, 1);\n  S.since += d;\n  // Rebuilding takes a few milliseconds: at most ten times a second while a knob turns.\n  if (!S.built || ((abs(S.bias - S.bBias) > 1e-4 || abs(S.zoom - S.bZoom) > 1e-4) && S.since > 0.1)) build(S);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lo = 0;\n    if (S.phase !== 1) {\n      S.phase = 1;\n      S.pt = (NHI - S.x) * TF;\n    }\n  }\n  // The term count x runs hold, fall, rest, climb.\n  if (S.open > 0) {\n    // The opening hold, in plain seconds; it ends straight into the fall.\n    S.open -= d;\n    if (S.open \u003c= 0) S.pt = HOLD;\n  } else S.pt += (d * S.speed) / 2;\n  const span = NHI - S.lo;\n  if (S.phase === 0 && S.pt >= HOLD) {\n    S.phase = 1;\n    S.pt -= HOLD;\n  }\n  if (S.phase === 1 && S.pt >= span * TF) {\n    S.phase = 2;\n    S.pt -= span * TF;\n  }\n  if (S.phase === 2 && S.pt >= REST) {\n    S.phase = 3;\n    S.pt -= REST;\n  }\n  if (S.phase === 3 && S.pt >= span * TC) {\n    S.phase = 0;\n    S.pt -= span * TC;\n    S.lo = NLO;\n  }\n  if (S.phase === 0) S.x = NHI;\n  else if (S.phase === 1) {\n    const u = S.pt / TF, j = floor(u);\n    S.x = NHI - j - sm(0, 1, u - j);\n  } else if (S.phase === 2) S.x = S.lo;\n  else {\n    const u = S.pt / TC, j = floor(u);\n    S.x = S.lo + j + sm(0, 0.65, u - j);\n  }\n  S.x = cl(S.x, 0, NHI);\n}\n\n// Density levels: violet where a row is thin, azure where it is thick. A\n// hue that comes round to orange or yellow is paled and lifted, so thin\n// parts read peach or butter and not brown or olive.\nfunction palette(S) {\n  const lut = S.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const L = i / 255, h = S.hue + H0 + 0.16 * (1 - L) - 0.06, hh = h - floor(h);\n    const warm = cl(1 - abs(hh - 0.13) / 0.13, 0, 1);\n    hsv(h, 0.9 - 0.45 * L - 0.3 * warm, min(1, 0.92 * L ** (0.7 - 0.2 * warm) * (1 + 0.35 * warm)), lut, i * 3);\n  }\n  // The seams: white-gold, nearly white where the rows themselves are warm.\n  const hh = S.hue + H0 - 0.06 - floor(S.hue + H0 - 0.06), warm = cl(1 - abs(hh - 0.13) / 0.2, 0, 1);\n  S.gold[0] = 1;\n  S.gold[1] = 0.86 + 0.12 * warm;\n  S.gold[2] = 0.56 + 0.36 * warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.built) return;\n  palette(S);\n  const { I, G, lut, row } = S, p = S.bias, q = 1 - p;\n  const n = min(NHI - 1, floor(S.x)), s = S.x - n;\n  // The new term splits every point by +- (1 - lambda) lambda^n of the range,\n  // and in the last third of the split the exact next stage takes over.\n  const wNext = sm(0.55, 1, s);\n  const gold = S.gold;\n  // The entropy bound p^p (1 - p)^(1 - p), as a row.\n  const lstar = p ** p * q ** q, rstar = round(((lstar - S.lo0) / (S.hi0 - S.lo0)) * (H - 1));\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], dsh = s * (1 - lam) * lam ** n * (W / 2);\n    const o0 = (n * H + r) * W, o1 = o0 + H * W;\n    for (let c = 0; c \u003c W; c++) {\n      // p of the row moved right by dsh, 1 - p moved left.\n      const a = c - dsh, b = c + dsh, ia = floor(a), ib = floor(b), fa = a - ia, fb = b - ib;\n      const va = (ia >= 0 && ia \u003c W ? I[o0 + ia] * (1 - fa) : 0) + (ia + 1 >= 0 && ia + 1 \u003c W ? I[o0 + ia + 1] * fa : 0);\n      const vb = (ib >= 0 && ib \u003c W ? I[o0 + ib] * (1 - fb) : 0) + (ib + 1 >= 0 && ib + 1 \u003c W ? I[o0 + ib + 1] * fb : 0);\n      row[c] = (p * va + q * vb) * (1 - wNext) + I[o1 + c] * wNext;\n    }\n    const seam = S.pis[r] >= 0;\n    for (let c = 0; c \u003c W; c++) {\n      // 64 times the mass is 1 where the row is flat; 1 - e^(-rho / 1.2)\n      // keeps thin rows readable and the dust and the bells from burning out.\n      const L = 1 - exp((-W * row[c]) / 1.2), li = round(L * 255) * 3;\n      let R = lut[li], Gc = lut[li + 1], B = lut[li + 2];\n      if (seam) {\n        const g = G[o0 + c] * (1 - s) + G[o1 + c] * s, k = sm(0.2, 5.5, g) * (0.35 + 0.65 * sm(0, 0.5, L));\n        R += (gold[0] - R) * k;\n        Gc += (gold[1] - Gc) * k;\n        B += (gold[2] - B) * k;\n      }\n      if (r === rstar && (c \u003c 2 || c > W - 3)) R = Gc = B = 0.85;\n      display.setPixel(c, r, round(255 * min(1, R)), round(255 * min(1, Gc)), round(255 * min(1, B)));\n    }\n  }\n}\n","layer":{"id":"layer-bernoulli-convolutions","type":"code","name":"bernoulli-convolutions","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bernoulli Convolutions\n// Family:  fractal\n// Idea:    Each of the 128 rows is the distribution of the random sum ±1 ±λ ±λ² ±… for its own λ, spread across the panel over the sum's whole range, from Cantor dust at λ = 0.32 at the top through a flat row near 1/2 to a smooth bell at 0.89 at the bottom; the sum is built up a term at a time, each term splitting every point of a row in two, and on the 14 rows where λ is the reciprocal of a Pisot number, the golden ratio's 0.618 among them, the splits keep landing on points already there, so those rows burn white-gold, brighter with every term, and brightest at the plastic number's 0.755 where each point holds 36 sign choices on average after 13 terms.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bernoulli convolutions (Børge Jessen and Aurel Wintner, 1935; Paul Erdős, 1939; Boris Solomyak, 1995), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1\n//\n// Knob 1: Hue. Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive.\n// Knob 2: Speed. At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed.\n// Knob 3: Bias. The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95.\n// Knob 4: Zoom. The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart.\n// Buttons: K1 tap takes the terms away down to none, one point in the middle of every row, and builds the sum up again from its first term.\n\nconst W = 64, H = 128, M = 512, F = M / W;\n// Terms: the cycle falls to NLO and climbs to NHI; stages 0..NHI are kept.\nconst NLO = 6, NHI = 13;\n// Seconds at Speed 2: hold at NHI, per term falling, rest at NLO, per term\n// climbing. The first hold, the picture the pattern opens on, lasts OPEN\n// seconds at any speed.\nconst HOLD = 2.5, TF = 0.33, REST = 0.6, TC = 1.0, OPEN = 1.2;\n// Opening hue: violet and azure, not red.\nconst H0 = 0.62;\n// Pisot numbers in (1, 2), each the largest root of its polynomial (highest\n// power first). Their reciprocals are the lambdas where Erdos (1939) showed\n// the measure singular: the sums land on each other again and again.\nconst PISOT = [\n  [1, 0, -1, -1], // 1.3247, the plastic number\n  [1, -1, 0, 0, -1], // 1.3803\n  [1, -1, -1, 1, 0, -1], // 1.4433\n  [1, -1, 0, -1], // 1.4656\n  [1, -1, -1, 0, 1, 0, -1], // 1.5016\n  [1, 0, -1, -1, -1, -1], // 1.5342\n  [1, -1, -1, 0, 0, 1, 0, -1], // 1.5452\n  [1, -1, 0, -1, 0, -1], // 1.5701\n  [1, -1, -1], // 1.6180, the golden ratio\n  [1, -1, -1, 0, 0, -1], // 1.7049\n  [1, -2, 1, -1], // 1.7549\n  [1, -1, -1, -1], // 1.8393, the tribonacci constant\n  [1, -2, 0, 1, -1], // 1.8668\n  [1, -1, -1, -1, -1], // 1.9276\n];\nconst { floor, min, abs, exp, log2, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = [v, q, p, p, t, v][i];\n  out[o + 1] = [t, v, v, q, p, p][i];\n  out[o + 2] = [p, p, t, v, v, q][i];\n}\n\n// Newton from 2 down to the largest real root.\nfunction rootOf(c) {\n  let x = 2;\n  for (let it = 0; it \u003c 60; it++) {\n    let f = 0, d = 0;\n    for (let k = 0; k \u003c c.length; k++) {\n      d = d * x + f;\n      f = f * x + c[k];\n    }\n    x -= f / d;\n  }\n  return x;\n}\nconst LAMP = PISOT.map((c) => 1 / rootOf(c));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0.5, zoom: 0.06, built: false, bBias: -1, bZoom: -1, since: 0,\n    lam: new Float64Array(H), pis: new Int8Array(H).fill(-1),\n    h: new Float64Array(M), h2: new Float64Array(M + 1),\n    // Per stage, row and column: the mass of the row in the column, and\n    // the log2 of how many sign choices share a point there on average.\n    I: new Float32Array((NHI + 1) * H * W), G: new Float32Array((NHI + 1) * H * W),\n    phase: 0, pt: 0, lo: NLO, x: NHI, open: OPEN,\n    lut: new Float32Array(256 * 3), row: new Float32Array(W), gold: [1, 0.86, 0.56],\n  };\n}\n\n// The lambdas of the rows, the nearest row to each Pisot reciprocal moved\n// onto it exactly. Every other row's lambda is a binary fraction, and for\n// those no two sign choices ever give the same sum: the highest power that\n// differs leaves an odd numerator no lower power can cancel.\nfunction rows(S) {\n  const lo = 0.3 + 0.26 * S.zoom, hi = 0.9 - 0.12 * S.zoom, dl = (hi - lo) / (H - 1);\n  S.lo0 = lo;\n  S.hi0 = hi;\n  S.pis.fill(-1);\n  for (let r = 0; r \u003c H; r++) S.lam[r] = lo + dl * r;\n  LAMP.forEach((l, k) => {\n    const r = round((l - lo) / dl);\n    if (r >= 0 && r \u003c H && abs(S.lam[r] - l) \u003c= dl / 2 + 1e-12) {\n      S.lam[r] = l;\n      S.pis[r] = k;\n    }\n  });\n}\n\n// Every stage of every row. The fine histogram (M bins over the row's\n// range, u = x (1 - lambda) in [-1, 1]) starts as a point at 0 and is\n// pushed through nu -> p S+ nu + (1 - p) S- nu, S+- u = lambda u +- (1 - lambda),\n// once per term. On a Pisot row the sums are also kept exactly, as sorted\n// points with their mass, and points closer than 1e-9 are one point.\nfunction build(S) {\n  rows(S);\n  const p = S.bias, q = 1 - p, { h, h2, I, G } = S, c0 = M / 2 - 0.5;\n  G.fill(0);\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], sh = (1 - lam) * (M / 2);\n    h.fill(0);\n    h[M / 2 - 1] = 0.5;\n    h[M / 2] = 0.5;\n    for (let n = 0; n \u003c= NHI; n++) {\n      const o = (n * H + r) * W;\n      for (let c = 0; c \u003c W; c++) {\n        let m = 0;\n        for (let i = c * F; i \u003c c * F + F; i++) m += h[i];\n        I[o + c] = m;\n      }\n      if (n === NHI) break;\n      h2.fill(0);\n      for (let i = 0; i \u003c M; i++) {\n        const v = h[i];\n        if (v === 0) continue;\n        const base = c0 + lam * (i - c0);\n        for (let sgn = 0; sgn \u003c 2; sgn++) {\n          const f = base + (sgn ? sh : -sh), w = v * (sgn ? p : q), j = floor(f), fr = f - j;\n          if (j >= 0 && j \u003c M) h2[j] += w * (1 - fr);\n          if (j + 1 >= 0 && j + 1 \u003c M) h2[j + 1] += w * fr;\n        }\n      }\n      for (let i = 0; i \u003c M; i++) h[i] = h2[i];\n    }\n    if (S.pis[r] >= 0) exact(S, r, p);\n  }\n  S.built = true;\n  S.bBias = S.bias;\n  S.bZoom = S.zoom;\n  S.since = 0;\n}\n\n// The exact sums on a Pisot row, term by term in the order they shrink:\n// each point x splits into x + lambda^n (mass p) and x - lambda^n (mass 1 - p).\n// m is a point's mass; w the sum of its sign choices' squared masses, so\n// m^2 / w is how many choices it holds, weighted, and 1 when it holds one.\nfunction exact(S, r, p) {\n  const lam = S.lam[r], q = 1 - p, G = S.G, k1 = 1 - lam;\n  let X = new Float64Array([0]), Mm = new Float64Array([1]), Q = new Float64Array([1]);\n  const sm2 = new Float64Array(W), sq = new Float64Array(W);\n  for (let n = 1; n \u003c= NHI; n++) {\n    const a = lam ** (n - 1), L = X.length;\n    const X2 = new Float64Array(2 * L), M2 = new Float64Array(2 * L), Q2 = new Float64Array(2 * L);\n    let i = 0, j = 0, k = -1;\n    while (i \u003c L || j \u003c L) {\n      // Merge the two shifted copies, both already sorted.\n      let x, m, w;\n      if (j >= L || (i \u003c L && X[i] - a \u003c= X[j] + a)) {\n        x = X[i] - a;\n        m = Mm[i] * q;\n        w = Q[i] * q * q;\n        i++;\n      } else {\n        x = X[j] + a;\n        m = Mm[j] * p;\n        w = Q[j] * p * p;\n        j++;\n      }\n      if (k >= 0 && x - X2[k] \u003c 1e-9) {\n        M2[k] += m;\n        Q2[k] += w;\n      } else {\n        k++;\n        X2[k] = x;\n        M2[k] = m;\n        Q2[k] = w;\n      }\n    }\n    X = X2.subarray(0, k + 1);\n    Mm = M2.subarray(0, k + 1);\n    Q = Q2.subarray(0, k + 1);\n    sm2.fill(0);\n    sq.fill(0);\n    for (let t = 0; t \u003c= k; t++) {\n      const c = cl(floor((X[t] * k1 + 1) * (W / 2)), 0, W - 1);\n      sm2[c] += Mm[t] * Mm[t];\n      sq[c] += Q[t];\n    }\n    const o = (n * H + r) * W;\n    for (let c = 0; c \u003c W; c++) G[o + c] = sq[c] > 0 ? log2(sm2[c] / sq[c]) : 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], 0.5, 0.95);\n  S.zoom = cl(k[3], 0, 1);\n  S.since += d;\n  // Rebuilding takes a few milliseconds: at most ten times a second while a knob turns.\n  if (!S.built || ((abs(S.bias - S.bBias) > 1e-4 || abs(S.zoom - S.bZoom) > 1e-4) && S.since > 0.1)) build(S);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lo = 0;\n    if (S.phase !== 1) {\n      S.phase = 1;\n      S.pt = (NHI - S.x) * TF;\n    }\n  }\n  // The term count x runs hold, fall, rest, climb.\n  if (S.open > 0) {\n    // The opening hold, in plain seconds; it ends straight into the fall.\n    S.open -= d;\n    if (S.open \u003c= 0) S.pt = HOLD;\n  } else S.pt += (d * S.speed) / 2;\n  const span = NHI - S.lo;\n  if (S.phase === 0 && S.pt >= HOLD) {\n    S.phase = 1;\n    S.pt -= HOLD;\n  }\n  if (S.phase === 1 && S.pt >= span * TF) {\n    S.phase = 2;\n    S.pt -= span * TF;\n  }\n  if (S.phase === 2 && S.pt >= REST) {\n    S.phase = 3;\n    S.pt -= REST;\n  }\n  if (S.phase === 3 && S.pt >= span * TC) {\n    S.phase = 0;\n    S.pt -= span * TC;\n    S.lo = NLO;\n  }\n  if (S.phase === 0) S.x = NHI;\n  else if (S.phase === 1) {\n    const u = S.pt / TF, j = floor(u);\n    S.x = NHI - j - sm(0, 1, u - j);\n  } else if (S.phase === 2) S.x = S.lo;\n  else {\n    const u = S.pt / TC, j = floor(u);\n    S.x = S.lo + j + sm(0, 0.65, u - j);\n  }\n  S.x = cl(S.x, 0, NHI);\n}\n\n// Density levels: violet where a row is thin, azure where it is thick. A\n// hue that comes round to orange or yellow is paled and lifted, so thin\n// parts read peach or butter and not brown or olive.\nfunction palette(S) {\n  const lut = S.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const L = i / 255, h = S.hue + H0 + 0.16 * (1 - L) - 0.06, hh = h - floor(h);\n    const warm = cl(1 - abs(hh - 0.13) / 0.13, 0, 1);\n    hsv(h, 0.9 - 0.45 * L - 0.3 * warm, min(1, 0.92 * L ** (0.7 - 0.2 * warm) * (1 + 0.35 * warm)), lut, i * 3);\n  }\n  // The seams: white-gold, nearly white where the rows themselves are warm.\n  const hh = S.hue + H0 - 0.06 - floor(S.hue + H0 - 0.06), warm = cl(1 - abs(hh - 0.13) / 0.2, 0, 1);\n  S.gold[0] = 1;\n  S.gold[1] = 0.86 + 0.12 * warm;\n  S.gold[2] = 0.56 + 0.36 * warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.built) return;\n  palette(S);\n  const { I, G, lut, row } = S, p = S.bias, q = 1 - p;\n  const n = min(NHI - 1, floor(S.x)), s = S.x - n;\n  // The new term splits every point by +- (1 - lambda) lambda^n of the range,\n  // and in the last third of the split the exact next stage takes over.\n  const wNext = sm(0.55, 1, s);\n  const gold = S.gold;\n  // The entropy bound p^p (1 - p)^(1 - p), as a row.\n  const lstar = p ** p * q ** q, rstar = round(((lstar - S.lo0) / (S.hi0 - S.lo0)) * (H - 1));\n  for (let r = 0; r \u003c H; r++) {\n    const lam = S.lam[r], dsh = s * (1 - lam) * lam ** n * (W / 2);\n    const o0 = (n * H + r) * W, o1 = o0 + H * W;\n    for (let c = 0; c \u003c W; c++) {\n      // p of the row moved right by dsh, 1 - p moved left.\n      const a = c - dsh, b = c + dsh, ia = floor(a), ib = floor(b), fa = a - ia, fb = b - ib;\n      const va = (ia >= 0 && ia \u003c W ? I[o0 + ia] * (1 - fa) : 0) + (ia + 1 >= 0 && ia + 1 \u003c W ? I[o0 + ia + 1] * fa : 0);\n      const vb = (ib >= 0 && ib \u003c W ? I[o0 + ib] * (1 - fb) : 0) + (ib + 1 >= 0 && ib + 1 \u003c W ? I[o0 + ib + 1] * fb : 0);\n      row[c] = (p * va + q * vb) * (1 - wNext) + I[o1 + c] * wNext;\n    }\n    const seam = S.pis[r] >= 0;\n    for (let c = 0; c \u003c W; c++) {\n      // 64 times the mass is 1 where the row is flat; 1 - e^(-rho / 1.2)\n      // keeps thin rows readable and the dust and the bells from burning out.\n      const L = 1 - exp((-W * row[c]) / 1.2), li = round(L * 255) * 3;\n      let R = lut[li], Gc = lut[li + 1], B = lut[li + 2];\n      if (seam) {\n        const g = G[o0 + c] * (1 - s) + G[o1 + c] * s, k = sm(0.2, 5.5, g) * (0.35 + 0.65 * sm(0, 0.5, L));\n        R += (gold[0] - R) * k;\n        Gc += (gold[1] - Gc) * k;\n        B += (gold[2] - B) * k;\n      }\n      if (r === rstar && (c \u003c 2 || c > W - 3)) R = Gc = B = 0.85;\n      display.setPixel(c, r, round(255 * min(1, R)), round(255 * min(1, Gc)), round(255 * min(1, B)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=0.5..0.95, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rows round the wheel; the Pisot seams stay white-gold, and go nearly white when the rows are warm. At 0 thin parts of a row are violet and thick parts azure; at 0.25 rose and orchid, at 0.5 butter and peach, at 0.75 teal and green. Orange and yellow are lifted and paled so they do not go brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new term comes in every second, each split taking the first two thirds of it: the climb from 6 terms to 13 takes 7 seconds, the 13-term picture holds 2.5, and the terms are taken away again three a second. At 0.2 all of it ten times slower, at 3 one and a half times faster. The pattern opens on the 13-term picture held for 1.2 seconds at any speed."},{"name":"Bias","min":0.5,"max":0.95,"about":"The chance that a sign is plus. At 0.5 a fair coin and every row symmetric; at 0.7 the mass leans right and the bells slide toward the right edge; at 0.95 the bottom bells are narrow bright lumps against the right edge and the dust at the top is a few hot points. The short white ticks at both edges mark λ = p^p (1-p)^(1-p): every row above them is singular, because the signs carry too little entropy to fill the interval. They sit at λ = 0.5 for a fair coin and move down to 0.82 at 0.95."},{"name":"Zoom","min":0,"max":1,"about":"The range of λ down the rows. At 0 from 0.30 to 0.90, with 14 Pisot seams between rows 46 and 96; at 1 from 0.56 to 0.78, where 11 of them spread over the whole panel and the rows between are 0.0017 apart."}],"start":[0,2,0.5,0.06],"measures":{"motion":0.1052,"detail":0.0778,"edges":0.2761,"complexity":1.7226,"coverage":0.81,"colour":0.2382,"drift":0.0505},"knobResponse":[0.3122,0.0507,0.314,0.1288]},{"slug":"bertrand-paradox","title":"Bertrand Paradox","family":"data","round":33,"note":"지름 40 LED 의 원 셋이 세 칸에 하나씩 서서, 원마다 다른 뜻의 무작위로 현을 1초에 24개씩 긋고 현은 LED 하나씩 부서져 사라져요. 삼각형 변보다 긴 현은 자홍, 짧은 현은 초록이고, 옆 막대와 숫자가 긴 현의 몫을 세어 위 원은 1/3 로, 가운데는 1/2 로, 아래는 1/4 로 모여요. K3 을 올리면 선이 원마다 다른 밀도의 점묘가 되고, K1 을 누르면 원과 셈을 비우고 처음부터 다시 그어요.","idea":"Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.","buttons":"K1 tap clears the three discs and their counts, and the gauges start again from nothing.","code":"// ===== Patternflow pattern =====\n// Title:   Bertrand Paradox\n// Family:  data\n// Idea:    Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bertrand paradox (Joseph Bertrand, 1889), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1\n//\n// Knob 1: Hue. Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap.\n// Knob 2: Speed. The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep.\n// Knob 3: Chords. How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross.\n// Knob 4: Persist. How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple.\n// Buttons: K1 tap clears the three discs and their counts, and the gauges start again from nothing.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, round, sqrt, sin, cos, abs, exp, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// One disc in each third of the 128 rows, 40 LEDs across, set left, right,\n// left so each has 22 columns beside it for its gauge.\nconst R = 19.5;\nconst DISCS = [\n  { cx: 20.5, cy: 21.5, side: 1, num: 1, den: 3 },\n  { cx: 43.5, cy: 64, side: -1, num: 1, den: 2 },\n  { cx: 20.5, cy: 106.5, side: 1, num: 1, den: 4 },\n];\nconst BAR = 40;\n// The points each method picked for its newest chords, shown white for a\n// quarter of a second: the rim pair, the point on the radius, the midpoint.\nconst SEEDS = 16, SEED_LIFE = 0.25;\n// Chords a second times the fade time at the opening knobs.\nconst OPEN = 24 * 1.1 * 7 ** 0.06;\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = {\n  0: 0b111101101101111, 1: 0b010110010010111, 2: 0b111001111100111, 3: 0b111001111001111,\n  4: 0b101101111001001, 5: 0b111100111001111, 6: 0b111100111101111, 7: 0b111001001001001,\n  8: 0b111101111101111, 9: 0b111101111001111, \"/\": 0b001001010100100, \"-\": 0b000000111000000,\n};\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i].map((c) => c * 255);\n}\n\n// The faint frame: each disc's rim and its inscribed triangle, point up.\n// They sit at 24 of 255, just visible on the panel and still dark to the\n// study's count of lit LEDs, which starts above 24.\nfunction buildFrame() {\n  const f = new Uint8Array(N);\n  for (const d of DISCS) {\n    for (let a = 0; a \u003c 720; a++) {\n      const t = (a / 720) * 2 * PI, x = floor(d.cx + R * cos(t)), y = floor(d.cy + R * sin(t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) f[y * W + x] = 1;\n    }\n    for (let k = 0; k \u003c 3; k++) {\n      const a0 = -PI / 2 + (k * 2 * PI) / 3, a1 = a0 + (2 * PI) / 3;\n      const x0 = d.cx + R * cos(a0), y0 = d.cy + R * sin(a0), x1 = d.cx + R * cos(a1), y1 = d.cy + R * sin(a1);\n      const n = 80;\n      for (let j = 0; j \u003c= n; j++) f[floor(y0 + ((y1 - y0) * j) / n) * W + floor(x0 + ((x1 - x0) * j) / n)] = 2;\n    }\n  }\n  return f;\n}\n\nexport function setup(params) {\n  const thr = new Float32Array(N);\n  // Each LED lets go of a fading chord at its own level, so a chord crumbles\n  // LED by LED instead of dimming, and every lit LED is at full brightness.\n  // Half-lit lines would turn the saturated pair towards grey.\n  for (let i = 0; i \u003c N; i++) thr[i] = 0.1 + 0.9 * Math.random();\n  params.s = {\n    accL: new Float32Array(N), accS: new Float32Array(N), thr, frame: buildFrame(),\n    long: [0, 0, 0], total: [0, 0, 0], carry: 0, hue: 0, clock: 0, scale: 1, cap: 2.5,\n    seeds: new Int32Array(3 * SEEDS).fill(-1), born: new Float32Array(3 * SEEDS), next: [0, 0, 0],\n  };\n}\n\n// A chord of the unit circle by method m, as its two ends and its distance\n// p from the centre. It is longer than the triangle's side, sqrt 3, exactly\n// when p \u003c 1/2, when it cuts the triangle's incircle.\nfunction chord(m) {\n  const rnd = Math.random;\n  if (m === 0) {\n    // Two uniform points on the rim: long with probability 1/3.\n    const a = 2 * PI * rnd(), b = 2 * PI * rnd();\n    return [cos(a), sin(a), cos(b), sin(b), abs(cos((a - b) / 2))];\n  }\n  // A uniform point on a random radius (m = 1, long with probability 1/2)\n  // or a uniform point in the disc (m = 2, 1/4) as the chord's midpoint.\n  const f = 2 * PI * rnd(), p = m === 1 ? rnd() : sqrt(rnd()), h = sqrt(1 - p * p), c = cos(f), s = sin(f);\n  return [p * c - h * s, p * s + h * c, p * c + h * s, p * s - h * c, p];\n}\n\nfunction seed(P, d, x, y) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const j = d * SEEDS + P.next[d];\n  P.next[d] = (P.next[d] + 1) % SEEDS;\n  P.seeds[j] = y * W + x;\n  P.born[j] = P.clock;\n}\n\n// Disc d draws its chords by method d.\nfunction lay(P, d) {\n  const D = DISCS[d], [ax, ay, bx, by, p] = chord(d), isLong = p \u003c 0.5;\n  if (d === 0) {\n    seed(P, d, D.cx + R * ax, D.cy + R * ay);\n    seed(P, d, D.cx + R * bx, D.cy + R * by);\n  } else seed(P, d, D.cx + (R * (ax + bx)) / 2, D.cy + (R * (ay + by)) / 2);\n  const acc = isLong ? P.accL : P.accS;\n  const x0 = D.cx + R * ax, y0 = D.cy + R * ay, dx = R * (bx - ax), dy = R * (by - ay);\n  const n = Math.ceil(max(abs(dx), abs(dy)));\n  let last = -1;\n  for (let j = 0; j \u003c= n; j++) {\n    const x = floor(x0 + (dx * j) / max(1, n)), y = floor(y0 + (dy * j) / max(1, n));\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const i = y * W + x;\n    if (i === last) continue;\n    last = i;\n    acc[i] = min(acc[i] + 1, P.cap);\n  }\n  P.total[d]++;\n  if (isLong) P.long[d]++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const clock = d * (cl(k[1], 0.2, 3) / 2);\n  const rate = 24 * 10 ** cl(k[2], 0, 1), tau = 1.1 * 7 ** cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.accL.fill(0);\n    P.accS.fill(0);\n    P.long = [0, 0, 0];\n    P.total = [0, 0, 0];\n    P.seeds.fill(-1);\n  }\n  P.clock += clock;\n  // With more chords alive than at the opening, the level an LED needs to\n  // light rises with them (to the 0.85th power), so the discs turn from a\n  // few lines into a stipple of each method's own density instead of\n  // filling solid: even in the middle disc, heavy at the rim in the top one,\n  // hollow in the bottom one.\n  P.scale = max(1, (rate * tau) / OPEN) ** 0.85;\n  P.cap = 2.5 * P.scale;\n  const fade = exp(-clock / tau), aL = P.accL, aS = P.accS;\n  for (let i = 0; i \u003c N; i++) {\n    aL[i] *= fade;\n    aS[i] *= fade;\n  }\n  P.carry += rate * clock;\n  const n = floor(P.carry);\n  P.carry -= n;\n  for (let j = 0; j \u003c n; j++) for (let m = 0; m \u003c 3; m++) lay(P, m);\n}\n\nfunction glyph(display, ch, x0, y0, sc, c) {\n  const bits = FONT[ch];\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((bits >> (14 - r * 3 - q)) & 1)\n        for (let u = 0; u \u003c sc; u++) for (let v = 0; v \u003c sc; v++) display.setPixel(x0 + q * sc + u, y0 + r * sc + v, c[0], c[1], c[2]);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  // Magenta for the long chords, green for the short: at full saturation\n  // the pair sits as far apart as two colours can on the panel's red-green\n  // and yellow-blue axes, and neither opens on red.\n  const cL = hsv(P.hue + 5 / 6, 1, 1), cS = hsv(P.hue + 1 / 3, 1, 1);\n  const { accL, accS, thr, frame } = P, sc = P.scale;\n  for (let i = 0; i \u003c N; i++) {\n    const a = accL[i], b = accS[i], t = a + b, x = i % W, y = (i / W) | 0;\n    if (t > thr[i] * sc) {\n      // A lit LED is at full brightness: the fade shows as crumbling.\n      const c = a >= b ? cL : cS;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    } else if (frame[i]) display.setPixel(x, y, 24, 24, 24);\n    else display.setPixel(x, y, 0, 0, 0);\n  }\n  for (let j = 0; j \u003c P.seeds.length; j++) {\n    const i = P.seeds[j];\n    if (i >= 0 && P.clock - P.born[j] \u003c SEED_LIFE) display.setPixel(i % W, (i / W) | 0, 255, 255, 255);\n  }\n  for (let d = 0; d \u003c 3; d++) {\n    const D = DISCS[d], yb = round(D.cy + R) - 1, top = yb - BAR + 1;\n    const bx = D.side > 0 ? 43 : 18, tx = D.side > 0 ? 49 : 1;\n    const tot = P.total[d], f = tot ? P.long[d] / tot : 0, hgt = round(f * BAR);\n    // The bar: the share of long chords so far, out of 40 rows.\n    for (let j = 0; j \u003c hgt; j++) for (let q = 0; q \u003c 3; q++) display.setPixel(bx + q, yb - j, cL[0], cL[1], cL[2]);\n    // The answer this method gives, as a white tick and its fraction.\n    const ty = yb - round((D.num / D.den) * BAR);\n    for (let q = -1; q \u003c= 3; q++) display.setPixel(bx + q, ty, 255, 255, 255);\n    const lx = D.side > 0 ? tx : tx + 3;\n    glyph(display, D.num, lx, ty - 2, 1, cS);\n    glyph(display, \"/\", lx + 4, ty - 2, 1, cS);\n    glyph(display, D.den, lx + 8, ty - 2, 1, cS);\n    // The running share in percent, two digits, in the long colour.\n    const pct = min(99, round(f * 100));\n    const s = tot ? [floor(pct / 10), pct % 10] : [\"-\", \"-\"];\n    glyph(display, s[0], tx, top + 1, 2, cL);\n    glyph(display, s[1], tx + 8, top + 1, 2, cL);\n  }\n}\n","layer":{"id":"layer-bertrand-paradox","type":"code","name":"bertrand-paradox","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bertrand Paradox\n// Family:  data\n// Idea:    Three discs stacked down the panel are filled with random chords chosen three different ways, two random points on the rim, a random point on a random radius and a random midpoint, chords longer than the side of the inscribed triangle in one colour and shorter ones in the opposite, while a gauge beside each disc counts the long ones and settles on its own answer, 1/3, 1/2 and 1/4.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bertrand paradox (Joseph Bertrand, 1889), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1\n//\n// Knob 1: Hue. Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap.\n// Knob 2: Speed. The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep.\n// Knob 3: Chords. How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross.\n// Knob 4: Persist. How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple.\n// Buttons: K1 tap clears the three discs and their counts, and the gauges start again from nothing.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, round, sqrt, sin, cos, abs, exp, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// One disc in each third of the 128 rows, 40 LEDs across, set left, right,\n// left so each has 22 columns beside it for its gauge.\nconst R = 19.5;\nconst DISCS = [\n  { cx: 20.5, cy: 21.5, side: 1, num: 1, den: 3 },\n  { cx: 43.5, cy: 64, side: -1, num: 1, den: 2 },\n  { cx: 20.5, cy: 106.5, side: 1, num: 1, den: 4 },\n];\nconst BAR = 40;\n// The points each method picked for its newest chords, shown white for a\n// quarter of a second: the rim pair, the point on the radius, the midpoint.\nconst SEEDS = 16, SEED_LIFE = 0.25;\n// Chords a second times the fade time at the opening knobs.\nconst OPEN = 24 * 1.1 * 7 ** 0.06;\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = {\n  0: 0b111101101101111, 1: 0b010110010010111, 2: 0b111001111100111, 3: 0b111001111001111,\n  4: 0b101101111001001, 5: 0b111100111001111, 6: 0b111100111101111, 7: 0b111001001001001,\n  8: 0b111101111101111, 9: 0b111101111001111, \"/\": 0b001001010100100, \"-\": 0b000000111000000,\n};\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i].map((c) => c * 255);\n}\n\n// The faint frame: each disc's rim and its inscribed triangle, point up.\n// They sit at 24 of 255, just visible on the panel and still dark to the\n// study's count of lit LEDs, which starts above 24.\nfunction buildFrame() {\n  const f = new Uint8Array(N);\n  for (const d of DISCS) {\n    for (let a = 0; a \u003c 720; a++) {\n      const t = (a / 720) * 2 * PI, x = floor(d.cx + R * cos(t)), y = floor(d.cy + R * sin(t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) f[y * W + x] = 1;\n    }\n    for (let k = 0; k \u003c 3; k++) {\n      const a0 = -PI / 2 + (k * 2 * PI) / 3, a1 = a0 + (2 * PI) / 3;\n      const x0 = d.cx + R * cos(a0), y0 = d.cy + R * sin(a0), x1 = d.cx + R * cos(a1), y1 = d.cy + R * sin(a1);\n      const n = 80;\n      for (let j = 0; j \u003c= n; j++) f[floor(y0 + ((y1 - y0) * j) / n) * W + floor(x0 + ((x1 - x0) * j) / n)] = 2;\n    }\n  }\n  return f;\n}\n\nexport function setup(params) {\n  const thr = new Float32Array(N);\n  // Each LED lets go of a fading chord at its own level, so a chord crumbles\n  // LED by LED instead of dimming, and every lit LED is at full brightness.\n  // Half-lit lines would turn the saturated pair towards grey.\n  for (let i = 0; i \u003c N; i++) thr[i] = 0.1 + 0.9 * Math.random();\n  params.s = {\n    accL: new Float32Array(N), accS: new Float32Array(N), thr, frame: buildFrame(),\n    long: [0, 0, 0], total: [0, 0, 0], carry: 0, hue: 0, clock: 0, scale: 1, cap: 2.5,\n    seeds: new Int32Array(3 * SEEDS).fill(-1), born: new Float32Array(3 * SEEDS), next: [0, 0, 0],\n  };\n}\n\n// A chord of the unit circle by method m, as its two ends and its distance\n// p from the centre. It is longer than the triangle's side, sqrt 3, exactly\n// when p \u003c 1/2, when it cuts the triangle's incircle.\nfunction chord(m) {\n  const rnd = Math.random;\n  if (m === 0) {\n    // Two uniform points on the rim: long with probability 1/3.\n    const a = 2 * PI * rnd(), b = 2 * PI * rnd();\n    return [cos(a), sin(a), cos(b), sin(b), abs(cos((a - b) / 2))];\n  }\n  // A uniform point on a random radius (m = 1, long with probability 1/2)\n  // or a uniform point in the disc (m = 2, 1/4) as the chord's midpoint.\n  const f = 2 * PI * rnd(), p = m === 1 ? rnd() : sqrt(rnd()), h = sqrt(1 - p * p), c = cos(f), s = sin(f);\n  return [p * c - h * s, p * s + h * c, p * c + h * s, p * s - h * c, p];\n}\n\nfunction seed(P, d, x, y) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const j = d * SEEDS + P.next[d];\n  P.next[d] = (P.next[d] + 1) % SEEDS;\n  P.seeds[j] = y * W + x;\n  P.born[j] = P.clock;\n}\n\n// Disc d draws its chords by method d.\nfunction lay(P, d) {\n  const D = DISCS[d], [ax, ay, bx, by, p] = chord(d), isLong = p \u003c 0.5;\n  if (d === 0) {\n    seed(P, d, D.cx + R * ax, D.cy + R * ay);\n    seed(P, d, D.cx + R * bx, D.cy + R * by);\n  } else seed(P, d, D.cx + (R * (ax + bx)) / 2, D.cy + (R * (ay + by)) / 2);\n  const acc = isLong ? P.accL : P.accS;\n  const x0 = D.cx + R * ax, y0 = D.cy + R * ay, dx = R * (bx - ax), dy = R * (by - ay);\n  const n = Math.ceil(max(abs(dx), abs(dy)));\n  let last = -1;\n  for (let j = 0; j \u003c= n; j++) {\n    const x = floor(x0 + (dx * j) / max(1, n)), y = floor(y0 + (dy * j) / max(1, n));\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const i = y * W + x;\n    if (i === last) continue;\n    last = i;\n    acc[i] = min(acc[i] + 1, P.cap);\n  }\n  P.total[d]++;\n  if (isLong) P.long[d]++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const clock = d * (cl(k[1], 0.2, 3) / 2);\n  const rate = 24 * 10 ** cl(k[2], 0, 1), tau = 1.1 * 7 ** cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.accL.fill(0);\n    P.accS.fill(0);\n    P.long = [0, 0, 0];\n    P.total = [0, 0, 0];\n    P.seeds.fill(-1);\n  }\n  P.clock += clock;\n  // With more chords alive than at the opening, the level an LED needs to\n  // light rises with them (to the 0.85th power), so the discs turn from a\n  // few lines into a stipple of each method's own density instead of\n  // filling solid: even in the middle disc, heavy at the rim in the top one,\n  // hollow in the bottom one.\n  P.scale = max(1, (rate * tau) / OPEN) ** 0.85;\n  P.cap = 2.5 * P.scale;\n  const fade = exp(-clock / tau), aL = P.accL, aS = P.accS;\n  for (let i = 0; i \u003c N; i++) {\n    aL[i] *= fade;\n    aS[i] *= fade;\n  }\n  P.carry += rate * clock;\n  const n = floor(P.carry);\n  P.carry -= n;\n  for (let j = 0; j \u003c n; j++) for (let m = 0; m \u003c 3; m++) lay(P, m);\n}\n\nfunction glyph(display, ch, x0, y0, sc, c) {\n  const bits = FONT[ch];\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((bits >> (14 - r * 3 - q)) & 1)\n        for (let u = 0; u \u003c sc; u++) for (let v = 0; v \u003c sc; v++) display.setPixel(x0 + q * sc + u, y0 + r * sc + v, c[0], c[1], c[2]);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  // Magenta for the long chords, green for the short: at full saturation\n  // the pair sits as far apart as two colours can on the panel's red-green\n  // and yellow-blue axes, and neither opens on red.\n  const cL = hsv(P.hue + 5 / 6, 1, 1), cS = hsv(P.hue + 1 / 3, 1, 1);\n  const { accL, accS, thr, frame } = P, sc = P.scale;\n  for (let i = 0; i \u003c N; i++) {\n    const a = accL[i], b = accS[i], t = a + b, x = i % W, y = (i / W) | 0;\n    if (t > thr[i] * sc) {\n      // A lit LED is at full brightness: the fade shows as crumbling.\n      const c = a >= b ? cL : cS;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    } else if (frame[i]) display.setPixel(x, y, 24, 24, 24);\n    else display.setPixel(x, y, 0, 0, 0);\n  }\n  for (let j = 0; j \u003c P.seeds.length; j++) {\n    const i = P.seeds[j];\n    if (i >= 0 && P.clock - P.born[j] \u003c SEED_LIFE) display.setPixel(i % W, (i / W) | 0, 255, 255, 255);\n  }\n  for (let d = 0; d \u003c 3; d++) {\n    const D = DISCS[d], yb = round(D.cy + R) - 1, top = yb - BAR + 1;\n    const bx = D.side > 0 ? 43 : 18, tx = D.side > 0 ? 49 : 1;\n    const tot = P.total[d], f = tot ? P.long[d] / tot : 0, hgt = round(f * BAR);\n    // The bar: the share of long chords so far, out of 40 rows.\n    for (let j = 0; j \u003c hgt; j++) for (let q = 0; q \u003c 3; q++) display.setPixel(bx + q, yb - j, cL[0], cL[1], cL[2]);\n    // The answer this method gives, as a white tick and its fraction.\n    const ty = yb - round((D.num / D.den) * BAR);\n    for (let q = -1; q \u003c= 3; q++) display.setPixel(bx + q, ty, 255, 255, 255);\n    const lx = D.side > 0 ? tx : tx + 3;\n    glyph(display, D.num, lx, ty - 2, 1, cS);\n    glyph(display, \"/\", lx + 4, ty - 2, 1, cS);\n    glyph(display, D.den, lx + 8, ty - 2, 1, cS);\n    // The running share in percent, two digits, in the long colour.\n    const pct = min(99, round(f * 100));\n    const s = tot ? [floor(pct / 10), pct % 10] : [\"-\", \"-\"];\n    glyph(display, s[0], tx, top + 1, 2, cL);\n    glyph(display, s[1], tx + 8, top + 1, 2, cL);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Chords=0..1, Persist=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the pair of colours round the wheel together. At 0 the long chords are magenta and the short ones green; at 0.25 orange and azure; at 0.5 the two swap."},{"name":"Speed","min":0.2,"max":3,"about":"The clock of the whole picture. At 2 each disc takes 24 chords a second and a chord crumbles away over about a second; at 0.2 both run ten times slower, so each disc holds the same few chords, they change slowly and the counts creep."},{"name":"Chords","min":0,"max":1,"about":"How many chords each disc takes a second: 24 at 0, 76 at 0.5, 240 at 1. Turned up, the lines give way to a stipple of each method's own density: heavy at the rim in the top disc, even in the middle one, hollow in the bottom one, with the long colour filling the circle of half the radius that only long chords cross."},{"name":"Persist","min":0,"max":1,"about":"How long a chord takes to crumble: about a second at the opening, about six at 1, where the old chords pile up under the new ones into the same density stipple."}],"start":[0,2,0,0.06],"measures":{"motion":0.3006,"detail":0.2269,"edges":0.8503,"complexity":0.2324,"coverage":0.2638,"colour":0.5757,"drift":0.0802},"knobResponse":[0.24,0.1255,0.1353,0.0538]},{"slug":"bi-phase","title":"Bi-Phase","family":"cosmetic","round":30,"note":"흔들어 섞은 이중층 클렌저가 패널 가득 기름 방울로 흩어졌다가, 방울끼리 합쳐 떠올라 위에 한 층으로 모이고 경계선이 맑게 서요. 그러고 나면 다시 흔들려요.","idea":"The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.","buttons":"K1 tap shakes the bottle now.","code":"// ===== Patternflow pattern =====\n// Title:   Bi-Phase\n// Family:  cosmetic\n// Idea:    The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after two-phase cleansers and phase-field separation of two liquids (Cahn-Hilliard, John W. Cahn and John E. Hilliard, 1958; Allen-Cahn, Samuel M. Allen and John W. Cahn, 1979)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1\n//\n// Knob 1: Hue. Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose.\n// Knob 2: Speed. How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long.\n// Knob 3: Oil. The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down.\n// Knob 4: Shake. How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles.\n// Buttons: K1 tap shakes the bottle now.\n\nconst W = 64, H = 128, N = W * H;\n// The flow is solved on a coarse grid of 4x4 LED cells.\nconst CW = 16, CH = 32, CN = CW * CH;\nconst { min, max, floor, sqrt, sin, cos, exp, log, tanh, abs, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// Allen-Cahn: phi_t = M (K lap phi + phi - phi^3) + lambda, phi = +1 oil and\n// -1 water, lambda the multiplier that holds the amount of oil to K3. The\n// interface is tanh(d / sqrt(2K)) across, about 2 LEDs, and moves at M K\n// times its curvature. h M (8K + 2) \u003c 2 keeps the step stable: 4 a frame at\n// Speed 2.\nconst KAP = 0.5, MOB = 1.5, HMAX = 0.21;\n// Gravity in the free energy, on the interfaces only: a rim higher up gains\n// oil from one lower down in the same patch.\nconst GRAV = 2.5;\n// Time units a second at Speed 1; a shake lasts TS of them, 1.1 s at Speed 2.\nconst RATE = 12, TS = 26;\n// The push of the oil, and the screening of the flat bottle's walls.\nconst BUOY = 0.5, AL2 = 0.16;\n// Drops under AMAX LEDs move as one piece; ROUND and DRIFT below.\nconst AMAX = 700, ROUND = 0.06, DRIFT = 0.08;\n\n// Sine transforms of the coarse grid (DST-II forward, DST-III back), and the\n// screened Stokes operator (lap - a^2)^2 psi = d(f_y)/dx of a flat cell,\n// diagonal in that basis, with free-slip walls.\nconst SX = new Float32Array(CW * CW), SY = new Float32Array(CH * CH), KI = new Float32Array(CN);\nfor (let m = 0; m \u003c CW; m++) for (let i = 0; i \u003c CW; i++) SX[m * CW + i] = sin((PI * (m + 1) * (i + 0.5)) / CW);\nfor (let n = 0; n \u003c CH; n++) for (let j = 0; j \u003c CH; j++) SY[n * CH + j] = sin((PI * (n + 1) * (j + 0.5)) / CH);\nfor (let n = 0; n \u003c CH; n++)\n  for (let m = 0; m \u003c CW; m++) {\n    const kx = 4 * sin((PI * (m + 1)) / (2 * CW)) ** 2, ky = 4 * sin((PI * (n + 1)) / (2 * CH)) ** 2;\n    KI[n * CW + m] = ((m === CW - 1 ? 1 : 2) * (n === CH - 1 ? 1 : 2)) / (CN * (kx + ky + AL2) ** 2);\n  }\n\nfunction hsv(h, s, v, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  (o[0] = c[0]), (o[1] = c[1]), (o[2] = c[2]);\n}\n\nexport function setup(params) {\n  params.s = null;\n}\n\nfunction init(k) {\n  const f = () => new Float32Array(N), g = () => new Float32Array(CN);\n  const P = {\n    phi: f(), nxt: f(), S: f(), tmp: f(), blur: f(), u: f(), v: f(), b1: f(), b2: f(),\n    lab: new Int32Array(N), stk: new Int32Array(N), cu: f(), cv: f(), ca: f(), px: f(), py: f(), rad: f(),\n    F: g(), A: g(), G: g(), psi: g(), U: g(), V: g(),\n    hue: k[0], speed: 2, oil: cl(k[2], 0.3, 0.6), shake: cl(k[3], 0, 1),\n    mT: 0, c: 0.85 * TS, time: 0, rt: 0, deep: [0, 0, 0], pale: [0, 0, 0],\n  };\n  // Open at the end of a shake, the new drops just formed.\n  P.mT = 2 * P.oil - 1;\n  shake(P);\n  P.phi.set(P.S);\n  for (let s = 0; s \u003c 8; s++) relax(P, HMAX);\n  return P;\n}\n\n// A shake's emulsion: round drops of the lesser liquid dropped at random until\n// they make up its share, radius 2.2 to 5 LEDs after a gentle shake and 1.5\n// to 2.4 after a hard one, small ones the most common. Most land a LED clear\n// of the others; one in twenty may touch.\nfunction shake(P) {\n  const S = P.S, inv = P.mT > 0, f = inv ? (1 - P.mT) / 2 : (1 + P.mT) / 2;\n  const r0 = 2.2 - 0.7 * P.shake, r1 = 5 - 2.6 * P.shake;\n  S.fill(-1);\n  let area = 0;\n  for (let k = 0; k \u003c 5000 && area \u003c f * N; k++) {\n    const r = r0 * (r1 / r0) ** (random() ** 1.6), cx = random() * W, cy = random() * H;\n    const xa = max(0, floor(cx - r - 2)), xb = min(W - 1, floor(cx + r + 2)), ya = max(0, floor(cy - r - 2)), yb = min(H - 1, floor(cy + r + 2));\n    if (k \u003c 4500 && random() \u003c 0.95) {\n      let hit = false;\n      const rr = (r + 1.2) * (r + 1.2);\n      for (let y = ya; y \u003c= yb && !hit; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const ex = x + 0.5 - cx, ey = y + 0.5 - cy;\n          if (ex * ex + ey * ey \u003c rr && S[y * W + x] > -0.9) hit = true;\n        }\n      if (hit) continue;\n    }\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const ex = x + 0.5 - cx, ey = y + 0.5 - cy, i = y * W + x, v = tanh((r - sqrt(ex * ex + ey * ey)) / 0.8);\n        if (v > S[i]) (area += (v - S[i]) / 2), (S[i] = v);\n      }\n  }\n  if (inv) for (let i = 0; i \u003c N; i++) S[i] = -S[i];\n}\n\n// Box blur of radius r, along x and then y, by running sums.\nfunction box(src, dst, tmp, r) {\n  const n = 2 * r + 1;\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = src[o] * (r + 1);\n    for (let x = 1; x \u003c= r; x++) s += src[o + x];\n    for (let x = 0; x \u003c W; x++) (tmp[o + x] = s / n), (s += src[o + min(x + r + 1, W - 1)] - src[o + max(x - r, 0)]);\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = tmp[x] * (r + 1);\n    for (let y = 1; y \u003c= r; y++) s += tmp[y * W + x];\n    for (let y = 0; y \u003c H; y++) (dst[y * W + x] = s / n), (s += tmp[min(y + r + 1, H - 1) * W + x] - tmp[max(y - r, 0) * W + x]);\n  }\n}\n\n// One Allen-Cahn step. The multiplier acts on the interfaces only, weighted\n// by g = (1 - phi^2)^2, and is worked out over each 11x11 patch rather than\n// the whole panel, so what a drop's rim loses to its curvature comes back on\n// the same rim: a drop pulls round without shrinking, oil cannot go into\n// solution in the water, and a drop only feeds a neighbour it nearly touches,\n// as with Cahn-Hilliard. What the patches miss goes back over all the rims.\nfunction relax(P, h) {\n  const phi = P.phi, r = P.nxt, g = P.b1, rb = P.b2, gb = P.blur, a = h * MOB;\n  for (let y = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0, gr = (GRAV * (H - 2 * y)) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], q = 1 - p * p, w = q * q;\n      const lap = phi[x > 0 ? i - 1 : i] + phi[x \u003c W - 1 ? i + 1 : i] + phi[i + up] + phi[i + dn] - 4 * p;\n      r[i] = a * (KAP * lap + p - p * p * p + gr * w);\n      g[i] = w;\n    }\n  }\n  box(r, rb, P.tmp, 5);\n  box(g, gb, P.tmp, 5);\n  let sum = 0, gs = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const q = (phi[i] += r[i] - (g[i] * rb[i]) / (gb[i] + 1e-9));\n    sum += q;\n    gs += g[i];\n  }\n  const d = (P.mT * N - sum) / (gs + 1e-6);\n  for (let i = 0; i \u003c N; i++) phi[i] += d * g[i];\n}\n\n// The flow. Oil is lighter, so each coarse cell pushes up by how much oil it\n// holds; screened Stokes flow carries the drops, big ones faster, and water\n// comes down round them. A shake adds a swirl of the two lowest modes.\nfunction flow(P, swirl, phase) {\n  const { phi, F, A, G, psi, U, V } = P;\n  F.fill(0);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[(y >> 2) * CW + (x >> 2)] += phi[y * W + x];\n  // The curl of the push, -B dF/dx, then along x, along y, scaled, and back.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) G[j * CW + i] = (-BUOY / 32) * (F[j * CW + min(i + 1, CW - 1)] - F[j * CW + max(i - 1, 0)]);\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let i = 0; i \u003c CW; i++) s += G[j * CW + i] * SX[m * CW + i];\n      A[j * CW + m] = s;\n    }\n  for (let n = 0; n \u003c CH; n++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let j = 0; j \u003c CH; j++) s += A[j * CW + m] * SY[n * CH + j];\n      G[n * CW + m] = s * KI[n * CW + m];\n    }\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let n = 0; n \u003c CH; n++) s += G[n * CW + m] * SY[n * CH + j];\n      A[j * CW + m] = s;\n    }\n  const c1 = cos(phase), s1 = sin(phase);\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      let s = 0;\n      for (let m = 0; m \u003c CW; m++) s += A[j * CW + m] * SX[m * CW + i];\n      const X = (PI * (i + 0.5)) / CW, Y = (PI * (j + 0.5)) / CH;\n      psi[j * CW + i] = s + swirl * (sin(X) * sin(2 * Y) * c1 + 0.8 * sin(2 * X) * sin(Y) * s1);\n    }\n  // u = dpsi/dy, v = -dpsi/dx, in LEDs per time unit; psi is 0 past the walls.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      const k = j * CW + i, p = psi[k];\n      U[k] = 2 * ((j \u003c CH - 1 ? psi[k + CW] : -p) - (j > 0 ? psi[k - CW] : -p));\n      V[k] = -2 * ((i \u003c CW - 1 ? psi[k + 1] : -p) - (i > 0 ? psi[k - 1] : -p));\n    }\n}\n\n// The flow at every LED. A drop of either liquid under AMAX LEDs moves as one\n// piece at the mean of the flow over it, as surface tension holds a small\n// drop together, and so do the two rings of LEDs round it, which it is about\n// to take the place of. On top of that each drop is drawn towards the circle\n// of its own area: every LED of it moves along the radius at ROUND times its\n// distance from that circle, which curvature alone would take seconds over\n// for a big drop. A drop on a side wall slides up it and is drawn to a half\n// circle standing on the wall. Every drop rises, or sinks if it is water, at\n// least DRIFT LEDs a time unit faster than the coarse flow says, so the last\n// small ones still get there. The layers and the liquid between the drops\n// follow the flow smoothed over 5 LEDs; during a shake the swirl takes over.\nfunction velocity(P, rigid) {\n  const { U, V, u, v, b1, b2, phi, lab, stk, cu, cv, ca, px, py, rad } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const gy = cl((y - 1.5) / 4, 0, CH - 1), j0 = gy | 0, fy = gy - j0, a = j0 * CW, b = min(j0 + 1, CH - 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const gx = cl((x - 1.5) / 4, 0, CW - 1), i0 = gx | 0, i1 = min(i0 + 1, CW - 1), fx = gx - i0, i = y * W + x;\n      u[i] = (U[a + i0] * (1 - fx) + U[a + i1] * fx) * (1 - fy) + (U[b + i0] * (1 - fx) + U[b + i1] * fx) * fy;\n      v[i] = (V[a + i0] * (1 - fx) + V[a + i1] * fx) * (1 - fy) + (V[b + i0] * (1 - fx) + V[b + i1] * fx) * fy;\n    }\n  }\n  box(u, b1, P.tmp, 2);\n  box(v, b2, P.tmp, 2);\n  if (rigid \u003c= 0) return u.set(b1), v.set(b2);\n  // Label the pieces of each liquid, 4-connected.\n  lab.fill(-1);\n  let nc = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (lab[s] >= 0) continue;\n    const ph = phi[s] > 0;\n    let top = 0, area = 0, su = 0, sv = 0, mx = 0, my = 0, wall = false;\n    stk[top++] = s;\n    lab[s] = nc;\n    while (top > 0) {\n      const i = stk[--top], x = i % W;\n      area++;\n      if (x === 0 || x === W - 1) wall = true;\n      (su += u[i]), (sv += v[i]), (mx += x), (my += (i - x) / W);\n      if (x > 0 && lab[i - 1] \u003c 0 && phi[i - 1] > 0 === ph) (lab[i - 1] = nc), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0 && phi[i + 1] > 0 === ph) (lab[i + 1] = nc), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0 && phi[i - W] > 0 === ph) (lab[i - W] = nc), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0 && phi[i + W] > 0 === ph) (lab[i + W] = nc), (stk[top++] = i + W);\n    }\n    (ca[nc] = area), (cu[nc] = wall ? 0 : su / area), (cv[nc] = sv / area + (ph ? -DRIFT : DRIFT));\n    (px[nc] = wall ? (mx / area \u003c W / 2 ? -0.5 : W - 0.5) : mx / area), (py[nc] = my / area);\n    rad[nc] = sqrt(((wall ? 2 : 1) * area) / PI);\n    nc++;\n  }\n  const put = (i, k) => {\n    const dx = (i % W) - px[k], dy = ((i / W) | 0) - py[k], w = ROUND * (rad[k] / (sqrt(dx * dx + dy * dy) + 0.5) - 1);\n    (u[i] = cu[k] + w * dx), (v[i] = cv[k] + w * dy), (lab[i] = k);\n  };\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    if (ca[lab[i]] \u003c AMAX) put(i, lab[i]), (stk[top++] = i);\n    else (u[i] = b1[i]), (v[i] = b2[i]), (lab[i] = -1);\n  }\n  // Two rings round each drop, nearest drop first.\n  for (let ring = 0, from = 0; ring \u003c 2; ring++) {\n    const end = top;\n    for (let t = from; t \u003c end; t++) {\n      const i = stk[t], x = i % W, k = lab[i];\n      if (x > 0 && lab[i - 1] \u003c 0) put(i - 1, k), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0) put(i + 1, k), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0) put(i - W, k), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0) put(i + W, k), (stk[top++] = i + W);\n    }\n    from = end;\n  }\n  if (rigid \u003c 1) for (let i = 0; i \u003c N; i++) (u[i] = b1[i] + (u[i] - b1[i]) * rigid), (v[i] = b2[i] + (v[i] - b2[i]) * rigid);\n}\n\n// Semi-Lagrangian advection of a field over T time units, from src into dst.\n// Past the top the bottle holds oil (top) and past the bottom water (bot), so\n// a drop leaving the floor does not draw a streak of itself up behind it.\nfunction advect(P, src, dst, T, top, bot) {\n  const { u, v } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, sx = cl(x - u[i] * T, 0, W - 1), sy = y - v[i] * T;\n      const x0 = sx | 0, x1 = min(x0 + 1, W - 1), ex = sx - x0, y0 = floor(sy), ey = sy - y0;\n      const a = y0 \u003c 0 ? top : y0 > H - 1 ? bot : src[y0 * W + x0] * (1 - ex) + src[y0 * W + x1] * ex;\n      const b = y0 \u003c -1 ? top : y0 > H - 2 ? bot : src[(y0 + 1) * W + x0] * (1 - ex) + src[(y0 + 1) * W + x1] * ex;\n      dst[i] = a * (1 - ey) + b * ey;\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.3, 0.06];\n  if (!params.s) params.s = init(k);\n  const P = params.s, d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.oil = cl(k[2], 0.3, 0.6);\n  P.shake = cl(k[3], 0, 1);\n  // The amount of oil follows K3 at a fifth of the bottle a second, so the\n  // layer grows or thins instead of the water clouding over.\n  P.mT += cl(2 * P.oil - 1 - P.mT, -0.4 * d, 0.4 * d);\n  const T = d * P.speed * RATE;\n  P.rt += d;\n  P.time += T;\n  P.c += T;\n  // A shake every 560 time units (23 s at Speed 2) at K4 0, down to 120 at 1.\n  if ((input.btnPressed && input.btnPressed[0] && P.c > TS) || P.c > 560 - 440 * sqrt(P.shake)) (P.c = 0), shake(P);\n  // The swirl winds the liquid round for the first two thirds of a shake, and\n  // as it dies the liquid breaks up into the new drops.\n  const shaking = P.c \u003c TS, u = P.c / TS, e = shaking ? sin(PI * min(1, u / 0.65)) ** 2 : 0;\n  flow(P, 10 * e, P.time * 0.3);\n  velocity(P, 1 - e);\n  // phi is carried as atanh(phi), which runs nearly straight through an\n  // interface, so the linear interpolation does not smear the drops' edges.\n  const phi = P.phi, q = P.nxt;\n  for (let i = 0; i \u003c N; i++) {\n    const p = cl(phi[i], -0.99999, 0.99999);\n    q[i] = 0.5 * log((1 + p) / (1 - p));\n  }\n  advect(P, q, phi, T, 6, -6);\n  for (let i = 0; i \u003c N; i++) phi[i] = 1 - 2 / (exp(2 * phi[i]) + 1);\n  if (shaking) {\n    const w = 1 - exp(-0.5 * sm(0.4, 0.8, u) * T), S = P.S;\n    for (let i = 0; i \u003c N; i++) phi[i] += w * (S[i] - phi[i]);\n  }\n  const steps = Math.ceil(T / HMAX - 1e-6);\n  for (let s = 0; s \u003c steps; s++) relax(P, T / steps);\n  // A drop shrunk to one LED inside the other liquid cannot go anywhere under\n  // the local multiplier and would stay as a dimple: fill it in.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i];\n      if (p > 0.97 || p \u003c -0.97) continue;\n      const a = phi[x > 0 ? i - 1 : i + 1], b = phi[x \u003c W - 1 ? i + 1 : i - 1], c = phi[y > 0 ? i - W : i + W], e = phi[y \u003c H - 1 ? i + W : i - W];\n      const lo = min(a, b, c, e), hi = max(a, b, c, e);\n      if ((lo > 0.5 && p \u003c lo - 0.1) || (hi \u003c -0.5 && p > hi + 0.1)) phi[i] = (a + b + c + e) / 4;\n    }\n}\n\n// Light from the upper left and in front, and the half vector for the glint.\nconst LX = -0.42, LY = -0.56, LZ = 0.71, HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const phi = P.phi, bl = P.blur, deep = P.deep, pale = P.pale;\n  // phi blurred over 5x5 is read as the height of the oil: a drop is a dome\n  // and the layer a plateau, lit from the upper left.\n  box(phi, bl, P.tmp, 2);\n  hsv(P.hue + 0.07, 0.62, 1, deep);\n  hsv(P.hue + 0.07, 0.26, 1, pale);\n  // A soft band of shop light drifts across the glass every 14 s.\n  const band = W / 2 + 46 * sin((2 * PI * P.rt) / 14);\n  for (let y = 0; y \u003c H; y++) {\n    const shop = 0.86 + 0.14 * (1 - y / H);\n    // Water: a pale cool white, a shade bluer low down.\n    const wr = 0.76 - 0.06 * (y / H), wg = 0.82 - 0.03 * (y / H), wb = 0.93;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], o = sm(-0.6, 0.6, p);\n      const gx = phi[x \u003c W - 1 ? i + 1 : i] - phi[x > 0 ? i - 1 : i], gy = phi[y \u003c H - 1 ? i + W : i] - phi[y > 0 ? i - W : i];\n      const nx = -2.4 * (bl[x \u003c W - 1 ? i + 1 : i] - bl[x > 0 ? i - 1 : i]), ny = -2.4 * (bl[y \u003c H - 1 ? i + W : i] - bl[y > 0 ? i - W : i]);\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1), c1 = max(0, (nx * HX + ny * HY + HZ) * nn), c4 = c1 * c1 * c1 * c1, c16 = c4 * c4 * c4 * c4;\n      // Oil: pale at a drop's rim and deep in its middle and in the layer,\n      // shaded as a dome, never below 80% so it does not go brown.\n      const dpt = sm(-0.2, 0.9, bl[i]), sh = max(0.8, 1 + 0.6 * ((nx * LX + ny * LY + LZ) * nn - LZ));\n      const r = wr + ((pale[0] + (deep[0] - pale[0]) * dpt) * sh - wr) * o;\n      const g = wg + ((pale[1] + (deep[1] - pale[1]) * dpt) * sh - wg) * o;\n      const b = wb + ((pale[2] + (deep[2] - pale[2]) * dpt) * sh - wb) * o;\n      // The rim catches the light from above, a dome its glint, and a long\n      // flat interface, the meniscus, shows as a bright line.\n      const q = 1 - p * p, rim = q * q, lit = cl(gy * 0.6 + gx * 0.25, 0, 1), flat = (gy * gy) / (gx * gx + gy * gy + 1e-6);\n      const men = rim * flat * flat * sm(0.45, 0.75, abs(ny / 2.4));\n      const bx = (x - band + 0.4 * (y - H / 2)) / 11, sheen = bx * bx \u003c 9 ? exp(-bx * bx) * (0.05 + 0.1 * o) : 0;\n      const hl = cl(0.1 * rim + 0.45 * rim * lit + 0.7 * c16 * c16 * o + 0.8 * men + sheen, 0, 1);\n      display.setPixel(x, y, (r + (1 - r) * hl) * shop * 255, (g + (1 - g) * hl) * shop * 255, (b + (1 - b) * hl) * shop * 255);\n    }\n  }\n}\n","layer":{"id":"layer-bi-phase","type":"code","name":"bi-phase","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bi-Phase\n// Family:  cosmetic\n// Idea:    The panel is the inside of a two-phase cleanser just shaken: tinted oil drops in pale water merge into bigger round drops, the big ones rise fastest, and the oil gathers on top in one layer under a bright meniscus line until the bottle is shaken again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after two-phase cleansers and phase-field separation of two liquids (Cahn-Hilliard, John W. Cahn and John E. Hilliard, 1958; Allen-Cahn, Samuel M. Allen and John W. Cahn, 1979)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1\n//\n// Knob 1: Hue. Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose.\n// Knob 2: Speed. How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long.\n// Knob 3: Oil. The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down.\n// Knob 4: Shake. How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles.\n// Buttons: K1 tap shakes the bottle now.\n\nconst W = 64, H = 128, N = W * H;\n// The flow is solved on a coarse grid of 4x4 LED cells.\nconst CW = 16, CH = 32, CN = CW * CH;\nconst { min, max, floor, sqrt, sin, cos, exp, log, tanh, abs, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// Allen-Cahn: phi_t = M (K lap phi + phi - phi^3) + lambda, phi = +1 oil and\n// -1 water, lambda the multiplier that holds the amount of oil to K3. The\n// interface is tanh(d / sqrt(2K)) across, about 2 LEDs, and moves at M K\n// times its curvature. h M (8K + 2) \u003c 2 keeps the step stable: 4 a frame at\n// Speed 2.\nconst KAP = 0.5, MOB = 1.5, HMAX = 0.21;\n// Gravity in the free energy, on the interfaces only: a rim higher up gains\n// oil from one lower down in the same patch.\nconst GRAV = 2.5;\n// Time units a second at Speed 1; a shake lasts TS of them, 1.1 s at Speed 2.\nconst RATE = 12, TS = 26;\n// The push of the oil, and the screening of the flat bottle's walls.\nconst BUOY = 0.5, AL2 = 0.16;\n// Drops under AMAX LEDs move as one piece; ROUND and DRIFT below.\nconst AMAX = 700, ROUND = 0.06, DRIFT = 0.08;\n\n// Sine transforms of the coarse grid (DST-II forward, DST-III back), and the\n// screened Stokes operator (lap - a^2)^2 psi = d(f_y)/dx of a flat cell,\n// diagonal in that basis, with free-slip walls.\nconst SX = new Float32Array(CW * CW), SY = new Float32Array(CH * CH), KI = new Float32Array(CN);\nfor (let m = 0; m \u003c CW; m++) for (let i = 0; i \u003c CW; i++) SX[m * CW + i] = sin((PI * (m + 1) * (i + 0.5)) / CW);\nfor (let n = 0; n \u003c CH; n++) for (let j = 0; j \u003c CH; j++) SY[n * CH + j] = sin((PI * (n + 1) * (j + 0.5)) / CH);\nfor (let n = 0; n \u003c CH; n++)\n  for (let m = 0; m \u003c CW; m++) {\n    const kx = 4 * sin((PI * (m + 1)) / (2 * CW)) ** 2, ky = 4 * sin((PI * (n + 1)) / (2 * CH)) ** 2;\n    KI[n * CW + m] = ((m === CW - 1 ? 1 : 2) * (n === CH - 1 ? 1 : 2)) / (CN * (kx + ky + AL2) ** 2);\n  }\n\nfunction hsv(h, s, v, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  (o[0] = c[0]), (o[1] = c[1]), (o[2] = c[2]);\n}\n\nexport function setup(params) {\n  params.s = null;\n}\n\nfunction init(k) {\n  const f = () => new Float32Array(N), g = () => new Float32Array(CN);\n  const P = {\n    phi: f(), nxt: f(), S: f(), tmp: f(), blur: f(), u: f(), v: f(), b1: f(), b2: f(),\n    lab: new Int32Array(N), stk: new Int32Array(N), cu: f(), cv: f(), ca: f(), px: f(), py: f(), rad: f(),\n    F: g(), A: g(), G: g(), psi: g(), U: g(), V: g(),\n    hue: k[0], speed: 2, oil: cl(k[2], 0.3, 0.6), shake: cl(k[3], 0, 1),\n    mT: 0, c: 0.85 * TS, time: 0, rt: 0, deep: [0, 0, 0], pale: [0, 0, 0],\n  };\n  // Open at the end of a shake, the new drops just formed.\n  P.mT = 2 * P.oil - 1;\n  shake(P);\n  P.phi.set(P.S);\n  for (let s = 0; s \u003c 8; s++) relax(P, HMAX);\n  return P;\n}\n\n// A shake's emulsion: round drops of the lesser liquid dropped at random until\n// they make up its share, radius 2.2 to 5 LEDs after a gentle shake and 1.5\n// to 2.4 after a hard one, small ones the most common. Most land a LED clear\n// of the others; one in twenty may touch.\nfunction shake(P) {\n  const S = P.S, inv = P.mT > 0, f = inv ? (1 - P.mT) / 2 : (1 + P.mT) / 2;\n  const r0 = 2.2 - 0.7 * P.shake, r1 = 5 - 2.6 * P.shake;\n  S.fill(-1);\n  let area = 0;\n  for (let k = 0; k \u003c 5000 && area \u003c f * N; k++) {\n    const r = r0 * (r1 / r0) ** (random() ** 1.6), cx = random() * W, cy = random() * H;\n    const xa = max(0, floor(cx - r - 2)), xb = min(W - 1, floor(cx + r + 2)), ya = max(0, floor(cy - r - 2)), yb = min(H - 1, floor(cy + r + 2));\n    if (k \u003c 4500 && random() \u003c 0.95) {\n      let hit = false;\n      const rr = (r + 1.2) * (r + 1.2);\n      for (let y = ya; y \u003c= yb && !hit; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const ex = x + 0.5 - cx, ey = y + 0.5 - cy;\n          if (ex * ex + ey * ey \u003c rr && S[y * W + x] > -0.9) hit = true;\n        }\n      if (hit) continue;\n    }\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const ex = x + 0.5 - cx, ey = y + 0.5 - cy, i = y * W + x, v = tanh((r - sqrt(ex * ex + ey * ey)) / 0.8);\n        if (v > S[i]) (area += (v - S[i]) / 2), (S[i] = v);\n      }\n  }\n  if (inv) for (let i = 0; i \u003c N; i++) S[i] = -S[i];\n}\n\n// Box blur of radius r, along x and then y, by running sums.\nfunction box(src, dst, tmp, r) {\n  const n = 2 * r + 1;\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = src[o] * (r + 1);\n    for (let x = 1; x \u003c= r; x++) s += src[o + x];\n    for (let x = 0; x \u003c W; x++) (tmp[o + x] = s / n), (s += src[o + min(x + r + 1, W - 1)] - src[o + max(x - r, 0)]);\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = tmp[x] * (r + 1);\n    for (let y = 1; y \u003c= r; y++) s += tmp[y * W + x];\n    for (let y = 0; y \u003c H; y++) (dst[y * W + x] = s / n), (s += tmp[min(y + r + 1, H - 1) * W + x] - tmp[max(y - r, 0) * W + x]);\n  }\n}\n\n// One Allen-Cahn step. The multiplier acts on the interfaces only, weighted\n// by g = (1 - phi^2)^2, and is worked out over each 11x11 patch rather than\n// the whole panel, so what a drop's rim loses to its curvature comes back on\n// the same rim: a drop pulls round without shrinking, oil cannot go into\n// solution in the water, and a drop only feeds a neighbour it nearly touches,\n// as with Cahn-Hilliard. What the patches miss goes back over all the rims.\nfunction relax(P, h) {\n  const phi = P.phi, r = P.nxt, g = P.b1, rb = P.b2, gb = P.blur, a = h * MOB;\n  for (let y = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0, gr = (GRAV * (H - 2 * y)) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], q = 1 - p * p, w = q * q;\n      const lap = phi[x > 0 ? i - 1 : i] + phi[x \u003c W - 1 ? i + 1 : i] + phi[i + up] + phi[i + dn] - 4 * p;\n      r[i] = a * (KAP * lap + p - p * p * p + gr * w);\n      g[i] = w;\n    }\n  }\n  box(r, rb, P.tmp, 5);\n  box(g, gb, P.tmp, 5);\n  let sum = 0, gs = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const q = (phi[i] += r[i] - (g[i] * rb[i]) / (gb[i] + 1e-9));\n    sum += q;\n    gs += g[i];\n  }\n  const d = (P.mT * N - sum) / (gs + 1e-6);\n  for (let i = 0; i \u003c N; i++) phi[i] += d * g[i];\n}\n\n// The flow. Oil is lighter, so each coarse cell pushes up by how much oil it\n// holds; screened Stokes flow carries the drops, big ones faster, and water\n// comes down round them. A shake adds a swirl of the two lowest modes.\nfunction flow(P, swirl, phase) {\n  const { phi, F, A, G, psi, U, V } = P;\n  F.fill(0);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[(y >> 2) * CW + (x >> 2)] += phi[y * W + x];\n  // The curl of the push, -B dF/dx, then along x, along y, scaled, and back.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) G[j * CW + i] = (-BUOY / 32) * (F[j * CW + min(i + 1, CW - 1)] - F[j * CW + max(i - 1, 0)]);\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let i = 0; i \u003c CW; i++) s += G[j * CW + i] * SX[m * CW + i];\n      A[j * CW + m] = s;\n    }\n  for (let n = 0; n \u003c CH; n++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let j = 0; j \u003c CH; j++) s += A[j * CW + m] * SY[n * CH + j];\n      G[n * CW + m] = s * KI[n * CW + m];\n    }\n  for (let j = 0; j \u003c CH; j++)\n    for (let m = 0; m \u003c CW; m++) {\n      let s = 0;\n      for (let n = 0; n \u003c CH; n++) s += G[n * CW + m] * SY[n * CH + j];\n      A[j * CW + m] = s;\n    }\n  const c1 = cos(phase), s1 = sin(phase);\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      let s = 0;\n      for (let m = 0; m \u003c CW; m++) s += A[j * CW + m] * SX[m * CW + i];\n      const X = (PI * (i + 0.5)) / CW, Y = (PI * (j + 0.5)) / CH;\n      psi[j * CW + i] = s + swirl * (sin(X) * sin(2 * Y) * c1 + 0.8 * sin(2 * X) * sin(Y) * s1);\n    }\n  // u = dpsi/dy, v = -dpsi/dx, in LEDs per time unit; psi is 0 past the walls.\n  for (let j = 0; j \u003c CH; j++)\n    for (let i = 0; i \u003c CW; i++) {\n      const k = j * CW + i, p = psi[k];\n      U[k] = 2 * ((j \u003c CH - 1 ? psi[k + CW] : -p) - (j > 0 ? psi[k - CW] : -p));\n      V[k] = -2 * ((i \u003c CW - 1 ? psi[k + 1] : -p) - (i > 0 ? psi[k - 1] : -p));\n    }\n}\n\n// The flow at every LED. A drop of either liquid under AMAX LEDs moves as one\n// piece at the mean of the flow over it, as surface tension holds a small\n// drop together, and so do the two rings of LEDs round it, which it is about\n// to take the place of. On top of that each drop is drawn towards the circle\n// of its own area: every LED of it moves along the radius at ROUND times its\n// distance from that circle, which curvature alone would take seconds over\n// for a big drop. A drop on a side wall slides up it and is drawn to a half\n// circle standing on the wall. Every drop rises, or sinks if it is water, at\n// least DRIFT LEDs a time unit faster than the coarse flow says, so the last\n// small ones still get there. The layers and the liquid between the drops\n// follow the flow smoothed over 5 LEDs; during a shake the swirl takes over.\nfunction velocity(P, rigid) {\n  const { U, V, u, v, b1, b2, phi, lab, stk, cu, cv, ca, px, py, rad } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const gy = cl((y - 1.5) / 4, 0, CH - 1), j0 = gy | 0, fy = gy - j0, a = j0 * CW, b = min(j0 + 1, CH - 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const gx = cl((x - 1.5) / 4, 0, CW - 1), i0 = gx | 0, i1 = min(i0 + 1, CW - 1), fx = gx - i0, i = y * W + x;\n      u[i] = (U[a + i0] * (1 - fx) + U[a + i1] * fx) * (1 - fy) + (U[b + i0] * (1 - fx) + U[b + i1] * fx) * fy;\n      v[i] = (V[a + i0] * (1 - fx) + V[a + i1] * fx) * (1 - fy) + (V[b + i0] * (1 - fx) + V[b + i1] * fx) * fy;\n    }\n  }\n  box(u, b1, P.tmp, 2);\n  box(v, b2, P.tmp, 2);\n  if (rigid \u003c= 0) return u.set(b1), v.set(b2);\n  // Label the pieces of each liquid, 4-connected.\n  lab.fill(-1);\n  let nc = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (lab[s] >= 0) continue;\n    const ph = phi[s] > 0;\n    let top = 0, area = 0, su = 0, sv = 0, mx = 0, my = 0, wall = false;\n    stk[top++] = s;\n    lab[s] = nc;\n    while (top > 0) {\n      const i = stk[--top], x = i % W;\n      area++;\n      if (x === 0 || x === W - 1) wall = true;\n      (su += u[i]), (sv += v[i]), (mx += x), (my += (i - x) / W);\n      if (x > 0 && lab[i - 1] \u003c 0 && phi[i - 1] > 0 === ph) (lab[i - 1] = nc), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0 && phi[i + 1] > 0 === ph) (lab[i + 1] = nc), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0 && phi[i - W] > 0 === ph) (lab[i - W] = nc), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0 && phi[i + W] > 0 === ph) (lab[i + W] = nc), (stk[top++] = i + W);\n    }\n    (ca[nc] = area), (cu[nc] = wall ? 0 : su / area), (cv[nc] = sv / area + (ph ? -DRIFT : DRIFT));\n    (px[nc] = wall ? (mx / area \u003c W / 2 ? -0.5 : W - 0.5) : mx / area), (py[nc] = my / area);\n    rad[nc] = sqrt(((wall ? 2 : 1) * area) / PI);\n    nc++;\n  }\n  const put = (i, k) => {\n    const dx = (i % W) - px[k], dy = ((i / W) | 0) - py[k], w = ROUND * (rad[k] / (sqrt(dx * dx + dy * dy) + 0.5) - 1);\n    (u[i] = cu[k] + w * dx), (v[i] = cv[k] + w * dy), (lab[i] = k);\n  };\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    if (ca[lab[i]] \u003c AMAX) put(i, lab[i]), (stk[top++] = i);\n    else (u[i] = b1[i]), (v[i] = b2[i]), (lab[i] = -1);\n  }\n  // Two rings round each drop, nearest drop first.\n  for (let ring = 0, from = 0; ring \u003c 2; ring++) {\n    const end = top;\n    for (let t = from; t \u003c end; t++) {\n      const i = stk[t], x = i % W, k = lab[i];\n      if (x > 0 && lab[i - 1] \u003c 0) put(i - 1, k), (stk[top++] = i - 1);\n      if (x \u003c W - 1 && lab[i + 1] \u003c 0) put(i + 1, k), (stk[top++] = i + 1);\n      if (i >= W && lab[i - W] \u003c 0) put(i - W, k), (stk[top++] = i - W);\n      if (i \u003c N - W && lab[i + W] \u003c 0) put(i + W, k), (stk[top++] = i + W);\n    }\n    from = end;\n  }\n  if (rigid \u003c 1) for (let i = 0; i \u003c N; i++) (u[i] = b1[i] + (u[i] - b1[i]) * rigid), (v[i] = b2[i] + (v[i] - b2[i]) * rigid);\n}\n\n// Semi-Lagrangian advection of a field over T time units, from src into dst.\n// Past the top the bottle holds oil (top) and past the bottom water (bot), so\n// a drop leaving the floor does not draw a streak of itself up behind it.\nfunction advect(P, src, dst, T, top, bot) {\n  const { u, v } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, sx = cl(x - u[i] * T, 0, W - 1), sy = y - v[i] * T;\n      const x0 = sx | 0, x1 = min(x0 + 1, W - 1), ex = sx - x0, y0 = floor(sy), ey = sy - y0;\n      const a = y0 \u003c 0 ? top : y0 > H - 1 ? bot : src[y0 * W + x0] * (1 - ex) + src[y0 * W + x1] * ex;\n      const b = y0 \u003c -1 ? top : y0 > H - 2 ? bot : src[(y0 + 1) * W + x0] * (1 - ex) + src[(y0 + 1) * W + x1] * ex;\n      dst[i] = a * (1 - ey) + b * ey;\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.3, 0.06];\n  if (!params.s) params.s = init(k);\n  const P = params.s, d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.oil = cl(k[2], 0.3, 0.6);\n  P.shake = cl(k[3], 0, 1);\n  // The amount of oil follows K3 at a fifth of the bottle a second, so the\n  // layer grows or thins instead of the water clouding over.\n  P.mT += cl(2 * P.oil - 1 - P.mT, -0.4 * d, 0.4 * d);\n  const T = d * P.speed * RATE;\n  P.rt += d;\n  P.time += T;\n  P.c += T;\n  // A shake every 560 time units (23 s at Speed 2) at K4 0, down to 120 at 1.\n  if ((input.btnPressed && input.btnPressed[0] && P.c > TS) || P.c > 560 - 440 * sqrt(P.shake)) (P.c = 0), shake(P);\n  // The swirl winds the liquid round for the first two thirds of a shake, and\n  // as it dies the liquid breaks up into the new drops.\n  const shaking = P.c \u003c TS, u = P.c / TS, e = shaking ? sin(PI * min(1, u / 0.65)) ** 2 : 0;\n  flow(P, 10 * e, P.time * 0.3);\n  velocity(P, 1 - e);\n  // phi is carried as atanh(phi), which runs nearly straight through an\n  // interface, so the linear interpolation does not smear the drops' edges.\n  const phi = P.phi, q = P.nxt;\n  for (let i = 0; i \u003c N; i++) {\n    const p = cl(phi[i], -0.99999, 0.99999);\n    q[i] = 0.5 * log((1 + p) / (1 - p));\n  }\n  advect(P, q, phi, T, 6, -6);\n  for (let i = 0; i \u003c N; i++) phi[i] = 1 - 2 / (exp(2 * phi[i]) + 1);\n  if (shaking) {\n    const w = 1 - exp(-0.5 * sm(0.4, 0.8, u) * T), S = P.S;\n    for (let i = 0; i \u003c N; i++) phi[i] += w * (S[i] - phi[i]);\n  }\n  const steps = Math.ceil(T / HMAX - 1e-6);\n  for (let s = 0; s \u003c steps; s++) relax(P, T / steps);\n  // A drop shrunk to one LED inside the other liquid cannot go anywhere under\n  // the local multiplier and would stay as a dimple: fill it in.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i];\n      if (p > 0.97 || p \u003c -0.97) continue;\n      const a = phi[x > 0 ? i - 1 : i + 1], b = phi[x \u003c W - 1 ? i + 1 : i - 1], c = phi[y > 0 ? i - W : i + W], e = phi[y \u003c H - 1 ? i + W : i - W];\n      const lo = min(a, b, c, e), hi = max(a, b, c, e);\n      if ((lo > 0.5 && p \u003c lo - 0.1) || (hi \u003c -0.5 && p > hi + 0.1)) phi[i] = (a + b + c + e) / 4;\n    }\n}\n\n// Light from the upper left and in front, and the half vector for the glint.\nconst LX = -0.42, LY = -0.56, LZ = 0.71, HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const phi = P.phi, bl = P.blur, deep = P.deep, pale = P.pale;\n  // phi blurred over 5x5 is read as the height of the oil: a drop is a dome\n  // and the layer a plateau, lit from the upper left.\n  box(phi, bl, P.tmp, 2);\n  hsv(P.hue + 0.07, 0.62, 1, deep);\n  hsv(P.hue + 0.07, 0.26, 1, pale);\n  // A soft band of shop light drifts across the glass every 14 s.\n  const band = W / 2 + 46 * sin((2 * PI * P.rt) / 14);\n  for (let y = 0; y \u003c H; y++) {\n    const shop = 0.86 + 0.14 * (1 - y / H);\n    // Water: a pale cool white, a shade bluer low down.\n    const wr = 0.76 - 0.06 * (y / H), wg = 0.82 - 0.03 * (y / H), wb = 0.93;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, p = phi[i], o = sm(-0.6, 0.6, p);\n      const gx = phi[x \u003c W - 1 ? i + 1 : i] - phi[x > 0 ? i - 1 : i], gy = phi[y \u003c H - 1 ? i + W : i] - phi[y > 0 ? i - W : i];\n      const nx = -2.4 * (bl[x \u003c W - 1 ? i + 1 : i] - bl[x > 0 ? i - 1 : i]), ny = -2.4 * (bl[y \u003c H - 1 ? i + W : i] - bl[y > 0 ? i - W : i]);\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1), c1 = max(0, (nx * HX + ny * HY + HZ) * nn), c4 = c1 * c1 * c1 * c1, c16 = c4 * c4 * c4 * c4;\n      // Oil: pale at a drop's rim and deep in its middle and in the layer,\n      // shaded as a dome, never below 80% so it does not go brown.\n      const dpt = sm(-0.2, 0.9, bl[i]), sh = max(0.8, 1 + 0.6 * ((nx * LX + ny * LY + LZ) * nn - LZ));\n      const r = wr + ((pale[0] + (deep[0] - pale[0]) * dpt) * sh - wr) * o;\n      const g = wg + ((pale[1] + (deep[1] - pale[1]) * dpt) * sh - wg) * o;\n      const b = wb + ((pale[2] + (deep[2] - pale[2]) * dpt) * sh - wb) * o;\n      // The rim catches the light from above, a dome its glint, and a long\n      // flat interface, the meniscus, shows as a bright line.\n      const q = 1 - p * p, rim = q * q, lit = cl(gy * 0.6 + gx * 0.25, 0, 1), flat = (gy * gy) / (gx * gx + gy * gy + 1e-6);\n      const men = rim * flat * flat * sm(0.45, 0.75, abs(ny / 2.4));\n      const bx = (x - band + 0.4 * (y - H / 2)) / 11, sheen = bx * bx \u003c 9 ? exp(-bx * bx) * (0.05 + 0.1 * o) : 0;\n      const hl = cl(0.1 * rim + 0.45 * rim * lit + 0.7 * c16 * c16 * o + 0.8 * men + sheen, 0, 1);\n      display.setPixel(x, y, (r + (1 - r) * hl) * shop * 255, (g + (1 - g) * hl) * shop * 255, (b + (1 - b) * hl) * shop * 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Oil=0.3..0.6, Shake=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the oil round the colour wheel; the water stays a pale cool white. At 0 the oil is peach, at 0.25 green, at 0.5 sky blue, at 0.75 violet and at 0.85 rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the liquid runs. At 2 a drop of radius 3 rises 14 LEDs a second and one of radius 8 35, and the oil has settled into its layer 6 to 7 s after a shake; at 0.2 everything, the shake too, takes ten times as long."},{"name":"Oil","min":0.3,"max":0.6,"about":"The share of the bottle that is oil, 30% to 60%. At 0.3 the meniscus settles 38 LEDs from the top and a shake makes oil drops in water; past 0.5 it makes water drops in oil, and at 0.6 the line settles 77 LEDs down."},{"name":"Shake","min":0,"max":1,"about":"How hard and how often the bottle is shaken. At 0 every 23 s at Speed 2, into drops of radius 2.2 to 5 LEDs, and the layers stand calm for most of that; at 1 every 5 s, into drops of radius 1.5 to 2.4 that rise slowly, so the oil never quite settles."}],"start":[0,2,0.3,0.06],"measures":{"motion":0.0579,"detail":0.0044,"edges":0.0095,"complexity":0.6088,"coverage":1,"colour":0.3088,"drift":0.0284},"knobResponse":[0.1292,0.1228,0.1399,0.1113]},{"slug":"big-type","title":"Big Type","family":"type","round":1,"note":"화면을 꽉 채운 낱말 하나가 자석을 댄 옛 텔레비전 화면처럼 휘어요.","idea":"One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-big-type","type":"code","name":"big-type","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the outline colour; the fill and the shadow follow it."},{"name":"Speed","min":0.2,"max":5,"about":"How fast the wave runs down the word and the bright scan bar rolls."},{"name":"Word","min":0,"max":6,"about":"Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB."},{"name":"Warp","min":0,"max":1,"about":"How hard the picture bends, from a slow sway to a set losing its hold."}],"start":[0,2,0,0.06],"measures":{"motion":0.4681,"detail":0.0954,"edges":0.9989,"complexity":0.0628,"coverage":0.2402,"colour":0.253,"drift":0.0745},"knobResponse":[0.0865,0.0522,0.1361,0.0808]},{"slug":"bismuth","title":"Bismuth","family":"mineral","round":18,"note":"녹은 비스무트 웅덩이에서 계단 진 네모 호퍼 결정이 가지를 치며 패널 꼭대기까지 자라요. 테라스마다 산화막이 은색에서 금색, 자홍, 파랑, 청록을 지나 두 번째 금색과 분홍으로 바뀌어서 색이 그 단이 생긴 때를 말해요. K1 을 누르면 웅덩이가 패널을 타고 올라 결정을 녹였다가 빠지고, 결정이 다시 자라요.","idea":"Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.","buttons":"K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.","code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-bismuth","type":"code","name":"bismuth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves."},{"name":"Steps","min":3,"max":8,"about":"How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows."},{"name":"Heat","min":0,"max":1,"about":"How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back."}],"start":[0,2,3,0.06],"measures":{"motion":0.0634,"detail":0.155,"edges":0.6769,"complexity":1.8463,"coverage":0.7656,"colour":0.3505,"drift":0.1056},"knobResponse":[0.1563,0.1868,0.0876,0.1811]},{"slug":"blooming-gel","title":"Blooming Gel","family":"cosmetic","round":36,"note":"젖은 블루밍 베이스에 코발트와 라일락, 흰 젤 방울이 하나씩 떨어져 가장자리가 해진 꽃처럼 번지고, 안료는 번지는 앞선으로 밀려 테두리가 짙어져요. 6.2초를 그리고 나면 경화 램프 띠가 위에서 아래로 지나며 무늬를 굳히고, 닦아 낸 새 베이스에서 다시 시작해요. K3 은 방울 크기와 번지는 거리를 정하고, K1 을 누르면 방울 하나가 바로 떨어져요.","idea":"Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.","buttons":"K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.","code":"// ===== Patternflow pattern =====\n// Title:   Blooming Gel\n// Family:  cosmetic\n// Idea:    Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after blooming gel nail art, with the drop's gel spreading by the porous medium equation and its Barenblatt fronts (G. I. Barenblatt, 1952) and its pigment run ahead to the front like a watercolour back-run\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1\n//\n// Knob 1: Hue. Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream.\n// Knob 2: Speed. The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Bloom. How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other.\n// Knob 4: Rim. How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring.\n// Buttons: K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, exp, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The gel lives on a coarse grid of CW x CH cells, 2 LEDs each; its\n// pigment on the LEDs themselves.\nconst CW = W / 2, CH = H / 2, CN = CW * CH;\n// Tiles of 8 x 8 LEDs: only the wet ones and their neighbours are worked.\nconst TS = 8, TW = W / TS, TH = H / TS;\n// Pigments: two tints and white.\nconst NK = 3;\n// The drop's gel spreads as w_t = div(D w grad w), the porous medium\n// equation, whose fronts move at a finite speed; D in LED^2 a second at\n// Speed 2. The gel soaks into the base, losing SOAK of itself a second, and\n// pigment moves only where the gel is thicker than WET.\nconst SOAK = 0.06, WET = 0.006;\n// One painting round in seconds of nail time: drops land until PAINT, the\n// cure lamp passes from CURE to HOLD, the design rests, and the wipe runs\n// from WIPE to ROUND.\nconst PAINT = 6.2, CURE = 6.5, HOLD = 7.9, WIPE = 9.1, ROUND = 10.3;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, bloom: 0, rim: 0.06, t: 0, next: 0, first: true, gmob: 1,\n    g: new Float32Array(CN), dg: new Float32Array(CN), Gx: new Float32Array(CN), Gy: new Float32Array(CN), set: 0, lamp: -99,\n    w: new Float32Array(N), wt: new Float32Array(N), Mx: new Float32Array(N), My: new Float32Array(N),\n    p: [new Float32Array(N), new Float32Array(N), new Float32Array(N)], dp: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    tile: new Uint8Array(TW * TH), act: new Uint8Array(TW * TH),\n    c: [0, 0, 0], col: [new Float32Array(3), new Float32Array(3)], base: [0, 0, 0],\n    lastKind: 0, lastX: 32, lastY: 64,\n  };\n  freshBase(S);\n  params.s = S;\n}\n\n// Smooth value noise on a grid of cells LEDs, in -1..1, for a w x h field.\nfunction noise(cells, w, h) {\n  const gw = Math.ceil(w / cells) + 2, gh = Math.ceil(h / cells) + 2, g = new Float32Array(gw * gh), out = new Float32Array(w * h);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  for (let y = 0; y \u003c h; y++)\n    for (let x = 0; x \u003c w; x++) {\n      const u = x / cells, v = y / cells, i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n      const su = fu * fu * (3 - 2 * fu), sv = fv * fv * (3 - 2 * fv);\n      const a = g[j * gw + i], b = g[j * gw + i + 1], c = g[(j + 1) * gw + i], d = g[(j + 1) * gw + i + 1];\n      out[y * w + x] = (a + (b - a) * su) * (1 - sv) + (c + (d - c) * su) * sv;\n    }\n  return out;\n}\n\n// A fresh blooming base: clear, and unevenly wet, which is what feathers\n// the blooms. The gel's mobility varies up to sixfold over 6 to 12 LEDs,\n// which bends the fronts into lobes; the pigment's more over 2 to 5 LEDs,\n// which mottles the colour inside a bloom.\nfunction freshBase(S) {\n  const a = noise(3, CW, CH), b = noise(1.5, CW, CH), m = new Float32Array(CN);\n  let mm = 0;\n  for (let i = 0; i \u003c CN; i++) mm = max(mm, (m[i] = exp(0.6 * a[i] + 0.3 * b[i])));\n  S.gmob = mm;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x;\n      S.Gx[i] = x \u003c CW - 1 ? 0.5 * (m[i] + m[i + 1]) : 0;\n      S.Gy[i] = y \u003c CH - 1 ? 0.5 * (m[i] + m[i + CW]) : 0;\n    }\n  const c = noise(2.5, W, H), d = noise(1.2, W, H), f = new Float32Array(N), e = noise(4, W, H);\n  // And how thick the gel must be before pigment can enter, which varies\n  // fourfold or more from LED to LED: that frays the edges.\n  for (let i = 0; i \u003c N; i++) S.wt[i] = WET * exp(1.2 * d[i] + 0.8 * e[i]);\n  for (let i = 0; i \u003c N; i++) f[i] = exp(0.9 * c[i] + 0.5 * d[i]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      S.Mx[i] = x \u003c W - 1 ? 0.5 * (f[i] + f[i + 1]) : 0;\n      S.My[i] = y \u003c H - 1 ? 0.5 * (f[i] + f[i + W]) : 0;\n    }\n  S.g.fill(0);\n  S.w.fill(0);\n  for (let k = 0; k \u003c NK; k++) S.p[k].fill(0);\n  S.set = 0;\n}\n\n// A drop of gel lands: a small dome of gel carrying one pigment.\n// Its outline is a little wavy, four to seven soft lobes.\nfunction drop(S, x0, y0, kind) {\n  const r = 6 + 3 * S.bloom, h0 = 0.5 + 0.25 * S.bloom, R = r * 1.25 + 1;\n  const lobes = 4 + floor(random() * 4), ph = random() * 2 * PI, amp = 0.1 + 0.1 * random();\n  const shape = (dx, dy) => (dx * dx + dy * dy) / (r * r * (1 + amp * sin(lobes * Math.atan2(dy, dx) + ph)) ** 2);\n  for (let y = max(0, floor((y0 - R) / 2)); y \u003c= min(CH - 1, (y0 + R) / 2); y++)\n    for (let x = max(0, floor((x0 - R) / 2)); x \u003c= min(CW - 1, (x0 + R) / 2); x++) {\n      const d2 = shape(2 * x + 1 - x0, 2 * y + 1 - y0);\n      if (d2 \u003c 1) S.g[y * CW + x] += h0 * (1 - d2);\n    }\n  const P = S.p[kind];\n  for (let y = max(0, floor(y0 - R)); y \u003c= min(H - 1, y0 + R); y++)\n    for (let x = max(0, floor(x0 - R)); x \u003c= min(W - 1, x0 + R); x++) {\n      const d2 = shape(x + 0.5 - x0, y + 0.5 - y0);\n      if (d2 \u003c 1) P[y * W + x] += 0.8 * h0 * (1 - d2);\n    }\n  S.lastKind = kind;\n  S.lastX = x0;\n  S.lastY = y0;\n}\n\n// The next drop: near the last one as often as not, so blooms meet, and\n// never the same pigment twice running.\nfunction nextDrop(S) {\n  let x, y;\n  if (random() \u003c 0.5) {\n    const a = random() * 2 * PI, d = 14 + random() * 14;\n    x = S.lastX + d * cos(a);\n    y = S.lastY + d * sin(a) * 1.4;\n  } else {\n    x = 8 + random() * (W - 16);\n    y = 8 + random() * (H - 16);\n  }\n  x = cl(x, 6, W - 6);\n  y = cl(y, 6, H - 6);\n  // After a tint, white one time in three; never white twice.\n  const kind = S.lastKind === 2 ? (random() \u003c 0.5 ? 0 : 1) : random() \u003c 0.67 ? 1 - S.lastKind : 2;\n  drop(S, x, y, kind);\n}\n\n// One explicit step of the gel on its coarse grid: finite volumes, the flux\n// across a face D w (w_j - w_i) / h^2 with w the mean of the two cells.\nfunction gelStep(S, dt, D) {\n  const { g, dg, Gx, Gy } = S, k = (D * dt) / 4;\n  dg.fill(0);\n  for (let y = Math.ceil(S.set / 2); y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x, gi = g[i];\n      if (x \u003c CW - 1) {\n        const gj = g[i + 1];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gx[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + 1] -= q;\n        }\n      }\n      if (y \u003c CH - 1) {\n        const gj = g[i + CW];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gy[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + CW] -= q;\n        }\n      }\n    }\n  const soak = exp(-SOAK * dt), dry = 0.004 * dt;\n  for (let i = 0; i \u003c CN; i++) {\n    const v = (g[i] + dg[i]) * soak - dry;\n    g[i] = v > 0 ? v : 0;\n  }\n}\n\n// The gel's thickness on the LEDs, bilinear from the coarse grid, and which\n// tiles have any.\nfunction upsample(S) {\n  const { g, w, tile } = S;\n  tile.fill(0);\n  for (let y = 0; y \u003c H; y++) {\n    const v = cl(y / 2 - 0.25, 0, CH - 1.0001), j = v | 0, fy = v - j;\n    for (let x = 0; x \u003c W; x++) {\n      const u = cl(x / 2 - 0.25, 0, CW - 1.0001), i = u | 0, fx = u - i, q = j * CW + i;\n      const val = (g[q] * (1 - fx) + g[q + 1] * fx) * (1 - fy) + (g[q + CW] * (1 - fx) + g[q + CW + 1] * fx) * fy;\n      w[y * W + x] = val;\n      if (val > WET) tile[((y / TS) | 0) * TW + ((x / TS) | 0)] = 1;\n    }\n  }\n}\n\n// One explicit step of the pigment over the wet tiles. In the body of a\n// bloom it goes with the gel, at the gel's mean velocity -D grad w; where the\n// gel thins toward its front it rides the surface, up to beta = 3.5 + 5.5 Rim\n// times as fast, so it runs ahead to the front and piles up there, since it\n// can only go where there is gel. Within the gel it spreads a little.\nfunction pigmentStep(S, dt, D, beta) {\n  const { w, wt, Mx, My, p, dp, tile, act } = S;\n  act.fill(0);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0; tx \u003c TW; tx++)\n      if (tile[ty * TW + tx])\n        for (let j = max(0, ty - 1); j \u003c= min(TH - 1, ty + 1); j++) for (let i = max(0, tx - 1); i \u003c= min(TW - 1, tx + 1); i++) act[j * TW + i] = 1;\n  const p0 = p[0], p1 = p[1], p2 = p[2], d0 = dp[0], d1 = dp[1], d2 = dp[2];\n  const kap = 1.2 * dt, edge = 0.03 + 0.05 * S.rim;\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++) {\n      const r = y * W;\n      d0.fill(0, r + x0, r + x0 + TS);\n      d1.fill(0, r + x0, r + x0 + TS);\n      d2.fill(0, r + x0, r + x0 + TS);\n    }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = max(y0, Math.ceil(S.set)); y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x, wi = w[i];\n        for (let f = 0; f \u003c 2; f++) {\n          if (f === 0 ? x === W - 1 : y === H - 1) continue;\n          const j = f === 0 ? i + 1 : i + W, wj = w[j];\n          if (wi \u003c WET && wj \u003c WET) continue;\n          if (p0[i] + p1[i] + p2[i] + p0[j] + p1[j] + p2[j] \u003c 1e-4) continue;\n          const m = f === 0 ? Mx[i] : My[i];\n          // Upwind: the pigment of the LED the gel leaves. The surface's lead\n          // fades in below a gel thickness of about edge.\n          const wf = 0.5 * (wi + wj);\n          let v = -dt * D * (1 + (beta - 1) * (edge / (wf + edge))) * m * (wj - wi);\n          v = v > 0.2 ? 0.2 : v \u003c -0.2 ? -0.2 : v;\n          let a0 = 0, a1 = 0, a2 = 0;\n          if (v > 0 && wj > wt[j]) (a0 = v * p0[i]), (a1 = v * p1[i]), (a2 = v * p2[i]);\n          else if (v \u003c 0 && wi > wt[i]) (a0 = v * p0[j]), (a1 = v * p1[j]), (a2 = v * p2[j]);\n          if (wi > wt[i] && wj > wt[j]) {\n            const k = kap * m \u003c 0.04 ? kap * m : 0.04;\n            a0 -= k * (p0[j] - p0[i]);\n            a1 -= k * (p1[j] - p1[i]);\n            a2 -= k * (p2[j] - p2[i]);\n          }\n          d0[i] -= a0;\n          d0[j] += a0;\n          d1[i] -= a1;\n          d1[j] += a1;\n          d2[i] -= a2;\n          d2[j] += a2;\n        }\n      }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x;\n        p0[i] += d0[i];\n        p1[i] += d1[i];\n        p2[i] += d2[i];\n      }\n  }\n}\n\nfunction advance(S, dt) {\n  const t0 = S.t % ROUND;\n  S.t += dt;\n  const t1 = S.t % ROUND;\n  const D = 150 + 150 * S.bloom, beta = 3.5 + 5.5 * S.rim;\n  if (t1 \u003c t0) {\n    freshBase(S);\n    S.next = 0.2;\n  }\n  // Drops while painting.\n  if (t1 \u003c PAINT) {\n    S.next -= dt;\n    if (S.next \u003c= 0) {\n      S.next = 0.35 + 0.45 * random();\n      nextDrop(S);\n    }\n  }\n  // The cure lamp passes down the panel and sets each row it has passed: the\n  // gel and its pigment stop moving there.\n  S.lamp = t1 >= CURE && t1 \u003c HOLD + 0.2 ? ((t1 - CURE) / (HOLD - CURE)) * (H + 20) - 10 : -99;\n  if (S.lamp > -99) S.set = max(S.set, cl(S.lamp, 0, H));\n  // The wipe pushes the colour down ahead of it and lifts it off.\n  if (t1 >= WIPE) {\n    const row = ((t1 - WIPE) / (ROUND - WIPE)) * (H + 24) - 12;\n    for (let y = H - 1; y >= 0; y--) {\n      const f = cl((row - y) / 10, 0, 1);\n      if (f \u003c= 0) continue;\n      for (let k = 0; k \u003c NK; k++) {\n        const P = S.p[k];\n        for (let x = 0; x \u003c W; x++) {\n          const i = y * W + x, v = P[i] * f * 0.3;\n          P[i] -= v + 0.25 * f * P[i];\n          if (y \u003c H - 1) P[i + W] += v;\n        }\n      }\n    }\n  }\n  // The gel in explicit steps short enough to hold steady, at most twelve\n  // a frame: for the moment a fresh drop is thickest, nail time runs a\n  // little slow rather than the sums running away.\n  let gm = 0;\n  for (let i = 0; i \u003c CN; i++) if (S.g[i] > gm) gm = S.g[i];\n  if (gm \u003c= 0) {\n    S.w.fill(0);\n    return;\n  }\n  const lim = 0.8 / (D * S.gmob * gm), n = min(12, Math.ceil(dt / lim)), h = min(dt / n, lim);\n  for (let s = 0; s \u003c n; s++) gelStep(S, h, D);\n  upsample(S);\n  // The pigment in one or two steps. No face passes on more than 0.24 of a\n  // LED's pigment in one, so even a LED emptying through all four faces\n  // keeps a little and none goes below zero.\n  const m = dt > 0.04 ? 2 : 1;\n  for (let s = 0; s \u003c m; s++) pigmentStep(S, (n * h) / m, D, beta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bloom = cl(k[2], 0, 1);\n  S.rim = cl(k[3], 0, 1);\n  if (S.first) {\n    // Open with three drops already landing, spread down the panel.\n    for (let n = 0; n \u003c 3; n++) drop(S, 18 + 28 * random(), 22 + 40 * n + 12 * random(), n);\n    S.first = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Once the lamp has started, a new drop needs a fresh base first.\n    if (S.t % ROUND >= CURE) {\n      S.t = (floor(S.t / ROUND) + 1) * ROUND;\n      freshBase(S);\n      S.next = 0.6;\n    }\n    nextDrop(S);\n  }\n  advance(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { w, p, col, base, c } = S;\n  // Colours: a milky base, two tints round the hue, white. Each tint is a\n  // pigment that takes light away as exp(-a p) (Beer-Lambert), its strength\n  // a set so a full drop shows the tint.\n  // From orange to lime a pale base reads khaki, so there it is paler still.\n  const h = S.hue + 0.66, hb = h + 0.04 - floor(h + 0.04), warm = sm(0.02, 0.07, hb) * (1 - sm(0.3, 0.38, hb));\n  hsv(h + 0.04, 0.2 - 0.08 * warm, 0.85 + 0.08 * warm, base);\n  // The tints: a deep one on the hue and a lighter one 0.1 round from it.\n  // Round orange and yellow both are lifted to near full, so a thick rim\n  // deepens toward red or orange instead of going brown or olive.\n  for (let k = 0; k \u003c 2; k++) {\n    const ht = h + 0.1 * k, hk = ht - floor(ht), wk = sm(0.0, 0.05, hk) * (1 - sm(0.28, 0.36, hk));\n    hsv(ht, k ? 0.7 : 0.88, (k ? 0.76 : 0.58) + (k ? 0.18 : 0.34) * wk, c);\n    for (let ch = 0; ch \u003c 3; ch++) col[k][ch] = max(0, -Math.log(max(c[ch], 0.03) / base[ch]) / 0.15);\n  }\n  const p0 = p[0], p1 = p[1], p2 = p[2], lb = S.lamp > -99 ? 1 : 0, sh = ((S.t % ROUND) - CURE) * 40 - 30;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, a = p0[i], b = p1[i], wh = 1 - exp(-8 * p2[i]);\n      let r = base[0] * exp(-col[0][0] * a - col[1][0] * b);\n      let g = base[1] * exp(-col[0][1] * a - col[1][1] * b);\n      let bl = base[2] * exp(-col[0][2] * a - col[1][2] * b);\n      r += (0.97 - r) * wh;\n      g += (0.97 - g) * wh;\n      bl += (0.97 - bl) * wh;\n      // Wet gel shines: a highlight from the slope of its surface.\n      const wi = w[i];\n      if (wi > 0) {\n        const gx = (x \u003c W - 1 ? w[i + 1] : wi) - (x > 0 ? w[i - 1] : wi), gy = (y \u003c H - 1 ? w[i + W] : wi) - (y > 0 ? w[i - W] : wi);\n        const nx = -gx * 14, ny = -gy * 14, nn = 1 / sqrt(1 + nx * nx + ny * ny);\n        const sp = (nx * -0.3 + ny * -0.45 + 0.84) * nn, s4 = sp * sp, s8 = s4 * s4, s16 = s8 * s8;\n        const gl = 0.45 * s16 * min(1, wi * 12);\n        r += gl;\n        g += gl;\n        bl += gl;\n      }\n      // The cure lamp's band, and the set coat's sheen behind it.\n      if (lb > 0) {\n        const q = (y - S.lamp) / 4, b2 = exp(-q * q) * lb;\n        r += 0.42 * b2;\n        g += 0.36 * b2;\n        bl += 0.5 * b2;\n      }\n      if (y \u003c S.set) {\n        const q = (x * 0.5 + y - sh) / 9, b3 = 0.1 * exp(-q * q);\n        r += b3;\n        g += b3;\n        bl += b3;\n      }\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","layer":{"id":"layer-blooming-gel","type":"code","name":"blooming-gel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Blooming Gel\n// Family:  cosmetic\n// Idea:    Drops of tinted gel polish land one by one on a wet blooming base and spread into soft flowers with feathered edges, their pigment swept ahead of the spreading gel into a deeper rim like a watercolour back-run, until a cure lamp passes down the panel and sets the design and the nail is wiped for a fresh base.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after blooming gel nail art, with the drop's gel spreading by the porous medium equation and its Barenblatt fronts (G. I. Barenblatt, 1952) and its pigment run ahead to the front like a watercolour back-run\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1\n//\n// Knob 1: Hue. Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream.\n// Knob 2: Speed. The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Bloom. How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other.\n// Knob 4: Rim. How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring.\n// Buttons: K1 tap lands a drop now; once the cure lamp has started, the nail is wiped to a fresh base first.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, exp, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The gel lives on a coarse grid of CW x CH cells, 2 LEDs each; its\n// pigment on the LEDs themselves.\nconst CW = W / 2, CH = H / 2, CN = CW * CH;\n// Tiles of 8 x 8 LEDs: only the wet ones and their neighbours are worked.\nconst TS = 8, TW = W / TS, TH = H / TS;\n// Pigments: two tints and white.\nconst NK = 3;\n// The drop's gel spreads as w_t = div(D w grad w), the porous medium\n// equation, whose fronts move at a finite speed; D in LED^2 a second at\n// Speed 2. The gel soaks into the base, losing SOAK of itself a second, and\n// pigment moves only where the gel is thicker than WET.\nconst SOAK = 0.06, WET = 0.006;\n// One painting round in seconds of nail time: drops land until PAINT, the\n// cure lamp passes from CURE to HOLD, the design rests, and the wipe runs\n// from WIPE to ROUND.\nconst PAINT = 6.2, CURE = 6.5, HOLD = 7.9, WIPE = 9.1, ROUND = 10.3;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, bloom: 0, rim: 0.06, t: 0, next: 0, first: true, gmob: 1,\n    g: new Float32Array(CN), dg: new Float32Array(CN), Gx: new Float32Array(CN), Gy: new Float32Array(CN), set: 0, lamp: -99,\n    w: new Float32Array(N), wt: new Float32Array(N), Mx: new Float32Array(N), My: new Float32Array(N),\n    p: [new Float32Array(N), new Float32Array(N), new Float32Array(N)], dp: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    tile: new Uint8Array(TW * TH), act: new Uint8Array(TW * TH),\n    c: [0, 0, 0], col: [new Float32Array(3), new Float32Array(3)], base: [0, 0, 0],\n    lastKind: 0, lastX: 32, lastY: 64,\n  };\n  freshBase(S);\n  params.s = S;\n}\n\n// Smooth value noise on a grid of cells LEDs, in -1..1, for a w x h field.\nfunction noise(cells, w, h) {\n  const gw = Math.ceil(w / cells) + 2, gh = Math.ceil(h / cells) + 2, g = new Float32Array(gw * gh), out = new Float32Array(w * h);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  for (let y = 0; y \u003c h; y++)\n    for (let x = 0; x \u003c w; x++) {\n      const u = x / cells, v = y / cells, i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n      const su = fu * fu * (3 - 2 * fu), sv = fv * fv * (3 - 2 * fv);\n      const a = g[j * gw + i], b = g[j * gw + i + 1], c = g[(j + 1) * gw + i], d = g[(j + 1) * gw + i + 1];\n      out[y * w + x] = (a + (b - a) * su) * (1 - sv) + (c + (d - c) * su) * sv;\n    }\n  return out;\n}\n\n// A fresh blooming base: clear, and unevenly wet, which is what feathers\n// the blooms. The gel's mobility varies up to sixfold over 6 to 12 LEDs,\n// which bends the fronts into lobes; the pigment's more over 2 to 5 LEDs,\n// which mottles the colour inside a bloom.\nfunction freshBase(S) {\n  const a = noise(3, CW, CH), b = noise(1.5, CW, CH), m = new Float32Array(CN);\n  let mm = 0;\n  for (let i = 0; i \u003c CN; i++) mm = max(mm, (m[i] = exp(0.6 * a[i] + 0.3 * b[i])));\n  S.gmob = mm;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x;\n      S.Gx[i] = x \u003c CW - 1 ? 0.5 * (m[i] + m[i + 1]) : 0;\n      S.Gy[i] = y \u003c CH - 1 ? 0.5 * (m[i] + m[i + CW]) : 0;\n    }\n  const c = noise(2.5, W, H), d = noise(1.2, W, H), f = new Float32Array(N), e = noise(4, W, H);\n  // And how thick the gel must be before pigment can enter, which varies\n  // fourfold or more from LED to LED: that frays the edges.\n  for (let i = 0; i \u003c N; i++) S.wt[i] = WET * exp(1.2 * d[i] + 0.8 * e[i]);\n  for (let i = 0; i \u003c N; i++) f[i] = exp(0.9 * c[i] + 0.5 * d[i]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      S.Mx[i] = x \u003c W - 1 ? 0.5 * (f[i] + f[i + 1]) : 0;\n      S.My[i] = y \u003c H - 1 ? 0.5 * (f[i] + f[i + W]) : 0;\n    }\n  S.g.fill(0);\n  S.w.fill(0);\n  for (let k = 0; k \u003c NK; k++) S.p[k].fill(0);\n  S.set = 0;\n}\n\n// A drop of gel lands: a small dome of gel carrying one pigment.\n// Its outline is a little wavy, four to seven soft lobes.\nfunction drop(S, x0, y0, kind) {\n  const r = 6 + 3 * S.bloom, h0 = 0.5 + 0.25 * S.bloom, R = r * 1.25 + 1;\n  const lobes = 4 + floor(random() * 4), ph = random() * 2 * PI, amp = 0.1 + 0.1 * random();\n  const shape = (dx, dy) => (dx * dx + dy * dy) / (r * r * (1 + amp * sin(lobes * Math.atan2(dy, dx) + ph)) ** 2);\n  for (let y = max(0, floor((y0 - R) / 2)); y \u003c= min(CH - 1, (y0 + R) / 2); y++)\n    for (let x = max(0, floor((x0 - R) / 2)); x \u003c= min(CW - 1, (x0 + R) / 2); x++) {\n      const d2 = shape(2 * x + 1 - x0, 2 * y + 1 - y0);\n      if (d2 \u003c 1) S.g[y * CW + x] += h0 * (1 - d2);\n    }\n  const P = S.p[kind];\n  for (let y = max(0, floor(y0 - R)); y \u003c= min(H - 1, y0 + R); y++)\n    for (let x = max(0, floor(x0 - R)); x \u003c= min(W - 1, x0 + R); x++) {\n      const d2 = shape(x + 0.5 - x0, y + 0.5 - y0);\n      if (d2 \u003c 1) P[y * W + x] += 0.8 * h0 * (1 - d2);\n    }\n  S.lastKind = kind;\n  S.lastX = x0;\n  S.lastY = y0;\n}\n\n// The next drop: near the last one as often as not, so blooms meet, and\n// never the same pigment twice running.\nfunction nextDrop(S) {\n  let x, y;\n  if (random() \u003c 0.5) {\n    const a = random() * 2 * PI, d = 14 + random() * 14;\n    x = S.lastX + d * cos(a);\n    y = S.lastY + d * sin(a) * 1.4;\n  } else {\n    x = 8 + random() * (W - 16);\n    y = 8 + random() * (H - 16);\n  }\n  x = cl(x, 6, W - 6);\n  y = cl(y, 6, H - 6);\n  // After a tint, white one time in three; never white twice.\n  const kind = S.lastKind === 2 ? (random() \u003c 0.5 ? 0 : 1) : random() \u003c 0.67 ? 1 - S.lastKind : 2;\n  drop(S, x, y, kind);\n}\n\n// One explicit step of the gel on its coarse grid: finite volumes, the flux\n// across a face D w (w_j - w_i) / h^2 with w the mean of the two cells.\nfunction gelStep(S, dt, D) {\n  const { g, dg, Gx, Gy } = S, k = (D * dt) / 4;\n  dg.fill(0);\n  for (let y = Math.ceil(S.set / 2); y \u003c CH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const i = y * CW + x, gi = g[i];\n      if (x \u003c CW - 1) {\n        const gj = g[i + 1];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gx[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + 1] -= q;\n        }\n      }\n      if (y \u003c CH - 1) {\n        const gj = g[i + CW];\n        if (gi > 0 || gj > 0) {\n          const q = k * Gy[i] * 0.5 * (gi + gj) * (gj - gi);\n          dg[i] += q;\n          dg[i + CW] -= q;\n        }\n      }\n    }\n  const soak = exp(-SOAK * dt), dry = 0.004 * dt;\n  for (let i = 0; i \u003c CN; i++) {\n    const v = (g[i] + dg[i]) * soak - dry;\n    g[i] = v > 0 ? v : 0;\n  }\n}\n\n// The gel's thickness on the LEDs, bilinear from the coarse grid, and which\n// tiles have any.\nfunction upsample(S) {\n  const { g, w, tile } = S;\n  tile.fill(0);\n  for (let y = 0; y \u003c H; y++) {\n    const v = cl(y / 2 - 0.25, 0, CH - 1.0001), j = v | 0, fy = v - j;\n    for (let x = 0; x \u003c W; x++) {\n      const u = cl(x / 2 - 0.25, 0, CW - 1.0001), i = u | 0, fx = u - i, q = j * CW + i;\n      const val = (g[q] * (1 - fx) + g[q + 1] * fx) * (1 - fy) + (g[q + CW] * (1 - fx) + g[q + CW + 1] * fx) * fy;\n      w[y * W + x] = val;\n      if (val > WET) tile[((y / TS) | 0) * TW + ((x / TS) | 0)] = 1;\n    }\n  }\n}\n\n// One explicit step of the pigment over the wet tiles. In the body of a\n// bloom it goes with the gel, at the gel's mean velocity -D grad w; where the\n// gel thins toward its front it rides the surface, up to beta = 3.5 + 5.5 Rim\n// times as fast, so it runs ahead to the front and piles up there, since it\n// can only go where there is gel. Within the gel it spreads a little.\nfunction pigmentStep(S, dt, D, beta) {\n  const { w, wt, Mx, My, p, dp, tile, act } = S;\n  act.fill(0);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0; tx \u003c TW; tx++)\n      if (tile[ty * TW + tx])\n        for (let j = max(0, ty - 1); j \u003c= min(TH - 1, ty + 1); j++) for (let i = max(0, tx - 1); i \u003c= min(TW - 1, tx + 1); i++) act[j * TW + i] = 1;\n  const p0 = p[0], p1 = p[1], p2 = p[2], d0 = dp[0], d1 = dp[1], d2 = dp[2];\n  const kap = 1.2 * dt, edge = 0.03 + 0.05 * S.rim;\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++) {\n      const r = y * W;\n      d0.fill(0, r + x0, r + x0 + TS);\n      d1.fill(0, r + x0, r + x0 + TS);\n      d2.fill(0, r + x0, r + x0 + TS);\n    }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = max(y0, Math.ceil(S.set)); y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x, wi = w[i];\n        for (let f = 0; f \u003c 2; f++) {\n          if (f === 0 ? x === W - 1 : y === H - 1) continue;\n          const j = f === 0 ? i + 1 : i + W, wj = w[j];\n          if (wi \u003c WET && wj \u003c WET) continue;\n          if (p0[i] + p1[i] + p2[i] + p0[j] + p1[j] + p2[j] \u003c 1e-4) continue;\n          const m = f === 0 ? Mx[i] : My[i];\n          // Upwind: the pigment of the LED the gel leaves. The surface's lead\n          // fades in below a gel thickness of about edge.\n          const wf = 0.5 * (wi + wj);\n          let v = -dt * D * (1 + (beta - 1) * (edge / (wf + edge))) * m * (wj - wi);\n          v = v > 0.2 ? 0.2 : v \u003c -0.2 ? -0.2 : v;\n          let a0 = 0, a1 = 0, a2 = 0;\n          if (v > 0 && wj > wt[j]) (a0 = v * p0[i]), (a1 = v * p1[i]), (a2 = v * p2[i]);\n          else if (v \u003c 0 && wi > wt[i]) (a0 = v * p0[j]), (a1 = v * p1[j]), (a2 = v * p2[j]);\n          if (wi > wt[i] && wj > wt[j]) {\n            const k = kap * m \u003c 0.04 ? kap * m : 0.04;\n            a0 -= k * (p0[j] - p0[i]);\n            a1 -= k * (p1[j] - p1[i]);\n            a2 -= k * (p2[j] - p2[i]);\n          }\n          d0[i] -= a0;\n          d0[j] += a0;\n          d1[i] -= a1;\n          d1[j] += a1;\n          d2[i] -= a2;\n          d2[j] += a2;\n        }\n      }\n  }\n  for (let t = 0; t \u003c TW * TH; t++) {\n    if (!act[t]) continue;\n    const x0 = (t % TW) * TS, y0 = ((t / TW) | 0) * TS;\n    for (let y = y0; y \u003c y0 + TS; y++)\n      for (let x = x0; x \u003c x0 + TS; x++) {\n        const i = y * W + x;\n        p0[i] += d0[i];\n        p1[i] += d1[i];\n        p2[i] += d2[i];\n      }\n  }\n}\n\nfunction advance(S, dt) {\n  const t0 = S.t % ROUND;\n  S.t += dt;\n  const t1 = S.t % ROUND;\n  const D = 150 + 150 * S.bloom, beta = 3.5 + 5.5 * S.rim;\n  if (t1 \u003c t0) {\n    freshBase(S);\n    S.next = 0.2;\n  }\n  // Drops while painting.\n  if (t1 \u003c PAINT) {\n    S.next -= dt;\n    if (S.next \u003c= 0) {\n      S.next = 0.35 + 0.45 * random();\n      nextDrop(S);\n    }\n  }\n  // The cure lamp passes down the panel and sets each row it has passed: the\n  // gel and its pigment stop moving there.\n  S.lamp = t1 >= CURE && t1 \u003c HOLD + 0.2 ? ((t1 - CURE) / (HOLD - CURE)) * (H + 20) - 10 : -99;\n  if (S.lamp > -99) S.set = max(S.set, cl(S.lamp, 0, H));\n  // The wipe pushes the colour down ahead of it and lifts it off.\n  if (t1 >= WIPE) {\n    const row = ((t1 - WIPE) / (ROUND - WIPE)) * (H + 24) - 12;\n    for (let y = H - 1; y >= 0; y--) {\n      const f = cl((row - y) / 10, 0, 1);\n      if (f \u003c= 0) continue;\n      for (let k = 0; k \u003c NK; k++) {\n        const P = S.p[k];\n        for (let x = 0; x \u003c W; x++) {\n          const i = y * W + x, v = P[i] * f * 0.3;\n          P[i] -= v + 0.25 * f * P[i];\n          if (y \u003c H - 1) P[i + W] += v;\n        }\n      }\n    }\n  }\n  // The gel in explicit steps short enough to hold steady, at most twelve\n  // a frame: for the moment a fresh drop is thickest, nail time runs a\n  // little slow rather than the sums running away.\n  let gm = 0;\n  for (let i = 0; i \u003c CN; i++) if (S.g[i] > gm) gm = S.g[i];\n  if (gm \u003c= 0) {\n    S.w.fill(0);\n    return;\n  }\n  const lim = 0.8 / (D * S.gmob * gm), n = min(12, Math.ceil(dt / lim)), h = min(dt / n, lim);\n  for (let s = 0; s \u003c n; s++) gelStep(S, h, D);\n  upsample(S);\n  // The pigment in one or two steps. No face passes on more than 0.24 of a\n  // LED's pigment in one, so even a LED emptying through all four faces\n  // keeps a little and none goes below zero.\n  const m = dt > 0.04 ? 2 : 1;\n  for (let s = 0; s \u003c m; s++) pigmentStep(S, (n * h) / m, D, beta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bloom = cl(k[2], 0, 1);\n  S.rim = cl(k[3], 0, 1);\n  if (S.first) {\n    // Open with three drops already landing, spread down the panel.\n    for (let n = 0; n \u003c 3; n++) drop(S, 18 + 28 * random(), 22 + 40 * n + 12 * random(), n);\n    S.first = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Once the lamp has started, a new drop needs a fresh base first.\n    if (S.t % ROUND >= CURE) {\n      S.t = (floor(S.t / ROUND) + 1) * ROUND;\n      freshBase(S);\n      S.next = 0.6;\n    }\n    nextDrop(S);\n  }\n  advance(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { w, p, col, base, c } = S;\n  // Colours: a milky base, two tints round the hue, white. Each tint is a\n  // pigment that takes light away as exp(-a p) (Beer-Lambert), its strength\n  // a set so a full drop shows the tint.\n  // From orange to lime a pale base reads khaki, so there it is paler still.\n  const h = S.hue + 0.66, hb = h + 0.04 - floor(h + 0.04), warm = sm(0.02, 0.07, hb) * (1 - sm(0.3, 0.38, hb));\n  hsv(h + 0.04, 0.2 - 0.08 * warm, 0.85 + 0.08 * warm, base);\n  // The tints: a deep one on the hue and a lighter one 0.1 round from it.\n  // Round orange and yellow both are lifted to near full, so a thick rim\n  // deepens toward red or orange instead of going brown or olive.\n  for (let k = 0; k \u003c 2; k++) {\n    const ht = h + 0.1 * k, hk = ht - floor(ht), wk = sm(0.0, 0.05, hk) * (1 - sm(0.28, 0.36, hk));\n    hsv(ht, k ? 0.7 : 0.88, (k ? 0.76 : 0.58) + (k ? 0.18 : 0.34) * wk, c);\n    for (let ch = 0; ch \u003c 3; ch++) col[k][ch] = max(0, -Math.log(max(c[ch], 0.03) / base[ch]) / 0.15);\n  }\n  const p0 = p[0], p1 = p[1], p2 = p[2], lb = S.lamp > -99 ? 1 : 0, sh = ((S.t % ROUND) - CURE) * 40 - 30;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, a = p0[i], b = p1[i], wh = 1 - exp(-8 * p2[i]);\n      let r = base[0] * exp(-col[0][0] * a - col[1][0] * b);\n      let g = base[1] * exp(-col[0][1] * a - col[1][1] * b);\n      let bl = base[2] * exp(-col[0][2] * a - col[1][2] * b);\n      r += (0.97 - r) * wh;\n      g += (0.97 - g) * wh;\n      bl += (0.97 - bl) * wh;\n      // Wet gel shines: a highlight from the slope of its surface.\n      const wi = w[i];\n      if (wi > 0) {\n        const gx = (x \u003c W - 1 ? w[i + 1] : wi) - (x > 0 ? w[i - 1] : wi), gy = (y \u003c H - 1 ? w[i + W] : wi) - (y > 0 ? w[i - W] : wi);\n        const nx = -gx * 14, ny = -gy * 14, nn = 1 / sqrt(1 + nx * nx + ny * ny);\n        const sp = (nx * -0.3 + ny * -0.45 + 0.84) * nn, s4 = sp * sp, s8 = s4 * s4, s16 = s8 * s8;\n        const gl = 0.45 * s16 * min(1, wi * 12);\n        r += gl;\n        g += gl;\n        bl += gl;\n      }\n      // The cure lamp's band, and the set coat's sheen behind it.\n      if (lb > 0) {\n        const q = (y - S.lamp) / 4, b2 = exp(-q * q) * lb;\n        r += 0.42 * b2;\n        g += 0.36 * b2;\n        bl += 0.5 * b2;\n      }\n      if (y \u003c S.set) {\n        const q = (x * 0.5 + y - sh) / 9, b3 = 0.1 * exp(-q * q);\n        r += b3;\n        g += b3;\n        bl += b3;\n      }\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bloom=0..1, Rim=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the base and both tints once round the wheel; white stays white. At 0 cobalt and lilac drops on a pale lilac base; at 0.1 violet and orchid; at 0.25 raspberry and coral on rose; at 0.35 brick red and peach; at 0.42 orange and yellow on cream; at 0.5 yellow and lime; at 0.6 lime and green; at 0.75 jade and aqua on mint; at 0.9 azure and cobalt. From orange to lime the tints stay near full brightness, so a thick rim deepens toward red or orange instead of going brown or olive, and the base pales to cream."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 a drop lands every 0.35 to 0.8 seconds for 6.2 seconds, the cure lamp passes down the panel in 1.4 seconds, the design rests 1.2 seconds and the wipe takes 1.2, a round every 10.3 seconds; at 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Bloom","min":0,"max":1,"about":"How big a drop is and how freely its gel spreads. At 0 a drop 12 LEDs across blooms to about 25 across in two seconds; at 0.5 one 15 across blooms to 34; at 1 one 18 across blooms to 38, and the blooms crowd into each other."},{"name":"Rim","min":0,"max":1,"about":"How far ahead of the gel the pigment runs where the gel thins toward its front. At 0 the outer 4 LEDs of a bloom hold about 1.7 times the pigment of its middle, a soft deeper edge; at 0.06 about twice; at 0.5 about ten times; at 1 some seventy times, nearly all of it in a dark ring with the middle gone pale, a coffee ring."}],"start":[0,2,0,0.06],"measures":{"motion":0.0712,"detail":0.0141,"edges":0.1484,"complexity":1.601,"coverage":1,"colour":0.1697,"drift":0.0438},"knobResponse":[0.2098,0.0709,0.1051,0.0332]},{"slug":"blotting-paper","title":"Blotting Paper","family":"cosmetic","round":39,"note":"결이 비치는 얇은 기름종이가 살에 눌린 자리마다 피지를 빨아들여, 반투명한 점이 결을 따라 √t 로 번지고 합쳐져요. 젖은 자리는 뒤 벽의 빛이 비쳐 밝고 짙은 색이 되고, LED 마다 한 번만 밝아져요. 종이가 거의 다 비치면 새 종이가 내려와 덮어요.","idea":"A thin tinted sheet of oil-blotting paper with its fibres showing hangs in front of a lit wall and, pressed to skin we never see, takes up oil where each pore touches it: translucent spots open with a deeper rim at their wet edge and widen with the square root of time, running a little ahead along the fibres and into one another, and wherever the paper has gone clear the wall shines through brighter and deeper in tint, until most of the sheet glows, holds, and a fresh sheet slides down over it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Blotting Paper\n// Family:  cosmetic\n// Idea:    A thin tinted sheet of oil-blotting paper with its fibres showing hangs in front of a lit wall and, pressed to skin we never see, takes up oil where each pore touches it: translucent spots open with a deeper rim at their wet edge and widen with the square root of time, running a little ahead along the fibres and into one another, and wherever the paper has gone clear the wall shines through brighter and deeper in tint, until most of the sheet glows, holds, and a fresh sheet slides down over it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after oil-blotting paper pressed to the skin, going translucent where the sebum wicks into its fibres (Lucas-Washburn wicking: Richard Lucas, 1918; Edward Washburn, 1921)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pores=20..80, Grain=0..1\n//\n// Knob 1: Hue. Turns the paper's tint round the whole wheel; the dry paper is a dim pale tint and the clear spots the same hue, deeper. At 0 rose, at 0.05 red, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale yellow, 0.3 lime, 0.4 green, 0.5 aqua, 0.6 sky blue, 0.7 blue, 0.8 violet, 0.9 orchid. From 0.02 to 0.34 the dry paper is lifted up to 1.5 times and paled toward grey and the spots a little paler, so red, orange and yellow paper never reads brown or olive.\n// Knob 2: Speed. At 2 the first pores touch 0.4 s after a sheet is pressed and the last about 6.5 s after; a tenth of the sheet is clear by 2.5 s, half by 6.7 s and nine tenths by 13 s, then it holds 2.5 s and a fresh sheet slides down in 1.4 s, about 16 s a sheet. At 0.2 the wicking is ten times slower, at 3 one and a half times faster; the slide always takes 1.4 s.\n// Knob 3: Pores. How many pores touch the sheet, each later one where the paper is still dry: 20 at the start, whose widest spots reach about 45 LEDs across before they meet, up to 80 at the top, about 24 across. Each spot's radius goes as the square root of its age, and the more pores, the slower each one spreads, so the sheet clears in about the same time.\n// Knob 4: Grain. How far the fibres line up along the panel. Up to 0.06 they lie every which way and the spots stay round; at 1 nearly all run up and down, nearly twice as long, and the oil runs along them two and a half times as fast as across, so the spots stretch into tall ovals and the clear patches join in columns.\n\nconst W = 64, H = 128, N = W * H;\n// Opening tint: rose.\nconst H0 = 0.94;\n// Fibres in a sheet, the width of the wicking front in LEDs, and how far the\n// oil runs ahead along a fibre.\nconst NF = 440, FRONT = 2.6, AHEAD = 1.8;\n// Brightness of the dry and the clear paper over the wall, 0..1.\nconst DRY = 0.24, CLEAR = 1;\n// Sheet seconds at Speed 2: the hold, once 90% of the sheet is clear, and the\n// slide of the next sheet in real seconds.\nconst HOLD = 2.5, SLIDE = 1.4;\n// Sheet seconds for the paper behind the front to soak to its clearest.\nconst SOAK = 2.5;\n// Spreading rate: the area all the spots open together, in LEDs a second.\nconst RATE = 1290, LATE = 6.5;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// A sheet: its fibres, its paper grain and the slow cockle that makes each\n// spot a little uneven. The fibres come from their own generator, so the\n// grain knob changes the fibres and never where the pores touch.\nfunction sheet(seed, grain) {\n  const F = new Float32Array(N), g = new Float32Array(N), r = rng(seed);\n  const spread = 1 - 0.9 * grain;\n  for (let f = 0; f \u003c NF; f++) {\n    const cx = r() * (W + 8) - 4, cy = r() * (H + 8) - 4, len = (4 + 11 * r()) * (1 + 0.8 * grain), a = PI / 2 + spread * (r() - 0.5) * PI, w = 0.35 + 0.65 * r();\n    const dx = cos(a), dy = sin(a), n = Math.ceil(len / 0.5);\n    for (let j = 0; j \u003c= n; j++) {\n      const s = (j / n - 0.5) * len, x = cx + dx * s, y = cy + dy * s, i = floor(x), k = floor(y), fx = x - i, fy = y - k;\n      for (let b = 0; b \u003c 2; b++)\n        for (let c = 0; c \u003c 2; c++) {\n          const xx = i + c, yy = k + b;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          F[yy * W + xx] += 0.5 * w * (c ? fx : 1 - fx) * (b ? fy : 1 - fy);\n        }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    F[p] = min(1, F[p]);\n    g[p] = r() * 2 - 1;\n  }\n  // The cockle roughens the spots' edges; the flocs, clumps of fibres a few\n  // LEDs across, cloud the paper where it has gone clear.\n  const nz = noise(r, 7, 1), fl = noise(r, 9, 0.5);\n  return { F, g, nz, fl, seed };\n}\n\n// Smooth value noise, -1..1, on a grid of cells `cell` LEDs wide, with a\n// second octave of half the size at weight w2.\nfunction noise(r, cell, w2) {\n  const out = new Float32Array(N);\n  for (const [c, w] of [[cell, 1], [cell / 2, w2]]) {\n    const gw = Math.ceil(W / c) + 2, gh = Math.ceil(H / c) + 2, G = new Float32Array(gw * gh);\n    for (let i = 0; i \u003c G.length; i++) G[i] = r() * 2 - 1;\n    for (let y = 0; y \u003c H; y++) {\n      const v = y / c, j = floor(v), fy = (v - j) * (v - j) * (3 - 2 * (v - j));\n      for (let x = 0; x \u003c W; x++) {\n        const u = x / c, i = floor(u), fx = (u - i) * (u - i) * (3 - 2 * (u - i)), a = G[j * gw + i], b = G[j * gw + i + 1], e = G[(j + 1) * gw + i], d = G[(j + 1) * gw + i + 1];\n        out[y * W + x] += (w * (a + (b - a) * fx + (e + (d - e) * fx - a - (b - a) * fx) * fy)) / (1 + w2);\n      }\n    }\n  }\n  return out;\n}\n\n// Where the pores touch: each the best of four tries at standing clear of\n// the ones before it, so the first n are spread out for any n.\nfunction pores(seed) {\n  const r = rng(seed ^ 0x5bd1e995), out = [];\n  for (let i = 0; i \u003c 80; i++) {\n    let best = null, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      const x = r() * (W + 6) - 3, y = r() * (H + 6) - 3;\n      let d = 1e9;\n      for (const o of out) d = min(d, (o.x - x) ** 2 + (o.y - y) ** 2);\n      if (d > bd) {\n        bd = d;\n        best = { x, y };\n      }\n    }\n    // How fast it wicks, and a share of the time it touches.\n    best.k = 0.75 + 0.5 * r();\n    best.r = 0.85 + 0.3 * r();\n    out.push(best);\n  }\n  return out;\n}\n\n// For every LED, the pore whose oil reaches it first: when that spot opened,\n// how fast it spreads and how far the LED is from it. Lucas-Washburn: a spot's\n// radius is k sqrt(t - t0), so the oil reaches distance d at t0 + (d / k)^2.\n// Distance is stretched across the grain, cut short along the fibres and\n// roughened by the cockle.\nfunction wick(S) {\n  const { F, nz } = S.cur, P = S.pores.slice(0, S.n), al = sqrt(1 + 1.5 * S.grain), T0 = S.T0, K = S.K, D = S.D;\n  // The first pores touch 0.4 s after the press and the rest follow over\n  // LATE seconds, each later one where the sheet is still dry.\n  P.forEach((o, i) => (o.t0 = 0.4 + LATE * (i / S.n) ** 1.4 * o.r));\n  // Each pore's k scaled so that n spots together open RATE LEDs a second.\n  let sk = 0;\n  for (const o of P) sk += o.k * o.k;\n  const kk = sqrt(RATE / (PI * sk)), arr = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, rough = 1 + 0.3 * nz[p], ahead = AHEAD * F[p];\n      let bt = 1e9, bi = 0, bd = 0;\n      for (let i = 0; i \u003c P.length; i++) {\n        const o = P[i], dx = (x - o.x) * al, dy = (y - o.y) / al;\n        const d = max(0, sqrt(dx * dx + dy * dy) * rough - ahead), k = o.k * kk, t = o.t0 + (d / k) * (d / k);\n        if (t \u003c bt) {\n          bt = t;\n          bi = i;\n          bd = d;\n        }\n      }\n      T0[p] = P[bi].t0;\n      K[p] = P[bi].k * kk;\n      D[p] = bd;\n      arr[p] = bt;\n    }\n  // The hold starts when nine tenths of the sheet has been reached.\n  arr.sort();\n  S.full = arr[floor(0.9 * N)];\n}\n\nfunction lay(S, seed) {\n  S.cur = sheet(seed, S.grain);\n  S.pores = pores(seed);\n  S.next = sheet(seed + 7919, S.grain);\n  wick(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 20, grain: 0.06, t: 0, phase: 0, slide: 0, seed: floor(Math.random() * 1e9), begun: false,\n    T0: new Float32Array(N), K: new Float32Array(N), D: new Float32Array(N), V: new Float32Array(N), C: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 20, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const n = round(cl(k[2], 20, 80)), grain = cl(k[3], 0, 1);\n  if (!S.begun) {\n    S.n = n;\n    S.grain = grain;\n    lay(S, S.seed);\n    S.begun = true;\n  } else if (abs(grain - S.grain) > 0.01) {\n    S.grain = grain;\n    S.n = n;\n    S.cur = sheet(S.cur.seed, grain);\n    S.next = sheet(S.cur.seed + 7919, grain);\n    wick(S);\n  } else if (n !== S.n) {\n    S.n = n;\n    wick(S);\n  }\n  if (S.phase === 0) {\n    S.t += (d * S.speed) / 2;\n    if (S.t > S.full + HOLD) S.phase = 1;\n  } else {\n    // A fresh sheet slides down over the old one.\n    S.slide += d / SLIDE;\n    if (S.slide >= 1) {\n      S.phase = 0;\n      S.slide = 0;\n      S.t = 0;\n      S.seed = (S.seed + 7919) >>> 0;\n      S.cur = S.next;\n      S.pores = pores(S.seed);\n      S.next = sheet(S.seed + 7919, S.grain);\n      wick(S);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { T0, K, D, V, C } = S, t = S.t, h = S.hue + H0, hh = h - floor(h);\n  const pure = [0, 0, 0];\n  {\n    const x = hh * 6, i = floor(x) % 6, f = x - floor(x);\n    pure[0] = [1, 1 - f, 0, 0, f, 1][i];\n    pure[1] = [f, 1, 1, 1 - f, 0, 0][i];\n    pure[2] = [0, 0, f, 1, 1, 1 - f][i];\n  }\n  // Orange and yellow paper goes brown when dim: there the dry paper is\n  // lifted and paled.\n  const warm = cl(1.6 - abs(hh - 0.12) / 0.1, 0, 1);\n  const dryV = DRY * (1 + 0.5 * warm), dryS = 0.2 - 0.15 * warm, clrS = 0.56 - 0.1 * warm;\n  // Each LED's brightness is its dry level until the oil reaches it and then\n  // rises once, smoothly, to its clear level; nothing else on the sheet moves.\n  const { F, g, fl } = S.cur;\n  for (let y = 0; y \u003c H; y++) {\n    const vy = (y - 63.5) / 92;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vx = (x - 31.5) / 46, wall = 0.84 + 0.16 * (1 - vx * vx - vy * vy);\n      const m = K[p] * sqrt(max(0, t - T0[p])) - D[p], age = t - T0[p] - (D[p] / K[p]) ** 2;\n      let s = cl(m / FRONT + 0.5, 0, 1);\n      s = s * s * (3 - 2 * s);\n      // Behind the front the paper keeps soaking up oil and clears further.\n      const soak = age > 0 ? 1 - exp(-age / SOAK) : 0;\n      const f = F[p], dry = dryV * wall * (1 + 0.5 * (f - 0.25) + 0.05 * g[p] + 0.06 * fl[p]), clr = CLEAR * wall * (1 - 0.17 * f + 0.03 * g[p] + 0.11 * fl[p]);\n      V[p] = dry + (clr - dry) * (0.68 * s + 0.32 * soak);\n      // The wet front carries a deeper rim of tint; it changes the colour,\n      // not the brightness.\n      C[p] = dryS + (clrS - dryS) * s + 1.2 * s * (1 - s);\n    }\n  }\n  const edge = S.phase === 1 ? round(H * (1 - (1 - S.slide) ** 3)) : -1, nf = S.next.F, ng = S.next.g, nl = S.next.fl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = V[p], c = C[p];\n      if (y \u003c edge) {\n        // The fresh sheet, dry, its fibres sliding down with it.\n        const q = (y - edge + H) * W + x, vx = (x - 31.5) / 46, vy = (y - 63.5) / 92;\n        v = dryV * (0.84 + 0.16 * (1 - vx * vx - vy * vy)) * (1 + 0.5 * (nf[q] - 0.25) + 0.05 * ng[q] + 0.06 * nl[q]);\n        c = dryS;\n        if (y === edge - 1) v *= 1.5;\n      } else if (edge >= 0 && y - edge \u003c 3) v *= 0.45 + 0.18 * (y - edge);\n      v = min(1, v);\n      display.setPixel(x, y, round(255 * v * (1 - c + c * pure[0])), round(255 * v * (1 - c + c * pure[1])), round(255 * v * (1 - c + c * pure[2])));\n    }\n}\n","layer":{"id":"layer-blotting-paper","type":"code","name":"blotting-paper","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Blotting Paper\n// Family:  cosmetic\n// Idea:    A thin tinted sheet of oil-blotting paper with its fibres showing hangs in front of a lit wall and, pressed to skin we never see, takes up oil where each pore touches it: translucent spots open with a deeper rim at their wet edge and widen with the square root of time, running a little ahead along the fibres and into one another, and wherever the paper has gone clear the wall shines through brighter and deeper in tint, until most of the sheet glows, holds, and a fresh sheet slides down over it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after oil-blotting paper pressed to the skin, going translucent where the sebum wicks into its fibres (Lucas-Washburn wicking: Richard Lucas, 1918; Edward Washburn, 1921)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pores=20..80, Grain=0..1\n//\n// Knob 1: Hue. Turns the paper's tint round the whole wheel; the dry paper is a dim pale tint and the clear spots the same hue, deeper. At 0 rose, at 0.05 red, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale yellow, 0.3 lime, 0.4 green, 0.5 aqua, 0.6 sky blue, 0.7 blue, 0.8 violet, 0.9 orchid. From 0.02 to 0.34 the dry paper is lifted up to 1.5 times and paled toward grey and the spots a little paler, so red, orange and yellow paper never reads brown or olive.\n// Knob 2: Speed. At 2 the first pores touch 0.4 s after a sheet is pressed and the last about 6.5 s after; a tenth of the sheet is clear by 2.5 s, half by 6.7 s and nine tenths by 13 s, then it holds 2.5 s and a fresh sheet slides down in 1.4 s, about 16 s a sheet. At 0.2 the wicking is ten times slower, at 3 one and a half times faster; the slide always takes 1.4 s.\n// Knob 3: Pores. How many pores touch the sheet, each later one where the paper is still dry: 20 at the start, whose widest spots reach about 45 LEDs across before they meet, up to 80 at the top, about 24 across. Each spot's radius goes as the square root of its age, and the more pores, the slower each one spreads, so the sheet clears in about the same time.\n// Knob 4: Grain. How far the fibres line up along the panel. Up to 0.06 they lie every which way and the spots stay round; at 1 nearly all run up and down, nearly twice as long, and the oil runs along them two and a half times as fast as across, so the spots stretch into tall ovals and the clear patches join in columns.\n\nconst W = 64, H = 128, N = W * H;\n// Opening tint: rose.\nconst H0 = 0.94;\n// Fibres in a sheet, the width of the wicking front in LEDs, and how far the\n// oil runs ahead along a fibre.\nconst NF = 440, FRONT = 2.6, AHEAD = 1.8;\n// Brightness of the dry and the clear paper over the wall, 0..1.\nconst DRY = 0.24, CLEAR = 1;\n// Sheet seconds at Speed 2: the hold, once 90% of the sheet is clear, and the\n// slide of the next sheet in real seconds.\nconst HOLD = 2.5, SLIDE = 1.4;\n// Sheet seconds for the paper behind the front to soak to its clearest.\nconst SOAK = 2.5;\n// Spreading rate: the area all the spots open together, in LEDs a second.\nconst RATE = 1290, LATE = 6.5;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// A sheet: its fibres, its paper grain and the slow cockle that makes each\n// spot a little uneven. The fibres come from their own generator, so the\n// grain knob changes the fibres and never where the pores touch.\nfunction sheet(seed, grain) {\n  const F = new Float32Array(N), g = new Float32Array(N), r = rng(seed);\n  const spread = 1 - 0.9 * grain;\n  for (let f = 0; f \u003c NF; f++) {\n    const cx = r() * (W + 8) - 4, cy = r() * (H + 8) - 4, len = (4 + 11 * r()) * (1 + 0.8 * grain), a = PI / 2 + spread * (r() - 0.5) * PI, w = 0.35 + 0.65 * r();\n    const dx = cos(a), dy = sin(a), n = Math.ceil(len / 0.5);\n    for (let j = 0; j \u003c= n; j++) {\n      const s = (j / n - 0.5) * len, x = cx + dx * s, y = cy + dy * s, i = floor(x), k = floor(y), fx = x - i, fy = y - k;\n      for (let b = 0; b \u003c 2; b++)\n        for (let c = 0; c \u003c 2; c++) {\n          const xx = i + c, yy = k + b;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          F[yy * W + xx] += 0.5 * w * (c ? fx : 1 - fx) * (b ? fy : 1 - fy);\n        }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    F[p] = min(1, F[p]);\n    g[p] = r() * 2 - 1;\n  }\n  // The cockle roughens the spots' edges; the flocs, clumps of fibres a few\n  // LEDs across, cloud the paper where it has gone clear.\n  const nz = noise(r, 7, 1), fl = noise(r, 9, 0.5);\n  return { F, g, nz, fl, seed };\n}\n\n// Smooth value noise, -1..1, on a grid of cells `cell` LEDs wide, with a\n// second octave of half the size at weight w2.\nfunction noise(r, cell, w2) {\n  const out = new Float32Array(N);\n  for (const [c, w] of [[cell, 1], [cell / 2, w2]]) {\n    const gw = Math.ceil(W / c) + 2, gh = Math.ceil(H / c) + 2, G = new Float32Array(gw * gh);\n    for (let i = 0; i \u003c G.length; i++) G[i] = r() * 2 - 1;\n    for (let y = 0; y \u003c H; y++) {\n      const v = y / c, j = floor(v), fy = (v - j) * (v - j) * (3 - 2 * (v - j));\n      for (let x = 0; x \u003c W; x++) {\n        const u = x / c, i = floor(u), fx = (u - i) * (u - i) * (3 - 2 * (u - i)), a = G[j * gw + i], b = G[j * gw + i + 1], e = G[(j + 1) * gw + i], d = G[(j + 1) * gw + i + 1];\n        out[y * W + x] += (w * (a + (b - a) * fx + (e + (d - e) * fx - a - (b - a) * fx) * fy)) / (1 + w2);\n      }\n    }\n  }\n  return out;\n}\n\n// Where the pores touch: each the best of four tries at standing clear of\n// the ones before it, so the first n are spread out for any n.\nfunction pores(seed) {\n  const r = rng(seed ^ 0x5bd1e995), out = [];\n  for (let i = 0; i \u003c 80; i++) {\n    let best = null, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      const x = r() * (W + 6) - 3, y = r() * (H + 6) - 3;\n      let d = 1e9;\n      for (const o of out) d = min(d, (o.x - x) ** 2 + (o.y - y) ** 2);\n      if (d > bd) {\n        bd = d;\n        best = { x, y };\n      }\n    }\n    // How fast it wicks, and a share of the time it touches.\n    best.k = 0.75 + 0.5 * r();\n    best.r = 0.85 + 0.3 * r();\n    out.push(best);\n  }\n  return out;\n}\n\n// For every LED, the pore whose oil reaches it first: when that spot opened,\n// how fast it spreads and how far the LED is from it. Lucas-Washburn: a spot's\n// radius is k sqrt(t - t0), so the oil reaches distance d at t0 + (d / k)^2.\n// Distance is stretched across the grain, cut short along the fibres and\n// roughened by the cockle.\nfunction wick(S) {\n  const { F, nz } = S.cur, P = S.pores.slice(0, S.n), al = sqrt(1 + 1.5 * S.grain), T0 = S.T0, K = S.K, D = S.D;\n  // The first pores touch 0.4 s after the press and the rest follow over\n  // LATE seconds, each later one where the sheet is still dry.\n  P.forEach((o, i) => (o.t0 = 0.4 + LATE * (i / S.n) ** 1.4 * o.r));\n  // Each pore's k scaled so that n spots together open RATE LEDs a second.\n  let sk = 0;\n  for (const o of P) sk += o.k * o.k;\n  const kk = sqrt(RATE / (PI * sk)), arr = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, rough = 1 + 0.3 * nz[p], ahead = AHEAD * F[p];\n      let bt = 1e9, bi = 0, bd = 0;\n      for (let i = 0; i \u003c P.length; i++) {\n        const o = P[i], dx = (x - o.x) * al, dy = (y - o.y) / al;\n        const d = max(0, sqrt(dx * dx + dy * dy) * rough - ahead), k = o.k * kk, t = o.t0 + (d / k) * (d / k);\n        if (t \u003c bt) {\n          bt = t;\n          bi = i;\n          bd = d;\n        }\n      }\n      T0[p] = P[bi].t0;\n      K[p] = P[bi].k * kk;\n      D[p] = bd;\n      arr[p] = bt;\n    }\n  // The hold starts when nine tenths of the sheet has been reached.\n  arr.sort();\n  S.full = arr[floor(0.9 * N)];\n}\n\nfunction lay(S, seed) {\n  S.cur = sheet(seed, S.grain);\n  S.pores = pores(seed);\n  S.next = sheet(seed + 7919, S.grain);\n  wick(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 20, grain: 0.06, t: 0, phase: 0, slide: 0, seed: floor(Math.random() * 1e9), begun: false,\n    T0: new Float32Array(N), K: new Float32Array(N), D: new Float32Array(N), V: new Float32Array(N), C: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 20, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const n = round(cl(k[2], 20, 80)), grain = cl(k[3], 0, 1);\n  if (!S.begun) {\n    S.n = n;\n    S.grain = grain;\n    lay(S, S.seed);\n    S.begun = true;\n  } else if (abs(grain - S.grain) > 0.01) {\n    S.grain = grain;\n    S.n = n;\n    S.cur = sheet(S.cur.seed, grain);\n    S.next = sheet(S.cur.seed + 7919, grain);\n    wick(S);\n  } else if (n !== S.n) {\n    S.n = n;\n    wick(S);\n  }\n  if (S.phase === 0) {\n    S.t += (d * S.speed) / 2;\n    if (S.t > S.full + HOLD) S.phase = 1;\n  } else {\n    // A fresh sheet slides down over the old one.\n    S.slide += d / SLIDE;\n    if (S.slide >= 1) {\n      S.phase = 0;\n      S.slide = 0;\n      S.t = 0;\n      S.seed = (S.seed + 7919) >>> 0;\n      S.cur = S.next;\n      S.pores = pores(S.seed);\n      S.next = sheet(S.seed + 7919, S.grain);\n      wick(S);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { T0, K, D, V, C } = S, t = S.t, h = S.hue + H0, hh = h - floor(h);\n  const pure = [0, 0, 0];\n  {\n    const x = hh * 6, i = floor(x) % 6, f = x - floor(x);\n    pure[0] = [1, 1 - f, 0, 0, f, 1][i];\n    pure[1] = [f, 1, 1, 1 - f, 0, 0][i];\n    pure[2] = [0, 0, f, 1, 1, 1 - f][i];\n  }\n  // Orange and yellow paper goes brown when dim: there the dry paper is\n  // lifted and paled.\n  const warm = cl(1.6 - abs(hh - 0.12) / 0.1, 0, 1);\n  const dryV = DRY * (1 + 0.5 * warm), dryS = 0.2 - 0.15 * warm, clrS = 0.56 - 0.1 * warm;\n  // Each LED's brightness is its dry level until the oil reaches it and then\n  // rises once, smoothly, to its clear level; nothing else on the sheet moves.\n  const { F, g, fl } = S.cur;\n  for (let y = 0; y \u003c H; y++) {\n    const vy = (y - 63.5) / 92;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vx = (x - 31.5) / 46, wall = 0.84 + 0.16 * (1 - vx * vx - vy * vy);\n      const m = K[p] * sqrt(max(0, t - T0[p])) - D[p], age = t - T0[p] - (D[p] / K[p]) ** 2;\n      let s = cl(m / FRONT + 0.5, 0, 1);\n      s = s * s * (3 - 2 * s);\n      // Behind the front the paper keeps soaking up oil and clears further.\n      const soak = age > 0 ? 1 - exp(-age / SOAK) : 0;\n      const f = F[p], dry = dryV * wall * (1 + 0.5 * (f - 0.25) + 0.05 * g[p] + 0.06 * fl[p]), clr = CLEAR * wall * (1 - 0.17 * f + 0.03 * g[p] + 0.11 * fl[p]);\n      V[p] = dry + (clr - dry) * (0.68 * s + 0.32 * soak);\n      // The wet front carries a deeper rim of tint; it changes the colour,\n      // not the brightness.\n      C[p] = dryS + (clrS - dryS) * s + 1.2 * s * (1 - s);\n    }\n  }\n  const edge = S.phase === 1 ? round(H * (1 - (1 - S.slide) ** 3)) : -1, nf = S.next.F, ng = S.next.g, nl = S.next.fl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = V[p], c = C[p];\n      if (y \u003c edge) {\n        // The fresh sheet, dry, its fibres sliding down with it.\n        const q = (y - edge + H) * W + x, vx = (x - 31.5) / 46, vy = (y - 63.5) / 92;\n        v = dryV * (0.84 + 0.16 * (1 - vx * vx - vy * vy)) * (1 + 0.5 * (nf[q] - 0.25) + 0.05 * ng[q] + 0.06 * nl[q]);\n        c = dryS;\n        if (y === edge - 1) v *= 1.5;\n      } else if (edge >= 0 && y - edge \u003c 3) v *= 0.45 + 0.18 * (y - edge);\n      v = min(1, v);\n      display.setPixel(x, y, round(255 * v * (1 - c + c * pure[0])), round(255 * v * (1 - c + c * pure[1])), round(255 * v * (1 - c + c * pure[2])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Pores=20..80, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the paper's tint round the whole wheel; the dry paper is a dim pale tint and the clear spots the same hue, deeper. At 0 rose, at 0.05 red, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale yellow, 0.3 lime, 0.4 green, 0.5 aqua, 0.6 sky blue, 0.7 blue, 0.8 violet, 0.9 orchid. From 0.02 to 0.34 the dry paper is lifted up to 1.5 times and paled toward grey and the spots a little paler, so red, orange and yellow paper never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first pores touch 0.4 s after a sheet is pressed and the last about 6.5 s after; a tenth of the sheet is clear by 2.5 s, half by 6.7 s and nine tenths by 13 s, then it holds 2.5 s and a fresh sheet slides down in 1.4 s, about 16 s a sheet. At 0.2 the wicking is ten times slower, at 3 one and a half times faster; the slide always takes 1.4 s."},{"name":"Pores","min":20,"max":80,"about":"How many pores touch the sheet, each later one where the paper is still dry: 20 at the start, whose widest spots reach about 45 LEDs across before they meet, up to 80 at the top, about 24 across. Each spot's radius goes as the square root of its age, and the more pores, the slower each one spreads, so the sheet clears in about the same time."},{"name":"Grain","min":0,"max":1,"about":"How far the fibres line up along the panel. Up to 0.06 they lie every which way and the spots stay round; at 1 nearly all run up and down, nearly twice as long, and the oil runs along them two and a half times as fast as across, so the spots stretch into tall ovals and the clear patches join in columns."}],"start":[0,2,20,0.06],"measures":{"motion":0.0572,"detail":0.0504,"edges":0.1413,"complexity":1.9288,"coverage":1,"colour":0.225,"drift":0.3434},"knobResponse":[0.1516,0.0572,0.0394,0.0465]},{"slug":"bokeh","title":"Bokeh","family":"light","round":1,"note":"초점이 나간 밤거리 불빛이에요. 여섯 모 진 빛 원반이 피었다 흘러가며 겹친 자리만 부드럽게 밝아져요.","idea":"A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.","buttons":"K1 tap racks the focus through, so every disc closes to a point and opens out again.","code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","layer":{"id":"layer-bokeh","type":"code","name":"bokeh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them."},{"name":"Pace","min":0.2,"max":4,"about":"How fast the lights drift past and how quickly each one blooms and goes out."},{"name":"Size","min":-1,"max":1,"about":"How far out of focus they are, from small bright points to wide soft discs."},{"name":"Lights","min":40,"max":90,"about":"How many are lit at once; big discs come in fewer."}],"start":[0,2,0,40],"measures":{"motion":0.9868,"detail":0.0384,"edges":0.1836,"complexity":1.7001,"coverage":0.5358,"colour":0.318,"drift":0.3822},"knobResponse":[0.2498,0.2782,0.2491,0.2757]},{"slug":"borromean-rings","title":"Borromean Rings","family":"topology","round":33,"note":"테이트의 보로메오 고리를 황금 직사각형 세 장으로 만들고 세로로 2.3배 늘여 세웠어요. 하늘색 고리가 키 크게 서고 분홍 고리가 그것을 가로지르며 연두 고리가 허리를 둘러 20초에 한 바퀴 돌고, 앞 관이 뒤 관을 지나는 자리마다 LED 한 줄이 어두워져 위아래가 읽혀요. K3 은 직사각형의 긴 변 비를 1.618 에서 2.4 까지 바꾸고, K1 을 누르면 분홍 고리가 사라진 동안 연두 고리가 긴 고리 아래 끝으로 빠져나갔다 돌아와요.","idea":"Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.","buttons":"K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.","code":"// ===== Patternflow pattern =====\n// Title:   Borromean Rings\n// Family:  topology\n// Idea:    Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Borromean rings (Peter Guthrie Tait, 1876), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown.\n// Knob 2: Speed. How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower.\n// Knob 3: Aspect. Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side.\n// Knob 4: Tube. How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching.\n// Buttons: K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The model, short side a = 1. Each ring lies in one coordinate plane:\n//   R1 in x = 0, half sides z1 = r and y1 = SIG,\n//   R2 in z = 0, half sides x2 = 1 and y2 = SIG r (the tall one),\n//   R3 in y = 0, half sides x3 = r and z3 = 1 (the flat one round the waist).\n// Unstretched (SIG = 1, r = phi) these are Tait's three golden rectangles.\n// The link only asks y1 \u003c y2, x2 \u003c x3 and z3 \u003c z1: along each axis one ring\n// passes through the next. Stretching along y keeps all three, so the model\n// can be drawn 2.3 times as tall, which the 64 x 128 panel needs: unstretched\n// it fits a cube and would light a band about 50 rows high.\nconst SIG = 2.3;\n// Corners rounded to 0.4 of the short side, the camera 12 units away.\nconst RC = 0.4, CAM = 12;\n// Light from the upper left and in front, and the half vector for the shine.\nconst LX = -0.48, LY = -0.62, LZ = -0.62, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst lx = LX * LN, ly = LY * LN, lz = LZ * LN;\nconst HX = lx, HY = ly, HZ = lz - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\nconst hx = HX * HN, hy = HY * HN, hz = HZ * HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points round a rounded rectangle with half sides A (along u) and B (along\n// v), about one every `step`, as (u, v) pairs. Four sides and four arcs.\nfunction loop(A, B, c, step, out) {\n  let n = 0;\n  const side = (u0, v0, u1, v1) => {\n    const len = sqrt((u1 - u0) ** 2 + (v1 - v0) ** 2), k = max(1, ceil(len / step));\n    for (let i = 0; i \u003c k; i++) (out[n++] = u0 + ((u1 - u0) * i) / k), (out[n++] = v0 + ((v1 - v0) * i) / k);\n  };\n  const arc = (cu, cv, a0) => {\n    const k = max(2, ceil((c * PI) / 2 / step));\n    for (let i = 0; i \u003c k; i++) {\n      const a = a0 + ((PI / 2) * i) / k;\n      out[n++] = cu + c * cos(a);\n      out[n++] = cv + c * sin(a);\n    }\n  };\n  const a = A - c, b = B - c;\n  side(A, -b, A, b);\n  arc(a, b, 0);\n  side(a, B, -a, B);\n  arc(-a, b, PI / 2);\n  side(-A, b, -A, -b);\n  arc(-a, -b, PI);\n  side(-a, -B, a, -B);\n  arc(a, -b, 1.5 * PI);\n  return n >> 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    turn: 0.6, nod: 0, hue: 0, speed: 2, r: 1.618, tube: 0.06, cut: -1,\n    z: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    c: [new Float32Array(N * 3), new Float32Array(N * 3), new Float32Array(N * 3)],\n    fid: new Int8Array(N), fz: new Float32Array(N), uv: new Float32Array(8192), pts: new Float32Array(16384), col: new Float32Array(9),\n  };\n}\n\n// K1 tap, seconds: R1 fades 0 to 0.8, the other two slide apart to 3.0,\n// hold to 4.4, slide back to 6.6, R1 returns by 7.4.\nconst T_END = 7.4;\nfunction cutState(t) {\n  if (t \u003c 0) return [1, 0, 0];\n  const fade = t \u003c 0.8 ? 1 - sm(t / 0.8) : t \u003c 6.6 ? 0 : sm((t - 6.6) / 0.8);\n  const sep = t \u003c 0.8 ? 0 : t \u003c 3 ? sm((t - 0.8) / 2.2) : t \u003c 4.4 ? 1 : t \u003c 6.6 ? 1 - sm((t - 4.4) / 2.2) : 0;\n  return [fade, sep, sm(t / 1.2) * (1 - sm((t - 6.2) / 1.2))];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1.618, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.r = cl(k[2], 1.618, 2.4);\n  P.tube = cl(k[3], 0, 1);\n  P.turn += d * P.speed * 0.157;\n  P.nod += d * P.speed * 0.116;\n  if (P.cut >= 0) {\n    P.cut += d;\n    if (P.cut > T_END) P.cut = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.cut \u003c 0) P.cut = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const r = P.r, ZB = P.z, CB = P.c, uv = P.uv, pts = P.pts, col = P.col, fid = P.fid, fz = P.fz;\n  // The room where a ring passes through the next: one short side, or r - 1\n  // of it where the long side is shorter than two.\n  const room = min(1, r - 1), tr = (0.29 + 0.16 * P.tube) * room;\n  // LEDs to a unit: the flat ring's corners swing out to rxz from the axis,\n  // and the panel is 64 across; the tall ring is SIG r high each side of the\n  // middle, and the panel is 128 tall.\n  const rxz = sqrt((r - RC) ** 2 + (1 - RC) ** 2) + RC + tr;\n  const S = min(27 / rxz, 55 / (SIG * r + tr));\n  const [fade, sep, low] = cutState(P.cut);\n  // With R1 gone the flat ring drops down the tall ring until it\n  // clears the bottom end with 0.6 of a unit of air between the tubes, and\n  // the tall ring rises a little to meet it.\n  const drop = sep * (SIG * r + 2 * tr + 0.6);\n  const up2 = drop * 0.2, down3 = drop * 0.8;\n\n  // The rings turn round the tall ring's axis and the view looks down on them\n  // from 14 to 30 degrees, so the flat ring always shows its hole. While the\n  // rings come apart the eye sinks to 7 degrees below the middle, near the\n  // height the flat ring drops to, so the air between it and the bottom of\n  // the tall ring shows.\n  const th = P.turn, ct = cos(th), st = sin(th);\n  const el = (0.38 + 0.14 * sin(P.nod)) * (1 - low) - 0.12 * low, ce = cos(el), se = sin(el);\n\n  for (let i = 0; i \u003c 9; i += 3) hsv(P.hue + 0.58 + (i / 9), 0.8, 1, col, i);\n  // Round orange and yellow the colour goes brown in the shade, so there it\n  // keeps less saturation and more light.\n  const warm = [0, 0, 0];\n  for (let i = 0; i \u003c 3; i++) {\n    let h = P.hue + 0.58 + i / 3;\n    h -= floor(h);\n    let dh = h - 0.12;\n    if (dh > 0.5) dh -= 1;\n    warm[i] = sm(1 - abs(dh) / 0.17);\n    for (let c = 0; c \u003c 3; c++) col[i * 3 + c] += (1 - col[i * 3 + c]) * 0.45 * warm[i];\n  }\n\n  // Ring order in the buffers: 0 the tall ring (R2), 1 the one across it (R1), 2 the flat one (R3).\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const zb = ZB[ring], cb = CB[ring];\n    zb.fill(1e9);\n    let A, B;\n    if (ring === 0) (A = 1), (B = SIG * r);\n    else if (ring === 1) (A = r), (B = SIG);\n    else (A = r), (B = 1);\n    const n = loop(A, B, RC * min(A, B), tr * 0.3, uv);\n    const cr = col[ring * 3], cg = col[ring * 3 + 1], cbl = col[ring * 3 + 2], wl = warm[ring];\n    // Every point on screen first, so each can see its neighbours for the\n    // tube's direction.\n    for (let i = 0; i \u003c n; i++) {\n      const u = uv[i * 2], v = uv[i * 2 + 1];\n      let X, Y, Z;\n      if (ring === 0) (X = u), (Y = v + up2), (Z = 0);\n      else if (ring === 1) (X = 0), (Y = v), (Z = u);\n      else (X = u), (Y = -down3), (Z = v);\n      // Turn about y, then tip the view down by el.\n      const xr = X * ct + Z * st, zr = -X * st + Z * ct;\n      const up = Y * ce + zr * se, dep = zr * ce - Y * se;\n      const sc = (S * CAM) / (CAM + dep);\n      pts[i * 4] = 31.5 + xr * sc;\n      pts[i * 4 + 1] = 63.5 - up * sc;\n      pts[i * 4 + 2] = dep * S;\n      pts[i * 4 + 3] = tr * sc;\n    }\n    for (let i = 0; i \u003c n; i++) {\n      const o = i * 4, sx = pts[o], sy = pts[o + 1], dz = pts[o + 2], rp = pts[o + 3];\n      const a = ((i + 1) % n) * 4, b = ((i + n - 1) % n) * 4;\n      let tx = pts[a] - pts[b], ty = pts[a + 1] - pts[b + 1], tz = pts[a + 2] - pts[b + 2];\n      const tl = 1 / (sqrt(tx * tx + ty * ty + tz * tz) + 1e-9);\n      (tx *= tl), (ty *= tl), (tz *= tl);\n      // Nearer is brighter: a quarter darker at the back of the rings.\n      const fog = 1 - 0.25 * cl((dz / S + 2) / 4, 0, 1);\n      const x0 = max(0, floor(sx - rp)), x1 = min(W - 1, ceil(sx + rp)), y0 = max(0, floor(sy - rp)), y1 = min(H - 1, ceil(sy + rp));\n      const r2 = rp * rp;\n      for (let y = y0; y \u003c= y1; y++) {\n        const ny = y - sy, ny2 = ny * ny;\n        for (let x = x0; x \u003c= x1; x++) {\n          const nx = x - sx, d2 = nx * nx + ny2;\n          if (d2 >= r2) continue;\n          const nzp = sqrt(r2 - d2), z = dz - nzp, p = y * W + x;\n          if (z >= zb[p]) continue;\n          zb[p] = z;\n          // The tube is drawn as a chain of spheres, but the normal is the\n          // tube's: the sphere's, less its part along the tube.\n          const dt = nx * tx + ny * ty - nzp * tz;\n          let Nx = nx - dt * tx, Ny = ny - dt * ty, Nz = -nzp - dt * tz;\n          const nl = 1 / (sqrt(Nx * Nx + Ny * Ny + Nz * Nz) + 1e-9);\n          (Nx *= nl), (Ny *= nl), (Nz *= nl);\n          const dif = max(0, Nx * lx + Ny * ly + Nz * lz);\n          const hv = max(0, Nx * hx + Ny * hy + Nz * hz), sp = hv ** 24 * 0.85;\n          const lit = (0.2 + 0.3 * wl + 0.8 * dif) * fog;\n          cb[p * 3] = cr * lit + sp;\n          cb[p * 3 + 1] = cg * lit + sp;\n          cb[p * 3 + 2] = cbl * lit + sp;\n        }\n      }\n    }\n  }\n\n  // The nearest solid ring at each LED, for the gaps.\n  const al = [1, fade, 1];\n  for (let p = 0; p \u003c N; p++) {\n    let best = -1, bz = 1e9;\n    for (let ring = 0; ring \u003c 3; ring++) if (al[ring] > 0.5 && ZB[ring][p] \u003c bz) (bz = ZB[ring][p]), (best = ring);\n    fid[p] = best;\n    fz[p] = bz;\n  }\n  const gapDepth = tr * S * 1.1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Layers front to back: R1 fades by its alpha.\n      const z0 = ZB[0][p], z1 = ZB[1][p], z2 = ZB[2][p];\n      let R = 0, G = 0, Bc = 0;\n      if (z0 \u003c 1e8 || z1 \u003c 1e8 || z2 \u003c 1e8) {\n        const ord = z0 \u003c= z1 ? (z1 \u003c= z2 ? [0, 1, 2] : z0 \u003c= z2 ? [0, 2, 1] : [2, 0, 1]) : z0 \u003c= z2 ? [1, 0, 2] : z1 \u003c= z2 ? [1, 2, 0] : [2, 1, 0];\n        let keep = 1;\n        for (let j = 0; j \u003c 3 && keep > 0.001; j++) {\n          const ring = ord[j];\n          if (ZB[ring][p] > 1e8) break;\n          const a = al[ring] * keep, cb = CB[ring];\n          R += cb[p * 3] * a;\n          G += cb[p * 3 + 1] * a;\n          Bc += cb[p * 3 + 2] * a;\n          keep -= a;\n        }\n        // A dark LED where a nearer tube of another ring passes over this\n        // one, so the crossing reads as over and under.\n        const me = fid[p];\n        if (me >= 0) {\n          const zme = fz[p];\n          let dark = 0;\n          for (let dy = -1; dy \u003c= 1; dy++) {\n            const yy = y + dy;\n            if (yy \u003c 0 || yy >= H) continue;\n            for (let dx = -1; dx \u003c= 1; dx++) {\n              const xx = x + dx;\n              if (xx \u003c 0 || xx >= W || (dx === 0 && dy === 0)) continue;\n              const q = yy * W + xx, o = fid[q];\n              if (o >= 0 && o !== me && fz[q] \u003c zme - gapDepth) dark = 1;\n            }\n          }\n          if (dark) (R *= 0.12), (G *= 0.12), (Bc *= 0.12);\n        }\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(Bc * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-borromean-rings","type":"code","name":"borromean-rings","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Borromean Rings\n// Family:  topology\n// Idea:    Three lit tubes bent into the golden-rectangle model of the Borromean rings, stretched to 2.3 times their height to stand on the panel, turn slowly round the tall one's axis so the over and under crossings come round in turn, and no two of them are linked: take one away and the other two slide apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Borromean rings (Peter Guthrie Tait, 1876), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown.\n// Knob 2: Speed. How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower.\n// Knob 3: Aspect. Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side.\n// Knob 4: Tube. How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching.\n// Buttons: K1 tap fades out the ring across the tall one (pink at the opening). With it gone the flat ring slides down the tall ring and off its bottom end in 3 s, since the two were never linked, waits below it, climbs back, and the third ring returns to lock them again; 7.4 s in all.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The model, short side a = 1. Each ring lies in one coordinate plane:\n//   R1 in x = 0, half sides z1 = r and y1 = SIG,\n//   R2 in z = 0, half sides x2 = 1 and y2 = SIG r (the tall one),\n//   R3 in y = 0, half sides x3 = r and z3 = 1 (the flat one round the waist).\n// Unstretched (SIG = 1, r = phi) these are Tait's three golden rectangles.\n// The link only asks y1 \u003c y2, x2 \u003c x3 and z3 \u003c z1: along each axis one ring\n// passes through the next. Stretching along y keeps all three, so the model\n// can be drawn 2.3 times as tall, which the 64 x 128 panel needs: unstretched\n// it fits a cube and would light a band about 50 rows high.\nconst SIG = 2.3;\n// Corners rounded to 0.4 of the short side, the camera 12 units away.\nconst RC = 0.4, CAM = 12;\n// Light from the upper left and in front, and the half vector for the shine.\nconst LX = -0.48, LY = -0.62, LZ = -0.62, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst lx = LX * LN, ly = LY * LN, lz = LZ * LN;\nconst HX = lx, HY = ly, HZ = lz - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\nconst hx = HX * HN, hy = HY * HN, hz = HZ * HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points round a rounded rectangle with half sides A (along u) and B (along\n// v), about one every `step`, as (u, v) pairs. Four sides and four arcs.\nfunction loop(A, B, c, step, out) {\n  let n = 0;\n  const side = (u0, v0, u1, v1) => {\n    const len = sqrt((u1 - u0) ** 2 + (v1 - v0) ** 2), k = max(1, ceil(len / step));\n    for (let i = 0; i \u003c k; i++) (out[n++] = u0 + ((u1 - u0) * i) / k), (out[n++] = v0 + ((v1 - v0) * i) / k);\n  };\n  const arc = (cu, cv, a0) => {\n    const k = max(2, ceil((c * PI) / 2 / step));\n    for (let i = 0; i \u003c k; i++) {\n      const a = a0 + ((PI / 2) * i) / k;\n      out[n++] = cu + c * cos(a);\n      out[n++] = cv + c * sin(a);\n    }\n  };\n  const a = A - c, b = B - c;\n  side(A, -b, A, b);\n  arc(a, b, 0);\n  side(a, B, -a, B);\n  arc(-a, b, PI / 2);\n  side(-A, b, -A, -b);\n  arc(-a, -b, PI);\n  side(-a, -B, a, -B);\n  arc(a, -b, 1.5 * PI);\n  return n >> 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    turn: 0.6, nod: 0, hue: 0, speed: 2, r: 1.618, tube: 0.06, cut: -1,\n    z: [new Float32Array(N), new Float32Array(N), new Float32Array(N)],\n    c: [new Float32Array(N * 3), new Float32Array(N * 3), new Float32Array(N * 3)],\n    fid: new Int8Array(N), fz: new Float32Array(N), uv: new Float32Array(8192), pts: new Float32Array(16384), col: new Float32Array(9),\n  };\n}\n\n// K1 tap, seconds: R1 fades 0 to 0.8, the other two slide apart to 3.0,\n// hold to 4.4, slide back to 6.6, R1 returns by 7.4.\nconst T_END = 7.4;\nfunction cutState(t) {\n  if (t \u003c 0) return [1, 0, 0];\n  const fade = t \u003c 0.8 ? 1 - sm(t / 0.8) : t \u003c 6.6 ? 0 : sm((t - 6.6) / 0.8);\n  const sep = t \u003c 0.8 ? 0 : t \u003c 3 ? sm((t - 0.8) / 2.2) : t \u003c 4.4 ? 1 : t \u003c 6.6 ? 1 - sm((t - 4.4) / 2.2) : 0;\n  return [fade, sep, sm(t / 1.2) * (1 - sm((t - 6.2) / 1.2))];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1.618, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.r = cl(k[2], 1.618, 2.4);\n  P.tube = cl(k[3], 0, 1);\n  P.turn += d * P.speed * 0.157;\n  P.nod += d * P.speed * 0.116;\n  if (P.cut >= 0) {\n    P.cut += d;\n    if (P.cut > T_END) P.cut = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.cut \u003c 0) P.cut = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const r = P.r, ZB = P.z, CB = P.c, uv = P.uv, pts = P.pts, col = P.col, fid = P.fid, fz = P.fz;\n  // The room where a ring passes through the next: one short side, or r - 1\n  // of it where the long side is shorter than two.\n  const room = min(1, r - 1), tr = (0.29 + 0.16 * P.tube) * room;\n  // LEDs to a unit: the flat ring's corners swing out to rxz from the axis,\n  // and the panel is 64 across; the tall ring is SIG r high each side of the\n  // middle, and the panel is 128 tall.\n  const rxz = sqrt((r - RC) ** 2 + (1 - RC) ** 2) + RC + tr;\n  const S = min(27 / rxz, 55 / (SIG * r + tr));\n  const [fade, sep, low] = cutState(P.cut);\n  // With R1 gone the flat ring drops down the tall ring until it\n  // clears the bottom end with 0.6 of a unit of air between the tubes, and\n  // the tall ring rises a little to meet it.\n  const drop = sep * (SIG * r + 2 * tr + 0.6);\n  const up2 = drop * 0.2, down3 = drop * 0.8;\n\n  // The rings turn round the tall ring's axis and the view looks down on them\n  // from 14 to 30 degrees, so the flat ring always shows its hole. While the\n  // rings come apart the eye sinks to 7 degrees below the middle, near the\n  // height the flat ring drops to, so the air between it and the bottom of\n  // the tall ring shows.\n  const th = P.turn, ct = cos(th), st = sin(th);\n  const el = (0.38 + 0.14 * sin(P.nod)) * (1 - low) - 0.12 * low, ce = cos(el), se = sin(el);\n\n  for (let i = 0; i \u003c 9; i += 3) hsv(P.hue + 0.58 + (i / 9), 0.8, 1, col, i);\n  // Round orange and yellow the colour goes brown in the shade, so there it\n  // keeps less saturation and more light.\n  const warm = [0, 0, 0];\n  for (let i = 0; i \u003c 3; i++) {\n    let h = P.hue + 0.58 + i / 3;\n    h -= floor(h);\n    let dh = h - 0.12;\n    if (dh > 0.5) dh -= 1;\n    warm[i] = sm(1 - abs(dh) / 0.17);\n    for (let c = 0; c \u003c 3; c++) col[i * 3 + c] += (1 - col[i * 3 + c]) * 0.45 * warm[i];\n  }\n\n  // Ring order in the buffers: 0 the tall ring (R2), 1 the one across it (R1), 2 the flat one (R3).\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const zb = ZB[ring], cb = CB[ring];\n    zb.fill(1e9);\n    let A, B;\n    if (ring === 0) (A = 1), (B = SIG * r);\n    else if (ring === 1) (A = r), (B = SIG);\n    else (A = r), (B = 1);\n    const n = loop(A, B, RC * min(A, B), tr * 0.3, uv);\n    const cr = col[ring * 3], cg = col[ring * 3 + 1], cbl = col[ring * 3 + 2], wl = warm[ring];\n    // Every point on screen first, so each can see its neighbours for the\n    // tube's direction.\n    for (let i = 0; i \u003c n; i++) {\n      const u = uv[i * 2], v = uv[i * 2 + 1];\n      let X, Y, Z;\n      if (ring === 0) (X = u), (Y = v + up2), (Z = 0);\n      else if (ring === 1) (X = 0), (Y = v), (Z = u);\n      else (X = u), (Y = -down3), (Z = v);\n      // Turn about y, then tip the view down by el.\n      const xr = X * ct + Z * st, zr = -X * st + Z * ct;\n      const up = Y * ce + zr * se, dep = zr * ce - Y * se;\n      const sc = (S * CAM) / (CAM + dep);\n      pts[i * 4] = 31.5 + xr * sc;\n      pts[i * 4 + 1] = 63.5 - up * sc;\n      pts[i * 4 + 2] = dep * S;\n      pts[i * 4 + 3] = tr * sc;\n    }\n    for (let i = 0; i \u003c n; i++) {\n      const o = i * 4, sx = pts[o], sy = pts[o + 1], dz = pts[o + 2], rp = pts[o + 3];\n      const a = ((i + 1) % n) * 4, b = ((i + n - 1) % n) * 4;\n      let tx = pts[a] - pts[b], ty = pts[a + 1] - pts[b + 1], tz = pts[a + 2] - pts[b + 2];\n      const tl = 1 / (sqrt(tx * tx + ty * ty + tz * tz) + 1e-9);\n      (tx *= tl), (ty *= tl), (tz *= tl);\n      // Nearer is brighter: a quarter darker at the back of the rings.\n      const fog = 1 - 0.25 * cl((dz / S + 2) / 4, 0, 1);\n      const x0 = max(0, floor(sx - rp)), x1 = min(W - 1, ceil(sx + rp)), y0 = max(0, floor(sy - rp)), y1 = min(H - 1, ceil(sy + rp));\n      const r2 = rp * rp;\n      for (let y = y0; y \u003c= y1; y++) {\n        const ny = y - sy, ny2 = ny * ny;\n        for (let x = x0; x \u003c= x1; x++) {\n          const nx = x - sx, d2 = nx * nx + ny2;\n          if (d2 >= r2) continue;\n          const nzp = sqrt(r2 - d2), z = dz - nzp, p = y * W + x;\n          if (z >= zb[p]) continue;\n          zb[p] = z;\n          // The tube is drawn as a chain of spheres, but the normal is the\n          // tube's: the sphere's, less its part along the tube.\n          const dt = nx * tx + ny * ty - nzp * tz;\n          let Nx = nx - dt * tx, Ny = ny - dt * ty, Nz = -nzp - dt * tz;\n          const nl = 1 / (sqrt(Nx * Nx + Ny * Ny + Nz * Nz) + 1e-9);\n          (Nx *= nl), (Ny *= nl), (Nz *= nl);\n          const dif = max(0, Nx * lx + Ny * ly + Nz * lz);\n          const hv = max(0, Nx * hx + Ny * hy + Nz * hz), sp = hv ** 24 * 0.85;\n          const lit = (0.2 + 0.3 * wl + 0.8 * dif) * fog;\n          cb[p * 3] = cr * lit + sp;\n          cb[p * 3 + 1] = cg * lit + sp;\n          cb[p * 3 + 2] = cbl * lit + sp;\n        }\n      }\n    }\n  }\n\n  // The nearest solid ring at each LED, for the gaps.\n  const al = [1, fade, 1];\n  for (let p = 0; p \u003c N; p++) {\n    let best = -1, bz = 1e9;\n    for (let ring = 0; ring \u003c 3; ring++) if (al[ring] > 0.5 && ZB[ring][p] \u003c bz) (bz = ZB[ring][p]), (best = ring);\n    fid[p] = best;\n    fz[p] = bz;\n  }\n  const gapDepth = tr * S * 1.1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Layers front to back: R1 fades by its alpha.\n      const z0 = ZB[0][p], z1 = ZB[1][p], z2 = ZB[2][p];\n      let R = 0, G = 0, Bc = 0;\n      if (z0 \u003c 1e8 || z1 \u003c 1e8 || z2 \u003c 1e8) {\n        const ord = z0 \u003c= z1 ? (z1 \u003c= z2 ? [0, 1, 2] : z0 \u003c= z2 ? [0, 2, 1] : [2, 0, 1]) : z0 \u003c= z2 ? [1, 0, 2] : z1 \u003c= z2 ? [1, 2, 0] : [2, 1, 0];\n        let keep = 1;\n        for (let j = 0; j \u003c 3 && keep > 0.001; j++) {\n          const ring = ord[j];\n          if (ZB[ring][p] > 1e8) break;\n          const a = al[ring] * keep, cb = CB[ring];\n          R += cb[p * 3] * a;\n          G += cb[p * 3 + 1] * a;\n          Bc += cb[p * 3 + 2] * a;\n          keep -= a;\n        }\n        // A dark LED where a nearer tube of another ring passes over this\n        // one, so the crossing reads as over and under.\n        const me = fid[p];\n        if (me >= 0) {\n          const zme = fz[p];\n          let dark = 0;\n          for (let dy = -1; dy \u003c= 1; dy++) {\n            const yy = y + dy;\n            if (yy \u003c 0 || yy >= H) continue;\n            for (let dx = -1; dx \u003c= 1; dx++) {\n              const xx = x + dx;\n              if (xx \u003c 0 || xx >= W || (dx === 0 && dy === 0)) continue;\n              const q = yy * W + xx, o = fid[q];\n              if (o >= 0 && o !== me && fz[q] \u003c zme - gapDepth) dark = 1;\n            }\n          }\n          if (dark) (R *= 0.12), (G *= 0.12), (Bc *= 0.12);\n        }\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(Bc * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Aspect=1.618..2.4, Tube=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours round the wheel together, a third apart. At 0 the tall ring is azure, the ring across it pink and the flat ring round the waist lime; a ring that comes round to orange or yellow is laid paler, peach or butter, so its shaded side does not go brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rings turn. At 2 one turn takes 20 s and the view nods up and down every 27 s; at 0.2 ten times slower."},{"name":"Aspect","min":1.618,"max":2.4,"about":"Long side over short side of the rectangles before the stretch. At 1.618 they are golden and their 12 corners would be an icosahedron; at 2.4 they are longer and thinner and the room where each passes through the next grows from 0.62 to 1 short side."},{"name":"Tube","min":0,"max":1,"about":"How much of that room the tubes fill: 29% at 0, so there are about three LEDs of air where one ring passes through the next; at 1, 45%, and they pass within a LED of each other without touching."}],"start":[0,2,1.618,0.06],"measures":{"motion":0.1873,"detail":0.0417,"edges":0.4546,"complexity":0.6755,"coverage":0.2581,"colour":0.1929,"drift":0.1053},"knobResponse":[0.1012,0.1249,0.077,0.0449]},{"slug":"borsuk-ulam","title":"Borsuk-Ulam","family":"topology","round":39,"note":"기온과 기압이 천천히 바뀌는 지구가 돌아요. 위 원판은 앞 반구, 아래 원판은 뒤 반구라서 −x 가 x 와 같은 자리에 그려지고, 대척점과 기온이 같은 흰 선과 기압이 같은 자홍 선이 두 원판의 같은 자리를 지나요. 두 선이 만나는 금색 점이 보르수크-울람 정리가 늘 있다고 하는 대척점 쌍이에요.","idea":"A turning globe carries a slowly changing temperature and pressure, the top disk showing the side that faces you and the bottom disk the far side laid so that each point sits where its antipode sits above, and the white line where the temperature equals the temperature at the antipode crosses the magenta line where the pressure does at an odd number of gold points, the same in both disks, where two opposite places on the Earth have the same weather.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Borsuk-Ulam\n// Family:  topology\n// Idea:    A turning globe carries a slowly changing temperature and pressure, the top disk showing the side that faces you and the bottom disk the far side laid so that each point sits where its antipode sits above, and the white line where the temperature equals the temperature at the antipode crosses the magenta line where the pressure does at an odd number of gold points, the same in both disks, where two opposite places on the Earth have the same weather.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Borsuk-Ulam theorem (Karol Borsuk, 1933, after a question of Stanisław Ulam)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Degree=3..6, Speed=0.2..3, Weather=0..1, Hue=0..1\n//\n// Knob 1: Degree. The highest degree of the random spherical harmonics in both fields, the next degree fading in between whole numbers. The two curves hang only on the odd degrees, so at 3 they are cubic curves and meet at 1 to 9 pairs, 2.8 on average: one pair 36% of the time, three 42%, five 19%, seven 3%. 4 adds a finer even layer to the colours and the isobars and leaves the curves cubic; at 5 and 6 the curves are quintic, wind into loops and meet at up to 25 pairs, about 5 on average.\n// Knob 2: Speed. How fast the globe turns: at 2 once in 20 seconds round an axis leaning 24 degrees toward you, at 0.2 once in 200 seconds, at 3 once in 13. The curves and the pairs turn with it; a pair that slips over the rim comes back at once on the opposite rim, where its other point is rising.\n// Knob 3: Weather. How fast the temperature and the pressure change. At 0 each coefficient swings once in 56 to 168 seconds, the curves creep and a pair of pairs is born or dies about 12 times a minute at Degree 3; at 1 eight times faster, 7 to 21 seconds, about 74 times a minute. Pairs come and go two at a time, where the curves touch, so the count stays odd.\n// Knob 4: Hue. Turns the palette: at the start azure for cold and orange for warm with a magenta pressure curve; at 0.25 violet and green with red; at 0.5 red and cyan with green; at 0.75 green and violet with cyan. The temperature curve stays white and the pairs gold. Where cold or warm lands on orange or yellow the pale bands are lifted toward full brightness, so they never go brown or olive.\n\n// Each disk sits in a 64 x 64 square, the near side above the far side.\nconst S2 = 64;\nconst { floor, min, abs, sqrt, sin, cos, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The disks: radius RAD about the centre of each 64 x 64 square.\nconst RAD = 31, CX = 32, CY = 32;\n// Each field is a sum over AX zonal harmonics sqrt(2l+1) P_l(u . x) for every\n// degree l up to LMAX, each axis u wandering on a great circle.\nconst AX = 5, LMAX = 6;\n// The globe turns round an axis leaning TILT toward you.\nconst TILT = 0.42;\n// Grid seeds for Newton's method each frame, over one hemisphere.\nconst SEEDS = 72;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nfunction unit() {\n  for (;;) {\n    const x = 2 * random() - 1, y = 2 * random() - 1, z = 2 * random() - 1, r = x * x + y * y + z * z;\n    if (r > 0.01 && r \u003c 1) {\n      const k = 1 / sqrt(r);\n      return [x * k, y * k, z * k];\n    }\n  }\n}\n\n// One field: per axis a great circle (two orthonormal vectors and a speed)\n// and per degree a coefficient swinging with its own speed and phase.\nfunction field() {\n  const F = { e: [], w: [], amp: [], om: [], ph: [], u: new Float64Array(3 * AX), c: new Float64Array(AX * (LMAX + 1)) };\n  for (let j = 0; j \u003c AX; j++) {\n    const a = unit(), b0 = unit();\n    const d = a[0] * b0[0] + a[1] * b0[1] + a[2] * b0[2];\n    const b = [b0[0] - d * a[0], b0[1] - d * a[1], b0[2] - d * a[2]], bl = Math.hypot(b[0], b[1], b[2]);\n    F.e.push([a, [b[0] / bl, b[1] / bl, b[2] / bl], random() * TAU]);\n    F.w.push((0.08 + 0.12 * random()) * (random() \u003c 0.5 ? -1 : 1));\n    for (let l = 0; l \u003c= LMAX; l++) {\n      F.amp.push(l === 0 ? 0 : (random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.4 * random()));\n      F.om.push(0.15 + 0.3 * random());\n      F.ph.push(random() * TAU);\n    }\n  }\n  return F;\n}\n\n// Axes and coefficients at weather time t, with degree l weighted by how far\n// the Degree knob has come past it.\nfunction place(F, t, deg) {\n  for (let j = 0; j \u003c AX; j++) {\n    const [a, b, p] = F.e[j], th = p + F.w[j] * t, cs = cos(th), sn = sin(th);\n    for (let i = 0; i \u003c 3; i++) F.u[3 * j + i] = a[i] * cs + b[i] * sn;\n    for (let l = 1; l \u003c= LMAX; l++) {\n      const q = j * (LMAX + 1) + l, fade = cl(deg - l + 1, 0, 1);\n      F.c[q] = (fade * F.amp[q] * sqrt(2 * l + 1) * sin(F.om[q] * t + F.ph[q])) / Math.pow(l, 0.3);\n    }\n  }\n}\n\n// Even and odd parts of a field at unit vector x, and the gradient of the odd\n// part when grad is given: f(x) = even + odd, f(-x) = even - odd.\nfunction evalField(F, x, y, z, L, out, grad) {\n  let ev = 0, od = 0, gx = 0, gy = 0, gz = 0;\n  for (let j = 0; j \u003c AX; j++) {\n    const ux = F.u[3 * j], uy = F.u[3 * j + 1], uz = F.u[3 * j + 2], s = ux * x + uy * y + uz * z, base = j * (LMAX + 1);\n    let p0 = 1, p1 = s, d0 = 0, d1 = 1, o = F.c[base + 1] * p1, e = 0, dd = F.c[base + 1];\n    for (let l = 1; l \u003c L; l++) {\n      const p2 = ((2 * l + 1) * s * p1 - l * p0) / (l + 1), d2 = d0 + (2 * l + 1) * p1, c = F.c[base + l + 1];\n      if ((l + 1) & 1) {\n        o += c * p2;\n        dd += c * d2;\n      } else e += c * p2;\n      p0 = p1;\n      p1 = p2;\n      d0 = d1;\n      d1 = d2;\n    }\n    ev += e;\n    od += o;\n    if (grad) {\n      gx += dd * ux;\n      gy += dd * uy;\n      gz += dd * uz;\n    }\n  }\n  out[0] = ev;\n  out[1] = od;\n  if (grad) {\n    grad[0] = gx;\n    grad[1] = gy;\n    grad[2] = gz;\n  }\n}\n\nexport function setup(params) {\n  const P = S2 * S2;\n  // World direction of each pixel of the top square: x right, y up, z\n  // toward you, pulled onto the rim outside the disk.\n  const wx = new Float32Array(P), wy = new Float32Array(P), wz = new Float32Array(P), cov = new Float32Array(P);\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x, u = (x + 0.5 - CX) / RAD, v = (CY - y - 0.5) / RAD, r = sqrt(u * u + v * v);\n      cov[p] = cl((1 - r) * RAD + 0.5, 0, 1);\n      if (r \u003c 1) {\n        wx[p] = u;\n        wy[p] = v;\n        wz[p] = sqrt(1 - r * r);\n      } else {\n        wx[p] = u / r;\n        wy[p] = v / r;\n        wz[p] = 0;\n      }\n    }\n  // Seeds: a Fibonacci spiral over the upper hemisphere.\n  const seeds = [];\n  for (let i = 0; i \u003c SEEDS; i++) {\n    const z = (i + 0.5) / SEEDS, r = sqrt(1 - z * z), a = i * 2.39996323;\n    seeds.push([r * cos(a), r * sin(a), z]);\n  }\n  params.s = {\n    init: false, t: 0, wt: 0, deg: 3, L: 3, f: field(), g: field(), wx, wy, wz, cov, seeds,\n    fe: new Float32Array(P), fo: new Float32Array(P), ge: new Float32Array(P), go: new Float32Array(P),\n    lf: new Float32Array(P), lg: new Float32Array(P), roots: [], M: [1, 0, 0, 0, 1, 0, 0, 0, 1], hue: 0.06,\n    o1: [0, 0], o2: [0, 0], g1: [0, 0, 0], g2: [0, 0, 0], c: [0, 0, 0], d: [0, 0, 0],\n  };\n}\n\n// Newton's method on the sphere for fodd = godd = 0: the step is the\n// smallest tangent move that zeroes both linearised, taken from x and pulled\n// back onto the sphere.\nfunction newton(S, x0) {\n  let x = x0[0], y = x0[1], z = x0[2];\n  const { o1, o2, g1, g2 } = S;\n  for (let it = 0; it \u003c 24; it++) {\n    evalField(S.f, x, y, z, S.L, o1, g1);\n    evalField(S.g, x, y, z, S.L, o2, g2);\n    const F1 = o1[1], F2 = o2[1];\n    if (abs(F1) \u003c 1e-13 && abs(F2) \u003c 1e-13) return [x, y, z];\n    const d1 = g1[0] * x + g1[1] * y + g1[2] * z, d2 = g2[0] * x + g2[1] * y + g2[2] * z;\n    const ax = g1[0] - d1 * x, ay = g1[1] - d1 * y, az = g1[2] - d1 * z;\n    const bx = g2[0] - d2 * x, by = g2[1] - d2 * y, bz = g2[2] - d2 * z;\n    const a = ax * ax + ay * ay + az * az, b = ax * bx + ay * by + az * bz, c = bx * bx + by * by + bz * bz, det = a * c - b * b;\n    if (det \u003c 1e-14) return null;\n    const al = (-F1 * c + F2 * b) / det, be = (-F2 * a + F1 * b) / det;\n    let sx = al * ax + be * bx, sy = al * ay + be * by, sz = al * az + be * bz;\n    const sl = sqrt(sx * sx + sy * sy + sz * sz);\n    if (sl > 0.35) {\n      sx *= 0.35 / sl;\n      sy *= 0.35 / sl;\n      sz *= 0.35 / sl;\n    }\n    x += sx;\n    y += sy;\n    z += sz;\n    const n = 1 / sqrt(x * x + y * y + z * z);\n    x *= n;\n    y *= n;\n    z *= n;\n  }\n  evalField(S.f, x, y, z, S.L, o1);\n  evalField(S.g, x, y, z, S.L, o2);\n  return abs(o1[1]) \u003c 1e-10 && abs(o2[1]) \u003c 1e-10 ? [x, y, z] : null;\n}\n\n// All antipodal pairs, by Newton's method from three kinds of start: last\n// frame's pairs, every 2 x 2 block of LEDs on the near side where both odd\n// parts change sign, and a fixed spiral of seeds; each pair kept once.\nfunction findRoots(S) {\n  const found = [];\n  const add = (r) => {\n    if (!r) return;\n    for (const q of found) {\n      const d = (q[0] - r[0]) ** 2 + (q[1] - r[1]) ** 2 + (q[2] - r[2]) ** 2, e = (q[0] + r[0]) ** 2 + (q[1] + r[1]) ** 2 + (q[2] + r[2]) ** 2;\n      if (d \u003c 1e-8 || e \u003c 1e-8) return;\n    }\n    found.push(r);\n  };\n  for (const r of S.roots) add(newton(S, r));\n  const { fo, go, wx, wy, wz, M } = S;\n  for (let y = 0; y \u003c S2 - 1; y++)\n    for (let x = 0; x \u003c S2 - 1; x++) {\n      const p = y * S2 + x, q = [p, p + 1, p + S2, p + S2 + 1];\n      let fp = 0, fn = 0, gp = 0, gn = 0;\n      for (const i of q) {\n        if (fo[i] > 0) fp = 1;\n        else fn = 1;\n        if (go[i] > 0) gp = 1;\n        else gn = 1;\n      }\n      if (!(fp && fn && gp && gn)) continue;\n      const X = wx[p], Y = wy[p], Z = wz[p];\n      add(newton(S, [M[0] * X + M[1] * Y + M[2] * Z, M[3] * X + M[4] * Y + M[5] * Z, M[6] * X + M[7] * Y + M[8] * Z]));\n    }\n  for (const s of S.seeds) add(newton(S, s));\n  S.roots = found;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.deg = cl(k[0], 3, 6);\n  S.L = Math.ceil(S.deg - 1e-9);\n  const speed = cl(k[1], 0.2, 3), weather = 0.25 + 1.75 * cl(k[2], 0, 1);\n  S.hue = k[3];\n  S.t += d * speed;\n  S.wt += d * weather;\n  place(S.f, S.wt + 3, S.deg);\n  place(S.g, S.wt + 3, S.deg);\n  // Body from world: undo the lean, then the turn.\n  const ph = S.t * 0.025 * TAU, cp = cos(ph), sp = sin(ph), ct = cos(TILT), st = sin(TILT);\n  // World = Rx(TILT) Ry(ph) body; body = Ry(-ph) Rx(-TILT) world.\n  // Rx(-TILT): (x, y, z) -> (x, ct y + st z, -st y + ct z).\n  // Ry(-ph): (x, y, z) -> (cp x - sp z, y, sp x + cp z).\n  S.M = [cp, sp * st, -sp * ct, 0, ct, st, sp, -cp * st, cp * ct];\n  const { wx, wy, wz, fe, fo, ge, go, o1, o2, M } = S, L = S.L;\n  for (let p = 0; p \u003c S2 * S2; p++) {\n    const X = wx[p], Y = wy[p], Z = wz[p];\n    const x = M[0] * X + M[1] * Y + M[2] * Z, y = M[3] * X + M[4] * Y + M[5] * Z, z = M[6] * X + M[7] * Y + M[8] * Z;\n    evalField(S.f, x, y, z, L, o1);\n    evalField(S.g, x, y, z, L, o2);\n    fe[p] = o1[0];\n    fo[p] = o1[1];\n    ge[p] = o2[0];\n    go[p] = o2[1];\n  }\n  findRoots(S);\n}\n\n// Length of the screen gradient of A + sgn B at LED (x, y), per LED.\nfunction slope(A, B, sgn, x, y) {\n  const p = y * S2 + x, xl = x > 0 ? p - 1 : p, xr = x \u003c S2 - 1 ? p + 1 : p, yu = y > 0 ? p - S2 : p, yd = y \u003c S2 - 1 ? p + S2 : p;\n  const gx = (A[xr] - A[xl] + sgn * (B[xr] - B[xl])) / (xr - xl), gy = (A[yd] - A[yu] + sgn * (B[yd] - B[yu])) / ((yd - yu) / S2);\n  return sqrt(gx * gx + gy * gy) + 1e-9;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { fe, fo, ge, go, cov, wz, c } = S;\n  const h0 = 0.52 + S.hue, FS = 2.2, ISO = 2, gc = S.d;\n  // Orange and yellow go brown and olive when dim, so near hue 0.12 the\n  // pale bands are lifted toward full brightness.\n  const yl = [0, 0.5].map((o) => {\n    const h = h0 + o - floor(h0 + o);\n    return 0.7 * cl(1 - abs(h - 0.12) / 0.11, 0, 1);\n  });\n  hsv(h0 + 0.25, 0.75, 1, gc);\n  // Screen places of the pairs: the member that faces you.\n  const pts = [];\n  for (const r of S.roots) {\n    const M = S.M;\n    // World from body is the transpose of M.\n    let X = M[0] * r[0] + M[3] * r[1] + M[6] * r[2], Y = M[1] * r[0] + M[4] * r[1] + M[7] * r[2], Z = M[2] * r[0] + M[5] * r[1] + M[8] * r[2];\n    if (Z \u003c 0) {\n      X = -X;\n      Y = -Y;\n      Z = -Z;\n    }\n    pts.push([CX + X * RAD, CY - Y * RAD]);\n  }\n  const pulse = 0.75 + 0.25 * sin(S.t * 3), { lf, lg } = S;\n  // The two odd curves, the same in both disks: fodd(-x) = -fodd(x).\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x;\n      lf[p] = cl(1.25 - abs(fo[p]) / slope(fo, fo, 0, x, y), 0, 1) * cov[p];\n      lg[p] = cl(1.15 - abs(go[p]) / slope(go, go, 0, x, y), 0, 1) * cov[p];\n    }\n  for (let half = 0; half \u003c 2; half++) {\n    const sg = half ? -1 : 1;\n    for (let y = 0; y \u003c S2; y++)\n      for (let x = 0; x \u003c S2; x++) {\n        const p = y * S2 + x, a = cov[p];\n        if (a \u003c= 0) {\n          display.setPixel(x, y + half * S2, 0, 0, 0);\n          continue;\n        }\n        // Temperature: two tones apart from a pale middle, in soft bands.\n        const tv = cl((fe[p] + sg * fo[p]) / FS, -1, 1), m = abs(tv) * 4, band = (floor(m) + sm(0.35, 0.65, m - floor(m))) / 4;\n        const side = tv \u003c 0 ? 0 : 1, v0 = 0.6 + 0.4 * band;\n        hsv(h0 + 0.5 * side, 0.1 + 0.72 * band, v0 + (1 - v0) * yl[side] * sm(0, 0.4, band), c);\n        let shade = (0.86 + 0.14 * wz[p]) * a;\n        // Pressure: a few contour lines, darker.\n        const gv = (ge[p] + sg * go[p]) / ISO, fr = abs(gv - round(gv)) * ISO;\n        shade *= 1 - 0.55 * cl(0.95 - fr / slope(ge, go, sg, x, y), 0, 1);\n        let R = c[0] * shade, G = c[1] * shade, B = c[2] * shade;\n        // The curve godd = 0, where the pressure is the same at the antipode.\n        const ga = lg[p];\n        R += (gc[0] - R) * ga;\n        G += (gc[1] - G) * ga;\n        B += (gc[2] - B) * ga;\n        // The curve fodd = 0, where the temperature is.\n        const fa = lf[p];\n        R += (1 - R) * fa;\n        G += (1 - G) * fa;\n        B += (1 - B) * fa;\n        // The pairs: a gold core inside a dark ring, and a glow round it.\n        for (const q of pts) {\n          const dd = Math.hypot(x + 0.5 - q[0], y + 0.5 - q[1]);\n          if (dd >= 6.5) continue;\n          if (dd \u003c 2.1) {\n            R = 1;\n            G = 0.86;\n            B = 0.45;\n          } else if (dd \u003c 3.2) {\n            R *= 0.12;\n            G *= 0.12;\n            B *= 0.12;\n          } else {\n            const gw = pulse * 0.9 * (1 - (dd - 3.2) / 3.3) ** 1.5;\n            R += (1 - R) * gw;\n            G += (0.86 - G) * gw;\n            B += (0.45 - B) * gw * 0.5;\n          }\n        }\n        display.setPixel(x, y + half * S2, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n      }\n  }\n}\n","layer":{"id":"layer-borsuk-ulam","type":"code","name":"borsuk-ulam","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Borsuk-Ulam\n// Family:  topology\n// Idea:    A turning globe carries a slowly changing temperature and pressure, the top disk showing the side that faces you and the bottom disk the far side laid so that each point sits where its antipode sits above, and the white line where the temperature equals the temperature at the antipode crosses the magenta line where the pressure does at an odd number of gold points, the same in both disks, where two opposite places on the Earth have the same weather.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Borsuk-Ulam theorem (Karol Borsuk, 1933, after a question of Stanisław Ulam)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Degree=3..6, Speed=0.2..3, Weather=0..1, Hue=0..1\n//\n// Knob 1: Degree. The highest degree of the random spherical harmonics in both fields, the next degree fading in between whole numbers. The two curves hang only on the odd degrees, so at 3 they are cubic curves and meet at 1 to 9 pairs, 2.8 on average: one pair 36% of the time, three 42%, five 19%, seven 3%. 4 adds a finer even layer to the colours and the isobars and leaves the curves cubic; at 5 and 6 the curves are quintic, wind into loops and meet at up to 25 pairs, about 5 on average.\n// Knob 2: Speed. How fast the globe turns: at 2 once in 20 seconds round an axis leaning 24 degrees toward you, at 0.2 once in 200 seconds, at 3 once in 13. The curves and the pairs turn with it; a pair that slips over the rim comes back at once on the opposite rim, where its other point is rising.\n// Knob 3: Weather. How fast the temperature and the pressure change. At 0 each coefficient swings once in 56 to 168 seconds, the curves creep and a pair of pairs is born or dies about 12 times a minute at Degree 3; at 1 eight times faster, 7 to 21 seconds, about 74 times a minute. Pairs come and go two at a time, where the curves touch, so the count stays odd.\n// Knob 4: Hue. Turns the palette: at the start azure for cold and orange for warm with a magenta pressure curve; at 0.25 violet and green with red; at 0.5 red and cyan with green; at 0.75 green and violet with cyan. The temperature curve stays white and the pairs gold. Where cold or warm lands on orange or yellow the pale bands are lifted toward full brightness, so they never go brown or olive.\n\n// Each disk sits in a 64 x 64 square, the near side above the far side.\nconst S2 = 64;\nconst { floor, min, abs, sqrt, sin, cos, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The disks: radius RAD about the centre of each 64 x 64 square.\nconst RAD = 31, CX = 32, CY = 32;\n// Each field is a sum over AX zonal harmonics sqrt(2l+1) P_l(u . x) for every\n// degree l up to LMAX, each axis u wandering on a great circle.\nconst AX = 5, LMAX = 6;\n// The globe turns round an axis leaning TILT toward you.\nconst TILT = 0.42;\n// Grid seeds for Newton's method each frame, over one hemisphere.\nconst SEEDS = 72;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nfunction unit() {\n  for (;;) {\n    const x = 2 * random() - 1, y = 2 * random() - 1, z = 2 * random() - 1, r = x * x + y * y + z * z;\n    if (r > 0.01 && r \u003c 1) {\n      const k = 1 / sqrt(r);\n      return [x * k, y * k, z * k];\n    }\n  }\n}\n\n// One field: per axis a great circle (two orthonormal vectors and a speed)\n// and per degree a coefficient swinging with its own speed and phase.\nfunction field() {\n  const F = { e: [], w: [], amp: [], om: [], ph: [], u: new Float64Array(3 * AX), c: new Float64Array(AX * (LMAX + 1)) };\n  for (let j = 0; j \u003c AX; j++) {\n    const a = unit(), b0 = unit();\n    const d = a[0] * b0[0] + a[1] * b0[1] + a[2] * b0[2];\n    const b = [b0[0] - d * a[0], b0[1] - d * a[1], b0[2] - d * a[2]], bl = Math.hypot(b[0], b[1], b[2]);\n    F.e.push([a, [b[0] / bl, b[1] / bl, b[2] / bl], random() * TAU]);\n    F.w.push((0.08 + 0.12 * random()) * (random() \u003c 0.5 ? -1 : 1));\n    for (let l = 0; l \u003c= LMAX; l++) {\n      F.amp.push(l === 0 ? 0 : (random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.4 * random()));\n      F.om.push(0.15 + 0.3 * random());\n      F.ph.push(random() * TAU);\n    }\n  }\n  return F;\n}\n\n// Axes and coefficients at weather time t, with degree l weighted by how far\n// the Degree knob has come past it.\nfunction place(F, t, deg) {\n  for (let j = 0; j \u003c AX; j++) {\n    const [a, b, p] = F.e[j], th = p + F.w[j] * t, cs = cos(th), sn = sin(th);\n    for (let i = 0; i \u003c 3; i++) F.u[3 * j + i] = a[i] * cs + b[i] * sn;\n    for (let l = 1; l \u003c= LMAX; l++) {\n      const q = j * (LMAX + 1) + l, fade = cl(deg - l + 1, 0, 1);\n      F.c[q] = (fade * F.amp[q] * sqrt(2 * l + 1) * sin(F.om[q] * t + F.ph[q])) / Math.pow(l, 0.3);\n    }\n  }\n}\n\n// Even and odd parts of a field at unit vector x, and the gradient of the odd\n// part when grad is given: f(x) = even + odd, f(-x) = even - odd.\nfunction evalField(F, x, y, z, L, out, grad) {\n  let ev = 0, od = 0, gx = 0, gy = 0, gz = 0;\n  for (let j = 0; j \u003c AX; j++) {\n    const ux = F.u[3 * j], uy = F.u[3 * j + 1], uz = F.u[3 * j + 2], s = ux * x + uy * y + uz * z, base = j * (LMAX + 1);\n    let p0 = 1, p1 = s, d0 = 0, d1 = 1, o = F.c[base + 1] * p1, e = 0, dd = F.c[base + 1];\n    for (let l = 1; l \u003c L; l++) {\n      const p2 = ((2 * l + 1) * s * p1 - l * p0) / (l + 1), d2 = d0 + (2 * l + 1) * p1, c = F.c[base + l + 1];\n      if ((l + 1) & 1) {\n        o += c * p2;\n        dd += c * d2;\n      } else e += c * p2;\n      p0 = p1;\n      p1 = p2;\n      d0 = d1;\n      d1 = d2;\n    }\n    ev += e;\n    od += o;\n    if (grad) {\n      gx += dd * ux;\n      gy += dd * uy;\n      gz += dd * uz;\n    }\n  }\n  out[0] = ev;\n  out[1] = od;\n  if (grad) {\n    grad[0] = gx;\n    grad[1] = gy;\n    grad[2] = gz;\n  }\n}\n\nexport function setup(params) {\n  const P = S2 * S2;\n  // World direction of each pixel of the top square: x right, y up, z\n  // toward you, pulled onto the rim outside the disk.\n  const wx = new Float32Array(P), wy = new Float32Array(P), wz = new Float32Array(P), cov = new Float32Array(P);\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x, u = (x + 0.5 - CX) / RAD, v = (CY - y - 0.5) / RAD, r = sqrt(u * u + v * v);\n      cov[p] = cl((1 - r) * RAD + 0.5, 0, 1);\n      if (r \u003c 1) {\n        wx[p] = u;\n        wy[p] = v;\n        wz[p] = sqrt(1 - r * r);\n      } else {\n        wx[p] = u / r;\n        wy[p] = v / r;\n        wz[p] = 0;\n      }\n    }\n  // Seeds: a Fibonacci spiral over the upper hemisphere.\n  const seeds = [];\n  for (let i = 0; i \u003c SEEDS; i++) {\n    const z = (i + 0.5) / SEEDS, r = sqrt(1 - z * z), a = i * 2.39996323;\n    seeds.push([r * cos(a), r * sin(a), z]);\n  }\n  params.s = {\n    init: false, t: 0, wt: 0, deg: 3, L: 3, f: field(), g: field(), wx, wy, wz, cov, seeds,\n    fe: new Float32Array(P), fo: new Float32Array(P), ge: new Float32Array(P), go: new Float32Array(P),\n    lf: new Float32Array(P), lg: new Float32Array(P), roots: [], M: [1, 0, 0, 0, 1, 0, 0, 0, 1], hue: 0.06,\n    o1: [0, 0], o2: [0, 0], g1: [0, 0, 0], g2: [0, 0, 0], c: [0, 0, 0], d: [0, 0, 0],\n  };\n}\n\n// Newton's method on the sphere for fodd = godd = 0: the step is the\n// smallest tangent move that zeroes both linearised, taken from x and pulled\n// back onto the sphere.\nfunction newton(S, x0) {\n  let x = x0[0], y = x0[1], z = x0[2];\n  const { o1, o2, g1, g2 } = S;\n  for (let it = 0; it \u003c 24; it++) {\n    evalField(S.f, x, y, z, S.L, o1, g1);\n    evalField(S.g, x, y, z, S.L, o2, g2);\n    const F1 = o1[1], F2 = o2[1];\n    if (abs(F1) \u003c 1e-13 && abs(F2) \u003c 1e-13) return [x, y, z];\n    const d1 = g1[0] * x + g1[1] * y + g1[2] * z, d2 = g2[0] * x + g2[1] * y + g2[2] * z;\n    const ax = g1[0] - d1 * x, ay = g1[1] - d1 * y, az = g1[2] - d1 * z;\n    const bx = g2[0] - d2 * x, by = g2[1] - d2 * y, bz = g2[2] - d2 * z;\n    const a = ax * ax + ay * ay + az * az, b = ax * bx + ay * by + az * bz, c = bx * bx + by * by + bz * bz, det = a * c - b * b;\n    if (det \u003c 1e-14) return null;\n    const al = (-F1 * c + F2 * b) / det, be = (-F2 * a + F1 * b) / det;\n    let sx = al * ax + be * bx, sy = al * ay + be * by, sz = al * az + be * bz;\n    const sl = sqrt(sx * sx + sy * sy + sz * sz);\n    if (sl > 0.35) {\n      sx *= 0.35 / sl;\n      sy *= 0.35 / sl;\n      sz *= 0.35 / sl;\n    }\n    x += sx;\n    y += sy;\n    z += sz;\n    const n = 1 / sqrt(x * x + y * y + z * z);\n    x *= n;\n    y *= n;\n    z *= n;\n  }\n  evalField(S.f, x, y, z, S.L, o1);\n  evalField(S.g, x, y, z, S.L, o2);\n  return abs(o1[1]) \u003c 1e-10 && abs(o2[1]) \u003c 1e-10 ? [x, y, z] : null;\n}\n\n// All antipodal pairs, by Newton's method from three kinds of start: last\n// frame's pairs, every 2 x 2 block of LEDs on the near side where both odd\n// parts change sign, and a fixed spiral of seeds; each pair kept once.\nfunction findRoots(S) {\n  const found = [];\n  const add = (r) => {\n    if (!r) return;\n    for (const q of found) {\n      const d = (q[0] - r[0]) ** 2 + (q[1] - r[1]) ** 2 + (q[2] - r[2]) ** 2, e = (q[0] + r[0]) ** 2 + (q[1] + r[1]) ** 2 + (q[2] + r[2]) ** 2;\n      if (d \u003c 1e-8 || e \u003c 1e-8) return;\n    }\n    found.push(r);\n  };\n  for (const r of S.roots) add(newton(S, r));\n  const { fo, go, wx, wy, wz, M } = S;\n  for (let y = 0; y \u003c S2 - 1; y++)\n    for (let x = 0; x \u003c S2 - 1; x++) {\n      const p = y * S2 + x, q = [p, p + 1, p + S2, p + S2 + 1];\n      let fp = 0, fn = 0, gp = 0, gn = 0;\n      for (const i of q) {\n        if (fo[i] > 0) fp = 1;\n        else fn = 1;\n        if (go[i] > 0) gp = 1;\n        else gn = 1;\n      }\n      if (!(fp && fn && gp && gn)) continue;\n      const X = wx[p], Y = wy[p], Z = wz[p];\n      add(newton(S, [M[0] * X + M[1] * Y + M[2] * Z, M[3] * X + M[4] * Y + M[5] * Z, M[6] * X + M[7] * Y + M[8] * Z]));\n    }\n  for (const s of S.seeds) add(newton(S, s));\n  S.roots = found;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.deg = cl(k[0], 3, 6);\n  S.L = Math.ceil(S.deg - 1e-9);\n  const speed = cl(k[1], 0.2, 3), weather = 0.25 + 1.75 * cl(k[2], 0, 1);\n  S.hue = k[3];\n  S.t += d * speed;\n  S.wt += d * weather;\n  place(S.f, S.wt + 3, S.deg);\n  place(S.g, S.wt + 3, S.deg);\n  // Body from world: undo the lean, then the turn.\n  const ph = S.t * 0.025 * TAU, cp = cos(ph), sp = sin(ph), ct = cos(TILT), st = sin(TILT);\n  // World = Rx(TILT) Ry(ph) body; body = Ry(-ph) Rx(-TILT) world.\n  // Rx(-TILT): (x, y, z) -> (x, ct y + st z, -st y + ct z).\n  // Ry(-ph): (x, y, z) -> (cp x - sp z, y, sp x + cp z).\n  S.M = [cp, sp * st, -sp * ct, 0, ct, st, sp, -cp * st, cp * ct];\n  const { wx, wy, wz, fe, fo, ge, go, o1, o2, M } = S, L = S.L;\n  for (let p = 0; p \u003c S2 * S2; p++) {\n    const X = wx[p], Y = wy[p], Z = wz[p];\n    const x = M[0] * X + M[1] * Y + M[2] * Z, y = M[3] * X + M[4] * Y + M[5] * Z, z = M[6] * X + M[7] * Y + M[8] * Z;\n    evalField(S.f, x, y, z, L, o1);\n    evalField(S.g, x, y, z, L, o2);\n    fe[p] = o1[0];\n    fo[p] = o1[1];\n    ge[p] = o2[0];\n    go[p] = o2[1];\n  }\n  findRoots(S);\n}\n\n// Length of the screen gradient of A + sgn B at LED (x, y), per LED.\nfunction slope(A, B, sgn, x, y) {\n  const p = y * S2 + x, xl = x > 0 ? p - 1 : p, xr = x \u003c S2 - 1 ? p + 1 : p, yu = y > 0 ? p - S2 : p, yd = y \u003c S2 - 1 ? p + S2 : p;\n  const gx = (A[xr] - A[xl] + sgn * (B[xr] - B[xl])) / (xr - xl), gy = (A[yd] - A[yu] + sgn * (B[yd] - B[yu])) / ((yd - yu) / S2);\n  return sqrt(gx * gx + gy * gy) + 1e-9;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { fe, fo, ge, go, cov, wz, c } = S;\n  const h0 = 0.52 + S.hue, FS = 2.2, ISO = 2, gc = S.d;\n  // Orange and yellow go brown and olive when dim, so near hue 0.12 the\n  // pale bands are lifted toward full brightness.\n  const yl = [0, 0.5].map((o) => {\n    const h = h0 + o - floor(h0 + o);\n    return 0.7 * cl(1 - abs(h - 0.12) / 0.11, 0, 1);\n  });\n  hsv(h0 + 0.25, 0.75, 1, gc);\n  // Screen places of the pairs: the member that faces you.\n  const pts = [];\n  for (const r of S.roots) {\n    const M = S.M;\n    // World from body is the transpose of M.\n    let X = M[0] * r[0] + M[3] * r[1] + M[6] * r[2], Y = M[1] * r[0] + M[4] * r[1] + M[7] * r[2], Z = M[2] * r[0] + M[5] * r[1] + M[8] * r[2];\n    if (Z \u003c 0) {\n      X = -X;\n      Y = -Y;\n      Z = -Z;\n    }\n    pts.push([CX + X * RAD, CY - Y * RAD]);\n  }\n  const pulse = 0.75 + 0.25 * sin(S.t * 3), { lf, lg } = S;\n  // The two odd curves, the same in both disks: fodd(-x) = -fodd(x).\n  for (let y = 0; y \u003c S2; y++)\n    for (let x = 0; x \u003c S2; x++) {\n      const p = y * S2 + x;\n      lf[p] = cl(1.25 - abs(fo[p]) / slope(fo, fo, 0, x, y), 0, 1) * cov[p];\n      lg[p] = cl(1.15 - abs(go[p]) / slope(go, go, 0, x, y), 0, 1) * cov[p];\n    }\n  for (let half = 0; half \u003c 2; half++) {\n    const sg = half ? -1 : 1;\n    for (let y = 0; y \u003c S2; y++)\n      for (let x = 0; x \u003c S2; x++) {\n        const p = y * S2 + x, a = cov[p];\n        if (a \u003c= 0) {\n          display.setPixel(x, y + half * S2, 0, 0, 0);\n          continue;\n        }\n        // Temperature: two tones apart from a pale middle, in soft bands.\n        const tv = cl((fe[p] + sg * fo[p]) / FS, -1, 1), m = abs(tv) * 4, band = (floor(m) + sm(0.35, 0.65, m - floor(m))) / 4;\n        const side = tv \u003c 0 ? 0 : 1, v0 = 0.6 + 0.4 * band;\n        hsv(h0 + 0.5 * side, 0.1 + 0.72 * band, v0 + (1 - v0) * yl[side] * sm(0, 0.4, band), c);\n        let shade = (0.86 + 0.14 * wz[p]) * a;\n        // Pressure: a few contour lines, darker.\n        const gv = (ge[p] + sg * go[p]) / ISO, fr = abs(gv - round(gv)) * ISO;\n        shade *= 1 - 0.55 * cl(0.95 - fr / slope(ge, go, sg, x, y), 0, 1);\n        let R = c[0] * shade, G = c[1] * shade, B = c[2] * shade;\n        // The curve godd = 0, where the pressure is the same at the antipode.\n        const ga = lg[p];\n        R += (gc[0] - R) * ga;\n        G += (gc[1] - G) * ga;\n        B += (gc[2] - B) * ga;\n        // The curve fodd = 0, where the temperature is.\n        const fa = lf[p];\n        R += (1 - R) * fa;\n        G += (1 - G) * fa;\n        B += (1 - B) * fa;\n        // The pairs: a gold core inside a dark ring, and a glow round it.\n        for (const q of pts) {\n          const dd = Math.hypot(x + 0.5 - q[0], y + 0.5 - q[1]);\n          if (dd >= 6.5) continue;\n          if (dd \u003c 2.1) {\n            R = 1;\n            G = 0.86;\n            B = 0.45;\n          } else if (dd \u003c 3.2) {\n            R *= 0.12;\n            G *= 0.12;\n            B *= 0.12;\n          } else {\n            const gw = pulse * 0.9 * (1 - (dd - 3.2) / 3.3) ** 1.5;\n            R += (1 - R) * gw;\n            G += (0.86 - G) * gw;\n            B += (0.45 - B) * gw * 0.5;\n          }\n        }\n        display.setPixel(x, y + half * S2, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Degree=3..6, Speed=0.2..3, Weather=0..1, Hue=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Degree","min":3,"max":6,"about":"The highest degree of the random spherical harmonics in both fields, the next degree fading in between whole numbers. The two curves hang only on the odd degrees, so at 3 they are cubic curves and meet at 1 to 9 pairs, 2.8 on average: one pair 36% of the time, three 42%, five 19%, seven 3%. 4 adds a finer even layer to the colours and the isobars and leaves the curves cubic; at 5 and 6 the curves are quintic, wind into loops and meet at up to 25 pairs, about 5 on average."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the globe turns: at 2 once in 20 seconds round an axis leaning 24 degrees toward you, at 0.2 once in 200 seconds, at 3 once in 13. The curves and the pairs turn with it; a pair that slips over the rim comes back at once on the opposite rim, where its other point is rising."},{"name":"Weather","min":0,"max":1,"about":"How fast the temperature and the pressure change. At 0 each coefficient swings once in 56 to 168 seconds, the curves creep and a pair of pairs is born or dies about 12 times a minute at Degree 3; at 1 eight times faster, 7 to 21 seconds, about 74 times a minute. Pairs come and go two at a time, where the curves touch, so the count stays odd."},{"name":"Hue","min":0,"max":1,"about":"Turns the palette: at the start azure for cold and orange for warm with a magenta pressure curve; at 0.25 violet and green with red; at 0.5 red and cyan with green; at 0.75 green and violet with cyan. The temperature curve stays white and the pairs gold. Where cold or warm lands on orange or yellow the pale bands are lifted toward full brightness, so they never go brown or olive."}],"start":[3,2,0,0.06],"measures":{"motion":0.3065,"detail":0.0677,"edges":0.3854,"complexity":1.6473,"coverage":0.7507,"colour":0.3391,"drift":0.0903},"knobResponse":[0.1438,0.1696,0.1763,0.2221]},{"slug":"bowling-lane","title":"Bowling Lane","family":"sport","round":22,"note":"볼러 뒤에서 본 10핀 레인이에요. 공이 오일 위로 제 반사를 끌며 휘어 올라가 핀을 흩고, 스위프 바가 데드우드를 쓸어 낸 뒤 핀이 다시 서요. 처음에는 블랙라이트 아래 핀과 화살표, 오일이 빛나고, K4 를 올리면 나무 레인에 하우스 조명이 켜져요.","idea":"A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.","buttons":"K1 tap throws the next ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-bowling-lane","type":"code","name":"bowling-lane","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Ball","min":0,"max":1,"about":"The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins."},{"name":"Hook","min":0,"max":1,"about":"How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side."},{"name":"Lights","min":0,"max":1,"about":"Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.1625,"detail":0.0689,"edges":0.5323,"complexity":1.7471,"coverage":0.9404,"colour":0.2104,"drift":0.042},"knobResponse":[0.0566,0.0281,0.0252,0.2377]},{"slug":"boys-surface","title":"Boy's Surface","family":"topology","round":31,"note":"사영 평면을 3차원에 담은 보이 곡면이 위 칸에서 세 겹 대칭축으로 돌고, 수평면이 오르내리며 자른 곡선이 아래 칸에 위에서 본 그림으로 떠요. 평면 아래는 단단하고 위는 옅은 유리라 안쪽에서 앞면과 뒷면이 만나는 이음매가 보여요. K1 을 누르면 평면이 삼중점에 멈춰 세 고리가 한 점을 지나요.","idea":"Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.","buttons":"K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.","code":"// ===== Patternflow pattern =====\n// Title:   Boy's Surface\n// Family:  topology\n// Idea:    Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Boy's surface (Werner Boy, 1901), in the parametrisation of Robert Bryant and Rob Kusner, pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan.\n// Knob 2: Speed. At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut.\n// Knob 4: Bands. Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light.\n// Buttons: K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.\n\nconst W = 64, S = 64, N = W * 128;\nconst { min, max, floor, sqrt, sin, cos, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The disk is sampled on NR rings of NA points; ring 0 is the centre.\nconst NR = 64, NA = 192, NP = (NR + 1) * NA, NC = NR * NA;\n// The surface lies within 1.571 of (0, 0, ZC), so 19.4 LEDs a unit keeps\n// it inside its square at every turn and tilt. The triple point is at the\n// origin, the top of the lobes at z = 0.443 and the pole at z = -2.\nconst ZC = -0.779, SC = 19.4, CX = 31.5, CY = 31.5, PY = 64 + 31.5;\nconst Z0 = -1.45, Z1 = 0.3;\n\n// Bryant and Kusner's formula for one point w = re + i im of the closed\n// unit disk, written out in real arithmetic.\nconst S5 = sqrt(5);\nfunction boy(re, im, out, o) {\n  const r2 = re * re - im * im, i2 = 2 * re * im;\n  const r3 = r2 * re - i2 * im, i3 = r2 * im + i2 * re;\n  const r4 = r2 * r2 - i2 * i2, i4 = 2 * r2 * i2;\n  const r6 = r3 * r3 - i3 * i3, i6 = 2 * r3 * i3;\n  const dr = r6 + S5 * r3 - 1, di = i6 + S5 * i3, dd = dr * dr + di * di;\n  // w (1 - w^4), w (1 + w^4) and 1 + w^6, each over the denominator.\n  const ar = re * (1 - r4) + im * i4, ai = im * (1 - r4) - re * i4;\n  const br = re * (1 + r4) - im * i4, bi = im * (1 + r4) + re * i4;\n  const g1 = (-1.5 * (ai * dr - ar * di)) / dd;\n  const g2 = (-1.5 * (br * dr + bi * di)) / dd;\n  const g3 = (i6 * dr - (1 + r6) * di) / dd - 0.5;\n  const g = g1 * g1 + g2 * g2 + g3 * g3;\n  out[o] = g1 / g;\n  out[o + 1] = g2 / g;\n  out[o + 2] = g3 / g;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points, normals and cells, once. The normal is\n// d/dRe x d/dIm of the map, the orientation of the disk: across the seam,\n// where antipodal points of the boundary circle meet, it points the other\n// way, and the colours follow it.\nfunction build(G) {\n  const P = G.p, Nn = G.n, T = new Float64Array(12);\n  for (let i = 0; i \u003c= NR; i++) {\n    const r = i / NR;\n    for (let j = 0; j \u003c NA; j++) {\n      const a = (TAU * j) / NA, re = r * cos(a), im = r * sin(a), k = i * NA + j, h = 1e-4;\n      boy(re, im, P, k * 3);\n      boy(re + h, im, T, 0);\n      boy(re - h, im, T, 3);\n      boy(re, im + h, T, 6);\n      boy(re, im - h, T, 9);\n      const ux = T[0] - T[3], uy = T[1] - T[4], uz = T[2] - T[5], vx = T[6] - T[9], vy = T[7] - T[10], vz = T[8] - T[11];\n      let nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;\n      const l = 1 / (sqrt(nx * nx + ny * ny + nz * nz) + 1e-30);\n      Nn[k * 3] = nx * l;\n      Nn[k * 3 + 1] = ny * l;\n      Nn[k * 3 + 2] = nz * l;\n    }\n  }\n  // The corners of each grid cell, and its mean height, which decides\n  // whether it is under the plane.\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j, o = c * 4, q = [c, c + NA, (i + 1) * NA + ((j + 1) % NA), i * NA + ((j + 1) % NA)];\n      for (let e = 0; e \u003c 4; e++) G.cc[o + e] = q[e];\n      G.cz[c] = (P[q[0] * 3 + 2] + P[q[1] * 3 + 2] + P[q[2] * 3 + 2] + P[q[3] * 3 + 2]) / 4;\n    }\n  // Cells of the grid by height: bin b lists every cell whose corners span\n  // a height in it, so the cut only looks at the cells near the plane.\n  const cnt = new Int32Array(NB + 1), lo = new Int32Array(NR * NA), hi = new Int32Array(NR * NA);\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j;\n      let a = 9, b = -9;\n      for (let e = 0; e \u003c 4; e++) (a = min(a, P[G.cc[c * 4 + e] * 3 + 2])), (b = max(b, P[G.cc[c * 4 + e] * 3 + 2]));\n      lo[c] = bin(a);\n      hi[c] = bin(b);\n      for (let k = lo[c]; k \u003c= hi[c]; k++) cnt[k + 1]++;\n    }\n  for (let k = 0; k \u003c NB; k++) cnt[k + 1] += cnt[k];\n  G.binAt = cnt.slice();\n  G.cells = new Int32Array(cnt[NB]);\n  for (let c = 0; c \u003c NR * NA; c++) for (let k = lo[c]; k \u003c= hi[c]; k++) G.cells[cnt[k]++] = c;\n}\n\n// Height bins for the cut, from the pole at -2 to the top at 0.45.\nconst NB = 96;\nconst bin = (z) => cl(floor(((z + 2.01) / 2.47) * NB), 0, NB - 1);\n\nexport function setup(params) {\n  const A = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    p: A(NP * 3), n: A(NP * 3), cc: I(NC * 4), cz: A(NC), binAt: null, cells: null,\n    // Each point's place in the side view, its depth there, and its row in the plan.\n    vx: A(NP), vy: A(NP), vd: A(NP), vp: A(NP),\n    // Depth and point per LED: the side view under the plane and over it,\n    // and the plan, which looks straight down on what is under it.\n    za: A(W * S), ia: I(W * S), zo: A(W * S), io: I(W * S), zp: A(W * S), ip: I(W * S),\n    line: A(N), col: A(N * 3), pal: A(12), c3: A(3), seg: A(4096 * 2), band: A(NR + 1),\n    L: [0, 1, 2].map(() => ({ a: A(W * S), b: A(W * S), c: A(W * S), f: new Int8Array(W * S), g: new Int8Array(W * S) })),\n    az: 0.4, sw: PI / 2, hold: 0, hw: 0, hue: 0, tilt: 0, bands: 0.06, zc: -0.5, palHue: -1, built: false,\n  };\n}\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const G = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  if (!G.built) build(G), (G.built = true);\n  G.hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3);\n  G.tilt = cl(k[2], 0, 1);\n  G.bands = cl(k[3], 0, 1);\n  // A third of a turn in 8.7 s and one sweep of the plane in 20 s at Speed 2.\n  G.az += d * sp * 0.12;\n  G.sw += (d * sp * TAU) / 40;\n  const b = input.btnPressed || [];\n  if (b[0]) G.hold = 6.6;\n  G.hold = max(0, G.hold - d);\n  // The plane eases over to the triple point, at z = 0, in 0.8 s, and back\n  // to its sweep in 0.8 s once the hold is over.\n  G.hw = cl(G.hw + (G.hold > 0.8 ? d : -d) / 0.8, 0, 1);\n  const zs = Z0 + (Z1 - Z0) * (0.5 - 0.5 * cos(G.sw));\n  G.zc = zs * (1 - sm(G.hw));\n}\n\n// Two colours for each face of the disk, one in the light and one in\n// shadow. A dim orange or yellow reads brown, so a face whose hue lies\n// between red and yellow turns crimson in shadow, and one between yellow\n// and green turns green; other faces lean a little toward violet.\nfunction palette(G) {\n  const t = G.pal;\n  for (let f = 0; f \u003c 2; f++) {\n    let h = G.hue + (f ? 0.52 : 0.92);\n    h -= floor(h);\n    const sh = h \u003c 0.17 ? 0.94 : h \u003c 0.33 ? 0.33 : h + cl(0.7 - h, -0.04, 0.04);\n    hsv(h, f ? 0.8 : 0.7, 1, t, f * 3);\n    hsv(sh, 0.85, 1, t, 6 + f * 3);\n  }\n  G.palHue = G.hue;\n}\n\n// A soft line one LED wide into the light buffer: points every half LED,\n// each shared between its four nearest LEDs.\nfunction soft(buf, x0, y0, x1, y1, w, ylo, yhi) {\n  const n = max(1, Math.ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) * 2)), ww = (w * sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2)) / n;\n  for (let i = 0; i \u003c n; i++) {\n    const t = (i + 0.5) / n, x = x0 + (x1 - x0) * t - 0.5, y = y0 + (y1 - y0) * t - 0.5;\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy;\n    for (let c = 0; c \u003c 4; c++) {\n      const xx = ix + (c & 1), yy = iy + (c >> 1);\n      if (xx \u003c 0 || xx >= W || yy \u003c ylo || yy >= yhi) continue;\n      buf[yy * W + xx] += ww * (c & 1 ? fx : 1 - fx) * (c >> 1 ? fy : 1 - fy);\n    }\n  }\n}\n\n// The colour of point k on face f in a view whose right, up and\n// toward-the-eye axes carry the normal to (a, b, c), into G.c3. The light is\n// two-sided Lambert from upper left in front, with a highlight, and the\n// disk's circles stripe it.\nfunction shade(G, k, a, b, c, gain, f) {\n  const pal = G.pal, sg = f ? -1 : 1, o = f * 3, so = 6 + o;\n  const ld = max(0, sg * (a * LX + b * LY + c * LZ)), h2 = max(0, sg * (a * HX + b * HY + c * HZ)) ** 2, h8 = (h2 * h2) ** 2;\n  // The shadow colour gives way to the lit one with the square of the light,\n  // and later still in the dimmed glass and plan.\n  const lit = (0.24 + 0.76 * ld) * G.band[(k / NA) | 0] * gain, sp = h8 * h8 * h8 * 0.55 * gain, m = ld * ld * gain;\n  G.c3[0] = ((pal[so] + (pal[o] - pal[so]) * m) * lit + sp) * 255;\n  G.c3[1] = ((pal[so + 1] + (pal[o + 1] - pal[so + 1]) * m) * lit + sp) * 255;\n  G.c3[2] = ((pal[so + 2] + (pal[o + 2] - pal[so + 2]) * m) * lit + sp) * 255;\n}\nconst LX = -0.45, LY = 0.62, LZ = 0.64, HL = 1 / sqrt(LX * LX + LY * LY + (LZ + 1) ** 2), HX = LX * HL, HY = LY * HL, HZ = (LZ + 1) * HL;\n\n// One grid cell into a depth buffer: every LED whose centre lies in the\n// box round its four corners. The boxes of neighbouring cells overlap, so\n// the turning surface has no holes.\nfunction fill(zb, ib, X, Y, cc, o, D, k) {\n  const a = cc[o], b = cc[o + 1], c = cc[o + 2], d = cc[o + 3];\n  let xa = X[a], xb = X[b], ya = Y[a], yb = Y[b];\n  if (xa > xb) (xb = xa), (xa = X[b]);\n  if (ya > yb) (yb = ya), (ya = Y[b]);\n  let t = X[c];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = X[d];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = Y[c];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  t = Y[d];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  // LED centres sit at whole numbers plus a half.\n  let x0 = (xa - 0.5) | 0, y0 = (ya - 0.5) | 0, x1 = (xb + 0.5) | 0, y1 = (yb + 0.5) | 0;\n  if (xa - 0.5 > x0) x0++;\n  if (ya - 0.5 > y0) y0++;\n  if (x0 \u003c 0) x0 = 0;\n  if (y0 \u003c 0) y0 = 0;\n  if (x1 > W) x1 = W;\n  if (y1 > S) y1 = S;\n  for (let yy = y0; yy \u003c y1; yy++) for (let q = yy * W + x0, qe = yy * W + x1; q \u003c qe; q++) if (D > zb[q]) (zb[q] = D), (ib[q] = k);\n}\n\n// Every cell into the side view's solid or glass layer by its mean height,\n// at the mean depth of its corners, and the solid ones into the plan too.\nfunction cellsIn(G, zc) {\n  const { cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip } = G;\n  for (let c = 0, o = 0; c \u003c NC; c++, o += 4) {\n    const k = cc[o], D = (vd[k] + vd[cc[o + 1]] + vd[cc[o + 2]] + vd[cc[o + 3]]) * 0.25;\n    if (cz[c] \u003c= zc) fill(za, ia, vx, vy, cc, o, D, k), fill(zp, ip, vx, vp, cc, o, cz[c], k);\n    else fill(zo, io, vx, vy, cc, o, D, k);\n  }\n}\n\n// The normal of each LED's point in the eye's frame (right, up, toward the\n// eye; the plan looks down the axis) and the face of the disk it shows. A\n// lone LED showing the other face from every lit neighbour is a cell's box\n// poking past a fold, and takes their face.\nfunction normals(G, ids, ca, sa, ce, se, plan, L) {\n  const n = G.n, { a, b, c, f, g } = L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const k = ids[q];\n    if (k \u003c 0) {\n      f[q] = -1;\n      continue;\n    }\n    const nx = n[k * 3], ny = n[k * 3 + 1], nz = n[k * 3 + 2], nyr = nx * sa + ny * ca;\n    a[q] = nx * ca - ny * sa;\n    b[q] = plan ? nyr : nyr * se + nz * ce;\n    c[q] = plan ? nz : nz * se - nyr * ce;\n    f[q] = c[q] >= 0 ? 0 : 1;\n  }\n  for (let q = 0; q \u003c W * S; q++) {\n    const fq = (g[q] = f[q]);\n    if (fq \u003c 0) continue;\n    const x = q & (W - 1), l = x > 0 ? f[q - 1] : -1, r = x \u003c W - 1 ? f[q + 1] : -1, u = q >= W ? f[q - W] : -1, d = q \u003c W * S - W ? f[q + W] : -1;\n    if (l !== fq && r !== fq && u !== fq && d !== fq && (l >= 0) + (r >= 0) + (u >= 0) + (d >= 0) >= 2) g[q] = 1 - fq;\n  }\n}\n\nexport function draw(display, params) {\n  const G = params.s;\n  if (!G || !G.built) return;\n  if (G.palHue !== G.hue) palette(G);\n  const { p, n, cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip, line, col, seg, c3 } = G;\n  const ca = cos(G.az), sa = sin(G.az), el = (22 + 68 * G.tilt) * (PI / 180), ce = cos(el), se = sin(el), zc = G.zc;\n  // The disk's circles: each ring of the grid is lit by its band, from 1.2\n  // on the light stripes to 0.35 in the middle of the dark ones.\n  const nb = 2 + 7 * G.bands;\n  for (let i = 0; i \u003c= NR; i++) G.band[i] = 1.2 - 0.85 * (0.5 - 0.5 * cos((TAU * nb * (NR - i)) / NR));\n  za.fill(-1e9);\n  zo.fill(-1e9);\n  zp.fill(-1e9);\n  ia.fill(-1);\n  io.fill(-1);\n  ip.fill(-1);\n  // The side view in two layers: what is under the plane is solid, what is\n  // over it is glass. The plan takes what is under the plane, nearest the\n  // eye above first.\n  for (let k = 0, o = 0; k \u003c NP; k++, o += 3) {\n    const x = p[o], y = p[o + 1], z = p[o + 2], xr = x * ca - y * sa, yr = x * sa + y * ca;\n    vx[k] = CX + SC * xr;\n    vy[k] = CY - SC * (yr * se + (z - ZC) * ce);\n    vd[k] = z * se - yr * ce;\n    vp[k] = CY - SC * yr;\n  }\n  cellsIn(G, zc);\n  normals(G, ia, ca, sa, ce, se, false, G.L[0]);\n  normals(G, io, ca, sa, ce, se, false, G.L[1]);\n  normals(G, ip, ca, sa, ce, se, true, G.L[2]);\n  const [A, O, Pl] = G.L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const o = q * 3, oo = (W * S + q) * 3;\n    let r = 0, g = 0, b = 0, k = ia[q];\n    if (k >= 0) shade(G, k, A.a[q], A.b[q], A.c[q], 1, A.g[q]), (r = c3[0]), (g = c3[1]), (b = c3[2]);\n    k = io[q];\n    if (k >= 0 && zo[q] > za[q]) {\n      // Glass: 60 percent of its own light over 55 of what is behind.\n      shade(G, k, O.a[q], O.b[q], O.c[q], 0.6, O.g[q]);\n      (r = r * 0.55 + c3[0]), (g = g * 0.55 + c3[1]), (b = b * 0.55 + c3[2]);\n    }\n    (col[o] = r), (col[o + 1] = g), (col[o + 2] = b);\n    k = ip[q];\n    if (k >= 0) shade(G, k, Pl.a[q], Pl.b[q], Pl.c[q], 0.5, Pl.g[q]), (col[oo] = c3[0]), (col[oo + 1] = c3[1]), (col[oo + 2] = c3[2]);\n    else col[oo] = col[oo + 1] = col[oo + 2] = 0;\n  }\n  // The cut: in each grid cell the plane crosses, the points where it\n  // crosses the cell's edges, two to a piece of the curve (four in a\n  // saddle, paired in order round the cell).\n  line.fill(0);\n  let ns = 0;\n  const bz = bin(zc), cells = G.cells, zs = [0, 0, 0, 0], cs = [0, 0, 0, 0];\n  for (let m = G.binAt[bz]; m \u003c G.binAt[bz + 1] && ns \u003c 2040; m++) {\n    const c = cells[m];\n    for (let e = 0; e \u003c 4; e++) cs[e] = cc[c * 4 + e];\n    let up = 0;\n    for (let e = 0; e \u003c 4; e++) up += (zs[e] = p[cs[e] * 3 + 2] - zc) > 0;\n    if (up === 0 || up === 4) continue;\n    for (let e = 0; e \u003c 4; e++) {\n      const z0 = zs[e], z1 = zs[(e + 1) & 3];\n      if (z0 > 0 === z1 > 0) continue;\n      const t = z0 / (z0 - z1), A = cs[e] * 3, B = cs[(e + 1) & 3] * 3;\n      seg[ns * 2] = p[A] + (p[B] - p[A]) * t;\n      seg[ns * 2 + 1] = p[A + 1] + (p[B + 1] - p[A + 1]) * t;\n      ns++;\n    }\n  }\n  // Each piece soft in both views; in the side view a piece behind the\n  // solid is faint.\n  for (let s = 0; s + 1 \u003c ns; s += 2) {\n    const ax = seg[s * 2], ay = seg[s * 2 + 1], bx = seg[s * 2 + 2], by = seg[s * 2 + 3];\n    const axr = ax * ca - ay * sa, ayr = ax * sa + ay * ca, bxr = bx * ca - by * sa, byr = bx * sa + by * ca;\n    const X0 = CX + SC * axr, X1 = CX + SC * bxr, Y0 = CY - SC * (ayr * se + (zc - ZC) * ce), Y1 = CY - SC * (byr * se + (zc - ZC) * ce);\n    const D = zc * se - ((ayr + byr) / 2) * ce, qx = Math.round((X0 + X1) / 2 - 0.5), qy = Math.round((Y0 + Y1) / 2 - 0.5);\n    const zq = qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c S ? za[qy * W + qx] : -1e9;\n    soft(line, X0, Y0, X1, Y1, D > zq - 0.1 ? 1 : 0.22, 0, S);\n    soft(line, X0, PY - SC * ayr, X1, PY - SC * byr, 1, S, 128);\n  }\n  // Ticks at the two edges of the side view mark the plane's height on the\n  // axis.\n  const ty = CY - SC * (zc - ZC) * ce, ty0 = floor(ty - 0.5), fy = ty - 0.5 - ty0;\n  for (const x of [0, 1, 62, 63])\n    for (let c = 0; c \u003c 2; c++) {\n      const yy = ty0 + c;\n      if (yy >= 0 && yy \u003c S) line[yy * W + x] += (c ? fy : 1 - fy) * (x === 0 || x === 63 ? 1 : 0.45);\n    }\n  for (let q = 0, o = 0; q \u003c N; q++, o += 3) {\n    const l = min(1, line[q] * 1.1);\n    const r = min(255, col[o]), g = min(255, col[o + 1]), b = min(255, col[o + 2]);\n    display.setPixel(q % W, (q / W) | 0, r + (255 - r) * l, g + (244 - g) * l, b + (205 - b) * l);\n  }\n}\n","layer":{"id":"layer-boys-surface","type":"code","name":"boys-surface","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Boy's Surface\n// Family:  topology\n// Idea:    Boy's immersion of the projective plane turns slowly about its three-fold axis in the top square while a level plane sweeps up and down through it, and the bottom square looks down on the cut: one closed curve that changes shape with the height and crosses itself three ways at the triple point, over a surface coloured warm on one face and cool on the other so the seam where the two meet shows it has only one side.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Boy's surface (Werner Boy, 1901), in the parametrisation of Robert Bryant and Rob Kusner, pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan.\n// Knob 2: Speed. At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut.\n// Knob 4: Bands. Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light.\n// Buttons: K1 tap brings the plane to the height of the triple point in under a second and holds it there five seconds, where the cut is three loops through one point.\n\nconst W = 64, S = 64, N = W * 128;\nconst { min, max, floor, sqrt, sin, cos, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The disk is sampled on NR rings of NA points; ring 0 is the centre.\nconst NR = 64, NA = 192, NP = (NR + 1) * NA, NC = NR * NA;\n// The surface lies within 1.571 of (0, 0, ZC), so 19.4 LEDs a unit keeps\n// it inside its square at every turn and tilt. The triple point is at the\n// origin, the top of the lobes at z = 0.443 and the pole at z = -2.\nconst ZC = -0.779, SC = 19.4, CX = 31.5, CY = 31.5, PY = 64 + 31.5;\nconst Z0 = -1.45, Z1 = 0.3;\n\n// Bryant and Kusner's formula for one point w = re + i im of the closed\n// unit disk, written out in real arithmetic.\nconst S5 = sqrt(5);\nfunction boy(re, im, out, o) {\n  const r2 = re * re - im * im, i2 = 2 * re * im;\n  const r3 = r2 * re - i2 * im, i3 = r2 * im + i2 * re;\n  const r4 = r2 * r2 - i2 * i2, i4 = 2 * r2 * i2;\n  const r6 = r3 * r3 - i3 * i3, i6 = 2 * r3 * i3;\n  const dr = r6 + S5 * r3 - 1, di = i6 + S5 * i3, dd = dr * dr + di * di;\n  // w (1 - w^4), w (1 + w^4) and 1 + w^6, each over the denominator.\n  const ar = re * (1 - r4) + im * i4, ai = im * (1 - r4) - re * i4;\n  const br = re * (1 + r4) - im * i4, bi = im * (1 + r4) + re * i4;\n  const g1 = (-1.5 * (ai * dr - ar * di)) / dd;\n  const g2 = (-1.5 * (br * dr + bi * di)) / dd;\n  const g3 = (i6 * dr - (1 + r6) * di) / dd - 0.5;\n  const g = g1 * g1 + g2 * g2 + g3 * g3;\n  out[o] = g1 / g;\n  out[o + 1] = g2 / g;\n  out[o + 2] = g3 / g;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Points, normals and cells, once. The normal is\n// d/dRe x d/dIm of the map, the orientation of the disk: across the seam,\n// where antipodal points of the boundary circle meet, it points the other\n// way, and the colours follow it.\nfunction build(G) {\n  const P = G.p, Nn = G.n, T = new Float64Array(12);\n  for (let i = 0; i \u003c= NR; i++) {\n    const r = i / NR;\n    for (let j = 0; j \u003c NA; j++) {\n      const a = (TAU * j) / NA, re = r * cos(a), im = r * sin(a), k = i * NA + j, h = 1e-4;\n      boy(re, im, P, k * 3);\n      boy(re + h, im, T, 0);\n      boy(re - h, im, T, 3);\n      boy(re, im + h, T, 6);\n      boy(re, im - h, T, 9);\n      const ux = T[0] - T[3], uy = T[1] - T[4], uz = T[2] - T[5], vx = T[6] - T[9], vy = T[7] - T[10], vz = T[8] - T[11];\n      let nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;\n      const l = 1 / (sqrt(nx * nx + ny * ny + nz * nz) + 1e-30);\n      Nn[k * 3] = nx * l;\n      Nn[k * 3 + 1] = ny * l;\n      Nn[k * 3 + 2] = nz * l;\n    }\n  }\n  // The corners of each grid cell, and its mean height, which decides\n  // whether it is under the plane.\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j, o = c * 4, q = [c, c + NA, (i + 1) * NA + ((j + 1) % NA), i * NA + ((j + 1) % NA)];\n      for (let e = 0; e \u003c 4; e++) G.cc[o + e] = q[e];\n      G.cz[c] = (P[q[0] * 3 + 2] + P[q[1] * 3 + 2] + P[q[2] * 3 + 2] + P[q[3] * 3 + 2]) / 4;\n    }\n  // Cells of the grid by height: bin b lists every cell whose corners span\n  // a height in it, so the cut only looks at the cells near the plane.\n  const cnt = new Int32Array(NB + 1), lo = new Int32Array(NR * NA), hi = new Int32Array(NR * NA);\n  for (let i = 0; i \u003c NR; i++)\n    for (let j = 0; j \u003c NA; j++) {\n      const c = i * NA + j;\n      let a = 9, b = -9;\n      for (let e = 0; e \u003c 4; e++) (a = min(a, P[G.cc[c * 4 + e] * 3 + 2])), (b = max(b, P[G.cc[c * 4 + e] * 3 + 2]));\n      lo[c] = bin(a);\n      hi[c] = bin(b);\n      for (let k = lo[c]; k \u003c= hi[c]; k++) cnt[k + 1]++;\n    }\n  for (let k = 0; k \u003c NB; k++) cnt[k + 1] += cnt[k];\n  G.binAt = cnt.slice();\n  G.cells = new Int32Array(cnt[NB]);\n  for (let c = 0; c \u003c NR * NA; c++) for (let k = lo[c]; k \u003c= hi[c]; k++) G.cells[cnt[k]++] = c;\n}\n\n// Height bins for the cut, from the pole at -2 to the top at 0.45.\nconst NB = 96;\nconst bin = (z) => cl(floor(((z + 2.01) / 2.47) * NB), 0, NB - 1);\n\nexport function setup(params) {\n  const A = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    p: A(NP * 3), n: A(NP * 3), cc: I(NC * 4), cz: A(NC), binAt: null, cells: null,\n    // Each point's place in the side view, its depth there, and its row in the plan.\n    vx: A(NP), vy: A(NP), vd: A(NP), vp: A(NP),\n    // Depth and point per LED: the side view under the plane and over it,\n    // and the plan, which looks straight down on what is under it.\n    za: A(W * S), ia: I(W * S), zo: A(W * S), io: I(W * S), zp: A(W * S), ip: I(W * S),\n    line: A(N), col: A(N * 3), pal: A(12), c3: A(3), seg: A(4096 * 2), band: A(NR + 1),\n    L: [0, 1, 2].map(() => ({ a: A(W * S), b: A(W * S), c: A(W * S), f: new Int8Array(W * S), g: new Int8Array(W * S) })),\n    az: 0.4, sw: PI / 2, hold: 0, hw: 0, hue: 0, tilt: 0, bands: 0.06, zc: -0.5, palHue: -1, built: false,\n  };\n}\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const G = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  if (!G.built) build(G), (G.built = true);\n  G.hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3);\n  G.tilt = cl(k[2], 0, 1);\n  G.bands = cl(k[3], 0, 1);\n  // A third of a turn in 8.7 s and one sweep of the plane in 20 s at Speed 2.\n  G.az += d * sp * 0.12;\n  G.sw += (d * sp * TAU) / 40;\n  const b = input.btnPressed || [];\n  if (b[0]) G.hold = 6.6;\n  G.hold = max(0, G.hold - d);\n  // The plane eases over to the triple point, at z = 0, in 0.8 s, and back\n  // to its sweep in 0.8 s once the hold is over.\n  G.hw = cl(G.hw + (G.hold > 0.8 ? d : -d) / 0.8, 0, 1);\n  const zs = Z0 + (Z1 - Z0) * (0.5 - 0.5 * cos(G.sw));\n  G.zc = zs * (1 - sm(G.hw));\n}\n\n// Two colours for each face of the disk, one in the light and one in\n// shadow. A dim orange or yellow reads brown, so a face whose hue lies\n// between red and yellow turns crimson in shadow, and one between yellow\n// and green turns green; other faces lean a little toward violet.\nfunction palette(G) {\n  const t = G.pal;\n  for (let f = 0; f \u003c 2; f++) {\n    let h = G.hue + (f ? 0.52 : 0.92);\n    h -= floor(h);\n    const sh = h \u003c 0.17 ? 0.94 : h \u003c 0.33 ? 0.33 : h + cl(0.7 - h, -0.04, 0.04);\n    hsv(h, f ? 0.8 : 0.7, 1, t, f * 3);\n    hsv(sh, 0.85, 1, t, 6 + f * 3);\n  }\n  G.palHue = G.hue;\n}\n\n// A soft line one LED wide into the light buffer: points every half LED,\n// each shared between its four nearest LEDs.\nfunction soft(buf, x0, y0, x1, y1, w, ylo, yhi) {\n  const n = max(1, Math.ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) * 2)), ww = (w * sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2)) / n;\n  for (let i = 0; i \u003c n; i++) {\n    const t = (i + 0.5) / n, x = x0 + (x1 - x0) * t - 0.5, y = y0 + (y1 - y0) * t - 0.5;\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy;\n    for (let c = 0; c \u003c 4; c++) {\n      const xx = ix + (c & 1), yy = iy + (c >> 1);\n      if (xx \u003c 0 || xx >= W || yy \u003c ylo || yy >= yhi) continue;\n      buf[yy * W + xx] += ww * (c & 1 ? fx : 1 - fx) * (c >> 1 ? fy : 1 - fy);\n    }\n  }\n}\n\n// The colour of point k on face f in a view whose right, up and\n// toward-the-eye axes carry the normal to (a, b, c), into G.c3. The light is\n// two-sided Lambert from upper left in front, with a highlight, and the\n// disk's circles stripe it.\nfunction shade(G, k, a, b, c, gain, f) {\n  const pal = G.pal, sg = f ? -1 : 1, o = f * 3, so = 6 + o;\n  const ld = max(0, sg * (a * LX + b * LY + c * LZ)), h2 = max(0, sg * (a * HX + b * HY + c * HZ)) ** 2, h8 = (h2 * h2) ** 2;\n  // The shadow colour gives way to the lit one with the square of the light,\n  // and later still in the dimmed glass and plan.\n  const lit = (0.24 + 0.76 * ld) * G.band[(k / NA) | 0] * gain, sp = h8 * h8 * h8 * 0.55 * gain, m = ld * ld * gain;\n  G.c3[0] = ((pal[so] + (pal[o] - pal[so]) * m) * lit + sp) * 255;\n  G.c3[1] = ((pal[so + 1] + (pal[o + 1] - pal[so + 1]) * m) * lit + sp) * 255;\n  G.c3[2] = ((pal[so + 2] + (pal[o + 2] - pal[so + 2]) * m) * lit + sp) * 255;\n}\nconst LX = -0.45, LY = 0.62, LZ = 0.64, HL = 1 / sqrt(LX * LX + LY * LY + (LZ + 1) ** 2), HX = LX * HL, HY = LY * HL, HZ = (LZ + 1) * HL;\n\n// One grid cell into a depth buffer: every LED whose centre lies in the\n// box round its four corners. The boxes of neighbouring cells overlap, so\n// the turning surface has no holes.\nfunction fill(zb, ib, X, Y, cc, o, D, k) {\n  const a = cc[o], b = cc[o + 1], c = cc[o + 2], d = cc[o + 3];\n  let xa = X[a], xb = X[b], ya = Y[a], yb = Y[b];\n  if (xa > xb) (xb = xa), (xa = X[b]);\n  if (ya > yb) (yb = ya), (ya = Y[b]);\n  let t = X[c];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = X[d];\n  if (t \u003c xa) xa = t;\n  else if (t > xb) xb = t;\n  t = Y[c];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  t = Y[d];\n  if (t \u003c ya) ya = t;\n  else if (t > yb) yb = t;\n  // LED centres sit at whole numbers plus a half.\n  let x0 = (xa - 0.5) | 0, y0 = (ya - 0.5) | 0, x1 = (xb + 0.5) | 0, y1 = (yb + 0.5) | 0;\n  if (xa - 0.5 > x0) x0++;\n  if (ya - 0.5 > y0) y0++;\n  if (x0 \u003c 0) x0 = 0;\n  if (y0 \u003c 0) y0 = 0;\n  if (x1 > W) x1 = W;\n  if (y1 > S) y1 = S;\n  for (let yy = y0; yy \u003c y1; yy++) for (let q = yy * W + x0, qe = yy * W + x1; q \u003c qe; q++) if (D > zb[q]) (zb[q] = D), (ib[q] = k);\n}\n\n// Every cell into the side view's solid or glass layer by its mean height,\n// at the mean depth of its corners, and the solid ones into the plan too.\nfunction cellsIn(G, zc) {\n  const { cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip } = G;\n  for (let c = 0, o = 0; c \u003c NC; c++, o += 4) {\n    const k = cc[o], D = (vd[k] + vd[cc[o + 1]] + vd[cc[o + 2]] + vd[cc[o + 3]]) * 0.25;\n    if (cz[c] \u003c= zc) fill(za, ia, vx, vy, cc, o, D, k), fill(zp, ip, vx, vp, cc, o, cz[c], k);\n    else fill(zo, io, vx, vy, cc, o, D, k);\n  }\n}\n\n// The normal of each LED's point in the eye's frame (right, up, toward the\n// eye; the plan looks down the axis) and the face of the disk it shows. A\n// lone LED showing the other face from every lit neighbour is a cell's box\n// poking past a fold, and takes their face.\nfunction normals(G, ids, ca, sa, ce, se, plan, L) {\n  const n = G.n, { a, b, c, f, g } = L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const k = ids[q];\n    if (k \u003c 0) {\n      f[q] = -1;\n      continue;\n    }\n    const nx = n[k * 3], ny = n[k * 3 + 1], nz = n[k * 3 + 2], nyr = nx * sa + ny * ca;\n    a[q] = nx * ca - ny * sa;\n    b[q] = plan ? nyr : nyr * se + nz * ce;\n    c[q] = plan ? nz : nz * se - nyr * ce;\n    f[q] = c[q] >= 0 ? 0 : 1;\n  }\n  for (let q = 0; q \u003c W * S; q++) {\n    const fq = (g[q] = f[q]);\n    if (fq \u003c 0) continue;\n    const x = q & (W - 1), l = x > 0 ? f[q - 1] : -1, r = x \u003c W - 1 ? f[q + 1] : -1, u = q >= W ? f[q - W] : -1, d = q \u003c W * S - W ? f[q + W] : -1;\n    if (l !== fq && r !== fq && u !== fq && d !== fq && (l >= 0) + (r >= 0) + (u >= 0) + (d >= 0) >= 2) g[q] = 1 - fq;\n  }\n}\n\nexport function draw(display, params) {\n  const G = params.s;\n  if (!G || !G.built) return;\n  if (G.palHue !== G.hue) palette(G);\n  const { p, n, cc, cz, vx, vy, vd, vp, za, ia, zo, io, zp, ip, line, col, seg, c3 } = G;\n  const ca = cos(G.az), sa = sin(G.az), el = (22 + 68 * G.tilt) * (PI / 180), ce = cos(el), se = sin(el), zc = G.zc;\n  // The disk's circles: each ring of the grid is lit by its band, from 1.2\n  // on the light stripes to 0.35 in the middle of the dark ones.\n  const nb = 2 + 7 * G.bands;\n  for (let i = 0; i \u003c= NR; i++) G.band[i] = 1.2 - 0.85 * (0.5 - 0.5 * cos((TAU * nb * (NR - i)) / NR));\n  za.fill(-1e9);\n  zo.fill(-1e9);\n  zp.fill(-1e9);\n  ia.fill(-1);\n  io.fill(-1);\n  ip.fill(-1);\n  // The side view in two layers: what is under the plane is solid, what is\n  // over it is glass. The plan takes what is under the plane, nearest the\n  // eye above first.\n  for (let k = 0, o = 0; k \u003c NP; k++, o += 3) {\n    const x = p[o], y = p[o + 1], z = p[o + 2], xr = x * ca - y * sa, yr = x * sa + y * ca;\n    vx[k] = CX + SC * xr;\n    vy[k] = CY - SC * (yr * se + (z - ZC) * ce);\n    vd[k] = z * se - yr * ce;\n    vp[k] = CY - SC * yr;\n  }\n  cellsIn(G, zc);\n  normals(G, ia, ca, sa, ce, se, false, G.L[0]);\n  normals(G, io, ca, sa, ce, se, false, G.L[1]);\n  normals(G, ip, ca, sa, ce, se, true, G.L[2]);\n  const [A, O, Pl] = G.L;\n  for (let q = 0; q \u003c W * S; q++) {\n    const o = q * 3, oo = (W * S + q) * 3;\n    let r = 0, g = 0, b = 0, k = ia[q];\n    if (k >= 0) shade(G, k, A.a[q], A.b[q], A.c[q], 1, A.g[q]), (r = c3[0]), (g = c3[1]), (b = c3[2]);\n    k = io[q];\n    if (k >= 0 && zo[q] > za[q]) {\n      // Glass: 60 percent of its own light over 55 of what is behind.\n      shade(G, k, O.a[q], O.b[q], O.c[q], 0.6, O.g[q]);\n      (r = r * 0.55 + c3[0]), (g = g * 0.55 + c3[1]), (b = b * 0.55 + c3[2]);\n    }\n    (col[o] = r), (col[o + 1] = g), (col[o + 2] = b);\n    k = ip[q];\n    if (k >= 0) shade(G, k, Pl.a[q], Pl.b[q], Pl.c[q], 0.5, Pl.g[q]), (col[oo] = c3[0]), (col[oo + 1] = c3[1]), (col[oo + 2] = c3[2]);\n    else col[oo] = col[oo + 1] = col[oo + 2] = 0;\n  }\n  // The cut: in each grid cell the plane crosses, the points where it\n  // crosses the cell's edges, two to a piece of the curve (four in a\n  // saddle, paired in order round the cell).\n  line.fill(0);\n  let ns = 0;\n  const bz = bin(zc), cells = G.cells, zs = [0, 0, 0, 0], cs = [0, 0, 0, 0];\n  for (let m = G.binAt[bz]; m \u003c G.binAt[bz + 1] && ns \u003c 2040; m++) {\n    const c = cells[m];\n    for (let e = 0; e \u003c 4; e++) cs[e] = cc[c * 4 + e];\n    let up = 0;\n    for (let e = 0; e \u003c 4; e++) up += (zs[e] = p[cs[e] * 3 + 2] - zc) > 0;\n    if (up === 0 || up === 4) continue;\n    for (let e = 0; e \u003c 4; e++) {\n      const z0 = zs[e], z1 = zs[(e + 1) & 3];\n      if (z0 > 0 === z1 > 0) continue;\n      const t = z0 / (z0 - z1), A = cs[e] * 3, B = cs[(e + 1) & 3] * 3;\n      seg[ns * 2] = p[A] + (p[B] - p[A]) * t;\n      seg[ns * 2 + 1] = p[A + 1] + (p[B + 1] - p[A + 1]) * t;\n      ns++;\n    }\n  }\n  // Each piece soft in both views; in the side view a piece behind the\n  // solid is faint.\n  for (let s = 0; s + 1 \u003c ns; s += 2) {\n    const ax = seg[s * 2], ay = seg[s * 2 + 1], bx = seg[s * 2 + 2], by = seg[s * 2 + 3];\n    const axr = ax * ca - ay * sa, ayr = ax * sa + ay * ca, bxr = bx * ca - by * sa, byr = bx * sa + by * ca;\n    const X0 = CX + SC * axr, X1 = CX + SC * bxr, Y0 = CY - SC * (ayr * se + (zc - ZC) * ce), Y1 = CY - SC * (byr * se + (zc - ZC) * ce);\n    const D = zc * se - ((ayr + byr) / 2) * ce, qx = Math.round((X0 + X1) / 2 - 0.5), qy = Math.round((Y0 + Y1) / 2 - 0.5);\n    const zq = qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c S ? za[qy * W + qx] : -1e9;\n    soft(line, X0, Y0, X1, Y1, D > zq - 0.1 ? 1 : 0.22, 0, S);\n    soft(line, X0, PY - SC * ayr, X1, PY - SC * byr, 1, S, 128);\n  }\n  // Ticks at the two edges of the side view mark the plane's height on the\n  // axis.\n  const ty = CY - SC * (zc - ZC) * ce, ty0 = floor(ty - 0.5), fy = ty - 0.5 - ty0;\n  for (const x of [0, 1, 62, 63])\n    for (let c = 0; c \u003c 2; c++) {\n      const yy = ty0 + c;\n      if (yy >= 0 && yy \u003c S) line[yy * W + x] += (c ? fy : 1 - fy) * (x === 0 || x === 63 ? 1 : 0.45);\n    }\n  for (let q = 0, o = 0; q \u003c N; q++, o += 3) {\n    const l = min(1, line[q] * 1.1);\n    const r = min(255, col[o]), g = min(255, col[o + 1]), b = min(255, col[o + 2]);\n    display.setPixel(q % W, (q / W) | 0, r + (255 - r) * l, g + (244 - g) * l, b + (205 - b) * l);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tilt=0..1, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both faces round the wheel together; at 0 the front of the disk is pink and the back is cyan."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the surface turns a third of the way round, which brings it back to the same shape, in about nine seconds and the plane sweeps up and down once in twenty; at 0.2 both go ten times slower."},{"name":"Tilt","min":0,"max":1,"about":"The height of the eye: at 0 it looks across the surface from 22 degrees above the level, at 1 straight down the three-fold axis as the bottom square does, through the glass onto the cut."},{"name":"Bands","min":0,"max":1,"about":"Circles of the parameter disk painted on the surface as dark stripes, from two broad ones at 0 to nine at 1, counted in from the seam, which always stays light."}],"start":[0,2,0,0.06],"measures":{"motion":0.2388,"detail":0.0514,"edges":0.351,"complexity":1.1851,"coverage":0.4559,"colour":0.1933,"drift":0.0801},"knobResponse":[0.0711,0.1334,0.081,0.0395]},{"slug":"brachistochrone","title":"Brachistochrone","family":"physics","round":39,"note":"왼쪽 위 한 점에서 구슬 다섯이 직선, 갈릴레이의 원호, 포물선, 깊이 떨어지는 길, 사이클로이드를 타고 함께 미끄러져요. 직선보다 긴 길을 타는 사이클로이드의 구슬이 먼저 닿고, 구슬이 지금까지 닿을 수 있는 점들의 앞면이 고리를 남기며 패널 아래까지 퍼져요. 한 판 걸러 사이클로이드의 여러 높이에서 놓은 구슬이 바닥에 함께 닿아요.","idea":"Beads let go together from a point at the top left slide without friction down five tracks to a point on the right, a straight line, Galileo's circle, a parabola, a deep drop to the bottom of the panel and the cycloid, while the curve of all the points a bead could have reached by now spreads from the start down the whole panel and leaves rings behind; the cycloid's bead rides that front all the way and arrives first on a track longer than the line, the tracks light up in the order their beads come in, and every second race six beads let go from different heights on the cycloid all reach its bottom at once.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Brachistochrone\n// Family:  physics\n// Idea:    Beads let go together from a point at the top left slide without friction down five tracks to a point on the right, a straight line, Galileo's circle, a parabola, a deep drop to the bottom of the panel and the cycloid, while the curve of all the points a bead could have reached by now spreads from the start down the whole panel and leaves rings behind; the cycloid's bead rides that front all the way and arrives first on a track longer than the line, the tracks light up in the order their beads come in, and every second race six beads let go from different heights on the cycloid all reach its bottom at once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the brachistochrone problem (Johann Bernoulli, 1696), solved by the cycloid, and the tautochrone (Christiaan Huygens, 1673), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=0.2..3, End=0..1, Tracks=5..13\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the cycloid gold, Galileo's circle violet, the parabola green, the line cyan, the deep drop rose, and the front and its rings pale blue. From 0.33 to 0.68, where the front would turn red, orange, yellow or lime, it is paled and lifted so it reads cream, never brown.\n// Knob 2: Gravity. At 2 g is 31 LEDs a second squared: the cycloid's bead takes 2.4 s, the line's 2.84 s and the deep drop's 4.27 s, then the finish holds 1.3 s and fades in 0.6 s. Every time goes as one over the square root of g, so at 0.2 the race takes 3.2 times as long and at 3 it is 1.22 times as fast.\n// Knob 3: End. Where the end point sits on the right edge. At 0 at row 39, the bottom of the cycloid's arch, where the cycloid wins by 1.2% over the circle, 4.3% over the parabola and 18.5% over the line. Turned up the end point rises to row 13 and the cycloid dips 10 rows below it and climbs back, now 37.6% ahead of the circle and 74% ahead of the line; the beads of the second race pass the bottom of the arch together and those let go below the end swing back and meet there again.\n// Knob 4: Tracks. How many tracks race. At 5 the cycloid and its four classic rivals; each step adds another smooth track from the start to the end, eight more at 13, some starting shallow and some dipping below the end. None of them beats the cycloid.\n\nconst W = 64, H = 128, N = W * H;\n// The start point A, and the column the end point B sits in.\nconst AX = 3, AY = 3, BX = 60, DX = BX - AX;\n// B's depth below A: at End 0 the bottom of the arch, 2/pi of the width; at\n// End 1 ten rows. The deep drop always falls to row 124.\nconst BY0 = (2 * DX) / Math.PI, BY1 = 10, YDEEP = 121;\n// g at Gravity 2, in LEDs a second squared: the cycloid's race at End 0 then\n// takes 2.4 s.\nconst G2 = 31.1;\n// Points in each track's table, and the seconds of the hold, the fade, the\n// wait at the start and the light trail behind a bead.\nconst M = 640, HOLD = 1.3, FADE = 0.6, WAIT = 0.5, TRAIL = 0.28;\n// Rings of the front left behind every sixth of the cycloid's time.\nconst RINGS = 6;\n// Track colours, hue and saturation: the cycloid, Galileo's circle, the\n// parabola, the line, the deep drop, then the extra tracks.\nconst COL = [[0.13, 0.62], [0.79, 0.55], [0.35, 0.6], [0.5, 0.6], [0.96, 0.55]];\n// Extra tracks: the angle they leave A at, degrees from straight down; the\n// angle they come into B at, degrees below level (negative: coming up); and\n// the lengths of their two handles as shares of the chord.\nconst EXTRA = [[62, 12, 0.45, 0.3], [14, -35, 0.55, 0.45], [38, 38, 0.4, 0.4], [4, 2, 0.85, 0.3], [74, 55, 0.5, 0.35], [24, -55, 0.8, 0.5], [50, -12, 0.5, 0.35], [9, 22, 0.6, 0.3]];\nconst EXH = [0.06, 0.24, 0.43, 0.56, 0.68, 0.88, 0.17, 0.74];\nconst { floor, min, max, abs, sqrt, exp, sin, cos, acos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, q, p, p, t, v][i], [t, v, v, q, p, p][i], [p, p, t, v, v, q][i]];\n}\n\n// The cycloid from A through a point bx across and by down: the angle the\n// rolling circle has turned at that point, and its radius a.\nfunction cycloidTo(bx, by) {\n  const r = bx / by;\n  let lo = 1e-9, hi = 2 * PI - 1e-9;\n  for (let i = 0; i \u003c 56; i++) {\n    const m = (lo + hi) / 2, s = sin(m / 2);\n    if ((m - sin(m)) / (2 * s * s) \u003c r) lo = m;\n    else hi = m;\n  }\n  const th = (lo + hi) / 2, s = sin(th / 2);\n  return [th, by / (2 * s * s)];\n}\n\n// A track from a curve f(u), u from 0 at A to 1 at B, sampled densely at both\n// ends. Times are in units where g = 1: each chord is taken at constant\n// slope, so the bead's time on it is exactly its length over the mean of the\n// speeds sqrt(2y) at its two ends, and the sum is the time of the polyline.\nfunction track(f, hue, sat) {\n  const x = new Float32Array(M), y = new Float32Array(M), t = new Float64Array(M);\n  let px = 0, py = 0;\n  for (let i = 0; i \u003c M; i++) {\n    const u = 0.5 - 0.5 * cos((PI * i) / (M - 1)), p = f(u);\n    x[i] = p[0];\n    y[i] = max(0, p[1]);\n    if (i) t[i] = t[i - 1] + (Math.hypot(x[i] - px, y[i] - py) * Math.SQRT2) / (sqrt(py) + sqrt(y[i]) || 1);\n    px = x[i];\n    py = y[i];\n  }\n  return { x, y, t, T: t[M - 1], hue, sat, pix: null, wt: null, at: -1 };\n}\n\nfunction bezier(P) {\n  return (u) => {\n    const v = 1 - u, a = v * v * v, b = 3 * v * v * u, c = 3 * v * u * u, d = u * u * u;\n    return [a * P[0] + b * P[2] + c * P[4] + d * P[6], a * P[1] + b * P[3] + c * P[5] + d * P[7]];\n  };\n}\n\n// Lay a track into the panel as a thin core and a soft halo, kept as a list\n// of the pixels it touches.\nfunction rasterize(S, k) {\n  const R = S.tmp;\n  R.fill(0);\n  const { x, y } = k;\n  for (let i = 1; i \u003c M; i++) {\n    const x0 = x[i - 1] + AX, y0 = y[i - 1] + AY, len = Math.hypot(x[i] + AX - x0, y[i] + AY - y0), n = Math.ceil(len / 0.4);\n    for (let j = 0; j \u003c n; j++) {\n      const f = (j + 0.5) / n, px = x0 + (x[i] + AX - x0) * f, py = y0 + (y[i] + AY - y0) * f, w = len / n;\n      const ix = round(px), iy = round(py);\n      for (let b = -2; b \u003c= 2; b++) {\n        const yy = iy + b;\n        if (yy \u003c 0 || yy >= H) continue;\n        for (let a = -2; a \u003c= 2; a++) {\n          const xx = ix + a;\n          if (xx \u003c 0 || xx >= W) continue;\n          const d2 = (xx - px) ** 2 + (yy - py) ** 2;\n          R[yy * W + xx] += w * (0.75 * exp(-d2 / 0.5) + 0.07 * exp(-d2 / 5));\n        }\n      }\n    }\n  }\n  const pix = [], wt = [];\n  for (let p = 0; p \u003c N; p++)\n    if (R[p] > 0.01) {\n      pix.push(p);\n      wt.push(min(1.2, R[p]));\n    }\n  k.pix = Int32Array.from(pix);\n  k.wt = Float32Array.from(wt);\n}\n\n// Every track for the end point's place, and the cycloid's numbers.\nfunction build(S) {\n  const bx = DX, by = BY0 * (BY1 / BY0) ** S.end;\n  const [th, a] = cycloidTo(bx, by);\n  S.by = by;\n  S.th = th;\n  S.a = a;\n  const tr = [];\n  // The cycloid, the curve a point on a rolling circle draws.\n  tr.push(track((u) => [a * (th * u - sin(th * u)), 2 * a * sin((th * u) / 2) ** 2], ...COL[0]));\n  // Galileo's circle: the arc down to B whose lowest point is B.\n  const R = (bx * bx + by * by) / (2 * by), cy = by - R, a0 = Math.atan2(-cy, -bx);\n  tr.push(track((u) => [bx + R * cos(a0 + (PI / 2 - a0) * u), cy + R * sin(a0 + (PI / 2 - a0) * u)], ...COL[1]));\n  // The parabola whose lowest point is B.\n  tr.push(track((u) => [bx * u, by * (1 - (1 - u) ** 2)], ...COL[2]));\n  // The straight line, the shortest way.\n  tr.push(track((u) => [bx * u, by * u], ...COL[3]));\n  // The deep drop: straight down the left side to row 124, along the bottom\n  // and up into B. D is found so that its lowest point is there.\n  let lo = by, hi = 4 * YDEEP;\n  for (let i = 0; i \u003c 30; i++) {\n    const D = (lo + hi) / 2;\n    let m = 0;\n    for (let j = 1; j \u003c 64; j++) {\n      const u = j / 64;\n      m = max(m, 3 * u * (1 - u) * D + u * u * u * by);\n    }\n    if (m \u003c YDEEP) lo = D;\n    else hi = D;\n  }\n  tr.push(track(bezier([0, 0, 0, lo, bx, lo, bx, by]), ...COL[4]));\n  const C = Math.hypot(bx, by);\n  for (let j = 0; j \u003c S.ntr - 5; j++) {\n    const [p, q, h1, h2] = EXTRA[j], pa = (p * PI) / 180, qa = (q * PI) / 180;\n    tr.push(track(bezier([0, 0, h1 * C * sin(pa), h1 * C * cos(pa), bx - h2 * C * cos(qa), by - h2 * C * sin(qa), bx, by]), EXH[j], 0.5));\n  }\n  for (const k of tr) rasterize(S, k);\n  // Keep the arrivals already seen in this race.\n  if (S.tracks) for (let i = 0; i \u003c tr.length && i \u003c S.tracks.length; i++) if (S.tracks[i].at >= 0 && S.tau >= tr[i].T) tr[i].at = S.tracks[i].at;\n  S.tracks = tr;\n  S.tauB = th * sqrt(a);\n}\n\n// Where the field of least times is: the time of the cycloid from A through\n// each pixel, the fastest way there, and the bead's speed there. The front at\n// time t is the curve these times equal t on, and all of it moves at the speed\n// a bead would have there, so its distance in LEDs is the time to go times\n// that speed.\nfunction field(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dy = y - AY, dx = abs(x - AX);\n      if (dy \u003c 0 || (dy === 0 && dx === 0)) {\n        S.tau0[p] = dy \u003c 0 ? 1e9 : 0;\n        S.q[p] = 0;\n        continue;\n      }\n      if (dy === 0) S.tau0[p] = 2 * PI * sqrt(dx / (2 * PI));\n      else {\n        const [th, a] = cycloidTo(dx, dy);\n        S.tau0[p] = th * sqrt(a);\n      }\n      S.q[p] = sqrt(2 * dy);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, g: G2, end: -1, ntr: 0, tracks: null, mode: 0, phase: 0, clock: 0, tau: 0, fade: 1, t: 0, meet: [],\n    tau0: new Float32Array(N), q: new Float32Array(N), tmp: new Float32Array(N),\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N),\n  };\n  field(params.s);\n}\n\n// The tautochrone: from rest at arc length s0 above the bottom of the arch, a\n// bead's arc length is s0 cos(t sqrt(g / 4a)), whatever s0 is.\nfunction tautoBeads(S) {\n  const a = S.a, out = [];\n  for (let j = 0; j \u003c 6; j++) out.push(4 * a * (1 - j / 6));\n  return out;\n}\nfunction onCycloid(S, s) {\n  const th = 2 * acos(cl(s / (4 * S.a), -1, 1));\n  return [S.a * (th - sin(th)), S.a * (1 - cos(th)), th];\n}\n\n// The race's last moment, in g = 1 time.\nfunction raceEnd(S) {\n  if (S.mode === 0) {\n    let m = 0;\n    for (const k of S.tracks) m = max(m, k.T);\n    return m;\n  }\n  const bot = PI * sqrt(S.a);\n  return S.th \u003c= PI + 1e-6 ? S.tauB : 3 * bot;\n}\n\nfunction at(k, tau) {\n  const t = k.t;\n  if (tau >= k.T) return [k.x[M - 1], k.y[M - 1]];\n  if (tau \u003c= 0) return [0, 0];\n  let lo = 0, hi = M - 1;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (t[m] \u003c= tau) lo = m;\n    else hi = m;\n  }\n  const f = (tau - t[lo]) / (t[hi] - t[lo] || 1);\n  return [k.x[lo] + (k.x[hi] - k.x[lo]) * f, k.y[lo] + (k.y[hi] - k.y[lo]) * f];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 5], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.g = G2 * (cl(k[1], 0.2, 3) / 2);\n  const end = cl(k[2], 0, 1), ntr = round(cl(k[3], 5, 13));\n  if (abs(end - S.end) > 0.002 || ntr !== S.ntr) {\n    S.end = end;\n    S.ntr = ntr;\n    build(S);\n  }\n  const sg = sqrt(S.g);\n  S.t += d;\n  S.clock += d;\n  if (S.phase === 0 && S.clock >= WAIT) {\n    S.phase = 1;\n    S.tau = 0;\n  } else if (S.phase >= 1) {\n    const before = S.tau;\n    S.tau += d * sg;\n    if (S.mode === 0)\n      for (const tk of S.tracks)\n        // The arrival, placed inside the frame where it fell.\n        if (tk.at \u003c 0 && S.tau >= tk.T) tk.at = S.t - (S.tau - tk.T) / sg;\n    if (S.mode === 1 && S.th >= PI - 1e-6) {\n      const bot = PI * sqrt(S.a);\n      for (const m of [bot, 3 * bot]) if (before \u003c m && S.tau >= m) S.meet.push(S.t - (S.tau - m) / sg);\n    }\n    if (S.phase === 1 && S.tau >= raceEnd(S)) {\n      S.phase = 2;\n      S.clock = 0;\n    } else if (S.phase === 2 && S.clock >= HOLD) {\n      S.phase = 3;\n      S.clock = 0;\n    } else if (S.phase === 3) {\n      S.fade = 1 - S.clock / FADE;\n      if (S.clock >= FADE) {\n        S.phase = 0;\n        S.clock = 0;\n        S.fade = 1;\n        S.tau = 0;\n        S.mode ^= 1;\n        S.meet = [];\n        for (const tk of S.tracks) tk.at = -1;\n      }\n    }\n  }\n}\n\n// A soft dot of light into the colour buffers.\nfunction dot(S, x, y, r, w, c) {\n  const xi = round(x + AX), yi = round(y + AY), k = -1 / (r * r);\n  for (let j = yi - 2; j \u003c= yi + 2; j++) {\n    if (j \u003c 0 || j >= H) continue;\n    for (let i = xi - 2; i \u003c= xi + 2; i++) {\n      if (i \u003c 0 || i >= W) continue;\n      const e = w * exp(((i - x - AX) ** 2 + (j - y - AY) ** 2) * k), p = j * W + i;\n      S.R[p] += e * c[0];\n      S.G[p] += e * c[1];\n      S.B[p] += e * c[2];\n    }\n  }\n}\n\nfunction ring(S, x, y, age, c) {\n  const r = 1.5 + 16 * age, w = 0.8 * exp(-age / 0.22), n = round(6 * r + 8);\n  if (w \u003c 0.03) return;\n  for (let j = 0; j \u003c n; j++) {\n    const a = (2 * PI * j) / n;\n    dot(S, x + r * cos(a), y + r * sin(a), 0.7, w, c);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tracks) return;\n  const { R, G, B, tau0, q } = S;\n  const fade = S.phase === 3 ? S.fade : 1, live = S.phase >= 1, tau = live ? S.tau : 0, sg = sqrt(S.g);\n  // The front, the light it leaves behind and its rings, pale blue.\n  const fh = 0.6 + S.hue, dh = abs(fh - floor(fh) - 0.11), warm = cl(1.9 - min(dh, 1 - dh) / 0.09, 0, 1);\n  // Orange and yellow go brown this faint: there the front is paled and lifted.\n  const fc = hsv(fh, 0.5 - 0.3 * warm, 1 + 0.4 * warm), rk = S.tauB / RINGS;\n  const nring = live ? floor(tau / rk) : 0;\n  for (let p = 0; p \u003c N; p++) {\n    let v = 0;\n    if (live && q[p] > 0) {\n      const dd = (tau0[p] - tau) * q[p];\n      if (dd \u003c 2.5) {\n        if (dd > -2.5) v += 0.55 * exp(-dd * dd);\n        if (dd \u003c 0) v += 0.09 + 0.16 * exp(dd / 7);\n        for (let r = 1; r \u003c= nring; r++) {\n          const e = (tau0[p] - r * rk) * q[p];\n          if (e > -2 && e \u003c 2) v += 0.24 * exp(-e * e * 2);\n        }\n      }\n    }\n    v *= fade;\n    R[p] = v * fc[0];\n    G[p] = v * fc[1];\n    B[p] = v * fc[2];\n  }\n  // The tracks, faint, each lit up when its bead arrives and staying lit.\n  const tc = [];\n  for (const k of S.tracks) {\n    const c = hsv(k.hue + S.hue, k.sat, 1);\n    tc.push(c);\n    let f = 0.3;\n    if (S.mode === 1 && k !== S.tracks[0]) f = 0.16;\n    if (k.at >= 0) {\n      const age = S.t - k.at;\n      f += fade * (0.22 + 0.5 * exp(-age / 0.3));\n    }\n    for (let i = 0; i \u003c k.pix.length; i++) {\n      const p = k.pix[i], w = k.wt[i] * f;\n      R[p] += w * c[0];\n      G[p] += w * c[1];\n      B[p] += w * c[2];\n    }\n  }\n  const white = [1, 1, 1], bx = DX, by = S.by;\n  if (live) {\n    const dtr = (TRAIL * sg) / 12;\n    if (S.mode === 0)\n      S.tracks.forEach((k, i) => {\n        const c = tc[i];\n        if (k.at >= 0) {\n          ring(S, bx, by, S.t - k.at, c);\n          if (S.t - k.at > 0.15) return;\n        }\n        for (let j = 12; j >= 1; j--) {\n          const p = at(k, tau - j * dtr);\n          dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n        }\n        const p = at(k, tau);\n        dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n        dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n      });\n    else {\n      // The second race: beads from six heights on the cycloid, the one at A\n      // the same bead as in the race.\n      const c = tc[0], w = 1 / (2 * sqrt(S.a)), sB = 4 * S.a * cos(S.th / 2);\n      for (const s0 of tautoBeads(S)) {\n        // A bead let go above the end point's height leaves the track there.\n        const tEnd = s0 >= abs(sB) - 1e-6 ? acos(cl(sB / s0, -1, 1)) / w : 1e9;\n        if (tau > tEnd + 0.15 * sg) continue;\n        for (let j = 12; j >= 0; j--) {\n          const tt = min(max(0, tau - j * dtr), tEnd), p = onCycloid(S, s0 * cos(tt * w));\n          if (j) dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n          else {\n            dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n            dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n          }\n        }\n      }\n      for (const m of S.meet) ring(S, PI * S.a, 2 * S.a, S.t - m, c);\n    }\n  }\n  // A and B.\n  dot(S, 0, 0, 0.9, 0.7, white);\n  dot(S, bx, by, 0.9, 0.7, white);\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n}\n","layer":{"id":"layer-brachistochrone","type":"code","name":"brachistochrone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Brachistochrone\n// Family:  physics\n// Idea:    Beads let go together from a point at the top left slide without friction down five tracks to a point on the right, a straight line, Galileo's circle, a parabola, a deep drop to the bottom of the panel and the cycloid, while the curve of all the points a bead could have reached by now spreads from the start down the whole panel and leaves rings behind; the cycloid's bead rides that front all the way and arrives first on a track longer than the line, the tracks light up in the order their beads come in, and every second race six beads let go from different heights on the cycloid all reach its bottom at once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the brachistochrone problem (Johann Bernoulli, 1696), solved by the cycloid, and the tautochrone (Christiaan Huygens, 1673), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=0.2..3, End=0..1, Tracks=5..13\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the cycloid gold, Galileo's circle violet, the parabola green, the line cyan, the deep drop rose, and the front and its rings pale blue. From 0.33 to 0.68, where the front would turn red, orange, yellow or lime, it is paled and lifted so it reads cream, never brown.\n// Knob 2: Gravity. At 2 g is 31 LEDs a second squared: the cycloid's bead takes 2.4 s, the line's 2.84 s and the deep drop's 4.27 s, then the finish holds 1.3 s and fades in 0.6 s. Every time goes as one over the square root of g, so at 0.2 the race takes 3.2 times as long and at 3 it is 1.22 times as fast.\n// Knob 3: End. Where the end point sits on the right edge. At 0 at row 39, the bottom of the cycloid's arch, where the cycloid wins by 1.2% over the circle, 4.3% over the parabola and 18.5% over the line. Turned up the end point rises to row 13 and the cycloid dips 10 rows below it and climbs back, now 37.6% ahead of the circle and 74% ahead of the line; the beads of the second race pass the bottom of the arch together and those let go below the end swing back and meet there again.\n// Knob 4: Tracks. How many tracks race. At 5 the cycloid and its four classic rivals; each step adds another smooth track from the start to the end, eight more at 13, some starting shallow and some dipping below the end. None of them beats the cycloid.\n\nconst W = 64, H = 128, N = W * H;\n// The start point A, and the column the end point B sits in.\nconst AX = 3, AY = 3, BX = 60, DX = BX - AX;\n// B's depth below A: at End 0 the bottom of the arch, 2/pi of the width; at\n// End 1 ten rows. The deep drop always falls to row 124.\nconst BY0 = (2 * DX) / Math.PI, BY1 = 10, YDEEP = 121;\n// g at Gravity 2, in LEDs a second squared: the cycloid's race at End 0 then\n// takes 2.4 s.\nconst G2 = 31.1;\n// Points in each track's table, and the seconds of the hold, the fade, the\n// wait at the start and the light trail behind a bead.\nconst M = 640, HOLD = 1.3, FADE = 0.6, WAIT = 0.5, TRAIL = 0.28;\n// Rings of the front left behind every sixth of the cycloid's time.\nconst RINGS = 6;\n// Track colours, hue and saturation: the cycloid, Galileo's circle, the\n// parabola, the line, the deep drop, then the extra tracks.\nconst COL = [[0.13, 0.62], [0.79, 0.55], [0.35, 0.6], [0.5, 0.6], [0.96, 0.55]];\n// Extra tracks: the angle they leave A at, degrees from straight down; the\n// angle they come into B at, degrees below level (negative: coming up); and\n// the lengths of their two handles as shares of the chord.\nconst EXTRA = [[62, 12, 0.45, 0.3], [14, -35, 0.55, 0.45], [38, 38, 0.4, 0.4], [4, 2, 0.85, 0.3], [74, 55, 0.5, 0.35], [24, -55, 0.8, 0.5], [50, -12, 0.5, 0.35], [9, 22, 0.6, 0.3]];\nconst EXH = [0.06, 0.24, 0.43, 0.56, 0.68, 0.88, 0.17, 0.74];\nconst { floor, min, max, abs, sqrt, exp, sin, cos, acos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, q, p, p, t, v][i], [t, v, v, q, p, p][i], [p, p, t, v, v, q][i]];\n}\n\n// The cycloid from A through a point bx across and by down: the angle the\n// rolling circle has turned at that point, and its radius a.\nfunction cycloidTo(bx, by) {\n  const r = bx / by;\n  let lo = 1e-9, hi = 2 * PI - 1e-9;\n  for (let i = 0; i \u003c 56; i++) {\n    const m = (lo + hi) / 2, s = sin(m / 2);\n    if ((m - sin(m)) / (2 * s * s) \u003c r) lo = m;\n    else hi = m;\n  }\n  const th = (lo + hi) / 2, s = sin(th / 2);\n  return [th, by / (2 * s * s)];\n}\n\n// A track from a curve f(u), u from 0 at A to 1 at B, sampled densely at both\n// ends. Times are in units where g = 1: each chord is taken at constant\n// slope, so the bead's time on it is exactly its length over the mean of the\n// speeds sqrt(2y) at its two ends, and the sum is the time of the polyline.\nfunction track(f, hue, sat) {\n  const x = new Float32Array(M), y = new Float32Array(M), t = new Float64Array(M);\n  let px = 0, py = 0;\n  for (let i = 0; i \u003c M; i++) {\n    const u = 0.5 - 0.5 * cos((PI * i) / (M - 1)), p = f(u);\n    x[i] = p[0];\n    y[i] = max(0, p[1]);\n    if (i) t[i] = t[i - 1] + (Math.hypot(x[i] - px, y[i] - py) * Math.SQRT2) / (sqrt(py) + sqrt(y[i]) || 1);\n    px = x[i];\n    py = y[i];\n  }\n  return { x, y, t, T: t[M - 1], hue, sat, pix: null, wt: null, at: -1 };\n}\n\nfunction bezier(P) {\n  return (u) => {\n    const v = 1 - u, a = v * v * v, b = 3 * v * v * u, c = 3 * v * u * u, d = u * u * u;\n    return [a * P[0] + b * P[2] + c * P[4] + d * P[6], a * P[1] + b * P[3] + c * P[5] + d * P[7]];\n  };\n}\n\n// Lay a track into the panel as a thin core and a soft halo, kept as a list\n// of the pixels it touches.\nfunction rasterize(S, k) {\n  const R = S.tmp;\n  R.fill(0);\n  const { x, y } = k;\n  for (let i = 1; i \u003c M; i++) {\n    const x0 = x[i - 1] + AX, y0 = y[i - 1] + AY, len = Math.hypot(x[i] + AX - x0, y[i] + AY - y0), n = Math.ceil(len / 0.4);\n    for (let j = 0; j \u003c n; j++) {\n      const f = (j + 0.5) / n, px = x0 + (x[i] + AX - x0) * f, py = y0 + (y[i] + AY - y0) * f, w = len / n;\n      const ix = round(px), iy = round(py);\n      for (let b = -2; b \u003c= 2; b++) {\n        const yy = iy + b;\n        if (yy \u003c 0 || yy >= H) continue;\n        for (let a = -2; a \u003c= 2; a++) {\n          const xx = ix + a;\n          if (xx \u003c 0 || xx >= W) continue;\n          const d2 = (xx - px) ** 2 + (yy - py) ** 2;\n          R[yy * W + xx] += w * (0.75 * exp(-d2 / 0.5) + 0.07 * exp(-d2 / 5));\n        }\n      }\n    }\n  }\n  const pix = [], wt = [];\n  for (let p = 0; p \u003c N; p++)\n    if (R[p] > 0.01) {\n      pix.push(p);\n      wt.push(min(1.2, R[p]));\n    }\n  k.pix = Int32Array.from(pix);\n  k.wt = Float32Array.from(wt);\n}\n\n// Every track for the end point's place, and the cycloid's numbers.\nfunction build(S) {\n  const bx = DX, by = BY0 * (BY1 / BY0) ** S.end;\n  const [th, a] = cycloidTo(bx, by);\n  S.by = by;\n  S.th = th;\n  S.a = a;\n  const tr = [];\n  // The cycloid, the curve a point on a rolling circle draws.\n  tr.push(track((u) => [a * (th * u - sin(th * u)), 2 * a * sin((th * u) / 2) ** 2], ...COL[0]));\n  // Galileo's circle: the arc down to B whose lowest point is B.\n  const R = (bx * bx + by * by) / (2 * by), cy = by - R, a0 = Math.atan2(-cy, -bx);\n  tr.push(track((u) => [bx + R * cos(a0 + (PI / 2 - a0) * u), cy + R * sin(a0 + (PI / 2 - a0) * u)], ...COL[1]));\n  // The parabola whose lowest point is B.\n  tr.push(track((u) => [bx * u, by * (1 - (1 - u) ** 2)], ...COL[2]));\n  // The straight line, the shortest way.\n  tr.push(track((u) => [bx * u, by * u], ...COL[3]));\n  // The deep drop: straight down the left side to row 124, along the bottom\n  // and up into B. D is found so that its lowest point is there.\n  let lo = by, hi = 4 * YDEEP;\n  for (let i = 0; i \u003c 30; i++) {\n    const D = (lo + hi) / 2;\n    let m = 0;\n    for (let j = 1; j \u003c 64; j++) {\n      const u = j / 64;\n      m = max(m, 3 * u * (1 - u) * D + u * u * u * by);\n    }\n    if (m \u003c YDEEP) lo = D;\n    else hi = D;\n  }\n  tr.push(track(bezier([0, 0, 0, lo, bx, lo, bx, by]), ...COL[4]));\n  const C = Math.hypot(bx, by);\n  for (let j = 0; j \u003c S.ntr - 5; j++) {\n    const [p, q, h1, h2] = EXTRA[j], pa = (p * PI) / 180, qa = (q * PI) / 180;\n    tr.push(track(bezier([0, 0, h1 * C * sin(pa), h1 * C * cos(pa), bx - h2 * C * cos(qa), by - h2 * C * sin(qa), bx, by]), EXH[j], 0.5));\n  }\n  for (const k of tr) rasterize(S, k);\n  // Keep the arrivals already seen in this race.\n  if (S.tracks) for (let i = 0; i \u003c tr.length && i \u003c S.tracks.length; i++) if (S.tracks[i].at >= 0 && S.tau >= tr[i].T) tr[i].at = S.tracks[i].at;\n  S.tracks = tr;\n  S.tauB = th * sqrt(a);\n}\n\n// Where the field of least times is: the time of the cycloid from A through\n// each pixel, the fastest way there, and the bead's speed there. The front at\n// time t is the curve these times equal t on, and all of it moves at the speed\n// a bead would have there, so its distance in LEDs is the time to go times\n// that speed.\nfunction field(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dy = y - AY, dx = abs(x - AX);\n      if (dy \u003c 0 || (dy === 0 && dx === 0)) {\n        S.tau0[p] = dy \u003c 0 ? 1e9 : 0;\n        S.q[p] = 0;\n        continue;\n      }\n      if (dy === 0) S.tau0[p] = 2 * PI * sqrt(dx / (2 * PI));\n      else {\n        const [th, a] = cycloidTo(dx, dy);\n        S.tau0[p] = th * sqrt(a);\n      }\n      S.q[p] = sqrt(2 * dy);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, g: G2, end: -1, ntr: 0, tracks: null, mode: 0, phase: 0, clock: 0, tau: 0, fade: 1, t: 0, meet: [],\n    tau0: new Float32Array(N), q: new Float32Array(N), tmp: new Float32Array(N),\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N),\n  };\n  field(params.s);\n}\n\n// The tautochrone: from rest at arc length s0 above the bottom of the arch, a\n// bead's arc length is s0 cos(t sqrt(g / 4a)), whatever s0 is.\nfunction tautoBeads(S) {\n  const a = S.a, out = [];\n  for (let j = 0; j \u003c 6; j++) out.push(4 * a * (1 - j / 6));\n  return out;\n}\nfunction onCycloid(S, s) {\n  const th = 2 * acos(cl(s / (4 * S.a), -1, 1));\n  return [S.a * (th - sin(th)), S.a * (1 - cos(th)), th];\n}\n\n// The race's last moment, in g = 1 time.\nfunction raceEnd(S) {\n  if (S.mode === 0) {\n    let m = 0;\n    for (const k of S.tracks) m = max(m, k.T);\n    return m;\n  }\n  const bot = PI * sqrt(S.a);\n  return S.th \u003c= PI + 1e-6 ? S.tauB : 3 * bot;\n}\n\nfunction at(k, tau) {\n  const t = k.t;\n  if (tau >= k.T) return [k.x[M - 1], k.y[M - 1]];\n  if (tau \u003c= 0) return [0, 0];\n  let lo = 0, hi = M - 1;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (t[m] \u003c= tau) lo = m;\n    else hi = m;\n  }\n  const f = (tau - t[lo]) / (t[hi] - t[lo] || 1);\n  return [k.x[lo] + (k.x[hi] - k.x[lo]) * f, k.y[lo] + (k.y[hi] - k.y[lo]) * f];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 5], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.g = G2 * (cl(k[1], 0.2, 3) / 2);\n  const end = cl(k[2], 0, 1), ntr = round(cl(k[3], 5, 13));\n  if (abs(end - S.end) > 0.002 || ntr !== S.ntr) {\n    S.end = end;\n    S.ntr = ntr;\n    build(S);\n  }\n  const sg = sqrt(S.g);\n  S.t += d;\n  S.clock += d;\n  if (S.phase === 0 && S.clock >= WAIT) {\n    S.phase = 1;\n    S.tau = 0;\n  } else if (S.phase >= 1) {\n    const before = S.tau;\n    S.tau += d * sg;\n    if (S.mode === 0)\n      for (const tk of S.tracks)\n        // The arrival, placed inside the frame where it fell.\n        if (tk.at \u003c 0 && S.tau >= tk.T) tk.at = S.t - (S.tau - tk.T) / sg;\n    if (S.mode === 1 && S.th >= PI - 1e-6) {\n      const bot = PI * sqrt(S.a);\n      for (const m of [bot, 3 * bot]) if (before \u003c m && S.tau >= m) S.meet.push(S.t - (S.tau - m) / sg);\n    }\n    if (S.phase === 1 && S.tau >= raceEnd(S)) {\n      S.phase = 2;\n      S.clock = 0;\n    } else if (S.phase === 2 && S.clock >= HOLD) {\n      S.phase = 3;\n      S.clock = 0;\n    } else if (S.phase === 3) {\n      S.fade = 1 - S.clock / FADE;\n      if (S.clock >= FADE) {\n        S.phase = 0;\n        S.clock = 0;\n        S.fade = 1;\n        S.tau = 0;\n        S.mode ^= 1;\n        S.meet = [];\n        for (const tk of S.tracks) tk.at = -1;\n      }\n    }\n  }\n}\n\n// A soft dot of light into the colour buffers.\nfunction dot(S, x, y, r, w, c) {\n  const xi = round(x + AX), yi = round(y + AY), k = -1 / (r * r);\n  for (let j = yi - 2; j \u003c= yi + 2; j++) {\n    if (j \u003c 0 || j >= H) continue;\n    for (let i = xi - 2; i \u003c= xi + 2; i++) {\n      if (i \u003c 0 || i >= W) continue;\n      const e = w * exp(((i - x - AX) ** 2 + (j - y - AY) ** 2) * k), p = j * W + i;\n      S.R[p] += e * c[0];\n      S.G[p] += e * c[1];\n      S.B[p] += e * c[2];\n    }\n  }\n}\n\nfunction ring(S, x, y, age, c) {\n  const r = 1.5 + 16 * age, w = 0.8 * exp(-age / 0.22), n = round(6 * r + 8);\n  if (w \u003c 0.03) return;\n  for (let j = 0; j \u003c n; j++) {\n    const a = (2 * PI * j) / n;\n    dot(S, x + r * cos(a), y + r * sin(a), 0.7, w, c);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tracks) return;\n  const { R, G, B, tau0, q } = S;\n  const fade = S.phase === 3 ? S.fade : 1, live = S.phase >= 1, tau = live ? S.tau : 0, sg = sqrt(S.g);\n  // The front, the light it leaves behind and its rings, pale blue.\n  const fh = 0.6 + S.hue, dh = abs(fh - floor(fh) - 0.11), warm = cl(1.9 - min(dh, 1 - dh) / 0.09, 0, 1);\n  // Orange and yellow go brown this faint: there the front is paled and lifted.\n  const fc = hsv(fh, 0.5 - 0.3 * warm, 1 + 0.4 * warm), rk = S.tauB / RINGS;\n  const nring = live ? floor(tau / rk) : 0;\n  for (let p = 0; p \u003c N; p++) {\n    let v = 0;\n    if (live && q[p] > 0) {\n      const dd = (tau0[p] - tau) * q[p];\n      if (dd \u003c 2.5) {\n        if (dd > -2.5) v += 0.55 * exp(-dd * dd);\n        if (dd \u003c 0) v += 0.09 + 0.16 * exp(dd / 7);\n        for (let r = 1; r \u003c= nring; r++) {\n          const e = (tau0[p] - r * rk) * q[p];\n          if (e > -2 && e \u003c 2) v += 0.24 * exp(-e * e * 2);\n        }\n      }\n    }\n    v *= fade;\n    R[p] = v * fc[0];\n    G[p] = v * fc[1];\n    B[p] = v * fc[2];\n  }\n  // The tracks, faint, each lit up when its bead arrives and staying lit.\n  const tc = [];\n  for (const k of S.tracks) {\n    const c = hsv(k.hue + S.hue, k.sat, 1);\n    tc.push(c);\n    let f = 0.3;\n    if (S.mode === 1 && k !== S.tracks[0]) f = 0.16;\n    if (k.at >= 0) {\n      const age = S.t - k.at;\n      f += fade * (0.22 + 0.5 * exp(-age / 0.3));\n    }\n    for (let i = 0; i \u003c k.pix.length; i++) {\n      const p = k.pix[i], w = k.wt[i] * f;\n      R[p] += w * c[0];\n      G[p] += w * c[1];\n      B[p] += w * c[2];\n    }\n  }\n  const white = [1, 1, 1], bx = DX, by = S.by;\n  if (live) {\n    const dtr = (TRAIL * sg) / 12;\n    if (S.mode === 0)\n      S.tracks.forEach((k, i) => {\n        const c = tc[i];\n        if (k.at >= 0) {\n          ring(S, bx, by, S.t - k.at, c);\n          if (S.t - k.at > 0.15) return;\n        }\n        for (let j = 12; j >= 1; j--) {\n          const p = at(k, tau - j * dtr);\n          dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n        }\n        const p = at(k, tau);\n        dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n        dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n      });\n    else {\n      // The second race: beads from six heights on the cycloid, the one at A\n      // the same bead as in the race.\n      const c = tc[0], w = 1 / (2 * sqrt(S.a)), sB = 4 * S.a * cos(S.th / 2);\n      for (const s0 of tautoBeads(S)) {\n        // A bead let go above the end point's height leaves the track there.\n        const tEnd = s0 >= abs(sB) - 1e-6 ? acos(cl(sB / s0, -1, 1)) / w : 1e9;\n        if (tau > tEnd + 0.15 * sg) continue;\n        for (let j = 12; j >= 0; j--) {\n          const tt = min(max(0, tau - j * dtr), tEnd), p = onCycloid(S, s0 * cos(tt * w));\n          if (j) dot(S, p[0], p[1], 0.9, fade * 0.55 * (1 - j / 13), c);\n          else {\n            dot(S, p[0], p[1], 0.8, fade * 1.1, c);\n            dot(S, p[0], p[1], 0.55, fade * 0.9, white);\n          }\n        }\n      }\n      for (const m of S.meet) ring(S, PI * S.a, 2 * S.a, S.t - m, c);\n    }\n  }\n  // A and B.\n  dot(S, 0, 0, 0.9, 0.7, white);\n  dot(S, bx, by, 0.9, 0.7, white);\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Gravity=0.2..3, End=0..1, Tracks=5..13","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the cycloid gold, Galileo's circle violet, the parabola green, the line cyan, the deep drop rose, and the front and its rings pale blue. From 0.33 to 0.68, where the front would turn red, orange, yellow or lime, it is paled and lifted so it reads cream, never brown."},{"name":"Gravity","min":0.2,"max":3,"about":"At 2 g is 31 LEDs a second squared: the cycloid's bead takes 2.4 s, the line's 2.84 s and the deep drop's 4.27 s, then the finish holds 1.3 s and fades in 0.6 s. Every time goes as one over the square root of g, so at 0.2 the race takes 3.2 times as long and at 3 it is 1.22 times as fast."},{"name":"End","min":0,"max":1,"about":"Where the end point sits on the right edge. At 0 at row 39, the bottom of the cycloid's arch, where the cycloid wins by 1.2% over the circle, 4.3% over the parabola and 18.5% over the line. Turned up the end point rises to row 13 and the cycloid dips 10 rows below it and climbs back, now 37.6% ahead of the circle and 74% ahead of the line; the beads of the second race pass the bottom of the arch together and those let go below the end swing back and meet there again."},{"name":"Tracks","min":5,"max":13,"about":"How many tracks race. At 5 the cycloid and its four classic rivals; each step adds another smooth track from the start to the end, eight more at 13, some starting shallow and some dipping below the end. None of them beats the cycloid."}],"start":[0,2,0,5],"measures":{"motion":0.2086,"detail":0.0362,"edges":0.3333,"complexity":0.8549,"coverage":0.2988,"colour":0.08,"drift":0.1306},"knobResponse":[0.0398,0.0764,0.0473,0.038]},{"slug":"bread-mould","title":"Bread Mould","family":"fungi","round":21,"note":"도마 위 식빵 두 쪽이 곰팡이로 덮여 가는 저속 촬영이에요. 내려앉은 포자에서 흰 테를 두른 푸른곰팡이와 검은 털곰팡이가 고리를 그리며 번지고, 다 덮이면 새 두 쪽이 옆에서 밀려 들어와요.","idea":"A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.","buttons":"K1 tap slides a fresh pair of slices in now.","code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","layer":{"id":"layer-bread-mould","type":"code","name":"bread-mould","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mould","min":0,"max":3,"about":"What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep."},{"name":"Spores","min":4,"max":40,"about":"How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40."},{"name":"Damp","min":0,"max":1,"about":"A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies."}],"start":[0,2,4,0.06],"measures":{"motion":0.3259,"detail":0.0597,"edges":0.2499,"complexity":2.3664,"coverage":0.9889,"colour":0.1543,"drift":0.3583},"knobResponse":[0.188,0.3046,0.062,0.1018]},{"slug":"breath","title":"Breath","family":"body","round":24,"note":"후두에서 횡격막까지 해부도처럼 그린 폐가 숨을 쉬어요. 들이쉬면 횡격막이 내려가고 갈비뼈가 들리며, 푸르스름한 공기가 일곱 번 더 갈라지는 기관지를 타고 내려가 보랏빛 허파꽈리를 빨갛게 물들여요. K1 이 맑은 공기에서 입김이 하얗게 서리는 겨울과 매연 낀 도시까지 공기를 바꾸고, K1 을 누르면 기침을 해요.","idea":"A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.","buttons":"K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.","code":"// ===== Patternflow pattern =====\n// Title:   Breath\n// Family:  body\n// Idea:    A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after anatomical plates of the lungs, with the bronchial tree grown by volume-filling branching (Tawhai, Pullan and Hunter, 2000)\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1\n//\n// Knob 1: Air. What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli.\n// Knob 2: Rate. Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3.\n// Knob 3: Depth. A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far.\n// Knob 4: Altitude. Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own.\n// Buttons: K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.\n\nconst W = 64, H = 128, N = W * H, A0 = 2;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, ceil, round, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The diaphragm under the lungs breathed out, x then y: the right dome higher\n// over the liver, the heart sitting in the dip between the domes.\nconst DK = [-1, 118.5, 5, 113.8, 9, 108.4, 13, 103.8, 17, 101.6, 21, 101, 25, 101.8, 29, 104.2, 33, 106, 37, 106.6, 41, 106.6, 45, 105.8, 49, 106.8, 53, 110.2, 57, 115, 60, 117.8, 65, 122.5];\nconst D0T = F32(68);\nfor (let i = 0, k = 0; i \u003c 68; i++) {\n  while (k \u003c DK.length - 4 && i - 1 > DK[k + 2]) k += 2;\n  D0T[i] = mix(DK[k + 1], DK[k + 3], (i - 1 - DK[k]) / (DK[k + 2] - DK[k]));\n}\nfor (let n = 0; n \u003c 4; n++) for (let i = 1; i \u003c 67; i++) D0T[i] = (D0T[i - 1] + 2 * D0T[i] + D0T[i + 1]) / 4;\nconst d0 = (x) => ((x = cl(x + 1, 0, 66.99)), D0T[floor(x)] + (D0T[floor(x) + 1] - D0T[floor(x)]) * (x - floor(x)));\n// How far the diaphragm drops at each column: most under the two domes, so\n// they flatten.\nconst GX = Float32Array.from({ length: W }, (_, x) => 0.32 + 0.68 * (exp(-(((x - 17) / 10) ** 2)) + exp(-(((x - 46) / 10) ** 2))));\n// The outlines of the right lung (on the viewer's left) and the smaller left\n// lung with the heart's notch, breathed out. The diaphragm cuts their bases.\nconst LUNGS = [\n  [19, 21, 15, 22.5, 11.5, 26, 8.5, 32, 6.3, 40, 4.8, 50, 4, 60, 3.6, 72, 3.6, 84, 4, 96, 4.6, 106, 5.6, 126, 28.8, 126, 28.6, 104, 28.2, 98, 27.6, 90, 27.2, 82, 27.6, 74, 28.6, 66, 29, 58, 28.6, 50, 27.8, 42, 26.6, 34, 24.8, 27, 22.5, 22.5],\n  [44.5, 22, 48.5, 23.5, 52, 27, 55, 33, 57.2, 41, 58.8, 51, 59.6, 62, 60, 74, 60.2, 86, 60.2, 98, 59.9, 108, 59.2, 126, 41.5, 126, 41.5, 106, 41, 103, 42.4, 98, 44.5, 92, 45.4, 86, 44.4, 80, 41.8, 75, 38.6, 71, 36.6, 66, 36, 58, 36.4, 50, 37.2, 42, 38.4, 34, 40, 28, 42, 23.5],\n];\n// Airway walls by generation (9 is the channel through the larynx), and how\n// strongly each shows over the lung.\nconst WC = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? [226, 216, 204] : [232 - 2 * g, 208 - 4 * g, 206]));\nconst AG = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? 1 : g > 8 ? 0 : 1.1 - 0.08 * g));\n// The cough: seconds and lung volume, and the moments of the three jolts.\nconst CK = [0, 0, 0.32, 0.97, 0.44, 0.97, 0.54, 0.66, 0.84, 0.66, 0.94, 0.38, 1.24, 0.38, 1.34, 0.12, 1.9, 0];\nconst CT = [0.44, 0.84, 1.24];\n\nfunction sdPoly(v, px, py) {\n  let d = 1e9, s = 1;\n  for (let i = 0, j = v.length - 2; i \u003c v.length; j = i, i += 2) {\n    const ex = v[j] - v[i], ey = v[j + 1] - v[i + 1], wx = px - v[i], wy = py - v[i + 1];\n    const t = cl((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1), bx = wx - ex * t, by = wy - ey * t;\n    d = min(d, bx * bx + by * by);\n    const c1 = py >= v[i + 1], c2 = py \u003c v[j + 1], c3 = ex * wy > ey * wx;\n    if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s = -s;\n  }\n  return s * sqrt(d);\n}\n// The colour being built for one LED, and mixing toward another by k.\nconst C = F32(3);\nconst DA = [74, 58, 156];\nconst bl = (r, g, b, k) => ((C[0] += (r - C[0]) * k), (C[1] += (g - C[1]) * k), (C[2] += (b - C[2]) * k));\nfunction samp(A, x, y) {\n  x = cl(x, 0, 62.999);\n  y = cl(y, 0, 126.999);\n  const xi = x | 0, yi = y | 0, fx = x - xi, p = yi * W + xi, a = A[p] + (A[p + 1] - A[p]) * fx;\n  return a + (A[p + W] + (A[p + W + 1] - A[p + W]) * fx - a) * (y - yi);\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ph: 0.68, lp: 0.68, vol: 0.6, D: 0.5, air: 0, ct: -1, jolt: 0, hp: 0, hb: 0, envIn: 0, envOut: 0, Fin: -1, Fx: 2, bf: [], puffs: [],\n    sd: F32(N), own: new Int16Array(N).fill(-1), und: F32(N * 3), ua: F32(N), GL: F32(N),\n    SX: F32(H), KY: F32(W), alvA: F32(N), alvS: F32(N), alvK: new Int16Array(N), trA: F32(N), trV: F32(N), trS: F32(N), trG: new Int8Array(N), rib: F32(N), O: F32(N * 3),\n    seg: [], ax: [], ay: [], as: [], soot: [], cd: [], cb: [], trH: F32(N),\n  });\n  build(P);\n}\n\nfunction addSeg(P, x0, y0, x1, y1, r, g, d) {\n  const e = d + hypot(x1 - x0, y1 - y0);\n  P.seg.push(x0, y0, x1, y1, r, g, d, e);\n  return e;\n}\n\n// Volume-filling branching: a branch's alveoli are split by the line from its\n// end through their centroid, and each half gets a child that runs 40% of the\n// way to its own centroid, until a handful is left: one grape cluster.\nfunction grow(P, x0, y0, dx, dy, pts, g, r, d) {\n  const { ax, ay } = P, n = pts.length;\n  let cx = 0, cy = 0;\n  for (const i of pts) (cx += ax[i]), (cy += ay[i]);\n  (cx /= n), (cy /= n);\n  if (n \u003c= 7 || g > 8) {\n    for (const i of pts) (P.ak[i] = P.cd.length), (ax[i] += (cx - ax[i]) * 0.3), (ay[i] += (cy - ay[i]) * 0.3);\n    P.cd.push(d + hypot(cx - x0, cy - y0));\n    P.cb.push(0.84 + 0.32 * rnd());\n    return;\n  }\n  // The lobes split along the line from the branch to their centroid; past\n  // them each set is cut across its long axis, a near half and a far one.\n  let ux = cx - x0, uy = cy - y0, ul = hypot(ux, uy), ox = x0, oy = y0;\n  if (g > 2) {\n    let sxx = 0, syy = 0, sxy = 0;\n    for (const i of pts) (sxx += (ax[i] - cx) ** 2), (syy += (ay[i] - cy) ** 2), (sxy += (ax[i] - cx) * (ay[i] - cy));\n    const th = 0.5 * atan2(2 * sxy, sxx - syy) + PI / 2;\n    (ux = cos(th)), (uy = sin(th)), (ul = 1), (ox = cx), (oy = cy);\n  }\n  if (ul \u003c 0.5) (ux = dx), (uy = dy), (ul = hypot(dx, dy));\n  (ux /= ul), (uy /= ul);\n  const side = (i) => (ax[i] - ox) * uy - (ay[i] - oy) * ux;\n  let A = pts.filter((i) => side(i) > 0), B = pts.filter((i) => side(i) \u003c= 0);\n  if (A.length \u003c 2 || B.length \u003c 2) {\n    const s = pts.slice().sort((i, j) => side(i) - side(j));\n    (A = s.slice(0, n >> 1)), (B = s.slice(n >> 1));\n  }\n  const pa = atan2(dy, dx), lim = g === 2 ? 1.75 : 1.1;\n  for (const Q of [A, B]) {\n    let qx = 0, qy = 0;\n    for (const i of Q) (qx += ax[i]), (qy += ay[i]);\n    (qx = qx / Q.length - x0), (qy = qy / Q.length - y0);\n    let a = atan2(qy, qx), da = a - pa;\n    da = atan2(sin(da), cos(da));\n    if (abs(da) > lim) a = pa + Math.sign(da) * lim;\n    let len = max(1.2, hypot(qx, qy) * (Q.length \u003c= 7 ? 0.55 : 0.4)), x1, y1;\n    for (;;) {\n      (x1 = x0 + cos(a) * len), (y1 = y0 + sin(a) * len);\n      if (len \u003c= 1.2 || samp(P.sd, x1, y1) \u003c -0.6) break;\n      len *= 0.8;\n    }\n    const rr = max(0.5, r * Math.cbrt(Q.length / n));\n    grow(P, x1, y1, x1 - x0, y1 - y0, Q, g + 1, rr, addSeg(P, x0, y0, x1, y1, rr, g, d));\n  }\n}\n\nfunction build(P) {\n  const { sd, own, GL } = P;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, sl = d0(x + 0.5) - d0(x - 0.5), cut = (y - d0(x) + 0.6) / sqrt(1 + sl * sl);\n    const a = y \u003c 15 ? 6 : max(sdPoly(LUNGS[0], x, y), cut), b = y \u003c 15 ? 6 : max(sdPoly(LUNGS[1], x, y), cut);\n    sd[p] = min(a, b) + 0.9 * (vn(x * 0.32, y * 0.32) - 0.5);\n    GL[p] = exp(-(((x - 32) / 26) ** 2) - (((y - 66) / 50) ** 2));\n  }\n  // Alveoli on a jittered honeycomb inside the lungs.\n  const pts = [[], []];\n  for (let j = 0; j \u003c 56; j++)\n    for (let i = 0; i \u003c 29; i++) {\n      const x = 1 + i * 2.25 + (j & 1) * 1.125 + (rnd() - 0.5) * 0.7, y = 19 + j * 1.95 + (rnd() - 0.5) * 0.7;\n      if (x > 62.5 || y > 125 || samp(sd, x, y) > -1) continue;\n      pts[x \u003c 32 ? 0 : 1].push(P.ax.length);\n      P.ax.push(x), P.ay.push(y), P.as.push(0.86 + 0.28 * rnd()), P.soot.push(rnd());\n    }\n  P.ak = new Int16Array(P.ax.length);\n  // The larynx and trachea, the short steep right bronchus and the longer\n  // left one, then the trees.\n  let d = addSeg(P, 32, 3, 32, 16.5, 1, 9, 0);\n  d = addSeg(P, 32, 16.5, 32, 48.5, 3, 0, d);\n  grow(P, 26.6, 57, -4.8, 8.5, pts[0], 2, 2.3, addSeg(P, 31.3, 48.5, 26.6, 57, 2.3, 1, d));\n  grow(P, 40.4, 56.6, 7.8, 8.1, pts[1], 2, 2.05, addSeg(P, 32.7, 48.5, 40.4, 56.6, 2.05, 1, d));\n  P.dmax = max(...P.cd);\n  P.cd = Float32Array.from(P.cd, (v) => v / P.dmax);\n  P.cox = F32(P.cd.length).fill(0.55);\n  P.airK = F32(P.cd.length);\n  // Each lung pixel takes the cluster of its nearest alveolus.\n  const best = F32(N).fill(9);\n  P.ax.forEach((cx, i) => {\n    const cy = P.ay[i];\n    for (let y = max(0, round(cy) - 3); y \u003c= min(H - 1, round(cy) + 3); y++)\n      for (let x = max(0, round(cx) - 3); x \u003c= min(W - 1, round(cx) + 3); x++) {\n        const e = hypot(x - cx, y - cy), p = y * W + x;\n        if (e \u003c best[p]) (best[p] = e), (own[p] = P.ak[i]);\n      }\n  });\n  under(P);\n}\n\n// What lies behind the lungs, breathed out, as colour times cover: the\n// larynx, the diaphragm and, dim under it, the liver and the stomach.\nfunction under(P) {\n  const { und, ua } = P;\n  const lay = (p, r, g, b, a) => {\n    if (a \u003c= 0) return;\n    const o = p * 3;\n    (und[o] += (r - und[o]) * a), (und[o + 1] += (g - und[o + 1]) * a), (und[o + 2] += (b - und[o + 2]) * a), (ua[p] += (1 - ua[p]) * a);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, t = y - d0(x), ax = abs(x - 32);\n    if (t > 3) {\n      const xb = 37 + 3 * sin(y * 0.21), f = (1 - 0.55 * sm(3, 20, t)) * (0.7 + 0.5 * vn(x * 0.17, y * 0.17)) * (0.4 + 0.6 * sm(0.3, 2, abs(x - xb)));\n      x \u003c xb ? lay(p, 60 * f, 20 * f, 22 * f, cl(t - 3, 0, 1)) : lay(p, 50 * f, 30 * f, 44 * f, cl(t - 3, 0, 1));\n    }\n    // The diaphragm: a band of muscle with a lit upper face, its tendon pale\n    // in the middle under the heart.\n    if (t > -0.5 && t \u003c 4) {\n      const ten = sm(24, 29, x) * sm(43, 38, x), st = 0.8 + 0.2 * sin(x * 1.9 + t * 0.9), lit = 1 + 0.45 * sm(1.6, 0, t);\n      lay(p, mix(232 * st, 214, ten) * 0.72 * lit, mix(82 * st, 198, ten) * 0.66 * lit, mix(96, 188, ten) * 0.66 * lit, cl(min(t + 0.5, 4 - t), 0, 1));\n    }\n    if (y \u003c 19) {\n      const hy = 3.4 + 0.03 * ax * ax;\n      if (ax \u003c 9.5) lay(p, 200, 192, 176, 0.5 * cl(1 - abs(y - hy) / 0.9, 0, 1));\n      const top = 6 + 2.2 * max(0, 1 - ax / 2.4), hw = 7.4 - 0.42 * (y - 6), e = min(y - top, 14.6 - y, hw - ax);\n      // The thyroid cartilage, its left plate lit and the right in shade.\n      if (e > -0.5) lay(p, 206, 196, 184, cl(e + 0.5, 0, 1) * (0.42 + 0.2 * exp(-((ax / 1.8) ** 2)) + 0.25 * sm(1.2, 0.2, e)) * (x \u003c 32 ? 1.05 : 0.78));\n      if (y > 15 && y \u003c 17.6 && ax \u003c 4.9) lay(p, 214, 204, 192, 0.55 * cl(4.9 - ax, 0, 1));\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.t += dt;\n  P.air = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3), dep = cl(k[2], 0, 1), alt = cl(k[3], 0, 1);\n  const bpm = (8 + 4.5 * rate + 12 * max(0, rate - 2) ** 2) * (1 + 0.45 * alt);\n  P.D = (0.5 + 0.5 * dep) * (1 - 0.4 * sm(2, 3, rate)) * (1 + 0.22 * alt);\n  if (input.btnPressed && input.btnPressed[0] && P.ct \u003c 0) (P.ct = 0), (P.cv = P.vol), (P.cn = 0);\n  let vol = 0, envIn = 0, envOut = 0, Fin = -1, Fx = 2;\n  P.bf = [];\n  P.jolt = 0;\n  if (P.ct >= 0) {\n    // A gasp, then three coughs, each a jolt and a burst of warm air up the tree.\n    const c = (P.ct += dt);\n    let j = 0;\n    while (j \u003c CK.length - 4 && c > CK[j + 2]) j += 2;\n    vol = mix(j ? CK[j + 1] : P.cv, CK[j + 3], sm(CK[j], CK[j + 2], c));\n    if (c \u003c 0.4) (envIn = sin((PI * c) / 0.4) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(c / 0.3, 0, 1)) ** 2));\n    for (const tc of CT) {\n      const u = c - tc;\n      if (u > 0 && u \u003c 0.7) P.bf.push(1 - u * 3.2), (P.jolt = max(P.jolt, 2.4 * exp(-u / 0.08)));\n    }\n    if (P.cn \u003c 3 && c > CT[P.cn] + 0.28) P.puffs.push([0, 2, rnd()]), P.cn++;\n    if (c > 1.9) (P.ct = -1), (P.ph = 0.9);\n  } else {\n    // In for 38% of a breath, out for half, then a short rest.\n    const p = (P.ph = (P.ph + (dt * bpm) / 60) % 1);\n    if (p \u003c 0.38) (vol = 0.5 - 0.5 * cos((PI * p) / 0.38)), (envIn = sin((PI * p) / 0.38) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(p / 0.3, 0, 1)) ** 2));\n    else if (p \u003c 0.88) {\n      const u = (p - 0.38) / 0.5;\n      (vol = 0.5 + 0.5 * cos(PI * u)), (envOut = sin(PI * u) ** 0.5), (Fx = 1.06 - 1.2 * sm(0.02, 0.8, u));\n    }\n    if (P.lp \u003c 0.64 && p >= 0.64) P.puffs.push([0, 1, rnd()]);\n    P.lp = p;\n  }\n  Object.assign(P, { vol, envIn, envOut, Fin, Fx });\n  // The alveoli the cold air has reached take up oxygen fast; the rest give it\n  // up slowly to the blood that carries it away.\n  const wS = max(0, 2 * P.air - 1), hi = 1 - 0.66 * alt - 0.14 * wS, { cd, cox, airK } = P;\n  for (let i = 0; i \u003c cd.length; i++) {\n    cox[i] += Fin > cd[i] ? (hi - cox[i]) * (1 - exp(-dt * 7)) : (0.05 - cox[i]) * (1 - exp(-dt * 0.85));\n    airK[i] = envIn * exp(-(((Fin - cd[i]) / 0.07) ** 2));\n  }\n  P.hp = (P.hp + (dt * (62 + 10 * rate + 40 * alt)) / 60) % 1;\n  P.hb = exp(-(((P.hp - 0.06) / 0.05) ** 2)) + 0.6 * exp(-(((P.hp - 0.3) / 0.05) ** 2));\n  P.puffs = P.puffs.filter((f) => (f[0] += dt) \u003c 5);\n}\n\n// Rest coordinates to the panel, breathed in by the per-row and per-column\n// scales: out to the sides, down with the diaphragm.\nlet FX = 0, FY = 0;\nfunction fw(P, xr, yr) {\n  const { SX, KY } = P, kx = cl(32 + (xr - 32) * SX[cl(round(yr), 0, H - 1)], 0, 62.99), ki = floor(kx);\n  FY = A0 + (yr - A0) * (KY[ki] + (KY[ki + 1] - KY[ki]) * (kx - ki));\n  FX = 32 + (xr - 32) * SX[cl(round(FY), 0, H - 1)];\n}\n\nfunction alveoli(P) {\n  const { alvA, alvS, alvK, ax, ay, as } = P, rA = 1.02 + 0.52 * P.vol * P.D;\n  alvA.fill(0);\n  for (let i = 0; i \u003c ax.length; i++) {\n    fw(P, ax[i], ay[i]);\n    const cx = FX, cy = FY, r = rA * as[i], lim = (r + 0.5) ** 2;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n        const dx = x - cx, dy = y - cy, e2 = dx * dx + dy * dy;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x;\n        const q = e / r, hx = dx + 0.4 * r, hy = dy + 0.45 * r, hl = max(0, 1 - sqrt(hx * hx + hy * hy) / (0.75 * r));\n        const s = 0.72 + 0.28 * sqrt(max(0, 1 - q * q)) + 0.38 * hl * hl;\n        if (a * s > alvA[p] * alvS[p]) (alvA[p] = a), (alvS[p] = s), (alvK[p] = i);\n      }\n  }\n}\n\nfunction tree(P) {\n  const { seg: S, trA, trV, trS, trG, trH } = P, dil = 1 + 0.1 * P.vol * P.D;\n  trA.fill(0);\n  trH.fill(0);\n  for (let j = 0; j \u003c S.length; j += 8) {\n    fw(P, S[j], S[j + 1]);\n    const x0 = FX, y0 = FY;\n    fw(P, S[j + 2], S[j + 3]);\n    const ex = FX - x0, ey = FY - y0, l2 = ex * ex + ey * ey || 1e-6, r = S[j + 4] * dil, g = S[j + 5], da = S[j + 6], db = S[j + 7], lim = (r + 1.7) ** 2, hr = min(1, r);\n    for (let y = max(0, floor(min(y0, FY) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, FY) + r + 1)); y++)\n      for (let x = max(0, floor(min(x0, FX) - r - 1)); x \u003c= min(W - 1, ceil(max(x0, FX) + r + 1)); x++) {\n        const t = cl(((x - x0) * ex + (y - y0) * ey) / l2, 0, 1), px = x - x0 - ex * t, py = y - y0 - ey * t, e2 = px * px + py * py;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x, h = cl(r + 1.7 - e, 0, 1) * hr;\n        if (h > trH[p]) trH[p] = h;\n        if (a > trA[p]) (trA[p] = a), (trS[p] = da + (db - da) * t), (trV[p] = e / r), (trG[p] = g);\n      }\n  }\n}\n\n// The collarbones and ten ribs, faint arcs that lift and spread on a breath.\nfunction ribs(P) {\n  const { rib, SX } = P, v = P.vol * P.D;\n  rib.fill(0);\n  const dot = (fx, fy, rad, k) => {\n    for (let y = max(0, round(fy) - 1); y \u003c= min(H - 1, round(fy) + 1); y++)\n      for (let x = max(0, round(fx) - 1); x \u003c= min(W - 1, round(fx) + 1); x++) {\n        const a = cl(rad + 0.5 - sqrt((x - fx) ** 2 + (y - fy) ** 2), 0, 1) * k, p = y * W + x;\n        if (a > rib[p]) rib[p] = a;\n      }\n  };\n  for (let i = 0; i \u003c= 10; i++)\n    for (const s of [-1, 1]) {\n      if (i === 0) {\n        for (let n = 0; n \u003c= 50; n++) {\n          const u = n / 50;\n          dot(32 + s * (4.5 + 21 * u), 18.6 - 4.2 * u + 1.4 * sin(PI * u) - 1.2 * v, 0.5 + 0.4 * (2 * u - 1) ** 2, 0.85);\n        }\n        continue;\n      }\n      const yr = 23 + (i - 1) * 8.4, y0 = yr - v * (1 + 0.42 * i), hw = (1.5 + 28.4 * (1 - exp(-(yr - 15) / 14))) * SX[round(yr)];\n      const rx = hw - 3, ry = (5.5 + 0.55 * i) * (1 - 0.25 * v), n = ceil((rx + ry) * 2.2);\n      for (let m = 0; m \u003c= n; m++) {\n        const th = (1.62 * m) / n;\n        dot(32 + s * (3 + rx * sin(th)), y0 + ry * (1 - cos(th)), 0.7, sm(0.2, 0.6, th));\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cox) return;\n  const { SX, KY, sd, own, cox, cb, airK, und, ua, alvA, alvS, alvK, trA, trV, trS, trG, trH, rib, O, ak, soot, GL } = P, dm = 1 / P.dmax;\n  const t = P.t, v = P.vol * P.D, air = P.air, hb = P.hb, { envIn, envOut, Fin, Fx, bf } = P;\n  const wC = max(0, 1 - 2 * air), wW = 1 - abs(2 * air - 1), wS = max(0, 2 * air - 1);\n  const pal = (c, w, s) => [0, 1, 2].map((i) => c[i] * wC + w[i] * wW + s[i] * wS);\n  const bgT = pal([3, 7, 18], [16, 26, 48], [62, 50, 32]), bgB = pal([2, 4, 12], [8, 14, 30], [36, 28, 20]), glo = pal([8, 18, 40], [22, 38, 64], [40, 30, 18]);\n  const cold = pal([150, 205, 255], [215, 238, 255], [196, 178, 128]), warm = pal([255, 196, 160], [255, 224, 206], [190, 160, 130]);\n  const puffC = pal([255, 214, 196], [236, 242, 255], [168, 158, 144]), puffK = 0.6 * wC + 1.5 * wW + 0.7 * wS;\n  const oxA = [240 - 64 * wS, 46 + 26 * wS, 58 + 20 * wS];\n  for (let y = 0; y \u003c H; y++) SX[y] = 1 + 0.085 * v * (0.25 + 0.75 * sm(15, 115, y));\n  for (let x = 0; x \u003c W; x++) KY[x] = 1 + 0.14 * v * GX[x];\n  alveoli(P);\n  tree(P);\n  ribs(P);\n  // The breath leaving at the top: each puff rises, spreads and thins.\n  const pf = [];\n  for (const [age, str, sd0] of P.puffs) {\n    const R = 3 + (5 + 8 * wW) * age;\n    pf.push(32 + (sd0 - 0.5) * 8, 6 - 3.2 * age, R, str * sm(0, 0.25, age) * exp(-age / (0.9 + 1.6 * wW)), sd0 * 40);\n  }\n  const hs = 1 / (1 - 0.035 * hb);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const fy = y / 127, gl = GL[p];\n      let hz = 1;\n      if (wS > 0) hz = 1 + wS * (0.18 * sin(x * 0.2 + y * 0.05 + t * 0.6) + 0.18 * sin(y * 0.13 - x * 0.06 - t * 0.35));\n      for (let c = 0; c \u003c 3; c++) C[c] = (bgT[c] + (bgB[c] - bgT[c]) * fy + glo[c] * gl) * hz;\n      const xr = cl(32 + (x - 32) / SX[y], 0, 62.999), yr = cl(A0 + (y - A0) / KY[x], 0, 126.999);\n      const xi = xr | 0, yi = yr | 0, fx = xr - xi, fz = yr - yi, q = yi * W + xi;\n      if (ua[q] + ua[q + 1] + ua[q + W] + ua[q + W + 1] > 0) {\n        const w0 = (1 - fx) * (1 - fz) * ua[q], w1 = fx * (1 - fz) * ua[q + 1], w2 = (1 - fx) * fz * ua[q + W], w3 = fx * fz * ua[q + W + 1], a = 1 - w0 - w1 - w2 - w3;\n        const o0 = q * 3, o2 = o0 + W * 3;\n        for (let c = 0; c \u003c 3; c++) C[c] = C[c] * a + und[o0 + c] * w0 + und[o0 + 3 + c] * w1 + und[o2 + c] * w2 + und[o2 + 3 + c] * w3;\n      }\n      // The heart, dim behind the lungs, its apex down to the left.\n      if (xr > 20 && xr \u003c 56 && yr > 60 && yr \u003c 110) {\n        const dx = xr - 36.6, dy = yr - 86, hv = (dx * 0.6 + dy * 0.8) * hs, hu = (dx * 0.8 - dy * 0.6) * hs, eu = hu / (12.5 * (1 - 0.36 * sm(-6, 19, hv))), ev = hv / 19;\n        const a = cl((1 - sqrt(eu * eu + ev * ev)) * 9, 0, 1);\n        if (a > 0) {\n          const k = (0.4 + 0.32 * hb) * (0.65 + 0.45 * sm(9, -9, hu));\n          bl(150 * k, 26 * k, 44 * k, a);\n        }\n      }\n      // The lung: a dusky body, the grape clusters of alveoli, the capillary\n      // net shimmering on them, the pleura at the edge.\n      const s = samp(sd, xr, yr), qn = round(yr) * W + round(xr);\n      let m = 0;\n      if (s \u003c 1.2) {\n        const c = own[qn], ox = c >= 0 ? cox[c] : 0.3;\n        m = cl(0.5 - s, 0, 1);\n        if (m > 0) bl(24 + 56 * ox, 14 - 4 * ox, 50 - 20 * ox, 0.92 * m);\n        const aa = alvA[p];\n        if (aa > 0) {\n          const i = alvK[p], cc = ak[i], o = cox[cc], sh = alvS[p] * cb[cc] * (soot[i] \u003c wS * 0.4 ? 0.3 : 1), af = 0.4 * airK[cc];\n          for (let c = 0; c \u003c 3; c++) C[c] += ((DA[c] + (oxA[c] - DA[c]) * o) * sh + cold[c] * af - C[c]) * aa;\n        }\n        const cv = hash(qn, 5);\n        if (m > 0 && cv > 0.6) {\n          const k = (cv - 0.35) * (0.75 + 0.75 * sin(t * 6 + cv * 90 + 2 * hb)) * (0.12 + 0.34 * ox) * m;\n          (C[0] += 230 * k), (C[1] += 30 * k), (C[2] += 50 * k);\n        }\n        const rm = cl(1 - abs(s + 0.45) / 0.75, 0, 1) * 0.5;\n        if (rm > 0) bl(126 + 129 * ox, 100 + 24 * ox, 214 - 70 * ox, rm);\n        // A shadow along each airway lifts the tree off the alveoli.\n        bl(0, 0, 0, trH[p] * 0.5 * m);\n      }\n      // The airways, and the air in them.\n      const ta = trA[p];\n      if (ta > 0) {\n        const gg = trG[p], vv = trV[p], d = trS[p] * dm, wc = WC[gg], al = AG[gg] * ta;\n        let wb = 0.85;\n        if (gg \u003c= 1) {\n          const ring = 0.5 + 0.5 * cos(trS[p] * 2.73);\n          wb = (0.5 + 0.5 * sm(0.35, 0.95, vv)) * (0.66 + 0.44 * ring * ring);\n        } else if (gg \u003c= 3) wb = 0.65 + 0.35 * sm(0.3, 1, vv);\n        bl(wc[0] * wb, wc[1] * wb, wc[2] * wb, al);\n        let ca = 0, wa = 0;\n        if (envIn > 0 && d \u003c Fin) ca = envIn * (0.3 + 0.7 * exp(-(((Fin - d) / 0.05) ** 2)));\n        if (envOut > 0 && d > Fx) wa = envOut * (0.24 + 0.76 * exp(-(((d - Fx) / 0.05) ** 2)));\n        for (const f of bf) wa += 1.3 * exp(-(((d - f) / 0.06) ** 2)) + (d > f ? 0.25 : 0);\n        const lf = (gg \u003c= 1 ? 1 - 0.5 * sm(0.55, 1, vv) : 1) * ta * (gg === 9 ? 0.8 : 0.9);\n        for (let c = 0; c \u003c 3; c++) C[c] += (cold[c] * ca + warm[c] * wa) * lf;\n      }\n      const rb = rib[p];\n      if (rb > 0) bl(220, 210, 196, rb * (0.42 + 0.1 * m));\n      if (y \u003c 48 && pf.length) {\n        let pa = 0;\n        for (let j = 0; j \u003c pf.length; j += 5) {\n          const dx = (x - pf[j]) / (pf[j + 2] * 1.4), dy = (y - pf[j + 1]) / pf[j + 2], e = dx * dx + dy * dy;\n          if (e \u003c 4) pa += pf[j + 3] * exp(-e * 1.4) * cl(0.4 + 1.4 * (vn(x * 0.2 + pf[j + 4], y * 0.2 + t * 0.9) - 0.5) + 0.5 * exp(-e * 3), 0, 1.4);\n        }\n        if (pa > 0) bl(puffC[0], puffC[1], puffC[2], min(1, pa * puffK));\n      }\n      if (wS > 0) bl(120, 96, 62, 0.14 * wS * hz);\n      O.set(C, p * 3);\n    }\n  // A cough jolts the whole chest up.\n  const jl = round(P.jolt);\n  for (let y = 0; y \u003c H; y++) {\n    const o = min(H - 1, y + jl) * W * 3;\n    for (let x = 0; x \u003c W; x++) display.setPixel(x, y, min(255, O[o + x * 3]) | 0, min(255, O[o + x * 3 + 1]) | 0, min(255, O[o + x * 3 + 2]) | 0);\n  }\n}\n","layer":{"id":"layer-breath","type":"code","name":"breath","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Breath\n// Family:  body\n// Idea:    A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after anatomical plates of the lungs, with the bronchial tree grown by volume-filling branching (Tawhai, Pullan and Hunter, 2000)\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1\n//\n// Knob 1: Air. What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli.\n// Knob 2: Rate. Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3.\n// Knob 3: Depth. A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far.\n// Knob 4: Altitude. Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own.\n// Buttons: K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.\n\nconst W = 64, H = 128, N = W * H, A0 = 2;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, ceil, round, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The diaphragm under the lungs breathed out, x then y: the right dome higher\n// over the liver, the heart sitting in the dip between the domes.\nconst DK = [-1, 118.5, 5, 113.8, 9, 108.4, 13, 103.8, 17, 101.6, 21, 101, 25, 101.8, 29, 104.2, 33, 106, 37, 106.6, 41, 106.6, 45, 105.8, 49, 106.8, 53, 110.2, 57, 115, 60, 117.8, 65, 122.5];\nconst D0T = F32(68);\nfor (let i = 0, k = 0; i \u003c 68; i++) {\n  while (k \u003c DK.length - 4 && i - 1 > DK[k + 2]) k += 2;\n  D0T[i] = mix(DK[k + 1], DK[k + 3], (i - 1 - DK[k]) / (DK[k + 2] - DK[k]));\n}\nfor (let n = 0; n \u003c 4; n++) for (let i = 1; i \u003c 67; i++) D0T[i] = (D0T[i - 1] + 2 * D0T[i] + D0T[i + 1]) / 4;\nconst d0 = (x) => ((x = cl(x + 1, 0, 66.99)), D0T[floor(x)] + (D0T[floor(x) + 1] - D0T[floor(x)]) * (x - floor(x)));\n// How far the diaphragm drops at each column: most under the two domes, so\n// they flatten.\nconst GX = Float32Array.from({ length: W }, (_, x) => 0.32 + 0.68 * (exp(-(((x - 17) / 10) ** 2)) + exp(-(((x - 46) / 10) ** 2))));\n// The outlines of the right lung (on the viewer's left) and the smaller left\n// lung with the heart's notch, breathed out. The diaphragm cuts their bases.\nconst LUNGS = [\n  [19, 21, 15, 22.5, 11.5, 26, 8.5, 32, 6.3, 40, 4.8, 50, 4, 60, 3.6, 72, 3.6, 84, 4, 96, 4.6, 106, 5.6, 126, 28.8, 126, 28.6, 104, 28.2, 98, 27.6, 90, 27.2, 82, 27.6, 74, 28.6, 66, 29, 58, 28.6, 50, 27.8, 42, 26.6, 34, 24.8, 27, 22.5, 22.5],\n  [44.5, 22, 48.5, 23.5, 52, 27, 55, 33, 57.2, 41, 58.8, 51, 59.6, 62, 60, 74, 60.2, 86, 60.2, 98, 59.9, 108, 59.2, 126, 41.5, 126, 41.5, 106, 41, 103, 42.4, 98, 44.5, 92, 45.4, 86, 44.4, 80, 41.8, 75, 38.6, 71, 36.6, 66, 36, 58, 36.4, 50, 37.2, 42, 38.4, 34, 40, 28, 42, 23.5],\n];\n// Airway walls by generation (9 is the channel through the larynx), and how\n// strongly each shows over the lung.\nconst WC = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? [226, 216, 204] : [232 - 2 * g, 208 - 4 * g, 206]));\nconst AG = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? 1 : g > 8 ? 0 : 1.1 - 0.08 * g));\n// The cough: seconds and lung volume, and the moments of the three jolts.\nconst CK = [0, 0, 0.32, 0.97, 0.44, 0.97, 0.54, 0.66, 0.84, 0.66, 0.94, 0.38, 1.24, 0.38, 1.34, 0.12, 1.9, 0];\nconst CT = [0.44, 0.84, 1.24];\n\nfunction sdPoly(v, px, py) {\n  let d = 1e9, s = 1;\n  for (let i = 0, j = v.length - 2; i \u003c v.length; j = i, i += 2) {\n    const ex = v[j] - v[i], ey = v[j + 1] - v[i + 1], wx = px - v[i], wy = py - v[i + 1];\n    const t = cl((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1), bx = wx - ex * t, by = wy - ey * t;\n    d = min(d, bx * bx + by * by);\n    const c1 = py >= v[i + 1], c2 = py \u003c v[j + 1], c3 = ex * wy > ey * wx;\n    if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s = -s;\n  }\n  return s * sqrt(d);\n}\n// The colour being built for one LED, and mixing toward another by k.\nconst C = F32(3);\nconst DA = [74, 58, 156];\nconst bl = (r, g, b, k) => ((C[0] += (r - C[0]) * k), (C[1] += (g - C[1]) * k), (C[2] += (b - C[2]) * k));\nfunction samp(A, x, y) {\n  x = cl(x, 0, 62.999);\n  y = cl(y, 0, 126.999);\n  const xi = x | 0, yi = y | 0, fx = x - xi, p = yi * W + xi, a = A[p] + (A[p + 1] - A[p]) * fx;\n  return a + (A[p + W] + (A[p + W + 1] - A[p + W]) * fx - a) * (y - yi);\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ph: 0.68, lp: 0.68, vol: 0.6, D: 0.5, air: 0, ct: -1, jolt: 0, hp: 0, hb: 0, envIn: 0, envOut: 0, Fin: -1, Fx: 2, bf: [], puffs: [],\n    sd: F32(N), own: new Int16Array(N).fill(-1), und: F32(N * 3), ua: F32(N), GL: F32(N),\n    SX: F32(H), KY: F32(W), alvA: F32(N), alvS: F32(N), alvK: new Int16Array(N), trA: F32(N), trV: F32(N), trS: F32(N), trG: new Int8Array(N), rib: F32(N), O: F32(N * 3),\n    seg: [], ax: [], ay: [], as: [], soot: [], cd: [], cb: [], trH: F32(N),\n  });\n  build(P);\n}\n\nfunction addSeg(P, x0, y0, x1, y1, r, g, d) {\n  const e = d + hypot(x1 - x0, y1 - y0);\n  P.seg.push(x0, y0, x1, y1, r, g, d, e);\n  return e;\n}\n\n// Volume-filling branching: a branch's alveoli are split by the line from its\n// end through their centroid, and each half gets a child that runs 40% of the\n// way to its own centroid, until a handful is left: one grape cluster.\nfunction grow(P, x0, y0, dx, dy, pts, g, r, d) {\n  const { ax, ay } = P, n = pts.length;\n  let cx = 0, cy = 0;\n  for (const i of pts) (cx += ax[i]), (cy += ay[i]);\n  (cx /= n), (cy /= n);\n  if (n \u003c= 7 || g > 8) {\n    for (const i of pts) (P.ak[i] = P.cd.length), (ax[i] += (cx - ax[i]) * 0.3), (ay[i] += (cy - ay[i]) * 0.3);\n    P.cd.push(d + hypot(cx - x0, cy - y0));\n    P.cb.push(0.84 + 0.32 * rnd());\n    return;\n  }\n  // The lobes split along the line from the branch to their centroid; past\n  // them each set is cut across its long axis, a near half and a far one.\n  let ux = cx - x0, uy = cy - y0, ul = hypot(ux, uy), ox = x0, oy = y0;\n  if (g > 2) {\n    let sxx = 0, syy = 0, sxy = 0;\n    for (const i of pts) (sxx += (ax[i] - cx) ** 2), (syy += (ay[i] - cy) ** 2), (sxy += (ax[i] - cx) * (ay[i] - cy));\n    const th = 0.5 * atan2(2 * sxy, sxx - syy) + PI / 2;\n    (ux = cos(th)), (uy = sin(th)), (ul = 1), (ox = cx), (oy = cy);\n  }\n  if (ul \u003c 0.5) (ux = dx), (uy = dy), (ul = hypot(dx, dy));\n  (ux /= ul), (uy /= ul);\n  const side = (i) => (ax[i] - ox) * uy - (ay[i] - oy) * ux;\n  let A = pts.filter((i) => side(i) > 0), B = pts.filter((i) => side(i) \u003c= 0);\n  if (A.length \u003c 2 || B.length \u003c 2) {\n    const s = pts.slice().sort((i, j) => side(i) - side(j));\n    (A = s.slice(0, n >> 1)), (B = s.slice(n >> 1));\n  }\n  const pa = atan2(dy, dx), lim = g === 2 ? 1.75 : 1.1;\n  for (const Q of [A, B]) {\n    let qx = 0, qy = 0;\n    for (const i of Q) (qx += ax[i]), (qy += ay[i]);\n    (qx = qx / Q.length - x0), (qy = qy / Q.length - y0);\n    let a = atan2(qy, qx), da = a - pa;\n    da = atan2(sin(da), cos(da));\n    if (abs(da) > lim) a = pa + Math.sign(da) * lim;\n    let len = max(1.2, hypot(qx, qy) * (Q.length \u003c= 7 ? 0.55 : 0.4)), x1, y1;\n    for (;;) {\n      (x1 = x0 + cos(a) * len), (y1 = y0 + sin(a) * len);\n      if (len \u003c= 1.2 || samp(P.sd, x1, y1) \u003c -0.6) break;\n      len *= 0.8;\n    }\n    const rr = max(0.5, r * Math.cbrt(Q.length / n));\n    grow(P, x1, y1, x1 - x0, y1 - y0, Q, g + 1, rr, addSeg(P, x0, y0, x1, y1, rr, g, d));\n  }\n}\n\nfunction build(P) {\n  const { sd, own, GL } = P;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, sl = d0(x + 0.5) - d0(x - 0.5), cut = (y - d0(x) + 0.6) / sqrt(1 + sl * sl);\n    const a = y \u003c 15 ? 6 : max(sdPoly(LUNGS[0], x, y), cut), b = y \u003c 15 ? 6 : max(sdPoly(LUNGS[1], x, y), cut);\n    sd[p] = min(a, b) + 0.9 * (vn(x * 0.32, y * 0.32) - 0.5);\n    GL[p] = exp(-(((x - 32) / 26) ** 2) - (((y - 66) / 50) ** 2));\n  }\n  // Alveoli on a jittered honeycomb inside the lungs.\n  const pts = [[], []];\n  for (let j = 0; j \u003c 56; j++)\n    for (let i = 0; i \u003c 29; i++) {\n      const x = 1 + i * 2.25 + (j & 1) * 1.125 + (rnd() - 0.5) * 0.7, y = 19 + j * 1.95 + (rnd() - 0.5) * 0.7;\n      if (x > 62.5 || y > 125 || samp(sd, x, y) > -1) continue;\n      pts[x \u003c 32 ? 0 : 1].push(P.ax.length);\n      P.ax.push(x), P.ay.push(y), P.as.push(0.86 + 0.28 * rnd()), P.soot.push(rnd());\n    }\n  P.ak = new Int16Array(P.ax.length);\n  // The larynx and trachea, the short steep right bronchus and the longer\n  // left one, then the trees.\n  let d = addSeg(P, 32, 3, 32, 16.5, 1, 9, 0);\n  d = addSeg(P, 32, 16.5, 32, 48.5, 3, 0, d);\n  grow(P, 26.6, 57, -4.8, 8.5, pts[0], 2, 2.3, addSeg(P, 31.3, 48.5, 26.6, 57, 2.3, 1, d));\n  grow(P, 40.4, 56.6, 7.8, 8.1, pts[1], 2, 2.05, addSeg(P, 32.7, 48.5, 40.4, 56.6, 2.05, 1, d));\n  P.dmax = max(...P.cd);\n  P.cd = Float32Array.from(P.cd, (v) => v / P.dmax);\n  P.cox = F32(P.cd.length).fill(0.55);\n  P.airK = F32(P.cd.length);\n  // Each lung pixel takes the cluster of its nearest alveolus.\n  const best = F32(N).fill(9);\n  P.ax.forEach((cx, i) => {\n    const cy = P.ay[i];\n    for (let y = max(0, round(cy) - 3); y \u003c= min(H - 1, round(cy) + 3); y++)\n      for (let x = max(0, round(cx) - 3); x \u003c= min(W - 1, round(cx) + 3); x++) {\n        const e = hypot(x - cx, y - cy), p = y * W + x;\n        if (e \u003c best[p]) (best[p] = e), (own[p] = P.ak[i]);\n      }\n  });\n  under(P);\n}\n\n// What lies behind the lungs, breathed out, as colour times cover: the\n// larynx, the diaphragm and, dim under it, the liver and the stomach.\nfunction under(P) {\n  const { und, ua } = P;\n  const lay = (p, r, g, b, a) => {\n    if (a \u003c= 0) return;\n    const o = p * 3;\n    (und[o] += (r - und[o]) * a), (und[o + 1] += (g - und[o + 1]) * a), (und[o + 2] += (b - und[o + 2]) * a), (ua[p] += (1 - ua[p]) * a);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, t = y - d0(x), ax = abs(x - 32);\n    if (t > 3) {\n      const xb = 37 + 3 * sin(y * 0.21), f = (1 - 0.55 * sm(3, 20, t)) * (0.7 + 0.5 * vn(x * 0.17, y * 0.17)) * (0.4 + 0.6 * sm(0.3, 2, abs(x - xb)));\n      x \u003c xb ? lay(p, 60 * f, 20 * f, 22 * f, cl(t - 3, 0, 1)) : lay(p, 50 * f, 30 * f, 44 * f, cl(t - 3, 0, 1));\n    }\n    // The diaphragm: a band of muscle with a lit upper face, its tendon pale\n    // in the middle under the heart.\n    if (t > -0.5 && t \u003c 4) {\n      const ten = sm(24, 29, x) * sm(43, 38, x), st = 0.8 + 0.2 * sin(x * 1.9 + t * 0.9), lit = 1 + 0.45 * sm(1.6, 0, t);\n      lay(p, mix(232 * st, 214, ten) * 0.72 * lit, mix(82 * st, 198, ten) * 0.66 * lit, mix(96, 188, ten) * 0.66 * lit, cl(min(t + 0.5, 4 - t), 0, 1));\n    }\n    if (y \u003c 19) {\n      const hy = 3.4 + 0.03 * ax * ax;\n      if (ax \u003c 9.5) lay(p, 200, 192, 176, 0.5 * cl(1 - abs(y - hy) / 0.9, 0, 1));\n      const top = 6 + 2.2 * max(0, 1 - ax / 2.4), hw = 7.4 - 0.42 * (y - 6), e = min(y - top, 14.6 - y, hw - ax);\n      // The thyroid cartilage, its left plate lit and the right in shade.\n      if (e > -0.5) lay(p, 206, 196, 184, cl(e + 0.5, 0, 1) * (0.42 + 0.2 * exp(-((ax / 1.8) ** 2)) + 0.25 * sm(1.2, 0.2, e)) * (x \u003c 32 ? 1.05 : 0.78));\n      if (y > 15 && y \u003c 17.6 && ax \u003c 4.9) lay(p, 214, 204, 192, 0.55 * cl(4.9 - ax, 0, 1));\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.t += dt;\n  P.air = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3), dep = cl(k[2], 0, 1), alt = cl(k[3], 0, 1);\n  const bpm = (8 + 4.5 * rate + 12 * max(0, rate - 2) ** 2) * (1 + 0.45 * alt);\n  P.D = (0.5 + 0.5 * dep) * (1 - 0.4 * sm(2, 3, rate)) * (1 + 0.22 * alt);\n  if (input.btnPressed && input.btnPressed[0] && P.ct \u003c 0) (P.ct = 0), (P.cv = P.vol), (P.cn = 0);\n  let vol = 0, envIn = 0, envOut = 0, Fin = -1, Fx = 2;\n  P.bf = [];\n  P.jolt = 0;\n  if (P.ct >= 0) {\n    // A gasp, then three coughs, each a jolt and a burst of warm air up the tree.\n    const c = (P.ct += dt);\n    let j = 0;\n    while (j \u003c CK.length - 4 && c > CK[j + 2]) j += 2;\n    vol = mix(j ? CK[j + 1] : P.cv, CK[j + 3], sm(CK[j], CK[j + 2], c));\n    if (c \u003c 0.4) (envIn = sin((PI * c) / 0.4) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(c / 0.3, 0, 1)) ** 2));\n    for (const tc of CT) {\n      const u = c - tc;\n      if (u > 0 && u \u003c 0.7) P.bf.push(1 - u * 3.2), (P.jolt = max(P.jolt, 2.4 * exp(-u / 0.08)));\n    }\n    if (P.cn \u003c 3 && c > CT[P.cn] + 0.28) P.puffs.push([0, 2, rnd()]), P.cn++;\n    if (c > 1.9) (P.ct = -1), (P.ph = 0.9);\n  } else {\n    // In for 38% of a breath, out for half, then a short rest.\n    const p = (P.ph = (P.ph + (dt * bpm) / 60) % 1);\n    if (p \u003c 0.38) (vol = 0.5 - 0.5 * cos((PI * p) / 0.38)), (envIn = sin((PI * p) / 0.38) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(p / 0.3, 0, 1)) ** 2));\n    else if (p \u003c 0.88) {\n      const u = (p - 0.38) / 0.5;\n      (vol = 0.5 + 0.5 * cos(PI * u)), (envOut = sin(PI * u) ** 0.5), (Fx = 1.06 - 1.2 * sm(0.02, 0.8, u));\n    }\n    if (P.lp \u003c 0.64 && p >= 0.64) P.puffs.push([0, 1, rnd()]);\n    P.lp = p;\n  }\n  Object.assign(P, { vol, envIn, envOut, Fin, Fx });\n  // The alveoli the cold air has reached take up oxygen fast; the rest give it\n  // up slowly to the blood that carries it away.\n  const wS = max(0, 2 * P.air - 1), hi = 1 - 0.66 * alt - 0.14 * wS, { cd, cox, airK } = P;\n  for (let i = 0; i \u003c cd.length; i++) {\n    cox[i] += Fin > cd[i] ? (hi - cox[i]) * (1 - exp(-dt * 7)) : (0.05 - cox[i]) * (1 - exp(-dt * 0.85));\n    airK[i] = envIn * exp(-(((Fin - cd[i]) / 0.07) ** 2));\n  }\n  P.hp = (P.hp + (dt * (62 + 10 * rate + 40 * alt)) / 60) % 1;\n  P.hb = exp(-(((P.hp - 0.06) / 0.05) ** 2)) + 0.6 * exp(-(((P.hp - 0.3) / 0.05) ** 2));\n  P.puffs = P.puffs.filter((f) => (f[0] += dt) \u003c 5);\n}\n\n// Rest coordinates to the panel, breathed in by the per-row and per-column\n// scales: out to the sides, down with the diaphragm.\nlet FX = 0, FY = 0;\nfunction fw(P, xr, yr) {\n  const { SX, KY } = P, kx = cl(32 + (xr - 32) * SX[cl(round(yr), 0, H - 1)], 0, 62.99), ki = floor(kx);\n  FY = A0 + (yr - A0) * (KY[ki] + (KY[ki + 1] - KY[ki]) * (kx - ki));\n  FX = 32 + (xr - 32) * SX[cl(round(FY), 0, H - 1)];\n}\n\nfunction alveoli(P) {\n  const { alvA, alvS, alvK, ax, ay, as } = P, rA = 1.02 + 0.52 * P.vol * P.D;\n  alvA.fill(0);\n  for (let i = 0; i \u003c ax.length; i++) {\n    fw(P, ax[i], ay[i]);\n    const cx = FX, cy = FY, r = rA * as[i], lim = (r + 0.5) ** 2;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n        const dx = x - cx, dy = y - cy, e2 = dx * dx + dy * dy;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x;\n        const q = e / r, hx = dx + 0.4 * r, hy = dy + 0.45 * r, hl = max(0, 1 - sqrt(hx * hx + hy * hy) / (0.75 * r));\n        const s = 0.72 + 0.28 * sqrt(max(0, 1 - q * q)) + 0.38 * hl * hl;\n        if (a * s > alvA[p] * alvS[p]) (alvA[p] = a), (alvS[p] = s), (alvK[p] = i);\n      }\n  }\n}\n\nfunction tree(P) {\n  const { seg: S, trA, trV, trS, trG, trH } = P, dil = 1 + 0.1 * P.vol * P.D;\n  trA.fill(0);\n  trH.fill(0);\n  for (let j = 0; j \u003c S.length; j += 8) {\n    fw(P, S[j], S[j + 1]);\n    const x0 = FX, y0 = FY;\n    fw(P, S[j + 2], S[j + 3]);\n    const ex = FX - x0, ey = FY - y0, l2 = ex * ex + ey * ey || 1e-6, r = S[j + 4] * dil, g = S[j + 5], da = S[j + 6], db = S[j + 7], lim = (r + 1.7) ** 2, hr = min(1, r);\n    for (let y = max(0, floor(min(y0, FY) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, FY) + r + 1)); y++)\n      for (let x = max(0, floor(min(x0, FX) - r - 1)); x \u003c= min(W - 1, ceil(max(x0, FX) + r + 1)); x++) {\n        const t = cl(((x - x0) * ex + (y - y0) * ey) / l2, 0, 1), px = x - x0 - ex * t, py = y - y0 - ey * t, e2 = px * px + py * py;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x, h = cl(r + 1.7 - e, 0, 1) * hr;\n        if (h > trH[p]) trH[p] = h;\n        if (a > trA[p]) (trA[p] = a), (trS[p] = da + (db - da) * t), (trV[p] = e / r), (trG[p] = g);\n      }\n  }\n}\n\n// The collarbones and ten ribs, faint arcs that lift and spread on a breath.\nfunction ribs(P) {\n  const { rib, SX } = P, v = P.vol * P.D;\n  rib.fill(0);\n  const dot = (fx, fy, rad, k) => {\n    for (let y = max(0, round(fy) - 1); y \u003c= min(H - 1, round(fy) + 1); y++)\n      for (let x = max(0, round(fx) - 1); x \u003c= min(W - 1, round(fx) + 1); x++) {\n        const a = cl(rad + 0.5 - sqrt((x - fx) ** 2 + (y - fy) ** 2), 0, 1) * k, p = y * W + x;\n        if (a > rib[p]) rib[p] = a;\n      }\n  };\n  for (let i = 0; i \u003c= 10; i++)\n    for (const s of [-1, 1]) {\n      if (i === 0) {\n        for (let n = 0; n \u003c= 50; n++) {\n          const u = n / 50;\n          dot(32 + s * (4.5 + 21 * u), 18.6 - 4.2 * u + 1.4 * sin(PI * u) - 1.2 * v, 0.5 + 0.4 * (2 * u - 1) ** 2, 0.85);\n        }\n        continue;\n      }\n      const yr = 23 + (i - 1) * 8.4, y0 = yr - v * (1 + 0.42 * i), hw = (1.5 + 28.4 * (1 - exp(-(yr - 15) / 14))) * SX[round(yr)];\n      const rx = hw - 3, ry = (5.5 + 0.55 * i) * (1 - 0.25 * v), n = ceil((rx + ry) * 2.2);\n      for (let m = 0; m \u003c= n; m++) {\n        const th = (1.62 * m) / n;\n        dot(32 + s * (3 + rx * sin(th)), y0 + ry * (1 - cos(th)), 0.7, sm(0.2, 0.6, th));\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cox) return;\n  const { SX, KY, sd, own, cox, cb, airK, und, ua, alvA, alvS, alvK, trA, trV, trS, trG, trH, rib, O, ak, soot, GL } = P, dm = 1 / P.dmax;\n  const t = P.t, v = P.vol * P.D, air = P.air, hb = P.hb, { envIn, envOut, Fin, Fx, bf } = P;\n  const wC = max(0, 1 - 2 * air), wW = 1 - abs(2 * air - 1), wS = max(0, 2 * air - 1);\n  const pal = (c, w, s) => [0, 1, 2].map((i) => c[i] * wC + w[i] * wW + s[i] * wS);\n  const bgT = pal([3, 7, 18], [16, 26, 48], [62, 50, 32]), bgB = pal([2, 4, 12], [8, 14, 30], [36, 28, 20]), glo = pal([8, 18, 40], [22, 38, 64], [40, 30, 18]);\n  const cold = pal([150, 205, 255], [215, 238, 255], [196, 178, 128]), warm = pal([255, 196, 160], [255, 224, 206], [190, 160, 130]);\n  const puffC = pal([255, 214, 196], [236, 242, 255], [168, 158, 144]), puffK = 0.6 * wC + 1.5 * wW + 0.7 * wS;\n  const oxA = [240 - 64 * wS, 46 + 26 * wS, 58 + 20 * wS];\n  for (let y = 0; y \u003c H; y++) SX[y] = 1 + 0.085 * v * (0.25 + 0.75 * sm(15, 115, y));\n  for (let x = 0; x \u003c W; x++) KY[x] = 1 + 0.14 * v * GX[x];\n  alveoli(P);\n  tree(P);\n  ribs(P);\n  // The breath leaving at the top: each puff rises, spreads and thins.\n  const pf = [];\n  for (const [age, str, sd0] of P.puffs) {\n    const R = 3 + (5 + 8 * wW) * age;\n    pf.push(32 + (sd0 - 0.5) * 8, 6 - 3.2 * age, R, str * sm(0, 0.25, age) * exp(-age / (0.9 + 1.6 * wW)), sd0 * 40);\n  }\n  const hs = 1 / (1 - 0.035 * hb);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const fy = y / 127, gl = GL[p];\n      let hz = 1;\n      if (wS > 0) hz = 1 + wS * (0.18 * sin(x * 0.2 + y * 0.05 + t * 0.6) + 0.18 * sin(y * 0.13 - x * 0.06 - t * 0.35));\n      for (let c = 0; c \u003c 3; c++) C[c] = (bgT[c] + (bgB[c] - bgT[c]) * fy + glo[c] * gl) * hz;\n      const xr = cl(32 + (x - 32) / SX[y], 0, 62.999), yr = cl(A0 + (y - A0) / KY[x], 0, 126.999);\n      const xi = xr | 0, yi = yr | 0, fx = xr - xi, fz = yr - yi, q = yi * W + xi;\n      if (ua[q] + ua[q + 1] + ua[q + W] + ua[q + W + 1] > 0) {\n        const w0 = (1 - fx) * (1 - fz) * ua[q], w1 = fx * (1 - fz) * ua[q + 1], w2 = (1 - fx) * fz * ua[q + W], w3 = fx * fz * ua[q + W + 1], a = 1 - w0 - w1 - w2 - w3;\n        const o0 = q * 3, o2 = o0 + W * 3;\n        for (let c = 0; c \u003c 3; c++) C[c] = C[c] * a + und[o0 + c] * w0 + und[o0 + 3 + c] * w1 + und[o2 + c] * w2 + und[o2 + 3 + c] * w3;\n      }\n      // The heart, dim behind the lungs, its apex down to the left.\n      if (xr > 20 && xr \u003c 56 && yr > 60 && yr \u003c 110) {\n        const dx = xr - 36.6, dy = yr - 86, hv = (dx * 0.6 + dy * 0.8) * hs, hu = (dx * 0.8 - dy * 0.6) * hs, eu = hu / (12.5 * (1 - 0.36 * sm(-6, 19, hv))), ev = hv / 19;\n        const a = cl((1 - sqrt(eu * eu + ev * ev)) * 9, 0, 1);\n        if (a > 0) {\n          const k = (0.4 + 0.32 * hb) * (0.65 + 0.45 * sm(9, -9, hu));\n          bl(150 * k, 26 * k, 44 * k, a);\n        }\n      }\n      // The lung: a dusky body, the grape clusters of alveoli, the capillary\n      // net shimmering on them, the pleura at the edge.\n      const s = samp(sd, xr, yr), qn = round(yr) * W + round(xr);\n      let m = 0;\n      if (s \u003c 1.2) {\n        const c = own[qn], ox = c >= 0 ? cox[c] : 0.3;\n        m = cl(0.5 - s, 0, 1);\n        if (m > 0) bl(24 + 56 * ox, 14 - 4 * ox, 50 - 20 * ox, 0.92 * m);\n        const aa = alvA[p];\n        if (aa > 0) {\n          const i = alvK[p], cc = ak[i], o = cox[cc], sh = alvS[p] * cb[cc] * (soot[i] \u003c wS * 0.4 ? 0.3 : 1), af = 0.4 * airK[cc];\n          for (let c = 0; c \u003c 3; c++) C[c] += ((DA[c] + (oxA[c] - DA[c]) * o) * sh + cold[c] * af - C[c]) * aa;\n        }\n        const cv = hash(qn, 5);\n        if (m > 0 && cv > 0.6) {\n          const k = (cv - 0.35) * (0.75 + 0.75 * sin(t * 6 + cv * 90 + 2 * hb)) * (0.12 + 0.34 * ox) * m;\n          (C[0] += 230 * k), (C[1] += 30 * k), (C[2] += 50 * k);\n        }\n        const rm = cl(1 - abs(s + 0.45) / 0.75, 0, 1) * 0.5;\n        if (rm > 0) bl(126 + 129 * ox, 100 + 24 * ox, 214 - 70 * ox, rm);\n        // A shadow along each airway lifts the tree off the alveoli.\n        bl(0, 0, 0, trH[p] * 0.5 * m);\n      }\n      // The airways, and the air in them.\n      const ta = trA[p];\n      if (ta > 0) {\n        const gg = trG[p], vv = trV[p], d = trS[p] * dm, wc = WC[gg], al = AG[gg] * ta;\n        let wb = 0.85;\n        if (gg \u003c= 1) {\n          const ring = 0.5 + 0.5 * cos(trS[p] * 2.73);\n          wb = (0.5 + 0.5 * sm(0.35, 0.95, vv)) * (0.66 + 0.44 * ring * ring);\n        } else if (gg \u003c= 3) wb = 0.65 + 0.35 * sm(0.3, 1, vv);\n        bl(wc[0] * wb, wc[1] * wb, wc[2] * wb, al);\n        let ca = 0, wa = 0;\n        if (envIn > 0 && d \u003c Fin) ca = envIn * (0.3 + 0.7 * exp(-(((Fin - d) / 0.05) ** 2)));\n        if (envOut > 0 && d > Fx) wa = envOut * (0.24 + 0.76 * exp(-(((d - Fx) / 0.05) ** 2)));\n        for (const f of bf) wa += 1.3 * exp(-(((d - f) / 0.06) ** 2)) + (d > f ? 0.25 : 0);\n        const lf = (gg \u003c= 1 ? 1 - 0.5 * sm(0.55, 1, vv) : 1) * ta * (gg === 9 ? 0.8 : 0.9);\n        for (let c = 0; c \u003c 3; c++) C[c] += (cold[c] * ca + warm[c] * wa) * lf;\n      }\n      const rb = rib[p];\n      if (rb > 0) bl(220, 210, 196, rb * (0.42 + 0.1 * m));\n      if (y \u003c 48 && pf.length) {\n        let pa = 0;\n        for (let j = 0; j \u003c pf.length; j += 5) {\n          const dx = (x - pf[j]) / (pf[j + 2] * 1.4), dy = (y - pf[j + 1]) / pf[j + 2], e = dx * dx + dy * dy;\n          if (e \u003c 4) pa += pf[j + 3] * exp(-e * 1.4) * cl(0.4 + 1.4 * (vn(x * 0.2 + pf[j + 4], y * 0.2 + t * 0.9) - 0.5) + 0.5 * exp(-e * 3), 0, 1.4);\n        }\n        if (pa > 0) bl(puffC[0], puffC[1], puffC[2], min(1, pa * puffK));\n      }\n      if (wS > 0) bl(120, 96, 62, 0.14 * wS * hz);\n      O.set(C, p * 3);\n    }\n  // A cough jolts the whole chest up.\n  const jl = round(P.jolt);\n  for (let y = 0; y \u003c H; y++) {\n    const o = min(H - 1, y + jl) * W * 3;\n    for (let x = 0; x \u003c W; x++) display.setPixel(x, y, min(255, O[o + x * 3]) | 0, min(255, O[o + x * 3 + 1]) | 0, min(255, O[o + x * 3 + 2]) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Air","min":0,"max":1,"about":"What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli."},{"name":"Rate","min":0.2,"max":3,"about":"Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3."},{"name":"Depth","min":0,"max":1,"about":"A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far."},{"name":"Altitude","min":0,"max":1,"about":"Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own."}],"start":[0,2,0,0.06],"measures":{"motion":0.3669,"detail":0.0863,"edges":0.4238,"complexity":2.0569,"coverage":0.8446,"colour":0.207,"drift":0.1347},"knobResponse":[0.0972,0.1294,0.1076,0.1068]},{"slug":"brushstrokes","title":"Brushstrokes","family":"noise","round":17,"note":"반 고흐의 「별이 빛나는 밤」을 짧고 두꺼운 붓질로 칠하고 또 칠해요. 흐름을 따라 놓인 군청과 코발트 붓질이 노란 별무리와 초승달을 감아 돌고, 불꽃처럼 솟은 사이프러스 옆 마을에 창이 켜져요.","idea":"A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","layer":{"id":"layer-brushstrokes","type":"code","name":"brushstrokes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow."},{"name":"Flow","min":0.2,"max":3,"about":"How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower."},{"name":"Length","min":4,"max":12,"about":"How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones."},{"name":"Swirl","min":0,"max":1,"about":"How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies."}],"start":[0,2,4,0.06],"measures":{"motion":0.0383,"detail":0.0951,"edges":0.2993,"complexity":2.3542,"coverage":0.998,"colour":0.5763,"drift":0.0278},"knobResponse":[0.4036,0.1538,0.1578,0.1518]},{"slug":"cam-wave","title":"Cam Wave","family":"machine","round":15,"note":"발치의 캠축이 돌면 캠마다 막대를 밀어 올리고, 막대 끝에 걸린 구슬 띠가 물결이 되어 옆으로 흘러가요. K1 을 누르면 캠이 둥근 편심에서 달걀꼴, 달팽이꼴로 바뀌어요.","idea":"A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.","buttons":"K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.","code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-cam-wave","type":"code","name":"cam-wave","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20."},{"name":"Cams","min":6,"max":12,"about":"How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12."},{"name":"Phase","min":-1,"max":1,"about":"How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second."}],"start":[0,2,6,0.06],"measures":{"motion":0.4062,"detail":0.0758,"edges":0.6341,"complexity":0.5068,"coverage":0.4175,"colour":0.2693,"drift":0.1185},"knobResponse":[0.0838,0.0978,0.1488,0.0628]},{"slug":"cat-eye","title":"Cat Eye","family":"cosmetic","round":34,"note":"보랏빛 젤리 폴리시 밑으로 보이지 않는 막대 자석이 미끄러지면, 자성 반짝이가 자기장을 따라 돌아 자기장이 표면과 나란한 자리에 날카로운 빛줄기 하나가 서고 그 양옆은 곧추선 반짝이로 짙어져요. 자석이 지나간 자리의 반짝이는 1.8초에 걸쳐 흩어진 은하 같은 반짝임으로 돌아가요. K3 은 막대를 둘로 늘려 줄 두 개나 별 모양을 세우고, K1 을 누르면 자석이 멀어졌다 돌아와요.","idea":"A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.","buttons":"K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.","code":"// ===== Patternflow pattern =====\n// Title:   Cat Eye\n// Family:  cosmetic\n// Idea:    A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after magnetic cat-eye gel nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1\n//\n// Knob 1: Hue. The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne.\n// Knob 2: Speed. At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Magnet. At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star.\n// Knob 4: Depth. How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide.\n// Buttons: K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.\n\nconst W = 64, H = 128, N = W * H;\n// The magnet is a flat bar 76 LEDs long, magnetised across its width, lying\n// along the panel under the polish: nine dipoles in a row.\nconst BAR = 76, PTS = 9;\nconst { floor, min, max, sqrt, sin, cos, exp, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * Math.log(u)) * cos(2 * PI * v);\n}\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, mag: 0, depth: 0.06, t: 0, warm: false, pull: 0, pullT: -1,\n    A: new Float32Array(N), TH: new Float32Array(N), JIT: new Float32Array(N), TEX: new Float32Array(N), SZ: new Float32Array(N),\n    R0: new Float32Array(N), RW: new Float32Array(N), RP: new Float32Array(N),\n    dip: new Float64Array(6 * 2 * PTS), nd: 0, ref: 1,\n  };\n  for (let p = 0; p \u003c N; p++) {\n    S.JIT[p] = 0.1 * gauss();\n    S.TEX[p] = 0.8 + 0.4 * random();\n    S.SZ[p] = 0.3 + 1.2 * random() ** 2;\n    S.R0[p] = (random() - 0.5) * PI;\n    S.RW[p] = 0.3 + 0.9 * random();\n    S.RP[p] = 2 * PI * random();\n  }\n  params.s = S;\n}\n\n// A second bar has strength |Magnet|. Below 0 it lies beside the first, 0.9\n// of the depth away and poles reversed, for a double line; above 0 it lies\n// across the first, for a star.\n\nfunction magnets(S) {\n  const sp = S.t, d = 10 + 30 * S.depth;\n  const cx = 32 + 15 * sin((2 * PI * sp) / 7), cy = 64 + 16 * sin((2 * PI * sp) / 11 + 1);\n  const ang = 0.3 * sin((2 * PI * sp) / 17);\n  // Along the bar (down the panel) and across it.\n  const lx = -sin(ang), ly = cos(ang), mx = cos(ang), my = sin(ang);\n  const k = S.mag, away = 1 + 3 * S.pull, dip = S.dip;\n  S.nd = 0;\n  const bar = (x, y, ax, ay, ex, ey, st) => {\n    for (let i = 0; i \u003c PTS; i++) {\n      const u = (i / (PTS - 1) - 0.5) * BAR, o = 6 * S.nd++;\n      dip[o] = x + u * ax;\n      dip[o + 1] = y + u * ay;\n      dip[o + 2] = d * away;\n      dip[o + 3] = ex;\n      dip[o + 4] = ey;\n      dip[o + 5] = st / PTS;\n    }\n  };\n  if (k \u003c 0) {\n    const s = 0.9 * d * -k;\n    bar(cx - s * mx, cy - s * my, lx, ly, mx, my, 1);\n    bar(cx + s * mx, cy + s * my, lx, ly, -mx, -my, -k);\n  } else {\n    bar(cx, cy, lx, ly, mx, my, 1);\n    if (k > 0) bar(cx, cy, mx, my, -lx, -ly, k);\n  }\n  // The field at the surface right over the middle of one bar at this depth\n  // is the scale the flakes answer to.\n  let ref = 0;\n  for (let i = 0; i \u003c PTS; i++) {\n    const u = (i / (PTS - 1) - 0.5) * BAR, r2 = u * u + d * d, ir = 1 / sqrt(r2);\n    ref += (ir * ir * ir) / PTS;\n  }\n  S.ref = ref;\n}\n\nfunction step(S, dt) {\n  const sp = S.speed / 2, ds = dt * sp;\n  S.t += ds;\n  if (S.pullT >= 0) {\n    // Away in 0.3 s, held 2.5 s, back in 0.5 s.\n    S.pullT += ds;\n    const u = S.pullT;\n    S.pull = u \u003c 0.3 ? u / 0.3 : u \u003c 2.8 ? 1 : u \u003c 3.3 ? 1 - (u - 2.8) / 0.5 : 0;\n    if (u >= 3.3) S.pullT = -1;\n  }\n  magnets(S);\n  const { A, TH, dip } = S, iref = 1 / S.ref, nd = S.nd;\n  const kOn = 1 - exp(-ds / 0.15), kOff = 1 - exp(-ds / 1.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let bx = 0, by = 0, bz = 0;\n      for (let o = 0; o \u003c 6 * nd; o += 6) {\n        const ex = dip[o + 3], ey = dip[o + 4], st = dip[o + 5];\n        const rx = x + 0.5 - dip[o], ry = y + 0.5 - dip[o + 1], rz = dip[o + 2];\n        const r2 = rx * rx + ry * ry + rz * rz, ir = 1 / sqrt(r2), i3 = st * ir * ir * ir, md = 3 * (ex * rx + ey * ry) * ir * ir;\n        bx += i3 * (md * rx - ex);\n        by += i3 * (md * ry - ey);\n        bz += i3 * md * rz;\n      }\n      const bh = sqrt(bx * bx + by * by), b = sqrt(bh * bh + bz * bz) * iref;\n      const p = y * W + x, at = 1 - exp(-b / 0.25);\n      A[p] += (at - A[p]) * (at > A[p] ? kOn : kOff);\n      // Tilt of the field from the surface, -pi/2..pi/2; a flake's axis is a\n      // line, so tilts half a turn apart are the same.\n      const tt = atan2(bz, bh);\n      let dlt = tt - TH[p];\n      if (dlt > PI / 2) dlt -= PI;\n      else if (dlt \u003c -PI / 2) dlt += PI;\n      TH[p] += dlt * (1 - exp(-ds * (1 + 10 * at) / 0.6));\n      if (TH[p] > PI / 2) TH[p] -= PI;\n      else if (TH[p] \u003c -PI / 2) TH[p] += PI;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.mag = cl(k[2], -1, 1);\n  S.depth = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on flakes that have followed the magnet for two seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 60; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.pullT \u003c 0) S.pullT = 0;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { A, TH, JIT, TEX, SZ, R0, RW, RP } = S, h = S.hue + 0.74, t = S.t;\n  // Orange and yellow jelly at level 40 reads brown on the panel. Round\n  // there (hue 0.0 to 0.22) the base sinks toward black, as a gold cat eye\n  // over a black base coat, and the band's glow turns paler and brighter.\n  const hh = h - floor(h), wy = max(0, 1 - ((hh - 0.11) / 0.12) ** 2);\n  const body = [0, 0, 0], glint = [0, 0, 0], vel = [0, 0, 0];\n  hsv(h, 0.95 - 0.2 * wy, 1 - 0.7 * wy, body);\n  hsv(h + 0.02, 0.25 - 0.1 * wy, 1, glint);\n  hsv(h + 0.01, 0.6 - 0.25 * wy, 1 + 0.4 * wy, vel);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, a = A[p], th = TH[p], s2 = sin(th) * sin(th);\n      // Where the flake points: along the field as far as it is aligned,\n      // otherwise its own slow tumble.\n      const free = 6 * (R0[p] + 0.7 * sin(RW[p] * t + RP[p]));\n      const phi = a * (th + JIT[p]) + (1 - a) * free;\n      const g = exp(-(phi * phi) / (2 * 0.12 * 0.12));\n      const v = a * a * exp(-(th * th) / (2 * 0.5 * 0.5));\n      const lb = 40 * TEX[p] * (1 - 0.5 * a * s2), lg = 255 * g * (a + 0.3 * (1 - a) * SZ[p]), lv = 150 * v;\n      const r = body[0] * lb + glint[0] * lg + vel[0] * lv;\n      const gg = body[1] * lb + glint[1] * lg + vel[1] * lv;\n      const bb = body[2] * lb + glint[2] * lg + vel[2] * lv;\n      display.setPixel(x, y, round(min(255, r)), round(min(255, gg)), round(min(255, bb)));\n    }\n}\n","layer":{"id":"layer-cat-eye","type":"code","name":"cat-eye","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cat Eye\n// Family:  cosmetic\n// Idea:    A deep jelly polish full of magnetic shimmer flakes over an unseen gliding magnet: the flakes turn to follow its field, lie flat where the field runs along the surface and gather the light into a sharp bright band with a velvet falloff that trails the magnet as they rotate, and stand dark where the field dives into the surface.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after magnetic cat-eye gel nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1\n//\n// Knob 1: Hue. The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne.\n// Knob 2: Speed. At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Magnet. At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star.\n// Knob 4: Depth. How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide.\n// Buttons: K1 tap pulls the magnet away to four times its depth in 0.3 seconds and holds it there for 2.5: the band dissolves and the flakes tumble back into a scattered shimmer, then the magnet comes back in 0.5 seconds and the line forms again.\n\nconst W = 64, H = 128, N = W * H;\n// The magnet is a flat bar 76 LEDs long, magnetised across its width, lying\n// along the panel under the polish: nine dipoles in a row.\nconst BAR = 76, PTS = 9;\nconst { floor, min, max, sqrt, sin, cos, exp, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * Math.log(u)) * cos(2 * PI * v);\n}\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, mag: 0, depth: 0.06, t: 0, warm: false, pull: 0, pullT: -1,\n    A: new Float32Array(N), TH: new Float32Array(N), JIT: new Float32Array(N), TEX: new Float32Array(N), SZ: new Float32Array(N),\n    R0: new Float32Array(N), RW: new Float32Array(N), RP: new Float32Array(N),\n    dip: new Float64Array(6 * 2 * PTS), nd: 0, ref: 1,\n  };\n  for (let p = 0; p \u003c N; p++) {\n    S.JIT[p] = 0.1 * gauss();\n    S.TEX[p] = 0.8 + 0.4 * random();\n    S.SZ[p] = 0.3 + 1.2 * random() ** 2;\n    S.R0[p] = (random() - 0.5) * PI;\n    S.RW[p] = 0.3 + 0.9 * random();\n    S.RP[p] = 2 * PI * random();\n  }\n  params.s = S;\n}\n\n// A second bar has strength |Magnet|. Below 0 it lies beside the first, 0.9\n// of the depth away and poles reversed, for a double line; above 0 it lies\n// across the first, for a star.\n\nfunction magnets(S) {\n  const sp = S.t, d = 10 + 30 * S.depth;\n  const cx = 32 + 15 * sin((2 * PI * sp) / 7), cy = 64 + 16 * sin((2 * PI * sp) / 11 + 1);\n  const ang = 0.3 * sin((2 * PI * sp) / 17);\n  // Along the bar (down the panel) and across it.\n  const lx = -sin(ang), ly = cos(ang), mx = cos(ang), my = sin(ang);\n  const k = S.mag, away = 1 + 3 * S.pull, dip = S.dip;\n  S.nd = 0;\n  const bar = (x, y, ax, ay, ex, ey, st) => {\n    for (let i = 0; i \u003c PTS; i++) {\n      const u = (i / (PTS - 1) - 0.5) * BAR, o = 6 * S.nd++;\n      dip[o] = x + u * ax;\n      dip[o + 1] = y + u * ay;\n      dip[o + 2] = d * away;\n      dip[o + 3] = ex;\n      dip[o + 4] = ey;\n      dip[o + 5] = st / PTS;\n    }\n  };\n  if (k \u003c 0) {\n    const s = 0.9 * d * -k;\n    bar(cx - s * mx, cy - s * my, lx, ly, mx, my, 1);\n    bar(cx + s * mx, cy + s * my, lx, ly, -mx, -my, -k);\n  } else {\n    bar(cx, cy, lx, ly, mx, my, 1);\n    if (k > 0) bar(cx, cy, mx, my, -lx, -ly, k);\n  }\n  // The field at the surface right over the middle of one bar at this depth\n  // is the scale the flakes answer to.\n  let ref = 0;\n  for (let i = 0; i \u003c PTS; i++) {\n    const u = (i / (PTS - 1) - 0.5) * BAR, r2 = u * u + d * d, ir = 1 / sqrt(r2);\n    ref += (ir * ir * ir) / PTS;\n  }\n  S.ref = ref;\n}\n\nfunction step(S, dt) {\n  const sp = S.speed / 2, ds = dt * sp;\n  S.t += ds;\n  if (S.pullT >= 0) {\n    // Away in 0.3 s, held 2.5 s, back in 0.5 s.\n    S.pullT += ds;\n    const u = S.pullT;\n    S.pull = u \u003c 0.3 ? u / 0.3 : u \u003c 2.8 ? 1 : u \u003c 3.3 ? 1 - (u - 2.8) / 0.5 : 0;\n    if (u >= 3.3) S.pullT = -1;\n  }\n  magnets(S);\n  const { A, TH, dip } = S, iref = 1 / S.ref, nd = S.nd;\n  const kOn = 1 - exp(-ds / 0.15), kOff = 1 - exp(-ds / 1.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let bx = 0, by = 0, bz = 0;\n      for (let o = 0; o \u003c 6 * nd; o += 6) {\n        const ex = dip[o + 3], ey = dip[o + 4], st = dip[o + 5];\n        const rx = x + 0.5 - dip[o], ry = y + 0.5 - dip[o + 1], rz = dip[o + 2];\n        const r2 = rx * rx + ry * ry + rz * rz, ir = 1 / sqrt(r2), i3 = st * ir * ir * ir, md = 3 * (ex * rx + ey * ry) * ir * ir;\n        bx += i3 * (md * rx - ex);\n        by += i3 * (md * ry - ey);\n        bz += i3 * md * rz;\n      }\n      const bh = sqrt(bx * bx + by * by), b = sqrt(bh * bh + bz * bz) * iref;\n      const p = y * W + x, at = 1 - exp(-b / 0.25);\n      A[p] += (at - A[p]) * (at > A[p] ? kOn : kOff);\n      // Tilt of the field from the surface, -pi/2..pi/2; a flake's axis is a\n      // line, so tilts half a turn apart are the same.\n      const tt = atan2(bz, bh);\n      let dlt = tt - TH[p];\n      if (dlt > PI / 2) dlt -= PI;\n      else if (dlt \u003c -PI / 2) dlt += PI;\n      TH[p] += dlt * (1 - exp(-ds * (1 + 10 * at) / 0.6));\n      if (TH[p] > PI / 2) TH[p] -= PI;\n      else if (TH[p] \u003c -PI / 2) TH[p] += PI;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.mag = cl(k[2], -1, 1);\n  S.depth = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on flakes that have followed the magnet for two seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 60; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.pullT \u003c 0) S.pullT = 0;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { A, TH, JIT, TEX, SZ, R0, RW, RP } = S, h = S.hue + 0.74, t = S.t;\n  // Orange and yellow jelly at level 40 reads brown on the panel. Round\n  // there (hue 0.0 to 0.22) the base sinks toward black, as a gold cat eye\n  // over a black base coat, and the band's glow turns paler and brighter.\n  const hh = h - floor(h), wy = max(0, 1 - ((hh - 0.11) / 0.12) ** 2);\n  const body = [0, 0, 0], glint = [0, 0, 0], vel = [0, 0, 0];\n  hsv(h, 0.95 - 0.2 * wy, 1 - 0.7 * wy, body);\n  hsv(h + 0.02, 0.25 - 0.1 * wy, 1, glint);\n  hsv(h + 0.01, 0.6 - 0.25 * wy, 1 + 0.4 * wy, vel);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, a = A[p], th = TH[p], s2 = sin(th) * sin(th);\n      // Where the flake points: along the field as far as it is aligned,\n      // otherwise its own slow tumble.\n      const free = 6 * (R0[p] + 0.7 * sin(RW[p] * t + RP[p]));\n      const phi = a * (th + JIT[p]) + (1 - a) * free;\n      const g = exp(-(phi * phi) / (2 * 0.12 * 0.12));\n      const v = a * a * exp(-(th * th) / (2 * 0.5 * 0.5));\n      const lb = 40 * TEX[p] * (1 - 0.5 * a * s2), lg = 255 * g * (a + 0.3 * (1 - a) * SZ[p]), lv = 150 * v;\n      const r = body[0] * lb + glint[0] * lg + vel[0] * lv;\n      const gg = body[1] * lb + glint[1] * lg + vel[1] * lv;\n      const bb = body[2] * lb + glint[2] * lg + vel[2] * lv;\n      display.setPixel(x, y, round(min(255, r)), round(min(255, gg)), round(min(255, bb)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Magnet=-1..1, Depth=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The polish, once round the wheel. At 0 a deep violet jelly with a lilac-white band; at 0.2 berry pink, at 0.6 emerald, at 0.8 teal, at 0.9 sapphire. From 0.25 to 0.49, copper through gold to chartreuse, the jelly sinks toward black, a gold cat eye over a black base coat, and the band's glow turns to champagne."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the magnet glides 15 LEDs either side of the middle and back every 7 seconds, 16 LEDs up and down every 11 and tilts 17 degrees either way every 17; flakes in its field line up in 0.15 seconds and tumble back over 1.8 seconds once it has passed. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Magnet","min":-1,"max":1,"about":"At 0 one bar magnet 76 LEDs long under the polish, one straight line. Toward -1 a second bar, poles reversed, comes in beside the first and splits the line in two, about 22 LEDs apart at -1. Toward 1 the second bar lies across the first and the line branches into a star."},{"name":"Depth","min":0,"max":1,"about":"How far under the surface the magnet runs, 10 LEDs at 0 to 40 at 1. At 0.06 the band with its velvet is about 11 LEDs wide round a core of two; at 0.5 about 21, at 1 a soft glow about 30 LEDs wide."}],"start":[0,2,0,0.06],"measures":{"motion":0.3686,"detail":0.0762,"edges":0.2839,"complexity":2.114,"coverage":0.9599,"colour":0.1236,"drift":0.1602},"knobResponse":[0.1875,0.1414,0.1895,0.1794]},{"slug":"cat-map","title":"Cat Map","family":"noise","round":31,"note":"패널을 토러스로 보고 아르놀트의 고양이 사상을 두 번의 밀기로 나눠 움직여요. 과녁 무늬가 사선 줄무늬로 늘어나다 잡음이 되고, 한 바퀴의 절반쯤에 줄이 엇갈린 유령이 지나간 뒤 30초에 처음 그림으로 정확히 돌아와요. K1 을 누르면 돌아오기 네 걸음 앞으로 건너뛰어요.","idea":"The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.","buttons":"K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.","code":"// ===== Patternflow pattern =====\n// Title:   Cat Map\n// Family:  noise\n// Idea:    The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold's cat map (Vladimir Arnold, 1967), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3\n//\n// Knob 1: Hue. Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc.\n// Knob 2: Speed. At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long.\n// Knob 3: Twist. The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps.\n// Knob 4: Picture. The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays.\n// Buttons: K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, abs, sqrt, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mod = (v, m) => ((v % m) + m) % m;\n\n// One full step of the map on a permutation: perm[p] is the source LED whose\n// colour now sits at p. The first shear moves what sits at (x, y) to\n// (x + a y, y), the second moves (x, y) to (x, y + 2b x), so together\n// (x, y) -> (x + a y, 2b x + (1 + 2ab) y), determinant 1, exact on Z64 x Z128.\nfunction shearRows(a, from, to) {\n  for (let y = 0; y \u003c H; y++) {\n    const s = mod(a * y, W), o = y * W;\n    for (let x = 0; x \u003c W; x++) to[o + x] = from[o + ((x - s + W) & 63)];\n  }\n}\nfunction shearCols(b, from, to) {\n  for (let x = 0; x \u003c W; x++) {\n    const s = mod(2 * b * x, H);\n    for (let y = 0; y \u003c H; y++) to[y * W + x] = from[((y - s + H) & 127) * W + x];\n  }\n}\n\n// The four pictures as region numbers: 0 and 1 are the two main colours, 2\n// the light one. Each fills the whole panel.\nconst REG = [];\n{\n  for (let k = 0; k \u003c 4; k++) REG.push(new Uint8Array(N));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = x - 31.5, dy = y - 63.5, r = sqrt(dx * dx + dy * dy);\n      // Rings 7 LEDs wide round a disc, and a band corner to corner where\n      // the two ring colours trade places.\n      let g = r \u003c 9 ? 2 : floor((r - 9) / 7) & 1;\n      if (g \u003c 2 && abs(2 * dx + dy) / sqrt(5) \u003c 6) g = 1 - g;\n      REG[0][p] = g;\n      // Nested diamonds, 8 LEDs a band down the long axis, a light core.\n      const dd = abs(dx) + abs(dy) / 2;\n      REG[1][p] = dd \u003c 7 ? 2 : floor((dd - 7) / 6) & 1;\n      // Four quarters round a disc that swaps them, with a light rim.\n      const q = (dx \u003c 0) !== (dy \u003c 0) ? 1 : 0;\n      REG[2][p] = r \u003c 21 ? 1 - q : r \u003c 25 ? 2 : q;\n      // Twelve rays round a light disc and a light ring.\n      const ray = floor(((atan2(dy, dx) + PI) / (2 * PI)) * 12) & 1;\n      REG[3][p] = r \u003c 8 || (r > 30 && r \u003c 34) ? 2 : ray;\n    }\n}\n\n// How much of the picture survives after n steps of each twist, from the\n// rings picture: 0 for the whole picture, about 0.5 for static. It slows the\n// steps and holds the frames where something can be seen.\nfunction survey(t) {\n  let perm = new Int32Array(N), mid = new Int32Array(N), nxt = new Int32Array(N);\n  for (let i = 0; i \u003c N; i++) perm[i] = i;\n  const g = REG[0], out = [0];\n  for (let n = 1; n \u003c= 200; n++) {\n    shearRows(t, perm, mid);\n    shearCols(t, mid, nxt);\n    [perm, nxt] = [nxt, perm];\n    let d = 0, id = true;\n    for (let p = 0; p \u003c N; p++) {\n      const v = g[perm[p]] & 1;\n      if ((p & 63) \u003c 63) d += v !== (g[perm[p + 1]] & 1) ? 1 : 0;\n      if (p \u003c N - W) d += v !== (g[perm[p + W]] & 1) ? 1 : 0;\n      if (perm[p] !== p) id = false;\n    }\n    if (id) break;\n    out.push(d / (2 * N));\n  }\n  // out has one entry per state 0..P-1.\n  return out.map((v) => 1 - cl((v - 0.1) / 0.3, 0, 1));\n}\nconst SURVEY = [null, null, null, null, null];\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N);\n  params.s = {\n    perm: I(), mid: I(), nxt: I(), twist: 0, P: 64, st: null, n: 0, mode: 0, t: 0, first: true,\n    hue: -1, pic: -1, pal: new Float32Array(9), src: new Float32Array(N * 3), sh1: new Int32Array(H), sh2: new Int32Array(W), sp: 2,\n  };\n}\n\nfunction reset(S) {\n  for (let i = 0; i \u003c N; i++) S.perm[i] = i;\n  S.n = 0;\n  S.mode = 0;\n  S.t = 0;\n}\n\n// Seconds for the step out of state n, and for the hold at state n.\nfunction stepTime(S, n) {\n  const st = S.st, P = S.P, base = 1.2 / S.sp;\n  const s = max(st[n], st[(n + 1) % P]);\n  return base * (0.45 + 1.6 * s) * (1 + 1.5 * Math.exp(-(P - 1 - n) / 1.5));\n}\nfunction holdTime(S, n) {\n  const base = 1.2 / S.sp, s = S.st[n];\n  if (n === 0) return base * (S.first ? 2.3 : 4);\n  // The stretched stripes after one step and the ghost halfway hold for\n  // about half a second at Speed 2; frames of static do not hold at all.\n  return base * 3 * s * sqrt(s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.sp = cl(k[1], 0.2, 3);\n  S.hueK = k[0] || 0;\n  S.picK = cl(round(k[3]), 0, 3);\n  const tw = cl(round(k[2]), 1, 4);\n  if (tw !== S.twist) {\n    // A new twist is a new map: the picture comes back whole and starts over.\n    S.twist = tw;\n    S.st = SURVEY[tw] || (SURVEY[tw] = survey(tw));\n    S.P = S.st.length;\n    for (let y = 0; y \u003c H; y++) S.sh1[y] = tw * (y - 64);\n    for (let x = 0; x \u003c W; x++) S.sh2[x] = mod(2 * tw * x + 64, H) - 64;\n    reset(S);\n  }\n  const b = input.btnPressed || [];\n  if (b[0]) {\n    // Four steps short of the return, by running the map from the picture.\n    reset(S);\n    for (let n = 0; n \u003c S.P - 4; n++) {\n      shearRows(tw, S.perm, S.mid);\n      shearCols(tw, S.mid, S.perm);\n    }\n    S.n = S.P - 4;\n    S.first = false;\n  }\n  S.t += d;\n  if (S.mode === 0) {\n    if (S.t >= holdTime(S, S.n)) {\n      S.t = 0;\n      S.mode = 1;\n      shearRows(tw, S.perm, S.mid);\n    }\n  } else if (S.t >= stepTime(S, S.n)) {\n    shearCols(tw, S.mid, S.nxt);\n    [S.perm, S.nxt] = [S.nxt, S.perm];\n    S.n = (S.n + 1) % S.P;\n    if (S.n === 0) {\n      reset(S);\n      S.first = false;\n    }\n    S.t = 0;\n    S.mode = 0;\n  }\n}\n\n// Three colours: two strong ones half a turn apart and a light cream, the\n// strong pair kept close in brightness so the static stays soft.\nfunction paint(S) {\n  const h = S.hueK + 0.5, pal = S.pal;\n  hsv(h, 0.66, 1, pal, 0);\n  // A dark orange or yellow reads brown or olive, so the second colour\n  // lifts its light where its hue passes through them.\n  let h2 = h + 0.4;\n  h2 -= floor(h2);\n  hsv(h2, 0.6, 0.72 + 0.26 * max(0, 1 - abs(h2 - 0.13) / 0.11), pal, 3);\n  hsv(h + 0.62, 0.2, 1, pal, 6);\n  const g = REG[S.picK], src = S.src;\n  for (let p = 0; p \u003c N; p++) {\n    const c = g[p] * 3;\n    src[p * 3] = pal[c];\n    src[p * 3 + 1] = pal[c + 1];\n    src[p * 3 + 2] = pal[c + 2];\n  }\n  S.hue = S.hueK;\n  S.pic = S.picK;\n}\n\nconst ease = (u) => u * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.st) return;\n  if (S.hue !== S.hueK || S.pic !== S.picK) paint(S);\n  const src = S.src;\n  if (S.mode === 0) {\n    const perm = S.perm;\n    for (let y = 0, p = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, p++) {\n        const o = perm[p] * 3;\n        display.setPixel(x, y, src[o], src[o + 1], src[o + 2]);\n      }\n    return;\n  }\n  const u = S.t / stepTime(S, S.n);\n  if (u \u003c 0.5) {\n    // The rows slide: row y by a (y - 64), pivoting on the middle row, so the\n    // picture leans; each LED reads between the two it lies between.\n    const s = ease(u * 2), perm = S.perm;\n    for (let y = 0; y \u003c H; y++) {\n      const sh = s * S.sh1[y], o = y * W;\n      for (let x = 0; x \u003c W; x++) {\n        const pos = x - sh, i0 = floor(pos), f = pos - i0;\n        const A = perm[o + (i0 & 63)] * 3, B = perm[o + ((i0 + 1) & 63)] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  } else {\n    // The columns slide: column x by 2b x, wrapped to the nearer way round.\n    const s = ease(u * 2 - 1), mid = S.mid;\n    for (let x = 0; x \u003c W; x++) {\n      const sh = s * S.sh2[x];\n      for (let y = 0; y \u003c H; y++) {\n        const pos = y - sh, i0 = floor(pos), f = pos - i0;\n        const A = mid[(i0 & 127) * W + x] * 3, B = mid[((i0 + 1) & 127) * W + x] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-cat-map","type":"code","name":"cat-map","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cat Map\n// Family:  noise\n// Idea:    The panel is a torus and a bold target of rings is carried by Arnold's cat map, built from two shears that slide the rows and then the columns, so the picture stretches into diagonal stripes, dissolves into what looks like pure static, passes a ghost of itself halfway, and after the map's period comes back exactly.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Arnold's cat map (Vladimir Arnold, 1967), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3\n//\n// Knob 1: Hue. Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc.\n// Knob 2: Speed. At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long.\n// Knob 3: Twist. The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps.\n// Knob 4: Picture. The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays.\n// Buttons: K1 tap jumps to four steps before the return, so the picture can be watched re-forming out of the static.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, abs, sqrt, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mod = (v, m) => ((v % m) + m) % m;\n\n// One full step of the map on a permutation: perm[p] is the source LED whose\n// colour now sits at p. The first shear moves what sits at (x, y) to\n// (x + a y, y), the second moves (x, y) to (x, y + 2b x), so together\n// (x, y) -> (x + a y, 2b x + (1 + 2ab) y), determinant 1, exact on Z64 x Z128.\nfunction shearRows(a, from, to) {\n  for (let y = 0; y \u003c H; y++) {\n    const s = mod(a * y, W), o = y * W;\n    for (let x = 0; x \u003c W; x++) to[o + x] = from[o + ((x - s + W) & 63)];\n  }\n}\nfunction shearCols(b, from, to) {\n  for (let x = 0; x \u003c W; x++) {\n    const s = mod(2 * b * x, H);\n    for (let y = 0; y \u003c H; y++) to[y * W + x] = from[((y - s + H) & 127) * W + x];\n  }\n}\n\n// The four pictures as region numbers: 0 and 1 are the two main colours, 2\n// the light one. Each fills the whole panel.\nconst REG = [];\n{\n  for (let k = 0; k \u003c 4; k++) REG.push(new Uint8Array(N));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = x - 31.5, dy = y - 63.5, r = sqrt(dx * dx + dy * dy);\n      // Rings 7 LEDs wide round a disc, and a band corner to corner where\n      // the two ring colours trade places.\n      let g = r \u003c 9 ? 2 : floor((r - 9) / 7) & 1;\n      if (g \u003c 2 && abs(2 * dx + dy) / sqrt(5) \u003c 6) g = 1 - g;\n      REG[0][p] = g;\n      // Nested diamonds, 8 LEDs a band down the long axis, a light core.\n      const dd = abs(dx) + abs(dy) / 2;\n      REG[1][p] = dd \u003c 7 ? 2 : floor((dd - 7) / 6) & 1;\n      // Four quarters round a disc that swaps them, with a light rim.\n      const q = (dx \u003c 0) !== (dy \u003c 0) ? 1 : 0;\n      REG[2][p] = r \u003c 21 ? 1 - q : r \u003c 25 ? 2 : q;\n      // Twelve rays round a light disc and a light ring.\n      const ray = floor(((atan2(dy, dx) + PI) / (2 * PI)) * 12) & 1;\n      REG[3][p] = r \u003c 8 || (r > 30 && r \u003c 34) ? 2 : ray;\n    }\n}\n\n// How much of the picture survives after n steps of each twist, from the\n// rings picture: 0 for the whole picture, about 0.5 for static. It slows the\n// steps and holds the frames where something can be seen.\nfunction survey(t) {\n  let perm = new Int32Array(N), mid = new Int32Array(N), nxt = new Int32Array(N);\n  for (let i = 0; i \u003c N; i++) perm[i] = i;\n  const g = REG[0], out = [0];\n  for (let n = 1; n \u003c= 200; n++) {\n    shearRows(t, perm, mid);\n    shearCols(t, mid, nxt);\n    [perm, nxt] = [nxt, perm];\n    let d = 0, id = true;\n    for (let p = 0; p \u003c N; p++) {\n      const v = g[perm[p]] & 1;\n      if ((p & 63) \u003c 63) d += v !== (g[perm[p + 1]] & 1) ? 1 : 0;\n      if (p \u003c N - W) d += v !== (g[perm[p + W]] & 1) ? 1 : 0;\n      if (perm[p] !== p) id = false;\n    }\n    if (id) break;\n    out.push(d / (2 * N));\n  }\n  // out has one entry per state 0..P-1.\n  return out.map((v) => 1 - cl((v - 0.1) / 0.3, 0, 1));\n}\nconst SURVEY = [null, null, null, null, null];\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N);\n  params.s = {\n    perm: I(), mid: I(), nxt: I(), twist: 0, P: 64, st: null, n: 0, mode: 0, t: 0, first: true,\n    hue: -1, pic: -1, pal: new Float32Array(9), src: new Float32Array(N * 3), sh1: new Int32Array(H), sh2: new Int32Array(W), sp: 2,\n  };\n}\n\nfunction reset(S) {\n  for (let i = 0; i \u003c N; i++) S.perm[i] = i;\n  S.n = 0;\n  S.mode = 0;\n  S.t = 0;\n}\n\n// Seconds for the step out of state n, and for the hold at state n.\nfunction stepTime(S, n) {\n  const st = S.st, P = S.P, base = 1.2 / S.sp;\n  const s = max(st[n], st[(n + 1) % P]);\n  return base * (0.45 + 1.6 * s) * (1 + 1.5 * Math.exp(-(P - 1 - n) / 1.5));\n}\nfunction holdTime(S, n) {\n  const base = 1.2 / S.sp, s = S.st[n];\n  if (n === 0) return base * (S.first ? 2.3 : 4);\n  // The stretched stripes after one step and the ghost halfway hold for\n  // about half a second at Speed 2; frames of static do not hold at all.\n  return base * 3 * s * sqrt(s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.sp = cl(k[1], 0.2, 3);\n  S.hueK = k[0] || 0;\n  S.picK = cl(round(k[3]), 0, 3);\n  const tw = cl(round(k[2]), 1, 4);\n  if (tw !== S.twist) {\n    // A new twist is a new map: the picture comes back whole and starts over.\n    S.twist = tw;\n    S.st = SURVEY[tw] || (SURVEY[tw] = survey(tw));\n    S.P = S.st.length;\n    for (let y = 0; y \u003c H; y++) S.sh1[y] = tw * (y - 64);\n    for (let x = 0; x \u003c W; x++) S.sh2[x] = mod(2 * tw * x + 64, H) - 64;\n    reset(S);\n  }\n  const b = input.btnPressed || [];\n  if (b[0]) {\n    // Four steps short of the return, by running the map from the picture.\n    reset(S);\n    for (let n = 0; n \u003c S.P - 4; n++) {\n      shearRows(tw, S.perm, S.mid);\n      shearCols(tw, S.mid, S.perm);\n    }\n    S.n = S.P - 4;\n    S.first = false;\n  }\n  S.t += d;\n  if (S.mode === 0) {\n    if (S.t >= holdTime(S, S.n)) {\n      S.t = 0;\n      S.mode = 1;\n      shearRows(tw, S.perm, S.mid);\n    }\n  } else if (S.t >= stepTime(S, S.n)) {\n    shearCols(tw, S.mid, S.nxt);\n    [S.perm, S.nxt] = [S.nxt, S.perm];\n    S.n = (S.n + 1) % S.P;\n    if (S.n === 0) {\n      reset(S);\n      S.first = false;\n    }\n    S.t = 0;\n    S.mode = 0;\n  }\n}\n\n// Three colours: two strong ones half a turn apart and a light cream, the\n// strong pair kept close in brightness so the static stays soft.\nfunction paint(S) {\n  const h = S.hueK + 0.5, pal = S.pal;\n  hsv(h, 0.66, 1, pal, 0);\n  // A dark orange or yellow reads brown or olive, so the second colour\n  // lifts its light where its hue passes through them.\n  let h2 = h + 0.4;\n  h2 -= floor(h2);\n  hsv(h2, 0.6, 0.72 + 0.26 * max(0, 1 - abs(h2 - 0.13) / 0.11), pal, 3);\n  hsv(h + 0.62, 0.2, 1, pal, 6);\n  const g = REG[S.picK], src = S.src;\n  for (let p = 0; p \u003c N; p++) {\n    const c = g[p] * 3;\n    src[p * 3] = pal[c];\n    src[p * 3 + 1] = pal[c + 1];\n    src[p * 3 + 2] = pal[c + 2];\n  }\n  S.hue = S.hueK;\n  S.pic = S.picK;\n}\n\nconst ease = (u) => u * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.st) return;\n  if (S.hue !== S.hueK || S.pic !== S.picK) paint(S);\n  const src = S.src;\n  if (S.mode === 0) {\n    const perm = S.perm;\n    for (let y = 0, p = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, p++) {\n        const o = perm[p] * 3;\n        display.setPixel(x, y, src[o], src[o + 1], src[o + 2]);\n      }\n    return;\n  }\n  const u = S.t / stepTime(S, S.n);\n  if (u \u003c 0.5) {\n    // The rows slide: row y by a (y - 64), pivoting on the middle row, so the\n    // picture leans; each LED reads between the two it lies between.\n    const s = ease(u * 2), perm = S.perm;\n    for (let y = 0; y \u003c H; y++) {\n      const sh = s * S.sh1[y], o = y * W;\n      for (let x = 0; x \u003c W; x++) {\n        const pos = x - sh, i0 = floor(pos), f = pos - i0;\n        const A = perm[o + (i0 & 63)] * 3, B = perm[o + ((i0 + 1) & 63)] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  } else {\n    // The columns slide: column x by 2b x, wrapped to the nearer way round.\n    const s = ease(u * 2 - 1), mid = S.mid;\n    for (let x = 0; x \u003c W; x++) {\n      const sh = s * S.sh2[x];\n      for (let y = 0; y \u003c H; y++) {\n        const pos = y - sh, i0 = floor(pos), f = pos - i0;\n        const A = mid[(i0 & 127) * W + x] * 3, B = mid[((i0 + 1) & 127) * W + x] * 3;\n        display.setPixel(x, y, src[A] + (src[B] - src[A]) * f, src[A + 1] + (src[B + 1] - src[A + 1]) * f, src[A + 2] + (src[B + 2] - src[A + 2]) * f);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Twist=1..4, Picture=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the picture's colours round the wheel; at 0 the rings are cyan and rose round a cream disc."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the picture holds whole for a second and a half, a step through static takes about a quarter of a second, the last step into the return about three, and the whole period at Twist 1 takes 30 s; at 0.2 everything takes ten times as long."},{"name":"Twist","min":1,"max":4,"about":"The shears' size a = b = 1, 2, 3 or 4, where row y slides by a times y and column x by 2b times x; the period is 64, 32, 64 and 16 steps."},{"name":"Picture","min":0,"max":3,"about":"The image the map carries: rings crossed by a diagonal band, nested diamonds, four quarters round a disc, or twelve rays."}],"start":[0,2,1,0.06],"measures":{"motion":2.7145,"detail":0.107,"edges":0.6749,"complexity":0.5255,"coverage":1,"colour":0.5686,"drift":0.058},"knobResponse":[0.4614,0.2648,0.264,0.2979]},{"slug":"catastrophe-machine","title":"Catastrophe Machine","family":"physics","round":36,"note":"원판 테두리의 한 점에 고무줄 둘을 묶어 하나는 위의 고정점에, 하나는 아래를 좌우로 오가는 점 B 에 걸었어요. B 가 뾰족점 넷인 마름모, 곧 원판이 설 자리가 둘인 곳을 빠져나가는 순간 원판이 120도쯤 반대로 튀어서, B 의 자취가 가는 길과 오는 길에서 다른 색으로 남아요. K3 은 고무줄의 자연 길이를 줄여 마름모를 작게 하다가 1 에서 없애고, K1 을 누르면 B 가 축 건너편으로 건너뛰어요.","idea":"Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.","buttons":"K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.","code":"// ===== Patternflow pattern =====\n// Title:   Catastrophe Machine\n// Family:  physics\n// Idea:    Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Zeeman's catastrophe machine (Christopher Zeeman, 1972), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1\n//\n// Knob 1: Hue. Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown.\n// Knob 2: Speed. At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Tension. The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B.\n// Knob 4: Depth. The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all.\n// Buttons: K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.\n\nconst W = 64, H = 128, N = W * H;\n// The machine in disc radii: pivot O at the origin, anchor A at (0, AD),\n// bands of rest length L. On the panel one radius is SC LEDs, O sits at row\n// OY, and the anchor 5 rows from the top.\nconst AD = 2.5, L0 = 1, SC = 18.6, OX = 32, OY = 5 + SC * AD, NF = 360, NT = 180, TRAIL = 180, SNAPS = 24;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst toX = (x) => OX + SC * x, toY = (y) => OY - SC * y;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The energy V(t) = (|P-A| - L)+^2 / 2 + (|P-B| - L)+^2 / 2, P = (cos t, sin t),\n// a band pulling only while it is stretched, and its derivative in t: each\n// band adds its tension times the component of its direction along the rim.\nfunction energy(t, L, bx, by) {\n  const px = cos(t), py = sin(t);\n  const ea = max(0, sqrt(px * px + (py - AD) * (py - AD)) - L), eb = max(0, sqrt((px - bx) ** 2 + (py - by) ** 2) - L);\n  return 0.5 * (ea * ea + eb * eb);\n}\nfunction torque(t, L, bx, by) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), ux = px - bx, uy = py - by, db = sqrt(ux * ux + uy * uy);\n  return (max(0, da - L) * (ax * tx + ay * ty)) / da + (max(0, db - L) * (ux * tx + uy * ty)) / (db || 1e-9);\n}\n\n// The bifurcation set. At a fold the disc angle t is an equilibrium (V' = 0)\n// that is about to stop being a minimum (V'' = 0). For each t the band to B\n// leaves P along some direction u; V' = 0 fixes how far B must be, and the\n// direction is found where V'' changes sign. One point per t, so the 360\n// points run round the diamond in order, through its four cusps.\nfunction foldAt(t, L, be) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), uax = ax / da, uay = ay / da;\n  const ca = uax * tx + uay * ty, sa = uax * px + uay * py, ea = max(0, da - L);\n  const M = ea * ca, K = (da > L ? ca * ca : 0) + ea * ((1 - ca * ca) / da - sa);\n  const ux = cos(be), uy = sin(be), c = ux * tx + uy * ty, s = ux * px + uy * py;\n  if (abs(c) \u003c 1e-9) return null;\n  const e = -M / c;\n  if (e \u003c= 0) return null;\n  const d = L + e;\n  return [K + c * c + e * ((1 - c * c) / d - s), px - d * ux, py - d * uy, d];\n}\nfunction fold(S, L) {\n  S.L = L;\n  S.nf = 0;\n  if (L \u003c 0.02) return;\n  let guess = -1;\n  for (let i = 0; i \u003c NF; i++) {\n    const t = (2 * PI * i) / NF;\n    let found = null;\n    // Look near the last direction first, then all the way round.\n    const tries = guess \u003c 0 ? [[0, 2 * PI, 1440]] : [[guess - 0.25, guess + 0.25, 50], [0, 2 * PI, 1440]];\n    for (const [b0, b1, k] of tries) {\n      let prev = foldAt(t, L, b0), pb = b0;\n      for (let j = 1; j \u003c= k && !found; j++) {\n        const be = b0 + ((b1 - b0) * j) / k, cur = foldAt(t, L, be);\n        if (prev && cur && prev[0] * cur[0] \u003c= 0 && abs(cur[3] - prev[3]) \u003c 0.3 && cur[3] \u003c 8) {\n          let lo = pb, hi = be, flo = prev[0];\n          for (let q = 0; q \u003c 40; q++) {\n            const mid = (lo + hi) / 2, m = foldAt(t, L, mid);\n            if (!m) break;\n            if (m[0] * flo > 0) (lo = mid), (flo = m[0]);\n            else hi = mid;\n          }\n          found = foldAt(t, L, (lo + hi) / 2);\n          guess = (lo + hi) / 2;\n        }\n        prev = cur;\n        pb = be;\n      }\n      if (found) break;\n    }\n    if (found) {\n      S.FX[S.nf] = found[1];\n      S.FY[S.nf] = found[2];\n      S.nf++;\n    }\n  }\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c S.nf; i++) {\n    x0 = min(x0, S.FX[i]);\n    x1 = max(x1, S.FX[i]);\n    y0 = min(y0, S.FY[i]);\n    y1 = max(y1, S.FY[i]);\n  }\n  S.fx0 = x0;\n  S.fx1 = x1;\n  S.fy0 = y0;\n  S.fy1 = y1;\n  // The side cusps are the leftmost and rightmost points.\n  let iL = 0;\n  for (let i = 0; i \u003c S.nf; i++) if (S.FX[i] \u003c S.FX[iL]) iL = i;\n  S.ySide = S.nf ? S.FY[iL] : -2.5;\n}\n\n// Local minima of V over the rim, from 180 samples, each polished by a few\n// steps of descent. Returns how many; their angles land in S.mins.\nfunction minima(S, bx, by) {\n  const L = S.L, E = S.E;\n  for (let i = 0; i \u003c NT; i++) E[i] = energy((2 * PI * i) / NT, L, bx, by);\n  let n = 0;\n  for (let i = 0; i \u003c NT && n \u003c 4; i++) {\n    const a = E[(i + NT - 1) % NT], b = E[(i + 1) % NT];\n    if (E[i] \u003c a && E[i] \u003c= b) {\n      let t = (2 * PI * i) / NT;\n      for (let k = 0; k \u003c 30; k++) t -= 0.5 * torque(t, L, bx, by);\n      S.mins[n++] = t;\n    }\n  }\n  return n;\n}\n\n// Follow the local minimum the disc sits in: the nearest place within half a\n// radian where V' turns from negative to positive, refined by bisection.\n// When there is none, that minimum has gone, which is the snap.\nfunction track(S, t) {\n  const L = S.L, bx = S.bx, by = S.by;\n  let best = NaN, bd = 1e9, prev = torque(t - 0.5, L, bx, by);\n  for (let i = 1; i \u003c= 96; i++) {\n    const a = t - 0.5 + i / 96, cur = torque(a, L, bx, by);\n    if (prev \u003c 0 && cur >= 0) {\n      let lo = a - 1 / 96, hi = a;\n      for (let q = 0; q \u003c 30; q++) {\n        const m = (lo + hi) / 2;\n        if (torque(m, L, bx, by) \u003c 0) lo = m;\n        else hi = m;\n      }\n      const r = (lo + hi) / 2;\n      if (abs(r - t) \u003c bd) (bd = abs(r - t)), (best = r);\n    }\n    prev = cur;\n  }\n  return best;\n}\n\nfunction setup(params) {\n  params.s = {\n    t: 0, w: 0, L: -1, nf: 0, FX: new Float64Array(NF), FY: new Float64Array(NF), fx0: 0, fx1: 0, fy0: 0, fy1: 0, ySide: -2.4,\n    E: new Float64Array(NT), mins: new Float64Array(4), nm: 1, ghost: 0, ghostA: 0,\n    ph: -PI / 2, wph: 0, bx: -1.35, by: -2.4, depth: 0.06, hue: 0, speed: 2,\n    TX: new Float32Array(TRAIL), TY: new Float32Array(TRAIL), TB: new Float32Array(TRAIL), tn: 0, th: 0, tacc: 0,\n    SX: new Float32Array(SNAPS), SY: new Float32Array(SNAPS), SA: new Float32Array(SNAPS).fill(99), sh: 0,\n    tm: 0, flash: 0, fbx: 0, fby: 0, warm: false,\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N), cov: new Float32Array(N),\n    xs: new Float32Array(4 * H * 16), xn: new Int32Array(4 * H), col: new Float32Array(24),\n  };\n}\n\n// B's path: across the panel and back, 1.35 radii either side of the axis,\n// at the height Depth picks between the side cusps and the bottom cusp,\n// wandering up and down a quarter of that height. From Depth 0.8 on it\n// never enters the diamond.\nfunction place(S) {\n  const ys = S.nf ? S.ySide : -2.5, yb = S.nf ? S.fy0 : -2.6;\n  S.bx = 1.35 * sin(S.ph);\n  S.by = ys + (0.3 + 1.2 * S.depth + 0.25 * sin(S.wph)) * (yb - ys);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.depth = cl(k[3], 0, 1);\n  const L = L0 * (1 - cl(k[2], 0, 1));\n  if (abs(L - S.L) > 0.002) fold(S, L);\n  const beat = (d * S.speed) / 2;\n  const jump = !!(input.btnPressed && input.btnPressed[0]);\n  if (jump) S.ph = -S.ph;\n  // A crossing of the panel every 4 beats; the wander is slower.\n  S.ph += (beat * PI) / 4;\n  S.wph += beat * 0.53;\n  place(S);\n  S.nm = minima(S, S.bx, S.by);\n  if (!S.warm) {\n    // Start in the deepest minimum.\n    let best = 0;\n    for (let i = 1; i \u003c S.nm; i++) if (energy(S.mins[i], S.L, S.bx, S.by) \u003c energy(S.mins[best], S.L, S.bx, S.by)) best = i;\n    S.t = S.tm = S.mins[best];\n    S.warm = true;\n  }\n  // The snap: the minimum the disc was in is gone. B is then at most one\n  // frame's travel past the edge of the diamond, and the mark goes there,\n  // unless K1 threw B across.\n  const tm = track(S, S.tm);\n  if (tm === tm) S.tm = tm;\n  else {\n    let far = 0, fd = -1;\n    for (let i = 0; i \u003c S.nm; i++) {\n      const dd = abs(atan2(sin(S.mins[i] - S.tm), cos(S.mins[i] - S.tm)));\n      if (dd > fd) (fd = dd), (far = i);\n    }\n    S.tm = S.mins[far];\n    S.flash = 1;\n    S.fbx = S.bx;\n    S.fby = S.by;\n    if (!jump) {\n      S.SX[S.sh] = S.bx;\n      S.SY[S.sh] = S.by;\n      S.SA[S.sh] = 0;\n      S.sh = (S.sh + 1) % SNAPS;\n    }\n  }\n  // Overdamped: the disc turns at 30 times the torque per beat, in eight\n  // small steps a frame.\n  const h = beat / 8, t0 = S.t;\n  for (let i = 0; i \u003c 8; i++) S.t -= 30 * h * torque(S.t, S.L, S.bx, S.by);\n  S.w = beat > 0 ? abs(S.t - t0) / beat : S.w;\n  S.flash = max(0, S.flash - beat / 0.5);\n  for (let i = 0; i \u003c SNAPS; i++) S.SA[i] += beat;\n  // The other minimum, when there is one, shows as a ghost on the rim.\n  let gi = -1, gd = 0;\n  for (let i = 0; i \u003c S.nm; i++) {\n    const dd = abs(atan2(sin(S.mins[i] - S.t), cos(S.mins[i] - S.t)));\n    if (dd > 0.3 && dd > gd) (gd = dd), (gi = i);\n  }\n  if (gi >= 0) S.ghost = S.mins[gi];\n  S.ghostA += ((gi >= 0 ? 1 : 0) - S.ghostA) * min(1, beat * 8);\n  // The trail: 15 samples a beat, 12 beats long, each with the side of the\n  // disc P was on.\n  S.tacc += beat * 15;\n  while (S.tacc >= 1) {\n    S.tacc -= 1;\n    S.TX[S.th] = S.bx;\n    S.TY[S.th] = S.by;\n    S.TB[S.th] = cos(S.t);\n    S.th = (S.th + 1) % TRAIL;\n    S.tn = min(TRAIL, S.tn + 1);\n  }\n}\n\n// ---- Drawing ----\n\nfunction plot(S, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  S.R[p] = max(S.R[p], r);\n  S.G[p] = max(S.G[p], g);\n  S.B[p] = max(S.B[p], b);\n}\n\n// A line in panel coordinates, about 1.4 LEDs wide, kept at the brighter.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, v = cl((wide - sqrt(qx * qx + qy * qy)) / 0.55, 0, 1);\n      if (v > 0) plot(S, x, y, cr * v, cg * v, cb * v);\n    }\n}\n\nfunction disc(S, cx, cy, r, cr, cg, cb, add) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c= min(H - 1, floor(cy + r + 1)); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c= min(W - 1, floor(cx + r + 1)); x++) {\n      const v = cl(r + 0.5 - sqrt((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2), 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      if (add) (S.R[p] += cr * v), (S.G[p] += cg * v), (S.B[p] += cb * v);\n      else (S.R[p] = S.R[p] * (1 - v) + cr * v), (S.G[p] = S.G[p] * (1 - v) + cg * v), (S.B[p] = S.B[p] * (1 - v) + cb * v);\n    }\n}\n\n// Coverage of the inside of the diamond: four scanlines a row.\nfunction fill(S) {\n  const { xs, xn, cov, FX, FY } = S, n = S.nf, SUB = 4, CAP = 16;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = (i + 1) % n;\n    let x0 = toX(FX[i]), y0 = toY(FY[i]), x1 = toX(FX[j]), y1 = toY(FY[j]);\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const c = xn[s];\n      if (c \u003c CAP) (xs[s * CAP + c] = x0 + (((s + 0.5) / SUB - y0) * (x1 - x0)) / (y1 - y0)), (xn[s] = c + 1);\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h = S.hue + 0.78, fl = S.flash;\n  // Round yellow the diamond's shading would go olive, so there it is paler\n  // and brighter.\n  const hh = h - floor(h), warm = sm(1 - abs(hh - 0.16) / 0.12);\n  hsv(h, 0.75 - 0.5 * warm, 1, col, 0); // accent: the diamond and the anchor\n  hsv(h + 0.35, 0.85, 1, col, 3); // the trail while P is on the left\n  hsv(h + 0.72, 0.8, 1, col, 6); // the trail while P is on the right\n  const hd = h + 0.8 - floor(h + 0.8), warmD = sm(1 - abs(hd - 0.12) / 0.13);\n  hsv(h + 0.8, 0.6 - 0.3 * warmD, 1 + 0.6 * warmD, col, 9); // the disc, never brown\n  const shade = 66 + 74 * warm;\n  // The bistable region, softly lit, and its cusped edge.\n  if (S.nf > 2) {\n    fill(S);\n    for (let p = 0; p \u003c N; p++) {\n      const c = min(1, cov[p]) * shade;\n      if (c > 0) (R[p] += col[0] * c), (G[p] += col[1] * c), (B[p] += col[2] * c);\n    }\n  }\n  // The trail, oldest first, in the colour of P's side.\n  for (let k = S.tn - 1; k >= 2; k--) {\n    const i = (S.th - k + TRAIL) % TRAIL, j = (i + 1) % TRAIL, age = k / TRAIL;\n    const u = (1 + cl(S.TB[i] * 2, -1, 1)) / 2, v = 230 * (1 - age) * (1 - age) + 25;\n    line(S, toX(S.TX[i]), toY(S.TY[i]), toX(S.TX[j]), toY(S.TY[j]), v * (col[3] * (1 - u) + col[6] * u), v * (col[4] * (1 - u) + col[7] * u), v * (col[5] * (1 - u) + col[8] * u), 0.75);\n  }\n  if (S.nf > 2) {\n    const e = 200 + 55 * fl;\n    for (let i = 0; i \u003c S.nf; i++) {\n      const j = (i + 1) % S.nf;\n      line(S, toX(S.FX[i]), toY(S.FY[i]), toX(S.FX[j]), toY(S.FY[j]), col[0] * e, col[1] * e, col[2] * e, 0.7);\n    }\n  }\n  // Where the snaps happened: white marks that fade over 25 beats.\n  for (let i = 0; i \u003c SNAPS; i++) {\n    if (S.SA[i] > 25) continue;\n    const v = 255 * (1 - S.SA[i] / 25);\n    disc(S, toX(S.SX[i]), toY(S.SY[i]), 0.9, v, v, v, false);\n  }\n  // The disc: a face of six soft sectors that turns with it, so a snap shows\n  // as the whole wheel whirling round; a rim that flashes white; the pivot.\n  const ox = toX(0), oy = toY(0), px = cos(S.t), py = sin(S.t), spin = 1 + 1.6 * cl(S.w / 8, 0, 1);\n  for (let y = max(0, floor(oy - SC - 1)); y \u003c= min(H - 1, floor(oy + SC + 1)); y++)\n    for (let x = max(0, floor(ox - SC - 1)); x \u003c= min(W - 1, floor(ox + SC + 1)); x++) {\n      const dx = x + 0.5 - ox, dy = oy - y - 0.5, r = sqrt(dx * dx + dy * dy), e = cl(SC + 0.5 - r, 0, 1);\n      if (e \u003c= 0) continue;\n      const a = atan2(dy, dx) - S.t, v = e * spin * (48 + 30 * cos(6 * a) * cl(r / 4, 0, 1)), p = y * W + x;\n      R[p] = col[9] * v;\n      G[p] = col[10] * v;\n      B[p] = col[11] * v;\n    }\n  for (let i = 0; i \u003c 96; i++) {\n    const a0 = (2 * PI * i) / 96, a1 = (2 * PI * (i + 1)) / 96, e = 120 + 135 * fl;\n    line(S, ox + SC * cos(a0), oy - SC * sin(a0), ox + SC * cos(a1), oy - SC * sin(a1), col[9] * e + 255 * fl * 0.5, col[10] * e + 255 * fl * 0.5, col[11] * e + 255 * fl * 0.5, 0.7);\n  }\n  line(S, ox, oy, toX(px), toY(py), col[9] * 110, col[10] * 110, col[11] * 110, 0.6);\n  disc(S, ox, oy, 1.3, 200, 200, 200, false);\n  // The other stable angle, while B is inside the diamond.\n  if (S.ghostA > 0.02) {\n    const g = 150 * S.ghostA, u = cos(S.ghost) > 0 ? 1 : 0;\n    disc(S, toX(cos(S.ghost)), toY(sin(S.ghost)), 1.4, g * (col[3] * (1 - u) + col[6] * u), g * (col[4] * (1 - u) + col[7] * u), g * (col[5] * (1 - u) + col[8] * u), false);\n  }\n  // The bands, brighter the harder they pull.\n  const ta = max(0, sqrt(px * px + (py - AD) ** 2) - S.L), tb = max(0, sqrt((px - S.bx) ** 2 + (py - S.by) ** 2) - S.L);\n  const va = 70 + 185 * cl(ta / 2.6, 0, 1), vb = 70 + 185 * cl(tb / 2.6, 0, 1) + 60 * fl;\n  line(S, toX(0), toY(AD), toX(px), toY(py), va, va * 0.93, va * 0.82, 0.75);\n  line(S, toX(px), toY(py), toX(S.bx), toY(S.by), vb, vb * 0.93, vb * 0.82, 0.75);\n  // The anchor, P on the rim, and B.\n  disc(S, toX(0), toY(AD), 1.6, col[0] * 255, col[1] * 255, col[2] * 255, false);\n  const u = (1 + cl(px * 2, -1, 1)) / 2;\n  disc(S, toX(px), toY(py), 2.3, 255 * (col[3] * (1 - u) + col[6] * u), 255 * (col[4] * (1 - u) + col[7] * u), 255 * (col[5] * (1 - u) + col[8] * u), false);\n  disc(S, toX(px), toY(py), 1, 255, 255, 255, false);\n  disc(S, toX(S.bx), toY(S.by), 1.5, 255, 255, 255, false);\n  // A ring opening round B at each snap.\n  if (fl > 0) {\n    const r = 2 + 9 * (1 - fl * fl), v = 255 * sm(fl * 1.6);\n    for (let i = 0; i \u003c 40; i++) {\n      const a0 = (2 * PI * i) / 40, a1 = (2 * PI * (i + 1)) / 40;\n      line(S, toX(S.fbx) + r * cos(a0), toY(S.fby) + r * sin(a0), toX(S.fbx) + r * cos(a1), toY(S.fby) + r * sin(a1), v, v, v, 0.95);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-catastrophe-machine","type":"code","name":"catastrophe-machine","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Catastrophe Machine\n// Family:  physics\n// Idea:    Zeeman's machine stands on the panel, a disc on a pivot with two elastic bands tied to one point of its rim, one to a fixed anchor above and one to a control point that sweeps back and forth below; the disc follows its energy minimum smoothly until the control point leaves the cusped diamond where two minima exist, and then it snaps across, so the control point's trail takes one colour going right and the other coming back.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Zeeman's catastrophe machine (Christopher Zeeman, 1972), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1\n//\n// Knob 1: Hue. Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown.\n// Knob 2: Speed. At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Tension. The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B.\n// Knob 4: Depth. The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all.\n// Buttons: K1 tap throws B to the mirror point across the axis. From outside the diamond the disc snaps at once; from inside it, B lands inside again and the disc stays where it was, since inside either side is stable.\n\nconst W = 64, H = 128, N = W * H;\n// The machine in disc radii: pivot O at the origin, anchor A at (0, AD),\n// bands of rest length L. On the panel one radius is SC LEDs, O sits at row\n// OY, and the anchor 5 rows from the top.\nconst AD = 2.5, L0 = 1, SC = 18.6, OX = 32, OY = 5 + SC * AD, NF = 360, NT = 180, TRAIL = 180, SNAPS = 24;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst toX = (x) => OX + SC * x, toY = (y) => OY - SC * y;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The energy V(t) = (|P-A| - L)+^2 / 2 + (|P-B| - L)+^2 / 2, P = (cos t, sin t),\n// a band pulling only while it is stretched, and its derivative in t: each\n// band adds its tension times the component of its direction along the rim.\nfunction energy(t, L, bx, by) {\n  const px = cos(t), py = sin(t);\n  const ea = max(0, sqrt(px * px + (py - AD) * (py - AD)) - L), eb = max(0, sqrt((px - bx) ** 2 + (py - by) ** 2) - L);\n  return 0.5 * (ea * ea + eb * eb);\n}\nfunction torque(t, L, bx, by) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), ux = px - bx, uy = py - by, db = sqrt(ux * ux + uy * uy);\n  return (max(0, da - L) * (ax * tx + ay * ty)) / da + (max(0, db - L) * (ux * tx + uy * ty)) / (db || 1e-9);\n}\n\n// The bifurcation set. At a fold the disc angle t is an equilibrium (V' = 0)\n// that is about to stop being a minimum (V'' = 0). For each t the band to B\n// leaves P along some direction u; V' = 0 fixes how far B must be, and the\n// direction is found where V'' changes sign. One point per t, so the 360\n// points run round the diamond in order, through its four cusps.\nfunction foldAt(t, L, be) {\n  const px = cos(t), py = sin(t), tx = -py, ty = px;\n  const ax = px, ay = py - AD, da = sqrt(ax * ax + ay * ay), uax = ax / da, uay = ay / da;\n  const ca = uax * tx + uay * ty, sa = uax * px + uay * py, ea = max(0, da - L);\n  const M = ea * ca, K = (da > L ? ca * ca : 0) + ea * ((1 - ca * ca) / da - sa);\n  const ux = cos(be), uy = sin(be), c = ux * tx + uy * ty, s = ux * px + uy * py;\n  if (abs(c) \u003c 1e-9) return null;\n  const e = -M / c;\n  if (e \u003c= 0) return null;\n  const d = L + e;\n  return [K + c * c + e * ((1 - c * c) / d - s), px - d * ux, py - d * uy, d];\n}\nfunction fold(S, L) {\n  S.L = L;\n  S.nf = 0;\n  if (L \u003c 0.02) return;\n  let guess = -1;\n  for (let i = 0; i \u003c NF; i++) {\n    const t = (2 * PI * i) / NF;\n    let found = null;\n    // Look near the last direction first, then all the way round.\n    const tries = guess \u003c 0 ? [[0, 2 * PI, 1440]] : [[guess - 0.25, guess + 0.25, 50], [0, 2 * PI, 1440]];\n    for (const [b0, b1, k] of tries) {\n      let prev = foldAt(t, L, b0), pb = b0;\n      for (let j = 1; j \u003c= k && !found; j++) {\n        const be = b0 + ((b1 - b0) * j) / k, cur = foldAt(t, L, be);\n        if (prev && cur && prev[0] * cur[0] \u003c= 0 && abs(cur[3] - prev[3]) \u003c 0.3 && cur[3] \u003c 8) {\n          let lo = pb, hi = be, flo = prev[0];\n          for (let q = 0; q \u003c 40; q++) {\n            const mid = (lo + hi) / 2, m = foldAt(t, L, mid);\n            if (!m) break;\n            if (m[0] * flo > 0) (lo = mid), (flo = m[0]);\n            else hi = mid;\n          }\n          found = foldAt(t, L, (lo + hi) / 2);\n          guess = (lo + hi) / 2;\n        }\n        prev = cur;\n        pb = be;\n      }\n      if (found) break;\n    }\n    if (found) {\n      S.FX[S.nf] = found[1];\n      S.FY[S.nf] = found[2];\n      S.nf++;\n    }\n  }\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c S.nf; i++) {\n    x0 = min(x0, S.FX[i]);\n    x1 = max(x1, S.FX[i]);\n    y0 = min(y0, S.FY[i]);\n    y1 = max(y1, S.FY[i]);\n  }\n  S.fx0 = x0;\n  S.fx1 = x1;\n  S.fy0 = y0;\n  S.fy1 = y1;\n  // The side cusps are the leftmost and rightmost points.\n  let iL = 0;\n  for (let i = 0; i \u003c S.nf; i++) if (S.FX[i] \u003c S.FX[iL]) iL = i;\n  S.ySide = S.nf ? S.FY[iL] : -2.5;\n}\n\n// Local minima of V over the rim, from 180 samples, each polished by a few\n// steps of descent. Returns how many; their angles land in S.mins.\nfunction minima(S, bx, by) {\n  const L = S.L, E = S.E;\n  for (let i = 0; i \u003c NT; i++) E[i] = energy((2 * PI * i) / NT, L, bx, by);\n  let n = 0;\n  for (let i = 0; i \u003c NT && n \u003c 4; i++) {\n    const a = E[(i + NT - 1) % NT], b = E[(i + 1) % NT];\n    if (E[i] \u003c a && E[i] \u003c= b) {\n      let t = (2 * PI * i) / NT;\n      for (let k = 0; k \u003c 30; k++) t -= 0.5 * torque(t, L, bx, by);\n      S.mins[n++] = t;\n    }\n  }\n  return n;\n}\n\n// Follow the local minimum the disc sits in: the nearest place within half a\n// radian where V' turns from negative to positive, refined by bisection.\n// When there is none, that minimum has gone, which is the snap.\nfunction track(S, t) {\n  const L = S.L, bx = S.bx, by = S.by;\n  let best = NaN, bd = 1e9, prev = torque(t - 0.5, L, bx, by);\n  for (let i = 1; i \u003c= 96; i++) {\n    const a = t - 0.5 + i / 96, cur = torque(a, L, bx, by);\n    if (prev \u003c 0 && cur >= 0) {\n      let lo = a - 1 / 96, hi = a;\n      for (let q = 0; q \u003c 30; q++) {\n        const m = (lo + hi) / 2;\n        if (torque(m, L, bx, by) \u003c 0) lo = m;\n        else hi = m;\n      }\n      const r = (lo + hi) / 2;\n      if (abs(r - t) \u003c bd) (bd = abs(r - t)), (best = r);\n    }\n    prev = cur;\n  }\n  return best;\n}\n\nfunction setup(params) {\n  params.s = {\n    t: 0, w: 0, L: -1, nf: 0, FX: new Float64Array(NF), FY: new Float64Array(NF), fx0: 0, fx1: 0, fy0: 0, fy1: 0, ySide: -2.4,\n    E: new Float64Array(NT), mins: new Float64Array(4), nm: 1, ghost: 0, ghostA: 0,\n    ph: -PI / 2, wph: 0, bx: -1.35, by: -2.4, depth: 0.06, hue: 0, speed: 2,\n    TX: new Float32Array(TRAIL), TY: new Float32Array(TRAIL), TB: new Float32Array(TRAIL), tn: 0, th: 0, tacc: 0,\n    SX: new Float32Array(SNAPS), SY: new Float32Array(SNAPS), SA: new Float32Array(SNAPS).fill(99), sh: 0,\n    tm: 0, flash: 0, fbx: 0, fby: 0, warm: false,\n    R: new Float32Array(N), G: new Float32Array(N), B: new Float32Array(N), cov: new Float32Array(N),\n    xs: new Float32Array(4 * H * 16), xn: new Int32Array(4 * H), col: new Float32Array(24),\n  };\n}\n\n// B's path: across the panel and back, 1.35 radii either side of the axis,\n// at the height Depth picks between the side cusps and the bottom cusp,\n// wandering up and down a quarter of that height. From Depth 0.8 on it\n// never enters the diamond.\nfunction place(S) {\n  const ys = S.nf ? S.ySide : -2.5, yb = S.nf ? S.fy0 : -2.6;\n  S.bx = 1.35 * sin(S.ph);\n  S.by = ys + (0.3 + 1.2 * S.depth + 0.25 * sin(S.wph)) * (yb - ys);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.depth = cl(k[3], 0, 1);\n  const L = L0 * (1 - cl(k[2], 0, 1));\n  if (abs(L - S.L) > 0.002) fold(S, L);\n  const beat = (d * S.speed) / 2;\n  const jump = !!(input.btnPressed && input.btnPressed[0]);\n  if (jump) S.ph = -S.ph;\n  // A crossing of the panel every 4 beats; the wander is slower.\n  S.ph += (beat * PI) / 4;\n  S.wph += beat * 0.53;\n  place(S);\n  S.nm = minima(S, S.bx, S.by);\n  if (!S.warm) {\n    // Start in the deepest minimum.\n    let best = 0;\n    for (let i = 1; i \u003c S.nm; i++) if (energy(S.mins[i], S.L, S.bx, S.by) \u003c energy(S.mins[best], S.L, S.bx, S.by)) best = i;\n    S.t = S.tm = S.mins[best];\n    S.warm = true;\n  }\n  // The snap: the minimum the disc was in is gone. B is then at most one\n  // frame's travel past the edge of the diamond, and the mark goes there,\n  // unless K1 threw B across.\n  const tm = track(S, S.tm);\n  if (tm === tm) S.tm = tm;\n  else {\n    let far = 0, fd = -1;\n    for (let i = 0; i \u003c S.nm; i++) {\n      const dd = abs(atan2(sin(S.mins[i] - S.tm), cos(S.mins[i] - S.tm)));\n      if (dd > fd) (fd = dd), (far = i);\n    }\n    S.tm = S.mins[far];\n    S.flash = 1;\n    S.fbx = S.bx;\n    S.fby = S.by;\n    if (!jump) {\n      S.SX[S.sh] = S.bx;\n      S.SY[S.sh] = S.by;\n      S.SA[S.sh] = 0;\n      S.sh = (S.sh + 1) % SNAPS;\n    }\n  }\n  // Overdamped: the disc turns at 30 times the torque per beat, in eight\n  // small steps a frame.\n  const h = beat / 8, t0 = S.t;\n  for (let i = 0; i \u003c 8; i++) S.t -= 30 * h * torque(S.t, S.L, S.bx, S.by);\n  S.w = beat > 0 ? abs(S.t - t0) / beat : S.w;\n  S.flash = max(0, S.flash - beat / 0.5);\n  for (let i = 0; i \u003c SNAPS; i++) S.SA[i] += beat;\n  // The other minimum, when there is one, shows as a ghost on the rim.\n  let gi = -1, gd = 0;\n  for (let i = 0; i \u003c S.nm; i++) {\n    const dd = abs(atan2(sin(S.mins[i] - S.t), cos(S.mins[i] - S.t)));\n    if (dd > 0.3 && dd > gd) (gd = dd), (gi = i);\n  }\n  if (gi >= 0) S.ghost = S.mins[gi];\n  S.ghostA += ((gi >= 0 ? 1 : 0) - S.ghostA) * min(1, beat * 8);\n  // The trail: 15 samples a beat, 12 beats long, each with the side of the\n  // disc P was on.\n  S.tacc += beat * 15;\n  while (S.tacc >= 1) {\n    S.tacc -= 1;\n    S.TX[S.th] = S.bx;\n    S.TY[S.th] = S.by;\n    S.TB[S.th] = cos(S.t);\n    S.th = (S.th + 1) % TRAIL;\n    S.tn = min(TRAIL, S.tn + 1);\n  }\n}\n\n// ---- Drawing ----\n\nfunction plot(S, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  S.R[p] = max(S.R[p], r);\n  S.G[p] = max(S.G[p], g);\n  S.B[p] = max(S.B[p], b);\n}\n\n// A line in panel coordinates, about 1.4 LEDs wide, kept at the brighter.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, v = cl((wide - sqrt(qx * qx + qy * qy)) / 0.55, 0, 1);\n      if (v > 0) plot(S, x, y, cr * v, cg * v, cb * v);\n    }\n}\n\nfunction disc(S, cx, cy, r, cr, cg, cb, add) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c= min(H - 1, floor(cy + r + 1)); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c= min(W - 1, floor(cx + r + 1)); x++) {\n      const v = cl(r + 0.5 - sqrt((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2), 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      if (add) (S.R[p] += cr * v), (S.G[p] += cg * v), (S.B[p] += cb * v);\n      else (S.R[p] = S.R[p] * (1 - v) + cr * v), (S.G[p] = S.G[p] * (1 - v) + cg * v), (S.B[p] = S.B[p] * (1 - v) + cb * v);\n    }\n}\n\n// Coverage of the inside of the diamond: four scanlines a row.\nfunction fill(S) {\n  const { xs, xn, cov, FX, FY } = S, n = S.nf, SUB = 4, CAP = 16;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = (i + 1) % n;\n    let x0 = toX(FX[i]), y0 = toY(FY[i]), x1 = toX(FX[j]), y1 = toY(FY[j]);\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const c = xn[s];\n      if (c \u003c CAP) (xs[s * CAP + c] = x0 + (((s + 0.5) / SUB - y0) * (x1 - x0)) / (y1 - y0)), (xn[s] = c + 1);\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h = S.hue + 0.78, fl = S.flash;\n  // Round yellow the diamond's shading would go olive, so there it is paler\n  // and brighter.\n  const hh = h - floor(h), warm = sm(1 - abs(hh - 0.16) / 0.12);\n  hsv(h, 0.75 - 0.5 * warm, 1, col, 0); // accent: the diamond and the anchor\n  hsv(h + 0.35, 0.85, 1, col, 3); // the trail while P is on the left\n  hsv(h + 0.72, 0.8, 1, col, 6); // the trail while P is on the right\n  const hd = h + 0.8 - floor(h + 0.8), warmD = sm(1 - abs(hd - 0.12) / 0.13);\n  hsv(h + 0.8, 0.6 - 0.3 * warmD, 1 + 0.6 * warmD, col, 9); // the disc, never brown\n  const shade = 66 + 74 * warm;\n  // The bistable region, softly lit, and its cusped edge.\n  if (S.nf > 2) {\n    fill(S);\n    for (let p = 0; p \u003c N; p++) {\n      const c = min(1, cov[p]) * shade;\n      if (c > 0) (R[p] += col[0] * c), (G[p] += col[1] * c), (B[p] += col[2] * c);\n    }\n  }\n  // The trail, oldest first, in the colour of P's side.\n  for (let k = S.tn - 1; k >= 2; k--) {\n    const i = (S.th - k + TRAIL) % TRAIL, j = (i + 1) % TRAIL, age = k / TRAIL;\n    const u = (1 + cl(S.TB[i] * 2, -1, 1)) / 2, v = 230 * (1 - age) * (1 - age) + 25;\n    line(S, toX(S.TX[i]), toY(S.TY[i]), toX(S.TX[j]), toY(S.TY[j]), v * (col[3] * (1 - u) + col[6] * u), v * (col[4] * (1 - u) + col[7] * u), v * (col[5] * (1 - u) + col[8] * u), 0.75);\n  }\n  if (S.nf > 2) {\n    const e = 200 + 55 * fl;\n    for (let i = 0; i \u003c S.nf; i++) {\n      const j = (i + 1) % S.nf;\n      line(S, toX(S.FX[i]), toY(S.FY[i]), toX(S.FX[j]), toY(S.FY[j]), col[0] * e, col[1] * e, col[2] * e, 0.7);\n    }\n  }\n  // Where the snaps happened: white marks that fade over 25 beats.\n  for (let i = 0; i \u003c SNAPS; i++) {\n    if (S.SA[i] > 25) continue;\n    const v = 255 * (1 - S.SA[i] / 25);\n    disc(S, toX(S.SX[i]), toY(S.SY[i]), 0.9, v, v, v, false);\n  }\n  // The disc: a face of six soft sectors that turns with it, so a snap shows\n  // as the whole wheel whirling round; a rim that flashes white; the pivot.\n  const ox = toX(0), oy = toY(0), px = cos(S.t), py = sin(S.t), spin = 1 + 1.6 * cl(S.w / 8, 0, 1);\n  for (let y = max(0, floor(oy - SC - 1)); y \u003c= min(H - 1, floor(oy + SC + 1)); y++)\n    for (let x = max(0, floor(ox - SC - 1)); x \u003c= min(W - 1, floor(ox + SC + 1)); x++) {\n      const dx = x + 0.5 - ox, dy = oy - y - 0.5, r = sqrt(dx * dx + dy * dy), e = cl(SC + 0.5 - r, 0, 1);\n      if (e \u003c= 0) continue;\n      const a = atan2(dy, dx) - S.t, v = e * spin * (48 + 30 * cos(6 * a) * cl(r / 4, 0, 1)), p = y * W + x;\n      R[p] = col[9] * v;\n      G[p] = col[10] * v;\n      B[p] = col[11] * v;\n    }\n  for (let i = 0; i \u003c 96; i++) {\n    const a0 = (2 * PI * i) / 96, a1 = (2 * PI * (i + 1)) / 96, e = 120 + 135 * fl;\n    line(S, ox + SC * cos(a0), oy - SC * sin(a0), ox + SC * cos(a1), oy - SC * sin(a1), col[9] * e + 255 * fl * 0.5, col[10] * e + 255 * fl * 0.5, col[11] * e + 255 * fl * 0.5, 0.7);\n  }\n  line(S, ox, oy, toX(px), toY(py), col[9] * 110, col[10] * 110, col[11] * 110, 0.6);\n  disc(S, ox, oy, 1.3, 200, 200, 200, false);\n  // The other stable angle, while B is inside the diamond.\n  if (S.ghostA > 0.02) {\n    const g = 150 * S.ghostA, u = cos(S.ghost) > 0 ? 1 : 0;\n    disc(S, toX(cos(S.ghost)), toY(sin(S.ghost)), 1.4, g * (col[3] * (1 - u) + col[6] * u), g * (col[4] * (1 - u) + col[7] * u), g * (col[5] * (1 - u) + col[8] * u), false);\n  }\n  // The bands, brighter the harder they pull.\n  const ta = max(0, sqrt(px * px + (py - AD) ** 2) - S.L), tb = max(0, sqrt((px - S.bx) ** 2 + (py - S.by) ** 2) - S.L);\n  const va = 70 + 185 * cl(ta / 2.6, 0, 1), vb = 70 + 185 * cl(tb / 2.6, 0, 1) + 60 * fl;\n  line(S, toX(0), toY(AD), toX(px), toY(py), va, va * 0.93, va * 0.82, 0.75);\n  line(S, toX(px), toY(py), toX(S.bx), toY(S.by), vb, vb * 0.93, vb * 0.82, 0.75);\n  // The anchor, P on the rim, and B.\n  disc(S, toX(0), toY(AD), 1.6, col[0] * 255, col[1] * 255, col[2] * 255, false);\n  const u = (1 + cl(px * 2, -1, 1)) / 2;\n  disc(S, toX(px), toY(py), 2.3, 255 * (col[3] * (1 - u) + col[6] * u), 255 * (col[4] * (1 - u) + col[7] * u), 255 * (col[5] * (1 - u) + col[8] * u), false);\n  disc(S, toX(px), toY(py), 1, 255, 255, 255, false);\n  disc(S, toX(S.bx), toY(S.by), 1.5, 255, 255, 255, false);\n  // A ring opening round B at each snap.\n  if (fl > 0) {\n    const r = 2 + 9 * (1 - fl * fl), v = 255 * sm(fl * 1.6);\n    for (let i = 0; i \u003c 40; i++) {\n      const a0 = (2 * PI * i) / 40, a1 = (2 * PI * (i + 1)) / 40;\n      line(S, toX(S.fbx) + r * cos(a0), toY(S.fby) + r * sin(a0), toX(S.fbx) + r * cos(a1), toY(S.fby) + r * sin(a1), v, v, v, 0.95);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tension=0..1, Depth=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours together. At 0 the diamond is violet, B's trail amber while P is on the left of the disc and cyan while it is on the right; the disc's face is steel blue. At 0.25 the three are crimson, green and blue on a purple disc; at 0.5 green, blue and red on a pale amber one; at 0.75 cyan, pink and lime on a green one. Round orange and yellow the diamond's shading and the disc are laid paler and brighter, so they do not go olive or brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 B crosses the panel in 4 seconds and comes back in 4, and a snap carries the disc over in under half a second; at 0.2 everything runs ten times slower, at 3 half as fast again."},{"name":"Tension","min":0,"max":1,"about":"The rest length of both bands, from one disc radius at 0 to nothing at 1, the anchor 2.5 radii from the pivot. At 0 the diamond is 30 LEDs wide and 34 tall, its top cusp 8 LEDs under the disc; at 0.25 it is 21 by 25, at 0.5 13 by 17, at 0.75 6 by 8, at 0.9 a speck. At 1 the bands are springs of zero length, the energy has one minimum wherever B is, the diamond is gone and the disc turns smoothly to face the sum of A and B."},{"name":"Depth","min":0,"max":1,"about":"The height of B's sweep, as a share of the way from the side cusps down to the bottom cusp. At 0 it crosses 30% of the way down, give or take a quarter, where the diamond is wide, and each snap throws the disc about 120 degrees; at 0.3 about 85, at 0.5 about 70 and only on some passes; at 0.7 about 45, near the bottom cusp, where the two minima are close; from 0.8 the sweep passes under the cusp, never enters the diamond, and the disc swings across with no snap at all."}],"start":[0,2,0,0.06],"measures":{"motion":0.213,"detail":0.0332,"edges":0.4458,"complexity":0.4561,"coverage":0.1952,"colour":0.1001,"drift":0.0525},"knobResponse":[0.0365,0.0378,0.0477,0.0428]},{"slug":"center-pivot","title":"Center Pivot","family":"farm","round":27,"note":"비행기 창으로 내려다본 들판이에요. 흙길로 나뉜 황토색 땅에 원형 밭이 두 줄로 넷씩 놓이고, 은빛 스프링클러 팔이 돌며 지나간 부채꼴을 짙게 적셨다가 말려요. 금빛 밀밭은 콤바인이 바깥부터 베어 들어가요. K1 이 봄에서 늦가을까지 철을 돌리고, 누르면 모든 팔이 한 바퀴 돌아요.","idea":"The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.","buttons":"K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.","code":"// ===== Patternflow pattern =====\n// Title:   Center Pivot\n// Family:  farm\n// Idea:    The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after center-pivot irrigation seen from the air over Kansas and the Saudi desert\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1\n//\n// Knob 1: Season. Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown.\n// Knob 2: Speed. At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster.\n// Knob 3: Fields. How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it.\n// Knob 4: Clouds. A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun.\n// Buttons: K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.\n\nconst W = 64, H = 128, N = W * H, SEC = 32, RW = 14, BAND = 3.2, TD = 4.5;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nconst md = (v) => v - floor(v / TAU) * TAU;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n\n// A crop's year in stages. The last number of each is how strongly the planted rings show.\nconst KEY = [\n  0, 84, 66, 50, 0.14, 0.1, 92, 76, 52, 0.18, 0.22, 116, 150, 64, 0.2, 0.36, 66, 136, 54, 0.12,\n  0.48, 34, 104, 48, 0.08, 0.56, 126, 132, 54, 0.08, 0.63, 222, 186, 64, 0.05, 0.7, 234, 200, 98, 0.05,\n  0.78, 224, 210, 158, 0.08, 0.89, 180, 168, 136, 0.08, 0.96, 116, 92, 68, 0.14, 1.01, 84, 66, 50, 0.14,\n];\nfunction stageCol(v, o) {\n  let a = 0;\n  while (KEY[a + 5] \u003c v) a += 5;\n  const u = sm(KEY[a], KEY[a + 5], v);\n  for (let j = 1; j \u003c 4; j++) o[j - 1] = mix(KEY[a + j], KEY[a + 5 + j], u);\n  return mix(KEY[a + 4], KEY[a + 9], u);\n}\n// Corn and soybeans run from ploughing to stubble, alfalfa stays green. Winter wheat is gold by June and sown again in autumn.\nfunction stageOf(crop, k, off) {\n  if (crop === 2) return fr(0.6 + 0.72 * k + off);\n  if (crop === 3) return 0.38 + 0.06 * sin(k * 9 + off * 20) + 0.14 * sm(0.75, 1, k);\n  return cl(0.86 * k + off - (crop ? 0.06 : 0), 0, 0.985);\n}\n\n// The river, in section units (an LED each at Fields 2), and the signed distance across it.\nconst rx = (y) => -39 + 13 * exp(-(((y - 16) / 24) ** 2)) + 2.5 * sin(y * 0.09 + 1) + 0.06 * y;\nfunction rd(wx, wy) {\n  const s = rx(wy + 0.5) - rx(wy - 0.5);\n  return (wx - rx(wy)) / sqrt(1 + s * s);\n}\n// The eight sections in view at the start, left then right, top down. Each is a crop, how far ahead it is,\n// a second crop on the other half and how far ahead that is, and the corner of the farmstead (-1 for none).\nconst OPEN = [\n  [0, 0.2, -1, 0, -1], [3, 0, -1, 0, 2], [2, 0.02, -1, 0, -1], [0, 0.19, 1, 0, -1],\n  [0, 0.32, -1, 0, -1], [1, 0, -1, 0, 1], [3, 0.3, 2, 0.06, 2], [1, 0.18, -1, 0, -1],\n];\nfunction spec(ci, cj) {\n  if (ci >= -1 && ci \u003c= 0 && cj >= -2 && cj \u003c= 1) {\n    const o = OPEN[(cj + 2) * 2 + ci + 1];\n    return { strips: 0, crop: o[0], off: o[1], crop2: o[2], off2: o[3], farm: o[4] };\n  }\n  const h = (k) => hash(ci * 31 + k, cj * 17 + 5);\n  return { strips: h(1) \u003c 0.14, crop: floor(h(2) * 4), off: h(3) * 0.3, crop2: h(4) \u003c 0.25 ? floor(h(5) * 4) : -1, off2: h(6) * 0.3, farm: h(7) \u003c 0.45 ? floor(h(8) * 4) : -1 };\n}\n\n// Per LED: its field, angle and distance from that pivot, how much of it is field; field LEDs grouped by field.\nconst FID = new Int16Array(N), ANG = new Float32Array(N), RAD = new Float32Array(N), COV = new Float32Array(N), FP = new Int32Array(N);\nconst BASE = new Float32Array(N * 3), ALT = new Float32Array(N * 3), WET = new Float32Array(N), F = new Float32Array(N * 3), C3 = new Float64Array(3);\n// Cloud noise that tiles every 64.\nconst CN = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = k & 63, y = k >> 6;\n  CN[k] = 0.55 * vn(x / 8, y / 8, 8) + 0.3 * vn(x / 4 + 9, y / 4, 16) + 0.15 * vn(x / 2, y / 2 + 7, 32);\n}\nfunction cloud(u, v) {\n  const x0 = floor(u), y0 = floor(v), fx = u - x0, fy = v - y0, a = x0 & 63, a1 = (x0 + 1) & 63, b = (y0 & 63) \u003c\u003c 6, b1 = ((y0 + 1) & 63) \u003c\u003c 6;\n  return mix(mix(CN[b + a], CN[b + a1], fx), mix(CN[b1 + a], CN[b1 + a1], fx), fy);\n}\n\nexport function setup(params) {\n  params.s = { z: -1, k1: -1, t: 0, rt: 0, ox: 20, oy: 30, mist: 0, fields: [], sec: new Map(), tr: [], dust: [], duster: null, spray: [] };\n}\n\nfunction sectionAt(S, wx, wy) {\n  const ci = floor(wx / SEC), cj = floor(wy / SEC), key = ci * 1000 + cj;\n  let s = S.sec.get(key);\n  if (!s) {\n    const sp = spec(ci, cj), cx = ci * SEC + 16, cy = cj * SEC + 16, sd = rd(cx, cy);\n    s = { ci, cj, sp, f: -1, cx, cy, sd };\n    S.sec.set(key, s);\n  }\n  return s;\n}\n\n// The fields for this height, and each LED's place in them.\nfunction layout(S, k3) {\n  const z = (S.z = k3 / 2), fs = (S.fields = []);\n  S.sec.clear();\n  for (let cj = floor(-2 * z) - 1; cj \u003c= ceil(2 * z); cj++)\n    for (let ci = floor(-z) - 1; ci \u003c= ceil(z); ci++) {\n      const s = sectionAt(S, ci * SEC + 1, cj * SEC + 1), sp = s.sp;\n      if (sp.strips || abs(s.sd) \u003c 6.5) continue;\n      const id = fs.length, sg = s.sd > 0 ? 1 : -1, h = (k) => hash(ci * 13 + k, cj * 7 + 3);\n      // Where the river and its trees cut the circle, the arm swings to and fro over what is left.\n      let run = 0, best = 0, start = 0, first = -1;\n      const ok = (k) => rd(s.cx + RW * 0.97 * cos((k * TAU) / 96), s.cy + RW * 0.97 * sin((k * TAU) / 96)) * sg > 4.8;\n      for (let k = 0; k \u003c 192; k++) {\n        if (ok(k % 96)) {\n          if (!run) start = k;\n          if (++run > best && run \u003c= 96) (best = run), (first = start);\n        } else run = 0;\n      }\n      if (best \u003c 16) continue;\n      const f = { id, s, sg, cx: 32.5 + s.cx / z, cy: 64.5 + s.cy / z, R: RW / z, crop: sp.crop, off: sp.off, crop2: sp.crop2, off2: sp.off2, sa: h(1) * TAU };\n      Object.assign(f, { sd: h(2) \u003c 0.5 ? 1 : -1, om: TAU / (16 + 10 * h(3)), a: h(4) * TAU, tint: 0.93 + 0.12 * h(5), boost: 0, wipe: 0, a0: 0, span: TAU, rel: 0 });\n      Object.assign(f, { harv: 0, h: 0, h0: 0.3 + 0.4 * h(6), hs: h(7) * TAU, hd: h(8) \u003c 0.5 ? 1 : -1, hst: 0, ht: 0, g: 1, n0: 0, n1: 0, grow: 0 });\n      if (best \u003c 96) Object.assign(f, { wipe: 1, a0: ((first + 1) * TAU) / 96, span: ((best - 2) * TAU) / 96, rel: h(4) * ((best - 2) * TAU) / 96 }), (f.a = f.a0 + f.rel);\n      s.f = id;\n      fs.push(f);\n    }\n  for (let i = 0; i \u003c N; i++) {\n    const wx = ((i & 63) - 32) * z, wy = ((i >> 6) - 64) * z, s = sectionAt(S, wx, wy);\n    FID[i] = -1;\n    COV[i] = 0;\n    if (s.f \u003c 0) continue;\n    const f = fs[s.f], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy);\n    const c = cl((RW - dr) / z + 0.5, 0, 1) * cl((rd(wx, wy) * f.sg - 4.6) / z + 0.5, 0, 1);\n    if (c \u003c= 0) continue;\n    (FID[i] = f.id), (COV[i] = c), (ANG[i] = md(atan2(dy, dx))), (RAD[i] = dr / z);\n  }\n  for (const f of fs) f.n1 = 0;\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) fs[FID[i]].n1++;\n  let n = 0;\n  for (const f of fs) (f.n0 = n), (n += f.n1), (f.n1 = f.n0);\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) FP[fs[FID[i]].n1++] = i;\n  const vr = [], hr = [];\n  for (let m = -4; m \u003c= 4; m++) {\n    const x = 32.5 + (m * SEC) / z, y = 64.5 + (m * SEC) / z;\n    if (x > 2 && x \u003c 62) vr.push(x);\n    if (y > 2 && y \u003c 126) hr.push(y);\n  }\n  S.tr = [0, 1].map((k) => ({ v: k === 0, c: k ? hr[min(hr.length - 1, 2)] : vr[floor(vr.length / 2)], p: k ? 20 : 100, d: k ? 1 : -1, acc: 0 }));\n  S.dust = [];\n}\n\n// What stands on the land: trees along the river and in the farmsteads' windbreaks (1), or a farmhouse roof (2)\n// with its grain bins (3). 0 is open ground.\nfunction objAt(S, wx, wy) {\n  const r = abs(rd(wx, wy));\n  if (r > 1.1 && r \u003c 4.4 && vn(wx * 0.55 + 5, wy * 0.55) > 0.22 + 0.11 * r) return 1;\n  const s = sectionAt(S, wx, wy), c = s.sp.farm;\n  if (c \u003c 0 || s.sp.strips) return 0;\n  const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, u = c & 1 ? SEC - lx : lx, v = c & 2 ? SEC - ly : ly;\n  if (u \u003c 1 || v \u003c 1) return 0;\n  if ((u \u003c 8.6 && v \u003c 2.7) || (u \u003c 2.7 && v \u003c 8.6)) return hash(floor(u * 1.4), floor(v * 1.4) + c) \u003c 0.85 ? 1 : 0;\n  if (u > 3.4 && u \u003c 5.3 && v > 3.4 && v \u003c 5.1) return 2;\n  if ((u - 6.4) ** 2 + (v - 3.7) ** 2 \u003c 0.7 || (u - 3.7) ** 2 + (v - 6.4) ** 2 \u003c 0.7) return 3;\n  return 0;\n}\n\n// Round bales lying on the windrows of a stubble field.\nfunction bale(f, wx, wy) {\n  const dx = wx - f.s.cx, dy = wy - f.s.cy, dr = sqrt(dx * dx + dy * dy);\n  if (dr > RW - 1 || dr \u003c 2) return 0;\n  const q = dr / 3.5, k = floor(q), arc = md(atan2(dy, dx) - f.sa) * dr, c = floor(arc / 4.5);\n  return abs(q - k - 0.5) * 3.5 \u003c 0.55 && abs(arc / 4.5 - c - 0.5) * 4.5 \u003c 0.6 && arc \u003c 4.2 * dr && hash(k, c + f.id * 50) \u003c 0.75 ? 1 : 0;\n}\n\n// The picture that stays put between knob turns: land, roads, river, farmsteads and each field at its point in the season.\nfunction paint(S, k1) {\n  const z = S.z, fs = S.fields, C = C3, L = [mix(156, 172, sm(0, 0.4, k1)), mix(146, 148, k1), mix(100, 106, k1)];\n  const leaf = [mix(34, 132, sm(0.72, 0.92, k1)), mix(66, 102, sm(0.72, 0.92, k1)), 38];\n  for (const f of fs) {\n    f.v = stageOf(f.crop, k1, f.off);\n    f.v2 = f.crop2 \u003c 0 ? f.v : stageOf(f.crop2, k1, f.off2);\n    f.c1 = [0, 0, 0];\n    f.c2 = [0, 0, 0];\n    f.a1 = stageCol(f.v, f.c1);\n    f.a2 = stageCol(f.v2, f.c2);\n    f.grow = (f.v > 0.1 && f.v \u003c 0.57) || (f.v2 > 0.1 && f.v2 \u003c 0.57) ? 1 : 0;\n    const hv = f.crop2 \u003c 0 && f.v > 0.6 && f.v \u003c 0.77 ? 1 : 0;\n    if (hv !== f.harv) Object.assign(f, { harv: hv, h: f.h0, hst: 0, g: 1 });\n  }\n  const ringA = sm(1.9, 2.6, 3 / z);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, wx = (x - 32) * z, wy = (y - 64) * z, s = sectionAt(S, wx, wy), sp = s.sp, r = rd(wx, wy), gr = 0.93 + 0.1 * vn(wx * 0.4, wy * 0.4) + 0.04 * hash(x, y);\n    for (let j = 0; j \u003c 3; j++) C[j] = L[j] * gr;\n    if (abs(r) \u003c 11) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], PASTURE[j] * gr, sm(11, 5, abs(r)) * 0.7);\n    if (sp.strips) {\n      const q = hash(s.ci, s.cj + 3) \u003c 0.5 ? wx : wy, st = floor(q / 4.5) & 1;\n      stageCol(st ? stageOf(2, k1, sp.off) : 0.86, C3);\n      for (let j = 0; j \u003c 3; j++) C[j] *= gr;\n    }\n    const fi = FID[i];\n    if (fi >= 0) {\n      const f = fs[fi], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy), cv = COV[i];\n      const side = f.crop2 \u003c 0 ? 0 : cl((dx * sin(f.sa) - dy * cos(f.sa)) / z + 0.5, 0, 1);\n      const amp = mix(f.a1, f.a2, side) * ringA, tk = abs(fr((dr * 5) / RW + 0.5) - 0.5) * (RW / 5 / z);\n      let m = f.tint * (1 + amp * cos((dr * TAU) / 3)) * (0.95 + 0.1 * vn(wx * 0.3 + f.id * 7, wy * 0.3));\n      if (dr > RW * 0.12) m *= 1 - 0.2 * cl(1 - tk * 1.6, 0, 1);\n      m *= 1 - 0.15 * cl(1 - abs(dr - RW + 0.5) / z, 0, 1);\n      const v = side > 0.5 ? f.v2 : f.v, wr = v > 0.76 && v \u003c 0.92 ? cl(1 - abs(fr(dr / 3.5) - 0.5) * (3.5 / z) * 1.8, 0, 1) : 0;\n      for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], mix(f.c1[j], f.c2[j], side) * m * (1 - 0.14 * wr), cv);\n      if (v > 0.76 && v \u003c 0.92) {\n        if (bale(f, wx, wy)) (C[0] = 196), (C[1] = 158), (C[2] = 76);\n        else if (bale(f, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.55;\n      }\n      if (dr \u003c 0.9) (C[0] = 170), (C[1] = 172), (C[2] = 164);\n      // Cut stubble, for a field the combine is in: paler, with a windrow down the middle of each pass.\n      if (f.harv) {\n        const kb = (RW - dr) / BAND, w2 = cl(1 - abs(fr(kb) - 0.5) * (BAND / z) * 1.6, 0, 1), m2 = f.tint * (0.96 + 0.08 * vn(wx * 0.5, wy * 0.5)) * (1 - 0.18 * w2) * (dr > RW * 0.12 ? 1 - 0.15 * cl(1 - tk * 1.6, 0, 1) : 1);\n        ALT[o] = 230 * m2;\n        ALT[o + 1] = 216 * m2;\n        ALT[o + 2] = 166 * m2;\n      }\n    }\n    const ob = objAt(S, wx, wy);\n    if (!ob && objAt(S, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.6;\n    if (ob === 1) for (let j = 0; j \u003c 3; j++) C[j] = leaf[j] * (0.8 + 0.4 * vn(wx * 1.3, wy * 1.3));\n    else if (ob === 2) (C[0] = 214), (C[1] = 208), (C[2] = 198);\n    else if (ob === 3) (C[0] = 196), (C[1] = 202), (C[2] = 206);\n    const aw = cl(1.25 - abs(r) / z, 0, 1);\n    if (aw > 0) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], WATER[j], aw);\n    const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, dp = min(lx, SEC - lx, ly, SEC - ly) / z, rc = x && y ? cl(0.6 / z + 0.5 - dp, 0, 1) : 0;\n    for (let j = 0; j \u003c 3; j++) BASE[o + j] = mix(C[j], GRAVEL[j], rc);\n  }\n}\n\nfunction startWet(S) {\n  for (const f of S.fields)\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let age = 99;\n      if (f.grow) {\n        if (!f.wipe) age = md((f.a - ANG[i]) * f.sd) / f.om;\n        else {\n          const r = md(ANG[i] - f.a0), p = f.rel;\n          if (r \u003c= f.span) age = (f.sd > 0 ? (r \u003c= p ? p - r : p + r) : r >= p ? r - p : 2 * f.span - r - p) / f.om;\n        }\n      }\n      WET[i] = exp(-age / TD);\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 2, 4), ts = cl(k[1], 0.2, 3) / 2, rt = cl(dt || 0, 0, 0.1), d = rt * ts;\n  let fresh = 0;\n  if (abs(k3 / 2 - S.z) > 0.004) layout(S, k3), (fresh = 1);\n  if (fresh || abs(k1 - S.k1) > 0.002) paint(S, k1), (S.k1 = k1);\n  if (fresh) startWet(S);\n  (S.k4 = cl(k[3], 0, 1)), (S.t += d), (S.rt += rt);\n  const bp = input.btnPressed || [];\n  if (bp[0]) {\n    for (const f of S.fields) f.boost = f.wipe ? 2 * f.span : TAU;\n    S.mist = 3;\n  }\n  if (bp[1] && !S.duster) {\n    const xs = S.fields.map((f) => f.cx).filter((x) => x > 4 && x \u003c 60), x = xs.length ? xs[floor(rnd() * xs.length)] + (rnd() - 0.5) * 6 : 32, dn = rnd() \u003c 0.5;\n    S.duster = { x, y: dn ? -8 : H + 8, vy: dn ? 30 : -30, acc: 0 };\n  }\n  S.mist = max(0, S.mist - rt);\n  (S.ox += 2 * d), (S.oy += 1.4 * d);\n  const dec = exp(-d / TD);\n  for (const f of S.fields) {\n    const on = f.grow || f.boost > 0, D = f.om * d;\n    if (on) f.boost -= D;\n    let lo = 1, hi = 0;\n    if (on && !f.wipe) (lo = f.a), (f.a = md(f.a + f.sd * D));\n    else if (on) {\n      const p = f.rel;\n      let q = p + f.sd * D;\n      (lo = min(p, q)), (hi = max(p, q));\n      if (q > f.span) (q = 2 * f.span - q), (f.sd = -1), (lo = min(p, q)), (hi = f.span);\n      if (q \u003c 0) (q = -q), (f.sd = 1), (lo = 0), (hi = max(p, q));\n      (f.rel = q), (f.a = f.a0 + q);\n    }\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let w = WET[i] * dec;\n      if (on) {\n        if (!f.wipe) {\n          if (md((ANG[i] - lo) * f.sd) \u003c= D) w = 1;\n        } else {\n          const r = md(ANG[i] - f.a0);\n          if (r >= lo && r \u003c= hi) w = 1;\n        }\n      }\n      WET[i] = w;\n    }\n    // The combine goes round at a steady walk, so the inner rings take less time.\n    if (f.harv) {\n      if (f.hst === 0) {\n        const rh = max(1.5, f.R - (BAND / S.z) * (floor(f.h) + 0.5));\n        f.h += (d * 5) / (TAU * rh * S.z);\n        if (f.h >= ceil(RW / BAND)) (f.hst = 1), (f.ht = 14);\n      } else if (f.hst === 1) {\n        if ((f.ht -= d) \u003c= 0) f.hst = 2;\n      } else if ((f.g -= d / 3) \u003c= 0) Object.assign(f, { hst: 0, h: 0, g: 1 });\n    }\n  }\n  // Trucks on the gravel roads and the dust they leave hanging.\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    tr.p += tr.d * 6 * d;\n    const lim = tr.v ? H : W;\n    if (tr.p > lim + 30) tr.p = -30;\n    if (tr.p \u003c -30) tr.p = lim + 30;\n    if ((tr.acc += d) > 0.1) {\n      tr.acc = 0;\n      S.dust.push({ x: tr.v ? tr.c : tr.p, y: tr.v ? tr.p : tr.c, t: S.t });\n    }\n  }\n  S.dust = S.dust.filter((p) => S.t - p.t \u003c 3.5);\n  const du = S.duster;\n  if (du) {\n    du.y += du.vy * rt;\n    if ((du.acc += rt) > 0.04) (du.acc = 0), S.spray.push({ x: du.x, y: du.y - Math.sign(du.vy) * 3, t: S.rt });\n    if (du.y \u003c -20 || du.y > H + 20) S.duster = null;\n  }\n  S.spray = S.spray.filter((p) => S.rt - p.t \u003c 4);\n}\n\nfunction blend(x, y, c, a) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], min(1, a));\n}\nfunction shade(x, y, k) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] *= k;\n}\n// A soft dot spread over the four LEDs around it.\nfunction puff(x, y, c, a) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  blend(x0, y0, c, a * (1 - fx) * (1 - fy)), blend(x0 + 1, y0, c, a * fx * (1 - fy)), blend(x0, y0 + 1, c, a * (1 - fx) * fy), blend(x0 + 1, y0 + 1, c, a * fx * fy);\n}\n\nconst SILVER = [214, 220, 226], MIST = [236, 242, 248], DUST = [246, 238, 216], RED = [204, 52, 36], YEL = [244, 212, 46], WHITE = [246, 248, 250], TANK = [236, 224, 196], TRUCK = [56, 64, 84];\nconst PLANE = [0, 1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, 0, -1, 0, -2, -1, -2, 1, -2], BODY = [250, 226, 80];\nconst PASTURE = [96, 118, 70], WATER = [84, 120, 146], GRAVEL = [206, 196, 168], CLOUD = [250, 250, 248], CLOUD_SH = [150, 160, 182];\n// How close a point along an arm of length R is to one of its towers.\nconst tw = (u, R) => cl(1 - abs(fr((u * 5) / R + 0.5) - 0.5) * (R / 5) * 1.5, 0, 1) * (u > R * 0.12 ? 1 : 0);\n// The arm and its shadow, its towers, the mist trailing it and the end gun's spray.\nfunction arm(S, f) {\n  const R = f.R, ca = cos(f.a), sa = sin(f.a), on = f.grow || f.boost > 0, ms = (on ? 1 : 0) * (1 + (S.mist > 0 ? 1.2 : 0)), tf = floor(S.rt * 7);\n  const x0 = max(0, floor(min(f.cx, f.cx + R * ca) - 3)), x1 = min(W - 1, ceil(max(f.cx, f.cx + R * ca) + 3));\n  const y0 = max(0, floor(min(f.cy, f.cy + R * sa) - 3)), y1 = min(H - 1, ceil(max(f.cy, f.cy + R * sa) + 3));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const qx = x + 0.5 - f.cx, qy = y + 0.5 - f.cy, t = qx * ca + qy * sa, c = qy * ca - qx * sa, ts = t - ca - sa, cs = c - ca + sa;\n      const o = (y * W + x) * 3, as = ts > -0.5 && ts \u003c R + 0.5 ? cl(1 - abs(cs), 0, 1) : 0, aa = t > -0.5 && t \u003c R + 0.3 ? cl(1.1 - abs(c), 0, 1) : 0;\n      if (as > 0) for (let j = 0; j \u003c 3; j++) F[o + j] *= 1 - 0.4 * as * (1 + 0.5 * tw(ts, R));\n      if (ms > 0 && t > R * 0.15 && t \u003c R + 2.5 && c * f.sd \u003c -0.3 && c * f.sd > (t > R ? -2.2 : -1.8)) {\n        const sp = hash(x * 31 + y, tf + f.id * 977);\n        blend(x, y, MIST, ms * (0.13 + (sp > 0.74 ? 0.5 : 0)) * (t > R ? 1.3 : 1));\n      }\n      if (aa > 0) {\n        const e = 0.6 * tw(t, R);\n        for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(SILVER[j], 250, e), 0.9 * aa);\n      }\n    }\n  // The wheeled towers, each with its short shadow.\n  for (let k = 1; k \u003c= 5; k++) {\n    const x = f.cx + ((R * k) / 5 - 0.3) * ca, y = f.cy + ((R * k) / 5 - 0.3) * sa;\n    shade(x + 1, y + 1, 0.55), blend(x, y, WHITE, 0.85);\n  }\n  blend(f.cx, f.cy, WHITE, 1);\n  shade(f.cx + 1, f.cy + 1, 0.55);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.z \u003c 0) return;\n  const fs = S.fields;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const fi = FID[i];\n    let g = 0;\n    if (fi >= 0) {\n      const f = fs[fi];\n      if (f.harv && f.hst) g = f.g;\n      else if (f.harv) {\n        const rel = md((ANG[i] - f.hs) * f.hd) / TAU;\n        if (floor((f.R - RAD[i]) / (BAND / S.z)) + rel \u003c f.h) g = 1;\n      }\n    }\n    const w = WET[i] > 0.004 ? WET[i] ** 0.8 * (fi >= 0 ? COV[i] : 0) : 0, k = 1 - 0.5 * w;\n    for (let j = 0; j \u003c 3; j++) {\n      let c = BASE[o + j];\n      if (g > 0) c = mix(c, ALT[o + j], g * COV[i]);\n      F[o + j] = c * k * (1 + (j - 1) * 0.08 * w);\n    }\n  }\n  for (const f of fs) {\n    if (f.harv && f.hst === 0) {\n      const z = S.z, rh = max(1.5, f.R - (BAND / z) * (floor(f.h) + 0.5)), th = f.hs + f.hd * fr(f.h) * TAU, x = f.cx + rh * cos(th), y = f.cy + rh * sin(th);\n      for (let j = 1; j \u003c 9; j++) {\n        const b = th - f.hd * (j * 0.7) / rh;\n        puff(f.cx + rh * cos(b) + 0.3 * j, f.cy + rh * sin(b) + 0.4 * j, DUST, 0.32 * (1 - j / 9));\n      }\n      shade(x + 1, y + 1, 0.5), shade(x + 2, y + 1, 0.6);\n      blend(x, y, RED, 1), blend(x + 1, y, TANK, 1);\n    }\n  }\n  for (const f of fs) arm(S, f);\n  for (const p of S.dust) {\n    const a = S.t - p.t;\n    const e = 0.8 * exp(-a / 1.7), sp = 0.4 + 0.6 * a, x = p.x + a * 1.7, y = p.y + a * 1.2;\n    puff(x, y, DUST, e), puff(x + sp, y + sp * 0.5, DUST, e * 0.6), puff(x - sp * 0.5, y + sp, DUST, e * 0.6);\n  }\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    const x = tr.v ? tr.c : tr.p, y = tr.v ? tr.p : tr.c;\n    shade(x + 1, y + 1, 0.55);\n    blend(x, y, TRUCK, 1);\n  }\n  for (const p of S.spray) {\n    const a = S.rt - p.t;\n    const e = 0.6 * exp(-a / 1.5), sp = 1.2 + 0.9 * a, x = p.x + a * 1.2, y = p.y + a * 0.8;\n    puff(x, y, MIST, e * 0.7), puff(x - sp, y, MIST, e), puff(x + sp, y, MIST, e);\n  }\n  const du = S.duster;\n  if (du) {\n    // A biplane seen from above: nose, wings, body and tail, with its shadow close by.\n    const sy = Math.sign(du.vy), X = floor(du.x), Y = floor(du.y);\n    for (let k = 0; k \u003c 20; k += 2) shade(X + PLANE[k] + 3, Y + PLANE[k + 1] * sy + 4, 0.55);\n    for (let k = 0; k \u003c 20; k += 2) blend(X + PLANE[k], Y + PLANE[k + 1] * sy, PLANE[k + 1] === 0 && PLANE[k] ? YEL : BODY, 1);\n  }\n  // Clouds and their shadows, lit from the upper left.\n  const thr = 0.69 - 0.2 * S.k4, ox = S.ox, oy = S.oy;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, u = (x - ox) * 0.3, v = (y - oy) * 0.27;\n    const sh = sm(thr, thr + 0.06, cloud(u - 1.8, v - 2.4)), n = cloud(u, v), ca = sm(thr, thr + 0.05, n);\n    let k = 1 - 0.45 * sh;\n    for (let j = 0; j \u003c 3; j++) F[o + j] *= k * (j === 2 ? 1 + 0.05 * sh : 1);\n    if (ca > 0) {\n      const lit = cl(0.7 - (n - cloud(u + 0.5, v + 0.5)) * 12 + 2 * (n - thr), 0, 1);\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(CLOUD_SH[j], CLOUD[j], lit), 0.92 * ca);\n    }\n    const lt = 1.02 - 0.09 * (x / W) - 0.07 * (y / H);\n    display.setPixel(x, y, min(255, F[o] * lt + 8) | 0, min(255, F[o + 1] * lt * 0.98 + 8) | 0, min(255, F[o + 2] * lt * 0.95 + 10) | 0);\n  }\n}\n","layer":{"id":"layer-center-pivot","type":"code","name":"center-pivot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Center Pivot\n// Family:  farm\n// Idea:    The plains seen from an airliner window: a grid of round fields on tan square sections between straight gravel roads, each at its own point in the season and each with a silver pivot arm sweeping round and leaving a dark wet wedge that dries behind it, while a combine cuts a gold circle ring by ring and cloud shadows drift over it all.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after center-pivot irrigation seen from the air over Kansas and the Saudi desert\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1\n//\n// Knob 1: Season. Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown.\n// Knob 2: Speed. At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster.\n// Knob 3: Fields. How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it.\n// Knob 4: Clouds. A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun.\n// Buttons: K1 tap switches every pivot on at once, the parked ones too, for one turn. K2 tap sends a yellow crop duster low across the fields, spraying.\n\nconst W = 64, H = 128, N = W * H, SEC = 32, RW = 14, BAND = 3.2, TD = 4.5;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nconst md = (v) => v - floor(v / TAU) * TAU;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n\n// A crop's year in stages. The last number of each is how strongly the planted rings show.\nconst KEY = [\n  0, 84, 66, 50, 0.14, 0.1, 92, 76, 52, 0.18, 0.22, 116, 150, 64, 0.2, 0.36, 66, 136, 54, 0.12,\n  0.48, 34, 104, 48, 0.08, 0.56, 126, 132, 54, 0.08, 0.63, 222, 186, 64, 0.05, 0.7, 234, 200, 98, 0.05,\n  0.78, 224, 210, 158, 0.08, 0.89, 180, 168, 136, 0.08, 0.96, 116, 92, 68, 0.14, 1.01, 84, 66, 50, 0.14,\n];\nfunction stageCol(v, o) {\n  let a = 0;\n  while (KEY[a + 5] \u003c v) a += 5;\n  const u = sm(KEY[a], KEY[a + 5], v);\n  for (let j = 1; j \u003c 4; j++) o[j - 1] = mix(KEY[a + j], KEY[a + 5 + j], u);\n  return mix(KEY[a + 4], KEY[a + 9], u);\n}\n// Corn and soybeans run from ploughing to stubble, alfalfa stays green. Winter wheat is gold by June and sown again in autumn.\nfunction stageOf(crop, k, off) {\n  if (crop === 2) return fr(0.6 + 0.72 * k + off);\n  if (crop === 3) return 0.38 + 0.06 * sin(k * 9 + off * 20) + 0.14 * sm(0.75, 1, k);\n  return cl(0.86 * k + off - (crop ? 0.06 : 0), 0, 0.985);\n}\n\n// The river, in section units (an LED each at Fields 2), and the signed distance across it.\nconst rx = (y) => -39 + 13 * exp(-(((y - 16) / 24) ** 2)) + 2.5 * sin(y * 0.09 + 1) + 0.06 * y;\nfunction rd(wx, wy) {\n  const s = rx(wy + 0.5) - rx(wy - 0.5);\n  return (wx - rx(wy)) / sqrt(1 + s * s);\n}\n// The eight sections in view at the start, left then right, top down. Each is a crop, how far ahead it is,\n// a second crop on the other half and how far ahead that is, and the corner of the farmstead (-1 for none).\nconst OPEN = [\n  [0, 0.2, -1, 0, -1], [3, 0, -1, 0, 2], [2, 0.02, -1, 0, -1], [0, 0.19, 1, 0, -1],\n  [0, 0.32, -1, 0, -1], [1, 0, -1, 0, 1], [3, 0.3, 2, 0.06, 2], [1, 0.18, -1, 0, -1],\n];\nfunction spec(ci, cj) {\n  if (ci >= -1 && ci \u003c= 0 && cj >= -2 && cj \u003c= 1) {\n    const o = OPEN[(cj + 2) * 2 + ci + 1];\n    return { strips: 0, crop: o[0], off: o[1], crop2: o[2], off2: o[3], farm: o[4] };\n  }\n  const h = (k) => hash(ci * 31 + k, cj * 17 + 5);\n  return { strips: h(1) \u003c 0.14, crop: floor(h(2) * 4), off: h(3) * 0.3, crop2: h(4) \u003c 0.25 ? floor(h(5) * 4) : -1, off2: h(6) * 0.3, farm: h(7) \u003c 0.45 ? floor(h(8) * 4) : -1 };\n}\n\n// Per LED: its field, angle and distance from that pivot, how much of it is field; field LEDs grouped by field.\nconst FID = new Int16Array(N), ANG = new Float32Array(N), RAD = new Float32Array(N), COV = new Float32Array(N), FP = new Int32Array(N);\nconst BASE = new Float32Array(N * 3), ALT = new Float32Array(N * 3), WET = new Float32Array(N), F = new Float32Array(N * 3), C3 = new Float64Array(3);\n// Cloud noise that tiles every 64.\nconst CN = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = k & 63, y = k >> 6;\n  CN[k] = 0.55 * vn(x / 8, y / 8, 8) + 0.3 * vn(x / 4 + 9, y / 4, 16) + 0.15 * vn(x / 2, y / 2 + 7, 32);\n}\nfunction cloud(u, v) {\n  const x0 = floor(u), y0 = floor(v), fx = u - x0, fy = v - y0, a = x0 & 63, a1 = (x0 + 1) & 63, b = (y0 & 63) \u003c\u003c 6, b1 = ((y0 + 1) & 63) \u003c\u003c 6;\n  return mix(mix(CN[b + a], CN[b + a1], fx), mix(CN[b1 + a], CN[b1 + a1], fx), fy);\n}\n\nexport function setup(params) {\n  params.s = { z: -1, k1: -1, t: 0, rt: 0, ox: 20, oy: 30, mist: 0, fields: [], sec: new Map(), tr: [], dust: [], duster: null, spray: [] };\n}\n\nfunction sectionAt(S, wx, wy) {\n  const ci = floor(wx / SEC), cj = floor(wy / SEC), key = ci * 1000 + cj;\n  let s = S.sec.get(key);\n  if (!s) {\n    const sp = spec(ci, cj), cx = ci * SEC + 16, cy = cj * SEC + 16, sd = rd(cx, cy);\n    s = { ci, cj, sp, f: -1, cx, cy, sd };\n    S.sec.set(key, s);\n  }\n  return s;\n}\n\n// The fields for this height, and each LED's place in them.\nfunction layout(S, k3) {\n  const z = (S.z = k3 / 2), fs = (S.fields = []);\n  S.sec.clear();\n  for (let cj = floor(-2 * z) - 1; cj \u003c= ceil(2 * z); cj++)\n    for (let ci = floor(-z) - 1; ci \u003c= ceil(z); ci++) {\n      const s = sectionAt(S, ci * SEC + 1, cj * SEC + 1), sp = s.sp;\n      if (sp.strips || abs(s.sd) \u003c 6.5) continue;\n      const id = fs.length, sg = s.sd > 0 ? 1 : -1, h = (k) => hash(ci * 13 + k, cj * 7 + 3);\n      // Where the river and its trees cut the circle, the arm swings to and fro over what is left.\n      let run = 0, best = 0, start = 0, first = -1;\n      const ok = (k) => rd(s.cx + RW * 0.97 * cos((k * TAU) / 96), s.cy + RW * 0.97 * sin((k * TAU) / 96)) * sg > 4.8;\n      for (let k = 0; k \u003c 192; k++) {\n        if (ok(k % 96)) {\n          if (!run) start = k;\n          if (++run > best && run \u003c= 96) (best = run), (first = start);\n        } else run = 0;\n      }\n      if (best \u003c 16) continue;\n      const f = { id, s, sg, cx: 32.5 + s.cx / z, cy: 64.5 + s.cy / z, R: RW / z, crop: sp.crop, off: sp.off, crop2: sp.crop2, off2: sp.off2, sa: h(1) * TAU };\n      Object.assign(f, { sd: h(2) \u003c 0.5 ? 1 : -1, om: TAU / (16 + 10 * h(3)), a: h(4) * TAU, tint: 0.93 + 0.12 * h(5), boost: 0, wipe: 0, a0: 0, span: TAU, rel: 0 });\n      Object.assign(f, { harv: 0, h: 0, h0: 0.3 + 0.4 * h(6), hs: h(7) * TAU, hd: h(8) \u003c 0.5 ? 1 : -1, hst: 0, ht: 0, g: 1, n0: 0, n1: 0, grow: 0 });\n      if (best \u003c 96) Object.assign(f, { wipe: 1, a0: ((first + 1) * TAU) / 96, span: ((best - 2) * TAU) / 96, rel: h(4) * ((best - 2) * TAU) / 96 }), (f.a = f.a0 + f.rel);\n      s.f = id;\n      fs.push(f);\n    }\n  for (let i = 0; i \u003c N; i++) {\n    const wx = ((i & 63) - 32) * z, wy = ((i >> 6) - 64) * z, s = sectionAt(S, wx, wy);\n    FID[i] = -1;\n    COV[i] = 0;\n    if (s.f \u003c 0) continue;\n    const f = fs[s.f], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy);\n    const c = cl((RW - dr) / z + 0.5, 0, 1) * cl((rd(wx, wy) * f.sg - 4.6) / z + 0.5, 0, 1);\n    if (c \u003c= 0) continue;\n    (FID[i] = f.id), (COV[i] = c), (ANG[i] = md(atan2(dy, dx))), (RAD[i] = dr / z);\n  }\n  for (const f of fs) f.n1 = 0;\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) fs[FID[i]].n1++;\n  let n = 0;\n  for (const f of fs) (f.n0 = n), (n += f.n1), (f.n1 = f.n0);\n  for (let i = 0; i \u003c N; i++) if (FID[i] >= 0) FP[fs[FID[i]].n1++] = i;\n  const vr = [], hr = [];\n  for (let m = -4; m \u003c= 4; m++) {\n    const x = 32.5 + (m * SEC) / z, y = 64.5 + (m * SEC) / z;\n    if (x > 2 && x \u003c 62) vr.push(x);\n    if (y > 2 && y \u003c 126) hr.push(y);\n  }\n  S.tr = [0, 1].map((k) => ({ v: k === 0, c: k ? hr[min(hr.length - 1, 2)] : vr[floor(vr.length / 2)], p: k ? 20 : 100, d: k ? 1 : -1, acc: 0 }));\n  S.dust = [];\n}\n\n// What stands on the land: trees along the river and in the farmsteads' windbreaks (1), or a farmhouse roof (2)\n// with its grain bins (3). 0 is open ground.\nfunction objAt(S, wx, wy) {\n  const r = abs(rd(wx, wy));\n  if (r > 1.1 && r \u003c 4.4 && vn(wx * 0.55 + 5, wy * 0.55) > 0.22 + 0.11 * r) return 1;\n  const s = sectionAt(S, wx, wy), c = s.sp.farm;\n  if (c \u003c 0 || s.sp.strips) return 0;\n  const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, u = c & 1 ? SEC - lx : lx, v = c & 2 ? SEC - ly : ly;\n  if (u \u003c 1 || v \u003c 1) return 0;\n  if ((u \u003c 8.6 && v \u003c 2.7) || (u \u003c 2.7 && v \u003c 8.6)) return hash(floor(u * 1.4), floor(v * 1.4) + c) \u003c 0.85 ? 1 : 0;\n  if (u > 3.4 && u \u003c 5.3 && v > 3.4 && v \u003c 5.1) return 2;\n  if ((u - 6.4) ** 2 + (v - 3.7) ** 2 \u003c 0.7 || (u - 3.7) ** 2 + (v - 6.4) ** 2 \u003c 0.7) return 3;\n  return 0;\n}\n\n// Round bales lying on the windrows of a stubble field.\nfunction bale(f, wx, wy) {\n  const dx = wx - f.s.cx, dy = wy - f.s.cy, dr = sqrt(dx * dx + dy * dy);\n  if (dr > RW - 1 || dr \u003c 2) return 0;\n  const q = dr / 3.5, k = floor(q), arc = md(atan2(dy, dx) - f.sa) * dr, c = floor(arc / 4.5);\n  return abs(q - k - 0.5) * 3.5 \u003c 0.55 && abs(arc / 4.5 - c - 0.5) * 4.5 \u003c 0.6 && arc \u003c 4.2 * dr && hash(k, c + f.id * 50) \u003c 0.75 ? 1 : 0;\n}\n\n// The picture that stays put between knob turns: land, roads, river, farmsteads and each field at its point in the season.\nfunction paint(S, k1) {\n  const z = S.z, fs = S.fields, C = C3, L = [mix(156, 172, sm(0, 0.4, k1)), mix(146, 148, k1), mix(100, 106, k1)];\n  const leaf = [mix(34, 132, sm(0.72, 0.92, k1)), mix(66, 102, sm(0.72, 0.92, k1)), 38];\n  for (const f of fs) {\n    f.v = stageOf(f.crop, k1, f.off);\n    f.v2 = f.crop2 \u003c 0 ? f.v : stageOf(f.crop2, k1, f.off2);\n    f.c1 = [0, 0, 0];\n    f.c2 = [0, 0, 0];\n    f.a1 = stageCol(f.v, f.c1);\n    f.a2 = stageCol(f.v2, f.c2);\n    f.grow = (f.v > 0.1 && f.v \u003c 0.57) || (f.v2 > 0.1 && f.v2 \u003c 0.57) ? 1 : 0;\n    const hv = f.crop2 \u003c 0 && f.v > 0.6 && f.v \u003c 0.77 ? 1 : 0;\n    if (hv !== f.harv) Object.assign(f, { harv: hv, h: f.h0, hst: 0, g: 1 });\n  }\n  const ringA = sm(1.9, 2.6, 3 / z);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, wx = (x - 32) * z, wy = (y - 64) * z, s = sectionAt(S, wx, wy), sp = s.sp, r = rd(wx, wy), gr = 0.93 + 0.1 * vn(wx * 0.4, wy * 0.4) + 0.04 * hash(x, y);\n    for (let j = 0; j \u003c 3; j++) C[j] = L[j] * gr;\n    if (abs(r) \u003c 11) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], PASTURE[j] * gr, sm(11, 5, abs(r)) * 0.7);\n    if (sp.strips) {\n      const q = hash(s.ci, s.cj + 3) \u003c 0.5 ? wx : wy, st = floor(q / 4.5) & 1;\n      stageCol(st ? stageOf(2, k1, sp.off) : 0.86, C3);\n      for (let j = 0; j \u003c 3; j++) C[j] *= gr;\n    }\n    const fi = FID[i];\n    if (fi >= 0) {\n      const f = fs[fi], dx = wx - s.cx, dy = wy - s.cy, dr = sqrt(dx * dx + dy * dy), cv = COV[i];\n      const side = f.crop2 \u003c 0 ? 0 : cl((dx * sin(f.sa) - dy * cos(f.sa)) / z + 0.5, 0, 1);\n      const amp = mix(f.a1, f.a2, side) * ringA, tk = abs(fr((dr * 5) / RW + 0.5) - 0.5) * (RW / 5 / z);\n      let m = f.tint * (1 + amp * cos((dr * TAU) / 3)) * (0.95 + 0.1 * vn(wx * 0.3 + f.id * 7, wy * 0.3));\n      if (dr > RW * 0.12) m *= 1 - 0.2 * cl(1 - tk * 1.6, 0, 1);\n      m *= 1 - 0.15 * cl(1 - abs(dr - RW + 0.5) / z, 0, 1);\n      const v = side > 0.5 ? f.v2 : f.v, wr = v > 0.76 && v \u003c 0.92 ? cl(1 - abs(fr(dr / 3.5) - 0.5) * (3.5 / z) * 1.8, 0, 1) : 0;\n      for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], mix(f.c1[j], f.c2[j], side) * m * (1 - 0.14 * wr), cv);\n      if (v > 0.76 && v \u003c 0.92) {\n        if (bale(f, wx, wy)) (C[0] = 196), (C[1] = 158), (C[2] = 76);\n        else if (bale(f, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.55;\n      }\n      if (dr \u003c 0.9) (C[0] = 170), (C[1] = 172), (C[2] = 164);\n      // Cut stubble, for a field the combine is in: paler, with a windrow down the middle of each pass.\n      if (f.harv) {\n        const kb = (RW - dr) / BAND, w2 = cl(1 - abs(fr(kb) - 0.5) * (BAND / z) * 1.6, 0, 1), m2 = f.tint * (0.96 + 0.08 * vn(wx * 0.5, wy * 0.5)) * (1 - 0.18 * w2) * (dr > RW * 0.12 ? 1 - 0.15 * cl(1 - tk * 1.6, 0, 1) : 1);\n        ALT[o] = 230 * m2;\n        ALT[o + 1] = 216 * m2;\n        ALT[o + 2] = 166 * m2;\n      }\n    }\n    const ob = objAt(S, wx, wy);\n    if (!ob && objAt(S, wx - z, wy - z)) for (let j = 0; j \u003c 3; j++) C[j] *= 0.6;\n    if (ob === 1) for (let j = 0; j \u003c 3; j++) C[j] = leaf[j] * (0.8 + 0.4 * vn(wx * 1.3, wy * 1.3));\n    else if (ob === 2) (C[0] = 214), (C[1] = 208), (C[2] = 198);\n    else if (ob === 3) (C[0] = 196), (C[1] = 202), (C[2] = 206);\n    const aw = cl(1.25 - abs(r) / z, 0, 1);\n    if (aw > 0) for (let j = 0; j \u003c 3; j++) C[j] = mix(C[j], WATER[j], aw);\n    const lx = wx - s.ci * SEC, ly = wy - s.cj * SEC, dp = min(lx, SEC - lx, ly, SEC - ly) / z, rc = x && y ? cl(0.6 / z + 0.5 - dp, 0, 1) : 0;\n    for (let j = 0; j \u003c 3; j++) BASE[o + j] = mix(C[j], GRAVEL[j], rc);\n  }\n}\n\nfunction startWet(S) {\n  for (const f of S.fields)\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let age = 99;\n      if (f.grow) {\n        if (!f.wipe) age = md((f.a - ANG[i]) * f.sd) / f.om;\n        else {\n          const r = md(ANG[i] - f.a0), p = f.rel;\n          if (r \u003c= f.span) age = (f.sd > 0 ? (r \u003c= p ? p - r : p + r) : r >= p ? r - p : 2 * f.span - r - p) / f.om;\n        }\n      }\n      WET[i] = exp(-age / TD);\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 2, 4), ts = cl(k[1], 0.2, 3) / 2, rt = cl(dt || 0, 0, 0.1), d = rt * ts;\n  let fresh = 0;\n  if (abs(k3 / 2 - S.z) > 0.004) layout(S, k3), (fresh = 1);\n  if (fresh || abs(k1 - S.k1) > 0.002) paint(S, k1), (S.k1 = k1);\n  if (fresh) startWet(S);\n  (S.k4 = cl(k[3], 0, 1)), (S.t += d), (S.rt += rt);\n  const bp = input.btnPressed || [];\n  if (bp[0]) {\n    for (const f of S.fields) f.boost = f.wipe ? 2 * f.span : TAU;\n    S.mist = 3;\n  }\n  if (bp[1] && !S.duster) {\n    const xs = S.fields.map((f) => f.cx).filter((x) => x > 4 && x \u003c 60), x = xs.length ? xs[floor(rnd() * xs.length)] + (rnd() - 0.5) * 6 : 32, dn = rnd() \u003c 0.5;\n    S.duster = { x, y: dn ? -8 : H + 8, vy: dn ? 30 : -30, acc: 0 };\n  }\n  S.mist = max(0, S.mist - rt);\n  (S.ox += 2 * d), (S.oy += 1.4 * d);\n  const dec = exp(-d / TD);\n  for (const f of S.fields) {\n    const on = f.grow || f.boost > 0, D = f.om * d;\n    if (on) f.boost -= D;\n    let lo = 1, hi = 0;\n    if (on && !f.wipe) (lo = f.a), (f.a = md(f.a + f.sd * D));\n    else if (on) {\n      const p = f.rel;\n      let q = p + f.sd * D;\n      (lo = min(p, q)), (hi = max(p, q));\n      if (q > f.span) (q = 2 * f.span - q), (f.sd = -1), (lo = min(p, q)), (hi = f.span);\n      if (q \u003c 0) (q = -q), (f.sd = 1), (lo = 0), (hi = max(p, q));\n      (f.rel = q), (f.a = f.a0 + q);\n    }\n    for (let n = f.n0; n \u003c f.n1; n++) {\n      const i = FP[n];\n      let w = WET[i] * dec;\n      if (on) {\n        if (!f.wipe) {\n          if (md((ANG[i] - lo) * f.sd) \u003c= D) w = 1;\n        } else {\n          const r = md(ANG[i] - f.a0);\n          if (r >= lo && r \u003c= hi) w = 1;\n        }\n      }\n      WET[i] = w;\n    }\n    // The combine goes round at a steady walk, so the inner rings take less time.\n    if (f.harv) {\n      if (f.hst === 0) {\n        const rh = max(1.5, f.R - (BAND / S.z) * (floor(f.h) + 0.5));\n        f.h += (d * 5) / (TAU * rh * S.z);\n        if (f.h >= ceil(RW / BAND)) (f.hst = 1), (f.ht = 14);\n      } else if (f.hst === 1) {\n        if ((f.ht -= d) \u003c= 0) f.hst = 2;\n      } else if ((f.g -= d / 3) \u003c= 0) Object.assign(f, { hst: 0, h: 0, g: 1 });\n    }\n  }\n  // Trucks on the gravel roads and the dust they leave hanging.\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    tr.p += tr.d * 6 * d;\n    const lim = tr.v ? H : W;\n    if (tr.p > lim + 30) tr.p = -30;\n    if (tr.p \u003c -30) tr.p = lim + 30;\n    if ((tr.acc += d) > 0.1) {\n      tr.acc = 0;\n      S.dust.push({ x: tr.v ? tr.c : tr.p, y: tr.v ? tr.p : tr.c, t: S.t });\n    }\n  }\n  S.dust = S.dust.filter((p) => S.t - p.t \u003c 3.5);\n  const du = S.duster;\n  if (du) {\n    du.y += du.vy * rt;\n    if ((du.acc += rt) > 0.04) (du.acc = 0), S.spray.push({ x: du.x, y: du.y - Math.sign(du.vy) * 3, t: S.rt });\n    if (du.y \u003c -20 || du.y > H + 20) S.duster = null;\n  }\n  S.spray = S.spray.filter((p) => S.rt - p.t \u003c 4);\n}\n\nfunction blend(x, y, c, a) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], min(1, a));\n}\nfunction shade(x, y, k) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] *= k;\n}\n// A soft dot spread over the four LEDs around it.\nfunction puff(x, y, c, a) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  blend(x0, y0, c, a * (1 - fx) * (1 - fy)), blend(x0 + 1, y0, c, a * fx * (1 - fy)), blend(x0, y0 + 1, c, a * (1 - fx) * fy), blend(x0 + 1, y0 + 1, c, a * fx * fy);\n}\n\nconst SILVER = [214, 220, 226], MIST = [236, 242, 248], DUST = [246, 238, 216], RED = [204, 52, 36], YEL = [244, 212, 46], WHITE = [246, 248, 250], TANK = [236, 224, 196], TRUCK = [56, 64, 84];\nconst PLANE = [0, 1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, 0, -1, 0, -2, -1, -2, 1, -2], BODY = [250, 226, 80];\nconst PASTURE = [96, 118, 70], WATER = [84, 120, 146], GRAVEL = [206, 196, 168], CLOUD = [250, 250, 248], CLOUD_SH = [150, 160, 182];\n// How close a point along an arm of length R is to one of its towers.\nconst tw = (u, R) => cl(1 - abs(fr((u * 5) / R + 0.5) - 0.5) * (R / 5) * 1.5, 0, 1) * (u > R * 0.12 ? 1 : 0);\n// The arm and its shadow, its towers, the mist trailing it and the end gun's spray.\nfunction arm(S, f) {\n  const R = f.R, ca = cos(f.a), sa = sin(f.a), on = f.grow || f.boost > 0, ms = (on ? 1 : 0) * (1 + (S.mist > 0 ? 1.2 : 0)), tf = floor(S.rt * 7);\n  const x0 = max(0, floor(min(f.cx, f.cx + R * ca) - 3)), x1 = min(W - 1, ceil(max(f.cx, f.cx + R * ca) + 3));\n  const y0 = max(0, floor(min(f.cy, f.cy + R * sa) - 3)), y1 = min(H - 1, ceil(max(f.cy, f.cy + R * sa) + 3));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const qx = x + 0.5 - f.cx, qy = y + 0.5 - f.cy, t = qx * ca + qy * sa, c = qy * ca - qx * sa, ts = t - ca - sa, cs = c - ca + sa;\n      const o = (y * W + x) * 3, as = ts > -0.5 && ts \u003c R + 0.5 ? cl(1 - abs(cs), 0, 1) : 0, aa = t > -0.5 && t \u003c R + 0.3 ? cl(1.1 - abs(c), 0, 1) : 0;\n      if (as > 0) for (let j = 0; j \u003c 3; j++) F[o + j] *= 1 - 0.4 * as * (1 + 0.5 * tw(ts, R));\n      if (ms > 0 && t > R * 0.15 && t \u003c R + 2.5 && c * f.sd \u003c -0.3 && c * f.sd > (t > R ? -2.2 : -1.8)) {\n        const sp = hash(x * 31 + y, tf + f.id * 977);\n        blend(x, y, MIST, ms * (0.13 + (sp > 0.74 ? 0.5 : 0)) * (t > R ? 1.3 : 1));\n      }\n      if (aa > 0) {\n        const e = 0.6 * tw(t, R);\n        for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(SILVER[j], 250, e), 0.9 * aa);\n      }\n    }\n  // The wheeled towers, each with its short shadow.\n  for (let k = 1; k \u003c= 5; k++) {\n    const x = f.cx + ((R * k) / 5 - 0.3) * ca, y = f.cy + ((R * k) / 5 - 0.3) * sa;\n    shade(x + 1, y + 1, 0.55), blend(x, y, WHITE, 0.85);\n  }\n  blend(f.cx, f.cy, WHITE, 1);\n  shade(f.cx + 1, f.cy + 1, 0.55);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.z \u003c 0) return;\n  const fs = S.fields;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const fi = FID[i];\n    let g = 0;\n    if (fi >= 0) {\n      const f = fs[fi];\n      if (f.harv && f.hst) g = f.g;\n      else if (f.harv) {\n        const rel = md((ANG[i] - f.hs) * f.hd) / TAU;\n        if (floor((f.R - RAD[i]) / (BAND / S.z)) + rel \u003c f.h) g = 1;\n      }\n    }\n    const w = WET[i] > 0.004 ? WET[i] ** 0.8 * (fi >= 0 ? COV[i] : 0) : 0, k = 1 - 0.5 * w;\n    for (let j = 0; j \u003c 3; j++) {\n      let c = BASE[o + j];\n      if (g > 0) c = mix(c, ALT[o + j], g * COV[i]);\n      F[o + j] = c * k * (1 + (j - 1) * 0.08 * w);\n    }\n  }\n  for (const f of fs) {\n    if (f.harv && f.hst === 0) {\n      const z = S.z, rh = max(1.5, f.R - (BAND / z) * (floor(f.h) + 0.5)), th = f.hs + f.hd * fr(f.h) * TAU, x = f.cx + rh * cos(th), y = f.cy + rh * sin(th);\n      for (let j = 1; j \u003c 9; j++) {\n        const b = th - f.hd * (j * 0.7) / rh;\n        puff(f.cx + rh * cos(b) + 0.3 * j, f.cy + rh * sin(b) + 0.4 * j, DUST, 0.32 * (1 - j / 9));\n      }\n      shade(x + 1, y + 1, 0.5), shade(x + 2, y + 1, 0.6);\n      blend(x, y, RED, 1), blend(x + 1, y, TANK, 1);\n    }\n  }\n  for (const f of fs) arm(S, f);\n  for (const p of S.dust) {\n    const a = S.t - p.t;\n    const e = 0.8 * exp(-a / 1.7), sp = 0.4 + 0.6 * a, x = p.x + a * 1.7, y = p.y + a * 1.2;\n    puff(x, y, DUST, e), puff(x + sp, y + sp * 0.5, DUST, e * 0.6), puff(x - sp * 0.5, y + sp, DUST, e * 0.6);\n  }\n  for (const tr of S.tr) {\n    if (tr.c === undefined) continue;\n    const x = tr.v ? tr.c : tr.p, y = tr.v ? tr.p : tr.c;\n    shade(x + 1, y + 1, 0.55);\n    blend(x, y, TRUCK, 1);\n  }\n  for (const p of S.spray) {\n    const a = S.rt - p.t;\n    const e = 0.6 * exp(-a / 1.5), sp = 1.2 + 0.9 * a, x = p.x + a * 1.2, y = p.y + a * 0.8;\n    puff(x, y, MIST, e * 0.7), puff(x - sp, y, MIST, e), puff(x + sp, y, MIST, e);\n  }\n  const du = S.duster;\n  if (du) {\n    // A biplane seen from above: nose, wings, body and tail, with its shadow close by.\n    const sy = Math.sign(du.vy), X = floor(du.x), Y = floor(du.y);\n    for (let k = 0; k \u003c 20; k += 2) shade(X + PLANE[k] + 3, Y + PLANE[k + 1] * sy + 4, 0.55);\n    for (let k = 0; k \u003c 20; k += 2) blend(X + PLANE[k], Y + PLANE[k + 1] * sy, PLANE[k + 1] === 0 && PLANE[k] ? YEL : BODY, 1);\n  }\n  // Clouds and their shadows, lit from the upper left.\n  const thr = 0.69 - 0.2 * S.k4, ox = S.ox, oy = S.oy;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const x = i & 63, y = i >> 6, u = (x - ox) * 0.3, v = (y - oy) * 0.27;\n    const sh = sm(thr, thr + 0.06, cloud(u - 1.8, v - 2.4)), n = cloud(u, v), ca = sm(thr, thr + 0.05, n);\n    let k = 1 - 0.45 * sh;\n    for (let j = 0; j \u003c 3; j++) F[o + j] *= k * (j === 2 ? 1 + 0.05 * sh : 1);\n    if (ca > 0) {\n      const lit = cl(0.7 - (n - cloud(u + 0.5, v + 0.5)) * 12 + 2 * (n - thr), 0, 1);\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], mix(CLOUD_SH[j], CLOUD[j], lit), 0.92 * ca);\n    }\n    const lt = 1.02 - 0.09 * (x / W) - 0.07 * (y / H);\n    display.setPixel(x, y, min(255, F[o] * lt + 8) | 0, min(255, F[o + 1] * lt * 0.98 + 8) | 0, min(255, F[o + 2] * lt * 0.95 + 10) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Speed=0.2..3, Fields=2..4, Clouds=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"Spring at 0: ploughed loam, new corn in green rings, deep green alfalfa and one circle of winter wheat already gold, a combine in it. From a half to three quarters the corn turns gold and the combines go round it; at 1 it is late autumn, grey stubble and disked brown with the new wheat coming up green and the trees by the river gone brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 an arm goes round in sixteen to twenty-six seconds and its wet wedge dries over about a third of a turn; 0.2 is ten times slower. Everything else keeps the same pace except the crop duster."},{"name":"Fields","min":2,"max":4,"about":"How many sections fit across: two at 2, each a circle about thirty LEDs wide, and up to four at 4, as from higher up, with more of the river and the farms around it."},{"name":"Clouds","min":0,"max":1,"about":"A few fair-weather puffs at 0, broken cumulus at 1, each cloud with its shadow lying down and to the right of it in the low sun."}],"start":[0,2,2,0.06],"measures":{"motion":0.0527,"detail":0.0683,"edges":0.2287,"complexity":2.4956,"coverage":1,"colour":0.1929,"drift":0.0389},"knobResponse":[0.1272,0.0462,0.1999,0.1865]},{"slug":"change-ringing","title":"Change Ringing","family":"rhythm","round":20,"note":"종탑 종실에서 종들이 바퀴째 한 바퀴씩 돌며 칠 때마다 번쩍이고, 그 아래로 종마다 제 색의 선이 체인지 한 줄에 한 칸씩 Plain Bob 을 따라 지그재그로 흘러내려요. 트레블의 선만 빨강이고, K1 을 누르면 「Bob!」을 불러 다음 리드 엔드에서 2번 자리 대신 4번 자리를 만들어요.","idea":"In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.","buttons":"K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.","code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-change-ringing","type":"code","name":"change-ringing","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lines","min":0,"max":1,"about":"Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one."},{"name":"Speed","min":0.25,"max":3,"about":"The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row."},{"name":"Bells","min":4,"max":8,"about":"How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds."},{"name":"Method","min":-1,"max":1,"about":"-1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice."}],"start":[0,2,4,0.06],"measures":{"motion":0.4844,"detail":0.08,"edges":0.458,"complexity":1.2457,"coverage":0.5293,"colour":0.2305,"drift":0.0504},"knobResponse":[0.0499,0.1129,0.1732,0.0613]},{"slug":"chemical-garden","title":"Chemical Garden","family":"chemistry","round":21,"note":"물유리 용액을 채운 키 큰 유리컵 모래 위에 금속염 결정을 떨어뜨리면 코발트의 청보라나 철의 녹슨 주황 같은 속 빈 광물 관이 흔들리며 수면까지 자라요. 컵이 차면 빈 컵이 밀려 들어와 다시 자라요.","idea":"Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.","buttons":"K1 tap slides the glass away and brings in a fresh one.","code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","layer":{"id":"layer-chemical-garden","type":"code","name":"chemical-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salts","min":0,"max":4,"about":"What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps."},{"name":"Crystals","min":5,"max":20,"about":"How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once."},{"name":"Strength","min":-1,"max":1,"about":"How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches."}],"start":[0,2,5,0.06],"measures":{"motion":0.044,"detail":0.0682,"edges":0.4036,"complexity":2.0411,"coverage":0.7726,"colour":0.152,"drift":0.0448},"knobResponse":[0.0762,0.0506,0.0924,0.0773]},{"slug":"chimera-state","title":"Chimera State","family":"rhythm","round":35,"note":"똑같은 위상 진동자 256개가 고리에 앉아 서로 당기는데, 고리가 발맞춰 도는 30% 와 위상이 흩어진 나머지로 갈라져요. 위 20줄은 진동자마다 위상을 제자리에 점으로 찍어 매끈한 호 옆에 흩뿌린 점을 보이고, 그 아래로 한 줄이 한 순간이라 가운데로 하늘색 띠가 곧게 흐르고 양옆은 한 바퀴씩 뒤처지는 진동자의 어두운 획으로 채워져요. K3 은 위상 지연을 80도에서 88도로 돌려 발맞춘 띠를 19열에서 9열로 좁히고, K1 을 누르면 새 무작위 출발에서 키메라가 다시 자라요.","idea":"256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.","buttons":"K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.","code":"// ===== Patternflow pattern =====\n// Title:   Chimera State\n// Family:  rhythm\n// Idea:    256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Chimera states (Yoshiki Kuramoto and Dorjsuren Battogtokh, 2002)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4\n//\n// Knob 1: Hue. Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green.\n// Knob 2: Speed. Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second.\n// Knob 3: Lag. The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls.\n// Knob 4: Stride. Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle.\n// Buttons: K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.\n\n// The ring form is Daniel Abrams and Steven Strogatz's (2004): N identical\n// phase oscillators at x_j = -pi + 2 pi j / N, each pulled by all the others\n// through the kernel G(x) = (1 + A cos x) / 2 pi and a phase lag alpha,\n//   dθ_j/dt = ω - (2 pi / N) Σ_k G(x_j - x_k) sin(θ_j - θ_k + α),\n// their A = 0.995 and their start θ_j = 6 r_j exp(-0.76 x_j²), r_j uniform\n// in [-1/2, 1/2]. Every oscillator obeys the same law, yet the ring splits\n// into a stretch that moves in step and a stretch whose phases scatter.\nconst W = 64, H = 128, N = 256, PER = N / W, TOP = 20, Y0 = TOP + 1, ROWS = H - Y0;\nconst A = 0.995, STEP = 0.1, MAXSTEPS = 30, RATE = 4, HUE0 = 0.55;\nconst { min, floor, round, sqrt, sin, cos, exp, atan2, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (v, m) => v - m * round(v / m);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A new random draw of the Abrams-Strogatz start, its scattered hump at x0.\n// The part in step forms on the calm side, opposite x0; on the first draw\n// the columns are set to put it in the middle of the panel.\nfunction seed(P, x0, place) {\n  for (let j = 0; j \u003c N; j++) {\n    const d = wrap(-PI + (TAU * j) / N - x0, TAU);\n    P.th[j] = 6 * (Math.random() - 0.5) * exp(-0.76 * d * d);\n  }\n  if (place) {\n    P.xs = ((x0 + 2 * PI) / TAU) * W;\n    P.xs -= W * floor(P.xs / W);\n    P.col = round(P.xs) % W;\n  }\n  P.dead = 0;\n  P.age = 0;\n  P.lag = 84;\n}\n\n// The sum over k is the local field R_j e^{iΘ_j} = (1/N) Σ_k (1 + A cos(x_j\n// - x_k)) e^{iθ_k}, and with cos(x_j - x_k) = cos x_j cos x_k + sin x_j sin\n// x_k it is three sums over the ring, Σ e^{iθ}, Σ cos x e^{iθ} and\n// Σ sin x e^{iθ}, read off at each x_j: O(N) a step instead of O(N²). Then\n// dθ_j/dt = ω - R_j sin(θ_j - Θ_j + α).\nfunction deriv(P, t, d, frame) {\n  const { cx, sx, c: C, s: S } = P;\n  let p0r = 0, p0i = 0, pcr = 0, pci = 0, psr = 0, psi = 0;\n  for (let k = 0; k \u003c N; k++) {\n    const c = cos(t[k]), s = sin(t[k]);\n    C[k] = c;\n    S[k] = s;\n    p0r += c;\n    p0i += s;\n    pcr += cx[k] * c;\n    pci += cx[k] * s;\n    psr += sx[k] * c;\n    psi += sx[k] * s;\n  }\n  const ca = P.ca, sa = P.sa;\n  let wx = 0, wy = 0;\n  for (let j = 0; j \u003c N; j++) {\n    const rr = (p0r + A * (cx[j] * pcr + sx[j] * psr)) / N, ri = (p0i + A * (cx[j] * pci + sx[j] * psi)) / N;\n    const c = C[j], s = S[j];\n    d[j] = -((s * ca + c * sa) * rr - (c * ca - s * sa) * ri);\n    if (frame) {\n      const r2 = rr * rr + ri * ri;\n      wx += r2 * cx[j];\n      wy += r2 * sx[j];\n    }\n  }\n  if (frame) {\n    // The field is strongest over the part in step. Its centre xc, and the\n    // field's phase there, give the frame that turns with that part.\n    const xc = atan2(wy, wx), cc = cos(xc), sc = sin(xc);\n    P.xc = xc;\n    P.phi = atan2(p0i + A * (cc * pci + sc * psi), p0r + A * (cc * pcr + sc * psr));\n    P.z = sqrt(p0r * p0r + p0i * p0i) / N;\n  }\n}\n\n// One RK4 step of 0.1. The right side is never more than 1 + A in size, so\n// the step is far inside RK4's reach at every Lag. Before it the whole ring\n// is turned back by the phase of the part in step, which the equation does\n// not see (every oscillator is the same, so ω is free): that part's phases\n// stand still and only the scattered ones move.\nfunction step(P) {\n  const { th, k1, k2, k3, k4, tmp } = P, h = STEP;\n  // Each draw grows at 84 degrees for 100 time units, and only then does\n  // the lag move to the knob, a tenth of a degree per time unit. From the\n  // Abrams-Strogatz start right at 80 degrees, 6 draws in 30 fell into step\n  // everywhere within 65 time units; grown at 84 and brought down to 80 (or\n  // up to 88) after, none of 30 did in 1000. A sudden jump from 88 to 80 on\n  // a grown chimera ended 1 of 20, hence the slow turn.\n  P.age += h;\n  const want = P.age \u003c 100 ? 84 : P.lagKnob;\n  P.lag += cl(want - P.lag, -0.01, 0.01);\n  P.ca = cos((P.lag * PI) / 180);\n  P.sa = sin((P.lag * PI) / 180);\n  deriv(P, th, k1, true);\n  const phi = P.phi;\n  for (let j = 0; j \u003c N; j++) th[j] -= phi;\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k1[j];\n  deriv(P, tmp, k2, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k2[j];\n  deriv(P, tmp, k3, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + h * k3[j];\n  deriv(P, tmp, k4, false);\n  for (let j = 0; j \u003c N; j++) th[j] = wrap(th[j] + (h / 6) * (k1[j] + 2 * k2[j] + 2 * k3[j] + k4[j]), TAU);\n  // With 256 oscillators the chimera wanders round the ring, a few columns\n  // in a thousand time units. The history keeps the ring's own columns, so\n  // the wandering shows as a lean in the band; the panel as a whole slides\n  // a column after it once the part in step is three columns off the middle.\n  P.xs = wrap(P.xs + 0.002 * wrap(((P.xc + PI) / TAU) * W - P.xs, W), W);\n  if (abs(wrap(P.xs - P.col, W)) > 3) P.col = ((round(P.xs) % W) + W) % W;\n  // A draw can still fall into step everywhere, the other state this ring\n  // can rest in. After 30 time units of that, a new draw.\n  P.dead = P.z > 0.99 ? P.dead + h : 0;\n  if (P.dead > 30) seed(P, (TAU * P.col) / W, false);\n}\n\nconst osc = (P, c, k) => ((((P.col - W / 2 + c) * PER + k) % N) + N) % N;\n\n// A row of the history keeps one oscillator of every four, in the ring's\n// own columns.\nfunction record(P) {\n  P.head = (P.head + ROWS - 1) % ROWS;\n  const o = P.head * W;\n  for (let c = 0; c \u003c W; c++) P.hist[o + c] = P.th[c * PER + 1];\n}\n\nexport function setup(params) {\n  const cx = new Float64Array(N), sx = new Float64Array(N);\n  for (let j = 0; j \u003c N; j++) (cx[j] = cos(-PI + (TAU * j) / N)), (sx[j] = sin(-PI + (TAU * j) / N));\n  const f = () => new Float64Array(N);\n  params.s = {\n    cx, sx, th: f(), k1: f(), k2: f(), k3: f(), k4: f(), tmp: f(), c: f(), s: f(),\n    ca: 0, sa: 1, lag: 84, lagKnob: 80, age: 0, xc: PI, phi: 0, z: 0, xs: 0, col: 0, dead: 0,\n    hist: new Float32Array(ROWS * W), head: 0, clock: 0, since: 0, fresh: true,\n    hue: 0, speed: 2, stride: 1, pal: new Float32Array(256 * 3), dot: new Float32Array(256 * 3), palHue: NaN,\n    acc: new Float32Array(W * TOP * 3),\n  };\n  seed(params.s, 0, true);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 80, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.lagKnob = cl(k[2], 80, 88);\n  P.stride = cl(k[3], 0.8, 4);\n  if (P.fresh) {\n    // 150 time units to grow and reach the knob's lag; a draw that still\n    // falls into step is drawn again. Then the whole history is run once so\n    // the panel opens full: 5,780 steps at Stride 4, about 0.3 s once.\n    for (let tries = 0; tries \u003c 8; tries++) {\n      if (tries) seed(P, 0, true);\n      for (let i = 0; i \u003c 1500; i++) step(P);\n      if (P.z \u003c 0.9) break;\n    }\n    for (let r = 0; r \u003c ROWS; r++) {\n      for (let t = 0; t \u003c P.stride - 1e-9; t += STEP) step(P);\n      record(P);\n    }\n    P.fresh = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) seed(P, (TAU * P.col) / W, false);\n  P.clock += d * RATE * P.speed;\n  let n = 0;\n  for (; P.clock >= STEP && n \u003c MAXSTEPS; n++) {\n    step(P);\n    P.clock -= STEP;\n    P.since += STEP;\n    if (P.since >= P.stride - 1e-9) {\n      record(P);\n      P.since -= P.stride;\n    }\n  }\n  if (n === MAXSTEPS) P.clock = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pal, dot, hist, th, acc } = P;\n  if (P.palHue !== P.hue) {\n    // Phase round the colour wheel. In the history the brightness also\n    // follows the phase, full at the phase of the part in step and dark\n    // half a turn away, so each slip of a scattered oscillator is a dark\n    // stroke through its column.\n    for (let i = 0; i \u003c 256; i++) {\n      const t = (i / 256) * TAU;\n      hsv(P.hue + HUE0 + i / 256, 0.85, 0.5 + 0.5 * cos(t), pal, i * 3);\n      hsv(P.hue + HUE0 + i / 256, 0.75, 1, dot, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The present, in the top 20 rows: every oscillator a dot, its phase up\n  // and down against its place on the ring.\n  acc.fill(0);\n  for (let c = 0; c \u003c W; c++)\n    for (let k = 0; k \u003c PER; k++) {\n      const t = th[osc(P, c, k)], y = TOP / 2 - 0.5 + (t / PI) * (TOP / 2 - 0.5), y0 = floor(y), f = y - y0;\n      const q = (floor((t / TAU + 1) * 256) & 255) * 3;\n      if (y0 >= 0) {\n        const o = (y0 * W + c) * 3, a = 0.7 * (1 - f);\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n      if (y0 + 1 \u003c TOP) {\n        const o = ((y0 + 1) * W + c) * 3, a = 0.7 * f;\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n    }\n  for (let y = 0, o = 0; y \u003c TOP; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, acc[o] * 255), min(255, acc[o + 1] * 255), min(255, acc[o + 2] * 255));\n  for (let x = 0; x \u003c W; x++) display.setPixel(x, TOP, 0, 0, 0);\n  // The past: one row per moment, the newest at the top.\n  for (let r = 0; r \u003c ROWS; r++) {\n    const o = ((P.head + r) % ROWS) * W, c0 = P.col + W / 2;\n    for (let x = 0; x \u003c W; x++) {\n      const q = (floor((hist[o + ((c0 + x) % W)] / TAU + 1) * 256) & 255) * 3;\n      display.setPixel(x, Y0 + r, pal[q] * 255, pal[q + 1] * 255, pal[q + 2] * 255);\n    }\n  }\n}\n","layer":{"id":"layer-chimera-state","type":"code","name":"chimera-state","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chimera State\n// Family:  rhythm\n// Idea:    256 identical phase oscillators on a ring, each pulled by all the others and hardest by its near neighbours, split into a stretch that moves in step and a stretch whose phases scatter; the top 20 rows plot every phase against its place, a smooth arc beside a spray of dots, and below them each row is one moment, newest at the top, so the part in step runs down the middle as one smooth cyan band while the scattered sides fill with the dark strokes of oscillators slipping a turn behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Chimera states (Yoshiki Kuramoto and Dorjsuren Battogtokh, 2002)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4\n//\n// Knob 1: Hue. Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green.\n// Knob 2: Speed. Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second.\n// Knob 3: Lag. The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls.\n// Knob 4: Stride. Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle.\n// Buttons: K1 tap draws a new random start: two thirds of the ring are thrown out of step around a band about 45% wide, and in the next 30 time units, 4 s at Speed 2, the scattered stretch eats back into the band. Each new draw grows at 84 degrees for 100 time units before the lag returns to the knob.\n\n// The ring form is Daniel Abrams and Steven Strogatz's (2004): N identical\n// phase oscillators at x_j = -pi + 2 pi j / N, each pulled by all the others\n// through the kernel G(x) = (1 + A cos x) / 2 pi and a phase lag alpha,\n//   dθ_j/dt = ω - (2 pi / N) Σ_k G(x_j - x_k) sin(θ_j - θ_k + α),\n// their A = 0.995 and their start θ_j = 6 r_j exp(-0.76 x_j²), r_j uniform\n// in [-1/2, 1/2]. Every oscillator obeys the same law, yet the ring splits\n// into a stretch that moves in step and a stretch whose phases scatter.\nconst W = 64, H = 128, N = 256, PER = N / W, TOP = 20, Y0 = TOP + 1, ROWS = H - Y0;\nconst A = 0.995, STEP = 0.1, MAXSTEPS = 30, RATE = 4, HUE0 = 0.55;\nconst { min, floor, round, sqrt, sin, cos, exp, atan2, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (v, m) => v - m * round(v / m);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A new random draw of the Abrams-Strogatz start, its scattered hump at x0.\n// The part in step forms on the calm side, opposite x0; on the first draw\n// the columns are set to put it in the middle of the panel.\nfunction seed(P, x0, place) {\n  for (let j = 0; j \u003c N; j++) {\n    const d = wrap(-PI + (TAU * j) / N - x0, TAU);\n    P.th[j] = 6 * (Math.random() - 0.5) * exp(-0.76 * d * d);\n  }\n  if (place) {\n    P.xs = ((x0 + 2 * PI) / TAU) * W;\n    P.xs -= W * floor(P.xs / W);\n    P.col = round(P.xs) % W;\n  }\n  P.dead = 0;\n  P.age = 0;\n  P.lag = 84;\n}\n\n// The sum over k is the local field R_j e^{iΘ_j} = (1/N) Σ_k (1 + A cos(x_j\n// - x_k)) e^{iθ_k}, and with cos(x_j - x_k) = cos x_j cos x_k + sin x_j sin\n// x_k it is three sums over the ring, Σ e^{iθ}, Σ cos x e^{iθ} and\n// Σ sin x e^{iθ}, read off at each x_j: O(N) a step instead of O(N²). Then\n// dθ_j/dt = ω - R_j sin(θ_j - Θ_j + α).\nfunction deriv(P, t, d, frame) {\n  const { cx, sx, c: C, s: S } = P;\n  let p0r = 0, p0i = 0, pcr = 0, pci = 0, psr = 0, psi = 0;\n  for (let k = 0; k \u003c N; k++) {\n    const c = cos(t[k]), s = sin(t[k]);\n    C[k] = c;\n    S[k] = s;\n    p0r += c;\n    p0i += s;\n    pcr += cx[k] * c;\n    pci += cx[k] * s;\n    psr += sx[k] * c;\n    psi += sx[k] * s;\n  }\n  const ca = P.ca, sa = P.sa;\n  let wx = 0, wy = 0;\n  for (let j = 0; j \u003c N; j++) {\n    const rr = (p0r + A * (cx[j] * pcr + sx[j] * psr)) / N, ri = (p0i + A * (cx[j] * pci + sx[j] * psi)) / N;\n    const c = C[j], s = S[j];\n    d[j] = -((s * ca + c * sa) * rr - (c * ca - s * sa) * ri);\n    if (frame) {\n      const r2 = rr * rr + ri * ri;\n      wx += r2 * cx[j];\n      wy += r2 * sx[j];\n    }\n  }\n  if (frame) {\n    // The field is strongest over the part in step. Its centre xc, and the\n    // field's phase there, give the frame that turns with that part.\n    const xc = atan2(wy, wx), cc = cos(xc), sc = sin(xc);\n    P.xc = xc;\n    P.phi = atan2(p0i + A * (cc * pci + sc * psi), p0r + A * (cc * pcr + sc * psr));\n    P.z = sqrt(p0r * p0r + p0i * p0i) / N;\n  }\n}\n\n// One RK4 step of 0.1. The right side is never more than 1 + A in size, so\n// the step is far inside RK4's reach at every Lag. Before it the whole ring\n// is turned back by the phase of the part in step, which the equation does\n// not see (every oscillator is the same, so ω is free): that part's phases\n// stand still and only the scattered ones move.\nfunction step(P) {\n  const { th, k1, k2, k3, k4, tmp } = P, h = STEP;\n  // Each draw grows at 84 degrees for 100 time units, and only then does\n  // the lag move to the knob, a tenth of a degree per time unit. From the\n  // Abrams-Strogatz start right at 80 degrees, 6 draws in 30 fell into step\n  // everywhere within 65 time units; grown at 84 and brought down to 80 (or\n  // up to 88) after, none of 30 did in 1000. A sudden jump from 88 to 80 on\n  // a grown chimera ended 1 of 20, hence the slow turn.\n  P.age += h;\n  const want = P.age \u003c 100 ? 84 : P.lagKnob;\n  P.lag += cl(want - P.lag, -0.01, 0.01);\n  P.ca = cos((P.lag * PI) / 180);\n  P.sa = sin((P.lag * PI) / 180);\n  deriv(P, th, k1, true);\n  const phi = P.phi;\n  for (let j = 0; j \u003c N; j++) th[j] -= phi;\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k1[j];\n  deriv(P, tmp, k2, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + 0.5 * h * k2[j];\n  deriv(P, tmp, k3, false);\n  for (let j = 0; j \u003c N; j++) tmp[j] = th[j] + h * k3[j];\n  deriv(P, tmp, k4, false);\n  for (let j = 0; j \u003c N; j++) th[j] = wrap(th[j] + (h / 6) * (k1[j] + 2 * k2[j] + 2 * k3[j] + k4[j]), TAU);\n  // With 256 oscillators the chimera wanders round the ring, a few columns\n  // in a thousand time units. The history keeps the ring's own columns, so\n  // the wandering shows as a lean in the band; the panel as a whole slides\n  // a column after it once the part in step is three columns off the middle.\n  P.xs = wrap(P.xs + 0.002 * wrap(((P.xc + PI) / TAU) * W - P.xs, W), W);\n  if (abs(wrap(P.xs - P.col, W)) > 3) P.col = ((round(P.xs) % W) + W) % W;\n  // A draw can still fall into step everywhere, the other state this ring\n  // can rest in. After 30 time units of that, a new draw.\n  P.dead = P.z > 0.99 ? P.dead + h : 0;\n  if (P.dead > 30) seed(P, (TAU * P.col) / W, false);\n}\n\nconst osc = (P, c, k) => ((((P.col - W / 2 + c) * PER + k) % N) + N) % N;\n\n// A row of the history keeps one oscillator of every four, in the ring's\n// own columns.\nfunction record(P) {\n  P.head = (P.head + ROWS - 1) % ROWS;\n  const o = P.head * W;\n  for (let c = 0; c \u003c W; c++) P.hist[o + c] = P.th[c * PER + 1];\n}\n\nexport function setup(params) {\n  const cx = new Float64Array(N), sx = new Float64Array(N);\n  for (let j = 0; j \u003c N; j++) (cx[j] = cos(-PI + (TAU * j) / N)), (sx[j] = sin(-PI + (TAU * j) / N));\n  const f = () => new Float64Array(N);\n  params.s = {\n    cx, sx, th: f(), k1: f(), k2: f(), k3: f(), k4: f(), tmp: f(), c: f(), s: f(),\n    ca: 0, sa: 1, lag: 84, lagKnob: 80, age: 0, xc: PI, phi: 0, z: 0, xs: 0, col: 0, dead: 0,\n    hist: new Float32Array(ROWS * W), head: 0, clock: 0, since: 0, fresh: true,\n    hue: 0, speed: 2, stride: 1, pal: new Float32Array(256 * 3), dot: new Float32Array(256 * 3), palHue: NaN,\n    acc: new Float32Array(W * TOP * 3),\n  };\n  seed(params.s, 0, true);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 80, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.lagKnob = cl(k[2], 80, 88);\n  P.stride = cl(k[3], 0.8, 4);\n  if (P.fresh) {\n    // 150 time units to grow and reach the knob's lag; a draw that still\n    // falls into step is drawn again. Then the whole history is run once so\n    // the panel opens full: 5,780 steps at Stride 4, about 0.3 s once.\n    for (let tries = 0; tries \u003c 8; tries++) {\n      if (tries) seed(P, 0, true);\n      for (let i = 0; i \u003c 1500; i++) step(P);\n      if (P.z \u003c 0.9) break;\n    }\n    for (let r = 0; r \u003c ROWS; r++) {\n      for (let t = 0; t \u003c P.stride - 1e-9; t += STEP) step(P);\n      record(P);\n    }\n    P.fresh = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) seed(P, (TAU * P.col) / W, false);\n  P.clock += d * RATE * P.speed;\n  let n = 0;\n  for (; P.clock >= STEP && n \u003c MAXSTEPS; n++) {\n    step(P);\n    P.clock -= STEP;\n    P.since += STEP;\n    if (P.since >= P.stride - 1e-9) {\n      record(P);\n      P.since -= P.stride;\n    }\n  }\n  if (n === MAXSTEPS) P.clock = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pal, dot, hist, th, acc } = P;\n  if (P.palHue !== P.hue) {\n    // Phase round the colour wheel. In the history the brightness also\n    // follows the phase, full at the phase of the part in step and dark\n    // half a turn away, so each slip of a scattered oscillator is a dark\n    // stroke through its column.\n    for (let i = 0; i \u003c 256; i++) {\n      const t = (i / 256) * TAU;\n      hsv(P.hue + HUE0 + i / 256, 0.85, 0.5 + 0.5 * cos(t), pal, i * 3);\n      hsv(P.hue + HUE0 + i / 256, 0.75, 1, dot, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The present, in the top 20 rows: every oscillator a dot, its phase up\n  // and down against its place on the ring.\n  acc.fill(0);\n  for (let c = 0; c \u003c W; c++)\n    for (let k = 0; k \u003c PER; k++) {\n      const t = th[osc(P, c, k)], y = TOP / 2 - 0.5 + (t / PI) * (TOP / 2 - 0.5), y0 = floor(y), f = y - y0;\n      const q = (floor((t / TAU + 1) * 256) & 255) * 3;\n      if (y0 >= 0) {\n        const o = (y0 * W + c) * 3, a = 0.7 * (1 - f);\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n      if (y0 + 1 \u003c TOP) {\n        const o = ((y0 + 1) * W + c) * 3, a = 0.7 * f;\n        (acc[o] += a * dot[q]), (acc[o + 1] += a * dot[q + 1]), (acc[o + 2] += a * dot[q + 2]);\n      }\n    }\n  for (let y = 0, o = 0; y \u003c TOP; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, acc[o] * 255), min(255, acc[o + 1] * 255), min(255, acc[o + 2] * 255));\n  for (let x = 0; x \u003c W; x++) display.setPixel(x, TOP, 0, 0, 0);\n  // The past: one row per moment, the newest at the top.\n  for (let r = 0; r \u003c ROWS; r++) {\n    const o = ((P.head + r) % ROWS) * W, c0 = P.col + W / 2;\n    for (let x = 0; x \u003c W; x++) {\n      const q = (floor((hist[o + ((c0 + x) % W)] / TAU + 1) * 256) & 255) * 3;\n      display.setPixel(x, Y0 + r, pal[q] * 255, pal[q + 1] * 255, pal[q + 2] * 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lag=80..88, Stride=0.8..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the wheel that colours the phase. At 0 the part in step is cyan, and an oscillator slipping a turn goes through blue and violet, dark at half a turn, and back through yellow and green."},{"name":"Speed","min":0.2,"max":3,"about":"Four time units of the equation a second times the knob. The oscillators in the middle of the scattered stretch slip a turn every 10.8 time units, so at 2 about every 1.4 s, and at Stride 0.8 the history moves down 10 rows a second."},{"name":"Lag","min":80,"max":88,"about":"The phase lag α in degrees. At 80 (β = 90 - α = 10°, near Abrams and Strogatz's 0.18 rad) 30% of the ring moves in step, a band 19 columns wide; at 84 22%, at 88 14%, 9 columns. The lag follows the knob a tenth of a degree per time unit, so the whole range takes 80 time units, 10 s at Speed 2, and the band widens or narrows as it scrolls."},{"name":"Stride","min":0.8,"max":4,"about":"Time units between two rows of the history, 0.8 to 4. At 0.8 the 107 rows hold 86 time units and each slip is a thick dark stroke, the strokes lined up in chevrons; at 4 they hold 428 and the strokes break into speckle."}],"start":[0,2,80,0.8],"measures":{"motion":0.871,"detail":0.1412,"edges":0.5685,"complexity":1.5664,"coverage":0.8292,"colour":0.6214,"drift":0.032},"knobResponse":[0.5105,0.2386,0.2458,0.1784]},{"slug":"chladni","title":"Chladni","family":"wave","round":16,"note":"세운 놋쇠 판에 뿌린 모래가 떨리는 자리에서 튀어 나가 가만히 있는 마디선에 모여 클라드니 도형을 그려요. 5초마다 활을 다시 그으면 모래가 흩어졌다가 새 모드의 도형을 찾아가고, K4 를 올리면 석송 가루가 배 자리마다 둥근 노란 더미로 모여요.","idea":"Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.","buttons":"K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.","code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","layer":{"id":"layer-chladni","type":"code","name":"chladni","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plate","min":0,"max":1,"about":"What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel."},{"name":"Drive","min":0.8,"max":3,"about":"How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard."},{"name":"Pitch","min":-1,"max":1,"about":"Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells."},{"name":"Powder","min":0,"max":1,"about":"How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found."}],"start":[0,2,0,0.06],"measures":{"motion":0.4769,"detail":0.0916,"edges":0.6144,"complexity":1.6152,"coverage":0.9904,"colour":0.0973,"drift":0.0566},"knobResponse":[0.0837,0.1502,0.16,0.131]},{"slug":"chromatography","title":"Chromatography","family":"chemistry","round":20,"note":"실험대 위 유리 수조에 거름종이 띠가 매달려 발끝을 용매에 담그고, 젖은 앞선이 올라가는 동안 연필 출발선의 잉크 점이 색 띠로 갈라져 저마다 다른 빠르기로 올라가요. K1 을 누르면 띠를 들어 올리고 새 띠를 걸어요.","idea":"Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.","buttons":"K1 tap lifts the strips out of the tank now and hangs fresh ones.","code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","layer":{"id":"layer-chromatography","type":"code","name":"chromatography","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps."},{"name":"Strips","min":3,"max":6,"about":"How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6."},{"name":"Solvent","min":-1,"max":1,"about":"How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker."}],"start":[0,2,3,0.06],"measures":{"motion":0.0352,"detail":0.0646,"edges":0.3051,"complexity":1.2207,"coverage":0.7347,"colour":0.2232,"drift":0.0399},"knobResponse":[0.0454,0.0548,0.2236,0.048]},{"slug":"chrome-powder","title":"Chrome Powder","family":"cosmetic","round":32,"note":"판 전체가 크롬 파우더를 얹은 젤 한 면이에요. 보이지 않는 어플리케이터가 작은 원을 그리며 위에서 아래로 문지르면 무광 회색 가루가 로즈골드 거울로 바뀌고, 거울에는 소프트박스의 흰 띠와 검은 반사판 띠가 물결지며 비쳐요. 다 덮이면 빛이 비스듬히 한 번 쓸고, 새 가루가 위에서부터 다시 덮여요.","idea":"The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.","buttons":"K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.","code":"// ===== Patternflow pattern =====\n// Title:   Chrome Powder\n// Family:  cosmetic\n// Idea:    The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after chrome powder buffed onto a gel top coat and the softbox reflections of product photography\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1\n//\n// Knob 1: Hue. The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac.\n// Knob 2: Speed. At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast.\n// Knob 3: Holo. At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own.\n// Knob 4: Grain. The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1.\n// Buttons: K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, exp, abs, min, max, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// Smooth value noise on a coarse grid of random numbers, sampled per LED.\nfunction field(cell, amp) {\n  const gw = floor(W / cell) + 3, gh = floor(H / cell) + 3, g = new Float32Array(gw * gh);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      tx = tx * tx * (3 - 2 * tx);\n      ty = ty * ty * (3 - 2 * ty);\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = amp * (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty);\n    }\n  return out;\n}\n\n// The coat's surface: bowed across the panel and a little down it, with a\n// low waviness of the gel, so the horizon is one wavy line across. Stored as the reflected direction a level eye\n// sees in it, rx across and ry down, and a soft light term for the powder.\nfunction surface(P) {\n  const w1 = field(22, 1), w2 = field(9, 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const u = (x - 31.5) / 32, v = (y - 63.5) / 64;\n      let sx = 0.44 * u + 0.03 * sin(y * 0.07);\n      let sy = 0.2 * v + 0.008 * sin(x * 0.24 + y * 0.05);\n      const xr = min(x + 1, W - 1), yr = min(y + 1, H - 1);\n      sx += 0.09 * (w1[y * W + xr] - w1[i]) * 22 / 4 + 0.05 * (w2[y * W + xr] - w2[i]) * 9 / 4;\n      // Down the panel the waviness is kept small so the horizon stays one line.\n      sy += 0.015 * (w1[yr * W + x] - w1[i]) * 22 / 4 + 0.01 * (w2[yr * W + x] - w2[i]) * 9 / 4;\n      P.rx[i] = 2 * sx;\n      P.ry[i] = 2 * sy;\n      P.lam[i] = cl(0.78 - 0.5 * sx + 0.35 * sy, 0.35, 1);\n    }\n}\n\nconst edge = (t) => cl(t / 0.025 + 0.5, 0, 1);\nconst box = (u, a, b, v, c, d) => edge(u - a) * edge(b - u) * edge(v - c) * edge(d - v);\n\n// The studio the mirror sees, the way chrome is shot: a pale sweep of wall,\n// lighter towards the horizon, with a tall softbox, black flags beside it\n// and two strip lights, all sharp at their edges; below the horizon a dark\n// floor with faint copies of the lights. u wraps every 2.4 as the lights\n// slide.\nconst HZ = 0.22;\nfunction env(u, v) {\n  u -= 2.4 * floor(u / 2.4 + 0.5);\n  if (v > HZ) return 0.1 + 0.05 * (1 - sm(HZ, 0.7, v)) + 0.14 * box(u, -0.18, 0.12, v, HZ, 1) + 0.1 * box(u, 0.45, 0.5, v, HZ, 1);\n  let I = (0.56 + 0.22 * sm(-0.8, HZ, v)) * (0.88 + 0.12 * cos(u * 2.6));\n  // Black flags: one wide beside the softbox, two narrow further out.\n  I *= 1 - 0.94 * box(u, 0.12, 0.3, v, -2, 2);\n  I *= 1 - 0.94 * box(u, -0.5, -0.42, v, -2, 2);\n  I *= 1 - 0.9 * box(u, 0.7, 0.76, v, -2, 2);\n  I += 0.7 * box(u, -0.18, 0.12, v, -2, HZ - 0.06) * (0.85 + 0.15 * cos((u + 0.03) * 10));\n  I += 0.6 * box(u, 0.45, 0.5, v, -2, HZ - 0.03);\n  I += 0.6 * box(u, -0.66, -0.62, v, -2, HZ - 0.03);\n  I += 0.55 * box(u, 0.92, 1.12, v, -0.75, HZ - 0.08);\n  I += 0.4 * box(u, -2, 2, v, -0.62, -0.55);\n  return I;\n}\n\nexport function setup(params) {\n  const P = {\n    T: 0, phase: 0, pt: 0, hue: NaN, holo: 0, grain: 0.06, speed: 2, drift: 0,\n    rx: new Float32Array(N), ry: new Float32Array(N), lam: new Float32Array(N),\n    B: new Float32Array(N), g1: new Float32Array(N), g2: null, g3: null, clump: null, soft: null, ih: new Float32Array(N), spk: new Float32Array(N), res: new Float32Array(N),\n    ax: 32, ay: -8, tint: new Float32Array(3), dust: new Float32Array(3), sweep: -1, recoat: -1,\n  };\n  surface(P);\n  for (let i = 0; i \u003c N; i++) (P.g1[i] = random() * 2 - 1), (P.spk[i] = random()), (P.res[i] = random());\n  P.g2 = field(2, 1.3);\n  P.g3 = field(3.5, 1.5);\n  P.clump = field(2.5, 1);\n  P.soft = field(16, 1);\n  for (let i = 0; i \u003c N; i++) P.ih[i] = random() * 2 - 1;\n  params.s = P;\n}\n\n// The applicator: a sponge tip 10 LEDs in radius that rubs circles 5 LEDs\n// in radius, a little under four to a crossing so they never line up, while\n// it crosses the panel and back and works down it, 12 LEDs a crossing. A\n// crossing buffs an LED about two thirds of the way; the next one finishes\n// it.\nconst COAT = 17, SWEEP = 6, RECOAT = 3, R = 10, CROSS = 1.4;\nfunction rub(P, dT) {\n  const steps = 6;\n  for (let s = 0; s \u003c steps; s++) {\n    P.pt += dT / steps;\n    const t = P.pt, ph = t / CROSS, tri = 1 - abs(1 - 2 * (ph / 2 - floor(ph / 2))) * 2;\n    const a = t * 2 * PI * 2.37;\n    const cx = 32 - 38 * tri + 5 * cos(a), cy = -12 + (172 * t) / COAT + 5 * sin(a);\n    P.ax = cx;\n    P.ay = cy;\n    const x0 = max(0, floor(cx - R)), x1 = min(W - 1, floor(cx + R) + 1), y0 = max(0, floor(cy - R)), y1 = min(H - 1, floor(cy + R) + 1);\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - cx, dy = y - cy, d2 = (dx * dx + dy * dy) / (R * R);\n        if (d2 >= 1) continue;\n        const i = y * W + x;\n        P.B[i] = min(1, P.B[i] + 2.4 * (1 - d2 * d2) * (dT / steps) * (0.7 + 0.6 * P.res[i]));\n      }\n  }\n  // It goes back over what it missed: from 18 rows above the tip up, the\n  // last patches of powder turn too.\n  const yb = min(H, floor(P.ay - 18));\n  for (let y = max(0, yb - 24); y \u003c yb; y++) {\n    const m = sm(yb, yb - 24, y) * dT * 1.5;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) P.B[i] = min(1, P.B[i] + m);\n  }\n  for (let i = 0, e = max(0, yb - 24) * W; i \u003c e; i++) P.B[i] = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  P.holo = cl(k[2], 0, 1);\n  P.grain = cl(k[3], 0, 1);\n  const dT = d * P.speed;\n  P.T += dT;\n  P.drift += dT * 0.035;\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== 2) (P.phase = 2), (P.recoat = 0);\n  if (P.phase === 0) {\n    rub(P, dT);\n    if (P.pt >= COAT) {\n      P.phase = 1;\n      P.sweep = 0;\n      P.B.fill(1);\n    }\n  } else if (P.phase === 1) {\n    P.sweep += dT / SWEEP;\n    if (P.sweep >= 1) (P.phase = 2), (P.recoat = 0), (P.sweep = -1);\n  } else {\n    // The new coat is dusted on from the top down.\n    P.recoat += dT / RECOAT;\n    const fy = -10 + 150 * P.recoat;\n    for (let y = 0; y \u003c H; y++) {\n      if (y > fy + 6) break;\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x, e = fy + 5 * P.res[i] - y;\n        if (e > 0) P.B[i] = min(P.B[i], max(0, 1 - e / 4));\n      }\n    }\n    if (P.recoat >= 1) {\n      P.B.fill(0);\n      P.phase = 0;\n      P.pt = 0;\n      P.recoat = -1;\n    }\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hsv(k[0] + 0.025, 0.4, 1, P.tint, 0);\n    hsv(k[0] + 0.025, 0.16, 1, P.dust, 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { rx, ry, lam, B, g1, g2, g3, spk, tint, dust } = P;\n  const gr = P.grain, holo = P.holo, hue = P.hue, du = P.drift;\n  const gA = 0.05 + 0.21 * gr, gm2 = sm(0.15, 0.6, gr), gm3 = sm(0.55, 1, gr);\n  const sw = P.sweep, c = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, b = B[i];\n      // The matte powder: a pale tint of the metal, lit softly, with grain.\n      let pr = 0, pg = 0, pb = 0;\n      // Each grain turns to mirror at its own point in the buffing, so the\n      // edge of the mirror is speckled, and powder that has been pressed but\n      // not yet turned takes a satin sheen.\n      // Turning Grain up also leaves clumps of powder on the finished mirror.\n      const th = 0.3 + 0.5 * P.res[i], left = gr * sm(0.35, 0.6, P.clump[i]);\n      const mir = sm(th - 0.1, th + 0.1, b) * (1 - 0.75 * left);\n      if (mir \u003c 1) {\n        const g = g1[i] * (1 - gm2) + g2[i] * gm2 * (1 - gm3) + g3[i] * gm3;\n        let v = (0.56 + 0.05 * P.soft[i] + 0.1 * sm(0.03, 0.4, b)) * lam[i] * (1 + gA * g * (1 - 0.6 * sm(0.03, 0.4, b)));\n        if (spk[i] > 0.985 - 0.02 * gr) v += 0.12 * (0.5 + 0.5 * sin(P.T * 3 + spk[i] * 400));\n        (pr = dust[0] * v), (pg = dust[1] * v), (pb = dust[2] * v);\n        if (holo > 0) {\n          // Holographic powder: every grain carries its own colour.\n          hsv(hue + 0.665 + 0.25 * P.ih[i], 0.55, v * 1.15, c, 0);\n          const hm = holo * 0.8;\n          (pr += (c[0] - pr) * hm), (pg += (c[1] - pg) * hm), (pb += (c[2] - pb) * hm);\n        }\n      }\n      let mr = 0, mg = 0, mb = 0;\n      if (mir > 0) {\n        const u = rx[i] + du, v = ry[i];\n        let I = env(u, v);\n        if (sw >= 0) {\n          const p = x * 0.6 + y - (-50 + 230 * sw);\n          I += 0.9 * exp(-(p * p) / 60);\n        }\n        // Silver-bright where the light is strong, the tint in the mids,\n        // nearly black in the floor.\n        let tr = tint[0], tg = tint[1], tb = tint[2];\n        if (holo > 0) {\n          // Aurora chrome: the tint gives way to a colour that turns with\n          // the angle of the surface, over the cool side of the wheel from\n          // the tint, so it runs violet, blue and aqua and never through the\n          // olive a dim yellow-green would be.\n          const s = sin(2.6 * rx[i] + 5 * ry[i] + 0.7 * sin(y * 0.05) + du * 4);\n          hsv(hue + 0.025 + 0.64 + 0.2 * s, 0.5, 1, c, 0);\n          (tr += (c[0] - tr) * holo), (tg += (c[1] - tg) * holo), (tb += (c[2] - tb) * holo);\n        }\n        const hi = sm(0.85, 1.3, I), L = min(1.2, I);\n        mr = L * (tr + (1 - tr) * hi);\n        mg = L * (tg + (1 - tg) * hi);\n        mb = L * (tb + (1 - tb) * hi);\n      }\n      const r = pr * (1 - mir) + mr * mir, g = pg * (1 - mir) + mg * mir, bl = pb * (1 - mir) + mb * mir;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","layer":{"id":"layer-chrome-powder","type":"code","name":"chrome-powder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chrome Powder\n// Family:  cosmetic\n// Idea:    The whole panel is a gel coat dusted with chrome powder; an unseen applicator rubs small circles down it, and where it has been the matte grain turns into a liquid mirror holding the sharp bands of a studio's softboxes over a dark floor, until a light sweeps once over the finished mirror and the next coat goes on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after chrome powder buffed onto a gel top coat and the softbox reflections of product photography\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1\n//\n// Knob 1: Hue. The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac.\n// Knob 2: Speed. At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast.\n// Knob 3: Holo. At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own.\n// Knob 4: Grain. The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1.\n// Buttons: K1 tap dusts a new coat on from the top down at once, and the applicator starts again from the top.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, exp, abs, min, max, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// Smooth value noise on a coarse grid of random numbers, sampled per LED.\nfunction field(cell, amp) {\n  const gw = floor(W / cell) + 3, gh = floor(H / cell) + 3, g = new Float32Array(gw * gh);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      tx = tx * tx * (3 - 2 * tx);\n      ty = ty * ty * (3 - 2 * ty);\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = amp * (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty);\n    }\n  return out;\n}\n\n// The coat's surface: bowed across the panel and a little down it, with a\n// low waviness of the gel, so the horizon is one wavy line across. Stored as the reflected direction a level eye\n// sees in it, rx across and ry down, and a soft light term for the powder.\nfunction surface(P) {\n  const w1 = field(22, 1), w2 = field(9, 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const u = (x - 31.5) / 32, v = (y - 63.5) / 64;\n      let sx = 0.44 * u + 0.03 * sin(y * 0.07);\n      let sy = 0.2 * v + 0.008 * sin(x * 0.24 + y * 0.05);\n      const xr = min(x + 1, W - 1), yr = min(y + 1, H - 1);\n      sx += 0.09 * (w1[y * W + xr] - w1[i]) * 22 / 4 + 0.05 * (w2[y * W + xr] - w2[i]) * 9 / 4;\n      // Down the panel the waviness is kept small so the horizon stays one line.\n      sy += 0.015 * (w1[yr * W + x] - w1[i]) * 22 / 4 + 0.01 * (w2[yr * W + x] - w2[i]) * 9 / 4;\n      P.rx[i] = 2 * sx;\n      P.ry[i] = 2 * sy;\n      P.lam[i] = cl(0.78 - 0.5 * sx + 0.35 * sy, 0.35, 1);\n    }\n}\n\nconst edge = (t) => cl(t / 0.025 + 0.5, 0, 1);\nconst box = (u, a, b, v, c, d) => edge(u - a) * edge(b - u) * edge(v - c) * edge(d - v);\n\n// The studio the mirror sees, the way chrome is shot: a pale sweep of wall,\n// lighter towards the horizon, with a tall softbox, black flags beside it\n// and two strip lights, all sharp at their edges; below the horizon a dark\n// floor with faint copies of the lights. u wraps every 2.4 as the lights\n// slide.\nconst HZ = 0.22;\nfunction env(u, v) {\n  u -= 2.4 * floor(u / 2.4 + 0.5);\n  if (v > HZ) return 0.1 + 0.05 * (1 - sm(HZ, 0.7, v)) + 0.14 * box(u, -0.18, 0.12, v, HZ, 1) + 0.1 * box(u, 0.45, 0.5, v, HZ, 1);\n  let I = (0.56 + 0.22 * sm(-0.8, HZ, v)) * (0.88 + 0.12 * cos(u * 2.6));\n  // Black flags: one wide beside the softbox, two narrow further out.\n  I *= 1 - 0.94 * box(u, 0.12, 0.3, v, -2, 2);\n  I *= 1 - 0.94 * box(u, -0.5, -0.42, v, -2, 2);\n  I *= 1 - 0.9 * box(u, 0.7, 0.76, v, -2, 2);\n  I += 0.7 * box(u, -0.18, 0.12, v, -2, HZ - 0.06) * (0.85 + 0.15 * cos((u + 0.03) * 10));\n  I += 0.6 * box(u, 0.45, 0.5, v, -2, HZ - 0.03);\n  I += 0.6 * box(u, -0.66, -0.62, v, -2, HZ - 0.03);\n  I += 0.55 * box(u, 0.92, 1.12, v, -0.75, HZ - 0.08);\n  I += 0.4 * box(u, -2, 2, v, -0.62, -0.55);\n  return I;\n}\n\nexport function setup(params) {\n  const P = {\n    T: 0, phase: 0, pt: 0, hue: NaN, holo: 0, grain: 0.06, speed: 2, drift: 0,\n    rx: new Float32Array(N), ry: new Float32Array(N), lam: new Float32Array(N),\n    B: new Float32Array(N), g1: new Float32Array(N), g2: null, g3: null, clump: null, soft: null, ih: new Float32Array(N), spk: new Float32Array(N), res: new Float32Array(N),\n    ax: 32, ay: -8, tint: new Float32Array(3), dust: new Float32Array(3), sweep: -1, recoat: -1,\n  };\n  surface(P);\n  for (let i = 0; i \u003c N; i++) (P.g1[i] = random() * 2 - 1), (P.spk[i] = random()), (P.res[i] = random());\n  P.g2 = field(2, 1.3);\n  P.g3 = field(3.5, 1.5);\n  P.clump = field(2.5, 1);\n  P.soft = field(16, 1);\n  for (let i = 0; i \u003c N; i++) P.ih[i] = random() * 2 - 1;\n  params.s = P;\n}\n\n// The applicator: a sponge tip 10 LEDs in radius that rubs circles 5 LEDs\n// in radius, a little under four to a crossing so they never line up, while\n// it crosses the panel and back and works down it, 12 LEDs a crossing. A\n// crossing buffs an LED about two thirds of the way; the next one finishes\n// it.\nconst COAT = 17, SWEEP = 6, RECOAT = 3, R = 10, CROSS = 1.4;\nfunction rub(P, dT) {\n  const steps = 6;\n  for (let s = 0; s \u003c steps; s++) {\n    P.pt += dT / steps;\n    const t = P.pt, ph = t / CROSS, tri = 1 - abs(1 - 2 * (ph / 2 - floor(ph / 2))) * 2;\n    const a = t * 2 * PI * 2.37;\n    const cx = 32 - 38 * tri + 5 * cos(a), cy = -12 + (172 * t) / COAT + 5 * sin(a);\n    P.ax = cx;\n    P.ay = cy;\n    const x0 = max(0, floor(cx - R)), x1 = min(W - 1, floor(cx + R) + 1), y0 = max(0, floor(cy - R)), y1 = min(H - 1, floor(cy + R) + 1);\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - cx, dy = y - cy, d2 = (dx * dx + dy * dy) / (R * R);\n        if (d2 >= 1) continue;\n        const i = y * W + x;\n        P.B[i] = min(1, P.B[i] + 2.4 * (1 - d2 * d2) * (dT / steps) * (0.7 + 0.6 * P.res[i]));\n      }\n  }\n  // It goes back over what it missed: from 18 rows above the tip up, the\n  // last patches of powder turn too.\n  const yb = min(H, floor(P.ay - 18));\n  for (let y = max(0, yb - 24); y \u003c yb; y++) {\n    const m = sm(yb, yb - 24, y) * dT * 1.5;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) P.B[i] = min(1, P.B[i] + m);\n  }\n  for (let i = 0, e = max(0, yb - 24) * W; i \u003c e; i++) P.B[i] = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  P.holo = cl(k[2], 0, 1);\n  P.grain = cl(k[3], 0, 1);\n  const dT = d * P.speed;\n  P.T += dT;\n  P.drift += dT * 0.035;\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== 2) (P.phase = 2), (P.recoat = 0);\n  if (P.phase === 0) {\n    rub(P, dT);\n    if (P.pt >= COAT) {\n      P.phase = 1;\n      P.sweep = 0;\n      P.B.fill(1);\n    }\n  } else if (P.phase === 1) {\n    P.sweep += dT / SWEEP;\n    if (P.sweep >= 1) (P.phase = 2), (P.recoat = 0), (P.sweep = -1);\n  } else {\n    // The new coat is dusted on from the top down.\n    P.recoat += dT / RECOAT;\n    const fy = -10 + 150 * P.recoat;\n    for (let y = 0; y \u003c H; y++) {\n      if (y > fy + 6) break;\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x, e = fy + 5 * P.res[i] - y;\n        if (e > 0) P.B[i] = min(P.B[i], max(0, 1 - e / 4));\n      }\n    }\n    if (P.recoat >= 1) {\n      P.B.fill(0);\n      P.phase = 0;\n      P.pt = 0;\n      P.recoat = -1;\n    }\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hsv(k[0] + 0.025, 0.4, 1, P.tint, 0);\n    hsv(k[0] + 0.025, 0.16, 1, P.dust, 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { rx, ry, lam, B, g1, g2, g3, spk, tint, dust } = P;\n  const gr = P.grain, holo = P.holo, hue = P.hue, du = P.drift;\n  const gA = 0.05 + 0.21 * gr, gm2 = sm(0.15, 0.6, gr), gm3 = sm(0.55, 1, gr);\n  const sw = P.sweep, c = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, b = B[i];\n      // The matte powder: a pale tint of the metal, lit softly, with grain.\n      let pr = 0, pg = 0, pb = 0;\n      // Each grain turns to mirror at its own point in the buffing, so the\n      // edge of the mirror is speckled, and powder that has been pressed but\n      // not yet turned takes a satin sheen.\n      // Turning Grain up also leaves clumps of powder on the finished mirror.\n      const th = 0.3 + 0.5 * P.res[i], left = gr * sm(0.35, 0.6, P.clump[i]);\n      const mir = sm(th - 0.1, th + 0.1, b) * (1 - 0.75 * left);\n      if (mir \u003c 1) {\n        const g = g1[i] * (1 - gm2) + g2[i] * gm2 * (1 - gm3) + g3[i] * gm3;\n        let v = (0.56 + 0.05 * P.soft[i] + 0.1 * sm(0.03, 0.4, b)) * lam[i] * (1 + gA * g * (1 - 0.6 * sm(0.03, 0.4, b)));\n        if (spk[i] > 0.985 - 0.02 * gr) v += 0.12 * (0.5 + 0.5 * sin(P.T * 3 + spk[i] * 400));\n        (pr = dust[0] * v), (pg = dust[1] * v), (pb = dust[2] * v);\n        if (holo > 0) {\n          // Holographic powder: every grain carries its own colour.\n          hsv(hue + 0.665 + 0.25 * P.ih[i], 0.55, v * 1.15, c, 0);\n          const hm = holo * 0.8;\n          (pr += (c[0] - pr) * hm), (pg += (c[1] - pg) * hm), (pb += (c[2] - pb) * hm);\n        }\n      }\n      let mr = 0, mg = 0, mb = 0;\n      if (mir > 0) {\n        const u = rx[i] + du, v = ry[i];\n        let I = env(u, v);\n        if (sw >= 0) {\n          const p = x * 0.6 + y - (-50 + 230 * sw);\n          I += 0.9 * exp(-(p * p) / 60);\n        }\n        // Silver-bright where the light is strong, the tint in the mids,\n        // nearly black in the floor.\n        let tr = tint[0], tg = tint[1], tb = tint[2];\n        if (holo > 0) {\n          // Aurora chrome: the tint gives way to a colour that turns with\n          // the angle of the surface, over the cool side of the wheel from\n          // the tint, so it runs violet, blue and aqua and never through the\n          // olive a dim yellow-green would be.\n          const s = sin(2.6 * rx[i] + 5 * ry[i] + 0.7 * sin(y * 0.05) + du * 4);\n          hsv(hue + 0.025 + 0.64 + 0.2 * s, 0.5, 1, c, 0);\n          (tr += (c[0] - tr) * holo), (tg += (c[1] - tg) * holo), (tb += (c[2] - tb) * holo);\n        }\n        const hi = sm(0.85, 1.3, I), L = min(1.2, I);\n        mr = L * (tr + (1 - tr) * hi);\n        mg = L * (tg + (1 - tg) * hi);\n        mb = L * (tb + (1 - tb) * hi);\n      }\n      const r = pr * (1 - mir) + mr * mir, g = pg * (1 - mir) + mg * mir, bl = pb * (1 - mir) + mb * mir;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, bl * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Holo=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the metal, once round the wheel; the loose powder is a pale grey of the same tint. At 0 rose gold, at 0.08 gold, at 0.3 green chrome, at 0.55 steel blue, at 0.8 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the applicator rubs nearly five circles a second and crosses the panel in 0.7 seconds, a coat takes 8.5 seconds, the light sweeps for 3 and the next coat dusts on in 1.5, 13 seconds round; the softbox reflections slide about 2.5 LEDs a second. At 0.2 all of it a tenth as fast."},{"name":"Holo","min":0,"max":1,"about":"At 0 a plain metal mirror in the tint. Turned up, the tint gives way to aurora chrome, a colour that turns with the angle of the surface through violet, blue and aqua, and every grain of the loose powder carries a colour of its own."},{"name":"Grain","min":0,"max":1,"about":"The loose powder's grain: single LEDs at 0, 2 LEDs across at 0.5, 3.5 at 1, with sparkling grains going from 1.5% to 3.5%. It also leaves clumps of powder on the finished mirror, faint at 0.06 and over about a sixth of the mirror at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.1725,"detail":0.0415,"edges":0.2939,"complexity":1.5841,"coverage":0.922,"colour":0.1297,"drift":0.2833},"knobResponse":[0.0785,0.1385,0.1031,0.0512]},{"slug":"circuit-board","title":"Circuit Board","family":"circuit","round":17,"note":"회로 기판이 패널을 다 채우고, Lee 의 미로 라우터가 프로세서와 메모리 둘, 플래시, 크리스털, 금도금 단자 사이에 구리 선 47개를 곧게, 또 45도로 깔아요. 버스에는 펄스 열이 나란히 달리고 바쁜 선은 신호 색으로 데워지며, K1 을 누르면 기판이 꺼졌다가 부팅해요.","idea":"A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.","buttons":"K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.","code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","layer":{"id":"layer-circuit-board","type":"code","name":"circuit-board","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mask","min":0,"max":1,"about":"The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1."},{"name":"Clock","min":0.5,"max":4,"about":"How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice."},{"name":"Traffic","min":0,"max":1,"about":"At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back."},{"name":"Glow","min":0,"max":1,"about":"How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three."}],"start":[0,2,0,0.06],"measures":{"motion":0.2002,"detail":0.119,"edges":0.678,"complexity":0.7577,"coverage":0.9814,"colour":0.2535,"drift":0.0471},"knobResponse":[0.2116,0.0618,0.0696,0.0621]},{"slug":"circulation","title":"Circulation","family":"body","round":22,"note":"해부도처럼 머리부터 발끝까지 선 사람이에요. 심장이 뛸 때마다 붉은 피의 맥이 동맥을 타고 머리와 손발 끝까지 번져 가고, 푸른 정맥혈은 심장 쪽으로 거슬러 올라오며 폐가 박동과 숨에 분홍빛으로 물들어요. 발치의 모니터에는 심전도와 맥박 수가 떠요.","idea":"A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.","buttons":"K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","layer":{"id":"layer-circulation","type":"code","name":"circulation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Chart","min":0,"max":1,"about":"The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1."},{"name":"Rate","min":1,"max":5,"about":"The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other."},{"name":"Detail","min":1,"max":4,"about":"How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4."},{"name":"Effort","min":0,"max":1,"about":"From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood."}],"start":[0,2,1,0.06],"measures":{"motion":0.3125,"detail":0.0474,"edges":0.3512,"complexity":1.0533,"coverage":0.3719,"colour":0.2033,"drift":0.0315},"knobResponse":[0.1504,0.046,0.0247,0.0525]},{"slug":"clay-mask","title":"Clay Mask","family":"cosmetic","round":32,"note":"판 전체에 스패출러로 바른 로즈 클레이가 얇은 곳부터 말라 들어가요. 짙은 라즈베리색 윤이 먼저 빠지고 옅은 블러시색 무광이 섬처럼 번지다가, 두꺼운 결만 마지막까지 짙은 줄로 남아요. 8초쯤 다 마르면 물 띠가 위에서 아래로 2초 동안 지나가며 다시 적셔요.","idea":"A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.","buttons":"K1 tap sends the band of water down the panel now, unless one is already on its way.","code":"// ===== Patternflow pattern =====\n// Title:   Clay Mask\n// Family:  cosmetic\n// Idea:    A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the clay face mask that pales as it dries\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet.\n// Knob 2: Speed. At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower.\n// Knob 3: Thickness. At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds.\n// Knob 4: Gloss. Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch.\n// Buttons: K1 tap sends the band of water down the panel now, unless one is already on its way.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, 0..1.\nfunction vn(x, y, s) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  const u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(i, j, s), b = hash(i + 1, j, s), c = hash(i, j + 1, s), d = hash(i + 1, j + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The clay as it was laid on: a base coat and spatula strokes across it,\n// each piling a ridge at its edges and scraping fine lines along its length.\n// Baked once: thickness, its slope, the order the LEDs dry in, the delay of\n// the rewetting sweep and the dry grain.\nfunction lay(P) {\n  const R = Math.random;\n  const h = new Float32Array(N), hb = new Float32Array(N), key = new Float32Array(N);\n  const strokes = [];\n  for (let k = 0; k \u003c 7; k++) {\n    const th = 1.05 + (R() - 0.5) * 0.5;\n    strokes.push({\n      tx: cos(th), ty: sin(th), nx: -sin(th), ny: cos(th),\n      c: -62 + k * 20 + (R() - 0.5) * 8, w: 24 + R() * 10, t: 0.45 + R() * 0.2, tilt: (R() - 0.5) * 0.3,\n      f1: 0.9 + R() * 0.6, f2: 2.1 + R() * 0.9, p1: R() * 6.3, p2: R() * 6.3, e1: R() * 6.3, e2: R() * 6.3, run: 0.0025 + R() * 0.002,\n    });\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5, py = y - 63.5;\n      let v = 0.42 + 0.12 * vn(x / 9, y / 9, 3), sc = 0;\n      for (const s of strokes) {\n        const a = px * s.tx + py * s.ty, n = px * s.nx + py * s.ny;\n        const edge = s.w / 2 + 2.2 * sin(a * 0.08 + s.e1) + 1.2 * sin(a * 0.21 + s.e2);\n        const off = abs(n - s.c);\n        if (off > edge) continue;\n        const u = (n - s.c) / edge, rim = edge - off;\n        v = s.t + s.tilt * u - s.run * a + 0.32 * exp(-(rim * rim) / 3.2);\n        sc = 0.027 * sin(n * s.f1 + s.p1) * (0.6 + 0.4 * sin(a * 0.05 + s.p2)) + 0.014 * sin(n * s.f2 + s.p2);\n      }\n      hb[y * W + x] = v;\n      h[y * W + x] = v + sc + 0.05 * (vn(x / 4, y / 4, 5) - 0.5);\n    }\n  // The order of drying follows the thickness blurred over a few LEDs, so the\n  // front creeps round the ridges instead of fraying along every scrape.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sum = 0, n = 0;\n      for (let j = -2; j \u003c= 2; j++)\n        for (let i = -2; i \u003c= 2; i++) {\n          const xx = x + i, yy = y + j;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          sum += hb[yy * W + xx];\n          n++;\n        }\n      key[y * W + x] = 0.5 * sum / n + 0.5 * hb[y * W + x] + 0.16 * (vn(x / 7, y / 7, 9) - 0.5) + 0.06 * (vn(x / 2.5, y / 2.5, 10) - 0.5);\n    }\n  const gx = new Float32Array(N), gy = new Float32Array(N), rank = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (h[y * W + min(W - 1, x + 1)] - h[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (h[min(H - 1, y + 1) * W + x] - h[max(0, y - 1) * W + x]) / 2;\n    }\n  // Thin clay dries first: the LEDs in order of thickness, as a rank 0..1.\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => key[a] - key[b]);\n  order.forEach((i, r) => (rank[i] = r / (N - 1)));\n  const delay = new Float32Array(N), grain = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      delay[i] = (y + 4 + 3 * sin(x * 0.13 + 1.1) + 3 * vn(x / 5, y / 5, 11)) / (H + 10);\n      grain[i] = 0.6 * (R() - 0.5) + 0.4 * (vn(x / 1.7, y / 1.7, 13) - 0.5);\n    }\n  // Three hairline cracks, each a short wandering line from a thick spot,\n  // numbered 0..1 along its length so it opens from one end.\n  const crack = new Float32Array(N);\n  for (let n = 0; n \u003c 3; n++) {\n    let best = 0, bi = 0;\n    for (let t = 0; t \u003c 60; t++) {\n      const i = floor(R() * N);\n      if (h[i] > best && !crack[i]) (best = h[i]), (bi = i);\n    }\n    let x = bi % W, y = floor(bi / W), a = R() * 2 * PI;\n    const len = 14 + floor(R() * 12);\n    for (let s = 0; s \u003c len; s++) {\n      const i = floor(y) * W + floor(x);\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) break;\n      crack[i] = max(crack[i], 0.02 + s / len);\n      a += (R() - 0.5) * 0.9;\n      x += cos(a) * 0.9;\n      y += sin(a) * 0.9;\n    }\n  }\n  Object.assign(P, { h, gx, gy, rank, delay, grain, crack });\n}\n\nexport function setup(params) {\n  params.s = {\n    c: 0, hue: 0, speed: 2, thick: 0, gloss: 0.06, ts: -0.5, tk: 0, ps: -0.5, pk: 0,\n  };\n  lay(params.s);\n}\n\n// Drying times in clock seconds (one a second at Speed 2): an LED of rank r\n// starts to dry at age A0 + r * span and is dry after band more.\nconst A0 = 1.0, SWEEP = 2.2, HOLD = 1.2;\nconst spanOf = (t) => 6 + (t \u003c 0 ? 3.5 * t : 5 * t);\nconst bandOf = (t) => 1.6 + (t \u003c 0 ? -1.2 * t : -0.6 * t);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], -1, 1);\n  P.gloss = cl(k[3], -1, 1);\n  P.c += d * P.speed * 0.5;\n  const span = spanOf(P.thick), band = bandOf(P.thick);\n  const sweeping = P.c \u003c P.ts + P.tk * SWEEP;\n  const allDry = P.c - (P.ts + P.tk * SWEEP) > A0 + span + band + HOLD;\n  if (!sweeping && (allDry || (input.btnPressed && input.btnPressed[0]))) {\n    (P.ps = P.ts), (P.pk = P.tk), (P.ts = P.c), (P.tk = 1);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { h, gx, gy, rank, delay, grain, crack } = P;\n  const span = spanOf(P.thick), band = bandOf(P.thick), c = P.c;\n  const relief = 2.4 + 1.6 * P.thick, g = P.gloss;\n  // A lamp above the panel drifts slowly, and the wet clay mirrors it as a\n  // soft spot that the ridges and scrapes break into streaks.\n  const la = 0.3 * c;\n  const Lx = 32 + 46 * sin(la), Ly = 60 + 70 * sin(0.63 * la + 1.2), Lz = 150;\n  const Ex = 32, Ey = 70, Ez = 260;\n  const shin = 14 + 30 * (g + 1), specK = 0.25 + 0.5 * (g + 1) / 2;\n  const hue = P.hue + 0.935;\n  const wet = [0, 0, 0], dry = [0, 0, 0], deep = [0, 0, 0];\n  hsv(hue, 0.64 + 0.08 * g, 0.56 - 0.05 * g, wet, 0);\n  hsv(hue + 0.01, 0.12, 0.92, dry, 0);\n  hsv(hue + 0.005, 0.3, 0.84, deep, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const tNew = P.ts + P.tk * SWEEP * delay[i];\n      const fresh = c >= tNew;\n      const tw = fresh ? tNew : P.ps + P.pk * SWEEP * delay[i];\n      const age = c - tw;\n      const D = cl((age - A0 - rank[i] * span) / band, 0, 1);\n      const nx = -gx[i] * relief, ny = -gy[i] * relief, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n      let lx = Lx - x, ly = Ly - y, lz = Lz;\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const dif = (nx * lx + ny * ly + lz) * nl;\n      const nh = max(0, (nx * hx + ny * hy + hz) * hi * nl);\n      // Wet: deep colour shaded by the relief, with the sheen. The sheen\n      // goes first as the surface turns matte, then the colour lifts.\n      const shiny = 1 - sm(0, 0.3, D), lift = sm(0.12, 1, D);\n      // Behind the rewetting band the clay carries a film of water, with a\n      // bright line where the band's edge is.\n      const water = fresh && P.tk ? sm(1.1, 0, age) : 0, rim = fresh && P.tk ? sm(0.06, 0, age) : 0;\n      const spec = (specK * shiny * nh ** shin + water * (0.35 * nh ** 90 + 0.05) + 0.3 * rim) * 255;\n      const shade = (0.62 + 0.45 * dif) * (1 - 0.18 * water);\n      // Dry: pale and chalky, the thick ridges keeping a little more colour.\n      const th = sm(0.45, 0.85, h[i]), gr = 1 + 0.13 * grain[i], ds = (0.84 + 0.2 * dif) * gr;\n      let dr = (dry[0] + (deep[0] - dry[0]) * th) * ds, dg = (dry[1] + (deep[1] - dry[1]) * th) * ds, db = (dry[2] + (deep[2] - dry[2]) * th) * ds;\n      // A hairline crack opens where a crack runs, once that spot is dry.\n      const ck = crack[i];\n      if (ck > 0) {\n        const k = sm(0.6 + 1.4 * ck, 0.9 + 1.4 * ck, age - A0 - rank[i] * span - band);\n        const f = 0.55 * k;\n        (dr += (deep[0] * 0.7 - dr) * f), (dg += (deep[1] * 0.7 - dg) * f), (db += (deep[2] * 0.7 - db) * f);\n      }\n      const wr = wet[0] * shade, wg = wet[1] * shade, wb = wet[2] * shade;\n      const r = wr + (dr - wr) * lift + spec;\n      const gg = wg + (dg - wg) * lift + spec;\n      const b = wb + (db - wb) * lift + spec * 0.96;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","layer":{"id":"layer-clay-mask","type":"code","name":"clay-mask","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Clay Mask\n// Family:  cosmetic\n// Idea:    A clay mask spread over the whole panel in spatula strokes dries from its thinnest places: the wet clay is deep, saturated and glossy with the spatula's scrapes catching a drifting lamp, the drying front spreads unevenly round the thick ridges, and the dry clay is pale, matte and chalky until a band of water sweeps down and darkens it again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the clay face mask that pales as it dries\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet.\n// Knob 2: Speed. At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower.\n// Knob 3: Thickness. At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds.\n// Knob 4: Gloss. Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch.\n// Buttons: K1 tap sends the band of water down the panel now, unless one is already on its way.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, 0..1.\nfunction vn(x, y, s) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  const u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(i, j, s), b = hash(i + 1, j, s), c = hash(i, j + 1, s), d = hash(i + 1, j + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The clay as it was laid on: a base coat and spatula strokes across it,\n// each piling a ridge at its edges and scraping fine lines along its length.\n// Baked once: thickness, its slope, the order the LEDs dry in, the delay of\n// the rewetting sweep and the dry grain.\nfunction lay(P) {\n  const R = Math.random;\n  const h = new Float32Array(N), hb = new Float32Array(N), key = new Float32Array(N);\n  const strokes = [];\n  for (let k = 0; k \u003c 7; k++) {\n    const th = 1.05 + (R() - 0.5) * 0.5;\n    strokes.push({\n      tx: cos(th), ty: sin(th), nx: -sin(th), ny: cos(th),\n      c: -62 + k * 20 + (R() - 0.5) * 8, w: 24 + R() * 10, t: 0.45 + R() * 0.2, tilt: (R() - 0.5) * 0.3,\n      f1: 0.9 + R() * 0.6, f2: 2.1 + R() * 0.9, p1: R() * 6.3, p2: R() * 6.3, e1: R() * 6.3, e2: R() * 6.3, run: 0.0025 + R() * 0.002,\n    });\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5, py = y - 63.5;\n      let v = 0.42 + 0.12 * vn(x / 9, y / 9, 3), sc = 0;\n      for (const s of strokes) {\n        const a = px * s.tx + py * s.ty, n = px * s.nx + py * s.ny;\n        const edge = s.w / 2 + 2.2 * sin(a * 0.08 + s.e1) + 1.2 * sin(a * 0.21 + s.e2);\n        const off = abs(n - s.c);\n        if (off > edge) continue;\n        const u = (n - s.c) / edge, rim = edge - off;\n        v = s.t + s.tilt * u - s.run * a + 0.32 * exp(-(rim * rim) / 3.2);\n        sc = 0.027 * sin(n * s.f1 + s.p1) * (0.6 + 0.4 * sin(a * 0.05 + s.p2)) + 0.014 * sin(n * s.f2 + s.p2);\n      }\n      hb[y * W + x] = v;\n      h[y * W + x] = v + sc + 0.05 * (vn(x / 4, y / 4, 5) - 0.5);\n    }\n  // The order of drying follows the thickness blurred over a few LEDs, so the\n  // front creeps round the ridges instead of fraying along every scrape.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sum = 0, n = 0;\n      for (let j = -2; j \u003c= 2; j++)\n        for (let i = -2; i \u003c= 2; i++) {\n          const xx = x + i, yy = y + j;\n          if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n          sum += hb[yy * W + xx];\n          n++;\n        }\n      key[y * W + x] = 0.5 * sum / n + 0.5 * hb[y * W + x] + 0.16 * (vn(x / 7, y / 7, 9) - 0.5) + 0.06 * (vn(x / 2.5, y / 2.5, 10) - 0.5);\n    }\n  const gx = new Float32Array(N), gy = new Float32Array(N), rank = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (h[y * W + min(W - 1, x + 1)] - h[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (h[min(H - 1, y + 1) * W + x] - h[max(0, y - 1) * W + x]) / 2;\n    }\n  // Thin clay dries first: the LEDs in order of thickness, as a rank 0..1.\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => key[a] - key[b]);\n  order.forEach((i, r) => (rank[i] = r / (N - 1)));\n  const delay = new Float32Array(N), grain = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      delay[i] = (y + 4 + 3 * sin(x * 0.13 + 1.1) + 3 * vn(x / 5, y / 5, 11)) / (H + 10);\n      grain[i] = 0.6 * (R() - 0.5) + 0.4 * (vn(x / 1.7, y / 1.7, 13) - 0.5);\n    }\n  // Three hairline cracks, each a short wandering line from a thick spot,\n  // numbered 0..1 along its length so it opens from one end.\n  const crack = new Float32Array(N);\n  for (let n = 0; n \u003c 3; n++) {\n    let best = 0, bi = 0;\n    for (let t = 0; t \u003c 60; t++) {\n      const i = floor(R() * N);\n      if (h[i] > best && !crack[i]) (best = h[i]), (bi = i);\n    }\n    let x = bi % W, y = floor(bi / W), a = R() * 2 * PI;\n    const len = 14 + floor(R() * 12);\n    for (let s = 0; s \u003c len; s++) {\n      const i = floor(y) * W + floor(x);\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) break;\n      crack[i] = max(crack[i], 0.02 + s / len);\n      a += (R() - 0.5) * 0.9;\n      x += cos(a) * 0.9;\n      y += sin(a) * 0.9;\n    }\n  }\n  Object.assign(P, { h, gx, gy, rank, delay, grain, crack });\n}\n\nexport function setup(params) {\n  params.s = {\n    c: 0, hue: 0, speed: 2, thick: 0, gloss: 0.06, ts: -0.5, tk: 0, ps: -0.5, pk: 0,\n  };\n  lay(params.s);\n}\n\n// Drying times in clock seconds (one a second at Speed 2): an LED of rank r\n// starts to dry at age A0 + r * span and is dry after band more.\nconst A0 = 1.0, SWEEP = 2.2, HOLD = 1.2;\nconst spanOf = (t) => 6 + (t \u003c 0 ? 3.5 * t : 5 * t);\nconst bandOf = (t) => 1.6 + (t \u003c 0 ? -1.2 * t : -0.6 * t);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], -1, 1);\n  P.gloss = cl(k[3], -1, 1);\n  P.c += d * P.speed * 0.5;\n  const span = spanOf(P.thick), band = bandOf(P.thick);\n  const sweeping = P.c \u003c P.ts + P.tk * SWEEP;\n  const allDry = P.c - (P.ts + P.tk * SWEEP) > A0 + span + band + HOLD;\n  if (!sweeping && (allDry || (input.btnPressed && input.btnPressed[0]))) {\n    (P.ps = P.ts), (P.pk = P.tk), (P.ts = P.c), (P.tk = 1);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { h, gx, gy, rank, delay, grain, crack } = P;\n  const span = spanOf(P.thick), band = bandOf(P.thick), c = P.c;\n  const relief = 2.4 + 1.6 * P.thick, g = P.gloss;\n  // A lamp above the panel drifts slowly, and the wet clay mirrors it as a\n  // soft spot that the ridges and scrapes break into streaks.\n  const la = 0.3 * c;\n  const Lx = 32 + 46 * sin(la), Ly = 60 + 70 * sin(0.63 * la + 1.2), Lz = 150;\n  const Ex = 32, Ey = 70, Ez = 260;\n  const shin = 14 + 30 * (g + 1), specK = 0.25 + 0.5 * (g + 1) / 2;\n  const hue = P.hue + 0.935;\n  const wet = [0, 0, 0], dry = [0, 0, 0], deep = [0, 0, 0];\n  hsv(hue, 0.64 + 0.08 * g, 0.56 - 0.05 * g, wet, 0);\n  hsv(hue + 0.01, 0.12, 0.92, dry, 0);\n  hsv(hue + 0.005, 0.3, 0.84, deep, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const tNew = P.ts + P.tk * SWEEP * delay[i];\n      const fresh = c >= tNew;\n      const tw = fresh ? tNew : P.ps + P.pk * SWEEP * delay[i];\n      const age = c - tw;\n      const D = cl((age - A0 - rank[i] * span) / band, 0, 1);\n      const nx = -gx[i] * relief, ny = -gy[i] * relief, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n      let lx = Lx - x, ly = Ly - y, lz = Lz;\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const dif = (nx * lx + ny * ly + lz) * nl;\n      const nh = max(0, (nx * hx + ny * hy + hz) * hi * nl);\n      // Wet: deep colour shaded by the relief, with the sheen. The sheen\n      // goes first as the surface turns matte, then the colour lifts.\n      const shiny = 1 - sm(0, 0.3, D), lift = sm(0.12, 1, D);\n      // Behind the rewetting band the clay carries a film of water, with a\n      // bright line where the band's edge is.\n      const water = fresh && P.tk ? sm(1.1, 0, age) : 0, rim = fresh && P.tk ? sm(0.06, 0, age) : 0;\n      const spec = (specK * shiny * nh ** shin + water * (0.35 * nh ** 90 + 0.05) + 0.3 * rim) * 255;\n      const shade = (0.62 + 0.45 * dif) * (1 - 0.18 * water);\n      // Dry: pale and chalky, the thick ridges keeping a little more colour.\n      const th = sm(0.45, 0.85, h[i]), gr = 1 + 0.13 * grain[i], ds = (0.84 + 0.2 * dif) * gr;\n      let dr = (dry[0] + (deep[0] - dry[0]) * th) * ds, dg = (dry[1] + (deep[1] - dry[1]) * th) * ds, db = (dry[2] + (deep[2] - dry[2]) * th) * ds;\n      // A hairline crack opens where a crack runs, once that spot is dry.\n      const ck = crack[i];\n      if (ck > 0) {\n        const k = sm(0.6 + 1.4 * ck, 0.9 + 1.4 * ck, age - A0 - rank[i] * span - band);\n        const f = 0.55 * k;\n        (dr += (deep[0] * 0.7 - dr) * f), (dg += (deep[1] * 0.7 - dg) * f), (db += (deep[2] * 0.7 - db) * f);\n      }\n      const wr = wet[0] * shade, wg = wet[1] * shade, wb = wet[2] * shade;\n      const r = wr + (dr - wr) * lift + spec;\n      const gg = wg + (dg - wg) * lift + spec;\n      const b = wb + (db - wb) * lift + spec * 0.96;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thickness=-1..1, Gloss=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The clay's colour once round the wheel; the dry clay keeps a pale tint of it. At 0 rose clay, deep raspberry wet and blush when dry; at 0.1 terracotta, at 0.35 green clay, at 0.6 teal, at 0.85 violet."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first pale spots open within a second and the last wet ridge goes pale at 8.1 seconds; the clay stays dry for 1.2 seconds, then a band of water sweeps down the panel in 2.2 seconds and it dries again, about 12 seconds a round. The lamp's reflection drifts with it. At 0.2 all of it runs ten times slower."},{"name":"Thickness","min":-1,"max":1,"about":"At -1 a thin coat with a shallow relief that pales almost all at once and is dry at 5.8 seconds; at 0 the spatula ridges stand out and the front works round them; at 1 the ridges are deepest, the pale patches open as sharp islands and the last of the clay dries at 12.5 seconds."},{"name":"Gloss","min":-1,"max":1,"about":"Only the wet clay. At -1 satin, a broad soft sheen that lifts the whole surface; at 1 a wet look, the colour deeper and the lamp's reflection a tight bright spot that the scrape lines break into streaks. The sheen goes before the colour lifts, so a damp matte band leads every pale patch."}],"start":[0,2,0,0.06],"measures":{"motion":0.0642,"detail":0.0418,"edges":0.1071,"complexity":2.3182,"coverage":1,"colour":0.1574,"drift":0.2242},"knobResponse":[0.2918,0.1358,0.0941,0.1324]},{"slug":"cleansing-balm","title":"Cleansing Balm","family":"cosmetic","round":33,"note":"서리 낀 셔벗 밤이 무광으로 판을 채우고, 아래에서 올라오는 온기와 보이지 않는 손끝이 닿은 곳마다 밤이 녹아 맑은 광택 오일이 돼요. 오일은 흘러내려 바닥에 고이고, 다 녹으면 위에서 새 밤이 다시 휘핑돼요. K3 은 녹는 빠르기와 높이를 정하고, K1 을 누르면 손끝 하나가 지름 20 LED 를 한 번에 녹여요.","idea":"A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.","buttons":"K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.","code":"// ===== Patternflow pattern =====\n// Title:   Cleansing Balm\n// Family:  cosmetic\n// Idea:    A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a sherbet cleansing balm melting into oil\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1\n//\n// Knob 1: Hue. The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown.\n// Knob 2: Speed. At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower.\n// Knob 3: Warmth. How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s.\n// Knob 4: Grain. The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting.\n// Buttons: K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Pink sherbet at Hue 0.\nconst H0 = 0.95;\n// A melted LED gives REL of oil. A film FILM thick clings where it is; above\n// that the oil runs down, faster the thicker it is, and a cell holds at most\n// CAP, so the pool fills up from the bottom row.\nconst REL = 0.42, FILM = 0.07, CAP = 1, KFLOW = 9;\n\n// Smooth noise in a 128 x 128 tile, three octaves of 4, 8 and 16 cells.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = rnd() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The frost: a fine grain, one value per LED, and a coarse one, the same\n// values blurred over 3 x 3 LEDs and scaled back up, so its crystals are two\n// or three LEDs across. SPK picks the sparkling specks.\nconst GF = Float32Array.from({ length: N }, (_, i) => hash(i + 77) * 2 - 1);\nconst GC = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) s += GF[((y + dy + H) % H) * W + ((x + dx + W) % W)];\n    GC[y * W + x] = s / 3;\n  }\nconst SPK = Float32Array.from({ length: N }, (_, i) => hash(i + 991));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  buildTex();\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    Hb: F(N), mb: F(N), nz: F(N), Hn: F(N), mbN: F(N), nzN: F(N),\n    m: F(N), F: F(N), age: F(N), Ho: F(N), Hs: F(N), wo: F(N),\n    phase: 0, Yf: H + 10, Yl: -10, row: 0, hold: 0, T: 0, next: 1, fingers: [], dir: 1,\n    hue: 0, speed: 2, warm: 0, grain: 0.06, wm: 0, started: false, col: F(7 * 3), colHue: NaN,\n  };\n}\n\n// A fresh layer of balm. A soft whip of lumps, then fifteen spoon scoops, each\n// an oval hollow 15 to 25 LEDs long with faint rings where the spoon's edge\n// dragged and a lip of balm piled up at the end the spoon left by. nz is how\n// long each LED holds out against warmth, and mk is the sherbet's marbling.\nfunction lay(Hh, mk, nz) {\n  const ox = rnd() * T, oy = rnd() * T;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      Hh[i] = 0.3 * tap(x * 1.7 + ox, y * 1.7 + oy);\n      mk[i] = tap(x * 0.55 + oy, y * 0.38 + ox + 40);\n      nz[i] = 0.9 * tap(x * 2.6 + ox + 60, y * 2.6 + oy);\n    }\n  for (let k = 0; k \u003c 15; k++) {\n    const L = 15 + rnd() * 10, Wd = L * (0.5 + 0.15 * rnd()), a = rnd() * 2 * PI, ca = cos(a), sa = sin(a);\n    const cx = rnd() * W, cy = -6 + rnd() * (H + 12), E = L * 1.4;\n    for (let y = max(0, floor(cy - E)); y \u003c= min(H - 1, floor(cy + E)); y++)\n      for (let x = max(0, floor(cx - E)); x \u003c= min(W - 1, floor(cx + E)); x++) {\n        const dx = x + 0.5 - cx, dy = y + 0.5 - cy, u = (dx * ca + dy * sa) / L, v = (-dx * sa + dy * ca) / Wd;\n        const rho = sqrt(u * u + v * v);\n        if (rho > 1.4) continue;\n        const i = y * W + x, wgt = 1 - sm((rho - 0.82) / 0.3);\n        const dish = rho \u003c 1 ? -0.75 * (1 - rho * rho) + 0.025 * sin(rho * 19) : 0;\n        const lip = 0.55 * exp(-(((rho - 1.02) / 0.14) ** 2)) * (0.4 + 0.6 * sm((u + 1) / 2));\n        Hh[i] = Hh[i] * (1 - wgt) + dish * wgt + lip;\n      }\n  }\n}\n\n// A fingertip: it comes down at (x, y) and its warm print spreads to radius R\n// over `grow` seconds, melting what it covers.\nfunction finger(S, big) {\n  let x = 8 + rnd() * (W - 16), y = 0;\n  // Into the balm, above the front.\n  const hiY = min(H - 10, S.Yf - 14);\n  if (hiY > 12) y = 8 + rnd() * (hiY - 8);\n  else y = 10 + rnd() * (H - 20);\n  if (big) x = 14 + rnd() * (W - 28);\n  S.fingers.push({ x, y, R: big ? 10 : 6 + rnd() * 4 + 3 * S.warm, grow: big ? 0.25 : 0.8, t: 0, r: 0 });\n}\n\nfunction step(S, st) {\n  const { m, F, age, Hb, nz } = S;\n  S.T += st;\n  if (S.phase === 0) {\n    S.Yf -= st * (5 + 7 * S.warm);\n    S.next -= st;\n    if (S.next \u003c= 0) {\n      S.next = (3.2 - 1.8 * S.warm) * (0.7 + 0.6 * rnd());\n      finger(S, false);\n    }\n    if (S.Yf \u003c H - (0.57 + 0.5 * S.warm) * (H + 12)) {\n      S.phase = 1;\n      S.hold = 0;\n    }\n  } else if (S.phase === 1) {\n    S.hold += st;\n    if (S.hold > 1.5) {\n      // Whip a fresh layer on from the top.\n      S.phase = 2;\n      S.Yl = -6;\n      S.row = 0;\n      S.Yf = H + 1000;\n      lay(S.Hn, S.mbN, S.nzN);\n    }\n  } else {\n    S.Yl += st * 46;\n    const to = min(H, floor(S.Yl));\n    for (; S.row \u003c to; S.row++)\n      for (let x = 0, i = S.row * W; x \u003c W; x++, i++) {\n        Hb[i] = S.Hn[i];\n        S.mb[i] = S.mbN[i];\n        nz[i] = S.nzN[i];\n        m[i] = 0;\n        F[i] = 0;\n        age[i] = 0;\n      }\n    if (S.Yl > H + 8) {\n      S.phase = 0;\n      S.Yf = H + 10;\n      S.next = 0.6;\n      S.fingers.length = 0;\n    }\n  }\n  // The front: LEDs below it melt, ridges and the lumps of nz holding out a\n  // few rows longer, so it climbs ragged. Once an LED starts it melts through\n  // in about 0.4 s, and that band is the wet rim.\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const wf = (y - S.Yf) / 4;\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (m[i] >= 1) {\n        age[i] += st;\n        continue;\n      }\n      if (m[i] > 0 || wf > 0.9 * Hb[i] + nz[i]) {\n        const dm = min(1 - m[i], st * 2.4);\n        m[i] += dm;\n        F[i] += dm * REL;\n      }\n    }\n  }\n  const fs = S.fingers;\n  for (let k = fs.length - 1; k >= 0; k--) {\n    const f = fs[k];\n    f.t += st;\n    f.r = f.R * sm(f.t / f.grow);\n    const E = f.R + 3;\n    for (let y = max(0, floor(f.y - E)); y \u003c= min(H - 1, floor(f.y + E)); y++)\n      for (let x = max(0, floor(f.x - E)); x \u003c= min(W - 1, floor(f.x + E)); x++) {\n        const i = y * W + x;\n        if (m[i] > 0) continue;\n        const d = Math.hypot(x + 0.5 - f.x, y + 0.5 - f.y);\n        if (d \u003c f.r - 1.5 * (0.9 * Hb[i] + nz[i])) m[i] = 0.01;\n      }\n    if (f.t > f.grow + 0.5) fs.splice(k, 1);\n  }\n  // The oil runs down a row at a time, bottom row first so nothing moves two\n  // rows in one step.\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      // Unmelted balm soaks up a little, so oil only trickles over it.\n      const mob = F[i] - (m[i] > 0 ? FILM : 0.22);\n      if (mob \u003c= 0) continue;\n      const j = i + W;\n      let fl = min(mob, st * KFLOW * mob * (0.25 + F[i]));\n      fl = min(fl, CAP - F[j]);\n      if (fl \u003c= 0) continue;\n      F[i] -= fl;\n      F[j] += fl;\n    }\n  // The oil levels out sideways, quickly where it is deep, so the pool's top\n  // is flat and a film does not keep the stripes it ran down in.\n  S.dir = -S.dir;\n  for (let y = 0; y \u003c H; y++) {\n    const r0 = y * W;\n    for (let n = 0; n \u003c W - 1; n++) {\n      const x = S.dir > 0 ? n : W - 2 - n, i = r0 + x, d = F[i] - F[i + 1];\n      if (F[i] \u003c FILM && F[i + 1] \u003c FILM) continue;\n      const mv = d * (F[i] > 0.3 || F[i + 1] > 0.3 ? 0.35 : 0.15);\n      F[i] -= mv;\n      F[i + 1] += mv;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.warm = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    lay(S.Hb, S.mb, S.nz);\n    // Open with the bottom fifth already melted and a fingertip or two in.\n    S.Yf = H - 12;\n    S.next = 0.3;\n    for (let i = 0; i \u003c 70; i++) step(S, 1 / 20);\n  }\n  if (input.btnPressed && input.btnPressed[0]) finger(S, true);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours: the sherbet, its creamy marbling, the glow under the oil, the\n// oil's own tint, the wet rim and the frost's specks.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0, hf = h - floor(h);\n  // Orange and gold go brown at middle light on the LEDs, so round them\n  // everything is lifted and paled: apricot, peach and butter.\n  const dw = abs(hf - 0.13), wm = sm(1.5 - min(dw, 1 - dw) / 0.12);\n  hsv(h, 0.44 - 0.14 * wm, 0.98, c, 0);\n  hsv(h - 0.015, 0.22 - 0.06 * wm, 1, c, 3);\n  hsv(h - 0.02, 0.32 - 0.1 * wm, 1, c, 6);\n  hsv(h + 0.015, 0.78 - 0.38 * wm, 0.62 + 0.36 * wm, c, 9);\n  hsv(h, 0.22, 1, c, 12);\n  hsv(h + 0.05, 0.08, 1, c, 15);\n  S.wm = wm;\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.colHue !== S.hue) palette(S);\n  const { Hb, mb, m, F, age, Ho, Hs, col } = S, t = S.T;\n  // How much of each LED is oil: all of it once melted, and a wet film\n  // where oil runs down over balm that has not melted yet.\n  const wo = S.wo;\n  for (let i = 0; i \u003c N; i++) wo[i] = max(m[i], 0.7 * sm((F[i] - 0.12) / 0.3));\n  // The oil's surface: what is left of the balm's shape as it slumps flat in\n  // the two seconds after melting, the oil's own depth, and slow ripples\n  // carried down the panel at about 6 LEDs a second, then softened over\n  // 3 x 3 LEDs so the oil has no grain at all.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (wo[i] \u003c= 0) {\n        Ho[i] = Hb[i] * 0.7;\n        continue;\n      }\n      const sl = m[i] > 0 ? max(0, 1 - age[i] / 2) : 1, f = min(F[i], 1.2);\n      Ho[i] = 0.7 * Hb[i] * sl + 1.2 * f + 0.35 * tap(x * 1.1 + 20, y * 0.7 - t * 5) * (0.4 + f);\n    }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Hs[i] = (Ho[i - (x > 0 ? 1 : 0)] + 2 * Ho[i] + Ho[i + (x \u003c W - 1 ? 1 : 0)]) * 0.25;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Ho[i] = (Hs[i - (y > 0 ? W : 0)] + 2 * Hs[i] + Hs[i + (y \u003c H - 1 ? W : 0)]) * 0.25;\n  const g = S.grain, gA = 0.04 + 0.17 * g, spD = 0.03 + 0.09 * g, spV = 0.09 + 0.08 * g, lumps = 1 + 0.35 * g;\n  // A small light 60 degrees off the face of the panel wanders round the top\n  // left, so flat oil never catches it and only the slopes of ripples,\n  // slumping lumps and the pool's edge glint. Two long reflections of strip\n  // lights sweep across the oil and back every 18 s at Speed 2.\n  const az = -2.2 + 0.7 * sin(t * 0.37), lx = 0.866 * cos(az), ly = 0.866 * sin(az), lz = 0.5;\n  const hx0 = lx, hy0 = ly, hz0 = lz + 1, hl = Math.hypot(hx0, hy0, hz0);\n  const hx = hx0 / hl, hy = hy0 / hl, hz = hz0 / hl;\n  const band = 1.1 * sin(t * 0.35), band2 = band + (band > 0 ? -1.4 : 1.4);\n  // Warm oil at middle light is brown, so round orange and gold the oil\n  // glows brighter and turns to honey.\n  const lift = 1 + 0.32 * S.wm, tk = 0.85 + 0.25 * S.wm;\n  // The edge of a fresh layer being whipped on stands up as a rolled ridge.\n  const whip = S.phase === 2, Yl = S.Yl;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0;\n    const roll = whip ? 0.9 * exp(-(((y - Yl + 2.5) / 2.6) ** 2)) : 0, rollU = whip ? 0.9 * exp(-(((y - 1 - Yl + 2.5) / 2.6) ** 2)) : 0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const lf = x > 0 ? -1 : 0, rt = x \u003c W - 1 ? 1 : 0;\n      const mm = m[i], w = wo[i];\n      let r = 0, gg = 0, b = 0;\n      if (mm \u003c 1) {\n        // Matte balm: soft light from the top left, a little darker deep in\n        // the hollows, the marbling between sherbet and cream, and frost.\n        const ddx = (Hb[i + rt] - Hb[i + lf]) * 2.2 * lumps, ddy = (Hb[i + dn] - Hb[i + up]) * 2.2 * lumps + (roll - rollU) * 3;\n        const dif = (0.45 * ddx + 0.62 * ddy + 0.64) / sqrt(ddx * ddx + ddy * ddy + 1);\n        const sh = 0.8 + 0.22 * dif + 0.05 * cl(Hb[i] + roll, -0.8, 0.6);\n        const mk = sm(0.5 + 1.2 * sin(mb[i] * 11 + 0.8));\n        const f = sh * (1 + gA * (GF[i] * (1 - g) + GC[i] * g));\n        const sp = SPK[i] > 1 - spD ? spV : 0;\n        r = (col[0] + (col[3] - col[0]) * mk) * f + sp;\n        gg = (col[1] + (col[4] - col[1]) * mk) * f + sp;\n        b = (col[2] + (col[5] - col[2]) * mk) * f + sp;\n      }\n      if (w > 0) {\n        // Oil: the glow under it seen through a tint that deepens with the\n        // oil's depth, a sharp highlight from the small light, and the strip\n        // light's long reflection.\n        const nx = -(Ho[i + rt] - Ho[i + lf]) * 3.5, ny = -(Ho[i + dn] - Ho[i + up]) * 3.5, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        const nd = (nx * hx + ny * hy + hz) * nl;\n        const spec = nd > 0.9 ? ((nd - 0.9) / 0.1) ** 2 : 0;\n        const e = 2 * nl * (nx * 0.5 + ny * 0.85) * nl + (x - 32) / 90 + (y - 64) / 70, q = (e - band) / 0.14, q2 = (e - band2) / 0.1;\n        const s = min(1, spec) + 0.42 * exp(-q * q) + 0.28 * exp(-q2 * q2);\n        const dep = 0.3 + F[i], a = 1 - exp(-1.1 * dep);\n        const glow = (0.55 + 0.3 * tap(x * 0.6 + 70, y * 0.4 - t * 1.5)) * lift;\n        const orr = col[6] * glow * (1 - a) + col[9] * a * tk + s;\n        const og = col[7] * glow * (1 - a) + col[10] * a * tk + s;\n        const ob = col[8] * glow * (1 - a) + col[11] * a * tk + s;\n        r = r * (1 - w) + orr * w;\n        gg = gg * (1 - w) + og * w;\n        b = b * (1 - w) + ob * w;\n        // The wet rim: the band where the balm is turning, and the oil's\n        // edge against balm, a pale glassy line with a glint.\n        let rim = mm > 0 && mm \u003c 1 ? 4 * mm * (1 - mm) : 0;\n        if (mm >= 1 && (m[i + lf] \u003c 0.5 || m[i + rt] \u003c 0.5 || m[i + up] \u003c 0.5 || m[i + dn] \u003c 0.5)) rim = 0.8;\n        if (rim > 0) {\n          const k = 0.45 * rim;\n          r += (col[12] - r) * k + 0.1 * rim;\n          gg += (col[13] - gg) * k + 0.1 * rim;\n          b += (col[14] - b) * k + 0.1 * rim;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-cleansing-balm","type":"code","name":"cleansing-balm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cleansing Balm\n// Family:  cosmetic\n// Idea:    A whipped sherbet balm fills the panel, matte and frosty with spoon-scooped hollows and lips, until warmth climbs from the bottom and unseen fingertips press into it, and wherever it reaches the balm slumps into clear glossy oil with a wet rim at its edge, highlights gliding over it and a lighter glow showing through, while the oil runs down and pools at the bottom before a fresh layer is whipped on from the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a sherbet cleansing balm melting into oil\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1\n//\n// Knob 1: Hue. The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown.\n// Knob 2: Speed. At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower.\n// Knob 3: Warmth. How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s.\n// Knob 4: Grain. The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting.\n// Buttons: K1 tap presses a warm fingertip into the balm, and a round patch 20 LEDs across melts in a quarter of a second.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Pink sherbet at Hue 0.\nconst H0 = 0.95;\n// A melted LED gives REL of oil. A film FILM thick clings where it is; above\n// that the oil runs down, faster the thicker it is, and a cell holds at most\n// CAP, so the pool fills up from the bottom row.\nconst REL = 0.42, FILM = 0.07, CAP = 1, KFLOW = 9;\n\n// Smooth noise in a 128 x 128 tile, three octaves of 4, 8 and 16 cells.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = rnd() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The frost: a fine grain, one value per LED, and a coarse one, the same\n// values blurred over 3 x 3 LEDs and scaled back up, so its crystals are two\n// or three LEDs across. SPK picks the sparkling specks.\nconst GF = Float32Array.from({ length: N }, (_, i) => hash(i + 77) * 2 - 1);\nconst GC = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) s += GF[((y + dy + H) % H) * W + ((x + dx + W) % W)];\n    GC[y * W + x] = s / 3;\n  }\nconst SPK = Float32Array.from({ length: N }, (_, i) => hash(i + 991));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  buildTex();\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    Hb: F(N), mb: F(N), nz: F(N), Hn: F(N), mbN: F(N), nzN: F(N),\n    m: F(N), F: F(N), age: F(N), Ho: F(N), Hs: F(N), wo: F(N),\n    phase: 0, Yf: H + 10, Yl: -10, row: 0, hold: 0, T: 0, next: 1, fingers: [], dir: 1,\n    hue: 0, speed: 2, warm: 0, grain: 0.06, wm: 0, started: false, col: F(7 * 3), colHue: NaN,\n  };\n}\n\n// A fresh layer of balm. A soft whip of lumps, then fifteen spoon scoops, each\n// an oval hollow 15 to 25 LEDs long with faint rings where the spoon's edge\n// dragged and a lip of balm piled up at the end the spoon left by. nz is how\n// long each LED holds out against warmth, and mk is the sherbet's marbling.\nfunction lay(Hh, mk, nz) {\n  const ox = rnd() * T, oy = rnd() * T;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      Hh[i] = 0.3 * tap(x * 1.7 + ox, y * 1.7 + oy);\n      mk[i] = tap(x * 0.55 + oy, y * 0.38 + ox + 40);\n      nz[i] = 0.9 * tap(x * 2.6 + ox + 60, y * 2.6 + oy);\n    }\n  for (let k = 0; k \u003c 15; k++) {\n    const L = 15 + rnd() * 10, Wd = L * (0.5 + 0.15 * rnd()), a = rnd() * 2 * PI, ca = cos(a), sa = sin(a);\n    const cx = rnd() * W, cy = -6 + rnd() * (H + 12), E = L * 1.4;\n    for (let y = max(0, floor(cy - E)); y \u003c= min(H - 1, floor(cy + E)); y++)\n      for (let x = max(0, floor(cx - E)); x \u003c= min(W - 1, floor(cx + E)); x++) {\n        const dx = x + 0.5 - cx, dy = y + 0.5 - cy, u = (dx * ca + dy * sa) / L, v = (-dx * sa + dy * ca) / Wd;\n        const rho = sqrt(u * u + v * v);\n        if (rho > 1.4) continue;\n        const i = y * W + x, wgt = 1 - sm((rho - 0.82) / 0.3);\n        const dish = rho \u003c 1 ? -0.75 * (1 - rho * rho) + 0.025 * sin(rho * 19) : 0;\n        const lip = 0.55 * exp(-(((rho - 1.02) / 0.14) ** 2)) * (0.4 + 0.6 * sm((u + 1) / 2));\n        Hh[i] = Hh[i] * (1 - wgt) + dish * wgt + lip;\n      }\n  }\n}\n\n// A fingertip: it comes down at (x, y) and its warm print spreads to radius R\n// over `grow` seconds, melting what it covers.\nfunction finger(S, big) {\n  let x = 8 + rnd() * (W - 16), y = 0;\n  // Into the balm, above the front.\n  const hiY = min(H - 10, S.Yf - 14);\n  if (hiY > 12) y = 8 + rnd() * (hiY - 8);\n  else y = 10 + rnd() * (H - 20);\n  if (big) x = 14 + rnd() * (W - 28);\n  S.fingers.push({ x, y, R: big ? 10 : 6 + rnd() * 4 + 3 * S.warm, grow: big ? 0.25 : 0.8, t: 0, r: 0 });\n}\n\nfunction step(S, st) {\n  const { m, F, age, Hb, nz } = S;\n  S.T += st;\n  if (S.phase === 0) {\n    S.Yf -= st * (5 + 7 * S.warm);\n    S.next -= st;\n    if (S.next \u003c= 0) {\n      S.next = (3.2 - 1.8 * S.warm) * (0.7 + 0.6 * rnd());\n      finger(S, false);\n    }\n    if (S.Yf \u003c H - (0.57 + 0.5 * S.warm) * (H + 12)) {\n      S.phase = 1;\n      S.hold = 0;\n    }\n  } else if (S.phase === 1) {\n    S.hold += st;\n    if (S.hold > 1.5) {\n      // Whip a fresh layer on from the top.\n      S.phase = 2;\n      S.Yl = -6;\n      S.row = 0;\n      S.Yf = H + 1000;\n      lay(S.Hn, S.mbN, S.nzN);\n    }\n  } else {\n    S.Yl += st * 46;\n    const to = min(H, floor(S.Yl));\n    for (; S.row \u003c to; S.row++)\n      for (let x = 0, i = S.row * W; x \u003c W; x++, i++) {\n        Hb[i] = S.Hn[i];\n        S.mb[i] = S.mbN[i];\n        nz[i] = S.nzN[i];\n        m[i] = 0;\n        F[i] = 0;\n        age[i] = 0;\n      }\n    if (S.Yl > H + 8) {\n      S.phase = 0;\n      S.Yf = H + 10;\n      S.next = 0.6;\n      S.fingers.length = 0;\n    }\n  }\n  // The front: LEDs below it melt, ridges and the lumps of nz holding out a\n  // few rows longer, so it climbs ragged. Once an LED starts it melts through\n  // in about 0.4 s, and that band is the wet rim.\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const wf = (y - S.Yf) / 4;\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (m[i] >= 1) {\n        age[i] += st;\n        continue;\n      }\n      if (m[i] > 0 || wf > 0.9 * Hb[i] + nz[i]) {\n        const dm = min(1 - m[i], st * 2.4);\n        m[i] += dm;\n        F[i] += dm * REL;\n      }\n    }\n  }\n  const fs = S.fingers;\n  for (let k = fs.length - 1; k >= 0; k--) {\n    const f = fs[k];\n    f.t += st;\n    f.r = f.R * sm(f.t / f.grow);\n    const E = f.R + 3;\n    for (let y = max(0, floor(f.y - E)); y \u003c= min(H - 1, floor(f.y + E)); y++)\n      for (let x = max(0, floor(f.x - E)); x \u003c= min(W - 1, floor(f.x + E)); x++) {\n        const i = y * W + x;\n        if (m[i] > 0) continue;\n        const d = Math.hypot(x + 0.5 - f.x, y + 0.5 - f.y);\n        if (d \u003c f.r - 1.5 * (0.9 * Hb[i] + nz[i])) m[i] = 0.01;\n      }\n    if (f.t > f.grow + 0.5) fs.splice(k, 1);\n  }\n  // The oil runs down a row at a time, bottom row first so nothing moves two\n  // rows in one step.\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      // Unmelted balm soaks up a little, so oil only trickles over it.\n      const mob = F[i] - (m[i] > 0 ? FILM : 0.22);\n      if (mob \u003c= 0) continue;\n      const j = i + W;\n      let fl = min(mob, st * KFLOW * mob * (0.25 + F[i]));\n      fl = min(fl, CAP - F[j]);\n      if (fl \u003c= 0) continue;\n      F[i] -= fl;\n      F[j] += fl;\n    }\n  // The oil levels out sideways, quickly where it is deep, so the pool's top\n  // is flat and a film does not keep the stripes it ran down in.\n  S.dir = -S.dir;\n  for (let y = 0; y \u003c H; y++) {\n    const r0 = y * W;\n    for (let n = 0; n \u003c W - 1; n++) {\n      const x = S.dir > 0 ? n : W - 2 - n, i = r0 + x, d = F[i] - F[i + 1];\n      if (F[i] \u003c FILM && F[i + 1] \u003c FILM) continue;\n      const mv = d * (F[i] > 0.3 || F[i + 1] > 0.3 ? 0.35 : 0.15);\n      F[i] -= mv;\n      F[i + 1] += mv;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.warm = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    lay(S.Hb, S.mb, S.nz);\n    // Open with the bottom fifth already melted and a fingertip or two in.\n    S.Yf = H - 12;\n    S.next = 0.3;\n    for (let i = 0; i \u003c 70; i++) step(S, 1 / 20);\n  }\n  if (input.btnPressed && input.btnPressed[0]) finger(S, true);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours: the sherbet, its creamy marbling, the glow under the oil, the\n// oil's own tint, the wet rim and the frost's specks.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0, hf = h - floor(h);\n  // Orange and gold go brown at middle light on the LEDs, so round them\n  // everything is lifted and paled: apricot, peach and butter.\n  const dw = abs(hf - 0.13), wm = sm(1.5 - min(dw, 1 - dw) / 0.12);\n  hsv(h, 0.44 - 0.14 * wm, 0.98, c, 0);\n  hsv(h - 0.015, 0.22 - 0.06 * wm, 1, c, 3);\n  hsv(h - 0.02, 0.32 - 0.1 * wm, 1, c, 6);\n  hsv(h + 0.015, 0.78 - 0.38 * wm, 0.62 + 0.36 * wm, c, 9);\n  hsv(h, 0.22, 1, c, 12);\n  hsv(h + 0.05, 0.08, 1, c, 15);\n  S.wm = wm;\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.colHue !== S.hue) palette(S);\n  const { Hb, mb, m, F, age, Ho, Hs, col } = S, t = S.T;\n  // How much of each LED is oil: all of it once melted, and a wet film\n  // where oil runs down over balm that has not melted yet.\n  const wo = S.wo;\n  for (let i = 0; i \u003c N; i++) wo[i] = max(m[i], 0.7 * sm((F[i] - 0.12) / 0.3));\n  // The oil's surface: what is left of the balm's shape as it slumps flat in\n  // the two seconds after melting, the oil's own depth, and slow ripples\n  // carried down the panel at about 6 LEDs a second, then softened over\n  // 3 x 3 LEDs so the oil has no grain at all.\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      if (wo[i] \u003c= 0) {\n        Ho[i] = Hb[i] * 0.7;\n        continue;\n      }\n      const sl = m[i] > 0 ? max(0, 1 - age[i] / 2) : 1, f = min(F[i], 1.2);\n      Ho[i] = 0.7 * Hb[i] * sl + 1.2 * f + 0.35 * tap(x * 1.1 + 20, y * 0.7 - t * 5) * (0.4 + f);\n    }\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Hs[i] = (Ho[i - (x > 0 ? 1 : 0)] + 2 * Ho[i] + Ho[i + (x \u003c W - 1 ? 1 : 0)]) * 0.25;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) Ho[i] = (Hs[i - (y > 0 ? W : 0)] + 2 * Hs[i] + Hs[i + (y \u003c H - 1 ? W : 0)]) * 0.25;\n  const g = S.grain, gA = 0.04 + 0.17 * g, spD = 0.03 + 0.09 * g, spV = 0.09 + 0.08 * g, lumps = 1 + 0.35 * g;\n  // A small light 60 degrees off the face of the panel wanders round the top\n  // left, so flat oil never catches it and only the slopes of ripples,\n  // slumping lumps and the pool's edge glint. Two long reflections of strip\n  // lights sweep across the oil and back every 18 s at Speed 2.\n  const az = -2.2 + 0.7 * sin(t * 0.37), lx = 0.866 * cos(az), ly = 0.866 * sin(az), lz = 0.5;\n  const hx0 = lx, hy0 = ly, hz0 = lz + 1, hl = Math.hypot(hx0, hy0, hz0);\n  const hx = hx0 / hl, hy = hy0 / hl, hz = hz0 / hl;\n  const band = 1.1 * sin(t * 0.35), band2 = band + (band > 0 ? -1.4 : 1.4);\n  // Warm oil at middle light is brown, so round orange and gold the oil\n  // glows brighter and turns to honey.\n  const lift = 1 + 0.32 * S.wm, tk = 0.85 + 0.25 * S.wm;\n  // The edge of a fresh layer being whipped on stands up as a rolled ridge.\n  const whip = S.phase === 2, Yl = S.Yl;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const up = y > 0 ? -W : 0, dn = y \u003c H - 1 ? W : 0;\n    const roll = whip ? 0.9 * exp(-(((y - Yl + 2.5) / 2.6) ** 2)) : 0, rollU = whip ? 0.9 * exp(-(((y - 1 - Yl + 2.5) / 2.6) ** 2)) : 0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const lf = x > 0 ? -1 : 0, rt = x \u003c W - 1 ? 1 : 0;\n      const mm = m[i], w = wo[i];\n      let r = 0, gg = 0, b = 0;\n      if (mm \u003c 1) {\n        // Matte balm: soft light from the top left, a little darker deep in\n        // the hollows, the marbling between sherbet and cream, and frost.\n        const ddx = (Hb[i + rt] - Hb[i + lf]) * 2.2 * lumps, ddy = (Hb[i + dn] - Hb[i + up]) * 2.2 * lumps + (roll - rollU) * 3;\n        const dif = (0.45 * ddx + 0.62 * ddy + 0.64) / sqrt(ddx * ddx + ddy * ddy + 1);\n        const sh = 0.8 + 0.22 * dif + 0.05 * cl(Hb[i] + roll, -0.8, 0.6);\n        const mk = sm(0.5 + 1.2 * sin(mb[i] * 11 + 0.8));\n        const f = sh * (1 + gA * (GF[i] * (1 - g) + GC[i] * g));\n        const sp = SPK[i] > 1 - spD ? spV : 0;\n        r = (col[0] + (col[3] - col[0]) * mk) * f + sp;\n        gg = (col[1] + (col[4] - col[1]) * mk) * f + sp;\n        b = (col[2] + (col[5] - col[2]) * mk) * f + sp;\n      }\n      if (w > 0) {\n        // Oil: the glow under it seen through a tint that deepens with the\n        // oil's depth, a sharp highlight from the small light, and the strip\n        // light's long reflection.\n        const nx = -(Ho[i + rt] - Ho[i + lf]) * 3.5, ny = -(Ho[i + dn] - Ho[i + up]) * 3.5, nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        const nd = (nx * hx + ny * hy + hz) * nl;\n        const spec = nd > 0.9 ? ((nd - 0.9) / 0.1) ** 2 : 0;\n        const e = 2 * nl * (nx * 0.5 + ny * 0.85) * nl + (x - 32) / 90 + (y - 64) / 70, q = (e - band) / 0.14, q2 = (e - band2) / 0.1;\n        const s = min(1, spec) + 0.42 * exp(-q * q) + 0.28 * exp(-q2 * q2);\n        const dep = 0.3 + F[i], a = 1 - exp(-1.1 * dep);\n        const glow = (0.55 + 0.3 * tap(x * 0.6 + 70, y * 0.4 - t * 1.5)) * lift;\n        const orr = col[6] * glow * (1 - a) + col[9] * a * tk + s;\n        const og = col[7] * glow * (1 - a) + col[10] * a * tk + s;\n        const ob = col[8] * glow * (1 - a) + col[11] * a * tk + s;\n        r = r * (1 - w) + orr * w;\n        gg = gg * (1 - w) + og * w;\n        b = b * (1 - w) + ob * w;\n        // The wet rim: the band where the balm is turning, and the oil's\n        // edge against balm, a pale glassy line with a glint.\n        let rim = mm > 0 && mm \u003c 1 ? 4 * mm * (1 - mm) : 0;\n        if (mm >= 1 && (m[i + lf] \u003c 0.5 || m[i + rt] \u003c 0.5 || m[i + up] \u003c 0.5 || m[i + dn] \u003c 0.5)) rim = 0.8;\n        if (rim > 0) {\n          const k = 0.45 * rim;\n          r += (col[12] - r) * k + 0.1 * rim;\n          gg += (col[13] - gg) * k + 0.1 * rim;\n          b += (col[14] - b) * k + 0.1 * rim;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Warmth=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The balm's colour, all the way round the wheel from pink sherbet at 0, the oil a deeper clear tint of it. Round orange and yellow the balm is paled and the oil lifted to honey, so neither goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the warm front climbs 5 to 12 LEDs a second, a fingertip comes down every 1.4 to 3.2 s and one melt runs 18 to 22 s from fresh balm to fresh balm; at 0.2 all of it ten times slower."},{"name":"Warmth","min":0,"max":1,"about":"How fast and how far it melts: at 0 the front climbs 5 LEDs a second and stops about 48 rows from the top, with a fingertip every 3.2 s; at 1 it climbs 12 a second and takes the whole panel, with a bigger fingertip every 1.4 s."},{"name":"Grain","min":0,"max":1,"about":"The frost in the matte balm: at 0 a fine sugar a LED across over a soft whip; at 1 coarse crystals two or three LEDs across, with more sparkling specks and lumpier whip. The oil is smooth at any setting."}],"start":[0,2,0,0.06],"measures":{"motion":0.1343,"detail":0.0375,"edges":0.1005,"complexity":2.1868,"coverage":1,"colour":0.1701,"drift":0.1197},"knobResponse":[0.2675,0.0873,0.1368,0.0422]},{"slug":"climber","title":"Climber","family":"pixel","round":2,"note":"빨간 목도리를 맨 꼬마가 혼자서 끝없는 탑의 턱을 뛰어올라요. K4 를 돌리면 한낮에서 노을을 지나 횃불 켜진 밤이 돼요.","idea":"A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.","buttons":"K1 tap makes the climber jump now, and again in the air.","code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","layer":{"id":"layer-climber","type":"code","name":"climber","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The stone of the tower and its ledges; the climber keeps its own colours."},{"name":"Speed","min":0.3,"max":3.5,"about":"How fast the climber runs and jumps, and with it how fast the tower goes by."},{"name":"Gap","min":16,"max":34,"about":"How far apart the ledges are, from quick hops to long leaps with the climber high in the air."},{"name":"Sky","min":0,"max":1,"about":"The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit."}],"start":[0,2,16,0.06],"measures":{"motion":1.5193,"detail":0.0867,"edges":0.9308,"complexity":0.2662,"coverage":0.7278,"colour":0.1488,"drift":0.118},"knobResponse":[0.0827,0.1542,0.146,0.1338]},{"slug":"climbing-wall","title":"Climbing Wall","family":"sport","round":27,"note":"체육관의 리드 벽을 정면에서 봐요. 합판에 색깔별 루트가 박혀 있고, 클라이머가 스폿 빛을 받으며 손발을 하나씩 옮겨 오르다 퀵드로마다 로프를 걸어요. 꼭대기 앵커를 걸면 빌레이어가 내려 주고 둘이 자리를 바꿔요. K3 은 셋까지 나란히 오르게 하고, 누르면 클라이머가 떨어져 로프에 걸려요.","idea":"A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.","buttons":"K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.","code":"// ===== Patternflow pattern =====\n// Title:   Climbing Wall\n// Family:  sport\n// Idea:    A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after an indoor lead-climbing wall\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1\n//\n// Knob 1: Route. The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour.\n// Knob 2: Speed. At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall.\n// Knob 3: Climbers. One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour.\n// Knob 4: Light. House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes.\n// Buttons: K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.\n\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (u) => ((u = cl(u, 0, 1)), u * u * (3 - 2 * u));\nconst hyp = (x, y) => sqrt(x * x + y * y), F32 = (n) => new Float32Array(n);\nconst hex = (h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));\nconst blend = (o, c, k, a) => {\n  for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] * k - F[o + j]) * a;\n};\nconst hash = (i, j) => ((Math.imul(i * 7919 + j * 104729 + 17, 2654435761) >>> 8) & 1023) / 1024;\n\n// Rows of the mat and the kickboard. Each lane's bolt line LX: eight quickdraws\n// (the rope runs CLP under the bolt) and a lower-off ring.\nconst FL = 121, FT = FL - 0.5, KICK = 117, LX = [11, 32, 53], BOLT = [95, 84, 73, 62, 51, 40, 29, 18], CLP = 3.5, RING = 11;\n// A route: NH hand holds HS rows apart, left and right in turn, a foot chip\n// CHIP rows under each. A lane has two routes, one each side of its bolts.\nconst NH = 20, HY0 = 105, HS = 5, CHIP = 15;\n// The body in LEDs: arm, forearm, thigh, shin, hip to shoulders; hips standing.\nconst UA = 4.1, FA = 4.1, TH = 4.8, SN = 4.8, TOR = 6, STAND = FL - 10.05;\n// Route colours in Route's order with the lane and side each is set on.\nconst RC = \"3ceb6e ffd41e 288cff ff46aa ff7614 af5fff\".split(\" \").map(hex);\nconst RL = [1, 2, 0, 1, 2, 0], RS = [-1, -1, -1, 1, 1, 1], ROUTE = [[2, 5], [0, 3], [1, 4]];\nconst rcx = (r) => LX[RL[r]] + 0.5 + RS[r] * 5;\nconst lane = (P) => LX[P.l] + 0.5, bxOf = (P) => lane(P) - RS[P.r] * 3.5;\n// A rope a lane, two people a party: skin, hair, top, tights, harness, shoes,\n// chalk bag, 1 for a ponytail.\nconst ROPE = \"46d7ff ff7828 beff46\".split(\" \").map(hex);\nconst OUT = [\n  \"ecac84 c86032 ff6054 968cc4 ffc81e 8246d2 e6283c 1\", \"c88c64 ebc878 f5f5f0 3c60b4 96e628 f05a28 2878e6 0\",\n  \"ecb088 60301a 1ec8cd acb2c4 ff4696 464650 fad228 1\", \"a06e50 bebec4 facd32 466ed2 e63278 3c8cf0 3cb450 0\",\n  \"ecac84 f0dcaa 965ff0 c8c8ce ffc81e 288cf0 f0f0f0 1\", \"be825f 281e1a 46c864 a03c54 ff5a28 ebebeb c83cc8 0\",\n].map((s) => s.split(\" \").map((h, i) => (i \u003c 7 ? hex(h) : +h)));\n\n// The wall is built once, with the house light on it in L0.\nconst AL = F32(N * 3), EM = F32(N * 3), L0 = F32(N), MK = new Uint8Array(N);\nconst HX = F32(6 * NH), HY = F32(6 * NH), CX = F32(6 * NH), CY = F32(6 * NH);\n// Jug, crimp, sloper, pinch, big jug: LEDs as digit pairs, column + 2, row + 1.\nconst SHAPES = [\"112131122232\", \"112131\", \"2011213122\", \"203021312232\", \"1020300111213141122232\"];\n// Volumes, pyramids on a diamond: middle, half width, half height, colour.\nconst VOL = [[21.5, 46, 4.5, 7, \"9698a2\"], [43, 84, 4.5, 6.5, \"3c969c\"], [21.5, 100, 4, 5, \"c49664\"], [43, 26, 4, 6, \"d6d6dc\"], [1, 70, 3.5, 8, \"785496\"], [63, 52, 3.5, 7, \"9698a2\"]];\nconst STEEL = \"bebec8 ece8de dcd8d0 aab0bc\".split(\" \").map(hex);\n// Colour c times k on the wall, e of it glowing under UV.\nfunction px(x, y, c, k, e) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) (AL[o + j] = min(255, c[j] * k)), (EM[o + j] = AL[o + j] * e);\n  MK[y * W + x] = 1;\n}\nfunction shade(x, y, k) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL || MK[y * W + x]) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) AL[o + c] *= k;\n}\n// A hold, lit from above, and its shadow.\nfunction hold(x, y, t, c) {\n  const S = SHAPES[t];\n  for (let j = 0; j \u003c S.length; j += 2) shade(x + +S[j] - 2, y + +S[j + 1], 0.5), shade(x + +S[j] - 1, y + +S[j + 1], 0.72);\n  for (let j = 0; j \u003c S.length; j += 2) px(x + +S[j] - 2, y + +S[j + 1] - 1, c, [1.22, 1.08, 0.78][S[j + 1]] - 0.06 * (S[j] - 2), 0.55);\n}\n(function build() {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3;\n      let r, g, b, L = 0.85, e = 0;\n      if (y \u003c 4) {\n        // The ceiling: a truss, a lamp over each lane that is also a UV tube.\n        r = g = b = y === 1 ? ((x + 1) % 6 \u003c 2 ? 56 : 32) : y ? 9 : 14;\n        for (const l of LX) if ((y === 2 && abs(x - l) \u003c 2) || (y === 3 && x === l)) (e = x === l ? 1 : 0.6), (r = 255 * e), (g = 238 * e), (b = 210 * e);\n        (L = 1.47), (EM[o] = 175 * e), (EM[o + 1] = 100 * e), (EM[o + 2] = 255 * e);\n      } else if (y \u003c FL) {\n        // Plywood sheets 12 by 23, grain running up them. Seams and T-nuts darken it.\n        const qx = floor((x + 6) / 12), qy = floor((y - 4) / 23);\n        let k = (0.86 + 0.18 * hash(qx + 3, qy + 7)) * (0.9 + 0.14 * hash(x, qy) * (0.6 + 0.4 * sin(y * 0.2 + x)));\n        if ((x + 6) % 12 === 0 || (y - 4) % 23 === 22) k *= 0.62;\n        if (y % 4 === 1 && (x + (y >> 2) * 2) % 4 === 0) k *= 0.84;\n        if (y >= KICK) (k = y === KICK ? 0.7 : 1), (r = 50 * k), (g = 50 * k), (b = 56 * k);\n        else (r = 132 * k), (g = 101 * k), (b = 70 * k);\n        // Lamp light fanning down from the top, a wash over the floor.\n        L = 0.62 + 0.4 * ease((y - 86) / 34);\n        for (const l of LX) L += 0.95 * exp(-(((x - l) / (1.5 + 0.28 * y)) ** 2) - (y - 4) / 34) * ease((y - 3) / 6);\n      } else {\n        // Blue foam mats with seams; the front lip catches the light.\n        const k = (x % 16 === 7 ? 0.6 : 1) * (y === FL ? 1.35 : 0.88 + 0.03 * (y - FL));\n        (r = 34 * k), (g = 62 * k), (b = 140 * k);\n      }\n      (AL[o] = r), (AL[o + 1] = g), (AL[o + 2] = b), (L0[i] = L);\n    }\n  for (const [cx, cy, w, h, c] of VOL)\n    for (let y = floor(cy - h); y \u003c= cy + h; y++)\n      for (let x = floor(cx - w); x \u003c= cx + w; x++) {\n        const dx = (x + 0.5 - cx) / w, dy = (y + 0.5 - cy) / h;\n        if (abs(dx) + abs(dy) \u003c= 1) px(x, y, hex(c), (dy \u003c 0 ? 1.1 : 0.62) + (dx \u003c 0 ? 0.08 : -0.12), 0.08);\n      }\n  for (let y = FL - 1; y > 4; y--) for (let x = 0; x \u003c W; x++) if (MK[(y - 1) * W + x] && !MK[y * W + x]) shade(x, y, 0.55);\n  MK.fill(0);\n  for (let k = 0; k \u003c 6 * NH; k++) {\n    const r = floor(k / NH), i = k % NH, s = i & 1 ? 1 : -1, c = RC[r];\n    HX[k] = round(rcx(r) - 0.5 + s * (s === RS[r] ? 3.4 + 1.2 * hash(r, i) : 3 + 0.5 * hash(r, i)));\n    HY[k] = round(HY0 - HS * i + (hash(r + 5, i) - 0.5) * 1.6);\n    (CX[k] = round(HX[k] + s * 0.6 - 0.5)), (CY[k] = HY[k] + CHIP);\n    // The two start holds are taped.\n    hold(HX[k], HY[k], i \u003c 2 ? 0 : i === NH - 1 ? 4 : floor(hash(k, 11) * 5), c);\n    if (i \u003c 2) for (let j = 2; j \u003c 4; j++) px(HX[k] + s * j, HY[k] + j - 1, c, 0.8, 0.5);\n  }\n  // Quickdraws, a white sling between hanger and carabiner, and the anchors.\n  for (const l of LX) {\n    for (const b of BOLT) for (let j = 0; j \u003c 4; j++) px(l, b + j, STEEL[j], 1, j % 3 ? 0.7 : 0.1);\n    px(l - 1, 8, STEEL[0], 1, 0.1), px(l + 1, 8, STEEL[0], 1, 0.1), px(l, 9, STEEL[3], 1, 0.1), px(l, 10, STEEL[1], 1, 0.4);\n  }\n})();\n\n// A plan step: limb (hands 0 1, feet 2 3, 4 waits), target, which, seconds,\n// then what; LOOP brings the rope up with the hand.\nconst HOLD = 0, CHIPT = 1, BAG = 2, HARN = 3, DRAW = 4, ANCHOR = 5;\nconst PUFF = 1, CLIP = 2, ANCH = 3, GRAB = 4, LOOP = 5;\nconst START = 0, CLIMB = 1, LOWER = 2, LAND = 3, PULL = 4, SWAP = 5, FALL = 6;\nconst PC = 96, PRE = [17, 31, 4.5], SRX = 17, SRY = 28, TG = F32(2);\n\nconst party = (l) => ({ l, r: ROUTE[l][0], on: 0, c: 0, pt: 0, lhx: 0, lvx: 0, E: F32(8), plan: [], bl: 0, feed: 0, len: 0, pa: 0, pv: 0 });\n\nexport function setup(params) {\n  params.s = { P: [0, 1, 2].map(party), F: F32(N * 3), LB: F32(N * 3), pc: F32(PC * 5), init: 0, k4: 0.06, r0: 0, t: 0 };\n}\n\nfunction target(P, kind, k) {\n  const R = P.r * NH + k;\n  if (kind === HOLD) (TG[0] = HX[R] + 0.5), (TG[1] = HY[R] + 0.2);\n  else if (kind === CHIPT) (TG[0] = CX[R] + 1), (TG[1] = CY[R] + 0.1);\n  else if (kind \u003c DRAW) (TG[0] = P.hx + (kind === BAG ? 0.4 : 0)), (TG[1] = P.hy - (kind === BAG ? 0.6 : 1.2));\n  else (TG[0] = lane(P)), (TG[1] = kind === DRAW ? BOLT[k] + CLP : RING);\n}\nfunction aim(E, k, ...T) {\n  for (let j = 0; j \u003c 8; j++) E[j] += (T[j] - E[j]) * k;\n}\n\nfunction enter(P, ph) {\n  (P.ph = ph), (P.pt = 0), (P.plan.length = 0), (P.mv = -1);\n  if (ph !== START) return;\n  // Chalk each hand and set it on a taped start hold, then step on.\n  Object.assign(P, { hx: rcx(P.r), hy: STAND, iL: 0, iR: 1, seq: 0, nc: 0, anc: 0, loop: 0, hm: 0, vx: 0, vy: 0 });\n  P.E.set([P.hx - 2.5, STAND + 1, P.hx + 2.5, STAND + 1, P.hx - 1.15, FT, P.hx + 1.15, FT]);\n  for (const h of [0, 1]) P.plan.push([h, BAG, 0, 0.3], [4, 0, 0, 0.22, PUFF], [h, HOLD, h, 0.42, GRAB]);\n  P.plan.push([2, CHIPT, 0, 0.32], [3, CHIPT, 1, 0.32], [4, 0, 0, 0.2]);\n}\n\nfunction puff(S, x, y, n, sp) {\n  const p = S.pc, R = Math.random;\n  for (let k = 0; k \u003c PC * 5 && n > 0; k += 5) if (p[k + 4] \u003c= 0) (p[k] = x), (p[k + 1] = y), (p[k + 2] = (R() - 0.5) * 8 * sp), (p[k + 3] = (R() - 0.75) * 5 * sp), (p[k + 4] = 0.6 + 0.6 * R()), n--;\n}\n\nfunction advance(S, P, d) {\n  const E = P.E, m = P.mv, te = P.te;\n  P.u += d / P.dur;\n  if (m \u003c 4) {\n    target(P, P.mk, P.mi);\n    const e = ease(P.u), a = sin(PI * min(1, P.u));\n    E[m * 2] = mix(P.m0x, TG[0], e) + (m & 1 ? a : -a) * (m \u003c 2 ? 0.9 : 1.4);\n    E[m * 2 + 1] = mix(P.m0y, TG[1], e) - a * 0.7;\n  }\n  if (P.u \u003c 1) return;\n  P.mv = -1;\n  if (te === PUFF) puff(S, P.hx + 0.4, P.hy - 0.8, 8, 1);\n  else if (te === GRAB && Math.random() \u003c 0.4) puff(S, E[m * 2], E[m * 2 + 1], 2, 0.4);\n  else if (te === CLIP) P.nc++, (P.loop = 0);\n  else if (te === ANCH) (P.anc = 1), (P.loop = 0), enter(P, LOWER);\n}\n\n// Clip a draw level with her chest or the anchor at the top; else step a foot\n// up, then reach with that side's hand.\nfunction decide(P) {\n  const R = P.r * NH, pl = P.plan;\n  if (P.nc \u003c 8 && BOLT[P.nc] + CLP > P.hy - TOR - 1.5) {\n    const h = HY[R + P.iL] > HY[R + P.iR] ? 0 : 1;\n    pl.push([h, HARN, 0, 0.22], [h, DRAW, P.nc, 0.3, 0, LOOP], [4, 0, 0, 0.16, CLIP], [h, HOLD, h ? P.iR : P.iL, 0.24, GRAB]);\n  } else if (P.iL + 2 >= NH && P.iR + 2 >= NH) pl.push([1, HARN, 0, 0.22], [1, ANCHOR, 0, 0.36, 0, LOOP], [4, 0, 0, 0.3, ANCH]);\n  else {\n    const q = P.seq, h = q \u003c 2 ? 0 : 1, k = (h ? P.iR : P.iL) + 2;\n    P.seq = (q + 1) & 3;\n    if (k >= NH) return;\n    if (!(q & 1)) return pl.push([2 + h, CHIPT, k, 0.28], [4, 0, 0, 0.06]);\n    if (P.hm++ % 3 === 2) pl.push([h, BAG, 0, 0.24], [4, 0, 0, 0.22, PUFF]);\n    pl.push([h, HOLD, k, 0.34, GRAB], [4, 0, 0, 0.08]);\n    h ? (P.iR = k) : (P.iL = k);\n  }\n}\n\n// Back on after a fall or a change of route: the holds nearest her hips.\nfunction rejoin(P) {\n  const R = P.r * NH;\n  let i = 0;\n  for (let j = 2; j + 1 \u003c NH; j += 2) if (abs(CY[R + j] + CY[R + j + 1] - 12 - 2 * P.hy) \u003c abs(CY[R + i] + CY[R + i + 1] - 12 - 2 * P.hy)) i = j;\n  enter(P, CLIMB);\n  Object.assign(P, { iL: i, iR: i + 1, seq: 0, loop: 0, vx: 0, vy: 0 });\n  P.plan.push([1, HOLD, i + 1, 0.45, GRAB], [0, HOLD, i, 0.45, GRAB], [3, CHIPT, i + 1, 0.35], [2, CHIPT, i, 0.35], [4, 0, 0, 0.3]);\n}\nfunction fall(P) {\n  if (P.ph !== CLIMB) return;\n  P.R = P.nc ? hyp(P.hx - LX[P.l] - 0.5, P.hy - 1 - BOLT[P.nc - 1] - CLP) + 3 + (P.loop ? 4 : 0) : 0;\n  enter(P, FALL);\n  (P.vy = -8), (P.vx = 0), (P.loop = 0);\n}\n\n// The rope from the guide hand through the clipped draws to the climber.\nconst RP = F32(48);\nlet RLEN = 0;\nfunction path(P, gx, gy) {\n  let n = 0;\n  RLEN = 0;\n  const put = (x, y) => ((RP[n++] = x), (RP[n++] = y));\n  put(gx, gy);\n  for (let j = 0; j \u003c P.nc; j++) put(lane(P), BOLT[j] + CLP);\n  if (P.anc) put(lane(P), RING);\n  if (P.ph === PULL) put(P.ex, P.ey);\n  else {\n    if (P.loop) put(P.E[P.loop * 2 - 2], P.E[P.loop * 2 - 1]);\n    put(P.hx, P.hy - 1);\n  }\n  for (let j = 2; j \u003c n; j += 2) RLEN += hyp(RP[j] - RP[j - 2], RP[j + 1] - RP[j - 1]);\n  return n >> 1;\n}\n\nfunction stepParty(S, P, d) {\n  P.pt += d;\n  const E = P.E, ph = P.ph, x = P.hx, y = P.hy, k = 1 - exp(-d * 9);\n  if (ph \u003c= CLIMB) {\n    if (P.mv >= 0) advance(S, P, d);\n    if (P.mv \u003c 0 && P.ph === ph) {\n      const it = P.plan.shift();\n      if (it) {\n        (P.mv = it[0]), (P.mk = it[1]), (P.mi = it[2]), (P.dur = it[3]), (P.te = it[4] || 0), (P.u = 0);\n        if (P.mv \u003c 4) (P.m0x = E[P.mv * 2]), (P.m0y = E[P.mv * 2 + 1]);\n        if (it[5] === LOOP) P.loop = P.mv + 1;\n      } else if (ph === START) P.ph = CLIMB;\n      else decide(P);\n    }\n    // Hips where all four limbs reach, hanging on the arms and off the moving one.\n    const lo = max(E[5], E[7]) - 9.3, hi = min(E[1], E[3]) + 8 + TOR;\n    let ty = ((E[5] + E[7]) / 2 - 7 + hi) / 2, tx = 0.55 * ((E[4] + E[6]) / 2) + 0.45 * ((E[0] + E[2]) / 2);\n    ty = lo \u003c= hi ? cl(ty, lo, hi) : (lo + hi) / 2;\n    if (P.mv >= 0 && P.mv \u003c 4) tx -= (P.mv & 1 ? 1 : -1) * 0.7;\n    if (P.ph === ph) (P.hx += (tx - x) * k), (P.hy += (ty - y) * k);\n  } else if (ph === LOWER) {\n    // Sat in her harness and walking her feet down the wall.\n    P.hy = min(STAND, y + 12 * d * ease(P.pt * 1.5));\n    P.hx += (rcx(P.r) - x) * (1 - exp(-d * 1.5));\n    const f = P.hy * 0.45;\n    aim(E, k, x - 0.4, y - TOR - 1.8, x + 0.6, y - TOR - 3.6, x - 3.2, y + 5.3 - 1.6 * max(0, sin(f)), x + 3.2, y + 5.3 - 1.6 * max(0, -sin(f)));\n    if (P.hy >= STAND - 0.01) enter(P, LAND);\n  } else if (ph === LAND || ph === PULL) {\n    // Down, she unties and the belayer pulls the rope through.\n    P.hy += (STAND - y) * k;\n    const u = ph === LAND && P.pt > 0.5 && P.pt \u003c 1.3;\n    aim(E, k, x + (u ? -0.8 : -2.5), y + (u ? -1 : 1), x + (u ? 0.8 : 2.5), y + (u ? -1.3 : 1), x - 1.15, FT, x + 1.15, FT);\n    if (ph === LAND && P.pt > 1.4) enter(P, PULL), (P.ex = x), (P.ey = y - 1), (P.pull = 0);\n    if (ph === PULL && (P.pull += 110 * d) > P.len + 2) enter(P, SWAP);\n  } else if (ph === SWAP) {\n    if (P.pt > 1.6) (P.c ^= 1), enter(P, START);\n  } else {\n    // Falling until the rope from the last draw comes tight, a stretchy catch.\n    P.vy += 150 * d;\n    if (P.nc) {\n      const dx = x - LX[P.l] - 0.5, dy = y - 1 - BOLT[P.nc - 1] - CLP, L = hyp(dx, dy) + 1e-6, e = L - P.R;\n      if (e > 0) {\n        const ux = dx / L, uy = dy / L, f = (80 * e + 8 * (P.vx * ux + P.vy * uy)) * d;\n        (P.vx -= f * ux), (P.vy -= f * uy), (P.bl = max(P.bl, min(3, e)));\n      }\n    }\n    (P.hx += P.vx * d), (P.hy += P.vy * d);\n    if (P.hy >= STAND) {\n      (P.hy = STAND), (P.vy = P.vx = 0);\n      if (!P.nc) return enter(P, START);\n    }\n    const fl = P.pt \u003c 0.45, X = P.hx, Y = P.hy - TOR;\n    aim(E, 1 - exp(-d * (fl ? 6 : 4)), X - (fl ? 3.2 : 0.4), Y - (fl ? 4.5 : 2.5), X + (fl ? 3.2 : 0.5), Y - (fl ? 4.5 : 4.2), X - 2.7, P.hy + (fl ? 7.5 : 4.4), X + 2.7, P.hy + (fl ? 7 : 4.4));\n    if (P.pt > 2.4) rejoin(P);\n  }\n  P.bl *= exp(-d * 1.8);\n  // Rope paid out moves the belayer's guide hand; the ponytail swings.\n  const L = (path(P, bxOf(P), STAND - 4), RLEN), vx = (P.hx - P.lhx) / max(d, 1e-4);\n  if (P.ph \u003c= CLIMB) P.feed += abs(L - P.len);\n  if (P.ph !== PULL) P.len = L;\n  P.pv += (-28 * P.pa - 2.6 * P.pv) * d - cl(vx - P.lvx, -20, 20) * 0.04;\n  (P.pa = cl(P.pa + P.pv * d, -1, 1)), (P.lhx = P.hx), (P.lvx = vx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const r0 = min(5, floor(cl(k[0], 0, 1) * 6)), np = round(cl(k[2], 1, 3)), l0 = RL[r0], sp = cl(k[1], 0.2, 3);\n  (S.k4 = cl(k[3], -1, 1)), (S.r0 = r0);\n  for (const P of S.P) {\n    const r = P.l === l0 ? r0 : ROUTE[P.l][RS[r0] > 0 ? 1 : 0], j = (P.l - l0 + 3) % 3;\n    if (j >= np) P.on = 0;\n    else if (!P.on) {\n      (P.on = 1), (P.r = r), enter(P, START);\n      // Each party opens some way into its climb, further at a faster Speed.\n      if (!S.init) for (let n = PRE[j] * 30; n > 0; n--) stepParty(S, P, (sp / 2) ** 1.6 / 30);\n    } else if (P.r !== r) (P.r = r), P.ph === CLIMB ? rejoin(P) : P.ph === START && enter(P, START);\n  }\n  if (!S.init) S.pc.fill(0), (S.init = 1);\n  if (input.btnPressed && input.btnPressed[0]) fall(S.P[l0]);\n  const d = (cl(dt || 0, 0, 0.1) * sp) / 2, p = S.pc;\n  S.t += d;\n  for (const P of S.P) if (P.on) stepParty(S, P, d);\n  for (let j = 0, e = exp(-2 * d); j \u003c PC * 5; j += 5) if (p[j + 4] > 0) (p[j] += p[j + 2] * d), (p[j + 1] += p[j + 3] * d), (p[j + 2] *= e), (p[j + 3] = p[j + 3] * e + 2 * d), (p[j + 4] -= 0.6 * d);\n}\n\nlet F = null, LB = null;\nfunction splat(x, y, c, k, a) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1);\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) blend((yy * W + xx) * 3, c, k, (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy) * a);\n  }\n}\nconst lightAt = (x, y) => {\n  const o = (cl(floor(y), 0, H - 1) * W + cl(floor(x), 0, W - 1)) * 3;\n  return cl(0.3 + 0.35 * (LB[o] + LB[o + 1]), 0.62, 1.2);\n};\n// A rope span, slack spans sagging; the weave's flecks ride with the rope.\nfunction span(x0, y0, x1, y1, sag, s0, lim, rc, lf) {\n  const L = hyp(x1 - x0, y1 - y0), n = ceil(L * 2.2) + 1, mx = (x0 + x1) / 2 + sag * 0.3, my = (y0 + y1) / 2 + sag * 2;\n  for (let i = 0; i \u003c= n; i++) {\n    const u = i / n, s = s0 + u * L, q = s - lim + 1000, a = (1 - u) * (1 - u), b = 2 * u * (1 - u), c = u * u;\n    if (s > lim) break;\n    const w = q * 0.2 - floor(q * 0.2) \u003c 0.16;\n    splat(a * x0 + b * mx + c * x1, a * y0 + b * my + c * y1, w ? STEEL[1] : rc, w ? lf : (0.74 + 0.26 * cos(q * 2.3)) * lf, 0.9);\n  }\n  return s0 + L;\n}\n\n// A person from behind, facing the wall: hips at hx, hy, hands and feet in E.\nconst PT = F32(30 * 6), BE = F32(8);\nlet NP = 0, KX = 0, KY = 0, EX = 0, EY = 0;\nconst cap = (...a) => (PT.set(a, NP * 6), NP++);\n// Two-bone reach; elbows bend out and down, knees out and up.\nfunction ik(ax, ay, bx, by, l1, l2, sg, up) {\n  let dx = bx - ax, dy = by - ay, L = hyp(dx, dy) + 1e-6;\n  const Lm = l1 + l2 - 0.05;\n  if (L > Lm) (bx = ax + (dx / L) * Lm), (by = ay + (dy / L) * Lm), (dx = bx - ax), (dy = by - ay), (L = Lm);\n  const a = (l1 * l1 - l2 * l2 + L * L) / (2 * L), h = sqrt(max(0, l1 * l1 - a * a)), ux = dx / L, uy = dy / L, f = -uy * sg + up * 0.3 * ux \u003c 0 ? -h : h;\n  (KX = ax + ux * a - uy * f), (KY = ay + uy * a + ux * f), (EX = bx), (EY = by);\n}\nfunction person(hx, hy, E, o, lf, pa) {\n  NP = 0;\n  const sx = hx + 0.2 * ((E[0] + E[2]) / 2 - hx), sy = hy - TOR;\n  for (let s = -1; s \u003c 2; s += 2) {\n    const j = s + 1;\n    ik(hx + s * 1.15, hy + 0.4, E[4 + j], E[5 + j], TH, SN, s, -1);\n    cap(hx + s * 1.15, hy + 0.4, KX, KY, 1.1, 3), cap(KX, KY, EX, EY, 0.83, 3), cap(EX, EY, EX + s * 0.9, EY + 0.3, 0.7, 5);\n  }\n  cap(hx - 1.1, hy, hx + 1.1, hy, 1.25, 3), cap(hx, hy - 1, sx, sy + 1, 1.95, 2), cap(sx - 2.2, sy + 0.7, sx + 2.2, sy + 0.7, 1.15, 2);\n  cap(hx - 1.8, hy - 1.1, hx + 1.8, hy - 1.1, 0.55, 4), cap(hx + 0.3, hy - 1.2, hx + 0.3, hy - 0.1, 0.8, 6);\n  for (let s = -1; s \u003c 2; s += 2) {\n    ik(sx + s * 2.3, sy + 0.8, E[s + 1], E[s + 2], UA, FA, s, 1);\n    cap(sx + s * 2.3, sy + 0.8, KX, KY, 0.76, 0), cap(KX, KY, EX, EY, 0.64, 0), cap(EX, EY, EX, EY - 0.2, 0.75, 0);\n  }\n  cap(sx, sy + 0.2, sx, sy - 1.2, 0.7, 0), cap(sx, sy - 3, sx, sy - 3.1, 1.95, 1);\n  if (o[7]) cap(sx, sy - 3, sx + 3.7 * sin(pa), sy - 3 + 4.1 * cos(pa), 0.63, 1);\n  // A dark rim round her, holds near her greyed, then her.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let y = max(0, floor(hy - 21)); y \u003c min(H, hy + 16); y++)\n      for (let x = max(0, floor(hx - 13)); x \u003c min(W, hx + 14); x++) {\n        const qx = x + 0.5, qy = y + 0.5, i = (y * W + x) * 3;\n        let dm = 9;\n        for (let j = 0; j \u003c NP * 6; j += 6) {\n          const ax = PT[j], ay = PT[j + 1], dx = PT[j + 2] - ax, dy = PT[j + 3] - ay, r = PT[j + 4];\n          if (abs(qx - ax - dx / 2) > abs(dx) / 2 + r + 3 || abs(qy - ay - dy / 2) > abs(dy) / 2 + r + 3) continue;\n          const tt = cl(((qx - ax) * dx + (qy - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1), e = hyp(qx - ax - dx * tt, qy - ay - dy * tt) - r;\n          if (pass && e \u003c 0.5) blend(i, o[PT[j + 5]], lf, min(1, 0.5 - e));\n          dm = min(dm, e);\n        }\n        const g = ease((dm - 1.3) / 1.4), m = ((F[i] + F[i + 1] + F[i + 2]) / 3) * 0.6;\n        if (!pass && g \u003c 1) for (let c = 0; c \u003c 3; c++) F[i + c] = mix(m, F[i + c], g) * (0.25 + 0.75 * g);\n      }\n}\nfunction walk(x, ph, o, lf) {\n  const y = STAND - 0.3 * abs(sin(ph)), s = sin(ph), s2 = sin(ph + 1.6);\n  BE.set([x - 2.5 - 0.6 * s, y + 0.8, x + 2.5 - 0.6 * s, y + 0.8, x - 1.3 + 0.8 * s, FT - 1.2 * max(0, cos(ph)), x + 1.3 + 0.8 * s2, FT - 1.2 * max(0, cos(ph + 1.6))]);\n  person(x, y, BE, o, lf, 0);\n}\n\n// A party: rope pile, rope, climber, then the belayer in front.\nfunction scene(S, P, t) {\n  const gs = RS[P.r], bx = bxOf(P), cx = rcx(P.r), A = OUT[P.l * 2 + P.c], B = OUT[P.l * 2 + 1 - P.c], rc = ROPE[P.l];\n  const lfB = lightAt(bx, FL - 10), px0 = bx - gs * 2.6;\n  for (let j = 0; j \u003c 22; j++) splat(px0 + 2.4 * cos(j * 0.6) * (1 - j * 0.02), FL + 3.2 + 0.9 * sin(j * 0.6), rc, 0.8 * lfB, 0.8);\n  if (P.ph === SWAP) {\n    const e = ease(P.pt / 1.6), ph = P.pt * 9;\n    return walk(mix(cx, bx, e), ph, A, lfB), walk(mix(bx, cx, e), ph + PI, B, lfB);\n  }\n  // The belayer: guide hand up the rope feeding it out, brake hand low.\n  const hy = STAND - P.bl, hx = bx + gs * P.bl * 0.4, gi = gs > 0 ? 2 : 0, bi = 2 - gi;\n  let gy = hy - 3.4 - 1.8 * abs(sin(P.feed * 0.35)), by = hy + 0.8;\n  if (P.ph === PULL) (gy = hy - 3 - 2.6 * abs(sin(t * 6))), (by = hy - 3 - 2.6 * abs(cos(t * 6)));\n  else if (P.ph === LOWER) by = hy + 0.6 + 0.8 * sin(t * 5);\n  (BE[gi] = hx + gs * 0.7), (BE[gi + 1] = gy), (BE[bi] = hx - gs * 2.2), (BE[bi + 1] = by);\n  (BE[4] = hx - 1.15), (BE[6] = hx + 1.15), (BE[5] = BE[7] = min(FT, hy + 9.5));\n  span(BE[bi], by, px0, FL + 2.5, 1.2, 0, 1e9, rc, lightAt(BE[bi], by + 2));\n  const n = path(P, BE[gi], gy), lim = RLEN - (P.ph === PULL ? P.pull : 0), taut = P.ph === FALL || P.ph === LOWER || P.ph === PULL;\n  for (let j = 1, s = 0; j \u003c n; j++) {\n    const sag = j === 1 ? (n === 2 && !taut ? 2.5 : 1.5) : j === n - 1 && !taut ? 1 : 0;\n    s = span(RP[j * 2 - 2], RP[j * 2 - 1], RP[j * 2], RP[j * 2 + 1], sag, s, lim, rc, lightAt(RP[j * 2], RP[j * 2 + 1]));\n  }\n  person(P.hx, P.hy, P.E, A, lightAt(P.hx, P.hy - 4), P.pa);\n  person(hx, hy, BE, B, lfB, 0.2);\n}\n\n// House light tinted by the route, a follow spot with a gel on each climber.\nfunction light(S) {\n  const k = S.k4, hs = k \u003c 0 ? mix(0.68, 1.12, -k) : mix(0.68, 0.06, k), lv = k \u003c 0 ? mix(1, 0.35, -k) : mix(1, 1.2, k), u = max(0, k);\n  const T = [1, 0.95, 0.86].map((w, j) => mix(w, RC[S.r0][j] / 255, 0.14) * hs), V = [0.1 * u, 0.04 * u, 0.24 * u];\n  for (let o = 0; o \u003c N * 3; o++) LB[o] = L0[(o / 3) | 0] * T[o % 3];\n  for (const P of S.P) {\n    if (!P.on) continue;\n    const sx = P.hx, sy = P.hy - 4, G = [1, 0.96, 0.9].map((w, j) => lv * mix(w, RC[P.r][j] / 255, 0.35));\n    for (let y = max(4, floor(sy - SRY)); y \u003c min(FL, sy + SRY); y++)\n      for (let x = max(0, floor(sx - SRX)); x \u003c min(W, sx + SRX); x++) {\n        const q = ((y + 0.5 - sy) / SRY) ** 2 + ((x + 0.5 - sx) / SRX) ** 2, o = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3 && q \u003c 1; c++) LB[o + c] += (1 - q) * (1 - q) * G[c];\n      }\n  }\n  for (let o = 0; o \u003c N * 3; o++) F[o] = AL[o] * (LB[o] + V[o % 3]) + EM[o] * u;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  (F = S.F), (LB = S.LB);\n  light(S);\n  for (const P of S.P) if (P.on) scene(S, P, S.t);\n  const p = S.pc, u = max(0, S.k4);\n  for (let j = 0, C = [240, 240 - 40 * u, 236 + 19 * u]; j \u003c PC * 5; j += 5) if (p[j + 4] > 0) splat(p[j], p[j + 1], C, 1, min(1, p[j + 4]) * 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-climbing-wall","type":"code","name":"climbing-wall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Climbing Wall\n// Family:  sport\n// Idea:    A gym's lead wall seen straight on, plywood set with routes of coloured holds: a climber moves hand and foot up hers in a follow spot and clips each quickdraw up to the anchor. Her belayer lowers her off, and once the rope is pulled through the two swap places.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after an indoor lead-climbing wall\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1\n//\n// Knob 1: Route. The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour.\n// Knob 2: Speed. At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall.\n// Knob 3: Climbers. One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour.\n// Knob 4: Light. House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes.\n// Buttons: K1 tap: the climber comes off. The rope catches her below her last quickdraw with a soft bounce that lifts her belayer off the mat, and she climbs back on.\n\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (u) => ((u = cl(u, 0, 1)), u * u * (3 - 2 * u));\nconst hyp = (x, y) => sqrt(x * x + y * y), F32 = (n) => new Float32Array(n);\nconst hex = (h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));\nconst blend = (o, c, k, a) => {\n  for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] * k - F[o + j]) * a;\n};\nconst hash = (i, j) => ((Math.imul(i * 7919 + j * 104729 + 17, 2654435761) >>> 8) & 1023) / 1024;\n\n// Rows of the mat and the kickboard. Each lane's bolt line LX: eight quickdraws\n// (the rope runs CLP under the bolt) and a lower-off ring.\nconst FL = 121, FT = FL - 0.5, KICK = 117, LX = [11, 32, 53], BOLT = [95, 84, 73, 62, 51, 40, 29, 18], CLP = 3.5, RING = 11;\n// A route: NH hand holds HS rows apart, left and right in turn, a foot chip\n// CHIP rows under each. A lane has two routes, one each side of its bolts.\nconst NH = 20, HY0 = 105, HS = 5, CHIP = 15;\n// The body in LEDs: arm, forearm, thigh, shin, hip to shoulders; hips standing.\nconst UA = 4.1, FA = 4.1, TH = 4.8, SN = 4.8, TOR = 6, STAND = FL - 10.05;\n// Route colours in Route's order with the lane and side each is set on.\nconst RC = \"3ceb6e ffd41e 288cff ff46aa ff7614 af5fff\".split(\" \").map(hex);\nconst RL = [1, 2, 0, 1, 2, 0], RS = [-1, -1, -1, 1, 1, 1], ROUTE = [[2, 5], [0, 3], [1, 4]];\nconst rcx = (r) => LX[RL[r]] + 0.5 + RS[r] * 5;\nconst lane = (P) => LX[P.l] + 0.5, bxOf = (P) => lane(P) - RS[P.r] * 3.5;\n// A rope a lane, two people a party: skin, hair, top, tights, harness, shoes,\n// chalk bag, 1 for a ponytail.\nconst ROPE = \"46d7ff ff7828 beff46\".split(\" \").map(hex);\nconst OUT = [\n  \"ecac84 c86032 ff6054 968cc4 ffc81e 8246d2 e6283c 1\", \"c88c64 ebc878 f5f5f0 3c60b4 96e628 f05a28 2878e6 0\",\n  \"ecb088 60301a 1ec8cd acb2c4 ff4696 464650 fad228 1\", \"a06e50 bebec4 facd32 466ed2 e63278 3c8cf0 3cb450 0\",\n  \"ecac84 f0dcaa 965ff0 c8c8ce ffc81e 288cf0 f0f0f0 1\", \"be825f 281e1a 46c864 a03c54 ff5a28 ebebeb c83cc8 0\",\n].map((s) => s.split(\" \").map((h, i) => (i \u003c 7 ? hex(h) : +h)));\n\n// The wall is built once, with the house light on it in L0.\nconst AL = F32(N * 3), EM = F32(N * 3), L0 = F32(N), MK = new Uint8Array(N);\nconst HX = F32(6 * NH), HY = F32(6 * NH), CX = F32(6 * NH), CY = F32(6 * NH);\n// Jug, crimp, sloper, pinch, big jug: LEDs as digit pairs, column + 2, row + 1.\nconst SHAPES = [\"112131122232\", \"112131\", \"2011213122\", \"203021312232\", \"1020300111213141122232\"];\n// Volumes, pyramids on a diamond: middle, half width, half height, colour.\nconst VOL = [[21.5, 46, 4.5, 7, \"9698a2\"], [43, 84, 4.5, 6.5, \"3c969c\"], [21.5, 100, 4, 5, \"c49664\"], [43, 26, 4, 6, \"d6d6dc\"], [1, 70, 3.5, 8, \"785496\"], [63, 52, 3.5, 7, \"9698a2\"]];\nconst STEEL = \"bebec8 ece8de dcd8d0 aab0bc\".split(\" \").map(hex);\n// Colour c times k on the wall, e of it glowing under UV.\nfunction px(x, y, c, k, e) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) (AL[o + j] = min(255, c[j] * k)), (EM[o + j] = AL[o + j] * e);\n  MK[y * W + x] = 1;\n}\nfunction shade(x, y, k) {\n  if (x \u003c 0 || x >= W || y \u003c 4 || y >= FL || MK[y * W + x]) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) AL[o + c] *= k;\n}\n// A hold, lit from above, and its shadow.\nfunction hold(x, y, t, c) {\n  const S = SHAPES[t];\n  for (let j = 0; j \u003c S.length; j += 2) shade(x + +S[j] - 2, y + +S[j + 1], 0.5), shade(x + +S[j] - 1, y + +S[j + 1], 0.72);\n  for (let j = 0; j \u003c S.length; j += 2) px(x + +S[j] - 2, y + +S[j + 1] - 1, c, [1.22, 1.08, 0.78][S[j + 1]] - 0.06 * (S[j] - 2), 0.55);\n}\n(function build() {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3;\n      let r, g, b, L = 0.85, e = 0;\n      if (y \u003c 4) {\n        // The ceiling: a truss, a lamp over each lane that is also a UV tube.\n        r = g = b = y === 1 ? ((x + 1) % 6 \u003c 2 ? 56 : 32) : y ? 9 : 14;\n        for (const l of LX) if ((y === 2 && abs(x - l) \u003c 2) || (y === 3 && x === l)) (e = x === l ? 1 : 0.6), (r = 255 * e), (g = 238 * e), (b = 210 * e);\n        (L = 1.47), (EM[o] = 175 * e), (EM[o + 1] = 100 * e), (EM[o + 2] = 255 * e);\n      } else if (y \u003c FL) {\n        // Plywood sheets 12 by 23, grain running up them. Seams and T-nuts darken it.\n        const qx = floor((x + 6) / 12), qy = floor((y - 4) / 23);\n        let k = (0.86 + 0.18 * hash(qx + 3, qy + 7)) * (0.9 + 0.14 * hash(x, qy) * (0.6 + 0.4 * sin(y * 0.2 + x)));\n        if ((x + 6) % 12 === 0 || (y - 4) % 23 === 22) k *= 0.62;\n        if (y % 4 === 1 && (x + (y >> 2) * 2) % 4 === 0) k *= 0.84;\n        if (y >= KICK) (k = y === KICK ? 0.7 : 1), (r = 50 * k), (g = 50 * k), (b = 56 * k);\n        else (r = 132 * k), (g = 101 * k), (b = 70 * k);\n        // Lamp light fanning down from the top, a wash over the floor.\n        L = 0.62 + 0.4 * ease((y - 86) / 34);\n        for (const l of LX) L += 0.95 * exp(-(((x - l) / (1.5 + 0.28 * y)) ** 2) - (y - 4) / 34) * ease((y - 3) / 6);\n      } else {\n        // Blue foam mats with seams; the front lip catches the light.\n        const k = (x % 16 === 7 ? 0.6 : 1) * (y === FL ? 1.35 : 0.88 + 0.03 * (y - FL));\n        (r = 34 * k), (g = 62 * k), (b = 140 * k);\n      }\n      (AL[o] = r), (AL[o + 1] = g), (AL[o + 2] = b), (L0[i] = L);\n    }\n  for (const [cx, cy, w, h, c] of VOL)\n    for (let y = floor(cy - h); y \u003c= cy + h; y++)\n      for (let x = floor(cx - w); x \u003c= cx + w; x++) {\n        const dx = (x + 0.5 - cx) / w, dy = (y + 0.5 - cy) / h;\n        if (abs(dx) + abs(dy) \u003c= 1) px(x, y, hex(c), (dy \u003c 0 ? 1.1 : 0.62) + (dx \u003c 0 ? 0.08 : -0.12), 0.08);\n      }\n  for (let y = FL - 1; y > 4; y--) for (let x = 0; x \u003c W; x++) if (MK[(y - 1) * W + x] && !MK[y * W + x]) shade(x, y, 0.55);\n  MK.fill(0);\n  for (let k = 0; k \u003c 6 * NH; k++) {\n    const r = floor(k / NH), i = k % NH, s = i & 1 ? 1 : -1, c = RC[r];\n    HX[k] = round(rcx(r) - 0.5 + s * (s === RS[r] ? 3.4 + 1.2 * hash(r, i) : 3 + 0.5 * hash(r, i)));\n    HY[k] = round(HY0 - HS * i + (hash(r + 5, i) - 0.5) * 1.6);\n    (CX[k] = round(HX[k] + s * 0.6 - 0.5)), (CY[k] = HY[k] + CHIP);\n    // The two start holds are taped.\n    hold(HX[k], HY[k], i \u003c 2 ? 0 : i === NH - 1 ? 4 : floor(hash(k, 11) * 5), c);\n    if (i \u003c 2) for (let j = 2; j \u003c 4; j++) px(HX[k] + s * j, HY[k] + j - 1, c, 0.8, 0.5);\n  }\n  // Quickdraws, a white sling between hanger and carabiner, and the anchors.\n  for (const l of LX) {\n    for (const b of BOLT) for (let j = 0; j \u003c 4; j++) px(l, b + j, STEEL[j], 1, j % 3 ? 0.7 : 0.1);\n    px(l - 1, 8, STEEL[0], 1, 0.1), px(l + 1, 8, STEEL[0], 1, 0.1), px(l, 9, STEEL[3], 1, 0.1), px(l, 10, STEEL[1], 1, 0.4);\n  }\n})();\n\n// A plan step: limb (hands 0 1, feet 2 3, 4 waits), target, which, seconds,\n// then what; LOOP brings the rope up with the hand.\nconst HOLD = 0, CHIPT = 1, BAG = 2, HARN = 3, DRAW = 4, ANCHOR = 5;\nconst PUFF = 1, CLIP = 2, ANCH = 3, GRAB = 4, LOOP = 5;\nconst START = 0, CLIMB = 1, LOWER = 2, LAND = 3, PULL = 4, SWAP = 5, FALL = 6;\nconst PC = 96, PRE = [17, 31, 4.5], SRX = 17, SRY = 28, TG = F32(2);\n\nconst party = (l) => ({ l, r: ROUTE[l][0], on: 0, c: 0, pt: 0, lhx: 0, lvx: 0, E: F32(8), plan: [], bl: 0, feed: 0, len: 0, pa: 0, pv: 0 });\n\nexport function setup(params) {\n  params.s = { P: [0, 1, 2].map(party), F: F32(N * 3), LB: F32(N * 3), pc: F32(PC * 5), init: 0, k4: 0.06, r0: 0, t: 0 };\n}\n\nfunction target(P, kind, k) {\n  const R = P.r * NH + k;\n  if (kind === HOLD) (TG[0] = HX[R] + 0.5), (TG[1] = HY[R] + 0.2);\n  else if (kind === CHIPT) (TG[0] = CX[R] + 1), (TG[1] = CY[R] + 0.1);\n  else if (kind \u003c DRAW) (TG[0] = P.hx + (kind === BAG ? 0.4 : 0)), (TG[1] = P.hy - (kind === BAG ? 0.6 : 1.2));\n  else (TG[0] = lane(P)), (TG[1] = kind === DRAW ? BOLT[k] + CLP : RING);\n}\nfunction aim(E, k, ...T) {\n  for (let j = 0; j \u003c 8; j++) E[j] += (T[j] - E[j]) * k;\n}\n\nfunction enter(P, ph) {\n  (P.ph = ph), (P.pt = 0), (P.plan.length = 0), (P.mv = -1);\n  if (ph !== START) return;\n  // Chalk each hand and set it on a taped start hold, then step on.\n  Object.assign(P, { hx: rcx(P.r), hy: STAND, iL: 0, iR: 1, seq: 0, nc: 0, anc: 0, loop: 0, hm: 0, vx: 0, vy: 0 });\n  P.E.set([P.hx - 2.5, STAND + 1, P.hx + 2.5, STAND + 1, P.hx - 1.15, FT, P.hx + 1.15, FT]);\n  for (const h of [0, 1]) P.plan.push([h, BAG, 0, 0.3], [4, 0, 0, 0.22, PUFF], [h, HOLD, h, 0.42, GRAB]);\n  P.plan.push([2, CHIPT, 0, 0.32], [3, CHIPT, 1, 0.32], [4, 0, 0, 0.2]);\n}\n\nfunction puff(S, x, y, n, sp) {\n  const p = S.pc, R = Math.random;\n  for (let k = 0; k \u003c PC * 5 && n > 0; k += 5) if (p[k + 4] \u003c= 0) (p[k] = x), (p[k + 1] = y), (p[k + 2] = (R() - 0.5) * 8 * sp), (p[k + 3] = (R() - 0.75) * 5 * sp), (p[k + 4] = 0.6 + 0.6 * R()), n--;\n}\n\nfunction advance(S, P, d) {\n  const E = P.E, m = P.mv, te = P.te;\n  P.u += d / P.dur;\n  if (m \u003c 4) {\n    target(P, P.mk, P.mi);\n    const e = ease(P.u), a = sin(PI * min(1, P.u));\n    E[m * 2] = mix(P.m0x, TG[0], e) + (m & 1 ? a : -a) * (m \u003c 2 ? 0.9 : 1.4);\n    E[m * 2 + 1] = mix(P.m0y, TG[1], e) - a * 0.7;\n  }\n  if (P.u \u003c 1) return;\n  P.mv = -1;\n  if (te === PUFF) puff(S, P.hx + 0.4, P.hy - 0.8, 8, 1);\n  else if (te === GRAB && Math.random() \u003c 0.4) puff(S, E[m * 2], E[m * 2 + 1], 2, 0.4);\n  else if (te === CLIP) P.nc++, (P.loop = 0);\n  else if (te === ANCH) (P.anc = 1), (P.loop = 0), enter(P, LOWER);\n}\n\n// Clip a draw level with her chest or the anchor at the top; else step a foot\n// up, then reach with that side's hand.\nfunction decide(P) {\n  const R = P.r * NH, pl = P.plan;\n  if (P.nc \u003c 8 && BOLT[P.nc] + CLP > P.hy - TOR - 1.5) {\n    const h = HY[R + P.iL] > HY[R + P.iR] ? 0 : 1;\n    pl.push([h, HARN, 0, 0.22], [h, DRAW, P.nc, 0.3, 0, LOOP], [4, 0, 0, 0.16, CLIP], [h, HOLD, h ? P.iR : P.iL, 0.24, GRAB]);\n  } else if (P.iL + 2 >= NH && P.iR + 2 >= NH) pl.push([1, HARN, 0, 0.22], [1, ANCHOR, 0, 0.36, 0, LOOP], [4, 0, 0, 0.3, ANCH]);\n  else {\n    const q = P.seq, h = q \u003c 2 ? 0 : 1, k = (h ? P.iR : P.iL) + 2;\n    P.seq = (q + 1) & 3;\n    if (k >= NH) return;\n    if (!(q & 1)) return pl.push([2 + h, CHIPT, k, 0.28], [4, 0, 0, 0.06]);\n    if (P.hm++ % 3 === 2) pl.push([h, BAG, 0, 0.24], [4, 0, 0, 0.22, PUFF]);\n    pl.push([h, HOLD, k, 0.34, GRAB], [4, 0, 0, 0.08]);\n    h ? (P.iR = k) : (P.iL = k);\n  }\n}\n\n// Back on after a fall or a change of route: the holds nearest her hips.\nfunction rejoin(P) {\n  const R = P.r * NH;\n  let i = 0;\n  for (let j = 2; j + 1 \u003c NH; j += 2) if (abs(CY[R + j] + CY[R + j + 1] - 12 - 2 * P.hy) \u003c abs(CY[R + i] + CY[R + i + 1] - 12 - 2 * P.hy)) i = j;\n  enter(P, CLIMB);\n  Object.assign(P, { iL: i, iR: i + 1, seq: 0, loop: 0, vx: 0, vy: 0 });\n  P.plan.push([1, HOLD, i + 1, 0.45, GRAB], [0, HOLD, i, 0.45, GRAB], [3, CHIPT, i + 1, 0.35], [2, CHIPT, i, 0.35], [4, 0, 0, 0.3]);\n}\nfunction fall(P) {\n  if (P.ph !== CLIMB) return;\n  P.R = P.nc ? hyp(P.hx - LX[P.l] - 0.5, P.hy - 1 - BOLT[P.nc - 1] - CLP) + 3 + (P.loop ? 4 : 0) : 0;\n  enter(P, FALL);\n  (P.vy = -8), (P.vx = 0), (P.loop = 0);\n}\n\n// The rope from the guide hand through the clipped draws to the climber.\nconst RP = F32(48);\nlet RLEN = 0;\nfunction path(P, gx, gy) {\n  let n = 0;\n  RLEN = 0;\n  const put = (x, y) => ((RP[n++] = x), (RP[n++] = y));\n  put(gx, gy);\n  for (let j = 0; j \u003c P.nc; j++) put(lane(P), BOLT[j] + CLP);\n  if (P.anc) put(lane(P), RING);\n  if (P.ph === PULL) put(P.ex, P.ey);\n  else {\n    if (P.loop) put(P.E[P.loop * 2 - 2], P.E[P.loop * 2 - 1]);\n    put(P.hx, P.hy - 1);\n  }\n  for (let j = 2; j \u003c n; j += 2) RLEN += hyp(RP[j] - RP[j - 2], RP[j + 1] - RP[j - 1]);\n  return n >> 1;\n}\n\nfunction stepParty(S, P, d) {\n  P.pt += d;\n  const E = P.E, ph = P.ph, x = P.hx, y = P.hy, k = 1 - exp(-d * 9);\n  if (ph \u003c= CLIMB) {\n    if (P.mv >= 0) advance(S, P, d);\n    if (P.mv \u003c 0 && P.ph === ph) {\n      const it = P.plan.shift();\n      if (it) {\n        (P.mv = it[0]), (P.mk = it[1]), (P.mi = it[2]), (P.dur = it[3]), (P.te = it[4] || 0), (P.u = 0);\n        if (P.mv \u003c 4) (P.m0x = E[P.mv * 2]), (P.m0y = E[P.mv * 2 + 1]);\n        if (it[5] === LOOP) P.loop = P.mv + 1;\n      } else if (ph === START) P.ph = CLIMB;\n      else decide(P);\n    }\n    // Hips where all four limbs reach, hanging on the arms and off the moving one.\n    const lo = max(E[5], E[7]) - 9.3, hi = min(E[1], E[3]) + 8 + TOR;\n    let ty = ((E[5] + E[7]) / 2 - 7 + hi) / 2, tx = 0.55 * ((E[4] + E[6]) / 2) + 0.45 * ((E[0] + E[2]) / 2);\n    ty = lo \u003c= hi ? cl(ty, lo, hi) : (lo + hi) / 2;\n    if (P.mv >= 0 && P.mv \u003c 4) tx -= (P.mv & 1 ? 1 : -1) * 0.7;\n    if (P.ph === ph) (P.hx += (tx - x) * k), (P.hy += (ty - y) * k);\n  } else if (ph === LOWER) {\n    // Sat in her harness and walking her feet down the wall.\n    P.hy = min(STAND, y + 12 * d * ease(P.pt * 1.5));\n    P.hx += (rcx(P.r) - x) * (1 - exp(-d * 1.5));\n    const f = P.hy * 0.45;\n    aim(E, k, x - 0.4, y - TOR - 1.8, x + 0.6, y - TOR - 3.6, x - 3.2, y + 5.3 - 1.6 * max(0, sin(f)), x + 3.2, y + 5.3 - 1.6 * max(0, -sin(f)));\n    if (P.hy >= STAND - 0.01) enter(P, LAND);\n  } else if (ph === LAND || ph === PULL) {\n    // Down, she unties and the belayer pulls the rope through.\n    P.hy += (STAND - y) * k;\n    const u = ph === LAND && P.pt > 0.5 && P.pt \u003c 1.3;\n    aim(E, k, x + (u ? -0.8 : -2.5), y + (u ? -1 : 1), x + (u ? 0.8 : 2.5), y + (u ? -1.3 : 1), x - 1.15, FT, x + 1.15, FT);\n    if (ph === LAND && P.pt > 1.4) enter(P, PULL), (P.ex = x), (P.ey = y - 1), (P.pull = 0);\n    if (ph === PULL && (P.pull += 110 * d) > P.len + 2) enter(P, SWAP);\n  } else if (ph === SWAP) {\n    if (P.pt > 1.6) (P.c ^= 1), enter(P, START);\n  } else {\n    // Falling until the rope from the last draw comes tight, a stretchy catch.\n    P.vy += 150 * d;\n    if (P.nc) {\n      const dx = x - LX[P.l] - 0.5, dy = y - 1 - BOLT[P.nc - 1] - CLP, L = hyp(dx, dy) + 1e-6, e = L - P.R;\n      if (e > 0) {\n        const ux = dx / L, uy = dy / L, f = (80 * e + 8 * (P.vx * ux + P.vy * uy)) * d;\n        (P.vx -= f * ux), (P.vy -= f * uy), (P.bl = max(P.bl, min(3, e)));\n      }\n    }\n    (P.hx += P.vx * d), (P.hy += P.vy * d);\n    if (P.hy >= STAND) {\n      (P.hy = STAND), (P.vy = P.vx = 0);\n      if (!P.nc) return enter(P, START);\n    }\n    const fl = P.pt \u003c 0.45, X = P.hx, Y = P.hy - TOR;\n    aim(E, 1 - exp(-d * (fl ? 6 : 4)), X - (fl ? 3.2 : 0.4), Y - (fl ? 4.5 : 2.5), X + (fl ? 3.2 : 0.5), Y - (fl ? 4.5 : 4.2), X - 2.7, P.hy + (fl ? 7.5 : 4.4), X + 2.7, P.hy + (fl ? 7 : 4.4));\n    if (P.pt > 2.4) rejoin(P);\n  }\n  P.bl *= exp(-d * 1.8);\n  // Rope paid out moves the belayer's guide hand; the ponytail swings.\n  const L = (path(P, bxOf(P), STAND - 4), RLEN), vx = (P.hx - P.lhx) / max(d, 1e-4);\n  if (P.ph \u003c= CLIMB) P.feed += abs(L - P.len);\n  if (P.ph !== PULL) P.len = L;\n  P.pv += (-28 * P.pa - 2.6 * P.pv) * d - cl(vx - P.lvx, -20, 20) * 0.04;\n  (P.pa = cl(P.pa + P.pv * d, -1, 1)), (P.lhx = P.hx), (P.lvx = vx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const r0 = min(5, floor(cl(k[0], 0, 1) * 6)), np = round(cl(k[2], 1, 3)), l0 = RL[r0], sp = cl(k[1], 0.2, 3);\n  (S.k4 = cl(k[3], -1, 1)), (S.r0 = r0);\n  for (const P of S.P) {\n    const r = P.l === l0 ? r0 : ROUTE[P.l][RS[r0] > 0 ? 1 : 0], j = (P.l - l0 + 3) % 3;\n    if (j >= np) P.on = 0;\n    else if (!P.on) {\n      (P.on = 1), (P.r = r), enter(P, START);\n      // Each party opens some way into its climb, further at a faster Speed.\n      if (!S.init) for (let n = PRE[j] * 30; n > 0; n--) stepParty(S, P, (sp / 2) ** 1.6 / 30);\n    } else if (P.r !== r) (P.r = r), P.ph === CLIMB ? rejoin(P) : P.ph === START && enter(P, START);\n  }\n  if (!S.init) S.pc.fill(0), (S.init = 1);\n  if (input.btnPressed && input.btnPressed[0]) fall(S.P[l0]);\n  const d = (cl(dt || 0, 0, 0.1) * sp) / 2, p = S.pc;\n  S.t += d;\n  for (const P of S.P) if (P.on) stepParty(S, P, d);\n  for (let j = 0, e = exp(-2 * d); j \u003c PC * 5; j += 5) if (p[j + 4] > 0) (p[j] += p[j + 2] * d), (p[j + 1] += p[j + 3] * d), (p[j + 2] *= e), (p[j + 3] = p[j + 3] * e + 2 * d), (p[j + 4] -= 0.6 * d);\n}\n\nlet F = null, LB = null;\nfunction splat(x, y, c, k, a) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1);\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) blend((yy * W + xx) * 3, c, k, (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy) * a);\n  }\n}\nconst lightAt = (x, y) => {\n  const o = (cl(floor(y), 0, H - 1) * W + cl(floor(x), 0, W - 1)) * 3;\n  return cl(0.3 + 0.35 * (LB[o] + LB[o + 1]), 0.62, 1.2);\n};\n// A rope span, slack spans sagging; the weave's flecks ride with the rope.\nfunction span(x0, y0, x1, y1, sag, s0, lim, rc, lf) {\n  const L = hyp(x1 - x0, y1 - y0), n = ceil(L * 2.2) + 1, mx = (x0 + x1) / 2 + sag * 0.3, my = (y0 + y1) / 2 + sag * 2;\n  for (let i = 0; i \u003c= n; i++) {\n    const u = i / n, s = s0 + u * L, q = s - lim + 1000, a = (1 - u) * (1 - u), b = 2 * u * (1 - u), c = u * u;\n    if (s > lim) break;\n    const w = q * 0.2 - floor(q * 0.2) \u003c 0.16;\n    splat(a * x0 + b * mx + c * x1, a * y0 + b * my + c * y1, w ? STEEL[1] : rc, w ? lf : (0.74 + 0.26 * cos(q * 2.3)) * lf, 0.9);\n  }\n  return s0 + L;\n}\n\n// A person from behind, facing the wall: hips at hx, hy, hands and feet in E.\nconst PT = F32(30 * 6), BE = F32(8);\nlet NP = 0, KX = 0, KY = 0, EX = 0, EY = 0;\nconst cap = (...a) => (PT.set(a, NP * 6), NP++);\n// Two-bone reach; elbows bend out and down, knees out and up.\nfunction ik(ax, ay, bx, by, l1, l2, sg, up) {\n  let dx = bx - ax, dy = by - ay, L = hyp(dx, dy) + 1e-6;\n  const Lm = l1 + l2 - 0.05;\n  if (L > Lm) (bx = ax + (dx / L) * Lm), (by = ay + (dy / L) * Lm), (dx = bx - ax), (dy = by - ay), (L = Lm);\n  const a = (l1 * l1 - l2 * l2 + L * L) / (2 * L), h = sqrt(max(0, l1 * l1 - a * a)), ux = dx / L, uy = dy / L, f = -uy * sg + up * 0.3 * ux \u003c 0 ? -h : h;\n  (KX = ax + ux * a - uy * f), (KY = ay + uy * a + ux * f), (EX = bx), (EY = by);\n}\nfunction person(hx, hy, E, o, lf, pa) {\n  NP = 0;\n  const sx = hx + 0.2 * ((E[0] + E[2]) / 2 - hx), sy = hy - TOR;\n  for (let s = -1; s \u003c 2; s += 2) {\n    const j = s + 1;\n    ik(hx + s * 1.15, hy + 0.4, E[4 + j], E[5 + j], TH, SN, s, -1);\n    cap(hx + s * 1.15, hy + 0.4, KX, KY, 1.1, 3), cap(KX, KY, EX, EY, 0.83, 3), cap(EX, EY, EX + s * 0.9, EY + 0.3, 0.7, 5);\n  }\n  cap(hx - 1.1, hy, hx + 1.1, hy, 1.25, 3), cap(hx, hy - 1, sx, sy + 1, 1.95, 2), cap(sx - 2.2, sy + 0.7, sx + 2.2, sy + 0.7, 1.15, 2);\n  cap(hx - 1.8, hy - 1.1, hx + 1.8, hy - 1.1, 0.55, 4), cap(hx + 0.3, hy - 1.2, hx + 0.3, hy - 0.1, 0.8, 6);\n  for (let s = -1; s \u003c 2; s += 2) {\n    ik(sx + s * 2.3, sy + 0.8, E[s + 1], E[s + 2], UA, FA, s, 1);\n    cap(sx + s * 2.3, sy + 0.8, KX, KY, 0.76, 0), cap(KX, KY, EX, EY, 0.64, 0), cap(EX, EY, EX, EY - 0.2, 0.75, 0);\n  }\n  cap(sx, sy + 0.2, sx, sy - 1.2, 0.7, 0), cap(sx, sy - 3, sx, sy - 3.1, 1.95, 1);\n  if (o[7]) cap(sx, sy - 3, sx + 3.7 * sin(pa), sy - 3 + 4.1 * cos(pa), 0.63, 1);\n  // A dark rim round her, holds near her greyed, then her.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let y = max(0, floor(hy - 21)); y \u003c min(H, hy + 16); y++)\n      for (let x = max(0, floor(hx - 13)); x \u003c min(W, hx + 14); x++) {\n        const qx = x + 0.5, qy = y + 0.5, i = (y * W + x) * 3;\n        let dm = 9;\n        for (let j = 0; j \u003c NP * 6; j += 6) {\n          const ax = PT[j], ay = PT[j + 1], dx = PT[j + 2] - ax, dy = PT[j + 3] - ay, r = PT[j + 4];\n          if (abs(qx - ax - dx / 2) > abs(dx) / 2 + r + 3 || abs(qy - ay - dy / 2) > abs(dy) / 2 + r + 3) continue;\n          const tt = cl(((qx - ax) * dx + (qy - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1), e = hyp(qx - ax - dx * tt, qy - ay - dy * tt) - r;\n          if (pass && e \u003c 0.5) blend(i, o[PT[j + 5]], lf, min(1, 0.5 - e));\n          dm = min(dm, e);\n        }\n        const g = ease((dm - 1.3) / 1.4), m = ((F[i] + F[i + 1] + F[i + 2]) / 3) * 0.6;\n        if (!pass && g \u003c 1) for (let c = 0; c \u003c 3; c++) F[i + c] = mix(m, F[i + c], g) * (0.25 + 0.75 * g);\n      }\n}\nfunction walk(x, ph, o, lf) {\n  const y = STAND - 0.3 * abs(sin(ph)), s = sin(ph), s2 = sin(ph + 1.6);\n  BE.set([x - 2.5 - 0.6 * s, y + 0.8, x + 2.5 - 0.6 * s, y + 0.8, x - 1.3 + 0.8 * s, FT - 1.2 * max(0, cos(ph)), x + 1.3 + 0.8 * s2, FT - 1.2 * max(0, cos(ph + 1.6))]);\n  person(x, y, BE, o, lf, 0);\n}\n\n// A party: rope pile, rope, climber, then the belayer in front.\nfunction scene(S, P, t) {\n  const gs = RS[P.r], bx = bxOf(P), cx = rcx(P.r), A = OUT[P.l * 2 + P.c], B = OUT[P.l * 2 + 1 - P.c], rc = ROPE[P.l];\n  const lfB = lightAt(bx, FL - 10), px0 = bx - gs * 2.6;\n  for (let j = 0; j \u003c 22; j++) splat(px0 + 2.4 * cos(j * 0.6) * (1 - j * 0.02), FL + 3.2 + 0.9 * sin(j * 0.6), rc, 0.8 * lfB, 0.8);\n  if (P.ph === SWAP) {\n    const e = ease(P.pt / 1.6), ph = P.pt * 9;\n    return walk(mix(cx, bx, e), ph, A, lfB), walk(mix(bx, cx, e), ph + PI, B, lfB);\n  }\n  // The belayer: guide hand up the rope feeding it out, brake hand low.\n  const hy = STAND - P.bl, hx = bx + gs * P.bl * 0.4, gi = gs > 0 ? 2 : 0, bi = 2 - gi;\n  let gy = hy - 3.4 - 1.8 * abs(sin(P.feed * 0.35)), by = hy + 0.8;\n  if (P.ph === PULL) (gy = hy - 3 - 2.6 * abs(sin(t * 6))), (by = hy - 3 - 2.6 * abs(cos(t * 6)));\n  else if (P.ph === LOWER) by = hy + 0.6 + 0.8 * sin(t * 5);\n  (BE[gi] = hx + gs * 0.7), (BE[gi + 1] = gy), (BE[bi] = hx - gs * 2.2), (BE[bi + 1] = by);\n  (BE[4] = hx - 1.15), (BE[6] = hx + 1.15), (BE[5] = BE[7] = min(FT, hy + 9.5));\n  span(BE[bi], by, px0, FL + 2.5, 1.2, 0, 1e9, rc, lightAt(BE[bi], by + 2));\n  const n = path(P, BE[gi], gy), lim = RLEN - (P.ph === PULL ? P.pull : 0), taut = P.ph === FALL || P.ph === LOWER || P.ph === PULL;\n  for (let j = 1, s = 0; j \u003c n; j++) {\n    const sag = j === 1 ? (n === 2 && !taut ? 2.5 : 1.5) : j === n - 1 && !taut ? 1 : 0;\n    s = span(RP[j * 2 - 2], RP[j * 2 - 1], RP[j * 2], RP[j * 2 + 1], sag, s, lim, rc, lightAt(RP[j * 2], RP[j * 2 + 1]));\n  }\n  person(P.hx, P.hy, P.E, A, lightAt(P.hx, P.hy - 4), P.pa);\n  person(hx, hy, BE, B, lfB, 0.2);\n}\n\n// House light tinted by the route, a follow spot with a gel on each climber.\nfunction light(S) {\n  const k = S.k4, hs = k \u003c 0 ? mix(0.68, 1.12, -k) : mix(0.68, 0.06, k), lv = k \u003c 0 ? mix(1, 0.35, -k) : mix(1, 1.2, k), u = max(0, k);\n  const T = [1, 0.95, 0.86].map((w, j) => mix(w, RC[S.r0][j] / 255, 0.14) * hs), V = [0.1 * u, 0.04 * u, 0.24 * u];\n  for (let o = 0; o \u003c N * 3; o++) LB[o] = L0[(o / 3) | 0] * T[o % 3];\n  for (const P of S.P) {\n    if (!P.on) continue;\n    const sx = P.hx, sy = P.hy - 4, G = [1, 0.96, 0.9].map((w, j) => lv * mix(w, RC[P.r][j] / 255, 0.35));\n    for (let y = max(4, floor(sy - SRY)); y \u003c min(FL, sy + SRY); y++)\n      for (let x = max(0, floor(sx - SRX)); x \u003c min(W, sx + SRX); x++) {\n        const q = ((y + 0.5 - sy) / SRY) ** 2 + ((x + 0.5 - sx) / SRX) ** 2, o = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3 && q \u003c 1; c++) LB[o + c] += (1 - q) * (1 - q) * G[c];\n      }\n  }\n  for (let o = 0; o \u003c N * 3; o++) F[o] = AL[o] * (LB[o] + V[o % 3]) + EM[o] * u;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  (F = S.F), (LB = S.LB);\n  light(S);\n  for (const P of S.P) if (P.on) scene(S, P, S.t);\n  const p = S.pc, u = max(0, S.k4);\n  for (let j = 0, C = [240, 240 - 40 * u, 236 + 19 * u]; j \u003c PC * 5; j += 5) if (p[j + 4] > 0) splat(p[j], p[j + 1], C, 1, min(1, p[j + 4]) * 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Route=0..1, Speed=0.2..3, Climbers=1..3, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Route","min":0,"max":1,"about":"The colour she climbs: green at 0, then yellow, blue, pink, orange and purple at 1. She moves to its lane; her spot and the house lights take a little of its colour."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a hand or foot move takes a third of a second and a climb from the mat to the anchor half a minute; 0.2 is ten times slower, and she opens lower on the wall."},{"name":"Climbers","min":1,"max":3,"about":"One rope party at 1, two or three side by side, each a climber and a belayer on a rope of its own colour."},{"name":"Light","min":-1,"max":1,"about":"House lights full at -1. At 0 an evening session, the lights turned down and a follow spot on each climber; at 1 only the spots, and the holds and slings glow under UV tubes."}],"start":[0,2,1,0.06],"measures":{"motion":0.067,"detail":0.0707,"edges":0.3416,"complexity":1.7869,"coverage":0.9212,"colour":0.1755,"drift":0.0209},"knobResponse":[0.0608,0.0368,0.048,0.1959]},{"slug":"cloth","title":"Cloth","family":"physics","round":2,"note":"12×22 매듭 천이 나무 봉의 집게에 걸려 있고, 뒤에서 부는 돌풍이 천을 앞으로 들어 올려요. LED 마다 그 자리 천이 빛에서 기운 만큼 밝아서 주름이 등고선처럼 읽혀요.","idea":"A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.","buttons":"K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.","code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","layer":{"id":"layer-cloth","type":"code","name":"cloth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the cloth; its stripes and its paler wrong side follow."},{"name":"Wind","min":0,"max":3,"about":"From still air, where it only sways, to gusts that throw the hem up past the rod."},{"name":"Stiffness","min":0,"max":1,"about":"Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones."},{"name":"Pins","min":2,"max":12,"about":"How many clips hold it to the rod, from two corners with a swag between them to every knot along the top."}],"start":[0,2,0,2],"measures":{"motion":0.5789,"detail":0.0244,"edges":0.3966,"complexity":0.9079,"coverage":0.5904,"colour":0.3319,"drift":0.4132},"knobResponse":[0.2963,0.322,0.2371,0.2837]},{"slug":"cloud-chamber","title":"Cloud Chamber","family":"particle","round":27,"note":"과학관의 확산 안개상자를 유리 뚜껑 위에서 내려다봐요. 등줄 빛을 받은 검은 펠트 위로 우주선 뮤온이 가는 직선을 패널 끝까지 긋고, 알파 입자는 짧고 굵은 막대를, 전자는 흐린 실을 남겨요. 자취는 한순간에 맺혔다가 대류를 따라 흘러가며 몇 초 만에 번져 사라져요. K3 은 토륨 막대를 세워 알파 부채를 뿜게 하고, K4 는 자기장으로 전자를 나선으로 감아요.","idea":"A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.","buttons":"K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.","code":"// ===== Patternflow pattern =====\n// Title:   Cloud Chamber\n// Family:  particle\n// Idea:    A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the continuously sensitive diffusion cloud chamber Alexander Langsdorf described in 1939, a descendant of C. T. R. Wilson's expansion cloud chamber\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1\n//\n// Knob 1: Light. The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white.\n// Knob 2: Speed. How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often.\n// Knob 3: Source. A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point.\n// Knob 4: Field. A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way.\n// Buttons: K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.\n\nconst W = 64, H = 128, N = W * H, CAP = 16384, ND = 170, DS = 0.6, SQ = Math.sqrt(DS);\nconst { min, max, floor, ceil, sqrt, exp, sin, cos, log, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst gauss = () => (rnd() + rnd() + rnd() - 1.5) * 2;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p, a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// The mist's sheen: a 64 by 64 tile of soft noise that wraps both ways.\nconst NZ = new Float32Array(4096).map((_, k) => 0.65 * vn((k & 63) / 8, (k >> 6) / 8, 8) + 0.35 * vn((k & 63) / 4, (k >> 6) / 4, 16));\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, x0 = xi & 63, y0 = (yi & 63) \u003c\u003c 6, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) \u003c\u003c 6;\n  return mix(mix(NZ[y0 + x0], NZ[y0 + x1], u), mix(NZ[y1 + x0], NZ[y1 + x1], u), v);\n}\n// A droplet is a round Gaussian; GL holds exp(-q / 32) out to where it is under 3%.\nconst GN = 112, GL = new Float32Array(GN).map((_, q) => exp(-q / 32));\n// The lamp lights the wall side best; a trail across the chamber is about 0.55 as bright.\nconst LIT = new Float32Array(W).map((_, x) => 0.48 + 0.52 * exp(-x / 30));\nconst STRIP = new Float32Array(H).map((_, y) => 0.86 + 0.14 * hash(y >> 2, 3));\n\n// Lamps: colour, near glow, its width in LEDs, far glow, drizzle, trails.\n// The laser sheet lights only the sensitive layer, so its trails stand out hardest.\nconst LAMPS = [\n  [0.6, 0.8, 1, 0.28, 6, 0.035, 1, 1],\n  [1, 0.9, 0.72, 0.3, 13, 0.1, 0.9, 0.9],\n  [0.4, 1, 0.6, 0.15, 3.5, 0.03, 1.3, 1.25],\n  [0.7, 0.46, 1, 0.3, 8, 0.08, 1.15, 0.9],\n];\n\n// Trail kinds: droplet radius, line brightness, life in seconds, how fast the\n// trail spreads (LED squared a second), bending radius in a full field,\n// scatter, bead spread, missing droplets, brightening toward the end, whether\n// it slows to a stop (curling tighter), delta rays per LED.\nconst kind = (sig, I, life, D, R, sc, bead, gap, br, slow, dl) => ({ sig, I, life, D, R, sc, bead, gap, br, slow, dl });\nconst MU = kind(0.5, 0.85, 3.4, 0.16, 380, 0.004, 0.55, 0.08, 0, 0, 1 / 170);\nconst BE = kind(0.46, 0.7, 2.9, 0.2, 16, 0.085, 0.7, 0.28, 0.9, 1, 0);\nconst DE = kind(0.44, 0.65, 2.6, 0.2, 5, 0.12, 0.6, 0.2, 0.7, 1, 0);\nconst AL = kind(0.7, 1.9, 4, 0.14, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\n// Source alphas are a touch thinner and go sooner, so the fan reads ray by ray.\nconst AS = kind(0.6, 1.6, 2.6, 0.12, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\nconst PR = kind(0.6, 1.3, 3.8, 0.18, 900, 0.01, 0.3, 0.02, 0.35, 0, 1 / 90);\n// The thoriated rod's tip.\nconst SX = 40.5, SY = 117.5;\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  params.s = {\n    T: F(N), U: F(153), V: F(153), PX: F(CAP), PY: F(CAP), PU: F(CAP), PV: F(CAP), PB: D(CAP), PL: F(CAP), PS: F(CAP), PK: F(CAP), PD: F(CAP),\n    DX: F(ND), DY: F(ND), DB: D(ND), DL: F(ND), DA: F(ND), head: 0, tail: 0, tf: 0, td: 0, wr: 99, tw: -99, ox: 0, oy: 0,\n    tsf: 1, tsd: 1, field: 0.06, src: 0, lamp: [...LAMPS[0]], k1: -1, live: 0, pend: [], cnt: [0, 0, 0, 0, 0, 0, 0].map(() => -log(1 - rnd())),\n  };\n  const S = params.s;\n  for (let j = 0; j \u003c ND; j++) drop(S, j, -rnd() * 1.4);\n}\n\nfunction puff(S, x, y, sig, I, life, D) {\n  const i = S.head++ & (CAP - 1), a = rnd() * 6.283, v = 0.1 + 0.35 * rnd();\n  if (S.head - S.tail > CAP) S.tail = S.head - CAP;\n  S.PX[i] = x;\n  S.PY[i] = y;\n  // Each droplet wanders a little on its own, so an old trail frays.\n  S.PU[i] = v * cos(a);\n  S.PV[i] = v * sin(a);\n  S.PB[i] = S.tf;\n  S.PL[i] = life * (0.85 + 0.3 * rnd());\n  S.PS[i] = 2 * sig * sig;\n  // Scaled so a line of droplets DS apart peaks at I.\n  S.PK[i] = I * sig * DS * 0.798;\n  S.PD[i] = D;\n}\n\n// Lays a trail of droplets from x, y heading th. A charge q bends it in the\n// field; a slowing particle bends tighter and scatters more toward its end.\n// With clip set it starts outside and stops once it has crossed the panel.\nfunction trail(S, x, y, th, len, k, q, R0, clip, I = k.I) {\n  const n = max(1, ceil(len / DS)), f = S.field, life = k.life * (0.85 + 0.3 * rnd());\n  let inside = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const rem = 1 - j / n, inn = x > -2 && x \u003c W + 2 && y > -2 && y \u003c H + 2;\n    if (clip) {\n      if (inn) inside = 1;\n      else if (inside) break;\n    }\n    if (inn && rnd() >= k.gap) puff(S, x, y, k.sig * (1 + 0.3 * k.br * (1 - rem) ** 2), I * (1 + k.bead * (rnd() * 2 - 1)) * (1 + k.br * (1 - rem) ** 2), life, k.D);\n    // A knock-on electron kicked sideways out of the trail.\n    if (k.dl && inn && rnd() \u003c k.dl * DS) {\n      const s = rnd() \u003c 0.5 ? -1 : 1;\n      trail(S, x, y, th + s * (0.9 + 0.6 * rnd()), 3 + 11 * rnd(), DE, -1, 2 + 5 * rnd(), 0);\n    }\n    const R = R0 * (k.slow ? sqrt(rem + 0.03) : 1);\n    th += q * min(0.5, (f * DS) / R) + (k.sc * gauss() * SQ) / (k.slow ? sqrt(rem + 0.12) : 1);\n    x += cos(th) * DS;\n    y += sin(th) * DS;\n  }\n  return [x, y, th];\n}\n\nconst beta = (S, x, y, th, len) => trail(S, x, y, th, len, BE, rnd() \u003c 0.9 ? -1 : 1, 8 + 22 * rnd(), 0);\n\n// A muon through a point of the chamber; most cross it the long way.\nfunction muon(S, px, py, th) {\n  const stop = rnd() \u003c 0.1, len = stop ? 170 + 60 * rnd() : 400;\n  const e = trail(S, px - cos(th) * 170, py - sin(th) * 170, th, len, MU, rnd() \u003c 0.55 ? 1 : -1, 220 + 380 * rnd(), 1);\n  // One that stops in the chamber decays: an electron leaves its end at an angle.\n  if (stop && e[0] > 0 && e[0] \u003c W && e[1] > 0 && e[1] \u003c H) beta(S, e[0], e[1], e[2] + (rnd() \u003c 0.5 ? -1 : 1) * (0.6 + 1.8 * rnd()), 30 + 30 * rnd());\n}\nconst steep = () => (rnd() \u003c 0.62 ? PI / 2 + 0.45 * gauss() + (rnd() \u003c 0.5 ? PI : 0) : rnd() * 2 * PI);\n\n// An alpha: short, thick, dead straight, thickest at its end. Now and then it\n// glances off a nucleus near its end and the recoil leaves a stub: a fork.\nfunction alpha(S, x, y, th, len) {\n  if (rnd() \u003c 0.14 && len > 7) {\n    const e = trail(S, x, y, th, len * 0.75, AL, 1, 6000, 0, AL.I * 0.9), s = rnd() \u003c 0.5 ? -1 : 1;\n    trail(S, e[0], e[1], e[2] + s * (0.4 + 0.6 * rnd()), len * 0.3, AL, 1, 6000, 0);\n    trail(S, e[0], e[1], e[2] - s * (0.9 + 0.6 * rnd()), 1.5 + 2 * rnd(), AL, 1, 6000, 0, AL.I * 1.3);\n  } else trail(S, x, y, th, len, AL, 1, 6000, 0);\n}\n\n// A cosmic proton breaks up a nucleus: a thin track in and a star of thick prongs.\nfunction star(S) {\n  const x = 10 + 44 * rnd(), y = 16 + 96 * rnd(), th = steep();\n  trail(S, x - cos(th) * 90, y - sin(th) * 90, th, 90, MU, 1, 600, 0);\n  for (let j = 0, n = 2 + floor(rnd() * 3); j \u003c n; j++) trail(S, x, y, rnd() * 2 * PI, 5 + 16 * rnd(), PR, 1, 900, 0);\n  if (rnd() \u003c 0.5) trail(S, x, y, th + gauss() * 0.6, 40 + 40 * rnd(), MU, rnd() \u003c 0.5 ? 1 : -1, 300, 1);\n}\n\n// A shower: one direction for all, muons in parallel and electrons beside them.\nfunction shower(S) {\n  const th = steep(), c = cos(th), s = sin(th), n = 7 + floor(rnd() * 5);\n  for (let j = 0; j \u003c n; j++) {\n    const o = (rnd() * 2 - 1) * 34;\n    muon(S, 32 - s * o + c * gauss() * 20, 64 + c * o + s * gauss() * 20, th + 0.012 * gauss());\n  }\n  for (let j = 0, m = 3 + floor(rnd() * 4); j \u003c m; j++) {\n    const o = (rnd() * 2 - 1) * 30, a = (rnd() * 2 - 1) * 50;\n    beta(S, 32 - s * o + c * a, 64 + c * o + s * a, th + 0.2 * gauss(), 25 + 40 * rnd());\n  }\n}\n\nfunction spawn(S, k) {\n  const src = S.src;\n  if (k === 0) muon(S, rnd() * W, rnd() * H, steep());\n  // A steep muon crosses the thin sensitive layer in a few LEDs.\n  else if (k === 1) trail(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd(), MU, 1, 400, 0);\n  else if (k === 2) beta(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 18 + 55 * rnd());\n  // Radon in the air: an alpha anywhere, foreshortened when it leaves the layer.\n  else if (k === 3) alpha(S, 3 + rnd() * (W - 3), rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd() ** 0.7);\n  else if (k === 4) star(S);\n  else if (k === 5) {\n    const t = -PI / 2 + (rnd() * 2 - 1) * 1.35;\n    trail(S, SX + cos(t) * 1.5, SY + 1 + sin(t) * 1.5, t, 11 + 18 * rnd(), AS, 1, 6000, 0);\n  } else if (k === 6 && src > 0.02) {\n    // Thoron off the rod; its daughter decays a fraction of a second later from the same point.\n    const x = cl(SX + gauss() * 13, 4, W - 2), y = SY - 6 - 40 * rnd() ** 1.5;\n    alpha(S, x, y, rnd() * 2 * PI, 6 + 10 * rnd());\n    S.pend.push([S.tf + 0.1 + 0.3 * rnd(), x, y]);\n  }\n}\n\n// The vapour's slow convection on a grid of 9 by 17 nodes, 8 LEDs apart: the\n// curl of a few drifting waves, so it neither piles up nor thins out, and a\n// gentle drift that turns round over a minute or two.\nconst MODES = [[0.09, 0.05, 0.11, 0, 9], [-0.06, 0.08, -0.09, 2, 8], [0.13, -0.11, 0.13, 4, 4], [0.03, 0.12, 0.07, 1.3, 6]];\nfunction flow(S) {\n  const t = S.td, mu = 0.45 * cos(t * 0.05), mv = 0.45 * sin(t * 0.07 + 1);\n  for (let j = 0; j \u003c 17; j++)\n    for (let i = 0; i \u003c 9; i++) {\n      let u = mu, v = mv;\n      for (const [kx, ky, w, p, a] of MODES) {\n        const c = a * cos(kx * i * 8 + ky * j * 8 + w * t + p);\n        u += ky * c;\n        v -= kx * c;\n      }\n      S.U[j * 9 + i] = u;\n      S.V[j * 9 + i] = v;\n    }\n  return [mu, mv];\n}\nfunction vel(S, x, y, out) {\n  const gx = cl(x / 8, 0, 7.999), gy = cl(y / 8, 0, 15.999), i = floor(gx), j = floor(gy), u = gx - i, v = gy - j, k = j * 9 + i;\n  out[0] = mix(mix(S.U[k], S.U[k + 1], u), mix(S.U[k + 9], S.U[k + 10], u), v);\n  out[1] = mix(mix(S.V[k], S.V[k + 1], u), mix(S.V[k + 9], S.V[k + 10], u), v);\n}\n\n// The drizzle: droplets raining out of the mist, seen as they cross the light.\nfunction drop(S, j, b) {\n  S.DX[j] = rnd() * W;\n  S.DY[j] = rnd() * H;\n  S.DB[j] = S.tf + b;\n  S.DL[j] = 0.45 + 1.1 * rnd();\n  S.DA[j] = 0.08 + 0.28 * rnd();\n}\n\nconst UV = new Float32Array(2);\nfunction step(S, d) {\n  const df = d * S.tsf, dd = d * S.tsd;\n  (S.tf += df), (S.td += dd), (S.wr += d);\n  const [mu, mv] = flow(S);\n  (S.ox += mu * dd), (S.oy += mv * dd);\n  // Births run on the fade clock, so the chamber holds as many trails at any speed.\n  if (S.wr > 1.2) {\n    const rate = [0.75, 1.1, 2.4, 0.9, 0.05, 5 * S.src ** 1.5, 0.6 * S.src];\n    for (let k = 0; k \u003c 7; k++) for (S.cnt[k] -= rate[k] * df; S.cnt[k] \u003c= 0; S.cnt[k] -= log(1 - rnd())) spawn(S, k);\n  }\n  for (const p of S.pend) if (p[0] \u003c= S.tf) alpha(S, p[1], p[2], rnd() * 2 * PI, 6 + 10 * rnd()), (p[0] = -1);\n  S.pend = S.pend.filter((p) => p[0] > 0);\n  const { PX, PY, PU, PV, PB, PL } = S;\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1);\n    if (S.tf - PB[i] > PL[i]) continue;\n    vel(S, PX[i], PY[i], UV);\n    PX[i] += (UV[0] + PU[i]) * dd;\n    PY[i] += (UV[1] + PV[i]) * dd;\n  }\n  while (S.tail \u003c S.head && S.tf - PB[S.tail & (CAP - 1)] > PL[S.tail & (CAP - 1)]) S.tail++;\n  for (let j = 0; j \u003c ND; j++) {\n    if (S.tf - S.DB[j] > S.DL[j]) drop(S, j, 0);\n    vel(S, S.DX[j], S.DY[j], UV);\n    S.DX[j] += UV[0] * dd;\n    S.DY[j] += UV[1] * dd;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2, k1 = cl(k[0], 0, 1);\n  (S.field = cl(k[3], 0, 1)), (S.src = cl(k[2], 0, 1)), (S.tsd = sp), (S.tsf = sp ** 0.6);\n  if (k1 !== S.k1) {\n    const f = k1 * 3, a = min(2, floor(f)), u = sm(0, 1, f - a);\n    for (let j = 0; j \u003c 8; j++) S.lamp[j] = mix(LAMPS[a][j], LAMPS[a + 1][j], u);\n    S.k1 = k1;\n  }\n  // Start with the chamber already running.\n  for (; !S.live; S.live = 1) while (S.tf \u003c 4.5) step(S, 1 / 30);\n  const b = input.btnPressed || [];\n  if (b[0]) shower(S);\n  if (b[1] && S.wr > 0.3) (S.tw = S.tf), (S.wr = 0);\n  step(S, cl(dt || 0, 0, 0.1));\n}\n\nfunction splat(T, x, y, s2, a) {\n  const r = sqrt(3.5 * s2), k = 32 / s2, x0 = max(0, ceil(x - 0.5 - r)), x1 = min(W - 1, floor(x - 0.5 + r)), y0 = max(0, ceil(y - 0.5 - r)), y1 = min(H - 1, floor(y - 0.5 + r));\n  for (let py = y0; py \u003c= y1; py++) {\n    const dy = py + 0.5 - y, d2 = dy * dy, o = py * W;\n    for (let px = x0; px \u003c= x1; px++) {\n      const dx = px + 0.5 - x, q = ((dx * dx + d2) * k) | 0;\n      if (q \u003c GN) T[o + px] += a * GL[q];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.live) return;\n  const { T, PX, PY, PB, PL, PS, PK, PD, lamp } = S, tf = S.tf, tin = 0.07 * S.tsf;\n  // After a clear the old trails blur and fade within a second; the mist dims and comes back.\n  const wq = exp(-S.wr / 0.3), wipe = S.wr \u003c 2.5 ? sm(0, 0.25, S.wr) * exp(-S.wr / 1.1) : 0;\n  T.fill(0);\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1), a = tf - PB[i], L = PL[i];\n    if (a > L) continue;\n    const old = PB[i] \u003c S.tw;\n    if (old && S.wr > 2) continue;\n    // Fresh droplets catch the light hardest for the first half second.\n    let s2 = PS[i] + 2 * PD[i] * a, e = min(1, a / tin) * (1 - sm(0.12, 1, a / L)) * (1 + 0.6 * exp(-a / 0.4));\n    if (old) (s2 += 3 * (1 - wq)), (e *= wq);\n    // Once a trail has spread wider than the droplet spacing, every second\n    // or fourth droplet stands for its neighbours.\n    let m = 1;\n    if (s2 > 5) {\n      if (n & 3) continue;\n      m = 4;\n    } else if (s2 > 2.2) {\n      if (n & 1) continue;\n      m = 2;\n    }\n    if (e > 0.004) splat(T, PX[i], PY[i], s2, (m * PK[i] * e) / s2);\n  }\n  // Drizzle, brightest in the light near the wall, heavier just after a clear.\n  const dz = lamp[6] * (1 + 2.5 * wipe);\n  for (let j = 0; j \u003c ND; j++) {\n    const u = (tf - S.DB[j]) / S.DL[j];\n    if (u \u003c= 0 || u >= 1) continue;\n    const x = S.DX[j] - 0.5, y = S.DY[j] - 0.5, xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n    const a = dz * S.DA[j] * sin(u * PI) ** 2 * (0.3 + 0.7 * exp(-S.DX[j] / 16));\n    if (xi \u003c 0 || yi \u003c 0 || xi >= W - 1 || yi >= H - 1) continue;\n    const o = yi * W + xi;\n    T[o] += a * (1 - fx) * (1 - fy);\n    T[o + 1] += a * fx * (1 - fy);\n    T[o + W] += a * (1 - fx) * fy;\n    T[o + W + 1] += a * fx * fy;\n  }\n  const [cr, cg, cb, g1, w1, g2, , tg] = lamp, rod = sm(0.01, 0.06, S.src), mist = 1 - 0.7 * wipe, ox = S.ox, oy = S.oy;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (x === 0) {\n        // The lamp strip itself, through the glass at the chamber's rim.\n        const v = 0.92 * STRIP[y] * (1 - 0.3 * wipe);\n        display.setPixel(0, y, 255 * v * mix(cr, 1, 0.4), 255 * v * mix(cg, 1, 0.4), 255 * v * mix(cb, 1, 0.4));\n        continue;\n      }\n      const n = 0.6 * nz(x * 0.9 - ox * 0.9, y * 0.55 - oy * 0.55) + 0.4 * nz(x * 1.7 - ox * 1.6 + 17, y * 1.1 - oy * 1.4 + 29);\n      const h = (g1 * exp(-(x - 1) / w1) + g2 * exp(-x / 40)) * (1.7 * n * n) * mist;\n      let t = T[i] * LIT[x] * tg, g = 0;\n      // The rod: dull metal lit from the lamp side.\n      if (rod > 0 && y > SY - 0.5 && x > SX - 2 && x \u003c SX + 1) g = rod * (x \u003c SX - 0.5 ? 0.42 : 0.24) * (y \u003c SY + 0.5 ? 1.25 : 1);\n      const v = min(1, (1 - exp(-1.6 * (t + h + g))) * 1.25), wf = 0.8 * sm(0.1, 0.8, t) + 0.6 * g;\n      display.setPixel(x, y, 255 * v * mix(cr, 1, wf), 255 * v * mix(cg, 1, wf), 255 * v * mix(cb, 1, wf));\n    }\n  }\n}\n","layer":{"id":"layer-cloud-chamber","type":"code","name":"cloud-chamber","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cloud Chamber\n// Family:  particle\n// Idea:    A diffusion cloud chamber seen from above through its glass lid, lit by a lamp strip along its left wall: cosmic muons rule thin straight lines across the black felt while radon alphas and stray electrons leave short thick bars and faint curling threads, each trail condensing in a flash and then drifting on the slow convection of the alcohol mist, spreading and fading over a few seconds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the continuously sensitive diffusion cloud chamber Alexander Langsdorf described in 1939, a descendant of C. T. R. Wilson's expansion cloud chamber\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1\n//\n// Knob 1: Light. The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white.\n// Knob 2: Speed. How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often.\n// Knob 3: Source. A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point.\n// Knob 4: Field. A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way.\n// Buttons: K1 tap sends a cosmic-ray shower through: a dozen parallel muon and electron tracks at once. K2 tap clears the chamber: the trails blur out and sink while the mist rains down and dims. New trails start again a second later.\n\nconst W = 64, H = 128, N = W * H, CAP = 16384, ND = 170, DS = 0.6, SQ = Math.sqrt(DS);\nconst { min, max, floor, ceil, sqrt, exp, sin, cos, log, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst gauss = () => (rnd() + rnd() + rnd() - 1.5) * 2;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p, a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// The mist's sheen: a 64 by 64 tile of soft noise that wraps both ways.\nconst NZ = new Float32Array(4096).map((_, k) => 0.65 * vn((k & 63) / 8, (k >> 6) / 8, 8) + 0.35 * vn((k & 63) / 4, (k >> 6) / 4, 16));\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, x0 = xi & 63, y0 = (yi & 63) \u003c\u003c 6, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) \u003c\u003c 6;\n  return mix(mix(NZ[y0 + x0], NZ[y0 + x1], u), mix(NZ[y1 + x0], NZ[y1 + x1], u), v);\n}\n// A droplet is a round Gaussian; GL holds exp(-q / 32) out to where it is under 3%.\nconst GN = 112, GL = new Float32Array(GN).map((_, q) => exp(-q / 32));\n// The lamp lights the wall side best; a trail across the chamber is about 0.55 as bright.\nconst LIT = new Float32Array(W).map((_, x) => 0.48 + 0.52 * exp(-x / 30));\nconst STRIP = new Float32Array(H).map((_, y) => 0.86 + 0.14 * hash(y >> 2, 3));\n\n// Lamps: colour, near glow, its width in LEDs, far glow, drizzle, trails.\n// The laser sheet lights only the sensitive layer, so its trails stand out hardest.\nconst LAMPS = [\n  [0.6, 0.8, 1, 0.28, 6, 0.035, 1, 1],\n  [1, 0.9, 0.72, 0.3, 13, 0.1, 0.9, 0.9],\n  [0.4, 1, 0.6, 0.15, 3.5, 0.03, 1.3, 1.25],\n  [0.7, 0.46, 1, 0.3, 8, 0.08, 1.15, 0.9],\n];\n\n// Trail kinds: droplet radius, line brightness, life in seconds, how fast the\n// trail spreads (LED squared a second), bending radius in a full field,\n// scatter, bead spread, missing droplets, brightening toward the end, whether\n// it slows to a stop (curling tighter), delta rays per LED.\nconst kind = (sig, I, life, D, R, sc, bead, gap, br, slow, dl) => ({ sig, I, life, D, R, sc, bead, gap, br, slow, dl });\nconst MU = kind(0.5, 0.85, 3.4, 0.16, 380, 0.004, 0.55, 0.08, 0, 0, 1 / 170);\nconst BE = kind(0.46, 0.7, 2.9, 0.2, 16, 0.085, 0.7, 0.28, 0.9, 1, 0);\nconst DE = kind(0.44, 0.65, 2.6, 0.2, 5, 0.12, 0.6, 0.2, 0.7, 1, 0);\nconst AL = kind(0.7, 1.9, 4, 0.14, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\n// Source alphas are a touch thinner and go sooner, so the fan reads ray by ray.\nconst AS = kind(0.6, 1.6, 2.6, 0.12, 6000, 0.004, 0.2, 0, 0.45, 0, 0);\nconst PR = kind(0.6, 1.3, 3.8, 0.18, 900, 0.01, 0.3, 0.02, 0.35, 0, 1 / 90);\n// The thoriated rod's tip.\nconst SX = 40.5, SY = 117.5;\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  params.s = {\n    T: F(N), U: F(153), V: F(153), PX: F(CAP), PY: F(CAP), PU: F(CAP), PV: F(CAP), PB: D(CAP), PL: F(CAP), PS: F(CAP), PK: F(CAP), PD: F(CAP),\n    DX: F(ND), DY: F(ND), DB: D(ND), DL: F(ND), DA: F(ND), head: 0, tail: 0, tf: 0, td: 0, wr: 99, tw: -99, ox: 0, oy: 0,\n    tsf: 1, tsd: 1, field: 0.06, src: 0, lamp: [...LAMPS[0]], k1: -1, live: 0, pend: [], cnt: [0, 0, 0, 0, 0, 0, 0].map(() => -log(1 - rnd())),\n  };\n  const S = params.s;\n  for (let j = 0; j \u003c ND; j++) drop(S, j, -rnd() * 1.4);\n}\n\nfunction puff(S, x, y, sig, I, life, D) {\n  const i = S.head++ & (CAP - 1), a = rnd() * 6.283, v = 0.1 + 0.35 * rnd();\n  if (S.head - S.tail > CAP) S.tail = S.head - CAP;\n  S.PX[i] = x;\n  S.PY[i] = y;\n  // Each droplet wanders a little on its own, so an old trail frays.\n  S.PU[i] = v * cos(a);\n  S.PV[i] = v * sin(a);\n  S.PB[i] = S.tf;\n  S.PL[i] = life * (0.85 + 0.3 * rnd());\n  S.PS[i] = 2 * sig * sig;\n  // Scaled so a line of droplets DS apart peaks at I.\n  S.PK[i] = I * sig * DS * 0.798;\n  S.PD[i] = D;\n}\n\n// Lays a trail of droplets from x, y heading th. A charge q bends it in the\n// field; a slowing particle bends tighter and scatters more toward its end.\n// With clip set it starts outside and stops once it has crossed the panel.\nfunction trail(S, x, y, th, len, k, q, R0, clip, I = k.I) {\n  const n = max(1, ceil(len / DS)), f = S.field, life = k.life * (0.85 + 0.3 * rnd());\n  let inside = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const rem = 1 - j / n, inn = x > -2 && x \u003c W + 2 && y > -2 && y \u003c H + 2;\n    if (clip) {\n      if (inn) inside = 1;\n      else if (inside) break;\n    }\n    if (inn && rnd() >= k.gap) puff(S, x, y, k.sig * (1 + 0.3 * k.br * (1 - rem) ** 2), I * (1 + k.bead * (rnd() * 2 - 1)) * (1 + k.br * (1 - rem) ** 2), life, k.D);\n    // A knock-on electron kicked sideways out of the trail.\n    if (k.dl && inn && rnd() \u003c k.dl * DS) {\n      const s = rnd() \u003c 0.5 ? -1 : 1;\n      trail(S, x, y, th + s * (0.9 + 0.6 * rnd()), 3 + 11 * rnd(), DE, -1, 2 + 5 * rnd(), 0);\n    }\n    const R = R0 * (k.slow ? sqrt(rem + 0.03) : 1);\n    th += q * min(0.5, (f * DS) / R) + (k.sc * gauss() * SQ) / (k.slow ? sqrt(rem + 0.12) : 1);\n    x += cos(th) * DS;\n    y += sin(th) * DS;\n  }\n  return [x, y, th];\n}\n\nconst beta = (S, x, y, th, len) => trail(S, x, y, th, len, BE, rnd() \u003c 0.9 ? -1 : 1, 8 + 22 * rnd(), 0);\n\n// A muon through a point of the chamber; most cross it the long way.\nfunction muon(S, px, py, th) {\n  const stop = rnd() \u003c 0.1, len = stop ? 170 + 60 * rnd() : 400;\n  const e = trail(S, px - cos(th) * 170, py - sin(th) * 170, th, len, MU, rnd() \u003c 0.55 ? 1 : -1, 220 + 380 * rnd(), 1);\n  // One that stops in the chamber decays: an electron leaves its end at an angle.\n  if (stop && e[0] > 0 && e[0] \u003c W && e[1] > 0 && e[1] \u003c H) beta(S, e[0], e[1], e[2] + (rnd() \u003c 0.5 ? -1 : 1) * (0.6 + 1.8 * rnd()), 30 + 30 * rnd());\n}\nconst steep = () => (rnd() \u003c 0.62 ? PI / 2 + 0.45 * gauss() + (rnd() \u003c 0.5 ? PI : 0) : rnd() * 2 * PI);\n\n// An alpha: short, thick, dead straight, thickest at its end. Now and then it\n// glances off a nucleus near its end and the recoil leaves a stub: a fork.\nfunction alpha(S, x, y, th, len) {\n  if (rnd() \u003c 0.14 && len > 7) {\n    const e = trail(S, x, y, th, len * 0.75, AL, 1, 6000, 0, AL.I * 0.9), s = rnd() \u003c 0.5 ? -1 : 1;\n    trail(S, e[0], e[1], e[2] + s * (0.4 + 0.6 * rnd()), len * 0.3, AL, 1, 6000, 0);\n    trail(S, e[0], e[1], e[2] - s * (0.9 + 0.6 * rnd()), 1.5 + 2 * rnd(), AL, 1, 6000, 0, AL.I * 1.3);\n  } else trail(S, x, y, th, len, AL, 1, 6000, 0);\n}\n\n// A cosmic proton breaks up a nucleus: a thin track in and a star of thick prongs.\nfunction star(S) {\n  const x = 10 + 44 * rnd(), y = 16 + 96 * rnd(), th = steep();\n  trail(S, x - cos(th) * 90, y - sin(th) * 90, th, 90, MU, 1, 600, 0);\n  for (let j = 0, n = 2 + floor(rnd() * 3); j \u003c n; j++) trail(S, x, y, rnd() * 2 * PI, 5 + 16 * rnd(), PR, 1, 900, 0);\n  if (rnd() \u003c 0.5) trail(S, x, y, th + gauss() * 0.6, 40 + 40 * rnd(), MU, rnd() \u003c 0.5 ? 1 : -1, 300, 1);\n}\n\n// A shower: one direction for all, muons in parallel and electrons beside them.\nfunction shower(S) {\n  const th = steep(), c = cos(th), s = sin(th), n = 7 + floor(rnd() * 5);\n  for (let j = 0; j \u003c n; j++) {\n    const o = (rnd() * 2 - 1) * 34;\n    muon(S, 32 - s * o + c * gauss() * 20, 64 + c * o + s * gauss() * 20, th + 0.012 * gauss());\n  }\n  for (let j = 0, m = 3 + floor(rnd() * 4); j \u003c m; j++) {\n    const o = (rnd() * 2 - 1) * 30, a = (rnd() * 2 - 1) * 50;\n    beta(S, 32 - s * o + c * a, 64 + c * o + s * a, th + 0.2 * gauss(), 25 + 40 * rnd());\n  }\n}\n\nfunction spawn(S, k) {\n  const src = S.src;\n  if (k === 0) muon(S, rnd() * W, rnd() * H, steep());\n  // A steep muon crosses the thin sensitive layer in a few LEDs.\n  else if (k === 1) trail(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd(), MU, 1, 400, 0);\n  else if (k === 2) beta(S, rnd() * W, rnd() * H, rnd() * 2 * PI, 18 + 55 * rnd());\n  // Radon in the air: an alpha anywhere, foreshortened when it leaves the layer.\n  else if (k === 3) alpha(S, 3 + rnd() * (W - 3), rnd() * H, rnd() * 2 * PI, 3 + 11 * rnd() ** 0.7);\n  else if (k === 4) star(S);\n  else if (k === 5) {\n    const t = -PI / 2 + (rnd() * 2 - 1) * 1.35;\n    trail(S, SX + cos(t) * 1.5, SY + 1 + sin(t) * 1.5, t, 11 + 18 * rnd(), AS, 1, 6000, 0);\n  } else if (k === 6 && src > 0.02) {\n    // Thoron off the rod; its daughter decays a fraction of a second later from the same point.\n    const x = cl(SX + gauss() * 13, 4, W - 2), y = SY - 6 - 40 * rnd() ** 1.5;\n    alpha(S, x, y, rnd() * 2 * PI, 6 + 10 * rnd());\n    S.pend.push([S.tf + 0.1 + 0.3 * rnd(), x, y]);\n  }\n}\n\n// The vapour's slow convection on a grid of 9 by 17 nodes, 8 LEDs apart: the\n// curl of a few drifting waves, so it neither piles up nor thins out, and a\n// gentle drift that turns round over a minute or two.\nconst MODES = [[0.09, 0.05, 0.11, 0, 9], [-0.06, 0.08, -0.09, 2, 8], [0.13, -0.11, 0.13, 4, 4], [0.03, 0.12, 0.07, 1.3, 6]];\nfunction flow(S) {\n  const t = S.td, mu = 0.45 * cos(t * 0.05), mv = 0.45 * sin(t * 0.07 + 1);\n  for (let j = 0; j \u003c 17; j++)\n    for (let i = 0; i \u003c 9; i++) {\n      let u = mu, v = mv;\n      for (const [kx, ky, w, p, a] of MODES) {\n        const c = a * cos(kx * i * 8 + ky * j * 8 + w * t + p);\n        u += ky * c;\n        v -= kx * c;\n      }\n      S.U[j * 9 + i] = u;\n      S.V[j * 9 + i] = v;\n    }\n  return [mu, mv];\n}\nfunction vel(S, x, y, out) {\n  const gx = cl(x / 8, 0, 7.999), gy = cl(y / 8, 0, 15.999), i = floor(gx), j = floor(gy), u = gx - i, v = gy - j, k = j * 9 + i;\n  out[0] = mix(mix(S.U[k], S.U[k + 1], u), mix(S.U[k + 9], S.U[k + 10], u), v);\n  out[1] = mix(mix(S.V[k], S.V[k + 1], u), mix(S.V[k + 9], S.V[k + 10], u), v);\n}\n\n// The drizzle: droplets raining out of the mist, seen as they cross the light.\nfunction drop(S, j, b) {\n  S.DX[j] = rnd() * W;\n  S.DY[j] = rnd() * H;\n  S.DB[j] = S.tf + b;\n  S.DL[j] = 0.45 + 1.1 * rnd();\n  S.DA[j] = 0.08 + 0.28 * rnd();\n}\n\nconst UV = new Float32Array(2);\nfunction step(S, d) {\n  const df = d * S.tsf, dd = d * S.tsd;\n  (S.tf += df), (S.td += dd), (S.wr += d);\n  const [mu, mv] = flow(S);\n  (S.ox += mu * dd), (S.oy += mv * dd);\n  // Births run on the fade clock, so the chamber holds as many trails at any speed.\n  if (S.wr > 1.2) {\n    const rate = [0.75, 1.1, 2.4, 0.9, 0.05, 5 * S.src ** 1.5, 0.6 * S.src];\n    for (let k = 0; k \u003c 7; k++) for (S.cnt[k] -= rate[k] * df; S.cnt[k] \u003c= 0; S.cnt[k] -= log(1 - rnd())) spawn(S, k);\n  }\n  for (const p of S.pend) if (p[0] \u003c= S.tf) alpha(S, p[1], p[2], rnd() * 2 * PI, 6 + 10 * rnd()), (p[0] = -1);\n  S.pend = S.pend.filter((p) => p[0] > 0);\n  const { PX, PY, PU, PV, PB, PL } = S;\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1);\n    if (S.tf - PB[i] > PL[i]) continue;\n    vel(S, PX[i], PY[i], UV);\n    PX[i] += (UV[0] + PU[i]) * dd;\n    PY[i] += (UV[1] + PV[i]) * dd;\n  }\n  while (S.tail \u003c S.head && S.tf - PB[S.tail & (CAP - 1)] > PL[S.tail & (CAP - 1)]) S.tail++;\n  for (let j = 0; j \u003c ND; j++) {\n    if (S.tf - S.DB[j] > S.DL[j]) drop(S, j, 0);\n    vel(S, S.DX[j], S.DY[j], UV);\n    S.DX[j] += UV[0] * dd;\n    S.DY[j] += UV[1] * dd;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2, k1 = cl(k[0], 0, 1);\n  (S.field = cl(k[3], 0, 1)), (S.src = cl(k[2], 0, 1)), (S.tsd = sp), (S.tsf = sp ** 0.6);\n  if (k1 !== S.k1) {\n    const f = k1 * 3, a = min(2, floor(f)), u = sm(0, 1, f - a);\n    for (let j = 0; j \u003c 8; j++) S.lamp[j] = mix(LAMPS[a][j], LAMPS[a + 1][j], u);\n    S.k1 = k1;\n  }\n  // Start with the chamber already running.\n  for (; !S.live; S.live = 1) while (S.tf \u003c 4.5) step(S, 1 / 30);\n  const b = input.btnPressed || [];\n  if (b[0]) shower(S);\n  if (b[1] && S.wr > 0.3) (S.tw = S.tf), (S.wr = 0);\n  step(S, cl(dt || 0, 0, 0.1));\n}\n\nfunction splat(T, x, y, s2, a) {\n  const r = sqrt(3.5 * s2), k = 32 / s2, x0 = max(0, ceil(x - 0.5 - r)), x1 = min(W - 1, floor(x - 0.5 + r)), y0 = max(0, ceil(y - 0.5 - r)), y1 = min(H - 1, floor(y - 0.5 + r));\n  for (let py = y0; py \u003c= y1; py++) {\n    const dy = py + 0.5 - y, d2 = dy * dy, o = py * W;\n    for (let px = x0; px \u003c= x1; px++) {\n      const dx = px + 0.5 - x, q = ((dx * dx + d2) * k) | 0;\n      if (q \u003c GN) T[o + px] += a * GL[q];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.live) return;\n  const { T, PX, PY, PB, PL, PS, PK, PD, lamp } = S, tf = S.tf, tin = 0.07 * S.tsf;\n  // After a clear the old trails blur and fade within a second; the mist dims and comes back.\n  const wq = exp(-S.wr / 0.3), wipe = S.wr \u003c 2.5 ? sm(0, 0.25, S.wr) * exp(-S.wr / 1.1) : 0;\n  T.fill(0);\n  for (let n = S.tail; n \u003c S.head; n++) {\n    const i = n & (CAP - 1), a = tf - PB[i], L = PL[i];\n    if (a > L) continue;\n    const old = PB[i] \u003c S.tw;\n    if (old && S.wr > 2) continue;\n    // Fresh droplets catch the light hardest for the first half second.\n    let s2 = PS[i] + 2 * PD[i] * a, e = min(1, a / tin) * (1 - sm(0.12, 1, a / L)) * (1 + 0.6 * exp(-a / 0.4));\n    if (old) (s2 += 3 * (1 - wq)), (e *= wq);\n    // Once a trail has spread wider than the droplet spacing, every second\n    // or fourth droplet stands for its neighbours.\n    let m = 1;\n    if (s2 > 5) {\n      if (n & 3) continue;\n      m = 4;\n    } else if (s2 > 2.2) {\n      if (n & 1) continue;\n      m = 2;\n    }\n    if (e > 0.004) splat(T, PX[i], PY[i], s2, (m * PK[i] * e) / s2);\n  }\n  // Drizzle, brightest in the light near the wall, heavier just after a clear.\n  const dz = lamp[6] * (1 + 2.5 * wipe);\n  for (let j = 0; j \u003c ND; j++) {\n    const u = (tf - S.DB[j]) / S.DL[j];\n    if (u \u003c= 0 || u >= 1) continue;\n    const x = S.DX[j] - 0.5, y = S.DY[j] - 0.5, xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n    const a = dz * S.DA[j] * sin(u * PI) ** 2 * (0.3 + 0.7 * exp(-S.DX[j] / 16));\n    if (xi \u003c 0 || yi \u003c 0 || xi >= W - 1 || yi >= H - 1) continue;\n    const o = yi * W + xi;\n    T[o] += a * (1 - fx) * (1 - fy);\n    T[o + 1] += a * fx * (1 - fy);\n    T[o + W] += a * (1 - fx) * fy;\n    T[o + W + 1] += a * fx * fy;\n  }\n  const [cr, cg, cb, g1, w1, g2, , tg] = lamp, rod = sm(0.01, 0.06, S.src), mist = 1 - 0.7 * wipe, ox = S.ox, oy = S.oy;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (x === 0) {\n        // The lamp strip itself, through the glass at the chamber's rim.\n        const v = 0.92 * STRIP[y] * (1 - 0.3 * wipe);\n        display.setPixel(0, y, 255 * v * mix(cr, 1, 0.4), 255 * v * mix(cg, 1, 0.4), 255 * v * mix(cb, 1, 0.4));\n        continue;\n      }\n      const n = 0.6 * nz(x * 0.9 - ox * 0.9, y * 0.55 - oy * 0.55) + 0.4 * nz(x * 1.7 - ox * 1.6 + 17, y * 1.1 - oy * 1.4 + 29);\n      const h = (g1 * exp(-(x - 1) / w1) + g2 * exp(-x / 40)) * (1.7 * n * n) * mist;\n      let t = T[i] * LIT[x] * tg, g = 0;\n      // The rod: dull metal lit from the lamp side.\n      if (rod > 0 && y > SY - 0.5 && x > SX - 2 && x \u003c SX + 1) g = rod * (x \u003c SX - 0.5 ? 0.42 : 0.24) * (y \u003c SY + 0.5 ? 1.25 : 1);\n      const v = min(1, (1 - exp(-1.6 * (t + h + g))) * 1.25), wf = 0.8 * sm(0.1, 0.8, t) + 0.6 * g;\n      display.setPixel(x, y, 255 * v * mix(cr, 1, wf), 255 * v * mix(cg, 1, wf), 255 * v * mix(cb, 1, wf));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Source=0..1, Field=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The lamp along the left wall: a cold blue-white LED strip at 0, a warm halogen tube with a wide glow at a third, a thin green laser sheet at two thirds and a violet ultraviolet tube at 1. The mist near the wall glows in its colour and the brightest trails go nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the vapour turns over: at 2 a trail drifts a LED or two a second and is gone in about three and a half seconds; at 0.2 the drift is ten times slower and trails stay four times as long, coming four times less often."},{"name":"Source","min":0,"max":1,"about":"A thoriated rod stood at the bottom of the chamber: at 0 there is none and only cosmic rays and the radon in the air leave trails; turned up, the rod appears and sprays a fan of alpha tracks from its tip, up to five a second, and thoron gas drifting off it leaves V-shaped pairs of alphas from one point."},{"name":"Field","min":0,"max":1,"about":"A magnet under the floor: at 0.06 the trails are almost straight and the electrons only wander; turned up, electrons curl into tight spirals that wind inward as they slow, and the long muon lines bow into shallow arcs. Now and then a positron curls the other way."}],"start":[0,2,0,0.06],"measures":{"motion":0.104,"detail":0.0456,"edges":0.3473,"complexity":1.374,"coverage":0.2504,"colour":0.0521,"drift":0.0923},"knobResponse":[0.046,0.1102,0.1287,0.0714]},{"slug":"constant-width","title":"Constant Width","family":"geometry","round":35,"note":"너비 62 LED 의 통로를 폭이 일정한 곡선이 위아래로 맞닿아 쌓인 채 내려가요. 뢸로 삼각형과 오각형, 칠각형, 홀수 배음으로 지은 매끈한 곡선과 원이 저마다 다른 빠르기로 도는데도 늘 두 벽과 위아래 경계선에 닿고, 닿은 자리마다 흰 점이 서요. K3 은 곡선마다 같은 너비의 원을 섞어 둘레 194.8 은 그대로 두고 삼각형의 넓이 2709 LED 를 원의 3019 까지 부풀리고, K1 을 누르면 꼭짓점이 지나간 길이 금색으로 남아 삼각형이 귀만 둥근 정사각형을 그려요.","idea":"A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.","buttons":"K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.","code":"// ===== Patternflow pattern =====\n// Title:   Constant Width\n// Family:  geometry\n// Idea:    A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Curves of constant width, the Reuleaux polygons (Franz Reuleaux, 1876), and Barbier's theorem that they all have perimeter pi times their width (Joseph-Émile Barbier, 1860)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1\n//\n// Knob 1: Hue. Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive.\n// Knob 2: Speed. How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100.\n// Knob 3: Round. Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way.\n// Knob 4: Spin. How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that.\n// Buttons: K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.\n\nconst W = 64, H = 128, WD = 62, N = 256, CYCLE = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The eight curves of the cycle, all of width WD. A Reuleaux n-gon is the\n// intersection of the n disks of radius WD centred on the corners of a\n// regular n-gon whose corner-to-far-corner distance is WD. A harmonic curve\n// has support function h = WD/2 + sum a cos(k t + c) over odd k from 3 up:\n// odd k is what makes h(t) + h(t + pi) = WD, the width in every direction,\n// and the radius of curvature h + h'' = WD/2 - sum a (k^2 - 1) cos(k t + c)\n// stays above 0, so it is convex. The amplitudes below keep that radius at\n// least 2 LEDs.\nconst SHAPES = [\n  { n: 3 },\n  { harm: [[3, 3.6, 0]] },\n  { n: 5 },\n  { harm: [[3, 2.2, 0], [5, 0.5, 1.1]] },\n  { n: 7 },\n  { disc: true },\n  { n: 3 },\n  { harm: [[3, 2.6, 0], [7, 0.16, 2.0]] },\n];\n// Base hue and brightness for each place in the cycle. The sharp curves are\n// lit brighter than the smooth ones, so the column reads as light and deep\n// shapes taking turns as it slides. The map's drift comes mostly from the\n// dark corners of each square, which swing round as the curves turn: with\n// all eight at one brightness it reads 0.263, with these 0.277.\nconst BASE = [[0.13, 0.86], [0.76, 0.55], [0.95, 0.86], [0.6, 0.55], [0.48, 0.86], [0.68, 0.55], [0.3, 0.86], [0.54, 0.55]];\n// The body angles each curve's trace follows: the n corners of a Reuleaux\n// polygon and the k peaks of a curve with one harmonic, which all run round\n// the same path, and for a curve of two harmonics the one point where its\n// support function peaks, since its corners are not alike and each would\n// draw a path of its own.\nfor (const s of SHAPES) {\n  if (s.n) s.tr = Array.from({ length: s.n }, (_, c) => (TAU * c) / s.n);\n  else if (s.harm && s.harm.length === 1) {\n    const [k, , c0] = s.harm[0];\n    s.tr = Array.from({ length: k }, (_, m) => (TAU * m - c0) / k);\n  } else if (s.harm) {\n    let best = -1e9, at = 0;\n    for (let i = 0; i \u003c 3600; i++) {\n      const b = (TAU * i) / 3600;\n      let h = 0;\n      for (const [k, a, c] of s.harm) h += a * cos(k * b + c);\n      if (h > best) (best = h), (at = b);\n    }\n    s.tr = [at];\n  } else s.tr = [0];\n}\n\n// Support function h and its derivative at body angle b, for a curve mixed\n// a share t of the way to the disc.\nfunction support(s, b, t, out) {\n  let h, d;\n  if (s.n) {\n    const n = s.n, R = WD / (2 * cos(PI / (2 * n))), step = TAU / n, half = PI / (2 * n);\n    let del = b - round(b / step) * step;\n    if (abs(del) \u003c= half) (h = R * cos(del)), (d = -R * sin(del));\n    else {\n      // The opposite direction falls in a corner's cone, so here the curve\n      // is the arc of radius WD round that corner.\n      const b2 = b + PI;\n      del = b2 - round(b2 / step) * step;\n      (h = WD - R * cos(del)), (d = R * sin(del));\n    }\n  } else if (s.harm) {\n    (h = WD / 2), (d = 0);\n    for (const [k, a, c] of s.harm) (h += a * cos(k * b + c)), (d -= a * k * sin(k * b + c));\n  } else (h = WD / 2), (d = 0);\n  out[0] = (1 - t) * h + (t * WD) / 2;\n  out[1] = (1 - t) * d;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, round: 0, spin: 0.06,\n    // The column's slide in rows and the spin clock in radians.\n    slide: 15, clock: 0,\n    trace: false, traces: new Map(),\n    px: new Float32Array(N), py: new Float32Array(N),\n    xl: new Float32Array(H), xr: new Float32Array(H),\n    lab: new Int8Array(W * H), rgb: new Float32Array(W * H * 3),\n    col: new Float32Array(CYCLE * 6), colHue: NaN, sup: new Float32Array(2),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.round = cl(k[2], 0, 1);\n  P.spin = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.trace = !P.trace;\n    P.traces.clear();\n  }\n  P.slide += d * P.speed * 3;\n  P.clock += d * (0.4 + 2.6 * P.spin);\n}\n\n// The angle a curve in slot j has turned to: neighbours turn opposite ways,\n// each at a rate between 0.7 and 1.3 times the clock, from a start of its own.\nconst angle = (j, clock) => hash(j * 3 + 1) * TAU + (j & 1 ? -1 : 1) * (0.7 + 0.6 * hash(j * 3 + 2)) * clock;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { px, py, xl, xr, lab, rgb, col, sup, traces } = P;\n  if (P.colHue !== P.hue) {\n    // Fill and rim colours for each place in the cycle. The rim is the fill\n    // pushed to full brightness and halfway to white, at least 40 levels\n    // above every fill so it reads as a hard line.\n    // A deep fill from orange round to lime reads as brown or olive, so in\n    // that band the deep curves are lifted toward the light ones' level and\n    // paled a little.\n    for (let c = 0; c \u003c CYCLE; c++) {\n      const h = P.hue + BASE[c][0], hf = h - floor(h), band = BASE[c][1] \u003c 0.7 ? max(0, 1 - abs(hf - 0.14) / 0.15) : 0;\n      hsv(h, 0.8 - 0.22 * band, (BASE[c][1] + 0.3 * band) * 0.94, col, c * 6);\n      hsv(h, 0.45, 1, col, c * 6 + 3);\n    }\n    P.colHue = P.hue;\n  }\n  lab.fill(0);\n  rgb.fill(0);\n  // Slot j's top line sits at row slide - j * WD: the slots stack upward\n  // with j and the column slides down as slide grows.\n  const jLo = floor((P.slide - H) / WD), jHi = ceil(P.slide / WD);\n  const vis = [];\n  for (let j = jLo; j \u003c= jHi; j++) {\n    const top = P.slide - j * WD;\n    if (top >= H || top + WD \u003c= 0) continue;\n    const shape = SHAPES[((j % CYCLE) + CYCLE) % CYCLE], phi = angle(j, P.clock);\n    // Boundary points from the support function, panel direction a = 2 pi i\n    // / N: the point is h u(a) + h' u'(a) with the body angle a - phi. The\n    // panel's y runs down, so i = N/2 faces the left wall and 3N/4 faces up.\n    for (let i = 0; i \u003c N; i++) {\n      const a = (TAU * i) / N, ca = cos(a), sa = sin(a);\n      support(shape, a - phi, P.round, sup);\n      px[i] = sup[0] * ca - sup[1] * sa;\n      py[i] = sup[0] * sa + sup[1] * ca;\n    }\n    // The left support line on the inner face of the left wall, x = 1, and\n    // the top one on the slot's top line. The width is WD in every\n    // direction, so the right one lands on x = 63 and the bottom one on the\n    // next slot's top line without being placed there.\n    const ox = 1 - px[N / 2], oy = top - py[(3 * N) / 4];\n    const label = vis.length + 1;\n    xl.fill(1e9);\n    xr.fill(-1e9);\n    for (let i = 0; i \u003c N; i++) {\n      const xa = px[i] + ox, ya = py[i] + oy, i2 = (i + 1) % N, xb = px[i2] + ox, yb = py[i2] + oy;\n      if (ya === yb) continue;\n      const r0 = max(0, ceil(min(ya, yb) - 0.5)), r1 = min(H - 1, floor(max(ya, yb) - 0.5));\n      for (let r = r0; r \u003c= r1; r++) {\n        const x = xa + ((r + 0.5 - ya) * (xb - xa)) / (yb - ya);\n        if (x \u003c xl[r]) xl[r] = x;\n        if (x > xr[r]) xr[r] = x;\n      }\n    }\n    for (let r = max(0, floor(top)); r \u003c= min(H - 1, ceil(top + WD)); r++) {\n      if (xr[r] \u003c xl[r]) continue;\n      const x0 = max(1, ceil(xl[r] - 0.5)), x1 = min(W - 2, floor(xr[r] - 0.5));\n      for (let x = x0; x \u003c= x1; x++) lab[r * W + x] = label;\n    }\n    vis.push({\n      j, top, c: ((j % CYCLE) + CYCLE) % CYCLE, shape, phi, ox, oy,\n      left: py[N / 2] + oy, right: py[0] + oy, upX: px[(3 * N) / 4] + ox, downX: px[N / 4] + ox,\n    });\n  }\n  // Fill, with a rim wherever a 4-neighbour belongs to something else.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, l = lab[p];\n      if (!l) continue;\n      const rim = lab[p - 1] !== l || lab[p + 1] !== l || (y > 0 && lab[p - W] !== l) || (y \u003c H - 1 && lab[p + W] !== l);\n      const o = vis[l - 1].c * 6 + (rim ? 3 : 0), q = p * 3;\n      (rgb[q] = col[o]), (rgb[q + 1] = col[o + 1]), (rgb[q + 2] = col[o + 2]);\n    }\n  // The walls: dim slate, brighter where a slot's line meets them, and white\n  // over five rows where a curve touches them.\n  for (let y = 0; y \u003c H; y++)\n    for (const x of [0, W - 1]) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = 0.14), (rgb[q + 1] = 0.18), (rgb[q + 2] = 0.24);\n    }\n  const dot = (x, y, r, g, b) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    (rgb[q] = r), (rgb[q + 1] = g), (rgb[q + 2] = b);\n  };\n  for (const v of vis) {\n    const ty = floor(v.top);\n    for (const x of [0, W - 1]) dot(x, ty, 0.55, 0.6, 0.7);\n    for (let e = -2; e \u003c= 2; e++) dot(0, floor(v.left) + e, 1, 1, 1), dot(W - 1, floor(v.right) + e, 1, 1, 1);\n    // Above and below: a small white cross where the curve meets the line.\n    for (const [cx, cy] of [[v.upX, v.top], [v.downX, v.top + WD]]) {\n      const x = floor(cx), y = floor(cy - (cy === v.top ? 0 : 1e-3));\n      dot(x, y, 1, 1, 1), dot(x - 1, y, 1, 1, 1), dot(x + 1, y, 1, 1, 1), dot(x, y - 1, 1, 1, 1), dot(x, y + 1, 1, 1, 1);\n    }\n  }\n  // The corner trace, kept in each slot's own square so it slides with it.\n  if (P.trace) {\n    const seen = new Set();\n    for (const v of vis) {\n      seen.add(v.j);\n      let t = traces.get(v.j);\n      if (!t) traces.set(v.j, (t = { xs: [], ys: [], last: null }));\n      const tr = v.shape.tr, m = tr.length, now = [];\n      for (let c = 0; c \u003c m; c++) {\n        // At a peak of the support function h' is 0, so the point is h times\n        // the unit vector there.\n        const a = tr[c] + v.phi;\n        support(v.shape, tr[c], P.round, sup);\n        const ca = cos(a), sa = sin(a);\n        now.push([sup[0] * ca - sup[1] * sa + v.ox, sup[0] * sa + sup[1] * ca + v.oy - v.top]);\n      }\n      if (t.xs.length \u003c 12000)\n        for (let c = 0; c \u003c m; c++) {\n          const [x1, y1] = now[c], [x0, y0] = t.last ? t.last[c] : now[c];\n          const steps = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.7));\n          for (let s = 1; s \u003c= steps; s++) t.xs.push(x0 + ((x1 - x0) * s) / steps), t.ys.push(y0 + ((y1 - y0) * s) / steps);\n        }\n      t.last = now;\n      for (let i = 0; i \u003c t.xs.length; i++) dot(floor(t.xs[i]), floor(t.ys[i] + v.top), 1, 0.78, 0.25);\n    }\n    for (const j of traces.keys()) if (!seen.has(j)) traces.delete(j);\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-constant-width","type":"code","name":"constant-width","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Constant Width\n// Family:  geometry\n// Idea:    A column of curves of constant width 62, Reuleaux triangles, pentagons and heptagons, smooth curves built from odd harmonics and a disc, slides down a channel exactly 62 LEDs wide, each turning at its own rate while it touches both walls and the lines it shares with the curves above and below, so the stack never jams and never comes apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Curves of constant width, the Reuleaux polygons (Franz Reuleaux, 1876), and Barbier's theorem that they all have perimeter pi times their width (Joseph-Émile Barbier, 1860)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1\n//\n// Knob 1: Hue. Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive.\n// Knob 2: Speed. How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100.\n// Knob 3: Round. Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way.\n// Knob 4: Spin. How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that.\n// Buttons: K1 tap turns the corner trace on or off: each corner leaves a gold line in its own 62 x 62 square, and a turning Reuleaux triangle draws the square with rounded corners that the Watts drill cuts.\n\nconst W = 64, H = 128, WD = 62, N = 256, CYCLE = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The eight curves of the cycle, all of width WD. A Reuleaux n-gon is the\n// intersection of the n disks of radius WD centred on the corners of a\n// regular n-gon whose corner-to-far-corner distance is WD. A harmonic curve\n// has support function h = WD/2 + sum a cos(k t + c) over odd k from 3 up:\n// odd k is what makes h(t) + h(t + pi) = WD, the width in every direction,\n// and the radius of curvature h + h'' = WD/2 - sum a (k^2 - 1) cos(k t + c)\n// stays above 0, so it is convex. The amplitudes below keep that radius at\n// least 2 LEDs.\nconst SHAPES = [\n  { n: 3 },\n  { harm: [[3, 3.6, 0]] },\n  { n: 5 },\n  { harm: [[3, 2.2, 0], [5, 0.5, 1.1]] },\n  { n: 7 },\n  { disc: true },\n  { n: 3 },\n  { harm: [[3, 2.6, 0], [7, 0.16, 2.0]] },\n];\n// Base hue and brightness for each place in the cycle. The sharp curves are\n// lit brighter than the smooth ones, so the column reads as light and deep\n// shapes taking turns as it slides. The map's drift comes mostly from the\n// dark corners of each square, which swing round as the curves turn: with\n// all eight at one brightness it reads 0.263, with these 0.277.\nconst BASE = [[0.13, 0.86], [0.76, 0.55], [0.95, 0.86], [0.6, 0.55], [0.48, 0.86], [0.68, 0.55], [0.3, 0.86], [0.54, 0.55]];\n// The body angles each curve's trace follows: the n corners of a Reuleaux\n// polygon and the k peaks of a curve with one harmonic, which all run round\n// the same path, and for a curve of two harmonics the one point where its\n// support function peaks, since its corners are not alike and each would\n// draw a path of its own.\nfor (const s of SHAPES) {\n  if (s.n) s.tr = Array.from({ length: s.n }, (_, c) => (TAU * c) / s.n);\n  else if (s.harm && s.harm.length === 1) {\n    const [k, , c0] = s.harm[0];\n    s.tr = Array.from({ length: k }, (_, m) => (TAU * m - c0) / k);\n  } else if (s.harm) {\n    let best = -1e9, at = 0;\n    for (let i = 0; i \u003c 3600; i++) {\n      const b = (TAU * i) / 3600;\n      let h = 0;\n      for (const [k, a, c] of s.harm) h += a * cos(k * b + c);\n      if (h > best) (best = h), (at = b);\n    }\n    s.tr = [at];\n  } else s.tr = [0];\n}\n\n// Support function h and its derivative at body angle b, for a curve mixed\n// a share t of the way to the disc.\nfunction support(s, b, t, out) {\n  let h, d;\n  if (s.n) {\n    const n = s.n, R = WD / (2 * cos(PI / (2 * n))), step = TAU / n, half = PI / (2 * n);\n    let del = b - round(b / step) * step;\n    if (abs(del) \u003c= half) (h = R * cos(del)), (d = -R * sin(del));\n    else {\n      // The opposite direction falls in a corner's cone, so here the curve\n      // is the arc of radius WD round that corner.\n      const b2 = b + PI;\n      del = b2 - round(b2 / step) * step;\n      (h = WD - R * cos(del)), (d = R * sin(del));\n    }\n  } else if (s.harm) {\n    (h = WD / 2), (d = 0);\n    for (const [k, a, c] of s.harm) (h += a * cos(k * b + c)), (d -= a * k * sin(k * b + c));\n  } else (h = WD / 2), (d = 0);\n  out[0] = (1 - t) * h + (t * WD) / 2;\n  out[1] = (1 - t) * d;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, round: 0, spin: 0.06,\n    // The column's slide in rows and the spin clock in radians.\n    slide: 15, clock: 0,\n    trace: false, traces: new Map(),\n    px: new Float32Array(N), py: new Float32Array(N),\n    xl: new Float32Array(H), xr: new Float32Array(H),\n    lab: new Int8Array(W * H), rgb: new Float32Array(W * H * 3),\n    col: new Float32Array(CYCLE * 6), colHue: NaN, sup: new Float32Array(2),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.round = cl(k[2], 0, 1);\n  P.spin = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.trace = !P.trace;\n    P.traces.clear();\n  }\n  P.slide += d * P.speed * 3;\n  P.clock += d * (0.4 + 2.6 * P.spin);\n}\n\n// The angle a curve in slot j has turned to: neighbours turn opposite ways,\n// each at a rate between 0.7 and 1.3 times the clock, from a start of its own.\nconst angle = (j, clock) => hash(j * 3 + 1) * TAU + (j & 1 ? -1 : 1) * (0.7 + 0.6 * hash(j * 3 + 2)) * clock;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { px, py, xl, xr, lab, rgb, col, sup, traces } = P;\n  if (P.colHue !== P.hue) {\n    // Fill and rim colours for each place in the cycle. The rim is the fill\n    // pushed to full brightness and halfway to white, at least 40 levels\n    // above every fill so it reads as a hard line.\n    // A deep fill from orange round to lime reads as brown or olive, so in\n    // that band the deep curves are lifted toward the light ones' level and\n    // paled a little.\n    for (let c = 0; c \u003c CYCLE; c++) {\n      const h = P.hue + BASE[c][0], hf = h - floor(h), band = BASE[c][1] \u003c 0.7 ? max(0, 1 - abs(hf - 0.14) / 0.15) : 0;\n      hsv(h, 0.8 - 0.22 * band, (BASE[c][1] + 0.3 * band) * 0.94, col, c * 6);\n      hsv(h, 0.45, 1, col, c * 6 + 3);\n    }\n    P.colHue = P.hue;\n  }\n  lab.fill(0);\n  rgb.fill(0);\n  // Slot j's top line sits at row slide - j * WD: the slots stack upward\n  // with j and the column slides down as slide grows.\n  const jLo = floor((P.slide - H) / WD), jHi = ceil(P.slide / WD);\n  const vis = [];\n  for (let j = jLo; j \u003c= jHi; j++) {\n    const top = P.slide - j * WD;\n    if (top >= H || top + WD \u003c= 0) continue;\n    const shape = SHAPES[((j % CYCLE) + CYCLE) % CYCLE], phi = angle(j, P.clock);\n    // Boundary points from the support function, panel direction a = 2 pi i\n    // / N: the point is h u(a) + h' u'(a) with the body angle a - phi. The\n    // panel's y runs down, so i = N/2 faces the left wall and 3N/4 faces up.\n    for (let i = 0; i \u003c N; i++) {\n      const a = (TAU * i) / N, ca = cos(a), sa = sin(a);\n      support(shape, a - phi, P.round, sup);\n      px[i] = sup[0] * ca - sup[1] * sa;\n      py[i] = sup[0] * sa + sup[1] * ca;\n    }\n    // The left support line on the inner face of the left wall, x = 1, and\n    // the top one on the slot's top line. The width is WD in every\n    // direction, so the right one lands on x = 63 and the bottom one on the\n    // next slot's top line without being placed there.\n    const ox = 1 - px[N / 2], oy = top - py[(3 * N) / 4];\n    const label = vis.length + 1;\n    xl.fill(1e9);\n    xr.fill(-1e9);\n    for (let i = 0; i \u003c N; i++) {\n      const xa = px[i] + ox, ya = py[i] + oy, i2 = (i + 1) % N, xb = px[i2] + ox, yb = py[i2] + oy;\n      if (ya === yb) continue;\n      const r0 = max(0, ceil(min(ya, yb) - 0.5)), r1 = min(H - 1, floor(max(ya, yb) - 0.5));\n      for (let r = r0; r \u003c= r1; r++) {\n        const x = xa + ((r + 0.5 - ya) * (xb - xa)) / (yb - ya);\n        if (x \u003c xl[r]) xl[r] = x;\n        if (x > xr[r]) xr[r] = x;\n      }\n    }\n    for (let r = max(0, floor(top)); r \u003c= min(H - 1, ceil(top + WD)); r++) {\n      if (xr[r] \u003c xl[r]) continue;\n      const x0 = max(1, ceil(xl[r] - 0.5)), x1 = min(W - 2, floor(xr[r] - 0.5));\n      for (let x = x0; x \u003c= x1; x++) lab[r * W + x] = label;\n    }\n    vis.push({\n      j, top, c: ((j % CYCLE) + CYCLE) % CYCLE, shape, phi, ox, oy,\n      left: py[N / 2] + oy, right: py[0] + oy, upX: px[(3 * N) / 4] + ox, downX: px[N / 4] + ox,\n    });\n  }\n  // Fill, with a rim wherever a 4-neighbour belongs to something else.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, l = lab[p];\n      if (!l) continue;\n      const rim = lab[p - 1] !== l || lab[p + 1] !== l || (y > 0 && lab[p - W] !== l) || (y \u003c H - 1 && lab[p + W] !== l);\n      const o = vis[l - 1].c * 6 + (rim ? 3 : 0), q = p * 3;\n      (rgb[q] = col[o]), (rgb[q + 1] = col[o + 1]), (rgb[q + 2] = col[o + 2]);\n    }\n  // The walls: dim slate, brighter where a slot's line meets them, and white\n  // over five rows where a curve touches them.\n  for (let y = 0; y \u003c H; y++)\n    for (const x of [0, W - 1]) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = 0.14), (rgb[q + 1] = 0.18), (rgb[q + 2] = 0.24);\n    }\n  const dot = (x, y, r, g, b) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    (rgb[q] = r), (rgb[q + 1] = g), (rgb[q + 2] = b);\n  };\n  for (const v of vis) {\n    const ty = floor(v.top);\n    for (const x of [0, W - 1]) dot(x, ty, 0.55, 0.6, 0.7);\n    for (let e = -2; e \u003c= 2; e++) dot(0, floor(v.left) + e, 1, 1, 1), dot(W - 1, floor(v.right) + e, 1, 1, 1);\n    // Above and below: a small white cross where the curve meets the line.\n    for (const [cx, cy] of [[v.upX, v.top], [v.downX, v.top + WD]]) {\n      const x = floor(cx), y = floor(cy - (cy === v.top ? 0 : 1e-3));\n      dot(x, y, 1, 1, 1), dot(x - 1, y, 1, 1, 1), dot(x + 1, y, 1, 1, 1), dot(x, y - 1, 1, 1, 1), dot(x, y + 1, 1, 1, 1);\n    }\n  }\n  // The corner trace, kept in each slot's own square so it slides with it.\n  if (P.trace) {\n    const seen = new Set();\n    for (const v of vis) {\n      seen.add(v.j);\n      let t = traces.get(v.j);\n      if (!t) traces.set(v.j, (t = { xs: [], ys: [], last: null }));\n      const tr = v.shape.tr, m = tr.length, now = [];\n      for (let c = 0; c \u003c m; c++) {\n        // At a peak of the support function h' is 0, so the point is h times\n        // the unit vector there.\n        const a = tr[c] + v.phi;\n        support(v.shape, tr[c], P.round, sup);\n        const ca = cos(a), sa = sin(a);\n        now.push([sup[0] * ca - sup[1] * sa + v.ox, sup[0] * sa + sup[1] * ca + v.oy - v.top]);\n      }\n      if (t.xs.length \u003c 12000)\n        for (let c = 0; c \u003c m; c++) {\n          const [x1, y1] = now[c], [x0, y0] = t.last ? t.last[c] : now[c];\n          const steps = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.7));\n          for (let s = 1; s \u003c= steps; s++) t.xs.push(x0 + ((x1 - x0) * s) / steps), t.ys.push(y0 + ((y1 - y0) * s) / steps);\n        }\n      t.last = now;\n      for (let i = 0; i \u003c t.xs.length; i++) dot(floor(t.xs[i]), floor(t.ys[i] + v.top), 1, 0.78, 0.25);\n    }\n    for (const j of traces.keys()) if (!seen.has(j)) traces.delete(j);\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Spin=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the eight colours round the wheel together. At 0 the Reuleaux polygons are gold, rose, teal and lime, lit to 81%, and the smooth curves and the disc violet, azure, indigo and sky at 52%. Where a deep one would land between orange and lime it is lifted and paled, since there it would read brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the column slides: 3 rows a second times the knob, so at 2 a curve takes 10 seconds to pass down its own height of 62 rows and at 0.2 it takes 100."},{"name":"Round","min":0,"max":1,"about":"Mixes every curve with the disc of the same width, support function by support function, which keeps the width at 62. At 0 the Reuleaux triangle has the least area a curve of width 62 can have, 2709 LEDs; at 1 every curve is the disc, 3019. The perimeter stays 194.8 the whole way."},{"name":"Spin","min":0,"max":1,"about":"How fast the curves turn, 0.4 radians a second at 0 and 3 at 1; neighbours turn opposite ways and each at its own multiple of that."}],"start":[0,2,0,0.06],"measures":{"motion":0.4094,"detail":0.0438,"edges":1,"complexity":0.0838,"coverage":0.7349,"colour":0.4286,"drift":0.2768},"knobResponse":[0.306,0.2393,0.1029,0.1377]},{"slug":"contour","title":"Contour Map","family":"data","round":2,"note":"천천히 솟고 가라앉는 땅의 지형도예요. 다섯째 등고선마다 밝고, 바닷물이 차오르면 선은 땅에 그대로 남은 채 물 밑으로 들어가요.","idea":"A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","layer":{"id":"layer-contour","type":"code","name":"contour","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink."},{"name":"Morph","min":0,"max":6,"about":"How fast the land rises and sinks; 0 holds the map still."},{"name":"Interval","min":50,"max":200,"about":"Metres between contour lines, from a dense survey at 50 to a few wide rings at 200."},{"name":"Sea level","min":-300,"max":600,"about":"Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water."}],"start":[0,2,50,0.06],"measures":{"motion":0.059,"detail":0.1124,"edges":0.4216,"complexity":2.7352,"coverage":1,"colour":0.2347,"drift":0.0329},"knobResponse":[0.3087,0.1314,0.1058,0.2222]},{"slug":"couette-shimmer","title":"Couette Shimmer","family":"cosmetic","round":38,"note":"두 원통 사이에 든 펄 세럼을 옆에서 봐요. 안쪽 원통이 빨라지면 옆으로 흐르던 결이 테일러 소용돌이의 밝고 어두운 띠로 128줄을 쌓고, 더 빨라지면 띠가 물결치며 원통을 돌아요. K3 은 띠를 다섯 쌍에서 열네 쌍으로 늘려 가는 골로 만들고, K4 는 바깥 원통을 거꾸로 돌려 띠를 나선으로 기울여요.","idea":"A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Couette Shimmer\n// Family:  cosmetic\n// Idea:    A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after shimmer serum stirred between two cylinders as rheoscopic fluid shows it (Paul Matisse's Kalliroscope), with the Taylor vortices of Taylor-Couette flow (G. I. Taylor, 1923)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive.\n// Knob 2: Spin. How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in.\n// Knob 3: Rolls. How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing.\n// Knob 4: Counter. How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986).\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, asin, exp, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The cylinder seen from the side: column x looks at angle TH[x] round it,\n// the front half from -1.29 to 1.29 radians, so a thing going round slows\n// and narrows toward the panel's edges. ARC is the distance round the\n// surface in LEDs, the cylinder 32 LEDs in radius.\nconst TH = new Float32Array(W), ARC = new Float32Array(W), SHADE = new Float32Array(W), SPEC = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const xn = (x + 0.5) / 32 - 1, th = asin(0.96 * xn);\n  TH[x] = th;\n  ARC[x] = th * 32;\n  // Light from the front and a little to the left: the serum dims toward\n  // the cylinder's edges, and a soft upright highlight sits left of centre.\n  SHADE[x] = 0.62 + 0.38 * cos(th + 0.2);\n  SPEC[x] = exp(-(((th + 0.42) / 0.32) ** 2));\n}\n\n// What the aligned mica reflects across one pair of rolls, phase 0 to 2 pi:\n// the outflow boundary at 0, where the serum leaves the inner cylinder and\n// spreads against the outer one; the inflow boundary at pi. In one roll\n// the serum at the outer wall runs up, in the next down, so the flakes there\n// lean one way and then the other and the light catches one roll and not\n// the next. A thin dark line marks the outflow, where the flakes stand on\n// edge, and a thin bright one the inflow.\nconst NR = 512, REFL = new Float32Array(NR);\nfor (let i = 0; i \u003c NR; i++) {\n  const ph = (i / NR) * TAU, s = sin(ph);\n  const d0 = min(ph, TAU - ph), dp = abs(ph - PI);\n  REFL[i] = cl(0.5 + 0.34 * (s >= 0 ? s ** 0.6 : -((-s) ** 0.6)) - 0.42 * exp(-((d0 / 0.3) ** 2)) + 0.3 * exp(-((dp / 0.22) ** 2)), 0, 1);\n}\nconst refl = (ph) => {\n  const u = (ph / TAU) % 1;\n  return REFL[((u \u003c 0 ? u + 1 : u) * NR) | 0];\n};\n\n// Streak texture: random values on a 64 by 128 grid, read stretched 6 times\n// sideways, so the flakes the flow has lined up show as long streaks.\nconst NU = 64, NV = 128;\n\nexport function setup(params) {\n  const noise = new Float32Array(NU * NV);\n  for (let i = 0; i \u003c noise.length; i++) noise[i] = random();\n  const rate = new Float32Array(H);\n  for (let y = 0; y \u003c H; y++) rate[y] = 0.85 + 0.3 * random();\n  const glints = [];\n  for (let i = 0; i \u003c 220; i++) glints.push({ a: random() * 2.6 - 1.3, y: random() * H, ph: random() * TAU, w: 0.6 + 0.8 * random() });\n  params.s = {\n    hue: 0, spin: 2, rolls: 5, counter: 0, warm: 0, t: 0, ang: 0, wave: 0, spiral: 0, su: 0, begun: false,\n    noise, rate, glints, glow: new Float32Array(N), CA: new Float32Array(W), CB: new Float32Array(W), RA: new Float32Array(H), RB: new Float32Array(H), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n}\n\nfunction nz(S, u, v) {\n  const n = S.noise, fu = floor(u), fv = floor(v), au = u - fu, av = v - fv;\n  const i0 = ((fu % NU) + NU) % NU, i1 = (i0 + 1) % NU, j0 = ((fv % NV) + NV) % NV, j1 = (j0 + 1) % NV;\n  const a = n[j0 * NU + i0] + (n[j0 * NU + i1] - n[j0 * NU + i0]) * au;\n  const b = n[j1 * NU + i0] + (n[j1 * NU + i1] - n[j1 * NU + i0]) * au;\n  return a + (b - a) * av;\n}\n\n// The regimes Spin walks through, as weights 0..1.\nfunction regimes(s) {\n  return {\n    // Taylor vortices from the critical speed 1, full by 1.25.\n    rolls: sqrt(sm(1, 1.25, s)),\n    // Waves on the rolls from 1.2, full by 1.8; quieter again toward 4.\n    waves: sqrt(sm(1.2, 1.8, s)) * (1 - 0.6 * sm(3, 4, s)),\n    // A second, slower wave that modulates the first, from 2.6.\n    modulate: sm(2.6, 3.4, s),\n    // Turbulence inside the rolls from 3.\n    turb: sm(3, 4, s),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.spin = cl(k[1], 0.5, 4);\n  S.rolls = cl(k[2], 5, 14);\n  S.counter = cl(k[3], 0, 1);\n  step(S, d);\n  if (!S.begun) {\n    // Open as if the serum had been turning a while.\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n}\n\nfunction step(S, d) {\n  const s = S.spin;\n  S.t += d;\n  // The streaks run round at 5 LEDs a second per unit of Spin; the inner\n  // cylinder turns at twice that, 0.31 radians a second per unit; the\n  // waves go round at 0.34 of the inner cylinder's rate, as Coles measured.\n  S.su += d * 5 * s;\n  S.ang += d * 0.3125 * s;\n  S.wave += d * 0.34 * 0.3125 * s;\n  S.spiral += d * 0.3125 * s * 0.5;\n  // Glints ride the flow: round with the streaks, and up or down the roll\n  // they are in toward its inflow boundary, where they dive and come back.\n  const R = regimes(s), kk = (TAU * S.rolls) / H;\n  for (const g of S.glints) {\n    g.a += (d * 5 * s) / 32;\n    if (g.a > 1.3) g.a -= 2.6;\n    const ph = kk * (g.y - 63.5);\n    g.y += d * R.rolls * 1.2 * s * sin(ph);\n    if (g.y \u003c 0) g.y += H;\n    if (g.y >= H) g.y -= H;\n    // At the inflow boundary the serum turns in toward the inner cylinder\n    // and the flake goes with it; another comes out somewhere else.\n    if (R.rolls > 0.3 && cos(ph) \u003c -0.93) {\n      g.y = random() * H;\n      g.a = random() * 2.6 - 1.3;\n    }\n    // Tumbling: a flake turns over faster in faster shear.\n    g.ph += d * g.w * (1.2 + 1.6 * s);\n  }\n}\n\nfunction palette(S) {\n  const h = S.hue + 0.74, hh = h - floor(h);\n  // From red through orange and yellow to lime a deep tone reads brown or\n  // olive on the panel, so there the rolls keep their brightness and differ\n  // by saturation instead: full from 0.03 to 0.23 round the wheel, none\n  // beyond 0.96 and 0.3.\n  const dw = abs(((hh - 0.13 + 1.5) % 1) - 0.5), warm = 1 - sm(0.1, 0.17, dw);\n  const c = S.col;\n  // Deep, body, pearl and the highlight that leans round the wheel.\n  hsv(h - 0.02 * warm, 0.82 + 0.06 * warm, 0.3 + 0.55 * warm, c[0]);\n  hsv(h + 0.01, 0.6 - 0.15 * warm, 0.72 + 0.26 * warm, c[1]);\n  hsv(h + 0.12, 0.26 - 0.08 * warm, 1, c[2]);\n  hsv(h - 0.1, 0.12, 1, c[3]);\n  S.warm = warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const R = regimes(S.spin), kk = (TAU * S.rolls) / H, lam = H / S.rolls;\n  // Counter-rotating outer cylinder: from 0.15 the rolls lean into a spiral\n  // that runs down the panel as it turns; from 0.6 a second spiral of the\n  // other hand, turning the same way and so running up, comes in across it.\n  const cr = S.counter, sp1 = 3 * sm(0.15, 0.6, cr), sp2 = sm(0.6, 1, cr);\n  const wv = R.waves * (1 - sm(0.15, 0.45, cr));\n  const m = 6, aw = 0.13 * lam * kk;\n  const c = S.col, glow = S.glow, { CA, CB, RA, RB } = S;\n  // The rolls are not all equally strong: two slow waves of strength, one\n  // drifting round with the serum, cross each other over the panel.\n  for (let x = 0; x \u003c W; x++) {\n    CA[x] = sin(0.09 * ARC[x] - 0.8 * S.ang);\n    CB[x] = cos(0.21 * ARC[x] + 0.5 * S.ang);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    RA[y] = cos(0.045 * y + 0.13 * S.t);\n    RB[y] = sin(0.083 * y - 0.21 * S.t);\n  }\n  glow.fill(0);\n  // Glints: a flake flashes as it turns face on to the light.\n  for (const g of S.glints) {\n    const cw = cos(g.ph);\n    if (cw \u003c 0.85) continue;\n    const xs = (sin(g.a) / 0.96 + 1) * 32 - 0.5, xi = round(xs), yi = round(g.y) % H;\n    if (xi \u003c 0 || xi >= W) continue;\n    const b = ((cw - 0.85) / 0.15) ** 2 * 1.3;\n    glow[yi * W + xi] += b;\n    if (xi > 0) glow[yi * W + xi - 1] += b * 0.3;\n    if (xi \u003c W - 1) glow[yi * W + xi + 1] += b * 0.3;\n    if (yi > 0) glow[(yi - 1) * W + xi] += b * 0.3;\n    if (yi \u003c H - 1) glow[(yi + 1) * W + xi] += b * 0.3;\n  }\n  // The streak texture flows along each roll toward its inflow boundary;\n  // two copies, three seconds apart, take turns so it never smears.\n  const TL = 3, t0 = S.t % TL, t1 = (S.t + TL / 2) % TL, w0 = 1 - abs((2 * t0) / TL - 1);\n  const vz = R.rolls * 1.2 * S.spin;\n  const turbU = 1 + 2 * R.turb;\n  for (let x = 0; x \u003c W; x++) {\n    const th = TH[x], arc = ARC[x];\n    // Axial displacement of the rolls here: the travelling wave, and in the\n    // modulated regime a slower second wave riding on it.\n    const wph = m * (th - S.wave);\n    const wave = aw * wv * sin(wph) * (1 + 0.5 * R.modulate * sin(2 * th - 0.4 * S.wave * m));\n    const spiral1 = sp1 * (th - S.spiral), spiral2 = 3 * sp2 * (th - S.spiral);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let ph = kk * (y - 63.5) + wave;\n      if (R.turb > 0) ph += R.turb * 1.4 * (nz(S, arc / 5 - S.su * 0.4, y * 0.35 + S.t * 0.7) - 0.5);\n      let rf = refl(ph + spiral1);\n      if (sp2 > 0) rf = rf * (1 - 0.5 * sp2) + refl(ph - spiral2) * 0.5 * sp2;\n      const rb = 0.5 + R.rolls * (rf - 0.5) * (1 + 0.16 * CA[x] * RA[y] + 0.1 * CB[x] * RB[y]);\n      // Streaks: the texture moved round with the serum and along the roll.\n      const az = sin(ph + spiral1) * vz, su = S.su * S.rate[y];\n      const a0 = nz(S, ((arc - su) / 10) * turbU, (y - az * t0) * 0.75), a1 = nz(S, ((arc - su) / 10) * turbU + 17, (y - az * t1) * 0.75);\n      const tex = a0 * w0 + a1 * (1 - w0) - 0.5;\n      const sh = SHADE[x], spc = SPEC[x];\n      // Light: the serum's body by the cylinder's shading and the rolls,\n      // the streaks over it, the highlight strongest on the rolls that\n      // catch the light, and the glints.\n      const L = sh * (0.18 + 0.72 * rb) + (0.4 - 0.1 * R.rolls) * tex * sh;\n      const hi = spc * (0.15 + 0.85 * rb * rb) * 0.75 + glow[p];\n      // Deep to body to pearl by L; the highlight toward white.\n      let r, g, b;\n      if (L \u003c 0.5) {\n        const f = cl(L / 0.5, 0, 1);\n        r = c[0][0] + (c[1][0] - c[0][0]) * f;\n        g = c[0][1] + (c[1][1] - c[0][1]) * f;\n        b = c[0][2] + (c[1][2] - c[0][2]) * f;\n      } else {\n        const f = cl((L - 0.5) / 0.45, 0, 1);\n        r = c[1][0] + (c[2][0] - c[1][0]) * f;\n        g = c[1][1] + (c[2][1] - c[1][1]) * f;\n        b = c[1][2] + (c[2][2] - c[1][2]) * f;\n      }\n      const lo = 1 - (1 - cl(L / 0.2, 0, 1)) * (1 - 0.7 * S.warm), hm = min(1, hi);\n      r *= lo;\n      g *= lo;\n      b *= lo;\n      r += (c[3][0] - r) * hm;\n      g += (c[3][1] - g) * hm;\n      b += (c[3][2] - b) * hm;\n      display.setPixel(x, y, round(255 * cl(r, 0, 1)), round(255 * cl(g, 0, 1)), round(255 * cl(b, 0, 1)));\n    }\n  }\n}\n","layer":{"id":"layer-couette-shimmer","type":"code","name":"couette-shimmer","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Couette Shimmer\n// Family:  cosmetic\n// Idea:    A pearly mica serum fills the gap between a turning inner cylinder and a still outer one, seen from the side, and as the inner one speeds up the smooth sideways streaks of Couette flow break into Taylor vortices, stacked rolls turning in alternate senses whose aligned mica shows as bright and dark bands up the whole panel, which then go wavy and send their waves round the cylinder, while single flakes glint white as they tumble.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after shimmer serum stirred between two cylinders as rheoscopic fluid shows it (Paul Matisse's Kalliroscope), with the Taylor vortices of Taylor-Couette flow (G. I. Taylor, 1923)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive.\n// Knob 2: Spin. How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in.\n// Knob 3: Rolls. How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing.\n// Knob 4: Counter. How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986).\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, asin, exp, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The cylinder seen from the side: column x looks at angle TH[x] round it,\n// the front half from -1.29 to 1.29 radians, so a thing going round slows\n// and narrows toward the panel's edges. ARC is the distance round the\n// surface in LEDs, the cylinder 32 LEDs in radius.\nconst TH = new Float32Array(W), ARC = new Float32Array(W), SHADE = new Float32Array(W), SPEC = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const xn = (x + 0.5) / 32 - 1, th = asin(0.96 * xn);\n  TH[x] = th;\n  ARC[x] = th * 32;\n  // Light from the front and a little to the left: the serum dims toward\n  // the cylinder's edges, and a soft upright highlight sits left of centre.\n  SHADE[x] = 0.62 + 0.38 * cos(th + 0.2);\n  SPEC[x] = exp(-(((th + 0.42) / 0.32) ** 2));\n}\n\n// What the aligned mica reflects across one pair of rolls, phase 0 to 2 pi:\n// the outflow boundary at 0, where the serum leaves the inner cylinder and\n// spreads against the outer one; the inflow boundary at pi. In one roll\n// the serum at the outer wall runs up, in the next down, so the flakes there\n// lean one way and then the other and the light catches one roll and not\n// the next. A thin dark line marks the outflow, where the flakes stand on\n// edge, and a thin bright one the inflow.\nconst NR = 512, REFL = new Float32Array(NR);\nfor (let i = 0; i \u003c NR; i++) {\n  const ph = (i / NR) * TAU, s = sin(ph);\n  const d0 = min(ph, TAU - ph), dp = abs(ph - PI);\n  REFL[i] = cl(0.5 + 0.34 * (s >= 0 ? s ** 0.6 : -((-s) ** 0.6)) - 0.42 * exp(-((d0 / 0.3) ** 2)) + 0.3 * exp(-((dp / 0.22) ** 2)), 0, 1);\n}\nconst refl = (ph) => {\n  const u = (ph / TAU) % 1;\n  return REFL[((u \u003c 0 ? u + 1 : u) * NR) | 0];\n};\n\n// Streak texture: random values on a 64 by 128 grid, read stretched 6 times\n// sideways, so the flakes the flow has lined up show as long streaks.\nconst NU = 64, NV = 128;\n\nexport function setup(params) {\n  const noise = new Float32Array(NU * NV);\n  for (let i = 0; i \u003c noise.length; i++) noise[i] = random();\n  const rate = new Float32Array(H);\n  for (let y = 0; y \u003c H; y++) rate[y] = 0.85 + 0.3 * random();\n  const glints = [];\n  for (let i = 0; i \u003c 220; i++) glints.push({ a: random() * 2.6 - 1.3, y: random() * H, ph: random() * TAU, w: 0.6 + 0.8 * random() });\n  params.s = {\n    hue: 0, spin: 2, rolls: 5, counter: 0, warm: 0, t: 0, ang: 0, wave: 0, spiral: 0, su: 0, begun: false,\n    noise, rate, glints, glow: new Float32Array(N), CA: new Float32Array(W), CB: new Float32Array(W), RA: new Float32Array(H), RB: new Float32Array(H), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n}\n\nfunction nz(S, u, v) {\n  const n = S.noise, fu = floor(u), fv = floor(v), au = u - fu, av = v - fv;\n  const i0 = ((fu % NU) + NU) % NU, i1 = (i0 + 1) % NU, j0 = ((fv % NV) + NV) % NV, j1 = (j0 + 1) % NV;\n  const a = n[j0 * NU + i0] + (n[j0 * NU + i1] - n[j0 * NU + i0]) * au;\n  const b = n[j1 * NU + i0] + (n[j1 * NU + i1] - n[j1 * NU + i0]) * au;\n  return a + (b - a) * av;\n}\n\n// The regimes Spin walks through, as weights 0..1.\nfunction regimes(s) {\n  return {\n    // Taylor vortices from the critical speed 1, full by 1.25.\n    rolls: sqrt(sm(1, 1.25, s)),\n    // Waves on the rolls from 1.2, full by 1.8; quieter again toward 4.\n    waves: sqrt(sm(1.2, 1.8, s)) * (1 - 0.6 * sm(3, 4, s)),\n    // A second, slower wave that modulates the first, from 2.6.\n    modulate: sm(2.6, 3.4, s),\n    // Turbulence inside the rolls from 3.\n    turb: sm(3, 4, s),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.spin = cl(k[1], 0.5, 4);\n  S.rolls = cl(k[2], 5, 14);\n  S.counter = cl(k[3], 0, 1);\n  step(S, d);\n  if (!S.begun) {\n    // Open as if the serum had been turning a while.\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n}\n\nfunction step(S, d) {\n  const s = S.spin;\n  S.t += d;\n  // The streaks run round at 5 LEDs a second per unit of Spin; the inner\n  // cylinder turns at twice that, 0.31 radians a second per unit; the\n  // waves go round at 0.34 of the inner cylinder's rate, as Coles measured.\n  S.su += d * 5 * s;\n  S.ang += d * 0.3125 * s;\n  S.wave += d * 0.34 * 0.3125 * s;\n  S.spiral += d * 0.3125 * s * 0.5;\n  // Glints ride the flow: round with the streaks, and up or down the roll\n  // they are in toward its inflow boundary, where they dive and come back.\n  const R = regimes(s), kk = (TAU * S.rolls) / H;\n  for (const g of S.glints) {\n    g.a += (d * 5 * s) / 32;\n    if (g.a > 1.3) g.a -= 2.6;\n    const ph = kk * (g.y - 63.5);\n    g.y += d * R.rolls * 1.2 * s * sin(ph);\n    if (g.y \u003c 0) g.y += H;\n    if (g.y >= H) g.y -= H;\n    // At the inflow boundary the serum turns in toward the inner cylinder\n    // and the flake goes with it; another comes out somewhere else.\n    if (R.rolls > 0.3 && cos(ph) \u003c -0.93) {\n      g.y = random() * H;\n      g.a = random() * 2.6 - 1.3;\n    }\n    // Tumbling: a flake turns over faster in faster shear.\n    g.ph += d * g.w * (1.2 + 1.6 * s);\n  }\n}\n\nfunction palette(S) {\n  const h = S.hue + 0.74, hh = h - floor(h);\n  // From red through orange and yellow to lime a deep tone reads brown or\n  // olive on the panel, so there the rolls keep their brightness and differ\n  // by saturation instead: full from 0.03 to 0.23 round the wheel, none\n  // beyond 0.96 and 0.3.\n  const dw = abs(((hh - 0.13 + 1.5) % 1) - 0.5), warm = 1 - sm(0.1, 0.17, dw);\n  const c = S.col;\n  // Deep, body, pearl and the highlight that leans round the wheel.\n  hsv(h - 0.02 * warm, 0.82 + 0.06 * warm, 0.3 + 0.55 * warm, c[0]);\n  hsv(h + 0.01, 0.6 - 0.15 * warm, 0.72 + 0.26 * warm, c[1]);\n  hsv(h + 0.12, 0.26 - 0.08 * warm, 1, c[2]);\n  hsv(h - 0.1, 0.12, 1, c[3]);\n  S.warm = warm;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const R = regimes(S.spin), kk = (TAU * S.rolls) / H, lam = H / S.rolls;\n  // Counter-rotating outer cylinder: from 0.15 the rolls lean into a spiral\n  // that runs down the panel as it turns; from 0.6 a second spiral of the\n  // other hand, turning the same way and so running up, comes in across it.\n  const cr = S.counter, sp1 = 3 * sm(0.15, 0.6, cr), sp2 = sm(0.6, 1, cr);\n  const wv = R.waves * (1 - sm(0.15, 0.45, cr));\n  const m = 6, aw = 0.13 * lam * kk;\n  const c = S.col, glow = S.glow, { CA, CB, RA, RB } = S;\n  // The rolls are not all equally strong: two slow waves of strength, one\n  // drifting round with the serum, cross each other over the panel.\n  for (let x = 0; x \u003c W; x++) {\n    CA[x] = sin(0.09 * ARC[x] - 0.8 * S.ang);\n    CB[x] = cos(0.21 * ARC[x] + 0.5 * S.ang);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    RA[y] = cos(0.045 * y + 0.13 * S.t);\n    RB[y] = sin(0.083 * y - 0.21 * S.t);\n  }\n  glow.fill(0);\n  // Glints: a flake flashes as it turns face on to the light.\n  for (const g of S.glints) {\n    const cw = cos(g.ph);\n    if (cw \u003c 0.85) continue;\n    const xs = (sin(g.a) / 0.96 + 1) * 32 - 0.5, xi = round(xs), yi = round(g.y) % H;\n    if (xi \u003c 0 || xi >= W) continue;\n    const b = ((cw - 0.85) / 0.15) ** 2 * 1.3;\n    glow[yi * W + xi] += b;\n    if (xi > 0) glow[yi * W + xi - 1] += b * 0.3;\n    if (xi \u003c W - 1) glow[yi * W + xi + 1] += b * 0.3;\n    if (yi > 0) glow[(yi - 1) * W + xi] += b * 0.3;\n    if (yi \u003c H - 1) glow[(yi + 1) * W + xi] += b * 0.3;\n  }\n  // The streak texture flows along each roll toward its inflow boundary;\n  // two copies, three seconds apart, take turns so it never smears.\n  const TL = 3, t0 = S.t % TL, t1 = (S.t + TL / 2) % TL, w0 = 1 - abs((2 * t0) / TL - 1);\n  const vz = R.rolls * 1.2 * S.spin;\n  const turbU = 1 + 2 * R.turb;\n  for (let x = 0; x \u003c W; x++) {\n    const th = TH[x], arc = ARC[x];\n    // Axial displacement of the rolls here: the travelling wave, and in the\n    // modulated regime a slower second wave riding on it.\n    const wph = m * (th - S.wave);\n    const wave = aw * wv * sin(wph) * (1 + 0.5 * R.modulate * sin(2 * th - 0.4 * S.wave * m));\n    const spiral1 = sp1 * (th - S.spiral), spiral2 = 3 * sp2 * (th - S.spiral);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let ph = kk * (y - 63.5) + wave;\n      if (R.turb > 0) ph += R.turb * 1.4 * (nz(S, arc / 5 - S.su * 0.4, y * 0.35 + S.t * 0.7) - 0.5);\n      let rf = refl(ph + spiral1);\n      if (sp2 > 0) rf = rf * (1 - 0.5 * sp2) + refl(ph - spiral2) * 0.5 * sp2;\n      const rb = 0.5 + R.rolls * (rf - 0.5) * (1 + 0.16 * CA[x] * RA[y] + 0.1 * CB[x] * RB[y]);\n      // Streaks: the texture moved round with the serum and along the roll.\n      const az = sin(ph + spiral1) * vz, su = S.su * S.rate[y];\n      const a0 = nz(S, ((arc - su) / 10) * turbU, (y - az * t0) * 0.75), a1 = nz(S, ((arc - su) / 10) * turbU + 17, (y - az * t1) * 0.75);\n      const tex = a0 * w0 + a1 * (1 - w0) - 0.5;\n      const sh = SHADE[x], spc = SPEC[x];\n      // Light: the serum's body by the cylinder's shading and the rolls,\n      // the streaks over it, the highlight strongest on the rolls that\n      // catch the light, and the glints.\n      const L = sh * (0.18 + 0.72 * rb) + (0.4 - 0.1 * R.rolls) * tex * sh;\n      const hi = spc * (0.15 + 0.85 * rb * rb) * 0.75 + glow[p];\n      // Deep to body to pearl by L; the highlight toward white.\n      let r, g, b;\n      if (L \u003c 0.5) {\n        const f = cl(L / 0.5, 0, 1);\n        r = c[0][0] + (c[1][0] - c[0][0]) * f;\n        g = c[0][1] + (c[1][1] - c[0][1]) * f;\n        b = c[0][2] + (c[1][2] - c[0][2]) * f;\n      } else {\n        const f = cl((L - 0.5) / 0.45, 0, 1);\n        r = c[1][0] + (c[2][0] - c[1][0]) * f;\n        g = c[1][1] + (c[2][1] - c[1][1]) * f;\n        b = c[1][2] + (c[2][2] - c[1][2]) * f;\n      }\n      const lo = 1 - (1 - cl(L / 0.2, 0, 1)) * (1 - 0.7 * S.warm), hm = min(1, hi);\n      r *= lo;\n      g *= lo;\n      b *= lo;\n      r += (c[3][0] - r) * hm;\n      g += (c[3][1] - g) * hm;\n      b += (c[3][2] - b) * hm;\n      display.setPixel(x, y, round(255 * cl(r, 0, 1)), round(255 * cl(g, 0, 1)), round(255 * cl(b, 0, 1)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Spin=0.5..4, Rolls=5..14, Counter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel; its pearl leans 0.12 on round the wheel and the highlight 0.1 back. At 0 lilac with pink pearl; at 0.1 orchid, 0.2 rose, 0.3 coral, 0.4 gold, 0.5 lime, 0.6 mint, 0.7 aqua, 0.8 sky blue, 0.9 periwinkle. From red to lime the dark rolls stay bright and only deepen in colour, so nothing reads brown or olive."},{"name":"Spin","min":0.5,"max":4,"about":"How fast the inner cylinder turns, 1 being the critical speed. From 0.5 to 1 plain Couette flow: the serum only runs round, and the panel is a sheen of sideways streaks moving at 5 LEDs a second per unit of Spin. Past 1 Taylor vortices: level bands, a pair of rolls 25.6 rows tall at the opening Rolls, at full contrast by 1.25, standing still while the streaks run through them and flow up one roll and down the next. From 1.2 the rolls go wavy, six waves round the cylinder, two and a half across the panel, travelling round at 0.34 of the inner cylinder's rate: at 2, the opening, a crest crosses the middle every 4.9 seconds. From 2.6 a slower second wave swells and shrinks the first, and from 3 the rolls fill with turbulence and their edges fray while the bands hold. In the laboratory those last two come at about 10 and 20 times the critical speed; the knob draws them in."},{"name":"Rolls","min":5,"max":14,"about":"How many pairs of rolls stand up the panel, as a narrower gap between the cylinders gives more. At 5 each roll is 12.8 rows tall; at 9.5 6.7; at 14 4.6, a fine ribbing."},{"name":"Counter","min":0,"max":1,"about":"How fast the outer cylinder turns the other way. Up to 0.15 nothing changes. From 0.15 to 0.6 the rolls lean into a spiral vortex that runs down the panel as it turns, 1.2 pairs of fall across the panel at 0.6, and the waves die away; from 0.6 a second spiral of the other hand runs up through it, and at 1 the two cross in a lattice of diamonds that slides sideways: interpenetrating spirals, as in Andereck, Liu and Swinney's map of the regimes (1986)."}],"start":[0,2,5,0.06],"measures":{"motion":0.2097,"detail":0.0404,"edges":0.1149,"complexity":2.5766,"coverage":0.9999,"colour":0.1504,"drift":0.059},"knobResponse":[0.3171,0.1536,0.1747,0.1924]},{"slug":"crackle-polish","title":"Crackle Polish","family":"cosmetic","round":39,"note":"형광 분홍 바탕 위의 검은 크래클 탑코트가 마르며 갈라져요. 긴 금이 먼저 패널을 가로지르고, 짧은 금이 옛 금에서 직각으로 나와 다른 금에 직각으로 닿고, 틈이 벌어지며 조각이 광택 테를 두른 구슬이 돼요. 다 갈라지면 새 코트를 위에서 칠해 내려와요.","idea":"A glossy colour fills the panel, a dark top coat is brushed over it from the top down, and as the coat dries it splits, first in long cracks across the panel and then in shorter and shorter cracks that each start on an older one at a right angle, while the gaps widen and the islands of coat shrink into rounded beads with a gloss on their edges and the colour glowing up through the network, until a fresh coat goes on.","buttons":"K1 tap brushes a fresh coat on now.","code":"// ===== Patternflow pattern =====\n// Title:   Crackle Polish\n// Family:  cosmetic\n// Idea:    A glossy colour fills the panel, a dark top coat is brushed over it from the top down, and as the coat dries it splits, first in long cracks across the panel and then in shorter and shorter cracks that each start on an older one at a right angle, while the gaps widen and the islands of coat shrink into rounded beads with a gloss on their edges and the colour glowing up through the network, until a fresh coat goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after crackle nail polish, a top coat that shrinks as it dries, and the hierarchical crack patterns that form by successive division of domains (Steffen Bohn, Ludovic Pauchard and Yves Couder, 2005)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Craze=0..1, Coat=0..1\n//\n// Knob 1: Hue. Turns the base colour round the whole wheel: at 0 hot pink, 0.1 red, 0.15 orange, 0.22 yellow, 0.3 lime, 0.4 green, 0.55 aqua, 0.65 azure, 0.75 blue, 0.85 violet, 0.95 magenta. Orange and yellow bases are paled a little, lit to full and shaded less beside the islands, so no gap turns brown.\n// Knob 2: Speed. At 2 the coat goes on in 1.2 s, the first crack opens 0.6 s later and runs across the panel in about a second, the last starts about 4.5 s after the first, and when the gaps have finished widening the crackle holds until a new coat goes on, about 11 s after the last. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Craze. How far the coat keeps splitting. At 0 a domain stops splitting once it is under about 20 LEDs long, which leaves about 50 islands, most of them 9 to 18 LEDs across; at 1 under about 11, about 155 islands of 5 to 10, and the gaps open half as wide.\n// Knob 4: Coat. The colour of the top coat: black lacquer at 0, a deep jewel tone opposite the base on the wheel at 0.5, a pale pearl at 1. On the dark coats the gloss is a white rim on the edges facing the light; on the pearl the edges turned away fall into a cool grey-lilac shade, as a pearl pigment shifts with the angle.\n// Buttons: K1 tap brushes a fresh coat on now.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n// The cycle, in seconds at Speed 2: the brush crosses the panel in LAY, the\n// first crack opens at T1 and the last near T2, and a new coat comes HOLD\n// after the last. The run opens at START, with the first crack running.\nconst LAY = 1.2, T1 = 1.8, T2 = 6, HOLD = 5, START = 2.4;\n// Crack tips run at VTIP LEDs a second; a gap opens with time constant TAU.\nconst VTIP = 70, TAU = 1.3;\n// Towards the light, x right and y down: up and to the left.\nconst LX = -0.6, LY = -0.8;\n// Opening hue: hot pink.\nconst H0 = 0.93;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The domains are worked out on a grid of half-LED cells: each cell holds\n// the domain it belongs to, or -1 on a crack.\nconst FW = 2 * W, FH = 2 * H;\n// A crack tip moves STEP LEDs at a time, and within BEND LEDs of an older\n// crack it turns to meet it square.\nconst STEP = 0.25, BEND = 3;\n// Gap pixels are listed out to REACH LEDs from a crack's line.\nconst REACH = 7;\n\n// The whole crackle of one coat, worked out when it goes on. The panel is\n// one domain. A domain splits across its long axis: a crack starts on its\n// rim, square to the older crack it leaves, and runs across until it turns\n// to meet the crack on the far side square. Each half splits the same way\n// until it is too short; bigger domains crack sooner.\nfunction crackle(craze) {\n  const stop = 20 - 9 * craze, span = log((W * H) / (0.45 * stop * stop));\n  const lab = new Int32Array(FW * FH), cracks = [];\n  const wall = (x, y) => {\n    const i = floor(2 * x), j = floor(2 * y);\n    return i \u003c 0 || j \u003c 0 || i >= FW || j >= FH || lab[j * FW + i] \u003c 0;\n  };\n  let ids = 1;\n  const todo = [{ id: 0, b: [0, 0, FW - 1, FH - 1], ready: 0 }];\n  while (todo.length) {\n    const d = todo.pop(), [i0, j0, i1, j1] = d.b;\n    let n = 0, sx = 0, sy = 0, sxx = 0, syy = 0, sxy = 0;\n    const nb = [FW, FH, 0, 0];\n    for (let j = j0; j \u003c= j1; j++)\n      for (let i = i0; i \u003c= i1; i++)\n        if (lab[j * FW + i] === d.id) {\n          const x = (i + 0.5) / 2, y = (j + 0.5) / 2;\n          n++;\n          sx += x;\n          sy += y;\n          sxx += x * x;\n          syy += y * y;\n          sxy += x * y;\n          nb[0] = min(nb[0], i);\n          nb[1] = min(nb[1], j);\n          nb[2] = max(nb[2], i);\n          nb[3] = max(nb[3], j);\n        }\n    if (n \u003c 8) continue;\n    const mx = sx / n, my = sy / n, vxx = sxx / n - mx * mx, vyy = syy / n - my * my, vxy = sxy / n - mx * my;\n    const ang = 0.5 * Math.atan2(2 * vxy, vxx - vyy);\n    // A bar of length L has variance L^2 / 12 along its axis.\n    const long = sqrt(12 * (vxx * cos(ang) ** 2 + 2 * vxy * cos(ang) * sin(ang) + vyy * sin(ang) ** 2));\n    // The cut is turned up to 20 degrees off square; its ends bend square anyway.\n    const tu = ang + (random() - 0.5) * 0.7, ux = cos(tu), uy = sin(tu);\n    if (long \u003c stop * (0.85 + 0.3 * random())) continue;\n    // Where the cut line, across the long axis near the middle, meets the rim.\n    const off = (random() - 0.5) * 0.36 * long, cx = mx + ux * off, cy = my + uy * off;\n    if (wall(cx, cy)) continue;\n    const ends = [-1, 1].map((sg) => {\n      let x = cx, y = cy;\n      while (!wall(x - sg * uy * STEP, y + sg * ux * STEP)) {\n        x -= sg * uy * STEP;\n        y += sg * ux * STEP;\n      }\n      return [x, y, sg];\n    });\n    const [sx0, sy0, sg] = ends[random() \u003c 0.5 ? 0 : 1];\n    // Heading: across, toward the other end; it starts square off its rim.\n    const hx = sg * uy, hy = -sg * ux;\n    let x = sx0, y = sy0, dx = hx, dy = hy, run = 0, ok = false;\n    const pts = [[x, y]], cells = [];\n    for (let k = 0; k \u003c (4 * long) / STEP; k++) {\n      // The nearest older crack (or the panel's edge) within BEND, and the\n      // way square off it, from all its cells nearby.\n      let best = BEND * BEND, gx = 0, gy = 0;\n      const ci = floor(2 * x), cj = floor(2 * y), r = 2 * BEND;\n      for (let j = cj - r; j \u003c= cj + r; j++)\n        for (let i = ci - r; i \u003c= ci + r; i++) {\n          if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] >= 0) continue;\n          const ex = x - (cl(i, -1, FW) + 0.5) / 2, ey = y - (cl(j, -1, FH) + 0.5) / 2, e2 = ex * ex + ey * ey;\n          best = min(best, e2);\n          if (e2 \u003c 4) {\n            const wt = exp(-e2);\n            gx += ex * wt;\n            gy += ey * wt;\n          }\n        }\n      const dist = sqrt(best), gl = sqrt(gx * gx + gy * gy);\n      let calm = 1;\n      if (best \u003c BEND * BEND && gl > 0) {\n        gx /= gl;\n        gy /= gl;\n        // Leaving its own rim: square off it. Coming up on another: turn square into it.\n        const into = run \u003c 1.2 ? -0.5 : dx * gx + dy * gy \u003c 0 ? 0.6 * (1 - dist / BEND) : 0;\n        if (into) {\n          dx -= into * gx;\n          dy -= into * gy;\n          calm = dist / BEND;\n        }\n      }\n      const tw = (random() - 0.5) * 0.22 * calm;\n      dx += 0.05 * hx * calm - tw * dy;\n      dy += 0.05 * hy * calm + tw * dx;\n      const dl = sqrt(dx * dx + dy * dy);\n      dx /= dl;\n      dy /= dl;\n      x += dx * STEP;\n      y += dy * STEP;\n      run += STEP;\n      const ci2 = floor(2 * x), cj2 = floor(2 * y), last = cells[cells.length - 1];\n      // Cells of the crack, joined edge to edge so nothing leaks past it.\n      if (last && last[0] !== ci2 && last[1] !== cj2) cells.push([ci2, last[1]]);\n      if (!last || last[0] !== ci2 || last[1] !== cj2) cells.push([ci2, cj2]);\n      if (wall(x, y)) {\n        pts.push([x, y]);\n        ok = run > 2;\n        break;\n      }\n      if (k % 4 === 3) pts.push([x, y]);\n    }\n    if (!ok) continue;\n    for (const [i, j] of cells) if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] === d.id) lab[j * FW + i] = -1;\n    // Fill one side with a new domain.\n    const m = pts[pts.length >> 1], q = pts[(pts.length >> 1) + 1] || pts[pts.length - 1];\n    const tx = q[0] - m[0], ty = q[1] - m[1], tl = Math.hypot(tx, ty) || 1;\n    const si = floor(2 * (m[0] - (ty / tl) * 0.8)), sj = floor(2 * (m[1] + (tx / tl) * 0.8));\n    if (si \u003c 0 || sj \u003c 0 || si >= FW || sj >= FH || lab[sj * FW + si] !== d.id) continue;\n    const nid = ids++, stack = [sj * FW + si];\n    lab[sj * FW + si] = nid;\n    while (stack.length) {\n      const c = stack.pop(), i = c % FW, j = (c - i) / FW;\n      for (const e of [i > 0 ? c - 1 : -1, i \u003c FW - 1 ? c + 1 : -1, j > 0 ? c - FW : -1, j \u003c FH - 1 ? c + FW : -1])\n        if (e >= 0 && lab[e] === d.id) {\n          lab[e] = nid;\n          stack.push(e);\n        }\n    }\n    let len = 0;\n    for (let k = 1; k \u003c pts.length; k++) len += Math.hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n    const age = cl(log((W * H) / (n / 4)) / span, 0, 1), t = max(d.ready + 0.06, T1 + (T2 - T1) * age);\n    // Final half-width: the first cracks open widest.\n    cracks.push({ pts, len, t, w: 1.5 - 0.85 * age });\n    const ready = t + len / VTIP;\n    todo.push({ id: d.id, b: nb, ready }, { id: nid, b: nb, ready });\n  }\n  return gapLists(cracks);\n}\n\n// For each crack, every pixel within REACH of its line: how far from it,\n// and how far along the crack the nearest point lies.\nfunction gapLists(cracks) {\n  const dist = new Float32Array(N), along = new Float32Array(N), seen = new Int32Array(N).fill(-1);\n  cracks.forEach((c, ci) => {\n    const idx = [];\n    let u0 = 0;\n    for (let k = 1; k \u003c c.pts.length; k++) {\n      const [ax, ay] = c.pts[k - 1], [bx, by] = c.pts[k], ex = bx - ax, ey = by - ay, el = sqrt(ex * ex + ey * ey) || 1e-6;\n      for (let y = max(0, floor(min(ay, by) - REACH)); y \u003c= min(H - 1, floor(max(ay, by) + REACH)); y++)\n        for (let x = max(0, floor(min(ax, bx) - REACH)); x \u003c= min(W - 1, floor(max(ax, bx) + REACH)); x++) {\n          const px = x + 0.5 - ax, py = y + 0.5 - ay, f = cl((px * ex + py * ey) / (el * el), 0, 1);\n          const qx = px - f * ex, qy = py - f * ey, dd = sqrt(qx * qx + qy * qy), p = y * W + x;\n          if (dd > REACH) continue;\n          if (seen[p] !== ci) {\n            seen[p] = ci;\n            idx.push(p);\n            dist[p] = 1e9;\n          }\n          if (dd \u003c dist[p]) {\n            dist[p] = dd;\n            along[p] = u0 + f * el;\n          }\n        }\n      u0 += el;\n    }\n    c.idx = Int32Array.from(idx);\n    c.d = Float32Array.from(idx, (p) => dist[p]);\n    c.u = Float32Array.from(idx, (p) => along[p]);\n    c.pts = null;\n  });\n  return cracks;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, craze: 0, coat: 0.06, begun: false, t: START, end: 0, cracks: [], old: null, brush: new Float32Array(W),\n    G: new Float32Array(N),\n    base: [0, 0, 0], ink: [0, 0, 0], a: [0, 0, 0], b: [0, 0, 0], cool: [0, 0, 0],\n  };\n}\n\nfunction newCoat(S, t0) {\n  S.old = S.cracks;\n  // The brush's bristles: a mark per column, softened.\n  let m = random();\n  for (let x = 0; x \u003c W; x++) S.brush[x] = 0.07 * (m = 0.55 * m + 0.45 * random());\n  S.cracks = crackle(S.craze);\n  let last = 0;\n  for (const c of S.cracks) last = max(last, c.t);\n  S.end = last + HOLD;\n  S.t = t0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.craze = cl(k[2], 0, 1);\n  S.coat = cl(k[3], 0, 1);\n  if (!S.begun) {\n    newCoat(S, START);\n    S.old = null;\n    S.begun = true;\n  }\n  S.t += (cl(dt || 0, 0, 0.1) * S.speed) / 2;\n  if (S.t > S.end || (input.btnPressed && input.btnPressed[0])) newCoat(S, 0);\n}\n\n// Polynomial smooth minimum: where two gaps come within k of each other\n// they merge in a fillet, which rounds the island's corner between them.\nfunction smin(a, b, k) {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n}\n\n// G: signed distance to the open gaps, in LEDs, positive on the coat. Each\n// crack is a gap round its line as far as its tip, its half-width growing\n// from a hairline as it opens, and the corners it makes with older cracks\n// rounding as the coat dries.\nfunction field(S, list, t) {\n  const G = S.G;\n  G.fill(9);\n  const narrow = 1 - 0.5 * S.craze;\n  for (const c of list) {\n    const age = t - c.t;\n    if (age \u003c= 0) continue;\n    const reach = min(c.len, age * VTIP), open = 1 - exp(-age / TAU), run = reach \u003c c.len;\n    const hw = 0.42 + (c.w * narrow - 0.42) * open, k = (0.5 + 2.3 * open) * narrow, { idx, d, u } = c;\n    for (let e = 0; e \u003c idx.length; e++) {\n      const over = u[e] - reach;\n      if (over > REACH) continue;\n      const dd = over > 0 ? sqrt(d[e] * d[e] + over * over) : d[e];\n      // A running tip is sharp.\n      const tip = run ? min(1, 0.35 + max(0, -over) / 5) : 1;\n      G[idx[e]] = smin(G[idx[e]], dd - hw * tip, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const t = S.t, h = S.hue + H0, hh = h - floor(h), cz = S.coat;\n  // While the brush is on its way down, the old crackle shows below it.\n  const laying = t \u003c LAY && S.old, front = -6 + ((H + 12) * t) / LAY;\n  field(S, laying ? S.old : S.cracks, laying ? 1e9 : t);\n  const G = S.G, { base, ink, a, b } = S;\n  // Orange and yellow bases go brown at the dim edge of a gap: paled a\n  // little and lit to full.\n  const warm = cl(1.5 - abs(hh - 0.13) / 0.07, 0, 1);\n  hsv(h, 0.82 - 0.2 * warm, 0.9 + 0.1 * warm, base);\n  // The coat: black lacquer, a jewel tone opposite the base, pearl.\n  const hc = h + 0.5, wc = cl(1.5 - abs(hc - floor(hc) - 0.13) / 0.07, 0, 1);\n  if (cz \u003c 0.5) {\n    hsv(hc, 0.5, 0.05, a);\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, b);\n  } else {\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, a);\n    hsv(h + 0.04, 0.12, 0.9, b);\n  }\n  const f = sm(0, 1, cz \u003c 0.5 ? cz * 2 : cz * 2 - 1);\n  for (let c = 0; c \u003c 3; c++) ink[c] = a[c] + (b[c] - a[c]) * f;\n  const pearl = sm(0.5, 1, cz), dark = 1 - sm(0, 0.6, cz), cool = S.cool;\n  hsv(h + 0.55, 0.28, 0.72, cool);\n  // A strip light reflected in the gloss, sliding down the panel once a\n  // coat, starting as the brush leaves it.\n  const sheen = (((t - LAY) * 24 + 280) % 280) - 5;\n  // The fresh coat is wet: a stronger reflection, brush marks running down\n  // it and the base colour faintly through it, all gone a second after it is on.\n  const dry = laying ? 0 : exp(-(t - LAY) / 0.9);\n  // Above the brush's front the coat is fresh and whole.\n  const at = (x, y) => {\n    const v = G[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)];\n    return laying ? max(v, (front - y) * 3) : v;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = at(x, y);\n      const gx = min(at(x + 1, y), 3) - min(at(x - 1, y), 3), gy = min(at(x, y + 1), 3) - min(at(x, y - 1), 3);\n      const gl = sqrt(gx * gx + gy * gy) + 1e-6, face = -(gx * LX + gy * LY) / gl;\n      const band = exp(-(((x * 0.5 + y - sheen) / 13) ** 2));\n      // The base through the gaps, in the shade of the island on its lit side.\n      const shade = 1 - (0.45 - 0.3 * warm) * sm(-0.5, 0.8, at(x - 1, y - 2));\n      const bl = 0.3 * band;\n      let r = (base[0] + (1 - base[0]) * bl) * shade, g = (base[1] + (1 - base[1]) * bl) * shade, bb = (base[2] + (1 - base[2]) * bl) * shade;\n      // The island: how far inside its edge, as the height of a bead. Its\n      // cover falls off as a square root at the edge, so the base glows up\n      // through a hairline crack near full instead of as a dim line.\n      const cov = 1 - (1 - sm(-0.55, 0.55, v)) ** 0.5, hgt = cl(v / 2.5, 0, 1);\n      if (cov > 0) {\n        const edge = 1 - sm(0.15, 0.75, hgt), lit = max(0, face) * edge, away = max(0, -face) * edge;\n        // Dark coats: a white gloss on the lit rim and the strip light on\n        // the top.\n        const wet = laying ? 1 - sm(front - 2, front, y) : dry;\n        const brush = wet * S.brush[x] * (0.8 + 0.2 * sin(y * 0.09 + x));\n        const gloss = (dark * 0.75 + 0.35 * (1 - dark)) * lit * lit + (0.12 + 0.18 * dark + 0.3 * wet) * band * sm(0.3, 0.9, hgt) + brush;\n        const tint = 0.14 * wet * dark;\n        // Pearl shifts toward a cool interference tint on the rim turned away.\n        const dim = 1 - 0.3 * pearl * away - 0.08 * pearl * (1 - hgt), sh = 0.6 * pearl * away;\n        const ir = (ink[0] + (cool[0] - ink[0]) * sh) * dim + (1 - ink[0]) * gloss + base[0] * tint;\n        const ig = (ink[1] + (cool[1] - ink[1]) * sh) * dim + (1 - ink[1]) * gloss + base[1] * tint;\n        const ib = (ink[2] + (cool[2] - ink[2]) * sh) * dim + (1 - ink[2]) * gloss + base[2] * tint;\n        r += (ir - r) * cov;\n        g += (ig - g) * cov;\n        bb += (ib - bb) * cov;\n      }\n      if (laying) {\n        // The wet bead along the brush's edge.\n        const bead = 0.55 * exp(-(((y - front - 0.6 * sin(x * 0.4 + t * 3)) / 1.1) ** 2));\n        r += (1 - r) * bead;\n        g += (1 - g) * bead;\n        bb += (1 - bb) * bead;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, bb)));\n    }\n}\n","layer":{"id":"layer-crackle-polish","type":"code","name":"crackle-polish","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Crackle Polish\n// Family:  cosmetic\n// Idea:    A glossy colour fills the panel, a dark top coat is brushed over it from the top down, and as the coat dries it splits, first in long cracks across the panel and then in shorter and shorter cracks that each start on an older one at a right angle, while the gaps widen and the islands of coat shrink into rounded beads with a gloss on their edges and the colour glowing up through the network, until a fresh coat goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after crackle nail polish, a top coat that shrinks as it dries, and the hierarchical crack patterns that form by successive division of domains (Steffen Bohn, Ludovic Pauchard and Yves Couder, 2005)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Craze=0..1, Coat=0..1\n//\n// Knob 1: Hue. Turns the base colour round the whole wheel: at 0 hot pink, 0.1 red, 0.15 orange, 0.22 yellow, 0.3 lime, 0.4 green, 0.55 aqua, 0.65 azure, 0.75 blue, 0.85 violet, 0.95 magenta. Orange and yellow bases are paled a little, lit to full and shaded less beside the islands, so no gap turns brown.\n// Knob 2: Speed. At 2 the coat goes on in 1.2 s, the first crack opens 0.6 s later and runs across the panel in about a second, the last starts about 4.5 s after the first, and when the gaps have finished widening the crackle holds until a new coat goes on, about 11 s after the last. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Craze. How far the coat keeps splitting. At 0 a domain stops splitting once it is under about 20 LEDs long, which leaves about 50 islands, most of them 9 to 18 LEDs across; at 1 under about 11, about 155 islands of 5 to 10, and the gaps open half as wide.\n// Knob 4: Coat. The colour of the top coat: black lacquer at 0, a deep jewel tone opposite the base on the wheel at 0.5, a pale pearl at 1. On the dark coats the gloss is a white rim on the edges facing the light; on the pearl the edges turned away fall into a cool grey-lilac shade, as a pearl pigment shifts with the angle.\n// Buttons: K1 tap brushes a fresh coat on now.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n// The cycle, in seconds at Speed 2: the brush crosses the panel in LAY, the\n// first crack opens at T1 and the last near T2, and a new coat comes HOLD\n// after the last. The run opens at START, with the first crack running.\nconst LAY = 1.2, T1 = 1.8, T2 = 6, HOLD = 5, START = 2.4;\n// Crack tips run at VTIP LEDs a second; a gap opens with time constant TAU.\nconst VTIP = 70, TAU = 1.3;\n// Towards the light, x right and y down: up and to the left.\nconst LX = -0.6, LY = -0.8;\n// Opening hue: hot pink.\nconst H0 = 0.93;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The domains are worked out on a grid of half-LED cells: each cell holds\n// the domain it belongs to, or -1 on a crack.\nconst FW = 2 * W, FH = 2 * H;\n// A crack tip moves STEP LEDs at a time, and within BEND LEDs of an older\n// crack it turns to meet it square.\nconst STEP = 0.25, BEND = 3;\n// Gap pixels are listed out to REACH LEDs from a crack's line.\nconst REACH = 7;\n\n// The whole crackle of one coat, worked out when it goes on. The panel is\n// one domain. A domain splits across its long axis: a crack starts on its\n// rim, square to the older crack it leaves, and runs across until it turns\n// to meet the crack on the far side square. Each half splits the same way\n// until it is too short; bigger domains crack sooner.\nfunction crackle(craze) {\n  const stop = 20 - 9 * craze, span = log((W * H) / (0.45 * stop * stop));\n  const lab = new Int32Array(FW * FH), cracks = [];\n  const wall = (x, y) => {\n    const i = floor(2 * x), j = floor(2 * y);\n    return i \u003c 0 || j \u003c 0 || i >= FW || j >= FH || lab[j * FW + i] \u003c 0;\n  };\n  let ids = 1;\n  const todo = [{ id: 0, b: [0, 0, FW - 1, FH - 1], ready: 0 }];\n  while (todo.length) {\n    const d = todo.pop(), [i0, j0, i1, j1] = d.b;\n    let n = 0, sx = 0, sy = 0, sxx = 0, syy = 0, sxy = 0;\n    const nb = [FW, FH, 0, 0];\n    for (let j = j0; j \u003c= j1; j++)\n      for (let i = i0; i \u003c= i1; i++)\n        if (lab[j * FW + i] === d.id) {\n          const x = (i + 0.5) / 2, y = (j + 0.5) / 2;\n          n++;\n          sx += x;\n          sy += y;\n          sxx += x * x;\n          syy += y * y;\n          sxy += x * y;\n          nb[0] = min(nb[0], i);\n          nb[1] = min(nb[1], j);\n          nb[2] = max(nb[2], i);\n          nb[3] = max(nb[3], j);\n        }\n    if (n \u003c 8) continue;\n    const mx = sx / n, my = sy / n, vxx = sxx / n - mx * mx, vyy = syy / n - my * my, vxy = sxy / n - mx * my;\n    const ang = 0.5 * Math.atan2(2 * vxy, vxx - vyy);\n    // A bar of length L has variance L^2 / 12 along its axis.\n    const long = sqrt(12 * (vxx * cos(ang) ** 2 + 2 * vxy * cos(ang) * sin(ang) + vyy * sin(ang) ** 2));\n    // The cut is turned up to 20 degrees off square; its ends bend square anyway.\n    const tu = ang + (random() - 0.5) * 0.7, ux = cos(tu), uy = sin(tu);\n    if (long \u003c stop * (0.85 + 0.3 * random())) continue;\n    // Where the cut line, across the long axis near the middle, meets the rim.\n    const off = (random() - 0.5) * 0.36 * long, cx = mx + ux * off, cy = my + uy * off;\n    if (wall(cx, cy)) continue;\n    const ends = [-1, 1].map((sg) => {\n      let x = cx, y = cy;\n      while (!wall(x - sg * uy * STEP, y + sg * ux * STEP)) {\n        x -= sg * uy * STEP;\n        y += sg * ux * STEP;\n      }\n      return [x, y, sg];\n    });\n    const [sx0, sy0, sg] = ends[random() \u003c 0.5 ? 0 : 1];\n    // Heading: across, toward the other end; it starts square off its rim.\n    const hx = sg * uy, hy = -sg * ux;\n    let x = sx0, y = sy0, dx = hx, dy = hy, run = 0, ok = false;\n    const pts = [[x, y]], cells = [];\n    for (let k = 0; k \u003c (4 * long) / STEP; k++) {\n      // The nearest older crack (or the panel's edge) within BEND, and the\n      // way square off it, from all its cells nearby.\n      let best = BEND * BEND, gx = 0, gy = 0;\n      const ci = floor(2 * x), cj = floor(2 * y), r = 2 * BEND;\n      for (let j = cj - r; j \u003c= cj + r; j++)\n        for (let i = ci - r; i \u003c= ci + r; i++) {\n          if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] >= 0) continue;\n          const ex = x - (cl(i, -1, FW) + 0.5) / 2, ey = y - (cl(j, -1, FH) + 0.5) / 2, e2 = ex * ex + ey * ey;\n          best = min(best, e2);\n          if (e2 \u003c 4) {\n            const wt = exp(-e2);\n            gx += ex * wt;\n            gy += ey * wt;\n          }\n        }\n      const dist = sqrt(best), gl = sqrt(gx * gx + gy * gy);\n      let calm = 1;\n      if (best \u003c BEND * BEND && gl > 0) {\n        gx /= gl;\n        gy /= gl;\n        // Leaving its own rim: square off it. Coming up on another: turn square into it.\n        const into = run \u003c 1.2 ? -0.5 : dx * gx + dy * gy \u003c 0 ? 0.6 * (1 - dist / BEND) : 0;\n        if (into) {\n          dx -= into * gx;\n          dy -= into * gy;\n          calm = dist / BEND;\n        }\n      }\n      const tw = (random() - 0.5) * 0.22 * calm;\n      dx += 0.05 * hx * calm - tw * dy;\n      dy += 0.05 * hy * calm + tw * dx;\n      const dl = sqrt(dx * dx + dy * dy);\n      dx /= dl;\n      dy /= dl;\n      x += dx * STEP;\n      y += dy * STEP;\n      run += STEP;\n      const ci2 = floor(2 * x), cj2 = floor(2 * y), last = cells[cells.length - 1];\n      // Cells of the crack, joined edge to edge so nothing leaks past it.\n      if (last && last[0] !== ci2 && last[1] !== cj2) cells.push([ci2, last[1]]);\n      if (!last || last[0] !== ci2 || last[1] !== cj2) cells.push([ci2, cj2]);\n      if (wall(x, y)) {\n        pts.push([x, y]);\n        ok = run > 2;\n        break;\n      }\n      if (k % 4 === 3) pts.push([x, y]);\n    }\n    if (!ok) continue;\n    for (const [i, j] of cells) if (i >= 0 && j >= 0 && i \u003c FW && j \u003c FH && lab[j * FW + i] === d.id) lab[j * FW + i] = -1;\n    // Fill one side with a new domain.\n    const m = pts[pts.length >> 1], q = pts[(pts.length >> 1) + 1] || pts[pts.length - 1];\n    const tx = q[0] - m[0], ty = q[1] - m[1], tl = Math.hypot(tx, ty) || 1;\n    const si = floor(2 * (m[0] - (ty / tl) * 0.8)), sj = floor(2 * (m[1] + (tx / tl) * 0.8));\n    if (si \u003c 0 || sj \u003c 0 || si >= FW || sj >= FH || lab[sj * FW + si] !== d.id) continue;\n    const nid = ids++, stack = [sj * FW + si];\n    lab[sj * FW + si] = nid;\n    while (stack.length) {\n      const c = stack.pop(), i = c % FW, j = (c - i) / FW;\n      for (const e of [i > 0 ? c - 1 : -1, i \u003c FW - 1 ? c + 1 : -1, j > 0 ? c - FW : -1, j \u003c FH - 1 ? c + FW : -1])\n        if (e >= 0 && lab[e] === d.id) {\n          lab[e] = nid;\n          stack.push(e);\n        }\n    }\n    let len = 0;\n    for (let k = 1; k \u003c pts.length; k++) len += Math.hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n    const age = cl(log((W * H) / (n / 4)) / span, 0, 1), t = max(d.ready + 0.06, T1 + (T2 - T1) * age);\n    // Final half-width: the first cracks open widest.\n    cracks.push({ pts, len, t, w: 1.5 - 0.85 * age });\n    const ready = t + len / VTIP;\n    todo.push({ id: d.id, b: nb, ready }, { id: nid, b: nb, ready });\n  }\n  return gapLists(cracks);\n}\n\n// For each crack, every pixel within REACH of its line: how far from it,\n// and how far along the crack the nearest point lies.\nfunction gapLists(cracks) {\n  const dist = new Float32Array(N), along = new Float32Array(N), seen = new Int32Array(N).fill(-1);\n  cracks.forEach((c, ci) => {\n    const idx = [];\n    let u0 = 0;\n    for (let k = 1; k \u003c c.pts.length; k++) {\n      const [ax, ay] = c.pts[k - 1], [bx, by] = c.pts[k], ex = bx - ax, ey = by - ay, el = sqrt(ex * ex + ey * ey) || 1e-6;\n      for (let y = max(0, floor(min(ay, by) - REACH)); y \u003c= min(H - 1, floor(max(ay, by) + REACH)); y++)\n        for (let x = max(0, floor(min(ax, bx) - REACH)); x \u003c= min(W - 1, floor(max(ax, bx) + REACH)); x++) {\n          const px = x + 0.5 - ax, py = y + 0.5 - ay, f = cl((px * ex + py * ey) / (el * el), 0, 1);\n          const qx = px - f * ex, qy = py - f * ey, dd = sqrt(qx * qx + qy * qy), p = y * W + x;\n          if (dd > REACH) continue;\n          if (seen[p] !== ci) {\n            seen[p] = ci;\n            idx.push(p);\n            dist[p] = 1e9;\n          }\n          if (dd \u003c dist[p]) {\n            dist[p] = dd;\n            along[p] = u0 + f * el;\n          }\n        }\n      u0 += el;\n    }\n    c.idx = Int32Array.from(idx);\n    c.d = Float32Array.from(idx, (p) => dist[p]);\n    c.u = Float32Array.from(idx, (p) => along[p]);\n    c.pts = null;\n  });\n  return cracks;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, craze: 0, coat: 0.06, begun: false, t: START, end: 0, cracks: [], old: null, brush: new Float32Array(W),\n    G: new Float32Array(N),\n    base: [0, 0, 0], ink: [0, 0, 0], a: [0, 0, 0], b: [0, 0, 0], cool: [0, 0, 0],\n  };\n}\n\nfunction newCoat(S, t0) {\n  S.old = S.cracks;\n  // The brush's bristles: a mark per column, softened.\n  let m = random();\n  for (let x = 0; x \u003c W; x++) S.brush[x] = 0.07 * (m = 0.55 * m + 0.45 * random());\n  S.cracks = crackle(S.craze);\n  let last = 0;\n  for (const c of S.cracks) last = max(last, c.t);\n  S.end = last + HOLD;\n  S.t = t0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.craze = cl(k[2], 0, 1);\n  S.coat = cl(k[3], 0, 1);\n  if (!S.begun) {\n    newCoat(S, START);\n    S.old = null;\n    S.begun = true;\n  }\n  S.t += (cl(dt || 0, 0, 0.1) * S.speed) / 2;\n  if (S.t > S.end || (input.btnPressed && input.btnPressed[0])) newCoat(S, 0);\n}\n\n// Polynomial smooth minimum: where two gaps come within k of each other\n// they merge in a fillet, which rounds the island's corner between them.\nfunction smin(a, b, k) {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n}\n\n// G: signed distance to the open gaps, in LEDs, positive on the coat. Each\n// crack is a gap round its line as far as its tip, its half-width growing\n// from a hairline as it opens, and the corners it makes with older cracks\n// rounding as the coat dries.\nfunction field(S, list, t) {\n  const G = S.G;\n  G.fill(9);\n  const narrow = 1 - 0.5 * S.craze;\n  for (const c of list) {\n    const age = t - c.t;\n    if (age \u003c= 0) continue;\n    const reach = min(c.len, age * VTIP), open = 1 - exp(-age / TAU), run = reach \u003c c.len;\n    const hw = 0.42 + (c.w * narrow - 0.42) * open, k = (0.5 + 2.3 * open) * narrow, { idx, d, u } = c;\n    for (let e = 0; e \u003c idx.length; e++) {\n      const over = u[e] - reach;\n      if (over > REACH) continue;\n      const dd = over > 0 ? sqrt(d[e] * d[e] + over * over) : d[e];\n      // A running tip is sharp.\n      const tip = run ? min(1, 0.35 + max(0, -over) / 5) : 1;\n      G[idx[e]] = smin(G[idx[e]], dd - hw * tip, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const t = S.t, h = S.hue + H0, hh = h - floor(h), cz = S.coat;\n  // While the brush is on its way down, the old crackle shows below it.\n  const laying = t \u003c LAY && S.old, front = -6 + ((H + 12) * t) / LAY;\n  field(S, laying ? S.old : S.cracks, laying ? 1e9 : t);\n  const G = S.G, { base, ink, a, b } = S;\n  // Orange and yellow bases go brown at the dim edge of a gap: paled a\n  // little and lit to full.\n  const warm = cl(1.5 - abs(hh - 0.13) / 0.07, 0, 1);\n  hsv(h, 0.82 - 0.2 * warm, 0.9 + 0.1 * warm, base);\n  // The coat: black lacquer, a jewel tone opposite the base, pearl.\n  const hc = h + 0.5, wc = cl(1.5 - abs(hc - floor(hc) - 0.13) / 0.07, 0, 1);\n  if (cz \u003c 0.5) {\n    hsv(hc, 0.5, 0.05, a);\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, b);\n  } else {\n    hsv(hc, 0.72 - 0.2 * wc, 0.5 + 0.3 * wc, a);\n    hsv(h + 0.04, 0.12, 0.9, b);\n  }\n  const f = sm(0, 1, cz \u003c 0.5 ? cz * 2 : cz * 2 - 1);\n  for (let c = 0; c \u003c 3; c++) ink[c] = a[c] + (b[c] - a[c]) * f;\n  const pearl = sm(0.5, 1, cz), dark = 1 - sm(0, 0.6, cz), cool = S.cool;\n  hsv(h + 0.55, 0.28, 0.72, cool);\n  // A strip light reflected in the gloss, sliding down the panel once a\n  // coat, starting as the brush leaves it.\n  const sheen = (((t - LAY) * 24 + 280) % 280) - 5;\n  // The fresh coat is wet: a stronger reflection, brush marks running down\n  // it and the base colour faintly through it, all gone a second after it is on.\n  const dry = laying ? 0 : exp(-(t - LAY) / 0.9);\n  // Above the brush's front the coat is fresh and whole.\n  const at = (x, y) => {\n    const v = G[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)];\n    return laying ? max(v, (front - y) * 3) : v;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = at(x, y);\n      const gx = min(at(x + 1, y), 3) - min(at(x - 1, y), 3), gy = min(at(x, y + 1), 3) - min(at(x, y - 1), 3);\n      const gl = sqrt(gx * gx + gy * gy) + 1e-6, face = -(gx * LX + gy * LY) / gl;\n      const band = exp(-(((x * 0.5 + y - sheen) / 13) ** 2));\n      // The base through the gaps, in the shade of the island on its lit side.\n      const shade = 1 - (0.45 - 0.3 * warm) * sm(-0.5, 0.8, at(x - 1, y - 2));\n      const bl = 0.3 * band;\n      let r = (base[0] + (1 - base[0]) * bl) * shade, g = (base[1] + (1 - base[1]) * bl) * shade, bb = (base[2] + (1 - base[2]) * bl) * shade;\n      // The island: how far inside its edge, as the height of a bead. Its\n      // cover falls off as a square root at the edge, so the base glows up\n      // through a hairline crack near full instead of as a dim line.\n      const cov = 1 - (1 - sm(-0.55, 0.55, v)) ** 0.5, hgt = cl(v / 2.5, 0, 1);\n      if (cov > 0) {\n        const edge = 1 - sm(0.15, 0.75, hgt), lit = max(0, face) * edge, away = max(0, -face) * edge;\n        // Dark coats: a white gloss on the lit rim and the strip light on\n        // the top.\n        const wet = laying ? 1 - sm(front - 2, front, y) : dry;\n        const brush = wet * S.brush[x] * (0.8 + 0.2 * sin(y * 0.09 + x));\n        const gloss = (dark * 0.75 + 0.35 * (1 - dark)) * lit * lit + (0.12 + 0.18 * dark + 0.3 * wet) * band * sm(0.3, 0.9, hgt) + brush;\n        const tint = 0.14 * wet * dark;\n        // Pearl shifts toward a cool interference tint on the rim turned away.\n        const dim = 1 - 0.3 * pearl * away - 0.08 * pearl * (1 - hgt), sh = 0.6 * pearl * away;\n        const ir = (ink[0] + (cool[0] - ink[0]) * sh) * dim + (1 - ink[0]) * gloss + base[0] * tint;\n        const ig = (ink[1] + (cool[1] - ink[1]) * sh) * dim + (1 - ink[1]) * gloss + base[1] * tint;\n        const ib = (ink[2] + (cool[2] - ink[2]) * sh) * dim + (1 - ink[2]) * gloss + base[2] * tint;\n        r += (ir - r) * cov;\n        g += (ig - g) * cov;\n        bb += (ib - bb) * cov;\n      }\n      if (laying) {\n        // The wet bead along the brush's edge.\n        const bead = 0.55 * exp(-(((y - front - 0.6 * sin(x * 0.4 + t * 3)) / 1.1) ** 2));\n        r += (1 - r) * bead;\n        g += (1 - g) * bead;\n        bb += (1 - bb) * bead;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, bb)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Craze=0..1, Coat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the base colour round the whole wheel: at 0 hot pink, 0.1 red, 0.15 orange, 0.22 yellow, 0.3 lime, 0.4 green, 0.55 aqua, 0.65 azure, 0.75 blue, 0.85 violet, 0.95 magenta. Orange and yellow bases are paled a little, lit to full and shaded less beside the islands, so no gap turns brown."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the coat goes on in 1.2 s, the first crack opens 0.6 s later and runs across the panel in about a second, the last starts about 4.5 s after the first, and when the gaps have finished widening the crackle holds until a new coat goes on, about 11 s after the last. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Craze","min":0,"max":1,"about":"How far the coat keeps splitting. At 0 a domain stops splitting once it is under about 20 LEDs long, which leaves about 50 islands, most of them 9 to 18 LEDs across; at 1 under about 11, about 155 islands of 5 to 10, and the gaps open half as wide."},{"name":"Coat","min":0,"max":1,"about":"The colour of the top coat: black lacquer at 0, a deep jewel tone opposite the base on the wheel at 0.5, a pale pearl at 1. On the dark coats the gloss is a white rim on the edges facing the light; on the pearl the edges turned away fall into a cool grey-lilac shade, as a pearl pigment shifts with the angle."}],"start":[0,2,0,0.06],"measures":{"motion":0.0606,"detail":0.0894,"edges":0.5269,"complexity":1.379,"coverage":0.5043,"colour":0.2853,"drift":0.1556},"knobResponse":[0.1036,0.1543,0.0671,0.6128]},{"slug":"cream-swirl","title":"Cream Swirl","family":"cosmetic","round":29,"note":"보이지 않는 팔레트 나이프가 크림을 S자와 소용돌이로 펴 바르며 매끈한 띠와 윤기 나는 둔덕을 남기고, 떨어진 색 크림 덩이를 길쭉한 리본으로 끌고 가요. 부드러운 빛이 7초에 한 번 좌우로 오가며 결 위로 윤이 미끄러져요. K3 을 올리면 섞이는 색조가 셋까지 늘고, 누르면 가장 진한 색 덩이가 칼 앞에 떨어져요.","idea":"An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.","buttons":"K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.","code":"// ===== Patternflow pattern =====\n// Title:   Cream Swirl\n// Family:  cosmetic\n// Idea:    An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the swatch of face cream spread with a spatula in a macro product film\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1\n//\n// Knob 1: Hue. Turns the cream and its tints round the whole colour wheel together, opening on rose.\n// Knob 2: Speed. How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges.\n// Knob 3: Tones. How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path.\n// Knob 4: Gloss. At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight.\n// Buttons: K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The knife's edge is cut into NB bins. Each bin carries the cream it has\n// scraped up and that cream's tint, so a dollop picked up at one end of the\n// blade is laid down as a ribbon behind that end, not across the whole band.\nconst NB = 16;\n// Path points are half an LED apart.\nconst STEP = 0.5, PMAX = 1200;\n// How fast a bin's tint turns to the cream it scrapes, per unit of height\n// scraped; how much of the band's skin is the cream the blade carries; what\n// share of each bin's load slides on to the next bin along the angled blade\n// for each LED travelled.\nconst PICK = 0.3, FILM = 0.45, SLIP = 1.05;\n// The share of the dragged skin left behind for each LED travelled.\nconst DRAG = 0.03;\n// The ridge the spill builds stands at RS height per LED on its flanks, and\n// is never taller than RMAX.\nconst RS = 0.4, RMAX = 3.6;\n// How deep the roll of cream in front of the blade is, in LEDs.\nconst ROLL = 6;\n// How deep the visible skin is: scraping this much off shows the bed.\nconst SKIN = 0.8;\n// The opening hue: rose, not red.\nconst H0 = 0.93;\n\n// A soft light low over the top left, its height LZ and where it sits round\n// the panel, LA radians; it glides LS either way of that and back over SWING\n// seconds at Speed 2, so the sheen slides along the ridges between strokes.\nconst LZ = 0.5, LA = -2.34, LS = 0.9, SWING = 7;\n// How tall the height field looks: a slope of 1 tilts the surface 56 degrees.\nconst KZ = 1.8;\n// The light is a big soft box: it wraps a little way round the cream, so a\n// slope turned from it shades off gently instead of dropping into shadow.\nconst WRAP = 0.3;\n// How much a fold darkens and a crest brightens, per unit of height.\nconst CAV = 0.5;\n// Cream the knife has just laid down holds a wet film that lifts it by this\n// much, fading as it dulls.\nconst GLINT = 26;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The tint concentrations a dollop can come in, for one, two and three tints.\nconst DOSE = [[0.55], [0.4, 0.88], [0.3, 0.62, 1]];\n// Where the colour ramp steps between tints, so folded cream shows distinct\n// bands rather than one blurred pink: thresholds and the level each band shows.\nconst STEPS = [\n  [[0.22], [0, 0.55]],\n  [[0.18, 0.6], [0, 0.42, 0.88]],\n  [[0.14, 0.44, 0.78], [0, 0.3, 0.62, 1]],\n];\nfunction band(c, n) {\n  const [th, lv] = STEPS[n];\n  let v = lv[0];\n  for (let i = 0; i \u003c th.length; i++) v += (lv[i + 1] - lv[i]) * sm((c - th[i]) / 0.1 + 0.5);\n  return v;\n}\n\nexport function setup(params) {\n  params.s = {\n    // Height, the tint of the skin, the tint of the bed under it.\n    hf: new Float32Array(N), tn: new Float32Array(N), ut: new Float32Array(N),\n    dh: new Float32Array(N), dt: new Float32Array(N), bl: new Float32Array(N), av: new Float32Array(N),\n    stamp: new Int32Array(N).fill(-999), sub: 0, fr: new Float32Array(N),\n    path: new Float32Array(PMAX * 2), plen: 0, pos: 0, type: 0, done: 0,\n    m: new Float32Array(NB), c: new Float32Array(NB), ft: new Float32Array(NB), fm: new Float32Array(NB), bm: 0, bc: 0,\n    L: 24, ca: 1, sa: 0, B: 0, tilt: 0, gPh: 0, cc: 0, cA: 0, cP: 8, cB: 0, slip: 1, rh: 0,\n    sp: new Float32Array(8), pause: 0, live: false, force: 1, lt: 0,\n    dol: [], hue: 0, tones: 1, gloss: 0.06, ready: false,\n    lut: new Float32Array(64 * 3), lus: new Float32Array(64 * 3),\n    kx: 0, ky: 0, dx: 0, dy: 1, tx: 1, ty: 0,\n  };\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\n// A round dollop: a soft mound of tint c with a peak where it left the spoon. It is all skin, so a knife that\n// scrapes it away finds the cream it was dropped on.\n// Its colour goes on with the first of it, as deep as the whole dollop will\n// be thick: its thin rim only half covers what it landed on, so a knife that\n// scrapes it off leaves no ring.\nfunction dollop(P, x0, y0, r, ht, c, f, first) {\n  const x1 = max(0, floor(x0 - r)), x2 = min(W - 1, floor(x0 + r) + 1);\n  const y1 = max(0, floor(y0 - r)), y2 = min(H - 1, floor(y0 + r) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const d = ((x - x0) ** 2 + (y - y0) ** 2) / (r * r);\n      if (d >= 1) continue;\n      const p = y * W + x, a = ht * (1 - sqrt(d)) * (1 - d * 0.5);\n      P.hf[p] += a * f;\n      if (first) P.tn[p] += (c - P.tn[p]) * min(1, a / 1.2);\n    }\n}\n\n// The stroke's path as a function of u from 0 to 1, from the parameters\n// startStroke puts in P.sp.\nfunction pathAt(P, u, o) {\n  const s = P.sp;\n  if (P.type === 0) {\n    // An S down (or up) the panel.\n    o[0] = s[0] + s[1] * sin(2 * PI * s[2] * u + s[3]);\n    o[1] = s[4] + (s[5] - s[4]) * u;\n  } else if (P.type === 1) {\n    // A spiral in to a point: the swirl on top of a jar.\n    const a = s[3] + s[4] * u * 2 * PI, r = s[5] + (s[6] - s[5]) * (1 - (1 - u) * (1 - u));\n    o[0] = s[0] + r * cos(a);\n    o[1] = s[1] + r * sin(a) * 1.15;\n  } else {\n    // A bowed smear from off one side to the middle, or right across.\n    const v = 1 - u, mx = (s[0] + s[2]) / 2 + s[4], my = (s[1] + s[3]) / 2 + s[5];\n    o[0] = v * v * s[0] + 2 * v * u * mx + u * u * s[2];\n    o[1] = v * v * s[1] + 2 * v * u * my + u * u * s[3];\n  }\n}\n\nconst TMP = [0, 0];\nfunction startStroke(P, k3) {\n  const s = P.sp, r = rnd(), hf = P.hf;\n  // Heights only matter against each other: keep the cream's mean level at\n  // 0, and cut every band below it, so each stroke has cream to push.\n  let mean = 0;\n  for (let p = 0; p \u003c N; p++) mean += hf[p];\n  mean /= N;\n  for (let p = 0; p \u003c N; p++) hf[p] -= mean;\n  P.type = r \u003c 0.5 ? 0 : r \u003c 0.8 ? 1 : 2;\n  if (P.type === 0) {\n    const down = rnd() \u003c 0.5;\n    s[0] = 22 + rnd() * 20;\n    s[1] = 10 + rnd() * 10;\n    s[2] = 0.6 + rnd() * 0.5;\n    s[3] = rnd() * 2 * PI;\n    s[4] = down ? -14 : H + 14;\n    s[5] = down ? H + 14 : -14;\n    P.L = 34 + rnd() * 10;\n    P.B = -0.9 + rnd() * 0.5;\n  } else if (P.type === 1) {\n    s[0] = 26 + rnd() * 12;\n    s[1] = 36 + rnd() * 56;\n    s[3] = rnd() * 2 * PI;\n    s[4] = (rnd() \u003c 0.5 ? -1 : 1) * (1.3 + rnd() * 0.5);\n    s[5] = 25 + rnd() * 6;\n    s[6] = 3;\n    P.L = 18 + rnd() * 5;\n    P.B = -0.6 + rnd() * 0.4;\n  } else {\n    const across = rnd() \u003c 0.4, side = rnd() \u003c 0.5 ? -1 : 1;\n    if (across) {\n      s[0] = side \u003c 0 ? -14 : W + 14;\n      s[2] = side \u003c 0 ? W + 14 : -14;\n      s[1] = 14 + rnd() * 100;\n      s[3] = cl(s[1] + (rnd() - 0.5) * 40, 10, H - 10);\n    } else {\n      s[0] = 32 + side * (34 + rnd() * 6);\n      s[1] = 10 + rnd() * 108;\n      s[2] = 32 - side * (rnd() * 10);\n      s[3] = cl(s[1] + (rnd() - 0.5) * 70, 18, H - 18);\n    }\n    s[4] = 0;\n    s[5] = (rnd() - 0.5) * 36;\n    P.L = 28 + rnd() * 8;\n    P.B = -0.8 + rnd() * 0.5;\n  }\n  // Lay the path down half an LED a point.\n  const path = P.path;\n  pathAt(P, 0, TMP);\n  let px = TMP[0], py = TMP[1], n = 1;\n  path[0] = px;\n  path[1] = py;\n  for (let i = 1; i \u003c= 4000 && n \u003c PMAX; i++) {\n    pathAt(P, i / 4000, TMP);\n    const d = sqrt((TMP[0] - px) ** 2 + (TMP[1] - py) ** 2);\n    if (d >= STEP) {\n      px += ((TMP[0] - px) * STEP) / d;\n      py += ((TMP[1] - py) * STEP) / d;\n      path[n * 2] = px;\n      path[n * 2 + 1] = py;\n      n++;\n    }\n  }\n  P.plen = (n - 1) * STEP;\n  P.pos = 0;\n  // The blade sits at an angle to its track, tilted a little and bowed, so\n  // the band is a shallow trough, and it chatters as it goes, leaving soft\n  // folds across the band. A slow knife glides and cuts shallow; a fast one\n  // chatters harder and digs deeper, so it throws a taller ridge.\n  const al = (rnd() - 0.5) * 0.6;\n  P.ca = cos(al);\n  P.sa = sin(al);\n  P.tilt = (rnd() - 0.5) * 0.6;\n  P.cc = 0.2 + rnd() * 0.4;\n  P.cA = (0.13 + rnd() * 0.1) * (0.35 + 0.65 * P.force);\n  P.B -= 0.35 * (P.force - 1);\n  P.cP = 11 + rnd() * 5;\n  P.cB = (rnd() \u003c 0.5 ? -1 : 1) * (3 + rnd() * 4);\n  P.gPh = rnd() * 2 * PI;\n  P.slip = rnd() \u003c 0.5 ? -1 : 1;\n  if (P.type === 1) {\n    // A swirl throws its cream outwards.\n    locate(P, 6);\n    P.slip = P.tx * (P.kx - s[0]) + P.ty * (P.ky - s[1]) > 0 ? 1 : -1;\n  }\n  P.m.fill(0);\n  P.c.fill(0);\n  P.ft.fill(0);\n  P.fm.fill(0);\n  P.rh = 0;\n  P.live = true;\n  // Every stroke goes through fresh dollops dropped a little way along: one\n  // for one tint, two or three when three tints are folded in.\n  const nd = k3 === 1 ? 1 : k3 === 2 ? (rnd() \u003c 0.5 ? 2 : 1) : rnd() \u003c 0.4 ? 3 : 2;\n  for (let i = 0; i \u003c nd; i++) plan(P, 0.1 + rnd() * 0.45, rnd() \u003c 0.4 ? 0 : DOSE[k3 - 1][floor(rnd() * k3)], (10 + rnd() * 3) / sqrt(nd));\n}\n\n// A dollop waiting to fall at a point on the path ahead of the knife.\nfunction plan(P, u, c, r) {\n  if (P.dol.length > 3) return;\n  const i = floor((P.pos + (P.plen - P.pos) * u) / STEP);\n  const x = P.path[i * 2], y = P.path[i * 2 + 1];\n  P.dol.push({ x: cl(x + (rnd() - 0.5) * 6, 6, W - 7), y: cl(y + (rnd() - 0.5) * 6, 8, H - 9), r, h: 2.6 + rnd() * 0.6, c, f: 0 });\n}\n\n// The knife's point, its direction of travel and the blade's direction.\nfunction locate(P, pos) {\n  const path = P.path, last = floor(P.plen / STEP);\n  const i = cl(floor(pos / STEP), 0, last - 1), f = cl(pos / STEP - i, 0, 1);\n  P.kx = path[i * 2] + (path[i * 2 + 2] - path[i * 2]) * f;\n  P.ky = path[i * 2 + 1] + (path[i * 2 + 3] - path[i * 2 + 1]) * f;\n  const a = max(0, i - 3), b = min(last, i + 4);\n  let dx = path[b * 2] - path[a * 2], dy = path[b * 2 + 1] - path[a * 2 + 1];\n  const d = sqrt(dx * dx + dy * dy) || 1;\n  dx /= d;\n  dy /= d;\n  P.dx = dx;\n  P.dy = dy;\n  P.tx = -dy * P.ca - dx * P.sa;\n  P.ty = dx * P.ca - dy * P.sa;\n}\n\n// The load of the blade at a point a along it and the tint it drags there,\n// read between the bins so what it lays down has no seams.\nfunction load(P, a) {\n  const fb = cl(((a + P.L / 2) / P.L) * NB - 0.5, 0, NB - 1), j = min(NB - 2, floor(fb)), f = fb - j;\n  P.bm = P.m[j] + (P.m[j + 1] - P.m[j]) * f;\n  P.bc = P.ft[j] + (P.ft[j + 1] - P.ft[j]) * f;\n}\n\n// The ridge across its width r (0 at the band's edge, 1 at its foot): a\n// steep inner face where the blade cut it, a long outer slope.\nconst ridge = (r) => (r \u003c 0.3 ? sm(r / 0.3) : 1 - sm((r - 0.3) / 0.7));\n\n// One move of the knife by ds LEDs. Each LED is worked once a pass, as the\n// back of the blade leaves it: what stood above the blade goes into the\n// bin over it, and the band, the ridge beside it and their tints are laid\n// down.\nfunction knife(P, ds) {\n  P.pos += ds;\n  P.sub++;\n  if (P.pos >= P.plen) return lift(P);\n  locate(P, P.pos);\n  const { hf, tn, ut, m, c, ft, fm, stamp, L } = P, hl = L / 2, sl = P.slip;\n  for (let j = 0; j \u003c NB; j++) fm[j] *= 1 - DRAG * ds;\n  const kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  // Pressure comes on over the first 8 LEDs and goes off over the last 6.\n  const pr = sm(P.pos / 8) * sm((P.plen - P.pos) / 6);\n  const rw = max(3, (2 * P.rh) / RS), end = sl > 0 ? NB - 1 : 0, lvEnd = P.B + P.tilt * sl + P.cc;\n  const rx = abs(tx) * (hl + rw) + 3, ry = abs(ty) * (hl + rw) + 3;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, s = (tx * oy - ty * ox) / det;\n      // On a curve the LEDs on the outside move further than ds, so the\n      // strip is wider than a step and the stamp keeps it to once a pass.\n      if (s \u003c -3 - ds || s >= -0.3) continue;\n      const a = (ox * dy - oy * dx) / det, as = a * sl, p = y * W + x;\n      if (as \u003c= -hl - 1.5 || as >= hl + rw || P.sub - stamp[p] \u003c 40) continue;\n      stamp[p] = P.sub;\n      const ho = hf[p], to = tn[p];\n      if (as \u003c hl && as > -hl) {\n        // The chatter marks bow back towards the blade's ends, as a flexible\n        // blade leaves them, and come and go along it.\n        const u = a / hl, w = (2 * PI * (P.pos + P.cB * u * u)) / P.cP;\n        const lv = P.B + P.tilt * u + P.cc * u * u + P.cA * (0.65 + 0.35 * sin(a * 0.31 + P.gPh)) * (sin(w) + 0.5 * sin(w * 1.63 + 1.3)), e = ho - lv;\n        const j = cl(floor(((a + hl) / L) * NB), 0, NB - 1);\n        if (e > 0) {\n          m[j] += e * pr;\n          c[j] += (to - c[j]) * min(1, e * PICK * pr);\n          // The skin of tint the blade drags stays in its own lane and is\n          // mixed by how much of each colour it gathered, so a dollop\n          // becomes a long ribbon that pales as white cream dilutes it.\n          fm[j] += e * pr;\n          ft[j] += ((to - ft[j]) * e * pr) / fm[j];\n        }\n        // Under what was scraped off lies the bed; over it the blade leaves a\n        // film of the cream it carries.\n        const ex = e > 0 ? to + (ut[p] - to) * min(1, e / SKIN) : to;\n        load(P, a);\n        const tw = ex + (P.bc - ex) * FILM * min(1, P.bm);\n        hf[p] = ho + (lv - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (tw - to) * pr;\n        ut[p] += (tw - ut[p]) * pr * 0.4;\n      } else {\n        // Beside the band: the ridge on the spill side, a thin lip of\n        // squeezed cream on the other.\n        const hr = as > 0 ? lvEnd + P.rh * ridge((as - hl) / rw) : P.B - P.tilt * sl + 0.2 * P.rh * ridge((-as - hl) / 1.5);\n        if (hr \u003c= ho) continue;\n        const k = pr * min(1, (hr - ho) / SKIN), ce = as > 0 ? c[end] : to;\n        hf[p] = ho + (hr - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (ce - to) * k;\n        ut[p] += (ce - ut[p]) * k;\n      }\n    }\n  // The load slides along the angled blade and spills off its end, and the\n  // ridge stands as tall as the cream spilling into it.\n  const f = min(0.9, SLIP * ds);\n  for (let k = 1; k \u003c NB; k++) {\n    const j = sl > 0 ? NB - 1 - k : k, to = j + sl, a = m[j] * f;\n    if (a \u003c= 0) continue;\n    c[to] = (c[to] * m[to] + c[j] * a) / (m[to] + a);\n    m[to] += a;\n    m[j] -= a;\n  }\n  const spill = m[end] * f;\n  m[end] -= spill;\n  const target = min(RMAX, sqrt(0.75 * (spill / ds) * RS));\n  P.rh += (target - P.rh) * min(1, ds * 0.25);\n}\n\n// The knife lifts: what it still carries stays where it stopped, a raised\n// lip across the end of the band.\nfunction lift(P) {\n  locate(P, P.plen);\n  roll(P, P.hf, P.tn, P.ut);\n  P.live = false;\n  P.done++;\n  P.pause = 0.15 + rnd() * 0.2;\n}\n\n// The cream on the blade's face as a rounded roll in front of it, laid into\n// (h, t): for the picture while the knife moves, for good when it lifts.\nfunction roll(P, h, t, u) {\n  const hl = P.L / 2, kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  const rx = abs(tx) * hl + ROLL + 2, ry = abs(ty) * hl + ROLL + 2;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, a = (ox * dy - oy * dx) / det, s = (tx * oy - ty * ox) / det;\n      if (s \u003c= -0.3 || s >= ROLL || a \u003c= -hl || a >= hl) continue;\n      load(P, a);\n      // A bin's load spread as a mound ROLL deep, rounded off at the blade's\n      // ends: as tall as that much cream stands, and never a wall.\n      const ht = min(2.4, sqrt((P.bm * NB) / P.L) * 0.7) * sin((PI * (s + 0.3)) / (ROLL + 0.3)) * sqrt(sin((PI * (a + hl)) / P.L));\n      const p = y * W + x;\n      if (P.B + ht \u003c= h[p]) continue;\n      const k = min(1, (P.B + ht - h[p]) / SKIN);\n      h[p] = P.B + ht;\n      t[p] += (P.bc - t[p]) * k;\n      if (u) u[p] += (P.bc - u[p]) * k;\n    }\n}\n\n// One frame of the studio: the pause between strokes, dollops falling, the knife.\nfunction tick(P, dt, speed, k3) {\n  for (const d of P.dol) {\n    if (d.f >= 1) continue;\n    const g = min(1 - d.f, dt * 2.5 * max(0.6, speed / 2));\n    dollop(P, d.x, d.y, d.r, d.h, d.c, g, d.f === 0);\n    d.f += g;\n  }\n  // Freshly worked cream glistens; left alone it dulls to a satin over\n  // about ten seconds at Speed 2.\n  P.lt += dt * speed * 0.5;\n  const fr = P.fr, k = 1 - dt * 0.07 * max(0.5, speed);\n  for (let p = 0; p \u003c N; p++) fr[p] *= k;\n  if (!P.live) {\n    P.pause -= dt * max(0.5, speed / 2);\n    if (P.pause \u003c= 0) startStroke(P, k3);\n  } else {\n    let ds = dt * speed * 10;\n    while (ds > 1e-6) {\n      const st = min(ds, 0.5);\n      knife(P, st);\n      ds -= st;\n      if (!P.live) break;\n    }\n  }\n  // A dollop is forgotten once it has fallen and the knife has gone on.\n  if (P.dol.length && P.dol[0].f >= 1 && (!P.live || P.dol.length > 2)) P.dol.shift();\n}\n\n// The first frame already shows cream that has been worked: a level layer\n// and three strokes through dollops of tint.\nfunction prime(P, k3) {\n  const { hf } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hf[y * W + x] = 0.3 * sin(x * 0.11 + y * 0.05) * sin(y * 0.07 - x * 0.04);\n  P.pause = 0;\n  while (P.done \u003c 3) tick(P, 1 / 30, 2, k3);\n  while (!P.live) tick(P, 1 / 30, 2, k3);\n  // Start the live stroke a fifth of the way along, its dollops down.\n  for (const d of P.dol) if (d.f \u003c 1) (dollop(P, d.x, d.y, d.r, d.h, d.c, 1 - d.f, d.f === 0), (d.f = 1));\n  while (P.live && P.pos \u003c P.plen * 0.2) tick(P, 1 / 30, 2, k3);\n  P.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.tones = cl(k[2], 1, 3);\n  P.gloss = cl(k[3], 0, 1);\n  const k3 = cl(Math.round(P.tones), 1, 3);\n  P.force = cl(k[1], 0.2, 3) / 2;\n  if (!P.ready) prime(P, k3);\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fresh dollop in the deepest tint, where the knife will reach it.\n    if (P.live && P.plen - P.pos > 40) plan(P, 0.25 + rnd() * 0.2, DOSE[k3 - 1][k3 - 1], 9);\n    else P.dol.push({ x: 14 + rnd() * 36, y: 20 + rnd() * 88, r: 12, h: 3.2, c: DOSE[k3 - 1][k3 - 1], f: 0 });\n  }\n  tick(P, d, cl(k[1], 0.2, 3), k3);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  const { dh, dt, lut, lus } = P;\n  dh.set(P.hf);\n  dt.set(P.tn);\n  // The cream riding on the blade's face shows where the unseen knife is.\n  if (P.live) roll(P, dh, dt, null);\n  // The light reads the surface and its colour through a small blur, so the\n  // LED steps of the height field do not show as grain.\n  blur(dh, P.bl);\n  // A wide blur of the surface: cream that stands above it is a crest and\n  // catches more light, cream below it lies in a fold and gets less.\n  const av = P.av;\n  av.set(dh);\n  for (let i = 0; i \u003c 4; i++) blur(av, P.bl);\n  blur(dt, P.bl);\n  // The colour of each tint concentration: white cream at 0, the deepest\n  // tint at 1, stepped into the bands Tones asks for. Light goes a little\n  // way into cream, so its shadows are a deeper tint rather than grey.\n  // Wet cream (Gloss up) is a little deeper in colour, as anything wet is.\n  // The deeper tints also darken, so three of them stay apart, except round\n  // orange and yellow, where darker reads as brown and olive on LEDs.\n  const t = P.tones, n0 = floor(t) - 1, ft = t - floor(t), n1 = min(2, n0 + 1), hue = H0 + P.hue, g = P.gloss;\n  const hw = (hue - floor(hue) + 0.38) % 1, dk = 0.3 * min(1, abs(hw - 0.5) / 0.11);\n  for (let i = 0; i \u003c 64; i++) {\n    const c = i / 63, v = band(c, n0) + (band(c, n1) - band(c, n0)) * ft;\n    hsv(hue, 0.22 + 0.72 * v + 0.06 * g, (1 - 0.06 * v - dk * v * v) * (1 - 0.1 * g), lut, i * 3);\n    hsv(hue, min(1, 0.4 + 0.6 * v + 0.1 * g), 0.58 - 0.08 * v - 0.14 * g, lus, i * 3);\n  }\n  // The sheen is measured from what a level surface would show, so level\n  // cream stays its colour and only the slopes turned to the light shine.\n  const la = LA + LS * sin((2 * PI * P.lt) / SWING), lr = sqrt(1 - LZ * LZ), LX = lr * cos(la), LY = lr * sin(la);\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  // A broad satin sheen is always there; Gloss adds a narrow wet one on top.\n  const shin = 10 + 70 * g * g, ks = 0.95 * g * 255, s0 = pow(HZ, shin), sk = ks / (1 - s0), fr = P.fr;\n  const b0 = pow(HZ, 6), bk = (0.4 * 255) / (1 - b0);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = y > 0 ? -W : 0, yd = y \u003c H - 1 ? W : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (dh[x \u003c W - 1 ? p + 1 : p] - dh[x > 0 ? p - 1 : p]) * 0.5 * KZ;\n      const gy = (dh[p + yd] - dh[p + yu]) * 0.5 * KZ;\n      const il = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * il, ny = -gy * il, nz = il;\n      const df = nx * LX + ny * LY + nz * LZ, nh = nx * HX + ny * HY + nz * HZ;\n      const f = (df > -WRAP ? (0.85 * (df + WRAP)) / (LZ + WRAP) : 0) * (1 + cl((dh[p] - av[p]) * CAV, -0.45, 0.25)), n2 = nh * nh, sp = (nh > HZ ? ((g > 0.01 ? (pow(nh, shin) - s0) * sk : 0) + (n2 * n2 * n2 - b0) * bk) * (0.5 + 0.5 * fr[p]) : 0) + fr[p] * GLINT;\n      const o = cl(floor(dt[p] * 63 + 0.5), 0, 63) * 3, r = lus[o], gg = lus[o + 1], b = lus[o + 2];\n      display.setPixel(x, y, min(255, r + (lut[o] - r) * f + sp), min(255, gg + (lut[o + 1] - gg) * f + sp * 0.97), min(255, b + (lut[o + 2] - b) * f + sp * 0.92));\n    }\n  }\n}\n","layer":{"id":"layer-cream-swirl","type":"code","name":"cream-swirl","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cream Swirl\n// Family:  cosmetic\n// Idea:    An unseen palette knife sweeps slow S-curves and spirals through a thick satin cream, leaving a smooth band, pushing a glossy ridge along its edge and drawing dollops of tinted cream out into ribbons, while a soft light glides to and fro so the sheen slides over the folds.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the swatch of face cream spread with a spatula in a macro product film\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1\n//\n// Knob 1: Hue. Turns the cream and its tints round the whole colour wheel together, opening on rose.\n// Knob 2: Speed. How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges.\n// Knob 3: Tones. How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path.\n// Knob 4: Gloss. At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight.\n// Buttons: K1 tap drops a fresh dollop of the deepest tint in the knife's path, and the knife sweeps it into a ribbon.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The knife's edge is cut into NB bins. Each bin carries the cream it has\n// scraped up and that cream's tint, so a dollop picked up at one end of the\n// blade is laid down as a ribbon behind that end, not across the whole band.\nconst NB = 16;\n// Path points are half an LED apart.\nconst STEP = 0.5, PMAX = 1200;\n// How fast a bin's tint turns to the cream it scrapes, per unit of height\n// scraped; how much of the band's skin is the cream the blade carries; what\n// share of each bin's load slides on to the next bin along the angled blade\n// for each LED travelled.\nconst PICK = 0.3, FILM = 0.45, SLIP = 1.05;\n// The share of the dragged skin left behind for each LED travelled.\nconst DRAG = 0.03;\n// The ridge the spill builds stands at RS height per LED on its flanks, and\n// is never taller than RMAX.\nconst RS = 0.4, RMAX = 3.6;\n// How deep the roll of cream in front of the blade is, in LEDs.\nconst ROLL = 6;\n// How deep the visible skin is: scraping this much off shows the bed.\nconst SKIN = 0.8;\n// The opening hue: rose, not red.\nconst H0 = 0.93;\n\n// A soft light low over the top left, its height LZ and where it sits round\n// the panel, LA radians; it glides LS either way of that and back over SWING\n// seconds at Speed 2, so the sheen slides along the ridges between strokes.\nconst LZ = 0.5, LA = -2.34, LS = 0.9, SWING = 7;\n// How tall the height field looks: a slope of 1 tilts the surface 56 degrees.\nconst KZ = 1.8;\n// The light is a big soft box: it wraps a little way round the cream, so a\n// slope turned from it shades off gently instead of dropping into shadow.\nconst WRAP = 0.3;\n// How much a fold darkens and a crest brightens, per unit of height.\nconst CAV = 0.5;\n// Cream the knife has just laid down holds a wet film that lifts it by this\n// much, fading as it dulls.\nconst GLINT = 26;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The tint concentrations a dollop can come in, for one, two and three tints.\nconst DOSE = [[0.55], [0.4, 0.88], [0.3, 0.62, 1]];\n// Where the colour ramp steps between tints, so folded cream shows distinct\n// bands rather than one blurred pink: thresholds and the level each band shows.\nconst STEPS = [\n  [[0.22], [0, 0.55]],\n  [[0.18, 0.6], [0, 0.42, 0.88]],\n  [[0.14, 0.44, 0.78], [0, 0.3, 0.62, 1]],\n];\nfunction band(c, n) {\n  const [th, lv] = STEPS[n];\n  let v = lv[0];\n  for (let i = 0; i \u003c th.length; i++) v += (lv[i + 1] - lv[i]) * sm((c - th[i]) / 0.1 + 0.5);\n  return v;\n}\n\nexport function setup(params) {\n  params.s = {\n    // Height, the tint of the skin, the tint of the bed under it.\n    hf: new Float32Array(N), tn: new Float32Array(N), ut: new Float32Array(N),\n    dh: new Float32Array(N), dt: new Float32Array(N), bl: new Float32Array(N), av: new Float32Array(N),\n    stamp: new Int32Array(N).fill(-999), sub: 0, fr: new Float32Array(N),\n    path: new Float32Array(PMAX * 2), plen: 0, pos: 0, type: 0, done: 0,\n    m: new Float32Array(NB), c: new Float32Array(NB), ft: new Float32Array(NB), fm: new Float32Array(NB), bm: 0, bc: 0,\n    L: 24, ca: 1, sa: 0, B: 0, tilt: 0, gPh: 0, cc: 0, cA: 0, cP: 8, cB: 0, slip: 1, rh: 0,\n    sp: new Float32Array(8), pause: 0, live: false, force: 1, lt: 0,\n    dol: [], hue: 0, tones: 1, gloss: 0.06, ready: false,\n    lut: new Float32Array(64 * 3), lus: new Float32Array(64 * 3),\n    kx: 0, ky: 0, dx: 0, dy: 1, tx: 1, ty: 0,\n  };\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\n// A round dollop: a soft mound of tint c with a peak where it left the spoon. It is all skin, so a knife that\n// scrapes it away finds the cream it was dropped on.\n// Its colour goes on with the first of it, as deep as the whole dollop will\n// be thick: its thin rim only half covers what it landed on, so a knife that\n// scrapes it off leaves no ring.\nfunction dollop(P, x0, y0, r, ht, c, f, first) {\n  const x1 = max(0, floor(x0 - r)), x2 = min(W - 1, floor(x0 + r) + 1);\n  const y1 = max(0, floor(y0 - r)), y2 = min(H - 1, floor(y0 + r) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const d = ((x - x0) ** 2 + (y - y0) ** 2) / (r * r);\n      if (d >= 1) continue;\n      const p = y * W + x, a = ht * (1 - sqrt(d)) * (1 - d * 0.5);\n      P.hf[p] += a * f;\n      if (first) P.tn[p] += (c - P.tn[p]) * min(1, a / 1.2);\n    }\n}\n\n// The stroke's path as a function of u from 0 to 1, from the parameters\n// startStroke puts in P.sp.\nfunction pathAt(P, u, o) {\n  const s = P.sp;\n  if (P.type === 0) {\n    // An S down (or up) the panel.\n    o[0] = s[0] + s[1] * sin(2 * PI * s[2] * u + s[3]);\n    o[1] = s[4] + (s[5] - s[4]) * u;\n  } else if (P.type === 1) {\n    // A spiral in to a point: the swirl on top of a jar.\n    const a = s[3] + s[4] * u * 2 * PI, r = s[5] + (s[6] - s[5]) * (1 - (1 - u) * (1 - u));\n    o[0] = s[0] + r * cos(a);\n    o[1] = s[1] + r * sin(a) * 1.15;\n  } else {\n    // A bowed smear from off one side to the middle, or right across.\n    const v = 1 - u, mx = (s[0] + s[2]) / 2 + s[4], my = (s[1] + s[3]) / 2 + s[5];\n    o[0] = v * v * s[0] + 2 * v * u * mx + u * u * s[2];\n    o[1] = v * v * s[1] + 2 * v * u * my + u * u * s[3];\n  }\n}\n\nconst TMP = [0, 0];\nfunction startStroke(P, k3) {\n  const s = P.sp, r = rnd(), hf = P.hf;\n  // Heights only matter against each other: keep the cream's mean level at\n  // 0, and cut every band below it, so each stroke has cream to push.\n  let mean = 0;\n  for (let p = 0; p \u003c N; p++) mean += hf[p];\n  mean /= N;\n  for (let p = 0; p \u003c N; p++) hf[p] -= mean;\n  P.type = r \u003c 0.5 ? 0 : r \u003c 0.8 ? 1 : 2;\n  if (P.type === 0) {\n    const down = rnd() \u003c 0.5;\n    s[0] = 22 + rnd() * 20;\n    s[1] = 10 + rnd() * 10;\n    s[2] = 0.6 + rnd() * 0.5;\n    s[3] = rnd() * 2 * PI;\n    s[4] = down ? -14 : H + 14;\n    s[5] = down ? H + 14 : -14;\n    P.L = 34 + rnd() * 10;\n    P.B = -0.9 + rnd() * 0.5;\n  } else if (P.type === 1) {\n    s[0] = 26 + rnd() * 12;\n    s[1] = 36 + rnd() * 56;\n    s[3] = rnd() * 2 * PI;\n    s[4] = (rnd() \u003c 0.5 ? -1 : 1) * (1.3 + rnd() * 0.5);\n    s[5] = 25 + rnd() * 6;\n    s[6] = 3;\n    P.L = 18 + rnd() * 5;\n    P.B = -0.6 + rnd() * 0.4;\n  } else {\n    const across = rnd() \u003c 0.4, side = rnd() \u003c 0.5 ? -1 : 1;\n    if (across) {\n      s[0] = side \u003c 0 ? -14 : W + 14;\n      s[2] = side \u003c 0 ? W + 14 : -14;\n      s[1] = 14 + rnd() * 100;\n      s[3] = cl(s[1] + (rnd() - 0.5) * 40, 10, H - 10);\n    } else {\n      s[0] = 32 + side * (34 + rnd() * 6);\n      s[1] = 10 + rnd() * 108;\n      s[2] = 32 - side * (rnd() * 10);\n      s[3] = cl(s[1] + (rnd() - 0.5) * 70, 18, H - 18);\n    }\n    s[4] = 0;\n    s[5] = (rnd() - 0.5) * 36;\n    P.L = 28 + rnd() * 8;\n    P.B = -0.8 + rnd() * 0.5;\n  }\n  // Lay the path down half an LED a point.\n  const path = P.path;\n  pathAt(P, 0, TMP);\n  let px = TMP[0], py = TMP[1], n = 1;\n  path[0] = px;\n  path[1] = py;\n  for (let i = 1; i \u003c= 4000 && n \u003c PMAX; i++) {\n    pathAt(P, i / 4000, TMP);\n    const d = sqrt((TMP[0] - px) ** 2 + (TMP[1] - py) ** 2);\n    if (d >= STEP) {\n      px += ((TMP[0] - px) * STEP) / d;\n      py += ((TMP[1] - py) * STEP) / d;\n      path[n * 2] = px;\n      path[n * 2 + 1] = py;\n      n++;\n    }\n  }\n  P.plen = (n - 1) * STEP;\n  P.pos = 0;\n  // The blade sits at an angle to its track, tilted a little and bowed, so\n  // the band is a shallow trough, and it chatters as it goes, leaving soft\n  // folds across the band. A slow knife glides and cuts shallow; a fast one\n  // chatters harder and digs deeper, so it throws a taller ridge.\n  const al = (rnd() - 0.5) * 0.6;\n  P.ca = cos(al);\n  P.sa = sin(al);\n  P.tilt = (rnd() - 0.5) * 0.6;\n  P.cc = 0.2 + rnd() * 0.4;\n  P.cA = (0.13 + rnd() * 0.1) * (0.35 + 0.65 * P.force);\n  P.B -= 0.35 * (P.force - 1);\n  P.cP = 11 + rnd() * 5;\n  P.cB = (rnd() \u003c 0.5 ? -1 : 1) * (3 + rnd() * 4);\n  P.gPh = rnd() * 2 * PI;\n  P.slip = rnd() \u003c 0.5 ? -1 : 1;\n  if (P.type === 1) {\n    // A swirl throws its cream outwards.\n    locate(P, 6);\n    P.slip = P.tx * (P.kx - s[0]) + P.ty * (P.ky - s[1]) > 0 ? 1 : -1;\n  }\n  P.m.fill(0);\n  P.c.fill(0);\n  P.ft.fill(0);\n  P.fm.fill(0);\n  P.rh = 0;\n  P.live = true;\n  // Every stroke goes through fresh dollops dropped a little way along: one\n  // for one tint, two or three when three tints are folded in.\n  const nd = k3 === 1 ? 1 : k3 === 2 ? (rnd() \u003c 0.5 ? 2 : 1) : rnd() \u003c 0.4 ? 3 : 2;\n  for (let i = 0; i \u003c nd; i++) plan(P, 0.1 + rnd() * 0.45, rnd() \u003c 0.4 ? 0 : DOSE[k3 - 1][floor(rnd() * k3)], (10 + rnd() * 3) / sqrt(nd));\n}\n\n// A dollop waiting to fall at a point on the path ahead of the knife.\nfunction plan(P, u, c, r) {\n  if (P.dol.length > 3) return;\n  const i = floor((P.pos + (P.plen - P.pos) * u) / STEP);\n  const x = P.path[i * 2], y = P.path[i * 2 + 1];\n  P.dol.push({ x: cl(x + (rnd() - 0.5) * 6, 6, W - 7), y: cl(y + (rnd() - 0.5) * 6, 8, H - 9), r, h: 2.6 + rnd() * 0.6, c, f: 0 });\n}\n\n// The knife's point, its direction of travel and the blade's direction.\nfunction locate(P, pos) {\n  const path = P.path, last = floor(P.plen / STEP);\n  const i = cl(floor(pos / STEP), 0, last - 1), f = cl(pos / STEP - i, 0, 1);\n  P.kx = path[i * 2] + (path[i * 2 + 2] - path[i * 2]) * f;\n  P.ky = path[i * 2 + 1] + (path[i * 2 + 3] - path[i * 2 + 1]) * f;\n  const a = max(0, i - 3), b = min(last, i + 4);\n  let dx = path[b * 2] - path[a * 2], dy = path[b * 2 + 1] - path[a * 2 + 1];\n  const d = sqrt(dx * dx + dy * dy) || 1;\n  dx /= d;\n  dy /= d;\n  P.dx = dx;\n  P.dy = dy;\n  P.tx = -dy * P.ca - dx * P.sa;\n  P.ty = dx * P.ca - dy * P.sa;\n}\n\n// The load of the blade at a point a along it and the tint it drags there,\n// read between the bins so what it lays down has no seams.\nfunction load(P, a) {\n  const fb = cl(((a + P.L / 2) / P.L) * NB - 0.5, 0, NB - 1), j = min(NB - 2, floor(fb)), f = fb - j;\n  P.bm = P.m[j] + (P.m[j + 1] - P.m[j]) * f;\n  P.bc = P.ft[j] + (P.ft[j + 1] - P.ft[j]) * f;\n}\n\n// The ridge across its width r (0 at the band's edge, 1 at its foot): a\n// steep inner face where the blade cut it, a long outer slope.\nconst ridge = (r) => (r \u003c 0.3 ? sm(r / 0.3) : 1 - sm((r - 0.3) / 0.7));\n\n// One move of the knife by ds LEDs. Each LED is worked once a pass, as the\n// back of the blade leaves it: what stood above the blade goes into the\n// bin over it, and the band, the ridge beside it and their tints are laid\n// down.\nfunction knife(P, ds) {\n  P.pos += ds;\n  P.sub++;\n  if (P.pos >= P.plen) return lift(P);\n  locate(P, P.pos);\n  const { hf, tn, ut, m, c, ft, fm, stamp, L } = P, hl = L / 2, sl = P.slip;\n  for (let j = 0; j \u003c NB; j++) fm[j] *= 1 - DRAG * ds;\n  const kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  // Pressure comes on over the first 8 LEDs and goes off over the last 6.\n  const pr = sm(P.pos / 8) * sm((P.plen - P.pos) / 6);\n  const rw = max(3, (2 * P.rh) / RS), end = sl > 0 ? NB - 1 : 0, lvEnd = P.B + P.tilt * sl + P.cc;\n  const rx = abs(tx) * (hl + rw) + 3, ry = abs(ty) * (hl + rw) + 3;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, s = (tx * oy - ty * ox) / det;\n      // On a curve the LEDs on the outside move further than ds, so the\n      // strip is wider than a step and the stamp keeps it to once a pass.\n      if (s \u003c -3 - ds || s >= -0.3) continue;\n      const a = (ox * dy - oy * dx) / det, as = a * sl, p = y * W + x;\n      if (as \u003c= -hl - 1.5 || as >= hl + rw || P.sub - stamp[p] \u003c 40) continue;\n      stamp[p] = P.sub;\n      const ho = hf[p], to = tn[p];\n      if (as \u003c hl && as > -hl) {\n        // The chatter marks bow back towards the blade's ends, as a flexible\n        // blade leaves them, and come and go along it.\n        const u = a / hl, w = (2 * PI * (P.pos + P.cB * u * u)) / P.cP;\n        const lv = P.B + P.tilt * u + P.cc * u * u + P.cA * (0.65 + 0.35 * sin(a * 0.31 + P.gPh)) * (sin(w) + 0.5 * sin(w * 1.63 + 1.3)), e = ho - lv;\n        const j = cl(floor(((a + hl) / L) * NB), 0, NB - 1);\n        if (e > 0) {\n          m[j] += e * pr;\n          c[j] += (to - c[j]) * min(1, e * PICK * pr);\n          // The skin of tint the blade drags stays in its own lane and is\n          // mixed by how much of each colour it gathered, so a dollop\n          // becomes a long ribbon that pales as white cream dilutes it.\n          fm[j] += e * pr;\n          ft[j] += ((to - ft[j]) * e * pr) / fm[j];\n        }\n        // Under what was scraped off lies the bed; over it the blade leaves a\n        // film of the cream it carries.\n        const ex = e > 0 ? to + (ut[p] - to) * min(1, e / SKIN) : to;\n        load(P, a);\n        const tw = ex + (P.bc - ex) * FILM * min(1, P.bm);\n        hf[p] = ho + (lv - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (tw - to) * pr;\n        ut[p] += (tw - ut[p]) * pr * 0.4;\n      } else {\n        // Beside the band: the ridge on the spill side, a thin lip of\n        // squeezed cream on the other.\n        const hr = as > 0 ? lvEnd + P.rh * ridge((as - hl) / rw) : P.B - P.tilt * sl + 0.2 * P.rh * ridge((-as - hl) / 1.5);\n        if (hr \u003c= ho) continue;\n        const k = pr * min(1, (hr - ho) / SKIN), ce = as > 0 ? c[end] : to;\n        hf[p] = ho + (hr - ho) * pr;\n        P.fr[p] = max(P.fr[p], pr);\n        tn[p] = to + (ce - to) * k;\n        ut[p] += (ce - ut[p]) * k;\n      }\n    }\n  // The load slides along the angled blade and spills off its end, and the\n  // ridge stands as tall as the cream spilling into it.\n  const f = min(0.9, SLIP * ds);\n  for (let k = 1; k \u003c NB; k++) {\n    const j = sl > 0 ? NB - 1 - k : k, to = j + sl, a = m[j] * f;\n    if (a \u003c= 0) continue;\n    c[to] = (c[to] * m[to] + c[j] * a) / (m[to] + a);\n    m[to] += a;\n    m[j] -= a;\n  }\n  const spill = m[end] * f;\n  m[end] -= spill;\n  const target = min(RMAX, sqrt(0.75 * (spill / ds) * RS));\n  P.rh += (target - P.rh) * min(1, ds * 0.25);\n}\n\n// The knife lifts: what it still carries stays where it stopped, a raised\n// lip across the end of the band.\nfunction lift(P) {\n  locate(P, P.plen);\n  roll(P, P.hf, P.tn, P.ut);\n  P.live = false;\n  P.done++;\n  P.pause = 0.15 + rnd() * 0.2;\n}\n\n// The cream on the blade's face as a rounded roll in front of it, laid into\n// (h, t): for the picture while the knife moves, for good when it lifts.\nfunction roll(P, h, t, u) {\n  const hl = P.L / 2, kx = P.kx, ky = P.ky, dx = P.dx, dy = P.dy, tx = P.tx, ty = P.ty, det = tx * dy - ty * dx;\n  const rx = abs(tx) * hl + ROLL + 2, ry = abs(ty) * hl + ROLL + 2;\n  const x1 = max(0, floor(kx - rx)), x2 = min(W - 1, floor(kx + rx) + 1);\n  const y1 = max(0, floor(ky - ry)), y2 = min(H - 1, floor(ky + ry) + 1);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const ox = x - kx, oy = y - ky, a = (ox * dy - oy * dx) / det, s = (tx * oy - ty * ox) / det;\n      if (s \u003c= -0.3 || s >= ROLL || a \u003c= -hl || a >= hl) continue;\n      load(P, a);\n      // A bin's load spread as a mound ROLL deep, rounded off at the blade's\n      // ends: as tall as that much cream stands, and never a wall.\n      const ht = min(2.4, sqrt((P.bm * NB) / P.L) * 0.7) * sin((PI * (s + 0.3)) / (ROLL + 0.3)) * sqrt(sin((PI * (a + hl)) / P.L));\n      const p = y * W + x;\n      if (P.B + ht \u003c= h[p]) continue;\n      const k = min(1, (P.B + ht - h[p]) / SKIN);\n      h[p] = P.B + ht;\n      t[p] += (P.bc - t[p]) * k;\n      if (u) u[p] += (P.bc - u[p]) * k;\n    }\n}\n\n// One frame of the studio: the pause between strokes, dollops falling, the knife.\nfunction tick(P, dt, speed, k3) {\n  for (const d of P.dol) {\n    if (d.f >= 1) continue;\n    const g = min(1 - d.f, dt * 2.5 * max(0.6, speed / 2));\n    dollop(P, d.x, d.y, d.r, d.h, d.c, g, d.f === 0);\n    d.f += g;\n  }\n  // Freshly worked cream glistens; left alone it dulls to a satin over\n  // about ten seconds at Speed 2.\n  P.lt += dt * speed * 0.5;\n  const fr = P.fr, k = 1 - dt * 0.07 * max(0.5, speed);\n  for (let p = 0; p \u003c N; p++) fr[p] *= k;\n  if (!P.live) {\n    P.pause -= dt * max(0.5, speed / 2);\n    if (P.pause \u003c= 0) startStroke(P, k3);\n  } else {\n    let ds = dt * speed * 10;\n    while (ds > 1e-6) {\n      const st = min(ds, 0.5);\n      knife(P, st);\n      ds -= st;\n      if (!P.live) break;\n    }\n  }\n  // A dollop is forgotten once it has fallen and the knife has gone on.\n  if (P.dol.length && P.dol[0].f >= 1 && (!P.live || P.dol.length > 2)) P.dol.shift();\n}\n\n// The first frame already shows cream that has been worked: a level layer\n// and three strokes through dollops of tint.\nfunction prime(P, k3) {\n  const { hf } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hf[y * W + x] = 0.3 * sin(x * 0.11 + y * 0.05) * sin(y * 0.07 - x * 0.04);\n  P.pause = 0;\n  while (P.done \u003c 3) tick(P, 1 / 30, 2, k3);\n  while (!P.live) tick(P, 1 / 30, 2, k3);\n  // Start the live stroke a fifth of the way along, its dollops down.\n  for (const d of P.dol) if (d.f \u003c 1) (dollop(P, d.x, d.y, d.r, d.h, d.c, 1 - d.f, d.f === 0), (d.f = 1));\n  while (P.live && P.pos \u003c P.plen * 0.2) tick(P, 1 / 30, 2, k3);\n  P.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.tones = cl(k[2], 1, 3);\n  P.gloss = cl(k[3], 0, 1);\n  const k3 = cl(Math.round(P.tones), 1, 3);\n  P.force = cl(k[1], 0.2, 3) / 2;\n  if (!P.ready) prime(P, k3);\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fresh dollop in the deepest tint, where the knife will reach it.\n    if (P.live && P.plen - P.pos > 40) plan(P, 0.25 + rnd() * 0.2, DOSE[k3 - 1][k3 - 1], 9);\n    else P.dol.push({ x: 14 + rnd() * 36, y: 20 + rnd() * 88, r: 12, h: 3.2, c: DOSE[k3 - 1][k3 - 1], f: 0 });\n  }\n  tick(P, d, cl(k[1], 0.2, 3), k3);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  const { dh, dt, lut, lus } = P;\n  dh.set(P.hf);\n  dt.set(P.tn);\n  // The cream riding on the blade's face shows where the unseen knife is.\n  if (P.live) roll(P, dh, dt, null);\n  // The light reads the surface and its colour through a small blur, so the\n  // LED steps of the height field do not show as grain.\n  blur(dh, P.bl);\n  // A wide blur of the surface: cream that stands above it is a crest and\n  // catches more light, cream below it lies in a fold and gets less.\n  const av = P.av;\n  av.set(dh);\n  for (let i = 0; i \u003c 4; i++) blur(av, P.bl);\n  blur(dt, P.bl);\n  // The colour of each tint concentration: white cream at 0, the deepest\n  // tint at 1, stepped into the bands Tones asks for. Light goes a little\n  // way into cream, so its shadows are a deeper tint rather than grey.\n  // Wet cream (Gloss up) is a little deeper in colour, as anything wet is.\n  // The deeper tints also darken, so three of them stay apart, except round\n  // orange and yellow, where darker reads as brown and olive on LEDs.\n  const t = P.tones, n0 = floor(t) - 1, ft = t - floor(t), n1 = min(2, n0 + 1), hue = H0 + P.hue, g = P.gloss;\n  const hw = (hue - floor(hue) + 0.38) % 1, dk = 0.3 * min(1, abs(hw - 0.5) / 0.11);\n  for (let i = 0; i \u003c 64; i++) {\n    const c = i / 63, v = band(c, n0) + (band(c, n1) - band(c, n0)) * ft;\n    hsv(hue, 0.22 + 0.72 * v + 0.06 * g, (1 - 0.06 * v - dk * v * v) * (1 - 0.1 * g), lut, i * 3);\n    hsv(hue, min(1, 0.4 + 0.6 * v + 0.1 * g), 0.58 - 0.08 * v - 0.14 * g, lus, i * 3);\n  }\n  // The sheen is measured from what a level surface would show, so level\n  // cream stays its colour and only the slopes turned to the light shine.\n  const la = LA + LS * sin((2 * PI * P.lt) / SWING), lr = sqrt(1 - LZ * LZ), LX = lr * cos(la), LY = lr * sin(la);\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  // A broad satin sheen is always there; Gloss adds a narrow wet one on top.\n  const shin = 10 + 70 * g * g, ks = 0.95 * g * 255, s0 = pow(HZ, shin), sk = ks / (1 - s0), fr = P.fr;\n  const b0 = pow(HZ, 6), bk = (0.4 * 255) / (1 - b0);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = y > 0 ? -W : 0, yd = y \u003c H - 1 ? W : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (dh[x \u003c W - 1 ? p + 1 : p] - dh[x > 0 ? p - 1 : p]) * 0.5 * KZ;\n      const gy = (dh[p + yd] - dh[p + yu]) * 0.5 * KZ;\n      const il = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * il, ny = -gy * il, nz = il;\n      const df = nx * LX + ny * LY + nz * LZ, nh = nx * HX + ny * HY + nz * HZ;\n      const f = (df > -WRAP ? (0.85 * (df + WRAP)) / (LZ + WRAP) : 0) * (1 + cl((dh[p] - av[p]) * CAV, -0.45, 0.25)), n2 = nh * nh, sp = (nh > HZ ? ((g > 0.01 ? (pow(nh, shin) - s0) * sk : 0) + (n2 * n2 * n2 - b0) * bk) * (0.5 + 0.5 * fr[p]) : 0) + fr[p] * GLINT;\n      const o = cl(floor(dt[p] * 63 + 0.5), 0, 63) * 3, r = lus[o], gg = lus[o + 1], b = lus[o + 2];\n      display.setPixel(x, y, min(255, r + (lut[o] - r) * f + sp), min(255, gg + (lut[o + 1] - gg) * f + sp * 0.97), min(255, b + (lut[o + 2] - b) * f + sp * 0.92));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tones=1..3, Gloss=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the cream and its tints round the whole colour wheel together, opening on rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast and how hard the knife works: at 2 it travels 20 LEDs a second, an S-sweep down the panel takes about eight seconds and the light swings across and back in seven; slow, the knife glides and leaves smooth bands, fast, it chatters and throws taller ridges."},{"name":"Tones","min":1,"max":3,"about":"How many tints are folded into the pale cream, from one pastel at 1 to three at 3, a pale, a mid and a deep one; the ribbons split into their bands at once, and with more tints more dollops fall in each stroke's path."},{"name":"Gloss","min":0,"max":1,"about":"At 0 the cream has a soft satin sheen spread over its slopes; at 1 it is wet, a little deeper in colour, and each ridge carries a thin white highlight."}],"start":[0,2,1,0.06],"measures":{"motion":0.0374,"detail":0.0161,"edges":0.0277,"complexity":1.8116,"coverage":1,"colour":0.1658,"drift":0.0429},"knobResponse":[0.2103,0.0689,0.1027,0.1086]},{"slug":"crossroads","title":"Crossroads","family":"city","round":17,"note":"드론으로 곧장 내려다본 밤 네거리예요. 차는 전조등과 미등으로만 보이고, 나트륨등 웅덩이 사이에서 신호가 줄을 세웠다 풀며, 모든 차가 서면 사람들이 건널목 넷을 한꺼번에 건너요.","idea":"A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","layer":{"id":"layer-crossroads","type":"code","name":"crossroads","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads."},{"name":"Pace","min":0.2,"max":3,"about":"The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps."},{"name":"Hour","min":0,"max":1,"about":"At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets."},{"name":"Rain","min":0,"max":1,"about":"Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas."}],"start":[0,2,0,0.06],"measures":{"motion":0.2133,"detail":0.0621,"edges":0.4808,"complexity":0.9935,"coverage":0.2564,"colour":0.385,"drift":0.0485},"knobResponse":[0.05,0.0417,0.0482,0.062]},{"slug":"curve-shortening","title":"Curve Shortening","family":"line","round":36,"note":"굵은 나선이나 접힌 지렁이, 팔 여럿인 별 같은 닫힌 곡선 하나가 점마다 곡률만큼의 빠르기로 법선을 따라 움직여요. 곡선은 제 몸에 한 번도 닿지 않고 풀려 둥글어진 뒤 한 점으로 사라지고, 넓이는 모양과 상관없이 흐름 시간 1 에 2π 씩 줄며, 흰 점으로 찍힌 변곡점은 둘씩 만나 함께 없어져요. K3 은 나선을 2바퀴에서 3.5바퀴까지 감고, K1 을 누르면 남은 흐름이 0.6초 만에 끝나요.","idea":"One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.","buttons":"K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.","code":"// ===== Patternflow pattern =====\n// Title:   Curve Shortening\n// Family:  line\n// Idea:    One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: curve-shortening flow, Grayson's theorem (Matthew Grayson, 1987), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1\n//\n// Knob 1: Hue. The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it.\n// Knob 2: Speed. At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long.\n// Knob 3: Wind. How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve.\n// Knob 4: Trace. At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline.\n// Buttons: K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.\n\nconst W = 64, H = 128, NMAX = 1500, NMIN = 28, SNAPS = 10, SNAPN = 180;\n// Flow time is in LEDs squared: the area falls 2 pi of them per unit. A curve\n// lives LIFE beats of the clock; a beat is a second at Speed 2.\nconst LIFE = 5.6, DRAW0 = 1.9, DRAW = 0.95, FLASH = 0.6, DS = 1.3;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, random, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// ---- Shapes. Each is a centre line with a band width, or a polygon. ----\n\nfunction seg(out, x0, y0, x1, y1) {\n  const k = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.5));\n  for (let i = 0; i \u003c k; i++) out.push(x0 + ((x1 - x0) * i) / k, y0 + ((y1 - y0) * i) / k);\n}\n\n// A spiral on a stadium: half turns over the top and under the bottom, 2h\n// apart, joined by straight runs. Each half turn is a true semicircle, the\n// top ones centred on cx with radius r0 + k p, the bottom ones half a pitch\n// to the right with radius r0 + (k + 1/2) p, so the arcs meet the runs with\n// no corner and the band gains p every turn. It uses the tall panel the way\n// a round spiral cannot.\nfunction spiral(T) {\n  const p = 57 / (2 * T + 0.2), w = 0.45 * p, r0 = w / 2 + 1.5, h = 30, cx = 32, cy = 64, C = [];\n  const halves = 2 * T;\n  seg(C, cx + r0, cy + h, cx + r0, cy - h);\n  for (let k = 0; k \u003c halves; k++) {\n    const top = k % 2 === 0, R = r0 + (k * p) / 2, xc = top ? cx : cx + p / 2, yc = top ? cy - h : cy + h;\n    const f1 = min(PI, (halves - k) * PI);\n    for (let f = 0; f \u003c f1; f += 0.6 / R) C.push(xc + (top ? 1 : -1) * R * cos(f), yc + (top ? -1 : 1) * R * sin(f));\n    const x = xc + (top ? 1 : -1) * R * cos(f1);\n    if (f1 \u003c PI) C.push(x, yc + (top ? -1 : 1) * R * sin(f1));\n    else seg(C, x, yc, x, top ? cy + h : cy - h);\n  }\n  return { C, w };\n}\n\n// Two round spirals, one over the other, joined through the middle of the\n// panel as an S: the outer end of the upper one meets its mirror image there.\nfunction coils(T) {\n  const k = T \u003c 2.5 ? 2 : 3, p = 28.5 / (k + 0.55), w = 0.62 * p, r0 = 0.3 * p + 1.5, F = 2 * PI * k + PI / 2;\n  const Rm = r0 + (p * F) / (2 * PI), cyA = 64 - Rm, A = [];\n  for (let f = 0; f \u003c F; f += 0.03) {\n    const r = r0 + (p * f) / (2 * PI);\n    A.push(32 + r * cos(f), cyA + r * sin(f));\n  }\n  const C = A.slice();\n  C.push(32, 64);\n  for (let i = A.length - 2; i >= 0; i -= 2) C.push(64 - A[i], 128 - A[i + 1]);\n  return { C, w };\n}\n\n// A worm folded into m runs across the panel, joined by hairpin bends.\nfunction worm(T) {\n  const m = 2 + round(2 * T), p = 118 / m, w = 0.6 * p, xl = 3 + p / 2 + w / 2, xr = 61 - p / 2 - w / 2, C = [];\n  for (let j = 0; j \u003c m; j++) {\n    const y = 5 + p / 2 + j * p, right = j % 2 === 0;\n    seg(C, right ? xl : xr, y, right ? xr : xl, y);\n    if (j === m - 1) {\n      C.push(right ? xr : xl, y);\n      break;\n    }\n    const xc = right ? xr : xl, yc = y + p / 2;\n    for (let a = 0; a \u003c PI; a += 0.06) C.push(xc + (right ? 1 : -1) * (p / 2) * sin(a), yc - (p / 2) * cos(a));\n  }\n  return { C, w };\n}\n\n// A star: r(t) = R (0.34 + 0.66 g(k t)), one arm per lobe of g, stretched\n// 1.45 times up the panel. Being a graph over the angle, before and after the\n// stretch, it cannot cross itself.\nfunction star(T) {\n  const k = 2 + round(2 * T), R = 29.5, P = [];\n  for (let i = 0; i \u003c 2400; i++) {\n    const t = (2 * PI * i) / 2400, g = ((1 + cos(k * t)) / 2) ** 1.7, r = R * (0.34 + 0.66 * g);\n    P.push(32 + r * sin(t), 64 - 1.45 * r * cos(t));\n  }\n  return P;\n}\n\n// The outline of a band of width w round a centre line, with round ends.\nfunction band(C, w) {\n  const m = C.length >> 1, L = [], Rt = [], hw = w / 2;\n  const nrm = (i) => {\n    const a = max(0, i - 1), b = min(m - 1, i + 1);\n    let tx = C[2 * b] - C[2 * a], ty = C[2 * b + 1] - C[2 * a + 1];\n    const l = sqrt(tx * tx + ty * ty) || 1;\n    return [tx / l, ty / l];\n  };\n  for (let i = 0; i \u003c m; i++) {\n    const [tx, ty] = nrm(i);\n    L.push(C[2 * i] - ty * hw, C[2 * i + 1] + tx * hw);\n    Rt.push(C[2 * i] + ty * hw, C[2 * i + 1] - tx * hw);\n  }\n  const P = L.slice();\n  const cap = (i, s) => {\n    const [tx, ty] = nrm(i), nx = -ty, ny = tx;\n    for (let a = 0.12; a \u003c PI; a += 0.12) {\n      const c = cos(a), d = sin(a);\n      P.push(C[2 * i] + s * hw * (c * nx + d * tx), C[2 * i + 1] + s * hw * (c * ny + d * ty));\n    }\n  };\n  cap(m - 1, 1);\n  for (let i = m - 1; i >= 0; i--) P.push(Rt[2 * i], Rt[2 * i + 1]);\n  cap(0, -1);\n  return P;\n}\n\nfunction area(X, Y, n) {\n  let a = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) a += X[j] * Y[i] - X[i] * Y[j];\n  return a / 2;\n}\n\n// Put n points round the closed polygon P at equal steps of arc length,\n// wound so that the area comes out positive.\nfunction resample(P, np, X, Y, n) {\n  const m = np, len = new Float64Array(m + 1);\n  for (let i = 0; i \u003c m; i++) {\n    const j = (i + 1) % m;\n    len[i + 1] = len[i] + sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  const L = len[m];\n  let s = 0;\n  for (let k = 0; k \u003c n; k++) {\n    const target = (L * k) / n;\n    while (s \u003c m - 1 && len[s + 1] \u003c target) s++;\n    const j = (s + 1) % m, u = (target - len[s]) / (len[s + 1] - len[s] || 1);\n    X[k] = P[2 * s] + u * (P[2 * j] - P[2 * s]);\n    Y[k] = P[2 * s + 1] + u * (P[2 * j + 1] - P[2 * s + 1]);\n  }\n  if (area(X, Y, n) \u003c 0)\n    for (let a = 0, b = n - 1; a \u003c b; a++, b--) {\n      let t = X[a];\n      X[a] = X[b];\n      X[b] = t;\n      t = Y[a];\n      Y[a] = Y[b];\n      Y[b] = t;\n    }\n  return L;\n}\n\nfunction perimeter(X, Y, n) {\n  let L = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) L += sqrt((X[i] - X[j]) ** 2 + (Y[i] - Y[j]) ** 2);\n  return L;\n}\n\n// A new curve: the spiral first, then any of the four but the one just\n// shown, at 70 to 100% size somewhere on the panel, mirrored at random.\nfunction build(S, wind, first) {\n  let kind = 0;\n  if (!first) {\n    kind = floor(random() * 4);\n    if (kind === S.kind) kind = (kind + 1 + floor(random() * 3)) % 4;\n  }\n  S.kind = kind;\n  S.wind = wind;\n  let P;\n  if (kind === 1) P = star(wind);\n  else {\n    const { C, w } = kind === 0 ? spiral(wind) : kind === 2 ? worm(wind) : coils(wind);\n    P = band(C, w);\n  }\n  const sc = first ? 1 : 0.7 + 0.3 * random(), fx = random() \u003c 0.5 ? -1 : 1, fy = random() \u003c 0.5 ? -1 : 1;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c P.length; i += 2) {\n    P[i] = 32 + fx * sc * (P[i] - 32);\n    P[i + 1] = 64 + fy * sc * (P[i + 1] - 64);\n    x0 = min(x0, P[i]);\n    x1 = max(x1, P[i]);\n    y0 = min(y0, P[i + 1]);\n    y1 = max(y1, P[i + 1]);\n  }\n  // The first curve stands in the middle; later ones slide anywhere they\n  // still fit between 1.5 and 62.5 across, 1.5 and 126.5 down.\n  const dx = first ? 32 - (x0 + x1) / 2 : 1.5 - x0 + random() * max(0, 61 - (x1 - x0));\n  const dy = first ? 64 - (y0 + y1) / 2 : 1.5 - y0 + random() * max(0, 125 - (y1 - y0));\n  for (let i = 0; i \u003c P.length; i += 2) (P[i] += dx), (P[i + 1] += dy);\n  const np = P.length >> 1;\n  let L = 0;\n  for (let i = 0; i \u003c np; i++) {\n    const j = (i + 1) % np;\n    L += sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  S.n = min(NMAX, max(NMIN, round(L / DS)));\n  resample(P, np, S.X, S.Y, S.n);\n  S.A0 = area(S.X, S.Y, S.n);\n  S.flowT = 0;\n  S.phase = 0;\n  S.pt = 0;\n  S.dur = first ? DRAW0 : DRAW;\n  S.ns = 0;\n  S.rush = 0;\n  curvature(S);\n}\n\n// One explicit step of the flow. Vertex i moves along the normal of the\n// chord from i-1 to i+1 by 2 phi / |chord| per unit time, phi the turning\n// angle at i: that is the curvature, and it makes the area fall by exactly\n// phi, so the whole polygon loses sum(phi) = 2 pi per unit time. A small\n// slide along the same chord evens out the spacing and leaves the area alone.\n// The step is at most 0.3 of the square of the shortest half chord, under the\n// 0.5 where the explicit scheme starts to ring. Returns the time it took.\nfunction step(S, todo) {\n  const { X, Y, VX, VY, TX, TY } = S, n = S.n;\n  let mc = 1e9, ml = 1e9, Ml = 0, L = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    const phi = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n    const cx = X[b] - X[a], cy = Y[b] - Y[a], c2 = cx * cx + cy * cy || 1e-12;\n    const l1 = sqrt(ex * ex + ey * ey), l2 = sqrt(fx * fx + fy * fy), g = (0.3 * (l2 - l1)) / sqrt(c2);\n    VX[i] = (-2 * phi * cy) / c2;\n    VY[i] = (2 * phi * cx) / c2;\n    TX[i] = g * cx;\n    TY[i] = g * cy;\n    if (c2 \u003c mc) mc = c2;\n    if (l2 \u003c ml) ml = l2;\n    if (l2 > Ml) Ml = l2;\n    L += l2;\n  }\n  const h = min(todo, 0.075 * mc);\n  for (let i = 0; i \u003c n; i++) {\n    X[i] += h * VX[i] + TX[i];\n    Y[i] += h * VY[i] + TY[i];\n  }\n  S.ml = ml;\n  S.Ml = Ml;\n  S.L = L;\n  return h;\n}\n\n// Fresh points at even spacing. Points laid on the old edges cut the corners\n// and lose a little area, so every point then steps out along its normal by\n// the area lost over half the sum of the chords, which puts it back to first\n// order: a remesh must not move the area clock. When the curve has shrunk\n// there are fewer points, the spacing near DS until the curve is down to NMIN\n// points; edges squeezed under 0.45 of the spacing at a retracting tip, or\n// stretched past 1.8 along an arc pushing outward, force one.\nfunction remesh(S, force) {\n  const { X, Y } = S, L = perimeter(X, Y, S.n), want = max(NMIN, min(NMAX, round(L / DS)));\n  if (!force && want >= 0.8 * S.n && want \u003c= 1.25 * S.n) return;\n  const A = area(X, Y, S.n), P = S.P, np = S.n;\n  for (let i = 0; i \u003c np; i++) (P[2 * i] = X[i]), (P[2 * i + 1] = Y[i]);\n  S.n = want;\n  resample(P, np, X, Y, want);\n  const n = want, VX = S.VX, VY = S.VY;\n  let half = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0, cx = X[b] - X[a], cy = Y[b] - Y[a], c = sqrt(cx * cx + cy * cy) || 1e-9;\n    VX[i] = cy / c;\n    VY[i] = -cx / c;\n    half += c / 2;\n  }\n  const off = (A - area(X, Y, n)) / half;\n  for (let i = 0; i \u003c n; i++) (X[i] += off * VX[i]), (Y[i] += off * VY[i]);\n  S.ml = S.Ml = L / n;\n}\n\n// Signed curvature, summed over seven neighbours so that straight runs read\n// as zero, and the inflection points: where a run of clearly convex points\n// meets a run of clearly concave ones. Runs that never pass 0.06 radians of\n// turning do not count, so a nearly straight stretch does not flicker.\nfunction curvature(S) {\n  const { X, Y, K, PH } = S, n = S.n;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    PH[i] = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n  }\n  let s = 0;\n  for (let j = -3; j \u003c= 3; j++) s += PH[(j + n) % n];\n  for (let i = 0; i \u003c n; i++) {\n    K[i] = s;\n    s += PH[(i + 4) % n] - PH[(i - 3 + n) % n];\n  }\n  // Runs of one sign, starting where the sign changes.\n  const sg = (v) => (v > 0.025 ? 1 : v \u003c -0.025 ? -1 : 0);\n  let start = -1;\n  for (let i = 0; i \u003c n; i++)\n    if (sg(K[i]) && sg(K[i]) !== sg(K[(i - 1 + n) % n])) {\n      start = i;\n      break;\n    }\n  S.ni = 0;\n  if (start \u003c 0) return;\n  const runs = [];\n  let i = 0;\n  while (i \u003c n) {\n    const p = (start + i) % n, v = sg(K[p]);\n    if (!v) {\n      i++;\n      continue;\n    }\n    let j = i, peak = 0;\n    while (j \u003c n && sg(K[(start + j) % n]) === v) (peak = max(peak, abs(K[(start + j) % n]))), j++;\n    if (peak > 0.06) {\n      const last = runs[runs.length - 1];\n      if (last && last.v === v) last.e = j - 1;\n      else runs.push({ v, b: i, e: j - 1 });\n    }\n    i = j;\n  }\n  if (runs.length > 1 && runs[0].v === runs[runs.length - 1].v) {\n    runs[0].b = runs[runs.length - 1].b - n;\n    runs.pop();\n  }\n  if (runs.length \u003c 2) return;\n  for (let r = 0; r \u003c runs.length && S.ni \u003c 64; r++) {\n    const A = runs[r], B = runs[(r + 1) % runs.length];\n    let e = A.e, b = B.b;\n    if (b \u003c= e) b += n;\n    // The zero crossing between the end of one run and the start of the next.\n    let q = e;\n    for (let t = e; t \u003c b; t++) if (K[(start + t) % n] * A.v > 0 && K[(start + t + 1) % n] * A.v \u003c= 0) q = t;\n    const p0 = (start + q + n) % n, p1 = (p0 + 1) % n, k0 = K[p0], k1 = K[p1];\n    const u = k0 !== k1 ? cl(k0 / (k0 - k1), 0, 1) : 0.5;\n    S.IX[S.ni] = X[p0] + u * (X[p1] - X[p0]);\n    S.IY[S.ni] = Y[p0] + u * (Y[p1] - Y[p0]);\n    S.IQ[S.ni++] = p0;\n  }\n}\n\nfunction snapshot(S) {\n  if (S.ns >= SNAPS) return;\n  const k = max(1, ceil(S.n / SNAPN)), o = S.ns * SNAPN * 2;\n  let m = 0;\n  for (let i = 0; i \u003c S.n && m \u003c SNAPN; i += k, m++) (S.SN[o + 2 * m] = S.X[i]), (S.SN[o + 2 * m + 1] = S.Y[i]);\n  S.SM[S.ns++] = m;\n}\n\nfunction setup(params) {\n  params.s = {\n    X: new Float64Array(NMAX), Y: new Float64Array(NMAX), VX: new Float64Array(NMAX), VY: new Float64Array(NMAX),\n    TX: new Float64Array(NMAX), TY: new Float64Array(NMAX), P: new Float64Array(2 * NMAX), ml: 1, Ml: 1, L: 1,\n    K: new Float64Array(NMAX), PH: new Float64Array(NMAX), IX: new Float64Array(64), IY: new Float64Array(64), IQ: new Int32Array(64), ni: 0,\n    SN: new Float64Array(SNAPS * SNAPN * 2), SM: new Int32Array(SNAPS), ns: 0, rush: 0,\n    n: 0, A0: 1, flowT: 0, phase: 0, pt: 0, dur: DRAW0, kind: -1, wind: 1.5, fx: 32, fy: 64, warm: false,\n    hue: 0, trace: 0.06, speed: 2,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), cov: new Float32Array(W * H),\n    xs: new Float32Array(4 * H * 48), xn: new Int32Array(4 * H), col: new Float32Array(12),\n  };\n}\n\nfunction finish(S) {\n  let cx = 0, cy = 0;\n  for (let i = 0; i \u003c S.n; i++) (cx += S.X[i]), (cy += S.Y[i]);\n  S.fx = cx / S.n;\n  S.fy = cy / S.n;\n  S.phase = 2;\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trace = cl(k[3], 0, 1);\n  const wind = cl(k[2], 2, 3.5);\n  if (!S.warm) {\n    build(S, wind, true);\n    S.warm = true;\n  } else if (abs(wind - S.wind) > 0.2 && S.phase !== 2) build(S, wind, false);\n  // K1: the rest of the flow in 0.6 beats, at a rate fixed when pressed.\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== 2) {\n    if (S.phase === 0) (S.phase = 1), (S.pt = 0), snapshot(S);\n    S.rush = area(S.X, S.Y, S.n) / (2 * PI * 0.6);\n  }\n  const beat = (d * S.speed) / 2;\n  S.pt += beat;\n  if (S.phase === 0 && S.pt >= S.dur) {\n    S.phase = 1;\n    S.pt = 0;\n    snapshot(S);\n  }\n  if (S.phase === 1) {\n    // The area clock: A0 / 2 pi units of flow time spread over LIFE beats.\n    let todo = beat * max(S.A0 / (2 * PI * LIFE), S.rush), guard = 0;\n    while (todo > 1e-9 && guard++ \u003c 400) {\n      const h = step(S, todo), ds = S.L / S.n;\n      todo -= h;\n      S.flowT += h;\n      if (S.ml \u003c 0.45 * ds || S.Ml > 1.8 * ds) remesh(S, true);\n      else if (guard % 10 === 0) remesh(S, false);\n      if (guard % 4 === 0 && area(S.X, S.Y, S.n) \u003c 1.5) break;\n    }\n    remesh(S, false);\n    while (S.ns \u003c SNAPS && S.flowT >= (S.ns * S.A0) / (2 * PI * SNAPS)) snapshot(S);\n    if (area(S.X, S.Y, S.n) \u003c 1.5) finish(S);\n  }\n  if (S.phase !== 2) curvature(S);\n  else if (S.pt >= FLASH) build(S, wind, false);\n}\n\n// Coverage of the inside, anti-aliased: four scanlines per row, each\n// crossing interval added to the LEDs it spans in exact fractions.\nfunction fill(S) {\n  const { X, Y, xs, xn, cov } = S, n = S.n, SUB = 4, CAP = 48;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = i + 1 \u003c n ? i + 1 : 0;\n    let x0 = X[i], y0 = Y[i], x1 = X[j], y1 = Y[j];\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const ys = (s + 0.5) / SUB, c = xn[s];\n      if (c \u003c CAP) {\n        xs[s * CAP + c] = x0 + ((ys - y0) * (x1 - x0)) / (y1 - y0);\n        xn[s] = c + 1;\n      }\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\n// A line from (ax, ay) to (bx, by), about 1.6 LEDs wide, kept at the brighter\n// of its colour and what is already there.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const { R, G, B } = S, dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, dd = sqrt(qx * qx + qy * qy);\n      const v = cl((wide - dd) / 0.55, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      R[p] = max(R[p], cr * v);\n      G[p] = max(G[p], cg * v);\n      B[p] = max(B[p], cb * v);\n    }\n}\n\nfunction dot(S, x, y, r, cr, cg, cb) {\n  const { R, G, B } = S;\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, floor(y + r + 1)); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, floor(x + r + 1)); xx++) {\n      const dd = sqrt((xx + 0.5 - x) ** 2 + (yy + 0.5 - y) ** 2), v = cl((r + 0.5 - dd) / 0.7, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = yy * W + xx;\n      R[p] = R[p] * (1 - v) + cr * v;\n      G[p] = G[p] * (1 - v) + cg * v;\n      B[p] = B[p] * (1 - v) + cb * v;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col, X, Y, K } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // Fill, convex rim, concave rim. Orange to lime fills are kept bright so\n  // they read as colour and not brown or olive.\n  const h = S.hue + 0.58;\n  hsv(h, 0.88, 0.9, col, 0);\n  hsv(h - 0.03, 0.3, 1, col, 3);\n  hsv(h + 0.55, 0.85, 1, col, 6);\n  const tr = S.trace, fillLv = 255 * (1 - 0.82 * tr);\n  if (S.phase === 2) {\n    // The round point: a white ring that opens and fades.\n    const u = S.pt / FLASH, r = 1 + 9 * sm(u), a = 255 * (1 - u) * (1 - u);\n    for (let i = 0; i \u003c 48; i++) {\n      const t0 = (2 * PI * i) / 48, t1 = (2 * PI * (i + 1)) / 48;\n      line(S, S.fx + r * cos(t0), S.fy + r * sin(t0), S.fx + r * cos(t1), S.fy + r * sin(t1), a, a, a * 0.95, 0.9);\n    }\n    if (u \u003c 0.3) dot(S, S.fx, S.fy, 1.2, 255, 255, 255);\n  } else {\n    const drawing = S.phase === 0, u = drawing ? S.pt / S.dur : 1;\n    const shown = drawing ? floor(n * sm(u / 0.72)) : n, fa = drawing ? sm((u - 0.55) / 0.4) : 1;\n    // Earlier outlines, the chronophotograph that Trace keeps.\n    if (tr > 0.1 && S.phase === 1) {\n      const lv = 255 * 0.75 * sm((tr - 0.1) / 0.5);\n      for (let s = 0; s \u003c S.ns; s++) {\n        const m = S.SM[s], o = s * SNAPN * 2, f = 0.3 + (0.7 * (s + 1)) / S.ns;\n        for (let i = 0; i \u003c m; i++) {\n          const j = (i + 1) % m;\n          line(S, S.SN[o + 2 * i], S.SN[o + 2 * i + 1], S.SN[o + 2 * j], S.SN[o + 2 * j + 1], col[3] * lv * f * 0.75, col[4] * lv * f * 0.75, col[5] * lv * f * 0.75, 0.75);\n        }\n      }\n    }\n    if (fa > 0) {\n      fill(S);\n      for (let p = 0; p \u003c W * H; p++) {\n        const c = min(1, cov[p]) * fa * fillLv;\n        if (c \u003c= 0) continue;\n        R[p] += col[0] * c;\n        G[p] += col[1] * c;\n        B[p] += col[2] * c;\n      }\n    }\n    // The rim: pale where the curve bends outward, the second colour where\n    // it bends inward. The inflection points sit where the two meet.\n    for (let i = 0; i \u003c shown; i++) {\n      const j = i + 1 \u003c n ? i + 1 : 0, t = cl((K[i] + K[j]) * 6, -1, 1), a = (1 + t) / 2;\n      const cr = 255 * (col[3] * a + col[6] * (1 - a)), cg = 255 * (col[4] * a + col[7] * (1 - a)), cb = 255 * (col[5] * a + col[8] * (1 - a));\n      line(S, X[i], Y[i], X[j], Y[j], cr, cg, cb, drawing && i > shown - 6 ? 1.2 : 0.9);\n    }\n    // White marks at the inflection points: a dark ring round a white core.\n    for (let q = 0; q \u003c S.ni; q++) {\n      if (S.IQ[q] >= shown) continue;\n      dot(S, S.IX[q], S.IY[q], 1.6, 0, 0, 0);\n      dot(S, S.IX[q], S.IY[q], 0.8, 255, 255, 255);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-curve-shortening","type":"code","name":"curve-shortening","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Curve Shortening\n// Family:  line\n// Idea:    One tangled closed curve at a time, a thick spiral, a folded worm, a many-armed star or a double coil, moves every point along its normal at the speed of its curvature, so it unwinds without ever touching itself, rounds off into a circle and shrinks to a point, losing area at exactly 2 pi per unit of flow time, while the white marks at its inflection points meet and die in pairs.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: curve-shortening flow, Grayson's theorem (Matthew Grayson, 1987), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1\n//\n// Knob 1: Hue. The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it.\n// Knob 2: Speed. At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long.\n// Knob 3: Wind. How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve.\n// Knob 4: Trace. At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline.\n// Buttons: K1 tap runs the rest of the flow in 0.6 seconds (at Speed 2), so the curve races to its round point, and the next curve follows.\n\nconst W = 64, H = 128, NMAX = 1500, NMIN = 28, SNAPS = 10, SNAPN = 180;\n// Flow time is in LEDs squared: the area falls 2 pi of them per unit. A curve\n// lives LIFE beats of the clock; a beat is a second at Speed 2.\nconst LIFE = 5.6, DRAW0 = 1.9, DRAW = 0.95, FLASH = 0.6, DS = 1.3;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, random, PI, ceil } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// ---- Shapes. Each is a centre line with a band width, or a polygon. ----\n\nfunction seg(out, x0, y0, x1, y1) {\n  const k = max(1, ceil(sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) / 0.5));\n  for (let i = 0; i \u003c k; i++) out.push(x0 + ((x1 - x0) * i) / k, y0 + ((y1 - y0) * i) / k);\n}\n\n// A spiral on a stadium: half turns over the top and under the bottom, 2h\n// apart, joined by straight runs. Each half turn is a true semicircle, the\n// top ones centred on cx with radius r0 + k p, the bottom ones half a pitch\n// to the right with radius r0 + (k + 1/2) p, so the arcs meet the runs with\n// no corner and the band gains p every turn. It uses the tall panel the way\n// a round spiral cannot.\nfunction spiral(T) {\n  const p = 57 / (2 * T + 0.2), w = 0.45 * p, r0 = w / 2 + 1.5, h = 30, cx = 32, cy = 64, C = [];\n  const halves = 2 * T;\n  seg(C, cx + r0, cy + h, cx + r0, cy - h);\n  for (let k = 0; k \u003c halves; k++) {\n    const top = k % 2 === 0, R = r0 + (k * p) / 2, xc = top ? cx : cx + p / 2, yc = top ? cy - h : cy + h;\n    const f1 = min(PI, (halves - k) * PI);\n    for (let f = 0; f \u003c f1; f += 0.6 / R) C.push(xc + (top ? 1 : -1) * R * cos(f), yc + (top ? -1 : 1) * R * sin(f));\n    const x = xc + (top ? 1 : -1) * R * cos(f1);\n    if (f1 \u003c PI) C.push(x, yc + (top ? -1 : 1) * R * sin(f1));\n    else seg(C, x, yc, x, top ? cy + h : cy - h);\n  }\n  return { C, w };\n}\n\n// Two round spirals, one over the other, joined through the middle of the\n// panel as an S: the outer end of the upper one meets its mirror image there.\nfunction coils(T) {\n  const k = T \u003c 2.5 ? 2 : 3, p = 28.5 / (k + 0.55), w = 0.62 * p, r0 = 0.3 * p + 1.5, F = 2 * PI * k + PI / 2;\n  const Rm = r0 + (p * F) / (2 * PI), cyA = 64 - Rm, A = [];\n  for (let f = 0; f \u003c F; f += 0.03) {\n    const r = r0 + (p * f) / (2 * PI);\n    A.push(32 + r * cos(f), cyA + r * sin(f));\n  }\n  const C = A.slice();\n  C.push(32, 64);\n  for (let i = A.length - 2; i >= 0; i -= 2) C.push(64 - A[i], 128 - A[i + 1]);\n  return { C, w };\n}\n\n// A worm folded into m runs across the panel, joined by hairpin bends.\nfunction worm(T) {\n  const m = 2 + round(2 * T), p = 118 / m, w = 0.6 * p, xl = 3 + p / 2 + w / 2, xr = 61 - p / 2 - w / 2, C = [];\n  for (let j = 0; j \u003c m; j++) {\n    const y = 5 + p / 2 + j * p, right = j % 2 === 0;\n    seg(C, right ? xl : xr, y, right ? xr : xl, y);\n    if (j === m - 1) {\n      C.push(right ? xr : xl, y);\n      break;\n    }\n    const xc = right ? xr : xl, yc = y + p / 2;\n    for (let a = 0; a \u003c PI; a += 0.06) C.push(xc + (right ? 1 : -1) * (p / 2) * sin(a), yc - (p / 2) * cos(a));\n  }\n  return { C, w };\n}\n\n// A star: r(t) = R (0.34 + 0.66 g(k t)), one arm per lobe of g, stretched\n// 1.45 times up the panel. Being a graph over the angle, before and after the\n// stretch, it cannot cross itself.\nfunction star(T) {\n  const k = 2 + round(2 * T), R = 29.5, P = [];\n  for (let i = 0; i \u003c 2400; i++) {\n    const t = (2 * PI * i) / 2400, g = ((1 + cos(k * t)) / 2) ** 1.7, r = R * (0.34 + 0.66 * g);\n    P.push(32 + r * sin(t), 64 - 1.45 * r * cos(t));\n  }\n  return P;\n}\n\n// The outline of a band of width w round a centre line, with round ends.\nfunction band(C, w) {\n  const m = C.length >> 1, L = [], Rt = [], hw = w / 2;\n  const nrm = (i) => {\n    const a = max(0, i - 1), b = min(m - 1, i + 1);\n    let tx = C[2 * b] - C[2 * a], ty = C[2 * b + 1] - C[2 * a + 1];\n    const l = sqrt(tx * tx + ty * ty) || 1;\n    return [tx / l, ty / l];\n  };\n  for (let i = 0; i \u003c m; i++) {\n    const [tx, ty] = nrm(i);\n    L.push(C[2 * i] - ty * hw, C[2 * i + 1] + tx * hw);\n    Rt.push(C[2 * i] + ty * hw, C[2 * i + 1] - tx * hw);\n  }\n  const P = L.slice();\n  const cap = (i, s) => {\n    const [tx, ty] = nrm(i), nx = -ty, ny = tx;\n    for (let a = 0.12; a \u003c PI; a += 0.12) {\n      const c = cos(a), d = sin(a);\n      P.push(C[2 * i] + s * hw * (c * nx + d * tx), C[2 * i + 1] + s * hw * (c * ny + d * ty));\n    }\n  };\n  cap(m - 1, 1);\n  for (let i = m - 1; i >= 0; i--) P.push(Rt[2 * i], Rt[2 * i + 1]);\n  cap(0, -1);\n  return P;\n}\n\nfunction area(X, Y, n) {\n  let a = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) a += X[j] * Y[i] - X[i] * Y[j];\n  return a / 2;\n}\n\n// Put n points round the closed polygon P at equal steps of arc length,\n// wound so that the area comes out positive.\nfunction resample(P, np, X, Y, n) {\n  const m = np, len = new Float64Array(m + 1);\n  for (let i = 0; i \u003c m; i++) {\n    const j = (i + 1) % m;\n    len[i + 1] = len[i] + sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  const L = len[m];\n  let s = 0;\n  for (let k = 0; k \u003c n; k++) {\n    const target = (L * k) / n;\n    while (s \u003c m - 1 && len[s + 1] \u003c target) s++;\n    const j = (s + 1) % m, u = (target - len[s]) / (len[s + 1] - len[s] || 1);\n    X[k] = P[2 * s] + u * (P[2 * j] - P[2 * s]);\n    Y[k] = P[2 * s + 1] + u * (P[2 * j + 1] - P[2 * s + 1]);\n  }\n  if (area(X, Y, n) \u003c 0)\n    for (let a = 0, b = n - 1; a \u003c b; a++, b--) {\n      let t = X[a];\n      X[a] = X[b];\n      X[b] = t;\n      t = Y[a];\n      Y[a] = Y[b];\n      Y[b] = t;\n    }\n  return L;\n}\n\nfunction perimeter(X, Y, n) {\n  let L = 0;\n  for (let i = 0, j = n - 1; i \u003c n; j = i++) L += sqrt((X[i] - X[j]) ** 2 + (Y[i] - Y[j]) ** 2);\n  return L;\n}\n\n// A new curve: the spiral first, then any of the four but the one just\n// shown, at 70 to 100% size somewhere on the panel, mirrored at random.\nfunction build(S, wind, first) {\n  let kind = 0;\n  if (!first) {\n    kind = floor(random() * 4);\n    if (kind === S.kind) kind = (kind + 1 + floor(random() * 3)) % 4;\n  }\n  S.kind = kind;\n  S.wind = wind;\n  let P;\n  if (kind === 1) P = star(wind);\n  else {\n    const { C, w } = kind === 0 ? spiral(wind) : kind === 2 ? worm(wind) : coils(wind);\n    P = band(C, w);\n  }\n  const sc = first ? 1 : 0.7 + 0.3 * random(), fx = random() \u003c 0.5 ? -1 : 1, fy = random() \u003c 0.5 ? -1 : 1;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let i = 0; i \u003c P.length; i += 2) {\n    P[i] = 32 + fx * sc * (P[i] - 32);\n    P[i + 1] = 64 + fy * sc * (P[i + 1] - 64);\n    x0 = min(x0, P[i]);\n    x1 = max(x1, P[i]);\n    y0 = min(y0, P[i + 1]);\n    y1 = max(y1, P[i + 1]);\n  }\n  // The first curve stands in the middle; later ones slide anywhere they\n  // still fit between 1.5 and 62.5 across, 1.5 and 126.5 down.\n  const dx = first ? 32 - (x0 + x1) / 2 : 1.5 - x0 + random() * max(0, 61 - (x1 - x0));\n  const dy = first ? 64 - (y0 + y1) / 2 : 1.5 - y0 + random() * max(0, 125 - (y1 - y0));\n  for (let i = 0; i \u003c P.length; i += 2) (P[i] += dx), (P[i + 1] += dy);\n  const np = P.length >> 1;\n  let L = 0;\n  for (let i = 0; i \u003c np; i++) {\n    const j = (i + 1) % np;\n    L += sqrt((P[2 * j] - P[2 * i]) ** 2 + (P[2 * j + 1] - P[2 * i + 1]) ** 2);\n  }\n  S.n = min(NMAX, max(NMIN, round(L / DS)));\n  resample(P, np, S.X, S.Y, S.n);\n  S.A0 = area(S.X, S.Y, S.n);\n  S.flowT = 0;\n  S.phase = 0;\n  S.pt = 0;\n  S.dur = first ? DRAW0 : DRAW;\n  S.ns = 0;\n  S.rush = 0;\n  curvature(S);\n}\n\n// One explicit step of the flow. Vertex i moves along the normal of the\n// chord from i-1 to i+1 by 2 phi / |chord| per unit time, phi the turning\n// angle at i: that is the curvature, and it makes the area fall by exactly\n// phi, so the whole polygon loses sum(phi) = 2 pi per unit time. A small\n// slide along the same chord evens out the spacing and leaves the area alone.\n// The step is at most 0.3 of the square of the shortest half chord, under the\n// 0.5 where the explicit scheme starts to ring. Returns the time it took.\nfunction step(S, todo) {\n  const { X, Y, VX, VY, TX, TY } = S, n = S.n;\n  let mc = 1e9, ml = 1e9, Ml = 0, L = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    const phi = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n    const cx = X[b] - X[a], cy = Y[b] - Y[a], c2 = cx * cx + cy * cy || 1e-12;\n    const l1 = sqrt(ex * ex + ey * ey), l2 = sqrt(fx * fx + fy * fy), g = (0.3 * (l2 - l1)) / sqrt(c2);\n    VX[i] = (-2 * phi * cy) / c2;\n    VY[i] = (2 * phi * cx) / c2;\n    TX[i] = g * cx;\n    TY[i] = g * cy;\n    if (c2 \u003c mc) mc = c2;\n    if (l2 \u003c ml) ml = l2;\n    if (l2 > Ml) Ml = l2;\n    L += l2;\n  }\n  const h = min(todo, 0.075 * mc);\n  for (let i = 0; i \u003c n; i++) {\n    X[i] += h * VX[i] + TX[i];\n    Y[i] += h * VY[i] + TY[i];\n  }\n  S.ml = ml;\n  S.Ml = Ml;\n  S.L = L;\n  return h;\n}\n\n// Fresh points at even spacing. Points laid on the old edges cut the corners\n// and lose a little area, so every point then steps out along its normal by\n// the area lost over half the sum of the chords, which puts it back to first\n// order: a remesh must not move the area clock. When the curve has shrunk\n// there are fewer points, the spacing near DS until the curve is down to NMIN\n// points; edges squeezed under 0.45 of the spacing at a retracting tip, or\n// stretched past 1.8 along an arc pushing outward, force one.\nfunction remesh(S, force) {\n  const { X, Y } = S, L = perimeter(X, Y, S.n), want = max(NMIN, min(NMAX, round(L / DS)));\n  if (!force && want >= 0.8 * S.n && want \u003c= 1.25 * S.n) return;\n  const A = area(X, Y, S.n), P = S.P, np = S.n;\n  for (let i = 0; i \u003c np; i++) (P[2 * i] = X[i]), (P[2 * i + 1] = Y[i]);\n  S.n = want;\n  resample(P, np, X, Y, want);\n  const n = want, VX = S.VX, VY = S.VY;\n  let half = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0, cx = X[b] - X[a], cy = Y[b] - Y[a], c = sqrt(cx * cx + cy * cy) || 1e-9;\n    VX[i] = cy / c;\n    VY[i] = -cx / c;\n    half += c / 2;\n  }\n  const off = (A - area(X, Y, n)) / half;\n  for (let i = 0; i \u003c n; i++) (X[i] += off * VX[i]), (Y[i] += off * VY[i]);\n  S.ml = S.Ml = L / n;\n}\n\n// Signed curvature, summed over seven neighbours so that straight runs read\n// as zero, and the inflection points: where a run of clearly convex points\n// meets a run of clearly concave ones. Runs that never pass 0.06 radians of\n// turning do not count, so a nearly straight stretch does not flicker.\nfunction curvature(S) {\n  const { X, Y, K, PH } = S, n = S.n;\n  for (let i = 0; i \u003c n; i++) {\n    const a = i ? i - 1 : n - 1, b = i + 1 \u003c n ? i + 1 : 0;\n    const ex = X[i] - X[a], ey = Y[i] - Y[a], fx = X[b] - X[i], fy = Y[b] - Y[i];\n    PH[i] = atan2(ex * fy - ey * fx, ex * fx + ey * fy);\n  }\n  let s = 0;\n  for (let j = -3; j \u003c= 3; j++) s += PH[(j + n) % n];\n  for (let i = 0; i \u003c n; i++) {\n    K[i] = s;\n    s += PH[(i + 4) % n] - PH[(i - 3 + n) % n];\n  }\n  // Runs of one sign, starting where the sign changes.\n  const sg = (v) => (v > 0.025 ? 1 : v \u003c -0.025 ? -1 : 0);\n  let start = -1;\n  for (let i = 0; i \u003c n; i++)\n    if (sg(K[i]) && sg(K[i]) !== sg(K[(i - 1 + n) % n])) {\n      start = i;\n      break;\n    }\n  S.ni = 0;\n  if (start \u003c 0) return;\n  const runs = [];\n  let i = 0;\n  while (i \u003c n) {\n    const p = (start + i) % n, v = sg(K[p]);\n    if (!v) {\n      i++;\n      continue;\n    }\n    let j = i, peak = 0;\n    while (j \u003c n && sg(K[(start + j) % n]) === v) (peak = max(peak, abs(K[(start + j) % n]))), j++;\n    if (peak > 0.06) {\n      const last = runs[runs.length - 1];\n      if (last && last.v === v) last.e = j - 1;\n      else runs.push({ v, b: i, e: j - 1 });\n    }\n    i = j;\n  }\n  if (runs.length > 1 && runs[0].v === runs[runs.length - 1].v) {\n    runs[0].b = runs[runs.length - 1].b - n;\n    runs.pop();\n  }\n  if (runs.length \u003c 2) return;\n  for (let r = 0; r \u003c runs.length && S.ni \u003c 64; r++) {\n    const A = runs[r], B = runs[(r + 1) % runs.length];\n    let e = A.e, b = B.b;\n    if (b \u003c= e) b += n;\n    // The zero crossing between the end of one run and the start of the next.\n    let q = e;\n    for (let t = e; t \u003c b; t++) if (K[(start + t) % n] * A.v > 0 && K[(start + t + 1) % n] * A.v \u003c= 0) q = t;\n    const p0 = (start + q + n) % n, p1 = (p0 + 1) % n, k0 = K[p0], k1 = K[p1];\n    const u = k0 !== k1 ? cl(k0 / (k0 - k1), 0, 1) : 0.5;\n    S.IX[S.ni] = X[p0] + u * (X[p1] - X[p0]);\n    S.IY[S.ni] = Y[p0] + u * (Y[p1] - Y[p0]);\n    S.IQ[S.ni++] = p0;\n  }\n}\n\nfunction snapshot(S) {\n  if (S.ns >= SNAPS) return;\n  const k = max(1, ceil(S.n / SNAPN)), o = S.ns * SNAPN * 2;\n  let m = 0;\n  for (let i = 0; i \u003c S.n && m \u003c SNAPN; i += k, m++) (S.SN[o + 2 * m] = S.X[i]), (S.SN[o + 2 * m + 1] = S.Y[i]);\n  S.SM[S.ns++] = m;\n}\n\nfunction setup(params) {\n  params.s = {\n    X: new Float64Array(NMAX), Y: new Float64Array(NMAX), VX: new Float64Array(NMAX), VY: new Float64Array(NMAX),\n    TX: new Float64Array(NMAX), TY: new Float64Array(NMAX), P: new Float64Array(2 * NMAX), ml: 1, Ml: 1, L: 1,\n    K: new Float64Array(NMAX), PH: new Float64Array(NMAX), IX: new Float64Array(64), IY: new Float64Array(64), IQ: new Int32Array(64), ni: 0,\n    SN: new Float64Array(SNAPS * SNAPN * 2), SM: new Int32Array(SNAPS), ns: 0, rush: 0,\n    n: 0, A0: 1, flowT: 0, phase: 0, pt: 0, dur: DRAW0, kind: -1, wind: 1.5, fx: 32, fy: 64, warm: false,\n    hue: 0, trace: 0.06, speed: 2,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), cov: new Float32Array(W * H),\n    xs: new Float32Array(4 * H * 48), xn: new Int32Array(4 * H), col: new Float32Array(12),\n  };\n}\n\nfunction finish(S) {\n  let cx = 0, cy = 0;\n  for (let i = 0; i \u003c S.n; i++) (cx += S.X[i]), (cy += S.Y[i]);\n  S.fx = cx / S.n;\n  S.fy = cy / S.n;\n  S.phase = 2;\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trace = cl(k[3], 0, 1);\n  const wind = cl(k[2], 2, 3.5);\n  if (!S.warm) {\n    build(S, wind, true);\n    S.warm = true;\n  } else if (abs(wind - S.wind) > 0.2 && S.phase !== 2) build(S, wind, false);\n  // K1: the rest of the flow in 0.6 beats, at a rate fixed when pressed.\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== 2) {\n    if (S.phase === 0) (S.phase = 1), (S.pt = 0), snapshot(S);\n    S.rush = area(S.X, S.Y, S.n) / (2 * PI * 0.6);\n  }\n  const beat = (d * S.speed) / 2;\n  S.pt += beat;\n  if (S.phase === 0 && S.pt >= S.dur) {\n    S.phase = 1;\n    S.pt = 0;\n    snapshot(S);\n  }\n  if (S.phase === 1) {\n    // The area clock: A0 / 2 pi units of flow time spread over LIFE beats.\n    let todo = beat * max(S.A0 / (2 * PI * LIFE), S.rush), guard = 0;\n    while (todo > 1e-9 && guard++ \u003c 400) {\n      const h = step(S, todo), ds = S.L / S.n;\n      todo -= h;\n      S.flowT += h;\n      if (S.ml \u003c 0.45 * ds || S.Ml > 1.8 * ds) remesh(S, true);\n      else if (guard % 10 === 0) remesh(S, false);\n      if (guard % 4 === 0 && area(S.X, S.Y, S.n) \u003c 1.5) break;\n    }\n    remesh(S, false);\n    while (S.ns \u003c SNAPS && S.flowT >= (S.ns * S.A0) / (2 * PI * SNAPS)) snapshot(S);\n    if (area(S.X, S.Y, S.n) \u003c 1.5) finish(S);\n  }\n  if (S.phase !== 2) curvature(S);\n  else if (S.pt >= FLASH) build(S, wind, false);\n}\n\n// Coverage of the inside, anti-aliased: four scanlines per row, each\n// crossing interval added to the LEDs it spans in exact fractions.\nfunction fill(S) {\n  const { X, Y, xs, xn, cov } = S, n = S.n, SUB = 4, CAP = 48;\n  cov.fill(0);\n  xn.fill(0);\n  for (let i = 0; i \u003c n; i++) {\n    const j = i + 1 \u003c n ? i + 1 : 0;\n    let x0 = X[i], y0 = Y[i], x1 = X[j], y1 = Y[j];\n    if (y0 === y1) continue;\n    if (y0 > y1) [x0, y0, x1, y1] = [x1, y1, x0, y0];\n    const s0 = max(0, ceil(y0 * SUB - 0.5)), s1 = min(H * SUB - 1, ceil(y1 * SUB - 0.5) - 1);\n    for (let s = s0; s \u003c= s1; s++) {\n      const ys = (s + 0.5) / SUB, c = xn[s];\n      if (c \u003c CAP) {\n        xs[s * CAP + c] = x0 + ((ys - y0) * (x1 - x0)) / (y1 - y0);\n        xn[s] = c + 1;\n      }\n    }\n  }\n  for (let s = 0; s \u003c H * SUB; s++) {\n    const c = xn[s], o = s * CAP, row = floor(s / SUB) * W;\n    if (c \u003c 2) continue;\n    for (let a = 1; a \u003c c; a++) {\n      const v = xs[o + a];\n      let b = a - 1;\n      while (b >= 0 && xs[o + b] > v) (xs[o + b + 1] = xs[o + b]), b--;\n      xs[o + b + 1] = v;\n    }\n    for (let a = 0; a + 1 \u003c c; a += 2) {\n      const xa = cl(xs[o + a], 0, W), xb = cl(xs[o + a + 1], 0, W);\n      if (xb \u003c= xa) continue;\n      const ia = floor(xa), ib = min(W - 1, floor(xb));\n      if (ia === ib) cov[row + ia] += (xb - xa) / SUB;\n      else {\n        cov[row + ia] += (ia + 1 - xa) / SUB;\n        for (let x = ia + 1; x \u003c ib; x++) cov[row + x] += 1 / SUB;\n        if (ib \u003c W) cov[row + ib] += (xb - ib) / SUB;\n      }\n    }\n  }\n}\n\n// A line from (ax, ay) to (bx, by), about 1.6 LEDs wide, kept at the brighter\n// of its colour and what is already there.\nfunction line(S, ax, ay, bx, by, cr, cg, cb, wide) {\n  const { R, G, B } = S, dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-9;\n  const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n  const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = cl((px * dx + py * dy) / l2, 0, 1);\n      const qx = px - t * dx, qy = py - t * dy, dd = sqrt(qx * qx + qy * qy);\n      const v = cl((wide - dd) / 0.55, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = y * W + x;\n      R[p] = max(R[p], cr * v);\n      G[p] = max(G[p], cg * v);\n      B[p] = max(B[p], cb * v);\n    }\n}\n\nfunction dot(S, x, y, r, cr, cg, cb) {\n  const { R, G, B } = S;\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, floor(y + r + 1)); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, floor(x + r + 1)); xx++) {\n      const dd = sqrt((xx + 0.5 - x) ** 2 + (yy + 0.5 - y) ** 2), v = cl((r + 0.5 - dd) / 0.7, 0, 1);\n      if (v \u003c= 0) continue;\n      const p = yy * W + xx;\n      R[p] = R[p] * (1 - v) + cr * v;\n      G[p] = G[p] * (1 - v) + cg * v;\n      B[p] = B[p] * (1 - v) + cb * v;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, cov, col, X, Y, K } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // Fill, convex rim, concave rim. Orange to lime fills are kept bright so\n  // they read as colour and not brown or olive.\n  const h = S.hue + 0.58;\n  hsv(h, 0.88, 0.9, col, 0);\n  hsv(h - 0.03, 0.3, 1, col, 3);\n  hsv(h + 0.55, 0.85, 1, col, 6);\n  const tr = S.trace, fillLv = 255 * (1 - 0.82 * tr);\n  if (S.phase === 2) {\n    // The round point: a white ring that opens and fades.\n    const u = S.pt / FLASH, r = 1 + 9 * sm(u), a = 255 * (1 - u) * (1 - u);\n    for (let i = 0; i \u003c 48; i++) {\n      const t0 = (2 * PI * i) / 48, t1 = (2 * PI * (i + 1)) / 48;\n      line(S, S.fx + r * cos(t0), S.fy + r * sin(t0), S.fx + r * cos(t1), S.fy + r * sin(t1), a, a, a * 0.95, 0.9);\n    }\n    if (u \u003c 0.3) dot(S, S.fx, S.fy, 1.2, 255, 255, 255);\n  } else {\n    const drawing = S.phase === 0, u = drawing ? S.pt / S.dur : 1;\n    const shown = drawing ? floor(n * sm(u / 0.72)) : n, fa = drawing ? sm((u - 0.55) / 0.4) : 1;\n    // Earlier outlines, the chronophotograph that Trace keeps.\n    if (tr > 0.1 && S.phase === 1) {\n      const lv = 255 * 0.75 * sm((tr - 0.1) / 0.5);\n      for (let s = 0; s \u003c S.ns; s++) {\n        const m = S.SM[s], o = s * SNAPN * 2, f = 0.3 + (0.7 * (s + 1)) / S.ns;\n        for (let i = 0; i \u003c m; i++) {\n          const j = (i + 1) % m;\n          line(S, S.SN[o + 2 * i], S.SN[o + 2 * i + 1], S.SN[o + 2 * j], S.SN[o + 2 * j + 1], col[3] * lv * f * 0.75, col[4] * lv * f * 0.75, col[5] * lv * f * 0.75, 0.75);\n        }\n      }\n    }\n    if (fa > 0) {\n      fill(S);\n      for (let p = 0; p \u003c W * H; p++) {\n        const c = min(1, cov[p]) * fa * fillLv;\n        if (c \u003c= 0) continue;\n        R[p] += col[0] * c;\n        G[p] += col[1] * c;\n        B[p] += col[2] * c;\n      }\n    }\n    // The rim: pale where the curve bends outward, the second colour where\n    // it bends inward. The inflection points sit where the two meet.\n    for (let i = 0; i \u003c shown; i++) {\n      const j = i + 1 \u003c n ? i + 1 : 0, t = cl((K[i] + K[j]) * 6, -1, 1), a = (1 + t) / 2;\n      const cr = 255 * (col[3] * a + col[6] * (1 - a)), cg = 255 * (col[4] * a + col[7] * (1 - a)), cb = 255 * (col[5] * a + col[8] * (1 - a));\n      line(S, X[i], Y[i], X[j], Y[j], cr, cg, cb, drawing && i > shown - 6 ? 1.2 : 0.9);\n    }\n    // White marks at the inflection points: a dark ring round a white core.\n    for (let q = 0; q \u003c S.ni; q++) {\n      if (S.IQ[q] >= shown) continue;\n      dot(S, S.IX[q], S.IY[q], 1.6, 0, 0, 0);\n      dot(S, S.IX[q], S.IY[q], 0.8, 255, 255, 255);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wind=2..3.5, Trace=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the filled curve, once round the wheel. At 0 the fill is azure, with a pale sky rim where the curve bends outward and a gold rim where it bends inward; at 0.2 violet, at 0.3 pink, at 0.4 red, at 0.5 orange, at 0.6 yellow, at 0.75 green, at 0.9 teal. The two rim colours turn with it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first curve is drawn round and filled in 1.9 seconds, later ones in 0.95, and each then flows to its point in 5.6 seconds whatever its size, since the area falls at the same rate the whole way; a white ring opens at the point for 0.6 seconds and the next curve starts. At 0.2 all of it takes ten times as long, at 3 two thirds as long."},{"name":"Wind","min":2,"max":3.5,"about":"How tangled each new curve is. At 2 the spiral makes 2 turns of a band 6 LEDs wide with 7-LED gaps, the worm folds into 6 runs, the star has 6 arms and the double coil 2 turns each way; at 2.75 the spiral makes 2.75 turns, the worm 8 runs, the star 8 arms and the coils 3 turns; at 3.5 the spiral makes 3.5 turns of a band under 4 LEDs wide with 4-LED gaps, the worm 9 runs, the star 9 arms. Turning it more than 0.2 starts a fresh curve."},{"name":"Trace","min":0,"max":1,"about":"At 0 the inside is filled to 0.9 of full brightness. Turning it up dims the fill, to a fifth at 1, and keeps the outline as it was at each tenth of the curve's life, so each kept outline holds a tenth of the first area less than the one before. At 1 they nest behind the curve: far apart at the tips of the arms, where the curvature is high and the flow fast, and crossing where a concave arc has pushed outward past an older outline."}],"start":[0,2,2,0.06],"measures":{"motion":0.2037,"detail":0.0249,"edges":0.5796,"complexity":0.2104,"coverage":0.1942,"colour":0.2439,"drift":0.3752},"knobResponse":[0.229,0.2408,0.2872,0.1241]},{"slug":"cushion-mesh","title":"Cushion Mesh","family":"cosmetic","round":32,"note":"쿠션 팩트의 망사를 몇 밀리미터 앞에서 봐요. 1 LED 마다 검은 실과 장밋빛 구멍이 번갈아 서고, 보이지 않는 퍼프가 0.5초마다 지름 28 LED 쯤의 자국을 찍으면 그 안의 구멍 78% 에 흰 파운데이션 방울이 맺혀요. 방울은 연어색으로 물들었다가 자국 가장자리부터 빨려 들어가고, 판에는 늘 769개가 남아요.","idea":"The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.","buttons":"K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Cushion Mesh\n// Family:  cosmetic\n// Idea:    The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the mesh net of a cushion compact\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1\n//\n// Knob 1: Hue. The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac.\n// Knob 2: Speed. At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s.\n// Knob 3: Press. How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel.\n// Knob 4: Puff. The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width.\n// Buttons: K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, exp, atan2, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The mesh is a one-LED checker: the threads (x + y odd) are black, the\n// holes show the soaked sponge at level 40, and a bead is a hole at 255. So\n// every pair of neighbours is a thread and a hole, 40 apart or 255 apart, and\n// the share of beads alone sets the measured edges: 769 beads give 0.190.\n// Beads only form off the panel's edge, where each has four threads round it.\nconst HOLES = [];\nfor (let y = 1; y \u003c H - 1; y++) for (let x = 2 - (y & 1); x \u003c W - 1; x += 2) HOLES.push(y * W + x);\nconst BEADS = 769;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, press: 0, puff: 0.06, warm: false, flood: 0, extra: 0, clock: 0,\n    dabT: 99, dab: null,\n    thr: new Float32Array(N), life: new Float32Array(N), life0: new Float32Array(N), wet: new Float32Array(N),\n    P: new Float32Array(N), bead: new Uint8Array(N), list: [], c: [0, 0, 0],\n  };\n  const S = params.s;\n  // How readily each hole lets the foundation through.\n  for (const p of HOLES) S.thr[p] = random();\n}\n\nfunction newDab(S) {\n  // The puff goes where the mesh is driest: the best of ten tries, scored by\n  // the beads and wet holes under it.\n  const r = 13 + 14 * S.puff;\n  let bx = 32, by = 64, best = 1e9;\n  for (let k = 0; k \u003c 10; k++) {\n    const x = r * 0.5 + random() * (W - r), y = r * 0.5 + random() * (H - r);\n    let score = 0;\n    for (let v = -r; v \u003c= r; v += 3)\n      for (let u = -r; u \u003c= r; u += 3) {\n        const px = round(x + u), py = round(y + v);\n        if (u * u + v * v > r * r || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n        const q = py * W + px - ((px + py) & 1);\n        score += S.bead[q] + 0.3 * S.wet[q];\n      }\n    if (score \u003c best) (best = score), (bx = x), (by = y);\n  }\n  S.dab = { x: bx, y: by, r, w1: random() * 6.28, w2: random() * 6.28 };\n  S.dabT = 0;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.dabT += ds;\n  if (S.dabT >= 0.5) newDab(S);\n  const t = S.dabT, a = t \u003c 0.12 ? sm(0, 0.12, t) : t \u003c 0.34 ? 1 : 1 - sm(0.34, 0.46, t);\n  const P = S.P;\n  P.fill(0);\n  if (S.dab && a > 0) {\n    // The mark spreads from three quarters of its size as the puff lands,\n    // with a soft rim that wobbles round the edge.\n    const { x: cx, y: cy, r: r0, w1, w2 } = S.dab, r = r0 * (0.75 + 0.25 * a);\n    for (let y = max(1, floor(cy - r - 2)); y \u003c= min(H - 2, cy + r + 2); y++)\n      for (let x = max(1, floor(cx - r - 2)); x \u003c= min(W - 2, cx + r + 2); x++) {\n        const dx = x - cx, dy = y - cy, th = atan2(dy, dx);\n        const e = r * (1 + 0.08 * sin(3 * th + w1) + 0.05 * sin(5 * th + w2));\n        const v = a * (1 - sm(0.7 * e, e, sqrt(dx * dx + dy * dy)));\n        if (v > 0) P[y * W + x] = v;\n      }\n  }\n  if (S.flood > 0) {\n    S.flood = max(0, S.flood - ds);\n    const v = 0.9 * sm(0.5, 0.42, S.flood) * sm(0, 0.08, S.flood);\n    for (const p of HOLES) P[p] = max(P[p], v);\n    if (S.flood === 0) S.extra = 1;\n  } else S.extra = max(0, S.extra - ds / 2.5);\n  const rho = 0.78 * 1.25 ** S.press, L = 4.5 * 1.4 ** S.press, list = S.list;\n  list.length = 0;\n  for (const p of HOLES) {\n    const pv = P[p];\n    if (pv > 0) S.wet[p] = max(S.wet[p], pv);\n    S.wet[p] = max(0, S.wet[p] - ds / 1.5);\n    if (S.bead[p]) {\n      // A bead under the puff is fed; once the puff lifts it waits its turn.\n      if (pv \u003c 0.05) S.life[p] -= ds;\n      if (S.life[p] \u003c= 0) {\n        S.bead[p] = 0;\n        S.wet[p] = 1;\n        continue;\n      }\n      list.push(p);\n    } else if (pv * rho > S.thr[p]) {\n      let q = 1;\n      if (S.dab) {\n        const dx = (p % W) - S.dab.x, dy = floor(p / W) - S.dab.y;\n        q = cl(sqrt(dx * dx + dy * dy) / S.dab.r, 0, 1);\n      }\n      S.bead[p] = 1;\n      S.life[p] = S.life0[p] = L * (0.35 + 0.65 * (1 - q) + 0.25 * random());\n      list.push(p);\n    }\n  }\n  // The mesh holds only so much liquid at the surface. Past that, the beads\n  // nearest their time go back in first, so a mark drains from its rim.\n  const flood = S.flood > 0 ? sm(0.5, 0.42, S.flood) : S.extra;\n  const target = round(BEADS * 2.2 ** S.press * (1 + 2.6 * flood));\n  if (list.length > target) {\n    list.sort((u, v) => S.life[u] - S.life[v]);\n    for (let i = 0; i \u003c list.length - target; i++) {\n      S.bead[list[i]] = 0;\n      S.wet[list[i]] = 1;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.press = cl(k[2], -1, 1);\n  S.puff = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a compact that has been dabbed for three seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.flood === 0) S.flood = 0.5;\n  S.clock += d * S.speed;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, h = S.hue + 0.03;\n  // A band of light slides down across the mesh every 7 s at Speed 2 and\n  // turns the beads in it white; it changes colour only, never level.\n  const u0 = -24 + 196 * ((S.clock / 14) % 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if ((x + y) & 1) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const p = y * W + x, du = (x * 0.8 + y * 0.6 - u0) / 7, g = exp(-du * du);\n      if (S.bead[p]) {\n        const age = cl(1 - S.life[p] / S.life0[p], 0, 1);\n        hsv(h, (0.16 + 0.48 * age) * (1 - 0.85 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n      } else {\n        const w = S.wet[p];\n        hsv(h - 0.02 * w, (0.45 + 0.45 * w) * (1 - 0.6 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 40), round(c[1] * 40), round(c[2] * 40));\n      }\n    }\n}\n","layer":{"id":"layer-cushion-mesh","type":"code","name":"cushion-mesh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cushion Mesh\n// Family:  cosmetic\n// Idea:    The net over a cushion compact seen from a few millimetres, thread and hole every other LED, while an unseen puff dabs it twice a second: under each dab liquid foundation wells up through the holes as glossy one-LED beads, which turn from white to the tint as they wait and are drawn back from the rim of the mark inward, leaving the holes wet and dark until they dry; a band of light slides down across the mesh every seven seconds and whitens the beads it passes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the mesh net of a cushion compact\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1\n//\n// Knob 1: Hue. The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac.\n// Knob 2: Speed. At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s.\n// Knob 3: Press. How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel.\n// Knob 4: Puff. The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width.\n// Buttons: K1 tap presses the whole cushion at once: for half a second foundation comes up through about 70% of the holes on the panel, then drains back to the usual amount over 2.5 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, exp, atan2, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The mesh is a one-LED checker: the threads (x + y odd) are black, the\n// holes show the soaked sponge at level 40, and a bead is a hole at 255. So\n// every pair of neighbours is a thread and a hole, 40 apart or 255 apart, and\n// the share of beads alone sets the measured edges: 769 beads give 0.190.\n// Beads only form off the panel's edge, where each has four threads round it.\nconst HOLES = [];\nfor (let y = 1; y \u003c H - 1; y++) for (let x = 2 - (y & 1); x \u003c W - 1; x += 2) HOLES.push(y * W + x);\nconst BEADS = 769;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, press: 0, puff: 0.06, warm: false, flood: 0, extra: 0, clock: 0,\n    dabT: 99, dab: null,\n    thr: new Float32Array(N), life: new Float32Array(N), life0: new Float32Array(N), wet: new Float32Array(N),\n    P: new Float32Array(N), bead: new Uint8Array(N), list: [], c: [0, 0, 0],\n  };\n  const S = params.s;\n  // How readily each hole lets the foundation through.\n  for (const p of HOLES) S.thr[p] = random();\n}\n\nfunction newDab(S) {\n  // The puff goes where the mesh is driest: the best of ten tries, scored by\n  // the beads and wet holes under it.\n  const r = 13 + 14 * S.puff;\n  let bx = 32, by = 64, best = 1e9;\n  for (let k = 0; k \u003c 10; k++) {\n    const x = r * 0.5 + random() * (W - r), y = r * 0.5 + random() * (H - r);\n    let score = 0;\n    for (let v = -r; v \u003c= r; v += 3)\n      for (let u = -r; u \u003c= r; u += 3) {\n        const px = round(x + u), py = round(y + v);\n        if (u * u + v * v > r * r || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n        const q = py * W + px - ((px + py) & 1);\n        score += S.bead[q] + 0.3 * S.wet[q];\n      }\n    if (score \u003c best) (best = score), (bx = x), (by = y);\n  }\n  S.dab = { x: bx, y: by, r, w1: random() * 6.28, w2: random() * 6.28 };\n  S.dabT = 0;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.dabT += ds;\n  if (S.dabT >= 0.5) newDab(S);\n  const t = S.dabT, a = t \u003c 0.12 ? sm(0, 0.12, t) : t \u003c 0.34 ? 1 : 1 - sm(0.34, 0.46, t);\n  const P = S.P;\n  P.fill(0);\n  if (S.dab && a > 0) {\n    // The mark spreads from three quarters of its size as the puff lands,\n    // with a soft rim that wobbles round the edge.\n    const { x: cx, y: cy, r: r0, w1, w2 } = S.dab, r = r0 * (0.75 + 0.25 * a);\n    for (let y = max(1, floor(cy - r - 2)); y \u003c= min(H - 2, cy + r + 2); y++)\n      for (let x = max(1, floor(cx - r - 2)); x \u003c= min(W - 2, cx + r + 2); x++) {\n        const dx = x - cx, dy = y - cy, th = atan2(dy, dx);\n        const e = r * (1 + 0.08 * sin(3 * th + w1) + 0.05 * sin(5 * th + w2));\n        const v = a * (1 - sm(0.7 * e, e, sqrt(dx * dx + dy * dy)));\n        if (v > 0) P[y * W + x] = v;\n      }\n  }\n  if (S.flood > 0) {\n    S.flood = max(0, S.flood - ds);\n    const v = 0.9 * sm(0.5, 0.42, S.flood) * sm(0, 0.08, S.flood);\n    for (const p of HOLES) P[p] = max(P[p], v);\n    if (S.flood === 0) S.extra = 1;\n  } else S.extra = max(0, S.extra - ds / 2.5);\n  const rho = 0.78 * 1.25 ** S.press, L = 4.5 * 1.4 ** S.press, list = S.list;\n  list.length = 0;\n  for (const p of HOLES) {\n    const pv = P[p];\n    if (pv > 0) S.wet[p] = max(S.wet[p], pv);\n    S.wet[p] = max(0, S.wet[p] - ds / 1.5);\n    if (S.bead[p]) {\n      // A bead under the puff is fed; once the puff lifts it waits its turn.\n      if (pv \u003c 0.05) S.life[p] -= ds;\n      if (S.life[p] \u003c= 0) {\n        S.bead[p] = 0;\n        S.wet[p] = 1;\n        continue;\n      }\n      list.push(p);\n    } else if (pv * rho > S.thr[p]) {\n      let q = 1;\n      if (S.dab) {\n        const dx = (p % W) - S.dab.x, dy = floor(p / W) - S.dab.y;\n        q = cl(sqrt(dx * dx + dy * dy) / S.dab.r, 0, 1);\n      }\n      S.bead[p] = 1;\n      S.life[p] = S.life0[p] = L * (0.35 + 0.65 * (1 - q) + 0.25 * random());\n      list.push(p);\n    }\n  }\n  // The mesh holds only so much liquid at the surface. Past that, the beads\n  // nearest their time go back in first, so a mark drains from its rim.\n  const flood = S.flood > 0 ? sm(0.5, 0.42, S.flood) : S.extra;\n  const target = round(BEADS * 2.2 ** S.press * (1 + 2.6 * flood));\n  if (list.length > target) {\n    list.sort((u, v) => S.life[u] - S.life[v]);\n    for (let i = 0; i \u003c list.length - target; i++) {\n      S.bead[list[i]] = 0;\n      S.wet[list[i]] = 1;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.press = cl(k[2], -1, 1);\n  S.puff = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a compact that has been dabbed for three seconds.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 90; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.flood === 0) S.flood = 0.5;\n  S.clock += d * S.speed;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, h = S.hue + 0.03;\n  // A band of light slides down across the mesh every 7 s at Speed 2 and\n  // turns the beads in it white; it changes colour only, never level.\n  const u0 = -24 + 196 * ((S.clock / 14) % 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if ((x + y) & 1) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const p = y * W + x, du = (x * 0.8 + y * 0.6 - u0) / 7, g = exp(-du * du);\n      if (S.bead[p]) {\n        const age = cl(1 - S.life[p] / S.life0[p], 0, 1);\n        hsv(h, (0.16 + 0.48 * age) * (1 - 0.85 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n      } else {\n        const w = S.wet[p];\n        hsv(h - 0.02 * w, (0.45 + 0.45 * w) * (1 - 0.6 * g), 1, c);\n        display.setPixel(x, y, round(c[0] * 40), round(c[1] * 40), round(c[2] * 40));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Press=-1..1, Puff=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the foundation, once round the wheel. At 0 rose beige: the dry mesh dusky rose, fresh beads near white and older ones salmon; at 0.1 apricot and honey, at 0.3 a green colour corrector, at 0.55 a sky-blue primer, at 0.75 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the puff dabs every 0.5 seconds, each dab down in 0.12 s, held 0.22 s and up in 0.12 s, and a wet hole dries in 1.5 s; at 0.2 a dab every 5 seconds and the beads hardly move; at 3 one every 0.33 s."},{"name":"Press","min":-1,"max":1,"about":"How hard the puff presses. At 0 about 78% of the holes under a dab bead and the mesh holds 769 beads, 9.4% of the panel; at -1 the dabs are light pats that bead 62% of their holes and the mesh holds 350, 4.3% of the panel; at 1, 97% of them bead and the mesh holds 1692, 21% of the panel."},{"name":"Puff","min":0,"max":1,"about":"The size of the dab mark: about 26 LEDs across at 0, 54 at 1, nearly the panel's width."}],"start":[0,2,0,0.06],"measures":{"motion":0.0612,"detail":0.3133,"edges":0.19,"complexity":0.3734,"coverage":0.5,"colour":0.1055,"drift":0.1322},"knobResponse":[0.0477,0.1254,0.1656,0.1397]},{"slug":"cyanotype","title":"Cyanotype","family":"print","round":19,"note":"철염을 바른 종이에 고사리와 깃털, 민들레 씨앗, 레이스를 놓고 햇빛에 구운 뒤 물로 씻어 내리면 프러시안 블루 인화가 드러나요. 마르며 짙어진 인화가 옆으로 밀려 나가면 다음 장이 깔려요.","idea":"A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","layer":{"id":"layer-cyanotype","type":"code","name":"cyanotype","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tone","min":0,"max":1,"about":"The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes."},{"name":"Specimen","min":0,"max":4,"about":"What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order."},{"name":"Exposure","min":-1,"max":1,"about":"How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through."}],"start":[0,2,0,0.06],"measures":{"motion":0.2407,"detail":0.0234,"edges":0.2171,"complexity":1.3748,"coverage":1,"colour":0.239,"drift":0.1842},"knobResponse":[0.1554,0.128,0.0957,0.1334]},{"slug":"dandelin-spheres","title":"Dandelin Spheres","family":"geometry","round":33,"note":"유리 원뿔을 평면이 자른 원뿔곡선 위아래로 당들랭 구 둘이 원뿔에 끼어 평면에 닿아 있어요. 곡선을 도는 점에서 두 초점까지의 거리와 원뿔 모선 위 두 토막이 금색과 분홍으로 짝지어 같은 길이로 보여요. K3 은 평면 기울기로 30도의 타원에서 74도의 포물선을 지나 쌍곡선까지 가고, K1 을 누르면 평면이 11초 동안 똑바로 섰다가 돌아와요.","idea":"A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.","buttons":"K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Dandelin Spheres\n// Family:  geometry\n// Idea:    A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dandelin spheres (Germinal Pierre Dandelin, 1822), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34\n//\n// Knob 1: Hue. Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink.\n// Knob 2: Speed. At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50.\n// Knob 4: Cone. The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34.\n// Buttons: K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, tan, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst RAD = PI / 180;\n\n// World units: the apex at the origin, y up the axis. The plane turns about\n// the horizontal line through (XP, YP) along z, so at 90 degrees it stands\n// 0.3 off the axis and still cuts a hyperbola instead of two crossing lines.\nconst XP = -0.3, YP = 0.95;\n// The cone is cut off at these heights.\nconst YTOP = 2.25, YBOT = -2.4;\n// The plane is drawn where |x| and |z| are under this.\nconst PX = 1.05;\n// Camera: this far from the point it looks at, this many degrees above it.\nconst DIST = 9, ELEV = 28 * RAD;\n// Five lines of the cone, round its axis.\nconst GEN = 5;\n// The opening hue sits here on the wheel: teal.\nconst H0 = 0.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n// How far a hue sits in the orange and yellow that turn brown when shaded.\nconst warm = (h) => {\n  h -= floor(h);\n  return max(0, 1 - abs(h - 0.11) / 0.1);\n};\n\nexport function setup(params) {\n  params.s = {\n    th: 0.6, ph: 0, sw: -1, hue: 0, tilt: 30, cone: 16, speed: 2, lo: -0.25,\n    base: new Float32Array(N * 3), lin: new Float32Array(N * 3),\n    zO: new Float32Array(N), zC: new Float32Array(N), zP: new Float32Array(N),\n    col: new Float32Array(8 * 3), colHue: NaN, sc: {},\n  };\n}\n\n// The scene for a tilt and half-angle in radians: the plane n.p = h with\n// n = (-sin b, cos b, 0), and the two spheres on the axis at heights s with\n// radius |s| sin a. A sphere at s is tangent to the cone, and tangent to the\n// plane when |cos b s - h| = |s| sin a, so s = h / (cos b + sin a), the one\n// between the apex and the plane, and s = h / (cos b - sin a), past the plane\n// while cos b > sin a (an ellipse), at infinity when they are equal (a\n// parabola), and below the apex in the other nappe once sin a is the larger\n// (a hyperbola).\nfunction scene(S, b, a) {\n  const sa = sin(a), ca = cos(a), sb = sin(b), cb = cos(b), h = cb * YP - sb * XP;\n  const sc = S.sc;\n  sc.sa = sa;\n  sc.ca = ca;\n  sc.k = sa / ca;\n  sc.nx = -sb;\n  sc.ny = cb;\n  sc.h = h;\n  sc.s1 = h / (cb + sa);\n  const den = cb - sa;\n  sc.s2 = abs(den) > 1e-4 ? h / den : 1e9;\n  sc.r1 = abs(sc.s1) * sa;\n  sc.r2 = abs(sc.s2) * sa;\n  // A focus is the foot of the perpendicular from a sphere's centre to the\n  // plane; a contact circle is where the sphere meets the cone, at height\n  // s cos^2 a. Along a line of the cone it sits s cos a from the apex.\n  for (const [s, k] of [[sc.s1, 1], [sc.s2, 2]]) {\n    const d = cb * s - h;\n    sc[\"fx\" + k] = -d * sc.nx;\n    sc[\"fy\" + k] = s - d * sc.ny;\n    sc[\"g\" + k] = s * ca;\n  }\n  sc.e = sb / ca;\n}\n\n// The conic as a curve over the cone's azimuth phi: the line of the cone at\n// phi, t (sin a cos phi, cos a, sin a sin phi), meets the plane at\n// t = h / (cos b cos a - sin b sin a cos phi). On a hyperbola t changes sign\n// where that denominator does, and the point crosses to the other nappe.\nfunction conicT(sc, phi) {\n  const den = sc.ny * sc.ca + sc.nx * sc.sa * cos(phi);\n  return abs(den) \u003c 1e-6 ? 1e9 : sc.h / den;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[2], 30, 90);\n  S.cone = cl(k[3], 16, 34);\n  const sp = S.speed / 2;\n  if (input.btnPressed && input.btnPressed[0]) S.sw = 0;\n  let tilt = S.tilt;\n  if (S.sw >= 0) {\n    // Up to upright in 4.5 s, a 2 s rest, and back in 4.5 s, at Speed 2.\n    S.sw += (d * sp) / 11;\n    const u = S.sw, up = u \u003c 0.41 ? sm(u / 0.41) : u \u003c 0.59 ? 1 : 1 - sm((u - 0.59) / 0.41);\n    tilt += (90 - tilt) * up;\n    if (S.sw >= 1) S.sw = -1;\n  }\n  scene(S, tilt * RAD, S.cone * RAD);\n  const sc = S.sc;\n  // The view: level with the ellipse case's spheres while the cut is an\n  // ellipse, widening downwards to take in the other nappe as the eccentricity\n  // passes 0.8 on its way to the hyperbola.\n  const lo = -0.25 - 1.95 * sm((sc.e - 0.8) / 0.3);\n  S.lo += (lo - S.lo) * min(1, d * 3);\n  // The turn hurries past the azimuths where the camera sees the plane edge\n  // on and the conic flattens to a line, and lingers where it lies open.\n  const edgeOn = abs(sc.nx * cos(ELEV) * sin(S.th) + sc.ny * sin(ELEV));\n  S.th += d * sp * ((2 * PI) / 36) * (0.6 + 1.8 * exp(-((edgeOn / 0.18) ** 2)));\n  // The point moves at about 0.55 units a second along the conic. Off the\n  // drawn part of a hyperbola or parabola it skips ahead to where it comes\n  // back in.\n  let left = d * sp * 0.55, guard = 0;\n  while (left > 0 && guard++ \u003c 40) {\n    const t0 = conicT(sc, S.ph), t1 = conicT(sc, S.ph + 0.01);\n    const y0 = t0 * sc.ca;\n    if (y0 > YTOP || y0 \u003c YBOT + 0.1) {\n      S.ph += 0.05;\n      continue;\n    }\n    const x0 = t0 * sc.sa * cos(S.ph), z0 = t0 * sc.sa * sin(S.ph);\n    const x1 = t1 * sc.sa * cos(S.ph + 0.01), z1 = t1 * sc.sa * sin(S.ph + 0.01), y1 = t1 * sc.ca;\n    const ds = Math.hypot(x1 - x0, y1 - y0, z1 - z0) / 0.01;\n    const step = min(left / max(ds, 1e-3), 0.3);\n    S.ph += step;\n    left -= step * ds;\n  }\n  S.ph %= 2 * PI;\n}\n\n// Colours: lower sphere, upper sphere, cone, plane, conic, the two\n// segment colours, white.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0;\n  // The cone and the plane are seen faint, where a warm hue reads olive, so\n  // they lose more of their colour there than the bright parts do.\n  const set = (i, hh, s, v) => {\n    const w = warm(hh);\n    hsv(hh, s * (1 - (i === 2 || i === 3 ? 0.7 : 0.35) * w), v, c, i * 3);\n  };\n  set(0, h, 0.72, 1);\n  set(1, h + 0.2, 0.62, 1);\n  set(2, h + 0.1, 0.55, 1);\n  set(3, h + 0.04, 0.5, 1);\n  set(4, h + 0.62, 0.14, 1);\n  set(5, h + 0.62, 0.6, 1);\n  set(6, h + 0.42, 0.55, 1);\n  set(7, 0, 0, 1);\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.sc.h === undefined) return;\n  if (S.colHue !== S.hue) palette(S);\n  const sc = S.sc, col = S.col, base = S.base, lin = S.lin, zO = S.zO, zC = S.zC, zP = S.zP;\n  const hi = YTOP, lo = S.lo, ty = (hi + lo) / 2;\n  // A wider cone pulls the camera back, by the square root of how much\n  // wider it is than the 16 degree one, so a wide ellipse still fits.\n  const f = (128 * DIST) / ((hi - lo) * cos(ELEV) * sqrt(sc.k / tan(16 * RAD)));\n  // Camera basis. fwd looks at (0, ty, 0) from DIST away, ELEV above.\n  const ce = cos(ELEV), se = sin(ELEV), st = sin(S.th), ct = cos(S.th);\n  const ox = DIST * ce * st, oy = ty + DIST * se, oz = DIST * ce * ct;\n  const fx = -ce * st, fy = -se, fz = -ce * ct;\n  const rx = ct, rz = -st; // right = fwd x up, level\n  const ux = -fy * rz, uy = rz * fx - rx * fz, uz = fy * rx;\n  // The light hangs above and to the left of the camera.\n  let lx = -0.55 * rx + 0.75 * ux - 0.5 * fx, ly = 0.75 * uy - 0.5 * fy, lz = -0.55 * rz + 0.75 * uz - 0.5 * fz;\n  const ll = Math.hypot(lx, ly, lz);\n  lx /= ll;\n  ly /= ll;\n  lz /= ll;\n  const k2 = sc.k * sc.k, nx = sc.nx, ny = sc.ny, h = sc.h;\n  // Each sphere: height, radius, palette slot, and how warm its hue is.\n  const sph = [\n    [sc.s1, sc.r1, 0, warm(S.hue + H0)],\n    [sc.s2, sc.r2, 3, warm(S.hue + H0 + 0.2)],\n  ];\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const v = (63.5 - py) / f, bg = 0.025 + 0.02 * (py / H);\n    for (let px = 0; px \u003c W; px++, p++) {\n      const u = (px - 31.5) / f;\n      const dx = fx + u * rx + v * ux, dy = fy + v * uy, dz = fz + u * rz + v * uz;\n      const dd = dx * dx + dy * dy + dz * dz, il = 1 / sqrt(dd);\n      let r = bg * 0.6, g = bg * 0.75, b = bg * 1.5, tO = 1e9;\n      // The spheres, opaque and lit. They are drawn whole even where they\n      // rise past the cut cone, a ball sitting in a cup.\n      for (let q = 0; q \u003c 2; q++) {\n        const s = sph[q][0], rad = sph[q][1];\n        if (rad \u003c= 0 || abs(s) > 60) continue;\n        const ocy = oy - s, bb = ox * dx + ocy * dy + oz * dz, cc = ox * ox + ocy * ocy + oz * oz - rad * rad, disc = bb * bb - dd * cc;\n        if (disc \u003c= 0) continue;\n        const t = (-bb - sqrt(disc)) / dd;\n        if (t \u003c= 0 || t >= tO) continue;\n        tO = t;\n        const o = sph[q][2];\n        const hx = (ox + t * dx) / rad, hy = (oy + t * dy - s) / rad, hz = (oz + t * dz) / rad;\n        const di = max(0, hx * lx + hy * ly + hz * lz);\n        // Blinn highlight on the half vector between the light and the eye.\n        const vx = lx - dx * il, vy = ly - dy * il, vz = lz - dz * il;\n        const vl = Math.hypot(vx, vy, vz);\n        const hs = max(0, (hx * vx + hy * vy + hz * vz) / vl), spec = hs ** 28 * 0.75;\n        const rim = -(hx * dx + hy * dy + hz * dz) * il;\n        // Orange and yellow go brown in shade, so a warm sphere gets more\n        // fill light and stays gold.\n        const wq = sph[q][3], lit = 0.12 + 0.3 * wq + (0.8 - 0.2 * wq) * di * (0.55 + 0.45 * rim);\n        r = col[o] * lit + spec;\n        g = col[o + 1] * lit + spec;\n        b = col[o + 2] * lit + spec;\n      }\n      zO[p] = tO;\n      // The cone: x^2 + z^2 = k^2 y^2, both nappes. Glass, so each crossing\n      // adds a little light, more where the surface is seen edge on.\n      const A = dx * dx + dz * dz - k2 * dy * dy, B = 2 * (ox * dx + oz * dz - k2 * oy * dy), C = ox * ox + oz * oz - k2 * oy * oy;\n      let tc1 = 1e9, tc2 = 1e9;\n      const disc = B * B - 4 * A * C;\n      if (disc > 0 && abs(A) > 1e-9) {\n        const sq = sqrt(disc);\n        let ta = (-B - sq) / (2 * A), tb = (-B + sq) / (2 * A);\n        if (ta > tb) [ta, tb] = [tb, ta];\n        for (const t of [ta, tb]) {\n          const y = oy + t * dy;\n          if (t > 0 && y \u003c YTOP && y > YBOT) {\n            if (tc1 > 1e8) tc1 = t;\n            else tc2 = t;\n          }\n        }\n      }\n      zC[p] = tc1;\n      // The plane, clipped to a square in x and z and to the cone's height.\n      // It is brighter inside the cone, where it is the conic's own disc, and\n      // lit along its edges.\n      let tp = 1e9, pin = false, pm = 0;\n      const nd = nx * dx + ny * dy;\n      if (abs(nd) > 1e-6) {\n        const t = (h - nx * ox - ny * oy) / nd;\n        if (t > 0 && t \u003c tO) {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz;\n          const m = min(PX - abs(x), PX - abs(z), y - YBOT, YTOP - y);\n          if (m > 0) {\n            tp = t;\n            pin = x * x + z * z \u003c k2 * y * y;\n            pm = (m * f) / t;\n          }\n        }\n      }\n      zP[p] = tp;\n      // The glass layers in front of the opaque hit, far to near: the far\n      // wall of the cone, then the near wall, with the plane wherever it falls.\n      const pa = pin ? 0.2 : 0.12, pe = (pin ? 0.3 : 0.08) + 0.5 * exp(-pm * pm * 0.8);\n      const pos = tp > tc2 ? 0 : tp > tc1 ? 1 : 2;\n      for (let L = 0; L \u003c 3; L++) {\n        const isP = L === pos, t = isP ? tp : (L \u003c pos ? L : L - 1) === 0 ? tc2 : tc1;\n        if (t >= tO || t > 1e8) continue;\n        let a, e, o;\n        if (isP) {\n          a = pa;\n          e = pe;\n          o = 9;\n        } else {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz, gy = -k2 * y, gl = Math.hypot(x, gy, z) || 1;\n          const ci = abs((x * dx + gy * dy + z * dz) / gl) * il, fr = (1 - ci) * (1 - ci);\n          a = 0.06 + 0.2 * fr;\n          e = 0.07 + 0.42 * fr;\n          o = 6;\n        }\n        r = r * (1 - a) + col[o] * e;\n        g = g * (1 - a) + col[o + 1] * e;\n        b = b * (1 - a) + col[o + 2] * e;\n      }\n      base[p * 3] = r;\n      base[p * 3 + 1] = g;\n      base[p * 3 + 2] = b;\n    }\n  }\n\n  // Lines and points, splatted over the shading. Behind a sphere they show\n  // through dimmed, behind the cone's near wall or the plane a little dimmer.\n  lin.fill(0);\n  const ssa = sc.sa, sca = sc.ca;\n  let cr = 0, cg = 0, cb = 0, cw = 0;\n  // A thick line is laid as two strands half an LED either side of its\n  // path on the screen, (tox, toy) apart.\n  let thick = false, tox = 0, toy = 0;\n  const put = (sx, sy, k) => {\n    const ix = floor(sx), iy = floor(sy), ax = sx - ix, ay = sy - iy;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = ix + (j & 1), Y = iy + (j >> 1);\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const wt = k * (j & 1 ? ax : 1 - ax) * (j >> 1 ? ay : 1 - ay), o = (Y * W + X) * 3;\n      lin[o] += cr * wt;\n      lin[o + 1] += cg * wt;\n      lin[o + 2] += cb * wt;\n    }\n  };\n  const splat = (x, y, z, w) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = qx * fx + qy * fy + qz * fz;\n    if (zz \u003c 0.1) return;\n    const sx = 31.5 + (f * (qx * rx + qz * rz)) / zz, sy = 63.5 - (f * (qx * ux + qy * uy + qz * uz)) / zz;\n    if (sx \u003c -2 || sx > W + 1 || sy \u003c -2 || sy > H + 1) return;\n    const ni = cl(Math.round(sy), 0, H - 1) * W + cl(Math.round(sx), 0, W - 1);\n    let k = w;\n    if (zz > zO[ni] + 0.04) k *= 0.38;\n    if (zz > zC[ni] + 0.04) k *= 0.62;\n    if (zz > zP[ni] + 0.03) k *= 0.75;\n    if (!thick) put(sx, sy, k);\n    else {\n      put(sx + tox, sy + toy, k * 0.62);\n      put(sx - tox, sy - toy, k * 0.62);\n    }\n  };\n  const proj = (x, y, z) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = max(0.1, qx * fx + qy * fy + qz * fz);\n    return [(f * (qx * rx + qz * rz)) / zz, (f * (qx * ux + qy * uy + qz * uz)) / zz];\n  };\n  const seg = (ax, ay, az, bx, by, bz) => {\n    const [sx0, sy0] = proj(ax, ay, az), [sx1, sy1] = proj(bx, by, bz);\n    const L = Math.hypot(sx1 - sx0, sy1 - sy0), n = max(1, Math.ceil(L / 0.6)), w = (L / n) * cw;\n    tox = L > 0 ? (-(sy1 - sy0) / L) * 0.55 : 0;\n    toy = L > 0 ? ((sx1 - sx0) / L) * 0.55 : 0;\n    for (let i = 0; i \u003c= n; i++) {\n      const t = i / n;\n      splat(ax + (bx - ax) * t, ay + (by - ay) * t, az + (bz - az) * t, i === 0 || i === n ? w / 2 : w);\n    }\n  };\n  const use = (o, w) => {\n    cr = col[o * 3];\n    cg = col[o * 3 + 1];\n    cb = col[o * 3 + 2];\n    cw = w;\n  };\n  // A point on the line of the cone at azimuth phi, t along it.\n  const gp = (phi, t) => [t * ssa * cos(phi), t * sca, t * ssa * sin(phi)];\n  // The cone's lines through the apex and its two rims.\n  use(2, 0.3);\n  const tTop = YTOP / sca, tBot = YBOT / sca;\n  for (let i = 0; i \u003c GEN; i++) {\n    const phi = (i * 2 * PI) / GEN + 0.3;\n    seg(...gp(phi, tTop), 0, 0, 0);\n    seg(0, 0, 0, ...gp(phi, tBot));\n  }\n  const ring = (y, rad, n) => {\n    let px = rad, pz = 0;\n    for (let i = 1; i \u003c= n; i++) {\n      const a = (i * 2 * PI) / n, qx = rad * cos(a), qz = rad * sin(a);\n      seg(px, y, pz, qx, y, qz);\n      px = qx;\n      pz = qz;\n    }\n  };\n  use(2, 0.5);\n  ring(YTOP, YTOP * sc.k, 72);\n  ring(YBOT, -YBOT * sc.k, 72);\n  // The contact circles, in each sphere's colour, brighter.\n  const okS = (s, r) => r > 0 && abs(s) \u003c 60;\n  use(0, 0.95);\n  if (okS(sc.s1, sc.r1)) ring(sc.g1 * sca, abs(sc.g1 * ssa), 64);\n  use(1, 0.95);\n  if (okS(sc.s2, sc.r2) && sc.g2 * sca \u003c YTOP && sc.g2 * sca > YBOT) ring(sc.g2 * sca, abs(sc.g2 * ssa), 64);\n  // The conic, drawn in pieces wherever it lies inside the cut cone.\n  use(4, 1.35);\n  const NPH = 240;\n  let prev = null;\n  for (let i = 0; i \u003c= NPH; i++) {\n    const phi = (i * 2 * PI) / NPH, t = conicT(sc, phi), y = t * sca;\n    const okp = y \u003c YTOP && y > YBOT;\n    const cur = okp ? gp(phi, t) : null;\n    if (cur && prev && abs(cur[1] - prev[1]) \u003c 1.2) seg(...prev, ...cur);\n    prev = cur;\n  }\n  // The point, its two distances to the foci and the line of the cone\n  // through it, cut where it meets the two contact circles. Each pair in one\n  // colour: PF1 equals the stretch to circle 1, PF2 the stretch to circle 2.\n  const tP = conicT(sc, S.ph), yP = tP * sca;\n  if (yP \u003c YTOP && yP > YBOT) {\n    const [Px, Py, Pz] = gp(S.ph, tP);\n    const clipT = (t) => cl(t, tBot, tTop);\n    thick = true;\n    use(5, 1.5);\n    if (okS(sc.s1, sc.r1)) {\n      seg(Px, Py, Pz, sc.fx1, sc.fy1, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g1)));\n    }\n    use(6, 1.5);\n    if (okS(sc.s2, sc.r2)) {\n      seg(Px, Py, Pz, sc.fx2, sc.fy2, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g2)));\n    } else seg(Px, Py, Pz, ...gp(S.ph, sc.g2 > 0 ? tTop : tBot));\n    thick = false;\n    use(7, 2.2);\n    for (const [ddx, ddy] of [[0, 0], [0.012, 0], [-0.012, 0], [0, 0.012], [0, -0.012]]) splat(Px + ddx, Py + ddy, Pz, 1);\n  }\n  // The foci, white points where the spheres touch the plane.\n  use(7, 1.6);\n  for (const [s, r, fxx, fyy] of [[sc.s1, sc.r1, sc.fx1, sc.fy1], [sc.s2, sc.r2, sc.fx2, sc.fy2]]) {\n    if (!okS(s, r) || fyy > YTOP || fyy \u003c YBOT) continue;\n    for (const [ddx, ddy] of [[0, 0], [0.014, 0], [-0.014, 0], [0, 0.014], [0, -0.014]]) splat(fxx + ddx, fyy + ddy, 0, 1);\n  }\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3;\n      display.setPixel(x, y, cl((base[o] + lin[o]) * 255, 0, 255), cl((base[o + 1] + lin[o + 1]) * 255, 0, 255), cl((base[o + 2] + lin[o + 2]) * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-dandelin-spheres","type":"code","name":"dandelin-spheres","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dandelin Spheres\n// Family:  geometry\n// Idea:    A plane cuts a glass double cone in a conic while the two spheres that touch both the cone and the plane sit in it, each touching the plane at a focus and the cone along a circle, and a point running round the conic lights its two distances to the foci in the same colours as the two equal stretches of the cone's line through it, as the whole scene turns slowly about the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dandelin spheres (Germinal Pierre Dandelin, 1822), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34\n//\n// Knob 1: Hue. Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink.\n// Knob 2: Speed. At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower.\n// Knob 3: Tilt. The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50.\n// Knob 4: Cone. The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34.\n// Buttons: K1 tap swings the plane up to upright and back, through the parabola to the hyperbola and home again, in about 11 s at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, tan, abs, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst RAD = PI / 180;\n\n// World units: the apex at the origin, y up the axis. The plane turns about\n// the horizontal line through (XP, YP) along z, so at 90 degrees it stands\n// 0.3 off the axis and still cuts a hyperbola instead of two crossing lines.\nconst XP = -0.3, YP = 0.95;\n// The cone is cut off at these heights.\nconst YTOP = 2.25, YBOT = -2.4;\n// The plane is drawn where |x| and |z| are under this.\nconst PX = 1.05;\n// Camera: this far from the point it looks at, this many degrees above it.\nconst DIST = 9, ELEV = 28 * RAD;\n// Five lines of the cone, round its axis.\nconst GEN = 5;\n// The opening hue sits here on the wheel: teal.\nconst H0 = 0.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n// How far a hue sits in the orange and yellow that turn brown when shaded.\nconst warm = (h) => {\n  h -= floor(h);\n  return max(0, 1 - abs(h - 0.11) / 0.1);\n};\n\nexport function setup(params) {\n  params.s = {\n    th: 0.6, ph: 0, sw: -1, hue: 0, tilt: 30, cone: 16, speed: 2, lo: -0.25,\n    base: new Float32Array(N * 3), lin: new Float32Array(N * 3),\n    zO: new Float32Array(N), zC: new Float32Array(N), zP: new Float32Array(N),\n    col: new Float32Array(8 * 3), colHue: NaN, sc: {},\n  };\n}\n\n// The scene for a tilt and half-angle in radians: the plane n.p = h with\n// n = (-sin b, cos b, 0), and the two spheres on the axis at heights s with\n// radius |s| sin a. A sphere at s is tangent to the cone, and tangent to the\n// plane when |cos b s - h| = |s| sin a, so s = h / (cos b + sin a), the one\n// between the apex and the plane, and s = h / (cos b - sin a), past the plane\n// while cos b > sin a (an ellipse), at infinity when they are equal (a\n// parabola), and below the apex in the other nappe once sin a is the larger\n// (a hyperbola).\nfunction scene(S, b, a) {\n  const sa = sin(a), ca = cos(a), sb = sin(b), cb = cos(b), h = cb * YP - sb * XP;\n  const sc = S.sc;\n  sc.sa = sa;\n  sc.ca = ca;\n  sc.k = sa / ca;\n  sc.nx = -sb;\n  sc.ny = cb;\n  sc.h = h;\n  sc.s1 = h / (cb + sa);\n  const den = cb - sa;\n  sc.s2 = abs(den) > 1e-4 ? h / den : 1e9;\n  sc.r1 = abs(sc.s1) * sa;\n  sc.r2 = abs(sc.s2) * sa;\n  // A focus is the foot of the perpendicular from a sphere's centre to the\n  // plane; a contact circle is where the sphere meets the cone, at height\n  // s cos^2 a. Along a line of the cone it sits s cos a from the apex.\n  for (const [s, k] of [[sc.s1, 1], [sc.s2, 2]]) {\n    const d = cb * s - h;\n    sc[\"fx\" + k] = -d * sc.nx;\n    sc[\"fy\" + k] = s - d * sc.ny;\n    sc[\"g\" + k] = s * ca;\n  }\n  sc.e = sb / ca;\n}\n\n// The conic as a curve over the cone's azimuth phi: the line of the cone at\n// phi, t (sin a cos phi, cos a, sin a sin phi), meets the plane at\n// t = h / (cos b cos a - sin b sin a cos phi). On a hyperbola t changes sign\n// where that denominator does, and the point crosses to the other nappe.\nfunction conicT(sc, phi) {\n  const den = sc.ny * sc.ca + sc.nx * sc.sa * cos(phi);\n  return abs(den) \u003c 1e-6 ? 1e9 : sc.h / den;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[2], 30, 90);\n  S.cone = cl(k[3], 16, 34);\n  const sp = S.speed / 2;\n  if (input.btnPressed && input.btnPressed[0]) S.sw = 0;\n  let tilt = S.tilt;\n  if (S.sw >= 0) {\n    // Up to upright in 4.5 s, a 2 s rest, and back in 4.5 s, at Speed 2.\n    S.sw += (d * sp) / 11;\n    const u = S.sw, up = u \u003c 0.41 ? sm(u / 0.41) : u \u003c 0.59 ? 1 : 1 - sm((u - 0.59) / 0.41);\n    tilt += (90 - tilt) * up;\n    if (S.sw >= 1) S.sw = -1;\n  }\n  scene(S, tilt * RAD, S.cone * RAD);\n  const sc = S.sc;\n  // The view: level with the ellipse case's spheres while the cut is an\n  // ellipse, widening downwards to take in the other nappe as the eccentricity\n  // passes 0.8 on its way to the hyperbola.\n  const lo = -0.25 - 1.95 * sm((sc.e - 0.8) / 0.3);\n  S.lo += (lo - S.lo) * min(1, d * 3);\n  // The turn hurries past the azimuths where the camera sees the plane edge\n  // on and the conic flattens to a line, and lingers where it lies open.\n  const edgeOn = abs(sc.nx * cos(ELEV) * sin(S.th) + sc.ny * sin(ELEV));\n  S.th += d * sp * ((2 * PI) / 36) * (0.6 + 1.8 * exp(-((edgeOn / 0.18) ** 2)));\n  // The point moves at about 0.55 units a second along the conic. Off the\n  // drawn part of a hyperbola or parabola it skips ahead to where it comes\n  // back in.\n  let left = d * sp * 0.55, guard = 0;\n  while (left > 0 && guard++ \u003c 40) {\n    const t0 = conicT(sc, S.ph), t1 = conicT(sc, S.ph + 0.01);\n    const y0 = t0 * sc.ca;\n    if (y0 > YTOP || y0 \u003c YBOT + 0.1) {\n      S.ph += 0.05;\n      continue;\n    }\n    const x0 = t0 * sc.sa * cos(S.ph), z0 = t0 * sc.sa * sin(S.ph);\n    const x1 = t1 * sc.sa * cos(S.ph + 0.01), z1 = t1 * sc.sa * sin(S.ph + 0.01), y1 = t1 * sc.ca;\n    const ds = Math.hypot(x1 - x0, y1 - y0, z1 - z0) / 0.01;\n    const step = min(left / max(ds, 1e-3), 0.3);\n    S.ph += step;\n    left -= step * ds;\n  }\n  S.ph %= 2 * PI;\n}\n\n// Colours: lower sphere, upper sphere, cone, plane, conic, the two\n// segment colours, white.\nfunction palette(S) {\n  const c = S.col, h = S.hue + H0;\n  // The cone and the plane are seen faint, where a warm hue reads olive, so\n  // they lose more of their colour there than the bright parts do.\n  const set = (i, hh, s, v) => {\n    const w = warm(hh);\n    hsv(hh, s * (1 - (i === 2 || i === 3 ? 0.7 : 0.35) * w), v, c, i * 3);\n  };\n  set(0, h, 0.72, 1);\n  set(1, h + 0.2, 0.62, 1);\n  set(2, h + 0.1, 0.55, 1);\n  set(3, h + 0.04, 0.5, 1);\n  set(4, h + 0.62, 0.14, 1);\n  set(5, h + 0.62, 0.6, 1);\n  set(6, h + 0.42, 0.55, 1);\n  set(7, 0, 0, 1);\n  S.colHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.sc.h === undefined) return;\n  if (S.colHue !== S.hue) palette(S);\n  const sc = S.sc, col = S.col, base = S.base, lin = S.lin, zO = S.zO, zC = S.zC, zP = S.zP;\n  const hi = YTOP, lo = S.lo, ty = (hi + lo) / 2;\n  // A wider cone pulls the camera back, by the square root of how much\n  // wider it is than the 16 degree one, so a wide ellipse still fits.\n  const f = (128 * DIST) / ((hi - lo) * cos(ELEV) * sqrt(sc.k / tan(16 * RAD)));\n  // Camera basis. fwd looks at (0, ty, 0) from DIST away, ELEV above.\n  const ce = cos(ELEV), se = sin(ELEV), st = sin(S.th), ct = cos(S.th);\n  const ox = DIST * ce * st, oy = ty + DIST * se, oz = DIST * ce * ct;\n  const fx = -ce * st, fy = -se, fz = -ce * ct;\n  const rx = ct, rz = -st; // right = fwd x up, level\n  const ux = -fy * rz, uy = rz * fx - rx * fz, uz = fy * rx;\n  // The light hangs above and to the left of the camera.\n  let lx = -0.55 * rx + 0.75 * ux - 0.5 * fx, ly = 0.75 * uy - 0.5 * fy, lz = -0.55 * rz + 0.75 * uz - 0.5 * fz;\n  const ll = Math.hypot(lx, ly, lz);\n  lx /= ll;\n  ly /= ll;\n  lz /= ll;\n  const k2 = sc.k * sc.k, nx = sc.nx, ny = sc.ny, h = sc.h;\n  // Each sphere: height, radius, palette slot, and how warm its hue is.\n  const sph = [\n    [sc.s1, sc.r1, 0, warm(S.hue + H0)],\n    [sc.s2, sc.r2, 3, warm(S.hue + H0 + 0.2)],\n  ];\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const v = (63.5 - py) / f, bg = 0.025 + 0.02 * (py / H);\n    for (let px = 0; px \u003c W; px++, p++) {\n      const u = (px - 31.5) / f;\n      const dx = fx + u * rx + v * ux, dy = fy + v * uy, dz = fz + u * rz + v * uz;\n      const dd = dx * dx + dy * dy + dz * dz, il = 1 / sqrt(dd);\n      let r = bg * 0.6, g = bg * 0.75, b = bg * 1.5, tO = 1e9;\n      // The spheres, opaque and lit. They are drawn whole even where they\n      // rise past the cut cone, a ball sitting in a cup.\n      for (let q = 0; q \u003c 2; q++) {\n        const s = sph[q][0], rad = sph[q][1];\n        if (rad \u003c= 0 || abs(s) > 60) continue;\n        const ocy = oy - s, bb = ox * dx + ocy * dy + oz * dz, cc = ox * ox + ocy * ocy + oz * oz - rad * rad, disc = bb * bb - dd * cc;\n        if (disc \u003c= 0) continue;\n        const t = (-bb - sqrt(disc)) / dd;\n        if (t \u003c= 0 || t >= tO) continue;\n        tO = t;\n        const o = sph[q][2];\n        const hx = (ox + t * dx) / rad, hy = (oy + t * dy - s) / rad, hz = (oz + t * dz) / rad;\n        const di = max(0, hx * lx + hy * ly + hz * lz);\n        // Blinn highlight on the half vector between the light and the eye.\n        const vx = lx - dx * il, vy = ly - dy * il, vz = lz - dz * il;\n        const vl = Math.hypot(vx, vy, vz);\n        const hs = max(0, (hx * vx + hy * vy + hz * vz) / vl), spec = hs ** 28 * 0.75;\n        const rim = -(hx * dx + hy * dy + hz * dz) * il;\n        // Orange and yellow go brown in shade, so a warm sphere gets more\n        // fill light and stays gold.\n        const wq = sph[q][3], lit = 0.12 + 0.3 * wq + (0.8 - 0.2 * wq) * di * (0.55 + 0.45 * rim);\n        r = col[o] * lit + spec;\n        g = col[o + 1] * lit + spec;\n        b = col[o + 2] * lit + spec;\n      }\n      zO[p] = tO;\n      // The cone: x^2 + z^2 = k^2 y^2, both nappes. Glass, so each crossing\n      // adds a little light, more where the surface is seen edge on.\n      const A = dx * dx + dz * dz - k2 * dy * dy, B = 2 * (ox * dx + oz * dz - k2 * oy * dy), C = ox * ox + oz * oz - k2 * oy * oy;\n      let tc1 = 1e9, tc2 = 1e9;\n      const disc = B * B - 4 * A * C;\n      if (disc > 0 && abs(A) > 1e-9) {\n        const sq = sqrt(disc);\n        let ta = (-B - sq) / (2 * A), tb = (-B + sq) / (2 * A);\n        if (ta > tb) [ta, tb] = [tb, ta];\n        for (const t of [ta, tb]) {\n          const y = oy + t * dy;\n          if (t > 0 && y \u003c YTOP && y > YBOT) {\n            if (tc1 > 1e8) tc1 = t;\n            else tc2 = t;\n          }\n        }\n      }\n      zC[p] = tc1;\n      // The plane, clipped to a square in x and z and to the cone's height.\n      // It is brighter inside the cone, where it is the conic's own disc, and\n      // lit along its edges.\n      let tp = 1e9, pin = false, pm = 0;\n      const nd = nx * dx + ny * dy;\n      if (abs(nd) > 1e-6) {\n        const t = (h - nx * ox - ny * oy) / nd;\n        if (t > 0 && t \u003c tO) {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz;\n          const m = min(PX - abs(x), PX - abs(z), y - YBOT, YTOP - y);\n          if (m > 0) {\n            tp = t;\n            pin = x * x + z * z \u003c k2 * y * y;\n            pm = (m * f) / t;\n          }\n        }\n      }\n      zP[p] = tp;\n      // The glass layers in front of the opaque hit, far to near: the far\n      // wall of the cone, then the near wall, with the plane wherever it falls.\n      const pa = pin ? 0.2 : 0.12, pe = (pin ? 0.3 : 0.08) + 0.5 * exp(-pm * pm * 0.8);\n      const pos = tp > tc2 ? 0 : tp > tc1 ? 1 : 2;\n      for (let L = 0; L \u003c 3; L++) {\n        const isP = L === pos, t = isP ? tp : (L \u003c pos ? L : L - 1) === 0 ? tc2 : tc1;\n        if (t >= tO || t > 1e8) continue;\n        let a, e, o;\n        if (isP) {\n          a = pa;\n          e = pe;\n          o = 9;\n        } else {\n          const x = ox + t * dx, y = oy + t * dy, z = oz + t * dz, gy = -k2 * y, gl = Math.hypot(x, gy, z) || 1;\n          const ci = abs((x * dx + gy * dy + z * dz) / gl) * il, fr = (1 - ci) * (1 - ci);\n          a = 0.06 + 0.2 * fr;\n          e = 0.07 + 0.42 * fr;\n          o = 6;\n        }\n        r = r * (1 - a) + col[o] * e;\n        g = g * (1 - a) + col[o + 1] * e;\n        b = b * (1 - a) + col[o + 2] * e;\n      }\n      base[p * 3] = r;\n      base[p * 3 + 1] = g;\n      base[p * 3 + 2] = b;\n    }\n  }\n\n  // Lines and points, splatted over the shading. Behind a sphere they show\n  // through dimmed, behind the cone's near wall or the plane a little dimmer.\n  lin.fill(0);\n  const ssa = sc.sa, sca = sc.ca;\n  let cr = 0, cg = 0, cb = 0, cw = 0;\n  // A thick line is laid as two strands half an LED either side of its\n  // path on the screen, (tox, toy) apart.\n  let thick = false, tox = 0, toy = 0;\n  const put = (sx, sy, k) => {\n    const ix = floor(sx), iy = floor(sy), ax = sx - ix, ay = sy - iy;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = ix + (j & 1), Y = iy + (j >> 1);\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const wt = k * (j & 1 ? ax : 1 - ax) * (j >> 1 ? ay : 1 - ay), o = (Y * W + X) * 3;\n      lin[o] += cr * wt;\n      lin[o + 1] += cg * wt;\n      lin[o + 2] += cb * wt;\n    }\n  };\n  const splat = (x, y, z, w) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = qx * fx + qy * fy + qz * fz;\n    if (zz \u003c 0.1) return;\n    const sx = 31.5 + (f * (qx * rx + qz * rz)) / zz, sy = 63.5 - (f * (qx * ux + qy * uy + qz * uz)) / zz;\n    if (sx \u003c -2 || sx > W + 1 || sy \u003c -2 || sy > H + 1) return;\n    const ni = cl(Math.round(sy), 0, H - 1) * W + cl(Math.round(sx), 0, W - 1);\n    let k = w;\n    if (zz > zO[ni] + 0.04) k *= 0.38;\n    if (zz > zC[ni] + 0.04) k *= 0.62;\n    if (zz > zP[ni] + 0.03) k *= 0.75;\n    if (!thick) put(sx, sy, k);\n    else {\n      put(sx + tox, sy + toy, k * 0.62);\n      put(sx - tox, sy - toy, k * 0.62);\n    }\n  };\n  const proj = (x, y, z) => {\n    const qx = x - ox, qy = y - oy, qz = z - oz, zz = max(0.1, qx * fx + qy * fy + qz * fz);\n    return [(f * (qx * rx + qz * rz)) / zz, (f * (qx * ux + qy * uy + qz * uz)) / zz];\n  };\n  const seg = (ax, ay, az, bx, by, bz) => {\n    const [sx0, sy0] = proj(ax, ay, az), [sx1, sy1] = proj(bx, by, bz);\n    const L = Math.hypot(sx1 - sx0, sy1 - sy0), n = max(1, Math.ceil(L / 0.6)), w = (L / n) * cw;\n    tox = L > 0 ? (-(sy1 - sy0) / L) * 0.55 : 0;\n    toy = L > 0 ? ((sx1 - sx0) / L) * 0.55 : 0;\n    for (let i = 0; i \u003c= n; i++) {\n      const t = i / n;\n      splat(ax + (bx - ax) * t, ay + (by - ay) * t, az + (bz - az) * t, i === 0 || i === n ? w / 2 : w);\n    }\n  };\n  const use = (o, w) => {\n    cr = col[o * 3];\n    cg = col[o * 3 + 1];\n    cb = col[o * 3 + 2];\n    cw = w;\n  };\n  // A point on the line of the cone at azimuth phi, t along it.\n  const gp = (phi, t) => [t * ssa * cos(phi), t * sca, t * ssa * sin(phi)];\n  // The cone's lines through the apex and its two rims.\n  use(2, 0.3);\n  const tTop = YTOP / sca, tBot = YBOT / sca;\n  for (let i = 0; i \u003c GEN; i++) {\n    const phi = (i * 2 * PI) / GEN + 0.3;\n    seg(...gp(phi, tTop), 0, 0, 0);\n    seg(0, 0, 0, ...gp(phi, tBot));\n  }\n  const ring = (y, rad, n) => {\n    let px = rad, pz = 0;\n    for (let i = 1; i \u003c= n; i++) {\n      const a = (i * 2 * PI) / n, qx = rad * cos(a), qz = rad * sin(a);\n      seg(px, y, pz, qx, y, qz);\n      px = qx;\n      pz = qz;\n    }\n  };\n  use(2, 0.5);\n  ring(YTOP, YTOP * sc.k, 72);\n  ring(YBOT, -YBOT * sc.k, 72);\n  // The contact circles, in each sphere's colour, brighter.\n  const okS = (s, r) => r > 0 && abs(s) \u003c 60;\n  use(0, 0.95);\n  if (okS(sc.s1, sc.r1)) ring(sc.g1 * sca, abs(sc.g1 * ssa), 64);\n  use(1, 0.95);\n  if (okS(sc.s2, sc.r2) && sc.g2 * sca \u003c YTOP && sc.g2 * sca > YBOT) ring(sc.g2 * sca, abs(sc.g2 * ssa), 64);\n  // The conic, drawn in pieces wherever it lies inside the cut cone.\n  use(4, 1.35);\n  const NPH = 240;\n  let prev = null;\n  for (let i = 0; i \u003c= NPH; i++) {\n    const phi = (i * 2 * PI) / NPH, t = conicT(sc, phi), y = t * sca;\n    const okp = y \u003c YTOP && y > YBOT;\n    const cur = okp ? gp(phi, t) : null;\n    if (cur && prev && abs(cur[1] - prev[1]) \u003c 1.2) seg(...prev, ...cur);\n    prev = cur;\n  }\n  // The point, its two distances to the foci and the line of the cone\n  // through it, cut where it meets the two contact circles. Each pair in one\n  // colour: PF1 equals the stretch to circle 1, PF2 the stretch to circle 2.\n  const tP = conicT(sc, S.ph), yP = tP * sca;\n  if (yP \u003c YTOP && yP > YBOT) {\n    const [Px, Py, Pz] = gp(S.ph, tP);\n    const clipT = (t) => cl(t, tBot, tTop);\n    thick = true;\n    use(5, 1.5);\n    if (okS(sc.s1, sc.r1)) {\n      seg(Px, Py, Pz, sc.fx1, sc.fy1, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g1)));\n    }\n    use(6, 1.5);\n    if (okS(sc.s2, sc.r2)) {\n      seg(Px, Py, Pz, sc.fx2, sc.fy2, 0);\n      seg(Px, Py, Pz, ...gp(S.ph, clipT(sc.g2)));\n    } else seg(Px, Py, Pz, ...gp(S.ph, sc.g2 > 0 ? tTop : tBot));\n    thick = false;\n    use(7, 2.2);\n    for (const [ddx, ddy] of [[0, 0], [0.012, 0], [-0.012, 0], [0, 0.012], [0, -0.012]]) splat(Px + ddx, Py + ddy, Pz, 1);\n  }\n  // The foci, white points where the spheres touch the plane.\n  use(7, 1.6);\n  for (const [s, r, fxx, fyy] of [[sc.s1, sc.r1, sc.fx1, sc.fy1], [sc.s2, sc.r2, sc.fx2, sc.fy2]]) {\n    if (!okS(s, r) || fyy > YTOP || fyy \u003c YBOT) continue;\n    for (const [ddx, ddy] of [[0, 0], [0.014, 0], [-0.014, 0], [0, 0.014], [0, -0.014]]) splat(fxx + ddx, fyy + ddy, 0, 1);\n  }\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3;\n      display.setPixel(x, y, cl((base[o] + lin[o]) * 255, 0, 255), cl((base[o + 1] + lin[o + 1]) * 255, 0, 255), cl((base[o + 2] + lin[o + 2]) * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tilt=30..90, Cone=16..34","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the scene round the wheel together. At 0 the lower sphere is teal, the upper one violet and the cone azure, the conic is white, and the two pairs of equal lengths are gold and pink."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the scene turns once round the axis in about 44 s, hurrying past the moment the plane is seen edge on, and the point runs round the opening ellipse in about 4 s; at 0.2 both go ten times slower."},{"name":"Tilt","min":30,"max":90,"about":"The plane's angle from level, in degrees. At 30 it cuts an ellipse of eccentricity 0.52 between a small sphere and one twice its size; the ellipse stretches as it tilts, at 74 the upper sphere has run off to infinity and the cut is a parabola, and past that the sphere comes back up from below in the other nappe and the cut is a hyperbola, one branch in each nappe. The view backs off to take in the lower nappe from about 50."},{"name":"Cone","min":16,"max":34,"about":"The cone's half-angle, 16 to 34 degrees. A wider cone at the same tilt gives a rounder ellipse, a far bigger upper sphere and a camera standing further back, and the parabola comes at a tilt of 90 minus this angle, 56 at 34."}],"start":[0,2,30,16],"measures":{"motion":0.1793,"detail":0.0495,"edges":0.3572,"complexity":1.3922,"coverage":0.6125,"colour":0.1958,"drift":0.0301},"knobResponse":[0.1111,0.0383,0.2036,0.1906]},{"slug":"dark-field","title":"Dark Field","family":"microbe","round":26,"note":"암시야 현미경 속 연못물 한 방울이에요. 볼복스와 짚신벌레, 돌말, 해캄 실 위의 종벌레가 검은 바탕에 흩은 빛으로만 빛나요. K1 이 라인베르크와 위상차로 조명을 바꾸고, 누르면 종벌레 자루가 용수철처럼 감겨요.","idea":"A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.","buttons":"K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.","code":"// ===== Patternflow pattern =====\n// Title:   Dark Field\n// Family:  microbe\n// Idea:    A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after dark-field and Rheinberg illumination in the light microscope\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1\n//\n// Knob 1: Light. At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos.\n// Knob 2: Speed. At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower.\n// Knob 3: Crowd. At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in.\n// Knob 4: Focus. Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit.\n// Buttons: K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.\n\nconst W = 64, H = 128, N = W * H, HW = 32, HH = 64;\nconst { min, max, floor, round, ceil, sin, cos, sqrt, exp, abs, PI, atan2 } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rr = (a, b) => a + (b - a) * rnd();\nfunction h32(a, b) {\n  let h = Math.imul(a ^ Math.imul(b, 0x27d4eb2d), 0x9e3779b1);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca77);\n  h ^= h >>> 13;\n  return (h ^ (h >>> 16)) >>> 0;\n}\n\n// Small things live on a torus a little larger than the view, so what leaves\n// one side comes back at the other out of sight. Big swimmers turn back\n// toward the middle near an edge.\nconst wrap = (o, m = 12) => ((o.x -= (W + 2 * m) * floor((o.x + m) / (W + 2 * m))), (o.y -= (H + 2 * m) * floor((o.y + m) / (H + 2 * m))));\nconst go = (o, v) => ((o.x += cos(o.h) * v), (o.y += sin(o.h) * v));\nfunction swim(o, d) {\n  if ((o.z += o.vz * d) > 1 || o.z \u003c -1) o.vz = -o.vz;\n  if (o.x > 8 && o.x \u003c 56 && o.y > 12 && o.y \u003c 116) return;\n  let e = atan2(64 - o.y, 32 - o.x) - o.h;\n  o.h += cl(e - TAU * round(e / TAU), -1, 1) * 1.2 * d;\n}\n// Colours each thing scatters in dark field.\nconst C = {\n  cell: [110, 255, 118], vrim: [175, 255, 165], dau: [64, 255, 92], par: [200, 222, 255], gran: [255, 236, 196], dia: [255, 194, 72],\n  vor: [222, 236, 255], rot: [255, 226, 186], eug: [132, 255, 140], amb: [255, 184, 100], gry: [212, 206, 198], wall: [205, 242, 182],\n  chl: [84, 236, 90], osc: [120, 250, 222],\n};\n// Rheinberg: an annular filter yellow at its sides and red top and bottom, so\n// an edge's colour follows the way it faces (q = nx² - ny²), on a blue field.\nconst RA = [255, 220, 46], RB = [255, 44, 40];\nconst RM = RA.map((v, i) => (v + RB[i]) / 2), RH = RA.map((v, i) => (v - RB[i]) / 2);\nconst FIELD = [4, 16, 60], PHASE = [74, 82, 72];\n\n// The algal thread, a Spirogyra filament across the lower third: its centre\n// at arc length s and its unit tangent.\nconst FL = 136;\nlet fx = 0, fy = 0, ftx = 1, fty = 0;\nfunction fil(s) {\n  const dy = -0.2 + 0.225 * cos(s * 0.045 + 0.3), l = sqrt(1 + dy * dy);\n  (fx = s - 30), (fy = 109 - 0.2 * s + 5 * sin(s * 0.045 + 0.3)), (ftx = 1 / l), (fty = dy / l);\n}\n\n// Light goes into a sharp buffer and, by how far the thing lies from the\n// focal plane, into a halo buffer at half resolution that is blurred and\n// spread back over the LEDs.\nlet S, Q, ox = 0, oy = 0, foc = 0, m1 = 0, wS = 1, wQ = 0, lastP = -1;\nconst K0 = [0, 0, 0], K1 = [0, 0, 0];\nfunction col(c, g = 1) {\n  for (let i = 0; i \u003c 3; i++) (K0[i] = (g * (c[i] + m1 * (RM[i] - c[i]))) / 255), (K1[i] = (g * m1 * RH[i]) / 255);\n}\nfunction dep(z) {\n  const b = max(0, abs(z - foc) - 0.15) * 2.4;\n  wS = max(0, 1 - b);\n  wQ = min(1, b) / (1 + 0.5 * max(0, b - 1));\n}\nfunction put(x, y, s, q = 0) {\n  const xi = round(x - ox), yi = round(y - oy), o = (yi * W + xi) * 3;\n  if (xi \u003c 0 || yi \u003c 0 || xi >= W || yi >= H || o === lastP) return;\n  lastP = o;\n  const r = s * (K0[0] + q * K1[0]), g = s * (K0[1] + q * K1[1]), b = s * (K0[2] + q * K1[2]), h = ((yi >> 1) * HW + (xi >> 1)) * 3;\n  if (wS) (S[o] += r * wS), (S[o + 1] += g * wS), (S[o + 2] += b * wS);\n  if (wQ) (Q[h] += r * wQ), (Q[h + 1] += g * wQ), (Q[h + 2] += b * wQ);\n}\n// A point: small things lose themselves out of focus, so less goes to the halo.\nfunction dot(x, y, s, q = 0) {\n  const k = wQ;\n  (lastP = -1), (wQ *= 0.4);\n  put(x, y, s, q);\n  wQ = k;\n}\nfunction line(x0, y0, x1, y1, s) {\n  const dx = x1 - x0, dy = y1 - y0, n = max(1, ceil(max(abs(dx), abs(dy)))), q = (dy * dy - dx * dx) / (dx * dx + dy * dy + 1e-6);\n  for (let k = 0; k \u003c n; k++) put(x0 + (dx * k) / n, y0 + (dy * k) / n, s, q);\n}\nfunction ring(cx, cy, r, s) {\n  lastP = -1;\n  for (let k = 0, n = max(8, ceil(TAU * r * 1.4)); k \u003c n; k++) {\n    const c = cos((k / n) * TAU), sn = sin((k / n) * TAU);\n    put(cx + r * c, cy + r * sn, s, c * c - sn * sn);\n  }\n}\n// A body's own frame: at(u, v) is u along its axis and v across it.\nlet FX = 0, FY = 0, FC = 1, FS = 0;\nconst frame = (x, y, a) => ((FX = x), (FY = y), (FC = cos(a)), (FS = sin(a)));\nconst at = (u, v, s, f = put, q = FS * FS - FC * FC) => f(FX + u * FC - v * FS, FY + u * FS + v * FC, s, q);\n// A three-wide box blur run twice, on the half-resolution grid.\nfunction blur(A, T) {\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [a, b, s, n] = pass & 1 ? [T, A, HW * 3, HH] : [A, T, 3, HW];\n    for (let y = 0, o = 0; y \u003c HH; y++)\n      for (let x = 0; x \u003c HW; x++)\n        for (let c = 0, i = pass & 1 ? y : x; c \u003c 3; c++, o++) b[o] = (a[o - (i > 0 ? s : 0)] + a[o] + a[o + (i \u003c n - 1 ? s : 0)]) / 3;\n  }\n}\n// Light to LED level: black below 0.1, a gain of 3, a soft shoulder above 0.8.\nconst LUT = Float32Array.from({ length: 1024 }, (_, i) => {\n  const v = max(0, i / 256 - 0.1) * 3;\n  return 255 * (v \u003c 0.8 ? v : 1 - 0.2 * exp(-(v - 0.8) / 0.2));\n});\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), side = () => (rnd() \u003c 0.5 ? -1 : 1), A = (n, f) => Array.from({ length: n }, (_, i) => ({ x: rr(-12, 76), y: rr(-12, 140), h: rnd() * TAU, ...f(i) }));\n  const P = (params.s = { t: 0, S: F(N * 3), Q: F(HW * HH * 3), T: F(HW * HH * 3), QS: F(HW * HH), L: F(N), V: F(N), OP: F(140), nx: 0, ny: 0, ex: 0, ey: 0, nt: 3.2, ja: 0, jt: 9, jx: 0, jy: 0, s1: rnd() * 7, s2: rnd() * 7 });\n  // The round field stop of the eyepiece clips the panel's two ends.\n  for (let p = 0; p \u003c N; p++) P.V[p] = sm(67.5, 62, sqrt(((p & 63) - 31.5) ** 2 + (((p >> 6) - 63.5) * 1.02) ** 2));\n  // Volvox: cells on a sphere (a Fibonacci spiral) and daughter colonies inside.\n  P.vol = [[0.18, 12, 21], [-0.8, 9, 57], [0.2, 9.5, 112], [0.62, 11, 80]].map(([z, R, y]) => {\n    const n = round(0.7 * R * R), pts = F(n * 3), d = [];\n    for (let k = 0; k \u003c n; k++) {\n      const yv = 1 - (2 * k + 1) / n, q = sqrt(1 - yv * yv);\n      pts.set([cos(k * 2.4) * q, yv, sin(k * 2.4) * q], k * 3);\n    }\n    for (let k = 0, m = 3 + rnd() * 3; k \u003c m; k++) {\n      const a = rnd() * TAU, b = rr(-1, 1), r = rr(0.2, 0.52), q = sqrt(1 - b * b) * r;\n      d.push([cos(a) * q, b * r, sin(a) * q, rr(0.17, 0.25) * R]);\n    }\n    return { x: rr(16, 48), y: y + rr(-9, 9), z, vz: rr(-0.025, 0.025), R, h: rnd() * TAU, v: rr(1.6, 2.8), ph: 0, w: rr(0.4, 0.7) * side(), pts, d };\n  });\n  // Paramecia: slippers with an oral groove that swaps sides as they spin.\n  P.par = [[0.05, 42], [0.14, 115], [-0.12, 70], [0.75, 20], [-0.85, 92]].map(([z, y]) => ({\n    x: rr(14, 50), y: y + rr(-10, 10), z, vz: rr(-0.05, 0.05), h: rnd() * TAU, v: rr(8, 11), a: rr(11.5, 13.5), B: rr(4.4, 5.2), spin: 0, ws: rr(1.6, 2.4),\n    rev: 0, tt: rr(3, 8), cy: 0, cv: [rnd(), rnd()],\n  }));\n  // Diatoms: two glide along the thread, two on floating debris, the rest on\n  // the slide's glass, deeper down.\n  P.dia = A(9, (i) => ({ z: i \u003c 2 ? 0 : i \u003c 4 ? rr(-0.05, 0.2) : rr(0.75, 0.92), a: rr(6, 9), B: rr(2.1, 2.6), go: rnd() \u003c 0.6, tt: rr(0.5, 3), dir: side(), v: rr(3.5, 6), f: i \u003c 2 ? 44 + 34 * i + rr(-6, 6) : -1 }));\n  // Oscillatoria: blue-green threads that glide along their length and wave both ends.\n  P.osc = [[18, 17, -0.04], [46, 40, 0.1], [30, 117, 0.3]].map(([x, y, z], i) => ({ x: x + rr(-9, 9), y: y + rr(-9, 9), z, h: rr(-0.6, 0.6) + (i & 1) * PI, L: 2 * round(rr(17, 24)), k: rr(-0.015, 0.015), ph: rnd() * 7, v: rr(1.2, 2.2) }));\n  // Vorticella bells on the thread: anchor, lean, stalk length. Bell 0 snaps first.\n  P.vor = [[46, -0.22, 46], [50, 0.16, 36], [41, -0.55, 30], [56, 0.45, 42], [36, -0.05, 52], [62, 0.1, 28], [30, -0.4, 40]].map(([s, a, L], i) => ({ s, a: a - PI / 2, L, ext: 1, st: 0, tt: i ? rr(9, 18) : 4.1, cp: 0 }));\n  P.rot = [[84, -2.05], [16, -1.15]].map(([s, a]) => ({ s, a, L: 21, ext: 1, st: 0, tt: rr(7, 12), cp: 0, sw: rnd() * 7 }));\n  P.fla = A(44, (i) => ({ z: rr(-0.9, 0.9), v: rr(6, 18), tt: 0, k: i % 3, ph: rnd() * 7 }));\n  // Detritus: grains and glittering flakes, amber plant matter or grey grit,\n  // a third of it settled on the slide. Bacteria: points crowding near the\n  // thread they feed on, most jiggling, some swimming.\n  P.det = A(48, (i) => {\n    const pts = [], m = 1 + floor(rnd() * rnd() * 9), e = m > 3 ? 2 : 1;\n    for (let k = 0; k \u003c m; k++) pts.push([e * round(rr(-1.5, 1.5)), e * round(rr(-1.5, 1.5)), rr(0.35, 0.8)]);\n    return { z: i % 3 ? rr(-1, 1) * rnd() : rr(0.8, 1), pts, k: rnd() \u003c 0.55 };\n  });\n  P.bac = A(580, () => ({ z: rr(-1, 1) * rnd(), s: rr(0.4, 0.8), m: rnd() \u003c 0.3 }));\n}\n\n// Knocking the slide.\nfunction knock(P) {\n  const a = rnd() * TAU;\n  (P.ja = 3.5), (P.jt = 0), (P.jx = cos(a)), (P.jy = sin(a));\n  for (const o of [...P.vor, ...P.rot]) if (o.st !== 1) o.st = 1;\n  for (const o of P.par) (o.rev = 0.6), (o.tr = rr(-3, 3));\n  for (const o of [...P.vol, ...P.fla, ...P.det]) (o.x += P.jx * rr(1, 4)), (o.y += P.jy * rr(1, 4));\n}\n\n// A stalk or body that waits and snaps in to lo. It holds there, then stretches out again.\nfunction cycle(o, d, down, lo, up, hold, wait) {\n  if (o.st === 0 && (o.tt -= d) \u003c 0) o.st = 1;\n  else if (o.st === 1 && (o.ext -= d * down) \u003c= lo) (o.ext = lo), (o.st = 2), (o.tt = hold * rr(1, 2));\n  else if (o.st === 2 && (o.tt -= d) \u003c 0) o.st = 3;\n  else if (o.st === 3 && (o.ext += d * up * (1.12 - o.ext)) >= 1) (o.ext = 1), (o.st = 0), (o.tt = wait * rr(1, 2.2));\n}\n\nfunction life(P, d, crowd, first) {\n  // Each kind fades its members in and out by the Crowd knob.\n  const each = (L, k, f) =>\n    L.forEach((o, i) => {\n      const tg = i \u003c k ? 1 : 0;\n      o.p = first ? tg : o.p + (tg - o.p) * min(1, d * 2.5);\n      f(o, i);\n    });\n  const t = P.t;\n  each(P.vol, 3 + round(crowd), (o, i) => {\n    o.h += sin(t * 0.21 + i * 2) * 0.15 * d;\n    go(o, o.v * d);\n    o.ph += o.w * d;\n    swim(o, d);\n  });\n  each(P.par, 3 + round(2 * crowd), (o, i) => {\n    o.spin += o.ws * d;\n    if (o.rev > 0) (o.rev -= d), (o.h += o.tr * d), go(o, -o.v * 0.5 * d);\n    else {\n      o.h += sin(t * 0.5 + i * 2.3) * 0.25 * d;\n      if ((o.tt -= d) \u003c 0) (o.rev = 0.7), (o.tr = rr(-3, 3)), (o.tt = rr(4, 9));\n      go(o, o.v * d);\n    }\n    o.cy += d * 0.7;\n    (o.cv[0] = (o.cv[0] + d * 0.24) % 1), (o.cv[1] = (o.cv[1] + d * 0.21) % 1);\n    swim(o, d);\n  });\n  // Diatoms glide on their raphe and stop. Then they set off again, often backwards.\n  each(P.dia, 5 + round(4 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.go = !o.go), (o.tt = o.go ? rr(2, 4) : rr(0.8, 2.2)), o.go && rnd() \u003c 0.4 && (o.dir = -o.dir);\n    const v = o.go ? o.v * o.dir * d * sm(0, 0.4, o.tt) : 0;\n    if (o.f \u003c 0) go(o, v), wrap(o);\n    else if ((o.f += v) \u003c 8 || o.f > FL - 8) (o.dir = -o.dir), (o.f = cl(o.f, 8, FL - 8));\n  });\n  // Oscillatoria reverse when their front end runs out toward an edge.\n  each(P.osc, 2 + round(crowd), (o) => {\n    o.ph += d * 1.4;\n    go(o, o.v * d);\n    if ((o.x \u003c 6 || o.x > 58 || o.y \u003c 8 || o.y > 120) && cos(o.h) * (32 - o.x) + sin(o.h) * (64 - o.y) \u003c 0) o.h += PI;\n  });\n  each(P.vor, 5 + round(2 * crowd), (b) => ((b.cp += d * 7), cycle(b, d, 14, 0.13, 0.38, 0.5, 8)));\n  each(P.rot, 1 + round(crowd), (r) => ((r.cp += d * 9), cycle(r, d, 4, 0.5, 1.3, 1, 6)));\n  each(P.fla, 20 + round(24 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.h += rr(-2, 2)), (o.v = rr(5, 20)), (o.tt = rr(0.25, 1.4));\n    o.h += sin(o.ph + t * 3) * d * 1.2;\n    go(o, o.v * d);\n    wrap(o);\n  });\n  // The slow current carries grit and bacteria up and to the right, fastest\n  // midway between the coverslip (z -1) and the slide (z 1).\n  const j = sqrt(d * 30);\n  for (const [L, k, jj] of [[P.det, 28 + round(20 * crowd), 0.06], [P.bac, 460 + round(120 * crowd), 0.5]])\n    each(L, k, (o) => {\n      const f = 1 - o.z * o.z;\n      o.x += 1.7 * f * d + (rnd() - 0.5) * jj * j;\n      o.y -= f * d + (rnd() - 0.5) * jj * j;\n      if (o.m) rnd() \u003c d * 0.8 && (o.h += rr(-2.5, 2.5)), go(o, 9 * d);\n      wrap(o);\n    });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = (rd * cl(k[1], 0.2, 3)) / 2, l = cl(k[0], 0, 1);\n  (P.m1 = cl(l * 2, 0, 1)), (P.m2 = cl(l * 2 - 1, 0, 1)), (P.foc = cl(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) knock(P);\n  const t = (P.t += d);\n  // The stage is never quite still: a slow creep, a nudge now and then, and\n  // the shake of a knock.\n  if ((P.nt -= d) \u003c 0) (P.nt = rr(6, 11)), (P.nx = cl(P.nx + rr(-6, 6), -5, 5)), (P.ny = cl(P.ny + rr(-8, 8), -7, 7));\n  const e = min(1, d * 3), sh = P.ja * exp(-(P.jt += rd) * 5) * sin(P.jt * 40);\n  (P.ex += (P.nx - P.ex) * e), (P.ey += (P.ny - P.ey) * e);\n  P.ox = 2.5 * sin(t * 0.13 + P.s1) + 1.2 * sin(t * 0.31 + 2) + P.ex + sh * P.jx;\n  P.oy = 3.5 * sin(t * 0.09 + P.s2) + 1.5 * sin(t * 0.23) + P.ey + sh * P.jy;\n  life(P, d, cl(k[2], 0, 1), !P.init);\n  P.init = true;\n}\n\nfunction thread() {\n  dep(0);\n  col(C.wall);\n  for (const sd of [-2.6, 2.6]) {\n    lastP = -1;\n    for (let s = 0; s \u003c= FL; s += 0.7) fil(s), put(fx - fty * sd, fy + ftx * sd, 0.62, fty * fty - ftx * ftx);\n  }\n  for (let s = 5; s \u003c FL; s += 9) fil(s), line(fx - fty * 1.6, fy + ftx * 1.6, fx + fty * 1.6, fy - ftx * 1.6, 0.3);\n  // The chloroplast, a green ribbon winding round inside the cell wall.\n  col(C.chl);\n  for (let s = 0; s \u003c= FL; s += 1.3) fil(s), dot(fx - fty * 1.7 * sin(s * 0.5), fy + ftx * 1.7 * sin(s * 0.5), 0.5 + 0.25 * cos(s * 0.5));\n}\n\n// Frames a thing standing on the thread at arc length s, leaning by a.\nfunction foot(s, a) {\n  fil(s);\n  frame(fx + fty * 2.6, fy - ftx * 2.6, a);\n}\n\nfunction vorticella(b, i, t) {\n  foot(b.s, b.a + 0.07 * sin(t * 0.6 + i * 1.7));\n  const L = b.L * b.ext, amp = 2 * (1 - b.ext) ** 0.6, bend = 3 * sin(t * 0.45 + i) * b.ext, m = ceil(L * 1.5) + 4;\n  dep(0);\n  col(C.par, b.p);\n  // The stalk, straight while it feeds and a tight coil when it has snapped.\n  let x = FX, y = FY;\n  for (let j = 1; j \u003c= m; j++) {\n    const u = (j / m) * L, v = bend * sin((PI * j) / m) + amp * sin((j / m) * 6 * TAU), X = FX + u * FC - v * FS, Y = FY + u * FS + v * FC;\n    line(x, y, X, Y, 0.5);\n    (x = X), (y = Y);\n  }\n  // The bell, a cup that closes to a ball when the stalk snaps; the cilia\n  // whirl round its lip while it feeds.\n  frame(x, y, atan2(FS, FC));\n  const open = sm(0.55, 0.95, b.ext), lb = 6 + 2 * open;\n  const hwOf = (u) => {\n    const ball = 3.1 * sqrt(max(0, 1 - ((2 * u) / lb - 1) ** 2));\n    return ball + (0.8 + 4 * (u / lb) ** 0.9 - ball) * open;\n  };\n  col(C.vor, b.p);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= lb; u += 0.5) at(u, hwOf(u) * sd, 0.75);\n  }\n  for (let k = -1; k \u003c 2; k++) at(4.1 + k * 1.6, k * 1.2, 0.4, dot);\n  const hw = hwOf(lb);\n  if (open \u003c 0.1) return;\n  lastP = -1;\n  for (let k = 0; k \u003c 24; k++) at(lb + 1.3 * sin((k / 24) * TAU), hw * cos((k / 24) * TAU), 0.55 * open);\n  for (let k = 0; k \u003c 9; k++) {\n    const th = (k / 9) * TAU + b.cp, s = sin(th);\n    at(lb + 2.3 + 0.9 * s, (hw + 0.9) * cos(th), (s > 0 ? 0.85 : 0.35) * open, dot);\n  }\n}\n\nfunction rotifer(r, i, t) {\n  foot(r.s, r.a + 0.22 * sin(t * 0.4 + r.sw));\n  const L = r.L * r.ext, g = r.p, cr = sm(0.82, 0.97, r.ext);\n  dep(0);\n  col(C.rot, g);\n  // A foot of three telescoping joints, a swollen trunk, a neck, the head,\n  // and inside it the jaws of the mastax, chewing.\n  const hwOf = (u) => (u \u003c 0.36 ? 0.9 + 0.4 * floor(u / 0.12) : u \u003c 0.8 ? 2.1 + 2.5 * sin((PI * (u - 0.36)) / 0.44) : u \u003c 0.88 ? 2 : 2.9);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= L; u += 0.5) at(u, hwOf(u / L) * sd, 0.75);\n    at(-1.2, sd * 1.3, 0.7, dot);\n    at(0.72 * L, sd * (0.6 + 0.5 * sin(r.cp * 0.45)), 0.85, dot);\n  }\n  for (let k = 0; k \u003c 7; k++) at(L * (0.42 + 0.05 * k), 1.8 * sin(k * 2.4 + t * 0.6), 0.38 + 0.2 * sin(k * 1.7 + t * 2), dot);\n  // The crown: two discs of cilia whirling the opposite way to each other.\n  lastP = -1;\n  if (cr \u003c 0.02) for (let v = -2.8; v \u003c= 2.8; v += 0.7) at(L, v, 0.6);\n  else\n    for (const sd of [-1, 1]) {\n      const cx = FX + FC * (L + 1.8) - FS * sd * 2.9, cy = FY + FS * (L + 1.8) + FC * sd * 2.9;\n      ring(cx, cy, 2.4 * cr, 0.3 * cr);\n      for (let k = 0; k \u003c 10; k++) {\n        const th = (k / 10) * TAU + sd * r.cp;\n        dot(cx + cos(th) * 3.2 * cr, cy + sin(th) * 3.2 * cr, (0.55 + 0.45 * sin(th * 3 + t * 5)) * cr * g);\n      }\n    }\n}\n\nfunction volvox(o) {\n  const { x, y, R, pts } = o, g = o.p, ax = cos(o.h), ay = sin(o.h), c = cos(o.ph), s = sin(o.ph), c1 = 1 - c;\n  // Rolling about its swimming axis, which lies in the view plane (Rodrigues).\n  const rot = (px, py, pz, k) => {\n    const kd = (ax * px + ay * py) * c1, u = px * c + ay * pz * s + ax * kd, v = py * c - ax * pz * s + ay * kd;\n    return k ? dot(x + R * u, y + R * v, pz * c + (ax * py - ay * px) * s > 0 ? 0.85 : 0.5, u * u - v * v) : frame(x + R * u, y + R * v, 0);\n  };\n  dep(o.z);\n  col(C.cell, g);\n  for (let k = 0; k \u003c pts.length; k += 3) rot(pts[k], pts[k + 1], pts[k + 2], 1);\n  col(C.vrim, g);\n  ring(x, y, R + 0.4, 0.55);\n  // The faint diffraction fringe outside the rim.\n  ring(x, y, R + 2.6, 0.3);\n  col(C.dau, g);\n  for (const [px, py, pz, r] of o.d) rot(px, py, pz, 0), ring(FX, FY, r, 0.95), dot(FX, FY, 0.7);\n}\n\nfunction paramecium(o, i, t) {\n  const { a, B } = o, gs = cos(o.spin), n = ceil(TAU * sqrt((a * a + B * B) / 2) * 1.3);\n  frame(o.x, o.y, o.h);\n  dep(o.z);\n  col(C.par, o.p);\n  // Outline and cilia: a metachronal wave runs back along the body.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const th = (k / n) * TAU, ct = cos(th), st = sin(th), bw = B * (1 + 0.16 * ct - 0.08 * ct * ct), wv = sin(th * 9 - t * 10);\n      let nu = ct / a, nv = st / bw, nl = sqrt(nu * nu + nv * nv);\n      const nx = nu * FC - nv * FS, ny = nu * FS + nv * FC, q = (nx * nx - ny * ny) / (nl * nl);\n      (nu = (1.5 * nu) / nl), (nv = (1.5 * nv) / nl);\n      if (!pass) at(a * ct, bw * st, 0.62 + 0.25 * wv, put, q);\n      else if (wv > 0.2) at(a * ct + nu, bw * st + nv, 0.6 * wv, dot, q);\n    }\n  }\n  // The oral groove, a bright furrow from the front to the middle that swaps\n  // sides as the cell spins on its long axis.\n  lastP = -1;\n  for (let u = 0.05; u \u003c 0.62; u += 0.06) at(u * a, gs * B * (0.3 + 0.75 * u) * (u \u003c 0.5 ? 1 : 1 - (u - 0.5) * 6), 0.5 * abs(gs) + 0.12, put, 0);\n  // Granules and food vacuoles carried round by cyclosis, and the two\n  // contractile vacuoles filling and emptying.\n  col(C.gran, o.p);\n  for (let k = 0; k \u003c 23; k++) {\n    const th = k * 2.4 + o.cy * (k % 3 ? 0.6 : 1), r = 0.25 + 0.6 * ((k * 0.618) % 1);\n    at(0.8 * a * r * cos(th), 0.62 * B * r * sin(th), k % 3 ? 0.36 + 0.16 * sin(t * 3 + k) : 0.6, dot, 0);\n  }\n  col(C.par, o.p);\n  o.cv.forEach((c, j) => c > 0.31 && c \u003c 0.85 && ring(FX + (j ? -0.55 : 0.55) * a * FC, FY + (j ? -0.55 : 0.55) * a * FS, 1.6 * c, 0.55));\n}\n\nfunction diatom(o) {\n  const { a, B } = o;\n  if (o.f \u003c 0) frame(o.x, o.y, o.h);\n  else fil(o.f), frame(fx + fty * (3.4 + B), fy - ftx * (3.4 + B), atan2(fty, ftx));\n  dep(o.z);\n  col(C.dia, o.p);\n  // The rim glints at each stria; the raphe runs down the middle, broken at\n  // the central nodule.\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = -a; u \u003c= a; u += 0.6) at(u, sd * B * (1 - (u / a) ** 2) ** 0.75, 0.62 + 0.3 * cos(u * PI));\n  }\n  for (let u = -0.8 * a; u \u003c= 0.8 * a; u += 1.6) if (abs(u) > 1) at(u, 0, 0.6, dot);\n  at(0, 0, 0.8, dot);\n}\n\nfunction oscillatoria(o, i, t, OP) {\n  const n = o.L, hl = n / 2;\n  // The centre line, from the middle out to each end, bending as the ends wave.\n  for (const sd of [-1, 1]) {\n    let x = o.x, y = o.y;\n    for (let s = 1; s \u003c= hl; s++) {\n      const a = o.h + o.k * s * sd + 0.6 * sin(o.ph + sd) * (s / hl) ** 3;\n      (x += cos(a) * sd), (y += sin(a) * sd), (OP[(hl + s * sd) * 2] = x), (OP[(hl + s * sd) * 2 + 1] = y);\n    }\n  }\n  (OP[n] = o.x), (OP[n + 1] = o.y);\n  dep(o.z);\n  col(C.osc, o.p);\n  for (const e of [-1.2, 1.2]) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const x = OP[k * 2], y = OP[k * 2 + 1], dx = OP[k * 2 + 2] - x, dy = OP[k * 2 + 3] - y;\n      put(x - dy * e, y + dx * e, 0.6, dy * dy - dx * dx);\n    }\n  }\n  // Cross walls between the cells.\n  for (let k = 1; k \u003c n; k += 2) dot(OP[k * 2], OP[k * 2 + 1], 0.4);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  (S = P.S), (Q = P.Q), (ox = P.ox), (oy = P.oy), (foc = P.foc), (m1 = P.m1);\n  S.fill(0);\n  Q.fill(0);\n  const t = P.t, show = (L, f) => L.forEach((o, i) => o.p > 0.02 && f(o, i, t, P.OP));\n  thread();\n  show(P.vor, vorticella);\n  show(P.rot, rotifer);\n  show(P.dia, diatom);\n  show(P.osc, oscillatoria);\n  show(P.vol, volvox);\n  show(P.par, paramecium);\n  show(P.fla, (o) => {\n    const c = cos(o.h), s = sin(o.h);\n    dep(o.z);\n    col(o.k ? C.par : C.eug, o.p);\n    dot(o.x, o.y, 0.9);\n    dot(o.x - c * 1.2, o.y - s * 1.2, 0.55);\n    for (let k = 1; k \u003c= 3; k++) dot(o.x + c * (1 + k) - s * sin(t * 20 + k * 1.3) * 0.7, o.y + s * (1 + k) + c * sin(t * 20 + k * 1.3) * 0.7, 0.3);\n  });\n  show(P.det, (o) => {\n    dep(o.z);\n    col(o.k ? C.amb : C.gry, o.p);\n    for (const [dx, dy, s] of o.pts) dot(o.x + dx, o.y + dy, s);\n  });\n  col(C.par);\n  show(P.bac, (o) => (dep(o.z), dot(o.x, o.y, o.s * o.p)));\n  blur(Q, P.T);\n  // Light into LEDs, toned by the brightest channel so a green stays green,\n  // each lit LED with a grain of its own, and under it all the still grain\n  // of particles too small to resolve, below 24/255. The grain stays put:\n  // drawn anew every frame it was static, and it took the motion from 1.38\n  // to 2.31.\n  const m2 = P.m2, { V, L, QS } = P, c3 = K0;\n  for (let i = 0; i \u003c HW * HH; i++) QS[i] = Q[i * 3] + Q[i * 3 + 1] + Q[i * 3 + 2];\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      // The halo cell under the LED and its neighbours toward it, bilinear.\n      const o = p * 3, i = x >> 1, j = (y >> 1) * HW, i2 = cl(i + (x & 1) * 2 - 1, 0, HW - 1), j2 = cl((y >> 1) + (y & 1) * 2 - 1, 0, HH - 1) * HW;\n      const A = j + i, B = j + i2, c = j2 + i, e = j2 + i2, hl = QS[A] + QS[B] + QS[c] + QS[e] > 0, hh = h32(p, 7), sh = hh >>> 24;\n      for (let n = 0; n \u003c 3; n++) c3[n] = S[o + n] + (hl ? 0.17 * Q[A * 3 + n] + 0.056 * (Q[B * 3 + n] + Q[c * 3 + n]) + 0.019 * Q[e * 3 + n] : 0);\n      const mx = max(c3[0], c3[1], c3[2]), k = mx > 0.001 ? (LUT[min(1023, (mx * 256) | 0)] / mx) * (0.8 + sh / 640) : 0, l = (mx * k) / 255;\n      for (let n = 0, hb; n \u003c 3; n++) (hb = (hh >>> (n * 8)) & 255), (c3[n] = V[p] * (c3[n] * k * (1 + hb / 2200) + sh * (0.062 + (hb & 15) / 500) + m1 * FIELD[n]));\n      // Phase contrast: the field grey, each body darker than it, and a\n      // bright halo on the LEDs beside it.\n      if (m2) {\n        const dk = 1 - 0.8 * cl(l * 1.6, 0, 1), ha = max(0, max(L[p - (x > 0)], L[p + (x \u003c 63)], L[p - (y > 0) * W], L[p + (y \u003c 127) * W]) - l) * 160;\n        for (let n = 0; n \u003c 3; n++) c3[n] += m2 * (V[p] * (PHASE[n] * dk + ha + ((hh >>> (n * 8 + 3)) & 15)) - c3[n]);\n      }\n      L[p] = l;\n      display.setPixel(x, y, min(255, c3[0]) | 0, min(255, c3[1]) | 0, min(255, c3[2]) | 0);\n    }\n}\n","layer":{"id":"layer-dark-field","type":"code","name":"dark-field","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dark Field\n// Family:  microbe\n// Idea:    A drop of pond water under a dark-field microscope, everything alive glowing on black by the light it scatters: Volvox roll with daughters inside, paramecia glide in a shimmer of cilia, diatoms slide and stop, Vorticella bells feed on long stalks that snap into coils, and what lies outside the focal plane blurs to a soft halo.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after dark-field and Rheinberg illumination in the light microscope\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1\n//\n// Knob 1: Light. At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos.\n// Knob 2: Speed. At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower.\n// Knob 3: Crowd. At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in.\n// Knob 4: Focus. Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit.\n// Buttons: K1 tap knocks the slide: the view jolts, every Vorticella snaps its stalk into a coil and the rotifer pulls in its crown. On its own one bell snaps four seconds in, then one every ten seconds or so.\n\nconst W = 64, H = 128, N = W * H, HW = 32, HH = 64;\nconst { min, max, floor, round, ceil, sin, cos, sqrt, exp, abs, PI, atan2 } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rr = (a, b) => a + (b - a) * rnd();\nfunction h32(a, b) {\n  let h = Math.imul(a ^ Math.imul(b, 0x27d4eb2d), 0x9e3779b1);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca77);\n  h ^= h >>> 13;\n  return (h ^ (h >>> 16)) >>> 0;\n}\n\n// Small things live on a torus a little larger than the view, so what leaves\n// one side comes back at the other out of sight. Big swimmers turn back\n// toward the middle near an edge.\nconst wrap = (o, m = 12) => ((o.x -= (W + 2 * m) * floor((o.x + m) / (W + 2 * m))), (o.y -= (H + 2 * m) * floor((o.y + m) / (H + 2 * m))));\nconst go = (o, v) => ((o.x += cos(o.h) * v), (o.y += sin(o.h) * v));\nfunction swim(o, d) {\n  if ((o.z += o.vz * d) > 1 || o.z \u003c -1) o.vz = -o.vz;\n  if (o.x > 8 && o.x \u003c 56 && o.y > 12 && o.y \u003c 116) return;\n  let e = atan2(64 - o.y, 32 - o.x) - o.h;\n  o.h += cl(e - TAU * round(e / TAU), -1, 1) * 1.2 * d;\n}\n// Colours each thing scatters in dark field.\nconst C = {\n  cell: [110, 255, 118], vrim: [175, 255, 165], dau: [64, 255, 92], par: [200, 222, 255], gran: [255, 236, 196], dia: [255, 194, 72],\n  vor: [222, 236, 255], rot: [255, 226, 186], eug: [132, 255, 140], amb: [255, 184, 100], gry: [212, 206, 198], wall: [205, 242, 182],\n  chl: [84, 236, 90], osc: [120, 250, 222],\n};\n// Rheinberg: an annular filter yellow at its sides and red top and bottom, so\n// an edge's colour follows the way it faces (q = nx² - ny²), on a blue field.\nconst RA = [255, 220, 46], RB = [255, 44, 40];\nconst RM = RA.map((v, i) => (v + RB[i]) / 2), RH = RA.map((v, i) => (v - RB[i]) / 2);\nconst FIELD = [4, 16, 60], PHASE = [74, 82, 72];\n\n// The algal thread, a Spirogyra filament across the lower third: its centre\n// at arc length s and its unit tangent.\nconst FL = 136;\nlet fx = 0, fy = 0, ftx = 1, fty = 0;\nfunction fil(s) {\n  const dy = -0.2 + 0.225 * cos(s * 0.045 + 0.3), l = sqrt(1 + dy * dy);\n  (fx = s - 30), (fy = 109 - 0.2 * s + 5 * sin(s * 0.045 + 0.3)), (ftx = 1 / l), (fty = dy / l);\n}\n\n// Light goes into a sharp buffer and, by how far the thing lies from the\n// focal plane, into a halo buffer at half resolution that is blurred and\n// spread back over the LEDs.\nlet S, Q, ox = 0, oy = 0, foc = 0, m1 = 0, wS = 1, wQ = 0, lastP = -1;\nconst K0 = [0, 0, 0], K1 = [0, 0, 0];\nfunction col(c, g = 1) {\n  for (let i = 0; i \u003c 3; i++) (K0[i] = (g * (c[i] + m1 * (RM[i] - c[i]))) / 255), (K1[i] = (g * m1 * RH[i]) / 255);\n}\nfunction dep(z) {\n  const b = max(0, abs(z - foc) - 0.15) * 2.4;\n  wS = max(0, 1 - b);\n  wQ = min(1, b) / (1 + 0.5 * max(0, b - 1));\n}\nfunction put(x, y, s, q = 0) {\n  const xi = round(x - ox), yi = round(y - oy), o = (yi * W + xi) * 3;\n  if (xi \u003c 0 || yi \u003c 0 || xi >= W || yi >= H || o === lastP) return;\n  lastP = o;\n  const r = s * (K0[0] + q * K1[0]), g = s * (K0[1] + q * K1[1]), b = s * (K0[2] + q * K1[2]), h = ((yi >> 1) * HW + (xi >> 1)) * 3;\n  if (wS) (S[o] += r * wS), (S[o + 1] += g * wS), (S[o + 2] += b * wS);\n  if (wQ) (Q[h] += r * wQ), (Q[h + 1] += g * wQ), (Q[h + 2] += b * wQ);\n}\n// A point: small things lose themselves out of focus, so less goes to the halo.\nfunction dot(x, y, s, q = 0) {\n  const k = wQ;\n  (lastP = -1), (wQ *= 0.4);\n  put(x, y, s, q);\n  wQ = k;\n}\nfunction line(x0, y0, x1, y1, s) {\n  const dx = x1 - x0, dy = y1 - y0, n = max(1, ceil(max(abs(dx), abs(dy)))), q = (dy * dy - dx * dx) / (dx * dx + dy * dy + 1e-6);\n  for (let k = 0; k \u003c n; k++) put(x0 + (dx * k) / n, y0 + (dy * k) / n, s, q);\n}\nfunction ring(cx, cy, r, s) {\n  lastP = -1;\n  for (let k = 0, n = max(8, ceil(TAU * r * 1.4)); k \u003c n; k++) {\n    const c = cos((k / n) * TAU), sn = sin((k / n) * TAU);\n    put(cx + r * c, cy + r * sn, s, c * c - sn * sn);\n  }\n}\n// A body's own frame: at(u, v) is u along its axis and v across it.\nlet FX = 0, FY = 0, FC = 1, FS = 0;\nconst frame = (x, y, a) => ((FX = x), (FY = y), (FC = cos(a)), (FS = sin(a)));\nconst at = (u, v, s, f = put, q = FS * FS - FC * FC) => f(FX + u * FC - v * FS, FY + u * FS + v * FC, s, q);\n// A three-wide box blur run twice, on the half-resolution grid.\nfunction blur(A, T) {\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [a, b, s, n] = pass & 1 ? [T, A, HW * 3, HH] : [A, T, 3, HW];\n    for (let y = 0, o = 0; y \u003c HH; y++)\n      for (let x = 0; x \u003c HW; x++)\n        for (let c = 0, i = pass & 1 ? y : x; c \u003c 3; c++, o++) b[o] = (a[o - (i > 0 ? s : 0)] + a[o] + a[o + (i \u003c n - 1 ? s : 0)]) / 3;\n  }\n}\n// Light to LED level: black below 0.1, a gain of 3, a soft shoulder above 0.8.\nconst LUT = Float32Array.from({ length: 1024 }, (_, i) => {\n  const v = max(0, i / 256 - 0.1) * 3;\n  return 255 * (v \u003c 0.8 ? v : 1 - 0.2 * exp(-(v - 0.8) / 0.2));\n});\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), side = () => (rnd() \u003c 0.5 ? -1 : 1), A = (n, f) => Array.from({ length: n }, (_, i) => ({ x: rr(-12, 76), y: rr(-12, 140), h: rnd() * TAU, ...f(i) }));\n  const P = (params.s = { t: 0, S: F(N * 3), Q: F(HW * HH * 3), T: F(HW * HH * 3), QS: F(HW * HH), L: F(N), V: F(N), OP: F(140), nx: 0, ny: 0, ex: 0, ey: 0, nt: 3.2, ja: 0, jt: 9, jx: 0, jy: 0, s1: rnd() * 7, s2: rnd() * 7 });\n  // The round field stop of the eyepiece clips the panel's two ends.\n  for (let p = 0; p \u003c N; p++) P.V[p] = sm(67.5, 62, sqrt(((p & 63) - 31.5) ** 2 + (((p >> 6) - 63.5) * 1.02) ** 2));\n  // Volvox: cells on a sphere (a Fibonacci spiral) and daughter colonies inside.\n  P.vol = [[0.18, 12, 21], [-0.8, 9, 57], [0.2, 9.5, 112], [0.62, 11, 80]].map(([z, R, y]) => {\n    const n = round(0.7 * R * R), pts = F(n * 3), d = [];\n    for (let k = 0; k \u003c n; k++) {\n      const yv = 1 - (2 * k + 1) / n, q = sqrt(1 - yv * yv);\n      pts.set([cos(k * 2.4) * q, yv, sin(k * 2.4) * q], k * 3);\n    }\n    for (let k = 0, m = 3 + rnd() * 3; k \u003c m; k++) {\n      const a = rnd() * TAU, b = rr(-1, 1), r = rr(0.2, 0.52), q = sqrt(1 - b * b) * r;\n      d.push([cos(a) * q, b * r, sin(a) * q, rr(0.17, 0.25) * R]);\n    }\n    return { x: rr(16, 48), y: y + rr(-9, 9), z, vz: rr(-0.025, 0.025), R, h: rnd() * TAU, v: rr(1.6, 2.8), ph: 0, w: rr(0.4, 0.7) * side(), pts, d };\n  });\n  // Paramecia: slippers with an oral groove that swaps sides as they spin.\n  P.par = [[0.05, 42], [0.14, 115], [-0.12, 70], [0.75, 20], [-0.85, 92]].map(([z, y]) => ({\n    x: rr(14, 50), y: y + rr(-10, 10), z, vz: rr(-0.05, 0.05), h: rnd() * TAU, v: rr(8, 11), a: rr(11.5, 13.5), B: rr(4.4, 5.2), spin: 0, ws: rr(1.6, 2.4),\n    rev: 0, tt: rr(3, 8), cy: 0, cv: [rnd(), rnd()],\n  }));\n  // Diatoms: two glide along the thread, two on floating debris, the rest on\n  // the slide's glass, deeper down.\n  P.dia = A(9, (i) => ({ z: i \u003c 2 ? 0 : i \u003c 4 ? rr(-0.05, 0.2) : rr(0.75, 0.92), a: rr(6, 9), B: rr(2.1, 2.6), go: rnd() \u003c 0.6, tt: rr(0.5, 3), dir: side(), v: rr(3.5, 6), f: i \u003c 2 ? 44 + 34 * i + rr(-6, 6) : -1 }));\n  // Oscillatoria: blue-green threads that glide along their length and wave both ends.\n  P.osc = [[18, 17, -0.04], [46, 40, 0.1], [30, 117, 0.3]].map(([x, y, z], i) => ({ x: x + rr(-9, 9), y: y + rr(-9, 9), z, h: rr(-0.6, 0.6) + (i & 1) * PI, L: 2 * round(rr(17, 24)), k: rr(-0.015, 0.015), ph: rnd() * 7, v: rr(1.2, 2.2) }));\n  // Vorticella bells on the thread: anchor, lean, stalk length. Bell 0 snaps first.\n  P.vor = [[46, -0.22, 46], [50, 0.16, 36], [41, -0.55, 30], [56, 0.45, 42], [36, -0.05, 52], [62, 0.1, 28], [30, -0.4, 40]].map(([s, a, L], i) => ({ s, a: a - PI / 2, L, ext: 1, st: 0, tt: i ? rr(9, 18) : 4.1, cp: 0 }));\n  P.rot = [[84, -2.05], [16, -1.15]].map(([s, a]) => ({ s, a, L: 21, ext: 1, st: 0, tt: rr(7, 12), cp: 0, sw: rnd() * 7 }));\n  P.fla = A(44, (i) => ({ z: rr(-0.9, 0.9), v: rr(6, 18), tt: 0, k: i % 3, ph: rnd() * 7 }));\n  // Detritus: grains and glittering flakes, amber plant matter or grey grit,\n  // a third of it settled on the slide. Bacteria: points crowding near the\n  // thread they feed on, most jiggling, some swimming.\n  P.det = A(48, (i) => {\n    const pts = [], m = 1 + floor(rnd() * rnd() * 9), e = m > 3 ? 2 : 1;\n    for (let k = 0; k \u003c m; k++) pts.push([e * round(rr(-1.5, 1.5)), e * round(rr(-1.5, 1.5)), rr(0.35, 0.8)]);\n    return { z: i % 3 ? rr(-1, 1) * rnd() : rr(0.8, 1), pts, k: rnd() \u003c 0.55 };\n  });\n  P.bac = A(580, () => ({ z: rr(-1, 1) * rnd(), s: rr(0.4, 0.8), m: rnd() \u003c 0.3 }));\n}\n\n// Knocking the slide.\nfunction knock(P) {\n  const a = rnd() * TAU;\n  (P.ja = 3.5), (P.jt = 0), (P.jx = cos(a)), (P.jy = sin(a));\n  for (const o of [...P.vor, ...P.rot]) if (o.st !== 1) o.st = 1;\n  for (const o of P.par) (o.rev = 0.6), (o.tr = rr(-3, 3));\n  for (const o of [...P.vol, ...P.fla, ...P.det]) (o.x += P.jx * rr(1, 4)), (o.y += P.jy * rr(1, 4));\n}\n\n// A stalk or body that waits and snaps in to lo. It holds there, then stretches out again.\nfunction cycle(o, d, down, lo, up, hold, wait) {\n  if (o.st === 0 && (o.tt -= d) \u003c 0) o.st = 1;\n  else if (o.st === 1 && (o.ext -= d * down) \u003c= lo) (o.ext = lo), (o.st = 2), (o.tt = hold * rr(1, 2));\n  else if (o.st === 2 && (o.tt -= d) \u003c 0) o.st = 3;\n  else if (o.st === 3 && (o.ext += d * up * (1.12 - o.ext)) >= 1) (o.ext = 1), (o.st = 0), (o.tt = wait * rr(1, 2.2));\n}\n\nfunction life(P, d, crowd, first) {\n  // Each kind fades its members in and out by the Crowd knob.\n  const each = (L, k, f) =>\n    L.forEach((o, i) => {\n      const tg = i \u003c k ? 1 : 0;\n      o.p = first ? tg : o.p + (tg - o.p) * min(1, d * 2.5);\n      f(o, i);\n    });\n  const t = P.t;\n  each(P.vol, 3 + round(crowd), (o, i) => {\n    o.h += sin(t * 0.21 + i * 2) * 0.15 * d;\n    go(o, o.v * d);\n    o.ph += o.w * d;\n    swim(o, d);\n  });\n  each(P.par, 3 + round(2 * crowd), (o, i) => {\n    o.spin += o.ws * d;\n    if (o.rev > 0) (o.rev -= d), (o.h += o.tr * d), go(o, -o.v * 0.5 * d);\n    else {\n      o.h += sin(t * 0.5 + i * 2.3) * 0.25 * d;\n      if ((o.tt -= d) \u003c 0) (o.rev = 0.7), (o.tr = rr(-3, 3)), (o.tt = rr(4, 9));\n      go(o, o.v * d);\n    }\n    o.cy += d * 0.7;\n    (o.cv[0] = (o.cv[0] + d * 0.24) % 1), (o.cv[1] = (o.cv[1] + d * 0.21) % 1);\n    swim(o, d);\n  });\n  // Diatoms glide on their raphe and stop. Then they set off again, often backwards.\n  each(P.dia, 5 + round(4 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.go = !o.go), (o.tt = o.go ? rr(2, 4) : rr(0.8, 2.2)), o.go && rnd() \u003c 0.4 && (o.dir = -o.dir);\n    const v = o.go ? o.v * o.dir * d * sm(0, 0.4, o.tt) : 0;\n    if (o.f \u003c 0) go(o, v), wrap(o);\n    else if ((o.f += v) \u003c 8 || o.f > FL - 8) (o.dir = -o.dir), (o.f = cl(o.f, 8, FL - 8));\n  });\n  // Oscillatoria reverse when their front end runs out toward an edge.\n  each(P.osc, 2 + round(crowd), (o) => {\n    o.ph += d * 1.4;\n    go(o, o.v * d);\n    if ((o.x \u003c 6 || o.x > 58 || o.y \u003c 8 || o.y > 120) && cos(o.h) * (32 - o.x) + sin(o.h) * (64 - o.y) \u003c 0) o.h += PI;\n  });\n  each(P.vor, 5 + round(2 * crowd), (b) => ((b.cp += d * 7), cycle(b, d, 14, 0.13, 0.38, 0.5, 8)));\n  each(P.rot, 1 + round(crowd), (r) => ((r.cp += d * 9), cycle(r, d, 4, 0.5, 1.3, 1, 6)));\n  each(P.fla, 20 + round(24 * crowd), (o) => {\n    if ((o.tt -= d) \u003c 0) (o.h += rr(-2, 2)), (o.v = rr(5, 20)), (o.tt = rr(0.25, 1.4));\n    o.h += sin(o.ph + t * 3) * d * 1.2;\n    go(o, o.v * d);\n    wrap(o);\n  });\n  // The slow current carries grit and bacteria up and to the right, fastest\n  // midway between the coverslip (z -1) and the slide (z 1).\n  const j = sqrt(d * 30);\n  for (const [L, k, jj] of [[P.det, 28 + round(20 * crowd), 0.06], [P.bac, 460 + round(120 * crowd), 0.5]])\n    each(L, k, (o) => {\n      const f = 1 - o.z * o.z;\n      o.x += 1.7 * f * d + (rnd() - 0.5) * jj * j;\n      o.y -= f * d + (rnd() - 0.5) * jj * j;\n      if (o.m) rnd() \u003c d * 0.8 && (o.h += rr(-2.5, 2.5)), go(o, 9 * d);\n      wrap(o);\n    });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = (rd * cl(k[1], 0.2, 3)) / 2, l = cl(k[0], 0, 1);\n  (P.m1 = cl(l * 2, 0, 1)), (P.m2 = cl(l * 2 - 1, 0, 1)), (P.foc = cl(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) knock(P);\n  const t = (P.t += d);\n  // The stage is never quite still: a slow creep, a nudge now and then, and\n  // the shake of a knock.\n  if ((P.nt -= d) \u003c 0) (P.nt = rr(6, 11)), (P.nx = cl(P.nx + rr(-6, 6), -5, 5)), (P.ny = cl(P.ny + rr(-8, 8), -7, 7));\n  const e = min(1, d * 3), sh = P.ja * exp(-(P.jt += rd) * 5) * sin(P.jt * 40);\n  (P.ex += (P.nx - P.ex) * e), (P.ey += (P.ny - P.ey) * e);\n  P.ox = 2.5 * sin(t * 0.13 + P.s1) + 1.2 * sin(t * 0.31 + 2) + P.ex + sh * P.jx;\n  P.oy = 3.5 * sin(t * 0.09 + P.s2) + 1.5 * sin(t * 0.23) + P.ey + sh * P.jy;\n  life(P, d, cl(k[2], 0, 1), !P.init);\n  P.init = true;\n}\n\nfunction thread() {\n  dep(0);\n  col(C.wall);\n  for (const sd of [-2.6, 2.6]) {\n    lastP = -1;\n    for (let s = 0; s \u003c= FL; s += 0.7) fil(s), put(fx - fty * sd, fy + ftx * sd, 0.62, fty * fty - ftx * ftx);\n  }\n  for (let s = 5; s \u003c FL; s += 9) fil(s), line(fx - fty * 1.6, fy + ftx * 1.6, fx + fty * 1.6, fy - ftx * 1.6, 0.3);\n  // The chloroplast, a green ribbon winding round inside the cell wall.\n  col(C.chl);\n  for (let s = 0; s \u003c= FL; s += 1.3) fil(s), dot(fx - fty * 1.7 * sin(s * 0.5), fy + ftx * 1.7 * sin(s * 0.5), 0.5 + 0.25 * cos(s * 0.5));\n}\n\n// Frames a thing standing on the thread at arc length s, leaning by a.\nfunction foot(s, a) {\n  fil(s);\n  frame(fx + fty * 2.6, fy - ftx * 2.6, a);\n}\n\nfunction vorticella(b, i, t) {\n  foot(b.s, b.a + 0.07 * sin(t * 0.6 + i * 1.7));\n  const L = b.L * b.ext, amp = 2 * (1 - b.ext) ** 0.6, bend = 3 * sin(t * 0.45 + i) * b.ext, m = ceil(L * 1.5) + 4;\n  dep(0);\n  col(C.par, b.p);\n  // The stalk, straight while it feeds and a tight coil when it has snapped.\n  let x = FX, y = FY;\n  for (let j = 1; j \u003c= m; j++) {\n    const u = (j / m) * L, v = bend * sin((PI * j) / m) + amp * sin((j / m) * 6 * TAU), X = FX + u * FC - v * FS, Y = FY + u * FS + v * FC;\n    line(x, y, X, Y, 0.5);\n    (x = X), (y = Y);\n  }\n  // The bell, a cup that closes to a ball when the stalk snaps; the cilia\n  // whirl round its lip while it feeds.\n  frame(x, y, atan2(FS, FC));\n  const open = sm(0.55, 0.95, b.ext), lb = 6 + 2 * open;\n  const hwOf = (u) => {\n    const ball = 3.1 * sqrt(max(0, 1 - ((2 * u) / lb - 1) ** 2));\n    return ball + (0.8 + 4 * (u / lb) ** 0.9 - ball) * open;\n  };\n  col(C.vor, b.p);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= lb; u += 0.5) at(u, hwOf(u) * sd, 0.75);\n  }\n  for (let k = -1; k \u003c 2; k++) at(4.1 + k * 1.6, k * 1.2, 0.4, dot);\n  const hw = hwOf(lb);\n  if (open \u003c 0.1) return;\n  lastP = -1;\n  for (let k = 0; k \u003c 24; k++) at(lb + 1.3 * sin((k / 24) * TAU), hw * cos((k / 24) * TAU), 0.55 * open);\n  for (let k = 0; k \u003c 9; k++) {\n    const th = (k / 9) * TAU + b.cp, s = sin(th);\n    at(lb + 2.3 + 0.9 * s, (hw + 0.9) * cos(th), (s > 0 ? 0.85 : 0.35) * open, dot);\n  }\n}\n\nfunction rotifer(r, i, t) {\n  foot(r.s, r.a + 0.22 * sin(t * 0.4 + r.sw));\n  const L = r.L * r.ext, g = r.p, cr = sm(0.82, 0.97, r.ext);\n  dep(0);\n  col(C.rot, g);\n  // A foot of three telescoping joints, a swollen trunk, a neck, the head,\n  // and inside it the jaws of the mastax, chewing.\n  const hwOf = (u) => (u \u003c 0.36 ? 0.9 + 0.4 * floor(u / 0.12) : u \u003c 0.8 ? 2.1 + 2.5 * sin((PI * (u - 0.36)) / 0.44) : u \u003c 0.88 ? 2 : 2.9);\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = 0; u \u003c= L; u += 0.5) at(u, hwOf(u / L) * sd, 0.75);\n    at(-1.2, sd * 1.3, 0.7, dot);\n    at(0.72 * L, sd * (0.6 + 0.5 * sin(r.cp * 0.45)), 0.85, dot);\n  }\n  for (let k = 0; k \u003c 7; k++) at(L * (0.42 + 0.05 * k), 1.8 * sin(k * 2.4 + t * 0.6), 0.38 + 0.2 * sin(k * 1.7 + t * 2), dot);\n  // The crown: two discs of cilia whirling the opposite way to each other.\n  lastP = -1;\n  if (cr \u003c 0.02) for (let v = -2.8; v \u003c= 2.8; v += 0.7) at(L, v, 0.6);\n  else\n    for (const sd of [-1, 1]) {\n      const cx = FX + FC * (L + 1.8) - FS * sd * 2.9, cy = FY + FS * (L + 1.8) + FC * sd * 2.9;\n      ring(cx, cy, 2.4 * cr, 0.3 * cr);\n      for (let k = 0; k \u003c 10; k++) {\n        const th = (k / 10) * TAU + sd * r.cp;\n        dot(cx + cos(th) * 3.2 * cr, cy + sin(th) * 3.2 * cr, (0.55 + 0.45 * sin(th * 3 + t * 5)) * cr * g);\n      }\n    }\n}\n\nfunction volvox(o) {\n  const { x, y, R, pts } = o, g = o.p, ax = cos(o.h), ay = sin(o.h), c = cos(o.ph), s = sin(o.ph), c1 = 1 - c;\n  // Rolling about its swimming axis, which lies in the view plane (Rodrigues).\n  const rot = (px, py, pz, k) => {\n    const kd = (ax * px + ay * py) * c1, u = px * c + ay * pz * s + ax * kd, v = py * c - ax * pz * s + ay * kd;\n    return k ? dot(x + R * u, y + R * v, pz * c + (ax * py - ay * px) * s > 0 ? 0.85 : 0.5, u * u - v * v) : frame(x + R * u, y + R * v, 0);\n  };\n  dep(o.z);\n  col(C.cell, g);\n  for (let k = 0; k \u003c pts.length; k += 3) rot(pts[k], pts[k + 1], pts[k + 2], 1);\n  col(C.vrim, g);\n  ring(x, y, R + 0.4, 0.55);\n  // The faint diffraction fringe outside the rim.\n  ring(x, y, R + 2.6, 0.3);\n  col(C.dau, g);\n  for (const [px, py, pz, r] of o.d) rot(px, py, pz, 0), ring(FX, FY, r, 0.95), dot(FX, FY, 0.7);\n}\n\nfunction paramecium(o, i, t) {\n  const { a, B } = o, gs = cos(o.spin), n = ceil(TAU * sqrt((a * a + B * B) / 2) * 1.3);\n  frame(o.x, o.y, o.h);\n  dep(o.z);\n  col(C.par, o.p);\n  // Outline and cilia: a metachronal wave runs back along the body.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const th = (k / n) * TAU, ct = cos(th), st = sin(th), bw = B * (1 + 0.16 * ct - 0.08 * ct * ct), wv = sin(th * 9 - t * 10);\n      let nu = ct / a, nv = st / bw, nl = sqrt(nu * nu + nv * nv);\n      const nx = nu * FC - nv * FS, ny = nu * FS + nv * FC, q = (nx * nx - ny * ny) / (nl * nl);\n      (nu = (1.5 * nu) / nl), (nv = (1.5 * nv) / nl);\n      if (!pass) at(a * ct, bw * st, 0.62 + 0.25 * wv, put, q);\n      else if (wv > 0.2) at(a * ct + nu, bw * st + nv, 0.6 * wv, dot, q);\n    }\n  }\n  // The oral groove, a bright furrow from the front to the middle that swaps\n  // sides as the cell spins on its long axis.\n  lastP = -1;\n  for (let u = 0.05; u \u003c 0.62; u += 0.06) at(u * a, gs * B * (0.3 + 0.75 * u) * (u \u003c 0.5 ? 1 : 1 - (u - 0.5) * 6), 0.5 * abs(gs) + 0.12, put, 0);\n  // Granules and food vacuoles carried round by cyclosis, and the two\n  // contractile vacuoles filling and emptying.\n  col(C.gran, o.p);\n  for (let k = 0; k \u003c 23; k++) {\n    const th = k * 2.4 + o.cy * (k % 3 ? 0.6 : 1), r = 0.25 + 0.6 * ((k * 0.618) % 1);\n    at(0.8 * a * r * cos(th), 0.62 * B * r * sin(th), k % 3 ? 0.36 + 0.16 * sin(t * 3 + k) : 0.6, dot, 0);\n  }\n  col(C.par, o.p);\n  o.cv.forEach((c, j) => c > 0.31 && c \u003c 0.85 && ring(FX + (j ? -0.55 : 0.55) * a * FC, FY + (j ? -0.55 : 0.55) * a * FS, 1.6 * c, 0.55));\n}\n\nfunction diatom(o) {\n  const { a, B } = o;\n  if (o.f \u003c 0) frame(o.x, o.y, o.h);\n  else fil(o.f), frame(fx + fty * (3.4 + B), fy - ftx * (3.4 + B), atan2(fty, ftx));\n  dep(o.z);\n  col(C.dia, o.p);\n  // The rim glints at each stria; the raphe runs down the middle, broken at\n  // the central nodule.\n  for (const sd of [-1, 1]) {\n    lastP = -1;\n    for (let u = -a; u \u003c= a; u += 0.6) at(u, sd * B * (1 - (u / a) ** 2) ** 0.75, 0.62 + 0.3 * cos(u * PI));\n  }\n  for (let u = -0.8 * a; u \u003c= 0.8 * a; u += 1.6) if (abs(u) > 1) at(u, 0, 0.6, dot);\n  at(0, 0, 0.8, dot);\n}\n\nfunction oscillatoria(o, i, t, OP) {\n  const n = o.L, hl = n / 2;\n  // The centre line, from the middle out to each end, bending as the ends wave.\n  for (const sd of [-1, 1]) {\n    let x = o.x, y = o.y;\n    for (let s = 1; s \u003c= hl; s++) {\n      const a = o.h + o.k * s * sd + 0.6 * sin(o.ph + sd) * (s / hl) ** 3;\n      (x += cos(a) * sd), (y += sin(a) * sd), (OP[(hl + s * sd) * 2] = x), (OP[(hl + s * sd) * 2 + 1] = y);\n    }\n  }\n  (OP[n] = o.x), (OP[n + 1] = o.y);\n  dep(o.z);\n  col(C.osc, o.p);\n  for (const e of [-1.2, 1.2]) {\n    lastP = -1;\n    for (let k = 0; k \u003c n; k++) {\n      const x = OP[k * 2], y = OP[k * 2 + 1], dx = OP[k * 2 + 2] - x, dy = OP[k * 2 + 3] - y;\n      put(x - dy * e, y + dx * e, 0.6, dy * dy - dx * dx);\n    }\n  }\n  // Cross walls between the cells.\n  for (let k = 1; k \u003c n; k += 2) dot(OP[k * 2], OP[k * 2 + 1], 0.4);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  (S = P.S), (Q = P.Q), (ox = P.ox), (oy = P.oy), (foc = P.foc), (m1 = P.m1);\n  S.fill(0);\n  Q.fill(0);\n  const t = P.t, show = (L, f) => L.forEach((o, i) => o.p > 0.02 && f(o, i, t, P.OP));\n  thread();\n  show(P.vor, vorticella);\n  show(P.rot, rotifer);\n  show(P.dia, diatom);\n  show(P.osc, oscillatoria);\n  show(P.vol, volvox);\n  show(P.par, paramecium);\n  show(P.fla, (o) => {\n    const c = cos(o.h), s = sin(o.h);\n    dep(o.z);\n    col(o.k ? C.par : C.eug, o.p);\n    dot(o.x, o.y, 0.9);\n    dot(o.x - c * 1.2, o.y - s * 1.2, 0.55);\n    for (let k = 1; k \u003c= 3; k++) dot(o.x + c * (1 + k) - s * sin(t * 20 + k * 1.3) * 0.7, o.y + s * (1 + k) + c * sin(t * 20 + k * 1.3) * 0.7, 0.3);\n  });\n  show(P.det, (o) => {\n    dep(o.z);\n    col(o.k ? C.amb : C.gry, o.p);\n    for (const [dx, dy, s] of o.pts) dot(o.x + dx, o.y + dy, s);\n  });\n  col(C.par);\n  show(P.bac, (o) => (dep(o.z), dot(o.x, o.y, o.s * o.p)));\n  blur(Q, P.T);\n  // Light into LEDs, toned by the brightest channel so a green stays green,\n  // each lit LED with a grain of its own, and under it all the still grain\n  // of particles too small to resolve, below 24/255. The grain stays put:\n  // drawn anew every frame it was static, and it took the motion from 1.38\n  // to 2.31.\n  const m2 = P.m2, { V, L, QS } = P, c3 = K0;\n  for (let i = 0; i \u003c HW * HH; i++) QS[i] = Q[i * 3] + Q[i * 3 + 1] + Q[i * 3 + 2];\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      // The halo cell under the LED and its neighbours toward it, bilinear.\n      const o = p * 3, i = x >> 1, j = (y >> 1) * HW, i2 = cl(i + (x & 1) * 2 - 1, 0, HW - 1), j2 = cl((y >> 1) + (y & 1) * 2 - 1, 0, HH - 1) * HW;\n      const A = j + i, B = j + i2, c = j2 + i, e = j2 + i2, hl = QS[A] + QS[B] + QS[c] + QS[e] > 0, hh = h32(p, 7), sh = hh >>> 24;\n      for (let n = 0; n \u003c 3; n++) c3[n] = S[o + n] + (hl ? 0.17 * Q[A * 3 + n] + 0.056 * (Q[B * 3 + n] + Q[c * 3 + n]) + 0.019 * Q[e * 3 + n] : 0);\n      const mx = max(c3[0], c3[1], c3[2]), k = mx > 0.001 ? (LUT[min(1023, (mx * 256) | 0)] / mx) * (0.8 + sh / 640) : 0, l = (mx * k) / 255;\n      for (let n = 0, hb; n \u003c 3; n++) (hb = (hh >>> (n * 8)) & 255), (c3[n] = V[p] * (c3[n] * k * (1 + hb / 2200) + sh * (0.062 + (hb & 15) / 500) + m1 * FIELD[n]));\n      // Phase contrast: the field grey, each body darker than it, and a\n      // bright halo on the LEDs beside it.\n      if (m2) {\n        const dk = 1 - 0.8 * cl(l * 1.6, 0, 1), ha = max(0, max(L[p - (x > 0)], L[p + (x \u003c 63)], L[p - (y > 0) * W], L[p + (y \u003c 127) * W]) - l) * 160;\n        for (let n = 0; n \u003c 3; n++) c3[n] += m2 * (V[p] * (PHASE[n] * dk + ha + ((hh >>> (n * 8 + 3)) & 15)) - c3[n]);\n      }\n      L[p] = l;\n      display.setPixel(x, y, min(255, c3[0]) | 0, min(255, c3[1]) | 0, min(255, c3[2]) | 0);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Crowd=0..1, Focus=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"At 0 classic dark field, white and gold on black. At 0.5 a Rheinberg filter: a deep blue field, each edge yellow where it faces sideways and red where it faces up or down. At 1 phase contrast: a grey field, the bodies dark inside bright halos."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a paramecium crosses the panel in about six seconds; at 0.2 the drop runs ten times slower."},{"name":"Crowd","min":0,"max":1,"about":"At 0 three Volvox, three paramecia, five diatoms, two Oscillatoria threads, five Vorticella bells, a rotifer and a few hundred bacteria; at 1 more of each, fading in."},{"name":"Focus","min":-1,"max":1,"about":"Which depth is sharp: near 0 the algal thread with its Vorticella and rotifer, toward -1 the water under the coverslip, toward 1 the slide's glass, where diatoms glide among settled grit."}],"start":[0,2,0,0.06],"measures":{"motion":1.3814,"detail":0.2217,"edges":0.4142,"complexity":2.0815,"coverage":0.2631,"colour":0.1726,"drift":0.1456},"knobResponse":[0.5278,0.261,0.0556,0.1832]},{"slug":"datamosh","title":"Datamosh","family":"glitch","round":15,"note":"키프레임을 잃은 영상이에요. 노을과 격자 바닥이 제 움직임대로 블록째 밀려 녹아 흐르고, 장면이 바뀌면 새 그림이 옛 움직임을 따라 부서져요.","idea":"A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.","buttons":"K1 tap drops a whole clean keyframe, which then melts.","code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","layer":{"id":"layer-datamosh","type":"code","name":"datamosh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second."},{"name":"Block","min":8,"max":16,"about":"The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame."},{"name":"Mosh","min":0,"max":1,"about":"How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1."}],"start":[0,2,8,0.06],"measures":{"motion":0.3661,"detail":0.0404,"edges":0.6611,"complexity":0.3641,"coverage":1,"colour":0.4625,"drift":0.1386},"knobResponse":[0.3092,0.1339,0.1128,0.1158]},{"slug":"day-cycle","title":"Day and Night","family":"weather","round":2,"note":"호수 위 작은 집이 하루를 지켜봐요. 해가 언덕 뒤로 지면 하늘이 노을을 지나 별과 달로 넘어가고 창에 하나씩 불이 켜져요.","idea":"A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","layer":{"id":"layer-day-cycle","type":"code","name":"day-cycle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof."},{"name":"Time","min":0.2,"max":8,"about":"How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts."},{"name":"Clouds","min":0.15,"max":1,"about":"From a few small clouds to a sky that is nearly overcast."},{"name":"Sun path","min":-1,"max":1,"about":"How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.0549,"detail":0.0184,"edges":0.5425,"complexity":0.6376,"coverage":1,"colour":0.3226,"drift":0.2553},"knobResponse":[0.2229,0.2763,0.1419,0.1052]},{"slug":"domain-warp","title":"Domain Warp","family":"noise","round":1,"note":"노이즈가 제 자신을 비틀어서 어두운 쪽빛 돌에 금빛 결이 흘러요. 대리석을 붓는 것처럼 천천히 뒤섞여요.","idea":"Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n// @ramp oklab wrap 0:#05030f 0.16:#0e1450 0.22:#2a7ac0 0.27:#100c44 0.5:#2c1478 0.62:#c83888 0.68:#ffd890 0.74:#ff6a3a 0.84:#4a0a3a 1:#05030f\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","layer":{"id":"layer-domain-warp","type":"code","name":"domain-warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#05030f","alpha":1},{"position":0.16,"color":"#0e1450","alpha":1},{"position":0.22,"color":"#2a7ac0","alpha":1},{"position":0.27,"color":"#100c44","alpha":1},{"position":0.5,"color":"#2c1478","alpha":1},{"position":0.62,"color":"#c83888","alpha":1},{"position":0.68,"color":"#ffd890","alpha":1},{"position":0.74,"color":"#ff6a3a","alpha":1},{"position":0.84,"color":"#4a0a3a","alpha":1},{"position":1,"color":"#05030f","alpha":1}],"mode":"oklab","wrap":true},"recolor":false,"knobsAnnotationRaw":"// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Cycle","min":0,"max":1,"about":"Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back."},{"name":"Speed","min":0,"max":5,"about":"How fast the marble pours; 0 holds it still."},{"name":"Warp","min":1,"max":6,"about":"How hard the noise is folded into itself, from loose marble to tight swirls."},{"name":"Zoom","min":0.035,"max":0.095,"about":"Size of the stone; low is a few big swirls, high is fine grain."}],"start":[0,2,1,0.06],"measures":{"motion":0.2428,"detail":0.0806,"edges":0.2816,"complexity":1.8069,"coverage":0.9604,"colour":0.3247,"drift":0.15},"knobResponse":[0.3352,0.1929,0.1917,0.2107]},{"slug":"domino-run","title":"Domino Run","family":"physics","round":16,"note":"여섯 선반과 나선 계단 다섯을 잇는 도미노 마흔 개를 손끝이 밀면, 물결이 제 물리 빠르기로 내려가고 낮은 램프 빛을 받던 상아색 면이 쓰러지는 대로 어두워져요. 다 쓰러지면 필름이 거꾸로 돌아 줄을 다시 세워요. 줄이 달리는 동안 K1 을 누르면 아직 서 있는 선반 머리에서 두 번째 물결이 떠나요.","idea":"A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.","buttons":"K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.","code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","layer":{"id":"layer-domino-run","type":"code","name":"domino-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed."},{"name":"Spacing","min":-1,"max":1,"about":"The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall."},{"name":"Angle","min":-1,"max":1,"about":"Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves."}],"start":[0,2,0,0.06],"measures":{"motion":0.1541,"detail":0.079,"edges":0.5891,"complexity":0.4474,"coverage":0.2699,"colour":0.0868,"drift":0.2609},"knobResponse":[0.2214,0.1713,0.2211,0.2694]},{"slug":"dragon","title":"Dragon Fold","family":"fractal","round":2,"note":"종이띠를 반으로 접기를 열 번 되풀이하면 헤이웨이 드래곤이 돼요. 세대마다 선 전체의 복사본이 끝점을 축으로 90도 돌아 나오고, 다 접히면 거꾸로 닫혀요.","idea":"A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.","buttons":"K1 tap turns the folding round, so it closes up or opens out from where it is.","code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-dragon","type":"code","name":"dragon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour that runs along the line starts."},{"name":"Fold Speed","min":0.5,"max":6,"about":"How quickly one generation swings out of the last."},{"name":"Generations","min":8,"max":10,"about":"How many folds before it holds, from 256 segments to 1024."},{"name":"Dragons","min":1,"max":4,"about":"One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point."}],"start":[0,2,8,1],"measures":{"motion":0.7649,"detail":0.0834,"edges":0.9552,"complexity":0.1947,"coverage":0.1168,"colour":0.2214,"drift":0.0797},"knobResponse":[0.0573,0.0725,0.0977,0.1563]},{"slug":"dripstone","title":"Dripstone","family":"mineral","round":19,"note":"석회동굴 단면이 128줄을 다 써요. 종유석 끝에서 물방울이 부풀다 떨어져 석순을 한 방울씩 키우고 웅덩이에 동심원을 그리는 사이, 쇼케이브 조명이 청록과 보라, 흰빛으로 번갈아 바뀌고 동굴 탐험가의 헤드램프가 옆으로 훑고 지나가요.","idea":"A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","layer":{"id":"layer-dripstone","type":"code","name":"dripstone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row."},{"name":"Age","min":0,"max":1,"about":"How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool."},{"name":"Damp","min":0,"max":1,"about":"How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall."}],"start":[0,2,0,0.06],"measures":{"motion":0.113,"detail":0.0548,"edges":0.2063,"complexity":2.555,"coverage":0.9702,"colour":0.163,"drift":0.1125},"knobResponse":[0.0618,0.1355,0.0996,0.0869]},{"slug":"drop-tower","title":"Drop Tower","family":"fair","round":18,"note":"밤 놀이공원의 드롭 타워가 128줄을 다 써요. 링에 탄 여덟 사람을 꼭대기까지 끌어올려 매달아 두었다가 탑 높이에 맞춘 중력으로 떨어뜨리고, 자석 브레이크에서 번쩍이며 세워요. K1 을 누르면 오르는 중에도 바로 떨어뜨려요.","idea":"A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.","buttons":"K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.","code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","layer":{"id":"layer-drop-tower","type":"code","name":"drop-tower","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Height","min":50,"max":110,"about":"The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m."},{"name":"Thrill","min":0,"max":1,"about":"How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g."}],"start":[0,2,50,0.06],"measures":{"motion":0.437,"detail":0.0668,"edges":0.5494,"complexity":1.5352,"coverage":0.8276,"colour":0.1705,"drift":0.1633},"knobResponse":[0.0483,0.0875,0.0709,0.0567]},{"slug":"drying-mud","title":"Drying Mud","family":"cells","round":16,"note":"젖은 흙이 마르며 금이 직각으로 갈라져 T 자로 만나고, 오래된 금은 넓고 깊어지며 조각 테두리가 밝게 말려 올라가요. K1 을 누르면 소나기가 와서 금이 물에 잠겨 닫히고 흙이 다시 말라요.","idea":"Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.","buttons":"K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.","code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","layer":{"id":"layer-drying-mud","type":"code","name":"drying-mud","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Clay","min":0,"max":1,"about":"What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay."},{"name":"Sun","min":0.3,"max":3,"about":"How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider."},{"name":"Cracks","min":0,"max":1,"about":"How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across."},{"name":"Curl","min":0,"max":1,"about":"How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip."}],"start":[0,2,0,0.06],"measures":{"motion":0.0652,"detail":0.0775,"edges":0.2652,"complexity":2.4007,"coverage":0.991,"colour":0.1598,"drift":0.1523},"knobResponse":[0.1914,0.2254,0.1497,0.0607]},{"slug":"dust-motes","title":"Dust Motes","family":"particle","round":19,"note":"어두운 방, 높은 창에서 내려온 햇살 한 줄기 안에서만 먼지가 반짝이며 떠돌고, 커튼이 흔들리면 빛줄기가 좁아졌다 넓어져요. K1 을 누르면 사람이 방을 가로질러 빛줄기에 그림자를 내고, 발치에서 먼지가 빛 속으로 피어올라요.","idea":"A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.","buttons":"K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.","code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","layer":{"id":"layer-dust-motes","type":"code","name":"dust-motes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten."},{"name":"Dust","min":1,"max":4,"about":"How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself."},{"name":"Draft","min":-1,"max":1,"about":"Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade."}],"start":[0,2,1,0.06],"measures":{"motion":0.0301,"detail":0.0213,"edges":0.2348,"complexity":0.703,"coverage":0.3211,"colour":0.0688,"drift":0.0337},"knobResponse":[0.0562,0.0401,0.0354,0.0362]},{"slug":"dyson-gas","title":"Dyson Gas","family":"particle","round":29,"note":"고유값 열 개가 맨 위 줄에 구슬로 떨며 서로 밀어내고, 그 지나온 길이 실이 되어 아래로 흘러요. 실은 가운데에 빽빽하고 가장자리로 갈수록 성기며 서로 건너지 않아요. K3 은 행렬 크기(10~28)이고, K1 을 누르면 밀어내는 힘이 3초쯤 꺼져 실이 엉키며 건너요.","idea":"The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.","buttons":"K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.","code":"// ===== Patternflow pattern =====\n// Title:   Dyson Gas\n// Family:  particle\n// Idea:    The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dyson Brownian motion (Freeman Dyson, 1962), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9\n//\n// Knob 1: Hue. Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it.\n// Knob 2: Speed. How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder.\n// Knob 3: Count. The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28.\n// Knob 4: Beta. The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal.\n// Buttons: K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.\n\nconst W = 64, H = 128, N = W * H, NMAX = 28, CX = 31.5;\nconst { min, max, floor, round, sqrt, abs, asin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\n// A normal sample from four uniforms: bounded, which keeps a substep small.\nconst gauss = () => (rnd() + rnd() + rnd() + rnd() - 2) * 1.7320508;\n\n// The process, in Dyson's units with an Ornstein-Uhlenbeck pull:\n//   d lambda_i = sum_j 1 / (lambda_i - lambda_j) dt - lambda_i / 2 dt + sqrt(2 / beta) dB_i\n// Its resting state is the Gaussian beta ensemble, whose eigenvalues fill\n// Wigner's semicircle on [-2 sqrt(n), 2 sqrt(n)] whatever beta is; beta only\n// sets how hard the noise shakes them. The semicircle's edge sits RPX LEDs\n// either side of the middle.\nconst RPX = 29.5;\n// The longest substep. Near a close pair the step shrinks with the square of\n// the gap, so the pair is pushed apart before the noise can carry it across.\n// A frame takes at most SUBMAX substeps; right after a pinch, when the gaps\n// are tiny, the rest of that frame's time is let go and the fan opens a\n// little slower for a few frames.\nconst DTMAX = 0.004, SUBMAX = 500;\n// History rows kept, one more than the panel so the scroll can interpolate.\nconst HB = H + 2;\n// Where the rainbow starts at Hue 0 (sea green) and how much of the wheel it\n// spans, so the highest eigenvalue is pink.\nconst H0 = 0.42, SPAN = 0.52;\n// The beads ride on this row; the threads hang from it.\nconst TOP = 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Where the k-th of n eigenvalues sits in the semicircle, as a fraction of\n// its radius: the inverse of F(u) = 1/2 + (u sqrt(1 - u^2) + asin u) / pi.\nfunction quantile(q) {\n  let a = -1, b = 1;\n  for (let it = 0; it \u003c 40; it++) {\n    const u = (a + b) / 2;\n    if (0.5 + (u * sqrt(1 - u * u) + asin(u)) / PI \u003c q) a = u;\n    else b = u;\n  }\n  return (a + b) / 2;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    n: 10, beta: 1, sp: 2, hue: -1, started: false,\n    lam: new Float64Array(NMAX), sm: new Float64Array(NMAX), f: new Float64Array(NMAX), ord: new Int8Array(NMAX), hc: new Float32Array(NMAX),\n    hx: new Float32Array(HB * NMAX), hh: new Float32Array(HB * NMAX), hn: new Uint8Array(HB), he: new Uint16Array(HB),\n    head: 0, acc: 0, ep: 0, free: 0, pinch: -1, snap: new Float64Array(NMAX),\n    X: new Float32Array((H + 1) * NMAX), XH: new Float32Array((H + 1) * NMAX), Xn: new Uint8Array(H + 1), Xe: new Uint16Array(H + 1),\n    buf: new Float32Array(N * 3), lut: new Float32Array(256 * 3),\n  });\n  paint(P, 0);\n  fill(P);\n}\n\n// The rainbow for this Hue, 256 steps from the lowest eigenvalue's colour to\n// the highest's.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let j = 0; j \u003c 256; j++) hsv(hue + H0 + (SPAN * j) / 255, 0.82, 255, P.lut, j * 3);\n}\n\n// A fresh matrix of the current size, already at rest, with a full panel of\n// history behind it so the first frame shows the threads.\nfunction fill(P) {\n  const n = P.n, R = 2 * sqrt(n);\n  P.ep++;\n  for (let i = 0; i \u003c n; i++) (P.lam[i] = R * quantile((i + 0.5) / n)), (P.ord[i] = i), (P.hc[i] = n > 1 ? i / (n - 1) : 0.5);\n  P.free = 0, P.pinch = -1, P.acc = 0;\n  step(P, 2);\n  P.sm.set(P.lam);\n  const tr = rowTau(P.sp);\n  for (let k = 0; k \u003c HB; k++) step(P, tr), look(P, 1), push(P);\n}\n\n// The threads are drawn through a short exposure: each one follows its\n// eigenvalue with a lag of SMOOTH rows. An average of ordered positions is\n// still ordered, so the drawn threads cannot cross where the eigenvalues\n// do not.\nconst SMOOTH = 3;\nfunction look(P, rows) {\n  const a = 1 - Math.exp(-rows / SMOOTH);\n  for (let i = 0; i \u003c P.n; i++) P.sm[i] += (P.lam[i] - P.sm[i]) * a;\n}\n\n// Rows a second and stretch of the process per row, both from Speed.\nconst rowRate = (s) => 5 + 7.5 * s;\nconst rowTau = (s) => 0.01 + 0.01 * s;\n\nfunction push(P) {\n  const n = P.n, sc = RPX / (2 * sqrt(n));\n  P.head = (P.head + 1) % HB;\n  const o = P.head * NMAX;\n  for (let i = 0; i \u003c n; i++) (P.hx[o + i] = CX + P.sm[i] * sc), (P.hh[o + i] = P.hc[i]);\n  P.hn[P.head] = n, P.he[P.head] = P.ep;\n}\n\n// Advance the process by T. With the repulsion on, the eigenvalues keep the\n// order they had when it came on: ord lists them left to right, and if a\n// substep ever lets a pair overtake, the two swap places rather than cross.\nfunction step(P, T) {\n  const n = P.n, lam = P.lam, f = P.f, ord = P.ord, rep = P.free \u003c= 0, sd0 = sqrt(2 / P.beta);\n  let left = T;\n  for (let it = 0; it \u003c SUBMAX && left > 1e-9; it++) {\n    for (let i = 0; i \u003c n; i++) f[i] = -0.5 * lam[i];\n    let dt = DTMAX;\n    if (rep) {\n      for (let i = 0; i \u003c n; i++)\n        for (let j = i + 1; j \u003c n; j++) {\n          let d = lam[i] - lam[j];\n          if (abs(d) \u003c 1e-6) d = d \u003c 0 ? -1e-6 : 1e-6;\n          const q = 1 / d;\n          (f[i] += q), (f[j] -= q);\n        }\n      // No eigenvalue may move more than a fifth of the closest gap in one\n      // substep, by the push or by the noise.\n      let g = 1e9, fm = 1e-9;\n      for (let r = 0; r + 1 \u003c n; r++) g = min(g, lam[ord[r + 1]] - lam[ord[r]]);\n      for (let i = 0; i \u003c n; i++) fm = max(fm, abs(f[i]));\n      g = max(g, 1e-6);\n      dt = min(DTMAX, 0.2 * g * g, (0.2 * g) / fm);\n    }\n    if (dt > left) dt = left;\n    const sd = sd0 * sqrt(dt);\n    for (let i = 0; i \u003c n; i++) lam[i] += f[i] * dt + sd * gauss();\n    if (rep)\n      for (let r = 0; r + 1 \u003c n; r++) {\n        const a = ord[r], b = ord[r + 1];\n        if (lam[b] \u003c lam[a]) {\n          const t = lam[a];\n          (lam[a] = lam[b]), (lam[b] = t);\n        }\n      }\n    left -= dt;\n  }\n}\n\n// When the repulsion comes back, the eigenvalues are ranked where they\n// stand and each colour starts drifting back to its rank's place in the\n// rainbow.\nfunction rank(P) {\n  const n = P.n, ord = P.ord, lam = P.lam;\n  for (let i = 0; i \u003c n; i++) ord[i] = i;\n  for (let i = 1; i \u003c n; i++) {\n    const v = ord[i];\n    let j = i - 1;\n    while (j >= 0 && lam[ord[j]] > lam[v]) (ord[j + 1] = ord[j]), j--;\n    ord[j + 1] = v;\n  }\n}\n\n// A new size keeps the picture: the new eigenvalues take the old ones'\n// quantiles, scaled to the new semicircle.\nfunction resize(P, n) {\n  const m = P.n, ord = P.ord, lam = P.lam, u = new Float64Array(m);\n  rank(P);\n  for (let r = 0; r \u003c m; r++) u[r] = lam[ord[r]] / (2 * sqrt(m));\n  P.n = n, P.ep++, P.free = 0, P.pinch = -1;\n  for (let i = 0; i \u003c n; i++) {\n    const q = n > 1 ? (i / (n - 1)) * (m - 1) : (m - 1) / 2, a = floor(q), b = min(m - 1, a + 1);\n    lam[i] = (u[a] + (u[b] - u[a]) * (q - a)) * 2 * sqrt(n);\n    ord[i] = i, P.hc[i] = n > 1 ? i / (n - 1) : 0.5;\n  }\n  P.sm.set(lam);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 1], d = cl(dt || 0, 0, 0.1);\n  const pr = input.btnPressed || [];\n  if (k[0] !== P.hue) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  P.beta = cl(k[3], 1, 9);\n  const n = round(cl(k[2], 10, NMAX));\n  // The first frame's history is made again with the knobs as they stand.\n  if (!P.started) (P.started = true), (P.n = n), fill(P);\n  else if (n !== P.n) resize(P, n);\n\n  if (pr[0] && P.pinch \u003c 0) P.free = 2;\n  if (pr[1] && P.pinch \u003c 0) {\n    P.pinch = 0, P.free = 0;\n    for (let i = 0; i \u003c P.n; i++) P.snap[i] = P.lam[i];\n  }\n\n  const tau = d * rowRate(P.sp) * rowTau(P.sp);\n  if (P.pinch >= 0) {\n    // The matrix scaled down to nothing: every eigenvalue scales with it, so\n    // the threads run straight into the middle. At a thirtieth of its size it\n    // is let go and the repulsion fans it out again.\n    P.pinch += d;\n    const t = cl(P.pinch / 0.55, 0, 1), s = 0.03 + 0.97 * (1 - t * t * (3 - 2 * t));\n    for (let i = 0; i \u003c P.n; i++) P.lam[i] = P.snap[i] * s;\n    if (t >= 1) (P.pinch = -1), rank(P);\n  } else if (P.free > 0) {\n    step(P, tau);\n    P.free -= tau;\n    if (P.free \u003c= 0) rank(P);\n  } else step(P, tau);\n\n  // Colours ease back to their rank's place once the order is settled again.\n  if (P.free \u003c= 0) {\n    const n1 = max(1, P.n - 1), e = min(1, d * 1.2);\n    for (let r = 0; r \u003c P.n; r++) P.hc[P.ord[r]] += (r / n1 - P.hc[P.ord[r]]) * e;\n  }\n  look(P, d * rowRate(P.sp));\n  P.acc += d * rowRate(P.sp);\n  while (P.acc >= 1) (P.acc -= 1), push(P);\n}\n\n// One thread's light on one row: a 1-LED core across the span it moves\n// through between this row and the next, and a soft halo either side.\nfunction span(buf, y, a, b, r, g, bl) {\n  const x0 = max(0, floor(a - 2.5)), x1 = min(W - 1, floor(b + 2.5)), o = y * W;\n  for (let x = x0; x \u003c= x1; x++) {\n    const c = x + 0.5, dd = c \u003c a ? a - c : c > b ? c - b : 0;\n    let w = 1 - dd;\n    const h = 0.3 / (1 + dd * dd * 1.6);\n    if (w \u003c h) w = h;\n    const q = (o + x) * 3;\n    buf[q] += r * w, buf[q + 1] += g * w, buf[q + 2] += bl * w;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, sc = RPX / (2 * sqrt(n)), X = P.X, XH = P.XH, Xn = P.Xn, Xe = P.Xe, buf = P.buf, lut = P.lut, L = H - TOP;\n  // History row 0 is now, on the beads; the newest stored row is acc rows\n  // down, the next one a row further. Each drawn row interpolates between\n  // the two stored rows it falls between, so the scroll glides.\n  for (let y = 0; y \u003c= L; y++) {\n    const o = y * NMAX;\n    let ia, ib, t;\n    if (y \u003c P.acc) (ia = -1), (ib = P.head), (t = y / P.acc);\n    else {\n      const u = y - P.acc, kk = floor(u);\n      (ia = (P.head - kk + HB * 2) % HB), (ib = (ia - 1 + HB) % HB), (t = u - kk);\n    }\n    const ea = ia \u003c 0 ? P.ep : P.he[ia], eb = P.he[ib], na = ia \u003c 0 ? n : P.hn[ia], nb = P.hn[ib];\n    if (ea === eb && na === nb) {\n      for (let i = 0; i \u003c na; i++) {\n        const xa = ia \u003c 0 ? CX + P.sm[i] * sc : P.hx[ia * NMAX + i], ha = ia \u003c 0 ? P.hc[i] : P.hh[ia * NMAX + i];\n        X[o + i] = xa + (P.hx[ib * NMAX + i] - xa) * t;\n        XH[o + i] = ha + (P.hh[ib * NMAX + i] - ha) * t;\n      }\n      (Xn[y] = na), (Xe[y] = ea);\n    } else {\n      // A row from before Count was turned: no thread joins across it.\n      const s = t \u003c 0.5 && ia >= 0 ? ia : ib;\n      for (let i = 0; i \u003c P.hn[s]; i++) (X[o + i] = P.hx[s * NMAX + i]), (XH[o + i] = P.hh[s * NMAX + i]);\n      (Xn[y] = P.hn[s]), (Xe[y] = P.he[s]);\n    }\n  }\n  buf.fill(0);\n  for (let y = 0; y \u003c L; y++) {\n    const o = y * NMAX, m = Xn[y];\n    const okU = y > 0 && Xe[y - 1] === Xe[y] && Xn[y - 1] === m, okD = Xe[y + 1] === Xe[y] && Xn[y + 1] === m;\n    // The past dims a little toward the bottom; the newest rows burn\n    // brighter and whiter.\n    const fade = 1 - 0.42 * (y / L), hot = y \u003c 5 ? 0.35 * (1 - y / 5) : 0, f1 = fade * (1 + hot), wh = 90 * hot;\n    for (let i = 0; i \u003c m; i++) {\n      const x = X[o + i], xu = okU ? (X[o - NMAX + i] + x) / 2 : x, xd = okD ? (X[o + NMAX + i] + x) / 2 : x;\n      const q = round(cl(XH[o + i], 0, 1) * 255) * 3;\n      span(buf, y + TOP, min(x, xu, xd), max(x, xu, xd), lut[q] * f1 + wh, lut[q + 1] * f1 + wh, lut[q + 2] * f1 + wh);\n    }\n  }\n  // The eigenvalues themselves: a bead on the top of each thread, white at\n  // the heart and its own colour round the rim.\n  for (let i = 0; i \u003c n; i++) {\n    const x = X[i], q = round(cl(P.hc[i], 0, 1) * 255) * 3;\n    const r = lut[q] * 0.7 + 76, g = lut[q + 1] * 0.7 + 76, b = lut[q + 2] * 0.7 + 76;\n    for (let yy = 0; yy \u003c TOP + 4; yy++)\n      for (let xx = max(0, floor(x - 2.5)); xx \u003c= min(W - 1, floor(x + 2.5)); xx++) {\n        const dx = xx + 0.5 - x, dy = yy - TOP, r2 = dx * dx + dy * dy * 1.2, w = 1.35 / (1 + r2 * 0.9) - 0.14, p = (yy * W + xx) * 3;\n        if (w \u003c= 0) continue;\n        const wc = 140 * w * w;\n        (buf[p] += r * w + wc), (buf[p + 1] += g * w + wc), (buf[p + 2] += b * w + wc);\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-dyson-gas","type":"code","name":"dyson-gas","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dyson Gas\n// Family:  particle\n// Idea:    The eigenvalues of a random Hermitian matrix whose entries diffuse jiggle along a line and push each other apart, and their world lines scroll down the panel as a rainbow of threads that braid but never cross, crowded in the middle and sparse at the sides as Wigner's semicircle says.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dyson Brownian motion (Freeman Dyson, 1962), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9\n//\n// Knob 1: Hue. Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it.\n// Knob 2: Speed. How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder.\n// Knob 3: Count. The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28.\n// Knob 4: Beta. The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal.\n// Buttons: K1 tap turns the repulsion off for about three seconds at Speed 2: the eigenvalues walk on their own like the diagonal of a matrix with nothing off it, and the threads sag together and cross; then the repulsion comes back, they spring apart and the colours sort themselves back into a rainbow. K2 tap shrinks the matrix to zero and lets it go: the threads pinch into one point and fan out again.\n\nconst W = 64, H = 128, N = W * H, NMAX = 28, CX = 31.5;\nconst { min, max, floor, round, sqrt, abs, asin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\n// A normal sample from four uniforms: bounded, which keeps a substep small.\nconst gauss = () => (rnd() + rnd() + rnd() + rnd() - 2) * 1.7320508;\n\n// The process, in Dyson's units with an Ornstein-Uhlenbeck pull:\n//   d lambda_i = sum_j 1 / (lambda_i - lambda_j) dt - lambda_i / 2 dt + sqrt(2 / beta) dB_i\n// Its resting state is the Gaussian beta ensemble, whose eigenvalues fill\n// Wigner's semicircle on [-2 sqrt(n), 2 sqrt(n)] whatever beta is; beta only\n// sets how hard the noise shakes them. The semicircle's edge sits RPX LEDs\n// either side of the middle.\nconst RPX = 29.5;\n// The longest substep. Near a close pair the step shrinks with the square of\n// the gap, so the pair is pushed apart before the noise can carry it across.\n// A frame takes at most SUBMAX substeps; right after a pinch, when the gaps\n// are tiny, the rest of that frame's time is let go and the fan opens a\n// little slower for a few frames.\nconst DTMAX = 0.004, SUBMAX = 500;\n// History rows kept, one more than the panel so the scroll can interpolate.\nconst HB = H + 2;\n// Where the rainbow starts at Hue 0 (sea green) and how much of the wheel it\n// spans, so the highest eigenvalue is pink.\nconst H0 = 0.42, SPAN = 0.52;\n// The beads ride on this row; the threads hang from it.\nconst TOP = 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Where the k-th of n eigenvalues sits in the semicircle, as a fraction of\n// its radius: the inverse of F(u) = 1/2 + (u sqrt(1 - u^2) + asin u) / pi.\nfunction quantile(q) {\n  let a = -1, b = 1;\n  for (let it = 0; it \u003c 40; it++) {\n    const u = (a + b) / 2;\n    if (0.5 + (u * sqrt(1 - u * u) + asin(u)) / PI \u003c q) a = u;\n    else b = u;\n  }\n  return (a + b) / 2;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    n: 10, beta: 1, sp: 2, hue: -1, started: false,\n    lam: new Float64Array(NMAX), sm: new Float64Array(NMAX), f: new Float64Array(NMAX), ord: new Int8Array(NMAX), hc: new Float32Array(NMAX),\n    hx: new Float32Array(HB * NMAX), hh: new Float32Array(HB * NMAX), hn: new Uint8Array(HB), he: new Uint16Array(HB),\n    head: 0, acc: 0, ep: 0, free: 0, pinch: -1, snap: new Float64Array(NMAX),\n    X: new Float32Array((H + 1) * NMAX), XH: new Float32Array((H + 1) * NMAX), Xn: new Uint8Array(H + 1), Xe: new Uint16Array(H + 1),\n    buf: new Float32Array(N * 3), lut: new Float32Array(256 * 3),\n  });\n  paint(P, 0);\n  fill(P);\n}\n\n// The rainbow for this Hue, 256 steps from the lowest eigenvalue's colour to\n// the highest's.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let j = 0; j \u003c 256; j++) hsv(hue + H0 + (SPAN * j) / 255, 0.82, 255, P.lut, j * 3);\n}\n\n// A fresh matrix of the current size, already at rest, with a full panel of\n// history behind it so the first frame shows the threads.\nfunction fill(P) {\n  const n = P.n, R = 2 * sqrt(n);\n  P.ep++;\n  for (let i = 0; i \u003c n; i++) (P.lam[i] = R * quantile((i + 0.5) / n)), (P.ord[i] = i), (P.hc[i] = n > 1 ? i / (n - 1) : 0.5);\n  P.free = 0, P.pinch = -1, P.acc = 0;\n  step(P, 2);\n  P.sm.set(P.lam);\n  const tr = rowTau(P.sp);\n  for (let k = 0; k \u003c HB; k++) step(P, tr), look(P, 1), push(P);\n}\n\n// The threads are drawn through a short exposure: each one follows its\n// eigenvalue with a lag of SMOOTH rows. An average of ordered positions is\n// still ordered, so the drawn threads cannot cross where the eigenvalues\n// do not.\nconst SMOOTH = 3;\nfunction look(P, rows) {\n  const a = 1 - Math.exp(-rows / SMOOTH);\n  for (let i = 0; i \u003c P.n; i++) P.sm[i] += (P.lam[i] - P.sm[i]) * a;\n}\n\n// Rows a second and stretch of the process per row, both from Speed.\nconst rowRate = (s) => 5 + 7.5 * s;\nconst rowTau = (s) => 0.01 + 0.01 * s;\n\nfunction push(P) {\n  const n = P.n, sc = RPX / (2 * sqrt(n));\n  P.head = (P.head + 1) % HB;\n  const o = P.head * NMAX;\n  for (let i = 0; i \u003c n; i++) (P.hx[o + i] = CX + P.sm[i] * sc), (P.hh[o + i] = P.hc[i]);\n  P.hn[P.head] = n, P.he[P.head] = P.ep;\n}\n\n// Advance the process by T. With the repulsion on, the eigenvalues keep the\n// order they had when it came on: ord lists them left to right, and if a\n// substep ever lets a pair overtake, the two swap places rather than cross.\nfunction step(P, T) {\n  const n = P.n, lam = P.lam, f = P.f, ord = P.ord, rep = P.free \u003c= 0, sd0 = sqrt(2 / P.beta);\n  let left = T;\n  for (let it = 0; it \u003c SUBMAX && left > 1e-9; it++) {\n    for (let i = 0; i \u003c n; i++) f[i] = -0.5 * lam[i];\n    let dt = DTMAX;\n    if (rep) {\n      for (let i = 0; i \u003c n; i++)\n        for (let j = i + 1; j \u003c n; j++) {\n          let d = lam[i] - lam[j];\n          if (abs(d) \u003c 1e-6) d = d \u003c 0 ? -1e-6 : 1e-6;\n          const q = 1 / d;\n          (f[i] += q), (f[j] -= q);\n        }\n      // No eigenvalue may move more than a fifth of the closest gap in one\n      // substep, by the push or by the noise.\n      let g = 1e9, fm = 1e-9;\n      for (let r = 0; r + 1 \u003c n; r++) g = min(g, lam[ord[r + 1]] - lam[ord[r]]);\n      for (let i = 0; i \u003c n; i++) fm = max(fm, abs(f[i]));\n      g = max(g, 1e-6);\n      dt = min(DTMAX, 0.2 * g * g, (0.2 * g) / fm);\n    }\n    if (dt > left) dt = left;\n    const sd = sd0 * sqrt(dt);\n    for (let i = 0; i \u003c n; i++) lam[i] += f[i] * dt + sd * gauss();\n    if (rep)\n      for (let r = 0; r + 1 \u003c n; r++) {\n        const a = ord[r], b = ord[r + 1];\n        if (lam[b] \u003c lam[a]) {\n          const t = lam[a];\n          (lam[a] = lam[b]), (lam[b] = t);\n        }\n      }\n    left -= dt;\n  }\n}\n\n// When the repulsion comes back, the eigenvalues are ranked where they\n// stand and each colour starts drifting back to its rank's place in the\n// rainbow.\nfunction rank(P) {\n  const n = P.n, ord = P.ord, lam = P.lam;\n  for (let i = 0; i \u003c n; i++) ord[i] = i;\n  for (let i = 1; i \u003c n; i++) {\n    const v = ord[i];\n    let j = i - 1;\n    while (j >= 0 && lam[ord[j]] > lam[v]) (ord[j + 1] = ord[j]), j--;\n    ord[j + 1] = v;\n  }\n}\n\n// A new size keeps the picture: the new eigenvalues take the old ones'\n// quantiles, scaled to the new semicircle.\nfunction resize(P, n) {\n  const m = P.n, ord = P.ord, lam = P.lam, u = new Float64Array(m);\n  rank(P);\n  for (let r = 0; r \u003c m; r++) u[r] = lam[ord[r]] / (2 * sqrt(m));\n  P.n = n, P.ep++, P.free = 0, P.pinch = -1;\n  for (let i = 0; i \u003c n; i++) {\n    const q = n > 1 ? (i / (n - 1)) * (m - 1) : (m - 1) / 2, a = floor(q), b = min(m - 1, a + 1);\n    lam[i] = (u[a] + (u[b] - u[a]) * (q - a)) * 2 * sqrt(n);\n    ord[i] = i, P.hc[i] = n > 1 ? i / (n - 1) : 0.5;\n  }\n  P.sm.set(lam);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 1], d = cl(dt || 0, 0, 0.1);\n  const pr = input.btnPressed || [];\n  if (k[0] !== P.hue) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  P.beta = cl(k[3], 1, 9);\n  const n = round(cl(k[2], 10, NMAX));\n  // The first frame's history is made again with the knobs as they stand.\n  if (!P.started) (P.started = true), (P.n = n), fill(P);\n  else if (n !== P.n) resize(P, n);\n\n  if (pr[0] && P.pinch \u003c 0) P.free = 2;\n  if (pr[1] && P.pinch \u003c 0) {\n    P.pinch = 0, P.free = 0;\n    for (let i = 0; i \u003c P.n; i++) P.snap[i] = P.lam[i];\n  }\n\n  const tau = d * rowRate(P.sp) * rowTau(P.sp);\n  if (P.pinch >= 0) {\n    // The matrix scaled down to nothing: every eigenvalue scales with it, so\n    // the threads run straight into the middle. At a thirtieth of its size it\n    // is let go and the repulsion fans it out again.\n    P.pinch += d;\n    const t = cl(P.pinch / 0.55, 0, 1), s = 0.03 + 0.97 * (1 - t * t * (3 - 2 * t));\n    for (let i = 0; i \u003c P.n; i++) P.lam[i] = P.snap[i] * s;\n    if (t >= 1) (P.pinch = -1), rank(P);\n  } else if (P.free > 0) {\n    step(P, tau);\n    P.free -= tau;\n    if (P.free \u003c= 0) rank(P);\n  } else step(P, tau);\n\n  // Colours ease back to their rank's place once the order is settled again.\n  if (P.free \u003c= 0) {\n    const n1 = max(1, P.n - 1), e = min(1, d * 1.2);\n    for (let r = 0; r \u003c P.n; r++) P.hc[P.ord[r]] += (r / n1 - P.hc[P.ord[r]]) * e;\n  }\n  look(P, d * rowRate(P.sp));\n  P.acc += d * rowRate(P.sp);\n  while (P.acc >= 1) (P.acc -= 1), push(P);\n}\n\n// One thread's light on one row: a 1-LED core across the span it moves\n// through between this row and the next, and a soft halo either side.\nfunction span(buf, y, a, b, r, g, bl) {\n  const x0 = max(0, floor(a - 2.5)), x1 = min(W - 1, floor(b + 2.5)), o = y * W;\n  for (let x = x0; x \u003c= x1; x++) {\n    const c = x + 0.5, dd = c \u003c a ? a - c : c > b ? c - b : 0;\n    let w = 1 - dd;\n    const h = 0.3 / (1 + dd * dd * 1.6);\n    if (w \u003c h) w = h;\n    const q = (o + x) * 3;\n    buf[q] += r * w, buf[q + 1] += g * w, buf[q + 2] += bl * w;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, sc = RPX / (2 * sqrt(n)), X = P.X, XH = P.XH, Xn = P.Xn, Xe = P.Xe, buf = P.buf, lut = P.lut, L = H - TOP;\n  // History row 0 is now, on the beads; the newest stored row is acc rows\n  // down, the next one a row further. Each drawn row interpolates between\n  // the two stored rows it falls between, so the scroll glides.\n  for (let y = 0; y \u003c= L; y++) {\n    const o = y * NMAX;\n    let ia, ib, t;\n    if (y \u003c P.acc) (ia = -1), (ib = P.head), (t = y / P.acc);\n    else {\n      const u = y - P.acc, kk = floor(u);\n      (ia = (P.head - kk + HB * 2) % HB), (ib = (ia - 1 + HB) % HB), (t = u - kk);\n    }\n    const ea = ia \u003c 0 ? P.ep : P.he[ia], eb = P.he[ib], na = ia \u003c 0 ? n : P.hn[ia], nb = P.hn[ib];\n    if (ea === eb && na === nb) {\n      for (let i = 0; i \u003c na; i++) {\n        const xa = ia \u003c 0 ? CX + P.sm[i] * sc : P.hx[ia * NMAX + i], ha = ia \u003c 0 ? P.hc[i] : P.hh[ia * NMAX + i];\n        X[o + i] = xa + (P.hx[ib * NMAX + i] - xa) * t;\n        XH[o + i] = ha + (P.hh[ib * NMAX + i] - ha) * t;\n      }\n      (Xn[y] = na), (Xe[y] = ea);\n    } else {\n      // A row from before Count was turned: no thread joins across it.\n      const s = t \u003c 0.5 && ia >= 0 ? ia : ib;\n      for (let i = 0; i \u003c P.hn[s]; i++) (X[o + i] = P.hx[s * NMAX + i]), (XH[o + i] = P.hh[s * NMAX + i]);\n      (Xn[y] = P.hn[s]), (Xe[y] = P.he[s]);\n    }\n  }\n  buf.fill(0);\n  for (let y = 0; y \u003c L; y++) {\n    const o = y * NMAX, m = Xn[y];\n    const okU = y > 0 && Xe[y - 1] === Xe[y] && Xn[y - 1] === m, okD = Xe[y + 1] === Xe[y] && Xn[y + 1] === m;\n    // The past dims a little toward the bottom; the newest rows burn\n    // brighter and whiter.\n    const fade = 1 - 0.42 * (y / L), hot = y \u003c 5 ? 0.35 * (1 - y / 5) : 0, f1 = fade * (1 + hot), wh = 90 * hot;\n    for (let i = 0; i \u003c m; i++) {\n      const x = X[o + i], xu = okU ? (X[o - NMAX + i] + x) / 2 : x, xd = okD ? (X[o + NMAX + i] + x) / 2 : x;\n      const q = round(cl(XH[o + i], 0, 1) * 255) * 3;\n      span(buf, y + TOP, min(x, xu, xd), max(x, xu, xd), lut[q] * f1 + wh, lut[q + 1] * f1 + wh, lut[q + 2] * f1 + wh);\n    }\n  }\n  // The eigenvalues themselves: a bead on the top of each thread, white at\n  // the heart and its own colour round the rim.\n  for (let i = 0; i \u003c n; i++) {\n    const x = X[i], q = round(cl(P.hc[i], 0, 1) * 255) * 3;\n    const r = lut[q] * 0.7 + 76, g = lut[q + 1] * 0.7 + 76, b = lut[q + 2] * 0.7 + 76;\n    for (let yy = 0; yy \u003c TOP + 4; yy++)\n      for (let xx = max(0, floor(x - 2.5)); xx \u003c= min(W - 1, floor(x + 2.5)); xx++) {\n        const dx = xx + 0.5 - x, dy = yy - TOP, r2 = dx * dx + dy * dy * 1.2, w = 1.35 / (1 + r2 * 0.9) - 0.14, p = (yy * W + xx) * 3;\n        if (w \u003c= 0) continue;\n        const wc = 140 * w * w;\n        (buf[p] += r * w + wc), (buf[p + 1] += g * w + wc), (buf[p + 2] += b * w + wc);\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Count=10..28, Beta=1..9","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rainbow of threads round the colour wheel; the lowest eigenvalue on the left and the highest on the right always sit at the two ends of it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the matrix diffuses and the history scrolls: at 2 about twenty rows a second, and each row is a longer stretch of the process, so the threads shiver harder."},{"name":"Count","min":10,"max":28,"about":"The size of the matrix, 10 to 28 eigenvalues. The semicircle always spans the panel, so more of them crowd the middle: about four and a half LEDs apart there at 10, under two at 28."},{"name":"Beta","min":1,"max":9,"about":"The strength of the repulsion against the noise: 1, 2 and 4 are the real, complex and quaternion matrices (GOE, GUE, GSE). Higher, the gaps go stiff and even and the threads run like the bars of a crystal."}],"start":[0,2,10,1],"measures":{"motion":1.3286,"detail":0.1297,"edges":0.5413,"complexity":1.7541,"coverage":0.3748,"colour":0.2639,"drift":0.1193},"knobResponse":[0.1261,0.1507,0.2251,0.1306]},{"slug":"elephant-toothpaste","title":"Elephant Toothpaste","family":"chemistry","round":23,"note":"보라색 장갑을 낀 손이 실험대 위 눈금실린더에 아이오딘화 칼륨을 부으면, 유리 안쪽에 그어 둔 식용 색소 줄무늬를 두른 거품 기둥이 입구에서 솟아 패널 꼭대기까지 올라요. 기둥은 한쪽으로 꺾여 실린더 옆을 타고 흘러내려 김 나는 더미로 쌓이고, 더미가 굳어 바래면 손이 닦아 내고 새 실린더를 내려놓아요.","idea":"A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.","buttons":"K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.","code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","layer":{"id":"layer-elephant-toothpaste","type":"code","name":"elephant-toothpaste","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower."},{"name":"Stripes","min":1,"max":4,"about":"How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4."},{"name":"Strength","min":0,"max":1,"about":"How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap."}],"start":[0,2,1,0.06],"measures":{"motion":0.1815,"detail":0.029,"edges":0.1765,"complexity":0.9251,"coverage":0.367,"colour":0.1801,"drift":0.102},"knobResponse":[0.0441,0.1137,0.0453,0.0773]},{"slug":"elliptic-chords","title":"Elliptic Chords","family":"number","round":36,"note":"위에는 실수 곡선 y² = x³ − 6x 가, 아래에는 같은 곡선을 61 로 나눈 나머지로 푼 61×61 판이 있어요. G 와 kG 를 지나는 직선이 곡선과 세 번째로 만나는 점을 x축에 뒤집으면 (k+1)G 이고, 아래에서는 그 직선이 판을 감아 도는 점 61개가 되어 곡선의 점 셋에서만 하얗게 빛나며 배수들이 방문 순서대로 무지개색으로 켜져요. K3 은 상수 b 를 바꿔 알 모양 고리를 키우다 긴 가지에 붙이고, K1 을 누르면 새 생성원 G 로 O 에서 다시 세요.","idea":"The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.","buttons":"K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Elliptic Chords\n// Family:  number\n// Idea:    The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: elliptic curve group law, chord and tangent (Henri Poincaré, 1901), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1\n//\n// Knob 1: Hue. Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky.\n// Knob 2: Speed. Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44.\n// Knob 3: Curve. The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points.\n// Knob 4: Trail. Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below.\n// Buttons: K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.\n\nconst W = 64, H = 128, P = 61, A = -6, CMIN = -4, CMAX = 8;\n// The real window: x from -3.15 to 4.45 over the 64 columns, y from -7.75 to\n// 7.75 over rows 0..62, with y = 0 on row 31. Lines stay lines under this\n// stretch, and the mirror in the x-axis stays a vertical move.\nconst TOPH = 63, X0 = -3.15, X1 = 4.45, SX = W / (X1 - X0), YM = 7.75, SY = TOPH / (2 * YM), YC = 31;\n// The F_61 board: element (x, y) is column BX + x, row BY - y; O sits on row OROW above it.\nconst BX = 1, BY = 126, OROW = 64;\n// Phases of one group step: the line, the mirror, the landing.\nconst T_LINE = 0.5, T_MIR0 = 0.55, T_MIR1 = 0.78;\nconst NT = 1024;\n// Group steps a second for each unit of Speed.\nconst RATE = 0.75;\nconst { floor, min, max, abs, sqrt, sin, cos, tan, acos, cbrt, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (v) => ((v % P) + P) % P;\nconst NB = [[1, 0], [-1, 0], [0, 1], [0, -1]];\nconst NB2 = [[2, 0], [-2, 0], [0, 2], [0, -2], [1, 1], [1, -1], [-1, 1], [-1, -1]];\n\n// Inverses mod 61, by Fermat.\nconst INV = new Int32Array(P);\nfor (let i = 1; i \u003c P; i++) {\n  let r = 1, e = P - 2, q = i;\n  while (e) {\n    if (e & 1) r = (r * q) % P;\n    q = (q * q) % P;\n    e >>= 1;\n  }\n  INV[i] = r;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// ---- F_61 -------------------------------------------------------------------\n// A point is [x, y] with entries 0..60, or null for O.\nfunction fpAdd(p, q, b) {\n  if (!p) return q;\n  if (!q) return p;\n  if (p[0] === q[0] && md(p[1] + q[1]) === 0) return null;\n  const m = p[0] === q[0] ? md((3 * p[0] * p[0] + A) * INV[md(2 * p[1])]) : md((q[1] - p[1]) * INV[md(q[0] - p[0])]);\n  const x = md(m * m - p[0] - q[0]);\n  return [x, md(m * (p[0] - x) - p[1])];\n}\n\nfunction fpOrder(g, b) {\n  let q = g, n = 1;\n  while (q && n \u003c 200) {\n    q = fpAdd(q, g, b);\n    n++;\n  }\n  return n;\n}\n\n// ---- the real curve -----------------------------------------------------------\n// The roots of x^3 - 6x + b, largest first: three when 27 b^2 \u003c 864, so\n// when |b| \u003c 5.66, and then the curve has an egg over [e3, e2].\nfunction roots(b) {\n  if (4 * A * A * A + 27 * b * b \u003c 0) {\n    const r = 2 * sqrt(-A / 3), th = acos(((3 * b) / (2 * A)) * sqrt(-3 / A)) / 3;\n    return [0, 1, 2].map((k) => r * cos(th - (2 * PI * k) / 3)).sort((p, q) => q - p);\n  }\n  const s = sqrt((b * b) / 4 + (A * A * A) / 27);\n  let x = cbrt(-b / 2 + s) + cbrt(-b / 2 - s);\n  for (let i = 0; i \u003c 6; i++) x -= (x * x * x + A * x + b) / (3 * x * x + A);\n  return [x];\n}\n\n// The real points of the curve as a group are a circle, R/wZ, times {0, 1}\n// when the egg is there. The circle is measured by the invariant\n// differential dx/y: on the long branch u(x) = int_x^inf dt/sqrt(f), with\n// t = e1 + tan^2(phi), and on the egg v(x) = int_e3^x dt/sqrt(f), with\n// t = e3 + (e2 - e3) sin^2(theta), both free of the square-root ends. Both\n// halves of the circle come to the same w/2. Checked against the chord rule\n// in a scratch script: main(u1) + main(u2) = main(u1 + u2), main(u) + egg(v)\n// = egg(u + v) and egg(v1) + egg(v2) = main(v1 + v2), to 2e-6 in the window.\nfunction realCurve(b) {\n  const R = roots(b), e1 = R[0], c = e1 * e1 + A;\n  const U = new Float64Array(NT + 1), h = PI / 2 / NT;\n  const gm = (ph) => {\n    if (ph >= PI / 2 - 1e-12) return 2;\n    const s = tan(ph), t = e1 + s * s, co = cos(ph);\n    return 2 / sqrt(t * t + e1 * t + c) / (co * co);\n  };\n  for (let i = NT - 1; i >= 0; i--) U[i] = U[i + 1] + (h / 6) * (gm(i * h) + 4 * gm((i + 0.5) * h) + gm((i + 1) * h));\n  const C = { b, R, U, w: 2 * U[0], egg: null };\n  if (R.length === 3) {\n    const e2 = R[1], e3 = R[2], V = new Float64Array(NT + 1);\n    const ge = (th) => 2 / sqrt(e1 - e3 - (e2 - e3) * sin(th) ** 2);\n    for (let i = 0; i \u003c NT; i++) V[i + 1] = V[i] + (h / 6) * (ge(i * h) + 4 * ge((i + 0.5) * h) + ge((i + 1) * h));\n    C.egg = { V, e2, e3 };\n  }\n  return C;\n}\n\nconst f = (x, b) => x * x * x + A * x + b;\n\n// Fractional index where the monotone table T meets the value t.\nfunction seek(T, t, rising) {\n  let lo = 0, hi = NT;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (T[m] \u003c t === rising) lo = m;\n    else hi = m;\n  }\n  return lo + (t - T[lo]) / (T[hi] - T[lo] || 1);\n}\n\n// The real point at parameter u on the branch (s = 0) or the egg (s = 1);\n// null for O.\nfunction realPoint(C, u, s) {\n  const w = C.w;\n  u -= floor(u / w) * w;\n  if (s === 0 && (u \u003c 1e-9 || w - u \u003c 1e-9)) return null;\n  const up = u \u003c= w / 2, q = up ? u : w - u;\n  let x;\n  if (s === 0) {\n    const ph = (seek(C.U, q, false) * PI) / 2 / NT;\n    x = C.R[0] + tan(ph) ** 2;\n  } else {\n    const { V, e2, e3 } = C.egg, th = (seek(V, q, true) * PI) / 2 / NT;\n    x = e3 + (e2 - e3) * sin(th) ** 2;\n  }\n  const y = sqrt(max(0, f(x, C.b)));\n  // The egg runs the other way round, so that main(u) + egg(v) = egg(u + v).\n  return [x, (up ? 1 : -1) * (s === 0 ? 1 : -1) * y];\n}\n\n// ---- one curve: both halves ---------------------------------------------------\nfunction buildCurve(b) {\n  const pts = [];\n  for (let x = 0; x \u003c P; x++) for (let y = 0; y \u003c P; y++) if (md(y * y - f(x, b)) === 0) pts.push([x, y]);\n  let N = 0, gens = [];\n  for (const p of pts) {\n    const o = fpOrder(p, b);\n    if (o > N) (N = o), (gens = []);\n    if (o === N) gens.push(p);\n  }\n  const C = realCurve(b);\n  const onBoard = new Uint8Array(P * P);\n  for (const [x, y] of pts) onBoard[x * P + y] = 1;\n  // The static picture of the real curve: a 1.4-LED line where y^2 = f(x),\n  // found by the distance |y^2 - f| / |gradient| in LEDs, and a soft fill on\n  // the side where f(x) > y^2, the inside of the egg and of the branch.\n  const line = new Float32Array(W * TOPH), fill = new Float32Array(W * TOPH);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      let acc = 0, inside = 0;\n      for (let sy = 0; sy \u003c 3; sy++)\n        for (let sx = 0; sx \u003c 3; sx++) {\n          const x = X0 + (col + (sx + 0.5) / 3) / SX, y = (YC + 0.5 - (r + (sy + 0.5) / 3)) / SY;\n          const F = y * y - f(x, b), gx = (3 * x * x + A) / SX, gy = (2 * y) / SY;\n          const d = abs(F) / (sqrt(gx * gx + gy * gy) + 1e-9);\n          acc += cl(1.15 - d, 0, 1);\n          if (F \u003c 0) inside++;\n        }\n      line[r * W + col] = acc / 9;\n      fill[r * W + col] = inside / 9;\n    }\n  return { b, pts, N, gens, C, onBoard, line, fill };\n}\n\n// ---- the cycle ----------------------------------------------------------------\n// Q_k = kG. Step k goes from Q_k to Q_k+1 = Q_k + G: the line through G and\n// Q_k (the tangent at G when k = 1, the vertical through G when Q_k is O or\n// -G), its third point R, and R mirrored. The real generator is a point of\n// the same order N: on the egg at parameter jw/N when there is an egg and N\n// is even, so the odd multiples land on the egg and the even ones on the\n// branch, otherwise on the branch.\nfunction startCycle(S, fresh) {\n  const K = S.curve, N = K.N, C = K.C;\n  S.g = K.gens[floor(random() * K.gens.length)];\n  S.side = C.egg && N % 2 === 0 ? 1 : 0;\n  const js = [];\n  for (let j = 1; j \u003c N; j++) {\n    let a = j, bb = N;\n    while (bb) [a, bb] = [bb, a % bb];\n    if (a !== 1) continue;\n    const g = realPoint(C, (j * C.w) / N, S.side);\n    if (g && g[0] > X0 + 0.3 && g[0] \u003c X1 - 0.3 && abs(g[1]) \u003c YM - 0.4) js.push(j);\n  }\n  S.j = js.length ? js[floor(random() * js.length)] : 1;\n  S.gr = realPoint(C, (S.j * C.w) / N, S.side);\n  for (const t of S.trail) t.ghost = t.ghost || 1e-6;\n  if (fresh) {\n    // The opening shows the cycle already under way: 80% of it lit.\n    const k0 = round(0.8 * N);\n    let q = null;\n    for (let k = 1; k \u003c= k0; k++) {\n      q = fpAdd(q, S.g, K.b);\n      S.trail.push({ k, gs: S.gs - (k0 - k), fp: q, re: realK(S, k), ghost: 0 });\n    }\n    S.k = k0;\n    S.q = q;\n  } else {\n    S.k = 0;\n    S.q = null;\n  }\n  planStep(S);\n}\n\nconst realK = (S, k) => realPoint(S.curve.C, (k * S.j * S.curve.C.w) / S.curve.N, (k * S.side) & 1);\n\n// The F_61 line y = mx + c is the lattice of points (t, mt) mod 61 shifted\n// to one of them. Its shortest vector, found by Lagrange's reduction of the\n// basis (1, m), (0, 61), is never more than 8.4 long, and stepping by it still\n// visits all 61 points, so the walk runs along short streaks that wrap round\n// the square instead of jumping m rows at a time.\nfunction shortStep(m) {\n  let ax = 1, ay = m > P / 2 ? m - P : m, bx = 0, by = P;\n  const n2 = (x, y) => x * x + y * y;\n  for (let i = 0; i \u003c 20; i++) {\n    if (n2(bx, by) \u003c n2(ax, ay)) [ax, ay, bx, by] = [bx, by, ax, ay];\n    const mu = round((ax * bx + ay * by) / n2(ax, ay));\n    if (mu === 0) break;\n    bx -= mu * ax;\n    by -= mu * ay;\n  }\n  return [md(ax), md(ay)];\n}\n\nfunction planStep(S) {\n  const K = S.curve, N = K.N, k = S.k, g = S.g, q = S.q;\n  const st = { k, vert: false, m: 0, start: q || g, third: null, next: null, rm: 0, rx: 0, ry: 0, rv: false, r3: null, rn: null, tR: -1 };\n  // F_61: the line's slope, its 61 dots from Q_k (from G when Q_k is O), and\n  // how many steps along it the third point falls.\n  if (!q || (q[0] === g[0] && md(q[1] + g[1]) === 0)) st.vert = true;\n  else st.m = q[0] === g[0] ? md((3 * g[0] * g[0] + A) * INV[md(2 * g[1])]) : md((q[1] - g[1]) * INV[md(q[0] - g[0])]);\n  st.next = fpAdd(q, g, K.b);\n  st.third = st.next ? [st.next[0], md(-st.next[1])] : null;\n  [st.dx, st.dy] = st.vert ? [0, 1] : shortStep(st.m);\n  const s0 = st.start, stepT = (pt) => (st.vert ? md(pt[1] - s0[1]) : md((pt[0] - s0[0]) * INV[st.dx]));\n  st.tR = st.third ? stepT(st.third) : P - 1;\n  // The real line, through G_r with slope rm or vertical.\n  const G = S.gr, Q = k === 0 ? null : realK(S, k);\n  if (k === 0 || k === N - 1) st.rv = true;\n  else if (k === 1) st.rm = (3 * G[0] * G[0] + A) / (2 * G[1]);\n  else if (Q) st.rm = (Q[1] - G[1]) / (Q[0] - G[0]);\n  else st.rm = 0;\n  st.rx = G[0];\n  st.ry = G[1];\n  if (k === N - 1) st.r3 = null;\n  else if (k === 0) st.r3 = [G[0], -G[1]];\n  else {\n    const x3 = st.rm * st.rm - G[0] - (Q ? Q[0] : G[0]);\n    st.r3 = [x3, G[1] + st.rm * (x3 - G[0])];\n  }\n  st.rn = st.r3 ? [st.r3[0], -st.r3[1]] : null;\n  S.step = st;\n}\n\nfunction finishStep(S) {\n  const st = S.step, N = S.curve.N;\n  S.past.push({ st, gs: S.gs + 1 });\n  S.gs++;\n  S.k = (S.k + 1) % N;\n  S.q = st.next;\n  if (st.next) S.trail.push({ k: S.k, gs: S.gs, fp: st.next, re: st.rn, ghost: 0 });\n  planStep(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trailK: 0.06, b: null, curve: null, curves: {}, g: null, gr: null, j: 1, side: 0,\n    k: 0, q: null, gs: 0, tau: 0, step: null, trail: [], past: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0];\n  S.speed = cl(kv[1], 0.2, 3);\n  S.trailK = cl(kv[3], 0, 1);\n  const b = round(cl(kv[2], CMIN, CMAX));\n  if (b !== S.b) {\n    S.b = b;\n    S.curve = S.curves[b] || (S.curves[b] = buildCurve(b));\n    S.trail.length = 0;\n    S.past.length = 0;\n    S.tau = 0;\n    startCycle(S, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.tau = 0;\n    startCycle(S, false);\n  }\n  S.tau += d * S.speed * RATE;\n  while (S.tau >= 1) {\n    S.tau -= 1;\n    finishStep(S);\n  }\n  // Ghosts of an old cycle fade out over 1.5 seconds.\n  for (const t of S.trail) if (t.ghost) t.ghost += d / 1.5;\n  const L = trailLen(S);\n  S.trail = S.trail.filter((t) => (t.ghost ? t.ghost \u003c 1 : S.gs + S.tau - t.gs \u003c L + 1));\n  S.past = S.past.filter((q) => S.gs + S.tau - q.gs \u003c linger(S));\n}\n\n// Past lines linger, fading: 1.6 steps at Trail 0, 8 steps at 1. They all\n// pass through G.\nconst linger = (S) => 1.6 + 6.4 * S.trailK ** 1.2;\n\nconst trailLen = (S) => 2 + (S.curve.N - 2) * (1 - S.trailK) ** 1.5;\n\n// ---- drawing ------------------------------------------------------------------\nfunction add(S, x, y, col, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0) return;\n  const p = y * W + x;\n  S.R[p] += col[0] * v;\n  S.G[p] += col[1] * v;\n  S.B[p] += col[2] * v;\n}\n\n// Real coordinates to LED coordinates (LED centres at whole numbers).\nconst px = (x) => (x - X0) * SX - 0.5;\nconst py = (y) => YC - y * SY;\n\nfunction disc(S, x, y, rad, col, v) {\n  const cx = px(x), cy = py(y);\n  for (let r = floor(cy - rad - 1); r \u003c= cy + rad + 1; r++)\n    for (let c = floor(cx - rad - 1); c \u003c= cx + rad + 1; c++) {\n      if (r \u003c 0 || r >= TOPH) continue;\n      const dd = sqrt((c - cx) ** 2 + (r - cy) ** 2);\n      add(S, c, r, col, v * cl(rad + 0.5 - dd, 0, 1));\n    }\n}\n\n// The real line through (x0, y0) with slope m, or the vertical through x0,\n// clipped to the window: one LED wide with a soft LED of glow either side.\nfunction realLine(S, x0, y0, m, vert, col, v) {\n  const k = vert ? 0 : (-m * SY) / SX, ax = px(x0), ay = py(y0);\n  if (!vert && abs(k) \u003c= 1) {\n    // Shallow: walk the columns, spread across rows.\n    for (let c = 0; c \u003c W; c++) {\n      const r = ay + k * (c - ax), r0 = floor(r);\n      for (let q = r0 - 1; q \u003c= r0 + 2; q++) if (q >= 0 && q \u003c TOPH) add(S, c, q, col, v * glow(abs(q - r)));\n    }\n  } else {\n    for (let r = 0; r \u003c TOPH; r++) {\n      const c = vert ? ax : ax + (r - ay) / k, c0 = floor(c);\n      for (let q = c0 - 1; q \u003c= c0 + 2; q++) add(S, q, r, col, v * glow(abs(q - c)));\n    }\n  }\n}\nconst glow = (d) => (d \u003c 1 ? 1 - 0.7 * d : d \u003c 2 ? 0.3 * (2 - d) : 0);\n\nconst inWin = (p) => p && p[0] > X0 - 0.2 && p[0] \u003c X1 + 0.2 && abs(p[1]) \u003c YM + 0.3;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.curve) return;\n  const { R, G, B, c } = S, K = S.curve, N = K.N, st = S.step, tau = S.tau;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h0 = S.hue + 0.6;\n  // The plane inside the real curve and the board are dim tints.\n  const plane = [0, 0, 0], ink = [0, 0, 0], board = [0, 0, 0], chord = [0, 0, 0], white = [1, 1, 1], base = [0, 0, 0];\n  // Round orange and yellow the dim tints lose most of their colour, or\n  // they would read brown and olive.\n  const hw = h0 + 0.03 - floor(h0 + 0.03), warm = cl(1 - abs(hw - 0.12) / 0.1, 0, 1);\n  hsv(h0, 0.75 - 0.5 * warm, 0.16, plane);\n  hsv(h0 - 0.02, 0.32, 0.92, ink);\n  hsv(h0 + 0.03, 0.6 - 0.4 * warm, 0.115, board);\n  hsv(h0 + 0.5, 0.42, 1, chord);\n  hsv(h0, 0.2, 0.34, base);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      const p = r * W + col, ln = K.line[p], fl = K.fill[p];\n      R[p] = (plane[0] * fl + ink[0] * ln) * 255;\n      G[p] = (plane[1] * fl + ink[1] * ln) * 255;\n      B[p] = (plane[2] * fl + ink[2] * ln) * 255;\n    }\n  for (let y = 0; y \u003c P; y++)\n    for (let x = 0; x \u003c P; x++) {\n      const p = (BY - y) * W + BX + x;\n      R[p] = board[0] * 255;\n      G[p] = board[1] * 255;\n      B[p] = board[2] * 255;\n    }\n  for (const [x, y] of K.pts) add(S, BX + x, BY - y, base, 255);\n\n  // The lines of the last few steps, fading: a pencil of lines through G.\n  for (const q of S.past) {\n    const w = 1 - (S.gs + tau - q.gs) / linger(S);\n    if (w \u003c= 0) continue;\n    const ps = q.st, s0 = ps.start;\n    realLine(S, ps.rx, ps.ry, ps.rm, ps.rv, chord, 130 * w);\n    for (let t = 0; t \u003c P; t++) {\n      const x = md(s0[0] + ps.dx * t), y = md(s0[1] + ps.dy * t);\n      add(S, BX + x, BY - y, chord, 55 * w);\n    }\n  }\n\n  // The trail: each multiple in its order's hue, the whole cycle once round\n  // the wheel, held for most of the trail and then let go.\n  const L = trailLen(S), now = S.gs + tau;\n  for (const t of S.trail) {\n    const age = now - t.gs;\n    let v = age \u003c 0.6 * L ? 1 : cl((L - age) / (0.4 * L), 0, 1);\n    if (t.ghost) v *= cl(1 - t.ghost, 0, 1);\n    if (v \u003c= 0.01) continue;\n    hsv(h0 + 0.42 + t.k / N, 0.88, 1, c);\n    add(S, BX + t.fp[0], BY - t.fp[1], c, 255 * v);\n    if (inWin(t.re)) disc(S, t.re[0], t.re[1], 1.5, c, 235 * v);\n    for (const [dx, dy] of NB) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 95 * v);\n    // A fresh landing blooms for a step and a half.\n    const bl = 1 - age / 1.5;\n    if (bl > 0 && !t.ghost) {\n      for (const [dx, dy] of NB2) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 110 * bl);\n      if (inWin(t.re)) disc(S, t.re[0], t.re[1], 2.6, c, 90 * bl);\n    }\n  }\n\n  // The step under way.\n  const lineV = tau \u003c 0.08 ? tau / 0.08 : tau > 0.88 ? (1 - tau) / 0.12 : 1;\n  // Real: the line, the third point, the mirror, the new point.\n  realLine(S, st.rx, st.ry, st.rm, st.rv, chord, 190 * lineV);\n  const mir = cl((tau - T_MIR0) / (T_MIR1 - T_MIR0), 0, 1);\n  if (tau > T_LINE * 0.9) {\n    if (st.r3 && inWin(st.r3)) disc(S, st.r3[0], st.r3[1], 1.3, white, 200 * lineV);\n    if (!st.r3) for (let r = 0; r \u003c 2; r++) add(S, round(px(st.rx)), r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.r3) {\n    const ya = py(st.r3[1]), yb = py(st.rn[1]), cc = round(px(st.r3[0]));\n    const yt = ya + (yb - ya) * mir;\n    for (let r = max(0, round(min(ya, yt))); r \u003c= min(TOPH - 1, round(max(ya, yt))); r++) if (r % 2 === 0) add(S, cc, r, white, 150 * lineV);\n  }\n  if (tau > T_MIR1 && st.rn && inWin(st.rn)) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.6, 1, c);\n    disc(S, st.rn[0], st.rn[1], 1.5, c, 255);\n  }\n  // F_61: the line's dots from Q_k, the head brightest, then the mirror.\n  const head = (min(tau, T_LINE) / T_LINE) * (P - 1), s0 = st.start;\n  for (let t = 0; t \u003c= head; t++) {\n    const x = md(s0[0] + st.dx * t), y = md(s0[1] + st.dy * t);\n    const on = K.onBoard[x * P + y];\n    const v = head - t \u003c 1 ? 1 : 0.85 + (on ? 0.15 : 0);\n    add(S, BX + x, BY - y, on ? white : chord, 230 * v * lineV);\n  }\n  if (head >= st.tR) {\n    if (st.third) {\n      const x = BX + st.third[0], y = BY - st.third[1];\n      for (const [dx, dy] of NB) add(S, x + dx, y + dy, white, 150 * lineV);\n    } else for (let r = OROW - 1; r \u003c= OROW; r++) add(S, BX + st.start[0], r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.third) {\n    const x = BX + st.third[0], ya = BY - st.third[1], yb = BY - st.next[1], yt = ya + (yb - ya) * mir;\n    for (let r = round(min(ya, yt)); r \u003c= round(max(ya, yt)); r++) if (r % 2 === 0) add(S, x, r, white, 120 * lineV);\n  }\n  if (tau > T_MIR1 && st.next) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.5, 1, c);\n    const x = BX + st.next[0], y = BY - st.next[1];\n    add(S, x, y, c, 255);\n    for (const [dx, dy] of NB) add(S, x + dx, y + dy, c, 140);\n  }\n  // G on both halves: white, with a dark ring round it on the real curve.\n  const gx = BX + S.g[0], gy = BY - S.g[1];\n  add(S, gx, gy, white, 255);\n  for (const [dx, dy] of NB) add(S, gx + dx, gy + dy, white, 120);\n  if (inWin(S.gr)) {\n    const cx = px(S.gr[0]), cy = py(S.gr[1]);\n    for (let r = floor(cy - 3); r \u003c= cy + 3; r++)\n      for (let q = floor(cx - 3); q \u003c= cx + 3; q++) {\n        if (r \u003c 0 || r >= TOPH || q \u003c 0 || q >= W) continue;\n        const dd = sqrt((q - cx) ** 2 + (r - cy) ** 2), p = r * W + q;\n        if (dd \u003c 2.6) {\n          const k = dd \u003c 1.4 ? 1 : 0.15;\n          R[p] = 255 * k;\n          G[p] = 255 * k;\n          B[p] = 255 * k;\n        }\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-elliptic-chords","type":"code","name":"elliptic-chords","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Elliptic Chords\n// Family:  number\n// Idea:    The points of y^2 = x^3 - 6x + b add up by the chord-and-tangent rule, drawn twice at once: above, the real curve, where the line through G and kG meets the curve a third time and the mirror image of that point in the x-axis is (k+1)G; below, the same curve over the integers mod 61, where a line is 61 dots wrapping round the square and still meets the curve in exactly three of them, and the multiples of a generator light the whole group one dot at a time until the line through G and -G stands vertical and the count comes back to O.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: elliptic curve group law, chord and tangent (Henri Poincaré, 1901), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1\n//\n// Knob 1: Hue. Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky.\n// Knob 2: Speed. Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44.\n// Knob 3: Curve. The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points.\n// Knob 4: Trail. Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below.\n// Buttons: K1 tap picks a new generator G at random on both halves, and the group starts again from O: the first line is the vertical through G, and the old dots fade out in 1.5 seconds.\n\nconst W = 64, H = 128, P = 61, A = -6, CMIN = -4, CMAX = 8;\n// The real window: x from -3.15 to 4.45 over the 64 columns, y from -7.75 to\n// 7.75 over rows 0..62, with y = 0 on row 31. Lines stay lines under this\n// stretch, and the mirror in the x-axis stays a vertical move.\nconst TOPH = 63, X0 = -3.15, X1 = 4.45, SX = W / (X1 - X0), YM = 7.75, SY = TOPH / (2 * YM), YC = 31;\n// The F_61 board: element (x, y) is column BX + x, row BY - y; O sits on row OROW above it.\nconst BX = 1, BY = 126, OROW = 64;\n// Phases of one group step: the line, the mirror, the landing.\nconst T_LINE = 0.5, T_MIR0 = 0.55, T_MIR1 = 0.78;\nconst NT = 1024;\n// Group steps a second for each unit of Speed.\nconst RATE = 0.75;\nconst { floor, min, max, abs, sqrt, sin, cos, tan, acos, cbrt, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (v) => ((v % P) + P) % P;\nconst NB = [[1, 0], [-1, 0], [0, 1], [0, -1]];\nconst NB2 = [[2, 0], [-2, 0], [0, 2], [0, -2], [1, 1], [1, -1], [-1, 1], [-1, -1]];\n\n// Inverses mod 61, by Fermat.\nconst INV = new Int32Array(P);\nfor (let i = 1; i \u003c P; i++) {\n  let r = 1, e = P - 2, q = i;\n  while (e) {\n    if (e & 1) r = (r * q) % P;\n    q = (q * q) % P;\n    e >>= 1;\n  }\n  INV[i] = r;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// ---- F_61 -------------------------------------------------------------------\n// A point is [x, y] with entries 0..60, or null for O.\nfunction fpAdd(p, q, b) {\n  if (!p) return q;\n  if (!q) return p;\n  if (p[0] === q[0] && md(p[1] + q[1]) === 0) return null;\n  const m = p[0] === q[0] ? md((3 * p[0] * p[0] + A) * INV[md(2 * p[1])]) : md((q[1] - p[1]) * INV[md(q[0] - p[0])]);\n  const x = md(m * m - p[0] - q[0]);\n  return [x, md(m * (p[0] - x) - p[1])];\n}\n\nfunction fpOrder(g, b) {\n  let q = g, n = 1;\n  while (q && n \u003c 200) {\n    q = fpAdd(q, g, b);\n    n++;\n  }\n  return n;\n}\n\n// ---- the real curve -----------------------------------------------------------\n// The roots of x^3 - 6x + b, largest first: three when 27 b^2 \u003c 864, so\n// when |b| \u003c 5.66, and then the curve has an egg over [e3, e2].\nfunction roots(b) {\n  if (4 * A * A * A + 27 * b * b \u003c 0) {\n    const r = 2 * sqrt(-A / 3), th = acos(((3 * b) / (2 * A)) * sqrt(-3 / A)) / 3;\n    return [0, 1, 2].map((k) => r * cos(th - (2 * PI * k) / 3)).sort((p, q) => q - p);\n  }\n  const s = sqrt((b * b) / 4 + (A * A * A) / 27);\n  let x = cbrt(-b / 2 + s) + cbrt(-b / 2 - s);\n  for (let i = 0; i \u003c 6; i++) x -= (x * x * x + A * x + b) / (3 * x * x + A);\n  return [x];\n}\n\n// The real points of the curve as a group are a circle, R/wZ, times {0, 1}\n// when the egg is there. The circle is measured by the invariant\n// differential dx/y: on the long branch u(x) = int_x^inf dt/sqrt(f), with\n// t = e1 + tan^2(phi), and on the egg v(x) = int_e3^x dt/sqrt(f), with\n// t = e3 + (e2 - e3) sin^2(theta), both free of the square-root ends. Both\n// halves of the circle come to the same w/2. Checked against the chord rule\n// in a scratch script: main(u1) + main(u2) = main(u1 + u2), main(u) + egg(v)\n// = egg(u + v) and egg(v1) + egg(v2) = main(v1 + v2), to 2e-6 in the window.\nfunction realCurve(b) {\n  const R = roots(b), e1 = R[0], c = e1 * e1 + A;\n  const U = new Float64Array(NT + 1), h = PI / 2 / NT;\n  const gm = (ph) => {\n    if (ph >= PI / 2 - 1e-12) return 2;\n    const s = tan(ph), t = e1 + s * s, co = cos(ph);\n    return 2 / sqrt(t * t + e1 * t + c) / (co * co);\n  };\n  for (let i = NT - 1; i >= 0; i--) U[i] = U[i + 1] + (h / 6) * (gm(i * h) + 4 * gm((i + 0.5) * h) + gm((i + 1) * h));\n  const C = { b, R, U, w: 2 * U[0], egg: null };\n  if (R.length === 3) {\n    const e2 = R[1], e3 = R[2], V = new Float64Array(NT + 1);\n    const ge = (th) => 2 / sqrt(e1 - e3 - (e2 - e3) * sin(th) ** 2);\n    for (let i = 0; i \u003c NT; i++) V[i + 1] = V[i] + (h / 6) * (ge(i * h) + 4 * ge((i + 0.5) * h) + ge((i + 1) * h));\n    C.egg = { V, e2, e3 };\n  }\n  return C;\n}\n\nconst f = (x, b) => x * x * x + A * x + b;\n\n// Fractional index where the monotone table T meets the value t.\nfunction seek(T, t, rising) {\n  let lo = 0, hi = NT;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (T[m] \u003c t === rising) lo = m;\n    else hi = m;\n  }\n  return lo + (t - T[lo]) / (T[hi] - T[lo] || 1);\n}\n\n// The real point at parameter u on the branch (s = 0) or the egg (s = 1);\n// null for O.\nfunction realPoint(C, u, s) {\n  const w = C.w;\n  u -= floor(u / w) * w;\n  if (s === 0 && (u \u003c 1e-9 || w - u \u003c 1e-9)) return null;\n  const up = u \u003c= w / 2, q = up ? u : w - u;\n  let x;\n  if (s === 0) {\n    const ph = (seek(C.U, q, false) * PI) / 2 / NT;\n    x = C.R[0] + tan(ph) ** 2;\n  } else {\n    const { V, e2, e3 } = C.egg, th = (seek(V, q, true) * PI) / 2 / NT;\n    x = e3 + (e2 - e3) * sin(th) ** 2;\n  }\n  const y = sqrt(max(0, f(x, C.b)));\n  // The egg runs the other way round, so that main(u) + egg(v) = egg(u + v).\n  return [x, (up ? 1 : -1) * (s === 0 ? 1 : -1) * y];\n}\n\n// ---- one curve: both halves ---------------------------------------------------\nfunction buildCurve(b) {\n  const pts = [];\n  for (let x = 0; x \u003c P; x++) for (let y = 0; y \u003c P; y++) if (md(y * y - f(x, b)) === 0) pts.push([x, y]);\n  let N = 0, gens = [];\n  for (const p of pts) {\n    const o = fpOrder(p, b);\n    if (o > N) (N = o), (gens = []);\n    if (o === N) gens.push(p);\n  }\n  const C = realCurve(b);\n  const onBoard = new Uint8Array(P * P);\n  for (const [x, y] of pts) onBoard[x * P + y] = 1;\n  // The static picture of the real curve: a 1.4-LED line where y^2 = f(x),\n  // found by the distance |y^2 - f| / |gradient| in LEDs, and a soft fill on\n  // the side where f(x) > y^2, the inside of the egg and of the branch.\n  const line = new Float32Array(W * TOPH), fill = new Float32Array(W * TOPH);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      let acc = 0, inside = 0;\n      for (let sy = 0; sy \u003c 3; sy++)\n        for (let sx = 0; sx \u003c 3; sx++) {\n          const x = X0 + (col + (sx + 0.5) / 3) / SX, y = (YC + 0.5 - (r + (sy + 0.5) / 3)) / SY;\n          const F = y * y - f(x, b), gx = (3 * x * x + A) / SX, gy = (2 * y) / SY;\n          const d = abs(F) / (sqrt(gx * gx + gy * gy) + 1e-9);\n          acc += cl(1.15 - d, 0, 1);\n          if (F \u003c 0) inside++;\n        }\n      line[r * W + col] = acc / 9;\n      fill[r * W + col] = inside / 9;\n    }\n  return { b, pts, N, gens, C, onBoard, line, fill };\n}\n\n// ---- the cycle ----------------------------------------------------------------\n// Q_k = kG. Step k goes from Q_k to Q_k+1 = Q_k + G: the line through G and\n// Q_k (the tangent at G when k = 1, the vertical through G when Q_k is O or\n// -G), its third point R, and R mirrored. The real generator is a point of\n// the same order N: on the egg at parameter jw/N when there is an egg and N\n// is even, so the odd multiples land on the egg and the even ones on the\n// branch, otherwise on the branch.\nfunction startCycle(S, fresh) {\n  const K = S.curve, N = K.N, C = K.C;\n  S.g = K.gens[floor(random() * K.gens.length)];\n  S.side = C.egg && N % 2 === 0 ? 1 : 0;\n  const js = [];\n  for (let j = 1; j \u003c N; j++) {\n    let a = j, bb = N;\n    while (bb) [a, bb] = [bb, a % bb];\n    if (a !== 1) continue;\n    const g = realPoint(C, (j * C.w) / N, S.side);\n    if (g && g[0] > X0 + 0.3 && g[0] \u003c X1 - 0.3 && abs(g[1]) \u003c YM - 0.4) js.push(j);\n  }\n  S.j = js.length ? js[floor(random() * js.length)] : 1;\n  S.gr = realPoint(C, (S.j * C.w) / N, S.side);\n  for (const t of S.trail) t.ghost = t.ghost || 1e-6;\n  if (fresh) {\n    // The opening shows the cycle already under way: 80% of it lit.\n    const k0 = round(0.8 * N);\n    let q = null;\n    for (let k = 1; k \u003c= k0; k++) {\n      q = fpAdd(q, S.g, K.b);\n      S.trail.push({ k, gs: S.gs - (k0 - k), fp: q, re: realK(S, k), ghost: 0 });\n    }\n    S.k = k0;\n    S.q = q;\n  } else {\n    S.k = 0;\n    S.q = null;\n  }\n  planStep(S);\n}\n\nconst realK = (S, k) => realPoint(S.curve.C, (k * S.j * S.curve.C.w) / S.curve.N, (k * S.side) & 1);\n\n// The F_61 line y = mx + c is the lattice of points (t, mt) mod 61 shifted\n// to one of them. Its shortest vector, found by Lagrange's reduction of the\n// basis (1, m), (0, 61), is never more than 8.4 long, and stepping by it still\n// visits all 61 points, so the walk runs along short streaks that wrap round\n// the square instead of jumping m rows at a time.\nfunction shortStep(m) {\n  let ax = 1, ay = m > P / 2 ? m - P : m, bx = 0, by = P;\n  const n2 = (x, y) => x * x + y * y;\n  for (let i = 0; i \u003c 20; i++) {\n    if (n2(bx, by) \u003c n2(ax, ay)) [ax, ay, bx, by] = [bx, by, ax, ay];\n    const mu = round((ax * bx + ay * by) / n2(ax, ay));\n    if (mu === 0) break;\n    bx -= mu * ax;\n    by -= mu * ay;\n  }\n  return [md(ax), md(ay)];\n}\n\nfunction planStep(S) {\n  const K = S.curve, N = K.N, k = S.k, g = S.g, q = S.q;\n  const st = { k, vert: false, m: 0, start: q || g, third: null, next: null, rm: 0, rx: 0, ry: 0, rv: false, r3: null, rn: null, tR: -1 };\n  // F_61: the line's slope, its 61 dots from Q_k (from G when Q_k is O), and\n  // how many steps along it the third point falls.\n  if (!q || (q[0] === g[0] && md(q[1] + g[1]) === 0)) st.vert = true;\n  else st.m = q[0] === g[0] ? md((3 * g[0] * g[0] + A) * INV[md(2 * g[1])]) : md((q[1] - g[1]) * INV[md(q[0] - g[0])]);\n  st.next = fpAdd(q, g, K.b);\n  st.third = st.next ? [st.next[0], md(-st.next[1])] : null;\n  [st.dx, st.dy] = st.vert ? [0, 1] : shortStep(st.m);\n  const s0 = st.start, stepT = (pt) => (st.vert ? md(pt[1] - s0[1]) : md((pt[0] - s0[0]) * INV[st.dx]));\n  st.tR = st.third ? stepT(st.third) : P - 1;\n  // The real line, through G_r with slope rm or vertical.\n  const G = S.gr, Q = k === 0 ? null : realK(S, k);\n  if (k === 0 || k === N - 1) st.rv = true;\n  else if (k === 1) st.rm = (3 * G[0] * G[0] + A) / (2 * G[1]);\n  else if (Q) st.rm = (Q[1] - G[1]) / (Q[0] - G[0]);\n  else st.rm = 0;\n  st.rx = G[0];\n  st.ry = G[1];\n  if (k === N - 1) st.r3 = null;\n  else if (k === 0) st.r3 = [G[0], -G[1]];\n  else {\n    const x3 = st.rm * st.rm - G[0] - (Q ? Q[0] : G[0]);\n    st.r3 = [x3, G[1] + st.rm * (x3 - G[0])];\n  }\n  st.rn = st.r3 ? [st.r3[0], -st.r3[1]] : null;\n  S.step = st;\n}\n\nfunction finishStep(S) {\n  const st = S.step, N = S.curve.N;\n  S.past.push({ st, gs: S.gs + 1 });\n  S.gs++;\n  S.k = (S.k + 1) % N;\n  S.q = st.next;\n  if (st.next) S.trail.push({ k: S.k, gs: S.gs, fp: st.next, re: st.rn, ghost: 0 });\n  planStep(S);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trailK: 0.06, b: null, curve: null, curves: {}, g: null, gr: null, j: 1, side: 0,\n    k: 0, q: null, gs: 0, tau: 0, step: null, trail: [], past: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0];\n  S.speed = cl(kv[1], 0.2, 3);\n  S.trailK = cl(kv[3], 0, 1);\n  const b = round(cl(kv[2], CMIN, CMAX));\n  if (b !== S.b) {\n    S.b = b;\n    S.curve = S.curves[b] || (S.curves[b] = buildCurve(b));\n    S.trail.length = 0;\n    S.past.length = 0;\n    S.tau = 0;\n    startCycle(S, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.tau = 0;\n    startCycle(S, false);\n  }\n  S.tau += d * S.speed * RATE;\n  while (S.tau >= 1) {\n    S.tau -= 1;\n    finishStep(S);\n  }\n  // Ghosts of an old cycle fade out over 1.5 seconds.\n  for (const t of S.trail) if (t.ghost) t.ghost += d / 1.5;\n  const L = trailLen(S);\n  S.trail = S.trail.filter((t) => (t.ghost ? t.ghost \u003c 1 : S.gs + S.tau - t.gs \u003c L + 1));\n  S.past = S.past.filter((q) => S.gs + S.tau - q.gs \u003c linger(S));\n}\n\n// Past lines linger, fading: 1.6 steps at Trail 0, 8 steps at 1. They all\n// pass through G.\nconst linger = (S) => 1.6 + 6.4 * S.trailK ** 1.2;\n\nconst trailLen = (S) => 2 + (S.curve.N - 2) * (1 - S.trailK) ** 1.5;\n\n// ---- drawing ------------------------------------------------------------------\nfunction add(S, x, y, col, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0) return;\n  const p = y * W + x;\n  S.R[p] += col[0] * v;\n  S.G[p] += col[1] * v;\n  S.B[p] += col[2] * v;\n}\n\n// Real coordinates to LED coordinates (LED centres at whole numbers).\nconst px = (x) => (x - X0) * SX - 0.5;\nconst py = (y) => YC - y * SY;\n\nfunction disc(S, x, y, rad, col, v) {\n  const cx = px(x), cy = py(y);\n  for (let r = floor(cy - rad - 1); r \u003c= cy + rad + 1; r++)\n    for (let c = floor(cx - rad - 1); c \u003c= cx + rad + 1; c++) {\n      if (r \u003c 0 || r >= TOPH) continue;\n      const dd = sqrt((c - cx) ** 2 + (r - cy) ** 2);\n      add(S, c, r, col, v * cl(rad + 0.5 - dd, 0, 1));\n    }\n}\n\n// The real line through (x0, y0) with slope m, or the vertical through x0,\n// clipped to the window: one LED wide with a soft LED of glow either side.\nfunction realLine(S, x0, y0, m, vert, col, v) {\n  const k = vert ? 0 : (-m * SY) / SX, ax = px(x0), ay = py(y0);\n  if (!vert && abs(k) \u003c= 1) {\n    // Shallow: walk the columns, spread across rows.\n    for (let c = 0; c \u003c W; c++) {\n      const r = ay + k * (c - ax), r0 = floor(r);\n      for (let q = r0 - 1; q \u003c= r0 + 2; q++) if (q >= 0 && q \u003c TOPH) add(S, c, q, col, v * glow(abs(q - r)));\n    }\n  } else {\n    for (let r = 0; r \u003c TOPH; r++) {\n      const c = vert ? ax : ax + (r - ay) / k, c0 = floor(c);\n      for (let q = c0 - 1; q \u003c= c0 + 2; q++) add(S, q, r, col, v * glow(abs(q - c)));\n    }\n  }\n}\nconst glow = (d) => (d \u003c 1 ? 1 - 0.7 * d : d \u003c 2 ? 0.3 * (2 - d) : 0);\n\nconst inWin = (p) => p && p[0] > X0 - 0.2 && p[0] \u003c X1 + 0.2 && abs(p[1]) \u003c YM + 0.3;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.curve) return;\n  const { R, G, B, c } = S, K = S.curve, N = K.N, st = S.step, tau = S.tau;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  const h0 = S.hue + 0.6;\n  // The plane inside the real curve and the board are dim tints.\n  const plane = [0, 0, 0], ink = [0, 0, 0], board = [0, 0, 0], chord = [0, 0, 0], white = [1, 1, 1], base = [0, 0, 0];\n  // Round orange and yellow the dim tints lose most of their colour, or\n  // they would read brown and olive.\n  const hw = h0 + 0.03 - floor(h0 + 0.03), warm = cl(1 - abs(hw - 0.12) / 0.1, 0, 1);\n  hsv(h0, 0.75 - 0.5 * warm, 0.16, plane);\n  hsv(h0 - 0.02, 0.32, 0.92, ink);\n  hsv(h0 + 0.03, 0.6 - 0.4 * warm, 0.115, board);\n  hsv(h0 + 0.5, 0.42, 1, chord);\n  hsv(h0, 0.2, 0.34, base);\n  for (let r = 0; r \u003c TOPH; r++)\n    for (let col = 0; col \u003c W; col++) {\n      const p = r * W + col, ln = K.line[p], fl = K.fill[p];\n      R[p] = (plane[0] * fl + ink[0] * ln) * 255;\n      G[p] = (plane[1] * fl + ink[1] * ln) * 255;\n      B[p] = (plane[2] * fl + ink[2] * ln) * 255;\n    }\n  for (let y = 0; y \u003c P; y++)\n    for (let x = 0; x \u003c P; x++) {\n      const p = (BY - y) * W + BX + x;\n      R[p] = board[0] * 255;\n      G[p] = board[1] * 255;\n      B[p] = board[2] * 255;\n    }\n  for (const [x, y] of K.pts) add(S, BX + x, BY - y, base, 255);\n\n  // The lines of the last few steps, fading: a pencil of lines through G.\n  for (const q of S.past) {\n    const w = 1 - (S.gs + tau - q.gs) / linger(S);\n    if (w \u003c= 0) continue;\n    const ps = q.st, s0 = ps.start;\n    realLine(S, ps.rx, ps.ry, ps.rm, ps.rv, chord, 130 * w);\n    for (let t = 0; t \u003c P; t++) {\n      const x = md(s0[0] + ps.dx * t), y = md(s0[1] + ps.dy * t);\n      add(S, BX + x, BY - y, chord, 55 * w);\n    }\n  }\n\n  // The trail: each multiple in its order's hue, the whole cycle once round\n  // the wheel, held for most of the trail and then let go.\n  const L = trailLen(S), now = S.gs + tau;\n  for (const t of S.trail) {\n    const age = now - t.gs;\n    let v = age \u003c 0.6 * L ? 1 : cl((L - age) / (0.4 * L), 0, 1);\n    if (t.ghost) v *= cl(1 - t.ghost, 0, 1);\n    if (v \u003c= 0.01) continue;\n    hsv(h0 + 0.42 + t.k / N, 0.88, 1, c);\n    add(S, BX + t.fp[0], BY - t.fp[1], c, 255 * v);\n    if (inWin(t.re)) disc(S, t.re[0], t.re[1], 1.5, c, 235 * v);\n    for (const [dx, dy] of NB) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 95 * v);\n    // A fresh landing blooms for a step and a half.\n    const bl = 1 - age / 1.5;\n    if (bl > 0 && !t.ghost) {\n      for (const [dx, dy] of NB2) add(S, BX + t.fp[0] + dx, BY - t.fp[1] + dy, c, 110 * bl);\n      if (inWin(t.re)) disc(S, t.re[0], t.re[1], 2.6, c, 90 * bl);\n    }\n  }\n\n  // The step under way.\n  const lineV = tau \u003c 0.08 ? tau / 0.08 : tau > 0.88 ? (1 - tau) / 0.12 : 1;\n  // Real: the line, the third point, the mirror, the new point.\n  realLine(S, st.rx, st.ry, st.rm, st.rv, chord, 190 * lineV);\n  const mir = cl((tau - T_MIR0) / (T_MIR1 - T_MIR0), 0, 1);\n  if (tau > T_LINE * 0.9) {\n    if (st.r3 && inWin(st.r3)) disc(S, st.r3[0], st.r3[1], 1.3, white, 200 * lineV);\n    if (!st.r3) for (let r = 0; r \u003c 2; r++) add(S, round(px(st.rx)), r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.r3) {\n    const ya = py(st.r3[1]), yb = py(st.rn[1]), cc = round(px(st.r3[0]));\n    const yt = ya + (yb - ya) * mir;\n    for (let r = max(0, round(min(ya, yt))); r \u003c= min(TOPH - 1, round(max(ya, yt))); r++) if (r % 2 === 0) add(S, cc, r, white, 150 * lineV);\n  }\n  if (tau > T_MIR1 && st.rn && inWin(st.rn)) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.6, 1, c);\n    disc(S, st.rn[0], st.rn[1], 1.5, c, 255);\n  }\n  // F_61: the line's dots from Q_k, the head brightest, then the mirror.\n  const head = (min(tau, T_LINE) / T_LINE) * (P - 1), s0 = st.start;\n  for (let t = 0; t \u003c= head; t++) {\n    const x = md(s0[0] + st.dx * t), y = md(s0[1] + st.dy * t);\n    const on = K.onBoard[x * P + y];\n    const v = head - t \u003c 1 ? 1 : 0.85 + (on ? 0.15 : 0);\n    add(S, BX + x, BY - y, on ? white : chord, 230 * v * lineV);\n  }\n  if (head >= st.tR) {\n    if (st.third) {\n      const x = BX + st.third[0], y = BY - st.third[1];\n      for (const [dx, dy] of NB) add(S, x + dx, y + dy, white, 150 * lineV);\n    } else for (let r = OROW - 1; r \u003c= OROW; r++) add(S, BX + st.start[0], r, white, 255 * lineV);\n  }\n  if (mir > 0 && st.third) {\n    const x = BX + st.third[0], ya = BY - st.third[1], yb = BY - st.next[1], yt = ya + (yb - ya) * mir;\n    for (let r = round(min(ya, yt)); r \u003c= round(max(ya, yt)); r++) if (r % 2 === 0) add(S, x, r, white, 120 * lineV);\n  }\n  if (tau > T_MIR1 && st.next) {\n    hsv(h0 + 0.42 + ((st.k + 1) % N) / N, 0.5, 1, c);\n    const x = BX + st.next[0], y = BY - st.next[1];\n    add(S, x, y, c, 255);\n    for (const [dx, dy] of NB) add(S, x + dx, y + dy, c, 140);\n  }\n  // G on both halves: white, with a dark ring round it on the real curve.\n  const gx = BX + S.g[0], gy = BY - S.g[1];\n  add(S, gx, gy, white, 255);\n  for (const [dx, dy] of NB) add(S, gx + dx, gy + dy, white, 120);\n  if (inWin(S.gr)) {\n    const cx = px(S.gr[0]), cy = py(S.gr[1]);\n    for (let r = floor(cy - 3); r \u003c= cy + 3; r++)\n      for (let q = floor(cx - 3); q \u003c= cx + 3; q++) {\n        if (r \u003c 0 || r >= TOPH || q \u003c 0 || q >= W) continue;\n        const dd = sqrt((q - cx) ** 2 + (r - cy) ** 2), p = r * W + q;\n        if (dd \u003c 2.6) {\n          const k = dd \u003c 1.4 ? 1 : 0.15;\n          R[p] = 255 * k;\n          G[p] = 255 * k;\n          B[p] = 255 * k;\n        }\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Curve=-4..8, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns everything round the wheel. At 0 the plane inside the real curve and the board are deep blue, the curve pale blue, the lines pale peach and the multiples a full rainbow in visiting order, with G white; at 0.5 the plane and board are a dim grey-brown, the curve pale apricot and the lines pale sky."},{"name":"Speed","min":0.2,"max":3,"about":"Group steps a second. At 2 one and a half: the line sweeps its 61 dots in a third of a second, the third point drops to its mirror image in 0.15 seconds and the new multiple lands, so the 74 multiples of the opening curve come round in 49 seconds; at 0.2 a step takes 6.7 seconds, at 3 0.44."},{"name":"Curve","min":-4,"max":8,"about":"The constant b, in whole steps. At 0, the opening, y^2 = x^3 - 6x has an egg between -2.45 and 0 beside the long branch, and over F_61 its 74 points are one cycle; at -4 the egg is half as wide and the 72 points mod 61 are not one cycle, so a generator reaches 36 of them, O included, and the rest stay grey; at 4 the same 36 of 72; at 5 the egg reaches to within 0.8 of the branch, 64 points; from 6 to 8 the two have joined into one piece with a neck, 61, 62 and 62 points."},{"name":"Trail","min":0,"max":1,"about":"Trades the dots for the lines. At 0 a multiple stays lit for the whole cycle, fading over its last 40%, and each line lingers 1.6 steps; at 0.06 almost the same; at 0.5 the dots last 28 steps and the lines 4.4; at 1 only the last two dots stay but each line lingers 8 steps, so the lines through G stand as a fan above and a crowd of dots below."}],"start":[0,2,0,0.06],"measures":{"motion":0.0496,"detail":0.0598,"edges":0.5832,"complexity":0.5264,"coverage":0.6226,"colour":0.1255,"drift":0.0238},"knobResponse":[0.0592,0.0309,0.1041,0.0281]},{"slug":"embossed-glow","title":"Embossed Glow","family":"cosmetic","round":37,"note":"엠보싱한 하이라이터의 눌린 면이 패널을 채우고, 떠도는 작은 램프를 향한 비탈이 부드러운 띠로 빛나요. 반짝이 알갱이는 면이 램프 쪽으로 7도 안에 설 때만 빛나서 반짝임이 능선을 타고 옮겨 가요. 6.5초마다 보이지 않는 손끝이 홈을 쓸어 엠보싱을 새틴 띠로 눌러 펴고, 네 번 쓸면 판이 다시 눌려요. K3 은 물결과 퀼팅 마름모, 갈매기, 비늘 무늬를 고르고, 누르면 판을 바로 다시 눌러요.","idea":"The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.","buttons":"K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.","code":"// ===== Patternflow pattern =====\n// Title:   Embossed Glow\n// Family:  cosmetic\n// Idea:    The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after embossed baked highlighters and pressed powder compacts\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1\n//\n// Knob 1: Hue. The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive.\n// Knob 2: Speed. At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again.\n// Knob 3: Relief. The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3.\n// Knob 4: Lamp. How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin.\n// Buttons: K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, abs, min, max, pow, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst fr = (v) => v - floor(v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The four reliefs as heights from 0 (the floor of a groove) to 1 (a crest),\n// in LEDs from the top left. Each repeats every 9 to 24 LEDs, wide enough\n// that a slope spans three or more LEDs and its band reads.\nfunction relief(kind, x, y) {\n  if (kind === 0) {\n    // Ripples round the middle, 9 LEDs apart, crests a little sharper than\n    // the troughs.\n    const r = hypot(x - 31.5, y - 63.5), c = 0.5 + 0.5 * cos((2 * PI * r) / 9);\n    return pow(c, 0.8) * sm(0, 4, r) + (1 - sm(0, 4, r)) * 0.8;\n  }\n  if (kind === 1) {\n    // Quilted diamonds 16 wide and 24 tall: each a pillow, stitched down\n    // along its edges.\n    const u = x / 16 + y / 24, v = x / 16 - y / 24, fu = fr(u) - 0.5, fv = fr(v) - 0.5;\n    return pow(cos(PI * fu) * cos(PI * fv), 0.55);\n  }\n  if (kind === 2) {\n    // Chevrons 16 LEDs a V, stacked every 10 rows, with a sharp crest and a\n    // long back slope like a pressed rib.\n    const yv = y + 8 * abs(2 * fr(x / 16 + 0.5) - 1), t = fr(yv / 10);\n    return t \u003c 0.3 ? sm(0, 0.3, t) : 1 - sm(0.3, 1, t);\n  }\n  // Scales 14 wide in rows 9 apart, each row overlapping the one above,\n  // every scale rising to a rounded lip at its lower edge.\n  const j = floor(y / 9 + 0.5);\n  let best = -1, hh = 0;\n  for (let jj = j + 1; jj >= j - 1; jj--) {\n    const off = jj & 1 ? 7 : 0, i = round((x - off) / 14), cx = i * 14 + off, cy = jj * 9 - 4;\n    const d = hypot(x - cx, (y - cy) * 1.05) / 9;\n    if (d \u003c 1 && y >= cy) {\n      best = jj;\n      hh = 0.2 + 0.8 * sm(0.1, 0.85, d) * (1 - sm(0.9, 1, d));\n      break;\n    }\n  }\n  return best \u003c 0 ? 0 : hh;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, kind: -1, lamp: 0.06, clock: 0, started: false,\n    rel: new Float32Array(N), wipe: new Float32Array(N), hgt: new Float32Array(N),\n    gx: new Float32Array(N), gy: new Float32Array(N), gw: new Float32Array(N), gt: new Uint8Array(N),\n    swipe: null, nextSwipe: 2.2, swipes: 0, press: -1, pal: new Float32Array(16), palHue: NaN,\n  });\n  // A shimmer grain under every LED: its facet leans up to 13 degrees off\n  // the surface, every way, so the glints gather where the surface itself\n  // nearly faces the half vector, along the lit flank of each ridge. Half the\n  // grains are bright enough to glint and one in three of those flips to the\n  // second tint.\n  for (let p = 0; p \u003c N; p++) {\n    const a = random() * 2 * PI, t = 0.23 * sqrt(random());\n    S.gx[p] = t * cos(a);\n    S.gy[p] = t * sin(a);\n    const g = random();\n    S.gw[p] = g \u003c 0.5 ? 0.5 + 0.5 * random() : 0.1 * random();\n    S.gt[p] = random() \u003c 0.33 ? 1 : 0;\n  }\n}\n\nfunction setRelief(S, kind) {\n  S.kind = kind;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) S.rel[y * W + x] = relief(kind, x, y);\n}\n\n// A swipe: a slightly bent stroke 9 to 13 LEDs wide, mostly up or down the\n// panel, entering and leaving near the edges.\nfunction newSwipe() {\n  const down = random() \u003c 0.5, x0 = 8 + random() * 48, x1 = 8 + random() * 48;\n  const y0 = down ? -6 : H + 6, y1 = down ? 30 + random() * 80 : 98 - random() * 80;\n  return {\n    x0, y0, x1, y1, bx: (x0 + x1) / 2 + (random() - 0.5) * 40, by: (y0 + y1) / 2,\n    r: 4.5 + random() * 2, t: 0, last: 0,\n  };\n}\n\nfunction stamp(S, x, y, r) {\n  for (let yy = max(0, floor(y - r - 2)); yy \u003c= min(H - 1, y + r + 2); yy++)\n    for (let xx = max(0, floor(x - r - 2)); xx \u003c= min(W - 1, x + r + 2); xx++) {\n      const d = hypot(xx - x, yy - y), w = 1 - sm(r - 1.5, r + 1.5, d), p = yy * W + xx;\n      if (w > S.wipe[p]) S.wipe[p] = w;\n    }\n}\n\nfunction stepSwipe(S, ds) {\n  const sw = S.swipe;\n  sw.t = min(1, sw.t + ds / 0.7);\n  // Ease in and out: the fingertip lands, drags and lifts.\n  const e = sm(0, 1, sw.t);\n  const n = max(1, Math.ceil((e - sw.last) * 120));\n  for (let i = 1; i \u003c= n; i++) {\n    const u = sw.last + ((e - sw.last) * i) / n, v = 1 - u;\n    stamp(S, v * v * sw.x0 + 2 * u * v * sw.bx + u * u * sw.x1, v * v * sw.y0 + 2 * u * v * sw.by + u * u * sw.y1, sw.r * (0.75 + 0.25 * sin(PI * min(1, u * 1.4))));\n  }\n  sw.last = e;\n  if (sw.t >= 1) S.swipe = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.lamp = cl(k[3], -1, 1);\n  const kind = cl(round(k[2]), 0, 3);\n  if (kind !== S.kind) setRelief(S, kind);\n  if (!S.started) {\n    // Open on a pan that has had one swipe already.\n    S.swipe = newSwipe();\n    S.swipe.x0 = 14;\n    S.swipe.x1 = 50;\n    S.swipe.y0 = -6;\n    S.swipe.y1 = 92;\n    S.swipe.bx = 6;\n    while (S.swipe) stepSwipe(S, 0.05);\n    S.started = true;\n  }\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  if (input.btnPressed && input.btnPressed[0] && S.press \u003c 0) S.press = 0;\n  if (S.press >= 0) {\n    // The pressing edge runs down from the top in 2.4 s, or 4.8 s at Speed\n    // 1 and below, so a tap is never a long wait. Above it every trough is\n    // gone; the last 12 rows over it are part way.\n    S.press += d * max(0.5, S.speed / 2);\n    const y1 = (S.press / 2.4) * (H + 24) - 12;\n    for (let y = 0; y \u003c min(H, y1); y++) {\n      const keep = sm(y1 - 12, y1, y);\n      for (let x = 0; x \u003c W; x++) if (S.wipe[y * W + x] > keep) S.wipe[y * W + x] = keep;\n    }\n    if (y1 > H + 12) S.press = -1;\n  }\n  if (S.swipe) stepSwipe(S, ds);\n  else if (S.clock >= S.nextSwipe) {\n    S.nextSwipe = S.clock + 6.5;\n    S.swipes++;\n    if (S.swipes % 5 === 0 && S.press \u003c 0) S.press = 0;\n    else S.swipe = newSwipe();\n  }\n}\n\nfunction palette(S) {\n  // At Hue 0 a pink pearl. Where the hue comes round to orange, gold and\n  // lime the body is laid paler and brighter and its shaded side leans to\n  // rose, as at half light those hues read brown or olive. Elsewhere the\n  // shaded side is the same hue a little deeper. The sheen is a pale tint a\n  // fourteenth of the wheel on, and the glints come in two tints, the\n  // shade's own and one a tenth on, as pearl pigment flips.\n  const h = S.hue + 0.9, hh = fr(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.03, hw) * (1 - sm(0.26, 0.38, hw));\n  hsv(h, 0.42 - 0.14 * warm, 0.94 + 0.05 * warm, S.pal, 0);\n  hsv(h - 0.12 * warm, 0.56 - 0.04 * warm, 1, S.pal, 3);\n  hsv(h + 0.07, 0.3, 1, S.pal, 6);\n  hsv(h, 0.22, 1, S.pal, 9);\n  hsv(h + 0.1, 0.3, 1, S.pal, 12);\n  S.pal[15] = warm;\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const { rel, wipe, hgt, gx, gy, gw, gt, pal } = S;\n  // The lamp wanders on a slow Lissajous path over the whole panel, 9 LEDs\n  // above it at Lamp -1, 32 at 0.06 and 64 at 1.\n  const t = S.clock, lx = 32 + 24 * sin(t * 0.37 + 1.1), ly = 64 + 44 * sin(t * 0.23 + 0.4);\n  const lh = 32 + (S.lamp >= 0.06 ? ((S.lamp - 0.06) / 0.94) * 32 : ((S.lamp - 0.06) / 1.06) * 23);\n  // Above 0.06 the room light comes up too: a light straight overhead, 2.4\n  // times the lamp at Lamp 1, which lights every flank alike and evens out\n  // the pool.\n  const up = S.lamp > 0.06 ? (S.lamp - 0.06) / 0.94 : 0, over = 2.4 * up, poolLift = 0.4 * up;\n  // The eye sways 1.5 degrees, as a shopper's would, so the glints twinkle\n  // even while the lamp holds still.\n  let ex = 0.026 * sin(t * 2.1), ey = 0.026 * sin(t * 1.7 + 2);\n  const en = 1 / sqrt(ex * ex + ey * ey + 1);\n  ex *= en;\n  ey *= en;\n  const ez = en;\n  // Height in LEDs: crests stand 2 above the grooves. Under a swipe the\n  // emboss is flattened to a trough 0.2 below the grooves, with a low lip of\n  // pushed powder at its edge. Under the pressing edge the emboss is pushed\n  // down to a sixth over a band 20 rows tall and springs back behind it.\n  const py1 = S.press >= 0 ? (S.press / 2.4) * (H + 24) - 12 : -1e9;\n  for (let y = 0; y \u003c H; y++) {\n    const rise = 1 - 0.85 * (1 - sm(0, 10, abs(y - py1 + 4)));\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, w = wipe[p];\n      hgt[p] = 2 * (rel[p] * rise * (1 - w) - 0.11 * w + 0.5 * w * (1 - w));\n    }\n  }\n  const warm = pal[15], amb = 0.22 + 0.36 * warm, COSG = cos((7 * PI) / 180);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, h = hgt[p];\n      const hx = (x \u003c W - 1 ? hgt[p + 1] : h) - (x > 0 ? hgt[p - 1] : h), hy = (y \u003c H - 1 ? hgt[p + W] : h) - (y > 0 ? hgt[p - W] : h);\n      let nx = -hx * 0.5, ny = -hy * 0.5, nz = 1;\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1);\n      nx *= nn;\n      ny *= nn;\n      nz *= nn;\n      let ldx = lx - x, ldy = ly - y, ldz = lh - h;\n      const flat2 = ldx * ldx + ldy * ldy;\n      let li = 1 / sqrt(flat2 + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz = ldz * li + over;\n      li = 1 / sqrt(ldx * ldx + ldy * ldy + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz *= li;\n      let hvx = ldx + ex, hvy = ldy + ey, hvz = ldz + ez;\n      const hn = 1 / sqrt(hvx * hvx + hvy * hvy + hvz * hvz);\n      hvx *= hn;\n      hvy *= hn;\n      hvz *= hn;\n      // The lamp's pool: full under it, half 40 LEDs out, never under 0.3.\n      const pool = 0.3 + 0.7 / (1 + flat2 / 1600) + poolLift, w = wipe[p];\n      // A slope lights by how much more it faces the lamp than the flat\n      // powder does (Lambert over the flat's own Lambert), so a low lamp\n      // rakes the whole pan, up to 1.7 times the flat on a facing flank and\n      // down to a fifth on the far one, while light from overhead lights\n      // every flank nearly alike. Rose, orange and yellow keep only 55% of\n      // that range, so their dark side never browns.\n      const fl = cl((0.7 * (nx * ldx + ny * ldy + nz * ldz)) / max(ldz, 0.12), 0.14, 1.2);\n      const lit = pool * (fl + (0.75 - fl) * 0.45 * warm);\n      // Satin sheen: broad on the grainy powder and broader still in a\n      // trough, where the finger has pressed it smooth and it glows as one.\n      const nh = max(0, nx * hvx + ny * hvy + nz * hvz), sheen = pow(nh, 12 - 6 * w) * (0.55 + 0.08 * w) * pool;\n      // A grain glints when its facet is within 7 degrees of the half vector.\n      const mx = nx + gx[p], my = ny + gy[p], mz = nz, md = (mx * hvx + my * hvy + mz * hvz) / sqrt(mx * mx + my * my + mz * mz);\n      let gl = 0;\n      if (md > COSG) {\n        const q = (md - COSG) / (1 - COSG);\n        gl = gw[p] * q * q * (1 - w) * (1 - w) * (0.5 + 0.7 * pool) * 1.6;\n      }\n      const body = (amb + (1 - amb) * lit) * (0.94 + 0.12 * gw[p]), o = gt[p] ? 12 : 9;\n      // Lit faces take the body colour, shaded ones the shade colour, and a\n      // trough leans a third of the way to the shade colour.\n      const u = cl(lit, 0, 1) * (1 - 0.35 * w), v = 1 - u;\n      let r = (pal[0] * u + pal[3] * v) * body + pal[6] * sheen + pal[o] * gl;\n      let g = (pal[1] * u + pal[4] * v) * body + pal[7] * sheen + pal[o + 1] * gl;\n      let b = (pal[2] * u + pal[5] * v) * body + pal[8] * sheen + pal[o + 2] * gl;\n      // Past full brightness the colour is scaled down whole rather than\n      // clipped channel by channel, so a glint stays a tint and not white.\n      const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (m > 1) (r /= m), (g /= m), (b /= m);\n      display.setPixel(x, y, 255 * r, 255 * g, 255 * b);\n    }\n}\n","layer":{"id":"layer-embossed-glow","type":"code","name":"embossed-glow","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Embossed Glow\n// Family:  cosmetic\n// Idea:    The whole panel is the face of a pressed shimmer highlighter embossed with one relief at a time, ripples, quilted diamonds, chevrons or scales, under a small lamp that wanders over it: the slopes catch the lamp as soft bands, shimmer grains glint where their facets meet the lamp and the eye so the glints run along the ridges, and every few seconds an unseen fingertip swipes a smooth satin trough through the emboss and wipes its glints away, until the pan is pressed again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after embossed baked highlighters and pressed powder compacts\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1\n//\n// Knob 1: Hue. The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive.\n// Knob 2: Speed. At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again.\n// Knob 3: Relief. The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3.\n// Knob 4: Lamp. How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin.\n// Buttons: K1 tap presses the pan again now: a pressing edge runs down from the top in 2.4 s, the emboss springs back up behind it and every glint returns.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sin, cos, sqrt, abs, min, max, pow, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst fr = (v) => v - floor(v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The four reliefs as heights from 0 (the floor of a groove) to 1 (a crest),\n// in LEDs from the top left. Each repeats every 9 to 24 LEDs, wide enough\n// that a slope spans three or more LEDs and its band reads.\nfunction relief(kind, x, y) {\n  if (kind === 0) {\n    // Ripples round the middle, 9 LEDs apart, crests a little sharper than\n    // the troughs.\n    const r = hypot(x - 31.5, y - 63.5), c = 0.5 + 0.5 * cos((2 * PI * r) / 9);\n    return pow(c, 0.8) * sm(0, 4, r) + (1 - sm(0, 4, r)) * 0.8;\n  }\n  if (kind === 1) {\n    // Quilted diamonds 16 wide and 24 tall: each a pillow, stitched down\n    // along its edges.\n    const u = x / 16 + y / 24, v = x / 16 - y / 24, fu = fr(u) - 0.5, fv = fr(v) - 0.5;\n    return pow(cos(PI * fu) * cos(PI * fv), 0.55);\n  }\n  if (kind === 2) {\n    // Chevrons 16 LEDs a V, stacked every 10 rows, with a sharp crest and a\n    // long back slope like a pressed rib.\n    const yv = y + 8 * abs(2 * fr(x / 16 + 0.5) - 1), t = fr(yv / 10);\n    return t \u003c 0.3 ? sm(0, 0.3, t) : 1 - sm(0.3, 1, t);\n  }\n  // Scales 14 wide in rows 9 apart, each row overlapping the one above,\n  // every scale rising to a rounded lip at its lower edge.\n  const j = floor(y / 9 + 0.5);\n  let best = -1, hh = 0;\n  for (let jj = j + 1; jj >= j - 1; jj--) {\n    const off = jj & 1 ? 7 : 0, i = round((x - off) / 14), cx = i * 14 + off, cy = jj * 9 - 4;\n    const d = hypot(x - cx, (y - cy) * 1.05) / 9;\n    if (d \u003c 1 && y >= cy) {\n      best = jj;\n      hh = 0.2 + 0.8 * sm(0.1, 0.85, d) * (1 - sm(0.9, 1, d));\n      break;\n    }\n  }\n  return best \u003c 0 ? 0 : hh;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, kind: -1, lamp: 0.06, clock: 0, started: false,\n    rel: new Float32Array(N), wipe: new Float32Array(N), hgt: new Float32Array(N),\n    gx: new Float32Array(N), gy: new Float32Array(N), gw: new Float32Array(N), gt: new Uint8Array(N),\n    swipe: null, nextSwipe: 2.2, swipes: 0, press: -1, pal: new Float32Array(16), palHue: NaN,\n  });\n  // A shimmer grain under every LED: its facet leans up to 13 degrees off\n  // the surface, every way, so the glints gather where the surface itself\n  // nearly faces the half vector, along the lit flank of each ridge. Half the\n  // grains are bright enough to glint and one in three of those flips to the\n  // second tint.\n  for (let p = 0; p \u003c N; p++) {\n    const a = random() * 2 * PI, t = 0.23 * sqrt(random());\n    S.gx[p] = t * cos(a);\n    S.gy[p] = t * sin(a);\n    const g = random();\n    S.gw[p] = g \u003c 0.5 ? 0.5 + 0.5 * random() : 0.1 * random();\n    S.gt[p] = random() \u003c 0.33 ? 1 : 0;\n  }\n}\n\nfunction setRelief(S, kind) {\n  S.kind = kind;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) S.rel[y * W + x] = relief(kind, x, y);\n}\n\n// A swipe: a slightly bent stroke 9 to 13 LEDs wide, mostly up or down the\n// panel, entering and leaving near the edges.\nfunction newSwipe() {\n  const down = random() \u003c 0.5, x0 = 8 + random() * 48, x1 = 8 + random() * 48;\n  const y0 = down ? -6 : H + 6, y1 = down ? 30 + random() * 80 : 98 - random() * 80;\n  return {\n    x0, y0, x1, y1, bx: (x0 + x1) / 2 + (random() - 0.5) * 40, by: (y0 + y1) / 2,\n    r: 4.5 + random() * 2, t: 0, last: 0,\n  };\n}\n\nfunction stamp(S, x, y, r) {\n  for (let yy = max(0, floor(y - r - 2)); yy \u003c= min(H - 1, y + r + 2); yy++)\n    for (let xx = max(0, floor(x - r - 2)); xx \u003c= min(W - 1, x + r + 2); xx++) {\n      const d = hypot(xx - x, yy - y), w = 1 - sm(r - 1.5, r + 1.5, d), p = yy * W + xx;\n      if (w > S.wipe[p]) S.wipe[p] = w;\n    }\n}\n\nfunction stepSwipe(S, ds) {\n  const sw = S.swipe;\n  sw.t = min(1, sw.t + ds / 0.7);\n  // Ease in and out: the fingertip lands, drags and lifts.\n  const e = sm(0, 1, sw.t);\n  const n = max(1, Math.ceil((e - sw.last) * 120));\n  for (let i = 1; i \u003c= n; i++) {\n    const u = sw.last + ((e - sw.last) * i) / n, v = 1 - u;\n    stamp(S, v * v * sw.x0 + 2 * u * v * sw.bx + u * u * sw.x1, v * v * sw.y0 + 2 * u * v * sw.by + u * u * sw.y1, sw.r * (0.75 + 0.25 * sin(PI * min(1, u * 1.4))));\n  }\n  sw.last = e;\n  if (sw.t >= 1) S.swipe = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.lamp = cl(k[3], -1, 1);\n  const kind = cl(round(k[2]), 0, 3);\n  if (kind !== S.kind) setRelief(S, kind);\n  if (!S.started) {\n    // Open on a pan that has had one swipe already.\n    S.swipe = newSwipe();\n    S.swipe.x0 = 14;\n    S.swipe.x1 = 50;\n    S.swipe.y0 = -6;\n    S.swipe.y1 = 92;\n    S.swipe.bx = 6;\n    while (S.swipe) stepSwipe(S, 0.05);\n    S.started = true;\n  }\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  if (input.btnPressed && input.btnPressed[0] && S.press \u003c 0) S.press = 0;\n  if (S.press >= 0) {\n    // The pressing edge runs down from the top in 2.4 s, or 4.8 s at Speed\n    // 1 and below, so a tap is never a long wait. Above it every trough is\n    // gone; the last 12 rows over it are part way.\n    S.press += d * max(0.5, S.speed / 2);\n    const y1 = (S.press / 2.4) * (H + 24) - 12;\n    for (let y = 0; y \u003c min(H, y1); y++) {\n      const keep = sm(y1 - 12, y1, y);\n      for (let x = 0; x \u003c W; x++) if (S.wipe[y * W + x] > keep) S.wipe[y * W + x] = keep;\n    }\n    if (y1 > H + 12) S.press = -1;\n  }\n  if (S.swipe) stepSwipe(S, ds);\n  else if (S.clock >= S.nextSwipe) {\n    S.nextSwipe = S.clock + 6.5;\n    S.swipes++;\n    if (S.swipes % 5 === 0 && S.press \u003c 0) S.press = 0;\n    else S.swipe = newSwipe();\n  }\n}\n\nfunction palette(S) {\n  // At Hue 0 a pink pearl. Where the hue comes round to orange, gold and\n  // lime the body is laid paler and brighter and its shaded side leans to\n  // rose, as at half light those hues read brown or olive. Elsewhere the\n  // shaded side is the same hue a little deeper. The sheen is a pale tint a\n  // fourteenth of the wheel on, and the glints come in two tints, the\n  // shade's own and one a tenth on, as pearl pigment flips.\n  const h = S.hue + 0.9, hh = fr(h), hw = hh > 0.9 ? hh - 1 : hh, warm = sm(-0.05, 0.03, hw) * (1 - sm(0.26, 0.38, hw));\n  hsv(h, 0.42 - 0.14 * warm, 0.94 + 0.05 * warm, S.pal, 0);\n  hsv(h - 0.12 * warm, 0.56 - 0.04 * warm, 1, S.pal, 3);\n  hsv(h + 0.07, 0.3, 1, S.pal, 6);\n  hsv(h, 0.22, 1, S.pal, 9);\n  hsv(h + 0.1, 0.3, 1, S.pal, 12);\n  S.pal[15] = warm;\n  S.palHue = S.hue;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.palHue !== S.hue) palette(S);\n  const { rel, wipe, hgt, gx, gy, gw, gt, pal } = S;\n  // The lamp wanders on a slow Lissajous path over the whole panel, 9 LEDs\n  // above it at Lamp -1, 32 at 0.06 and 64 at 1.\n  const t = S.clock, lx = 32 + 24 * sin(t * 0.37 + 1.1), ly = 64 + 44 * sin(t * 0.23 + 0.4);\n  const lh = 32 + (S.lamp >= 0.06 ? ((S.lamp - 0.06) / 0.94) * 32 : ((S.lamp - 0.06) / 1.06) * 23);\n  // Above 0.06 the room light comes up too: a light straight overhead, 2.4\n  // times the lamp at Lamp 1, which lights every flank alike and evens out\n  // the pool.\n  const up = S.lamp > 0.06 ? (S.lamp - 0.06) / 0.94 : 0, over = 2.4 * up, poolLift = 0.4 * up;\n  // The eye sways 1.5 degrees, as a shopper's would, so the glints twinkle\n  // even while the lamp holds still.\n  let ex = 0.026 * sin(t * 2.1), ey = 0.026 * sin(t * 1.7 + 2);\n  const en = 1 / sqrt(ex * ex + ey * ey + 1);\n  ex *= en;\n  ey *= en;\n  const ez = en;\n  // Height in LEDs: crests stand 2 above the grooves. Under a swipe the\n  // emboss is flattened to a trough 0.2 below the grooves, with a low lip of\n  // pushed powder at its edge. Under the pressing edge the emboss is pushed\n  // down to a sixth over a band 20 rows tall and springs back behind it.\n  const py1 = S.press >= 0 ? (S.press / 2.4) * (H + 24) - 12 : -1e9;\n  for (let y = 0; y \u003c H; y++) {\n    const rise = 1 - 0.85 * (1 - sm(0, 10, abs(y - py1 + 4)));\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, w = wipe[p];\n      hgt[p] = 2 * (rel[p] * rise * (1 - w) - 0.11 * w + 0.5 * w * (1 - w));\n    }\n  }\n  const warm = pal[15], amb = 0.22 + 0.36 * warm, COSG = cos((7 * PI) / 180);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, h = hgt[p];\n      const hx = (x \u003c W - 1 ? hgt[p + 1] : h) - (x > 0 ? hgt[p - 1] : h), hy = (y \u003c H - 1 ? hgt[p + W] : h) - (y > 0 ? hgt[p - W] : h);\n      let nx = -hx * 0.5, ny = -hy * 0.5, nz = 1;\n      const nn = 1 / sqrt(nx * nx + ny * ny + 1);\n      nx *= nn;\n      ny *= nn;\n      nz *= nn;\n      let ldx = lx - x, ldy = ly - y, ldz = lh - h;\n      const flat2 = ldx * ldx + ldy * ldy;\n      let li = 1 / sqrt(flat2 + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz = ldz * li + over;\n      li = 1 / sqrt(ldx * ldx + ldy * ldy + ldz * ldz);\n      ldx *= li;\n      ldy *= li;\n      ldz *= li;\n      let hvx = ldx + ex, hvy = ldy + ey, hvz = ldz + ez;\n      const hn = 1 / sqrt(hvx * hvx + hvy * hvy + hvz * hvz);\n      hvx *= hn;\n      hvy *= hn;\n      hvz *= hn;\n      // The lamp's pool: full under it, half 40 LEDs out, never under 0.3.\n      const pool = 0.3 + 0.7 / (1 + flat2 / 1600) + poolLift, w = wipe[p];\n      // A slope lights by how much more it faces the lamp than the flat\n      // powder does (Lambert over the flat's own Lambert), so a low lamp\n      // rakes the whole pan, up to 1.7 times the flat on a facing flank and\n      // down to a fifth on the far one, while light from overhead lights\n      // every flank nearly alike. Rose, orange and yellow keep only 55% of\n      // that range, so their dark side never browns.\n      const fl = cl((0.7 * (nx * ldx + ny * ldy + nz * ldz)) / max(ldz, 0.12), 0.14, 1.2);\n      const lit = pool * (fl + (0.75 - fl) * 0.45 * warm);\n      // Satin sheen: broad on the grainy powder and broader still in a\n      // trough, where the finger has pressed it smooth and it glows as one.\n      const nh = max(0, nx * hvx + ny * hvy + nz * hvz), sheen = pow(nh, 12 - 6 * w) * (0.55 + 0.08 * w) * pool;\n      // A grain glints when its facet is within 7 degrees of the half vector.\n      const mx = nx + gx[p], my = ny + gy[p], mz = nz, md = (mx * hvx + my * hvy + mz * hvz) / sqrt(mx * mx + my * my + mz * mz);\n      let gl = 0;\n      if (md > COSG) {\n        const q = (md - COSG) / (1 - COSG);\n        gl = gw[p] * q * q * (1 - w) * (1 - w) * (0.5 + 0.7 * pool) * 1.6;\n      }\n      const body = (amb + (1 - amb) * lit) * (0.94 + 0.12 * gw[p]), o = gt[p] ? 12 : 9;\n      // Lit faces take the body colour, shaded ones the shade colour, and a\n      // trough leans a third of the way to the shade colour.\n      const u = cl(lit, 0, 1) * (1 - 0.35 * w), v = 1 - u;\n      let r = (pal[0] * u + pal[3] * v) * body + pal[6] * sheen + pal[o] * gl;\n      let g = (pal[1] * u + pal[4] * v) * body + pal[7] * sheen + pal[o + 1] * gl;\n      let b = (pal[2] * u + pal[5] * v) * body + pal[8] * sheen + pal[o + 2] * gl;\n      // Past full brightness the colour is scaled down whole rather than\n      // clipped channel by channel, so a glint stays a tint and not white.\n      const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (m > 1) (r /= m), (g /= m), (b /= m);\n      display.setPixel(x, y, 255 * r, 255 * g, 255 * b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Relief=0..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The shade of the powder, once round the wheel, with a sheen a little warmer than the body and glints nearly white with a trace of it. At 0 pink pearl, at 0.1 rose, at 0.2 rose gold, at 0.3 champagne, at 0.45 mint, at 0.6 aqua, at 0.8 lavender. From rose to lime the body is laid paler and its shaded side leans to rose, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lamp wanders over the whole panel at up to 13 LEDs a second, a fingertip swipes every 6.5 s and takes 0.7 s over its stroke, and after every fourth swipe the pan is pressed again. At 0.2 all of it ten times slower, at 3 half as fast again."},{"name":"Relief","min":0,"max":3,"about":"The emboss, one at a time: ripples 9 LEDs apart round the middle at 0, quilted diamonds 16 wide and 24 tall at 1, chevrons stacked every 10 rows at 2, overlapping scales 14 wide at 3."},{"name":"Lamp","min":-1,"max":1,"about":"How the powder is lit. At -1 the lamp hangs 9 LEDs over it and rakes the whole pan: flanks facing it catch 1.7 times the light of the flat and the far flanks drop to a fifth of it. At 0.06 it hangs 32 LEDs up. Turned on to 1 it rises to 64 and a room light overhead comes up to 2.4 times its strength, so the whole pan glows evenly, the bands go soft and the troughs nearly vanish into the satin."}],"start":[0,2,0,0.06],"measures":{"motion":0.0374,"detail":0.0733,"edges":0.2266,"complexity":2.4899,"coverage":1,"colour":0.1712,"drift":0.1081},"knobResponse":[0.3063,0.0963,0.1554,0.2659]},{"slug":"emergence","title":"Emergence","family":"mammal","round":24,"note":"해 질 녘 메마른 언덕의 동굴 입구에서 박쥐 떼가 검은 리본처럼 쏟아져 나와, 노을 하늘을 비틀며 패널 꼭대기까지 기둥으로 올라가요. 기둥은 두 가닥으로 갈라졌다 다시 붙고, 매가 내리꽂히면 박쥐들이 고리처럼 물러났다가 구멍이 닫혀요. K1 을 끝까지 돌리면 밤이 되어 박쥐가 보름달 앞을 지나가요.","idea":"At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.","buttons":"K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Emergence\n// Family:  mammal\n// Idea:    At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the summer evening emergence of Mexican free-tailed bats (Tadarida brasiliensis) from the caves of the Texas Hill Country\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes.\n// Knob 2: Speed. The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Bats. How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave.\n// Knob 4: Wind. A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right.\n// Buttons: K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The cave mouth: its middle column, floor row, half width and height.\nconst [CX, CB, CW, CH] = [27, 121, 9, 9.5];\n// The row where the bats come out, the most bats the knob asks for, the\n// spine's length in rows, and a bat's climb at Speed 2 in LEDs a second.\nconst [CY, MAXB, HM, V0] = [115, 1400, 118, 28];\n// The column's front at the start, and the length of one trip.\nconst [F0, LT] = [90, 150];\n\n// The sky from the top (0) to the horizon (1): afterglow, late dusk, night.\nconst SKIES = [\n  [[0, 30, 26, 98], [0.2, 66, 46, 138], [0.42, 160, 70, 134], [0.62, 236, 104, 100], [0.8, 255, 146, 72], [1, 255, 196, 112]],\n  [[0, 12, 14, 62], [0.3, 30, 30, 100], [0.6, 94, 52, 116], [0.84, 190, 84, 78], [1, 228, 126, 66]],\n  [[0, 5, 9, 32], [0.45, 10, 18, 56], [0.8, 22, 30, 74], [1, 44, 42, 84]],\n];\n// Rock, far hills, scrub and the lit undersides of the clouds at each hour.\nconst LAND = [\n  [92, 64, 54, 116, 72, 96, 34, 36, 24, 255, 178, 150],\n  [56, 40, 46, 64, 44, 80, 24, 26, 22, 140, 66, 96],\n  [28, 28, 40, 30, 30, 60, 14, 18, 22, 18, 20, 38],\n];\n// A bat against the light, and the hawk.\nconst BAT = [14, 10, 12];\n\nfunction ramp(S, g, c) {\n  let j = 0;\n  while (j \u003c S.length - 2 && g > S[j + 1][0]) j++;\n  const a = S[j], b = S[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, bg: F(N * 3), f: F(N * 3), D: F(N), key: -1, co: 0, hk: null, ring: null, nh: 3.4,\n    S: F(MAXB), V: F(MAXB), A: F(MAXB), B: F(MAXB), TU: F(MAXB), RH: F(MAXB), DR: F(MAXB), JF: F(MAXB), JP: F(MAXB),\n    FR: F(MAXB), FP: F(MAXB), OX: F(MAXB), OY: F(MAXB), VX: F(MAXB), VY: F(MAXB), BX: F(MAXB), BY: F(MAXB), Z: F(MAXB),\n    SX: F(HM), SR: F(HM), SP: F(HM), SS: F(HM), RID: F(W), FAR: F(W), CT: F(128 * 72),\n  });\n  // The near hill climbs over the cave; a flat mesa stands far off on the right.\n  for (let x = 0; x \u003c W; x++) {\n    P.RID[x] = 99 + 0.07 * x - 10 * exp(-(((x - 23) / 15) ** 2)) + 2 * vn(x * 0.13, 3) + 1.2 * vn(x * 0.4, 9) - 1.6;\n    P.FAR[x] = 90 + 2.5 * vn(x * 0.09, 1) + 1.5 * vn(x * 0.3, 2) - 7 * sm(38, 43, x) * (1 - sm(57, 61, x)) - 2 * exp(-(((x - 8) / 9) ** 2));\n  }\n  // Scrub: juniper and mesquite clumps on the slope and along the skyline.\n  P.bush = [];\n  for (let n = 0; n \u003c 34; n++) {\n    const x = rnd() * W, top = n \u003c 10, r = top ? 1 + rnd() * 1.2 : 0.8 + rnd() * 1.3;\n    const y = top ? P.RID[floor(x)] - r * 0.4 : P.RID[floor(x)] + 2 + rnd() * (H - P.RID[floor(x)] - 2);\n    if (((x - CX) / (CW + 3)) ** 2 + ((CB - y) / (CH + 3)) ** 2 > 1 || y > CB + 2) P.bush.push([x, y, r]);\n  }\n  P.stars = Array.from({ length: 80 }, () => [floor(rnd() * W), floor(rnd() * 86), 0.4 + rnd() * 0.6, rnd() * 7, 1 + rnd() * 3]);\n  // Thin streaks of high cloud, wrapping every 128 columns.\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const f = (X) => 0.6 * vn(X * 0.035, y * 0.3) + 0.4 * vn(X * 0.11, y * 0.5 + 7);\n      const band = sm(0, 10, y) * (1 - sm(56, 72, y)) * (0.5 + 0.5 * sin(y * 0.21 + 1));\n      P.CT[y * 128 + x] = sm(0.5, 0.75, mix(f(x), f(x + 128), x / 128)) * band;\n    }\n}\n\n// Where a bat turns off the column, how wide it swings and which way.\nfunction route(P, i) {\n  const top = rnd() \u003c 0.16;\n  P.TU[i] = top ? 98 + 14 * rnd() : P.tu + 13 * rnd();\n  P.RH[i] = top ? 30 : 15 + 7 * rnd();\n  P.DR[i] = rnd() \u003c cl(0.72 + 0.6 * P.w, 0.04, 0.96) ? 1 : -1;\n}\n\nfunction place(P, M) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    const a = rnd() * 2 - 1;\n    P.A[i] = (a \u003c 0 ? -1 : 1) * abs(a) ** 0.8;\n    P.B[i] = (rnd() - 0.5) * 1.2;\n    P.V[i] = V0 * (0.8 + 0.4 * rnd());\n    P.JF[i] = 1.4 + rnd() * 2.4;\n    P.JP[i] = rnd() * 7;\n    P.FR[i] = 4 + rnd() * 2.6;\n    P.FP[i] = rnd();\n    route(P, i);\n    P.S[i] = i \u003c M ? F0 - rnd() * LT : -1 - rnd() * LT;\n  }\n  P.init = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), M = round(cl(k[2], 400, 1400));\n  P.k1 = cl(k[0], 0, 1);\n  P.w = cl(k[3], -1, 1);\n  const T = (P.t += d);\n  // The height where the stream peels off wanders slowly.\n  P.tu = 80 + 8 * sin(T * 0.23 + 1);\n  if (!P.init) place(P, M);\n  const w = P.w, { SX, SR, SP, SS } = P;\n  P.co += d * (1.2 + 4 * w);\n\n  // The spine of the column: it leans downwind, corkscrews and breathes, and\n  // now and then tears in two along its middle and closes again higher up.\n  const Rk = 5 + (5 * (M - 400)) / 1000, ph = (T - 2.4) % 12, split = T \u003c 2.4 ? 0 : sm(0, 1.4, ph) * (1 - sm(4.6, 6.2, ph));\n  for (let h = 0; h \u003c HM; h++) {\n    const A = 1 + 7.5 * sm(4, 92, h);\n    SX[h] = CX + w * (0.17 * h + 0.0009 * h * h) + A * (sin(0.052 * h - 1.3 * T) + 0.4 * sin(0.12 * h + 0.75 * T + 2));\n    SR[h] = Rk * (1.25 - 0.55 * sm(0, 26, h) + 0.3 * sm(20, 50, h)) * (1 + 0.005 * h) * (1 + 0.3 * sin(0.075 * h - 2.1 * T));\n    SP[h] = 0.055 * h - 1.7 * T;\n    SS[h] = h > 18 && h \u003c 96 ? split * 9 * sin((PI * (h - 18)) / 78) : 0;\n  }\n\n  // The hawk: a stoop through the column on a curve, out the other side.\n  if (input.btnPressed && input.btnPressed[0] && !P.hk) P.nh = 0;\n  if (!P.hk && (P.nh -= d) \u003c= 0) {\n    const s = rnd() \u003c 0.5 ? 1 : -1, ht = floor(46 + rnd() * 26), tx = SX[ht], ty = CY - ht, x0 = 32 + s * 46, y0 = -12, x2 = 32 - s * 52, y2 = ty - 34;\n    P.hk = { t: 0, x0, y0, x2, y2, cx: 2 * tx - (x0 + x2) / 2, cy: 2 * ty - (y0 + y2) / 2, hit: false };\n  }\n  const hk = P.hk;\n  if (hk) {\n    const u = (hk.t += d) / 2.3, v = 1 - u;\n    if (u >= 1) (P.hk = null), (P.nh = 12 + rnd() * 6);\n    else {\n      hk.x = v * v * hk.x0 + 2 * u * v * hk.cx + u * u * hk.x2;\n      hk.y = v * v * hk.y0 + 2 * u * v * hk.cy + u * u * hk.y2;\n      const dx = v * (hk.cx - hk.x0) + u * (hk.x2 - hk.cx), dy = v * (hk.cy - hk.y0) + u * (hk.y2 - hk.cy), l = hyp(dx, dy) || 1;\n      (hk.ux = dx / l), (hk.uy = dy / l), (hk.u = u);\n      if (!hk.hit && u >= 0.5) (hk.hit = true), (P.ring = { x: hk.x, y: hk.y, t: 0 });\n    }\n  }\n  const rg = P.ring;\n  if (rg && (rg.t += d) > 1.4) P.ring = null;\n  const hx = P.hk ? P.hk.x : -999, hy = P.hk ? P.hk.y : -999, rr = rg ? 4 + 26 * rg.t : 0, ra = rg ? 1 - rg.t / 1.4 : 0;\n\n  const { S, V, A, B, TU, RH, DR, JF, JP, OX, OY, VX, VY, BX, BY, Z } = P;\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (S[i] \u003c 0 && i >= M) continue;\n    // Fast out of the mouth, then the steady climb.\n    const s = (S[i] += V[i] * d * (S[i] \u003c 40 ? 1.6 - 0.015 * S[i] : 1));\n    if (s \u003c 0) continue;\n    const hh = min(s, TU[i]), j = min(HM - 2, floor(hh)), f = hh - j;\n    const r = mix(SR[j], SR[j + 1], f), p = mix(SP[j], SP[j + 1], f), ca = cos(p), sa = sin(p), a = A[i], b = B[i] * (1.9 - 0.9 * sm(0, 30, hh));\n    let x = mix(SX[j], SX[j + 1], f) + r * (a * ca - b * sa) + (a \u003c 0 ? -1 : 1) * mix(SS[j], SS[j + 1], f) + 1.1 * sin(T * JF[i] + JP[i]);\n    let y = CY - hh + 0.8 * sin(T * JF[i] * 1.3 + JP[i] * 2);\n    Z[i] = a * sa + b * ca;\n    if (s > TU[i]) {\n      // Off the top of the column in a curve, then straight out sideways.\n      const u = s - TU[i], rho = RH[i], al = min(u / rho, 1.25), st = max(0, u - rho * 1.25);\n      x += DR[i] * (rho * (1 - cos(al)) + st * 0.949);\n      y -= rho * sin(al) + st * 0.315;\n    }\n    // Away from the hawk and the ring it sends out, then back into the stream.\n    let ax = -18 * OX[i] - 6 * VX[i], ay = -18 * OY[i] - 6 * VY[i], dx = x + OX[i] - hx, dy = y + OY[i] - hy, q = dx * dx + dy * dy;\n    if (q \u003c 196) {\n      const e = sqrt(q) + 0.3, g = (1700 * (1 - e / 14) ** 2) / e;\n      (ax += g * dx), (ay += g * dy);\n    }\n    if (rg) {\n      (dx = x + OX[i] - rg.x), (dy = y + OY[i] - rg.y);\n      const e = hyp(dx, dy) + 0.5, wv = e - rr;\n      if (wv * wv \u003c 30) {\n        const g = (480 * ra * exp((-wv * wv) / 6)) / e;\n        (ax += g * dx), (ay += g * dy);\n      }\n    }\n    VX[i] += ax * d;\n    VY[i] += ay * d;\n    OX[i] = cl(OX[i] + VX[i] * d, -16, 16);\n    OY[i] = cl(OY[i] + VY[i] * d, -16, 16);\n    x += OX[i];\n    y += OY[i];\n    if (x \u003c -3 || x > W + 2 || y \u003c -3) {\n      // Out of sight: back to the cave mouth for another trip.\n      S[i] = i \u003c M ? -rnd() * 4 : -1 - rnd() * LT;\n      OX[i] = OY[i] = VX[i] = VY[i] = 0;\n      route(P, i);\n      continue;\n    }\n    BX[i] = x;\n    BY[i] = y;\n  }\n}\n\n// The sky, the moon, the hills and the cave, kept until the hour moves.\nfunction backdrop(P, k) {\n  const B = P.bg, i0 = k \u003c 0.5 ? 0 : 1, f = k \u003c 0.5 ? k * 2 : k * 2 - 1;\n  const L = LAND[i0].map((v, c) => mix(v, LAND[i0 + 1][c], f));\n  const glow = 1 - sm(0.2, 0.9, k), mx = 37, my = 134 - 88 * sm(0.12, 1, k), mr = 8.5, mc = [mix(250, 246, sm(100, 60, my)), mix(184, 240, sm(100, 60, my)), mix(124, 220, sm(100, 60, my))];\n  P.cc = L.slice(9, 12);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / 100, sky = [0, 1, 2].map((c) => mix(ramp(SKIES[i0], g, c), ramp(SKIES[i0 + 1], g, c), f));\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, rid = P.RID[x];\n      let col;\n      if (y \u003c rid) {\n        // Brighter where the sun went down, behind the far mesa.\n        const wg = 1 + 0.2 * glow * exp(-(((x - 50) / 20) ** 2)) * sm(0.3, 1, g);\n        col = sky.map((v) => v * wg);\n        const md = hyp(x + 0.5 - mx, y + 0.5 - my);\n        if (md \u003c mr) {\n          const ma = 0.82 + 0.18 * sm(0.35, 0.65, vn(x * 0.4 + 3, y * 0.4)) - 0.12 * (md / mr) ** 4;\n          col = mc.map((v) => v * ma);\n        } else col = col.map((v, c) => v + mc[c] * sm(0.25, 0.8, k) * (0.22 * exp(-(md - mr) / 4) + 0.1 * exp(-(md - mr) / 14)));\n        if (y >= P.FAR[x]) {\n          const fv = 0.86 + 0.14 * vn(x * 0.3, y * 0.3);\n          col = col.map((v, c) => mix(v, L[3 + c] * fv, 0.8));\n        }\n      } else {\n        // Limestone with darker strata, catching light along the skyline.\n        const n = vn(x * 0.22, y * 0.45), n2 = vn(x * 0.07 + 5, y * 0.16);\n        let v = (0.6 + 0.4 * n + 0.25 * sm(0.55, 0.7, n2)) * (1 + 0.3 * exp(-(y - rid) / 2.5)) * (1 - (0.28 * (y - 92)) / 36);\n        if (((y + 4 * vn(x * 0.05, 7)) % 6) \u003c 1) v *= 0.72;\n        const e = (abs((x + 0.5 - CX) / CW) ** 2.4 + abs((CB - y - 0.5) / CH) ** 2.4) ** (1 / 2.4) * (0.96 + 0.09 * vn(x * 0.7, y * 0.7));\n        // The pale outcrop the cave opens in, cracked, with a ledge on top.\n        const ot = CB - CH - 6 + 2.5 * vn(x * 0.2, 4), ow = 16 + 4 * vn(y * 0.2, 6) - 6 * sm(CB - 3, CB - CH - 6, y);\n        if (y >= ot && y \u003c CB + 1 && abs(x + 0.5 - CX) \u003c ow) {\n          v = (1.05 + 0.3 * n) * (y \u003c ot + 1 ? 1.3 : 1) * (vn(x * 0.9, y * 0.1) \u003c 0.28 ? 0.66 : 1) * (1 - 0.25 * sm(ow - 3, ow, abs(x + 0.5 - CX)));\n          if (e \u003c 1.35) v *= 0.75 + 0.25 * sm(1, 1.35, e);\n        }\n        if (y \u003c CB && e \u003c 1) {\n          // The mouth, black inside and a little lit at the lip.\n          const lip = sm(0.75, 1, e);\n          col = [3 + 12 * lip, 2 + 8 * lip, 3 + 8 * lip];\n        } else {\n          if (y >= CB) v *= (1.1 + 0.25 * hash(x, y)) * (1 - 0.45 * exp(-(((x - CX) / CW) ** 2)) * sm(CB + 5, CB, y));\n          col = L.slice(0, 3).map((c) => c * v);\n        }\n      }\n      (B[o] = col[0]), (B[o + 1] = col[1]), (B[o + 2] = col[2]);\n    }\n  }\n  for (const [bx, by, br] of P.bush)\n    for (let y = floor(by - br); y \u003c= by + br; y++)\n      for (let x = floor(bx - br); x \u003c= bx + br; x++) {\n        const e = hyp(x + 0.5 - bx, (y + 0.5 - by) * 1.2) / br;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || e > 1) continue;\n        const o = (y * W + x) * 3, v = (0.8 + 0.4 * hash(x, y + 50)) * (y + 0.5 \u003c by - br * 0.3 ? 1.45 : 1);\n        for (let c = 0; c \u003c 3; c++) B[o + c] = L[6 + c] * v;\n      }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const k = P.k1, key = round(k * 400);\n  if (key !== P.key) backdrop(P, k), (P.key = key);\n  const F = P.f, D = P.D, T = P.t;\n  F.set(P.bg);\n  // Stars come out as the glow goes, behind the cloud streaks.\n  const sk = sm(0.4, 0.95, k);\n  if (sk > 0)\n    for (const [x, y, b, ph, fq] of P.stars) {\n      if (y >= P.FAR[x] - 1) continue;\n      const o = (y * W + x) * 3, v = sk * b * (0.75 + 0.25 * sin(T * fq + ph));\n      (F[o] += 190 * v), (F[o + 1] += 190 * v), (F[o + 2] += 210 * v);\n    }\n  // High cloud drifts with the wind, lit from below by the sun that has set.\n  const cc = P.cc, sh = floor(P.co);\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = P.CT[y * 128 + ((x - sh) & 127)];\n      if (a \u003c 0.02 || y >= P.FAR[x]) continue;\n      const o = (y * W + x) * 3, g = 0.55 + y / 110, al = 0.55 * a;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], cc[c] * g, al);\n    }\n\n  // Bats and the hawk as darkness laid over the light.\n  D.fill(0);\n  const put = (x, y, a) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) D[y * W + x] += a;\n  };\n  const M = P.S.length;\n  for (let i = 0; i \u003c M; i++) {\n    if (P.S[i] \u003c 0) continue;\n    const x = round(P.BX[i]), y = round(P.BY[i]), near = P.Z[i] > -0.3, q = floor(((T * P.FR[i] + P.FP[i]) % 1) * 3) - 1;\n    if (near) put(x, y, 0.95), put(x - 1, y + q, 0.8), put(x + 1, y + q, 0.8);\n    else put(x, y, 0.6), put(x + (q ? 1 : -1), y + q, 0.35);\n  }\n  const hk = P.hk;\n  if (hk && hk.x !== undefined) {\n    const { x, y, ux, uy, u } = hk, nx = -uy, ny = ux;\n    const seg = (x0, y0, x1, y1, r) => {\n      const n = 2 * hyp(x1 - x0, y1 - y0) + 1;\n      for (let s = 0; s \u003c= n; s++) {\n        const px = mix(x0, x1, s / n), py = mix(y0, y1, s / n);\n        for (let yy = floor(py - r); yy \u003c= py + r; yy++) for (let xx = floor(px - r); xx \u003c= px + r; xx++) if (hyp(xx + 0.5 - px, yy + 0.5 - py) \u003c= r + 0.25) put(xx, yy, 0.6);\n      }\n    };\n    seg(x + 2.2 * ux, y + 2.2 * uy, x - 3 * ux, y - 3 * uy, 1);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux + 0.9 * nx, y - 4.6 * uy + 0.9 * ny, 0.6);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux - 0.9 * nx, y - 4.6 * uy - 0.9 * ny, 0.6);\n    if (u > 0.14 && u \u003c 0.5) {\n      // Wings folded back in the stoop.\n      for (const sg of [1, -1]) seg(x + 0.8 * ux + sg * nx, y + 0.8 * uy + sg * ny, x - 4 * ux + sg * 2.4 * nx, y - 4 * uy + sg * 2.4 * ny, 0.6);\n    } else {\n      // Spread and beating as it climbs away.\n      const fl = 1.6 * sin(hk.t * 15);\n      for (const sg of [1, -1]) {\n        const wx = x + sg * 3.2 * nx + 1.1 * ux, wy = y + sg * 3.2 * ny + 1.1 * uy;\n        seg(x + 0.5 * ux, y + 0.5 * uy, wx, wy, 0.9);\n        seg(wx, wy, x + sg * 6.2 * nx - (0.6 + fl) * ux, y + sg * 6.2 * ny - (0.6 + fl) * uy, 0.55);\n      }\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = min(1, D[i]), b = 1 - a;\n    display.setPixel(i & 63, i >> 6, min(255, F[o] * b + BAT[0] * a) | 0, min(255, F[o + 1] * b + BAT[1] * a) | 0, min(255, F[o + 2] * b + BAT[2] * a) | 0);\n  }\n}\n","layer":{"id":"layer-emergence","type":"code","name":"emergence","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Emergence\n// Family:  mammal\n// Idea:    At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the summer evening emergence of Mexican free-tailed bats (Tadarida brasiliensis) from the caves of the Texas Hill Country\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes.\n// Knob 2: Speed. The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Bats. How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave.\n// Knob 4: Wind. A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right.\n// Buttons: K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The cave mouth: its middle column, floor row, half width and height.\nconst [CX, CB, CW, CH] = [27, 121, 9, 9.5];\n// The row where the bats come out, the most bats the knob asks for, the\n// spine's length in rows, and a bat's climb at Speed 2 in LEDs a second.\nconst [CY, MAXB, HM, V0] = [115, 1400, 118, 28];\n// The column's front at the start, and the length of one trip.\nconst [F0, LT] = [90, 150];\n\n// The sky from the top (0) to the horizon (1): afterglow, late dusk, night.\nconst SKIES = [\n  [[0, 30, 26, 98], [0.2, 66, 46, 138], [0.42, 160, 70, 134], [0.62, 236, 104, 100], [0.8, 255, 146, 72], [1, 255, 196, 112]],\n  [[0, 12, 14, 62], [0.3, 30, 30, 100], [0.6, 94, 52, 116], [0.84, 190, 84, 78], [1, 228, 126, 66]],\n  [[0, 5, 9, 32], [0.45, 10, 18, 56], [0.8, 22, 30, 74], [1, 44, 42, 84]],\n];\n// Rock, far hills, scrub and the lit undersides of the clouds at each hour.\nconst LAND = [\n  [92, 64, 54, 116, 72, 96, 34, 36, 24, 255, 178, 150],\n  [56, 40, 46, 64, 44, 80, 24, 26, 22, 140, 66, 96],\n  [28, 28, 40, 30, 30, 60, 14, 18, 22, 18, 20, 38],\n];\n// A bat against the light, and the hawk.\nconst BAT = [14, 10, 12];\n\nfunction ramp(S, g, c) {\n  let j = 0;\n  while (j \u003c S.length - 2 && g > S[j + 1][0]) j++;\n  const a = S[j], b = S[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, bg: F(N * 3), f: F(N * 3), D: F(N), key: -1, co: 0, hk: null, ring: null, nh: 3.4,\n    S: F(MAXB), V: F(MAXB), A: F(MAXB), B: F(MAXB), TU: F(MAXB), RH: F(MAXB), DR: F(MAXB), JF: F(MAXB), JP: F(MAXB),\n    FR: F(MAXB), FP: F(MAXB), OX: F(MAXB), OY: F(MAXB), VX: F(MAXB), VY: F(MAXB), BX: F(MAXB), BY: F(MAXB), Z: F(MAXB),\n    SX: F(HM), SR: F(HM), SP: F(HM), SS: F(HM), RID: F(W), FAR: F(W), CT: F(128 * 72),\n  });\n  // The near hill climbs over the cave; a flat mesa stands far off on the right.\n  for (let x = 0; x \u003c W; x++) {\n    P.RID[x] = 99 + 0.07 * x - 10 * exp(-(((x - 23) / 15) ** 2)) + 2 * vn(x * 0.13, 3) + 1.2 * vn(x * 0.4, 9) - 1.6;\n    P.FAR[x] = 90 + 2.5 * vn(x * 0.09, 1) + 1.5 * vn(x * 0.3, 2) - 7 * sm(38, 43, x) * (1 - sm(57, 61, x)) - 2 * exp(-(((x - 8) / 9) ** 2));\n  }\n  // Scrub: juniper and mesquite clumps on the slope and along the skyline.\n  P.bush = [];\n  for (let n = 0; n \u003c 34; n++) {\n    const x = rnd() * W, top = n \u003c 10, r = top ? 1 + rnd() * 1.2 : 0.8 + rnd() * 1.3;\n    const y = top ? P.RID[floor(x)] - r * 0.4 : P.RID[floor(x)] + 2 + rnd() * (H - P.RID[floor(x)] - 2);\n    if (((x - CX) / (CW + 3)) ** 2 + ((CB - y) / (CH + 3)) ** 2 > 1 || y > CB + 2) P.bush.push([x, y, r]);\n  }\n  P.stars = Array.from({ length: 80 }, () => [floor(rnd() * W), floor(rnd() * 86), 0.4 + rnd() * 0.6, rnd() * 7, 1 + rnd() * 3]);\n  // Thin streaks of high cloud, wrapping every 128 columns.\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const f = (X) => 0.6 * vn(X * 0.035, y * 0.3) + 0.4 * vn(X * 0.11, y * 0.5 + 7);\n      const band = sm(0, 10, y) * (1 - sm(56, 72, y)) * (0.5 + 0.5 * sin(y * 0.21 + 1));\n      P.CT[y * 128 + x] = sm(0.5, 0.75, mix(f(x), f(x + 128), x / 128)) * band;\n    }\n}\n\n// Where a bat turns off the column, how wide it swings and which way.\nfunction route(P, i) {\n  const top = rnd() \u003c 0.16;\n  P.TU[i] = top ? 98 + 14 * rnd() : P.tu + 13 * rnd();\n  P.RH[i] = top ? 30 : 15 + 7 * rnd();\n  P.DR[i] = rnd() \u003c cl(0.72 + 0.6 * P.w, 0.04, 0.96) ? 1 : -1;\n}\n\nfunction place(P, M) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    const a = rnd() * 2 - 1;\n    P.A[i] = (a \u003c 0 ? -1 : 1) * abs(a) ** 0.8;\n    P.B[i] = (rnd() - 0.5) * 1.2;\n    P.V[i] = V0 * (0.8 + 0.4 * rnd());\n    P.JF[i] = 1.4 + rnd() * 2.4;\n    P.JP[i] = rnd() * 7;\n    P.FR[i] = 4 + rnd() * 2.6;\n    P.FP[i] = rnd();\n    route(P, i);\n    P.S[i] = i \u003c M ? F0 - rnd() * LT : -1 - rnd() * LT;\n  }\n  P.init = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), M = round(cl(k[2], 400, 1400));\n  P.k1 = cl(k[0], 0, 1);\n  P.w = cl(k[3], -1, 1);\n  const T = (P.t += d);\n  // The height where the stream peels off wanders slowly.\n  P.tu = 80 + 8 * sin(T * 0.23 + 1);\n  if (!P.init) place(P, M);\n  const w = P.w, { SX, SR, SP, SS } = P;\n  P.co += d * (1.2 + 4 * w);\n\n  // The spine of the column: it leans downwind, corkscrews and breathes, and\n  // now and then tears in two along its middle and closes again higher up.\n  const Rk = 5 + (5 * (M - 400)) / 1000, ph = (T - 2.4) % 12, split = T \u003c 2.4 ? 0 : sm(0, 1.4, ph) * (1 - sm(4.6, 6.2, ph));\n  for (let h = 0; h \u003c HM; h++) {\n    const A = 1 + 7.5 * sm(4, 92, h);\n    SX[h] = CX + w * (0.17 * h + 0.0009 * h * h) + A * (sin(0.052 * h - 1.3 * T) + 0.4 * sin(0.12 * h + 0.75 * T + 2));\n    SR[h] = Rk * (1.25 - 0.55 * sm(0, 26, h) + 0.3 * sm(20, 50, h)) * (1 + 0.005 * h) * (1 + 0.3 * sin(0.075 * h - 2.1 * T));\n    SP[h] = 0.055 * h - 1.7 * T;\n    SS[h] = h > 18 && h \u003c 96 ? split * 9 * sin((PI * (h - 18)) / 78) : 0;\n  }\n\n  // The hawk: a stoop through the column on a curve, out the other side.\n  if (input.btnPressed && input.btnPressed[0] && !P.hk) P.nh = 0;\n  if (!P.hk && (P.nh -= d) \u003c= 0) {\n    const s = rnd() \u003c 0.5 ? 1 : -1, ht = floor(46 + rnd() * 26), tx = SX[ht], ty = CY - ht, x0 = 32 + s * 46, y0 = -12, x2 = 32 - s * 52, y2 = ty - 34;\n    P.hk = { t: 0, x0, y0, x2, y2, cx: 2 * tx - (x0 + x2) / 2, cy: 2 * ty - (y0 + y2) / 2, hit: false };\n  }\n  const hk = P.hk;\n  if (hk) {\n    const u = (hk.t += d) / 2.3, v = 1 - u;\n    if (u >= 1) (P.hk = null), (P.nh = 12 + rnd() * 6);\n    else {\n      hk.x = v * v * hk.x0 + 2 * u * v * hk.cx + u * u * hk.x2;\n      hk.y = v * v * hk.y0 + 2 * u * v * hk.cy + u * u * hk.y2;\n      const dx = v * (hk.cx - hk.x0) + u * (hk.x2 - hk.cx), dy = v * (hk.cy - hk.y0) + u * (hk.y2 - hk.cy), l = hyp(dx, dy) || 1;\n      (hk.ux = dx / l), (hk.uy = dy / l), (hk.u = u);\n      if (!hk.hit && u >= 0.5) (hk.hit = true), (P.ring = { x: hk.x, y: hk.y, t: 0 });\n    }\n  }\n  const rg = P.ring;\n  if (rg && (rg.t += d) > 1.4) P.ring = null;\n  const hx = P.hk ? P.hk.x : -999, hy = P.hk ? P.hk.y : -999, rr = rg ? 4 + 26 * rg.t : 0, ra = rg ? 1 - rg.t / 1.4 : 0;\n\n  const { S, V, A, B, TU, RH, DR, JF, JP, OX, OY, VX, VY, BX, BY, Z } = P;\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (S[i] \u003c 0 && i >= M) continue;\n    // Fast out of the mouth, then the steady climb.\n    const s = (S[i] += V[i] * d * (S[i] \u003c 40 ? 1.6 - 0.015 * S[i] : 1));\n    if (s \u003c 0) continue;\n    const hh = min(s, TU[i]), j = min(HM - 2, floor(hh)), f = hh - j;\n    const r = mix(SR[j], SR[j + 1], f), p = mix(SP[j], SP[j + 1], f), ca = cos(p), sa = sin(p), a = A[i], b = B[i] * (1.9 - 0.9 * sm(0, 30, hh));\n    let x = mix(SX[j], SX[j + 1], f) + r * (a * ca - b * sa) + (a \u003c 0 ? -1 : 1) * mix(SS[j], SS[j + 1], f) + 1.1 * sin(T * JF[i] + JP[i]);\n    let y = CY - hh + 0.8 * sin(T * JF[i] * 1.3 + JP[i] * 2);\n    Z[i] = a * sa + b * ca;\n    if (s > TU[i]) {\n      // Off the top of the column in a curve, then straight out sideways.\n      const u = s - TU[i], rho = RH[i], al = min(u / rho, 1.25), st = max(0, u - rho * 1.25);\n      x += DR[i] * (rho * (1 - cos(al)) + st * 0.949);\n      y -= rho * sin(al) + st * 0.315;\n    }\n    // Away from the hawk and the ring it sends out, then back into the stream.\n    let ax = -18 * OX[i] - 6 * VX[i], ay = -18 * OY[i] - 6 * VY[i], dx = x + OX[i] - hx, dy = y + OY[i] - hy, q = dx * dx + dy * dy;\n    if (q \u003c 196) {\n      const e = sqrt(q) + 0.3, g = (1700 * (1 - e / 14) ** 2) / e;\n      (ax += g * dx), (ay += g * dy);\n    }\n    if (rg) {\n      (dx = x + OX[i] - rg.x), (dy = y + OY[i] - rg.y);\n      const e = hyp(dx, dy) + 0.5, wv = e - rr;\n      if (wv * wv \u003c 30) {\n        const g = (480 * ra * exp((-wv * wv) / 6)) / e;\n        (ax += g * dx), (ay += g * dy);\n      }\n    }\n    VX[i] += ax * d;\n    VY[i] += ay * d;\n    OX[i] = cl(OX[i] + VX[i] * d, -16, 16);\n    OY[i] = cl(OY[i] + VY[i] * d, -16, 16);\n    x += OX[i];\n    y += OY[i];\n    if (x \u003c -3 || x > W + 2 || y \u003c -3) {\n      // Out of sight: back to the cave mouth for another trip.\n      S[i] = i \u003c M ? -rnd() * 4 : -1 - rnd() * LT;\n      OX[i] = OY[i] = VX[i] = VY[i] = 0;\n      route(P, i);\n      continue;\n    }\n    BX[i] = x;\n    BY[i] = y;\n  }\n}\n\n// The sky, the moon, the hills and the cave, kept until the hour moves.\nfunction backdrop(P, k) {\n  const B = P.bg, i0 = k \u003c 0.5 ? 0 : 1, f = k \u003c 0.5 ? k * 2 : k * 2 - 1;\n  const L = LAND[i0].map((v, c) => mix(v, LAND[i0 + 1][c], f));\n  const glow = 1 - sm(0.2, 0.9, k), mx = 37, my = 134 - 88 * sm(0.12, 1, k), mr = 8.5, mc = [mix(250, 246, sm(100, 60, my)), mix(184, 240, sm(100, 60, my)), mix(124, 220, sm(100, 60, my))];\n  P.cc = L.slice(9, 12);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / 100, sky = [0, 1, 2].map((c) => mix(ramp(SKIES[i0], g, c), ramp(SKIES[i0 + 1], g, c), f));\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, rid = P.RID[x];\n      let col;\n      if (y \u003c rid) {\n        // Brighter where the sun went down, behind the far mesa.\n        const wg = 1 + 0.2 * glow * exp(-(((x - 50) / 20) ** 2)) * sm(0.3, 1, g);\n        col = sky.map((v) => v * wg);\n        const md = hyp(x + 0.5 - mx, y + 0.5 - my);\n        if (md \u003c mr) {\n          const ma = 0.82 + 0.18 * sm(0.35, 0.65, vn(x * 0.4 + 3, y * 0.4)) - 0.12 * (md / mr) ** 4;\n          col = mc.map((v) => v * ma);\n        } else col = col.map((v, c) => v + mc[c] * sm(0.25, 0.8, k) * (0.22 * exp(-(md - mr) / 4) + 0.1 * exp(-(md - mr) / 14)));\n        if (y >= P.FAR[x]) {\n          const fv = 0.86 + 0.14 * vn(x * 0.3, y * 0.3);\n          col = col.map((v, c) => mix(v, L[3 + c] * fv, 0.8));\n        }\n      } else {\n        // Limestone with darker strata, catching light along the skyline.\n        const n = vn(x * 0.22, y * 0.45), n2 = vn(x * 0.07 + 5, y * 0.16);\n        let v = (0.6 + 0.4 * n + 0.25 * sm(0.55, 0.7, n2)) * (1 + 0.3 * exp(-(y - rid) / 2.5)) * (1 - (0.28 * (y - 92)) / 36);\n        if (((y + 4 * vn(x * 0.05, 7)) % 6) \u003c 1) v *= 0.72;\n        const e = (abs((x + 0.5 - CX) / CW) ** 2.4 + abs((CB - y - 0.5) / CH) ** 2.4) ** (1 / 2.4) * (0.96 + 0.09 * vn(x * 0.7, y * 0.7));\n        // The pale outcrop the cave opens in, cracked, with a ledge on top.\n        const ot = CB - CH - 6 + 2.5 * vn(x * 0.2, 4), ow = 16 + 4 * vn(y * 0.2, 6) - 6 * sm(CB - 3, CB - CH - 6, y);\n        if (y >= ot && y \u003c CB + 1 && abs(x + 0.5 - CX) \u003c ow) {\n          v = (1.05 + 0.3 * n) * (y \u003c ot + 1 ? 1.3 : 1) * (vn(x * 0.9, y * 0.1) \u003c 0.28 ? 0.66 : 1) * (1 - 0.25 * sm(ow - 3, ow, abs(x + 0.5 - CX)));\n          if (e \u003c 1.35) v *= 0.75 + 0.25 * sm(1, 1.35, e);\n        }\n        if (y \u003c CB && e \u003c 1) {\n          // The mouth, black inside and a little lit at the lip.\n          const lip = sm(0.75, 1, e);\n          col = [3 + 12 * lip, 2 + 8 * lip, 3 + 8 * lip];\n        } else {\n          if (y >= CB) v *= (1.1 + 0.25 * hash(x, y)) * (1 - 0.45 * exp(-(((x - CX) / CW) ** 2)) * sm(CB + 5, CB, y));\n          col = L.slice(0, 3).map((c) => c * v);\n        }\n      }\n      (B[o] = col[0]), (B[o + 1] = col[1]), (B[o + 2] = col[2]);\n    }\n  }\n  for (const [bx, by, br] of P.bush)\n    for (let y = floor(by - br); y \u003c= by + br; y++)\n      for (let x = floor(bx - br); x \u003c= bx + br; x++) {\n        const e = hyp(x + 0.5 - bx, (y + 0.5 - by) * 1.2) / br;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || e > 1) continue;\n        const o = (y * W + x) * 3, v = (0.8 + 0.4 * hash(x, y + 50)) * (y + 0.5 \u003c by - br * 0.3 ? 1.45 : 1);\n        for (let c = 0; c \u003c 3; c++) B[o + c] = L[6 + c] * v;\n      }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const k = P.k1, key = round(k * 400);\n  if (key !== P.key) backdrop(P, k), (P.key = key);\n  const F = P.f, D = P.D, T = P.t;\n  F.set(P.bg);\n  // Stars come out as the glow goes, behind the cloud streaks.\n  const sk = sm(0.4, 0.95, k);\n  if (sk > 0)\n    for (const [x, y, b, ph, fq] of P.stars) {\n      if (y >= P.FAR[x] - 1) continue;\n      const o = (y * W + x) * 3, v = sk * b * (0.75 + 0.25 * sin(T * fq + ph));\n      (F[o] += 190 * v), (F[o + 1] += 190 * v), (F[o + 2] += 210 * v);\n    }\n  // High cloud drifts with the wind, lit from below by the sun that has set.\n  const cc = P.cc, sh = floor(P.co);\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = P.CT[y * 128 + ((x - sh) & 127)];\n      if (a \u003c 0.02 || y >= P.FAR[x]) continue;\n      const o = (y * W + x) * 3, g = 0.55 + y / 110, al = 0.55 * a;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], cc[c] * g, al);\n    }\n\n  // Bats and the hawk as darkness laid over the light.\n  D.fill(0);\n  const put = (x, y, a) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) D[y * W + x] += a;\n  };\n  const M = P.S.length;\n  for (let i = 0; i \u003c M; i++) {\n    if (P.S[i] \u003c 0) continue;\n    const x = round(P.BX[i]), y = round(P.BY[i]), near = P.Z[i] > -0.3, q = floor(((T * P.FR[i] + P.FP[i]) % 1) * 3) - 1;\n    if (near) put(x, y, 0.95), put(x - 1, y + q, 0.8), put(x + 1, y + q, 0.8);\n    else put(x, y, 0.6), put(x + (q ? 1 : -1), y + q, 0.35);\n  }\n  const hk = P.hk;\n  if (hk && hk.x !== undefined) {\n    const { x, y, ux, uy, u } = hk, nx = -uy, ny = ux;\n    const seg = (x0, y0, x1, y1, r) => {\n      const n = 2 * hyp(x1 - x0, y1 - y0) + 1;\n      for (let s = 0; s \u003c= n; s++) {\n        const px = mix(x0, x1, s / n), py = mix(y0, y1, s / n);\n        for (let yy = floor(py - r); yy \u003c= py + r; yy++) for (let xx = floor(px - r); xx \u003c= px + r; xx++) if (hyp(xx + 0.5 - px, yy + 0.5 - py) \u003c= r + 0.25) put(xx, yy, 0.6);\n      }\n    };\n    seg(x + 2.2 * ux, y + 2.2 * uy, x - 3 * ux, y - 3 * uy, 1);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux + 0.9 * nx, y - 4.6 * uy + 0.9 * ny, 0.6);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux - 0.9 * nx, y - 4.6 * uy - 0.9 * ny, 0.6);\n    if (u > 0.14 && u \u003c 0.5) {\n      // Wings folded back in the stoop.\n      for (const sg of [1, -1]) seg(x + 0.8 * ux + sg * nx, y + 0.8 * uy + sg * ny, x - 4 * ux + sg * 2.4 * nx, y - 4 * uy + sg * 2.4 * ny, 0.6);\n    } else {\n      // Spread and beating as it climbs away.\n      const fl = 1.6 * sin(hk.t * 15);\n      for (const sg of [1, -1]) {\n        const wx = x + sg * 3.2 * nx + 1.1 * ux, wy = y + sg * 3.2 * ny + 1.1 * uy;\n        seg(x + 0.5 * ux, y + 0.5 * uy, wx, wy, 0.9);\n        seg(wx, wy, x + sg * 6.2 * nx - (0.6 + fl) * ux, y + sg * 6.2 * ny - (0.6 + fl) * uy, 0.55);\n      }\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = min(1, D[i]), b = 1 - a;\n    display.setPixel(i & 63, i >> 6, min(255, F[o] * b + BAT[0] * a) | 0, min(255, F[o + 1] * b + BAT[1] * a) | 0, min(255, F[o + 2] * b + BAT[2] * a) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower."},{"name":"Bats","min":400,"max":1400,"about":"How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave."},{"name":"Wind","min":-1,"max":1,"about":"A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right."}],"start":[0,2,400,0.06],"measures":{"motion":1.359,"detail":0.0665,"edges":0.4877,"complexity":1.5604,"coverage":0.9427,"colour":0.3555,"drift":0.0712},"knobResponse":[0.2525,0.0481,0.0669,0.0629]},{"slug":"eruption","title":"Eruption","family":"volcano","round":25,"note":"해 질 녘 성층화산을 세로로 잘라 봐요. 아래 마그마 방에서 떠난 가스 덩어리가 황토와 잿빛 지층 사이 화도를 타고 올라 분화구에서 터지면, 화산탄이 포물선을 그리며 떨어지고 재 기둥은 패널 꼭대기까지 올라 번개를 품어요. K1 이 스트롬볼리식에서 하와이식 용암 분수를 지나 플리니식 재 기둥까지 분출을 바꾸고, K1 을 누르면 큰 폭발이 나요.","idea":"A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.","buttons":"K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.","code":"// ===== Patternflow pattern =====\n// Title:   Eruption\n// Family:  volcano\n// Idea:    A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the cutaway drawing of a stratovolcano in a geology textbook\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1\n//\n// Knob 1: Style. Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks.\n// Knob 2: Speed. At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower.\n// Knob 3: Pressure. How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own.\n// Knob 4: Wind. Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it.\n// Buttons: K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The axis, the crater rim's half width and crest row, the crater floor, the\n// old ground the cone was built on, the chamber's centre row, gravity in rows\n// per second squared, and the cells of lava down each flank.\nconst [C, RIM, RIMY, FLOOR, BASE, CHY, G, NL] = [32, 6, 53, 58, 86, 113, 34, 26];\n// The flank below the rim: steep at the summit, flattening to the panel's edge at row 84.\nconst flank = (dx) => RIMY + 31 * cl((dx - RIM) / 26, 0, 2) ** 0.8;\nconst SURF = new Float32Array(W + 1);\nfor (let x = 0; x \u003c= W; x++) {\n  const dx = abs(x - C);\n  SURF[x] = dx \u003c RIM ? FLOOR - (FLOOR - RIMY) * (dx / RIM) ** 2 : flank(dx) + 1.1 * (vn(x * 0.3, 7.5) - 0.5) * sm(RIM, RIM + 4, dx);\n}\nconst sAt = (X) => ((X = cl(X, 0, W - 0.001)), mix(SURF[floor(X)], SURF[floor(X) + 1], X - floor(X)));\n// The conduit's centre on each row, wandering a little on its way up.\nconst CXA = new Float32Array(H).map((_, y) => C + 1.3 * sin((y - FLOOR) * 0.11));\n// The dike leaves the conduit at row 99 and reaches the right flank here.\nconst VX = CXA[99] + 20;\n// How the older beds arch up over the chamber, column by column.\nconst BEND = new Float32Array(W).map((_, x) => exp(-(((x + 0.5 - C) / 15) ** 2)));\n\n// The cone's beds (lava, ochre tephra, ash, red scoria, pale pumice) and the\n// older rock under it (soil, sandstone, shale, red beds, limestone, dark\n// shale), each as colour index and thickness from the top down.\nconst CC = [[56, 50, 68], [134, 92, 40], [100, 96, 94], [112, 48, 32], [150, 130, 94]];\nconst BC = [[72, 48, 32], [142, 104, 50], [74, 74, 88], [118, 54, 36], [140, 130, 108], [46, 46, 62]];\nconst beds = (seq) => {\n  const out = [];\n  while (out.length \u003c 96) for (let i = 0; i \u003c seq.length; i += 2) for (let j = 0; j \u003c seq[i + 1]; j++) out.push(seq[i]);\n  return out;\n};\nconst CB = beds([0, 2, 1, 2, 2, 1, 0, 3, 3, 2, 1, 3, 4, 1, 0, 2, 2, 2, 3, 2, 0, 3, 1, 2, 2, 2, 4, 2, 0, 2, 3, 3, 1, 2]);\nconst BB = beds([0, 2, 1, 4, 2, 3, 3, 4, 4, 3, 5, 3, 1, 5, 3, 3, 2, 4, 4, 4, 5, 3, 1, 4, 3, 4, 2, 5]);\n\n// Magma from crust-dark red to white heat, as 256 steps over 0..1.25.\nconst LUT = new Float32Array(256 * 3);\n{\n  const K = [[0, 40, 6, 4], [0.2, 120, 14, 4], [0.4, 205, 46, 6], [0.6, 255, 110, 16], [0.78, 255, 182, 48], [0.95, 255, 236, 140], [1.15, 255, 255, 230]];\n  for (let i = 0; i \u003c 256; i++) {\n    const T = (i / 255) * 1.25;\n    let k = 0;\n    while (k \u003c K.length - 2 && T > K[k + 1][0]) k++;\n    const u = cl((T - K[k][0]) / (K[k + 1][0] - K[k][0]), 0, 1);\n    for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(K[k][c + 1], K[k + 1][c + 1], u);\n  }\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n\n// Sky rows: navy overhead, violet, and the last of the dusk low behind the flanks.\nconst SKY = [[0, 6, 9, 38], [40, 18, 20, 64], [64, 48, 26, 80], [86, 150, 64, 70]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), st: new Uint8ClampedArray(N * 3), kind: new Uint8Array(N), off: F32(N), gr: F32(N), vg: F32(N), sd: F32(N), A: F32(N), hot: F32(N),\n    t: 0, warm: 0, next: 0.5, slugs: [], parts: [], puffs: [], bolts: [], bub: [], glow: 0, fl: 0, flx: C, fly: 30, pr: 0.5, boost: 0, nf: 0, nv: 0, ndg: 0, npd: 1.5, lake: 0.5, pend: 0,\n    lv: [0, 1].map(() => ({ v: F32(NL), T: F32(NL), ph: 0 })),\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, dx = abs(X - C), s = sAt(X);\n    S.vg[i] = exp(-hypot(X - C, (Y - FLOOR + 1) * 0.8) / 15);\n    S.gr[i] = [0.86, 0.95, 1, 1.08][floor(hash(x, y + 77) * 4)];\n    S.sd[i] = Y - s;\n    if (Y \u003c s) {\n      // Sky, with a few stars high up.\n      let k = 0;\n      while (k \u003c SKY.length - 2 && Y > SKY[k + 1][0]) k++;\n      const u = sm(SKY[k][0], SKY[k + 1][0], Y), st = y \u003c 48 && hash(x, y) \u003c 0.014 ? 50 + 110 * hash(y, x) : 0;\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = mix(SKY[k][c + 1], SKY[k + 1][c + 1], u) + st * (c ? 1 : 0.9);\n    } else if (Y \u003c BASE - 3 * exp(-(((X - C) / 15) ** 2))) {\n      // The cone: beds laid parallel to the flanks, peaked over the old summit the crater blew away.\n      S.kind[i] = 1;\n      const ls = dx >= RIM ? flank(dx) : RIMY - (RIM - sqrt(dx * dx + 0.6)) * 0.8;\n      const d = cl(floor(Y - ls + 1.6 * (vn(x * 0.16, y * 0.09 + 30) - 0.5)), 0, 95), c0 = Y - s \u003c 1.4 ? [52, 44, 50] : CC[CB[d]];\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = c0[c] * S.gr[i];\n    } else {\n      S.kind[i] = 2;\n      S.off[i] = 1.6 * (vn(x * 0.11, y * 0.07 + 60) - 0.5);\n    }\n  }\n  for (let k = 0; k \u003c 14; k++) S.bub.push(bubble(0));\n}\n\n// A gas bubble somewhere low in the chamber.\nfunction bubble(P) {\n  return { x: C + (rnd() - 0.5) * (16 + 7 * P) * 1.4, y: CHY + rnd() * (7.5 + 2.5 * P) * 0.6 };\n}\n\nfunction puff(S, x, y, vy, r, a, tv, ny, fade, hot = 0.6, g = 0) {\n  // The oldest puff gives way when there are too many.\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vx: 0, vy, rx: r, ry: r, a, tv, ny, fade, hot, g, u: 22 });\n}\n\nfunction bolt(S) {\n  const c = S.puffs.filter((p) => !p.g && p.y \u003c 50 && p.rx > 3.5 && p.a > 0.25);\n  if (!c.length) return;\n  const p = c[floor(rnd() * c.length)], pts = [];\n  let x = p.x + (rnd() - 0.5) * p.rx, y = p.y - p.ry * 0.4;\n  const n = 5 + floor(rnd() * 8);\n  for (let j = 0; j \u003c n; j++) pts.push([x, y]), (x += (rnd() - 0.5) * 4), (y += 1.5 + rnd() * 1.5);\n  const m = pts[floor(n / 2)], br = [m];\n  for (let j = 0, bx = m[0], by = m[1], s = rnd() \u003c 0.5 ? -1 : 1; j \u003c 3; j++) br.push([(bx += s * (1 + rnd() * 2)), (by += 1 + rnd())]);\n  S.bolts.push({ pts, br, life: 0.24 });\n  [S.flx, S.fly] = pts[floor(n / 2)];\n}\n\n// A burst in the crater, its bombs, its ash and its light.\nfunction burst(S, str, haw) {\n  S.glow = min(2.2, S.glow + 0.9 * str);\n  S.boost += haw * 1.5;\n  // Bombs fly wide; a fan of finer spatter goes up steeper and falls back round the crater.\n  const nb = round((14 + 20 * str) * (1 - 0.6 * haw));\n  for (let n = 0; n \u003c nb; n++) {\n    const b = n % 3 ? 0 : 1, v = (b ? 24 + 22 * rnd() : 20 + 20 * rnd()) * sqrt(str) * (1 + 0.25 * S.P), a = (rnd() - 0.5) * (b ? 1.15 : 0.6);\n    fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, v, a, b);\n  }\n  for (let n = 0; n \u003c 2 + (str > 0.8 ? 1 : 0); n++) puff(S, C + (rnd() - 0.5) * 3, FLOOR - 3 - n * 3, -(14 + 10 * str), 3.5 + rnd(), 1 + 0.3 * str, -8, 2 + rnd() * 12, 0.04);\n  // Most bursts charge the fresh ash enough for a bolt a moment later.\n  if (rnd() \u003c 0.25 + 0.5 * str) S.pend = 0.5 + 0.4 * rnd();\n}\n\n// One bomb (b 1) or blob of spatter thrown from x, y at speed v, a radians off vertical.\nconst fling = (S, x, y, v, a, b = 0, vx = 0) => S.parts.push({ x, y, vx: v * sin(a) + vx, vy: -v * cos(a), T: 1, m: 0, b });\n\n// Lava poured into one flank's cell k: volume v at temperature T.\nfunction pour(L, k, v, T = 1) {\n  k = cl(k, 0, NL - 1);\n  L.T[k] = (L.T[k] * L.v[k] + T * v) / (L.v[k] + v + 1e-6);\n  L.v[k] += v;\n}\n\nfunction step(S, d) {\n  const s1 = S.k1, P = S.P, w = S.wind;\n  const strom = 1 - sm(0.2, 0.5, s1), haw = sm(0.15, 0.45, s1) * (1 - sm(0.6, 0.85, s1)), plin = sm(0.55, 0.9, s1);\n  Object.assign(S, { strom, haw, plin });\n  S.t += d;\n  const ax = 16 + 7 * P, ay = 7.5 + 2.5 * P, top = CHY - ay;\n  // Pressure builds in the chamber, and a slug of gas leaves for the conduit when it is ready.\n  S.pr = min(1, S.pr + d * (0.3 + 0.4 * P));\n  // A Plinian column draws on the chamber in long surges instead.\n  if (plin > 0) S.pr = mix(S.pr, 0.5 + 0.5 * sin(S.t * 1.6), min(1, plin * d * 3));\n  if ((S.next -= d) \u003c= 0 && plin \u003c 0.8) {\n    S.slugs.push({ y: top + 1, str: 0.6 + 0.4 * rnd() + 0.3 * P });\n    S.pr = max(0, S.pr - 0.6);\n    S.next = mix((1.3 + 1.7 * rnd()) / (1 + 0.7 * P), 0.5 + 0.5 * rnd(), max(haw, plin));\n  }\n  for (const g of S.slugs) {\n    // It speeds up as it expands near the top.\n    const u = cl((g.y - FLOOR) / (top - FLOOR), 0, 1);\n    g.y -= (16 + 30 * (1 - u)) * (1 + 0.5 * P) * d;\n    if (g.y \u003c= FLOOR + 1) (g.done = 1), burst(S, g.str * (strom + 0.35 * haw + 0.25 * plin), haw);\n  }\n  S.slugs = S.slugs.filter((g) => !g.done);\n  // Bubbles rise through the chamber and gather under its roof by the conduit's mouth.\n  for (const b of S.bub) {\n    const ex = C - b.x, v = (3 + 4 * P + 3 * S.pr) * d;\n    b.x += cl(ex, -1, 1) * v * 0.5 + sin(S.t * 2.3 + b.y) * 0.3 * v;\n    b.y -= v;\n    if (((b.x - C) / ax) ** 2 + ((b.y - CHY) / ay) ** 2 > 0.8) Object.assign(b, bubble(P));\n  }\n  // The fountain: a steady jet of spatter in Hawaiian style, surging after each slug,\n  // and a smaller one from the flank vent once the dike has broken out.\n  S.nf += d * haw * (60 + 50 * min(1, S.boost)) * (1 + 0.5 * P);\n  for (; S.nf >= 1; S.nf--) fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, (24 + 16 * rnd()) * (0.85 + 0.3 * P) * (1 + 0.3 * min(1, S.boost)), (rnd() - 0.5) * 0.45);\n  S.nv += d * 14 * sm(0.88, 1, P);\n  for (; S.nv >= 1; S.nv--) fling(S, VX + (rnd() - 0.5) * 2, sAt(VX) - 1, 10 + 8 * rnd(), (rnd() - 0.5) * 0.6, 0, 3);\n  S.boost = max(0, S.boost - d * 1.2);\n  // Gas and ash: a thin plume always, a roaring column in Plinian style.\n  S.ndg += d * (2.2 + 1.5 * haw + 11 * plin * (0.4 + S.pr));\n  for (; S.ndg >= 1; S.ndg--)\n    if (rnd() \u003c plin) puff(S, C + (rnd() - 0.5) * 5, FLOOR - 3, -(30 + 14 * rnd()), 5.5, 1, -20, 3 + 7 * rnd(), 0.04, 0.4);\n    else puff(S, C + (rnd() - 0.5) * 3, FLOOR - 2, -7, 3, 0.45 + 0.2 * haw, -6, 4 + 14 * rnd(), 0.045, 0.3);\n  // Plinian: part of the column collapses and pours down a flank.\n  if (plin > 0.3 && (S.npd -= d * plin) \u003c= 0) {\n    S.npd = 2 + 2 * rnd();\n    const g = rnd() \u003c 0.5 ? -1 : 1;\n    for (let n = 0; n \u003c 4; n++) puff(S, C + g * (RIM + 2 * n), RIMY + 2 * n, 0, 4, 1, 0, 0, 0.05, 1.2, g), (S.puffs[S.puffs.length - 1].u = 24 - 3 * n);\n  }\n  for (const p of S.puffs) {\n    if (p.g) {\n      // An avalanche of hot ash hugging the flank, slowing as it spreads, then lifting off.\n      p.x += p.g * p.u * d;\n      p.u = max(3, p.u - 3 * d);\n      p.rx += d * 2.5;\n      p.ry = min(8, p.ry + d * 1.5);\n      p.y = sAt(p.x) - p.ry * 0.35;\n      if (p.u \u003c 5 || p.x \u003c 1 || p.x > W - 1) Object.assign(p, { g: 0, vy: -3, tv: -5, ny: 14 + 10 * rnd(), fade: 0.06 });\n    } else {\n      const rise = sm(p.ny - 2, p.ny + 14, p.y);\n      p.vy += (p.tv * rise - p.vy) * 1.6 * d;\n      p.y += p.vy * d;\n      p.rx = min(30, p.rx + d * (0.8 + 0.12 * abs(p.vy) + 3.5 * (1 - rise) * p.a));\n      p.ry = min(12, p.ry + d * (0.6 + 0.05 * abs(p.vy)));\n    }\n    p.x += (p.vx + w * (4 + 18 * cl(1 - p.y / 60, 0, 1))) * d;\n    p.a -= d * p.fade;\n    p.hot = max(0, p.hot - d * 0.7);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.04 && p.x + p.rx > -4 && p.x - p.rx \u003c W + 4 && p.y + p.ry > -8);\n  // Bombs and spatter fly, land, roll and cool.\n  for (const q of S.parts) {\n    if (!q.m) {\n      q.vy += G * d;\n      q.vx += w * 7 * d;\n      q.x += q.vx * d;\n      q.y += q.vy * d;\n      q.T -= d * (q.b ? 0.16 : 0.35);\n      if (q.vy > 0 && q.y >= sAt(q.x)) {\n        const dx = abs(q.x - C);\n        if (dx \u003c RIM - 0.5) q.dead = 1;\n        else if (!q.b) (q.dead = 1), pour(S.lv[q.x > C ? 1 : 0], floor(dx - RIM), 0.05, max(0.5, q.T));\n        else Object.assign(q, { m: 1, u: 5 + abs(q.vx) * 0.3, s: q.x > C ? 1 : -1 });\n      }\n    } else {\n      q.x += q.s * q.u * d;\n      q.u = max(0, q.u - 6 * d);\n      q.y = sAt(q.x) - 0.5;\n      q.T -= d * 0.3;\n    }\n    if (q.T \u003c= 0 || q.x \u003c -2 || q.x > W + 2) q.dead = 1;\n  }\n  S.parts = S.parts.filter((q) => !q.dead);\n  if (S.parts.length > 400) S.parts.splice(0, S.parts.length - 400);\n  // Lava over the rim and down the flanks, slower as it cools and crusts.\n  const eff = (0.45 + 0.6 * P + 1.2 * haw) * (1 - 0.6 * plin);\n  for (let s = 0; s \u003c 2; s++) {\n    const L = S.lv[s], v = L.v, T = L.T;\n    pour(L, 0, eff * (s ? 0.55 : 1) * d);\n    if (s && P > 0.88) pour(L, floor(VX - C - RIM), 1.4 * sm(0.88, 1, P) * d);\n    L.ph += d * (1 + 2 * T[2]);\n    for (let k = NL - 1; k >= 0; k--) {\n      const f = min(v[k], v[k] * (0.2 + 2.2 * T[k] * T[k]) * (k \u003c 6 ? 1.6 : 0.9) * d);\n      v[k] -= f;\n      if (k \u003c NL - 1) pour(L, k + 1, f, T[k]);\n      T[k] = max(0, T[k] - d * (0.03 + 0.015 / (v[k] + 0.2)));\n      if (T[k] \u003c 0.1) v[k] = max(0, v[k] - d * 0.03);\n    }\n  }\n  S.lake = mix(S.lake, (1.2 + 1.2 * P + 4 * haw) * (1 - plin), min(1, d * 2));\n  // Lightning in the ash.\n  if (rnd() \u003c d * (0.2 + 1.3 * plin + 0.4 * S.glow)) bolt(S);\n  if (S.pend > 0 && (S.pend -= d) \u003c= 0) bolt(S);\n  for (const b of S.bolts) b.life -= d;\n  S.bolts = S.bolts.filter((b) => b.life > 0);\n  S.fl = S.bolts.reduce((m, b) => max(m, floor(b.life * 40) % 3 === 1 ? 0.35 : 1), 0);\n  S.glow *= exp(-d * 2.5);\n}\n\n// K1 tap: the big one.\nfunction blast(S) {\n  S.slugs.length = 0;\n  S.pr = 0;\n  burst(S, 2.4, 0);\n  S.glow = 2.2;\n  for (let n = 0; n \u003c 5; n++) puff(S, C + (rnd() - 0.5) * 6, FLOOR - 4, -(26 + 12 * rnd()), 4 + rnd() * 2, 1, -10, 2 + 8 * rnd(), 0.04, 1);\n  for (let s = 0; s \u003c 2; s++) pour(S.lv[s], 0, 1.6);\n  S.pend = 0.15;\n  S.next = 1.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2;\n  S.k1 = cl(k[0], 0, 1);\n  S.P = cl(k[2], 0, 1);\n  S.wind = cl(k[3], -1, 1);\n  // The volcano has been going for a while before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    for (let n = round(60 + 120 * sp); n-- > 0; ) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) blast(S);\n  step(S, cl(dt || 0, 0, 0.1) * sp);\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst lc = (T) => ((T = lut(T)), [LUT[T], LUT[T + 1], LUT[T + 2]]);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 === undefined) return;\n  F = S.f;\n  const { P, t, haw, plin, kind, st, A, hot, vg, wind } = S;\n  const ax = 16 + 7 * P + 0.8 * S.pr, ay = 7.5 + 2.5 * P + 0.5 * S.pr, top = CHY - ay, bamp = 3 + 6 * P + 1.4 * S.pr, bend = BEND.map((v) => v * bamp);\n  const L = 0.3 + 0.7 * S.glow + 0.6 * haw + 0.5 * plin, fl = S.fl;\n\n  // Sky, cone and the older beds bent up over the chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * 3, kd = kind[i];\n    if (kd === 0) {\n      const g = L * vg[i];\n      (F[o] = st[o] + 150 * g + 7 * fl), (F[o + 1] = st[o + 1] + 48 * g + 8 * fl), (F[o + 2] = st[o + 2] + 16 * g + 18 * fl);\n    } else if (kd === 1) {\n      const g = L * vg[i] * (S.sd[i] \u003c 2.5 ? 1 : 0.2);\n      (F[o] = st[o] + 120 * g), (F[o + 1] = st[o + 1] + 40 * g), (F[o + 2] = st[o + 2] + 10 * g);\n    } else {\n      const d = cl((i >> 6) + 0.5 - BASE + bend[i & 63] + S.off[i], 0, 94), d0 = floor(d), u = d - d0;\n      const a = BC[BB[d0]], b = BC[BB[d0 + 1]], gr = S.gr[i];\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(a[c], b[c], u) * gr;\n    }\n  }\n\n  // The magma: chamber, the feeder below it, the conduit, the dike and the sill, with the rock round them glowing.\n  const glowRock = (o, g) => {\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [210, 50, 16][c], min(0.85, g));\n  };\n  const melt = (o, T) => {\n    const k = lut(T);\n    (F[o] = LUT[k]), (F[o + 1] = LUT[k + 1]), (F[o + 2] = LUT[k + 2]);\n  };\n  for (let y = max(BASE, floor(top - 6)); y \u003c H; y++)\n    for (let x = max(0, floor(C - ax - 7)); x \u003c min(W, C + ax + 7); x++) {\n      const X = x + 0.5, Y = y + 0.5, e = hypot((X - C) / ax, (Y - CHY) / ay), o = (y * W + x) * 3;\n      if (e \u003c 1) {\n        const T = 0.28 + 0.38 * vn(X * 0.17 + 0.7 * sin(Y * 0.17 + t * 0.5), Y * 0.3 + t * 1.2) + 0.2 * (1 - e * e) - 0.25 * sm(0.72, 1, e) + 0.16 * S.pr + 0.1 * P + 0.35 * exp(-((X - C) ** 2) / 9 - ((Y - top) ** 2) / 6) * S.pr;\n        melt(o, T);\n      } else if (Y > CHY && abs(X - C - 1.5 * sin(y * 0.2)) \u003c 1.3) melt(o, 0.38 + 0.08 * sin(y * 0.5 - t * 3));\n      else glowRock(o, exp(-((e - 1) * ay) / 2.4) * (0.5 + 0.4 * S.pr + 0.2 * P));\n    }\n  for (const b of S.bub) put(b.x, b.y, lc(1.05));\n  const slug = (y) => S.slugs.reduce((m, g) => max(m, exp(-(((y - g.y) / 2.6) ** 2))), 0);\n  for (let y = FLOOR; y \u003c= top + 1; y++) {\n    const cx = CXA[y], sg = slug(y), hw = 1.35 + 1.3 * sg + 0.6 * plin;\n    for (let x = max(0, floor(cx - hw - 5)); x \u003c min(W, cx + hw + 5); x++) {\n      const o = (y * W + x) * 3, q = abs(x + 0.5 - cx);\n      if (q \u003c hw) {\n        const ves = hash(x, floor(y + t * 14)) \u003c 0.12 ? 0.25 : 0;\n        melt(o, mix(0.58 + 0.12 * sin(y * 0.45 + t * 7) + ves + 0.5 * sg, 0.5 + 0.6 * vn(x * 0.6, (y + t * 45) * 0.25), plin));\n      } else if (kind[y * W + x]) glowRock(o, exp(-(q - hw) / 1.5) * (0.4 + 0.5 * sg + 0.3 * plin));\n    }\n  }\n  // The dike towards the right flank, and the sill along the beds on the left.\n  const dk = sm(0.2, 0.9, P), sl = sm(0.45, 1, P);\n  for (let j = 0; j \u003c 46 * dk; j++) {\n    const u = j / 46, x = CXA[99] + (VX - CXA[99]) * u, y = 99 - (99 - sAt(VX)) * u;\n    put(x, y, lc(0.55 + 0.1 * sin(j * 0.6 - t * 5)));\n    put(x + 1, y, [210, 50, 16], 0.45);\n  }\n  for (let j = 0; j \u003c 20 * sl; j++) {\n    const x = CXA[93] - 2 - j, y = 93 + 0.006 * j * j + 2 * sin(j * 0.15);\n    put(x, y, lc(0.5 + 0.08 * sin(j * 0.7 + t * 4)));\n    if (j \u003c 14 * sl) put(x, y + 1, lc(0.42));\n  }\n\n  // The ash: every puff summed, then shaded over the sky.\n  A.fill(0);\n  hot.fill(0);\n  for (const p of S.puffs) {\n    const x0 = max(0, floor(p.x - p.rx)), x1 = min(W - 1, floor(p.x + p.rx)), y0 = max(0, floor(p.y - p.ry)), y1 = min(H - 1, floor(p.y + p.ry));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = (y + 0.5 - p.y) / p.ry;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = (x + 0.5 - p.x) / p.rx, q = 1 - dx * dx - dy * dy;\n        if (q > 0) (A[y * W + x] += p.a * q * q), (hot[y * W + x] += p.hot * q * q);\n      }\n    }\n  }\n  // Ash falling out of the plume aloft, slanting downwind as it falls.\n  const col = new Float32Array(W);\n  for (const p of S.puffs)\n    if (!p.g && p.y \u003c 45 && p.rx > 4) for (let x = max(0, floor(p.x - p.rx)); x \u003c min(W, p.x + p.rx); x++) col[x] += p.a * max(0, 1 - ((x + 0.5 - p.x) / p.rx) ** 2);\n  for (let y = 14; y \u003c 84; y++) {\n    const f = 0.11 * sm(12, 30, y) * (1 - sm(56, 84, y)), sh = wind * (y - 14) * 0.55;\n    for (let x = 0; x \u003c W; x++) {\n      const c = col[cl(round(x - sh), 0, W - 1)];\n      if (c > 0.05) A[y * W + x] += f * min(1.5, c) * (0.3 + vn(x * 0.9, y * 0.12 - t * 3));\n    }\n  }\n  const { flx, fly } = S;\n  for (let i = 0; i \u003c N; i++) {\n    if (A[i] \u003c 0.01 || kind[i]) continue;\n    const x = i & 63, y = i >> 6, o = i * 3, tex = vn(x * 0.22 - t * wind * 0.5, y * 0.2 + t * 0.7);\n    const al = min(0.94, 1 - exp(-A[i] * (1.3 + 1.7 * tex))), sh = 0.55 + 0.6 * tex, vl = 0.8 * L * vg[i] + 0.6 * hot[i], fy = fl * exp(-hypot(x - flx, (y - fly) * 0.7) / 16);\n    F[o] = mix(F[o], 104 * sh + 255 * vl + 130 * fy, al);\n    F[o + 1] = mix(F[o + 1], 98 * sh + 100 * vl + 140 * fy, al);\n    F[o + 2] = mix(F[o + 2], 100 * sh + 34 * vl + 210 * fy, al);\n  }\n\n  // The crater: the vent, the lava lake, and the flash of a burst.\n  const ll = FLOOR + 0.6 - S.lake;\n  for (let y = RIMY - 1; y \u003c= FLOOR + 1; y++)\n    for (let x = C - RIM; x \u003c C + RIM; x++) {\n      const i = y * W + x;\n      if (!kind[i] && y + 0.5 > ll) melt(i * 3, 0.55 + 0.3 * vn(x * 0.6 + t, y * 0.8) + 0.2 * S.glow - 0.12 * (y + 0.5 - ll \u003c 1 ? 1 : 0));\n    }\n  if (S.glow > 0.02)\n    for (let y = FLOOR - 14; y \u003c= FLOOR + 3; y++)\n      for (let x = C - 12; x \u003c C + 12; x++) {\n        const o = (y * W + x) * 3, g = S.glow * exp(-hypot(x + 0.5 - C, y + 0.5 - FLOOR + 1) / 3.2);\n        (F[o] += 255 * g), (F[o + 1] += 190 * g), (F[o + 2] += 90 * g);\n      }\n\n  // Lava down the flanks: hot and bright near the rim, crusting dark as it cools.\n  for (let s = 0; s \u003c 2; s++) {\n    const { v, T, ph } = S.lv[s];\n    for (let k = 0; k \u003c NL; k++) {\n      if (v[k] \u003c 0.01) continue;\n      const x = s ? C + RIM + k : C - RIM - 1 - k, y0 = min(SURF[x], SURF[x + 1]), y1 = max(SURF[x], SURF[x + 1]), th = min(4, v[k] * 3.2), al = min(1, v[k] * 8);\n      // Its glow on the air just above it.\n      for (let j = 1; j \u003c= 3; j++) put(x, y0 - th - j, [255, 90, 20], (0.35 * al * T[k]) / j);\n      for (let y = floor(y0 - th); y \u003c= floor(y1); y++) {\n        const n = vn(k * 0.7 - ph * 2, y * 0.6), tt = T[k], c = lc(0.22 + 0.62 * tt + 0.18 * n);\n        const cr = max(sm(0.75, 0.25, tt) * sm(0.3, 0.6, vn(k * 1.3 - ph * 2, y * 1.1 + 9)), sm(0.12, 0.02, tt)), g = S.gr[(y * W + x) & 8191];\n        put(x, y, [mix(c[0], 64 * g, cr), mix(c[1], 52 * g, cr), mix(c[2], 54 * g, cr)], al);\n      }\n    }\n  }\n\n  // Bombs and spatter, with a short trail while they fly.\n  for (const q of S.parts) {\n    const c = lc(0.25 + 0.85 * q.T);\n    if (!q.m) for (let j = 1; j \u003c= 3; j++) put(q.x - q.vx * 0.022 * j, q.y - q.vy * 0.022 * j, c, 0.5 / j);\n    put(q.x, q.y, c);\n    if (q.b && q.T > 0.3) put(q.x + 1, q.y, c, 0.6);\n  }\n\n  // Lightning.\n  for (const b of S.bolts) {\n    if (floor(b.life * 40) % 3 === 1) continue;\n    for (const pts of [b.pts, b.br])\n      for (let j = 1; j \u003c pts.length; j++) {\n        const [x0, y0] = pts[j - 1], [x1, y1] = pts[j], m = max(abs(x1 - x0), abs(y1 - y0)) * 1.5 + 1;\n        for (let u = 0; u \u003c= m; u++) {\n          const x = mix(x0, x1, u / m), y = mix(y0, y1, u / m);\n          put(x - 1, y, [120, 110, 255], 0.35), put(x + 1, y, [120, 110, 255], 0.35), put(x, y, [240, 240, 255]);\n        }\n      }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-eruption","type":"code","name":"eruption","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Eruption\n// Family:  volcano\n// Idea:    A stratovolcano cut in half at dusk: gas slugs leave the glowing magma chamber, climb the conduit through bent beds of ochre, ash and basalt and burst in the crater, throwing bombs on arcs while lava runs down the flanks and an ash column with lightning in it climbs to the top of the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the cutaway drawing of a stratovolcano in a geology textbook\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1\n//\n// Knob 1: Style. Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks.\n// Knob 2: Speed. At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower.\n// Knob 3: Pressure. How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own.\n// Knob 4: Wind. Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it.\n// Buttons: K1 tap sets off a big explosion: a crater-wide flash, a shower of bombs, a burst of ash with lightning in it and a surge of lava down both flanks.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The axis, the crater rim's half width and crest row, the crater floor, the\n// old ground the cone was built on, the chamber's centre row, gravity in rows\n// per second squared, and the cells of lava down each flank.\nconst [C, RIM, RIMY, FLOOR, BASE, CHY, G, NL] = [32, 6, 53, 58, 86, 113, 34, 26];\n// The flank below the rim: steep at the summit, flattening to the panel's edge at row 84.\nconst flank = (dx) => RIMY + 31 * cl((dx - RIM) / 26, 0, 2) ** 0.8;\nconst SURF = new Float32Array(W + 1);\nfor (let x = 0; x \u003c= W; x++) {\n  const dx = abs(x - C);\n  SURF[x] = dx \u003c RIM ? FLOOR - (FLOOR - RIMY) * (dx / RIM) ** 2 : flank(dx) + 1.1 * (vn(x * 0.3, 7.5) - 0.5) * sm(RIM, RIM + 4, dx);\n}\nconst sAt = (X) => ((X = cl(X, 0, W - 0.001)), mix(SURF[floor(X)], SURF[floor(X) + 1], X - floor(X)));\n// The conduit's centre on each row, wandering a little on its way up.\nconst CXA = new Float32Array(H).map((_, y) => C + 1.3 * sin((y - FLOOR) * 0.11));\n// The dike leaves the conduit at row 99 and reaches the right flank here.\nconst VX = CXA[99] + 20;\n// How the older beds arch up over the chamber, column by column.\nconst BEND = new Float32Array(W).map((_, x) => exp(-(((x + 0.5 - C) / 15) ** 2)));\n\n// The cone's beds (lava, ochre tephra, ash, red scoria, pale pumice) and the\n// older rock under it (soil, sandstone, shale, red beds, limestone, dark\n// shale), each as colour index and thickness from the top down.\nconst CC = [[56, 50, 68], [134, 92, 40], [100, 96, 94], [112, 48, 32], [150, 130, 94]];\nconst BC = [[72, 48, 32], [142, 104, 50], [74, 74, 88], [118, 54, 36], [140, 130, 108], [46, 46, 62]];\nconst beds = (seq) => {\n  const out = [];\n  while (out.length \u003c 96) for (let i = 0; i \u003c seq.length; i += 2) for (let j = 0; j \u003c seq[i + 1]; j++) out.push(seq[i]);\n  return out;\n};\nconst CB = beds([0, 2, 1, 2, 2, 1, 0, 3, 3, 2, 1, 3, 4, 1, 0, 2, 2, 2, 3, 2, 0, 3, 1, 2, 2, 2, 4, 2, 0, 2, 3, 3, 1, 2]);\nconst BB = beds([0, 2, 1, 4, 2, 3, 3, 4, 4, 3, 5, 3, 1, 5, 3, 3, 2, 4, 4, 4, 5, 3, 1, 4, 3, 4, 2, 5]);\n\n// Magma from crust-dark red to white heat, as 256 steps over 0..1.25.\nconst LUT = new Float32Array(256 * 3);\n{\n  const K = [[0, 40, 6, 4], [0.2, 120, 14, 4], [0.4, 205, 46, 6], [0.6, 255, 110, 16], [0.78, 255, 182, 48], [0.95, 255, 236, 140], [1.15, 255, 255, 230]];\n  for (let i = 0; i \u003c 256; i++) {\n    const T = (i / 255) * 1.25;\n    let k = 0;\n    while (k \u003c K.length - 2 && T > K[k + 1][0]) k++;\n    const u = cl((T - K[k][0]) / (K[k + 1][0] - K[k][0]), 0, 1);\n    for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(K[k][c + 1], K[k + 1][c + 1], u);\n  }\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n\n// Sky rows: navy overhead, violet, and the last of the dusk low behind the flanks.\nconst SKY = [[0, 6, 9, 38], [40, 18, 20, 64], [64, 48, 26, 80], [86, 150, 64, 70]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), st: new Uint8ClampedArray(N * 3), kind: new Uint8Array(N), off: F32(N), gr: F32(N), vg: F32(N), sd: F32(N), A: F32(N), hot: F32(N),\n    t: 0, warm: 0, next: 0.5, slugs: [], parts: [], puffs: [], bolts: [], bub: [], glow: 0, fl: 0, flx: C, fly: 30, pr: 0.5, boost: 0, nf: 0, nv: 0, ndg: 0, npd: 1.5, lake: 0.5, pend: 0,\n    lv: [0, 1].map(() => ({ v: F32(NL), T: F32(NL), ph: 0 })),\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, dx = abs(X - C), s = sAt(X);\n    S.vg[i] = exp(-hypot(X - C, (Y - FLOOR + 1) * 0.8) / 15);\n    S.gr[i] = [0.86, 0.95, 1, 1.08][floor(hash(x, y + 77) * 4)];\n    S.sd[i] = Y - s;\n    if (Y \u003c s) {\n      // Sky, with a few stars high up.\n      let k = 0;\n      while (k \u003c SKY.length - 2 && Y > SKY[k + 1][0]) k++;\n      const u = sm(SKY[k][0], SKY[k + 1][0], Y), st = y \u003c 48 && hash(x, y) \u003c 0.014 ? 50 + 110 * hash(y, x) : 0;\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = mix(SKY[k][c + 1], SKY[k + 1][c + 1], u) + st * (c ? 1 : 0.9);\n    } else if (Y \u003c BASE - 3 * exp(-(((X - C) / 15) ** 2))) {\n      // The cone: beds laid parallel to the flanks, peaked over the old summit the crater blew away.\n      S.kind[i] = 1;\n      const ls = dx >= RIM ? flank(dx) : RIMY - (RIM - sqrt(dx * dx + 0.6)) * 0.8;\n      const d = cl(floor(Y - ls + 1.6 * (vn(x * 0.16, y * 0.09 + 30) - 0.5)), 0, 95), c0 = Y - s \u003c 1.4 ? [52, 44, 50] : CC[CB[d]];\n      for (let c = 0; c \u003c 3; c++) S.st[o + c] = c0[c] * S.gr[i];\n    } else {\n      S.kind[i] = 2;\n      S.off[i] = 1.6 * (vn(x * 0.11, y * 0.07 + 60) - 0.5);\n    }\n  }\n  for (let k = 0; k \u003c 14; k++) S.bub.push(bubble(0));\n}\n\n// A gas bubble somewhere low in the chamber.\nfunction bubble(P) {\n  return { x: C + (rnd() - 0.5) * (16 + 7 * P) * 1.4, y: CHY + rnd() * (7.5 + 2.5 * P) * 0.6 };\n}\n\nfunction puff(S, x, y, vy, r, a, tv, ny, fade, hot = 0.6, g = 0) {\n  // The oldest puff gives way when there are too many.\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vx: 0, vy, rx: r, ry: r, a, tv, ny, fade, hot, g, u: 22 });\n}\n\nfunction bolt(S) {\n  const c = S.puffs.filter((p) => !p.g && p.y \u003c 50 && p.rx > 3.5 && p.a > 0.25);\n  if (!c.length) return;\n  const p = c[floor(rnd() * c.length)], pts = [];\n  let x = p.x + (rnd() - 0.5) * p.rx, y = p.y - p.ry * 0.4;\n  const n = 5 + floor(rnd() * 8);\n  for (let j = 0; j \u003c n; j++) pts.push([x, y]), (x += (rnd() - 0.5) * 4), (y += 1.5 + rnd() * 1.5);\n  const m = pts[floor(n / 2)], br = [m];\n  for (let j = 0, bx = m[0], by = m[1], s = rnd() \u003c 0.5 ? -1 : 1; j \u003c 3; j++) br.push([(bx += s * (1 + rnd() * 2)), (by += 1 + rnd())]);\n  S.bolts.push({ pts, br, life: 0.24 });\n  [S.flx, S.fly] = pts[floor(n / 2)];\n}\n\n// A burst in the crater, its bombs, its ash and its light.\nfunction burst(S, str, haw) {\n  S.glow = min(2.2, S.glow + 0.9 * str);\n  S.boost += haw * 1.5;\n  // Bombs fly wide; a fan of finer spatter goes up steeper and falls back round the crater.\n  const nb = round((14 + 20 * str) * (1 - 0.6 * haw));\n  for (let n = 0; n \u003c nb; n++) {\n    const b = n % 3 ? 0 : 1, v = (b ? 24 + 22 * rnd() : 20 + 20 * rnd()) * sqrt(str) * (1 + 0.25 * S.P), a = (rnd() - 0.5) * (b ? 1.15 : 0.6);\n    fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, v, a, b);\n  }\n  for (let n = 0; n \u003c 2 + (str > 0.8 ? 1 : 0); n++) puff(S, C + (rnd() - 0.5) * 3, FLOOR - 3 - n * 3, -(14 + 10 * str), 3.5 + rnd(), 1 + 0.3 * str, -8, 2 + rnd() * 12, 0.04);\n  // Most bursts charge the fresh ash enough for a bolt a moment later.\n  if (rnd() \u003c 0.25 + 0.5 * str) S.pend = 0.5 + 0.4 * rnd();\n}\n\n// One bomb (b 1) or blob of spatter thrown from x, y at speed v, a radians off vertical.\nconst fling = (S, x, y, v, a, b = 0, vx = 0) => S.parts.push({ x, y, vx: v * sin(a) + vx, vy: -v * cos(a), T: 1, m: 0, b });\n\n// Lava poured into one flank's cell k: volume v at temperature T.\nfunction pour(L, k, v, T = 1) {\n  k = cl(k, 0, NL - 1);\n  L.T[k] = (L.T[k] * L.v[k] + T * v) / (L.v[k] + v + 1e-6);\n  L.v[k] += v;\n}\n\nfunction step(S, d) {\n  const s1 = S.k1, P = S.P, w = S.wind;\n  const strom = 1 - sm(0.2, 0.5, s1), haw = sm(0.15, 0.45, s1) * (1 - sm(0.6, 0.85, s1)), plin = sm(0.55, 0.9, s1);\n  Object.assign(S, { strom, haw, plin });\n  S.t += d;\n  const ax = 16 + 7 * P, ay = 7.5 + 2.5 * P, top = CHY - ay;\n  // Pressure builds in the chamber, and a slug of gas leaves for the conduit when it is ready.\n  S.pr = min(1, S.pr + d * (0.3 + 0.4 * P));\n  // A Plinian column draws on the chamber in long surges instead.\n  if (plin > 0) S.pr = mix(S.pr, 0.5 + 0.5 * sin(S.t * 1.6), min(1, plin * d * 3));\n  if ((S.next -= d) \u003c= 0 && plin \u003c 0.8) {\n    S.slugs.push({ y: top + 1, str: 0.6 + 0.4 * rnd() + 0.3 * P });\n    S.pr = max(0, S.pr - 0.6);\n    S.next = mix((1.3 + 1.7 * rnd()) / (1 + 0.7 * P), 0.5 + 0.5 * rnd(), max(haw, plin));\n  }\n  for (const g of S.slugs) {\n    // It speeds up as it expands near the top.\n    const u = cl((g.y - FLOOR) / (top - FLOOR), 0, 1);\n    g.y -= (16 + 30 * (1 - u)) * (1 + 0.5 * P) * d;\n    if (g.y \u003c= FLOOR + 1) (g.done = 1), burst(S, g.str * (strom + 0.35 * haw + 0.25 * plin), haw);\n  }\n  S.slugs = S.slugs.filter((g) => !g.done);\n  // Bubbles rise through the chamber and gather under its roof by the conduit's mouth.\n  for (const b of S.bub) {\n    const ex = C - b.x, v = (3 + 4 * P + 3 * S.pr) * d;\n    b.x += cl(ex, -1, 1) * v * 0.5 + sin(S.t * 2.3 + b.y) * 0.3 * v;\n    b.y -= v;\n    if (((b.x - C) / ax) ** 2 + ((b.y - CHY) / ay) ** 2 > 0.8) Object.assign(b, bubble(P));\n  }\n  // The fountain: a steady jet of spatter in Hawaiian style, surging after each slug,\n  // and a smaller one from the flank vent once the dike has broken out.\n  S.nf += d * haw * (60 + 50 * min(1, S.boost)) * (1 + 0.5 * P);\n  for (; S.nf >= 1; S.nf--) fling(S, C + (rnd() - 0.5) * 3, FLOOR - 1, (24 + 16 * rnd()) * (0.85 + 0.3 * P) * (1 + 0.3 * min(1, S.boost)), (rnd() - 0.5) * 0.45);\n  S.nv += d * 14 * sm(0.88, 1, P);\n  for (; S.nv >= 1; S.nv--) fling(S, VX + (rnd() - 0.5) * 2, sAt(VX) - 1, 10 + 8 * rnd(), (rnd() - 0.5) * 0.6, 0, 3);\n  S.boost = max(0, S.boost - d * 1.2);\n  // Gas and ash: a thin plume always, a roaring column in Plinian style.\n  S.ndg += d * (2.2 + 1.5 * haw + 11 * plin * (0.4 + S.pr));\n  for (; S.ndg >= 1; S.ndg--)\n    if (rnd() \u003c plin) puff(S, C + (rnd() - 0.5) * 5, FLOOR - 3, -(30 + 14 * rnd()), 5.5, 1, -20, 3 + 7 * rnd(), 0.04, 0.4);\n    else puff(S, C + (rnd() - 0.5) * 3, FLOOR - 2, -7, 3, 0.45 + 0.2 * haw, -6, 4 + 14 * rnd(), 0.045, 0.3);\n  // Plinian: part of the column collapses and pours down a flank.\n  if (plin > 0.3 && (S.npd -= d * plin) \u003c= 0) {\n    S.npd = 2 + 2 * rnd();\n    const g = rnd() \u003c 0.5 ? -1 : 1;\n    for (let n = 0; n \u003c 4; n++) puff(S, C + g * (RIM + 2 * n), RIMY + 2 * n, 0, 4, 1, 0, 0, 0.05, 1.2, g), (S.puffs[S.puffs.length - 1].u = 24 - 3 * n);\n  }\n  for (const p of S.puffs) {\n    if (p.g) {\n      // An avalanche of hot ash hugging the flank, slowing as it spreads, then lifting off.\n      p.x += p.g * p.u * d;\n      p.u = max(3, p.u - 3 * d);\n      p.rx += d * 2.5;\n      p.ry = min(8, p.ry + d * 1.5);\n      p.y = sAt(p.x) - p.ry * 0.35;\n      if (p.u \u003c 5 || p.x \u003c 1 || p.x > W - 1) Object.assign(p, { g: 0, vy: -3, tv: -5, ny: 14 + 10 * rnd(), fade: 0.06 });\n    } else {\n      const rise = sm(p.ny - 2, p.ny + 14, p.y);\n      p.vy += (p.tv * rise - p.vy) * 1.6 * d;\n      p.y += p.vy * d;\n      p.rx = min(30, p.rx + d * (0.8 + 0.12 * abs(p.vy) + 3.5 * (1 - rise) * p.a));\n      p.ry = min(12, p.ry + d * (0.6 + 0.05 * abs(p.vy)));\n    }\n    p.x += (p.vx + w * (4 + 18 * cl(1 - p.y / 60, 0, 1))) * d;\n    p.a -= d * p.fade;\n    p.hot = max(0, p.hot - d * 0.7);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.04 && p.x + p.rx > -4 && p.x - p.rx \u003c W + 4 && p.y + p.ry > -8);\n  // Bombs and spatter fly, land, roll and cool.\n  for (const q of S.parts) {\n    if (!q.m) {\n      q.vy += G * d;\n      q.vx += w * 7 * d;\n      q.x += q.vx * d;\n      q.y += q.vy * d;\n      q.T -= d * (q.b ? 0.16 : 0.35);\n      if (q.vy > 0 && q.y >= sAt(q.x)) {\n        const dx = abs(q.x - C);\n        if (dx \u003c RIM - 0.5) q.dead = 1;\n        else if (!q.b) (q.dead = 1), pour(S.lv[q.x > C ? 1 : 0], floor(dx - RIM), 0.05, max(0.5, q.T));\n        else Object.assign(q, { m: 1, u: 5 + abs(q.vx) * 0.3, s: q.x > C ? 1 : -1 });\n      }\n    } else {\n      q.x += q.s * q.u * d;\n      q.u = max(0, q.u - 6 * d);\n      q.y = sAt(q.x) - 0.5;\n      q.T -= d * 0.3;\n    }\n    if (q.T \u003c= 0 || q.x \u003c -2 || q.x > W + 2) q.dead = 1;\n  }\n  S.parts = S.parts.filter((q) => !q.dead);\n  if (S.parts.length > 400) S.parts.splice(0, S.parts.length - 400);\n  // Lava over the rim and down the flanks, slower as it cools and crusts.\n  const eff = (0.45 + 0.6 * P + 1.2 * haw) * (1 - 0.6 * plin);\n  for (let s = 0; s \u003c 2; s++) {\n    const L = S.lv[s], v = L.v, T = L.T;\n    pour(L, 0, eff * (s ? 0.55 : 1) * d);\n    if (s && P > 0.88) pour(L, floor(VX - C - RIM), 1.4 * sm(0.88, 1, P) * d);\n    L.ph += d * (1 + 2 * T[2]);\n    for (let k = NL - 1; k >= 0; k--) {\n      const f = min(v[k], v[k] * (0.2 + 2.2 * T[k] * T[k]) * (k \u003c 6 ? 1.6 : 0.9) * d);\n      v[k] -= f;\n      if (k \u003c NL - 1) pour(L, k + 1, f, T[k]);\n      T[k] = max(0, T[k] - d * (0.03 + 0.015 / (v[k] + 0.2)));\n      if (T[k] \u003c 0.1) v[k] = max(0, v[k] - d * 0.03);\n    }\n  }\n  S.lake = mix(S.lake, (1.2 + 1.2 * P + 4 * haw) * (1 - plin), min(1, d * 2));\n  // Lightning in the ash.\n  if (rnd() \u003c d * (0.2 + 1.3 * plin + 0.4 * S.glow)) bolt(S);\n  if (S.pend > 0 && (S.pend -= d) \u003c= 0) bolt(S);\n  for (const b of S.bolts) b.life -= d;\n  S.bolts = S.bolts.filter((b) => b.life > 0);\n  S.fl = S.bolts.reduce((m, b) => max(m, floor(b.life * 40) % 3 === 1 ? 0.35 : 1), 0);\n  S.glow *= exp(-d * 2.5);\n}\n\n// K1 tap: the big one.\nfunction blast(S) {\n  S.slugs.length = 0;\n  S.pr = 0;\n  burst(S, 2.4, 0);\n  S.glow = 2.2;\n  for (let n = 0; n \u003c 5; n++) puff(S, C + (rnd() - 0.5) * 6, FLOOR - 4, -(26 + 12 * rnd()), 4 + rnd() * 2, 1, -10, 2 + 8 * rnd(), 0.04, 1);\n  for (let s = 0; s \u003c 2; s++) pour(S.lv[s], 0, 1.6);\n  S.pend = 0.15;\n  S.next = 1.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], sp = cl(k[1], 0.2, 3) / 2;\n  S.k1 = cl(k[0], 0, 1);\n  S.P = cl(k[2], 0, 1);\n  S.wind = cl(k[3], -1, 1);\n  // The volcano has been going for a while before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    for (let n = round(60 + 120 * sp); n-- > 0; ) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) blast(S);\n  step(S, cl(dt || 0, 0, 0.1) * sp);\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst lc = (T) => ((T = lut(T)), [LUT[T], LUT[T + 1], LUT[T + 2]]);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 === undefined) return;\n  F = S.f;\n  const { P, t, haw, plin, kind, st, A, hot, vg, wind } = S;\n  const ax = 16 + 7 * P + 0.8 * S.pr, ay = 7.5 + 2.5 * P + 0.5 * S.pr, top = CHY - ay, bamp = 3 + 6 * P + 1.4 * S.pr, bend = BEND.map((v) => v * bamp);\n  const L = 0.3 + 0.7 * S.glow + 0.6 * haw + 0.5 * plin, fl = S.fl;\n\n  // Sky, cone and the older beds bent up over the chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * 3, kd = kind[i];\n    if (kd === 0) {\n      const g = L * vg[i];\n      (F[o] = st[o] + 150 * g + 7 * fl), (F[o + 1] = st[o + 1] + 48 * g + 8 * fl), (F[o + 2] = st[o + 2] + 16 * g + 18 * fl);\n    } else if (kd === 1) {\n      const g = L * vg[i] * (S.sd[i] \u003c 2.5 ? 1 : 0.2);\n      (F[o] = st[o] + 120 * g), (F[o + 1] = st[o + 1] + 40 * g), (F[o + 2] = st[o + 2] + 10 * g);\n    } else {\n      const d = cl((i >> 6) + 0.5 - BASE + bend[i & 63] + S.off[i], 0, 94), d0 = floor(d), u = d - d0;\n      const a = BC[BB[d0]], b = BC[BB[d0 + 1]], gr = S.gr[i];\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(a[c], b[c], u) * gr;\n    }\n  }\n\n  // The magma: chamber, the feeder below it, the conduit, the dike and the sill, with the rock round them glowing.\n  const glowRock = (o, g) => {\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [210, 50, 16][c], min(0.85, g));\n  };\n  const melt = (o, T) => {\n    const k = lut(T);\n    (F[o] = LUT[k]), (F[o + 1] = LUT[k + 1]), (F[o + 2] = LUT[k + 2]);\n  };\n  for (let y = max(BASE, floor(top - 6)); y \u003c H; y++)\n    for (let x = max(0, floor(C - ax - 7)); x \u003c min(W, C + ax + 7); x++) {\n      const X = x + 0.5, Y = y + 0.5, e = hypot((X - C) / ax, (Y - CHY) / ay), o = (y * W + x) * 3;\n      if (e \u003c 1) {\n        const T = 0.28 + 0.38 * vn(X * 0.17 + 0.7 * sin(Y * 0.17 + t * 0.5), Y * 0.3 + t * 1.2) + 0.2 * (1 - e * e) - 0.25 * sm(0.72, 1, e) + 0.16 * S.pr + 0.1 * P + 0.35 * exp(-((X - C) ** 2) / 9 - ((Y - top) ** 2) / 6) * S.pr;\n        melt(o, T);\n      } else if (Y > CHY && abs(X - C - 1.5 * sin(y * 0.2)) \u003c 1.3) melt(o, 0.38 + 0.08 * sin(y * 0.5 - t * 3));\n      else glowRock(o, exp(-((e - 1) * ay) / 2.4) * (0.5 + 0.4 * S.pr + 0.2 * P));\n    }\n  for (const b of S.bub) put(b.x, b.y, lc(1.05));\n  const slug = (y) => S.slugs.reduce((m, g) => max(m, exp(-(((y - g.y) / 2.6) ** 2))), 0);\n  for (let y = FLOOR; y \u003c= top + 1; y++) {\n    const cx = CXA[y], sg = slug(y), hw = 1.35 + 1.3 * sg + 0.6 * plin;\n    for (let x = max(0, floor(cx - hw - 5)); x \u003c min(W, cx + hw + 5); x++) {\n      const o = (y * W + x) * 3, q = abs(x + 0.5 - cx);\n      if (q \u003c hw) {\n        const ves = hash(x, floor(y + t * 14)) \u003c 0.12 ? 0.25 : 0;\n        melt(o, mix(0.58 + 0.12 * sin(y * 0.45 + t * 7) + ves + 0.5 * sg, 0.5 + 0.6 * vn(x * 0.6, (y + t * 45) * 0.25), plin));\n      } else if (kind[y * W + x]) glowRock(o, exp(-(q - hw) / 1.5) * (0.4 + 0.5 * sg + 0.3 * plin));\n    }\n  }\n  // The dike towards the right flank, and the sill along the beds on the left.\n  const dk = sm(0.2, 0.9, P), sl = sm(0.45, 1, P);\n  for (let j = 0; j \u003c 46 * dk; j++) {\n    const u = j / 46, x = CXA[99] + (VX - CXA[99]) * u, y = 99 - (99 - sAt(VX)) * u;\n    put(x, y, lc(0.55 + 0.1 * sin(j * 0.6 - t * 5)));\n    put(x + 1, y, [210, 50, 16], 0.45);\n  }\n  for (let j = 0; j \u003c 20 * sl; j++) {\n    const x = CXA[93] - 2 - j, y = 93 + 0.006 * j * j + 2 * sin(j * 0.15);\n    put(x, y, lc(0.5 + 0.08 * sin(j * 0.7 + t * 4)));\n    if (j \u003c 14 * sl) put(x, y + 1, lc(0.42));\n  }\n\n  // The ash: every puff summed, then shaded over the sky.\n  A.fill(0);\n  hot.fill(0);\n  for (const p of S.puffs) {\n    const x0 = max(0, floor(p.x - p.rx)), x1 = min(W - 1, floor(p.x + p.rx)), y0 = max(0, floor(p.y - p.ry)), y1 = min(H - 1, floor(p.y + p.ry));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = (y + 0.5 - p.y) / p.ry;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = (x + 0.5 - p.x) / p.rx, q = 1 - dx * dx - dy * dy;\n        if (q > 0) (A[y * W + x] += p.a * q * q), (hot[y * W + x] += p.hot * q * q);\n      }\n    }\n  }\n  // Ash falling out of the plume aloft, slanting downwind as it falls.\n  const col = new Float32Array(W);\n  for (const p of S.puffs)\n    if (!p.g && p.y \u003c 45 && p.rx > 4) for (let x = max(0, floor(p.x - p.rx)); x \u003c min(W, p.x + p.rx); x++) col[x] += p.a * max(0, 1 - ((x + 0.5 - p.x) / p.rx) ** 2);\n  for (let y = 14; y \u003c 84; y++) {\n    const f = 0.11 * sm(12, 30, y) * (1 - sm(56, 84, y)), sh = wind * (y - 14) * 0.55;\n    for (let x = 0; x \u003c W; x++) {\n      const c = col[cl(round(x - sh), 0, W - 1)];\n      if (c > 0.05) A[y * W + x] += f * min(1.5, c) * (0.3 + vn(x * 0.9, y * 0.12 - t * 3));\n    }\n  }\n  const { flx, fly } = S;\n  for (let i = 0; i \u003c N; i++) {\n    if (A[i] \u003c 0.01 || kind[i]) continue;\n    const x = i & 63, y = i >> 6, o = i * 3, tex = vn(x * 0.22 - t * wind * 0.5, y * 0.2 + t * 0.7);\n    const al = min(0.94, 1 - exp(-A[i] * (1.3 + 1.7 * tex))), sh = 0.55 + 0.6 * tex, vl = 0.8 * L * vg[i] + 0.6 * hot[i], fy = fl * exp(-hypot(x - flx, (y - fly) * 0.7) / 16);\n    F[o] = mix(F[o], 104 * sh + 255 * vl + 130 * fy, al);\n    F[o + 1] = mix(F[o + 1], 98 * sh + 100 * vl + 140 * fy, al);\n    F[o + 2] = mix(F[o + 2], 100 * sh + 34 * vl + 210 * fy, al);\n  }\n\n  // The crater: the vent, the lava lake, and the flash of a burst.\n  const ll = FLOOR + 0.6 - S.lake;\n  for (let y = RIMY - 1; y \u003c= FLOOR + 1; y++)\n    for (let x = C - RIM; x \u003c C + RIM; x++) {\n      const i = y * W + x;\n      if (!kind[i] && y + 0.5 > ll) melt(i * 3, 0.55 + 0.3 * vn(x * 0.6 + t, y * 0.8) + 0.2 * S.glow - 0.12 * (y + 0.5 - ll \u003c 1 ? 1 : 0));\n    }\n  if (S.glow > 0.02)\n    for (let y = FLOOR - 14; y \u003c= FLOOR + 3; y++)\n      for (let x = C - 12; x \u003c C + 12; x++) {\n        const o = (y * W + x) * 3, g = S.glow * exp(-hypot(x + 0.5 - C, y + 0.5 - FLOOR + 1) / 3.2);\n        (F[o] += 255 * g), (F[o + 1] += 190 * g), (F[o + 2] += 90 * g);\n      }\n\n  // Lava down the flanks: hot and bright near the rim, crusting dark as it cools.\n  for (let s = 0; s \u003c 2; s++) {\n    const { v, T, ph } = S.lv[s];\n    for (let k = 0; k \u003c NL; k++) {\n      if (v[k] \u003c 0.01) continue;\n      const x = s ? C + RIM + k : C - RIM - 1 - k, y0 = min(SURF[x], SURF[x + 1]), y1 = max(SURF[x], SURF[x + 1]), th = min(4, v[k] * 3.2), al = min(1, v[k] * 8);\n      // Its glow on the air just above it.\n      for (let j = 1; j \u003c= 3; j++) put(x, y0 - th - j, [255, 90, 20], (0.35 * al * T[k]) / j);\n      for (let y = floor(y0 - th); y \u003c= floor(y1); y++) {\n        const n = vn(k * 0.7 - ph * 2, y * 0.6), tt = T[k], c = lc(0.22 + 0.62 * tt + 0.18 * n);\n        const cr = max(sm(0.75, 0.25, tt) * sm(0.3, 0.6, vn(k * 1.3 - ph * 2, y * 1.1 + 9)), sm(0.12, 0.02, tt)), g = S.gr[(y * W + x) & 8191];\n        put(x, y, [mix(c[0], 64 * g, cr), mix(c[1], 52 * g, cr), mix(c[2], 54 * g, cr)], al);\n      }\n    }\n  }\n\n  // Bombs and spatter, with a short trail while they fly.\n  for (const q of S.parts) {\n    const c = lc(0.25 + 0.85 * q.T);\n    if (!q.m) for (let j = 1; j \u003c= 3; j++) put(q.x - q.vx * 0.022 * j, q.y - q.vy * 0.022 * j, c, 0.5 / j);\n    put(q.x, q.y, c);\n    if (q.b && q.T > 0.3) put(q.x + 1, q.y, c, 0.6);\n  }\n\n  // Lightning.\n  for (const b of S.bolts) {\n    if (floor(b.life * 40) % 3 === 1) continue;\n    for (const pts of [b.pts, b.br])\n      for (let j = 1; j \u003c pts.length; j++) {\n        const [x0, y0] = pts[j - 1], [x1, y1] = pts[j], m = max(abs(x1 - x0), abs(y1 - y0)) * 1.5 + 1;\n        for (let u = 0; u \u003c= m; u++) {\n          const x = mix(x0, x1, u / m), y = mix(y0, y1, u / m);\n          put(x - 1, y, [120, 110, 255], 0.35), put(x + 1, y, [120, 110, 255], 0.35), put(x, y, [240, 240, 255]);\n        }\n      }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Style=0..1, Speed=0.2..3, Pressure=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Style","min":0,"max":1,"about":"Strombolian at 0: a slug of gas bursts in the crater every couple of seconds and throws glowing bombs on arcs. Hawaiian near 0.5: a steady lava fountain, a full lava lake and wide flows down both flanks. Plinian at 1: a conduit full of froth feeds a grey column that spreads under the top of the panel, lightning runs through it and glowing avalanches pour down the flanks."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a slug takes about a second and a half to climb from the chamber to the crater; at 0.2 everything runs ten times slower."},{"name":"Pressure","min":0,"max":1,"about":"How full the magma chamber is. It swells and brightens, bends the beds above it further up, and pushes a dike towards the right flank and a sill into the beds on the left; near 1 the dike breaks out and a flank vent pours lava of its own."},{"name":"Wind","min":-1,"max":1,"about":"Bends the ash column to either side, more the higher it rises; the ash falling out of it slants downwind, and the bombs drift a little with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.3557,"detail":0.0525,"edges":0.231,"complexity":2.1856,"coverage":1,"colour":0.2971,"drift":0.0844},"knobResponse":[0.082,0.0543,0.0923,0.0549]},{"slug":"essence-drop","title":"Essence Drop","family":"cosmetic","round":33,"note":"맑은 물빛 에센스에 짙은 색 방울이 느린 화면으로 떨어져 손가락 아홉 개의 왕관을 세우고, 파인 자리가 닫히며 솟은 기둥 끝에서 구슬이 떨어져 나가요. 방울의 짙은 색은 소용돌이 고리로 말려 가라앉으며 웅덩이에 풀려요. K3 을 올리면 왕관과 구슬이 사라지고 젤처럼 무겁게 잠기며, K1 은 색상환을 다 돌고 누르면 방울이 바로 떨어져요.","idea":"In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.","buttons":"K1 tap lets a drop fall now.","code":"// ===== Patternflow pattern =====\n// Title:   Essence Drop\n// Family:  cosmetic\n// Idea:    In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after slow-motion film of a drop falling into clear essence\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1\n//\n// Knob 1: Hue. The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker.\n// Knob 2: Speed. How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower.\n// Knob 3: Viscosity. Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume.\n// Knob 4: Size. The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs.\n// Buttons: K1 tap lets a drop fall now.\n\nconst W = 64, H = 128, N = W * H, Y0 = 66;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k) => {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n};\n// Light comes from the upper left.\nconst LX = -0.55, LY = -0.835;\nconst MAXP = 2000;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, visc: 0, size: 0.06, next: 0.4, T: 0,\n    ev: [], dye: new Float32Array(N), deep: new Float32Array(N), dt2: new Float32Array(N), sdf: new Float32Array(N), rip: new Float32Array(W),\n    px: new Float32Array(MAXP), py: new Float32Array(MAXP), pa: new Float32Array(MAXP), pe: new Int32Array(MAXP), np: 0,\n    circ: [], caps: [], pal: new Float32Array(13), palKey: NaN,\n  };\n}\n\nfunction spawn(S) {\n  const r = 3.4 + 4.2 * S.size, R = Math.random;\n  const x = 32 + (R() - 0.5) * 10;\n  // Nine fingers round the front of the crown, each its own length, and the\n  // beads they throw each their own speed, so the spray fans out.\n  const fing = [];\n  for (let j = 0; j \u003c 9; j++) fing.push([PI * (j + 0.5 + 0.35 * (R() - 0.5)) / 9, 0.6 + 0.65 * R(), 7 + 6 * R(), 4 + 5 * R()]);\n  S.ev.push({ id: (S.idn = (S.idn || 0) + 1), x, r, te: 0, Tf: 1.4 * (1 + 0.5 * S.visc), dyed: false, ga: 0, a: 0, yv: 0, fing });\n  if (S.ev.length > 4) S.ev.shift();\n}\n\n// The phases of one splash, as functions of tau, the seconds since impact on\n// the film's own clock: the cavity opens and shuts by 0.9, the crown stands\n// by 0.35 and falls by 1.1, the jet rises from 0.85 and is gone by 2.35.\nconst TC = 0.9, TCR = 1.1, TJ0 = 0.85, TJ = 1.5, TPINCH = 0.42;\nfunction slowOf(v) {\n  return 1 + 1.3 * v;\n}\n\n// The dye: when the drop goes under, a blob of particles is set in the\n// velocity field of a vortex pair, the cross-section of a vortex ring. The\n// pair moves down at U = G / (4 pi a), slowing as G decays and widening as it\n// slows, and the particles wind into its two curls and trail a stem.\nfunction stepDye(S, dts) {\n  const v = S.visc;\n  for (const e of S.ev) {\n    const tau = (e.te - e.Tf) / slowOf(v);\n    if (tau \u003c 0.08) continue;\n    if (!e.dyed) {\n      e.dyed = true;\n      e.a = 1.7 * e.r;\n      e.yv = Y0 + 2 * e.r;\n      e.ga = 4 * PI * e.a * (13 + 1.4 * e.r) * (1 - 0.55 * v);\n      const n = floor(160 + 40 * e.r);\n      for (let i = 0; i \u003c n; i++) {\n        if (S.np >= MAXP) break;\n        const ang = Math.random() * 2 * PI, rad = sqrt(Math.random()) * 1.9 * e.r;\n        S.px[S.np] = e.x + cos(ang) * rad;\n        S.py[S.np] = Y0 + 1.6 * e.r + sin(ang) * rad * 0.8;\n        S.pa[S.np] = 0;\n        S.pe[S.np] = e.id;\n        S.np++;\n      }\n    }\n    // Viscosity eats the ring: its spin decays over 2.8 s in water, 1.5 s in gel.\n    e.ga *= exp(-dts / (2.8 - 1.3 * v));\n    const U = e.ga / (4 * PI * e.a);\n    e.yv += U * dts;\n    e.a += 0.3 * e.r * dts * (1 - 0.6 * v);\n  }\n  const dye = S.dye;\n  let k = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    let e = null;\n    for (const f of S.ev) if (f.id === S.pe[i]) e = f;\n    let x = S.px[i], y = S.py[i];\n    const age = (S.pa[i] += dts);\n    if (!e || age > 12) continue;\n    // Two Lamb-Oseen cores, opposite spins, the fluid between them going down.\n    let ux = 0, uy = 0;\n    const d2 = (0.85 * e.a) ** 2;\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const dx = x - (e.x + s * e.a), dy = y - e.yv, g = (-s * e.ga) / (2 * PI * (dx * dx + dy * dy + d2));\n      ux += -g * dy;\n      uy += g * dx;\n    }\n    x += (ux + (Math.random() - 0.5) * 7) * dts;\n    y += (uy + (Math.random() - 0.5) * 7) * dts;\n    x = cl(x, 0.5, W - 1.5);\n    y = cl(y, Y0 + 1, H - 1.5);\n    // Each particle leaves colour where it passes, less as it ages, so the\n    // curls show where it went and the old colour spreads out.\n    const w = dts * 1.4 * exp(-age / 5), ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix;\n    dye[o] += w * (1 - fx) * (1 - fy);\n    dye[o + 1] += w * fx * (1 - fy);\n    dye[o + W] += w * (1 - fx) * fy;\n    dye[o + W + 1] += w * fx * fy;\n    S.px[k] = x;\n    S.py[k] = y;\n    S.pa[k] = age;\n    S.pe[k] = S.pe[i];\n    k++;\n  }\n  S.np = k;\n  // Diffusion and a slow fade into the pool: a gel holds the colour longer.\n  const t2 = S.dt2, kap = cl(dts * (1.6 - 1.1 * v), 0, 0.24), fade = exp(-dts / (7 + 5 * v));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, c = dye[i];\n      const l = (x > 0 ? dye[i - 1] : c) + (x \u003c W - 1 ? dye[i + 1] : c) + (y > 0 ? dye[i - W] : c) + (y \u003c H - 1 ? dye[i + W] : c) - 4 * c;\n      t2[i] = (c + kap * l) * fade;\n    }\n  dye.set(t2);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.visc = cl(k[2] || 0, 0, 1);\n  S.size = cl(k[3], 0, 1);\n  const dts = (d * S.speed) / 2;\n  S.T += dts;\n  if (input.btnPressed && input.btnPressed[0]) spawn(S);\n  S.next -= dts;\n  if (S.next \u003c= 0) {\n    spawn(S);\n    S.next += 5.5 * (1 + 0.4 * S.visc);\n  }\n  for (const e of S.ev) e.te += dts;\n  S.ev = S.ev.filter((e) => e.te - e.Tf \u003c 16 * slowOf(S.visc));\n  stepDye(S, dts);\n}\n\n// Shapes for the frame: circles and tapered capsules, each smooth-joined to\n// the pool so a bead touching the surface melts into it.\nfunction build(S) {\n  const C = (S.circ = []), K = (S.caps = []), v = S.visc, rip = S.rip;\n  rip.fill(0);\n  S.cav = [];\n  S.crowns = [];\n  for (const e of S.ev) {\n    const r = e.r, x0 = e.x;\n    if (e.te \u003c e.Tf) {\n      // Falling, faster and faster. The drop hangs from a thread out of the\n      // top; the thread stretches, breaks (later the thicker the essence) and\n      // its lower end balls up into a small bead that trails the drop.\n      const u = e.te / e.Tf, yb = -2 * r - 4 + (Y0 + 2 * r + 4) * (0.3 * u + 0.7 * u * u), cy = yb - r;\n      C.push([x0, cy, r, 1.4, 1]);\n      const tb = 0.45 + 0.42 * v;\n      if (u \u003c tb) K.push([x0, cy - 0.5 * r, x0, -6, 0.42 * r, 0.12 * r * (1 + v), 1.6, 1]);\n      else {\n        const f = (u - tb) / (1 - tb), sy = cy - r - 2 - (6 + 14 * v) * sqrt(f);\n        C.push([x0, sy, 0.32 * r, 1, 1]);\n        K.push([x0, -6, x0, -6 + (cy - 12 + 6) * max(0, 1 - 3 * f), 0.15 * r, 0.12 * r, 1, 1]);\n      }\n      continue;\n    }\n    const tau = (e.te - e.Tf) / slowOf(v);\n    // The drop sinks into the surface instead of vanishing at the touch: in a\n    // gel it takes 0.75 s and a thick neck joins it to the pool.\n    const ts = 0.15 + 0.6 * v;\n    if (tau \u003c ts) C.push([x0, Y0 - r + 2.2 * r * (tau / ts), r * (1 - 0.3 * (tau / ts)), 1.4 + 3 * v, 1]);\n    // Ripples: a packet from the impact and a smaller one when the jet falls,\n    // running out along the surface at 9 LEDs a second, 4 in a gel, about\n    // nine LEDs from crest to crest.\n    for (const [t0, a0] of [[0, 0.9 * (1 - 0.6 * v)], [TJ0 + TJ * 0.8, 0.45 * (1 - 0.7 * v)]]) {\n      const tt = tau - t0;\n      if (tt \u003c= 0) continue;\n      const c = 9 - 5 * v, A = (a0 * r * exp(-tt / 1.8)) / 3.6;\n      for (let x = 0; x \u003c W; x++) {\n        const s = abs(x + 0.5 - x0) - c * tt - 2, en = exp(-(s * s) / 60);\n        if (en > 0.01) rip[x] += A * en * sin(s * 0.7);\n      }\n    }\n    // The cavity: an air pocket pushed down under the surface.\n    if (tau \u003c TC) {\n      const Rc = r * (1.2 + 1.3 * (1 - exp(-tau / 0.18))) * (1 - 0.3 * v), Dc = r * 2.5 * (1 - 0.55 * v) * sin((PI * tau) / TC);\n      if (Dc > 0.3) S.cav.push([x0, Rc, Dc]);\n    }\n    // The crown: two thin walls leaning out, a translucent sheet between\n    // them, and fingers round the rim whose beads fly off at 0.42.\n    const hc = r * 3.1 * max(0, 1 - v / 0.7), R = r * (1.4 + 1.5 * (1 - exp(-min(tau, TCR) / 0.25)));\n    if (hc > 0.2 && tau \u003c TCR) {\n      const Hc = hc * Math.pow(sin((PI * tau) / TCR), 0.6), fl = 0.35 * Hc;\n      if (Hc > 0.5) {\n        for (let s = -1; s \u003c= 1; s += 2) K.push([x0 + s * R, Y0 + 1, x0 + s * (R + fl), Y0 - Hc, 0.75, 0.5, 1.2]);\n        S.crowns.push([x0, R, fl, Hc]);\n        if (tau \u003c 0.42 && v \u003c 0.5) {\n          const g = sm(tau / 0.3) * (1 - v / 0.5);\n          for (const [ph, lk] of e.fing) {\n            const cs = cos(ph), bx = x0 + (R + fl) * cs, lf = lk * 0.55 * hc * g, tx = bx + 0.35 * lf * cs, ty = Y0 - Hc - lf;\n            K.push([bx, Y0 - Hc + 0.5, tx, ty, 0.5, 0.3, 0.9]);\n            C.push([tx, ty, 0.26 * r, 0.9]);\n          }\n        }\n      }\n    }\n    if (tau >= 0.42 && v \u003c 0.5) {\n      // The beads thrown from the fingers fly out and up, then slow and drop back.\n      const t = tau - 0.42, Hp = hc * Math.pow(sin((PI * 0.42) / TCR), 0.6), Rp = r * (1.4 + 1.5 * (1 - exp(-0.42 / 0.25))) + 0.35 * Hp;\n      for (const [ph, lk, vy, vx] of e.fing) {\n        const cs = cos(ph), lf = lk * 0.55 * hc * (1 - v / 0.5);\n        const y = Y0 - Hp - lf - vy * t + 16 * t * t, x = x0 + (Rp + 0.35 * lf) * cs + vx * cs * t;\n        if (y \u003c Y0 + 2) C.push([x, y, 0.26 * r * (1 - v / 0.5), 0.9]);\n      }\n    }\n    // The jet: when the cavity snaps shut a column climbs out of the middle;\n    // in water its tip pinches off into a bead that flies on and falls back.\n    if (tau > TJ0) {\n      const s = (tau - TJ0) / TJ, hj = min(48, r * 8.5) * (1 - 0.8 * v), rb = 0.85 * r * (1 + 0.8 * v), pinch = v \u003c 0.55;\n      if (s \u003c 1) {\n        const Hj = hj * sin(PI * s);\n        const top = Y0 - Hj;\n        K.push([x0, Y0 + 3, x0, top, rb, (0.5 + 0.5 * v) * r, 2.5 + 2.5 * v]);\n        if (!pinch || s \u003c TPINCH) C.push([x0, top - 0.3 * r, (0.7 + 0.3 * v) * r, 1.3 + 2 * v]);\n      }\n      if (pinch && s >= TPINCH) {\n        const t = (s - TPINCH) * TJ, Hp = hj * sin(PI * TPINCH), y = Y0 - Hp - 0.9 * r - 7 * t + 18 * t * t;\n        if (y \u003c Y0 + 2) C.push([x0, y, 0.68 * r, 1.3]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  build(S);\n  const sdf = S.sdf, rip = S.rip, v = S.visc, deep = S.deep;\n  // The liquid's signed distance: negative inside. The pool's surface,\n  // minus the cavities, then every shape joined on smoothly. The falling drop\n  // is the concentrated essence, so where it is the colour is deep.\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i++) sdf[i] = Y0 + rip[x] - (y + 0.5);\n  deep.fill(0);\n  for (const [cx, R, D] of S.cav)\n    for (let y = Y0 - 2; y \u003c min(H, Y0 + D + 3); y++)\n      for (let x = max(0, floor(cx - R - 3)); x \u003c min(W, cx + R + 3); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - Y0) / D, da = (sqrt(dx * dx + dy * dy) - 1) * min(R, D), i = y * W + x;\n        sdf[i] = -smin(-sdf[i], da, 1.5);\n      }\n  for (const [ax, ay, bx, by, ra, rb, k, dp] of S.caps) {\n    const x0 = max(0, floor(min(ax, bx) - ra - k - 1)), x1 = min(W - 1, floor(max(ax, bx) + ra + k + 1));\n    const y0 = max(0, floor(min(ay, by) - ra - k - 1)), y1 = min(H - 1, floor(max(ay, by) + ra + k + 1));\n    const ex = bx - ax, ey = by - ay, ll = ex * ex + ey * ey || 1;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * ex + qy * ey) / ll, 0, 1);\n        const dd = Math.hypot(qx - ex * t, qy - ey * t) - (ra + (rb - ra) * t), i = y * W + x;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  for (const [cx, cy, r, k, dp] of S.circ) {\n    const x0 = max(0, floor(cx - r - k - 1)), x1 = min(W - 1, floor(cx + r + k + 1)), y0 = max(0, floor(cy - r - k - 1)), y1 = min(H - 1, floor(cy + r + k + 1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const i = y * W + x, dd = Math.hypot(x + 0.5 - cx, y + 0.5 - cy) - r;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  // Palette: backdrop, essence, and the deep colour the drop carries. A\n  // thicker essence holds more colour. From rose through orange and gold to\n  // lime, hue -0.12 to 0.35, any of these at half brightness reads brown,\n  // khaki or olive on the LEDs, so there everything is lifted towards cream\n  // and paled: the backdrop to 200 of 255 or more with a shallow vignette, the\n  // pool to about 215, and the deep colour goes brighter than the pool\n  // instead of darker.\n  const pal = S.pal, h = S.hue + 0.52, hf = h - floor(h), key = hf + 7 * v;\n  if (S.palKey !== key) {\n    const hw = hf > 0.5 ? hf - 1 : hf, wm = sm((hw + 0.12) / 0.06) * (1 - sm((hw - 0.28) / 0.07));\n    hsv(h + 0.02, 0.14 - 0.06 * wm, 1, pal, 0);\n    hsv(h + 0.06 * (1 - wm), 0.4 - 0.3 * wm, 1, pal, 10);\n    hsv(h, (0.38 + 0.22 * v) * (1 - 0.5 * wm), 1, pal, 3);\n    hsv(h + 0.015, 0.92 - 0.3 * wm, 1, pal, 6);\n    pal[9] = wm;\n    S.palKey = key;\n  }\n  const wm = pal[9], dv = 0.46 + 0.5 * wm, dye = S.dye, T = S.T;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const below = y + 0.5 - Y0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const d = sdf[i];\n      // The backdrop: a soft key light high in the middle, deepening towards\n      // the surface.\n      const gx = (x + 0.5 - 32) / 32, gy = (y - 14) / 46;\n      const gl = exp(-(gx * gx + gy * gy)), bv = min(1, 0.4 + 0.46 * gl + wm * (0.36 - 0.26 * gl));\n      let r = (pal[10] + (pal[0] - pal[10]) * gl) * bv, g = (pal[11] + (pal[1] - pal[11]) * gl) * bv, b = (pal[12] + (pal[2] - pal[12]) * gl) * bv;\n      // The crown's sheet: thin film between its walls, brighter at the two\n      // sides where the eye looks along it, and along the lip.\n      for (const [cx, R, fl, Hc] of S.crowns) {\n        const hgt = -below;\n        if (hgt \u003c -0.5 || hgt > Hc) continue;\n        const Rh = R + (fl * hgt) / Hc, u = abs(x + 0.5 - cx) / Rh;\n        if (u >= 1) continue;\n        const a = 0.16 + 0.3 * min(1, 1 / sqrt(1 - u * u) - 1) + 0.4 * exp(-((hgt - Hc + 0.6) ** 2));\n        r += (pal[3] * 0.92 - r) * a;\n        g += (pal[4] * 0.92 - g) * a;\n        b += (pal[5] * 0.92 - b) * a;\n      }\n      // The open surface, seen edge on: a gloss line along it, glinting white\n      // where a ripple tilts it towards the light. It is drawn across the\n      // boundary, so it does not flicker as the surface moves by a fraction.\n      const pd = Y0 + rip[x] - (y + 0.5), open = abs(d - pd) \u003c 0.02;\n      let spec = 0;\n      if (open && abs(pd) \u003c 2.5) {\n        const sl = ((x \u003c W - 1 ? rip[x + 1] : rip[x]) - (x > 0 ? rip[x - 1] : rip[x])) / 2, nd = (sl * LX - LY) / sqrt(1 + sl * sl);\n        spec = exp(-((pd + 0.3) ** 2) / 0.45) * (0.16 + 0.85 * Math.pow(max(0, nd), 12));\n      }\n      if (d \u003c 0.5) {\n        const cov = cl(0.5 - d, 0, 1);\n        // Inside the liquid: the essence, brighter just under the surface and\n        // deeper towards the bottom, slow shafts of light from the surface\n        // swaying through it, and the deep colour where the drop has gone.\n        const depth = cl(below / (H - Y0), 0, 1);\n        let lv = below \u003c 0 ? 0.88 + 0.09 * wm : 0.8 - 0.36 * depth + wm * (0.15 + 0.16 * depth);\n        if (below >= 0) {\n          const sx = x + 0.4 * below;\n          lv += 0.16 * (1 - depth) * (0.5 + 0.5 * sin(0.3 * sx - 0.7 * T + 1.3 * sin(0.11 * sx + 0.23 * T)));\n        }\n        lv = min(1, lv);\n        let lr = pal[3] * lv, lg = pal[4] * lv, lb = pal[5] * lv;\n        const da = max(deep[i] * 0.9, 1 - exp(-dye[i] * 0.9));\n        if (da > 0.003) {\n          lr += (pal[6] * dv - lr) * da;\n          lg += (pal[7] * dv - lg) * da;\n          lb += (pal[8] * dv - lb) * da;\n        }\n        let rim = 0, inner = 0;\n        if (!open) {\n          // Everything but the open surface: the normal from the distance\n          // field, a white highlight where it faces the light, a gloss on what\n          // faces up, a darker rim on the far side and light gathered inside\n          // the bottom of a bead.\n          const xm = x > 0 ? sdf[i - 1] : d, xp = x \u003c W - 1 ? sdf[i + 1] : d, ym = y > 0 ? sdf[i - W] : d, yp = y \u003c H - 1 ? sdf[i + W] : d;\n          let nx = xp - xm, ny = yp - ym;\n          const nl = Math.hypot(nx, ny) || 1;\n          nx /= nl;\n          ny /= nl;\n          const edge = cl(1 + d / 1.6, 0, 1), nd = nx * LX + ny * LY;\n          spec += edge * (0.9 * Math.pow(max(0, nd), 7) + 0.22 * max(0, -ny));\n          rim = edge * 0.35 * (1 - max(0, nd));\n          inner = cl((-d - 0.6) / 1.2, 0, 1) * cl((3 + d) / 1.5, 0, 1) * Math.pow(max(0, -nd), 2) * (below \u003c 1 ? 0.6 : 0);\n        }\n        lr = lr * (1 - rim) + inner * pal[3];\n        lg = lg * (1 - rim) + inner * pal[4];\n        lb = lb * (1 - rim) + inner * pal[5];\n        r += (lr - r) * cov;\n        g += (lg - g) * cov;\n        b += (lb - b) * cov;\n      }\n      r += spec;\n      g += spec;\n      b += spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","layer":{"id":"layer-essence-drop","type":"code","name":"essence-drop","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Essence Drop\n// Family:  cosmetic\n// Idea:    In slow motion a bead of essence falls into a clear tinted pool, throws up a crown that sheds droplets, opens a cavity that snaps shut into a jet whose tip pinches off and falls back, while ripples carry glints along the glossy surface and the drop's deeper colour curls down through the pool as a vortex ring and slowly melts into it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after slow-motion film of a drop falling into clear essence\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1\n//\n// Knob 1: Hue. The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker.\n// Knob 2: Speed. How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower.\n// Knob 3: Viscosity. Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume.\n// Knob 4: Size. The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs.\n// Buttons: K1 tap lets a drop fall now.\n\nconst W = 64, H = 128, N = W * H, Y0 = 66;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k) => {\n  const h = max(k - abs(a - b), 0) / k;\n  return min(a, b) - h * h * k * 0.25;\n};\n// Light comes from the upper left.\nconst LX = -0.55, LY = -0.835;\nconst MAXP = 2000;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, visc: 0, size: 0.06, next: 0.4, T: 0,\n    ev: [], dye: new Float32Array(N), deep: new Float32Array(N), dt2: new Float32Array(N), sdf: new Float32Array(N), rip: new Float32Array(W),\n    px: new Float32Array(MAXP), py: new Float32Array(MAXP), pa: new Float32Array(MAXP), pe: new Int32Array(MAXP), np: 0,\n    circ: [], caps: [], pal: new Float32Array(13), palKey: NaN,\n  };\n}\n\nfunction spawn(S) {\n  const r = 3.4 + 4.2 * S.size, R = Math.random;\n  const x = 32 + (R() - 0.5) * 10;\n  // Nine fingers round the front of the crown, each its own length, and the\n  // beads they throw each their own speed, so the spray fans out.\n  const fing = [];\n  for (let j = 0; j \u003c 9; j++) fing.push([PI * (j + 0.5 + 0.35 * (R() - 0.5)) / 9, 0.6 + 0.65 * R(), 7 + 6 * R(), 4 + 5 * R()]);\n  S.ev.push({ id: (S.idn = (S.idn || 0) + 1), x, r, te: 0, Tf: 1.4 * (1 + 0.5 * S.visc), dyed: false, ga: 0, a: 0, yv: 0, fing });\n  if (S.ev.length > 4) S.ev.shift();\n}\n\n// The phases of one splash, as functions of tau, the seconds since impact on\n// the film's own clock: the cavity opens and shuts by 0.9, the crown stands\n// by 0.35 and falls by 1.1, the jet rises from 0.85 and is gone by 2.35.\nconst TC = 0.9, TCR = 1.1, TJ0 = 0.85, TJ = 1.5, TPINCH = 0.42;\nfunction slowOf(v) {\n  return 1 + 1.3 * v;\n}\n\n// The dye: when the drop goes under, a blob of particles is set in the\n// velocity field of a vortex pair, the cross-section of a vortex ring. The\n// pair moves down at U = G / (4 pi a), slowing as G decays and widening as it\n// slows, and the particles wind into its two curls and trail a stem.\nfunction stepDye(S, dts) {\n  const v = S.visc;\n  for (const e of S.ev) {\n    const tau = (e.te - e.Tf) / slowOf(v);\n    if (tau \u003c 0.08) continue;\n    if (!e.dyed) {\n      e.dyed = true;\n      e.a = 1.7 * e.r;\n      e.yv = Y0 + 2 * e.r;\n      e.ga = 4 * PI * e.a * (13 + 1.4 * e.r) * (1 - 0.55 * v);\n      const n = floor(160 + 40 * e.r);\n      for (let i = 0; i \u003c n; i++) {\n        if (S.np >= MAXP) break;\n        const ang = Math.random() * 2 * PI, rad = sqrt(Math.random()) * 1.9 * e.r;\n        S.px[S.np] = e.x + cos(ang) * rad;\n        S.py[S.np] = Y0 + 1.6 * e.r + sin(ang) * rad * 0.8;\n        S.pa[S.np] = 0;\n        S.pe[S.np] = e.id;\n        S.np++;\n      }\n    }\n    // Viscosity eats the ring: its spin decays over 2.8 s in water, 1.5 s in gel.\n    e.ga *= exp(-dts / (2.8 - 1.3 * v));\n    const U = e.ga / (4 * PI * e.a);\n    e.yv += U * dts;\n    e.a += 0.3 * e.r * dts * (1 - 0.6 * v);\n  }\n  const dye = S.dye;\n  let k = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    let e = null;\n    for (const f of S.ev) if (f.id === S.pe[i]) e = f;\n    let x = S.px[i], y = S.py[i];\n    const age = (S.pa[i] += dts);\n    if (!e || age > 12) continue;\n    // Two Lamb-Oseen cores, opposite spins, the fluid between them going down.\n    let ux = 0, uy = 0;\n    const d2 = (0.85 * e.a) ** 2;\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const dx = x - (e.x + s * e.a), dy = y - e.yv, g = (-s * e.ga) / (2 * PI * (dx * dx + dy * dy + d2));\n      ux += -g * dy;\n      uy += g * dx;\n    }\n    x += (ux + (Math.random() - 0.5) * 7) * dts;\n    y += (uy + (Math.random() - 0.5) * 7) * dts;\n    x = cl(x, 0.5, W - 1.5);\n    y = cl(y, Y0 + 1, H - 1.5);\n    // Each particle leaves colour where it passes, less as it ages, so the\n    // curls show where it went and the old colour spreads out.\n    const w = dts * 1.4 * exp(-age / 5), ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix;\n    dye[o] += w * (1 - fx) * (1 - fy);\n    dye[o + 1] += w * fx * (1 - fy);\n    dye[o + W] += w * (1 - fx) * fy;\n    dye[o + W + 1] += w * fx * fy;\n    S.px[k] = x;\n    S.py[k] = y;\n    S.pa[k] = age;\n    S.pe[k] = S.pe[i];\n    k++;\n  }\n  S.np = k;\n  // Diffusion and a slow fade into the pool: a gel holds the colour longer.\n  const t2 = S.dt2, kap = cl(dts * (1.6 - 1.1 * v), 0, 0.24), fade = exp(-dts / (7 + 5 * v));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, c = dye[i];\n      const l = (x > 0 ? dye[i - 1] : c) + (x \u003c W - 1 ? dye[i + 1] : c) + (y > 0 ? dye[i - W] : c) + (y \u003c H - 1 ? dye[i + W] : c) - 4 * c;\n      t2[i] = (c + kap * l) * fade;\n    }\n  dye.set(t2);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.visc = cl(k[2] || 0, 0, 1);\n  S.size = cl(k[3], 0, 1);\n  const dts = (d * S.speed) / 2;\n  S.T += dts;\n  if (input.btnPressed && input.btnPressed[0]) spawn(S);\n  S.next -= dts;\n  if (S.next \u003c= 0) {\n    spawn(S);\n    S.next += 5.5 * (1 + 0.4 * S.visc);\n  }\n  for (const e of S.ev) e.te += dts;\n  S.ev = S.ev.filter((e) => e.te - e.Tf \u003c 16 * slowOf(S.visc));\n  stepDye(S, dts);\n}\n\n// Shapes for the frame: circles and tapered capsules, each smooth-joined to\n// the pool so a bead touching the surface melts into it.\nfunction build(S) {\n  const C = (S.circ = []), K = (S.caps = []), v = S.visc, rip = S.rip;\n  rip.fill(0);\n  S.cav = [];\n  S.crowns = [];\n  for (const e of S.ev) {\n    const r = e.r, x0 = e.x;\n    if (e.te \u003c e.Tf) {\n      // Falling, faster and faster. The drop hangs from a thread out of the\n      // top; the thread stretches, breaks (later the thicker the essence) and\n      // its lower end balls up into a small bead that trails the drop.\n      const u = e.te / e.Tf, yb = -2 * r - 4 + (Y0 + 2 * r + 4) * (0.3 * u + 0.7 * u * u), cy = yb - r;\n      C.push([x0, cy, r, 1.4, 1]);\n      const tb = 0.45 + 0.42 * v;\n      if (u \u003c tb) K.push([x0, cy - 0.5 * r, x0, -6, 0.42 * r, 0.12 * r * (1 + v), 1.6, 1]);\n      else {\n        const f = (u - tb) / (1 - tb), sy = cy - r - 2 - (6 + 14 * v) * sqrt(f);\n        C.push([x0, sy, 0.32 * r, 1, 1]);\n        K.push([x0, -6, x0, -6 + (cy - 12 + 6) * max(0, 1 - 3 * f), 0.15 * r, 0.12 * r, 1, 1]);\n      }\n      continue;\n    }\n    const tau = (e.te - e.Tf) / slowOf(v);\n    // The drop sinks into the surface instead of vanishing at the touch: in a\n    // gel it takes 0.75 s and a thick neck joins it to the pool.\n    const ts = 0.15 + 0.6 * v;\n    if (tau \u003c ts) C.push([x0, Y0 - r + 2.2 * r * (tau / ts), r * (1 - 0.3 * (tau / ts)), 1.4 + 3 * v, 1]);\n    // Ripples: a packet from the impact and a smaller one when the jet falls,\n    // running out along the surface at 9 LEDs a second, 4 in a gel, about\n    // nine LEDs from crest to crest.\n    for (const [t0, a0] of [[0, 0.9 * (1 - 0.6 * v)], [TJ0 + TJ * 0.8, 0.45 * (1 - 0.7 * v)]]) {\n      const tt = tau - t0;\n      if (tt \u003c= 0) continue;\n      const c = 9 - 5 * v, A = (a0 * r * exp(-tt / 1.8)) / 3.6;\n      for (let x = 0; x \u003c W; x++) {\n        const s = abs(x + 0.5 - x0) - c * tt - 2, en = exp(-(s * s) / 60);\n        if (en > 0.01) rip[x] += A * en * sin(s * 0.7);\n      }\n    }\n    // The cavity: an air pocket pushed down under the surface.\n    if (tau \u003c TC) {\n      const Rc = r * (1.2 + 1.3 * (1 - exp(-tau / 0.18))) * (1 - 0.3 * v), Dc = r * 2.5 * (1 - 0.55 * v) * sin((PI * tau) / TC);\n      if (Dc > 0.3) S.cav.push([x0, Rc, Dc]);\n    }\n    // The crown: two thin walls leaning out, a translucent sheet between\n    // them, and fingers round the rim whose beads fly off at 0.42.\n    const hc = r * 3.1 * max(0, 1 - v / 0.7), R = r * (1.4 + 1.5 * (1 - exp(-min(tau, TCR) / 0.25)));\n    if (hc > 0.2 && tau \u003c TCR) {\n      const Hc = hc * Math.pow(sin((PI * tau) / TCR), 0.6), fl = 0.35 * Hc;\n      if (Hc > 0.5) {\n        for (let s = -1; s \u003c= 1; s += 2) K.push([x0 + s * R, Y0 + 1, x0 + s * (R + fl), Y0 - Hc, 0.75, 0.5, 1.2]);\n        S.crowns.push([x0, R, fl, Hc]);\n        if (tau \u003c 0.42 && v \u003c 0.5) {\n          const g = sm(tau / 0.3) * (1 - v / 0.5);\n          for (const [ph, lk] of e.fing) {\n            const cs = cos(ph), bx = x0 + (R + fl) * cs, lf = lk * 0.55 * hc * g, tx = bx + 0.35 * lf * cs, ty = Y0 - Hc - lf;\n            K.push([bx, Y0 - Hc + 0.5, tx, ty, 0.5, 0.3, 0.9]);\n            C.push([tx, ty, 0.26 * r, 0.9]);\n          }\n        }\n      }\n    }\n    if (tau >= 0.42 && v \u003c 0.5) {\n      // The beads thrown from the fingers fly out and up, then slow and drop back.\n      const t = tau - 0.42, Hp = hc * Math.pow(sin((PI * 0.42) / TCR), 0.6), Rp = r * (1.4 + 1.5 * (1 - exp(-0.42 / 0.25))) + 0.35 * Hp;\n      for (const [ph, lk, vy, vx] of e.fing) {\n        const cs = cos(ph), lf = lk * 0.55 * hc * (1 - v / 0.5);\n        const y = Y0 - Hp - lf - vy * t + 16 * t * t, x = x0 + (Rp + 0.35 * lf) * cs + vx * cs * t;\n        if (y \u003c Y0 + 2) C.push([x, y, 0.26 * r * (1 - v / 0.5), 0.9]);\n      }\n    }\n    // The jet: when the cavity snaps shut a column climbs out of the middle;\n    // in water its tip pinches off into a bead that flies on and falls back.\n    if (tau > TJ0) {\n      const s = (tau - TJ0) / TJ, hj = min(48, r * 8.5) * (1 - 0.8 * v), rb = 0.85 * r * (1 + 0.8 * v), pinch = v \u003c 0.55;\n      if (s \u003c 1) {\n        const Hj = hj * sin(PI * s);\n        const top = Y0 - Hj;\n        K.push([x0, Y0 + 3, x0, top, rb, (0.5 + 0.5 * v) * r, 2.5 + 2.5 * v]);\n        if (!pinch || s \u003c TPINCH) C.push([x0, top - 0.3 * r, (0.7 + 0.3 * v) * r, 1.3 + 2 * v]);\n      }\n      if (pinch && s >= TPINCH) {\n        const t = (s - TPINCH) * TJ, Hp = hj * sin(PI * TPINCH), y = Y0 - Hp - 0.9 * r - 7 * t + 18 * t * t;\n        if (y \u003c Y0 + 2) C.push([x0, y, 0.68 * r, 1.3]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  build(S);\n  const sdf = S.sdf, rip = S.rip, v = S.visc, deep = S.deep;\n  // The liquid's signed distance: negative inside. The pool's surface,\n  // minus the cavities, then every shape joined on smoothly. The falling drop\n  // is the concentrated essence, so where it is the colour is deep.\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i++) sdf[i] = Y0 + rip[x] - (y + 0.5);\n  deep.fill(0);\n  for (const [cx, R, D] of S.cav)\n    for (let y = Y0 - 2; y \u003c min(H, Y0 + D + 3); y++)\n      for (let x = max(0, floor(cx - R - 3)); x \u003c min(W, cx + R + 3); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - Y0) / D, da = (sqrt(dx * dx + dy * dy) - 1) * min(R, D), i = y * W + x;\n        sdf[i] = -smin(-sdf[i], da, 1.5);\n      }\n  for (const [ax, ay, bx, by, ra, rb, k, dp] of S.caps) {\n    const x0 = max(0, floor(min(ax, bx) - ra - k - 1)), x1 = min(W - 1, floor(max(ax, bx) + ra + k + 1));\n    const y0 = max(0, floor(min(ay, by) - ra - k - 1)), y1 = min(H - 1, floor(max(ay, by) + ra + k + 1));\n    const ex = bx - ax, ey = by - ay, ll = ex * ex + ey * ey || 1;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * ex + qy * ey) / ll, 0, 1);\n        const dd = Math.hypot(qx - ex * t, qy - ey * t) - (ra + (rb - ra) * t), i = y * W + x;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  for (const [cx, cy, r, k, dp] of S.circ) {\n    const x0 = max(0, floor(cx - r - k - 1)), x1 = min(W - 1, floor(cx + r + k + 1)), y0 = max(0, floor(cy - r - k - 1)), y1 = min(H - 1, floor(cy + r + k + 1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const i = y * W + x, dd = Math.hypot(x + 0.5 - cx, y + 0.5 - cy) - r;\n        sdf[i] = smin(sdf[i], dd, k);\n        if (dp) deep[i] = max(deep[i], cl(1 - dd, 0, 1));\n      }\n  }\n  // Palette: backdrop, essence, and the deep colour the drop carries. A\n  // thicker essence holds more colour. From rose through orange and gold to\n  // lime, hue -0.12 to 0.35, any of these at half brightness reads brown,\n  // khaki or olive on the LEDs, so there everything is lifted towards cream\n  // and paled: the backdrop to 200 of 255 or more with a shallow vignette, the\n  // pool to about 215, and the deep colour goes brighter than the pool\n  // instead of darker.\n  const pal = S.pal, h = S.hue + 0.52, hf = h - floor(h), key = hf + 7 * v;\n  if (S.palKey !== key) {\n    const hw = hf > 0.5 ? hf - 1 : hf, wm = sm((hw + 0.12) / 0.06) * (1 - sm((hw - 0.28) / 0.07));\n    hsv(h + 0.02, 0.14 - 0.06 * wm, 1, pal, 0);\n    hsv(h + 0.06 * (1 - wm), 0.4 - 0.3 * wm, 1, pal, 10);\n    hsv(h, (0.38 + 0.22 * v) * (1 - 0.5 * wm), 1, pal, 3);\n    hsv(h + 0.015, 0.92 - 0.3 * wm, 1, pal, 6);\n    pal[9] = wm;\n    S.palKey = key;\n  }\n  const wm = pal[9], dv = 0.46 + 0.5 * wm, dye = S.dye, T = S.T;\n  for (let y = 0, i = 0; y \u003c H; y++) {\n    const below = y + 0.5 - Y0;\n    for (let x = 0; x \u003c W; x++, i++) {\n      const d = sdf[i];\n      // The backdrop: a soft key light high in the middle, deepening towards\n      // the surface.\n      const gx = (x + 0.5 - 32) / 32, gy = (y - 14) / 46;\n      const gl = exp(-(gx * gx + gy * gy)), bv = min(1, 0.4 + 0.46 * gl + wm * (0.36 - 0.26 * gl));\n      let r = (pal[10] + (pal[0] - pal[10]) * gl) * bv, g = (pal[11] + (pal[1] - pal[11]) * gl) * bv, b = (pal[12] + (pal[2] - pal[12]) * gl) * bv;\n      // The crown's sheet: thin film between its walls, brighter at the two\n      // sides where the eye looks along it, and along the lip.\n      for (const [cx, R, fl, Hc] of S.crowns) {\n        const hgt = -below;\n        if (hgt \u003c -0.5 || hgt > Hc) continue;\n        const Rh = R + (fl * hgt) / Hc, u = abs(x + 0.5 - cx) / Rh;\n        if (u >= 1) continue;\n        const a = 0.16 + 0.3 * min(1, 1 / sqrt(1 - u * u) - 1) + 0.4 * exp(-((hgt - Hc + 0.6) ** 2));\n        r += (pal[3] * 0.92 - r) * a;\n        g += (pal[4] * 0.92 - g) * a;\n        b += (pal[5] * 0.92 - b) * a;\n      }\n      // The open surface, seen edge on: a gloss line along it, glinting white\n      // where a ripple tilts it towards the light. It is drawn across the\n      // boundary, so it does not flicker as the surface moves by a fraction.\n      const pd = Y0 + rip[x] - (y + 0.5), open = abs(d - pd) \u003c 0.02;\n      let spec = 0;\n      if (open && abs(pd) \u003c 2.5) {\n        const sl = ((x \u003c W - 1 ? rip[x + 1] : rip[x]) - (x > 0 ? rip[x - 1] : rip[x])) / 2, nd = (sl * LX - LY) / sqrt(1 + sl * sl);\n        spec = exp(-((pd + 0.3) ** 2) / 0.45) * (0.16 + 0.85 * Math.pow(max(0, nd), 12));\n      }\n      if (d \u003c 0.5) {\n        const cov = cl(0.5 - d, 0, 1);\n        // Inside the liquid: the essence, brighter just under the surface and\n        // deeper towards the bottom, slow shafts of light from the surface\n        // swaying through it, and the deep colour where the drop has gone.\n        const depth = cl(below / (H - Y0), 0, 1);\n        let lv = below \u003c 0 ? 0.88 + 0.09 * wm : 0.8 - 0.36 * depth + wm * (0.15 + 0.16 * depth);\n        if (below >= 0) {\n          const sx = x + 0.4 * below;\n          lv += 0.16 * (1 - depth) * (0.5 + 0.5 * sin(0.3 * sx - 0.7 * T + 1.3 * sin(0.11 * sx + 0.23 * T)));\n        }\n        lv = min(1, lv);\n        let lr = pal[3] * lv, lg = pal[4] * lv, lb = pal[5] * lv;\n        const da = max(deep[i] * 0.9, 1 - exp(-dye[i] * 0.9));\n        if (da > 0.003) {\n          lr += (pal[6] * dv - lr) * da;\n          lg += (pal[7] * dv - lg) * da;\n          lb += (pal[8] * dv - lb) * da;\n        }\n        let rim = 0, inner = 0;\n        if (!open) {\n          // Everything but the open surface: the normal from the distance\n          // field, a white highlight where it faces the light, a gloss on what\n          // faces up, a darker rim on the far side and light gathered inside\n          // the bottom of a bead.\n          const xm = x > 0 ? sdf[i - 1] : d, xp = x \u003c W - 1 ? sdf[i + 1] : d, ym = y > 0 ? sdf[i - W] : d, yp = y \u003c H - 1 ? sdf[i + W] : d;\n          let nx = xp - xm, ny = yp - ym;\n          const nl = Math.hypot(nx, ny) || 1;\n          nx /= nl;\n          ny /= nl;\n          const edge = cl(1 + d / 1.6, 0, 1), nd = nx * LX + ny * LY;\n          spec += edge * (0.9 * Math.pow(max(0, nd), 7) + 0.22 * max(0, -ny));\n          rim = edge * 0.35 * (1 - max(0, nd));\n          inner = cl((-d - 0.6) / 1.2, 0, 1) * cl((3 + d) / 1.5, 0, 1) * Math.pow(max(0, -nd), 2) * (below \u003c 1 ? 0.6 : 0);\n        }\n        lr = lr * (1 - rim) + inner * pal[3];\n        lg = lg * (1 - rim) + inner * pal[4];\n        lb = lb * (1 - rim) + inner * pal[5];\n        r += (lr - r) * cov;\n        g += (lg - g) * cov;\n        b += (lb - b) * cov;\n      }\n      r += spec;\n      g += spec;\n      b += spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Viscosity=0..1, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The essence's colour, all the way round the wheel from aqua at 0. From about 0.42 to 0.8, rose through orange and gold to lime, the backdrop and the pool are lifted towards cream and paled so they read rose, peach, champagne, butter or pale lime, never brown or olive, and the bloom glows brighter than the pool instead of darker."},{"name":"Speed","min":0.2,"max":3,"about":"How slow the film runs: at 2 a drop takes 1.4 s to fall, lands every 5.5 s, and its crown, cavity and jet are over in 2.4 s while the bloom sinks for about 3 s more; at 0.2 all of it is ten times slower."},{"name":"Viscosity","min":0,"max":1,"about":"Watery at 0: a crown of nine fingers throws its beads, and a jet eight and a half drop radii high pinches off a bead. Turned up, the fingers go by 0.5 and the crown by 0.7, the jet shortens to a round mound with no bead, the drop sinks in on a thick neck, the thread behind it stretches long, everything runs up to 2.3 times slower, drops come every 7.7 s, the pool holds more colour and the bloom sinks as a slow compact plume."},{"name":"Size","min":0,"max":1,"about":"The drop's radius, 3.4 LEDs at 0, 3.7 at the start and 7.6 at 1, and the crown, the cavity, the jet and the bloom with it; the jet stops at 48 LEDs."}],"start":[0,2,0,0.06],"measures":{"motion":0.0508,"detail":0.0106,"edges":0.2549,"complexity":1.4637,"coverage":1,"colour":0.1457,"drift":0.0297},"knobResponse":[0.2403,0.0329,0.0375,0.0322]},{"slug":"euclid-pulse","title":"Euclid Pulse","family":"rhythm","round":1,"note":"유클리드 리듬 셋이 고리 셋에서 함께 돌아요. 바깥 두 고리의 박은 고리 밖 제 조각을 따라 빛으로 퍼져서 세운 패널의 위아래 끝까지 닿아요. 처음은 E(3,8) 이에요.","idea":"Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.","buttons":"K3 tap turns the outer rhythm one step later.","code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","layer":{"id":"layer-euclid-pulse","type":"code","name":"euclid-pulse","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three rings around the colour wheel together."},{"name":"Tempo","min":80,"max":180,"about":"Beats per minute; the hand goes round once every four beats."},{"name":"Pulses","min":3,"max":13,"about":"Hits on the outer ring; the middle ring takes about half as many."},{"name":"Steps","min":8,"max":16,"about":"Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams."}],"start":[0,80,3,8],"measures":{"motion":0.5845,"detail":0.0325,"edges":0.366,"complexity":0.4817,"coverage":0.4069,"colour":0.1498,"drift":0.1272},"knobResponse":[0.0702,0.0945,0.0699,0.0495]},{"slug":"excavation","title":"Excavation","family":"construction","round":25,"note":"도심 빌딩 사이의 깊은 터파기를 세로로 잘라 봐요. 굴착기가 바닥에 쌓은 흙을 갠트리의 클램셸이 100줄 위 덤프트럭까지 끌어올리고, 바닥이 한 단 깊어지면 흙막이 벽 사이에 강철 버팀보가 한 단 더 용접돼 걸려요. K1 을 돌리면 데크 틈으로 떨어지던 햇빛 기둥이 기울다가 밤의 나트륨등으로 바뀌고, 누르면 경고등 뒤에 발파가 일어나 바닥에 먼지가 차요.","idea":"A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.","buttons":"K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.","code":"// ===== Patternflow pattern =====\n// Title:   Excavation\n// Family:  construction\n// Idea:    A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the strutted basement excavations dug between city buildings\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1\n//\n// Knob 1: Hour. Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit.\n// Knob 2: Speed. At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too.\n// Knob 3: Depth. How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot.\n// Knob 4: Water. Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades.\n// Buttons: K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, acos, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street, the pit's inside, the opening's edge, the heap, the truck bed, the last stage.\nconst [GL, PL, PR, OR, HX, TT, FIN] = [20, 10, 53, 33, 21, 43, 11];\nconst strutY = (k) => 18 + 9 * k, floorY = (k) => 23 + 9 * k;\nconst KP = [29, 41], EXP = [37, 41, 44, 41];\n// Fill, clay, sand and gravel, weathered rock, rock, and the rows they end at.\nconst STRATA = [[96, 84, 78], [186, 106, 58], [206, 186, 142], [154, 138, 94], [118, 126, 146]];\nconst BOT = [27, 45, 64, 101, 999];\nconst layer = (x, y) => {\n  let i = 0;\n  while (i \u003c 4 && y >= BOT[i] + 5 * (vn(x * 0.09, i * 5.3) - 0.5)) i++;\n  return i;\n};\n// Noon, afternoon, dusk, night: sky top, horizon, sun, ambient, buildings.\nconst KEYS = [\n  [50, 116, 222, 168, 206, 240, 1, 0.95, 0.84, 0.92, 0.95, 1, 150, 158, 176],\n  [56, 100, 196, 232, 200, 160, 1, 0.82, 0.56, 0.8, 0.75, 0.72, 140, 128, 132],\n  [34, 32, 90, 236, 110, 70, 0.9, 0.5, 0.26, 0.5, 0.42, 0.5, 80, 66, 90],\n  [5, 7, 26, 22, 26, 60, 0, 0, 0, 0.13, 0.14, 0.22, 30, 32, 48],\n];\nconst WIN = [255, 196, 120], CAP = [176, 172, 166], DECK = [124, 118, 110], ROAD = [74, 74, 80], RAIN = [190, 210, 240], FLOOD = [1, 0.97, 0.9];\nconst WALLS = [[8, [120, 86, 54]], [9, [96, 104, 118]], [54, [96, 104, 118]], [55, [120, 86, 54]]];\nconst YEL = [250, 178, 26], GAN = [244, 204, 50], GRAB = [246, 142, 30], STEEL = [150, 160, 178], HOSE = [50, 80, 170];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F32(N * 3), lm: F32(N * 3), so: F32(N * 3), bw: F32(N * 3), sn: F32(N * 3), st: F32(N), shf: F32(N), sh: F32(200), rs: F32(H), srf: F32(W), dig: F32(W),\n    t: 0, rt: 0, nk: -1, cx: 42, du: [], pa: [], sl: -1, bl: -1, dust: 0.3, arc: 0, tx: 0, tv: 0, tph: 0, load: 2, tgo: 0,\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, L = layer(x, y), hh = hash(x, y), pd = hypot(x - 3, y - 24.5), px = (x - PL) % 7;\n    // The ground in section, each layer with its grain; a water main and ducts.\n    let k = 0.86 + 0.22 * hh, c = STRATA[L];\n    if (L === 0 && hh > 0.88) c = [150, 146, 140];\n    else if (L === 1) k = 0.9 + 0.14 * vn(x * 0.4, y * 0.7);\n    else if (L === 2 && hash(x >> 1, y >> 1) \u003c 0.2) c = [136, 132, 128];\n    else if (L === 3 && abs(vn(x * 0.3, y * 0.3) - 0.5) \u003c 0.04) k = 0.55;\n    else if (L === 4 && (x + y * 0.7 + 5 * vn(x * 0.2, y * 0.1)) % 13 \u003c 0.9) k = 0.6;\n    if (pd \u003c 2.2) (c = pd > 1.2 ? [96, 120, 150] : [26, 30, 36]), (k = 1);\n    if (x > 57 && x \u003c 63 && (y === 23 || y === 24) && x & 1) (c = [230, 120, 40]), (k = 1);\n    // The far wall: H-piles and lagging, shotcrete and rock bolts lower down.\n    const q = 0.8 + 0.35 * hash(floor((y - GL) / 3), floor((x - PL) / 7)), r = 0.84 + 0.22 * vn(x * 0.3, y * 0.3);\n    const b = y \u003c GL + 2 ? CAP : !px ? [86, 92, 104] : y > 65 ? (px === 3 && y % 8 === 4 ? [60, 60, 66] : [136 * r, 132 * r, 126 * r]) : (y - GL) % 3 > 1 ? [44, 34, 28] : [132 * q, 94 * q, 60 * q];\n    for (let j = 0; j \u003c 3; j++) (P.so[o + j] = c[j] * k), (P.bw[o + j] = b[j]);\n    P.st[i] = sm(0.42, 0.72, vn(x * 0.8, y * 0.06));\n  }\n  skyline(P);\n}\n\nfunction skyline(P) {\n  P.bd = [];\n  for (let x = 0, w, s; x \u003c W; x += w) (s = !x || x > 50), (w = !x ? 8 : s ? W - x : min(4 + floor(rnd() * 5), 56 - x)), P.bd.push([x, x + w - 1, s ? floor(rnd() * 3) : 6 + floor(rnd() * 8), rnd(), s]);\n}\n\n// A new lot, dug to stage k, with the grab already on its way down.\nfunction lot(P, k) {\n  Object.assign(P, { k, fy: floorY(k) + 2.5, hv: 64, wx: -1, mat: -1, ex: 41, ei: 1, sc: 1, ec: 0, full: 0, E: { p: [7, -9, 0] }, C: { p: [HX, 30, 1] } });\n  P.dig.fill(0);\n  go(P.E, 0, 0.7, [12, -3, 0]), go(P.C, 1, (P.fy - 43) / 46, [HX, P.fy - 13, 1]);\n}\n// A move eases a pose to b; the step functions chain moves.\nconst go = (m, ph, dur, b) => Object.assign(m, { ph, t: 0, dur: max(0.15, dur), a: m.p.slice(), b });\nfunction tick(m, d) {\n  const u = sm(0, 1, (m.t += d) / m.dur);\n  for (let i = 0; i \u003c 3; i++) m.p[i] = mix(m.a[i], m.b[i], u);\n  return u;\n}\nconst heapH = (P) => min(13, sqrt(1.1 * P.hv));\nconst heapTop = (P) => P.fy - heapH(P);\nconst matCol = (P) => STRATA[layer(30, P.fy + 2)];\nfunction puff(P, x, y, n, a, s = 1) {\n  for (let i = 0; i \u003c n; i++) P.du.push([x + (rnd() - 0.5) * 6 * s, y - rnd() * 2 * s, (1.5 + rnd() * 2) * s, a, (rnd() - 0.5) * 3 * s, -(2 + rnd() * 3) * s]);\n  P.dust = min(1, P.dust + 0.05 * n * a);\n}\n\n// Excavator: dig, lift, swing, drop it on the heap, swing back.\nfunction eStep(P, E) {\n  const ph = E.ph, up = [7, -9, 0];\n  if (ph === 0) go(E, 1, 1, [8, 1.5, 0]);\n  else if (ph === 1) {\n    const bx = round(P.ex + 8);\n    for (let i = -3; i \u003c= 3; i++) if (bx + i \u003c= PR) P.dig[bx + i] = max(P.dig[bx + i], 2.2 * cos(i * 0.39));\n    (P.fy += 32 / 44), (P.ec = 1), puff(P, bx, P.fy, 1, 0.3);\n    if (P.fy >= floorY(P.k + 1)) (P.fy = floorY(++P.k)), P.k \u003c FIN ? (P.wx = PL) : (P.mat = 0);\n    go(E, 2, 0.6, up);\n  } else if (ph === 2) go(E, 3, 1, [7, -9, PI]);\n  else if (ph === 3) go(E, 4, 0.6, [cl(P.ex - HX - 3, 6, 15), -heapH(P) * 0.7 - 3, PI]);\n  else if (ph === 4) (P.hv += 32), (P.ec = 0), puff(P, P.ex - E.p[0], heapTop(P), 2, 0.3), go(E, 5, 1.1, up);\n  else if (P.wx >= 0 || P.k >= FIN || P.hv > 150) go(E, 7, 0.5, up);\n  else if (ph === 5 && ++P.sc % 3 === 0) (P.ex0 = P.ex), (P.exT = EXP[(P.ei = (P.ei + 1) % 4)]), go(E, 6, 1.4, up);\n  else go(E, 0, 0.7, [12, -3, 0]);\n}\n\n// Grab: down open, close, haul up, over the truck, open.\nfunction cStep(P, C) {\n  const ph = C.ph, top = heapTop(P), up = [HX, 7, 0];\n  if (ph === 0) P.hv > 14 ? go(C, 1, 0.3 + (top - 12 - C.p[1]) / 46, [HX, top - 5, 1]) : go(C, 0, 0.3, up);\n  else if (ph === 1) go(C, 2, 0.7, [HX, top - 4, 0]);\n  else if (ph === 2) {\n    const g = min(P.hv, 60);\n    (P.hv -= g), (P.full = g > 4), puff(P, HX, top, 2, 0.3), go(C, 3, 0.4 + (C.p[1] - 7) / 36, up);\n  } else if (ph \u003c 5) P.tph === 0 && P.load \u003c 3 ? go(C, 5, 1.2, [TT, 7, 0]) : go(C, 4, 0.3, up);\n  else if (ph === 5) {\n    if (P.full) {\n      (P.load++), (P.full = 0), puff(P, TT, 11, 3, 0.5), P.load > 2 && (P.tgo = 0.6);\n      for (let i = 0; i \u003c 10; i++) P.pa.push([TT + (rnd() - 0.5) * 6, 13, 0, 4, 0.3, 2]);\n    }\n    go(C, 6, 0.6, [TT, 7, 1]);\n  } else go(C, ph === 6 ? 7 : 0, ph === 6 ? 1.1 : 0.2, up);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nk = round(cl(k[2], 8, 10)), h = (P.h = cl(k[0], 0, 1)), wt = (P.wt = cl(k[3], 0, 1));\n  if (nk !== P.nk) lot(P, (P.nk = nk));\n  (P.t += d), (P.rt += rd), (P.cx += 3.6 * d);\n  Object.assign(P, { dayF: 1 - sm(0.55, 0.92, h), sunI: (1 - sm(0.6, 0.85, h)) * (1 - 0.9 * sm(0.3, 0.85, wt)), slope: 0.12 + 0.95 * sm(0, 0.8, h), lampK: sm(0.45, 0.8, h) });\n  // K1 tap: the warning lamp, then the blast at the face.\n  if (input.btnPressed && input.btnPressed[0] && P.bl \u003c 0) P.bl = 0;\n  if (P.bl >= 0 && (P.bl += rd) >= 0.8 && !P.fired) {\n    P.fired = 1;\n    for (let i = 0; i \u003c 26; i++) P.pa.push([40 + (rnd() - 0.5) * 10, P.fy - 1, (rnd() - 0.5) * 30, -10 - rnd() * 22, 1.6, 2]);\n    for (let i = PL; i \u003c= PR; i++) P.dig[i] += 1.4 * exp(-(((i - 40) / 9) ** 2));\n    puff(P, 40, P.fy, 9, 1.2, 2), (P.fy += 0.8), (P.hv += 30), (P.dust = 1);\n  }\n  if (P.bl > 1.5) (P.bl = -1), (P.fired = 0);\n  const { E, C } = P, u = tick(E, d);\n  if (E.ph === 6) {\n    const nx = mix(P.ex0, P.exT, u);\n    (P.trk += nx - P.ex), (P.ex = nx);\n  }\n  if (u >= 1) eStep(P, E);\n  if (tick(C, d) >= 1) cStep(P, C);\n  if (P.full && C.ph === 3 && rnd() \u003c 4 * d) P.pa.push([C.p[0] + (rnd() - 0.5) * 5, C.p[1] + 7, 0, 2, 2, 2]);\n  // A truck leaves with three grabs and an empty one backs in.\n  if (P.tph === 0 && P.load > 2 && (P.tgo -= d) \u003c= 0) (P.tph = 1), (P.tv = 0);\n  if (P.tph === 1 && (P.tx += (P.tv = min(18, P.tv + 10 * d)) * d) > 30) (P.tph = 2), (P.load = 0);\n  if (P.tph === 2 && (P.tx -= (1.5 + 0.8 * P.tx) * d) \u003c= 0) (P.tx = 0), (P.tph = 0);\n  // The new strut is welded in from wall to wall.\n  if (P.wx >= 0) {\n    P.arc = rnd() \u003c 0.85 ? 0.5 + 0.5 * rnd() : 0;\n    if (rnd() \u003c 14 * d) P.pa.push([P.wx, strutY(P.k) + 2, (rnd() - 0.5) * 10, -2 - rnd() * 4, 0.6 + rnd() * 0.5, 0]);\n    if ((P.wx += 7 * d) > PR + 1) (P.wx = -1), (P.arc = 0);\n  }\n  // At the bottom: the blinding concrete, then on to the next lot.\n  if (P.k >= FIN && P.hv \u003c 15 && (P.mat += d / 6) > 1.4 && P.sl \u003c 0) (P.snap = 1), (P.sl = 0), lot(P, P.nk), skyline(P);\n  if (P.sl >= 0 && (P.sl += rd / 2.2) >= 1) P.sl = -1;\n  // Seepage drips below the water table.\n  const wtY = 78 - 34 * wt, e = exp(-0.25 * d);\n  if (P.fy > wtY + 6 && rnd() \u003c 6 * wt * d) P.pa.push([PL + 1 + rnd() * 42, wtY + rnd() * (P.fy - wtY - 5), 0, 0, 3, 1]);\n  for (let i = PL; i \u003c= PR; i++) P.dig[i] *= e;\n  P.dust = max(0.1, P.dust * e);\n  P.du = P.du.filter((p) => ((p[0] += p[4] * d), (p[1] += p[5] * d), (p[2] += 2.2 * d), (p[3] -= 0.22 * d) > 0));\n  P.pa = P.pa.filter((p) => ((p[3] += 40 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), (p[4] -= d) > 0 && p[1] \u003c (p[0] >= PL && p[0] \u003c= PR ? P.fy : H)));\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.3 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\nconst cloudA = (P, x, y) => cl((0.6 * vn((x + P.cx) * 0.07, y * 0.18) + 0.4 * vn((x + P.cx) * 0.19, y * 0.4 + 5) - 0.6 + 0.3 * P.wt) * 5, 0, 1);\n\nfunction lamp(x0, y0, r2, k, c) {\n  const R = Math.ceil(sqrt(r2 * 4.6)), gx = [];\n  for (let x = max(0, x0 - R); x \u003c= min(W - 1, x0 + R); x++) gx.push(x, k * exp(-((x - x0) ** 2) / r2));\n  for (let y = max(0, y0 - R); y \u003c= min(H - 1, y0 + R); y++)\n    for (let i = 0, g = exp(-((y - y0) ** 2) / r2); i \u003c gx.length; i += 2) for (let j = 0, o = (y * W + gx[i]) * 3; j \u003c 3; j++) LM[o + j] += c[j] * gx[i + 1] * g;\n}\n\n// Daylight with cloud shadows, the shaft of sun, the lamps.\nfunction light(P, K) {\n  const { sunI: sI, slope: s, rs, sh, shf, k: pk, lampK: nl } = P, ks = min(pk, FIN - 1);\n  for (let i = 0; i \u003c 200; i++) sh[i] = 1 - 0.85 * cloudA(P, i - 96, 7);\n  rs.fill(1);\n  for (let j = 1, y; j \u003c= ks; j++) (y = strutY(j)), (rs[y + 2] = rs[y + 4] = 0.6), (rs[y + 3] = 0.4);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, x0 = x - s * (y - GL), out = y \u003c GL + 2;\n    const a = out ? 1 : (0.62 - 0.003 * (y - GL)) * (x > OR ? 0.75 : 1);\n    const l = out ? 0.5 * sI * sh[x + 80] : sI > 0 && x0 > PL - 1.5 && x0 \u003c OR + 1.5 ? sI * sm(PL - 1.5, PL + 1, x0) * (1 - sm(OR - 1, OR + 1.5, x0)) * sh[floor(x0) + 80] * rs[y] * (1 - 0.0025 * (y - GL)) : 0;\n    shf[i] = out ? 0 : l;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[9 + c] * a + K[6 + c] * l * 0.95;\n  }\n  // Floods on the lowest strut; sodium lamps after dark.\n  lamp(17, strutY(ks) + 2, 260, 0.7, FLOOD), lamp(47, strutY(ks) + 2, 260, 0.7, FLOOD);\n  if (nl > 0) for (let j = 1; j \u003c= ks; j++) lamp(j & 1 ? 12 : 51, strutY(j) + 2, 60, 1.3 * nl, [1, 0.62, 0.24]);\n  if (P.arc > 0) lamp(round(P.wx), strutY(pk) + 1, 70, 1.4 * P.arc, [0.7, 0.85, 1]);\n  if (P.bl > 0.8) lamp(40, round(P.fy) - 3, 260, 1.8 * (1 - sm(0.8, 1.2, P.bl)), [1, 0.8, 0.5]);\n  const tx = P.C.p[0];\n  if (nl > 0)\n    for (let y = 8; y \u003c min(H, P.fy + 2); y++)\n      for (let hw = 1.5 + 0.16 * (y - 7), x = max(0, floor(tx - hw)); x \u003c= min(W - 1, tx + hw); x++)\n        for (let c = 0, e = ((0.9 * nl) / (1 + (y - 7) / 70)) * (1 - abs(x - tx) / hw); c \u003c 3; c++) LM[(y * W + x) * 3 + c] += e * (c > 1 ? 0.92 : 1);\n}\n\nfunction sky(P, K) {\n  const ov = 0.75 * sm(0.2, 1, P.wt), day = P.dayF, dk = 0.3 + 0.7 * day, cc = [0, 1, 2].map((c) => mix(mix(K[3 + c], 255, 0.55) * dk, 130 * dk, ov));\n  for (let i = 0; i \u003c GL * W; i++) {\n    const x = i & 63, y = i >> 6, u = y / (GL - 1), a = cloudA(P, x, y) * (0.9 - 0.4 * u);\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = mix(mix(mix(K[c], K[3 + c], u * u), 120 * (0.25 + 0.75 * day), ov), cc[c], a);\n  }\n  // The street's buildings, the two beside the pit tall.\n  for (const [x0, x1, top, v, side] of P.bd)\n    for (let y = top; y \u003c GL; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const win = (x - x0) % 3 === 1 && (y - top) % 3 === 1 && x \u003c x1, lit = hash(x * 7, y + floor(v * 99)) \u003c 0.45 && day \u003c 0.7;\n        for (let c = 0, b; c \u003c 3; c++) (b = K[12 + c] * (0.78 + 0.3 * v) * (x === x0 ? 0.8 : 1)), (b = win ? (lit ? WIN[c] * (1 - day) : b * 0.55 + 18 * c * day) : b), (F[(y * W + x) * 3 + c] = side ? b : mix(b, K[3 + c], 0.3));\n      }\n}\n\nfunction ground(P) {\n  const { so, bw, srf, wt, st, fy } = P, wtY = 78 - 34 * wt, sec = 0.42 + 0.52 * P.dayF, mc = matCol(P), hh = heapH(P), kc = STEEL.map((v) => v * 0.5 * sec);\n  for (let x = PL; x \u003c= PR; x++) srf[x] = fy + P.dig[x] + 0.6 * (hash(x, 7) - 0.5);\n  for (let i = GL * W; i \u003c N; i++) {\n    // Pavement, deck and caps; far wall and heap; the ground in section.\n    const x = i & 63, y = i >> 6, o = i * 3, pit = x >= PL && x \u003c= PR;\n    let A = so, a = o, L = 0, k = sec;\n    if (y \u003c GL + 2 && !(pit && x \u003c= OR)) (A = (x > 6 && x \u003c PL) || (x > PR && x \u003c 57) ? CAP : x > OR && x \u003c 56 ? DECK : ROAD), (a = 0), (L = 1), (k = y === GL ? 1.18 : A === DECK && (x + y) & 1 ? 0.86 : 1);\n    else if (pit && y \u003c srf[x]) (L = 1), y >= srf[x] - max(0, hh - abs(x - HX) * 1.1) ? ((A = mc), (a = 0), (k = 0.85 + 0.3 * hash(x, y))) : ((A = bw), (k = y > wtY ? 1 - 0.5 * wt * st[i] : 1));\n    else if (pit && y \u003c srf[x] + 1) (L = 1), (k = 1.15);\n    else if (!pit && y > wtY + 4) k *= 1 - 0.12 * wt;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = A[a + c] * k * (L ? LM[o + c] : 1);\n  }\n  // Walls and king posts down to their toes; the deck's beams.\n  for (let y = GL + 2; y \u003c 126; y++) {\n    for (const [x, c] of WALLS) for (let i = 0; i \u003c 3; i++) F[(y * W + x) * 3 + i] = c[i] * sec;\n    for (const x of KP) for (let i = 0; i \u003c 2; i++) y \u003c srf[x] ? sur(x + i, y, ...STEEL, 0.62 + 0.23 * i) : put(x + i, y, kc);\n  }\n  for (let x = OR + 1; x \u003c= PR; x++) sur(x, GL + 2, 70, 74, 84), sur(x, GL + 3, 90, 94, 104, x % 6 ? 0.7 : 1.2);\n  // Struts with wales and jacks.\n  for (let j = 1; j \u003c= min(P.k, FIN - 1); j++) {\n    const y = strutY(j), end = j === P.k && P.wx >= 0 ? P.wx : PR;\n    for (let x = PL; x \u003c= end; x++) sur(x, y, ...STEEL, x % 11 === 3 ? 0.8 : 1.25), sur(x, y + 1, ...STEEL, 0.75);\n    for (let i = -1; i \u003c= 2; i++) {\n      for (const x of [PL, PL + 1, PR - 1, PR]) sur(x, y + i, 80, 84, 96);\n      if (end >= PR) for (let x = 46; x \u003c= 48; x++) surc(x, y + i, YEL, i \u003c 0 || i > 1 ? 0.7 : 1);\n    }\n  }\n  // Blinding concrete on the last floor.\n  const me = PL + min(1, P.mat) * (P.ex - PL - 8);\n  if (P.mat > 0) for (let x = PL; x \u003c= me; x++) for (let j = 0, o; j \u003c 3; j++) (o = at(x, srf[x] - j)), put(x, srf[x] - j, [0, 1, 2].map((c) => 200 * max(0.55, LM[o + c]) * (j ? 0.9 : 1.1)));\n  if (P.mat > 0 && P.mat \u003c 1) line(30, GL + 1, me, fy - 3, [96, 96, 104]);\n  // The pump's pool, and its hose up the wall to the tank.\n  for (let x = 45; x \u003c= PR; x++)\n    for (let y = round(fy - 0.4 - 2.6 * wt), g; y \u003c srf[x]; y++) (g = 0.5 + 0.5 * sin(x * 1.3 + P.t * 5 + y * 2)), sur(x, y, 60 + 60 * g, 96 + 60 * g, 132 + 50 * g);\n  for (let j = 1; j \u003c= 2; j++) sur(51, fy - j, ...HOSE), sur(52, fy - j, ...HOSE);\n  for (let y = fy - 2; y > GL - 2; y--) surc(PR, y, HOSE);\n  for (let x = PR; x \u003c 60; x++) surc(x, GL - 2, HOSE);\n  for (let x = 59; x \u003c= 62; x++) for (let y = 16; y \u003c GL; y++) sur(x, y, 120, 140, 160, y === 16 ? 1.2 : 0.8);\n  if (wt > 0.03) for (let j = 0; j \u003c 2; j++) put(59 + j, GL - 2 + j, RAIN, min(1, wt * 6) * (0.5 + 0.5 * sin(P.t * 20 + j)));\n}\n\nfunction excavator(P) {\n  const ex = P.ex, gy = round(P.fy), [bu, bv, ph] = P.E.p, f = cos(ph), X = (u) => ex + u * f, hw = 4.5 * abs(f) + 3.2 * abs(sin(ph)), nl = P.lampK;\n  for (let i = -6; i \u003c= 6; i++) for (let j = 1; j \u003c= 3; j++) (abs(i) \u003c 6 || j === 2) && sur(ex + i, gy - j, ...(j !== 2 && (i + floor(P.trk)) & 1 ? [92, 92, 96] : [46, 46, 50]));\n  for (let i = -3; i \u003c= 3; i++) sur(ex + i, gy - 4, 52, 50, 48);\n  for (let j = 5; j \u003c= 7; j++) for (let x = round(ex - hw); x \u003c= round(ex + hw); x++) surc(x, gy - j, YEL, j === 5 ? 0.7 : (x - ex) * f \u003c -2.5 ? 0.82 : 1);\n  const ca = round(min(X(0.5), X(3.5))), cb = max(ca + 1, round(max(X(0.5), X(3.5))));\n  for (let j = 8; j \u003c= 11; j++) for (let x = ca; x \u003c= cb; x++) j === 11 || x === (f >= 0 ? ca : cb) ? surc(x, gy - j, YEL) : (sur(x, gy - j, 110, 150, 180, 0.9), add(x, gy - j, WIN, 0.5 * nl));\n  // Boom and arm reach the bucket by two-link IK.\n  const [pu, pv, L1, L2] = [3, -6, 9, 8.5];\n  let tu = bu - pu, tv = bv - pv;\n  const dd = hypot(tu, tv) || 1, dc = cl(dd, 2, L1 + L2 - 0.05);\n  (tu *= dc / dd), (tv *= dc / dd);\n  const t1 = atan2(tv, tu) - acos(cl((L1 * L1 + dc * dc - L2 * L2) / (2 * L1 * dc), -1, 1)), eu = pu + L1 * cos(t1), ev = pv + L1 * sin(t1), bx = X(pu + tu), by = gy + pv + tv;\n  line(X(pu), gy + pv, X(eu), gy + ev, YEL), line(X(pu), gy + pv + 1, X(eu), gy + ev + 1, YEL, 0.75);\n  line(X(4), gy - 5, X(pu + (eu - pu) * 0.55), gy + pv + (ev - pv) * 0.55 + 1, [150, 150, 156]);\n  line(X(eu), gy + ev, bx, by, YEL, 0.9);\n  for (let i = 0; i \u003c= 2; i++) sur(bx - i * f, by, 74, 74, 80), sur(bx - i * f, by + 1, 74, 74, 80, 0.8), P.ec && surc(bx - i * f, by - 1, matCol(P), 1.1);\n  add(X(4.5), gy - 9, FLOOD, 255 * nl);\n}\n\n// A worker in hi-vis, feet on row y; a headlamp after dusk.\nfunction man(P, x, y, arm) {\n  sur(x, y, 40, 48, 90), sur(x, y - 1, 255, 128, 20), sur(x, y - 2, 255, 255, 240), arm && sur(x + 1, y - 2 - (arm > 0.5), 255, 128, 20);\n  add(x, y - 2, FLOOD, 200 * P.lampK);\n}\n\nfunction grab(P) {\n  const [tx, by, op] = P.C.p, X = round(tx), Y = round(by), HW = [3, 3.4, 3.4, 3, 2];\n  for (let y = 7; y \u003c Y; y++) sur(X - 1, y, 200, 200, 210), sur(X + 1, y, 200, 200, 210);\n  for (let i = -1; i \u003c= 1; i++) surc(X + i, Y, GAN, 1.2), surc(X + i, Y + 1, GAN, 0.85);\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = -6, a; i \u003c= 6; i++) (a = abs(i)) >= op * (0.4 + 0.9 * j) - 0.01 && a \u003c= HW[j] + op * 0.9 * j && (j === 4 || (op \u003c 0.3 && !i) ? sur(X + i, Y + 2 + j, 96, 100, 110) : surc(X + i, Y + 2 + j, GRAB, j ? 1 : 1.2));\n  if (P.full && op \u003c 0.5) for (let i = -2; i \u003c= 2; i++) surc(X + i, Y + 2, matCol(P), 1.2);\n  for (let i = -3; i \u003c= 3; i++) sur(X + i, 5, 70, 74, 84), surc(X + i, 6, GAN, abs(i) \u003c 2 ? 0.6 : 1);\n}\n\nfunction gantry(P) {\n  for (let y = 2; y \u003c GL; y++) for (const x of [4, 58]) surc(x, y, GAN), (y + (x >> 2)) % 3 && surc(x + 1, y, GAN, 0.7);\n  for (let x = 3; x \u003c= 60; x++) surc(x, 2, GAN, 1.1), surc(x, 4, GAN), (x + 1) % 3 || surc(x, 3, GAN, 0.8);\n  put(32, 1, P.rt % 1.4 \u003c 0.7 ? [255, 40, 30] : [90, 16, 14]);\n  // The railing, and the signalman at the edge.\n  for (let x = 8; x \u003c= OR; x++) sur(x, 17, ...((x >> 1) & 1 ? [230, 60, 50] : [236, 236, 236])), x % 6 === 2 && (sur(x, 18, 200, 200, 200), sur(x, 19, 200, 200, 200));\n  man(P, 35, GL - 1, P.C.ph \u003c 3 ? (P.rt * 2) % 1 : 0);\n}\n\nfunction truck(P) {\n  const o = round(P.tx), mc = matCol(P), hL = [0, 1.6, 2.7, 3.7][min(3, P.load)];\n  if (o > 30) return;\n  for (let x = 37; x \u003c= 50; x++)\n    for (let y = 9; y \u003c= 16; y++)\n      y > 12 ? sur(x + o, y, 196, 56, 44, y === 13 ? 1.25 : (x - 37) % 4 ? 1 : 0.75) : y > 12 - hL * (1 - ((x - 43.5) / 7) ** 2) && surc(x + o, y, mc, 0.85 + 0.3 * hash(x, y));\n  for (let x = 51; x \u003c= 56; x++) for (let y = 10; y \u003c= 16; y++) (y > 10 || x > 51) && (y \u003c 14 && y > 10 && x > 52 ? sur(x + o, y, 60, 90, 120) : sur(x + o, y, 50, 96, 200));\n  for (let x = 37; x \u003c= 56; x++) sur(x + o, 17, 50, 50, 54);\n  for (const x of [39, 43, 53]) sur(x + o, 18, 30, 30, 34), sur(x + o + 1, 18, 30, 30, 34), sur(x + o, 19, 120, 120, 126), sur(x + o + 1, 19, 30, 30, 34);\n  add(57 + o, 15, FLOOD, 255 * P.lampK), add(36 + o, 16, [255, 30, 20], P.lampK);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  if (P.snap) P.sn.set(F), (P.snap = 0);\n  const hh = P.h * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0)), mc = matCol(P), fy = round(P.fy);\n  light(P, K), sky(P, K), gantry(P), ground(P), excavator(P);\n  man(P, 12, round(P.srf[12] - max(0, heapH(P) - 9.9)) - 1, 0);\n  if (P.wx >= 0) man(P, round(P.wx) - 1, fy - 1, 1);\n  truck(P), grab(P);\n  // Sparks, drips, spoil and dust.\n  for (const [x, y, , , l, k] of P.pa) k ? (k > 1 ? surc(x, y, mc, 1.3) : put(x, y, [170, 210, 255], 0.8)) : put(x, y, [255, 200, 90], min(1, l * 2));\n  for (const [px, py, r, a] of P.du) {\n    const o0 = at(cl(px, 0, 63), cl(py, 0, 127)), R = Math.ceil(r), pc = mc.map((v, c) => mix(v, 210, 0.5) * min(1.3, 0.3 + LM[o0 + c]));\n    for (let y = round(py) - R; y \u003c= py + R; y++)\n      for (let x = round(px) - R, q; x \u003c= px + R; x++) (q = 1 - ((x - px) ** 2 + (y - py) ** 2) / (r * r)) > 0 && put(x, y, pc, min(1, a * q * q * 0.9));\n  }\n  // Haze in the shaft, thicker with dust.\n  for (let i = 0, hz = 8 + 30 * P.dust; i \u003c N; i++) if (P.shf[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += K[6 + c] * P.shf[i] * hz;\n  if (P.arc > 0) add(round(P.wx), strutY(P.k) + 1, FLOOD, 500);\n  if (P.bl >= 0 && P.bl \u003c 0.8 && P.bl % 0.3 \u003c 0.15) put(34, GL - 4, [255, 170, 30]), add(34, GL - 3, [255, 140, 20], 0.6);\n  // Rain past halfway, not under the deck.\n  for (let i = 0, rain = sm(0.45, 1, P.wt); i \u003c 160 * rain; i++) {\n    const y = ((hash(i, 2) * 150 + P.t * 70) % 150) - 10, x = (hash(i, 1) * 80 + y * 0.25) % 64;\n    if (x \u003c= OR + 0.5 || x >= PR + 1 || y \u003c= GL + 1) for (let j = 0; j \u003c 3; j++) put(x - j * 0.25, y - j, RAIN, 0.6 * (1 - j / 3) * (0.4 + 0.6 * P.dayF));\n  }\n  const off = P.sl >= 0 ? round(64 * sm(0, 1, P.sl)) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const xs = x + off, B = xs \u003c W && off ? P.sn : F, o = (y * W + (xs % W)) * 3;\n      display.setPixel(x, y, min(255, B[o]) | 0, min(255, B[o + 1]) | 0, min(255, B[o + 2]) | 0);\n    }\n}\n","layer":{"id":"layer-excavation","type":"code","name":"excavation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Excavation\n// Family:  construction\n// Idea:    A city excavation cut open in section: an excavator on the floor of a strutted pit heaps up spoil, a clamshell grab on a gantry hauls it a hundred rows up to dump trucks on the street, and each stage deeper a new tier of steel struts is welded in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the strutted basement excavations dug between city buildings\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1\n//\n// Knob 1: Hour. Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit.\n// Knob 2: Speed. At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too.\n// Knob 3: Depth. How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot.\n// Knob 4: Water. Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades.\n// Buttons: K1 tap sounds the warning and fires a small blast at the face; dust fills the bottom of the pit and the floor drops.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, acos, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street, the pit's inside, the opening's edge, the heap, the truck bed, the last stage.\nconst [GL, PL, PR, OR, HX, TT, FIN] = [20, 10, 53, 33, 21, 43, 11];\nconst strutY = (k) => 18 + 9 * k, floorY = (k) => 23 + 9 * k;\nconst KP = [29, 41], EXP = [37, 41, 44, 41];\n// Fill, clay, sand and gravel, weathered rock, rock, and the rows they end at.\nconst STRATA = [[96, 84, 78], [186, 106, 58], [206, 186, 142], [154, 138, 94], [118, 126, 146]];\nconst BOT = [27, 45, 64, 101, 999];\nconst layer = (x, y) => {\n  let i = 0;\n  while (i \u003c 4 && y >= BOT[i] + 5 * (vn(x * 0.09, i * 5.3) - 0.5)) i++;\n  return i;\n};\n// Noon, afternoon, dusk, night: sky top, horizon, sun, ambient, buildings.\nconst KEYS = [\n  [50, 116, 222, 168, 206, 240, 1, 0.95, 0.84, 0.92, 0.95, 1, 150, 158, 176],\n  [56, 100, 196, 232, 200, 160, 1, 0.82, 0.56, 0.8, 0.75, 0.72, 140, 128, 132],\n  [34, 32, 90, 236, 110, 70, 0.9, 0.5, 0.26, 0.5, 0.42, 0.5, 80, 66, 90],\n  [5, 7, 26, 22, 26, 60, 0, 0, 0, 0.13, 0.14, 0.22, 30, 32, 48],\n];\nconst WIN = [255, 196, 120], CAP = [176, 172, 166], DECK = [124, 118, 110], ROAD = [74, 74, 80], RAIN = [190, 210, 240], FLOOD = [1, 0.97, 0.9];\nconst WALLS = [[8, [120, 86, 54]], [9, [96, 104, 118]], [54, [96, 104, 118]], [55, [120, 86, 54]]];\nconst YEL = [250, 178, 26], GAN = [244, 204, 50], GRAB = [246, 142, 30], STEEL = [150, 160, 178], HOSE = [50, 80, 170];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F32(N * 3), lm: F32(N * 3), so: F32(N * 3), bw: F32(N * 3), sn: F32(N * 3), st: F32(N), shf: F32(N), sh: F32(200), rs: F32(H), srf: F32(W), dig: F32(W),\n    t: 0, rt: 0, nk: -1, cx: 42, du: [], pa: [], sl: -1, bl: -1, dust: 0.3, arc: 0, tx: 0, tv: 0, tph: 0, load: 2, tgo: 0,\n  });\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, L = layer(x, y), hh = hash(x, y), pd = hypot(x - 3, y - 24.5), px = (x - PL) % 7;\n    // The ground in section, each layer with its grain; a water main and ducts.\n    let k = 0.86 + 0.22 * hh, c = STRATA[L];\n    if (L === 0 && hh > 0.88) c = [150, 146, 140];\n    else if (L === 1) k = 0.9 + 0.14 * vn(x * 0.4, y * 0.7);\n    else if (L === 2 && hash(x >> 1, y >> 1) \u003c 0.2) c = [136, 132, 128];\n    else if (L === 3 && abs(vn(x * 0.3, y * 0.3) - 0.5) \u003c 0.04) k = 0.55;\n    else if (L === 4 && (x + y * 0.7 + 5 * vn(x * 0.2, y * 0.1)) % 13 \u003c 0.9) k = 0.6;\n    if (pd \u003c 2.2) (c = pd > 1.2 ? [96, 120, 150] : [26, 30, 36]), (k = 1);\n    if (x > 57 && x \u003c 63 && (y === 23 || y === 24) && x & 1) (c = [230, 120, 40]), (k = 1);\n    // The far wall: H-piles and lagging, shotcrete and rock bolts lower down.\n    const q = 0.8 + 0.35 * hash(floor((y - GL) / 3), floor((x - PL) / 7)), r = 0.84 + 0.22 * vn(x * 0.3, y * 0.3);\n    const b = y \u003c GL + 2 ? CAP : !px ? [86, 92, 104] : y > 65 ? (px === 3 && y % 8 === 4 ? [60, 60, 66] : [136 * r, 132 * r, 126 * r]) : (y - GL) % 3 > 1 ? [44, 34, 28] : [132 * q, 94 * q, 60 * q];\n    for (let j = 0; j \u003c 3; j++) (P.so[o + j] = c[j] * k), (P.bw[o + j] = b[j]);\n    P.st[i] = sm(0.42, 0.72, vn(x * 0.8, y * 0.06));\n  }\n  skyline(P);\n}\n\nfunction skyline(P) {\n  P.bd = [];\n  for (let x = 0, w, s; x \u003c W; x += w) (s = !x || x > 50), (w = !x ? 8 : s ? W - x : min(4 + floor(rnd() * 5), 56 - x)), P.bd.push([x, x + w - 1, s ? floor(rnd() * 3) : 6 + floor(rnd() * 8), rnd(), s]);\n}\n\n// A new lot, dug to stage k, with the grab already on its way down.\nfunction lot(P, k) {\n  Object.assign(P, { k, fy: floorY(k) + 2.5, hv: 64, wx: -1, mat: -1, ex: 41, ei: 1, sc: 1, ec: 0, full: 0, E: { p: [7, -9, 0] }, C: { p: [HX, 30, 1] } });\n  P.dig.fill(0);\n  go(P.E, 0, 0.7, [12, -3, 0]), go(P.C, 1, (P.fy - 43) / 46, [HX, P.fy - 13, 1]);\n}\n// A move eases a pose to b; the step functions chain moves.\nconst go = (m, ph, dur, b) => Object.assign(m, { ph, t: 0, dur: max(0.15, dur), a: m.p.slice(), b });\nfunction tick(m, d) {\n  const u = sm(0, 1, (m.t += d) / m.dur);\n  for (let i = 0; i \u003c 3; i++) m.p[i] = mix(m.a[i], m.b[i], u);\n  return u;\n}\nconst heapH = (P) => min(13, sqrt(1.1 * P.hv));\nconst heapTop = (P) => P.fy - heapH(P);\nconst matCol = (P) => STRATA[layer(30, P.fy + 2)];\nfunction puff(P, x, y, n, a, s = 1) {\n  for (let i = 0; i \u003c n; i++) P.du.push([x + (rnd() - 0.5) * 6 * s, y - rnd() * 2 * s, (1.5 + rnd() * 2) * s, a, (rnd() - 0.5) * 3 * s, -(2 + rnd() * 3) * s]);\n  P.dust = min(1, P.dust + 0.05 * n * a);\n}\n\n// Excavator: dig, lift, swing, drop it on the heap, swing back.\nfunction eStep(P, E) {\n  const ph = E.ph, up = [7, -9, 0];\n  if (ph === 0) go(E, 1, 1, [8, 1.5, 0]);\n  else if (ph === 1) {\n    const bx = round(P.ex + 8);\n    for (let i = -3; i \u003c= 3; i++) if (bx + i \u003c= PR) P.dig[bx + i] = max(P.dig[bx + i], 2.2 * cos(i * 0.39));\n    (P.fy += 32 / 44), (P.ec = 1), puff(P, bx, P.fy, 1, 0.3);\n    if (P.fy >= floorY(P.k + 1)) (P.fy = floorY(++P.k)), P.k \u003c FIN ? (P.wx = PL) : (P.mat = 0);\n    go(E, 2, 0.6, up);\n  } else if (ph === 2) go(E, 3, 1, [7, -9, PI]);\n  else if (ph === 3) go(E, 4, 0.6, [cl(P.ex - HX - 3, 6, 15), -heapH(P) * 0.7 - 3, PI]);\n  else if (ph === 4) (P.hv += 32), (P.ec = 0), puff(P, P.ex - E.p[0], heapTop(P), 2, 0.3), go(E, 5, 1.1, up);\n  else if (P.wx >= 0 || P.k >= FIN || P.hv > 150) go(E, 7, 0.5, up);\n  else if (ph === 5 && ++P.sc % 3 === 0) (P.ex0 = P.ex), (P.exT = EXP[(P.ei = (P.ei + 1) % 4)]), go(E, 6, 1.4, up);\n  else go(E, 0, 0.7, [12, -3, 0]);\n}\n\n// Grab: down open, close, haul up, over the truck, open.\nfunction cStep(P, C) {\n  const ph = C.ph, top = heapTop(P), up = [HX, 7, 0];\n  if (ph === 0) P.hv > 14 ? go(C, 1, 0.3 + (top - 12 - C.p[1]) / 46, [HX, top - 5, 1]) : go(C, 0, 0.3, up);\n  else if (ph === 1) go(C, 2, 0.7, [HX, top - 4, 0]);\n  else if (ph === 2) {\n    const g = min(P.hv, 60);\n    (P.hv -= g), (P.full = g > 4), puff(P, HX, top, 2, 0.3), go(C, 3, 0.4 + (C.p[1] - 7) / 36, up);\n  } else if (ph \u003c 5) P.tph === 0 && P.load \u003c 3 ? go(C, 5, 1.2, [TT, 7, 0]) : go(C, 4, 0.3, up);\n  else if (ph === 5) {\n    if (P.full) {\n      (P.load++), (P.full = 0), puff(P, TT, 11, 3, 0.5), P.load > 2 && (P.tgo = 0.6);\n      for (let i = 0; i \u003c 10; i++) P.pa.push([TT + (rnd() - 0.5) * 6, 13, 0, 4, 0.3, 2]);\n    }\n    go(C, 6, 0.6, [TT, 7, 1]);\n  } else go(C, ph === 6 ? 7 : 0, ph === 6 ? 1.1 : 0.2, up);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06];\n  const rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nk = round(cl(k[2], 8, 10)), h = (P.h = cl(k[0], 0, 1)), wt = (P.wt = cl(k[3], 0, 1));\n  if (nk !== P.nk) lot(P, (P.nk = nk));\n  (P.t += d), (P.rt += rd), (P.cx += 3.6 * d);\n  Object.assign(P, { dayF: 1 - sm(0.55, 0.92, h), sunI: (1 - sm(0.6, 0.85, h)) * (1 - 0.9 * sm(0.3, 0.85, wt)), slope: 0.12 + 0.95 * sm(0, 0.8, h), lampK: sm(0.45, 0.8, h) });\n  // K1 tap: the warning lamp, then the blast at the face.\n  if (input.btnPressed && input.btnPressed[0] && P.bl \u003c 0) P.bl = 0;\n  if (P.bl >= 0 && (P.bl += rd) >= 0.8 && !P.fired) {\n    P.fired = 1;\n    for (let i = 0; i \u003c 26; i++) P.pa.push([40 + (rnd() - 0.5) * 10, P.fy - 1, (rnd() - 0.5) * 30, -10 - rnd() * 22, 1.6, 2]);\n    for (let i = PL; i \u003c= PR; i++) P.dig[i] += 1.4 * exp(-(((i - 40) / 9) ** 2));\n    puff(P, 40, P.fy, 9, 1.2, 2), (P.fy += 0.8), (P.hv += 30), (P.dust = 1);\n  }\n  if (P.bl > 1.5) (P.bl = -1), (P.fired = 0);\n  const { E, C } = P, u = tick(E, d);\n  if (E.ph === 6) {\n    const nx = mix(P.ex0, P.exT, u);\n    (P.trk += nx - P.ex), (P.ex = nx);\n  }\n  if (u >= 1) eStep(P, E);\n  if (tick(C, d) >= 1) cStep(P, C);\n  if (P.full && C.ph === 3 && rnd() \u003c 4 * d) P.pa.push([C.p[0] + (rnd() - 0.5) * 5, C.p[1] + 7, 0, 2, 2, 2]);\n  // A truck leaves with three grabs and an empty one backs in.\n  if (P.tph === 0 && P.load > 2 && (P.tgo -= d) \u003c= 0) (P.tph = 1), (P.tv = 0);\n  if (P.tph === 1 && (P.tx += (P.tv = min(18, P.tv + 10 * d)) * d) > 30) (P.tph = 2), (P.load = 0);\n  if (P.tph === 2 && (P.tx -= (1.5 + 0.8 * P.tx) * d) \u003c= 0) (P.tx = 0), (P.tph = 0);\n  // The new strut is welded in from wall to wall.\n  if (P.wx >= 0) {\n    P.arc = rnd() \u003c 0.85 ? 0.5 + 0.5 * rnd() : 0;\n    if (rnd() \u003c 14 * d) P.pa.push([P.wx, strutY(P.k) + 2, (rnd() - 0.5) * 10, -2 - rnd() * 4, 0.6 + rnd() * 0.5, 0]);\n    if ((P.wx += 7 * d) > PR + 1) (P.wx = -1), (P.arc = 0);\n  }\n  // At the bottom: the blinding concrete, then on to the next lot.\n  if (P.k >= FIN && P.hv \u003c 15 && (P.mat += d / 6) > 1.4 && P.sl \u003c 0) (P.snap = 1), (P.sl = 0), lot(P, P.nk), skyline(P);\n  if (P.sl >= 0 && (P.sl += rd / 2.2) >= 1) P.sl = -1;\n  // Seepage drips below the water table.\n  const wtY = 78 - 34 * wt, e = exp(-0.25 * d);\n  if (P.fy > wtY + 6 && rnd() \u003c 6 * wt * d) P.pa.push([PL + 1 + rnd() * 42, wtY + rnd() * (P.fy - wtY - 5), 0, 0, 3, 1]);\n  for (let i = PL; i \u003c= PR; i++) P.dig[i] *= e;\n  P.dust = max(0.1, P.dust * e);\n  P.du = P.du.filter((p) => ((p[0] += p[4] * d), (p[1] += p[5] * d), (p[2] += 2.2 * d), (p[3] -= 0.22 * d) > 0));\n  P.pa = P.pa.filter((p) => ((p[3] += 40 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), (p[4] -= d) > 0 && p[1] \u003c (p[0] >= PL && p[0] \u003c= PR ? P.fy : H)));\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.3 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\nconst cloudA = (P, x, y) => cl((0.6 * vn((x + P.cx) * 0.07, y * 0.18) + 0.4 * vn((x + P.cx) * 0.19, y * 0.4 + 5) - 0.6 + 0.3 * P.wt) * 5, 0, 1);\n\nfunction lamp(x0, y0, r2, k, c) {\n  const R = Math.ceil(sqrt(r2 * 4.6)), gx = [];\n  for (let x = max(0, x0 - R); x \u003c= min(W - 1, x0 + R); x++) gx.push(x, k * exp(-((x - x0) ** 2) / r2));\n  for (let y = max(0, y0 - R); y \u003c= min(H - 1, y0 + R); y++)\n    for (let i = 0, g = exp(-((y - y0) ** 2) / r2); i \u003c gx.length; i += 2) for (let j = 0, o = (y * W + gx[i]) * 3; j \u003c 3; j++) LM[o + j] += c[j] * gx[i + 1] * g;\n}\n\n// Daylight with cloud shadows, the shaft of sun, the lamps.\nfunction light(P, K) {\n  const { sunI: sI, slope: s, rs, sh, shf, k: pk, lampK: nl } = P, ks = min(pk, FIN - 1);\n  for (let i = 0; i \u003c 200; i++) sh[i] = 1 - 0.85 * cloudA(P, i - 96, 7);\n  rs.fill(1);\n  for (let j = 1, y; j \u003c= ks; j++) (y = strutY(j)), (rs[y + 2] = rs[y + 4] = 0.6), (rs[y + 3] = 0.4);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, x0 = x - s * (y - GL), out = y \u003c GL + 2;\n    const a = out ? 1 : (0.62 - 0.003 * (y - GL)) * (x > OR ? 0.75 : 1);\n    const l = out ? 0.5 * sI * sh[x + 80] : sI > 0 && x0 > PL - 1.5 && x0 \u003c OR + 1.5 ? sI * sm(PL - 1.5, PL + 1, x0) * (1 - sm(OR - 1, OR + 1.5, x0)) * sh[floor(x0) + 80] * rs[y] * (1 - 0.0025 * (y - GL)) : 0;\n    shf[i] = out ? 0 : l;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[9 + c] * a + K[6 + c] * l * 0.95;\n  }\n  // Floods on the lowest strut; sodium lamps after dark.\n  lamp(17, strutY(ks) + 2, 260, 0.7, FLOOD), lamp(47, strutY(ks) + 2, 260, 0.7, FLOOD);\n  if (nl > 0) for (let j = 1; j \u003c= ks; j++) lamp(j & 1 ? 12 : 51, strutY(j) + 2, 60, 1.3 * nl, [1, 0.62, 0.24]);\n  if (P.arc > 0) lamp(round(P.wx), strutY(pk) + 1, 70, 1.4 * P.arc, [0.7, 0.85, 1]);\n  if (P.bl > 0.8) lamp(40, round(P.fy) - 3, 260, 1.8 * (1 - sm(0.8, 1.2, P.bl)), [1, 0.8, 0.5]);\n  const tx = P.C.p[0];\n  if (nl > 0)\n    for (let y = 8; y \u003c min(H, P.fy + 2); y++)\n      for (let hw = 1.5 + 0.16 * (y - 7), x = max(0, floor(tx - hw)); x \u003c= min(W - 1, tx + hw); x++)\n        for (let c = 0, e = ((0.9 * nl) / (1 + (y - 7) / 70)) * (1 - abs(x - tx) / hw); c \u003c 3; c++) LM[(y * W + x) * 3 + c] += e * (c > 1 ? 0.92 : 1);\n}\n\nfunction sky(P, K) {\n  const ov = 0.75 * sm(0.2, 1, P.wt), day = P.dayF, dk = 0.3 + 0.7 * day, cc = [0, 1, 2].map((c) => mix(mix(K[3 + c], 255, 0.55) * dk, 130 * dk, ov));\n  for (let i = 0; i \u003c GL * W; i++) {\n    const x = i & 63, y = i >> 6, u = y / (GL - 1), a = cloudA(P, x, y) * (0.9 - 0.4 * u);\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = mix(mix(mix(K[c], K[3 + c], u * u), 120 * (0.25 + 0.75 * day), ov), cc[c], a);\n  }\n  // The street's buildings, the two beside the pit tall.\n  for (const [x0, x1, top, v, side] of P.bd)\n    for (let y = top; y \u003c GL; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const win = (x - x0) % 3 === 1 && (y - top) % 3 === 1 && x \u003c x1, lit = hash(x * 7, y + floor(v * 99)) \u003c 0.45 && day \u003c 0.7;\n        for (let c = 0, b; c \u003c 3; c++) (b = K[12 + c] * (0.78 + 0.3 * v) * (x === x0 ? 0.8 : 1)), (b = win ? (lit ? WIN[c] * (1 - day) : b * 0.55 + 18 * c * day) : b), (F[(y * W + x) * 3 + c] = side ? b : mix(b, K[3 + c], 0.3));\n      }\n}\n\nfunction ground(P) {\n  const { so, bw, srf, wt, st, fy } = P, wtY = 78 - 34 * wt, sec = 0.42 + 0.52 * P.dayF, mc = matCol(P), hh = heapH(P), kc = STEEL.map((v) => v * 0.5 * sec);\n  for (let x = PL; x \u003c= PR; x++) srf[x] = fy + P.dig[x] + 0.6 * (hash(x, 7) - 0.5);\n  for (let i = GL * W; i \u003c N; i++) {\n    // Pavement, deck and caps; far wall and heap; the ground in section.\n    const x = i & 63, y = i >> 6, o = i * 3, pit = x >= PL && x \u003c= PR;\n    let A = so, a = o, L = 0, k = sec;\n    if (y \u003c GL + 2 && !(pit && x \u003c= OR)) (A = (x > 6 && x \u003c PL) || (x > PR && x \u003c 57) ? CAP : x > OR && x \u003c 56 ? DECK : ROAD), (a = 0), (L = 1), (k = y === GL ? 1.18 : A === DECK && (x + y) & 1 ? 0.86 : 1);\n    else if (pit && y \u003c srf[x]) (L = 1), y >= srf[x] - max(0, hh - abs(x - HX) * 1.1) ? ((A = mc), (a = 0), (k = 0.85 + 0.3 * hash(x, y))) : ((A = bw), (k = y > wtY ? 1 - 0.5 * wt * st[i] : 1));\n    else if (pit && y \u003c srf[x] + 1) (L = 1), (k = 1.15);\n    else if (!pit && y > wtY + 4) k *= 1 - 0.12 * wt;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = A[a + c] * k * (L ? LM[o + c] : 1);\n  }\n  // Walls and king posts down to their toes; the deck's beams.\n  for (let y = GL + 2; y \u003c 126; y++) {\n    for (const [x, c] of WALLS) for (let i = 0; i \u003c 3; i++) F[(y * W + x) * 3 + i] = c[i] * sec;\n    for (const x of KP) for (let i = 0; i \u003c 2; i++) y \u003c srf[x] ? sur(x + i, y, ...STEEL, 0.62 + 0.23 * i) : put(x + i, y, kc);\n  }\n  for (let x = OR + 1; x \u003c= PR; x++) sur(x, GL + 2, 70, 74, 84), sur(x, GL + 3, 90, 94, 104, x % 6 ? 0.7 : 1.2);\n  // Struts with wales and jacks.\n  for (let j = 1; j \u003c= min(P.k, FIN - 1); j++) {\n    const y = strutY(j), end = j === P.k && P.wx >= 0 ? P.wx : PR;\n    for (let x = PL; x \u003c= end; x++) sur(x, y, ...STEEL, x % 11 === 3 ? 0.8 : 1.25), sur(x, y + 1, ...STEEL, 0.75);\n    for (let i = -1; i \u003c= 2; i++) {\n      for (const x of [PL, PL + 1, PR - 1, PR]) sur(x, y + i, 80, 84, 96);\n      if (end >= PR) for (let x = 46; x \u003c= 48; x++) surc(x, y + i, YEL, i \u003c 0 || i > 1 ? 0.7 : 1);\n    }\n  }\n  // Blinding concrete on the last floor.\n  const me = PL + min(1, P.mat) * (P.ex - PL - 8);\n  if (P.mat > 0) for (let x = PL; x \u003c= me; x++) for (let j = 0, o; j \u003c 3; j++) (o = at(x, srf[x] - j)), put(x, srf[x] - j, [0, 1, 2].map((c) => 200 * max(0.55, LM[o + c]) * (j ? 0.9 : 1.1)));\n  if (P.mat > 0 && P.mat \u003c 1) line(30, GL + 1, me, fy - 3, [96, 96, 104]);\n  // The pump's pool, and its hose up the wall to the tank.\n  for (let x = 45; x \u003c= PR; x++)\n    for (let y = round(fy - 0.4 - 2.6 * wt), g; y \u003c srf[x]; y++) (g = 0.5 + 0.5 * sin(x * 1.3 + P.t * 5 + y * 2)), sur(x, y, 60 + 60 * g, 96 + 60 * g, 132 + 50 * g);\n  for (let j = 1; j \u003c= 2; j++) sur(51, fy - j, ...HOSE), sur(52, fy - j, ...HOSE);\n  for (let y = fy - 2; y > GL - 2; y--) surc(PR, y, HOSE);\n  for (let x = PR; x \u003c 60; x++) surc(x, GL - 2, HOSE);\n  for (let x = 59; x \u003c= 62; x++) for (let y = 16; y \u003c GL; y++) sur(x, y, 120, 140, 160, y === 16 ? 1.2 : 0.8);\n  if (wt > 0.03) for (let j = 0; j \u003c 2; j++) put(59 + j, GL - 2 + j, RAIN, min(1, wt * 6) * (0.5 + 0.5 * sin(P.t * 20 + j)));\n}\n\nfunction excavator(P) {\n  const ex = P.ex, gy = round(P.fy), [bu, bv, ph] = P.E.p, f = cos(ph), X = (u) => ex + u * f, hw = 4.5 * abs(f) + 3.2 * abs(sin(ph)), nl = P.lampK;\n  for (let i = -6; i \u003c= 6; i++) for (let j = 1; j \u003c= 3; j++) (abs(i) \u003c 6 || j === 2) && sur(ex + i, gy - j, ...(j !== 2 && (i + floor(P.trk)) & 1 ? [92, 92, 96] : [46, 46, 50]));\n  for (let i = -3; i \u003c= 3; i++) sur(ex + i, gy - 4, 52, 50, 48);\n  for (let j = 5; j \u003c= 7; j++) for (let x = round(ex - hw); x \u003c= round(ex + hw); x++) surc(x, gy - j, YEL, j === 5 ? 0.7 : (x - ex) * f \u003c -2.5 ? 0.82 : 1);\n  const ca = round(min(X(0.5), X(3.5))), cb = max(ca + 1, round(max(X(0.5), X(3.5))));\n  for (let j = 8; j \u003c= 11; j++) for (let x = ca; x \u003c= cb; x++) j === 11 || x === (f >= 0 ? ca : cb) ? surc(x, gy - j, YEL) : (sur(x, gy - j, 110, 150, 180, 0.9), add(x, gy - j, WIN, 0.5 * nl));\n  // Boom and arm reach the bucket by two-link IK.\n  const [pu, pv, L1, L2] = [3, -6, 9, 8.5];\n  let tu = bu - pu, tv = bv - pv;\n  const dd = hypot(tu, tv) || 1, dc = cl(dd, 2, L1 + L2 - 0.05);\n  (tu *= dc / dd), (tv *= dc / dd);\n  const t1 = atan2(tv, tu) - acos(cl((L1 * L1 + dc * dc - L2 * L2) / (2 * L1 * dc), -1, 1)), eu = pu + L1 * cos(t1), ev = pv + L1 * sin(t1), bx = X(pu + tu), by = gy + pv + tv;\n  line(X(pu), gy + pv, X(eu), gy + ev, YEL), line(X(pu), gy + pv + 1, X(eu), gy + ev + 1, YEL, 0.75);\n  line(X(4), gy - 5, X(pu + (eu - pu) * 0.55), gy + pv + (ev - pv) * 0.55 + 1, [150, 150, 156]);\n  line(X(eu), gy + ev, bx, by, YEL, 0.9);\n  for (let i = 0; i \u003c= 2; i++) sur(bx - i * f, by, 74, 74, 80), sur(bx - i * f, by + 1, 74, 74, 80, 0.8), P.ec && surc(bx - i * f, by - 1, matCol(P), 1.1);\n  add(X(4.5), gy - 9, FLOOD, 255 * nl);\n}\n\n// A worker in hi-vis, feet on row y; a headlamp after dusk.\nfunction man(P, x, y, arm) {\n  sur(x, y, 40, 48, 90), sur(x, y - 1, 255, 128, 20), sur(x, y - 2, 255, 255, 240), arm && sur(x + 1, y - 2 - (arm > 0.5), 255, 128, 20);\n  add(x, y - 2, FLOOD, 200 * P.lampK);\n}\n\nfunction grab(P) {\n  const [tx, by, op] = P.C.p, X = round(tx), Y = round(by), HW = [3, 3.4, 3.4, 3, 2];\n  for (let y = 7; y \u003c Y; y++) sur(X - 1, y, 200, 200, 210), sur(X + 1, y, 200, 200, 210);\n  for (let i = -1; i \u003c= 1; i++) surc(X + i, Y, GAN, 1.2), surc(X + i, Y + 1, GAN, 0.85);\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = -6, a; i \u003c= 6; i++) (a = abs(i)) >= op * (0.4 + 0.9 * j) - 0.01 && a \u003c= HW[j] + op * 0.9 * j && (j === 4 || (op \u003c 0.3 && !i) ? sur(X + i, Y + 2 + j, 96, 100, 110) : surc(X + i, Y + 2 + j, GRAB, j ? 1 : 1.2));\n  if (P.full && op \u003c 0.5) for (let i = -2; i \u003c= 2; i++) surc(X + i, Y + 2, matCol(P), 1.2);\n  for (let i = -3; i \u003c= 3; i++) sur(X + i, 5, 70, 74, 84), surc(X + i, 6, GAN, abs(i) \u003c 2 ? 0.6 : 1);\n}\n\nfunction gantry(P) {\n  for (let y = 2; y \u003c GL; y++) for (const x of [4, 58]) surc(x, y, GAN), (y + (x >> 2)) % 3 && surc(x + 1, y, GAN, 0.7);\n  for (let x = 3; x \u003c= 60; x++) surc(x, 2, GAN, 1.1), surc(x, 4, GAN), (x + 1) % 3 || surc(x, 3, GAN, 0.8);\n  put(32, 1, P.rt % 1.4 \u003c 0.7 ? [255, 40, 30] : [90, 16, 14]);\n  // The railing, and the signalman at the edge.\n  for (let x = 8; x \u003c= OR; x++) sur(x, 17, ...((x >> 1) & 1 ? [230, 60, 50] : [236, 236, 236])), x % 6 === 2 && (sur(x, 18, 200, 200, 200), sur(x, 19, 200, 200, 200));\n  man(P, 35, GL - 1, P.C.ph \u003c 3 ? (P.rt * 2) % 1 : 0);\n}\n\nfunction truck(P) {\n  const o = round(P.tx), mc = matCol(P), hL = [0, 1.6, 2.7, 3.7][min(3, P.load)];\n  if (o > 30) return;\n  for (let x = 37; x \u003c= 50; x++)\n    for (let y = 9; y \u003c= 16; y++)\n      y > 12 ? sur(x + o, y, 196, 56, 44, y === 13 ? 1.25 : (x - 37) % 4 ? 1 : 0.75) : y > 12 - hL * (1 - ((x - 43.5) / 7) ** 2) && surc(x + o, y, mc, 0.85 + 0.3 * hash(x, y));\n  for (let x = 51; x \u003c= 56; x++) for (let y = 10; y \u003c= 16; y++) (y > 10 || x > 51) && (y \u003c 14 && y > 10 && x > 52 ? sur(x + o, y, 60, 90, 120) : sur(x + o, y, 50, 96, 200));\n  for (let x = 37; x \u003c= 56; x++) sur(x + o, 17, 50, 50, 54);\n  for (const x of [39, 43, 53]) sur(x + o, 18, 30, 30, 34), sur(x + o + 1, 18, 30, 30, 34), sur(x + o, 19, 120, 120, 126), sur(x + o + 1, 19, 30, 30, 34);\n  add(57 + o, 15, FLOOD, 255 * P.lampK), add(36 + o, 16, [255, 30, 20], P.lampK);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  if (P.snap) P.sn.set(F), (P.snap = 0);\n  const hh = P.h * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0)), mc = matCol(P), fy = round(P.fy);\n  light(P, K), sky(P, K), gantry(P), ground(P), excavator(P);\n  man(P, 12, round(P.srf[12] - max(0, heapH(P) - 9.9)) - 1, 0);\n  if (P.wx >= 0) man(P, round(P.wx) - 1, fy - 1, 1);\n  truck(P), grab(P);\n  // Sparks, drips, spoil and dust.\n  for (const [x, y, , , l, k] of P.pa) k ? (k > 1 ? surc(x, y, mc, 1.3) : put(x, y, [170, 210, 255], 0.8)) : put(x, y, [255, 200, 90], min(1, l * 2));\n  for (const [px, py, r, a] of P.du) {\n    const o0 = at(cl(px, 0, 63), cl(py, 0, 127)), R = Math.ceil(r), pc = mc.map((v, c) => mix(v, 210, 0.5) * min(1.3, 0.3 + LM[o0 + c]));\n    for (let y = round(py) - R; y \u003c= py + R; y++)\n      for (let x = round(px) - R, q; x \u003c= px + R; x++) (q = 1 - ((x - px) ** 2 + (y - py) ** 2) / (r * r)) > 0 && put(x, y, pc, min(1, a * q * q * 0.9));\n  }\n  // Haze in the shaft, thicker with dust.\n  for (let i = 0, hz = 8 + 30 * P.dust; i \u003c N; i++) if (P.shf[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += K[6 + c] * P.shf[i] * hz;\n  if (P.arc > 0) add(round(P.wx), strutY(P.k) + 1, FLOOD, 500);\n  if (P.bl >= 0 && P.bl \u003c 0.8 && P.bl % 0.3 \u003c 0.15) put(34, GL - 4, [255, 170, 30]), add(34, GL - 3, [255, 140, 20], 0.6);\n  // Rain past halfway, not under the deck.\n  for (let i = 0, rain = sm(0.45, 1, P.wt); i \u003c 160 * rain; i++) {\n    const y = ((hash(i, 2) * 150 + P.t * 70) % 150) - 10, x = (hash(i, 1) * 80 + y * 0.25) % 64;\n    if (x \u003c= OR + 0.5 || x >= PR + 1 || y \u003c= GL + 1) for (let j = 0; j \u003c 3; j++) put(x - j * 0.25, y - j, RAIN, 0.6 * (1 - j / 3) * (0.4 + 0.6 * P.dayF));\n  }\n  const off = P.sl >= 0 ? round(64 * sm(0, 1, P.sl)) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const xs = x + off, B = xs \u003c W && off ? P.sn : F, o = (y * W + (xs % W)) * 3;\n      display.setPixel(x, y, min(255, B[o]) | 0, min(255, B[o + 1]) | 0, min(255, B[o + 2]) | 0);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Depth=8..10, Water=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Midday at 0, a shaft of sun falling through the deck opening past the tiers of struts; afternoon slants it onto the far wall, and at 1 it is night and sodium lamps on the struts and a floodlight on the trolley light the pit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a grab takes about nine seconds from the heap to the truck and a stage of nine rows about a minute; at 0.2 it all runs ten times slower, clouds and their shadows too."},{"name":"Depth","min":8,"max":10,"about":"How many of the eleven stages are dug when it starts, eight to ten, each with its strut. After the eleventh the floor gets its concrete and the view moves on to the next lot."},{"name":"Water","min":0,"max":1,"about":"Groundwater seeping through the lagging, the pool round the pump and the hose's flow; past halfway it rains and the shaft of sun fades."}],"start":[0,2,8,0.06],"measures":{"motion":0.0546,"detail":0.0796,"edges":0.3258,"complexity":1.9604,"coverage":0.986,"colour":0.2478,"drift":0.0543},"knobResponse":[0.2505,0.0522,0.0454,0.0762]},{"slug":"explicit-formula","title":"Explicit Formula","family":"number","round":39,"note":"소수 거듭제곱마다 log p 씩 뛰는 계단 ψ(x) 를 제타 함수의 영점으로 다시 지어요. x 가 아래로, ψ 가 옆으로 가고, 영점이 한 쌍씩 더해질 때마다 매끈한 선 x 에 물결이 붙다가 계단으로 날카로워지고, 제자리를 찾은 계단 띠부터 켜져요. 오른쪽 끝 세 열이 임계선이라 더해진 영점이 제 높이에서 켜져요.","idea":"The prime staircase psi(x), x running down the rows and psi across, is rebuilt from the zeros of the zeta function one pair at a time: the bare line x - log 2 pi grows waves that sharpen into steps, each step snapping onto its prime power and its band lighting up as it does, while the zeros taken so far light up one by one down a strip at the right and a count at the top.","buttons":"K1 tap takes every zero out and starts adding them again from the first.","code":"// ===== Patternflow pattern =====\n// Title:   Explicit Formula\n// Family:  number\n// Idea:    The prime staircase psi(x), x running down the rows and psi across, is rebuilt from the zeros of the zeta function one pair at a time: the bare line x - log 2 pi grows waves that sharpen into steps, each step snapping onto its prime power and its band lighting up as it does, while the zeros taken so far light up one by one down a strip at the right and a count at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Riemann's explicit formula (Bernhard Riemann, 1859), in von Mangoldt's form for the Chebyshev function psi (Hans von Mangoldt, 1895), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Reach=24..144, Tilt=0..1\n//\n// Knob 1: Hue. Turns the fill round the wheel, the shortfall colour a quarter turn on; gold stays gold. At 0 azure fill, violet where the sum falls short of the staircase and gold where it runs past; at 0.25 violet with orange, at 0.5 pale orange with green, at 0.75 green with azure. Orange and yellow fill is paled and dims less in its shaded bands, so it never reads brown.\n// Knob 2: Speed. How fast the zeros come in, each a little faster than the last: at 2 the first is in after 0.7 s, 10 by 4.2 s, 100 by 10.9 s and all 200 by 13.1 s; the staircase holds for 4 s, the zeros are taken out again in 1.9 s and the bare line rests 1 s, 20 s round. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Reach. How far x runs down the 128 rows, from 1 to Reach, with psi = 0 on column 3 and psi = Reach on column 57. At 24, the start, 13 prime powers, 5.6 rows to each unit of x and steps 1.6 to 7 LEDs wide; at 84 33 of them; at 144 47, the steps under 2 LEDs, and the staircase leans on the line x as the prime number theorem says it must. The 200 zeros resolve the staircase less sharply the further x runs.\n// Knob 4: Tilt. Takes Tilt times x away from both curves and widens the scale to match. Up to 0.06 the staircase itself; at 1 only psi(x) - x is left, a sawtooth that slides left one unit for each unit of x and jumps right by log p at each prime power, drawn 5 LEDs to the unit at Reach 24: the part of psi that the zeros alone make, their waves summing to the teeth.\n// Buttons: K1 tap takes every zero out and starts adding them again from the first.\n\nconst W = 64, H = 128, SS = 4, NS = H * SS, NZ = 200;\n// The imaginary parts of the first 200 zeros of the zeta function on the\n// critical line, rho = 1/2 + i gamma, to six places. 14.134725 is the first,\n// 396.381854 the 200th.\nconst GAM = [\n  14.134725, 21.022040, 25.010858, 30.424876, 32.935062, 37.586178, 40.918719, 43.327073, 48.005151, 49.773832,\n  52.970321, 56.446248, 59.347044, 60.831779, 65.112544, 67.079811, 69.546402, 72.067158, 75.704691, 77.144840,\n  79.337375, 82.910381, 84.735493, 87.425275, 88.809111, 92.491899, 94.651344, 95.870634, 98.831194, 101.317851,\n  103.725538, 105.446623, 107.168611, 111.029536, 111.874659, 114.320221, 116.226680, 118.790783, 121.370125, 122.946829,\n  124.256819, 127.516684, 129.578704, 131.087689, 133.497737, 134.756510, 138.116042, 139.736209, 141.123707, 143.111846,\n  146.000982, 147.422765, 150.053520, 150.925258, 153.024694, 156.112909, 157.597592, 158.849988, 161.188964, 163.030710,\n  165.537069, 167.184440, 169.094515, 169.911976, 173.411537, 174.754192, 176.441434, 178.377408, 179.916484, 182.207078,\n  184.874468, 185.598784, 187.228923, 189.416159, 192.026656, 193.079727, 195.265397, 196.876482, 198.015310, 201.264752,\n  202.493595, 204.189672, 205.394697, 207.906259, 209.576510, 211.690863, 213.347919, 214.547045, 216.169539, 219.067596,\n  220.714919, 221.430706, 224.007000, 224.983325, 227.421444, 229.337413, 231.250189, 231.987235, 233.693404, 236.524230,\n  237.769820, 239.555478, 241.049158, 242.823272, 244.070898, 247.136990, 248.101990, 249.573690, 251.014948, 253.069987,\n  255.306256, 256.380714, 258.610439, 259.874407, 260.805085, 263.573894, 265.557852, 266.614974, 267.921915, 269.970449,\n  271.494056, 273.459609, 275.587493, 276.452050, 278.250744, 279.229251, 282.465115, 283.211186, 284.835964, 286.667445,\n  287.911921, 289.579855, 291.846291, 293.558434, 294.965370, 295.573255, 297.979277, 299.840326, 301.649325, 302.696750,\n  304.864371, 305.728913, 307.219496, 310.109463, 311.165142, 312.427801, 313.985286, 315.475616, 317.734806, 318.853104,\n  321.160134, 322.144559, 323.466970, 324.862866, 327.443901, 329.033072, 329.953240, 331.474468, 333.645379, 334.211355,\n  336.841850, 338.339993, 339.858217, 341.042261, 342.054878, 344.661703, 346.347871, 347.272678, 349.316261, 350.408419,\n  351.878649, 353.488900, 356.017575, 357.151302, 357.952685, 359.743755, 361.289362, 363.331331, 364.736024, 366.212710,\n  367.993575, 368.968438, 370.050919, 373.061928, 373.864874, 375.825913, 376.324092, 378.436680, 379.872975, 381.484469,\n  383.443529, 384.956117, 385.861301, 387.222890, 388.846128, 391.456084, 392.245083, 393.427744, 395.582870, 396.381854,\n];\n// psi = 0 sits on column C0 and psi = Reach on column C0 + CW. The critical\n// line runs down columns ZC..ZC + 2, gamma 0 to GTOP over the 128 rows.\nconst C0 = 3, CW = 54, ZC = 61, GTOP = 400;\n// Zeros come in at dz/dt = ZB (ZA + z) a second at Speed 2: the first after\n// 0.7 s, 10 by 4.2 s, 100 by 10.9 s, all 200 by 13.1 s. Then they hold for\n// HOLD seconds, go out BACK times as fast and the bare line rests REST.\nconst ZA = 4, ZB = 0.3, HOLD = 4, BACK = 7, REST = 1;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst LOG2PI = Math.log(2 * Math.PI);\nconst { floor, min, max, abs, sqrt, log, exp, sin, cos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = [\n  0b111101101101111, 0b010110010010111, 0b111001111100111, 0b111001111001111, 0b101101111001001,\n  0b111100111001111, 0b111100111101111, 0b111001001001001, 0b111101111101111, 0b111101111001111,\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The prime powers p^k up to X, each with log p and k.\nfunction primePowers(X) {\n  const out = [];\n  for (let n = 2; n \u003c= X; n++) {\n    let p = 2;\n    while (n % p) p++;\n    let m = n, k = 0;\n    while (m % p === 0) (m /= p), k++;\n    if (m === 1) out.push([n, log(p), k]);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, reach: 0, tilt: 0, z: 0, stage: 0, clock: 0, nIn: 0,\n    xs: new Float64Array(NS), band: new Uint8Array(NS), base: new Float64Array(NS), tru: new Float64Array(NS), A: new Float64Array(NS),\n    v: new Float64Array(NS), lit: new Float32Array(64), err: new Float64Array(64), cnt: new Float64Array(64), bx: new Float64Array(64), cN: new Float32Array(SS), cT: new Float32Array(SS), pp: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    fill0: [0, 0, 0], fill1: [0, 0, 0], bg: [0, 0, 0], rim: [0, 0, 0], dot: [0, 0, 0], over: [0, 0, 0], short: [0, 0, 0],\n  };\n}\n\n// The pair rho, its conjugate at sample j: 2 Re(x^rho / rho)\n// = 2 sqrt(x) (cos(g L) / 2 + g sin(g L)) / (1/4 + g^2), L = log x.\nfunction term(S, n, j) {\n  const g = GAM[n], x = S.xs[j], L = log(x);\n  return (2 * sqrt(x) * (0.5 * cos(g * L) + g * sin(g * L))) / (0.25 + g * g);\n}\n\n// Zero n fully in (sign 1) or taken out (sign -1).\nfunction addZero(S, n, sign) {\n  for (let j = 0; j \u003c NS; j++) S.A[j] += sign * term(S, n, j);\n}\n\nfunction setReach(S, X) {\n  S.reach = X;\n  S.pp = primePowers(X);\n  for (let j = 0; j \u003c NS; j++) {\n    // Row y holds x from 1 + y (X - 1) / 128 to one row further on.\n    const x = 1 + ((j + 0.5) / NS) * (X - 1);\n    S.xs[j] = x;\n    S.base[j] = x - LOG2PI - 0.5 * log(1 - 1 / (x * x));\n    let p = 0, c = 0;\n    for (const q of S.pp) if (q[0] \u003c= x) (p += q[1]), c++;\n    S.tru[j] = p;\n    S.band[j] = c;\n  }\n  S.A.fill(0);\n  S.lit.fill(0);\n  for (let n = 0; n \u003c S.nIn; n++) addZero(S, n, 1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 24, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  // Up to 0.06 upright as it is, so the opening shows the staircase itself.\n  S.tilt = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const X = round(cl(k[2], 24, 144));\n  if (X !== S.reach) setReach(S, X);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.stage = 0;\n    S.z = 0;\n  }\n  const sp = (d * S.speed) / 2;\n  if (S.stage === 0) {\n    S.z += sp * ZB * (ZA + S.z);\n    if (S.z >= NZ) (S.z = NZ), (S.stage = 1), (S.clock = 0);\n  } else if (S.stage === 1) {\n    S.clock += sp;\n    if (S.clock > HOLD) S.stage = 2;\n  } else if (S.stage === 2) {\n    S.z -= sp * ZB * BACK * (ZA + S.z);\n    if (S.z \u003c= 0) (S.z = 0), (S.stage = 3), (S.clock = 0);\n  } else {\n    S.clock += sp;\n    if (S.clock > REST) S.stage = 0;\n  }\n  const n = min(NZ, floor(S.z));\n  while (S.nIn \u003c n) addZero(S, S.nIn++, 1);\n  while (S.nIn > n) addZero(S, --S.nIn, -1);\n  // The sum at every sample, the fading zero in by its fraction.\n  const { v, xs, base, tru, A, err, cnt, bx, band, lit } = S, f = n \u003c NZ ? S.z - n : 0;\n  for (let j = 0; j \u003c NS; j++) v[j] = base[j] - A[j] - (f > 0 ? f * term(S, n, j) : 0);\n  // A band has snapped onto its step when the sum's mean distance from the\n  // staircase across it is under 0.04 sqrt(x); it starts to light at 0.12.\n  const nb = S.pp.length + 1;\n  err.fill(0, 0, nb);\n  cnt.fill(0, 0, nb);\n  bx.fill(0, 0, nb);\n  for (let j = 0; j \u003c NS; j++) {\n    const q = band[j];\n    err[q] += abs(v[j] - tru[j]);\n    bx[q] += xs[j];\n    cnt[q]++;\n  }\n  const ease = 1 - exp(-d / 0.3);\n  for (let q = 0; q \u003c nb; q++) {\n    const r = cnt[q] ? err[q] / cnt[q] / sqrt(bx[q] / cnt[q]) : 1, u = cl((0.12 - r) / 0.08, 0, 1);\n    lit[q] += (u * u * (3 - 2 * u) - lit[q]) * ease;\n  }\n}\n\n// A colour that would read brown or olive, a dark orange or yellow, is\n// paled toward grey and lifted.\nfunction tone(h, s, v, out) {\n  const hh = h - floor(h), warm = cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1) * (1 - v);\n  hsv(h, s * (1 - 0.9 * warm), v * (1 + 1.1 * warm), out);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, v, xs, tru, cN, cT, fill0, fill1, bg, rim, dot, over, short } = S;\n  const X = S.reach, n = S.nIn, f = n \u003c NZ ? S.z - n : 0, t = S.tilt;\n  // Columns: psi - t x, so at Tilt 1 only what the zeros add is left, the\n  // scale closing in from the whole of psi to about 2.2 sqrt(Reach).\n  const sc = CW / ((1 - t) * X + t * 2.2 * sqrt(X)), c0 = C0 + 35 * t;\n\n  // Orange and yellow fill dims less, so its shaded bands never read brown.\n  const h = S.hue + H0, hh = h - floor(h), keep = 1 - 0.7 * cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1);\n  tone(h, 0.8, 0.6, fill0);\n  tone(h + 0.05, 0.75, 1, fill1);\n  hsv(0.64, 0.45, 0.15, bg);\n  tone(h + 0.25, 0.65, 0.8, short);\n  hsv(h - 0.03, 0.2, 1, rim);\n  hsv(h, 0.35, 1, dot);\n  over[0] = 1;\n  over[1] = 0.8;\n  over[2] = 0.45;\n  // The newest zero's wave, faintly in the fill while it comes in.\n  const wave = n \u003c NZ ? 0.1 * sin(PI * f) * sqrt(GAM[0] / GAM[n]) : 0, gw = n \u003c NZ ? GAM[n] : 0;\n\n  let prevC = c0 + (v[0] - t * xs[0]) * sc;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1);\n    const fr = fill0[0] + (fill1[0] - fill0[0]) * u, fg = fill0[1] + (fill1[1] - fill0[1]) * u, fb = fill0[2] + (fill1[2] - fill0[2]) * u;\n    const bk = 0.8 + 0.4 * u;\n    // Where the curve runs in this row: the span between the last sample of\n    // the row above and every sample of this one.\n    let lo = prevC, hi = prevC;\n    for (let q = 0; q \u003c SS; q++) {\n      const j = y * SS + q, cc = c0 + (v[j] - t * xs[j]) * sc;\n      cN[q] = cc;\n      cT[q] = c0 + (tru[j] - t * xs[j]) * sc;\n      if (cc \u003c lo) lo = cc;\n      if (cc > hi) hi = cc;\n      prevC = cc;\n    }\n    // Between one prime power and the next the fill is a band, every other\n    // band a little lighter, so the gaps between them show as band heights,\n    // and a band stays dim until the sum has snapped onto its step.\n    const bq = S.band[y * SS + 2];\n    const wv = (1 + wave * sin(gw * log(xs[y * SS + 2]))) * (bq & 1 ? 1.08 : 0.92) * (0.45 + 0.55 * S.lit[bq]);\n    const edge = (cN[0] + cN[1] + cN[2] + cN[3]) / 4;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Under both the sum and the staircase: the fill. Under the sum alone,\n      // where it runs past the staircase: gold. Under the staircase alone,\n      // where the sum falls short: the second colour. Under neither: dark.\n      let both = 0, ov = 0, sh = 0;\n      for (let q = 0; q \u003c SS; q++) {\n        const a = cl(cN[q] - x, 0, 1), b = cl(cT[q] - x, 0, 1), m = a \u003c b ? a : b;\n        both += m;\n        ov += a - m;\n        sh += b - m;\n      }\n      both /= SS;\n      ov /= SS;\n      sh /= SS;\n      const no = 1 - both - ov - sh, gl = 1 - (1 - wv * (0.55 + 0.45 * exp((x - edge) / 9))) * keep;\n      let r = bg[0] * bk * no + fr * gl * both + over[0] * ov + short[0] * sh;\n      let g = bg[1] * bk * no + fg * gl * both + over[1] * ov + short[1] * sh;\n      let b = bg[2] * bk * no + fb * gl * both + over[2] * ov + short[2] * sh;\n      // The curve itself: every LED its span touches.\n      const rr = cl(1 - max(lo - (x + 1), x - hi), 0, 1) * 0.75;\n      r += (rim[0] - r) * rr;\n      g += (rim[1] - g) * rr;\n      b += (rim[2] - b) * rr;\n      R[p] = r;\n      G[p] = g;\n      B[p] = b;\n    }\n  }\n  // Ticks down the left edge at each prime power: three LEDs for a prime,\n  // two for a square, one for a higher power.\n  for (const q of S.pp) {\n    const y = floor(((q[0] - 1) / (X - 1)) * H);\n    if (y \u003c 0 || y >= H) continue;\n    const len = q[2] === 1 ? 3 : q[2] === 2 ? 2 : 1;\n    for (let x = 0; x \u003c len; x++) {\n      const p = y * W + x;\n      R[p] = over[0];\n      G[p] = over[1];\n      B[p] = over[2];\n    }\n  }\n  // The critical line: every zero a dot at its height, dim until it is in.\n  for (let x = ZC; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      R[p] *= 0.5;\n      G[p] *= 0.5;\n      B[p] *= 0.5;\n    }\n  for (let m = 0; m \u003c NZ; m++) {\n    const yy = (GAM[m] / GTOP) * H - 0.5, y0 = floor(yy), fy = yy - y0;\n    const a = m \u003c n ? 1 : m === n ? 0.15 + 0.85 * f : 0.15, flash = m === n ? 1 : m === n - 1 ? 1 - f : 0;\n    for (let x = ZC; x \u003c W; x++)\n      for (let e = 0; e \u003c 2; e++) {\n        const y = y0 + e, wgt = e ? fy : 1 - fy;\n        if (y \u003c 0 || y >= H) continue;\n        const p = y * W + x;\n        R[p] += wgt * a * (dot[0] + flash);\n        G[p] += wgt * a * (dot[1] + flash);\n        B[p] += wgt * a * (dot[2] + flash);\n      }\n  }\n  // How many zeros are in, at the top right.\n  const digits = String(min(NZ, round(S.z)));\n  let x0 = ZC - 3 - (digits.length * 8 - 2);\n  for (const ch of digits) {\n    const bits = FONT[+ch];\n    for (let r = 0; r \u003c 5; r++)\n      for (let cc = 0; cc \u003c 3; cc++)\n        if ((bits >> (14 - r * 3 - cc)) & 1)\n          for (let a = 0; a \u003c 4; a++) {\n            const p = (3 + r * 2 + (a >> 1)) * W + x0 + cc * 2 + (a & 1);\n            R[p] = dot[0];\n            G[p] = dot[1];\n            B[p] = dot[2];\n          }\n    x0 += 8;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","layer":{"id":"layer-explicit-formula","type":"code","name":"explicit-formula","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Explicit Formula\n// Family:  number\n// Idea:    The prime staircase psi(x), x running down the rows and psi across, is rebuilt from the zeros of the zeta function one pair at a time: the bare line x - log 2 pi grows waves that sharpen into steps, each step snapping onto its prime power and its band lighting up as it does, while the zeros taken so far light up one by one down a strip at the right and a count at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Riemann's explicit formula (Bernhard Riemann, 1859), in von Mangoldt's form for the Chebyshev function psi (Hans von Mangoldt, 1895), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Reach=24..144, Tilt=0..1\n//\n// Knob 1: Hue. Turns the fill round the wheel, the shortfall colour a quarter turn on; gold stays gold. At 0 azure fill, violet where the sum falls short of the staircase and gold where it runs past; at 0.25 violet with orange, at 0.5 pale orange with green, at 0.75 green with azure. Orange and yellow fill is paled and dims less in its shaded bands, so it never reads brown.\n// Knob 2: Speed. How fast the zeros come in, each a little faster than the last: at 2 the first is in after 0.7 s, 10 by 4.2 s, 100 by 10.9 s and all 200 by 13.1 s; the staircase holds for 4 s, the zeros are taken out again in 1.9 s and the bare line rests 1 s, 20 s round. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Reach. How far x runs down the 128 rows, from 1 to Reach, with psi = 0 on column 3 and psi = Reach on column 57. At 24, the start, 13 prime powers, 5.6 rows to each unit of x and steps 1.6 to 7 LEDs wide; at 84 33 of them; at 144 47, the steps under 2 LEDs, and the staircase leans on the line x as the prime number theorem says it must. The 200 zeros resolve the staircase less sharply the further x runs.\n// Knob 4: Tilt. Takes Tilt times x away from both curves and widens the scale to match. Up to 0.06 the staircase itself; at 1 only psi(x) - x is left, a sawtooth that slides left one unit for each unit of x and jumps right by log p at each prime power, drawn 5 LEDs to the unit at Reach 24: the part of psi that the zeros alone make, their waves summing to the teeth.\n// Buttons: K1 tap takes every zero out and starts adding them again from the first.\n\nconst W = 64, H = 128, SS = 4, NS = H * SS, NZ = 200;\n// The imaginary parts of the first 200 zeros of the zeta function on the\n// critical line, rho = 1/2 + i gamma, to six places. 14.134725 is the first,\n// 396.381854 the 200th.\nconst GAM = [\n  14.134725, 21.022040, 25.010858, 30.424876, 32.935062, 37.586178, 40.918719, 43.327073, 48.005151, 49.773832,\n  52.970321, 56.446248, 59.347044, 60.831779, 65.112544, 67.079811, 69.546402, 72.067158, 75.704691, 77.144840,\n  79.337375, 82.910381, 84.735493, 87.425275, 88.809111, 92.491899, 94.651344, 95.870634, 98.831194, 101.317851,\n  103.725538, 105.446623, 107.168611, 111.029536, 111.874659, 114.320221, 116.226680, 118.790783, 121.370125, 122.946829,\n  124.256819, 127.516684, 129.578704, 131.087689, 133.497737, 134.756510, 138.116042, 139.736209, 141.123707, 143.111846,\n  146.000982, 147.422765, 150.053520, 150.925258, 153.024694, 156.112909, 157.597592, 158.849988, 161.188964, 163.030710,\n  165.537069, 167.184440, 169.094515, 169.911976, 173.411537, 174.754192, 176.441434, 178.377408, 179.916484, 182.207078,\n  184.874468, 185.598784, 187.228923, 189.416159, 192.026656, 193.079727, 195.265397, 196.876482, 198.015310, 201.264752,\n  202.493595, 204.189672, 205.394697, 207.906259, 209.576510, 211.690863, 213.347919, 214.547045, 216.169539, 219.067596,\n  220.714919, 221.430706, 224.007000, 224.983325, 227.421444, 229.337413, 231.250189, 231.987235, 233.693404, 236.524230,\n  237.769820, 239.555478, 241.049158, 242.823272, 244.070898, 247.136990, 248.101990, 249.573690, 251.014948, 253.069987,\n  255.306256, 256.380714, 258.610439, 259.874407, 260.805085, 263.573894, 265.557852, 266.614974, 267.921915, 269.970449,\n  271.494056, 273.459609, 275.587493, 276.452050, 278.250744, 279.229251, 282.465115, 283.211186, 284.835964, 286.667445,\n  287.911921, 289.579855, 291.846291, 293.558434, 294.965370, 295.573255, 297.979277, 299.840326, 301.649325, 302.696750,\n  304.864371, 305.728913, 307.219496, 310.109463, 311.165142, 312.427801, 313.985286, 315.475616, 317.734806, 318.853104,\n  321.160134, 322.144559, 323.466970, 324.862866, 327.443901, 329.033072, 329.953240, 331.474468, 333.645379, 334.211355,\n  336.841850, 338.339993, 339.858217, 341.042261, 342.054878, 344.661703, 346.347871, 347.272678, 349.316261, 350.408419,\n  351.878649, 353.488900, 356.017575, 357.151302, 357.952685, 359.743755, 361.289362, 363.331331, 364.736024, 366.212710,\n  367.993575, 368.968438, 370.050919, 373.061928, 373.864874, 375.825913, 376.324092, 378.436680, 379.872975, 381.484469,\n  383.443529, 384.956117, 385.861301, 387.222890, 388.846128, 391.456084, 392.245083, 393.427744, 395.582870, 396.381854,\n];\n// psi = 0 sits on column C0 and psi = Reach on column C0 + CW. The critical\n// line runs down columns ZC..ZC + 2, gamma 0 to GTOP over the 128 rows.\nconst C0 = 3, CW = 54, ZC = 61, GTOP = 400;\n// Zeros come in at dz/dt = ZB (ZA + z) a second at Speed 2: the first after\n// 0.7 s, 10 by 4.2 s, 100 by 10.9 s, all 200 by 13.1 s. Then they hold for\n// HOLD seconds, go out BACK times as fast and the bare line rests REST.\nconst ZA = 4, ZB = 0.3, HOLD = 4, BACK = 7, REST = 1;\n// Opening hue: azure.\nconst H0 = 0.56;\nconst LOG2PI = Math.log(2 * Math.PI);\nconst { floor, min, max, abs, sqrt, log, exp, sin, cos, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 3 x 5 digits, row by row from the top, three bits a row.\nconst FONT = [\n  0b111101101101111, 0b010110010010111, 0b111001111100111, 0b111001111001111, 0b101101111001001,\n  0b111100111001111, 0b111100111101111, 0b111001001001001, 0b111101111101111, 0b111101111001111,\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The prime powers p^k up to X, each with log p and k.\nfunction primePowers(X) {\n  const out = [];\n  for (let n = 2; n \u003c= X; n++) {\n    let p = 2;\n    while (n % p) p++;\n    let m = n, k = 0;\n    while (m % p === 0) (m /= p), k++;\n    if (m === 1) out.push([n, log(p), k]);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, reach: 0, tilt: 0, z: 0, stage: 0, clock: 0, nIn: 0,\n    xs: new Float64Array(NS), band: new Uint8Array(NS), base: new Float64Array(NS), tru: new Float64Array(NS), A: new Float64Array(NS),\n    v: new Float64Array(NS), lit: new Float32Array(64), err: new Float64Array(64), cnt: new Float64Array(64), bx: new Float64Array(64), cN: new Float32Array(SS), cT: new Float32Array(SS), pp: [],\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    fill0: [0, 0, 0], fill1: [0, 0, 0], bg: [0, 0, 0], rim: [0, 0, 0], dot: [0, 0, 0], over: [0, 0, 0], short: [0, 0, 0],\n  };\n}\n\n// The pair rho, its conjugate at sample j: 2 Re(x^rho / rho)\n// = 2 sqrt(x) (cos(g L) / 2 + g sin(g L)) / (1/4 + g^2), L = log x.\nfunction term(S, n, j) {\n  const g = GAM[n], x = S.xs[j], L = log(x);\n  return (2 * sqrt(x) * (0.5 * cos(g * L) + g * sin(g * L))) / (0.25 + g * g);\n}\n\n// Zero n fully in (sign 1) or taken out (sign -1).\nfunction addZero(S, n, sign) {\n  for (let j = 0; j \u003c NS; j++) S.A[j] += sign * term(S, n, j);\n}\n\nfunction setReach(S, X) {\n  S.reach = X;\n  S.pp = primePowers(X);\n  for (let j = 0; j \u003c NS; j++) {\n    // Row y holds x from 1 + y (X - 1) / 128 to one row further on.\n    const x = 1 + ((j + 0.5) / NS) * (X - 1);\n    S.xs[j] = x;\n    S.base[j] = x - LOG2PI - 0.5 * log(1 - 1 / (x * x));\n    let p = 0, c = 0;\n    for (const q of S.pp) if (q[0] \u003c= x) (p += q[1]), c++;\n    S.tru[j] = p;\n    S.band[j] = c;\n  }\n  S.A.fill(0);\n  S.lit.fill(0);\n  for (let n = 0; n \u003c S.nIn; n++) addZero(S, n, 1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 24, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  // Up to 0.06 upright as it is, so the opening shows the staircase itself.\n  S.tilt = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const X = round(cl(k[2], 24, 144));\n  if (X !== S.reach) setReach(S, X);\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.stage = 0;\n    S.z = 0;\n  }\n  const sp = (d * S.speed) / 2;\n  if (S.stage === 0) {\n    S.z += sp * ZB * (ZA + S.z);\n    if (S.z >= NZ) (S.z = NZ), (S.stage = 1), (S.clock = 0);\n  } else if (S.stage === 1) {\n    S.clock += sp;\n    if (S.clock > HOLD) S.stage = 2;\n  } else if (S.stage === 2) {\n    S.z -= sp * ZB * BACK * (ZA + S.z);\n    if (S.z \u003c= 0) (S.z = 0), (S.stage = 3), (S.clock = 0);\n  } else {\n    S.clock += sp;\n    if (S.clock > REST) S.stage = 0;\n  }\n  const n = min(NZ, floor(S.z));\n  while (S.nIn \u003c n) addZero(S, S.nIn++, 1);\n  while (S.nIn > n) addZero(S, --S.nIn, -1);\n  // The sum at every sample, the fading zero in by its fraction.\n  const { v, xs, base, tru, A, err, cnt, bx, band, lit } = S, f = n \u003c NZ ? S.z - n : 0;\n  for (let j = 0; j \u003c NS; j++) v[j] = base[j] - A[j] - (f > 0 ? f * term(S, n, j) : 0);\n  // A band has snapped onto its step when the sum's mean distance from the\n  // staircase across it is under 0.04 sqrt(x); it starts to light at 0.12.\n  const nb = S.pp.length + 1;\n  err.fill(0, 0, nb);\n  cnt.fill(0, 0, nb);\n  bx.fill(0, 0, nb);\n  for (let j = 0; j \u003c NS; j++) {\n    const q = band[j];\n    err[q] += abs(v[j] - tru[j]);\n    bx[q] += xs[j];\n    cnt[q]++;\n  }\n  const ease = 1 - exp(-d / 0.3);\n  for (let q = 0; q \u003c nb; q++) {\n    const r = cnt[q] ? err[q] / cnt[q] / sqrt(bx[q] / cnt[q]) : 1, u = cl((0.12 - r) / 0.08, 0, 1);\n    lit[q] += (u * u * (3 - 2 * u) - lit[q]) * ease;\n  }\n}\n\n// A colour that would read brown or olive, a dark orange or yellow, is\n// paled toward grey and lifted.\nfunction tone(h, s, v, out) {\n  const hh = h - floor(h), warm = cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1) * (1 - v);\n  hsv(h, s * (1 - 0.9 * warm), v * (1 + 1.1 * warm), out);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, v, xs, tru, cN, cT, fill0, fill1, bg, rim, dot, over, short } = S;\n  const X = S.reach, n = S.nIn, f = n \u003c NZ ? S.z - n : 0, t = S.tilt;\n  // Columns: psi - t x, so at Tilt 1 only what the zeros add is left, the\n  // scale closing in from the whole of psi to about 2.2 sqrt(Reach).\n  const sc = CW / ((1 - t) * X + t * 2.2 * sqrt(X)), c0 = C0 + 35 * t;\n\n  // Orange and yellow fill dims less, so its shaded bands never read brown.\n  const h = S.hue + H0, hh = h - floor(h), keep = 1 - 0.7 * cl(1.2 - abs(hh - 0.12) / 0.13, 0, 1);\n  tone(h, 0.8, 0.6, fill0);\n  tone(h + 0.05, 0.75, 1, fill1);\n  hsv(0.64, 0.45, 0.15, bg);\n  tone(h + 0.25, 0.65, 0.8, short);\n  hsv(h - 0.03, 0.2, 1, rim);\n  hsv(h, 0.35, 1, dot);\n  over[0] = 1;\n  over[1] = 0.8;\n  over[2] = 0.45;\n  // The newest zero's wave, faintly in the fill while it comes in.\n  const wave = n \u003c NZ ? 0.1 * sin(PI * f) * sqrt(GAM[0] / GAM[n]) : 0, gw = n \u003c NZ ? GAM[n] : 0;\n\n  let prevC = c0 + (v[0] - t * xs[0]) * sc;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1);\n    const fr = fill0[0] + (fill1[0] - fill0[0]) * u, fg = fill0[1] + (fill1[1] - fill0[1]) * u, fb = fill0[2] + (fill1[2] - fill0[2]) * u;\n    const bk = 0.8 + 0.4 * u;\n    // Where the curve runs in this row: the span between the last sample of\n    // the row above and every sample of this one.\n    let lo = prevC, hi = prevC;\n    for (let q = 0; q \u003c SS; q++) {\n      const j = y * SS + q, cc = c0 + (v[j] - t * xs[j]) * sc;\n      cN[q] = cc;\n      cT[q] = c0 + (tru[j] - t * xs[j]) * sc;\n      if (cc \u003c lo) lo = cc;\n      if (cc > hi) hi = cc;\n      prevC = cc;\n    }\n    // Between one prime power and the next the fill is a band, every other\n    // band a little lighter, so the gaps between them show as band heights,\n    // and a band stays dim until the sum has snapped onto its step.\n    const bq = S.band[y * SS + 2];\n    const wv = (1 + wave * sin(gw * log(xs[y * SS + 2]))) * (bq & 1 ? 1.08 : 0.92) * (0.45 + 0.55 * S.lit[bq]);\n    const edge = (cN[0] + cN[1] + cN[2] + cN[3]) / 4;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Under both the sum and the staircase: the fill. Under the sum alone,\n      // where it runs past the staircase: gold. Under the staircase alone,\n      // where the sum falls short: the second colour. Under neither: dark.\n      let both = 0, ov = 0, sh = 0;\n      for (let q = 0; q \u003c SS; q++) {\n        const a = cl(cN[q] - x, 0, 1), b = cl(cT[q] - x, 0, 1), m = a \u003c b ? a : b;\n        both += m;\n        ov += a - m;\n        sh += b - m;\n      }\n      both /= SS;\n      ov /= SS;\n      sh /= SS;\n      const no = 1 - both - ov - sh, gl = 1 - (1 - wv * (0.55 + 0.45 * exp((x - edge) / 9))) * keep;\n      let r = bg[0] * bk * no + fr * gl * both + over[0] * ov + short[0] * sh;\n      let g = bg[1] * bk * no + fg * gl * both + over[1] * ov + short[1] * sh;\n      let b = bg[2] * bk * no + fb * gl * both + over[2] * ov + short[2] * sh;\n      // The curve itself: every LED its span touches.\n      const rr = cl(1 - max(lo - (x + 1), x - hi), 0, 1) * 0.75;\n      r += (rim[0] - r) * rr;\n      g += (rim[1] - g) * rr;\n      b += (rim[2] - b) * rr;\n      R[p] = r;\n      G[p] = g;\n      B[p] = b;\n    }\n  }\n  // Ticks down the left edge at each prime power: three LEDs for a prime,\n  // two for a square, one for a higher power.\n  for (const q of S.pp) {\n    const y = floor(((q[0] - 1) / (X - 1)) * H);\n    if (y \u003c 0 || y >= H) continue;\n    const len = q[2] === 1 ? 3 : q[2] === 2 ? 2 : 1;\n    for (let x = 0; x \u003c len; x++) {\n      const p = y * W + x;\n      R[p] = over[0];\n      G[p] = over[1];\n      B[p] = over[2];\n    }\n  }\n  // The critical line: every zero a dot at its height, dim until it is in.\n  for (let x = ZC; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      R[p] *= 0.5;\n      G[p] *= 0.5;\n      B[p] *= 0.5;\n    }\n  for (let m = 0; m \u003c NZ; m++) {\n    const yy = (GAM[m] / GTOP) * H - 0.5, y0 = floor(yy), fy = yy - y0;\n    const a = m \u003c n ? 1 : m === n ? 0.15 + 0.85 * f : 0.15, flash = m === n ? 1 : m === n - 1 ? 1 - f : 0;\n    for (let x = ZC; x \u003c W; x++)\n      for (let e = 0; e \u003c 2; e++) {\n        const y = y0 + e, wgt = e ? fy : 1 - fy;\n        if (y \u003c 0 || y >= H) continue;\n        const p = y * W + x;\n        R[p] += wgt * a * (dot[0] + flash);\n        G[p] += wgt * a * (dot[1] + flash);\n        B[p] += wgt * a * (dot[2] + flash);\n      }\n  }\n  // How many zeros are in, at the top right.\n  const digits = String(min(NZ, round(S.z)));\n  let x0 = ZC - 3 - (digits.length * 8 - 2);\n  for (const ch of digits) {\n    const bits = FONT[+ch];\n    for (let r = 0; r \u003c 5; r++)\n      for (let cc = 0; cc \u003c 3; cc++)\n        if ((bits >> (14 - r * 3 - cc)) & 1)\n          for (let a = 0; a \u003c 4; a++) {\n            const p = (3 + r * 2 + (a >> 1)) * W + x0 + cc * 2 + (a & 1);\n            R[p] = dot[0];\n            G[p] = dot[1];\n            B[p] = dot[2];\n          }\n    x0 += 8;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Reach=24..144, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the fill round the wheel, the shortfall colour a quarter turn on; gold stays gold. At 0 azure fill, violet where the sum falls short of the staircase and gold where it runs past; at 0.25 violet with orange, at 0.5 pale orange with green, at 0.75 green with azure. Orange and yellow fill is paled and dims less in its shaded bands, so it never reads brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the zeros come in, each a little faster than the last: at 2 the first is in after 0.7 s, 10 by 4.2 s, 100 by 10.9 s and all 200 by 13.1 s; the staircase holds for 4 s, the zeros are taken out again in 1.9 s and the bare line rests 1 s, 20 s round. At 0.2 ten times slower, at 3 one and a half times faster."},{"name":"Reach","min":24,"max":144,"about":"How far x runs down the 128 rows, from 1 to Reach, with psi = 0 on column 3 and psi = Reach on column 57. At 24, the start, 13 prime powers, 5.6 rows to each unit of x and steps 1.6 to 7 LEDs wide; at 84 33 of them; at 144 47, the steps under 2 LEDs, and the staircase leans on the line x as the prime number theorem says it must. The 200 zeros resolve the staircase less sharply the further x runs."},{"name":"Tilt","min":0,"max":1,"about":"Takes Tilt times x away from both curves and widens the scale to match. Up to 0.06 the staircase itself; at 1 only psi(x) - x is left, a sawtooth that slides left one unit for each unit of x and jumps right by log p at each prime power, drawn 5 LEDs to the unit at Reach 24: the part of psi that the zeros alone make, their waves summing to the teeth."}],"start":[0,2,24,0.06],"measures":{"motion":0.0929,"detail":0.028,"edges":0.4504,"complexity":0.7997,"coverage":0.9982,"colour":0.172,"drift":0.1028},"knobResponse":[0.141,0.0429,0.064,0.081]},{"slug":"ferris-wheel","title":"Ferris Wheel","family":"fair","round":25,"note":"밤 호숫가에서 지름 59 LED 의 관람차가 돌고, 곤돌라는 바퀴가 돌아도 늘 똑바로 매달려 있어요. 살과 테두리의 불빛이 쇼 여섯 가지를 6.5초씩 이어 가고, 호수가 바퀴와 불빛을 일렁이며 비춰요. K4 Wind 를 올리면 구름이 몰려오고 물그림자가 긴 빛줄기로 부서지며, 버튼은 다음 쇼로 넘겨요.","idea":"A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.","buttons":"K1 tap starts the next show at once.","code":"// ===== Patternflow pattern =====\n// Title:   Ferris Wheel\n// Family:  fair\n// Idea:    A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the light shows of the observation wheels on lake and river fronts\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1\n//\n// Knob 1: Lights. Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet.\n// Knob 2: Speed. How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower.\n// Knob 3: Spokes. How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one.\n// Knob 4: Wind. Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light.\n// Buttons: K1 tap starts the next show at once.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst fr = (v) => v - floor(v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The wheel: hub, outer rim with the lights, inner rim, and the truss between.\nconst CX = 32, CY = 38.5, R = 29.5, RI = 26.3, HUB = 3.6;\n// The first row of the lake, which is the line the scene mirrors in, the\n// promenade the legs stand on, and how much the reflection is squeezed.\nconst SEA = 87, FOOT = 84, SQ = 0.72;\n// Light bins along each spoke and round the rim; the shows paint these.\nconst NB = 24, NR = 120;\nconst SHOWS = 6, DUR = 6.5, FADE = 0.35;\nconst CLOUD = [12, 14, 28], LAKE = [3, 7, 22], TINT = [0.85, 0.92, 1];\n// A sine table for the ripples, which take five sines an LED.\nconst SN = F32(1024).map((_, i) => sin((i * TAU) / 1024));\nconst sn = (v) => SN[(v * 162.97) & 1023];\nconst STEEL = [26, 28, 42], LEG = [22, 24, 38], WARM = [255, 214, 150], WHITE = [255, 250, 240];\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, wt: 0, co: 0, rot: 0.2, st: 0, sh: 0, prev: -1, ps: 0, ns: 12, ng: 12, wind: 0.06, h: 0.53,\n    f: F32(N * 3), cn: F32(256 * 76), sky: F32(SEA * W * 3), gm: F32(SEA * W), fg: F32(N * 3), fm: F32(N), ga: F32(N * 3),\n    sp: F32(32 * NB * 3), rm: F32(NR * 3), hb: [0, 0, 0], sp2: F32(32 * NB * 3), rm2: F32(NR * 3), hb2: [0, 0, 0],\n    stars: [], people: [], cab: [],\n  });\n  // Night sky, paler towards the horizon, and the hills behind the far shore\n  // with a few houses lit.\n  for (let y = 0; y \u003c SEA; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y / SEA, o = (y * W + x) * 3, hy = 77 + 2.4 * sin(x * 0.11 + 0.7) + 1.4 * sin(x * 0.29 + 2);\n      let c = [3 + 14 * v * v, 5 + 18 * v * v, 22 + 46 * v * v];\n      if (y > hy) c = [7, 8, 18];\n      if (y > hy + 1 && hash(x, y) \u003c 0.025) c = [120, 96, 60];\n      P.sky.set(c, o);\n      // Where the wheel's light lands on the haze: round the wheel and low over the shore.\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2);\n      P.gm[y * W + x] = 0.75 * exp(-(max(0, r - 18) ** 2) / 420) + 0.45 * exp(-(SEA - y) / 22);\n    }\n  // Cloud: three octaves of value noise 256 wide, so it can scroll round.\n  const seed = floor(rnd() * 999);\n  const vn = (x, y, cx, cy, s) => {\n    const nx = 256 / cx, gx = x / cx, gy = y / cy, ix = floor(gx), iy = floor(gy), u = sm(0, 1, gx - ix), v = sm(0, 1, gy - iy);\n    const h = (i, j) => hash(((ix + i) % nx) + s, iy + j);\n    return mix(mix(h(0, 0), h(1, 0), u), mix(h(0, 1), h(1, 1), u), v);\n  };\n  for (let y = 0; y \u003c 76; y++) for (let x = 0; x \u003c 256; x++) P.cn[y * 256 + x] = 0.55 * vn(x, y, 32, 9, seed) + 0.3 * vn(x, y, 16, 5, seed + 7) + 0.15 * vn(x, y, 8, 3, seed + 13);\n  for (let i = 0; i \u003c 36; i++) P.stars.push([floor(rnd() * W), floor(rnd() * 46), 40 + rnd() * 70, rnd() * TAU, 0.6 + rnd()]);\n  // The promenade, the boarding platform with its stairs, two lamps and the\n  // ticket booth, kept as one layer with its own coverage.\n  const fg = (x, y, c, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    P.fg.set(c, (y * W + x) * 3);\n    P.fm[y * W + x] = a;\n  };\n  const glow = (gx, gy, c, k, s) => {\n    for (let y = max(0, gy - 12); y \u003c min(SEA, gy + 12); y++)\n      for (let x = max(0, gx - 12); x \u003c min(W, gx + 12); x++) {\n        const g = k * exp(-((x - gx) ** 2 + (y - gy) ** 2) / s);\n        for (let n = 0; n \u003c 3; n++) P.ga[(y * W + x) * 3 + n] += c[n] * g;\n      }\n  };\n  for (let x = 0; x \u003c W; x++) {\n    fg(x, 84, [34, 28, 32]);\n    fg(x, 85, [28, 24, 30]);\n    fg(x, 86, [64, 60, 70]);\n  }\n  for (let x = 22; x \u003c= 42; x++) fg(x, 77, [78, 74, 92]), fg(x, 78, [30, 30, 42]);\n  for (const x of [24, 32, 40]) for (let y = 79; y \u003c 84; y++) fg(x, y, [22, 22, 32]);\n  for (let i = 0; i \u003c 6; i++) fg(21 - i, 78 + i, [60, 56, 70]), fg(21 - i, 79 + i, [26, 24, 34]);\n  for (const lx of [5, 46]) {\n    for (let y = 76; y \u003c 84; y++) fg(lx, y, [36, 36, 48]);\n    fg(lx, 75, [255, 230, 180]);\n    fg(lx - 1, 75, [120, 100, 70]);\n    fg(lx + 1, 75, [120, 100, 70]);\n    glow(lx, 76, WARM, 0.32, 14);\n  }\n  for (let x = 53; x \u003c= 62; x++) {\n    const st = ((x - 53) >> 1) & 1 ? [226, 218, 206] : [200, 36, 56];\n    fg(x, 72, st);\n    if (!(x & 1)) fg(x, 73, st);\n    for (let y = 74; y \u003c 84; y++) fg(x, y, x === 53 || x === 62 ? [40, 22, 30] : [70, 34, 46]);\n  }\n  for (let y = 75; y \u003c= 78; y++) for (let x = 55; x \u003c= 60; x++) fg(x, y, [255, 196, 120].map((v) => v * (0.85 - 0.08 * (y - 75))));\n  for (const [x, y] of [[58, 76], [57, 78], [58, 78], [59, 78]]) fg(x, y, [40, 24, 24]);\n  fg(58, 77, [56, 32, 30]);\n  for (let x = 54; x \u003c= 61; x++) fg(x, 79, [160, 116, 70]), fg(x, 81, (x & 1) ? [240, 200, 90] : [110, 70, 40]);\n  glow(58, 80, [255, 180, 100], 0.28, 18);\n  // People on the promenade, a queue at the foot of the stairs and two who walk.\n  for (const [x, w] of [[9, 0], [14, 0], [17, 0], [49, 0], [27, 2.2], [40, -1.6]])\n    P.people.push({ x: x + 0.5, w, c: hsv(rnd(), 0.5, 0.25 + 0.15 * rnd()), sk: rnd() \u003c 0.5 });\n  for (let i = 0; i \u003c 32; i++) P.cab.push([0.55 + 0.45 * rnd(), rnd() \u003c 0.4]);\n}\n\nfunction next(P) {\n  P.prev = P.sh;\n  P.ps = P.st;\n  P.sh = (P.sh + 1) % SHOWS;\n  P.st = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  const v = cl(k[1], 0.2, 3) / 2;\n  let ns = round(cl(k[2], 12, 32));\n  if (ns > 18) ns += ns & 1;\n  Object.assign(P, { h: fr(0.53 + cl(k[0], 0, 1)), ns, ng: ns > 18 ? ns / 2 : ns, wind: cl(k[3], 0, 1) });\n  P.t += dt;\n  P.wt += dt * v * (0.7 + 1.5 * P.wind);\n  P.co += dt * v * (1 + 10 * P.wind);\n  P.rot += (dt * v * TAU) / 40;\n  P.st += dt * v;\n  if ((input.btnPressed && input.btnPressed[0]) || P.st >= DUR) next(P);\n  for (const q of P.people)\n    if (q.w) {\n      q.x += q.w * dt * v;\n      if (q.x > W + 3) q.x = -3;\n      if (q.x \u003c -3) q.x = W + 3;\n    }\n}\n\n// One show at its time s paints the spoke bins, the rim bins and the hub.\nfunction paint(P, sh, s, SP, RM, HB) {\n  const ns = P.ns, [A, B, C] = P.pal, rot = P.rot;\n  const spk = (k, b, c, I) => {\n    const o = (k * NB + b) * 3;\n    (SP[o] = c[0] * I), (SP[o + 1] = c[1] * I), (SP[o + 2] = c[2] * I);\n  };\n  const rim = (j, c, I) => ((RM[j * 3] = c[0] * I), (RM[j * 3 + 1] = c[1] * I), (RM[j * 3 + 2] = c[2] * I));\n  const lerp = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n  const hub = (c, I) => ((HB[0] = c[0] * I), (HB[1] = c[1] * I), (HB[2] = c[2] * I));\n  const uB = (b) => (b + 0.5) / NB;\n  if (sh === 0) {\n    // Light runs out along the spokes, brightest where a beam sweeps round\n    // against the turn; marquee bulbs chase round the rim and three white\n    // comets run through them.\n    const sw = fr(-s * 0.3), mq = floor(s * 9);\n    for (let k = 0; k \u003c ns; k++) {\n      const dl = fr(k / ns - sw), bm = exp(-dl / 0.22), wt = 0.5 * exp(-dl * ns * 1.5);\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), ds = exp(-(((fr(u * 2 - s * 1.1) - 0.5) / 0.17) ** 2));\n        spk(k, b, lerp(lerp(C, A, u), WHITE, wt), 0.14 + 0.25 * bm + 0.61 * ds * (0.45 + 0.55 * bm));\n      }\n    }\n    for (let j = 0; j \u003c NR; j++) {\n      let I = 0;\n      for (let m = 0; m \u003c 3; m++) I = max(I, exp(-fr(fr(s * 0.42 + m / 3) - j / NR) / 0.04));\n      rim(j, lerp(B, WHITE, I), max(I, (floor(j / 2) + mq) % 3 ? 0.22 : 0.9));\n    }\n    hub(A, 0.8);\n  } else if (sh === 1) {\n    // A colour wipe across the whole wheel, lit full, with a white front.\n    const X = CX + 35 * cos((PI * s) / 3.25), f0 = 0.88 * sm(0, 0.5, s);\n    const col = (x) => lerp(lerp(A, B, sm(X - 2.5, X + 2.5, x)), WHITE, 0.7 * exp(-(((x - X) / 2.2) ** 2)));\n    for (let k = 0; k \u003c ns; k++) {\n      const c = cos(rot + (TAU * k) / ns);\n      for (let b = 0; b \u003c NB; b++) spk(k, b, col(CX + (HUB + uB(b) * (R - HUB)) * c), f0);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, col(CX + R * cos(rot + (TAU * (j + 0.5)) / NR)), f0);\n    hub(col(CX), f0);\n  } else if (sh === 2) {\n    // A spiral arm winds out from the hub and round the wheel.\n    for (let k = 0; k \u003c ns; k++)\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), v = fr(u * 0.9 + k / ns - s * 0.45);\n        spk(k, b, lerp(B, C, u), 0.07 + 0.93 * exp(-(((v - 0.5) / 0.2) ** 2)));\n      }\n    for (let j = 0; j \u003c NR; j++) rim(j, A, fr((j / NR) * ns * 0.5 - s * 0.9) \u003c 0.5 ? 0.95 : 0.12);\n    hub(B, 0.9);\n  } else if (sh === 3) {\n    // Spoke after spoke lights up round the wheel and holds before it blinks out.\n    const n = (s / 3.6) * ns, blink = s > 4.8 && fr((s - 4.8) * 2.6) > 0.5;\n    for (let k = 0; k \u003c ns; k++) {\n      const I = blink ? 0.04 : k \u003c floor(n) ? 0.9 : k === floor(n) ? fr(n) : 0.05;\n      for (let b = 0; b \u003c NB; b++) spk(k, b, k === floor(n) ? WHITE : k & 1 ? B : A, I);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, C, blink ? 0.04 : j / NR \u003c n / ns ? 0.95 : 0.08);\n    hub(WHITE, blink ? 0.1 : 0.85);\n  } else if (sh === 4) {\n    // Rings run out from the hub, each a colour, and flash the rim on arriving.\n    SP.fill(0, 0, ns * NB * 3);\n    let Ir = 0.08, Ih = 0.2, cr = A;\n    for (let m = 0; m \u003c 3; m++) {\n      // Rings are born in the order A, C, B, so each takes the next colour.\n      const f = fr(s * 0.4 + m / 3), c = P.pal[m], e = exp(-(((1 - f) / 0.06) ** 2));\n      for (let k = 0; k \u003c ns; k++)\n        for (let b = 0; b \u003c NB; b++) {\n          const I = exp(-(((uB(b) - f) / 0.07) ** 2)), o = (k * NB + b) * 3;\n          for (let n = 0; n \u003c 3; n++) SP[o + n] += c[n] * I;\n        }\n      if (e > Ir) (Ir = e), (cr = c);\n      Ih = max(Ih, exp(-((f / 0.08) ** 2)));\n    }\n    for (let k = 0; k \u003c ns * NB * 3; k++) SP[k] += 14;\n    for (let j = 0; j \u003c NR; j++) rim(j, cr, max(0.1, Ir));\n    hub(WHITE, Ih);\n  } else {\n    // Every spoke its own colour, the rainbow turning round, with sparkles.\n    const tw = floor(s * 7);\n    for (let k = 0; k \u003c ns; k++) {\n      const c = hsv(P.h + fr(k / ns + s * 0.12), 0.85, 1);\n      for (let b = 0; b \u003c NB; b++) hash(k * NB + b, tw) \u003c 0.07 ? spk(k, b, WHITE, 1) : spk(k, b, c, 0.72);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, hsv(P.h + fr(j / NR - s * 0.25), 0.8, 1), 0.75);\n    hub(WHITE, 0.8);\n  }\n}\n\nlet F;\nconst add = (x, y, c, k) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] += c[n] * k;\n};\nconst put = (x, y, c, k = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// A leg of the A-frame from the hub to the promenade, a dark girder.\nfunction leg(ax, ay, bx, by, hw, edge) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy;\n  for (let y = floor(ay); y \u003c= by; y++)\n    for (let x = max(0, floor(min(ax, bx) - 2)); x \u003c= min(W - 1, max(ax, bx) + 2); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, d = sqrt(ex * ex + ey * ey);\n      const w = cl(hw + 0.5 - d, 0, 1);\n      if (w \u003c= 0) continue;\n      const o = (y * W + x) * 3, lit = 0.5 + 0.5 * cl((d - hw + 0.6) * 1.5, 0, 1);\n      const fl = 0.32 * exp(-(FOOT - y) / 9);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], LEG[n] + edge[n] * lit + WARM[n] * fl, w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.f) return;\n  F = P.f;\n  const ns = P.ns, rot = P.rot, t = P.t;\n  P.pal = [hsv(P.h, 0.85, 1), hsv(P.h + 0.42, 0.8, 1), hsv(P.h + 0.2, 0.75, 1)];\n  const SP = P.sp, RM = P.rm, HB = P.hb;\n  paint(P, P.sh, P.st, SP, RM, HB);\n  if (P.prev >= 0 && P.st \u003c FADE) {\n    const q = P.st / FADE;\n    paint(P, P.prev, P.ps + P.st, P.sp2, P.rm2, P.hb2);\n    for (let i = 0; i \u003c ns * NB * 3; i++) SP[i] = mix(P.sp2[i], SP[i], q);\n    for (let i = 0; i \u003c NR * 3; i++) RM[i] = mix(P.rm2[i], RM[i], q);\n    for (let n = 0; n \u003c 3; n++) HB[n] = mix(P.hb2[n], HB[n], q);\n  }\n  // The wheel's light in the haze: the mean colour of every bin.\n  const gc = [0, 0, 0], ws = ((R - HUB) / NB) * ns, wr = (TAU * R) / NR;\n  for (let i = 0; i \u003c ns * NB; i++) for (let n = 0; n \u003c 3; n++) gc[n] += SP[i * 3 + n] * ws;\n  for (let j = 0; j \u003c NR; j++) for (let n = 0; n \u003c 3; n++) gc[n] += RM[j * 3 + n] * wr * ns;\n  for (let n = 0; n \u003c 3; n++) gc[n] /= ns * NB * ws + NR * wr * ns;\n  // The haze takes a dim show nearly whole and a bright one by less.\n  const gk = 0.62 / (1 + (1.6 * max(...gc)) / 255);\n  for (let n = 0; n \u003c 3; n++) gc[n] *= gk;\n\n  // Sky, haze, stars and a thin moon.\n  for (let i = 0, o = 0; i \u003c SEA * W; i++, o += 3) {\n    const g = P.gm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = P.sky[o + n] + gc[n] * g;\n  }\n  for (const [x, y, b, ph, sp] of P.stars) add(x, y, [1, 1, 1.15], b * (0.65 + 0.35 * sin(t * sp + ph)));\n  for (let y = 3; y \u003c 11; y++)\n    for (let x = 51; x \u003c 60; x++) {\n      const a = (x + 0.5 - 55) ** 2 + (y + 0.5 - 7) ** 2, b = (x + 0.5 - 56.6) ** 2 + (y + 0.5 - 6) ** 2;\n      const k = cl(3.4 - sqrt(a), 0, 1) * cl(sqrt(b) - 2.9, 0, 1);\n      if (k > 0) add(x, y, [236, 228, 196], k);\n    }\n  // Clouds come in on the wind, lit from below by the wheel.\n  const wd = P.wind, th = 0.68 - 0.4 * wd, co = floor(P.co), cf = P.co - co;\n  for (let y = 0; y \u003c 76; y++) {\n    const hf = sm(76, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const c0 = y * 256, n = mix(P.cn[c0 + ((x + co) & 255)], P.cn[c0 + ((x + co + 1) & 255)], cf), dn = sm(th - 0.04, th + 0.22, n) * hf * 0.7;\n      if (dn \u003c= 0) continue;\n      const i = y * W + x, o = i * 3, g = 3 * (P.gm[i] + 0.2);\n      for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], CLOUD[k] + gc[k] * g, dn);\n    }\n  }\n\n  // Spokes, truss and rims, lit from the show's bins.\n  const st = STEEL.map((v, n) => v + gc[n] * 0.5);\n  for (let y = 7; y \u003c= 70; y++) {\n    const dy = y + 0.5 - CY;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - CX, r2 = dx * dx + dy * dy;\n      if (r2 > (R + 1.4) ** 2) continue;\n      const r = sqrt(r2), o = (y * W + x) * 3;\n      let a = (atan2(dy, dx) - rot) / TAU;\n      a -= floor(a);\n      const q = a * ns, kk = round(q), d = (abs(q - kk) * TAU * r) / ns;\n      const wsp = r > HUB && r \u003c R ? cl(1.25 - 1.5 * d, 0, 1) : 0;\n      const wrm = cl(1.25 - 1.5 * abs(r - R), 0, 1);\n      let wst = cl(1 - 1.6 * abs(r - RI), 0, 1) * 0.8;\n      if (r > RI && r \u003c R) {\n        const z = abs(fr(a * ns * 2) - 0.5) * 2, tt = (r - RI) / (R - RI);\n        wst = max(wst, cl(1 - 2.2 * abs(z - tt), 0, 1) * 0.7);\n      }\n      const occ = max(wsp, wrm, wst);\n      if (occ \u003c= 0) continue;\n      const so = ((kk % ns) * NB + min(NB - 1, floor(((r - HUB) / (R - HUB)) * NB))) * 3, ro = (floor(a * NR) % NR) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = F[o + n] * (1 - 0.85 * occ) + st[n] * occ + SP[so + n] * wsp + RM[ro + n] * wrm;\n    }\n  }\n\n  // The gondolas hang level from the rim, swinging in the wind.\n  const [A, B, C] = P.pal, step = ns / P.ng;\n  for (let i = 0; i \u003c P.ng; i++) {\n    const ang = rot + (TAU * i * step) / ns, px = CX + R * cos(ang), py = CY + R * sin(ang);\n    const sw = wd * (0.45 * sin(t * 1.8 + i * 1.1) + 0.25 * sin(t * 3.1 + i * 2.3)) + 0.05 * sin(t * 1.4 + i);\n    const gx = round(px - 0.5), gy = round(py - 0.5), cx = round(px - 0.5 + 3.2 * sin(sw)), [wk, empty] = P.cab[i];\n    const body = [A, B, C][i % 3].map((v, n) => v * 0.62 + gc[n]);\n    put(gx, gy, [150, 150, 170]);\n    put(round(px - 0.5 + 1.2 * sin(sw)), gy + 1, [60, 60, 76]);\n    for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + 2, body), put(cx + dx, gy + 5, body, 0.75);\n    for (let dy = 3; dy \u003c= 4; dy++) {\n      put(cx - 2, gy + dy, body, 0.85);\n      put(cx + 2, gy + dy, body, 0.85);\n      for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + dy, WARM, (empty || dx || dy > 3 ? 0.78 : 0.2) * wk);\n    }\n  }\n\n  // The A-frame in front of the wheel, and the hub on it.\n  const edge = gc.map((v) => v * 1.4);\n  leg(CX, CY, 12, FOOT, 0.85, edge);\n  leg(CX, CY, 52, FOOT, 0.85, edge);\n  for (let y = 33; y \u003c= 44; y++)\n    for (let x = 26; x \u003c= 38; x++) {\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2), k = cl(HUB + 0.5 - r, 0, 1);\n      if (k \u003c= 0) continue;\n      const o = (y * W + x) * 3, core = exp(-(r * r) / 2.5);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], 30 + HB[n] * (1 - r / 6) + WHITE[n] * core * 0.6, k);\n    }\n\n  // The shore: promenade, platform, lamps, booth, the warm light they throw.\n  for (let i = 70 * W, o = i * 3; i \u003c SEA * W; i++, o += 3) {\n    const m = P.fm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], P.fg[o + n], m) + P.ga[o + n];\n  }\n  for (let x = 23; x \u003c= 41; x += 2) put(x, 76, B, floor(t * 4 - x / 2) % 3 ? 0.35 : 0.85);\n  for (let x = 53; x \u003c= 62; x += 2) put(x, 71, WARM, floor(t * 5 + x / 2) % 2 ? 0.3 : 1);\n  for (const q of P.people) {\n    const x = floor(q.x), gait = q.w ? floor(q.x * 1.5) & 1 : 0;\n    put(x, 79, q.sk ? [150, 110, 86] : [70, 52, 44]);\n    for (let y = 80; y \u003c= 82; y++) put(x, y, q.c), put(x + 1, y, q.c, 0.8);\n    put(x + gait, 83, [16, 16, 24]);\n    put(x + 1 - gait, 83, [16, 16, 24], 0.7);\n  }\n\n  // The lake: the scene above, mirrored, squeezed and broken by the ripples.\n  const wt = P.wt, gw = 0.55 + 0.35 * wd, pw = 3 - 1.2 * wd, sp = 0.5 + 6 * wd;\n  const row = (ys, sx) => (cl(round(ys), 0, SEA - 1) * W + sx) * 3;\n  for (let y = SEA; y \u003c H; y++) {\n    const d = y + 0.5 - SEA, dn = d / (H - SEA), amp = (0.35 + 1.9 * wd) * (0.45 + dn), rf = 0.7 - 0.3 * dn;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = amp * (0.6 * sn(d * 0.75 - wt * 1.9 + x * 0.04) + 0.4 * sn(d * 2.3 + x * 0.37 - wt * 3.3));\n      const ys = SEA - 0.5 - d / SQ + amp * 0.45 * sn(x * 0.45 + d * 1.1 - wt * 2.6), sx = cl(round(x + ox), 0, W - 1);\n      const hl = (0.5 + 0.5 * sn(d * 1.7 - wt * 1.4 + 1.6 * sn(x * 0.15 + d * 0.3 + wt * 0.5))) ** pw, o = (y * W + x) * 3;\n      // Choppy water stretches each light into a streak: the brightest of the\n      // rows a wave face can show here, above the mirror point and below it.\n      const s1 = row(ys, sx), s0 = row(ys - sp, sx), s2 = row(ys + sp, sx), s3 = row(ys - sp / 2, sx), s4 = row(ys + sp / 2, sx);\n      for (let n = 0; n \u003c 3; n++)\n        F[o + n] = LAKE[n] * (1 + dn * 0.5) + gc[n] * gw * hl + (0.55 * F[s1 + n] + 0.5 * max(F[s0 + n], F[s2 + n], F[s3 + n], F[s4 + n])) * rf * TINT[n];\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-ferris-wheel","type":"code","name":"ferris-wheel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ferris Wheel\n// Family:  fair\n// Idea:    A big Ferris wheel turns slowly on a lakeside promenade at night with its gondolas hanging level, the light strips on its spokes and rim run one light show after another, and the lake below breaks the wheel and its lights into ripples.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the light shows of the observation wheels on lake and river fronts\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1\n//\n// Knob 1: Lights. Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet.\n// Knob 2: Speed. How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower.\n// Knob 3: Spokes. How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one.\n// Knob 4: Wind. Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light.\n// Buttons: K1 tap starts the next show at once.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst fr = (v) => v - floor(v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The wheel: hub, outer rim with the lights, inner rim, and the truss between.\nconst CX = 32, CY = 38.5, R = 29.5, RI = 26.3, HUB = 3.6;\n// The first row of the lake, which is the line the scene mirrors in, the\n// promenade the legs stand on, and how much the reflection is squeezed.\nconst SEA = 87, FOOT = 84, SQ = 0.72;\n// Light bins along each spoke and round the rim; the shows paint these.\nconst NB = 24, NR = 120;\nconst SHOWS = 6, DUR = 6.5, FADE = 0.35;\nconst CLOUD = [12, 14, 28], LAKE = [3, 7, 22], TINT = [0.85, 0.92, 1];\n// A sine table for the ripples, which take five sines an LED.\nconst SN = F32(1024).map((_, i) => sin((i * TAU) / 1024));\nconst sn = (v) => SN[(v * 162.97) & 1023];\nconst STEEL = [26, 28, 42], LEG = [22, 24, 38], WARM = [255, 214, 150], WHITE = [255, 250, 240];\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, wt: 0, co: 0, rot: 0.2, st: 0, sh: 0, prev: -1, ps: 0, ns: 12, ng: 12, wind: 0.06, h: 0.53,\n    f: F32(N * 3), cn: F32(256 * 76), sky: F32(SEA * W * 3), gm: F32(SEA * W), fg: F32(N * 3), fm: F32(N), ga: F32(N * 3),\n    sp: F32(32 * NB * 3), rm: F32(NR * 3), hb: [0, 0, 0], sp2: F32(32 * NB * 3), rm2: F32(NR * 3), hb2: [0, 0, 0],\n    stars: [], people: [], cab: [],\n  });\n  // Night sky, paler towards the horizon, and the hills behind the far shore\n  // with a few houses lit.\n  for (let y = 0; y \u003c SEA; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y / SEA, o = (y * W + x) * 3, hy = 77 + 2.4 * sin(x * 0.11 + 0.7) + 1.4 * sin(x * 0.29 + 2);\n      let c = [3 + 14 * v * v, 5 + 18 * v * v, 22 + 46 * v * v];\n      if (y > hy) c = [7, 8, 18];\n      if (y > hy + 1 && hash(x, y) \u003c 0.025) c = [120, 96, 60];\n      P.sky.set(c, o);\n      // Where the wheel's light lands on the haze: round the wheel and low over the shore.\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2);\n      P.gm[y * W + x] = 0.75 * exp(-(max(0, r - 18) ** 2) / 420) + 0.45 * exp(-(SEA - y) / 22);\n    }\n  // Cloud: three octaves of value noise 256 wide, so it can scroll round.\n  const seed = floor(rnd() * 999);\n  const vn = (x, y, cx, cy, s) => {\n    const nx = 256 / cx, gx = x / cx, gy = y / cy, ix = floor(gx), iy = floor(gy), u = sm(0, 1, gx - ix), v = sm(0, 1, gy - iy);\n    const h = (i, j) => hash(((ix + i) % nx) + s, iy + j);\n    return mix(mix(h(0, 0), h(1, 0), u), mix(h(0, 1), h(1, 1), u), v);\n  };\n  for (let y = 0; y \u003c 76; y++) for (let x = 0; x \u003c 256; x++) P.cn[y * 256 + x] = 0.55 * vn(x, y, 32, 9, seed) + 0.3 * vn(x, y, 16, 5, seed + 7) + 0.15 * vn(x, y, 8, 3, seed + 13);\n  for (let i = 0; i \u003c 36; i++) P.stars.push([floor(rnd() * W), floor(rnd() * 46), 40 + rnd() * 70, rnd() * TAU, 0.6 + rnd()]);\n  // The promenade, the boarding platform with its stairs, two lamps and the\n  // ticket booth, kept as one layer with its own coverage.\n  const fg = (x, y, c, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    P.fg.set(c, (y * W + x) * 3);\n    P.fm[y * W + x] = a;\n  };\n  const glow = (gx, gy, c, k, s) => {\n    for (let y = max(0, gy - 12); y \u003c min(SEA, gy + 12); y++)\n      for (let x = max(0, gx - 12); x \u003c min(W, gx + 12); x++) {\n        const g = k * exp(-((x - gx) ** 2 + (y - gy) ** 2) / s);\n        for (let n = 0; n \u003c 3; n++) P.ga[(y * W + x) * 3 + n] += c[n] * g;\n      }\n  };\n  for (let x = 0; x \u003c W; x++) {\n    fg(x, 84, [34, 28, 32]);\n    fg(x, 85, [28, 24, 30]);\n    fg(x, 86, [64, 60, 70]);\n  }\n  for (let x = 22; x \u003c= 42; x++) fg(x, 77, [78, 74, 92]), fg(x, 78, [30, 30, 42]);\n  for (const x of [24, 32, 40]) for (let y = 79; y \u003c 84; y++) fg(x, y, [22, 22, 32]);\n  for (let i = 0; i \u003c 6; i++) fg(21 - i, 78 + i, [60, 56, 70]), fg(21 - i, 79 + i, [26, 24, 34]);\n  for (const lx of [5, 46]) {\n    for (let y = 76; y \u003c 84; y++) fg(lx, y, [36, 36, 48]);\n    fg(lx, 75, [255, 230, 180]);\n    fg(lx - 1, 75, [120, 100, 70]);\n    fg(lx + 1, 75, [120, 100, 70]);\n    glow(lx, 76, WARM, 0.32, 14);\n  }\n  for (let x = 53; x \u003c= 62; x++) {\n    const st = ((x - 53) >> 1) & 1 ? [226, 218, 206] : [200, 36, 56];\n    fg(x, 72, st);\n    if (!(x & 1)) fg(x, 73, st);\n    for (let y = 74; y \u003c 84; y++) fg(x, y, x === 53 || x === 62 ? [40, 22, 30] : [70, 34, 46]);\n  }\n  for (let y = 75; y \u003c= 78; y++) for (let x = 55; x \u003c= 60; x++) fg(x, y, [255, 196, 120].map((v) => v * (0.85 - 0.08 * (y - 75))));\n  for (const [x, y] of [[58, 76], [57, 78], [58, 78], [59, 78]]) fg(x, y, [40, 24, 24]);\n  fg(58, 77, [56, 32, 30]);\n  for (let x = 54; x \u003c= 61; x++) fg(x, 79, [160, 116, 70]), fg(x, 81, (x & 1) ? [240, 200, 90] : [110, 70, 40]);\n  glow(58, 80, [255, 180, 100], 0.28, 18);\n  // People on the promenade, a queue at the foot of the stairs and two who walk.\n  for (const [x, w] of [[9, 0], [14, 0], [17, 0], [49, 0], [27, 2.2], [40, -1.6]])\n    P.people.push({ x: x + 0.5, w, c: hsv(rnd(), 0.5, 0.25 + 0.15 * rnd()), sk: rnd() \u003c 0.5 });\n  for (let i = 0; i \u003c 32; i++) P.cab.push([0.55 + 0.45 * rnd(), rnd() \u003c 0.4]);\n}\n\nfunction next(P) {\n  P.prev = P.sh;\n  P.ps = P.st;\n  P.sh = (P.sh + 1) % SHOWS;\n  P.st = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  const v = cl(k[1], 0.2, 3) / 2;\n  let ns = round(cl(k[2], 12, 32));\n  if (ns > 18) ns += ns & 1;\n  Object.assign(P, { h: fr(0.53 + cl(k[0], 0, 1)), ns, ng: ns > 18 ? ns / 2 : ns, wind: cl(k[3], 0, 1) });\n  P.t += dt;\n  P.wt += dt * v * (0.7 + 1.5 * P.wind);\n  P.co += dt * v * (1 + 10 * P.wind);\n  P.rot += (dt * v * TAU) / 40;\n  P.st += dt * v;\n  if ((input.btnPressed && input.btnPressed[0]) || P.st >= DUR) next(P);\n  for (const q of P.people)\n    if (q.w) {\n      q.x += q.w * dt * v;\n      if (q.x > W + 3) q.x = -3;\n      if (q.x \u003c -3) q.x = W + 3;\n    }\n}\n\n// One show at its time s paints the spoke bins, the rim bins and the hub.\nfunction paint(P, sh, s, SP, RM, HB) {\n  const ns = P.ns, [A, B, C] = P.pal, rot = P.rot;\n  const spk = (k, b, c, I) => {\n    const o = (k * NB + b) * 3;\n    (SP[o] = c[0] * I), (SP[o + 1] = c[1] * I), (SP[o + 2] = c[2] * I);\n  };\n  const rim = (j, c, I) => ((RM[j * 3] = c[0] * I), (RM[j * 3 + 1] = c[1] * I), (RM[j * 3 + 2] = c[2] * I));\n  const lerp = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n  const hub = (c, I) => ((HB[0] = c[0] * I), (HB[1] = c[1] * I), (HB[2] = c[2] * I));\n  const uB = (b) => (b + 0.5) / NB;\n  if (sh === 0) {\n    // Light runs out along the spokes, brightest where a beam sweeps round\n    // against the turn; marquee bulbs chase round the rim and three white\n    // comets run through them.\n    const sw = fr(-s * 0.3), mq = floor(s * 9);\n    for (let k = 0; k \u003c ns; k++) {\n      const dl = fr(k / ns - sw), bm = exp(-dl / 0.22), wt = 0.5 * exp(-dl * ns * 1.5);\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), ds = exp(-(((fr(u * 2 - s * 1.1) - 0.5) / 0.17) ** 2));\n        spk(k, b, lerp(lerp(C, A, u), WHITE, wt), 0.14 + 0.25 * bm + 0.61 * ds * (0.45 + 0.55 * bm));\n      }\n    }\n    for (let j = 0; j \u003c NR; j++) {\n      let I = 0;\n      for (let m = 0; m \u003c 3; m++) I = max(I, exp(-fr(fr(s * 0.42 + m / 3) - j / NR) / 0.04));\n      rim(j, lerp(B, WHITE, I), max(I, (floor(j / 2) + mq) % 3 ? 0.22 : 0.9));\n    }\n    hub(A, 0.8);\n  } else if (sh === 1) {\n    // A colour wipe across the whole wheel, lit full, with a white front.\n    const X = CX + 35 * cos((PI * s) / 3.25), f0 = 0.88 * sm(0, 0.5, s);\n    const col = (x) => lerp(lerp(A, B, sm(X - 2.5, X + 2.5, x)), WHITE, 0.7 * exp(-(((x - X) / 2.2) ** 2)));\n    for (let k = 0; k \u003c ns; k++) {\n      const c = cos(rot + (TAU * k) / ns);\n      for (let b = 0; b \u003c NB; b++) spk(k, b, col(CX + (HUB + uB(b) * (R - HUB)) * c), f0);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, col(CX + R * cos(rot + (TAU * (j + 0.5)) / NR)), f0);\n    hub(col(CX), f0);\n  } else if (sh === 2) {\n    // A spiral arm winds out from the hub and round the wheel.\n    for (let k = 0; k \u003c ns; k++)\n      for (let b = 0; b \u003c NB; b++) {\n        const u = uB(b), v = fr(u * 0.9 + k / ns - s * 0.45);\n        spk(k, b, lerp(B, C, u), 0.07 + 0.93 * exp(-(((v - 0.5) / 0.2) ** 2)));\n      }\n    for (let j = 0; j \u003c NR; j++) rim(j, A, fr((j / NR) * ns * 0.5 - s * 0.9) \u003c 0.5 ? 0.95 : 0.12);\n    hub(B, 0.9);\n  } else if (sh === 3) {\n    // Spoke after spoke lights up round the wheel and holds before it blinks out.\n    const n = (s / 3.6) * ns, blink = s > 4.8 && fr((s - 4.8) * 2.6) > 0.5;\n    for (let k = 0; k \u003c ns; k++) {\n      const I = blink ? 0.04 : k \u003c floor(n) ? 0.9 : k === floor(n) ? fr(n) : 0.05;\n      for (let b = 0; b \u003c NB; b++) spk(k, b, k === floor(n) ? WHITE : k & 1 ? B : A, I);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, C, blink ? 0.04 : j / NR \u003c n / ns ? 0.95 : 0.08);\n    hub(WHITE, blink ? 0.1 : 0.85);\n  } else if (sh === 4) {\n    // Rings run out from the hub, each a colour, and flash the rim on arriving.\n    SP.fill(0, 0, ns * NB * 3);\n    let Ir = 0.08, Ih = 0.2, cr = A;\n    for (let m = 0; m \u003c 3; m++) {\n      // Rings are born in the order A, C, B, so each takes the next colour.\n      const f = fr(s * 0.4 + m / 3), c = P.pal[m], e = exp(-(((1 - f) / 0.06) ** 2));\n      for (let k = 0; k \u003c ns; k++)\n        for (let b = 0; b \u003c NB; b++) {\n          const I = exp(-(((uB(b) - f) / 0.07) ** 2)), o = (k * NB + b) * 3;\n          for (let n = 0; n \u003c 3; n++) SP[o + n] += c[n] * I;\n        }\n      if (e > Ir) (Ir = e), (cr = c);\n      Ih = max(Ih, exp(-((f / 0.08) ** 2)));\n    }\n    for (let k = 0; k \u003c ns * NB * 3; k++) SP[k] += 14;\n    for (let j = 0; j \u003c NR; j++) rim(j, cr, max(0.1, Ir));\n    hub(WHITE, Ih);\n  } else {\n    // Every spoke its own colour, the rainbow turning round, with sparkles.\n    const tw = floor(s * 7);\n    for (let k = 0; k \u003c ns; k++) {\n      const c = hsv(P.h + fr(k / ns + s * 0.12), 0.85, 1);\n      for (let b = 0; b \u003c NB; b++) hash(k * NB + b, tw) \u003c 0.07 ? spk(k, b, WHITE, 1) : spk(k, b, c, 0.72);\n    }\n    for (let j = 0; j \u003c NR; j++) rim(j, hsv(P.h + fr(j / NR - s * 0.25), 0.8, 1), 0.75);\n    hub(WHITE, 0.8);\n  }\n}\n\nlet F;\nconst add = (x, y, c, k) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] += c[n] * k;\n};\nconst put = (x, y, c, k = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// A leg of the A-frame from the hub to the promenade, a dark girder.\nfunction leg(ax, ay, bx, by, hw, edge) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy;\n  for (let y = floor(ay); y \u003c= by; y++)\n    for (let x = max(0, floor(min(ax, bx) - 2)); x \u003c= min(W - 1, max(ax, bx) + 2); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, d = sqrt(ex * ex + ey * ey);\n      const w = cl(hw + 0.5 - d, 0, 1);\n      if (w \u003c= 0) continue;\n      const o = (y * W + x) * 3, lit = 0.5 + 0.5 * cl((d - hw + 0.6) * 1.5, 0, 1);\n      const fl = 0.32 * exp(-(FOOT - y) / 9);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], LEG[n] + edge[n] * lit + WARM[n] * fl, w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.f) return;\n  F = P.f;\n  const ns = P.ns, rot = P.rot, t = P.t;\n  P.pal = [hsv(P.h, 0.85, 1), hsv(P.h + 0.42, 0.8, 1), hsv(P.h + 0.2, 0.75, 1)];\n  const SP = P.sp, RM = P.rm, HB = P.hb;\n  paint(P, P.sh, P.st, SP, RM, HB);\n  if (P.prev >= 0 && P.st \u003c FADE) {\n    const q = P.st / FADE;\n    paint(P, P.prev, P.ps + P.st, P.sp2, P.rm2, P.hb2);\n    for (let i = 0; i \u003c ns * NB * 3; i++) SP[i] = mix(P.sp2[i], SP[i], q);\n    for (let i = 0; i \u003c NR * 3; i++) RM[i] = mix(P.rm2[i], RM[i], q);\n    for (let n = 0; n \u003c 3; n++) HB[n] = mix(P.hb2[n], HB[n], q);\n  }\n  // The wheel's light in the haze: the mean colour of every bin.\n  const gc = [0, 0, 0], ws = ((R - HUB) / NB) * ns, wr = (TAU * R) / NR;\n  for (let i = 0; i \u003c ns * NB; i++) for (let n = 0; n \u003c 3; n++) gc[n] += SP[i * 3 + n] * ws;\n  for (let j = 0; j \u003c NR; j++) for (let n = 0; n \u003c 3; n++) gc[n] += RM[j * 3 + n] * wr * ns;\n  for (let n = 0; n \u003c 3; n++) gc[n] /= ns * NB * ws + NR * wr * ns;\n  // The haze takes a dim show nearly whole and a bright one by less.\n  const gk = 0.62 / (1 + (1.6 * max(...gc)) / 255);\n  for (let n = 0; n \u003c 3; n++) gc[n] *= gk;\n\n  // Sky, haze, stars and a thin moon.\n  for (let i = 0, o = 0; i \u003c SEA * W; i++, o += 3) {\n    const g = P.gm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = P.sky[o + n] + gc[n] * g;\n  }\n  for (const [x, y, b, ph, sp] of P.stars) add(x, y, [1, 1, 1.15], b * (0.65 + 0.35 * sin(t * sp + ph)));\n  for (let y = 3; y \u003c 11; y++)\n    for (let x = 51; x \u003c 60; x++) {\n      const a = (x + 0.5 - 55) ** 2 + (y + 0.5 - 7) ** 2, b = (x + 0.5 - 56.6) ** 2 + (y + 0.5 - 6) ** 2;\n      const k = cl(3.4 - sqrt(a), 0, 1) * cl(sqrt(b) - 2.9, 0, 1);\n      if (k > 0) add(x, y, [236, 228, 196], k);\n    }\n  // Clouds come in on the wind, lit from below by the wheel.\n  const wd = P.wind, th = 0.68 - 0.4 * wd, co = floor(P.co), cf = P.co - co;\n  for (let y = 0; y \u003c 76; y++) {\n    const hf = sm(76, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const c0 = y * 256, n = mix(P.cn[c0 + ((x + co) & 255)], P.cn[c0 + ((x + co + 1) & 255)], cf), dn = sm(th - 0.04, th + 0.22, n) * hf * 0.7;\n      if (dn \u003c= 0) continue;\n      const i = y * W + x, o = i * 3, g = 3 * (P.gm[i] + 0.2);\n      for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], CLOUD[k] + gc[k] * g, dn);\n    }\n  }\n\n  // Spokes, truss and rims, lit from the show's bins.\n  const st = STEEL.map((v, n) => v + gc[n] * 0.5);\n  for (let y = 7; y \u003c= 70; y++) {\n    const dy = y + 0.5 - CY;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - CX, r2 = dx * dx + dy * dy;\n      if (r2 > (R + 1.4) ** 2) continue;\n      const r = sqrt(r2), o = (y * W + x) * 3;\n      let a = (atan2(dy, dx) - rot) / TAU;\n      a -= floor(a);\n      const q = a * ns, kk = round(q), d = (abs(q - kk) * TAU * r) / ns;\n      const wsp = r > HUB && r \u003c R ? cl(1.25 - 1.5 * d, 0, 1) : 0;\n      const wrm = cl(1.25 - 1.5 * abs(r - R), 0, 1);\n      let wst = cl(1 - 1.6 * abs(r - RI), 0, 1) * 0.8;\n      if (r > RI && r \u003c R) {\n        const z = abs(fr(a * ns * 2) - 0.5) * 2, tt = (r - RI) / (R - RI);\n        wst = max(wst, cl(1 - 2.2 * abs(z - tt), 0, 1) * 0.7);\n      }\n      const occ = max(wsp, wrm, wst);\n      if (occ \u003c= 0) continue;\n      const so = ((kk % ns) * NB + min(NB - 1, floor(((r - HUB) / (R - HUB)) * NB))) * 3, ro = (floor(a * NR) % NR) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = F[o + n] * (1 - 0.85 * occ) + st[n] * occ + SP[so + n] * wsp + RM[ro + n] * wrm;\n    }\n  }\n\n  // The gondolas hang level from the rim, swinging in the wind.\n  const [A, B, C] = P.pal, step = ns / P.ng;\n  for (let i = 0; i \u003c P.ng; i++) {\n    const ang = rot + (TAU * i * step) / ns, px = CX + R * cos(ang), py = CY + R * sin(ang);\n    const sw = wd * (0.45 * sin(t * 1.8 + i * 1.1) + 0.25 * sin(t * 3.1 + i * 2.3)) + 0.05 * sin(t * 1.4 + i);\n    const gx = round(px - 0.5), gy = round(py - 0.5), cx = round(px - 0.5 + 3.2 * sin(sw)), [wk, empty] = P.cab[i];\n    const body = [A, B, C][i % 3].map((v, n) => v * 0.62 + gc[n]);\n    put(gx, gy, [150, 150, 170]);\n    put(round(px - 0.5 + 1.2 * sin(sw)), gy + 1, [60, 60, 76]);\n    for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + 2, body), put(cx + dx, gy + 5, body, 0.75);\n    for (let dy = 3; dy \u003c= 4; dy++) {\n      put(cx - 2, gy + dy, body, 0.85);\n      put(cx + 2, gy + dy, body, 0.85);\n      for (let dx = -1; dx \u003c= 1; dx++) put(cx + dx, gy + dy, WARM, (empty || dx || dy > 3 ? 0.78 : 0.2) * wk);\n    }\n  }\n\n  // The A-frame in front of the wheel, and the hub on it.\n  const edge = gc.map((v) => v * 1.4);\n  leg(CX, CY, 12, FOOT, 0.85, edge);\n  leg(CX, CY, 52, FOOT, 0.85, edge);\n  for (let y = 33; y \u003c= 44; y++)\n    for (let x = 26; x \u003c= 38; x++) {\n      const r = sqrt((x + 0.5 - CX) ** 2 + (y + 0.5 - CY) ** 2), k = cl(HUB + 0.5 - r, 0, 1);\n      if (k \u003c= 0) continue;\n      const o = (y * W + x) * 3, core = exp(-(r * r) / 2.5);\n      for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], 30 + HB[n] * (1 - r / 6) + WHITE[n] * core * 0.6, k);\n    }\n\n  // The shore: promenade, platform, lamps, booth, the warm light they throw.\n  for (let i = 70 * W, o = i * 3; i \u003c SEA * W; i++, o += 3) {\n    const m = P.fm[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], P.fg[o + n], m) + P.ga[o + n];\n  }\n  for (let x = 23; x \u003c= 41; x += 2) put(x, 76, B, floor(t * 4 - x / 2) % 3 ? 0.35 : 0.85);\n  for (let x = 53; x \u003c= 62; x += 2) put(x, 71, WARM, floor(t * 5 + x / 2) % 2 ? 0.3 : 1);\n  for (const q of P.people) {\n    const x = floor(q.x), gait = q.w ? floor(q.x * 1.5) & 1 : 0;\n    put(x, 79, q.sk ? [150, 110, 86] : [70, 52, 44]);\n    for (let y = 80; y \u003c= 82; y++) put(x, y, q.c), put(x + 1, y, q.c, 0.8);\n    put(x + gait, 83, [16, 16, 24]);\n    put(x + 1 - gait, 83, [16, 16, 24], 0.7);\n  }\n\n  // The lake: the scene above, mirrored, squeezed and broken by the ripples.\n  const wt = P.wt, gw = 0.55 + 0.35 * wd, pw = 3 - 1.2 * wd, sp = 0.5 + 6 * wd;\n  const row = (ys, sx) => (cl(round(ys), 0, SEA - 1) * W + sx) * 3;\n  for (let y = SEA; y \u003c H; y++) {\n    const d = y + 0.5 - SEA, dn = d / (H - SEA), amp = (0.35 + 1.9 * wd) * (0.45 + dn), rf = 0.7 - 0.3 * dn;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = amp * (0.6 * sn(d * 0.75 - wt * 1.9 + x * 0.04) + 0.4 * sn(d * 2.3 + x * 0.37 - wt * 3.3));\n      const ys = SEA - 0.5 - d / SQ + amp * 0.45 * sn(x * 0.45 + d * 1.1 - wt * 2.6), sx = cl(round(x + ox), 0, W - 1);\n      const hl = (0.5 + 0.5 * sn(d * 1.7 - wt * 1.4 + 1.6 * sn(x * 0.15 + d * 0.3 + wt * 0.5))) ** pw, o = (y * W + x) * 3;\n      // Choppy water stretches each light into a streak: the brightest of the\n      // rows a wave face can show here, above the mirror point and below it.\n      const s1 = row(ys, sx), s0 = row(ys - sp, sx), s2 = row(ys + sp, sx), s3 = row(ys - sp / 2, sx), s4 = row(ys + sp / 2, sx);\n      for (let n = 0; n \u003c 3; n++)\n        F[o + n] = LAKE[n] * (1 + dn * 0.5) + gc[n] * gw * hl + (0.55 * F[s1 + n] + 0.5 * max(F[s0 + n], F[s2 + n], F[s3 + n], F[s4 + n])) * rf * TINT[n];\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Spokes=12..32, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"Turns the show's three colours round the colour wheel together with the glow on the sky and the water, starting from azure, rose and violet."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 the wheel turns once in 40 s and each show lasts 6.5 s; at 0.2 the wheel, the shows, the clouds and the ripples all run ten times slower."},{"name":"Spokes","min":12,"max":32,"about":"How many lit spokes the wheel has, 12 to 32. Up to 18 there is a gondola at the end of every spoke, past that at every other one."},{"name":"Wind","min":0,"max":1,"about":"Near 0 the lake is a mirror with a slow swell under a few wisps of cloud; towards 1 cloud blows in lit from below by the wheel, the gondolas swing on their pivots and the reflection breaks into long streaks of light."}],"start":[0,2,12,0.06],"measures":{"motion":0.2782,"detail":0.0637,"edges":0.3285,"complexity":1.8086,"coverage":0.9981,"colour":0.1705,"drift":0.1001},"knobResponse":[0.0444,0.0524,0.0479,0.0788]},{"slug":"fiddlehead","title":"Fiddlehead","family":"growth","round":21,"note":"봄 숲 바닥의 타임랩스예요. 털 덮인 고사리 순이 지난해 낙엽을 뚫고 올라와 아래부터 풀리며 패널 꼭대기에서 휘는 잎이 되고, 그사이 늙은 잎은 누렇게 시들어 쓰러지고 숲 지붕 틈으로 든 빛살이 그 위를 미끄러져요.","idea":"A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-fiddlehead","type":"code","name":"fiddlehead","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fern","min":0,"max":3,"about":"Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps."},{"name":"Fronds","min":6,"max":18,"about":"How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18."},{"name":"Breeze","min":-1,"max":1,"about":"Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster."}],"start":[0,2,6,0.06],"measures":{"motion":0.2772,"detail":0.0937,"edges":0.4428,"complexity":2.2973,"coverage":0.9858,"colour":0.1938,"drift":0.0784},"knobResponse":[0.0694,0.0969,0.0478,0.0882]},{"slug":"figure-eight-orbit","title":"Figure-Eight Orbit","family":"physics","round":38,"note":"같은 질량 셋이 뉴턴 중력으로 패널 높이만 한 8자 하나를 3분의 1주기씩 떨어져 돌아요. 식으로 그린 곡선이 아니라 한 걸음씩 푼 궤도라서, K4 로 처음 속도를 밀면 8자가 흔들리다가 더 밀면 둘이 짝을 짓고 하나가 패널 밖으로 튕겨 나가요. K3 은 꼬리를 늘려 세 혜성을 겹친 8자 띠로 바꾸고, K1 을 누르면 도는 궤도를 살짝 밀어요.","idea":"Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.","buttons":"K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Figure-Eight Orbit\n// Family:  physics\n// Idea:    Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: figure-eight solution of the three-body problem (Cris Moore, 1993; Alain Chenciner and Richard Montgomery, 2000), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1\n//\n// Knob 1: Hue. Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive.\n// Knob 2: Speed. At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2.\n// Knob 3: Trail. How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2.\n// Knob 4: Kick. Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest.\n// Buttons: K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, abs, hypot, round, cbrt, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Chenciner and Montgomery's starting values, G = m = 1: body 3 at the\n// crossing, bodies 1 and 2 opposite each other, both moving at half body 3's\n// velocity the other way. The period is 6.32591398.\nconst X1 = 0.97000436, Y1 = -0.24308753, VX3 = -0.93240737, VY3 = -0.86473146, PERIOD = 6.32591398;\n// Orbit to panel: the eight's long axis down the panel, SC LEDs to the unit.\n// It reaches 1.081 along that axis and 0.358 across, so 115 by 38 LEDs.\nconst SC = 53, CX = 31.5, CY = 63.5;\n// Under RS the pull is that of a uniform ball, so a close pass of a binary\n// stays finite. The eight never comes closer than 0.69, so it never feels it.\nconst RS = 0.05;\n// Step in orbit time: Yoshida's fourth-order leapfrog at H0, shortened by\n// (r / 0.5)^1.5 when two bodies are closer than 0.5.\nconst H0 = 1 / 128;\nconst YW1 = 1 / (2 - cbrt(2)), YW0 = -cbrt(2) * YW1;\nconst YC = [YW1 / 2, (YW0 + YW1) / 2, (YW0 + YW1) / 2, YW1 / 2], YD = [YW1, YW0, YW1];\n// Tail half-width at the head, in LEDs, and how far a body glows.\nconst HW = 3.6, GLOW = 6;\n// Opening hues: azure, rose, lime.\nconst HUE0 = 0.58;\n// Longest tail, in periods, and so the history the pattern keeps.\nconst LMAX = 2;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trail: 0.33, kick: 0, kickSet: -1, kickWait: 0, begun: false,\n    p: new Float64Array(6), v: new Float64Array(6), a: new Float64Array(6),\n    clock: 0, carry: 0, out: 0, fade: 1, phase: 0, nudges: 0,\n    // Per body and LED: when the body last passed (orbit time) and how close.\n    tv: new Float32Array(3 * N).fill(-1e9), td: new Float32Array(3 * N).fill(99),\n    lx: new Float32Array(3), ly: new Float32Array(3), warm: [0, 0, 0],\n    ref: new Float32Array(N), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n  drawReference(params.s);\n}\n\n// Pull on each body; under RS the force grows linearly from the centre.\nfunction accel(p, a) {\n  a.fill(0);\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) {\n      const dx = p[2 * j] - p[2 * i], dy = p[2 * j + 1] - p[2 * i + 1], r = sqrt(dx * dx + dy * dy), q = max(r, RS);\n      const f = 1 / (q * q * q);\n      a[2 * i] += dx * f;\n      a[2 * i + 1] += dy * f;\n      a[2 * j] -= dx * f;\n      a[2 * j + 1] -= dy * f;\n    }\n}\n\nfunction closest(p) {\n  let m = 1e9;\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) m = min(m, hypot(p[2 * j] - p[2 * i], p[2 * j + 1] - p[2 * i + 1]));\n  return m;\n}\n\n// One step of Yoshida's fourth-order symplectic integrator: three leapfrogs\n// of h w1, h w0, h w1, with w0 negative.\nfunction step(p, v, a, h) {\n  for (let s = 0; s \u003c 3; s++) {\n    for (let i = 0; i \u003c 6; i++) p[i] += YC[s] * h * v[i];\n    accel(p, a);\n    for (let i = 0; i \u003c 6; i++) v[i] += YD[s] * h * a[i];\n  }\n  for (let i = 0; i \u003c 6; i++) p[i] += YC[3] * h * v[i];\n}\n\nconst stepLength = (p) => H0 * min(1, (max(closest(p), RS) / 0.5) ** 1.5);\n\n// The kick: bodies i and j pushed apart along the line between them, each\n// by eps, and then every velocity scaled back to the kinetic energy before\n// the push. Positions do not move, so the energy stays what it was; the\n// momentum stays zero and the angular momentum stays zero too, as for the\n// eight itself, so only the shape of the motion changes.\nfunction push(S, i, j, eps) {\n  const { p, v } = S, dx = p[2 * i] - p[2 * j], dy = p[2 * i + 1] - p[2 * j + 1], r = hypot(dx, dy) || 1;\n  let k0 = 0, k1 = 0;\n  for (let n = 0; n \u003c 6; n++) k0 += v[n] * v[n];\n  v[2 * i] += (eps * dx) / r;\n  v[2 * i + 1] += (eps * dy) / r;\n  v[2 * j] -= (eps * dx) / r;\n  v[2 * j + 1] -= (eps * dy) / r;\n  for (let n = 0; n \u003c 6; n++) k1 += v[n] * v[n];\n  const f = sqrt(k0 / k1);\n  for (let n = 0; n \u003c 6; n++) v[n] *= f;\n}\n\n// Kick 0..1 to eps: nothing up to 0.06, then up to 0.45.\nconst epsOf = (k) => 0.45 * (max(0, k - 0.06) / 0.94) ** 1.2;\n\nfunction initial(S) {\n  const { p, v } = S;\n  p.set([X1, Y1, -X1, -Y1, 0, 0]);\n  v.set([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]);\n  push(S, 0, 1, epsOf(S.kick));\n  S.kickSet = S.kick;\n}\n\nconst toCol = (y) => CX + y * SC, toRow = (x) => CY - x * SC;\n\n// A tail at an LED: age a in orbit time, distance d in LEDs, tail length L.\n// It narrows from HW at the head to nothing at its end, and dims from full\n// at the head to 0.6 a third of a period behind it and 0.55 after that.\nfunction tailCover(a, d, L) {\n  if (a \u003c 0 || a >= L) return 0;\n  return cl((HW + 0.5) * (1 - a / L) ** 1.5 - d + 0.5, 0, 1);\n}\nconst tailBright = (a) => 0.55 + 0.45 * exp(-a / (0.15 * PERIOD));\nconst tailValue = (a, d, L) => tailCover(a, d, L) * tailBright(a);\n\n// Mark the LEDs round body k at orbit time t. Within one pass the closest\n// approach is kept; a later pass takes the LED when it would light it more.\nfunction deposit(S, k, t) {\n  const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]), R = HW + 1.5, L = LMAX * PERIOD;\n  if (bx \u003c -R || bx > W + R || by \u003c -R || by > H + R) return;\n  const o = k * N, tv = S.tv, td = S.td;\n  for (let y = max(0, floor(by - R)); y \u003c= min(H - 1, floor(by + R)); y++)\n    for (let x = max(0, floor(bx - R)); x \u003c= min(W - 1, floor(bx + R)); x++) {\n      const d = hypot(x + 0.5 - bx, y + 0.5 - by);\n      if (d > R) continue;\n      const q = o + y * W + x, t0 = tv[q];\n      if (abs(t - t0) \u003c 0.3) {\n        if (d \u003c td[q]) {\n          tv[q] = t;\n          td[q] = d;\n        }\n        continue;\n      }\n      const ref = max(t, t0), vNew = tailValue(ref - t, d, L), vOld = tailValue(ref - t0, td[q], L);\n      if (vNew > vOld || (vNew === vOld && t > t0)) {\n        tv[q] = t;\n        td[q] = d;\n      }\n    }\n}\n\n// Deposit body k if it has moved half an LED since it last did.\nfunction trace(S, t) {\n  for (let k = 0; k \u003c 3; k++) {\n    const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]);\n    if (hypot(bx - S.lx[k], by - S.ly[k]) \u003c 0.5) continue;\n    S.lx[k] = bx;\n    S.ly[k] = by;\n    deposit(S, k, t);\n  }\n}\n\nconst farthest = (p) => max(hypot(p[0], p[1]), hypot(p[2], p[3]), hypot(p[4], p[5]));\n\n// Start (or start again): the starting line-up with the current kick, and\n// its own past drawn behind it by running the orbit backward for up to LMAX\n// periods, or until a body would come in from off the panel.\nfunction restart(S) {\n  S.tv.fill(-1e9);\n  S.td.fill(99);\n  S.clock = 0;\n  S.carry = 0;\n  S.out = 0;\n  initial(S);\n  const { p, v, a } = S;\n  const p0 = Float64Array.from(p), v0 = Float64Array.from(v);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  let t = 0;\n  while (t > -LMAX * PERIOD && farthest(p) \u003c 1.4) {\n    trace(S, t);\n    const h = stepLength(p);\n    step(p, v, a, -h);\n    t -= h;\n  }\n  p.set(p0);\n  v.set(v0);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  trace(S, 0);\n}\n\n// Whole steps only, the remainder carried to the next frame, so at the\n// opening the step never changes and the integrator stays symplectic.\nfunction advance(S, dt) {\n  const { p, v, a } = S;\n  S.carry += dt;\n  for (let h = stepLength(p); S.carry >= h; h = stepLength(p)) {\n    step(p, v, a, h);\n    S.carry -= h;\n    S.clock += h;\n    trace(S, S.clock);\n  }\n}\n\n// The exact eight, sampled over one period, as a faint line under the tails.\nfunction drawReference(S) {\n  const p = Float64Array.from([X1, Y1, -X1, -Y1, 0, 0]);\n  const v = Float64Array.from([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]), a = new Float64Array(6);\n  const n = 1600, h = PERIOD / n, ref = S.ref;\n  for (let s = 0; s \u003c n; s++) {\n    const bx = toCol(p[1]), by = toRow(p[0]);\n    for (let y = max(0, floor(by - 1)); y \u003c= min(H - 1, floor(by + 1)); y++)\n      for (let x = max(0, floor(bx - 1)); x \u003c= min(W - 1, floor(bx + 1)); x++) {\n        const c = cl(1.1 - hypot(x + 0.5 - bx, y + 0.5 - by), 0, 1);\n        if (c > ref[y * W + x]) ref[y * W + x] = c;\n      }\n    step(p, v, a, h);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.33, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trail = cl(k[2], 0.33, 2);\n  S.kick = cl(k[3], 0, 1);\n  if (!S.begun) {\n    restart(S);\n    S.begun = true;\n  }\n  // A turned Kick starts the three again once the knob has rested 0.4 s,\n  // fading the old orbit out over 0.5 s and the new one in.\n  if (abs(S.kick - S.kickSet) > 0.004) {\n    S.kickWait += d;\n    if (S.kickWait > 0.4 && S.phase === 0) S.phase = -1;\n  } else S.kickWait = 0;\n  if (input.btnPressed && input.btnPressed[0] && S.phase === 0) {\n    const pair = S.nudges++ % 3;\n    push(S, pair, (pair + 1) % 3, max(0.05, epsOf(S.kick)));\n  }\n  // At Speed 2 the orbit's clock runs 1 unit a second.\n  advance(S, d * S.speed * 0.5);\n  // Off the panel: a body more than 1.35 from the centre.\n  if (farthest(S.p) > 1.35) S.out += d;\n  else S.out = max(0, S.out - d);\n  if ((S.out > 3 || farthest(S.p) > 8) && S.phase === 0) S.phase = -1;\n  if (S.phase \u003c 0) {\n    S.fade -= d / 0.5;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      restart(S);\n      S.kickWait = 0;\n      S.phase = 1;\n    }\n  } else if (S.phase > 0) {\n    S.fade += d / 0.5;\n    if (S.fade >= 1) {\n      S.fade = 1;\n      S.phase = 0;\n    }\n  }\n}\n\nfunction palette(S) {\n  for (let k = 0; k \u003c 3; k++) {\n    const h = S.hue + HUE0 + k / 3, hh = h - floor(h);\n    // Orange to yellow-green: paler and kept at full value, so a tail never\n    // reads brown or olive.\n    const warm = sm(0.02, 0.08, hh) * (1 - sm(0.2, 0.27, hh));\n    hsv(h, 0.85 - 0.3 * warm, 1, S.col[k]);\n    S.warm[k] = warm;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { tv, td, ref, col, clock, fade } = S, L = S.trail * PERIOD;\n  const bx = [0, 0, 0], by = [0, 0, 0];\n  for (let k = 0; k \u003c 3; k++) {\n    bx[k] = toCol(S.p[2 * k + 1]);\n    by[k] = toRow(S.p[2 * k]);\n  }\n  const ord = [0, 1, 2], ag = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The faint reference eight, then the tails painted oldest first, so\n      // the newest pass lies on top.\n      let r = 0.13 * ref[p], g = 0.13 * ref[p], b = 0.16 * ref[p];\n      for (let k = 0; k \u003c 3; k++) ag[k] = clock - tv[k * N + p];\n      ord[0] = 0;\n      ord[1] = 1;\n      ord[2] = 2;\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      if (ag[ord[1]] \u003c ag[ord[2]]) [ord[1], ord[2]] = [ord[2], ord[1]];\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      for (let n = 0; n \u003c 3; n++) {\n        const k = ord[n], age = ag[k], d = td[k * N + p], al = tailCover(age, d, L) * fade;\n        if (al \u003c= 0) continue;\n        const c = col[k], lv = 1 - (1 - tailBright(age)) * (1 - 0.8 * S.warm[k]), wh = 0.5 * (1 - age / L) ** 8 * cl(1 - d / HW, 0, 1);\n        r += ((c[0] + (1 - c[0]) * wh) * lv - r) * al;\n        g += ((c[1] + (1 - c[1]) * wh) * lv - g) * al;\n        b += ((c[2] + (1 - c[2]) * wh) * lv - b) * al;\n      }\n      // The bodies: a white core in a glow of the body's colour.\n      for (let k = 0; k \u003c 3; k++) {\n        const dx = x + 0.5 - bx[k], dy = y + 0.5 - by[k], d2 = dx * dx + dy * dy;\n        if (d2 >= GLOW * GLOW) continue;\n        const dd = sqrt(d2), halo = 0.7 * fade * (1 - dd / GLOW) ** 1.5, core = sm(2.8, 1.4, dd) * fade, c = col[k];\n        r = 1 - (1 - r) * (1 - c[0] * halo);\n        g = 1 - (1 - g) * (1 - c[1] * halo);\n        b = 1 - (1 - b) * (1 - c[2] * halo);\n        r += (1 - r) * core;\n        g += (1 - g) * core;\n        b += (1 - b) * core;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n\n","layer":{"id":"layer-figure-eight-orbit","type":"code","name":"figure-eight-orbit","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Figure-Eight Orbit\n// Family:  physics\n// Idea:    Three equal masses under Newton's gravity chase one another round one figure eight standing the height of the panel, each a third of a period behind the next, integrated step by step from Chenciner and Montgomery's starting values with a faint line of the exact eight under them, and a kick to their starting velocities leaves the eight wobbling or breaks it into a tight binary and a body flung off the panel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: figure-eight solution of the three-body problem (Cris Moore, 1993; Alain Chenciner and Richard Montgomery, 2000), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1\n//\n// Knob 1: Hue. Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive.\n// Knob 2: Speed. At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2.\n// Knob 3: Trail. How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2.\n// Knob 4: Kick. Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest.\n// Buttons: K1 tap nudges the running orbit: two bodies pushed apart by 0.05, or by the Kick if that is more, a different pair on each tap. Away from the starting line-up the eight is far less forgiving: one tap leaves it wobbling for a minute or more before it breaks, three taps a second apart break it in about 20 seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, abs, hypot, round, cbrt, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Chenciner and Montgomery's starting values, G = m = 1: body 3 at the\n// crossing, bodies 1 and 2 opposite each other, both moving at half body 3's\n// velocity the other way. The period is 6.32591398.\nconst X1 = 0.97000436, Y1 = -0.24308753, VX3 = -0.93240737, VY3 = -0.86473146, PERIOD = 6.32591398;\n// Orbit to panel: the eight's long axis down the panel, SC LEDs to the unit.\n// It reaches 1.081 along that axis and 0.358 across, so 115 by 38 LEDs.\nconst SC = 53, CX = 31.5, CY = 63.5;\n// Under RS the pull is that of a uniform ball, so a close pass of a binary\n// stays finite. The eight never comes closer than 0.69, so it never feels it.\nconst RS = 0.05;\n// Step in orbit time: Yoshida's fourth-order leapfrog at H0, shortened by\n// (r / 0.5)^1.5 when two bodies are closer than 0.5.\nconst H0 = 1 / 128;\nconst YW1 = 1 / (2 - cbrt(2)), YW0 = -cbrt(2) * YW1;\nconst YC = [YW1 / 2, (YW0 + YW1) / 2, (YW0 + YW1) / 2, YW1 / 2], YD = [YW1, YW0, YW1];\n// Tail half-width at the head, in LEDs, and how far a body glows.\nconst HW = 3.6, GLOW = 6;\n// Opening hues: azure, rose, lime.\nconst HUE0 = 0.58;\n// Longest tail, in periods, and so the history the pattern keeps.\nconst LMAX = 2;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, trail: 0.33, kick: 0, kickSet: -1, kickWait: 0, begun: false,\n    p: new Float64Array(6), v: new Float64Array(6), a: new Float64Array(6),\n    clock: 0, carry: 0, out: 0, fade: 1, phase: 0, nudges: 0,\n    // Per body and LED: when the body last passed (orbit time) and how close.\n    tv: new Float32Array(3 * N).fill(-1e9), td: new Float32Array(3 * N).fill(99),\n    lx: new Float32Array(3), ly: new Float32Array(3), warm: [0, 0, 0],\n    ref: new Float32Array(N), col: [[0, 0, 0], [0, 0, 0], [0, 0, 0]],\n  };\n  drawReference(params.s);\n}\n\n// Pull on each body; under RS the force grows linearly from the centre.\nfunction accel(p, a) {\n  a.fill(0);\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) {\n      const dx = p[2 * j] - p[2 * i], dy = p[2 * j + 1] - p[2 * i + 1], r = sqrt(dx * dx + dy * dy), q = max(r, RS);\n      const f = 1 / (q * q * q);\n      a[2 * i] += dx * f;\n      a[2 * i + 1] += dy * f;\n      a[2 * j] -= dx * f;\n      a[2 * j + 1] -= dy * f;\n    }\n}\n\nfunction closest(p) {\n  let m = 1e9;\n  for (let i = 0; i \u003c 3; i++)\n    for (let j = i + 1; j \u003c 3; j++) m = min(m, hypot(p[2 * j] - p[2 * i], p[2 * j + 1] - p[2 * i + 1]));\n  return m;\n}\n\n// One step of Yoshida's fourth-order symplectic integrator: three leapfrogs\n// of h w1, h w0, h w1, with w0 negative.\nfunction step(p, v, a, h) {\n  for (let s = 0; s \u003c 3; s++) {\n    for (let i = 0; i \u003c 6; i++) p[i] += YC[s] * h * v[i];\n    accel(p, a);\n    for (let i = 0; i \u003c 6; i++) v[i] += YD[s] * h * a[i];\n  }\n  for (let i = 0; i \u003c 6; i++) p[i] += YC[3] * h * v[i];\n}\n\nconst stepLength = (p) => H0 * min(1, (max(closest(p), RS) / 0.5) ** 1.5);\n\n// The kick: bodies i and j pushed apart along the line between them, each\n// by eps, and then every velocity scaled back to the kinetic energy before\n// the push. Positions do not move, so the energy stays what it was; the\n// momentum stays zero and the angular momentum stays zero too, as for the\n// eight itself, so only the shape of the motion changes.\nfunction push(S, i, j, eps) {\n  const { p, v } = S, dx = p[2 * i] - p[2 * j], dy = p[2 * i + 1] - p[2 * j + 1], r = hypot(dx, dy) || 1;\n  let k0 = 0, k1 = 0;\n  for (let n = 0; n \u003c 6; n++) k0 += v[n] * v[n];\n  v[2 * i] += (eps * dx) / r;\n  v[2 * i + 1] += (eps * dy) / r;\n  v[2 * j] -= (eps * dx) / r;\n  v[2 * j + 1] -= (eps * dy) / r;\n  for (let n = 0; n \u003c 6; n++) k1 += v[n] * v[n];\n  const f = sqrt(k0 / k1);\n  for (let n = 0; n \u003c 6; n++) v[n] *= f;\n}\n\n// Kick 0..1 to eps: nothing up to 0.06, then up to 0.45.\nconst epsOf = (k) => 0.45 * (max(0, k - 0.06) / 0.94) ** 1.2;\n\nfunction initial(S) {\n  const { p, v } = S;\n  p.set([X1, Y1, -X1, -Y1, 0, 0]);\n  v.set([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]);\n  push(S, 0, 1, epsOf(S.kick));\n  S.kickSet = S.kick;\n}\n\nconst toCol = (y) => CX + y * SC, toRow = (x) => CY - x * SC;\n\n// A tail at an LED: age a in orbit time, distance d in LEDs, tail length L.\n// It narrows from HW at the head to nothing at its end, and dims from full\n// at the head to 0.6 a third of a period behind it and 0.55 after that.\nfunction tailCover(a, d, L) {\n  if (a \u003c 0 || a >= L) return 0;\n  return cl((HW + 0.5) * (1 - a / L) ** 1.5 - d + 0.5, 0, 1);\n}\nconst tailBright = (a) => 0.55 + 0.45 * exp(-a / (0.15 * PERIOD));\nconst tailValue = (a, d, L) => tailCover(a, d, L) * tailBright(a);\n\n// Mark the LEDs round body k at orbit time t. Within one pass the closest\n// approach is kept; a later pass takes the LED when it would light it more.\nfunction deposit(S, k, t) {\n  const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]), R = HW + 1.5, L = LMAX * PERIOD;\n  if (bx \u003c -R || bx > W + R || by \u003c -R || by > H + R) return;\n  const o = k * N, tv = S.tv, td = S.td;\n  for (let y = max(0, floor(by - R)); y \u003c= min(H - 1, floor(by + R)); y++)\n    for (let x = max(0, floor(bx - R)); x \u003c= min(W - 1, floor(bx + R)); x++) {\n      const d = hypot(x + 0.5 - bx, y + 0.5 - by);\n      if (d > R) continue;\n      const q = o + y * W + x, t0 = tv[q];\n      if (abs(t - t0) \u003c 0.3) {\n        if (d \u003c td[q]) {\n          tv[q] = t;\n          td[q] = d;\n        }\n        continue;\n      }\n      const ref = max(t, t0), vNew = tailValue(ref - t, d, L), vOld = tailValue(ref - t0, td[q], L);\n      if (vNew > vOld || (vNew === vOld && t > t0)) {\n        tv[q] = t;\n        td[q] = d;\n      }\n    }\n}\n\n// Deposit body k if it has moved half an LED since it last did.\nfunction trace(S, t) {\n  for (let k = 0; k \u003c 3; k++) {\n    const bx = toCol(S.p[2 * k + 1]), by = toRow(S.p[2 * k]);\n    if (hypot(bx - S.lx[k], by - S.ly[k]) \u003c 0.5) continue;\n    S.lx[k] = bx;\n    S.ly[k] = by;\n    deposit(S, k, t);\n  }\n}\n\nconst farthest = (p) => max(hypot(p[0], p[1]), hypot(p[2], p[3]), hypot(p[4], p[5]));\n\n// Start (or start again): the starting line-up with the current kick, and\n// its own past drawn behind it by running the orbit backward for up to LMAX\n// periods, or until a body would come in from off the panel.\nfunction restart(S) {\n  S.tv.fill(-1e9);\n  S.td.fill(99);\n  S.clock = 0;\n  S.carry = 0;\n  S.out = 0;\n  initial(S);\n  const { p, v, a } = S;\n  const p0 = Float64Array.from(p), v0 = Float64Array.from(v);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  let t = 0;\n  while (t > -LMAX * PERIOD && farthest(p) \u003c 1.4) {\n    trace(S, t);\n    const h = stepLength(p);\n    step(p, v, a, -h);\n    t -= h;\n  }\n  p.set(p0);\n  v.set(v0);\n  S.lx.fill(-99);\n  S.ly.fill(-99);\n  trace(S, 0);\n}\n\n// Whole steps only, the remainder carried to the next frame, so at the\n// opening the step never changes and the integrator stays symplectic.\nfunction advance(S, dt) {\n  const { p, v, a } = S;\n  S.carry += dt;\n  for (let h = stepLength(p); S.carry >= h; h = stepLength(p)) {\n    step(p, v, a, h);\n    S.carry -= h;\n    S.clock += h;\n    trace(S, S.clock);\n  }\n}\n\n// The exact eight, sampled over one period, as a faint line under the tails.\nfunction drawReference(S) {\n  const p = Float64Array.from([X1, Y1, -X1, -Y1, 0, 0]);\n  const v = Float64Array.from([-VX3 / 2, -VY3 / 2, -VX3 / 2, -VY3 / 2, VX3, VY3]), a = new Float64Array(6);\n  const n = 1600, h = PERIOD / n, ref = S.ref;\n  for (let s = 0; s \u003c n; s++) {\n    const bx = toCol(p[1]), by = toRow(p[0]);\n    for (let y = max(0, floor(by - 1)); y \u003c= min(H - 1, floor(by + 1)); y++)\n      for (let x = max(0, floor(bx - 1)); x \u003c= min(W - 1, floor(bx + 1)); x++) {\n        const c = cl(1.1 - hypot(x + 0.5 - bx, y + 0.5 - by), 0, 1);\n        if (c > ref[y * W + x]) ref[y * W + x] = c;\n      }\n    step(p, v, a, h);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.33, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.trail = cl(k[2], 0.33, 2);\n  S.kick = cl(k[3], 0, 1);\n  if (!S.begun) {\n    restart(S);\n    S.begun = true;\n  }\n  // A turned Kick starts the three again once the knob has rested 0.4 s,\n  // fading the old orbit out over 0.5 s and the new one in.\n  if (abs(S.kick - S.kickSet) > 0.004) {\n    S.kickWait += d;\n    if (S.kickWait > 0.4 && S.phase === 0) S.phase = -1;\n  } else S.kickWait = 0;\n  if (input.btnPressed && input.btnPressed[0] && S.phase === 0) {\n    const pair = S.nudges++ % 3;\n    push(S, pair, (pair + 1) % 3, max(0.05, epsOf(S.kick)));\n  }\n  // At Speed 2 the orbit's clock runs 1 unit a second.\n  advance(S, d * S.speed * 0.5);\n  // Off the panel: a body more than 1.35 from the centre.\n  if (farthest(S.p) > 1.35) S.out += d;\n  else S.out = max(0, S.out - d);\n  if ((S.out > 3 || farthest(S.p) > 8) && S.phase === 0) S.phase = -1;\n  if (S.phase \u003c 0) {\n    S.fade -= d / 0.5;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      restart(S);\n      S.kickWait = 0;\n      S.phase = 1;\n    }\n  } else if (S.phase > 0) {\n    S.fade += d / 0.5;\n    if (S.fade >= 1) {\n      S.fade = 1;\n      S.phase = 0;\n    }\n  }\n}\n\nfunction palette(S) {\n  for (let k = 0; k \u003c 3; k++) {\n    const h = S.hue + HUE0 + k / 3, hh = h - floor(h);\n    // Orange to yellow-green: paler and kept at full value, so a tail never\n    // reads brown or olive.\n    const warm = sm(0.02, 0.08, hh) * (1 - sm(0.2, 0.27, hh));\n    hsv(h, 0.85 - 0.3 * warm, 1, S.col[k]);\n    S.warm[k] = warm;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { tv, td, ref, col, clock, fade } = S, L = S.trail * PERIOD;\n  const bx = [0, 0, 0], by = [0, 0, 0];\n  for (let k = 0; k \u003c 3; k++) {\n    bx[k] = toCol(S.p[2 * k + 1]);\n    by[k] = toRow(S.p[2 * k]);\n  }\n  const ord = [0, 1, 2], ag = [0, 0, 0];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The faint reference eight, then the tails painted oldest first, so\n      // the newest pass lies on top.\n      let r = 0.13 * ref[p], g = 0.13 * ref[p], b = 0.16 * ref[p];\n      for (let k = 0; k \u003c 3; k++) ag[k] = clock - tv[k * N + p];\n      ord[0] = 0;\n      ord[1] = 1;\n      ord[2] = 2;\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      if (ag[ord[1]] \u003c ag[ord[2]]) [ord[1], ord[2]] = [ord[2], ord[1]];\n      if (ag[ord[0]] \u003c ag[ord[1]]) [ord[0], ord[1]] = [ord[1], ord[0]];\n      for (let n = 0; n \u003c 3; n++) {\n        const k = ord[n], age = ag[k], d = td[k * N + p], al = tailCover(age, d, L) * fade;\n        if (al \u003c= 0) continue;\n        const c = col[k], lv = 1 - (1 - tailBright(age)) * (1 - 0.8 * S.warm[k]), wh = 0.5 * (1 - age / L) ** 8 * cl(1 - d / HW, 0, 1);\n        r += ((c[0] + (1 - c[0]) * wh) * lv - r) * al;\n        g += ((c[1] + (1 - c[1]) * wh) * lv - g) * al;\n        b += ((c[2] + (1 - c[2]) * wh) * lv - b) * al;\n      }\n      // The bodies: a white core in a glow of the body's colour.\n      for (let k = 0; k \u003c 3; k++) {\n        const dx = x + 0.5 - bx[k], dy = y + 0.5 - by[k], d2 = dx * dx + dy * dy;\n        if (d2 >= GLOW * GLOW) continue;\n        const dd = sqrt(d2), halo = 0.7 * fade * (1 - dd / GLOW) ** 1.5, core = sm(2.8, 1.4, dd) * fade, c = col[k];\n        r = 1 - (1 - r) * (1 - c[0] * halo);\n        g = 1 - (1 - g) * (1 - c[1] * halo);\n        b = 1 - (1 - b) * (1 - c[2] * halo);\n        r += (1 - r) * core;\n        g += (1 - g) * core;\n        b += (1 - b) * core;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Trail=0.33..2, Kick=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three bodies round the wheel together, a third of the wheel apart. At 0 azure, rose and lime; at 0.25 magenta, butter yellow and cyan; at 0.5 peach, sea green and violet; at 0.75 green, blue and red. A body that comes round to orange or yellow is paled and its tail kept near full brightness, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one period of the eight, 6.33 units of the orbit's own time, takes 6.3 seconds, and a body runs up to 67 LEDs a second through the crossing and slows to 25 at the far ends; at 0.2 a period takes 63 seconds, at 3 it takes 4.2."},{"name":"Trail","min":0.33,"max":2,"about":"How long each tail is, in periods; a tail is 8 LEDs wide at its body and narrows to nothing at its end. At 0.33 each tail ends just at the next body, so the eight is three comets in three colours; from 1 the whole eight is drawn, each stretch in the colour of the body that passed it last; with a kick the older passes show under the newest, a band of eights 2 periods deep at 2."},{"name":"Kick","min":0,"max":1,"about":"Pushes bodies 1 and 2 apart along the line between them at the start, then scales every velocity back to the old kinetic energy, so energy, momentum and angular momentum stay those of the eight. Up to 0.06 no kick: the exact eight, its energy within 1e-8 of the start for 200 periods. At 0.25 a push of 0.07, 5% of the fastest speed, and the eight wobbles; at 0.5 (0.18) it swings wide but holds; from about 0.65 (0.25) it holds a few periods and then two bodies pair off and the third is slung away; at 1 (0.45) a body leaves the panel in the first tenth of a period. The push keeps the symmetry of the starting line-up, which is why the eight survives so much of it. The three start again after a body has been off the panel 3 seconds, and 0.4 seconds after the knob comes to rest."}],"start":[0,2,0.33,0.06],"measures":{"motion":0.2677,"detail":0.0329,"edges":0.6811,"complexity":0.5694,"coverage":0.1522,"colour":0.2009,"drift":0.1349},"knobResponse":[0.0772,0.0891,0.0607,0.1032]},{"slug":"final-approach","title":"Final Approach","family":"flight","round":23,"note":"밤에 내려앉는 여객기 조종석에서 앞을 봐요. 활주로 등과 진입등이 도시 불빛이 깔린 지평선 아래로 모이고, 래빗 섬광등이 1초에 두 번 활주로 쪽으로 달려가요. 왼쪽 PAPI 가 흰 둘 빨강 둘을 보이다가, 플레어와 접지 뒤에는 중심선 등이 발밑으로 쏟아져 지나가요. K1 을 누르면 복행해요.","idea":"From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.","buttons":"K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.","code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","layer":{"id":"layer-final-approach","type":"code","name":"final-approach","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower."},{"name":"Weather","min":0,"max":3,"about":"A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late."},{"name":"Crosswind","min":-1,"max":1,"about":"The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare."}],"start":[0,2,0,0.06],"measures":{"motion":1.2895,"detail":0.0365,"edges":0.3949,"complexity":1.2312,"coverage":0.4908,"colour":0.0984,"drift":0.1085},"knobResponse":[0.0373,0.0632,0.3041,0.0884]},{"slug":"fire","title":"Fire","family":"sim","round":1,"note":"데모신의 불이에요. 바닥의 열이 올라가며 식고, K1 을 돌리면 나무 불에서 가스 불, 붕소 불까지 색이 바뀌어요.","idea":"The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.","buttons":"K1 tap drops a log on, and the fire flares and throws sparks.","code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-fire","type":"code","name":"fire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"What is burning: wood, then potassium lilac, gas blue, copper teal and boron green."},{"name":"Height","min":0.6,"max":4,"about":"How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the flames stand up; either way they lean and the gusts come with it."},{"name":"Crackle","min":0,"max":1,"about":"Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower."}],"start":[0,2,0,0.06],"measures":{"motion":0.9647,"detail":0.0218,"edges":0.1201,"complexity":0.8283,"coverage":0.5059,"colour":0.4964,"drift":0.2161},"knobResponse":[0.3207,0.2786,0.0846,0.0537]},{"slug":"fireflies","title":"Fireflies","family":"insect","round":16,"note":"풀밭 위 반딧불이 200마리가 따로 깜박이다가 서로의 깜박임을 보고 박자를 맞춰, 한꺼번에 깜박이는 무리와 어두운 쉼이 번갈아 와요. K4 가 결합의 세기이고, K1 을 누르면 손전등이 지나가며 박자를 흩어요.","idea":"Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.","buttons":"K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.","code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","layer":{"id":"layer-fireflies","type":"code","name":"fireflies","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Moon","min":0,"max":1,"about":"At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon."},{"name":"Pace","min":0.5,"max":4,"about":"At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it."},{"name":"Fireflies","min":200,"max":480,"about":"How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge."},{"name":"Coupling","min":0,"max":0.25,"about":"How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst."}],"start":[0,2,200,0.06],"measures":{"motion":0.3823,"detail":0.021,"edges":0.1814,"complexity":0.404,"coverage":0.3382,"colour":0.0994,"drift":0.0945},"knobResponse":[0.0808,0.0516,0.0623,0.0425]},{"slug":"flame-test","title":"Flame Test","family":"chemistry","round":22,"note":"분젠 버너의 파란 불꽃에 손이 니크롬 고리를 넣으면 불꽃이 그 염의 색으로 터져요. 구리는 청록, 나트륨은 짙은 노랑으로 타고 알갱이가 튀다가 파랗게 돌아오면, 고리를 염산에 씻어 이름표 붙은 다음 시계접시로 가요.","idea":"On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.","buttons":"K1 tap sends the loop to the next salt now.","code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-flame-test","type":"code","name":"flame-test","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salt","min":0,"max":8,"about":"Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker."},{"name":"Room","min":0,"max":1,"about":"The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand."},{"name":"Air","min":-1,"max":1,"about":"The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0593,"detail":0.0588,"edges":0.4458,"complexity":1.5027,"coverage":0.9519,"colour":0.1298,"drift":0.0434},"knobResponse":[0.0735,0.0457,0.2666,0.1163]},{"slug":"flip-clock","title":"Flip Clock","family":"time","round":2,"note":"세워 둔 넘김 시계예요. 위에 시, 아래에 분 카드가 있고, 바뀔 때마다 옛 카드의 윗장이 앞으로 넘어가 그 뒷면이 새 카드의 아랫장으로 내려앉아요.","idea":"A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.","buttons":"K1 tap sets the clock back to 09:58, and the flaps spin round to get there.","code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","layer":{"id":"layer-flip-clock","type":"code","name":"flip-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"The colour of the digits; the dark cards take a little of it."},{"name":"Rate","min":0,"max":3,"about":"From real time at 0 to a minute every second at 3, a minute every four seconds where it starts."},{"name":"Seconds","min":0,"max":1,"about":"Turn it up and a seconds card joins below, growing until all three are one size."},{"name":"Light","min":0,"max":1,"about":"How hard the light falls on the cards, from flat to a deep shadow under each falling flap."}],"start":[0,2,0,0.06],"measures":{"motion":0.0975,"detail":0.0443,"edges":0.7774,"complexity":0.213,"coverage":0.7633,"colour":0.1458,"drift":0.128},"knobResponse":[0.0983,0.1045,0.1894,0.032]},{"slug":"flipdot","title":"Flipdot","family":"type","round":22,"note":"버스 앞에 다는 형광 노랑 플립 디스크 행선판을 세워 놓았어요. 위 칸에 노선 번호, 아래 칸에 행선지가 7줄 점 글꼴로 서고, 쪽이 바뀔 때마다 디스크가 한 줄씩 넘어가며 판 전체를 노랗게 뒤집었다가 반전된 경유지 쪽을 써요. 넘어가는 동안의 디스크는 가는 모서리로 보여요.","idea":"A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.","buttons":"K1 tap ends the page now and the next wave starts.","code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","layer":{"id":"layer-flipdot","type":"code","name":"flipdot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Disc","min":0,"max":1,"about":"The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second."},{"name":"Route","min":0,"max":3,"about":"Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall."},{"name":"Wipe","min":0,"max":3,"about":"How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3."}],"start":[0,2,0,0.06],"measures":{"motion":0.1111,"detail":0.2452,"edges":0.47,"complexity":0.3774,"coverage":0.3252,"colour":0.3924,"drift":0.2652},"knobResponse":[0.0968,0.1699,0.0516,0.048]},{"slug":"flock","title":"Flock","family":"particle","round":1,"note":"새 90마리가 가까운 이웃만 보고 날아요. 보이지 않는 매가 무리를 쫓아 자꾸 갈라놓아요.","idea":"Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.","buttons":"K1 tap sends the unseen hawk diving into the flock.","code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","layer":{"id":"layer-flock","type":"code","name":"flock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flock's colours around the wheel; birds flying up and down sit either side of it."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the birds fly, and so how long their streaks are."},{"name":"Scatter","min":-1,"max":1,"about":"Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats."},{"name":"Trail","min":0.3,"max":2.5,"about":"How long a streak lasts; long trails leave the flock's recent path woven across the panel."}],"start":[0,2,0,0.3],"measures":{"motion":0.7954,"detail":0.0794,"edges":0.4039,"complexity":1.2562,"coverage":0.2957,"colour":0.1808,"drift":0.1151},"knobResponse":[0.0754,0.1076,0.0932,0.1053]},{"slug":"fluoroscope","title":"Fluoroscope","family":"body","round":27,"note":"형광 투시 화면의 어두운 판 위에서 해골이 러닝머신을 옆모습으로 걸어요. 정수리에서 발가락까지 128줄을 다 쓰고, 먼 쪽 다리와 팔은 흐리며 움직이는 뼈 뒤에 인광이 잠깐 남아요. K3 은 걸음을 두 발이 뜨는 달리기로 바꾸고, 누르면 돌아서서 앞모습으로 손을 흔들어요.","idea":"On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.","buttons":"K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.","code":"// ===== Patternflow pattern =====\n// Title:   Fluoroscope\n// Family:  body\n// Idea:    On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after cineradiography, the X-ray motion pictures of the 1950s\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1\n//\n// Knob 1: Screen. The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour.\n// Knob 2: Speed. The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower.\n// Knob 3: Gait. A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps.\n// Knob 4: Dose. The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body.\n// Buttons: K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, sqrt, exp, floor, ceil, atan2, hypot, PI } = Math;\nconst D = PI / 180;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// A figure 114 LEDs tall: limb lengths and half spans of hips and shoulders.\n// FLOOR is the top of the belt. Bones are drawn half again as thick as life.\nconst LT = 27.5, LS = 27.5, LU = 20.5, LF = 16, HZ = 5.2, SZ = 12.4, FLOOR = 122.5;\n\n// For the walk (toe-off at 60%) and then the run (toe-off at 40%), the thigh's\n// angle from vertical and the flexion of knee and ankle, in degrees every 10%\n// of a stride from heel strike, after clinical gait curves.\nconst GT = [\n  [24, 20, 12, 3, -6, -14, -10, 6, 19, 25],\n  [4, 16, 18, 10, 5, 14, 38, 60, 45, 15],\n  [0, -5, 3, 6, 8, 0, -16, -10, -2, 1],\n  [30, 18, 5, -5, -12, -6, 12, 30, 42, 40],\n  [20, 38, 40, 28, 18, 50, 90, 104, 76, 36],\n  [6, 16, 20, 10, -18, -14, -2, 6, 8, 6],\n];\n// A periodic Catmull-Rom spline through a row.\nfunction curve(r, p) {\n  const f = (p - floor(p)) * 10, i = floor(f) % 10, u = f - floor(f);\n  const a = r[(i + 9) % 10], b = r[i], c = r[(i + 1) % 10], d = r[(i + 2) % 10];\n  return b + 0.5 * u * (c - a + u * (2 * a - 5 * b + 4 * c - d + u * (3 * (b - c) + d - a)));\n}\nconst ang = (k, q, g) => mix(curve(GT[k], q), curve(GT[k + 3], q), g);\n// The jump, keyed in seconds: thigh, knee, ankle, shoulder, elbow, lean.\nconst JT = [0, 0.3, 0.46, 0.7, 0.9, 1.1, 1.5];\nconst JK = [\n  [0, 50, 2, 30, 10, 42, 0],\n  [0, 95, 4, 58, 16, 76, 0],\n  [0, 24, -34, -18, -6, 20, 0],\n  [0, -40, 58, 50, 25, 10, 0],\n  [10, 15, 45, 50, 35, 30, 10],\n  [0, 24, 2, 4, 8, 20, 0],\n];\nfunction key(r, u) {\n  let i = 0;\n  while (i \u003c 5 && u > JT[i + 1]) i++;\n  return mix(r[i], r[i + 1], sm(JT[i], JT[i + 1], u));\n}\n\n// The spine's curve in the trunk's frame (x forward, y down from the hips).\nconst CY = [-41, -36.5, -32.5, -28, -23.5, -19, -15.5, -11.5, -7.5, -4.5];\nconst CX = [-2.2, -1.9, -3, -4.6, -5.3, -4.8, -3.8, -2.4, -2, -2.8];\nfunction spx(y) {\n  let i = 0;\n  while (i \u003c 8 && y > CY[i + 1]) i++;\n  return mix(CX[i], CX[i + 1], (y - CY[i]) / (CY[i + 1] - CY[i]));\n}\n// 24 vertebral bodies from the neck down: x, y, half sizes, tilt.\nconst VT = new Float64Array(144);\nfor (let v = 0, y = -40.8; v \u003c 24; v++) {\n  const k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2, h = [1.25, 1.3, 2.3][k], c = y + h / 2;\n  VT.set([spx(c), c, [1.3, 1.6, 2.2][k], h * 0.4, [1.6, 1.9, 2.6][k], -atan2(spx(c + 0.5) - spx(c - 0.5), 1)], v * 6);\n  y += h;\n}\n// Seven ribs stand for twelve. Each row gives the half depth and width of the\n// cage, the drop of the front end and its sag. The last number is how far\n// round the bone goes before the cartilage, which the beam passes through.\nconst RIB = [\n  [4, 5.5, 4, 0.6, 0.95], [5.4, 8.2, 6.2, 0.9, 0.92], [6.1, 10, 7.6, 1.1, 0.88], [6.6, 11.2, 8.4, 1.2, 0.82],\n  [6.7, 11.6, 8.6, 1.2, 0.75], [6.5, 11.4, 8.2, 1.1, 0.64], [6, 10.6, 7, 1, 0.5],\n];\n// The hip bone as lines split by NaN: the iliac crest, the front border down\n// to the socket, the back border, the brim from sacrum to pubis.\nconst IL = [\n  -6.6, -5.5, 4, -5.6, -9.4, 6.2, -3.6, -11.6, 7.8, -1, -11.8, 8.8, 1.8, -10.4, 9.2, 3.8, -8, 9, 4.2, -7.4, 9, 3, -3.6, 7.5, 1.8, -2.6, 6,\n  NaN, 0, 0, -6.6, -5.5, 4, -5.4, -2.6, 4.6, -4.6, -1.2, 4.8, -3.2, 1.2, 4.2, -2.8, 4, 4.2, -2.4, 6.4, 4.2,\n  NaN, 0, 0, -4.2, -3.4, 3.6, -1.6, -1.6, 4.4, 0.5, -1, 4.6, 2.6, 0.6, 3.6, 4.4, 3, 1.2,\n];\n// Gas pockets in the gut: x, y, z, size.\nconst GAS = [2.6, -13.6, -5, 1.4, 3.2, -7, 3, 1, -0.4, -5, -2.4, 0.9, 4.4, -3.6, -4.4, 0.85];\n// Fingers: offset across the palm and length; the share of each phalanx.\nconst FO = [1.25, 0.42, -0.42, -1.2], FLN = [5.4, 6, 5.6, 4.6], PHL = [0.45, 0.32, 0.23];\n// Phosphors: the glow and its afterglow.\nconst PAL = [\n  [0.45, 0.7, 1, 0.35, 1, 0.55],\n  [0.3, 1, 0.4, 0.15, 0.7, 0.25],\n  [1, 0.62, 0.18, 0.9, 0.3, 0.05],\n  [0.72, 0.38, 1, 0.35, 0.3, 1],\n];\n\n// Bone and flesh add up apart as path length along the beam; G is afterglow.\nconst B = new Float32Array(N), T = new Float32Array(N), G = new Float32Array(N), GB = new Float32Array(N);\nconst LA = new Float64Array(6), AR = new Float64Array(4), PC = new Float64Array(6), MO = new Float64Array(6), MI = new Float64Array(6);\nconst FR = new Float64Array(13), AV = new Float64Array(9);\nlet TG = B;\nlet PSI = 0, CP = 1, SP = 0, OX = 25, OY = 63, LAM = 0, LC = 1, LSN = 0;\nlet HX = 0, HY = 0, ETA = 0, HC = 1, HS = 0, JA = 0, JC = 1, JS = 0;\nlet gx = 0, gy = 0, gz = 0, qx = 0, qy = 0, qz = 0, FROT = 0;\nlet e1x = 1, e1y = 0, e1z = 0, e2x = 0, e2y = 1, e2z = 0, e3x = 0, e3z = 1;\n\n// Frames: body, with x forward and y down, trunk, head, jaw, and a limb's\n// own, whose first axis runs along the bone.\nconst FB = (x, y, z) => ((gx = x), (gy = y), (gz = z), (FROT = 0));\nconst FT = (x, y, z) => ((gx = x * LC - y * LSN), (gy = x * LSN + y * LC), (gz = z), (FROT = LAM));\nconst FH = (x, y, z) => ((gx = HX + x * HC - y * HS), (gy = HY + x * HS + y * HC), (gz = z), (FROT = ETA));\nconst FL = (u, v, w) => (\n  (gx = FR[0] + FR[3] * u + FR[6] * v + FR[9] * w), (gy = FR[1] + FR[4] * u + FR[7] * v + FR[10] * w), (gz = FR[2] + FR[5] * u + FR[8] * v + FR[11] * w), (FROT = FR[12])\n);\nfunction FJ(x, y, z) {\n  const dx = x - 1.3, dy = y + 2.6;\n  FH(1.3 + dx * JC - dy * JS, -2.6 + dx * JS + dy * JC, z);\n  FROT += JA;\n}\nfunction P() {\n  qx = OX + gx * CP - gz * SP;\n  qy = OY + gy;\n  qz = gx * SP + gz * CP;\n}\n\n// A tapered rod, hollow when sh > 0: the chord through a tube of cortex.\nfunction tube(ax, ay, bx, by, ra, rb, w, sh) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6, m = max(ra, rb) + 0.8;\n  const x0 = max(0, ceil(min(ax, bx) - m)), x1 = min(W - 1, floor(max(ax, bx) + m));\n  const y0 = max(0, ceil(min(ay, by) - m)), y1 = min(H - 1, floor(max(ay, by) + m));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const ux = x - ax, uy = y - ay, t = cl((ux * dx + uy * dy) / l2, 0, 1);\n      const ex = ux - t * dx, ey = uy - t * dy, d2 = ex * ex + ey * ey, R = ra + (rb - ra) * t + 0.3, o = R * R - d2;\n      if (o \u003c= 0) continue;\n      const ri = R - 0.85, i = ri * ri - d2;\n      TG[y * W + x] += 2 * w * (sqrt(o) - (sh && ri > 0 && i > 0 ? sh * sqrt(i) : 0));\n    }\n}\n// An ellipsoid seen along the beam: its quadric, and the chord through it.\nfunction quad(M, a, b, c) {\n  const A = 1 / (a * a), Bq = 1 / (b * b), C = 1 / (c * c);\n  M[0] = e1x * e1x * A + e2x * e2x * Bq + e3x * e3x * C;\n  M[1] = e1x * e1y * A + e2x * e2y * Bq;\n  M[2] = e1y * e1y * A + e2y * e2y * Bq;\n  M[3] = e1x * e1z * A + e2x * e2z * Bq + e3x * e3z * C;\n  M[4] = e1y * e1z * A + e2y * e2z * Bq;\n  M[5] = e1z * e1z * A + e2z * e2z * Bq + e3z * e3z * C;\n}\nfunction chord(M, u, v) {\n  const b = M[3] * u + M[4] * v, d = b * b - M[5] * (M[0] * u * u + 2 * M[1] * u * v + M[2] * v * v - 1);\n  return d > 0 ? (2 * sqrt(d)) / M[5] : 0;\n}\n// Tilted th in the side plane, turned yaw about the vertical. With a shell t\n// the inside counts k less, so a skull's edge glows brighter than its face.\nfunction ell(cx, cy, a, b, c, th, yaw, w, t, k) {\n  (a += 0.3), (b += 0.3), (c += 0.3);\n  const ph = PSI + yaw, cp = cos(ph), sp = sin(ph), ct = cos(th), st = sin(th);\n  (e1x = ct * cp), (e1y = st), (e1z = ct * sp), (e2x = -st * cp), (e2y = ct), (e2z = -st * sp), (e3x = -sp), (e3z = cp);\n  quad(MO, a, b, c);\n  if (t) quad(MI, a - t, b - t, c - t);\n  const rx = hypot(e1x * a, e2x * b, e3x * c) + 0.5, ry = hypot(e1y * a, e2y * b) + 0.5;\n  const x0 = max(0, ceil(cx - rx)), x1 = min(W - 1, floor(cx + rx)), y0 = max(0, ceil(cy - ry)), y1 = min(H - 1, floor(cy + ry));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      let s = chord(MO, x - cx, y - cy);\n      if (s > 0 && t) s -= k * chord(MI, x - cx, y - cy);\n      if (s > 0) TG[y * W + x] += s * w;\n    }\n}\n// The far side of the body glows dimmer than the near side.\nconst wz = () => (TG === B ? cl(1 + 0.09 * qz, 0.45, 1.15) : 1);\nfunction E(F, x, y, z, a, b, c, th, yaw, w, t = 0, k = 0) {\n  F(x, y, z);\n  P();\n  ell(qx, qy, a, b, c, th + FROT, yaw, w * wz(), t, k);\n}\nfunction Tb(F, x1, y1, z1, x2, y2, z2, ra, rb, w, sh = 0) {\n  F(x1, y1, z1);\n  P();\n  const ax = qx, ay = qy, az = qz;\n  F(x2, y2, z2);\n  P();\n  qz = (qz + az) / 2;\n  tube(ax, ay, qx, qy, ra, rb, w * wz(), sh);\n}\n\nexport function setup(params) {\n  const bg = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x - 31.5) / 36, v = (y - 63.5) / 72;\n      bg[y * W + x] = (0.03 + 0.025 * Math.random()) * max(0, 1 - 0.8 * (u * u + v * v) ** 2);\n    }\n  params.s = { ph: 0.05, br: 0, belt: 0, turn: -1, jump: -1, dt: 1 / 30, scr: 0, spd: 2, gait: 0, dose: 0.06, amp: 1, bg };\n  G.fill(0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], b = input.btnPressed || [];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dt = dt || 1 / 30;\n  S.scr = cl(k[0], 0, 1);\n  S.spd = cl(k[1], 0.2, 3);\n  const g = (S.gait = cl(k[2], 0, 1));\n  S.dose = cl(k[3], 0, 1);\n  if (b[0] && S.turn \u003c 0) S.turn = 0;\n  if (b[1] && S.jump \u003c 0) S.jump = 0;\n  if (S.turn >= 0 && (S.turn += dt) > 5) S.turn = -1;\n  if (S.jump >= 0 && (S.jump += dt) > 1.5) S.jump = -1;\n  const a = (S.amp = S.turn \u003c 0 ? 1 : 1 - sm(0, 0.7, S.turn) * (1 - sm(4.3, 5, S.turn)));\n  const f = (mix(0.93, 1.4, g) * S.spd) / 2, to = mix(0.6, 0.4, g);\n  S.ph = (S.ph + dt * f * a) % 1;\n  // The belt runs as fast as the foot on it goes back, from strike to toe-off.\n  const ax = (q) => LT * sin(ang(0, q, g) * D) + LS * sin((ang(0, q, g) - ang(1, q, g)) * D);\n  S.belt += (dt * a * a * f * (ax(0) - ax(to))) / to;\n  S.br = (S.br + dt * mix(0.25, 0.5, g)) % 1;\n}\n\nfunction treadmill(belt) {\n  const y = FLOOR + 1.7, an = -belt / 2.3, c = 1.8 * cos(an), s = 1.8 * sin(an);\n  tube(4.5, y, 59.5, y, 0.8, 0.8, 0.45, 0.5);\n  tube(4.5, FLOOR + 0.1, 59.5, FLOOR + 0.1, 0.2, 0.2, 0.3, 0);\n  for (let x = 4.5; x \u003c 60; x += 55) {\n    ell(x, y, 2.1, 2.1, 2.1, 0, 0, 0.45, 0.6, 1);\n    tube(x - c, y - s, x + c, y + s, 0.35, 0.35, 0.5, 0);\n  }\n  for (let j = 0; j \u003c 8; j++) {\n    const x = 5 + ((((j * 7 - belt) % 56) + 56) % 56);\n    tube(x, FLOOR - 0.2, x + 1, FLOOR - 0.2, 0.3, 0.3, 0.5, 0);\n  }\n}\n\nfunction skull() {\n  // The vault, upper jaw, chin and hollow eye sockets; then the dense bone of\n  // the ear, the cheekbone, the teeth and the jaw.\n  E(FH, 1.8, -7.2, 0, 7, 6.1, 5.8, -0.12, 0, 0.7, 0.5, 1);\n  E(FH, 6.4, -1.6, 0, 2.6, 1.6, 3.4, 0.1, 0, 0.4, 0.5, 0.5);\n  E(FJ, 7.9, 3.2, 0, 1.4, 1.3, 2, 0, 0, 0.7, 0.5, 0.5);\n  Tb(FH, 7.6, -5.6, 0, 8.7, -3, 0, 0.45, 0.4, 0.9);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    E(FH, 6.2, -4.6, s * 2.7, 1.9, 2, 1.4, 0, s * 0.5, 0.7, 0.55, 1);\n    E(FH, 6, -4.6, s * 2.4, 1.6, 1.7, 1.6, 0, 0, -0.35);\n    E(FH, 6.2, -1.9, s * 2, 1.5, 1.1, 1.4, 0, 0, -0.3);\n    E(FH, 0.3, -3.4, s * 3.4, 1.7, 1.3, 1.4, 0.3, 0, 0.8);\n    Tb(FH, 2.2, -2.4, s * 5, 6.2, -2.9, s * 4.2, 0.55, 0.65, 0.8);\n    Tb(FH, 8.6, 0.1, 0, 7.4, 0.1, s * 2.3, 0.75, 0.7, 1);\n    Tb(FH, 7.4, 0.1, s * 2.3, 4.6, 0.2, s * 3.2, 0.7, 0.75, 1);\n    Tb(FJ, 8.2, 1.3, 0, 7.2, 1.3, s * 2.3, 0.7, 0.65, 1);\n    Tb(FJ, 7.2, 1.3, s * 2.3, 4.6, 1.2, s * 3.1, 0.65, 0.7, 1);\n    Tb(FJ, 8.3, 3.7, 0, 6.6, 3.5, s * 2.8, 1, 0.9, 0.9, 0.5);\n    Tb(FJ, 6.6, 3.5, s * 2.8, 2, 3.1, s * 4.7, 0.9, 0.85, 0.9, 0.5);\n    Tb(FJ, 2, 3.1, s * 4.7, 1.3, -2.2, s * 4.7, 0.85, 0.7, 0.9, 0.4);\n    Tb(FJ, 2.7, 0.8, s * 4.5, 3.5, -1.8, s * 4.3, 0.55, 0.35, 0.8);\n  }\n}\n\nfunction trunk(b) {\n  // Vertebrae, sacrum, tailbone, and the breastbone moving out on the breath.\n  for (let v = 0; v \u003c 24; v++) {\n    const o = v * 6, x = VT[o], y = VT[o + 1], a = VT[o + 2], k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2;\n    E(FT, x, y, 0, a, VT[o + 3], VT[o + 4], VT[o + 5], 0, 0.55, 0.45, 0.7);\n    Tb(FT, x - a + 0.2, y, 0, x - a - (v === 6 ? 3.6 : [2.2, 3, 3.4][k]), y + [0.5, 1.6, 0.4][k], 0, 0.45, 0.3, k === 1 ? 0.4 : 0.7);\n  }\n  Tb(FT, -3.6, -4.8, 0, -6.6, 2.6, 0, 2.5, 1, 0.8, 0.5);\n  Tb(FT, -6.6, 2.6, 0, -5.2, 5.6, 0, 0.8, 0.45, 0.8);\n  const sb = 0.5 * b;\n  Tb(FT, 5 + sb, -31, 0, 6.6 + sb, -23.5, 0, 1.2, 0.9, 0.9, 0.5);\n  Tb(FT, 6.6 + sb, -23.5, 0, 7 + sb, -19.5, 0, 0.9, 0.45, 0.8);\n  E(FT, 5.2 + sb, -29.8, 0, 1.3, 1.9, 2.4, -0.2, 0, 0.7, 0.5, 0.6);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    // Hip bone: faint wing, its lines, socket, obturator ring.\n    E(FT, -1.5, -6.5, s * 6, 5.4, 4.8, 2.6, -0.35, s * 0.55, 0.2, 0.5, 1);\n    for (let i = 3; i \u003c IL.length; i += 3)\n      if (IL[i] === IL[i] && IL[i - 3] === IL[i - 3]) Tb(FT, IL[i - 3], IL[i - 2], s * IL[i - 1], IL[i], IL[i + 1], s * IL[i + 2], 0.45, 0.45, 0.85);\n    E(FT, 0, 0, s * HZ, 3.2, 3.2, 3, 0, 0, 0.4, 0.6, 1);\n    E(FT, 1, 4.6, s * 3.8, 3.2, 2.2, 1.6, 0.3, s * 0.3, 0.4, 0.5, 1);\n    // Collarbone, shoulder blade, the spine of the blade and the coracoid.\n    Tb(FT, 4.6, -32.2, s * 1.6, 2.2, -33.3, s * 7.4, 0.85, 0.8, 0.9, 0.4);\n    Tb(FT, 2.2, -33.3, s * 7.4, -1, -34.6, s * 12, 0.8, 0.9, 0.9, 0.4);\n    E(FT, -5.6, -27.5, s * 8.3, 2, 6.2, 4.6, 0.1, s * 0.6, 0.2, 0.4, 1);\n    Tb(FT, -7.4, -30.6, s * 5.4, -1.4, -35, s * 11.6, 0.6, 0.75, 0.9);\n    Tb(FT, 0.4, -32.4, s * 10, 2.4, -31.6, s * 9, 0.5, 0.45, 0.8);\n    // The ribs swing up and out on the breath.\n    for (let i = 0; i \u003c 7; i++) {\n      const r = RIB[i], ya = -31.5 + 2.4 * i, xa = spx(ya) - 1.3, rx = r[0] * (1 + 0.06 * b), rz = r[1] * (1 + 0.04 * b), dr = r[2] - 1.3 * b;\n      let px = xa, py = ya, pz = s * 1.6;\n      for (let j = 1; j \u003c= 5; j++) {\n        const al = (r[4] * PI * j) / 5, ca = 1 - cos(al), x = xa + rx * ca, y = ya + (dr * ca) / 2 + r[3] * sin(al), z = s * (1.6 + rz * sin(al));\n        Tb(FT, px, py, pz, x, y, z, 0.3, 0.25, 0.9);\n        (px = x), (py = y), (pz = z);\n      }\n    }\n  }\n}\n\nfunction flesh(b) {\n  E(FH, 2.4, -6, 0, 8, 8.4, 6.8, -0.1, 0, 1);\n  Tb(FT, -1.6, -31, 0, -0.6, -41, 0, 4.6, 4.2, 1);\n  E(FT, -0.2 + 0.3 * b, -23.5, 0, 9.4 + 0.4 * b, 11.5, 12.6, 0.05, 0, 1);\n  E(FT, 1.4, -9.5, 0, 8.8, 8.6, 11.4, 0, 0, 1);\n  E(FT, -1.6, -0.8, 0, 8.8, 8, 12.4, 0, 0, 1);\n  // Air in the lungs and windpipe and in the gut; heart and liver a little denser.\n  for (let s = -1; s \u003c= 1; s += 2) E(FT, -0.3, -24.4 + 0.6 * b, s * 5.8, 5.6 + 0.3 * b, 8 + 0.5 * b, 5.4, 0.1, s * 0.15, -1);\n  Tb(FT, 2.4, -40.5, 0, 0.8, -28.6, 0, 1, 1, -1);\n  E(FT, 3.6, -19.4, -1.6, 4, 4.6, 4.2, 0.6, 0, 0.55);\n  E(FT, 1.4, -12.6, 3.2, 6, 4.2, 6.8, 0.3, 0, 0.3);\n  for (let i = 0; i \u003c 16; i += 4) E(FT, GAS[i], GAS[i + 1], GAS[i + 2], 1.8 * GAS[i + 3], 1.4 * GAS[i + 3], 1.8 * GAS[i + 3], 0, 0, -0.8);\n}\n\nfunction leg(i, s) {\n  const t1 = LA[i * 3], t2 = LA[i * 3 + 1], t3 = LA[i * 3 + 2], z = s * HZ, bone = TG === B;\n  const dx = sin(t1), dy = cos(t1), kx = LT * dx, ky = LT * dy, ex = sin(t2), ey = cos(t2), ax = kx + LS * ex, ay = ky + LS * ey, fx = cos(t3), fy = -sin(t3);\n  // Femur: head in its socket, neck, greater trochanter, shaft, condyles.\n  FR.set([0, 0, z, dx, dy, 0, dy, -dx, 0, 0, 0, s, -t1]);\n  if (!bone) Tb(FL, -1, 0, 0, LT, 0, 0, 6.4, 4.4, 1);\n  else {\n    E(FL, 0, 0, 0, 2.3, 2.3, 2.3, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 0, 0, 0, 2.6, 0, 2.6, 1.3, 1.4, 0.6);\n    E(FL, 1.6, -1.5, 3.2, 1.7, 2.1, 1.5, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 2.8, 0, 2.6, LT - 2.4, 0, 0.4, 1.75, 1.6, 1, 0.85);\n    E(FL, LT - 1.2, -0.3, 0, 2.5, 2.4, 3.4, 0, 0, 0.7, 0.6, 0.6);\n    // The kneecap rides over the joint, halfway between thigh and shank.\n    const h = (t1 + t2) / 2;\n    E(FB, kx + cos(h) * 3.2, ky - sin(h) * 3.2, z, 1, 1.8, 1.5, -h, 0, 0.85, 0.45, 0.5);\n  }\n  // Tibia and the thinner fibula behind it.\n  FR.set([kx, ky, z, ex, ey, 0, ey, -ex, 0, 0, 0, s, -t2]);\n  if (!bone) Tb(FL, 0, 0, 0, LS, 0, 0, 4.2, 2.4, 1), E(FL, 8, -1.6, 0, 3, 6.5, 3.2, 0, 0, 1);\n  else {\n    E(FL, 1.9, 0, 0, 2.8, 1.4, 3.3, 0, 0, 0.7, 0.5, 0.5);\n    Tb(FL, 3, 0.3, 0, LS - 1.8, 0, 0, 1.75, 1.2, 1, 0.85);\n    E(FL, LS - 1, 0, -0.4, 1.6, 1.7, 2.2, 0, 0, 0.75, 0.5, 0.4);\n    E(FL, 3.6, -1.9, 2, 1, 1, 1, 0, 0, 0.8);\n    Tb(FL, 4, -1.9, 2, LS - 0.8, -1, 2.4, 0.7, 0.6, 0.95, 0.3);\n    E(FL, LS + 0.3, -1, 2.6, 1, 1.5, 1, 0, 0, 0.8);\n  }\n  // Foot: talus, heel, arch, two metatarsals for five, and toes that stay flat\n  // on the belt as the heel lifts.\n  FR.set([ax, ay, z, fx, fy, 0, -fy, fx, 0, 0, 0, s, -t3]);\n  if (!bone) return Tb(FL, -3, 2.6, 0, 10, 3, 0, 2.3, 1.6, 1);\n  E(FL, 0.6, 1, 0, 2.2, 1.5, 1.6, 0, 0, 0.8, 0.5, 0.5);\n  E(FL, -2.4, 2.9, 0, 3.3, 1.8, 1.6, -0.3, 0, 0.8, 0.6, 0.55);\n  E(FL, 3.3, 1.7, 0, 1.5, 1.3, 1.8, 0, 0, 0.85);\n  E(FL, 2.6, 3.1, 0, 1.2, 1, 1.2, 0, 0, 0.8);\n  Tb(FL, 4.4, 1.9, 0, 9.2, 3.5, 0, 0.65, 0.6, 1, 0.3);\n  Tb(FL, 3.6, 3.4, 1, 8.4, 3.9, 1, 0.55, 0.5, 0.9);\n  FL(9.2, 3.5, 0);\n  const d = t3 \u003c 0 ? -t3 * (1 - sm(0.4, 3, FLOOR - OY - gy - 1.1)) : 0, c = cos(d), n = -sin(d);\n  Tb(FL, 9.2, 3.5, 0, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 0.5, 0.45, 0.95);\n  Tb(FL, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 9.2 + c * 4.2, 3.5 + n * 4.2, 0, 0.45, 0.4, 0.9);\n}\n\nfunction arm(s, sig, eps, k, wv) {\n  FT(-1, -33, s * SZ);\n  const sx = gx, sy = gy, sz = gz, au = sig + LAM, af = au + eps, V = AV;\n  // Axes of the upper arm and forearm, and the thumb side of the hand. In the\n  // wave the elbow goes out to the side and the forearm up, palm to you.\n  V.set([sin(au), cos(au), s * 0.1, sin(af), cos(af), s * 0.04, cos(af), -sin(af), 0]);\n  if (k > 0) {\n    const A = [0.2, 0.62, s * 0.76, 0.15, -cos(wv), s * (sin(wv) - 0.1), 0, 0, -s];\n    for (let j = 0; j \u003c 9; j++) V[j] = mix(V[j], A[j], k);\n  }\n  for (let j = 0; j \u003c 9; j += 3) {\n    const d = j === 6 ? V[6] * V[3] + V[7] * V[4] + V[8] * V[5] : 0;\n    for (let c = 0; c \u003c 3; c++) V[j + c] -= d * V[3 + c];\n    const l = hypot(V[j], V[j + 1], V[j + 2]) || 1;\n    for (let c = 0; c \u003c 3; c++) V[j + c] /= l;\n  }\n  const [ux, uy, uz, fx, fy, fz, px, py, pz] = V, ex = sx + LU * ux, ey = sy + LU * uy, ez = sz + LU * uz;\n  // The forearm's frame from the elbow, its third axis toward the palm.\n  FR.set([ex, ey, ez, fx, fy, fz, px, py, pz, s * (fy * pz - fz * py), s * (fz * px - fx * pz), s * (fx * py - fy * px), -af]);\n  if (TG === T) {\n    Tb(FB, sx, sy, sz, ex, ey, ez, 2.8, 2.2, 1);\n    Tb(FL, 0, 0, 0, LF, 0, 0, 2.2, 1.6, 1);\n    return Tb(FL, LF, 0, 0, LF + 7, 0, 0, 1.5, 1.1, 1);\n  }\n  // Humerus, ulna with the point of the elbow, radius, wrist, four fingers\n  // curled a little toward the palm, thumb.\n  E(FB, sx, sy, sz, 2.2, 2.2, 2.2, 0, 0, 0.8, 0.7, 0.5);\n  Tb(FB, sx + ux * 1.8, sy + uy * 1.8, sz + uz * 1.8, ex - ux * 1.3, ey - uy * 1.3, ez - uz * 1.3, 1.35, 1.15, 1, 0.85);\n  E(FB, ex - ux * 0.8, ey - uy * 0.8, ez - uz * 0.8, 1.3, 1.5, 2.5, -au, 0, 0.8, 0.5, 0.5);\n  E(FL, 0.3, -1, 0, 1, 1, 1, 0, 0, 0.9);\n  Tb(FL, 0.8, -0.5, 0, LF, -0.5, 0, 0.75, 0.55, 1, 0.5);\n  Tb(FL, 1.2, 0.5, 0, LF, 0.55, 0, 0.6, 0.95, 1, 0.5);\n  E(FL, LF + 1.4, 0, 0, 1.5, 1.3, 1.5, 0, 0, 0.9, 0.5, 0.4);\n  const c0 = mix(0.3, 0.06, k);\n  for (let j = 0; j \u003c 5; j++) {\n    const th = j > 3, o = th ? 2.2 : FO[j];\n    let x = LF + (th ? 3.2 : 5.8), y = o, z = 0, c = 0;\n    Tb(FL, LF + (th ? 1 : 2.2), th ? 0.9 : o / 2, 0, x, y, z, 0.5, 0.45, 0.95);\n    for (let m = 0; m \u003c (th ? 2 : 3); m++) {\n      c += c0;\n      const L = th ? 2 - 0.4 * m : FLN[j] * PHL[m], X = x + cos(c) * L, Y = y + (th ? 0.7 * L : 0), Z = z + sin(c) * L;\n      Tb(FL, x, y, z, X, Y, Z, 0.42, 0.36, 0.9);\n      (x = X), (y = Y), (z = Z);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const g = S.gait, a = S.amp, p = S.ph, u = S.jump, tt = S.turn, b = sin(2 * PI * S.br);\n  const wj = u \u003c 0 ? 0 : sm(0, 0.2, u) * (1 - sm(1.15, 1.5, u));\n  const tf = tt \u003c 0 ? 0 : sm(0.5, 1.4, tt) * (1 - sm(3.8, 4.7, tt));\n  const wave = tt \u003c 0 ? 0 : sm(1.4, 1.9, tt) * (1 - sm(3.3, 3.8, tt));\n  PSI = (PI / 2) * tf;\n  (CP = cos(PSI)), (SP = sin(PSI));\n  LAM = (mix(4, 11, g) * a + (wj ? key(JK[5], u) * wj : 0)) * D;\n  (LC = cos(LAM)), (LSN = sin(LAM));\n  // Legs half a stride apart, arms swinging against them; the lowest heel or\n  // ball stands on the belt.\n  let low = 0;\n  for (let i = 0; i \u003c 2; i++) {\n    const q = p + 0.5 * i, c = cos(2 * PI * q);\n    let th = ang(0, q, g) * a, kn = ang(1, q, g) * a + 3, an = ang(2, q, g) * a;\n    let sg = mix(-5 - 17 * c, -12 - 28 * c, g) * a, ep = mix(8, mix(14 + 8 * (1 - c), 80 + 9 * (1 - c), g), a);\n    if (wj) {\n      (th = mix(th, key(JK[0], u), wj)), (kn = mix(kn, key(JK[1], u), wj)), (an = mix(an, key(JK[2], u), wj));\n      (sg = mix(sg, key(JK[3], u), wj)), (ep = mix(ep, key(JK[4], u), wj));\n    }\n    const t1 = (LA[i * 3] = th * D), t2 = (LA[i * 3 + 1] = (th - kn) * D), t3 = (LA[i * 3 + 2] = (th - kn + an) * D);\n    const ay = LT * cos(t1) + LS * cos(t2);\n    low = max(low, ay + 4 * sin(t3) + 4.9 * cos(t3), ay - 9.2 * sin(t3) + 4.6 * cos(t3));\n    (AR[i * 2] = sg * D), (AR[i * 2 + 1] = ep * D);\n  }\n  // A run leaves the belt between steps; a jump leaves it higher.\n  const fl = g * g * a * 3.2 * max(0, (cos(4 * PI * (p - 0.45)) - 0.75) * 4) ** 1.5;\n  const v = (u - 0.46) / 0.44;\n  OY = FLOOR - low - fl - (v > 0 && v \u003c 1 ? 32 * v * (1 - v) : 0);\n  OX = mix(26.5 + 2.5 * g, 35, tf);\n  FT(-2.1, -41.4, 0);\n  (HX = gx), (HY = gy);\n  ETA = -LAM * 0.85 + 0.035 * sin(4 * PI * p) * a;\n  (HC = cos(ETA)), (HS = sin(ETA));\n  JA = 0.2 * wave * (0.6 + 0.4 * sin(tt * 9));\n  (JC = cos(JA)), (JS = sin(JA));\n  const wv = 0.3 * sin((tt - 1.9) * 2 * PI * 1.7) * sm(1.6, 2, tt);\n\n  B.fill(0);\n  T.fill(0);\n  TG = B;\n  treadmill(S.belt);\n  skull();\n  trunk(b);\n  for (let r = 0; r \u003c 2; r++) {\n    TG = r ? T : B;\n    leg(0, 1);\n    leg(1, -1);\n    arm(1, AR[0], AR[1], wave, wv);\n    arm(-1, AR[2], AR[3], 0, 0);\n  }\n  if (S.dose > 0.001) flesh(b);\n\n  // The screen turns bone and flesh to light. An afterglow fades behind what\n  // moves, and bright bone blooms a little.\n  const x3 = S.scr * 3, pi = min(2, floor(x3));\n  for (let j = 0; j \u003c 6; j++) PC[j] = mix(PAL[pi][j], PAL[pi + 1][j], x3 - pi);\n  const dec = exp(-S.dt / 0.07), gd = 0.62 * sqrt(S.dose), bg = S.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) GB[r + x] = 0.5 * G[r + x] + 0.25 * (G[r + (x ? x - 1 : x)] + G[r + (x \u003c W - 1 ? x + 1 : x)]);\n  for (let q = 0; q \u003c N; q++) {\n    const e = B[q] > 0 ? (1 - exp(-0.3 * B[q])) ** 1.35 : 0, t = T[q] > 0 ? gd * (1 - exp(-T[q] / 12)) : 0;\n    B[q] = e + t * (1 - e);\n    G[q] = max(B[q], GB[q] * dec);\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += B[r + cl(x + d, 0, W - 1)];\n      T[r + x] = a / 5;\n    }\n  const ch = (j, lv, w, ag) => min(255, 255 * (lv * (PC[j] + (1 - PC[j]) * w) + ag * PC[j + 3]));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += T[cl(y + d, 0, H - 1) * W + x];\n      const q = y * W + x, L = B[q], ag = (G[q] - L) * 0.3, lv = L + bg[q] + 0.045 * a, w = L * L * L * 0.75;\n      display.setPixel(x, y, ch(0, lv, w, ag), ch(1, lv, w, ag), ch(2, lv, w, ag));\n    }\n}\n","layer":{"id":"layer-fluoroscope","type":"code","name":"fluoroscope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fluoroscope\n// Family:  body\n// Idea:    On the dark screen of a fluoroscope a skeleton walks in profile on a treadmill, skull to toes, its far leg and arm dimmer behind the near ones, while every moving bone leaves a faint afterglow on the phosphor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after cineradiography, the X-ray motion pictures of the 1950s\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1\n//\n// Knob 1: Screen. The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour.\n// Knob 2: Speed. The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower.\n// Knob 3: Gait. A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps.\n// Knob 4: Dose. The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body.\n// Buttons: K1 tap: the walker stops, turns to face you, so the skeleton is seen from the front, waves and turns back to walk on. K2 tap: a jump in place.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, sqrt, exp, floor, ceil, atan2, hypot, PI } = Math;\nconst D = PI / 180;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// A figure 114 LEDs tall: limb lengths and half spans of hips and shoulders.\n// FLOOR is the top of the belt. Bones are drawn half again as thick as life.\nconst LT = 27.5, LS = 27.5, LU = 20.5, LF = 16, HZ = 5.2, SZ = 12.4, FLOOR = 122.5;\n\n// For the walk (toe-off at 60%) and then the run (toe-off at 40%), the thigh's\n// angle from vertical and the flexion of knee and ankle, in degrees every 10%\n// of a stride from heel strike, after clinical gait curves.\nconst GT = [\n  [24, 20, 12, 3, -6, -14, -10, 6, 19, 25],\n  [4, 16, 18, 10, 5, 14, 38, 60, 45, 15],\n  [0, -5, 3, 6, 8, 0, -16, -10, -2, 1],\n  [30, 18, 5, -5, -12, -6, 12, 30, 42, 40],\n  [20, 38, 40, 28, 18, 50, 90, 104, 76, 36],\n  [6, 16, 20, 10, -18, -14, -2, 6, 8, 6],\n];\n// A periodic Catmull-Rom spline through a row.\nfunction curve(r, p) {\n  const f = (p - floor(p)) * 10, i = floor(f) % 10, u = f - floor(f);\n  const a = r[(i + 9) % 10], b = r[i], c = r[(i + 1) % 10], d = r[(i + 2) % 10];\n  return b + 0.5 * u * (c - a + u * (2 * a - 5 * b + 4 * c - d + u * (3 * (b - c) + d - a)));\n}\nconst ang = (k, q, g) => mix(curve(GT[k], q), curve(GT[k + 3], q), g);\n// The jump, keyed in seconds: thigh, knee, ankle, shoulder, elbow, lean.\nconst JT = [0, 0.3, 0.46, 0.7, 0.9, 1.1, 1.5];\nconst JK = [\n  [0, 50, 2, 30, 10, 42, 0],\n  [0, 95, 4, 58, 16, 76, 0],\n  [0, 24, -34, -18, -6, 20, 0],\n  [0, -40, 58, 50, 25, 10, 0],\n  [10, 15, 45, 50, 35, 30, 10],\n  [0, 24, 2, 4, 8, 20, 0],\n];\nfunction key(r, u) {\n  let i = 0;\n  while (i \u003c 5 && u > JT[i + 1]) i++;\n  return mix(r[i], r[i + 1], sm(JT[i], JT[i + 1], u));\n}\n\n// The spine's curve in the trunk's frame (x forward, y down from the hips).\nconst CY = [-41, -36.5, -32.5, -28, -23.5, -19, -15.5, -11.5, -7.5, -4.5];\nconst CX = [-2.2, -1.9, -3, -4.6, -5.3, -4.8, -3.8, -2.4, -2, -2.8];\nfunction spx(y) {\n  let i = 0;\n  while (i \u003c 8 && y > CY[i + 1]) i++;\n  return mix(CX[i], CX[i + 1], (y - CY[i]) / (CY[i + 1] - CY[i]));\n}\n// 24 vertebral bodies from the neck down: x, y, half sizes, tilt.\nconst VT = new Float64Array(144);\nfor (let v = 0, y = -40.8; v \u003c 24; v++) {\n  const k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2, h = [1.25, 1.3, 2.3][k], c = y + h / 2;\n  VT.set([spx(c), c, [1.3, 1.6, 2.2][k], h * 0.4, [1.6, 1.9, 2.6][k], -atan2(spx(c + 0.5) - spx(c - 0.5), 1)], v * 6);\n  y += h;\n}\n// Seven ribs stand for twelve. Each row gives the half depth and width of the\n// cage, the drop of the front end and its sag. The last number is how far\n// round the bone goes before the cartilage, which the beam passes through.\nconst RIB = [\n  [4, 5.5, 4, 0.6, 0.95], [5.4, 8.2, 6.2, 0.9, 0.92], [6.1, 10, 7.6, 1.1, 0.88], [6.6, 11.2, 8.4, 1.2, 0.82],\n  [6.7, 11.6, 8.6, 1.2, 0.75], [6.5, 11.4, 8.2, 1.1, 0.64], [6, 10.6, 7, 1, 0.5],\n];\n// The hip bone as lines split by NaN: the iliac crest, the front border down\n// to the socket, the back border, the brim from sacrum to pubis.\nconst IL = [\n  -6.6, -5.5, 4, -5.6, -9.4, 6.2, -3.6, -11.6, 7.8, -1, -11.8, 8.8, 1.8, -10.4, 9.2, 3.8, -8, 9, 4.2, -7.4, 9, 3, -3.6, 7.5, 1.8, -2.6, 6,\n  NaN, 0, 0, -6.6, -5.5, 4, -5.4, -2.6, 4.6, -4.6, -1.2, 4.8, -3.2, 1.2, 4.2, -2.8, 4, 4.2, -2.4, 6.4, 4.2,\n  NaN, 0, 0, -4.2, -3.4, 3.6, -1.6, -1.6, 4.4, 0.5, -1, 4.6, 2.6, 0.6, 3.6, 4.4, 3, 1.2,\n];\n// Gas pockets in the gut: x, y, z, size.\nconst GAS = [2.6, -13.6, -5, 1.4, 3.2, -7, 3, 1, -0.4, -5, -2.4, 0.9, 4.4, -3.6, -4.4, 0.85];\n// Fingers: offset across the palm and length; the share of each phalanx.\nconst FO = [1.25, 0.42, -0.42, -1.2], FLN = [5.4, 6, 5.6, 4.6], PHL = [0.45, 0.32, 0.23];\n// Phosphors: the glow and its afterglow.\nconst PAL = [\n  [0.45, 0.7, 1, 0.35, 1, 0.55],\n  [0.3, 1, 0.4, 0.15, 0.7, 0.25],\n  [1, 0.62, 0.18, 0.9, 0.3, 0.05],\n  [0.72, 0.38, 1, 0.35, 0.3, 1],\n];\n\n// Bone and flesh add up apart as path length along the beam; G is afterglow.\nconst B = new Float32Array(N), T = new Float32Array(N), G = new Float32Array(N), GB = new Float32Array(N);\nconst LA = new Float64Array(6), AR = new Float64Array(4), PC = new Float64Array(6), MO = new Float64Array(6), MI = new Float64Array(6);\nconst FR = new Float64Array(13), AV = new Float64Array(9);\nlet TG = B;\nlet PSI = 0, CP = 1, SP = 0, OX = 25, OY = 63, LAM = 0, LC = 1, LSN = 0;\nlet HX = 0, HY = 0, ETA = 0, HC = 1, HS = 0, JA = 0, JC = 1, JS = 0;\nlet gx = 0, gy = 0, gz = 0, qx = 0, qy = 0, qz = 0, FROT = 0;\nlet e1x = 1, e1y = 0, e1z = 0, e2x = 0, e2y = 1, e2z = 0, e3x = 0, e3z = 1;\n\n// Frames: body, with x forward and y down, trunk, head, jaw, and a limb's\n// own, whose first axis runs along the bone.\nconst FB = (x, y, z) => ((gx = x), (gy = y), (gz = z), (FROT = 0));\nconst FT = (x, y, z) => ((gx = x * LC - y * LSN), (gy = x * LSN + y * LC), (gz = z), (FROT = LAM));\nconst FH = (x, y, z) => ((gx = HX + x * HC - y * HS), (gy = HY + x * HS + y * HC), (gz = z), (FROT = ETA));\nconst FL = (u, v, w) => (\n  (gx = FR[0] + FR[3] * u + FR[6] * v + FR[9] * w), (gy = FR[1] + FR[4] * u + FR[7] * v + FR[10] * w), (gz = FR[2] + FR[5] * u + FR[8] * v + FR[11] * w), (FROT = FR[12])\n);\nfunction FJ(x, y, z) {\n  const dx = x - 1.3, dy = y + 2.6;\n  FH(1.3 + dx * JC - dy * JS, -2.6 + dx * JS + dy * JC, z);\n  FROT += JA;\n}\nfunction P() {\n  qx = OX + gx * CP - gz * SP;\n  qy = OY + gy;\n  qz = gx * SP + gz * CP;\n}\n\n// A tapered rod, hollow when sh > 0: the chord through a tube of cortex.\nfunction tube(ax, ay, bx, by, ra, rb, w, sh) {\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6, m = max(ra, rb) + 0.8;\n  const x0 = max(0, ceil(min(ax, bx) - m)), x1 = min(W - 1, floor(max(ax, bx) + m));\n  const y0 = max(0, ceil(min(ay, by) - m)), y1 = min(H - 1, floor(max(ay, by) + m));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const ux = x - ax, uy = y - ay, t = cl((ux * dx + uy * dy) / l2, 0, 1);\n      const ex = ux - t * dx, ey = uy - t * dy, d2 = ex * ex + ey * ey, R = ra + (rb - ra) * t + 0.3, o = R * R - d2;\n      if (o \u003c= 0) continue;\n      const ri = R - 0.85, i = ri * ri - d2;\n      TG[y * W + x] += 2 * w * (sqrt(o) - (sh && ri > 0 && i > 0 ? sh * sqrt(i) : 0));\n    }\n}\n// An ellipsoid seen along the beam: its quadric, and the chord through it.\nfunction quad(M, a, b, c) {\n  const A = 1 / (a * a), Bq = 1 / (b * b), C = 1 / (c * c);\n  M[0] = e1x * e1x * A + e2x * e2x * Bq + e3x * e3x * C;\n  M[1] = e1x * e1y * A + e2x * e2y * Bq;\n  M[2] = e1y * e1y * A + e2y * e2y * Bq;\n  M[3] = e1x * e1z * A + e2x * e2z * Bq + e3x * e3z * C;\n  M[4] = e1y * e1z * A + e2y * e2z * Bq;\n  M[5] = e1z * e1z * A + e2z * e2z * Bq + e3z * e3z * C;\n}\nfunction chord(M, u, v) {\n  const b = M[3] * u + M[4] * v, d = b * b - M[5] * (M[0] * u * u + 2 * M[1] * u * v + M[2] * v * v - 1);\n  return d > 0 ? (2 * sqrt(d)) / M[5] : 0;\n}\n// Tilted th in the side plane, turned yaw about the vertical. With a shell t\n// the inside counts k less, so a skull's edge glows brighter than its face.\nfunction ell(cx, cy, a, b, c, th, yaw, w, t, k) {\n  (a += 0.3), (b += 0.3), (c += 0.3);\n  const ph = PSI + yaw, cp = cos(ph), sp = sin(ph), ct = cos(th), st = sin(th);\n  (e1x = ct * cp), (e1y = st), (e1z = ct * sp), (e2x = -st * cp), (e2y = ct), (e2z = -st * sp), (e3x = -sp), (e3z = cp);\n  quad(MO, a, b, c);\n  if (t) quad(MI, a - t, b - t, c - t);\n  const rx = hypot(e1x * a, e2x * b, e3x * c) + 0.5, ry = hypot(e1y * a, e2y * b) + 0.5;\n  const x0 = max(0, ceil(cx - rx)), x1 = min(W - 1, floor(cx + rx)), y0 = max(0, ceil(cy - ry)), y1 = min(H - 1, floor(cy + ry));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      let s = chord(MO, x - cx, y - cy);\n      if (s > 0 && t) s -= k * chord(MI, x - cx, y - cy);\n      if (s > 0) TG[y * W + x] += s * w;\n    }\n}\n// The far side of the body glows dimmer than the near side.\nconst wz = () => (TG === B ? cl(1 + 0.09 * qz, 0.45, 1.15) : 1);\nfunction E(F, x, y, z, a, b, c, th, yaw, w, t = 0, k = 0) {\n  F(x, y, z);\n  P();\n  ell(qx, qy, a, b, c, th + FROT, yaw, w * wz(), t, k);\n}\nfunction Tb(F, x1, y1, z1, x2, y2, z2, ra, rb, w, sh = 0) {\n  F(x1, y1, z1);\n  P();\n  const ax = qx, ay = qy, az = qz;\n  F(x2, y2, z2);\n  P();\n  qz = (qz + az) / 2;\n  tube(ax, ay, qx, qy, ra, rb, w * wz(), sh);\n}\n\nexport function setup(params) {\n  const bg = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x - 31.5) / 36, v = (y - 63.5) / 72;\n      bg[y * W + x] = (0.03 + 0.025 * Math.random()) * max(0, 1 - 0.8 * (u * u + v * v) ** 2);\n    }\n  params.s = { ph: 0.05, br: 0, belt: 0, turn: -1, jump: -1, dt: 1 / 30, scr: 0, spd: 2, gait: 0, dose: 0.06, amp: 1, bg };\n  G.fill(0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], b = input.btnPressed || [];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dt = dt || 1 / 30;\n  S.scr = cl(k[0], 0, 1);\n  S.spd = cl(k[1], 0.2, 3);\n  const g = (S.gait = cl(k[2], 0, 1));\n  S.dose = cl(k[3], 0, 1);\n  if (b[0] && S.turn \u003c 0) S.turn = 0;\n  if (b[1] && S.jump \u003c 0) S.jump = 0;\n  if (S.turn >= 0 && (S.turn += dt) > 5) S.turn = -1;\n  if (S.jump >= 0 && (S.jump += dt) > 1.5) S.jump = -1;\n  const a = (S.amp = S.turn \u003c 0 ? 1 : 1 - sm(0, 0.7, S.turn) * (1 - sm(4.3, 5, S.turn)));\n  const f = (mix(0.93, 1.4, g) * S.spd) / 2, to = mix(0.6, 0.4, g);\n  S.ph = (S.ph + dt * f * a) % 1;\n  // The belt runs as fast as the foot on it goes back, from strike to toe-off.\n  const ax = (q) => LT * sin(ang(0, q, g) * D) + LS * sin((ang(0, q, g) - ang(1, q, g)) * D);\n  S.belt += (dt * a * a * f * (ax(0) - ax(to))) / to;\n  S.br = (S.br + dt * mix(0.25, 0.5, g)) % 1;\n}\n\nfunction treadmill(belt) {\n  const y = FLOOR + 1.7, an = -belt / 2.3, c = 1.8 * cos(an), s = 1.8 * sin(an);\n  tube(4.5, y, 59.5, y, 0.8, 0.8, 0.45, 0.5);\n  tube(4.5, FLOOR + 0.1, 59.5, FLOOR + 0.1, 0.2, 0.2, 0.3, 0);\n  for (let x = 4.5; x \u003c 60; x += 55) {\n    ell(x, y, 2.1, 2.1, 2.1, 0, 0, 0.45, 0.6, 1);\n    tube(x - c, y - s, x + c, y + s, 0.35, 0.35, 0.5, 0);\n  }\n  for (let j = 0; j \u003c 8; j++) {\n    const x = 5 + ((((j * 7 - belt) % 56) + 56) % 56);\n    tube(x, FLOOR - 0.2, x + 1, FLOOR - 0.2, 0.3, 0.3, 0.5, 0);\n  }\n}\n\nfunction skull() {\n  // The vault, upper jaw, chin and hollow eye sockets; then the dense bone of\n  // the ear, the cheekbone, the teeth and the jaw.\n  E(FH, 1.8, -7.2, 0, 7, 6.1, 5.8, -0.12, 0, 0.7, 0.5, 1);\n  E(FH, 6.4, -1.6, 0, 2.6, 1.6, 3.4, 0.1, 0, 0.4, 0.5, 0.5);\n  E(FJ, 7.9, 3.2, 0, 1.4, 1.3, 2, 0, 0, 0.7, 0.5, 0.5);\n  Tb(FH, 7.6, -5.6, 0, 8.7, -3, 0, 0.45, 0.4, 0.9);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    E(FH, 6.2, -4.6, s * 2.7, 1.9, 2, 1.4, 0, s * 0.5, 0.7, 0.55, 1);\n    E(FH, 6, -4.6, s * 2.4, 1.6, 1.7, 1.6, 0, 0, -0.35);\n    E(FH, 6.2, -1.9, s * 2, 1.5, 1.1, 1.4, 0, 0, -0.3);\n    E(FH, 0.3, -3.4, s * 3.4, 1.7, 1.3, 1.4, 0.3, 0, 0.8);\n    Tb(FH, 2.2, -2.4, s * 5, 6.2, -2.9, s * 4.2, 0.55, 0.65, 0.8);\n    Tb(FH, 8.6, 0.1, 0, 7.4, 0.1, s * 2.3, 0.75, 0.7, 1);\n    Tb(FH, 7.4, 0.1, s * 2.3, 4.6, 0.2, s * 3.2, 0.7, 0.75, 1);\n    Tb(FJ, 8.2, 1.3, 0, 7.2, 1.3, s * 2.3, 0.7, 0.65, 1);\n    Tb(FJ, 7.2, 1.3, s * 2.3, 4.6, 1.2, s * 3.1, 0.65, 0.7, 1);\n    Tb(FJ, 8.3, 3.7, 0, 6.6, 3.5, s * 2.8, 1, 0.9, 0.9, 0.5);\n    Tb(FJ, 6.6, 3.5, s * 2.8, 2, 3.1, s * 4.7, 0.9, 0.85, 0.9, 0.5);\n    Tb(FJ, 2, 3.1, s * 4.7, 1.3, -2.2, s * 4.7, 0.85, 0.7, 0.9, 0.4);\n    Tb(FJ, 2.7, 0.8, s * 4.5, 3.5, -1.8, s * 4.3, 0.55, 0.35, 0.8);\n  }\n}\n\nfunction trunk(b) {\n  // Vertebrae, sacrum, tailbone, and the breastbone moving out on the breath.\n  for (let v = 0; v \u003c 24; v++) {\n    const o = v * 6, x = VT[o], y = VT[o + 1], a = VT[o + 2], k = v \u003c 7 ? 0 : v \u003c 19 ? 1 : 2;\n    E(FT, x, y, 0, a, VT[o + 3], VT[o + 4], VT[o + 5], 0, 0.55, 0.45, 0.7);\n    Tb(FT, x - a + 0.2, y, 0, x - a - (v === 6 ? 3.6 : [2.2, 3, 3.4][k]), y + [0.5, 1.6, 0.4][k], 0, 0.45, 0.3, k === 1 ? 0.4 : 0.7);\n  }\n  Tb(FT, -3.6, -4.8, 0, -6.6, 2.6, 0, 2.5, 1, 0.8, 0.5);\n  Tb(FT, -6.6, 2.6, 0, -5.2, 5.6, 0, 0.8, 0.45, 0.8);\n  const sb = 0.5 * b;\n  Tb(FT, 5 + sb, -31, 0, 6.6 + sb, -23.5, 0, 1.2, 0.9, 0.9, 0.5);\n  Tb(FT, 6.6 + sb, -23.5, 0, 7 + sb, -19.5, 0, 0.9, 0.45, 0.8);\n  E(FT, 5.2 + sb, -29.8, 0, 1.3, 1.9, 2.4, -0.2, 0, 0.7, 0.5, 0.6);\n  for (let s = -1; s \u003c= 1; s += 2) {\n    // Hip bone: faint wing, its lines, socket, obturator ring.\n    E(FT, -1.5, -6.5, s * 6, 5.4, 4.8, 2.6, -0.35, s * 0.55, 0.2, 0.5, 1);\n    for (let i = 3; i \u003c IL.length; i += 3)\n      if (IL[i] === IL[i] && IL[i - 3] === IL[i - 3]) Tb(FT, IL[i - 3], IL[i - 2], s * IL[i - 1], IL[i], IL[i + 1], s * IL[i + 2], 0.45, 0.45, 0.85);\n    E(FT, 0, 0, s * HZ, 3.2, 3.2, 3, 0, 0, 0.4, 0.6, 1);\n    E(FT, 1, 4.6, s * 3.8, 3.2, 2.2, 1.6, 0.3, s * 0.3, 0.4, 0.5, 1);\n    // Collarbone, shoulder blade, the spine of the blade and the coracoid.\n    Tb(FT, 4.6, -32.2, s * 1.6, 2.2, -33.3, s * 7.4, 0.85, 0.8, 0.9, 0.4);\n    Tb(FT, 2.2, -33.3, s * 7.4, -1, -34.6, s * 12, 0.8, 0.9, 0.9, 0.4);\n    E(FT, -5.6, -27.5, s * 8.3, 2, 6.2, 4.6, 0.1, s * 0.6, 0.2, 0.4, 1);\n    Tb(FT, -7.4, -30.6, s * 5.4, -1.4, -35, s * 11.6, 0.6, 0.75, 0.9);\n    Tb(FT, 0.4, -32.4, s * 10, 2.4, -31.6, s * 9, 0.5, 0.45, 0.8);\n    // The ribs swing up and out on the breath.\n    for (let i = 0; i \u003c 7; i++) {\n      const r = RIB[i], ya = -31.5 + 2.4 * i, xa = spx(ya) - 1.3, rx = r[0] * (1 + 0.06 * b), rz = r[1] * (1 + 0.04 * b), dr = r[2] - 1.3 * b;\n      let px = xa, py = ya, pz = s * 1.6;\n      for (let j = 1; j \u003c= 5; j++) {\n        const al = (r[4] * PI * j) / 5, ca = 1 - cos(al), x = xa + rx * ca, y = ya + (dr * ca) / 2 + r[3] * sin(al), z = s * (1.6 + rz * sin(al));\n        Tb(FT, px, py, pz, x, y, z, 0.3, 0.25, 0.9);\n        (px = x), (py = y), (pz = z);\n      }\n    }\n  }\n}\n\nfunction flesh(b) {\n  E(FH, 2.4, -6, 0, 8, 8.4, 6.8, -0.1, 0, 1);\n  Tb(FT, -1.6, -31, 0, -0.6, -41, 0, 4.6, 4.2, 1);\n  E(FT, -0.2 + 0.3 * b, -23.5, 0, 9.4 + 0.4 * b, 11.5, 12.6, 0.05, 0, 1);\n  E(FT, 1.4, -9.5, 0, 8.8, 8.6, 11.4, 0, 0, 1);\n  E(FT, -1.6, -0.8, 0, 8.8, 8, 12.4, 0, 0, 1);\n  // Air in the lungs and windpipe and in the gut; heart and liver a little denser.\n  for (let s = -1; s \u003c= 1; s += 2) E(FT, -0.3, -24.4 + 0.6 * b, s * 5.8, 5.6 + 0.3 * b, 8 + 0.5 * b, 5.4, 0.1, s * 0.15, -1);\n  Tb(FT, 2.4, -40.5, 0, 0.8, -28.6, 0, 1, 1, -1);\n  E(FT, 3.6, -19.4, -1.6, 4, 4.6, 4.2, 0.6, 0, 0.55);\n  E(FT, 1.4, -12.6, 3.2, 6, 4.2, 6.8, 0.3, 0, 0.3);\n  for (let i = 0; i \u003c 16; i += 4) E(FT, GAS[i], GAS[i + 1], GAS[i + 2], 1.8 * GAS[i + 3], 1.4 * GAS[i + 3], 1.8 * GAS[i + 3], 0, 0, -0.8);\n}\n\nfunction leg(i, s) {\n  const t1 = LA[i * 3], t2 = LA[i * 3 + 1], t3 = LA[i * 3 + 2], z = s * HZ, bone = TG === B;\n  const dx = sin(t1), dy = cos(t1), kx = LT * dx, ky = LT * dy, ex = sin(t2), ey = cos(t2), ax = kx + LS * ex, ay = ky + LS * ey, fx = cos(t3), fy = -sin(t3);\n  // Femur: head in its socket, neck, greater trochanter, shaft, condyles.\n  FR.set([0, 0, z, dx, dy, 0, dy, -dx, 0, 0, 0, s, -t1]);\n  if (!bone) Tb(FL, -1, 0, 0, LT, 0, 0, 6.4, 4.4, 1);\n  else {\n    E(FL, 0, 0, 0, 2.3, 2.3, 2.3, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 0, 0, 0, 2.6, 0, 2.6, 1.3, 1.4, 0.6);\n    E(FL, 1.6, -1.5, 3.2, 1.7, 2.1, 1.5, 0, 0, 0.6, 0.6, 0.6);\n    Tb(FL, 2.8, 0, 2.6, LT - 2.4, 0, 0.4, 1.75, 1.6, 1, 0.85);\n    E(FL, LT - 1.2, -0.3, 0, 2.5, 2.4, 3.4, 0, 0, 0.7, 0.6, 0.6);\n    // The kneecap rides over the joint, halfway between thigh and shank.\n    const h = (t1 + t2) / 2;\n    E(FB, kx + cos(h) * 3.2, ky - sin(h) * 3.2, z, 1, 1.8, 1.5, -h, 0, 0.85, 0.45, 0.5);\n  }\n  // Tibia and the thinner fibula behind it.\n  FR.set([kx, ky, z, ex, ey, 0, ey, -ex, 0, 0, 0, s, -t2]);\n  if (!bone) Tb(FL, 0, 0, 0, LS, 0, 0, 4.2, 2.4, 1), E(FL, 8, -1.6, 0, 3, 6.5, 3.2, 0, 0, 1);\n  else {\n    E(FL, 1.9, 0, 0, 2.8, 1.4, 3.3, 0, 0, 0.7, 0.5, 0.5);\n    Tb(FL, 3, 0.3, 0, LS - 1.8, 0, 0, 1.75, 1.2, 1, 0.85);\n    E(FL, LS - 1, 0, -0.4, 1.6, 1.7, 2.2, 0, 0, 0.75, 0.5, 0.4);\n    E(FL, 3.6, -1.9, 2, 1, 1, 1, 0, 0, 0.8);\n    Tb(FL, 4, -1.9, 2, LS - 0.8, -1, 2.4, 0.7, 0.6, 0.95, 0.3);\n    E(FL, LS + 0.3, -1, 2.6, 1, 1.5, 1, 0, 0, 0.8);\n  }\n  // Foot: talus, heel, arch, two metatarsals for five, and toes that stay flat\n  // on the belt as the heel lifts.\n  FR.set([ax, ay, z, fx, fy, 0, -fy, fx, 0, 0, 0, s, -t3]);\n  if (!bone) return Tb(FL, -3, 2.6, 0, 10, 3, 0, 2.3, 1.6, 1);\n  E(FL, 0.6, 1, 0, 2.2, 1.5, 1.6, 0, 0, 0.8, 0.5, 0.5);\n  E(FL, -2.4, 2.9, 0, 3.3, 1.8, 1.6, -0.3, 0, 0.8, 0.6, 0.55);\n  E(FL, 3.3, 1.7, 0, 1.5, 1.3, 1.8, 0, 0, 0.85);\n  E(FL, 2.6, 3.1, 0, 1.2, 1, 1.2, 0, 0, 0.8);\n  Tb(FL, 4.4, 1.9, 0, 9.2, 3.5, 0, 0.65, 0.6, 1, 0.3);\n  Tb(FL, 3.6, 3.4, 1, 8.4, 3.9, 1, 0.55, 0.5, 0.9);\n  FL(9.2, 3.5, 0);\n  const d = t3 \u003c 0 ? -t3 * (1 - sm(0.4, 3, FLOOR - OY - gy - 1.1)) : 0, c = cos(d), n = -sin(d);\n  Tb(FL, 9.2, 3.5, 0, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 0.5, 0.45, 0.95);\n  Tb(FL, 9.2 + c * 2.3, 3.5 + n * 2.3, 0, 9.2 + c * 4.2, 3.5 + n * 4.2, 0, 0.45, 0.4, 0.9);\n}\n\nfunction arm(s, sig, eps, k, wv) {\n  FT(-1, -33, s * SZ);\n  const sx = gx, sy = gy, sz = gz, au = sig + LAM, af = au + eps, V = AV;\n  // Axes of the upper arm and forearm, and the thumb side of the hand. In the\n  // wave the elbow goes out to the side and the forearm up, palm to you.\n  V.set([sin(au), cos(au), s * 0.1, sin(af), cos(af), s * 0.04, cos(af), -sin(af), 0]);\n  if (k > 0) {\n    const A = [0.2, 0.62, s * 0.76, 0.15, -cos(wv), s * (sin(wv) - 0.1), 0, 0, -s];\n    for (let j = 0; j \u003c 9; j++) V[j] = mix(V[j], A[j], k);\n  }\n  for (let j = 0; j \u003c 9; j += 3) {\n    const d = j === 6 ? V[6] * V[3] + V[7] * V[4] + V[8] * V[5] : 0;\n    for (let c = 0; c \u003c 3; c++) V[j + c] -= d * V[3 + c];\n    const l = hypot(V[j], V[j + 1], V[j + 2]) || 1;\n    for (let c = 0; c \u003c 3; c++) V[j + c] /= l;\n  }\n  const [ux, uy, uz, fx, fy, fz, px, py, pz] = V, ex = sx + LU * ux, ey = sy + LU * uy, ez = sz + LU * uz;\n  // The forearm's frame from the elbow, its third axis toward the palm.\n  FR.set([ex, ey, ez, fx, fy, fz, px, py, pz, s * (fy * pz - fz * py), s * (fz * px - fx * pz), s * (fx * py - fy * px), -af]);\n  if (TG === T) {\n    Tb(FB, sx, sy, sz, ex, ey, ez, 2.8, 2.2, 1);\n    Tb(FL, 0, 0, 0, LF, 0, 0, 2.2, 1.6, 1);\n    return Tb(FL, LF, 0, 0, LF + 7, 0, 0, 1.5, 1.1, 1);\n  }\n  // Humerus, ulna with the point of the elbow, radius, wrist, four fingers\n  // curled a little toward the palm, thumb.\n  E(FB, sx, sy, sz, 2.2, 2.2, 2.2, 0, 0, 0.8, 0.7, 0.5);\n  Tb(FB, sx + ux * 1.8, sy + uy * 1.8, sz + uz * 1.8, ex - ux * 1.3, ey - uy * 1.3, ez - uz * 1.3, 1.35, 1.15, 1, 0.85);\n  E(FB, ex - ux * 0.8, ey - uy * 0.8, ez - uz * 0.8, 1.3, 1.5, 2.5, -au, 0, 0.8, 0.5, 0.5);\n  E(FL, 0.3, -1, 0, 1, 1, 1, 0, 0, 0.9);\n  Tb(FL, 0.8, -0.5, 0, LF, -0.5, 0, 0.75, 0.55, 1, 0.5);\n  Tb(FL, 1.2, 0.5, 0, LF, 0.55, 0, 0.6, 0.95, 1, 0.5);\n  E(FL, LF + 1.4, 0, 0, 1.5, 1.3, 1.5, 0, 0, 0.9, 0.5, 0.4);\n  const c0 = mix(0.3, 0.06, k);\n  for (let j = 0; j \u003c 5; j++) {\n    const th = j > 3, o = th ? 2.2 : FO[j];\n    let x = LF + (th ? 3.2 : 5.8), y = o, z = 0, c = 0;\n    Tb(FL, LF + (th ? 1 : 2.2), th ? 0.9 : o / 2, 0, x, y, z, 0.5, 0.45, 0.95);\n    for (let m = 0; m \u003c (th ? 2 : 3); m++) {\n      c += c0;\n      const L = th ? 2 - 0.4 * m : FLN[j] * PHL[m], X = x + cos(c) * L, Y = y + (th ? 0.7 * L : 0), Z = z + sin(c) * L;\n      Tb(FL, x, y, z, X, Y, Z, 0.42, 0.36, 0.9);\n      (x = X), (y = Y), (z = Z);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const g = S.gait, a = S.amp, p = S.ph, u = S.jump, tt = S.turn, b = sin(2 * PI * S.br);\n  const wj = u \u003c 0 ? 0 : sm(0, 0.2, u) * (1 - sm(1.15, 1.5, u));\n  const tf = tt \u003c 0 ? 0 : sm(0.5, 1.4, tt) * (1 - sm(3.8, 4.7, tt));\n  const wave = tt \u003c 0 ? 0 : sm(1.4, 1.9, tt) * (1 - sm(3.3, 3.8, tt));\n  PSI = (PI / 2) * tf;\n  (CP = cos(PSI)), (SP = sin(PSI));\n  LAM = (mix(4, 11, g) * a + (wj ? key(JK[5], u) * wj : 0)) * D;\n  (LC = cos(LAM)), (LSN = sin(LAM));\n  // Legs half a stride apart, arms swinging against them; the lowest heel or\n  // ball stands on the belt.\n  let low = 0;\n  for (let i = 0; i \u003c 2; i++) {\n    const q = p + 0.5 * i, c = cos(2 * PI * q);\n    let th = ang(0, q, g) * a, kn = ang(1, q, g) * a + 3, an = ang(2, q, g) * a;\n    let sg = mix(-5 - 17 * c, -12 - 28 * c, g) * a, ep = mix(8, mix(14 + 8 * (1 - c), 80 + 9 * (1 - c), g), a);\n    if (wj) {\n      (th = mix(th, key(JK[0], u), wj)), (kn = mix(kn, key(JK[1], u), wj)), (an = mix(an, key(JK[2], u), wj));\n      (sg = mix(sg, key(JK[3], u), wj)), (ep = mix(ep, key(JK[4], u), wj));\n    }\n    const t1 = (LA[i * 3] = th * D), t2 = (LA[i * 3 + 1] = (th - kn) * D), t3 = (LA[i * 3 + 2] = (th - kn + an) * D);\n    const ay = LT * cos(t1) + LS * cos(t2);\n    low = max(low, ay + 4 * sin(t3) + 4.9 * cos(t3), ay - 9.2 * sin(t3) + 4.6 * cos(t3));\n    (AR[i * 2] = sg * D), (AR[i * 2 + 1] = ep * D);\n  }\n  // A run leaves the belt between steps; a jump leaves it higher.\n  const fl = g * g * a * 3.2 * max(0, (cos(4 * PI * (p - 0.45)) - 0.75) * 4) ** 1.5;\n  const v = (u - 0.46) / 0.44;\n  OY = FLOOR - low - fl - (v > 0 && v \u003c 1 ? 32 * v * (1 - v) : 0);\n  OX = mix(26.5 + 2.5 * g, 35, tf);\n  FT(-2.1, -41.4, 0);\n  (HX = gx), (HY = gy);\n  ETA = -LAM * 0.85 + 0.035 * sin(4 * PI * p) * a;\n  (HC = cos(ETA)), (HS = sin(ETA));\n  JA = 0.2 * wave * (0.6 + 0.4 * sin(tt * 9));\n  (JC = cos(JA)), (JS = sin(JA));\n  const wv = 0.3 * sin((tt - 1.9) * 2 * PI * 1.7) * sm(1.6, 2, tt);\n\n  B.fill(0);\n  T.fill(0);\n  TG = B;\n  treadmill(S.belt);\n  skull();\n  trunk(b);\n  for (let r = 0; r \u003c 2; r++) {\n    TG = r ? T : B;\n    leg(0, 1);\n    leg(1, -1);\n    arm(1, AR[0], AR[1], wave, wv);\n    arm(-1, AR[2], AR[3], 0, 0);\n  }\n  if (S.dose > 0.001) flesh(b);\n\n  // The screen turns bone and flesh to light. An afterglow fades behind what\n  // moves, and bright bone blooms a little.\n  const x3 = S.scr * 3, pi = min(2, floor(x3));\n  for (let j = 0; j \u003c 6; j++) PC[j] = mix(PAL[pi][j], PAL[pi + 1][j], x3 - pi);\n  const dec = exp(-S.dt / 0.07), gd = 0.62 * sqrt(S.dose), bg = S.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) GB[r + x] = 0.5 * G[r + x] + 0.25 * (G[r + (x ? x - 1 : x)] + G[r + (x \u003c W - 1 ? x + 1 : x)]);\n  for (let q = 0; q \u003c N; q++) {\n    const e = B[q] > 0 ? (1 - exp(-0.3 * B[q])) ** 1.35 : 0, t = T[q] > 0 ? gd * (1 - exp(-T[q] / 12)) : 0;\n    B[q] = e + t * (1 - e);\n    G[q] = max(B[q], GB[q] * dec);\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, r = y * W; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += B[r + cl(x + d, 0, W - 1)];\n      T[r + x] = a / 5;\n    }\n  const ch = (j, lv, w, ag) => min(255, 255 * (lv * (PC[j] + (1 - PC[j]) * w) + ag * PC[j + 3]));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += T[cl(y + d, 0, H - 1) * W + x];\n      const q = y * W + x, L = B[q], ag = (G[q] - L) * 0.3, lv = L + bg[q] + 0.045 * a, w = L * L * L * 0.75;\n      display.setPixel(x, y, ch(0, lv, w, ag), ch(1, lv, w, ag), ch(2, lv, w, ag));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Screen=0..1, Speed=0.2..3, Gait=0..1, Dose=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Screen","min":0,"max":1,"about":"The colour of the phosphor: blue-white at 0 with a green afterglow, then green, amber and violet at 1. The densest bone glows toward white in every colour."},{"name":"Speed","min":0.2,"max":3,"about":"The cadence: at 2 a stride of two steps takes 1.08 s walking and 0.71 s running; at 0.2 it is ten times slower."},{"name":"Gait","min":0,"max":1,"about":"A walk at 0, heel strike to toe-off, through a jog to a run at 1: the elbows bend to a right angle and both feet leave the belt between steps."},{"name":"Dose","min":0,"max":1,"about":"The exposure: bones alone at 0 and a faint haze of flesh at 0.06. Toward 1 the soft tissue fills in: the dark lungs and windpipe, the heart's shadow, gas in the gut, the outline of the body."}],"start":[0,2,0,0.06],"measures":{"motion":0.988,"detail":0.0374,"edges":0.3589,"complexity":1.506,"coverage":0.2562,"colour":0.1011,"drift":0.06},"knobResponse":[0.0534,0.0544,0.0908,0.0578]},{"slug":"flying-trapeze","title":"Flying Trapeze","family":"stage","round":24,"note":"밤의 서커스 천막 꼭대기를 올려다봐요. 빨강과 크림 줄무늬 천 아래에서 플라이어가 공중그네를 타고 나가 공중제비를 돌고, 무릎으로 매달린 캐처가 손을 잡아요. 팔로 스폿 셋이 연무 속에 빛줄기를 그으며 따라가고, 차례가 끝나면 그물로 떨어져 튀어 올라요. K1 을 누르면 북이 울리고 세 바퀴 공중제비가 나와요.","idea":"Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.","buttons":"K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.","code":"// ===== Patternflow pattern =====\n// Title:   Flying Trapeze\n// Family:  stage\n// Idea:    Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the flying trapeze act Jules Léotard first flew at the Cirque Napoléon in 1859\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1\n//\n// Knob 1: Lights. The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them.\n// Knob 2: Speed. How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Turns. The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer.\n// Knob 4: Haze. How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels.\n// Buttons: K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, ceil, round, atan2, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (s) => s - sin(TAU * s) * (0.8 / TAU);\nconst rnd = () => Math.random();\n// A swing of the fly bar out and back, in seconds at Speed 2.\nconst PB = 2.4;\nconst OM = TAU / PB;\n// The fly bar's crane and rope; the catcher's cradle, rope and swing.\nconst [PFX, PFY, LF] = [24, 30, 34];\nconst [PCX, PCY, LC, B] = [57, 30, 20, 0.18];\n// The board's top, where the next flyer waits on it, and the rope ladder.\nconst [BY, WX, LX] = [68, 1.2, 2.6];\n// Hips above feet, hands above hips, gravity, and the time of the flight back to the bar.\nconst [LEG, HL, G, TR] = [3.8, 5.7, 90, 0.45];\n// Follow spots below the panel behind the crowd, and how fast their cones open.\nconst SPOT = [[-14, 166], [78, 166], [32, 186]];\nconst TA = 0.046;\n// Gels by the Lights knob: house wash (0..1), three spots, two flyers and the catcher.\nconst PAL = [\n  [[1, 0.8, 0.52], [255, 226, 170], [255, 244, 222], [255, 206, 120], [255, 182, 36], [205, 222, 255], [70, 120, 255]],\n  [[1, 0.64, 0.5], [255, 182, 120], [255, 150, 150], [255, 208, 150], [255, 96, 112], [255, 206, 60], [250, 240, 230]],\n  [[0.82, 0.52, 0.86], [255, 122, 196], [186, 142, 255], [255, 166, 214], [255, 62, 196], [160, 104, 255], [110, 236, 214]],\n  [[0.46, 0.44, 1], [255, 76, 170], [66, 128, 255], [172, 96, 255], [255, 44, 156], [36, 150, 255], [245, 245, 255]],\n];\nconst [SKIN, STEEL, ROPE, BAR] = [[255, 196, 156], [170, 176, 190], [150, 138, 116], [215, 215, 225]];\nconst ONNET = { drop: 1, net: 1, up: 1, tada: 1 };\n\nconst mkF = (c) => ({ m: 'wait', x: WX, y: BY - LEG, ph: 0, fs: 1, a1: 2.9, a2: 2.9, l1: 0, l2: 0, k1: 0, k2: 0, hx: null, T: 0, sx: 0, sy: 0, c });\n// Thighs, knees and arms of a figure, both sides.\nconst lim = (f, l1, l2, k1, k2, a1, a2) => Object.assign(f, { l1, l2, k1, k2, a1, a2 });\nconst rest = (f) => ((f.hx = null), lim(f, 0, 0, 0, 0, 2.9, 2.9));\nconst barAt = (th) => [PFX + LF * sin(th), PFY + LF * cos(th)];\nconst netY = (x) => 98.5 + 1.6 * sin((PI * cl(x, 0, 63)) / 63);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = {\n    t: 0, started: false, F: F32(N * 3), LT: F32(N * 3), CA: F32(N * 3), CI: F32(N), AUD: F32(N), ROW: new Int8Array(N).fill(-1), POOL: F32(H),\n    bar: 'free', A: 0.55, phc: 0, fl: [mkF(4), mkF(5)], star: 0,\n    sp: SPOT.map(([sx, sy]) => ({ sx, sy, ax: 30, ay: 50, ux: 0, uy: -1, D: 110 })),\n    drum: 0, drumB: 0, pop: 0, wash: 1, trip: false, nextFin: true, turns: 1, net: { s: 0, v: 0, x: 32 }, fx: [], phones: [], P: PAL[0].map((c) => c.slice()), hz: 0.3,\n  };\n  // The canvas: red and cream panels running down from the peak, each billowing between its seams.\n  for (let y = 0; y \u003c H; y++) {\n    S.POOL[y] = exp(-(((y - 17) / 15) ** 2));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, dx = x - 32, dy = y - 5, a = atan2(dx, dy);\n      const red = 0.5 + 0.5 * cl(sin(a * 7) * 4, -1, 1);\n      const k = (0.84 - 0.16 * cos(a * 14)) * sm(2.5, 6, sqrt(dx * dx + dy * dy));\n      S.CA[i * 3] = mix(0.95, 0.88, red) * k;\n      S.CA[i * 3 + 1] = mix(0.86, 0.12, red) * k;\n      S.CA[i * 3 + 2] = mix(0.68, 0.12, red) * k;\n      S.CI[i] = (0.3 + 0.7 * exp(-((dx * dx) / 900 + (dy * dy) / 300))) * sm(40, 20, y);\n    }\n  }\n  // The crowd: rows of heads and shoulders, bigger towards the front, each row a solid band below.\n  [[108.5, 1.9, 4.6], [114, 2.3, 5.4], [120.5, 2.8, 6.4], [127.5, 3.4, 7.6]].forEach(([base, r, gap], k) => {\n    for (let cx = -2 + rnd() * gap; cx \u003c W + 3; cx += gap * (0.8 + 0.4 * rnd())) {\n      const hy = base - r * 1.15 + (rnd() - 0.5) * 1.2, hx = cx + rnd() - 0.5;\n      for (let y = max(0, floor(hy - r - 1)); y \u003c H; y++)\n        for (let x = max(0, floor(hx - r * 2.4)); x \u003c= min(W - 1, ceil(hx + r * 2.4)); x++) {\n          const hd = r + 0.5 - sqrt((x - hx) ** 2 + (y - hy) ** 2);\n          const sh = 1 - sqrt(((x - hx) / (r * 2.2)) ** 2 + ((y - base) / (r * 0.9)) ** 2);\n          const c = y >= base ? 1 : cl(max(hd, sh * r * 2), 0, 1), i = y * W + x;\n          if (c > S.AUD[i]) S.AUD[i] = c;\n          if (c > 0.5) S.ROW[i] = k;\n        }\n      if (rnd() \u003c 0.09) S.phones.push([round(hx + 1), round(hy - r - 1)]);\n    }\n  });\n  params.s = S;\n}\n\n// The catcher at swing angle psi: knees over the bar, body hanging, arms reaching for the flyer.\nfunction cpose(psi) {\n  const ps = psi * 1.2, bx = PCX + LC * sin(psi), by = PCY + LC * cos(psi), sx = sin(ps), sy = cos(ps);\n  const hx = bx + 1.9 * sx, hy = by + 1.9 * sy;\n  const ax = sx * cos(0.2) - sy * sin(0.2), ay = sy * cos(0.2) + sx * sin(0.2);\n  return { bx, by, x: hx, y: hy, ph: PI - ps, fs: 1, l1: 0, l2: 0, k1: 1.5, k2: 1.3, hx: hx + 3 * sx + 2.7 * ax, hy: hy + 3 * sy + 2.7 * ay };\n}\n\nfunction newRound(S, go, who) {\n  const trip = S.trip, turns = trip ? 3 : S.turns, fin = trip || S.nextFin, tf = 0.75 + 0.25 * turns, tr = go + 1.5 * PB;\n  S.trip = false;\n  S.nextFin = !fin;\n  S.rd = { turns, fin, tf, h: 8 + 3 * turns, tg: go, tr, tc: tr + tf, rel: false, A0: S.A, A: 0.55 + 0.03 * (turns - 1), t0: S.t, over: false };\n  S.star = who;\n  // The catcher times his swing to be out at the front of it when she arrives.\n  const dt = max(0.3, S.rd.tc - S.t);\n  let k = round((S.phc + OM * dt) / TAU);\n  if ((TAU * k - S.phc) / dt \u003c 0.6 * OM) k++;\n  S.ct = { ph: TAU * k, t: S.rd.tc, ev: 0 };\n}\n\nconst burst = (S, n) => {\n  for (let i = 0; i \u003c n; i++) S.fx.push({ x: 2 + rnd() * 60, y: 106 + rnd() * 20, a: 1, w: rnd() * 0.25 });\n};\n\nfunction catcherEvent(S, ev) {\n  const rd = S.rd, f = S.fl[S.star];\n  f.T = 0;\n  f.ph0 = f.ph;\n  if (ev === 0) {\n    // The catch: the house comes up and the crowd's cameras go off.\n    if (f.m === 'fly') f.m = 'caught';\n    burst(S, 7, (S.pop = 1));\n    S.ct = rd.fin ? { ph: S.phc + 1.5 * PI, t: S.t + 2.4, ev: 2 } : { ph: S.phc + TAU, t: rd.tg + 3.5 * PB - TR, ev: 1 };\n  } else if (ev === 1) [f.m, f.sx, f.sy] = ['ret', f.x, f.y];\n  else {\n    // He lets her go on the swing back, and she falls turning over into the net.\n    [f.m, f.vx, f.vy] = ['drop', f.vx0, f.vy0];\n    const dy = netY(f.x + f.vx * 0.9) - 1 - f.y;\n    f.TF = (-f.vy + sqrt(f.vy * f.vy + 2 * G * max(1, dy))) / G;\n    rd.over = true;\n  }\n}\n\nfunction stepFlyer(S, f, d, i) {\n  const rd = S.rd, t = S.t, th = S.th, [hbx, hby] = barAt(-S.A), [bx, by] = barAt(th), nt = S.net;\n  f.T += d;\n  switch (f.m) {\n    case 'wait':\n    case 'hold': {\n      // Standing on the board; the one whose turn it is steps up and takes the bar.\n      const h = f.m === 'hold', gx = h ? hbx - 1 : WX;\n      rest(f);\n      f.x += cl(gx - f.x, -7 * d, 7 * d);\n      [f.fs, f.y, f.ph] = [1, BY - LEG, h ? 0.12 * sm(3, 0.5, abs(gx - f.x)) : 0.04 * sin(t * 1.3 + i)];\n      if (!h) break;\n      if (abs(gx - f.x) \u003c 1.5) [f.hx, f.hy] = [hbx, hby];\n      if (t >= rd.tg) [S.bar, f.m, f.T, f.sx, f.sy] = ['free', 'swing', 0, f.x, f.y];\n      break;\n    }\n    case 'swing':\n    case 'ride': {\n      f.fs = f.m === 'ride' ? -1 : 1;\n      const k = f.m === 'swing' ? sm(0, 0.3, f.T) : 1, u = (f.fs * th) / S.A;\n      [f.x, f.y, f.ph] = [mix(f.sx, bx + HL * sin(th), k), mix(f.sy, by + HL * cos(th), k), -th * k];\n      // Legs lead at the front of each swing and trail at the back.\n      const l = (0.95 * max(0, u) + 0.35 * min(0, u)) * k;\n      lim(f, l, l, 0.25 * max(0, -u) * k, 0.25 * max(0, -u) * k, f.a1, f.a2);\n      [f.hx, f.hy] = [bx, by];\n      if (f.m === 'swing' && !rd.rel && t >= rd.tr) {\n        // Let go at the top of the swing, aimed at where the catcher's hands will be.\n        const c = cpose(-B);\n        rd.rel = true;\n        Object.assign(f, { m: 'fly', Rx: f.x, Ry: f.y, Cx: c.hx + HL * sin(-0.8 * B), Cy: c.hy + HL * cos(-0.8 * B), phR: f.ph, pkR: f.l1, hx: null });\n      }\n      if (f.m === 'ride' && t >= rd.tg + 4 * PB) {\n        // Home on the board. The flyer who was waiting takes the bar next.\n        S.bar = 'hook';\n        rd.over = true;\n        [f.m, f.T, f.sx, f.sy] = ['land', 0, f.x, f.y];\n        const o = S.fl[1 - i];\n        if (o.m === 'wait') o.m = 'hold';\n        f.next = o.m === 'hold' ? 'wait' : 'hold';\n        newRound(S, t + 1.1, o.m === 'hold' ? 1 - i : i);\n      }\n      break;\n    }\n    case 'fly': {\n      const s = cl((t - rd.tr) / rd.tf, 0, 1), u = sm(0.04, 0.22, s) * (1 - sm(0.7, 0.9, s));\n      [f.x, f.y, f.ph] = [mix(f.Rx, f.Cx, s), mix(f.Ry, f.Cy, s) - 4 * rd.h * s * (1 - s), mix(f.phR, 0.8 * B - TAU * rd.turns, ease(s))];\n      const l = max(f.pkR * (1 - sm(0, 0.12, s)), 2.2 * u);\n      lim(f, l, l, 2.4 * u, 2.4 * u, 2 * u, 2 * u);\n      break;\n    }\n    case 'caught': {\n      const c = S.cp, tp = S.psi * 0.8;\n      [f.x, f.y, f.ph, f.fs, f.hx, f.hy] = [c.hx + HL * sin(tp), c.hy + HL * cos(tp), -tp, 1, c.hx, c.hy];\n      lim(f, 0.4 * sin(S.phc + 0.6), 0.4 * sin(S.phc + 0.6), 0, 0, 0, 0);\n      break;\n    }\n    case 'ret': {\n      // A half turn in the air and back to the fly bar, which comes out to meet her.\n      const s = cl(f.T / TR, 0, 1), [ex, ey] = barAt(rd.A);\n      [f.x, f.y, f.ph, f.fs] = [mix(f.sx, ex + HL * sin(rd.A), s), mix(f.sy, ey + HL * cos(rd.A), s) - 18 * s * (1 - s), mix(f.ph0, -rd.A, s), s \u003c 0.5 ? 1 : -1];\n      const a = sin(PI * s);\n      f.hx = null;\n      lim(f, 0.3 * a, 0.3 * a, 0, 0, 1.3 * a, -1.3 * a);\n      if (s >= 1) f.m = 'ride';\n      break;\n    }\n    case 'land': {\n      const k = sm(0, 0.35, f.T);\n      rest(f);\n      [f.x, f.y, f.ph, f.hx, f.hy] = [mix(f.sx, hbx - 1, k), mix(f.sy, BY - LEG, k), mix(f.ph, 0, k), hbx, hby];\n      if (f.T > 0.4) f.m = f.next;\n      break;\n    }\n    case 'drop': {\n      f.vy += G * d;\n      [f.x, f.y] = [f.x + f.vx * d, f.y + f.vy * d];\n      const s = cl(f.T / f.TF, 0, 1), u = sm(0.1, 0.3, s) * (1 - sm(0.62, 0.85, s));\n      f.ph = mix(f.ph0, -PI / 2 - TAU, ease(s));\n      lim(f, 2.2 * u, 2.2 * u, 2.4 * u, 2.4 * u, 0.6 + 1.4 * u, 0.6 + 1.4 * u).hx = null;\n      if (f.y >= netY(f.x) - 1) {\n        [f.m, f.T, nt.x] = ['net', 0, f.x];\n        S.pop = max(S.pop, 0.8);\n        burst(S, 6);\n      }\n      break;\n    }\n    case 'net': {\n      // Bouncing on her back: a stiff spring while she is in the net, a fall while she is out.\n      const n = max(1, ceil(d / 0.006)), h = d / n;\n      for (let j = 0; j \u003c n; j++) {\n        const pen = f.y - (netY(f.x) - 1);\n        f.vy += (G - (pen > 0 ? 420 * pen + 7 * f.vy : 0)) * h;\n        [f.y, f.x, f.vx] = [f.y + f.vy * h, f.x + f.vx * h, f.vx * (1 - 2.5 * h)];\n        if (pen > 0) [nt.s, nt.v] = [pen, f.vy];\n        else (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s += nt.v * h);\n      }\n      [nt.x, nt.hold, f.ph] = [f.x, true, -PI / 2];\n      lim(f, 0.6, 0.6, 0.4, 0.4, 1.6 + 0.5 * sin(f.T * 9), 1.6 - 0.5 * sin(f.T * 9));\n      if (f.T > 2.6) [f.m, f.T, f.sy] = ['up', 0, f.y];\n      break;\n    }\n    case 'up':\n    case 'tada':\n    case 'walk': {\n      nt.s += (1.5 - nt.s) * min(1, d * 8);\n      [nt.v, nt.x, nt.hold] = [0, f.x, true];\n      const top = netY(f.x) + nt.s - LEG - 0.6;\n      if (f.m === 'up') {\n        const k = sm(0, 0.5, f.T);\n        rest(f);\n        [f.ph, f.y] = [mix(-PI / 2, 0, k), mix(f.sy, top, k)];\n        if (f.T > 0.55) [f.m, f.T] = ['tada', 0];\n      } else if (f.m === 'tada') {\n        // Arms up for the crowd.\n        [f.ph, f.y] = [0, top];\n        lim(f, 0, 0, 0, 0, 0.55, -0.55);\n        if (f.T > 0.8) [f.m, f.T] = ['walk', 0];\n      } else {\n        // Bouncing along the net to the ladder.\n        const w = sin(f.T * 8);\n        [f.fs, f.x, f.y, f.ph] = [-1, f.x - 13 * d, top - 1.1 * abs(w), 0];\n        lim(f, 0.5 * w, -0.5 * w, 0, 0, PI - 0.5 * w, PI + 0.5 * w);\n        if (f.x \u003c= LX) [f.m, f.T] = ['climb', 0];\n      }\n      break;\n    }\n    case 'climb': {\n      // Up the rope ladder to the board.\n      const w = sin(f.T * 9);\n      [f.x, f.y, f.fs, f.ph, f.hx] = [LX, f.y - 12 * d, -1, 0, null];\n      const p = max(0, w), q = max(0, -w);\n      lim(f, 0.9 * p, 0.9 * q, 1.5 * p, 1.5 * q, 0.35 + 0.45 * w, 0.35 - 0.45 * w);\n      if (f.y \u003c= BY - LEG) [f.y, f.m] = [BY - LEG, 'wait'];\n      break;\n    }\n  }\n  if (d > 0) [f.vx0, f.vy0] = [(f.x - f.px) / d, (f.y - f.py) / d];\n  [f.px, f.py] = [f.x, f.y];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], rdt = cl(dt || 0, 0, 0.1), d = rdt * (cl(kv[1], 0.2, 3) / 2);\n  const u = cl(kv[0], 0, 1) * 3, pi = min(2, floor(u));\n  for (let j = 0; j \u003c 7; j++) for (let c = 0; c \u003c 3; c++) S.P[j][c] = mix(PAL[pi][j][c], PAL[pi + 1][j][c], u - pi);\n  [S.turns, S.hz] = [cl(round(kv[2]), 1, 3), 0.26 + 0.74 * cl(kv[3], 0, 1)];\n  if (!S.started) {\n    // Open mid-act: the first flyer is already out on her first swing.\n    [S.started, S.fl[0].m, S.fl[0].T] = [true, 'swing', 1];\n    newRound(S, -0.9, 0);\n    [S.A, S.phc] = [S.rd.A, S.ct.ph - OM * S.rd.tc];\n  }\n  const tp = S.t, t = (S.t += d), rd = S.rd;\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drum roll: this trick becomes the triple if she has not let go yet, else the next one.\n    S.drumB = 1;\n    if (!rd.rel && !rd.over) {\n      Object.assign(rd, { turns: 3, fin: true, tf: 1.5, h: 17, tc: rd.tr + 1.5 });\n      S.nextFin = false;\n      if (S.ct && S.ct.ev === 0) S.ct.t = rd.tc;\n    } else S.trip = true;\n  }\n  S.A = S.bar === 'hook' && !rd.over ? mix(rd.A0, rd.A, sm(rd.t0, rd.tg, t)) : rd.A;\n  S.th = S.bar === 'hook' ? -S.A : -S.A * cos(OM * (t - rd.tg));\n  // The catcher, phase-locked to the next thing he has to be on time for.\n  const ct = S.ct, rem = ct ? ct.t - tp : 0;\n  S.phc = ct ? (rem \u003c= d ? ct.ph : S.phc + ((ct.ph - S.phc) * d) / rem) : S.phc + OM * d;\n  S.cp = cpose((S.psi = -B * cos(S.phc)));\n  if (ct && rem \u003c= d) (S.ct = null), catcherEvent(S, ct.ev);\n  const nt = S.net, h = min(d, 0.02);\n  nt.hold = false;\n  S.fl.forEach((f, i) => stepFlyer(S, f, d, i));\n  // An empty net rings and settles.\n  if (!nt.hold) (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s = (nt.s + nt.v * h) * exp(-d * 3));\n  // After a drop the bar swings empty until it comes back to the board and the next flyer hooks it.\n  const R = S.rd;\n  const w = S.fl.findIndex((f) => f.m === 'wait');\n  if (R.over && S.bar === 'free' && w >= 0 && floor((t - R.tg) / PB) > floor((tp - R.tg) / PB)) [S.bar, S.fl[w].m] = ['hook', 'hold'], newRound(S, t + 0.7, w);\n  // Light cues: the house dims for the drum roll, more for a bigger trick, and comes up on the catch.\n  const r = S.rd, star = S.fl[S.star];\n  const roll = (!r.rel && t > r.tg + 0.5 * PB) || star.m === 'fly' || S.drumB > 0 ? 1 : 0;\n  S.drum += (roll - S.drum) * (1 - exp(-d * 4));\n  S.drumB = max(0, S.drumB - rdt * 0.4);\n  S.pop *= exp(-d * 0.9);\n  S.wash = (1 - S.drum * (0.3 + 0.22 * (r.turns - 1))) * (1 + 0.8 * S.pop);\n  // The follow spots: two on the flyer, the third on the catcher unless the trick is big.\n  const fin = S.fl.find((f) => ONNET[f.m]);\n  const tg = [fin || star, fin && t \u003c r.tg + 0.4 ? fin : star, S.drum > 0.5 && r.turns >= 2 ? star : { x: S.cp.x, y: S.cp.y + 3 }];\n  const k = 1 - exp(-d * 8);\n  S.sp.forEach((s, j) => {\n    const vx = (s.ax += (tg[j].x - s.ax) * k) - s.sx, vy = (s.ay += (tg[j].y - 1 - s.ay) * k) - s.sy, D = (s.D = sqrt(vx * vx + vy * vy));\n    [s.ux, s.uy] = [vx / D, vy / D];\n  });\n  // Camera flashes in the crowd.\n  if (rnd() \u003c rdt * 0.9) burst(S, 1);\n  for (const e of S.fx) e.a -= rdt * 9;\n  S.fx = S.fx.filter((e) => e.a > 0);\n}\n\n// A stroke lit by the light field, with optional sequin sparkle.\nfunction seg(S, ax, ay, bx, by, r, c, sp) {\n  const { F, LT } = S, dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6;\n  const x1 = min(W - 1, ceil(max(ax, bx) + r + 1)), y1 = min(H - 1, ceil(max(ay, by) + r + 1));\n  for (let y = max(0, floor(min(ay, by) - r - 1)); y \u003c= y1; y++)\n    for (let x = max(0, floor(min(ax, bx) - r - 1)); x \u003c= x1; x++) {\n      const t = cl(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1), ex = x - ax - dx * t, ey = y - ay - dy * t;\n      const a = cl(r + 0.5 - sqrt(ex * ex + ey * ey), 0, 1);\n      if (a \u003c= 0) continue;\n      const q = (y * W + x) * 3, s = sp ? 0.72 + 0.56 * rnd() : 1;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += (c[j] * LT[q + j] * s - F[q + j]) * a;\n    }\n}\n\nfunction glow(F, x, y, r, c, k) {\n  for (let yy = max(0, floor(y - r)); yy \u003c= min(H - 1, ceil(y + r)); yy++)\n    for (let xx = max(0, floor(x - r)); xx \u003c= min(W - 1, ceil(x + r)); xx++) {\n      const g = k * exp(-((xx - x) ** 2 + (yy - y) ** 2) / (0.25 * r * r)), q = (yy * W + xx) * 3;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += c[j] * g;\n    }\n}\n\n// A stick figure: hips at (x, y), body angle ph (0 is head up), facing fs.\nfunction fig(S, f, col) {\n  const bx = sin(f.ph), by = -cos(f.ph), nx = cos(f.ph) * f.fs, ny = sin(f.ph) * f.fs;\n  const dv = (a, l) => [(bx * cos(a) + nx * sin(a)) * l, (by * cos(a) + ny * sin(a)) * l];\n  const shx = f.x + bx * 3, shy = f.y + by * 3;\n  for (const [l, k] of [[f.l1, f.k1], [f.l2, f.k2]]) {\n    const [kx, ky] = dv(PI - l, 1.9), [fx, fy] = dv(PI - l + k, 1.9);\n    seg(S, f.x, f.y, f.x + kx, f.y + ky, 0.6, col, 1);\n    seg(S, f.x + kx, f.y + ky, f.x + kx + fx, f.y + ky + fy, 0.5, col, 1);\n  }\n  seg(S, f.x, f.y, shx, shy, 0.8, col, 1);\n  for (const a of [f.a1, f.a2]) {\n    const [ax, ay] = dv(a, 2.7);\n    seg(S, shx, shy, f.hx === null ? shx + ax : f.hx, f.hx === null ? shy + ay : f.hy, 0.42, SKIN, 0);\n  }\n  seg(S, shx + bx * 1.45, shy + by * 1.45, shx + bx * 1.55, shy + by * 1.55, 0.75, SKIN, 0);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { F, LT, CA, CI, AUD, ROW, POOL, P, wash, hz } = S, wc = P[0];\n  const hzA = hz * (0.7 - 0.22 * hz), halo = hz * hz * 0.18, hl = log(max(1, halo * 400));\n  const am = wc.map((v) => v * (0.12 + 0.12 * wash)), kc = 0.48 * 255 * wash, air = 9 * hz * wash;\n  const sp = S.sp.map((s, j) => [s.sx, s.sy, s.ux, s.uy, s.D, ...P[1 + j].map((v) => v / 255)]);\n  for (let y = 0; y \u003c H; y++) {\n    // The ring below the net glows in the house light behind the crowd.\n    const pb = POOL[y], ring = 50 * sm(117, 104, y) * sm(100, 104, y) * wash + air;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3, ci = CI[i] * kc;\n      let r = 4 + wc[0] * ring + CA[q] * wc[0] * ci, g = 4 + wc[1] * ring + CA[q + 1] * wc[1] * ci, b = 9 + wc[2] * ring + CA[q + 2] * wc[2] * ci;\n      let lr = 0, lg = 0, lb = 0;\n      const cv = CI[i] > 0.02 ? 0.9 * pb * sm(0, 0.3, CI[i]) * 255 : 0;\n      for (const s of sp) {\n        const vx = x - s[0], vy = y - s[1], al = vx * s[2] + vy * s[3], pp = abs(vx * s[3] - vy * s[2]), R = 0.8 + al * TA;\n        if (pp \u003c R) {\n          // Lit air along the beam, and past the flyer a pool where it lands on the canvas.\n          const p = sm(R, R * 0.45, pp), k = ((p * (al > s[4] ? 0.8 : 1) * 1.3) / (1 + (al / 110) ** 2)) * hzA * 255, c = cv > 0 && al > s[4] ? cv * p : 0;\n          (lr += s[5] * p), (lg += s[6] * p), (lb += s[7] * p);\n          (r += s[5] * (k + CA[q] * c)), (g += s[6] * (k + CA[q + 1] * c)), (b += s[7] * (k + CA[q + 2] * c));\n        }\n        // Haze scatters a wide glow round each beam.\n        if (pp \u003c (R + 9) * hl) {\n          const h = halo * exp(-pp / (R + 9)) * 255;\n          (r += s[5] * h), (g += s[6] * h), (b += s[7] * h);\n        }\n      }\n      (F[q] = r), (F[q + 1] = g), (F[q + 2] = b);\n      (LT[q] = min(1.25, lr * 1.2 + am[0])), (LT[q + 1] = min(1.25, lg * 1.2 + am[1])), (LT[q + 2] = min(1.25, lb * 1.2 + am[2]));\n    }\n  }\n  const t = S.t;\n  // The king pole, the ring of bulbs round the peak, which chase in a drum roll, and the bale ring.\n  seg(S, 32, 7, 32, 29, 0.7, STEEL, 0);\n  for (let j = 0; j \u003c 22; j++) {\n    const a = (TAU * j) / 22, x = 32 + 20 * sin(a), y = 6.5 + 5 * cos(a), ch = (((j / 22 - t * 0.9) % 1) + 1) % 1 \u003c 0.22 ? 1 : 0;\n    const v = (mix(0.75 + 0.15 * sin(t * 3 + j * 2.1), 0.3 + 0.9 * ch, S.drum) + 0.5 * S.pop) * (0.85 + 0.15 * cos(a));\n    glow(F, x, y, 3.2, [255, 196, 110], 0.42 * v);\n    const q = (round(y) * W + round(x)) * 3;\n    for (let k = 0; k \u003c 3; k++) F[q + k] += [200, 160, 90][k] * v;\n  }\n  seg(S, 30, 5, 34, 5, 1.1, [60, 62, 70], 0);\n  // The rig: a truss under the peak, guy lines, the uprights, the board and the ladder.\n  seg(S, 3, PFY - 2, 61, PFY - 2, 0.4, STEEL, 0);\n  seg(S, 3, PFY, 61, PFY, 0.35, STEEL, 0);\n  for (let x = 5; x \u003c 61; x += 4) seg(S, x, PFY - 2, x + 2, PFY, 0.25, STEEL, 0);\n  seg(S, 4, PFY - 2, 24, 7, 0.25, ROPE, 0);\n  seg(S, 60, PFY - 2, 40, 7, 0.25, ROPE, 0);\n  seg(S, 62, PFY - 2, 62, 103, 0.35, ROPE, 0);\n  seg(S, 0, PFY - 2, 0, BY, 0.35, ROPE, 0);\n  seg(S, 0, BY + 0.6, barAt(-S.rd.A)[0] + 0.4, BY + 0.6, 0.55, [190, 160, 120], 0);\n  seg(S, 1, BY + 1, 1, 97, 0.3, ROPE, 0);\n  seg(S, 4.2, BY + 1, 4.2, 97, 0.3, ROPE, 0);\n  for (let y = BY + 3; y \u003c 97; y += 3) seg(S, 1, y, 4.2, y, 0.25, ROPE, 0);\n  // The safety net, a sagging diamond mesh, dented where a flyer is in it.\n  const nt = S.net;\n  for (let x = 0; x \u003c W; x++) {\n    const dn = nt.s * exp(-(((x - nt.x) / 8) ** 2)), far = 94.5 + 1.2 * sin((PI * x) / 63) + 0.6 * dn, near = 103 + 2 * sin((PI * x) / 63) + dn;\n    for (let y = max(0, floor(far - 1)); y \u003c= min(H - 1, ceil(near + 1)); y++) {\n      const v = (y - far) / (near - far), fa = x * 0.34 + v * 3, fb = x * 0.34 - v * 3;\n      let ln = v > -0.06 && v \u003c 1.06 ? max(sm(0.3, 0.48, abs((fa % 1) - 0.5)), sm(0.3, 0.48, abs((((fb % 1) + 1) % 1) - 0.5))) : 0;\n      ln = max(ln, sm(0.9, 0.2, abs(y - far)), sm(0.9, 0.2, abs(y - near))) * 0.8;\n      const q = (y * W + x) * 3;\n      if (ln > 0) for (let j = 0; j \u003c 3; j++) F[q + j] += ([205, 196, 176][j] * LT[q + j] - F[q + j]) * ln;\n    }\n  }\n  // The fly bar on its ropes, the catcher's cradle, the catcher and the flyers.\n  const [bx, by] = barAt(S.th), c = S.cp;\n  for (const [px, py, x, y] of [[PFX, PFY, bx, by], [PCX, PCY, c.bx, c.by]]) {\n    seg(S, px - 1.2, py, x - 1.2, y, 0.28, ROPE, 0);\n    seg(S, px + 1.2, py, x + 1.2, y, 0.28, ROPE, 0);\n    seg(S, x - 1.8, y, x + 1.8, y, 0.45, BAR, 0);\n  }\n  fig(S, c, P[6]);\n  for (const f of S.fl) fig(S, f, P[f.c]);\n  // The crowd in front of it all, a dark sea, each head rimmed by the light behind it.\n  for (let i = W; i \u003c N; i++) {\n    const a = AUD[i];\n    if (a \u003c= 0) continue;\n    const q = i * 3, k = ROW[i], rim = k > ROW[i - W] ? (1 - 0.2 * k) * a : 0;\n    for (let j = 0; j \u003c 3; j++) F[q + j] += ((12 - 2.5 * k) * wc[j] - F[q + j]) * a + rim * (16 * wash * wc[j] + 60 * max(0, LT[q + j] - 0.3));\n  }\n  // Phones held up to film, and camera flashes.\n  for (const [x, y] of S.phones) if (x >= 0 && x \u003c W - 1) for (let j = 0; j \u003c 6; j++) F[(y * W + x) * 3 + j] += [70, 92, 130][j % 3];\n  for (const e of S.fx) glow(F, e.x, e.y, 2.2, [255, 250, 240], e.a * e.a * (1 - e.w));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-flying-trapeze","type":"code","name":"flying-trapeze","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flying Trapeze\n// Family:  stage\n// Idea:    Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the flying trapeze act Jules Léotard first flew at the Cirque Napoléon in 1859\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1\n//\n// Knob 1: Lights. The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them.\n// Knob 2: Speed. How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Turns. The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer.\n// Knob 4: Haze. How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels.\n// Buttons: K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, ceil, round, atan2, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (s) => s - sin(TAU * s) * (0.8 / TAU);\nconst rnd = () => Math.random();\n// A swing of the fly bar out and back, in seconds at Speed 2.\nconst PB = 2.4;\nconst OM = TAU / PB;\n// The fly bar's crane and rope; the catcher's cradle, rope and swing.\nconst [PFX, PFY, LF] = [24, 30, 34];\nconst [PCX, PCY, LC, B] = [57, 30, 20, 0.18];\n// The board's top, where the next flyer waits on it, and the rope ladder.\nconst [BY, WX, LX] = [68, 1.2, 2.6];\n// Hips above feet, hands above hips, gravity, and the time of the flight back to the bar.\nconst [LEG, HL, G, TR] = [3.8, 5.7, 90, 0.45];\n// Follow spots below the panel behind the crowd, and how fast their cones open.\nconst SPOT = [[-14, 166], [78, 166], [32, 186]];\nconst TA = 0.046;\n// Gels by the Lights knob: house wash (0..1), three spots, two flyers and the catcher.\nconst PAL = [\n  [[1, 0.8, 0.52], [255, 226, 170], [255, 244, 222], [255, 206, 120], [255, 182, 36], [205, 222, 255], [70, 120, 255]],\n  [[1, 0.64, 0.5], [255, 182, 120], [255, 150, 150], [255, 208, 150], [255, 96, 112], [255, 206, 60], [250, 240, 230]],\n  [[0.82, 0.52, 0.86], [255, 122, 196], [186, 142, 255], [255, 166, 214], [255, 62, 196], [160, 104, 255], [110, 236, 214]],\n  [[0.46, 0.44, 1], [255, 76, 170], [66, 128, 255], [172, 96, 255], [255, 44, 156], [36, 150, 255], [245, 245, 255]],\n];\nconst [SKIN, STEEL, ROPE, BAR] = [[255, 196, 156], [170, 176, 190], [150, 138, 116], [215, 215, 225]];\nconst ONNET = { drop: 1, net: 1, up: 1, tada: 1 };\n\nconst mkF = (c) => ({ m: 'wait', x: WX, y: BY - LEG, ph: 0, fs: 1, a1: 2.9, a2: 2.9, l1: 0, l2: 0, k1: 0, k2: 0, hx: null, T: 0, sx: 0, sy: 0, c });\n// Thighs, knees and arms of a figure, both sides.\nconst lim = (f, l1, l2, k1, k2, a1, a2) => Object.assign(f, { l1, l2, k1, k2, a1, a2 });\nconst rest = (f) => ((f.hx = null), lim(f, 0, 0, 0, 0, 2.9, 2.9));\nconst barAt = (th) => [PFX + LF * sin(th), PFY + LF * cos(th)];\nconst netY = (x) => 98.5 + 1.6 * sin((PI * cl(x, 0, 63)) / 63);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = {\n    t: 0, started: false, F: F32(N * 3), LT: F32(N * 3), CA: F32(N * 3), CI: F32(N), AUD: F32(N), ROW: new Int8Array(N).fill(-1), POOL: F32(H),\n    bar: 'free', A: 0.55, phc: 0, fl: [mkF(4), mkF(5)], star: 0,\n    sp: SPOT.map(([sx, sy]) => ({ sx, sy, ax: 30, ay: 50, ux: 0, uy: -1, D: 110 })),\n    drum: 0, drumB: 0, pop: 0, wash: 1, trip: false, nextFin: true, turns: 1, net: { s: 0, v: 0, x: 32 }, fx: [], phones: [], P: PAL[0].map((c) => c.slice()), hz: 0.3,\n  };\n  // The canvas: red and cream panels running down from the peak, each billowing between its seams.\n  for (let y = 0; y \u003c H; y++) {\n    S.POOL[y] = exp(-(((y - 17) / 15) ** 2));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, dx = x - 32, dy = y - 5, a = atan2(dx, dy);\n      const red = 0.5 + 0.5 * cl(sin(a * 7) * 4, -1, 1);\n      const k = (0.84 - 0.16 * cos(a * 14)) * sm(2.5, 6, sqrt(dx * dx + dy * dy));\n      S.CA[i * 3] = mix(0.95, 0.88, red) * k;\n      S.CA[i * 3 + 1] = mix(0.86, 0.12, red) * k;\n      S.CA[i * 3 + 2] = mix(0.68, 0.12, red) * k;\n      S.CI[i] = (0.3 + 0.7 * exp(-((dx * dx) / 900 + (dy * dy) / 300))) * sm(40, 20, y);\n    }\n  }\n  // The crowd: rows of heads and shoulders, bigger towards the front, each row a solid band below.\n  [[108.5, 1.9, 4.6], [114, 2.3, 5.4], [120.5, 2.8, 6.4], [127.5, 3.4, 7.6]].forEach(([base, r, gap], k) => {\n    for (let cx = -2 + rnd() * gap; cx \u003c W + 3; cx += gap * (0.8 + 0.4 * rnd())) {\n      const hy = base - r * 1.15 + (rnd() - 0.5) * 1.2, hx = cx + rnd() - 0.5;\n      for (let y = max(0, floor(hy - r - 1)); y \u003c H; y++)\n        for (let x = max(0, floor(hx - r * 2.4)); x \u003c= min(W - 1, ceil(hx + r * 2.4)); x++) {\n          const hd = r + 0.5 - sqrt((x - hx) ** 2 + (y - hy) ** 2);\n          const sh = 1 - sqrt(((x - hx) / (r * 2.2)) ** 2 + ((y - base) / (r * 0.9)) ** 2);\n          const c = y >= base ? 1 : cl(max(hd, sh * r * 2), 0, 1), i = y * W + x;\n          if (c > S.AUD[i]) S.AUD[i] = c;\n          if (c > 0.5) S.ROW[i] = k;\n        }\n      if (rnd() \u003c 0.09) S.phones.push([round(hx + 1), round(hy - r - 1)]);\n    }\n  });\n  params.s = S;\n}\n\n// The catcher at swing angle psi: knees over the bar, body hanging, arms reaching for the flyer.\nfunction cpose(psi) {\n  const ps = psi * 1.2, bx = PCX + LC * sin(psi), by = PCY + LC * cos(psi), sx = sin(ps), sy = cos(ps);\n  const hx = bx + 1.9 * sx, hy = by + 1.9 * sy;\n  const ax = sx * cos(0.2) - sy * sin(0.2), ay = sy * cos(0.2) + sx * sin(0.2);\n  return { bx, by, x: hx, y: hy, ph: PI - ps, fs: 1, l1: 0, l2: 0, k1: 1.5, k2: 1.3, hx: hx + 3 * sx + 2.7 * ax, hy: hy + 3 * sy + 2.7 * ay };\n}\n\nfunction newRound(S, go, who) {\n  const trip = S.trip, turns = trip ? 3 : S.turns, fin = trip || S.nextFin, tf = 0.75 + 0.25 * turns, tr = go + 1.5 * PB;\n  S.trip = false;\n  S.nextFin = !fin;\n  S.rd = { turns, fin, tf, h: 8 + 3 * turns, tg: go, tr, tc: tr + tf, rel: false, A0: S.A, A: 0.55 + 0.03 * (turns - 1), t0: S.t, over: false };\n  S.star = who;\n  // The catcher times his swing to be out at the front of it when she arrives.\n  const dt = max(0.3, S.rd.tc - S.t);\n  let k = round((S.phc + OM * dt) / TAU);\n  if ((TAU * k - S.phc) / dt \u003c 0.6 * OM) k++;\n  S.ct = { ph: TAU * k, t: S.rd.tc, ev: 0 };\n}\n\nconst burst = (S, n) => {\n  for (let i = 0; i \u003c n; i++) S.fx.push({ x: 2 + rnd() * 60, y: 106 + rnd() * 20, a: 1, w: rnd() * 0.25 });\n};\n\nfunction catcherEvent(S, ev) {\n  const rd = S.rd, f = S.fl[S.star];\n  f.T = 0;\n  f.ph0 = f.ph;\n  if (ev === 0) {\n    // The catch: the house comes up and the crowd's cameras go off.\n    if (f.m === 'fly') f.m = 'caught';\n    burst(S, 7, (S.pop = 1));\n    S.ct = rd.fin ? { ph: S.phc + 1.5 * PI, t: S.t + 2.4, ev: 2 } : { ph: S.phc + TAU, t: rd.tg + 3.5 * PB - TR, ev: 1 };\n  } else if (ev === 1) [f.m, f.sx, f.sy] = ['ret', f.x, f.y];\n  else {\n    // He lets her go on the swing back, and she falls turning over into the net.\n    [f.m, f.vx, f.vy] = ['drop', f.vx0, f.vy0];\n    const dy = netY(f.x + f.vx * 0.9) - 1 - f.y;\n    f.TF = (-f.vy + sqrt(f.vy * f.vy + 2 * G * max(1, dy))) / G;\n    rd.over = true;\n  }\n}\n\nfunction stepFlyer(S, f, d, i) {\n  const rd = S.rd, t = S.t, th = S.th, [hbx, hby] = barAt(-S.A), [bx, by] = barAt(th), nt = S.net;\n  f.T += d;\n  switch (f.m) {\n    case 'wait':\n    case 'hold': {\n      // Standing on the board; the one whose turn it is steps up and takes the bar.\n      const h = f.m === 'hold', gx = h ? hbx - 1 : WX;\n      rest(f);\n      f.x += cl(gx - f.x, -7 * d, 7 * d);\n      [f.fs, f.y, f.ph] = [1, BY - LEG, h ? 0.12 * sm(3, 0.5, abs(gx - f.x)) : 0.04 * sin(t * 1.3 + i)];\n      if (!h) break;\n      if (abs(gx - f.x) \u003c 1.5) [f.hx, f.hy] = [hbx, hby];\n      if (t >= rd.tg) [S.bar, f.m, f.T, f.sx, f.sy] = ['free', 'swing', 0, f.x, f.y];\n      break;\n    }\n    case 'swing':\n    case 'ride': {\n      f.fs = f.m === 'ride' ? -1 : 1;\n      const k = f.m === 'swing' ? sm(0, 0.3, f.T) : 1, u = (f.fs * th) / S.A;\n      [f.x, f.y, f.ph] = [mix(f.sx, bx + HL * sin(th), k), mix(f.sy, by + HL * cos(th), k), -th * k];\n      // Legs lead at the front of each swing and trail at the back.\n      const l = (0.95 * max(0, u) + 0.35 * min(0, u)) * k;\n      lim(f, l, l, 0.25 * max(0, -u) * k, 0.25 * max(0, -u) * k, f.a1, f.a2);\n      [f.hx, f.hy] = [bx, by];\n      if (f.m === 'swing' && !rd.rel && t >= rd.tr) {\n        // Let go at the top of the swing, aimed at where the catcher's hands will be.\n        const c = cpose(-B);\n        rd.rel = true;\n        Object.assign(f, { m: 'fly', Rx: f.x, Ry: f.y, Cx: c.hx + HL * sin(-0.8 * B), Cy: c.hy + HL * cos(-0.8 * B), phR: f.ph, pkR: f.l1, hx: null });\n      }\n      if (f.m === 'ride' && t >= rd.tg + 4 * PB) {\n        // Home on the board. The flyer who was waiting takes the bar next.\n        S.bar = 'hook';\n        rd.over = true;\n        [f.m, f.T, f.sx, f.sy] = ['land', 0, f.x, f.y];\n        const o = S.fl[1 - i];\n        if (o.m === 'wait') o.m = 'hold';\n        f.next = o.m === 'hold' ? 'wait' : 'hold';\n        newRound(S, t + 1.1, o.m === 'hold' ? 1 - i : i);\n      }\n      break;\n    }\n    case 'fly': {\n      const s = cl((t - rd.tr) / rd.tf, 0, 1), u = sm(0.04, 0.22, s) * (1 - sm(0.7, 0.9, s));\n      [f.x, f.y, f.ph] = [mix(f.Rx, f.Cx, s), mix(f.Ry, f.Cy, s) - 4 * rd.h * s * (1 - s), mix(f.phR, 0.8 * B - TAU * rd.turns, ease(s))];\n      const l = max(f.pkR * (1 - sm(0, 0.12, s)), 2.2 * u);\n      lim(f, l, l, 2.4 * u, 2.4 * u, 2 * u, 2 * u);\n      break;\n    }\n    case 'caught': {\n      const c = S.cp, tp = S.psi * 0.8;\n      [f.x, f.y, f.ph, f.fs, f.hx, f.hy] = [c.hx + HL * sin(tp), c.hy + HL * cos(tp), -tp, 1, c.hx, c.hy];\n      lim(f, 0.4 * sin(S.phc + 0.6), 0.4 * sin(S.phc + 0.6), 0, 0, 0, 0);\n      break;\n    }\n    case 'ret': {\n      // A half turn in the air and back to the fly bar, which comes out to meet her.\n      const s = cl(f.T / TR, 0, 1), [ex, ey] = barAt(rd.A);\n      [f.x, f.y, f.ph, f.fs] = [mix(f.sx, ex + HL * sin(rd.A), s), mix(f.sy, ey + HL * cos(rd.A), s) - 18 * s * (1 - s), mix(f.ph0, -rd.A, s), s \u003c 0.5 ? 1 : -1];\n      const a = sin(PI * s);\n      f.hx = null;\n      lim(f, 0.3 * a, 0.3 * a, 0, 0, 1.3 * a, -1.3 * a);\n      if (s >= 1) f.m = 'ride';\n      break;\n    }\n    case 'land': {\n      const k = sm(0, 0.35, f.T);\n      rest(f);\n      [f.x, f.y, f.ph, f.hx, f.hy] = [mix(f.sx, hbx - 1, k), mix(f.sy, BY - LEG, k), mix(f.ph, 0, k), hbx, hby];\n      if (f.T > 0.4) f.m = f.next;\n      break;\n    }\n    case 'drop': {\n      f.vy += G * d;\n      [f.x, f.y] = [f.x + f.vx * d, f.y + f.vy * d];\n      const s = cl(f.T / f.TF, 0, 1), u = sm(0.1, 0.3, s) * (1 - sm(0.62, 0.85, s));\n      f.ph = mix(f.ph0, -PI / 2 - TAU, ease(s));\n      lim(f, 2.2 * u, 2.2 * u, 2.4 * u, 2.4 * u, 0.6 + 1.4 * u, 0.6 + 1.4 * u).hx = null;\n      if (f.y >= netY(f.x) - 1) {\n        [f.m, f.T, nt.x] = ['net', 0, f.x];\n        S.pop = max(S.pop, 0.8);\n        burst(S, 6);\n      }\n      break;\n    }\n    case 'net': {\n      // Bouncing on her back: a stiff spring while she is in the net, a fall while she is out.\n      const n = max(1, ceil(d / 0.006)), h = d / n;\n      for (let j = 0; j \u003c n; j++) {\n        const pen = f.y - (netY(f.x) - 1);\n        f.vy += (G - (pen > 0 ? 420 * pen + 7 * f.vy : 0)) * h;\n        [f.y, f.x, f.vx] = [f.y + f.vy * h, f.x + f.vx * h, f.vx * (1 - 2.5 * h)];\n        if (pen > 0) [nt.s, nt.v] = [pen, f.vy];\n        else (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s += nt.v * h);\n      }\n      [nt.x, nt.hold, f.ph] = [f.x, true, -PI / 2];\n      lim(f, 0.6, 0.6, 0.4, 0.4, 1.6 + 0.5 * sin(f.T * 9), 1.6 - 0.5 * sin(f.T * 9));\n      if (f.T > 2.6) [f.m, f.T, f.sy] = ['up', 0, f.y];\n      break;\n    }\n    case 'up':\n    case 'tada':\n    case 'walk': {\n      nt.s += (1.5 - nt.s) * min(1, d * 8);\n      [nt.v, nt.x, nt.hold] = [0, f.x, true];\n      const top = netY(f.x) + nt.s - LEG - 0.6;\n      if (f.m === 'up') {\n        const k = sm(0, 0.5, f.T);\n        rest(f);\n        [f.ph, f.y] = [mix(-PI / 2, 0, k), mix(f.sy, top, k)];\n        if (f.T > 0.55) [f.m, f.T] = ['tada', 0];\n      } else if (f.m === 'tada') {\n        // Arms up for the crowd.\n        [f.ph, f.y] = [0, top];\n        lim(f, 0, 0, 0, 0, 0.55, -0.55);\n        if (f.T > 0.8) [f.m, f.T] = ['walk', 0];\n      } else {\n        // Bouncing along the net to the ladder.\n        const w = sin(f.T * 8);\n        [f.fs, f.x, f.y, f.ph] = [-1, f.x - 13 * d, top - 1.1 * abs(w), 0];\n        lim(f, 0.5 * w, -0.5 * w, 0, 0, PI - 0.5 * w, PI + 0.5 * w);\n        if (f.x \u003c= LX) [f.m, f.T] = ['climb', 0];\n      }\n      break;\n    }\n    case 'climb': {\n      // Up the rope ladder to the board.\n      const w = sin(f.T * 9);\n      [f.x, f.y, f.fs, f.ph, f.hx] = [LX, f.y - 12 * d, -1, 0, null];\n      const p = max(0, w), q = max(0, -w);\n      lim(f, 0.9 * p, 0.9 * q, 1.5 * p, 1.5 * q, 0.35 + 0.45 * w, 0.35 - 0.45 * w);\n      if (f.y \u003c= BY - LEG) [f.y, f.m] = [BY - LEG, 'wait'];\n      break;\n    }\n  }\n  if (d > 0) [f.vx0, f.vy0] = [(f.x - f.px) / d, (f.y - f.py) / d];\n  [f.px, f.py] = [f.x, f.y];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], rdt = cl(dt || 0, 0, 0.1), d = rdt * (cl(kv[1], 0.2, 3) / 2);\n  const u = cl(kv[0], 0, 1) * 3, pi = min(2, floor(u));\n  for (let j = 0; j \u003c 7; j++) for (let c = 0; c \u003c 3; c++) S.P[j][c] = mix(PAL[pi][j][c], PAL[pi + 1][j][c], u - pi);\n  [S.turns, S.hz] = [cl(round(kv[2]), 1, 3), 0.26 + 0.74 * cl(kv[3], 0, 1)];\n  if (!S.started) {\n    // Open mid-act: the first flyer is already out on her first swing.\n    [S.started, S.fl[0].m, S.fl[0].T] = [true, 'swing', 1];\n    newRound(S, -0.9, 0);\n    [S.A, S.phc] = [S.rd.A, S.ct.ph - OM * S.rd.tc];\n  }\n  const tp = S.t, t = (S.t += d), rd = S.rd;\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drum roll: this trick becomes the triple if she has not let go yet, else the next one.\n    S.drumB = 1;\n    if (!rd.rel && !rd.over) {\n      Object.assign(rd, { turns: 3, fin: true, tf: 1.5, h: 17, tc: rd.tr + 1.5 });\n      S.nextFin = false;\n      if (S.ct && S.ct.ev === 0) S.ct.t = rd.tc;\n    } else S.trip = true;\n  }\n  S.A = S.bar === 'hook' && !rd.over ? mix(rd.A0, rd.A, sm(rd.t0, rd.tg, t)) : rd.A;\n  S.th = S.bar === 'hook' ? -S.A : -S.A * cos(OM * (t - rd.tg));\n  // The catcher, phase-locked to the next thing he has to be on time for.\n  const ct = S.ct, rem = ct ? ct.t - tp : 0;\n  S.phc = ct ? (rem \u003c= d ? ct.ph : S.phc + ((ct.ph - S.phc) * d) / rem) : S.phc + OM * d;\n  S.cp = cpose((S.psi = -B * cos(S.phc)));\n  if (ct && rem \u003c= d) (S.ct = null), catcherEvent(S, ct.ev);\n  const nt = S.net, h = min(d, 0.02);\n  nt.hold = false;\n  S.fl.forEach((f, i) => stepFlyer(S, f, d, i));\n  // An empty net rings and settles.\n  if (!nt.hold) (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s = (nt.s + nt.v * h) * exp(-d * 3));\n  // After a drop the bar swings empty until it comes back to the board and the next flyer hooks it.\n  const R = S.rd;\n  const w = S.fl.findIndex((f) => f.m === 'wait');\n  if (R.over && S.bar === 'free' && w >= 0 && floor((t - R.tg) / PB) > floor((tp - R.tg) / PB)) [S.bar, S.fl[w].m] = ['hook', 'hold'], newRound(S, t + 0.7, w);\n  // Light cues: the house dims for the drum roll, more for a bigger trick, and comes up on the catch.\n  const r = S.rd, star = S.fl[S.star];\n  const roll = (!r.rel && t > r.tg + 0.5 * PB) || star.m === 'fly' || S.drumB > 0 ? 1 : 0;\n  S.drum += (roll - S.drum) * (1 - exp(-d * 4));\n  S.drumB = max(0, S.drumB - rdt * 0.4);\n  S.pop *= exp(-d * 0.9);\n  S.wash = (1 - S.drum * (0.3 + 0.22 * (r.turns - 1))) * (1 + 0.8 * S.pop);\n  // The follow spots: two on the flyer, the third on the catcher unless the trick is big.\n  const fin = S.fl.find((f) => ONNET[f.m]);\n  const tg = [fin || star, fin && t \u003c r.tg + 0.4 ? fin : star, S.drum > 0.5 && r.turns >= 2 ? star : { x: S.cp.x, y: S.cp.y + 3 }];\n  const k = 1 - exp(-d * 8);\n  S.sp.forEach((s, j) => {\n    const vx = (s.ax += (tg[j].x - s.ax) * k) - s.sx, vy = (s.ay += (tg[j].y - 1 - s.ay) * k) - s.sy, D = (s.D = sqrt(vx * vx + vy * vy));\n    [s.ux, s.uy] = [vx / D, vy / D];\n  });\n  // Camera flashes in the crowd.\n  if (rnd() \u003c rdt * 0.9) burst(S, 1);\n  for (const e of S.fx) e.a -= rdt * 9;\n  S.fx = S.fx.filter((e) => e.a > 0);\n}\n\n// A stroke lit by the light field, with optional sequin sparkle.\nfunction seg(S, ax, ay, bx, by, r, c, sp) {\n  const { F, LT } = S, dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6;\n  const x1 = min(W - 1, ceil(max(ax, bx) + r + 1)), y1 = min(H - 1, ceil(max(ay, by) + r + 1));\n  for (let y = max(0, floor(min(ay, by) - r - 1)); y \u003c= y1; y++)\n    for (let x = max(0, floor(min(ax, bx) - r - 1)); x \u003c= x1; x++) {\n      const t = cl(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1), ex = x - ax - dx * t, ey = y - ay - dy * t;\n      const a = cl(r + 0.5 - sqrt(ex * ex + ey * ey), 0, 1);\n      if (a \u003c= 0) continue;\n      const q = (y * W + x) * 3, s = sp ? 0.72 + 0.56 * rnd() : 1;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += (c[j] * LT[q + j] * s - F[q + j]) * a;\n    }\n}\n\nfunction glow(F, x, y, r, c, k) {\n  for (let yy = max(0, floor(y - r)); yy \u003c= min(H - 1, ceil(y + r)); yy++)\n    for (let xx = max(0, floor(x - r)); xx \u003c= min(W - 1, ceil(x + r)); xx++) {\n      const g = k * exp(-((xx - x) ** 2 + (yy - y) ** 2) / (0.25 * r * r)), q = (yy * W + xx) * 3;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += c[j] * g;\n    }\n}\n\n// A stick figure: hips at (x, y), body angle ph (0 is head up), facing fs.\nfunction fig(S, f, col) {\n  const bx = sin(f.ph), by = -cos(f.ph), nx = cos(f.ph) * f.fs, ny = sin(f.ph) * f.fs;\n  const dv = (a, l) => [(bx * cos(a) + nx * sin(a)) * l, (by * cos(a) + ny * sin(a)) * l];\n  const shx = f.x + bx * 3, shy = f.y + by * 3;\n  for (const [l, k] of [[f.l1, f.k1], [f.l2, f.k2]]) {\n    const [kx, ky] = dv(PI - l, 1.9), [fx, fy] = dv(PI - l + k, 1.9);\n    seg(S, f.x, f.y, f.x + kx, f.y + ky, 0.6, col, 1);\n    seg(S, f.x + kx, f.y + ky, f.x + kx + fx, f.y + ky + fy, 0.5, col, 1);\n  }\n  seg(S, f.x, f.y, shx, shy, 0.8, col, 1);\n  for (const a of [f.a1, f.a2]) {\n    const [ax, ay] = dv(a, 2.7);\n    seg(S, shx, shy, f.hx === null ? shx + ax : f.hx, f.hx === null ? shy + ay : f.hy, 0.42, SKIN, 0);\n  }\n  seg(S, shx + bx * 1.45, shy + by * 1.45, shx + bx * 1.55, shy + by * 1.55, 0.75, SKIN, 0);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { F, LT, CA, CI, AUD, ROW, POOL, P, wash, hz } = S, wc = P[0];\n  const hzA = hz * (0.7 - 0.22 * hz), halo = hz * hz * 0.18, hl = log(max(1, halo * 400));\n  const am = wc.map((v) => v * (0.12 + 0.12 * wash)), kc = 0.48 * 255 * wash, air = 9 * hz * wash;\n  const sp = S.sp.map((s, j) => [s.sx, s.sy, s.ux, s.uy, s.D, ...P[1 + j].map((v) => v / 255)]);\n  for (let y = 0; y \u003c H; y++) {\n    // The ring below the net glows in the house light behind the crowd.\n    const pb = POOL[y], ring = 50 * sm(117, 104, y) * sm(100, 104, y) * wash + air;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3, ci = CI[i] * kc;\n      let r = 4 + wc[0] * ring + CA[q] * wc[0] * ci, g = 4 + wc[1] * ring + CA[q + 1] * wc[1] * ci, b = 9 + wc[2] * ring + CA[q + 2] * wc[2] * ci;\n      let lr = 0, lg = 0, lb = 0;\n      const cv = CI[i] > 0.02 ? 0.9 * pb * sm(0, 0.3, CI[i]) * 255 : 0;\n      for (const s of sp) {\n        const vx = x - s[0], vy = y - s[1], al = vx * s[2] + vy * s[3], pp = abs(vx * s[3] - vy * s[2]), R = 0.8 + al * TA;\n        if (pp \u003c R) {\n          // Lit air along the beam, and past the flyer a pool where it lands on the canvas.\n          const p = sm(R, R * 0.45, pp), k = ((p * (al > s[4] ? 0.8 : 1) * 1.3) / (1 + (al / 110) ** 2)) * hzA * 255, c = cv > 0 && al > s[4] ? cv * p : 0;\n          (lr += s[5] * p), (lg += s[6] * p), (lb += s[7] * p);\n          (r += s[5] * (k + CA[q] * c)), (g += s[6] * (k + CA[q + 1] * c)), (b += s[7] * (k + CA[q + 2] * c));\n        }\n        // Haze scatters a wide glow round each beam.\n        if (pp \u003c (R + 9) * hl) {\n          const h = halo * exp(-pp / (R + 9)) * 255;\n          (r += s[5] * h), (g += s[6] * h), (b += s[7] * h);\n        }\n      }\n      (F[q] = r), (F[q + 1] = g), (F[q + 2] = b);\n      (LT[q] = min(1.25, lr * 1.2 + am[0])), (LT[q + 1] = min(1.25, lg * 1.2 + am[1])), (LT[q + 2] = min(1.25, lb * 1.2 + am[2]));\n    }\n  }\n  const t = S.t;\n  // The king pole, the ring of bulbs round the peak, which chase in a drum roll, and the bale ring.\n  seg(S, 32, 7, 32, 29, 0.7, STEEL, 0);\n  for (let j = 0; j \u003c 22; j++) {\n    const a = (TAU * j) / 22, x = 32 + 20 * sin(a), y = 6.5 + 5 * cos(a), ch = (((j / 22 - t * 0.9) % 1) + 1) % 1 \u003c 0.22 ? 1 : 0;\n    const v = (mix(0.75 + 0.15 * sin(t * 3 + j * 2.1), 0.3 + 0.9 * ch, S.drum) + 0.5 * S.pop) * (0.85 + 0.15 * cos(a));\n    glow(F, x, y, 3.2, [255, 196, 110], 0.42 * v);\n    const q = (round(y) * W + round(x)) * 3;\n    for (let k = 0; k \u003c 3; k++) F[q + k] += [200, 160, 90][k] * v;\n  }\n  seg(S, 30, 5, 34, 5, 1.1, [60, 62, 70], 0);\n  // The rig: a truss under the peak, guy lines, the uprights, the board and the ladder.\n  seg(S, 3, PFY - 2, 61, PFY - 2, 0.4, STEEL, 0);\n  seg(S, 3, PFY, 61, PFY, 0.35, STEEL, 0);\n  for (let x = 5; x \u003c 61; x += 4) seg(S, x, PFY - 2, x + 2, PFY, 0.25, STEEL, 0);\n  seg(S, 4, PFY - 2, 24, 7, 0.25, ROPE, 0);\n  seg(S, 60, PFY - 2, 40, 7, 0.25, ROPE, 0);\n  seg(S, 62, PFY - 2, 62, 103, 0.35, ROPE, 0);\n  seg(S, 0, PFY - 2, 0, BY, 0.35, ROPE, 0);\n  seg(S, 0, BY + 0.6, barAt(-S.rd.A)[0] + 0.4, BY + 0.6, 0.55, [190, 160, 120], 0);\n  seg(S, 1, BY + 1, 1, 97, 0.3, ROPE, 0);\n  seg(S, 4.2, BY + 1, 4.2, 97, 0.3, ROPE, 0);\n  for (let y = BY + 3; y \u003c 97; y += 3) seg(S, 1, y, 4.2, y, 0.25, ROPE, 0);\n  // The safety net, a sagging diamond mesh, dented where a flyer is in it.\n  const nt = S.net;\n  for (let x = 0; x \u003c W; x++) {\n    const dn = nt.s * exp(-(((x - nt.x) / 8) ** 2)), far = 94.5 + 1.2 * sin((PI * x) / 63) + 0.6 * dn, near = 103 + 2 * sin((PI * x) / 63) + dn;\n    for (let y = max(0, floor(far - 1)); y \u003c= min(H - 1, ceil(near + 1)); y++) {\n      const v = (y - far) / (near - far), fa = x * 0.34 + v * 3, fb = x * 0.34 - v * 3;\n      let ln = v > -0.06 && v \u003c 1.06 ? max(sm(0.3, 0.48, abs((fa % 1) - 0.5)), sm(0.3, 0.48, abs((((fb % 1) + 1) % 1) - 0.5))) : 0;\n      ln = max(ln, sm(0.9, 0.2, abs(y - far)), sm(0.9, 0.2, abs(y - near))) * 0.8;\n      const q = (y * W + x) * 3;\n      if (ln > 0) for (let j = 0; j \u003c 3; j++) F[q + j] += ([205, 196, 176][j] * LT[q + j] - F[q + j]) * ln;\n    }\n  }\n  // The fly bar on its ropes, the catcher's cradle, the catcher and the flyers.\n  const [bx, by] = barAt(S.th), c = S.cp;\n  for (const [px, py, x, y] of [[PFX, PFY, bx, by], [PCX, PCY, c.bx, c.by]]) {\n    seg(S, px - 1.2, py, x - 1.2, y, 0.28, ROPE, 0);\n    seg(S, px + 1.2, py, x + 1.2, y, 0.28, ROPE, 0);\n    seg(S, x - 1.8, y, x + 1.8, y, 0.45, BAR, 0);\n  }\n  fig(S, c, P[6]);\n  for (const f of S.fl) fig(S, f, P[f.c]);\n  // The crowd in front of it all, a dark sea, each head rimmed by the light behind it.\n  for (let i = W; i \u003c N; i++) {\n    const a = AUD[i];\n    if (a \u003c= 0) continue;\n    const q = i * 3, k = ROW[i], rim = k > ROW[i - W] ? (1 - 0.2 * k) * a : 0;\n    for (let j = 0; j \u003c 3; j++) F[q + j] += ((12 - 2.5 * k) * wc[j] - F[q + j]) * a + rim * (16 * wash * wc[j] + 60 * max(0, LT[q + j] - 0.3));\n  }\n  // Phones held up to film, and camera flashes.\n  for (const [x, y] of S.phones) if (x >= 0 && x \u003c W - 1) for (let j = 0; j \u003c 6; j++) F[(y * W + x) * 3 + j] += [70, 92, 130][j % 3];\n  for (const e of S.fx) glow(F, e.x, e.y, 2.2, [255, 250, 240], e.a * e.a * (1 - e.w));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower."},{"name":"Turns","min":1,"max":3,"about":"The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer."},{"name":"Haze","min":0,"max":1,"about":"How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels."}],"start":[0,2,1,0.06],"measures":{"motion":0.3174,"detail":0.0396,"edges":0.2107,"complexity":1.4663,"coverage":0.506,"colour":0.1821,"drift":0.1332},"knobResponse":[0.0514,0.1017,0.0609,0.161]},{"slug":"foam-lather","title":"Foam Lather","family":"cosmetic","round":31,"note":"거품 클렌저를 낸 거품 사백 개가 패널을 채우고, 작은 거품은 줄어 사라지고 벽이 터지며 둘이 합쳐져요. 위로 갈수록 마른 벌집이 되고 아래는 물기 머금은 둥근 거품이에요. K1 은 색상환을 다 돌고, 누르면 아래에서 고운 거품을 새로 쳐 올려요.","idea":"Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.","buttons":"K1 tap whips a fresh batch of fine lather in from the bottom.","code":"// ===== Patternflow pattern =====\n// Title:   Foam Lather\n// Family:  cosmetic\n// Idea:    Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after cleansing foam whipped into lather\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1\n//\n// Knob 1: Hue. The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white.\n// Knob 2: Speed. How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower.\n// Knob 3: Size. The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up.\n// Knob 4: Wetness. How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid.\n// Buttons: K1 tap whips a fresh batch of fine lather in from the bottom.\n\nconst W = 64, H = 128;\nconst { min, max, floor, sqrt, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: sky blue.\nconst H0 = 0.57;\n// The foam is worked out over a margin M past every edge of the panel, so\n// bubbles at the edge have all their neighbours and the edge is no wall.\nconst M = 6, EW = W + 2 * M, EH = H + 2 * M, EN = EW * EH;\n// At most NB bubbles, each with up to NN neighbours on record.\nconst NB = 1100, NN = 16;\n// Gas through the walls: a bubble's area changes by K*(n - 6) LED^2 a second\n// at Speed 2, n its number of neighbours (von Neumann's law for 2D foam). The\n// 6 is the mean count of the bubbles on the panel, which comes out at 5.9 to\n// 6.1, and the dry foam at the top runs 1.2 times as fast.\nconst K = 1.6;\n// The foam rises RISE rows a second; a batch of lather comes every BATCH\n// seconds and pushes it up BOOST rows a second faster for two seconds.\nconst RISE = 1.2, BATCH = 15, BOOST = 14;\n// Packing grid for the bubbles, CS LEDs a cell.\nconst CS = 6, GX = Math.ceil(EW / CS) + 1, GY = Math.ceil(EH / CS) + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(NB), y: F(NB), r: F(NB), a: F(NB), tone: F(NB), n: 0, dead: new Uint8Array(NB),\n    nb: new Int16Array(NB * NN), nc: new Uint8Array(NB), edge: new Uint8Array(NB), fresh: true,\n    l1: new Int16Array(EN), l2: new Int16Array(EN), p1: F(EN), p2: F(EN),\n    head: new Int16Array(GX * GY), next: new Int16Array(NB),\n    fl: F(32 * 8), nfl: 0, dr: F(96 * 5), ndr: 0,\n    T: 0, since: 0, boost: 0, acc: 0, rate: 1, size: 0, wet: 0.06, hue: 0, started: false,\n    col: F(18), buf: F(W * H * 3),\n  };\n}\n\n// The radius of fresh lather.\nconst fresh = (S) => 2.1 + 3.2 * S.size;\n\nfunction add(S, x, y, r) {\n  if (S.n >= NB) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.r[i] = r;\n  S.a[i] = PI * r * r;\n  S.tone[i] = rnd();\n  S.dead[i] = 0;\n  S.nc[i] = 0;\n  S.edge[i] = 1;\n}\n\n// Liquid fraction at height y: it drains, so the foam is wettest at the\n// bottom; Wetness raises it everywhere.\nfunction liquid(S, y) {\n  const b = cl(y / H, 0, 1), dr = b ** 4;\n  return cl(0.02 + 0.3 * S.wet + (0.2 + 0.1 * S.wet) * dr, 0, 0.4);\n}\n\n// The panel filled with lather that has already risen and coarsened: fine\n// bubbles at the bottom, two and a half times as big at the top.\nfunction fill(S) {\n  S.n = 0;\n  const f = fresh(S);\n  let y = EH - M - f;\n  while (y > -M - 2) {\n    const rr = f * (1 + 1.5 * cl((H - y) / H, 0, 1) ** 1.2);\n    for (let x = -M + rnd() * rr; x \u003c W + M; ) {\n      const r = rr * (0.65 + 0.7 * rnd());\n      add(S, x, y + (rnd() - 0.5) * rr * 0.6, r);\n      x += r * 1.75 + rr * 0.15;\n    }\n    y -= rr * 1.6;\n  }\n  for (let k = 0; k \u003c 60; k++) pack(S, 0.6);\n}\n\n// Bubbles push apart wherever their discs overlap, the small ones giving\n// way more, so the foam stays packed and its cells polygonal.\nfunction pack(S, k) {\n  const { x, y, r, a, head, next } = S;\n  head.fill(-1);\n  let rmax = 0;\n  for (let i = 0; i \u003c S.n; i++) {\n    const gx = cl(floor((x[i] + M) / CS), 0, GX - 1), gy = cl(floor((y[i] + M) / CS), 0, GY - 1), c = gy * GX + gx;\n    next[i] = head[c];\n    head[c] = i;\n    if (r[i] > rmax) rmax = r[i];\n  }\n  for (let i = 0; i \u003c S.n; i++) {\n    const xi = x[i], yi = y[i], ri = r[i], reach = Math.ceil((ri + rmax) / CS);\n    const gx = cl(floor((xi + M) / CS), 0, GX - 1), gy = cl(floor((yi + M) / CS), 0, GY - 1);\n    for (let cy = max(0, gy - reach); cy \u003c= min(GY - 1, gy + reach); cy++)\n      for (let cx = max(0, gx - reach); cx \u003c= min(GX - 1, gx + reach); cx++)\n        for (let j = head[cy * GX + cx]; j >= 0; j = next[j]) {\n          if (j \u003c= i) continue;\n          const dx = x[j] - xi, dy = y[j] - yi, want = (ri + r[j]) * 0.96, d2 = dx * dx + dy * dy;\n          if (d2 >= want * want) continue;\n          const d = sqrt(d2) + 1e-4, push = ((want - d) / d) * k, wi = a[j] / (a[i] + a[j]);\n          x[i] -= dx * push * wi;\n          y[i] -= dy * push * wi;\n          x[j] += dx * push * (1 - wi);\n          y[j] += dy * push * (1 - wi);\n        }\n  }\n  // Soft walls just past the margin at the sides and the bottom.\n  for (let i = 0; i \u003c S.n; i++) {\n    const lo = -M + r[i] * 0.4, hi = W + M - r[i] * 0.4, bot = H + M - r[i] * 0.6;\n    if (x[i] \u003c lo) x[i] += (lo - x[i]) * 0.5;\n    if (x[i] > hi) x[i] += (hi - x[i]) * 0.5;\n    if (y[i] > bot) y[i] += (bot - y[i]) * 0.5;\n  }\n}\n\n// Every LED of the margined grid takes the bubble whose power distance\n// d^2 - r^2 is least (a Laguerre cell, which is how a 2D foam of mixed\n// sizes divides the plane), and remembers the runner-up for the wall.\nfunction label(S) {\n  const { x, y, r, l1, l2, p1, p2 } = S;\n  l1.fill(-1);\n  l2.fill(-1);\n  p1.fill(1e9);\n  p2.fill(1e9);\n  for (let i = 0; i \u003c S.n; i++) {\n    const R = max(r[i] * 1.4 + 1.3, r[i] * 1.8), w = r[i] * r[i], cx = x[i] + M, cy = y[i] + M;\n    const x0 = max(0, floor(cx - R)), x1 = min(EW - 1, floor(cx + R)), y0 = max(0, floor(cy - R)), y1 = min(EH - 1, floor(cy + R));\n    for (let Y = y0; Y \u003c= y1; Y++) {\n      const dy = Y + 0.5 - cy, dy2 = dy * dy - w;\n      for (let X = x0, p = Y * EW + x0; X \u003c= x1; X++, p++) {\n        const dx = X + 0.5 - cx, pd = dx * dx + dy2;\n        if (pd \u003c p1[p]) {\n          p2[p] = p1[p];\n          l2[p] = l1[p];\n          p1[p] = pd;\n          l1[p] = i;\n        } else if (pd \u003c p2[p]) {\n          p2[p] = pd;\n          l2[p] = i;\n        }\n      }\n    }\n  }\n  // Who touches whom: two cells are neighbours where their LEDs meet.\n  const { nb, nc, edge } = S;\n  nc.fill(0, 0, S.n);\n  for (let i = 0; i \u003c S.n; i++) edge[i] = x[i] - r[i] * 1.6 \u003c -M + 1 || x[i] + r[i] * 1.6 > W + M - 1 || y[i] - r[i] * 1.6 \u003c -M + 1 || y[i] + r[i] * 1.6 > H + M - 1 ? 1 : 0;\n  for (let Y = 0; Y \u003c EH - 1; Y++)\n    for (let X = 0, p = Y * EW; X \u003c EW - 1; X++, p++) {\n      const a = l1[p];\n      if (a \u003c 0) continue;\n      const b = l1[p + 1], c = l1[p + EW];\n      if (b >= 0 && b !== a) link(nb, nc, a, b);\n      if (c >= 0 && c !== a && c !== b) link(nb, nc, a, c);\n    }\n  S.fresh = true;\n}\n\nfunction link(nb, nc, a, b) {\n  const oa = a * NN;\n  for (let k = 0; k \u003c nc[a]; k++) if (nb[oa + k] === b) return;\n  if (nc[a] \u003c NN) nb[oa + nc[a]++] = b;\n  const ob = b * NN;\n  for (let k = 0; k \u003c nc[b]; k++) if (nb[ob + k] === a) return;\n  if (nc[b] \u003c NN) nb[ob + nc[b]++] = a;\n}\n\n// A wall bursts: a flash along it and a few droplets thrown off, and the\n// two bubbles become one with both their areas.\nfunction burst(S, i, j) {\n  const { x, y, r, a } = S;\n  const dx = x[j] - x[i], dy = y[j] - y[i], d = sqrt(dx * dx + dy * dy) + 1e-4;\n  const t = (d * d + r[i] * r[i] - r[j] * r[j]) / (2 * d * d), mx = x[i] + dx * t, my = y[i] + dy * t;\n  const half = min(r[i], r[j]) * 0.75, ux = -dy / d, uy = dx / d;\n  for (let k = 0; k \u003c 3 && S.ndr \u003c 96; k++) {\n    const o = S.ndr++ * 5, s = (rnd() - 0.5) * 2, sp = 10 + 14 * rnd(), side = rnd() \u003c 0.5 ? -1 : 1;\n    S.dr[o] = mx + ux * half * s;\n    S.dr[o + 1] = my + uy * half * s;\n    S.dr[o + 2] = (dx / d) * sp * side + ux * 4 * s;\n    S.dr[o + 3] = (dy / d) * sp * side + uy * 4 * s - 6;\n    S.dr[o + 4] = 1;\n  }\n  const A = a[i] + a[j];\n  x[i] = (x[i] * a[i] + x[j] * a[j]) / A;\n  y[i] = (y[i] * a[i] + y[j] * a[j]) / A;\n  a[i] = A;\n  r[i] = sqrt(A / PI);\n  S.dead[j] = 1;\n  if (S.nfl \u003c 32) {\n    const o = S.nfl++ * 8, f = S.fl;\n    f[o] = mx - ux * half;\n    f[o + 1] = my - uy * half;\n    f[o + 2] = mx + ux * half;\n    f[o + 3] = my + uy * half;\n    f[o + 4] = 1;\n    f[o + 5] = r[i];\n    f[o + 6] = x[i];\n    f[o + 7] = y[i];\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= BATCH) (S.since = 0), (S.boost = 2);\n  const { x, y, r, a, nb, nc, edge, dead } = S;\n  const n = S.n;\n  if (S.fresh) {\n    S.fresh = false;\n    // Gas runs from bubbles with fewer than six sides to those with more.\n    // The mean is taken over the bubbles away from the margin's edge, and\n    // those at the edge keep their size.\n    let sum = 0, cnt = 0;\n    for (let i = 0; i \u003c n; i++) if (!edge[i]) (sum += nc[i]), cnt++;\n    const mean = cnt ? sum / cnt : 6;\n    for (let i = 0; i \u003c n; i++) {\n      if (edge[i] || dead[i]) continue;\n      // A dry foam coarsens faster: its walls are thinner.\n      const dry = 1.3 - 2.5 * liquid(S, y[i]);\n      a[i] += K * (nc[i] - mean) * dry * st;\n      if (a[i] \u003c 2.5) {\n        dead[i] = 1;\n        continue;\n      }\n      r[i] = sqrt(a[i] / PI);\n    }\n    // Walls burst more often the drier and bigger the bubbles.\n    for (let i = 0; i \u003c n; i++) {\n      if (dead[i] || edge[i] || !nc[i]) continue;\n      const dry = cl(1 - liquid(S, y[i]) / 0.2, 0, 1);\n      if (rnd() > st * 0.014 * dry * (r[i] / 3) ** 2) continue;\n      const j = nb[i * NN + floor(rnd() * nc[i])];\n      if (j >= 0 && j \u003c n && !dead[j] && !edge[j]) burst(S, i, j);\n    }\n  }\n  // The foam rises; whatever leaves the top is gone.\n  const up = (RISE + (S.boost > 0 ? BOOST * sm(0, 0.4, S.boost) : 0)) * st;\n  S.boost = max(0, S.boost - st);\n  for (let i = 0; i \u003c n; i++) {\n    y[i] -= up;\n    if (y[i] + r[i] \u003c -M) dead[i] = 1;\n  }\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    if (dead[i]) continue;\n    if (k !== i) {\n      x[k] = x[i];\n      y[k] = y[i];\n      r[k] = r[i];\n      a[k] = a[i];\n      S.tone[k] = S.tone[i];\n    }\n    dead[k] = 0;\n    k++;\n  }\n  S.n = k;\n  // New lather comes in under the bottom edge as fast as the foam rises, a\n  // fresh batch finer still.\n  const f = fresh(S) * (S.boost > 0 ? 0.85 : 1);\n  S.acc += up * EW;\n  while (S.acc > 0 && S.n \u003c NB) {\n    const rr = f * (0.7 + 0.6 * rnd());\n    S.acc -= PI * rr * rr * 0.95;\n    add(S, -M + rnd() * EW, H + M - rr * (0.6 + rnd()), rr);\n  }\n  pack(S, 0.7);\n  // Flashes fade in a third of a second; droplets fly and fall.\n  for (let i = S.nfl - 1; i >= 0; i--) {\n    const o = i * 8;\n    S.fl[o + 4] -= st * 3;\n    if (S.fl[o + 4] \u003c= 0) {\n      const l = --S.nfl * 8;\n      for (let c = 0; c \u003c 8; c++) S.fl[o + c] = S.fl[l + c];\n    }\n  }\n  for (let i = S.ndr - 1; i >= 0; i--) {\n    const o = i * 5;\n    S.dr[o] += S.dr[o + 2] * st;\n    S.dr[o + 1] += S.dr[o + 3] * st;\n    S.dr[o + 3] += 60 * st;\n    S.dr[o + 4] -= st * 3;\n    if (S.dr[o + 4] \u003c= 0) {\n      const l = --S.ndr * 5;\n      for (let c = 0; c \u003c 5; c++) S.dr[o + c] = S.dr[l + c];\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.size = cl(k[2], 0, 1);\n  S.wet = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    fill(S);\n    for (let i = 0; i \u003c 30; i++) {\n      label(S);\n      step(S, 1 / 30);\n    }\n    S.since = 6;\n  }\n  if (input.btnPressed && input.btnPressed[0]) (S.boost = 2), (S.since = 0);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  label(S);\n  const { x, y, r, l1, l2, p1, p2, col, buf, tone } = S;\n  const hue = H0 + S.hue;\n  // Inside a bubble, its rim, the wall, the liquid between bubbles. Orange\n  // and yellow kept dim read brown and olive on LEDs, so near those hues\n  // the inside of a bubble is lit brighter.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.17) / 0.17);\n  hsv(hue, 0.5 - 0.12 * am, 0.52 + 0.34 * am, col, 0);\n  hsv(hue - 0.02, 0.4 - 0.05 * am, 0.85 + 0.13 * am, col, 3);\n  hsv(hue + 0.03, 0.12, 0.98, col, 6);\n  hsv(hue, 0.3, 0.72 + 0.16 * am, col, 9);\n  for (let Y = 0; Y \u003c H; Y++) {\n    const phi = liquid(S, Y), sd = 0.88 + 0.9 * (1 - min(1, phi / 0.36)) ** 2;\n    for (let X = 0; X \u003c W; X++) {\n      const p = (Y + M) * EW + X + M, i = l1[p], q = (Y * W + X) * 3;\n      if (i \u003c 0) {\n        buf[q] = col[9];\n        buf[q + 1] = col[10];\n        buf[q + 2] = col[11];\n        continue;\n      }\n      const px = X + 0.5, py = Y + 0.5, dx = px - x[i], dy = py - y[i], d = sqrt(dx * dx + dy * dy);\n      const j = l2[p];\n      let dw = 9;\n      if (j >= 0) {\n        const ex = x[j] - x[i], ey = y[j] - y[i];\n        dw = (p2[p] - p1[p]) / (2 * sqrt(ex * ex + ey * ey) + 1e-4);\n      }\n      // A bubble is its cell clipped to a disc: in a dry foam the disc\n      // covers the cell and the bubble is a polygon; in a wet one it is\n      // round, sitting in liquid that fills the corners between bubbles.\n      const ed = r[i] * sd - d, e = min(dw, ed);\n      let R, G, B;\n      if (e \u003c 0) {\n        // Liquid: milky, brightest against the bubbles it wets.\n        const k = exp(e * 0.9) * 0.35;\n        R = col[9] + (col[6] - col[9]) * k;\n        G = col[10] + (col[7] - col[10]) * k;\n        B = col[11] + (col[8] - col[11]) * k;\n      } else {\n        // The dome: dim through its middle, brighter round its rim as the\n        // film turns edge on and low on the right where the light that came\n        // in through it gathers, a thin bright wall, and a point of light up\n        // and to the left.\n        const u = d / (d + e + 1e-4), rr = r[i], gx = dx - rr * 0.3, gy = dy - rr * 0.34;\n        const g2 = 1 - (gx * gx + gy * gy) / (1.6 * rr * rr), lens = g2 > 0 ? g2 * g2 * 0.45 : 0, rim = max(u * u * u, lens);\n        const v = 0.85 + 0.3 * tone[i];\n        R = (col[0] * (1 - rim) + col[3] * rim) * v;\n        G = (col[1] * (1 - rim) + col[4] * rim) * v;\n        B = (col[2] * (1 - rim) + col[5] * rim) * v;\n        const s = 0.32 + 0.1 * rr, hx = dx + rr * 0.36, hy = dy + rr * 0.4, h2 = (hx * hx + hy * hy) / (2 * s * s);\n        const h5 = 1 - h2 * 0.2, hl = h5 > 0 ? h5 * h5 * h5 * h5 * h5 * 255 : 0;\n        // The wall, about 1.3 LEDs across: (1 - (e/1.3)^2)^2.\n        const w2 = 1 - e * e * 0.6, wl = w2 > 0 ? w2 * w2 * (ed \u003c dw ? 0.75 : 1) : 0;\n        R += (col[6] - R) * wl + hl;\n        G += (col[7] - G) * wl + hl;\n        B += (col[8] - B) * wl + hl;\n      }\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  }\n  // A burst wall flashes white along its length, and for a moment the new\n  // bubble it leaves is lit through.\n  for (let f = 0; f \u003c S.nfl; f++) {\n    const o = f * 8, fl = S.fl, life = fl[o + 4], len = Math.hypot(fl[o + 2] - fl[o], fl[o + 3] - fl[o + 1]);\n    const steps = max(2, Math.ceil(len * 2)), lf = life * life;\n    for (let k = 0; k \u003c= steps; k++) {\n      const t = k / steps;\n      spot(buf, fl[o] + (fl[o + 2] - fl[o]) * t, fl[o + 1] + (fl[o + 3] - fl[o + 1]) * t, lf * 200 * (1 - 0.6 * abs(t - 0.5)));\n    }\n    const rm = fl[o + 5] * 0.85, cx = fl[o + 6], cy = fl[o + 7];\n    for (let Y = max(0, floor(cy - rm)); Y \u003c= min(H - 1, floor(cy + rm)); Y++)\n      for (let X = max(0, floor(cx - rm)); X \u003c= min(W - 1, floor(cx + rm)); X++) {\n        const d2 = ((X + 0.5 - cx) ** 2 + (Y + 0.5 - cy) ** 2) / (rm * rm);\n        if (d2 >= 1) continue;\n        const w = (1 - d2) * lf * 0.7, q = (Y * W + X) * 3;\n        buf[q] += (col[6] - buf[q] * 0.5) * w;\n        buf[q + 1] += (col[7] - buf[q + 1] * 0.5) * w;\n        buf[q + 2] += (col[8] - buf[q + 2] * 0.5) * w;\n      }\n  }\n  for (let k = 0; k \u003c S.ndr; k++) {\n    const o = k * 5;\n    spot(buf, S.dr[o], S.dr[o + 1], S.dr[o + 4] * 200);\n  }\n  for (let p = 0, Y = 0; Y \u003c H; Y++) for (let X = 0; X \u003c W; X++, p += 3) display.setPixel(X, Y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// White light v shared over the four LEDs round x, y.\nfunction spot(buf, x, y, v) {\n  const X = floor(x - 0.5), Y = floor(y - 0.5), fx = x - 0.5 - X, fy = y - 0.5 - Y;\n  for (let k = 0; k \u003c 4; k++) {\n    const xx = X + (k & 1), yy = Y + (k >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const w = (k & 1 ? fx : 1 - fx) * (k >> 1 ? fy : 1 - fy) * v, q = (yy * W + xx) * 3;\n    buf[q] += w;\n    buf[q + 1] += w;\n    buf[q + 2] += w;\n  }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-foam-lather","type":"code","name":"foam-lather","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Foam Lather\n// Family:  cosmetic\n// Idea:    Fresh lather fills the panel with hundreds of small tinted bubbles, each a soft dome with a thin bright wall and a point of light, and it coarsens as it rises: bubbles with few neighbours shrink away, walls burst with a flash and merge two bubbles into one, the top turns to a dry honeycomb while the bottom stays wet and round, until new lather is whipped in from below.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after cleansing foam whipped into lather\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1\n//\n// Knob 1: Hue. The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white.\n// Knob 2: Speed. How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower.\n// Knob 3: Size. The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up.\n// Knob 4: Wetness. How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid.\n// Buttons: K1 tap whips a fresh batch of fine lather in from the bottom.\n\nconst W = 64, H = 128;\nconst { min, max, floor, sqrt, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: sky blue.\nconst H0 = 0.57;\n// The foam is worked out over a margin M past every edge of the panel, so\n// bubbles at the edge have all their neighbours and the edge is no wall.\nconst M = 6, EW = W + 2 * M, EH = H + 2 * M, EN = EW * EH;\n// At most NB bubbles, each with up to NN neighbours on record.\nconst NB = 1100, NN = 16;\n// Gas through the walls: a bubble's area changes by K*(n - 6) LED^2 a second\n// at Speed 2, n its number of neighbours (von Neumann's law for 2D foam). The\n// 6 is the mean count of the bubbles on the panel, which comes out at 5.9 to\n// 6.1, and the dry foam at the top runs 1.2 times as fast.\nconst K = 1.6;\n// The foam rises RISE rows a second; a batch of lather comes every BATCH\n// seconds and pushes it up BOOST rows a second faster for two seconds.\nconst RISE = 1.2, BATCH = 15, BOOST = 14;\n// Packing grid for the bubbles, CS LEDs a cell.\nconst CS = 6, GX = Math.ceil(EW / CS) + 1, GY = Math.ceil(EH / CS) + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(NB), y: F(NB), r: F(NB), a: F(NB), tone: F(NB), n: 0, dead: new Uint8Array(NB),\n    nb: new Int16Array(NB * NN), nc: new Uint8Array(NB), edge: new Uint8Array(NB), fresh: true,\n    l1: new Int16Array(EN), l2: new Int16Array(EN), p1: F(EN), p2: F(EN),\n    head: new Int16Array(GX * GY), next: new Int16Array(NB),\n    fl: F(32 * 8), nfl: 0, dr: F(96 * 5), ndr: 0,\n    T: 0, since: 0, boost: 0, acc: 0, rate: 1, size: 0, wet: 0.06, hue: 0, started: false,\n    col: F(18), buf: F(W * H * 3),\n  };\n}\n\n// The radius of fresh lather.\nconst fresh = (S) => 2.1 + 3.2 * S.size;\n\nfunction add(S, x, y, r) {\n  if (S.n >= NB) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.r[i] = r;\n  S.a[i] = PI * r * r;\n  S.tone[i] = rnd();\n  S.dead[i] = 0;\n  S.nc[i] = 0;\n  S.edge[i] = 1;\n}\n\n// Liquid fraction at height y: it drains, so the foam is wettest at the\n// bottom; Wetness raises it everywhere.\nfunction liquid(S, y) {\n  const b = cl(y / H, 0, 1), dr = b ** 4;\n  return cl(0.02 + 0.3 * S.wet + (0.2 + 0.1 * S.wet) * dr, 0, 0.4);\n}\n\n// The panel filled with lather that has already risen and coarsened: fine\n// bubbles at the bottom, two and a half times as big at the top.\nfunction fill(S) {\n  S.n = 0;\n  const f = fresh(S);\n  let y = EH - M - f;\n  while (y > -M - 2) {\n    const rr = f * (1 + 1.5 * cl((H - y) / H, 0, 1) ** 1.2);\n    for (let x = -M + rnd() * rr; x \u003c W + M; ) {\n      const r = rr * (0.65 + 0.7 * rnd());\n      add(S, x, y + (rnd() - 0.5) * rr * 0.6, r);\n      x += r * 1.75 + rr * 0.15;\n    }\n    y -= rr * 1.6;\n  }\n  for (let k = 0; k \u003c 60; k++) pack(S, 0.6);\n}\n\n// Bubbles push apart wherever their discs overlap, the small ones giving\n// way more, so the foam stays packed and its cells polygonal.\nfunction pack(S, k) {\n  const { x, y, r, a, head, next } = S;\n  head.fill(-1);\n  let rmax = 0;\n  for (let i = 0; i \u003c S.n; i++) {\n    const gx = cl(floor((x[i] + M) / CS), 0, GX - 1), gy = cl(floor((y[i] + M) / CS), 0, GY - 1), c = gy * GX + gx;\n    next[i] = head[c];\n    head[c] = i;\n    if (r[i] > rmax) rmax = r[i];\n  }\n  for (let i = 0; i \u003c S.n; i++) {\n    const xi = x[i], yi = y[i], ri = r[i], reach = Math.ceil((ri + rmax) / CS);\n    const gx = cl(floor((xi + M) / CS), 0, GX - 1), gy = cl(floor((yi + M) / CS), 0, GY - 1);\n    for (let cy = max(0, gy - reach); cy \u003c= min(GY - 1, gy + reach); cy++)\n      for (let cx = max(0, gx - reach); cx \u003c= min(GX - 1, gx + reach); cx++)\n        for (let j = head[cy * GX + cx]; j >= 0; j = next[j]) {\n          if (j \u003c= i) continue;\n          const dx = x[j] - xi, dy = y[j] - yi, want = (ri + r[j]) * 0.96, d2 = dx * dx + dy * dy;\n          if (d2 >= want * want) continue;\n          const d = sqrt(d2) + 1e-4, push = ((want - d) / d) * k, wi = a[j] / (a[i] + a[j]);\n          x[i] -= dx * push * wi;\n          y[i] -= dy * push * wi;\n          x[j] += dx * push * (1 - wi);\n          y[j] += dy * push * (1 - wi);\n        }\n  }\n  // Soft walls just past the margin at the sides and the bottom.\n  for (let i = 0; i \u003c S.n; i++) {\n    const lo = -M + r[i] * 0.4, hi = W + M - r[i] * 0.4, bot = H + M - r[i] * 0.6;\n    if (x[i] \u003c lo) x[i] += (lo - x[i]) * 0.5;\n    if (x[i] > hi) x[i] += (hi - x[i]) * 0.5;\n    if (y[i] > bot) y[i] += (bot - y[i]) * 0.5;\n  }\n}\n\n// Every LED of the margined grid takes the bubble whose power distance\n// d^2 - r^2 is least (a Laguerre cell, which is how a 2D foam of mixed\n// sizes divides the plane), and remembers the runner-up for the wall.\nfunction label(S) {\n  const { x, y, r, l1, l2, p1, p2 } = S;\n  l1.fill(-1);\n  l2.fill(-1);\n  p1.fill(1e9);\n  p2.fill(1e9);\n  for (let i = 0; i \u003c S.n; i++) {\n    const R = max(r[i] * 1.4 + 1.3, r[i] * 1.8), w = r[i] * r[i], cx = x[i] + M, cy = y[i] + M;\n    const x0 = max(0, floor(cx - R)), x1 = min(EW - 1, floor(cx + R)), y0 = max(0, floor(cy - R)), y1 = min(EH - 1, floor(cy + R));\n    for (let Y = y0; Y \u003c= y1; Y++) {\n      const dy = Y + 0.5 - cy, dy2 = dy * dy - w;\n      for (let X = x0, p = Y * EW + x0; X \u003c= x1; X++, p++) {\n        const dx = X + 0.5 - cx, pd = dx * dx + dy2;\n        if (pd \u003c p1[p]) {\n          p2[p] = p1[p];\n          l2[p] = l1[p];\n          p1[p] = pd;\n          l1[p] = i;\n        } else if (pd \u003c p2[p]) {\n          p2[p] = pd;\n          l2[p] = i;\n        }\n      }\n    }\n  }\n  // Who touches whom: two cells are neighbours where their LEDs meet.\n  const { nb, nc, edge } = S;\n  nc.fill(0, 0, S.n);\n  for (let i = 0; i \u003c S.n; i++) edge[i] = x[i] - r[i] * 1.6 \u003c -M + 1 || x[i] + r[i] * 1.6 > W + M - 1 || y[i] - r[i] * 1.6 \u003c -M + 1 || y[i] + r[i] * 1.6 > H + M - 1 ? 1 : 0;\n  for (let Y = 0; Y \u003c EH - 1; Y++)\n    for (let X = 0, p = Y * EW; X \u003c EW - 1; X++, p++) {\n      const a = l1[p];\n      if (a \u003c 0) continue;\n      const b = l1[p + 1], c = l1[p + EW];\n      if (b >= 0 && b !== a) link(nb, nc, a, b);\n      if (c >= 0 && c !== a && c !== b) link(nb, nc, a, c);\n    }\n  S.fresh = true;\n}\n\nfunction link(nb, nc, a, b) {\n  const oa = a * NN;\n  for (let k = 0; k \u003c nc[a]; k++) if (nb[oa + k] === b) return;\n  if (nc[a] \u003c NN) nb[oa + nc[a]++] = b;\n  const ob = b * NN;\n  for (let k = 0; k \u003c nc[b]; k++) if (nb[ob + k] === a) return;\n  if (nc[b] \u003c NN) nb[ob + nc[b]++] = a;\n}\n\n// A wall bursts: a flash along it and a few droplets thrown off, and the\n// two bubbles become one with both their areas.\nfunction burst(S, i, j) {\n  const { x, y, r, a } = S;\n  const dx = x[j] - x[i], dy = y[j] - y[i], d = sqrt(dx * dx + dy * dy) + 1e-4;\n  const t = (d * d + r[i] * r[i] - r[j] * r[j]) / (2 * d * d), mx = x[i] + dx * t, my = y[i] + dy * t;\n  const half = min(r[i], r[j]) * 0.75, ux = -dy / d, uy = dx / d;\n  for (let k = 0; k \u003c 3 && S.ndr \u003c 96; k++) {\n    const o = S.ndr++ * 5, s = (rnd() - 0.5) * 2, sp = 10 + 14 * rnd(), side = rnd() \u003c 0.5 ? -1 : 1;\n    S.dr[o] = mx + ux * half * s;\n    S.dr[o + 1] = my + uy * half * s;\n    S.dr[o + 2] = (dx / d) * sp * side + ux * 4 * s;\n    S.dr[o + 3] = (dy / d) * sp * side + uy * 4 * s - 6;\n    S.dr[o + 4] = 1;\n  }\n  const A = a[i] + a[j];\n  x[i] = (x[i] * a[i] + x[j] * a[j]) / A;\n  y[i] = (y[i] * a[i] + y[j] * a[j]) / A;\n  a[i] = A;\n  r[i] = sqrt(A / PI);\n  S.dead[j] = 1;\n  if (S.nfl \u003c 32) {\n    const o = S.nfl++ * 8, f = S.fl;\n    f[o] = mx - ux * half;\n    f[o + 1] = my - uy * half;\n    f[o + 2] = mx + ux * half;\n    f[o + 3] = my + uy * half;\n    f[o + 4] = 1;\n    f[o + 5] = r[i];\n    f[o + 6] = x[i];\n    f[o + 7] = y[i];\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= BATCH) (S.since = 0), (S.boost = 2);\n  const { x, y, r, a, nb, nc, edge, dead } = S;\n  const n = S.n;\n  if (S.fresh) {\n    S.fresh = false;\n    // Gas runs from bubbles with fewer than six sides to those with more.\n    // The mean is taken over the bubbles away from the margin's edge, and\n    // those at the edge keep their size.\n    let sum = 0, cnt = 0;\n    for (let i = 0; i \u003c n; i++) if (!edge[i]) (sum += nc[i]), cnt++;\n    const mean = cnt ? sum / cnt : 6;\n    for (let i = 0; i \u003c n; i++) {\n      if (edge[i] || dead[i]) continue;\n      // A dry foam coarsens faster: its walls are thinner.\n      const dry = 1.3 - 2.5 * liquid(S, y[i]);\n      a[i] += K * (nc[i] - mean) * dry * st;\n      if (a[i] \u003c 2.5) {\n        dead[i] = 1;\n        continue;\n      }\n      r[i] = sqrt(a[i] / PI);\n    }\n    // Walls burst more often the drier and bigger the bubbles.\n    for (let i = 0; i \u003c n; i++) {\n      if (dead[i] || edge[i] || !nc[i]) continue;\n      const dry = cl(1 - liquid(S, y[i]) / 0.2, 0, 1);\n      if (rnd() > st * 0.014 * dry * (r[i] / 3) ** 2) continue;\n      const j = nb[i * NN + floor(rnd() * nc[i])];\n      if (j >= 0 && j \u003c n && !dead[j] && !edge[j]) burst(S, i, j);\n    }\n  }\n  // The foam rises; whatever leaves the top is gone.\n  const up = (RISE + (S.boost > 0 ? BOOST * sm(0, 0.4, S.boost) : 0)) * st;\n  S.boost = max(0, S.boost - st);\n  for (let i = 0; i \u003c n; i++) {\n    y[i] -= up;\n    if (y[i] + r[i] \u003c -M) dead[i] = 1;\n  }\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    if (dead[i]) continue;\n    if (k !== i) {\n      x[k] = x[i];\n      y[k] = y[i];\n      r[k] = r[i];\n      a[k] = a[i];\n      S.tone[k] = S.tone[i];\n    }\n    dead[k] = 0;\n    k++;\n  }\n  S.n = k;\n  // New lather comes in under the bottom edge as fast as the foam rises, a\n  // fresh batch finer still.\n  const f = fresh(S) * (S.boost > 0 ? 0.85 : 1);\n  S.acc += up * EW;\n  while (S.acc > 0 && S.n \u003c NB) {\n    const rr = f * (0.7 + 0.6 * rnd());\n    S.acc -= PI * rr * rr * 0.95;\n    add(S, -M + rnd() * EW, H + M - rr * (0.6 + rnd()), rr);\n  }\n  pack(S, 0.7);\n  // Flashes fade in a third of a second; droplets fly and fall.\n  for (let i = S.nfl - 1; i >= 0; i--) {\n    const o = i * 8;\n    S.fl[o + 4] -= st * 3;\n    if (S.fl[o + 4] \u003c= 0) {\n      const l = --S.nfl * 8;\n      for (let c = 0; c \u003c 8; c++) S.fl[o + c] = S.fl[l + c];\n    }\n  }\n  for (let i = S.ndr - 1; i >= 0; i--) {\n    const o = i * 5;\n    S.dr[o] += S.dr[o + 2] * st;\n    S.dr[o + 1] += S.dr[o + 3] * st;\n    S.dr[o + 3] += 60 * st;\n    S.dr[o + 4] -= st * 3;\n    if (S.dr[o + 4] \u003c= 0) {\n      const l = --S.ndr * 5;\n      for (let c = 0; c \u003c 5; c++) S.dr[o + c] = S.dr[l + c];\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.size = cl(k[2], 0, 1);\n  S.wet = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    fill(S);\n    for (let i = 0; i \u003c 30; i++) {\n      label(S);\n      step(S, 1 / 30);\n    }\n    S.since = 6;\n  }\n  if (input.btnPressed && input.btnPressed[0]) (S.boost = 2), (S.since = 0);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  label(S);\n  const { x, y, r, l1, l2, p1, p2, col, buf, tone } = S;\n  const hue = H0 + S.hue;\n  // Inside a bubble, its rim, the wall, the liquid between bubbles. Orange\n  // and yellow kept dim read brown and olive on LEDs, so near those hues\n  // the inside of a bubble is lit brighter.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.17) / 0.17);\n  hsv(hue, 0.5 - 0.12 * am, 0.52 + 0.34 * am, col, 0);\n  hsv(hue - 0.02, 0.4 - 0.05 * am, 0.85 + 0.13 * am, col, 3);\n  hsv(hue + 0.03, 0.12, 0.98, col, 6);\n  hsv(hue, 0.3, 0.72 + 0.16 * am, col, 9);\n  for (let Y = 0; Y \u003c H; Y++) {\n    const phi = liquid(S, Y), sd = 0.88 + 0.9 * (1 - min(1, phi / 0.36)) ** 2;\n    for (let X = 0; X \u003c W; X++) {\n      const p = (Y + M) * EW + X + M, i = l1[p], q = (Y * W + X) * 3;\n      if (i \u003c 0) {\n        buf[q] = col[9];\n        buf[q + 1] = col[10];\n        buf[q + 2] = col[11];\n        continue;\n      }\n      const px = X + 0.5, py = Y + 0.5, dx = px - x[i], dy = py - y[i], d = sqrt(dx * dx + dy * dy);\n      const j = l2[p];\n      let dw = 9;\n      if (j >= 0) {\n        const ex = x[j] - x[i], ey = y[j] - y[i];\n        dw = (p2[p] - p1[p]) / (2 * sqrt(ex * ex + ey * ey) + 1e-4);\n      }\n      // A bubble is its cell clipped to a disc: in a dry foam the disc\n      // covers the cell and the bubble is a polygon; in a wet one it is\n      // round, sitting in liquid that fills the corners between bubbles.\n      const ed = r[i] * sd - d, e = min(dw, ed);\n      let R, G, B;\n      if (e \u003c 0) {\n        // Liquid: milky, brightest against the bubbles it wets.\n        const k = exp(e * 0.9) * 0.35;\n        R = col[9] + (col[6] - col[9]) * k;\n        G = col[10] + (col[7] - col[10]) * k;\n        B = col[11] + (col[8] - col[11]) * k;\n      } else {\n        // The dome: dim through its middle, brighter round its rim as the\n        // film turns edge on and low on the right where the light that came\n        // in through it gathers, a thin bright wall, and a point of light up\n        // and to the left.\n        const u = d / (d + e + 1e-4), rr = r[i], gx = dx - rr * 0.3, gy = dy - rr * 0.34;\n        const g2 = 1 - (gx * gx + gy * gy) / (1.6 * rr * rr), lens = g2 > 0 ? g2 * g2 * 0.45 : 0, rim = max(u * u * u, lens);\n        const v = 0.85 + 0.3 * tone[i];\n        R = (col[0] * (1 - rim) + col[3] * rim) * v;\n        G = (col[1] * (1 - rim) + col[4] * rim) * v;\n        B = (col[2] * (1 - rim) + col[5] * rim) * v;\n        const s = 0.32 + 0.1 * rr, hx = dx + rr * 0.36, hy = dy + rr * 0.4, h2 = (hx * hx + hy * hy) / (2 * s * s);\n        const h5 = 1 - h2 * 0.2, hl = h5 > 0 ? h5 * h5 * h5 * h5 * h5 * 255 : 0;\n        // The wall, about 1.3 LEDs across: (1 - (e/1.3)^2)^2.\n        const w2 = 1 - e * e * 0.6, wl = w2 > 0 ? w2 * w2 * (ed \u003c dw ? 0.75 : 1) : 0;\n        R += (col[6] - R) * wl + hl;\n        G += (col[7] - G) * wl + hl;\n        B += (col[8] - B) * wl + hl;\n      }\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  }\n  // A burst wall flashes white along its length, and for a moment the new\n  // bubble it leaves is lit through.\n  for (let f = 0; f \u003c S.nfl; f++) {\n    const o = f * 8, fl = S.fl, life = fl[o + 4], len = Math.hypot(fl[o + 2] - fl[o], fl[o + 3] - fl[o + 1]);\n    const steps = max(2, Math.ceil(len * 2)), lf = life * life;\n    for (let k = 0; k \u003c= steps; k++) {\n      const t = k / steps;\n      spot(buf, fl[o] + (fl[o + 2] - fl[o]) * t, fl[o + 1] + (fl[o + 3] - fl[o + 1]) * t, lf * 200 * (1 - 0.6 * abs(t - 0.5)));\n    }\n    const rm = fl[o + 5] * 0.85, cx = fl[o + 6], cy = fl[o + 7];\n    for (let Y = max(0, floor(cy - rm)); Y \u003c= min(H - 1, floor(cy + rm)); Y++)\n      for (let X = max(0, floor(cx - rm)); X \u003c= min(W - 1, floor(cx + rm)); X++) {\n        const d2 = ((X + 0.5 - cx) ** 2 + (Y + 0.5 - cy) ** 2) / (rm * rm);\n        if (d2 >= 1) continue;\n        const w = (1 - d2) * lf * 0.7, q = (Y * W + X) * 3;\n        buf[q] += (col[6] - buf[q] * 0.5) * w;\n        buf[q + 1] += (col[7] - buf[q + 1] * 0.5) * w;\n        buf[q + 2] += (col[8] - buf[q + 2] * 0.5) * w;\n      }\n  }\n  for (let k = 0; k \u003c S.ndr; k++) {\n    const o = k * 5;\n    spot(buf, S.dr[o], S.dr[o + 1], S.dr[o + 4] * 200);\n  }\n  for (let p = 0, Y = 0; Y \u003c H; Y++) for (let X = 0; X \u003c W; X++, p += 3) display.setPixel(X, Y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// White light v shared over the four LEDs round x, y.\nfunction spot(buf, x, y, v) {\n  const X = floor(x - 0.5), Y = floor(y - 0.5), fx = x - 0.5 - X, fy = y - 0.5 - Y;\n  for (let k = 0; k \u003c 4; k++) {\n    const xx = X + (k & 1), yy = Y + (k >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const w = (k & 1 ? fx : 1 - fx) * (k >> 1 ? fy : 1 - fy) * v, q = (yy * W + xx) * 3;\n    buf[q] += w;\n    buf[q + 1] += w;\n    buf[q + 2] += w;\n  }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=0..1, Wetness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the foam, all the way round the colour wheel from sky blue at 0; the walls and the points of light stay nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the foam lives: at 2 it rises about a row a second, a small bubble with four neighbours is gone in about four seconds and a fresh batch is whipped in every fifteen; at 0.2 it all runs ten times slower."},{"name":"Size","min":0,"max":1,"about":"The bubbles of fresh lather, from fine ones four LEDs across at 0 to coarse ones ten across at 1; they about double on the way up."},{"name":"Wetness","min":0,"max":1,"about":"How much liquid the foam holds: near 0 only the bottom sixth is wet and round and the rest dries to a honeycomb of thin walls; at 1 every bubble is a round dome sitting in milky liquid."}],"start":[0,2,0,0.06],"measures":{"motion":0.1524,"detail":0.0833,"edges":0.3017,"complexity":2.5679,"coverage":1,"colour":0.1471,"drift":0.0328},"knobResponse":[0.1783,0.2037,0.1967,0.1202]},{"slug":"ford-circles","title":"Ford Circles","family":"number","round":28,"note":"세운 왼쪽 가장자리가 실수선이고, 분수 p/q 마다 반지름 1/(2q²) 인 원이 그 자리에 기대 서요. 화면은 황금비로 끝없이 들어가고, 맞닿은 두 원 사이의 중간수 자리에 더 작은 원이 자꾸 나와요. K3 이 과녁을 √2, √3, e, π 로 바꾸고, 누르면 스턴-브로코 나무를 따라 과녁까지 내려가는 길이 켜져요.","idea":"The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.","buttons":"K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.","code":"// ===== Patternflow pattern =====\n// Title:   Ford Circles\n// Family:  number\n// Idea:    The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ford circles (Lester R. Ford, 1938) and the Farey sequence (John Farey, 1816), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long.\n// Knob 3: Target. The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one.\n// Knob 4: Fill. Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid.\n// Buttons: K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, log, sin, abs, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Screen rows run down the real line with larger numbers at the top; the\n// target sits in the middle of row 64. Circles narrower than RMIN LEDs are\n// left out, and the window jumps to the next convergent with MARG to spare.\nconst CY = 64.5, TROW = 64, RMIN = 0.28, MARG = 1.08, MAXC = 1200, S0 = 132;\n\n// The continued fractions of the targets, a(i) for i = 0, 1, 2, ... The\n// golden ratio is [1; 1, 1, ...], the square roots of 2 and 3 repeat, e runs\n// [2; 1, 2, 1, 1, 4, 1, 1, 6, ...] and pi is written out to 50 terms. After\n// term 39 for e and 49 for pi the terms start over, so the number the zoom\n// falls into agrees with e and pi to more than 30 decimal places.\nconst PIC = [3, 7, 15, 1, 292, 1, 1, 1, 2, 1, 3, 1, 14, 2, 1, 1, 2, 2, 2, 2, 1, 84, 2, 1, 1, 15, 3, 13, 1, 4, 2, 6, 6, 99, 1, 2, 2, 6, 3, 5, 1, 1, 6, 8, 1, 7, 1, 2, 3, 7];\nconst TG = [\n  () => 1,\n  (i) => (i ? 2 : 1),\n  (i) => (i ? 2 - (i & 1) : 1),\n  (i) => {\n    if (!i) return 2;\n    i = 1 + ((i - 1) % 39);\n    return i % 3 === 2 ? (2 * (i + 1)) / 3 : 1;\n  },\n  (i) => PIC[i \u003c 50 ? i : 1 + ((i - 1) % 49)],\n];\n// [a(i); a(i+1), a(i+2), ...] to double precision.\nfunction tail(a, i) {\n  let v = a(i + 26);\n  for (let j = i + 25; j >= i; j--) v = a(j) + 1 / v;\n  return v;\n}\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\nconst smooth = (a, b, v) => {\n  const u = cl((v - a) / (b - a), 0, 1);\n  return u * u * (3 - 2 * u);\n};\n\n// The window is kept in the frame of the convergents p/q (index n) and\n// p'/q' (index n-1) of the target alpha. The map X -> (pX + p')/(qX + q')\n// sends the Ford circles onto themselves, sends 1/0 and 0/1 to p/q and p'/q',\n// and sends the tail t = [a(n+1); a(n+2), ...] to alpha. A fraction P/Q in\n// that frame lands on the LEDs at s(p/q - alpha) = sig D (P - tQ) / ((P + kQ)(t + k))\n// with radius sig / (2 (P + kQ)^2), where k = q'/q, D = pq' - p'q = +-1 and\n// sig = s/q^2. All of these stay small however deep the zoom goes, so it\n// can run for ever in double precision.\nfunction start(S, tgt) {\n  const a = TG[tgt];\n  S.tgt = tgt;\n  S.a = a;\n  S.n = 0;\n  S.k = 0;\n  S.D = -1;\n  S.lnq = 0;\n  S.t = tail(a, 1);\n  S.sig = max(S0, 64 * MARG * S.t + 1);\n  // p, q, p' and q' modulo 2^32, for each circle's own twinkle.\n  S.pn = a(0);\n  S.pm = 1;\n  S.qn = 1;\n  S.qm = 0;\n  S.fade = 0;\n}\n// The next convergent's frame is used as soon as the window sits wholly\n// between it and the one before: both tangent points off the panel, and the\n// two circles touching beyond the right edge.\nfunction advance(S) {\n  for (let g = 0; g \u003c 8; g++) {\n    const an = S.a(S.n + 1), k2 = 1 / (an + S.k), t2 = tail(S.a, S.n + 2);\n    if (S.sig * k2 * k2 \u003c= 64 * MARG * (t2 + k2)) return;\n    S.sig *= k2 * k2;\n    S.lnq -= log(k2);\n    S.k = k2;\n    S.t = t2;\n    S.D = -S.D;\n    S.n++;\n    const pn = (Math.imul(an, S.pn) + S.pm) | 0, qn = (Math.imul(an, S.qn) + S.qm) | 0;\n    S.pm = S.pn;\n    S.qm = S.qn;\n    S.pn = pn;\n    S.qn = qn;\n  }\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    time: 0, wave: -1, hue: 0, glow: 0.55, depth: 1.8, flat: 0.05,\n    Y: new Float64Array(MAXC), R: new Float64Array(MAXC), Wt: new Float64Array(MAXC),\n    PP: new Int32Array(MAXC), QQ: new Int32Array(MAXC), PA: new Int32Array(MAXC), PB: new Int32Array(MAXC),\n    CV: new Uint8Array(MAXC), PH: new Uint8Array(MAXC), stack: new Int32Array(MAXC * 4), conv: new Float64Array(96),\n    buf: new Float32Array(N * 3), col: [0, 0, 0],\n  });\n  start(S, 0);\n  S.tgt = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.time += d;\n  S.hue = k[0];\n  // Fill lights the inside of each circle in from its rim: a glow a few\n  // LEDs deep at first, then a flat fill under it up to a solid disc.\n  const u = cl(k[3], 0, 1), fk = sqrt(u);\n  S.glow = min(0.55, 2.4 * fk);\n  S.depth = 0.8 + 4 * fk;\n  S.flat = 0.85 * u;\n  const tgt = cl(round(k[2]), 0, 4);\n  if (tgt !== S.tgt) {\n    const first = S.tgt \u003c 0;\n    start(S, tgt);\n    if (first) S.fade = 1;\n  }\n  S.fade = min(1, S.fade + d * 2.5);\n  S.sig *= exp(d * cl(k[1], 0.2, 3) * 0.165);\n  advance(S);\n  if (S.wave >= 0) {\n    S.wave += d;\n    if (S.wave > WT) S.wave = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.wave = 0;\n}\n\n// Every circle that reaches the panel: the two convergents framing the\n// window, then the Stern-Brocot tree between them, each new fraction the\n// mediant of two that touch. A gap whose two tangent points both lie off one\n// end of the panel holds nothing on it, and a mediant too small to see has\n// only smaller ones below it.\nfunction circles(S) {\n  const { Y, R, Wt, PP, QQ, PA, PB, CV, PH, stack, conv } = S;\n  const sig = S.sig, k = S.k, t = S.t, D = S.D, tk = t + k, wmax = sqrt(sig / (2 * RMIN));\n  // The convergents of the tail are the convergents of the target.\n  let nc = 0;\n  for (let j = 0, h1 = 1, k1 = 0, h0 = S.a(S.n + 1), k0 = 1; j \u003c 40 && h0 + k * k0 \u003c= wmax; j++) {\n    conv[nc++] = h0;\n    conv[nc++] = k0;\n    const a = S.a(S.n + 2 + j), h2 = a * h0 + h1, k2 = a * k0 + k1;\n    (h1 = h0), (k1 = k0), (h0 = h2), (k0 = k2);\n  }\n  PP[0] = 0, QQ[0] = 1, Wt[0] = k, CV[0] = 1, PH[0] = 1;\n  if (k > 0) (R[0] = sig / (2 * k * k)), (Y[0] = CY + (D * sig * t) / (k * tk));\n  else (R[0] = 0), (Y[0] = CY + D * 1e30);\n  PP[1] = 1, QQ[1] = 0, Wt[1] = 1, CV[1] = 1, PH[1] = 1, R[1] = sig / 2, Y[1] = CY - (D * sig) / tk;\n  let n = 2, sp = 0;\n  stack[sp++] = 0;\n  stack[sp++] = 1;\n  while (sp > 0 && n \u003c MAXC) {\n    const b = stack[--sp], a = stack[--sp], ya = Y[a], yb = Y[b];\n    if ((ya \u003c -1 && yb \u003c -1) || (ya > H + 1 && yb > H + 1)) continue;\n    const P = PP[a] + PP[b], Q = QQ[a] + QQ[b], w = P + k * Q;\n    if (w > wmax) continue;\n    PP[n] = P, QQ[n] = Q, Wt[n] = w, PA[n] = a, PB[n] = b;\n    R[n] = sig / (2 * w * w);\n    Y[n] = CY - (D * sig * (P - t * Q)) / (w * tk);\n    let c = 0;\n    for (let j = 0; j \u003c nc; j += 2) if (conv[j] === P && conv[j + 1] === Q) c = 1;\n    CV[n] = c;\n    // On the descent to the target: the target lies between the parents.\n    PH[n] = (PP[a] - t * QQ[a]) * (PP[b] - t * QQ[b]) \u003c 0 ? 1 : 0;\n    stack[sp++] = a;\n    stack[sp++] = n;\n    stack[sp++] = n;\n    stack[sp++] = b;\n    n++;\n  }\n  return n;\n}\n\n// The rim is RW LEDs either side of the circle's edge.\nconst RW = 0.85;\n// Colour by denominator: the hue walks HA round the wheel and back as ln q\n// climbs by HL and HL again, so the circles stay on the cool side of the\n// wheel (teal, blue, violet, pink at the start) however deep the zoom goes.\nconst HA = 0.36, HL = 4;\n// The descent's front runs WV units of ln(size) a second; a tap lasts WT s.\nconst WV = 1.8, WT = 5;\nfunction disc(buf, r, yc, cr, cg, cb, ra, ga, gl, fa, cw) {\n  const y0 = max(0, floor(yc - r - 1)), y1 = min(H - 1, floor(yc + r + 1)), x1 = min(W - 1, floor(2 * r + 1)), rw = RW * cw;\n  for (let y = y0; y \u003c= y1; y++) {\n    const dy = y + 0.5 - yc, dy2 = dy * dy;\n    const ady = abs(dy), xs = ady \u003c= r ? dy2 / (r + sqrt(r * r - dy2)) : r;\n    for (let x = max(0, floor(xs - 2)); x \u003c= x1; x++) {\n      const X = x + 0.5, dist = sqrt((X - r) * (X - r) + dy2), d = (X * X - 2 * X * r + dy2) / (dist + r);\n      if (d > rw) {\n        if (X > r) break;\n        continue;\n      }\n      let v = ra * (d > -rw ? 1 - abs(d) / rw : 0);\n      if (d \u003c 0.5) v += cl(0.5 - d, 0, 1) * (fa + ga * exp(d / gl) + (y === TROW ? 0.32 : 0));\n      const p = (y * W + x) * 3;\n      buf[p] += cr * v;\n      buf[p + 1] += cg * v;\n      buf[p + 2] += cb * v;\n    }\n  }\n}\nfunction dot(buf, x, y, v, cr, cg, cb) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = xi + i, py = yi + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = v * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), p = (py * W + px) * 3;\n      buf[p] += cr * w;\n      buf[p + 1] += cg * w;\n      buf[p + 2] += cb * w;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const buf = S.buf, col = S.col, n = circles(S), { Y, R, Wt, PP, QQ, PA, PB, CV, PH } = S;\n  buf.fill(0);\n  // The target's ray. A circle the row through alpha crosses has\n  // |alpha - p/q| \u003c 1/(2q^2), and by Legendre's theorem that makes p/q a\n  // convergent of alpha: the zoom passes through convergents and nothing\n  // else. Convergents get whiter, wider rims; the row lights inside them.\n  for (let x = 0; x \u003c W; x++) {\n    const p = (TROW * W + x) * 3, v = 0.13 * (1 - x / 90);\n    buf[p] += 255 * v;\n    buf[p + 1] += 240 * v;\n    buf[p + 2] += 200 * v;\n  }\n  // After a K1 tap the Stern-Brocot descent into the target lights up: a\n  // front runs from the biggest circles to the smallest and lights each\n  // fraction whose two parents hold the target between them, so the light\n  // hops mediant by mediant, each circle touching the last, down to the\n  // spark on the line. The rest of the window dims while it runs.\n  const on = S.wave >= 0, wf = S.wave * WV - 1.2, wd = on ? smooth(0, 0.3, S.wave) * min(1, (WT - S.wave) / 0.9) : 0;\n  for (let i = 0; i \u003c n; i++) {\n    const r = R[i];\n    if (r \u003c RMIN || (i === 0 && S.k === 0)) continue;\n    const lq = (S.lnq + log(Wt[i])) / HL;\n    hsv(S.hue + 0.5 + HA * abs(lq - 2 * floor(lq / 2 + 0.5)), 0.82, 1, col);\n    let cr = col[0], cg = col[1], cb = col[2], ra = 0.9, cw = 1, ga = S.glow, fa = S.flat;\n    let vis = smooth(RMIN, 1.6, r);\n    if (CV[i]) (cr = cr * 0.65 + 89), (cg = cg * 0.65 + 84), (cb = cb * 0.65 + 70), (ra = 1), (cw = 1.3);\n    if (on && PH[i]) {\n      const lv = log(64 / r), fr = exp(-(((wf - lv) / 0.35) ** 2)), lit = smooth(-0.25, 0.25, wf - lv) * wd;\n      (cr += (255 - cr) * (0.25 * lit + 0.5 * fr)), (cg += (255 - cg) * (0.25 * lit + 0.5 * fr)), (cb += (255 - cb) * (0.25 * lit + 0.5 * fr));\n      (ra += 0.4 * lit + fr), (ga += 0.4 * lit), (fa += 0.12 * lit + 0.35 * fr), (cw += 0.4 * lit);\n    } else vis *= 1 - 0.55 * wd;\n    disc(buf, r, Y[i], cr, cg, cb, ra * vis, ga * vis, S.depth * (1 + 0.1 * min(r, 90)), fa * vis, cw);\n  }\n  // The points where circles touch glint, each at its own pace. Every\n  // tangency on the panel is a mediant touching one of its two parents.\n  const { pn, pm, qn, qm } = S;\n  for (let i = 2; i \u003c n; i++) {\n    const rm = R[i];\n    if (rm \u003c 1.2) continue;\n    const pa = Math.imul(pn, PP[i]) + Math.imul(pm, QQ[i]), qa = Math.imul(qn, PP[i]) + Math.imul(qm, QQ[i]);\n    const fr = on && PH[i] ? 2 * exp(-(((wf - log(64 / rm)) / 0.35) ** 2)) : 0;\n    for (let e = 0; e \u003c 2; e++) {\n      const j = e ? PB[i] : PA[i], rp = R[j];\n      if (j === 0 && S.k === 0) continue;\n      const tx = (2 * rp * rm) / (rp + rm), ty = Y[i] + (Y[j] > Y[i] ? 1 : -1) * ((2 * rm * sqrt(rp * rm)) / (rp + rm));\n      if (tx > W || ty \u003c -1 || ty > H) continue;\n      const h = hash(pa ^ (Math.imul(pn, PP[j]) + Math.imul(pm, QQ[j])), qa ^ (Math.imul(qn, PP[j]) + Math.imul(qm, QQ[j])));\n      const sn = sin(S.time * (1.1 + h * 1.7) + h * 40), g = (0.3 + 0.9 * sn ** 6 + fr) * smooth(1.2, 4, rm);\n      dot(buf, tx - 0.5, ty - 0.5, g * 1.6, 255, 245, 225);\n    }\n  }\n  // The target itself, a spark on the line.\n  dot(buf, 0.25, TROW, 1.4, 255, 250, 235);\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p] * f), min(255, buf[p + 1] * f), min(255, buf[p + 2] * f));\n}\n","layer":{"id":"layer-ford-circles","type":"code","name":"ford-circles","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ford Circles\n// Family:  number\n// Idea:    The real line stands up the left edge with a circle of radius 1/(2q²) resting on every fraction p/q, and the picture zooms for ever into the golden ratio while ever smaller circles keep appearing at the mediants of the ones that touch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ford circles (Lester R. Ford, 1938) and the Farey sequence (John Farey, 1816), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long.\n// Knob 3: Target. The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one.\n// Knob 4: Fill. Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid.\n// Buttons: K1 tap lights the Stern-Brocot descent into the target: from the two convergents framing the window, each mediant whose parents still hold the target between them lights in turn, each smaller and touching the last, down to the spark on the line. The other circles dim for the five seconds it takes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, log, sin, abs, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Screen rows run down the real line with larger numbers at the top; the\n// target sits in the middle of row 64. Circles narrower than RMIN LEDs are\n// left out, and the window jumps to the next convergent with MARG to spare.\nconst CY = 64.5, TROW = 64, RMIN = 0.28, MARG = 1.08, MAXC = 1200, S0 = 132;\n\n// The continued fractions of the targets, a(i) for i = 0, 1, 2, ... The\n// golden ratio is [1; 1, 1, ...], the square roots of 2 and 3 repeat, e runs\n// [2; 1, 2, 1, 1, 4, 1, 1, 6, ...] and pi is written out to 50 terms. After\n// term 39 for e and 49 for pi the terms start over, so the number the zoom\n// falls into agrees with e and pi to more than 30 decimal places.\nconst PIC = [3, 7, 15, 1, 292, 1, 1, 1, 2, 1, 3, 1, 14, 2, 1, 1, 2, 2, 2, 2, 1, 84, 2, 1, 1, 15, 3, 13, 1, 4, 2, 6, 6, 99, 1, 2, 2, 6, 3, 5, 1, 1, 6, 8, 1, 7, 1, 2, 3, 7];\nconst TG = [\n  () => 1,\n  (i) => (i ? 2 : 1),\n  (i) => (i ? 2 - (i & 1) : 1),\n  (i) => {\n    if (!i) return 2;\n    i = 1 + ((i - 1) % 39);\n    return i % 3 === 2 ? (2 * (i + 1)) / 3 : 1;\n  },\n  (i) => PIC[i \u003c 50 ? i : 1 + ((i - 1) % 49)],\n];\n// [a(i); a(i+1), a(i+2), ...] to double precision.\nfunction tail(a, i) {\n  let v = a(i + 26);\n  for (let j = i + 25; j >= i; j--) v = a(j) + 1 / v;\n  return v;\n}\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\nconst smooth = (a, b, v) => {\n  const u = cl((v - a) / (b - a), 0, 1);\n  return u * u * (3 - 2 * u);\n};\n\n// The window is kept in the frame of the convergents p/q (index n) and\n// p'/q' (index n-1) of the target alpha. The map X -> (pX + p')/(qX + q')\n// sends the Ford circles onto themselves, sends 1/0 and 0/1 to p/q and p'/q',\n// and sends the tail t = [a(n+1); a(n+2), ...] to alpha. A fraction P/Q in\n// that frame lands on the LEDs at s(p/q - alpha) = sig D (P - tQ) / ((P + kQ)(t + k))\n// with radius sig / (2 (P + kQ)^2), where k = q'/q, D = pq' - p'q = +-1 and\n// sig = s/q^2. All of these stay small however deep the zoom goes, so it\n// can run for ever in double precision.\nfunction start(S, tgt) {\n  const a = TG[tgt];\n  S.tgt = tgt;\n  S.a = a;\n  S.n = 0;\n  S.k = 0;\n  S.D = -1;\n  S.lnq = 0;\n  S.t = tail(a, 1);\n  S.sig = max(S0, 64 * MARG * S.t + 1);\n  // p, q, p' and q' modulo 2^32, for each circle's own twinkle.\n  S.pn = a(0);\n  S.pm = 1;\n  S.qn = 1;\n  S.qm = 0;\n  S.fade = 0;\n}\n// The next convergent's frame is used as soon as the window sits wholly\n// between it and the one before: both tangent points off the panel, and the\n// two circles touching beyond the right edge.\nfunction advance(S) {\n  for (let g = 0; g \u003c 8; g++) {\n    const an = S.a(S.n + 1), k2 = 1 / (an + S.k), t2 = tail(S.a, S.n + 2);\n    if (S.sig * k2 * k2 \u003c= 64 * MARG * (t2 + k2)) return;\n    S.sig *= k2 * k2;\n    S.lnq -= log(k2);\n    S.k = k2;\n    S.t = t2;\n    S.D = -S.D;\n    S.n++;\n    const pn = (Math.imul(an, S.pn) + S.pm) | 0, qn = (Math.imul(an, S.qn) + S.qm) | 0;\n    S.pm = S.pn;\n    S.qm = S.qn;\n    S.pn = pn;\n    S.qn = qn;\n  }\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    time: 0, wave: -1, hue: 0, glow: 0.55, depth: 1.8, flat: 0.05,\n    Y: new Float64Array(MAXC), R: new Float64Array(MAXC), Wt: new Float64Array(MAXC),\n    PP: new Int32Array(MAXC), QQ: new Int32Array(MAXC), PA: new Int32Array(MAXC), PB: new Int32Array(MAXC),\n    CV: new Uint8Array(MAXC), PH: new Uint8Array(MAXC), stack: new Int32Array(MAXC * 4), conv: new Float64Array(96),\n    buf: new Float32Array(N * 3), col: [0, 0, 0],\n  });\n  start(S, 0);\n  S.tgt = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.time += d;\n  S.hue = k[0];\n  // Fill lights the inside of each circle in from its rim: a glow a few\n  // LEDs deep at first, then a flat fill under it up to a solid disc.\n  const u = cl(k[3], 0, 1), fk = sqrt(u);\n  S.glow = min(0.55, 2.4 * fk);\n  S.depth = 0.8 + 4 * fk;\n  S.flat = 0.85 * u;\n  const tgt = cl(round(k[2]), 0, 4);\n  if (tgt !== S.tgt) {\n    const first = S.tgt \u003c 0;\n    start(S, tgt);\n    if (first) S.fade = 1;\n  }\n  S.fade = min(1, S.fade + d * 2.5);\n  S.sig *= exp(d * cl(k[1], 0.2, 3) * 0.165);\n  advance(S);\n  if (S.wave >= 0) {\n    S.wave += d;\n    if (S.wave > WT) S.wave = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.wave = 0;\n}\n\n// Every circle that reaches the panel: the two convergents framing the\n// window, then the Stern-Brocot tree between them, each new fraction the\n// mediant of two that touch. A gap whose two tangent points both lie off one\n// end of the panel holds nothing on it, and a mediant too small to see has\n// only smaller ones below it.\nfunction circles(S) {\n  const { Y, R, Wt, PP, QQ, PA, PB, CV, PH, stack, conv } = S;\n  const sig = S.sig, k = S.k, t = S.t, D = S.D, tk = t + k, wmax = sqrt(sig / (2 * RMIN));\n  // The convergents of the tail are the convergents of the target.\n  let nc = 0;\n  for (let j = 0, h1 = 1, k1 = 0, h0 = S.a(S.n + 1), k0 = 1; j \u003c 40 && h0 + k * k0 \u003c= wmax; j++) {\n    conv[nc++] = h0;\n    conv[nc++] = k0;\n    const a = S.a(S.n + 2 + j), h2 = a * h0 + h1, k2 = a * k0 + k1;\n    (h1 = h0), (k1 = k0), (h0 = h2), (k0 = k2);\n  }\n  PP[0] = 0, QQ[0] = 1, Wt[0] = k, CV[0] = 1, PH[0] = 1;\n  if (k > 0) (R[0] = sig / (2 * k * k)), (Y[0] = CY + (D * sig * t) / (k * tk));\n  else (R[0] = 0), (Y[0] = CY + D * 1e30);\n  PP[1] = 1, QQ[1] = 0, Wt[1] = 1, CV[1] = 1, PH[1] = 1, R[1] = sig / 2, Y[1] = CY - (D * sig) / tk;\n  let n = 2, sp = 0;\n  stack[sp++] = 0;\n  stack[sp++] = 1;\n  while (sp > 0 && n \u003c MAXC) {\n    const b = stack[--sp], a = stack[--sp], ya = Y[a], yb = Y[b];\n    if ((ya \u003c -1 && yb \u003c -1) || (ya > H + 1 && yb > H + 1)) continue;\n    const P = PP[a] + PP[b], Q = QQ[a] + QQ[b], w = P + k * Q;\n    if (w > wmax) continue;\n    PP[n] = P, QQ[n] = Q, Wt[n] = w, PA[n] = a, PB[n] = b;\n    R[n] = sig / (2 * w * w);\n    Y[n] = CY - (D * sig * (P - t * Q)) / (w * tk);\n    let c = 0;\n    for (let j = 0; j \u003c nc; j += 2) if (conv[j] === P && conv[j + 1] === Q) c = 1;\n    CV[n] = c;\n    // On the descent to the target: the target lies between the parents.\n    PH[n] = (PP[a] - t * QQ[a]) * (PP[b] - t * QQ[b]) \u003c 0 ? 1 : 0;\n    stack[sp++] = a;\n    stack[sp++] = n;\n    stack[sp++] = n;\n    stack[sp++] = b;\n    n++;\n  }\n  return n;\n}\n\n// The rim is RW LEDs either side of the circle's edge.\nconst RW = 0.85;\n// Colour by denominator: the hue walks HA round the wheel and back as ln q\n// climbs by HL and HL again, so the circles stay on the cool side of the\n// wheel (teal, blue, violet, pink at the start) however deep the zoom goes.\nconst HA = 0.36, HL = 4;\n// The descent's front runs WV units of ln(size) a second; a tap lasts WT s.\nconst WV = 1.8, WT = 5;\nfunction disc(buf, r, yc, cr, cg, cb, ra, ga, gl, fa, cw) {\n  const y0 = max(0, floor(yc - r - 1)), y1 = min(H - 1, floor(yc + r + 1)), x1 = min(W - 1, floor(2 * r + 1)), rw = RW * cw;\n  for (let y = y0; y \u003c= y1; y++) {\n    const dy = y + 0.5 - yc, dy2 = dy * dy;\n    const ady = abs(dy), xs = ady \u003c= r ? dy2 / (r + sqrt(r * r - dy2)) : r;\n    for (let x = max(0, floor(xs - 2)); x \u003c= x1; x++) {\n      const X = x + 0.5, dist = sqrt((X - r) * (X - r) + dy2), d = (X * X - 2 * X * r + dy2) / (dist + r);\n      if (d > rw) {\n        if (X > r) break;\n        continue;\n      }\n      let v = ra * (d > -rw ? 1 - abs(d) / rw : 0);\n      if (d \u003c 0.5) v += cl(0.5 - d, 0, 1) * (fa + ga * exp(d / gl) + (y === TROW ? 0.32 : 0));\n      const p = (y * W + x) * 3;\n      buf[p] += cr * v;\n      buf[p + 1] += cg * v;\n      buf[p + 2] += cb * v;\n    }\n  }\n}\nfunction dot(buf, x, y, v, cr, cg, cb) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = xi + i, py = yi + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = v * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), p = (py * W + px) * 3;\n      buf[p] += cr * w;\n      buf[p + 1] += cg * w;\n      buf[p + 2] += cb * w;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const buf = S.buf, col = S.col, n = circles(S), { Y, R, Wt, PP, QQ, PA, PB, CV, PH } = S;\n  buf.fill(0);\n  // The target's ray. A circle the row through alpha crosses has\n  // |alpha - p/q| \u003c 1/(2q^2), and by Legendre's theorem that makes p/q a\n  // convergent of alpha: the zoom passes through convergents and nothing\n  // else. Convergents get whiter, wider rims; the row lights inside them.\n  for (let x = 0; x \u003c W; x++) {\n    const p = (TROW * W + x) * 3, v = 0.13 * (1 - x / 90);\n    buf[p] += 255 * v;\n    buf[p + 1] += 240 * v;\n    buf[p + 2] += 200 * v;\n  }\n  // After a K1 tap the Stern-Brocot descent into the target lights up: a\n  // front runs from the biggest circles to the smallest and lights each\n  // fraction whose two parents hold the target between them, so the light\n  // hops mediant by mediant, each circle touching the last, down to the\n  // spark on the line. The rest of the window dims while it runs.\n  const on = S.wave >= 0, wf = S.wave * WV - 1.2, wd = on ? smooth(0, 0.3, S.wave) * min(1, (WT - S.wave) / 0.9) : 0;\n  for (let i = 0; i \u003c n; i++) {\n    const r = R[i];\n    if (r \u003c RMIN || (i === 0 && S.k === 0)) continue;\n    const lq = (S.lnq + log(Wt[i])) / HL;\n    hsv(S.hue + 0.5 + HA * abs(lq - 2 * floor(lq / 2 + 0.5)), 0.82, 1, col);\n    let cr = col[0], cg = col[1], cb = col[2], ra = 0.9, cw = 1, ga = S.glow, fa = S.flat;\n    let vis = smooth(RMIN, 1.6, r);\n    if (CV[i]) (cr = cr * 0.65 + 89), (cg = cg * 0.65 + 84), (cb = cb * 0.65 + 70), (ra = 1), (cw = 1.3);\n    if (on && PH[i]) {\n      const lv = log(64 / r), fr = exp(-(((wf - lv) / 0.35) ** 2)), lit = smooth(-0.25, 0.25, wf - lv) * wd;\n      (cr += (255 - cr) * (0.25 * lit + 0.5 * fr)), (cg += (255 - cg) * (0.25 * lit + 0.5 * fr)), (cb += (255 - cb) * (0.25 * lit + 0.5 * fr));\n      (ra += 0.4 * lit + fr), (ga += 0.4 * lit), (fa += 0.12 * lit + 0.35 * fr), (cw += 0.4 * lit);\n    } else vis *= 1 - 0.55 * wd;\n    disc(buf, r, Y[i], cr, cg, cb, ra * vis, ga * vis, S.depth * (1 + 0.1 * min(r, 90)), fa * vis, cw);\n  }\n  // The points where circles touch glint, each at its own pace. Every\n  // tangency on the panel is a mediant touching one of its two parents.\n  const { pn, pm, qn, qm } = S;\n  for (let i = 2; i \u003c n; i++) {\n    const rm = R[i];\n    if (rm \u003c 1.2) continue;\n    const pa = Math.imul(pn, PP[i]) + Math.imul(pm, QQ[i]), qa = Math.imul(qn, PP[i]) + Math.imul(qm, QQ[i]);\n    const fr = on && PH[i] ? 2 * exp(-(((wf - log(64 / rm)) / 0.35) ** 2)) : 0;\n    for (let e = 0; e \u003c 2; e++) {\n      const j = e ? PB[i] : PA[i], rp = R[j];\n      if (j === 0 && S.k === 0) continue;\n      const tx = (2 * rp * rm) / (rp + rm), ty = Y[i] + (Y[j] > Y[i] ? 1 : -1) * ((2 * rm * sqrt(rp * rm)) / (rp + rm));\n      if (tx > W || ty \u003c -1 || ty > H) continue;\n      const h = hash(pa ^ (Math.imul(pn, PP[j]) + Math.imul(pm, QQ[j])), qa ^ (Math.imul(qn, PP[j]) + Math.imul(qm, QQ[j])));\n      const sn = sin(S.time * (1.1 + h * 1.7) + h * 40), g = (0.3 + 0.9 * sn ** 6 + fr) * smooth(1.2, 4, rm);\n      dot(buf, tx - 0.5, ty - 0.5, g * 1.6, 255, 245, 225);\n    }\n  }\n  // The target itself, a spark on the line.\n  dot(buf, 0.25, TROW, 1.4, 255, 250, 235);\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p] * f), min(255, buf[p + 1] * f), min(255, buf[p + 2] * f));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Target=0..4, Fill=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. Colour follows the denominator q: at 0 the big circles of small q are teal and the smaller ones blue and violet, and as the zoom reaches larger q the hues swing to pink and back."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by a factor of e every three seconds and a new convergent of the golden ratio comes up every 2.9 s; at 0.2 everything takes ten times as long."},{"name":"Target","min":0,"max":4,"about":"The number the zoom falls into, read from its continued fraction: 0 the golden ratio [1; 1, 1, ...], 1 the square root of 2, 2 the square root of 3, 3 e, 4 pi. Pi stalls for about half a minute at Speed 2 beside 355/113, where its term 292 sits, while a chain of nearly equal circles grows along the edge of one giant one."},{"name":"Fill","min":0,"max":1,"about":"Rims only at 0. At the start each circle glows in from its rim, 2 LEDs deep on a small circle and up to 18 on a giant one; at 1 the discs are solid."}],"start":[0,2,0,0.06],"measures":{"motion":0.6649,"detail":0.0489,"edges":0.4057,"complexity":1.3917,"coverage":0.8005,"colour":0.1799,"drift":0.1998},"knobResponse":[0.1431,0.2105,0.195,0.7368]},{"slug":"fortune-sweep","title":"Fortune's Sweep","family":"algo","round":37,"note":"금색 쓸기 선이 1초에 22줄씩 내려가고, 선 위로 포천의 해변선이 지나간 자리부터 보로노이 그림이 확정돼요. 해변선은 사이트 하나에 포물선 호 하나씩 이어진 목걸이라서, 선이 사이트를 지나면 호가 가시처럼 돋고 세 사이트를 지나는 빈 원이 선에 닿으면 가운데 호가 사라지며 꼭짓점이 금색 점으로 남아요. 지난 그림은 40% 밝기로 아래에서 기다려요. K4 는 가중치를 걸어 모서리를 쌍곡선으로 휘고, 누르면 새 사이트로 바로 다시 쓸어요.","idea":"A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.","buttons":"K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.","code":"// ===== Patternflow pattern =====\n// Title:   Fortune's Sweep\n// Family:  algo\n// Idea:    A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Fortune's sweep-line algorithm for Voronoi diagrams (Steven Fortune, 1986), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1\n//\n// Knob 1: Hue. Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green.\n// Knob 2: Speed. Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s.\n// Knob 3: Sites. How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77.\n// Knob 4: Weights. Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle.\n// Buttons: K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.\n\n// The picture is drawn per LED with no event queue. For a point p above the\n// sweep line at height L (y grows down), let D1(p) be the distance to its\n// nearest site, weighted when Weights is up. p is certain when D1(p) \u003c= L - p.y: no site the line has\n// not reached yet can come closer to p than the line itself. The beach line\n// is D1(p) = L - p.y, and on it the nearest site is always one the line has\n// passed, so the global nearest site is the right one and the diagram's\n// tables are built once a sweep. Only L changes from frame to frame.\n//\n// The circle events come from the diagram's vertices: a point v at weighted\n// distance r from three sites and no nearer to any other. Its event falls\n// at L = v.y + r, when the circle round v touches the sweep line from above.\n// Checked in a scratch script against the beach line worked out from the\n// parabolas themselves, each site's arc being the parabola with the site\n// for focus and y = L + w for directrix: 24 diagrams, four each of 16, 32\n// and 48 sites, unweighted and at full weight, 1,176 events. 26 fell within\n// 0.002 rows of the third site's own arrival or of a neighbouring event and\n// were left out. At each of the other 1,150, just before the event the\n// three sites' arcs lie side by side on the beach line, and just after it\n// the middle one is gone and the other two meet. Half a row before, the\n// arc about to vanish is at most 3 LEDs wide.\n\nconst W = 64, H = 128, N = W * H, MAXS = 48;\nconst { floor, min, max, sqrt, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Rows a second per unit of Speed.\nconst ROWS = 11;\n// The finished diagram holds this long before the next sweep, in seconds.\nconst HOLD = 0.6;\n// A circle event flashes this long, in seconds.\nconst FLASH = 0.6;\n// The last diagram fades to this share of its brightness as the next sweep starts.\nconst DIM = 0.4;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction newSet() {\n  return {\n    sx: new Float32Array(MAXS), sy: new Float32Array(MAXS), sr: new Float32Array(MAXS), sw: new Float32Array(MAXS),\n    pref: new Uint8Array(MAXS), tone: new Uint8Array(MAXS), gh: new Float32Array(MAXS * 3),\n    d1: new Float32Array(N), own: new Uint8Array(N), ed: new Float32Array(N), g1: new Float32Array(N),\n    adj: new Uint8Array(MAXS * MAXS), col: new Float32Array(MAXS * 3), tint: new Float32Array(MAXS * 3),\n    n: 0, wk: -1, hue: NaN, ev: [], evi: 0, lStart: -3, lEnd: 150,\n  };\n}\n\n// Best-candidate sampling, twelve tries a site: every prefix of the 48 is\n// spread about evenly, so Sites can take the first n.\nfunction scatter(S) {\n  for (let i = 0; i \u003c MAXS; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let t = 0, tries = i === 0 ? 1 : 12; t \u003c tries; t++) {\n      const x = 2 + random() * 60, y = 2 + random() * 124;\n      let d = 1e9;\n      for (let j = 0; j \u003c i; j++) {\n        const dx = x - S.sx[j], dy = y - S.sy[j];\n        d = min(d, dx * dx + dy * dy);\n      }\n      if (d > bd) (bd = d), (bx = x), (by = y);\n    }\n    S.sx[i] = bx;\n    S.sy[i] = by;\n    S.sr[i] = random();\n    S.pref[i] = floor(random() * 4);\n  }\n  S.n = 0;\n  S.hue = NaN;\n}\n\n// The vertices of the additively weighted diagram: |v - s| = r + w for the\n// three sites. Subtracting the squared equations pairwise leaves v linear in\n// r, and the first one then gives a quadratic in r. With no weights it is\n// the circumcircle.\nfunction vertices(S, a, b, c, out) {\n  const { sx, sy, sw } = S;\n  const ax = sx[a], ay = sy[a], wa = sw[a];\n  const m11 = 2 * (ax - sx[b]), m12 = 2 * (ay - sy[b]), m21 = 2 * (ax - sx[c]), m22 = 2 * (ay - sy[c]);\n  const det = m11 * m22 - m12 * m21;\n  if (abs(det) \u003c 1e-6) return 0;\n  const aa = ax * ax + ay * ay;\n  const k1 = sw[b] * sw[b] - wa * wa - sx[b] * sx[b] - sy[b] * sy[b] + aa, q1 = 2 * (sw[b] - wa);\n  const k2 = sw[c] * sw[c] - wa * wa - sx[c] * sx[c] - sy[c] * sy[c] + aa, q2 = 2 * (sw[c] - wa);\n  // v = P + Q r\n  const px = (k1 * m22 - m12 * k2) / det, py = (m11 * k2 - k1 * m21) / det;\n  const qx = (q1 * m22 - m12 * q2) / det, qy = (m11 * q2 - q1 * m21) / det;\n  const dx = px - ax, dy = py - ay;\n  const A = qx * qx + qy * qy - 1, B = 2 * (dx * qx + dy * qy - wa), C = dx * dx + dy * dy - wa * wa;\n  let k = 0;\n  const rs = [];\n  if (abs(A) \u003c 1e-9) {\n    if (abs(B) > 1e-9) rs.push(-C / B);\n  } else {\n    const disc = B * B - 4 * A * C;\n    if (disc \u003c 0) return 0;\n    const sq = sqrt(disc);\n    rs.push((-B - sq) / (2 * A), (-B + sq) / (2 * A));\n  }\n  const wmin = min(wa, sw[b], sw[c]);\n  for (const r of rs) {\n    if (r + wmin \u003c -1e-6) continue;\n    const vx = px + qx * r, vy = py + qy * r;\n    let empty = true;\n    for (let l = 0; l \u003c S.n && empty; l++) {\n      if (l === a || l === b || l === c) continue;\n      const ex = vx - sx[l], ey = vy - sy[l];\n      if (sqrt(ex * ex + ey * ey) - sw[l] \u003c r - 1e-4) empty = false;\n    }\n    if (!empty) continue;\n    // Only circles that reach the panel.\n    if (vx + r \u003c 0 || vx - r > W - 1 || vy + r \u003c 0 || vy - r > H - 1) continue;\n    out.push({ t: vy + r, x: vx, y: vy, r, fired: -1e9 });\n    k++;\n  }\n  return k;\n}\n\n// The tables of one diagram: nearest weighted distance, its site, the\n// distance in LEDs to the nearest edge and the slope of D1(p) - (L - p.y),\n// which turns the beach line's level into a distance in LEDs too.\nfunction build(S, n, wk) {\n  S.n = n;\n  S.wk = wk;\n  const wmax = 0.5 * sqrt(N / n) * wk;\n  const { sx, sy, sw, d1, own, ed, g1, adj } = S;\n  for (let i = 0; i \u003c n; i++) sw[i] = wmax * S.sr[i];\n  adj.fill(0);\n  let lEnd = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p - x) / W;\n    let b1 = 1e9, b2 = 1e9, i1 = 0, i2 = 0, r1 = 1, r2 = 1;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = x - sx[i], dy = y - sy[i], r = sqrt(dx * dx + dy * dy), d = r - sw[i];\n      if (d \u003c b1) (b2 = b1), (i2 = i1), (r2 = r1), (b1 = d), (i1 = i), (r1 = r);\n      else if (d \u003c b2) (b2 = d), (i2 = i), (r2 = r);\n    }\n    d1[p] = b1;\n    own[p] = i1;\n    r1 = max(r1, 1e-3);\n    r2 = max(r2, 1e-3);\n    const ux = (x - sx[i1]) / r1, uy = (y - sy[i1]) / r1, vx = (x - sx[i2]) / r2, vy = (y - sy[i2]) / r2;\n    const ge = sqrt((ux - vx) * (ux - vx) + (uy - vy) * (uy - vy));\n    ed[p] = (b2 - b1) / max(0.3, ge);\n    g1[p] = sqrt(ux * ux + (uy + 1) * (uy + 1));\n    if (ed[p] \u003c 1.5) adj[i1 * MAXS + i2] = adj[i2 * MAXS + i1] = 1;\n    if (y + b1 > lEnd) lEnd = y + b1;\n  }\n  S.lEnd = lEnd + 1.5;\n  let ls = -3;\n  for (let i = 0; i \u003c n; i++) ls = min(ls, sy[i] - sw[i] - 1);\n  S.lStart = ls;\n  // Four tones, neighbours apart where the greedy pass manages it.\n  for (let i = 0; i \u003c n; i++) {\n    let used = 0;\n    for (let j = 0; j \u003c i; j++) if (adj[i * MAXS + j]) used |= 1 \u003c\u003c S.tone[j];\n    let t = S.pref[i];\n    for (let k = 0; k \u003c 4; k++) if (!(used & (1 \u003c\u003c ((S.pref[i] + k) & 3)))) {\n      t = (S.pref[i] + k) & 3;\n      break;\n    }\n    S.tone[i] = t;\n  }\n  const ev = [];\n  for (let a = 0; a \u003c n; a++) for (let b = a + 1; b \u003c n; b++) for (let c = b + 1; c \u003c n; c++) vertices(S, a, b, c, ev);\n  // Off-panel vertices whose circle would only touch the line after the\n  // last LED is certain never fire: about one in twelve.\n  S.ev = ev.filter((e) => e.t \u003c= S.lEnd).sort((u, v) => u.t - v.t);\n  S.evi = 0;\n  S.hue = NaN;\n}\n\n// Calm tones round the base hue. Where a tone lands on red, orange or\n// yellow it is paled and lifted, as a dark orange cell reads brown and a\n// dark yellow one olive on the panel; yellow is lifted most.\nconst TONES = [[0, 0.72, 0.52], [0.075, 0.6, 0.46], [-0.085, 0.62, 0.5], [0.025, 0.42, 0.6]];\nconst band = (v, a, b, e) => cl((v - a) / e, 0, 1) * cl((b - v) / e, 0, 1);\nfunction paint(S, hue) {\n  for (let i = 0; i \u003c S.n; i++) {\n    const tn = TONES[S.tone[i]], h = hue + 0.56 + tn[0], hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh;\n    const warm = band(hw, -0.06, 0.3, 0.05), yel = band(hw, 0.08, 0.32, 0.05);\n    hsv(h, tn[1] * (1 - 0.3 * warm - 0.15 * yel), tn[2] + 0.28 * warm + 0.14 * yel, S.col, i * 3);\n    hsv(h, 0.32, 1, S.tint, i * 3);\n    // The waiting diagram is the same tone at 40%, except that a dim\n    // orange or yellow is brown and a dim lime is olive whatever is done to\n    // it, so those ghosts lean to wine below the yellow and to green above.\n    // The turn is a jump: a blend of the two goes through olive again.\n    const gw = band(hw, -0.07, 0.33, 0.04);\n    hsv(h + gw * ((hw \u003c 0.11 ? -0.03 : 0.36) - hw), tn[1] * 0.85, tn[2] * DIM * 1.05, S.gh, i * 3);\n  }\n  S.hue = hue;\n}\n\nfunction startSweep(st) {\n  const t = st.old;\n  st.old = st.cur;\n  st.cur = t;\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  st.L = st.cur.lStart;\n  st.fade = 1;\n  st.hold = 0;\n}\n\nexport function setup(params) {\n  const st = (params.s = {\n    cur: newSet(), old: newSet(), n: 16, wk: 0.06, hue: 0, speed: 2, L: 0, fade: 0, hold: 0, clock: 0,\n    buf: new Float32Array(N * 3), acc: new Float32Array(3), edge: new Float32Array(3), pale: new Float32Array(3),\n  });\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  startSweep(st);\n  // Open a third of the way down a sweep, with the first diagram waiting below.\n  st.L = 36;\n  st.fade = 0;\n  for (const e of st.cur.ev) if (e.t \u003c= st.L) e.fired = -1e9;\n  while (st.cur.evi \u003c st.cur.ev.length && st.cur.ev[st.cur.evi].t \u003c= st.L) st.cur.evi++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const st = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  st.hue = k[0];\n  st.speed = cl(k[1], 0.2, 3);\n  st.clock += d;\n  const n = round(cl(k[2], 16, 48)), wk = cl(k[3], 0, 1);\n  if (n !== st.n || abs(wk - st.wk) > 0.002) {\n    st.n = n;\n    st.wk = wk;\n    // The diagram changes under the sweep: rebuild both, and treat the\n    // events the line has already passed as fixed, without a flash.\n    for (const S of [st.cur, st.old]) build(S, n, wk);\n    const C = st.cur;\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.evi++;\n    st.L = max(st.L, C.lStart);\n  }\n  if (input.btnPressed && input.btnPressed[0]) startSweep(st);\n  const C = st.cur;\n  if (st.fade > 0) st.fade = max(0, st.fade - d / 0.9);\n  if (st.L \u003c C.lEnd) {\n    st.L = min(C.lEnd, st.L + d * st.speed * ROWS);\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.ev[C.evi++].fired = st.clock;\n  } else if ((st.hold += d) >= HOLD) startSweep(st);\n}\n\nexport function draw(display, params) {\n  const st = params.s;\n  if (!st) return;\n  const C = st.cur, O = st.old, L = st.L, buf = st.buf, acc = st.acc, edge = st.edge, pale = st.pale;\n  if (C.hue !== st.hue) paint(C, st.hue);\n  if (O.hue !== st.hue) paint(O, st.hue);\n  // Gold for the line and the circles at Hue 0, opposite the cells.\n  const ah = st.hue + 0.125, ahh = ah - floor(ah);\n  hsv(ah, 0.62 - 0.2 * cl((ahh - 0.2) / 0.1, 0, 1) * cl((0.4 - ahh) / 0.1, 0, 1), 1, acc, 0);\n  hsv(st.hue + 0.56, 0.18, 1, edge, 0);\n  hsv(st.hue + 0.56, 0.1, 1, pale, 0);\n  const fd = st.fade, ok = DIM + (1 - DIM) * fd;\n  const Cc = C.col, Ct = C.tint, Oc = O.col, Og = O.gh;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    // Between the beach line and the sweep line nothing is known yet: the\n    // old diagram shows there at two thirds of its waiting level.\n    const zone = y \u003c L ? 0.62 : 1;\n    // The line is a full row at any L, with a soft second row as it moves.\n    const sw = cl(1 - (abs(y - L) - 0.5) / 0.6, 0, 1);\n    for (let x = 0; x \u003c W; x++, p++) {\n      const oo = O.own[p] * 3, oe = cl(1 - O.ed[p] / 0.9, 0, 1) * 0.75;\n      let r = ((Og[oo] + (Oc[oo] - Og[oo]) * fd) * (1 - oe) + edge[0] * oe * ok) * zone;\n      let g = ((Og[oo + 1] + (Oc[oo + 1] - Og[oo + 1]) * fd) * (1 - oe) + edge[1] * oe * ok) * zone;\n      let b = ((Og[oo + 2] + (Oc[oo + 2] - Og[oo + 2]) * fd) * (1 - oe) + edge[2] * oe * ok) * zone;\n      const f = C.d1[p] - (L - y), dist = f / max(0.5, C.g1[p]);\n      if (dist \u003c 1.2) {\n        const co = C.own[p] * 3, m = cl(0.5 - dist, 0, 1);\n        // Fresh ground just behind the beach line glows and settles over\n        // about four rows.\n        const glow = 0.5 * exp(-max(0, -dist) / 3.5);\n        let nr = Cc[co] + (Ct[co] - Cc[co]) * glow, ng = Cc[co + 1] + (Ct[co + 1] - Cc[co + 1]) * glow, nb = Cc[co + 2] + (Ct[co + 2] - Cc[co + 2]) * glow;\n        const e = cl(1 - C.ed[p] / 0.9, 0, 1) * 0.92;\n        nr += (edge[0] - nr) * e;\n        ng += (edge[1] - ng) * e;\n        nb += (edge[2] - nb) * e;\n        r += (nr - r) * m;\n        g += (ng - g) * m;\n        b += (nb - b) * m;\n        // The arc itself, a pale bright tint of its own site, whitening where\n        // an edge meets it: those meeting points are the breakpoints that\n        // trace the edges down.\n        const a = cl(1 - abs(dist) / 0.8, 0, 1);\n        if (a > 0) {\n          const wh = e * 0.8;\n          r += (Ct[co] + (pale[0] - Ct[co]) * wh - r) * a;\n          g += (Ct[co + 1] + (pale[1] - Ct[co + 1]) * wh - g) * a;\n          b += (Ct[co + 2] + (pale[2] - Ct[co + 2]) * wh - b) * a;\n        }\n      }\n      if (sw > 0) {\n        r += (acc[0] - r) * sw;\n        g += (acc[1] - g) * sw;\n        b += (acc[2] - b) * sw;\n      }\n      buf[p * 3] = r;\n      buf[p * 3 + 1] = g;\n      buf[p * 3 + 2] = b;\n    }\n  }\n  const put = (x, y, r, g, b, a) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    buf[o] += (r - buf[o]) * a;\n    buf[o + 1] += (g - buf[o + 1]) * a;\n    buf[o + 2] += (b - buf[o + 2]) * a;\n  };\n  // Weight circles, faint, for sites that carry more than 1.5 LEDs.\n  for (let i = 0; i \u003c C.n; i++) {\n    const w = C.sw[i];\n    if (w \u003c 1.5) continue;\n    const seen = C.sy[i] - w \u003c= L, a = seen ? 0.3 : 0.22;\n    for (let y = max(0, floor(C.sy[i] - w - 1)); y \u003c= min(H - 1, C.sy[i] + w + 1); y++)\n      for (let x = max(0, floor(C.sx[i] - w - 1)); x \u003c= min(W - 1, C.sx[i] + w + 1); x++) {\n        const dx = x - C.sx[i], dy = y - C.sy[i], q = 1 - abs(sqrt(dx * dx + dy * dy) - w) / 0.6;\n        if (q > 0) put(x, y, pale[0], pale[1], pale[2], a * q);\n      }\n  }\n  // Circle events: the empty circle flashes in the line's colour, touching\n  // the line at its foot, and the vertex it fixes keeps a gold point.\n  for (let j = 0; j \u003c C.evi; j++) {\n    const e = C.ev[j], age = st.clock - e.fired;\n    put(round(e.x), round(e.y), acc[0], acc[1], acc[2], 0.85);\n    if (age >= FLASH) continue;\n    const fa = (1 - age / FLASH) * (1 - age / FLASH), R = e.r;\n    put(round(e.x), round(e.y), 1, 1, 1, fa);\n    for (let y = max(0, floor(e.y - R - 1)); y \u003c= min(H - 1, e.y + R + 1); y++)\n      for (let x = max(0, floor(e.x - R - 1)); x \u003c= min(W - 1, e.x + R + 1); x++) {\n        const dx = x - e.x, dy = y - e.y, q = 1 - abs(sqrt(dx * dx + dy * dy) - R) / 0.65;\n        if (q > 0) put(x, y, acc[0], acc[1], acc[2], q * fa * 0.9);\n      }\n  }\n  // Sites: white once the line has reached them, a dim grey point before.\n  for (let i = 0; i \u003c C.n; i++) {\n    const x = round(C.sx[i]), y = round(C.sy[i]);\n    if (C.sy[i] - C.sw[i] \u003c= L) {\n      put(x, y, 1, 1, 1, 1);\n      put(x - 1, y, 1, 1, 1, 0.35);\n      put(x + 1, y, 1, 1, 1, 0.35);\n      put(x, y - 1, 1, 1, 1, 0.35);\n      put(x, y + 1, 1, 1, 1, 0.35);\n    } else put(x, y, 0.5, 0.5, 0.5, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, round(255 * min(1, buf[p * 3])), round(255 * min(1, buf[p * 3 + 1])), round(255 * min(1, buf[p * 3 + 2])));\n}\n","layer":{"id":"layer-fortune-sweep","type":"code","name":"fortune-sweep","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fortune's Sweep\n// Family:  algo\n// Idea:    A gold sweep line falls down the panel and above it the Voronoi diagram of a scatter of sites becomes certain behind Fortune's beach line, a necklace of parabolic arcs one per site, where a new arc grows from a spike each time the line passes a site and an arc pinches out at each circle event, the empty circle through three sites flashing as it touches the line and a Voronoi vertex is fixed, while the last diagram waits dimmer below for the next sweep.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Fortune's sweep-line algorithm for Voronoi diagrams (Steven Fortune, 1986), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1\n//\n// Knob 1: Hue. Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green.\n// Knob 2: Speed. Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s.\n// Knob 3: Sites. How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77.\n// Knob 4: Weights. Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle.\n// Buttons: K1 tap starts a new sweep at once with new sites, and the diagram so far waits below.\n\n// The picture is drawn per LED with no event queue. For a point p above the\n// sweep line at height L (y grows down), let D1(p) be the distance to its\n// nearest site, weighted when Weights is up. p is certain when D1(p) \u003c= L - p.y: no site the line has\n// not reached yet can come closer to p than the line itself. The beach line\n// is D1(p) = L - p.y, and on it the nearest site is always one the line has\n// passed, so the global nearest site is the right one and the diagram's\n// tables are built once a sweep. Only L changes from frame to frame.\n//\n// The circle events come from the diagram's vertices: a point v at weighted\n// distance r from three sites and no nearer to any other. Its event falls\n// at L = v.y + r, when the circle round v touches the sweep line from above.\n// Checked in a scratch script against the beach line worked out from the\n// parabolas themselves, each site's arc being the parabola with the site\n// for focus and y = L + w for directrix: 24 diagrams, four each of 16, 32\n// and 48 sites, unweighted and at full weight, 1,176 events. 26 fell within\n// 0.002 rows of the third site's own arrival or of a neighbouring event and\n// were left out. At each of the other 1,150, just before the event the\n// three sites' arcs lie side by side on the beach line, and just after it\n// the middle one is gone and the other two meet. Half a row before, the\n// arc about to vanish is at most 3 LEDs wide.\n\nconst W = 64, H = 128, N = W * H, MAXS = 48;\nconst { floor, min, max, sqrt, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Rows a second per unit of Speed.\nconst ROWS = 11;\n// The finished diagram holds this long before the next sweep, in seconds.\nconst HOLD = 0.6;\n// A circle event flashes this long, in seconds.\nconst FLASH = 0.6;\n// The last diagram fades to this share of its brightness as the next sweep starts.\nconst DIM = 0.4;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction newSet() {\n  return {\n    sx: new Float32Array(MAXS), sy: new Float32Array(MAXS), sr: new Float32Array(MAXS), sw: new Float32Array(MAXS),\n    pref: new Uint8Array(MAXS), tone: new Uint8Array(MAXS), gh: new Float32Array(MAXS * 3),\n    d1: new Float32Array(N), own: new Uint8Array(N), ed: new Float32Array(N), g1: new Float32Array(N),\n    adj: new Uint8Array(MAXS * MAXS), col: new Float32Array(MAXS * 3), tint: new Float32Array(MAXS * 3),\n    n: 0, wk: -1, hue: NaN, ev: [], evi: 0, lStart: -3, lEnd: 150,\n  };\n}\n\n// Best-candidate sampling, twelve tries a site: every prefix of the 48 is\n// spread about evenly, so Sites can take the first n.\nfunction scatter(S) {\n  for (let i = 0; i \u003c MAXS; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let t = 0, tries = i === 0 ? 1 : 12; t \u003c tries; t++) {\n      const x = 2 + random() * 60, y = 2 + random() * 124;\n      let d = 1e9;\n      for (let j = 0; j \u003c i; j++) {\n        const dx = x - S.sx[j], dy = y - S.sy[j];\n        d = min(d, dx * dx + dy * dy);\n      }\n      if (d > bd) (bd = d), (bx = x), (by = y);\n    }\n    S.sx[i] = bx;\n    S.sy[i] = by;\n    S.sr[i] = random();\n    S.pref[i] = floor(random() * 4);\n  }\n  S.n = 0;\n  S.hue = NaN;\n}\n\n// The vertices of the additively weighted diagram: |v - s| = r + w for the\n// three sites. Subtracting the squared equations pairwise leaves v linear in\n// r, and the first one then gives a quadratic in r. With no weights it is\n// the circumcircle.\nfunction vertices(S, a, b, c, out) {\n  const { sx, sy, sw } = S;\n  const ax = sx[a], ay = sy[a], wa = sw[a];\n  const m11 = 2 * (ax - sx[b]), m12 = 2 * (ay - sy[b]), m21 = 2 * (ax - sx[c]), m22 = 2 * (ay - sy[c]);\n  const det = m11 * m22 - m12 * m21;\n  if (abs(det) \u003c 1e-6) return 0;\n  const aa = ax * ax + ay * ay;\n  const k1 = sw[b] * sw[b] - wa * wa - sx[b] * sx[b] - sy[b] * sy[b] + aa, q1 = 2 * (sw[b] - wa);\n  const k2 = sw[c] * sw[c] - wa * wa - sx[c] * sx[c] - sy[c] * sy[c] + aa, q2 = 2 * (sw[c] - wa);\n  // v = P + Q r\n  const px = (k1 * m22 - m12 * k2) / det, py = (m11 * k2 - k1 * m21) / det;\n  const qx = (q1 * m22 - m12 * q2) / det, qy = (m11 * q2 - q1 * m21) / det;\n  const dx = px - ax, dy = py - ay;\n  const A = qx * qx + qy * qy - 1, B = 2 * (dx * qx + dy * qy - wa), C = dx * dx + dy * dy - wa * wa;\n  let k = 0;\n  const rs = [];\n  if (abs(A) \u003c 1e-9) {\n    if (abs(B) > 1e-9) rs.push(-C / B);\n  } else {\n    const disc = B * B - 4 * A * C;\n    if (disc \u003c 0) return 0;\n    const sq = sqrt(disc);\n    rs.push((-B - sq) / (2 * A), (-B + sq) / (2 * A));\n  }\n  const wmin = min(wa, sw[b], sw[c]);\n  for (const r of rs) {\n    if (r + wmin \u003c -1e-6) continue;\n    const vx = px + qx * r, vy = py + qy * r;\n    let empty = true;\n    for (let l = 0; l \u003c S.n && empty; l++) {\n      if (l === a || l === b || l === c) continue;\n      const ex = vx - sx[l], ey = vy - sy[l];\n      if (sqrt(ex * ex + ey * ey) - sw[l] \u003c r - 1e-4) empty = false;\n    }\n    if (!empty) continue;\n    // Only circles that reach the panel.\n    if (vx + r \u003c 0 || vx - r > W - 1 || vy + r \u003c 0 || vy - r > H - 1) continue;\n    out.push({ t: vy + r, x: vx, y: vy, r, fired: -1e9 });\n    k++;\n  }\n  return k;\n}\n\n// The tables of one diagram: nearest weighted distance, its site, the\n// distance in LEDs to the nearest edge and the slope of D1(p) - (L - p.y),\n// which turns the beach line's level into a distance in LEDs too.\nfunction build(S, n, wk) {\n  S.n = n;\n  S.wk = wk;\n  const wmax = 0.5 * sqrt(N / n) * wk;\n  const { sx, sy, sw, d1, own, ed, g1, adj } = S;\n  for (let i = 0; i \u003c n; i++) sw[i] = wmax * S.sr[i];\n  adj.fill(0);\n  let lEnd = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p - x) / W;\n    let b1 = 1e9, b2 = 1e9, i1 = 0, i2 = 0, r1 = 1, r2 = 1;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = x - sx[i], dy = y - sy[i], r = sqrt(dx * dx + dy * dy), d = r - sw[i];\n      if (d \u003c b1) (b2 = b1), (i2 = i1), (r2 = r1), (b1 = d), (i1 = i), (r1 = r);\n      else if (d \u003c b2) (b2 = d), (i2 = i), (r2 = r);\n    }\n    d1[p] = b1;\n    own[p] = i1;\n    r1 = max(r1, 1e-3);\n    r2 = max(r2, 1e-3);\n    const ux = (x - sx[i1]) / r1, uy = (y - sy[i1]) / r1, vx = (x - sx[i2]) / r2, vy = (y - sy[i2]) / r2;\n    const ge = sqrt((ux - vx) * (ux - vx) + (uy - vy) * (uy - vy));\n    ed[p] = (b2 - b1) / max(0.3, ge);\n    g1[p] = sqrt(ux * ux + (uy + 1) * (uy + 1));\n    if (ed[p] \u003c 1.5) adj[i1 * MAXS + i2] = adj[i2 * MAXS + i1] = 1;\n    if (y + b1 > lEnd) lEnd = y + b1;\n  }\n  S.lEnd = lEnd + 1.5;\n  let ls = -3;\n  for (let i = 0; i \u003c n; i++) ls = min(ls, sy[i] - sw[i] - 1);\n  S.lStart = ls;\n  // Four tones, neighbours apart where the greedy pass manages it.\n  for (let i = 0; i \u003c n; i++) {\n    let used = 0;\n    for (let j = 0; j \u003c i; j++) if (adj[i * MAXS + j]) used |= 1 \u003c\u003c S.tone[j];\n    let t = S.pref[i];\n    for (let k = 0; k \u003c 4; k++) if (!(used & (1 \u003c\u003c ((S.pref[i] + k) & 3)))) {\n      t = (S.pref[i] + k) & 3;\n      break;\n    }\n    S.tone[i] = t;\n  }\n  const ev = [];\n  for (let a = 0; a \u003c n; a++) for (let b = a + 1; b \u003c n; b++) for (let c = b + 1; c \u003c n; c++) vertices(S, a, b, c, ev);\n  // Off-panel vertices whose circle would only touch the line after the\n  // last LED is certain never fire: about one in twelve.\n  S.ev = ev.filter((e) => e.t \u003c= S.lEnd).sort((u, v) => u.t - v.t);\n  S.evi = 0;\n  S.hue = NaN;\n}\n\n// Calm tones round the base hue. Where a tone lands on red, orange or\n// yellow it is paled and lifted, as a dark orange cell reads brown and a\n// dark yellow one olive on the panel; yellow is lifted most.\nconst TONES = [[0, 0.72, 0.52], [0.075, 0.6, 0.46], [-0.085, 0.62, 0.5], [0.025, 0.42, 0.6]];\nconst band = (v, a, b, e) => cl((v - a) / e, 0, 1) * cl((b - v) / e, 0, 1);\nfunction paint(S, hue) {\n  for (let i = 0; i \u003c S.n; i++) {\n    const tn = TONES[S.tone[i]], h = hue + 0.56 + tn[0], hh = h - floor(h), hw = hh > 0.9 ? hh - 1 : hh;\n    const warm = band(hw, -0.06, 0.3, 0.05), yel = band(hw, 0.08, 0.32, 0.05);\n    hsv(h, tn[1] * (1 - 0.3 * warm - 0.15 * yel), tn[2] + 0.28 * warm + 0.14 * yel, S.col, i * 3);\n    hsv(h, 0.32, 1, S.tint, i * 3);\n    // The waiting diagram is the same tone at 40%, except that a dim\n    // orange or yellow is brown and a dim lime is olive whatever is done to\n    // it, so those ghosts lean to wine below the yellow and to green above.\n    // The turn is a jump: a blend of the two goes through olive again.\n    const gw = band(hw, -0.07, 0.33, 0.04);\n    hsv(h + gw * ((hw \u003c 0.11 ? -0.03 : 0.36) - hw), tn[1] * 0.85, tn[2] * DIM * 1.05, S.gh, i * 3);\n  }\n  S.hue = hue;\n}\n\nfunction startSweep(st) {\n  const t = st.old;\n  st.old = st.cur;\n  st.cur = t;\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  st.L = st.cur.lStart;\n  st.fade = 1;\n  st.hold = 0;\n}\n\nexport function setup(params) {\n  const st = (params.s = {\n    cur: newSet(), old: newSet(), n: 16, wk: 0.06, hue: 0, speed: 2, L: 0, fade: 0, hold: 0, clock: 0,\n    buf: new Float32Array(N * 3), acc: new Float32Array(3), edge: new Float32Array(3), pale: new Float32Array(3),\n  });\n  scatter(st.cur);\n  build(st.cur, st.n, st.wk);\n  startSweep(st);\n  // Open a third of the way down a sweep, with the first diagram waiting below.\n  st.L = 36;\n  st.fade = 0;\n  for (const e of st.cur.ev) if (e.t \u003c= st.L) e.fired = -1e9;\n  while (st.cur.evi \u003c st.cur.ev.length && st.cur.ev[st.cur.evi].t \u003c= st.L) st.cur.evi++;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const st = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  st.hue = k[0];\n  st.speed = cl(k[1], 0.2, 3);\n  st.clock += d;\n  const n = round(cl(k[2], 16, 48)), wk = cl(k[3], 0, 1);\n  if (n !== st.n || abs(wk - st.wk) > 0.002) {\n    st.n = n;\n    st.wk = wk;\n    // The diagram changes under the sweep: rebuild both, and treat the\n    // events the line has already passed as fixed, without a flash.\n    for (const S of [st.cur, st.old]) build(S, n, wk);\n    const C = st.cur;\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.evi++;\n    st.L = max(st.L, C.lStart);\n  }\n  if (input.btnPressed && input.btnPressed[0]) startSweep(st);\n  const C = st.cur;\n  if (st.fade > 0) st.fade = max(0, st.fade - d / 0.9);\n  if (st.L \u003c C.lEnd) {\n    st.L = min(C.lEnd, st.L + d * st.speed * ROWS);\n    while (C.evi \u003c C.ev.length && C.ev[C.evi].t \u003c= st.L) C.ev[C.evi++].fired = st.clock;\n  } else if ((st.hold += d) >= HOLD) startSweep(st);\n}\n\nexport function draw(display, params) {\n  const st = params.s;\n  if (!st) return;\n  const C = st.cur, O = st.old, L = st.L, buf = st.buf, acc = st.acc, edge = st.edge, pale = st.pale;\n  if (C.hue !== st.hue) paint(C, st.hue);\n  if (O.hue !== st.hue) paint(O, st.hue);\n  // Gold for the line and the circles at Hue 0, opposite the cells.\n  const ah = st.hue + 0.125, ahh = ah - floor(ah);\n  hsv(ah, 0.62 - 0.2 * cl((ahh - 0.2) / 0.1, 0, 1) * cl((0.4 - ahh) / 0.1, 0, 1), 1, acc, 0);\n  hsv(st.hue + 0.56, 0.18, 1, edge, 0);\n  hsv(st.hue + 0.56, 0.1, 1, pale, 0);\n  const fd = st.fade, ok = DIM + (1 - DIM) * fd;\n  const Cc = C.col, Ct = C.tint, Oc = O.col, Og = O.gh;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    // Between the beach line and the sweep line nothing is known yet: the\n    // old diagram shows there at two thirds of its waiting level.\n    const zone = y \u003c L ? 0.62 : 1;\n    // The line is a full row at any L, with a soft second row as it moves.\n    const sw = cl(1 - (abs(y - L) - 0.5) / 0.6, 0, 1);\n    for (let x = 0; x \u003c W; x++, p++) {\n      const oo = O.own[p] * 3, oe = cl(1 - O.ed[p] / 0.9, 0, 1) * 0.75;\n      let r = ((Og[oo] + (Oc[oo] - Og[oo]) * fd) * (1 - oe) + edge[0] * oe * ok) * zone;\n      let g = ((Og[oo + 1] + (Oc[oo + 1] - Og[oo + 1]) * fd) * (1 - oe) + edge[1] * oe * ok) * zone;\n      let b = ((Og[oo + 2] + (Oc[oo + 2] - Og[oo + 2]) * fd) * (1 - oe) + edge[2] * oe * ok) * zone;\n      const f = C.d1[p] - (L - y), dist = f / max(0.5, C.g1[p]);\n      if (dist \u003c 1.2) {\n        const co = C.own[p] * 3, m = cl(0.5 - dist, 0, 1);\n        // Fresh ground just behind the beach line glows and settles over\n        // about four rows.\n        const glow = 0.5 * exp(-max(0, -dist) / 3.5);\n        let nr = Cc[co] + (Ct[co] - Cc[co]) * glow, ng = Cc[co + 1] + (Ct[co + 1] - Cc[co + 1]) * glow, nb = Cc[co + 2] + (Ct[co + 2] - Cc[co + 2]) * glow;\n        const e = cl(1 - C.ed[p] / 0.9, 0, 1) * 0.92;\n        nr += (edge[0] - nr) * e;\n        ng += (edge[1] - ng) * e;\n        nb += (edge[2] - nb) * e;\n        r += (nr - r) * m;\n        g += (ng - g) * m;\n        b += (nb - b) * m;\n        // The arc itself, a pale bright tint of its own site, whitening where\n        // an edge meets it: those meeting points are the breakpoints that\n        // trace the edges down.\n        const a = cl(1 - abs(dist) / 0.8, 0, 1);\n        if (a > 0) {\n          const wh = e * 0.8;\n          r += (Ct[co] + (pale[0] - Ct[co]) * wh - r) * a;\n          g += (Ct[co + 1] + (pale[1] - Ct[co + 1]) * wh - g) * a;\n          b += (Ct[co + 2] + (pale[2] - Ct[co + 2]) * wh - b) * a;\n        }\n      }\n      if (sw > 0) {\n        r += (acc[0] - r) * sw;\n        g += (acc[1] - g) * sw;\n        b += (acc[2] - b) * sw;\n      }\n      buf[p * 3] = r;\n      buf[p * 3 + 1] = g;\n      buf[p * 3 + 2] = b;\n    }\n  }\n  const put = (x, y, r, g, b, a) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    buf[o] += (r - buf[o]) * a;\n    buf[o + 1] += (g - buf[o + 1]) * a;\n    buf[o + 2] += (b - buf[o + 2]) * a;\n  };\n  // Weight circles, faint, for sites that carry more than 1.5 LEDs.\n  for (let i = 0; i \u003c C.n; i++) {\n    const w = C.sw[i];\n    if (w \u003c 1.5) continue;\n    const seen = C.sy[i] - w \u003c= L, a = seen ? 0.3 : 0.22;\n    for (let y = max(0, floor(C.sy[i] - w - 1)); y \u003c= min(H - 1, C.sy[i] + w + 1); y++)\n      for (let x = max(0, floor(C.sx[i] - w - 1)); x \u003c= min(W - 1, C.sx[i] + w + 1); x++) {\n        const dx = x - C.sx[i], dy = y - C.sy[i], q = 1 - abs(sqrt(dx * dx + dy * dy) - w) / 0.6;\n        if (q > 0) put(x, y, pale[0], pale[1], pale[2], a * q);\n      }\n  }\n  // Circle events: the empty circle flashes in the line's colour, touching\n  // the line at its foot, and the vertex it fixes keeps a gold point.\n  for (let j = 0; j \u003c C.evi; j++) {\n    const e = C.ev[j], age = st.clock - e.fired;\n    put(round(e.x), round(e.y), acc[0], acc[1], acc[2], 0.85);\n    if (age >= FLASH) continue;\n    const fa = (1 - age / FLASH) * (1 - age / FLASH), R = e.r;\n    put(round(e.x), round(e.y), 1, 1, 1, fa);\n    for (let y = max(0, floor(e.y - R - 1)); y \u003c= min(H - 1, e.y + R + 1); y++)\n      for (let x = max(0, floor(e.x - R - 1)); x \u003c= min(W - 1, e.x + R + 1); x++) {\n        const dx = x - e.x, dy = y - e.y, q = 1 - abs(sqrt(dx * dx + dy * dy) - R) / 0.65;\n        if (q > 0) put(x, y, acc[0], acc[1], acc[2], q * fa * 0.9);\n      }\n  }\n  // Sites: white once the line has reached them, a dim grey point before.\n  for (let i = 0; i \u003c C.n; i++) {\n    const x = round(C.sx[i]), y = round(C.sy[i]);\n    if (C.sy[i] - C.sw[i] \u003c= L) {\n      put(x, y, 1, 1, 1, 1);\n      put(x - 1, y, 1, 1, 1, 0.35);\n      put(x + 1, y, 1, 1, 1, 0.35);\n      put(x, y - 1, 1, 1, 1, 0.35);\n      put(x, y + 1, 1, 1, 1, 0.35);\n    } else put(x, y, 0.5, 0.5, 0.5, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, round(255 * min(1, buf[p * 3])), round(255 * min(1, buf[p * 3 + 1])), round(255 * min(1, buf[p * 3 + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sites=16..48, Weights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the cells, the arcs and the gold of the sweep line round the wheel together. At 0 the cells are sea blue, teal and indigo with gold for the line and the circles; at 0.5 they are coral, peach and sand, lifted so they never read brown, with a blue line, and the waiting diagram leans to wine and green."},{"name":"Speed","min":0.2,"max":3,"about":"Rows a second the sweep line falls, 11 per unit: 22 at 2, so one sweep and its 0.6 s hold take about 7.5 s; at 0.2 a sweep takes over a minute, at 3 about 5 s."},{"name":"Sites","min":16,"max":48,"about":"How many sites each sweep scatters, 16 to 48, spread by best-candidate sampling so cells come out even: about 23 LEDs across at 16 and 13 at 48. Sixteen sites give about 20 circle events a sweep, 48 about 77."},{"name":"Weights","min":0,"max":1,"about":"Additive weights, the distance to site i being |p - s_i| - w_i, which Fortune's 1987 paper sweeps the same way. At 0 plain Voronoi with straight edges; at 0.06 the weights reach 0.7 LED and the edges bend a hair; at 1 they reach 11 LEDs at 16 sites, the edges are hyperbolas, the heavy sites wear a faint circle of their weight and their arcs are born as soon as the line touches the top of that circle."}],"start":[0,2,16,0.06],"measures":{"motion":0.3617,"detail":0.032,"edges":0.4248,"complexity":0.6651,"coverage":1,"colour":0.1845,"drift":0.1987},"knobResponse":[0.2392,0.1674,0.1095,0.0757]},{"slug":"foxfire","title":"Foxfire","family":"fungi","round":19,"note":"밤 숲 바닥 단면에서 뽕나무버섯 균사가 그루터기와 통나무, 흙 속을 기어가며 갈라지고 실을 따라 연둣빛 펄스가 흘러요. 버섯 무리가 돋았다 시들며 숨 쉬듯 빛나고 포자가 위로 떠올라요. K1 을 누르면 피어 있는 갓이 한꺼번에 포자를 뿜어요.","idea":"A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.","buttons":"K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.","code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","layer":{"id":"layer-foxfire","type":"code","name":"foxfire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower."},{"name":"Spores","min":0,"max":1,"about":"How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel."},{"name":"Damp","min":0,"max":1,"about":"How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them."}],"start":[0,2,0,0.06],"measures":{"motion":0.0552,"detail":0.062,"edges":0.4422,"complexity":2.0011,"coverage":0.1963,"colour":0.1249,"drift":0.0326},"knobResponse":[0.0328,0.0383,0.0467,0.0368]},{"slug":"frost","title":"Frost","family":"fractal","round":17,"note":"밤 유리창에 서리 고사리가 아래 틀과 창틀에서 자라 들어와요. 가지는 대각선으로 곧게 뻗어 깃털처럼 곁가지를 내며 반짝이고, 유리 너머로 가로등과 눈발이 흐리게 비치다가 방이 데워지면 가운데부터 녹아 다시 자라요. K1 을 누르면 입김이 가운데를 닦아요.","idea":"Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.","buttons":"K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.","code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","layer":{"id":"layer-frost","type":"code","name":"frost","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun."},{"name":"Rime","min":0,"max":1,"about":"How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame."},{"name":"Glitter","min":0,"max":1,"about":"How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling."}],"start":[0,2,0,0.06],"measures":{"motion":0.0377,"detail":0.1373,"edges":0.4636,"complexity":2.383,"coverage":0.4303,"colour":0.1004,"drift":0.0382},"knobResponse":[0.0509,0.1276,0.1564,0.0602]},{"slug":"funicular","title":"Funicular","family":"rail","round":27,"note":"해 질 녘 산비탈에서 계단꼴 객차 둘이 케이블 하나에 매달려 오르내려요. 호숫가 마을의 역을 떠난 빨간 객차가 오르는 동안 꼭대기 기관실의 큰 바퀴가 돌며 파란 객차가 내려오고, 둘은 중턱의 압트 교행 구간에서 갈라진 선로로 비켜 지나가요. K1 을 끝까지 돌리면 창이 켜진 밤이 되고, 누르면 객차가 바로 떠나요.","idea":"Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.","buttons":"K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.","code":"// ===== Patternflow pattern =====\n// Title:   Funicular\n// Family:  rail\n// Idea:    Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the two-car funicular with an Abt passing loop\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1\n//\n// Knob 1: Dusk. Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit.\n// Knob 2: Speed. At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower.\n// Knob 3: Grade. How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher.\n// Knob 4: Snow. A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel.\n// Buttons: K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i | 0, 374761393) + Math.imul(j | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nconst ridge = (t, s) => 1 - abs(2 * vn(t, s) - 1);\n// True draws only the line: track, cable, cars and stations.\nconst BARE = false;\n\n// Rows of the valley end and the summit end of the track and of the quay. The bullwheel's radius.\nconst YA = 112, YB = 30, QY = 121, R = 5.5;\n// Seconds a run and a stop take at Speed 1.\nconst RUN = 16, DWELL = 6;\n\n// Each colour from blue hour, its first three numbers, to night, its last three.\nconst PAL = {\n  s0:[12,26,82,5,11,42,1,3,12], s1:[44,70,150,14,28,80,3,8,26], s2:[134,118,180,46,52,112,8,16,40],\n  s3:[240,164,124,116,76,100,20,26,52], far:[62,68,122,26,30,70,8,11,28], haze:[112,100,152,46,44,86,12,15,34],\n  fsn:[240,184,198,120,112,160,40,46,76], fsd:[140,144,196,66,70,122,24,30,56], far2:[36,48,90,14,20,50,4,7,18],\n  trL:[44,84,70,22,42,46,9,18,22], trD:[20,44,48,10,22,30,5,10,16], und:[9,22,26,5,11,16,2,5,9],\n  rock:[100,96,126,48,50,80,17,19,30], rockD:[46,46,76,22,24,46,7,9,17], snow:[236,206,222,140,140,180,54,60,88],\n  snowD:[146,156,206,76,84,136,28,34,60], bed:[56,52,54,30,28,32,12,12,15], rail:[190,188,200,120,120,140,70,70,84],\n  slp:[38,32,32,20,17,19,8,7,9], roof:[70,62,66,34,30,36,14,12,16], conc:[120,116,120,60,58,64,26,26,30],\n  stone:[130,122,116,64,60,62,26,24,28], lake:[26,38,92,10,14,40,2,4,12], cLo:[236,150,140,104,72,104,18,20,34],\n  cHi:[98,90,146,34,36,74,8,10,22],\n};\n// Town walls: cream, ochre, pink, blue-grey, white.\nconst HOUSE = [[178, 152, 112], [192, 132, 62], [184, 106, 112], [84, 132, 140], [184, 180, 188]];\nconst WARM = [255, 196, 108], LAMP = [255, 226, 168], STEEL = [224, 220, 206];\nconst LIV = [[206, 34, 30], [34, 84, 196]], DK = [40, 40, 44], TILE = [128, 60, 46];\nconst lerp3 = (p, k, i = k \u003c 0.5 ? 0 : 3, f = k * 2 - i / 3) => [0, 1, 2].map((c) => mix(p[i + c], p[i + 3 + c], f));\n\n// The line for a grade: its ends, its direction u, the normal n to its lower\n// right, the passing loop, and the shape of a car column by column.\nfunction geom(g) {\n  const xA = mix(8, 17, g), xB = mix(50, 43, g), L = hypot(xB - xA, YB - YA);\n  const ux = (xB - xA) / L, uy = (YB - YA) / L, tp = -uy / ux, hb = round(3 * tp + 3.2);\n  const Lca = 10 / ux, aLo = Lca / 2 + 1.5, aHi = L - Lca / 2 - 1.5;\n  const G = { xA, L, ux, uy, nx: -uy, ny: ux, tp, hb, Lca, aLo, aHi, aM: (aLo + aHi) / 2, hs: Lca / 2 + 2, lt: 13, WL: 4.6 };\n  // Columns 0..9: three compartments of three and the end wall, each floor level, so the car climbs in steps.\n  for (const k of [\"ct\", \"cf\", \"cr\"]) G[k] = new Int8Array(10);\n  let vr = 0;\n  for (let c = 0; c \u003c 10; c++) {\n    const fl = floor(-((c > 8 ? 2 : floor(c / 3)) * 3 - 2) * tp) - 2;\n    G.cf[c] = fl; G.ct[c] = fl - hb + 1; G.cr[c] = round(-(c - 4.5) * tp - 0.5);\n    vr = max(vr, -(c - 4.5) * tp - G.ct[c]);\n  }\n  G.VR = vr + 2;\n  // The bullwheel: the cable runs off the top of the track onto its left side.\n  G.wx = xB + 3 * ux + R * G.nx; G.wy = YB + 3 * uy + R * G.ny; G.px = xB - 5;\n  return G;\n}\nconst bump = (G, a) => sm(G.aM - G.hs - G.lt, G.aM - G.hs, a) * (1 - sm(G.aM + G.hs, G.aM + G.hs + G.lt, a));\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F(N * 3), bg: F(N * 3), A: F(N), D: F(N), SK: new Uint8Array(N), tk: new Int32Array(N), ntk: 0,\n    win: new Int32Array(900), wth: F(900), nw: 0, lamp: [], k1: -1, g: -1, k4: -1, G: null, c: {},\n    run: 0, tm: 1, dir: 1, pa: 0, wh: 0, flash: 0, lampsOn: 1, lampF: 300, t: 0, stars: [], fl: [], cx: 40, cl: F(128 * 64), houses: [],\n  });\n  // Clouds: streaks of soft noise in a strip that wraps every 128 columns.\n  const n = (X, y) => 0.6 * vn(X * 0.045, y * 0.22) + 0.4 * vn(X * 0.12 + 5, y * 0.45);\n  for (let i = 0; i \u003c 8192; i++) S.cl[i] = mix(n(i & 127, i >> 7), n((i & 127) + 128, i >> 7), (i & 127) / 128);\n  for (let i = 0; i \u003c 110; i++) S.stars.push({ x: floor(rnd() * W), y: floor(rnd() * 100), b: 0.25 + 0.75 * rnd() ** 2, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 260; i++) S.fl.push({ x: rnd() * W, y: rnd() * H, v: 0.6 + 0.8 * rnd(), ph: rnd() * TAU, z: rnd() });\n  // The town: a row of taller houses up the bank with a church, and a lower row on the quay.\n  for (const [b, i0, h0, hr] of [[QY - 6, 0, 7, 7], [QY - 1, 50, 4, 4]])\n    for (let x = i0 ? -2 : 0, i = i0; x \u003c W; i++) {\n      const ch = !i0 && x > 38 && !S.ch, w = ch ? 5 : 4 + floor(hash(i, 1) * 4);\n      if (ch) S.ch = 1;\n      S.houses.push({ x, b, w, h: ch ? 16 : h0 + floor(hash(i, 2) * hr), c: floor(hash(i, 3) * 5), ch, gab: hash(i, 4) \u003c 0.75 });\n      x += w + (i0 ? 1 + floor(hash(i, 5) * 3) : hash(i, 5) \u003c 0.2 ? 1 : 0);\n    }\n}\n\nfunction build(S, k1, g, k4) {\n  S.k1 = k1; S.g = g; S.k4 = k4; S.nw = 0; S.lamp.length = 0;\n  const G = (S.G = geom(g)), C = S.c, bg = S.bg, o = [0, 0, 0];\n  for (const key in PAL) C[key] = lerp3(PAL[key], k1);\n  const amb = mix(1, 0.3, k1), snl = 30 + 112 * k4 ** 0.75;\n  let ntk = 0;\n  const setc = (c, m = 1) => ((o[0] = c[0] * m), (o[1] = c[1] * m), (o[2] = c[2] * m));\n  const blend = (c, t) => ((o[0] = mix(o[0], c[0], t)), (o[1] = mix(o[1], c[1], t)), (o[2] = mix(o[2], c[2], t)));\n  const ad = (px, py) => [(px - G.xA) * G.ux + (py - YA) * G.uy, (px - G.xA) * G.nx + (py - YA) * G.ny];\n  const dg = (a) => 7 + 6 * bump(G, a) + 1.6 * vn(a * 0.2, 4);\n  const inBed = (a, d, of = G.WL * bump(G, a)) => a >= -1.5 && a \u003c= G.L + 1 && (abs(d + of) \u003c 2.7 || abs(d - of) \u003c 2.7);\n  const f1 = (x) => 46 + 22 * (1 - ridge(x * 0.07 + 3.3, 1.7)) + 3 * vn(x * 0.4, 5);\n  const f2 = (x) => 74 + 12 * (1 - ridge(x * 0.1 + 11, 2.3)) + 2 * vn(x * 0.5, 8);\n  const pk = (x) => 2 + (x \u003c G.px ? (G.px - x) * 2.6 : (x - G.px) * 1.7) + 4 * (vn(x * 0.3, 9) - 0.5);\n  const tl = (x) => 50 + 8 * (vn(x * 0.12, 2) - 0.5);\n  const face = (a, d) => d > -dg(a);\n  // Rock with strata and snow lying in the gullies.\n  const rock = (px, py, side) => {\n    const fa = vn(px * 0.16 + 3, py * 0.07), lit = side > 0 ? fa > 0.32 : fa > 0.72;\n    setc(lit ? C.rock : C.rockD, 0.82 + 0.3 * vn(px * 0.4, py * 0.2));\n    const st = ((py * 0.8 - px * 0.5 + 4 * vn(px * 0.08, py * 0.08)) / 5) % 1;\n    if (st \u003c 0.16) blend(C.rockD, 0.7);\n    const sn = sm(0.56, 0.66, 0.6 * vn(px * 0.3 + 5, py * 0.12) + 0.4 * vn(px * 0.8, py * 0.35) + (snl - py) / 160 + k4 * 0.5 - (st \u003c 0.3 ? 0.1 : 0));\n    if (sn > 0) blend(lit ? C.snow : C.snowD, sn);\n  };\n  // Firs on a jittered grid of cells three wide and four tall, the nearest in front.\n  const tree = (px, py) => {\n    const cx = floor(px / 3), cy = floor(py / 4);\n    let best = -1, tx = 0, ty = 0, th = 0;\n    for (let j = 0; j \u003c 3; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const X = cx + i, Y = cy - j, ax = (X + 0.2 + 0.6 * hash(X, Y)) * 3, ay = (Y + hash(Y, X + 7)) * 4, hh = 4 + 3 * hash(X + 3, Y);\n        if (py \u003c ay || py > ay + hh || abs(px - ax) > (py - ay) * 0.45 + 0.35 || ay + hh \u003c= best) continue;\n        const [ra, rd] = ad(ax, ay + hh);\n        if (!face(ra, rd) || inBed(ra, rd) || ay + hh \u003c tl(ax) || ay + hh > QY - 6) continue;\n        (best = ay + hh), (tx = ax), (ty = ay), (th = hh);\n      }\n    if (best \u003c 0) return 0;\n    setc(px \u003c tx ? C.trL : C.trD, 0.85 + 0.3 * hash(floor(tx), floor(ty)));\n    if (ty + th \u003c snl + 6 * (hash(floor(tx), 3) - 0.5) && py - ty \u003c th * 0.55) blend(C.snow, 0.75);\n    return 1;\n  };\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = y * W + x, px = x + 0.5, py = y + 0.5, [a, d] = ad(px, py);\n      S.A[k] = a; S.D[k] = d; S.SK[k] = 0;\n      // Sky: blue overhead going lavender lower down, with a peach glow behind the far peaks in the west.\n      const t = py / 104, s = t \u003c 0.4 ? 0 : t \u003c 0.76 ? 1 : 2, ft = s ? (t - [0, 0.4, 0.76][s]) / (s > 1 ? 0.24 : 0.36) : t / 0.4;\n      const sa = [C.s0, C.s1, C.s2][s], sb = [C.s1, C.s2, C.s3][s];\n      for (let c = 0; c \u003c 3; c++) o[c] = mix(sa[c], sb[c], sm(0, 1, ft));\n      blend(C.s3, 0.35 * exp(-max(0, 100 - py) / 18) * (1 - px / 90));\n      let sky = 1;\n      if (py >= f1(px)) {\n        // The far range in haze, snow on the peaks that stand highest.\n        const top = f1(px), lit = f1(px + 1) >= f1(px - 1);\n        setc(C.far); blend(C.haze, cl((py - top) / 28, 0, 0.8));\n        const sd = sm(0.5, 0.62, 0.55 * vn(px * 0.7, py * 0.3) + 0.45 * vn(px * 1.6, py * 0.8) + (54 - py) / 14 + k4 * 0.5);\n        if (sd > 0) blend(lit ? C.fsn : C.fsd, sd);\n        sky = 0;\n      }\n      if (py >= f2(px)) {\n        setc(C.far2, 0.85 + 0.25 * vn(px * 0.6, py * 0.6));\n        blend(C.haze, cl((py - f2(px)) / 30, 0, 0.35));\n        if (k4 > 0.3 && py \u003c f2(px) + 3 * k4 + 1) blend(C.snowD, 0.6 * k4);\n        sky = 0;\n      }\n      if (py >= pk(px)) (sky = 0), rock(px, py, px \u003c G.px ? 1 : -1);\n      if (face(a, d) && py \u003c QY) {\n        sky = 0;\n        if (py \u003c tl(px)) rock(px, py, d \u003c 2 || vn(px * 0.2, py * 0.2) > 0.5 ? 1 : -1);\n        else if (!tree(px, py)) setc(C.und, 0.8 + 0.4 * hash(x, y)), blend(C.snowD, 0.75 * sm(4, -4, py - snl + 6 * vn(px * 0.3, py * 0.1)));\n      } else if (py \u003c QY && py > 30 && d > -dg(a) - 8 && tree(px, py)) sky = 0;\n      S.SK[k] = sky;\n      if (BARE) setc(o, 0);\n      // The track bed: gravel, sleepers, two rails a track, rollers between them.\n      if (inBed(a, d)) {\n        const of = G.WL * bump(G, a), best = min(abs(d - of), abs(d + of));\n        setc(C.bed, 0.94 + 0.12 * hash(x * 7, y * 3));\n        if (best \u003c 2.2 && (a / 2.4) % 1 \u003c 0.4) blend(C.slp, 0.4);\n        if (best \u003c 0.6 && (a / 6) % 1 \u003c 0.2) setc(C.rail, 0.35);\n        if (abs(abs(d - of) - 1.8) \u003c 0.56 || abs(abs(d + of) - 1.8) \u003c 0.56) setc(C.rail, 0.9 + 0.1 * hash(x, y));\n        S.tk[ntk++] = k;\n      }\n      bg[k * 3] = o[0]; bg[k * 3 + 1] = o[1]; bg[k * 3 + 2] = o[2];\n    }\n  S.ntk = ntk;\n  const put = (x, y, c, t = 1, m = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    for (let i = 0, k = (y * W + x) * 3; i \u003c 3; i++) bg[k + i] = mix(bg[k + i], c[i] * m, t);\n  };\n  const glow = (x, y, s) => {\n    for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) put(x + i, y + j, LAMP, s * exp(-(i * i + j * j) / 1.44));\n    put(x, y, LAMP);\n  };\n  // A crescent moon once it is dark.\n  const mo = sm(0.45, 0.85, k1);\n  if (mo > 0 && !BARE)\n    for (let y = 6; y \u003c 22; y++)\n      for (let x = 6; x \u003c 22; x++) {\n        const r1 = hypot(x + 0.5 - 14, y + 0.5 - 13), m = cl(4.3 - r1, 0, 1) * cl(hypot(x + 0.5 - 16.2, y + 0.5 - 11.8) - 3.6, 0, 1);\n        if (!S.SK[y * W + x]) continue;\n        if (m > 0) put(x, y, [236, 230, 196], m * mo);\n        else if (r1 \u003c 10) put(x, y, [70, 76, 110], 0.5 * mo * exp(-(r1 - 4) / 2.5));\n      }\n\n  // The town, the back row stopping short of the valley station.\n  const town = (front) => {\n    if (BARE) return;\n    for (const h of S.houses) {\n      if ((h.b === QY - 1) !== front || (h.x + h.w > G.xA - 9 && h.x \u003c (front ? G.xA - 1 : G.xA + (G.Lca + 6) * G.ux))) continue;\n      const base = h.b, top = base - h.h, m = amb * (front ? 0.88 : 0.7), sn = snl > base - 3;\n      for (let x = h.x; x \u003c min(W, h.x + h.w); x++) {\n        for (let y = top; y \u003c= base; y++) put(x, y, HOUSE[h.c], 1, m * (x === h.x + h.w - 1 ? 0.72 : 1));\n        const rr = h.gab ? h.w / 2 + 0.5 - abs(x + 0.5 - (h.x + h.w / 2)) : 1;\n        for (let y = floor(top - rr); y \u003c top; y++) put(x, y, sn ? C.snow : h.c & 1 ? TILE : [64, 68, 88], 1, sn ? 1 : m);\n      }\n      if (h.ch) {\n        for (let y = top - 9; y \u003c top - 2; y++) for (let i = -1; i \u003c 2; i++) (!i || y > top - 6) && put(h.x + 2 + i, y, C.roof, 1, 1.4);\n        put(h.x + 2, top + 2, [250, 236, 190], 1, 0.9);\n      }\n      for (let wy = base - 2; wy > top + 1 + (h.ch ? 3 : 0); wy -= 3)\n        for (let wx = h.x + 1; wx \u003c h.x + h.w - 1; wx += 2) if (S.nw \u003c 900) (S.win[S.nw] = wy * W + wx), (S.wth[S.nw++] = hash(wx, wy)), put(wx, wy, [30, 24, 30], 1, amb + 0.3);\n    }\n  };\n  town(false);\n  // Stations: a tiled roof on pillars over the platform where a car stands, lit underneath.\n  const yT = (px) => YA - (px - G.xA) * G.tp;\n  const shed = (a0, a1) => {\n    const x0 = floor(G.xA + a0 * G.ux), x1 = ceil(G.xA + a1 * G.ux);\n    for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n      const px = x + 0.5, ac = (px - G.xA) / G.ux, ty = yT(px), end = x === x0 || x === x1 || x === round((x0 + x1) / 2);\n      if (ac \u003c a0 || ac > a1) continue;\n      for (let y = floor(ty - G.VR - 4); y \u003c= ceil(ty + 6); y++) {\n        const v = ty - (y + 0.5);\n        if (v > G.VR && v \u003c= G.VR + 3.4) v > G.VR + 2.3 ? put(x, y, y \u003c snl ? C.snow : [150, 76, 58], 1, y \u003c snl ? 1.1 : amb) : put(x, y, [118, 54, 42], 1, amb * (v > G.VR + 1.2 ? 1 : 0.55));\n        else if (v > 0.6 && v \u003c= G.VR) end ? put(x, y, [46, 42, 46]) : put(x, y, LAMP, 0.06 + 0.3 * exp(-(G.VR - v) / 4));\n        else if (v \u003c= 0.6 && v > -5.5 && !inBed(...ad(px, y + 0.5))) put(x, y, y % 3 ? C.conc : C.roof), put(x, y, LAMP, 0.18 + 0.12 * k1);\n      }\n    }\n    for (const f of [0.3, 0.72]) {\n      const px = G.xA + mix(a0, a1, f) * G.ux;\n      glow(floor(px), floor(yT(px) - G.VR + 1), 0.3 + 0.3 * k1);\n    }\n  };\n  shed(-2.5, G.Lca + 4.5);\n  shed(G.L - G.Lca - 4.5, G.L + 1.5);\n  // The valley station hall left of the track, an arched window over a lit door on the quay.\n  const vx0 = max(0, floor(G.xA - 9)), vx1 = floor(G.xA) - 1, vy0 = YA - 12, vc = (vx1 + 1 + max(vx0, G.xA - 9)) / 2;\n  for (let x = vx0; x \u003c= vx1; x++) {\n    for (let y = vy0; y \u003c QY; y++) put(x, y, HOUSE[0], 1, amb * (x === vx1 ? 0.7 : 0.95));\n    for (let y = floor(vy0 - 5.5 + abs(x + 0.5 - vc) * 1.2); y \u003c vy0; y++) put(x, y, y \u003c snl ? C.snow : TILE, 1, y \u003c snl ? 1 : amb);\n  }\n  for (let y = vy0 + 2; y \u003c QY; y++)\n    for (let x = floor(vc - 1.5); x \u003c vc + 1.5; x++)\n      if (y \u003c vy0 + 9 ? y > vy0 + 2 || abs(x + 0.5 - vc) \u003c 1 : y >= QY - 4 && abs(x + 0.5 - vc) \u003c 1) put(x, y, WARM, 0.92, mix(0.85, 1, k1));\n  town(true);\n\n  // The engine house on the summit, with the bullwheel behind its lit round window.\n  const ex0 = floor(G.wx - 8), ey0 = floor(G.wy - 8);\n  for (let y = ey0 - 6; y \u003c= G.wy + 8; y++)\n    for (let x = ex0; x \u003c W; x++) {\n      const rh = y - (ey0 - 6 + abs(x + 0.5 - G.wx) * 0.62), r = hypot(x + 0.5 - G.wx, y + 0.5 - G.wy);\n      if (r \u003c R + 1.2) put(x, y, [255, 200, 120], 1, mix(0.9, 1, k1) * (1 - 0.15 * r / R));\n      else if (y \u003c ey0) rh >= 0 && put(x, y, k4 > 0.05 && rh \u003c 1.2 ? C.snow : C.roof, 1, 1.2);\n      else put(x, y, C.stone, 1, (0.85 + 0.15 * (((y >> 1) + (x >> 2)) & 1)) * (x === ex0 ? 0.6 : 1));\n    }\n  // Lamps on posts beside the line, every nine steps.\n  for (let a = 7; a \u003c G.L - 6; a += 9) {\n    const of = G.WL * bump(G, a) + 5.6, lx = floor(G.xA + a * G.ux + of * G.nx), ly = floor(YA + a * G.uy + of * G.ny);\n    put(lx, ly + 1, DK), put(lx, ly + 2, DK), S.lamp.push(lx, ly, a);\n  }\n  if (!BARE)\n    for (let x = 0; x \u003c W; x++) {\n      put(x, QY, C.stone, 1, 0.8);\n      if (x % 8 === 4) put(x, QY - 1, DK), put(x, QY - 2, DK), glow(x, QY - 3, 0.12 + 0.25 * k1);\n    }\n}\n\n// Along a run the cars speed up for the first seventh and slow down for the last.\nfunction prof(t) {\n  const ta = 0.14, v = 1 / (1 - ta);\n  return t \u003c ta ? (v * t * t) / (2 * ta) : t \u003c 1 - ta ? v * (t - ta / 2) : 1 - (v * (1 - t) * (1 - t)) / (2 * ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues, h = min(dt, 0.1), sp = cl(kv[1], 0.2, 3) / 2, bp = input.btnPressed;\n  const k1 = cl(kv[0], 0, 1), g = cl(kv[2], 0, 1), k4 = cl(kv[3], 0, 1);\n  if (abs(k1 - S.k1) > 0.003 || abs(g - S.g) > 0.003 || abs(k4 - S.k4) > 0.003) build(S, k1, g, k4);\n  if (bp[0]) S.run ? (S.flash = 1) : (S.tm = min(S.tm, 0.8));\n  if (bp[1]) (S.lampsOn = 1 - S.lampsOn), (S.lampF = -10);\n  S.lampF += h * 40;\n  S.cx += h * sp * 3.6;\n  S.flash = max(0, S.flash - h);\n  S.t += h * sp;\n  const was = S.pa;\n  if (!S.run) {\n    S.tm -= h * sp * 2;\n    if (S.tm \u003c= 0) (S.run = 1), (S.tm = 0);\n  } else {\n    S.tm = min(1, S.tm + (h * sp * 2) / RUN);\n    S.pa = S.dir > 0 ? prof(S.tm) : 1 - prof(S.tm);\n    if (S.tm >= 1) (S.run = 0), (S.tm = DWELL), (S.dir = -S.dir);\n  }\n  S.wh += ((S.pa - was) * (S.G.aHi - S.G.aLo)) / R;\n  for (const q of S.fl) {\n    q.y += h * (6 + 12 * q.z) * q.v;\n    q.x = (q.x + h * (2.5 * sin(S.t * 0.7 + q.ph) - 1.5) + W) % W;\n    if (q.y > H) (q.y -= H + 2), (q.x = rnd() * W);\n  }\n}\n\nfunction drawCar(S, f, ac, side, liv, up, k1) {\n  const G = S.G, o = side * G.WL * bump(G, ac), Px = G.xA + ac * G.ux + o * G.nx, Py = YA + ac * G.uy + o * G.ny;\n  const x0 = round(Px - 5), ay = round(Py - (x0 + 5 - Px) * G.tp), hb = G.hb, lm = mix(1, 0.5, k1), fl = S.flash > 0 && (S.flash * 6) % 1 \u003c 0.5;\n  for (let c = 0; c \u003c 10; c++) {\n    const x = x0 + c, glass = c % 3 && c \u003c 9, b = c > 8 ? 2 : floor(c / 3);\n    if (x \u003c 0 || x >= W) continue;\n    for (let r = G.ct[c]; r \u003c= G.cr[c]; r++) {\n      const y = ay + r, rr = r - G.ct[c], q = (y * W + x) * 3;\n      if (y \u003c 0 || y >= H) continue;\n      let [cr, cg, cb] = liv, m = lm;\n      if (r === G.cr[c]) (cr = cg = cb = c === 1 || c === 8 ? 20 : 68);\n      else if (r > G.cf[c]) m *= 0.62;\n      else if (rr === 0) (cr = 210), (cg = 206), (cb = 196);\n      else if (rr === hb - 3) {\n        (cr = 228), (cg = 214), (cb = 180);\n        if (c === (up ? 9 : 0)) (cr = 255), (cg = 250), (cb = fl ? 120 : 220), (m = 1);\n        if (c === (up ? 0 : 9)) (cr = 255), (cg = 30), (cb = 20), (m = 1);\n      } else if (glass && rr >= 2 && rr \u003c= hb - 4) {\n        // Lit windows, a passenger's head and shoulders in some.\n        const head = rr >= hb - 5 && c % 3 === 1 + (hash(b, liv[2]) \u003c 0.5) && hash(b * 3, liv[2]) \u003c 0.7;\n        (cr = head ? 60 : 255), (cg = head ? 40 : 214), (cb = head ? 36 : 150), (m = 1);\n      }\n      f[q] = cr * m; f[q + 1] = cg * m; f[q + 2] = cb * m;\n    }\n  }\n  // The headlamp's beam on the track ahead.\n  const dr = up ? 1 : -1, ae = ac + (dr * G.Lca) / 2, bs = mix(0.16, 0.36, k1) * (fl ? 2.5 : 1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], s = (S.A[k] - ae) * dr, w = abs(S.D[k] - side * G.WL * bump(G, S.A[k])) - 0.8 - s * 0.08, e = bs * (1 - s / 15) ** 2 * cl(1 - w, 0, 1);\n    if (s >= 0 && s \u003c 15) (f[k * 3] += 255 * e), (f[k * 3 + 1] += 236 * e), (f[k * 3 + 2] += 190 * e);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S.G) build(S, 0, 0, 0.06);\n  const G = S.G, f = S.f, k1 = S.k1, k4 = S.k4, t = S.t, C = S.c;\n  f.set(S.bg);\n  if (!BARE) {\n    // Stars come out as it gets dark; the evening star is there from the start.\n    const sv = sm(0.1, 0.7, k1);\n    for (const s of S.stars) {\n      const k = s.y * W + s.x, e = sv * s.b * (0.7 + 0.3 * sin(time * (2 + s.ph / 3) + s.ph)) * (1 - s.y / 130);\n      if (S.SK[k]) (f[k * 3] += 220 * e), (f[k * 3 + 1] += 224 * e), (f[k * 3 + 2] += 240 * e);\n    }\n    // Two bands of cloud drifting east, lit underneath while the glow lasts.\n    const ox = floor(S.cx), fx = S.cx - ox;\n    for (let y = 2; y \u003c 62; y++) {\n      const band = exp(-(((y - 12) / 7) ** 2)) + 0.9 * exp(-(((y - 38) / 8) ** 2)), i0 = y * 128;\n      for (let x = 0; x \u003c W; x++) {\n        if (!S.SK[y * W + x] || band \u003c 0.05) continue;\n        const d0 = mix(S.cl[i0 + ((x - ox) & 127)], S.cl[i0 + ((x - ox - 1) & 127)], fx), d1 = S.cl[min(63, y + 2) * 128 + ((x - ox) & 127)];\n        const e = sm(0.44, 0.68, d0 * 0.8 + band * 0.44 - 0.1) * 0.9, lit = cl(0.45 + (d0 - d1) * 3 + (y - 30) / 60, 0, 1), q = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) f[q + c] = mix(f[q + c], mix(C.cHi[c], C.cLo[c], lit), e);\n      }\n    }\n    const vk = (52 * W + 11) * 3;\n    if (S.SK[vk / 3]) (f[vk] += 255), (f[vk + 1] += 246), (f[vk + 2] += 220);\n    // Windows in town: more lit as night comes, now and then one going on or off.\n    const pl = mix(0.42, 0.86, k1);\n    for (let i = 0; i \u003c S.nw; i++) {\n      const th = S.wth[i], k = S.win[i] * 3, m = 0.8 + 0.2 * hash(i, 9);\n      if (th \u003c pl + 0.05 * sin(t * 0.4 + th * 60)) (f[k] = WARM[0] * m), (f[k + 1] = WARM[1] * m), (f[k + 2] = WARM[2] * m);\n    }\n  }\n  // Lamps along the line.\n  for (let i = 0; i \u003c S.lamp.length; i += 3) {\n    const [x, y, a] = S.lamp.slice(i, i + 3), e = mix(0.55, 1, k1) * (S.lampsOn ? cl((S.lampF - a) / 4, 0, 1) : 1 - cl((S.lampF - G.L + a) / 4, 0, 1));\n    for (let j = -2; j \u003c= 2; j++)\n      for (let ii = -2, q = ((y + j) * W + x - 2) * 3; ii \u003c= 2; ii++, q += 3) {\n        const g = j || ii ? e * 0.35 * mix(0.3, 1, k1) * exp(-(ii * ii + j * j) / 2) : e;\n        if (x + ii >= 0 && x + ii \u003c W) for (let c = 0; c \u003c 3; c++) f[q + c] += LAMP[c] * g;\n      }\n  }\n  // The cable: a strand from each car up to the bullwheel, its lay sliding with it.\n  const aA = mix(G.aLo, G.aHi, S.pa), aB = G.aLo + G.aHi - aA, lm = mix(1, 0.55, k1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], a = S.A[k], d = S.D[k], of = G.WL * bump(G, a);\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const ac = s \u003c 0 ? aA : aB;\n      if (a \u003c ac + G.Lca / 2 - 0.5 || a > G.L + 2 || abs(d - s * of - s * 0.25) >= 0.55) continue;\n      const tx = (0.5 + 0.5 * cos((TAU * (a - ac)) / 3)) ** 2;\n      for (let c = 0; c \u003c 3; c++) f[k * 3 + c] = mix([78, 72, 70][c], STEEL[c], tx) * lm;\n      break;\n    }\n  }\n  // The cars: red on the upper track of the loop, blue on the lower.\n  const upA = S.run ? S.dir > 0 : S.dir \u003c 0;\n  drawCar(S, f, aA, -1, LIV[0], upA, k1);\n  drawCar(S, f, aB, 1, LIV[1], !upA, k1);\n  // The bullwheel turning behind the round window, six spokes on a hub.\n  for (let y = floor(G.wy - R - 1); y \u003c= G.wy + R + 1; y++)\n    for (let x = floor(G.wx - R - 1); x \u003c= min(W - 1, G.wx + R + 1); x++) {\n      const dx = x + 0.5 - G.wx, dy = y + 0.5 - G.wy, r = hypot(dx, dy), an = atan2(dy, dx) - S.wh;\n      const m = ((an % (PI / 3)) + PI / 3) % (PI / 3), sd = r * sin(min(m, PI / 3 - m));\n      if (r \u003c= R + 0.6 && (abs(r - R + 0.7) \u003c 0.75 || (r \u003c R - 1 && sd \u003c 0.5) || r \u003c 1.4)) f.set([34, 28, 30], (y * W + x) * 3);\n    }\n  // The lake: the quay and the town upside down, rippling.\n  if (!BARE)\n    for (let y = QY + 1; y \u003c H; y++) {\n      const dy = y - QY, sh = round(0.8 * sin(t * 0.9 + y * 1.3)), m = (0.95 - dy * 0.08) / 255;\n      for (let x = 0; x \u003c W; x++) for (let c = 0, q = (y * W + x) * 3, p = ((QY - dy) * W + cl(x + sh, 0, W - 1)) * 3; c \u003c 3; c++) f[q + c] = C.lake[c] * (1 + (y & 1) * 0.2) + f[p + c] ** 2 * m;\n    }\n  // Falling snow.\n  const nf = floor(cl((k4 - 0.1) / 0.9, 0, 1) * 260), sc = mix(235, 120, k1);\n  for (let i = 0; i \u003c nf; i++) {\n    const q0 = S.fl[i], q = (floor(q0.y) * W + floor(q0.x)) * 3, e = 0.45 + 0.55 * q0.z;\n    if (q0.y >= 0 && q0.y \u003c H) (f[q] = mix(f[q], sc, e)), (f[q + 1] = mix(f[q + 1], sc, e)), (f[q + 2] = mix(f[q + 2], sc * 1.06, e));\n  }\n  for (let k = 0, j = 0; k \u003c N; k++, j += 3) display.setPixel(k & 63, k >> 6, cl(f[j], 0, 255) | 0, cl(f[j + 1], 0, 255) | 0, cl(f[j + 2], 0, 255) | 0);\n}\n","layer":{"id":"layer-funicular","type":"code","name":"funicular","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Funicular\n// Family:  rail\n// Idea:    Two stepped funicular cars on one cable run up and down a mountainside at dusk between a lakeside town and the engine house where the bullwheel turns, passing each other at the Abt loop halfway up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the two-car funicular with an Abt passing loop\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1\n//\n// Knob 1: Dusk. Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit.\n// Knob 2: Speed. At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower.\n// Knob 3: Grade. How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher.\n// Knob 4: Snow. A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel.\n// Buttons: K1 tap sends the cars out of the stations now, or flashes their headlamps while they run. K2 tap puts out the lamps along the line, or lights them one by one from the valley up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i | 0, 374761393) + Math.imul(j | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nconst ridge = (t, s) => 1 - abs(2 * vn(t, s) - 1);\n// True draws only the line: track, cable, cars and stations.\nconst BARE = false;\n\n// Rows of the valley end and the summit end of the track and of the quay. The bullwheel's radius.\nconst YA = 112, YB = 30, QY = 121, R = 5.5;\n// Seconds a run and a stop take at Speed 1.\nconst RUN = 16, DWELL = 6;\n\n// Each colour from blue hour, its first three numbers, to night, its last three.\nconst PAL = {\n  s0:[12,26,82,5,11,42,1,3,12], s1:[44,70,150,14,28,80,3,8,26], s2:[134,118,180,46,52,112,8,16,40],\n  s3:[240,164,124,116,76,100,20,26,52], far:[62,68,122,26,30,70,8,11,28], haze:[112,100,152,46,44,86,12,15,34],\n  fsn:[240,184,198,120,112,160,40,46,76], fsd:[140,144,196,66,70,122,24,30,56], far2:[36,48,90,14,20,50,4,7,18],\n  trL:[44,84,70,22,42,46,9,18,22], trD:[20,44,48,10,22,30,5,10,16], und:[9,22,26,5,11,16,2,5,9],\n  rock:[100,96,126,48,50,80,17,19,30], rockD:[46,46,76,22,24,46,7,9,17], snow:[236,206,222,140,140,180,54,60,88],\n  snowD:[146,156,206,76,84,136,28,34,60], bed:[56,52,54,30,28,32,12,12,15], rail:[190,188,200,120,120,140,70,70,84],\n  slp:[38,32,32,20,17,19,8,7,9], roof:[70,62,66,34,30,36,14,12,16], conc:[120,116,120,60,58,64,26,26,30],\n  stone:[130,122,116,64,60,62,26,24,28], lake:[26,38,92,10,14,40,2,4,12], cLo:[236,150,140,104,72,104,18,20,34],\n  cHi:[98,90,146,34,36,74,8,10,22],\n};\n// Town walls: cream, ochre, pink, blue-grey, white.\nconst HOUSE = [[178, 152, 112], [192, 132, 62], [184, 106, 112], [84, 132, 140], [184, 180, 188]];\nconst WARM = [255, 196, 108], LAMP = [255, 226, 168], STEEL = [224, 220, 206];\nconst LIV = [[206, 34, 30], [34, 84, 196]], DK = [40, 40, 44], TILE = [128, 60, 46];\nconst lerp3 = (p, k, i = k \u003c 0.5 ? 0 : 3, f = k * 2 - i / 3) => [0, 1, 2].map((c) => mix(p[i + c], p[i + 3 + c], f));\n\n// The line for a grade: its ends, its direction u, the normal n to its lower\n// right, the passing loop, and the shape of a car column by column.\nfunction geom(g) {\n  const xA = mix(8, 17, g), xB = mix(50, 43, g), L = hypot(xB - xA, YB - YA);\n  const ux = (xB - xA) / L, uy = (YB - YA) / L, tp = -uy / ux, hb = round(3 * tp + 3.2);\n  const Lca = 10 / ux, aLo = Lca / 2 + 1.5, aHi = L - Lca / 2 - 1.5;\n  const G = { xA, L, ux, uy, nx: -uy, ny: ux, tp, hb, Lca, aLo, aHi, aM: (aLo + aHi) / 2, hs: Lca / 2 + 2, lt: 13, WL: 4.6 };\n  // Columns 0..9: three compartments of three and the end wall, each floor level, so the car climbs in steps.\n  for (const k of [\"ct\", \"cf\", \"cr\"]) G[k] = new Int8Array(10);\n  let vr = 0;\n  for (let c = 0; c \u003c 10; c++) {\n    const fl = floor(-((c > 8 ? 2 : floor(c / 3)) * 3 - 2) * tp) - 2;\n    G.cf[c] = fl; G.ct[c] = fl - hb + 1; G.cr[c] = round(-(c - 4.5) * tp - 0.5);\n    vr = max(vr, -(c - 4.5) * tp - G.ct[c]);\n  }\n  G.VR = vr + 2;\n  // The bullwheel: the cable runs off the top of the track onto its left side.\n  G.wx = xB + 3 * ux + R * G.nx; G.wy = YB + 3 * uy + R * G.ny; G.px = xB - 5;\n  return G;\n}\nconst bump = (G, a) => sm(G.aM - G.hs - G.lt, G.aM - G.hs, a) * (1 - sm(G.aM + G.hs, G.aM + G.hs + G.lt, a));\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F(N * 3), bg: F(N * 3), A: F(N), D: F(N), SK: new Uint8Array(N), tk: new Int32Array(N), ntk: 0,\n    win: new Int32Array(900), wth: F(900), nw: 0, lamp: [], k1: -1, g: -1, k4: -1, G: null, c: {},\n    run: 0, tm: 1, dir: 1, pa: 0, wh: 0, flash: 0, lampsOn: 1, lampF: 300, t: 0, stars: [], fl: [], cx: 40, cl: F(128 * 64), houses: [],\n  });\n  // Clouds: streaks of soft noise in a strip that wraps every 128 columns.\n  const n = (X, y) => 0.6 * vn(X * 0.045, y * 0.22) + 0.4 * vn(X * 0.12 + 5, y * 0.45);\n  for (let i = 0; i \u003c 8192; i++) S.cl[i] = mix(n(i & 127, i >> 7), n((i & 127) + 128, i >> 7), (i & 127) / 128);\n  for (let i = 0; i \u003c 110; i++) S.stars.push({ x: floor(rnd() * W), y: floor(rnd() * 100), b: 0.25 + 0.75 * rnd() ** 2, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 260; i++) S.fl.push({ x: rnd() * W, y: rnd() * H, v: 0.6 + 0.8 * rnd(), ph: rnd() * TAU, z: rnd() });\n  // The town: a row of taller houses up the bank with a church, and a lower row on the quay.\n  for (const [b, i0, h0, hr] of [[QY - 6, 0, 7, 7], [QY - 1, 50, 4, 4]])\n    for (let x = i0 ? -2 : 0, i = i0; x \u003c W; i++) {\n      const ch = !i0 && x > 38 && !S.ch, w = ch ? 5 : 4 + floor(hash(i, 1) * 4);\n      if (ch) S.ch = 1;\n      S.houses.push({ x, b, w, h: ch ? 16 : h0 + floor(hash(i, 2) * hr), c: floor(hash(i, 3) * 5), ch, gab: hash(i, 4) \u003c 0.75 });\n      x += w + (i0 ? 1 + floor(hash(i, 5) * 3) : hash(i, 5) \u003c 0.2 ? 1 : 0);\n    }\n}\n\nfunction build(S, k1, g, k4) {\n  S.k1 = k1; S.g = g; S.k4 = k4; S.nw = 0; S.lamp.length = 0;\n  const G = (S.G = geom(g)), C = S.c, bg = S.bg, o = [0, 0, 0];\n  for (const key in PAL) C[key] = lerp3(PAL[key], k1);\n  const amb = mix(1, 0.3, k1), snl = 30 + 112 * k4 ** 0.75;\n  let ntk = 0;\n  const setc = (c, m = 1) => ((o[0] = c[0] * m), (o[1] = c[1] * m), (o[2] = c[2] * m));\n  const blend = (c, t) => ((o[0] = mix(o[0], c[0], t)), (o[1] = mix(o[1], c[1], t)), (o[2] = mix(o[2], c[2], t)));\n  const ad = (px, py) => [(px - G.xA) * G.ux + (py - YA) * G.uy, (px - G.xA) * G.nx + (py - YA) * G.ny];\n  const dg = (a) => 7 + 6 * bump(G, a) + 1.6 * vn(a * 0.2, 4);\n  const inBed = (a, d, of = G.WL * bump(G, a)) => a >= -1.5 && a \u003c= G.L + 1 && (abs(d + of) \u003c 2.7 || abs(d - of) \u003c 2.7);\n  const f1 = (x) => 46 + 22 * (1 - ridge(x * 0.07 + 3.3, 1.7)) + 3 * vn(x * 0.4, 5);\n  const f2 = (x) => 74 + 12 * (1 - ridge(x * 0.1 + 11, 2.3)) + 2 * vn(x * 0.5, 8);\n  const pk = (x) => 2 + (x \u003c G.px ? (G.px - x) * 2.6 : (x - G.px) * 1.7) + 4 * (vn(x * 0.3, 9) - 0.5);\n  const tl = (x) => 50 + 8 * (vn(x * 0.12, 2) - 0.5);\n  const face = (a, d) => d > -dg(a);\n  // Rock with strata and snow lying in the gullies.\n  const rock = (px, py, side) => {\n    const fa = vn(px * 0.16 + 3, py * 0.07), lit = side > 0 ? fa > 0.32 : fa > 0.72;\n    setc(lit ? C.rock : C.rockD, 0.82 + 0.3 * vn(px * 0.4, py * 0.2));\n    const st = ((py * 0.8 - px * 0.5 + 4 * vn(px * 0.08, py * 0.08)) / 5) % 1;\n    if (st \u003c 0.16) blend(C.rockD, 0.7);\n    const sn = sm(0.56, 0.66, 0.6 * vn(px * 0.3 + 5, py * 0.12) + 0.4 * vn(px * 0.8, py * 0.35) + (snl - py) / 160 + k4 * 0.5 - (st \u003c 0.3 ? 0.1 : 0));\n    if (sn > 0) blend(lit ? C.snow : C.snowD, sn);\n  };\n  // Firs on a jittered grid of cells three wide and four tall, the nearest in front.\n  const tree = (px, py) => {\n    const cx = floor(px / 3), cy = floor(py / 4);\n    let best = -1, tx = 0, ty = 0, th = 0;\n    for (let j = 0; j \u003c 3; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const X = cx + i, Y = cy - j, ax = (X + 0.2 + 0.6 * hash(X, Y)) * 3, ay = (Y + hash(Y, X + 7)) * 4, hh = 4 + 3 * hash(X + 3, Y);\n        if (py \u003c ay || py > ay + hh || abs(px - ax) > (py - ay) * 0.45 + 0.35 || ay + hh \u003c= best) continue;\n        const [ra, rd] = ad(ax, ay + hh);\n        if (!face(ra, rd) || inBed(ra, rd) || ay + hh \u003c tl(ax) || ay + hh > QY - 6) continue;\n        (best = ay + hh), (tx = ax), (ty = ay), (th = hh);\n      }\n    if (best \u003c 0) return 0;\n    setc(px \u003c tx ? C.trL : C.trD, 0.85 + 0.3 * hash(floor(tx), floor(ty)));\n    if (ty + th \u003c snl + 6 * (hash(floor(tx), 3) - 0.5) && py - ty \u003c th * 0.55) blend(C.snow, 0.75);\n    return 1;\n  };\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = y * W + x, px = x + 0.5, py = y + 0.5, [a, d] = ad(px, py);\n      S.A[k] = a; S.D[k] = d; S.SK[k] = 0;\n      // Sky: blue overhead going lavender lower down, with a peach glow behind the far peaks in the west.\n      const t = py / 104, s = t \u003c 0.4 ? 0 : t \u003c 0.76 ? 1 : 2, ft = s ? (t - [0, 0.4, 0.76][s]) / (s > 1 ? 0.24 : 0.36) : t / 0.4;\n      const sa = [C.s0, C.s1, C.s2][s], sb = [C.s1, C.s2, C.s3][s];\n      for (let c = 0; c \u003c 3; c++) o[c] = mix(sa[c], sb[c], sm(0, 1, ft));\n      blend(C.s3, 0.35 * exp(-max(0, 100 - py) / 18) * (1 - px / 90));\n      let sky = 1;\n      if (py >= f1(px)) {\n        // The far range in haze, snow on the peaks that stand highest.\n        const top = f1(px), lit = f1(px + 1) >= f1(px - 1);\n        setc(C.far); blend(C.haze, cl((py - top) / 28, 0, 0.8));\n        const sd = sm(0.5, 0.62, 0.55 * vn(px * 0.7, py * 0.3) + 0.45 * vn(px * 1.6, py * 0.8) + (54 - py) / 14 + k4 * 0.5);\n        if (sd > 0) blend(lit ? C.fsn : C.fsd, sd);\n        sky = 0;\n      }\n      if (py >= f2(px)) {\n        setc(C.far2, 0.85 + 0.25 * vn(px * 0.6, py * 0.6));\n        blend(C.haze, cl((py - f2(px)) / 30, 0, 0.35));\n        if (k4 > 0.3 && py \u003c f2(px) + 3 * k4 + 1) blend(C.snowD, 0.6 * k4);\n        sky = 0;\n      }\n      if (py >= pk(px)) (sky = 0), rock(px, py, px \u003c G.px ? 1 : -1);\n      if (face(a, d) && py \u003c QY) {\n        sky = 0;\n        if (py \u003c tl(px)) rock(px, py, d \u003c 2 || vn(px * 0.2, py * 0.2) > 0.5 ? 1 : -1);\n        else if (!tree(px, py)) setc(C.und, 0.8 + 0.4 * hash(x, y)), blend(C.snowD, 0.75 * sm(4, -4, py - snl + 6 * vn(px * 0.3, py * 0.1)));\n      } else if (py \u003c QY && py > 30 && d > -dg(a) - 8 && tree(px, py)) sky = 0;\n      S.SK[k] = sky;\n      if (BARE) setc(o, 0);\n      // The track bed: gravel, sleepers, two rails a track, rollers between them.\n      if (inBed(a, d)) {\n        const of = G.WL * bump(G, a), best = min(abs(d - of), abs(d + of));\n        setc(C.bed, 0.94 + 0.12 * hash(x * 7, y * 3));\n        if (best \u003c 2.2 && (a / 2.4) % 1 \u003c 0.4) blend(C.slp, 0.4);\n        if (best \u003c 0.6 && (a / 6) % 1 \u003c 0.2) setc(C.rail, 0.35);\n        if (abs(abs(d - of) - 1.8) \u003c 0.56 || abs(abs(d + of) - 1.8) \u003c 0.56) setc(C.rail, 0.9 + 0.1 * hash(x, y));\n        S.tk[ntk++] = k;\n      }\n      bg[k * 3] = o[0]; bg[k * 3 + 1] = o[1]; bg[k * 3 + 2] = o[2];\n    }\n  S.ntk = ntk;\n  const put = (x, y, c, t = 1, m = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    for (let i = 0, k = (y * W + x) * 3; i \u003c 3; i++) bg[k + i] = mix(bg[k + i], c[i] * m, t);\n  };\n  const glow = (x, y, s) => {\n    for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) put(x + i, y + j, LAMP, s * exp(-(i * i + j * j) / 1.44));\n    put(x, y, LAMP);\n  };\n  // A crescent moon once it is dark.\n  const mo = sm(0.45, 0.85, k1);\n  if (mo > 0 && !BARE)\n    for (let y = 6; y \u003c 22; y++)\n      for (let x = 6; x \u003c 22; x++) {\n        const r1 = hypot(x + 0.5 - 14, y + 0.5 - 13), m = cl(4.3 - r1, 0, 1) * cl(hypot(x + 0.5 - 16.2, y + 0.5 - 11.8) - 3.6, 0, 1);\n        if (!S.SK[y * W + x]) continue;\n        if (m > 0) put(x, y, [236, 230, 196], m * mo);\n        else if (r1 \u003c 10) put(x, y, [70, 76, 110], 0.5 * mo * exp(-(r1 - 4) / 2.5));\n      }\n\n  // The town, the back row stopping short of the valley station.\n  const town = (front) => {\n    if (BARE) return;\n    for (const h of S.houses) {\n      if ((h.b === QY - 1) !== front || (h.x + h.w > G.xA - 9 && h.x \u003c (front ? G.xA - 1 : G.xA + (G.Lca + 6) * G.ux))) continue;\n      const base = h.b, top = base - h.h, m = amb * (front ? 0.88 : 0.7), sn = snl > base - 3;\n      for (let x = h.x; x \u003c min(W, h.x + h.w); x++) {\n        for (let y = top; y \u003c= base; y++) put(x, y, HOUSE[h.c], 1, m * (x === h.x + h.w - 1 ? 0.72 : 1));\n        const rr = h.gab ? h.w / 2 + 0.5 - abs(x + 0.5 - (h.x + h.w / 2)) : 1;\n        for (let y = floor(top - rr); y \u003c top; y++) put(x, y, sn ? C.snow : h.c & 1 ? TILE : [64, 68, 88], 1, sn ? 1 : m);\n      }\n      if (h.ch) {\n        for (let y = top - 9; y \u003c top - 2; y++) for (let i = -1; i \u003c 2; i++) (!i || y > top - 6) && put(h.x + 2 + i, y, C.roof, 1, 1.4);\n        put(h.x + 2, top + 2, [250, 236, 190], 1, 0.9);\n      }\n      for (let wy = base - 2; wy > top + 1 + (h.ch ? 3 : 0); wy -= 3)\n        for (let wx = h.x + 1; wx \u003c h.x + h.w - 1; wx += 2) if (S.nw \u003c 900) (S.win[S.nw] = wy * W + wx), (S.wth[S.nw++] = hash(wx, wy)), put(wx, wy, [30, 24, 30], 1, amb + 0.3);\n    }\n  };\n  town(false);\n  // Stations: a tiled roof on pillars over the platform where a car stands, lit underneath.\n  const yT = (px) => YA - (px - G.xA) * G.tp;\n  const shed = (a0, a1) => {\n    const x0 = floor(G.xA + a0 * G.ux), x1 = ceil(G.xA + a1 * G.ux);\n    for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n      const px = x + 0.5, ac = (px - G.xA) / G.ux, ty = yT(px), end = x === x0 || x === x1 || x === round((x0 + x1) / 2);\n      if (ac \u003c a0 || ac > a1) continue;\n      for (let y = floor(ty - G.VR - 4); y \u003c= ceil(ty + 6); y++) {\n        const v = ty - (y + 0.5);\n        if (v > G.VR && v \u003c= G.VR + 3.4) v > G.VR + 2.3 ? put(x, y, y \u003c snl ? C.snow : [150, 76, 58], 1, y \u003c snl ? 1.1 : amb) : put(x, y, [118, 54, 42], 1, amb * (v > G.VR + 1.2 ? 1 : 0.55));\n        else if (v > 0.6 && v \u003c= G.VR) end ? put(x, y, [46, 42, 46]) : put(x, y, LAMP, 0.06 + 0.3 * exp(-(G.VR - v) / 4));\n        else if (v \u003c= 0.6 && v > -5.5 && !inBed(...ad(px, y + 0.5))) put(x, y, y % 3 ? C.conc : C.roof), put(x, y, LAMP, 0.18 + 0.12 * k1);\n      }\n    }\n    for (const f of [0.3, 0.72]) {\n      const px = G.xA + mix(a0, a1, f) * G.ux;\n      glow(floor(px), floor(yT(px) - G.VR + 1), 0.3 + 0.3 * k1);\n    }\n  };\n  shed(-2.5, G.Lca + 4.5);\n  shed(G.L - G.Lca - 4.5, G.L + 1.5);\n  // The valley station hall left of the track, an arched window over a lit door on the quay.\n  const vx0 = max(0, floor(G.xA - 9)), vx1 = floor(G.xA) - 1, vy0 = YA - 12, vc = (vx1 + 1 + max(vx0, G.xA - 9)) / 2;\n  for (let x = vx0; x \u003c= vx1; x++) {\n    for (let y = vy0; y \u003c QY; y++) put(x, y, HOUSE[0], 1, amb * (x === vx1 ? 0.7 : 0.95));\n    for (let y = floor(vy0 - 5.5 + abs(x + 0.5 - vc) * 1.2); y \u003c vy0; y++) put(x, y, y \u003c snl ? C.snow : TILE, 1, y \u003c snl ? 1 : amb);\n  }\n  for (let y = vy0 + 2; y \u003c QY; y++)\n    for (let x = floor(vc - 1.5); x \u003c vc + 1.5; x++)\n      if (y \u003c vy0 + 9 ? y > vy0 + 2 || abs(x + 0.5 - vc) \u003c 1 : y >= QY - 4 && abs(x + 0.5 - vc) \u003c 1) put(x, y, WARM, 0.92, mix(0.85, 1, k1));\n  town(true);\n\n  // The engine house on the summit, with the bullwheel behind its lit round window.\n  const ex0 = floor(G.wx - 8), ey0 = floor(G.wy - 8);\n  for (let y = ey0 - 6; y \u003c= G.wy + 8; y++)\n    for (let x = ex0; x \u003c W; x++) {\n      const rh = y - (ey0 - 6 + abs(x + 0.5 - G.wx) * 0.62), r = hypot(x + 0.5 - G.wx, y + 0.5 - G.wy);\n      if (r \u003c R + 1.2) put(x, y, [255, 200, 120], 1, mix(0.9, 1, k1) * (1 - 0.15 * r / R));\n      else if (y \u003c ey0) rh >= 0 && put(x, y, k4 > 0.05 && rh \u003c 1.2 ? C.snow : C.roof, 1, 1.2);\n      else put(x, y, C.stone, 1, (0.85 + 0.15 * (((y >> 1) + (x >> 2)) & 1)) * (x === ex0 ? 0.6 : 1));\n    }\n  // Lamps on posts beside the line, every nine steps.\n  for (let a = 7; a \u003c G.L - 6; a += 9) {\n    const of = G.WL * bump(G, a) + 5.6, lx = floor(G.xA + a * G.ux + of * G.nx), ly = floor(YA + a * G.uy + of * G.ny);\n    put(lx, ly + 1, DK), put(lx, ly + 2, DK), S.lamp.push(lx, ly, a);\n  }\n  if (!BARE)\n    for (let x = 0; x \u003c W; x++) {\n      put(x, QY, C.stone, 1, 0.8);\n      if (x % 8 === 4) put(x, QY - 1, DK), put(x, QY - 2, DK), glow(x, QY - 3, 0.12 + 0.25 * k1);\n    }\n}\n\n// Along a run the cars speed up for the first seventh and slow down for the last.\nfunction prof(t) {\n  const ta = 0.14, v = 1 / (1 - ta);\n  return t \u003c ta ? (v * t * t) / (2 * ta) : t \u003c 1 - ta ? v * (t - ta / 2) : 1 - (v * (1 - t) * (1 - t)) / (2 * ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues, h = min(dt, 0.1), sp = cl(kv[1], 0.2, 3) / 2, bp = input.btnPressed;\n  const k1 = cl(kv[0], 0, 1), g = cl(kv[2], 0, 1), k4 = cl(kv[3], 0, 1);\n  if (abs(k1 - S.k1) > 0.003 || abs(g - S.g) > 0.003 || abs(k4 - S.k4) > 0.003) build(S, k1, g, k4);\n  if (bp[0]) S.run ? (S.flash = 1) : (S.tm = min(S.tm, 0.8));\n  if (bp[1]) (S.lampsOn = 1 - S.lampsOn), (S.lampF = -10);\n  S.lampF += h * 40;\n  S.cx += h * sp * 3.6;\n  S.flash = max(0, S.flash - h);\n  S.t += h * sp;\n  const was = S.pa;\n  if (!S.run) {\n    S.tm -= h * sp * 2;\n    if (S.tm \u003c= 0) (S.run = 1), (S.tm = 0);\n  } else {\n    S.tm = min(1, S.tm + (h * sp * 2) / RUN);\n    S.pa = S.dir > 0 ? prof(S.tm) : 1 - prof(S.tm);\n    if (S.tm >= 1) (S.run = 0), (S.tm = DWELL), (S.dir = -S.dir);\n  }\n  S.wh += ((S.pa - was) * (S.G.aHi - S.G.aLo)) / R;\n  for (const q of S.fl) {\n    q.y += h * (6 + 12 * q.z) * q.v;\n    q.x = (q.x + h * (2.5 * sin(S.t * 0.7 + q.ph) - 1.5) + W) % W;\n    if (q.y > H) (q.y -= H + 2), (q.x = rnd() * W);\n  }\n}\n\nfunction drawCar(S, f, ac, side, liv, up, k1) {\n  const G = S.G, o = side * G.WL * bump(G, ac), Px = G.xA + ac * G.ux + o * G.nx, Py = YA + ac * G.uy + o * G.ny;\n  const x0 = round(Px - 5), ay = round(Py - (x0 + 5 - Px) * G.tp), hb = G.hb, lm = mix(1, 0.5, k1), fl = S.flash > 0 && (S.flash * 6) % 1 \u003c 0.5;\n  for (let c = 0; c \u003c 10; c++) {\n    const x = x0 + c, glass = c % 3 && c \u003c 9, b = c > 8 ? 2 : floor(c / 3);\n    if (x \u003c 0 || x >= W) continue;\n    for (let r = G.ct[c]; r \u003c= G.cr[c]; r++) {\n      const y = ay + r, rr = r - G.ct[c], q = (y * W + x) * 3;\n      if (y \u003c 0 || y >= H) continue;\n      let [cr, cg, cb] = liv, m = lm;\n      if (r === G.cr[c]) (cr = cg = cb = c === 1 || c === 8 ? 20 : 68);\n      else if (r > G.cf[c]) m *= 0.62;\n      else if (rr === 0) (cr = 210), (cg = 206), (cb = 196);\n      else if (rr === hb - 3) {\n        (cr = 228), (cg = 214), (cb = 180);\n        if (c === (up ? 9 : 0)) (cr = 255), (cg = 250), (cb = fl ? 120 : 220), (m = 1);\n        if (c === (up ? 0 : 9)) (cr = 255), (cg = 30), (cb = 20), (m = 1);\n      } else if (glass && rr >= 2 && rr \u003c= hb - 4) {\n        // Lit windows, a passenger's head and shoulders in some.\n        const head = rr >= hb - 5 && c % 3 === 1 + (hash(b, liv[2]) \u003c 0.5) && hash(b * 3, liv[2]) \u003c 0.7;\n        (cr = head ? 60 : 255), (cg = head ? 40 : 214), (cb = head ? 36 : 150), (m = 1);\n      }\n      f[q] = cr * m; f[q + 1] = cg * m; f[q + 2] = cb * m;\n    }\n  }\n  // The headlamp's beam on the track ahead.\n  const dr = up ? 1 : -1, ae = ac + (dr * G.Lca) / 2, bs = mix(0.16, 0.36, k1) * (fl ? 2.5 : 1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], s = (S.A[k] - ae) * dr, w = abs(S.D[k] - side * G.WL * bump(G, S.A[k])) - 0.8 - s * 0.08, e = bs * (1 - s / 15) ** 2 * cl(1 - w, 0, 1);\n    if (s >= 0 && s \u003c 15) (f[k * 3] += 255 * e), (f[k * 3 + 1] += 236 * e), (f[k * 3 + 2] += 190 * e);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S.G) build(S, 0, 0, 0.06);\n  const G = S.G, f = S.f, k1 = S.k1, k4 = S.k4, t = S.t, C = S.c;\n  f.set(S.bg);\n  if (!BARE) {\n    // Stars come out as it gets dark; the evening star is there from the start.\n    const sv = sm(0.1, 0.7, k1);\n    for (const s of S.stars) {\n      const k = s.y * W + s.x, e = sv * s.b * (0.7 + 0.3 * sin(time * (2 + s.ph / 3) + s.ph)) * (1 - s.y / 130);\n      if (S.SK[k]) (f[k * 3] += 220 * e), (f[k * 3 + 1] += 224 * e), (f[k * 3 + 2] += 240 * e);\n    }\n    // Two bands of cloud drifting east, lit underneath while the glow lasts.\n    const ox = floor(S.cx), fx = S.cx - ox;\n    for (let y = 2; y \u003c 62; y++) {\n      const band = exp(-(((y - 12) / 7) ** 2)) + 0.9 * exp(-(((y - 38) / 8) ** 2)), i0 = y * 128;\n      for (let x = 0; x \u003c W; x++) {\n        if (!S.SK[y * W + x] || band \u003c 0.05) continue;\n        const d0 = mix(S.cl[i0 + ((x - ox) & 127)], S.cl[i0 + ((x - ox - 1) & 127)], fx), d1 = S.cl[min(63, y + 2) * 128 + ((x - ox) & 127)];\n        const e = sm(0.44, 0.68, d0 * 0.8 + band * 0.44 - 0.1) * 0.9, lit = cl(0.45 + (d0 - d1) * 3 + (y - 30) / 60, 0, 1), q = (y * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) f[q + c] = mix(f[q + c], mix(C.cHi[c], C.cLo[c], lit), e);\n      }\n    }\n    const vk = (52 * W + 11) * 3;\n    if (S.SK[vk / 3]) (f[vk] += 255), (f[vk + 1] += 246), (f[vk + 2] += 220);\n    // Windows in town: more lit as night comes, now and then one going on or off.\n    const pl = mix(0.42, 0.86, k1);\n    for (let i = 0; i \u003c S.nw; i++) {\n      const th = S.wth[i], k = S.win[i] * 3, m = 0.8 + 0.2 * hash(i, 9);\n      if (th \u003c pl + 0.05 * sin(t * 0.4 + th * 60)) (f[k] = WARM[0] * m), (f[k + 1] = WARM[1] * m), (f[k + 2] = WARM[2] * m);\n    }\n  }\n  // Lamps along the line.\n  for (let i = 0; i \u003c S.lamp.length; i += 3) {\n    const [x, y, a] = S.lamp.slice(i, i + 3), e = mix(0.55, 1, k1) * (S.lampsOn ? cl((S.lampF - a) / 4, 0, 1) : 1 - cl((S.lampF - G.L + a) / 4, 0, 1));\n    for (let j = -2; j \u003c= 2; j++)\n      for (let ii = -2, q = ((y + j) * W + x - 2) * 3; ii \u003c= 2; ii++, q += 3) {\n        const g = j || ii ? e * 0.35 * mix(0.3, 1, k1) * exp(-(ii * ii + j * j) / 2) : e;\n        if (x + ii >= 0 && x + ii \u003c W) for (let c = 0; c \u003c 3; c++) f[q + c] += LAMP[c] * g;\n      }\n  }\n  // The cable: a strand from each car up to the bullwheel, its lay sliding with it.\n  const aA = mix(G.aLo, G.aHi, S.pa), aB = G.aLo + G.aHi - aA, lm = mix(1, 0.55, k1);\n  for (let i = 0; i \u003c S.ntk; i++) {\n    const k = S.tk[i], a = S.A[k], d = S.D[k], of = G.WL * bump(G, a);\n    for (let s = -1; s \u003c= 1; s += 2) {\n      const ac = s \u003c 0 ? aA : aB;\n      if (a \u003c ac + G.Lca / 2 - 0.5 || a > G.L + 2 || abs(d - s * of - s * 0.25) >= 0.55) continue;\n      const tx = (0.5 + 0.5 * cos((TAU * (a - ac)) / 3)) ** 2;\n      for (let c = 0; c \u003c 3; c++) f[k * 3 + c] = mix([78, 72, 70][c], STEEL[c], tx) * lm;\n      break;\n    }\n  }\n  // The cars: red on the upper track of the loop, blue on the lower.\n  const upA = S.run ? S.dir > 0 : S.dir \u003c 0;\n  drawCar(S, f, aA, -1, LIV[0], upA, k1);\n  drawCar(S, f, aB, 1, LIV[1], !upA, k1);\n  // The bullwheel turning behind the round window, six spokes on a hub.\n  for (let y = floor(G.wy - R - 1); y \u003c= G.wy + R + 1; y++)\n    for (let x = floor(G.wx - R - 1); x \u003c= min(W - 1, G.wx + R + 1); x++) {\n      const dx = x + 0.5 - G.wx, dy = y + 0.5 - G.wy, r = hypot(dx, dy), an = atan2(dy, dx) - S.wh;\n      const m = ((an % (PI / 3)) + PI / 3) % (PI / 3), sd = r * sin(min(m, PI / 3 - m));\n      if (r \u003c= R + 0.6 && (abs(r - R + 0.7) \u003c 0.75 || (r \u003c R - 1 && sd \u003c 0.5) || r \u003c 1.4)) f.set([34, 28, 30], (y * W + x) * 3);\n    }\n  // The lake: the quay and the town upside down, rippling.\n  if (!BARE)\n    for (let y = QY + 1; y \u003c H; y++) {\n      const dy = y - QY, sh = round(0.8 * sin(t * 0.9 + y * 1.3)), m = (0.95 - dy * 0.08) / 255;\n      for (let x = 0; x \u003c W; x++) for (let c = 0, q = (y * W + x) * 3, p = ((QY - dy) * W + cl(x + sh, 0, W - 1)) * 3; c \u003c 3; c++) f[q + c] = C.lake[c] * (1 + (y & 1) * 0.2) + f[p + c] ** 2 * m;\n    }\n  // Falling snow.\n  const nf = floor(cl((k4 - 0.1) / 0.9, 0, 1) * 260), sc = mix(235, 120, k1);\n  for (let i = 0; i \u003c nf; i++) {\n    const q0 = S.fl[i], q = (floor(q0.y) * W + floor(q0.x)) * 3, e = 0.45 + 0.55 * q0.z;\n    if (q0.y >= 0 && q0.y \u003c H) (f[q] = mix(f[q], sc, e)), (f[q + 1] = mix(f[q + 1], sc, e)), (f[q + 2] = mix(f[q + 2], sc * 1.06, e));\n  }\n  for (let k = 0, j = 0; k \u003c N; k++, j += 3) display.setPixel(k & 63, k >> 6, cl(f[j], 0, 255) | 0, cl(f[j + 1], 0, 255) | 0, cl(f[j + 2], 0, 255) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Grade=0..1, Snow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"Blue hour at 0, a peach glow behind the far peaks and rose on the snow; night at 1, stars and a crescent moon over a town with most windows lit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a run takes eight seconds and the cars wait three at the stations while the clouds drift east; at 0.2 it all runs ten times slower."},{"name":"Grade","min":0,"max":1,"about":"How steep the line stands, about 63 degrees at 0 and 72 at 1: the stations draw together and the compartments step higher."},{"name":"Snow","min":0,"max":1,"about":"A little on the summit rocks at the start; turning it up brings the snowline down through the forest to the roofs and sets snow falling over the whole panel."}],"start":[0,2,0,0.06],"measures":{"motion":0.0963,"detail":0.0901,"edges":0.4693,"complexity":1.617,"coverage":0.9811,"colour":0.2158,"drift":0.0259},"knobResponse":[0.2342,0.0427,0.0962,0.1569]},{"slug":"galilean-moons","title":"Galilean Moons","family":"celestial","round":22,"note":"목성의 네 위성을 관측 도표로 그려요. 위쪽 접안렌즈에서는 줄무늬 목성이 돌고 이오의 그림자가 원반을 지나가며, 아래 도표에서는 위성마다 제 사인 곡선을 그리며 날짜가 위로 올라와요.","idea":"Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.","buttons":"K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.","code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","layer":{"id":"layer-galilean-moons","type":"code","name":"galilean-moons","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sky","min":0,"max":1,"about":"The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1."},{"name":"Speed","min":0.5,"max":24,"about":"Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second."},{"name":"Power","min":0,"max":1,"about":"The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits."},{"name":"Seeing","min":0,"max":1,"about":"Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0779,"detail":0.0747,"edges":0.5632,"complexity":0.743,"coverage":0.7778,"colour":0.1926,"drift":0.0306},"knobResponse":[0.5122,0.1178,0.1493,0.0539]},{"slug":"galton","title":"Galton Board","family":"data","round":2,"note":"깔때기에서 떨어진 공이 못마다 동전 던지듯 왼쪽이나 오른쪽으로 튀어 칸에 쌓이고, 종 모양이 서요. 칸 색은 가운데에서 표준편차 몇 개만큼 떨어졌는지를 보여 줘요.","idea":"Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.","buttons":"K1 tap opens the floor, the bins drain and the hopper fills again.","code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-galton","type":"code","name":"galton","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart."},{"name":"Rate","min":30,"max":240,"about":"Balls let through the neck each second, from a trickle to a pour."},{"name":"Bias","min":-0.3,"max":0.3,"about":"The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight."},{"name":"Rows","min":8,"max":15,"about":"Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins."}],"start":[0,30,0,8],"measures":{"motion":0.2909,"detail":0.0577,"edges":0.7232,"complexity":0.5234,"coverage":0.2361,"colour":0.1843,"drift":0.0246},"knobResponse":[0.0536,0.0477,0.0979,0.0715]},{"slug":"gaussian-moat","title":"Gaussian Moat","family":"number","round":31,"note":"LED 하나가 가우스 정수 하나라 가우스 소수가 옅은 점으로 깔리고, 1 + i 에서 걸음 √k 안의 소수로만 번지는 물길이 산호처럼 가지를 쳐요. 물길이 해자에 막히면 기슭이 깜박이고 k 가 커져 건너가요. K1 을 누르면 k 를 바로 한 칸 올려요.","idea":"Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.","buttons":"K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.","code":"// ===== Patternflow pattern =====\n// Title:   Gaussian Moat\n// Family:  number\n// Idea:    Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Gaussian moat problem (Basil Gordon, 1962), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1\n//\n// Knob 1: Hue. Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots.\n// Knob 2: Speed. At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower.\n// Knob 3: Step. The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go.\n// Knob 4: Reach. Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back.\n// Buttons: K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, abs, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The squared lengths a step between two Gaussian integers can have: the\n// sums of two squares, 1 left out since no two odd primes sit 1 apart.\nconst KS = [];\nfor (let n = 2; n \u003c= 50; n++) {\n  let ok = false;\n  for (let a = 0; a * a \u003c= n && !ok; a++) {\n    const b = Math.round(sqrt(n - a * a));\n    if (a * a + b * b === n) ok = true;\n  }\n  if (ok) KS.push(n);\n}\nconst KMAX = 50;\n\n// Every offset with dx^2 + dy^2 \u003c= 50, nearest first. A flood with step k\n// scans the first NK[k] of them; the moat line reads the first R49.\nconst OD = [];\nfor (let dy = -7; dy \u003c= 7; dy++)\n  for (let dx = -7; dx \u003c= 7; dx++) {\n    const d = dx * dx + dy * dy;\n    if (d \u003c= KMAX) OD.push([d, dx, dy]);\n  }\nOD.sort((p, q) => p[0] - q[0] || p[2] - q[2] || p[1] - q[1]);\nconst ODX = new Int8Array(OD.length), ODY = new Int8Array(OD.length), ODD = new Uint8Array(OD.length);\nOD.forEach((o, i) => {\n  ODD[i] = o[0];\n  ODX[i] = o[1];\n  ODY[i] = o[2];\n});\nconst NK = new Uint16Array(KMAX + 1);\nfor (let k = 0; k \u003c= KMAX; k++) {\n  let n = 0;\n  while (n \u003c OD.length && ODD[n] \u003c= k) n++;\n  NK[k] = n;\n}\nlet R49 = 0;\nwhile (R49 \u003c OD.length && ODD[R49] \u003c= 49) R49++;\n\n// Rational primes up to 7300 by a sieve, enough to test norms up to\n// 2 * 5072^2 by trial division, the far corner at Reach 1 plus the cycle.\nconst SP = [];\n{\n  const M = 7300, c = new Uint8Array(M + 1);\n  for (let i = 2; i \u003c= M; i++) {\n    if (c[i]) continue;\n    SP.push(i);\n    for (let j = i * i; j \u003c= M; j += i) c[j] = 1;\n  }\n}\nfunction isPrime(n) {\n  if (n \u003c 2) return false;\n  for (let i = 0; i \u003c SP.length; i++) {\n    const p = SP[i];\n    if (p * p > n) return true;\n    if (n % p === 0) return n === p;\n  }\n  return true;\n}\n// a + bi with a, b >= 0 is a Gaussian prime when its norm is a prime, or when\n// it lies on an axis and is a prime of the form 4n + 3.\nfunction gaussPrime(a, b) {\n  if (a === 0) return b % 4 === 3 && isPrime(b);\n  if (b === 0) return a % 4 === 3 && isPrime(a);\n  return isPrime(a * a + b * b);\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\n// Reach: the corner stays at the origin up to 0.1, then moves out along the\n// diagonal from 8 + 8i to 4800 + 4800i on a log scale. Each restart adds the\n// next of CYCLE, so the window wanders out where primes thin and comes back.\nconst reachOf = (u) => (u \u003c= 0.1 ? 0 : Math.round(8 * 600 ** ((u - 0.1) / 0.9)));\nconst CYCLE = [0, 24, 140];\n// The first k for a Step: the largest step length squared that fits.\nfunction firstK(step) {\n  let k = KS[0];\n  for (const q of KS) if (q \u003c= step * step + 1e-9) k = q;\n  return k;\n}\nconst nextK = (k) => {\n  for (const q of KS) if (q > k) return q;\n  return KMAX + 1;\n};\n\nconst DMAX = 1024;\n\nexport function setup(params) {\n  params.s = {\n    pr: new Uint8Array(N), dep: new Int16Array(N), par: new Int32Array(N), q: new Int32Array(N), born: new Float32Array(N),\n    ea: new Float32Array(N), ed: new Uint16Array(N), wa: new Float32Array(N), wash: new Float32Array(3), moat: new Float32Array(N), shore: [], grow: [], tg: 0.3, sp: 2, hueK: 0, startT: -1,\n    nPrime: 0, qlen: 0, lastQ: 0, plen: 1, head: 0, scan: 0, k: 2, k0: 2, off: -1, base: -1, stage: 0,\n    mode: 0, timer: 0, acc: 0, T: 0, fade: 1, moatA: 0,\n    hue: -1, pal: new Float32Array(DMAX * 3), dot: new Float32Array(3), buf: new Float32Array(N * 3),\n  };\n}\n\n// Lays out the window with its corner at off + off*i and seeds the flood at\n// the prime nearest the corner: 1 + i when the corner is the origin.\nfunction build(S, off) {\n  S.off = off;\n  S.nPrime = 0;\n  let seed = -1, best = 1e9;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, b = H - 1 - y, g = gaussPrime(x + off, b + off) ? 1 : 0;\n      S.pr[p] = g;\n      if (g) {\n        S.nPrime++;\n        const d = x * x + b * b;\n        if (d \u003c best) (best = d), (seed = p);\n      }\n    }\n  S.dep.fill(-1);\n  S.born.fill(-10);\n  S.ea.fill(0);\n  S.wa.fill(0);\n  S.moat.fill(0);\n  S.grow.length = 0;\n  S.shore = [];\n  S.qlen = 0;\n  S.head = 0;\n  S.scan = 0;\n  S.k = S.k0;\n  S.mode = 0;\n  S.timer = 0;\n  S.acc = 0;\n  S.moatA = 0;\n  S.lastQ = 0;\n  // A restart fades in over 0.6 s; the first window is there at once.\n  S.startT = S.T > 0 ? S.T : -1;\n  if (seed >= 0) {\n    S.dep[seed] = 0;\n    S.par[seed] = seed;\n    S.born[seed] = S.T;\n    S.q[S.qlen++] = seed;\n    soak(S, seed);\n  }\n}\n\n// The next prime the flood reaches: breadth first over the cluster, each\n// prime scanning its neighbours nearest first out to distance sqrt(k).\n// Only primes inside the window count, so a moat here is a moat of the\n// window: a prime just outside it could bridge one.\nfunction pull(S) {\n  const n = NK[min(S.k, KMAX)], pr = S.pr, dep = S.dep;\n  while (S.head \u003c S.qlen) {\n    const p = S.q[S.head], x = p & 63, y = p >> 6;\n    while (S.scan \u003c n) {\n      const i = S.scan++, X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        dep[c] = min(DMAX - 1, dep[p] + 1);\n        S.par[c] = p;\n        S.born[c] = S.T;\n        S.q[S.qlen++] = c;\n        return c;\n      }\n    }\n    S.head++;\n    S.scan = 0;\n  }\n  return -1;\n}\n\n// A segment a LED wide, soft at its sides, into the edge layer: each LED keeps\n// the strongest cover and the depth of the edge that gave it.\nfunction stamp(S, x0, y0, x1, y1, d, ea, ed) {\n  const vx = x1 - x0, vy = y1 - y0, L2 = vx * vx + vy * vy || 1;\n  const xa = max(0, floor(min(x0, x1)) - 1), xb = min(W - 1, Math.ceil(max(x0, x1)) + 1);\n  const ya = max(0, floor(min(y0, y1)) - 1), yb = min(H - 1, Math.ceil(max(y0, y1)) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const t = cl(((x - x0) * vx + (y - y0) * vy) / L2, 0, 1), ex = x0 + vx * t - x, ey = y0 + vy * t - y;\n      const a = 1 - sqrt(ex * ex + ey * ey) * 1.1;\n      if (a \u003c= 0) continue;\n      const p = y * W + x;\n      if (a > ea[p]) {\n        ea[p] = a;\n        if (ed) ed[p] = d;\n      }\n    }\n}\n\n// The ground the flood holds: a faint wash out to 2 LEDs round each reached\n// prime, so a moat shows as the dark band between the wash and the dots.\nfunction soak(S, p) {\n  const x0 = p & 63, y0 = p >> 6, wa = S.wa;\n  for (let dy = -2; dy \u003c= 2; dy++)\n    for (let dx = -2; dx \u003c= 2; dx++) {\n      const x = x0 + dx, y = y0 + dy;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const a = cl(1.15 - sqrt(dx * dx + dy * dy) * 0.38, 0, 1), q = y * W + x;\n      if (a > wa[q]) wa[q] = a;\n    }\n}\n\n// The flood has run out. The shore is every reached prime with an unreached\n// one within the next step; the moat line runs where the nearest reached\n// prime and the nearest unreached one are equally far.\nfunction meetMoat(S) {\n  const kn = min(nextK(S.k), KMAX), nk = NK[kn], pr = S.pr, dep = S.dep;\n  S.shore = [];\n  for (let h = 0; h \u003c S.qlen; h++) {\n    const p = S.q[h], x = p & 63, y = p >> 6;\n    for (let i = 1; i \u003c nk; i++) {\n      const X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        S.shore.push(p);\n        break;\n      }\n    }\n  }\n  const m = S.moat;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let dr = -1, du = -1;\n      for (let i = 0; i \u003c R49 && (dr \u003c 0 || du \u003c 0); i++) {\n        const X = x + ODX[i], Y = y + ODY[i];\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const c = Y * W + X;\n        if (!pr[c]) continue;\n        if (dep[c] >= 0) {\n          if (dr \u003c 0) dr = ODD[i];\n        } else if (du \u003c 0) du = ODD[i];\n      }\n      m[y * W + x] = dr > 0 && du > 0 ? max(0, 1 - abs(sqrt(dr) - sqrt(du)) * 0.8) : 0;\n    }\n  // A step that crossed nothing pulses for a third as long, so a prime\n  // trapped in a corner runs through its empty steps quickly.\n  S.plen = S.qlen > S.lastQ ? 1 : 0.35;\n  S.lastQ = S.qlen;\n}\n\nfunction raise(S) {\n  S.k = nextK(S.k);\n  S.head = 0;\n  S.scan = 0;\n  S.mode = S.k > KMAX ? 2 : 0;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 1.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(kv[1], 0.2, 3), k0 = firstK(cl(kv[2], 1.5, 4.5)), base = reachOf(cl(kv[3], 0, 1));\n  S.T += d;\n  S.hueK = kv[0] || 0;\n  if (base !== S.base) {\n    S.base = base;\n    S.stage = 0;\n    S.k0 = k0;\n    build(S, base);\n  } else if (k0 !== S.k0) {\n    // A longer first step carries on from here; a shorter one starts over.\n    const up = k0 > S.k0;\n    S.k0 = k0;\n    if (!up) build(S, S.off);\n    else if (S.mode \u003c 2 && k0 > S.k) {\n      S.k = k0;\n      S.head = 0;\n      S.scan = 0;\n      S.mode = 0;\n    }\n  }\n  const b = input.btnPressed || [];\n  if (b[0] && S.mode \u003c 2) raise(S);\n\n  // Each new edge grows from its parent for 0.3 s at Speed 2.\n  const tg = 0.6 / sp;\n  for (let i = S.grow.length - 1; i >= 0; i--) {\n    const c = S.grow[i];\n    if (S.T - S.born[c] >= tg) {\n      const p = S.par[c];\n      stamp(S, p & 63, p >> 6, c & 63, c >> 6, S.dep[c], S.ea, S.ed);\n      soak(S, c);\n      S.grow[i] = S.grow[S.grow.length - 1];\n      S.grow.pop();\n    }\n  }\n  S.tg = tg;\n\n  if (S.mode === 0) {\n    // A few dozen primes a second, more as the frontier (the primes queued\n    // but not yet scanned) widens: 56 a second at Speed 2 near 1 + i.\n    S.acc += d * sp * min(90, 28 + (S.qlen - S.head));\n    while (S.acc >= 1) {\n      S.acc -= 1;\n      const c = pull(S);\n      if (c >= 0) {\n        S.grow.push(c);\n        continue;\n      }\n      S.acc = 0;\n      if (S.qlen >= S.nPrime) {\n        S.mode = 2;\n        S.timer = 0;\n      } else {\n        meetMoat(S);\n        S.mode = 1;\n        S.timer = 0;\n      }\n      break;\n    }\n  } else if (S.mode === 1) {\n    // The moat: 0.7 s at Speed 2 of the shore pulsing, then k goes up.\n    S.timer += (d * sp * 0.72) / S.plen;\n    if (S.timer >= 1) raise(S);\n  } else {\n    // Filled: the coral holds for 3 s, fades for 1.5 s, and the next window\n    // in the cycle starts.\n    S.timer += d * sp * 0.5;\n    if (S.timer >= 4.5) {\n      S.stage = (S.stage + 1) % CYCLE.length;\n      build(S, S.base + CYCLE[S.stage]);\n    }\n  }\n  S.fade = S.mode === 2 ? cl((4.5 - S.timer) / 1.5, 0, 1) : cl((S.T - S.startT) / 0.6, 0, 1);\n  S.moatA = S.mode === 1 ? sin(PI * S.timer) : max(0, S.moatA - d * sp * 1.2);\n  S.sp = sp;\n}\n\n// Colours by depth: the hue runs out and back along a band of the wheel\n// every 72 steps of depth, so each breadth-first layer reads as a ring.\nfunction palette(S) {\n  const h0 = S.hueK + 0.13;\n  for (let i = 0; i \u003c DMAX; i++) {\n    let u = (i % 72) / 36;\n    if (u > 1) u = 2 - u;\n    hsv(h0 + 0.42 * u * u * (3 - 2 * u), 0.78, 1, S.pal, i * 3);\n  }\n  hsv(h0 + 0.5, 0.6, 0.3, S.dot, 0);\n  hsv(h0 + 0.47, 0.9, 0.26, S.wash, 0);\n  S.hue = S.hueK;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.hue !== S.hueK) palette(S);\n  const buf = S.buf, pal = S.pal, dot = S.dot, pr = S.pr, dep = S.dep, ea = S.ea, ed = S.ed, wa = S.wa, wash = S.wash, born = S.born, T = S.T;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const w = wa[p];\n    let r = wash[0] * w, g = wash[1] * w, b = wash[2] * w;\n    const a = ea[p];\n    if (a > 0) {\n      const c = ed[p] * 3, v = a * 0.62;\n      r = max(r, pal[c] * v);\n      g = max(g, pal[c + 1] * v);\n      b = max(b, pal[c + 2] * v);\n    }\n    if (pr[p]) {\n      const dd = dep[p];\n      if (dd \u003c 0) {\n        r = max(r, dot[0]);\n        g = max(g, dot[1]);\n        b = max(b, dot[2]);\n      } else {\n        // A new node flashes white and settles into its colour.\n        const c = dd * 3, fl = cl(1 - (T - born[p]) * 2.5, 0, 1);\n        r = pal[c] + (255 - pal[c]) * fl;\n        g = pal[c + 1] + (255 - pal[c + 1]) * fl;\n        b = pal[c + 2] + (255 - pal[c + 2]) * fl;\n      }\n    }\n    buf[o] = r;\n    buf[o + 1] = g;\n    buf[o + 2] = b;\n  }\n  // Edges still growing, from the parent toward the new prime.\n  if (S.grow.length) {\n    const tmp = S.tmp || (S.tmp = new Float32Array(N));\n    for (const c of S.grow) {\n      const p = S.par[c], t = cl((T - born[c]) / S.tg, 0, 1), x0 = p & 63, y0 = p >> 6, x1 = c & 63, y1 = c >> 6;\n      const xe = x0 + (x1 - x0) * t, ye = y0 + (y1 - y0) * t;\n      stamp(S, x0, y0, xe, ye, 0, tmp, null);\n      const xa = max(0, min(x0, x1) - 1), xb = min(W - 1, max(x0, x1) + 1), ya = max(0, min(y0, y1) - 1), yb = min(H - 1, max(y0, y1) + 1);\n      const cc = dep[c] * 3;\n      for (let y = ya; y \u003c= yb; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const q = y * W + x, v = tmp[q] * 0.8;\n          if (v \u003c= 0) continue;\n          tmp[q] = 0;\n          const o = q * 3;\n          buf[o] = max(buf[o], pal[cc] * v + 60 * v);\n          buf[o + 1] = max(buf[o + 1], pal[cc + 1] * v + 60 * v);\n          buf[o + 2] = max(buf[o + 2], pal[cc + 2] * v + 60 * v);\n        }\n    }\n  }\n  // The moat: its middle line glows pale and the shore primes pulse white.\n  if (S.moatA > 0.01) {\n    const m = S.moat, A = S.moatA;\n    for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n      const v = m[p] * A * 0.9;\n      if (v \u003c= 0) continue;\n      buf[o] += (170 - buf[o]) * v;\n      buf[o + 1] += (215 - buf[o + 1]) * v;\n      buf[o + 2] += (255 - buf[o + 2]) * v;\n    }\n    const pulse = 0.5 + 0.5 * sin(T * S.sp * 9);\n    for (const p of S.shore) {\n      const x = p & 63, y = p >> 6;\n      for (let dy = -1; dy \u003c= 1; dy++)\n        for (let dx = -1; dx \u003c= 1; dx++) {\n          const X = x + dx, Y = y + dy;\n          if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n          const o = (Y * W + X) * 3, v = A * (dx || dy ? 0.35 * pulse : 0.5 + 0.5 * pulse);\n          buf[o] += (255 - buf[o]) * v;\n          buf[o + 1] += (255 - buf[o + 1]) * v;\n          buf[o + 2] += (255 - buf[o + 2]) * v;\n        }\n    }\n  }\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * f, buf[p + 1] * f, buf[p + 2] * f);\n}\n","layer":{"id":"layer-gaussian-moat","type":"code","name":"gaussian-moat","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gaussian Moat\n// Family:  number\n// Idea:    Every LED is a Gaussian integer with the origin at the bottom-left corner, the Gaussian primes glow as faint dots, and a breadth-first flood from 1 + i hops from prime to prime in steps no longer than the square root of k, growing a branching coral coloured by its depth until it meets a moat, where its shore pulses and k rises to the next possible step so the flood can cross.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Gaussian moat problem (Basil Gordon, 1962), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1\n//\n// Knob 1: Hue. Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots.\n// Knob 2: Speed. At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower.\n// Knob 3: Step. The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go.\n// Knob 4: Reach. Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back.\n// Buttons: K1 tap raises k to the next step at once, so the flood jumps the moat it is working along.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, abs, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The squared lengths a step between two Gaussian integers can have: the\n// sums of two squares, 1 left out since no two odd primes sit 1 apart.\nconst KS = [];\nfor (let n = 2; n \u003c= 50; n++) {\n  let ok = false;\n  for (let a = 0; a * a \u003c= n && !ok; a++) {\n    const b = Math.round(sqrt(n - a * a));\n    if (a * a + b * b === n) ok = true;\n  }\n  if (ok) KS.push(n);\n}\nconst KMAX = 50;\n\n// Every offset with dx^2 + dy^2 \u003c= 50, nearest first. A flood with step k\n// scans the first NK[k] of them; the moat line reads the first R49.\nconst OD = [];\nfor (let dy = -7; dy \u003c= 7; dy++)\n  for (let dx = -7; dx \u003c= 7; dx++) {\n    const d = dx * dx + dy * dy;\n    if (d \u003c= KMAX) OD.push([d, dx, dy]);\n  }\nOD.sort((p, q) => p[0] - q[0] || p[2] - q[2] || p[1] - q[1]);\nconst ODX = new Int8Array(OD.length), ODY = new Int8Array(OD.length), ODD = new Uint8Array(OD.length);\nOD.forEach((o, i) => {\n  ODD[i] = o[0];\n  ODX[i] = o[1];\n  ODY[i] = o[2];\n});\nconst NK = new Uint16Array(KMAX + 1);\nfor (let k = 0; k \u003c= KMAX; k++) {\n  let n = 0;\n  while (n \u003c OD.length && ODD[n] \u003c= k) n++;\n  NK[k] = n;\n}\nlet R49 = 0;\nwhile (R49 \u003c OD.length && ODD[R49] \u003c= 49) R49++;\n\n// Rational primes up to 7300 by a sieve, enough to test norms up to\n// 2 * 5072^2 by trial division, the far corner at Reach 1 plus the cycle.\nconst SP = [];\n{\n  const M = 7300, c = new Uint8Array(M + 1);\n  for (let i = 2; i \u003c= M; i++) {\n    if (c[i]) continue;\n    SP.push(i);\n    for (let j = i * i; j \u003c= M; j += i) c[j] = 1;\n  }\n}\nfunction isPrime(n) {\n  if (n \u003c 2) return false;\n  for (let i = 0; i \u003c SP.length; i++) {\n    const p = SP[i];\n    if (p * p > n) return true;\n    if (n % p === 0) return n === p;\n  }\n  return true;\n}\n// a + bi with a, b >= 0 is a Gaussian prime when its norm is a prime, or when\n// it lies on an axis and is a prime of the form 4n + 3.\nfunction gaussPrime(a, b) {\n  if (a === 0) return b % 4 === 3 && isPrime(b);\n  if (b === 0) return a % 4 === 3 && isPrime(a);\n  return isPrime(a * a + b * b);\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5) * 255;\n  out[o + 1] = f(3) * 255;\n  out[o + 2] = f(1) * 255;\n}\n\n// Reach: the corner stays at the origin up to 0.1, then moves out along the\n// diagonal from 8 + 8i to 4800 + 4800i on a log scale. Each restart adds the\n// next of CYCLE, so the window wanders out where primes thin and comes back.\nconst reachOf = (u) => (u \u003c= 0.1 ? 0 : Math.round(8 * 600 ** ((u - 0.1) / 0.9)));\nconst CYCLE = [0, 24, 140];\n// The first k for a Step: the largest step length squared that fits.\nfunction firstK(step) {\n  let k = KS[0];\n  for (const q of KS) if (q \u003c= step * step + 1e-9) k = q;\n  return k;\n}\nconst nextK = (k) => {\n  for (const q of KS) if (q > k) return q;\n  return KMAX + 1;\n};\n\nconst DMAX = 1024;\n\nexport function setup(params) {\n  params.s = {\n    pr: new Uint8Array(N), dep: new Int16Array(N), par: new Int32Array(N), q: new Int32Array(N), born: new Float32Array(N),\n    ea: new Float32Array(N), ed: new Uint16Array(N), wa: new Float32Array(N), wash: new Float32Array(3), moat: new Float32Array(N), shore: [], grow: [], tg: 0.3, sp: 2, hueK: 0, startT: -1,\n    nPrime: 0, qlen: 0, lastQ: 0, plen: 1, head: 0, scan: 0, k: 2, k0: 2, off: -1, base: -1, stage: 0,\n    mode: 0, timer: 0, acc: 0, T: 0, fade: 1, moatA: 0,\n    hue: -1, pal: new Float32Array(DMAX * 3), dot: new Float32Array(3), buf: new Float32Array(N * 3),\n  };\n}\n\n// Lays out the window with its corner at off + off*i and seeds the flood at\n// the prime nearest the corner: 1 + i when the corner is the origin.\nfunction build(S, off) {\n  S.off = off;\n  S.nPrime = 0;\n  let seed = -1, best = 1e9;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, b = H - 1 - y, g = gaussPrime(x + off, b + off) ? 1 : 0;\n      S.pr[p] = g;\n      if (g) {\n        S.nPrime++;\n        const d = x * x + b * b;\n        if (d \u003c best) (best = d), (seed = p);\n      }\n    }\n  S.dep.fill(-1);\n  S.born.fill(-10);\n  S.ea.fill(0);\n  S.wa.fill(0);\n  S.moat.fill(0);\n  S.grow.length = 0;\n  S.shore = [];\n  S.qlen = 0;\n  S.head = 0;\n  S.scan = 0;\n  S.k = S.k0;\n  S.mode = 0;\n  S.timer = 0;\n  S.acc = 0;\n  S.moatA = 0;\n  S.lastQ = 0;\n  // A restart fades in over 0.6 s; the first window is there at once.\n  S.startT = S.T > 0 ? S.T : -1;\n  if (seed >= 0) {\n    S.dep[seed] = 0;\n    S.par[seed] = seed;\n    S.born[seed] = S.T;\n    S.q[S.qlen++] = seed;\n    soak(S, seed);\n  }\n}\n\n// The next prime the flood reaches: breadth first over the cluster, each\n// prime scanning its neighbours nearest first out to distance sqrt(k).\n// Only primes inside the window count, so a moat here is a moat of the\n// window: a prime just outside it could bridge one.\nfunction pull(S) {\n  const n = NK[min(S.k, KMAX)], pr = S.pr, dep = S.dep;\n  while (S.head \u003c S.qlen) {\n    const p = S.q[S.head], x = p & 63, y = p >> 6;\n    while (S.scan \u003c n) {\n      const i = S.scan++, X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        dep[c] = min(DMAX - 1, dep[p] + 1);\n        S.par[c] = p;\n        S.born[c] = S.T;\n        S.q[S.qlen++] = c;\n        return c;\n      }\n    }\n    S.head++;\n    S.scan = 0;\n  }\n  return -1;\n}\n\n// A segment a LED wide, soft at its sides, into the edge layer: each LED keeps\n// the strongest cover and the depth of the edge that gave it.\nfunction stamp(S, x0, y0, x1, y1, d, ea, ed) {\n  const vx = x1 - x0, vy = y1 - y0, L2 = vx * vx + vy * vy || 1;\n  const xa = max(0, floor(min(x0, x1)) - 1), xb = min(W - 1, Math.ceil(max(x0, x1)) + 1);\n  const ya = max(0, floor(min(y0, y1)) - 1), yb = min(H - 1, Math.ceil(max(y0, y1)) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const t = cl(((x - x0) * vx + (y - y0) * vy) / L2, 0, 1), ex = x0 + vx * t - x, ey = y0 + vy * t - y;\n      const a = 1 - sqrt(ex * ex + ey * ey) * 1.1;\n      if (a \u003c= 0) continue;\n      const p = y * W + x;\n      if (a > ea[p]) {\n        ea[p] = a;\n        if (ed) ed[p] = d;\n      }\n    }\n}\n\n// The ground the flood holds: a faint wash out to 2 LEDs round each reached\n// prime, so a moat shows as the dark band between the wash and the dots.\nfunction soak(S, p) {\n  const x0 = p & 63, y0 = p >> 6, wa = S.wa;\n  for (let dy = -2; dy \u003c= 2; dy++)\n    for (let dx = -2; dx \u003c= 2; dx++) {\n      const x = x0 + dx, y = y0 + dy;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const a = cl(1.15 - sqrt(dx * dx + dy * dy) * 0.38, 0, 1), q = y * W + x;\n      if (a > wa[q]) wa[q] = a;\n    }\n}\n\n// The flood has run out. The shore is every reached prime with an unreached\n// one within the next step; the moat line runs where the nearest reached\n// prime and the nearest unreached one are equally far.\nfunction meetMoat(S) {\n  const kn = min(nextK(S.k), KMAX), nk = NK[kn], pr = S.pr, dep = S.dep;\n  S.shore = [];\n  for (let h = 0; h \u003c S.qlen; h++) {\n    const p = S.q[h], x = p & 63, y = p >> 6;\n    for (let i = 1; i \u003c nk; i++) {\n      const X = x + ODX[i], Y = y + ODY[i];\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const c = Y * W + X;\n      if (pr[c] && dep[c] \u003c 0) {\n        S.shore.push(p);\n        break;\n      }\n    }\n  }\n  const m = S.moat;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let dr = -1, du = -1;\n      for (let i = 0; i \u003c R49 && (dr \u003c 0 || du \u003c 0); i++) {\n        const X = x + ODX[i], Y = y + ODY[i];\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const c = Y * W + X;\n        if (!pr[c]) continue;\n        if (dep[c] >= 0) {\n          if (dr \u003c 0) dr = ODD[i];\n        } else if (du \u003c 0) du = ODD[i];\n      }\n      m[y * W + x] = dr > 0 && du > 0 ? max(0, 1 - abs(sqrt(dr) - sqrt(du)) * 0.8) : 0;\n    }\n  // A step that crossed nothing pulses for a third as long, so a prime\n  // trapped in a corner runs through its empty steps quickly.\n  S.plen = S.qlen > S.lastQ ? 1 : 0.35;\n  S.lastQ = S.qlen;\n}\n\nfunction raise(S) {\n  S.k = nextK(S.k);\n  S.head = 0;\n  S.scan = 0;\n  S.mode = S.k > KMAX ? 2 : 0;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 1.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(kv[1], 0.2, 3), k0 = firstK(cl(kv[2], 1.5, 4.5)), base = reachOf(cl(kv[3], 0, 1));\n  S.T += d;\n  S.hueK = kv[0] || 0;\n  if (base !== S.base) {\n    S.base = base;\n    S.stage = 0;\n    S.k0 = k0;\n    build(S, base);\n  } else if (k0 !== S.k0) {\n    // A longer first step carries on from here; a shorter one starts over.\n    const up = k0 > S.k0;\n    S.k0 = k0;\n    if (!up) build(S, S.off);\n    else if (S.mode \u003c 2 && k0 > S.k) {\n      S.k = k0;\n      S.head = 0;\n      S.scan = 0;\n      S.mode = 0;\n    }\n  }\n  const b = input.btnPressed || [];\n  if (b[0] && S.mode \u003c 2) raise(S);\n\n  // Each new edge grows from its parent for 0.3 s at Speed 2.\n  const tg = 0.6 / sp;\n  for (let i = S.grow.length - 1; i >= 0; i--) {\n    const c = S.grow[i];\n    if (S.T - S.born[c] >= tg) {\n      const p = S.par[c];\n      stamp(S, p & 63, p >> 6, c & 63, c >> 6, S.dep[c], S.ea, S.ed);\n      soak(S, c);\n      S.grow[i] = S.grow[S.grow.length - 1];\n      S.grow.pop();\n    }\n  }\n  S.tg = tg;\n\n  if (S.mode === 0) {\n    // A few dozen primes a second, more as the frontier (the primes queued\n    // but not yet scanned) widens: 56 a second at Speed 2 near 1 + i.\n    S.acc += d * sp * min(90, 28 + (S.qlen - S.head));\n    while (S.acc >= 1) {\n      S.acc -= 1;\n      const c = pull(S);\n      if (c >= 0) {\n        S.grow.push(c);\n        continue;\n      }\n      S.acc = 0;\n      if (S.qlen >= S.nPrime) {\n        S.mode = 2;\n        S.timer = 0;\n      } else {\n        meetMoat(S);\n        S.mode = 1;\n        S.timer = 0;\n      }\n      break;\n    }\n  } else if (S.mode === 1) {\n    // The moat: 0.7 s at Speed 2 of the shore pulsing, then k goes up.\n    S.timer += (d * sp * 0.72) / S.plen;\n    if (S.timer >= 1) raise(S);\n  } else {\n    // Filled: the coral holds for 3 s, fades for 1.5 s, and the next window\n    // in the cycle starts.\n    S.timer += d * sp * 0.5;\n    if (S.timer >= 4.5) {\n      S.stage = (S.stage + 1) % CYCLE.length;\n      build(S, S.base + CYCLE[S.stage]);\n    }\n  }\n  S.fade = S.mode === 2 ? cl((4.5 - S.timer) / 1.5, 0, 1) : cl((S.T - S.startT) / 0.6, 0, 1);\n  S.moatA = S.mode === 1 ? sin(PI * S.timer) : max(0, S.moatA - d * sp * 1.2);\n  S.sp = sp;\n}\n\n// Colours by depth: the hue runs out and back along a band of the wheel\n// every 72 steps of depth, so each breadth-first layer reads as a ring.\nfunction palette(S) {\n  const h0 = S.hueK + 0.13;\n  for (let i = 0; i \u003c DMAX; i++) {\n    let u = (i % 72) / 36;\n    if (u > 1) u = 2 - u;\n    hsv(h0 + 0.42 * u * u * (3 - 2 * u), 0.78, 1, S.pal, i * 3);\n  }\n  hsv(h0 + 0.5, 0.6, 0.3, S.dot, 0);\n  hsv(h0 + 0.47, 0.9, 0.26, S.wash, 0);\n  S.hue = S.hueK;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.hue !== S.hueK) palette(S);\n  const buf = S.buf, pal = S.pal, dot = S.dot, pr = S.pr, dep = S.dep, ea = S.ea, ed = S.ed, wa = S.wa, wash = S.wash, born = S.born, T = S.T;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const w = wa[p];\n    let r = wash[0] * w, g = wash[1] * w, b = wash[2] * w;\n    const a = ea[p];\n    if (a > 0) {\n      const c = ed[p] * 3, v = a * 0.62;\n      r = max(r, pal[c] * v);\n      g = max(g, pal[c + 1] * v);\n      b = max(b, pal[c + 2] * v);\n    }\n    if (pr[p]) {\n      const dd = dep[p];\n      if (dd \u003c 0) {\n        r = max(r, dot[0]);\n        g = max(g, dot[1]);\n        b = max(b, dot[2]);\n      } else {\n        // A new node flashes white and settles into its colour.\n        const c = dd * 3, fl = cl(1 - (T - born[p]) * 2.5, 0, 1);\n        r = pal[c] + (255 - pal[c]) * fl;\n        g = pal[c + 1] + (255 - pal[c + 1]) * fl;\n        b = pal[c + 2] + (255 - pal[c + 2]) * fl;\n      }\n    }\n    buf[o] = r;\n    buf[o + 1] = g;\n    buf[o + 2] = b;\n  }\n  // Edges still growing, from the parent toward the new prime.\n  if (S.grow.length) {\n    const tmp = S.tmp || (S.tmp = new Float32Array(N));\n    for (const c of S.grow) {\n      const p = S.par[c], t = cl((T - born[c]) / S.tg, 0, 1), x0 = p & 63, y0 = p >> 6, x1 = c & 63, y1 = c >> 6;\n      const xe = x0 + (x1 - x0) * t, ye = y0 + (y1 - y0) * t;\n      stamp(S, x0, y0, xe, ye, 0, tmp, null);\n      const xa = max(0, min(x0, x1) - 1), xb = min(W - 1, max(x0, x1) + 1), ya = max(0, min(y0, y1) - 1), yb = min(H - 1, max(y0, y1) + 1);\n      const cc = dep[c] * 3;\n      for (let y = ya; y \u003c= yb; y++)\n        for (let x = xa; x \u003c= xb; x++) {\n          const q = y * W + x, v = tmp[q] * 0.8;\n          if (v \u003c= 0) continue;\n          tmp[q] = 0;\n          const o = q * 3;\n          buf[o] = max(buf[o], pal[cc] * v + 60 * v);\n          buf[o + 1] = max(buf[o + 1], pal[cc + 1] * v + 60 * v);\n          buf[o + 2] = max(buf[o + 2], pal[cc + 2] * v + 60 * v);\n        }\n    }\n  }\n  // The moat: its middle line glows pale and the shore primes pulse white.\n  if (S.moatA > 0.01) {\n    const m = S.moat, A = S.moatA;\n    for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n      const v = m[p] * A * 0.9;\n      if (v \u003c= 0) continue;\n      buf[o] += (170 - buf[o]) * v;\n      buf[o + 1] += (215 - buf[o + 1]) * v;\n      buf[o + 2] += (255 - buf[o + 2]) * v;\n    }\n    const pulse = 0.5 + 0.5 * sin(T * S.sp * 9);\n    for (const p of S.shore) {\n      const x = p & 63, y = p >> 6;\n      for (let dy = -1; dy \u003c= 1; dy++)\n        for (let dx = -1; dx \u003c= 1; dx++) {\n          const X = x + dx, Y = y + dy;\n          if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n          const o = (Y * W + X) * 3, v = A * (dx || dy ? 0.35 * pulse : 0.5 + 0.5 * pulse);\n          buf[o] += (255 - buf[o]) * v;\n          buf[o + 1] += (255 - buf[o + 1]) * v;\n          buf[o + 2] += (255 - buf[o + 2]) * v;\n        }\n    }\n  }\n  const f = S.fade;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * f, buf[p + 1] * f, buf[p + 2] * f);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Step=1.5..4.5, Reach=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flood's colours round the wheel; at 0 the coral runs from gold at 1 + i through green to cyan and back over every 72 steps of depth, across pale blue prime dots."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the flood reaches 56 primes a second near 1 + i, faster as its frontier widens, and each moat pulses for 0.7 s; at 0.2 everything runs ten times slower."},{"name":"Step","min":1.5,"max":4.5,"about":"The first step length: at 1.5 the flood starts with k = 2 and meets moats at k = 2, 4, 5, 8, 9 and 13 before the last primes in the window join at 16; at 4.5 it starts at k = 20 and fans across the window in one go."},{"name":"Reach","min":0,"max":1,"about":"Moves the window out along the diagonal: the corner is 0 + 0i up to 0.1, then from 8 + 8i to 4800 + 4800i at 1, where primes are half as dense and the corner prime stays trapped until k = 20. Each restart moves the corner a further 24, then 140, before coming back."}],"start":[0,2,1.5,0.06],"measures":{"motion":0.0332,"detail":0.138,"edges":0.7904,"complexity":0.3035,"coverage":0.2952,"colour":0.1811,"drift":0.1107},"knobResponse":[0.0371,0.0267,0.0437,0.056]},{"slug":"gear-train","title":"Gear Train","family":"machine","round":8,"note":"패널 발치의 크랭크가 색 톱니바퀴를 돌려요. 바퀴마다 아래 바퀴와 톱니를 맞물려 꼭대기까지 이어지고, 작은 바퀴일수록 빨리 돌아요. K4 를 올리면 모든 바퀴가 톱니 하나씩 딸깍 걸려 나가요.","idea":"A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.","buttons":"K1 tap reverses the crank; the train slows, stops and runs the other way.","code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-gear-train","type":"code","name":"gear-train","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second."},{"name":"Gears","min":4,"max":9,"about":"How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel."},{"name":"Tick","min":0,"max":1,"about":"Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet."}],"start":[0,2,4,0.06],"measures":{"motion":0.8362,"detail":0.0922,"edges":0.4218,"complexity":1.1517,"coverage":0.8876,"colour":0.5762,"drift":0.1048},"knobResponse":[0.3786,0.1249,0.2931,0.0655]},{"slug":"geyser","title":"Geyser","family":"volcano","round":26,"note":"눈 덮인 지열 지대의 간헐천을 땅속까지 잘라 봐요. 화도에 기포가 차면 청록 웅덩이가 유리 돔으로 부풀다 흰 물기둥으로 터지고, 김 구름이 바람에 흘러가요. K1 은 정오에서 오로라 밤까지 빛을 바꾸고, 누르면 바로 분출해요.","idea":"A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.","buttons":"K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.","code":"// ===== Patternflow pattern =====\n// Title:   Geyser\n// Family:  volcano\n// Idea:    A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after Strokkur in the Haukadalur geothermal field, Iceland\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1\n//\n// Knob 1: Light. A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing.\n// Knob 2: Speed. At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer.\n// Knob 3: Power. At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows.\n// Knob 4: Wind. At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it.\n// Buttons: K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst sc = (c, k) => c.map((v, n) => v * (k.length ? k[n] : k));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the pool's brim, the bowl's floor, the snow on the flat, the horizon,\n// the drained water level; the vent's column; the chamber's centre and radii.\nconst [BRIM, BOWL, GY, HZ, LOW, C] = [71, 80, 75, 61, 103, 32];\nconst [KX, KY, KRX, KRY] = [30.5, 116, 10, 6.5];\n// Gravity in rows per second squared.\nconst G = 150;\n// Seconds at Speed 2: refill, the big bubble's climb, the dome, the drain.\nconst [HEAT, RISE, DOME, FALL] = [7.5, 0.7, 0.45, 3.5];\n\n// The ground: the bowl, the sinter mound with a lip at the brim, the flat.\nconst SURF = new Float32Array(W).map((_, x) => {\n  const dx = abs(x + 0.5 - C);\n  if (dx \u003c 12) return BRIM + (BOWL - BRIM) * (1 - (dx / 12) ** 2) ** 0.7;\n  if (dx \u003c 27) return BRIM - 0.8 * (1 - sm(12, 16, dx)) + (GY - BRIM) * sm(14, 27, dx);\n  return GY + 0.8 * (vn(x * 0.2, 3) - 0.5);\n});\n// The conduit wanders a little and narrows at row 95.\nconst CXA = new Float32Array(H).map((_, y) => C - 0.5 + 0.8 * sin(y * 0.23) + 0.4 * sin(y * 0.61 + 1));\nconst CHW = new Float32Array(H).map((_, y) => 2 + 0.4 * sin(y * 0.37) - 0.6 * exp(-(((y - 95) / 3) ** 2)));\n// The hill behind the field on the right, the ice cap on the horizon at the left.\nconst HILL = new Float32Array(W).map((_, x) => HZ - 20 * sm(30, 66, x) ** 0.9 - 1.2 * vn(x * 0.35, 4));\nconst CAP = new Float32Array(W).map((_, x) => HZ - 1.5 - 2.6 * sqrt(max(0, 1 - ((x + 0.5 - 13) / 17) ** 2)));\n// Cracks feeding ground water to the chamber.\nconst FIS = [[[0, 94], [7, 98], [15, 104], [22, 112]], [[63, 103], [55, 108], [47, 113], [40, 117]]];\n// The beds, top down, colour and rows: sinter, geyserite, ochre, sinter, rust,\n// sulphur, grey clay, ochre, dark rust, tuff, sulphur, dark clay, basalt.\nconst LAY = [[206, 200, 186, 3], [176, 172, 166, 2], [172, 122, 54, 2], [196, 188, 172, 2], [150, 70, 40, 3], [206, 182, 62, 1], [126, 116, 108, 4], [162, 112, 52, 2], [120, 56, 36, 2], [104, 92, 84, 4], [200, 176, 64, 1], [84, 74, 72, 5], [58, 58, 68, 99]];\nconst SULF = [214, 190, 70], RUST = [158, 76, 42], LINE = [214, 210, 196], SNOW = [214, 222, 236];\nconst MAT = [[96, 116, 52], [214, 112, 38], [212, 186, 70]];\nconst COOL = [24, 62, 150], HOT = [44, 176, 204], FOAM = [212, 232, 236];\nconst JACK = [[200, 46, 40], [232, 192, 44], [40, 92, 200], [44, 44, 52], [58, 140, 92], [222, 112, 34], [150, 60, 150]];\n\n// Noon, blue hour, night: sky overhead and at the horizon, daylight, steam lit\n// and in shade, the cut rock, the water.\nconst LIGHT = [\n  [0, [20, 62, 152], [122, 156, 198], [0.95, 0.93, 0.88], [236, 234, 226], [118, 134, 168], 1, 1],\n  [0.5, [10, 24, 74], [66, 88, 148], [0.42, 0.48, 0.7], [158, 168, 212], [50, 60, 108], 0.85, 0.78],\n  [1, [3, 7, 24], [12, 26, 54], [0.24, 0.3, 0.42], [132, 154, 168], [30, 42, 70], 0.62, 0.6],\n];\nfunction lightAt(g) {\n  const a = LIGHT[g > 0.5 ? 1 : 0], b = LIGHT[g > 0.5 ? 2 : 1], u = (g - a[0]) / (b[0] - a[0]);\n  const m = (k) => (a[k].length ? a[k].map((v, c) => mix(v, b[k][c], u)) : mix(a[k], b[k], u));\n  return { top: m(1), low: m(2), amb: m(3), lit: m(4), dark: m(5), rock: m(6), water: m(7), sun: 1 - sm(0, 0.4, g), ag: sm(0.15, 0.45, g) * (1 - sm(0.55, 0.85, g)), moon: sm(0.6, 0.95, g), stars: sm(0.4, 0.85, g), aur: sm(0.6, 0.95, g) };\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), bg: F32(N * 3), rock: F32(N * 3), kind: new Uint8Array(N), sky: new Uint8Array(N), fu: F32(N), D: F32(N), CB: F32(N),\n    t: 0, ph: 0, pt: HEAT - 1.25, wl: BRIM, wl0: LOW, T: 0.9, T0: 0.25, hv: 0, dh: 0, bw: 6, key: -1, ca: 99, ja: 99,\n    bub: [], par: [], spr: [], puffs: [], pop: 0, nb: 0, np: 0, ns: 0, nv: 0, ox: 0, oy: 0, big: -1,\n  });\n  const { kind, fu, rock } = S;\n  // Kinds: 0 the view, 1 the bowl, 2 rock, 3 conduit, 4 crack, 5 chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5;\n    let k = Y >= SURF[x] ? 2 : abs(X - C) \u003c 12 && Y >= BRIM ? 1 : 0;\n    if (k === 2 && ((X - KX) / KRX) ** 2 + ((Y - KY) / KRY) ** 2 \u003c 1 + 0.5 * (vn(X * 0.35, Y * 0.35) - 0.5)) k = 5;\n    else if (k === 2 && y \u003c KY && abs(X - CXA[y]) \u003c CHW[y]) k = 3;\n    kind[i] = k;\n    if (!k && Y \u003c min(HILL[x], CAP[x])) S.sky[i] = 1;\n  }\n  for (const p of FIS)\n    for (let j = 1, len = 0; j \u003c p.length; j++) {\n      const [x0, y0] = p[j - 1], [x1, y1] = p[j], n = hypot(x1 - x0, y1 - y0) * 3;\n      for (let u = 0; u \u003c= n; u++) {\n        const i = floor(mix(y0, y1, u / n)) * W + floor(mix(x0, x1, u / n));\n        if (kind[i] === 2) (kind[i] = 4), (fu[i] = len + u / 3);\n      }\n      len += n / 3;\n    }\n  // The cut rock: beds bend with the ground, a silica lining and sulphur and\n  // rust stains round every water way, columnar basalt below, bacterial mats\n  // on the mound and snow on the flat.\n  const cav = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, dx = abs(X - C), s = SURF[x];\n    if (kind[i] >= 3) cav.push(i);\n    if (kind[i] !== 2) continue;\n    let d = Y - s + 2.4 * (vn(x * 0.08, y * 0.06 + 9) - 0.5) + 0.05 * (X - C), j = 0, dist = 9, gr = 0.9 + 0.18 * hash(x, y + 77);\n    while (d > LAY[j][3] && j \u003c LAY.length - 1) (d -= LAY[j][3]), j++;\n    let c = LAY[j];\n    if (j === LAY.length - 1) {\n      const jx = (X + 3 * vn(1.7, Y * 0.12)) / 6;\n      gr *= (jx - floor(jx) \u003c 0.17 ? 0.6 : 1) * (0.85 + 0.3 * hash(floor(jx), 5));\n    }\n    for (let v = -5; v \u003c= 5; v++)\n      for (let u = -5; u \u003c= 5; u++) {\n        const xx = x + u, yy = y + v, k = xx >= 0 && xx \u003c W && yy \u003c H ? kind[yy * W + xx] : 2;\n        if (k !== 2 && k) dist = min(dist, hypot(u, v) * (k === 4 ? 2.5 : 1));\n      }\n    if (dist \u003c 1.5) c = LINE;\n    else if (dist \u003c 5) c = c.map((v, n) => mix(v, (dist \u003c 3 ? SULF : RUST)[n], (5 - dist) * 0.17));\n    if (dx > 13 && dx \u003c 26 && Y - s \u003c 1.4) c = MAT[floor(cl(vn(X * 0.45, 2) * 2.2 - 0.3, 0, 2.99))];\n    if (dx >= 26 && Y - s \u003c 1.5) c = SNOW;\n    for (let n = 0; n \u003c 3; n++) rock[i * 3 + n] = c[n] * gr;\n  }\n  S.cav = Int32Array.from(cav);\n  // Visitors behind the rope on both sides, in their parkas.\n  S.ppl = [];\n  for (const [x0, x1] of [[2, 18], [46, 62]])\n    for (let x = x0 + rnd() * 2; x \u003c x1; x += 2.2 + rnd() * 2.4)\n      S.ppl.push({ x: floor(x), h: rnd() \u003c 0.3 ? 5 : 4, c: JACK[floor(rnd() * 7)], hat: rnd() \u003c 0.5, dl: rnd() * 0.9, up: rnd() \u003c 0.7 });\n}\n\n// The breeze in columns per second at row y, stronger aloft.\nconst wind = (S, y) => (6 + 16 * S.w) * (0.35 + 0.65 * sm(80, 8, y));\nfunction puff(S, x, y, r, a, vy, life, gr, rmax) {\n  if (S.puffs.length > 210) S.puffs.shift();\n  S.puffs.push({ x, y, r, a, vy, rise: -(1 + 2.5 * rnd()), life, gr, rmax, age: 0, ph: rnd() * 7 });\n}\nconst spray = (S, x, y, vx, vy) => S.spr.length \u003c 700 && S.spr.push({ x, y, vx, vy, life: 2.5 });\n\nfunction enter(S, ph) {\n  Object.assign(S, { ph, pt: 0, wl0: S.wl, T0: S.T });\n  if (ph === 2) S.ca = 0;\n  if (ph === 3) {\n    // The dome tears open in a ring of spray.\n    S.ja = 0;\n    for (let n = 0; n \u003c 40; n++) spray(S, C + (rnd() - 0.5) * S.bw * 1.6, BRIM - S.dh * rnd(), (rnd() - 0.5) * 70, -(40 + 90 * rnd()));\n    for (let n = 0; n \u003c 6; n++) puff(S, C + (rnd() - 0.5) * 12, BRIM - 3 - 4 * rnd(), 3 + rnd() * 2, 0.6, -(10 + 10 * rnd()), 8 + 3 * rnd(), 1.5, 12 + 6 * S.P);\n  }\n}\n\nfunction step(S, d, hold) {\n  const P = S.P, Dj = 1.1 + 1.1 * P, Rl = RISE - 0.35 * P, Dl = DOME - 0.2 * P, t = (S.t += d);\n  if (!hold) (S.pt += d), (S.ca += d), (S.ja += d);\n  if (S.pt >= [HEAT, Rl, Dl, Dj, FALL][S.ph]) enter(S, (S.ph + 1) % 5);\n  const { ph, pt } = S;\n  // The water level and how hot the water is.\n  if (ph === 0) (S.wl = mix(S.wl0, BRIM, sm(0, 6, pt))), (S.T = mix(S.T0, 1, sm(0, HEAT, pt)));\n  else if (ph === 1) (S.wl = mix(S.wl0, BRIM, sm(0, 0.5, pt))), (S.T = mix(S.T0, 1, sm(0, 0.4, pt)));\n  else if (ph === 2) S.wl = BRIM;\n  else if (ph === 3) (S.wl = BRIM), (S.T = 1 - 0.65 * sm(0, Dj, pt));\n  else (S.wl = mix(S.wl0, LOW, sm(0.2, 2.6, pt)) + 1.6 * exp(-pt * 1.1) * sin(pt * 10) * sm(0.3, 0.8, pt)), (S.T = mix(S.T0, 0.25, sm(0, FALL, pt)));\n  // The pool heaves before it goes, the big bubble climbs, the dome swells.\n  S.hv = ph === 0 ? (1.1 + P) * sm(4.5, 7.5, pt) * sin(t * 4.2) ** 2 : ph === 1 ? 1 + (2.2 + P) * sm(0, Rl, pt) : 0;\n  S.big = ph === 1 ? mix(KY - KRY + 1, BOWL - 2, sm(0, Rl, pt) ** 1.4) : -1;\n  S.bw = 7.5 + 4 * P;\n  S.dh = ph === 2 ? (9 + 7 * P) * sm(0, Dl, pt) ** 0.8 + 0.5 * sin(pt * 30) : 0;\n\n  // Steam bubbles grow as they climb from the chamber's floor. They collapse\n  // in cooler water; once it is hot through they reach the pool and pop.\n  for (S.nb += d * (1.5 + 18 * S.T * S.T) * (ph === 3 ? 3 : ph === 4 ? 0.3 : 1) * (1 + 0.8 * P); S.nb >= 1; S.nb--)\n    if (S.bub.length \u003c 160) S.bub.push({ x: KX + (rnd() - 0.5) * KRX * 1.3, y: KY + KRY * (0.25 + 0.5 * rnd()), r: 0.4, v: 3 + 4 * rnd() });\n  const cr = ph > 0 && ph \u003c 4 ? -9 : mix(106, BOWL - 4, sm(0.35, 0.92, S.T));\n  for (const b of S.bub) {\n    const yi = cl(floor(b.y), 0, H - 1), inC = b.y \u003c KY - KRY + 1.5;\n    if (inC) (b.x += (CXA[yi] + 0.5 - b.x) * min(1, d * 8)), (b.v = min(32, b.v + 26 * d));\n    else (b.x += (KX - b.x) * d * 0.4 * sm(KY, KY - KRY, b.y) + sin(t * 3 + b.y) * d), (b.v = min(14, b.v + 8 * d));\n    b.y -= b.v * d * (ph === 3 ? 1.8 : 1);\n    b.r = min(inC ? (b.y \u003c BOWL ? 1.2 : CHW[yi] - 0.3) : 2.3, b.r + d * (0.3 + 0.7 * S.T));\n    if (b.y \u003c cr || (S.big > 0 && b.y > S.big && b.y \u003c S.big + 10)) b.dead = 1;\n    else if (b.y \u003c= S.wl + 0.5) {\n      b.dead = 1;\n      if (S.wl \u003c BOWL) {\n        S.pop = min(1.5, S.pop + 0.15 * b.r);\n        if (rnd() \u003c 0.5) puff(S, b.x + (rnd() - 0.5) * 8, S.wl - 2, 1.8, 0.3, -6, 3 + 2 * rnd(), 1, 5);\n      }\n    }\n  }\n  S.bub = S.bub.filter((b) => !b.dead);\n  S.pop *= exp(-3 * d);\n\n  // The jet: slabs of water fly up and spread; past the top they break up.\n  if (ph === 3) {\n    const u = pt / Dj, v = sqrt(2 * G * (64 + 46 * P)) * (1 - 0.25 * sm(0.7, 1, u)) * (1 - 0.6 * sm(0.45, 0.8, P) * exp(-(((u - 0.48) / 0.09) ** 2)));\n    for (S.np += d * v * 0.6; S.np >= 1; S.np--) S.par.push({ x: C + (rnd() - 0.5) * 1.2, y: BRIM - 1 - v * d * rnd(), vy: -v * (0.95 + 0.1 * rnd()), w: (3.5 + 3.5 * P) * (0.85 + 0.3 * rnd()), a: 1, ap: 0 });\n  }\n  for (const q of S.par) {\n    q.vy += G * d;\n    q.y += q.vy * d;\n    q.x += wind(S, q.y) * 0.35 * d;\n    q.w += d * (4.5 + 4.5 * P) * (q.ap ? 2 : 1);\n    if (!q.ap && q.vy > -25) {\n      q.ap = 1;\n      for (let n = 0; n \u003c 2; n++) spray(S, q.x + (rnd() - 0.5) * q.w * 2, q.y, (rnd() - 0.5) * 64, q.vy + (rnd() - 0.6) * 30);\n    }\n    if (rnd() \u003c d * 3) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      spray(S, q.x + sd * q.w, q.y, sd * (8 + 26 * rnd()), q.vy * 0.75);\n    }\n    if (q.ap) q.a -= d * 1.6;\n    if (q.y > BRIM || q.a \u003c= 0) q.dead = 1;\n  }\n  S.par = S.par.filter((q) => !q.dead);\n  // Steam boils off the column while it stands and a little after.\n  if (S.ja \u003c Dj + 0.8 && S.par.length)\n    for (S.ns += d * (40 + 40 * P); S.ns >= 1; S.ns--) {\n      const q = S.par[floor(rnd() * S.par.length)];\n      puff(S, q.x + (rnd() - 0.5) * q.w * 1.8, q.y, 2.5 + q.w * 0.6, 0.55 + 0.25 * rnd(), max(-30, q.vy * 0.3), 10 + 4 * rnd() + 3 * P, 2 + 1.5 * rnd(), 17 + 7 * P);\n    }\n  for (const s of S.spr) {\n    s.vy = min(90, s.vy + G * 0.85 * d);\n    s.vx *= 1 - 0.5 * d;\n    s.x += (s.vx + wind(S, s.y) * 0.5) * d;\n    s.y += s.vy * d;\n    s.life -= d;\n    const x = floor(s.x), y = floor(s.y);\n    if (s.life \u003c 0 || x \u003c 0 || x >= W || y >= H || (y >= 0 && S.kind[y * W + x] && s.vy > 0)) s.dead = 1;\n  }\n  S.spr = S.spr.filter((s) => !s.dead);\n\n  // Gentle steam off the pool, and from small vents out on the field.\n  const wet = S.wl \u003c BOWL - 1;\n  for (S.nv += d * (2 + (wet ? 4 + 5 * S.T : 1) * (1 + P)); S.nv >= 1; S.nv--)\n    if (rnd() \u003c 0.7) puff(S, C + (rnd() - 0.5) * (wet ? 20 : 6), (wet ? S.wl : BOWL) - 1, 1.6 + rnd(), 0.22 + 0.2 * rnd(), -(5 + 3 * rnd()), 4 + 2 * rnd(), 1, 6);\n    else {\n      const v = [[7, 67], [52, 64], [21, 63], [60, 70]][floor(rnd() * 4)];\n      puff(S, v[0] + rnd() - 0.5, v[1], 1.1, 0.3, -(4 + 2 * rnd()), 3.5 + 2 * rnd(), 0.8, 4);\n    }\n  for (const q of S.puffs) {\n    q.age += d;\n    q.vy += (q.rise - q.vy) * 1.2 * d;\n    q.y += q.vy * d;\n    q.x += (wind(S, q.y) + 1.2 * sin(q.age * 1.1 + q.ph)) * d;\n    q.r = min(q.rmax, q.r + q.gr * d);\n  }\n  S.puffs = S.puffs.filter((q) => q.age \u003c q.life && q.y + q.r > -6 && q.x > -26 && q.x \u003c W + 26);\n  S.ox += wind(S, 25) * 0.2 * d;\n  S.oy -= 0.6 * d;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.g, S.P, S.w] = [cl(k[0], 0, 1), cl(k[2], 0, 1), cl(k[3], -1, 1)];\n  if (!S.init) {\n    // Open on a steaming field with the last cloud still high up; the pool holds its phase.\n    for (let n = 0; n \u003c 18; n++) puff(S, -10 + n * 4 + rnd() * 4, 8 + 24 * rnd(), 6 + 4 * rnd(), 0.4 + 0.15 * rnd(), -2, 15 + 4 * rnd(), 0.8, 16), (S.puffs[n].age = 2 + 4 * rnd());\n    for (let n = 0; n \u003c 150; n++) step(S, 1 / 30, 1);\n    S.bub.length = S.pop = S.t = 0;\n    S.init = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === 0 || S.ph === 4)) enter(S, 1);\n  step(S, (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2);\n}\n\n// The view and the cut rock, kept until the light changes.\nfunction backdrop(S) {\n  const L = (S.L = lightAt(S.g)), BG = S.bg, R = S.rock, { amb, top, low } = L;\n  S.key = round(S.g * 60);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, k = S.kind[i];\n    let c;\n    if (k >= 2) c = k === 2 ? [R[o], R[o + 1], R[o + 2]] : [26, 28, 36];\n    else if (k === 1) {\n      // The far wall of the bowl, wet sinter.\n      const v = (0.75 + 0.3 * hash(x, y)) * (0.8 + 0.25 * vn(X * 0.5, Y * 0.9));\n      c = [62 * v, 86 * v, 90 * v];\n    }\n    if (c) c = sc(c, L.rock);\n    else if (S.sky[i]) {\n      const sd = hypot(X - 9, Y - 53), md = hypot(X - 13, Y - 15), v = (Y / HZ) ** 1.3;\n      const sg = L.sun * (0.6 * exp(-sd / 9) + (sd \u003c 1.7 ? 1.1 : 0)), ag = L.ag * exp(-(((Y - 58) / 9) ** 2)) * (1 - X / 80);\n      const mg = L.moon * ((md \u003c 2.4 ? 0.9 : 0) + 0.12 * exp(-md / 5)), st = hash(x, y) \u003c 0.013 && Y \u003c 52 ? L.stars * (90 + 140 * hash(y, x)) : 0;\n      c = top.map((a, n) => mix(a, low[n], v) + sg * [255, 206, 130][n] + ag * [110, 92, 168][n] + mg * [228, 230, 238][n] + st * [0.85, 0.9, 1][n]);\n    } else if (Y \u003c HZ) {\n      // The ice cap; snow and scree on the hill.\n      const sn = vn(x * 0.16, y * 0.3) + 0.35 * vn(x * 0.5, y * 0.8) - 0.01 * (Y - HILL[x]) > 0.55;\n      c = Y \u003c HILL[x] ? [222, 232, 246].map((a, n) => a * amb[n] * 0.92 + low[n] * 0.1) : sc(sn ? sc(SNOW, 0.74 + 0.004 * x) : [64, 60, 62], amb);\n    } else if (Y \u003c HZ + 1.5) c = sc([92, 100, 118], amb);\n    else {\n      // The flat field: snow, and bare warm ground near the springs.\n      const f = (Y - HZ) / (GY - HZ), b = 0.7 * sm(0.6, 0.66, vn((X * 0.1) / (0.35 + f), y * 0.6)) * sm(27, 10, abs(X - C));\n      c = SNOW.map((a, n) => mix(a * (0.8 + 0.2 * f), [112, 92, 70][n], b) * amb[n]);\n    }\n    for (let n = 0; n \u003c 3; n++) BG[o + n] = c[n];\n  }\n}\n\n// Add an elliptical blob to a density field.\nfunction splat(A, cx, cy, rx, ry, a) {\n  const y1 = min(H - 1, cy + ry), x0 = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx);\n  for (let y = max(0, floor(cy - ry)); y \u003c= y1; y++) {\n    const dy = (y + 0.5 - cy) / ry, dd = 1 - dy * dy;\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = (x + 0.5 - cx) / rx, e = dd - dx * dx;\n      if (e > 0) A[y * W + x] += a * e;\n    }\n  }\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], c[n], a);\n}\n\n// Shade a density field over the frame, lit on the side facing the light.\nfunction shade(S, A, k0, lit, dark, tint, jet) {\n  for (let i = 0; i \u003c N; i++) {\n    const v = A[i];\n    if (v \u003c 0.015) continue;\n    const x = i & 63, y = i >> 6, o = i * 3;\n    const tex = jet ? vn(x * 0.5, (y + S.t * 10) * 0.25) : vn(x * 0.18 - S.ox, y * 0.18 - S.oy);\n    const al = min(0.95, 1 - exp(-v * (k0 + 1.6 * tex))), gx = v - A[x > 1 && y > 1 ? i - (jet ? 2 : 2 * W + 2) : i];\n    const sh = cl(0.52 + (jet ? 0.9 : 0.5) * gx + 0.45 * (tex - 0.5), 0.12, 1.02), tt = jet ? sm(BRIM - 16, BRIM, y) * 0.6 : 0;\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], mix(mix(dark[n], lit[n], sh), jet ? tint[n] : 0, tt), al);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  if (S.key !== round(S.g * 60)) backdrop(S);\n  F = S.f;\n  F.set(S.bg);\n  const L = S.L, { t, kind, D, CB, ph, wl, T, P } = S, amb = L.amb, Lw = L.water, Lr = L.rock;\n\n  // Aurora: a green hem, rays rising into violet.\n  if (L.aur > 0.01)\n    for (let k = 0; k \u003c 2; k++)\n      for (let x = 0; x \u003c W; x++) {\n        const yb = 30 + 8 * k + 5 * sin(x * 0.08 + t * 0.22 + k * 2.1) + 8 * (vn(x * 0.07 + t * 0.12, k * 7) - 0.5);\n        const I = L.aur * sm(0.3, 0.75, vn(x * 0.09 - t * 0.1 + k * 3, t * 0.04 + k)) * (0.5 + 0.5 * vn(x * 0.7 + t * 0.5, k * 11 + t * 0.3));\n        if (I \u003c 0.02) continue;\n        for (let y = max(0, floor(yb - 26)); y \u003c= yb; y++) {\n          const i = y * W + x, u = (yb - y) / 26, e = I * (u \u003c 0.08 ? u / 0.08 : exp(-u * 2.2)) * 0.9, v = sm(0.35, 1, u);\n          if (S.sky[i]) (F[i * 3] += mix(40, 96, v) * e), (F[i * 3 + 1] += mix(214, 60, v) * e), (F[i * 3 + 2] += mix(120, 176, v) * e);\n        }\n      }\n\n  // The visitors behind the rope; once the dome rises most hold up a phone.\n  for (const p of S.ppl) {\n    const hy = GY - p.h, jc = sc(p.c, amb);\n    put(p.x, GY - 1, sc([30, 30, 36], amb));\n    for (let y = hy + 1; y \u003c GY - 1; y++) put(p.x, y, jc);\n    put(p.x, hy, p.hat ? jc : sc([226, 186, 160], amb));\n    if (p.up && S.ca > p.dl && S.ca \u003c 6 + p.dl) put(p.x + 1, hy, jc), put(p.x + 1, hy - 1, L.stars > 0.3 ? [180, 210, 255] : [40, 40, 50]);\n  }\n  for (const x of [1, 8, 15, 49, 56, 63]) for (let y = GY - 3; y \u003c GY; y++) put(x, y, sc([70, 56, 40], amb));\n  for (let x = 1; x \u003c 64; x++) if (x \u003c 16 || x > 48) put(x, GY - 3 + (sin(((x - 1) / 7) * Math.PI) > 0.2 ? 1 : 0), sc([214, 184, 64], amb), 0.8);\n\n  // All the steam, summed and shaded.\n  D.fill(0);\n  for (const q of S.puffs) {\n    const a = q.a * sm(0, 0.4, q.age) * (1 - sm(q.life * 0.45, q.life, q.age));\n    if (a > 0.01) splat(D, q.x, q.y, q.r, q.r, a);\n  }\n  shade(S, D, 1.1, L.lit, L.dark);\n\n  // The pool in section, its heave, ripples and dome.\n  const foam = ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1.2, S.pt) : 0;\n  for (let x = 20; x \u003c 44; x++) {\n    const dx = x + 0.5 - C;\n    let top = wl - S.hv * max(0, 1 - (dx / 10) ** 2) + S.pop * sin(x * 1.3 - t * 14) * 0.6 + foam * 1.5 * (hash(x, floor(t * 20)) - 0.5);\n    const dome = S.dh > 0 && abs(dx) \u003c S.bw ? S.dh * (1 - (dx / S.bw) ** 2) ** 0.75 : 0;\n    if (dome) top = min(top, BRIM - dome);\n    for (let y = max(0, floor(top)); y \u003c SURF[x]; y++) {\n      const z = y + 0.5 - top;\n      if (z \u003c 0 || (kind[y * W + x] !== 1 && y >= BRIM)) continue;\n      let c;\n      if (dome && y \u003c BRIM) {\n        const nx = dx / S.bw, ny = (BRIM - y) / (S.dh + 0.1), sp = exp(-((nx + 0.42) ** 2) / 0.03 - (ny - 0.6) ** 2 / 0.08);\n        c = [40, 150, 176].map((v, n) => (mix(v, [110, 226, 230][n], ny * 0.8 + 0.3 * abs(nx)) * (0.85 + 0.25 * vn(x * 0.5, y * 0.5 - t * 6)) + 150 * sp + (z \u003c 1 ? 70 : 0)) * Lw);\n      } else if (z \u003c 1) c = sc([150, 224, 226], Lw);\n      else c = [60, 190, 200].map((v, n) => mix(v, [18, 70, 140][n], sm(0, 10, z)) * Lw * (0.88 + 0.24 * vn(x * 0.45 + t * 0.6, y * 0.7 - t * 0.4)));\n      if (foam && z \u003c 3 && hash(x, y + floor(t * 25)) \u003c 0.6 * foam) c = sc(FOAM, Lw);\n      put(x, y, c);\n    }\n  }\n\n  // The column and its spray.\n  CB.fill(0);\n  for (const q of S.par) splat(CB, q.x, q.y, q.w, 2.8, q.a);\n  if (S.par.length) shade(S, CB, 1.8, L.lit.map((v) => min(240, v * 1.04)), L.dark, [70 * Lw, 200 * Lw, 212 * Lw], 1);\n  for (const s of S.spr) {\n    const a = min(1, s.life * 1.5) * 0.85;\n    put(s.x - s.vx * 0.02, s.y - s.vy * 0.02, L.lit, a * 0.35);\n    put(s.x, s.y, L.lit, a);\n  }\n\n  // Under the ground: the conduit, the chamber and the cracks feeding it.\n  const froth = ph === 3 ? 1 - 0.5 * sm(0.6, 1, S.pt / (1.1 + 1.1 * P)) : ph === 2 ? 0.3 : ph === 1 ? 0.12 : 0;\n  const inflow = ph === 0 ? 1 - sm(4, 6.5, S.pt) * 0.8 : ph === 4 ? sm(1, 3, S.pt) : 0.2;\n  for (const i of S.cav) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = kind[i];\n    let r, g, b;\n    if (k === 4) {\n      const p = inflow * sm(0.55, 1, sin(S.fu[i] * 0.7 - t * 7));\n      (r = 20 + 80 * p), (g = 46 + 130 * p), (b = 104 + 110 * p);\n    } else if (k === 3 && y + 0.5 \u003c wl) {\n      // Drained: wet walls with a film running down.\n      const f = ph === 4 && hash(x, floor(y - t * 26)) \u003c 0.12;\n      (r = f ? 70 : 30), (g = f ? 104 : 33), (b = f ? 124 : 42);\n    } else if (froth && hash(x, floor(y + t * 80)) \u003c froth * (k === 5 ? 0.4 : 0.55)) [r, g, b] = FOAM;\n    else {\n      // Cool water blue, hot water turquoise.\n      const Tl = cl(T * (0.7 + 0.3 * sm(BOWL, KY + KRY, y)) + (k === 5 ? 0.08 : 0), 0, 1), sh = (0.86 + 0.28 * vn(x * 0.6, y * 0.3 + t * 2)) * (k === 3 && y === floor(wl) ? 1.3 : 1);\n      (r = mix(COOL[0], HOT[0], Tl) * sh), (g = mix(COOL[1], HOT[1], Tl) * sh), (b = mix(COOL[2], HOT[2], Tl) * sh);\n    }\n    (F[o] = r * Lr), (F[o + 1] = g * Lr), (F[o + 2] = b * Lr);\n  }\n  for (const { x, y, r } of S.bub)\n    if (r \u003c 0.9) put(x, y, FOAM, 0.85);\n    else\n      for (let v = floor(y - r); v \u003c= y + r; v++)\n        for (let u = floor(x - r); u \u003c= x + r; u++) {\n          const e = hypot(u + 0.5 - x, v + 0.5 - y) / r;\n          if (e \u003c 1) put(u, v, e > 0.6 ? [150, 220, 230] : FOAM, 0.9);\n        }\n  if (S.big > 0)\n    for (let y = floor(S.big); y \u003c S.big + 10; y++) {\n      const cx = CXA[y] + 0.5, hw = CHW[y] * min(1, 0.5 + 0.5 * (y + 1 - S.big)) - 0.3;\n      for (let x = floor(cx - hw); x \u003c cx + hw; x++) put(x, y, abs(x + 0.5 - cx) > hw - 1 ? [160, 236, 240] : [236, 246, 248], 0.97);\n    }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-geyser","type":"code","name":"geyser","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Geyser\n// Family:  volcano\n// Idea:    A Strokkur-style geyser in a snowy geothermal field, cut open below the ground: steam bubbles climb the conduit under a turquoise pool, the pool swells into a glassy dome and bursts into a white column up to the top of the panel, spray falls back, the steam drifts off on the wind and the pool drains, gurgles and fills again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after Strokkur in the Haukadalur geothermal field, Iceland\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1\n//\n// Knob 1: Light. A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing.\n// Knob 2: Speed. At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer.\n// Knob 3: Power. At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows.\n// Knob 4: Wind. At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it.\n// Buttons: K1 tap sets it off now, if it is filling or draining: the big bubble leaves the chamber and the dome and the jet follow.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst sc = (c, k) => c.map((v, n) => v * (k.length ? k[n] : k));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the pool's brim, the bowl's floor, the snow on the flat, the horizon,\n// the drained water level; the vent's column; the chamber's centre and radii.\nconst [BRIM, BOWL, GY, HZ, LOW, C] = [71, 80, 75, 61, 103, 32];\nconst [KX, KY, KRX, KRY] = [30.5, 116, 10, 6.5];\n// Gravity in rows per second squared.\nconst G = 150;\n// Seconds at Speed 2: refill, the big bubble's climb, the dome, the drain.\nconst [HEAT, RISE, DOME, FALL] = [7.5, 0.7, 0.45, 3.5];\n\n// The ground: the bowl, the sinter mound with a lip at the brim, the flat.\nconst SURF = new Float32Array(W).map((_, x) => {\n  const dx = abs(x + 0.5 - C);\n  if (dx \u003c 12) return BRIM + (BOWL - BRIM) * (1 - (dx / 12) ** 2) ** 0.7;\n  if (dx \u003c 27) return BRIM - 0.8 * (1 - sm(12, 16, dx)) + (GY - BRIM) * sm(14, 27, dx);\n  return GY + 0.8 * (vn(x * 0.2, 3) - 0.5);\n});\n// The conduit wanders a little and narrows at row 95.\nconst CXA = new Float32Array(H).map((_, y) => C - 0.5 + 0.8 * sin(y * 0.23) + 0.4 * sin(y * 0.61 + 1));\nconst CHW = new Float32Array(H).map((_, y) => 2 + 0.4 * sin(y * 0.37) - 0.6 * exp(-(((y - 95) / 3) ** 2)));\n// The hill behind the field on the right, the ice cap on the horizon at the left.\nconst HILL = new Float32Array(W).map((_, x) => HZ - 20 * sm(30, 66, x) ** 0.9 - 1.2 * vn(x * 0.35, 4));\nconst CAP = new Float32Array(W).map((_, x) => HZ - 1.5 - 2.6 * sqrt(max(0, 1 - ((x + 0.5 - 13) / 17) ** 2)));\n// Cracks feeding ground water to the chamber.\nconst FIS = [[[0, 94], [7, 98], [15, 104], [22, 112]], [[63, 103], [55, 108], [47, 113], [40, 117]]];\n// The beds, top down, colour and rows: sinter, geyserite, ochre, sinter, rust,\n// sulphur, grey clay, ochre, dark rust, tuff, sulphur, dark clay, basalt.\nconst LAY = [[206, 200, 186, 3], [176, 172, 166, 2], [172, 122, 54, 2], [196, 188, 172, 2], [150, 70, 40, 3], [206, 182, 62, 1], [126, 116, 108, 4], [162, 112, 52, 2], [120, 56, 36, 2], [104, 92, 84, 4], [200, 176, 64, 1], [84, 74, 72, 5], [58, 58, 68, 99]];\nconst SULF = [214, 190, 70], RUST = [158, 76, 42], LINE = [214, 210, 196], SNOW = [214, 222, 236];\nconst MAT = [[96, 116, 52], [214, 112, 38], [212, 186, 70]];\nconst COOL = [24, 62, 150], HOT = [44, 176, 204], FOAM = [212, 232, 236];\nconst JACK = [[200, 46, 40], [232, 192, 44], [40, 92, 200], [44, 44, 52], [58, 140, 92], [222, 112, 34], [150, 60, 150]];\n\n// Noon, blue hour, night: sky overhead and at the horizon, daylight, steam lit\n// and in shade, the cut rock, the water.\nconst LIGHT = [\n  [0, [20, 62, 152], [122, 156, 198], [0.95, 0.93, 0.88], [236, 234, 226], [118, 134, 168], 1, 1],\n  [0.5, [10, 24, 74], [66, 88, 148], [0.42, 0.48, 0.7], [158, 168, 212], [50, 60, 108], 0.85, 0.78],\n  [1, [3, 7, 24], [12, 26, 54], [0.24, 0.3, 0.42], [132, 154, 168], [30, 42, 70], 0.62, 0.6],\n];\nfunction lightAt(g) {\n  const a = LIGHT[g > 0.5 ? 1 : 0], b = LIGHT[g > 0.5 ? 2 : 1], u = (g - a[0]) / (b[0] - a[0]);\n  const m = (k) => (a[k].length ? a[k].map((v, c) => mix(v, b[k][c], u)) : mix(a[k], b[k], u));\n  return { top: m(1), low: m(2), amb: m(3), lit: m(4), dark: m(5), rock: m(6), water: m(7), sun: 1 - sm(0, 0.4, g), ag: sm(0.15, 0.45, g) * (1 - sm(0.55, 0.85, g)), moon: sm(0.6, 0.95, g), stars: sm(0.4, 0.85, g), aur: sm(0.6, 0.95, g) };\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    f: F32(N * 3), bg: F32(N * 3), rock: F32(N * 3), kind: new Uint8Array(N), sky: new Uint8Array(N), fu: F32(N), D: F32(N), CB: F32(N),\n    t: 0, ph: 0, pt: HEAT - 1.25, wl: BRIM, wl0: LOW, T: 0.9, T0: 0.25, hv: 0, dh: 0, bw: 6, key: -1, ca: 99, ja: 99,\n    bub: [], par: [], spr: [], puffs: [], pop: 0, nb: 0, np: 0, ns: 0, nv: 0, ox: 0, oy: 0, big: -1,\n  });\n  const { kind, fu, rock } = S;\n  // Kinds: 0 the view, 1 the bowl, 2 rock, 3 conduit, 4 crack, 5 chamber.\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5;\n    let k = Y >= SURF[x] ? 2 : abs(X - C) \u003c 12 && Y >= BRIM ? 1 : 0;\n    if (k === 2 && ((X - KX) / KRX) ** 2 + ((Y - KY) / KRY) ** 2 \u003c 1 + 0.5 * (vn(X * 0.35, Y * 0.35) - 0.5)) k = 5;\n    else if (k === 2 && y \u003c KY && abs(X - CXA[y]) \u003c CHW[y]) k = 3;\n    kind[i] = k;\n    if (!k && Y \u003c min(HILL[x], CAP[x])) S.sky[i] = 1;\n  }\n  for (const p of FIS)\n    for (let j = 1, len = 0; j \u003c p.length; j++) {\n      const [x0, y0] = p[j - 1], [x1, y1] = p[j], n = hypot(x1 - x0, y1 - y0) * 3;\n      for (let u = 0; u \u003c= n; u++) {\n        const i = floor(mix(y0, y1, u / n)) * W + floor(mix(x0, x1, u / n));\n        if (kind[i] === 2) (kind[i] = 4), (fu[i] = len + u / 3);\n      }\n      len += n / 3;\n    }\n  // The cut rock: beds bend with the ground, a silica lining and sulphur and\n  // rust stains round every water way, columnar basalt below, bacterial mats\n  // on the mound and snow on the flat.\n  const cav = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, dx = abs(X - C), s = SURF[x];\n    if (kind[i] >= 3) cav.push(i);\n    if (kind[i] !== 2) continue;\n    let d = Y - s + 2.4 * (vn(x * 0.08, y * 0.06 + 9) - 0.5) + 0.05 * (X - C), j = 0, dist = 9, gr = 0.9 + 0.18 * hash(x, y + 77);\n    while (d > LAY[j][3] && j \u003c LAY.length - 1) (d -= LAY[j][3]), j++;\n    let c = LAY[j];\n    if (j === LAY.length - 1) {\n      const jx = (X + 3 * vn(1.7, Y * 0.12)) / 6;\n      gr *= (jx - floor(jx) \u003c 0.17 ? 0.6 : 1) * (0.85 + 0.3 * hash(floor(jx), 5));\n    }\n    for (let v = -5; v \u003c= 5; v++)\n      for (let u = -5; u \u003c= 5; u++) {\n        const xx = x + u, yy = y + v, k = xx >= 0 && xx \u003c W && yy \u003c H ? kind[yy * W + xx] : 2;\n        if (k !== 2 && k) dist = min(dist, hypot(u, v) * (k === 4 ? 2.5 : 1));\n      }\n    if (dist \u003c 1.5) c = LINE;\n    else if (dist \u003c 5) c = c.map((v, n) => mix(v, (dist \u003c 3 ? SULF : RUST)[n], (5 - dist) * 0.17));\n    if (dx > 13 && dx \u003c 26 && Y - s \u003c 1.4) c = MAT[floor(cl(vn(X * 0.45, 2) * 2.2 - 0.3, 0, 2.99))];\n    if (dx >= 26 && Y - s \u003c 1.5) c = SNOW;\n    for (let n = 0; n \u003c 3; n++) rock[i * 3 + n] = c[n] * gr;\n  }\n  S.cav = Int32Array.from(cav);\n  // Visitors behind the rope on both sides, in their parkas.\n  S.ppl = [];\n  for (const [x0, x1] of [[2, 18], [46, 62]])\n    for (let x = x0 + rnd() * 2; x \u003c x1; x += 2.2 + rnd() * 2.4)\n      S.ppl.push({ x: floor(x), h: rnd() \u003c 0.3 ? 5 : 4, c: JACK[floor(rnd() * 7)], hat: rnd() \u003c 0.5, dl: rnd() * 0.9, up: rnd() \u003c 0.7 });\n}\n\n// The breeze in columns per second at row y, stronger aloft.\nconst wind = (S, y) => (6 + 16 * S.w) * (0.35 + 0.65 * sm(80, 8, y));\nfunction puff(S, x, y, r, a, vy, life, gr, rmax) {\n  if (S.puffs.length > 210) S.puffs.shift();\n  S.puffs.push({ x, y, r, a, vy, rise: -(1 + 2.5 * rnd()), life, gr, rmax, age: 0, ph: rnd() * 7 });\n}\nconst spray = (S, x, y, vx, vy) => S.spr.length \u003c 700 && S.spr.push({ x, y, vx, vy, life: 2.5 });\n\nfunction enter(S, ph) {\n  Object.assign(S, { ph, pt: 0, wl0: S.wl, T0: S.T });\n  if (ph === 2) S.ca = 0;\n  if (ph === 3) {\n    // The dome tears open in a ring of spray.\n    S.ja = 0;\n    for (let n = 0; n \u003c 40; n++) spray(S, C + (rnd() - 0.5) * S.bw * 1.6, BRIM - S.dh * rnd(), (rnd() - 0.5) * 70, -(40 + 90 * rnd()));\n    for (let n = 0; n \u003c 6; n++) puff(S, C + (rnd() - 0.5) * 12, BRIM - 3 - 4 * rnd(), 3 + rnd() * 2, 0.6, -(10 + 10 * rnd()), 8 + 3 * rnd(), 1.5, 12 + 6 * S.P);\n  }\n}\n\nfunction step(S, d, hold) {\n  const P = S.P, Dj = 1.1 + 1.1 * P, Rl = RISE - 0.35 * P, Dl = DOME - 0.2 * P, t = (S.t += d);\n  if (!hold) (S.pt += d), (S.ca += d), (S.ja += d);\n  if (S.pt >= [HEAT, Rl, Dl, Dj, FALL][S.ph]) enter(S, (S.ph + 1) % 5);\n  const { ph, pt } = S;\n  // The water level and how hot the water is.\n  if (ph === 0) (S.wl = mix(S.wl0, BRIM, sm(0, 6, pt))), (S.T = mix(S.T0, 1, sm(0, HEAT, pt)));\n  else if (ph === 1) (S.wl = mix(S.wl0, BRIM, sm(0, 0.5, pt))), (S.T = mix(S.T0, 1, sm(0, 0.4, pt)));\n  else if (ph === 2) S.wl = BRIM;\n  else if (ph === 3) (S.wl = BRIM), (S.T = 1 - 0.65 * sm(0, Dj, pt));\n  else (S.wl = mix(S.wl0, LOW, sm(0.2, 2.6, pt)) + 1.6 * exp(-pt * 1.1) * sin(pt * 10) * sm(0.3, 0.8, pt)), (S.T = mix(S.T0, 0.25, sm(0, FALL, pt)));\n  // The pool heaves before it goes, the big bubble climbs, the dome swells.\n  S.hv = ph === 0 ? (1.1 + P) * sm(4.5, 7.5, pt) * sin(t * 4.2) ** 2 : ph === 1 ? 1 + (2.2 + P) * sm(0, Rl, pt) : 0;\n  S.big = ph === 1 ? mix(KY - KRY + 1, BOWL - 2, sm(0, Rl, pt) ** 1.4) : -1;\n  S.bw = 7.5 + 4 * P;\n  S.dh = ph === 2 ? (9 + 7 * P) * sm(0, Dl, pt) ** 0.8 + 0.5 * sin(pt * 30) : 0;\n\n  // Steam bubbles grow as they climb from the chamber's floor. They collapse\n  // in cooler water; once it is hot through they reach the pool and pop.\n  for (S.nb += d * (1.5 + 18 * S.T * S.T) * (ph === 3 ? 3 : ph === 4 ? 0.3 : 1) * (1 + 0.8 * P); S.nb >= 1; S.nb--)\n    if (S.bub.length \u003c 160) S.bub.push({ x: KX + (rnd() - 0.5) * KRX * 1.3, y: KY + KRY * (0.25 + 0.5 * rnd()), r: 0.4, v: 3 + 4 * rnd() });\n  const cr = ph > 0 && ph \u003c 4 ? -9 : mix(106, BOWL - 4, sm(0.35, 0.92, S.T));\n  for (const b of S.bub) {\n    const yi = cl(floor(b.y), 0, H - 1), inC = b.y \u003c KY - KRY + 1.5;\n    if (inC) (b.x += (CXA[yi] + 0.5 - b.x) * min(1, d * 8)), (b.v = min(32, b.v + 26 * d));\n    else (b.x += (KX - b.x) * d * 0.4 * sm(KY, KY - KRY, b.y) + sin(t * 3 + b.y) * d), (b.v = min(14, b.v + 8 * d));\n    b.y -= b.v * d * (ph === 3 ? 1.8 : 1);\n    b.r = min(inC ? (b.y \u003c BOWL ? 1.2 : CHW[yi] - 0.3) : 2.3, b.r + d * (0.3 + 0.7 * S.T));\n    if (b.y \u003c cr || (S.big > 0 && b.y > S.big && b.y \u003c S.big + 10)) b.dead = 1;\n    else if (b.y \u003c= S.wl + 0.5) {\n      b.dead = 1;\n      if (S.wl \u003c BOWL) {\n        S.pop = min(1.5, S.pop + 0.15 * b.r);\n        if (rnd() \u003c 0.5) puff(S, b.x + (rnd() - 0.5) * 8, S.wl - 2, 1.8, 0.3, -6, 3 + 2 * rnd(), 1, 5);\n      }\n    }\n  }\n  S.bub = S.bub.filter((b) => !b.dead);\n  S.pop *= exp(-3 * d);\n\n  // The jet: slabs of water fly up and spread; past the top they break up.\n  if (ph === 3) {\n    const u = pt / Dj, v = sqrt(2 * G * (64 + 46 * P)) * (1 - 0.25 * sm(0.7, 1, u)) * (1 - 0.6 * sm(0.45, 0.8, P) * exp(-(((u - 0.48) / 0.09) ** 2)));\n    for (S.np += d * v * 0.6; S.np >= 1; S.np--) S.par.push({ x: C + (rnd() - 0.5) * 1.2, y: BRIM - 1 - v * d * rnd(), vy: -v * (0.95 + 0.1 * rnd()), w: (3.5 + 3.5 * P) * (0.85 + 0.3 * rnd()), a: 1, ap: 0 });\n  }\n  for (const q of S.par) {\n    q.vy += G * d;\n    q.y += q.vy * d;\n    q.x += wind(S, q.y) * 0.35 * d;\n    q.w += d * (4.5 + 4.5 * P) * (q.ap ? 2 : 1);\n    if (!q.ap && q.vy > -25) {\n      q.ap = 1;\n      for (let n = 0; n \u003c 2; n++) spray(S, q.x + (rnd() - 0.5) * q.w * 2, q.y, (rnd() - 0.5) * 64, q.vy + (rnd() - 0.6) * 30);\n    }\n    if (rnd() \u003c d * 3) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      spray(S, q.x + sd * q.w, q.y, sd * (8 + 26 * rnd()), q.vy * 0.75);\n    }\n    if (q.ap) q.a -= d * 1.6;\n    if (q.y > BRIM || q.a \u003c= 0) q.dead = 1;\n  }\n  S.par = S.par.filter((q) => !q.dead);\n  // Steam boils off the column while it stands and a little after.\n  if (S.ja \u003c Dj + 0.8 && S.par.length)\n    for (S.ns += d * (40 + 40 * P); S.ns >= 1; S.ns--) {\n      const q = S.par[floor(rnd() * S.par.length)];\n      puff(S, q.x + (rnd() - 0.5) * q.w * 1.8, q.y, 2.5 + q.w * 0.6, 0.55 + 0.25 * rnd(), max(-30, q.vy * 0.3), 10 + 4 * rnd() + 3 * P, 2 + 1.5 * rnd(), 17 + 7 * P);\n    }\n  for (const s of S.spr) {\n    s.vy = min(90, s.vy + G * 0.85 * d);\n    s.vx *= 1 - 0.5 * d;\n    s.x += (s.vx + wind(S, s.y) * 0.5) * d;\n    s.y += s.vy * d;\n    s.life -= d;\n    const x = floor(s.x), y = floor(s.y);\n    if (s.life \u003c 0 || x \u003c 0 || x >= W || y >= H || (y >= 0 && S.kind[y * W + x] && s.vy > 0)) s.dead = 1;\n  }\n  S.spr = S.spr.filter((s) => !s.dead);\n\n  // Gentle steam off the pool, and from small vents out on the field.\n  const wet = S.wl \u003c BOWL - 1;\n  for (S.nv += d * (2 + (wet ? 4 + 5 * S.T : 1) * (1 + P)); S.nv >= 1; S.nv--)\n    if (rnd() \u003c 0.7) puff(S, C + (rnd() - 0.5) * (wet ? 20 : 6), (wet ? S.wl : BOWL) - 1, 1.6 + rnd(), 0.22 + 0.2 * rnd(), -(5 + 3 * rnd()), 4 + 2 * rnd(), 1, 6);\n    else {\n      const v = [[7, 67], [52, 64], [21, 63], [60, 70]][floor(rnd() * 4)];\n      puff(S, v[0] + rnd() - 0.5, v[1], 1.1, 0.3, -(4 + 2 * rnd()), 3.5 + 2 * rnd(), 0.8, 4);\n    }\n  for (const q of S.puffs) {\n    q.age += d;\n    q.vy += (q.rise - q.vy) * 1.2 * d;\n    q.y += q.vy * d;\n    q.x += (wind(S, q.y) + 1.2 * sin(q.age * 1.1 + q.ph)) * d;\n    q.r = min(q.rmax, q.r + q.gr * d);\n  }\n  S.puffs = S.puffs.filter((q) => q.age \u003c q.life && q.y + q.r > -6 && q.x > -26 && q.x \u003c W + 26);\n  S.ox += wind(S, 25) * 0.2 * d;\n  S.oy -= 0.6 * d;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.g, S.P, S.w] = [cl(k[0], 0, 1), cl(k[2], 0, 1), cl(k[3], -1, 1)];\n  if (!S.init) {\n    // Open on a steaming field with the last cloud still high up; the pool holds its phase.\n    for (let n = 0; n \u003c 18; n++) puff(S, -10 + n * 4 + rnd() * 4, 8 + 24 * rnd(), 6 + 4 * rnd(), 0.4 + 0.15 * rnd(), -2, 15 + 4 * rnd(), 0.8, 16), (S.puffs[n].age = 2 + 4 * rnd());\n    for (let n = 0; n \u003c 150; n++) step(S, 1 / 30, 1);\n    S.bub.length = S.pop = S.t = 0;\n    S.init = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === 0 || S.ph === 4)) enter(S, 1);\n  step(S, (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2);\n}\n\n// The view and the cut rock, kept until the light changes.\nfunction backdrop(S) {\n  const L = (S.L = lightAt(S.g)), BG = S.bg, R = S.rock, { amb, top, low } = L;\n  S.key = round(S.g * 60);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, o = i * 3, k = S.kind[i];\n    let c;\n    if (k >= 2) c = k === 2 ? [R[o], R[o + 1], R[o + 2]] : [26, 28, 36];\n    else if (k === 1) {\n      // The far wall of the bowl, wet sinter.\n      const v = (0.75 + 0.3 * hash(x, y)) * (0.8 + 0.25 * vn(X * 0.5, Y * 0.9));\n      c = [62 * v, 86 * v, 90 * v];\n    }\n    if (c) c = sc(c, L.rock);\n    else if (S.sky[i]) {\n      const sd = hypot(X - 9, Y - 53), md = hypot(X - 13, Y - 15), v = (Y / HZ) ** 1.3;\n      const sg = L.sun * (0.6 * exp(-sd / 9) + (sd \u003c 1.7 ? 1.1 : 0)), ag = L.ag * exp(-(((Y - 58) / 9) ** 2)) * (1 - X / 80);\n      const mg = L.moon * ((md \u003c 2.4 ? 0.9 : 0) + 0.12 * exp(-md / 5)), st = hash(x, y) \u003c 0.013 && Y \u003c 52 ? L.stars * (90 + 140 * hash(y, x)) : 0;\n      c = top.map((a, n) => mix(a, low[n], v) + sg * [255, 206, 130][n] + ag * [110, 92, 168][n] + mg * [228, 230, 238][n] + st * [0.85, 0.9, 1][n]);\n    } else if (Y \u003c HZ) {\n      // The ice cap; snow and scree on the hill.\n      const sn = vn(x * 0.16, y * 0.3) + 0.35 * vn(x * 0.5, y * 0.8) - 0.01 * (Y - HILL[x]) > 0.55;\n      c = Y \u003c HILL[x] ? [222, 232, 246].map((a, n) => a * amb[n] * 0.92 + low[n] * 0.1) : sc(sn ? sc(SNOW, 0.74 + 0.004 * x) : [64, 60, 62], amb);\n    } else if (Y \u003c HZ + 1.5) c = sc([92, 100, 118], amb);\n    else {\n      // The flat field: snow, and bare warm ground near the springs.\n      const f = (Y - HZ) / (GY - HZ), b = 0.7 * sm(0.6, 0.66, vn((X * 0.1) / (0.35 + f), y * 0.6)) * sm(27, 10, abs(X - C));\n      c = SNOW.map((a, n) => mix(a * (0.8 + 0.2 * f), [112, 92, 70][n], b) * amb[n]);\n    }\n    for (let n = 0; n \u003c 3; n++) BG[o + n] = c[n];\n  }\n}\n\n// Add an elliptical blob to a density field.\nfunction splat(A, cx, cy, rx, ry, a) {\n  const y1 = min(H - 1, cy + ry), x0 = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx);\n  for (let y = max(0, floor(cy - ry)); y \u003c= y1; y++) {\n    const dy = (y + 0.5 - cy) / ry, dd = 1 - dy * dy;\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = (x + 0.5 - cx) / rx, e = dd - dx * dx;\n      if (e > 0) A[y * W + x] += a * e;\n    }\n  }\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], c[n], a);\n}\n\n// Shade a density field over the frame, lit on the side facing the light.\nfunction shade(S, A, k0, lit, dark, tint, jet) {\n  for (let i = 0; i \u003c N; i++) {\n    const v = A[i];\n    if (v \u003c 0.015) continue;\n    const x = i & 63, y = i >> 6, o = i * 3;\n    const tex = jet ? vn(x * 0.5, (y + S.t * 10) * 0.25) : vn(x * 0.18 - S.ox, y * 0.18 - S.oy);\n    const al = min(0.95, 1 - exp(-v * (k0 + 1.6 * tex))), gx = v - A[x > 1 && y > 1 ? i - (jet ? 2 : 2 * W + 2) : i];\n    const sh = cl(0.52 + (jet ? 0.9 : 0.5) * gx + 0.45 * (tex - 0.5), 0.12, 1.02), tt = jet ? sm(BRIM - 16, BRIM, y) * 0.6 : 0;\n    for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], mix(mix(dark[n], lit[n], sh), jet ? tint[n] : 0, tt), al);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  if (S.key !== round(S.g * 60)) backdrop(S);\n  F = S.f;\n  F.set(S.bg);\n  const L = S.L, { t, kind, D, CB, ph, wl, T, P } = S, amb = L.amb, Lw = L.water, Lr = L.rock;\n\n  // Aurora: a green hem, rays rising into violet.\n  if (L.aur > 0.01)\n    for (let k = 0; k \u003c 2; k++)\n      for (let x = 0; x \u003c W; x++) {\n        const yb = 30 + 8 * k + 5 * sin(x * 0.08 + t * 0.22 + k * 2.1) + 8 * (vn(x * 0.07 + t * 0.12, k * 7) - 0.5);\n        const I = L.aur * sm(0.3, 0.75, vn(x * 0.09 - t * 0.1 + k * 3, t * 0.04 + k)) * (0.5 + 0.5 * vn(x * 0.7 + t * 0.5, k * 11 + t * 0.3));\n        if (I \u003c 0.02) continue;\n        for (let y = max(0, floor(yb - 26)); y \u003c= yb; y++) {\n          const i = y * W + x, u = (yb - y) / 26, e = I * (u \u003c 0.08 ? u / 0.08 : exp(-u * 2.2)) * 0.9, v = sm(0.35, 1, u);\n          if (S.sky[i]) (F[i * 3] += mix(40, 96, v) * e), (F[i * 3 + 1] += mix(214, 60, v) * e), (F[i * 3 + 2] += mix(120, 176, v) * e);\n        }\n      }\n\n  // The visitors behind the rope; once the dome rises most hold up a phone.\n  for (const p of S.ppl) {\n    const hy = GY - p.h, jc = sc(p.c, amb);\n    put(p.x, GY - 1, sc([30, 30, 36], amb));\n    for (let y = hy + 1; y \u003c GY - 1; y++) put(p.x, y, jc);\n    put(p.x, hy, p.hat ? jc : sc([226, 186, 160], amb));\n    if (p.up && S.ca > p.dl && S.ca \u003c 6 + p.dl) put(p.x + 1, hy, jc), put(p.x + 1, hy - 1, L.stars > 0.3 ? [180, 210, 255] : [40, 40, 50]);\n  }\n  for (const x of [1, 8, 15, 49, 56, 63]) for (let y = GY - 3; y \u003c GY; y++) put(x, y, sc([70, 56, 40], amb));\n  for (let x = 1; x \u003c 64; x++) if (x \u003c 16 || x > 48) put(x, GY - 3 + (sin(((x - 1) / 7) * Math.PI) > 0.2 ? 1 : 0), sc([214, 184, 64], amb), 0.8);\n\n  // All the steam, summed and shaded.\n  D.fill(0);\n  for (const q of S.puffs) {\n    const a = q.a * sm(0, 0.4, q.age) * (1 - sm(q.life * 0.45, q.life, q.age));\n    if (a > 0.01) splat(D, q.x, q.y, q.r, q.r, a);\n  }\n  shade(S, D, 1.1, L.lit, L.dark);\n\n  // The pool in section, its heave, ripples and dome.\n  const foam = ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1.2, S.pt) : 0;\n  for (let x = 20; x \u003c 44; x++) {\n    const dx = x + 0.5 - C;\n    let top = wl - S.hv * max(0, 1 - (dx / 10) ** 2) + S.pop * sin(x * 1.3 - t * 14) * 0.6 + foam * 1.5 * (hash(x, floor(t * 20)) - 0.5);\n    const dome = S.dh > 0 && abs(dx) \u003c S.bw ? S.dh * (1 - (dx / S.bw) ** 2) ** 0.75 : 0;\n    if (dome) top = min(top, BRIM - dome);\n    for (let y = max(0, floor(top)); y \u003c SURF[x]; y++) {\n      const z = y + 0.5 - top;\n      if (z \u003c 0 || (kind[y * W + x] !== 1 && y >= BRIM)) continue;\n      let c;\n      if (dome && y \u003c BRIM) {\n        const nx = dx / S.bw, ny = (BRIM - y) / (S.dh + 0.1), sp = exp(-((nx + 0.42) ** 2) / 0.03 - (ny - 0.6) ** 2 / 0.08);\n        c = [40, 150, 176].map((v, n) => (mix(v, [110, 226, 230][n], ny * 0.8 + 0.3 * abs(nx)) * (0.85 + 0.25 * vn(x * 0.5, y * 0.5 - t * 6)) + 150 * sp + (z \u003c 1 ? 70 : 0)) * Lw);\n      } else if (z \u003c 1) c = sc([150, 224, 226], Lw);\n      else c = [60, 190, 200].map((v, n) => mix(v, [18, 70, 140][n], sm(0, 10, z)) * Lw * (0.88 + 0.24 * vn(x * 0.45 + t * 0.6, y * 0.7 - t * 0.4)));\n      if (foam && z \u003c 3 && hash(x, y + floor(t * 25)) \u003c 0.6 * foam) c = sc(FOAM, Lw);\n      put(x, y, c);\n    }\n  }\n\n  // The column and its spray.\n  CB.fill(0);\n  for (const q of S.par) splat(CB, q.x, q.y, q.w, 2.8, q.a);\n  if (S.par.length) shade(S, CB, 1.8, L.lit.map((v) => min(240, v * 1.04)), L.dark, [70 * Lw, 200 * Lw, 212 * Lw], 1);\n  for (const s of S.spr) {\n    const a = min(1, s.life * 1.5) * 0.85;\n    put(s.x - s.vx * 0.02, s.y - s.vy * 0.02, L.lit, a * 0.35);\n    put(s.x, s.y, L.lit, a);\n  }\n\n  // Under the ground: the conduit, the chamber and the cracks feeding it.\n  const froth = ph === 3 ? 1 - 0.5 * sm(0.6, 1, S.pt / (1.1 + 1.1 * P)) : ph === 2 ? 0.3 : ph === 1 ? 0.12 : 0;\n  const inflow = ph === 0 ? 1 - sm(4, 6.5, S.pt) * 0.8 : ph === 4 ? sm(1, 3, S.pt) : 0.2;\n  for (const i of S.cav) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = kind[i];\n    let r, g, b;\n    if (k === 4) {\n      const p = inflow * sm(0.55, 1, sin(S.fu[i] * 0.7 - t * 7));\n      (r = 20 + 80 * p), (g = 46 + 130 * p), (b = 104 + 110 * p);\n    } else if (k === 3 && y + 0.5 \u003c wl) {\n      // Drained: wet walls with a film running down.\n      const f = ph === 4 && hash(x, floor(y - t * 26)) \u003c 0.12;\n      (r = f ? 70 : 30), (g = f ? 104 : 33), (b = f ? 124 : 42);\n    } else if (froth && hash(x, floor(y + t * 80)) \u003c froth * (k === 5 ? 0.4 : 0.55)) [r, g, b] = FOAM;\n    else {\n      // Cool water blue, hot water turquoise.\n      const Tl = cl(T * (0.7 + 0.3 * sm(BOWL, KY + KRY, y)) + (k === 5 ? 0.08 : 0), 0, 1), sh = (0.86 + 0.28 * vn(x * 0.6, y * 0.3 + t * 2)) * (k === 3 && y === floor(wl) ? 1.3 : 1);\n      (r = mix(COOL[0], HOT[0], Tl) * sh), (g = mix(COOL[1], HOT[1], Tl) * sh), (b = mix(COOL[2], HOT[2], Tl) * sh);\n    }\n    (F[o] = r * Lr), (F[o + 1] = g * Lr), (F[o + 2] = b * Lr);\n  }\n  for (const { x, y, r } of S.bub)\n    if (r \u003c 0.9) put(x, y, FOAM, 0.85);\n    else\n      for (let v = floor(y - r); v \u003c= y + r; v++)\n        for (let u = floor(x - r); u \u003c= x + r; u++) {\n          const e = hypot(u + 0.5 - x, v + 0.5 - y) / r;\n          if (e \u003c 1) put(u, v, e > 0.6 ? [150, 220, 230] : FOAM, 0.9);\n        }\n  if (S.big > 0)\n    for (let y = floor(S.big); y \u003c S.big + 10; y++) {\n      const cx = CXA[y] + 0.5, hw = CHW[y] * min(1, 0.5 + 0.5 * (y + 1 - S.big)) - 0.3;\n      for (let x = floor(cx - hw); x \u003c cx + hw; x++) put(x, y, abs(x + 0.5 - cx) > hw - 1 ? [160, 236, 240] : [236, 246, 248], 0.97);\n    }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Power=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"A low winter sun at noon at 0, the blue hour at 0.5, and at 1 a moonlit night with green aurora over the field and the visitors' phones glowing."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one cycle, dome to dome, takes about thirteen seconds; at 0.2 ten times longer."},{"name":"Power","min":0,"max":1,"about":"At 0 one jet that just reaches the top of the panel. Turned up, the dome swells bigger and bursts sooner, the column widens and punches out of the top, the jet lasts longer in two surges and the steam cloud grows."},{"name":"Wind","min":-1,"max":1,"about":"At the start a light breeze drifts the steam to the right; turned left it drops to calm and then carries it left, turned right it tears it off to the right. The column and the spray lean with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.1931,"detail":0.0478,"edges":0.2475,"complexity":2.0465,"coverage":1,"colour":0.26,"drift":0.0438},"knobResponse":[0.2681,0.0644,0.048,0.0484]},{"slug":"gibbs-phenomenon","title":"Gibbs Phenomenon","family":"wave","round":36,"note":"사각파 한 주기가 가로로 놓이고, 아래로 내려갈수록 푸리에 부분합의 항이 늘어 맨 위 1항에서 맨 아래 32항까지 25줄마다 두 배가 돼요. 합이 파형을 넘어선 곳은 흰 금색으로 타서 점프마다 양옆에 뿔이 서고, 뿔은 아래로 갈수록 점프에 붙지만 높이는 언제나 점프의 8.95% 예요. K3 은 사각파를 톱니파를 거쳐 삼각파로 바꿔 점프와 함께 뿔을 지우고, K1 을 누르면 맨 아래 줄이 256항까지 달리며 그 합의 그래프가 금색 눈금에 닿아요.","idea":"One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.","buttons":"K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.","code":"// ===== Patternflow pattern =====\n// Title:   Gibbs Phenomenon\n// Family:  wave\n// Idea:    One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gibbs phenomenon (Henry Wilbraham, 1848; J. Willard Gibbs, 1899), with Fejér's means (Lipót Fejér, 1900), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1\n//\n// Knob 1: Hue. Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive.\n// Knob 2: Speed. How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows.\n// Knob 3: Shape. Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn.\n// Knob 4: Fejer. Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too.\n// Buttons: K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.\n\nconst W = 64, H = 128, NMAX = 32, RACE = 8;\n// Subsamples per column: four, and 24 in a column within one LED of a jump.\nconst SS = 4, SSJ = 24;\n// How far either side of a point the wave's own range is read, in radians:\n// a sum is past the wave where it leaves [min, max] of the wave over x +- DEL.\nconst DEL = 0.12;\n// The limit of the overshoot: (1/pi) int_0^pi sin t / t dt - 1/2 of the jump.\nconst GIBBS = 0.0894899;\n// The graph the button draws: value v at row GY - GS v.\nconst GY = 24, GS = 16;\nconst { floor, min, max, abs, sin, cos, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The three waves on [0, 2 pi), all between -1 and 1. The square is 1 on\n// (0, pi) and -1 on (pi, 2 pi); the sawtooth rises as x / pi from -1 just past\n// pi to 1 just before it; the triangle peaks at 1 at pi/2.\nconst sq = (x) => (x \u003c PI ? 1 : -1);\nconst saw = (x) => (x \u003c PI ? x / PI : x / PI - 2);\nconst tri = (x) => (x \u003c PI / 2 ? (2 * x) / PI : x \u003c (3 * PI) / 2 ? 2 - (2 * x) / PI : (2 * x) / PI - 4);\n// Their sine coefficients: 4 / (pi k) on odd k; 2 (-1)^(k+1) / (pi k);\n// 8 (-1)^((k-1)/2) / (pi k)^2 on odd k.\nconst bSq = (k) => (k & 1 ? 4 / (PI * k) : 0);\nconst bSaw = (k) => ((k & 1 ? 2 : -2) / (PI * k));\nconst bTri = (k) => (k & 1 ? ((k & 2 ? -8 : 8) / (PI * PI * k * k)) : 0);\n\n// Shape 0..1 as weights on square, sawtooth and triangle.\nfunction weights(s) {\n  return s \u003c 0.5 ? [1 - 2 * s, 2 * s, 0] : [0, 2 - 2 * s, 2 * s - 1];\n}\n\nconst wave = (x, w) => w[0] * sq(x) + w[1] * saw(x) + w[2] * tri(x);\n\n// The wave's range over [x - DEL, x + DEL]: the ends, and both sides of any\n// jump or corner inside.\nconst SPECIAL = [0, PI / 2, PI, (3 * PI) / 2, TAU];\nconst waveAt = (t, w) => wave(t - floor(t / TAU) * TAU, w);\nfunction localRange(x, w, out) {\n  let lo = waveAt(x - DEL, w), hi = lo, v = waveAt(x + DEL, w);\n  if (v \u003c lo) lo = v;\n  if (v > hi) hi = v;\n  for (let n = -1; n \u003c= 1; n++)\n    for (let j = 0; j \u003c SPECIAL.length; j++) {\n      const t = SPECIAL[j] + n * TAU;\n      if (t \u003c= x - DEL || t >= x + DEL) continue;\n      for (const u of [t - 1e-9, t + 1e-9]) {\n        v = waveAt(u, w);\n        if (v \u003c lo) lo = v;\n        if (v > hi) hi = v;\n      }\n    }\n  out[0] = lo;\n  out[1] = hi;\n}\n\nexport function setup(params) {\n  const NS = W * SSJ;\n  params.s = {\n    hue: 0, speed: 2, shape: 0, fejer: 0, phase: 0, race: -1, bo: new Float64Array(RACE * NMAX + 2), bs: new Float64Array(RACE * NMAX + 2),\n    sx: new Float64Array(NS), sl: new Float64Array(NS), sh: new Float64Array(NS),\n    sum: new Float32Array(H), ex: new Float32Array(H), gmin: new Float32Array(W), gmax: new Float32Array(W), rk: new Float64Array(H),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), rr: [0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.shape = cl(k[2], 0, 1);\n  // Up to 0.06 the plain sums, so the opening shows the full 8.95%.\n  S.fejer = (max(0, cl(k[3], 0, 1) - 0.06) / 0.94) ** 2;\n  // At Speed 2 the wave slides 0.4 radians a second.\n  S.phase = (S.phase + d * S.speed * 0.2) % TAU;\n  if (input.btnPressed && input.btnPressed[0] && S.race \u003c 0) S.race = 0;\n  if (S.race >= 0) {\n    S.race += d;\n    if (S.race > 6) S.race = -1;\n  }\n}\n\n// The race: the bottom row's count of terms is multiplied by up to 8, rising\n// over 2.5 seconds, holding for 2 and coming back in 1.5.\nfunction raceFactor(t) {\n  if (t \u003c 0) return 1;\n  const u = t \u003c 2.5 ? t / 2.5 : t \u003c 4.5 ? 1 : max(0, (6 - t) / 1.5);\n  const e = u * u * (3 - 2 * u);\n  return RACE ** e;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, sx, sl, sh, sum, ex, rk, rr } = S;\n  const w = weights(S.shape), lam = S.fejer, nTop = NMAX * raceFactor(S.race);\n  const NN = Math.ceil(nTop);\n  // Row r sums the first n = 32^(r / 127) terms of each series, so the count\n  // doubles every 25 rows, continuous in n: between n and n + 1 the next\n  // term comes in by the fraction. The square and the triangle have only odd\n  // harmonics, so their n-th term is harmonic 2n - 1; the sawtooth's is n.\n  for (let r = 0; r \u003c H; r++) rk[r] = nTop ** (r / (H - 1));\n  const { bo, bs } = S;\n  for (let n = 1; n \u003c= NN; n++) {\n    bo[n] = w[0] * bSq(2 * n - 1) + w[2] * bTri(2 * n - 1);\n    bs[n] = w[1] * bSaw(n);\n  }\n  // The jumps of the wave, where it has any, set where the columns go fine.\n  const jumpAt = [];\n  if (w[0] > 0.001) jumpAt.push(0);\n  if (w[0] + w[1] > 0.001) jumpAt.push(PI);\n  // The overshoot the rulers stand at: the larger jump, the one at pi, is\n  // 2 (w0 + w1) tall, from -(w0 + w1) to w0 + w1.\n  const top = w[0] + w[1], ruler = top * (1 + 2 * GIBBS);\n\n  const cp = [0, 0, 0], cn = [0, 0, 0], gold = [1, 0.85, 0.52];\n  // Round orange and yellow a half is lifted, up to 1.8 times, and paled a\n  // little, so it reads amber or butter and not brown or olive.\n  for (const [h, out] of [[S.hue + 0.56, cp], [S.hue + 0.8, cn]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.1, 0, 1);\n    hsv(h, 0.85 - 0.25 * warm, 1 + 0.8 * warm, out);\n  }\n  const graph = S.race >= 0;\n  for (let col = 0; col \u003c W; col++) {\n    // Wave coordinate of the column's left edge.\n    const x0 = (col / W) * TAU - S.phase;\n    let near = false;\n    for (const j of jumpAt) {\n      const dj = ((((x0 + PI / W - j) % TAU) + TAU + PI) % TAU) - PI;\n      if (abs(dj) \u003c (1.6 * TAU) / W) near = true;\n    }\n    const ns = near ? SSJ : SS;\n    let fbar = 0;\n    for (let i = 0; i \u003c ns; i++) {\n      let x = x0 + ((i + 0.5) / ns) * (TAU / W);\n      x -= floor(x / TAU) * TAU;\n      sx[i] = x;\n      fbar += wave(x, w) / ns;\n      localRange(x, w, rr);\n      sl[i] = rr[0];\n      sh[i] = rr[1];\n    }\n    sum.fill(0);\n    ex.fill(0);\n    let gmin = Infinity, gmax = -Infinity;\n    for (let i = 0; i \u003c ns; i++) {\n      const x = sx[i], c1 = 2 * cos(x), c2 = 2 * cos(2 * x), lo = sl[i], hi = sh[i];\n      // sin(nx) and sin((2n - 1)x) by the Chebyshev recurrence.\n      let a0 = 0, a1 = sin(x), o0 = -sin(x), o1 = sin(x);\n      // Plain sums and Fejer means of the odd series and of the sawtooth.\n      // Fejer averages the partial sums over the harmonic index: S_0..S_K\n      // over K + 1, so the odd series adds its unchanged even-index sum too.\n      let So = 0, To = 0, fo = 0, Ss = 0, Ts = 0, fs = 0, r = 0, last = 0;\n      for (let n = 1; n \u003c= NN && r \u003c H; n++) {\n        const So0 = So, fo0 = fo, Ss0 = Ss, fs0 = fs;\n        To += So;\n        So += bo[n] * o1;\n        To += So;\n        fo = To / (2 * n);\n        Ss += bs[n] * a1;\n        Ts += Ss;\n        fs = Ts / (n + 1);\n        while (r \u003c H && rk[r] \u003c= n + 1e-9) {\n          const q = rk[r] - (n - 1);\n          const plain = So0 + q * (So - So0) + Ss0 + q * (Ss - Ss0), mean = fo0 + q * (fo - fo0) + fs0 + q * (fs - fs0);\n          // Past the wave: above its local top where the sum is positive, below\n          // its local bottom where negative. Falling short is not overshoot.\n          const v = (1 - lam) * plain + lam * mean, e = v > 0 ? v - hi : lo - v;\n          sum[r] += v;\n          if (e > ex[r]) ex[r] = e;\n          if (r === H - 1) last = v;\n          r++;\n        }\n        const a2 = c1 * a1 - a0;\n        a0 = a1;\n        a1 = a2;\n        const o2 = c2 * o1 - o0;\n        o0 = o1;\n        o1 = o2;\n      }\n      // The bottom row's sum, for the graph.\n      if (last \u003c gmin) gmin = last;\n      if (last > gmax) gmax = last;\n    }\n    S.gmin[col] = gmin;\n    S.gmax[col] = gmax;\n    for (let r = 0; r \u003c H; r++) {\n      const v = sum[r] / ns, c = v >= 0 ? cp : cn;\n      // The wave's own halves: 0.1 plus 0.32 times the size of the sum, and\n      // 1.8 times how far the sum is past the wave (outward) or short of it,\n      // so the fringes beside each jump show as light and dark bands.\n      const lv = cl(0.1 + 0.32 * min(1, abs(v)) + 1.8 * (v >= 0 ? v - fbar : fbar - v), 0, 0.8);\n      // Past the wave: white-gold, full from about 80% of the overshoot's\n      // limit, so the horns burn and the ripples of the first rows glow.\n      const g = sm(0.25, 0.85, ex[r] / (2 * GIBBS)), p = r * W + col;\n      R[p] = 255 * (c[0] * lv * (1 - g) + gold[0] * g);\n      G[p] = 255 * (c[1] * lv * (1 - g) + gold[1] * g);\n      B[p] = 255 * (c[2] * lv * (1 - g) + gold[2] * g);\n    }\n  }\n\n  if (graph) {\n    // The bottom row's sum as a graph over the top of the panel, with dim\n    // rulers at the wave's top and bottom and gold ones 8.95% of the jump\n    // past them.\n    const t = S.race, fade = min(1, t / 0.3, (6 - t) / 0.5);\n    const rows = GY + GS * 1.45;\n    for (let r = 0; r \u003c= rows; r++)\n      for (let col = 0; col \u003c W; col++) {\n        const p = r * W + col, k = 1 - 0.8 * fade;\n        R[p] *= k;\n        G[p] *= k;\n        B[p] *= k;\n      }\n    const rule = (v, col3, lv) => {\n      const r = round(GY - GS * v);\n      for (let x = 0; x \u003c W; x += 2) {\n        const p = r * W + x;\n        R[p] += col3[0] * lv * fade;\n        G[p] += col3[1] * lv * fade;\n        B[p] += col3[2] * lv * fade;\n      }\n    };\n    rule(top, [1, 1, 1], 70);\n    rule(-top, [1, 1, 1], 70);\n    rule(ruler, gold, 220);\n    rule(-ruler, gold, 220);\n    for (let col = 0; col \u003c W; col++) {\n      const ra = round(GY - GS * S.gmax[col]), rb = round(GY - GS * S.gmin[col]);\n      for (let r = max(0, ra); r \u003c= min(H - 1, rb); r++) {\n        const p = r * W + col;\n        R[p] = 255 * fade + R[p] * (1 - fade);\n        G[p] = 255 * fade + G[p] * (1 - fade);\n        B[p] = 255 * fade + B[p] * (1 - fade);\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-gibbs-phenomenon","type":"code","name":"gibbs-phenomenon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gibbs Phenomenon\n// Family:  wave\n// Idea:    One period of a square wave runs across the panel and its Fourier partial sums run down it, from one term at the top to 32 at the bottom, and wherever a sum climbs past the wave it is trying to draw it burns white-gold: two horns beside each jump that press closer to the jump with every row and never get any lower, 8.95% of the jump however many terms are added.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gibbs phenomenon (Henry Wilbraham, 1848; J. Willard Gibbs, 1899), with Fejér's means (Lipót Fejér, 1900), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1\n//\n// Knob 1: Hue. Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive.\n// Knob 2: Speed. How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows.\n// Knob 3: Shape. Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn.\n// Knob 4: Fejer. Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too.\n// Buttons: K1 tap races the bottom row from 32 terms to 256 and back over six seconds, the rows above scaling with it, and draws the bottom row's sum as a white graph over the top 48 rows with gold rulers 8.95% of the jump past the wave: the horns press into the jumps and their spikes keep touching the rulers.\n\nconst W = 64, H = 128, NMAX = 32, RACE = 8;\n// Subsamples per column: four, and 24 in a column within one LED of a jump.\nconst SS = 4, SSJ = 24;\n// How far either side of a point the wave's own range is read, in radians:\n// a sum is past the wave where it leaves [min, max] of the wave over x +- DEL.\nconst DEL = 0.12;\n// The limit of the overshoot: (1/pi) int_0^pi sin t / t dt - 1/2 of the jump.\nconst GIBBS = 0.0894899;\n// The graph the button draws: value v at row GY - GS v.\nconst GY = 24, GS = 16;\nconst { floor, min, max, abs, sin, cos, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The three waves on [0, 2 pi), all between -1 and 1. The square is 1 on\n// (0, pi) and -1 on (pi, 2 pi); the sawtooth rises as x / pi from -1 just past\n// pi to 1 just before it; the triangle peaks at 1 at pi/2.\nconst sq = (x) => (x \u003c PI ? 1 : -1);\nconst saw = (x) => (x \u003c PI ? x / PI : x / PI - 2);\nconst tri = (x) => (x \u003c PI / 2 ? (2 * x) / PI : x \u003c (3 * PI) / 2 ? 2 - (2 * x) / PI : (2 * x) / PI - 4);\n// Their sine coefficients: 4 / (pi k) on odd k; 2 (-1)^(k+1) / (pi k);\n// 8 (-1)^((k-1)/2) / (pi k)^2 on odd k.\nconst bSq = (k) => (k & 1 ? 4 / (PI * k) : 0);\nconst bSaw = (k) => ((k & 1 ? 2 : -2) / (PI * k));\nconst bTri = (k) => (k & 1 ? ((k & 2 ? -8 : 8) / (PI * PI * k * k)) : 0);\n\n// Shape 0..1 as weights on square, sawtooth and triangle.\nfunction weights(s) {\n  return s \u003c 0.5 ? [1 - 2 * s, 2 * s, 0] : [0, 2 - 2 * s, 2 * s - 1];\n}\n\nconst wave = (x, w) => w[0] * sq(x) + w[1] * saw(x) + w[2] * tri(x);\n\n// The wave's range over [x - DEL, x + DEL]: the ends, and both sides of any\n// jump or corner inside.\nconst SPECIAL = [0, PI / 2, PI, (3 * PI) / 2, TAU];\nconst waveAt = (t, w) => wave(t - floor(t / TAU) * TAU, w);\nfunction localRange(x, w, out) {\n  let lo = waveAt(x - DEL, w), hi = lo, v = waveAt(x + DEL, w);\n  if (v \u003c lo) lo = v;\n  if (v > hi) hi = v;\n  for (let n = -1; n \u003c= 1; n++)\n    for (let j = 0; j \u003c SPECIAL.length; j++) {\n      const t = SPECIAL[j] + n * TAU;\n      if (t \u003c= x - DEL || t >= x + DEL) continue;\n      for (const u of [t - 1e-9, t + 1e-9]) {\n        v = waveAt(u, w);\n        if (v \u003c lo) lo = v;\n        if (v > hi) hi = v;\n      }\n    }\n  out[0] = lo;\n  out[1] = hi;\n}\n\nexport function setup(params) {\n  const NS = W * SSJ;\n  params.s = {\n    hue: 0, speed: 2, shape: 0, fejer: 0, phase: 0, race: -1, bo: new Float64Array(RACE * NMAX + 2), bs: new Float64Array(RACE * NMAX + 2),\n    sx: new Float64Array(NS), sl: new Float64Array(NS), sh: new Float64Array(NS),\n    sum: new Float32Array(H), ex: new Float32Array(H), gmin: new Float32Array(W), gmax: new Float32Array(W), rk: new Float64Array(H),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), rr: [0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.shape = cl(k[2], 0, 1);\n  // Up to 0.06 the plain sums, so the opening shows the full 8.95%.\n  S.fejer = (max(0, cl(k[3], 0, 1) - 0.06) / 0.94) ** 2;\n  // At Speed 2 the wave slides 0.4 radians a second.\n  S.phase = (S.phase + d * S.speed * 0.2) % TAU;\n  if (input.btnPressed && input.btnPressed[0] && S.race \u003c 0) S.race = 0;\n  if (S.race >= 0) {\n    S.race += d;\n    if (S.race > 6) S.race = -1;\n  }\n}\n\n// The race: the bottom row's count of terms is multiplied by up to 8, rising\n// over 2.5 seconds, holding for 2 and coming back in 1.5.\nfunction raceFactor(t) {\n  if (t \u003c 0) return 1;\n  const u = t \u003c 2.5 ? t / 2.5 : t \u003c 4.5 ? 1 : max(0, (6 - t) / 1.5);\n  const e = u * u * (3 - 2 * u);\n  return RACE ** e;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { R, G, B, sx, sl, sh, sum, ex, rk, rr } = S;\n  const w = weights(S.shape), lam = S.fejer, nTop = NMAX * raceFactor(S.race);\n  const NN = Math.ceil(nTop);\n  // Row r sums the first n = 32^(r / 127) terms of each series, so the count\n  // doubles every 25 rows, continuous in n: between n and n + 1 the next\n  // term comes in by the fraction. The square and the triangle have only odd\n  // harmonics, so their n-th term is harmonic 2n - 1; the sawtooth's is n.\n  for (let r = 0; r \u003c H; r++) rk[r] = nTop ** (r / (H - 1));\n  const { bo, bs } = S;\n  for (let n = 1; n \u003c= NN; n++) {\n    bo[n] = w[0] * bSq(2 * n - 1) + w[2] * bTri(2 * n - 1);\n    bs[n] = w[1] * bSaw(n);\n  }\n  // The jumps of the wave, where it has any, set where the columns go fine.\n  const jumpAt = [];\n  if (w[0] > 0.001) jumpAt.push(0);\n  if (w[0] + w[1] > 0.001) jumpAt.push(PI);\n  // The overshoot the rulers stand at: the larger jump, the one at pi, is\n  // 2 (w0 + w1) tall, from -(w0 + w1) to w0 + w1.\n  const top = w[0] + w[1], ruler = top * (1 + 2 * GIBBS);\n\n  const cp = [0, 0, 0], cn = [0, 0, 0], gold = [1, 0.85, 0.52];\n  // Round orange and yellow a half is lifted, up to 1.8 times, and paled a\n  // little, so it reads amber or butter and not brown or olive.\n  for (const [h, out] of [[S.hue + 0.56, cp], [S.hue + 0.8, cn]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.11) / 0.1, 0, 1);\n    hsv(h, 0.85 - 0.25 * warm, 1 + 0.8 * warm, out);\n  }\n  const graph = S.race >= 0;\n  for (let col = 0; col \u003c W; col++) {\n    // Wave coordinate of the column's left edge.\n    const x0 = (col / W) * TAU - S.phase;\n    let near = false;\n    for (const j of jumpAt) {\n      const dj = ((((x0 + PI / W - j) % TAU) + TAU + PI) % TAU) - PI;\n      if (abs(dj) \u003c (1.6 * TAU) / W) near = true;\n    }\n    const ns = near ? SSJ : SS;\n    let fbar = 0;\n    for (let i = 0; i \u003c ns; i++) {\n      let x = x0 + ((i + 0.5) / ns) * (TAU / W);\n      x -= floor(x / TAU) * TAU;\n      sx[i] = x;\n      fbar += wave(x, w) / ns;\n      localRange(x, w, rr);\n      sl[i] = rr[0];\n      sh[i] = rr[1];\n    }\n    sum.fill(0);\n    ex.fill(0);\n    let gmin = Infinity, gmax = -Infinity;\n    for (let i = 0; i \u003c ns; i++) {\n      const x = sx[i], c1 = 2 * cos(x), c2 = 2 * cos(2 * x), lo = sl[i], hi = sh[i];\n      // sin(nx) and sin((2n - 1)x) by the Chebyshev recurrence.\n      let a0 = 0, a1 = sin(x), o0 = -sin(x), o1 = sin(x);\n      // Plain sums and Fejer means of the odd series and of the sawtooth.\n      // Fejer averages the partial sums over the harmonic index: S_0..S_K\n      // over K + 1, so the odd series adds its unchanged even-index sum too.\n      let So = 0, To = 0, fo = 0, Ss = 0, Ts = 0, fs = 0, r = 0, last = 0;\n      for (let n = 1; n \u003c= NN && r \u003c H; n++) {\n        const So0 = So, fo0 = fo, Ss0 = Ss, fs0 = fs;\n        To += So;\n        So += bo[n] * o1;\n        To += So;\n        fo = To / (2 * n);\n        Ss += bs[n] * a1;\n        Ts += Ss;\n        fs = Ts / (n + 1);\n        while (r \u003c H && rk[r] \u003c= n + 1e-9) {\n          const q = rk[r] - (n - 1);\n          const plain = So0 + q * (So - So0) + Ss0 + q * (Ss - Ss0), mean = fo0 + q * (fo - fo0) + fs0 + q * (fs - fs0);\n          // Past the wave: above its local top where the sum is positive, below\n          // its local bottom where negative. Falling short is not overshoot.\n          const v = (1 - lam) * plain + lam * mean, e = v > 0 ? v - hi : lo - v;\n          sum[r] += v;\n          if (e > ex[r]) ex[r] = e;\n          if (r === H - 1) last = v;\n          r++;\n        }\n        const a2 = c1 * a1 - a0;\n        a0 = a1;\n        a1 = a2;\n        const o2 = c2 * o1 - o0;\n        o0 = o1;\n        o1 = o2;\n      }\n      // The bottom row's sum, for the graph.\n      if (last \u003c gmin) gmin = last;\n      if (last > gmax) gmax = last;\n    }\n    S.gmin[col] = gmin;\n    S.gmax[col] = gmax;\n    for (let r = 0; r \u003c H; r++) {\n      const v = sum[r] / ns, c = v >= 0 ? cp : cn;\n      // The wave's own halves: 0.1 plus 0.32 times the size of the sum, and\n      // 1.8 times how far the sum is past the wave (outward) or short of it,\n      // so the fringes beside each jump show as light and dark bands.\n      const lv = cl(0.1 + 0.32 * min(1, abs(v)) + 1.8 * (v >= 0 ? v - fbar : fbar - v), 0, 0.8);\n      // Past the wave: white-gold, full from about 80% of the overshoot's\n      // limit, so the horns burn and the ripples of the first rows glow.\n      const g = sm(0.25, 0.85, ex[r] / (2 * GIBBS)), p = r * W + col;\n      R[p] = 255 * (c[0] * lv * (1 - g) + gold[0] * g);\n      G[p] = 255 * (c[1] * lv * (1 - g) + gold[1] * g);\n      B[p] = 255 * (c[2] * lv * (1 - g) + gold[2] * g);\n    }\n  }\n\n  if (graph) {\n    // The bottom row's sum as a graph over the top of the panel, with dim\n    // rulers at the wave's top and bottom and gold ones 8.95% of the jump\n    // past them.\n    const t = S.race, fade = min(1, t / 0.3, (6 - t) / 0.5);\n    const rows = GY + GS * 1.45;\n    for (let r = 0; r \u003c= rows; r++)\n      for (let col = 0; col \u003c W; col++) {\n        const p = r * W + col, k = 1 - 0.8 * fade;\n        R[p] *= k;\n        G[p] *= k;\n        B[p] *= k;\n      }\n    const rule = (v, col3, lv) => {\n      const r = round(GY - GS * v);\n      for (let x = 0; x \u003c W; x += 2) {\n        const p = r * W + x;\n        R[p] += col3[0] * lv * fade;\n        G[p] += col3[1] * lv * fade;\n        B[p] += col3[2] * lv * fade;\n      }\n    };\n    rule(top, [1, 1, 1], 70);\n    rule(-top, [1, 1, 1], 70);\n    rule(ruler, gold, 220);\n    rule(-ruler, gold, 220);\n    for (let col = 0; col \u003c W; col++) {\n      const ra = round(GY - GS * S.gmax[col]), rb = round(GY - GS * S.gmin[col]);\n      for (let r = max(0, ra); r \u003c= min(H - 1, rb); r++) {\n        const p = r * W + col;\n        R[p] = 255 * fade + R[p] * (1 - fade);\n        G[p] = 255 * fade + G[p] * (1 - fade);\n        B[p] = 255 * fade + B[p] * (1 - fade);\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Fejer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two halves round the wheel together; the horns stay white-gold. At 0 the positive half is azure and the negative half violet; at 0.25 violet and amber, at 0.5 amber and green, at 0.75 green and azure. A half that comes round to orange or yellow is lifted up to 1.8 times and paled a little, so it does not go brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the wave slides sideways. At 2 one period passes in 16 seconds, four LEDs a second; at 0.2 in 157 seconds, at 3 in 10.5. The rows hold still: row r always sums 32^(r/127) terms, so the count doubles every 25 rows."},{"name":"Shape","min":0,"max":1,"about":"Square wave at 0, sawtooth at 0.5, triangle at 1, and blends between. At 0 two jumps and four horns; on the way to 0.5 the upward jump smooths into the sawtooth's ramp and its two horns fade, leaving the downward jump and its two; past 0.5 that jump shrinks too, its horns always 8.95% of what is left of it, until the triangle at 1 has no jump and no horn."},{"name":"Fejer","min":0,"max":1,"about":"Blends each partial sum toward Fejér's mean, the average of all the partial sums up to it. Up to 0.06 the plain sums, horns 8.95% of the jump; at 0.25 8.1%; at 0.5 4.6%; from 0.75 none; at 1 the means alone, which never leave the range of the wave, and the fringes beside the jumps are gone too."}],"start":[0,2,0,0.06],"measures":{"motion":0.5169,"detail":0.0632,"edges":0.2237,"complexity":1.7176,"coverage":0.871,"colour":0.3287,"drift":0.2332},"knobResponse":[0.1974,0.2792,0.2184,0.2064]},{"slug":"gilbreath-table","title":"Gilbreath Table","family":"number","round":32,"note":"맨 윗줄은 소수 2, 3, 5, 7, …이고, 그 아래 줄마다 윗줄 이웃끼리 뺀 차의 절댓값이 내려와요. 소수 간격이 분홍과 흰빛으로 남은 위 열 줄은 붙박혀 있고, 그 아래는 0 과 2 가 만드는 삼각형 무늬로 표를 따라 내려가요. 왼쪽 끝 금빛 1 의 열은 1만 줄 아래에서도 끊기지 않아요.","idea":"The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.","buttons":"K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.","code":"// ===== Patternflow pattern =====\n// Title:   Gilbreath Table\n// Family:  number\n// Idea:    The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbreath's conjecture (Norman Gilbreath, 1958; first noted by François Proth, 1878), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white.\n// Knob 2: Speed. At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times.\n// Knob 3: Depth. Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2.\n// Knob 4: Zoom. LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells.\n// Buttons: K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.\n\nconst W = 64, H = 128, LIM = 200000, K0 = 96, RW = 128, LOOK = 16, DMAX = 10000, PRIME = 255;\nconst { floor, log, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The same, lifted and paled around orange and yellow, which go brown or\n// olive on the panel when they are dim.\nfunction hsvL(h, s, v, out, o) {\n  const a = h - floor(h), u = cl(1 - Math.abs(a - 0.12) / 0.11, 0, 1);\n  hsv(h, s * (1 - 0.25 * u), min(1, v * (1 + 0.45 * u)), out, o);\n}\n\n// Row 0: the 17984 primes below 200000, by a sieve.\nfunction primes() {\n  const comp = new Uint8Array(LIM + 1), out = [];\n  for (let i = 2; i \u003c= LIM; i++) {\n    if (comp[i]) continue;\n    out.push(i);\n    for (let j = i * i; j \u003c= LIM; j += i) comp[j] = 1;\n  }\n  return Int32Array.from(out);\n}\n\n// One row down: each cell becomes |next - this|, and the row loses a cell.\nfunction step(P) {\n  const a = P.work, n = --P.len;\n  for (let i = 0; i \u003c n; i++) {\n    const d = a[i + 1] - a[i];\n    a[i] = d \u003c 0 ? -d : d;\n  }\n  P.k++;\n}\n\n// Put the working row at row k >= 1. Down to row K0 by plain steps. By row\n// K0 every cell but the first is 0 or 2 (setup checks), so |a - b| is a XOR,\n// and by Lucas's theorem 2^s rows down cell n is cell n XOR cell n + 2^s: a\n// jump of thousands of rows is one pass a bit. The first cell stays\n// |cell 1 - 1| = 1 at each of those rows, which is the conjecture holding.\nfunction seek(P, k) {\n  if (k \u003c= K0) {\n    const g = P.work, p = P.pr;\n    for (let i = 0; i \u003c P.N - 1; i++) g[i] = p[i + 1] - p[i];\n    P.len = P.N - 1;\n    P.k = 1;\n    while (P.k \u003c k) step(P);\n    return;\n  }\n  P.work.set(P.base);\n  P.len = P.N - K0;\n  const m = k - K0;\n  for (let s = 14; s >= 0; s--) {\n    const j = 1 \u003c\u003c s;\n    if (!(m & j)) continue;\n    const a = P.work, n = P.len - j;\n    for (let i = 1; i \u003c n; i++) a[i] ^= a[i + j];\n    P.len = n;\n  }\n  P.k = k;\n}\n\n// Copy a row into a table at slot o, with a number for each cell: for a 0,\n// how many cells there are to the end of its run of 0s, which is how many\n// more rows it stays 0, since a run of 0s loses its last cell every row\n// down; for a 2, the length of its run of 2s. A run of 2s is the lid of a\n// triangle of 0s one shorter, so a long run is the top of a big triangle.\nfunction keep(src, ring, run, o) {\n  ring.set(src.subarray(0, RW), o);\n  for (let i = RW - 1, d = LOOK; i >= 0; i--) {\n    d = ring[o + i] === 0 ? min(LOOK, d + 1) : 0;\n    run[o + i] = d;\n  }\n  for (let i = 0; i \u003c RW; ) {\n    if (ring[o + i] !== 2) {\n      i++;\n      continue;\n    }\n    let j = i;\n    while (j \u003c RW && ring[o + j] === 2) j++;\n    run.fill(min(LOOK, j - i), o + i, o + j);\n    i = j;\n  }\n}\n\nconst keepBody = (P) => keep(P.work, P.ring, P.run, (P.k % H) * RW);\n\nfunction fill(P, r) {\n  r = cl(floor(r), 1, P.N - RW - H - 2);\n  P.top = r;\n  seek(P, r);\n  keepBody(P);\n  while (P.k \u003c r + H - 1) {\n    step(P);\n    keepBody(P);\n  }\n}\n\nexport function setup(params) {\n  const pr = primes(), N = pr.length;\n  const P = {\n    pr, N, work: new Uint8Array(N), base: null, len: 0, k: 0, top: 0, pos: 0, start: 0, pin: 11,\n    ring: new Uint8Array(H * RW), run: new Uint8Array(H * RW),\n    head: new Uint8Array((K0 + 1) * RW), hrun: new Uint8Array((K0 + 1) * RW),\n    hue: NaN, speed: 2, cell: -1, depth: -1, front: -1, rows: H,\n    lut: new Float32Array(256 * 3), zlut: new Float32Array((LOOK + 1) * 3), tlut: new Float32Array((LOOK + 1) * 3),\n  };\n  // The first K0 + 1 rows, kept for the pinned top; row 0 is drawn as primes.\n  P.head.fill(PRIME, 0, RW);\n  seek(P, 1);\n  for (;;) {\n    keep(P.work, P.head, P.hrun, P.k * RW);\n    if (P.k === K0) break;\n    step(P);\n  }\n  for (let i = 1; i \u003c P.len; i++) if (P.work[i] > 2) throw new Error(\"row \" + K0 + \" still holds \" + P.work[i]);\n  P.base = P.work.slice();\n  params.s = P;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  const cell = round(2 ** (cl(k[3], -1, 1) + 1)), depth = cl(k[2], 0, 1);\n  let refill = false;\n  if (cell !== P.cell) {\n    // Pin every row down to the last one that still holds a value above 2\n    // in the columns on show: 0 to 10 for 64 columns, 0 to 4 for 16.\n    P.cell = cell;\n    const cols = Math.ceil(W / cell);\n    let last = 1;\n    for (let r = 1; r \u003c= K0; r++)\n      for (let n = 1; n \u003c cols; n++) if (P.head[r * RW + n] > 2) last = r;\n    P.pin = last + 1;\n    P.rows = P.pin + Math.ceil((H - P.pin * cell - 1) / cell);\n    refill = true;\n  }\n  if (depth !== P.depth) (P.depth = depth), (refill = true);\n  if (refill || (input.btnPressed && input.btnPressed[0])) {\n    P.start = P.pin + floor(DMAX * P.depth * P.depth * P.depth);\n    P.pos = P.start;\n    fill(P, P.pos);\n    P.front = P.front \u003c 0 ? 0 : min(P.front, P.pin);\n  }\n  // The front works out 12 rows a second at Speed 1 until it reaches the\n  // bottom; from then on the lower part goes down the table 1.5 a second.\n  if (P.front \u003c P.rows) P.front += d * P.speed * 12;\n  else {\n    P.front = P.rows + 1;\n    P.pos += d * P.speed * 1.5;\n  }\n  // At the far end of the computed table the lower part starts over at Depth.\n  if (P.pos > P.N - RW - H - 2) (P.pos = P.start), fill(P, P.pos);\n  while (P.top \u003c floor(P.pos)) {\n    P.top++;\n    step(P);\n    keepBody(P);\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    const h = k[0], lut = P.lut, zl = P.zlut, tl = P.tlut;\n    hsv(h + 0.12, 0.8, 1, lut, 3);\n    for (let v = 3; v \u003c 256; v++) {\n      // 4 pink, 6 coral, then warmer and whiter up to the widest gaps.\n      const u = cl((log(v) - log(4)) / (log(40) - log(4)), 0, 1);\n      hsv(h + 0.9 + 0.1 * u, 0.7 * (1 - u) + 0.08, 0.84 + 0.16 * u, lut, v * 3);\n    }\n    hsv(h + 0.1, 0.06, 1, lut, PRIME * 3);\n    for (let z = 0; z \u003c= LOOK; z++) {\n      // A 0 is brighter near the slanted side of its triangle and deeper\n      // inside; a 2 is brighter the longer its run, so big triangles have a\n      // bright lid.\n      const u = cl((z - 1) / 7, 0, 1), w = cl((z - 1) / 6, 0, 1);\n      hsvL(h + 0.62 + 0.08 * u, 0.8, 0.32 - 0.18 * u, zl, z * 3);\n      hsvL(h + 0.5 - 0.04 * w, 0.8 - 0.3 * w, 0.54 + 0.4 * w, tl, z * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.depth \u003c 0) return;\n  const lut = P.lut, zl = P.zlut, tl = P.tlut, c = P.cell, split = P.pin * c, f = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    // The pinned rows, one dark LED row with the column of 1s going through\n    // it, then the moving part. Rows past the front are not worked out yet;\n    // the newest ones glow.\n    let r, z, o, j;\n    if (y \u003c split) (j = floor(y / c)), (r = P.head), (z = P.hrun), (o = j * RW);\n    else if (y === split) {\n      for (let x = 0; x \u003c W; x++) {\n        const g = x \u003c (c > 2 ? c - 1 : c) && f > P.pin ? 0.8 : 0;\n        display.setPixel(x, y, lut[3] * g, lut[4] * g, lut[5] * g);\n      }\n      continue;\n    } else {\n      const b = floor((y - split - 1) / c);\n      (j = P.pin + b), (r = P.ring), (z = P.run), (o = ((P.top + b) % H) * RW);\n    }\n    if (j >= f) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const glow = 0.75 * Math.exp(-(f - j) / 2.5);\n    const edgeY = c > 2 && (y \u003c split ? y % c : (y - split - 1) % c) === c - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const n = floor(x / c), v = r[o + n];\n      let R, G, B;\n      if (v === 0 || v === 2) {\n        const q = z[o + n] * 3, t = v ? tl : zl;\n        (R = t[q]), (G = t[q + 1]), (B = t[q + 2]);\n      } else {\n        const q = v * 3;\n        (R = lut[q]), (G = lut[q + 1]), (B = lut[q + 2]);\n      }\n      if (glow > 0.01) (R += (255 - R) * glow), (G += (255 - G) * glow), (B += (255 - B) * glow);\n      if (edgeY || (c > 2 && x % c === c - 1)) (R *= 0.45), (G *= 0.45), (B *= 0.45);\n      display.setPixel(x, y, R, G, B);\n    }\n  }\n}\n","layer":{"id":"layer-gilbreath-table","type":"code","name":"gilbreath-table","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gilbreath Table\n// Family:  number\n// Idea:    The primes run along the top row and every row below holds the absolute differences of neighbours in the row above, worked out row by row down the panel; the rows where the prime gaps still show stay pinned at the top while the rest slides down the table, and the column of 1s at the left edge never breaks.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbreath's conjecture (Norman Gilbreath, 1958; first noted by François Proth, 1878), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white.\n// Knob 2: Speed. At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times.\n// Knob 3: Depth. Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2.\n// Knob 4: Zoom. LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells.\n// Buttons: K1 tap takes the lower part back up to where Depth opens it and works it out again from under the pinned rows.\n\nconst W = 64, H = 128, LIM = 200000, K0 = 96, RW = 128, LOOK = 16, DMAX = 10000, PRIME = 255;\nconst { floor, log, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The same, lifted and paled around orange and yellow, which go brown or\n// olive on the panel when they are dim.\nfunction hsvL(h, s, v, out, o) {\n  const a = h - floor(h), u = cl(1 - Math.abs(a - 0.12) / 0.11, 0, 1);\n  hsv(h, s * (1 - 0.25 * u), min(1, v * (1 + 0.45 * u)), out, o);\n}\n\n// Row 0: the 17984 primes below 200000, by a sieve.\nfunction primes() {\n  const comp = new Uint8Array(LIM + 1), out = [];\n  for (let i = 2; i \u003c= LIM; i++) {\n    if (comp[i]) continue;\n    out.push(i);\n    for (let j = i * i; j \u003c= LIM; j += i) comp[j] = 1;\n  }\n  return Int32Array.from(out);\n}\n\n// One row down: each cell becomes |next - this|, and the row loses a cell.\nfunction step(P) {\n  const a = P.work, n = --P.len;\n  for (let i = 0; i \u003c n; i++) {\n    const d = a[i + 1] - a[i];\n    a[i] = d \u003c 0 ? -d : d;\n  }\n  P.k++;\n}\n\n// Put the working row at row k >= 1. Down to row K0 by plain steps. By row\n// K0 every cell but the first is 0 or 2 (setup checks), so |a - b| is a XOR,\n// and by Lucas's theorem 2^s rows down cell n is cell n XOR cell n + 2^s: a\n// jump of thousands of rows is one pass a bit. The first cell stays\n// |cell 1 - 1| = 1 at each of those rows, which is the conjecture holding.\nfunction seek(P, k) {\n  if (k \u003c= K0) {\n    const g = P.work, p = P.pr;\n    for (let i = 0; i \u003c P.N - 1; i++) g[i] = p[i + 1] - p[i];\n    P.len = P.N - 1;\n    P.k = 1;\n    while (P.k \u003c k) step(P);\n    return;\n  }\n  P.work.set(P.base);\n  P.len = P.N - K0;\n  const m = k - K0;\n  for (let s = 14; s >= 0; s--) {\n    const j = 1 \u003c\u003c s;\n    if (!(m & j)) continue;\n    const a = P.work, n = P.len - j;\n    for (let i = 1; i \u003c n; i++) a[i] ^= a[i + j];\n    P.len = n;\n  }\n  P.k = k;\n}\n\n// Copy a row into a table at slot o, with a number for each cell: for a 0,\n// how many cells there are to the end of its run of 0s, which is how many\n// more rows it stays 0, since a run of 0s loses its last cell every row\n// down; for a 2, the length of its run of 2s. A run of 2s is the lid of a\n// triangle of 0s one shorter, so a long run is the top of a big triangle.\nfunction keep(src, ring, run, o) {\n  ring.set(src.subarray(0, RW), o);\n  for (let i = RW - 1, d = LOOK; i >= 0; i--) {\n    d = ring[o + i] === 0 ? min(LOOK, d + 1) : 0;\n    run[o + i] = d;\n  }\n  for (let i = 0; i \u003c RW; ) {\n    if (ring[o + i] !== 2) {\n      i++;\n      continue;\n    }\n    let j = i;\n    while (j \u003c RW && ring[o + j] === 2) j++;\n    run.fill(min(LOOK, j - i), o + i, o + j);\n    i = j;\n  }\n}\n\nconst keepBody = (P) => keep(P.work, P.ring, P.run, (P.k % H) * RW);\n\nfunction fill(P, r) {\n  r = cl(floor(r), 1, P.N - RW - H - 2);\n  P.top = r;\n  seek(P, r);\n  keepBody(P);\n  while (P.k \u003c r + H - 1) {\n    step(P);\n    keepBody(P);\n  }\n}\n\nexport function setup(params) {\n  const pr = primes(), N = pr.length;\n  const P = {\n    pr, N, work: new Uint8Array(N), base: null, len: 0, k: 0, top: 0, pos: 0, start: 0, pin: 11,\n    ring: new Uint8Array(H * RW), run: new Uint8Array(H * RW),\n    head: new Uint8Array((K0 + 1) * RW), hrun: new Uint8Array((K0 + 1) * RW),\n    hue: NaN, speed: 2, cell: -1, depth: -1, front: -1, rows: H,\n    lut: new Float32Array(256 * 3), zlut: new Float32Array((LOOK + 1) * 3), tlut: new Float32Array((LOOK + 1) * 3),\n  };\n  // The first K0 + 1 rows, kept for the pinned top; row 0 is drawn as primes.\n  P.head.fill(PRIME, 0, RW);\n  seek(P, 1);\n  for (;;) {\n    keep(P.work, P.head, P.hrun, P.k * RW);\n    if (P.k === K0) break;\n    step(P);\n  }\n  for (let i = 1; i \u003c P.len; i++) if (P.work[i] > 2) throw new Error(\"row \" + K0 + \" still holds \" + P.work[i]);\n  P.base = P.work.slice();\n  params.s = P;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.speed = cl(k[1], 0.2, 3);\n  const cell = round(2 ** (cl(k[3], -1, 1) + 1)), depth = cl(k[2], 0, 1);\n  let refill = false;\n  if (cell !== P.cell) {\n    // Pin every row down to the last one that still holds a value above 2\n    // in the columns on show: 0 to 10 for 64 columns, 0 to 4 for 16.\n    P.cell = cell;\n    const cols = Math.ceil(W / cell);\n    let last = 1;\n    for (let r = 1; r \u003c= K0; r++)\n      for (let n = 1; n \u003c cols; n++) if (P.head[r * RW + n] > 2) last = r;\n    P.pin = last + 1;\n    P.rows = P.pin + Math.ceil((H - P.pin * cell - 1) / cell);\n    refill = true;\n  }\n  if (depth !== P.depth) (P.depth = depth), (refill = true);\n  if (refill || (input.btnPressed && input.btnPressed[0])) {\n    P.start = P.pin + floor(DMAX * P.depth * P.depth * P.depth);\n    P.pos = P.start;\n    fill(P, P.pos);\n    P.front = P.front \u003c 0 ? 0 : min(P.front, P.pin);\n  }\n  // The front works out 12 rows a second at Speed 1 until it reaches the\n  // bottom; from then on the lower part goes down the table 1.5 a second.\n  if (P.front \u003c P.rows) P.front += d * P.speed * 12;\n  else {\n    P.front = P.rows + 1;\n    P.pos += d * P.speed * 1.5;\n  }\n  // At the far end of the computed table the lower part starts over at Depth.\n  if (P.pos > P.N - RW - H - 2) (P.pos = P.start), fill(P, P.pos);\n  while (P.top \u003c floor(P.pos)) {\n    P.top++;\n    step(P);\n    keepBody(P);\n  }\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    const h = k[0], lut = P.lut, zl = P.zlut, tl = P.tlut;\n    hsv(h + 0.12, 0.8, 1, lut, 3);\n    for (let v = 3; v \u003c 256; v++) {\n      // 4 pink, 6 coral, then warmer and whiter up to the widest gaps.\n      const u = cl((log(v) - log(4)) / (log(40) - log(4)), 0, 1);\n      hsv(h + 0.9 + 0.1 * u, 0.7 * (1 - u) + 0.08, 0.84 + 0.16 * u, lut, v * 3);\n    }\n    hsv(h + 0.1, 0.06, 1, lut, PRIME * 3);\n    for (let z = 0; z \u003c= LOOK; z++) {\n      // A 0 is brighter near the slanted side of its triangle and deeper\n      // inside; a 2 is brighter the longer its run, so big triangles have a\n      // bright lid.\n      const u = cl((z - 1) / 7, 0, 1), w = cl((z - 1) / 6, 0, 1);\n      hsvL(h + 0.62 + 0.08 * u, 0.8, 0.32 - 0.18 * u, zl, z * 3);\n      hsvL(h + 0.5 - 0.04 * w, 0.8 - 0.3 * w, 0.54 + 0.4 * w, tl, z * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.depth \u003c 0) return;\n  const lut = P.lut, zl = P.zlut, tl = P.tlut, c = P.cell, split = P.pin * c, f = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    // The pinned rows, one dark LED row with the column of 1s going through\n    // it, then the moving part. Rows past the front are not worked out yet;\n    // the newest ones glow.\n    let r, z, o, j;\n    if (y \u003c split) (j = floor(y / c)), (r = P.head), (z = P.hrun), (o = j * RW);\n    else if (y === split) {\n      for (let x = 0; x \u003c W; x++) {\n        const g = x \u003c (c > 2 ? c - 1 : c) && f > P.pin ? 0.8 : 0;\n        display.setPixel(x, y, lut[3] * g, lut[4] * g, lut[5] * g);\n      }\n      continue;\n    } else {\n      const b = floor((y - split - 1) / c);\n      (j = P.pin + b), (r = P.ring), (z = P.run), (o = ((P.top + b) % H) * RW);\n    }\n    if (j >= f) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const glow = 0.75 * Math.exp(-(f - j) / 2.5);\n    const edgeY = c > 2 && (y \u003c split ? y % c : (y - split - 1) % c) === c - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const n = floor(x / c), v = r[o + n];\n      let R, G, B;\n      if (v === 0 || v === 2) {\n        const q = z[o + n] * 3, t = v ? tl : zl;\n        (R = t[q]), (G = t[q + 1]), (B = t[q + 2]);\n      } else {\n        const q = v * 3;\n        (R = lut[q]), (G = lut[q + 1]), (B = lut[q + 2]);\n      }\n      if (glow > 0.01) (R += (255 - R) * glow), (G += (255 - G) * glow), (B += (255 - B) * glow);\n      if (edgeY || (c > 2 && x % c === c - 1)) (R *= 0.45), (G *= 0.45), (B *= 0.45);\n      display.setPixel(x, y, R, G, B);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Zoom=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the 1s are gold, a 2 teal and brighter the longer its run, a 0 indigo shading darker away from the slanted side of its triangle, 4 and 6 pink and coral, 8 and up near white, and the primes white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the table is worked out 24 rows a second down the panel, so it is full in under 3 seconds, and from then on the lower part goes down the table 3 rows a second; at 0.2 a tenth of both, at 3 one and a half times."},{"name":"Depth","min":0,"max":1,"about":"Where the lower part opens: straight on from the pinned rows at 0, 156 rows further down at 0.25, 1250 at 0.5, 4219 at 0.75 and 10000 at 1. Among these 17984 primes the last value above 2 sits in row 64; from row 65 on every cell but the first is 0 or 2."},{"name":"Zoom","min":-1,"max":1,"about":"LEDs to a cell. At -1 one LED, 64 cells across and 11 pinned rows; at 0 two LEDs, 32 cells and 10 pinned rows; at 0.5 three LEDs and at 1 four, 16 cells and 5 pinned rows. From three LEDs on a dark line runs between cells."}],"start":[0,2,0,0.06],"measures":{"motion":0.5182,"detail":0.0975,"edges":0.6797,"complexity":0.1987,"coverage":0.9794,"colour":0.3745,"drift":0.1585},"knobResponse":[0.3124,0.3276,0.151,0.2734]},{"slug":"gilded-cream","title":"Gilded Cream","family":"cosmetic","round":35,"note":"금박 조각 여섯 개가 든 아이보리 크림을 옆에서 본 단면이 제빵사의 반죽처럼 두 배로 늘어나 제 위로 접혀요. 접을 때마다 조각이 길게 늘어 금빛 결이 되고, 다섯 번 접으면 서른두 겹의 가는 금선이 반짝임만 남기고 크림에 녹아든 뒤 새 조각이 떨어져요. K3 은 한 번에 세 겹이나 네 겹으로 접게 하고, K1 은 크림을 색상환 한 바퀴로 물들이며 누르면 한 번을 네 배 빠르게 접어요.","idea":"A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.","buttons":"K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Gilded Cream\n// Family:  cosmetic\n// Idea:    A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after the folded baker's map of ergodic theory and gold-leaf cream in white and gold packaging\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1\n//\n// Knob 1: Hue. Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold.\n// Knob 2: Speed. At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower.\n// Knob 3: Fold. How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer.\n// Knob 4: Gold. How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1.\n// Buttons: K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x5bd1e995, 0x27d4eb2d);\n  h = Math.imul(h ^ (h >>> 15), 0x165667b1);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the cream's own soft relief.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 17 + o * 6007) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\n// The cream as it was before any fold, in its own coordinates: u along the\n// slab, 0 to 1 across the panel, and v up through it, 0 at the bottom to 1\n// at the top. A raster of RU x RV holds where the gold is, which flake it\n// belongs to and how each crumpled facet of the leaf is tilted.\nconst RU = 256, RV = 256;\nconst MAXF = 17;\n\nfunction scatter(P) {\n  const { GC, GI, GX, GY } = P;\n  GC.fill(0);\n  GI.fill(-1);\n  const n = 6 + floor(11 * P.gold + 0.5), sf = 1 + 0.5 * P.gold, R = P.round * 977;\n  const vx = new Float32Array(10), vy = new Float32Array(10), va = new Float32Array(11);\n  for (let i = 0; i \u003c n; i++) {\n    const s = R + i * 53;\n    // Half sizes in LEDs: across the slab and up through it.\n    const a = (2.8 + 2.2 * hash(s)) * sf, b = (4 + 3.4 * hash(s + 1)) * sf;\n    const cu = 0.1 + 0.8 * hash(s + 2), cv = 0.08 + 0.84 * hash(s + 3), rot = (hash(s + 4) - 0.5) * 1.2;\n    // A torn flake: 6 to 9 corners at their own distances round the middle.\n    const k = 6 + floor(4 * hash(s + 5));\n    for (let m = 0; m \u003c k; m++) {\n      const an = (2 * PI * (m + 0.35 * (hash(s + 11 + m) - 0.5))) / k, r = 0.6 + 0.45 * hash(s + 23 + m);\n      va[m] = an;\n      vx[m] = r * cos(an);\n      vy[m] = r * sin(an);\n    }\n    va[k] = va[0] + 2 * PI;\n    const cr = cos(rot), sr = sin(rot), ext = max(a, b) * 1.1;\n    const i0 = max(0, floor((cu - ext / W) * RU)), i1 = min(RU - 1, floor((cu + ext / W) * RU));\n    const j0 = max(0, floor((cv - ext / H) * RV)), j1 = min(RV - 1, floor((cv + ext / H) * RV));\n    for (let j = j0; j \u003c= j1; j++)\n      for (let q0 = i0; q0 \u003c= i1; q0++) {\n        const dx = ((q0 + 0.5) / RU - cu) * W, dy = ((j + 0.5) / RV - cv) * H;\n        const lx = dx * cr + dy * sr, ly = -dx * sr + dy * cr, ex = lx / a, ey = ly / b, d = sqrt(ex * ex + ey * ey);\n        let th = Math.atan2(ey, ex);\n        if (th \u003c va[0]) th += 2 * PI;\n        let m = 0;\n        while (m \u003c k - 1 && th > va[m + 1]) m++;\n        // Where the ray from the middle meets the outline between corners m\n        // and m + 1.\n        const m1 = (m + 1) % k, ax = vx[m], ay = vy[m], bx = vx[m1] - ax, by = vy[m1] - ay;\n        const dc = cos(th) * by - sin(th) * bx, re = abs(dc) > 1e-6 ? (ax * by - ay * bx) / dc : 1;\n        const cov = cl((re - d) * min(a, b) * 2, 0, 1);\n        const q = j * RU + q0;\n        if (cov \u003c= GC[q]) continue;\n        GC[q] = cov;\n        GI[q] = i;\n        // Crumple facets about 2.5 LEDs across, each tilted its own way.\n        const fx = floor(lx / 2.5 + 50), fy = floor(ly / 2.5 + 50);\n        GX[q] = hash(s * 31 + fx * 7 + fy * 131) - 0.5;\n        GY[q] = hash(s * 37 + fx * 11 + fy * 173) - 0.5;\n      }\n    P.land[i] = 0.08 + 0.55 * hash(s + 9);\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    c: 0, hue: 0, speed: 2, k3: 2, gold: 0.06, goldBuilt: -1,\n    round: 0, folds: [], fk: 2, p: 0, ph: 0, pt: 0, fast: false,\n    GC: new Float32Array(RU * RV), GI: new Int8Array(RU * RV), GX: new Float32Array(RU * RV), GY: new Float32Array(RU * RV),\n    land: new Float32Array(MAXF),\n    hgt: new Float32Array(N), surf: new Float32Array(N), gcov: new Float32Array(N), gfx: new Float32Array(N), gfy: new Float32Array(N), gfl: new Float32Array(N),\n    hole: new Float32Array(N), lipd: new Float32Array(N), ob: new Float32Array(N), pal: new Float32Array(12), lastHue: NaN,\n  };\n}\n\n// The round, in seconds at Speed 2: the flakes land, then folds one after\n// another with a rest between, then the cream settles smooth.\nconst LAND = 0, FOLD = 1, REST = 2, SETTLE = 3;\nconst LAND_T = 0.7, FOLD_T = 2.0, REST_T = 0.7, SETTLE_T = 1.8;\n// Folds a round: until the leaf has been stretched past twenty times.\nconst foldsFor = (k) => (k === 2 ? 5 : 3);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.k3 = floor(cl(k[2], 2, 4) + 0.5);\n  P.gold = cl(k[3], 0, 1);\n  if (abs(P.gold - P.goldBuilt) > 0.004) (scatter(P), (P.goldBuilt = P.gold));\n  P.c += d;\n  // A tap waits for the next fold if none is under way.\n  if (input.btnPressed && input.btnPressed[0]) P.fast = true;\n  P.pt += P.ph === FOLD && P.fast ? d * 4 : d;\n  if (P.ph === LAND && P.pt >= LAND_T) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === REST && (P.pt >= REST_T || P.fast)) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === FOLD && P.pt >= FOLD_T) {\n    P.folds.push(P.fk);\n    P.pt = 0;\n    P.fast = false;\n    P.ph = P.folds.length >= foldsFor(P.fk) ? SETTLE : REST;\n  } else if (P.ph === SETTLE && P.pt >= SETTLE_T) {\n    // Fresh cream: the folds are forgotten and new flakes fall in.\n    P.round++;\n    P.folds = [];\n    P.ph = LAND;\n    P.pt = 0;\n    scatter(P);\n  }\n  P.p = P.ph === FOLD ? sm(P.pt / FOLD_T) : 0;\n}\n\n// Sub-samples down each LED: the folds pack the layers thinner than an LED.\nconst SUB = 4;\n// The sliding layer's end is rounded like a rolled lip, LIP LEDs deep.\nconst LIP = 4.5;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { GC, GI, GX, GY, hgt, surf, gcov, gfx, gfy, gfl, hole, lipd, ob, pal, folds, land } = P;\n  if (P.lastHue !== P.hue) {\n    // The cream's tint. Round blush, peach, ivory and pistachio it stays\n    // pale and light, where a deeper cream reads beige or khaki beside the\n    // gold.\n    let h = P.hue + 0.11;\n    h -= floor(h);\n    const warm = sm((h + 0.03) / 0.07) * (1 - sm((h - 0.22) / 0.08));\n    hsv(h, 0.27 - 0.13 * warm, 0.93 + 0.03 * warm, pal, 0);\n    // The same cream in its folds' shade: a little deeper, never grey.\n    hsv(h - 0.01, 0.36 - 0.14 * warm, 0.74 + 0.1 * warm, pal, 3);\n    // The cream down in the gap under a layer still sliding over.\n    hsv(h - 0.01, 0.31 - 0.15 * warm, 0.82 + 0.07 * warm, pal, 6);\n    P.lastHue = P.hue;\n  }\n  const c = P.c, L = 1 + (P.fk - 1) * P.p, nF = folds.length, folding = P.ph === FOLD;\n  // Mid-fold the slab's far end stands inside the panel.\n  const open = folding && L - floor(L) > 0.001;\n  // Settling: the layers' relief and the leaf fade away and the cream lies\n  // smooth; then the new flakes land one by one and the relief comes back.\n  const settle = P.ph === SETTLE ? sm(P.pt / (SETTLE_T * 0.8)) : 0;\n  const keep = P.ph === LAND ? sm(P.pt / LAND_T) : 1 - settle;\n  // How deep the groove between layers is for each fold, newest first: the\n  // newest folds show, the older ones knit together.\n  const amp = [];\n  let th = H / L;\n  amp.push(folding ? 2 * min(1.6, 0.1 * th) * sm(P.p * 3) : 0);\n  for (let i = nF - 1; i >= 0; i--) {\n    th /= folds[i];\n    amp.push(2 * min(1.6, 0.1 * th) * 0.62 ** (nF - 1 - i + P.p));\n  }\n  const landT = P.ph === LAND ? P.pt : 99;\n\n  for (let x = 0; x \u003c W; x++) {\n    const ux = (x + 0.5) / W;\n    // Under the lip the top of the layer below swells a little, unevenly.\n    const bul = (2 + 1.3 * sin(ux * 7.5 + 0.6 * c) + 0.7 * sin(ux * 17 - c)) / H;\n    for (let y = 0; y \u003c H; y++) {\n      let g = 0, gx = 0, gy = 0, fl = 0, hh = 0, emp = 0, nS = 0, dl = 99;\n      for (let sI = 0; sI \u003c SUB; sI++) {\n        let u = ux, v = (H - y - (sI + 0.5) / SUB) / H;\n        let rel = 0;\n        // The fold under way: the slab stretched to L times its length and\n        // as much thinner, laid back and forth across the panel from the\n        // bottom up, each layer the other way up from the one below.\n        {\n          let j = floor(v * L), w = v * L - j, s = j + (j & 1 ? 1 - u : u);\n          if (open && j + 1 > L) {\n            const send = L - ((1 - 2 * sqrt(w * (1 - w))) * LIP) / W;\n            let cv = cl((send - s) * W + 0.5, 0, 1);\n            if (cv \u003c 1 && j > 0 && v - j / L \u003c bul) {\n              cv = 1;\n              j -= 1;\n              w = 0.999;\n              s = j + (j & 1 ? 1 - u : u);\n            }\n            emp += (1 - cv) / SUB;\n            if (cv \u003c= 0) {\n              dl = min(dl, (s - send) * W);\n              continue;\n            }\n          }\n          // Each layer is rounded across its thickness, so a groove runs\n          // between it and the next.\n          if (amp[0] > 0) rel += amp[0] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / L;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The folds already made, newest first, back to the cream as it was.\n        for (let i = nF - 1, lv = 1; i >= 0; i--, lv++) {\n          const k = folds[i], j = min(k - 1, floor(v * k)), w = v * k - j, s = j + (j & 1 ? 1 - u : u);\n          rel += amp[lv] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / k;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The cream's own soft relief, drawn out with it, read once an LED.\n        if (nS === 0) hh += 0.55 * SUB * tap(u * 40, v * 64 + 17);\n        hh += rel;\n        nS++;\n        // The leaf.\n        const fu = cl(u * RU - 0.5, 0, RU - 1.001), fv = cl(v * RV - 0.5, 0, RV - 1.001);\n        const i0 = floor(fu), j0 = floor(fv), q = j0 * RU + i0;\n        const c00 = GC[q], c10 = GC[q + 1], c01 = GC[q + RU], c11 = GC[q + RU + 1];\n        if (c00 + c10 + c01 + c11 > 0) {\n          const tx = fu - i0, ty = fv - j0;\n          let cc = c00 + (c10 - c00) * tx + (c01 - c00) * ty + (c00 - c10 - c01 + c11) * tx * ty;\n          const qq = ty \u003c 0.5 ? (tx \u003c 0.5 ? q : q + 1) : tx \u003c 0.5 ? q + RU : q + RU + 1, id = GI[qq];\n          if (id >= 0 && landT \u003c 99) {\n            // A flake that is landing grows in with a flash.\n            const t = (landT - land[id]) / 0.18;\n            cc *= sm(t);\n            fl = max(fl, t > 0 ? exp(-((t - 1) ** 2) * 1.5) : 0);\n          }\n          g += cc;\n          gx += GX[qq] * cc;\n          gy += GY[qq] * cc;\n        }\n      }\n      const p = y * W + x;\n      hgt[p] = nS ? (hh / nS) * keep : 0;\n      gcov[p] = nS ? g / nS : 0;\n      gfx[p] = g > 0 ? gx / g : 0;\n      gfy[p] = g > 0 ? gy / g : 0;\n      gfl[p] = fl;\n      hole[p] = emp;\n      lipd[p] = dl;\n    }\n  }\n  // The gap, softened over a few LEDs: the cream rounds down into it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += hole[y * W + cl(x + d, 0, W - 1)] * (3 - abs(d));\n      surf[y * W + x] = a / 9;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += surf[cl(y + d, 0, H - 1) * W + x] * (3 - abs(d));\n      ob[y * W + x] = a / 9;\n    }\n  for (let p = 0; p \u003c N; p++) surf[p] = hgt[p] * (1 - hole[p]) - 2.6 * ob[p];\n\n  // A small lamp drifts over the cream; the cream answers with a soft satin\n  // sheen and the leaf with a sharp glint off whichever facets face it.\n  const Lx = 32 + 38 * sin(0.29 * c + 0.4), Ly = 64 + 58 * sin(0.21 * c + 1.1), Lz = 55;\n  const Ex = 32, Ey = 64, Ez = 220;\n  const cr = pal[0], cg = pal[1], cb = pal[2], dr = pal[3], dg = pal[4], db = pal[5], pr = pal[6], pg = pal[7], pb = pal[8];\n  // The leaf fades into the cream as it settles.\n  const gk = 1 - settle;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, ow = hole[p];\n      const zx = (surf[y * W + min(W - 1, x + 1)] - surf[y * W + max(0, x - 1)]) / 2;\n      const zy = (surf[min(H - 1, y + 1) * W + x] - surf[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - surf[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      (hx *= hi), (hy *= hi), (hz *= hi);\n      const dif = nx * lx + ny * ly + nz * lz;\n      // The cream: lit against a level surface, its folds a deeper tint and\n      // a little shade where it rounds down into the gap.\n      const sh = cl(1 + 1.1 * (dif - lz) - 0.25 * ob[p], 0, 1.3);\n      const dk = 1 - sm(sh), lift = max(0, sh - 1);\n      let r = cr + (dr - cr) * dk + lift * 0.25, gg = cg + (dg - cg) * dk + lift * 0.25, b = cb + (db - cb) * dk + lift * 0.25;\n      const nh = max(0, nx * hx + ny * hy + nz * hz);\n      const n2 = nh * nh, n4 = n2 * n2, n8 = n4 * n4, n16 = n8 * n8;\n      const sat = 0.1 * n8 * n4 * n2 + 0.12 * n16 * n16 * n16 * n8 * n4;\n      r += sat;\n      gg += sat;\n      b += sat;\n      // The leaf: deep gold turned from the lamp, bright gold towards it,\n      // and a white-gold glint where a facet mirrors it.\n      const gc = gcov[p] * gk;\n      if (gc > 0.002) {\n        const tx = gfx[p] * 0.9, ty = gfy[p] * 0.9;\n        const fnx = nx + tx, fny = ny + ty, fnz = nz, fn = 1 / sqrt(fnx * fnx + fny * fny + fnz * fnz);\n        const fd = max(0, (fnx * lx + fny * ly + fnz * lz) * fn), fh = max(0, (fnx * hx + fny * hy + fnz * hz) * fn);\n        const f2 = fh * fh, f8 = f2 * f2 * f2 * f2, f32 = f8 * f8 * f8 * f8;\n        const lit = 0.5 + 0.62 * fd, gl = 1.3 * f32 * f8 + 0.6 * gfl[p];\n        // A vein thinner than an LED still reads as a line of gold.\n        const a = min(1, gc * (1.25 + 0.3 * nF));\n        r += (0.9 * lit + gl - r) * a;\n        gg += (0.62 * lit + gl * 0.92 - gg) * a;\n        b += (0.16 * lit + gl * 0.7 - b) * a;\n      }\n      // Down in the gap: the cream below in its own shade.\n      if (ow > 0) {\n        // The sliding layer's lip shades the cream just past it.\n        const gs = cl(0.92 + 0.5 * (dif - lz), 0.76, 1.05) * (0.84 + 0.16 * sm(lipd[p] / 9));\n        r += (pr * gs - r) * ow;\n        gg += (pg * gs - gg) * ow;\n        b += (pb * gs - b) * ow;\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-gilded-cream","type":"code","name":"gilded-cream","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gilded Cream\n// Family:  cosmetic\n// Idea:    A thick ivory cream with flakes of gold leaf in it is stretched and folded over itself again and again like a baker's dough, seen from the side, so the few flakes are drawn out into long gold veins and then into thinner and more of them, layer on layer, while a small lamp drifts over the cream's soft relief and the gold glints where it finds it, until the gold is a fine shimmer, the cream settles smooth and fresh flakes are scattered in for the next round.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after the folded baker's map of ergodic theory and gold-leaf cream in white and gold packaging\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1\n//\n// Knob 1: Hue. Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold.\n// Knob 2: Speed. At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower.\n// Knob 3: Fold. How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer.\n// Knob 4: Gold. How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1.\n// Buttons: K1 tap makes one fast fold: the fold under way, or the next one, runs four times as fast, half a second at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x5bd1e995, 0x27d4eb2d);\n  h = Math.imul(h ^ (h >>> 15), 0x165667b1);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the cream's own soft relief.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 17 + o * 6007) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\n// The cream as it was before any fold, in its own coordinates: u along the\n// slab, 0 to 1 across the panel, and v up through it, 0 at the bottom to 1\n// at the top. A raster of RU x RV holds where the gold is, which flake it\n// belongs to and how each crumpled facet of the leaf is tilted.\nconst RU = 256, RV = 256;\nconst MAXF = 17;\n\nfunction scatter(P) {\n  const { GC, GI, GX, GY } = P;\n  GC.fill(0);\n  GI.fill(-1);\n  const n = 6 + floor(11 * P.gold + 0.5), sf = 1 + 0.5 * P.gold, R = P.round * 977;\n  const vx = new Float32Array(10), vy = new Float32Array(10), va = new Float32Array(11);\n  for (let i = 0; i \u003c n; i++) {\n    const s = R + i * 53;\n    // Half sizes in LEDs: across the slab and up through it.\n    const a = (2.8 + 2.2 * hash(s)) * sf, b = (4 + 3.4 * hash(s + 1)) * sf;\n    const cu = 0.1 + 0.8 * hash(s + 2), cv = 0.08 + 0.84 * hash(s + 3), rot = (hash(s + 4) - 0.5) * 1.2;\n    // A torn flake: 6 to 9 corners at their own distances round the middle.\n    const k = 6 + floor(4 * hash(s + 5));\n    for (let m = 0; m \u003c k; m++) {\n      const an = (2 * PI * (m + 0.35 * (hash(s + 11 + m) - 0.5))) / k, r = 0.6 + 0.45 * hash(s + 23 + m);\n      va[m] = an;\n      vx[m] = r * cos(an);\n      vy[m] = r * sin(an);\n    }\n    va[k] = va[0] + 2 * PI;\n    const cr = cos(rot), sr = sin(rot), ext = max(a, b) * 1.1;\n    const i0 = max(0, floor((cu - ext / W) * RU)), i1 = min(RU - 1, floor((cu + ext / W) * RU));\n    const j0 = max(0, floor((cv - ext / H) * RV)), j1 = min(RV - 1, floor((cv + ext / H) * RV));\n    for (let j = j0; j \u003c= j1; j++)\n      for (let q0 = i0; q0 \u003c= i1; q0++) {\n        const dx = ((q0 + 0.5) / RU - cu) * W, dy = ((j + 0.5) / RV - cv) * H;\n        const lx = dx * cr + dy * sr, ly = -dx * sr + dy * cr, ex = lx / a, ey = ly / b, d = sqrt(ex * ex + ey * ey);\n        let th = Math.atan2(ey, ex);\n        if (th \u003c va[0]) th += 2 * PI;\n        let m = 0;\n        while (m \u003c k - 1 && th > va[m + 1]) m++;\n        // Where the ray from the middle meets the outline between corners m\n        // and m + 1.\n        const m1 = (m + 1) % k, ax = vx[m], ay = vy[m], bx = vx[m1] - ax, by = vy[m1] - ay;\n        const dc = cos(th) * by - sin(th) * bx, re = abs(dc) > 1e-6 ? (ax * by - ay * bx) / dc : 1;\n        const cov = cl((re - d) * min(a, b) * 2, 0, 1);\n        const q = j * RU + q0;\n        if (cov \u003c= GC[q]) continue;\n        GC[q] = cov;\n        GI[q] = i;\n        // Crumple facets about 2.5 LEDs across, each tilted its own way.\n        const fx = floor(lx / 2.5 + 50), fy = floor(ly / 2.5 + 50);\n        GX[q] = hash(s * 31 + fx * 7 + fy * 131) - 0.5;\n        GY[q] = hash(s * 37 + fx * 11 + fy * 173) - 0.5;\n      }\n    P.land[i] = 0.08 + 0.55 * hash(s + 9);\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    c: 0, hue: 0, speed: 2, k3: 2, gold: 0.06, goldBuilt: -1,\n    round: 0, folds: [], fk: 2, p: 0, ph: 0, pt: 0, fast: false,\n    GC: new Float32Array(RU * RV), GI: new Int8Array(RU * RV), GX: new Float32Array(RU * RV), GY: new Float32Array(RU * RV),\n    land: new Float32Array(MAXF),\n    hgt: new Float32Array(N), surf: new Float32Array(N), gcov: new Float32Array(N), gfx: new Float32Array(N), gfy: new Float32Array(N), gfl: new Float32Array(N),\n    hole: new Float32Array(N), lipd: new Float32Array(N), ob: new Float32Array(N), pal: new Float32Array(12), lastHue: NaN,\n  };\n}\n\n// The round, in seconds at Speed 2: the flakes land, then folds one after\n// another with a rest between, then the cream settles smooth.\nconst LAND = 0, FOLD = 1, REST = 2, SETTLE = 3;\nconst LAND_T = 0.7, FOLD_T = 2.0, REST_T = 0.7, SETTLE_T = 1.8;\n// Folds a round: until the leaf has been stretched past twenty times.\nconst foldsFor = (k) => (k === 2 ? 5 : 3);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 2, 0.06], d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.k3 = floor(cl(k[2], 2, 4) + 0.5);\n  P.gold = cl(k[3], 0, 1);\n  if (abs(P.gold - P.goldBuilt) > 0.004) (scatter(P), (P.goldBuilt = P.gold));\n  P.c += d;\n  // A tap waits for the next fold if none is under way.\n  if (input.btnPressed && input.btnPressed[0]) P.fast = true;\n  P.pt += P.ph === FOLD && P.fast ? d * 4 : d;\n  if (P.ph === LAND && P.pt >= LAND_T) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === REST && (P.pt >= REST_T || P.fast)) (P.ph = FOLD), (P.pt = 0), (P.fk = P.k3);\n  else if (P.ph === FOLD && P.pt >= FOLD_T) {\n    P.folds.push(P.fk);\n    P.pt = 0;\n    P.fast = false;\n    P.ph = P.folds.length >= foldsFor(P.fk) ? SETTLE : REST;\n  } else if (P.ph === SETTLE && P.pt >= SETTLE_T) {\n    // Fresh cream: the folds are forgotten and new flakes fall in.\n    P.round++;\n    P.folds = [];\n    P.ph = LAND;\n    P.pt = 0;\n    scatter(P);\n  }\n  P.p = P.ph === FOLD ? sm(P.pt / FOLD_T) : 0;\n}\n\n// Sub-samples down each LED: the folds pack the layers thinner than an LED.\nconst SUB = 4;\n// The sliding layer's end is rounded like a rolled lip, LIP LEDs deep.\nconst LIP = 4.5;\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { GC, GI, GX, GY, hgt, surf, gcov, gfx, gfy, gfl, hole, lipd, ob, pal, folds, land } = P;\n  if (P.lastHue !== P.hue) {\n    // The cream's tint. Round blush, peach, ivory and pistachio it stays\n    // pale and light, where a deeper cream reads beige or khaki beside the\n    // gold.\n    let h = P.hue + 0.11;\n    h -= floor(h);\n    const warm = sm((h + 0.03) / 0.07) * (1 - sm((h - 0.22) / 0.08));\n    hsv(h, 0.27 - 0.13 * warm, 0.93 + 0.03 * warm, pal, 0);\n    // The same cream in its folds' shade: a little deeper, never grey.\n    hsv(h - 0.01, 0.36 - 0.14 * warm, 0.74 + 0.1 * warm, pal, 3);\n    // The cream down in the gap under a layer still sliding over.\n    hsv(h - 0.01, 0.31 - 0.15 * warm, 0.82 + 0.07 * warm, pal, 6);\n    P.lastHue = P.hue;\n  }\n  const c = P.c, L = 1 + (P.fk - 1) * P.p, nF = folds.length, folding = P.ph === FOLD;\n  // Mid-fold the slab's far end stands inside the panel.\n  const open = folding && L - floor(L) > 0.001;\n  // Settling: the layers' relief and the leaf fade away and the cream lies\n  // smooth; then the new flakes land one by one and the relief comes back.\n  const settle = P.ph === SETTLE ? sm(P.pt / (SETTLE_T * 0.8)) : 0;\n  const keep = P.ph === LAND ? sm(P.pt / LAND_T) : 1 - settle;\n  // How deep the groove between layers is for each fold, newest first: the\n  // newest folds show, the older ones knit together.\n  const amp = [];\n  let th = H / L;\n  amp.push(folding ? 2 * min(1.6, 0.1 * th) * sm(P.p * 3) : 0);\n  for (let i = nF - 1; i >= 0; i--) {\n    th /= folds[i];\n    amp.push(2 * min(1.6, 0.1 * th) * 0.62 ** (nF - 1 - i + P.p));\n  }\n  const landT = P.ph === LAND ? P.pt : 99;\n\n  for (let x = 0; x \u003c W; x++) {\n    const ux = (x + 0.5) / W;\n    // Under the lip the top of the layer below swells a little, unevenly.\n    const bul = (2 + 1.3 * sin(ux * 7.5 + 0.6 * c) + 0.7 * sin(ux * 17 - c)) / H;\n    for (let y = 0; y \u003c H; y++) {\n      let g = 0, gx = 0, gy = 0, fl = 0, hh = 0, emp = 0, nS = 0, dl = 99;\n      for (let sI = 0; sI \u003c SUB; sI++) {\n        let u = ux, v = (H - y - (sI + 0.5) / SUB) / H;\n        let rel = 0;\n        // The fold under way: the slab stretched to L times its length and\n        // as much thinner, laid back and forth across the panel from the\n        // bottom up, each layer the other way up from the one below.\n        {\n          let j = floor(v * L), w = v * L - j, s = j + (j & 1 ? 1 - u : u);\n          if (open && j + 1 > L) {\n            const send = L - ((1 - 2 * sqrt(w * (1 - w))) * LIP) / W;\n            let cv = cl((send - s) * W + 0.5, 0, 1);\n            if (cv \u003c 1 && j > 0 && v - j / L \u003c bul) {\n              cv = 1;\n              j -= 1;\n              w = 0.999;\n              s = j + (j & 1 ? 1 - u : u);\n            }\n            emp += (1 - cv) / SUB;\n            if (cv \u003c= 0) {\n              dl = min(dl, (s - send) * W);\n              continue;\n            }\n          }\n          // Each layer is rounded across its thickness, so a groove runs\n          // between it and the next.\n          if (amp[0] > 0) rel += amp[0] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / L;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The folds already made, newest first, back to the cream as it was.\n        for (let i = nF - 1, lv = 1; i >= 0; i--, lv++) {\n          const k = folds[i], j = min(k - 1, floor(v * k)), w = v * k - j, s = j + (j & 1 ? 1 - u : u);\n          rel += amp[lv] * (sqrt(w * (1 - w)) - 0.39);\n          u = s / k;\n          v = j & 1 ? 1 - w : w;\n        }\n        // The cream's own soft relief, drawn out with it, read once an LED.\n        if (nS === 0) hh += 0.55 * SUB * tap(u * 40, v * 64 + 17);\n        hh += rel;\n        nS++;\n        // The leaf.\n        const fu = cl(u * RU - 0.5, 0, RU - 1.001), fv = cl(v * RV - 0.5, 0, RV - 1.001);\n        const i0 = floor(fu), j0 = floor(fv), q = j0 * RU + i0;\n        const c00 = GC[q], c10 = GC[q + 1], c01 = GC[q + RU], c11 = GC[q + RU + 1];\n        if (c00 + c10 + c01 + c11 > 0) {\n          const tx = fu - i0, ty = fv - j0;\n          let cc = c00 + (c10 - c00) * tx + (c01 - c00) * ty + (c00 - c10 - c01 + c11) * tx * ty;\n          const qq = ty \u003c 0.5 ? (tx \u003c 0.5 ? q : q + 1) : tx \u003c 0.5 ? q + RU : q + RU + 1, id = GI[qq];\n          if (id >= 0 && landT \u003c 99) {\n            // A flake that is landing grows in with a flash.\n            const t = (landT - land[id]) / 0.18;\n            cc *= sm(t);\n            fl = max(fl, t > 0 ? exp(-((t - 1) ** 2) * 1.5) : 0);\n          }\n          g += cc;\n          gx += GX[qq] * cc;\n          gy += GY[qq] * cc;\n        }\n      }\n      const p = y * W + x;\n      hgt[p] = nS ? (hh / nS) * keep : 0;\n      gcov[p] = nS ? g / nS : 0;\n      gfx[p] = g > 0 ? gx / g : 0;\n      gfy[p] = g > 0 ? gy / g : 0;\n      gfl[p] = fl;\n      hole[p] = emp;\n      lipd[p] = dl;\n    }\n  }\n  // The gap, softened over a few LEDs: the cream rounds down into it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += hole[y * W + cl(x + d, 0, W - 1)] * (3 - abs(d));\n      surf[y * W + x] = a / 9;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let d = -2; d \u003c= 2; d++) a += surf[cl(y + d, 0, H - 1) * W + x] * (3 - abs(d));\n      ob[y * W + x] = a / 9;\n    }\n  for (let p = 0; p \u003c N; p++) surf[p] = hgt[p] * (1 - hole[p]) - 2.6 * ob[p];\n\n  // A small lamp drifts over the cream; the cream answers with a soft satin\n  // sheen and the leaf with a sharp glint off whichever facets face it.\n  const Lx = 32 + 38 * sin(0.29 * c + 0.4), Ly = 64 + 58 * sin(0.21 * c + 1.1), Lz = 55;\n  const Ex = 32, Ey = 64, Ez = 220;\n  const cr = pal[0], cg = pal[1], cb = pal[2], dr = pal[3], dg = pal[4], db = pal[5], pr = pal[6], pg = pal[7], pb = pal[8];\n  // The leaf fades into the cream as it settles.\n  const gk = 1 - settle;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, ow = hole[p];\n      const zx = (surf[y * W + min(W - 1, x + 1)] - surf[y * W + max(0, x - 1)]) / 2;\n      const zy = (surf[min(H - 1, y + 1) * W + x] - surf[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - surf[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      let hx = lx + vx * vi, hy = ly + vy * vi, hz = lz + vz * vi;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      (hx *= hi), (hy *= hi), (hz *= hi);\n      const dif = nx * lx + ny * ly + nz * lz;\n      // The cream: lit against a level surface, its folds a deeper tint and\n      // a little shade where it rounds down into the gap.\n      const sh = cl(1 + 1.1 * (dif - lz) - 0.25 * ob[p], 0, 1.3);\n      const dk = 1 - sm(sh), lift = max(0, sh - 1);\n      let r = cr + (dr - cr) * dk + lift * 0.25, gg = cg + (dg - cg) * dk + lift * 0.25, b = cb + (db - cb) * dk + lift * 0.25;\n      const nh = max(0, nx * hx + ny * hy + nz * hz);\n      const n2 = nh * nh, n4 = n2 * n2, n8 = n4 * n4, n16 = n8 * n8;\n      const sat = 0.1 * n8 * n4 * n2 + 0.12 * n16 * n16 * n16 * n8 * n4;\n      r += sat;\n      gg += sat;\n      b += sat;\n      // The leaf: deep gold turned from the lamp, bright gold towards it,\n      // and a white-gold glint where a facet mirrors it.\n      const gc = gcov[p] * gk;\n      if (gc > 0.002) {\n        const tx = gfx[p] * 0.9, ty = gfy[p] * 0.9;\n        const fnx = nx + tx, fny = ny + ty, fnz = nz, fn = 1 / sqrt(fnx * fnx + fny * fny + fnz * fnz);\n        const fd = max(0, (fnx * lx + fny * ly + fnz * lz) * fn), fh = max(0, (fnx * hx + fny * hy + fnz * hz) * fn);\n        const f2 = fh * fh, f8 = f2 * f2 * f2 * f2, f32 = f8 * f8 * f8 * f8;\n        const lit = 0.5 + 0.62 * fd, gl = 1.3 * f32 * f8 + 0.6 * gfl[p];\n        // A vein thinner than an LED still reads as a line of gold.\n        const a = min(1, gc * (1.25 + 0.3 * nF));\n        r += (0.9 * lit + gl - r) * a;\n        gg += (0.62 * lit + gl * 0.92 - gg) * a;\n        b += (0.16 * lit + gl * 0.7 - b) * a;\n      }\n      // Down in the gap: the cream below in its own shade.\n      if (ow > 0) {\n        // The sliding layer's lip shades the cream just past it.\n        const gs = cl(0.92 + 0.5 * (dif - lz), 0.76, 1.05) * (0.84 + 0.16 * sm(lipd[p] / 9));\n        r += (pr * gs - r) * ow;\n        gg += (pg * gs - gg) * ow;\n        b += (pb * gs - b) * ow;\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(gg * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fold=2..4, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Tints the cream once round the wheel while the leaf stays gold. At 0 ivory, at 0.1 pistachio, at 0.25 mint, at 0.45 sky blue, at 0.6 lavender, at 0.78 pink, at 0.9 blush, at 0.95 peach. Round blush, peach, ivory and pistachio the tint is kept pale, because a deeper cream there reads beige or khaki next to the gold."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a fold takes 2 seconds and the cream rests 0.7 between folds; a round of five folds, the settling and the new flakes takes about 15 seconds. At 0.2 all of it runs ten times slower."},{"name":"Fold","min":2,"max":4,"about":"How many layers each fold makes. At 2 the cream is stretched to twice its length and folded once over itself, five folds a round; at 3 it is stretched threefold and folded in thirds like a letter, three folds a round; at 4 fourfold, three folds a round, and the last one leaves only a shimmer."},{"name":"Gold","min":0,"max":1,"about":"How much leaf is scattered in: 6 flakes about 7 by 10 LEDs at the opening, up to 17 flakes half as big again at 1."}],"start":[0,2,2,0.06],"measures":{"motion":0.2739,"detail":0.0073,"edges":0.2093,"complexity":0.5765,"coverage":1,"colour":0.1255,"drift":0.0414},"knobResponse":[0.2092,0.0648,0.051,0.0463]},{"slug":"giraffe","title":"Giraffe","family":"mammal","round":23,"note":"우산 아카시아의 납작한 수관 밑에서 그물무늬기린이 보라색 혀로 잔가지를 감아 잎을 훑고, 소등쪼기새가 목을 타고 뛰어다녀요. 가끔 앞다리를 A 자로 벌리고 목을 내려 웅덩이 물을 마시면 물에 동그란 물결이 퍼져요. K3 을 돌리면 무늬가 마사이기린이나 로스차일드기린의 것으로 바뀌고, 끝에는 흰 기린이 서요.","idea":"Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.","buttons":"K1 tap sends the giraffe down to drink now.","code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-giraffe","type":"code","name":"giraffe","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare."},{"name":"Coat","min":0,"max":3,"about":"Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand."},{"name":"Wind","min":0,"max":1,"about":"Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy."}],"start":[0,2,0,0.06],"measures":{"motion":0.123,"detail":0.074,"edges":0.4044,"complexity":1.9181,"coverage":0.9853,"colour":0.3367,"drift":0.0426},"knobResponse":[0.2454,0.0494,0.078,0.0609]},{"slug":"glassblower","title":"Glassblower","family":"glass","round":27,"note":"어두운 스윙 피트 위 발판에서 가퍼가 블로파이프 끝의 유리 덩어리를 진자처럼 흔들면, 덩어리가 아래로 늘어나 긴 화병이 되며 노랑에서 주황을 지나 진홍으로 식어요. 글로리 홀에서 다시 달궈 불고 또 흔든 뒤 잘라 내면 바닥의 컬릿 더미에 떨어져 부서져요. K1 이 코발트나 호박 같은 유리 색을 고르고, 버튼은 다시 달구기와 불기예요.","idea":"A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.","buttons":"K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.","code":"// ===== Patternflow pattern =====\n// Title:   Glassblower\n// Family:  glass\n// Idea:    A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the swing pit of a glass studio, where a gather is stretched long\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1\n//\n// Knob 1: Glass. The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same.\n// Knob 2: Speed. At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower.\n// Knob 3: Length. How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1.\n// Knob 4: Heat. How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter.\n// Buttons: K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.\n\nconst W = 64, H = 128, N = W * H, NN = 40;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, cbrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// Distance to a segment; TT is how far along it.\nlet TT = 0, QX = 0, QY = 0;\nfunction seg(px, py, ex, ey) {\n  TT = cl((px * ex + py * ey) / (ex * ex + ey * ey + 1e-6), 0, 1);\n  (QX = px - TT * ex), (QY = py - TT * ey);\n  return sqrt(QX * QX + QY * QY);\n}\n\n// Black body, 0..1: dark red, red, orange, yellow, near white.\nconst BBK = [0, 0, 0, 0, 0.12, 46, 3, 0, 0.25, 118, 10, 0, 0.38, 196, 34, 0, 0.5, 245, 80, 6, 0.62, 255, 132, 22, 0.75, 255, 180, 62, 0.87, 255, 222, 132, 1, 255, 246, 216];\nconst BB = new Float32Array(513 * 3);\nfor (let q = 0, k = 0; q \u003c= 512; q++) {\n  const T = q / 512;\n  while (k \u003c 28 && T > BBK[k + 4]) k += 4;\n  for (let c = 0; c \u003c 3; c++) BB[q * 3 + c] = mix(BBK[k + 1 + c], BBK[k + 5 + c], (T - BBK[k]) / (BBK[k + 4] - BBK[k]));\n}\nconst bq = (T) => (((T \u003c 0 ? 0 : T > 1 ? 1 : T) * 512 + 0.5) | 0) * 3;\n// Clear, cobalt, amber, green, ruby: colour and body when cold, then what passes of the glow.\nconst GLASS = [\n  [150, 212, 204, 0.3, 1, 0.97, 0.9], [34, 72, 238, 1, 0.3, 0.38, 1], [238, 138, 24, 1, 1, 0.62, 0.2],\n  [40, 208, 88, 1, 0.42, 1, 0.5], [228, 18, 70, 1, 1, 0.18, 0.4],\n];\n// As the glow fades the glass filters it, and the colour comes through.\nconst flt = (T) => 0.95 * (1 - sm(0.45, 0.85, T));\n\n// Deck, floor, the pit's opening, the glory hole (a drum seen end on at a slant), hands and pipe.\nconst DK = 26, FL = 31, PT = 35, OX0 = 19, OX1 = 47;\nconst MX = 49, MY = 15, MRX = 3.6, MRY = 7, FRX = 6.5, FRY = 11;\nconst PIPE = 27, BACK = 8, TH0 = 0.34, HX = 24.5, HY = 19.5, HX2 = 25.5, HY2 = 17.5;\nconst THF = atan2(MX - HX2, MY - HY2);\nconst GATHER = 0, OUT = 1, BLOW = 2, SWING = 3, LIFT = 4, REHEAT = 5, CUT = 6, EMPTY = 7;\nconst DUR = [1.3, 1, 0.8, 5, 0.9, 1.8, 1.4, 0.9];\nconst V0 = 1300, OM = (2 * PI) / 2.3, START = 13.6, FS = new Float32Array(NN), CP = new Float32Array(80);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), piece = () => ({ X: F(NN), Y: F(NN), R: F(NN), B: F(NN), T: F(NN), on: 0, dy: 0, vy: 0 });\n  const S = (params.s = {\n    t: 0, th: THF, rho: 1, sw: 0, be: 0, bv: 0, vx: 0, tx: 0, ty: 0, l: 4, R0: 3, bl: 9, rot: 0, pT: 0, boom: 0, tmax: 0.8, live: 0, k1: -1, gl: [0, 0, 0, 1, 1, 1, 1], pc: piece(), fall: piece(), sp: [], lt: F(84),\n    fa: F(N), se: F(N), ci: new Uint8Array(N), hc: F(256), cx: F(256), cn: F(256), top: F(W),\n    f: F(N * 3), lr: F(N), lg: F(N), lb: F(N), mat: new Uint8Array(N), al: F(N * 3), gm: F(N),\n    gd: F(N).fill(99), gs: F(N), gr: F(N), gu: F(N), gb: F(N), gt: F(N),\n  });\n  maps(S);\n  go(S, GATHER);\n}\n\nfunction maps(S) {\n  const M = S.mat, A = S.al, HG = S.top;\n  for (let x = 0; x \u003c W; x++) HG[x] = 122 - 10 * ((x + 0.5 - 33) / 31) ** 2 + 2 * (vn(x * 0.3, 5) - 0.5);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, gr = 0.85 + 0.3 * hash(x, y);\n    let m = 0, a = 0, c = [1, 0.9, 0.8];\n    if (((px - MX) / MRX) ** 2 + ((py - MY) / MRY) ** 2 \u003c 1) m = 3;\n    else if (((px - MX) / FRX) ** 2 + ((py - MY) / FRY) ** 2 \u003c 1) (m = 2), (a = 0.5 * (0.8 + 0.3 * hash(x, y + 7))), (c = [1, 0.84, 0.7]);\n    else if (x > MX && y \u003c FL && y > MY - FRY - 1) {\n      // The drum with a rim on top and two bands, a dark stand below.\n      m = 1;\n      a = y \u003c MY + FRY ? (y === MY - FRY ? 0.9 : 0.3 * (0.35 + 0.65 * cos(((py - MY) / FRY) * 1.45))) * (x === 56 || x === 61 ? 1.8 : 1) : y === MY + FRY ? 0.7 : 0.12;\n      c = [0.9, 0.93, 1];\n    } else if (y >= FL && y \u003c PT && (x \u003c OX0 || x > OX1)) (m = 4), (a = y === FL ? 0.8 : 0.3 * gr * (0.8 + 0.4 * hash(x >> 1, y))), (c = [1, 0.95, 0.88]);\n    else if ((y >= DK && y \u003c DK + 2 && x \u003c 23) || ((x === 3 || x === 19) && y >= DK && y \u003c FL)) (m = 5), (a = y === DK ? 0.9 : 0.35), (c = [0.9, 0.93, 1]);\n    else if (py >= HG[x]) {\n      // Broken glass: facets on a jittered grid, dark seams between them.\n      m = 7;\n      let d1 = 9, d2 = 9, id = 0, ci = 0;\n      for (let j = 0; j \u003c 9; j++) {\n        const cx = floor(x / 3) + (j % 3) - 1, cy = floor(y / 2.5) + floor(j / 3) - 1, d = (px - (cx + hash(cx, cy)) * 3) ** 2 + (py - (cy + hash(cy, cx + 9)) * 2.5) ** 2;\n        if (d \u003c d1) (d2 = d1), (d1 = d), (id = hash(cx + 31, cy)), (ci = cl((cy - 42) * 24 + cx + 1, 0, 254));\n        else if (d \u003c d2) d2 = d;\n      }\n      (S.ci[i] = ci), (S.cx[ci] += px), S.cn[ci]++;\n      (S.fa[i] = id), (S.se[i] = sm(0.9, 0.2, sqrt(d2) - sqrt(d1)) * 0.7 + (py - HG[x] \u003c 1 ? -0.3 : 0));\n    } else if (y >= FL) {\n      // Firebrick courses, sooted in clouds.\n      m = 6;\n      const r = floor(y / 3), sx = x + (r & 1) * 3;\n      a = y % 3 === 2 || sx % 7 === 6 ? 0.1 : 0.5 * (0.7 + 0.6 * hash(floor(sx / 7), r)) * (0.45 + 0.7 * vn(x * 0.11, y * 0.045)) * gr * (x \u003c 2 || x > 61 ? 0.45 : 1);\n      c = [1, 0.76, 0.58];\n    } else {\n      // Corrugated sheeting behind the shop.\n      a = 0.5 * (0.88 + 0.12 * cos(px * PI * 0.5)) * (x % 16 === 15 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 0.07, y * 0.15));\n      c = [0.95, 0.9, 0.85];\n    }\n    M[i] = m;\n    for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = a * c[j];\n  }\n}\n// Heat left in the heap where hot glass lands, shard by shard.\nfunction heat(S, x, y, T, r) {\n  for (let j = floor(y - r); j \u003c= y + r; j++)\n    for (let i = floor(x - r); i \u003c= x + r; i++) {\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || S.mat[j * W + i] !== 7) continue;\n      const c = S.ci[j * W + i];\n      S.hc[c] = max(S.hc[c], T * sm(r + 0.5, r * 0.3, sqrt((i + 0.5 - x) ** 2 + (j + 0.5 - y) ** 2)));\n    }\n}\n\nfunction go(S, ph) {\n  (S.ph = ph), (S.pt = 0), (S.th1 = S.th);\n  if (ph === GATHER) (S.pc.on = 1), (S.V = 60), (S.b = S.bt = 0), (S.sb = S.sbt = 0.3), (S.pass = 1), S.pc.T.fill(S.tmax);\n  else if (ph === BLOW) blow(S, S.pass > 1 ? 0.1 : 0.4);\n  else if (ph === SWING) S.sw = 0;\n}\nfunction next(S) {\n  const p = S.ph;\n  go(S, p === SWING ? (S.pass > 1 ? CUT : LIFT) : p === REHEAT ? OUT : p === EMPTY ? GATHER : p + 1);\n  if (p === REHEAT) S.pass++;\n}\nfunction blow(S, db) {\n  (S.bt = min(0.74, S.b + db)), (S.sbt = min(0.84, S.pass > 1 ? S.sb + 0.12 : 0.55)), (S.bl = 0);\n}\nconst live = (S) => S.pc.on && (S.ph === BLOW || S.ph === SWING || (S.ph === CUT && S.pt \u003c 0.4));\n\n// Radius from volume and length: a neck, a body narrowing down, a round end.\nfunction shape(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1);\n  let R = max(1, S.R0);\n  for (let it = 0; it \u003c 3; it++) {\n    let sum = 0;\n    for (let i = 0; i \u003c NN; i++) {\n      const s = i / (NN - 1), a = s * l, ct = 1 - min(1, (a + 0.25 * R) / (1.1 * R)), cb = 1 - min(1, (l - a) / (0.62 * R));\n      FS[i] = (1 - 0.38 * s) * sqrt(1 - ct * ct) * sqrt(max(0, 1 - cb * cb));\n      sum += FS[i] * FS[i];\n    }\n    R = max(1, sqrt(S.V / (PI * dl * max(1e-3, sum))));\n  }\n  S.R0 = R;\n  for (let i = 0; i \u003c NN; i++) {\n    const q = (i / (NN - 1) - 0.05) / (S.sb - 0.05), B = q > 0 && q \u003c 1 ? S.b * sqrt(1 - (2 * q - 1) ** 2) : 0;\n    (P.B[i] = B), (P.R[i] = (R * FS[i]) / sqrt(1 - B * B));\n  }\n}\n// Off the pipe along its axis, then hanging and trailing the swing; straight when lifted.\nfunction line(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1), th = S.th, w0 = 0.8 * S.R0 + 1.5;\n  let x = S.tx - sin(th) * 1.2, y = S.ty - cos(th) * 1.2;\n  for (let i = 0; i \u003c NN; i++) {\n    (P.X[i] = x), (P.Y[i] = y);\n    const s = i / (NN - 1), w = exp((-s * l) / w0), a = mix(th * w + (1 - w) * S.be * s ** 0.8, th, S.rho);\n    (x += sin(a) * dl), (y += cos(a) * dl);\n  }\n}\n// Radiative cooling, faster where the glass is thin.\nconst cool = (T, R, d) => T - ((0.22 * (T + 0.1)) / max(2.2, R) ** 0.7) * d;\n\nfunction step(S, d) {\n  (S.t += d), (S.pt += d);\n  const dur = () => (S.ph === SWING ? (S.pass > 1 ? 6.5 : 5) : DUR[S.ph]);\n  if (S.pt >= dur()) next(S);\n  const ph = S.ph, pt = S.pt, D = dur(), u = sm(0, 1, pt / D), P = S.pc, F = S.fall, HG = S.top;\n  let th = S.th, rho = S.rho, inH = 0;\n  S.env = 0;\n  if (ph === GATHER || ph === REHEAT) (th = THF + 0.015 * sin(S.t * 3)), (rho = inH = 1);\n  else if (ph === OUT) (th = mix(S.th1, TH0, u)), (rho = 1 - sm(0.3, 0.9, pt / D)), (inH = 1 - sm(0, 0.25, pt / D));\n  else if (ph === BLOW) (th = TH0 + 0.03 * sin(pt * 4)), (rho = 0);\n  else if (ph === SWING) {\n    S.env = sm(0, 1.4, pt) * (1 - sm(D - 1.1, D, pt));\n    S.sw += d * OM * sqrt(62 / S.L) * (1 - 0.15 * (S.l / S.L));\n    (th = TH0 + S.A * S.env * sin(S.sw)), (rho = 0);\n  } else if (ph === LIFT || ph === EMPTY) (th = mix(S.th1, THF, u)), (rho = sm(0, 0.3, pt / D)), (inH = sm(0.75, 1, pt / D));\n  else {\n    (th = mix(S.th1, TH0, sm(0, 0.4, pt))), (rho = 0);\n    if (P.on && pt >= 0.4) cut(S);\n  }\n  const q = cl((th - TH0) / (THF - TH0), 0, 1);\n  (S.th = th), (S.rho = rho), (S.hx = mix(HX, HX2, q)), (S.hy = mix(HY, HY2, q));\n  const tx = S.hx + PIPE * sin(th), ty = S.hy + PIPE * cos(th), vx = (tx - S.tx) / d, ax = cl((vx - S.vx) / d, -400, 400), Le = max(10, 0.55 * S.l);\n  (S.tx = tx), (S.ty = ty), (S.vx = vx);\n  // The hanging part is a pendulum on a moving pivot.\n  if (rho > 0.5) S.be = S.bv = 0;\n  else (S.bv += ((-190 / Le) * sin(S.be) - 1.3 * S.bv - (ax / Le) * cos(S.be)) * d), (S.be = cl(S.be + S.bv * d, -0.7, 0.7));\n  (S.b += (S.bt - S.b) * min(1, d * 4)), (S.sb += (S.sbt - S.sb) * min(1, d * 4)), (S.bl += d), (S.rot += d * (3 + 5 * inH));\n  if (P.on) {\n    if (ph === GATHER) (S.V = max(60, V0 * (S.L / 62) * sm(0, 1.1, pt))), (S.l = 1.9 * cbrt((3 * S.V) / (4 * PI)));\n    let tm = 0;\n    for (let i = 0; i \u003c NN; i++) tm += P.T[i] / NN;\n    if (rho \u003c 0.5) S.l += 0.42 * sm(0.15, 0.55, tm) * max(0, (S.pass > 1 ? S.L : 0.64 * S.L) - S.l) * (0.3 + 0.7 * S.env) * d;\n    shape(S), line(S);\n    // The glory hole brings it all back up.\n    for (let i = 0; i \u003c NN; i++) {\n      const T = P.T[i] + (S.tmax - P.T[i]) * (1 - exp(-1.9 * d)) * inH;\n      P.T[i] = mix(T, cool(T, P.R[i], d), 1 - inH);\n    }\n    (S.pT = mix(S.pT, P.T[0] * 0.7, min(1, d * 2))), (S.gx = P.X[NN >> 1]), (S.gy = P.Y[NN >> 1]);\n  } else S.pT *= exp(-d * 0.5);\n  if (F.on) {\n    (F.vy += 300 * d), (F.dy += F.vy * d), (S.gx = F.X[NN >> 1]), (S.gy = F.Y[NN >> 1] + F.dy);\n    for (let i = 0; i \u003c NN; i++) F.T[i] = cool(F.T[i], F.R[i], d);\n    // It hits the heap and goes to pieces.\n    const bx = F.X[NN - 1], hy = HG[cl(bx | 0, 0, W - 1)];\n    if (F.Y[NN - 1] + F.dy > hy - 1) {\n      heat(S, bx, hy + 1, F.T[NN - 1] + 0.1, 3.5);\n      for (let i = 0; i \u003c NN * 2; i++) {\n        const j = i >> 1;\n        S.sp.push({ x: F.X[j] + (rnd() - 0.5) * F.R[j], y: F.Y[j] + F.dy, vx: (rnd() - 0.5) * 60, vy: F.vy * (0.5 + 0.4 * rnd()) - 30 * rnd(), l: 9, T: F.T[j] });\n      }\n      (F.on = 0), (S.boom = 1), (S.bx = bx);\n    }\n  }\n  for (let c = 0; c \u003c 255; c++) if (S.hc[c] > 0) S.hc[c] -= 0.03 * (S.hc[c] + 0.08) * d;\n  S.boom = max(0, S.boom - d * 2.5);\n  for (const p of S.sp) {\n    (p.vy += 200 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 1.2);\n    if (p.x \u003c 0.5 || p.x > W - 0.5) (p.vx *= -0.5), (p.x = cl(p.x, 0.5, W - 0.5));\n    // A shard bounces, then settles into the heap and leaves its heat there.\n    if (p.l > 5 && p.y > HG[p.x | 0]) p.vy > 70 ? ((p.vy *= -0.35), (p.vx *= 0.6), (p.y = HG[p.x | 0])) : (heat(S, p.x, p.y + 1, p.T, 1.3 + rnd()), (p.l = 0));\n  }\n  S.sp = S.sp.filter((p) => p.l > 0 && p.y \u003c H + 2);\n}\n\n// The jacks score the neck and the piece drops away into the pit.\nfunction cut(S) {\n  const P = S.pc, F = S.fall;\n  for (const k of \"XYRBT\") F[k].set(P[k]);\n  (F.on = 1), (F.dy = F.vy = P.on = 0), (S.pT = 0.75), (S.l = 4), (S.V = 60);\n  for (let k = 0; k \u003c 14; k++) S.sp.push({ x: S.tx, y: S.ty + 1, vx: (rnd() - 0.5) * 34, vy: -10 - 28 * rnd(), l: 0.6 + 0.4 * rnd(), T: 0.8 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], -1, 1), k4 = cl(k[3], 0, 1);\n  if (k1 !== S.k1) {\n    const u = k1 * 4, i = min(3, floor(u)), f = sm(0.25, 0.75, u - i);\n    for (let c = 0; c \u003c 7; c++) S.gl[c] = mix(GLASS[i][c], GLASS[i + 1][c], f);\n    S.k1 = k1;\n  }\n  (S.L = 62 + 18 * k3), (S.A = 0.29 + 0.15 * k3), (S.hot = 0.84 + 0.16 * k4), (S.tmax = 0.86 + 0.18 * k4), (S.fI = 1 + 0.55 * k4);\n  if (!S.live) {\n    while (!S.live) step(S, 1 / 30), (S.live = S.t >= START ? 1 : 0);\n    // The last piece lies broken in the heap, still red.\n    heat(S, 31 + 6 * rnd(), 125, 0.44, 5);\n    for (let k = 0; k \u003c 7; k++) heat(S, 2 + 60 * rnd(), 112 + 16 * rnd(), 0.18 + 0.14 * rnd(), 1.5 + 2 * rnd());\n  }\n  const bp = input.btnPressed || [];\n  if (bp[0] && live(S)) go(S, LIFT);\n  if (bp[1] && live(S)) blow(S, 0.14);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\n// Lights: the glory hole, seven points along the gather, the heap's embers, the crash.\nfunction lights(S) {\n  const LT = S.lt, M = S.mat, HC = S.hc, GL = S.gl;\n  let n = 0;\n  const add = (x, y, T, w, sg, g = 0) => {\n    const o = n++ * 6, b = bq(T), f = g * flt(T);\n    (LT[o] = x), (LT[o + 1] = y), (LT[o + 5] = 1 / (sg * sg));\n    for (let c = 0; c \u003c 3; c++) LT[o + 2 + c] = (BB[b + c] / 255) * w * (1 - f + f * GL[4 + c]);\n  };\n  add(MX - 2.5, MY + 0.5, S.hot, S.fI * (0.92 + 0.12 * vn(S.t * 4, 3)), 13);\n  for (const P of [S.pc, S.fall]) {\n    if (!P.on) continue;\n    for (let i = 3; i \u003c NN; i += 6) {\n      const x = P.X[i], y = P.Y[i] + P.dy, m = x >= 0 && x \u003c W && y >= 0 && y \u003c H ? M[(y | 0) * W + (x | 0)] : 0;\n      if (y \u003c H + 12) add(x, y, P.T[i], 0.32 * min(2, P.R[i] / 3) * (m === 1 || m === 2 ? 0.15 : 1), 10 + 1.4 * P.R[i], 1);\n    }\n  }\n  for (let h = 0; h \u003c 2; h++) {\n    let w = 0, T = 0, sx = 0;\n    for (let c = 0; c \u003c 255; c++) {\n      const e = (HC[c] - 0.15) * S.cn[c], x = S.cx[c] / S.cn[c];\n      if (e > 0 && x \u003c 32 === !h) (w += e), (sx += e * x), (T = max(T, HC[c]));\n    }\n    if (w > 0) add(sx / w, 118, T, min(3, w * 0.12), 20, 0.7);\n  }\n  if (S.boom > 0) add(S.bx, 112, 0.75, S.boom * 1.6, 18);\n  return n;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  const F = S.f, M = S.mat, A = S.al, LR = S.lr, LG = S.lg, LB = S.lb, LT = S.lt, GM = S.gm, t = S.t, hot = S.hot, n = lights(S);\n  const lx = LT[0], ly = LT[1], fw = LT[2] / (BB[bq(hot)] / 255), gc = bq(hot * 0.6);\n  figure(S);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, o = i * 3, m = M[i], ds = (px - lx) ** 2 + (py - ly) ** 2, qa = 1 / (1 + ds * LT[5]);\n    // The glory hole's near pool and long reach; below the floor, only through the opening.\n    let fq = qa * qa + 0.62 / (1 + ds / 500);\n    if (y > FL + 1) {\n      const xc = lx + ((px - lx) * (FL - ly)) / (py - ly);\n      fq *= 0.06 + 0.94 * sm(OX0 - 3, OX0 + 3, xc) * sm(OX1 + 3, OX1 - 3, xc) * exp(-(py - FL) / 40);\n    }\n    let r = 0.004 + LT[2] * fq, g = 0.003 + LT[3] * fq, b = 0.003 + LT[4] * fq;\n    for (let j = 6; j \u003c n * 6; j += 6) {\n      const dx = px - LT[j], dy = py - LT[j + 1];\n      let q = 1 / (1 + (dx * dx + dy * dy) * LT[j + 5]);\n      q *= q;\n      (r += LT[j + 2] * q), (g += LT[j + 3] * q), (b += LT[j + 4] * q);\n    }\n    (LR[i] = r), (LG[i] = g), (LB[i] = b);\n    const ex = (px - MX) / MRX, ey = (py - MY) / MRY, e2 = ex * ex + ey * ey;\n    if (m === 3) {\n      // The mouth, hottest in the middle, the fire churning.\n      const c = bq(hot * (1 - 0.2 * e2) + 0.07 * (vn(x * 0.6, y * 0.5 - t * 5) - 0.5));\n      for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j];\n      continue;\n    }\n    // The refractory round the mouth glows from the heat.\n    const gw = m === 2 ? exp(-(sqrt(e2) - 1) * 2.4) * 0.9 * fw : 0;\n    (F[o] = A[o] * r * 255 + BB[gc] * gw), (F[o + 1] = A[o + 1] * g * 255 + BB[gc + 1] * gw), (F[o + 2] = A[o + 2] * b * 255 + BB[gc + 2] * gw);\n    // The gaffer, a silhouette with a rim of light.\n    const c = GM[i];\n    if (c > 0) {\n      const rim = max(1 - GM[i + 1], 0.6 * (1 - GM[i + W]), 0.4 * (1 - GM[i - W])) * 330;\n      (F[o] = mix(F[o], 5 + r * rim, c)), (F[o + 1] = mix(F[o + 1], 4 + g * rim, c)), (F[o + 2] = mix(F[o + 2], 4 + b * rim, c));\n    }\n  }\n  heap(S);\n  if (S.pc.on) glass(S, S.pc);\n  if (S.fall.on) glass(S, S.fall);\n  flames(S);\n  pipe(S);\n  for (const p of S.sp) {\n    const c = bq(p.l > 5 ? p.T + 0.1 : 0.55 + 0.4 * p.l), a = p.l > 5 ? 1 : min(1, p.l * 1.5);\n    put(F, p.x, p.y, c, a), put(F, p.x - p.vx * 0.025, p.y - p.vy * 0.025, c, a * 0.5);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction put(F, x, y, c, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j], a);\n}\n\n// The cullet heap: hot shards glow, cool ones show their colour and glint.\nfunction heap(S) {\n  const { f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL, hc: HC, ci: CI, fa: FA, se: SE } = S;\n  for (let i = 108 * W; i \u003c N; i++) {\n    if (M[i] !== 7) continue;\n    const o = i * 3, fa = FA[i], se = SE[i], T = HC[CI[i]] * (0.94 + 0.12 * fa), v = 1 - sm(0.1, 0.34, T), lum = (LR[i] + LG[i] + LB[i]) / 3;\n    const gl = max(0, cos(fa * 12.6 - 2 * atan2(S.gy - (i >> 6), S.gx - (i & 63)))) ** 10 * lum * 2.4 * v * (1 - se);\n    const b = (0.3 + 3 * lum) * (0.35 + 0.8 * fa) * (1 - se) * v * GL[3], c = bq(T), f = 0.7 * flt(T);\n    for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j] * (0.95 - 0.4 * se) * (1 - f + f * GL[4 + j]) + GL[j] * b + gl * (100 + GL[j]);\n  }\n}\n\n// The glass as capsules between nodes, the nearest one winning each LED.\nfunction glass(S, P) {\n  const { gd: GD, gs: GS, gr: GR, gu: GU, gb: GB, gt: GT, f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL } = S, oy = P.dy;\n  let X0 = W, X1 = -1, Y0 = H, Y1 = -1;\n  for (let i = 0; i \u003c NN - 1; i++) {\n    const ax = P.X[i], ay = P.Y[i] + oy, bx = P.X[i + 1], by = P.Y[i + 1] + oy, ra = P.R[i], rb = P.R[i + 1], rr = max(ra, rb) + 1;\n    const x0 = max(0, floor(min(ax, bx) - rr)), x1 = min(W - 1, ceil(max(ax, bx) + rr)), y0 = max(0, floor(min(ay, by) - rr)), y1 = min(H - 1, ceil(max(ay, by) + rr));\n    (X0 = min(X0, x0)), (X1 = max(X1, x1)), (Y0 = min(Y0, y0)), (Y1 = max(Y1, y1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const k = y * W + x, dd = seg(x + 0.5 - ax, y + 0.5 - ay, bx - ax, by - ay), r = ra + (rb - ra) * TT;\n        if (dd - r \u003c GD[k]) (GD[k] = dd - r), (GS[k] = (i + TT) / (NN - 1)), (GR[k] = r), (GU[k] = QX * (by - ay) - QY * (bx - ax) >= 0 ? dd : -dd), (GB[k] = mix(P.B[i], P.B[i + 1], TT)), (GT[k] = mix(P.T[i], P.T[i + 1], TT));\n      }\n  }\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const k = y * W + x, sd = GD[k], m = M[k];\n      if (sd >= 0.5) continue;\n      GD[k] = 99;\n      if (m === 1 || m === 2) continue;\n      const a = cl(0.5 - sd, 0, 1), r = max(0.5, GR[k]), d = GU[k], u = cl(d / r, -1, 1), ad = abs(d), rb = GB[k] * r, o = k * 3;\n      const ib = rb > 0.6 ? sm(0, 0.8, rb - ad) : 0, ch = 2 * r * sqrt(1 - u * u) * (1 - 0.5 * ib);\n      // More glow through more glass, less through the bubble; the skin cools first.\n      const e = 1 - exp(-0.3 * ch), T = GT[k] - 0.16 * u * u, st = sin(GS[k] * S.l * 0.55 - S.rot + u * 2.4);\n      const c = bq(T * (0.62 + 0.38 * e) * (1 + 0.05 * st) + 0.06 * (1 - u * u) - 0.08 * ib), dim = 1 - 0.28 * ib, v = 1 - sm(0.14, 0.42, T), f = flt(T);\n      // Cool glass shows its colour and a highlight.\n      const lum = (LR[k] + LG[k] + LB[k]) / 3, bod = (0.25 + 1.2 * lum) * (0.55 + 0.45 * (1 - u * u)) * (0.85 + 0.15 * st) * (1 - 0.35 * ib) * GL[3];\n      const sp = exp(-(((u - 0.45) / 0.2) ** 2)) * (0.25 + 1.3 * lum) * 160 * v;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j] * dim * (1 - f + f * GL[4 + j]) + v * (GL[j] * bod + sp), a);\n    }\n}\n\n// Fire licks out over the top lip of the glory hole.\nfunction flames(S) {\n  const F = S.f, t = S.t, amt = 1.5 + 3 * (S.hot - 0.84), top = MY - MRY + 2;\n  for (let y = max(0, top - 15); y \u003c top; y++) {\n    const h = (top - y) / 15;\n    for (let x = MX - 7; x \u003c MX + 6; x++) {\n      const dx = (x + 0.5 - (MX - 0.8 + 2.5 * h + sin(t * 3 + y * 0.4) * h)) / (4.4 * (1 - 0.35 * h));\n      const dens = sm(0.2, 0.55, vn(x * 0.3, y * 0.25 + t * 7) * (1.2 - h) * exp(-dx * dx) * amt), c = bq(0.48 + 0.36 * dens);\n      for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += BB[c + j] * dens;\n    }\n  }\n}\n\n// The gaffer: capsules for head, cap, body and limbs, posed by the pipe.\nfunction figure(S) {\n  const GM = S.gm, q = cl((S.th - TH0) / (THF - TH0), 0, 1), lean = (1 - q) * (0.9 + 1.4 * (S.th - TH0)), bob = 0.8 * sin(PI * cl(S.bl / 0.8, 0, 1));\n  const hpx = 14.5 + 0.5 * lean, hpy = 16.6, shx = 16 + lean, shy = 9.8 + 0.4 * lean, hx = S.hx, hy = S.hy;\n  const hdx = mix(16.8 + 1.2 * lean, hx - BACK * sin(S.th) - 2, bob), hdy = mix(5.4 + 0.3 * lean, hy - BACK * cos(S.th) - 2.4, bob);\n  const ebx = shx + 0.4 * (hx - shx) - 0.5, eby = shy + 0.62 * (hy - shy) + 1.8;\n  let n = 0;\n  const cap = (a, b, c, d, r) => ((CP[n] = a), (CP[n + 1] = b), (CP[n + 2] = c - a), (CP[n + 3] = d - b), (CP[n + 4] = r), (n += 5));\n  // Body, apron, neck, capped head, arm, legs, feet.\n  cap(hpx, hpy, shx, shy, 2.9), cap(hpx - 0.3, hpy + 1.5, hpx + 1.2, hpy + 3.2, 2.4), cap(shx, shy, hdx, hdy, 1.2), cap(hdx, hdy, hdx, hdy, 2.5), cap(hdx - 1.2, hdy - 1.7, hdx + 3.4, hdy - 1.3, 0.9);\n  cap(shx, shy, ebx, eby, 1.4), cap(ebx, eby, hx, hy, 1.2);\n  cap(hpx, hpy + 2, 12.2, 21.6, 1.7), cap(12.2, 21.6, 10.6, 25.4, 1.4), cap(hpx + 0.6, hpy + 2, 17.6, 21.2, 1.7), cap(17.6, 21.2, 18.4, 25.4, 1.4);\n  cap(10.2, 25.6, 12.4, 25.6, 0.9), cap(18.2, 25.6, 20.4, 25.6, 0.9);\n  for (let y = 0; y \u003c DK + 1; y++)\n    for (let x = 5; x \u003c 32; x++) {\n      let c = 0;\n      for (let j = 0; j \u003c n; j += 5) c = max(c, cl(CP[j + 4] + 0.5 - seg(x + 0.5 - CP[j], y + 0.5 - CP[j + 1], CP[j + 2], CP[j + 3]), 0, 1));\n      GM[y * W + x] = c;\n    }\n}\n\n// The blowpipe, steel, its far end hot from the glass.\nfunction pipe(S) {\n  const F = S.f, M = S.mat, st = sin(S.th), ct = cos(S.th), L = PIPE + BACK, ax = S.hx - BACK * st, ay = S.hy - BACK * ct, ex = L * st, ey = L * ct;\n  for (let y = max(0, floor(min(ay, ay + ey) - 1)); y \u003c= min(H - 1, max(ay, ay + ey) + 1); y++)\n    for (let x = max(0, floor(min(ax, ax + ex) - 1)); x \u003c= min(W - 1, max(ax, ax + ex) + 1); x++) {\n      const k = y * W + x, c = cl(1.1 - seg(x + 0.5 - ax, y + 0.5 - ay, ex, ey), 0, 1), hb = bq(S.pT * sm(PIPE - 7, PIPE + 1, TT * L - BACK)), o = k * 3;\n      if (c \u003c= 0 || M[k] === 1) continue;\n      (F[o] = mix(F[o], 26 + S.lr[k] * 190 + BB[hb], c)), (F[o + 1] = mix(F[o + 1], 26 + S.lg[k] * 190 + BB[hb + 1], c)), (F[o + 2] = mix(F[o + 2], 30 + S.lb[k] * 200 + BB[hb + 2], c));\n    }\n}\n","layer":{"id":"layer-glassblower","type":"code","name":"glassblower","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glassblower\n// Family:  glass\n// Idea:    A gaffer on a platform swings a gather of molten glass on his blowpipe down into a dark swing pit, where it stretches into a long vase and cools from yellow to deep red until its own colour shows, goes back to the glory hole, is blown and swung again, and is cut off to shatter on the cullet heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the swing pit of a glass studio, where a gather is stretched long\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1\n//\n// Knob 1: Glass. The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same.\n// Knob 2: Speed. At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower.\n// Knob 3: Length. How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1.\n// Knob 4: Heat. How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter.\n// Buttons: K1 tap takes the piece back to the glory hole to reheat. K2 tap blows into the pipe and the bubble inside swells.\n\nconst W = 64, H = 128, N = W * H, NN = 40;\nconst { min, max, floor, ceil, sin, cos, sqrt, exp, abs, atan2, cbrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// Distance to a segment; TT is how far along it.\nlet TT = 0, QX = 0, QY = 0;\nfunction seg(px, py, ex, ey) {\n  TT = cl((px * ex + py * ey) / (ex * ex + ey * ey + 1e-6), 0, 1);\n  (QX = px - TT * ex), (QY = py - TT * ey);\n  return sqrt(QX * QX + QY * QY);\n}\n\n// Black body, 0..1: dark red, red, orange, yellow, near white.\nconst BBK = [0, 0, 0, 0, 0.12, 46, 3, 0, 0.25, 118, 10, 0, 0.38, 196, 34, 0, 0.5, 245, 80, 6, 0.62, 255, 132, 22, 0.75, 255, 180, 62, 0.87, 255, 222, 132, 1, 255, 246, 216];\nconst BB = new Float32Array(513 * 3);\nfor (let q = 0, k = 0; q \u003c= 512; q++) {\n  const T = q / 512;\n  while (k \u003c 28 && T > BBK[k + 4]) k += 4;\n  for (let c = 0; c \u003c 3; c++) BB[q * 3 + c] = mix(BBK[k + 1 + c], BBK[k + 5 + c], (T - BBK[k]) / (BBK[k + 4] - BBK[k]));\n}\nconst bq = (T) => (((T \u003c 0 ? 0 : T > 1 ? 1 : T) * 512 + 0.5) | 0) * 3;\n// Clear, cobalt, amber, green, ruby: colour and body when cold, then what passes of the glow.\nconst GLASS = [\n  [150, 212, 204, 0.3, 1, 0.97, 0.9], [34, 72, 238, 1, 0.3, 0.38, 1], [238, 138, 24, 1, 1, 0.62, 0.2],\n  [40, 208, 88, 1, 0.42, 1, 0.5], [228, 18, 70, 1, 1, 0.18, 0.4],\n];\n// As the glow fades the glass filters it, and the colour comes through.\nconst flt = (T) => 0.95 * (1 - sm(0.45, 0.85, T));\n\n// Deck, floor, the pit's opening, the glory hole (a drum seen end on at a slant), hands and pipe.\nconst DK = 26, FL = 31, PT = 35, OX0 = 19, OX1 = 47;\nconst MX = 49, MY = 15, MRX = 3.6, MRY = 7, FRX = 6.5, FRY = 11;\nconst PIPE = 27, BACK = 8, TH0 = 0.34, HX = 24.5, HY = 19.5, HX2 = 25.5, HY2 = 17.5;\nconst THF = atan2(MX - HX2, MY - HY2);\nconst GATHER = 0, OUT = 1, BLOW = 2, SWING = 3, LIFT = 4, REHEAT = 5, CUT = 6, EMPTY = 7;\nconst DUR = [1.3, 1, 0.8, 5, 0.9, 1.8, 1.4, 0.9];\nconst V0 = 1300, OM = (2 * PI) / 2.3, START = 13.6, FS = new Float32Array(NN), CP = new Float32Array(80);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), piece = () => ({ X: F(NN), Y: F(NN), R: F(NN), B: F(NN), T: F(NN), on: 0, dy: 0, vy: 0 });\n  const S = (params.s = {\n    t: 0, th: THF, rho: 1, sw: 0, be: 0, bv: 0, vx: 0, tx: 0, ty: 0, l: 4, R0: 3, bl: 9, rot: 0, pT: 0, boom: 0, tmax: 0.8, live: 0, k1: -1, gl: [0, 0, 0, 1, 1, 1, 1], pc: piece(), fall: piece(), sp: [], lt: F(84),\n    fa: F(N), se: F(N), ci: new Uint8Array(N), hc: F(256), cx: F(256), cn: F(256), top: F(W),\n    f: F(N * 3), lr: F(N), lg: F(N), lb: F(N), mat: new Uint8Array(N), al: F(N * 3), gm: F(N),\n    gd: F(N).fill(99), gs: F(N), gr: F(N), gu: F(N), gb: F(N), gt: F(N),\n  });\n  maps(S);\n  go(S, GATHER);\n}\n\nfunction maps(S) {\n  const M = S.mat, A = S.al, HG = S.top;\n  for (let x = 0; x \u003c W; x++) HG[x] = 122 - 10 * ((x + 0.5 - 33) / 31) ** 2 + 2 * (vn(x * 0.3, 5) - 0.5);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, gr = 0.85 + 0.3 * hash(x, y);\n    let m = 0, a = 0, c = [1, 0.9, 0.8];\n    if (((px - MX) / MRX) ** 2 + ((py - MY) / MRY) ** 2 \u003c 1) m = 3;\n    else if (((px - MX) / FRX) ** 2 + ((py - MY) / FRY) ** 2 \u003c 1) (m = 2), (a = 0.5 * (0.8 + 0.3 * hash(x, y + 7))), (c = [1, 0.84, 0.7]);\n    else if (x > MX && y \u003c FL && y > MY - FRY - 1) {\n      // The drum with a rim on top and two bands, a dark stand below.\n      m = 1;\n      a = y \u003c MY + FRY ? (y === MY - FRY ? 0.9 : 0.3 * (0.35 + 0.65 * cos(((py - MY) / FRY) * 1.45))) * (x === 56 || x === 61 ? 1.8 : 1) : y === MY + FRY ? 0.7 : 0.12;\n      c = [0.9, 0.93, 1];\n    } else if (y >= FL && y \u003c PT && (x \u003c OX0 || x > OX1)) (m = 4), (a = y === FL ? 0.8 : 0.3 * gr * (0.8 + 0.4 * hash(x >> 1, y))), (c = [1, 0.95, 0.88]);\n    else if ((y >= DK && y \u003c DK + 2 && x \u003c 23) || ((x === 3 || x === 19) && y >= DK && y \u003c FL)) (m = 5), (a = y === DK ? 0.9 : 0.35), (c = [0.9, 0.93, 1]);\n    else if (py >= HG[x]) {\n      // Broken glass: facets on a jittered grid, dark seams between them.\n      m = 7;\n      let d1 = 9, d2 = 9, id = 0, ci = 0;\n      for (let j = 0; j \u003c 9; j++) {\n        const cx = floor(x / 3) + (j % 3) - 1, cy = floor(y / 2.5) + floor(j / 3) - 1, d = (px - (cx + hash(cx, cy)) * 3) ** 2 + (py - (cy + hash(cy, cx + 9)) * 2.5) ** 2;\n        if (d \u003c d1) (d2 = d1), (d1 = d), (id = hash(cx + 31, cy)), (ci = cl((cy - 42) * 24 + cx + 1, 0, 254));\n        else if (d \u003c d2) d2 = d;\n      }\n      (S.ci[i] = ci), (S.cx[ci] += px), S.cn[ci]++;\n      (S.fa[i] = id), (S.se[i] = sm(0.9, 0.2, sqrt(d2) - sqrt(d1)) * 0.7 + (py - HG[x] \u003c 1 ? -0.3 : 0));\n    } else if (y >= FL) {\n      // Firebrick courses, sooted in clouds.\n      m = 6;\n      const r = floor(y / 3), sx = x + (r & 1) * 3;\n      a = y % 3 === 2 || sx % 7 === 6 ? 0.1 : 0.5 * (0.7 + 0.6 * hash(floor(sx / 7), r)) * (0.45 + 0.7 * vn(x * 0.11, y * 0.045)) * gr * (x \u003c 2 || x > 61 ? 0.45 : 1);\n      c = [1, 0.76, 0.58];\n    } else {\n      // Corrugated sheeting behind the shop.\n      a = 0.5 * (0.88 + 0.12 * cos(px * PI * 0.5)) * (x % 16 === 15 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 0.07, y * 0.15));\n      c = [0.95, 0.9, 0.85];\n    }\n    M[i] = m;\n    for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = a * c[j];\n  }\n}\n// Heat left in the heap where hot glass lands, shard by shard.\nfunction heat(S, x, y, T, r) {\n  for (let j = floor(y - r); j \u003c= y + r; j++)\n    for (let i = floor(x - r); i \u003c= x + r; i++) {\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || S.mat[j * W + i] !== 7) continue;\n      const c = S.ci[j * W + i];\n      S.hc[c] = max(S.hc[c], T * sm(r + 0.5, r * 0.3, sqrt((i + 0.5 - x) ** 2 + (j + 0.5 - y) ** 2)));\n    }\n}\n\nfunction go(S, ph) {\n  (S.ph = ph), (S.pt = 0), (S.th1 = S.th);\n  if (ph === GATHER) (S.pc.on = 1), (S.V = 60), (S.b = S.bt = 0), (S.sb = S.sbt = 0.3), (S.pass = 1), S.pc.T.fill(S.tmax);\n  else if (ph === BLOW) blow(S, S.pass > 1 ? 0.1 : 0.4);\n  else if (ph === SWING) S.sw = 0;\n}\nfunction next(S) {\n  const p = S.ph;\n  go(S, p === SWING ? (S.pass > 1 ? CUT : LIFT) : p === REHEAT ? OUT : p === EMPTY ? GATHER : p + 1);\n  if (p === REHEAT) S.pass++;\n}\nfunction blow(S, db) {\n  (S.bt = min(0.74, S.b + db)), (S.sbt = min(0.84, S.pass > 1 ? S.sb + 0.12 : 0.55)), (S.bl = 0);\n}\nconst live = (S) => S.pc.on && (S.ph === BLOW || S.ph === SWING || (S.ph === CUT && S.pt \u003c 0.4));\n\n// Radius from volume and length: a neck, a body narrowing down, a round end.\nfunction shape(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1);\n  let R = max(1, S.R0);\n  for (let it = 0; it \u003c 3; it++) {\n    let sum = 0;\n    for (let i = 0; i \u003c NN; i++) {\n      const s = i / (NN - 1), a = s * l, ct = 1 - min(1, (a + 0.25 * R) / (1.1 * R)), cb = 1 - min(1, (l - a) / (0.62 * R));\n      FS[i] = (1 - 0.38 * s) * sqrt(1 - ct * ct) * sqrt(max(0, 1 - cb * cb));\n      sum += FS[i] * FS[i];\n    }\n    R = max(1, sqrt(S.V / (PI * dl * max(1e-3, sum))));\n  }\n  S.R0 = R;\n  for (let i = 0; i \u003c NN; i++) {\n    const q = (i / (NN - 1) - 0.05) / (S.sb - 0.05), B = q > 0 && q \u003c 1 ? S.b * sqrt(1 - (2 * q - 1) ** 2) : 0;\n    (P.B[i] = B), (P.R[i] = (R * FS[i]) / sqrt(1 - B * B));\n  }\n}\n// Off the pipe along its axis, then hanging and trailing the swing; straight when lifted.\nfunction line(S) {\n  const P = S.pc, l = max(4, S.l), dl = l / (NN - 1), th = S.th, w0 = 0.8 * S.R0 + 1.5;\n  let x = S.tx - sin(th) * 1.2, y = S.ty - cos(th) * 1.2;\n  for (let i = 0; i \u003c NN; i++) {\n    (P.X[i] = x), (P.Y[i] = y);\n    const s = i / (NN - 1), w = exp((-s * l) / w0), a = mix(th * w + (1 - w) * S.be * s ** 0.8, th, S.rho);\n    (x += sin(a) * dl), (y += cos(a) * dl);\n  }\n}\n// Radiative cooling, faster where the glass is thin.\nconst cool = (T, R, d) => T - ((0.22 * (T + 0.1)) / max(2.2, R) ** 0.7) * d;\n\nfunction step(S, d) {\n  (S.t += d), (S.pt += d);\n  const dur = () => (S.ph === SWING ? (S.pass > 1 ? 6.5 : 5) : DUR[S.ph]);\n  if (S.pt >= dur()) next(S);\n  const ph = S.ph, pt = S.pt, D = dur(), u = sm(0, 1, pt / D), P = S.pc, F = S.fall, HG = S.top;\n  let th = S.th, rho = S.rho, inH = 0;\n  S.env = 0;\n  if (ph === GATHER || ph === REHEAT) (th = THF + 0.015 * sin(S.t * 3)), (rho = inH = 1);\n  else if (ph === OUT) (th = mix(S.th1, TH0, u)), (rho = 1 - sm(0.3, 0.9, pt / D)), (inH = 1 - sm(0, 0.25, pt / D));\n  else if (ph === BLOW) (th = TH0 + 0.03 * sin(pt * 4)), (rho = 0);\n  else if (ph === SWING) {\n    S.env = sm(0, 1.4, pt) * (1 - sm(D - 1.1, D, pt));\n    S.sw += d * OM * sqrt(62 / S.L) * (1 - 0.15 * (S.l / S.L));\n    (th = TH0 + S.A * S.env * sin(S.sw)), (rho = 0);\n  } else if (ph === LIFT || ph === EMPTY) (th = mix(S.th1, THF, u)), (rho = sm(0, 0.3, pt / D)), (inH = sm(0.75, 1, pt / D));\n  else {\n    (th = mix(S.th1, TH0, sm(0, 0.4, pt))), (rho = 0);\n    if (P.on && pt >= 0.4) cut(S);\n  }\n  const q = cl((th - TH0) / (THF - TH0), 0, 1);\n  (S.th = th), (S.rho = rho), (S.hx = mix(HX, HX2, q)), (S.hy = mix(HY, HY2, q));\n  const tx = S.hx + PIPE * sin(th), ty = S.hy + PIPE * cos(th), vx = (tx - S.tx) / d, ax = cl((vx - S.vx) / d, -400, 400), Le = max(10, 0.55 * S.l);\n  (S.tx = tx), (S.ty = ty), (S.vx = vx);\n  // The hanging part is a pendulum on a moving pivot.\n  if (rho > 0.5) S.be = S.bv = 0;\n  else (S.bv += ((-190 / Le) * sin(S.be) - 1.3 * S.bv - (ax / Le) * cos(S.be)) * d), (S.be = cl(S.be + S.bv * d, -0.7, 0.7));\n  (S.b += (S.bt - S.b) * min(1, d * 4)), (S.sb += (S.sbt - S.sb) * min(1, d * 4)), (S.bl += d), (S.rot += d * (3 + 5 * inH));\n  if (P.on) {\n    if (ph === GATHER) (S.V = max(60, V0 * (S.L / 62) * sm(0, 1.1, pt))), (S.l = 1.9 * cbrt((3 * S.V) / (4 * PI)));\n    let tm = 0;\n    for (let i = 0; i \u003c NN; i++) tm += P.T[i] / NN;\n    if (rho \u003c 0.5) S.l += 0.42 * sm(0.15, 0.55, tm) * max(0, (S.pass > 1 ? S.L : 0.64 * S.L) - S.l) * (0.3 + 0.7 * S.env) * d;\n    shape(S), line(S);\n    // The glory hole brings it all back up.\n    for (let i = 0; i \u003c NN; i++) {\n      const T = P.T[i] + (S.tmax - P.T[i]) * (1 - exp(-1.9 * d)) * inH;\n      P.T[i] = mix(T, cool(T, P.R[i], d), 1 - inH);\n    }\n    (S.pT = mix(S.pT, P.T[0] * 0.7, min(1, d * 2))), (S.gx = P.X[NN >> 1]), (S.gy = P.Y[NN >> 1]);\n  } else S.pT *= exp(-d * 0.5);\n  if (F.on) {\n    (F.vy += 300 * d), (F.dy += F.vy * d), (S.gx = F.X[NN >> 1]), (S.gy = F.Y[NN >> 1] + F.dy);\n    for (let i = 0; i \u003c NN; i++) F.T[i] = cool(F.T[i], F.R[i], d);\n    // It hits the heap and goes to pieces.\n    const bx = F.X[NN - 1], hy = HG[cl(bx | 0, 0, W - 1)];\n    if (F.Y[NN - 1] + F.dy > hy - 1) {\n      heat(S, bx, hy + 1, F.T[NN - 1] + 0.1, 3.5);\n      for (let i = 0; i \u003c NN * 2; i++) {\n        const j = i >> 1;\n        S.sp.push({ x: F.X[j] + (rnd() - 0.5) * F.R[j], y: F.Y[j] + F.dy, vx: (rnd() - 0.5) * 60, vy: F.vy * (0.5 + 0.4 * rnd()) - 30 * rnd(), l: 9, T: F.T[j] });\n      }\n      (F.on = 0), (S.boom = 1), (S.bx = bx);\n    }\n  }\n  for (let c = 0; c \u003c 255; c++) if (S.hc[c] > 0) S.hc[c] -= 0.03 * (S.hc[c] + 0.08) * d;\n  S.boom = max(0, S.boom - d * 2.5);\n  for (const p of S.sp) {\n    (p.vy += 200 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 1.2);\n    if (p.x \u003c 0.5 || p.x > W - 0.5) (p.vx *= -0.5), (p.x = cl(p.x, 0.5, W - 0.5));\n    // A shard bounces, then settles into the heap and leaves its heat there.\n    if (p.l > 5 && p.y > HG[p.x | 0]) p.vy > 70 ? ((p.vy *= -0.35), (p.vx *= 0.6), (p.y = HG[p.x | 0])) : (heat(S, p.x, p.y + 1, p.T, 1.3 + rnd()), (p.l = 0));\n  }\n  S.sp = S.sp.filter((p) => p.l > 0 && p.y \u003c H + 2);\n}\n\n// The jacks score the neck and the piece drops away into the pit.\nfunction cut(S) {\n  const P = S.pc, F = S.fall;\n  for (const k of \"XYRBT\") F[k].set(P[k]);\n  (F.on = 1), (F.dy = F.vy = P.on = 0), (S.pT = 0.75), (S.l = 4), (S.V = 60);\n  for (let k = 0; k \u003c 14; k++) S.sp.push({ x: S.tx, y: S.ty + 1, vx: (rnd() - 0.5) * 34, vy: -10 - 28 * rnd(), l: 0.6 + 0.4 * rnd(), T: 0.8 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], -1, 1), k4 = cl(k[3], 0, 1);\n  if (k1 !== S.k1) {\n    const u = k1 * 4, i = min(3, floor(u)), f = sm(0.25, 0.75, u - i);\n    for (let c = 0; c \u003c 7; c++) S.gl[c] = mix(GLASS[i][c], GLASS[i + 1][c], f);\n    S.k1 = k1;\n  }\n  (S.L = 62 + 18 * k3), (S.A = 0.29 + 0.15 * k3), (S.hot = 0.84 + 0.16 * k4), (S.tmax = 0.86 + 0.18 * k4), (S.fI = 1 + 0.55 * k4);\n  if (!S.live) {\n    while (!S.live) step(S, 1 / 30), (S.live = S.t >= START ? 1 : 0);\n    // The last piece lies broken in the heap, still red.\n    heat(S, 31 + 6 * rnd(), 125, 0.44, 5);\n    for (let k = 0; k \u003c 7; k++) heat(S, 2 + 60 * rnd(), 112 + 16 * rnd(), 0.18 + 0.14 * rnd(), 1.5 + 2 * rnd());\n  }\n  const bp = input.btnPressed || [];\n  if (bp[0] && live(S)) go(S, LIFT);\n  if (bp[1] && live(S)) blow(S, 0.14);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\n// Lights: the glory hole, seven points along the gather, the heap's embers, the crash.\nfunction lights(S) {\n  const LT = S.lt, M = S.mat, HC = S.hc, GL = S.gl;\n  let n = 0;\n  const add = (x, y, T, w, sg, g = 0) => {\n    const o = n++ * 6, b = bq(T), f = g * flt(T);\n    (LT[o] = x), (LT[o + 1] = y), (LT[o + 5] = 1 / (sg * sg));\n    for (let c = 0; c \u003c 3; c++) LT[o + 2 + c] = (BB[b + c] / 255) * w * (1 - f + f * GL[4 + c]);\n  };\n  add(MX - 2.5, MY + 0.5, S.hot, S.fI * (0.92 + 0.12 * vn(S.t * 4, 3)), 13);\n  for (const P of [S.pc, S.fall]) {\n    if (!P.on) continue;\n    for (let i = 3; i \u003c NN; i += 6) {\n      const x = P.X[i], y = P.Y[i] + P.dy, m = x >= 0 && x \u003c W && y >= 0 && y \u003c H ? M[(y | 0) * W + (x | 0)] : 0;\n      if (y \u003c H + 12) add(x, y, P.T[i], 0.32 * min(2, P.R[i] / 3) * (m === 1 || m === 2 ? 0.15 : 1), 10 + 1.4 * P.R[i], 1);\n    }\n  }\n  for (let h = 0; h \u003c 2; h++) {\n    let w = 0, T = 0, sx = 0;\n    for (let c = 0; c \u003c 255; c++) {\n      const e = (HC[c] - 0.15) * S.cn[c], x = S.cx[c] / S.cn[c];\n      if (e > 0 && x \u003c 32 === !h) (w += e), (sx += e * x), (T = max(T, HC[c]));\n    }\n    if (w > 0) add(sx / w, 118, T, min(3, w * 0.12), 20, 0.7);\n  }\n  if (S.boom > 0) add(S.bx, 112, 0.75, S.boom * 1.6, 18);\n  return n;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  const F = S.f, M = S.mat, A = S.al, LR = S.lr, LG = S.lg, LB = S.lb, LT = S.lt, GM = S.gm, t = S.t, hot = S.hot, n = lights(S);\n  const lx = LT[0], ly = LT[1], fw = LT[2] / (BB[bq(hot)] / 255), gc = bq(hot * 0.6);\n  figure(S);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, px = x + 0.5, py = y + 0.5, o = i * 3, m = M[i], ds = (px - lx) ** 2 + (py - ly) ** 2, qa = 1 / (1 + ds * LT[5]);\n    // The glory hole's near pool and long reach; below the floor, only through the opening.\n    let fq = qa * qa + 0.62 / (1 + ds / 500);\n    if (y > FL + 1) {\n      const xc = lx + ((px - lx) * (FL - ly)) / (py - ly);\n      fq *= 0.06 + 0.94 * sm(OX0 - 3, OX0 + 3, xc) * sm(OX1 + 3, OX1 - 3, xc) * exp(-(py - FL) / 40);\n    }\n    let r = 0.004 + LT[2] * fq, g = 0.003 + LT[3] * fq, b = 0.003 + LT[4] * fq;\n    for (let j = 6; j \u003c n * 6; j += 6) {\n      const dx = px - LT[j], dy = py - LT[j + 1];\n      let q = 1 / (1 + (dx * dx + dy * dy) * LT[j + 5]);\n      q *= q;\n      (r += LT[j + 2] * q), (g += LT[j + 3] * q), (b += LT[j + 4] * q);\n    }\n    (LR[i] = r), (LG[i] = g), (LB[i] = b);\n    const ex = (px - MX) / MRX, ey = (py - MY) / MRY, e2 = ex * ex + ey * ey;\n    if (m === 3) {\n      // The mouth, hottest in the middle, the fire churning.\n      const c = bq(hot * (1 - 0.2 * e2) + 0.07 * (vn(x * 0.6, y * 0.5 - t * 5) - 0.5));\n      for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j];\n      continue;\n    }\n    // The refractory round the mouth glows from the heat.\n    const gw = m === 2 ? exp(-(sqrt(e2) - 1) * 2.4) * 0.9 * fw : 0;\n    (F[o] = A[o] * r * 255 + BB[gc] * gw), (F[o + 1] = A[o + 1] * g * 255 + BB[gc + 1] * gw), (F[o + 2] = A[o + 2] * b * 255 + BB[gc + 2] * gw);\n    // The gaffer, a silhouette with a rim of light.\n    const c = GM[i];\n    if (c > 0) {\n      const rim = max(1 - GM[i + 1], 0.6 * (1 - GM[i + W]), 0.4 * (1 - GM[i - W])) * 330;\n      (F[o] = mix(F[o], 5 + r * rim, c)), (F[o + 1] = mix(F[o + 1], 4 + g * rim, c)), (F[o + 2] = mix(F[o + 2], 4 + b * rim, c));\n    }\n  }\n  heap(S);\n  if (S.pc.on) glass(S, S.pc);\n  if (S.fall.on) glass(S, S.fall);\n  flames(S);\n  pipe(S);\n  for (const p of S.sp) {\n    const c = bq(p.l > 5 ? p.T + 0.1 : 0.55 + 0.4 * p.l), a = p.l > 5 ? 1 : min(1, p.l * 1.5);\n    put(F, p.x, p.y, c, a), put(F, p.x - p.vx * 0.025, p.y - p.vy * 0.025, c, a * 0.5);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction put(F, x, y, c, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let j = 0, o = (y * W + x) * 3; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j], a);\n}\n\n// The cullet heap: hot shards glow, cool ones show their colour and glint.\nfunction heap(S) {\n  const { f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL, hc: HC, ci: CI, fa: FA, se: SE } = S;\n  for (let i = 108 * W; i \u003c N; i++) {\n    if (M[i] !== 7) continue;\n    const o = i * 3, fa = FA[i], se = SE[i], T = HC[CI[i]] * (0.94 + 0.12 * fa), v = 1 - sm(0.1, 0.34, T), lum = (LR[i] + LG[i] + LB[i]) / 3;\n    const gl = max(0, cos(fa * 12.6 - 2 * atan2(S.gy - (i >> 6), S.gx - (i & 63)))) ** 10 * lum * 2.4 * v * (1 - se);\n    const b = (0.3 + 3 * lum) * (0.35 + 0.8 * fa) * (1 - se) * v * GL[3], c = bq(T), f = 0.7 * flt(T);\n    for (let j = 0; j \u003c 3; j++) F[o + j] = BB[c + j] * (0.95 - 0.4 * se) * (1 - f + f * GL[4 + j]) + GL[j] * b + gl * (100 + GL[j]);\n  }\n}\n\n// The glass as capsules between nodes, the nearest one winning each LED.\nfunction glass(S, P) {\n  const { gd: GD, gs: GS, gr: GR, gu: GU, gb: GB, gt: GT, f: F, mat: M, lr: LR, lg: LG, lb: LB, gl: GL } = S, oy = P.dy;\n  let X0 = W, X1 = -1, Y0 = H, Y1 = -1;\n  for (let i = 0; i \u003c NN - 1; i++) {\n    const ax = P.X[i], ay = P.Y[i] + oy, bx = P.X[i + 1], by = P.Y[i + 1] + oy, ra = P.R[i], rb = P.R[i + 1], rr = max(ra, rb) + 1;\n    const x0 = max(0, floor(min(ax, bx) - rr)), x1 = min(W - 1, ceil(max(ax, bx) + rr)), y0 = max(0, floor(min(ay, by) - rr)), y1 = min(H - 1, ceil(max(ay, by) + rr));\n    (X0 = min(X0, x0)), (X1 = max(X1, x1)), (Y0 = min(Y0, y0)), (Y1 = max(Y1, y1));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const k = y * W + x, dd = seg(x + 0.5 - ax, y + 0.5 - ay, bx - ax, by - ay), r = ra + (rb - ra) * TT;\n        if (dd - r \u003c GD[k]) (GD[k] = dd - r), (GS[k] = (i + TT) / (NN - 1)), (GR[k] = r), (GU[k] = QX * (by - ay) - QY * (bx - ax) >= 0 ? dd : -dd), (GB[k] = mix(P.B[i], P.B[i + 1], TT)), (GT[k] = mix(P.T[i], P.T[i + 1], TT));\n      }\n  }\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const k = y * W + x, sd = GD[k], m = M[k];\n      if (sd >= 0.5) continue;\n      GD[k] = 99;\n      if (m === 1 || m === 2) continue;\n      const a = cl(0.5 - sd, 0, 1), r = max(0.5, GR[k]), d = GU[k], u = cl(d / r, -1, 1), ad = abs(d), rb = GB[k] * r, o = k * 3;\n      const ib = rb > 0.6 ? sm(0, 0.8, rb - ad) : 0, ch = 2 * r * sqrt(1 - u * u) * (1 - 0.5 * ib);\n      // More glow through more glass, less through the bubble; the skin cools first.\n      const e = 1 - exp(-0.3 * ch), T = GT[k] - 0.16 * u * u, st = sin(GS[k] * S.l * 0.55 - S.rot + u * 2.4);\n      const c = bq(T * (0.62 + 0.38 * e) * (1 + 0.05 * st) + 0.06 * (1 - u * u) - 0.08 * ib), dim = 1 - 0.28 * ib, v = 1 - sm(0.14, 0.42, T), f = flt(T);\n      // Cool glass shows its colour and a highlight.\n      const lum = (LR[k] + LG[k] + LB[k]) / 3, bod = (0.25 + 1.2 * lum) * (0.55 + 0.45 * (1 - u * u)) * (0.85 + 0.15 * st) * (1 - 0.35 * ib) * GL[3];\n      const sp = exp(-(((u - 0.45) / 0.2) ** 2)) * (0.25 + 1.3 * lum) * 160 * v;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], BB[c + j] * dim * (1 - f + f * GL[4 + j]) + v * (GL[j] * bod + sp), a);\n    }\n}\n\n// Fire licks out over the top lip of the glory hole.\nfunction flames(S) {\n  const F = S.f, t = S.t, amt = 1.5 + 3 * (S.hot - 0.84), top = MY - MRY + 2;\n  for (let y = max(0, top - 15); y \u003c top; y++) {\n    const h = (top - y) / 15;\n    for (let x = MX - 7; x \u003c MX + 6; x++) {\n      const dx = (x + 0.5 - (MX - 0.8 + 2.5 * h + sin(t * 3 + y * 0.4) * h)) / (4.4 * (1 - 0.35 * h));\n      const dens = sm(0.2, 0.55, vn(x * 0.3, y * 0.25 + t * 7) * (1.2 - h) * exp(-dx * dx) * amt), c = bq(0.48 + 0.36 * dens);\n      for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += BB[c + j] * dens;\n    }\n  }\n}\n\n// The gaffer: capsules for head, cap, body and limbs, posed by the pipe.\nfunction figure(S) {\n  const GM = S.gm, q = cl((S.th - TH0) / (THF - TH0), 0, 1), lean = (1 - q) * (0.9 + 1.4 * (S.th - TH0)), bob = 0.8 * sin(PI * cl(S.bl / 0.8, 0, 1));\n  const hpx = 14.5 + 0.5 * lean, hpy = 16.6, shx = 16 + lean, shy = 9.8 + 0.4 * lean, hx = S.hx, hy = S.hy;\n  const hdx = mix(16.8 + 1.2 * lean, hx - BACK * sin(S.th) - 2, bob), hdy = mix(5.4 + 0.3 * lean, hy - BACK * cos(S.th) - 2.4, bob);\n  const ebx = shx + 0.4 * (hx - shx) - 0.5, eby = shy + 0.62 * (hy - shy) + 1.8;\n  let n = 0;\n  const cap = (a, b, c, d, r) => ((CP[n] = a), (CP[n + 1] = b), (CP[n + 2] = c - a), (CP[n + 3] = d - b), (CP[n + 4] = r), (n += 5));\n  // Body, apron, neck, capped head, arm, legs, feet.\n  cap(hpx, hpy, shx, shy, 2.9), cap(hpx - 0.3, hpy + 1.5, hpx + 1.2, hpy + 3.2, 2.4), cap(shx, shy, hdx, hdy, 1.2), cap(hdx, hdy, hdx, hdy, 2.5), cap(hdx - 1.2, hdy - 1.7, hdx + 3.4, hdy - 1.3, 0.9);\n  cap(shx, shy, ebx, eby, 1.4), cap(ebx, eby, hx, hy, 1.2);\n  cap(hpx, hpy + 2, 12.2, 21.6, 1.7), cap(12.2, 21.6, 10.6, 25.4, 1.4), cap(hpx + 0.6, hpy + 2, 17.6, 21.2, 1.7), cap(17.6, 21.2, 18.4, 25.4, 1.4);\n  cap(10.2, 25.6, 12.4, 25.6, 0.9), cap(18.2, 25.6, 20.4, 25.6, 0.9);\n  for (let y = 0; y \u003c DK + 1; y++)\n    for (let x = 5; x \u003c 32; x++) {\n      let c = 0;\n      for (let j = 0; j \u003c n; j += 5) c = max(c, cl(CP[j + 4] + 0.5 - seg(x + 0.5 - CP[j], y + 0.5 - CP[j + 1], CP[j + 2], CP[j + 3]), 0, 1));\n      GM[y * W + x] = c;\n    }\n}\n\n// The blowpipe, steel, its far end hot from the glass.\nfunction pipe(S) {\n  const F = S.f, M = S.mat, st = sin(S.th), ct = cos(S.th), L = PIPE + BACK, ax = S.hx - BACK * st, ay = S.hy - BACK * ct, ex = L * st, ey = L * ct;\n  for (let y = max(0, floor(min(ay, ay + ey) - 1)); y \u003c= min(H - 1, max(ay, ay + ey) + 1); y++)\n    for (let x = max(0, floor(min(ax, ax + ex) - 1)); x \u003c= min(W - 1, max(ax, ax + ex) + 1); x++) {\n      const k = y * W + x, c = cl(1.1 - seg(x + 0.5 - ax, y + 0.5 - ay, ex, ey), 0, 1), hb = bq(S.pT * sm(PIPE - 7, PIPE + 1, TT * L - BACK)), o = k * 3;\n      if (c \u003c= 0 || M[k] === 1) continue;\n      (F[o] = mix(F[o], 26 + S.lr[k] * 190 + BB[hb], c)), (F[o + 1] = mix(F[o + 1], 26 + S.lg[k] * 190 + BB[hb + 1], c)), (F[o + 2] = mix(F[o + 2], 30 + S.lb[k] * 200 + BB[hb + 2], c));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glass=0..1, Speed=0.2..3, Length=-1..1, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glass","min":0,"max":1,"about":"The batch colour that comes through as the glow fades, in the piece and in the broken glass of the heap: clear with a pale aqua tint at 0, then cobalt, amber, green, ruby at 1. Hot, they all glow the same."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a swing takes 2.3 seconds and a piece goes from gather to cut in 21; at 0.2 everything runs ten times slower."},{"name":"Length","min":-1,"max":1,"about":"How much glass the gaffer gathers and how far he lets it stretch: a short vase to row 90 at -1, a cane swung in a wide arc down to the heap at 1."},{"name":"Heat","min":0,"max":1,"about":"How hot the glory hole runs, orange-yellow at 0 and near white at 1; the gather comes out that hot and lights the shop brighter."}],"start":[0,2,0,0.06],"measures":{"motion":0.2176,"detail":0.046,"edges":0.1956,"complexity":1.533,"coverage":0.4076,"colour":0.1924,"drift":0.0806},"knobResponse":[0.0366,0.0488,0.0315,0.0412]},{"slug":"glitter-fall","title":"Glitter Fall","family":"cosmetic","round":29,"note":"검은 화면 위로 분홍 글리터가 흔들리는 줄기로 쏟아지고, 육각 조각 하나하나가 제 박자로 돌다가 면이 빛을 향할 때 반짝여요. 바닥에 쌓인 더미는 바닥 틈으로 모래시계처럼 빠져요. K1 은 색상환을 다 돌고, 누르면 더미 윗층이 공중으로 튀어 올라요.","idea":"Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.","buttons":"K1 tap throws the top of the heap up into the air, and it flashes all the way back down.","code":"// ===== Patternflow pattern =====\n// Title:   Glitter Fall\n// Family:  cosmetic\n// Idea:    Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after loose cosmetic glitter poured under a display lamp\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1\n//\n// Knob 1: Hue. The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall.\n// Knob 2: Speed. How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower.\n// Knob 3: Amount. How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast.\n// Knob 4: Size. The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble.\n// Buttons: K1 tap throws the top of the heap up into the air, and it flashes all the way back down.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, abs, sqrt, log, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Every flake carries one of NS seeds, which fix its colour class, how it lies\n// once it has landed and how bright it is. A grain in the heap keeps its seed,\n// so the heap's texture and glints stay put while the lamp moves.\nconst NS = 1024;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst TX = new Float32Array(NS), TY = new Float32Array(NS), JIT = new Float32Array(NS), CLS = new Uint8Array(NS);\nfor (let i = 0; i \u003c NS; i++) {\n  // A landed flake lies roughly flat: its tilt is a small Gaussian.\n  const r = sqrt(-2 * log(hash(i * 4) + 1e-6)) * 0.3, a = 2 * PI * hash(i * 4 + 1);\n  TX[i] = r * cos(a);\n  TY[i] = r * sin(a);\n  JIT[i] = hash(i * 4 + 2);\n  const c = hash(i * 4 + 3);\n  // Main colour, a lighter tint, a deeper shade, and silver.\n  CLS[i] = c \u003c 0.5 ? 0 : c \u003c 0.7 ? 1 : c \u003c 0.85 ? 2 : 3;\n}\n// Hue offset, saturation and value of each class, and how much of the hue a\n// flash keeps. Silver keeps a breath of the hue so it sits in the same mix.\nconst PAL = [\n  [0, 0.85, 0.8, 0.45],\n  [-0.03, 0.55, 0.95, 0.35],\n  [0.03, 1, 0.65, 0.55],\n  [0, 0.1, 0.5, 0.08],\n];\n\n// The heap's grains sit one to an LED, stacked in columns from the floor up.\n// HEAP is how many grains make the floor open, LOW how many it keeps.\nconst HEAP = 2600, LOW = 1150;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), ph: F(MAXP), om: F(MAXP), al: F(MAXP), sw: F(MAXP), vt: F(MAXP), sd: new Uint16Array(MAXP),\n    n: 0, G: new Int16Array(N).fill(-1), h: new Int16Array(W), grains: 0, T: 0, acc: 0, ca: 0, dir: 1,\n    drain: 0, dx0: 0, dx1: 0, dtime: 0, started: false,\n    buf: F(N * 3), base: F(12), fl: F(12), hue: 0, amount: 1, size: 0.06, lx: 32, ly: 80,\n  };\n}\n\n// One flake into the air at x, y.\nfunction spawn(S, x, y, vx, vy, seed) {\n  if (S.n >= MAXP) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  // Its own spin: phase and rate, so each flash is a smooth function of time.\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.6 + 3 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n  S.al[i] = Math.random() * PI;\n  S.sw[i] = Math.random() * 2 * PI;\n  S.vt[i] = 12 + 6 * Math.random();\n  S.sd[i] = seed;\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.al[i] = S.al[j];\n  S.sw[i] = S.sw[j];\n  S.vt[i] = S.vt[j];\n  S.sd[i] = S.sd[j];\n}\n\n// Where the stream comes down: a centre that wanders the width of the panel.\nconst pour = (T) => 32 + 20 * sin(T * 0.19) + 7 * sin(T * 0.47 + 1.3);\n\n// Moves the top grain of column a onto the top of column b.\nfunction slide(S, a, b) {\n  const h = S.h, G = S.G, from = (H - h[a]) * W + a;\n  h[b]++;\n  G[(H - h[b]) * W + b] = G[from];\n  G[from] = -1;\n  h[a]--;\n}\n\n// The heap settles like sand: wherever a column stands two or more grains\n// above its neighbour, grains slip from its top down onto the neighbour's, at\n// most three a step, so a wall slumps to the angle of repose within a few\n// frames and the slope can be seen running.\nfunction settle(S) {\n  const h = S.h, G = S.G;\n  S.dir = -S.dir;\n  for (let k = 0; k \u003c W - 1; k++) {\n    const x = S.dir > 0 ? k : W - 2 - k;\n    let d = h[x] - h[x + 1];\n    // Some steps hold at 45 degrees and some do not, which roughens the slopes.\n    const lim = Math.random() \u003c 0.5 ? 2 : 3;\n    if (d >= lim) for (let n = min(3, d >> 1); n > 0; n--) slide(S, x, x + 1);\n    else if (-d >= lim) for (let n = min(3, -d >> 1); n > 0; n--) slide(S, x + 1, x);\n  }\n  // An open floor lets the grains over the slot fall out of the bottom: the\n  // whole column sinks by one, so its glitter is seen running down.\n  if (S.drain)\n    for (let x = S.dx0; x \u003c= S.dx1; x++) {\n      if (h[x] \u003c= 0 || Math.random() > 0.8) continue;\n      for (let y = H - 1; y > H - h[x]; y--) G[y * W + x] = G[(y - 1) * W + x];\n      G[(H - h[x]) * W + x] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\n// Lands a falling flake on top of column cx.\nfunction land(S, cx, seed) {\n  if (S.h[cx] >= H - 1) return;\n  S.h[cx]++;\n  S.G[(H - S.h[cx]) * W + cx] = seed;\n  S.grains++;\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const T = S.T;\n  // The lamp drifts round the lower two thirds of the panel.\n  S.lx = 32 + 34 * sin(T * 0.29);\n  S.ly = 84 + 34 * sin(T * 0.21 + 0.7);\n  // Pouring: a little over half the glitter comes down in the stream, the\n  // rest is sprinkled across the whole width.\n  S.acc += st * 80 * S.amount;\n  const c = pour(T);\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    const x = Math.random() \u003c 0.55 ? c + (Math.random() + Math.random() - 1) * 9 : Math.random() * W;\n    spawn(S, cl(x, 0, W - 0.01), -2 * Math.random(), 0, 12, floor(Math.random() * NS));\n  }\n  // Glitter falls slowly, rocking from side to side on its way down.\n  const k = min(1, 1.5 * st), air = 3 * sin(T * 0.37);\n  for (let i = S.n - 1; i >= 0; i--) {\n    S.sw[i] += st * 2;\n    S.vy[i] += (S.vt[i] - S.vy[i]) * k;\n    S.vx[i] += (air + 5 * sin(S.sw[i]) - S.vx[i]) * k;\n    S.ph[i] += S.om[i] * st;\n    const oy = S.y[i];\n    let x = S.x[i] + S.vx[i] * st;\n    const y = oy + S.vy[i] * st;\n    if (x \u003c 0) (x = -x), (S.vx[i] = abs(S.vx[i]));\n    if (x >= W) (x = 2 * W - 0.01 - x), (S.vx[i] = -abs(S.vx[i]));\n    S.x[i] = x;\n    S.y[i] = y;\n    if (S.vy[i] \u003c= 0 || y \u003c 0) continue;\n    // It lands once it reaches the top of the heap in its column.\n    const cx = floor(x);\n    if (y >= H - S.h[cx] - 0.5) {\n      land(S, cx, S.sd[i]);\n      kill(S, i);\n    }\n  }\n  S.ca += st * 30;\n  while (S.ca >= 1) {\n    S.ca -= 1;\n    settle(S);\n  }\n  // A deep heap opens the floor under where the stream has been piling it;\n  // the floor closes once about half of it has run out or after twelve seconds.\n  // The slot widens with the pour so it always drains faster than it fills.\n  if (!S.drain && S.grains > HEAP) {\n    const m = round(cl(c, 12, W - 13)), w = round(4 + 2 * S.amount);\n    S.drain = 1;\n    S.dx0 = m - w;\n    S.dx1 = m + w;\n    S.dtime = 0;\n  } else if (S.drain) {\n    S.dtime += st;\n    if (S.grains \u003c LOW || S.dtime > 12) S.drain = 0;\n  }\n}\n\n// K1: the top layer of the heap leaps into the air.\nfunction burst(S) {\n  const G = S.G, h = S.h;\n  for (let x = 0; x \u003c W; x++)\n    for (let got = 0; got \u003c 6 && h[x] > 2; got++) {\n      const i = (H - h[x]) * W + x;\n      spawn(S, x + Math.random(), H - h[x] + Math.random(), (x - 32) * 0.4 + (Math.random() - 0.5) * 30, -75 - 95 * Math.random(), G[i]);\n      G[i] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.amount = cl(k[2], 1, 3);\n  S.size = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open on a heap already lying in dunes and the stream already falling.\n    for (let x = 0; x \u003c W; x++) {\n      const h = round(17 + 6 * sin(x * 0.09 + 1) + 4 * sin(x * 0.23));\n      for (let y = H - h; y \u003c H; y++) S.G[y * W + x] = floor(Math.random() * NS);\n      S.h[x] = h;\n      S.grains += h;\n    }\n    for (let i = 0; i \u003c 300; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, d * rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, base = S.base, fl = S.fl, G = S.G, lx = S.lx, ly = S.ly;\n  const hue = S.hue + 0.92;\n  for (let c = 0; c \u003c 4; c++) {\n    const p = PAL[c];\n    hsv(hue + p[0], p[1], p[2] * 255, base, c * 3);\n    hsv(hue + p[0], p[3], 255, fl, c * 3);\n  }\n  // A deep field, warmed a little round the lamp but kept under what an LED\n  // shows as lit, so every flake reads against black.\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) {\n      const g = 9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 1800);\n      buf[q] = (4 + g) * (0.4 + base[0] / 425);\n      buf[q + 1] = (3 + g) * (0.4 + base[1] / 425);\n      buf[q + 2] = (6 + g) * (0.4 + base[2] / 425);\n    }\n  // The heap: each grain its seed's colour, lit by the lamp and shaded with\n  // depth. A grain glints when its tilt sends the lamp to the eye: the tilt\n  // needed changes across the heap and the lamp moves, so the glints travel.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = H - S.h[x]; y \u003c H; y++) {\n      const i = y * W + x, g = G[i];\n      if (g \u003c 0) continue;\n      // Silver grains in the heap take the light tint: grey ones read as grit.\n      const dep = y - H + S.h[x], ex = x - lx, ey = y - ly, c = CLS[g] * 3, cb = c === 9 ? 3 : c;\n      const lamp = 0.6 + 0.5 * exp(-(ex * ex + ey * ey) / 900);\n      const v = (0.6 + 0.25 * JIT[g]) * lamp * (dep \u003c 1 ? 1.25 : max(0.6, 1 - 0.01 * dep));\n      const hx = TX[g] - ex * 0.0105, hy = TY[g] - ey * 0.0105;\n      const gl = exp(-(hx * hx + hy * hy) / 0.016) * (dep \u003c 6 ? 1 : 0.6);\n      const q = i * 3;\n      buf[q] += base[cb] * v + fl[c] * gl * 1.4;\n      buf[q + 1] += base[cb + 1] * v + fl[c + 1] * gl * 1.4;\n      buf[q + 2] += base[cb + 2] * v + fl[c + 2] * gl * 1.4;\n      if (gl > 0.35) star(buf, x + 0.5, y + 0.5, fl, c, gl * 0.8, 1 + S.size * 2);\n    }\n  // The falling flakes: a hexagon turned in the plane and thinned as it\n  // tumbles, flashing when its face swings through the angle that sends the\n  // lamp's light to the eye: once a turn, the back being matt.\n  const r0 = 0.55 + 1.05 * S.size;\n  for (let i = 0; i \u003c S.n; i++) {\n    const x = S.x[i], y = S.y[i];\n    if (y \u003c -3 || y > H + 3) continue;\n    const g = S.sd[i], c = CLS[g] * 3, a = S.ph[i];\n    const sq = max(0.22, abs(cos(a))), f = exp((cos(a - (x - lx) * 0.006 - (y - ly) * 0.003) - 1) / 0.035);\n    // A big flake is dimmer per LED, so a heavy stream of them does not burn white.\n    const r = r0 * (0.8 + 0.4 * JIT[g]), v = ((0.5 + 0.35 * JIT[g]) * (0.55 + 0.45 * sq)) / (0.7 + 0.3 * r0);\n    const ca = cos(S.al[i]), sa = sin(S.al[i]), e = r + 1.2;\n    // Small flakes keep their light when they land between LEDs.\n    const norm = r \u003c 1 ? 1.15 / (0.35 + r) : 1;\n    for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n      for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n        const px = X + 0.5 - x, py = Y + 0.5 - y;\n        const u = abs(px * ca + py * sa) / sq, w = abs(py * ca - px * sa);\n        const dh = max(w, w * 0.5 + u * 0.866) - r;\n        const cov = cl(0.5 - dh, 0, 1) * norm;\n        if (cov \u003c= 0) continue;\n        const q = (Y * W + X) * 3, b = cov * v, h = (cov * f * 1.5) / (0.6 + 0.4 * r0);\n        buf[q] += base[c] * b + fl[c] * h;\n        buf[q + 1] += base[c + 1] * b + fl[c + 1] * h;\n        buf[q + 2] += base[c + 2] * b + fl[c + 2] * h;\n      }\n    if (f > 0.3) star(buf, x, y, fl, c, f, 1.5 + r0 * 1.5);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// A flash spills its light into a four-pointed star round the flake, the arms\n// fading out over len LEDs, with a breath on the diagonals.\nfunction star(buf, x, y, fl, c, f, len) {\n  const cx = floor(x), cy = floor(y), n = Math.ceil(len);\n  for (let k = 1; k \u003c= n; k++) {\n    const w = f * 0.75 * (1 - (k - 1) / (len + 0.5)) ** 2;\n    if (w \u003c= 0.01) break;\n    add(buf, cx + k, cy, fl, c, w);\n    add(buf, cx - k, cy, fl, c, w);\n    add(buf, cx, cy + k, fl, c, w);\n    add(buf, cx, cy - k, fl, c, w);\n  }\n  const dw = f * 0.22;\n  add(buf, cx + 1, cy + 1, fl, c, dw);\n  add(buf, cx - 1, cy + 1, fl, c, dw);\n  add(buf, cx + 1, cy - 1, fl, c, dw);\n  add(buf, cx - 1, cy - 1, fl, c, dw);\n}\nfunction add(buf, x, y, fl, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const q = (y * W + x) * 3;\n  buf[q] += fl[c] * w;\n  buf[q + 1] += fl[c + 1] * w;\n  buf[q + 2] += fl[c + 2] * w;\n}\n\n// Bright pile-ups roll off toward white instead of clipping flat.\nfunction knee(v) {\n  return v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65);\n}\n","layer":{"id":"layer-glitter-fall","type":"code","name":"glitter-fall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glitter Fall\n// Family:  cosmetic\n// Idea:    Glitter pours from the top of a dark panel in a swaying stream, every tiny hexagonal flake tumbling and flashing as its face turns to the lamp, and piles into dunes at the bottom that glint as the lamp moves until the floor opens and the heap drains away like an hourglass.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after loose cosmetic glitter poured under a display lamp\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1\n//\n// Knob 1: Hue. The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall.\n// Knob 2: Speed. How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower.\n// Knob 3: Amount. How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast.\n// Knob 4: Size. The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble.\n// Buttons: K1 tap throws the top of the heap up into the air, and it flashes all the way back down.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, abs, sqrt, log, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Every flake carries one of NS seeds, which fix its colour class, how it lies\n// once it has landed and how bright it is. A grain in the heap keeps its seed,\n// so the heap's texture and glints stay put while the lamp moves.\nconst NS = 1024;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst TX = new Float32Array(NS), TY = new Float32Array(NS), JIT = new Float32Array(NS), CLS = new Uint8Array(NS);\nfor (let i = 0; i \u003c NS; i++) {\n  // A landed flake lies roughly flat: its tilt is a small Gaussian.\n  const r = sqrt(-2 * log(hash(i * 4) + 1e-6)) * 0.3, a = 2 * PI * hash(i * 4 + 1);\n  TX[i] = r * cos(a);\n  TY[i] = r * sin(a);\n  JIT[i] = hash(i * 4 + 2);\n  const c = hash(i * 4 + 3);\n  // Main colour, a lighter tint, a deeper shade, and silver.\n  CLS[i] = c \u003c 0.5 ? 0 : c \u003c 0.7 ? 1 : c \u003c 0.85 ? 2 : 3;\n}\n// Hue offset, saturation and value of each class, and how much of the hue a\n// flash keeps. Silver keeps a breath of the hue so it sits in the same mix.\nconst PAL = [\n  [0, 0.85, 0.8, 0.45],\n  [-0.03, 0.55, 0.95, 0.35],\n  [0.03, 1, 0.65, 0.55],\n  [0, 0.1, 0.5, 0.08],\n];\n\n// The heap's grains sit one to an LED, stacked in columns from the floor up.\n// HEAP is how many grains make the floor open, LOW how many it keeps.\nconst HEAP = 2600, LOW = 1150;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), ph: F(MAXP), om: F(MAXP), al: F(MAXP), sw: F(MAXP), vt: F(MAXP), sd: new Uint16Array(MAXP),\n    n: 0, G: new Int16Array(N).fill(-1), h: new Int16Array(W), grains: 0, T: 0, acc: 0, ca: 0, dir: 1,\n    drain: 0, dx0: 0, dx1: 0, dtime: 0, started: false,\n    buf: F(N * 3), base: F(12), fl: F(12), hue: 0, amount: 1, size: 0.06, lx: 32, ly: 80,\n  };\n}\n\n// One flake into the air at x, y.\nfunction spawn(S, x, y, vx, vy, seed) {\n  if (S.n >= MAXP) return;\n  const i = S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  // Its own spin: phase and rate, so each flash is a smooth function of time.\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.6 + 3 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n  S.al[i] = Math.random() * PI;\n  S.sw[i] = Math.random() * 2 * PI;\n  S.vt[i] = 12 + 6 * Math.random();\n  S.sd[i] = seed;\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.al[i] = S.al[j];\n  S.sw[i] = S.sw[j];\n  S.vt[i] = S.vt[j];\n  S.sd[i] = S.sd[j];\n}\n\n// Where the stream comes down: a centre that wanders the width of the panel.\nconst pour = (T) => 32 + 20 * sin(T * 0.19) + 7 * sin(T * 0.47 + 1.3);\n\n// Moves the top grain of column a onto the top of column b.\nfunction slide(S, a, b) {\n  const h = S.h, G = S.G, from = (H - h[a]) * W + a;\n  h[b]++;\n  G[(H - h[b]) * W + b] = G[from];\n  G[from] = -1;\n  h[a]--;\n}\n\n// The heap settles like sand: wherever a column stands two or more grains\n// above its neighbour, grains slip from its top down onto the neighbour's, at\n// most three a step, so a wall slumps to the angle of repose within a few\n// frames and the slope can be seen running.\nfunction settle(S) {\n  const h = S.h, G = S.G;\n  S.dir = -S.dir;\n  for (let k = 0; k \u003c W - 1; k++) {\n    const x = S.dir > 0 ? k : W - 2 - k;\n    let d = h[x] - h[x + 1];\n    // Some steps hold at 45 degrees and some do not, which roughens the slopes.\n    const lim = Math.random() \u003c 0.5 ? 2 : 3;\n    if (d >= lim) for (let n = min(3, d >> 1); n > 0; n--) slide(S, x, x + 1);\n    else if (-d >= lim) for (let n = min(3, -d >> 1); n > 0; n--) slide(S, x + 1, x);\n  }\n  // An open floor lets the grains over the slot fall out of the bottom: the\n  // whole column sinks by one, so its glitter is seen running down.\n  if (S.drain)\n    for (let x = S.dx0; x \u003c= S.dx1; x++) {\n      if (h[x] \u003c= 0 || Math.random() > 0.8) continue;\n      for (let y = H - 1; y > H - h[x]; y--) G[y * W + x] = G[(y - 1) * W + x];\n      G[(H - h[x]) * W + x] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\n// Lands a falling flake on top of column cx.\nfunction land(S, cx, seed) {\n  if (S.h[cx] >= H - 1) return;\n  S.h[cx]++;\n  S.G[(H - S.h[cx]) * W + cx] = seed;\n  S.grains++;\n}\n\nfunction step(S, st) {\n  S.T += st;\n  const T = S.T;\n  // The lamp drifts round the lower two thirds of the panel.\n  S.lx = 32 + 34 * sin(T * 0.29);\n  S.ly = 84 + 34 * sin(T * 0.21 + 0.7);\n  // Pouring: a little over half the glitter comes down in the stream, the\n  // rest is sprinkled across the whole width.\n  S.acc += st * 80 * S.amount;\n  const c = pour(T);\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    const x = Math.random() \u003c 0.55 ? c + (Math.random() + Math.random() - 1) * 9 : Math.random() * W;\n    spawn(S, cl(x, 0, W - 0.01), -2 * Math.random(), 0, 12, floor(Math.random() * NS));\n  }\n  // Glitter falls slowly, rocking from side to side on its way down.\n  const k = min(1, 1.5 * st), air = 3 * sin(T * 0.37);\n  for (let i = S.n - 1; i >= 0; i--) {\n    S.sw[i] += st * 2;\n    S.vy[i] += (S.vt[i] - S.vy[i]) * k;\n    S.vx[i] += (air + 5 * sin(S.sw[i]) - S.vx[i]) * k;\n    S.ph[i] += S.om[i] * st;\n    const oy = S.y[i];\n    let x = S.x[i] + S.vx[i] * st;\n    const y = oy + S.vy[i] * st;\n    if (x \u003c 0) (x = -x), (S.vx[i] = abs(S.vx[i]));\n    if (x >= W) (x = 2 * W - 0.01 - x), (S.vx[i] = -abs(S.vx[i]));\n    S.x[i] = x;\n    S.y[i] = y;\n    if (S.vy[i] \u003c= 0 || y \u003c 0) continue;\n    // It lands once it reaches the top of the heap in its column.\n    const cx = floor(x);\n    if (y >= H - S.h[cx] - 0.5) {\n      land(S, cx, S.sd[i]);\n      kill(S, i);\n    }\n  }\n  S.ca += st * 30;\n  while (S.ca >= 1) {\n    S.ca -= 1;\n    settle(S);\n  }\n  // A deep heap opens the floor under where the stream has been piling it;\n  // the floor closes once about half of it has run out or after twelve seconds.\n  // The slot widens with the pour so it always drains faster than it fills.\n  if (!S.drain && S.grains > HEAP) {\n    const m = round(cl(c, 12, W - 13)), w = round(4 + 2 * S.amount);\n    S.drain = 1;\n    S.dx0 = m - w;\n    S.dx1 = m + w;\n    S.dtime = 0;\n  } else if (S.drain) {\n    S.dtime += st;\n    if (S.grains \u003c LOW || S.dtime > 12) S.drain = 0;\n  }\n}\n\n// K1: the top layer of the heap leaps into the air.\nfunction burst(S) {\n  const G = S.G, h = S.h;\n  for (let x = 0; x \u003c W; x++)\n    for (let got = 0; got \u003c 6 && h[x] > 2; got++) {\n      const i = (H - h[x]) * W + x;\n      spawn(S, x + Math.random(), H - h[x] + Math.random(), (x - 32) * 0.4 + (Math.random() - 0.5) * 30, -75 - 95 * Math.random(), G[i]);\n      G[i] = -1;\n      h[x]--;\n      S.grains--;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.amount = cl(k[2], 1, 3);\n  S.size = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open on a heap already lying in dunes and the stream already falling.\n    for (let x = 0; x \u003c W; x++) {\n      const h = round(17 + 6 * sin(x * 0.09 + 1) + 4 * sin(x * 0.23));\n      for (let y = H - h; y \u003c H; y++) S.G[y * W + x] = floor(Math.random() * NS);\n      S.h[x] = h;\n      S.grains += h;\n    }\n    for (let i = 0; i \u003c 300; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(S);\n  step(S, d * rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, base = S.base, fl = S.fl, G = S.G, lx = S.lx, ly = S.ly;\n  const hue = S.hue + 0.92;\n  for (let c = 0; c \u003c 4; c++) {\n    const p = PAL[c];\n    hsv(hue + p[0], p[1], p[2] * 255, base, c * 3);\n    hsv(hue + p[0], p[3], 255, fl, c * 3);\n  }\n  // A deep field, warmed a little round the lamp but kept under what an LED\n  // shows as lit, so every flake reads against black.\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) {\n      const g = 9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 1800);\n      buf[q] = (4 + g) * (0.4 + base[0] / 425);\n      buf[q + 1] = (3 + g) * (0.4 + base[1] / 425);\n      buf[q + 2] = (6 + g) * (0.4 + base[2] / 425);\n    }\n  // The heap: each grain its seed's colour, lit by the lamp and shaded with\n  // depth. A grain glints when its tilt sends the lamp to the eye: the tilt\n  // needed changes across the heap and the lamp moves, so the glints travel.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = H - S.h[x]; y \u003c H; y++) {\n      const i = y * W + x, g = G[i];\n      if (g \u003c 0) continue;\n      // Silver grains in the heap take the light tint: grey ones read as grit.\n      const dep = y - H + S.h[x], ex = x - lx, ey = y - ly, c = CLS[g] * 3, cb = c === 9 ? 3 : c;\n      const lamp = 0.6 + 0.5 * exp(-(ex * ex + ey * ey) / 900);\n      const v = (0.6 + 0.25 * JIT[g]) * lamp * (dep \u003c 1 ? 1.25 : max(0.6, 1 - 0.01 * dep));\n      const hx = TX[g] - ex * 0.0105, hy = TY[g] - ey * 0.0105;\n      const gl = exp(-(hx * hx + hy * hy) / 0.016) * (dep \u003c 6 ? 1 : 0.6);\n      const q = i * 3;\n      buf[q] += base[cb] * v + fl[c] * gl * 1.4;\n      buf[q + 1] += base[cb + 1] * v + fl[c + 1] * gl * 1.4;\n      buf[q + 2] += base[cb + 2] * v + fl[c + 2] * gl * 1.4;\n      if (gl > 0.35) star(buf, x + 0.5, y + 0.5, fl, c, gl * 0.8, 1 + S.size * 2);\n    }\n  // The falling flakes: a hexagon turned in the plane and thinned as it\n  // tumbles, flashing when its face swings through the angle that sends the\n  // lamp's light to the eye: once a turn, the back being matt.\n  const r0 = 0.55 + 1.05 * S.size;\n  for (let i = 0; i \u003c S.n; i++) {\n    const x = S.x[i], y = S.y[i];\n    if (y \u003c -3 || y > H + 3) continue;\n    const g = S.sd[i], c = CLS[g] * 3, a = S.ph[i];\n    const sq = max(0.22, abs(cos(a))), f = exp((cos(a - (x - lx) * 0.006 - (y - ly) * 0.003) - 1) / 0.035);\n    // A big flake is dimmer per LED, so a heavy stream of them does not burn white.\n    const r = r0 * (0.8 + 0.4 * JIT[g]), v = ((0.5 + 0.35 * JIT[g]) * (0.55 + 0.45 * sq)) / (0.7 + 0.3 * r0);\n    const ca = cos(S.al[i]), sa = sin(S.al[i]), e = r + 1.2;\n    // Small flakes keep their light when they land between LEDs.\n    const norm = r \u003c 1 ? 1.15 / (0.35 + r) : 1;\n    for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n      for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n        const px = X + 0.5 - x, py = Y + 0.5 - y;\n        const u = abs(px * ca + py * sa) / sq, w = abs(py * ca - px * sa);\n        const dh = max(w, w * 0.5 + u * 0.866) - r;\n        const cov = cl(0.5 - dh, 0, 1) * norm;\n        if (cov \u003c= 0) continue;\n        const q = (Y * W + X) * 3, b = cov * v, h = (cov * f * 1.5) / (0.6 + 0.4 * r0);\n        buf[q] += base[c] * b + fl[c] * h;\n        buf[q + 1] += base[c + 1] * b + fl[c + 1] * h;\n        buf[q + 2] += base[c + 2] * b + fl[c + 2] * h;\n      }\n    if (f > 0.3) star(buf, x, y, fl, c, f, 1.5 + r0 * 1.5);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\n// A flash spills its light into a four-pointed star round the flake, the arms\n// fading out over len LEDs, with a breath on the diagonals.\nfunction star(buf, x, y, fl, c, f, len) {\n  const cx = floor(x), cy = floor(y), n = Math.ceil(len);\n  for (let k = 1; k \u003c= n; k++) {\n    const w = f * 0.75 * (1 - (k - 1) / (len + 0.5)) ** 2;\n    if (w \u003c= 0.01) break;\n    add(buf, cx + k, cy, fl, c, w);\n    add(buf, cx - k, cy, fl, c, w);\n    add(buf, cx, cy + k, fl, c, w);\n    add(buf, cx, cy - k, fl, c, w);\n  }\n  const dw = f * 0.22;\n  add(buf, cx + 1, cy + 1, fl, c, dw);\n  add(buf, cx - 1, cy + 1, fl, c, dw);\n  add(buf, cx + 1, cy - 1, fl, c, dw);\n  add(buf, cx - 1, cy - 1, fl, c, dw);\n}\nfunction add(buf, x, y, fl, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const q = (y * W + x) * 3;\n  buf[q] += fl[c] * w;\n  buf[q + 1] += fl[c + 1] * w;\n  buf[q + 2] += fl[c + 2] * w;\n}\n\n// Bright pile-ups roll off toward white instead of clipping flat.\nfunction knee(v) {\n  return v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Amount=1..3, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the glitter, all the way round the wheel from rose pink at 0; the silver flakes in the mix stay silver while they fall."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything happens: at 2 a flake takes about eight seconds to fall the 128 rows and turns over every two seconds or so; at 0.2 it drifts down ten times slower."},{"name":"Amount","min":1,"max":3,"about":"How much glitter pours, from a steady shower at 1 to a heavy pour at 3 that fills the panel with flakes and builds the heap three times as fast."},{"name":"Size","min":0,"max":1,"about":"The flakes, from fine glitter one LED across near 0 to chunky hexagons three LEDs across at 1 that visibly thin to an edge as they tumble."}],"start":[0,2,1,0.06],"measures":{"motion":1.3817,"detail":0.0894,"edges":0.4622,"complexity":1.3664,"coverage":0.3835,"colour":0.1675,"drift":0.0908},"knobResponse":[0.0974,0.131,0.1719,0.0961]},{"slug":"glyph-rain","title":"Glyph Rain","family":"type","round":1,"note":"3×5 글자가 줄마다 떨어지며 바뀌어요. 비가 지나간 글자는 옛 단말기의 초록 형광처럼 몇 초 남아 흐려져서, 아무 말도 하지 않는 글이 화면을 채워요.","idea":"Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.","buttons":"K4 tap switches between small glyphs and double-size ones.","code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-glyph-rain","type":"code","name":"glyph-rain","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rain around the colour wheel from phosphor green; the heads stay close to white."},{"name":"Fall","min":0.3,"max":6,"about":"How fast the columns fall, each at its own pace around this one."},{"name":"Density","min":0,"max":1,"about":"How many columns run and how long their tails hang, up to a full wall of text."},{"name":"Mutate","min":0,"max":1,"about":"How often a glyph already written turns into another; turned all the way, the whole wall boils."}],"start":[0,2,0,0.06],"measures":{"motion":0.2257,"detail":0.0998,"edges":0.7469,"complexity":0.2343,"coverage":0.2152,"colour":0.1998,"drift":0.0956},"knobResponse":[0.0655,0.0718,0.1045,0.0664]},{"slug":"gold-leaf","title":"Gold Leaf","family":"cosmetic","round":33,"note":"맑은 세럼에 구겨진 금박 조각 마흔 개가 떠서 위아래 두 대류 칸을 따라 천천히 돌 뿐 가라앉지 않아요. 조각이 뒤집힐 때마다 빛을 향한 면이 흰 금빛으로 번쩍이고 돌아선 면은 짙은 금으로 내려가며, 먼 조각은 작고 흐려요. K1 은 색상환을 다 돌아 금박을 장밋빛 금이나 푸른 박으로 바꾸고, 누르면 세럼을 저어 조각이 느린 소용돌이로 돌며 다섯 배 빨리 뒤집혀요.","idea":"Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.","buttons":"K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.","code":"// ===== Patternflow pattern =====\n// Title:   Gold Leaf\n// Family:  cosmetic\n// Idea:    Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a serum with flakes of gold leaf floating in it\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1\n//\n// Knob 1: Hue. Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown.\n// Knob 2: Speed. How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Flakes. How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil.\n// Knob 4: Size. How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one.\n// Buttons: K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXF = 120, SS = 3;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// The light: from the upper left and in front. Y runs down the panel, the\n// viewer looks along -z.\nconst LX = -0.4, LY = -0.7, LZ = 0.6, LN = sqrt(LX * LX + LY * LY + LZ * LZ);\nconst L = [LX / LN, LY / LN, LZ / LN];\nconst HV = [L[0], L[1], L[2] + 1], HN = sqrt(HV[0] ** 2 + HV[1] ** 2 + HV[2] ** 2);\nconst HH = [HV[0] / HN, HV[1] / HN, HV[2] / HN];\n\n// A torn flake: 6 to 9 points round a ragged outline, each pushed up or down\n// a little, fanned from an off-centre middle point into facets. The heights\n// are the crumple: every facet tilts its own way.\nfunction makeFlake() {\n  const rnd = Math.random, k = 6 + floor(rnd() * 4), e = 0.6 + 0.4 * rnd(), ea = rnd() * PI;\n  const v = [(rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3];\n  for (let i = 0; i \u003c k; i++) {\n    const a = (2 * PI * (i + 0.7 * (rnd() - 0.5))) / k, r = 0.55 + 0.45 * rnd();\n    const x = r * cos(a), y = r * sin(a) * e;\n    v.push(x * cos(ea) - y * sin(ea), x * sin(ea) + y * cos(ea), (rnd() - 0.5) * 0.8);\n  }\n  const nrm = [];\n  for (let i = 0; i \u003c k; i++) {\n    const a = 1 + i, b = 1 + ((i + 1) % k);\n    const ux = v[a * 3] - v[0], uy = v[a * 3 + 1] - v[1], uz = v[a * 3 + 2] - v[2];\n    const wx = v[b * 3] - v[0], wy = v[b * 3 + 1] - v[1], wz = v[b * 3 + 2] - v[2];\n    let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n    const l = sqrt(nx * nx + ny * ny + nz * nz) || 1;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    nrm.push(nx / l, ny / l, nz / l);\n  }\n  const ax = rnd() - 0.5, ay = rnd() - 0.5, az = rnd() - 0.5, al = sqrt(ax * ax + ay * ay + az * az) || 1;\n  const q0 = [rnd() - 0.5, rnd() - 0.5, rnd() - 0.5, rnd() - 0.5], ql = sqrt(q0.reduce((s, c) => s + c * c, 0)) || 1;\n  return {\n    k, v: new Float32Array(v), n: new Float32Array(nrm),\n    x: 3 + rnd() * (W - 6), y: 3 + rnd() * (H - 6), z: rnd(), sz: 0.75 + 0.5 * rnd(),\n    q: q0.map((c) => c / ql), axis: [ax / al, ay / al, az / al], spin: (0.5 + rnd()) * (rnd() \u003c 0.5 ? -1 : 1), ph: rnd() * 2 * PI,\n  };\n}\n\nexport function setup(params) {\n  const flakes = [];\n  for (let i = 0; i \u003c MAXF; i++) flakes.push(makeFlake());\n  params.s = {\n    flakes, t: 0, stir: 0, stirT: -1, hue: 0, count: 40, size: 0.06,\n    far: new Float32Array(N * 4), tmp: new Float32Array(N * 4), frame: new Float32Array(N * 3),\n    sub: new Int16Array(64 * 64 * SS * SS), lut: new Float32Array(256 * 3), lutHue: NaN, serum: [],\n  };\n}\n\n// The current: two slow convection cells stacked in the panel, from the\n// stream function sin(pi x/W) sin(2 pi y/H), which is zero on all four walls,\n// so the flakes go round and never leave. A weaker mode of smaller cells\n// swells and fades over a minute, so no flake runs the same loop twice.\n// Nothing pulls them down: the flakes float, they never settle.\nfunction flow(x, y, t, out) {\n  const X = (PI * x) / W, Y = (2 * PI * y) / H, s = 0.35 * sin(t * 0.11);\n  out[0] = sin(X) * cos(Y) + s * sin(2 * X) * 1.5 * cos(1.5 * Y) * 0.5;\n  out[1] = -cos(X) * sin(Y) - s * 2 * cos(2 * X) * sin(1.5 * Y) * 0.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 40, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.hue = k[0];\n  P.count = floor(cl(k[2], 40, 120));\n  P.size = cl(k[3], 0, 1);\n  P.t += d;\n  if (input.btnPressed && input.btnPressed[0]) P.stirT = 0;\n  // The stir: a second to wind up, then it dies away over about eight.\n  if (P.stirT >= 0) {\n    P.stirT += d;\n    P.stir = P.stirT \u003c 1 ? sm(0, 1, P.stirT) : exp(-(P.stirT - 1) / 3.5);\n    if (P.stirT > 20) (P.stirT = -1), (P.stir = 0);\n  }\n  const v = [0, 0], S = P.stir;\n  for (let i = 0; i \u003c MAXF; i++) {\n    const f = P.flakes[i];\n    flow(f.x, f.y, P.t, v);\n    // Near flakes move faster across the panel than far ones.\n    const par = 0.6 + 0.6 * f.z, sp = 2.6 * par;\n    let vx = v[0] * sp + 0.4 * sin(P.t * 0.5 + f.ph), vy = v[1] * sp + 0.4 * cos(P.t * 0.37 + f.ph * 1.3);\n    if (S > 0) {\n      // The vortex runs round ellipses the shape of the panel, fastest\n      // half way out, so the flakes swing round without piling on a wall.\n      const ex = (f.x - W / 2) / (W / 2), ey = (f.y - H / 2) / (H / 2), r = sqrt(ex * ex + ey * ey);\n      const g = S * 1.6 * cl(1.15 - r, 0, 1) * par;\n      vx += g * -0.5 * (f.y - H / 2);\n      vy += g * 2 * (f.x - W / 2);\n    }\n    f.x = cl(f.x + vx * d, 1, W - 2);\n    f.y = cl(f.y + vy * d, 1, H - 2);\n    // Tumble: turn about the flake's own axis, which wanders slowly.\n    const ang = f.spin * (1 + 4 * S) * d, a = f.axis;\n    a[0] += 0.3 * sin(P.t * 0.23 + f.ph) * d;\n    a[1] += 0.3 * cos(P.t * 0.19 + f.ph * 2) * d;\n    const al = sqrt(a[0] * a[0] + a[1] * a[1] + a[2] * a[2]);\n    a[0] /= al;\n    a[1] /= al;\n    a[2] /= al;\n    const sh = sin(ang / 2), ch = cos(ang / 2), dq = [ch, a[0] * sh, a[1] * sh, a[2] * sh], q = f.q;\n    const n0 = dq[0] * q[0] - dq[1] * q[1] - dq[2] * q[2] - dq[3] * q[3];\n    const n1 = dq[0] * q[1] + dq[1] * q[0] + dq[2] * q[3] - dq[3] * q[2];\n    const n2 = dq[0] * q[2] - dq[1] * q[3] + dq[2] * q[0] + dq[3] * q[1];\n    const n3 = dq[0] * q[3] + dq[1] * q[2] - dq[2] * q[1] + dq[3] * q[0];\n    const ql = sqrt(n0 * n0 + n1 * n1 + n2 * n2 + n3 * n3);\n    q[0] = n0 / ql;\n    q[1] = n1 / ql;\n    q[2] = n2 / ql;\n    q[3] = n3 / ql;\n  }\n}\n\n// The foil's colour against its light, 0 to 1.3 over 256 steps: deep, gold,\n// pale gold, white-gold.\nfunction buildLut(P) {\n  const h = P.hue + 0.115 - floor(P.hue + 0.115);\n  // Round orange and yellow the deep end stays bright and saturated so it\n  // reads as dark gold, not brown; round red and pink the foil is paler, rose\n  // gold rather than red.\n  const warm = sm(0.0, 0.05, h) * (1 - sm(0.17, 0.24, h)), rose = 1 - sm(0.02, 0.07, abs(h - 0.995 + (h \u003c 0.5 ? 1 : 0)));\n  const sat = 1 - 0.4 * rose, lift = max(warm, rose);\n  const stops = [\n    [0, hsv(h - 0.025, 0.95 * sat, 0.4 + 0.18 * lift)],\n    [0.35, hsv(h - 0.01, 0.88 * sat, 0.72 + 0.12 * lift)],\n    [0.7, hsv(h + 0.005, 0.68 * sat, 1)],\n    [1.0, hsv(h + 0.01, 0.34 * sat, 1)],\n    [1.3, hsv(h + 0.01, 0.06, 1)],\n  ];\n  for (let i = 0; i \u003c 256; i++) {\n    const b = (i / 255) * 1.3;\n    let j = 0;\n    while (j \u003c stops.length - 2 && b > stops[j + 1][0]) j++;\n    const [b0, c0] = stops[j], [b1, c1] = stops[j + 1], f = cl((b - b0) / (b1 - b0), 0, 1);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = (c0[c] + (c1[c] - c0[c]) * f) * 255;\n  }\n  // The serum: the foil's hue, faint and greyed, lighter at the top.\n  const top = hsv(h - 0.02, (0.5 - 0.2 * warm) * sat, 0.11), bot = hsv(h - 0.02, (0.6 - 0.2 * warm) * sat, 0.025);\n  const lit = hsv(h + 0.01, 0.3 * sat, 1);\n  P.serum = [top[0] * 255, top[1] * 255, top[2] * 255, bot[0] * 255, bot[1] * 255, bot[2] * 255, lit[0] * 255, lit[1] * 255, lit[2] * 255];\n  P.lutHue = P.hue;\n}\n\nconst rot = new Float32Array(9);\nfunction quatMat(q) {\n  const [w, x, y, z] = q;\n  rot[0] = 1 - 2 * (y * y + z * z); rot[1] = 2 * (x * y - w * z); rot[2] = 2 * (x * z + w * y);\n  rot[3] = 2 * (x * y + w * z); rot[4] = 1 - 2 * (x * x + z * z); rot[5] = 2 * (y * z - w * x);\n  rot[6] = 2 * (x * z - w * y); rot[7] = 2 * (y * z + w * x); rot[8] = 1 - 2 * (x * x + y * y);\n}\n\nconst PX = new Float32Array(10 * 3), FC = new Float32Array(9 * 4), ORD = [];\n\n// One flake into buffer buf (RGB, or RGBA premultiplied when far), over what\n// is there. Each LED takes 3 x 3 samples, 2 x 2 on a big flake; a facet\n// nearer the viewer covers the ones behind it, and the share of samples a\n// flake covers is how much of the LED it takes.\nfunction drawFlake(P, f, buf, rgba, dim, glints) {\n  quatMat(f.q);\n  const s = (6.5 + 6 * P.size) * f.sz * (0.5 + 0.7 * f.z), k = f.k, v = f.v, n = f.n, lut = P.lut;\n  let x0 = W, x1 = 0, y0 = H, y1 = 0;\n  for (let i = 0; i \u003c= k; i++) {\n    const a = v[i * 3], b = v[i * 3 + 1], c = v[i * 3 + 2];\n    const X = f.x + s * (rot[0] * a + rot[1] * b + rot[2] * c), Y = f.y + s * (rot[3] * a + rot[4] * b + rot[5] * c);\n    PX[i * 3] = X;\n    PX[i * 3 + 1] = Y;\n    PX[i * 3 + 2] = rot[6] * a + rot[7] * b + rot[8] * c;\n    x0 = min(x0, X);\n    x1 = max(x1, X);\n    y0 = min(y0, Y);\n    y1 = max(y1, Y);\n  }\n  // Big flakes need fewer samples to an LED for the same smooth edge.\n  const ss = s > 7 ? 2 : SS;\n  const bx = max(0, floor(x0)), by = max(0, floor(y0)), bw = min(W, floor(x1) + 1) - bx, bh = min(H, floor(y1) + 1) - by;\n  if (bw \u003c= 0 || bh \u003c= 0 || bw > 64 || bh > 64) return;\n  const sw = bw * ss, sub = P.sub;\n  sub.fill(-1, 0, sw * bh * ss);\n  ORD.length = 0;\n  for (let i = 0; i \u003c k; i++) {\n    // The facet's normal turned with the flake, towards the viewer: foil\n    // shines from both faces.\n    const a = n[i * 3], b = n[i * 3 + 1], c = n[i * 3 + 2];\n    let nx = rot[0] * a + rot[1] * b + rot[2] * c, ny = rot[3] * a + rot[4] * b + rot[5] * c, nz = rot[6] * a + rot[7] * b + rot[8] * c;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    const spec = max(0, nx * HH[0] + ny * HH[1] + nz * HH[2]) ** 18, diff = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n    // A little base light, the lamp's diffuse share, the glow of the serum\n    // above for facets tipped up, and a narrow highlight, cos^18, half\n    // strength 16 degrees off the mirror angle: a facet flashes as it\n    // sweeps through and its neighbours, tilted their own ways, stay deep.\n    const env = 0.5 - 0.5 * ny;\n    const br = (0.1 + 0.45 * diff + 0.25 * env + 0.95 * spec) * dim;\n    FC[i * 4] = cl(floor((br / 1.3) * 255), 0, 255);\n    FC[i * 4 + 1] = spec;\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    FC[i * 4 + 2] = (PX[2] + PX[j1 * 3 + 2] + PX[j2 * 3 + 2]) / 3;\n    ORD.push(i);\n  }\n  ORD.sort((a, b) => FC[a * 4 + 2] - FC[b * 4 + 2]);\n  for (const i of ORD) {\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    const ax = PX[0], ay = PX[1], bxx = PX[j1 * 3], byy = PX[j1 * 3 + 1], cx = PX[j2 * 3], cy = PX[j2 * 3 + 1];\n    const area = (bxx - ax) * (cy - ay) - (byy - ay) * (cx - ax);\n    if (abs(area) \u003c 1e-4) continue;\n    const sg = area > 0 ? 1 : -1;\n    const sx0 = max(0, floor((min(ax, bxx, cx) - bx) * ss)), sx1 = min(sw - 1, floor((max(ax, bxx, cx) - bx) * ss));\n    const sy0 = max(0, floor((min(ay, byy, cy) - by) * ss)), sy1 = min(bh * ss - 1, floor((max(ay, byy, cy) - by) * ss));\n    for (let sy = sy0; sy \u003c= sy1; sy++) {\n      const py = by + (sy + 0.5) / ss;\n      for (let sx = sx0; sx \u003c= sx1; sx++) {\n        const px = bx + (sx + 0.5) / ss;\n        const e0 = ((bxx - ax) * (py - ay) - (byy - ay) * (px - ax)) * sg;\n        const e1 = ((cx - bxx) * (py - byy) - (cy - byy) * (px - bxx)) * sg;\n        const e2 = ((ax - cx) * (py - cy) - (ay - cy) * (px - cx)) * sg;\n        if (e0 >= 0 && e1 >= 0 && e2 >= 0) sub[sy * sw + sx] = i;\n      }\n    }\n    if (glints && FC[i * 4 + 1] > 0.6) glints.push((ax + bxx + cx) / 3, (ay + byy + cy) / 3, FC[i * 4 + 1]);\n  }\n  for (let y = 0; y \u003c bh; y++)\n    for (let x = 0; x \u003c bw; x++) {\n      let r = 0, g = 0, b = 0, c = 0;\n      for (let u = 0; u \u003c ss; u++)\n        for (let w = 0; w \u003c ss; w++) {\n          const i = sub[(y * ss + u) * sw + x * ss + w];\n          if (i \u003c 0) continue;\n          const li = FC[i * 4] * 3;\n          r += lut[li];\n          g += lut[li + 1];\n          b += lut[li + 2];\n          c++;\n        }\n      if (!c) continue;\n      const al = c / (ss * ss), p = (by + y) * W + bx + x;\n      if (rgba) {\n        const o = p * 4;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n        buf[o + 3] = buf[o + 3] * (1 - al) + al;\n      } else {\n        const o = p * 3;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const fr = P.frame, far = P.far, tmp = P.tmp, t = P.t, sv = P.serum;\n  // The serum: a soft gradient and a slow caustic shimmer that fades with\n  // depth, light let in from the top.\n  const colw = P.colw || (P.colw = new Float32Array(W));\n  for (let x = 0; x \u003c W; x++) colw[x] = 1.5 * sin(x * 0.17 - t * 0.31);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / (H - 1), dep = exp(-y / 70), roww = 1.7 * sin(y * 0.11 + t * 0.4) + t * 0.23;\n    for (let x = 0; x \u003c W; x++) {\n      const a = sin(x * 0.19 + roww), b = sin(y * 0.13 + colw[x] - t * 0.17);\n      const c = a + b, caus = exp(-c * c * 6) * 0.9 * dep, o = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) fr[o + ch] = sv[ch] * (1 - g) + sv[3 + ch] * g + caus * 0.07 * sv[6 + ch];\n    }\n  }\n  const fl = P.flakes.slice(0, P.count).sort((a, b) => a.z - b.z);\n  far.fill(0);\n  let i = 0;\n  // Far flakes, dimmer, into their own layer, softened by a 1-2-1 blur.\n  for (; i \u003c fl.length && fl[i].z \u003c 0.35; i++) drawFlake(P, fl[i], far, true, 0.6 + 0.6 * fl[i].z, null);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) tmp[o + c] = (far[l + c] + 2 * far[o + c] + far[r + c]) / 4;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, u = y > 0 ? o - W * 4 : o, dn = y \u003c H - 1 ? o + W * 4 : o, f3 = (y * W + x) * 3;\n      const a = (tmp[u + 3] + 2 * tmp[o + 3] + tmp[dn + 3]) / 4;\n      for (let c = 0; c \u003c 3; c++) fr[f3 + c] = fr[f3 + c] * (1 - a) + (tmp[u + c] + 2 * tmp[o + c] + tmp[dn + c]) / 4;\n    }\n  // Near flakes, sharp, over the top; their brightest facets throw a glint.\n  const glints = [];\n  for (; i \u003c fl.length; i++) drawFlake(P, fl[i], fr, false, 1, fl[i].z > 0.6 ? glints : null);\n  for (let g = 0; g \u003c glints.length; g += 3) {\n    const gx = floor(glints[g]), gy = floor(glints[g + 1]), s = (glints[g + 2] - 0.6) / 0.4;\n    for (let r = -2; r \u003c= 2; r++) {\n      const a = s * (r === 0 ? 1 : abs(r) === 1 ? 0.55 : 0.22);\n      for (const [x, y] of r === 0 ? [[gx, gy]] : [[gx + r, gy], [gx, gy + r]]) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const o = (y * W + x) * 3;\n        fr[o] += 255 * a;\n        fr[o + 1] += 250 * a;\n        fr[o + 2] += 225 * a;\n      }\n    }\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, fr[o]), min(255, fr[o + 1]), min(255, fr[o + 2]));\n}\n","layer":{"id":"layer-gold-leaf","type":"code","name":"gold-leaf","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gold Leaf\n// Family:  cosmetic\n// Idea:    Crumpled flakes of gold foil hang in a clear tinted serum and drift round a slow convection current without ever settling, each torn flake tumbling so its crumple facets flash gold-white one after another as they face the light and drop to deep gold as they turn away, near flakes large and sharp, far ones small, dim and soft.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a serum with flakes of gold leaf floating in it\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1\n//\n// Knob 1: Hue. Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown.\n// Knob 2: Speed. How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Flakes. How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil.\n// Knob 4: Size. How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one.\n// Buttons: K1 tap stirs the serum: within a second the flakes are swept into a slow vortex the shape of the panel, a turn every 5 to 10 seconds, tumbling up to five times faster and flashing all over; over the next eight seconds it dies away and the convection takes them back.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXF = 120, SS = 3;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// The light: from the upper left and in front. Y runs down the panel, the\n// viewer looks along -z.\nconst LX = -0.4, LY = -0.7, LZ = 0.6, LN = sqrt(LX * LX + LY * LY + LZ * LZ);\nconst L = [LX / LN, LY / LN, LZ / LN];\nconst HV = [L[0], L[1], L[2] + 1], HN = sqrt(HV[0] ** 2 + HV[1] ** 2 + HV[2] ** 2);\nconst HH = [HV[0] / HN, HV[1] / HN, HV[2] / HN];\n\n// A torn flake: 6 to 9 points round a ragged outline, each pushed up or down\n// a little, fanned from an off-centre middle point into facets. The heights\n// are the crumple: every facet tilts its own way.\nfunction makeFlake() {\n  const rnd = Math.random, k = 6 + floor(rnd() * 4), e = 0.6 + 0.4 * rnd(), ea = rnd() * PI;\n  const v = [(rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3, (rnd() - 0.5) * 0.3];\n  for (let i = 0; i \u003c k; i++) {\n    const a = (2 * PI * (i + 0.7 * (rnd() - 0.5))) / k, r = 0.55 + 0.45 * rnd();\n    const x = r * cos(a), y = r * sin(a) * e;\n    v.push(x * cos(ea) - y * sin(ea), x * sin(ea) + y * cos(ea), (rnd() - 0.5) * 0.8);\n  }\n  const nrm = [];\n  for (let i = 0; i \u003c k; i++) {\n    const a = 1 + i, b = 1 + ((i + 1) % k);\n    const ux = v[a * 3] - v[0], uy = v[a * 3 + 1] - v[1], uz = v[a * 3 + 2] - v[2];\n    const wx = v[b * 3] - v[0], wy = v[b * 3 + 1] - v[1], wz = v[b * 3 + 2] - v[2];\n    let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n    const l = sqrt(nx * nx + ny * ny + nz * nz) || 1;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    nrm.push(nx / l, ny / l, nz / l);\n  }\n  const ax = rnd() - 0.5, ay = rnd() - 0.5, az = rnd() - 0.5, al = sqrt(ax * ax + ay * ay + az * az) || 1;\n  const q0 = [rnd() - 0.5, rnd() - 0.5, rnd() - 0.5, rnd() - 0.5], ql = sqrt(q0.reduce((s, c) => s + c * c, 0)) || 1;\n  return {\n    k, v: new Float32Array(v), n: new Float32Array(nrm),\n    x: 3 + rnd() * (W - 6), y: 3 + rnd() * (H - 6), z: rnd(), sz: 0.75 + 0.5 * rnd(),\n    q: q0.map((c) => c / ql), axis: [ax / al, ay / al, az / al], spin: (0.5 + rnd()) * (rnd() \u003c 0.5 ? -1 : 1), ph: rnd() * 2 * PI,\n  };\n}\n\nexport function setup(params) {\n  const flakes = [];\n  for (let i = 0; i \u003c MAXF; i++) flakes.push(makeFlake());\n  params.s = {\n    flakes, t: 0, stir: 0, stirT: -1, hue: 0, count: 40, size: 0.06,\n    far: new Float32Array(N * 4), tmp: new Float32Array(N * 4), frame: new Float32Array(N * 3),\n    sub: new Int16Array(64 * 64 * SS * SS), lut: new Float32Array(256 * 3), lutHue: NaN, serum: [],\n  };\n}\n\n// The current: two slow convection cells stacked in the panel, from the\n// stream function sin(pi x/W) sin(2 pi y/H), which is zero on all four walls,\n// so the flakes go round and never leave. A weaker mode of smaller cells\n// swells and fades over a minute, so no flake runs the same loop twice.\n// Nothing pulls them down: the flakes float, they never settle.\nfunction flow(x, y, t, out) {\n  const X = (PI * x) / W, Y = (2 * PI * y) / H, s = 0.35 * sin(t * 0.11);\n  out[0] = sin(X) * cos(Y) + s * sin(2 * X) * 1.5 * cos(1.5 * Y) * 0.5;\n  out[1] = -cos(X) * sin(Y) - s * 2 * cos(2 * X) * sin(1.5 * Y) * 0.5;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 40, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.hue = k[0];\n  P.count = floor(cl(k[2], 40, 120));\n  P.size = cl(k[3], 0, 1);\n  P.t += d;\n  if (input.btnPressed && input.btnPressed[0]) P.stirT = 0;\n  // The stir: a second to wind up, then it dies away over about eight.\n  if (P.stirT >= 0) {\n    P.stirT += d;\n    P.stir = P.stirT \u003c 1 ? sm(0, 1, P.stirT) : exp(-(P.stirT - 1) / 3.5);\n    if (P.stirT > 20) (P.stirT = -1), (P.stir = 0);\n  }\n  const v = [0, 0], S = P.stir;\n  for (let i = 0; i \u003c MAXF; i++) {\n    const f = P.flakes[i];\n    flow(f.x, f.y, P.t, v);\n    // Near flakes move faster across the panel than far ones.\n    const par = 0.6 + 0.6 * f.z, sp = 2.6 * par;\n    let vx = v[0] * sp + 0.4 * sin(P.t * 0.5 + f.ph), vy = v[1] * sp + 0.4 * cos(P.t * 0.37 + f.ph * 1.3);\n    if (S > 0) {\n      // The vortex runs round ellipses the shape of the panel, fastest\n      // half way out, so the flakes swing round without piling on a wall.\n      const ex = (f.x - W / 2) / (W / 2), ey = (f.y - H / 2) / (H / 2), r = sqrt(ex * ex + ey * ey);\n      const g = S * 1.6 * cl(1.15 - r, 0, 1) * par;\n      vx += g * -0.5 * (f.y - H / 2);\n      vy += g * 2 * (f.x - W / 2);\n    }\n    f.x = cl(f.x + vx * d, 1, W - 2);\n    f.y = cl(f.y + vy * d, 1, H - 2);\n    // Tumble: turn about the flake's own axis, which wanders slowly.\n    const ang = f.spin * (1 + 4 * S) * d, a = f.axis;\n    a[0] += 0.3 * sin(P.t * 0.23 + f.ph) * d;\n    a[1] += 0.3 * cos(P.t * 0.19 + f.ph * 2) * d;\n    const al = sqrt(a[0] * a[0] + a[1] * a[1] + a[2] * a[2]);\n    a[0] /= al;\n    a[1] /= al;\n    a[2] /= al;\n    const sh = sin(ang / 2), ch = cos(ang / 2), dq = [ch, a[0] * sh, a[1] * sh, a[2] * sh], q = f.q;\n    const n0 = dq[0] * q[0] - dq[1] * q[1] - dq[2] * q[2] - dq[3] * q[3];\n    const n1 = dq[0] * q[1] + dq[1] * q[0] + dq[2] * q[3] - dq[3] * q[2];\n    const n2 = dq[0] * q[2] - dq[1] * q[3] + dq[2] * q[0] + dq[3] * q[1];\n    const n3 = dq[0] * q[3] + dq[1] * q[2] - dq[2] * q[1] + dq[3] * q[0];\n    const ql = sqrt(n0 * n0 + n1 * n1 + n2 * n2 + n3 * n3);\n    q[0] = n0 / ql;\n    q[1] = n1 / ql;\n    q[2] = n2 / ql;\n    q[3] = n3 / ql;\n  }\n}\n\n// The foil's colour against its light, 0 to 1.3 over 256 steps: deep, gold,\n// pale gold, white-gold.\nfunction buildLut(P) {\n  const h = P.hue + 0.115 - floor(P.hue + 0.115);\n  // Round orange and yellow the deep end stays bright and saturated so it\n  // reads as dark gold, not brown; round red and pink the foil is paler, rose\n  // gold rather than red.\n  const warm = sm(0.0, 0.05, h) * (1 - sm(0.17, 0.24, h)), rose = 1 - sm(0.02, 0.07, abs(h - 0.995 + (h \u003c 0.5 ? 1 : 0)));\n  const sat = 1 - 0.4 * rose, lift = max(warm, rose);\n  const stops = [\n    [0, hsv(h - 0.025, 0.95 * sat, 0.4 + 0.18 * lift)],\n    [0.35, hsv(h - 0.01, 0.88 * sat, 0.72 + 0.12 * lift)],\n    [0.7, hsv(h + 0.005, 0.68 * sat, 1)],\n    [1.0, hsv(h + 0.01, 0.34 * sat, 1)],\n    [1.3, hsv(h + 0.01, 0.06, 1)],\n  ];\n  for (let i = 0; i \u003c 256; i++) {\n    const b = (i / 255) * 1.3;\n    let j = 0;\n    while (j \u003c stops.length - 2 && b > stops[j + 1][0]) j++;\n    const [b0, c0] = stops[j], [b1, c1] = stops[j + 1], f = cl((b - b0) / (b1 - b0), 0, 1);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = (c0[c] + (c1[c] - c0[c]) * f) * 255;\n  }\n  // The serum: the foil's hue, faint and greyed, lighter at the top.\n  const top = hsv(h - 0.02, (0.5 - 0.2 * warm) * sat, 0.11), bot = hsv(h - 0.02, (0.6 - 0.2 * warm) * sat, 0.025);\n  const lit = hsv(h + 0.01, 0.3 * sat, 1);\n  P.serum = [top[0] * 255, top[1] * 255, top[2] * 255, bot[0] * 255, bot[1] * 255, bot[2] * 255, lit[0] * 255, lit[1] * 255, lit[2] * 255];\n  P.lutHue = P.hue;\n}\n\nconst rot = new Float32Array(9);\nfunction quatMat(q) {\n  const [w, x, y, z] = q;\n  rot[0] = 1 - 2 * (y * y + z * z); rot[1] = 2 * (x * y - w * z); rot[2] = 2 * (x * z + w * y);\n  rot[3] = 2 * (x * y + w * z); rot[4] = 1 - 2 * (x * x + z * z); rot[5] = 2 * (y * z - w * x);\n  rot[6] = 2 * (x * z - w * y); rot[7] = 2 * (y * z + w * x); rot[8] = 1 - 2 * (x * x + y * y);\n}\n\nconst PX = new Float32Array(10 * 3), FC = new Float32Array(9 * 4), ORD = [];\n\n// One flake into buffer buf (RGB, or RGBA premultiplied when far), over what\n// is there. Each LED takes 3 x 3 samples, 2 x 2 on a big flake; a facet\n// nearer the viewer covers the ones behind it, and the share of samples a\n// flake covers is how much of the LED it takes.\nfunction drawFlake(P, f, buf, rgba, dim, glints) {\n  quatMat(f.q);\n  const s = (6.5 + 6 * P.size) * f.sz * (0.5 + 0.7 * f.z), k = f.k, v = f.v, n = f.n, lut = P.lut;\n  let x0 = W, x1 = 0, y0 = H, y1 = 0;\n  for (let i = 0; i \u003c= k; i++) {\n    const a = v[i * 3], b = v[i * 3 + 1], c = v[i * 3 + 2];\n    const X = f.x + s * (rot[0] * a + rot[1] * b + rot[2] * c), Y = f.y + s * (rot[3] * a + rot[4] * b + rot[5] * c);\n    PX[i * 3] = X;\n    PX[i * 3 + 1] = Y;\n    PX[i * 3 + 2] = rot[6] * a + rot[7] * b + rot[8] * c;\n    x0 = min(x0, X);\n    x1 = max(x1, X);\n    y0 = min(y0, Y);\n    y1 = max(y1, Y);\n  }\n  // Big flakes need fewer samples to an LED for the same smooth edge.\n  const ss = s > 7 ? 2 : SS;\n  const bx = max(0, floor(x0)), by = max(0, floor(y0)), bw = min(W, floor(x1) + 1) - bx, bh = min(H, floor(y1) + 1) - by;\n  if (bw \u003c= 0 || bh \u003c= 0 || bw > 64 || bh > 64) return;\n  const sw = bw * ss, sub = P.sub;\n  sub.fill(-1, 0, sw * bh * ss);\n  ORD.length = 0;\n  for (let i = 0; i \u003c k; i++) {\n    // The facet's normal turned with the flake, towards the viewer: foil\n    // shines from both faces.\n    const a = n[i * 3], b = n[i * 3 + 1], c = n[i * 3 + 2];\n    let nx = rot[0] * a + rot[1] * b + rot[2] * c, ny = rot[3] * a + rot[4] * b + rot[5] * c, nz = rot[6] * a + rot[7] * b + rot[8] * c;\n    if (nz \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n    const spec = max(0, nx * HH[0] + ny * HH[1] + nz * HH[2]) ** 18, diff = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n    // A little base light, the lamp's diffuse share, the glow of the serum\n    // above for facets tipped up, and a narrow highlight, cos^18, half\n    // strength 16 degrees off the mirror angle: a facet flashes as it\n    // sweeps through and its neighbours, tilted their own ways, stay deep.\n    const env = 0.5 - 0.5 * ny;\n    const br = (0.1 + 0.45 * diff + 0.25 * env + 0.95 * spec) * dim;\n    FC[i * 4] = cl(floor((br / 1.3) * 255), 0, 255);\n    FC[i * 4 + 1] = spec;\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    FC[i * 4 + 2] = (PX[2] + PX[j1 * 3 + 2] + PX[j2 * 3 + 2]) / 3;\n    ORD.push(i);\n  }\n  ORD.sort((a, b) => FC[a * 4 + 2] - FC[b * 4 + 2]);\n  for (const i of ORD) {\n    const j1 = 1 + i, j2 = 1 + ((i + 1) % k);\n    const ax = PX[0], ay = PX[1], bxx = PX[j1 * 3], byy = PX[j1 * 3 + 1], cx = PX[j2 * 3], cy = PX[j2 * 3 + 1];\n    const area = (bxx - ax) * (cy - ay) - (byy - ay) * (cx - ax);\n    if (abs(area) \u003c 1e-4) continue;\n    const sg = area > 0 ? 1 : -1;\n    const sx0 = max(0, floor((min(ax, bxx, cx) - bx) * ss)), sx1 = min(sw - 1, floor((max(ax, bxx, cx) - bx) * ss));\n    const sy0 = max(0, floor((min(ay, byy, cy) - by) * ss)), sy1 = min(bh * ss - 1, floor((max(ay, byy, cy) - by) * ss));\n    for (let sy = sy0; sy \u003c= sy1; sy++) {\n      const py = by + (sy + 0.5) / ss;\n      for (let sx = sx0; sx \u003c= sx1; sx++) {\n        const px = bx + (sx + 0.5) / ss;\n        const e0 = ((bxx - ax) * (py - ay) - (byy - ay) * (px - ax)) * sg;\n        const e1 = ((cx - bxx) * (py - byy) - (cy - byy) * (px - bxx)) * sg;\n        const e2 = ((ax - cx) * (py - cy) - (ay - cy) * (px - cx)) * sg;\n        if (e0 >= 0 && e1 >= 0 && e2 >= 0) sub[sy * sw + sx] = i;\n      }\n    }\n    if (glints && FC[i * 4 + 1] > 0.6) glints.push((ax + bxx + cx) / 3, (ay + byy + cy) / 3, FC[i * 4 + 1]);\n  }\n  for (let y = 0; y \u003c bh; y++)\n    for (let x = 0; x \u003c bw; x++) {\n      let r = 0, g = 0, b = 0, c = 0;\n      for (let u = 0; u \u003c ss; u++)\n        for (let w = 0; w \u003c ss; w++) {\n          const i = sub[(y * ss + u) * sw + x * ss + w];\n          if (i \u003c 0) continue;\n          const li = FC[i * 4] * 3;\n          r += lut[li];\n          g += lut[li + 1];\n          b += lut[li + 2];\n          c++;\n        }\n      if (!c) continue;\n      const al = c / (ss * ss), p = (by + y) * W + bx + x;\n      if (rgba) {\n        const o = p * 4;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n        buf[o + 3] = buf[o + 3] * (1 - al) + al;\n      } else {\n        const o = p * 3;\n        buf[o] = buf[o] * (1 - al) + r / (ss * ss);\n        buf[o + 1] = buf[o + 1] * (1 - al) + g / (ss * ss);\n        buf[o + 2] = buf[o + 2] * (1 - al) + b / (ss * ss);\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const fr = P.frame, far = P.far, tmp = P.tmp, t = P.t, sv = P.serum;\n  // The serum: a soft gradient and a slow caustic shimmer that fades with\n  // depth, light let in from the top.\n  const colw = P.colw || (P.colw = new Float32Array(W));\n  for (let x = 0; x \u003c W; x++) colw[x] = 1.5 * sin(x * 0.17 - t * 0.31);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / (H - 1), dep = exp(-y / 70), roww = 1.7 * sin(y * 0.11 + t * 0.4) + t * 0.23;\n    for (let x = 0; x \u003c W; x++) {\n      const a = sin(x * 0.19 + roww), b = sin(y * 0.13 + colw[x] - t * 0.17);\n      const c = a + b, caus = exp(-c * c * 6) * 0.9 * dep, o = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) fr[o + ch] = sv[ch] * (1 - g) + sv[3 + ch] * g + caus * 0.07 * sv[6 + ch];\n    }\n  }\n  const fl = P.flakes.slice(0, P.count).sort((a, b) => a.z - b.z);\n  far.fill(0);\n  let i = 0;\n  // Far flakes, dimmer, into their own layer, softened by a 1-2-1 blur.\n  for (; i \u003c fl.length && fl[i].z \u003c 0.35; i++) drawFlake(P, fl[i], far, true, 0.6 + 0.6 * fl[i].z, null);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) tmp[o + c] = (far[l + c] + 2 * far[o + c] + far[r + c]) / 4;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 4, u = y > 0 ? o - W * 4 : o, dn = y \u003c H - 1 ? o + W * 4 : o, f3 = (y * W + x) * 3;\n      const a = (tmp[u + 3] + 2 * tmp[o + 3] + tmp[dn + 3]) / 4;\n      for (let c = 0; c \u003c 3; c++) fr[f3 + c] = fr[f3 + c] * (1 - a) + (tmp[u + c] + 2 * tmp[o + c] + tmp[dn + c]) / 4;\n    }\n  // Near flakes, sharp, over the top; their brightest facets throw a glint.\n  const glints = [];\n  for (; i \u003c fl.length; i++) drawFlake(P, fl[i], fr, false, 1, fl[i].z > 0.6 ? glints : null);\n  for (let g = 0; g \u003c glints.length; g += 3) {\n    const gx = floor(glints[g]), gy = floor(glints[g + 1]), s = (glints[g + 2] - 0.6) / 0.4;\n    for (let r = -2; r \u003c= 2; r++) {\n      const a = s * (r === 0 ? 1 : abs(r) === 1 ? 0.55 : 0.22);\n      for (const [x, y] of r === 0 ? [[gx, gy]] : [[gx + r, gy], [gx, gy + r]]) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const o = (y * W + x) * 3;\n        fr[o] += 255 * a;\n        fr[o + 1] += 250 * a;\n        fr[o + 2] += 225 * a;\n      }\n    }\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, fr[o]), min(255, fr[o + 1]), min(255, fr[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Flakes=40..120, Size=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the foil all the way round the wheel, and the serum's faint tint with it. At 0 the foil is yellow gold; at 0.07 green gold, at 0.5 blue foil in a blue-black serum, at 0.88 rose gold and at 0.93 copper. Round orange and yellow the shadowed facets stay bright and saturated, so the foil never goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the current carries the flakes and how fast they tumble. At 2 the near flakes drift up to 3 LEDs a second round two convection cells, one above the other, and a flake turns over every 4 to 12 seconds; at 0.2 all of it runs ten times slower."},{"name":"Flakes","min":40,"max":120,"about":"How many flakes hang in the serum: 40 at the opening, about a third of them far back, small and soft; up to 120, a crowd of foil."},{"name":"Size","min":0,"max":1,"about":"How big the flakes are: at the opening the nearest are about 12 LEDs across and the farthest about 5; at 1 about 23 and 10, and the facets read one by one."}],"start":[0,2,40,0.06],"measures":{"motion":0.1468,"detail":0.0417,"edges":0.5435,"complexity":1.0218,"coverage":0.4003,"colour":0.1903,"drift":0.1193},"knobResponse":[0.0888,0.0967,0.0947,0.1201]},{"slug":"goldbach-comet","title":"Goldbach Comet","family":"number","round":33,"note":"짝수 n 을 두 소수의 합으로 쓰는 가짓수를 매끈한 예측값으로 나눠 가로로 찍고, n 은 아래로 커져요. n 이 3 이나 5 나 7 로 나뉘는지에 따라 여덟 줄기가 색으로 갈라지고, 아래로 갈수록 줄기가 가늘어지며 52만까지 가면 처음부터 다시 흘러요. K3 은 7 부터 소수 하나씩 줄기를 접어 한 줄로 모으고, K1 을 누르면 8초 동안 다 접었다 펴요.","idea":"Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.","buttons":"K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.","code":"// ===== Patternflow pattern =====\n// Title:   Goldbach Comet\n// Family:  number\n// Idea:    Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Goldbach's comet, the partition counts of Goldbach's conjecture (Christian Goldbach, 1742), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1\n//\n// Knob 1: Hue. Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue.\n// Knob 2: Speed. How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes.\n// Knob 3: Correction. Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel.\n// Knob 4: Smear. How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count.\n// Buttons: K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.\n\nconst W = 64, H = 128, LOGM = 19, M = 1 \u003c\u003c LOGM, HN = M >> 1;\nconst U0 = 9, U1 = LOGM, SPAN = 4, CAP = 160, XS = 40, X0 = 8, MID = 0.6;\nconst L3 = Math.log(2), L5 = Math.log(4 / 3), L7 = Math.log(6 / 5);\nconst C2 = 0.6601618158468696;\nconst { min, max, floor, ceil, log, exp, cos, sin, PI, LN2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Complex FFT of size n in place. tc/ts hold e^(-i pi k / half) at\n// half + k for every stage, so each stage reads its twiddles in a row.\nfunction fft(re, im, n, tc, ts, sign) {\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      (re[i] = re[j]), (re[j] = t);\n      (t = im[i]), (im[i] = im[j]), (im[j] = t);\n    }\n  }\n  for (let half = 1; half \u003c n; half \u003c\u003c= 1)\n    for (let i = 0, len = half \u003c\u003c 1; i \u003c n; i += len)\n      for (let k = 0; k \u003c half; k++) {\n        const cr = tc[half + k], ci = sign * ts[half + k], a = i + k, b = a + half;\n        const br = re[b], bi = im[b], xr = br * cr - bi * ci, xi = br * ci + bi * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n      }\n}\n\n// g(n) for every even n up to 2^19, the number of ways n = p + q with\n// primes p \u003c= q. Odd primes 2a + 1 make a 0/1 string over a \u003c 2^18, and\n// its square under convolution counts the ordered pairs with\n// a + b = n/2 - 1. The string is real, so it rides as one complex string\n// of half the length (even a in the real part, odd a in the imaginary)\n// and is pulled apart after the transform. Pairing up the 43,390 primes\n// below 2^19 one by one would be 512 million steps; this is 55 to 110 ms.\n// Checked against counting pairs one by one for every even n below 20,000\n// and every 997th one above, up to g(2^19) = 2367: no misses. Run to 2^20\n// it gave g(10^6) = 5402 with rounding errors under 2e-11, but took twice\n// as long.\nfunction goldbach(comp) {\n  const n = HN, tc = new Float64Array(M), ts = new Float64Array(M);\n  // The top stage by rotation, started afresh from cos and sin every 64\n  // steps: 4096 calls to them instead of 262,144.\n  const sr = cos(-PI / n), si = sin(-PI / n);\n  for (let k = 0; k \u003c n; k++) {\n    if ((k & 63) === 0) (tc[n + k] = cos((-PI * k) / n)), (ts[n + k] = sin((-PI * k) / n));\n    else {\n      const a = tc[n + k - 1], b = ts[n + k - 1];\n      (tc[n + k] = a * sr - b * si), (ts[n + k] = a * si + b * sr);\n    }\n  }\n  for (let half = n >> 1; half >= 1; half >>= 1)\n    for (let k = 0, st = n / half; k \u003c half; k++) (tc[half + k] = tc[n + k * st]), (ts[half + k] = ts[n + k * st]);\n  const zr = new Float64Array(n), zi = new Float64Array(n);\n  for (let a = 1; a \u003c n; a++) if (!comp[2 * a + 1]) (a & 1 ? zi : zr)[a >> 1] = 1;\n  fft(zr, zi, n, tc, ts, 1);\n  // X[k] and X[k + n] of the full string from Z[k] and Z[n - k]; square\n  // them; fold the squares back into one half-length string, pairs k and\n  // n - k together so it can be done in place.\n  const out = new Float64Array(4);\n  const fold = (k, j, o) => {\n    const ar = zr[k], ai = zi[k], br = zr[j], bi = -zi[j];\n    const er = (ar + br) / 2, ei = (ai + bi) / 2, odr = (ai - bi) / 2, odi = -(ar - br) / 2;\n    const wr = tc[n + k], wi = ts[n + k], tr = odr * wr - odi * wi, ti = odr * wi + odi * wr;\n    const x1r = er + tr, x1i = ei + ti, x2r = er - tr, x2i = ei - ti;\n    const y1r = x1r * x1r - x1i * x1i, y1i = 2 * x1r * x1i, y2r = x2r * x2r - x2i * x2i, y2i = 2 * x2r * x2i;\n    const sr = (y1r + y2r) / 2, si = (y1i + y2i) / 2, dr = (y1r - y2r) / 2, di = (y1i - y2i) / 2;\n    out[o] = sr - (di * wr - dr * wi);\n    out[o + 1] = si + (dr * wr + di * wi);\n  };\n  for (let k = 0; k \u003c= n >> 1; k++) {\n    const j = (n - k) & (n - 1);\n    fold(k, j, 0);\n    fold(j, k, 2);\n    (zr[k] = out[0]), (zi[k] = out[1]), (zr[j] = out[2]), (zi[j] = out[3]);\n  }\n  fft(zr, zi, n, tc, ts, -1);\n  const g = new Int32Array(HN + 1);\n  for (let k = 0; k + 1 \u003c= HN; k++) {\n    const h = k + 1, c = Math.round((k & 1 ? zi[k >> 1] : zr[k >> 1]) / n) + (h & 1 && h > 2 && !comp[h] ? 1 : 0);\n    g[h] = c >> 1;\n  }\n  g[2] = 1;\n  return g;\n}\n\n// The Hardy-Littlewood count without its singular series: C2 times the\n// integral of dt / (ln t ln(n - t)) from 2 to n - 2, on a table of 97\n// points from n = 2^8 to 2^20 and read between them in ln n. C2 n / ln^2 n\n// alone falls 23% short at n = 2000 and 15% at 500,000, and that drift\n// would tip the streaks four LEDs across the tape. With the integral, g(n)\n// over the whole prediction averages 0.953 at n = 2000, 0.982 at 20,000\n// and 0.997 at 500,000, spread 5.7%, 2.9% and 0.9% about it, so a streak\n// narrows from a spread of about two LEDs to a third of one.\nfunction hlTable() {\n  const t = new Float64Array(97);\n  for (let j = 0; j \u003c 97; j++) {\n    const n = 2 ** (8 + j / 8), a = log(2), b = log(n / 2), K = 200, h = (b - a) / K;\n    let s = 0;\n    for (let i = 0; i \u003c= K; i++) {\n      const u = a + i * h, x = exp(u);\n      s += ((i === 0 || i === K ? 1 : i & 1 ? 4 : 2) * x) / (u * log(n - x));\n    }\n    t[j] = log((2 * C2 * s * h) / 3);\n  }\n  return t;\n}\n\nexport function setup(params) {\n  const comp = new Uint8Array(M + 1);\n  for (let i = 3; i * i \u003c= M; i += 2) if (!comp[i]) for (let j = i * i; j \u003c= M; j += 2 * i) comp[j] = 1;\n  const g = goldbach(comp), hl = hlTable();\n  // For each even n = 2h: which of 3, 5, 7 and 11 divide it (bits 1, 2, 4\n  // and 8), and the log of the rest of its singular series, the product of\n  // (p - 1)/(p - 2) over the odd primes p from 11 up that divide it.\n  const bits = new Uint8Array(HN + 1), lr = new Float32Array(HN + 1), res = new Float32Array(HN + 1);\n  for (let p = 3; p \u003c= HN; p += 2) {\n    if (comp[p]) continue;\n    if (p > 7) {\n      const f = log((p - 1) / (p - 2));\n      for (let h = p; h \u003c= HN; h += p) lr[h] += f;\n    } else for (let h = p, b = p === 3 ? 1 : p === 5 ? 2 : 4; h \u003c= HN; h += p) bits[h] |= b;\n  }\n  for (let h = 11; h \u003c= HN; h += 11) bits[h] |= 8;\n  // res is how far g(n) sits from the whole prediction, in ln: 0 would be\n  // exactly Hardy-Littlewood. The prediction is read off the table once\n  // every 16 numbers and drawn straight between.\n  let hA = 0, hB = 0;\n  const hlAt = (h) => {\n    const z = cl((log(2 * h) / LN2 - 8) * 8, 0, 96), j = min(95, floor(z));\n    return hl[j] + (hl[j + 1] - hl[j]) * (z - j);\n  };\n  for (let h = 4; h \u003c= HN; h++) {\n    if (((h - 4) & 15) === 0) (hA = hlAt(h)), (hB = hlAt(h + 16));\n    const b = bits[h], small = (b & 1 ? L3 : 0) + (b & 2 ? L5 : 0) + (b & 4 ? L7 : 0);\n    res[h] = log(g[h]) - lr[h] - small - (hA + ((hB - hA) * ((h - 4) & 15)) / 16);\n  }\n  params.s = {\n    bits, lr, res, u: 10.6, hue: 0, speed: 2, kap: 0, smear: 0.06, bump: -1,\n    acc: new Float32Array(W * 4), pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(W * H * 3),\n    off: new Float32Array(16), cls: new Uint8Array(16),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.smear = cl(k[3], 0, 1);\n  const k3 = cl(k[2], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.bump = 0;\n  // The tap sends the correction to the far end from the knob and back:\n  // in for three seconds, held for two, out for three.\n  let kap = k3;\n  if (P.bump >= 0) {\n    P.bump += d / 8;\n    const b = P.bump \u003c 3 / 8 ? sm((P.bump * 8) / 3) : P.bump \u003c 5 / 8 ? 1 : sm(((1 - P.bump) * 8) / 3);\n    kap = k3 + ((k3 \u003c 0.5 ? 1 : 0) - k3) * b;\n    if (P.bump >= 1) P.bump = -1;\n  }\n  P.kap = kap;\n  P.u += d * P.speed * 0.12;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { bits, lr, res, acc, pal, rgb, off, cls } = P;\n  if (P.palHue !== P.hue) {\n    // Gold, green, pink, sky blue and pale blue at Hue 0. The gold is kept\n    // light so a thin streak of it does not read brown.\n    const base = [[0.13, 0.62], [0.36, 0.75], [0.9, 0.55], [0.55, 0.7], [0.62, 0.35]];\n    for (let c = 0; c \u003c 5; c++) hsv(P.hue + base[c][0], base[c][1], 1, pal, c * 3);\n    P.palHue = P.hue;\n  }\n  // The correction comes in a prime at a time: the first third of the knob\n  // folds the 7s onto the streaks beside them, the second the 5s, the last\n  // the 3s, while everything glides to meet in the middle.\n  const kap = P.kap * 3, w7 = sm(kap), w5 = sm(kap - 1), w3 = sm(kap - 2);\n  for (let b = 0; b \u003c 16; b++) {\n    off[b] = (b & 1 ? L3 * (1 - w3) : 0) + (b & 2 ? L5 * (1 - w5) : 0) + (b & 4 ? L7 * (1 - w7) : 0);\n    cls[b] = (b & 1 ? 0 : b & 2 ? 1 : b & 4 ? 2 : b & 8 ? 3 : 4) * 3;\n  }\n  // Smear leaves in the primes from 11 up. Each of them moves its\n  // multiples right by ln((p - 1)/(p - 2)), 0.105 for 11, 0.087 for 13,\n  // 0.065 for 17, so left in they fan every streak out four LEDs wide.\n  const shift = X0 + XS * MID * w3 - 0.5, keep = P.smear;\n  // The view is four octaves of n, a strip of ln2 n: row y holds\n  // [u + y du, u + (y + 1) du). The tape runs from 2^9 to 2^19 and starts\n  // over after ten dark rows.\n  const du = SPAN / H, u0 = U0, tape = U1 - u0 + 10 * du;\n  for (let y = 0; y \u003c H; y++) {\n    acc.fill(0);\n    let uu = u0 + ((((P.u - u0 + y * du) % tape) + tape) % tape);\n    if (uu + du \u003c= U1) {\n      const hlo = max(4, ceil(2 ** uu / 2)), hhi = min(HN + 1, ceil(2 ** (uu + du) / 2));\n      const count = hhi - hlo;\n      // Every n in the row while there are few, every s-th when there are\n      // more than CAP. s is a power of 2: a stride of 17 would keep only\n      // multiples of 17 and move every streak 2.3 LEDs right by its 16/15.\n      const s = count > CAP ? 2 ** ceil(Math.log2(count / CAP)) : 1;\n      for (let h = ceil(hlo / s) * s; h \u003c hhi; h += s) {\n        const b = bits[h], x = shift + XS * (res[h] + keep * lr[h] + off[b]), x0 = floor(x), f = x - x0, c = cls[b];\n        if (x0 >= 0 && x0 \u003c W) {\n          const o = x0 * 4, w = 1 - f;\n          (acc[o] += w), (acc[o + 1] += w * pal[c]), (acc[o + 2] += w * pal[c + 1]), (acc[o + 3] += w * pal[c + 2]);\n        }\n        if (x0 + 1 >= 0 && x0 + 1 \u003c W) {\n          const o = x0 * 4 + 4;\n          (acc[o] += f), (acc[o + 1] += f * pal[c]), (acc[o + 2] += f * pal[c + 1]), (acc[o + 3] += f * pal[c + 2]);\n        }\n      }\n    }\n    // Dots in one LED add up, on a log scale against the busiest LED of the\n    // row: full at 40% of it, and one dot lights an LED to about a third in\n    // a crowded row and to half in a sparse one, so a lone dot in a far\n    // tail stays faint and the core of a streak stands out. The colour is\n    // the mix of the classes that landed there.\n    let top = 0;\n    for (let x = 0; x \u003c W; x++) top = max(top, acc[x * 4]);\n    const norm = 1 / log(1 + 2 * max(4, 0.4 * top));\n    for (let x = 0; x \u003c W; x++) {\n      const o = x * 4, a = acc[o], q = (y * W + x) * 3;\n      if (a \u003c= 0) {\n        rgb[q] = rgb[q + 1] = rgb[q + 2] = 0;\n        continue;\n      }\n      const lev = min(1, log(1 + 2 * a) * norm) / a;\n      rgb[q] = acc[o + 1] * lev;\n      rgb[q + 1] = acc[o + 2] * lev;\n      rgb[q + 2] = acc[o + 3] * lev;\n    }\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-goldbach-comet","type":"code","name":"goldbach-comet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Goldbach Comet\n// Family:  number\n// Idea:    Every even number n up to 524,288 is a dot placed across the panel by how many ways it splits into two primes, measured against the Hardy-Littlewood count, with n climbing down the rows; the dots gather into sharp coloured streaks, one for each set of 3, 5 and 7 dividing n, that start as a loose spray and narrow as n grows, and fold a prime at a time into a single line when the correction is turned in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Goldbach's comet, the partition counts of Goldbach's conjecture (Christian Goldbach, 1742), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1\n//\n// Knob 1: Hue. Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue.\n// Knob 2: Speed. How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes.\n// Knob 3: Correction. Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel.\n// Knob 4: Smear. How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count.\n// Buttons: K1 tap folds the correction all the way in over three seconds, holds the single line for two and lets it out again over three; with Correction past 0.5 it goes the other way.\n\nconst W = 64, H = 128, LOGM = 19, M = 1 \u003c\u003c LOGM, HN = M >> 1;\nconst U0 = 9, U1 = LOGM, SPAN = 4, CAP = 160, XS = 40, X0 = 8, MID = 0.6;\nconst L3 = Math.log(2), L5 = Math.log(4 / 3), L7 = Math.log(6 / 5);\nconst C2 = 0.6601618158468696;\nconst { min, max, floor, ceil, log, exp, cos, sin, PI, LN2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Complex FFT of size n in place. tc/ts hold e^(-i pi k / half) at\n// half + k for every stage, so each stage reads its twiddles in a row.\nfunction fft(re, im, n, tc, ts, sign) {\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      (re[i] = re[j]), (re[j] = t);\n      (t = im[i]), (im[i] = im[j]), (im[j] = t);\n    }\n  }\n  for (let half = 1; half \u003c n; half \u003c\u003c= 1)\n    for (let i = 0, len = half \u003c\u003c 1; i \u003c n; i += len)\n      for (let k = 0; k \u003c half; k++) {\n        const cr = tc[half + k], ci = sign * ts[half + k], a = i + k, b = a + half;\n        const br = re[b], bi = im[b], xr = br * cr - bi * ci, xi = br * ci + bi * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n      }\n}\n\n// g(n) for every even n up to 2^19, the number of ways n = p + q with\n// primes p \u003c= q. Odd primes 2a + 1 make a 0/1 string over a \u003c 2^18, and\n// its square under convolution counts the ordered pairs with\n// a + b = n/2 - 1. The string is real, so it rides as one complex string\n// of half the length (even a in the real part, odd a in the imaginary)\n// and is pulled apart after the transform. Pairing up the 43,390 primes\n// below 2^19 one by one would be 512 million steps; this is 55 to 110 ms.\n// Checked against counting pairs one by one for every even n below 20,000\n// and every 997th one above, up to g(2^19) = 2367: no misses. Run to 2^20\n// it gave g(10^6) = 5402 with rounding errors under 2e-11, but took twice\n// as long.\nfunction goldbach(comp) {\n  const n = HN, tc = new Float64Array(M), ts = new Float64Array(M);\n  // The top stage by rotation, started afresh from cos and sin every 64\n  // steps: 4096 calls to them instead of 262,144.\n  const sr = cos(-PI / n), si = sin(-PI / n);\n  for (let k = 0; k \u003c n; k++) {\n    if ((k & 63) === 0) (tc[n + k] = cos((-PI * k) / n)), (ts[n + k] = sin((-PI * k) / n));\n    else {\n      const a = tc[n + k - 1], b = ts[n + k - 1];\n      (tc[n + k] = a * sr - b * si), (ts[n + k] = a * si + b * sr);\n    }\n  }\n  for (let half = n >> 1; half >= 1; half >>= 1)\n    for (let k = 0, st = n / half; k \u003c half; k++) (tc[half + k] = tc[n + k * st]), (ts[half + k] = ts[n + k * st]);\n  const zr = new Float64Array(n), zi = new Float64Array(n);\n  for (let a = 1; a \u003c n; a++) if (!comp[2 * a + 1]) (a & 1 ? zi : zr)[a >> 1] = 1;\n  fft(zr, zi, n, tc, ts, 1);\n  // X[k] and X[k + n] of the full string from Z[k] and Z[n - k]; square\n  // them; fold the squares back into one half-length string, pairs k and\n  // n - k together so it can be done in place.\n  const out = new Float64Array(4);\n  const fold = (k, j, o) => {\n    const ar = zr[k], ai = zi[k], br = zr[j], bi = -zi[j];\n    const er = (ar + br) / 2, ei = (ai + bi) / 2, odr = (ai - bi) / 2, odi = -(ar - br) / 2;\n    const wr = tc[n + k], wi = ts[n + k], tr = odr * wr - odi * wi, ti = odr * wi + odi * wr;\n    const x1r = er + tr, x1i = ei + ti, x2r = er - tr, x2i = ei - ti;\n    const y1r = x1r * x1r - x1i * x1i, y1i = 2 * x1r * x1i, y2r = x2r * x2r - x2i * x2i, y2i = 2 * x2r * x2i;\n    const sr = (y1r + y2r) / 2, si = (y1i + y2i) / 2, dr = (y1r - y2r) / 2, di = (y1i - y2i) / 2;\n    out[o] = sr - (di * wr - dr * wi);\n    out[o + 1] = si + (dr * wr + di * wi);\n  };\n  for (let k = 0; k \u003c= n >> 1; k++) {\n    const j = (n - k) & (n - 1);\n    fold(k, j, 0);\n    fold(j, k, 2);\n    (zr[k] = out[0]), (zi[k] = out[1]), (zr[j] = out[2]), (zi[j] = out[3]);\n  }\n  fft(zr, zi, n, tc, ts, -1);\n  const g = new Int32Array(HN + 1);\n  for (let k = 0; k + 1 \u003c= HN; k++) {\n    const h = k + 1, c = Math.round((k & 1 ? zi[k >> 1] : zr[k >> 1]) / n) + (h & 1 && h > 2 && !comp[h] ? 1 : 0);\n    g[h] = c >> 1;\n  }\n  g[2] = 1;\n  return g;\n}\n\n// The Hardy-Littlewood count without its singular series: C2 times the\n// integral of dt / (ln t ln(n - t)) from 2 to n - 2, on a table of 97\n// points from n = 2^8 to 2^20 and read between them in ln n. C2 n / ln^2 n\n// alone falls 23% short at n = 2000 and 15% at 500,000, and that drift\n// would tip the streaks four LEDs across the tape. With the integral, g(n)\n// over the whole prediction averages 0.953 at n = 2000, 0.982 at 20,000\n// and 0.997 at 500,000, spread 5.7%, 2.9% and 0.9% about it, so a streak\n// narrows from a spread of about two LEDs to a third of one.\nfunction hlTable() {\n  const t = new Float64Array(97);\n  for (let j = 0; j \u003c 97; j++) {\n    const n = 2 ** (8 + j / 8), a = log(2), b = log(n / 2), K = 200, h = (b - a) / K;\n    let s = 0;\n    for (let i = 0; i \u003c= K; i++) {\n      const u = a + i * h, x = exp(u);\n      s += ((i === 0 || i === K ? 1 : i & 1 ? 4 : 2) * x) / (u * log(n - x));\n    }\n    t[j] = log((2 * C2 * s * h) / 3);\n  }\n  return t;\n}\n\nexport function setup(params) {\n  const comp = new Uint8Array(M + 1);\n  for (let i = 3; i * i \u003c= M; i += 2) if (!comp[i]) for (let j = i * i; j \u003c= M; j += 2 * i) comp[j] = 1;\n  const g = goldbach(comp), hl = hlTable();\n  // For each even n = 2h: which of 3, 5, 7 and 11 divide it (bits 1, 2, 4\n  // and 8), and the log of the rest of its singular series, the product of\n  // (p - 1)/(p - 2) over the odd primes p from 11 up that divide it.\n  const bits = new Uint8Array(HN + 1), lr = new Float32Array(HN + 1), res = new Float32Array(HN + 1);\n  for (let p = 3; p \u003c= HN; p += 2) {\n    if (comp[p]) continue;\n    if (p > 7) {\n      const f = log((p - 1) / (p - 2));\n      for (let h = p; h \u003c= HN; h += p) lr[h] += f;\n    } else for (let h = p, b = p === 3 ? 1 : p === 5 ? 2 : 4; h \u003c= HN; h += p) bits[h] |= b;\n  }\n  for (let h = 11; h \u003c= HN; h += 11) bits[h] |= 8;\n  // res is how far g(n) sits from the whole prediction, in ln: 0 would be\n  // exactly Hardy-Littlewood. The prediction is read off the table once\n  // every 16 numbers and drawn straight between.\n  let hA = 0, hB = 0;\n  const hlAt = (h) => {\n    const z = cl((log(2 * h) / LN2 - 8) * 8, 0, 96), j = min(95, floor(z));\n    return hl[j] + (hl[j + 1] - hl[j]) * (z - j);\n  };\n  for (let h = 4; h \u003c= HN; h++) {\n    if (((h - 4) & 15) === 0) (hA = hlAt(h)), (hB = hlAt(h + 16));\n    const b = bits[h], small = (b & 1 ? L3 : 0) + (b & 2 ? L5 : 0) + (b & 4 ? L7 : 0);\n    res[h] = log(g[h]) - lr[h] - small - (hA + ((hB - hA) * ((h - 4) & 15)) / 16);\n  }\n  params.s = {\n    bits, lr, res, u: 10.6, hue: 0, speed: 2, kap: 0, smear: 0.06, bump: -1,\n    acc: new Float32Array(W * 4), pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(W * H * 3),\n    off: new Float32Array(16), cls: new Uint8Array(16),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.smear = cl(k[3], 0, 1);\n  const k3 = cl(k[2], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.bump = 0;\n  // The tap sends the correction to the far end from the knob and back:\n  // in for three seconds, held for two, out for three.\n  let kap = k3;\n  if (P.bump >= 0) {\n    P.bump += d / 8;\n    const b = P.bump \u003c 3 / 8 ? sm((P.bump * 8) / 3) : P.bump \u003c 5 / 8 ? 1 : sm(((1 - P.bump) * 8) / 3);\n    kap = k3 + ((k3 \u003c 0.5 ? 1 : 0) - k3) * b;\n    if (P.bump >= 1) P.bump = -1;\n  }\n  P.kap = kap;\n  P.u += d * P.speed * 0.12;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { bits, lr, res, acc, pal, rgb, off, cls } = P;\n  if (P.palHue !== P.hue) {\n    // Gold, green, pink, sky blue and pale blue at Hue 0. The gold is kept\n    // light so a thin streak of it does not read brown.\n    const base = [[0.13, 0.62], [0.36, 0.75], [0.9, 0.55], [0.55, 0.7], [0.62, 0.35]];\n    for (let c = 0; c \u003c 5; c++) hsv(P.hue + base[c][0], base[c][1], 1, pal, c * 3);\n    P.palHue = P.hue;\n  }\n  // The correction comes in a prime at a time: the first third of the knob\n  // folds the 7s onto the streaks beside them, the second the 5s, the last\n  // the 3s, while everything glides to meet in the middle.\n  const kap = P.kap * 3, w7 = sm(kap), w5 = sm(kap - 1), w3 = sm(kap - 2);\n  for (let b = 0; b \u003c 16; b++) {\n    off[b] = (b & 1 ? L3 * (1 - w3) : 0) + (b & 2 ? L5 * (1 - w5) : 0) + (b & 4 ? L7 * (1 - w7) : 0);\n    cls[b] = (b & 1 ? 0 : b & 2 ? 1 : b & 4 ? 2 : b & 8 ? 3 : 4) * 3;\n  }\n  // Smear leaves in the primes from 11 up. Each of them moves its\n  // multiples right by ln((p - 1)/(p - 2)), 0.105 for 11, 0.087 for 13,\n  // 0.065 for 17, so left in they fan every streak out four LEDs wide.\n  const shift = X0 + XS * MID * w3 - 0.5, keep = P.smear;\n  // The view is four octaves of n, a strip of ln2 n: row y holds\n  // [u + y du, u + (y + 1) du). The tape runs from 2^9 to 2^19 and starts\n  // over after ten dark rows.\n  const du = SPAN / H, u0 = U0, tape = U1 - u0 + 10 * du;\n  for (let y = 0; y \u003c H; y++) {\n    acc.fill(0);\n    let uu = u0 + ((((P.u - u0 + y * du) % tape) + tape) % tape);\n    if (uu + du \u003c= U1) {\n      const hlo = max(4, ceil(2 ** uu / 2)), hhi = min(HN + 1, ceil(2 ** (uu + du) / 2));\n      const count = hhi - hlo;\n      // Every n in the row while there are few, every s-th when there are\n      // more than CAP. s is a power of 2: a stride of 17 would keep only\n      // multiples of 17 and move every streak 2.3 LEDs right by its 16/15.\n      const s = count > CAP ? 2 ** ceil(Math.log2(count / CAP)) : 1;\n      for (let h = ceil(hlo / s) * s; h \u003c hhi; h += s) {\n        const b = bits[h], x = shift + XS * (res[h] + keep * lr[h] + off[b]), x0 = floor(x), f = x - x0, c = cls[b];\n        if (x0 >= 0 && x0 \u003c W) {\n          const o = x0 * 4, w = 1 - f;\n          (acc[o] += w), (acc[o + 1] += w * pal[c]), (acc[o + 2] += w * pal[c + 1]), (acc[o + 3] += w * pal[c + 2]);\n        }\n        if (x0 + 1 >= 0 && x0 + 1 \u003c W) {\n          const o = x0 * 4 + 4;\n          (acc[o] += f), (acc[o + 1] += f * pal[c]), (acc[o + 2] += f * pal[c + 1]), (acc[o + 3] += f * pal[c + 2]);\n        }\n      }\n    }\n    // Dots in one LED add up, on a log scale against the busiest LED of the\n    // row: full at 40% of it, and one dot lights an LED to about a third in\n    // a crowded row and to half in a sparse one, so a lone dot in a far\n    // tail stays faint and the core of a streak stands out. The colour is\n    // the mix of the classes that landed there.\n    let top = 0;\n    for (let x = 0; x \u003c W; x++) top = max(top, acc[x * 4]);\n    const norm = 1 / log(1 + 2 * max(4, 0.4 * top));\n    for (let x = 0; x \u003c W; x++) {\n      const o = x * 4, a = acc[o], q = (y * W + x) * 3;\n      if (a \u003c= 0) {\n        rgb[q] = rgb[q + 1] = rgb[q + 2] = 0;\n        continue;\n      }\n      const lev = min(1, log(1 + 2 * a) * norm) / a;\n      rgb[q] = acc[o + 1] * lev;\n      rgb[q + 1] = acc[o + 2] * lev;\n      rgb[q + 2] = acc[o + 3] * lev;\n    }\n  }\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Correction=0..1, Smear=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the five colours round the wheel together. At 0 numbers divisible by 3 are gold, by 5 (not 3) green, by 7 (not 3 or 5) pink, by 11 sky blue and the rest pale blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast n climbs: 0.12 octaves a second times the knob. The 128 rows hold four octaves of n, so at 2 the rows move up about eight a second and the tape runs from n = 512 to 524,288 and starts over in 43 seconds; at 0.2 it takes seven minutes."},{"name":"Correction","min":0,"max":1,"about":"Divides the count by the Hardy-Littlewood singular series a prime at a time. At 0 each streak sits at its own factor from left to right: 1 for n with no odd prime up to 7, then 6/5 for 7, 4/3 for 5, 8/5 for 35, 2 for 3, 12/5 for 21, 8/3 for 15 and 16/5 for 105. Up to 1/3 the 7s fold onto the streaks beside them, up to 2/3 the 5s, and in the last third the 3s, while the whole comet glides into one line in the middle of the panel."},{"name":"Smear","min":0,"max":1,"about":"How much of the series from the primes 11 and up is left in: almost none at the start, so each streak is one sharp line. At 1 each fans out to the right about four LEDs wide, since a multiple of 11 has 10/9 as many partitions, of 13 12/11 as many, and so on; that is the comet with nothing divided out but the smooth count."}],"start":[0,2,0,0.06],"measures":{"motion":1.5227,"detail":0.1448,"edges":0.6539,"complexity":1.6402,"coverage":0.5247,"colour":0.2628,"drift":0.0876},"knobResponse":[0.139,0.1117,0.2621,0.1127]},{"slug":"gosset-polytope","title":"Gosset Polytope","family":"geometry","round":28,"note":"E8 의 근 240개와 그 사이 모서리 6720개, 고셋의 4₂₁ 다면체를 8차원에서 두 창에 비춰요. 위 창은 30개씩 고리 여덟이 서는 콕서터 평면에서 열려 E7, E6, D5, D4, D6 의 평면을 지나 돌아오고, 아래 창은 몇 평면 앞서가요. 누르면 둘 다 콕서터 평면으로 돌아가요.","idea":"The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.","buttons":"K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.","code":"// ===== Patternflow pattern =====\n// Title:   Gosset Polytope\n// Family:  geometry\n// Idea:    The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gosset's 4₂₁ polytope (Thorold Gosset, 1900) and the E8 root system (Wilhelm Killing 1888, Élie Cartan 1894), in Peter McMullen's Petrie projection, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5\n//\n// Knob 1: Hue. Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan.\n// Knob 2: Speed. At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes.\n// Knob 3: Edges. How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white.\n// Knob 4: Plane. How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind.\n// Buttons: K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.\n\n// Each window is 64 LEDs square; the polytope fills a circle of radius 29.5\n// in it, so the outer ring of the Coxeter plane picture has 30 vertices about\n// six LEDs apart and the inner one 30 on a circle of radius six.\nconst W = 64, HV = 64, CX = 31.5, RAD = 29.5;\nconst { max, floor, ceil, round, sqrt, cos, sin, abs, exp, atan2, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst dot = (a, b) => a.reduce((s, x, i) => s + x * b[i], 0);\n\n// The roots: every (±1, ±1, 0, 0, 0, 0, 0, 0) in any order, 112 of them,\n// and every (±1/2)^8 with an even number of minus signs, 128 more.\nconst ROOTS = [];\nfor (let i = 0; i \u003c 8; i++)\n  for (let j = i + 1; j \u003c 8; j++)\n    for (let s = 0; s \u003c 4; s++) {\n      const v = new Array(8).fill(0);\n      v[i] = s & 1 ? -1 : 1;\n      v[j] = s & 2 ? -1 : 1;\n      ROOTS.push(v);\n    }\nfor (let m = 0; m \u003c 256; m++) {\n  let neg = 0;\n  for (let k = 0; k \u003c 8; k++) neg += (m >> k) & 1;\n  if (neg % 2 === 0) ROOTS.push([...Array(8)].map((_, k) => ((m >> k) & 1 ? -0.5 : 0.5)));\n}\nconst NV = ROOTS.length;\nconst RF = new Float64Array(NV * 8);\nROOTS.forEach((r, i) => r.forEach((x, k) => (RF[i * 8 + k] = x)));\n\n// Two roots are joined when they stand sqrt 2 apart, when their dot product\n// is 1: 56 edges at each vertex, 6720 in all.\nconst EDGE = [];\nfor (let i = 0; i \u003c NV; i++) for (let j = i + 1; j \u003c NV; j++) if (dot(ROOTS[i], ROOTS[j]) === 1) EDGE.push(i, j);\nconst NE = EDGE.length / 2;\nconst EI = Uint16Array.from(EDGE);\n\n// The simple roots of E8 (Bourbaki's numbering): a1 is the spinor root, a2\n// hangs off a4, and a1 a3 a4 a5 a6 a7 a8 is the long arm.\nconst e = (i, s = 1, j = -1, t = 0) => [...Array(8)].map((_, k) => (k === i ? s : k === j ? t : 0));\nconst SIMPLE = [[0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5], e(0, 1, 1, 1), e(1, 1, 0, -1), e(2, 1, 1, -1), e(3, 1, 2, -1), e(4, 1, 3, -1), e(5, 1, 4, -1), e(6, 1, 5, -1)];\n\n// The Coxeter plane of a simply laced root system from its simple roots\n// (Steinberg): colour the Dynkin diagram black and white, take the\n// Perron-Frobenius vector x of the diagram, and the plane is spanned by the\n// sum of x_i a_i over the black roots and the same sum over the white ones.\n// The product of all the reflections turns it by one h-th of a turn.\nfunction coxeterPlane(S) {\n  const k = S.length, adj = S.map((a) => S.map((b) => (dot(a, b) === -1 ? 1 : 0)));\n  const col = new Array(k).fill(-1), stack = [0];\n  col[0] = 0;\n  while (stack.length) {\n    const i = stack.pop();\n    for (let j = 0; j \u003c k; j++) if (adj[i][j] && col[j] \u003c 0) (col[j] = 1 - col[i]), stack.push(j);\n  }\n  let x = new Array(k).fill(1), lam = 0;\n  for (let it = 0; it \u003c 600; it++) {\n    const y = x.map((xi, i) => 2 * xi + adj[i].reduce((s, a, j) => s + a * x[j], 0));\n    lam = sqrt(dot(y, y)) - 2;\n    x = y.map((v) => v / (lam + 2));\n  }\n  const u = new Array(8).fill(0), w = new Array(8).fill(0);\n  S.forEach((a, i) => a.forEach((ai, d) => ((col[i] ? w : u)[d] += x[i] * ai)));\n  const nu = sqrt(dot(u, u));\n  for (let d = 0; d \u003c 8; d++) u[d] /= nu;\n  const pr = dot(w, u);\n  for (let d = 0; d \u003c 8; d++) w[d] -= pr * u[d];\n  const nw = sqrt(dot(w, w));\n  // The diagram's largest eigenvalue is 2 cos(pi / h), h the Coxeter number.\n  return [u, w.map((v) => v / nw), round(PI / Math.acos(lam / 2))];\n}\n\n// The round: E8 (30-fold), then down the chain E8 > E7 > E6 > D5 > D4 one\n// node of the diagram at a time (18, 12, 8 and 6-fold), up through D6\n// (10-fold) and back.\nconst STOPS = [SIMPLE, SIMPLE.slice(0, 7), SIMPLE.slice(0, 6), SIMPLE.slice(1, 6), SIMPLE.slice(1, 5), SIMPLE.slice(1, 7)].map(coxeterPlane);\nconst NS = STOPS.length;\n\n// Each swing is the shortest way from one plane to the next (a geodesic in\n// the Grassmannian): the two principal angles between the planes, turned\n// through together. The frame carries its own turn within the plane from\n// one swing to the next, so the windows never jump.\nfunction svd2(a, b, c, d) {\n  const E = (a + d) / 2, F = (a - d) / 2, G = (c + b) / 2, H = (c - b) / 2;\n  const Q = hypot(E, H), R = hypot(F, G), a1 = atan2(G, F), a2 = atan2(H, E);\n  // C = rot(phi) diag(Q + R, Q - R) rot(theta)\n  return { s1: Q + R, s2: Q - R, phi: (a2 + a1) / 2, th: (a2 - a1) / 2 };\n}\nconst comb = (p, q, cp, cq) => p.map((x, i) => cp * x + cq * q[i]);\n// Each stop is shown turned so a vertex of its outer polygon points straight\n// up; the turn is picked among the h equal ones to be the nearest to the\n// last, and the swing eases from one to the next.\nfunction upright(u, v, h, near) {\n  let best = 0, a = 0;\n  for (const r of ROOTS) {\n    const x = dot(r, u), y = dot(r, v), q = hypot(x, y);\n    if (q > best + 1e-9) (best = q), (a = atan2(y, x));\n  }\n  const t = -PI / 2 - a, step = (2 * PI) / h;\n  return t + round((near - t) / step) * step;\n}\nconst SEG = [];\nlet F = STOPS[0], turn = upright(F[0], F[1], 30, 0);\nfor (let k = 0; k \u003c NS; k++) {\n  let [v1, v2, h] = STOPS[(k + 1) % NS];\n  const [f1, f2] = F;\n  if (dot(f1, v1) * dot(f2, v2) - dot(f1, v2) * dot(f2, v1) \u003c 0) v2 = v2.map((x) => -x);\n  const { s1, s2, phi, th } = svd2(dot(f1, v1), dot(f1, v2), dot(f2, v1), dot(f2, v2));\n  const ca = cos(phi), sa = sin(phi), cb = cos(-th), sb = sin(-th);\n  // Principal vectors: P = F rot(phi), Q = V rot(theta)^T.\n  const p = [comb(f1, f2, ca, sa), comb(f1, f2, -sa, ca)];\n  const q = [comb(v1, v2, cb, sb), comb(v1, v2, -sb, cb)];\n  const ang = [], n = [];\n  [s1, s2].forEach((s, i) => {\n    const t = comb(q[i], p[i], 1, -cl(s, -1, 1)), nt = sqrt(dot(t, t));\n    ang.push(Math.acos(cl(s, -1, 1)));\n    n.push(nt > 1e-9 ? t.map((x) => x / nt) : new Array(8).fill(0));\n  });\n  F = [comb(q[0], q[1], cos(phi), -sin(phi)), comb(q[0], q[1], sin(phi), cos(phi))];\n  // Back on the Coxeter plane the frame may come round mirrored; the\n  // picture there is symmetric under the mirror, so turning a vertex up\n  // closes the loop all the same.\n  const next = upright(F[0], F[1], h, turn);\n  SEG.push({ p, n, ang, phi, t0: turn, t1: next });\n  turn = next;\n}\n\n// Where the frame stands at phase s (in stops): hold 5/12 of each stop, then\n// swing to the next with a smooth start and end. Returns the turn.\nconst HOLD = 5 / 12;\nfunction frameAt(s, out) {\n  const n = ((s % NS) + NS) % NS, k = floor(n), f = n - k, G = SEG[k];\n  let m = cl((f - HOLD) / (1 - HOLD), 0, 1);\n  m = m * m * m * (m * (m * 6 - 15) + 10);\n  const c1 = cos(m * G.ang[0]), s1 = sin(m * G.ang[0]), c2 = cos(m * G.ang[1]), s2 = sin(m * G.ang[1]);\n  const cp = cos(G.phi), sp = sin(G.phi);\n  for (let d = 0; d \u003c 8; d++) {\n    const g1 = c1 * G.p[0][d] + s1 * G.n[0][d], g2 = c2 * G.p[1][d] + s2 * G.n[1][d];\n    out[d] = g1 * cp - g2 * sp;\n    out[8 + d] = g1 * sp + g2 * cp;\n  }\n  return G.t0 + (G.t1 - G.t0) * m;\n}\n\n// Eight rings of 30 on the Coxeter plane; each vertex keeps the colour of\n// its ring wherever the swings carry it.\nconst RING = new Uint8Array(NV);\n{\n  const [u, v] = STOPS[0], rr = ROOTS.map((r) => hypot(dot(r, u), dot(r, v)));\n  const sorted = [...rr].sort((a, b) => a - b), levels = sorted.filter((x, i) => i === 0 || x - sorted[i - 1] > 1e-3);\n  rr.forEach((x, i) => (RING[i] = levels.filter((l) => l \u003c x + 1e-3).length - 1));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = {\n    ph: 0, lead: 1, hue: -1, ew: 1, snap: null,\n    buf: new Float32Array(W * HV * 2 * 3), fr: new Float64Array(16),\n    px: new Float32Array(NV), py: new Float32Array(NV),\n    vc: new Float32Array(NV * 3), ec: new Float32Array(NE * 3), rc: new Float32Array(8 * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.lead = cl(k[3], 1, 5);\n  P.ew = cl(k[2], -1, 1);\n  const hue = k[0] || 0;\n  if (hue !== P.hue) {\n    P.hue = hue;\n    for (let r = 0; r \u003c 8; r++) hsv(0.15 + hue - r * 0.095, 0.95 - 0.02 * r, 1, P.rc, r * 3);\n    for (let i = 0; i \u003c NV; i++) for (let c = 0; c \u003c 3; c++) P.vc[i * 3 + c] = P.rc[RING[i] * 3 + c];\n    for (let j = 0; j \u003c NE; j++) for (let c = 0; c \u003c 3; c++) P.ec[j * 3 + c] = (P.vc[EI[2 * j] * 3 + c] + P.vc[EI[2 * j + 1] * 3 + c]) / 2;\n  }\n  if (P.snap) {\n    P.snap.t += d;\n    const u = cl(P.snap.t / P.snap.T, 0, 1), m = u * u * (3 - 2 * u);\n    P.ph = P.snap.a + (P.snap.b - P.snap.a) * m;\n    if (u >= 1) P.snap = null;\n  } else {\n    P.ph = (P.ph + (d * sp) / 12) % NS;\n    // K1: run back or on to the nearer Coxeter plane, 0.4 s a stop.\n    if (input.btnPressed && input.btnPressed[0]) {\n      const b = round(P.ph / NS) * NS;\n      P.snap = { a: P.ph, b, t: 0, T: max(0.8, abs(b - P.ph) * 0.4) };\n    }\n  }\n}\n\n// One window: project the 240 roots onto the plane, draw the 6720 edges as\n// additive light, then the vertices on top.\nfunction view(P, ph, y0) {\n  const fr = P.fr, buf = P.buf, px = P.px, py = P.py;\n  const a = frameAt(ph, fr), ca = cos(a), sa = sin(a);\n  let rmax = 0;\n  for (let i = 0; i \u003c NV; i++) {\n    let x = 0, y = 0;\n    for (let d = 0, o = i * 8; d \u003c 8; d++) (x += RF[o + d] * fr[d]), (y += RF[o + d] * fr[8 + d]);\n    px[i] = ca * x - sa * y;\n    py[i] = sa * x + ca * y;\n    rmax = max(rmax, px[i] * px[i] + py[i] * py[i]);\n  }\n  const sc = RAD / sqrt(rmax), cy = y0 + 31.5;\n  for (let i = 0; i \u003c NV; i++) (px[i] = CX + px[i] * sc - 0.5), (py[i] = cy + py[i] * sc - 0.5);\n  const ew = P.ew \u003c= -1 ? 0 : 0.012 * (P.ew + 1) * (P.ew + 1), ec = P.ec, W3 = W * 3;\n  // RAD keeps every point a pixel inside the window, so no line needs clipping.\n  if (ew > 0)\n    for (let j = 0; j \u003c NE; j++) {\n      const i0 = EI[2 * j], i1 = EI[2 * j + 1];\n      let x = px[i0], y = py[i0];\n      const dx = px[i1] - x, dy = py[i1] - y, adx = dx \u003c 0 ? -dx : dx, ady = dy \u003c 0 ? -dy : dy;\n      const n = ceil(adx > ady ? adx : ady) || 1, w = (ew * sqrt(dx * dx + dy * dy)) / n;\n      const r = ec[j * 3] * w, g = ec[j * 3 + 1] * w, b = ec[j * 3 + 2] * w, sx = dx / n, sy = dy / n;\n      for (let s = 0; s \u003c= n; s++, x += sx, y += sy) {\n        const xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n        const w11 = fx * fy, w10 = fx - w11, w01 = fy - w11, w00 = 1 - fx - w01;\n        buf[q] += r * w00;\n        buf[q + 1] += g * w00;\n        buf[q + 2] += b * w00;\n        buf[q + 3] += r * w10;\n        buf[q + 4] += g * w10;\n        buf[q + 5] += b * w10;\n        buf[q + W3] += r * w01;\n        buf[q + W3 + 1] += g * w01;\n        buf[q + W3 + 2] += b * w01;\n        buf[q + W3 + 3] += r * w11;\n        buf[q + W3 + 4] += g * w11;\n        buf[q + W3 + 5] += b * w11;\n      }\n    }\n  // With the web turned off the vertices burn brighter.\n  const vc = P.vc, vw = 0.6 + 0.5 * max(0, -P.ew);\n  for (let i = 0; i \u003c NV; i++) {\n    const x = px[i], y = py[i], xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n    const w11 = fx * fy * vw, w10 = fx * vw - w11, w01 = fy * vw - w11, w00 = vw - fx * vw - w01;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = vc[i * 3 + c];\n      buf[q + c] += v * w00;\n      buf[q + 3 + c] += v * w10;\n      buf[q + W3 + c] += v * w01;\n      buf[q + W3 + 3 + c] += v * w11;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf;\n  buf.fill(0);\n  view(P, P.ph, 0);\n  view(P, P.ph + P.lead, HV);\n  for (let p = 0, y = 0; y \u003c 2 * HV; y++)\n    for (let x = 0; x \u003c W; x++, p += 3)\n      display.setPixel(x, y, 255 * (1 - exp(-1.6 * buf[p])), 255 * (1 - exp(-1.6 * buf[p + 1])), 255 * (1 - exp(-1.6 * buf[p + 2])));\n}\n","layer":{"id":"layer-gosset-polytope","type":"code","name":"gosset-polytope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gosset Polytope\n// Family:  geometry\n// Idea:    The 240 roots of E8 and the 6720 edges between them, Gosset's 4₂₁ polytope, projected out of eight dimensions into two windows: the upper one opens on the Coxeter plane picture, eight rings of 30, and swings from there through the Coxeter planes of E7, E6, D5, D4 and D6 and back, while the lower one runs a plane ahead.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gosset's 4₂₁ polytope (Thorold Gosset, 1900) and the E8 root system (Wilhelm Killing 1888, Élie Cartan 1894), in Peter McMullen's Petrie projection, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5\n//\n// Knob 1: Hue. Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan.\n// Knob 2: Speed. At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes.\n// Knob 3: Edges. How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white.\n// Knob 4: Plane. How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind.\n// Buttons: K1 tap runs both windows back (or on) along the round until the upper one stands on the Coxeter plane again, in a second or so.\n\n// Each window is 64 LEDs square; the polytope fills a circle of radius 29.5\n// in it, so the outer ring of the Coxeter plane picture has 30 vertices about\n// six LEDs apart and the inner one 30 on a circle of radius six.\nconst W = 64, HV = 64, CX = 31.5, RAD = 29.5;\nconst { max, floor, ceil, round, sqrt, cos, sin, abs, exp, atan2, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst dot = (a, b) => a.reduce((s, x, i) => s + x * b[i], 0);\n\n// The roots: every (±1, ±1, 0, 0, 0, 0, 0, 0) in any order, 112 of them,\n// and every (±1/2)^8 with an even number of minus signs, 128 more.\nconst ROOTS = [];\nfor (let i = 0; i \u003c 8; i++)\n  for (let j = i + 1; j \u003c 8; j++)\n    for (let s = 0; s \u003c 4; s++) {\n      const v = new Array(8).fill(0);\n      v[i] = s & 1 ? -1 : 1;\n      v[j] = s & 2 ? -1 : 1;\n      ROOTS.push(v);\n    }\nfor (let m = 0; m \u003c 256; m++) {\n  let neg = 0;\n  for (let k = 0; k \u003c 8; k++) neg += (m >> k) & 1;\n  if (neg % 2 === 0) ROOTS.push([...Array(8)].map((_, k) => ((m >> k) & 1 ? -0.5 : 0.5)));\n}\nconst NV = ROOTS.length;\nconst RF = new Float64Array(NV * 8);\nROOTS.forEach((r, i) => r.forEach((x, k) => (RF[i * 8 + k] = x)));\n\n// Two roots are joined when they stand sqrt 2 apart, when their dot product\n// is 1: 56 edges at each vertex, 6720 in all.\nconst EDGE = [];\nfor (let i = 0; i \u003c NV; i++) for (let j = i + 1; j \u003c NV; j++) if (dot(ROOTS[i], ROOTS[j]) === 1) EDGE.push(i, j);\nconst NE = EDGE.length / 2;\nconst EI = Uint16Array.from(EDGE);\n\n// The simple roots of E8 (Bourbaki's numbering): a1 is the spinor root, a2\n// hangs off a4, and a1 a3 a4 a5 a6 a7 a8 is the long arm.\nconst e = (i, s = 1, j = -1, t = 0) => [...Array(8)].map((_, k) => (k === i ? s : k === j ? t : 0));\nconst SIMPLE = [[0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5], e(0, 1, 1, 1), e(1, 1, 0, -1), e(2, 1, 1, -1), e(3, 1, 2, -1), e(4, 1, 3, -1), e(5, 1, 4, -1), e(6, 1, 5, -1)];\n\n// The Coxeter plane of a simply laced root system from its simple roots\n// (Steinberg): colour the Dynkin diagram black and white, take the\n// Perron-Frobenius vector x of the diagram, and the plane is spanned by the\n// sum of x_i a_i over the black roots and the same sum over the white ones.\n// The product of all the reflections turns it by one h-th of a turn.\nfunction coxeterPlane(S) {\n  const k = S.length, adj = S.map((a) => S.map((b) => (dot(a, b) === -1 ? 1 : 0)));\n  const col = new Array(k).fill(-1), stack = [0];\n  col[0] = 0;\n  while (stack.length) {\n    const i = stack.pop();\n    for (let j = 0; j \u003c k; j++) if (adj[i][j] && col[j] \u003c 0) (col[j] = 1 - col[i]), stack.push(j);\n  }\n  let x = new Array(k).fill(1), lam = 0;\n  for (let it = 0; it \u003c 600; it++) {\n    const y = x.map((xi, i) => 2 * xi + adj[i].reduce((s, a, j) => s + a * x[j], 0));\n    lam = sqrt(dot(y, y)) - 2;\n    x = y.map((v) => v / (lam + 2));\n  }\n  const u = new Array(8).fill(0), w = new Array(8).fill(0);\n  S.forEach((a, i) => a.forEach((ai, d) => ((col[i] ? w : u)[d] += x[i] * ai)));\n  const nu = sqrt(dot(u, u));\n  for (let d = 0; d \u003c 8; d++) u[d] /= nu;\n  const pr = dot(w, u);\n  for (let d = 0; d \u003c 8; d++) w[d] -= pr * u[d];\n  const nw = sqrt(dot(w, w));\n  // The diagram's largest eigenvalue is 2 cos(pi / h), h the Coxeter number.\n  return [u, w.map((v) => v / nw), round(PI / Math.acos(lam / 2))];\n}\n\n// The round: E8 (30-fold), then down the chain E8 > E7 > E6 > D5 > D4 one\n// node of the diagram at a time (18, 12, 8 and 6-fold), up through D6\n// (10-fold) and back.\nconst STOPS = [SIMPLE, SIMPLE.slice(0, 7), SIMPLE.slice(0, 6), SIMPLE.slice(1, 6), SIMPLE.slice(1, 5), SIMPLE.slice(1, 7)].map(coxeterPlane);\nconst NS = STOPS.length;\n\n// Each swing is the shortest way from one plane to the next (a geodesic in\n// the Grassmannian): the two principal angles between the planes, turned\n// through together. The frame carries its own turn within the plane from\n// one swing to the next, so the windows never jump.\nfunction svd2(a, b, c, d) {\n  const E = (a + d) / 2, F = (a - d) / 2, G = (c + b) / 2, H = (c - b) / 2;\n  const Q = hypot(E, H), R = hypot(F, G), a1 = atan2(G, F), a2 = atan2(H, E);\n  // C = rot(phi) diag(Q + R, Q - R) rot(theta)\n  return { s1: Q + R, s2: Q - R, phi: (a2 + a1) / 2, th: (a2 - a1) / 2 };\n}\nconst comb = (p, q, cp, cq) => p.map((x, i) => cp * x + cq * q[i]);\n// Each stop is shown turned so a vertex of its outer polygon points straight\n// up; the turn is picked among the h equal ones to be the nearest to the\n// last, and the swing eases from one to the next.\nfunction upright(u, v, h, near) {\n  let best = 0, a = 0;\n  for (const r of ROOTS) {\n    const x = dot(r, u), y = dot(r, v), q = hypot(x, y);\n    if (q > best + 1e-9) (best = q), (a = atan2(y, x));\n  }\n  const t = -PI / 2 - a, step = (2 * PI) / h;\n  return t + round((near - t) / step) * step;\n}\nconst SEG = [];\nlet F = STOPS[0], turn = upright(F[0], F[1], 30, 0);\nfor (let k = 0; k \u003c NS; k++) {\n  let [v1, v2, h] = STOPS[(k + 1) % NS];\n  const [f1, f2] = F;\n  if (dot(f1, v1) * dot(f2, v2) - dot(f1, v2) * dot(f2, v1) \u003c 0) v2 = v2.map((x) => -x);\n  const { s1, s2, phi, th } = svd2(dot(f1, v1), dot(f1, v2), dot(f2, v1), dot(f2, v2));\n  const ca = cos(phi), sa = sin(phi), cb = cos(-th), sb = sin(-th);\n  // Principal vectors: P = F rot(phi), Q = V rot(theta)^T.\n  const p = [comb(f1, f2, ca, sa), comb(f1, f2, -sa, ca)];\n  const q = [comb(v1, v2, cb, sb), comb(v1, v2, -sb, cb)];\n  const ang = [], n = [];\n  [s1, s2].forEach((s, i) => {\n    const t = comb(q[i], p[i], 1, -cl(s, -1, 1)), nt = sqrt(dot(t, t));\n    ang.push(Math.acos(cl(s, -1, 1)));\n    n.push(nt > 1e-9 ? t.map((x) => x / nt) : new Array(8).fill(0));\n  });\n  F = [comb(q[0], q[1], cos(phi), -sin(phi)), comb(q[0], q[1], sin(phi), cos(phi))];\n  // Back on the Coxeter plane the frame may come round mirrored; the\n  // picture there is symmetric under the mirror, so turning a vertex up\n  // closes the loop all the same.\n  const next = upright(F[0], F[1], h, turn);\n  SEG.push({ p, n, ang, phi, t0: turn, t1: next });\n  turn = next;\n}\n\n// Where the frame stands at phase s (in stops): hold 5/12 of each stop, then\n// swing to the next with a smooth start and end. Returns the turn.\nconst HOLD = 5 / 12;\nfunction frameAt(s, out) {\n  const n = ((s % NS) + NS) % NS, k = floor(n), f = n - k, G = SEG[k];\n  let m = cl((f - HOLD) / (1 - HOLD), 0, 1);\n  m = m * m * m * (m * (m * 6 - 15) + 10);\n  const c1 = cos(m * G.ang[0]), s1 = sin(m * G.ang[0]), c2 = cos(m * G.ang[1]), s2 = sin(m * G.ang[1]);\n  const cp = cos(G.phi), sp = sin(G.phi);\n  for (let d = 0; d \u003c 8; d++) {\n    const g1 = c1 * G.p[0][d] + s1 * G.n[0][d], g2 = c2 * G.p[1][d] + s2 * G.n[1][d];\n    out[d] = g1 * cp - g2 * sp;\n    out[8 + d] = g1 * sp + g2 * cp;\n  }\n  return G.t0 + (G.t1 - G.t0) * m;\n}\n\n// Eight rings of 30 on the Coxeter plane; each vertex keeps the colour of\n// its ring wherever the swings carry it.\nconst RING = new Uint8Array(NV);\n{\n  const [u, v] = STOPS[0], rr = ROOTS.map((r) => hypot(dot(r, u), dot(r, v)));\n  const sorted = [...rr].sort((a, b) => a - b), levels = sorted.filter((x, i) => i === 0 || x - sorted[i - 1] > 1e-3);\n  rr.forEach((x, i) => (RING[i] = levels.filter((l) => l \u003c x + 1e-3).length - 1));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = {\n    ph: 0, lead: 1, hue: -1, ew: 1, snap: null,\n    buf: new Float32Array(W * HV * 2 * 3), fr: new Float64Array(16),\n    px: new Float32Array(NV), py: new Float32Array(NV),\n    vc: new Float32Array(NV * 3), ec: new Float32Array(NE * 3), rc: new Float32Array(8 * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.lead = cl(k[3], 1, 5);\n  P.ew = cl(k[2], -1, 1);\n  const hue = k[0] || 0;\n  if (hue !== P.hue) {\n    P.hue = hue;\n    for (let r = 0; r \u003c 8; r++) hsv(0.15 + hue - r * 0.095, 0.95 - 0.02 * r, 1, P.rc, r * 3);\n    for (let i = 0; i \u003c NV; i++) for (let c = 0; c \u003c 3; c++) P.vc[i * 3 + c] = P.rc[RING[i] * 3 + c];\n    for (let j = 0; j \u003c NE; j++) for (let c = 0; c \u003c 3; c++) P.ec[j * 3 + c] = (P.vc[EI[2 * j] * 3 + c] + P.vc[EI[2 * j + 1] * 3 + c]) / 2;\n  }\n  if (P.snap) {\n    P.snap.t += d;\n    const u = cl(P.snap.t / P.snap.T, 0, 1), m = u * u * (3 - 2 * u);\n    P.ph = P.snap.a + (P.snap.b - P.snap.a) * m;\n    if (u >= 1) P.snap = null;\n  } else {\n    P.ph = (P.ph + (d * sp) / 12) % NS;\n    // K1: run back or on to the nearer Coxeter plane, 0.4 s a stop.\n    if (input.btnPressed && input.btnPressed[0]) {\n      const b = round(P.ph / NS) * NS;\n      P.snap = { a: P.ph, b, t: 0, T: max(0.8, abs(b - P.ph) * 0.4) };\n    }\n  }\n}\n\n// One window: project the 240 roots onto the plane, draw the 6720 edges as\n// additive light, then the vertices on top.\nfunction view(P, ph, y0) {\n  const fr = P.fr, buf = P.buf, px = P.px, py = P.py;\n  const a = frameAt(ph, fr), ca = cos(a), sa = sin(a);\n  let rmax = 0;\n  for (let i = 0; i \u003c NV; i++) {\n    let x = 0, y = 0;\n    for (let d = 0, o = i * 8; d \u003c 8; d++) (x += RF[o + d] * fr[d]), (y += RF[o + d] * fr[8 + d]);\n    px[i] = ca * x - sa * y;\n    py[i] = sa * x + ca * y;\n    rmax = max(rmax, px[i] * px[i] + py[i] * py[i]);\n  }\n  const sc = RAD / sqrt(rmax), cy = y0 + 31.5;\n  for (let i = 0; i \u003c NV; i++) (px[i] = CX + px[i] * sc - 0.5), (py[i] = cy + py[i] * sc - 0.5);\n  const ew = P.ew \u003c= -1 ? 0 : 0.012 * (P.ew + 1) * (P.ew + 1), ec = P.ec, W3 = W * 3;\n  // RAD keeps every point a pixel inside the window, so no line needs clipping.\n  if (ew > 0)\n    for (let j = 0; j \u003c NE; j++) {\n      const i0 = EI[2 * j], i1 = EI[2 * j + 1];\n      let x = px[i0], y = py[i0];\n      const dx = px[i1] - x, dy = py[i1] - y, adx = dx \u003c 0 ? -dx : dx, ady = dy \u003c 0 ? -dy : dy;\n      const n = ceil(adx > ady ? adx : ady) || 1, w = (ew * sqrt(dx * dx + dy * dy)) / n;\n      const r = ec[j * 3] * w, g = ec[j * 3 + 1] * w, b = ec[j * 3 + 2] * w, sx = dx / n, sy = dy / n;\n      for (let s = 0; s \u003c= n; s++, x += sx, y += sy) {\n        const xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n        const w11 = fx * fy, w10 = fx - w11, w01 = fy - w11, w00 = 1 - fx - w01;\n        buf[q] += r * w00;\n        buf[q + 1] += g * w00;\n        buf[q + 2] += b * w00;\n        buf[q + 3] += r * w10;\n        buf[q + 4] += g * w10;\n        buf[q + 5] += b * w10;\n        buf[q + W3] += r * w01;\n        buf[q + W3 + 1] += g * w01;\n        buf[q + W3 + 2] += b * w01;\n        buf[q + W3 + 3] += r * w11;\n        buf[q + W3 + 4] += g * w11;\n        buf[q + W3 + 5] += b * w11;\n      }\n    }\n  // With the web turned off the vertices burn brighter.\n  const vc = P.vc, vw = 0.6 + 0.5 * max(0, -P.ew);\n  for (let i = 0; i \u003c NV; i++) {\n    const x = px[i], y = py[i], xi = x | 0, yi = y | 0, fx = x - xi, fy = y - yi, q = (yi * W + xi) * 3;\n    const w11 = fx * fy * vw, w10 = fx * vw - w11, w01 = fy * vw - w11, w00 = vw - fx * vw - w01;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = vc[i * 3 + c];\n      buf[q + c] += v * w00;\n      buf[q + 3 + c] += v * w10;\n      buf[q + W3 + c] += v * w01;\n      buf[q + W3 + 3 + c] += v * w11;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf;\n  buf.fill(0);\n  view(P, P.ph, 0);\n  view(P, P.ph + P.lead, HV);\n  for (let p = 0, y = 0; y \u003c 2 * HV; y++)\n    for (let x = 0; x \u003c W; x++, p += 3)\n      display.setPixel(x, y, 255 * (1 - exp(-1.6 * buf[p])), 255 * (1 - exp(-1.6 * buf[p + 1])), 255 * (1 - exp(-1.6 * buf[p + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Edges=-1..1, Plane=1..5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the eight ring colours round the colour wheel together; at 0 the inner ring is gold and the outer one cyan."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 each plane holds for two and a half seconds and the swing to the next takes three and a half, so the round of six planes takes 36 seconds; at 0.2 it takes six minutes."},{"name":"Edges","min":-1,"max":1,"about":"How bright the web of 6720 edges is: at -1 only the 240 vertices, at 0 a faint web, at 1 four times brighter, where the overlaps burn white."},{"name":"Plane","min":1,"max":5,"about":"How many planes ahead along the round the lower window runs. At 1 it shows E7's 18-fold picture under the 30-fold one and each picture rises from the lower window to the upper; at 4 it is D4's six-pointed star, and at 5 it runs one plane behind."}],"start":[0,2,0,1],"measures":{"motion":0.1027,"detail":0.0626,"edges":0.2381,"complexity":1.7381,"coverage":0.5762,"colour":0.1523,"drift":0.0443},"knobResponse":[0.101,0.0579,0.4228,0.087]},{"slug":"guilloche","title":"Guilloché","family":"line","round":16,"note":"장미 기관으로 깎은 은판의 보리알 띠와 물결 띠가 패널 높이의 타원으로 서고, 등불이 돌면 그 쪽을 향한 홈만 금빛으로 번쩍여요. K1 을 누르면 칼끝이 귀퉁이에서 가운데로 들어오며 판을 새 무늬로 다시 깎아요.","idea":"An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.","buttons":"K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.","code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","layer":{"id":"layer-guilloche","type":"code","name":"guilloche","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"Silver at 0, then champagne, yellow gold and rose gold at the far end."},{"name":"Light","min":0,"max":4,"about":"How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift."},{"name":"Lobes","min":12,"max":36,"about":"Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer."},{"name":"Phasing","min":0,"max":0.5,"about":"How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn."}],"start":[0,2,12,0.06],"measures":{"motion":0.3271,"detail":0.2382,"edges":0.6848,"complexity":2.494,"coverage":1,"colour":0.0828,"drift":0.1447},"knobResponse":[0.1324,0.1841,0.2378,0.2082]},{"slug":"hair-gloss","title":"Hair Gloss","family":"cosmetic","round":34,"note":"판 전체에 윤기 나는 긴 머리카락 230가닥이 위에서 끝까지 늘어져 산들바람에 흔들려요. 가닥이 빛과 눈의 반벡터에 직각인 줄에 흰 광택 띠가 서고 그 아래로 머리색의 둘째 띠가 따라와 머리가 흔들릴 때마다 오르내리며, 9초마다 보이지 않는 빗이 내려가 빗살 자리를 가르고 지나간 자리를 더 매끄럽고 반짝이게 해요.","idea":"Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.","buttons":"K1 tap sends the comb through now.","code":"// ===== Patternflow pattern =====\n// Title:   Hair Gloss\n// Family:  cosmetic\n// Idea:    Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the shine band of glossy hair in haircare displays; the highlights are a fibre highlight (James Kajiya and Timothy Kay, 1989), the white one shifted toward the root and a tinted one toward the tip (Stephen Marschner and others, 2003)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1\n//\n// Knob 1: Hue. The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue.\n// Knob 2: Speed. At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Wave. At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1.\n// Knob 4: Shine. How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it.\n// Buttons: K1 tap sends the comb through now.\n\nconst W = 64, H = 128, N = 230, Y0 = -2, ROWS = 160;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The sheet of hair leans toward the eye by tz per row. The primary highlight\n// sits where a strand's tangent is square to the half vector, tz about 0.3.\nconst TZ0 = -HY / HZ;\n\n// A smooth wobble along one strand: three sines at random pitch.\nfunction wobble(out, o) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c ROWS; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, wave: 0, shine: 0, begun: false, t: 0,\n    comb: -10, combing: false, combWait: 1.2, teeth: 0,\n    X0: new Float32Array(N), B: new Float32Array(N), SL: new Float32Array(N), D: new Float32Array(N), END: new Float32Array(N), TO: new Float32Array(N),\n    NX: new Float32Array(N * ROWS), NT: new Float32Array(N * ROWS),\n    fz: new Float32Array(ROWS).fill(1), part: new Float32Array(ROWS),\n    sx: new Float32Array(ROWS), tz: new Float32Array(ROWS), ws: new Float32Array(ROWS), wc: new Float32Array(ROWS),\n    acc: new Float32Array(W * H * 3), wt: new Float32Array(W * H), c: [0, 0, 0], body: [0, 0, 0], tint: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let i = 0; i \u003c N; i++) {\n    S.X0[i] = -7 + (78 * (i + random())) / N;\n    S.B[i] = 0.28 + 0.72 * random() ** 0.6;\n    S.TO[i] = (random() - 0.5) * 0.12;\n    S.SL[i] = (random() - 0.5) * 0.025;\n    S.D[i] = (random() - 0.5) * 0.6;\n    S.END[i] = 112 + 40 * random();\n    wobble(S.NX, i * ROWS);\n    wobble(S.NT, i * ROWS);\n  }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.t += ds;\n  // The comb: every 9 s at Speed 2 it runs down from above the panel to past\n  // the ends in 2.4 s. Hair it has passed lies smooth and loosens again over\n  // about 6 s; the partings behind its teeth close over about 1.2 s.\n  const was = S.comb;\n  if (!S.combing) {\n    S.combWait -= ds;\n    if (S.combWait \u003c= 0) startComb(S);\n  } else {\n    S.comb += (ds * 170) / 2.4;\n    if (S.comb > 160) {\n      S.combing = false;\n      S.combWait = 6.6;\n    }\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0;\n    S.fz[r] += (1 - S.fz[r]) * (1 - exp(-ds / 6));\n    S.part[r] *= exp(-ds / 1.2);\n    // The teeth bite over the 8 rows behind the comb's edge.\n    if (S.combing && y \u003c S.comb) {\n      const a = sm(0, 8, S.comb - y);\n      S.fz[r] = min(S.fz[r], 1 - 0.55 * a);\n      S.part[r] = max(S.part[r], a * (y >= was - 9 ? 1 : 0));\n    }\n  }\n}\n\nfunction startComb(S) {\n  S.combing = true;\n  S.comb = -10;\n  S.teeth = random() * 7;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wave = cl(k[2], 0, 1);\n  S.shine = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open with the band a third of the way down and rising.\n    S.t = 1.5;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.combing) startComb(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { acc, wt, sx, tz, ws, wc, fz, part, NX, NT, X0, B, SL, D, END, c, body, tint } = S;\n  acc.fill(0);\n  wt.fill(0);\n  const t = S.t, wv = S.wave;\n  // Per row: the breeze, a wave running down the hair that grows toward the\n  // ends; the lean of the sheet, which puts the shine band where tz meets\n  // TZ0 and slides it up and down as the hair sways; and the waves of wavy\n  // hair, sideways and in depth a quarter turn apart.\n  const yb = 46 + 13 * sin(2 * PI * (t / 6.5)) + 4 * sin(2 * PI * (t / 2.9) + 1);\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0, reach = ((y + 30) / 160) ** 1.6;\n    sx[r] = 3.2 * reach * sin(2 * PI * (y / 120 - t / 4.6)) + 1.1 * reach * sin(2 * PI * (y / 45 - t / 2.3) + 2);\n    const a = (2 * PI * y) / 44;\n    tz[r] = TZ0 + 0.016 * (1 - 0.6 * wv) * (yb - y) + 0.3 * wv * sin(a + 0.6 * sin(2 * PI * (t / 7.3)));\n    ws[r] = 3 * wv * cos(a);\n    wc[r] = 3 * wv * -sin(a);\n  }\n  const sh = S.shine, p1 = 0.5 * 320 * 4 ** sh, k1 = 0.9 + 0.4 * sh, p2 = 0.4 * p1, k2 = 0.45 + 0.15 * sh, k0 = 0.24 * (1 - sh);\n  const teeth = S.teeth;\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * ROWS, cd = cos(D[i]), sd = sin(D[i]), end = END[i], b = B[i], to = S.TO[i], x0 = X0[i], sl = SL[i];\n    let px = 0;\n    const last = min(H - 1, floor(end));\n    for (let r = 0; r \u003c= last - Y0; r++) {\n      const y = r + Y0, f = fz[r];\n      let x = x0 + sl * y + sx[r] + ws[r] * cd + wc[r] * sd + 0.4 * f * NX[o + r];\n      // Behind the comb the strands part round its teeth, 7 LEDs apart: each\n      // gap of 7 closes to 5.7, leaving a dark parting 1.3 LEDs wide.\n      const m = part[r];\n      if (m > 0.01) {\n        const u = (x - teeth) / 7, e = u - floor(u) - 0.5;\n        x -= m * 1.3 * e;\n      }\n      const tx = x - px;\n      px = x;\n      if (y \u003c 0) continue;\n      const z = tz[r] + to * f + 0.06 * f * NT[o + r];\n      const inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv;\n      // The primary highlight is shifted toward the root, the secondary,\n      // tinted by the hair, toward the tip.\n      const t1 = th - 0.05, t2 = th + 0.11;\n      const smooth = 1 + 0.45 * (1 - f);\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      // A sharp band and, wider and weaker, the sheen round it that a duller\n      // finish spreads out.\n      const s1 = smooth * (k1 * exp(p1 * l1) + k0 * exp(5 * l1)), s2 = smooth * k2 * exp(p2 * log(max(1e-6, 1 - t2 * t2)));\n      const lam = (0.55 * z + 0.82) / sqrt(1 + z * z), dif = b * (0.3 + 0.7 * max(0, lam));\n      const tip = cl((end - y) / 7, 0, 1), w0 = tip * (0.4 + 0.6 * tip);\n      const xi = floor(x), fr = x - xi, q = y * W + xi;\n      if (xi >= 0 && xi \u003c W) {\n        const w = (1 - fr) * w0;\n        acc[q * 3] += dif * w;\n        acc[q * 3 + 1] += s2 * b * w;\n        acc[q * 3 + 2] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q] += w;\n      }\n      if (xi + 1 >= 0 && xi + 1 \u003c W) {\n        const w = fr * w0;\n        acc[q * 3 + 3] += dif * w;\n        acc[q * 3 + 4] += s2 * b * w;\n        acc[q * 3 + 5] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q + 1] += w;\n      }\n    }\n  }\n  // Each LED: the mean of the strands over it, darker where they are fewer\n  // than 2.4. Channel 0 holds the body, 1 the tinted secondary, 2 the white\n  // primary.\n  // Orange and yellow read brown and olive at mid level on the panel, so\n  // round hue 0.12 the hair is lifted toward copper and honey blonde.\n  const h = S.hue + 0.76, hh = h - floor(h), warm = max(0, 1 - Math.abs(hh - 0.12) / 0.11);\n  hsv(h, 0.78 - 0.18 * warm, 1 + 0.6 * warm, body);\n  hsv(h, 0.8 - 0.2 * warm, 1, tint);\n  const RHO = (N / 78) * 0.8;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO);\n      const dv = acc[q * 3] / n, s2 = acc[q * 3 + 1] / n, s1 = acc[q * 3 + 2] / n;\n      for (let ch = 0; ch \u003c 3; ch++) c[ch] = 0.52 * dv * body[ch] + 0.9 * s2 * tint[ch] + s1 * (0.8 + 0.2 * tint[ch]);\n      display.setPixel(x, y, round(255 * (1 - exp(-1.4 * c[0]))), round(255 * (1 - exp(-1.4 * c[1]))), round(255 * (1 - exp(-1.4 * c[2]))));\n    }\n}\n","layer":{"id":"layer-hair-gloss","type":"code","name":"hair-gloss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hair Gloss\n// Family:  cosmetic\n// Idea:    Long glossy hair hangs the full height of the panel, 230 strands swaying in a light breeze that runs down them, with a white shine band across it where the strands lie square to the half vector and a weaker band in the hair's own colour below it, both sliding up and down as the hair sways; every 9 seconds a comb runs down through it, the strands part round its teeth and lie smoother and shinier behind.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the shine band of glossy hair in haircare displays; the highlights are a fibre highlight (James Kajiya and Timothy Kay, 1989), the white one shifted toward the root and a tinted one toward the tip (Stephen Marschner and others, 2003)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1\n//\n// Knob 1: Hue. The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue.\n// Knob 2: Speed. At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Wave. At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1.\n// Knob 4: Shine. How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it.\n// Buttons: K1 tap sends the comb through now.\n\nconst W = 64, H = 128, N = 230, Y0 = -2, ROWS = 160;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The sheet of hair leans toward the eye by tz per row. The primary highlight\n// sits where a strand's tangent is square to the half vector, tz about 0.3.\nconst TZ0 = -HY / HZ;\n\n// A smooth wobble along one strand: three sines at random pitch.\nfunction wobble(out, o) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c ROWS; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, wave: 0, shine: 0, begun: false, t: 0,\n    comb: -10, combing: false, combWait: 1.2, teeth: 0,\n    X0: new Float32Array(N), B: new Float32Array(N), SL: new Float32Array(N), D: new Float32Array(N), END: new Float32Array(N), TO: new Float32Array(N),\n    NX: new Float32Array(N * ROWS), NT: new Float32Array(N * ROWS),\n    fz: new Float32Array(ROWS).fill(1), part: new Float32Array(ROWS),\n    sx: new Float32Array(ROWS), tz: new Float32Array(ROWS), ws: new Float32Array(ROWS), wc: new Float32Array(ROWS),\n    acc: new Float32Array(W * H * 3), wt: new Float32Array(W * H), c: [0, 0, 0], body: [0, 0, 0], tint: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let i = 0; i \u003c N; i++) {\n    S.X0[i] = -7 + (78 * (i + random())) / N;\n    S.B[i] = 0.28 + 0.72 * random() ** 0.6;\n    S.TO[i] = (random() - 0.5) * 0.12;\n    S.SL[i] = (random() - 0.5) * 0.025;\n    S.D[i] = (random() - 0.5) * 0.6;\n    S.END[i] = 112 + 40 * random();\n    wobble(S.NX, i * ROWS);\n    wobble(S.NT, i * ROWS);\n  }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp;\n  S.t += ds;\n  // The comb: every 9 s at Speed 2 it runs down from above the panel to past\n  // the ends in 2.4 s. Hair it has passed lies smooth and loosens again over\n  // about 6 s; the partings behind its teeth close over about 1.2 s.\n  const was = S.comb;\n  if (!S.combing) {\n    S.combWait -= ds;\n    if (S.combWait \u003c= 0) startComb(S);\n  } else {\n    S.comb += (ds * 170) / 2.4;\n    if (S.comb > 160) {\n      S.combing = false;\n      S.combWait = 6.6;\n    }\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0;\n    S.fz[r] += (1 - S.fz[r]) * (1 - exp(-ds / 6));\n    S.part[r] *= exp(-ds / 1.2);\n    // The teeth bite over the 8 rows behind the comb's edge.\n    if (S.combing && y \u003c S.comb) {\n      const a = sm(0, 8, S.comb - y);\n      S.fz[r] = min(S.fz[r], 1 - 0.55 * a);\n      S.part[r] = max(S.part[r], a * (y >= was - 9 ? 1 : 0));\n    }\n  }\n}\n\nfunction startComb(S) {\n  S.combing = true;\n  S.comb = -10;\n  S.teeth = random() * 7;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wave = cl(k[2], 0, 1);\n  S.shine = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open with the band a third of the way down and rising.\n    S.t = 1.5;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.combing) startComb(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { acc, wt, sx, tz, ws, wc, fz, part, NX, NT, X0, B, SL, D, END, c, body, tint } = S;\n  acc.fill(0);\n  wt.fill(0);\n  const t = S.t, wv = S.wave;\n  // Per row: the breeze, a wave running down the hair that grows toward the\n  // ends; the lean of the sheet, which puts the shine band where tz meets\n  // TZ0 and slides it up and down as the hair sways; and the waves of wavy\n  // hair, sideways and in depth a quarter turn apart.\n  const yb = 46 + 13 * sin(2 * PI * (t / 6.5)) + 4 * sin(2 * PI * (t / 2.9) + 1);\n  for (let r = 0; r \u003c ROWS; r++) {\n    const y = r + Y0, reach = ((y + 30) / 160) ** 1.6;\n    sx[r] = 3.2 * reach * sin(2 * PI * (y / 120 - t / 4.6)) + 1.1 * reach * sin(2 * PI * (y / 45 - t / 2.3) + 2);\n    const a = (2 * PI * y) / 44;\n    tz[r] = TZ0 + 0.016 * (1 - 0.6 * wv) * (yb - y) + 0.3 * wv * sin(a + 0.6 * sin(2 * PI * (t / 7.3)));\n    ws[r] = 3 * wv * cos(a);\n    wc[r] = 3 * wv * -sin(a);\n  }\n  const sh = S.shine, p1 = 0.5 * 320 * 4 ** sh, k1 = 0.9 + 0.4 * sh, p2 = 0.4 * p1, k2 = 0.45 + 0.15 * sh, k0 = 0.24 * (1 - sh);\n  const teeth = S.teeth;\n  for (let i = 0; i \u003c N; i++) {\n    const o = i * ROWS, cd = cos(D[i]), sd = sin(D[i]), end = END[i], b = B[i], to = S.TO[i], x0 = X0[i], sl = SL[i];\n    let px = 0;\n    const last = min(H - 1, floor(end));\n    for (let r = 0; r \u003c= last - Y0; r++) {\n      const y = r + Y0, f = fz[r];\n      let x = x0 + sl * y + sx[r] + ws[r] * cd + wc[r] * sd + 0.4 * f * NX[o + r];\n      // Behind the comb the strands part round its teeth, 7 LEDs apart: each\n      // gap of 7 closes to 5.7, leaving a dark parting 1.3 LEDs wide.\n      const m = part[r];\n      if (m > 0.01) {\n        const u = (x - teeth) / 7, e = u - floor(u) - 0.5;\n        x -= m * 1.3 * e;\n      }\n      const tx = x - px;\n      px = x;\n      if (y \u003c 0) continue;\n      const z = tz[r] + to * f + 0.06 * f * NT[o + r];\n      const inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv;\n      // The primary highlight is shifted toward the root, the secondary,\n      // tinted by the hair, toward the tip.\n      const t1 = th - 0.05, t2 = th + 0.11;\n      const smooth = 1 + 0.45 * (1 - f);\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      // A sharp band and, wider and weaker, the sheen round it that a duller\n      // finish spreads out.\n      const s1 = smooth * (k1 * exp(p1 * l1) + k0 * exp(5 * l1)), s2 = smooth * k2 * exp(p2 * log(max(1e-6, 1 - t2 * t2)));\n      const lam = (0.55 * z + 0.82) / sqrt(1 + z * z), dif = b * (0.3 + 0.7 * max(0, lam));\n      const tip = cl((end - y) / 7, 0, 1), w0 = tip * (0.4 + 0.6 * tip);\n      const xi = floor(x), fr = x - xi, q = y * W + xi;\n      if (xi >= 0 && xi \u003c W) {\n        const w = (1 - fr) * w0;\n        acc[q * 3] += dif * w;\n        acc[q * 3 + 1] += s2 * b * w;\n        acc[q * 3 + 2] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q] += w;\n      }\n      if (xi + 1 >= 0 && xi + 1 \u003c W) {\n        const w = fr * w0;\n        acc[q * 3 + 3] += dif * w;\n        acc[q * 3 + 4] += s2 * b * w;\n        acc[q * 3 + 5] += s1 * (0.35 + 0.65 * b) * w;\n        wt[q + 1] += w;\n      }\n    }\n  }\n  // Each LED: the mean of the strands over it, darker where they are fewer\n  // than 2.4. Channel 0 holds the body, 1 the tinted secondary, 2 the white\n  // primary.\n  // Orange and yellow read brown and olive at mid level on the panel, so\n  // round hue 0.12 the hair is lifted toward copper and honey blonde.\n  const h = S.hue + 0.76, hh = h - floor(h), warm = max(0, 1 - Math.abs(hh - 0.12) / 0.11);\n  hsv(h, 0.78 - 0.18 * warm, 1 + 0.6 * warm, body);\n  hsv(h, 0.8 - 0.2 * warm, 1, tint);\n  const RHO = (N / 78) * 0.8;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO);\n      const dv = acc[q * 3] / n, s2 = acc[q * 3 + 1] / n, s1 = acc[q * 3 + 2] / n;\n      for (let ch = 0; ch \u003c 3; ch++) c[ch] = 0.52 * dv * body[ch] + 0.9 * s2 * tint[ch] + s1 * (0.8 + 0.2 * tint[ch]);\n      display.setPixel(x, y, round(255 * (1 - exp(-1.4 * c[0]))), round(255 * (1 - exp(-1.4 * c[1]))), round(255 * (1 - exp(-1.4 * c[2]))));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wave=0..1, Shine=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The hair colour, once round the wheel, while the shine band stays near white and the band below it takes the hair's colour. At 0 violet, at 0.1 orchid, at 0.3 copper, at 0.33 caramel, at 0.36 honey blonde (from 0.25 to 0.47 the hair is lifted so it never reads muddy), at 0.6 green, at 0.7 teal, at 0.85 blue."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the breeze runs a wave down the hair every 4.6 s, swinging the ends up to 4 LEDs, the shine band rises and falls between rows 26 and 60 every 6.5 s, and a comb comes every 9 s and takes 2.4 s to pass; at 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Wave","min":0,"max":1,"about":"At 0 the hair is straight and carries one band. Toward 1 it waves, 44 rows a wave and up to 3 LEDs to each side, and each wave catches its own highlight: two bands at 0.5, three or four at 1."},{"name":"Shine","min":-1,"max":1,"about":"How glossy the finish is. At 0 the band is about 9 rows tall; at -1 it is 17 rows and dimmer, with a soft sheen over 50 rows round it, like matte hair; at 1 it is 4 rows and brighter, its edges ragged strand by strand, and the coloured band stands apart below it."}],"start":[0,2,0,0.06],"measures":{"motion":0.1831,"detail":0.0305,"edges":0.0431,"complexity":2.5214,"coverage":0.9825,"colour":0.1258,"drift":0.1122},"knobResponse":[0.2098,0.1537,0.1722,0.1466]},{"slug":"hair-oil","title":"Hair Oil","family":"cosmetic","round":37,"note":"청록 머리결이 위에서 아래까지 흘러내리며 두 번 갈라져 끝에서는 스무 묶음이 되고, 그 위를 카지야-케이 광택 띠가 오르내려요. 금색 오일 방울이 위쪽에 떨어져 가닥을 따라 미끄러지다 갈림길에서 둘로 나뉘고, 방울이 지나간 가닥은 한 톤 짙어지며 광택이 여섯 배 날카로워진 채 13초에 반쯤 흐려져요. K3 은 1초에 떨어지는 방울을 4개까지 늘리고, 누르면 방울 12개가 위에서 한꺼번에 흘러내려요.","idea":"A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.","buttons":"K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.","code":"// ===== Patternflow pattern =====\n// Title:   Hair Oil\n// Family:  cosmetic\n// Idea:    A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after hair oil serums, with the strands lit by the Kajiya-Kay model (James Kajiya and Timothy Kay, 1989)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1\n//\n// Knob 1: Hue. The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness.\n// Knob 2: Speed. At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Drops. Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in.\n// Knob 4: Wave. At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28.\n// Buttons: K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.\n\nconst W = 64, H = 128, NB = 110, NF = 150;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\nconst TZ0 = -HY / HZ;\n\n// Locks: five across the panel near the top, each parting in two at about\n// row 53 and again at about row 92, so 20 fine locks at the ends.\nconst F1 = [45, 62], F2 = [84, 100];\n// Oil: a drop's slide speed in rows a second at Speed 2 on a strand hanging\n// straight down, the oil it leaves per row, the volume below which it soaks\n// in, and how long the gloss takes to fall to 1/e.\nconst V0 = 40, LOSS = 0.0045, VMIN = 0.08, TAU = 12, PULL = 0.55;\n\nfunction wobble(out, o, n) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c n; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, rate: 0.5, wave: 0.06, t: 0, warm: false, acc: 0,\n    // Front strands, sorted by root position, with their locks at three levels.\n    fx0: new Float32Array(NF), k0: new Int32Array(NF), k1: new Int32Array(NF), k2: new Int32Array(NF),\n    fbr: new Float32Array(NF), fto: new Float32Array(NF), bp: new Int32Array(NF), bs: new Int32Array(NF),\n    c0: new Float32Array(5), c1: new Float32Array(10), c2: new Float32Array(20), lph: new Float32Array(5),\n    bx0: new Float32Array(NB), bb: new Float32Array(NB), bto: new Float32Array(NB),\n    NX: new Float32Array((NF + NB) * H), NT: new Float32Array((NF + NB) * H),\n    xs: new Float32Array(NF * H), zs: new Float32Array(NF * H), ty: new Float32Array(NF * H), G: new Float32Array(NF * H),\n    f1: new Float32Array(H), f2: new Float32Array(H), lph1: new Float32Array(10), lph2: new Float32Array(20),\n    sa: new Float32Array(20 * H), ca: new Float32Array(20 * H), reach: new Float32Array(H), pullr: new Float32Array(H),\n    sx: new Float32Array(H), tz: new Float32Array(H), ws: new Float32Array(H), wz: new Float32Array(H),\n    drops: [], born: [],\n    ab: new Float32Array(W * H * 5), wt: new Float32Array(W * H), gl: new Float32Array(W * H), fb: new Float32Array(W * H * 3),\n    body: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], oil: [0, 0, 0],\n  });\n  for (let i = 0; i \u003c NF; i++) S.fx0[i] = -4 + (72 * (i + random())) / NF;\n  for (let i = 0; i \u003c NF; i++) {\n    S.k0[i] = min(4, floor(((S.fx0[i] + 4) / 72) * 5));\n    S.fbr[i] = 0.35 + 0.65 * random() ** 0.6;\n    S.fto[i] = (random() - 0.5) * 0.1;\n    S.bs[i] = 8 + floor(random() * 4);\n    S.bp[i] = floor(random() * 11);\n  }\n  // Each lock parts into the halves of its strands, so a fork is a real fork.\n  const split = (kin, kout, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      const mem = [];\n      for (let i = 0; i \u003c NF; i++) if (kin[i] === k) mem.push(i);\n      const half = mem.length >> 1;\n      mem.forEach((i, m) => (kout[i] = 2 * k + (m \u003c half ? 0 : 1)));\n    }\n  };\n  split(S.k0, S.k1, 5);\n  split(S.k1, S.k2, 10);\n  const centre = (kk, c, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      let s = 0, m = 0;\n      for (let i = 0; i \u003c NF; i++) if (kk[i] === k) (s += S.fx0[i]), m++;\n      c[k] = m ? s / m : 0;\n    }\n  };\n  centre(S.k0, S.c0, 5);\n  centre(S.k1, S.c1, 10);\n  centre(S.k2, S.c2, 20);\n  for (let k = 0; k \u003c 5; k++) S.lph[k] = random() * 2 * PI;\n  for (let k = 0; k \u003c 10; k++) S.lph1[k] = S.lph[k >> 1] + (k & 1 ? 1 : -1) * (0.7 + 0.5 * random());\n  for (let k = 0; k \u003c 20; k++) S.lph2[k] = S.lph1[k >> 1] + (k & 1 ? 1 : -1) * (0.5 + 0.5 * random());\n  for (let i = 0; i \u003c NB; i++) {\n    S.bx0[i] = -5 + (74 * (i + random())) / NB;\n    S.bb[i] = 0.3 + 0.7 * random();\n    S.bto[i] = (random() - 0.5) * 0.14;\n  }\n  for (let i = 0; i \u003c NF + NB; i++) {\n    wobble(S.NX, i * H, H);\n    wobble(S.NT, i * H, H);\n  }\n}\n\n// Rows: the breeze running down the hair, the waves, and the lean of the\n// sheet toward the eye, which puts the shine band where tz meets TZ0.\nfunction rows(S) {\n  const t = S.t, wv = (S.wave + 1) / 2;\n  const yb = 44 + 12 * sin(2 * PI * (t / 7)) + 3 * sin(2 * PI * (t / 3.1) + 1);\n  for (let r = 0; r \u003c H; r++) {\n    const reach = ((r + 30) / 158) ** 1.6, a = (2 * PI * r) / 40;\n    S.sx[r] = 3 * reach * sin(2 * PI * (r / 120 - t / 4.6)) + reach * sin(2 * PI * (r / 45 - t / 2.3) + 2);\n    S.ws[r] = 4 * wv * sin(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.wz[r] = 0.32 * wv * cos(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.f1[r] = sm(F1[0], F1[1], r);\n    S.f2[r] = sm(F2[0], F2[1], r);\n    S.tz[r] = TZ0 + 0.015 * (1 - 0.5 * wv) * (yb - r);\n  }\n}\n\n// Where each front strand runs this frame, and how steeply.\n// Each lock waves in its own phase, and the two halves of a lock drift a\n// third of a turn apart past its fork, so the fork opens as a Y. The phase\n// of a strand depends only on its fine lock, so the sines are taken once a\n// row for each of the 20 fine locks.\nfunction geometry(S) {\n  const { xs, zs, ty, sx, tz, f1, f2, NX, NT, G, sa, ca, reach, pullr } = S, t = S.t, wv = (S.wave + 1) / 2, sway = 0.5 * sin(2 * PI * (t / 6.1));\n  for (let r = 0; r \u003c H; r++) {\n    reach[r] = ((r + 30) / 158) ** 1.6;\n    pullr[r] = PULL * sm(3, 32, r);\n  }\n  for (let k = 0; k \u003c 20; k++) {\n    const p0 = S.lph[k >> 2], p1 = S.lph1[k >> 1], p2 = S.lph2[k];\n    for (let r = 0; r \u003c H; r++) {\n      const a = (2 * PI * r) / 40 + sway + p0 + (p1 - p0) * f1[r] + (p2 - p1) * f2[r];\n      sa[k * H + r] = 4 * wv * sin(a);\n      ca[k * H + r] = 0.32 * wv * cos(a);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const x0 = S.fx0[i], c0 = S.c0[S.k0[i]], c1 = S.c1[S.k1[i]], c2 = S.c2[S.k2[i]], o = i * H, ko = S.k2[i] * H;\n    const lock = 1.2 * sin(2 * PI * (t / 3.7) + S.lph[S.k0[i]]), to = S.fto[i];\n    let px = 0;\n    for (let r = 0; r \u003c H; r++) {\n      const c = c0 + (c1 - c0) * f1[r] + (c2 - c1) * f2[r];\n      // Oil lays a strand smoother: its own wiggle shrinks by half.\n      const g = G[o + r], calm = g \u003c 0.06 ? 1 : 1 - 0.5 * sm(0.06, 0.6, g);\n      const x = x0 + pullr[r] * (c - x0) + sx[r] + sa[ko + r] + lock * reach[r] + 0.45 * calm * NX[o + r];\n      xs[o + r] = x;\n      const tx = r ? x - px : 0, z = tz[r] + ca[ko + r] + to + 0.07 * calm * NT[o + r];\n      zs[o + r] = z;\n      ty[o + r] = 1 / sqrt(tx * tx + 1 + z * z);\n      px = x;\n    }\n  }\n}\n\nfunction spawn(S, i, y, vol) {\n  if (S.drops.length \u003c 48) S.drops.push({ i, y, vol, v: 0, age: 0, soak: 0 });\n}\n\n// The front strand whose root lies nearest x.\nfunction strandAt(S, x) {\n  let best = 0, bd = 1e9;\n  for (let i = 0; i \u003c NF; i++) {\n    const d = abs(S.fx0[i] - x);\n    if (d \u003c bd) (bd = d), (best = i);\n  }\n  return best;\n}\n\n// A drop moves down its strand, wetting the strands within its radius on\n// every row it crosses; at a fork a drop with oil enough splits, half going\n// down the sibling lock.\nfunction slide(S, dp, ds) {\n  const { xs, ty, G } = S;\n  if (dp.soak > 0) {\n    dp.soak += ds;\n    return dp.soak \u003c 0.5;\n  }\n  dp.age += ds;\n  const r0 = cl(floor(dp.y), 0, H - 1);\n  const steep = ty[dp.i * H + r0] ** 4;\n  const vt = V0 * (0.45 + 0.55 * sqrt(dp.vol)) * steep * (dp.age \u003c 0.2 ? dp.age / 0.2 : 1);\n  dp.v += (vt - dp.v) * min(1, ds * 6);\n  const y1 = dp.y + dp.v * ds;\n  for (let r = floor(dp.y) + 1; r \u003c= floor(y1); r++) {\n    if (r >= H) break;\n    if (r \u003c 0) continue;\n    const xc = xs[dp.i * H + r], rad = 0.7 + 1.3 * dp.vol, wet = 0.55 + 0.45 * min(1, dp.vol);\n    const lo = max(0, dp.i - 12), hi = min(NF - 1, dp.i + 12);\n    for (let j = lo; j \u003c= hi; j++) {\n      const q = j * H + r;\n      if (abs(xs[q] - xc) \u003c rad && G[q] \u003c wet) G[q] = wet;\n    }\n    dp.vol -= LOSS;\n    // Forks: the first at row 50, the second at row 88.\n    if ((r === 50 || r === 88) && dp.vol > 0.3) {\n      const kk = r === 50 ? S.k1 : S.k2, sib = kk[dp.i] ^ 1;\n      let best = -1, bd = 1e9;\n      for (let j = max(0, dp.i - 20); j \u003c= min(NF - 1, dp.i + 20); j++)\n        if (kk[j] === sib && abs(j - dp.i) \u003c bd) (bd = abs(j - dp.i)), (best = j);\n      if (best >= 0) {\n        dp.vol *= 0.5;\n        S.born.push({ i: best, y: r, vol: dp.vol, v: dp.v, age: 1, soak: 0 });\n      }\n    }\n  }\n  dp.y = y1;\n  if (dp.vol \u003c VMIN) dp.soak = 0.001;\n  return dp.y \u003c H + 3;\n}\n\nfunction step(S, d) {\n  const ds = d * (S.speed / 2);\n  S.t += ds;\n  rows(S);\n  geometry(S);\n  const fade = exp(-ds / TAU), G = S.G;\n  for (let q = 0; q \u003c G.length; q++) G[q] *= fade;\n  S.acc += S.rate * ds;\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    spawn(S, floor(random() * NF), 2 + random() * 22, 0.6 + 0.6 * random());\n  }\n  // A drop born at a fork waits for the end of the pass: filter would drop it.\n  S.born.length = 0;\n  S.drops = S.drops.filter((dp) => slide(S, dp, ds)).concat(S.born);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 0.5, 4);\n  S.wave = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on hair that has had oil for 20 seconds at Speed 2.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 200; i++) step(S, 0.1);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c 12; c++) spawn(S, strandAt(S, 2.6 + c * 5.3 + (random() - 0.5) * 2), 2 + random() * 4, 0.9 + 0.3 * random());\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ab, wt, gl, fb, xs, zs, G, NX, NT, sx, ws, wz, tz, body, deep, tint, oil } = S;\n  ab.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  const t = S.t;\n  // Kajiya-Kay: the band where the tangent lies square to the half vector,\n  // the white one shifted toward the root and a tinted one toward the tip.\n  // Dry hair has a soft band; oil makes it six times sharper and twice as\n  // bright, and darkens the body a shade.\n  const splat = (x, r, w0, dif, s1, s2, oilw, s3) => {\n    const xi = floor(x), fr = x - xi, q = r * W + xi;\n    for (let e = 0; e \u003c 2; e++) {\n      const xx = xi + e;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = (e ? fr : 1 - fr) * w0, p = (q + e) * 5;\n      ab[p] += dif * (1 - oilw) * w;\n      ab[p + 1] += dif * oilw * w;\n      ab[p + 2] += s1 * w;\n      ab[p + 3] += s2 * w;\n      ab[p + 4] += s3 * w;\n      wt[q + e] += w;\n    }\n  };\n  // Back layer: a dim, even curtain behind the locks.\n  for (let i = 0; i \u003c NB; i++) {\n    const o = (NF + i) * H, x0 = S.bx0[i], b = S.bb[i];\n    let px = x0;\n    for (let r = 0; r \u003c H; r++) {\n      const x = x0 + 0.8 * sx[r] + ws[r] + 0.5 * NX[o + r], tx = r ? x - px : 0;\n      px = x;\n      const z = tz[r] + wz[r] + S.bto[i] + 0.08 * NT[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const s1 = 0.35 * exp(40 * log(max(1e-6, 1 - (th - 0.05) ** 2)));\n      splat(x, r, 0.8, 0.4 * b * (0.4 + 0.6 * dif), 0.6 * s1 * b, 0, 0, 0);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const o = i * H, b = S.fbr[i], bs = S.bs[i], bp = S.bp[i];\n    for (let r = 0; r \u003c H; r++) {\n      const x = xs[o + r], tx = r ? x - xs[o + r - 1] : 0, ge = sm(0.06, 0.6, G[o + r]);\n      const z = zs[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const p1 = 70 * (1 + 5 * ge), t1 = th - 0.05, t2 = th + 0.11;\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      const s1 = (0.8 + 1.0 * ge) * exp(0.5 * p1 * l1);\n      // The oil film also gives a broad sheen of its own colour along the\n      // whole strand, which is what draws the streak down the fall.\n      const s3 = ge * (0.2 + 0.4 * exp(5 * l1));\n      const s2 = 0.45 * exp(0.5 * 0.4 * p1 * log(max(1e-6, 1 - t2 * t2)));\n      splat(x, r, 1.5, b * (0.4 + 0.6 * dif), s1 * (0.4 + 0.6 * b), s2 * b, ge, s3);\n      // The oil film on a fibre breaks into a string of tiny beads (Plateau\n      // and Rayleigh), one every 8 to 11 rows here; each holds a point of\n      // light that twinkles as the strand sways.\n      if (ge > 0.02 && (r + bp) % bs === 0) {\n        const xi = round(x);\n        if (xi >= 0 && xi \u003c W) {\n          const tw = 0.5 + 0.5 * sin(2 * PI * (t / 1.7) + i * 2.3 + r * 0.7);\n          gl[r * W + xi] += 0.9 * ge * tw * tw * tw;\n        }\n      }\n    }\n  }\n  // Colours. Orange, yellow and yellow-green read brown and olive at mid\n  // level, so from hue 0 to 0.26 the hair is lifted and paled toward rose\n  // gold, champagne and sage; deep blue reads nearly black, so round hue\n  // 0.66 it is paled a little toward cornflower.\n  const h = S.hue + 0.47, hh = h - floor(h), warm = sm(-0.03, 0.03, hh) * (1 - sm(0.22, 0.3, hh)), blue = sm(0.56, 0.62, hh) * (1 - sm(0.7, 0.77, hh));\n  hsv(h, 0.82 - 0.25 * warm - 0.22 * blue, 1 + 0.35 * warm + 0.1 * blue, body);\n  hsv(h + 0.015, 1 - 0.2 * warm - 0.1 * blue, 0.8 + 0.3 * warm + 0.1 * blue, deep);\n  hsv(h, 0.7 - 0.25 * warm - 0.15 * blue, 1, tint);\n  // The oil is the accent: two thirds of the way round from the hair, gold\n  // on teal at 0, and always at full brightness so it never goes muddy.\n  const ho = h + 0.66, oo = ho - floor(ho), ow = max(0, 1 - abs(oo - 0.1) / 0.12);\n  hsv(ho, 0.62 - 0.17 * ow, 1, oil);\n  const RHO = ((NF * 1.5 + NB * 0.8) / 72) * 0.85;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO), p = q * 5;\n      const d0 = ab[p] / n, d1 = ab[p + 1] / n, s1 = ab[p + 2] / n, s2 = ab[p + 3] / n, s3 = ab[p + 4] / n, gv = gl[q];\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const v = 0.6 * d0 * body[ch] + 0.6 * d1 * deep[ch] + 0.8 * s2 * tint[ch] + s1 * (0.82 + 0.18 * tint[ch]) + s3 * (0.5 * oil[ch] + 0.5) + gv * (0.6 * oil[ch] + 0.4);\n        fb[q * 3 + ch] = 1 - exp(-1.4 * v);\n      }\n    }\n  // The drops: a clear bead in the oil's colour, brighter toward its foot\n  // where it gathers the light, with a dark rim and a white point of light\n  // up and to the left.\n  for (const dp of S.drops) {\n    const grow = min(1, dp.age / 0.15), shrink = dp.soak > 0 ? 1 - dp.soak / 0.5 : 1;\n    const rb = (1.5 + 1.2 * sqrt(dp.vol)) * grow * shrink, r0 = cl(round(dp.y), 0, H - 1), xc = xs[dp.i * H + r0] + 0.5, yc = dp.y;\n    if (rb \u003c 0.3) continue;\n    for (let yy = floor(yc - rb - 1); yy \u003c= yc + rb + 1; yy++)\n      for (let xx = floor(xc - rb - 1); xx \u003c= xc + rb + 1; xx++) {\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const ex = xx + 0.5 - xc, ey = yy + 0.5 - yc, e = sqrt(ex * ex + ey * ey), cov = cl(rb + 0.5 - e, 0, 1);\n        if (cov \u003c= 0) continue;\n        const rim = 0.8 * sm(rb - 1.1, rb - 0.1, e), lit = 0.7 + 0.35 * cl(ey / rb, -1, 1);\n        const hot = cl(1.3 - 1.6 * sqrt((ex + 0.4 * rb) ** 2 + (ey + 0.45 * rb) ** 2), 0, 1), q = (yy * W + xx) * 3;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          const v = oil[ch] * lit * (1 - rim) + 0.15 * oil[ch] * rim + hot;\n          fb[q + ch] += (cl(v, 0, 1) - fb[q + ch]) * cov;\n        }\n      }\n  }\n  for (let q = 0; q \u003c W * H; q++) display.setPixel(q % W, (q / W) | 0, round(255 * fb[q * 3]), round(255 * fb[q * 3 + 1]), round(255 * fb[q * 3 + 2]));\n}\n","layer":{"id":"layer-hair-oil","type":"code","name":"hair-oil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hair Oil\n// Family:  cosmetic\n// Idea:    A fall of teal hair fills the panel top to bottom in swaying locks that part into finer locks toward the ends, under a Kajiya-Kay shine band; beads of gold oil land near the top and slide down the locks, faster where the strands hang steep, splitting in two where a lock forks, and every strand they pass turns a shade richer with a sharp bright band, a pale sheen and a string of glinting beads of oil that lingers for many seconds before it dulls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after hair oil serums, with the strands lit by the Kajiya-Kay model (James Kajiya and Timothy Kay, 1989)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1\n//\n// Knob 1: Hue. The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness.\n// Knob 2: Speed. At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Drops. Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in.\n// Knob 4: Wave. At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28.\n// Buttons: K1 tap pours a line of 12 drops across the top: they slide down together, split at the first fork into 24 and leave the upper half of the hair glossy.\n\nconst W = 64, H = 128, NB = 110, NF = 150;\nconst { floor, min, max, sqrt, sin, cos, exp, log, round, random, PI, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\n// Light from above, a little left and in front; the eye straight on. y runs\n// down and z comes out of the panel.\nconst [LX, LY, LZ] = norm3(-0.15, -0.55, 0.82);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\nconst TZ0 = -HY / HZ;\n\n// Locks: five across the panel near the top, each parting in two at about\n// row 53 and again at about row 92, so 20 fine locks at the ends.\nconst F1 = [45, 62], F2 = [84, 100];\n// Oil: a drop's slide speed in rows a second at Speed 2 on a strand hanging\n// straight down, the oil it leaves per row, the volume below which it soaks\n// in, and how long the gloss takes to fall to 1/e.\nconst V0 = 40, LOSS = 0.0045, VMIN = 0.08, TAU = 12, PULL = 0.55;\n\nfunction wobble(out, o, n) {\n  const f = [0, 0, 0].map(() => (1 / 30 + random() / 40) * 2 * PI), ph = [0, 0, 0].map(() => random() * 2 * PI);\n  for (let r = 0; r \u003c n; r++) out[o + r] = (sin(f[0] * r + ph[0]) + 0.6 * sin(0.5 * f[1] * r + ph[1]) + 0.4 * sin(0.3 * f[2] * r + ph[2])) / 1.4;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, rate: 0.5, wave: 0.06, t: 0, warm: false, acc: 0,\n    // Front strands, sorted by root position, with their locks at three levels.\n    fx0: new Float32Array(NF), k0: new Int32Array(NF), k1: new Int32Array(NF), k2: new Int32Array(NF),\n    fbr: new Float32Array(NF), fto: new Float32Array(NF), bp: new Int32Array(NF), bs: new Int32Array(NF),\n    c0: new Float32Array(5), c1: new Float32Array(10), c2: new Float32Array(20), lph: new Float32Array(5),\n    bx0: new Float32Array(NB), bb: new Float32Array(NB), bto: new Float32Array(NB),\n    NX: new Float32Array((NF + NB) * H), NT: new Float32Array((NF + NB) * H),\n    xs: new Float32Array(NF * H), zs: new Float32Array(NF * H), ty: new Float32Array(NF * H), G: new Float32Array(NF * H),\n    f1: new Float32Array(H), f2: new Float32Array(H), lph1: new Float32Array(10), lph2: new Float32Array(20),\n    sa: new Float32Array(20 * H), ca: new Float32Array(20 * H), reach: new Float32Array(H), pullr: new Float32Array(H),\n    sx: new Float32Array(H), tz: new Float32Array(H), ws: new Float32Array(H), wz: new Float32Array(H),\n    drops: [], born: [],\n    ab: new Float32Array(W * H * 5), wt: new Float32Array(W * H), gl: new Float32Array(W * H), fb: new Float32Array(W * H * 3),\n    body: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], oil: [0, 0, 0],\n  });\n  for (let i = 0; i \u003c NF; i++) S.fx0[i] = -4 + (72 * (i + random())) / NF;\n  for (let i = 0; i \u003c NF; i++) {\n    S.k0[i] = min(4, floor(((S.fx0[i] + 4) / 72) * 5));\n    S.fbr[i] = 0.35 + 0.65 * random() ** 0.6;\n    S.fto[i] = (random() - 0.5) * 0.1;\n    S.bs[i] = 8 + floor(random() * 4);\n    S.bp[i] = floor(random() * 11);\n  }\n  // Each lock parts into the halves of its strands, so a fork is a real fork.\n  const split = (kin, kout, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      const mem = [];\n      for (let i = 0; i \u003c NF; i++) if (kin[i] === k) mem.push(i);\n      const half = mem.length >> 1;\n      mem.forEach((i, m) => (kout[i] = 2 * k + (m \u003c half ? 0 : 1)));\n    }\n  };\n  split(S.k0, S.k1, 5);\n  split(S.k1, S.k2, 10);\n  const centre = (kk, c, n) => {\n    for (let k = 0; k \u003c n; k++) {\n      let s = 0, m = 0;\n      for (let i = 0; i \u003c NF; i++) if (kk[i] === k) (s += S.fx0[i]), m++;\n      c[k] = m ? s / m : 0;\n    }\n  };\n  centre(S.k0, S.c0, 5);\n  centre(S.k1, S.c1, 10);\n  centre(S.k2, S.c2, 20);\n  for (let k = 0; k \u003c 5; k++) S.lph[k] = random() * 2 * PI;\n  for (let k = 0; k \u003c 10; k++) S.lph1[k] = S.lph[k >> 1] + (k & 1 ? 1 : -1) * (0.7 + 0.5 * random());\n  for (let k = 0; k \u003c 20; k++) S.lph2[k] = S.lph1[k >> 1] + (k & 1 ? 1 : -1) * (0.5 + 0.5 * random());\n  for (let i = 0; i \u003c NB; i++) {\n    S.bx0[i] = -5 + (74 * (i + random())) / NB;\n    S.bb[i] = 0.3 + 0.7 * random();\n    S.bto[i] = (random() - 0.5) * 0.14;\n  }\n  for (let i = 0; i \u003c NF + NB; i++) {\n    wobble(S.NX, i * H, H);\n    wobble(S.NT, i * H, H);\n  }\n}\n\n// Rows: the breeze running down the hair, the waves, and the lean of the\n// sheet toward the eye, which puts the shine band where tz meets TZ0.\nfunction rows(S) {\n  const t = S.t, wv = (S.wave + 1) / 2;\n  const yb = 44 + 12 * sin(2 * PI * (t / 7)) + 3 * sin(2 * PI * (t / 3.1) + 1);\n  for (let r = 0; r \u003c H; r++) {\n    const reach = ((r + 30) / 158) ** 1.6, a = (2 * PI * r) / 40;\n    S.sx[r] = 3 * reach * sin(2 * PI * (r / 120 - t / 4.6)) + reach * sin(2 * PI * (r / 45 - t / 2.3) + 2);\n    S.ws[r] = 4 * wv * sin(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.wz[r] = 0.32 * wv * cos(a + 0.5 * sin(2 * PI * (t / 6.1)));\n    S.f1[r] = sm(F1[0], F1[1], r);\n    S.f2[r] = sm(F2[0], F2[1], r);\n    S.tz[r] = TZ0 + 0.015 * (1 - 0.5 * wv) * (yb - r);\n  }\n}\n\n// Where each front strand runs this frame, and how steeply.\n// Each lock waves in its own phase, and the two halves of a lock drift a\n// third of a turn apart past its fork, so the fork opens as a Y. The phase\n// of a strand depends only on its fine lock, so the sines are taken once a\n// row for each of the 20 fine locks.\nfunction geometry(S) {\n  const { xs, zs, ty, sx, tz, f1, f2, NX, NT, G, sa, ca, reach, pullr } = S, t = S.t, wv = (S.wave + 1) / 2, sway = 0.5 * sin(2 * PI * (t / 6.1));\n  for (let r = 0; r \u003c H; r++) {\n    reach[r] = ((r + 30) / 158) ** 1.6;\n    pullr[r] = PULL * sm(3, 32, r);\n  }\n  for (let k = 0; k \u003c 20; k++) {\n    const p0 = S.lph[k >> 2], p1 = S.lph1[k >> 1], p2 = S.lph2[k];\n    for (let r = 0; r \u003c H; r++) {\n      const a = (2 * PI * r) / 40 + sway + p0 + (p1 - p0) * f1[r] + (p2 - p1) * f2[r];\n      sa[k * H + r] = 4 * wv * sin(a);\n      ca[k * H + r] = 0.32 * wv * cos(a);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const x0 = S.fx0[i], c0 = S.c0[S.k0[i]], c1 = S.c1[S.k1[i]], c2 = S.c2[S.k2[i]], o = i * H, ko = S.k2[i] * H;\n    const lock = 1.2 * sin(2 * PI * (t / 3.7) + S.lph[S.k0[i]]), to = S.fto[i];\n    let px = 0;\n    for (let r = 0; r \u003c H; r++) {\n      const c = c0 + (c1 - c0) * f1[r] + (c2 - c1) * f2[r];\n      // Oil lays a strand smoother: its own wiggle shrinks by half.\n      const g = G[o + r], calm = g \u003c 0.06 ? 1 : 1 - 0.5 * sm(0.06, 0.6, g);\n      const x = x0 + pullr[r] * (c - x0) + sx[r] + sa[ko + r] + lock * reach[r] + 0.45 * calm * NX[o + r];\n      xs[o + r] = x;\n      const tx = r ? x - px : 0, z = tz[r] + ca[ko + r] + to + 0.07 * calm * NT[o + r];\n      zs[o + r] = z;\n      ty[o + r] = 1 / sqrt(tx * tx + 1 + z * z);\n      px = x;\n    }\n  }\n}\n\nfunction spawn(S, i, y, vol) {\n  if (S.drops.length \u003c 48) S.drops.push({ i, y, vol, v: 0, age: 0, soak: 0 });\n}\n\n// The front strand whose root lies nearest x.\nfunction strandAt(S, x) {\n  let best = 0, bd = 1e9;\n  for (let i = 0; i \u003c NF; i++) {\n    const d = abs(S.fx0[i] - x);\n    if (d \u003c bd) (bd = d), (best = i);\n  }\n  return best;\n}\n\n// A drop moves down its strand, wetting the strands within its radius on\n// every row it crosses; at a fork a drop with oil enough splits, half going\n// down the sibling lock.\nfunction slide(S, dp, ds) {\n  const { xs, ty, G } = S;\n  if (dp.soak > 0) {\n    dp.soak += ds;\n    return dp.soak \u003c 0.5;\n  }\n  dp.age += ds;\n  const r0 = cl(floor(dp.y), 0, H - 1);\n  const steep = ty[dp.i * H + r0] ** 4;\n  const vt = V0 * (0.45 + 0.55 * sqrt(dp.vol)) * steep * (dp.age \u003c 0.2 ? dp.age / 0.2 : 1);\n  dp.v += (vt - dp.v) * min(1, ds * 6);\n  const y1 = dp.y + dp.v * ds;\n  for (let r = floor(dp.y) + 1; r \u003c= floor(y1); r++) {\n    if (r >= H) break;\n    if (r \u003c 0) continue;\n    const xc = xs[dp.i * H + r], rad = 0.7 + 1.3 * dp.vol, wet = 0.55 + 0.45 * min(1, dp.vol);\n    const lo = max(0, dp.i - 12), hi = min(NF - 1, dp.i + 12);\n    for (let j = lo; j \u003c= hi; j++) {\n      const q = j * H + r;\n      if (abs(xs[q] - xc) \u003c rad && G[q] \u003c wet) G[q] = wet;\n    }\n    dp.vol -= LOSS;\n    // Forks: the first at row 50, the second at row 88.\n    if ((r === 50 || r === 88) && dp.vol > 0.3) {\n      const kk = r === 50 ? S.k1 : S.k2, sib = kk[dp.i] ^ 1;\n      let best = -1, bd = 1e9;\n      for (let j = max(0, dp.i - 20); j \u003c= min(NF - 1, dp.i + 20); j++)\n        if (kk[j] === sib && abs(j - dp.i) \u003c bd) (bd = abs(j - dp.i)), (best = j);\n      if (best >= 0) {\n        dp.vol *= 0.5;\n        S.born.push({ i: best, y: r, vol: dp.vol, v: dp.v, age: 1, soak: 0 });\n      }\n    }\n  }\n  dp.y = y1;\n  if (dp.vol \u003c VMIN) dp.soak = 0.001;\n  return dp.y \u003c H + 3;\n}\n\nfunction step(S, d) {\n  const ds = d * (S.speed / 2);\n  S.t += ds;\n  rows(S);\n  geometry(S);\n  const fade = exp(-ds / TAU), G = S.G;\n  for (let q = 0; q \u003c G.length; q++) G[q] *= fade;\n  S.acc += S.rate * ds;\n  while (S.acc >= 1) {\n    S.acc -= 1;\n    spawn(S, floor(random() * NF), 2 + random() * 22, 0.6 + 0.6 * random());\n  }\n  // A drop born at a fork waits for the end of the pass: filter would drop it.\n  S.born.length = 0;\n  S.drops = S.drops.filter((dp) => slide(S, dp, ds)).concat(S.born);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 0.5, 4);\n  S.wave = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on hair that has had oil for 20 seconds at Speed 2.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 200; i++) step(S, 0.1);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c 12; c++) spawn(S, strandAt(S, 2.6 + c * 5.3 + (random() - 0.5) * 2), 2 + random() * 4, 0.9 + 0.3 * random());\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ab, wt, gl, fb, xs, zs, G, NX, NT, sx, ws, wz, tz, body, deep, tint, oil } = S;\n  ab.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  const t = S.t;\n  // Kajiya-Kay: the band where the tangent lies square to the half vector,\n  // the white one shifted toward the root and a tinted one toward the tip.\n  // Dry hair has a soft band; oil makes it six times sharper and twice as\n  // bright, and darkens the body a shade.\n  const splat = (x, r, w0, dif, s1, s2, oilw, s3) => {\n    const xi = floor(x), fr = x - xi, q = r * W + xi;\n    for (let e = 0; e \u003c 2; e++) {\n      const xx = xi + e;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = (e ? fr : 1 - fr) * w0, p = (q + e) * 5;\n      ab[p] += dif * (1 - oilw) * w;\n      ab[p + 1] += dif * oilw * w;\n      ab[p + 2] += s1 * w;\n      ab[p + 3] += s2 * w;\n      ab[p + 4] += s3 * w;\n      wt[q + e] += w;\n    }\n  };\n  // Back layer: a dim, even curtain behind the locks.\n  for (let i = 0; i \u003c NB; i++) {\n    const o = (NF + i) * H, x0 = S.bx0[i], b = S.bb[i];\n    let px = x0;\n    for (let r = 0; r \u003c H; r++) {\n      const x = x0 + 0.8 * sx[r] + ws[r] + 0.5 * NX[o + r], tx = r ? x - px : 0;\n      px = x;\n      const z = tz[r] + wz[r] + S.bto[i] + 0.08 * NT[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const s1 = 0.35 * exp(40 * log(max(1e-6, 1 - (th - 0.05) ** 2)));\n      splat(x, r, 0.8, 0.4 * b * (0.4 + 0.6 * dif), 0.6 * s1 * b, 0, 0, 0);\n    }\n  }\n  for (let i = 0; i \u003c NF; i++) {\n    const o = i * H, b = S.fbr[i], bs = S.bs[i], bp = S.bp[i];\n    for (let r = 0; r \u003c H; r++) {\n      const x = xs[o + r], tx = r ? x - xs[o + r - 1] : 0, ge = sm(0.06, 0.6, G[o + r]);\n      const z = zs[o + r], inv = 1 / sqrt(tx * tx + 1 + z * z);\n      const th = (tx * HX + HY + z * HZ) * inv, tl = (tx * LX + LY + z * LZ) * inv, dif = sqrt(max(0, 1 - tl * tl));\n      const p1 = 70 * (1 + 5 * ge), t1 = th - 0.05, t2 = th + 0.11;\n      const l1 = log(max(1e-6, 1 - t1 * t1));\n      const s1 = (0.8 + 1.0 * ge) * exp(0.5 * p1 * l1);\n      // The oil film also gives a broad sheen of its own colour along the\n      // whole strand, which is what draws the streak down the fall.\n      const s3 = ge * (0.2 + 0.4 * exp(5 * l1));\n      const s2 = 0.45 * exp(0.5 * 0.4 * p1 * log(max(1e-6, 1 - t2 * t2)));\n      splat(x, r, 1.5, b * (0.4 + 0.6 * dif), s1 * (0.4 + 0.6 * b), s2 * b, ge, s3);\n      // The oil film on a fibre breaks into a string of tiny beads (Plateau\n      // and Rayleigh), one every 8 to 11 rows here; each holds a point of\n      // light that twinkles as the strand sways.\n      if (ge > 0.02 && (r + bp) % bs === 0) {\n        const xi = round(x);\n        if (xi >= 0 && xi \u003c W) {\n          const tw = 0.5 + 0.5 * sin(2 * PI * (t / 1.7) + i * 2.3 + r * 0.7);\n          gl[r * W + xi] += 0.9 * ge * tw * tw * tw;\n        }\n      }\n    }\n  }\n  // Colours. Orange, yellow and yellow-green read brown and olive at mid\n  // level, so from hue 0 to 0.26 the hair is lifted and paled toward rose\n  // gold, champagne and sage; deep blue reads nearly black, so round hue\n  // 0.66 it is paled a little toward cornflower.\n  const h = S.hue + 0.47, hh = h - floor(h), warm = sm(-0.03, 0.03, hh) * (1 - sm(0.22, 0.3, hh)), blue = sm(0.56, 0.62, hh) * (1 - sm(0.7, 0.77, hh));\n  hsv(h, 0.82 - 0.25 * warm - 0.22 * blue, 1 + 0.35 * warm + 0.1 * blue, body);\n  hsv(h + 0.015, 1 - 0.2 * warm - 0.1 * blue, 0.8 + 0.3 * warm + 0.1 * blue, deep);\n  hsv(h, 0.7 - 0.25 * warm - 0.15 * blue, 1, tint);\n  // The oil is the accent: two thirds of the way round from the hair, gold\n  // on teal at 0, and always at full brightness so it never goes muddy.\n  const ho = h + 0.66, oo = ho - floor(ho), ow = max(0, 1 - abs(oo - 0.1) / 0.12);\n  hsv(ho, 0.62 - 0.17 * ow, 1, oil);\n  const RHO = ((NF * 1.5 + NB * 0.8) / 72) * 0.85;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x, n = max(wt[q], RHO), p = q * 5;\n      const d0 = ab[p] / n, d1 = ab[p + 1] / n, s1 = ab[p + 2] / n, s2 = ab[p + 3] / n, s3 = ab[p + 4] / n, gv = gl[q];\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const v = 0.6 * d0 * body[ch] + 0.6 * d1 * deep[ch] + 0.8 * s2 * tint[ch] + s1 * (0.82 + 0.18 * tint[ch]) + s3 * (0.5 * oil[ch] + 0.5) + gv * (0.6 * oil[ch] + 0.4);\n        fb[q * 3 + ch] = 1 - exp(-1.4 * v);\n      }\n    }\n  // The drops: a clear bead in the oil's colour, brighter toward its foot\n  // where it gathers the light, with a dark rim and a white point of light\n  // up and to the left.\n  for (const dp of S.drops) {\n    const grow = min(1, dp.age / 0.15), shrink = dp.soak > 0 ? 1 - dp.soak / 0.5 : 1;\n    const rb = (1.5 + 1.2 * sqrt(dp.vol)) * grow * shrink, r0 = cl(round(dp.y), 0, H - 1), xc = xs[dp.i * H + r0] + 0.5, yc = dp.y;\n    if (rb \u003c 0.3) continue;\n    for (let yy = floor(yc - rb - 1); yy \u003c= yc + rb + 1; yy++)\n      for (let xx = floor(xc - rb - 1); xx \u003c= xc + rb + 1; xx++) {\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const ex = xx + 0.5 - xc, ey = yy + 0.5 - yc, e = sqrt(ex * ex + ey * ey), cov = cl(rb + 0.5 - e, 0, 1);\n        if (cov \u003c= 0) continue;\n        const rim = 0.8 * sm(rb - 1.1, rb - 0.1, e), lit = 0.7 + 0.35 * cl(ey / rb, -1, 1);\n        const hot = cl(1.3 - 1.6 * sqrt((ex + 0.4 * rb) ** 2 + (ey + 0.45 * rb) ** 2), 0, 1), q = (yy * W + xx) * 3;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          const v = oil[ch] * lit * (1 - rim) + 0.15 * oil[ch] * rim + hot;\n          fb[q + ch] += (cl(v, 0, 1) - fb[q + ch]) * cov;\n        }\n      }\n  }\n  for (let q = 0; q \u003c W * H; q++) display.setPixel(q % W, (q / W) | 0, round(255 * fb[q * 3]), round(255 * fb[q * 3 + 1]), round(255 * fb[q * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=0.5..4, Wave=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The hair colour once round the wheel, with the oil two thirds of the way on as its accent: at 0 teal hair and gold oil, at 0.15 steel blue and lime, 0.3 purple and aqua, 0.45 raspberry and sky blue, 0.55 rose gold and blue, 0.65 champagne blonde and violet, 0.75 sage and magenta, 0.85 green and coral. From 0.53 to 0.79 the hair is lifted and paled so it never reads brown or olive, and the oil is always at full brightness."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a drop slides about 17 rows a second over the crown, 24 through the middle where the strands hang straight and 15 near the ends, so it crosses the panel in about 6 s; a wave of breeze runs down the hair every 4.6 s, the band rises and falls over 7 s, and where a full drop passed the gloss stays full for 6 s, is half gone after 13 s and gone by 34 s. At 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Drops","min":0.5,"max":4,"about":"Drops landing a second at Speed 2: one every 2 s at 0.5, which keeps 4 or 5 beads on the hair and a quarter of the front strands glossy, up to 4 a second, about 34 beads at a time and four fifths of it glossy. A drop carries 0.6 to 1.2 units of oil and leaves 0.0045 a row; with more than 0.3 left it splits in two at the forks at rows 50 and 88, and under 0.08 it soaks in."},{"name":"Wave","min":-1,"max":1,"about":"At -1 the locks hang straight; at 0 they wave 2 LEDs to each side every 40 rows, each lock in its own phase; at 1 they wave 4 LEDs and turn in depth as well, so every wave catches its own highlight, and the slants hold the drops to 13 to 20 rows a second where straight locks let them run 11 to 28."}],"start":[0,2,0.5,0.06],"measures":{"motion":0.3092,"detail":0.0865,"edges":0.3007,"complexity":2.6843,"coverage":0.7924,"colour":0.1708,"drift":0.1096},"knobResponse":[0.1623,0.2029,0.0681,0.2493]},{"slug":"hairy-ball","title":"Hairy Ball","family":"noise","round":28,"note":"위에는 털 난 공, 아래에는 털 난 도넛이 빛을 받으며 돌아요. 공은 어떻게 빗어도 털이 갈 데 없는 가마가 하나나 둘 금빛으로 남고, 도넛은 한 바퀴 매끈하게 빗겨요. 귀퉁이의 2 와 0 은 둘의 오일러 지표예요. 누르면 둘 다 다시 빗어서 가마가 다른 자리로 뛰어요.","idea":"A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.","buttons":"K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.","code":"// ===== Patternflow pattern =====\n// Title:   Hairy Ball\n// Family:  noise\n// Idea:    A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the hairy ball theorem (Henri Poincaré 1885, L. E. J. Brouwer 1912) and the Poincaré–Hopf index theorem (Heinz Hopf, 1926), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1\n//\n// Knob 1: Hue. Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together.\n// Knob 2: Speed. At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower.\n// Knob 3: Length. The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter.\n// Knob 4: Comb. How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them.\n// Buttons: K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The sphere sits in the top half, the doughnut in the bottom half.\nconst SX = 32, SY = 31, RS = 24.5;\nconst TX = 32, TY = 97, TR = 18, TQ = 8.2;\n// Roots spread evenly at the same density on both: the doughnut's area\n// 4 pi^2 R r against the sphere's 4 pi R^2.\nconst NS = 1100, NT = round((NS * PI * TR * TQ) / (RS * RS));\n\n// Fixed grain: a seeded generator used once, so the roots never move on the skin.\nlet seed = 0x9e3779b9;\nfunction rnd() {\n  seed = (seed + 0x6d2b79f5) | 0;\n  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\n// Sphere roots on a jittered Fibonacci spiral, unit vectors.\nconst SP = new Float32Array(NS * 3), SJ = new Float32Array(NS * 2);\nfor (let i = 0; i \u003c NS; i++) {\n  const y = 1 - (2 * (i + 0.2 + 0.6 * rnd())) / NS, r = sqrt(max(0, 1 - y * y)), a = i * 2.39996323 + (rnd() - 0.5) * 0.9 * (2 / sqrt(NS)) / max(r, 0.05);\n  SP[i * 3] = r * cos(a);\n  SP[i * 3 + 1] = y;\n  SP[i * 3 + 2] = r * sin(a);\n  SJ[i * 2] = 0.8 + 0.35 * rnd();\n  SJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// Doughnut roots: u round the ring, v round the tube, v drawn with density\n// R + r cos v so the hair is as thick inside the hole as outside.\nconst TP = new Float32Array(NT * 3), TN = new Float32Array(NT * 3), TU = new Float32Array(NT * 3), TV = new Float32Array(NT * 3), TJ = new Float32Array(NT * 2);\nfor (let i = 0; i \u003c NT; i++) {\n  const u = 2 * PI * ((i * 0.7548776662 + 0.3 * rnd() / NT * 40) % 1), F = (i * 0.5698402910 + 0.5 + (rnd() - 0.5) * 0.02) % 1;\n  let v = 2 * PI * F;\n  for (let k = 0; k \u003c 8; k++) v -= (TR * v + TQ * sin(v) - 2 * PI * TR * F) / (TR + TQ * cos(v));\n  const cu = cos(u), su = sin(u), cv = cos(v), sv = sin(v), rr = TR + TQ * cv, o = i * 3;\n  TP[o] = rr * cu, TP[o + 1] = rr * su, TP[o + 2] = TQ * sv;\n  TN[o] = cv * cu, TN[o + 1] = cv * su, TN[o + 2] = sv;\n  TU[o] = -su, TU[o + 1] = cu, TU[o + 2] = 0;\n  TV[o] = -sv * cu, TV[o + 1] = -sv * su, TV[o + 2] = cv;\n  TJ[i * 2] = 0.8 + 0.35 * rnd();\n  TJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// 3x3 rotations, row major.\nconst mul = (A, B) => {\n  const C = new Array(9);\n  for (let r = 0; r \u003c 3; r++) for (let c = 0; c \u003c 3; c++) C[r * 3 + c] = A[r * 3] * B[c] + A[r * 3 + 1] * B[3 + c] + A[r * 3 + 2] * B[6 + c];\n  return C;\n};\nconst rx = (a) => [1, 0, 0, 0, cos(a), -sin(a), 0, sin(a), cos(a)];\nconst ry = (a) => [cos(a), 0, sin(a), 0, 1, 0, -sin(a), 0, cos(a)];\nconst rz = (a) => [cos(a), -sin(a), 0, sin(a), cos(a), 0, 0, 0, 1];\n\n// Light from the upper left, in front; H halfway to the eye.\nconst LX = -0.45 / 0.996, LY = -0.55 / 0.996, LZ = 0.7 / 0.996;\nconst HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The combs the sphere goes through: how far apart its two cowlicks stand\n// (1 opposite each other, 0 merged into one zero of index 2) and the angle\n// of the doughnut's hair (0 along the ring, pi/2 along the tube).\nconst PROG = [[0.55, 0.12], [0, 0.85], [1, -0.55], [0.3, 0.4], [0, -0.9], [1, 0.25]];\n\n// The sphere's body turns about its own vertical axis, tipped toward the\n// eye; the field turns inside it on its own, from the angles a.\nconst bodyM = (T) => mul(rx(-0.42 + 0.12 * sin(T * 0.21)), ry(T * 0.6));\nconst fieldM = (a, T) => mul(rz(a[0] + T * 0.09), mul(rx(a[1] + 0.5 * sin(T * 0.05 + 1)), rz(a[2])));\n// The two zeros in field coordinates sit at w = +-t on the stereographic\n// plane, symmetric about the south pole; t = 1 puts them opposite. Out\n// come both as unit vectors in M's frame.\nfunction zeros(M, t) {\n  const t2 = t * t, Z = [];\n  for (const sg of [1, -1]) {\n    const fx = (2 * sg * t) / (1 + t2), fz = (t2 - 1) / (1 + t2);\n    Z.push(M[0] * fx + M[2] * fz, M[3] * fx + M[5] * fz, M[6] * fx + M[8] * fz);\n  }\n  return Z;\n}\n// A new comb is turned so that a cowlick faces the eye for most of the\n// seven units it lasts, both of them when they stand close enough.\nfunction aim(T, sep, from) {\n  let best = -9, pick = from;\n  for (let c = 0; c \u003c 40; c++) {\n    const a = from.map((v) => v + (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.3 * Math.random()));\n    let lo = 9, sum = 0;\n    for (let j = 0; j \u003c 5; j++) {\n      const Tj = T + 0.8 + j * 1.5, Z = zeros(mul(bodyM(Tj), fieldM(a, Tj)), sep), v = max(Z[2], Z[5]) + 0.5 * min(Z[2], Z[5]);\n      (lo = min(lo, v)), (sum += v);\n    }\n    const score = lo + sum / 5;\n    if (score > best) (best = score), (pick = a);\n  }\n  return pick;\n}\n\n// 3x5 digits, one row of three bits per line, top first.\nconst DIG2 = [7, 1, 7, 4, 7], DIG0 = [7, 5, 5, 5, 7];\nfunction digit(buf, rows, x0, y0, c) {\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++)\n      if ((rows[j] >> (2 - i)) & 1) {\n        const q = ((y0 + j) * W + x0 + i) * 3;\n        for (let k = 0; k \u003c 3; k++) buf[q + k] = 40 + 120 * c[k];\n      }\n}\n\nexport function setup(params) {\n  const a = aim(-0.8, PROG[0][0], [0, 0, 0]);\n  params.s = {\n    T: 0, clock: 0, step: 0, a: a.slice(), ta: a,\n    sep: PROG[0][0], al: PROG[0][1],\n    hue: 0, len: 8, th: PI / 4,\n    buf: new Float32Array(N * 3), zb: new Float32Array(N), zh: new Float32Array(N),\n    cs: new Float32Array(3), ct: new Float32Array(3), cg: new Float32Array(3),\n  };\n}\n\nfunction recomb(P) {\n  P.step = (P.step + 1) % PROG.length;\n  P.clock = 0;\n  P.ta = aim(P.T, PROG[P.step][0], P.ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.len = cl(k[2], 8, 13);\n  P.th = (PI / 4) * (1 + cl(k[3], -1, 1));\n  const dT = d * cl(k[1], 0.2, 3) * 0.5;\n  P.T += dT;\n  P.clock += dT;\n  if (input.btnPressed && input.btnPressed[0]) recomb(P);\n  else if (P.clock > 7) recomb(P);\n  const e = 1 - exp(-max(dT, d * 0.5) * 2.4), g = PROG[P.step];\n  for (let i = 0; i \u003c 3; i++) P.a[i] += (P.ta[i] - P.a[i]) * e;\n  P.sep += (g[0] - P.sep) * e;\n  P.al += (g[1] - P.al) * e;\n}\n\n// One hair: root (x, y, z) on screen, direction (hx, hy, hz) times its\n// length, colour (r, g, b) at the tip; the root end is darker.\nfunction hair(P, x, y, z, hx, hy, hz, r, g, b) {\n  const n = max(2, ceil(Math.hypot(hx, hy) * 1.4) + 1), buf = P.buf, zb = P.zb, zh = P.zh;\n  for (let j = 0; j \u003c n; j++) {\n    const s = j / (n - 1), X = floor(x + hx * s), Y = floor(y + hy * s);\n    if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n    const p = Y * W + X, Z = z + hz * s;\n    if (Z \u003c zb[p] - 1.2 || Z \u003c= zh[p]) continue;\n    zh[p] = Z;\n    const m = 0.22 + 0.78 * s * s, q = p * 3;\n    buf[q] = r * m, buf[q + 1] = g * m, buf[q + 2] = b * m;\n  }\n}\n\n// Hair light after Kajiya and Kay: a fibre is lit by how square it lies to\n// the light and shines where it lies square to the half vector.\nfunction shade(tx, ty, tz, nx, ny, nz) {\n  const tl = tx * LX + ty * LY + tz * LZ, th = tx * HX + ty * HY + tz * HZ, nl = nx * LX + ny * LY + nz * LZ;\n  const lam = 0.22 + 0.78 * max(0, nl), dif = sqrt(max(0, 1 - tl * tl)), sp = (1 - th * th) ** 12;\n  return [lam * (0.35 + 0.65 * dif), 0.75 * sp * max(0, nl + 0.2)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf, zb = P.zb, zh = P.zh, cs = P.cs, ct = P.ct, cg = P.cg, T = P.T;\n  buf.fill(0);\n  zb.fill(-1e9);\n  zh.fill(-1e9);\n  hsv(P.hue + 0.6, 0.75, 1, cs, 0);\n  hsv(P.hue + 0.47, 0.8, 1, ct, 0);\n  hsv(P.hue + 0.12, 0.6, 1, cg, 0);\n  const pulse = 0.85 + 0.15 * sin(T * 3.1);\n\n  // The sphere.\n  const Mb = bodyM(T), Rf = fieldM(P.a, T), M = mul(Mb, Rf), t = P.sep, t2 = t * t, Z = zeros(M, t);\n  // Skin: dark, with the cowlicks glowing through.\n  const R2 = RS * RS;\n  for (let y = max(0, floor(SY - RS)); y \u003c= min(H - 1, ceil(SY + RS)); y++)\n    for (let x = max(0, floor(SX - RS)); x \u003c= min(W - 1, ceil(SX + RS)); x++) {\n      const dx = x + 0.5 - SX, dy = y + 0.5 - SY, rr = dx * dx + dy * dy;\n      if (rr >= R2) continue;\n      const dz = sqrt(R2 - rr), nx = dx / RS, ny = dy / RS, nz = dz / RS, p = y * W + x, q = p * 3;\n      zb[p] = dz;\n      const lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      const gl = exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.05) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.05);\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * (cs[c] * lam + cg[c] * min(1, gl) * 0.9 * pulse);\n    }\n  // The field: v(w) = e^{i theta} (w^2 - t^2) on the plane, carried back to\n  // the sphere. Its only zeros are w = t and w = -t, each of index 1; at\n  // t = 0 they merge into one zero of index 2. There is always one.\n  const kc = cos(P.th), ks = sin(P.th), L = P.len, lb = 0.35 - 0.02 * (L - 8);\n  for (let i = 0; i \u003c NS; i++) {\n    const o = i * 3, bx = SP[o], by = SP[o + 1], bz = SP[o + 2];\n    const nx = Mb[0] * bx + Mb[1] * by + Mb[2] * bz, ny = Mb[3] * bx + Mb[4] * by + Mb[5] * bz, nz = Mb[6] * bx + Mb[7] * by + Mb[8] * bz;\n    if (nz \u003c -0.3) continue;\n    // Into field coordinates: f = Rf^T b.\n    const fx = Rf[0] * bx + Rf[3] * by + Rf[6] * bz, fy = Rf[1] * bx + Rf[4] * by + Rf[7] * bz, fz = Rf[2] * bx + Rf[5] * by + Rf[8] * bz;\n    const den = max(1e-7, 1 - fz), a = fx / den, b = fy / den, re = a * a - b * b - t2, im = 2 * a * b;\n    const va = kc * re - ks * im, vb = ks * re + kc * im, s = 1 + a * a + b * b, qq = (a * va + b * vb) / s;\n    let gx = va - 2 * a * qq, gy = vb - 2 * b * qq, gz = 2 * qq;\n    const gn = Math.hypot(gx, gy, gz) || 1;\n    gx /= gn, gy /= gn, gz /= gn;\n    // Field direction on screen.\n    const dx = M[0] * gx + M[1] * gy + M[2] * gz, dy = M[3] * gx + M[4] * gy + M[5] * gz, dz = M[6] * gx + M[7] * gy + M[8] * gz;\n    // Near a zero the hair stands up and glows.\n    const gl = min(1, exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.07) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.07));\n    const lift = lb + 0.8 * gl, cL = cos(lift), sL = sin(lift);\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * SJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * SJ[i * 2] * li, w = 255 * sp, gg = 255 * gl * pulse;\n    hair(P, SX + RS * nx, SY + RS * ny, RS * nz, hx * len, hy * len, hz * len,\n      cs[0] * br + w + cg[0] * gg, cs[1] * br + w + cg[1] * gg, cs[2] * br + w + cg[2] * gg);\n  }\n\n  // The doughnut, seen from about 40 degrees above, spinning on its\n  // own axis and swaying. Its hair lies along cos(al) e_u + sin(al) e_v: no\n  // zero anywhere, which the torus allows because its Euler characteristic is 0.\n  const Mt = mul(ry(0.3 * sin(T * 0.13)), mul(rx(0.84 + 0.08 * sin(T * 0.17)), rz(T * 0.5)));\n  const RO = TR + TQ, ox = Mt[6], oy = Mt[7], oz = Mt[8];\n  for (let y = max(0, floor(TY - RO)); y \u003c= min(H - 1, ceil(TY + RO)); y++)\n    for (let x = max(0, floor(TX - RO)); x \u003c= min(W - 1, ceil(TX + RO)); x++) {\n      const dx = x + 0.5 - TX, dy = y + 0.5 - TY;\n      if (dx * dx + dy * dy >= RO * RO) continue;\n      // March a ray into the doughnut's own coordinates.\n      const z0 = RO + 1;\n      const px0 = Mt[0] * dx + Mt[3] * dy + Mt[6] * z0, py0 = Mt[1] * dx + Mt[4] * dy + Mt[7] * z0, pz0 = Mt[2] * dx + Mt[5] * dy + Mt[8] * z0;\n      let tt = 0, hit = false, px = 0, py = 0, pz = 0;\n      for (let it = 0; it \u003c 40 && tt \u003c 2 * z0; it++) {\n        px = px0 - ox * tt, py = py0 - oy * tt, pz = pz0 - oz * tt;\n        const qd = sqrt(px * px + py * py) - TR, dd = sqrt(qd * qd + pz * pz) - TQ;\n        if (dd \u003c 0.03) {\n          hit = true;\n          break;\n        }\n        tt += dd;\n      }\n      if (!hit) continue;\n      const rl = sqrt(px * px + py * py) || 1, bx = (px - (TR * px) / rl) / TQ, by = (py - (TR * py) / rl) / TQ, bz = pz / TQ;\n      const nx = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, ny = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, nz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n      const p = y * W + x, q = p * 3, lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      zb[p] = z0 - tt;\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * ct[c] * lam;\n    }\n  const ca = cos(P.al), sa = sin(P.al), cL = cos(lb), sL = sin(lb);\n  for (let i = 0; i \u003c NT; i++) {\n    const o = i * 3, bnx = TN[o], bny = TN[o + 1], bnz = TN[o + 2];\n    const nx = Mt[0] * bnx + Mt[1] * bny + Mt[2] * bnz, ny = Mt[3] * bnx + Mt[4] * bny + Mt[5] * bnz, nz = Mt[6] * bnx + Mt[7] * bny + Mt[8] * bnz;\n    const gx = ca * TU[o] + sa * TV[o], gy = ca * TU[o + 1] + sa * TV[o + 1], gz = ca * TU[o + 2] + sa * TV[o + 2];\n    const dx = Mt[0] * gx + Mt[1] * gy + Mt[2] * gz, dy = Mt[3] * gx + Mt[4] * gy + Mt[5] * gz, dz = Mt[6] * gx + Mt[7] * gy + Mt[8] * gz;\n    const bx = TP[o], by = TP[o + 1], bz = TP[o + 2];\n    const X = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, Y = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, Zz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * TJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * TJ[i * 2] * li, w = 255 * sp;\n    hair(P, TX + X, TY + Y, Zz, hx * len, hy * len, hz * len, ct[0] * br + w, ct[1] * br + w, ct[2] * br + w);\n  }\n\n  // The Euler characteristic beside each: 2 for the sphere, 0 for the torus.\n  digit(buf, DIG2, 59, 2, cs);\n  digit(buf, DIG0, 59, 121, ct);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-hairy-ball","type":"code","name":"hairy-ball","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hairy Ball\n// Family:  noise\n// Idea:    A hairy sphere above a hairy doughnut, both turning in the light: however the sphere is combed, one or two cowlicks glow where its hair has nowhere to point, while the doughnut's hair lies smooth all the way round, and the small 2 and 0 are their Euler characteristics.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the hairy ball theorem (Henri Poincaré 1885, L. E. J. Brouwer 1912) and the Poincaré–Hopf index theorem (Heinz Hopf, 1926), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1\n//\n// Knob 1: Hue. Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together.\n// Knob 2: Speed. At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower.\n// Knob 3: Length. The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter.\n// Knob 4: Comb. How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them.\n// Buttons: K1 tap combs the sphere and the doughnut again now; the hair sweeps to a new direction and the cowlicks jump somewhere else.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The sphere sits in the top half, the doughnut in the bottom half.\nconst SX = 32, SY = 31, RS = 24.5;\nconst TX = 32, TY = 97, TR = 18, TQ = 8.2;\n// Roots spread evenly at the same density on both: the doughnut's area\n// 4 pi^2 R r against the sphere's 4 pi R^2.\nconst NS = 1100, NT = round((NS * PI * TR * TQ) / (RS * RS));\n\n// Fixed grain: a seeded generator used once, so the roots never move on the skin.\nlet seed = 0x9e3779b9;\nfunction rnd() {\n  seed = (seed + 0x6d2b79f5) | 0;\n  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\n// Sphere roots on a jittered Fibonacci spiral, unit vectors.\nconst SP = new Float32Array(NS * 3), SJ = new Float32Array(NS * 2);\nfor (let i = 0; i \u003c NS; i++) {\n  const y = 1 - (2 * (i + 0.2 + 0.6 * rnd())) / NS, r = sqrt(max(0, 1 - y * y)), a = i * 2.39996323 + (rnd() - 0.5) * 0.9 * (2 / sqrt(NS)) / max(r, 0.05);\n  SP[i * 3] = r * cos(a);\n  SP[i * 3 + 1] = y;\n  SP[i * 3 + 2] = r * sin(a);\n  SJ[i * 2] = 0.8 + 0.35 * rnd();\n  SJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// Doughnut roots: u round the ring, v round the tube, v drawn with density\n// R + r cos v so the hair is as thick inside the hole as outside.\nconst TP = new Float32Array(NT * 3), TN = new Float32Array(NT * 3), TU = new Float32Array(NT * 3), TV = new Float32Array(NT * 3), TJ = new Float32Array(NT * 2);\nfor (let i = 0; i \u003c NT; i++) {\n  const u = 2 * PI * ((i * 0.7548776662 + 0.3 * rnd() / NT * 40) % 1), F = (i * 0.5698402910 + 0.5 + (rnd() - 0.5) * 0.02) % 1;\n  let v = 2 * PI * F;\n  for (let k = 0; k \u003c 8; k++) v -= (TR * v + TQ * sin(v) - 2 * PI * TR * F) / (TR + TQ * cos(v));\n  const cu = cos(u), su = sin(u), cv = cos(v), sv = sin(v), rr = TR + TQ * cv, o = i * 3;\n  TP[o] = rr * cu, TP[o + 1] = rr * su, TP[o + 2] = TQ * sv;\n  TN[o] = cv * cu, TN[o + 1] = cv * su, TN[o + 2] = sv;\n  TU[o] = -su, TU[o + 1] = cu, TU[o + 2] = 0;\n  TV[o] = -sv * cu, TV[o + 1] = -sv * su, TV[o + 2] = cv;\n  TJ[i * 2] = 0.8 + 0.35 * rnd();\n  TJ[i * 2 + 1] = 0.75 + 0.4 * rnd();\n}\n\n// 3x3 rotations, row major.\nconst mul = (A, B) => {\n  const C = new Array(9);\n  for (let r = 0; r \u003c 3; r++) for (let c = 0; c \u003c 3; c++) C[r * 3 + c] = A[r * 3] * B[c] + A[r * 3 + 1] * B[3 + c] + A[r * 3 + 2] * B[6 + c];\n  return C;\n};\nconst rx = (a) => [1, 0, 0, 0, cos(a), -sin(a), 0, sin(a), cos(a)];\nconst ry = (a) => [cos(a), 0, sin(a), 0, 1, 0, -sin(a), 0, cos(a)];\nconst rz = (a) => [cos(a), -sin(a), 0, sin(a), cos(a), 0, 0, 0, 1];\n\n// Light from the upper left, in front; H halfway to the eye.\nconst LX = -0.45 / 0.996, LY = -0.55 / 0.996, LZ = 0.7 / 0.996;\nconst HN = Math.hypot(LX, LY, LZ + 1), HX = LX / HN, HY = LY / HN, HZ = (LZ + 1) / HN;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The combs the sphere goes through: how far apart its two cowlicks stand\n// (1 opposite each other, 0 merged into one zero of index 2) and the angle\n// of the doughnut's hair (0 along the ring, pi/2 along the tube).\nconst PROG = [[0.55, 0.12], [0, 0.85], [1, -0.55], [0.3, 0.4], [0, -0.9], [1, 0.25]];\n\n// The sphere's body turns about its own vertical axis, tipped toward the\n// eye; the field turns inside it on its own, from the angles a.\nconst bodyM = (T) => mul(rx(-0.42 + 0.12 * sin(T * 0.21)), ry(T * 0.6));\nconst fieldM = (a, T) => mul(rz(a[0] + T * 0.09), mul(rx(a[1] + 0.5 * sin(T * 0.05 + 1)), rz(a[2])));\n// The two zeros in field coordinates sit at w = +-t on the stereographic\n// plane, symmetric about the south pole; t = 1 puts them opposite. Out\n// come both as unit vectors in M's frame.\nfunction zeros(M, t) {\n  const t2 = t * t, Z = [];\n  for (const sg of [1, -1]) {\n    const fx = (2 * sg * t) / (1 + t2), fz = (t2 - 1) / (1 + t2);\n    Z.push(M[0] * fx + M[2] * fz, M[3] * fx + M[5] * fz, M[6] * fx + M[8] * fz);\n  }\n  return Z;\n}\n// A new comb is turned so that a cowlick faces the eye for most of the\n// seven units it lasts, both of them when they stand close enough.\nfunction aim(T, sep, from) {\n  let best = -9, pick = from;\n  for (let c = 0; c \u003c 40; c++) {\n    const a = from.map((v) => v + (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.3 * Math.random()));\n    let lo = 9, sum = 0;\n    for (let j = 0; j \u003c 5; j++) {\n      const Tj = T + 0.8 + j * 1.5, Z = zeros(mul(bodyM(Tj), fieldM(a, Tj)), sep), v = max(Z[2], Z[5]) + 0.5 * min(Z[2], Z[5]);\n      (lo = min(lo, v)), (sum += v);\n    }\n    const score = lo + sum / 5;\n    if (score > best) (best = score), (pick = a);\n  }\n  return pick;\n}\n\n// 3x5 digits, one row of three bits per line, top first.\nconst DIG2 = [7, 1, 7, 4, 7], DIG0 = [7, 5, 5, 5, 7];\nfunction digit(buf, rows, x0, y0, c) {\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++)\n      if ((rows[j] >> (2 - i)) & 1) {\n        const q = ((y0 + j) * W + x0 + i) * 3;\n        for (let k = 0; k \u003c 3; k++) buf[q + k] = 40 + 120 * c[k];\n      }\n}\n\nexport function setup(params) {\n  const a = aim(-0.8, PROG[0][0], [0, 0, 0]);\n  params.s = {\n    T: 0, clock: 0, step: 0, a: a.slice(), ta: a,\n    sep: PROG[0][0], al: PROG[0][1],\n    hue: 0, len: 8, th: PI / 4,\n    buf: new Float32Array(N * 3), zb: new Float32Array(N), zh: new Float32Array(N),\n    cs: new Float32Array(3), ct: new Float32Array(3), cg: new Float32Array(3),\n  };\n}\n\nfunction recomb(P) {\n  P.step = (P.step + 1) % PROG.length;\n  P.clock = 0;\n  P.ta = aim(P.T, PROG[P.step][0], P.ta);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.len = cl(k[2], 8, 13);\n  P.th = (PI / 4) * (1 + cl(k[3], -1, 1));\n  const dT = d * cl(k[1], 0.2, 3) * 0.5;\n  P.T += dT;\n  P.clock += dT;\n  if (input.btnPressed && input.btnPressed[0]) recomb(P);\n  else if (P.clock > 7) recomb(P);\n  const e = 1 - exp(-max(dT, d * 0.5) * 2.4), g = PROG[P.step];\n  for (let i = 0; i \u003c 3; i++) P.a[i] += (P.ta[i] - P.a[i]) * e;\n  P.sep += (g[0] - P.sep) * e;\n  P.al += (g[1] - P.al) * e;\n}\n\n// One hair: root (x, y, z) on screen, direction (hx, hy, hz) times its\n// length, colour (r, g, b) at the tip; the root end is darker.\nfunction hair(P, x, y, z, hx, hy, hz, r, g, b) {\n  const n = max(2, ceil(Math.hypot(hx, hy) * 1.4) + 1), buf = P.buf, zb = P.zb, zh = P.zh;\n  for (let j = 0; j \u003c n; j++) {\n    const s = j / (n - 1), X = floor(x + hx * s), Y = floor(y + hy * s);\n    if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n    const p = Y * W + X, Z = z + hz * s;\n    if (Z \u003c zb[p] - 1.2 || Z \u003c= zh[p]) continue;\n    zh[p] = Z;\n    const m = 0.22 + 0.78 * s * s, q = p * 3;\n    buf[q] = r * m, buf[q + 1] = g * m, buf[q + 2] = b * m;\n  }\n}\n\n// Hair light after Kajiya and Kay: a fibre is lit by how square it lies to\n// the light and shines where it lies square to the half vector.\nfunction shade(tx, ty, tz, nx, ny, nz) {\n  const tl = tx * LX + ty * LY + tz * LZ, th = tx * HX + ty * HY + tz * HZ, nl = nx * LX + ny * LY + nz * LZ;\n  const lam = 0.22 + 0.78 * max(0, nl), dif = sqrt(max(0, 1 - tl * tl)), sp = (1 - th * th) ** 12;\n  return [lam * (0.35 + 0.65 * dif), 0.75 * sp * max(0, nl + 0.2)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const buf = P.buf, zb = P.zb, zh = P.zh, cs = P.cs, ct = P.ct, cg = P.cg, T = P.T;\n  buf.fill(0);\n  zb.fill(-1e9);\n  zh.fill(-1e9);\n  hsv(P.hue + 0.6, 0.75, 1, cs, 0);\n  hsv(P.hue + 0.47, 0.8, 1, ct, 0);\n  hsv(P.hue + 0.12, 0.6, 1, cg, 0);\n  const pulse = 0.85 + 0.15 * sin(T * 3.1);\n\n  // The sphere.\n  const Mb = bodyM(T), Rf = fieldM(P.a, T), M = mul(Mb, Rf), t = P.sep, t2 = t * t, Z = zeros(M, t);\n  // Skin: dark, with the cowlicks glowing through.\n  const R2 = RS * RS;\n  for (let y = max(0, floor(SY - RS)); y \u003c= min(H - 1, ceil(SY + RS)); y++)\n    for (let x = max(0, floor(SX - RS)); x \u003c= min(W - 1, ceil(SX + RS)); x++) {\n      const dx = x + 0.5 - SX, dy = y + 0.5 - SY, rr = dx * dx + dy * dy;\n      if (rr >= R2) continue;\n      const dz = sqrt(R2 - rr), nx = dx / RS, ny = dy / RS, nz = dz / RS, p = y * W + x, q = p * 3;\n      zb[p] = dz;\n      const lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      const gl = exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.05) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.05);\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * (cs[c] * lam + cg[c] * min(1, gl) * 0.9 * pulse);\n    }\n  // The field: v(w) = e^{i theta} (w^2 - t^2) on the plane, carried back to\n  // the sphere. Its only zeros are w = t and w = -t, each of index 1; at\n  // t = 0 they merge into one zero of index 2. There is always one.\n  const kc = cos(P.th), ks = sin(P.th), L = P.len, lb = 0.35 - 0.02 * (L - 8);\n  for (let i = 0; i \u003c NS; i++) {\n    const o = i * 3, bx = SP[o], by = SP[o + 1], bz = SP[o + 2];\n    const nx = Mb[0] * bx + Mb[1] * by + Mb[2] * bz, ny = Mb[3] * bx + Mb[4] * by + Mb[5] * bz, nz = Mb[6] * bx + Mb[7] * by + Mb[8] * bz;\n    if (nz \u003c -0.3) continue;\n    // Into field coordinates: f = Rf^T b.\n    const fx = Rf[0] * bx + Rf[3] * by + Rf[6] * bz, fy = Rf[1] * bx + Rf[4] * by + Rf[7] * bz, fz = Rf[2] * bx + Rf[5] * by + Rf[8] * bz;\n    const den = max(1e-7, 1 - fz), a = fx / den, b = fy / den, re = a * a - b * b - t2, im = 2 * a * b;\n    const va = kc * re - ks * im, vb = ks * re + kc * im, s = 1 + a * a + b * b, qq = (a * va + b * vb) / s;\n    let gx = va - 2 * a * qq, gy = vb - 2 * b * qq, gz = 2 * qq;\n    const gn = Math.hypot(gx, gy, gz) || 1;\n    gx /= gn, gy /= gn, gz /= gn;\n    // Field direction on screen.\n    const dx = M[0] * gx + M[1] * gy + M[2] * gz, dy = M[3] * gx + M[4] * gy + M[5] * gz, dz = M[6] * gx + M[7] * gy + M[8] * gz;\n    // Near a zero the hair stands up and glows.\n    const gl = min(1, exp(-(1 - (nx * Z[0] + ny * Z[1] + nz * Z[2])) / 0.07) + exp(-(1 - (nx * Z[3] + ny * Z[4] + nz * Z[5])) / 0.07));\n    const lift = lb + 0.8 * gl, cL = cos(lift), sL = sin(lift);\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * SJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * SJ[i * 2] * li, w = 255 * sp, gg = 255 * gl * pulse;\n    hair(P, SX + RS * nx, SY + RS * ny, RS * nz, hx * len, hy * len, hz * len,\n      cs[0] * br + w + cg[0] * gg, cs[1] * br + w + cg[1] * gg, cs[2] * br + w + cg[2] * gg);\n  }\n\n  // The doughnut, seen from about 40 degrees above, spinning on its\n  // own axis and swaying. Its hair lies along cos(al) e_u + sin(al) e_v: no\n  // zero anywhere, which the torus allows because its Euler characteristic is 0.\n  const Mt = mul(ry(0.3 * sin(T * 0.13)), mul(rx(0.84 + 0.08 * sin(T * 0.17)), rz(T * 0.5)));\n  const RO = TR + TQ, ox = Mt[6], oy = Mt[7], oz = Mt[8];\n  for (let y = max(0, floor(TY - RO)); y \u003c= min(H - 1, ceil(TY + RO)); y++)\n    for (let x = max(0, floor(TX - RO)); x \u003c= min(W - 1, ceil(TX + RO)); x++) {\n      const dx = x + 0.5 - TX, dy = y + 0.5 - TY;\n      if (dx * dx + dy * dy >= RO * RO) continue;\n      // March a ray into the doughnut's own coordinates.\n      const z0 = RO + 1;\n      const px0 = Mt[0] * dx + Mt[3] * dy + Mt[6] * z0, py0 = Mt[1] * dx + Mt[4] * dy + Mt[7] * z0, pz0 = Mt[2] * dx + Mt[5] * dy + Mt[8] * z0;\n      let tt = 0, hit = false, px = 0, py = 0, pz = 0;\n      for (let it = 0; it \u003c 40 && tt \u003c 2 * z0; it++) {\n        px = px0 - ox * tt, py = py0 - oy * tt, pz = pz0 - oz * tt;\n        const qd = sqrt(px * px + py * py) - TR, dd = sqrt(qd * qd + pz * pz) - TQ;\n        if (dd \u003c 0.03) {\n          hit = true;\n          break;\n        }\n        tt += dd;\n      }\n      if (!hit) continue;\n      const rl = sqrt(px * px + py * py) || 1, bx = (px - (TR * px) / rl) / TQ, by = (py - (TR * py) / rl) / TQ, bz = pz / TQ;\n      const nx = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, ny = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, nz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n      const p = y * W + x, q = p * 3, lam = 0.08 + 0.22 * max(0, nx * LX + ny * LY + nz * LZ);\n      zb[p] = z0 - tt;\n      for (let c = 0; c \u003c 3; c++) buf[q + c] = 255 * ct[c] * lam;\n    }\n  const ca = cos(P.al), sa = sin(P.al), cL = cos(lb), sL = sin(lb);\n  for (let i = 0; i \u003c NT; i++) {\n    const o = i * 3, bnx = TN[o], bny = TN[o + 1], bnz = TN[o + 2];\n    const nx = Mt[0] * bnx + Mt[1] * bny + Mt[2] * bnz, ny = Mt[3] * bnx + Mt[4] * bny + Mt[5] * bnz, nz = Mt[6] * bnx + Mt[7] * bny + Mt[8] * bnz;\n    const gx = ca * TU[o] + sa * TV[o], gy = ca * TU[o + 1] + sa * TV[o + 1], gz = ca * TU[o + 2] + sa * TV[o + 2];\n    const dx = Mt[0] * gx + Mt[1] * gy + Mt[2] * gz, dy = Mt[3] * gx + Mt[4] * gy + Mt[5] * gz, dz = Mt[6] * gx + Mt[7] * gy + Mt[8] * gz;\n    const bx = TP[o], by = TP[o + 1], bz = TP[o + 2];\n    const X = Mt[0] * bx + Mt[1] * by + Mt[2] * bz, Y = Mt[3] * bx + Mt[4] * by + Mt[5] * bz, Zz = Mt[6] * bx + Mt[7] * by + Mt[8] * bz;\n    const hx = dx * cL + nx * sL, hy = dy * cL + ny * sL, hz = dz * cL + nz * sL, len = L * TJ[i * 2 + 1];\n    const [li, sp] = shade(hx, hy, hz, nx, ny, nz), br = 255 * TJ[i * 2] * li, w = 255 * sp;\n    hair(P, TX + X, TY + Y, Zz, hx * len, hy * len, hz * len, ct[0] * br + w, ct[1] * br + w, ct[2] * br + w);\n  }\n\n  // The Euler characteristic beside each: 2 for the sphere, 0 for the torus.\n  digit(buf, DIG2, 59, 2, cs);\n  digit(buf, DIG0, 59, 121, ct);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=8..13, Comb=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the blue sphere, the teal doughnut and the gold cowlicks round the colour wheel together."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the sphere turns once in about 10 seconds and is combed again every 7, with two cowlicks far apart, then close together, then merged into one of index 2; at 0.2 everything runs ten times slower."},{"name":"Length","min":8,"max":13,"about":"The hair length in LEDs, 8 to 13, each hair a little longer or shorter; long hair lies flatter."},{"name":"Comb","min":-1,"max":1,"about":"How the sphere's hair runs round its cowlicks: at -1 straight out of one and into the other, at 0 in a whorl, at 1 round and round them."}],"start":[0,2,8,0.06],"measures":{"motion":1.5705,"detail":0.1196,"edges":0.4915,"complexity":1.6126,"coverage":0.5237,"colour":0.1866,"drift":0.0881},"knobResponse":[0.0995,0.1196,0.1223,0.076]},{"slug":"halftone","title":"Halftone","family":"print","round":2,"note":"떠도는 등불 넷이 비추는 저녁 하늘을 잉크마다 각도가 다른 망점으로 찍어요. 점은 농도만큼 자라고 줄며, K1 이 CMY, 리소, 벤데이, 신문 잉크를 골라요.","idea":"A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.","buttons":"K1 tap knocks the plates out of register, and they settle back.","code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-halftone","type":"code","name":"halftone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint."},{"name":"Speed","min":0.1,"max":5,"about":"How fast the lights drift under the screens."},{"name":"Screen","min":8,"max":13,"about":"How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones."},{"name":"Turn","min":0,"max":30,"about":"Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot."}],"start":[0,2,8,0.06],"measures":{"motion":0.0294,"detail":0.0277,"edges":0.6406,"complexity":0.1753,"coverage":0.9983,"colour":0.4355,"drift":0.0403},"knobResponse":[0.2427,0.1303,0.1431,0.1473]},{"slug":"hammersley-lines","title":"Hammersley Lines","family":"algo","round":32,"note":"왼쪽 아래를 원점으로 점이 빗방울처럼 하나씩 떨어져 쌓여요. 원점에서 그 칸까지의 상자 안에서 오른쪽 위로 이어지는 가장 긴 점 사슬의 길이로 띠를 칠해서, 점마다 꺾이는 계단 등고선이 쌍곡선 xy = 일정 꼴로 모여요. 오른쪽 위 모서리까지 가장 긴 사슬은 금빛 길이에요.","idea":"Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.","buttons":"K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.","code":"// ===== Patternflow pattern =====\n// Title:   Hammersley Lines\n// Family:  algo\n// Idea:    Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ulam's problem and Hammersley's process (John Hammersley, 1972), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1\n//\n// Knob 1: Hue. Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white.\n// Knob 2: Speed. How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins.\n// Knob 3: Points. How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000.\n// Knob 4: Bands. How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler.\n// Buttons: K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.\n\nconst W = 64, H = 128, N = W * H, MAXN = 1100;\nconst { floor, exp, log, max, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Drops fall this many rows a second at Speed 2.\nconst FALL = 320;\nconst HOLD = 1.2;\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nfunction clear(P) {\n  P.n = 0;\n  P.nd = 0;\n  P.made = 0;\n  P.next = 0;\n  P.hold = -1;\n  P.top = 0;\n  P.M.fill(0);\n  P.prevM.fill(0);\n  P.glow.fill(0);\n  P.dirty = true;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    px: F(MAXN), py: F(MAXN), pt: F(MAXN), ell: I(MAXN), pred: I(MAXN), byX: I(MAXN), byY: I(MAXN), rank: I(MAXN), chain: I(MAXN),\n    dx: F(MAXN), dy: F(MAXN), dt0: F(MAXN),\n    fen: I(MAXN + 1), fenI: I(MAXN + 1), cell: I(N), M: I(N), prevM: I(N), glow: F(N),\n    gold: new Uint8Array(N), oldR: F(N), oldG: F(N), oldB: F(N), cr: F(N), cg: F(N), cb: F(N),\n    n: 0, nd: 0, made: 0, next: 0, hold: -1, clock: 0, oldA: 0, target: 200, hue: 0, speed: 2, fill: 0.3, top: 0, dirty: true,\n  };\n  clear(params.s);\n}\n\n// Puts point k into a list kept sorted by one coordinate.\nfunction insert(list, key, k) {\n  let lo = 0, hi = k;\n  while (lo \u003c hi) {\n    const m = (lo + hi) >> 1;\n    if (key[list[m]] \u003c key[k]) lo = m + 1;\n    else hi = m;\n  }\n  for (let j = k; j > lo; j--) list[j] = list[j - 1];\n  list[lo] = k;\n}\n\n// A drop lands and becomes a point.\nfunction land(P, x, y) {\n  const k = P.n++;\n  (P.px[k] = x), (P.py[k] = y), (P.pt[k] = P.clock);\n  insert(P.byX, P.px, k);\n  insert(P.byY, P.py, k);\n  P.dirty = true;\n}\n\n// Longest chains. Taking the points left to right, the longest chain ending at\n// a point is one more than the longest ending at any earlier point below it;\n// a Fenwick tree over the points' height ranks keeps the best so far below\n// every height.\n// Then L on the pixel grid: L(x, y) is the longest chain among the points in\n// the box from the origin to the pixel's top right corner.\nfunction chains(P) {\n  const { px, py, ell, pred, byX, byY, rank, fen, fenI, cell, M, chain } = P, n = P.n;\n  for (let a = 0; a \u003c n; a++) rank[byY[a]] = a;\n  fen.fill(0);\n  fenI.fill(-1);\n  let best = 0, bestI = -1;\n  for (let a = 0; a \u003c n; a++) {\n    const p = byX[a], b = rank[p];\n    let l = 0, li = -1;\n    for (let i = b; i > 0; i -= i & -i) if (fen[i] > l) (l = fen[i]), (li = fenI[i]);\n    ell[p] = l + 1;\n    pred[p] = li;\n    for (let i = b + 1; i \u003c= n; i += i & -i) if (fen[i] \u003c l + 1) (fen[i] = l + 1), (fenI[i] = p);\n    if (l + 1 > best) (best = l + 1), (bestI = p);\n  }\n  P.top = best;\n  let c = 0;\n  for (let p = bestI; p >= 0; p = pred[p]) chain[c++] = p;\n  cell.fill(0);\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]);\n    if (ell[p] > cell[i]) cell[i] = ell[p];\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let v = cell[i];\n      if (x > 0 && M[i - 1] > v) v = M[i - 1];\n      if (j > 0 && M[i - W] > v) v = M[i - W];\n      M[i] = v;\n    }\n  // The longest chain as a gold path from the origin through its points to\n  // the far corner.\n  const { gold } = P;\n  gold.fill(0);\n  if (!c) return;\n  let x0 = 0, y0 = 0;\n  for (let k = c - 1; k >= -1; k--) {\n    const x1 = k >= 0 ? px[chain[k]] : W - 0.5, y1 = k >= 0 ? py[chain[k]] : H - 0.5;\n    const steps = max(1, Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 2));\n    for (let s = 0; s \u003c= steps; s++) {\n      const u = s / steps, xx = floor(x0 + (x1 - x0) * u), yy = floor(y0 + (y1 - y0) * u);\n      gold[yy * W + xx] = 1;\n    }\n    (x0 = x1), (y0 = y1);\n  }\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  clear(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 200, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  P.target = floor(cl(kv[2], 200, 1000));\n  P.fill = 0.9 * cl(kv[3], 0, 1) ** 0.4;\n  P.clock += d;\n  P.oldA *= exp(-d / 0.4);\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  // Poisson arrivals at the top of the panel: target points in 12 / Speed\n  // seconds. Each falls straight down to its place and lands there.\n  const rate = (P.target * P.speed) / 12;\n  if (P.hold \u003c 0) {\n    P.next -= d;\n    while (P.next \u003c= 0 && P.made \u003c P.target) {\n      const k = P.nd++;\n      (P.dx[k] = Math.random() * W), (P.dy[k] = Math.random() * H), (P.dt0[k] = P.clock + P.next);\n      P.made++;\n      P.next += -log(1 - Math.random()) / rate;\n    }\n  }\n  // Drops: dy is the landing height from the bottom; a drop starts at the top.\n  let w = 0;\n  for (let k = 0; k \u003c P.nd; k++) {\n    const fallen = (P.clock - P.dt0[k]) * FALL * (0.6 + 0.2 * P.speed);\n    if (fallen >= H - P.dy[k]) land(P, P.dx[k], P.dy[k]);\n    else (P.dx[w] = P.dx[k]), (P.dy[w] = P.dy[k]), (P.dt0[w] = P.dt0[k]), w++;\n  }\n  P.nd = w;\n  if (P.dirty) {\n    P.prevM.set(P.M);\n    chains(P);\n    // A landing lifts L by one wherever the new point lengthens the best\n    // chain; the level lines there flash white as they move.\n    const { M, prevM, glow } = P;\n    for (let i = 0; i \u003c N; i++) if (M[i] !== prevM[i]) glow[i] = 1;\n    P.dirty = false;\n  }\n  const g = exp(-d / 0.35), { glow } = P;\n  for (let i = 0; i \u003c N; i++) glow[i] *= g;\n  if (P.hold \u003c 0 && P.made >= P.target && P.nd === 0) P.hold = 0;\n  else if (P.hold >= 0 && (P.hold += d) > HOLD) restart(P);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { M, glow, gold, px, py, pt, cr, cg, cb, oldR, oldG, oldB } = P;\n  const h0 = P.hue, fill = P.fill, oa = P.oldA, now = P.clock;\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, L = M[i];\n      let R = 0, G = 0, B = 0;\n      const line = (x > 0 && M[i - 1] !== L) || (j > 0 && M[i - W] !== L);\n      // Band colour swings between cyan and magenta and back every 24 levels.\n      const ph = (L / 24) % 1, hue = h0 + 0.5 + 0.38 * (ph \u003c 0.5 ? 2 * ph : 2 - 2 * ph);\n      if (L > 0) {\n        hsv(hue, 0.85, fill * (0.55 + 0.45 * (L & 1)));\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      if (line) {\n        const gw = glow[i];\n        hsv(hue, 0.5 - 0.2 * gw, 0.5 + 0.45 * gw);\n        (R = max(R, C[0])), (G = max(G, C[1])), (B = max(B, C[2]));\n      }\n      if (gold[i]) {\n        hsv(h0 + 0.12, 0.7, 1);\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      cr[i] = R * 255;\n      cg[i] = G * 255;\n      cb[i] = B * 255;\n    }\n  // Points: white, brightest on landing.\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]), v = 190 + 65 * exp(-(now - pt[p]) / 0.4);\n    (cr[i] = max(cr[i], v)), (cg[i] = max(cg[i], v)), (cb[i] = max(cb[i], v));\n  }\n  // Falling drops: a short streak above the head.\n  const sp = FALL * (0.6 + 0.2 * P.speed);\n  for (let k = 0; k \u003c P.nd; k++) {\n    const head = H - (now - P.dt0[k]) * sp, x = floor(P.dx[k]);\n    for (let s = 0; s \u003c 4; s++) {\n      const y = floor(head) + s;\n      if (y \u003c 0 || y >= H || y \u003c P.dy[k]) continue;\n      const i = y * W + x, v = 200 - 45 * s;\n      (cr[i] = max(cr[i], v * 0.8)), (cg[i] = max(cg[i], v * 0.9)), (cb[i] = max(cb[i], v));\n    }\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let R = cr[i], G = cg[i], B = cb[i];\n      if (oa > 0.01) (R = max(R, oldR[i] * oa)), (G = max(G, oldG[i] * oa)), (B = max(B, oldB[i] * oa));\n      display.setPixel(x, H - 1 - j, R, G, B);\n    }\n}\n","layer":{"id":"layer-hammersley-lines","type":"code","name":"hammersley-lines","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hammersley Lines\n// Family:  algo\n// Idea:    Points rain onto the panel as a Poisson process with the origin at the bottom left, and L(x, y), the longest chain of points rising to the right inside the box from the origin to (x, y), is drawn as coloured bands between its level lines, Hammersley's lines, which step down to the right with a corner on a point and close in on the hyperbolas xy = constant as the points pile up, while the longest chain to the far corner is traced in gold.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ulam's problem and Hammersley's process (John Hammersley, 1972), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1\n//\n// Knob 1: Hue. Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white.\n// Knob 2: Speed. How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins.\n// Knob 3: Points. How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000.\n// Knob 4: Bands. How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler.\n// Buttons: K1 tap starts a new rain of points on an empty panel while the old picture fades in 0.4 s.\n\nconst W = 64, H = 128, N = W * H, MAXN = 1100;\nconst { floor, exp, log, max, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Drops fall this many rows a second at Speed 2.\nconst FALL = 320;\nconst HOLD = 1.2;\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nfunction clear(P) {\n  P.n = 0;\n  P.nd = 0;\n  P.made = 0;\n  P.next = 0;\n  P.hold = -1;\n  P.top = 0;\n  P.M.fill(0);\n  P.prevM.fill(0);\n  P.glow.fill(0);\n  P.dirty = true;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), I = (n) => new Int32Array(n);\n  params.s = {\n    px: F(MAXN), py: F(MAXN), pt: F(MAXN), ell: I(MAXN), pred: I(MAXN), byX: I(MAXN), byY: I(MAXN), rank: I(MAXN), chain: I(MAXN),\n    dx: F(MAXN), dy: F(MAXN), dt0: F(MAXN),\n    fen: I(MAXN + 1), fenI: I(MAXN + 1), cell: I(N), M: I(N), prevM: I(N), glow: F(N),\n    gold: new Uint8Array(N), oldR: F(N), oldG: F(N), oldB: F(N), cr: F(N), cg: F(N), cb: F(N),\n    n: 0, nd: 0, made: 0, next: 0, hold: -1, clock: 0, oldA: 0, target: 200, hue: 0, speed: 2, fill: 0.3, top: 0, dirty: true,\n  };\n  clear(params.s);\n}\n\n// Puts point k into a list kept sorted by one coordinate.\nfunction insert(list, key, k) {\n  let lo = 0, hi = k;\n  while (lo \u003c hi) {\n    const m = (lo + hi) >> 1;\n    if (key[list[m]] \u003c key[k]) lo = m + 1;\n    else hi = m;\n  }\n  for (let j = k; j > lo; j--) list[j] = list[j - 1];\n  list[lo] = k;\n}\n\n// A drop lands and becomes a point.\nfunction land(P, x, y) {\n  const k = P.n++;\n  (P.px[k] = x), (P.py[k] = y), (P.pt[k] = P.clock);\n  insert(P.byX, P.px, k);\n  insert(P.byY, P.py, k);\n  P.dirty = true;\n}\n\n// Longest chains. Taking the points left to right, the longest chain ending at\n// a point is one more than the longest ending at any earlier point below it;\n// a Fenwick tree over the points' height ranks keeps the best so far below\n// every height.\n// Then L on the pixel grid: L(x, y) is the longest chain among the points in\n// the box from the origin to the pixel's top right corner.\nfunction chains(P) {\n  const { px, py, ell, pred, byX, byY, rank, fen, fenI, cell, M, chain } = P, n = P.n;\n  for (let a = 0; a \u003c n; a++) rank[byY[a]] = a;\n  fen.fill(0);\n  fenI.fill(-1);\n  let best = 0, bestI = -1;\n  for (let a = 0; a \u003c n; a++) {\n    const p = byX[a], b = rank[p];\n    let l = 0, li = -1;\n    for (let i = b; i > 0; i -= i & -i) if (fen[i] > l) (l = fen[i]), (li = fenI[i]);\n    ell[p] = l + 1;\n    pred[p] = li;\n    for (let i = b + 1; i \u003c= n; i += i & -i) if (fen[i] \u003c l + 1) (fen[i] = l + 1), (fenI[i] = p);\n    if (l + 1 > best) (best = l + 1), (bestI = p);\n  }\n  P.top = best;\n  let c = 0;\n  for (let p = bestI; p >= 0; p = pred[p]) chain[c++] = p;\n  cell.fill(0);\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]);\n    if (ell[p] > cell[i]) cell[i] = ell[p];\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let v = cell[i];\n      if (x > 0 && M[i - 1] > v) v = M[i - 1];\n      if (j > 0 && M[i - W] > v) v = M[i - W];\n      M[i] = v;\n    }\n  // The longest chain as a gold path from the origin through its points to\n  // the far corner.\n  const { gold } = P;\n  gold.fill(0);\n  if (!c) return;\n  let x0 = 0, y0 = 0;\n  for (let k = c - 1; k >= -1; k--) {\n    const x1 = k >= 0 ? px[chain[k]] : W - 0.5, y1 = k >= 0 ? py[chain[k]] : H - 0.5;\n    const steps = max(1, Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 2));\n    for (let s = 0; s \u003c= steps; s++) {\n      const u = s / steps, xx = floor(x0 + (x1 - x0) * u), yy = floor(y0 + (y1 - y0) * u);\n      gold[yy * W + xx] = 1;\n    }\n    (x0 = x1), (y0 = y1);\n  }\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  clear(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 200, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  P.target = floor(cl(kv[2], 200, 1000));\n  P.fill = 0.9 * cl(kv[3], 0, 1) ** 0.4;\n  P.clock += d;\n  P.oldA *= exp(-d / 0.4);\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  // Poisson arrivals at the top of the panel: target points in 12 / Speed\n  // seconds. Each falls straight down to its place and lands there.\n  const rate = (P.target * P.speed) / 12;\n  if (P.hold \u003c 0) {\n    P.next -= d;\n    while (P.next \u003c= 0 && P.made \u003c P.target) {\n      const k = P.nd++;\n      (P.dx[k] = Math.random() * W), (P.dy[k] = Math.random() * H), (P.dt0[k] = P.clock + P.next);\n      P.made++;\n      P.next += -log(1 - Math.random()) / rate;\n    }\n  }\n  // Drops: dy is the landing height from the bottom; a drop starts at the top.\n  let w = 0;\n  for (let k = 0; k \u003c P.nd; k++) {\n    const fallen = (P.clock - P.dt0[k]) * FALL * (0.6 + 0.2 * P.speed);\n    if (fallen >= H - P.dy[k]) land(P, P.dx[k], P.dy[k]);\n    else (P.dx[w] = P.dx[k]), (P.dy[w] = P.dy[k]), (P.dt0[w] = P.dt0[k]), w++;\n  }\n  P.nd = w;\n  if (P.dirty) {\n    P.prevM.set(P.M);\n    chains(P);\n    // A landing lifts L by one wherever the new point lengthens the best\n    // chain; the level lines there flash white as they move.\n    const { M, prevM, glow } = P;\n    for (let i = 0; i \u003c N; i++) if (M[i] !== prevM[i]) glow[i] = 1;\n    P.dirty = false;\n  }\n  const g = exp(-d / 0.35), { glow } = P;\n  for (let i = 0; i \u003c N; i++) glow[i] *= g;\n  if (P.hold \u003c 0 && P.made >= P.target && P.nd === 0) P.hold = 0;\n  else if (P.hold >= 0 && (P.hold += d) > HOLD) restart(P);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { M, glow, gold, px, py, pt, cr, cg, cb, oldR, oldG, oldB } = P;\n  const h0 = P.hue, fill = P.fill, oa = P.oldA, now = P.clock;\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, L = M[i];\n      let R = 0, G = 0, B = 0;\n      const line = (x > 0 && M[i - 1] !== L) || (j > 0 && M[i - W] !== L);\n      // Band colour swings between cyan and magenta and back every 24 levels.\n      const ph = (L / 24) % 1, hue = h0 + 0.5 + 0.38 * (ph \u003c 0.5 ? 2 * ph : 2 - 2 * ph);\n      if (L > 0) {\n        hsv(hue, 0.85, fill * (0.55 + 0.45 * (L & 1)));\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      if (line) {\n        const gw = glow[i];\n        hsv(hue, 0.5 - 0.2 * gw, 0.5 + 0.45 * gw);\n        (R = max(R, C[0])), (G = max(G, C[1])), (B = max(B, C[2]));\n      }\n      if (gold[i]) {\n        hsv(h0 + 0.12, 0.7, 1);\n        (R = C[0]), (G = C[1]), (B = C[2]);\n      }\n      cr[i] = R * 255;\n      cg[i] = G * 255;\n      cb[i] = B * 255;\n    }\n  // Points: white, brightest on landing.\n  for (let p = 0; p \u003c P.n; p++) {\n    const i = floor(py[p]) * W + floor(px[p]), v = 190 + 65 * exp(-(now - pt[p]) / 0.4);\n    (cr[i] = max(cr[i], v)), (cg[i] = max(cg[i], v)), (cb[i] = max(cb[i], v));\n  }\n  // Falling drops: a short streak above the head.\n  const sp = FALL * (0.6 + 0.2 * P.speed);\n  for (let k = 0; k \u003c P.nd; k++) {\n    const head = H - (now - P.dt0[k]) * sp, x = floor(P.dx[k]);\n    for (let s = 0; s \u003c 4; s++) {\n      const y = floor(head) + s;\n      if (y \u003c 0 || y >= H || y \u003c P.dy[k]) continue;\n      const i = y * W + x, v = 200 - 45 * s;\n      (cr[i] = max(cr[i], v * 0.8)), (cg[i] = max(cg[i], v * 0.9)), (cb[i] = max(cb[i], v));\n    }\n  }\n  for (let j = 0; j \u003c H; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x;\n      let R = cr[i], G = cg[i], B = cb[i];\n      if (oa > 0.01) (R = max(R, oldR[i] * oa)), (G = max(G, oldG[i] * oa)), (B = max(B, oldB[i] * oa));\n      display.setPixel(x, H - 1 - j, R, G, B);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Points=200..1000, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the band colours and the chain round the wheel together. At 0 the bands swing from cyan at L = 1 through blue and violet to magenta at L = 12 and back to cyan at L = 24, the level lines are the band colours paled and brighten for a third of a second when a landing moves them, the chain is gold and the points stay white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the points come. At 2 the whole count arrives in about 6 s, 33 points a second at the start, and each falls from the top edge at 320 rows a second; at 0.2 the count takes a minute and at 3 it takes 4 s. When the last point lands the picture holds 1.2 s and fades out as the next rain begins."},{"name":"Points","min":200,"max":1000,"about":"How many points fall before the panel starts again, 200 to 1,000. The longest chain then comes out near 2 sqrt(n) - 1.77 n^(1/6): 23 to 29 over twelve rains of 200 against 24 from the formula, and 54 to 64 for 1,000 against 58. Near the top right corner the lines stand about 4 LEDs apart across and 9 up at 200, 2 across and 4 up at 1,000."},{"name":"Bands","min":0,"max":1,"about":"How bright the bands between the level lines are. At 0 the lines alone on black; at 0.06 odd levels at 29% and even ones at 16%; at 1 at 90% and 50%, solid colour with the lines barely paler."}],"start":[0,2,200,0.06],"measures":{"motion":0.4589,"detail":0.1005,"edges":0.9193,"complexity":0.242,"coverage":0.9226,"colour":0.2106,"drift":0.1453},"knobResponse":[0.1723,0.2043,0.2559,0.3087]},{"slug":"hanging-scroll","title":"Hanging Scroll","family":"paper","round":23,"note":"어두운 도코노마 벽의 못에 족자가 걸리고, 아래 굴대가 내려가며 비단 표구 속 상아빛 종이에 그린 먹 산수를 한 줄씩 드러내요. 안개 낀 봉우리 아래 소나무와 폭포, 초가와 쪽배가 있고 붉은 낙관이 찍혀 있어요. 외풍에 조금 흔들리다 아래부터 말려 올라가면 바람 맞는 대나무가 내려오고, 달 아래 홍매와 파도 위 학이 뒤를 이어요.","idea":"A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.","buttons":"K1 tap rolls the scroll up now and unrolls the next painting.","code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","layer":{"id":"layer-hanging-scroll","type":"code","name":"hanging-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half."},{"name":"Painting","min":0,"max":3,"about":"Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down."},{"name":"Ink","min":0,"max":1,"about":"How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.177,"detail":0.0295,"edges":0.2326,"complexity":1.3758,"coverage":0.4677,"colour":0.1211,"drift":0.2049},"knobResponse":[0.0845,0.2,0.0646,0.0324]},{"slug":"harmonograph","title":"Harmonograph","family":"line","round":1,"note":"단순한 비에서 조금씩 어긋난 진자 셋이 닫히지 않는 그림을 그리고, 멎어 가며 가운데로 감겨 들어가요.","idea":"Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.","buttons":"K1 tap gives the pendulums a fresh push.","code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","layer":{"id":"layer-harmonograph","type":"code","name":"harmonograph","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the fresh line; older line turns a little round the wheel as it fades."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the pen travels; a slow pen's line lasts longer."},{"name":"Ratio","min":0,"max":7,"about":"Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune."},{"name":"Damping","min":0.02,"max":0.4,"about":"How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds."}],"start":[0,2,0,0.06],"measures":{"motion":0.0325,"detail":0.0469,"edges":0.3334,"complexity":0.8432,"coverage":0.2444,"colour":0.1802,"drift":0.053},"knobResponse":[0.0712,0.0419,0.0758,0.0561]},{"slug":"harp","title":"Harp","family":"music","round":16,"note":"무대에 선 페달 하프가 패널 높이를 다 채우고, 보이지 않는 하프 주자가 뜯은 줄이 렌즈 꼴로 번졌다가 잦아들어요. K3 은 펼친화음, 굴린 화음, 하모닉스, 글리산도 가운데 하나를 고르고, K1 을 누르면 29줄을 다 훑는 글리산도가 올라갔다 내려와요.","idea":"A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.","buttons":"K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.","code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","layer":{"id":"layer-harp","type":"code","name":"harp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210."},{"name":"Figure","min":0,"max":3,"about":"What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass."},{"name":"Damp","min":0,"max":1,"about":"At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds."}],"start":[0,2,0,0.06],"measures":{"motion":0.151,"detail":0.0758,"edges":0.4257,"complexity":1.512,"coverage":0.8852,"colour":0.2261,"drift":0.0747},"knobResponse":[0.0708,0.0671,0.0617,0.0595]},{"slug":"heawood-torus","title":"Heawood Torus","family":"topology","round":36,"note":"세로로 긴 토러스가 천천히 돌며 헤우드의 지도를 보여 줘요. 일곱 나라가 저마다 나머지 여섯과 모두 맞닿아서, 구 위의 지도와 달리 이 지도는 일곱 색이 있어야 칠해져요. K3 은 구멍을 넓혀 굵은 관을 가는 고리로 만들고, K1 을 누르면 여섯 초 동안 일곱 수도와 그 사이 길 21개가 흰 선으로 그려져요.","idea":"A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.","buttons":"K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.","code":"// ===== Patternflow pattern =====\n// Title:   Heawood Torus\n// Family:  topology\n// Idea:    A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Heawood's seven-colour map on the torus (Percy Heawood, 1890), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1\n//\n// Knob 1: Hue. Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red.\n// Knob 2: Speed. How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s.\n// Knob 3: Hole. The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall.\n// Knob 4: Tilt. How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above.\n// Buttons: K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sin, cos, abs, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The plane tiled by hexagons, the hexagon at axial (a, b) coloured\n// (a + 3b) mod 7. Its six neighbours sit at (+-1, 0), (0, +-1) and\n// +-(1, -1), so their colours differ from its own by +-1, +-3 and +-2: all\n// six other colours, once each. The colouring repeats on the lattice L of\n// (a, b) with a + 3b = 0 mod 7, which has index 7, so the torus plane / L\n// holds exactly one hexagon of each colour, and each touches the other six.\n// L is spanned by E1 = (2, -3) and E2 = (1, 2) (determinant 7); of all the\n// bases of L these two shear the hexagons least on the long, thin parameter\n// square of this torus.\nconst E1A = 2, E1B = -3, E2A = 1, E2B = 2;\n\n// Samples round the core curve and round the tube; samples along each road.\nconst NU = 600, NV = 120, NS = NU * NV, NR = 200;\n// The outer half width of the torus in LEDs, and its half height before it leans.\nconst RO = 31, HALF = 63;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The country at fractional axial coordinates (qa, qb): round to the nearest\n// hexagon centre in cube coordinates, then colour it.\nfunction country(qa, qb) {\n  const x = qa, z = qb, y = -x - z;\n  let rx = round(x), ry = round(y), rz = round(z);\n  const dx = abs(rx - x), dy = abs(ry - y), dz = abs(rz - z);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  return (((rx + 3 * rz) % 7) + 7) % 7;\n}\n\n// The surface: a tube of radius r round a stadium, two half circles of\n// radius rc joined by straights 2 ly long, standing up in the x-y plane.\n// (U, V) in the unit square is the fraction of the way round the stadium and\n// round the tube. core() writes the point of the stadium at U and its\n// outward normal in the plane, (cx, cy, ox, oy), at out[o..o+3]; the surface\n// point is (cx + r cos v ox, cy + r cos v oy, r sin v) with v = 2 pi V, and\n// its normal (cos v ox, cos v oy, sin v).\nfunction core(S, U, out, o) {\n  const rc = S.rc, ly = S.ly;\n  let s = (U - floor(U)) * S.per, cx, cy, ox, oy;\n  if (s \u003c 2 * ly) (cx = rc), (cy = -ly + s), (ox = 1), (oy = 0);\n  else if ((s -= 2 * ly) \u003c PI * rc) {\n    const a = s / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = ly + rc * oy);\n  } else if ((s -= PI * rc) \u003c 2 * ly) (cx = -rc), (cy = ly - s), (ox = -1), (oy = 0);\n  else {\n    const a = PI + (s - 2 * ly) / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = -ly + rc * oy);\n  }\n  out[o] = cx;\n  out[o + 1] = cy;\n  out[o + 2] = ox;\n  out[o + 3] = oy;\n}\n\n// The plane point U E1 + V E2 is the one painted at (U, V), so the square's\n// sides go to E1 and E2 and the map closes up on the torus. Back the other\n// way, (qa, qb) lands at U = (2 qa - qb) / 7, V = (3 qa + 2 qb) / 7.\nfunction build(S) {\n  S.rc = RO / (1 + S.ratio);\n  S.r = S.rc * S.ratio;\n  S.ly = HALF - RO;\n  S.per = 4 * S.ly + TAU * S.rc;\n  const { cc, tc, ts, cid, road } = S;\n  for (let j = 0; j \u003c NV; j++) {\n    tc[j] = cos((TAU * (j + 0.5)) / NV);\n    ts[j] = sin((TAU * (j + 0.5)) / NV);\n  }\n  for (let i = 0; i \u003c NU; i++) {\n    const U = (i + 0.5) / NU;\n    core(S, U, cc, 4 * i);\n    for (let j = 0; j \u003c NV; j++) cid[i * NV + j] = country(U * E1A + (j + 0.5) / NV * E2A, U * E1B + (j + 0.5) / NV * E2B);\n  }\n  // The dual graph: the capital of country a sits at the hexagon (a, 0), and\n  // three roads leave it toward (a + 1, 0), (a, 1) and (a + 1, -1). Seven\n  // capitals times three is all 21 roads of K7, each crossing one border.\n  const q4 = [0, 0, 0, 0];\n  let n = 0;\n  for (let a = 0; a \u003c 7; a++)\n    for (const [da, db] of [[1, 0], [0, 1], [1, -1]])\n      for (let t = 0; t \u003c NR; t++, n++) {\n        const qa = a + (da * t) / (NR - 1), qb = (db * t) / (NR - 1), v = (TAU * (3 * qa + 2 * qb)) / 7, o = 3 * n;\n        core(S, (2 * qa - qb) / 7, q4, 0);\n        road[o] = q4[0] + S.r * cos(v) * q4[2];\n        road[o + 1] = q4[1] + S.r * cos(v) * q4[3];\n        road[o + 2] = S.r * sin(v);\n      }\n}\n\nexport function setup(params) {\n  // The turn starts 0.4 short of face-on, so at Speed 2 the torus faces you\n  // squarely one second in and stands edge-on five seconds in.\n  params.s = {\n    hue: 0, speed: 2, ratio: -1, tilt: 0.06, spin: -0.4, nod: 0, roads: -1, rc: 0, r: 0, ly: 0, per: 0,\n    cc: new Float32Array(4 * NU), tc: new Float32Array(NV), ts: new Float32Array(NV), cid: new Uint8Array(NS), road: new Float32Array(3 * 21 * NR),\n    zb: new Float32Array(N), ib: new Int32Array(N), ib2: new Int32Array(N), cb: new Uint8Array(N), rb: new Uint8Array(N), pal: new Float32Array(21),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[3], 0, 1);\n  const ratio = 0.85 - 0.45 * cl(k[2], 0, 1);\n  if (abs(ratio - S.ratio) > 1e-4) {\n    S.ratio = ratio;\n    build(S);\n  }\n  S.spin += d * S.speed * 0.2;\n  S.nod += d * S.speed * 0.11;\n  if (S.roads >= 0) {\n    S.roads += d;\n    if (S.roads > 7) S.roads = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.roads = S.roads \u003c 0 ? 0 : min(S.roads, 0.5);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { cc, tc, ts, cid, zb, ib, ib2, cb, rb, road, pal } = S, r = S.r;\n  // Spin about the torus's long axis, then lean the top of that axis toward\n  // the viewer, who looks along +z.\n  const ph = S.spin, cp = cos(ph), sp = sin(ph);\n  const la = -(0.1 + 0.6 * S.tilt + 0.05 * sin(S.nod)), cla = cos(la), sla = sin(la);\n  const m0 = cp, m2 = sp;\n  const m3 = sla * sp, m4 = cla, m5 = -sla * cp;\n  const m6 = -cla * sp, m7 = sla, m8 = cla * cp;\n  // Fit the leaning torus to the panel height.\n  const sc = min(1, 63.5 / (HALF * cla - RO * sla));\n  zb.fill(1e9);\n  ib.fill(-1);\n  // Each sample's screen x, y and depth are a column part plus cos v and\n  // sin v times a part, so the loop over the tube is a few multiplies.\n  const Xb = sc * m2 * r, Yb = -sc * m5 * r, Zb = m8 * r;\n  for (let i = 0; i \u003c NU; i++) {\n    const cx = cc[4 * i], cy = cc[4 * i + 1], ox = cc[4 * i + 2], oy = cc[4 * i + 3], A = m6 * ox + m7 * oy;\n    const X0 = 32 + sc * m0 * cx, Xa = sc * m0 * r * ox, Y0 = 64 - sc * (m3 * cx + m4 * cy), Ya = -sc * r * (m3 * ox + m4 * oy);\n    const Z0 = m6 * cx + m7 * cy, Za = r * A;\n    for (let j = 0, k = i * NV; j \u003c NV; j++, k++) {\n      const cv = tc[j], sv = ts[j];\n      // Facing away from the eye.\n      if (cv * A + sv * m8 > 0.05) continue;\n      const px = floor(X0 + cv * Xa + sv * Xb), py = floor(Y0 + cv * Ya + sv * Yb);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px, Z = Z0 + cv * Za + sv * Zb;\n      if (Z \u003c zb[p]) (zb[p] = Z), (ib[p] = k);\n    }\n  }\n  // Fill LEDs that no front sample reached, or where the back of the tube\n  // shows through between two front samples.\n  ib2.set(ib);\n  for (let y = 1; y \u003c H - 1; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, z = zb[p];\n      for (let q = 1; q \u003c= W; q += W - 1) {\n        const a = zb[p - q], b = zb[p + q];\n        if (a \u003c 1e8 && b \u003c 1e8 && abs(a - b) \u003c 4 && z > max(a, b) + 3) {\n          ib2[p] = a \u003c b ? ib[p - q] : ib[p + q];\n          break;\n        }\n      }\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const k = ib2[p];\n    cb[p] = k \u003c 0 ? 255 : cid[k];\n    if (k >= 0 && k !== ib[p]) {\n      const i = (k / NV) | 0, j = k - i * NV, o = 4 * i;\n      zb[p] = m6 * (cc[o] + r * tc[j] * cc[o + 2]) + m7 * (cc[o + 1] + r * tc[j] * cc[o + 3]) + m8 * r * ts[j];\n    }\n  }\n\n  // The roads, where they lie on the visible surface, and the capitals at\n  // their ends as 2 x 2 dots.\n  const e = S.roads \u003c 0 ? 0 : sm(S.roads / 0.5) * (1 - sm(S.roads - 6));\n  if (e > 0) {\n    rb.fill(0);\n    for (let i = 0, o = 0; i \u003c 21 * NR; i++, o += 3) {\n      const x = road[o], y = road[o + 1], z = road[o + 2];\n      const px = floor(32 + sc * (m0 * x + m2 * z)), py = floor(64 - sc * (m3 * x + m4 * y + m5 * z));\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      if (m6 * x + m7 * y + m8 * z > zb[p] + 1.5) continue;\n      rb[p] = 1;\n      if (i % NR === 0 && px \u003c W - 1 && py \u003c H - 1) rb[p + 1] = rb[p + W] = rb[p + W + 1] = 1;\n    }\n  }\n\n  // The seven colours, a seventh apart, opening off red.\n  const h0 = S.hue + 1 / 14;\n  for (let c = 0; c \u003c 7; c++) hsv(h0 + c / 7, 1, 1, pal, 3 * c);\n  // Light from the upper left, in front.\n  const lx = -0.45, ly = 0.6, lz = -0.66;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, c = cb[p];\n      if (c === 255) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const k = ib2[p], i = (k / NV) | 0, j = k - i * NV, nx = tc[j] * cc[4 * i + 2], ny = tc[j] * cc[4 * i + 3], nz = ts[j];\n      const vx = m0 * nx + m2 * nz, vy = m3 * nx + m4 * ny + m5 * nz, vz = m6 * nx + m7 * ny + m8 * nz;\n      const dif = max(0, vx * lx + vy * ly + vz * lz);\n      // Half vector of the light and the eye at -z, for a small shine.\n      let hv = max(0, (vx * lx + vy * ly + vz * (lz - 1)) / 1.82);\n      (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv);\n      const spec = hv * 0.5;\n      const lit = (0.6 + 0.55 * dif) * (1 - 0.2 * e);\n      let R = pal[3 * c] * lit + spec, G = pal[3 * c + 1] * lit + spec, B = pal[3 * c + 2] * lit + spec;\n      // A dark LED where the country changes to the right or below, and\n      // where the surface folds behind a nearer part of the tube.\n      const r = x \u003c W - 1 ? cb[p + 1] : 255, b = y \u003c H - 1 ? cb[p + W] : 255, zf = zb[p] - 6;\n      if ((r !== 255 && r !== c) || (b !== 255 && b !== c) ||\n        (x > 0 && cb[p - 1] !== 255 && zb[p - 1] \u003c zf) || (r !== 255 && zb[p + 1] \u003c zf) ||\n        (y > 0 && cb[p - W] !== 255 && zb[p - W] \u003c zf) || (b !== 255 && zb[p + W] \u003c zf)) (R *= 0.08), (G *= 0.08), (B *= 0.08);\n      if (e > 0 && rb[p]) {\n        R += (1 - R) * e;\n        G += (1 - G) * e;\n        B += (1 - B) * e;\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(B * 255, 0, 255));\n    }\n}\n","layer":{"id":"layer-heawood-torus","type":"code","name":"heawood-torus","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Heawood Torus\n// Family:  topology\n// Idea:    A tall torus turns and leans in front of you painted with Heawood's map of seven hexagonal countries, each of which touches all six others, so this map needs seven colours where a map on the sphere never needs more than four.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Heawood's seven-colour map on the torus (Percy Heawood, 1890), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1\n//\n// Knob 1: Hue. Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red.\n// Knob 2: Speed. How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s.\n// Knob 3: Hole. The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall.\n// Knob 4: Tilt. How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above.\n// Buttons: K1 tap draws, for six seconds, the capital of each country and the 21 roads between them in white: the complete graph on seven points, drawn on the torus with no two roads crossing, each road crossing one border. Tapping again while they show keeps them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sin, cos, abs, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The plane tiled by hexagons, the hexagon at axial (a, b) coloured\n// (a + 3b) mod 7. Its six neighbours sit at (+-1, 0), (0, +-1) and\n// +-(1, -1), so their colours differ from its own by +-1, +-3 and +-2: all\n// six other colours, once each. The colouring repeats on the lattice L of\n// (a, b) with a + 3b = 0 mod 7, which has index 7, so the torus plane / L\n// holds exactly one hexagon of each colour, and each touches the other six.\n// L is spanned by E1 = (2, -3) and E2 = (1, 2) (determinant 7); of all the\n// bases of L these two shear the hexagons least on the long, thin parameter\n// square of this torus.\nconst E1A = 2, E1B = -3, E2A = 1, E2B = 2;\n\n// Samples round the core curve and round the tube; samples along each road.\nconst NU = 600, NV = 120, NS = NU * NV, NR = 200;\n// The outer half width of the torus in LEDs, and its half height before it leans.\nconst RO = 31, HALF = 63;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The country at fractional axial coordinates (qa, qb): round to the nearest\n// hexagon centre in cube coordinates, then colour it.\nfunction country(qa, qb) {\n  const x = qa, z = qb, y = -x - z;\n  let rx = round(x), ry = round(y), rz = round(z);\n  const dx = abs(rx - x), dy = abs(ry - y), dz = abs(rz - z);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  return (((rx + 3 * rz) % 7) + 7) % 7;\n}\n\n// The surface: a tube of radius r round a stadium, two half circles of\n// radius rc joined by straights 2 ly long, standing up in the x-y plane.\n// (U, V) in the unit square is the fraction of the way round the stadium and\n// round the tube. core() writes the point of the stadium at U and its\n// outward normal in the plane, (cx, cy, ox, oy), at out[o..o+3]; the surface\n// point is (cx + r cos v ox, cy + r cos v oy, r sin v) with v = 2 pi V, and\n// its normal (cos v ox, cos v oy, sin v).\nfunction core(S, U, out, o) {\n  const rc = S.rc, ly = S.ly;\n  let s = (U - floor(U)) * S.per, cx, cy, ox, oy;\n  if (s \u003c 2 * ly) (cx = rc), (cy = -ly + s), (ox = 1), (oy = 0);\n  else if ((s -= 2 * ly) \u003c PI * rc) {\n    const a = s / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = ly + rc * oy);\n  } else if ((s -= PI * rc) \u003c 2 * ly) (cx = -rc), (cy = ly - s), (ox = -1), (oy = 0);\n  else {\n    const a = PI + (s - 2 * ly) / rc;\n    (ox = cos(a)), (oy = sin(a)), (cx = rc * ox), (cy = -ly + rc * oy);\n  }\n  out[o] = cx;\n  out[o + 1] = cy;\n  out[o + 2] = ox;\n  out[o + 3] = oy;\n}\n\n// The plane point U E1 + V E2 is the one painted at (U, V), so the square's\n// sides go to E1 and E2 and the map closes up on the torus. Back the other\n// way, (qa, qb) lands at U = (2 qa - qb) / 7, V = (3 qa + 2 qb) / 7.\nfunction build(S) {\n  S.rc = RO / (1 + S.ratio);\n  S.r = S.rc * S.ratio;\n  S.ly = HALF - RO;\n  S.per = 4 * S.ly + TAU * S.rc;\n  const { cc, tc, ts, cid, road } = S;\n  for (let j = 0; j \u003c NV; j++) {\n    tc[j] = cos((TAU * (j + 0.5)) / NV);\n    ts[j] = sin((TAU * (j + 0.5)) / NV);\n  }\n  for (let i = 0; i \u003c NU; i++) {\n    const U = (i + 0.5) / NU;\n    core(S, U, cc, 4 * i);\n    for (let j = 0; j \u003c NV; j++) cid[i * NV + j] = country(U * E1A + (j + 0.5) / NV * E2A, U * E1B + (j + 0.5) / NV * E2B);\n  }\n  // The dual graph: the capital of country a sits at the hexagon (a, 0), and\n  // three roads leave it toward (a + 1, 0), (a, 1) and (a + 1, -1). Seven\n  // capitals times three is all 21 roads of K7, each crossing one border.\n  const q4 = [0, 0, 0, 0];\n  let n = 0;\n  for (let a = 0; a \u003c 7; a++)\n    for (const [da, db] of [[1, 0], [0, 1], [1, -1]])\n      for (let t = 0; t \u003c NR; t++, n++) {\n        const qa = a + (da * t) / (NR - 1), qb = (db * t) / (NR - 1), v = (TAU * (3 * qa + 2 * qb)) / 7, o = 3 * n;\n        core(S, (2 * qa - qb) / 7, q4, 0);\n        road[o] = q4[0] + S.r * cos(v) * q4[2];\n        road[o + 1] = q4[1] + S.r * cos(v) * q4[3];\n        road[o + 2] = S.r * sin(v);\n      }\n}\n\nexport function setup(params) {\n  // The turn starts 0.4 short of face-on, so at Speed 2 the torus faces you\n  // squarely one second in and stands edge-on five seconds in.\n  params.s = {\n    hue: 0, speed: 2, ratio: -1, tilt: 0.06, spin: -0.4, nod: 0, roads: -1, rc: 0, r: 0, ly: 0, per: 0,\n    cc: new Float32Array(4 * NU), tc: new Float32Array(NV), ts: new Float32Array(NV), cid: new Uint8Array(NS), road: new Float32Array(3 * 21 * NR),\n    zb: new Float32Array(N), ib: new Int32Array(N), ib2: new Int32Array(N), cb: new Uint8Array(N), rb: new Uint8Array(N), pal: new Float32Array(21),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.tilt = cl(k[3], 0, 1);\n  const ratio = 0.85 - 0.45 * cl(k[2], 0, 1);\n  if (abs(ratio - S.ratio) > 1e-4) {\n    S.ratio = ratio;\n    build(S);\n  }\n  S.spin += d * S.speed * 0.2;\n  S.nod += d * S.speed * 0.11;\n  if (S.roads >= 0) {\n    S.roads += d;\n    if (S.roads > 7) S.roads = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.roads = S.roads \u003c 0 ? 0 : min(S.roads, 0.5);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { cc, tc, ts, cid, zb, ib, ib2, cb, rb, road, pal } = S, r = S.r;\n  // Spin about the torus's long axis, then lean the top of that axis toward\n  // the viewer, who looks along +z.\n  const ph = S.spin, cp = cos(ph), sp = sin(ph);\n  const la = -(0.1 + 0.6 * S.tilt + 0.05 * sin(S.nod)), cla = cos(la), sla = sin(la);\n  const m0 = cp, m2 = sp;\n  const m3 = sla * sp, m4 = cla, m5 = -sla * cp;\n  const m6 = -cla * sp, m7 = sla, m8 = cla * cp;\n  // Fit the leaning torus to the panel height.\n  const sc = min(1, 63.5 / (HALF * cla - RO * sla));\n  zb.fill(1e9);\n  ib.fill(-1);\n  // Each sample's screen x, y and depth are a column part plus cos v and\n  // sin v times a part, so the loop over the tube is a few multiplies.\n  const Xb = sc * m2 * r, Yb = -sc * m5 * r, Zb = m8 * r;\n  for (let i = 0; i \u003c NU; i++) {\n    const cx = cc[4 * i], cy = cc[4 * i + 1], ox = cc[4 * i + 2], oy = cc[4 * i + 3], A = m6 * ox + m7 * oy;\n    const X0 = 32 + sc * m0 * cx, Xa = sc * m0 * r * ox, Y0 = 64 - sc * (m3 * cx + m4 * cy), Ya = -sc * r * (m3 * ox + m4 * oy);\n    const Z0 = m6 * cx + m7 * cy, Za = r * A;\n    for (let j = 0, k = i * NV; j \u003c NV; j++, k++) {\n      const cv = tc[j], sv = ts[j];\n      // Facing away from the eye.\n      if (cv * A + sv * m8 > 0.05) continue;\n      const px = floor(X0 + cv * Xa + sv * Xb), py = floor(Y0 + cv * Ya + sv * Yb);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px, Z = Z0 + cv * Za + sv * Zb;\n      if (Z \u003c zb[p]) (zb[p] = Z), (ib[p] = k);\n    }\n  }\n  // Fill LEDs that no front sample reached, or where the back of the tube\n  // shows through between two front samples.\n  ib2.set(ib);\n  for (let y = 1; y \u003c H - 1; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const p = y * W + x, z = zb[p];\n      for (let q = 1; q \u003c= W; q += W - 1) {\n        const a = zb[p - q], b = zb[p + q];\n        if (a \u003c 1e8 && b \u003c 1e8 && abs(a - b) \u003c 4 && z > max(a, b) + 3) {\n          ib2[p] = a \u003c b ? ib[p - q] : ib[p + q];\n          break;\n        }\n      }\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const k = ib2[p];\n    cb[p] = k \u003c 0 ? 255 : cid[k];\n    if (k >= 0 && k !== ib[p]) {\n      const i = (k / NV) | 0, j = k - i * NV, o = 4 * i;\n      zb[p] = m6 * (cc[o] + r * tc[j] * cc[o + 2]) + m7 * (cc[o + 1] + r * tc[j] * cc[o + 3]) + m8 * r * ts[j];\n    }\n  }\n\n  // The roads, where they lie on the visible surface, and the capitals at\n  // their ends as 2 x 2 dots.\n  const e = S.roads \u003c 0 ? 0 : sm(S.roads / 0.5) * (1 - sm(S.roads - 6));\n  if (e > 0) {\n    rb.fill(0);\n    for (let i = 0, o = 0; i \u003c 21 * NR; i++, o += 3) {\n      const x = road[o], y = road[o + 1], z = road[o + 2];\n      const px = floor(32 + sc * (m0 * x + m2 * z)), py = floor(64 - sc * (m3 * x + m4 * y + m5 * z));\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      if (m6 * x + m7 * y + m8 * z > zb[p] + 1.5) continue;\n      rb[p] = 1;\n      if (i % NR === 0 && px \u003c W - 1 && py \u003c H - 1) rb[p + 1] = rb[p + W] = rb[p + W + 1] = 1;\n    }\n  }\n\n  // The seven colours, a seventh apart, opening off red.\n  const h0 = S.hue + 1 / 14;\n  for (let c = 0; c \u003c 7; c++) hsv(h0 + c / 7, 1, 1, pal, 3 * c);\n  // Light from the upper left, in front.\n  const lx = -0.45, ly = 0.6, lz = -0.66;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, c = cb[p];\n      if (c === 255) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const k = ib2[p], i = (k / NV) | 0, j = k - i * NV, nx = tc[j] * cc[4 * i + 2], ny = tc[j] * cc[4 * i + 3], nz = ts[j];\n      const vx = m0 * nx + m2 * nz, vy = m3 * nx + m4 * ny + m5 * nz, vz = m6 * nx + m7 * ny + m8 * nz;\n      const dif = max(0, vx * lx + vy * ly + vz * lz);\n      // Half vector of the light and the eye at -z, for a small shine.\n      let hv = max(0, (vx * lx + vy * ly + vz * (lz - 1)) / 1.82);\n      (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv), (hv *= hv);\n      const spec = hv * 0.5;\n      const lit = (0.6 + 0.55 * dif) * (1 - 0.2 * e);\n      let R = pal[3 * c] * lit + spec, G = pal[3 * c + 1] * lit + spec, B = pal[3 * c + 2] * lit + spec;\n      // A dark LED where the country changes to the right or below, and\n      // where the surface folds behind a nearer part of the tube.\n      const r = x \u003c W - 1 ? cb[p + 1] : 255, b = y \u003c H - 1 ? cb[p + W] : 255, zf = zb[p] - 6;\n      if ((r !== 255 && r !== c) || (b !== 255 && b !== c) ||\n        (x > 0 && cb[p - 1] !== 255 && zb[p - 1] \u003c zf) || (r !== 255 && zb[p + 1] \u003c zf) ||\n        (y > 0 && cb[p - W] !== 255 && zb[p - W] \u003c zf) || (b !== 255 && zb[p + W] \u003c zf)) (R *= 0.08), (G *= 0.08), (B *= 0.08);\n      if (e > 0 && rb[p]) {\n        R += (1 - R) * e;\n        G += (1 - G) * e;\n        B += (1 - B) * e;\n      }\n      display.setPixel(x, y, cl(R * 255, 0, 255), cl(G * 255, 0, 255), cl(B * 255, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Hole=0..1, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the seven colours round the wheel together, a seventh apart. At 0 they are orange, lime, green, cyan, blue, violet and pink; every seventh of the way round the same seven come back, each moved on to another country, and halfway between, at 0.07, 0.21 and so on, one of them is pure red."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the torus turns about its long axis. At 2 a turn takes 16 s, so it goes from face-on to edge-on in 4 s, and its lean nods 3 degrees each way every 29 s; at 0.2 everything is ten times slower, at 3 a turn takes 10 s."},{"name":"Hole","min":0,"max":1,"about":"The tube's radius against the radius of the curve it runs round, the torus keeping its width, 59 LEDs at the opening tilt. At 0 it is 0.85: the tube is 27 LEDs thick and the hole a slot 5 LEDs wide and 65 tall; at 0.5 the tube is 23 thick and the hole 14 wide; at 1 it is 0.4, a 17 LED tube round a hole 25 wide and 86 tall."},{"name":"Tilt","min":0,"max":1,"about":"How far the top of the torus leans toward you: 8 degrees at 0.06, so you look almost straight at its side, 23 at 0.5 and 40 at 1, where you look down into the hole and see the top bend from above."}],"start":[0,2,0,0.06],"measures":{"motion":0.4823,"detail":0.0527,"edges":0.4488,"complexity":0.5038,"coverage":0.538,"colour":0.6204,"drift":0.3781},"knobResponse":[0.4775,0.281,0.1318,0.1492]},{"slug":"helter-skelter","title":"Helter Skelter","family":"fair","round":19,"note":"밤 장터의 헬터 스켈터가 128줄을 다 써요. 사람들이 탑 안 계단을 올라 작은 창에 비치고, 꼭대기에서 매트에 앉아 전구 체이스와 함께 탑을 돌아 미끄러져 내려온 뒤 매트를 들고 아래 문으로 돌아가요.","idea":"A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","layer":{"id":"layer-helter-skelter","type":"code","name":"helter-skelter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower."},{"name":"Turns","min":3,"max":6,"about":"How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside."},{"name":"Stripes","min":-1,"max":1,"about":"The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them."}],"start":[0,2,3,0.06],"measures":{"motion":0.1978,"detail":0.0529,"edges":0.4142,"complexity":1.5797,"coverage":0.8591,"colour":0.2542,"drift":0.0688},"knobResponse":[0.0829,0.0365,0.0808,0.0347]},{"slug":"hexatic-phase","title":"Hexatic Phase","family":"particle","round":37,"note":"단단한 원판 440개가 주기 경계 상자 안에서 사건 사슬 몬테카를로로 밀치고, 원판마다 둘레의 육각 격자가 가리키는 쪽에 따라 색을 입어요. 색상환 한 바퀴가 격자 회전 60도라서 결정 조각이 한 색 덩어리로 헤엄치고 합쳐지며 돌고, 이웃이 다섯인 원판은 흰 점, 일곱인 원판은 흰 고리로 결정 경계를 따라 줄지어요. K3 은 채움 몫을 0.68 의 액체에서 0.76 의 고체까지 올리고, 누르면 상자가 녹았다가 다시 굳어요.","idea":"440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.","buttons":"K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.","code":"// ===== Patternflow pattern =====\n// Title:   Hexatic Phase\n// Family:  particle\n// Idea:    440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: hexatic phase of two-dimensional melting (Bertrand Halperin and David Nelson, 1978), hard disks (Berni Alder and Thomas Wainwright, 1962), event-chain Monte Carlo (Etienne Bernard, Werner Krauth and David Wilson, 2009), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1\n//\n// Knob 1: Hue. Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together.\n// Knob 2: Speed. Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it.\n// Knob 3: Density. The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs.\n// Knob 4: Cells. From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring.\n// Buttons: K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.\n\nconst W = 64, H = 128, N = 440, CX = 14, CY = 28, C = W / CX, NC = CX * CY, CAP = 12;\nconst { floor, min, max, sqrt, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wx = (v) => (v \u003c -32 ? v + W : v >= 32 ? v - W : v);\nconst wy = (v) => (v \u003c -64 ? v + H : v >= 64 ? v - H : v);\n// Disk diameter for a packing fraction: eta = N pi d^2 / 4 / (W H).\nconst diam = (eta) => sqrt((4 * eta * W * H) / (N * PI));\n\n// Hard disks have no energy, only the packing fraction. Halperin and Nelson\n// (after Kosterlitz and Thouless) said a 2D crystal melts in two steps: bound\n// pairs of dislocations unbind into a hexatic phase that keeps the lattice's\n// orientation over long distances but not its rows, and then the hexatic\n// melts into a liquid when the dislocations split into free 5s and 7s.\n// Bernard and Krauth (2011) found that for hard disks the liquid to hexatic\n// step is first order: the two coexist from 0.700 to 0.716, the hexatic\n// holds to 0.720, and the solid starts there.\n//\n// Measured here, mean over seconds 10 to 40, of the edge-weighted psi6 of\n// single disks, and the share of disks without six Voronoi neighbours:\n//   0.68  |psi6| 0.60  off six 27%    0.70  |psi6| 0.69  off six 15%\n//   0.72  |psi6| 0.75  off six  9%    0.74  |psi6| 0.84  off six  2%\n// The whole box's |psi6| goes 0.16, 0.50, 0.63, 0.79: with 440 disks the\n// patches reach the box long before the solid does.\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction cellAt(x, y) {\n  let cx = floor(x / C), cy = floor(y / C);\n  if (cx >= CX) cx -= CX;\n  if (cy >= CY) cy -= CY;\n  return cy * CX + cx;\n}\nfunction put(S, i) {\n  const c = cellAt(S.x[i], S.y[i]), k = S.cnt[c]++;\n  S.slot[c * CAP + k] = i;\n  S.cell[i] = c;\n  S.pos[i] = k;\n}\nfunction take(S, i) {\n  const c = S.cell[i], k = S.pos[i], last = --S.cnt[c], j = S.slot[c * CAP + last];\n  S.slot[c * CAP + k] = j;\n  S.pos[j] = k;\n}\n\n// One straight event chain: disk i moves along direction dir until it\n// touches another disk, which takes over the rest of the length, and so on\n// until the length is spent. Each chain leaves the uniform distribution of\n// valid configurations as it was, so a random mix of the four directions\n// does too, and the mix keeps the whole box from drifting one way.\nfunction chain(S, i, dir, len) {\n  const d = S.d, d2 = d * d, ex = dir === 0 ? 1 : dir === 2 ? -1 : 0, ey = dir === 1 ? 1 : dir === 3 ? -1 : 0;\n  const X = S.x, Y = S.y, cnt = S.cnt, slot = S.slot;\n  let lifts = 0;\n  while (len > 1e-9 && lifts \u003c 200) {\n    const xi = X[i], yi = Y[i], look = len \u003c 2 * C ? len : 2 * C, kf = 1 + floor((look + d) / C);\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n    let best = look, hit = -1;\n    for (let a = 0; a \u003c= kf; a++)\n      for (let b = -1; b \u003c= 1; b++) {\n        let qx = ex ? cx + ex * a : cx + b, qy = ex ? cy + b : cy + ey * a;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = slot[q * CAP + m];\n          if (j === i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), along = rx * ex + ry * ey, perp = ex ? ry : rx;\n          if (along \u003c= 0 || perp * perp >= d2) continue;\n          let s = along - sqrt(d2 - perp * perp);\n          if (s \u003c 0) s = 0;\n          if (s \u003c best) (best = s), (hit = j);\n        }\n      }\n    take(S, i);\n    let nx = xi + ex * best, ny = yi + ey * best;\n    nx = nx \u003c 0 ? nx + W : nx >= W ? nx - W : nx;\n    ny = ny \u003c 0 ? ny + H : ny >= H ? ny - H : ny;\n    X[i] = nx;\n    Y[i] = ny;\n    put(S, i);\n    len -= best;\n    if (hit >= 0) (i = hit), lifts++;\n  }\n  return lifts;\n}\n\n// The closest pair in the box. Disks grow to it and no further, so the box\n// is compressed without one overlap.\nfunction closest(S) {\n  const X = S.x, Y = S.y;\n  let m2 = C * C;\n  for (let i = 0; i \u003c N; i++) {\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0, xi = X[i], yi = Y[i];\n    for (let b = -1; b \u003c= 1; b++)\n      for (let a = -1; a \u003c= 1; a++) {\n        let qx = cx + a, qy = cy + b;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = S.cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = S.slot[q * CAP + m];\n          if (j \u003c= i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n          if (r2 \u003c m2) m2 = r2;\n        }\n      }\n  }\n  return sqrt(m2);\n}\n\n// Growth by a step of `rate`, then pushes: every overlapping pair is moved\n// apart along its axis, a few passes over the box. What overlap is left\n// after that is taken back by shrinking the disks to the closest pair, so the\n// chains never see two disks overlap.\nfunction grow(S, rate) {\n  if (S.dT \u003c= S.d) {\n    S.d = S.dT;\n    return;\n  }\n  const d1 = min(S.dT, S.d * (1 + rate)), X = S.x, Y = S.y;\n  for (let pass = 0; pass \u003c 4; pass++) {\n    let moved = 0;\n    for (let i = 0; i \u003c N; i++) {\n      const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m];\n            if (j \u003c= i) continue;\n            const rx = wx(X[j] - X[i]), ry = wy(Y[j] - Y[i]), r2 = rx * rx + ry * ry;\n            if (r2 >= d1 * d1 || r2 === 0) continue;\n            const r = sqrt(r2), f = (0.5 * (d1 - r) + 1e-4) / r;\n            X[i] -= rx * f;\n            Y[i] -= ry * f;\n            X[j] += rx * f;\n            Y[j] += ry * f;\n            moved++;\n          }\n        }\n    }\n    for (let i = 0; i \u003c N; i++) {\n      X[i] = (X[i] + W) % W;\n      Y[i] = (Y[i] + H) % H;\n      if (cellAt(X[i], Y[i]) !== S.cell[i]) take(S, i), put(S, i);\n    }\n    if (!moved) break;\n  }\n  S.d = min(d1, closest(S) * (1 - 1e-9));\n}\n\n// A batch of chains, each 1.5 diameters long in total.\nfunction chains(S, n) {\n  let lifts = 0;\n  for (let k = 0; k \u003c n; k++) lifts += chain(S, floor(random() * N), floor(random() * 4), 1.5 * S.d);\n  return lifts;\n}\n\n// The Voronoi cell of disk i, by clipping a square with the bisector of each\n// nearby disk, nearest first. Its edges give the neighbours and how much each\n// one counts: psi6 = sum over edges of length * exp(6 i theta) / perimeter.\nconst PX = new Float64Array(40), PY = new Float64Array(40), PL = new Int32Array(40);\nconst QX = new Float64Array(40), QY = new Float64Array(40), QL = new Int32Array(40);\nconst CR = new Float64Array(64), CRX = new Float64Array(64), CRY = new Float64Array(64), CJ = new Int32Array(64);\nconst NBMAX = 12, CPS = 1500;\n// Density range, growth per second at Speed 2, melt time.\nconst ETA0 = 0.68, ETA1 = 0.76, GROW = 0.02, MELT = 1.2, EASE = 0.3;\n// The coarse-grained |psi6| that turns slate into full colour, and the slate.\nconst O0 = 0.35, O1 = 0.62, SL = [0.13, 0.14, 0.2];\n\nfunction voronoi(S, i) {\n  const X = S.x, Y = S.y, xi = X[i], yi = Y[i], c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n  let nc = 0;\n  for (let b = -2; b \u003c= 2; b++)\n    for (let a = -2; a \u003c= 2; a++) {\n      let qx = cx + a, qy = cy + b;\n      qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n      qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n      const q = qy * CX + qx, n = S.cnt[q];\n      for (let m = 0; m \u003c n && nc \u003c 64; m++) {\n        const j = S.slot[q * CAP + m];\n        if (j === i) continue;\n        const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n        // Insertion into the list sorted by distance.\n        let k = nc++;\n        while (k > 0 && CR[k - 1] > r2) {\n          CR[k] = CR[k - 1];\n          CRX[k] = CRX[k - 1];\n          CRY[k] = CRY[k - 1];\n          CJ[k] = CJ[k - 1];\n          k--;\n        }\n        CR[k] = r2;\n        CRX[k] = rx;\n        CRY[k] = ry;\n        CJ[k] = j;\n      }\n    }\n  const HS = 2 * C;\n  let px = PX, py = PY, pl = PL, qx = QX, qy = QY, ql = QL, nv = 4;\n  px[0] = -HS, py[0] = -HS, px[1] = HS, py[1] = -HS, px[2] = HS, py[2] = HS, px[3] = -HS, py[3] = HS;\n  pl[0] = pl[1] = pl[2] = pl[3] = -1;\n  let far2 = 2 * HS * HS;\n  for (let k = 0; k \u003c nc; k++) {\n    // A bisector farther out than every corner cannot cut the cell.\n    if (CR[k] > 4 * far2) break;\n    const ax = CRX[k], ay = CRY[k], h = CR[k] / 2;\n    let no = 0;\n    for (let v = 0; v \u003c nv; v++) {\n      const w = v + 1 \u003c nv ? v + 1 : 0, sv = ax * px[v] + ay * py[v] - h, sw = ax * px[w] + ay * py[w] - h;\n      if (sv \u003c= 0) {\n        qx[no] = px[v], qy[no] = py[v], ql[no++] = pl[v];\n        if (sw > 0) {\n          const t = sv / (sv - sw);\n          qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = k;\n        }\n      } else if (sw \u003c= 0) {\n        const t = sv / (sv - sw);\n        qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = pl[v];\n      }\n    }\n    if (no === nv) {\n      let same = true;\n      for (let v = 0; v \u003c nv && same; v++) if (ql[v] !== pl[v]) same = false;\n      if (same) continue;\n    }\n    let t = px;\n    (px = qx), (qx = t), (t = py), (py = qy), (qy = t);\n    const tl = pl;\n    (pl = ql), (ql = tl), (nv = no);\n    far2 = 0;\n    for (let v = 0; v \u003c nv; v++) far2 = max(far2, px[v] * px[v] + py[v] * py[v]);\n  }\n  // Edges: label pl[v] runs from vertex v to vertex v + 1.\n  let sr = 0, si = 0, sl = 0, nn = 0;\n  for (let v = 0; v \u003c nv; v++) {\n    const k = pl[v];\n    if (k \u003c 0) continue;\n    const w = v + 1 \u003c nv ? v + 1 : 0, len = sqrt((px[w] - px[v]) ** 2 + (py[w] - py[v]) ** 2);\n    const r = sqrt(CR[k]), ux = CRX[k] / r, uy = CRY[k] / r;\n    // (ux + i uy)^6\n    const a2r = ux * ux - uy * uy, a2i = 2 * ux * uy, a4r = a2r * a2r - a2i * a2i, a4i = 2 * a2r * a2i;\n    sr += len * (a4r * a2r - a4i * a2i);\n    si += len * (a4r * a2i + a4i * a2r);\n    sl += len;\n    if (len > 1e-6 && nn \u003c NBMAX) S.nb[i * NBMAX + nn++] = CJ[k];\n  }\n  S.pr[i] = sl > 0 ? sr / sl : 0;\n  S.pi[i] = sl > 0 ? si / sl : 0;\n  S.nn[i] = nn;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    x: new Float64Array(N), y: new Float64Array(N), cell: new Int32Array(N), pos: new Int32Array(N),\n    cnt: new Int32Array(NC), slot: new Int32Array(NC * CAP),\n    pr: new Float32Array(N), pi: new Float32Array(N), nn: new Uint8Array(N), nb: new Int32Array(N * NBMAX),\n    qr: new Float32Array(N), qi: new Float32Array(N), col: new Float32Array(N * 3), sx: new Float64Array(N), sy: new Float64Array(N),\n    buf: new Float32Array(W * H * 3),\n    d: 2.6, dT: diam(0.68), hue: 0, speed: 2, eta: 0.68, cells: 0.06, warm: false, melt: 0, acc: 0, lifts: 0,\n  });\n  // Random sequential placement at a small diameter, 0.24 packing.\n  for (let i = 0; i \u003c N; i++) {\n    for (let tries = 0; tries \u003c 2000; tries++) {\n      const x = random() * W, y = random() * H;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) {\n        const rx = wx(S.x[j] - x), ry = wy(S.y[j] - y);\n        if (rx * rx + ry * ry \u003c S.d * S.d) ok = false;\n      }\n      if (ok) {\n        S.x[i] = x;\n        S.y[i] = y;\n        break;\n      }\n    }\n    put(S, i);\n  }\n}\n\nfunction analyse(S, ease) {\n  for (let i = 0; i \u003c N; i++) voronoi(S, i);\n  // Coarse grain over the disk and its Voronoi neighbours, then ease in time.\n  for (let i = 0; i \u003c N; i++) {\n    let r = S.pr[i], m = S.pi[i];\n    const n = S.nn[i];\n    for (let k = 0; k \u003c n; k++) {\n      const j = S.nb[i * NBMAX + k];\n      r += S.pr[j];\n      m += S.pi[j];\n    }\n    r /= n + 1;\n    m /= n + 1;\n    S.qr[i] += (r - S.qr[i]) * ease;\n    S.qi[i] += (m - S.qi[i]) * ease;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.68, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.eta = cl(k[2], ETA0, ETA1);\n  S.cells = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) S.melt = MELT;\n  S.melt = max(0, S.melt - d * S.speed / 2);\n  S.dT = diam(S.melt > 0 ? 0.6 : S.eta);\n  if (!S.warm) {\n    for (let r = 0; r \u003c 600 && S.d \u003c S.dT; r++) {\n      chains(S, 40);\n      grow(S, 0.004);\n    }\n    for (let r = 0; r \u003c 60; r++) chains(S, 40);\n    analyse(S, 1);\n    S.sx.set(S.x);\n    S.sy.set(S.y);\n    S.warm = true;\n  }\n  // Chains this frame, in three batches with a growth step after each.\n  S.acc += S.speed * CPS * d;\n  const n = floor(S.acc);\n  S.acc -= n;\n  let lifts = 0;\n  for (let b = 0; b \u003c 3; b++) {\n    lifts += chains(S, floor(n / 3) + (b \u003c n % 3 ? 1 : 0));\n    grow(S, (GROW * d * S.speed) / 2 / 3);\n  }\n  S.lifts = lifts;\n  analyse(S, 0.35);\n  // The disks are drawn where they have been over the last few frames, not\n  // where the last chain left them: each one rattles in its cage by about\n  // 0.4 LED from frame to frame, which flickers on the panel.\n  for (let i = 0; i \u003c N; i++) {\n    S.sx[i] += wx(S.x[i] - S.sx[i]) * EASE;\n    S.sy[i] += wy(S.y[i] - S.sy[i]) * EASE;\n    S.sx[i] = (S.sx[i] + W) % W;\n    S.sy[i] = (S.sy[i] + H) % H;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, col, sx: X, sy: Y } = S;\n  buf.fill(0);\n  // Disk colours: hue from the phase of psi6, and from its size a blend\n  // from a dim slate (liquid) to the full colour (crystal).\n  for (let i = 0; i \u003c N; i++) {\n    const r = S.qr[i], m = S.qi[i], mag = sqrt(r * r + m * m), o = sm(O0, O1, mag), n = S.nn[i], c = i * 3;\n    if (n !== 6) {\n      const w = 0.5 + 0.5 * o;\n      col[c] = col[c + 1] = col[c + 2] = n \u003c 6 ? w : -w;\n      continue;\n    }\n    const h = S.hue + 0.47 + atan2(m, r) / (2 * PI), hh = h - floor(h);\n    // Orange and yellow at less than full brightness read brown and olive,\n    // so there the colour goes paler instead.\n    const warm = sm(0.0, 0.05, hh) * (1 - sm(0.17, 0.24, hh));\n    hsv(h, 0.88 - 0.38 * warm, 1, col, c);\n    col[c] = SL[0] + (col[c] - SL[0]) * o;\n    col[c + 1] = SL[1] + (col[c + 1] - SL[1]) * o;\n    col[c + 2] = SL[2] + (col[c + 2] - SL[2]) * o;\n  }\n  const R = S.d / 2 - 0.25, R7 = R - 0.95;\n  for (let i = 0; i \u003c N; i++) {\n    const xi = X[i], yi = Y[i], c = i * 3;\n    let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n    // A 7-neighbour disk is a ring with a dark core.\n    const ring = cr \u003c 0;\n    if (ring) cr = cg = cb = -cr;\n    for (let yy = floor(yi - R - 1); yy \u003c= yi + R + 1; yy++)\n      for (let xx = floor(xi - R - 1); xx \u003c= xi + R + 1; xx++) {\n        const ex = xx + 0.5 - xi, ey = yy + 0.5 - yi, e = sqrt(ex * ex + ey * ey);\n        let cov = cl(R + 0.5 - e, 0, 1);\n        if (ring) cov *= cl(e - R7, 0, 1);\n        if (cov \u003c= 0) continue;\n        const px = (xx + W) % W, py = (yy + H) % H, p = (py * W + px) * 3;\n        buf[p] = max(buf[p], cr * cov);\n        buf[p + 1] = max(buf[p + 1], cg * cov);\n        buf[p + 2] = max(buf[p + 2], cb * cov);\n      }\n  }\n  if (S.cells > 0.02) cells(S, buf, col);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, round(255 * buf[p]), round(255 * buf[p + 1]), round(255 * buf[p + 2]));\n}\n\n// The Voronoi field: each LED takes the colour of its nearest disk, darkened\n// where the second nearest is almost as near, which draws the cell edges.\nfunction cells(S, buf, col) {\n  const X = S.x, Y = S.y, lv = S.cells;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const fx = x + 0.5, fy = y + 0.5, cx = floor(fx / C), cy = floor(fy / C);\n      let b1 = 1e9, b2 = 1e9, j1 = 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m], rx = wx(X[j] - fx), ry = wy(Y[j] - fy), r2 = rx * rx + ry * ry;\n            if (r2 \u003c b1) (b2 = b1), (b1 = r2), (j1 = j);\n            else if (r2 \u003c b2) b2 = r2;\n          }\n        }\n      // Distance to the bisector of the two nearest is (r2^2 - r1^2) / 2 r12;\n      // with r12 about one spacing this is close enough for a seam.\n      const edge = sm(0.1, 0.7, (b2 - b1) / (2 * S.d)), c = j1 * 3;\n      let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n      if (cr \u003c 0) cr = cg = cb = 0.05;\n      const g = lv * edge;\n      buf[p] = max(buf[p], cr * g);\n      buf[p + 1] = max(buf[p + 1], cg * g);\n      buf[p + 2] = max(buf[p + 2], cb * g);\n    }\n}\n\nfunction sm(a, b, v) {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n","layer":{"id":"layer-hexatic-phase","type":"code","name":"hexatic-phase","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hexatic Phase\n// Family:  particle\n// Idea:    440 hard disks jostle in a periodic box by event-chain Monte Carlo, each coloured by which way its local hexagonal lattice points, so crystallites read as patches of one colour that swim, merge and turn in a dim slate liquid, and the disks with 5 and 7 neighbours that make the dislocations are lit as white dots and white rings along the grain boundaries.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: hexatic phase of two-dimensional melting (Bertrand Halperin and David Nelson, 1978), hard disks (Berni Alder and Thomas Wainwright, 1962), event-chain Monte Carlo (Etienne Bernard, Werner Krauth and David Wilson, 2009), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1\n//\n// Knob 1: Hue. Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together.\n// Knob 2: Speed. Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it.\n// Knob 3: Density. The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs.\n// Knob 4: Cells. From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring.\n// Buttons: K1 tap melts the box: for 1.2 s at Speed 2 the disks shrink to a packing of 0.60 and every crystal dissolves into slate, then they grow back at 2% a second, about 3 s to 0.68, and new crystallites nucleate, grow and merge.\n\nconst W = 64, H = 128, N = 440, CX = 14, CY = 28, C = W / CX, NC = CX * CY, CAP = 12;\nconst { floor, min, max, sqrt, atan2, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wx = (v) => (v \u003c -32 ? v + W : v >= 32 ? v - W : v);\nconst wy = (v) => (v \u003c -64 ? v + H : v >= 64 ? v - H : v);\n// Disk diameter for a packing fraction: eta = N pi d^2 / 4 / (W H).\nconst diam = (eta) => sqrt((4 * eta * W * H) / (N * PI));\n\n// Hard disks have no energy, only the packing fraction. Halperin and Nelson\n// (after Kosterlitz and Thouless) said a 2D crystal melts in two steps: bound\n// pairs of dislocations unbind into a hexatic phase that keeps the lattice's\n// orientation over long distances but not its rows, and then the hexatic\n// melts into a liquid when the dislocations split into free 5s and 7s.\n// Bernard and Krauth (2011) found that for hard disks the liquid to hexatic\n// step is first order: the two coexist from 0.700 to 0.716, the hexatic\n// holds to 0.720, and the solid starts there.\n//\n// Measured here, mean over seconds 10 to 40, of the edge-weighted psi6 of\n// single disks, and the share of disks without six Voronoi neighbours:\n//   0.68  |psi6| 0.60  off six 27%    0.70  |psi6| 0.69  off six 15%\n//   0.72  |psi6| 0.75  off six  9%    0.74  |psi6| 0.84  off six  2%\n// The whole box's |psi6| goes 0.16, 0.50, 0.63, 0.79: with 440 disks the\n// patches reach the box long before the solid does.\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nfunction cellAt(x, y) {\n  let cx = floor(x / C), cy = floor(y / C);\n  if (cx >= CX) cx -= CX;\n  if (cy >= CY) cy -= CY;\n  return cy * CX + cx;\n}\nfunction put(S, i) {\n  const c = cellAt(S.x[i], S.y[i]), k = S.cnt[c]++;\n  S.slot[c * CAP + k] = i;\n  S.cell[i] = c;\n  S.pos[i] = k;\n}\nfunction take(S, i) {\n  const c = S.cell[i], k = S.pos[i], last = --S.cnt[c], j = S.slot[c * CAP + last];\n  S.slot[c * CAP + k] = j;\n  S.pos[j] = k;\n}\n\n// One straight event chain: disk i moves along direction dir until it\n// touches another disk, which takes over the rest of the length, and so on\n// until the length is spent. Each chain leaves the uniform distribution of\n// valid configurations as it was, so a random mix of the four directions\n// does too, and the mix keeps the whole box from drifting one way.\nfunction chain(S, i, dir, len) {\n  const d = S.d, d2 = d * d, ex = dir === 0 ? 1 : dir === 2 ? -1 : 0, ey = dir === 1 ? 1 : dir === 3 ? -1 : 0;\n  const X = S.x, Y = S.y, cnt = S.cnt, slot = S.slot;\n  let lifts = 0;\n  while (len > 1e-9 && lifts \u003c 200) {\n    const xi = X[i], yi = Y[i], look = len \u003c 2 * C ? len : 2 * C, kf = 1 + floor((look + d) / C);\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n    let best = look, hit = -1;\n    for (let a = 0; a \u003c= kf; a++)\n      for (let b = -1; b \u003c= 1; b++) {\n        let qx = ex ? cx + ex * a : cx + b, qy = ex ? cy + b : cy + ey * a;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = slot[q * CAP + m];\n          if (j === i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), along = rx * ex + ry * ey, perp = ex ? ry : rx;\n          if (along \u003c= 0 || perp * perp >= d2) continue;\n          let s = along - sqrt(d2 - perp * perp);\n          if (s \u003c 0) s = 0;\n          if (s \u003c best) (best = s), (hit = j);\n        }\n      }\n    take(S, i);\n    let nx = xi + ex * best, ny = yi + ey * best;\n    nx = nx \u003c 0 ? nx + W : nx >= W ? nx - W : nx;\n    ny = ny \u003c 0 ? ny + H : ny >= H ? ny - H : ny;\n    X[i] = nx;\n    Y[i] = ny;\n    put(S, i);\n    len -= best;\n    if (hit >= 0) (i = hit), lifts++;\n  }\n  return lifts;\n}\n\n// The closest pair in the box. Disks grow to it and no further, so the box\n// is compressed without one overlap.\nfunction closest(S) {\n  const X = S.x, Y = S.y;\n  let m2 = C * C;\n  for (let i = 0; i \u003c N; i++) {\n    const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0, xi = X[i], yi = Y[i];\n    for (let b = -1; b \u003c= 1; b++)\n      for (let a = -1; a \u003c= 1; a++) {\n        let qx = cx + a, qy = cy + b;\n        qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n        qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n        const q = qy * CX + qx, n = S.cnt[q];\n        for (let m = 0; m \u003c n; m++) {\n          const j = S.slot[q * CAP + m];\n          if (j \u003c= i) continue;\n          const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n          if (r2 \u003c m2) m2 = r2;\n        }\n      }\n  }\n  return sqrt(m2);\n}\n\n// Growth by a step of `rate`, then pushes: every overlapping pair is moved\n// apart along its axis, a few passes over the box. What overlap is left\n// after that is taken back by shrinking the disks to the closest pair, so the\n// chains never see two disks overlap.\nfunction grow(S, rate) {\n  if (S.dT \u003c= S.d) {\n    S.d = S.dT;\n    return;\n  }\n  const d1 = min(S.dT, S.d * (1 + rate)), X = S.x, Y = S.y;\n  for (let pass = 0; pass \u003c 4; pass++) {\n    let moved = 0;\n    for (let i = 0; i \u003c N; i++) {\n      const c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m];\n            if (j \u003c= i) continue;\n            const rx = wx(X[j] - X[i]), ry = wy(Y[j] - Y[i]), r2 = rx * rx + ry * ry;\n            if (r2 >= d1 * d1 || r2 === 0) continue;\n            const r = sqrt(r2), f = (0.5 * (d1 - r) + 1e-4) / r;\n            X[i] -= rx * f;\n            Y[i] -= ry * f;\n            X[j] += rx * f;\n            Y[j] += ry * f;\n            moved++;\n          }\n        }\n    }\n    for (let i = 0; i \u003c N; i++) {\n      X[i] = (X[i] + W) % W;\n      Y[i] = (Y[i] + H) % H;\n      if (cellAt(X[i], Y[i]) !== S.cell[i]) take(S, i), put(S, i);\n    }\n    if (!moved) break;\n  }\n  S.d = min(d1, closest(S) * (1 - 1e-9));\n}\n\n// A batch of chains, each 1.5 diameters long in total.\nfunction chains(S, n) {\n  let lifts = 0;\n  for (let k = 0; k \u003c n; k++) lifts += chain(S, floor(random() * N), floor(random() * 4), 1.5 * S.d);\n  return lifts;\n}\n\n// The Voronoi cell of disk i, by clipping a square with the bisector of each\n// nearby disk, nearest first. Its edges give the neighbours and how much each\n// one counts: psi6 = sum over edges of length * exp(6 i theta) / perimeter.\nconst PX = new Float64Array(40), PY = new Float64Array(40), PL = new Int32Array(40);\nconst QX = new Float64Array(40), QY = new Float64Array(40), QL = new Int32Array(40);\nconst CR = new Float64Array(64), CRX = new Float64Array(64), CRY = new Float64Array(64), CJ = new Int32Array(64);\nconst NBMAX = 12, CPS = 1500;\n// Density range, growth per second at Speed 2, melt time.\nconst ETA0 = 0.68, ETA1 = 0.76, GROW = 0.02, MELT = 1.2, EASE = 0.3;\n// The coarse-grained |psi6| that turns slate into full colour, and the slate.\nconst O0 = 0.35, O1 = 0.62, SL = [0.13, 0.14, 0.2];\n\nfunction voronoi(S, i) {\n  const X = S.x, Y = S.y, xi = X[i], yi = Y[i], c = S.cell[i], cx = c % CX, cy = (c / CX) | 0;\n  let nc = 0;\n  for (let b = -2; b \u003c= 2; b++)\n    for (let a = -2; a \u003c= 2; a++) {\n      let qx = cx + a, qy = cy + b;\n      qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n      qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n      const q = qy * CX + qx, n = S.cnt[q];\n      for (let m = 0; m \u003c n && nc \u003c 64; m++) {\n        const j = S.slot[q * CAP + m];\n        if (j === i) continue;\n        const rx = wx(X[j] - xi), ry = wy(Y[j] - yi), r2 = rx * rx + ry * ry;\n        // Insertion into the list sorted by distance.\n        let k = nc++;\n        while (k > 0 && CR[k - 1] > r2) {\n          CR[k] = CR[k - 1];\n          CRX[k] = CRX[k - 1];\n          CRY[k] = CRY[k - 1];\n          CJ[k] = CJ[k - 1];\n          k--;\n        }\n        CR[k] = r2;\n        CRX[k] = rx;\n        CRY[k] = ry;\n        CJ[k] = j;\n      }\n    }\n  const HS = 2 * C;\n  let px = PX, py = PY, pl = PL, qx = QX, qy = QY, ql = QL, nv = 4;\n  px[0] = -HS, py[0] = -HS, px[1] = HS, py[1] = -HS, px[2] = HS, py[2] = HS, px[3] = -HS, py[3] = HS;\n  pl[0] = pl[1] = pl[2] = pl[3] = -1;\n  let far2 = 2 * HS * HS;\n  for (let k = 0; k \u003c nc; k++) {\n    // A bisector farther out than every corner cannot cut the cell.\n    if (CR[k] > 4 * far2) break;\n    const ax = CRX[k], ay = CRY[k], h = CR[k] / 2;\n    let no = 0;\n    for (let v = 0; v \u003c nv; v++) {\n      const w = v + 1 \u003c nv ? v + 1 : 0, sv = ax * px[v] + ay * py[v] - h, sw = ax * px[w] + ay * py[w] - h;\n      if (sv \u003c= 0) {\n        qx[no] = px[v], qy[no] = py[v], ql[no++] = pl[v];\n        if (sw > 0) {\n          const t = sv / (sv - sw);\n          qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = k;\n        }\n      } else if (sw \u003c= 0) {\n        const t = sv / (sv - sw);\n        qx[no] = px[v] + t * (px[w] - px[v]), qy[no] = py[v] + t * (py[w] - py[v]), ql[no++] = pl[v];\n      }\n    }\n    if (no === nv) {\n      let same = true;\n      for (let v = 0; v \u003c nv && same; v++) if (ql[v] !== pl[v]) same = false;\n      if (same) continue;\n    }\n    let t = px;\n    (px = qx), (qx = t), (t = py), (py = qy), (qy = t);\n    const tl = pl;\n    (pl = ql), (ql = tl), (nv = no);\n    far2 = 0;\n    for (let v = 0; v \u003c nv; v++) far2 = max(far2, px[v] * px[v] + py[v] * py[v]);\n  }\n  // Edges: label pl[v] runs from vertex v to vertex v + 1.\n  let sr = 0, si = 0, sl = 0, nn = 0;\n  for (let v = 0; v \u003c nv; v++) {\n    const k = pl[v];\n    if (k \u003c 0) continue;\n    const w = v + 1 \u003c nv ? v + 1 : 0, len = sqrt((px[w] - px[v]) ** 2 + (py[w] - py[v]) ** 2);\n    const r = sqrt(CR[k]), ux = CRX[k] / r, uy = CRY[k] / r;\n    // (ux + i uy)^6\n    const a2r = ux * ux - uy * uy, a2i = 2 * ux * uy, a4r = a2r * a2r - a2i * a2i, a4i = 2 * a2r * a2i;\n    sr += len * (a4r * a2r - a4i * a2i);\n    si += len * (a4r * a2i + a4i * a2r);\n    sl += len;\n    if (len > 1e-6 && nn \u003c NBMAX) S.nb[i * NBMAX + nn++] = CJ[k];\n  }\n  S.pr[i] = sl > 0 ? sr / sl : 0;\n  S.pi[i] = sl > 0 ? si / sl : 0;\n  S.nn[i] = nn;\n}\n\nexport function setup(params) {\n  const S = (params.s = {\n    x: new Float64Array(N), y: new Float64Array(N), cell: new Int32Array(N), pos: new Int32Array(N),\n    cnt: new Int32Array(NC), slot: new Int32Array(NC * CAP),\n    pr: new Float32Array(N), pi: new Float32Array(N), nn: new Uint8Array(N), nb: new Int32Array(N * NBMAX),\n    qr: new Float32Array(N), qi: new Float32Array(N), col: new Float32Array(N * 3), sx: new Float64Array(N), sy: new Float64Array(N),\n    buf: new Float32Array(W * H * 3),\n    d: 2.6, dT: diam(0.68), hue: 0, speed: 2, eta: 0.68, cells: 0.06, warm: false, melt: 0, acc: 0, lifts: 0,\n  });\n  // Random sequential placement at a small diameter, 0.24 packing.\n  for (let i = 0; i \u003c N; i++) {\n    for (let tries = 0; tries \u003c 2000; tries++) {\n      const x = random() * W, y = random() * H;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) {\n        const rx = wx(S.x[j] - x), ry = wy(S.y[j] - y);\n        if (rx * rx + ry * ry \u003c S.d * S.d) ok = false;\n      }\n      if (ok) {\n        S.x[i] = x;\n        S.y[i] = y;\n        break;\n      }\n    }\n    put(S, i);\n  }\n}\n\nfunction analyse(S, ease) {\n  for (let i = 0; i \u003c N; i++) voronoi(S, i);\n  // Coarse grain over the disk and its Voronoi neighbours, then ease in time.\n  for (let i = 0; i \u003c N; i++) {\n    let r = S.pr[i], m = S.pi[i];\n    const n = S.nn[i];\n    for (let k = 0; k \u003c n; k++) {\n      const j = S.nb[i * NBMAX + k];\n      r += S.pr[j];\n      m += S.pi[j];\n    }\n    r /= n + 1;\n    m /= n + 1;\n    S.qr[i] += (r - S.qr[i]) * ease;\n    S.qi[i] += (m - S.qi[i]) * ease;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0.68, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.eta = cl(k[2], ETA0, ETA1);\n  S.cells = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) S.melt = MELT;\n  S.melt = max(0, S.melt - d * S.speed / 2);\n  S.dT = diam(S.melt > 0 ? 0.6 : S.eta);\n  if (!S.warm) {\n    for (let r = 0; r \u003c 600 && S.d \u003c S.dT; r++) {\n      chains(S, 40);\n      grow(S, 0.004);\n    }\n    for (let r = 0; r \u003c 60; r++) chains(S, 40);\n    analyse(S, 1);\n    S.sx.set(S.x);\n    S.sy.set(S.y);\n    S.warm = true;\n  }\n  // Chains this frame, in three batches with a growth step after each.\n  S.acc += S.speed * CPS * d;\n  const n = floor(S.acc);\n  S.acc -= n;\n  let lifts = 0;\n  for (let b = 0; b \u003c 3; b++) {\n    lifts += chains(S, floor(n / 3) + (b \u003c n % 3 ? 1 : 0));\n    grow(S, (GROW * d * S.speed) / 2 / 3);\n  }\n  S.lifts = lifts;\n  analyse(S, 0.35);\n  // The disks are drawn where they have been over the last few frames, not\n  // where the last chain left them: each one rattles in its cage by about\n  // 0.4 LED from frame to frame, which flickers on the panel.\n  for (let i = 0; i \u003c N; i++) {\n    S.sx[i] += wx(S.x[i] - S.sx[i]) * EASE;\n    S.sy[i] += wy(S.y[i] - S.sy[i]) * EASE;\n    S.sx[i] = (S.sx[i] + W) % W;\n    S.sy[i] = (S.sy[i] + H) % H;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, col, sx: X, sy: Y } = S;\n  buf.fill(0);\n  // Disk colours: hue from the phase of psi6, and from its size a blend\n  // from a dim slate (liquid) to the full colour (crystal).\n  for (let i = 0; i \u003c N; i++) {\n    const r = S.qr[i], m = S.qi[i], mag = sqrt(r * r + m * m), o = sm(O0, O1, mag), n = S.nn[i], c = i * 3;\n    if (n !== 6) {\n      const w = 0.5 + 0.5 * o;\n      col[c] = col[c + 1] = col[c + 2] = n \u003c 6 ? w : -w;\n      continue;\n    }\n    const h = S.hue + 0.47 + atan2(m, r) / (2 * PI), hh = h - floor(h);\n    // Orange and yellow at less than full brightness read brown and olive,\n    // so there the colour goes paler instead.\n    const warm = sm(0.0, 0.05, hh) * (1 - sm(0.17, 0.24, hh));\n    hsv(h, 0.88 - 0.38 * warm, 1, col, c);\n    col[c] = SL[0] + (col[c] - SL[0]) * o;\n    col[c + 1] = SL[1] + (col[c + 1] - SL[1]) * o;\n    col[c + 2] = SL[2] + (col[c + 2] - SL[2]) * o;\n  }\n  const R = S.d / 2 - 0.25, R7 = R - 0.95;\n  for (let i = 0; i \u003c N; i++) {\n    const xi = X[i], yi = Y[i], c = i * 3;\n    let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n    // A 7-neighbour disk is a ring with a dark core.\n    const ring = cr \u003c 0;\n    if (ring) cr = cg = cb = -cr;\n    for (let yy = floor(yi - R - 1); yy \u003c= yi + R + 1; yy++)\n      for (let xx = floor(xi - R - 1); xx \u003c= xi + R + 1; xx++) {\n        const ex = xx + 0.5 - xi, ey = yy + 0.5 - yi, e = sqrt(ex * ex + ey * ey);\n        let cov = cl(R + 0.5 - e, 0, 1);\n        if (ring) cov *= cl(e - R7, 0, 1);\n        if (cov \u003c= 0) continue;\n        const px = (xx + W) % W, py = (yy + H) % H, p = (py * W + px) * 3;\n        buf[p] = max(buf[p], cr * cov);\n        buf[p + 1] = max(buf[p + 1], cg * cov);\n        buf[p + 2] = max(buf[p + 2], cb * cov);\n      }\n  }\n  if (S.cells > 0.02) cells(S, buf, col);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, round(255 * buf[p]), round(255 * buf[p + 1]), round(255 * buf[p + 2]));\n}\n\n// The Voronoi field: each LED takes the colour of its nearest disk, darkened\n// where the second nearest is almost as near, which draws the cell edges.\nfunction cells(S, buf, col) {\n  const X = S.x, Y = S.y, lv = S.cells;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const fx = x + 0.5, fy = y + 0.5, cx = floor(fx / C), cy = floor(fy / C);\n      let b1 = 1e9, b2 = 1e9, j1 = 0;\n      for (let b = -1; b \u003c= 1; b++)\n        for (let a = -1; a \u003c= 1; a++) {\n          let qx = cx + a, qy = cy + b;\n          qx = qx \u003c 0 ? qx + CX : qx >= CX ? qx - CX : qx;\n          qy = qy \u003c 0 ? qy + CY : qy >= CY ? qy - CY : qy;\n          const q = qy * CX + qx, n = S.cnt[q];\n          for (let m = 0; m \u003c n; m++) {\n            const j = S.slot[q * CAP + m], rx = wx(X[j] - fx), ry = wy(Y[j] - fy), r2 = rx * rx + ry * ry;\n            if (r2 \u003c b1) (b2 = b1), (b1 = r2), (j1 = j);\n            else if (r2 \u003c b2) b2 = r2;\n          }\n        }\n      // Distance to the bisector of the two nearest is (r2^2 - r1^2) / 2 r12;\n      // with r12 about one spacing this is close enough for a seam.\n      const edge = sm(0.1, 0.7, (b2 - b1) / (2 * S.d)), c = j1 * 3;\n      let cr = col[c], cg = col[c + 1], cb = col[c + 2];\n      if (cr \u003c 0) cr = cg = cb = 0.05;\n      const g = lv * edge;\n      buf[p] = max(buf[p], cr * g);\n      buf[p + 1] = max(buf[p + 1], cg * g);\n      buf[p + 2] = max(buf[p + 2], cb * g);\n    }\n}\n\nfunction sm(a, b, v) {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Density=0.68..0.76, Cells=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the orientation wheel, where the whole colour wheel is 60 degrees of lattice rotation. At 0 a crystal whose rows run straight across is cyan, one turned 10 degrees clockwise blue, 20 magenta, 30 red, 40 peach and 50 lime; the knob moves every crystal's colour along together."},{"name":"Speed","min":0.2,"max":3,"about":"Event chains a second: 3,000 at 2, each 1.5 diameters long, which move every disk about 115 times a second; 300 at 0.2, where a crystallite at 0.68 lives a few seconds instead of under one, and 4,500 at 3. The growth of the disks and the melt of a tap run with it."},{"name":"Density","min":0.68,"max":0.76,"about":"The packing fraction, by the disk diameter: 4.0 LEDs at 0.68 to 4.25 at 0.76, the disks growing 2% a second at Speed 2 and pushing apart as they go. At 0.68 a dense liquid where crystallites of 10 to 40 disks form and melt within a second; from 0.700 to 0.716 liquid and hexatic share the box and the patches grow to half the panel; above 0.72 it is solid, one or two crystals whose boundaries are lines of 5-7 pairs."},{"name":"Cells","min":0,"max":1,"about":"From disks on black at 0 to the Voronoi cells of the same disks at 1, a mosaic in the same colours with dark seams, where a 5-neighbour disk is a white pentagon and a 7-neighbour one a dark heptagon in a white ring."}],"start":[0,2,0.68,0.06],"measures":{"motion":2.3076,"detail":0.1862,"edges":0.5515,"complexity":2.0903,"coverage":0.6781,"colour":0.3428,"drift":0.1672},"knobResponse":[0.1472,0.2305,0.3425,0.068]},{"slug":"high-dive","title":"High Dive","family":"sport","round":23,"note":"밤의 실내 다이빙장을 옆에서 봐요. 다이버가 콘크리트 타워의 지그재그 계단을 올라 10 m 플랫폼 조명 아래 서고, 1.6초 동안 공중제비를 돌며 떨어져 물에 들어가면 물속에 기포 기둥이 오르고 전광판에 심판 일곱 명의 점수가 떠요. K3 이 앞으로 뛰기부터 세 바퀴 반과 비틀기까지 다이빙을 골라요.","idea":"A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.","buttons":"K1 tap sends the waiting diver off now, or hurries the one on the stairs.","code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","layer":{"id":"layer-high-dive","type":"code","name":"high-dive","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Pool","min":0,"max":1,"about":"The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls."},{"name":"Speed","min":0.2,"max":3,"about":"Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2."},{"name":"Dive","min":0,"max":4,"about":"The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty."},{"name":"Lights","min":0,"max":1,"about":"From a dim night practice with only the tower lamps on to full competition lights."}],"start":[0,2,0,0.06],"measures":{"motion":0.3915,"detail":0.0721,"edges":0.2796,"complexity":1.8967,"coverage":0.7436,"colour":0.2296,"drift":0.0344},"knobResponse":[0.0986,0.0554,0.0399,0.1523]},{"slug":"high-striker","title":"High Striker","family":"fair","round":20,"note":"밤 장터의 하이 스트라이커가 128줄을 다 써요. 줄 선 사람들이 차례로 망치를 내리치면 퍽이 실제 중력으로 레일을 오르며 눈금을 켜다가 떨어지고, 세게 친 판이나 K1 을 누른 판에는 꼭대기 놋쇠 종이 울려 전구가 깜박이고 하늘이 밝아져요.","idea":"A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.","buttons":"K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.","code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-high-striker","type":"code","name":"high-striker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Strength","min":60,"max":130,"about":"How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder."},{"name":"Gravity","min":-1,"max":1,"about":"The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker."}],"start":[0,2,60,0.06],"measures":{"motion":0.2551,"detail":0.0819,"edges":0.4794,"complexity":1.4989,"coverage":0.8211,"colour":0.2622,"drift":0.1521},"knobResponse":[0.0547,0.0439,0.0765,0.0768]},{"slug":"hofstadter-butterfly","title":"Hofstadter Butterfly","family":"fractal","round":30,"note":"자기장 속 격자 전자의 에너지 띠를 가로에, 자속을 세로에 놓았어요. 띠 사이 틈마다 홀 전도도의 정수로 칠해 날개가 서고, 같은 밀도의 줄이 날개를 따라 흘러요.","idea":"The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.","buttons":"K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.","code":"// ===== Patternflow pattern =====\n// Title:   Hofstadter Butterfly\n// Family:  fractal\n// Idea:    The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hofstadter's butterfly (Douglas Hofstadter, 1976), coloured by the gap labels of Thouless, Kohmoto, Nightingale and den Nijs (1982), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1\n//\n// Knob 1: Hue. Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on.\n// Knob 2: Speed. At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower.\n// Knob 3: Depth. The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in.\n// Knob 4: Coupling. lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was.\n// Buttons: K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.\n\nconst W = 64, H = 128, S = 6, NS = W * S;\nconst { floor, round, cos, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst BAND = 127, TM = 40;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The nearest fraction p/q to a with q at most Q; on a tie the smaller q, so\n// p/q comes out in lowest terms.\nfunction nearest(a, Q) {\n  let bp = 0, bq = 1, bd = 9;\n  for (let q = 1; q \u003c= Q; q++) {\n    const p = round(a * q), d = abs(a - p / q);\n    if (d \u003c bd - 1e-12) (bd = d), (bp = p), (bq = q);\n  }\n  return [bp, bq];\n}\n\n// Harper's equation, psi(n+1) + psi(n-1) + 2 lambda cos(2 pi alpha n + nu)\n// psi(n) = E psi(n), at alpha = p/q. Row y has flux (127 - y) / 127, so 0 at\n// the bottom and 1 at the top; column x has energy across -(2 + 2 lambda) to\n// 2 + 2 lambda, six samples to an LED.\n//\n// For each sample: the trace D of the product of the q transfer matrices\n// [[E - V(n), -1], [1, 0]], taken at nu = pi / 2q. Chambers' relation says the\n// trace at any other nu is D - 2 lambda^q cos(q nu), so E is in the spectrum\n// at phase nu where |D - 2 lambda^q cos(q nu)| \u003c= 2, and at some phase where\n// |D| \u003c= 2 + 2 lambda^q. Both are checked against the one cached D, so the\n// phase turns every frame for nothing.\n//\n// In a gap, r bands lie below E. r comes from a Sturm count: the negative\n// pivots of the chain cut off at 3q sites count its levels below E, which are\n// 3r give or take one. The gap labelling theorem puts the density there at\n// N = r / q = s + t p / q with whole s and t, so r = t p mod q, and t is r times\n// the inverse of p mod q, taken between -q/2 and q/2. t is the Hall\n// conductance of a filled gap in units of e^2/h. t = 0 only below and above\n// the whole spectrum.\nconst V = new Float64Array(128);\nfunction buildRow(P, y) {\n  const a = (H - 1 - y) / (H - 1), [p, q] = nearest(a, P.Q), lam = P.lam;\n  if (P.rp[y] === p && P.rq[y] === q && P.rlam[y] === lam) return 0;\n  (P.rp[y] = p), (P.rq[y] = q), (P.rlam[y] = lam);\n  const Em = 2 + 2 * lam, lq = lam ** q, lim = 2 + 2 * lq;\n  let pin = 1;\n  while ((p * pin) % q !== 1 % q) pin++;\n  for (let n = 0; n \u003c q; n++) V[n] = 2 * lam * cos((2 * PI * p * (n + 1)) / q + PI / (2 * q));\n  P.rl[y] = 2 * lq;\n  const o = y * NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const E = -Em + ((j + 0.5) * 2 * Em) / NS;\n    let a0 = 1, b0 = 0, c0 = 0, d0 = 1;\n    for (let n = 0; n \u003c q; n++) {\n      const v = E - V[n], na = v * a0 - c0, nb = v * b0 - d0;\n      (c0 = a0), (d0 = b0), (a0 = na), (b0 = nb);\n    }\n    const D = a0 + d0;\n    P.D[o + j] = D;\n    if (abs(D) \u003c= lim) {\n      (P.T[o + j] = BAND), (P.R[o + j] = 255);\n      continue;\n    }\n    let cnt = 0, dp = 1e300;\n    for (let k = 0; k \u003c 3; k++)\n      for (let n = 0; n \u003c q; n++) {\n        let dd = V[n] - E - 1 / dp;\n        if (dd === 0) dd = 1e-300;\n        if (dd \u003c 0) cnt++;\n        dp = dd;\n      }\n    const r = round(cnt / 3);\n    let t = (r * pin) % q;\n    if (t > q / 2) t -= q;\n    P.T[o + j] = r === 0 || r === q ? 0 : t;\n    P.R[o + j] = r;\n  }\n  return 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    D: new Float64Array(H * NS), T: new Int8Array(H * NS), R: new Uint8Array(H * NS),\n    rp: new Int32Array(H).fill(-1), rq: new Int32Array(H), rlam: new Float64Array(H), rl: new Float64Array(H),\n    Q: -1, lam: -1, next: H, phi: 0, wave: 0, hue: NaN, bw: 0, hold: 0,\n    pal: new Float32Array((2 * TM + 1) * 3), M: new Float32Array(2 * TM + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  const Q = round(cl(k[2], 16, 64)), K4 = cl(k[3], -1, 1);\n  const lam = abs(K4) \u003c 0.08 ? 1 : 2 ** (round(K4 * 50) / 50);\n  // The first frame builds all 128 rows (9 ms at Depth 16, 40 at 64). After a\n  // turn of K3 or K4 the rows are built again from the bottom, about 512\n  // periods' worth a frame, so a full redraw takes half a second; a row whose\n  // fraction and lambda did not change is kept.\n  const first = P.Q \u003c 0;\n  if (Q !== P.Q || lam !== P.lam) (P.Q = Q), (P.lam = lam), (P.next = 0);\n  for (let budget = first ? 1e9 : 512; budget > 0 && P.next \u003c H; ) budget -= buildRow(P, H - 1 - P.next++) * P.Q;\n  const sp = cl(k[1], 0.2, 3);\n  P.phi += d * sp;\n  P.wave += d * sp * 0.125;\n  if (input.btnPressed && input.btnPressed[0]) P.hold = 6;\n  P.hold = max(0, P.hold - d);\n  P.bw = cl(P.bw + (P.hold > 0 ? d : -d) * 1.5, 0, 1);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    for (let t = -TM; t \u003c= TM; t++) {\n      const o = (t + TM) * 3, at = abs(t);\n      if (t === 0) (P.pal[o] = 0), (P.pal[o + 1] = 0), (P.pal[o + 2] = 0);\n      else hsv(k[0] + (t > 0 ? 0.5 : 0.85) - 0.05 * min(at - 1, 4), 0.82, max(0.32, 1 / (1 + 0.2 * (at - 1))), P.pal, o);\n    }\n  }\n}\n\n// In a gap with label t, the density N = s + t alpha climbs t whole units from\n// the bottom of the panel to the top (Streda's formula: dN / d alpha = t).\n// Each gap is lit by cos(2 pi (2 N - w)), which needs only t alpha because s is\n// whole: as w grows, the lines of equal N rise through a gap at 1 / t of the\n// pace of the t = 1 wings, and sink where t is negative.\nconst WK = 2;\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.Q \u003c 0) return;\n  const pal = P.pal, M = P.M, bw = P.bw, cw = 1 - bw;\n  for (let y = 0; y \u003c H; y++) {\n    const c = P.rl[y] * cos(P.phi), o = y * NS, al = (H - 1 - y) / (H - 1);\n    for (let t = -TM; t \u003c= TM; t++) M[t + TM] = cw * (0.7 + 0.3 * cos(2 * PI * (WK * t * al - P.wave)));\n    let prev = P.R[o];\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0, miss = 0;\n      for (let j = x * S; j \u003c x * S + S; j++) {\n        const t = P.T[o + j], rr = P.R[o + j];\n        if (t === BAND) {\n          // White where the band is at the present phase, grey where it is at\n          // some other phase. In the 0, 1/2 and 1 rows the white slides across.\n          const w = abs(P.D[o + j] - c) \u003c= 2 ? 255 : 110;\n          (r += w), (g += w), (b += w);\n        } else {\n          // r changed between two gap samples: bands thinner than a sample lie\n          // between them, and their count lights the LED.\n          if (prev !== 255 && rr !== prev) miss += abs(rr - prev);\n          const q = (t + TM) * 3, f = M[t + TM];\n          (r += pal[q] * f), (g += pal[q + 1] * f), (b += pal[q + 2] * f);\n        }\n        prev = rr;\n      }\n      const wm = min(1, miss * (0.2 + 0.5 * bw));\n      (r /= S), (g /= S), (b /= S);\n      display.setPixel(x, y, r + (210 - r) * wm, g + (210 - g) * wm, b + (210 - b) * wm);\n    }\n  }\n}\n","layer":{"id":"layer-hofstadter-butterfly","type":"code","name":"hofstadter-butterfly","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hofstadter Butterfly\n// Family:  fractal\n// Idea:    The energy spectrum of an electron on a square lattice in a magnetic field, energy across and flux per cell up from 0 to 1, with every gap coloured by its Hall integer t and lines of equal electron density sliding up the wings where t is positive and down where it is negative.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hofstadter's butterfly (Douglas Hofstadter, 1976), coloured by the gap labels of Thouless, Kohmoto, Nightingale and den Nijs (1982), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1\n//\n// Knob 1: Hue. Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on.\n// Knob 2: Speed. At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower.\n// Knob 3: Depth. The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in.\n// Knob 4: Coupling. lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was.\n// Buttons: K1 tap fades the colours out for six seconds and leaves Hofstadter's own picture of 1976: the spectrum alone, white on black.\n\nconst W = 64, H = 128, S = 6, NS = W * S;\nconst { floor, round, cos, abs, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst BAND = 127, TM = 40;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The nearest fraction p/q to a with q at most Q; on a tie the smaller q, so\n// p/q comes out in lowest terms.\nfunction nearest(a, Q) {\n  let bp = 0, bq = 1, bd = 9;\n  for (let q = 1; q \u003c= Q; q++) {\n    const p = round(a * q), d = abs(a - p / q);\n    if (d \u003c bd - 1e-12) (bd = d), (bp = p), (bq = q);\n  }\n  return [bp, bq];\n}\n\n// Harper's equation, psi(n+1) + psi(n-1) + 2 lambda cos(2 pi alpha n + nu)\n// psi(n) = E psi(n), at alpha = p/q. Row y has flux (127 - y) / 127, so 0 at\n// the bottom and 1 at the top; column x has energy across -(2 + 2 lambda) to\n// 2 + 2 lambda, six samples to an LED.\n//\n// For each sample: the trace D of the product of the q transfer matrices\n// [[E - V(n), -1], [1, 0]], taken at nu = pi / 2q. Chambers' relation says the\n// trace at any other nu is D - 2 lambda^q cos(q nu), so E is in the spectrum\n// at phase nu where |D - 2 lambda^q cos(q nu)| \u003c= 2, and at some phase where\n// |D| \u003c= 2 + 2 lambda^q. Both are checked against the one cached D, so the\n// phase turns every frame for nothing.\n//\n// In a gap, r bands lie below E. r comes from a Sturm count: the negative\n// pivots of the chain cut off at 3q sites count its levels below E, which are\n// 3r give or take one. The gap labelling theorem puts the density there at\n// N = r / q = s + t p / q with whole s and t, so r = t p mod q, and t is r times\n// the inverse of p mod q, taken between -q/2 and q/2. t is the Hall\n// conductance of a filled gap in units of e^2/h. t = 0 only below and above\n// the whole spectrum.\nconst V = new Float64Array(128);\nfunction buildRow(P, y) {\n  const a = (H - 1 - y) / (H - 1), [p, q] = nearest(a, P.Q), lam = P.lam;\n  if (P.rp[y] === p && P.rq[y] === q && P.rlam[y] === lam) return 0;\n  (P.rp[y] = p), (P.rq[y] = q), (P.rlam[y] = lam);\n  const Em = 2 + 2 * lam, lq = lam ** q, lim = 2 + 2 * lq;\n  let pin = 1;\n  while ((p * pin) % q !== 1 % q) pin++;\n  for (let n = 0; n \u003c q; n++) V[n] = 2 * lam * cos((2 * PI * p * (n + 1)) / q + PI / (2 * q));\n  P.rl[y] = 2 * lq;\n  const o = y * NS;\n  for (let j = 0; j \u003c NS; j++) {\n    const E = -Em + ((j + 0.5) * 2 * Em) / NS;\n    let a0 = 1, b0 = 0, c0 = 0, d0 = 1;\n    for (let n = 0; n \u003c q; n++) {\n      const v = E - V[n], na = v * a0 - c0, nb = v * b0 - d0;\n      (c0 = a0), (d0 = b0), (a0 = na), (b0 = nb);\n    }\n    const D = a0 + d0;\n    P.D[o + j] = D;\n    if (abs(D) \u003c= lim) {\n      (P.T[o + j] = BAND), (P.R[o + j] = 255);\n      continue;\n    }\n    let cnt = 0, dp = 1e300;\n    for (let k = 0; k \u003c 3; k++)\n      for (let n = 0; n \u003c q; n++) {\n        let dd = V[n] - E - 1 / dp;\n        if (dd === 0) dd = 1e-300;\n        if (dd \u003c 0) cnt++;\n        dp = dd;\n      }\n    const r = round(cnt / 3);\n    let t = (r * pin) % q;\n    if (t > q / 2) t -= q;\n    P.T[o + j] = r === 0 || r === q ? 0 : t;\n    P.R[o + j] = r;\n  }\n  return 1;\n}\n\nexport function setup(params) {\n  params.s = {\n    D: new Float64Array(H * NS), T: new Int8Array(H * NS), R: new Uint8Array(H * NS),\n    rp: new Int32Array(H).fill(-1), rq: new Int32Array(H), rlam: new Float64Array(H), rl: new Float64Array(H),\n    Q: -1, lam: -1, next: H, phi: 0, wave: 0, hue: NaN, bw: 0, hold: 0,\n    pal: new Float32Array((2 * TM + 1) * 3), M: new Float32Array(2 * TM + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  const Q = round(cl(k[2], 16, 64)), K4 = cl(k[3], -1, 1);\n  const lam = abs(K4) \u003c 0.08 ? 1 : 2 ** (round(K4 * 50) / 50);\n  // The first frame builds all 128 rows (9 ms at Depth 16, 40 at 64). After a\n  // turn of K3 or K4 the rows are built again from the bottom, about 512\n  // periods' worth a frame, so a full redraw takes half a second; a row whose\n  // fraction and lambda did not change is kept.\n  const first = P.Q \u003c 0;\n  if (Q !== P.Q || lam !== P.lam) (P.Q = Q), (P.lam = lam), (P.next = 0);\n  for (let budget = first ? 1e9 : 512; budget > 0 && P.next \u003c H; ) budget -= buildRow(P, H - 1 - P.next++) * P.Q;\n  const sp = cl(k[1], 0.2, 3);\n  P.phi += d * sp;\n  P.wave += d * sp * 0.125;\n  if (input.btnPressed && input.btnPressed[0]) P.hold = 6;\n  P.hold = max(0, P.hold - d);\n  P.bw = cl(P.bw + (P.hold > 0 ? d : -d) * 1.5, 0, 1);\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    for (let t = -TM; t \u003c= TM; t++) {\n      const o = (t + TM) * 3, at = abs(t);\n      if (t === 0) (P.pal[o] = 0), (P.pal[o + 1] = 0), (P.pal[o + 2] = 0);\n      else hsv(k[0] + (t > 0 ? 0.5 : 0.85) - 0.05 * min(at - 1, 4), 0.82, max(0.32, 1 / (1 + 0.2 * (at - 1))), P.pal, o);\n    }\n  }\n}\n\n// In a gap with label t, the density N = s + t alpha climbs t whole units from\n// the bottom of the panel to the top (Streda's formula: dN / d alpha = t).\n// Each gap is lit by cos(2 pi (2 N - w)), which needs only t alpha because s is\n// whole: as w grows, the lines of equal N rise through a gap at 1 / t of the\n// pace of the t = 1 wings, and sink where t is negative.\nconst WK = 2;\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.Q \u003c 0) return;\n  const pal = P.pal, M = P.M, bw = P.bw, cw = 1 - bw;\n  for (let y = 0; y \u003c H; y++) {\n    const c = P.rl[y] * cos(P.phi), o = y * NS, al = (H - 1 - y) / (H - 1);\n    for (let t = -TM; t \u003c= TM; t++) M[t + TM] = cw * (0.7 + 0.3 * cos(2 * PI * (WK * t * al - P.wave)));\n    let prev = P.R[o];\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0, miss = 0;\n      for (let j = x * S; j \u003c x * S + S; j++) {\n        const t = P.T[o + j], rr = P.R[o + j];\n        if (t === BAND) {\n          // White where the band is at the present phase, grey where it is at\n          // some other phase. In the 0, 1/2 and 1 rows the white slides across.\n          const w = abs(P.D[o + j] - c) \u003c= 2 ? 255 : 110;\n          (r += w), (g += w), (b += w);\n        } else {\n          // r changed between two gap samples: bands thinner than a sample lie\n          // between them, and their count lights the LED.\n          if (prev !== 255 && rr !== prev) miss += abs(rr - prev);\n          const q = (t + TM) * 3, f = M[t + TM];\n          (r += pal[q] * f), (g += pal[q + 1] * f), (b += pal[q + 2] * f);\n        }\n        prev = rr;\n      }\n      const wm = min(1, miss * (0.2 + 0.5 * bw));\n      (r /= S), (g /= S), (b /= S);\n      display.setPixel(x, y, r + (210 - r) * wm, g + (210 - g) * wm, b + (210 - b) * wm);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=16..64, Coupling=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every gap colour round the wheel together. At 0 the gaps with t = +1 are cyan and t = -1 magenta; each step up in |t| moves the plus side towards green and the minus side towards blue, and dims it, down to a third from |t| = 12 on."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a line of equal density climbs a t = +1 wing 16 rows a second (eight in a t = +2 gap, and so on), and the bands breathe through one turn of the phase in 3.1 seconds; at 0.2 both run ten times slower."},{"name":"Depth","min":16,"max":64,"about":"The largest denominator q. Each row's flux is replaced by the nearest fraction p/q with q up to Depth, and the row shows that fraction's spectrum exactly. At 16 four rows share 1/2, the four at each end share 0 and 1 and show one wide band, and the fans above and below are coarse; at 64 two rows share 1/2 and the fans fill in."},{"name":"Coupling","min":-1,"max":1,"about":"lambda = 2^K4, the potential against the hopping, held at exactly 1 (the classic butterfly) within 0.08 of the middle. At -1 (lambda 1/2) the bands open into white sheets a third of the width; at +1 (lambda 2) the same sheets come back grey with one narrow lit sliver each, because Aubry-Andre duality sends lambda to 1/lambda and the energy axis, scaled by 2 + 2 lambda, puts every gap back where it was."}],"start":[0,2,16,0.06],"measures":{"motion":0.216,"detail":0.0564,"edges":0.3637,"complexity":0.928,"coverage":0.7618,"colour":0.4337,"drift":0.1658},"knobResponse":[0.2654,0.1807,0.0682,0.2004]},{"slug":"hopf-fibration","title":"Hopf Fibration","family":"topology","round":29,"note":"3차원 구면을 채운 원들을 입체 사영해 원근으로 그려요. 같은 위도의 밑점에서 온 원들이 겹겹의 토러스로 소용돌이치고, 가운데 세로선이 무한을 지나는 원이에요. K3 은 토러스 수(5~7)이고, K1 을 누르면 두 원만 남아 한 번 얽힌 것이 보여요.","idea":"The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.","buttons":"K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.","code":"// ===== Patternflow pattern =====\n// Title:   Hopf Fibration\n// Family:  topology\n// Idea:    The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hopf fibration (Heinz Hopf, 1931), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17\n//\n// Knob 1: Hue. Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point.\n// Knob 2: Speed. How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks.\n// Knob 3: Rings. How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line.\n// Knob 4: Fibres. How many fibres each torus has, from 14 to 17.\n// Buttons: K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, acos, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// Points round one fibre, and the most fibres on show: seven tori of\n// seventeen, the ring and the line.\nconst NT = 96, MAXF = 7 * 17 + 2, MAXS = MAXF * NT;\nconst CT = new Float32Array(NT), ST = new Float32Array(NT);\nfor (let i = 0; i \u003c NT; i++) (CT[i] = cos((TAU * i) / NT)), (ST[i] = sin((TAU * i) / NT));\n\n// Camera distance from the middle of the ring and focal length in LEDs: the\n// ring, radius 1, is 16 LEDs from the line. Depth bins for the painter.\nconst D = 7, F = D * 16, CX = 31.5, CY = 64, NB = 64, NEAR = 0.4;\n// Polar angles of the innermost and outermost circle of base points.\nconst TH0 = 0.6, TH1 = 2.35;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), I32 = (n) => new Int32Array(n);\n  params.s = {\n    T: 0, tilt: 0, tiltTo: 0, pair: 0, hue: 0, rings: 5, fib: 14, ns: 0, cam: new Float64Array(8),\n    buf: F32(N * 3),\n    // Every fibre point on screen with its depth.\n    sx: F32(MAXS), sy: F32(MAXS), sz: F32(MAXS),\n    col: F32(MAXF * 3), lit: F32(MAXF), pp: F32(MAXF),\n    // Segments as (first point, last point), sorted far to near by depth bin.\n    sa: I32(MAXS), sb: I32(MAXS), key: new Uint8Array(MAXS), ord: I32(MAXS), bin: I32(NB + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  // 1.3 a second at Speed 2, so the strands sweep across the panel rather\n  // than drift.\n  P.T += d * cl(k[1], 0.2, 3) * 1.3;\n  P.rings = cl(k[2], 5, 7);\n  P.fib = cl(k[3], 14, 17);\n  const b = input.btnPressed || [];\n  if (b[0]) P.pair = 5;\n  if (b[1]) P.tiltTo = P.tiltTo ? 0 : 1;\n  P.pair = max(0, P.pair - d);\n  P.tilt += cl(P.tiltTo - P.tilt, -d * 0.5, d * 0.5);\n}\n\n// One fibre into the point arrays. The base point sits at polar angle th\n// from the pole whose fibre is the ring, at longitude ph; with a = th/2 its\n// fibre is (cos a e^{i(t+ph)}, sin a e^{it}) on the 3-sphere, projected\n// stereographically from (0,0,0,1) and then through the camera.\nfunction fibre(P, f, th, ph, cam) {\n  const a = th / 2, ca = cos(a), sa = sin(a), cp = cos(ph) * ca, sp = sin(ph) * ca;\n  const rx = cam[0], ry = cam[1], ux = cam[2], uy = cam[3], uz = cam[4], fx = cam[5], fy = cam[6], fz = cam[7];\n  const sx = P.sx, sy = P.sy, sz = P.sz;\n  for (let i = 0, o = f * NT; i \u003c NT; i++, o++) {\n    const c = CT[i], s = ST[i], q = 1 / (1 - sa * s + 1e-6);\n    const X = (c * cp - s * sp) * q, Y = (s * cp + c * sp) * q, Z = sa * c * q;\n    const iz = F / (D + X * fx + Y * fy + Z * fz);\n    sz[o] = F / iz;\n    sx[o] = CX + (X * rx + Y * ry) * iz;\n    sy[o] = CY - (X * ux + Y * uy + Z * uz) * iz;\n  }\n}\n\n// One segment: an antialiased core whose half width hw comes from depth, and\n// a faint halo hl wide of the same light. Each LED is pulled toward the\n// line's colour by its cover, so a near strand passes over a far one with a\n// thin dark seam: that seam is what shows which of two fibres is in front.\n// The segment is walked one LED at a time along its longer axis and owns the\n// LEDs whose centres fall in [start, end) there, so the segments of one\n// fibre meet without gaps or double cover.\nfunction line(buf, x0, y0, x1, y1, r, g, b, hw, hl, op) {\n  const dx = x1 - x0, dy = y1 - y0, E = hw + 0.5 + hl, flat = abs(dx) >= abs(dy);\n  if (abs(dx) + abs(dy) \u003c 1e-3) return;\n  // Along the major axis a, across it c; k is the slope, cs the cosine that\n  // turns a distance across into a distance from the line.\n  const a0 = flat ? x0 : y0, a1 = flat ? x1 : y1, c0 = flat ? y0 : x0, k = flat ? dy / dx : dx / dy;\n  const cs = 1 / sqrt(1 + k * k), ec = E / cs, na = flat ? W : H, nc = flat ? H : W, sa = flat ? 3 : W * 3, sc = flat ? W * 3 : 3;\n  const s0 = max(0, Math.ceil(min(a0, a1) - 0.5)), s1 = min(na - 1, Math.ceil(max(a0, a1) - 0.5) - 1);\n  for (let i = s0; i \u003c= s1; i++) {\n    const cc = c0 + (i + 0.5 - a0) * k, j0 = max(0, Math.ceil(cc - ec - 0.5)), j1 = min(nc - 1, floor(cc + ec - 0.5));\n    for (let j = j0, q = i * sa + j0 * sc; j \u003c= j1; j++, q += sc) {\n      const e = (j + 0.5 - cc) * cs, dd = (e \u003c 0 ? -e : e) - hw;\n      if (dd > E - hw) continue;\n      const w = (dd \u003c -0.5 ? 1 : dd \u003c 0.2 ? 0.5 - dd : dd \u003c 0.5 ? 0.3 : (0.3 * (E - hw - dd)) / hl) * op;\n      buf[q] += (r - buf[q]) * w;\n      buf[q + 1] += (g - buf[q + 1]) * w;\n      buf[q + 2] += (b - buf[q + 2]) * w;\n    }\n  }\n}\n\n// One segment into the depth bins, unless it is off the panel or stretched\n// across it by passing close to the camera.\nfunction emit(P, a, b) {\n  const { sx, sy, sz } = P, x0 = sx[a], y0 = sy[a], x1 = sx[b], y1 = sy[b];\n  if (abs(x1 - x0) + abs(y1 - y0) >= 70) return;\n  if ((x0 \u003c -3 && x1 \u003c -3) || (x0 > W + 3 && x1 > W + 3) || (y0 \u003c -3 && y1 \u003c -3) || (y0 > H + 3 && y1 > H + 3)) return;\n  const kb = cl(floor((((sz[a] + sz[b]) / 2 - (D - 4)) / 8) * NB), 0, NB - 1);\n  P.key[P.ns] = kb;\n  P.sa[P.ns] = a;\n  P.sb[P.ns++] = b;\n  P.bin[kb + 1]++;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const T = P.T, buf = P.buf, { sx, sy, sz, sa, sb, key, ord, bin, col, lit } = P;\n  buf.fill(0);\n  // The camera turns slowly round the line and rocks between looking across\n  // the tori and looking down into the ring.\n  const az = 0.5 + T * 0.05, el = 0.75 + 0.2 * sin(T * 0.11);\n  const ce = cos(el), se = sin(el), ca = cos(az), sn = sin(az);\n  const cam = P.cam;\n  cam[0] = -sn;\n  cam[1] = ca;\n  cam[2] = -se * ca;\n  cam[3] = -se * sn;\n  cam[4] = ce;\n  cam[5] = -ce * ca;\n  cam[6] = -ce * sn;\n  cam[7] = -se;\n  const nr = P.rings, n = floor(P.fib), tl = sm(P.tilt) * 1.1, ct = cos(tl), st = sin(tl);\n  // After a K1 tap one fibre of the innermost torus and one of the next stay\n  // lit and the rest dim to under a third.\n  const hi = sm(P.pair) * 0.7, pick0 = 0, pick1 = floor(n / 2) + 1;\n  let nf = 0;\n  for (let j = 0; j \u003c 7; j++) {\n    const on = cl(nr - j, 0, 1);\n    if (on \u003c= 0) break;\n    // Latitudes spread evenly from near the ring's pole to near the line's,\n    // each breathing on its own phase; a ring the knob is still bringing in\n    // fades up on the outermost one while the others close up.\n    const u = min(j, nr - 1) / (nr - 1), th0 = TH0 + (TH1 - TH0) * u + 0.1 * sin(T * 0.35 + j * 1.7), dir = j & 1 ? -1 : 1;\n    for (let i = 0; i \u003c n; i++) {\n      const ph = (TAU * i) / n + dir * T * 0.25 + j * 0.4;\n      // The base point, its circle of latitude tipped about the x axis.\n      const bx = sin(th0) * cos(ph), by0 = sin(th0) * sin(ph), bz0 = cos(th0);\n      const by = by0 * ct - bz0 * st, bz = by0 * st + bz0 * ct;\n      fibre(P, nf, acos(cl(bz, -1, 1)), atan2(by, bx), cam);\n      // Hue from longitude, and paler toward the ring's pole, deeper and\n      // darker toward the line's.\n      hsv(P.hue + 0.55 + i / n, 0.45 + 0.5 * u, on * (1 - 0.4 * u), col, nf * 3);\n      const picked = (j === 0 && i === pick0) || (j === 1 && i === pick1);\n      lit[nf] = picked ? 1 + hi : 1 - hi;\n      P.pp[nf] = ph + j * 1.3;\n      nf++;\n    }\n  }\n  // The ring, fibre over one pole, and the line through infinity, the fibre\n  // over the other: on the panel a vertical line through the middle.\n  const rl = 1 - hi * 0.6;\n  fibre(P, nf, 0, 0, cam);\n  P.pp[nf] = 0;\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  lit[nf++] = rl;\n  for (let i = 0, o = nf * NT; i \u003c NT; i++, o++) {\n    const Z = (i / (NT - 1) - 0.5) * 60, zc = D + Z * cam[7];\n    sz[o] = zc;\n    sx[o] = CX;\n    sy[o] = CY - (F * Z * cam[4]) / zc;\n  }\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  P.pp[nf] = 0;\n  lit[nf++] = rl;\n\n  // Cut each fibre into segments as long as they can be while the curve\n  // between their ends stays within 0.3 LED of the chord (and under 12 LEDs),\n  // skipping what lies behind the camera or off the panel; bin them by depth.\n  bin.fill(0);\n  P.ns = 0;\n  for (let f = 0; f \u003c nf; f++) {\n    const o = f * NT, end = f \u003c nf - 1 ? NT : NT - 1;\n    let ia = 0;\n    for (let i = 1; i \u003c= end; ) {\n      const a = o + ia, b = o + (i % NT), ok = sz[a] > NEAR && sz[b] > NEAR;\n      if (ok && i \u003c end && i - ia \u003c 16) {\n        const dx = sx[b] - sx[a], dy = sy[b] - sy[a], m = o + ((ia + i) >> 1);\n        const dev = abs(dx * (sy[m] - sy[a]) - dy * (sx[m] - sx[a])) / (sqrt(dx * dx + dy * dy) + 1e-6);\n        if (abs(dx) + abs(dy) \u003c 12 && dev \u003c 0.3) {\n          i++;\n          continue;\n        }\n        if (i - ia > 1) {\n          emit(P, a, b - 1);\n          ia = i - 1;\n          continue;\n        }\n      }\n      if (ok) emit(P, a, b);\n      ia = i++;\n    }\n  }\n  const ns = P.ns;\n  for (let i = 1; i \u003c= NB; i++) bin[i] += bin[i - 1];\n  for (let s = 0; s \u003c ns; s++) ord[bin[key[s]]++] = s;\n  // Far to near. A fibre is lit 1 near the camera and a quarter far off,\n  // and its core is two LEDs wide near and one far; even far off it keeps a\n  // quarter-LED halo, so thin strands fade into the dark instead of stepping\n  // off it. A slow swell of light runs round every fibre at the same rate:\n  // the circle action of the fibration, which moves each point of the\n  // 3-sphere along its own fibre.\n  // Each fibre's swell starts from its own longitude so the whole picture\n  // never dims at once.\n  for (let r = ns - 1; r >= 0; r--) {\n    const s = ord[r], a = sa[s], b = sb[s], f = floor(a / NT), c = f * 3, lf = lit[f];\n    const dn = cl(((sz[a] + sz[b]) / 2 - (D - 3)) / 6, 0, 1) * (lf > 1 ? 2 - lf : 1);\n    const v = (1 - 0.75 * dn) * lf * (0.72 + 0.28 * cos((TAU * (a % NT)) / NT + P.pp[f] - 1.6 * T));\n    line(buf, sx[a], sy[a], sx[b], sy[b], min(255, col[c] * v), min(255, col[c + 1] * v), min(255, col[c + 2] * v), 0.25 + 0.6 * (1 - dn), 0.25 + 0.65 * (1 - dn), lf \u003c 1 ? lf * lf : 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-hopf-fibration","type":"code","name":"hopf-fibration","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hopf Fibration\n// Family:  topology\n// Idea:    The 3-sphere filled with circles, one over each point of the 2-sphere, stereographically projected into space and seen in perspective: the fibres over each circle of latitude sweep out a torus, the tori nest round a ring and a vertical line through infinity, and any two circles link exactly once.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Hopf fibration (Heinz Hopf, 1931), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17\n//\n// Knob 1: Hue. Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point.\n// Knob 2: Speed. How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks.\n// Knob 3: Rings. How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line.\n// Knob 4: Fibres. How many fibres each torus has, from 14 to 17.\n// Buttons: K1 tap lights two fibres from different tori and dims the rest for five seconds, so you can follow them through each other. K2 tap tilts the circles of base points on the sphere, so the tori lean over and turn lopsided; tap again to stand them up.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, acos, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// Points round one fibre, and the most fibres on show: seven tori of\n// seventeen, the ring and the line.\nconst NT = 96, MAXF = 7 * 17 + 2, MAXS = MAXF * NT;\nconst CT = new Float32Array(NT), ST = new Float32Array(NT);\nfor (let i = 0; i \u003c NT; i++) (CT[i] = cos((TAU * i) / NT)), (ST[i] = sin((TAU * i) / NT));\n\n// Camera distance from the middle of the ring and focal length in LEDs: the\n// ring, radius 1, is 16 LEDs from the line. Depth bins for the painter.\nconst D = 7, F = D * 16, CX = 31.5, CY = 64, NB = 64, NEAR = 0.4;\n// Polar angles of the innermost and outermost circle of base points.\nconst TH0 = 0.6, TH1 = 2.35;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), I32 = (n) => new Int32Array(n);\n  params.s = {\n    T: 0, tilt: 0, tiltTo: 0, pair: 0, hue: 0, rings: 5, fib: 14, ns: 0, cam: new Float64Array(8),\n    buf: F32(N * 3),\n    // Every fibre point on screen with its depth.\n    sx: F32(MAXS), sy: F32(MAXS), sz: F32(MAXS),\n    col: F32(MAXF * 3), lit: F32(MAXF), pp: F32(MAXF),\n    // Segments as (first point, last point), sorted far to near by depth bin.\n    sa: I32(MAXS), sb: I32(MAXS), key: new Uint8Array(MAXS), ord: I32(MAXS), bin: I32(NB + 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  // 1.3 a second at Speed 2, so the strands sweep across the panel rather\n  // than drift.\n  P.T += d * cl(k[1], 0.2, 3) * 1.3;\n  P.rings = cl(k[2], 5, 7);\n  P.fib = cl(k[3], 14, 17);\n  const b = input.btnPressed || [];\n  if (b[0]) P.pair = 5;\n  if (b[1]) P.tiltTo = P.tiltTo ? 0 : 1;\n  P.pair = max(0, P.pair - d);\n  P.tilt += cl(P.tiltTo - P.tilt, -d * 0.5, d * 0.5);\n}\n\n// One fibre into the point arrays. The base point sits at polar angle th\n// from the pole whose fibre is the ring, at longitude ph; with a = th/2 its\n// fibre is (cos a e^{i(t+ph)}, sin a e^{it}) on the 3-sphere, projected\n// stereographically from (0,0,0,1) and then through the camera.\nfunction fibre(P, f, th, ph, cam) {\n  const a = th / 2, ca = cos(a), sa = sin(a), cp = cos(ph) * ca, sp = sin(ph) * ca;\n  const rx = cam[0], ry = cam[1], ux = cam[2], uy = cam[3], uz = cam[4], fx = cam[5], fy = cam[6], fz = cam[7];\n  const sx = P.sx, sy = P.sy, sz = P.sz;\n  for (let i = 0, o = f * NT; i \u003c NT; i++, o++) {\n    const c = CT[i], s = ST[i], q = 1 / (1 - sa * s + 1e-6);\n    const X = (c * cp - s * sp) * q, Y = (s * cp + c * sp) * q, Z = sa * c * q;\n    const iz = F / (D + X * fx + Y * fy + Z * fz);\n    sz[o] = F / iz;\n    sx[o] = CX + (X * rx + Y * ry) * iz;\n    sy[o] = CY - (X * ux + Y * uy + Z * uz) * iz;\n  }\n}\n\n// One segment: an antialiased core whose half width hw comes from depth, and\n// a faint halo hl wide of the same light. Each LED is pulled toward the\n// line's colour by its cover, so a near strand passes over a far one with a\n// thin dark seam: that seam is what shows which of two fibres is in front.\n// The segment is walked one LED at a time along its longer axis and owns the\n// LEDs whose centres fall in [start, end) there, so the segments of one\n// fibre meet without gaps or double cover.\nfunction line(buf, x0, y0, x1, y1, r, g, b, hw, hl, op) {\n  const dx = x1 - x0, dy = y1 - y0, E = hw + 0.5 + hl, flat = abs(dx) >= abs(dy);\n  if (abs(dx) + abs(dy) \u003c 1e-3) return;\n  // Along the major axis a, across it c; k is the slope, cs the cosine that\n  // turns a distance across into a distance from the line.\n  const a0 = flat ? x0 : y0, a1 = flat ? x1 : y1, c0 = flat ? y0 : x0, k = flat ? dy / dx : dx / dy;\n  const cs = 1 / sqrt(1 + k * k), ec = E / cs, na = flat ? W : H, nc = flat ? H : W, sa = flat ? 3 : W * 3, sc = flat ? W * 3 : 3;\n  const s0 = max(0, Math.ceil(min(a0, a1) - 0.5)), s1 = min(na - 1, Math.ceil(max(a0, a1) - 0.5) - 1);\n  for (let i = s0; i \u003c= s1; i++) {\n    const cc = c0 + (i + 0.5 - a0) * k, j0 = max(0, Math.ceil(cc - ec - 0.5)), j1 = min(nc - 1, floor(cc + ec - 0.5));\n    for (let j = j0, q = i * sa + j0 * sc; j \u003c= j1; j++, q += sc) {\n      const e = (j + 0.5 - cc) * cs, dd = (e \u003c 0 ? -e : e) - hw;\n      if (dd > E - hw) continue;\n      const w = (dd \u003c -0.5 ? 1 : dd \u003c 0.2 ? 0.5 - dd : dd \u003c 0.5 ? 0.3 : (0.3 * (E - hw - dd)) / hl) * op;\n      buf[q] += (r - buf[q]) * w;\n      buf[q + 1] += (g - buf[q + 1]) * w;\n      buf[q + 2] += (b - buf[q + 2]) * w;\n    }\n  }\n}\n\n// One segment into the depth bins, unless it is off the panel or stretched\n// across it by passing close to the camera.\nfunction emit(P, a, b) {\n  const { sx, sy, sz } = P, x0 = sx[a], y0 = sy[a], x1 = sx[b], y1 = sy[b];\n  if (abs(x1 - x0) + abs(y1 - y0) >= 70) return;\n  if ((x0 \u003c -3 && x1 \u003c -3) || (x0 > W + 3 && x1 > W + 3) || (y0 \u003c -3 && y1 \u003c -3) || (y0 > H + 3 && y1 > H + 3)) return;\n  const kb = cl(floor((((sz[a] + sz[b]) / 2 - (D - 4)) / 8) * NB), 0, NB - 1);\n  P.key[P.ns] = kb;\n  P.sa[P.ns] = a;\n  P.sb[P.ns++] = b;\n  P.bin[kb + 1]++;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const T = P.T, buf = P.buf, { sx, sy, sz, sa, sb, key, ord, bin, col, lit } = P;\n  buf.fill(0);\n  // The camera turns slowly round the line and rocks between looking across\n  // the tori and looking down into the ring.\n  const az = 0.5 + T * 0.05, el = 0.75 + 0.2 * sin(T * 0.11);\n  const ce = cos(el), se = sin(el), ca = cos(az), sn = sin(az);\n  const cam = P.cam;\n  cam[0] = -sn;\n  cam[1] = ca;\n  cam[2] = -se * ca;\n  cam[3] = -se * sn;\n  cam[4] = ce;\n  cam[5] = -ce * ca;\n  cam[6] = -ce * sn;\n  cam[7] = -se;\n  const nr = P.rings, n = floor(P.fib), tl = sm(P.tilt) * 1.1, ct = cos(tl), st = sin(tl);\n  // After a K1 tap one fibre of the innermost torus and one of the next stay\n  // lit and the rest dim to under a third.\n  const hi = sm(P.pair) * 0.7, pick0 = 0, pick1 = floor(n / 2) + 1;\n  let nf = 0;\n  for (let j = 0; j \u003c 7; j++) {\n    const on = cl(nr - j, 0, 1);\n    if (on \u003c= 0) break;\n    // Latitudes spread evenly from near the ring's pole to near the line's,\n    // each breathing on its own phase; a ring the knob is still bringing in\n    // fades up on the outermost one while the others close up.\n    const u = min(j, nr - 1) / (nr - 1), th0 = TH0 + (TH1 - TH0) * u + 0.1 * sin(T * 0.35 + j * 1.7), dir = j & 1 ? -1 : 1;\n    for (let i = 0; i \u003c n; i++) {\n      const ph = (TAU * i) / n + dir * T * 0.25 + j * 0.4;\n      // The base point, its circle of latitude tipped about the x axis.\n      const bx = sin(th0) * cos(ph), by0 = sin(th0) * sin(ph), bz0 = cos(th0);\n      const by = by0 * ct - bz0 * st, bz = by0 * st + bz0 * ct;\n      fibre(P, nf, acos(cl(bz, -1, 1)), atan2(by, bx), cam);\n      // Hue from longitude, and paler toward the ring's pole, deeper and\n      // darker toward the line's.\n      hsv(P.hue + 0.55 + i / n, 0.45 + 0.5 * u, on * (1 - 0.4 * u), col, nf * 3);\n      const picked = (j === 0 && i === pick0) || (j === 1 && i === pick1);\n      lit[nf] = picked ? 1 + hi : 1 - hi;\n      P.pp[nf] = ph + j * 1.3;\n      nf++;\n    }\n  }\n  // The ring, fibre over one pole, and the line through infinity, the fibre\n  // over the other: on the panel a vertical line through the middle.\n  const rl = 1 - hi * 0.6;\n  fibre(P, nf, 0, 0, cam);\n  P.pp[nf] = 0;\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  lit[nf++] = rl;\n  for (let i = 0, o = nf * NT; i \u003c NT; i++, o++) {\n    const Z = (i / (NT - 1) - 0.5) * 60, zc = D + Z * cam[7];\n    sz[o] = zc;\n    sx[o] = CX;\n    sy[o] = CY - (F * Z * cam[4]) / zc;\n  }\n  col[nf * 3] = col[nf * 3 + 1] = 170;\n  col[nf * 3 + 2] = 185;\n  P.pp[nf] = 0;\n  lit[nf++] = rl;\n\n  // Cut each fibre into segments as long as they can be while the curve\n  // between their ends stays within 0.3 LED of the chord (and under 12 LEDs),\n  // skipping what lies behind the camera or off the panel; bin them by depth.\n  bin.fill(0);\n  P.ns = 0;\n  for (let f = 0; f \u003c nf; f++) {\n    const o = f * NT, end = f \u003c nf - 1 ? NT : NT - 1;\n    let ia = 0;\n    for (let i = 1; i \u003c= end; ) {\n      const a = o + ia, b = o + (i % NT), ok = sz[a] > NEAR && sz[b] > NEAR;\n      if (ok && i \u003c end && i - ia \u003c 16) {\n        const dx = sx[b] - sx[a], dy = sy[b] - sy[a], m = o + ((ia + i) >> 1);\n        const dev = abs(dx * (sy[m] - sy[a]) - dy * (sx[m] - sx[a])) / (sqrt(dx * dx + dy * dy) + 1e-6);\n        if (abs(dx) + abs(dy) \u003c 12 && dev \u003c 0.3) {\n          i++;\n          continue;\n        }\n        if (i - ia > 1) {\n          emit(P, a, b - 1);\n          ia = i - 1;\n          continue;\n        }\n      }\n      if (ok) emit(P, a, b);\n      ia = i++;\n    }\n  }\n  const ns = P.ns;\n  for (let i = 1; i \u003c= NB; i++) bin[i] += bin[i - 1];\n  for (let s = 0; s \u003c ns; s++) ord[bin[key[s]]++] = s;\n  // Far to near. A fibre is lit 1 near the camera and a quarter far off,\n  // and its core is two LEDs wide near and one far; even far off it keeps a\n  // quarter-LED halo, so thin strands fade into the dark instead of stepping\n  // off it. A slow swell of light runs round every fibre at the same rate:\n  // the circle action of the fibration, which moves each point of the\n  // 3-sphere along its own fibre.\n  // Each fibre's swell starts from its own longitude so the whole picture\n  // never dims at once.\n  for (let r = ns - 1; r >= 0; r--) {\n    const s = ord[r], a = sa[s], b = sb[s], f = floor(a / NT), c = f * 3, lf = lit[f];\n    const dn = cl(((sz[a] + sz[b]) / 2 - (D - 3)) / 6, 0, 1) * (lf > 1 ? 2 - lf : 1);\n    const v = (1 - 0.75 * dn) * lf * (0.72 + 0.28 * cos((TAU * (a % NT)) / NT + P.pp[f] - 1.6 * T));\n    line(buf, sx[a], sy[a], sx[b], sy[b], min(255, col[c] * v), min(255, col[c + 1] * v), min(255, col[c + 2] * v), 0.25 + 0.6 * (1 - dn), 0.25 + 0.65 * (1 - dn), lf \u003c 1 ? lf * lf : 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Rings=5..7, Fibres=14..17","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours round the wheel; each fibre takes its hue from the longitude of its base point."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the base points run round their latitudes (the tori turn, neighbours the opposite way), the latitudes breathe and the view rocks."},{"name":"Rings","min":5,"max":7,"about":"How many circles of latitude carry base points, 5 to 7; each is one torus, and the outer ones open into tall loops round the line."},{"name":"Fibres","min":14,"max":17,"about":"How many fibres each torus has, from 14 to 17."}],"start":[0,2,5,14],"measures":{"motion":1.6067,"detail":0.0653,"edges":0.2066,"complexity":1.8736,"coverage":0.5881,"colour":0.1771,"drift":0.0635},"knobResponse":[0.0967,0.1134,0.1017,0.0832]},{"slug":"horse-in-motion","title":"Horse in Motion","family":"film","round":27,"note":"양쪽에 퍼포레이션이 뚫린 필름이 영사기 게이트를 한 칸씩 끊어 내려가고, 램프가 비추는 가운데 칸에서 머이브리지의 경주마가 열두 장의 사진으로 달려요. 위아래 칸은 어둠 속에 흐리게 다음 차례를 기다려요. K3 이 그레이하운드와 앵무새, 달리는 사람의 필름으로 갈아 끼우고, 누르면 필름이 게이트에 걸려 타요.","idea":"A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.","buttons":"K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.","code":"// ===== Patternflow pattern =====\n// Title:   Horse in Motion\n// Family:  film\n// Idea:    A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after Eadweard Muybridge, The Horse in Motion (1878)\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1\n//\n// Knob 1: Tint. The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white.\n// Knob 2: Speed. Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds.\n// Knob 3: Subject. Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice.\n// Knob 4: Lamp. How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box.\n// Buttons: K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.\n\nconst W = 64, H = 128;\n// The strip: a frame every P rows with a frame line FL rows deep at its top,\n// the picture IW by IH between the perforations from column IX, and the gate\n// framing the frame whose top is on row GY. Four perforations a frame.\nconst P = 32, FL = 3, IW = 46, IH = P - FL, IX = 9, GY = 48, NP = 12, NI = IW * IH, NS = 4;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, atan2, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst fr = (v) => v - floor(v);\nfunction hash(a, b) {\n  let h = (Math.imul(a | 0, 374761393) + Math.imul(b | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// ---- The photographs, drawn once into masks: how much of each picture LED\n// the subject covers, 1 for its near side and FAR for limbs on the far side.\nconst MASK = new Float32Array(NS * NP * NI);\nconst FAR = 0.8;\nlet MO = 0;\nfunction cap(ax, ay, bx, by, ra, rb, v) {\n  const x0 = max(0, floor(min(ax - ra, bx - rb) - 1)), x1 = min(IW - 1, ceil(max(ax + ra, bx + rb)));\n  const y0 = max(0, floor(min(ay - ra, by - rb) - 1)), y1 = min(IH - 1, ceil(max(ay + ra, by + rb)));\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay;\n      const t = cl((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx, ey = py - t * dy;\n      const c = cl(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1) * v;\n      const i = MO + y * IW + x;\n      if (c > MASK[i]) MASK[i] = c;\n    }\n}\nconst dot = (x, y, r, v) => cap(x, y, x, y, r, r, v);\n// The body's own frame: x forward, y down, turned by the pitch.\nlet BX = 0, BY = 0, BC = 1, BS = 0;\nconst frame = (x, y, a) => ((BX = x), (BY = y), (BC = cos(a)), (BS = sin(a)));\nconst wx = (x, y) => BX + x * BC - y * BS;\nconst wy = (x, y) => BY + x * BS + y * BC;\nconst bcap = (x1, y1, x2, y2, ra, rb, v) => cap(wx(x1, y1), wy(x1, y1), wx(x2, y2), wy(x2, y2), ra, rb, v);\nconst bdot = (x, y, r, v) => dot(wx(x, y), wy(x, y), r, v);\n\n// Two bones from (tx, ty) towards (fx, fy), the joint bent forward (s = 1)\n// or back (s = -1). Leaves the joint in JX, JY and the reached end in FX, FY.\nlet JX = 0, JY = 0, FX = 0, FY = 0;\nfunction ik(tx, ty, fx, fy, a, b, s) {\n  let dx = fx - tx, dy = fy - ty;\n  const d = sqrt(dx * dx + dy * dy) || 1e-6;\n  const dc = cl(d, abs(a - b) + 0.05, a + b - 0.02);\n  (dx /= d), (dy /= d);\n  const ca = (a * a + dc * dc - b * b) / (2 * a * dc), sa = sqrt(max(0, 1 - ca * ca));\n  JX = tx + a * (ca * dx + s * sa * dy);\n  JY = ty + a * (ca * dy - s * sa * dx);\n  FX = tx + dx * dc;\n  FY = ty + dy * dc;\n}\n\n// One leg of a galloping animal. c is the leg's phase from touchdown; for\n// the share D of the stride the hoof stands on the ground (row GR) while the\n// body passes over it, from G[0] ahead of the top joint to G[1] behind; then\n// it lifts by G[2], folding (G[3] pulls it further behind first), and swings\n// forward, reaching G[4] past where it lands. The top joint (tx, ty) rides a\n// quarter of the sweep, hanging from the shoulder or hip (ux, uy).\n// L = bones a and b with their bend, then four radii.\nconst GR = 26.6;\nfunction leg(c, D, G, tx, ty, ux, uy, L, v) {\n  let hx, lift = 0;\n  if (c \u003c D) hx = G[0] - ((G[0] + G[1]) * c) / D;\n  else {\n    const s = (c - D) / (1 - D), w = sin(PI * s);\n    hx = -G[1] + (G[0] + G[1]) * ease(s) - G[3] * w * (1 - s) + G[4] * w * s * s;\n    lift = G[2] * sin(PI * s ** 0.75);\n  }\n  const Tx = wx(tx + 0.25 * hx, ty), Ty = wy(tx + 0.25 * hx, ty);\n  ik(Tx, Ty, wx(tx, ty) + hx, GR - lift, L[0], L[1], L[2]);\n  cap(wx(ux, uy), wy(ux, uy), Tx, Ty, L[3], L[4], v);\n  cap(Tx, Ty, JX, JY, L[4], L[5], v);\n  dot(JX, JY, L[5], v);\n  cap(JX, JY, FX, FY, L[5] * 0.75, L[6] * 0.7, v);\n  cap(FX, FY, FX + 0.6, FY + 0.2, L[6], L[6] * 0.9, v);\n}\n\n// Sallie Gardner at a 1:40 gait, ridden by G. Domm, seen from her right.\n// A transverse gallop: left hind, right hind, left fore, right fore, then\n// all four hooves off the ground with the legs gathered under the belly.\nconst LFH = [5.2, 5.2, 1, 2.3, 1.3, 0.75, 0.8], LHH = [5.4, 5.6, -1, 3, 1.4, 0.75, 0.8];\nconst GFH = [6, 5, 6.5, 1.5, 2.5], GHH = [4, 7, 5.5, 0, 1.5];\nfunction horse(c) {\n  const pitch = 0.07 * sin(TAU * (c - 0.3));\n  frame(21, 13.8 - 0.7 * cos(TAU * (c - 0.9)), pitch);\n  const fore = (td, v) => leg(fr(c - td), 0.32, GFH, 5.4, 2.8, 6.6, -0.6, LFH, v);\n  const hind = (td, v) => leg(fr(c - td), 0.32, GHH, -5, 2.4, -6.6, -1, LHH, v);\n  hind(0, FAR);\n  fore(0.33, FAR);\n  // Barrel, chest, withers and quarters.\n  bcap(-5, 0.4, 4.5, 0.2, 3.2, 3.5, 1);\n  bdot(6.6, -0.2, 3.2, 1);\n  bcap(3, -2.4, 6.2, -2, 2.4, 2.4, 1);\n  bdot(-6.6, -0.8, 3.6, 1);\n  bdot(-4.6, -1.6, 2.8, 1);\n  // Neck stretched out and nodding, head, jaw and ear.\n  const al = 0.6 - 0.1 * sin(TAU * (c - 0.3));\n  const nx = wx(6.4, -2), ny = wy(6.4, -2);\n  const px = nx + 9.4 * cos(al), py = ny - 9.4 * sin(al);\n  cap(nx, ny, px, py, 2.8, 1.5, 1);\n  cap(wx(7.8, 0.6), wy(7.8, 0.6), px, py + 1, 2, 1.2, 1);\n  const ga = 0.85 + 0.08 * sin(TAU * (c - 0.5));\n  const mx = px + 6.2 * cos(ga), my = py + 6.2 * sin(ga);\n  cap(px, py, mx, my, 1.6, 0.95, 1);\n  dot(px + 1.2 * cos(ga) - 0.8 * sin(ga), py + 1.2 * sin(ga) + 0.8 * cos(ga), 1.55, 1);\n  cap(px - 0.3, py - 1.1, px - 1.1, py - 3, 0.55, 0.3, 1);\n  // The tail streaming out behind.\n  let tx = wx(-9.6, -2.2), ty = wy(-9.6, -2.2);\n  const T = [-3, 1.2, 1.1, 1.2, -2.8, 1.5, 1.2, 1.3, -2.4, 2, 1.3, 0.5];\n  for (let j = 0; j \u003c 12; j += 4) {\n    const ux = tx + T[j], uy = ty + T[j + 1] + (0.5 + 0.15 * j) * sin(TAU * c - j / 4);\n    cap(tx, ty, ux, uy, T[j + 2], T[j + 3], 1);\n    (tx = ux), (ty = uy);\n  }\n  hind(0.1, 1);\n  fore(0.45, 1);\n  // The jockey, crouched forward with short stirrups, hands on the neck.\n  const sx = wx(1.5, -4.4), sy = wy(1.5, -4.4), a = 0.62 + 0.05 * sin(TAU * c);\n  const hx = sx + 5.6 * sin(a), hy = sy - 5.6 * cos(a);\n  cap(sx, sy, hx, hy, 1.6, 1.5, 1);\n  dot(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), 1.4, 1);\n  cap(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), hx + 3.6 * sin(a - 0.1), hy - 1.9 * cos(a - 0.1), 0.6, 0.4, 1);\n  const kx = wx(4.8, -5.2), ky = wy(4.8, -5.2);\n  cap(sx, sy, kx, ky, 1.4, 1.1, 1);\n  cap(kx, ky, wx(3.6, -1.2), wy(3.6, -1.2), 1, 0.8, 1);\n  const ex = hx + 1.8, ey = hy + 2.6, dx = wx(8.6, -4.6), dy = wy(8.6, -4.6);\n  cap(hx, hy, ex, ey, 0.8, 0.7, 1);\n  cap(ex, ey, dx, dy, 0.7, 0.6, 1);\n  cap(dx, dy, mx - 0.5, my - 0.4, 0.3, 0.3, 0.7);\n}\n\n// A greyhound in the rotary gallop: forefeet, the gathered flight\n// with the back arched and the hind feet reaching past the fore, hind feet,\n// then the long flight stretched out flat.\nconst LFD = [5.2, 5.6, 1, 1.9, 1, 0.55, 0.65], LHD = [5.6, 6, -1, 2.6, 1.15, 0.55, 0.65];\nconst GFD = [6, 4.5, 6, 1.6, 2.5], GHD = [4, 6.5, 5, 0, 2];\nfunction dog(c) {\n  const f = cos(TAU * (c - 0.38)), hl = 6.6 - 1.4 * f;\n  frame(22, 13.2 - 0.6 * f, 0.04 * sin(TAU * (c - 0.1)));\n  const fore = (td, v) => leg(fr(c - td), 0.24, GFD, hl - 1.6, 2.4, hl - 0.8, -0.8, LFD, v);\n  const hind = (td, v) => leg(fr(c - td), 0.24, GHD, -hl + 2.6, 1.6, -hl + 1.4, -1.2, LHD, v);\n  fore(0, FAR);\n  hind(0.53, FAR);\n  // Deep chest, the waist tucked up high under an arching loin.\n  bdot(hl - 1.5, 0.2, 3.2, 1);\n  bcap(hl - 1.5, 0, hl - 5.5, -0.7, 3.2, 2.4, 1);\n  bcap(hl - 5.5, -1.1, -hl + 2.5, -1.9 - 0.8 * f, 1.8, 1.5, 1);\n  bcap(0.5, -2.3 - 1.1 * f, -hl + 2, -2.1 - 0.7 * f, 1.3, 1.3, 1);\n  bdot(-hl + 1.5, -1.5 - 0.6 * f, 2.3, 1);\n  // Long neck, narrow head with a pointed muzzle, ears folded back.\n  const nx = wx(hl, -1.5), ny = wy(hl, -1.5), al = 0.55 + 0.1 * f;\n  const px = nx + 5.4 * cos(al), py = ny - 5.4 * sin(al);\n  cap(nx, ny, px, py, 2, 1.25, 1);\n  cap(px, py, px + 5 * cos(0.42), py + 5 * sin(0.42), 1.45, 0.55, 1);\n  cap(px - 0.4, py - 0.8, px - 2, py - 1.2, 0.6, 0.35, 1);\n  // A long thin tail, curving down and up again.\n  const tx = wx(-hl, -1.8), ty = wy(-hl, -1.8), w = sin(TAU * c);\n  cap(tx, ty, tx - 3, ty + 2.2 + w * 0.5, 0.8, 0.6, 1);\n  cap(tx - 3, ty + 2.2 + w * 0.5, tx - 6, ty + 3 + w, 0.6, 0.45, 1);\n  cap(tx - 6, ty + 3 + w, tx - 8.4, ty + 1.8 + 1.4 * w, 0.45, 0.35, 1);\n  fore(0.07, 1);\n  hind(0.45, 1);\n}\n\n// A sulphur-crested cockatoo flying to the right. Each wing tapers from the\n// shoulder to a fan of primaries; seen from the side its span shows only as\n// much as it is raised or lowered, and on the upstroke the hand folds back.\nfunction bird(c) {\n  const th = 0.12 + 1.07 * cos(TAU * c), up = max(0, sin(TAU * c)), dn = max(0, -sin(TAU * c));\n  frame(22, 16 + 1.4 * sin(TAU * c + 0.6), -0.06);\n  const wing = (o, v) => {\n    const sx = wx(1 + o, -1.6), sy = wy(1 + o, -1.6), e = sin(th);\n    const ax = sx + 0.8 * dn - 2.3, ay = sy - 5 * e + 0.3;\n    const bx = ax + 1.2 * dn - 3.5 * up + 0.6, by = ay - 5.6 * e;\n    cap(sx - 2.3, sy + 0.3, ax, ay, 2.5, 2.1, v);\n    cap(ax, ay, bx, by, 2.1, 1.1, v);\n    for (let j = 0; j \u003c 4; j++) {\n      const a = th + 0.12 - 0.2 * j;\n      cap(bx + 0.4 - 0.7 * j, by, bx - 0.8 - 1.1 * j - 1.4 * up, by - 3.6 * sin(a), 0.6, 0.3, v);\n    }\n  };\n  wing(-0.8, FAR);\n  bcap(-4, 0.3, 4, -0.4, 2.3, 2.6, 1);\n  bdot(6.2, -1.2, 2.1, 1);\n  bcap(7.6, -1.6, 9.8, -0.4, 1, 0.4, 1);\n  bcap(9.4, -0.8, 9.6, 0.5, 0.45, 0.3, 1);\n  // The crest laid back in flight.\n  bcap(6, -3, 2.2, -4.6 + 0.4 * sin(TAU * c), 0.9, 0.35, 1);\n  const e = MO + round(wy(6.8, -1.6) - 0.5) * IW + round(wx(6.8, -1.6) - 0.5);\n  MASK[e] = 0.35;\n  bcap(-3.4, 0.5, -12.5, 1.4, 1.5, 0.9, 1);\n  bcap(-3.4, 1, -12, 2.9, 1.1, 0.6, FAR);\n  wing(0, 1);\n}\n\n// A man running. Hip and knee follow keyframes eight to a stride and the\n// arms swing against the legs. The figure is set down so the lower foot\n// stands on the floor, a little above it in the two moments of flight.\nconst THI = [0.42, 0.12, -0.22, -0.5, -0.35, 0.35, 0.85, 0.75], KNE = [0.12, 0.55, 0.4, 0.35, 1.5, 2.1, 1.3, 0.4];\nconst key = (K, p) => {\n  const q = fr(p) * 8, i = floor(q), f = q - i;\n  return K[i] + (K[(i + 1) & 7] - K[i]) * (1 - cos(PI * f)) * 0.5;\n};\nconst RJ = new Float32Array(24);\nfunction runner(c) {\n  let low = 0;\n  for (let s = 0; s \u003c 2; s++) {\n    const ph = c + 0.5 * s, t = key(THI, ph), k = t - key(KNE, ph), o = s * 12;\n    const ua = -0.75 * sin(TAU * (ph - 0.55));\n    RJ.set([6.4 * sin(t), 6.4 * cos(t)], o);\n    RJ.set([RJ[o] + 6.2 * sin(k), RJ[o + 1] + 6.2 * cos(k)], o + 2);\n    RJ.set([RJ[o + 2] + 2.2 * sin(k + 1.45), RJ[o + 3] + 2.2 * cos(k + 1.45)], o + 4);\n    RJ.set([4.3 * sin(ua), 4.3 * cos(ua)], o + 6);\n    RJ.set([RJ[o + 6] + 3.8 * sin(ua + 1.7), RJ[o + 7] + 3.8 * cos(ua + 1.7)], o + 8);\n    low = max(low, RJ[o + 3] + 0.5, RJ[o + 5]);\n  }\n  const fl = fr(c * 2), lift = fl > 0.375 && fl \u003c 0.5 ? 1.2 * sin((PI * (fl - 0.375)) / 0.125) : 0;\n  const hx = 21, hy = 26.6 - low - lift, sx = hx + 1.3, sy = hy - 7.1;\n  const limb = (s, v) => {\n    const o = s * 12;\n    cap(hx, hy, hx + RJ[o], hy + RJ[o + 1], 1.7, 1.15, v);\n    cap(hx + RJ[o], hy + RJ[o + 1], hx + RJ[o + 2], hy + RJ[o + 3], 1.15, 0.7, v);\n    cap(hx + RJ[o + 2], hy + RJ[o + 3], hx + RJ[o + 4], hy + RJ[o + 5], 0.7, 0.5, v);\n  };\n  const arm = (s, v) => {\n    const o = s * 12;\n    cap(sx, sy, sx + RJ[o + 6], sy + RJ[o + 7], 0.95, 0.75, v);\n    cap(sx + RJ[o + 6], sy + RJ[o + 7], sx + RJ[o + 8], sy + RJ[o + 9], 0.75, 0.6, v);\n    dot(sx + RJ[o + 8], sy + RJ[o + 9], 0.75, v);\n  };\n  arm(1, FAR);\n  limb(1, FAR);\n  cap(hx, hy, sx, sy, 1.9, 2.2, 1);\n  cap(sx, sy, sx + 0.8, sy - 2, 0.9, 0.9, 1);\n  dot(sx + 0.9, sy - 2.8, 1.75, 1);\n  limb(0, 1);\n  arm(0, 1);\n}\nconst FIGS = [horse, dog, bird, runner];\n\n// The grounds behind them. At Palo Alto a white wall ruled with upright lines\n// stands behind the track, and the horse's shadow lies on the track under\n// her. In Philadelphia black cloth strung with a white thread grid hangs\n// behind a pale floor.\nconst BD = new Float32Array(2 * NI);\nconst FIG = [0.04, 0.9, 0.9, 0.9];\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const i = y * IW + x;\n    let t = y \u003c 22 ? (x % 4 === 1 ? 0.6 : 0.9) : y \u003c 23 ? 0.32 : y \u003c 24 ? 0.55 : 0.8 - 0.02 * (y - 24);\n    const sx = (x + 0.5 - 21) / 10, sy = (y + 0.5 - 27.3) / 1.4;\n    if (sx * sx + sy * sy \u003c 1) t *= 0.6;\n    BD[i] = t;\n    BD[NI + i] = y > 26 ? 0.3 : x % 6 === 2 || y % 6 === 3 ? 0.34 : 0.05;\n  }\n// Old lenses: the corners of every plate fall off.\nconst VG = new Float32Array(NI);\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const u = (x + 0.5) / IW - 0.5, v = (y + 0.5) / IH - 0.5;\n    VG[y * IW + x] = (1 - 0.5 * u * u) * (1 - 0.4 * v * v);\n  }\n\n// Film stocks: a curve from each stock's black to its clear base, bent\n// through the grey in the middle of the row.\nconst STOCK = [\n  [0.05, 0.025, 0.012, 0.62, 0.38, 0.18, 1, 0.9, 0.7],\n  [0.05, 0.022, 0, 0.75, 0.42, 0.08, 1, 0.74, 0.3],\n  [0.05, 0.01, 0.02, 0.72, 0.26, 0.36, 1, 0.7, 0.76],\n  [0.01, 0.025, 0.07, 0.16, 0.36, 0.72, 0.72, 0.86, 1],\n  [0.01, 0.04, 0.02, 0.2, 0.52, 0.3, 0.62, 1, 0.68],\n];\nconst LAMP = [1, 0.94, 0.82];\n\n// Columns: -1 the gate's rails, -2 black film edge, -3 perforation, -4 the\n// corner column of a perforation, 0.. the picture.\nconst COL = new Int8Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const e = min(x, W - 1 - x);\n  COL[x] = e === 0 ? -1 : e >= IX ? x - IX : e >= 2 && e \u003c= 6 ? (e === 2 || e === 6 ? -4 : -3) : -2;\n}\n\nexport function setup(params) {\n  for (let s = 0; s \u003c NS; s++)\n    for (let p = 0; p \u003c NP; p++) {\n      MO = (s * NP + p) * NI;\n      FIGS[s](p / NP);\n    }\n  // Dust and a stray hair on sixteen frames that repeat along the reel, and\n  // grain on the film's own rows.\n  const DU = new Float32Array(16 * NI).fill(1);\n  for (let f = 0; f \u003c 16; f++) {\n    for (let j = 0; j \u003c 4; j++) {\n      const x = floor(Math.random() * IW), y = floor(Math.random() * IH);\n      DU[f * NI + y * IW + x] = 0.25;\n      if (Math.random() \u003c 0.4 && x + 1 \u003c IW) DU[f * NI + y * IW + x + 1] = 0.55;\n    }\n    if (f % 7 === 3) {\n      let x = 5 + Math.random() * 36, y = 4 + Math.random() * 20, a = Math.random() * TAU;\n      for (let j = 0; j \u003c 9; j++) {\n        DU[f * NI + floor(y) * IW + floor(x)] = 0.35;\n        a += Math.random() - 0.5;\n        x = cl(x + cos(a), 0, IW - 1);\n        y = cl(y + sin(a), 0, IH - 1);\n      }\n    }\n  }\n  const GN = new Float32Array(W * 256);\n  for (let i = 0; i \u003c GN.length; i++) GN[i] = 0.95 + 0.1 * Math.random();\n  params.s = {\n    DU, GN, n: 0, cyc: 0.5, pos: 1, shut: 1, fps: 3, sub: -1, base: 0, sp: [], tint: -1, lamp: -9,\n    lut: new Float32Array(3 * 65), LY: new Float32Array(H), SP: new Float32Array(H), LX: new Float32Array(W), burns: [], ask: false,\n  };\n  const S = params.s;\n  for (let x = 0; x \u003c W; x++) {\n    const c = COL[x];\n    S.LX[x] = c >= 0 ? 1 - 0.1 * ((c - 22.5) / 23) ** 2 : c === -1 ? 0.1 : c === -2 ? 0.35 : 0.5;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const d = y \u003c GY + FL ? GY + FL - y : y > GY + P - 1 ? y - GY - P + 1 : 0;\n    S.LY[y] = d === 0 ? 1 - 0.08 * ((y - GY - FL - IH / 2) / (IH / 2)) ** 2 : 0.5 * exp(-d * 0.9);\n  }\n}\n\nfunction tune(S, k) {\n  const tint = cl(k[0], 0, 1);\n  if (tint !== S.tint) {\n    S.tint = tint;\n    const q = tint * (STOCK.length - 1), i = min(STOCK.length - 2, floor(q)), f = q - i;\n    for (let j = 0; j \u003c= 64; j++) {\n      const t = j / 64, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const A = STOCK[i], B = STOCK[i + 1];\n        const g = (s) => a * s[ch] + b * s[ch + 3] + c * s[ch + 6];\n        S.lut[j * 3 + ch] = g(A) + (g(B) - g(A)) * f;\n      }\n    }\n  }\n  const lamp = cl(k[3], -1, 1);\n  if (lamp !== S.lamp) {\n    S.lamp = lamp;\n    const b = 0.05 + 0.36 * (lamp + 1);\n    for (let y = 0; y \u003c H; y++) S.SP[y] = b * (0.6 + 0.4 * exp(-(((y - 65) / 34) ** 2)));\n  }\n}\n\n// Where the strip stands: sI rows pulled since the start; frame k holds rows\n// GY + sI + k P onwards.\nconst rows = (S) => round(S.pos * P);\nconst frameAt = (S, y) => floor((y - GY - rows(S)) / P);\nfunction subOf(S, k) {\n  let s = S.base;\n  for (const sp of S.sp) if (k \u003c= sp.k) s = sp.s;\n  return s;\n}\n\nconst BURN = 1.9;\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  tune(S, k);\n  const sub = cl(round(k[2]), 0, NS - 1);\n  if (S.sub \u003c 0) S.base = sub;\n  else if (sub !== S.sub) S.sp.push({ k: frameAt(S, 0) - 1, s: sub });\n  S.sub = sub;\n  while (S.sp.length && frameAt(S, H - 1) \u003c= S.sp[0].k) S.base = S.sp.shift().s;\n  S.fps = 1.5 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0] && !S.burns.some((b) => b.t \u003c BURN + 0.5)) S.ask = true;\n  const tp = min(0.16, 0.32 / S.fps);\n  // The film stands still while a frame burns, and a burnt frame is\n  // forgotten once it has gone off the bottom of the panel.\n  let held = false;\n  for (const b of S.burns) if ((b.t += dt) \u003c BURN) held = true;\n  if (S.burns.length) S.burns = S.burns.filter((b) => frameAt(S, H - 1) >= b.k && b.t \u003c 60);\n  if (!held) {\n    S.cyc += dt * S.fps;\n    if (S.cyc >= 1) (S.cyc -= 1), S.n++;\n  }\n  const tau = S.cyc / S.fps;\n  if (tau \u003c tp) {\n    const u = tau / tp;\n    S.pos = S.n + (1 - cos(PI * u)) / 2;\n    S.shut = 1 - 0.45 * sin(PI * u);\n  } else {\n    S.pos = S.n + 1;\n    S.shut = 1;\n    if (S.ask) {\n      S.ask = false;\n      const h = [0, 1, 2].map(() => Math.random() * TAU), kg = frameAt(S, GY + FL);\n      S.burns = S.burns.filter((b) => b.k !== kg);\n      S.burns.push({ k: kg, t: 0, x: 14 + 18 * Math.random(), y: 9 + 10 * Math.random(), h });\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const sI = rows(S), { lut, DU, GN, LX, LY, SP, burns } = S;\n  // A burn: first a blister, then a hole opening in it with a glowing rim\n  // that cools once the film moves on.\n  for (const b of burns) {\n    b.rh = 9.5 * ease((b.t - 0.35) / 1.3);\n    b.rb = b.rh + 1.2 + 2.6 * ease(b.t / 0.5);\n    b.gl = b.t \u003c BURN ? 1 : max(0, 1 - (b.t - BURN) / 1.4);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const v = y - GY - sI, k = floor(v / P), r = v - k * P, iy = r - FL;\n    const sub = subOf(S, k), mo = (sub * NP + (((-k % NP) + NP) % NP)) * NI, bo = sub ? NI : 0, fg = FIG[sub];\n    const pr = r & 7, hole = pr >= 3 && pr \u003c= 6, hedge = pr === 3 || pr === 6;\n    const ex = 0.93 + 0.1 * hash(k, 7), du = (k & 15) * NI, gn = (v & 255) * W;\n    let splice = false;\n    if (iy \u003c 0) for (const sp of S.sp) if (sp.k === k - 1) splice = true;\n    // A scratch down the emulsion, one every few frames, fixed to the film.\n    const seg = floor(k / 5), hs = hash(seg, 11);\n    const scx = hs \u003c 0.55 ? floor(hash(seg, 12) * 40) + 3 + (((v >> 3) & 3) === 1 ? 1 : 0) : -9;\n    const sc0 = hash(seg, 13) * 5 * P, sc1 = sc0 + (0.3 + hash(seg, 14)) * 3 * P, vs = v - seg * 5 * P;\n    const scr = vs > sc0 && vs \u003c sc1 ? scx : -9;\n    const ly = LY[y] * S.shut, sp = SP[y];\n    let burn = null;\n    for (const b of burns) if (b.k === k) burn = b;\n    for (let x = 0; x \u003c W; x++) {\n      const c = COL[x];\n      const a = ly * LX[x], L = 0.95 * a + sp * (1 - 0.95 * a);\n      let R, G, Bl;\n      if (c \u003c -2 && hole) {\n        // A perforation: the lamp straight through, its corners rounded.\n        const e = c === -4 && hedge ? 0.45 : 1;\n        R = LAMP[0] * L * e;\n        G = LAMP[1] * L * e;\n        Bl = LAMP[2] * L * e;\n      } else if (c === -1) {\n        R = G = Bl = 0.12 * L;\n      } else {\n        let t = 0.03;\n        let br = 0;\n        if (c >= 0 && iy >= 0) {\n          const i = iy * IW + c;\n          t = (BD[bo + i] + (fg - BD[bo + i]) * MASK[mo + i]) * VG[i] * ex * DU[du + i];\n          if (c === scr) t = min(1, t + 0.22);\n          if (burn) {\n            const dx = c + 0.5 - burn.x, dy = iy + 0.5 - burn.y, an = atan2(dy, dx), h = burn.h;\n            const d = sqrt(dx * dx + dy * dy) / (1 + 0.18 * sin(3 * an + h[0]) + 0.1 * sin(5 * an + h[1]) + 0.06 * sin(11 * an + h[2]));\n            if (d \u003c burn.rh) br = 1;\n            else if (d \u003c burn.rh + 1.4 && burn.rh > 0) br = 2;\n            else if (d \u003c burn.rb) {\n              t *= 0.3 + 0.5 * hash(c >> 1, (iy >> 1) + k * 31);\n              br = 3;\n            }\n          }\n        } else if (splice && c >= 0) t = r === 1 ? 0.55 : 0.2;\n        if (br === 1) {\n          R = LAMP[0] * L;\n          G = LAMP[1] * L;\n          Bl = LAMP[2] * L;\n        } else {\n          const j = round(cl(t, 0, 1) * 64) * 3, g = L * GN[gn + x];\n          R = lut[j] * g;\n          G = lut[j + 1] * g;\n          Bl = lut[j + 2] * g;\n          if (br === 3) (R = R * 0.8 + 0.1 * L), (G *= 0.6), (Bl *= 0.4);\n          if (br === 2) (R += burn.gl), (G += 0.42 * burn.gl), (Bl += 0.06 * burn.gl);\n        }\n      }\n      display.setPixel(x, y, min(255, 255 * R), min(255, 255 * G), min(255, 255 * Bl));\n    }\n  }\n}\n","layer":{"id":"layer-horse-in-motion","type":"code","name":"horse-in-motion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Horse in Motion\n// Family:  film\n// Idea:    A strip of film with sprocket holes down both edges jerks down through a projector gate one frame at a time, and in the bright frame held in the middle Muybridge's racehorse gallops through its twelve photographs while the frames above and below wait dim in the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after Eadweard Muybridge, The Horse in Motion (1878)\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1\n//\n// Knob 1: Tint. The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white.\n// Knob 2: Speed. Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds.\n// Knob 3: Subject. Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice.\n// Knob 4: Lamp. How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box.\n// Buttons: K1 tap makes the film catch in the gate. The frame stops and blisters under the lamp until a hole burns through from the middle; then the claw catches again and the burnt frame goes on down the strip with its hole still glowing at the rim.\n\nconst W = 64, H = 128;\n// The strip: a frame every P rows with a frame line FL rows deep at its top,\n// the picture IW by IH between the perforations from column IX, and the gate\n// framing the frame whose top is on row GY. Four perforations a frame.\nconst P = 32, FL = 3, IW = 46, IH = P - FL, IX = 9, GY = 48, NP = 12, NI = IW * IH, NS = 4;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, atan2, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst fr = (v) => v - floor(v);\nfunction hash(a, b) {\n  let h = (Math.imul(a | 0, 374761393) + Math.imul(b | 0, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// ---- The photographs, drawn once into masks: how much of each picture LED\n// the subject covers, 1 for its near side and FAR for limbs on the far side.\nconst MASK = new Float32Array(NS * NP * NI);\nconst FAR = 0.8;\nlet MO = 0;\nfunction cap(ax, ay, bx, by, ra, rb, v) {\n  const x0 = max(0, floor(min(ax - ra, bx - rb) - 1)), x1 = min(IW - 1, ceil(max(ax + ra, bx + rb)));\n  const y0 = max(0, floor(min(ay - ra, by - rb) - 1)), y1 = min(IH - 1, ceil(max(ay + ra, by + rb)));\n  const dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay;\n      const t = cl((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx, ey = py - t * dy;\n      const c = cl(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1) * v;\n      const i = MO + y * IW + x;\n      if (c > MASK[i]) MASK[i] = c;\n    }\n}\nconst dot = (x, y, r, v) => cap(x, y, x, y, r, r, v);\n// The body's own frame: x forward, y down, turned by the pitch.\nlet BX = 0, BY = 0, BC = 1, BS = 0;\nconst frame = (x, y, a) => ((BX = x), (BY = y), (BC = cos(a)), (BS = sin(a)));\nconst wx = (x, y) => BX + x * BC - y * BS;\nconst wy = (x, y) => BY + x * BS + y * BC;\nconst bcap = (x1, y1, x2, y2, ra, rb, v) => cap(wx(x1, y1), wy(x1, y1), wx(x2, y2), wy(x2, y2), ra, rb, v);\nconst bdot = (x, y, r, v) => dot(wx(x, y), wy(x, y), r, v);\n\n// Two bones from (tx, ty) towards (fx, fy), the joint bent forward (s = 1)\n// or back (s = -1). Leaves the joint in JX, JY and the reached end in FX, FY.\nlet JX = 0, JY = 0, FX = 0, FY = 0;\nfunction ik(tx, ty, fx, fy, a, b, s) {\n  let dx = fx - tx, dy = fy - ty;\n  const d = sqrt(dx * dx + dy * dy) || 1e-6;\n  const dc = cl(d, abs(a - b) + 0.05, a + b - 0.02);\n  (dx /= d), (dy /= d);\n  const ca = (a * a + dc * dc - b * b) / (2 * a * dc), sa = sqrt(max(0, 1 - ca * ca));\n  JX = tx + a * (ca * dx + s * sa * dy);\n  JY = ty + a * (ca * dy - s * sa * dx);\n  FX = tx + dx * dc;\n  FY = ty + dy * dc;\n}\n\n// One leg of a galloping animal. c is the leg's phase from touchdown; for\n// the share D of the stride the hoof stands on the ground (row GR) while the\n// body passes over it, from G[0] ahead of the top joint to G[1] behind; then\n// it lifts by G[2], folding (G[3] pulls it further behind first), and swings\n// forward, reaching G[4] past where it lands. The top joint (tx, ty) rides a\n// quarter of the sweep, hanging from the shoulder or hip (ux, uy).\n// L = bones a and b with their bend, then four radii.\nconst GR = 26.6;\nfunction leg(c, D, G, tx, ty, ux, uy, L, v) {\n  let hx, lift = 0;\n  if (c \u003c D) hx = G[0] - ((G[0] + G[1]) * c) / D;\n  else {\n    const s = (c - D) / (1 - D), w = sin(PI * s);\n    hx = -G[1] + (G[0] + G[1]) * ease(s) - G[3] * w * (1 - s) + G[4] * w * s * s;\n    lift = G[2] * sin(PI * s ** 0.75);\n  }\n  const Tx = wx(tx + 0.25 * hx, ty), Ty = wy(tx + 0.25 * hx, ty);\n  ik(Tx, Ty, wx(tx, ty) + hx, GR - lift, L[0], L[1], L[2]);\n  cap(wx(ux, uy), wy(ux, uy), Tx, Ty, L[3], L[4], v);\n  cap(Tx, Ty, JX, JY, L[4], L[5], v);\n  dot(JX, JY, L[5], v);\n  cap(JX, JY, FX, FY, L[5] * 0.75, L[6] * 0.7, v);\n  cap(FX, FY, FX + 0.6, FY + 0.2, L[6], L[6] * 0.9, v);\n}\n\n// Sallie Gardner at a 1:40 gait, ridden by G. Domm, seen from her right.\n// A transverse gallop: left hind, right hind, left fore, right fore, then\n// all four hooves off the ground with the legs gathered under the belly.\nconst LFH = [5.2, 5.2, 1, 2.3, 1.3, 0.75, 0.8], LHH = [5.4, 5.6, -1, 3, 1.4, 0.75, 0.8];\nconst GFH = [6, 5, 6.5, 1.5, 2.5], GHH = [4, 7, 5.5, 0, 1.5];\nfunction horse(c) {\n  const pitch = 0.07 * sin(TAU * (c - 0.3));\n  frame(21, 13.8 - 0.7 * cos(TAU * (c - 0.9)), pitch);\n  const fore = (td, v) => leg(fr(c - td), 0.32, GFH, 5.4, 2.8, 6.6, -0.6, LFH, v);\n  const hind = (td, v) => leg(fr(c - td), 0.32, GHH, -5, 2.4, -6.6, -1, LHH, v);\n  hind(0, FAR);\n  fore(0.33, FAR);\n  // Barrel, chest, withers and quarters.\n  bcap(-5, 0.4, 4.5, 0.2, 3.2, 3.5, 1);\n  bdot(6.6, -0.2, 3.2, 1);\n  bcap(3, -2.4, 6.2, -2, 2.4, 2.4, 1);\n  bdot(-6.6, -0.8, 3.6, 1);\n  bdot(-4.6, -1.6, 2.8, 1);\n  // Neck stretched out and nodding, head, jaw and ear.\n  const al = 0.6 - 0.1 * sin(TAU * (c - 0.3));\n  const nx = wx(6.4, -2), ny = wy(6.4, -2);\n  const px = nx + 9.4 * cos(al), py = ny - 9.4 * sin(al);\n  cap(nx, ny, px, py, 2.8, 1.5, 1);\n  cap(wx(7.8, 0.6), wy(7.8, 0.6), px, py + 1, 2, 1.2, 1);\n  const ga = 0.85 + 0.08 * sin(TAU * (c - 0.5));\n  const mx = px + 6.2 * cos(ga), my = py + 6.2 * sin(ga);\n  cap(px, py, mx, my, 1.6, 0.95, 1);\n  dot(px + 1.2 * cos(ga) - 0.8 * sin(ga), py + 1.2 * sin(ga) + 0.8 * cos(ga), 1.55, 1);\n  cap(px - 0.3, py - 1.1, px - 1.1, py - 3, 0.55, 0.3, 1);\n  // The tail streaming out behind.\n  let tx = wx(-9.6, -2.2), ty = wy(-9.6, -2.2);\n  const T = [-3, 1.2, 1.1, 1.2, -2.8, 1.5, 1.2, 1.3, -2.4, 2, 1.3, 0.5];\n  for (let j = 0; j \u003c 12; j += 4) {\n    const ux = tx + T[j], uy = ty + T[j + 1] + (0.5 + 0.15 * j) * sin(TAU * c - j / 4);\n    cap(tx, ty, ux, uy, T[j + 2], T[j + 3], 1);\n    (tx = ux), (ty = uy);\n  }\n  hind(0.1, 1);\n  fore(0.45, 1);\n  // The jockey, crouched forward with short stirrups, hands on the neck.\n  const sx = wx(1.5, -4.4), sy = wy(1.5, -4.4), a = 0.62 + 0.05 * sin(TAU * c);\n  const hx = sx + 5.6 * sin(a), hy = sy - 5.6 * cos(a);\n  cap(sx, sy, hx, hy, 1.6, 1.5, 1);\n  dot(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), 1.4, 1);\n  cap(hx + 2.1 * sin(a - 0.1), hy - 2.1 * cos(a - 0.1), hx + 3.6 * sin(a - 0.1), hy - 1.9 * cos(a - 0.1), 0.6, 0.4, 1);\n  const kx = wx(4.8, -5.2), ky = wy(4.8, -5.2);\n  cap(sx, sy, kx, ky, 1.4, 1.1, 1);\n  cap(kx, ky, wx(3.6, -1.2), wy(3.6, -1.2), 1, 0.8, 1);\n  const ex = hx + 1.8, ey = hy + 2.6, dx = wx(8.6, -4.6), dy = wy(8.6, -4.6);\n  cap(hx, hy, ex, ey, 0.8, 0.7, 1);\n  cap(ex, ey, dx, dy, 0.7, 0.6, 1);\n  cap(dx, dy, mx - 0.5, my - 0.4, 0.3, 0.3, 0.7);\n}\n\n// A greyhound in the rotary gallop: forefeet, the gathered flight\n// with the back arched and the hind feet reaching past the fore, hind feet,\n// then the long flight stretched out flat.\nconst LFD = [5.2, 5.6, 1, 1.9, 1, 0.55, 0.65], LHD = [5.6, 6, -1, 2.6, 1.15, 0.55, 0.65];\nconst GFD = [6, 4.5, 6, 1.6, 2.5], GHD = [4, 6.5, 5, 0, 2];\nfunction dog(c) {\n  const f = cos(TAU * (c - 0.38)), hl = 6.6 - 1.4 * f;\n  frame(22, 13.2 - 0.6 * f, 0.04 * sin(TAU * (c - 0.1)));\n  const fore = (td, v) => leg(fr(c - td), 0.24, GFD, hl - 1.6, 2.4, hl - 0.8, -0.8, LFD, v);\n  const hind = (td, v) => leg(fr(c - td), 0.24, GHD, -hl + 2.6, 1.6, -hl + 1.4, -1.2, LHD, v);\n  fore(0, FAR);\n  hind(0.53, FAR);\n  // Deep chest, the waist tucked up high under an arching loin.\n  bdot(hl - 1.5, 0.2, 3.2, 1);\n  bcap(hl - 1.5, 0, hl - 5.5, -0.7, 3.2, 2.4, 1);\n  bcap(hl - 5.5, -1.1, -hl + 2.5, -1.9 - 0.8 * f, 1.8, 1.5, 1);\n  bcap(0.5, -2.3 - 1.1 * f, -hl + 2, -2.1 - 0.7 * f, 1.3, 1.3, 1);\n  bdot(-hl + 1.5, -1.5 - 0.6 * f, 2.3, 1);\n  // Long neck, narrow head with a pointed muzzle, ears folded back.\n  const nx = wx(hl, -1.5), ny = wy(hl, -1.5), al = 0.55 + 0.1 * f;\n  const px = nx + 5.4 * cos(al), py = ny - 5.4 * sin(al);\n  cap(nx, ny, px, py, 2, 1.25, 1);\n  cap(px, py, px + 5 * cos(0.42), py + 5 * sin(0.42), 1.45, 0.55, 1);\n  cap(px - 0.4, py - 0.8, px - 2, py - 1.2, 0.6, 0.35, 1);\n  // A long thin tail, curving down and up again.\n  const tx = wx(-hl, -1.8), ty = wy(-hl, -1.8), w = sin(TAU * c);\n  cap(tx, ty, tx - 3, ty + 2.2 + w * 0.5, 0.8, 0.6, 1);\n  cap(tx - 3, ty + 2.2 + w * 0.5, tx - 6, ty + 3 + w, 0.6, 0.45, 1);\n  cap(tx - 6, ty + 3 + w, tx - 8.4, ty + 1.8 + 1.4 * w, 0.45, 0.35, 1);\n  fore(0.07, 1);\n  hind(0.45, 1);\n}\n\n// A sulphur-crested cockatoo flying to the right. Each wing tapers from the\n// shoulder to a fan of primaries; seen from the side its span shows only as\n// much as it is raised or lowered, and on the upstroke the hand folds back.\nfunction bird(c) {\n  const th = 0.12 + 1.07 * cos(TAU * c), up = max(0, sin(TAU * c)), dn = max(0, -sin(TAU * c));\n  frame(22, 16 + 1.4 * sin(TAU * c + 0.6), -0.06);\n  const wing = (o, v) => {\n    const sx = wx(1 + o, -1.6), sy = wy(1 + o, -1.6), e = sin(th);\n    const ax = sx + 0.8 * dn - 2.3, ay = sy - 5 * e + 0.3;\n    const bx = ax + 1.2 * dn - 3.5 * up + 0.6, by = ay - 5.6 * e;\n    cap(sx - 2.3, sy + 0.3, ax, ay, 2.5, 2.1, v);\n    cap(ax, ay, bx, by, 2.1, 1.1, v);\n    for (let j = 0; j \u003c 4; j++) {\n      const a = th + 0.12 - 0.2 * j;\n      cap(bx + 0.4 - 0.7 * j, by, bx - 0.8 - 1.1 * j - 1.4 * up, by - 3.6 * sin(a), 0.6, 0.3, v);\n    }\n  };\n  wing(-0.8, FAR);\n  bcap(-4, 0.3, 4, -0.4, 2.3, 2.6, 1);\n  bdot(6.2, -1.2, 2.1, 1);\n  bcap(7.6, -1.6, 9.8, -0.4, 1, 0.4, 1);\n  bcap(9.4, -0.8, 9.6, 0.5, 0.45, 0.3, 1);\n  // The crest laid back in flight.\n  bcap(6, -3, 2.2, -4.6 + 0.4 * sin(TAU * c), 0.9, 0.35, 1);\n  const e = MO + round(wy(6.8, -1.6) - 0.5) * IW + round(wx(6.8, -1.6) - 0.5);\n  MASK[e] = 0.35;\n  bcap(-3.4, 0.5, -12.5, 1.4, 1.5, 0.9, 1);\n  bcap(-3.4, 1, -12, 2.9, 1.1, 0.6, FAR);\n  wing(0, 1);\n}\n\n// A man running. Hip and knee follow keyframes eight to a stride and the\n// arms swing against the legs. The figure is set down so the lower foot\n// stands on the floor, a little above it in the two moments of flight.\nconst THI = [0.42, 0.12, -0.22, -0.5, -0.35, 0.35, 0.85, 0.75], KNE = [0.12, 0.55, 0.4, 0.35, 1.5, 2.1, 1.3, 0.4];\nconst key = (K, p) => {\n  const q = fr(p) * 8, i = floor(q), f = q - i;\n  return K[i] + (K[(i + 1) & 7] - K[i]) * (1 - cos(PI * f)) * 0.5;\n};\nconst RJ = new Float32Array(24);\nfunction runner(c) {\n  let low = 0;\n  for (let s = 0; s \u003c 2; s++) {\n    const ph = c + 0.5 * s, t = key(THI, ph), k = t - key(KNE, ph), o = s * 12;\n    const ua = -0.75 * sin(TAU * (ph - 0.55));\n    RJ.set([6.4 * sin(t), 6.4 * cos(t)], o);\n    RJ.set([RJ[o] + 6.2 * sin(k), RJ[o + 1] + 6.2 * cos(k)], o + 2);\n    RJ.set([RJ[o + 2] + 2.2 * sin(k + 1.45), RJ[o + 3] + 2.2 * cos(k + 1.45)], o + 4);\n    RJ.set([4.3 * sin(ua), 4.3 * cos(ua)], o + 6);\n    RJ.set([RJ[o + 6] + 3.8 * sin(ua + 1.7), RJ[o + 7] + 3.8 * cos(ua + 1.7)], o + 8);\n    low = max(low, RJ[o + 3] + 0.5, RJ[o + 5]);\n  }\n  const fl = fr(c * 2), lift = fl > 0.375 && fl \u003c 0.5 ? 1.2 * sin((PI * (fl - 0.375)) / 0.125) : 0;\n  const hx = 21, hy = 26.6 - low - lift, sx = hx + 1.3, sy = hy - 7.1;\n  const limb = (s, v) => {\n    const o = s * 12;\n    cap(hx, hy, hx + RJ[o], hy + RJ[o + 1], 1.7, 1.15, v);\n    cap(hx + RJ[o], hy + RJ[o + 1], hx + RJ[o + 2], hy + RJ[o + 3], 1.15, 0.7, v);\n    cap(hx + RJ[o + 2], hy + RJ[o + 3], hx + RJ[o + 4], hy + RJ[o + 5], 0.7, 0.5, v);\n  };\n  const arm = (s, v) => {\n    const o = s * 12;\n    cap(sx, sy, sx + RJ[o + 6], sy + RJ[o + 7], 0.95, 0.75, v);\n    cap(sx + RJ[o + 6], sy + RJ[o + 7], sx + RJ[o + 8], sy + RJ[o + 9], 0.75, 0.6, v);\n    dot(sx + RJ[o + 8], sy + RJ[o + 9], 0.75, v);\n  };\n  arm(1, FAR);\n  limb(1, FAR);\n  cap(hx, hy, sx, sy, 1.9, 2.2, 1);\n  cap(sx, sy, sx + 0.8, sy - 2, 0.9, 0.9, 1);\n  dot(sx + 0.9, sy - 2.8, 1.75, 1);\n  limb(0, 1);\n  arm(0, 1);\n}\nconst FIGS = [horse, dog, bird, runner];\n\n// The grounds behind them. At Palo Alto a white wall ruled with upright lines\n// stands behind the track, and the horse's shadow lies on the track under\n// her. In Philadelphia black cloth strung with a white thread grid hangs\n// behind a pale floor.\nconst BD = new Float32Array(2 * NI);\nconst FIG = [0.04, 0.9, 0.9, 0.9];\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const i = y * IW + x;\n    let t = y \u003c 22 ? (x % 4 === 1 ? 0.6 : 0.9) : y \u003c 23 ? 0.32 : y \u003c 24 ? 0.55 : 0.8 - 0.02 * (y - 24);\n    const sx = (x + 0.5 - 21) / 10, sy = (y + 0.5 - 27.3) / 1.4;\n    if (sx * sx + sy * sy \u003c 1) t *= 0.6;\n    BD[i] = t;\n    BD[NI + i] = y > 26 ? 0.3 : x % 6 === 2 || y % 6 === 3 ? 0.34 : 0.05;\n  }\n// Old lenses: the corners of every plate fall off.\nconst VG = new Float32Array(NI);\nfor (let y = 0; y \u003c IH; y++)\n  for (let x = 0; x \u003c IW; x++) {\n    const u = (x + 0.5) / IW - 0.5, v = (y + 0.5) / IH - 0.5;\n    VG[y * IW + x] = (1 - 0.5 * u * u) * (1 - 0.4 * v * v);\n  }\n\n// Film stocks: a curve from each stock's black to its clear base, bent\n// through the grey in the middle of the row.\nconst STOCK = [\n  [0.05, 0.025, 0.012, 0.62, 0.38, 0.18, 1, 0.9, 0.7],\n  [0.05, 0.022, 0, 0.75, 0.42, 0.08, 1, 0.74, 0.3],\n  [0.05, 0.01, 0.02, 0.72, 0.26, 0.36, 1, 0.7, 0.76],\n  [0.01, 0.025, 0.07, 0.16, 0.36, 0.72, 0.72, 0.86, 1],\n  [0.01, 0.04, 0.02, 0.2, 0.52, 0.3, 0.62, 1, 0.68],\n];\nconst LAMP = [1, 0.94, 0.82];\n\n// Columns: -1 the gate's rails, -2 black film edge, -3 perforation, -4 the\n// corner column of a perforation, 0.. the picture.\nconst COL = new Int8Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const e = min(x, W - 1 - x);\n  COL[x] = e === 0 ? -1 : e >= IX ? x - IX : e >= 2 && e \u003c= 6 ? (e === 2 || e === 6 ? -4 : -3) : -2;\n}\n\nexport function setup(params) {\n  for (let s = 0; s \u003c NS; s++)\n    for (let p = 0; p \u003c NP; p++) {\n      MO = (s * NP + p) * NI;\n      FIGS[s](p / NP);\n    }\n  // Dust and a stray hair on sixteen frames that repeat along the reel, and\n  // grain on the film's own rows.\n  const DU = new Float32Array(16 * NI).fill(1);\n  for (let f = 0; f \u003c 16; f++) {\n    for (let j = 0; j \u003c 4; j++) {\n      const x = floor(Math.random() * IW), y = floor(Math.random() * IH);\n      DU[f * NI + y * IW + x] = 0.25;\n      if (Math.random() \u003c 0.4 && x + 1 \u003c IW) DU[f * NI + y * IW + x + 1] = 0.55;\n    }\n    if (f % 7 === 3) {\n      let x = 5 + Math.random() * 36, y = 4 + Math.random() * 20, a = Math.random() * TAU;\n      for (let j = 0; j \u003c 9; j++) {\n        DU[f * NI + floor(y) * IW + floor(x)] = 0.35;\n        a += Math.random() - 0.5;\n        x = cl(x + cos(a), 0, IW - 1);\n        y = cl(y + sin(a), 0, IH - 1);\n      }\n    }\n  }\n  const GN = new Float32Array(W * 256);\n  for (let i = 0; i \u003c GN.length; i++) GN[i] = 0.95 + 0.1 * Math.random();\n  params.s = {\n    DU, GN, n: 0, cyc: 0.5, pos: 1, shut: 1, fps: 3, sub: -1, base: 0, sp: [], tint: -1, lamp: -9,\n    lut: new Float32Array(3 * 65), LY: new Float32Array(H), SP: new Float32Array(H), LX: new Float32Array(W), burns: [], ask: false,\n  };\n  const S = params.s;\n  for (let x = 0; x \u003c W; x++) {\n    const c = COL[x];\n    S.LX[x] = c >= 0 ? 1 - 0.1 * ((c - 22.5) / 23) ** 2 : c === -1 ? 0.1 : c === -2 ? 0.35 : 0.5;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const d = y \u003c GY + FL ? GY + FL - y : y > GY + P - 1 ? y - GY - P + 1 : 0;\n    S.LY[y] = d === 0 ? 1 - 0.08 * ((y - GY - FL - IH / 2) / (IH / 2)) ** 2 : 0.5 * exp(-d * 0.9);\n  }\n}\n\nfunction tune(S, k) {\n  const tint = cl(k[0], 0, 1);\n  if (tint !== S.tint) {\n    S.tint = tint;\n    const q = tint * (STOCK.length - 1), i = min(STOCK.length - 2, floor(q)), f = q - i;\n    for (let j = 0; j \u003c= 64; j++) {\n      const t = j / 64, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        const A = STOCK[i], B = STOCK[i + 1];\n        const g = (s) => a * s[ch] + b * s[ch + 3] + c * s[ch + 6];\n        S.lut[j * 3 + ch] = g(A) + (g(B) - g(A)) * f;\n      }\n    }\n  }\n  const lamp = cl(k[3], -1, 1);\n  if (lamp !== S.lamp) {\n    S.lamp = lamp;\n    const b = 0.05 + 0.36 * (lamp + 1);\n    for (let y = 0; y \u003c H; y++) S.SP[y] = b * (0.6 + 0.4 * exp(-(((y - 65) / 34) ** 2)));\n  }\n}\n\n// Where the strip stands: sI rows pulled since the start; frame k holds rows\n// GY + sI + k P onwards.\nconst rows = (S) => round(S.pos * P);\nconst frameAt = (S, y) => floor((y - GY - rows(S)) / P);\nfunction subOf(S, k) {\n  let s = S.base;\n  for (const sp of S.sp) if (k \u003c= sp.k) s = sp.s;\n  return s;\n}\n\nconst BURN = 1.9;\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  tune(S, k);\n  const sub = cl(round(k[2]), 0, NS - 1);\n  if (S.sub \u003c 0) S.base = sub;\n  else if (sub !== S.sub) S.sp.push({ k: frameAt(S, 0) - 1, s: sub });\n  S.sub = sub;\n  while (S.sp.length && frameAt(S, H - 1) \u003c= S.sp[0].k) S.base = S.sp.shift().s;\n  S.fps = 1.5 * cl(k[1], 0.2, 3);\n  if (input.btnPressed && input.btnPressed[0] && !S.burns.some((b) => b.t \u003c BURN + 0.5)) S.ask = true;\n  const tp = min(0.16, 0.32 / S.fps);\n  // The film stands still while a frame burns, and a burnt frame is\n  // forgotten once it has gone off the bottom of the panel.\n  let held = false;\n  for (const b of S.burns) if ((b.t += dt) \u003c BURN) held = true;\n  if (S.burns.length) S.burns = S.burns.filter((b) => frameAt(S, H - 1) >= b.k && b.t \u003c 60);\n  if (!held) {\n    S.cyc += dt * S.fps;\n    if (S.cyc >= 1) (S.cyc -= 1), S.n++;\n  }\n  const tau = S.cyc / S.fps;\n  if (tau \u003c tp) {\n    const u = tau / tp;\n    S.pos = S.n + (1 - cos(PI * u)) / 2;\n    S.shut = 1 - 0.45 * sin(PI * u);\n  } else {\n    S.pos = S.n + 1;\n    S.shut = 1;\n    if (S.ask) {\n      S.ask = false;\n      const h = [0, 1, 2].map(() => Math.random() * TAU), kg = frameAt(S, GY + FL);\n      S.burns = S.burns.filter((b) => b.k !== kg);\n      S.burns.push({ k: kg, t: 0, x: 14 + 18 * Math.random(), y: 9 + 10 * Math.random(), h });\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const sI = rows(S), { lut, DU, GN, LX, LY, SP, burns } = S;\n  // A burn: first a blister, then a hole opening in it with a glowing rim\n  // that cools once the film moves on.\n  for (const b of burns) {\n    b.rh = 9.5 * ease((b.t - 0.35) / 1.3);\n    b.rb = b.rh + 1.2 + 2.6 * ease(b.t / 0.5);\n    b.gl = b.t \u003c BURN ? 1 : max(0, 1 - (b.t - BURN) / 1.4);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const v = y - GY - sI, k = floor(v / P), r = v - k * P, iy = r - FL;\n    const sub = subOf(S, k), mo = (sub * NP + (((-k % NP) + NP) % NP)) * NI, bo = sub ? NI : 0, fg = FIG[sub];\n    const pr = r & 7, hole = pr >= 3 && pr \u003c= 6, hedge = pr === 3 || pr === 6;\n    const ex = 0.93 + 0.1 * hash(k, 7), du = (k & 15) * NI, gn = (v & 255) * W;\n    let splice = false;\n    if (iy \u003c 0) for (const sp of S.sp) if (sp.k === k - 1) splice = true;\n    // A scratch down the emulsion, one every few frames, fixed to the film.\n    const seg = floor(k / 5), hs = hash(seg, 11);\n    const scx = hs \u003c 0.55 ? floor(hash(seg, 12) * 40) + 3 + (((v >> 3) & 3) === 1 ? 1 : 0) : -9;\n    const sc0 = hash(seg, 13) * 5 * P, sc1 = sc0 + (0.3 + hash(seg, 14)) * 3 * P, vs = v - seg * 5 * P;\n    const scr = vs > sc0 && vs \u003c sc1 ? scx : -9;\n    const ly = LY[y] * S.shut, sp = SP[y];\n    let burn = null;\n    for (const b of burns) if (b.k === k) burn = b;\n    for (let x = 0; x \u003c W; x++) {\n      const c = COL[x];\n      const a = ly * LX[x], L = 0.95 * a + sp * (1 - 0.95 * a);\n      let R, G, Bl;\n      if (c \u003c -2 && hole) {\n        // A perforation: the lamp straight through, its corners rounded.\n        const e = c === -4 && hedge ? 0.45 : 1;\n        R = LAMP[0] * L * e;\n        G = LAMP[1] * L * e;\n        Bl = LAMP[2] * L * e;\n      } else if (c === -1) {\n        R = G = Bl = 0.12 * L;\n      } else {\n        let t = 0.03;\n        let br = 0;\n        if (c >= 0 && iy >= 0) {\n          const i = iy * IW + c;\n          t = (BD[bo + i] + (fg - BD[bo + i]) * MASK[mo + i]) * VG[i] * ex * DU[du + i];\n          if (c === scr) t = min(1, t + 0.22);\n          if (burn) {\n            const dx = c + 0.5 - burn.x, dy = iy + 0.5 - burn.y, an = atan2(dy, dx), h = burn.h;\n            const d = sqrt(dx * dx + dy * dy) / (1 + 0.18 * sin(3 * an + h[0]) + 0.1 * sin(5 * an + h[1]) + 0.06 * sin(11 * an + h[2]));\n            if (d \u003c burn.rh) br = 1;\n            else if (d \u003c burn.rh + 1.4 && burn.rh > 0) br = 2;\n            else if (d \u003c burn.rb) {\n              t *= 0.3 + 0.5 * hash(c >> 1, (iy >> 1) + k * 31);\n              br = 3;\n            }\n          }\n        } else if (splice && c >= 0) t = r === 1 ? 0.55 : 0.2;\n        if (br === 1) {\n          R = LAMP[0] * L;\n          G = LAMP[1] * L;\n          Bl = LAMP[2] * L;\n        } else {\n          const j = round(cl(t, 0, 1) * 64) * 3, g = L * GN[gn + x];\n          R = lut[j] * g;\n          G = lut[j + 1] * g;\n          Bl = lut[j + 2] * g;\n          if (br === 3) (R = R * 0.8 + 0.1 * L), (G *= 0.6), (Bl *= 0.4);\n          if (br === 2) (R += burn.gl), (G += 0.42 * burn.gl), (Bl += 0.06 * burn.gl);\n        }\n      }\n      display.setPixel(x, y, min(255, 255 * R), min(255, 255 * G), min(255, 255 * Bl));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Subject=0..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"The film stock: a sepia-toned print at 0, then amber nitrate, rose, blue-toned night stock and green at 1. The perforations always show the lamp's own warm white."},{"name":"Speed","min":0.2,"max":3,"about":"Frames a second through the gate: at 2 the claw pulls down three frames a second and the horse takes four seconds over a stride; at 0.2 each frame stands in the gate for over three seconds."},{"name":"Subject","min":0,"max":3,"about":"Which reel is laced up, one a step: at 0 Sallie Gardner galloping at Palo Alto in 1878, horse and rider dark against the white wall with its ruled lines; at 1 a greyhound at full stretch, at 2 a cockatoo in flight and at 3 a man running, pale on black cloth strung with a white thread grid in the manner of Animal Locomotion (1887). A new reel is spliced on above the panel and comes down through the gate behind a pale splice."},{"name":"Lamp","min":-1,"max":1,"about":"How much of the lamp's light reaches the strip outside the gate: at -1 only the frame in the gate shows and the rest of the reel is dark, at 1 the whole strip glows as if laid on a light box."}],"start":[0,2,0,0.06],"measures":{"motion":1.0766,"detail":0.056,"edges":0.3551,"complexity":1.5938,"coverage":0.6083,"colour":0.0988,"drift":0.0453},"knobResponse":[0.0878,0.0582,0.1145,0.1659]},{"slug":"hourglass","title":"Hourglass","family":"time","round":2,"note":"LED 하나가 모래 한 알이에요. 두 LED 목으로 흘러 위 더미는 가운데부터 꺼지고 아래에는 원뿔이 쌓이며, 위가 비면 유리가 반 바퀴 돌아 뒤집혀요.","idea":"One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.","buttons":"K1 tap turns the glass over now.","code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-hourglass","type":"code","name":"hourglass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sand","min":0,"max":1,"about":"The colour of the sand."},{"name":"Flow","min":0.5,"max":4,"about":"How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range."},{"name":"Glass","min":0,"max":1,"about":"The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube."},{"name":"Layers","min":1,"max":6,"about":"Colours each grain by when in the run it passed the neck, so the heap below grows rings of time."}],"start":[0,2,0,1],"measures":{"motion":0.0687,"detail":0.0755,"edges":0.7242,"complexity":0.1856,"coverage":0.3468,"colour":0.2248,"drift":0.051},"knobResponse":[0.0656,0.0293,0.076,0.03]},{"slug":"hyperbolic-band","title":"Hyperbolic Band","family":"space","round":28,"note":"칠각형이 한 꼭짓점에 셋씩 모인 쌍곡 평면을 띠 모형으로 세웠어요. 패널 너비 64 LED 에 평면의 폭이 다 들어가고, 쪽매는 띠를 따라 끝없이 올라가며 양옆 가장자리에서 한없이 작아져요. K3 이 {8,3}, {5,4}, {4,5}, {3,7} 로 쪽매를 바꾸고, 누르면 반 바퀴 돌아 제 모습으로 내려앉아요.","idea":"The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.","buttons":"K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.","code":"// ===== Patternflow pattern =====\n// Title:   Hyperbolic Band\n// Family:  space\n// Idea:    The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the band model of the hyperbolic plane, with the Poincaré disk (Eugenio Beltrami 1868, Henri Poincaré 1882) and Coxeter's regular {p,q} tilings, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1\n//\n// Knob 1: Hue. Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges.\n// Knob 2: Speed. How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that.\n// Knob 3: Tiling. Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}.\n// Knob 4: Lines. At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth.\n// Buttons: K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, log, asinh, acosh, abs, tanh, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The band |Im w| \u003c 1 goes onto the Poincaré disk by z = tanh(pi w / 4). Here\n// Im w runs across the panel, one unit to 32 LEDs, and Re w up it, so the\n// middle line of the band is the disk's real diameter, a geodesic. Along it a\n// unit of w is pi / 2 of hyperbolic length; at a distance v off it, a LED is\n// 1 / cos(pi v / 2) times longer.\nconst ZX = new Float64Array(N), ZY = new Float64Array(N), RHO = new Float64Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const v = (x + 0.5 - W / 2) / 32;\n  RHO[x] = PI / 64 / cos((PI * v) / 2);\n  for (let y = 0; y \u003c H; y++) {\n    const u = (H / 2 - y - 0.5) / 32, a = (PI * u) / 2, b = (PI * v) / 2, d = Math.cosh(a) + cos(b);\n    ZX[y * W + x] = Math.sinh(a) / d;\n    ZY[y * W + x] = sin(b) / d;\n  }\n}\n\n// The tilings. For each, the fundamental triangle of its reflection group:\n// the corner at the origin (a tile's centre) with angle pi/p between the real\n// axis and the ray at pi/p, and the circle mirror (the tile's edge) crossing\n// the real axis square at distance a. a is the tile's inradius, R its\n// circumradius, e half an edge. T is the shortest translation along the real\n// axis that is a symmetry: twice the gap between the mirrors that cross the\n// axis square, which depends on what the axis meets on its way.\nconst TIL = [[7, 3], [8, 3], [5, 4], [4, 5], [3, 7]].map(([p, q]) => {\n  const a = acosh(cos(PI / q) / sin(PI / p)), R = acosh(1 / (Math.tan(PI / p) * Math.tan(PI / q))), e = acosh(cos(PI / p) / sin(PI / q));\n  const m = tanh(a / 2), C = (m + 1 / m) / 2, r = (1 / m - m) / 2;\n  const T = p % 2 === 0 ? 2 * a : q % 2 === 0 ? 4 * (a + R) : 2 * (a + R + e);\n  const rc = new Float64Array(p), rs = new Float64Array(p);\n  for (let k = 0; k \u003c p; k++) (rc[k] = cos((2 * PI * k) / p)), (rs[k] = sin((2 * PI * k) / p));\n  // The wedge number, p added, taken round to 0..p-1.\n  const wr = new Int8Array(3 * p).map((_, i) => i % p);\n  return { p, q, a, R, C, r, r2: r * r, Tb: (2 * T) / PI, m0: (2 * a) / PI, rc, rs, wr, sf: sin(PI / p), cf: cos(PI / p) };\n});\n\nconst MAXIT = 40;\nconst CODE = new Int8Array(MAXIT);\nlet lutHue = NaN;\nconst LUT = new Float32Array(1024 * 3);\nfunction hsv(h, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const rgb = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = { s: 0, hue: 0, til: 0, lines: 0.06, speed: 2, spin: -1, m: 0, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.til = cl(Math.round(k[2]), 0, TIL.length - 1);\n  P.lines = cl(k[3], 0, 1);\n  const G = TIL[P.til];\n  // Tiles climb: the point of the tiling under the panel's centre moves down\n  // the band. 12 LEDs a second at Speed 2.\n  const slow = P.spin >= 0 ? 1 - 0.8 * sin(PI * P.spin) : 1;\n  P.s -= d * P.speed * 0.1875 * slow;\n  P.s -= G.Tb * floor(P.s / G.Tb + 0.5);\n  if (P.spin >= 0) {\n    P.spin += d / 3;\n    if (P.spin >= 1) P.spin = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) {\n    // The nearest point where a mirror crosses the axis square: the middle of\n    // an edge, or for even p a tile's centre too.\n    const h = G.Tb / 2;\n    P.m = G.m0 + h * Math.round((P.s - G.m0) / h);\n    P.spin = 0;\n  }\n}\n\n// Complex 2x2 Möbius matrices as [ar, ai, br, bi, cr, ci, dr, di].\nfunction mul(A, B) {\n  const o = [];\n  for (let i = 0; i \u003c 2; i++)\n    for (let j = 0; j \u003c 2; j++) {\n      const p = A[i * 4], pi = A[i * 4 + 1], q = A[i * 4 + 2], qi = A[i * 4 + 3];\n      const u = B[j * 2], ui = B[j * 2 + 1], v = B[4 + j * 2], vi = B[5 + j * 2];\n      o.push(p * u - pi * ui + q * v - qi * vi, p * ui + pi * u + q * vi + qi * v);\n    }\n  return o;\n}\nconst trans = (wb) => {\n  const t = tanh((PI * wb) / 4);\n  return [1, 0, t, 0, t, 0, 1, 0];\n};\nconst rot = (th) => [cos(th / 2), sin(th / 2), 0, 0, 0, 0, cos(th / 2), -sin(th / 2)];\n\n// The colour of a point of the tiling from where it sits on the band: cyan\n// glass on the middle line going through blue and violet to magenta at the\n// edges, and swinging a little along the band with the period T. Both are\n// kept by the half turn of K1 about any point where a mirror crosses the axis\n// square, and by the slide of one period.\nfunction hueAt(G, x, y) {\n  const u = (1 / PI) * log(((1 + x) ** 2 + y * y) / ((1 - x) ** 2 + y * y)), v = (2 / PI) * atan2(2 * y, 1 - x * x - y * y);\n  const h = 0.5 + 0.06 * cos((2 * PI * (u - G.m0)) / G.Tb) + 0.3 * sqrt(abs(v));\n  return (((h - floor(h)) * 1024) | 0) * 3;\n}\n\n// atan2 to a hundred-thousandth of a radian, which is all the fold needs to\n// pick its wedge: a point that lands a hair across a straight mirror is on\n// that mirror either way.\nfunction fat(y, x) {\n  const ax = x \u003c 0 ? -x : x, ay = y \u003c 0 ? -y : y, a = (ax \u003c ay ? ax : ay) / ((ax \u003c ay ? ay : ax) + 1e-300), q = a * a;\n  let r = ((-0.0464964749 * q + 0.15931422) * q - 0.327622764) * q * a + a;\n  if (ay > ax) r = PI / 2 - r;\n  if (x \u003c 0) r = PI - r;\n  return y \u003c 0 ? -r : r;\n}\n\nconst PREV = new Int8Array(MAXIT);\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const G = TIL[P.til], { p, C, r, r2, rc, rs, sf, cf, wr, a: ina, R: circ } = G, pp = p / PI;\n  const buf = P.buf, L = P.lines;\n  // From the panel's disk to the tiling: slide s along the axis, and during\n  // the K1 half turn, turn by th about the crossing m on the way.\n  let M = trans(P.s), mir = 0;\n  if (P.spin >= 0) {\n    const u = P.spin, th = PI * u * u * (3 - 2 * u);\n    M = mul(trans(P.m), mul(rot(th), trans(P.s - P.m)));\n    mir = sin(PI * u);\n  }\n  const [ar, ai, br, bi, cr, ci, dr, di] = M;\n  if (lutHue !== P.hue) for (let i = 0; i \u003c 1024; i++) hsv(i / 1024 + (lutHue = P.hue), LUT, i * 3);\n  const glassV = 1 - 0.78 * L, haze = 0.62 * glassV + 0.12 * L;\n  const lineR = 255 * L, lineG = 245 * L, lineB = 225 * L;\n  // The leading and the mirrors are lines of fixed hyperbolic width, box\n  // filtered over the LED, so they thin out with the tiles.\n  const hw = 0.035, mw = 0.025;\n  // The haze comes in as a tile's inradius drops from about three LEDs to one.\n  for (let x = 0; x \u003c W; x++) {\n    const rho = RHO[x], fog = sm(0.3 * ina, 1.1 * ina, rho);\n    let pn = -1, po = 0;\n    for (let y = 0; y \u003c H; y++) {\n      const i = y * W + x, zx = ZX[i], zy = ZY[i];\n      const nx = ar * zx - ai * zy + br, ny = ar * zy + ai * zx + bi;\n      const dx = cr * zx - ci * zy + dr, dy = cr * zy + ci * zx + di;\n      const qd = 1 / (dx * dx + dy * dy);\n      let X = (nx * dx + ny * dy) * qd, Y = (ny * dx - nx * dy) * qd;\n      let R = 0, Gc = 0, B = 0;\n      // Where the tiles are smaller than a LED, the glass's average colour.\n      if (fog > 0) {\n        const o = hueAt(G, X, Y);\n        R = LUT[o] * 255 * haze;\n        Gc = LUT[o + 1] * 255 * haze;\n        B = LUT[o + 2] * 255 * haze;\n      }\n      if (fog \u003c 1) {\n        // Fold into the fundamental triangle: turn into the wedge of angle\n        // pi/p, then reflect in the edge circle, until the edge is not crossed.\n        // Each turn and whether it flipped is kept, to find the tile's centre.\n        let n = 0, par = 0, ok = 1;\n        for (;;) {\n          const m = floor(fat(Y, X) * pp), f = m & 1, jj = wr[((m + 1) >> 1) + p];\n          const c = rc[jj], s = rs[jj], X1 = X * c + Y * s;\n          Y = Y * c - X * s;\n          X = X1;\n          if (f) Y = -Y;\n          par ^= f;\n          const ex = X - C, e2 = ex * ex + Y * Y;\n          if (e2 >= r2) break;\n          if (n >= MAXIT) {\n            ok = 0;\n            break;\n          }\n          CODE[n++] = jj * 2 + f;\n          const g = r2 / e2;\n          X = C + ex * g;\n          Y *= g;\n          par ^= 1;\n        }\n        if (!ok) {\n          const o = hueAt(G, X, Y);\n          (R = LUT[o] * 255 * haze), (Gc = LUT[o + 1] * 255 * haze), (B = LUT[o + 2] * 255 * haze);\n        } else {\n          // The same steps as the LED above: the same tile.\n          let same = n === pn;\n          for (let k = 0; same && k \u003c n; k++) same = CODE[k] === PREV[k];\n          if (!same) {\n            // The tile's centre is the origin taken back through the steps.\n            let cx = 0, cy = 0;\n            if (n > 0) {\n              cx = 1 / C;\n              for (let k = n - 1; k >= 0; k--) {\n                const jj = CODE[k] >> 1;\n                if (CODE[k] & 1) cy = -cy;\n                const c = rc[jj], s = rs[jj], x1 = cx * c - cy * s;\n                cy = cx * s + cy * c;\n                cx = x1;\n                if (k > 0) {\n                  const ex = cx - C, e2 = ex * ex + cy * cy, g = r2 / e2;\n                  cx = C + ex * g;\n                  cy *= g;\n                }\n              }\n            }\n            po = hueAt(G, cx, cy);\n            pn = n;\n            for (let k = 0; k \u003c n; k++) PREV[k] = CODE[k];\n          }\n          // Distances in the triangle: to the tile's edge, its centre, and the\n          // two straight mirrors that cut the tile into 2p facets.\n          const z2 = X * X + Y * Y, den = 1 - z2, zr = sqrt(z2);\n          const de = asinh((1 + z2 - 2 * C * X) / (r * den)), dc = log((1 + zr) / (1 - zr));\n          const dm = min(2 * Y, 2 * (X * sf - Y * cf)) / den;\n          const facet = 1 + (par ? -0.09 : 0.09) * min(1, dm / rho);\n          const gl = (1 - 0.42 * (dc / circ) ** 2) * facet * glassV * 255;\n          let r0 = LUT[po] * gl, g0 = LUT[po + 1] * gl, b0 = LUT[po + 2] * gl;\n          const cov = cl((min(de + rho / 2, hw) - max(de - rho / 2, -hw)) / rho, 0, 1);\n          r0 += (lineR - r0) * cov;\n          g0 += (lineG - g0) * cov;\n          b0 += (lineB - b0) * cov;\n          if (mir > 0) {\n            const mc = cl((min(dm + rho / 2, mw) - max(dm - rho / 2, -mw)) / rho, 0, 1) * mir * 0.85;\n            r0 += (250 - r0) * mc;\n            g0 += (235 - g0) * mc;\n            b0 += (200 - b0) * mc;\n          }\n          R = R * fog + r0 * (1 - fog);\n          Gc = Gc * fog + g0 * (1 - fog);\n          B = B * fog + b0 * (1 - fog);\n        }\n      }\n      const q = i * 3;\n      buf[q] = R;\n      buf[q + 1] = Gc;\n      buf[q + 2] = B;\n    }\n  }\n  for (let q = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, buf[q], buf[q + 1], buf[q + 2]);\n}\n","layer":{"id":"layer-hyperbolic-band","type":"code","name":"hyperbolic-band","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hyperbolic Band\n// Family:  space\n// Idea:    The hyperbolic plane tiled by heptagons, three at every corner, drawn in the band model, where the panel's 64 columns hold the whole width of the plane: the tiling slides up the band for ever and its tiles shrink to nothing at both side edges.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the band model of the hyperbolic plane, with the Poincaré disk (Eugenio Beltrami 1868, Henri Poincaré 1882) and Coxeter's regular {p,q} tilings, pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1\n//\n// Knob 1: Hue. Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges.\n// Knob 2: Speed. How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that.\n// Knob 3: Tiling. Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}.\n// Knob 4: Lines. At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth.\n// Buttons: K1 tap turns the plane half round about the edge middle nearest the panel's centre in three seconds, with the mirrors through the tile centres lit. A half turn about an edge middle is a symmetry of the tiling, so it lands back on itself.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, atan2, log, asinh, acosh, abs, tanh, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The band |Im w| \u003c 1 goes onto the Poincaré disk by z = tanh(pi w / 4). Here\n// Im w runs across the panel, one unit to 32 LEDs, and Re w up it, so the\n// middle line of the band is the disk's real diameter, a geodesic. Along it a\n// unit of w is pi / 2 of hyperbolic length; at a distance v off it, a LED is\n// 1 / cos(pi v / 2) times longer.\nconst ZX = new Float64Array(N), ZY = new Float64Array(N), RHO = new Float64Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  const v = (x + 0.5 - W / 2) / 32;\n  RHO[x] = PI / 64 / cos((PI * v) / 2);\n  for (let y = 0; y \u003c H; y++) {\n    const u = (H / 2 - y - 0.5) / 32, a = (PI * u) / 2, b = (PI * v) / 2, d = Math.cosh(a) + cos(b);\n    ZX[y * W + x] = Math.sinh(a) / d;\n    ZY[y * W + x] = sin(b) / d;\n  }\n}\n\n// The tilings. For each, the fundamental triangle of its reflection group:\n// the corner at the origin (a tile's centre) with angle pi/p between the real\n// axis and the ray at pi/p, and the circle mirror (the tile's edge) crossing\n// the real axis square at distance a. a is the tile's inradius, R its\n// circumradius, e half an edge. T is the shortest translation along the real\n// axis that is a symmetry: twice the gap between the mirrors that cross the\n// axis square, which depends on what the axis meets on its way.\nconst TIL = [[7, 3], [8, 3], [5, 4], [4, 5], [3, 7]].map(([p, q]) => {\n  const a = acosh(cos(PI / q) / sin(PI / p)), R = acosh(1 / (Math.tan(PI / p) * Math.tan(PI / q))), e = acosh(cos(PI / p) / sin(PI / q));\n  const m = tanh(a / 2), C = (m + 1 / m) / 2, r = (1 / m - m) / 2;\n  const T = p % 2 === 0 ? 2 * a : q % 2 === 0 ? 4 * (a + R) : 2 * (a + R + e);\n  const rc = new Float64Array(p), rs = new Float64Array(p);\n  for (let k = 0; k \u003c p; k++) (rc[k] = cos((2 * PI * k) / p)), (rs[k] = sin((2 * PI * k) / p));\n  // The wedge number, p added, taken round to 0..p-1.\n  const wr = new Int8Array(3 * p).map((_, i) => i % p);\n  return { p, q, a, R, C, r, r2: r * r, Tb: (2 * T) / PI, m0: (2 * a) / PI, rc, rs, wr, sf: sin(PI / p), cf: cos(PI / p) };\n});\n\nconst MAXIT = 40;\nconst CODE = new Int8Array(MAXIT);\nlet lutHue = NaN;\nconst LUT = new Float32Array(1024 * 3);\nfunction hsv(h, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h);\n  const rgb = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\nexport function setup(params) {\n  params.s = { s: 0, hue: 0, til: 0, lines: 0.06, speed: 2, spin: -1, m: 0, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.til = cl(Math.round(k[2]), 0, TIL.length - 1);\n  P.lines = cl(k[3], 0, 1);\n  const G = TIL[P.til];\n  // Tiles climb: the point of the tiling under the panel's centre moves down\n  // the band. 12 LEDs a second at Speed 2.\n  const slow = P.spin >= 0 ? 1 - 0.8 * sin(PI * P.spin) : 1;\n  P.s -= d * P.speed * 0.1875 * slow;\n  P.s -= G.Tb * floor(P.s / G.Tb + 0.5);\n  if (P.spin >= 0) {\n    P.spin += d / 3;\n    if (P.spin >= 1) P.spin = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) {\n    // The nearest point where a mirror crosses the axis square: the middle of\n    // an edge, or for even p a tile's centre too.\n    const h = G.Tb / 2;\n    P.m = G.m0 + h * Math.round((P.s - G.m0) / h);\n    P.spin = 0;\n  }\n}\n\n// Complex 2x2 Möbius matrices as [ar, ai, br, bi, cr, ci, dr, di].\nfunction mul(A, B) {\n  const o = [];\n  for (let i = 0; i \u003c 2; i++)\n    for (let j = 0; j \u003c 2; j++) {\n      const p = A[i * 4], pi = A[i * 4 + 1], q = A[i * 4 + 2], qi = A[i * 4 + 3];\n      const u = B[j * 2], ui = B[j * 2 + 1], v = B[4 + j * 2], vi = B[5 + j * 2];\n      o.push(p * u - pi * ui + q * v - qi * vi, p * ui + pi * u + q * vi + qi * v);\n    }\n  return o;\n}\nconst trans = (wb) => {\n  const t = tanh((PI * wb) / 4);\n  return [1, 0, t, 0, t, 0, 1, 0];\n};\nconst rot = (th) => [cos(th / 2), sin(th / 2), 0, 0, 0, 0, cos(th / 2), -sin(th / 2)];\n\n// The colour of a point of the tiling from where it sits on the band: cyan\n// glass on the middle line going through blue and violet to magenta at the\n// edges, and swinging a little along the band with the period T. Both are\n// kept by the half turn of K1 about any point where a mirror crosses the axis\n// square, and by the slide of one period.\nfunction hueAt(G, x, y) {\n  const u = (1 / PI) * log(((1 + x) ** 2 + y * y) / ((1 - x) ** 2 + y * y)), v = (2 / PI) * atan2(2 * y, 1 - x * x - y * y);\n  const h = 0.5 + 0.06 * cos((2 * PI * (u - G.m0)) / G.Tb) + 0.3 * sqrt(abs(v));\n  return (((h - floor(h)) * 1024) | 0) * 3;\n}\n\n// atan2 to a hundred-thousandth of a radian, which is all the fold needs to\n// pick its wedge: a point that lands a hair across a straight mirror is on\n// that mirror either way.\nfunction fat(y, x) {\n  const ax = x \u003c 0 ? -x : x, ay = y \u003c 0 ? -y : y, a = (ax \u003c ay ? ax : ay) / ((ax \u003c ay ? ay : ax) + 1e-300), q = a * a;\n  let r = ((-0.0464964749 * q + 0.15931422) * q - 0.327622764) * q * a + a;\n  if (ay > ax) r = PI / 2 - r;\n  if (x \u003c 0) r = PI - r;\n  return y \u003c 0 ? -r : r;\n}\n\nconst PREV = new Int8Array(MAXIT);\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const G = TIL[P.til], { p, C, r, r2, rc, rs, sf, cf, wr, a: ina, R: circ } = G, pp = p / PI;\n  const buf = P.buf, L = P.lines;\n  // From the panel's disk to the tiling: slide s along the axis, and during\n  // the K1 half turn, turn by th about the crossing m on the way.\n  let M = trans(P.s), mir = 0;\n  if (P.spin >= 0) {\n    const u = P.spin, th = PI * u * u * (3 - 2 * u);\n    M = mul(trans(P.m), mul(rot(th), trans(P.s - P.m)));\n    mir = sin(PI * u);\n  }\n  const [ar, ai, br, bi, cr, ci, dr, di] = M;\n  if (lutHue !== P.hue) for (let i = 0; i \u003c 1024; i++) hsv(i / 1024 + (lutHue = P.hue), LUT, i * 3);\n  const glassV = 1 - 0.78 * L, haze = 0.62 * glassV + 0.12 * L;\n  const lineR = 255 * L, lineG = 245 * L, lineB = 225 * L;\n  // The leading and the mirrors are lines of fixed hyperbolic width, box\n  // filtered over the LED, so they thin out with the tiles.\n  const hw = 0.035, mw = 0.025;\n  // The haze comes in as a tile's inradius drops from about three LEDs to one.\n  for (let x = 0; x \u003c W; x++) {\n    const rho = RHO[x], fog = sm(0.3 * ina, 1.1 * ina, rho);\n    let pn = -1, po = 0;\n    for (let y = 0; y \u003c H; y++) {\n      const i = y * W + x, zx = ZX[i], zy = ZY[i];\n      const nx = ar * zx - ai * zy + br, ny = ar * zy + ai * zx + bi;\n      const dx = cr * zx - ci * zy + dr, dy = cr * zy + ci * zx + di;\n      const qd = 1 / (dx * dx + dy * dy);\n      let X = (nx * dx + ny * dy) * qd, Y = (ny * dx - nx * dy) * qd;\n      let R = 0, Gc = 0, B = 0;\n      // Where the tiles are smaller than a LED, the glass's average colour.\n      if (fog > 0) {\n        const o = hueAt(G, X, Y);\n        R = LUT[o] * 255 * haze;\n        Gc = LUT[o + 1] * 255 * haze;\n        B = LUT[o + 2] * 255 * haze;\n      }\n      if (fog \u003c 1) {\n        // Fold into the fundamental triangle: turn into the wedge of angle\n        // pi/p, then reflect in the edge circle, until the edge is not crossed.\n        // Each turn and whether it flipped is kept, to find the tile's centre.\n        let n = 0, par = 0, ok = 1;\n        for (;;) {\n          const m = floor(fat(Y, X) * pp), f = m & 1, jj = wr[((m + 1) >> 1) + p];\n          const c = rc[jj], s = rs[jj], X1 = X * c + Y * s;\n          Y = Y * c - X * s;\n          X = X1;\n          if (f) Y = -Y;\n          par ^= f;\n          const ex = X - C, e2 = ex * ex + Y * Y;\n          if (e2 >= r2) break;\n          if (n >= MAXIT) {\n            ok = 0;\n            break;\n          }\n          CODE[n++] = jj * 2 + f;\n          const g = r2 / e2;\n          X = C + ex * g;\n          Y *= g;\n          par ^= 1;\n        }\n        if (!ok) {\n          const o = hueAt(G, X, Y);\n          (R = LUT[o] * 255 * haze), (Gc = LUT[o + 1] * 255 * haze), (B = LUT[o + 2] * 255 * haze);\n        } else {\n          // The same steps as the LED above: the same tile.\n          let same = n === pn;\n          for (let k = 0; same && k \u003c n; k++) same = CODE[k] === PREV[k];\n          if (!same) {\n            // The tile's centre is the origin taken back through the steps.\n            let cx = 0, cy = 0;\n            if (n > 0) {\n              cx = 1 / C;\n              for (let k = n - 1; k >= 0; k--) {\n                const jj = CODE[k] >> 1;\n                if (CODE[k] & 1) cy = -cy;\n                const c = rc[jj], s = rs[jj], x1 = cx * c - cy * s;\n                cy = cx * s + cy * c;\n                cx = x1;\n                if (k > 0) {\n                  const ex = cx - C, e2 = ex * ex + cy * cy, g = r2 / e2;\n                  cx = C + ex * g;\n                  cy *= g;\n                }\n              }\n            }\n            po = hueAt(G, cx, cy);\n            pn = n;\n            for (let k = 0; k \u003c n; k++) PREV[k] = CODE[k];\n          }\n          // Distances in the triangle: to the tile's edge, its centre, and the\n          // two straight mirrors that cut the tile into 2p facets.\n          const z2 = X * X + Y * Y, den = 1 - z2, zr = sqrt(z2);\n          const de = asinh((1 + z2 - 2 * C * X) / (r * den)), dc = log((1 + zr) / (1 - zr));\n          const dm = min(2 * Y, 2 * (X * sf - Y * cf)) / den;\n          const facet = 1 + (par ? -0.09 : 0.09) * min(1, dm / rho);\n          const gl = (1 - 0.42 * (dc / circ) ** 2) * facet * glassV * 255;\n          let r0 = LUT[po] * gl, g0 = LUT[po + 1] * gl, b0 = LUT[po + 2] * gl;\n          const cov = cl((min(de + rho / 2, hw) - max(de - rho / 2, -hw)) / rho, 0, 1);\n          r0 += (lineR - r0) * cov;\n          g0 += (lineG - g0) * cov;\n          b0 += (lineB - b0) * cov;\n          if (mir > 0) {\n            const mc = cl((min(dm + rho / 2, mw) - max(dm - rho / 2, -mw)) / rho, 0, 1) * mir * 0.85;\n            r0 += (250 - r0) * mc;\n            g0 += (235 - g0) * mc;\n            b0 += (200 - b0) * mc;\n          }\n          R = R * fog + r0 * (1 - fog);\n          Gc = Gc * fog + g0 * (1 - fog);\n          B = B * fog + b0 * (1 - fog);\n        }\n      }\n      const q = i * 3;\n      buf[q] = R;\n      buf[q + 1] = Gc;\n      buf[q + 2] = B;\n    }\n  }\n  for (let q = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, buf[q], buf[q + 1], buf[q + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Tiling=0..4, Lines=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the glass round the colour wheel. At 0 the tiles on the middle line are cyan and blue, and they go violet and then magenta out towards the edges."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the plane slides along the band. At 2 the tiles on the middle line climb 12 LEDs a second; at 0.2 a tenth of that."},{"name":"Tiling","min":0,"max":4,"about":"Which regular tiling {p,q}, p-gons meeting q at a corner: heptagons three at a corner {7,3}, then octagons {8,3}, pentagons four at a corner {5,4}, squares five at a corner {4,5} and triangles seven at a corner {3,7}."},{"name":"Lines","min":0,"max":1,"about":"At 0 dark leading between bright glass. Turned up, the leading goes pewter and then white, and the glass dims to a fifth."}],"start":[0,2,0,0.06],"measures":{"motion":1.4373,"detail":0.1076,"edges":0.286,"complexity":2.1332,"coverage":0.9802,"colour":0.6419,"drift":0.0932},"knobResponse":[0.5855,0.187,0.2223,0.3482]},{"slug":"iceberg","title":"Iceberg","family":"polar","round":26,"note":"물높이에서 자른 빙산이 9분의 1만 물 위에 내밀고 펭귄을 얹은 채 너울에 흔들리다, 판이 떨어져 물보라를 일으켜요. 물 아래 몸은 푸른 얼음 줄무늬와 탄산처럼 오르는 거품 줄기로 패널 바닥까지 내려가요. K1 은 백야의 해에서 오로라 뜬 극야로, 버튼은 판을 떼어 내요.","idea":"An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.","buttons":"K1 tap breaks a slab off the berg now.","code":"// ===== Patternflow pattern =====\n// Title:   Iceberg\n// Family:  polar\n// Idea:    An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the schoolbook drawing of an iceberg with eight ninths of it under the water\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1\n//\n// Knob 1: Light. Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora.\n// Knob 2: Speed. At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower.\n// Knob 3: Shape. A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom.\n// Knob 4: Swell. How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea.\n// Buttons: K1 tap breaks a slab off the berg now.\n\nconst W = 64, H = 128, N = W * H;\n// Sea level, horizon, the berg's middle; its grid (u across, v down from sea level) turns about row PV.\nconst WL = 30, HZ = 26, BX = 28, BW = 64, BH = 128, U0 = -32, V0 = -28, PV = 34, NB = BW * BH;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Caustic noise; the colour the water leaves at each row.\nconst CT = new Float32Array(4096).map((_, k) => vn(((k & 63) * 20) / 64, ((k >> 6) * 20) / 64, 20));\nconst AT = new Float32Array(H * 3).map((_, q) => exp(-max(0, floor(q / 3) + 0.5 - WL) / [26, 75, 170][q % 3]));\n\n// The top: a snow plain with sheer cliffs, or two spires.\nconst PIN = [[-13.5, 1], [-12, -3], [-10, -6], [-7.5, -10], [-5.5, -16], [-3.5, -19.5], [-1.5, -17.5], [0.5, -11], [2.5, -7.5], [4.5, -8.5], [6.5, -13], [8, -16], [9.5, -15], [11.5, -8], [13, -2.5], [14, 1]];\nfunction topAt(u, s) {\n  let i = 1;\n  while (i \u003c PIN.length - 1 && u > PIN[i][0]) i++;\n  const [a, b] = PIN[i - 1], [c, e] = PIN[i], A = u > 0 ? u : -u * 1.05;\n  const tab = A \u003c 15 ? -11 + 0.8 * (vn(u * 0.3, 3) - 0.5) + 1.3 * sm(12.5, 15, A) : mix(-9.7, 1, cl((A - 15) / 1.1, 0, 1));\n  return mix(tab, b + (e - b) * cl((u - a) / (c - a), 0, 1), s);\n}\n// Half widths under the water, tabular and pinnacle, a little lopsided.\nconst CV = [0, 5, 12, 22, 34, 46, 58, 68, 76, 82, 86];\nconst WT = [16.6, 20.5, 22, 22.5, 21.5, 21, 19.5, 16.5, 12.5, 8, 0];\nconst WP = [13.6, 15.5, 16.5, 16.5, 15.5, 14, 12, 9.5, 7, 4, 0];\nconst J = (h) => CV.map((_, i) => (i ? 0.88 + 0.24 * hash(i, h) : 1.03)), JL = J(5), JR = J(9);\nfunction edgeAt(v, s) {\n  const q = v / (1 + 0.1 * s);\n  if (v \u003c 0 || q >= 86) return [0, 0];\n  let i = 0;\n  while (CV[i + 1] \u003c= q) i++;\n  const f = (q - CV[i]) / (CV[i + 1] - CV[i]), w = mix(mix(WT[i], WP[i], s), mix(WT[i + 1], WP[i + 1], s), f), c = 2 * sin(v * 0.05);\n  return [c - w * mix(JL[i], JL[i + 1], f), c + w * mix(JR[i], JR[i + 1], f)];\n}\n\n// Midnight sun, noon, twilight: sky stops, lit and shaded face, snow, water top\n// and bottom, cloud lit and dark, shafts, light's side, ice, caustics.\nconst KF = [\n  [[[0, 28, 50, 116], [10, 100, 104, 166], [19, 232, 158, 132], [26, 250, 200, 128]], [246, 206, 158], [70, 118, 196], [242, 226, 206], [14, 86, 114], [3, 12, 40], [250, 196, 168], [118, 104, 150], [1, 1, 1, 1]],\n  [[[0, 118, 130, 148], [10, 156, 164, 178], [19, 186, 192, 200], [26, 200, 205, 210]], [214, 220, 226], [148, 166, 192], [226, 230, 236], [28, 108, 132], [5, 20, 48], [212, 216, 222], [128, 134, 150], [0.35, 0, 1.05, 0.5]],\n  [[[0, 6, 12, 42], [10, 16, 30, 80], [19, 38, 62, 120], [26, 62, 94, 148]], [160, 188, 232], [58, 84, 148], [176, 198, 236], [8, 44, 80], [2, 6, 24], [70, 86, 130], [26, 34, 66], [0.45, -1, 0.62, 0.5]],\n].map((k) => Float64Array.from(k.flat(2)));\n// Glacier ice; the pinnacle is older ice, bluer all through.\nconst BASE = [92, 192, 226], PALE = [190, 234, 246], CLEAR = [30, 120, 214], VEIN = [12, 50, 172], RIM = [40, 64, 60], TINT = [0.7, 0.9, 1.06];\nconst BLK = [12, 14, 22], WHT = [226, 228, 236], SUN = [255, 214, 150], MOON = [224, 228, 214], AUR = [30, 190, 110], LT = [0.55, 0.92, 1];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), pen = () => Object.fromEntries(\"on h u f st tu x y vx vy tt nb lx ly lt\".split(\" \").map((k) => [k, 0.5]));\n  params.s = {\n    f: F32(N * 3), ba: F32(N), sf: F32(W), rt: F32(176), row: F32(H * 3), P: new Float64Array(41), ex: F32(BH * 2), TT: F32(BW * 4 + 1),\n    M: F32(NB), IC: [F32(NB), F32(NB), F32(NB)], SN: F32(NB), NX: F32(NB), AL: F32(NB), D: F32(NB),\n    s: -1, t: 0.01, th: 0.01, thv: 0.01, thq: 0.01, by: 0.01, byv: 0.01, A: 0.5, k1: -1, k4: 0.06, live: 0, kx: 49.5, ky: 112.5,\n    next: 3.4, nd: 0.5, pend: null, crack: 0.5, cuts: [], pieces: [], bubs: [], spray: [], rings: [], vacc: [0.5, 0.5, 0.5, 0.5, 0.5], dv: null,\n    cl: [0, 1, 2, 3].map((k) => ({ x: 6 + k * 17 + 6 * rnd(), y: 5 + ((k * 5) % 13) + 2 * rnd(), w: 7 + 5 * rnd(), h: 1.7 + rnd() })),\n    kr: Array.from({ length: 46 }, () => ({ p: rnd() * 6.3, q: rnd() * 6.3, w: 0.4 + 0.5 * rnd(), r: 1 + 6 * rnd() })),\n    pens: [0, 1, 2, 3, 4].map((i) => Object.assign(pen(), { f: i % 2 ? 1 : -1, st: 0 })),\n  };\n}\n\nconst toW = (S, u, v) => [BX + cos(S.th) * u - sin(S.th) * (v - PV), WL + PV + S.by + sin(S.th) * u + cos(S.th) * (v - PV)];\n// What the cuts leave at u, v. Cuts heal outward as the berg turns.\nfunction cutA(cuts, u, v) {\n  let a = 1;\n  for (const c of cuts) if (v \u003c 0.6 && (u - c.cx) ** 2 + (v - c.cy) ** 2 \u003c 225) a *= cl(0.5 - (c.nx * u + c.ny * v - c.d), 0, 1);\n  return a;\n}\nconst topB = (S, u) => S.TT[cl(round((u - U0) * 4), 0, BW * 4)];\nfunction edgeU(S, side) {\n  for (let a = 0; a \u003c 26; a += 0.5) if (topB(S, side * a) > -1.5 || cutA(S.cuts, side * a, topB(S, side * a) + 0.7) \u003c 0.5) return side * (a - 1);\n  return side * 12;\n}\nconst surf = (S, x) => S.sf[cl(round(x), 0, W - 1)];\n\nfunction build(S, s) {\n  S.s = s;\n  const { M, SN, NX, AL, D, TT, ex } = S, E = [], face = [];\n  for (let q = 0; q \u003c= BW * 4; q++) TT[q] = topAt(U0 + q / 4, s);\n  for (let q = 0; q \u003c BH * 4; q++) E.push(edgeAt(V0 + (q + 0.5) / 4, s));\n  for (let k = 0; k \u003c NB; k++) {\n    let n = 0;\n    for (let j = 0; j \u003c 16; j++) {\n      const qu = (k & 63) * 4 + (j & 3), qv = (k >> 6) * 4 + (j >> 2), u = U0 + (qu + 0.5) / 4, v = V0 + (qv + 0.5) / 4;\n      if (v \u003c 0 ? v >= TT[qu] : u > E[qv][0] && u \u003c E[qv][1]) n++;\n    }\n    M[k] = n / 16;\n  }\n  // Distance to open water: a glowing rim, a darker core.\n  for (let k = 0; k \u003c NB; k++) D[k] = M[k] \u003c 0.5 ? 0 : 20;\n  for (let k = BW + 1; k \u003c NB - 1; k++) D[k] = min(D[k], D[k - 1] + 1, D[k - BW] + 1, D[k - BW - 1] + 1.4, D[k - BW + 1] + 1.4);\n  for (let k = NB - BW - 2; k > 0; k--) D[k] = min(D[k], D[k + 1] + 1, D[k + BW] + 1, D[k + BW + 1] + 1.4, D[k + BW - 1] + 1.4);\n  for (let j = 0; j \u003c BH * 2; j++) ex[j] = j & 1 ? -99 : 99;\n  for (let k = 0; k \u003c NB; k++) {\n    const gu = k & 63, gv = k >> 6, u = U0 + gu + 0.5, v = V0 + gv + 0.5;\n    if (M[k] \u003c= 0) continue;\n    // Facets: lit or shaded in the air; below, melt scallops lit on their lower walls.\n    let bd = 1e9, id = 0, sv = 0;\n    for (let j = 0; j \u003c 9; j++) {\n      const cu = floor(u / 5) + (j % 3) - 1, cv = floor(v / 5) + floor(j / 3) - 1, w = (cv + hash(cv, cu + 50)) * 5, dd = (u - (cu + hash(cu, cv)) * 5) ** 2 + (v - w) ** 2;\n      if (dd \u003c bd) (bd = dd), (id = hash(cu + 99, cv)), (sv = w);\n    }\n    const qu = gu * 4 + 2, sl = TT[min(BW * 4, qu + 2)] - TT[max(0, qu - 2)], dep = v - TT[qu];\n    NX[k] = mix(sl / sqrt(1 + sl * sl), cl(u / 24 + 1.3 * (id - 0.5), -1, 1), sm(1, 3, dep));\n    SN[k] = sm(2.4, 1.3, dep) * sm(1.6, 0.8, abs(sl));\n    AL[k] = (0.86 + 0.14 * hash(gu, 7)) * (0.88 + 0.24 * id) * (v > -1.5 && v \u003c 0 ? 0.7 : 1);\n    // Layers of white and clear blue ice, dark veins of refrozen meltwater.\n    const f = (v + u * 0.14 + 7 * vn(u * 0.04, v * 0.025 + 9)) / 8, n = floor(f), band = f - n, h1 = hash(n, 5);\n    const mot = (0.84 + 0.3 * vn(u * 0.1 + 3, v * 0.07)) * (1 + 0.2 * cl((v - sv) / 3, -1, 1));\n    const pale = sm(0.5, 0.6, band) * (1 - sm(0.6 + 0.3 * h1, 0.7 + 0.3 * h1, band)) * sm(0.25, 0.5, hash(n, 6)), clear = (1 - sm(0.2, 0.45, band)) * sm(0.4, 0.8, h1);\n    const vein = max(sm(0.11, 0.03, abs(vn(u * 0.08 + 11, v * 0.045) * 2 - 1)), 0.8 * sm(0.1, 0.025, abs(vn(u * 0.045 + 31, v * 0.11 + 5) * 2 - 1))) * sm(0.25, 0.5, vn(u * 0.035 + 20, v * 0.03));\n    const dk = D[k], core = (0.5 + 0.5 * exp(-max(0, dk - 1) / 5)) * (gv > 1 && M[k - 2 * BW] \u003c 0.5 ? 1.3 : 1) * (gv \u003c BH - 2 && M[k + 2 * BW] \u003c 0.5 ? 0.76 : 1);\n    for (let c = 0; c \u003c 3; c++) S.IC[c][k] = mix(mix(mix(BASE[c] * mot, PALE[c], 0.8 * pale), CLEAR[c], 0.6 * clear), VEIN[c], 0.9 * vein) * core * mix(1, TINT[c], s) + exp(-dk / 1.2) * RIM[c];\n    if (v > 3 && v \u003c 80 && dk > 1.5) face.push([u, v]);\n    (ex[gv * 2] = min(ex[gv * 2], u)), (ex[gv * 2 + 1] = max(ex[gv * 2 + 1], u));\n  }\n  S.vents = [0, 1, 2, 3, 4].map((i) => face[floor(hash(i, 41) * face.length)]);\n  // Penguin places: flat, three columns apart, clear of the slabs.\n  const slots = [];\n  for (const u of [0.5, -6, 6.5, -3, 3.5, -8, 8, -1.5, 2, -4.5, 5]) {\n    const q = round((u - U0) * 4);\n    if (abs(TT[q + 6] - TT[q - 6]) \u003c 1.6 && TT[q] \u003c -2.5 && TT[q] > -15 && slots.length \u003c 5 && slots.every((w) => abs(w - u) > 2.9)) slots.push(u + 0.01);\n  }\n  S.pens.forEach((p, i) => ((p.on = i \u003c slots.length ? 1 : 0), p.on && (p.h = slots[i]), p.st || (p.u = p.h)));\n}\n\nconst bub = (S, x, y, vy = -(4.5 + 5 * rnd()), wb = 0.6) => S.bubs.length \u003c 260 && S.bubs.push({ x, y, vy, wb, ph: rnd() * 6.3, dead: 0 });\nfunction splash(S, x, v, g) {\n  const y = surf(S, x) - 0.5;\n  for (let k = 0; k \u003c 7 + 29 * g; k++) S.spray.push({ x: x + (rnd() - 0.5) * (2 + 3 * g), y, vx: (rnd() - 0.5) * (10 + 14 * g), vy: -(6 + rnd() * (9 + 17 * g)), l: 0.99 });\n  S.rings.push({ x, t: 0.01, a: g ? min(3.2, 0.1 * v + 1.4) : 0.6 });\n  for (let k = 0; k \u003c 8 + 22 * g; k++) bub(S, x + (rnd() - 0.5) * 6, y + 1 + rnd() * (5 + 9 * g));\n}\n\n// A crack opens behind a slab of outer ice; it goes half a second later.\nfunction calve(S) {\n  if (S.pend || S.pieces.some((p) => p.f)) return;\n  let side = rnd() \u003c 0.5 ? -1 : 1;\n  if (S.cuts.some((c) => c.side === side && c.age \u003c 40)) side = -side;\n  let ue = edgeU(S, side);\n  if (abs(ue) \u003c 12) (side = -side), (ue = edgeU(S, side));\n  if (abs(ue) \u003c 12) return;\n  const px = side * max(9, abs(ue) - 3.5 - 3 * rnd()), nx = side * 0.993, d = nx * px + 0.6;\n  const c = { nx, ny: -0.12, d, d0: d, cx: px, cy: -5, side, age: 0.01, bu: 0.5, bv: 0.5, ex: 0.5, hx: 0.5, hy: 0.5 };\n  let u0 = 99, u1 = -99, v0 = 99, v1 = -99;\n  for (let k = 0; k \u003c NB; k++) {\n    const u = U0 + (k & 63) + 0.5, v = V0 + (k >> 6) + 0.5;\n    if (S.M[k] > 0.5 && cutA([c], u, v) \u003c 0.5 && cutA(S.cuts, u, v) > 0.5) (u0 = min(u0, u)), (u1 = max(u1, u)), (v0 = min(v0, v)), (v1 = max(v1, v));\n  }\n  if (u1 - u0 \u003c 1.5) return;\n  Object.assign(c, { bu: (u0 + u1) / 2, bv: (v0 + v1) / 2, hx: (u1 - u0) / 2 + 0.5, hy: (v1 - v0) / 2 + 0.5 });\n  c.ex = hypot(c.hx, c.hy) + 1.5;\n  (S.pend = c), (S.crack = 0.5);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d), A = S.A, sf = S.sf;\n  // The swell, and rings running out from each splash.\n  const swell = (x) => A * (0.7 * sin(x * 0.15 - t * 1.4) + 0.3 * sin(x * 0.34 + t * 0.95 + 1));\n  for (let x = 0; x \u003c W; x++) {\n    sf[x] = WL + swell(x + 0.5);\n    for (const r of S.rings) {\n      const q = abs(x + 0.5 - r.x) - 11 * r.t;\n      sf[x] += r.a * exp(-r.t * 0.5 - (q / 5) ** 2) * sin(q * 0.9);\n    }\n  }\n  for (const r of S.rings) r.t += d;\n  S.rings = S.rings.filter((r) => r.t \u003c 7);\n  S.thv += (-2.4 * (S.th - S.thq - 0.022 * A * cos(BX * 0.15 - t * 1.4)) - 0.45 * S.thv) * d;\n  S.byv += (-3 * (S.by - 0.5 * swell(BX)) - 1.2 * S.byv) * d;\n  (S.th += S.thv * d), (S.by += S.byv * d), (S.thq *= exp(-d / 60));\n  for (const c of S.cl) (c.x += (0.7 + 3 * S.k4) * d) > W + c.w + 2 && (c.x = -c.w - 2);\n\n  if (S.live && (S.next -= d) \u003c= 0) calve(S), (S.next = 15 + 10 * rnd());\n  if (S.pend && (S.crack -= d) \u003c= 0) {\n    // The berg loses weight on that side, rocks and settles leaning a little.\n    const c = S.pend, [x, y] = toW(S, c.bu, c.bv);\n    S.cuts.push(c);\n    S.pieces.push({ c, x, y, vx: c.side * 2.5, vy: 0.5, a: S.th, va: c.side * (1.4 + rnd()), f: 1, ta: 0.5 });\n    (S.pend = null), (S.thv -= c.side * 0.1), (S.thq -= c.side * 0.012), (S.byv -= 1.6);\n  }\n  for (const c of S.cuts) (c.age += d) > 20 && (c.d += d * 0.12);\n  S.cuts = S.cuts.filter((c) => c.age \u003c 130);\n  for (const p of S.pieces) {\n    if (p.f) {\n      (p.vy += 45 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.a += p.va * d);\n      if (p.y > surf(S, p.x) - 1) splash(S, p.x, p.vy, 1), (p.f = 0), (p.vy *= 0.3), (p.ta = round(p.a / (PI / 2)) * (PI / 2));\n    } else {\n      const c = p.c, hy = abs(sin(p.a - S.th)) * c.hx + abs(cos(p.a - S.th)) * c.hy;\n      (p.vy += (-5 * (p.y - surf(S, p.x) - 0.75 * hy) - 1.8 * p.vy) * d), (p.va += (-4 * (p.a - p.ta) - 1.6 * p.va) * d);\n      (p.y += p.vy * d), (p.a += p.va * d), (p.x += c.side * 1.4 * d);\n    }\n  }\n  S.pieces = S.pieces.filter((p) => abs(p.x - W / 2) \u003c W / 2 + p.c.ex + 2);\n  S.vents.forEach((v, i) => {\n    if (sin(t * 0.6 + i * 2.1) > -0.2) for (S.vacc[i] += d * 3.5; S.vacc[i] >= 1; S.vacc[i]--) bub(S, ...toW(S, v[0], v[1]), -(5 + 0.6 * i + 1.2 * rnd()), 0.9);\n  });\n  for (const b of S.bubs) {\n    (b.y += b.vy * d), (b.x += sin(t * 6 + b.ph) * b.wb * d);\n    if (b.y \u003c surf(S, b.x) + 0.3 || b.x \u003c -1 || b.x > W + 1) b.dead = 1;\n  }\n  S.bubs = S.bubs.filter((b) => !b.dead);\n  for (const p of S.spray) (p.vy += 50 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 0.8);\n  S.spray = S.spray.filter((p) => p.l > 0 && !(p.vy > 0 && p.y > surf(S, p.x) + 0.5));\n  (S.kx = 49 + 8 * sin(t * 0.1)), (S.ky = 112 + 7 * sin(t * 0.13 + 1));\n  penguins(S, d, t);\n}\n\n// Now and then a penguin waddles to the edge, jumps, swims to the krill and leaps back.\nfunction penguins(S, d, t) {\n  for (const p of S.pens) if (!p.st && rnd() \u003c d * 0.2) p.f = -p.f;\n  let p = S.dv;\n  if (!p && S.live && (S.nd -= d) \u003c= 0) {\n    const free = S.pens.filter((q) => !q.st && q.on);\n    if (!free.length) return;\n    p = S.dv = free.reduce((a, q) => (q.u > a.u ? q : a));\n    Object.assign(p, { st: 1, tu: edgeU(S, 1) - 0.5 });\n  }\n  if (!p) return;\n  if (p.st === 1 || p.st === 5) {\n    const g = p.st === 1 ? p.tu : p.h;\n    p.f = g > p.u ? 1 : -1;\n    p.u += p.f * min(abs(g - p.u), 4 * d);\n    if (abs(g - p.u) \u003c 0.01) {\n      if (p.st === 5) (p.st = 0), (S.dv = null), (S.nd = 5 + 6 * rnd());\n      else ([p.x, p.y] = toW(S, p.u, topB(S, p.u) - 0.3)), Object.assign(p, { st: 2, vx: 7, vy: -9 });\n    }\n  } else if (p.st === 2) {\n    (p.vy += 40 * d), (p.x += p.vx * d), (p.y += p.vy * d);\n    if (p.vy > 0 && p.y > surf(S, p.x)) splash(S, p.x, 8, 0), Object.assign(p, { st: 3, vy: 12, vx: 3, tt: 0.01, nb: 0.01 });\n  } else if (p.st === 3) {\n    const back = (p.tt += d) > 5, dx = (back ? W - 6 : S.kx + 5 * cos(t * 2.2)) - p.x, dy = (back ? WL - 2 : S.ky + 3 * sin(t * 2.2)) - p.y, r = hypot(dx, dy) + 1e-6, sp = back ? 17 : 14;\n    (p.vx += ((dx / r) * sp - p.vx) * min(1, 2.2 * d)), (p.vy += ((dy / r) * sp - p.vy) * min(1, 2.2 * d));\n    (p.x = cl(p.x + p.vx * d, 1, W - 2)), (p.y = min(p.y + p.vy * d, H - 3));\n    if ((p.nb += d) > 0.07) (p.nb = 0), bub(S, p.x - p.vx * 0.12, p.y - p.vy * 0.12);\n    if (back && p.y \u003c surf(S, p.x) + 1.5) splash(S, p.x, 6, 0), Object.assign(p, { st: 4, lx: p.x, ly: p.y, lt: 0.01, u: edgeU(S, 1) - 1 });\n  } else {\n    const [lx, ly] = toW(S, p.u, topB(S, p.u) - 0.3), l = (p.lt = min(1, p.lt + d / 0.7));\n    (p.vx = lx - p.x), (p.vy = ly - p.y), (p.x = mix(p.lx, lx, l)), (p.y = mix(p.ly, ly, l) - 40 * l * (1 - l));\n    if (l >= 1) p.st = 5;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 0, 1);\n  if (abs(k3 - S.s) > 0.01) build(S, k3);\n  (S.k4 = cl(k[3], 0, 1)), (S.A = 0.45 + 3 * S.k4);\n  if (k1 !== S.k1) {\n    const [a, b, u] = k1 \u003c 0.5 ? [0, 1, sm(0, 0.5, k1)] : [1, 2, sm(0.5, 1, k1)];\n    for (let j = 0; j \u003c 41; j++) S.P[j] = mix(KF[a][j], KF[b][j], u);\n    S.k1 = k1;\n  }\n  for (; !S.live; S.live = S.t > 4 ? 1 : 0) step(S, 1 / 30);\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nlet F, G, PL, RT, LR, LS, LC;\nconst LA = [0, 0, 0, 0], C3 = new Float64Array(3);\n// Light under water: slanting shafts, and caustics on the ice (one noise twice, crossed).\nfunction glow(x, y, dep, b) {\n  const q = x + LS * (y - WL) + 56, q0 = cl(floor(q), 0, 174);\n  let L = LR * mix(RT[q0], RT[q0 + 1], q - q0) * exp(-dep / 36) * 64 * (1 + 0.5 * b);\n  if (b > 0 && dep \u003c 34) L += LC * sm(0.75, 1, 1 - abs(CT[((y + LA[1]) & 63) * 64 + ((x + LA[0]) & 63)] - CT[((x + LA[2]) & 63) * 64 + ((y + LA[3]) & 63)]) * 4) * exp(-dep / 12) * (80 * b + 22);\n  return L;\n}\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst bl = (A, k, fx, fy) => mix(mix(A[k], A[k + 1], fx), mix(A[k + BW], A[k + BW + 1], fx), fy);\n// One LED of the berg, or of slab q, read at body point u, v.\nfunction paint(x, y, u, v, q) {\n  const S = G, P = PL, gx = u - U0 - 0.5, gy = v - V0 - 0.5, x0 = floor(gx), y0 = floor(gy), i = y * W + x, o = i * 3, s = S.sf[x], c = C3, pc = S.pend;\n  if (x0 \u003c 0 || y0 \u003c 0 || x0 >= BW - 1 || y0 >= BH - 1 || (q && (v > 0.6 || (u - q.cx) ** 2 + (v - q.cy) ** 2 > 225))) return;\n  const k = y0 * BW + x0, fx = gx - x0, fy = gy - y0, a = bl(S.M, k, fx, fy) * (q ? cl(0.5 + (q.nx * u + q.ny * v - q.d0), 0, 1) : S.cuts.length && v \u003c 0.6 ? cutA(S.cuts, u, v) : 1);\n  if (a \u003c 0.02) return;\n  if (y + 0.5 \u003c s) {\n    const nx = bl(S.NX, k, fx, fy), sn = bl(S.SN, k, fx, fy), al = bl(S.AL, k, fx, fy), li = P[38] ? cl(0.5 + 0.8 * nx * P[38], 0, 1) : 0.6 + 0.25 * nx;\n    for (let j = 0; j \u003c 3; j++) c[j] = mix(mix(P[19 + j], P[16 + j], li), P[22 + j] * (0.88 + 0.12 * li), sn) * al;\n  } else {\n    const L = glow(x, y, y + 0.5 - s, 1);\n    for (let j = 0; j \u003c 3; j++) c[j] = bl(S.IC[j], k, fx, fy) * AT[y * 3 + j] * P[39] + 0.35 * S.row[y * 3 + j] + L * LT[j];\n  }\n  const ck = pc && v \u003c 0.6 && abs(pc.nx * u + pc.ny * v - pc.d) \u003c 0.6 ? 0.4 : 1;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(q ? F[o + j] : 0, c[j] * ck, q ? a : 1);\n  S.ba[i] = max(S.ba[i], a);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  F = S.f;\n  const { ba, sf, rt, row, t, P, k1, ex } = S;\n  const sunA = 1 - sm(0, 0.4, k1), moonA = sm(0.6, 1, k1), aur = sm(0.7, 1, k1), stars = sm(0.55, 0.9, k1);\n  for (let y = 0; y \u003c H; y++) {\n    let k = 0;\n    while (k \u003c 2 && y > P[k * 4 + 4]) k++;\n    const u = y \u003c= HZ ? sm(P[k * 4], P[k * 4 + 4], y) : cl((y - WL) / 97, 0, 1) ** 0.75;\n    for (let j = 0; j \u003c 3; j++) row[y * 3 + j] = y \u003c= HZ ? mix(P[k * 4 + 1 + j], P[k * 4 + 5 + j], u) : mix(P[25 + j], P[28 + j], u);\n  }\n  for (let q = 0; q \u003c 176; q++) rt[q] = sm(0.45, 0.82, vn((q - 56) * 0.13 - t * 0.3, t * 0.05 + 7));\n  (G = S), (PL = P), (RT = rt), (LR = P[37]), (LS = P[38] * 0.45), (LC = P[40] * (0.7 + 0.6 * S.k4));\n  [7, -5, -6, 4].forEach((v, j) => (LA[j] = floor(t * v)));\n\n  // The berg first, then the background where it shows, then the slabs.\n  ba.fill(0);\n  const ct = cos(S.th), st = sin(S.th), oy = WL + PV + S.by;\n  for (let y = 0; y \u003c H; y++) {\n    const dy = y + 0.5 - oy, g0 = floor(ct * dy + PV - V0 - 0.5);\n    let u0 = 99, u1 = -99;\n    for (let j = max(0, g0 - 3); j \u003c= min(BH - 1, g0 + 3); j++) (u0 = min(u0, ex[j * 2])), (u1 = max(u1, ex[j * 2 + 1]));\n    for (let x = max(0, floor(BX + u0 - st * dy - 2)); x \u003c min(W, BX + u1 - st * dy + 3); x++) {\n      const dx = x + 0.5 - BX;\n      paint(x, y, ct * dx + st * dy, -st * dx + ct * dy + PV, null);\n    }\n  }\n  const sx = 55, sy = 21.5, mx = 12, my = 8, c = C3;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, A = ba[i], dep = y + 0.5 - sf[x];\n    if (A > 0.995) continue;\n    let g = 0, e = 0;\n    if (y \u003c HZ) {\n      const ds = hypot(x + 0.5 - sx, (y + 0.5 - sy) * 1.1), dm = hypot(x + 0.5 - mx, y + 0.5 - my), cu = aur > 0 ? 0.5 + 0.5 * sin(x * 0.2 + 3 * vn(x * 0.05 + t * 0.06, 1) + t * 0.25) : 0;\n      g = moonA * (0.25 * exp(-dm / 5) + (dm \u003c 2.6 && hypot(x - 0.8 - mx, y + 1.1 - my) > 2.3 ? 0.9 : 0)) + (stars > 0 && hash(x, y + 11) \u003c 0.016 ? stars * (0.25 + 0.5 * hash(y, x)) * (0.7 + 0.3 * sin(t * 3 + x * y)) * sm(HZ, 8, y) : 0);\n      e = cu ? aur * sm(19, 6, y) * sm(0, 4, y) * cu * cu * vn(x * 0.6, t * 0.4) : 0;\n      const gs = ds \u003c 30 ? sunA * (0.55 * exp(-ds / 7) + (ds \u003c 2.6 ? 1.2 : 0)) : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = row[y * 3 + j] + SUN[j] * gs + MOON[j] * g + AUR[j] * e;\n      for (const q of S.cl) {\n        const qx = (x + 0.5 - q.x) / q.w, qy = (y + 0.5 - q.y) / q.h;\n        if (qx * qx + qy * qy > 2) continue;\n        const a = 0.92 * sm(0, 0.45, 1 - qx * qx - qy * qy + 0.45 * (vn(x * 0.35 + q.w, y * 0.6) - 0.5)), u = sm(-1, 1, qy);\n        for (let j = 0; j \u003c 3; j++) c[j] = mix(c[j], mix(P[34 + j], P[31 + j], u), a);\n      }\n    } else if (dep \u003c 0) {\n      // The far sea: the sun's glitter path, whitecaps.\n      g = sunA * (abs(x + 0.5 - sx) \u003c 1.5 + (y - HZ) * 1.2 && hash(x, y + floor(t * 7) * 64) \u003c 0.45 ? 0.75 : 0);\n      e = S.k4 > 0.35 && hash(x + floor(t * 2) * 7, y) \u003c (S.k4 - 0.35) * 0.3 ? 0.8 : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[36 + j] * 0.55 + row[90 + j] * 0.45 + SUN[j] * g, 230, e);\n    } else {\n      // The surface's silver underside.\n      (g = glow(x, y, dep, 0)), (e = dep \u003c 2.5 ? (1 - dep / 2.5) * 0.5 : 0);\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[y * 3 + j] + (j ? 90 : 60) * e + g * LT[j], row[78 + j] * 0.9, dep \u003c 1 ? 0.55 : 0);\n    }\n    for (let j = 0; j \u003c 3; j++) F[o + j] = mix(c[j], F[o + j], A);\n  }\n  for (const p of S.pieces) {\n    const ca = cos(p.a), sa = sin(p.a), e = p.c.ex;\n    for (let y = max(0, floor(p.y - e)); y \u003c min(H, p.y + e); y++)\n      for (let x = max(0, floor(p.x - e)); x \u003c min(W, p.x + e); x++) {\n        const dx = x + 0.5 - p.x, dy = y + 0.5 - p.y;\n        paint(x, y, p.c.bu + ca * dx + sa * dy, p.c.bv - sa * dx + ca * dy, p.c);\n      }\n  }\n  sprites(S, t, ba);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction sprites(S, t, ba) {\n  for (const k of S.kr) {\n    const x = S.kx + cos(k.p + t * k.w) * k.r * 1.3, y = S.ky + sin(k.q + t * k.w * 1.3) * k.r * 0.7, i = floor(y) * W + floor(x);\n    if (i >= 0 && i \u003c N && ba[i] \u003c 0.5) put(x, y, [255, 128, 118], (0.25 + 0.35 * S.P[39]) * (0.7 + 0.3 * sin(t * 4 + k.p * 9)));\n  }\n  for (const b of S.bubs) put(b.x, b.y, [214, 246, 255], 0.6);\n  for (const p of S.pens) {\n    if (!p.st && !p.on) continue;\n    if (p.st === 0 || p.st === 1 || p.st === 5) {\n      const [x, y] = toW(S, p.u, topB(S, p.u) - 0.3), f = p.f, B = round(x - 0.5) + (f > 0 ? 0 : 1), Y = floor(y) - (p.st && sin(t * 14) > 0 ? 1 : 0);\n      put(B, Y - 3, BLK), put(B + f, Y - 3, BLK), put(B + 2 * f, Y - 3, [240, 168, 60], 0.8);\n      for (let j = 0; j \u003c 3; j++) put(B, Y - j, BLK), put(B + f, Y - j, WHT);\n    } else {\n      const r = hypot(p.vx, p.vy) + 1e-6, ux = p.vx / r, uy = p.vy / r;\n      for (let j = -1.5; j \u003c= 1.5; j += 0.5) put(p.x + ux * j, p.y + uy * j, BLK), j \u003c 1 && put(p.x + ux * j - uy * (ux \u003c 0 ? -1 : 1), p.y + uy * j + abs(ux), WHT, 0.9);\n    }\n  }\n  for (const p of S.spray) put(p.x, p.y, [232, 240, 246], min(1, p.l * 1.3));\n}\n","layer":{"id":"layer-iceberg","type":"code","name":"iceberg","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Iceberg\n// Family:  polar\n// Idea:    An iceberg cut through at the waterline: a ninth of it in the air with penguins on top, the rest below in banded glacier blue under shafts of light and bubble streams, until a slab calves off, splashes and sets it rocking.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the schoolbook drawing of an iceberg with eight ninths of it under the water\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1\n//\n// Knob 1: Light. Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora.\n// Knob 2: Speed. At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower.\n// Knob 3: Shape. A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom.\n// Knob 4: Swell. How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea.\n// Buttons: K1 tap breaks a slab off the berg now.\n\nconst W = 64, H = 128, N = W * H;\n// Sea level, horizon, the berg's middle; its grid (u across, v down from sea level) turns about row PV.\nconst WL = 30, HZ = 26, BX = 28, BW = 64, BH = 128, U0 = -32, V0 = -28, PV = 34, NB = BW * BH;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(xi % p, yi % p), b = hash(x1, yi % p), c = hash(xi % p, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Caustic noise; the colour the water leaves at each row.\nconst CT = new Float32Array(4096).map((_, k) => vn(((k & 63) * 20) / 64, ((k >> 6) * 20) / 64, 20));\nconst AT = new Float32Array(H * 3).map((_, q) => exp(-max(0, floor(q / 3) + 0.5 - WL) / [26, 75, 170][q % 3]));\n\n// The top: a snow plain with sheer cliffs, or two spires.\nconst PIN = [[-13.5, 1], [-12, -3], [-10, -6], [-7.5, -10], [-5.5, -16], [-3.5, -19.5], [-1.5, -17.5], [0.5, -11], [2.5, -7.5], [4.5, -8.5], [6.5, -13], [8, -16], [9.5, -15], [11.5, -8], [13, -2.5], [14, 1]];\nfunction topAt(u, s) {\n  let i = 1;\n  while (i \u003c PIN.length - 1 && u > PIN[i][0]) i++;\n  const [a, b] = PIN[i - 1], [c, e] = PIN[i], A = u > 0 ? u : -u * 1.05;\n  const tab = A \u003c 15 ? -11 + 0.8 * (vn(u * 0.3, 3) - 0.5) + 1.3 * sm(12.5, 15, A) : mix(-9.7, 1, cl((A - 15) / 1.1, 0, 1));\n  return mix(tab, b + (e - b) * cl((u - a) / (c - a), 0, 1), s);\n}\n// Half widths under the water, tabular and pinnacle, a little lopsided.\nconst CV = [0, 5, 12, 22, 34, 46, 58, 68, 76, 82, 86];\nconst WT = [16.6, 20.5, 22, 22.5, 21.5, 21, 19.5, 16.5, 12.5, 8, 0];\nconst WP = [13.6, 15.5, 16.5, 16.5, 15.5, 14, 12, 9.5, 7, 4, 0];\nconst J = (h) => CV.map((_, i) => (i ? 0.88 + 0.24 * hash(i, h) : 1.03)), JL = J(5), JR = J(9);\nfunction edgeAt(v, s) {\n  const q = v / (1 + 0.1 * s);\n  if (v \u003c 0 || q >= 86) return [0, 0];\n  let i = 0;\n  while (CV[i + 1] \u003c= q) i++;\n  const f = (q - CV[i]) / (CV[i + 1] - CV[i]), w = mix(mix(WT[i], WP[i], s), mix(WT[i + 1], WP[i + 1], s), f), c = 2 * sin(v * 0.05);\n  return [c - w * mix(JL[i], JL[i + 1], f), c + w * mix(JR[i], JR[i + 1], f)];\n}\n\n// Midnight sun, noon, twilight: sky stops, lit and shaded face, snow, water top\n// and bottom, cloud lit and dark, shafts, light's side, ice, caustics.\nconst KF = [\n  [[[0, 28, 50, 116], [10, 100, 104, 166], [19, 232, 158, 132], [26, 250, 200, 128]], [246, 206, 158], [70, 118, 196], [242, 226, 206], [14, 86, 114], [3, 12, 40], [250, 196, 168], [118, 104, 150], [1, 1, 1, 1]],\n  [[[0, 118, 130, 148], [10, 156, 164, 178], [19, 186, 192, 200], [26, 200, 205, 210]], [214, 220, 226], [148, 166, 192], [226, 230, 236], [28, 108, 132], [5, 20, 48], [212, 216, 222], [128, 134, 150], [0.35, 0, 1.05, 0.5]],\n  [[[0, 6, 12, 42], [10, 16, 30, 80], [19, 38, 62, 120], [26, 62, 94, 148]], [160, 188, 232], [58, 84, 148], [176, 198, 236], [8, 44, 80], [2, 6, 24], [70, 86, 130], [26, 34, 66], [0.45, -1, 0.62, 0.5]],\n].map((k) => Float64Array.from(k.flat(2)));\n// Glacier ice; the pinnacle is older ice, bluer all through.\nconst BASE = [92, 192, 226], PALE = [190, 234, 246], CLEAR = [30, 120, 214], VEIN = [12, 50, 172], RIM = [40, 64, 60], TINT = [0.7, 0.9, 1.06];\nconst BLK = [12, 14, 22], WHT = [226, 228, 236], SUN = [255, 214, 150], MOON = [224, 228, 214], AUR = [30, 190, 110], LT = [0.55, 0.92, 1];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), pen = () => Object.fromEntries(\"on h u f st tu x y vx vy tt nb lx ly lt\".split(\" \").map((k) => [k, 0.5]));\n  params.s = {\n    f: F32(N * 3), ba: F32(N), sf: F32(W), rt: F32(176), row: F32(H * 3), P: new Float64Array(41), ex: F32(BH * 2), TT: F32(BW * 4 + 1),\n    M: F32(NB), IC: [F32(NB), F32(NB), F32(NB)], SN: F32(NB), NX: F32(NB), AL: F32(NB), D: F32(NB),\n    s: -1, t: 0.01, th: 0.01, thv: 0.01, thq: 0.01, by: 0.01, byv: 0.01, A: 0.5, k1: -1, k4: 0.06, live: 0, kx: 49.5, ky: 112.5,\n    next: 3.4, nd: 0.5, pend: null, crack: 0.5, cuts: [], pieces: [], bubs: [], spray: [], rings: [], vacc: [0.5, 0.5, 0.5, 0.5, 0.5], dv: null,\n    cl: [0, 1, 2, 3].map((k) => ({ x: 6 + k * 17 + 6 * rnd(), y: 5 + ((k * 5) % 13) + 2 * rnd(), w: 7 + 5 * rnd(), h: 1.7 + rnd() })),\n    kr: Array.from({ length: 46 }, () => ({ p: rnd() * 6.3, q: rnd() * 6.3, w: 0.4 + 0.5 * rnd(), r: 1 + 6 * rnd() })),\n    pens: [0, 1, 2, 3, 4].map((i) => Object.assign(pen(), { f: i % 2 ? 1 : -1, st: 0 })),\n  };\n}\n\nconst toW = (S, u, v) => [BX + cos(S.th) * u - sin(S.th) * (v - PV), WL + PV + S.by + sin(S.th) * u + cos(S.th) * (v - PV)];\n// What the cuts leave at u, v. Cuts heal outward as the berg turns.\nfunction cutA(cuts, u, v) {\n  let a = 1;\n  for (const c of cuts) if (v \u003c 0.6 && (u - c.cx) ** 2 + (v - c.cy) ** 2 \u003c 225) a *= cl(0.5 - (c.nx * u + c.ny * v - c.d), 0, 1);\n  return a;\n}\nconst topB = (S, u) => S.TT[cl(round((u - U0) * 4), 0, BW * 4)];\nfunction edgeU(S, side) {\n  for (let a = 0; a \u003c 26; a += 0.5) if (topB(S, side * a) > -1.5 || cutA(S.cuts, side * a, topB(S, side * a) + 0.7) \u003c 0.5) return side * (a - 1);\n  return side * 12;\n}\nconst surf = (S, x) => S.sf[cl(round(x), 0, W - 1)];\n\nfunction build(S, s) {\n  S.s = s;\n  const { M, SN, NX, AL, D, TT, ex } = S, E = [], face = [];\n  for (let q = 0; q \u003c= BW * 4; q++) TT[q] = topAt(U0 + q / 4, s);\n  for (let q = 0; q \u003c BH * 4; q++) E.push(edgeAt(V0 + (q + 0.5) / 4, s));\n  for (let k = 0; k \u003c NB; k++) {\n    let n = 0;\n    for (let j = 0; j \u003c 16; j++) {\n      const qu = (k & 63) * 4 + (j & 3), qv = (k >> 6) * 4 + (j >> 2), u = U0 + (qu + 0.5) / 4, v = V0 + (qv + 0.5) / 4;\n      if (v \u003c 0 ? v >= TT[qu] : u > E[qv][0] && u \u003c E[qv][1]) n++;\n    }\n    M[k] = n / 16;\n  }\n  // Distance to open water: a glowing rim, a darker core.\n  for (let k = 0; k \u003c NB; k++) D[k] = M[k] \u003c 0.5 ? 0 : 20;\n  for (let k = BW + 1; k \u003c NB - 1; k++) D[k] = min(D[k], D[k - 1] + 1, D[k - BW] + 1, D[k - BW - 1] + 1.4, D[k - BW + 1] + 1.4);\n  for (let k = NB - BW - 2; k > 0; k--) D[k] = min(D[k], D[k + 1] + 1, D[k + BW] + 1, D[k + BW + 1] + 1.4, D[k + BW - 1] + 1.4);\n  for (let j = 0; j \u003c BH * 2; j++) ex[j] = j & 1 ? -99 : 99;\n  for (let k = 0; k \u003c NB; k++) {\n    const gu = k & 63, gv = k >> 6, u = U0 + gu + 0.5, v = V0 + gv + 0.5;\n    if (M[k] \u003c= 0) continue;\n    // Facets: lit or shaded in the air; below, melt scallops lit on their lower walls.\n    let bd = 1e9, id = 0, sv = 0;\n    for (let j = 0; j \u003c 9; j++) {\n      const cu = floor(u / 5) + (j % 3) - 1, cv = floor(v / 5) + floor(j / 3) - 1, w = (cv + hash(cv, cu + 50)) * 5, dd = (u - (cu + hash(cu, cv)) * 5) ** 2 + (v - w) ** 2;\n      if (dd \u003c bd) (bd = dd), (id = hash(cu + 99, cv)), (sv = w);\n    }\n    const qu = gu * 4 + 2, sl = TT[min(BW * 4, qu + 2)] - TT[max(0, qu - 2)], dep = v - TT[qu];\n    NX[k] = mix(sl / sqrt(1 + sl * sl), cl(u / 24 + 1.3 * (id - 0.5), -1, 1), sm(1, 3, dep));\n    SN[k] = sm(2.4, 1.3, dep) * sm(1.6, 0.8, abs(sl));\n    AL[k] = (0.86 + 0.14 * hash(gu, 7)) * (0.88 + 0.24 * id) * (v > -1.5 && v \u003c 0 ? 0.7 : 1);\n    // Layers of white and clear blue ice, dark veins of refrozen meltwater.\n    const f = (v + u * 0.14 + 7 * vn(u * 0.04, v * 0.025 + 9)) / 8, n = floor(f), band = f - n, h1 = hash(n, 5);\n    const mot = (0.84 + 0.3 * vn(u * 0.1 + 3, v * 0.07)) * (1 + 0.2 * cl((v - sv) / 3, -1, 1));\n    const pale = sm(0.5, 0.6, band) * (1 - sm(0.6 + 0.3 * h1, 0.7 + 0.3 * h1, band)) * sm(0.25, 0.5, hash(n, 6)), clear = (1 - sm(0.2, 0.45, band)) * sm(0.4, 0.8, h1);\n    const vein = max(sm(0.11, 0.03, abs(vn(u * 0.08 + 11, v * 0.045) * 2 - 1)), 0.8 * sm(0.1, 0.025, abs(vn(u * 0.045 + 31, v * 0.11 + 5) * 2 - 1))) * sm(0.25, 0.5, vn(u * 0.035 + 20, v * 0.03));\n    const dk = D[k], core = (0.5 + 0.5 * exp(-max(0, dk - 1) / 5)) * (gv > 1 && M[k - 2 * BW] \u003c 0.5 ? 1.3 : 1) * (gv \u003c BH - 2 && M[k + 2 * BW] \u003c 0.5 ? 0.76 : 1);\n    for (let c = 0; c \u003c 3; c++) S.IC[c][k] = mix(mix(mix(BASE[c] * mot, PALE[c], 0.8 * pale), CLEAR[c], 0.6 * clear), VEIN[c], 0.9 * vein) * core * mix(1, TINT[c], s) + exp(-dk / 1.2) * RIM[c];\n    if (v > 3 && v \u003c 80 && dk > 1.5) face.push([u, v]);\n    (ex[gv * 2] = min(ex[gv * 2], u)), (ex[gv * 2 + 1] = max(ex[gv * 2 + 1], u));\n  }\n  S.vents = [0, 1, 2, 3, 4].map((i) => face[floor(hash(i, 41) * face.length)]);\n  // Penguin places: flat, three columns apart, clear of the slabs.\n  const slots = [];\n  for (const u of [0.5, -6, 6.5, -3, 3.5, -8, 8, -1.5, 2, -4.5, 5]) {\n    const q = round((u - U0) * 4);\n    if (abs(TT[q + 6] - TT[q - 6]) \u003c 1.6 && TT[q] \u003c -2.5 && TT[q] > -15 && slots.length \u003c 5 && slots.every((w) => abs(w - u) > 2.9)) slots.push(u + 0.01);\n  }\n  S.pens.forEach((p, i) => ((p.on = i \u003c slots.length ? 1 : 0), p.on && (p.h = slots[i]), p.st || (p.u = p.h)));\n}\n\nconst bub = (S, x, y, vy = -(4.5 + 5 * rnd()), wb = 0.6) => S.bubs.length \u003c 260 && S.bubs.push({ x, y, vy, wb, ph: rnd() * 6.3, dead: 0 });\nfunction splash(S, x, v, g) {\n  const y = surf(S, x) - 0.5;\n  for (let k = 0; k \u003c 7 + 29 * g; k++) S.spray.push({ x: x + (rnd() - 0.5) * (2 + 3 * g), y, vx: (rnd() - 0.5) * (10 + 14 * g), vy: -(6 + rnd() * (9 + 17 * g)), l: 0.99 });\n  S.rings.push({ x, t: 0.01, a: g ? min(3.2, 0.1 * v + 1.4) : 0.6 });\n  for (let k = 0; k \u003c 8 + 22 * g; k++) bub(S, x + (rnd() - 0.5) * 6, y + 1 + rnd() * (5 + 9 * g));\n}\n\n// A crack opens behind a slab of outer ice; it goes half a second later.\nfunction calve(S) {\n  if (S.pend || S.pieces.some((p) => p.f)) return;\n  let side = rnd() \u003c 0.5 ? -1 : 1;\n  if (S.cuts.some((c) => c.side === side && c.age \u003c 40)) side = -side;\n  let ue = edgeU(S, side);\n  if (abs(ue) \u003c 12) (side = -side), (ue = edgeU(S, side));\n  if (abs(ue) \u003c 12) return;\n  const px = side * max(9, abs(ue) - 3.5 - 3 * rnd()), nx = side * 0.993, d = nx * px + 0.6;\n  const c = { nx, ny: -0.12, d, d0: d, cx: px, cy: -5, side, age: 0.01, bu: 0.5, bv: 0.5, ex: 0.5, hx: 0.5, hy: 0.5 };\n  let u0 = 99, u1 = -99, v0 = 99, v1 = -99;\n  for (let k = 0; k \u003c NB; k++) {\n    const u = U0 + (k & 63) + 0.5, v = V0 + (k >> 6) + 0.5;\n    if (S.M[k] > 0.5 && cutA([c], u, v) \u003c 0.5 && cutA(S.cuts, u, v) > 0.5) (u0 = min(u0, u)), (u1 = max(u1, u)), (v0 = min(v0, v)), (v1 = max(v1, v));\n  }\n  if (u1 - u0 \u003c 1.5) return;\n  Object.assign(c, { bu: (u0 + u1) / 2, bv: (v0 + v1) / 2, hx: (u1 - u0) / 2 + 0.5, hy: (v1 - v0) / 2 + 0.5 });\n  c.ex = hypot(c.hx, c.hy) + 1.5;\n  (S.pend = c), (S.crack = 0.5);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d), A = S.A, sf = S.sf;\n  // The swell, and rings running out from each splash.\n  const swell = (x) => A * (0.7 * sin(x * 0.15 - t * 1.4) + 0.3 * sin(x * 0.34 + t * 0.95 + 1));\n  for (let x = 0; x \u003c W; x++) {\n    sf[x] = WL + swell(x + 0.5);\n    for (const r of S.rings) {\n      const q = abs(x + 0.5 - r.x) - 11 * r.t;\n      sf[x] += r.a * exp(-r.t * 0.5 - (q / 5) ** 2) * sin(q * 0.9);\n    }\n  }\n  for (const r of S.rings) r.t += d;\n  S.rings = S.rings.filter((r) => r.t \u003c 7);\n  S.thv += (-2.4 * (S.th - S.thq - 0.022 * A * cos(BX * 0.15 - t * 1.4)) - 0.45 * S.thv) * d;\n  S.byv += (-3 * (S.by - 0.5 * swell(BX)) - 1.2 * S.byv) * d;\n  (S.th += S.thv * d), (S.by += S.byv * d), (S.thq *= exp(-d / 60));\n  for (const c of S.cl) (c.x += (0.7 + 3 * S.k4) * d) > W + c.w + 2 && (c.x = -c.w - 2);\n\n  if (S.live && (S.next -= d) \u003c= 0) calve(S), (S.next = 15 + 10 * rnd());\n  if (S.pend && (S.crack -= d) \u003c= 0) {\n    // The berg loses weight on that side, rocks and settles leaning a little.\n    const c = S.pend, [x, y] = toW(S, c.bu, c.bv);\n    S.cuts.push(c);\n    S.pieces.push({ c, x, y, vx: c.side * 2.5, vy: 0.5, a: S.th, va: c.side * (1.4 + rnd()), f: 1, ta: 0.5 });\n    (S.pend = null), (S.thv -= c.side * 0.1), (S.thq -= c.side * 0.012), (S.byv -= 1.6);\n  }\n  for (const c of S.cuts) (c.age += d) > 20 && (c.d += d * 0.12);\n  S.cuts = S.cuts.filter((c) => c.age \u003c 130);\n  for (const p of S.pieces) {\n    if (p.f) {\n      (p.vy += 45 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.a += p.va * d);\n      if (p.y > surf(S, p.x) - 1) splash(S, p.x, p.vy, 1), (p.f = 0), (p.vy *= 0.3), (p.ta = round(p.a / (PI / 2)) * (PI / 2));\n    } else {\n      const c = p.c, hy = abs(sin(p.a - S.th)) * c.hx + abs(cos(p.a - S.th)) * c.hy;\n      (p.vy += (-5 * (p.y - surf(S, p.x) - 0.75 * hy) - 1.8 * p.vy) * d), (p.va += (-4 * (p.a - p.ta) - 1.6 * p.va) * d);\n      (p.y += p.vy * d), (p.a += p.va * d), (p.x += c.side * 1.4 * d);\n    }\n  }\n  S.pieces = S.pieces.filter((p) => abs(p.x - W / 2) \u003c W / 2 + p.c.ex + 2);\n  S.vents.forEach((v, i) => {\n    if (sin(t * 0.6 + i * 2.1) > -0.2) for (S.vacc[i] += d * 3.5; S.vacc[i] >= 1; S.vacc[i]--) bub(S, ...toW(S, v[0], v[1]), -(5 + 0.6 * i + 1.2 * rnd()), 0.9);\n  });\n  for (const b of S.bubs) {\n    (b.y += b.vy * d), (b.x += sin(t * 6 + b.ph) * b.wb * d);\n    if (b.y \u003c surf(S, b.x) + 0.3 || b.x \u003c -1 || b.x > W + 1) b.dead = 1;\n  }\n  S.bubs = S.bubs.filter((b) => !b.dead);\n  for (const p of S.spray) (p.vy += 50 * d), (p.x += p.vx * d), (p.y += p.vy * d), (p.l -= d * 0.8);\n  S.spray = S.spray.filter((p) => p.l > 0 && !(p.vy > 0 && p.y > surf(S, p.x) + 0.5));\n  (S.kx = 49 + 8 * sin(t * 0.1)), (S.ky = 112 + 7 * sin(t * 0.13 + 1));\n  penguins(S, d, t);\n}\n\n// Now and then a penguin waddles to the edge, jumps, swims to the krill and leaps back.\nfunction penguins(S, d, t) {\n  for (const p of S.pens) if (!p.st && rnd() \u003c d * 0.2) p.f = -p.f;\n  let p = S.dv;\n  if (!p && S.live && (S.nd -= d) \u003c= 0) {\n    const free = S.pens.filter((q) => !q.st && q.on);\n    if (!free.length) return;\n    p = S.dv = free.reduce((a, q) => (q.u > a.u ? q : a));\n    Object.assign(p, { st: 1, tu: edgeU(S, 1) - 0.5 });\n  }\n  if (!p) return;\n  if (p.st === 1 || p.st === 5) {\n    const g = p.st === 1 ? p.tu : p.h;\n    p.f = g > p.u ? 1 : -1;\n    p.u += p.f * min(abs(g - p.u), 4 * d);\n    if (abs(g - p.u) \u003c 0.01) {\n      if (p.st === 5) (p.st = 0), (S.dv = null), (S.nd = 5 + 6 * rnd());\n      else ([p.x, p.y] = toW(S, p.u, topB(S, p.u) - 0.3)), Object.assign(p, { st: 2, vx: 7, vy: -9 });\n    }\n  } else if (p.st === 2) {\n    (p.vy += 40 * d), (p.x += p.vx * d), (p.y += p.vy * d);\n    if (p.vy > 0 && p.y > surf(S, p.x)) splash(S, p.x, 8, 0), Object.assign(p, { st: 3, vy: 12, vx: 3, tt: 0.01, nb: 0.01 });\n  } else if (p.st === 3) {\n    const back = (p.tt += d) > 5, dx = (back ? W - 6 : S.kx + 5 * cos(t * 2.2)) - p.x, dy = (back ? WL - 2 : S.ky + 3 * sin(t * 2.2)) - p.y, r = hypot(dx, dy) + 1e-6, sp = back ? 17 : 14;\n    (p.vx += ((dx / r) * sp - p.vx) * min(1, 2.2 * d)), (p.vy += ((dy / r) * sp - p.vy) * min(1, 2.2 * d));\n    (p.x = cl(p.x + p.vx * d, 1, W - 2)), (p.y = min(p.y + p.vy * d, H - 3));\n    if ((p.nb += d) > 0.07) (p.nb = 0), bub(S, p.x - p.vx * 0.12, p.y - p.vy * 0.12);\n    if (back && p.y \u003c surf(S, p.x) + 1.5) splash(S, p.x, 6, 0), Object.assign(p, { st: 4, lx: p.x, ly: p.y, lt: 0.01, u: edgeU(S, 1) - 1 });\n  } else {\n    const [lx, ly] = toW(S, p.u, topB(S, p.u) - 0.3), l = (p.lt = min(1, p.lt + d / 0.7));\n    (p.vx = lx - p.x), (p.vy = ly - p.y), (p.x = mix(p.lx, lx, l)), (p.y = mix(p.ly, ly, l) - 40 * l * (1 - l));\n    if (l >= 1) p.st = 5;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k1 = cl(k[0], 0, 1), k3 = cl(k[2], 0, 1);\n  if (abs(k3 - S.s) > 0.01) build(S, k3);\n  (S.k4 = cl(k[3], 0, 1)), (S.A = 0.45 + 3 * S.k4);\n  if (k1 !== S.k1) {\n    const [a, b, u] = k1 \u003c 0.5 ? [0, 1, sm(0, 0.5, k1)] : [1, 2, sm(0.5, 1, k1)];\n    for (let j = 0; j \u003c 41; j++) S.P[j] = mix(KF[a][j], KF[b][j], u);\n    S.k1 = k1;\n  }\n  for (; !S.live; S.live = S.t > 4 ? 1 : 0) step(S, 1 / 30);\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nlet F, G, PL, RT, LR, LS, LC;\nconst LA = [0, 0, 0, 0], C3 = new Float64Array(3);\n// Light under water: slanting shafts, and caustics on the ice (one noise twice, crossed).\nfunction glow(x, y, dep, b) {\n  const q = x + LS * (y - WL) + 56, q0 = cl(floor(q), 0, 174);\n  let L = LR * mix(RT[q0], RT[q0 + 1], q - q0) * exp(-dep / 36) * 64 * (1 + 0.5 * b);\n  if (b > 0 && dep \u003c 34) L += LC * sm(0.75, 1, 1 - abs(CT[((y + LA[1]) & 63) * 64 + ((x + LA[0]) & 63)] - CT[((x + LA[2]) & 63) * 64 + ((y + LA[3]) & 63)]) * 4) * exp(-dep / 12) * (80 * b + 22);\n  return L;\n}\nfunction put(x, y, c, a = 1) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nconst bl = (A, k, fx, fy) => mix(mix(A[k], A[k + 1], fx), mix(A[k + BW], A[k + BW + 1], fx), fy);\n// One LED of the berg, or of slab q, read at body point u, v.\nfunction paint(x, y, u, v, q) {\n  const S = G, P = PL, gx = u - U0 - 0.5, gy = v - V0 - 0.5, x0 = floor(gx), y0 = floor(gy), i = y * W + x, o = i * 3, s = S.sf[x], c = C3, pc = S.pend;\n  if (x0 \u003c 0 || y0 \u003c 0 || x0 >= BW - 1 || y0 >= BH - 1 || (q && (v > 0.6 || (u - q.cx) ** 2 + (v - q.cy) ** 2 > 225))) return;\n  const k = y0 * BW + x0, fx = gx - x0, fy = gy - y0, a = bl(S.M, k, fx, fy) * (q ? cl(0.5 + (q.nx * u + q.ny * v - q.d0), 0, 1) : S.cuts.length && v \u003c 0.6 ? cutA(S.cuts, u, v) : 1);\n  if (a \u003c 0.02) return;\n  if (y + 0.5 \u003c s) {\n    const nx = bl(S.NX, k, fx, fy), sn = bl(S.SN, k, fx, fy), al = bl(S.AL, k, fx, fy), li = P[38] ? cl(0.5 + 0.8 * nx * P[38], 0, 1) : 0.6 + 0.25 * nx;\n    for (let j = 0; j \u003c 3; j++) c[j] = mix(mix(P[19 + j], P[16 + j], li), P[22 + j] * (0.88 + 0.12 * li), sn) * al;\n  } else {\n    const L = glow(x, y, y + 0.5 - s, 1);\n    for (let j = 0; j \u003c 3; j++) c[j] = bl(S.IC[j], k, fx, fy) * AT[y * 3 + j] * P[39] + 0.35 * S.row[y * 3 + j] + L * LT[j];\n  }\n  const ck = pc && v \u003c 0.6 && abs(pc.nx * u + pc.ny * v - pc.d) \u003c 0.6 ? 0.4 : 1;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(q ? F[o + j] : 0, c[j] * ck, q ? a : 1);\n  S.ba[i] = max(S.ba[i], a);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  F = S.f;\n  const { ba, sf, rt, row, t, P, k1, ex } = S;\n  const sunA = 1 - sm(0, 0.4, k1), moonA = sm(0.6, 1, k1), aur = sm(0.7, 1, k1), stars = sm(0.55, 0.9, k1);\n  for (let y = 0; y \u003c H; y++) {\n    let k = 0;\n    while (k \u003c 2 && y > P[k * 4 + 4]) k++;\n    const u = y \u003c= HZ ? sm(P[k * 4], P[k * 4 + 4], y) : cl((y - WL) / 97, 0, 1) ** 0.75;\n    for (let j = 0; j \u003c 3; j++) row[y * 3 + j] = y \u003c= HZ ? mix(P[k * 4 + 1 + j], P[k * 4 + 5 + j], u) : mix(P[25 + j], P[28 + j], u);\n  }\n  for (let q = 0; q \u003c 176; q++) rt[q] = sm(0.45, 0.82, vn((q - 56) * 0.13 - t * 0.3, t * 0.05 + 7));\n  (G = S), (PL = P), (RT = rt), (LR = P[37]), (LS = P[38] * 0.45), (LC = P[40] * (0.7 + 0.6 * S.k4));\n  [7, -5, -6, 4].forEach((v, j) => (LA[j] = floor(t * v)));\n\n  // The berg first, then the background where it shows, then the slabs.\n  ba.fill(0);\n  const ct = cos(S.th), st = sin(S.th), oy = WL + PV + S.by;\n  for (let y = 0; y \u003c H; y++) {\n    const dy = y + 0.5 - oy, g0 = floor(ct * dy + PV - V0 - 0.5);\n    let u0 = 99, u1 = -99;\n    for (let j = max(0, g0 - 3); j \u003c= min(BH - 1, g0 + 3); j++) (u0 = min(u0, ex[j * 2])), (u1 = max(u1, ex[j * 2 + 1]));\n    for (let x = max(0, floor(BX + u0 - st * dy - 2)); x \u003c min(W, BX + u1 - st * dy + 3); x++) {\n      const dx = x + 0.5 - BX;\n      paint(x, y, ct * dx + st * dy, -st * dx + ct * dy + PV, null);\n    }\n  }\n  const sx = 55, sy = 21.5, mx = 12, my = 8, c = C3;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, A = ba[i], dep = y + 0.5 - sf[x];\n    if (A > 0.995) continue;\n    let g = 0, e = 0;\n    if (y \u003c HZ) {\n      const ds = hypot(x + 0.5 - sx, (y + 0.5 - sy) * 1.1), dm = hypot(x + 0.5 - mx, y + 0.5 - my), cu = aur > 0 ? 0.5 + 0.5 * sin(x * 0.2 + 3 * vn(x * 0.05 + t * 0.06, 1) + t * 0.25) : 0;\n      g = moonA * (0.25 * exp(-dm / 5) + (dm \u003c 2.6 && hypot(x - 0.8 - mx, y + 1.1 - my) > 2.3 ? 0.9 : 0)) + (stars > 0 && hash(x, y + 11) \u003c 0.016 ? stars * (0.25 + 0.5 * hash(y, x)) * (0.7 + 0.3 * sin(t * 3 + x * y)) * sm(HZ, 8, y) : 0);\n      e = cu ? aur * sm(19, 6, y) * sm(0, 4, y) * cu * cu * vn(x * 0.6, t * 0.4) : 0;\n      const gs = ds \u003c 30 ? sunA * (0.55 * exp(-ds / 7) + (ds \u003c 2.6 ? 1.2 : 0)) : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = row[y * 3 + j] + SUN[j] * gs + MOON[j] * g + AUR[j] * e;\n      for (const q of S.cl) {\n        const qx = (x + 0.5 - q.x) / q.w, qy = (y + 0.5 - q.y) / q.h;\n        if (qx * qx + qy * qy > 2) continue;\n        const a = 0.92 * sm(0, 0.45, 1 - qx * qx - qy * qy + 0.45 * (vn(x * 0.35 + q.w, y * 0.6) - 0.5)), u = sm(-1, 1, qy);\n        for (let j = 0; j \u003c 3; j++) c[j] = mix(c[j], mix(P[34 + j], P[31 + j], u), a);\n      }\n    } else if (dep \u003c 0) {\n      // The far sea: the sun's glitter path, whitecaps.\n      g = sunA * (abs(x + 0.5 - sx) \u003c 1.5 + (y - HZ) * 1.2 && hash(x, y + floor(t * 7) * 64) \u003c 0.45 ? 0.75 : 0);\n      e = S.k4 > 0.35 && hash(x + floor(t * 2) * 7, y) \u003c (S.k4 - 0.35) * 0.3 ? 0.8 : 0;\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[36 + j] * 0.55 + row[90 + j] * 0.45 + SUN[j] * g, 230, e);\n    } else {\n      // The surface's silver underside.\n      (g = glow(x, y, dep, 0)), (e = dep \u003c 2.5 ? (1 - dep / 2.5) * 0.5 : 0);\n      for (let j = 0; j \u003c 3; j++) c[j] = mix(row[y * 3 + j] + (j ? 90 : 60) * e + g * LT[j], row[78 + j] * 0.9, dep \u003c 1 ? 0.55 : 0);\n    }\n    for (let j = 0; j \u003c 3; j++) F[o + j] = mix(c[j], F[o + j], A);\n  }\n  for (const p of S.pieces) {\n    const ca = cos(p.a), sa = sin(p.a), e = p.c.ex;\n    for (let y = max(0, floor(p.y - e)); y \u003c min(H, p.y + e); y++)\n      for (let x = max(0, floor(p.x - e)); x \u003c min(W, p.x + e); x++) {\n        const dx = x + 0.5 - p.x, dy = y + 0.5 - p.y;\n        paint(x, y, p.c.bu + ca * dx + sa * dy, p.c.bv - sa * dx + ca * dy, p.c);\n      }\n  }\n  sprites(S, t, ba);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n\nfunction sprites(S, t, ba) {\n  for (const k of S.kr) {\n    const x = S.kx + cos(k.p + t * k.w) * k.r * 1.3, y = S.ky + sin(k.q + t * k.w * 1.3) * k.r * 0.7, i = floor(y) * W + floor(x);\n    if (i >= 0 && i \u003c N && ba[i] \u003c 0.5) put(x, y, [255, 128, 118], (0.25 + 0.35 * S.P[39]) * (0.7 + 0.3 * sin(t * 4 + k.p * 9)));\n  }\n  for (const b of S.bubs) put(b.x, b.y, [214, 246, 255], 0.6);\n  for (const p of S.pens) {\n    if (!p.st && !p.on) continue;\n    if (p.st === 0 || p.st === 1 || p.st === 5) {\n      const [x, y] = toW(S, p.u, topB(S, p.u) - 0.3), f = p.f, B = round(x - 0.5) + (f > 0 ? 0 : 1), Y = floor(y) - (p.st && sin(t * 14) > 0 ? 1 : 0);\n      put(B, Y - 3, BLK), put(B + f, Y - 3, BLK), put(B + 2 * f, Y - 3, [240, 168, 60], 0.8);\n      for (let j = 0; j \u003c 3; j++) put(B, Y - j, BLK), put(B + f, Y - j, WHT);\n    } else {\n      const r = hypot(p.vx, p.vy) + 1e-6, ux = p.vx / r, uy = p.vy / r;\n      for (let j = -1.5; j \u003c= 1.5; j += 0.5) put(p.x + ux * j, p.y + uy * j, BLK), j \u003c 1 && put(p.x + ux * j - uy * (ux \u003c 0 ? -1 : 1), p.y + uy * j + abs(ux), WHT, 0.9);\n    }\n  }\n  for (const p of S.spray) put(p.x, p.y, [232, 240, 246], min(1, p.l * 1.3));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Shape=0..1, Swell=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Midnight sun at 0, gold on the horizon at the right, lighting the berg's right faces; overcast noon in the middle; blue twilight at 1 with a moon, stars and an aurora."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the first slab breaks off 3.5 seconds in and the next every 15 to 25 seconds; 0.2 is ten times slower."},{"name":"Shape","min":0,"max":1,"about":"A tabular berg at 0, flat topped with five penguins on the snow; a pinnacle at 1, two spires of older, bluer ice over a keel that nearly reaches the bottom."},{"name":"Swell","min":0,"max":1,"about":"How high the swell runs and how hard the berg bobs and leans in it; faster clouds, whitecaps on the far sea."}],"start":[0,2,0,0.06],"measures":{"motion":0.1332,"detail":0.0357,"edges":0.189,"complexity":1.9213,"coverage":0.9971,"colour":0.3059,"drift":0.0544},"knobResponse":[0.1811,0.05,0.05,0.0489]},{"slug":"implosion","title":"Implosion","family":"construction","round":26,"note":"새벽 하늘 아래 스무 층 아파트에 장약 섬광이 층마다 타고 내려오면, 탑이 꺾이며 제자리로 주저앉고 회황색 먼지구름이 꼭대기까지 끓어올라요. 타임랩스로 비계 속에 새 탑이 서고, K1 을 누르면 바로 발파해요.","idea":"An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.","buttons":"K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.","code":"// ===== Patternflow pattern =====\n// Title:   Implosion\n// Family:  construction\n// Idea:    An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the explosive demolitions of 1960s concrete tower blocks\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1\n//\n// Knob 1: Light. Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust.\n// Knob 2: Speed. At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower.\n// Knob 3: Storeys. Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel.\n// Knob 4: Wind. Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it.\n// Buttons: K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = (a = 1) => Math.random() * a;\nconst side = () => (rnd() \u003c 0.5 ? -1 : 1);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every cx by cy cells.\nfunction vn(x, y, cx = 1e4, cy = 1e4) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (i, j) => hash(((i % cx) + cx) % cx, ((j % cy) + cy) % cy);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + h(xi + 1, yi + 1)) * su * sv;\n}\n\n// Ground row; the tower's front face from x 19 (22 wide) and side face (6).\nconst G = 110, X0 = 19, TW = 28, CX = 33;\n// One round at Speed 2, in seconds.\nconst T_CH = 2.4, T_FALL = 3, T_EX = 11, T_TL = 19, T_CLR = 25, T_RISE = 26.5, T_UP = 32.5, CYC = 36;\nconst MP = 240, PF = 12;\n// Dawn, morning, overcast, night: sky top, mid, horizon; ambient; sun; lit windows; floods; cloud lit, dark; cover.\nconst KEYS = [\n  [16, 30, 86, 52, 84, 156, 214, 146, 150, 0.4, 0.45, 0.66, 0.55, 0.32, 0.3, 0.34, 0.35, 236, 156, 156, 58, 60, 108, 0.5],\n  [46, 108, 206, 110, 164, 228, 236, 206, 160, 0.55, 0.58, 0.68, 1, 0.86, 0.62, 0.06, 0, 255, 244, 226, 150, 160, 190, 0.38],\n  [96, 102, 112, 136, 140, 146, 170, 170, 168, 0.66, 0.66, 0.68, 0.08, 0.08, 0.08, 0.12, 0.12, 190, 192, 196, 100, 104, 112, 0.9],\n  [3, 5, 18, 8, 14, 38, 34, 32, 58, 0.14, 0.15, 0.24, 0, 0, 0, 0.5, 1, 40, 38, 58, 12, 14, 28, 0.45],\n];\nconst TILE = [80, 110, 170], BRICK = [170, 84, 56], PALE = [190, 176, 150], RUST = [150, 80, 50], AMBER = [255, 150, 30];\nconst COATS = [[30, 34, 56], [56, 30, 36], [34, 46, 34], [50, 44, 34], [250, 120, 20]], SIL = [12, 12, 16], PHONE = [150, 180, 240];\nconst WIN = [204, 150, 83], GLASS = [60, 84, 110], MID = [0, 0, 0], LAMP = [200, 190, 150], DARK = [30, 28, 28], HOLE = [14, 12, 12], RED = [255, 40, 30];\nconst CON = [160, 154, 144], WARM = [255, 188, 104], YEL = [242, 182, 32], DUST0 = [150, 147, 142], DUST1 = [190, 164, 120];\nlet F, L, P;\n\nexport function setup(params) {\n  const f = (n) => new Float32Array(n);\n  P = params.s = { F: f(N * 3), NT: f(N), BA: f(N * 3), BU: f(N), BK: new Uint8Array(N), FL: f(N), SKY: f(H * 3), pf: f(MP * PF), np: 0, cr: [], T: 0, rt: 0, S: 0, cyc: 0, co: 0, w: 0 };\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.NT[i] = 0.5 * vn(x / 16, y / 16, 4, 8) + 0.3 * vn(x / 8, y / 8, 8, 16) + 0.2 * vn(x / 4, y / 4, 16, 32);\n    // Two floodlight masts by the fence aim up the tower.\n    for (const lx of [2, 61]) {\n      const dx = x - lx, dy = y - 82, dd = sqrt(dx * dx + dy * dy) + 0.5, ax = CX - lx, c = (dx * ax - dy * 32) / (dd * sqrt(ax * ax + 1024));\n      P.FL[i] += exp(-(1 - c) * 32) / (1 + dd / 40) + 0.9 * exp((-dd * dd) / 5);\n    }\n  }\n  scenery();\n  for (let x = 2; x \u003c 63; x += 3 + floor(rnd(3))) if (rnd() \u003c 0.85) P.cr.push([x, 111 + floor(rnd(4)), 4 + floor(rnd(3)), rnd(), rnd(), P.cr.length % 7 === 3 ? 4 : floor(rnd(4))]);\n  newRound();\n}\n\n// Street, site, two low blocks, far skyline and spire, chimney, a water cannon on a roof.\nfunction scenery() {\n  const top = [];\n  for (let x = 0; x \u003c W; ) for (let j = 0, w = 3 + rnd(6), t = 72 + rnd(16); j \u003c w && x \u003c W; j++) top[x++] = t;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, hh = hash(x, y), q = (x - 50) & 3;\n    let k = 2, c = 0, v = 1;\n    if (y > 118) (c = [58, 58, 64]), (v = 0.9 + 0.2 * hh);\n    else if (y === 118) c = [120, 118, 112];\n    else if (y >= G) (c = [118, 104, 86]), (v = 0.8 + 0.35 * hh);\n    else if (x > 50 && x \u003c 56 && y > 84 && y \u003c 90) c = abs(x - 53) + abs(y - 86.5) \u003c 1.6 ? [40, 44, 50] : [116, 120, 128];\n    else if (x \u003c 15 && y > 81) {\n      (c = y \u003c 84 ? [170, 160, 150] : [148, 92, 70]), (v = y \u003c 84 ? 1 : 0.88 + 0.2 * hash(x >> 1, y));\n      if (y > 85 && y \u003c 106 && x & 3 && (x & 3) \u003c 3 && (y - 86) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 48 && y > 89) {\n      (c = y \u003c 92 ? [190, 182, 170] : [176, 162, 138]), (v = 0.9 + 0.15 * hash(x, y >> 2));\n      if (y > 93 && y \u003c 108 && q && q \u003c 3 && (y - 94) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 55 && x \u003c 60 && y > 43) c = y === 44 ? [180, 172, 160] : y > 46 && y \u003c 54 && y % 5 > 1 && y % 5 \u003c 4 ? [176, 70, 56] : [150, 138, 124];\n    else if (y >= top[x] || (y > 57 && abs(x - 9) \u003c= (y - 58) / 6)) (k = 1), (c = [60, 66, 86]), (v = 0.85 + 0.25 * hash(x >> 2, 3));\n    else k = 0;\n    P.BK[i] = k;\n    if (c) for (let j = 0; j \u003c 3; j++) P.BA[i * 3 + j] = c[j] * v;\n  }\n}\n\n// The facade for S storeys: a kind per cell, each window's chance to be lit.\nfunction facade(S) {\n  const p = min(4, 100 / S), BH = round(S * p), BT = BH + 16, n = TW * BT, st = [], chg = [];\n  const A = new Float32Array(n), K = new Uint8Array(n), U = new Float32Array(n), RS = new Int16Array(BT).fill(-1);\n  for (let s = 0; s \u003c= S; s++) st.push(round(s * p));\n  for (let b = 0, s = 0; b \u003c BT; b++) {\n    while (s \u003c S - 1 && st[s + 1] \u003c= b) s++;\n    const r = b - st[s], wr = r === 1 || r === 2;\n    if (b \u003c BH) RS[b] = s;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = b * TW + c, bay = (c - 1) >> 2;\n      let k = 0, a = 0.92 + 0.14 * hash(s * 7 + bay, 11);\n      if (b \u003c BH) {\n        if (c \u003c 22) (k = !r ? 3 : c && c \u003c 21 && ((c - 1) & 3) \u003c 3 && wr ? 2 : 1), (U[j] = hash(s * 13 + bay, 3));\n        else (k = c > 23 && c \u003c 26 && wr ? 5 : 4), (a = c === 22 ? 1.15 : a), (U[j] = hash(s * 17 + c, 9));\n        if (!r) a *= 0.8;\n      } else if (b === BH) k = c \u003c 22 ? 6 : 0;\n      else if (b \u003c= BH + 4 && ((c > 4 && c \u003c 15) || (c > 15 && c \u003c 20 && b \u003c= BH + 3))) (k = 6), (a = 0.82);\n      else if (c === 10) k = b \u003c BT - 1 ? 7 : 8;\n      else if ((b === BH + 9 && c > 7 && c \u003c 13) || (b === BH + 7 && c === 11)) k = 7;\n      (K[j] = k), (A[j] = a);\n    }\n  }\n  for (let s = round(S * 0.78); s >= 2; s -= 3) chg.push(s);\n  Object.assign(P, { S, BH, BT, st, fa: A, fk: K, fu: U, rs: RS, chg: chg.concat([1, 0]), fold: st[round(S * 0.42)], fls: new Float32Array(S), bl: new Uint8Array(S) });\n}\n\nfunction newRound() {\n  Object.assign(P, { cyc: P.cyc + 1, dir: side(), fi: 0, b0: 0, b1: 0, pd1: 0, pc2: 0, a1: 0, a2: 0, bd: [] });\n  P.bl?.fill(0);\n  for (let j = 0; j \u003c 8; j++) P.bd.push([0, 0, 0, 0, rnd(6.28), 7 + rnd(10), 0, rnd(6)]);\n}\n\n// The lower floors give first; the upper block then folds into them.\nconst yS = (s) => G - 1 - (P.st[s] + P.st[s + 1]) / 2;\nconst fall = (tc) => (tc \u003c= 0 ? [0, 0] : [11 * tc * tc, tc > 0.5 ? 6 * (tc - 0.5) ** 2 : 0]);\nconst puff = (x, y, vx, vy, r, g, a, life, rise) => P.np \u003c MP && P.pf.set([x, y, vx, vy, r, r, g, a, 0, life, rise, rnd()], P.np++ * PF);\n// Dust from crushed floors: most climbs, some rolls out along the ground.\nfunction basePuff(kind) {\n  const x = X0 + rnd(TW), out = x - CX, roll = kind \u003c 2 && rnd() \u003c 0.4;\n  puff(x, G - 1 - rnd(4), out * 0.8 + rnd(12) - 6 + (roll ? Math.sign(out || 1) * (10 + rnd(10)) : 0), roll ? -1 - rnd(3) : -5 - rnd(12) - (kind > 1 ? 14 : 0), 3 + rnd(3), 2 + rnd(2.5), 1 + rnd(0.5), roll ? 12 + rnd(5) : 8.5 + rnd(5), roll ? 1 + rnd(3) : 8 + rnd(kind > 1 ? 30 : 24));\n}\n// A charge on storey s: its windows blow out and spit dust.\nfunction fire(s) {\n  const y = yS(s);\n  P.bl[s] = 1;\n  for (let n = 0; n \u003c 10; n++) {\n    const sd = n & 1 ? 1 : -1, ex = sd \u003c 0 ? X0 - 1 : X0 + TW;\n    puff(n \u003c 4 ? ex : X0 + 2 + rnd(TW - 4), y + rnd(2) - 1, sd * (n \u003c 4 ? 10 + rnd(12) : rnd(3)), -rnd(), 1 + rnd(0.8), 1.2 + rnd(), 0.7, 1.6 + rnd(), 0.5);\n  }\n  if (P.fi === 1) for (const b of P.bd) (b[6] = 1), (b[2] = (b[0] - CX) * 2 + rnd(14) - 7 + P.w * 14), (b[3] = -8 - rnd(14));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  P = params.s;\n  const k = input.knobValues || [0, 2, 20, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), S = round(cl(k[2], 20, 30)), w = (P.w = cl(k[3], -1, 1));\n  if (S !== P.S) facade(S);\n  P.rt += rd;\n  if (input.btnPressed?.[0]) P.T \u003c T_CH - 0.7 ? (P.T = T_CH - 0.7) : P.T >= T_TL && (newRound(), (P.T = T_CH - 0.7));\n  if ((P.T += d) >= CYC) newRound(), (P.T -= CYC);\n  const T = P.T, tl = 0.85 * sm(T_TL, T_TL + 1.2, T) * (1 - sm(CYC - 2.5, CYC - 0.4, T)), tc = T - T_FALL, [d1, c2] = T \u003c T_TL ? fall(tc) : [0, 0], cons = min(P.BT, d1 + c2), phM = 10 + S * 0.6;\n  // Time-lapse: a day every 2 s, and the clouds race.\n  const u = (P.he = mix(cl(k[0], 0, 1), 0.5 - 0.5 * cos(PI * (T - T_TL)), tl)) * 3, i = min(2, floor(u));\n  P.L = KEYS[i].map((v, j) => mix(v, KEYS[i + 1][j], u - i));\n  P.co += (w * 2 + tl * (w \u003c 0 ? -24 : 24)) * d;\n\n  // Charges, top to bottom, then the shudder.\n  while (P.fi \u003c P.chg.length && T >= T_CH + P.fi * 0.09 && T \u003c T_TL) fire(P.chg[P.fi++]);\n  P.gfl = 0;\n  P.chg.forEach((s, n) => (P.gfl = max(P.gfl, (P.fls[s] = T >= T_CH + n * 0.09 ? exp(-(T - T_CH - n * 0.09) * 9) : 0))));\n  P.shk = T > T_CH && T \u003c T_FALL + 0.6 ? round((rnd() - 0.5) * 2.6 * (1 - sm(T_FALL, T_FALL + 0.6, T))) : 0;\n\n  // The fall: dust where floors are crushed, at the foot and the fold.\n  if (tc > 0 && T \u003c T_TL) {\n    if (!P.b0) for (let n = (P.b0 = 24); n--; ) basePuff(1);\n    const e1 = max(0, d1 - P.pd1), e2 = max(0, c2 - P.pc2);\n    if (d1 + c2 \u003c P.BT) (P.a1 += e1 * 1.1), (P.a2 += e2 * 0.35);\n    for (; P.a1 >= 1; P.a1--) basePuff(0);\n    for (let sd; P.a2 >= 1; P.a2--) (sd = side()), puff(CX + sd * (8 + rnd(8)), min(G - 2, G - 1 - P.fold + d1), sd * (8 + rnd(14)), -2 - rnd(6), 2 + rnd(1.5), 3 + rnd(3), 0.7, 8 + rnd(4), 4 + rnd(6));\n    if (!P.b1 && cons >= P.BT) for (let n = (P.b1 = 20); n--; ) basePuff(2);\n    (P.pd1 = d1), (P.pc2 = c2);\n  }\n  P.ph = T \u003c T_FALL ? 0 : T \u003c T_TL ? phM * sm(0, 1, cons / P.BT) : phM * (1 - sm(T_TL + 0.5, T_CLR - 0.5, T));\n\n  // Puffs rise, slow, swell and drift, faster aloft.\n  const pf = P.pf, ex = 1 - exp(-0.7 * d), ey = 1 - exp(-0.9 * d);\n  for (let p = 0, q, age; p \u003c P.np; p++) {\n    if ((age = pf[(q = p * PF) + 8] += d) > pf[q + 9]) {\n      if (p-- \u003c --P.np) pf.copyWithin(q, P.np * PF, P.np * PF + PF);\n      continue;\n    }\n    pf[q + 2] += (w * (3 + 9 * (1 - pf[q + 1] / H)) - pf[q + 2]) * ex;\n    pf[q + 3] += (-pf[q + 10] * exp(-age / 4) - pf[q + 3]) * ey;\n    (pf[q] += pf[q + 2] * d), (pf[q + 1] = min(G - 0.35 * pf[q + 4], pf[q + 1] + pf[q + 3] * d)), (pf[q + 4] += (pf[q + 6] * d) / (1 + 0.4 * age));\n  }\n  const fly = (a, g, keep) => a.filter((b) => ((b[3] += g * d), (b[0] += b[2] * d), (b[1] += b[3] * d), keep(b)));\n  // Pigeons circle the roof until the first charge, then scatter.\n  for (const b of P.bd)\n    if (b[6]) fly([b], -4, () => 1), (b[7] += 14 * d);\n    else (b[4] += 0.9 * d), (b[0] = CX + cos(b[4]) * b[5] * 1.3), (b[1] = G - P.BH - 10 + sin(b[4]) * b[5] * 0.35), (b[7] += 9 * d);\n}\n\nconst idx = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] - F[o + j]) * a;\n}\nfunction add(x, y, c, k, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += c[j] * k;\n}\nfunction glow(x, y, c, k, r) {\n  for (let j = -r; j \u003c= r; j++) for (let i = -r; i \u003c= r; i++) add(x + i, y + j, c, k * exp(-(i * i + j * j) / (0.3 * r * r)));\n}\nconst lit = (c, m = 1, s = 0.5, f = 0) => [0, 1, 2].map((j) => c[j] * (L[9 + j] * m + L[12 + j] * s + f));\nfunction line(x0, y0, x1, y1, c) {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c);\n}\nconst fq = (x, y) => P.FL[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)] * L[16];\n\nfunction back() {\n  const { BA, BU, BK, FL, NT, SKY } = P, aw = abs(P.w), sx = 0.6 - 0.3 * aw, sh = 0.85 * P.w, sy = 1 + 0.8 * aw, th = 0.5 + (0.5 - L[23] - 0.15 * aw) * 0.32;\n  const sunV = 280 * sm(0.12, 0.3, P.he) * (1 - sm(0.42, 0.58, P.he)), night = sm(0.78, 1, P.he), fld = L[16], lw = L[15];\n  for (let y = 0; y \u003c H; y++) for (let c = 0, t = min(1, y / 96); c \u003c 3; c++) SKY[y * 3 + c] = mix(mix(L[c], L[3 + c], sm(0, 0.6, t)), L[6 + c], sm(0.4, 1, t) ** 2);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = BK[i], fb = fld * FL[i], so = y * 3;\n    if (!k) {\n      // Round clouds when calm, slanting streaks in wind; sun, moon, stars.\n      const n = NT[((floor(y * sy + 40) & 127) \u003c\u003c 6) | (floor(x * sx + y * sh + P.co) & 63)], cd = max(0, sm(th - 0.06, th + 0.08, n) * (1 - sm(66, 96, y)) * 0.9), lb = cl(0.15 + y / 110 + (n - th) * 2, 0, 1);\n      let sg = sunV > 0 ? sunV * exp(-((x - 9) ** 2 + (y - 60) ** 2) / 12) : 0;\n      if (night > 0) sg += night * (((x - 52) ** 2 + (y - 20) ** 2 \u003c 6) * 220 + (y \u003c 70 && hash(x, y) > 0.985 ? 90 + 60 * sin(P.rt * 3 + x) : 0));\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(SKY[so + c], mix(L[20 + c], L[17 + c], lb), cd) + sg * (1 - 0.15 * c) + (56 + 5 * c) * fb;\n    } else if (k === 3 && BU[i] \u003c lw * 1.1) F.set(WIN, o);\n    else {\n      const m = k === 3 ? 0.25 : 1, f = (y \u003c 84 ? 0.35 : 0.5) * (x \u003c 15 || x > 55 ? 1 : 0.6), gl = k === 3 ? 0.2 : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = k === 1 ? mix(BA[o + c] * L[9 + c], SKY[so + c], 0.55 - y / 400) : SKY[so + c] * gl + BA[o + c] * m * (L[9 + c] + L[12 + c] * f + fb * 0.6);\n    }\n  }\n  // Light masts; chimney smoke bending with the wind.\n  for (const lx of [2, 61]) {\n    for (let y = 82; y \u003c G; y++) put(lx, y, [30, 30, 34]);\n    if (fld > 0.05) put(lx, 82, [255, 250, 230], min(1, fld * 1.5));\n  }\n  const sc = lit([176, 172, 168]), ph = (P.rt * 0.5) % 1;\n  for (let j = 0; j \u003c 12; j++) {\n    const s = j + ph, x = 57.5 + P.w * (s * 2.2 + s * s * 0.14) + sin(P.rt * 0.7 + j) * 0.6, y = 42 - s * 2.4 * (1 - 0.55 * aw), r = 1.4 + s * 0.42, a = 0.45 * (1 - s / 12.5) * min(1, s);\n    for (let v = -ceil(r); v \u003c= r; v++) for (let u = -ceil(r), q; u \u003c= r; u++) if ((q = 1 - (u * u + v * v) / (r * r)) > 0) put(x + u, y + v, sc, a * q);\n  }\n}\n\n// The tower as it stands or falls. During the rebuild it rises in scaffolding.\nfunction tower() {\n  const { fa: A, fk: K, fu: U, rs: RS, FL, SKY, T, BT, BH, fold: F0 } = P, tc = T - T_FALL;\n  if (T >= T_TL && T \u003c T_RISE) return;\n  const reb = T >= T_RISE, built = reb ? BH * sm(T_RISE, T_UP, T) : BT, strip = reb ? BT * (1 - sm(T_UP, CYC - 0.6, T)) : 0, lw = L[15], fld = L[16], tick = floor(T * 20);\n  const [d1, c2] = reb ? [0, 0] : fall(tc), l1 = reb ? 0 : P.dir * 3 * sm(0.1, 1.2, tc), l2 = reb ? 0 : -P.dir * 10 * sm(0.3, 1.6, tc);\n  const scaf = lit([184, 186, 178]), net = lit([64, 124, 104]), slab = lit([130, 126, 118]), mast = lit([120, 124, 132]);\n  for (let y = max(0, G - BT - 1); y \u003c G; y++) {\n    // The block above the fold or the one under it; both shear.\n    let b = G - 1 + d1 + c2 - y, xo, up = 1;\n    if (b >= F0 + c2 && b \u003c BT) xo = l1 + (l2 * (b - F0 - c2)) / (BT - F0);\n    else if ((b = G - 1 + d1 - y) >= 0 && b \u003c F0) (xo = (l1 * b) / F0), (up = 0);\n    else continue;\n    const bi = floor(b), xs = round(xo + P.shk), s = RS[bi], fl = s >= 0 ? P.fls[s] : 0, rag = tc > 0 && !reb && (G - y \u003c 3 || (up && c2 > 0 && b - F0 - c2 \u003c 2));\n    const top = sm(70, 25, y), hy = (y >> 1) * 3, f2 = rag ? 0.55 : 1;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = bi * TW + c, k = K[j], x = X0 + c + xs;\n      if (!k || x \u003c 0 || x >= W || (rag && hash(x * 13 + y, tick) \u003c 0.4)) continue;\n      const o = (y * W + x) * 3, sd = k === 4 || k === 5, fq = FL[y * W + x] * fld;\n      let col = MID;\n      if (reb && (bi \u003c strip || (k > 5 && strip > BH))) {\n        if (bi >= built || k > 5) continue;\n        col = c % 3 === 0 || bi % 3 === 0 ? scaf : hash(c >> 2, bi >> 3) \u003c 0.4 ? net : k === 3 ? slab : hash(c >> 1, s) \u003c 0.12 ? LAMP : DARK;\n      } else if (k === 2 || k === 5) {\n        const v = sd ? 0.65 : 1;\n        if (s >= 0 && P.bl[s]) col = HOLE;\n        else if (U[j] \u003c lw) for (let q = 0, u = (0.7 + 0.3 * sin(U[j] * 60)) * v; q \u003c 3; q++) MID[q] = WARM[q] * u;\n        else for (let q = 0; q \u003c 3; q++) MID[q] = (SKY[hy + q] * 0.45 + L[6 + q] * 0.12 + 76 * fq) * v;\n      } else if (k === 7) col = mast;\n      else if (k === 8) col = (P.rt * 1.5) % 1 \u003c 0.5 ? RED : HOLE;\n      else for (let q = 0, m = sd ? 0.6 : 1, sn = (sd ? 0.06 : 0.55) + top * 0.4; q \u003c 3; q++) MID[q] = CON[q] * A[j] * (L[9 + q] * m + L[12 + q] * sn + fq * 1.6);\n      (F[o] = col[0] * f2 + fl * 300), (F[o + 1] = col[1] * f2 + fl * 250), (F[o + 2] = col[2] * f2 + fl * 170);\n    }\n  }\n  // Each charge lights the air by its floor.\n  for (const s of P.chg) {\n    const fl = P.fls[s], yc = yS(s);\n    if (fl > 0.02) for (let y = -6; y \u003c= 6; y++) for (let x = X0 - 9, dx; x \u003c X0 + TW + 9; x++) if ((dx = x \u003c X0 ? X0 - x : max(0, x - X0 - TW + 1))) add(x, yc + y, [255, 196, 120], fl * exp(-(dx * dx) / 12 - (y * y) / 8));\n  }\n}\n\nfunction pileH(x) {\n  const u = (x - CX) / 22;\n  return abs(u) >= 1 || P.ph \u003c 0.3 ? 0 : P.ph * (1 - u * u) ** 0.8 * (0.8 + 0.4 * vn(x * 0.25, P.cyc * 7)) + (hash(x, P.cyc) - 0.5) * 1.6 * min(1, P.ph / 4);\n}\n// Rubble: broken slabs, gaps, rebar and bits of painted rooms.\nfunction pile() {\n  if (P.ph \u003c 0.3) return;\n  for (let x = CX - 22; x \u003c= CX + 22; x++) {\n    const hp = pileH(x), sn = cl(0.45 - 0.3 * (pileH(x + 1) - pileH(x - 1)), 0, 1);\n    for (let y = round(G - hp), y0 = y; y \u003c G + 3; y++) {\n      const cx = floor((x + (y >> 1) * 1.7) / 3), v = hash(cx, (y >> 1) + P.cyc * 97), c = v > 0.96 ? TILE : v \u003c 0.05 ? BRICK : v > 0.9 ? PALE : CON, o = (y * W + x) * 3, f = fq(x, y);\n      let m = (1 - 0.35 * sm(0, 12, y - y0)) * (c === CON ? (0.65 + 0.45 * v) * (y & 1 ? 0.86 : 1.18) : 1);\n      if (y === y0 && hash(x, 9) \u003c 0.3) m = -1;\n      else if (hash(cx * 7 + x, y * 3 + P.cyc) \u003c 0.1) m *= 0.22;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = m \u003c 0 ? RUST[j] * (L[9 + j] + 0.3) : c[j] * m * (L[9 + j] + L[12 + j] * sn + f);\n    }\n  }\n}\n\n// Two long-reach diggers climb the heap and pick it apart.\nfunction digger(x, f, ph) {\n  const g = round(G - max(0, pileH(x) - 1)), q = fq(x, g) + 0.32, Y = lit(YEL, 1, 0.6, q), Yd = Y.map((v) => v * 0.7), D = lit([70, 68, 66], 1, 0.5, q);\n  for (let i = -4; i \u003c= 4; i++) put(x + i, g - 1, D, i & 1 ? 1 : 0.4), put(x + i, g - 2, D);\n  for (let i = -5; i \u003c= 2; i++) for (let j = 3; j \u003c= 5; j++) put(x + i * f, g - j, i \u003c -3 ? Yd : Y);\n  for (let j = 6; j \u003c= 9; j++) for (let i = 1; i \u003c= 3; i++) put(x + i * f, g - j, i === 2 && j > 6 && j \u003c 9 ? GLASS : Y);\n  const a1 = 1 + 0.3 * sin(ph), bx = x + 2 * f, by = g - 5, ex = bx + f * cos(a1) * 11, ey = by - sin(a1) * 11, a2 = -1.2 + 0.5 * sin(ph + 1.3), kx = ex + f * cos(a2) * 8, ky = ey - sin(a2) * 8;\n  line(bx, by, ex, ey, Y), line(bx - f, by, ex - f, ey, Yd), line(ex, ey, kx, ky, Y);\n  for (let i = 0; i \u003c 2; i++) for (let j = 0; j \u003c 3; j++) put(kx + i * f, ky + j, D);\n  if ((P.rt * 1.6 + f * 0.25) % 1 \u003c 0.5) glow(x + 2 * f, g - 10, AMBER, 0.45, 2);\n}\nfunction machines() {\n  const T = P.T, out = sm(T_CLR - 1, T_CLR + 0.5, T);\n  if (T > T_EX && T \u003c T_CLR + 1)\n    for (const [x0, xa, f, j] of [[-10, CX - 13, 1, 0], [76, CX + 13, -1, 1]])\n      digger(round(mix(mix(x0, xa, sm(T_EX + j, T_EX + 2.5 + j, T)), x0, out)), f, T * (T > T_TL ? 9 : 2.2) + j * 2);\n}\n\n// Fence, mesh, barrier tape; siren lights on two posts.\nfunction fence() {\n  const mc = lit([150, 152, 158]), pc = lit([96, 98, 104]), tape = lit([250, 210, 40], 1, 0.5, 0.15);\n  for (let y = 102; y \u003c 118; y++) for (let x = 0; x \u003c W; x++) x % 12 === 5 || y === 102 ? put(x, y, pc) : ((x + y) % 3 === 0 || (x - y + 300) % 3 === 0) && put(x, y, mc, 0.28);\n  for (let x = 0; x \u003c W; x++) put(x, 107 + round(sin(x * 0.6 + P.rt * 5) * (0.3 + abs(P.w))), (x + 40) % 4 \u003c 2 ? tape : SIL);\n  for (const [x, s] of [[5, 0], [53, 0.5]]) {\n    const on = P.T \u003c T_FALL + 0.8 && (P.rt * 2.5 + s) % 1 \u003c 0.45;\n    put(x, 100, on ? [255, 190, 80] : [90, 50, 20]);\n    if (on) glow(x, 100, AMBER, 0.6, 5);\n  }\n}\n\n// Each puff is a grainy ball lit by sun and sky, laid over the last, so billows keep their edges.\nfunction dust() {\n  const { NT, pf, FL } = P, fld = L[16] * 1.8, gf = P.gfl * 0.6, [L9, L10, L11, L12, L13, L14] = L.slice(9, 15);\n  for (let p = 0; p \u003c P.np; p++) {\n    const q = p * PF, px = pf[q], py = pf[q + 1], r = pf[q + 4], age = pf[q + 8], life = pf[q + 9];\n    const a = pf[q + 7] * sm(0, 0.25, age) * (1 - sm(0.4 * life, life, age)) * (pf[q + 5] / r) ** 0.35;\n    if (a \u003c 0.01) continue;\n    const t = pf[q + 11], ox = (p * 23) & 63, oy = p * 41 + floor(age * 3), ir = 1 / r, pb = 0.85 + 0.3 * hash(p, P.cyc);\n    const [a0, a1, a2] = DUST0.map((v, c) => mix(v, DUST1[c], t) * pb);\n    for (let y = max(0, ceil(py - r)), y1 = min(H - 1, floor(py + r)); y \u003c= y1; y++) {\n      const dy = (y - py) * ir, dy2 = dy * dy, row = y * W, nr = ((y + oy) & 127) \u003c\u003c 6, sh = 0.45 + 0.55 * sm(G, 40, y), sk = 0.8 - 0.25 * dy;\n      for (let x = max(0, ceil(px - r)), x1 = min(W - 1, floor(px + r)); x \u003c= x1; x++) {\n        const dx = (x - px) * ir, d2 = dx * dx + dy2;\n        if (d2 >= 1) continue;\n        const n = NT[nr | ((x + ox) & 63)];\n        let e = 2 - d2 * (0.7 + 2.4 * n);\n        if (e \u003c= 0.02) continue;\n        if (e > 1) e = 1;\n        const k = min(0.95, a * e * e * (3 - 2 * e)), i = row + x, o = i * 3, l = -0.6 * dx - 0.5 * dy + 0.62 * sqrt(1 - d2);\n        const gr = 0.4 + 1.2 * n, sun = (0.25 + 0.8 * (l > 0 ? l : 0)) * sh * gr, sky = sk * (0.55 + 0.45 * gr), fl = FL[i] * fld + gf;\n        F[o] += (a0 * (L9 * sky + L12 * sun + fl) - F[o]) * k;\n        F[o + 1] += (a1 * (L10 * sky + L13 * sun + fl) - F[o + 1]) * k;\n        F[o + 2] += (a2 * (L11 * sky + L14 * sun + fl) - F[o + 2]) * k;\n      }\n    }\n  }\n}\n\n// The crowd: coats, marshals in hi-vis, phones up once the siren goes.\nfunction people() {\n  const T = P.T, ph = T > T_CH - 1.5 && T \u003c T_TL ? 0.6 : 0.12, vest = lit(COATS[4], 1, 0.5, 0.2), strip = lit([220, 220, 210], 1, 0.5, 0.3);\n  for (const [x, hy, w, r1, , cc] of P.cr) {\n    const hw = w >> 1, coat = lit(COATS[cc & 3], 0.5, 0.25, 0.1);\n    for (let y = hy + 3, e; y \u003c H; y++) for (let i = -hw + (e = y === hy + 3); i \u003c= hw - !(w & 1) - e; i++) put(x + i, y, cc > 3 && y > hy + 3 && y \u003c hy + 9 ? (y === hy + 6 ? strip : vest) : coat);\n    for (let j = 0; j \u003c 3; j++) for (let i = -1; i \u003c= 1; i++) if (j || !i) put(x + i, hy + j, SIL);\n    if (r1 \u003c ph) {\n      const sc = T > T_CH && T \u003c 11 && hash(floor(P.rt * 30), x) \u003c 0.015 ? [255, 255, 255] : PHONE;\n      for (let j = -2; j \u003c 3; j++) put(x + 2, hy + j, j \u003c 0 ? sc : SIL);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  P = params.s;\n  if (!P || !P.L || !P.fk) return;\n  (F = P.F), (L = P.L);\n  back();\n  tower();\n  pile();\n  machines();\n  fence();\n  const wl = lit([170, 190, 210], 1, 0.5, 0.2), bc = L[16] > 0.7 ? [140, 140, 150] : [24, 24, 30];\n  // The water cannon on the right roof wets the site.\n  for (let j = 0, t; j \u003c 60 && P.T > 1 && P.T \u003c T_TL; j++) (t = ((j * 0.618 + P.rt * 0.8) % 1) * 1.5), add(52 + (P.w * 6 - 15 - 6 * hash(j, 5)) * t, 86 - (10 + 5 * hash(j, 6)) * t + 13 * t * t, wl, 0.2);\n  dust();\n  for (const [x, y, , , , , , fp] of P.bd) for (let i = -1, up = sin(fp) > 0 ? -1 : 0; i \u003c 2; i++) put(x + i, y + (i ? up : 0), bc);\n  people();\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, cl(F[o], 0, 255) | 0, cl(F[o + 1], 0, 255) | 0, cl(F[o + 2], 0, 255) | 0);\n}\n","layer":{"id":"layer-implosion","type":"code","name":"implosion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Implosion\n// Family:  construction\n// Idea:    An old tower block comes down at dawn: charges ripple down the floors, it folds into its footprint under a grey-ochre dust cloud that boils up to the top and drifts off, and in time-lapse a new tower rises in scaffolding.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the explosive demolitions of 1960s concrete tower blocks\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1\n//\n// Knob 1: Light. Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust.\n// Knob 2: Speed. At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower.\n// Knob 3: Storeys. Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel.\n// Knob 4: Wind. Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it.\n// Buttons: K1 tap detonates now: the siren, then the charges. During the rebuild it finishes the tower first.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = (a = 1) => Math.random() * a;\nconst side = () => (rnd() \u003c 0.5 ? -1 : 1);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every cx by cy cells.\nfunction vn(x, y, cx = 1e4, cy = 1e4) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (i, j) => hash(((i % cx) + cx) % cx, ((j % cy) + cy) % cy);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + h(xi + 1, yi + 1)) * su * sv;\n}\n\n// Ground row; the tower's front face from x 19 (22 wide) and side face (6).\nconst G = 110, X0 = 19, TW = 28, CX = 33;\n// One round at Speed 2, in seconds.\nconst T_CH = 2.4, T_FALL = 3, T_EX = 11, T_TL = 19, T_CLR = 25, T_RISE = 26.5, T_UP = 32.5, CYC = 36;\nconst MP = 240, PF = 12;\n// Dawn, morning, overcast, night: sky top, mid, horizon; ambient; sun; lit windows; floods; cloud lit, dark; cover.\nconst KEYS = [\n  [16, 30, 86, 52, 84, 156, 214, 146, 150, 0.4, 0.45, 0.66, 0.55, 0.32, 0.3, 0.34, 0.35, 236, 156, 156, 58, 60, 108, 0.5],\n  [46, 108, 206, 110, 164, 228, 236, 206, 160, 0.55, 0.58, 0.68, 1, 0.86, 0.62, 0.06, 0, 255, 244, 226, 150, 160, 190, 0.38],\n  [96, 102, 112, 136, 140, 146, 170, 170, 168, 0.66, 0.66, 0.68, 0.08, 0.08, 0.08, 0.12, 0.12, 190, 192, 196, 100, 104, 112, 0.9],\n  [3, 5, 18, 8, 14, 38, 34, 32, 58, 0.14, 0.15, 0.24, 0, 0, 0, 0.5, 1, 40, 38, 58, 12, 14, 28, 0.45],\n];\nconst TILE = [80, 110, 170], BRICK = [170, 84, 56], PALE = [190, 176, 150], RUST = [150, 80, 50], AMBER = [255, 150, 30];\nconst COATS = [[30, 34, 56], [56, 30, 36], [34, 46, 34], [50, 44, 34], [250, 120, 20]], SIL = [12, 12, 16], PHONE = [150, 180, 240];\nconst WIN = [204, 150, 83], GLASS = [60, 84, 110], MID = [0, 0, 0], LAMP = [200, 190, 150], DARK = [30, 28, 28], HOLE = [14, 12, 12], RED = [255, 40, 30];\nconst CON = [160, 154, 144], WARM = [255, 188, 104], YEL = [242, 182, 32], DUST0 = [150, 147, 142], DUST1 = [190, 164, 120];\nlet F, L, P;\n\nexport function setup(params) {\n  const f = (n) => new Float32Array(n);\n  P = params.s = { F: f(N * 3), NT: f(N), BA: f(N * 3), BU: f(N), BK: new Uint8Array(N), FL: f(N), SKY: f(H * 3), pf: f(MP * PF), np: 0, cr: [], T: 0, rt: 0, S: 0, cyc: 0, co: 0, w: 0 };\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.NT[i] = 0.5 * vn(x / 16, y / 16, 4, 8) + 0.3 * vn(x / 8, y / 8, 8, 16) + 0.2 * vn(x / 4, y / 4, 16, 32);\n    // Two floodlight masts by the fence aim up the tower.\n    for (const lx of [2, 61]) {\n      const dx = x - lx, dy = y - 82, dd = sqrt(dx * dx + dy * dy) + 0.5, ax = CX - lx, c = (dx * ax - dy * 32) / (dd * sqrt(ax * ax + 1024));\n      P.FL[i] += exp(-(1 - c) * 32) / (1 + dd / 40) + 0.9 * exp((-dd * dd) / 5);\n    }\n  }\n  scenery();\n  for (let x = 2; x \u003c 63; x += 3 + floor(rnd(3))) if (rnd() \u003c 0.85) P.cr.push([x, 111 + floor(rnd(4)), 4 + floor(rnd(3)), rnd(), rnd(), P.cr.length % 7 === 3 ? 4 : floor(rnd(4))]);\n  newRound();\n}\n\n// Street, site, two low blocks, far skyline and spire, chimney, a water cannon on a roof.\nfunction scenery() {\n  const top = [];\n  for (let x = 0; x \u003c W; ) for (let j = 0, w = 3 + rnd(6), t = 72 + rnd(16); j \u003c w && x \u003c W; j++) top[x++] = t;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, hh = hash(x, y), q = (x - 50) & 3;\n    let k = 2, c = 0, v = 1;\n    if (y > 118) (c = [58, 58, 64]), (v = 0.9 + 0.2 * hh);\n    else if (y === 118) c = [120, 118, 112];\n    else if (y >= G) (c = [118, 104, 86]), (v = 0.8 + 0.35 * hh);\n    else if (x > 50 && x \u003c 56 && y > 84 && y \u003c 90) c = abs(x - 53) + abs(y - 86.5) \u003c 1.6 ? [40, 44, 50] : [116, 120, 128];\n    else if (x \u003c 15 && y > 81) {\n      (c = y \u003c 84 ? [170, 160, 150] : [148, 92, 70]), (v = y \u003c 84 ? 1 : 0.88 + 0.2 * hash(x >> 1, y));\n      if (y > 85 && y \u003c 106 && x & 3 && (x & 3) \u003c 3 && (y - 86) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 48 && y > 89) {\n      (c = y \u003c 92 ? [190, 182, 170] : [176, 162, 138]), (v = 0.9 + 0.15 * hash(x, y >> 2));\n      if (y > 93 && y \u003c 108 && q && q \u003c 3 && (y - 94) % 4 \u003c 2) (k = 3), (P.BU[i] = hh);\n    } else if (x > 55 && x \u003c 60 && y > 43) c = y === 44 ? [180, 172, 160] : y > 46 && y \u003c 54 && y % 5 > 1 && y % 5 \u003c 4 ? [176, 70, 56] : [150, 138, 124];\n    else if (y >= top[x] || (y > 57 && abs(x - 9) \u003c= (y - 58) / 6)) (k = 1), (c = [60, 66, 86]), (v = 0.85 + 0.25 * hash(x >> 2, 3));\n    else k = 0;\n    P.BK[i] = k;\n    if (c) for (let j = 0; j \u003c 3; j++) P.BA[i * 3 + j] = c[j] * v;\n  }\n}\n\n// The facade for S storeys: a kind per cell, each window's chance to be lit.\nfunction facade(S) {\n  const p = min(4, 100 / S), BH = round(S * p), BT = BH + 16, n = TW * BT, st = [], chg = [];\n  const A = new Float32Array(n), K = new Uint8Array(n), U = new Float32Array(n), RS = new Int16Array(BT).fill(-1);\n  for (let s = 0; s \u003c= S; s++) st.push(round(s * p));\n  for (let b = 0, s = 0; b \u003c BT; b++) {\n    while (s \u003c S - 1 && st[s + 1] \u003c= b) s++;\n    const r = b - st[s], wr = r === 1 || r === 2;\n    if (b \u003c BH) RS[b] = s;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = b * TW + c, bay = (c - 1) >> 2;\n      let k = 0, a = 0.92 + 0.14 * hash(s * 7 + bay, 11);\n      if (b \u003c BH) {\n        if (c \u003c 22) (k = !r ? 3 : c && c \u003c 21 && ((c - 1) & 3) \u003c 3 && wr ? 2 : 1), (U[j] = hash(s * 13 + bay, 3));\n        else (k = c > 23 && c \u003c 26 && wr ? 5 : 4), (a = c === 22 ? 1.15 : a), (U[j] = hash(s * 17 + c, 9));\n        if (!r) a *= 0.8;\n      } else if (b === BH) k = c \u003c 22 ? 6 : 0;\n      else if (b \u003c= BH + 4 && ((c > 4 && c \u003c 15) || (c > 15 && c \u003c 20 && b \u003c= BH + 3))) (k = 6), (a = 0.82);\n      else if (c === 10) k = b \u003c BT - 1 ? 7 : 8;\n      else if ((b === BH + 9 && c > 7 && c \u003c 13) || (b === BH + 7 && c === 11)) k = 7;\n      (K[j] = k), (A[j] = a);\n    }\n  }\n  for (let s = round(S * 0.78); s >= 2; s -= 3) chg.push(s);\n  Object.assign(P, { S, BH, BT, st, fa: A, fk: K, fu: U, rs: RS, chg: chg.concat([1, 0]), fold: st[round(S * 0.42)], fls: new Float32Array(S), bl: new Uint8Array(S) });\n}\n\nfunction newRound() {\n  Object.assign(P, { cyc: P.cyc + 1, dir: side(), fi: 0, b0: 0, b1: 0, pd1: 0, pc2: 0, a1: 0, a2: 0, bd: [] });\n  P.bl?.fill(0);\n  for (let j = 0; j \u003c 8; j++) P.bd.push([0, 0, 0, 0, rnd(6.28), 7 + rnd(10), 0, rnd(6)]);\n}\n\n// The lower floors give first; the upper block then folds into them.\nconst yS = (s) => G - 1 - (P.st[s] + P.st[s + 1]) / 2;\nconst fall = (tc) => (tc \u003c= 0 ? [0, 0] : [11 * tc * tc, tc > 0.5 ? 6 * (tc - 0.5) ** 2 : 0]);\nconst puff = (x, y, vx, vy, r, g, a, life, rise) => P.np \u003c MP && P.pf.set([x, y, vx, vy, r, r, g, a, 0, life, rise, rnd()], P.np++ * PF);\n// Dust from crushed floors: most climbs, some rolls out along the ground.\nfunction basePuff(kind) {\n  const x = X0 + rnd(TW), out = x - CX, roll = kind \u003c 2 && rnd() \u003c 0.4;\n  puff(x, G - 1 - rnd(4), out * 0.8 + rnd(12) - 6 + (roll ? Math.sign(out || 1) * (10 + rnd(10)) : 0), roll ? -1 - rnd(3) : -5 - rnd(12) - (kind > 1 ? 14 : 0), 3 + rnd(3), 2 + rnd(2.5), 1 + rnd(0.5), roll ? 12 + rnd(5) : 8.5 + rnd(5), roll ? 1 + rnd(3) : 8 + rnd(kind > 1 ? 30 : 24));\n}\n// A charge on storey s: its windows blow out and spit dust.\nfunction fire(s) {\n  const y = yS(s);\n  P.bl[s] = 1;\n  for (let n = 0; n \u003c 10; n++) {\n    const sd = n & 1 ? 1 : -1, ex = sd \u003c 0 ? X0 - 1 : X0 + TW;\n    puff(n \u003c 4 ? ex : X0 + 2 + rnd(TW - 4), y + rnd(2) - 1, sd * (n \u003c 4 ? 10 + rnd(12) : rnd(3)), -rnd(), 1 + rnd(0.8), 1.2 + rnd(), 0.7, 1.6 + rnd(), 0.5);\n  }\n  if (P.fi === 1) for (const b of P.bd) (b[6] = 1), (b[2] = (b[0] - CX) * 2 + rnd(14) - 7 + P.w * 14), (b[3] = -8 - rnd(14));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  P = params.s;\n  const k = input.knobValues || [0, 2, 20, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), S = round(cl(k[2], 20, 30)), w = (P.w = cl(k[3], -1, 1));\n  if (S !== P.S) facade(S);\n  P.rt += rd;\n  if (input.btnPressed?.[0]) P.T \u003c T_CH - 0.7 ? (P.T = T_CH - 0.7) : P.T >= T_TL && (newRound(), (P.T = T_CH - 0.7));\n  if ((P.T += d) >= CYC) newRound(), (P.T -= CYC);\n  const T = P.T, tl = 0.85 * sm(T_TL, T_TL + 1.2, T) * (1 - sm(CYC - 2.5, CYC - 0.4, T)), tc = T - T_FALL, [d1, c2] = T \u003c T_TL ? fall(tc) : [0, 0], cons = min(P.BT, d1 + c2), phM = 10 + S * 0.6;\n  // Time-lapse: a day every 2 s, and the clouds race.\n  const u = (P.he = mix(cl(k[0], 0, 1), 0.5 - 0.5 * cos(PI * (T - T_TL)), tl)) * 3, i = min(2, floor(u));\n  P.L = KEYS[i].map((v, j) => mix(v, KEYS[i + 1][j], u - i));\n  P.co += (w * 2 + tl * (w \u003c 0 ? -24 : 24)) * d;\n\n  // Charges, top to bottom, then the shudder.\n  while (P.fi \u003c P.chg.length && T >= T_CH + P.fi * 0.09 && T \u003c T_TL) fire(P.chg[P.fi++]);\n  P.gfl = 0;\n  P.chg.forEach((s, n) => (P.gfl = max(P.gfl, (P.fls[s] = T >= T_CH + n * 0.09 ? exp(-(T - T_CH - n * 0.09) * 9) : 0))));\n  P.shk = T > T_CH && T \u003c T_FALL + 0.6 ? round((rnd() - 0.5) * 2.6 * (1 - sm(T_FALL, T_FALL + 0.6, T))) : 0;\n\n  // The fall: dust where floors are crushed, at the foot and the fold.\n  if (tc > 0 && T \u003c T_TL) {\n    if (!P.b0) for (let n = (P.b0 = 24); n--; ) basePuff(1);\n    const e1 = max(0, d1 - P.pd1), e2 = max(0, c2 - P.pc2);\n    if (d1 + c2 \u003c P.BT) (P.a1 += e1 * 1.1), (P.a2 += e2 * 0.35);\n    for (; P.a1 >= 1; P.a1--) basePuff(0);\n    for (let sd; P.a2 >= 1; P.a2--) (sd = side()), puff(CX + sd * (8 + rnd(8)), min(G - 2, G - 1 - P.fold + d1), sd * (8 + rnd(14)), -2 - rnd(6), 2 + rnd(1.5), 3 + rnd(3), 0.7, 8 + rnd(4), 4 + rnd(6));\n    if (!P.b1 && cons >= P.BT) for (let n = (P.b1 = 20); n--; ) basePuff(2);\n    (P.pd1 = d1), (P.pc2 = c2);\n  }\n  P.ph = T \u003c T_FALL ? 0 : T \u003c T_TL ? phM * sm(0, 1, cons / P.BT) : phM * (1 - sm(T_TL + 0.5, T_CLR - 0.5, T));\n\n  // Puffs rise, slow, swell and drift, faster aloft.\n  const pf = P.pf, ex = 1 - exp(-0.7 * d), ey = 1 - exp(-0.9 * d);\n  for (let p = 0, q, age; p \u003c P.np; p++) {\n    if ((age = pf[(q = p * PF) + 8] += d) > pf[q + 9]) {\n      if (p-- \u003c --P.np) pf.copyWithin(q, P.np * PF, P.np * PF + PF);\n      continue;\n    }\n    pf[q + 2] += (w * (3 + 9 * (1 - pf[q + 1] / H)) - pf[q + 2]) * ex;\n    pf[q + 3] += (-pf[q + 10] * exp(-age / 4) - pf[q + 3]) * ey;\n    (pf[q] += pf[q + 2] * d), (pf[q + 1] = min(G - 0.35 * pf[q + 4], pf[q + 1] + pf[q + 3] * d)), (pf[q + 4] += (pf[q + 6] * d) / (1 + 0.4 * age));\n  }\n  const fly = (a, g, keep) => a.filter((b) => ((b[3] += g * d), (b[0] += b[2] * d), (b[1] += b[3] * d), keep(b)));\n  // Pigeons circle the roof until the first charge, then scatter.\n  for (const b of P.bd)\n    if (b[6]) fly([b], -4, () => 1), (b[7] += 14 * d);\n    else (b[4] += 0.9 * d), (b[0] = CX + cos(b[4]) * b[5] * 1.3), (b[1] = G - P.BH - 10 + sin(b[4]) * b[5] * 0.35), (b[7] += 9 * d);\n}\n\nconst idx = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += (c[j] - F[o + j]) * a;\n}\nfunction add(x, y, c, k, o = idx(x, y)) {\n  if (o >= 0) for (let j = 0; j \u003c 3; j++) F[o + j] += c[j] * k;\n}\nfunction glow(x, y, c, k, r) {\n  for (let j = -r; j \u003c= r; j++) for (let i = -r; i \u003c= r; i++) add(x + i, y + j, c, k * exp(-(i * i + j * j) / (0.3 * r * r)));\n}\nconst lit = (c, m = 1, s = 0.5, f = 0) => [0, 1, 2].map((j) => c[j] * (L[9 + j] * m + L[12 + j] * s + f));\nfunction line(x0, y0, x1, y1, c) {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c);\n}\nconst fq = (x, y) => P.FL[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)] * L[16];\n\nfunction back() {\n  const { BA, BU, BK, FL, NT, SKY } = P, aw = abs(P.w), sx = 0.6 - 0.3 * aw, sh = 0.85 * P.w, sy = 1 + 0.8 * aw, th = 0.5 + (0.5 - L[23] - 0.15 * aw) * 0.32;\n  const sunV = 280 * sm(0.12, 0.3, P.he) * (1 - sm(0.42, 0.58, P.he)), night = sm(0.78, 1, P.he), fld = L[16], lw = L[15];\n  for (let y = 0; y \u003c H; y++) for (let c = 0, t = min(1, y / 96); c \u003c 3; c++) SKY[y * 3 + c] = mix(mix(L[c], L[3 + c], sm(0, 0.6, t)), L[6 + c], sm(0.4, 1, t) ** 2);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, k = BK[i], fb = fld * FL[i], so = y * 3;\n    if (!k) {\n      // Round clouds when calm, slanting streaks in wind; sun, moon, stars.\n      const n = NT[((floor(y * sy + 40) & 127) \u003c\u003c 6) | (floor(x * sx + y * sh + P.co) & 63)], cd = max(0, sm(th - 0.06, th + 0.08, n) * (1 - sm(66, 96, y)) * 0.9), lb = cl(0.15 + y / 110 + (n - th) * 2, 0, 1);\n      let sg = sunV > 0 ? sunV * exp(-((x - 9) ** 2 + (y - 60) ** 2) / 12) : 0;\n      if (night > 0) sg += night * (((x - 52) ** 2 + (y - 20) ** 2 \u003c 6) * 220 + (y \u003c 70 && hash(x, y) > 0.985 ? 90 + 60 * sin(P.rt * 3 + x) : 0));\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(SKY[so + c], mix(L[20 + c], L[17 + c], lb), cd) + sg * (1 - 0.15 * c) + (56 + 5 * c) * fb;\n    } else if (k === 3 && BU[i] \u003c lw * 1.1) F.set(WIN, o);\n    else {\n      const m = k === 3 ? 0.25 : 1, f = (y \u003c 84 ? 0.35 : 0.5) * (x \u003c 15 || x > 55 ? 1 : 0.6), gl = k === 3 ? 0.2 : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = k === 1 ? mix(BA[o + c] * L[9 + c], SKY[so + c], 0.55 - y / 400) : SKY[so + c] * gl + BA[o + c] * m * (L[9 + c] + L[12 + c] * f + fb * 0.6);\n    }\n  }\n  // Light masts; chimney smoke bending with the wind.\n  for (const lx of [2, 61]) {\n    for (let y = 82; y \u003c G; y++) put(lx, y, [30, 30, 34]);\n    if (fld > 0.05) put(lx, 82, [255, 250, 230], min(1, fld * 1.5));\n  }\n  const sc = lit([176, 172, 168]), ph = (P.rt * 0.5) % 1;\n  for (let j = 0; j \u003c 12; j++) {\n    const s = j + ph, x = 57.5 + P.w * (s * 2.2 + s * s * 0.14) + sin(P.rt * 0.7 + j) * 0.6, y = 42 - s * 2.4 * (1 - 0.55 * aw), r = 1.4 + s * 0.42, a = 0.45 * (1 - s / 12.5) * min(1, s);\n    for (let v = -ceil(r); v \u003c= r; v++) for (let u = -ceil(r), q; u \u003c= r; u++) if ((q = 1 - (u * u + v * v) / (r * r)) > 0) put(x + u, y + v, sc, a * q);\n  }\n}\n\n// The tower as it stands or falls. During the rebuild it rises in scaffolding.\nfunction tower() {\n  const { fa: A, fk: K, fu: U, rs: RS, FL, SKY, T, BT, BH, fold: F0 } = P, tc = T - T_FALL;\n  if (T >= T_TL && T \u003c T_RISE) return;\n  const reb = T >= T_RISE, built = reb ? BH * sm(T_RISE, T_UP, T) : BT, strip = reb ? BT * (1 - sm(T_UP, CYC - 0.6, T)) : 0, lw = L[15], fld = L[16], tick = floor(T * 20);\n  const [d1, c2] = reb ? [0, 0] : fall(tc), l1 = reb ? 0 : P.dir * 3 * sm(0.1, 1.2, tc), l2 = reb ? 0 : -P.dir * 10 * sm(0.3, 1.6, tc);\n  const scaf = lit([184, 186, 178]), net = lit([64, 124, 104]), slab = lit([130, 126, 118]), mast = lit([120, 124, 132]);\n  for (let y = max(0, G - BT - 1); y \u003c G; y++) {\n    // The block above the fold or the one under it; both shear.\n    let b = G - 1 + d1 + c2 - y, xo, up = 1;\n    if (b >= F0 + c2 && b \u003c BT) xo = l1 + (l2 * (b - F0 - c2)) / (BT - F0);\n    else if ((b = G - 1 + d1 - y) >= 0 && b \u003c F0) (xo = (l1 * b) / F0), (up = 0);\n    else continue;\n    const bi = floor(b), xs = round(xo + P.shk), s = RS[bi], fl = s >= 0 ? P.fls[s] : 0, rag = tc > 0 && !reb && (G - y \u003c 3 || (up && c2 > 0 && b - F0 - c2 \u003c 2));\n    const top = sm(70, 25, y), hy = (y >> 1) * 3, f2 = rag ? 0.55 : 1;\n    for (let c = 0; c \u003c TW; c++) {\n      const j = bi * TW + c, k = K[j], x = X0 + c + xs;\n      if (!k || x \u003c 0 || x >= W || (rag && hash(x * 13 + y, tick) \u003c 0.4)) continue;\n      const o = (y * W + x) * 3, sd = k === 4 || k === 5, fq = FL[y * W + x] * fld;\n      let col = MID;\n      if (reb && (bi \u003c strip || (k > 5 && strip > BH))) {\n        if (bi >= built || k > 5) continue;\n        col = c % 3 === 0 || bi % 3 === 0 ? scaf : hash(c >> 2, bi >> 3) \u003c 0.4 ? net : k === 3 ? slab : hash(c >> 1, s) \u003c 0.12 ? LAMP : DARK;\n      } else if (k === 2 || k === 5) {\n        const v = sd ? 0.65 : 1;\n        if (s >= 0 && P.bl[s]) col = HOLE;\n        else if (U[j] \u003c lw) for (let q = 0, u = (0.7 + 0.3 * sin(U[j] * 60)) * v; q \u003c 3; q++) MID[q] = WARM[q] * u;\n        else for (let q = 0; q \u003c 3; q++) MID[q] = (SKY[hy + q] * 0.45 + L[6 + q] * 0.12 + 76 * fq) * v;\n      } else if (k === 7) col = mast;\n      else if (k === 8) col = (P.rt * 1.5) % 1 \u003c 0.5 ? RED : HOLE;\n      else for (let q = 0, m = sd ? 0.6 : 1, sn = (sd ? 0.06 : 0.55) + top * 0.4; q \u003c 3; q++) MID[q] = CON[q] * A[j] * (L[9 + q] * m + L[12 + q] * sn + fq * 1.6);\n      (F[o] = col[0] * f2 + fl * 300), (F[o + 1] = col[1] * f2 + fl * 250), (F[o + 2] = col[2] * f2 + fl * 170);\n    }\n  }\n  // Each charge lights the air by its floor.\n  for (const s of P.chg) {\n    const fl = P.fls[s], yc = yS(s);\n    if (fl > 0.02) for (let y = -6; y \u003c= 6; y++) for (let x = X0 - 9, dx; x \u003c X0 + TW + 9; x++) if ((dx = x \u003c X0 ? X0 - x : max(0, x - X0 - TW + 1))) add(x, yc + y, [255, 196, 120], fl * exp(-(dx * dx) / 12 - (y * y) / 8));\n  }\n}\n\nfunction pileH(x) {\n  const u = (x - CX) / 22;\n  return abs(u) >= 1 || P.ph \u003c 0.3 ? 0 : P.ph * (1 - u * u) ** 0.8 * (0.8 + 0.4 * vn(x * 0.25, P.cyc * 7)) + (hash(x, P.cyc) - 0.5) * 1.6 * min(1, P.ph / 4);\n}\n// Rubble: broken slabs, gaps, rebar and bits of painted rooms.\nfunction pile() {\n  if (P.ph \u003c 0.3) return;\n  for (let x = CX - 22; x \u003c= CX + 22; x++) {\n    const hp = pileH(x), sn = cl(0.45 - 0.3 * (pileH(x + 1) - pileH(x - 1)), 0, 1);\n    for (let y = round(G - hp), y0 = y; y \u003c G + 3; y++) {\n      const cx = floor((x + (y >> 1) * 1.7) / 3), v = hash(cx, (y >> 1) + P.cyc * 97), c = v > 0.96 ? TILE : v \u003c 0.05 ? BRICK : v > 0.9 ? PALE : CON, o = (y * W + x) * 3, f = fq(x, y);\n      let m = (1 - 0.35 * sm(0, 12, y - y0)) * (c === CON ? (0.65 + 0.45 * v) * (y & 1 ? 0.86 : 1.18) : 1);\n      if (y === y0 && hash(x, 9) \u003c 0.3) m = -1;\n      else if (hash(cx * 7 + x, y * 3 + P.cyc) \u003c 0.1) m *= 0.22;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = m \u003c 0 ? RUST[j] * (L[9 + j] + 0.3) : c[j] * m * (L[9 + j] + L[12 + j] * sn + f);\n    }\n  }\n}\n\n// Two long-reach diggers climb the heap and pick it apart.\nfunction digger(x, f, ph) {\n  const g = round(G - max(0, pileH(x) - 1)), q = fq(x, g) + 0.32, Y = lit(YEL, 1, 0.6, q), Yd = Y.map((v) => v * 0.7), D = lit([70, 68, 66], 1, 0.5, q);\n  for (let i = -4; i \u003c= 4; i++) put(x + i, g - 1, D, i & 1 ? 1 : 0.4), put(x + i, g - 2, D);\n  for (let i = -5; i \u003c= 2; i++) for (let j = 3; j \u003c= 5; j++) put(x + i * f, g - j, i \u003c -3 ? Yd : Y);\n  for (let j = 6; j \u003c= 9; j++) for (let i = 1; i \u003c= 3; i++) put(x + i * f, g - j, i === 2 && j > 6 && j \u003c 9 ? GLASS : Y);\n  const a1 = 1 + 0.3 * sin(ph), bx = x + 2 * f, by = g - 5, ex = bx + f * cos(a1) * 11, ey = by - sin(a1) * 11, a2 = -1.2 + 0.5 * sin(ph + 1.3), kx = ex + f * cos(a2) * 8, ky = ey - sin(a2) * 8;\n  line(bx, by, ex, ey, Y), line(bx - f, by, ex - f, ey, Yd), line(ex, ey, kx, ky, Y);\n  for (let i = 0; i \u003c 2; i++) for (let j = 0; j \u003c 3; j++) put(kx + i * f, ky + j, D);\n  if ((P.rt * 1.6 + f * 0.25) % 1 \u003c 0.5) glow(x + 2 * f, g - 10, AMBER, 0.45, 2);\n}\nfunction machines() {\n  const T = P.T, out = sm(T_CLR - 1, T_CLR + 0.5, T);\n  if (T > T_EX && T \u003c T_CLR + 1)\n    for (const [x0, xa, f, j] of [[-10, CX - 13, 1, 0], [76, CX + 13, -1, 1]])\n      digger(round(mix(mix(x0, xa, sm(T_EX + j, T_EX + 2.5 + j, T)), x0, out)), f, T * (T > T_TL ? 9 : 2.2) + j * 2);\n}\n\n// Fence, mesh, barrier tape; siren lights on two posts.\nfunction fence() {\n  const mc = lit([150, 152, 158]), pc = lit([96, 98, 104]), tape = lit([250, 210, 40], 1, 0.5, 0.15);\n  for (let y = 102; y \u003c 118; y++) for (let x = 0; x \u003c W; x++) x % 12 === 5 || y === 102 ? put(x, y, pc) : ((x + y) % 3 === 0 || (x - y + 300) % 3 === 0) && put(x, y, mc, 0.28);\n  for (let x = 0; x \u003c W; x++) put(x, 107 + round(sin(x * 0.6 + P.rt * 5) * (0.3 + abs(P.w))), (x + 40) % 4 \u003c 2 ? tape : SIL);\n  for (const [x, s] of [[5, 0], [53, 0.5]]) {\n    const on = P.T \u003c T_FALL + 0.8 && (P.rt * 2.5 + s) % 1 \u003c 0.45;\n    put(x, 100, on ? [255, 190, 80] : [90, 50, 20]);\n    if (on) glow(x, 100, AMBER, 0.6, 5);\n  }\n}\n\n// Each puff is a grainy ball lit by sun and sky, laid over the last, so billows keep their edges.\nfunction dust() {\n  const { NT, pf, FL } = P, fld = L[16] * 1.8, gf = P.gfl * 0.6, [L9, L10, L11, L12, L13, L14] = L.slice(9, 15);\n  for (let p = 0; p \u003c P.np; p++) {\n    const q = p * PF, px = pf[q], py = pf[q + 1], r = pf[q + 4], age = pf[q + 8], life = pf[q + 9];\n    const a = pf[q + 7] * sm(0, 0.25, age) * (1 - sm(0.4 * life, life, age)) * (pf[q + 5] / r) ** 0.35;\n    if (a \u003c 0.01) continue;\n    const t = pf[q + 11], ox = (p * 23) & 63, oy = p * 41 + floor(age * 3), ir = 1 / r, pb = 0.85 + 0.3 * hash(p, P.cyc);\n    const [a0, a1, a2] = DUST0.map((v, c) => mix(v, DUST1[c], t) * pb);\n    for (let y = max(0, ceil(py - r)), y1 = min(H - 1, floor(py + r)); y \u003c= y1; y++) {\n      const dy = (y - py) * ir, dy2 = dy * dy, row = y * W, nr = ((y + oy) & 127) \u003c\u003c 6, sh = 0.45 + 0.55 * sm(G, 40, y), sk = 0.8 - 0.25 * dy;\n      for (let x = max(0, ceil(px - r)), x1 = min(W - 1, floor(px + r)); x \u003c= x1; x++) {\n        const dx = (x - px) * ir, d2 = dx * dx + dy2;\n        if (d2 >= 1) continue;\n        const n = NT[nr | ((x + ox) & 63)];\n        let e = 2 - d2 * (0.7 + 2.4 * n);\n        if (e \u003c= 0.02) continue;\n        if (e > 1) e = 1;\n        const k = min(0.95, a * e * e * (3 - 2 * e)), i = row + x, o = i * 3, l = -0.6 * dx - 0.5 * dy + 0.62 * sqrt(1 - d2);\n        const gr = 0.4 + 1.2 * n, sun = (0.25 + 0.8 * (l > 0 ? l : 0)) * sh * gr, sky = sk * (0.55 + 0.45 * gr), fl = FL[i] * fld + gf;\n        F[o] += (a0 * (L9 * sky + L12 * sun + fl) - F[o]) * k;\n        F[o + 1] += (a1 * (L10 * sky + L13 * sun + fl) - F[o + 1]) * k;\n        F[o + 2] += (a2 * (L11 * sky + L14 * sun + fl) - F[o + 2]) * k;\n      }\n    }\n  }\n}\n\n// The crowd: coats, marshals in hi-vis, phones up once the siren goes.\nfunction people() {\n  const T = P.T, ph = T > T_CH - 1.5 && T \u003c T_TL ? 0.6 : 0.12, vest = lit(COATS[4], 1, 0.5, 0.2), strip = lit([220, 220, 210], 1, 0.5, 0.3);\n  for (const [x, hy, w, r1, , cc] of P.cr) {\n    const hw = w >> 1, coat = lit(COATS[cc & 3], 0.5, 0.25, 0.1);\n    for (let y = hy + 3, e; y \u003c H; y++) for (let i = -hw + (e = y === hy + 3); i \u003c= hw - !(w & 1) - e; i++) put(x + i, y, cc > 3 && y > hy + 3 && y \u003c hy + 9 ? (y === hy + 6 ? strip : vest) : coat);\n    for (let j = 0; j \u003c 3; j++) for (let i = -1; i \u003c= 1; i++) if (j || !i) put(x + i, hy + j, SIL);\n    if (r1 \u003c ph) {\n      const sc = T > T_CH && T \u003c 11 && hash(floor(P.rt * 30), x) \u003c 0.015 ? [255, 255, 255] : PHONE;\n      for (let j = -2; j \u003c 3; j++) put(x + 2, hy + j, j \u003c 0 ? sc : SIL);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  P = params.s;\n  if (!P || !P.L || !P.fk) return;\n  (F = P.F), (L = P.L);\n  back();\n  tower();\n  pile();\n  machines();\n  fence();\n  const wl = lit([170, 190, 210], 1, 0.5, 0.2), bc = L[16] > 0.7 ? [140, 140, 150] : [24, 24, 30];\n  // The water cannon on the right roof wets the site.\n  for (let j = 0, t; j \u003c 60 && P.T > 1 && P.T \u003c T_TL; j++) (t = ((j * 0.618 + P.rt * 0.8) % 1) * 1.5), add(52 + (P.w * 6 - 15 - 6 * hash(j, 5)) * t, 86 - (10 + 5 * hash(j, 6)) * t + 13 * t * t, wl, 0.2);\n  dust();\n  for (const [x, y, , , , , , fp] of P.bd) for (let i = -1, up = sin(fp) > 0 ? -1 : 0; i \u003c 2; i++) put(x + i, y + (i ? up : 0), bc);\n  people();\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, cl(F[o], 0, 255) | 0, cl(F[o + 1], 0, 255) | 0, cl(F[o + 2], 0, 255) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Storeys=20..30, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Blue dawn at 0 with work lamps in a third of the windows; morning sun from the left; flat overcast grey; at 1 night, when two floodlight masts throw beams up the tower and into the dust."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the charges go 2.4 s in, the tower is down three seconds later and a round takes 36 s; at 0.2 it all runs ten times slower."},{"name":"Storeys","min":20,"max":30,"about":"Twenty to thirty. Twenty stand 80 rows under the roof plant and mast; past 25 the floors get lower so the roof stays on the panel."},{"name":"Wind","min":-1,"max":1,"about":"Calm at 0, dust going straight up. Either way the clouds stretch into slanting streaks and the dust, chimney smoke, water cannon spray and pigeons lean with it."}],"start":[0,2,20,0.06],"measures":{"motion":0.3241,"detail":0.034,"edges":0.2245,"complexity":1.918,"coverage":0.9298,"colour":0.1876,"drift":0.0773},"knobResponse":[0.3233,0.0558,0.0577,0.0486]},{"slug":"incense","title":"Incense","family":"noise","round":15,"note":"향 연기가 실처럼 곧게 오르다 몇 줄 위에서 흔들리고, 곧 소용돌이로 흩어져 위로 퍼져요. 돌탑 위 역류 향꽂이에서는 무거운 연기가 돌을 타고 흘러내려 접시에 고여요.","idea":"A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.","buttons":"K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.","code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-incense","type":"code","name":"incense","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10."},{"name":"Sticks","min":1,"max":3,"about":"One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner."},{"name":"Breeze","min":-1,"max":1,"about":"A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish."}],"start":[0,2,1,0.06],"measures":{"motion":0.2464,"detail":0.0379,"edges":0.3304,"complexity":1.0761,"coverage":0.3311,"colour":0.0945,"drift":0.0442},"knobResponse":[0.0522,0.0616,0.0686,0.0518]},{"slug":"indras-pearls","title":"Indra's Pearls","family":"geometry","round":31,"note":"마스킷 조각의 클라인 군이 그리는 극한 집합이 두 흰 벽 사이로 128줄을 내려가요. 접한 원의 목걸이 사이로 진주가 세대마다 작아지고, μ 가 첨점 사이를 오가며 목이 조였다 풀리고 겹 소용돌이가 감겼다 풀려요. K1 을 누르면 진주가 세대 차례로 켜져요.","idea":"The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.","buttons":"K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.","code":"// ===== Patternflow pattern =====\n// Title:   Indra's Pearls\n// Family:  geometry\n// Idea:    The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: limit set of a Kleinian group (Henri Poincaré, 1883), the Maskit slice as drawn in Indra's Pearls (David Mumford, Caroline Series and David Wright, 2002), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal.\n// Knob 2: Speed. At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower.\n// Knob 3: Shape. Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall.\n// Knob 4: Zoom. Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past.\n// Buttons: K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Cusps of the Maskit slice, mu = Re + i Im, from the cusp 0/1 at 2i to 1/2.\n// Each is the root of tr W_p/q(mu) = 2 with the largest imaginary part,\n// found by the Farey recursion on traces (tr a = -i mu, tr b = 2,\n// tr ab = -i mu - 2i). Between two of them the slice's edge dips well below\n// the chord, so mu on the chord, or a little above, stays inside the slice.\nconst CUSP = [\n  [0, 2], [-0.0216, 1.9374], [-0.0363, 1.9134], [-0.0674, 1.8745], [-0.1427, 1.8103],\n  [-0.2201, 1.7667], [-0.3522, 1.7214], [-0.5812, 1.6939], [-1, 1.7321],\n];\nconst NC = CUSP.length - 1;\n\n// The strip 0 \u003c Im z \u003c Im mu spans this many of the 64 columns at Zoom 0,\n// which leaves three LEDs on each side for the dark half-planes. Im mu runs\n// from 1.69 to 2.06, so that is 28 to 34 LEDs per unit of the plane.\nconst SPAN = 58;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    scroll: 0, ph: 0, sw: 0, hue: 0, shape: 0, zoom: 0.06, wave: -1,\n    mr: 0, mi: 2, uz: SPAN / 2, cx: 0, cy: 1, buf: new Float32Array(N * 3), pal: new Float32Array(64 * 3), palHue: -1,\n  };\n}\n\n// mu for a place c on the cusp chain (0..NC, and negative for its mirror,\n// Re mu -> -Re mu, which the slice shares) lifted by l into the slice.\nfunction muAt(c, l, P) {\n  const m = c \u003c 0 ? -1 : 1;\n  c = min(abs(c), NC);\n  const i = min(floor(c), NC - 1), f = c - i;\n  P.mr = m * (CUSP[i][0] + (CUSP[i + 1][0] - CUSP[i][0]) * f);\n  P.mi = CUSP[i][1] + (CUSP[i + 1][1] - CUSP[i][1]) * f + l;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.shape = cl(k[2], 0, 1);\n  P.zoom = cl(k[3], 0, 1);\n  P.ph += d * sp * 0.05;\n  P.sw += d * sp * 0.03;\n  // The lift above the cusp chain breathes between 0, where the chain\n  // pinches into tangent discs, and 0.06, where the invariant component\n  // opens into one winding band, every ten seconds at Speed 2. Over about\n  // seventeen seconds mu also swings along the chain and back: at Shape 0\n  // from the cusp 1/10 through 2i to its mirror image, so the spirals at the\n  // necks wind up one way, unwind and wind up the other way.\n  const lift = 0.06 * (0.5 - 0.5 * Math.cos(P.ph * 2 * PI)) ** 1.5;\n  const c = P.shape * NC + Math.sin(P.sw * 2 * PI) * (1.9 - 1.1 * P.shape);\n  muAt(c, lift, P);\n  // LEDs per unit of the plane, and the slide: five LEDs a second at Speed 2\n  // at any zoom. The picture repeats every 2 along Re z.\n  P.uz = (SPAN / P.mi) * 4 ** P.zoom;\n  // The zoom closes in on a fixed point of a, (mu - sqrt(mu^2 + 4)) / 2, the\n  // one in the lower half of the strip. It lies on the limit set at a neck\n  // of the chain, where the small pearls spiral in; the slide carries it\n  // through the middle of the view once a period.\n  const ar = P.mr * P.mr - P.mi * P.mi + 4, ai = 2 * P.mr * P.mi, am = sqrt(ar * ar + ai * ai);\n  let sr = sqrt(max(0, (am + ar) / 2)), si = sqrt(max(0, (am - ar) / 2));\n  if (ai \u003c 0) si = -si;\n  if (si \u003c 0) {\n    sr = -sr;\n    si = -si;\n  }\n  const zs = (1 - 4 ** -P.zoom) / 0.75;\n  P.cx = ((P.mr - sr) / 2) * zs;\n  P.cy = P.mi / 2 + ((P.mi - si) / 2 - P.mi / 2) * zs;\n  P.scroll = (P.scroll + (d * sp * 2.5) / P.uz) % 2;\n  const b = input.btnPressed || [];\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 14 ? -1 : P.wave + d * 2.2;\n}\n\n// One point z = x + iy through Jos Leys's escape algorithm for the Maskit\n// group a(z) = mu + 1/z, b(z) = z + 2. Each step wraps z into the strip of b\n// (sheared along mu), turns it half round about mu/2 if it lies above the\n// separation line (that half turn maps the limit set onto itself and swaps a\n// with its inverse), then applies a. It stops when z leaves the strip\n// 0 \u003c Im z \u003c Im mu (it was in a pearl, a disc that some word of the group\n// sends onto a half-plane), or falls into a 2-cycle (it is in the invariant\n// component, or in one of the discs it pinches into at a cusp). OUT holds\n// the kind, the step count and a distance to the limit set in plane units.\nconst OUT = new Float64Array(3);\n// 1 - e^-v in steps of 1/32 up to v = 12, for the separation line.\nconst SEP = new Float64Array(385);\nfor (let j = 0; j \u003c 385; j++) SEP[j] = 1 - exp(-j / 32);\nfunction trace(x, y, mr, t, maxIt) {\n  if (y \u003c 0 || y > t) {\n    OUT[0] = 0;\n    OUT[1] = 0;\n    OUT[2] = y \u003c 0 ? -y : y - t;\n    return;\n  }\n  const sh = mr / t, f = mr > 0 ? -1 : mr \u003c 0 ? 1 : 0, lean = (f * (2 * t - 1.95)) / 4, kk = 7.2 - (1.95 - t) * 15, hm = mr / 2, ht = t / 2, al = abs(lean);\n  let lx = x + 9, ly = y, llx = x - 9, lly = y, der = 1;\n  for (let i = 0; i \u003c maxIt; i++) {\n    const s = x - sh * y;\n    if (s >= 1 || s \u003c -1) x -= 2 * floor((s + 1) * 0.5);\n    const u = x - hm;\n    let up = y >= ht + al;\n    if (!up && y >= ht - al) {\n      const v = kk * (u > 0 ? u : -u) * 32;\n      let sep = 1;\n      if (v \u003c 383) {\n        const j = v | 0;\n        sep = SEP[j] + (SEP[j + 1] - SEP[j]) * (v - j);\n      }\n      up = y >= ht + (u > 0 ? lean : -lean) * sep;\n    }\n    if (up) {\n      x = mr - x;\n      y = t - y;\n    }\n    const r = 1 / (x * x + y * y);\n    der *= r;\n    x = mr + x * r;\n    y = t - y * r;\n    if (y \u003c 0 || y > t) {\n      OUT[0] = 1;\n      OUT[1] = i + 1;\n      OUT[2] = (y \u003c 0 ? -y : y - t) / der;\n      return;\n    }\n    const ex = x - llx, ey = y - lly;\n    if (ex * ex + ey * ey \u003c 1e-8) {\n      // How far the cycling point lies from the nearest limit set close to\n      // the fundamental domain: the two walls and the pearls a^-1(H-) and\n      // a^2(H-) that touch them at 0 and mu. Divided by the stretch of the\n      // word that brought it there, that is the distance back where it\n      // started, to first order.\n      let s2 = x - sh * y;\n      s2 -= 2 * floor((s2 + 1) / 2);\n      x = s2 + sh * y;\n      const rr = 0.5 / t, dt2 = t - rr;\n      let dd = min(y, t - y);\n      dd = min(dd, sqrt(x * x + (y - rr) * (y - rr)) - rr, sqrt((x - mr) * (x - mr) + (y - dt2) * (y - dt2)) - rr);\n      OUT[0] = 2;\n      OUT[1] = i + 1;\n      OUT[2] = max(0, dd) / der;\n      return;\n    }\n    llx = lx;\n    lly = ly;\n    lx = x;\n    ly = y;\n  }\n  OUT[0] = 3;\n  OUT[1] = maxIt;\n  OUT[2] = 0;\n}\n\n// Colours: 0..31 the invariant component by step count, 32..63 the pearls\n// by generation.\nfunction palette(P) {\n  const pal = P.pal, h = P.hue + 0.6;\n  for (let i = 0; i \u003c 32; i++) {\n    const u = i / 31;\n    // A dark orange or olive reads as brown, so the discs lift their light\n    // where the hue passes through them and turn gold instead.\n    let hh = h + 0.07 * u * u;\n    hh -= floor(hh);\n    const lift = max(0, 1 - abs(hh - 0.1) / 0.16);\n    hsv(hh, 0.85 - 0.3 * u * u, 0.2 + 0.5 * u * u + 0.5 * lift * (1 - u * u), pal, i * 3);\n    // Generation 1 teal, then cyan, sky, lavender and pink, paler as they\n    // shrink.\n    const g = min(i, 6) / 6;\n    hsv(h - 0.12 + 0.36 * g, 0.72 - 0.32 * g, 0.72 + 0.24 * g, pal, (32 + i) * 3);\n  }\n  P.palHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const buf = P.buf, pal = P.pal, mr = P.mr, t = P.mi;\n  const uz = P.uz, su = 1 / uz, maxIt = 40 + ((40 * P.zoom) | 0);\n  const y0 = P.cy - (W / 2) * su, x0 = P.cx - P.scroll - (H / 2) * su;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const x = x0 + (py + 0.5) * su;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      trace(x, y0 + (px + 0.5) * su, mr, t, maxIt);\n      const kind = OUT[0], n = OUT[1], de = OUT[2] * uz;\n      let r, g, b;\n      if (kind === 0) {\n        r = 0.02;\n        g = 0.02;\n        b = 0.05;\n      } else if (kind === 1) {\n        const o = (32 + min(n - 1, 31)) * 3;\n        // A pearl is a little darker at its rim, so neighbours part.\n        const v = 0.55 + 0.45 * min(1, de / 2.5);\n        r = pal[o] * v;\n        g = pal[o + 1] * v;\n        b = pal[o + 2] * v;\n        if (P.wave >= 0) {\n          const dw = P.wave - n, fl = exp(-dw * dw * 2) * 0.8;\n          r += (1 - r) * fl;\n          g += (1 - g) * fl;\n          b += (1 - b) * fl;\n        }\n      } else if (kind === 2) {\n        // The invariant component glows in from the limit set, about five\n        // LEDs deep, over a dark core.\n        const o = min(31, (31 * exp(-de / 5)) | 0) * 3;\n        r = pal[o];\n        g = pal[o + 1];\n        b = pal[o + 2];\n      } else {\n        r = 0.7;\n        g = 0.72;\n        b = 0.8;\n      }\n      // The limit set: a white line a LED or so wide wherever the distance\n      // to it is under a LED.\n      if (kind !== 3) {\n        const w = 0.92 * exp(-de * de * 2.4);\n        r += (0.92 - r) * w;\n        g += (0.94 - g) * w;\n        b += (1 - b) * w;\n      }\n      buf[p] = r * 255;\n      buf[p + 1] = g * 255;\n      buf[p + 2] = b * 255;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-indras-pearls","type":"code","name":"indras-pearls","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Indra's Pearls\n// Family:  geometry\n// Idea:    The limit set of a Maskit Kleinian group stood on end: the strip it lives in runs down the panel between two white lines, a necklace of tangent discs fills it with chains of ever smaller pearls nested in the gaps, the whole necklace slides down by the group's own translation z -> z + 2, and the parameter mu drifts along the edge of the Maskit slice so the chain pinches and opens into different double-cusp packings.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: limit set of a Kleinian group (Henri Poincaré, 1883), the Maskit slice as drawn in Indra's Pearls (David Mumford, Caroline Series and David Wright, 2002), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal.\n// Knob 2: Speed. At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower.\n// Knob 3: Shape. Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall.\n// Knob 4: Zoom. Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past.\n// Buttons: K1 tap lights the pearls one generation after another, from the big ones on the walls inward to the smallest.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Cusps of the Maskit slice, mu = Re + i Im, from the cusp 0/1 at 2i to 1/2.\n// Each is the root of tr W_p/q(mu) = 2 with the largest imaginary part,\n// found by the Farey recursion on traces (tr a = -i mu, tr b = 2,\n// tr ab = -i mu - 2i). Between two of them the slice's edge dips well below\n// the chord, so mu on the chord, or a little above, stays inside the slice.\nconst CUSP = [\n  [0, 2], [-0.0216, 1.9374], [-0.0363, 1.9134], [-0.0674, 1.8745], [-0.1427, 1.8103],\n  [-0.2201, 1.7667], [-0.3522, 1.7214], [-0.5812, 1.6939], [-1, 1.7321],\n];\nconst NC = CUSP.length - 1;\n\n// The strip 0 \u003c Im z \u003c Im mu spans this many of the 64 columns at Zoom 0,\n// which leaves three LEDs on each side for the dark half-planes. Im mu runs\n// from 1.69 to 2.06, so that is 28 to 34 LEDs per unit of the plane.\nconst SPAN = 58;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    scroll: 0, ph: 0, sw: 0, hue: 0, shape: 0, zoom: 0.06, wave: -1,\n    mr: 0, mi: 2, uz: SPAN / 2, cx: 0, cy: 1, buf: new Float32Array(N * 3), pal: new Float32Array(64 * 3), palHue: -1,\n  };\n}\n\n// mu for a place c on the cusp chain (0..NC, and negative for its mirror,\n// Re mu -> -Re mu, which the slice shares) lifted by l into the slice.\nfunction muAt(c, l, P) {\n  const m = c \u003c 0 ? -1 : 1;\n  c = min(abs(c), NC);\n  const i = min(floor(c), NC - 1), f = c - i;\n  P.mr = m * (CUSP[i][0] + (CUSP[i + 1][0] - CUSP[i][0]) * f);\n  P.mi = CUSP[i][1] + (CUSP[i + 1][1] - CUSP[i][1]) * f + l;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.shape = cl(k[2], 0, 1);\n  P.zoom = cl(k[3], 0, 1);\n  P.ph += d * sp * 0.05;\n  P.sw += d * sp * 0.03;\n  // The lift above the cusp chain breathes between 0, where the chain\n  // pinches into tangent discs, and 0.06, where the invariant component\n  // opens into one winding band, every ten seconds at Speed 2. Over about\n  // seventeen seconds mu also swings along the chain and back: at Shape 0\n  // from the cusp 1/10 through 2i to its mirror image, so the spirals at the\n  // necks wind up one way, unwind and wind up the other way.\n  const lift = 0.06 * (0.5 - 0.5 * Math.cos(P.ph * 2 * PI)) ** 1.5;\n  const c = P.shape * NC + Math.sin(P.sw * 2 * PI) * (1.9 - 1.1 * P.shape);\n  muAt(c, lift, P);\n  // LEDs per unit of the plane, and the slide: five LEDs a second at Speed 2\n  // at any zoom. The picture repeats every 2 along Re z.\n  P.uz = (SPAN / P.mi) * 4 ** P.zoom;\n  // The zoom closes in on a fixed point of a, (mu - sqrt(mu^2 + 4)) / 2, the\n  // one in the lower half of the strip. It lies on the limit set at a neck\n  // of the chain, where the small pearls spiral in; the slide carries it\n  // through the middle of the view once a period.\n  const ar = P.mr * P.mr - P.mi * P.mi + 4, ai = 2 * P.mr * P.mi, am = sqrt(ar * ar + ai * ai);\n  let sr = sqrt(max(0, (am + ar) / 2)), si = sqrt(max(0, (am - ar) / 2));\n  if (ai \u003c 0) si = -si;\n  if (si \u003c 0) {\n    sr = -sr;\n    si = -si;\n  }\n  const zs = (1 - 4 ** -P.zoom) / 0.75;\n  P.cx = ((P.mr - sr) / 2) * zs;\n  P.cy = P.mi / 2 + ((P.mi - si) / 2 - P.mi / 2) * zs;\n  P.scroll = (P.scroll + (d * sp * 2.5) / P.uz) % 2;\n  const b = input.btnPressed || [];\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 14 ? -1 : P.wave + d * 2.2;\n}\n\n// One point z = x + iy through Jos Leys's escape algorithm for the Maskit\n// group a(z) = mu + 1/z, b(z) = z + 2. Each step wraps z into the strip of b\n// (sheared along mu), turns it half round about mu/2 if it lies above the\n// separation line (that half turn maps the limit set onto itself and swaps a\n// with its inverse), then applies a. It stops when z leaves the strip\n// 0 \u003c Im z \u003c Im mu (it was in a pearl, a disc that some word of the group\n// sends onto a half-plane), or falls into a 2-cycle (it is in the invariant\n// component, or in one of the discs it pinches into at a cusp). OUT holds\n// the kind, the step count and a distance to the limit set in plane units.\nconst OUT = new Float64Array(3);\n// 1 - e^-v in steps of 1/32 up to v = 12, for the separation line.\nconst SEP = new Float64Array(385);\nfor (let j = 0; j \u003c 385; j++) SEP[j] = 1 - exp(-j / 32);\nfunction trace(x, y, mr, t, maxIt) {\n  if (y \u003c 0 || y > t) {\n    OUT[0] = 0;\n    OUT[1] = 0;\n    OUT[2] = y \u003c 0 ? -y : y - t;\n    return;\n  }\n  const sh = mr / t, f = mr > 0 ? -1 : mr \u003c 0 ? 1 : 0, lean = (f * (2 * t - 1.95)) / 4, kk = 7.2 - (1.95 - t) * 15, hm = mr / 2, ht = t / 2, al = abs(lean);\n  let lx = x + 9, ly = y, llx = x - 9, lly = y, der = 1;\n  for (let i = 0; i \u003c maxIt; i++) {\n    const s = x - sh * y;\n    if (s >= 1 || s \u003c -1) x -= 2 * floor((s + 1) * 0.5);\n    const u = x - hm;\n    let up = y >= ht + al;\n    if (!up && y >= ht - al) {\n      const v = kk * (u > 0 ? u : -u) * 32;\n      let sep = 1;\n      if (v \u003c 383) {\n        const j = v | 0;\n        sep = SEP[j] + (SEP[j + 1] - SEP[j]) * (v - j);\n      }\n      up = y >= ht + (u > 0 ? lean : -lean) * sep;\n    }\n    if (up) {\n      x = mr - x;\n      y = t - y;\n    }\n    const r = 1 / (x * x + y * y);\n    der *= r;\n    x = mr + x * r;\n    y = t - y * r;\n    if (y \u003c 0 || y > t) {\n      OUT[0] = 1;\n      OUT[1] = i + 1;\n      OUT[2] = (y \u003c 0 ? -y : y - t) / der;\n      return;\n    }\n    const ex = x - llx, ey = y - lly;\n    if (ex * ex + ey * ey \u003c 1e-8) {\n      // How far the cycling point lies from the nearest limit set close to\n      // the fundamental domain: the two walls and the pearls a^-1(H-) and\n      // a^2(H-) that touch them at 0 and mu. Divided by the stretch of the\n      // word that brought it there, that is the distance back where it\n      // started, to first order.\n      let s2 = x - sh * y;\n      s2 -= 2 * floor((s2 + 1) / 2);\n      x = s2 + sh * y;\n      const rr = 0.5 / t, dt2 = t - rr;\n      let dd = min(y, t - y);\n      dd = min(dd, sqrt(x * x + (y - rr) * (y - rr)) - rr, sqrt((x - mr) * (x - mr) + (y - dt2) * (y - dt2)) - rr);\n      OUT[0] = 2;\n      OUT[1] = i + 1;\n      OUT[2] = max(0, dd) / der;\n      return;\n    }\n    llx = lx;\n    lly = ly;\n    lx = x;\n    ly = y;\n  }\n  OUT[0] = 3;\n  OUT[1] = maxIt;\n  OUT[2] = 0;\n}\n\n// Colours: 0..31 the invariant component by step count, 32..63 the pearls\n// by generation.\nfunction palette(P) {\n  const pal = P.pal, h = P.hue + 0.6;\n  for (let i = 0; i \u003c 32; i++) {\n    const u = i / 31;\n    // A dark orange or olive reads as brown, so the discs lift their light\n    // where the hue passes through them and turn gold instead.\n    let hh = h + 0.07 * u * u;\n    hh -= floor(hh);\n    const lift = max(0, 1 - abs(hh - 0.1) / 0.16);\n    hsv(hh, 0.85 - 0.3 * u * u, 0.2 + 0.5 * u * u + 0.5 * lift * (1 - u * u), pal, i * 3);\n    // Generation 1 teal, then cyan, sky, lavender and pink, paler as they\n    // shrink.\n    const g = min(i, 6) / 6;\n    hsv(h - 0.12 + 0.36 * g, 0.72 - 0.32 * g, 0.72 + 0.24 * g, pal, (32 + i) * 3);\n  }\n  P.palHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const buf = P.buf, pal = P.pal, mr = P.mr, t = P.mi;\n  const uz = P.uz, su = 1 / uz, maxIt = 40 + ((40 * P.zoom) | 0);\n  const y0 = P.cy - (W / 2) * su, x0 = P.cx - P.scroll - (H / 2) * su;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const x = x0 + (py + 0.5) * su;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      trace(x, y0 + (px + 0.5) * su, mr, t, maxIt);\n      const kind = OUT[0], n = OUT[1], de = OUT[2] * uz;\n      let r, g, b;\n      if (kind === 0) {\n        r = 0.02;\n        g = 0.02;\n        b = 0.05;\n      } else if (kind === 1) {\n        const o = (32 + min(n - 1, 31)) * 3;\n        // A pearl is a little darker at its rim, so neighbours part.\n        const v = 0.55 + 0.45 * min(1, de / 2.5);\n        r = pal[o] * v;\n        g = pal[o + 1] * v;\n        b = pal[o + 2] * v;\n        if (P.wave >= 0) {\n          const dw = P.wave - n, fl = exp(-dw * dw * 2) * 0.8;\n          r += (1 - r) * fl;\n          g += (1 - g) * fl;\n          b += (1 - b) * fl;\n        }\n      } else if (kind === 2) {\n        // The invariant component glows in from the limit set, about five\n        // LEDs deep, over a dark core.\n        const o = min(31, (31 * exp(-de / 5)) | 0) * 3;\n        r = pal[o];\n        g = pal[o + 1];\n        b = pal[o + 2];\n      } else {\n        r = 0.7;\n        g = 0.72;\n        b = 0.8;\n      }\n      // The limit set: a white line a LED or so wide wherever the distance\n      // to it is under a LED.\n      if (kind !== 3) {\n        const w = 0.92 * exp(-de * de * 2.4);\n        r += (0.92 - r) * w;\n        g += (0.94 - g) * w;\n        b += (1 - b) * w;\n      }\n      buf[p] = r * 255;\n      buf[p + 1] = g * 255;\n      buf[p + 2] = b * 255;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shape=0..1, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together; at 0 the big discs are deep blue and the pearls teal."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the necklace slides five LEDs a second, the chain pinches and opens again every ten seconds and mu swings along the edge of the slice and back in seventeen; at 0.2 all of it goes ten times slower."},{"name":"Shape","min":0,"max":1,"about":"Where on the edge of the Maskit slice mu swings: at 0 through the cusp mu = 2i, where the big discs stack straight down the middle, out to the cusp 1/10 on either side, where the necks between them wind into double spirals; turned up, the swing narrows and moves past the cusps 1/8, 1/6, 1/5, 1/4 and 1/3 to 1/2 at mu = -1 + 1.73i, where the discs zigzag from wall to wall."},{"name":"Zoom","min":0,"max":1,"about":"Closes in, up to four times, on a fixed point of a, where the chain necks and the small pearls spiral in: near 0 the whole strip fits the 64 columns with both walls showing; at 1 the view is a quarter of the strip wide and the spirals fill it as they slide past."}],"start":[0,2,0,0.06],"measures":{"motion":0.5032,"detail":0.058,"edges":0.429,"complexity":0.897,"coverage":1,"colour":0.18,"drift":0.2157},"knobResponse":[0.3262,0.2178,0.2586,0.2575]},{"slug":"infinity-series","title":"Infinity Series","family":"rhythm","round":38,"note":"페르 뇌르고르의 무한 수열이 네 줄 피아노 롤에 한 박에 1, 2, 4, 8음으로 떨어져 타격선에 닿아요. 박마다 네 줄이 함께 닿는데, 4음 줄은 1음 줄과 같은 음에, 2음과 8음 줄은 그 거울상에 닿아요. K3 은 한 박의 줄 수를 8 에서 40 으로 늘려 음을 길게 펴고, K4 는 수열의 더 먼 자리에서 시작해요.","idea":"Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Infinity Series\n// Family:  rhythm\n// Idea:    Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Per Nørgård's infinity series (1959), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1\n//\n// Knob 1: Hue. Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white.\n// Knob 2: Speed. The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start.\n// Knob 3: Beat. Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five.\n// Knob 4: Start. Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge.\n\nconst W = 64, H = 128;\n// Lanes: four, 16 columns each; pitches -7..7 on columns 0..14 of the lane,\n// pitch 0 on column 7, column 15 dark between lanes.\nconst LANES = 4, LW = 16, PMAX = 7, RATE = [1, 2, 4, 8];\n// The strike line: notes fall onto row SY and fade out below it.\nconst SY = 104;\n// Brightness of the held note on the beat behind the faster lanes.\nconst HOLD = 0.34;\nconst NA = 1 \u003c\u003c 16;\nconst { floor, min, max, abs, round, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The series: a(0) = 0, a(2n) = -a(n), a(2n + 1) = a(n) + 1.\nconst A = new Int8Array(NA);\nfor (let n = 1; n \u003c NA; n++) A[n] = n & 1 ? A[n >> 1] + 1 : -A[n >> 1];\nconst ser = (n) => A[((n % NA) + NA) % NA];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, beat: 0, start: 0, speed: 2, rpb: 8, hue: 0,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    up: [0, 0, 0], dn: [0, 0, 0], upOff: [0, 0, 0], dnOff: [0, 0, 0], upHold: [0, 0, 0], dnHold: [0, 0, 0], warm: [0, 0],\n  };\n}\n\nfunction startBeat(k) {\n  // Up to 0.06 note 0; above, beat 16 to 496 in steps of 16.\n  const u = cl(k, 0, 1);\n  return u \u003c= 0.06 ? 0 : 16 * max(1, round(((u - 0.06) / 0.94) * 31));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rpb = 8 * cl(round(cl(k[2], 8, 40) / 8), 1, 5);\n  const st = startBeat(k[3]);\n  // The roll opens with the start beat 1.5 beats above the strike line; a\n  // new Start jumps there.\n  if (!S.init || st !== S.start) {\n    S.start = st;\n    S.beat = st - 1.5;\n    S.init = true;\n  }\n  S.beat += d * S.speed;\n  // After 512 beats the roll goes back to its start, so the fastest lane\n  // reads no further than note 8 x 1008 = 8064, and no more than one note in\n  // 30 lies past seven steps from the middle.\n  if (S.beat > S.start + 512) S.beat -= 512 + 1.5;\n}\n\n// Adds light to one LED; the dark column between lanes stays dark.\nfunction add(S, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0 || (x & 15) === 15) return;\n  const p = y * W + x;\n  S.R[p] += c[0] * v;\n  S.G[p] += c[1] * v;\n  S.B[p] += c[2] * v;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { R, G, B, up, dn, upOff, dnOff, upHold, dnHold, warm } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The melody as it is, the melody upside down, and the notes between beats.\n  hsv(S.hue + 0.57, 0.8, 1, up);\n  hsv(S.hue + 0.93, 0.62, 1, dn);\n  // How far each colour is into orange or yellow, 0 to 1. Those are lifted\n  // toward white so they read amber or butter, not brown or olive, most of\n  // all in the dim held notes.\n  [up, dn].forEach((c, i) => {\n    const w = cl(2.5 * (min(c[0], c[1]) - c[2]), 0, 1);\n    warm[i] = w;\n    for (let j = 0; j \u003c 3; j++) c[j] = c[j] + (1 - c[j]) * 0.3 * w;\n  });\n  for (let j = 0; j \u003c 3; j++) {\n    // The notes between the beats: the lane's colour taken 55% toward white.\n    upOff[j] = 0.55 + 0.45 * up[j];\n    dnOff[j] = 0.55 + 0.45 * dn[j];\n    // The held notes: the colour itself, or up to 45% toward white and 1.6\n    // times as bright in orange and yellow.\n    upHold[j] = (up[j] + (1 - up[j]) * 0.45 * warm[0]) * HOLD * (1 + 0.6 * warm[0]);\n    dnHold[j] = (dn[j] + (1 - dn[j]) * 0.45 * warm[1]) * HOLD * (1 + 0.6 * warm[1]);\n  }\n  const T = S.beat, rpb = S.rpb, white = [1, 1, 1];\n\n  // Guides: each lane's pitch 0, the mirror line, and a line on every beat.\n  const grey = [0.55, 0.6, 0.75];\n  for (let l = 0; l \u003c LANES; l++) for (let y = 0; y \u003c H; y++) add(S, l * LW + PMAX, y, grey, 0.1);\n  const b0 = floor(T - (H - SY) / rpb) - 1, b1 = floor(T + SY / rpb) + 1;\n  for (let b = b0; b \u003c= b1; b++) {\n    const y = round(SY - (b - T) * rpb);\n    for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, y, grey, 0.13);\n  }\n\n  for (let l = 0; l \u003c LANES; l++) {\n    const s = RATE[l], x0 = l * LW, len = rpb / s;\n    // Notes on the beat in this lane play +a(m) (rates 1, 4) or -a(m) (2, 8).\n    const onC = l & 1 ? dn : up, offC = l & 1 ? dnOff : upOff, holdC = l & 1 ? dnHold : upHold, lw = warm[l & 1];\n    // Behind the lane's own notes, each note on the beat is held dim for the\n    // whole beat: the series read at the lane's step, which lands on lane\n    // 1's note in the lanes of 4 and on its mirror image in the lanes of 2\n    // and 8.\n    if (s > 1)\n      for (let m = max(0, b0); m \u003c= b1; m++) {\n        const a = ser(s * m), px = x0 + PMAX + cl(a, -PMAX, PMAX), yb = SY - (m - T) * rpb;\n        const ye = round(yb);\n        for (let y = ye - rpb + 1; y \u003c ye; y++) {\n          if (y \u003c 0 || y >= H) continue;\n          const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n          add(S, px, y, holdC, fade);\n          add(S, px - 1, y, holdC, 0.75 * fade);\n          add(S, px + 1, y, holdC, 0.75 * fade);\n        }\n      }\n    const n0 = floor((T - (H - SY) / rpb) * s) - 1, n1 = floor((T + SY / rpb) * s) + 1;\n    for (let n = max(0, n0); n \u003c= n1; n++) {\n      const a = ser(n), px = x0 + PMAX + cl(a, -PMAX, PMAX), on = n % s === 0;\n      // Rows the note covers: its onset at the bottom, the next onset at the top.\n      const yb = SY - (n / s - T) * rpb, yt = yb - len;\n      const gap = len >= 3 ? 1 : 0;\n      const c = on ? onC : offC, core = on ? 0.95 : 0.42 * (1 + 0.4 * lw), side = on ? 0.7 : 0.2 * (1 + 0.4 * lw);\n      const clip = abs(a) > PMAX ? 0.55 : 1;\n      // How long since this note struck, in beats: a flash that dies in about\n      // a sixth of a beat, longer for a downbeat.\n      const age = T - n / s, flash = age >= 0 && age \u003c 1 ? exp(-age * (on ? 9 : 16)) : 0;\n      // Rows are rounded at both ends, so a note of one row never drops out.\n      const ye = round(yb);\n      for (let y = round(yt) + gap; y \u003c ye; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        // Below the strike line the note has sounded and fades out.\n        const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n        const lit = (y >= SY - 2 ? 1 + 1.6 * flash : 1) * fade * clip;\n        add(S, px, y, c, core * lit);\n        add(S, px - 1, y, c, side * lit);\n        add(S, px + 1, y, c, side * lit);\n        if (y >= SY - 2 && flash > 0) add(S, px, y, white, 0.5 * flash * fade);\n      }\n      // The struck key on the strike line, and its glow on either side.\n      if (flash > 0) {\n        for (let dx = -2; dx \u003c= 2; dx++) {\n          const g = (on ? 1 : 0.5) * flash * (dx === 0 ? 1 : abs(dx) === 1 ? 0.55 : 0.2);\n          add(S, px + dx, SY, white, 0.5 * g);\n          add(S, px + dx, SY, c, 0.8 * g);\n          add(S, px + dx, SY + 1, c, 0.35 * g);\n        }\n      }\n    }\n  }\n\n  // The strike line itself, a dim rule across each lane.\n  for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, SY, grey, 0.16);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","layer":{"id":"layer-infinity-series","type":"code","name":"infinity-series","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Infinity Series\n// Family:  rhythm\n// Idea:    Per Nørgård's infinity series falls down four piano-roll lanes onto a strike line, the same melody in each at one, two, four and eight notes to the beat, and on every beat the four lanes land together: the four-to-the-beat lane on the very note the one-to-the-beat lane plays, the two- and eight-to-the-beat lanes on its mirror image, because every fourth note of the series plays the series again and every second note plays it upside down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Per Nørgård's infinity series (1959), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1\n//\n// Knob 1: Hue. Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white.\n// Knob 2: Speed. The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start.\n// Knob 3: Beat. Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five.\n// Knob 4: Start. Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge.\n\nconst W = 64, H = 128;\n// Lanes: four, 16 columns each; pitches -7..7 on columns 0..14 of the lane,\n// pitch 0 on column 7, column 15 dark between lanes.\nconst LANES = 4, LW = 16, PMAX = 7, RATE = [1, 2, 4, 8];\n// The strike line: notes fall onto row SY and fade out below it.\nconst SY = 104;\n// Brightness of the held note on the beat behind the faster lanes.\nconst HOLD = 0.34;\nconst NA = 1 \u003c\u003c 16;\nconst { floor, min, max, abs, round, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The series: a(0) = 0, a(2n) = -a(n), a(2n + 1) = a(n) + 1.\nconst A = new Int8Array(NA);\nfor (let n = 1; n \u003c NA; n++) A[n] = n & 1 ? A[n >> 1] + 1 : -A[n >> 1];\nconst ser = (n) => A[((n % NA) + NA) % NA];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, beat: 0, start: 0, speed: 2, rpb: 8, hue: 0,\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    up: [0, 0, 0], dn: [0, 0, 0], upOff: [0, 0, 0], dnOff: [0, 0, 0], upHold: [0, 0, 0], dnHold: [0, 0, 0], warm: [0, 0],\n  };\n}\n\nfunction startBeat(k) {\n  // Up to 0.06 note 0; above, beat 16 to 496 in steps of 16.\n  const u = cl(k, 0, 1);\n  return u \u003c= 0.06 ? 0 : 16 * max(1, round(((u - 0.06) / 0.94) * 31));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rpb = 8 * cl(round(cl(k[2], 8, 40) / 8), 1, 5);\n  const st = startBeat(k[3]);\n  // The roll opens with the start beat 1.5 beats above the strike line; a\n  // new Start jumps there.\n  if (!S.init || st !== S.start) {\n    S.start = st;\n    S.beat = st - 1.5;\n    S.init = true;\n  }\n  S.beat += d * S.speed;\n  // After 512 beats the roll goes back to its start, so the fastest lane\n  // reads no further than note 8 x 1008 = 8064, and no more than one note in\n  // 30 lies past seven steps from the middle.\n  if (S.beat > S.start + 512) S.beat -= 512 + 1.5;\n}\n\n// Adds light to one LED; the dark column between lanes stays dark.\nfunction add(S, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || v \u003c= 0 || (x & 15) === 15) return;\n  const p = y * W + x;\n  S.R[p] += c[0] * v;\n  S.G[p] += c[1] * v;\n  S.B[p] += c[2] * v;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { R, G, B, up, dn, upOff, dnOff, upHold, dnHold, warm } = S;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The melody as it is, the melody upside down, and the notes between beats.\n  hsv(S.hue + 0.57, 0.8, 1, up);\n  hsv(S.hue + 0.93, 0.62, 1, dn);\n  // How far each colour is into orange or yellow, 0 to 1. Those are lifted\n  // toward white so they read amber or butter, not brown or olive, most of\n  // all in the dim held notes.\n  [up, dn].forEach((c, i) => {\n    const w = cl(2.5 * (min(c[0], c[1]) - c[2]), 0, 1);\n    warm[i] = w;\n    for (let j = 0; j \u003c 3; j++) c[j] = c[j] + (1 - c[j]) * 0.3 * w;\n  });\n  for (let j = 0; j \u003c 3; j++) {\n    // The notes between the beats: the lane's colour taken 55% toward white.\n    upOff[j] = 0.55 + 0.45 * up[j];\n    dnOff[j] = 0.55 + 0.45 * dn[j];\n    // The held notes: the colour itself, or up to 45% toward white and 1.6\n    // times as bright in orange and yellow.\n    upHold[j] = (up[j] + (1 - up[j]) * 0.45 * warm[0]) * HOLD * (1 + 0.6 * warm[0]);\n    dnHold[j] = (dn[j] + (1 - dn[j]) * 0.45 * warm[1]) * HOLD * (1 + 0.6 * warm[1]);\n  }\n  const T = S.beat, rpb = S.rpb, white = [1, 1, 1];\n\n  // Guides: each lane's pitch 0, the mirror line, and a line on every beat.\n  const grey = [0.55, 0.6, 0.75];\n  for (let l = 0; l \u003c LANES; l++) for (let y = 0; y \u003c H; y++) add(S, l * LW + PMAX, y, grey, 0.1);\n  const b0 = floor(T - (H - SY) / rpb) - 1, b1 = floor(T + SY / rpb) + 1;\n  for (let b = b0; b \u003c= b1; b++) {\n    const y = round(SY - (b - T) * rpb);\n    for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, y, grey, 0.13);\n  }\n\n  for (let l = 0; l \u003c LANES; l++) {\n    const s = RATE[l], x0 = l * LW, len = rpb / s;\n    // Notes on the beat in this lane play +a(m) (rates 1, 4) or -a(m) (2, 8).\n    const onC = l & 1 ? dn : up, offC = l & 1 ? dnOff : upOff, holdC = l & 1 ? dnHold : upHold, lw = warm[l & 1];\n    // Behind the lane's own notes, each note on the beat is held dim for the\n    // whole beat: the series read at the lane's step, which lands on lane\n    // 1's note in the lanes of 4 and on its mirror image in the lanes of 2\n    // and 8.\n    if (s > 1)\n      for (let m = max(0, b0); m \u003c= b1; m++) {\n        const a = ser(s * m), px = x0 + PMAX + cl(a, -PMAX, PMAX), yb = SY - (m - T) * rpb;\n        const ye = round(yb);\n        for (let y = ye - rpb + 1; y \u003c ye; y++) {\n          if (y \u003c 0 || y >= H) continue;\n          const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n          add(S, px, y, holdC, fade);\n          add(S, px - 1, y, holdC, 0.75 * fade);\n          add(S, px + 1, y, holdC, 0.75 * fade);\n        }\n      }\n    const n0 = floor((T - (H - SY) / rpb) * s) - 1, n1 = floor((T + SY / rpb) * s) + 1;\n    for (let n = max(0, n0); n \u003c= n1; n++) {\n      const a = ser(n), px = x0 + PMAX + cl(a, -PMAX, PMAX), on = n % s === 0;\n      // Rows the note covers: its onset at the bottom, the next onset at the top.\n      const yb = SY - (n / s - T) * rpb, yt = yb - len;\n      const gap = len >= 3 ? 1 : 0;\n      const c = on ? onC : offC, core = on ? 0.95 : 0.42 * (1 + 0.4 * lw), side = on ? 0.7 : 0.2 * (1 + 0.4 * lw);\n      const clip = abs(a) > PMAX ? 0.55 : 1;\n      // How long since this note struck, in beats: a flash that dies in about\n      // a sixth of a beat, longer for a downbeat.\n      const age = T - n / s, flash = age >= 0 && age \u003c 1 ? exp(-age * (on ? 9 : 16)) : 0;\n      // Rows are rounded at both ends, so a note of one row never drops out.\n      const ye = round(yb);\n      for (let y = round(yt) + gap; y \u003c ye; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        // Below the strike line the note has sounded and fades out.\n        const fade = y > SY ? 1 - (0.85 * (y - SY)) / (H - SY) : 1;\n        const lit = (y >= SY - 2 ? 1 + 1.6 * flash : 1) * fade * clip;\n        add(S, px, y, c, core * lit);\n        add(S, px - 1, y, c, side * lit);\n        add(S, px + 1, y, c, side * lit);\n        if (y >= SY - 2 && flash > 0) add(S, px, y, white, 0.5 * flash * fade);\n      }\n      // The struck key on the strike line, and its glow on either side.\n      if (flash > 0) {\n        for (let dx = -2; dx \u003c= 2; dx++) {\n          const g = (on ? 1 : 0.5) * flash * (dx === 0 ? 1 : abs(dx) === 1 ? 0.55 : 0.2);\n          add(S, px + dx, SY, white, 0.5 * g);\n          add(S, px + dx, SY, c, 0.8 * g);\n          add(S, px + dx, SY + 1, c, 0.35 * g);\n        }\n      }\n    }\n  }\n\n  // The strike line itself, a dim rule across each lane.\n  for (let x = 0; x \u003c W; x++) if ((x & 15) !== 15) add(S, x, SY, grey, 0.16);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(255 * min(1, R[p])), round(255 * min(1, G[p])), round(255 * min(1, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Beat=8..40, Start=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two colours of the notes on the beat round the wheel together: the lanes of 1 and 4, whose notes on the beat are the melody, in one; the lanes of 2 and 8, whose notes on the beat are the melody upside down, in the other. At 0 azure and rose; at 0.25 magenta and butter yellow; at 0.5 orange and mint; at 0.75 green and violet. The notes between the beats are the lane's colour paled 55% toward white."},{"name":"Speed","min":0.2,"max":3,"about":"The tempo, 60 times Speed beats a minute: 120 at 2, so the lane of 8 plays 16 notes a second and the panel scrolls 16 rows a second at Beat 8; 12 at 0.2, 180 at 3. After 512 beats the roll goes back to Start."},{"name":"Beat","min":8,"max":40,"about":"Rows to a beat, 8 to 40 in steps of 8. At 8 thirteen beats stand above the strike line, lane 1's notes are 7 rows long and the lane of 8's one row; at 16 six and a half beats; at 40 two and a half, lane 1's notes 39 rows long and the lane of 8's five."},{"name":"Start","min":0,"max":1,"about":"Where in the series the roll starts. Up to 0.06 at note 0, so it opens on 0, 1, -1, 2, 1, 0, -2, 3; above that at beat 16 to beat 496 in steps of 16. Further in, the melody wanders further from the middle: at most one note in 30 lies past seven steps, and it is drawn dimmer on the lane's edge."}],"start":[0,2,8,0.06],"measures":{"motion":1.2502,"detail":0.083,"edges":0.4948,"complexity":0.2954,"coverage":0.3381,"colour":0.176,"drift":0.0581},"knobResponse":[0.067,0.12,0.1058,0.141]},{"slug":"invasion-percolation","title":"Invasion Percolation","family":"sim","round":32,"note":"바닥 가운데 한 칸으로 들어온 침입 유체가 경계에서 문턱이 가장 낮은 칸을 하나씩 차지하며 위로 자라요. 차지한 차례대로 청록에서 보라로 물들고, 맨 윗줄과 끊겨 갇힌 방어 유체는 장미색으로 굳어요. 맨 윗줄에 닿으면 입구에서 거기까지 가장 짧은 통로가 금색으로 켜지고 새 문턱으로 다시 시작해요.","idea":"Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.","buttons":"K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.","code":"// ===== Patternflow pattern =====\n// Title:   Invasion Percolation\n// Family:  sim\n// Idea:    Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: invasion percolation (David Wilkinson and Jorge Willemsen, 1983), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold.\n// Knob 2: Speed. How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst.\n// Knob 3: Gravity. Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100.\n// Knob 4: Grain. How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes.\n// Buttons: K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.\n\nconst W = 64, H = 128, N = W * H, OUT = N, BIG = 1 \u003c\u003c 30;\nconst { floor, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Threshold tilt from bottom to top at Gravity 1.\nconst GA = 0.7;\n// Seconds the finished cluster stands, its channel lighting in the first 0.6.\nconst HOLD = 1.1;\n// Site percolation threshold of the square lattice (Newman and Ziff, 2000).\n// Of the thresholds the invader takes, 0.4 to 2 in a hundred lie above it.\nconst PC = 0.592746;\nconst JUMP = 17;\nconst INLET = N - W + (W >> 1);\n\n// The normal distribution function, after Abramowitz and Stegun 7.1.26.\nfunction phi(z) {\n  const x = Math.abs(z) / Math.SQRT2, t = 1 / (1 + 0.3275911 * x);\n  const e = 1 - ((((1.061405429 * t - 1.453152027) * t + 1.421413741) * t - 0.284496736) * t + 0.254829592) * t * exp(-x * x);\n  return z \u003c 0 ? 0.5 - 0.5 * e : 0.5 + 0.5 * e;\n}\n\n// Three box blurs of radius 2, across and then down: close to a Gaussian of\n// 2.45 cells.\nfunction blur(a, b) {\n  for (let pass = 0; pass \u003c 6; pass++) {\n    const across = pass % 2 === 0;\n    for (let i = 0; i \u003c N; i++) {\n      const x = i % W, y = (i / W) | 0;\n      let s = 0, n = 0;\n      for (let d = -2; d \u003c= 2; d++) {\n        const xx = across ? x + d : x, yy = across ? y : y + d;\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) (s += a[yy * W + xx]), n++;\n      }\n      b[i] = s / n;\n    }\n    a.set(b);\n  }\n}\n\n// Thresholds: white Gaussian noise mixed with its own blur by Grain, then\n// sent through the normal distribution function, so every cell's threshold\n// is uniform on [0, 1) whatever the grain and only the correlation changes.\nfunction field(P) {\n  const { r, g0, g1 } = P, a = P.grain, b = Math.sqrt(1 - a * a);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const v = b * g0[i] + a * g1[i];\n    r[i] = v;\n    m += v;\n    q += v * v;\n  }\n  m /= N;\n  const sd = Math.sqrt(Math.max(q / N - m * m, 1e-12));\n  for (let i = 0; i \u003c N; i++) r[i] = phi((r[i] - m) / sd);\n}\n\nfunction lattice(P) {\n  const { g0, g1 } = P;\n  for (let i = 0; i \u003c N; i++) g0[i] = Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n  g1.set(g0);\n  blur(g1, P.re);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) (m += g1[i]), (q += g1[i] * g1[i]);\n  m /= N;\n  const sd = Math.sqrt(q / N - m * m);\n  for (let i = 0; i \u003c N; i++) g1[i] = (g1[i] - m) / sd;\n  P.grain = NaN;\n  P.k = 0;\n  P.K = 0;\n  P.budget = 0;\n  P.hold = -1;\n  P.ord.fill(-1);\n  P.trap.fill(BIG);\n  P.path.fill(-1);\n  P.pathLen = 0;\n  P.grav = NaN;\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N + 1), I = () => new Int32Array(N + 1);\n  params.s = {\n    r: F(), re: F(), g0: F(), g1: F(), stepT: F(), dur: F(), cr: F(), cg: F(), cb: F(), oldR: F(), oldG: F(), oldB: F(),\n    seq: I(), ord: I(), path: I(), prev: I(), trap: I(), heap: I(), tmp: I(), cnt: I(), par: I(), nxt: I(), tail: I(), size: I(), join: I(),\n    inv: new Uint8Array(N + 1), inH: new Uint8Array(N + 1), good: new Uint8Array(N + 1),\n    pathLen: 0, k: 0, K: 0, budget: 0, clock: 0, hold: -1, oldA: 0, grav: NaN, grain: NaN, hue: 0, speed: 2, flash: 0,\n  };\n  lattice(params.s);\n}\n\n// From the cells already invaded, runs invasion without trapping to the top\n// row, then walks the run backwards with union-find over the defending cells\n// to learn which steps trapping would have refused and when each pocket of\n// defender was cut off from the top row.\nfunction compute(P) {\n  const { r, re, seq, ord, trap, heap, tmp, cnt, par, nxt, tail, size, join, inv, inH, good } = P;\n  const from = P.k, g = P.grav * GA;\n  for (let i = 0; i \u003c N; i++) re[i] = r[i] - (g * (H - 1 - ((i / W) | 0))) / (H - 1);\n  inv.fill(0);\n  inH.fill(0);\n  for (let j = 0; j \u003c from; j++) inv[seq[j]] = 1;\n  for (let i = 0; i \u003c N; i++) if (!inv[i] && trap[i] > from) (trap[i] = BIG), (ord[i] = -1);\n  let n = 0;\n  const push = (i) => {\n    if (inv[i] || inH[i] || trap[i] \u003c= from) return;\n    inH[i] = 1;\n    const v = re[i];\n    let c = n++;\n    while (c > 0) {\n      const p = (c - 1) >> 1;\n      if (re[heap[p]] \u003c= v) break;\n      heap[c] = heap[p];\n      c = p;\n    }\n    heap[c] = i;\n  };\n  const pop = () => {\n    const top = heap[0], last = heap[--n], v = re[last];\n    let c = 0;\n    for (;;) {\n      let m = 2 * c + 1;\n      if (m >= n) break;\n      if (m + 1 \u003c n && re[heap[m + 1]] \u003c re[heap[m]]) m++;\n      if (re[heap[m]] >= v) break;\n      heap[c] = heap[m];\n      c = m;\n    }\n    heap[c] = last;\n    return top;\n  };\n  const around = (i, f) => {\n    const x = i % W;\n    if (x > 0) f(i - 1);\n    if (x \u003c W - 1) f(i + 1);\n    if (i >= W) f(i - W);\n    if (i \u003c N - W) f(i + W);\n  };\n  push(INLET);\n  for (let j = 0; j \u003c from; j++) around(seq[j], push);\n  let M = 0;\n  while (n > 0) {\n    const i = pop();\n    inH[i] = 0;\n    inv[i] = 2;\n    tmp[M++] = i;\n    if (i \u003c W) break;\n    around(i, push);\n  }\n\n  for (let i = 0; i \u003c= N; i++) (par[i] = i), (nxt[i] = -1), (tail[i] = i), (size[i] = 1), (join[i] = -1);\n  const find = (i) => {\n    while (par[i] !== i) (par[i] = par[par[i]]), (i = par[i]);\n    return i;\n  };\n  let t = M;\n  const unite = (a, b) => {\n    a = find(a);\n    b = find(b);\n    if (a === b) return;\n    if (b === OUT) (b = a), (a = OUT);\n    if (a === OUT) {\n      for (let m = b; m >= 0; m = nxt[m]) join[m] = t;\n      par[b] = OUT;\n      return;\n    }\n    if (size[a] \u003c size[b]) {\n      const s = a;\n      (a = b), (b = s);\n    }\n    par[b] = a;\n    size[a] += size[b];\n    nxt[tail[a]] = b;\n    tail[a] = tail[b];\n  };\n  // The defender joins across corners too: a diagonal gap between two\n  // invaded cells lets it through.\n  const around8 = (i, f) => {\n    const x = i % W, l = x > 0, rr = x \u003c W - 1;\n    if (l) f(i - 1);\n    if (rr) f(i + 1);\n    if (i >= W) {\n      f(i - W);\n      if (l) f(i - W - 1);\n      if (rr) f(i - W + 1);\n    }\n    if (i \u003c N - W) {\n      f(i + W);\n      if (l) f(i + W - 1);\n      if (rr) f(i + W + 1);\n    }\n  };\n  for (let i = 0; i \u003c N; i++) {\n    if (inv[i]) continue;\n    if (i \u003c W) unite(i, OUT);\n    around8(i, (j) => !inv[j] && unite(i, j));\n  }\n  for (t = M - 1; t >= 0; t--) {\n    const c = tmp[t];\n    inv[c] = 0;\n    if (c \u003c W) unite(c, OUT);\n    around8(c, (j) => !inv[j] && unite(c, j));\n    good[t] = find(c) === OUT ? 1 : 0;\n  }\n  let k = from;\n  for (t = 0; t \u003c M; t++) {\n    if (good[t]) (seq[k] = tmp[t]), (ord[tmp[t]] = k), k++;\n    cnt[t] = k;\n  }\n  P.K = k;\n  for (let i = 0; i \u003c N; i++) {\n    if (trap[i] !== BIG || ord[i] >= 0) continue;\n    const j = join[i];\n    if (j >= 0 && j \u003c M) trap[i] = cnt[j];\n  }\n  durations(P);\n}\n\nfunction durations(P) {\n  const { re, seq, dur } = P;\n  let s = 0;\n  for (let k = 0; k \u003c P.K; k++) {\n    dur[k] = exp(JUMP * Math.min(re[seq[k]] - PC, 0.03));\n    s += dur[k];\n  }\n  const m = P.K / Math.max(s, 1e-9);\n  for (let k = 0; k \u003c P.K; k++) dur[k] *= m;\n}\n\n// The channel the invader flows through once it breaks through: the shortest\n// path inside the cluster from the inlet to the cell that reached the top row,\n// found breadth first. Each cell on it keeps its place along the path.\nfunction channel(P) {\n  const { ord, prev, heap: queue, path, seq, K } = P;\n  prev.fill(-2);\n  const end = seq[K - 1];\n  let qh = 0, qt = 0;\n  queue[qt++] = INLET;\n  prev[INLET] = -1;\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i === end) break;\n    const x = i % W;\n    for (const j of [i - W, x > 0 ? i - 1 : -1, x \u003c W - 1 ? i + 1 : -1, i + W])\n      if (j >= 0 && j \u003c N && ord[j] >= 0 && ord[j] \u003c K && prev[j] === -2) (prev[j] = i), (queue[qt++] = j);\n  }\n  let n = 0;\n  for (let i = end; i >= 0; i = prev[i]) n++;\n  P.pathLen = n;\n  for (let i = end; i >= 0; i = prev[i]) path[i] = --n;\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  lattice(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const g = cl(kv[2], -1, 1), gr = cl(kv[3], 0, 1);\n  P.clock += d;\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  if (P.hold \u003c 0 && (g !== P.grav || gr !== P.grain)) {\n    if (gr !== P.grain) (P.grain = gr), field(P);\n    P.grav = g;\n    compute(P);\n  }\n  P.oldA *= exp(-d / 0.45);\n  P.flash *= exp(-d / 0.4);\n  if (P.hold \u003c 0) {\n    P.budget += (d * P.K * P.speed) / 11;\n    while (P.k \u003c P.K && P.budget >= P.dur[P.k]) (P.budget -= P.dur[P.k]), (P.stepT[P.k] = P.clock), P.k++;\n    if (P.k >= P.K) (P.hold = 0), (P.flash = 1), channel(P);\n  } else if ((P.hold += d) > HOLD) restart(P);\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { r, ord, trap, stepT, path, cr, cg, cb, oldR, oldG, oldB, k, K } = P;\n  const h0 = P.hue, now = P.clock, oa = P.oldA, fl = P.flash, hold = P.hold;\n  hsv(h0 + 0.13, 0.5, 1);\n  const gR = C[0], gG = C[1], gB = C[2];\n  for (let i = 0; i \u003c N; i++) {\n    const o = ord[i];\n    let R, G, B;\n    if (o >= 0 && o \u003c k) {\n      const f = o / K;\n      const age = now - stepT[o];\n      hsv(h0 + 0.45 + 0.28 * f, 0.8, 0.55 + 0.25 * f + 0.2 * fl);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-age / 0.3);\n      if (w > 0.003) (R += (1 - R) * w), (G += (1 - G) * w), (B += (0.95 - B) * w);\n      const j = path[i];\n      if (j >= 0) {\n        const u = cl(hold / 0.6 - j / P.pathLen, 0, 1);\n        if (u > 0) (R += (gR - R) * u), (G += (gG - G) * u), (B += (gB - B) * u);\n      }\n    } else if (trap[i] \u003c= k) {\n      hsv(h0 + 0.95, 0.6, 0.1 + 0.22 * (1 - r[i]));\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-(now - stepT[trap[i] - 1]) / 0.5);\n      if (w > 0.003) (R += (1 - R) * w * 0.6), (G += (0.6 - G) * w * 0.6), (B += (0.8 - B) * w * 0.6);\n    } else {\n      hsv(h0 + 0.08, 0.35, 0.035 + 0.1 * (1 - r[i]) ** 1.5);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    }\n    R *= 255;\n    G *= 255;\n    B *= 255;\n    if (oa > 0.01) (R = Math.max(R, oldR[i] * oa)), (G = Math.max(G, oldG[i] * oa)), (B = Math.max(B, oldB[i] * oa));\n    (cr[i] = R), (cg[i] = G), (cb[i] = B);\n    display.setPixel(i % W, (i / W) | 0, R, G, B);\n  }\n}\n","layer":{"id":"layer-invasion-percolation","type":"code","name":"invasion-percolation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Invasion Percolation\n// Family:  sim\n// Idea:    Invasion percolation from one inlet in the middle of the bottom row: every cell holds a random threshold, the invader takes the cheapest cell on its border one step at a time and is coloured teal to violet in the order it took them, defender it cuts off from the top row is trapped for good and turns rose, and when the invader reaches the top row the shortest channel through it lights gold and a fresh lattice begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: invasion percolation (David Wilkinson and Jorge Willemsen, 1983), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold.\n// Knob 2: Speed. How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst.\n// Knob 3: Gravity. Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100.\n// Knob 4: Grain. How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes.\n// Buttons: K1 tap draws a fresh threshold for every cell and starts the invasion again from the inlet while the old picture fades in about half a second.\n\nconst W = 64, H = 128, N = W * H, OUT = N, BIG = 1 \u003c\u003c 30;\nconst { floor, exp } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Threshold tilt from bottom to top at Gravity 1.\nconst GA = 0.7;\n// Seconds the finished cluster stands, its channel lighting in the first 0.6.\nconst HOLD = 1.1;\n// Site percolation threshold of the square lattice (Newman and Ziff, 2000).\n// Of the thresholds the invader takes, 0.4 to 2 in a hundred lie above it.\nconst PC = 0.592746;\nconst JUMP = 17;\nconst INLET = N - W + (W >> 1);\n\n// The normal distribution function, after Abramowitz and Stegun 7.1.26.\nfunction phi(z) {\n  const x = Math.abs(z) / Math.SQRT2, t = 1 / (1 + 0.3275911 * x);\n  const e = 1 - ((((1.061405429 * t - 1.453152027) * t + 1.421413741) * t - 0.284496736) * t + 0.254829592) * t * exp(-x * x);\n  return z \u003c 0 ? 0.5 - 0.5 * e : 0.5 + 0.5 * e;\n}\n\n// Three box blurs of radius 2, across and then down: close to a Gaussian of\n// 2.45 cells.\nfunction blur(a, b) {\n  for (let pass = 0; pass \u003c 6; pass++) {\n    const across = pass % 2 === 0;\n    for (let i = 0; i \u003c N; i++) {\n      const x = i % W, y = (i / W) | 0;\n      let s = 0, n = 0;\n      for (let d = -2; d \u003c= 2; d++) {\n        const xx = across ? x + d : x, yy = across ? y : y + d;\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) (s += a[yy * W + xx]), n++;\n      }\n      b[i] = s / n;\n    }\n    a.set(b);\n  }\n}\n\n// Thresholds: white Gaussian noise mixed with its own blur by Grain, then\n// sent through the normal distribution function, so every cell's threshold\n// is uniform on [0, 1) whatever the grain and only the correlation changes.\nfunction field(P) {\n  const { r, g0, g1 } = P, a = P.grain, b = Math.sqrt(1 - a * a);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const v = b * g0[i] + a * g1[i];\n    r[i] = v;\n    m += v;\n    q += v * v;\n  }\n  m /= N;\n  const sd = Math.sqrt(Math.max(q / N - m * m, 1e-12));\n  for (let i = 0; i \u003c N; i++) r[i] = phi((r[i] - m) / sd);\n}\n\nfunction lattice(P) {\n  const { g0, g1 } = P;\n  for (let i = 0; i \u003c N; i++) g0[i] = Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n  g1.set(g0);\n  blur(g1, P.re);\n  let m = 0, q = 0;\n  for (let i = 0; i \u003c N; i++) (m += g1[i]), (q += g1[i] * g1[i]);\n  m /= N;\n  const sd = Math.sqrt(q / N - m * m);\n  for (let i = 0; i \u003c N; i++) g1[i] = (g1[i] - m) / sd;\n  P.grain = NaN;\n  P.k = 0;\n  P.K = 0;\n  P.budget = 0;\n  P.hold = -1;\n  P.ord.fill(-1);\n  P.trap.fill(BIG);\n  P.path.fill(-1);\n  P.pathLen = 0;\n  P.grav = NaN;\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N + 1), I = () => new Int32Array(N + 1);\n  params.s = {\n    r: F(), re: F(), g0: F(), g1: F(), stepT: F(), dur: F(), cr: F(), cg: F(), cb: F(), oldR: F(), oldG: F(), oldB: F(),\n    seq: I(), ord: I(), path: I(), prev: I(), trap: I(), heap: I(), tmp: I(), cnt: I(), par: I(), nxt: I(), tail: I(), size: I(), join: I(),\n    inv: new Uint8Array(N + 1), inH: new Uint8Array(N + 1), good: new Uint8Array(N + 1),\n    pathLen: 0, k: 0, K: 0, budget: 0, clock: 0, hold: -1, oldA: 0, grav: NaN, grain: NaN, hue: 0, speed: 2, flash: 0,\n  };\n  lattice(params.s);\n}\n\n// From the cells already invaded, runs invasion without trapping to the top\n// row, then walks the run backwards with union-find over the defending cells\n// to learn which steps trapping would have refused and when each pocket of\n// defender was cut off from the top row.\nfunction compute(P) {\n  const { r, re, seq, ord, trap, heap, tmp, cnt, par, nxt, tail, size, join, inv, inH, good } = P;\n  const from = P.k, g = P.grav * GA;\n  for (let i = 0; i \u003c N; i++) re[i] = r[i] - (g * (H - 1 - ((i / W) | 0))) / (H - 1);\n  inv.fill(0);\n  inH.fill(0);\n  for (let j = 0; j \u003c from; j++) inv[seq[j]] = 1;\n  for (let i = 0; i \u003c N; i++) if (!inv[i] && trap[i] > from) (trap[i] = BIG), (ord[i] = -1);\n  let n = 0;\n  const push = (i) => {\n    if (inv[i] || inH[i] || trap[i] \u003c= from) return;\n    inH[i] = 1;\n    const v = re[i];\n    let c = n++;\n    while (c > 0) {\n      const p = (c - 1) >> 1;\n      if (re[heap[p]] \u003c= v) break;\n      heap[c] = heap[p];\n      c = p;\n    }\n    heap[c] = i;\n  };\n  const pop = () => {\n    const top = heap[0], last = heap[--n], v = re[last];\n    let c = 0;\n    for (;;) {\n      let m = 2 * c + 1;\n      if (m >= n) break;\n      if (m + 1 \u003c n && re[heap[m + 1]] \u003c re[heap[m]]) m++;\n      if (re[heap[m]] >= v) break;\n      heap[c] = heap[m];\n      c = m;\n    }\n    heap[c] = last;\n    return top;\n  };\n  const around = (i, f) => {\n    const x = i % W;\n    if (x > 0) f(i - 1);\n    if (x \u003c W - 1) f(i + 1);\n    if (i >= W) f(i - W);\n    if (i \u003c N - W) f(i + W);\n  };\n  push(INLET);\n  for (let j = 0; j \u003c from; j++) around(seq[j], push);\n  let M = 0;\n  while (n > 0) {\n    const i = pop();\n    inH[i] = 0;\n    inv[i] = 2;\n    tmp[M++] = i;\n    if (i \u003c W) break;\n    around(i, push);\n  }\n\n  for (let i = 0; i \u003c= N; i++) (par[i] = i), (nxt[i] = -1), (tail[i] = i), (size[i] = 1), (join[i] = -1);\n  const find = (i) => {\n    while (par[i] !== i) (par[i] = par[par[i]]), (i = par[i]);\n    return i;\n  };\n  let t = M;\n  const unite = (a, b) => {\n    a = find(a);\n    b = find(b);\n    if (a === b) return;\n    if (b === OUT) (b = a), (a = OUT);\n    if (a === OUT) {\n      for (let m = b; m >= 0; m = nxt[m]) join[m] = t;\n      par[b] = OUT;\n      return;\n    }\n    if (size[a] \u003c size[b]) {\n      const s = a;\n      (a = b), (b = s);\n    }\n    par[b] = a;\n    size[a] += size[b];\n    nxt[tail[a]] = b;\n    tail[a] = tail[b];\n  };\n  // The defender joins across corners too: a diagonal gap between two\n  // invaded cells lets it through.\n  const around8 = (i, f) => {\n    const x = i % W, l = x > 0, rr = x \u003c W - 1;\n    if (l) f(i - 1);\n    if (rr) f(i + 1);\n    if (i >= W) {\n      f(i - W);\n      if (l) f(i - W - 1);\n      if (rr) f(i - W + 1);\n    }\n    if (i \u003c N - W) {\n      f(i + W);\n      if (l) f(i + W - 1);\n      if (rr) f(i + W + 1);\n    }\n  };\n  for (let i = 0; i \u003c N; i++) {\n    if (inv[i]) continue;\n    if (i \u003c W) unite(i, OUT);\n    around8(i, (j) => !inv[j] && unite(i, j));\n  }\n  for (t = M - 1; t >= 0; t--) {\n    const c = tmp[t];\n    inv[c] = 0;\n    if (c \u003c W) unite(c, OUT);\n    around8(c, (j) => !inv[j] && unite(c, j));\n    good[t] = find(c) === OUT ? 1 : 0;\n  }\n  let k = from;\n  for (t = 0; t \u003c M; t++) {\n    if (good[t]) (seq[k] = tmp[t]), (ord[tmp[t]] = k), k++;\n    cnt[t] = k;\n  }\n  P.K = k;\n  for (let i = 0; i \u003c N; i++) {\n    if (trap[i] !== BIG || ord[i] >= 0) continue;\n    const j = join[i];\n    if (j >= 0 && j \u003c M) trap[i] = cnt[j];\n  }\n  durations(P);\n}\n\nfunction durations(P) {\n  const { re, seq, dur } = P;\n  let s = 0;\n  for (let k = 0; k \u003c P.K; k++) {\n    dur[k] = exp(JUMP * Math.min(re[seq[k]] - PC, 0.03));\n    s += dur[k];\n  }\n  const m = P.K / Math.max(s, 1e-9);\n  for (let k = 0; k \u003c P.K; k++) dur[k] *= m;\n}\n\n// The channel the invader flows through once it breaks through: the shortest\n// path inside the cluster from the inlet to the cell that reached the top row,\n// found breadth first. Each cell on it keeps its place along the path.\nfunction channel(P) {\n  const { ord, prev, heap: queue, path, seq, K } = P;\n  prev.fill(-2);\n  const end = seq[K - 1];\n  let qh = 0, qt = 0;\n  queue[qt++] = INLET;\n  prev[INLET] = -1;\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i === end) break;\n    const x = i % W;\n    for (const j of [i - W, x > 0 ? i - 1 : -1, x \u003c W - 1 ? i + 1 : -1, i + W])\n      if (j >= 0 && j \u003c N && ord[j] >= 0 && ord[j] \u003c K && prev[j] === -2) (prev[j] = i), (queue[qt++] = j);\n  }\n  let n = 0;\n  for (let i = end; i >= 0; i = prev[i]) n++;\n  P.pathLen = n;\n  for (let i = end; i >= 0; i = prev[i]) path[i] = --n;\n}\n\nfunction restart(P) {\n  P.oldA = 1;\n  P.oldR.set(P.cr);\n  P.oldG.set(P.cg);\n  P.oldB.set(P.cb);\n  lattice(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const g = cl(kv[2], -1, 1), gr = cl(kv[3], 0, 1);\n  P.clock += d;\n  if (input.btnPressed && input.btnPressed[0]) restart(P);\n  if (P.hold \u003c 0 && (g !== P.grav || gr !== P.grain)) {\n    if (gr !== P.grain) (P.grain = gr), field(P);\n    P.grav = g;\n    compute(P);\n  }\n  P.oldA *= exp(-d / 0.45);\n  P.flash *= exp(-d / 0.4);\n  if (P.hold \u003c 0) {\n    P.budget += (d * P.K * P.speed) / 11;\n    while (P.k \u003c P.K && P.budget >= P.dur[P.k]) (P.budget -= P.dur[P.k]), (P.stepT[P.k] = P.clock), P.k++;\n    if (P.k >= P.K) (P.hold = 0), (P.flash = 1), channel(P);\n  } else if ((P.hold += d) > HOLD) restart(P);\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { r, ord, trap, stepT, path, cr, cg, cb, oldR, oldG, oldB, k, K } = P;\n  const h0 = P.hue, now = P.clock, oa = P.oldA, fl = P.flash, hold = P.hold;\n  hsv(h0 + 0.13, 0.5, 1);\n  const gR = C[0], gG = C[1], gB = C[2];\n  for (let i = 0; i \u003c N; i++) {\n    const o = ord[i];\n    let R, G, B;\n    if (o >= 0 && o \u003c k) {\n      const f = o / K;\n      const age = now - stepT[o];\n      hsv(h0 + 0.45 + 0.28 * f, 0.8, 0.55 + 0.25 * f + 0.2 * fl);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-age / 0.3);\n      if (w > 0.003) (R += (1 - R) * w), (G += (1 - G) * w), (B += (0.95 - B) * w);\n      const j = path[i];\n      if (j >= 0) {\n        const u = cl(hold / 0.6 - j / P.pathLen, 0, 1);\n        if (u > 0) (R += (gR - R) * u), (G += (gG - G) * u), (B += (gB - B) * u);\n      }\n    } else if (trap[i] \u003c= k) {\n      hsv(h0 + 0.95, 0.6, 0.1 + 0.22 * (1 - r[i]));\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = exp(-(now - stepT[trap[i] - 1]) / 0.5);\n      if (w > 0.003) (R += (1 - R) * w * 0.6), (G += (0.6 - G) * w * 0.6), (B += (0.8 - B) * w * 0.6);\n    } else {\n      hsv(h0 + 0.08, 0.35, 0.035 + 0.1 * (1 - r[i]) ** 1.5);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    }\n    R *= 255;\n    G *= 255;\n    B *= 255;\n    if (oa > 0.01) (R = Math.max(R, oldR[i] * oa)), (G = Math.max(G, oldG[i] * oa)), (B = Math.max(B, oldB[i] * oa));\n    (cr[i] = R), (cg[i] = G), (cb[i] = B);\n    display.setPixel(i % W, (i / W) | 0, R, G, B);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Gravity=-1..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the invaded cells run from teal (the first taken) through blue to violet (the last), freshly taken cells flash white, trapped defender is rose, the untouched thresholds are dim warm sand, lighter where the threshold is low, and the breakthrough channel is pale gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the invader takes cells. At 2 a run from the inlet to the top row takes 5.5 s however many cells it needs (1,900 to 3,100 at the start knobs), at 0.2 it takes 55 s and at 3 it takes 3.7 s. A cell's share of that time grows as e^(17 (r - p_c)) up to r = p_c + 0.03, so the front hangs on a cell with a threshold near p_c = 0.5927 and then floods the cheap cells behind it in a burst."},{"name":"Gravity","min":-1,"max":1,"about":"Tilts the thresholds with height: a cell counts r - 0.7 x Gravity x h, h running from 0 on the bottom row to 1 on the top. At 0 the invasion is pure. At 1 the top cells are 0.7 cheaper and one narrow finger climbs, 800 to 1,300 cells to the top; at -1 they are 0.7 dearer, the front rises level and takes 3,700 to 4,100."},{"name":"Grain","min":0,"max":1,"about":"How far the thresholds are correlated. At 0 each cell draws its own; towards 1 the draws are blurred over about 2.5 cells, the sand turns to soft light and dark patches, and the invader runs along the light ones in rounded channels. Each threshold stays uniform on 0..1 at every setting; only its likeness to its neighbours changes."}],"start":[0,2,0,0.06],"measures":{"motion":0.1366,"detail":0.0909,"edges":0.2189,"complexity":1.5161,"coverage":0.4669,"colour":0.1889,"drift":0.1552},"knobResponse":[0.0576,0.0663,0.1297,0.1267]},{"slug":"isospectral-drums","title":"Isospectral Drums","family":"wave","round":39,"note":"모양이 다른 북 두 개가 위아래에서 같은 높이의 소리로 울려요. 반정사각형 일곱 장으로 지은 고든, 웹, 월퍼트의 북이라 고유값이 하나도 다르지 않고, 가운데 띠의 눈금이 그 고유값이에요. 북마다 제 노드선을 그리며 같은 박자로 떨어요.","idea":"Two drums of different shape, each glued from the same seven half-squares, one above the other, ring in the same eigenmode at the same frequency, one tone where the membrane is up and the opposite tone where it is down with dark nodal lines between, while a strip between them marks their one shared spectrum and the mode they play as they climb it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Isospectral Drums\n// Family:  wave\n// Idea:    Two drums of different shape, each glued from the same seven half-squares, one above the other, ring in the same eigenmode at the same frequency, one tone where the membrane is up and the opposite tone where it is down with dark nodal lines between, while a strip between them marks their one shared spectrum and the mode they play as they climb it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: isospectral drums (Carolyn Gordon, David Webb and Scott Wolpert, 1992), the answer to Mark Kac's \"Can one hear the shape of a drum?\" (1966); the drums built from the Fano plane as Peter Buser, John Conway, Peter Doyle and Klaus-Dieter Semmler did (1994), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Mode=0..24, Beat=0..1\n//\n// Knob 1: Hue. Turns the two tones round the wheel together, always half a turn apart: at 0 the membrane is rose where it is up and aqua where it is down, at 0.1 coral and sky blue, at 0.25 yellow-lime and indigo, at 0.5 aqua and rose, at 0.75 indigo and yellow-lime. Orange and yellow tones are paled a little and lifted up to 1.5 times, so the dim parts of a swing do not turn brown or olive.\n// Knob 2: Speed. At 2 the fundamental swings once in 2.5 s and the 24th mode, 3.3 times higher, in 0.76 s, and on its climb the pair holds each mode 5 s. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Mode. At 0 the drums climb their spectrum on their own from the 6th mode, a step every 5 s at Speed 2, back to the fundamental after the 24th. From 1 to 24 they hold that mode: 1 is a single dome; at 9 the nodal lines are exactly the seams between the seven half-squares, because that mode is the half-square's own lowest mode turned over at every seam; by 24 each drum is cut into eight to ten nodal domains, never laid out the same in the two.\n// Knob 4: Beat. Mixes in the mode three steps up, to half and half at 1. The two frequencies beat and the nodal lines sweep across both drums and come back in the same rhythm, because the two drums share every frequency; the strip lights both modes.\n\nconst W = 64, H = 128;\n// Leg of a half-square in LEDs. A drum spans three legs each way, 58 LEDs\n// with its rim; the lower drum's grid starts at row 70.\nconst S = 19, NG = 3 * S + 1, X0 = 3, TOP = [0, 70];\n// Modes found at setup, and the Lanczos steps that find them.\nconst K = 24, M = 64;\n// The spectrum strip, rows 59 to 68: its axis runs from 0 to 1.05 times the\n// 24th eigenvalue across the drums' width.\nconst AX = 1.05, TICK = [0.7, 0.8, 0.85];\n// Fundamental frequency in Hz at Speed 2; seconds a mode is held on the\n// climb, of which the last XF fade into the next; the mode the climb opens on.\nconst F1 = 0.4, DWELL = 5, XF = 1.2, FIRST = 6;\n// Membrane level where it is flat, so the drums stay in sight between swings.\nconst FLOOR = 0.18;\n// Opening hue: rose up, aqua down.\nconst H0 = 0.96;\nconst { floor, min, max, abs, sqrt, cos, round, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The Fano plane: its seven points are the nonzero vectors (x, y, z) of\n// F2^3, held as the numbers 1 to 7, and so are its seven lines, a line v\n// holding the points p with p.v = 0. Three involutions of PSL(3,2) act on\n// both: a swaps x and z, b swaps y and z, c adds z to x. On lines an element\n// acts by its inverse transpose, which for a and b is themselves and for c\n// adds x to z.\nconst bit = (v, k) => (v >> k) & 1, vec = (x, y, z) => (x \u003c\u003c 2) | (y \u003c\u003c 1) | z;\nconst swapXZ = (v) => vec(bit(v, 0), bit(v, 1), bit(v, 2)), swapYZ = (v) => vec(bit(v, 2), bit(v, 0), bit(v, 1));\nconst ON_POINTS = [swapXZ, swapYZ, (v) => vec(bit(v, 2) ^ bit(v, 0), bit(v, 1), bit(v, 0))];\nconst ON_LINES = [swapXZ, swapYZ, (v) => vec(bit(v, 2), bit(v, 1), bit(v, 2) ^ bit(v, 0))];\n\n// The base tile is the half-square (0,0), (1,0), (0,1); a and b are its\n// legs, c its hypotenuse. Reflection across each, as (x, y) -> (m0 x + m1 y\n// + m4, m2 x + m3 y + m5). Legs on the LED axes and the hypotenuse at 45\n// degrees, so every reflection maps the LED grid onto itself.\nconst REF = [[1, 0, 0, -1, 0, 0], [-1, 0, 0, 1, 0, 0], [0, -1, -1, 0, 1, 1]];\nconst comp = (g, h) => [g[0] * h[0] + g[1] * h[2], g[0] * h[1] + g[1] * h[3], g[2] * h[0] + g[3] * h[2], g[2] * h[1] + g[3] * h[3], g[0] * h[4] + g[1] * h[5] + g[4], g[2] * h[4] + g[3] * h[5] + g[5]];\n\n// Copy i of the tile is glued to copy a(i) across side a, and so on; a\n// side an involution fixes is the drum's rim. The gluings make a tree, so\n// unfolding it from copy 1 places every copy in the plane.\nfunction unfold(inv) {\n  const g = [];\n  g[1] = [1, 0, 0, 1, 0, 0];\n  const q = [1];\n  while (q.length) {\n    const i = q.pop();\n    for (let s = 0; s \u003c 3; s++) {\n      const j = inv[s](i);\n      if (j !== i && !g[j]) {\n        g[j] = comp(g[i], REF[s]);\n        q.push(j);\n      }\n    }\n  }\n  return g.slice(1);\n}\n\n// Each grid point of the drum: 0 outside, 1 on the rim, 2 inside. A point\n// is inside when a step into every one of the eight 45-degree wedges round\n// it stays on the drum; every tile edge runs along a wedge's side.\nfunction drumMask(tiles, flip) {\n  let mx = 1e9, my = 1e9;\n  for (const g of tiles)\n    for (const [u, v] of [[0, 0], [1, 0], [0, 1]]) {\n      mx = min(mx, g[0] * u + g[1] * v + g[4]);\n      my = min(my, g[2] * u + g[3] * v + g[5]);\n    }\n  const on = (x, y) => {\n    for (const g of tiles) {\n      const px = x / S + mx - g[4], py = y / S + my - g[5];\n      const u = g[0] * px + g[2] * py, v = g[1] * px + g[3] * py;\n      if (u > -1e-9 && v > -1e-9 && u + v \u003c 1 + 1e-9) return true;\n    }\n    return false;\n  };\n  const m = new Uint8Array(NG * NG);\n  for (let y = 0; y \u003c NG; y++)\n    for (let x = 0; x \u003c NG; x++) {\n      const gy = flip ? NG - 1 - y : y;\n      if (!on(x, gy)) continue;\n      let all = true;\n      for (const [dx, dy] of [[2, 1], [1, 2], [-1, 2], [-2, 1], [-2, -1], [-1, -2], [1, -2], [2, -1]]) if (!on(x + 0.05 * dx, gy + 0.05 * dy)) all = false;\n      m[y * NG + x] = all ? 2 : 1;\n    }\n  return m;\n}\n\n// Implicit QL on a symmetric tridiagonal matrix (EISPACK's tql2): d the\n// diagonal, e[1..n-1] below it; z starts as the identity and leaves holding\n// the eigenvectors in its columns.\nfunction tql2(n, d, e, z) {\n  for (let i = 1; i \u003c n; i++) e[i - 1] = e[i];\n  e[n - 1] = 0;\n  let f = 0, tst = 0;\n  for (let l = 0; l \u003c n; l++) {\n    tst = max(tst, abs(d[l]) + abs(e[l]));\n    let m = l;\n    while (m \u003c n && abs(e[m]) > 2.2e-16 * tst) m++;\n    if (m > l)\n      do {\n        let g = d[l], p = (d[l + 1] - g) / (2 * e[l]), r = hypot(p, 1);\n        if (p \u003c 0) r = -r;\n        d[l] = e[l] / (p + r);\n        d[l + 1] = e[l] * (p + r);\n        const dl1 = d[l + 1];\n        let h = g - d[l];\n        for (let i = l + 2; i \u003c n; i++) d[i] -= h;\n        f += h;\n        p = d[m];\n        let c = 1, c2 = 1, c3 = 1, s = 0, s2 = 0;\n        const el1 = e[l + 1];\n        for (let i = m - 1; i >= l; i--) {\n          c3 = c2;\n          c2 = c;\n          s2 = s;\n          g = c * e[i];\n          h = c * p;\n          r = hypot(p, e[i]);\n          e[i + 1] = s * r;\n          s = e[i] / r;\n          c = p / r;\n          p = c * d[i] - s * g;\n          d[i + 1] = h + s * (c * g + s * d[i]);\n          for (let k = 0; k \u003c n; k++) {\n            const a = z[k * n + i], b = z[k * n + i + 1];\n            z[k * n + i + 1] = s * a + c * b;\n            z[k * n + i] = c * a - s * b;\n          }\n        }\n        p = (-s * s2 * c3 * el1 * e[l]) / dl1;\n        e[l] = s * p;\n        d[l] = c * p;\n      } while (abs(e[l]) > 2.2e-16 * tst);\n    d[l] += f;\n    e[l] = 0;\n  }\n}\n\n// The lowest K eigenpairs of the 5-point Dirichlet Laplacian on the drum's\n// inside points: Lanczos on its inverse, applied by a banded Cholesky\n// factor, with full reorthogonalisation. Eigenvalues in units of one LED.\n// Every reflection of the gluing maps the LED grid onto itself, so the two\n// pixel drums are isospectral exactly, not only in the limit: both have\n// 1179 inside points and the same 1179 eigenvalues, and the lowest 24 found\n// here for each agree to 1e-11.\nfunction drumModes(mask) {\n  const id = new Int32Array(NG * NG).fill(-1), pos = [];\n  for (let p = 0; p \u003c NG * NG; p++) if (mask[p] === 2) id[p] = pos.push(p) - 1;\n  const n = pos.length;\n  let bw = 1;\n  for (let i = 0; i \u003c n; i++) if (id[pos[i] - NG] >= 0) bw = max(bw, i - id[pos[i] - NG]);\n  const B = bw + 1, L = new Float64Array(n * B);\n  for (let i = 0; i \u003c n; i++)\n    for (let j = max(0, i - bw); j \u003c= i; j++) {\n      const dp = pos[i] - pos[j];\n      let s = i === j ? 4 : dp === 1 || dp === NG ? -1 : 0;\n      for (let k = max(0, i - bw); k \u003c j; k++) s -= L[i * B + i - k] * L[j * B + j - k];\n      L[i * B + i - j] = i === j ? sqrt(s) : s / L[j * B];\n    }\n  const solve = (b, x) => {\n    for (let i = 0; i \u003c n; i++) {\n      let s = b[i];\n      for (let k = max(0, i - bw); k \u003c i; k++) s -= L[i * B + i - k] * x[k];\n      x[i] = s / L[i * B];\n    }\n    for (let i = n - 1; i >= 0; i--) {\n      let s = x[i];\n      for (let k = i + 1; k \u003c= min(n - 1, i + bw); k++) s -= L[k * B + k - i] * x[k];\n      x[i] = s / L[i * B];\n    }\n  };\n  const Q = new Float64Array(M * n), w = new Float64Array(n), d = new Float64Array(M), e = new Float64Array(M);\n  // A fixed start, so both drums and every run find the same modes.\n  let seed = 12345, nn = 0;\n  for (let i = 0; i \u003c n; i++) {\n    seed = (seed * 1103515245 + 12345) >>> 0;\n    Q[i] = seed / 4294967296 - 0.5;\n    nn += Q[i] * Q[i];\n  }\n  for (let i = 0; i \u003c n; i++) Q[i] /= sqrt(nn);\n  for (let j = 0; j \u003c M; j++) {\n    solve(Q.subarray(j * n, j * n + n), w);\n    for (let pass = 0; pass \u003c 2; pass++)\n      for (let i = 0; i \u003c= j; i++) {\n        let dot = 0;\n        for (let k = 0; k \u003c n; k++) dot += w[k] * Q[i * n + k];\n        if (!pass && i === j) d[j] = dot;\n        for (let k = 0; k \u003c n; k++) w[k] -= dot * Q[i * n + k];\n      }\n    let b = 0;\n    for (let k = 0; k \u003c n; k++) b += w[k] * w[k];\n    b = sqrt(b);\n    if (j + 1 \u003c M) {\n      e[j + 1] = b;\n      for (let k = 0; k \u003c n; k++) Q[(j + 1) * n + k] = w[k] / b;\n    }\n  }\n  const z = new Float64Array(M * M);\n  for (let i = 0; i \u003c M; i++) z[i * M + i] = 1;\n  tql2(M, d, e, z);\n  const order = [...d.keys()].sort((a, b) => d[b] - d[a]).slice(0, K);\n  const lam = new Float64Array(K), V = new Float32Array(K * n);\n  order.forEach((col, m) => {\n    lam[m] = 1 / d[col];\n    const v = new Float64Array(n);\n    for (let j = 0; j \u003c M; j++) {\n      const c = z[j * M + col];\n      for (let i = 0; i \u003c n; i++) v[i] += c * Q[j * n + i];\n    }\n    // The sign of a mode is free: its strongest antinode is taken as up.\n    let big = 0;\n    for (let i = 0; i \u003c n; i++) if (abs(v[i]) > abs(big)) big = v[i];\n    for (let i = 0; i \u003c n; i++) V[m * n + i] = v[i] / big;\n  });\n  return { n, pos, lam, V };\n}\n\nexport function setup(params) {\n  // Drum A: copies of the tile at the points; drum B: at the lines.\n  const masks = [drumMask(unfold(ON_POINTS), true), drumMask(unfold(ON_LINES), true)];\n  params.s = {\n    hue: 0, speed: 2, mode: 0, beat: 0.06, t: 0, tour: 0,\n    masks, drums: masks.map(drumModes), w: new Float32Array(K), swing: new Float32Array(K), U: new Float32Array(NG * NG), strip: new Float32Array(W * 10 * 3),\n    up: [0, 0, 0], down: [0, 0, 0], rim: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  S.hue = k[0];\n  S.mode = round(cl(k[2], 0, K));\n  S.beat = cl(k[3], 0, 1);\n  S.t += d;\n  // The modes playing and their shares: one held mode, or on the climb the\n  // mode of this step fading into the next.\n  const w = S.w, base = [];\n  w.fill(0);\n  if (S.mode > 0) base.push([S.mode - 1, 1]);\n  else {\n    S.tour += d;\n    const step = floor(S.tour / DWELL), x = sm(DWELL - XF, DWELL, S.tour - step * DWELL), m = (FIRST - 1 + step) % K;\n    base.push([m, 1 - x], [(m + 1) % K, x]);\n  }\n  // Beat shares each mode with the one three steps above it (below, for\n  // the top three).\n  for (const [m, s] of base) {\n    w[m] += s * (1 - S.beat / 2);\n    w[m + 3 \u003c K ? m + 3 : m - 3] += (s * S.beat) / 2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { up, down, rim, w, U, swing } = S;\n  const lam = S.drums[0].lam, h = S.hue + H0;\n  // Yellow and orange read olive and brown when dim: there the tone is paled\n  // a little and the membrane lifted up to 1.5 times.\n  const warm = (hh) => cl(1.5 - abs(hh - floor(hh) - 0.16) / 0.08, 0, 1), wu = warm(h), wd = warm(h + 0.5);\n  hsv(h, 0.72 - 0.14 * wu, 1, up);\n  hsv(h + 0.5, 0.78 - 0.14 * wd, 1, down);\n  const lift = [1 + 0.5 * wu, 1 + 0.5 * wd];\n  hsv(h + 0.25, 0.12, 0.62, rim);\n  // Each mode swings as cos(omega t), omega in proportion to the square root\n  // of its eigenvalue, and the same omega in both drums.\n  for (let m = 0; m \u003c K; m++) swing[m] = w[m] > 0.002 ? cos(2 * PI * F1 * sqrt(lam[m] / lam[0]) * S.t) : 0;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  S.drums.forEach((D, di) => {\n    const mask = S.masks[di], { n, pos, V } = D, y0 = TOP[di];\n    U.fill(0);\n    let scale = 0;\n    for (let m = 0; m \u003c K; m++) {\n      if (w[m] \u003c= 0.002) continue;\n      const a = w[m] * swing[m];\n      scale += w[m];\n      for (let i = 0; i \u003c n; i++) U[pos[i]] += a * V[m * n + i];\n    }\n    scale = max(scale, 1e-6);\n    for (let gy = 0; gy \u003c NG; gy++)\n      for (let gx = 0; gx \u003c NG; gx++) {\n        const p = gy * NG + gx, kind = mask[p];\n        if (!kind) continue;\n        let r, g, b;\n        if (kind === 1) [r, g, b] = rim;\n        else {\n          // How far the nearest nodal line is, in LEDs: the value over the\n          // slope, the same at every moment of a swing.\n          const u = U[p], sx = (U[p + 1] - U[p - 1]) / 2, sy = (U[p + NG] - U[p - NG]) / 2;\n          const dist = abs(u) / sqrt(sx * sx + sy * sy + 1e-30), node = sm(0.15, 0.85, dist);\n          const a = min(1, abs(u) / scale), tone = u >= 0 ? up : down, wh = 0.35 * a * a * a;\n          const lv = (FLOOR + (1 - FLOOR) * a ** 0.7) * node * lift[u >= 0 ? 0 : 1];\n          r = (tone[0] + (1 - tone[0]) * wh) * lv;\n          g = (tone[1] + (1 - tone[1]) * wh) * lv;\n          b = (tone[2] + (1 - tone[2]) * wh) * lv;\n        }\n        display.setPixel(X0 + gx, y0 + gy, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n      }\n  });\n  // The shared spectrum: a dim tick at every eigenvalue, and the modes\n  // playing lit the full height of the strip, brightest at the top of their\n  // swing and in the tone of the side it swings to.\n  const span = (NG - 1) / (AX * lam[K - 1]), st = S.strip;\n  st.fill(0);\n  for (let m = 0; m \u003c K; m++) {\n    const xf = X0 + lam[m] * span, xi = floor(xf), fr = xf - xi;\n    const tone = swing[m] >= 0 ? up : down, on = cl(w[m] * 1.4, 0, 1) * (0.45 + 0.55 * abs(swing[m]));\n    for (let j = 0; j \u003c 10; j++) {\n      const tick = j >= 2 && j \u003c= 7 ? 0.26 : 0, lit = on * (j === 0 || j === 9 ? 0.5 : 1);\n      for (const [xx, f] of [[xi, 1 - fr], [xi + 1, fr]]) {\n        const q = (j * W + xx) * 3;\n        for (let c = 0; c \u003c 3; c++) st[q + c] += (tick * (1 - lit) * TICK[c] + lit * (tone[c] + (1 - tone[c]) * 0.35)) * f;\n      }\n    }\n  }\n  for (let j = 0; j \u003c 10; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (j * W + x) * 3;\n      display.setPixel(x, 59 + j, round(255 * min(1, st[q])), round(255 * min(1, st[q + 1])), round(255 * min(1, st[q + 2])));\n    }\n}\n","layer":{"id":"layer-isospectral-drums","type":"code","name":"isospectral-drums","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Isospectral Drums\n// Family:  wave\n// Idea:    Two drums of different shape, each glued from the same seven half-squares, one above the other, ring in the same eigenmode at the same frequency, one tone where the membrane is up and the opposite tone where it is down with dark nodal lines between, while a strip between them marks their one shared spectrum and the mode they play as they climb it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: isospectral drums (Carolyn Gordon, David Webb and Scott Wolpert, 1992), the answer to Mark Kac's \"Can one hear the shape of a drum?\" (1966); the drums built from the Fano plane as Peter Buser, John Conway, Peter Doyle and Klaus-Dieter Semmler did (1994), pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Mode=0..24, Beat=0..1\n//\n// Knob 1: Hue. Turns the two tones round the wheel together, always half a turn apart: at 0 the membrane is rose where it is up and aqua where it is down, at 0.1 coral and sky blue, at 0.25 yellow-lime and indigo, at 0.5 aqua and rose, at 0.75 indigo and yellow-lime. Orange and yellow tones are paled a little and lifted up to 1.5 times, so the dim parts of a swing do not turn brown or olive.\n// Knob 2: Speed. At 2 the fundamental swings once in 2.5 s and the 24th mode, 3.3 times higher, in 0.76 s, and on its climb the pair holds each mode 5 s. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Mode. At 0 the drums climb their spectrum on their own from the 6th mode, a step every 5 s at Speed 2, back to the fundamental after the 24th. From 1 to 24 they hold that mode: 1 is a single dome; at 9 the nodal lines are exactly the seams between the seven half-squares, because that mode is the half-square's own lowest mode turned over at every seam; by 24 each drum is cut into eight to ten nodal domains, never laid out the same in the two.\n// Knob 4: Beat. Mixes in the mode three steps up, to half and half at 1. The two frequencies beat and the nodal lines sweep across both drums and come back in the same rhythm, because the two drums share every frequency; the strip lights both modes.\n\nconst W = 64, H = 128;\n// Leg of a half-square in LEDs. A drum spans three legs each way, 58 LEDs\n// with its rim; the lower drum's grid starts at row 70.\nconst S = 19, NG = 3 * S + 1, X0 = 3, TOP = [0, 70];\n// Modes found at setup, and the Lanczos steps that find them.\nconst K = 24, M = 64;\n// The spectrum strip, rows 59 to 68: its axis runs from 0 to 1.05 times the\n// 24th eigenvalue across the drums' width.\nconst AX = 1.05, TICK = [0.7, 0.8, 0.85];\n// Fundamental frequency in Hz at Speed 2; seconds a mode is held on the\n// climb, of which the last XF fade into the next; the mode the climb opens on.\nconst F1 = 0.4, DWELL = 5, XF = 1.2, FIRST = 6;\n// Membrane level where it is flat, so the drums stay in sight between swings.\nconst FLOOR = 0.18;\n// Opening hue: rose up, aqua down.\nconst H0 = 0.96;\nconst { floor, min, max, abs, sqrt, cos, round, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The Fano plane: its seven points are the nonzero vectors (x, y, z) of\n// F2^3, held as the numbers 1 to 7, and so are its seven lines, a line v\n// holding the points p with p.v = 0. Three involutions of PSL(3,2) act on\n// both: a swaps x and z, b swaps y and z, c adds z to x. On lines an element\n// acts by its inverse transpose, which for a and b is themselves and for c\n// adds x to z.\nconst bit = (v, k) => (v >> k) & 1, vec = (x, y, z) => (x \u003c\u003c 2) | (y \u003c\u003c 1) | z;\nconst swapXZ = (v) => vec(bit(v, 0), bit(v, 1), bit(v, 2)), swapYZ = (v) => vec(bit(v, 2), bit(v, 0), bit(v, 1));\nconst ON_POINTS = [swapXZ, swapYZ, (v) => vec(bit(v, 2) ^ bit(v, 0), bit(v, 1), bit(v, 0))];\nconst ON_LINES = [swapXZ, swapYZ, (v) => vec(bit(v, 2), bit(v, 1), bit(v, 2) ^ bit(v, 0))];\n\n// The base tile is the half-square (0,0), (1,0), (0,1); a and b are its\n// legs, c its hypotenuse. Reflection across each, as (x, y) -> (m0 x + m1 y\n// + m4, m2 x + m3 y + m5). Legs on the LED axes and the hypotenuse at 45\n// degrees, so every reflection maps the LED grid onto itself.\nconst REF = [[1, 0, 0, -1, 0, 0], [-1, 0, 0, 1, 0, 0], [0, -1, -1, 0, 1, 1]];\nconst comp = (g, h) => [g[0] * h[0] + g[1] * h[2], g[0] * h[1] + g[1] * h[3], g[2] * h[0] + g[3] * h[2], g[2] * h[1] + g[3] * h[3], g[0] * h[4] + g[1] * h[5] + g[4], g[2] * h[4] + g[3] * h[5] + g[5]];\n\n// Copy i of the tile is glued to copy a(i) across side a, and so on; a\n// side an involution fixes is the drum's rim. The gluings make a tree, so\n// unfolding it from copy 1 places every copy in the plane.\nfunction unfold(inv) {\n  const g = [];\n  g[1] = [1, 0, 0, 1, 0, 0];\n  const q = [1];\n  while (q.length) {\n    const i = q.pop();\n    for (let s = 0; s \u003c 3; s++) {\n      const j = inv[s](i);\n      if (j !== i && !g[j]) {\n        g[j] = comp(g[i], REF[s]);\n        q.push(j);\n      }\n    }\n  }\n  return g.slice(1);\n}\n\n// Each grid point of the drum: 0 outside, 1 on the rim, 2 inside. A point\n// is inside when a step into every one of the eight 45-degree wedges round\n// it stays on the drum; every tile edge runs along a wedge's side.\nfunction drumMask(tiles, flip) {\n  let mx = 1e9, my = 1e9;\n  for (const g of tiles)\n    for (const [u, v] of [[0, 0], [1, 0], [0, 1]]) {\n      mx = min(mx, g[0] * u + g[1] * v + g[4]);\n      my = min(my, g[2] * u + g[3] * v + g[5]);\n    }\n  const on = (x, y) => {\n    for (const g of tiles) {\n      const px = x / S + mx - g[4], py = y / S + my - g[5];\n      const u = g[0] * px + g[2] * py, v = g[1] * px + g[3] * py;\n      if (u > -1e-9 && v > -1e-9 && u + v \u003c 1 + 1e-9) return true;\n    }\n    return false;\n  };\n  const m = new Uint8Array(NG * NG);\n  for (let y = 0; y \u003c NG; y++)\n    for (let x = 0; x \u003c NG; x++) {\n      const gy = flip ? NG - 1 - y : y;\n      if (!on(x, gy)) continue;\n      let all = true;\n      for (const [dx, dy] of [[2, 1], [1, 2], [-1, 2], [-2, 1], [-2, -1], [-1, -2], [1, -2], [2, -1]]) if (!on(x + 0.05 * dx, gy + 0.05 * dy)) all = false;\n      m[y * NG + x] = all ? 2 : 1;\n    }\n  return m;\n}\n\n// Implicit QL on a symmetric tridiagonal matrix (EISPACK's tql2): d the\n// diagonal, e[1..n-1] below it; z starts as the identity and leaves holding\n// the eigenvectors in its columns.\nfunction tql2(n, d, e, z) {\n  for (let i = 1; i \u003c n; i++) e[i - 1] = e[i];\n  e[n - 1] = 0;\n  let f = 0, tst = 0;\n  for (let l = 0; l \u003c n; l++) {\n    tst = max(tst, abs(d[l]) + abs(e[l]));\n    let m = l;\n    while (m \u003c n && abs(e[m]) > 2.2e-16 * tst) m++;\n    if (m > l)\n      do {\n        let g = d[l], p = (d[l + 1] - g) / (2 * e[l]), r = hypot(p, 1);\n        if (p \u003c 0) r = -r;\n        d[l] = e[l] / (p + r);\n        d[l + 1] = e[l] * (p + r);\n        const dl1 = d[l + 1];\n        let h = g - d[l];\n        for (let i = l + 2; i \u003c n; i++) d[i] -= h;\n        f += h;\n        p = d[m];\n        let c = 1, c2 = 1, c3 = 1, s = 0, s2 = 0;\n        const el1 = e[l + 1];\n        for (let i = m - 1; i >= l; i--) {\n          c3 = c2;\n          c2 = c;\n          s2 = s;\n          g = c * e[i];\n          h = c * p;\n          r = hypot(p, e[i]);\n          e[i + 1] = s * r;\n          s = e[i] / r;\n          c = p / r;\n          p = c * d[i] - s * g;\n          d[i + 1] = h + s * (c * g + s * d[i]);\n          for (let k = 0; k \u003c n; k++) {\n            const a = z[k * n + i], b = z[k * n + i + 1];\n            z[k * n + i + 1] = s * a + c * b;\n            z[k * n + i] = c * a - s * b;\n          }\n        }\n        p = (-s * s2 * c3 * el1 * e[l]) / dl1;\n        e[l] = s * p;\n        d[l] = c * p;\n      } while (abs(e[l]) > 2.2e-16 * tst);\n    d[l] += f;\n    e[l] = 0;\n  }\n}\n\n// The lowest K eigenpairs of the 5-point Dirichlet Laplacian on the drum's\n// inside points: Lanczos on its inverse, applied by a banded Cholesky\n// factor, with full reorthogonalisation. Eigenvalues in units of one LED.\n// Every reflection of the gluing maps the LED grid onto itself, so the two\n// pixel drums are isospectral exactly, not only in the limit: both have\n// 1179 inside points and the same 1179 eigenvalues, and the lowest 24 found\n// here for each agree to 1e-11.\nfunction drumModes(mask) {\n  const id = new Int32Array(NG * NG).fill(-1), pos = [];\n  for (let p = 0; p \u003c NG * NG; p++) if (mask[p] === 2) id[p] = pos.push(p) - 1;\n  const n = pos.length;\n  let bw = 1;\n  for (let i = 0; i \u003c n; i++) if (id[pos[i] - NG] >= 0) bw = max(bw, i - id[pos[i] - NG]);\n  const B = bw + 1, L = new Float64Array(n * B);\n  for (let i = 0; i \u003c n; i++)\n    for (let j = max(0, i - bw); j \u003c= i; j++) {\n      const dp = pos[i] - pos[j];\n      let s = i === j ? 4 : dp === 1 || dp === NG ? -1 : 0;\n      for (let k = max(0, i - bw); k \u003c j; k++) s -= L[i * B + i - k] * L[j * B + j - k];\n      L[i * B + i - j] = i === j ? sqrt(s) : s / L[j * B];\n    }\n  const solve = (b, x) => {\n    for (let i = 0; i \u003c n; i++) {\n      let s = b[i];\n      for (let k = max(0, i - bw); k \u003c i; k++) s -= L[i * B + i - k] * x[k];\n      x[i] = s / L[i * B];\n    }\n    for (let i = n - 1; i >= 0; i--) {\n      let s = x[i];\n      for (let k = i + 1; k \u003c= min(n - 1, i + bw); k++) s -= L[k * B + k - i] * x[k];\n      x[i] = s / L[i * B];\n    }\n  };\n  const Q = new Float64Array(M * n), w = new Float64Array(n), d = new Float64Array(M), e = new Float64Array(M);\n  // A fixed start, so both drums and every run find the same modes.\n  let seed = 12345, nn = 0;\n  for (let i = 0; i \u003c n; i++) {\n    seed = (seed * 1103515245 + 12345) >>> 0;\n    Q[i] = seed / 4294967296 - 0.5;\n    nn += Q[i] * Q[i];\n  }\n  for (let i = 0; i \u003c n; i++) Q[i] /= sqrt(nn);\n  for (let j = 0; j \u003c M; j++) {\n    solve(Q.subarray(j * n, j * n + n), w);\n    for (let pass = 0; pass \u003c 2; pass++)\n      for (let i = 0; i \u003c= j; i++) {\n        let dot = 0;\n        for (let k = 0; k \u003c n; k++) dot += w[k] * Q[i * n + k];\n        if (!pass && i === j) d[j] = dot;\n        for (let k = 0; k \u003c n; k++) w[k] -= dot * Q[i * n + k];\n      }\n    let b = 0;\n    for (let k = 0; k \u003c n; k++) b += w[k] * w[k];\n    b = sqrt(b);\n    if (j + 1 \u003c M) {\n      e[j + 1] = b;\n      for (let k = 0; k \u003c n; k++) Q[(j + 1) * n + k] = w[k] / b;\n    }\n  }\n  const z = new Float64Array(M * M);\n  for (let i = 0; i \u003c M; i++) z[i * M + i] = 1;\n  tql2(M, d, e, z);\n  const order = [...d.keys()].sort((a, b) => d[b] - d[a]).slice(0, K);\n  const lam = new Float64Array(K), V = new Float32Array(K * n);\n  order.forEach((col, m) => {\n    lam[m] = 1 / d[col];\n    const v = new Float64Array(n);\n    for (let j = 0; j \u003c M; j++) {\n      const c = z[j * M + col];\n      for (let i = 0; i \u003c n; i++) v[i] += c * Q[j * n + i];\n    }\n    // The sign of a mode is free: its strongest antinode is taken as up.\n    let big = 0;\n    for (let i = 0; i \u003c n; i++) if (abs(v[i]) > abs(big)) big = v[i];\n    for (let i = 0; i \u003c n; i++) V[m * n + i] = v[i] / big;\n  });\n  return { n, pos, lam, V };\n}\n\nexport function setup(params) {\n  // Drum A: copies of the tile at the points; drum B: at the lines.\n  const masks = [drumMask(unfold(ON_POINTS), true), drumMask(unfold(ON_LINES), true)];\n  params.s = {\n    hue: 0, speed: 2, mode: 0, beat: 0.06, t: 0, tour: 0,\n    masks, drums: masks.map(drumModes), w: new Float32Array(K), swing: new Float32Array(K), U: new Float32Array(NG * NG), strip: new Float32Array(W * 10 * 3),\n    up: [0, 0, 0], down: [0, 0, 0], rim: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  S.hue = k[0];\n  S.mode = round(cl(k[2], 0, K));\n  S.beat = cl(k[3], 0, 1);\n  S.t += d;\n  // The modes playing and their shares: one held mode, or on the climb the\n  // mode of this step fading into the next.\n  const w = S.w, base = [];\n  w.fill(0);\n  if (S.mode > 0) base.push([S.mode - 1, 1]);\n  else {\n    S.tour += d;\n    const step = floor(S.tour / DWELL), x = sm(DWELL - XF, DWELL, S.tour - step * DWELL), m = (FIRST - 1 + step) % K;\n    base.push([m, 1 - x], [(m + 1) % K, x]);\n  }\n  // Beat shares each mode with the one three steps above it (below, for\n  // the top three).\n  for (const [m, s] of base) {\n    w[m] += s * (1 - S.beat / 2);\n    w[m + 3 \u003c K ? m + 3 : m - 3] += (s * S.beat) / 2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { up, down, rim, w, U, swing } = S;\n  const lam = S.drums[0].lam, h = S.hue + H0;\n  // Yellow and orange read olive and brown when dim: there the tone is paled\n  // a little and the membrane lifted up to 1.5 times.\n  const warm = (hh) => cl(1.5 - abs(hh - floor(hh) - 0.16) / 0.08, 0, 1), wu = warm(h), wd = warm(h + 0.5);\n  hsv(h, 0.72 - 0.14 * wu, 1, up);\n  hsv(h + 0.5, 0.78 - 0.14 * wd, 1, down);\n  const lift = [1 + 0.5 * wu, 1 + 0.5 * wd];\n  hsv(h + 0.25, 0.12, 0.62, rim);\n  // Each mode swings as cos(omega t), omega in proportion to the square root\n  // of its eigenvalue, and the same omega in both drums.\n  for (let m = 0; m \u003c K; m++) swing[m] = w[m] > 0.002 ? cos(2 * PI * F1 * sqrt(lam[m] / lam[0]) * S.t) : 0;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  S.drums.forEach((D, di) => {\n    const mask = S.masks[di], { n, pos, V } = D, y0 = TOP[di];\n    U.fill(0);\n    let scale = 0;\n    for (let m = 0; m \u003c K; m++) {\n      if (w[m] \u003c= 0.002) continue;\n      const a = w[m] * swing[m];\n      scale += w[m];\n      for (let i = 0; i \u003c n; i++) U[pos[i]] += a * V[m * n + i];\n    }\n    scale = max(scale, 1e-6);\n    for (let gy = 0; gy \u003c NG; gy++)\n      for (let gx = 0; gx \u003c NG; gx++) {\n        const p = gy * NG + gx, kind = mask[p];\n        if (!kind) continue;\n        let r, g, b;\n        if (kind === 1) [r, g, b] = rim;\n        else {\n          // How far the nearest nodal line is, in LEDs: the value over the\n          // slope, the same at every moment of a swing.\n          const u = U[p], sx = (U[p + 1] - U[p - 1]) / 2, sy = (U[p + NG] - U[p - NG]) / 2;\n          const dist = abs(u) / sqrt(sx * sx + sy * sy + 1e-30), node = sm(0.15, 0.85, dist);\n          const a = min(1, abs(u) / scale), tone = u >= 0 ? up : down, wh = 0.35 * a * a * a;\n          const lv = (FLOOR + (1 - FLOOR) * a ** 0.7) * node * lift[u >= 0 ? 0 : 1];\n          r = (tone[0] + (1 - tone[0]) * wh) * lv;\n          g = (tone[1] + (1 - tone[1]) * wh) * lv;\n          b = (tone[2] + (1 - tone[2]) * wh) * lv;\n        }\n        display.setPixel(X0 + gx, y0 + gy, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n      }\n  });\n  // The shared spectrum: a dim tick at every eigenvalue, and the modes\n  // playing lit the full height of the strip, brightest at the top of their\n  // swing and in the tone of the side it swings to.\n  const span = (NG - 1) / (AX * lam[K - 1]), st = S.strip;\n  st.fill(0);\n  for (let m = 0; m \u003c K; m++) {\n    const xf = X0 + lam[m] * span, xi = floor(xf), fr = xf - xi;\n    const tone = swing[m] >= 0 ? up : down, on = cl(w[m] * 1.4, 0, 1) * (0.45 + 0.55 * abs(swing[m]));\n    for (let j = 0; j \u003c 10; j++) {\n      const tick = j >= 2 && j \u003c= 7 ? 0.26 : 0, lit = on * (j === 0 || j === 9 ? 0.5 : 1);\n      for (const [xx, f] of [[xi, 1 - fr], [xi + 1, fr]]) {\n        const q = (j * W + xx) * 3;\n        for (let c = 0; c \u003c 3; c++) st[q + c] += (tick * (1 - lit) * TICK[c] + lit * (tone[c] + (1 - tone[c]) * 0.35)) * f;\n      }\n    }\n  }\n  for (let j = 0; j \u003c 10; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (j * W + x) * 3;\n      display.setPixel(x, 59 + j, round(255 * min(1, st[q])), round(255 * min(1, st[q + 1])), round(255 * min(1, st[q + 2])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Mode=0..24, Beat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two tones round the wheel together, always half a turn apart: at 0 the membrane is rose where it is up and aqua where it is down, at 0.1 coral and sky blue, at 0.25 yellow-lime and indigo, at 0.5 aqua and rose, at 0.75 indigo and yellow-lime. Orange and yellow tones are paled a little and lifted up to 1.5 times, so the dim parts of a swing do not turn brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the fundamental swings once in 2.5 s and the 24th mode, 3.3 times higher, in 0.76 s, and on its climb the pair holds each mode 5 s. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Mode","min":0,"max":24,"about":"At 0 the drums climb their spectrum on their own from the 6th mode, a step every 5 s at Speed 2, back to the fundamental after the 24th. From 1 to 24 they hold that mode: 1 is a single dome; at 9 the nodal lines are exactly the seams between the seven half-squares, because that mode is the half-square's own lowest mode turned over at every seam; by 24 each drum is cut into eight to ten nodal domains, never laid out the same in the two."},{"name":"Beat","min":0,"max":1,"about":"Mixes in the mode three steps up, to half and half at 1. The two frequencies beat and the nodal lines sweep across both drums and come back in the same rhythm, because the two drums share every frequency; the strip lights both modes."}],"start":[0,2,0,0.06],"measures":{"motion":0.2952,"detail":0.0452,"edges":0.3635,"complexity":0.7651,"coverage":0.3333,"colour":0.1729,"drift":0.0914},"knobResponse":[0.0911,0.0611,0.0587,0.04]},{"slug":"ivy","title":"Ivy","family":"growth","round":15,"note":"돌담을 타고 담쟁이가 꼭대기까지 올라요. 바람이 잎을 뒤집어 옅은 뒷면이 물결치고, 가을이면 잎이 노랑에서 진홍으로 물들어 떨어져요. 겨울에는 맨 줄기에 검푸른 열매가 남아요.","idea":"Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.","buttons":"K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.","code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-ivy","type":"code","name":"ivy","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it."},{"name":"Vines","min":2,"max":6,"about":"How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither."},{"name":"Wind","min":-1,"max":1,"about":"Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away."}],"start":[0,2,2,0.06],"measures":{"motion":0.0893,"detail":0.1136,"edges":0.3366,"complexity":2.0732,"coverage":0.8558,"colour":0.304,"drift":0.0713},"knobResponse":[0.1737,0.0489,0.1412,0.1012]},{"slug":"j-invariant","title":"J-Invariant","family":"fractal","round":29,"note":"클라인의 j 함수를 위 반평면에 칠해요. j 가 위쪽 값으로 보내는 삼각형은 옅은 금색, 아래쪽 값으로 보내는 삼각형은 짙은 파랑이라 같은 타일이 패널 아래 실수축으로 갈수록 잘게 되풀이되고, j 의 크기를 나눈 등고선 띠가 영점마다 흘러나와요. K3 을 돌리면 실수축 쪽으로 여덟 배까지 다가가고, K1 을 누르면 빛이 맨 위 타일부터 세대마다 아래로 번져요.","idea":"Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.","buttons":"K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.","code":"// ===== Patternflow pattern =====\n// Title:   J-Invariant\n// Family:  fractal\n// Idea:    Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the modular j-invariant (Richard Dedekind, 1877; Felix Klein, 1878), drawn by domain colouring, pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue.\n// Knob 2: Speed. At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower.\n// Knob 3: Depth. Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel.\n// Knob 4: Bands. The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat.\n// Buttons: K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, atan2, sqrt, abs, round, asinh, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// Re units per LED at Depth 0, and how far below the bottom row the real\n// axis lies, in LEDs.\nconst S0 = 1 / 96, GAP = 0.5;\n\n// One point of the half-plane: it is carried into the fundamental domain\n// |Re t| \u003c= 1/2, |t| >= 1 by t -> t + n and t -> -1/t, and j is read off\n// there, where |q| = |e^(2 pi i t)| \u003c= e^(-pi sqrt 3) \u003c 0.0044, so five terms\n// of each q-series are exact to the last bit that shows. The results land in\n// OUT: log|j|, arg j, how fast log j turns per unit of the original t, how\n// many times t -> -1/t was taken (the tile's generation, counted down from\n// the top) and the point in the fundamental domain.\nconst OUT = new Float64Array(6);\nfunction jAt(x, y) {\n  const y0 = y;\n  let gen = 0;\n  for (; gen \u003c 60; gen++) {\n    x -= round(x);\n    const r2 = x * x + y * y;\n    if (r2 >= 1) break;\n    x = -x / r2;\n    y = y / r2;\n  }\n  // q = e^(2 pi i t); E4 and E6 by their divisor sums, and the log of the\n  // eta product as L = sum sigma(m)/m q^m, so Delta = q e^(-24 L) and\n  // j = E4^3 / Delta.\n  const m = exp(-TAU * y), qr = m * cos(TAU * x), qi = m * sin(TAU * x);\n  const q2r = qr * qr - qi * qi, q2i = 2 * qr * qi;\n  const q3r = q2r * qr - q2i * qi, q3i = q2r * qi + q2i * qr;\n  const q4r = q2r * q2r - q2i * q2i, q4i = 2 * q2r * q2i;\n  const q5r = q4r * qr - q4i * qi, q5i = q4r * qi + q4i * qr;\n  const e4r = 1 + 240 * (qr + 9 * q2r + 28 * q3r + 73 * q4r + 126 * q5r);\n  const e4i = 240 * (qi + 9 * q2i + 28 * q3i + 73 * q4i + 126 * q5i);\n  const e6r = 1 - 504 * (qr + 33 * q2r + 244 * q3r + 1057 * q4r + 3126 * q5r);\n  const e6i = -504 * (qi + 33 * q2i + 244 * q3i + 1057 * q4i + 3126 * q5i);\n  const Lr = qr + 1.5 * q2r + (4 / 3) * q3r + 1.75 * q4r + 1.2 * q5r;\n  const Li = qi + 1.5 * q2i + (4 / 3) * q3i + 1.75 * q4i + 1.2 * q5i;\n  const a4 = e4r * e4r + e4i * e4i + 1e-30;\n  OUT[0] = 1.5 * log(a4) + TAU * y + 24 * Lr;\n  OUT[1] = 3 * atan2(e4i, e4r) - TAU * x + 24 * Li;\n  // d log j / dt = -2 pi i E6 / E4 (Ramanujan's identities), and the map\n  // into the domain shrinks lengths by y / y0.\n  OUT[2] = TAU * sqrt((e6r * e6r + e6i * e6i) / a4) * (y / y0);\n  OUT[3] = gen;\n  OUT[4] = x;\n  OUT[5] = y;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The phase palette. Where j is real the half-plane is cut into Klein's\n// triangles, and j maps each triangle onto one half of the plane of values:\n// those onto Im j > 0 take the light family, those onto Im j \u003c 0 the dark\n// one, so the two alternate across every edge as in Klein's own figure.\n// Across a triangle the phase runs through pi; f runs along a family from the\n// edge where j > 0 to the edge where j \u003c 0. 64 steps each, then the mean\n// colour the two families blend to where the triangles are too small to draw.\nconst PN = 64;\nfunction palette(P) {\n  const t = P.pal;\n  for (let f = 0; f \u003c PN; f++) {\n    const u = f / (PN - 1);\n    hsv(P.hue + 0.13 - 0.11 * u, 0.5 + 0.25 * u, 1, t, f * 3);\n    // A dark orange or olive reads as brown, so the dark family lifts its\n    // light where its hue passes through them.\n    let h = P.hue + 0.58 + 0.16 * u;\n    h -= floor(h);\n    const lift = max(0, 1 - abs(h - 0.13) / 0.14);\n    hsv(h, 0.9, 0.5 + 0.08 * u + 0.38 * lift, t, (PN + f) * 3);\n  }\n  for (let c = 0; c \u003c 3; c++) {\n    let a = 0;\n    for (let f = 0; f \u003c 2 * PN; f++) a += t[f * 3 + c];\n    t[2 * PN * 3 + c] = a / (2 * PN);\n  }\n  P.palHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = { x: 0.18, flow: 0, hue: 0, depth: 0, bands: 0.06, gold: 0, g: 0, wave: -1, pal: new Float32Array((2 * PN + 1) * 3), palHue: -1, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.depth = cl(k[2], 0, 1);\n  P.bands = cl(k[3], 0, 1);\n  // The window slides about four LEDs a second at Speed 2, whatever the\n  // zoom. j repeats every 1 along the axis.\n  const s = S0 * 8 ** -P.depth;\n  P.x = (P.x + d * sp * 2 * s) % 1;\n  P.flow += d * sp * 0.22;\n  const b = input.btnPressed || [];\n  // K1 sends a wave of light down the generations, two and a half a\n  // second; K2 lays the gold edges on or takes them off.\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 30 ? -1 : P.wave + d * 2.5;\n  if (b[1]) P.gold = 1 - P.gold;\n  P.g += (P.gold - P.g) * min(1, d * 5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const s = S0 * 8 ** -P.depth, buf = P.buf, pal = P.pal, MEAN = 2 * PN * 3;\n  // Bands: nepers of |j| per band, how much of each band is ramp, and how\n  // dark a band starts.\n  const L = 2.2 * 0.18 ** P.bands, ramp = 0.85 - 0.6 * P.bands, lo = 0.6 - 0.32 * P.bands;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const y = (H - py - 0.5 + GAP) * s;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      jAt(P.x + (px + 0.5 - W / 2) * s, y);\n      // How fast log j turns per LED. Near an image of i it stalls while\n      // the tiles round it stay small, so the tile size at this height,\n      // about y, sets a floor; and the last rows above the axis, where every\n      // tile is a few LEDs at most, fade whatever it says.\n      const g = max(OUT[2] * s, (5 * s) / y), hf = sm(2.5, 9, y / s);\n      // A band or a phase turn per LED or more cannot be drawn; the colour\n      // there would be static. Contrast and colour fade as they crowd, and\n      // the light with them, so the cusps and the axis sink into the dark\n      // instead of shimmering.\n      const cb = (1 - sm(0.25, 0.55, g / L)) * hf, ch = (1 - sm(0.3, 0.7, g / PI)) * hf;\n      let u = OUT[0] / L - P.flow;\n      u -= floor(u);\n      // A sawtooth: each band brightens slowly and drops at its edge.\n      const saw = u \u003c ramp ? u / ramp : (1 - u) / (1 - ramp);\n      const v = ((lo + (1 - lo) * saw) * cb + 0.78 * (1 - cb)) * (0.3 + 0.7 * ch);\n      let a = OUT[1] / TAU;\n      a -= floor(a);\n      const up = a \u003c 0.5, f = up ? 2 * a : 2 - 2 * a, fi = (f * (PN - 1)) | 0, o = (up ? fi : PN + fi) * 3;\n      // Half an LED either side of a triangle edge the two families blend.\n      const e = (min(f, 1 - f) * PI) / g, w = e \u003c 0.5 ? 0.5 - e : 0, o2 = (up ? PN + fi : fi) * 3;\n      let r = pal[o] + (pal[o2] - pal[o]) * w, gg = pal[o + 1] + (pal[o2 + 1] - pal[o + 1]) * w, b = pal[o + 2] + (pal[o2 + 2] - pal[o + 2]) * w;\n      r = (r * ch + pal[MEAN] * (1 - ch)) * v * 255;\n      gg = (gg * ch + pal[MEAN + 1] * (1 - ch)) * v * 255;\n      b = (b * ch + pal[MEAN + 2] * (1 - ch)) * v * 255;\n      if (P.wave >= 0) {\n        // The wave: a tile flares as the front reaches its generation and\n        // keeps a little of the light for a while after.\n        const dw = P.wave - OUT[3], fl = max(exp(-dw * dw * 3), dw > 0 ? 0.35 * exp(-dw * 0.7) : 0) * (0.3 + 0.7 * ch);\n        r += (255 - r) * fl * 0.8;\n        gg += (250 - gg) * fl * 0.8;\n        b += (235 - b) * fl * 0.8;\n      }\n      if (P.g > 0.01) {\n        // The tile edges as gold geodesics a LED wide, faded where the\n        // tiles are too small to draw. The hyperbolic distance to the nearer\n        // of the walls Re = +-1/2 and the floor |t| = 1, times y, is the\n        // distance on the panel.\n        const X = OUT[4], Y = OUT[5], e2 = (asinh(min(0.5 - abs(X), (X * X + Y * Y - 1) / 2) / Y) * y) / s;\n        const w2 = cl(1.1 - e2, 0, 1) * P.g * ch;\n        r += (255 - r) * w2;\n        gg += (205 - gg) * w2;\n        b += (90 - b) * w2;\n      }\n      buf[p] = r;\n      buf[p + 1] = gg;\n      buf[p + 2] = b;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-j-invariant","type":"code","name":"j-invariant","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   J-Invariant\n// Family:  fractal\n// Idea:    Klein's j function painted over the upper half-plane with the real axis along the foot of the panel: every triangle j maps onto the upper half of its values glows pale gold and every one onto the lower half deep blue, so Klein's tessellation repeats smaller and smaller toward the bottom edge while contour bands of |j| stream out of each zero into the cusps and the window slides along the axis.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the modular j-invariant (Richard Dedekind, 1877; Felix Klein, 1878), drawn by domain colouring, pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1\n//\n// Knob 1: Hue. Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue.\n// Knob 2: Speed. At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower.\n// Knob 3: Depth. Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel.\n// Knob 4: Bands. The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat.\n// Buttons: K1 tap sends a wave of light down the tiles generation by generation, from the tile at the top through each further inversion t -> -1/t to the axis. K2 tap lays the edges of the modular tiles on as thin gold geodesics; tap again to take them off.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, atan2, sqrt, abs, round, asinh, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// Re units per LED at Depth 0, and how far below the bottom row the real\n// axis lies, in LEDs.\nconst S0 = 1 / 96, GAP = 0.5;\n\n// One point of the half-plane: it is carried into the fundamental domain\n// |Re t| \u003c= 1/2, |t| >= 1 by t -> t + n and t -> -1/t, and j is read off\n// there, where |q| = |e^(2 pi i t)| \u003c= e^(-pi sqrt 3) \u003c 0.0044, so five terms\n// of each q-series are exact to the last bit that shows. The results land in\n// OUT: log|j|, arg j, how fast log j turns per unit of the original t, how\n// many times t -> -1/t was taken (the tile's generation, counted down from\n// the top) and the point in the fundamental domain.\nconst OUT = new Float64Array(6);\nfunction jAt(x, y) {\n  const y0 = y;\n  let gen = 0;\n  for (; gen \u003c 60; gen++) {\n    x -= round(x);\n    const r2 = x * x + y * y;\n    if (r2 >= 1) break;\n    x = -x / r2;\n    y = y / r2;\n  }\n  // q = e^(2 pi i t); E4 and E6 by their divisor sums, and the log of the\n  // eta product as L = sum sigma(m)/m q^m, so Delta = q e^(-24 L) and\n  // j = E4^3 / Delta.\n  const m = exp(-TAU * y), qr = m * cos(TAU * x), qi = m * sin(TAU * x);\n  const q2r = qr * qr - qi * qi, q2i = 2 * qr * qi;\n  const q3r = q2r * qr - q2i * qi, q3i = q2r * qi + q2i * qr;\n  const q4r = q2r * q2r - q2i * q2i, q4i = 2 * q2r * q2i;\n  const q5r = q4r * qr - q4i * qi, q5i = q4r * qi + q4i * qr;\n  const e4r = 1 + 240 * (qr + 9 * q2r + 28 * q3r + 73 * q4r + 126 * q5r);\n  const e4i = 240 * (qi + 9 * q2i + 28 * q3i + 73 * q4i + 126 * q5i);\n  const e6r = 1 - 504 * (qr + 33 * q2r + 244 * q3r + 1057 * q4r + 3126 * q5r);\n  const e6i = -504 * (qi + 33 * q2i + 244 * q3i + 1057 * q4i + 3126 * q5i);\n  const Lr = qr + 1.5 * q2r + (4 / 3) * q3r + 1.75 * q4r + 1.2 * q5r;\n  const Li = qi + 1.5 * q2i + (4 / 3) * q3i + 1.75 * q4i + 1.2 * q5i;\n  const a4 = e4r * e4r + e4i * e4i + 1e-30;\n  OUT[0] = 1.5 * log(a4) + TAU * y + 24 * Lr;\n  OUT[1] = 3 * atan2(e4i, e4r) - TAU * x + 24 * Li;\n  // d log j / dt = -2 pi i E6 / E4 (Ramanujan's identities), and the map\n  // into the domain shrinks lengths by y / y0.\n  OUT[2] = TAU * sqrt((e6r * e6r + e6i * e6i) / a4) * (y / y0);\n  OUT[3] = gen;\n  OUT[4] = x;\n  OUT[5] = y;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The phase palette. Where j is real the half-plane is cut into Klein's\n// triangles, and j maps each triangle onto one half of the plane of values:\n// those onto Im j > 0 take the light family, those onto Im j \u003c 0 the dark\n// one, so the two alternate across every edge as in Klein's own figure.\n// Across a triangle the phase runs through pi; f runs along a family from the\n// edge where j > 0 to the edge where j \u003c 0. 64 steps each, then the mean\n// colour the two families blend to where the triangles are too small to draw.\nconst PN = 64;\nfunction palette(P) {\n  const t = P.pal;\n  for (let f = 0; f \u003c PN; f++) {\n    const u = f / (PN - 1);\n    hsv(P.hue + 0.13 - 0.11 * u, 0.5 + 0.25 * u, 1, t, f * 3);\n    // A dark orange or olive reads as brown, so the dark family lifts its\n    // light where its hue passes through them.\n    let h = P.hue + 0.58 + 0.16 * u;\n    h -= floor(h);\n    const lift = max(0, 1 - abs(h - 0.13) / 0.14);\n    hsv(h, 0.9, 0.5 + 0.08 * u + 0.38 * lift, t, (PN + f) * 3);\n  }\n  for (let c = 0; c \u003c 3; c++) {\n    let a = 0;\n    for (let f = 0; f \u003c 2 * PN; f++) a += t[f * 3 + c];\n    t[2 * PN * 3 + c] = a / (2 * PN);\n  }\n  P.palHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = { x: 0.18, flow: 0, hue: 0, depth: 0, bands: 0.06, gold: 0, g: 0, wave: -1, pal: new Float32Array((2 * PN + 1) * 3), palHue: -1, buf: new Float32Array(N * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const sp = cl(k[1], 0.2, 3);\n  P.hue = k[0];\n  P.depth = cl(k[2], 0, 1);\n  P.bands = cl(k[3], 0, 1);\n  // The window slides about four LEDs a second at Speed 2, whatever the\n  // zoom. j repeats every 1 along the axis.\n  const s = S0 * 8 ** -P.depth;\n  P.x = (P.x + d * sp * 2 * s) % 1;\n  P.flow += d * sp * 0.22;\n  const b = input.btnPressed || [];\n  // K1 sends a wave of light down the generations, two and a half a\n  // second; K2 lays the gold edges on or takes them off.\n  if (b[0]) P.wave = 0;\n  if (P.wave >= 0) P.wave = P.wave > 30 ? -1 : P.wave + d * 2.5;\n  if (b[1]) P.gold = 1 - P.gold;\n  P.g += (P.gold - P.g) * min(1, d * 5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.palHue !== P.hue) palette(P);\n  const s = S0 * 8 ** -P.depth, buf = P.buf, pal = P.pal, MEAN = 2 * PN * 3;\n  // Bands: nepers of |j| per band, how much of each band is ramp, and how\n  // dark a band starts.\n  const L = 2.2 * 0.18 ** P.bands, ramp = 0.85 - 0.6 * P.bands, lo = 0.6 - 0.32 * P.bands;\n  for (let py = 0, p = 0; py \u003c H; py++) {\n    const y = (H - py - 0.5 + GAP) * s;\n    for (let px = 0; px \u003c W; px++, p += 3) {\n      jAt(P.x + (px + 0.5 - W / 2) * s, y);\n      // How fast log j turns per LED. Near an image of i it stalls while\n      // the tiles round it stay small, so the tile size at this height,\n      // about y, sets a floor; and the last rows above the axis, where every\n      // tile is a few LEDs at most, fade whatever it says.\n      const g = max(OUT[2] * s, (5 * s) / y), hf = sm(2.5, 9, y / s);\n      // A band or a phase turn per LED or more cannot be drawn; the colour\n      // there would be static. Contrast and colour fade as they crowd, and\n      // the light with them, so the cusps and the axis sink into the dark\n      // instead of shimmering.\n      const cb = (1 - sm(0.25, 0.55, g / L)) * hf, ch = (1 - sm(0.3, 0.7, g / PI)) * hf;\n      let u = OUT[0] / L - P.flow;\n      u -= floor(u);\n      // A sawtooth: each band brightens slowly and drops at its edge.\n      const saw = u \u003c ramp ? u / ramp : (1 - u) / (1 - ramp);\n      const v = ((lo + (1 - lo) * saw) * cb + 0.78 * (1 - cb)) * (0.3 + 0.7 * ch);\n      let a = OUT[1] / TAU;\n      a -= floor(a);\n      const up = a \u003c 0.5, f = up ? 2 * a : 2 - 2 * a, fi = (f * (PN - 1)) | 0, o = (up ? fi : PN + fi) * 3;\n      // Half an LED either side of a triangle edge the two families blend.\n      const e = (min(f, 1 - f) * PI) / g, w = e \u003c 0.5 ? 0.5 - e : 0, o2 = (up ? PN + fi : fi) * 3;\n      let r = pal[o] + (pal[o2] - pal[o]) * w, gg = pal[o + 1] + (pal[o2 + 1] - pal[o + 1]) * w, b = pal[o + 2] + (pal[o2 + 2] - pal[o + 2]) * w;\n      r = (r * ch + pal[MEAN] * (1 - ch)) * v * 255;\n      gg = (gg * ch + pal[MEAN + 1] * (1 - ch)) * v * 255;\n      b = (b * ch + pal[MEAN + 2] * (1 - ch)) * v * 255;\n      if (P.wave >= 0) {\n        // The wave: a tile flares as the front reaches its generation and\n        // keeps a little of the light for a while after.\n        const dw = P.wave - OUT[3], fl = max(exp(-dw * dw * 3), dw > 0 ? 0.35 * exp(-dw * 0.7) : 0) * (0.3 + 0.7 * ch);\n        r += (255 - r) * fl * 0.8;\n        gg += (250 - gg) * fl * 0.8;\n        b += (235 - b) * fl * 0.8;\n      }\n      if (P.g > 0.01) {\n        // The tile edges as gold geodesics a LED wide, faded where the\n        // tiles are too small to draw. The hyperbolic distance to the nearer\n        // of the walls Re = +-1/2 and the floor |t| = 1, times y, is the\n        // distance on the panel.\n        const X = OUT[4], Y = OUT[5], e2 = (asinh(min(0.5 - abs(X), (X * X + Y * Y - 1) / 2) / Y) * y) / s;\n        const w2 = cl(1.1 - e2, 0, 1) * P.g * ch;\n        r += (255 - r) * w2;\n        gg += (205 - gg) * w2;\n        b += (90 - b) * w2;\n      }\n      buf[p] = r;\n      buf[p + 1] = gg;\n      buf[p + 2] = b;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=0..1, Bands=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both colour families round the wheel together; at 0 the triangles are pale gold and deep blue."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new contour band leaves each zero about every two seconds and the window slides four LEDs a second along the axis; at 0.2 both go ten times slower."},{"name":"Depth","min":0,"max":1,"about":"Zooms toward the real axis: at 0 the window is two thirds of a period wide and shows the arcs of the fundamental domain; at 1 it is eight times closer and fans of thin tiles round the cusps fill the panel."},{"name":"Bands","min":0,"max":1,"about":"The contour bands of |j|: a few soft ones at 0, each a factor of nine in |j|; at 1 sharp ones a factor of one and a half apart, too fine to draw in the small tiles, which turn flat."}],"start":[0,2,0,0.06],"measures":{"motion":0.3718,"detail":0.0494,"edges":0.1733,"complexity":2.6926,"coverage":1,"colour":0.3996,"drift":0.1786},"knobResponse":[0.3542,0.2406,0.2621,0.0689]},{"slug":"jacobs-ladder","title":"Jacob's Ladder","family":"light","round":6,"note":"두 막대가 가장 가까운 목에서 보랏빛 아크가 튀어, 벌어지는 V 를 타고 막대 끝까지 올라가 끊어져요. 위의 아크가 끝에 닿기 전에 목에서 다음 아크가 튀고, K4 를 올리면 지나간 아크가 사다리 가로대로 쌓여요.","idea":"An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.","buttons":"K1 tap strikes a new arc now.","code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-jacobs-ladder","type":"code","name":"jacobs-ladder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the gas the arc burns in, starting from the violet of an arc in air."},{"name":"Power","min":0.3,"max":3,"about":"How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone."},{"name":"Spread","min":0,"max":1,"about":"How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down."},{"name":"Exposure","min":0,"max":1,"about":"How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder."}],"start":[0,2,0,0.06],"measures":{"motion":0.8103,"detail":0.0208,"edges":0.2771,"complexity":0.702,"coverage":0.2778,"colour":0.0843,"drift":0.105},"knobResponse":[0.0479,0.0767,0.0696,0.0781]},{"slug":"jacquard","title":"Jacquard Loom","family":"textile","round":4,"note":"구멍 뚫린 카드가 한 장씩 내려와 날실을 들어 올리면 북이 씨실을 끌고 지나가고, 바디가 그 씨실을 쳐 넣어요. 아래로 짜여 내려가는 천에 카드 구멍이 적어 둔 다이아몬드가 서요.","idea":"A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.","buttons":"K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.","code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-jacquard","type":"code","name":"jacquard","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green."},{"name":"Speed","min":0.5,"max":5,"about":"Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak."},{"name":"Card","min":1,"max":4,"about":"The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down."},{"name":"Stripes","min":0,"max":1,"about":"How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks."}],"start":[0,2,1,0.06],"measures":{"motion":1.0063,"detail":0.2005,"edges":0.8201,"complexity":0.1835,"coverage":0.8529,"colour":0.5431,"drift":0.0411},"knobResponse":[0.3764,0.209,0.2197,0.1447]},{"slug":"jelly","title":"Jelly","family":"physics","round":2,"note":"젤리마다 질량 18개를 용수철과 안쪽 압력으로 묶은 고리예요. 키 큰 병에 떨어져 눌린 채 쌓여 출렁이다가, 하나씩 통 튀어 올라 다른 젤리 위로 굴러떨어져요.","idea":"Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.","buttons":"K1 tap shakes the jar.","code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","layer":{"id":"layer-jelly","type":"code","name":"jelly","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match."},{"name":"Gravity","min":-1,"max":3,"about":"Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid."},{"name":"Softness","min":0,"max":1,"about":"Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other."},{"name":"Count","min":4,"max":12,"about":"How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room."}],"start":[0,2,0,4],"measures":{"motion":0.4127,"detail":0.0345,"edges":0.4341,"complexity":0.5229,"coverage":0.4923,"colour":0.4252,"drift":0.1653},"knobResponse":[0.2349,0.3804,0.1184,0.2314]},{"slug":"johnson-mehl","title":"Johnson-Mehl","family":"cells","round":37,"note":"결정이 아무 때나 아무 데서 태어나 같은 빠르기로 원처럼 자라고, LED 마다 먼저 닿은 결정의 것이 돼요. 늦게 난 결정은 작고 둥글게 남아서 먼저 난 결정과 곧은 선이 아니라 쌍곡선 호에서 만나고, 한 상이 판을 다 채우면 다음 상이 그 위로 자라요. 위 12줄은 바뀐 몫을 아브라미 곡선과 나란히 그려요. K4 를 1로 돌리면 결정이 한꺼번에 태어나 경계가 곧은 보로노이가 되고, 누르면 다음 상이 바로 시작해요.","idea":"Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.","buttons":"K1 tap starts the next phase at once, over whatever has turned so far.","code":"// ===== Patternflow pattern =====\n// Title:   Johnson-Mehl\n// Family:  cells\n// Idea:    Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Johnson-Mehl tessellation (William Johnson and Robert Mehl, 1939), with Avrami's law (Melvin Avrami, 1939), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1\n//\n// Knob 1: Hue. Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan.\n// Knob 2: Speed. The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s.\n// Knob 3: Rate. The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3.\n// Knob 4: Mode. How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2.\n// Buttons: K1 tap starts the next phase at once, over whatever has turned so far.\n\n// Johnson and Mehl, and Avrami in the same year, asked how much of a sample\n// has turned by time t when nuclei appear at random, at rate I on the ground\n// not yet turned, and every grain grows at speed V. In the plane the answer\n// is X(t) = 1 - exp(-(pi / 3) I V^2 t^3). The exponent counts the nuclei, real\n// or phantom, whose discs would have reached a point by t; the chance that\n// none has is its exponential. A nucleus that falls on turned ground is a\n// phantom and is dropped: nucleate() looks at its cell first.\n//\n// Checked on this field, 64 by 115 LEDs, averaged over 120 phases at the\n// start knobs: the share turned stays within 0.015 of Avrami's curve all the\n// way; in Mode 1 within 0.013, at Rate 80 within 0.009. One phase alone\n// strays more, a median of 0.094 at Rate 4 and 0.034 at Rate 80, and the\n// strip shows one phase. Without the margin below the edges of the field\n// starve, as no grain can come in from outside: the share lagged the curve\n// by up to 0.063, and a phase took 2.14 Avrami times to fill instead of 1.82.\n\n// The plot takes the top 12 rows, a dark row parts it from the field, and\n// the field is the other 115.\nconst W = 64, H = 128, TOP = 12, FY = TOP + 1, FH = H - FY, FN = W * FH;\n// The grains grow on a grid 24 LEDs wider than the field on every side, and\n// nuclei are born there too, so the field is a window on a larger sample.\nconst M = 24, GW = W + 2 * M, GH = FH + 2 * M, GN = GW * GH;\n// Growth speed in LEDs a second at Speed 1; rate in nuclei per 10,000 LEDs\n// a second at Speed 1. The rim is the last 0.8 s of growth, 1.6 LEDs.\nconst V = 2, RATE_UNIT = 1e-4, RIM = 0.8, CACHE = 4096;\nconst { floor, sqrt, exp, log, random, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst G43 = 0.89298; // Gamma(4/3)\n// The phases take turns in three hues, blue, gold and rose at Hue 0, so a\n// phase never grows over one of its own colour, not even after a tap has\n// left two phases showing underneath it.\nconst PHASE = [0.56, 0.1, 0.88];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\n// Two numbers in [0, 1) from a grain's id: its orientation and its shade.\nfunction hash(id, salt) {\n  let h = Math.imul(id ^ salt, 0x9e3779b1);\n  h ^= h >>> 15;\n  h = Math.imul(h, 0x85ebca6b);\n  h ^= h >>> 13;\n  return (h >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: 0, speed: 2, rate: 4, mode: 0.06,\n    clock: 0, gen: 0, nextId: 1, nextBirth: Infinity, lambda: 0, ns: 0,\n    T: new Float32Array(GN), O: new Int32Array(GN), U: new Int32Array(FN), UP: new Uint8Array(FN),\n    meas: new Float32Array(W), filled: 0, X: 0, tEnd: 1,\n    cId: new Int32Array(CACHE).fill(-1), cRGB: new Float32Array(CACHE * 3), cHue: NaN, rgb: new Float32Array(3),\n  };\n}\n\n// The rate of the continuous part and the density of the nuclei all born\n// at once. A pure Johnson-Mehl run with rate I ends with I Gamma(4/3) tau\n// grains per LED, tau = (3 / (pi I V^2))^(1/3) the time at which Avrami's\n// exponent reaches 1. Mode m moves that share m of them to time 0, so the\n// grain count stays about the same from one end of the knob to the other.\nfunction rates(S) {\n  const I = S.rate * RATE_UNIT, tau = Math.cbrt(3 / (PI * I * V * V));\n  return { I, cont: (1 - S.mode) * I, sat: S.mode * I * G43 * tau };\n}\n\nfunction nucleate(S, x, y, t) {\n  const { T, O } = S;\n  const cx = floor(x), cy = floor(y);\n  if (T[cy * GW + cx] \u003c= t) return false;\n  const id = S.nextId++;\n  // T_i(p) = t_i + |p - x_i| / V, kept where it is the earliest. Only as\n  // far as the front can get by 2.5 plot spans, five times Avrami's time;\n  // by then a cell is still open with odds of exp(-25) or less. At Rate 80\n  // in Mode 1 that cut the 400 nuclei born on one frame from 18 ms to 3.\n  const R = V * max(0, 2.5 * S.tEnd - t);\n  const i0 = max(0, floor(x - R)), i1 = min(GW - 1, floor(x + R)), j0 = max(0, floor(y - R)), j1 = min(GH - 1, floor(y + R));\n  for (let j = j0; j \u003c= j1; j++) {\n    const dy = j + 0.5 - y, dy2 = dy * dy;\n    for (let i = i0, c = j * GW + i0; i \u003c= i1; i++, c++) {\n      const dx = i + 0.5 - x, a = t + sqrt(dx * dx + dy2) / V;\n      if (a \u003c T[c]) {\n        T[c] = a;\n        O[c] = id;\n      }\n    }\n  }\n  return true;\n}\n\nfunction drawWait(S) {\n  S.nextBirth = S.lambda > 0 ? S.clock - log(1 - random()) / S.lambda : Infinity;\n}\n\n// A new phase: what shows now becomes the layer underneath, the grid is\n// cleared, and the site-saturated share is born at once.\nfunction nextPhase(S) {\n  const { T, O, U, UP } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      if (T[c] \u003c= S.clock && O[c] > 0) {\n        U[p] = O[c];\n        UP[p] = par;\n      }\n    }\n  S.gen++;\n  S.clock = 0;\n  T.fill(Infinity);\n  O.fill(0);\n  const r = rates(S);\n  S.ns = r.sat;\n  S.lambda = r.cont * GN;\n  // The span first: it sets how far each nucleus below is drawn.\n  theoryEnd(S);\n  // A Poisson count of nuclei at time 0, by inversion.\n  const mean = r.sat * GN;\n  let n = 0;\n  if (mean > 0) {\n    let L = exp(-min(mean, 600)), p = 1, u = random();\n    if (mean > 600) n = floor(mean);\n    else {\n      let acc = L;\n      while (u > acc && n \u003c 4000) {\n        n++;\n        p *= mean / n;\n        acc += L * p;\n      }\n    }\n  }\n  for (let i = 0; i \u003c n; i++) nucleate(S, random() * GW, random() * GH, 0);\n  drawWait(S);\n  S.meas.fill(0);\n  S.filled = 0;\n  S.X = 0;\n}\n\n// Avrami: X(t) = 1 - exp(-pi V^2 (Ns t^2 + (1 - m) I t^3 / 3)). The plot\n// runs to twice the time at which the exponent is 1.\nfunction avramiExp(S, t) {\n  const r = rates(S);\n  return PI * V * V * (S.ns * t * t + (r.cont * t * t * t) / 3);\n}\nfunction theoryEnd(S) {\n  let lo = 0, hi = 1;\n  while (avramiExp(S, hi) \u003c 1) hi *= 2;\n  for (let k = 0; k \u003c 40; k++) {\n    const mid = 0.5 * (lo + hi);\n    if (avramiExp(S, mid) \u003c 1) lo = mid;\n    else hi = mid;\n  }\n  S.tEnd = 2 * hi;\n}\n\n// Advance the clock by d, birthing the continuous nuclei in order, and\n// measure the share of the field turned.\nfunction advance(S, d) {\n  const target = S.clock + d;\n  while (S.nextBirth \u003c= target) {\n    S.clock = S.nextBirth;\n    nucleate(S, random() * GW, random() * GH, S.clock);\n    drawWait(S);\n  }\n  S.clock = target;\n  let n = 0;\n  const T = S.T;\n  for (let y = 0; y \u003c FH; y++) for (let c = (y + M) * GW + M, e = c + W; c \u003c e; c++) if (T[c] \u003c= target) n++;\n  S.X = n / FN;\n  return n === FN;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 4, 80);\n  S.mode = cl(k[3], 0, 1);\n  const lam = rates(S).cont * GN;\n  if (lam !== S.lambda) {\n    S.lambda = lam;\n    drawWait(S);\n    theoryEnd(S);\n  }\n  if (!S.ready) {\n    // The first phase grows to the end before the first frame, so the\n    // panel opens full and the second phase starts over it.\n    S.gen = 2;\n    nextPhase(S);\n    while (!advance(S, 0.25) && S.clock \u003c 3 * S.tEnd);\n    nextPhase(S);\n    S.ready = true;\n  }\n  const tap = input.btnPressed && input.btnPressed[0];\n  const full = advance(S, d * S.speed);\n  // The plot takes one column per 64th of its time span.\n  while (S.filled \u003c W && S.clock >= ((S.filled + 1) / W) * S.tEnd) S.meas[S.filled++] = S.X;\n  if (full || tap || S.clock > 3 * S.tEnd) nextPhase(S);\n}\n\nfunction grainRGB(S, id, par, out) {\n  const slot = id & (CACHE - 1), o = slot * 3;\n  if (S.cId[slot] === id * 3 + par) {\n    out[0] = S.cRGB[o];\n    out[1] = S.cRGB[o + 1];\n    out[2] = S.cRGB[o + 2];\n    return;\n  }\n  const th = hash(id, 0x51ed), q = hash(id, 0x2c1b);\n  let h = S.hue + PHASE[par] + (th - 0.5) * 0.1;\n  h -= floor(h);\n  // Red, orange, gold and yellow keep their brightness and change shade by\n  // saturation; a darker gold reads olive and a darker orange brown. The\n  // lift fades out over lime and over rose.\n  const warm = h \u003c 0.2 ? 1 : h \u003c 0.27 ? (0.27 - h) / 0.07 : h > 0.95 ? 1 : h > 0.89 ? (h - 0.89) / 0.06 : 0;\n  const s = 0.5 + 0.4 * q - 0.05 * warm, v = 0.6 + 0.4 * (1 - q) + warm * (0.32 - 0.32 * (1 - q));\n  hsv(h, s, v, S.cRGB, o);\n  S.cId[slot] = id * 3 + par;\n  out[0] = S.cRGB[o];\n  out[1] = S.cRGB[o + 1];\n  out[2] = S.cRGB[o + 2];\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  if (S.cHue !== S.hue) {\n    S.cId.fill(-1);\n    S.cHue = S.hue;\n  }\n  const { T, O, U, UP, clock, rgb } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      let r, g, b;\n      if (T[c] \u003c= clock) {\n        const id = O[c];\n        grainRGB(S, id, par, rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] \u003c= clock && O[c + 1] !== id) || (y + 1 \u003c FH && T[c + GW] \u003c= clock && O[c + GW] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n        else {\n          const age = clock - T[c];\n          if (age \u003c RIM) {\n            const w = 0.8 * (1 - age / RIM);\n            r += (255 - r) * w;\n            g += (255 - g) * w;\n            b += (255 - b) * w;\n          }\n        }\n      } else {\n        const id = U[p];\n        grainRGB(S, id, UP[p], rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] > clock && U[p + 1] !== id) || (y + 1 \u003c FH && T[c + GW] > clock && U[p + W] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n      }\n      display.setPixel(x, y + FY, r, g, b);\n    }\n  }\n  // The plot: the share of the field turned so far, one column per 64th of\n  // the span, filled in the new phase's colour on black, and Avrami's curve\n  // as a pale line across the whole width. A dim fill read brown in gold.\n  const newC = [0, 0, 0];\n  hsv(S.hue + PHASE[par], 0.75, 1, newC, 0);\n  let prev = -1;\n  for (let x = 0; x \u003c W; x++) {\n    const hgt = x \u003c S.filled ? S.meas[x] * TOP : 0;\n    for (let yy = 0; yy \u003c TOP; yy++) {\n      const f = cl(hgt - (TOP - 1 - yy), 0, 1);\n      if (f > 0) display.setPixel(x, yy, newC[0] * f, newC[1] * f, newC[2] * f);\n    }\n    const t = ((x + 1) / W) * S.tEnd, X = 1 - exp(-avramiExp(S, t)), row = cl(floor((1 - X) * TOP - 0.001), 0, TOP - 1);\n    const a = prev \u003c 0 ? row : min(prev, row), bnd = prev \u003c 0 ? row : max(prev, row);\n    for (let yy = a; yy \u003c= bnd; yy++) display.setPixel(x, yy, 235, 235, 235);\n    prev = row;\n  }\n}\n","layer":{"id":"layer-johnson-mehl","type":"code","name":"johnson-mehl","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Johnson-Mehl\n// Family:  cells\n// Idea:    Crystal grains are born at random places and random times, each grows as a disc at one speed with a bright rim on its front, and every LED belongs to the grain that reaches it first, so grains born late meet the early ones along curved hyperbola arcs rather than the straight edges of a Voronoi diagram; when a phase has filled the panel the next one nucleates and grows over it, and a strip along the top plots the share already turned against Avrami's curve.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Johnson-Mehl tessellation (William Johnson and Robert Mehl, 1939), with Avrami's law (Melvin Avrami, 1939), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1\n//\n// Knob 1: Hue. Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan.\n// Knob 2: Speed. The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s.\n// Knob 3: Rate. The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3.\n// Knob 4: Mode. How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2.\n// Buttons: K1 tap starts the next phase at once, over whatever has turned so far.\n\n// Johnson and Mehl, and Avrami in the same year, asked how much of a sample\n// has turned by time t when nuclei appear at random, at rate I on the ground\n// not yet turned, and every grain grows at speed V. In the plane the answer\n// is X(t) = 1 - exp(-(pi / 3) I V^2 t^3). The exponent counts the nuclei, real\n// or phantom, whose discs would have reached a point by t; the chance that\n// none has is its exponential. A nucleus that falls on turned ground is a\n// phantom and is dropped: nucleate() looks at its cell first.\n//\n// Checked on this field, 64 by 115 LEDs, averaged over 120 phases at the\n// start knobs: the share turned stays within 0.015 of Avrami's curve all the\n// way; in Mode 1 within 0.013, at Rate 80 within 0.009. One phase alone\n// strays more, a median of 0.094 at Rate 4 and 0.034 at Rate 80, and the\n// strip shows one phase. Without the margin below the edges of the field\n// starve, as no grain can come in from outside: the share lagged the curve\n// by up to 0.063, and a phase took 2.14 Avrami times to fill instead of 1.82.\n\n// The plot takes the top 12 rows, a dark row parts it from the field, and\n// the field is the other 115.\nconst W = 64, H = 128, TOP = 12, FY = TOP + 1, FH = H - FY, FN = W * FH;\n// The grains grow on a grid 24 LEDs wider than the field on every side, and\n// nuclei are born there too, so the field is a window on a larger sample.\nconst M = 24, GW = W + 2 * M, GH = FH + 2 * M, GN = GW * GH;\n// Growth speed in LEDs a second at Speed 1; rate in nuclei per 10,000 LEDs\n// a second at Speed 1. The rim is the last 0.8 s of growth, 1.6 LEDs.\nconst V = 2, RATE_UNIT = 1e-4, RIM = 0.8, CACHE = 4096;\nconst { floor, sqrt, exp, log, random, min, max, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst G43 = 0.89298; // Gamma(4/3)\n// The phases take turns in three hues, blue, gold and rose at Hue 0, so a\n// phase never grows over one of its own colour, not even after a tap has\n// left two phases showing underneath it.\nconst PHASE = [0.56, 0.1, 0.88];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\n// Two numbers in [0, 1) from a grain's id: its orientation and its shade.\nfunction hash(id, salt) {\n  let h = Math.imul(id ^ salt, 0x9e3779b1);\n  h ^= h >>> 15;\n  h = Math.imul(h, 0x85ebca6b);\n  h ^= h >>> 13;\n  return (h >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: 0, speed: 2, rate: 4, mode: 0.06,\n    clock: 0, gen: 0, nextId: 1, nextBirth: Infinity, lambda: 0, ns: 0,\n    T: new Float32Array(GN), O: new Int32Array(GN), U: new Int32Array(FN), UP: new Uint8Array(FN),\n    meas: new Float32Array(W), filled: 0, X: 0, tEnd: 1,\n    cId: new Int32Array(CACHE).fill(-1), cRGB: new Float32Array(CACHE * 3), cHue: NaN, rgb: new Float32Array(3),\n  };\n}\n\n// The rate of the continuous part and the density of the nuclei all born\n// at once. A pure Johnson-Mehl run with rate I ends with I Gamma(4/3) tau\n// grains per LED, tau = (3 / (pi I V^2))^(1/3) the time at which Avrami's\n// exponent reaches 1. Mode m moves that share m of them to time 0, so the\n// grain count stays about the same from one end of the knob to the other.\nfunction rates(S) {\n  const I = S.rate * RATE_UNIT, tau = Math.cbrt(3 / (PI * I * V * V));\n  return { I, cont: (1 - S.mode) * I, sat: S.mode * I * G43 * tau };\n}\n\nfunction nucleate(S, x, y, t) {\n  const { T, O } = S;\n  const cx = floor(x), cy = floor(y);\n  if (T[cy * GW + cx] \u003c= t) return false;\n  const id = S.nextId++;\n  // T_i(p) = t_i + |p - x_i| / V, kept where it is the earliest. Only as\n  // far as the front can get by 2.5 plot spans, five times Avrami's time;\n  // by then a cell is still open with odds of exp(-25) or less. At Rate 80\n  // in Mode 1 that cut the 400 nuclei born on one frame from 18 ms to 3.\n  const R = V * max(0, 2.5 * S.tEnd - t);\n  const i0 = max(0, floor(x - R)), i1 = min(GW - 1, floor(x + R)), j0 = max(0, floor(y - R)), j1 = min(GH - 1, floor(y + R));\n  for (let j = j0; j \u003c= j1; j++) {\n    const dy = j + 0.5 - y, dy2 = dy * dy;\n    for (let i = i0, c = j * GW + i0; i \u003c= i1; i++, c++) {\n      const dx = i + 0.5 - x, a = t + sqrt(dx * dx + dy2) / V;\n      if (a \u003c T[c]) {\n        T[c] = a;\n        O[c] = id;\n      }\n    }\n  }\n  return true;\n}\n\nfunction drawWait(S) {\n  S.nextBirth = S.lambda > 0 ? S.clock - log(1 - random()) / S.lambda : Infinity;\n}\n\n// A new phase: what shows now becomes the layer underneath, the grid is\n// cleared, and the site-saturated share is born at once.\nfunction nextPhase(S) {\n  const { T, O, U, UP } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      if (T[c] \u003c= S.clock && O[c] > 0) {\n        U[p] = O[c];\n        UP[p] = par;\n      }\n    }\n  S.gen++;\n  S.clock = 0;\n  T.fill(Infinity);\n  O.fill(0);\n  const r = rates(S);\n  S.ns = r.sat;\n  S.lambda = r.cont * GN;\n  // The span first: it sets how far each nucleus below is drawn.\n  theoryEnd(S);\n  // A Poisson count of nuclei at time 0, by inversion.\n  const mean = r.sat * GN;\n  let n = 0;\n  if (mean > 0) {\n    let L = exp(-min(mean, 600)), p = 1, u = random();\n    if (mean > 600) n = floor(mean);\n    else {\n      let acc = L;\n      while (u > acc && n \u003c 4000) {\n        n++;\n        p *= mean / n;\n        acc += L * p;\n      }\n    }\n  }\n  for (let i = 0; i \u003c n; i++) nucleate(S, random() * GW, random() * GH, 0);\n  drawWait(S);\n  S.meas.fill(0);\n  S.filled = 0;\n  S.X = 0;\n}\n\n// Avrami: X(t) = 1 - exp(-pi V^2 (Ns t^2 + (1 - m) I t^3 / 3)). The plot\n// runs to twice the time at which the exponent is 1.\nfunction avramiExp(S, t) {\n  const r = rates(S);\n  return PI * V * V * (S.ns * t * t + (r.cont * t * t * t) / 3);\n}\nfunction theoryEnd(S) {\n  let lo = 0, hi = 1;\n  while (avramiExp(S, hi) \u003c 1) hi *= 2;\n  for (let k = 0; k \u003c 40; k++) {\n    const mid = 0.5 * (lo + hi);\n    if (avramiExp(S, mid) \u003c 1) lo = mid;\n    else hi = mid;\n  }\n  S.tEnd = 2 * hi;\n}\n\n// Advance the clock by d, birthing the continuous nuclei in order, and\n// measure the share of the field turned.\nfunction advance(S, d) {\n  const target = S.clock + d;\n  while (S.nextBirth \u003c= target) {\n    S.clock = S.nextBirth;\n    nucleate(S, random() * GW, random() * GH, S.clock);\n    drawWait(S);\n  }\n  S.clock = target;\n  let n = 0;\n  const T = S.T;\n  for (let y = 0; y \u003c FH; y++) for (let c = (y + M) * GW + M, e = c + W; c \u003c e; c++) if (T[c] \u003c= target) n++;\n  S.X = n / FN;\n  return n === FN;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.rate = cl(k[2], 4, 80);\n  S.mode = cl(k[3], 0, 1);\n  const lam = rates(S).cont * GN;\n  if (lam !== S.lambda) {\n    S.lambda = lam;\n    drawWait(S);\n    theoryEnd(S);\n  }\n  if (!S.ready) {\n    // The first phase grows to the end before the first frame, so the\n    // panel opens full and the second phase starts over it.\n    S.gen = 2;\n    nextPhase(S);\n    while (!advance(S, 0.25) && S.clock \u003c 3 * S.tEnd);\n    nextPhase(S);\n    S.ready = true;\n  }\n  const tap = input.btnPressed && input.btnPressed[0];\n  const full = advance(S, d * S.speed);\n  // The plot takes one column per 64th of its time span.\n  while (S.filled \u003c W && S.clock >= ((S.filled + 1) / W) * S.tEnd) S.meas[S.filled++] = S.X;\n  if (full || tap || S.clock > 3 * S.tEnd) nextPhase(S);\n}\n\nfunction grainRGB(S, id, par, out) {\n  const slot = id & (CACHE - 1), o = slot * 3;\n  if (S.cId[slot] === id * 3 + par) {\n    out[0] = S.cRGB[o];\n    out[1] = S.cRGB[o + 1];\n    out[2] = S.cRGB[o + 2];\n    return;\n  }\n  const th = hash(id, 0x51ed), q = hash(id, 0x2c1b);\n  let h = S.hue + PHASE[par] + (th - 0.5) * 0.1;\n  h -= floor(h);\n  // Red, orange, gold and yellow keep their brightness and change shade by\n  // saturation; a darker gold reads olive and a darker orange brown. The\n  // lift fades out over lime and over rose.\n  const warm = h \u003c 0.2 ? 1 : h \u003c 0.27 ? (0.27 - h) / 0.07 : h > 0.95 ? 1 : h > 0.89 ? (h - 0.89) / 0.06 : 0;\n  const s = 0.5 + 0.4 * q - 0.05 * warm, v = 0.6 + 0.4 * (1 - q) + warm * (0.32 - 0.32 * (1 - q));\n  hsv(h, s, v, S.cRGB, o);\n  S.cId[slot] = id * 3 + par;\n  out[0] = S.cRGB[o];\n  out[1] = S.cRGB[o + 1];\n  out[2] = S.cRGB[o + 2];\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  if (S.cHue !== S.hue) {\n    S.cId.fill(-1);\n    S.cHue = S.hue;\n  }\n  const { T, O, U, UP, clock, rgb } = S, par = S.gen % 3;\n  for (let y = 0; y \u003c FH; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const c = (y + M) * GW + x + M, p = y * W + x;\n      let r, g, b;\n      if (T[c] \u003c= clock) {\n        const id = O[c];\n        grainRGB(S, id, par, rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] \u003c= clock && O[c + 1] !== id) || (y + 1 \u003c FH && T[c + GW] \u003c= clock && O[c + GW] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n        else {\n          const age = clock - T[c];\n          if (age \u003c RIM) {\n            const w = 0.8 * (1 - age / RIM);\n            r += (255 - r) * w;\n            g += (255 - g) * w;\n            b += (255 - b) * w;\n          }\n        }\n      } else {\n        const id = U[p];\n        grainRGB(S, id, UP[p], rgb);\n        r = rgb[0];\n        g = rgb[1];\n        b = rgb[2];\n        const edge = (x + 1 \u003c W && T[c + 1] > clock && U[p + 1] !== id) || (y + 1 \u003c FH && T[c + GW] > clock && U[p + W] !== id);\n        if (edge) (r *= 0.15), (g *= 0.15), (b *= 0.15);\n      }\n      display.setPixel(x, y + FY, r, g, b);\n    }\n  }\n  // The plot: the share of the field turned so far, one column per 64th of\n  // the span, filled in the new phase's colour on black, and Avrami's curve\n  // as a pale line across the whole width. A dim fill read brown in gold.\n  const newC = [0, 0, 0];\n  hsv(S.hue + PHASE[par], 0.75, 1, newC, 0);\n  let prev = -1;\n  for (let x = 0; x \u003c W; x++) {\n    const hgt = x \u003c S.filled ? S.meas[x] * TOP : 0;\n    for (let yy = 0; yy \u003c TOP; yy++) {\n      const f = cl(hgt - (TOP - 1 - yy), 0, 1);\n      if (f > 0) display.setPixel(x, yy, newC[0] * f, newC[1] * f, newC[2] * f);\n    }\n    const t = ((x + 1) / W) * S.tEnd, X = 1 - exp(-avramiExp(S, t)), row = cl(floor((1 - X) * TOP - 0.001), 0, TOP - 1);\n    const a = prev \u003c 0 ? row : min(prev, row), bnd = prev \u003c 0 ? row : max(prev, row);\n    for (let yy = a; yy \u003c= bnd; yy++) display.setPixel(x, yy, 235, 235, 235);\n    prev = row;\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Rate=4..80, Mode=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three phases round the wheel together. At 0 they come in blue, gold and rose, each grain a shade of its phase picked at random, as a crystal's orientation would be; at 0.4 red, cyan and green; at 0.6 yellow, indigo and cyan."},{"name":"Speed","min":0.2,"max":3,"about":"The fronts move 2 LEDs a second times the knob, 4 at 2, and at the start a phase fills the field in about 7.7 s; at 0.2 it takes 77 s."},{"name":"Rate","min":4,"max":80,"about":"The nucleation rate in nuclei per 10,000 LEDs a second at Speed 1, on the ground the phase has not yet taken. At 4 a filled field holds about 32 grains, 25 to 41, counting those the edges cut; at 80 about 180, and at Speed 2 a phase fills in 3.0 s instead of 7.7, as Avrami's time goes as the rate to the power -1/3."},{"name":"Mode","min":0,"max":1,"about":"How the nuclei are born. At 0 at a steady rate while the phase grows, pure Johnson-Mehl: a grain born late stays small and round, and its border with an older one is the hyperbola arc where the distances to the two nuclei differ by as far as a front grows between their two births. At 1 they are all born at once and the grains make a Voronoi diagram with straight edges. Between, that share of them is born at once. The grain count stays about the same over the whole knob, and Avrami's exponent goes from 3 to 2."}],"start":[0,2,4,0.06],"measures":{"motion":0.0659,"detail":0.0824,"edges":0.8775,"complexity":0.3635,"coverage":0.9103,"colour":0.4567,"drift":0.1875},"knobResponse":[0.3746,0.1973,0.3888,0.3417]},{"slug":"joukowsky-airfoil","title":"Joukowsky Airfoil","family":"physics","round":35,"note":"주콥스키 사상으로 원을 지나는 이상 흐름을 날개를 지나는 흐름으로 옮겼어요. 44줄 길이의 날개 위로 1초마다 맨 윗줄에서 놓은 염료 줄이 내려와 앞전의 붉은 정체점에서 갈라지고, 오른쪽 흡입면으로 간 반쪽이 뒷전에 12.6줄 먼저 닿아요. K3 은 받음각을 0도에서 15도로 올려 그 앞섬을 46줄까지 늘리고, K1 을 누르면 순환을 10초 동안 빼서 두 반쪽이 거의 같이 닿아요.","idea":"A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.","buttons":"K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.","code":"// ===== Patternflow pattern =====\n// Title:   Joukowsky Airfoil\n// Family:  physics\n// Idea:    A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joukowsky airfoil (Nikolai Zhukovsky, 1910)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12\n//\n// Knob 1: Hue. Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it.\n// Knob 2: Speed. How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten.\n// Knob 3: Attack. The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose.\n// Knob 4: Camber. The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows.\n// Buttons: K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.\n\n// Ideal flow past a circle in the ζ-plane, carried to flow past an airfoil\n// by z = ζ + c²/ζ. The circle goes through ζ = c, which lands on the sharp\n// trailing edge at z = 2c, and its centre ζ0 = -ε + iδ sits left of the\n// origin for thickness and above it for camber. With U = 1,\n//   W(ζ) = ζ' e^{-iα} + R² e^{iα}/ζ' + (iΓ/2π) log ζ',   ζ' = ζ - ζ0,\n// and the Kutta condition, that the flow leaves the trailing edge smoothly,\n// fixes Γ = 4πR sin(α + β), β the angle of ζ0 seen from c. Lengths are in\n// LEDs: c = 11, so the chord is 44 rows, centred on the panel, and ε =\n// 0.12 c makes the wing 6 LEDs at its thickest, 14% of the chord. The free\n// stream runs down the panel at one LED per unit of time.\nconst W = 64, H = 128, NP = W * H, CX = 32, CY = 64;\nconst C = 11, EPS = 0.12 * C, LAM = 20, DUTY = 2.2 / 20, TMAX = 400, CHUNK = 768, SPACE = 6;\nconst { min, max, floor, round, sqrt, sin, cos, atan2, abs, exp, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// One flow: the circle, the angle of attack and the circulation.\nfunction makeFlow(alphaDeg, camber, kutta) {\n  const a = (alphaDeg * PI) / 180, d = camber * 2 * C;\n  const z0r = -EPS, z0i = d, R = sqrt((C + EPS) ** 2 + d * d), beta = atan2(d, C + EPS);\n  const gam = kutta ? 4 * PI * R * sin(a + beta) : 0;\n  return { a, ca: cos(a), sa: sin(a), z0r, z0i, R, R2: R * R, beta, gam, key: alphaDeg.toFixed(1) + \"/\" + camber.toFixed(3) + \"/\" + kutta };\n}\n\n// The flow at ζ: o[0], o[1] = dζ/dt, o[2] = speed on the panel, o[3] =\n// |dz/dζ|. dζ/dt = conj(dW/dζ) / |dz/dζ|². At the trailing edge dz/dζ is 0;\n// with the Kutta condition dW/dζ is 0 there too and the floor on |dz/dζ|²\n// only keeps 0/0 away, without it the speed there is capped at 6.\nfunction flowAt(F, zr, zi, o) {\n  const pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n  const ir = pr / r2, ii = -pi / r2, i2r = ir * ir - ii * ii, i2i = 2 * ir * ii;\n  const er = F.ca * i2r - F.sa * i2i, ei = F.ca * i2i + F.sa * i2r, g = F.gam / TAU;\n  const wr = F.ca - F.R2 * er - g * ii, wi = -F.sa - F.R2 * ei + g * ir;\n  const q2 = zr * zr + zi * zi, jr = zr / q2, ji = -zi / q2, j2r = jr * jr - ji * ji, j2i = 2 * jr * ji;\n  const dr = 1 - C * C * j2r, di = -C * C * j2i, J2 = max(1e-8, dr * dr + di * di);\n  let sp = sqrt((wr * wr + wi * wi) / J2), k = 1;\n  if (sp > 6) (k = 6 / sp), (sp = 6);\n  o[0] = (k * wr) / J2;\n  o[1] = (-k * wi) / J2;\n  o[2] = sp;\n  o[3] = sqrt(J2);\n}\n\n// ζ to the panel: z = ζ + c²/ζ, turned back by α so the free stream runs\n// down the panel and the suction side faces right. o[0] = X, o[1] = Y.\nfunction toPanel(F, zr, zi, o) {\n  const q2 = zr * zr + zi * zi, xr = zr + (C * C * zr) / q2, xi = zi - (C * C * zi) / q2;\n  o[0] = CX + xi * F.ca - xr * F.sa;\n  o[1] = CY + xr * F.ca + xi * F.sa;\n}\n\n// The panel to ζ: of the two roots of ζ² - zζ + c² = 0, the one outside\n// the circle. o[2] = |ζ'|²; less than R² means the LED is inside the wing.\nfunction toZeta(F, X, Y, o) {\n  const pr = Y - CY, pi = X - CX, zr = pr * F.ca - pi * F.sa, zi = pr * F.sa + pi * F.ca;\n  const wr = zr * zr - zi * zi - 4 * C * C, wi = 2 * zr * zi, m = sqrt(wr * wr + wi * wi);\n  const sr = sqrt(max(0, (m + wr) / 2)), si = (wi \u003c 0 ? -1 : 1) * sqrt(max(0, (m - wr) / 2));\n  const ar = (zr + sr) / 2, ai = (zi + si) / 2, br = (zr - sr) / 2, bi = (zi - si) / 2;\n  const da = (ar - F.z0r) ** 2 + (ai - F.z0i) ** 2, db = (br - F.z0r) ** 2 + (bi - F.z0i) ** 2;\n  if (da >= db) (o[0] = ar), (o[1] = ai), (o[2] = da);\n  else (o[0] = br), (o[1] = bi), (o[2] = db);\n}\n\n// When the fluid at an LED crossed the top row: back along its stream line,\n// in the ζ-plane where the wing is a circle and easy to keep out of, adding\n// up time. Midpoint steps of 0.35 LED by the surface, up to 3 LEDs and 3\n// time units away from it.\nfunction arrival(F, X, Y, f, pos) {\n  toZeta(F, X, Y, f);\n  if (f[2] \u003c F.R2) return -1;\n  let zr = f[0], zi = f[1], T = 0;\n  for (let it = 0; it \u003c 400; it++) {\n    flowAt(F, zr, zi, f);\n    const pr = zr - F.z0r, pi = zi - F.z0i, dist = (sqrt(pr * pr + pi * pi) - F.R) * f[3];\n    const dt = min(cl(0.35 + 0.3 * dist, 0.35, 3) / max(f[2], 1e-6), 3);\n    flowAt(F, zr - 0.5 * dt * f[0], zi - 0.5 * dt * f[1], f);\n    zr -= dt * f[0];\n    zi -= dt * f[1];\n    const qr = zr - F.z0r, qi = zi - F.z0i, q2 = qr * qr + qi * qi;\n    if (q2 \u003c F.R2) {\n      const s = (F.R * 1.0001) / sqrt(q2);\n      zr = F.z0r + qr * s;\n      zi = F.z0i + qi * s;\n    }\n    T += dt;\n    toPanel(F, zr, zi, pos);\n    // Past the top row: give back the part of the step beyond it.\n    if (pos[1] \u003c= 0) return max(0, T + pos[1] / max(0.3, f[2]));\n    if (T > TMAX) return TMAX;\n  }\n  return TMAX;\n}\n\nfunction newField(F) {\n  return { F, T: new Float32Array(NP), G: new Float32Array(NP), psi: new Float32Array(NP), sp: new Float32Array(NP), body: new Float32Array(NP), next: 0, st: [0, 0, 0, 0] };\n}\n\n// Arrival times for LEDs from..to of a field; the rest once they are all in.\nfunction fill(Fd, to) {\n  const { F, T, G, psi, sp, body } = Fd, f = new Float64Array(4), pos = [0, 0];\n  for (let p = Fd.next; p \u003c to; p++) T[p] = arrival(F, (p % W) + 0.5, floor(p / W) + 0.5, f, pos);\n  Fd.next = to;\n  if (to \u003c NP) return false;\n  for (let p = 0; p \u003c NP; p++) {\n    toZeta(F, (p % W) + 0.5, floor(p / W) + 0.5, f);\n    const zr = f[0], zi = f[1], pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n    flowAt(F, zr, zi, f);\n    sp[p] = f[2];\n    // Inside the wing or within half an LED of its edge, by the distance\n    // to the circle stretched by |dz/dζ|.\n    body[p] = cl(0.5 - (sqrt(r2) - F.R) * f[3], 0, 1);\n    // ψ = Im W.\n    psi[p] = pi * F.ca - pr * F.sa + (F.R2 * (F.sa * pr - F.ca * pi)) / r2 + (F.gam / (2 * TAU)) * log(r2);\n  }\n  // How fast the arrival time changes across one LED, from the smaller of\n  // the two one-sided steps, so the jump in the wake behind the trailing\n  // edge does not count as steep.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p], d = (q) => (T[q] \u003c 0 ? 50 : min(50, abs(T[q] - t)));\n      const gx = min(x > 0 ? d(p - 1) : 50, x \u003c W - 1 ? d(p + 1) : 50), gy = min(y > 0 ? d(p - W) : 50, y \u003c H - 1 ? d(p + W) : 50);\n      G[p] = sqrt(gx * gx + gy * gy);\n    }\n  // The two stagnation points, where sin(θ - α) = -Γ / 4πR on the circle.\n  const s0 = cl(-F.gam / (4 * PI * F.R), -1, 1), th = [F.a + Math.asin(s0), F.a + PI - Math.asin(s0)];\n  for (let i = 0; i \u003c 2; i++) {\n    toPanel(F, F.z0r + F.R * cos(th[i]), F.z0i + F.R * sin(th[i]), pos);\n    Fd.st[i * 2] = pos[0];\n    Fd.st[i * 2 + 1] = pos[1];\n  }\n  return true;\n}\n\nexport function setup(params) {\n  params.s = { cur: null, old: null, nxt: null, fade: 1, s: 0, hue: 0, speed: 2, off: 0, pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(NP * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  // K1 takes the circulation away for 10 s; a second tap gives it back.\n  if (input.btnPressed && input.btnPressed[0]) P.off = P.off > 0 ? 0 : 10;\n  P.off = max(0, P.off - d);\n  const want = makeFlow(cl(k[2], 0, 15), cl(k[3], 0, 0.12), P.off \u003c= 0);\n  if (!P.cur) {\n    P.cur = newField(want);\n    fill(P.cur, NP);\n  } else if (!P.nxt && want.key !== P.cur.F.key) P.nxt = newField(want);\n  // A new flow is worked out 768 LEDs a frame, eleven frames for the panel,\n  // then faded in over 0.4 s; a knob still turning starts the next one.\n  if (P.nxt && fill(P.nxt, min(NP, P.nxt.next + CHUNK))) {\n    P.old = P.cur;\n    P.cur = P.nxt;\n    P.nxt = null;\n    P.fade = 0;\n  }\n  P.fade = min(1, P.fade + d / 0.4);\n  P.s += d * 10 * P.speed;\n}\n\nfunction paint(P, Fd, wgt, rgb) {\n  const { T, G, psi, sp, body } = Fd, pal = P.pal;\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) {\n    let r = 0.012, g = 0.016, b = 0.05;\n    // Stream lines every 6 units of ψ, about one LED wide wherever they are.\n    const u = psi[p] / SPACE, du = (abs(u - round(u)) * SPACE) / max(0.05, sp[p]), sl = 0.15 * exp(-2 * du * du);\n    r += sl * 0.45;\n    g += sl * 0.55;\n    b += sl * 0.8;\n    const t = T[p];\n    if (t >= 0) {\n      // The dye: a puff across the top row every 20 time units, lasting 2.2\n      // of them, so in the free stream a line 2.2 LEDs thick. Where the flow\n      // slows the lines crowd and thin; a line thinner than 1.6 LEDs is drawn\n      // 1.6 wide and dimmer, and where they come closer than 4 LEDs they\n      // merge into the haze they would make, 2.2/20 of full.\n      const ph = (P.s - t) / LAM - DUTY / 2, kk = round(ph), per = LAM / max(0.02, G[p]);\n      const wpx = DUTY * per, hw = max(0.8, wpx / 2), dpx = abs(ph - kk) * per;\n      const line = cl(hw + 0.5 - dpx, 0, 1) * min(1, wpx / (2 * hw)), mix = cl((per - 4) / 4, 0, 1);\n      const c = (((kk % 4) + 4) % 4) * 3, dye = line * mix, haze = DUTY * (1 - mix);\n      r += dye * pal[c] + haze * pal[12];\n      g += dye * pal[c + 1] + haze * pal[13];\n      b += dye * pal[c + 2] + haze * pal[14];\n    }\n    const bo = body[p];\n    r += (0.82 - r) * bo;\n    g += (0.84 - g) * bo;\n    b += (0.9 - b) * bo;\n    rgb[o] += wgt * r;\n    rgb[o + 1] += wgt * g;\n    rgb[o + 2] += wgt * b;\n  }\n}\n\n// The two stagnation points, a red LED each on the wing's edge.\nfunction marks(Fd, wgt, rgb) {\n  for (let i = 0; i \u003c 2; i++) {\n    const x = round(Fd.st[i * 2] - 0.5), y = round(Fd.st[i * 2 + 1] - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    rgb[o] += (1 - rgb[o]) * wgt;\n    rgb[o + 1] += (0.12 - rgb[o + 1]) * wgt;\n    rgb[o + 2] += (0.1 - rgb[o + 2]) * wgt;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cur) return;\n  const { pal, rgb } = P;\n  if (P.palHue !== P.hue) {\n    // Four dyes in turn, so a line can be followed past the wing: gold,\n    // green, blue and pink at Hue 0. The haze is their mean.\n    pal.fill(0, 12);\n    for (let i = 0; i \u003c 4; i++) {\n      hsv(P.hue + 0.12 + i * 0.25, 0.7, 1, pal, i * 3);\n      for (let c = 0; c \u003c 3; c++) pal[12 + c] += pal[i * 3 + c] / 4;\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  if (P.old && P.fade \u003c 1) paint(P, P.old, 1 - P.fade, rgb);\n  const w = P.old && P.fade \u003c 1 ? P.fade : 1;\n  paint(P, P.cur, w, rgb);\n  if (w \u003c 1) marks(P.old, 1 - w, rgb);\n  marks(P.cur, w, rgb);\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) display.setPixel(p % W, floor(p / W), min(255, rgb[o] * 255), min(255, rgb[o + 1] * 255), min(255, rgb[o + 2] * 255));\n}\n","layer":{"id":"layer-joukowsky-airfoil","type":"code","name":"joukowsky-airfoil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Joukowsky Airfoil\n// Family:  physics\n// Idea:    A cambered Joukowsky wing 44 rows long stands in the middle of the panel with the ideal flow running down past it, faint stream lines bending round it, while lines of dye let go across the top row once a second come down, wrap the rounded nose where they split at a red stagnation point, and leave the sharp trailing edge with the half that went over the suction side well ahead of the half that went under, a lead that grows with the angle of attack and is gone when the circulation is taken away.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joukowsky airfoil (Nikolai Zhukovsky, 1910)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12\n//\n// Knob 1: Hue. Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it.\n// Knob 2: Speed. How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten.\n// Knob 3: Attack. The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose.\n// Knob 4: Camber. The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows.\n// Buttons: K1 tap takes the circulation away for 10 s (a second tap gives it back). The flow then turns round the sharp trailing edge from the left, the rear stagnation point leaves the edge and moves up the right side, 0.9 LED at 8 degrees and 2.8 at 15 degrees with 12% camber, and the two halves of every line arrive within 6 rows of each other, the left one now first.\n\n// Ideal flow past a circle in the ζ-plane, carried to flow past an airfoil\n// by z = ζ + c²/ζ. The circle goes through ζ = c, which lands on the sharp\n// trailing edge at z = 2c, and its centre ζ0 = -ε + iδ sits left of the\n// origin for thickness and above it for camber. With U = 1,\n//   W(ζ) = ζ' e^{-iα} + R² e^{iα}/ζ' + (iΓ/2π) log ζ',   ζ' = ζ - ζ0,\n// and the Kutta condition, that the flow leaves the trailing edge smoothly,\n// fixes Γ = 4πR sin(α + β), β the angle of ζ0 seen from c. Lengths are in\n// LEDs: c = 11, so the chord is 44 rows, centred on the panel, and ε =\n// 0.12 c makes the wing 6 LEDs at its thickest, 14% of the chord. The free\n// stream runs down the panel at one LED per unit of time.\nconst W = 64, H = 128, NP = W * H, CX = 32, CY = 64;\nconst C = 11, EPS = 0.12 * C, LAM = 20, DUTY = 2.2 / 20, TMAX = 400, CHUNK = 768, SPACE = 6;\nconst { min, max, floor, round, sqrt, sin, cos, atan2, abs, exp, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// One flow: the circle, the angle of attack and the circulation.\nfunction makeFlow(alphaDeg, camber, kutta) {\n  const a = (alphaDeg * PI) / 180, d = camber * 2 * C;\n  const z0r = -EPS, z0i = d, R = sqrt((C + EPS) ** 2 + d * d), beta = atan2(d, C + EPS);\n  const gam = kutta ? 4 * PI * R * sin(a + beta) : 0;\n  return { a, ca: cos(a), sa: sin(a), z0r, z0i, R, R2: R * R, beta, gam, key: alphaDeg.toFixed(1) + \"/\" + camber.toFixed(3) + \"/\" + kutta };\n}\n\n// The flow at ζ: o[0], o[1] = dζ/dt, o[2] = speed on the panel, o[3] =\n// |dz/dζ|. dζ/dt = conj(dW/dζ) / |dz/dζ|². At the trailing edge dz/dζ is 0;\n// with the Kutta condition dW/dζ is 0 there too and the floor on |dz/dζ|²\n// only keeps 0/0 away, without it the speed there is capped at 6.\nfunction flowAt(F, zr, zi, o) {\n  const pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n  const ir = pr / r2, ii = -pi / r2, i2r = ir * ir - ii * ii, i2i = 2 * ir * ii;\n  const er = F.ca * i2r - F.sa * i2i, ei = F.ca * i2i + F.sa * i2r, g = F.gam / TAU;\n  const wr = F.ca - F.R2 * er - g * ii, wi = -F.sa - F.R2 * ei + g * ir;\n  const q2 = zr * zr + zi * zi, jr = zr / q2, ji = -zi / q2, j2r = jr * jr - ji * ji, j2i = 2 * jr * ji;\n  const dr = 1 - C * C * j2r, di = -C * C * j2i, J2 = max(1e-8, dr * dr + di * di);\n  let sp = sqrt((wr * wr + wi * wi) / J2), k = 1;\n  if (sp > 6) (k = 6 / sp), (sp = 6);\n  o[0] = (k * wr) / J2;\n  o[1] = (-k * wi) / J2;\n  o[2] = sp;\n  o[3] = sqrt(J2);\n}\n\n// ζ to the panel: z = ζ + c²/ζ, turned back by α so the free stream runs\n// down the panel and the suction side faces right. o[0] = X, o[1] = Y.\nfunction toPanel(F, zr, zi, o) {\n  const q2 = zr * zr + zi * zi, xr = zr + (C * C * zr) / q2, xi = zi - (C * C * zi) / q2;\n  o[0] = CX + xi * F.ca - xr * F.sa;\n  o[1] = CY + xr * F.ca + xi * F.sa;\n}\n\n// The panel to ζ: of the two roots of ζ² - zζ + c² = 0, the one outside\n// the circle. o[2] = |ζ'|²; less than R² means the LED is inside the wing.\nfunction toZeta(F, X, Y, o) {\n  const pr = Y - CY, pi = X - CX, zr = pr * F.ca - pi * F.sa, zi = pr * F.sa + pi * F.ca;\n  const wr = zr * zr - zi * zi - 4 * C * C, wi = 2 * zr * zi, m = sqrt(wr * wr + wi * wi);\n  const sr = sqrt(max(0, (m + wr) / 2)), si = (wi \u003c 0 ? -1 : 1) * sqrt(max(0, (m - wr) / 2));\n  const ar = (zr + sr) / 2, ai = (zi + si) / 2, br = (zr - sr) / 2, bi = (zi - si) / 2;\n  const da = (ar - F.z0r) ** 2 + (ai - F.z0i) ** 2, db = (br - F.z0r) ** 2 + (bi - F.z0i) ** 2;\n  if (da >= db) (o[0] = ar), (o[1] = ai), (o[2] = da);\n  else (o[0] = br), (o[1] = bi), (o[2] = db);\n}\n\n// When the fluid at an LED crossed the top row: back along its stream line,\n// in the ζ-plane where the wing is a circle and easy to keep out of, adding\n// up time. Midpoint steps of 0.35 LED by the surface, up to 3 LEDs and 3\n// time units away from it.\nfunction arrival(F, X, Y, f, pos) {\n  toZeta(F, X, Y, f);\n  if (f[2] \u003c F.R2) return -1;\n  let zr = f[0], zi = f[1], T = 0;\n  for (let it = 0; it \u003c 400; it++) {\n    flowAt(F, zr, zi, f);\n    const pr = zr - F.z0r, pi = zi - F.z0i, dist = (sqrt(pr * pr + pi * pi) - F.R) * f[3];\n    const dt = min(cl(0.35 + 0.3 * dist, 0.35, 3) / max(f[2], 1e-6), 3);\n    flowAt(F, zr - 0.5 * dt * f[0], zi - 0.5 * dt * f[1], f);\n    zr -= dt * f[0];\n    zi -= dt * f[1];\n    const qr = zr - F.z0r, qi = zi - F.z0i, q2 = qr * qr + qi * qi;\n    if (q2 \u003c F.R2) {\n      const s = (F.R * 1.0001) / sqrt(q2);\n      zr = F.z0r + qr * s;\n      zi = F.z0i + qi * s;\n    }\n    T += dt;\n    toPanel(F, zr, zi, pos);\n    // Past the top row: give back the part of the step beyond it.\n    if (pos[1] \u003c= 0) return max(0, T + pos[1] / max(0.3, f[2]));\n    if (T > TMAX) return TMAX;\n  }\n  return TMAX;\n}\n\nfunction newField(F) {\n  return { F, T: new Float32Array(NP), G: new Float32Array(NP), psi: new Float32Array(NP), sp: new Float32Array(NP), body: new Float32Array(NP), next: 0, st: [0, 0, 0, 0] };\n}\n\n// Arrival times for LEDs from..to of a field; the rest once they are all in.\nfunction fill(Fd, to) {\n  const { F, T, G, psi, sp, body } = Fd, f = new Float64Array(4), pos = [0, 0];\n  for (let p = Fd.next; p \u003c to; p++) T[p] = arrival(F, (p % W) + 0.5, floor(p / W) + 0.5, f, pos);\n  Fd.next = to;\n  if (to \u003c NP) return false;\n  for (let p = 0; p \u003c NP; p++) {\n    toZeta(F, (p % W) + 0.5, floor(p / W) + 0.5, f);\n    const zr = f[0], zi = f[1], pr = zr - F.z0r, pi = zi - F.z0i, r2 = pr * pr + pi * pi;\n    flowAt(F, zr, zi, f);\n    sp[p] = f[2];\n    // Inside the wing or within half an LED of its edge, by the distance\n    // to the circle stretched by |dz/dζ|.\n    body[p] = cl(0.5 - (sqrt(r2) - F.R) * f[3], 0, 1);\n    // ψ = Im W.\n    psi[p] = pi * F.ca - pr * F.sa + (F.R2 * (F.sa * pr - F.ca * pi)) / r2 + (F.gam / (2 * TAU)) * log(r2);\n  }\n  // How fast the arrival time changes across one LED, from the smaller of\n  // the two one-sided steps, so the jump in the wake behind the trailing\n  // edge does not count as steep.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p], d = (q) => (T[q] \u003c 0 ? 50 : min(50, abs(T[q] - t)));\n      const gx = min(x > 0 ? d(p - 1) : 50, x \u003c W - 1 ? d(p + 1) : 50), gy = min(y > 0 ? d(p - W) : 50, y \u003c H - 1 ? d(p + W) : 50);\n      G[p] = sqrt(gx * gx + gy * gy);\n    }\n  // The two stagnation points, where sin(θ - α) = -Γ / 4πR on the circle.\n  const s0 = cl(-F.gam / (4 * PI * F.R), -1, 1), th = [F.a + Math.asin(s0), F.a + PI - Math.asin(s0)];\n  for (let i = 0; i \u003c 2; i++) {\n    toPanel(F, F.z0r + F.R * cos(th[i]), F.z0i + F.R * sin(th[i]), pos);\n    Fd.st[i * 2] = pos[0];\n    Fd.st[i * 2 + 1] = pos[1];\n  }\n  return true;\n}\n\nexport function setup(params) {\n  params.s = { cur: null, old: null, nxt: null, fade: 1, s: 0, hue: 0, speed: 2, off: 0, pal: new Float32Array(15), palHue: NaN, rgb: new Float32Array(NP * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  // K1 takes the circulation away for 10 s; a second tap gives it back.\n  if (input.btnPressed && input.btnPressed[0]) P.off = P.off > 0 ? 0 : 10;\n  P.off = max(0, P.off - d);\n  const want = makeFlow(cl(k[2], 0, 15), cl(k[3], 0, 0.12), P.off \u003c= 0);\n  if (!P.cur) {\n    P.cur = newField(want);\n    fill(P.cur, NP);\n  } else if (!P.nxt && want.key !== P.cur.F.key) P.nxt = newField(want);\n  // A new flow is worked out 768 LEDs a frame, eleven frames for the panel,\n  // then faded in over 0.4 s; a knob still turning starts the next one.\n  if (P.nxt && fill(P.nxt, min(NP, P.nxt.next + CHUNK))) {\n    P.old = P.cur;\n    P.cur = P.nxt;\n    P.nxt = null;\n    P.fade = 0;\n  }\n  P.fade = min(1, P.fade + d / 0.4);\n  P.s += d * 10 * P.speed;\n}\n\nfunction paint(P, Fd, wgt, rgb) {\n  const { T, G, psi, sp, body } = Fd, pal = P.pal;\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) {\n    let r = 0.012, g = 0.016, b = 0.05;\n    // Stream lines every 6 units of ψ, about one LED wide wherever they are.\n    const u = psi[p] / SPACE, du = (abs(u - round(u)) * SPACE) / max(0.05, sp[p]), sl = 0.15 * exp(-2 * du * du);\n    r += sl * 0.45;\n    g += sl * 0.55;\n    b += sl * 0.8;\n    const t = T[p];\n    if (t >= 0) {\n      // The dye: a puff across the top row every 20 time units, lasting 2.2\n      // of them, so in the free stream a line 2.2 LEDs thick. Where the flow\n      // slows the lines crowd and thin; a line thinner than 1.6 LEDs is drawn\n      // 1.6 wide and dimmer, and where they come closer than 4 LEDs they\n      // merge into the haze they would make, 2.2/20 of full.\n      const ph = (P.s - t) / LAM - DUTY / 2, kk = round(ph), per = LAM / max(0.02, G[p]);\n      const wpx = DUTY * per, hw = max(0.8, wpx / 2), dpx = abs(ph - kk) * per;\n      const line = cl(hw + 0.5 - dpx, 0, 1) * min(1, wpx / (2 * hw)), mix = cl((per - 4) / 4, 0, 1);\n      const c = (((kk % 4) + 4) % 4) * 3, dye = line * mix, haze = DUTY * (1 - mix);\n      r += dye * pal[c] + haze * pal[12];\n      g += dye * pal[c + 1] + haze * pal[13];\n      b += dye * pal[c + 2] + haze * pal[14];\n    }\n    const bo = body[p];\n    r += (0.82 - r) * bo;\n    g += (0.84 - g) * bo;\n    b += (0.9 - b) * bo;\n    rgb[o] += wgt * r;\n    rgb[o + 1] += wgt * g;\n    rgb[o + 2] += wgt * b;\n  }\n}\n\n// The two stagnation points, a red LED each on the wing's edge.\nfunction marks(Fd, wgt, rgb) {\n  for (let i = 0; i \u003c 2; i++) {\n    const x = round(Fd.st[i * 2] - 0.5), y = round(Fd.st[i * 2 + 1] - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    rgb[o] += (1 - rgb[o]) * wgt;\n    rgb[o + 1] += (0.12 - rgb[o + 1]) * wgt;\n    rgb[o + 2] += (0.1 - rgb[o + 2]) * wgt;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cur) return;\n  const { pal, rgb } = P;\n  if (P.palHue !== P.hue) {\n    // Four dyes in turn, so a line can be followed past the wing: gold,\n    // green, blue and pink at Hue 0. The haze is their mean.\n    pal.fill(0, 12);\n    for (let i = 0; i \u003c 4; i++) {\n      hsv(P.hue + 0.12 + i * 0.25, 0.7, 1, pal, i * 3);\n      for (let c = 0; c \u003c 3; c++) pal[12 + c] += pal[i * 3 + c] / 4;\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  if (P.old && P.fade \u003c 1) paint(P, P.old, 1 - P.fade, rgb);\n  const w = P.old && P.fade \u003c 1 ? P.fade : 1;\n  paint(P, P.cur, w, rgb);\n  if (w \u003c 1) marks(P.old, 1 - w, rgb);\n  marks(P.cur, w, rgb);\n  for (let p = 0, o = 0; p \u003c NP; p++, o += 3) display.setPixel(p % W, floor(p / W), min(255, rgb[o] * 255), min(255, rgb[o + 1] * 255), min(255, rgb[o + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Attack=0..15, Camber=0..0.12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four dyes round the wheel together. At 0 the lines come gold, green, blue and pink in turn, so one line can be followed past the wing and its two halves matched below it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the free stream runs down the panel: 10 LEDs a second times the knob. At 2 a line crosses the 128 rows in 6.4 s and a new one leaves the top row every second; at 0.2 every ten."},{"name":"Attack","min":0,"max":15,"about":"The angle of attack, 0 to 15 degrees; the nose tips right into the stream. With Camber at 0.06 the half of a line that goes over the right side reaches the trailing edge 12.6 rows ahead of the other half at 0 degrees, 30 rows at 8, 46 at 15, and the front stagnation point slides down the left side of the nose."},{"name":"Camber","min":0,"max":0.12,"about":"The camber of the wing, 0 to 12% of the chord, by lifting the circle's centre. At 0 the wing is symmetric and at 0 degrees the two halves of every line meet again at the trailing edge; at 12% and 15 degrees the lead is 69 rows."}],"start":[0,2,0,0.06],"measures":{"motion":1.8048,"detail":0.0682,"edges":0.3096,"complexity":0.7976,"coverage":0.3578,"colour":0.2135,"drift":0.0573},"knobResponse":[0.061,0.1268,0.1391,0.1409]},{"slug":"kaleidoscope","title":"Kaleidoscope","family":"geometry","round":1,"note":"움직이는 선 세 벌이 유리 한 조각을 자르고 거울이 그 조각을 꽃으로 접어요. 조각 사이에 1 LED 검은 납선이 있어요.","idea":"Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.","buttons":"K1 tap reverses the turn.","code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","layer":{"id":"layer-kaleidoscope","type":"code","name":"kaleidoscope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the glass colours around the colour wheel."},{"name":"Speed","min":0.1,"max":4,"about":"How fast the shards slide and the mirrors turn."},{"name":"Segments","min":6,"max":16,"about":"How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette."},{"name":"Twist","min":-1,"max":1,"about":"Bends the wedges into a spiral, one way below 0 and the other way above."}],"start":[0,2,6,0.06],"measures":{"motion":0.9384,"detail":0.1125,"edges":0.4099,"complexity":1.6131,"coverage":0.5499,"colour":0.359,"drift":0.2217},"knobResponse":[0.1659,0.2298,0.1535,0.1426]},{"slug":"kari-culik","title":"Kari-Culik Tiles","family":"algo","round":35,"note":"카리의 왕 타일 14장이 되풀이 없이 판을 덮어요. 한 줄이 x 를 2 나 2/3 로 곱하는 긴 곱셈이라 위아래 변에는 비티 숫자가 파랑 마름모로, 옆 변에는 올림수가 초록이나 보라에서 금색까지의 마름모로 이어져요. K3 은 맨 윗줄의 x 를 바꿔 다른 타일링을 깔고, K1 을 누르면 3초 동안 타일이 4분의 1 칸씩 떨어져 한 장씩 보여요.","idea":"Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.","buttons":"K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.","code":"// ===== Patternflow pattern =====\n// Title:   Kari-Culik Tiles\n// Family:  algo\n// Idea:    Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aperiodic Wang tiles from Beatty sequences (Jarkko Kari, 1996; Karel Culik II, 1996), Kari's set of 14, pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3.\n// Knob 2: Speed. How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s.\n// Knob 3: Start. The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles.\n// Knob 4: Size. Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8.\n// Buttons: K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.\n\n// The rule behind the tiles. Write x by its Beatty digits\n// a_n = floor((n + 1) x) - floor(n x), n over all the integers. A tile in a\n// row that multiplies by q has a_n(x) on top, a_n(qx) underneath, the carry\n// s_n = q floor(n x) - floor(n q x) on its left and s_(n+1) on its right, and\n// q a_n + s_n = b_n + s_(n+1) holds for each one, so the row is a long\n// multiplication done digit by digit. Rows stack with x_(i+1) = T(x_i),\n// 2x on [2/3, 1) and 2x/3 on [1, 2); T maps [2/3, 2) onto itself one to one,\n// so the rows can run either way. Kari states T on [1/2, 2], but [1/2, 2/3)\n// has nothing above it, and a tiling that scrolls up for ever lives in\n// [2/3, 2). No product of 2s and 2/3s is 1, so no row ever comes back.\n//\n// Counted over 5,400 rows from nine starts and 800 columns each, with exact\n// arithmetic and the identity checked on every tile, the rows use exactly 14\n// tiles, Kari's set: 4 that multiply by 2 and 10 by 2/3. The same count over\n// Culik's rows (3x on [1/3, 2/3), x/2 on [2/3, 2)) gives 12, one of them the\n// tile with 0 on all four edges, which covers the plane by itself. An\n// aperiodic set cannot hold such a tile, so Culik's 13 are not this plain\n// count, and the picture uses Kari's.\n//\n// In the log of x, T is a turn by log 2 round a circle log 3 long, so the\n// kinds of row follow a Sturmian word: a times-2 row (37%, log 1.5 / log 3\n// of them) is never next to another, and one or two times-2/3 rows lie\n// between them.\n\nconst W = 64, H = 128;\nconst { floor, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst Z = BigInt(0), ONE = BigInt(1), TWO = BigInt(2), THREE = BigInt(3), FOUR = BigInt(4);\n// Start = 0 lands on the square root of 2.\nconst START = 0.5606601717798213;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each row keeps x as an exact fraction p/q of BigInts. With floats the\n// product drifts off the true 2x/3 in its last bit, and a test run that way\n// turned up tiles with a carry of 1, which no row can have. The fractions\n// grow by a bit a row: 10,000 rows up, seven hours at Speed 2, they are\n// 10,053 bits long and one floor(n x) takes 9 microseconds.\nfunction floorDiv(n, p, q) {\n  const v = BigInt(n) * p;\n  let d = v / q;\n  if (v \u003c Z && d * q !== v) d -= ONE;\n  return Number(d);\n}\n\nfunction reduce(r) {\n  while ((r.p & ONE) === Z && (r.q & ONE) === Z) (r.p >>= ONE), (r.q >>= ONE);\n  while (r.p % THREE === Z && r.q % THREE === Z) (r.p /= THREE), (r.q /= THREE);\n  // kind 0 multiplies by 2 (x \u003c 1), kind 1 by 2/3.\n  r.kind = r.p \u003c r.q ? 0 : 1;\n  r.F = new Map();\n  return r;\n}\nconst forward = (r) => reduce({ p: TWO * r.p, q: r.kind === 0 ? r.q : THREE * r.q });\n// The row above: y/2 when y is 4/3 or more (it came from a times-2 row),\n// 3y/2 below that (from a times-2/3 row).\nconst backward = (r) => reduce({ p: THREE * r.p >= FOUR * r.q ? r.p : THREE * r.p, q: TWO * r.q });\n\n// floor(n x) for a row, kept per column while the row is on the panel.\nfunction fx(r, n) {\n  let v = r.F.get(n);\n  if (v === undefined) r.F.set(n, (v = floorDiv(n, r.p, r.q)));\n  return v;\n}\n\n// A new tiling with x at row index `at`. x is a fraction over 2^52, so the\n// top row's digits repeat only after 2^52 columns.\nfunction build(P, u, at) {\n  const x = 2 / 3 + (4 / 3) * ((((u + START) % 1) + 1) % 1);\n  const K = 2 ** 52;\n  P.rows = new Map([[at, reduce({ p: BigInt(round(x * K)), q: BigInt(K) })]]);\n  P.lo = P.hi = at;\n  P.start = u;\n}\n\nfunction row(P, i) {\n  while (i \u003c P.lo) {\n    const r = backward(P.rows.get(P.lo));\n    P.rows.set(--P.lo, r);\n  }\n  while (i > P.hi) {\n    const r = forward(P.rows.get(P.hi));\n    P.rows.set(++P.hi, r);\n  }\n  return P.rows.get(i);\n}\n\n// Which part of a D x D tile each pixel shows: 0 top, 1 right, 2 bottom,\n// 3 left, or 4 for a pixel on a diagonal, left dark so the triangles stay\n// apart. Two triangles that meet across a tile edge always carry the same\n// label, so the dark diagonals are all that is seen of the tile grid. A\n// lifted tile stands alone in its gap and needs no seams: its diagonal\n// pixels go to the top and bottom triangles.\nfunction triangles(D, seams) {\n  const t = new Uint8Array(D * D);\n  for (let v = 0; v \u003c D; v++)\n    for (let u = 0; u \u003c D; u++) {\n      const dT = v, dB = D - 1 - v, dL = u, dR = D - 1 - u, m = min(dT, dB, dL, dR);\n      const ties = (dT === m) + (dB === m) + (dL === m) + (dR === m);\n      t[v * D + u] = seams && ties > 1 ? 4 : dT === m ? 0 : dB === m ? 2 : dR === m ? 1 : 3;\n    }\n  return t;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, size: 8, scroll: 0, pan: 0, lift: 0, liftT: -1,\n    pal: new Float32Array(9 * 3), palHue: NaN, tri: new Map(), lab: new Int8Array(4),\n  };\n  build(params.s, 0, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 8], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = 2 * round(cl(k[3], 8, 16) / 2);\n  // A turn of Start puts its x on the top row showing now, and the rest of\n  // the tiling grows from there.\n  const u = cl(k[2], 0, 1);\n  if (u !== P.start) build(P, u, floor(-floor(P.scroll) / P.size));\n  P.scroll += d * P.speed * 1.5;\n  P.pan += d * P.speed * 0.5;\n  if (input.btnPressed && input.btnPressed[0]) P.liftT = 0;\n  if (P.liftT >= 0) {\n    P.liftT += d;\n    const t = P.liftT;\n    P.lift = t \u003c 0.5 ? sm(t / 0.5) : t \u003c 3.5 ? 1 : sm((4 - t) / 0.5);\n    if (t >= 4) (P.liftT = -1), (P.lift = 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const S = P.size, pal = P.pal, lab = P.lab;\n  if (P.palHue !== P.hue) {\n    // Labels 0-2 are the digits, a ramp in one blue; 3-4 the carries 0 and\n    // -1 of the times-2 rows; 5-8 the carries -1/3, 0, 1/3, 2/3 of the\n    // times-2/3 rows. Where the hue knob turns the blues to red, orange or\n    // yellow the dark digits are laid lighter, as a dim orange reads brown.\n    const c = [\n      [0.62, 0.85, 0.45], [0.58, 0.62, 0.78], [0.53, 0.22, 1],\n      [0.25, 0.8, 1], [0.45, 0.7, 0.9],\n      [0.78, 0.7, 1], [0.92, 0.62, 1], [0.04, 0.72, 1], [0.12, 0.6, 1],\n    ];\n    for (let j = 0; j \u003c 9; j++) {\n      let [h, s, v] = c[j];\n      h += P.hue;\n      const hh = h - floor(h) > 0.9 ? h - floor(h) - 1 : h - floor(h), warm = sm((hh + 0.04) / 0.08) * sm((0.24 - hh) / 0.06);\n      if (j \u003c 2) (v += (0.85 - v) * warm), (s *= 1 - 0.25 * warm);\n      hsv(h, s, v, pal, j * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The lift opens a gap of up to a quarter tile, in whole LEDs, and draws\n  // each tile that much smaller in the middle of its cell.\n  const gap = round(P.lift * (S / 4)), D = S - gap, off = gap >> 1;\n  const key = 2 * D + (gap === 0 ? 1 : 0);\n  let tri = P.tri.get(key);\n  if (!tri) P.tri.set(key, (tri = triangles(D, gap === 0)));\n  const sy = floor(P.scroll), sx = floor(P.pan);\n  const i0 = floor(-sy / S), i1 = floor((H - 1 - sy) / S);\n  const n0 = floor(sx / S), n1 = floor((W - 1 + sx) / S);\n  for (let i = i0; i \u003c= i1; i++) {\n    const r = row(P, i), r2 = row(P, i + 1);\n    for (let n = n0; n \u003c= n1; n++) {\n      const f0 = fx(r, n), f1 = fx(r, n + 1), g0 = fx(r2, n), g1 = fx(r2, n + 1);\n      lab[0] = f1 - f0;\n      lab[2] = g1 - g0;\n      // Left and right carries: s = 2 floor(nx) - floor(2nx) is 0 or -1;\n      // 3s = 2 floor(nx) - 3 floor(2nx/3) is -1, 0, 1 or 2.\n      if (r.kind === 0) (lab[3] = 3 + g0 - 2 * f0), (lab[1] = 3 + g1 - 2 * f1);\n      else (lab[3] = 6 + 2 * f0 - 3 * g0), (lab[1] = 6 + 2 * f1 - 3 * g1);\n      const X0 = n * S - sx, Y0 = i * S + sy;\n      for (let v = 0; v \u003c S; v++) {\n        const Y = Y0 + v;\n        if (Y \u003c 0 || Y >= H) continue;\n        const tv = v - off;\n        for (let u = 0; u \u003c S; u++) {\n          const X = X0 + u;\n          if (X \u003c 0 || X >= W) continue;\n          const tu = u - off;\n          const t = tv \u003c 0 || tu \u003c 0 || tv >= D || tu >= D ? 4 : tri[tv * D + tu];\n          if (t === 4) {\n            display.setPixel(X, Y, 0, 0, 0);\n            continue;\n          }\n          const o = lab[t] * 3;\n          display.setPixel(X, Y, pal[o] * 255, pal[o + 1] * 255, pal[o + 2] * 255);\n        }\n      }\n    }\n  }\n  // Rows that have slid off the bottom are let go; the panel only ever\n  // needs the rows from i0 down to i1 + 1.\n  while (P.hi > i1 + 2) P.rows.delete(P.hi--);\n}\n","layer":{"id":"layer-kari-culik","type":"code","name":"kari-culik","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kari-Culik Tiles\n// Family:  algo\n// Idea:    Kari's fourteen Wang tiles cover the panel without ever repeating: each row of tiles multiplies a real number x by 2 or by 2/3, its top edges spelling x as a Beatty sequence of digits and its bottom edges the product, the carries passing sideways from tile to tile, and every tile is drawn as four triangles so the matching edges join into diamonds, blue for digits and warm or green for carries, while the tiling scrolls down through new rows reached by running the multiplication backwards.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aperiodic Wang tiles from Beatty sequences (Jarkko Kari, 1996; Karel Culik II, 1996), Kari's set of 14, pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3.\n// Knob 2: Speed. How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s.\n// Knob 3: Start. The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles.\n// Knob 4: Size. Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8.\n// Buttons: K1 tap lifts the tiles apart for three seconds, a gap of a quarter tile, so each one stands alone with its four triangles, then sets them back edge to edge.\n\n// The rule behind the tiles. Write x by its Beatty digits\n// a_n = floor((n + 1) x) - floor(n x), n over all the integers. A tile in a\n// row that multiplies by q has a_n(x) on top, a_n(qx) underneath, the carry\n// s_n = q floor(n x) - floor(n q x) on its left and s_(n+1) on its right, and\n// q a_n + s_n = b_n + s_(n+1) holds for each one, so the row is a long\n// multiplication done digit by digit. Rows stack with x_(i+1) = T(x_i),\n// 2x on [2/3, 1) and 2x/3 on [1, 2); T maps [2/3, 2) onto itself one to one,\n// so the rows can run either way. Kari states T on [1/2, 2], but [1/2, 2/3)\n// has nothing above it, and a tiling that scrolls up for ever lives in\n// [2/3, 2). No product of 2s and 2/3s is 1, so no row ever comes back.\n//\n// Counted over 5,400 rows from nine starts and 800 columns each, with exact\n// arithmetic and the identity checked on every tile, the rows use exactly 14\n// tiles, Kari's set: 4 that multiply by 2 and 10 by 2/3. The same count over\n// Culik's rows (3x on [1/3, 2/3), x/2 on [2/3, 2)) gives 12, one of them the\n// tile with 0 on all four edges, which covers the plane by itself. An\n// aperiodic set cannot hold such a tile, so Culik's 13 are not this plain\n// count, and the picture uses Kari's.\n//\n// In the log of x, T is a turn by log 2 round a circle log 3 long, so the\n// kinds of row follow a Sturmian word: a times-2 row (37%, log 1.5 / log 3\n// of them) is never next to another, and one or two times-2/3 rows lie\n// between them.\n\nconst W = 64, H = 128;\nconst { floor, min, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst Z = BigInt(0), ONE = BigInt(1), TWO = BigInt(2), THREE = BigInt(3), FOUR = BigInt(4);\n// Start = 0 lands on the square root of 2.\nconst START = 0.5606601717798213;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each row keeps x as an exact fraction p/q of BigInts. With floats the\n// product drifts off the true 2x/3 in its last bit, and a test run that way\n// turned up tiles with a carry of 1, which no row can have. The fractions\n// grow by a bit a row: 10,000 rows up, seven hours at Speed 2, they are\n// 10,053 bits long and one floor(n x) takes 9 microseconds.\nfunction floorDiv(n, p, q) {\n  const v = BigInt(n) * p;\n  let d = v / q;\n  if (v \u003c Z && d * q !== v) d -= ONE;\n  return Number(d);\n}\n\nfunction reduce(r) {\n  while ((r.p & ONE) === Z && (r.q & ONE) === Z) (r.p >>= ONE), (r.q >>= ONE);\n  while (r.p % THREE === Z && r.q % THREE === Z) (r.p /= THREE), (r.q /= THREE);\n  // kind 0 multiplies by 2 (x \u003c 1), kind 1 by 2/3.\n  r.kind = r.p \u003c r.q ? 0 : 1;\n  r.F = new Map();\n  return r;\n}\nconst forward = (r) => reduce({ p: TWO * r.p, q: r.kind === 0 ? r.q : THREE * r.q });\n// The row above: y/2 when y is 4/3 or more (it came from a times-2 row),\n// 3y/2 below that (from a times-2/3 row).\nconst backward = (r) => reduce({ p: THREE * r.p >= FOUR * r.q ? r.p : THREE * r.p, q: TWO * r.q });\n\n// floor(n x) for a row, kept per column while the row is on the panel.\nfunction fx(r, n) {\n  let v = r.F.get(n);\n  if (v === undefined) r.F.set(n, (v = floorDiv(n, r.p, r.q)));\n  return v;\n}\n\n// A new tiling with x at row index `at`. x is a fraction over 2^52, so the\n// top row's digits repeat only after 2^52 columns.\nfunction build(P, u, at) {\n  const x = 2 / 3 + (4 / 3) * ((((u + START) % 1) + 1) % 1);\n  const K = 2 ** 52;\n  P.rows = new Map([[at, reduce({ p: BigInt(round(x * K)), q: BigInt(K) })]]);\n  P.lo = P.hi = at;\n  P.start = u;\n}\n\nfunction row(P, i) {\n  while (i \u003c P.lo) {\n    const r = backward(P.rows.get(P.lo));\n    P.rows.set(--P.lo, r);\n  }\n  while (i > P.hi) {\n    const r = forward(P.rows.get(P.hi));\n    P.rows.set(++P.hi, r);\n  }\n  return P.rows.get(i);\n}\n\n// Which part of a D x D tile each pixel shows: 0 top, 1 right, 2 bottom,\n// 3 left, or 4 for a pixel on a diagonal, left dark so the triangles stay\n// apart. Two triangles that meet across a tile edge always carry the same\n// label, so the dark diagonals are all that is seen of the tile grid. A\n// lifted tile stands alone in its gap and needs no seams: its diagonal\n// pixels go to the top and bottom triangles.\nfunction triangles(D, seams) {\n  const t = new Uint8Array(D * D);\n  for (let v = 0; v \u003c D; v++)\n    for (let u = 0; u \u003c D; u++) {\n      const dT = v, dB = D - 1 - v, dL = u, dR = D - 1 - u, m = min(dT, dB, dL, dR);\n      const ties = (dT === m) + (dB === m) + (dL === m) + (dR === m);\n      t[v * D + u] = seams && ties > 1 ? 4 : dT === m ? 0 : dB === m ? 2 : dR === m ? 1 : 3;\n    }\n  return t;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, size: 8, scroll: 0, pan: 0, lift: 0, liftT: -1,\n    pal: new Float32Array(9 * 3), palHue: NaN, tri: new Map(), lab: new Int8Array(4),\n  };\n  build(params.s, 0, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 8], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = 2 * round(cl(k[3], 8, 16) / 2);\n  // A turn of Start puts its x on the top row showing now, and the rest of\n  // the tiling grows from there.\n  const u = cl(k[2], 0, 1);\n  if (u !== P.start) build(P, u, floor(-floor(P.scroll) / P.size));\n  P.scroll += d * P.speed * 1.5;\n  P.pan += d * P.speed * 0.5;\n  if (input.btnPressed && input.btnPressed[0]) P.liftT = 0;\n  if (P.liftT >= 0) {\n    P.liftT += d;\n    const t = P.liftT;\n    P.lift = t \u003c 0.5 ? sm(t / 0.5) : t \u003c 3.5 ? 1 : sm((4 - t) / 0.5);\n    if (t >= 4) (P.liftT = -1), (P.lift = 0);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const S = P.size, pal = P.pal, lab = P.lab;\n  if (P.palHue !== P.hue) {\n    // Labels 0-2 are the digits, a ramp in one blue; 3-4 the carries 0 and\n    // -1 of the times-2 rows; 5-8 the carries -1/3, 0, 1/3, 2/3 of the\n    // times-2/3 rows. Where the hue knob turns the blues to red, orange or\n    // yellow the dark digits are laid lighter, as a dim orange reads brown.\n    const c = [\n      [0.62, 0.85, 0.45], [0.58, 0.62, 0.78], [0.53, 0.22, 1],\n      [0.25, 0.8, 1], [0.45, 0.7, 0.9],\n      [0.78, 0.7, 1], [0.92, 0.62, 1], [0.04, 0.72, 1], [0.12, 0.6, 1],\n    ];\n    for (let j = 0; j \u003c 9; j++) {\n      let [h, s, v] = c[j];\n      h += P.hue;\n      const hh = h - floor(h) > 0.9 ? h - floor(h) - 1 : h - floor(h), warm = sm((hh + 0.04) / 0.08) * sm((0.24 - hh) / 0.06);\n      if (j \u003c 2) (v += (0.85 - v) * warm), (s *= 1 - 0.25 * warm);\n      hsv(h, s, v, pal, j * 3);\n    }\n    P.palHue = P.hue;\n  }\n  // The lift opens a gap of up to a quarter tile, in whole LEDs, and draws\n  // each tile that much smaller in the middle of its cell.\n  const gap = round(P.lift * (S / 4)), D = S - gap, off = gap >> 1;\n  const key = 2 * D + (gap === 0 ? 1 : 0);\n  let tri = P.tri.get(key);\n  if (!tri) P.tri.set(key, (tri = triangles(D, gap === 0)));\n  const sy = floor(P.scroll), sx = floor(P.pan);\n  const i0 = floor(-sy / S), i1 = floor((H - 1 - sy) / S);\n  const n0 = floor(sx / S), n1 = floor((W - 1 + sx) / S);\n  for (let i = i0; i \u003c= i1; i++) {\n    const r = row(P, i), r2 = row(P, i + 1);\n    for (let n = n0; n \u003c= n1; n++) {\n      const f0 = fx(r, n), f1 = fx(r, n + 1), g0 = fx(r2, n), g1 = fx(r2, n + 1);\n      lab[0] = f1 - f0;\n      lab[2] = g1 - g0;\n      // Left and right carries: s = 2 floor(nx) - floor(2nx) is 0 or -1;\n      // 3s = 2 floor(nx) - 3 floor(2nx/3) is -1, 0, 1 or 2.\n      if (r.kind === 0) (lab[3] = 3 + g0 - 2 * f0), (lab[1] = 3 + g1 - 2 * f1);\n      else (lab[3] = 6 + 2 * f0 - 3 * g0), (lab[1] = 6 + 2 * f1 - 3 * g1);\n      const X0 = n * S - sx, Y0 = i * S + sy;\n      for (let v = 0; v \u003c S; v++) {\n        const Y = Y0 + v;\n        if (Y \u003c 0 || Y >= H) continue;\n        const tv = v - off;\n        for (let u = 0; u \u003c S; u++) {\n          const X = X0 + u;\n          if (X \u003c 0 || X >= W) continue;\n          const tu = u - off;\n          const t = tv \u003c 0 || tu \u003c 0 || tv >= D || tu >= D ? 4 : tri[tv * D + tu];\n          if (t === 4) {\n            display.setPixel(X, Y, 0, 0, 0);\n            continue;\n          }\n          const o = lab[t] * 3;\n          display.setPixel(X, Y, pal[o] * 255, pal[o + 1] * 255, pal[o + 2] * 255);\n        }\n      }\n    }\n  }\n  // Rows that have slid off the bottom are let go; the panel only ever\n  // needs the rows from i0 down to i1 + 1.\n  while (P.hi > i1 + 2) P.rows.delete(P.hi--);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Start=0..1, Size=8..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the digit diamonds are navy for 0, steel blue for 1 and ice for 2; the carries of the times-2 rows are lime for 0 and sea green for -1, and those of the times-2/3 rows run violet, rose, orange and gold for -1/3, 0, 1/3 and 2/3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the tiling slides: down 1.5 LEDs a second per unit and sideways 0.5, so at 2 a new row of 8-LED tiles comes in at the top every 2.7 s, and at 0.2 every 27 s."},{"name":"Start","min":0,"max":1,"about":"The number x of the top row when the knob was last turned, anywhere in [2/3, 2): at 0 it is the square root of 2, and every other setting is a different tiling by the same 14 tiles."},{"name":"Size","min":8,"max":16,"about":"Tile width in LEDs, in even steps: 8 gives 8 columns of 16 rows, 16 gives 4 columns of 8."}],"start":[0,2,0,8],"measures":{"motion":1.0596,"detail":0.333,"edges":1,"complexity":0.1114,"coverage":0.75,"colour":0.4775,"drift":0.0797},"knobResponse":[0.3661,0.4609,0.2299,0.3929]},{"slug":"karman-street","title":"Kármán Street","family":"sim","round":37,"note":"반대로 도는 점 소용돌이 두 줄이 반 간격씩 어긋난 채 128줄을 위에서 아래로 흘러가요. 왼쪽 줄은 아쿠아, 오른쪽 줄은 장밋빛 염료를 감아 나선을 만들고, 두 줄 사이 거리와 간격의 비가 폰 카르만의 0.2806 이면 거리가 버티며 두 염료가 금색으로 바뀌어요. 처음 비 0.34 에서는 보이지 않던 흔들림이 12~24초 만에 자라 소용돌이가 짝을 지어 흩어지고, 그 뒤에 새 거리가 깔려요. K4 는 그 비를 0.13 에서 0.53 까지 옮기고, 누르면 새 거리를 바로 깔아요.","idea":"Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.","buttons":"K1 tap lays a fresh street at once, with a new small wobble.","code":"// ===== Patternflow pattern =====\n// Title:   Kármán Street\n// Family:  sim\n// Idea:    Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kármán vortex street and its stability (Theodore von Kármán, 1911), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25\n//\n// Knob 1: Hue. Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose.\n// Knob 2: Speed. How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower.\n// Knob 3: Vortices. Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it.\n// Knob 4: Offset. The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides.\n// Buttons: K1 tap lays a fresh street at once, with a new small wobble.\n\n// Each vortex is a whole row of copies 128 rows apart, so the panel is one\n// period top to bottom. A vertical row of vortices of circulation G spaced L\n// has the complex velocity -(i G / 2L) coth(pi (z - z0) / L), which in x and\n// y is the kernel in velAt() below. The row of n vortices spaced a = 128 / n is\n// the same sum as von Kármán's infinite row, so with the columns h apart and\n// staggered by a / 2 the street moves as one at (G / 2a) tanh(pi h / a).\n//\n// Growth of a random wobble of 1e-7 a, with G = a, measured as the slope of\n// ln(wobble) in a 600 s run (per second):\n//   h/a      0.13   0.20   0.25   0.2806  0.31   0.34   0.45   0.53\n//   n = 4   0.016  0.0076 0.0009 -0.001  0.0012 0.0054 0.014  0.017\n//   n = 8   0.031  0.0175 0.0041  0.001  0.0057 0.0117 0.028  0.034\n// At 0.2806 it stays inside +-0.0013, which is the measuring noise: the\n// street is neutrally stable there. The more vortices a period holds, the\n// narrower the nearly stable band round it, because a period of n allows\n// only wobbles whose phase steps by a multiple of 2 pi / n from one vortex\n// to the next; with 3 a column h/a = 0.34 grows at 0.0017, a third of the\n// rate with 4, which is why Vortices starts at 4. The pattern runs at\n// G = 30 a, so at 0.34 with 4 a column the wobble grows e-fold every 6 s\n// and at 0.2 every 4.4 s. Laid with a 5% wobble, the street at 0.34 came\n// apart (one vortex 0.3 a off its column) after 11.5 to 24 s, median 15.5,\n// over 34 streets in three four-minute runs, and at the two ends of the\n// knob after 3 to 7 s; at 0.2806 it lasted 106 to 237 s in five runs, as a\n// wobble that size is no longer small and grows on its own terms.\n\nconst W = 64, H = 128, N = W * H, L = 128, K = (2 * Math.PI) / L;\nconst { floor, min, max, exp, sin, cos, tanh, abs, PI } = Math;\nconst random = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// von Kármán's ratio: cosh(pi h / a) = sqrt 2.\nconst STABLE = Math.log(Math.SQRT2 + 1) / PI;\nconst NT = 3600, MAXV = 16;\n// Circulation per LED of spacing, the wobble a fresh street is laid with\n// (as a share of a), the speed the street is shown sliding down, and the\n// seconds between two lines of dye from one vortex.\nconst GAM = 30, EPS = 0.05, VSHOW = 5, PULSE = 2.4;\n// Dye cores: a tracer within RC of a vortex goes round as a solid body.\nconst RCF = 0.09;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  const S = (params.s = {\n    hue: 0, speed: 2, n: 4, ratio: STABLE + 0.06, want: [4, STABLE + 0.06], pend: 0,\n    vx: D(MAXV), vy: D(MAXV), vg: D(MAXV), x0: D(MAXV), m: 0, a: 32, wy: 0,\n    // Stage positions of the vortices and their precomputed exp and trig.\n    sx: D(MAXV * 4), sy: D(MAXV * 4), ex: D(MAXV * 4), ix: D(MAXV * 4), cy: D(MAXV * 4), sn: D(MAXV * 4),\n    kv: D(MAXV * 8),\n    tx: F(NT), ty: F(NT), age: F(NT), pt: D(MAXV), pp: new Uint8Array(MAXV),\n    kx: F(NT * 4), ky: F(NT * 4),\n    A: F(N), B: F(N), T: F(N), col: F(6),\n    broken: 0, fade: 1, out: 0, warm: false,\n  });\n  lay(S, 4, STABLE + 0.06);\n}\n\nfunction lay(S, n, ratio) {\n  const a = L / n, h = ratio * a, G = GAM * a;\n  S.n = n;\n  S.ratio = ratio;\n  S.a = a;\n  S.m = 2 * n;\n  // The left column spins one way and the right one the other, the way a\n  // wake's shear layers roll up, so on its own the street would climb at U\n  // through still water. The water is given a downward flow of VSHOW + U, so\n  // the street slides down at VSHOW and the dye that leaves it streams down\n  // faster between the vortices.\n  const U = (G / (2 * a)) * tanh((PI * h) / a);\n  S.wy = VSHOW + U;\n  const y0 = random() * a;\n  for (let i = 0; i \u003c n; i++) {\n    S.vx[i] = 32 - h / 2;\n    S.vy[i] = y0 + i * a;\n    S.vg[i] = -G;\n    S.vx[n + i] = 32 + h / 2;\n    S.vy[n + i] = y0 + i * a + a / 2;\n    S.vg[n + i] = G;\n  }\n  // The wobble: each vortex moved up to EPS a either way, then each\n  // column's mean move taken out again. A column shifted as a whole along\n  // the street breaks the half-spacing stagger, and then both columns push\n  // each other the same way sideways: the street drifted 8 LEDs off centre\n  // in 20 s before this.\n  for (let i = 0; i \u003c 2 * n; i++) {\n    S.x0[i] = S.vx[i];\n    S.kv[2 * i] = (random() - 0.5) * 2 * EPS * a;\n    S.kv[2 * i + 1] = (random() - 0.5) * 2 * EPS * a;\n  }\n  for (let c = 0; c \u003c 2; c++) {\n    let mx = 0, my = 0;\n    for (let i = c * n; i \u003c c * n + n; i++) (mx += S.kv[2 * i]), (my += S.kv[2 * i + 1]);\n    for (let i = c * n; i \u003c c * n + n; i++) {\n      S.vx[i] += S.kv[2 * i] - mx / n;\n      S.vy[i] += S.kv[2 * i + 1] - my / n;\n    }\n  }\n  // No dye yet; the vortices start dropping it at staggered moments.\n  S.age.fill(-1);\n  for (let p = 0; p \u003c S.m; p++) S.pt[p] = PULSE * (((p * 0.618) % 1) * 0.8 + 0.2 * random());\n  S.broken = 0;\n}\n\n// Every PULSE seconds a vortex drops a straight line of dye across its core,\n// alternating between two sets of tracers, so each set lives two pulses.\n// A continuous drip was tried first: in a steady swirl every radius then\n// fills its whole ring and the core reads as a speckled disc. A line laid\n// at once winds into a spiral, the inside turning faster than the outside.\nfunction pulse(S, p) {\n  const m = S.m, per = floor(NT / m), C = per >> 1, par = (S.pp[p] ^= 1), R = 0.56 * S.a;\n  const th = (random() - 0.5) * 0.6, c = cos(th), s = sin(th);\n  for (let j = par; j \u003c 2 * C; j += 2) {\n    const i = j * m + p, r = R * ((((j >> 1) + 0.5) / C) * 2 - 1);\n    S.tx[i] = S.vx[p] + r * c;\n    S.ty[i] = S.vy[p] + r * s;\n    S.age[i] = 0;\n  }\n}\n\n// Velocity at (x, y) from the vortices of stage s, written to out[o], out[o+1].\n// exp(K (x - xv)) is exp(K x) exp(-K xv) and the angle difference comes from\n// the sum formulas, so a tracer costs one exp, one sin and one cos per stage\n// whatever the number of vortices.\nfunction velAt(S, s, x, y, dl, skip, out, o) {\n  const m = S.m, b = s * MAXV, c2 = 1 / (2 * L);\n  const et = exp(K * x), it = 1 / et, cyt = cos(K * y), syt = sin(K * y);\n  let u = 0, v = 0;\n  for (let i = 0; i \u003c m; i++) {\n    if (i === skip) continue;\n    const j = b + i, E = et * S.ix[j], iE = it * S.ex[j];\n    const cY = cyt * S.cy[j] + syt * S.sn[j], sY = syt * S.cy[j] - cyt * S.sn[j];\n    const q = (S.vg[i] * c2) / (0.5 * (E + iE) - cY + dl);\n    u -= q * sY;\n    v += q * 0.5 * (E - iE);\n  }\n  out[o] = u;\n  out[o + 1] = v + S.wy;\n}\n\nfunction prep(S, s) {\n  for (let i = 0, b = s * MAXV; i \u003c S.m; i++) {\n    const x = S.sx[b + i], y = S.sy[b + i];\n    S.ex[b + i] = exp(K * x);\n    S.ix[b + i] = 1 / S.ex[b + i];\n    S.cy[b + i] = cos(K * y);\n    S.sn[b + i] = sin(K * y);\n  }\n}\n\n// One RK4 step of the vortices and the dye together.\nfunction step(S, h) {\n  const m = S.m, kv = S.kv, kx = S.kx, ky = S.ky;\n  const dv = 0.5 * (K * 0.5) * (K * 0.5), rc = RCF * S.a, dt = 0.5 * (K * rc) * (K * rc);\n  const cf = [0, 0.5, 0.5, 1];\n  for (let s = 0; s \u003c 4; s++) {\n    const b = s * MAXV;\n    for (let i = 0; i \u003c m; i++) {\n      S.sx[b + i] = S.vx[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i] : 0);\n      S.sy[b + i] = S.vy[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i + 1] : 0);\n    }\n    prep(S, s);\n    for (let i = 0; i \u003c m; i++) velAt(S, s, S.sx[b + i], S.sy[b + i], dv, i, kv, s * MAXV * 2 + 2 * i);\n    const tmp = [0, 0];\n    for (let i = 0; i \u003c NT; i++) {\n      if (S.age[i] \u003c 0) continue;\n      const x = S.tx[i] + (s ? cf[s] * h * kx[(s - 1) * NT + i] : 0), y = S.ty[i] + (s ? cf[s] * h * ky[(s - 1) * NT + i] : 0);\n      velAt(S, s, x, y, dt, -1, tmp, 0);\n      kx[s * NT + i] = tmp[0];\n      ky[s * NT + i] = tmp[1];\n    }\n  }\n  for (let i = 0; i \u003c m; i++) {\n    const o = 2 * i, M = MAXV * 2;\n    S.vx[i] += (h / 6) * (kv[o] + 2 * kv[M + o] + 2 * kv[2 * M + o] + kv[3 * M + o]);\n    S.vy[i] += (h / 6) * (kv[o + 1] + 2 * kv[M + o + 1] + 2 * kv[2 * M + o + 1] + kv[3 * M + o + 1]);\n    S.vy[i] -= L * floor(S.vy[i] / L);\n  }\n  for (let i = 0; i \u003c NT; i++) {\n    if (S.age[i] \u003c 0) continue;\n    S.tx[i] += (h / 6) * (kx[i] + 2 * kx[NT + i] + 2 * kx[2 * NT + i] + kx[3 * NT + i]);\n    S.ty[i] += (h / 6) * (ky[i] + 2 * ky[NT + i] + 2 * ky[2 * NT + i] + ky[3 * NT + i]);\n    S.ty[i] -= L * floor(S.ty[i] / L);\n    S.age[i] += h;\n    if (S.age[i] > 2 * PULSE || abs(S.tx[i] - 32) > 70) S.age[i] = -1;\n  }\n  for (let p = 0; p \u003c m; p++) if ((S.pt[p] -= h) \u003c= 0) {\n    S.pt[p] += PULSE;\n    pulse(S, p);\n  }\n}\n\n// How far the street has come apart: the largest sideways move of one\n// vortex from its column, the whole street's sideways drift taken out.\nfunction wobble(S) {\n  let mean = 0, off = 0, dev = 0;\n  for (let i = 0; i \u003c S.m; i++) mean += S.vx[i] - S.x0[i];\n  mean /= S.m;\n  for (let i = 0; i \u003c S.m; i++) {\n    dev = max(dev, abs(S.vx[i] - S.x0[i] - mean));\n    if (S.vx[i] \u003c -8 || S.vx[i] > W + 8) off++;\n  }\n  return [dev / S.a, off];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  const n = floor(cl(k[2], 4, 8) + 0.5), ratio = STABLE + cl(k[3], -0.15, 0.25);\n  if (!S.warm) {\n    S.warm = true;\n    if (n !== S.n || abs(ratio - S.ratio) > 1e-6) lay(S, n, ratio);\n    // Open with six seconds of dye already wound.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n  }\n  // A turned knob lays a new street once it has rested a third of a second.\n  if (n !== S.n || abs(ratio - S.ratio) > 0.004) {\n    if (n !== S.want[0] || abs(ratio - S.want[1]) > 1e-6) {\n      S.want = [n, ratio];\n      S.pend = 0.35;\n    } else if (S.pend > 0 && (S.pend -= d) \u003c= 0 && !S.out) S.out = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.out) S.out = 1;\n  // A core turns at G / (2 pi RC^2) radians a second, 18 with 4 a column\n  // and 37 with 8; a step is kept under 0.7 radian of that, which RK4\n  // carries without the core's dye spiralling in or out.\n  const h = (d * S.speed) / 2;\n  const sub = max(1, Math.ceil(((GAM / (2 * PI * RCF * RCF * S.a)) * h) / 0.7));\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n  const [dev, off] = wobble(S);\n  if (dev > 0.3) S.broken += h;\n  // Broken for 7 s, or half the vortices gone off the sides: lay a new one.\n  if (!S.out && (S.broken > 7 || off >= S.n)) S.out = 1;\n  if (S.out) {\n    S.fade -= d / 0.4;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      S.out = 0;\n      lay(S, n, ratio);\n      S.want = [n, ratio];\n      // Every vortex drops its first line in the 2.4 s run here, while the\n      // panel is dark, so the new street comes up whole.\n      for (let i = 0; i \u003c 72; i++) step(S, 1 / 30);\n    }\n  } else S.fade = min(1, S.fade + d / 0.6);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const A = S.A, B = S.B, T = S.T, col = S.col;\n  A.fill(0);\n  B.fill(0);\n  for (let i = 0; i \u003c NT; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / (2 * PULSE), env = min(1, age / 0.35) * (1 - u) ** 0.7;\n    const buf = i % S.m \u003c S.n ? A : B;\n    const fx = S.tx[i] - 0.5, fy = S.ty[i] - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n    if (ix \u003c -1 || ix >= W) continue;\n    const y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    if (ix >= 0) {\n      buf[y0 * W + ix] += env * (1 - ax) * (1 - ay);\n      buf[y1 * W + ix] += env * (1 - ax) * ay;\n    }\n    if (ix + 1 \u003c W) {\n      buf[y0 * W + ix + 1] += env * ax * (1 - ay);\n      buf[y1 * W + ix + 1] += env * ax * ay;\n    }\n  }\n  blur(A, T);\n  blur(B, T);\n  // Dyes: aqua and rose at Hue 0. Near von Kármán's ratio both turn gold,\n  // the left column deep and the right one pale, the mark of the one street\n  // that holds: full gold within 0.005 of it, half at 0.01.\n  const gd = (S.ratio - STABLE) / 0.012, gold = exp(-gd * gd);\n  const hA = S.hue + 0.5, hB = S.hue + 0.92;\n  const wA = max(warmth(hA), gold), wB = max(warmth(hB), gold);\n  hsv(hA, 0.8 - 0.35 * warmth(hA), 1, col, 0);\n  hsv(hB, 0.62 - 0.25 * warmth(hB), 1, col, 3);\n  const G1 = [1, 0.74, 0.3], G2 = [1, 0.9, 0.62];\n  for (let c = 0; c \u003c 3; c++) {\n    col[c] += (G1[c] - col[c]) * 0.92 * gold;\n    col[3 + c] += (G2[c] - col[3 + c]) * 0.92 * gold;\n  }\n  // Warm dye climbs to full brightness sooner and its faint end is lifted,\n  // so an old spiral of gold reads pale rather than olive.\n  const kA = 0.55 + 0.4 * wA, kB = 0.55 + 0.4 * wB, gA = 1 - 0.35 * wA, gB = 1 - 0.35 * wB, f = S.fade * 255;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const a = (1 - exp(-A[p] * kA)) ** gA, b = (1 - exp(-B[p] * kB)) ** gB, hi = max(0, a + b - 1.1) * 0.6;\n      display.setPixel(x, y, (col[0] * a + col[3] * b + hi) * f, (col[1] * a + col[4] * b + hi) * f, (col[2] * a + col[5] * b + hi) * f);\n    }\n}\n\n// 1 where a hue is orange to yellow-green, which read brown and olive when\n// dim, so there the dye is paler and climbs to full brightness sooner.\nfunction warmth(h) {\n  const t = h - floor(h);\n  return sm(0.0, 0.05, t) * (1 - sm(0.17, 0.24, t));\n}\n\n// [1 2 1] along rows then columns, wrapping top to bottom.\nfunction blur(a, t) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++) t[o + x] = 0.5 * a[o + x] + 0.25 * (a[o + (x > 0 ? x - 1 : x)] + a[o + (x \u003c W - 1 ? x + 1 : x)]);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W, u = ((y + H - 1) % H) * W, dn = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) a[o + x] = 0.5 * t[o + x] + 0.25 * (t[u + x] + t[dn + x]);\n  }\n}\n","layer":{"id":"layer-karman-street","type":"code","name":"karman-street","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kármán Street\n// Family:  sim\n// Idea:    Two columns of point vortices of opposite spin run down the whole panel, staggered half a spacing, each one winding its own colour of dye into a spiral; at von Kármán's ratio of the gap between the columns to the spacing, 0.2806, the street holds, and anywhere else a wobble too small to see grows until the columns roll up and break into pairs that wander off, and a fresh street is laid.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kármán vortex street and its stability (Theodore von Kármán, 1911), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25\n//\n// Knob 1: Hue. Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose.\n// Knob 2: Speed. How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower.\n// Knob 3: Vortices. Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it.\n// Knob 4: Offset. The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides.\n// Buttons: K1 tap lays a fresh street at once, with a new small wobble.\n\n// Each vortex is a whole row of copies 128 rows apart, so the panel is one\n// period top to bottom. A vertical row of vortices of circulation G spaced L\n// has the complex velocity -(i G / 2L) coth(pi (z - z0) / L), which in x and\n// y is the kernel in velAt() below. The row of n vortices spaced a = 128 / n is\n// the same sum as von Kármán's infinite row, so with the columns h apart and\n// staggered by a / 2 the street moves as one at (G / 2a) tanh(pi h / a).\n//\n// Growth of a random wobble of 1e-7 a, with G = a, measured as the slope of\n// ln(wobble) in a 600 s run (per second):\n//   h/a      0.13   0.20   0.25   0.2806  0.31   0.34   0.45   0.53\n//   n = 4   0.016  0.0076 0.0009 -0.001  0.0012 0.0054 0.014  0.017\n//   n = 8   0.031  0.0175 0.0041  0.001  0.0057 0.0117 0.028  0.034\n// At 0.2806 it stays inside +-0.0013, which is the measuring noise: the\n// street is neutrally stable there. The more vortices a period holds, the\n// narrower the nearly stable band round it, because a period of n allows\n// only wobbles whose phase steps by a multiple of 2 pi / n from one vortex\n// to the next; with 3 a column h/a = 0.34 grows at 0.0017, a third of the\n// rate with 4, which is why Vortices starts at 4. The pattern runs at\n// G = 30 a, so at 0.34 with 4 a column the wobble grows e-fold every 6 s\n// and at 0.2 every 4.4 s. Laid with a 5% wobble, the street at 0.34 came\n// apart (one vortex 0.3 a off its column) after 11.5 to 24 s, median 15.5,\n// over 34 streets in three four-minute runs, and at the two ends of the\n// knob after 3 to 7 s; at 0.2806 it lasted 106 to 237 s in five runs, as a\n// wobble that size is no longer small and grows on its own terms.\n\nconst W = 64, H = 128, N = W * H, L = 128, K = (2 * Math.PI) / L;\nconst { floor, min, max, exp, sin, cos, tanh, abs, PI } = Math;\nconst random = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// von Kármán's ratio: cosh(pi h / a) = sqrt 2.\nconst STABLE = Math.log(Math.SQRT2 + 1) / PI;\nconst NT = 3600, MAXV = 16;\n// Circulation per LED of spacing, the wobble a fresh street is laid with\n// (as a share of a), the speed the street is shown sliding down, and the\n// seconds between two lines of dye from one vortex.\nconst GAM = 30, EPS = 0.05, VSHOW = 5, PULSE = 2.4;\n// Dye cores: a tracer within RC of a vortex goes round as a solid body.\nconst RCF = 0.09;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n), D = (n) => new Float64Array(n);\n  const S = (params.s = {\n    hue: 0, speed: 2, n: 4, ratio: STABLE + 0.06, want: [4, STABLE + 0.06], pend: 0,\n    vx: D(MAXV), vy: D(MAXV), vg: D(MAXV), x0: D(MAXV), m: 0, a: 32, wy: 0,\n    // Stage positions of the vortices and their precomputed exp and trig.\n    sx: D(MAXV * 4), sy: D(MAXV * 4), ex: D(MAXV * 4), ix: D(MAXV * 4), cy: D(MAXV * 4), sn: D(MAXV * 4),\n    kv: D(MAXV * 8),\n    tx: F(NT), ty: F(NT), age: F(NT), pt: D(MAXV), pp: new Uint8Array(MAXV),\n    kx: F(NT * 4), ky: F(NT * 4),\n    A: F(N), B: F(N), T: F(N), col: F(6),\n    broken: 0, fade: 1, out: 0, warm: false,\n  });\n  lay(S, 4, STABLE + 0.06);\n}\n\nfunction lay(S, n, ratio) {\n  const a = L / n, h = ratio * a, G = GAM * a;\n  S.n = n;\n  S.ratio = ratio;\n  S.a = a;\n  S.m = 2 * n;\n  // The left column spins one way and the right one the other, the way a\n  // wake's shear layers roll up, so on its own the street would climb at U\n  // through still water. The water is given a downward flow of VSHOW + U, so\n  // the street slides down at VSHOW and the dye that leaves it streams down\n  // faster between the vortices.\n  const U = (G / (2 * a)) * tanh((PI * h) / a);\n  S.wy = VSHOW + U;\n  const y0 = random() * a;\n  for (let i = 0; i \u003c n; i++) {\n    S.vx[i] = 32 - h / 2;\n    S.vy[i] = y0 + i * a;\n    S.vg[i] = -G;\n    S.vx[n + i] = 32 + h / 2;\n    S.vy[n + i] = y0 + i * a + a / 2;\n    S.vg[n + i] = G;\n  }\n  // The wobble: each vortex moved up to EPS a either way, then each\n  // column's mean move taken out again. A column shifted as a whole along\n  // the street breaks the half-spacing stagger, and then both columns push\n  // each other the same way sideways: the street drifted 8 LEDs off centre\n  // in 20 s before this.\n  for (let i = 0; i \u003c 2 * n; i++) {\n    S.x0[i] = S.vx[i];\n    S.kv[2 * i] = (random() - 0.5) * 2 * EPS * a;\n    S.kv[2 * i + 1] = (random() - 0.5) * 2 * EPS * a;\n  }\n  for (let c = 0; c \u003c 2; c++) {\n    let mx = 0, my = 0;\n    for (let i = c * n; i \u003c c * n + n; i++) (mx += S.kv[2 * i]), (my += S.kv[2 * i + 1]);\n    for (let i = c * n; i \u003c c * n + n; i++) {\n      S.vx[i] += S.kv[2 * i] - mx / n;\n      S.vy[i] += S.kv[2 * i + 1] - my / n;\n    }\n  }\n  // No dye yet; the vortices start dropping it at staggered moments.\n  S.age.fill(-1);\n  for (let p = 0; p \u003c S.m; p++) S.pt[p] = PULSE * (((p * 0.618) % 1) * 0.8 + 0.2 * random());\n  S.broken = 0;\n}\n\n// Every PULSE seconds a vortex drops a straight line of dye across its core,\n// alternating between two sets of tracers, so each set lives two pulses.\n// A continuous drip was tried first: in a steady swirl every radius then\n// fills its whole ring and the core reads as a speckled disc. A line laid\n// at once winds into a spiral, the inside turning faster than the outside.\nfunction pulse(S, p) {\n  const m = S.m, per = floor(NT / m), C = per >> 1, par = (S.pp[p] ^= 1), R = 0.56 * S.a;\n  const th = (random() - 0.5) * 0.6, c = cos(th), s = sin(th);\n  for (let j = par; j \u003c 2 * C; j += 2) {\n    const i = j * m + p, r = R * ((((j >> 1) + 0.5) / C) * 2 - 1);\n    S.tx[i] = S.vx[p] + r * c;\n    S.ty[i] = S.vy[p] + r * s;\n    S.age[i] = 0;\n  }\n}\n\n// Velocity at (x, y) from the vortices of stage s, written to out[o], out[o+1].\n// exp(K (x - xv)) is exp(K x) exp(-K xv) and the angle difference comes from\n// the sum formulas, so a tracer costs one exp, one sin and one cos per stage\n// whatever the number of vortices.\nfunction velAt(S, s, x, y, dl, skip, out, o) {\n  const m = S.m, b = s * MAXV, c2 = 1 / (2 * L);\n  const et = exp(K * x), it = 1 / et, cyt = cos(K * y), syt = sin(K * y);\n  let u = 0, v = 0;\n  for (let i = 0; i \u003c m; i++) {\n    if (i === skip) continue;\n    const j = b + i, E = et * S.ix[j], iE = it * S.ex[j];\n    const cY = cyt * S.cy[j] + syt * S.sn[j], sY = syt * S.cy[j] - cyt * S.sn[j];\n    const q = (S.vg[i] * c2) / (0.5 * (E + iE) - cY + dl);\n    u -= q * sY;\n    v += q * 0.5 * (E - iE);\n  }\n  out[o] = u;\n  out[o + 1] = v + S.wy;\n}\n\nfunction prep(S, s) {\n  for (let i = 0, b = s * MAXV; i \u003c S.m; i++) {\n    const x = S.sx[b + i], y = S.sy[b + i];\n    S.ex[b + i] = exp(K * x);\n    S.ix[b + i] = 1 / S.ex[b + i];\n    S.cy[b + i] = cos(K * y);\n    S.sn[b + i] = sin(K * y);\n  }\n}\n\n// One RK4 step of the vortices and the dye together.\nfunction step(S, h) {\n  const m = S.m, kv = S.kv, kx = S.kx, ky = S.ky;\n  const dv = 0.5 * (K * 0.5) * (K * 0.5), rc = RCF * S.a, dt = 0.5 * (K * rc) * (K * rc);\n  const cf = [0, 0.5, 0.5, 1];\n  for (let s = 0; s \u003c 4; s++) {\n    const b = s * MAXV;\n    for (let i = 0; i \u003c m; i++) {\n      S.sx[b + i] = S.vx[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i] : 0);\n      S.sy[b + i] = S.vy[i] + (s ? cf[s] * h * kv[(s - 1) * MAXV * 2 + 2 * i + 1] : 0);\n    }\n    prep(S, s);\n    for (let i = 0; i \u003c m; i++) velAt(S, s, S.sx[b + i], S.sy[b + i], dv, i, kv, s * MAXV * 2 + 2 * i);\n    const tmp = [0, 0];\n    for (let i = 0; i \u003c NT; i++) {\n      if (S.age[i] \u003c 0) continue;\n      const x = S.tx[i] + (s ? cf[s] * h * kx[(s - 1) * NT + i] : 0), y = S.ty[i] + (s ? cf[s] * h * ky[(s - 1) * NT + i] : 0);\n      velAt(S, s, x, y, dt, -1, tmp, 0);\n      kx[s * NT + i] = tmp[0];\n      ky[s * NT + i] = tmp[1];\n    }\n  }\n  for (let i = 0; i \u003c m; i++) {\n    const o = 2 * i, M = MAXV * 2;\n    S.vx[i] += (h / 6) * (kv[o] + 2 * kv[M + o] + 2 * kv[2 * M + o] + kv[3 * M + o]);\n    S.vy[i] += (h / 6) * (kv[o + 1] + 2 * kv[M + o + 1] + 2 * kv[2 * M + o + 1] + kv[3 * M + o + 1]);\n    S.vy[i] -= L * floor(S.vy[i] / L);\n  }\n  for (let i = 0; i \u003c NT; i++) {\n    if (S.age[i] \u003c 0) continue;\n    S.tx[i] += (h / 6) * (kx[i] + 2 * kx[NT + i] + 2 * kx[2 * NT + i] + kx[3 * NT + i]);\n    S.ty[i] += (h / 6) * (ky[i] + 2 * ky[NT + i] + 2 * ky[2 * NT + i] + ky[3 * NT + i]);\n    S.ty[i] -= L * floor(S.ty[i] / L);\n    S.age[i] += h;\n    if (S.age[i] > 2 * PULSE || abs(S.tx[i] - 32) > 70) S.age[i] = -1;\n  }\n  for (let p = 0; p \u003c m; p++) if ((S.pt[p] -= h) \u003c= 0) {\n    S.pt[p] += PULSE;\n    pulse(S, p);\n  }\n}\n\n// How far the street has come apart: the largest sideways move of one\n// vortex from its column, the whole street's sideways drift taken out.\nfunction wobble(S) {\n  let mean = 0, off = 0, dev = 0;\n  for (let i = 0; i \u003c S.m; i++) mean += S.vx[i] - S.x0[i];\n  mean /= S.m;\n  for (let i = 0; i \u003c S.m; i++) {\n    dev = max(dev, abs(S.vx[i] - S.x0[i] - mean));\n    if (S.vx[i] \u003c -8 || S.vx[i] > W + 8) off++;\n  }\n  return [dev / S.a, off];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  const n = floor(cl(k[2], 4, 8) + 0.5), ratio = STABLE + cl(k[3], -0.15, 0.25);\n  if (!S.warm) {\n    S.warm = true;\n    if (n !== S.n || abs(ratio - S.ratio) > 1e-6) lay(S, n, ratio);\n    // Open with six seconds of dye already wound.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n  }\n  // A turned knob lays a new street once it has rested a third of a second.\n  if (n !== S.n || abs(ratio - S.ratio) > 0.004) {\n    if (n !== S.want[0] || abs(ratio - S.want[1]) > 1e-6) {\n      S.want = [n, ratio];\n      S.pend = 0.35;\n    } else if (S.pend > 0 && (S.pend -= d) \u003c= 0 && !S.out) S.out = 1;\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.out) S.out = 1;\n  // A core turns at G / (2 pi RC^2) radians a second, 18 with 4 a column\n  // and 37 with 8; a step is kept under 0.7 radian of that, which RK4\n  // carries without the core's dye spiralling in or out.\n  const h = (d * S.speed) / 2;\n  const sub = max(1, Math.ceil(((GAM / (2 * PI * RCF * RCF * S.a)) * h) / 0.7));\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n  const [dev, off] = wobble(S);\n  if (dev > 0.3) S.broken += h;\n  // Broken for 7 s, or half the vortices gone off the sides: lay a new one.\n  if (!S.out && (S.broken > 7 || off >= S.n)) S.out = 1;\n  if (S.out) {\n    S.fade -= d / 0.4;\n    if (S.fade \u003c= 0) {\n      S.fade = 0;\n      S.out = 0;\n      lay(S, n, ratio);\n      S.want = [n, ratio];\n      // Every vortex drops its first line in the 2.4 s run here, while the\n      // panel is dark, so the new street comes up whole.\n      for (let i = 0; i \u003c 72; i++) step(S, 1 / 30);\n    }\n  } else S.fade = min(1, S.fade + d / 0.6);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const A = S.A, B = S.B, T = S.T, col = S.col;\n  A.fill(0);\n  B.fill(0);\n  for (let i = 0; i \u003c NT; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / (2 * PULSE), env = min(1, age / 0.35) * (1 - u) ** 0.7;\n    const buf = i % S.m \u003c S.n ? A : B;\n    const fx = S.tx[i] - 0.5, fy = S.ty[i] - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n    if (ix \u003c -1 || ix >= W) continue;\n    const y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    if (ix >= 0) {\n      buf[y0 * W + ix] += env * (1 - ax) * (1 - ay);\n      buf[y1 * W + ix] += env * (1 - ax) * ay;\n    }\n    if (ix + 1 \u003c W) {\n      buf[y0 * W + ix + 1] += env * ax * (1 - ay);\n      buf[y1 * W + ix + 1] += env * ax * ay;\n    }\n  }\n  blur(A, T);\n  blur(B, T);\n  // Dyes: aqua and rose at Hue 0. Near von Kármán's ratio both turn gold,\n  // the left column deep and the right one pale, the mark of the one street\n  // that holds: full gold within 0.005 of it, half at 0.01.\n  const gd = (S.ratio - STABLE) / 0.012, gold = exp(-gd * gd);\n  const hA = S.hue + 0.5, hB = S.hue + 0.92;\n  const wA = max(warmth(hA), gold), wB = max(warmth(hB), gold);\n  hsv(hA, 0.8 - 0.35 * warmth(hA), 1, col, 0);\n  hsv(hB, 0.62 - 0.25 * warmth(hB), 1, col, 3);\n  const G1 = [1, 0.74, 0.3], G2 = [1, 0.9, 0.62];\n  for (let c = 0; c \u003c 3; c++) {\n    col[c] += (G1[c] - col[c]) * 0.92 * gold;\n    col[3 + c] += (G2[c] - col[3 + c]) * 0.92 * gold;\n  }\n  // Warm dye climbs to full brightness sooner and its faint end is lifted,\n  // so an old spiral of gold reads pale rather than olive.\n  const kA = 0.55 + 0.4 * wA, kB = 0.55 + 0.4 * wB, gA = 1 - 0.35 * wA, gB = 1 - 0.35 * wB, f = S.fade * 255;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const a = (1 - exp(-A[p] * kA)) ** gA, b = (1 - exp(-B[p] * kB)) ** gB, hi = max(0, a + b - 1.1) * 0.6;\n      display.setPixel(x, y, (col[0] * a + col[3] * b + hi) * f, (col[1] * a + col[4] * b + hi) * f, (col[2] * a + col[5] * b + hi) * f);\n    }\n}\n\n// 1 where a hue is orange to yellow-green, which read brown and olive when\n// dim, so there the dye is paler and climbs to full brightness sooner.\nfunction warmth(h) {\n  const t = h - floor(h);\n  return sm(0.0, 0.05, t) * (1 - sm(0.17, 0.24, t));\n}\n\n// [1 2 1] along rows then columns, wrapping top to bottom.\nfunction blur(a, t) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++) t[o + x] = 0.5 * a[o + x] + 0.25 * (a[o + (x > 0 ? x - 1 : x)] + a[o + (x \u003c W - 1 ? x + 1 : x)]);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W, u = ((y + H - 1) % H) * W, dn = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) a[o + x] = 0.5 * t[o + x] + 0.25 * (t[u + x] + t[dn + x]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Vortices=4..8, Offset=-0.15..0.25","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both dyes round the wheel together: at 0 the left column is aqua and the right one rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the flow runs: at 2 the street slides down 5 LEDs a second, and with 4 vortices a column dye 3 LEDs from a core goes round in 0.8 seconds and dye 6 LEDs out in 2; at 0.2 ten times slower."},{"name":"Vortices","min":4,"max":8,"about":"Vortices in each column over the 128 rows, 4 to 8, so the spacing a runs from 32 LEDs down to 16 and the gap h with it."},{"name":"Offset","min":-0.15,"max":0.25,"about":"The ratio h/a is 0.2806 plus this, from 0.13 to 0.53. At 0 the street holds, for two to four minutes, and both dyes turn gold; at the start, 0.34, the wobble breaks it in 12 to 24 seconds, at either end in about 5. A broken street is replaced 7 seconds later, or as soon as half its vortices have left the sides."}],"start":[0,2,4,0.06],"measures":{"motion":0.4917,"detail":0.0363,"edges":0.1472,"complexity":1.3625,"coverage":0.3791,"colour":0.1414,"drift":0.0598},"knobResponse":[0.1029,0.0901,0.0896,0.103]},{"slug":"kdv-solitons","title":"KdV Solitons","family":"wave","round":31,"note":"맨 윗줄이 지금의 물결이고 지난 줄이 아래로 흘러내려요. 자부스키와 크루스칼의 코사인이 반 초 만에 가파라지며 솔리톤 여덟으로 갈리고, 키 큰 솔리톤이 작은 것을 지나칠 때마다 마루가 옆으로 비켜요. K1 을 누르면 큰 솔리톤 하나가 떨어져 무리를 뚫고 달려요.","idea":"Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.","buttons":"K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.","code":"// ===== Patternflow pattern =====\n// Title:   KdV Solitons\n// Family:  wave\n// Idea:    Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: solitons of the Korteweg-de Vries equation (Norman Zabusky and Martin Kruskal, 1965), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1\n//\n// Knob 1: Hue. Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale.\n// Knob 2: Speed. How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower.\n// Knob 3: Dispersion. The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often.\n// Knob 4: Start. The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run.\n// Buttons: K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.\n\nconst W = 64, H = 128;\nconst { min, max, floor, abs, sqrt, cos, sin, exp, tanh, cosh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The equation u_t + u u_x + delta^2 u_xxx = 0 on a ring of length 2, held on\n// 256 points, four to an LED column.\nconst NX = 256, MK = NX - 1, DX = 2 / NX, SUB = NX / W;\n// Rows of the diagram per unit of time, and history rows kept.\nconst RPT = 40, HR = H + 2;\n// Robert-Asselin filter on the leapfrog's middle level: it damps the\n// odd-even mode that otherwise grows to overflow after about five time units,\n// and takes under one percent off a soliton over a whole run.\nconst NU = 0.001;\n// Colour table over the height above the troughs, from UL to UH.\nconst NL = 512, UL = -0.5, UH = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p) * 255;\n  out[o + 1] = (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p) * 255;\n  out[o + 2] = (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p) * 255;\n}\n\n// Dark troughs, the crest hue at the top of a soliton, pale at the very top.\n// Below the crest the hue leans away round the wheel, so the small solitons\n// and the ripples between read as deeper water rather than a dim copy of the\n// crests. A dim orange or yellow reads brown or olive, so for crests from\n// pink round to yellow the lean runs the other way, through violet,\n// magenta and red, and only the brightest tones reach the crest hue; the two\n// leans meet at a yellow green, where the middle tones change side.\nconst LH = [0, 0.08, 0.17, 0.27, 0.27, 0.33, 0.5, 0.67, 0.83, 0.92, 1];\nconst LL = [-0.3, -0.36, -0.42, -0.47, 0.53, 0.15, 0.12, 0.12, 0, -0.2, -0.3];\nfunction lean(h) {\n  h -= floor(h);\n  for (let i = 1; i \u003c LH.length; i++) if (h \u003c= LH[i] && LH[i] > LH[i - 1]) return LL[i - 1] + ((LL[i] - LL[i - 1]) * (h - LH[i - 1])) / (LH[i] - LH[i - 1]);\n  return LL[0];\n}\nfunction palette(P) {\n  const t = P.lut, h0 = P.hue + 0.5, L = lean(h0);\n  for (let i = 0; i \u003c NL; i++) {\n    const e = UL + ((UH - UL) * i) / (NL - 1);\n    const v = cl(e / 2.5, 0, 1), w = cl((e - 2.1) / 1.4, 0, 1), q = cl((e - 0.3) / 1.9, 0, 1);\n    hsv(h0 + L * (1 - q) ** 0.6, 0.9 - 0.8 * w * w, 0.04 + 0.96 * v ** 1.15, t, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\n// du/dt at point i in the scheme's own differences.\nfunction rhs(u, i, d2) {\n  const m2 = u[(i - 2) & MK], m1 = u[(i - 1) & MK], z = u[i], p1 = u[(i + 1) & MK], p2 = u[(i + 2) & MK];\n  return -((p1 + z + m1) * (p1 - m1)) / (6 * DX) - (d2 * (p2 - 2 * p1 + 2 * m1 - m2)) / (2 * DX * DX * DX);\n}\n\n// Leapfrog is stable while dt times the largest rate of the linear scheme\n// stays under 1: |u|/dx for the u u_x term and 2.6 delta^2/dx^3 for the\n// third derivative (its worst wave is three grid cells long). A new dt, or a\n// new wave, starts the leapfrog again with one step back by Euler.\nfunction restartLeap(P) {\n  const d2 = P.delta * P.delta;\n  P.dt = 0.85 / (P.umax / DX + (2.6 * d2) / (DX * DX * DX));\n  const a = P.ua, b = P.ub;\n  for (let i = 0; i \u003c NX; i++) a[i] = b[i] - P.dt * rhs(b, i, d2);\n}\n\n// A starting wave into out, mean zero. Places and heights for the humps,\n// the plateau and the random sum are drawn fresh each run.\nfunction makeWave(P, kind, phase, out) {\n  const R = P.rnd;\n  if (kind) {\n    R[0] = Math.random() * 2;\n    R[1] = R[0] + 0.7 + Math.random() * 0.6;\n    R[2] = 1.05 + Math.random() * 0.3;\n    R[3] = 0.6 + Math.random() * 0.3;\n    for (let k = 1; k \u003c= 5; k++) (R[3 + k] = (0.3 + Math.random()) / k), (R[8 + k] = Math.random() * 2 * PI);\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    const x = i * DX;\n    let v = 0;\n    if (kind === 0) v = cos(PI * (x - phase));\n    else if (kind === 1) {\n      // Two humps, about 1.2 and 0.75 high.\n      const d1 = ((x - R[0] + 3) % 2) - 1, d2 = ((x - R[1] + 3) % 2) - 1;\n      v = R[2] * exp(-((d1 / 0.3) ** 2)) + R[3] * exp(-((d2 / 0.22) ** 2));\n    } else if (kind === 2) {\n      // A plateau 1.1 high and 0.8 wide with soft edges.\n      const d = ((x - R[0] + 3) % 2) - 1;\n      v = 0.55 * (tanh((d + 0.4) / 0.05) - tanh((d - 0.4) / 0.05));\n    } else for (let k = 1; k \u003c= 5; k++) v += R[3 + k] * cos(PI * k * x + R[8 + k]);\n    out[i] = v;\n  }\n  let s = 0, mx = 0;\n  for (let i = 0; i \u003c NX; i++) s += out[i];\n  s /= NX;\n  for (let i = 0; i \u003c NX; i++) mx = max(mx, abs((out[i] -= s)));\n  // The random sum peaks at 1, like the cosine.\n  if (kind === 3) for (let i = 0; i \u003c NX; i++) out[i] /= mx;\n}\n\nfunction begin(P, kind) {\n  P.ub.set(P.tg);\n  P.kind = kind;\n  P.tau = 0;\n  P.rec = 0;\n  P.drops = 0;\n  P.umax = 3;\n  restartLeap(P);\n}\n\n// The wave into one row of 64 columns as height above the troughs: a\n// little more than half the brightest of a column's four points and the\n// rest their mean, so a thin crest keeps its peak. The trough level follows\n// the lowest point of the wave over about a quarter time unit; it is -1 for\n// the cosine and sinks to about -0.7 once the solitons have taken their mass.\nfunction sample(P, out, o) {\n  const u = P.ub, bg = P.bg;\n  for (let c = 0, i = 0; c \u003c W; c++) {\n    let mx = -9, s = 0;\n    for (let k = 0; k \u003c SUB; k++, i++) {\n      const v = u[i];\n      s += v;\n      if (v > mx) mx = v;\n    }\n    out[o + c] = 0.55 * mx + (0.45 * s) / SUB - bg;\n  }\n}\n\n// The share of the wave's energy in the first cosine mode, 1 for the cosine\n// itself, and where that mode's crest stands.\nfunction mode1(P) {\n  const u = P.ub;\n  let c1 = 0, s1 = 0, e = 0;\n  for (let i = 0; i \u003c NX; i++) {\n    const a = PI * i * DX;\n    c1 += u[i] * cos(a);\n    s1 += u[i] * sin(a);\n    e += u[i] * u[i];\n  }\n  P.phase = atan2(s1, c1) / PI;\n  return (2 * (c1 * c1 + s1 * s1)) / (NX * e + 1e-9);\n}\n\n// A soliton 4.4 high over the trough, in the lowest stretch of the wave. Its\n// mass is taken evenly off the rest so the mean stays zero, and the older\n// leapfrog level gets it one step back along its path.\nfunction drop(P) {\n  const u = P.ub, a = P.ua;\n  let best = 99, at = 0;\n  for (let i = 0; i \u003c NX; i += 4) {\n    let s = 0;\n    for (let k = -12; k \u003c= 12; k++) s += u[(i + k) & MK];\n    if (s \u003c best) (best = s), (at = i);\n  }\n  const A = 4.4, w = P.delta * sqrt(12 / A), c = best / 25 + A / 3;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const tgt = pass ? a : u, back = pass ? c * P.dt : 0;\n    let m = 0;\n    for (let i = 0; i \u003c NX; i++) {\n      const d = ((((i - at) * DX + back + 3) % 2) - 1) / w;\n      m += P.uc[i] = A / cosh(d) ** 2;\n    }\n    for (let i = 0; i \u003c NX; i++) tgt[i] += P.uc[i] - m / NX;\n    if (!pass) P.bg -= m / NX;\n  }\n}\n\nfunction step(P, n) {\n  const d2 = P.delta * P.delta, k1 = P.dt / (3 * DX), k2 = (d2 * P.dt) / (DX * DX * DX);\n  for (let s = 0; s \u003c n; s++) {\n    const a = P.ua, b = P.ub, c = P.uc;\n    for (let i = 0; i \u003c NX; i++) {\n      const m2 = b[(i - 2) & MK], m1 = b[(i - 1) & MK], z = b[i], p1 = b[(i + 1) & MK], p2 = b[(i + 2) & MK];\n      c[i] = a[i] - k1 * (p1 + z + m1) * (p1 - m1) - k2 * (p2 - 2 * p1 + 2 * m1 - m2);\n    }\n    for (let i = 0; i \u003c NX; i++) b[i] += NU * (a[i] - 2 * b[i] + c[i]);\n    P.ua = b;\n    P.ub = c;\n    P.uc = a;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    ua: new Float64Array(NX), ub: new Float64Array(NX), uc: new Float64Array(NX), tg: new Float64Array(NX),\n    hist: new Float32Array(HR * W), now: new Float32Array(W), head: 0, frac: 0,\n    lut: new Float32Array(NL * 3), lutHue: -1, hue: 0, speed: 2, delta: 0.022,\n    dt: 1e-4, umax: 3, tau: 0, kind: -1, want: 0, wantT: 0, rnd: new Float64Array(14),\n    f1: 0, rising: 0, rec: 0, phase: 1, reform: -1, toKind: 0, rem: 1, rlen: 1, bg: -1, drops: 0,\n  };\n}\n\n// One row of time has passed: store it, keep dt safe, and watch for the\n// moment to start a new run.\nfunction row(P) {\n  const u = P.ub;\n  let um = 0, lo = 9, bad = false;\n  for (let i = 0; i \u003c NX; i++) {\n    const v = u[i];\n    if (!(v === v) || abs(v) > 40) bad = true;\n    else if (abs(v) > um) um = abs(v);\n    if (v \u003c lo) lo = v;\n  }\n  if (bad) return makeWave(P, P.kind, 1, P.tg), begin(P, P.kind);\n  P.bg += (lo - P.bg) * 0.1;\n  P.head = (P.head + HR - 1) % HR;\n  sample(P, P.hist, P.head * W);\n  // A taller wave than dt was set for: a smaller dt, from here.\n  if (um > 0.9 * P.umax) (P.umax = um * 1.4), restartLeap(P);\n  const f = mode1(P), Tr = 0.21 / P.delta, rowT = 1 / RPT;\n  // Each time the train gathers back, the energy flows into the first mode\n  // and out again; a peak of that share over 0.6 is one return.\n  if (f > P.f1) P.rising = 1;\n  else if (P.rising && P.f1 > 0.6 && P.tau > 0.5 * Tr) (P.rising = 0), P.rec++;\n  else P.rising = 0;\n  P.f1 = f;\n  if (P.reform \u003c 0) {\n    // The cosine runs through one return and is drawn back onto an exact\n    // cosine at the second, where the returning one stands; other starts,\n    // and runs a dropped soliton keeps from returning, start a fresh wave\n    // after about as long.\n    if (P.kind === 0 ? P.rec >= 1 && P.rising && f > 0.55 : P.tau > 1.2 * Tr) newRun(P, P.kind, P.kind ? 1 : 0.4);\n    else if (P.tau > 2.6 * Tr) newRun(P, P.kind, 1);\n  }\n  if (P.reform >= 0) {\n    // Both leapfrog levels are drawn over to the new wave, the cosine target\n    // following the returning crest, so that what is left of the old wave\n    // falls along a smoothstep; then the run starts from the new one exactly.\n    const r = (P.reform = min(1, P.reform + rowT / P.rlen)), rem = 1 - r * r * (3 - 2 * r), g = P.rem > 0 ? 1 - rem / P.rem : 1;\n    P.rem = rem;\n    if (P.toKind === 0) for (let i = 0; i \u003c NX; i++) P.tg[i] = cos(PI * (i * DX - P.phase));\n    for (let i = 0; i \u003c NX; i++) (u[i] += (P.tg[i] - u[i]) * g), (P.ua[i] += (P.tg[i] - P.ua[i]) * g);\n    if (r >= 1) (P.reform = -1), begin(P, P.toKind);\n  }\n}\n\n// A new run toward a wave of this kind, drawn over in len time units: 0.4\n// for the cosine coming back to itself, a whole unit for a different wave.\nfunction newRun(P, kind, len) {\n  P.reform = 0;\n  P.rem = 1;\n  P.rlen = len;\n  P.toKind = kind;\n  makeWave(P, kind, P.phase, P.tg);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.2, 3);\n  // Delta from 0.022 to 0.06 on a log scale.\n  const delta = 0.022 * (0.06 / 0.022) ** cl(k[2], 0, 1);\n  const kind = min(3, floor(cl(k[3], 0, 1) * 4));\n  if (abs(delta - P.delta) > 1e-6) (P.delta = delta), restartLeap(P);\n  if (P.kind \u003c 0) {\n    // Before the first frame the panel shows the starting wave as if it had\n    // been held still, so the diagram falls out of it.\n    makeWave(P, kind, 1, P.tg);\n    begin(P, kind);\n    P.bg = 9;\n    for (let i = 0; i \u003c NX; i++) P.bg = min(P.bg, P.ub[i]);\n    sample(P, P.hist, 0);\n    for (let r = 1; r \u003c HR; r++) P.hist.copyWithin(r * W, 0, W);\n  }\n  // A new Start is taken once the knob has rested on it a quarter second,\n  // and the wave is drawn over into it like any new run.\n  if (kind === (P.reform >= 0 ? P.toKind : P.kind)) P.wantT = 0;\n  else {\n    if (kind !== P.want) (P.want = kind), (P.wantT = 0);\n    if ((P.wantT += d) > 0.25) newRun(P, kind, 1);\n  }\n  const b = input.btnPressed || [];\n  // Four drops a run at most; past that the train is lost in white.\n  if (b[0] && P.drops \u003c 4) P.drops++, drop(P);\n\n  // 0.6 time units a second at Speed 2; the cosine breaks at 1/pi.\n  let left = d * P.speed * 0.3;\n  const rowT = 1 / RPT;\n  while (left > 1e-12) {\n    const run = min(left, (1 - P.frac) * rowT);\n    step(P, min(4000, max(1, round(run / P.dt))));\n    P.tau += run;\n    left -= run;\n    P.frac += run / rowT;\n    if (P.frac >= 1 - 1e-9) (P.frac = 0), row(P);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.kind \u003c 0) return;\n  if (P.lutHue !== P.hue) palette(P);\n  const now = P.now, hist = P.hist, lut = P.lut, f = P.frac, sc = (NL - 1) / (UH - UL);\n  sample(P, now, 0);\n  for (let y = 0; y \u003c H; y++) {\n    // Row y is the wave y rows of time ago. The newest stored row is f rows\n    // old; the top row is the wave now.\n    let ra = hist, ia, ib, w;\n    if (y \u003c= f) (ra = now), (ia = 0), (ib = P.head * W), (w = f > 0 ? y / f : 0);\n    else {\n      const kk = floor(y - f);\n      ia = ((P.head + kk) % HR) * W;\n      ib = ((P.head + kk + 1) % HR) * W;\n      w = y - f - kk;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const u = ra[ia + x] + (hist[ib + x] - ra[ia + x]) * w;\n      const o = cl(round((u - UL) * sc), 0, NL - 1) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-kdv-solitons","type":"code","name":"kdv-solitons","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   KdV Solitons\n// Family:  wave\n// Idea:    Zabusky and Kruskal's numerical experiment as a space-time diagram falling down the panel: the top row is the wave now, a cosine that steepens, nearly breaks and splits into a train of solitons, each a bright ridge whose slant is its speed, the tall fast ones passing through the small slow ones with a sideways jog, until the whole train pinches back together into the cosine and fans out again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: solitons of the Korteweg-de Vries equation (Norman Zabusky and Martin Kruskal, 1965), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1\n//\n// Knob 1: Hue. Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale.\n// Knob 2: Speed. How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower.\n// Knob 3: Dispersion. The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often.\n// Knob 4: Start. The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run.\n// Buttons: K1 tap drops a tall sech-squared soliton into the lowest trough of the wave, a pale ridge that races through the whole train.\n\nconst W = 64, H = 128;\nconst { min, max, floor, abs, sqrt, cos, sin, exp, tanh, cosh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The equation u_t + u u_x + delta^2 u_xxx = 0 on a ring of length 2, held on\n// 256 points, four to an LED column.\nconst NX = 256, MK = NX - 1, DX = 2 / NX, SUB = NX / W;\n// Rows of the diagram per unit of time, and history rows kept.\nconst RPT = 40, HR = H + 2;\n// Robert-Asselin filter on the leapfrog's middle level: it damps the\n// odd-even mode that otherwise grows to overflow after about five time units,\n// and takes under one percent off a soliton over a whole run.\nconst NU = 0.001;\n// Colour table over the height above the troughs, from UL to UH.\nconst NL = 512, UL = -0.5, UH = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p) * 255;\n  out[o + 1] = (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p) * 255;\n  out[o + 2] = (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p) * 255;\n}\n\n// Dark troughs, the crest hue at the top of a soliton, pale at the very top.\n// Below the crest the hue leans away round the wheel, so the small solitons\n// and the ripples between read as deeper water rather than a dim copy of the\n// crests. A dim orange or yellow reads brown or olive, so for crests from\n// pink round to yellow the lean runs the other way, through violet,\n// magenta and red, and only the brightest tones reach the crest hue; the two\n// leans meet at a yellow green, where the middle tones change side.\nconst LH = [0, 0.08, 0.17, 0.27, 0.27, 0.33, 0.5, 0.67, 0.83, 0.92, 1];\nconst LL = [-0.3, -0.36, -0.42, -0.47, 0.53, 0.15, 0.12, 0.12, 0, -0.2, -0.3];\nfunction lean(h) {\n  h -= floor(h);\n  for (let i = 1; i \u003c LH.length; i++) if (h \u003c= LH[i] && LH[i] > LH[i - 1]) return LL[i - 1] + ((LL[i] - LL[i - 1]) * (h - LH[i - 1])) / (LH[i] - LH[i - 1]);\n  return LL[0];\n}\nfunction palette(P) {\n  const t = P.lut, h0 = P.hue + 0.5, L = lean(h0);\n  for (let i = 0; i \u003c NL; i++) {\n    const e = UL + ((UH - UL) * i) / (NL - 1);\n    const v = cl(e / 2.5, 0, 1), w = cl((e - 2.1) / 1.4, 0, 1), q = cl((e - 0.3) / 1.9, 0, 1);\n    hsv(h0 + L * (1 - q) ** 0.6, 0.9 - 0.8 * w * w, 0.04 + 0.96 * v ** 1.15, t, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\n// du/dt at point i in the scheme's own differences.\nfunction rhs(u, i, d2) {\n  const m2 = u[(i - 2) & MK], m1 = u[(i - 1) & MK], z = u[i], p1 = u[(i + 1) & MK], p2 = u[(i + 2) & MK];\n  return -((p1 + z + m1) * (p1 - m1)) / (6 * DX) - (d2 * (p2 - 2 * p1 + 2 * m1 - m2)) / (2 * DX * DX * DX);\n}\n\n// Leapfrog is stable while dt times the largest rate of the linear scheme\n// stays under 1: |u|/dx for the u u_x term and 2.6 delta^2/dx^3 for the\n// third derivative (its worst wave is three grid cells long). A new dt, or a\n// new wave, starts the leapfrog again with one step back by Euler.\nfunction restartLeap(P) {\n  const d2 = P.delta * P.delta;\n  P.dt = 0.85 / (P.umax / DX + (2.6 * d2) / (DX * DX * DX));\n  const a = P.ua, b = P.ub;\n  for (let i = 0; i \u003c NX; i++) a[i] = b[i] - P.dt * rhs(b, i, d2);\n}\n\n// A starting wave into out, mean zero. Places and heights for the humps,\n// the plateau and the random sum are drawn fresh each run.\nfunction makeWave(P, kind, phase, out) {\n  const R = P.rnd;\n  if (kind) {\n    R[0] = Math.random() * 2;\n    R[1] = R[0] + 0.7 + Math.random() * 0.6;\n    R[2] = 1.05 + Math.random() * 0.3;\n    R[3] = 0.6 + Math.random() * 0.3;\n    for (let k = 1; k \u003c= 5; k++) (R[3 + k] = (0.3 + Math.random()) / k), (R[8 + k] = Math.random() * 2 * PI);\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    const x = i * DX;\n    let v = 0;\n    if (kind === 0) v = cos(PI * (x - phase));\n    else if (kind === 1) {\n      // Two humps, about 1.2 and 0.75 high.\n      const d1 = ((x - R[0] + 3) % 2) - 1, d2 = ((x - R[1] + 3) % 2) - 1;\n      v = R[2] * exp(-((d1 / 0.3) ** 2)) + R[3] * exp(-((d2 / 0.22) ** 2));\n    } else if (kind === 2) {\n      // A plateau 1.1 high and 0.8 wide with soft edges.\n      const d = ((x - R[0] + 3) % 2) - 1;\n      v = 0.55 * (tanh((d + 0.4) / 0.05) - tanh((d - 0.4) / 0.05));\n    } else for (let k = 1; k \u003c= 5; k++) v += R[3 + k] * cos(PI * k * x + R[8 + k]);\n    out[i] = v;\n  }\n  let s = 0, mx = 0;\n  for (let i = 0; i \u003c NX; i++) s += out[i];\n  s /= NX;\n  for (let i = 0; i \u003c NX; i++) mx = max(mx, abs((out[i] -= s)));\n  // The random sum peaks at 1, like the cosine.\n  if (kind === 3) for (let i = 0; i \u003c NX; i++) out[i] /= mx;\n}\n\nfunction begin(P, kind) {\n  P.ub.set(P.tg);\n  P.kind = kind;\n  P.tau = 0;\n  P.rec = 0;\n  P.drops = 0;\n  P.umax = 3;\n  restartLeap(P);\n}\n\n// The wave into one row of 64 columns as height above the troughs: a\n// little more than half the brightest of a column's four points and the\n// rest their mean, so a thin crest keeps its peak. The trough level follows\n// the lowest point of the wave over about a quarter time unit; it is -1 for\n// the cosine and sinks to about -0.7 once the solitons have taken their mass.\nfunction sample(P, out, o) {\n  const u = P.ub, bg = P.bg;\n  for (let c = 0, i = 0; c \u003c W; c++) {\n    let mx = -9, s = 0;\n    for (let k = 0; k \u003c SUB; k++, i++) {\n      const v = u[i];\n      s += v;\n      if (v > mx) mx = v;\n    }\n    out[o + c] = 0.55 * mx + (0.45 * s) / SUB - bg;\n  }\n}\n\n// The share of the wave's energy in the first cosine mode, 1 for the cosine\n// itself, and where that mode's crest stands.\nfunction mode1(P) {\n  const u = P.ub;\n  let c1 = 0, s1 = 0, e = 0;\n  for (let i = 0; i \u003c NX; i++) {\n    const a = PI * i * DX;\n    c1 += u[i] * cos(a);\n    s1 += u[i] * sin(a);\n    e += u[i] * u[i];\n  }\n  P.phase = atan2(s1, c1) / PI;\n  return (2 * (c1 * c1 + s1 * s1)) / (NX * e + 1e-9);\n}\n\n// A soliton 4.4 high over the trough, in the lowest stretch of the wave. Its\n// mass is taken evenly off the rest so the mean stays zero, and the older\n// leapfrog level gets it one step back along its path.\nfunction drop(P) {\n  const u = P.ub, a = P.ua;\n  let best = 99, at = 0;\n  for (let i = 0; i \u003c NX; i += 4) {\n    let s = 0;\n    for (let k = -12; k \u003c= 12; k++) s += u[(i + k) & MK];\n    if (s \u003c best) (best = s), (at = i);\n  }\n  const A = 4.4, w = P.delta * sqrt(12 / A), c = best / 25 + A / 3;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const tgt = pass ? a : u, back = pass ? c * P.dt : 0;\n    let m = 0;\n    for (let i = 0; i \u003c NX; i++) {\n      const d = ((((i - at) * DX + back + 3) % 2) - 1) / w;\n      m += P.uc[i] = A / cosh(d) ** 2;\n    }\n    for (let i = 0; i \u003c NX; i++) tgt[i] += P.uc[i] - m / NX;\n    if (!pass) P.bg -= m / NX;\n  }\n}\n\nfunction step(P, n) {\n  const d2 = P.delta * P.delta, k1 = P.dt / (3 * DX), k2 = (d2 * P.dt) / (DX * DX * DX);\n  for (let s = 0; s \u003c n; s++) {\n    const a = P.ua, b = P.ub, c = P.uc;\n    for (let i = 0; i \u003c NX; i++) {\n      const m2 = b[(i - 2) & MK], m1 = b[(i - 1) & MK], z = b[i], p1 = b[(i + 1) & MK], p2 = b[(i + 2) & MK];\n      c[i] = a[i] - k1 * (p1 + z + m1) * (p1 - m1) - k2 * (p2 - 2 * p1 + 2 * m1 - m2);\n    }\n    for (let i = 0; i \u003c NX; i++) b[i] += NU * (a[i] - 2 * b[i] + c[i]);\n    P.ua = b;\n    P.ub = c;\n    P.uc = a;\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    ua: new Float64Array(NX), ub: new Float64Array(NX), uc: new Float64Array(NX), tg: new Float64Array(NX),\n    hist: new Float32Array(HR * W), now: new Float32Array(W), head: 0, frac: 0,\n    lut: new Float32Array(NL * 3), lutHue: -1, hue: 0, speed: 2, delta: 0.022,\n    dt: 1e-4, umax: 3, tau: 0, kind: -1, want: 0, wantT: 0, rnd: new Float64Array(14),\n    f1: 0, rising: 0, rec: 0, phase: 1, reform: -1, toKind: 0, rem: 1, rlen: 1, bg: -1, drops: 0,\n  };\n}\n\n// One row of time has passed: store it, keep dt safe, and watch for the\n// moment to start a new run.\nfunction row(P) {\n  const u = P.ub;\n  let um = 0, lo = 9, bad = false;\n  for (let i = 0; i \u003c NX; i++) {\n    const v = u[i];\n    if (!(v === v) || abs(v) > 40) bad = true;\n    else if (abs(v) > um) um = abs(v);\n    if (v \u003c lo) lo = v;\n  }\n  if (bad) return makeWave(P, P.kind, 1, P.tg), begin(P, P.kind);\n  P.bg += (lo - P.bg) * 0.1;\n  P.head = (P.head + HR - 1) % HR;\n  sample(P, P.hist, P.head * W);\n  // A taller wave than dt was set for: a smaller dt, from here.\n  if (um > 0.9 * P.umax) (P.umax = um * 1.4), restartLeap(P);\n  const f = mode1(P), Tr = 0.21 / P.delta, rowT = 1 / RPT;\n  // Each time the train gathers back, the energy flows into the first mode\n  // and out again; a peak of that share over 0.6 is one return.\n  if (f > P.f1) P.rising = 1;\n  else if (P.rising && P.f1 > 0.6 && P.tau > 0.5 * Tr) (P.rising = 0), P.rec++;\n  else P.rising = 0;\n  P.f1 = f;\n  if (P.reform \u003c 0) {\n    // The cosine runs through one return and is drawn back onto an exact\n    // cosine at the second, where the returning one stands; other starts,\n    // and runs a dropped soliton keeps from returning, start a fresh wave\n    // after about as long.\n    if (P.kind === 0 ? P.rec >= 1 && P.rising && f > 0.55 : P.tau > 1.2 * Tr) newRun(P, P.kind, P.kind ? 1 : 0.4);\n    else if (P.tau > 2.6 * Tr) newRun(P, P.kind, 1);\n  }\n  if (P.reform >= 0) {\n    // Both leapfrog levels are drawn over to the new wave, the cosine target\n    // following the returning crest, so that what is left of the old wave\n    // falls along a smoothstep; then the run starts from the new one exactly.\n    const r = (P.reform = min(1, P.reform + rowT / P.rlen)), rem = 1 - r * r * (3 - 2 * r), g = P.rem > 0 ? 1 - rem / P.rem : 1;\n    P.rem = rem;\n    if (P.toKind === 0) for (let i = 0; i \u003c NX; i++) P.tg[i] = cos(PI * (i * DX - P.phase));\n    for (let i = 0; i \u003c NX; i++) (u[i] += (P.tg[i] - u[i]) * g), (P.ua[i] += (P.tg[i] - P.ua[i]) * g);\n    if (r >= 1) (P.reform = -1), begin(P, P.toKind);\n  }\n}\n\n// A new run toward a wave of this kind, drawn over in len time units: 0.4\n// for the cosine coming back to itself, a whole unit for a different wave.\nfunction newRun(P, kind, len) {\n  P.reform = 0;\n  P.rem = 1;\n  P.rlen = len;\n  P.toKind = kind;\n  makeWave(P, kind, P.phase, P.tg);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.2, 3);\n  // Delta from 0.022 to 0.06 on a log scale.\n  const delta = 0.022 * (0.06 / 0.022) ** cl(k[2], 0, 1);\n  const kind = min(3, floor(cl(k[3], 0, 1) * 4));\n  if (abs(delta - P.delta) > 1e-6) (P.delta = delta), restartLeap(P);\n  if (P.kind \u003c 0) {\n    // Before the first frame the panel shows the starting wave as if it had\n    // been held still, so the diagram falls out of it.\n    makeWave(P, kind, 1, P.tg);\n    begin(P, kind);\n    P.bg = 9;\n    for (let i = 0; i \u003c NX; i++) P.bg = min(P.bg, P.ub[i]);\n    sample(P, P.hist, 0);\n    for (let r = 1; r \u003c HR; r++) P.hist.copyWithin(r * W, 0, W);\n  }\n  // A new Start is taken once the knob has rested on it a quarter second,\n  // and the wave is drawn over into it like any new run.\n  if (kind === (P.reform >= 0 ? P.toKind : P.kind)) P.wantT = 0;\n  else {\n    if (kind !== P.want) (P.want = kind), (P.wantT = 0);\n    if ((P.wantT += d) > 0.25) newRun(P, kind, 1);\n  }\n  const b = input.btnPressed || [];\n  // Four drops a run at most; past that the train is lost in white.\n  if (b[0] && P.drops \u003c 4) P.drops++, drop(P);\n\n  // 0.6 time units a second at Speed 2; the cosine breaks at 1/pi.\n  let left = d * P.speed * 0.3;\n  const rowT = 1 / RPT;\n  while (left > 1e-12) {\n    const run = min(left, (1 - P.frac) * rowT);\n    step(P, min(4000, max(1, round(run / P.dt))));\n    P.tau += run;\n    left -= run;\n    P.frac += run / rowT;\n    if (P.frac >= 1 - 1e-9) (P.frac = 0), row(P);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.kind \u003c 0) return;\n  if (P.lutHue !== P.hue) palette(P);\n  const now = P.now, hist = P.hist, lut = P.lut, f = P.frac, sc = (NL - 1) / (UH - UL);\n  sample(P, now, 0);\n  for (let y = 0; y \u003c H; y++) {\n    // Row y is the wave y rows of time ago. The newest stored row is f rows\n    // old; the top row is the wave now.\n    let ra = hist, ia, ib, w;\n    if (y \u003c= f) (ra = now), (ia = 0), (ib = P.head * W), (w = f > 0 ? y / f : 0);\n    else {\n      const kk = floor(y - f);\n      ia = ((P.head + kk) % HR) * W;\n      ib = ((P.head + kk + 1) % HR) * W;\n      w = y - f - kk;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const u = ra[ia + x] + (hist[ib + x] - ra[ia + x]) * w;\n      const o = cl(round((u - UL) * sc), 0, NL - 1) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Dispersion=0..1, Start=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the crest colour round the wheel; at 0 the crests are cyan over indigo troughs and the tallest go pale."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the equation runs and the diagram falls: at 2 the cosine breaks after half a second, the panel holds the last five seconds and the train gathers back into the cosine after sixteen; at 0.2 everything is ten times slower."},{"name":"Dispersion","min":0,"max":1,"about":"The delta of the equation, 0.022 at 0 as in the 1965 paper, giving eight thin solitons; turned up to 0.06 at 1 the cosine breaks into three wide ones and gathers back almost three times as often."},{"name":"Start","min":0,"max":1,"about":"The wave each run starts from: the cosine of the paper, two humps of unequal height, a flat plateau whose front edge breaks into a ranked train, or a random sum of five cosines drawn fresh each run."}],"start":[0,2,0,0.06],"measures":{"motion":0.5261,"detail":0.0597,"edges":0.2382,"complexity":1.5547,"coverage":0.8045,"colour":0.3345,"drift":0.2583},"knobResponse":[0.2224,0.1099,0.0581,0.2182]},{"slug":"kelvin-wake","title":"Kelvin Wake","family":"wave","round":34,"note":"고요한 물 위로 흰 거품 한 점이 아래에서 위로 올라가고, 그 뒤로 켈빈의 배 물결이 펼쳐져요. 물길을 가로지르는 굽은 가로 물마루와 비스듬한 짧은 발산 물결이 반각 19.47° 쐐기의 두 팔에서 만나 가장 밝은 첨점 줄을 이루고, 쐐기는 원천이 얼마나 빠르든 원천 뒤 90 LED 에서 패널 양옆에 닿아요. K3 은 원천을 빠르게 해 물결을 길게 늘이지만 쐐기의 각은 그대로예요.","idea":"A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.","buttons":"K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.","code":"// ===== Patternflow pattern =====\n// Title:   Kelvin Wake\n// Family:  wave\n// Idea:    A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kelvin ship-wave pattern (William Thomson, Lord Kelvin, 1887), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1\n//\n// Knob 1: Hue. The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Velocity. The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests.\n// Knob 4: Patch. The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7.\n// Buttons: K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.\n\nconst W = 64, H = 128, YC = 32, DX = 0.5, N = 256;\n// The wake is drawn to 150 LEDs behind its source and fades over the last\n// 45; sources come 190 LEDs apart, so 40 LEDs of still water separate them.\nconst LT = 150, FADE = 45, GAP = 190, ROWS = Math.ceil(LT / DX) + 2;\nconst { floor, sqrt, sin, cos, exp, abs, round, min, max, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// In-place radix-2 FFT with the + sign.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// The steady wake in the source's frame, x LEDs behind it and y LEDs to the\n// side, from the classical integral over wave directions theta:\n//   zeta(x, y) = Im  int sec^3(theta) exp(-(k a)^2 / 4) exp(i k (x cos theta + y sin theta)) dtheta,\n// k = k0 sec^2(theta), k0 = g / U^2 = 2 pi / lambda. The imaginary part is\n// the sine form, which is zero at x = 0, so the wake starts from nothing at\n// the source. Changing variable to the cross-track wavenumber\n// ky = k0 sec(theta) tan(theta) makes each row x one Fourier sum over ky:\n// sec^2(theta) = (1 + sqrt(1 + 4 (ky / k0)^2)) / 2, the along-track\n// wavenumber is k0 sec(theta), and sec^3 dtheta = sec^2 / (k0 (2 sec^2 - 1)) dky.\n// Only the slopes are drawn, so a row is two 256-point FFTs across y: the\n// same sum times i kx and times i ky. 256 LEDs across hold the wedge out to\n// x = 150, where it is 106 wide, so the FFT's wrap never reaches the panel.\n// Fitting the brightest crest beside the axis, row by row out to x = 320, as\n// s x - c x^(1/3) (the Airy fringe sits inside the caustic by c x^(1/3)) puts\n// the cusp line at 19.25 to 19.46 degrees over the whole Velocity range;\n// Kelvin's angle is arcsin(1/3) = 19.47.\nfunction build(T, lambda, a) {\n  const k0 = (2 * PI) / lambda;\n  const { ky, kx, B, r1, i1, r2, i2, ZX, ZY } = T;\n  for (let j = 0; j \u003c N; j++) {\n    const q = (2 * PI * (j \u003c N / 2 ? j : j - N)) / N, u = q / k0;\n    const s2 = (1 + sqrt(1 + 4 * u * u)) / 2, k = k0 * s2, aq = abs(q);\n    // A soft roll-off before the LED grid's Nyquist limit.\n    const win = aq \u003c 0.6 * PI ? 1 : cos(((aq - 0.6 * PI) / (0.4 * PI)) * 0.5 * PI) ** 2;\n    B[j] = (s2 / (k0 * (2 * s2 - 1))) * exp(-(((k * a) / 2) ** 2)) * win;\n    ky[j] = q;\n    kx[j] = k0 * sqrt(s2);\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const x = r * DX;\n    for (let j = 0; j \u003c N; j++) {\n      // Columns sit at y = m + 0.5, so the track runs between the two middle columns.\n      const ph = kx[j] * x + ky[j] * 0.5, c = B[j] * cos(ph), s = B[j] * sin(ph);\n      r1[j] = -kx[j] * s;\n      i1[j] = kx[j] * c;\n      r2[j] = -ky[j] * s;\n      i2[j] = ky[j] * c;\n    }\n    fft(r1, i1);\n    fft(r2, i2);\n    // The far end of the wake fades out: a source that has run for a finite\n    // time has a wake of finite length.\n    const f = 1 - sm(LT - FADE, LT, x);\n    for (let m = 0; m \u003c YC; m++) {\n      ZX[r * YC + m] = i1[m] * f;\n      ZY[r * YC + m] = i2[m] * f;\n    }\n  }\n  // One scale for the shading: the 99th percentile of the lit slope over\n  // the stretch that fits on the panel, both sides of the track.\n  const vals = T.vals;\n  let n = 0;\n  for (let r = floor(4 / DX); r \u003c floor(128 / DX); r += 2)\n    for (let m = 0; m \u003c YC; m++) {\n      const gx = ZX[r * YC + m], gy = ZY[r * YC + m];\n      vals[n++] = abs(gy * T.lx + gx * T.ly);\n      vals[n++] = abs(-gy * T.lx + gx * T.ly);\n    }\n  const v = vals.subarray(0, n).sort();\n  T.scale = 1 / (v[floor(n * 0.99)] || 1);\n}\n\nexport function setup(params) {\n  // The light comes from the upper left, low over the water.\n  const lx = -0.45, ly = -0.89;\n  params.s = {\n    hue: 0, speed: 2, vel: 1, patch: 0.06, warm: false, key: \"\", foamT: 0,\n    src: [], foam: [], cache: new Map(), c: [0, 0, 0],\n    work: {\n      ky: new Float64Array(N), kx: new Float64Array(N), B: new Float64Array(N),\n      r1: new Float64Array(N), i1: new Float64Array(N), r2: new Float64Array(N), i2: new Float64Array(N),\n    },\n    lx, ly, GX: new Float32Array(W * H), GY: new Float32Array(W * H), F: new Float32Array(W * H), tab: null,\n  };\n}\n\nfunction table(S) {\n  // Tables are cached by the quantised knob pair: Velocity in steps of 0.02,\n  // Patch in steps of 0.02.\n  const qv = round(S.vel * 50) / 50, qp = round(S.patch * 50) / 50, key = qv + \",\" + qp;\n  if (key === S.key) return;\n  S.key = key;\n  let T = S.cache.get(key);\n  if (!T) {\n    T = {\n      ...S.work, lx: S.lx, ly: S.ly, scale: 1, vals: new Float32Array(2 * YC * 128),\n      ZX: new Float32Array(ROWS * YC), ZY: new Float32Array(ROWS * YC),\n    };\n    build(T, 12 * qv * qv, 1.2 + 4.8 * qp);\n    if (S.cache.size > 6) S.cache.delete(S.cache.keys().next().value);\n    S.cache.set(key, T);\n  }\n  S.tab = T;\n}\n\n// Rows climbed per second.\nconst rate = (S) => 15 * S.vel * S.speed;\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.vel = cl(k[2], 1, 1.7);\n  S.patch = cl(k[3], 0, 1);\n  table(S);\n  const v = rate(S);\n  if (!S.warm) {\n    // Open so that 2.4 seconds in, a source is 40 LEDs below the top with the\n    // one before it already gone past.\n    const y0 = 40 + 2.4 * v;\n    S.src = [y0 - GAP, y0];\n    S.warm = true;\n  }\n  for (let i = 0; i \u003c S.src.length; i++) S.src[i] -= v * d;\n  while (S.src.length && S.src[0] \u003c -LT - 4) S.src.shift();\n  const last = S.src[S.src.length - 1];\n  if (last === undefined || last \u003c H + 6 - GAP) S.src.push(H + 6);\n  else if (input.btnPressed && input.btnPressed[0] && last \u003c H - 24) S.src.push(H + 6);\n  // Foam shed by each source stays where it fell on the still water and\n  // fades in about 0.4 seconds.\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  S.foamT += d * 60 * S.speed / 2;\n  for (const f of S.foam) f.life -= (d * S.speed) / 2 / 0.4;\n  S.foam = S.foam.filter((f) => f.life > 0);\n  while (S.foamT >= 1) {\n    S.foamT -= 1;\n    for (const ys of S.src)\n      if (ys > -4 && ys \u003c H + 4) {\n        const ang = random() * 2 * PI, r = rf * sqrt(random());\n        S.foam.push({ x: 31.5 + r * cos(ang), y: ys + 0.6 * r * sin(ang) + 1, life: 0.6 + 0.4 * random() });\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tab) return;\n  const T = S.tab, { ZX, ZY } = T, GX = S.GX, GY = S.GY, F = S.F, c = S.c;\n  GX.fill(0);\n  GY.fill(0);\n  F.fill(0);\n  for (const f of S.foam) {\n    const x = round(f.x), y = round(f.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) F[y * W + x] = max(F[y * W + x], min(1, f.life) * 0.85);\n  }\n  // Each source lays its wake, row by row, from the table: x behind it,\n  // linear between table rows; the cross-track slope is odd in y.\n  for (const ys of S.src)\n    for (let y = max(0, Math.ceil(ys)); y \u003c H; y++) {\n      const fx = (y - ys) / DX;\n      if (fx >= ROWS - 1) break;\n      const r = floor(fx), w = fx - r, o0 = r * YC, o1 = o0 + YC;\n      for (let m = 0; m \u003c YC; m++) {\n        const gx = ZX[o0 + m] * (1 - w) + ZX[o1 + m] * w, gy = ZY[o0 + m] * (1 - w) + ZY[o1 + m] * w;\n        GY[y * W + 32 + m] += gx;\n        GX[y * W + 32 + m] += gy;\n        GY[y * W + 31 - m] += gx;\n        GX[y * W + 31 - m] -= gy;\n      }\n    }\n  const h0 = S.hue + 0.55, hh = h0 - floor(h0);\n  // Amber, gold and lime water read brown or olive at the calm level, so\n  // there the water is lifted to 0.74 and its shadow faces lean to crimson.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.22, 0.32, hh));\n  const base = 0.34 + 0.4 * warm, sat0 = 0.82 + 0.1 * warm;\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Lit where the surface tilts towards the light.\n      const sh = -(GX[p] * S.lx + GY[p] * S.ly) * T.scale;\n      const up = sh > 0 ? min(1.4, sh) : 0, dn = sh \u003c 0 ? min(1, -sh) : 0;\n      let v = base + (1 - base) * pow(min(1, up), 0.75) - (base - 0.08 - 0.12 * warm) * pow(dn, 0.7);\n      let s = sat0 * (1 - 0.7 * sm(0.55, 1.25, up));\n      let hue = h0 + 0.03 * up - (0.02 + 0.08 * warm) * dn;\n      // The foam patch over each source.\n      let foam = F[p];\n      for (const ys of S.src) {\n        const dx = x - 31.5, dy = (y - ys) * 1.4, r2 = dx * dx + dy * dy;\n        if (r2 \u003c (rf + 1.5) * (rf + 1.5)) foam = max(foam, 1 - sm(rf - 1, rf + 1.5, sqrt(r2)));\n      }\n      if (foam > 0) {\n        v = v + (1 - v) * foam;\n        s *= 1 - foam;\n      }\n      hsv(hue, s, v, c);\n      display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n    }\n}\n","layer":{"id":"layer-kelvin-wake","type":"code","name":"kelvin-wake","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kelvin Wake\n// Family:  wave\n// Idea:    A small patch of foam climbs the panel over still water and leaves Kelvin's ship wave behind it: curved transverse crests across its track and short divergent waves slanting out along the two arms of a wedge of half-angle 19.47 degrees, brightest where the two systems meet in cusps along the wedge line, and the wedge stays the same however fast the source goes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kelvin ship-wave pattern (William Thomson, Lord Kelvin, 1887), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1\n//\n// Knob 1: Hue. The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again.\n// Knob 3: Velocity. The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests.\n// Knob 4: Patch. The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7.\n// Buttons: K1 tap sends the next source up from the bottom at once (if the last one is at least 24 LEDs up the panel), so two wakes overlap and add.\n\nconst W = 64, H = 128, YC = 32, DX = 0.5, N = 256;\n// The wake is drawn to 150 LEDs behind its source and fades over the last\n// 45; sources come 190 LEDs apart, so 40 LEDs of still water separate them.\nconst LT = 150, FADE = 45, GAP = 190, ROWS = Math.ceil(LT / DX) + 2;\nconst { floor, sqrt, sin, cos, exp, abs, round, min, max, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// In-place radix-2 FFT with the + sign.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// The steady wake in the source's frame, x LEDs behind it and y LEDs to the\n// side, from the classical integral over wave directions theta:\n//   zeta(x, y) = Im  int sec^3(theta) exp(-(k a)^2 / 4) exp(i k (x cos theta + y sin theta)) dtheta,\n// k = k0 sec^2(theta), k0 = g / U^2 = 2 pi / lambda. The imaginary part is\n// the sine form, which is zero at x = 0, so the wake starts from nothing at\n// the source. Changing variable to the cross-track wavenumber\n// ky = k0 sec(theta) tan(theta) makes each row x one Fourier sum over ky:\n// sec^2(theta) = (1 + sqrt(1 + 4 (ky / k0)^2)) / 2, the along-track\n// wavenumber is k0 sec(theta), and sec^3 dtheta = sec^2 / (k0 (2 sec^2 - 1)) dky.\n// Only the slopes are drawn, so a row is two 256-point FFTs across y: the\n// same sum times i kx and times i ky. 256 LEDs across hold the wedge out to\n// x = 150, where it is 106 wide, so the FFT's wrap never reaches the panel.\n// Fitting the brightest crest beside the axis, row by row out to x = 320, as\n// s x - c x^(1/3) (the Airy fringe sits inside the caustic by c x^(1/3)) puts\n// the cusp line at 19.25 to 19.46 degrees over the whole Velocity range;\n// Kelvin's angle is arcsin(1/3) = 19.47.\nfunction build(T, lambda, a) {\n  const k0 = (2 * PI) / lambda;\n  const { ky, kx, B, r1, i1, r2, i2, ZX, ZY } = T;\n  for (let j = 0; j \u003c N; j++) {\n    const q = (2 * PI * (j \u003c N / 2 ? j : j - N)) / N, u = q / k0;\n    const s2 = (1 + sqrt(1 + 4 * u * u)) / 2, k = k0 * s2, aq = abs(q);\n    // A soft roll-off before the LED grid's Nyquist limit.\n    const win = aq \u003c 0.6 * PI ? 1 : cos(((aq - 0.6 * PI) / (0.4 * PI)) * 0.5 * PI) ** 2;\n    B[j] = (s2 / (k0 * (2 * s2 - 1))) * exp(-(((k * a) / 2) ** 2)) * win;\n    ky[j] = q;\n    kx[j] = k0 * sqrt(s2);\n  }\n  for (let r = 0; r \u003c ROWS; r++) {\n    const x = r * DX;\n    for (let j = 0; j \u003c N; j++) {\n      // Columns sit at y = m + 0.5, so the track runs between the two middle columns.\n      const ph = kx[j] * x + ky[j] * 0.5, c = B[j] * cos(ph), s = B[j] * sin(ph);\n      r1[j] = -kx[j] * s;\n      i1[j] = kx[j] * c;\n      r2[j] = -ky[j] * s;\n      i2[j] = ky[j] * c;\n    }\n    fft(r1, i1);\n    fft(r2, i2);\n    // The far end of the wake fades out: a source that has run for a finite\n    // time has a wake of finite length.\n    const f = 1 - sm(LT - FADE, LT, x);\n    for (let m = 0; m \u003c YC; m++) {\n      ZX[r * YC + m] = i1[m] * f;\n      ZY[r * YC + m] = i2[m] * f;\n    }\n  }\n  // One scale for the shading: the 99th percentile of the lit slope over\n  // the stretch that fits on the panel, both sides of the track.\n  const vals = T.vals;\n  let n = 0;\n  for (let r = floor(4 / DX); r \u003c floor(128 / DX); r += 2)\n    for (let m = 0; m \u003c YC; m++) {\n      const gx = ZX[r * YC + m], gy = ZY[r * YC + m];\n      vals[n++] = abs(gy * T.lx + gx * T.ly);\n      vals[n++] = abs(-gy * T.lx + gx * T.ly);\n    }\n  const v = vals.subarray(0, n).sort();\n  T.scale = 1 / (v[floor(n * 0.99)] || 1);\n}\n\nexport function setup(params) {\n  // The light comes from the upper left, low over the water.\n  const lx = -0.45, ly = -0.89;\n  params.s = {\n    hue: 0, speed: 2, vel: 1, patch: 0.06, warm: false, key: \"\", foamT: 0,\n    src: [], foam: [], cache: new Map(), c: [0, 0, 0],\n    work: {\n      ky: new Float64Array(N), kx: new Float64Array(N), B: new Float64Array(N),\n      r1: new Float64Array(N), i1: new Float64Array(N), r2: new Float64Array(N), i2: new Float64Array(N),\n    },\n    lx, ly, GX: new Float32Array(W * H), GY: new Float32Array(W * H), F: new Float32Array(W * H), tab: null,\n  };\n}\n\nfunction table(S) {\n  // Tables are cached by the quantised knob pair: Velocity in steps of 0.02,\n  // Patch in steps of 0.02.\n  const qv = round(S.vel * 50) / 50, qp = round(S.patch * 50) / 50, key = qv + \",\" + qp;\n  if (key === S.key) return;\n  S.key = key;\n  let T = S.cache.get(key);\n  if (!T) {\n    T = {\n      ...S.work, lx: S.lx, ly: S.ly, scale: 1, vals: new Float32Array(2 * YC * 128),\n      ZX: new Float32Array(ROWS * YC), ZY: new Float32Array(ROWS * YC),\n    };\n    build(T, 12 * qv * qv, 1.2 + 4.8 * qp);\n    if (S.cache.size > 6) S.cache.delete(S.cache.keys().next().value);\n    S.cache.set(key, T);\n  }\n  S.tab = T;\n}\n\n// Rows climbed per second.\nconst rate = (S) => 15 * S.vel * S.speed;\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.vel = cl(k[2], 1, 1.7);\n  S.patch = cl(k[3], 0, 1);\n  table(S);\n  const v = rate(S);\n  if (!S.warm) {\n    // Open so that 2.4 seconds in, a source is 40 LEDs below the top with the\n    // one before it already gone past.\n    const y0 = 40 + 2.4 * v;\n    S.src = [y0 - GAP, y0];\n    S.warm = true;\n  }\n  for (let i = 0; i \u003c S.src.length; i++) S.src[i] -= v * d;\n  while (S.src.length && S.src[0] \u003c -LT - 4) S.src.shift();\n  const last = S.src[S.src.length - 1];\n  if (last === undefined || last \u003c H + 6 - GAP) S.src.push(H + 6);\n  else if (input.btnPressed && input.btnPressed[0] && last \u003c H - 24) S.src.push(H + 6);\n  // Foam shed by each source stays where it fell on the still water and\n  // fades in about 0.4 seconds.\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  S.foamT += d * 60 * S.speed / 2;\n  for (const f of S.foam) f.life -= (d * S.speed) / 2 / 0.4;\n  S.foam = S.foam.filter((f) => f.life > 0);\n  while (S.foamT >= 1) {\n    S.foamT -= 1;\n    for (const ys of S.src)\n      if (ys > -4 && ys \u003c H + 4) {\n        const ang = random() * 2 * PI, r = rf * sqrt(random());\n        S.foam.push({ x: 31.5 + r * cos(ang), y: ys + 0.6 * r * sin(ang) + 1, life: 0.6 + 0.4 * random() });\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.tab) return;\n  const T = S.tab, { ZX, ZY } = T, GX = S.GX, GY = S.GY, F = S.F, c = S.c;\n  GX.fill(0);\n  GY.fill(0);\n  F.fill(0);\n  for (const f of S.foam) {\n    const x = round(f.x), y = round(f.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) F[y * W + x] = max(F[y * W + x], min(1, f.life) * 0.85);\n  }\n  // Each source lays its wake, row by row, from the table: x behind it,\n  // linear between table rows; the cross-track slope is odd in y.\n  for (const ys of S.src)\n    for (let y = max(0, Math.ceil(ys)); y \u003c H; y++) {\n      const fx = (y - ys) / DX;\n      if (fx >= ROWS - 1) break;\n      const r = floor(fx), w = fx - r, o0 = r * YC, o1 = o0 + YC;\n      for (let m = 0; m \u003c YC; m++) {\n        const gx = ZX[o0 + m] * (1 - w) + ZX[o1 + m] * w, gy = ZY[o0 + m] * (1 - w) + ZY[o1 + m] * w;\n        GY[y * W + 32 + m] += gx;\n        GX[y * W + 32 + m] += gy;\n        GY[y * W + 31 - m] += gx;\n        GX[y * W + 31 - m] -= gy;\n      }\n    }\n  const h0 = S.hue + 0.55, hh = h0 - floor(h0);\n  // Amber, gold and lime water read brown or olive at the calm level, so\n  // there the water is lifted to 0.74 and its shadow faces lean to crimson.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.22, 0.32, hh));\n  const base = 0.34 + 0.4 * warm, sat0 = 0.82 + 0.1 * warm;\n  const rf = 1.5 + 0.35 * (1.2 + 4.8 * S.patch);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Lit where the surface tilts towards the light.\n      const sh = -(GX[p] * S.lx + GY[p] * S.ly) * T.scale;\n      const up = sh > 0 ? min(1.4, sh) : 0, dn = sh \u003c 0 ? min(1, -sh) : 0;\n      let v = base + (1 - base) * pow(min(1, up), 0.75) - (base - 0.08 - 0.12 * warm) * pow(dn, 0.7);\n      let s = sat0 * (1 - 0.7 * sm(0.55, 1.25, up));\n      let hue = h0 + 0.03 * up - (0.02 + 0.08 * warm) * dn;\n      // The foam patch over each source.\n      let foam = F[p];\n      for (const ys of S.src) {\n        const dx = x - 31.5, dy = (y - ys) * 1.4, r2 = dx * dx + dy * dy;\n        if (r2 \u003c (rf + 1.5) * (rf + 1.5)) foam = max(foam, 1 - sm(rf - 1, rf + 1.5, sqrt(r2)));\n      }\n      if (foam > 0) {\n        v = v + (1 - v) * foam;\n        s *= 1 - foam;\n      }\n      hsv(hue, s, v, c);\n      display.setPixel(x, y, round(c[0] * 255), round(c[1] * 255), round(c[2] * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Velocity=1..1.7, Patch=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the water, once round the wheel. At 0 azure, at 0.15 indigo, at 0.3 magenta, at 0.45 crimson, at 0.5 orange, at 0.6 gold, at 0.75 green, at 0.9 jade. From orange to lime the calm water is lifted from 0.34 to 0.74 of full brightness and its shadowed faces lean to crimson, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 a source at Velocity 1 climbs 30 LEDs a second, crosses the panel in 4.3 seconds and the next one comes up from the bottom 6.3 seconds after it; at 0.2 everything runs ten times slower, at 3 half as fast again."},{"name":"Velocity","min":1,"max":1.7,"about":"The source's speed U. The wavelength of the transverse waves goes as U squared, 12 LEDs at 1, 22 at 1.35 and 35 at 1.7, and the source climbs from 30 to 51 LEDs a second (at Speed 2). The wedge does not change: its cusp lines meet the panel's sides 90 LEDs behind the source at every setting. With the patch the same size, a faster source makes more of the short divergent waves, until at 1.7 they outshine the transverse crests."},{"name":"Patch","min":0,"max":1,"about":"The size a of the Gaussian pressure patch that drives the wake, 1.2 LEDs at 0 to 6 at 1, and the foam over it grows from 4 to 8 LEDs across. A small patch makes short divergent waves and sharp cusps along the wedge lines; a large one smooths them away and leaves only the transverse crests, by 0.25 at Velocity 1 and by about 0.6 at Velocity 1.7."}],"start":[0,2,1,0.06],"measures":{"motion":1.1485,"detail":0.0308,"edges":0.1674,"complexity":1.0448,"coverage":0.995,"colour":0.1633,"drift":0.0493},"knobResponse":[0.3266,0.0627,0.0628,0.0605]},{"slug":"kettle","title":"Kettle","family":"kitchen","round":20,"note":"밤 부엌 조리대의 유리 전기 주전자가 128줄을 다 써요. 받침의 파란 LED 고리가 물을 밑에서 밝히는 동안 열판의 잔 기포가 떠올랐다 꺼지는 철을 지나 큰 기포가 들끓고, 김이 주둥이에서 패널 꼭대기까지 오르다가 스위치가 딸깍 꺼져요. K1 을 누르면 바로 켜거나 꺼요.","idea":"A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.","buttons":"K1 tap switches the kettle on or off now.","code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-kettle","type":"code","name":"kettle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower."},{"name":"Fill","min":1,"max":1.7,"about":"How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil."},{"name":"Cold","min":0,"max":1,"about":"How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it."}],"start":[0,2,1,0.06],"measures":{"motion":0.2843,"detail":0.0449,"edges":0.2669,"complexity":1.5413,"coverage":0.6281,"colour":0.1671,"drift":0.1681},"knobResponse":[0.1034,0.0699,0.0403,0.056]},{"slug":"kingfisher","title":"Kingfisher","family":"bird","round":20,"note":"강둑 단면이 오리나무 가지부터 강바닥 자갈까지 128줄을 다 써요. 물총새가 가지에서 머리를 까딱이며 물을 보다가 곧장 내리꽂혀 물보라와 거품 줄을 남기고, 피라미를 물고 올라와 가지에 두드린 뒤 삼켜요. K1 을 누르면 바로 뛰어들어요.","idea":"A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.","buttons":"K1 tap sends the kingfisher down now, or as soon as it is back on the branch.","code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","layer":{"id":"layer-kingfisher","type":"code","name":"kingfisher","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen."},{"name":"Fish","min":6,"max":60,"about":"How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner."},{"name":"Current","min":-1,"max":1,"about":"Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea."}],"start":[0,2,6,0.06],"measures":{"motion":0.0867,"detail":0.0496,"edges":0.2577,"complexity":2.0204,"coverage":0.9952,"colour":0.1732,"drift":0.0377},"knobResponse":[0.186,0.0476,0.0402,0.0555]},{"slug":"kingman-coalescent","title":"Kingman Coalescent","family":"data","round":39,"note":"64개체 모런 집단이 앞으로 살고, 패널은 지금 살아 있는 64개체의 가계도예요. 맨 아랫줄이 지금, 위로 갈수록 과거이고, 같은 조상의 자손이 붙어 서도록 열을 줄 세워서 좁은 블록이 위로 갈수록 합쳐지는 불꽃 그림이 돼요. 마지막 두 갈래가 만나는 데 걸리는 시간이 전체의 절반쯤이라 긴 이음매 하나가 위쪽을 가르고, 한 집안이 사라지면 공통 조상이 앞으로 뛰어요.","idea":"A Moran population of 64 runs forward one birth at a time while the panel draws the family tree of the living as a flame chart, now along the bottom row and the past going up, each LED in the colour of the ancestor its column came from at that time, so the narrow blocks at the bottom merge fast into a few wide ones, the last two take about as long to meet as all the others together, and when one of them dies out the common ancestor jumps forward and the panel takes the survivor's colours.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Kingman Coalescent\n// Family:  data\n// Idea:    A Moran population of 64 runs forward one birth at a time while the panel draws the family tree of the living as a flame chart, now along the bottom row and the past going up, each LED in the colour of the ancestor its column came from at that time, so the narrow blocks at the bottom merge fast into a few wide ones, the last two take about as long to meet as all the others together, and when one of them dies out the common ancestor jumps forward and the panel takes the survivor's colours.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kingman's coalescent (John Kingman, 1982), traced back through a Moran population (Patrick Moran, 1958)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Span=3..9, Speed=0.2..3, Width=1..4, Mutation=0..1\n//\n// Knob 1: Span. How far back the top row reaches, in units of Kingman time: N(N-1)/2 = 2016 Moran events, about 31 generations of the 64. At 3 a row is 48 events and the common ancestor of all 64 sits on average 1.97 units back, at row 83 of 128; at 6 at row 42; at 9 a row is 143 events, the tree crowds into the bottom 28 rows and above it the one line of ancestors shows its mutations as bands.\n// Knob 2: Speed. At 2 the population runs 0.06 units of Kingman time a second, 121 births, and the panel climbs 2.5 rows a second at Span 3; the common ancestor of all 64 moves forward on average every 17 seconds, by about 43 rows. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Width. LEDs for each traced individual. At 1 all 64 are traced, one column each, and a block gets its dark seam from two LEDs wide; at 2 the first 32 of the population's 64 places, at 3 the first 21, at 4 the first 16, each 4 LEDs with a seam. The common ancestor of a sample can also move back, when a newborn's line joins the sample's tree above it: at 4 it moves forward every 0.34 units of Kingman time and back every 0.5.\n// Knob 4: Mutation. The chance that a birth carries a mutation, which steps the child's hue 0.05 to 0.11 round the wheel either way. 0.03 at 0 and 0.066 at the start, about two along each line per unit of Kingman time, so the two families of the last split mostly differ in colour; at 1 0.63, nearly every row of every block steps and the blocks turn to stripes.\n\nconst W = 64, H = 128, N = 64;\n// One unit of Kingman time: N(N-1)/2 Moran events, in which a given pair of\n// lineages meets once on average going back.\nconst UNIT = (N * (N - 1)) / 2;\n// Every individual ever born gets an id, in order of birth; its parent, the\n// event it was born in and its hue sit in a ring of the last RING births.\nconst RING = 1 \u003c\u003c 16, MASK = RING - 1;\n// Kingman time run before the first frame, so the history covers the panel.\nconst BURN = 16;\n// Kingman time per second at Speed 1.\nconst RATE = 0.03;\nconst { floor, round, random, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, ev: 0, next: 0, acc: 0, n: 0, span: 3, speed: 2, mu: 0.05, shift: 0,\n    par: new Int32Array(RING), born: new Float64Array(RING), hue: new Float32Array(RING),\n    slot: new Int32Array(N), front: new Int32Array(N), tm: 0, order: new Int32Array(N), anc: new Int32Array(W * H),\n    c: [0, 0, 0],\n  };\n}\n\n// The founders: N individuals with no parent, born at event 0.\nfunction found(S) {\n  for (let i = 0; i \u003c N; i++) {\n    S.par[i] = -1;\n    S.born[i] = 0;\n    S.hue[i] = 0.58;\n    S.slot[i] = i;\n  }\n  S.next = N;\n  S.ev = 0;\n}\n\n// One Moran event: a parent picked at random has a child, which takes the\n// place of another individual picked at random, who dies.\nfunction event(S) {\n  const p = floor(random() * N);\n  let d = floor(random() * (N - 1));\n  if (d >= p) d++;\n  const id = S.next++, j = id & MASK, pa = S.slot[p];\n  S.ev++;\n  S.par[j] = pa;\n  S.born[j] = S.ev;\n  // A mutation, with chance mu: the hue steps a little either way.\n  let m = 0;\n  if (random() \u003c S.mu) m = (random() \u003c 0.5 ? -1 : 1) * (0.05 + 0.06 * random());\n  S.hue[j] = S.hue[pa & MASK] + m;\n  S.slot[d] = id;\n}\n\nconst parent = (S, a) => (a \u003c N || S.next - a > RING - 2 * N ? -1 : S.par[a & MASK]);\n\n// Going back from the first n slots, always stepping the youngest ancestor\n// to its parent, until one is left: returns that common ancestor and, in\n// S.tm, the Moran events back to the merge of the last two lineages.\nfunction mrca(S, n) {\n  const f = S.front;\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = S.slot[i];\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === a) dup = true;\n    if (!dup) f[k++] = a;\n  }\n  S.tm = 0;\n  while (k > 1) {\n    let m = 0;\n    for (let j = 1; j \u003c k; j++) if (f[j] > f[m]) m = j;\n    const a = f[m], q = parent(S, a);\n    if (q \u003c 0) return -1;\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === q) dup = true;\n    if (dup) {\n      f[m] = f[--k];\n      S.tm = S.ev - S.born[a & MASK] + 1;\n    } else f[m] = q;\n  }\n  return f[0];\n}\n\n// Order of two individuals in the flame chart: follow both lines back to\n// where they meet; the one that is that ancestor itself comes first,\n// otherwise the one whose line left it earlier. The order of two living\n// individuals never changes, so the chart only moves where they are born\n// and die.\nfunction cmp(S, a, b) {\n  let pa = -1, pb = -1;\n  while (a !== b) {\n    if (a > b) {\n      const q = parent(S, a);\n      if (q \u003c 0) return a - b;\n      pa = a;\n      a = q;\n    } else {\n      const q = parent(S, b);\n      if (q \u003c 0) return a - b;\n      pb = b;\n      b = q;\n    }\n  }\n  if (pa \u003c 0) return -1;\n  if (pb \u003c 0) return 1;\n  return pa - pb;\n}\n\nfunction sortOrder(S) {\n  const { order, slot } = S, n = S.n;\n  for (let i = 1; i \u003c n; i++) {\n    const v = order[i], id = slot[v];\n    let j = i - 1;\n    while (j >= 0 && cmp(S, slot[order[j]], id) > 0) {\n      order[j + 1] = order[j];\n      j--;\n    }\n    order[j + 1] = v;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.span = cl(k[0], 3, 9);\n  S.speed = cl(k[1], 0.2, 3);\n  const w = round(cl(k[2], 1, 4)), n = floor(W / w);\n  S.mu = 0.03 + 0.6 * cl(k[3], 0, 1);\n  if (!S.init) {\n    found(S);\n    for (let e = 0; e \u003c BURN * UNIT; e++) event(S);\n    // Run on until the traced tree is a typical one, its last merge between\n    // 0.8 and 1.3 times Kingman's mean 2(1 - 1/n) back, and turn the colours\n    // so that the common ancestor is azure.\n    const mean = 2 * (1 - 1 / n) * UNIT;\n    for (let tries = 0; tries \u003c 60; tries++) {\n      const a = mrca(S, n);\n      if (a >= 0 && S.tm > 0.8 * mean && S.tm \u003c 1.3 * mean) break;\n      for (let e = 0; e \u003c UNIT / 5; e++) event(S);\n    }\n    const a = mrca(S, n);\n    if (a >= 0) S.shift = 0.58 - S.hue[a & MASK];\n    S.init = true;\n  }\n  if (n !== S.n) {\n    S.n = n;\n    for (let i = 0; i \u003c n; i++) S.order[i] = i;\n  }\n  S.acc += d * S.speed * RATE * UNIT;\n  while (S.acc >= 1) {\n    event(S);\n    S.acc -= 1;\n  }\n  sortOrder(S);\n  // Each lineage's ancestor at each row's time. Rows sit on a grid of\n  // absolute times, so the picture climbs a whole row at a time.\n  const { anc, order, slot, born } = S, step = (S.span * UNIT) / (H - 1), K = floor(S.ev / step);\n  for (let i = 0; i \u003c n; i++) {\n    let a = slot[order[i]];\n    anc[i] = a;\n    for (let r = 1; r \u003c H; r++) {\n      const T = (K - r + 1) * step;\n      for (;;) {\n        if (born[a & MASK] \u003c= T) break;\n        const q = parent(S, a);\n        if (q \u003c 0) break;\n        a = q;\n      }\n      anc[r * W + i] = a;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { anc, hue, c } = S, n = S.n;\n  const col = new Int32Array(W);\n  for (let x = 0; x \u003c W; x++) col[x] = floor((x * n) / W);\n  let top = -1;\n  for (let r = 0; r \u003c H; r++) {\n    const row = r * W, y = H - 1 - r;\n    if (top \u003c 0 && anc[row] === anc[row + n - 1]) top = r;\n    const val = 1 - 0.12 * (r / (H - 1));\n    // Each block: a run of columns with one ancestor in this row. A dark\n    // seam takes its first column when it is two or more wide, and it is\n    // shaded round like a tube.\n    for (let x0 = 0; x0 \u003c W; ) {\n      const a = anc[row + col[x0]];\n      let x1 = x0 + 1;\n      while (x1 \u003c W && anc[row + col[x1]] === a) x1++;\n      const seam = x0 > 0 && x1 - x0 > 1 ? 1 : 0, l0 = x0 + seam, wd = x1 - l0;\n      hsv(hue[a & MASK] + S.shift, 0.68, val, c);\n      for (let x = x0; x \u003c x1; x++) {\n        if (x \u003c l0) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const sh = 0.66 + 0.34 * sin((PI * (x - l0 + 0.5)) / wd);\n        let R = c[0] * 255 * sh, G = c[1] * 255 * sh, B = c[2] * 255 * sh;\n        // A merge: two blocks of the row below meet here.\n        if (r > 0 && x > x0 && anc[row - W + col[x]] !== anc[row - W + col[x - 1]]) {\n          const g = r === top ? 0.95 : 0.7;\n          R += (255 - R) * g;\n          G += (255 - G) * g;\n          B += (255 - B) * g;\n        }\n        display.setPixel(x, y, round(R), round(G), round(B));\n      }\n      x0 = x1;\n    }\n  }\n}\n","layer":{"id":"layer-kingman-coalescent","type":"code","name":"kingman-coalescent","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kingman Coalescent\n// Family:  data\n// Idea:    A Moran population of 64 runs forward one birth at a time while the panel draws the family tree of the living as a flame chart, now along the bottom row and the past going up, each LED in the colour of the ancestor its column came from at that time, so the narrow blocks at the bottom merge fast into a few wide ones, the last two take about as long to meet as all the others together, and when one of them dies out the common ancestor jumps forward and the panel takes the survivor's colours.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kingman's coalescent (John Kingman, 1982), traced back through a Moran population (Patrick Moran, 1958)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Span=3..9, Speed=0.2..3, Width=1..4, Mutation=0..1\n//\n// Knob 1: Span. How far back the top row reaches, in units of Kingman time: N(N-1)/2 = 2016 Moran events, about 31 generations of the 64. At 3 a row is 48 events and the common ancestor of all 64 sits on average 1.97 units back, at row 83 of 128; at 6 at row 42; at 9 a row is 143 events, the tree crowds into the bottom 28 rows and above it the one line of ancestors shows its mutations as bands.\n// Knob 2: Speed. At 2 the population runs 0.06 units of Kingman time a second, 121 births, and the panel climbs 2.5 rows a second at Span 3; the common ancestor of all 64 moves forward on average every 17 seconds, by about 43 rows. At 0.2 ten times slower, at 3 one and a half times faster.\n// Knob 3: Width. LEDs for each traced individual. At 1 all 64 are traced, one column each, and a block gets its dark seam from two LEDs wide; at 2 the first 32 of the population's 64 places, at 3 the first 21, at 4 the first 16, each 4 LEDs with a seam. The common ancestor of a sample can also move back, when a newborn's line joins the sample's tree above it: at 4 it moves forward every 0.34 units of Kingman time and back every 0.5.\n// Knob 4: Mutation. The chance that a birth carries a mutation, which steps the child's hue 0.05 to 0.11 round the wheel either way. 0.03 at 0 and 0.066 at the start, about two along each line per unit of Kingman time, so the two families of the last split mostly differ in colour; at 1 0.63, nearly every row of every block steps and the blocks turn to stripes.\n\nconst W = 64, H = 128, N = 64;\n// One unit of Kingman time: N(N-1)/2 Moran events, in which a given pair of\n// lineages meets once on average going back.\nconst UNIT = (N * (N - 1)) / 2;\n// Every individual ever born gets an id, in order of birth; its parent, the\n// event it was born in and its hue sit in a ring of the last RING births.\nconst RING = 1 \u003c\u003c 16, MASK = RING - 1;\n// Kingman time run before the first frame, so the history covers the panel.\nconst BURN = 16;\n// Kingman time per second at Speed 1.\nconst RATE = 0.03;\nconst { floor, round, random, sin, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    init: false, ev: 0, next: 0, acc: 0, n: 0, span: 3, speed: 2, mu: 0.05, shift: 0,\n    par: new Int32Array(RING), born: new Float64Array(RING), hue: new Float32Array(RING),\n    slot: new Int32Array(N), front: new Int32Array(N), tm: 0, order: new Int32Array(N), anc: new Int32Array(W * H),\n    c: [0, 0, 0],\n  };\n}\n\n// The founders: N individuals with no parent, born at event 0.\nfunction found(S) {\n  for (let i = 0; i \u003c N; i++) {\n    S.par[i] = -1;\n    S.born[i] = 0;\n    S.hue[i] = 0.58;\n    S.slot[i] = i;\n  }\n  S.next = N;\n  S.ev = 0;\n}\n\n// One Moran event: a parent picked at random has a child, which takes the\n// place of another individual picked at random, who dies.\nfunction event(S) {\n  const p = floor(random() * N);\n  let d = floor(random() * (N - 1));\n  if (d >= p) d++;\n  const id = S.next++, j = id & MASK, pa = S.slot[p];\n  S.ev++;\n  S.par[j] = pa;\n  S.born[j] = S.ev;\n  // A mutation, with chance mu: the hue steps a little either way.\n  let m = 0;\n  if (random() \u003c S.mu) m = (random() \u003c 0.5 ? -1 : 1) * (0.05 + 0.06 * random());\n  S.hue[j] = S.hue[pa & MASK] + m;\n  S.slot[d] = id;\n}\n\nconst parent = (S, a) => (a \u003c N || S.next - a > RING - 2 * N ? -1 : S.par[a & MASK]);\n\n// Going back from the first n slots, always stepping the youngest ancestor\n// to its parent, until one is left: returns that common ancestor and, in\n// S.tm, the Moran events back to the merge of the last two lineages.\nfunction mrca(S, n) {\n  const f = S.front;\n  let k = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const a = S.slot[i];\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === a) dup = true;\n    if (!dup) f[k++] = a;\n  }\n  S.tm = 0;\n  while (k > 1) {\n    let m = 0;\n    for (let j = 1; j \u003c k; j++) if (f[j] > f[m]) m = j;\n    const a = f[m], q = parent(S, a);\n    if (q \u003c 0) return -1;\n    let dup = false;\n    for (let j = 0; j \u003c k; j++) if (f[j] === q) dup = true;\n    if (dup) {\n      f[m] = f[--k];\n      S.tm = S.ev - S.born[a & MASK] + 1;\n    } else f[m] = q;\n  }\n  return f[0];\n}\n\n// Order of two individuals in the flame chart: follow both lines back to\n// where they meet; the one that is that ancestor itself comes first,\n// otherwise the one whose line left it earlier. The order of two living\n// individuals never changes, so the chart only moves where they are born\n// and die.\nfunction cmp(S, a, b) {\n  let pa = -1, pb = -1;\n  while (a !== b) {\n    if (a > b) {\n      const q = parent(S, a);\n      if (q \u003c 0) return a - b;\n      pa = a;\n      a = q;\n    } else {\n      const q = parent(S, b);\n      if (q \u003c 0) return a - b;\n      pb = b;\n      b = q;\n    }\n  }\n  if (pa \u003c 0) return -1;\n  if (pb \u003c 0) return 1;\n  return pa - pb;\n}\n\nfunction sortOrder(S) {\n  const { order, slot } = S, n = S.n;\n  for (let i = 1; i \u003c n; i++) {\n    const v = order[i], id = slot[v];\n    let j = i - 1;\n    while (j >= 0 && cmp(S, slot[order[j]], id) > 0) {\n      order[j + 1] = order[j];\n      j--;\n    }\n    order[j + 1] = v;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [3, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.span = cl(k[0], 3, 9);\n  S.speed = cl(k[1], 0.2, 3);\n  const w = round(cl(k[2], 1, 4)), n = floor(W / w);\n  S.mu = 0.03 + 0.6 * cl(k[3], 0, 1);\n  if (!S.init) {\n    found(S);\n    for (let e = 0; e \u003c BURN * UNIT; e++) event(S);\n    // Run on until the traced tree is a typical one, its last merge between\n    // 0.8 and 1.3 times Kingman's mean 2(1 - 1/n) back, and turn the colours\n    // so that the common ancestor is azure.\n    const mean = 2 * (1 - 1 / n) * UNIT;\n    for (let tries = 0; tries \u003c 60; tries++) {\n      const a = mrca(S, n);\n      if (a >= 0 && S.tm > 0.8 * mean && S.tm \u003c 1.3 * mean) break;\n      for (let e = 0; e \u003c UNIT / 5; e++) event(S);\n    }\n    const a = mrca(S, n);\n    if (a >= 0) S.shift = 0.58 - S.hue[a & MASK];\n    S.init = true;\n  }\n  if (n !== S.n) {\n    S.n = n;\n    for (let i = 0; i \u003c n; i++) S.order[i] = i;\n  }\n  S.acc += d * S.speed * RATE * UNIT;\n  while (S.acc >= 1) {\n    event(S);\n    S.acc -= 1;\n  }\n  sortOrder(S);\n  // Each lineage's ancestor at each row's time. Rows sit on a grid of\n  // absolute times, so the picture climbs a whole row at a time.\n  const { anc, order, slot, born } = S, step = (S.span * UNIT) / (H - 1), K = floor(S.ev / step);\n  for (let i = 0; i \u003c n; i++) {\n    let a = slot[order[i]];\n    anc[i] = a;\n    for (let r = 1; r \u003c H; r++) {\n      const T = (K - r + 1) * step;\n      for (;;) {\n        if (born[a & MASK] \u003c= T) break;\n        const q = parent(S, a);\n        if (q \u003c 0) break;\n        a = q;\n      }\n      anc[r * W + i] = a;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  const { anc, hue, c } = S, n = S.n;\n  const col = new Int32Array(W);\n  for (let x = 0; x \u003c W; x++) col[x] = floor((x * n) / W);\n  let top = -1;\n  for (let r = 0; r \u003c H; r++) {\n    const row = r * W, y = H - 1 - r;\n    if (top \u003c 0 && anc[row] === anc[row + n - 1]) top = r;\n    const val = 1 - 0.12 * (r / (H - 1));\n    // Each block: a run of columns with one ancestor in this row. A dark\n    // seam takes its first column when it is two or more wide, and it is\n    // shaded round like a tube.\n    for (let x0 = 0; x0 \u003c W; ) {\n      const a = anc[row + col[x0]];\n      let x1 = x0 + 1;\n      while (x1 \u003c W && anc[row + col[x1]] === a) x1++;\n      const seam = x0 > 0 && x1 - x0 > 1 ? 1 : 0, l0 = x0 + seam, wd = x1 - l0;\n      hsv(hue[a & MASK] + S.shift, 0.68, val, c);\n      for (let x = x0; x \u003c x1; x++) {\n        if (x \u003c l0) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const sh = 0.66 + 0.34 * sin((PI * (x - l0 + 0.5)) / wd);\n        let R = c[0] * 255 * sh, G = c[1] * 255 * sh, B = c[2] * 255 * sh;\n        // A merge: two blocks of the row below meet here.\n        if (r > 0 && x > x0 && anc[row - W + col[x]] !== anc[row - W + col[x - 1]]) {\n          const g = r === top ? 0.95 : 0.7;\n          R += (255 - R) * g;\n          G += (255 - G) * g;\n          B += (255 - B) * g;\n        }\n        display.setPixel(x, y, round(R), round(G), round(B));\n      }\n      x0 = x1;\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Span=3..9, Speed=0.2..3, Width=1..4, Mutation=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Span","min":3,"max":9,"about":"How far back the top row reaches, in units of Kingman time: N(N-1)/2 = 2016 Moran events, about 31 generations of the 64. At 3 a row is 48 events and the common ancestor of all 64 sits on average 1.97 units back, at row 83 of 128; at 6 at row 42; at 9 a row is 143 events, the tree crowds into the bottom 28 rows and above it the one line of ancestors shows its mutations as bands."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the population runs 0.06 units of Kingman time a second, 121 births, and the panel climbs 2.5 rows a second at Span 3; the common ancestor of all 64 moves forward on average every 17 seconds, by about 43 rows. At 0.2 ten times slower, at 3 one and a half times faster."},{"name":"Width","min":1,"max":4,"about":"LEDs for each traced individual. At 1 all 64 are traced, one column each, and a block gets its dark seam from two LEDs wide; at 2 the first 32 of the population's 64 places, at 3 the first 21, at 4 the first 16, each 4 LEDs with a seam. The common ancestor of a sample can also move back, when a newborn's line joins the sample's tree above it: at 4 it moves forward every 0.34 units of Kingman time and back every 0.5."},{"name":"Mutation","min":0,"max":1,"about":"The chance that a birth carries a mutation, which steps the child's hue 0.05 to 0.11 round the wheel either way. 0.03 at 0 and 0.066 at the start, about two along each line per unit of Kingman time, so the two families of the last split mostly differ in colour; at 1 0.63, nearly every row of every block steps and the blocks turn to stripes."}],"start":[3,2,1,0.06],"measures":{"motion":1.2518,"detail":0.0417,"edges":0.3173,"complexity":1.0432,"coverage":0.967,"colour":0.4104,"drift":0.1027},"knobResponse":[0.1845,0.106,0.0643,0.2761]},{"slug":"kintsugi","title":"Kintsugi","family":"pottery","round":25,"note":"어두운 쪽빛 천 위의 청자 찻사발에 금이 가고, 조각들이 조금 벌어져 돌아요. 깨진 날에 붉은 옻과 금이 돈 다음 다시 붙어요. 위에 매달린 종이 등이 흔들리며 금빛 이음매에 반짝임을 지나가게 하고, K3 Mends 를 올릴수록 지나온 깨짐의 금빛 그물이 촘촘해져요. K1 을 누르면 사발이 바로 깨져요.","idea":"A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.","buttons":"K1 tap breaks the bowl now, while it stands whole.","code":"// ===== Patternflow pattern =====\n// Title:   Kintsugi\n// Family:  pottery\n// Idea:    A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after kintsugi, the Japanese mending of broken ware with urushi lacquer and powdered gold\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1\n//\n// Knob 1: Glaze. Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on.\n// Knob 2: Speed. At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower.\n// Knob 3: Mends. How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze.\n// Knob 4: Lamp. Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it.\n// Buttons: K1 tap breaks the bowl now, while it stands whole.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The bowl turned about x = CX, its foot on the cloth at FB, HT tall with a\n// rim RT across, seen a little from above: a circle r across shows E * r tall.\n// Its picture is kept in a band of rows from BY0, BH rows tall.\nconst CX = 32, FB = 104, HT = 40, E = 0.3, RT = 28, HORIZON = 84, BY0 = 52, BH = 58, NB = 64 * BH;\nconst R = (h) => (h \u003c 4 ? 11.5 : 13.6 + 14.4 * sin((min(1, (h - 4) / (HT - 4)) * PI) / 2) ** 0.75);\n\n// Each glaze and the colour it pools to, from celadon to raku black.\nconst GLAZE = [\n  [[112, 184, 150], [62, 134, 128]],\n  [[238, 230, 214], [238, 150, 96]],\n  [[240, 120, 44], [150, 60, 26]],\n  [[46, 42, 42], [92, 74, 62]],\n];\nconst CLAY = [206, 158, 116], BODY = [232, 212, 178], URUSHI = [184, 44, 30], GOLD = [255, 206, 86], OLDG = [236, 160, 64], GLINT = [255, 246, 216], SHEEN = [255, 238, 210];\nconst WALL = [92, 74, 56], WOOD = [104, 66, 40], CLOTH = [46, 62, 132];\n// Rest, crack, open, gild, close and shine, in seconds at Speed 2.\nconst DUR = [5, 0.45, 1.3, 2.4, 1.5, 1.2];\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, tau: 0, wd: 2.4, count: 0, mends: 2, glaze: 0, gs: 0, PX: 33, LX: 33, LY: 29, fade: 1, flare: 0,\n    mat: new Uint8Array(NB), nrm: F32(NB * 3), ao: F32(NB), mot: F32(NB), jit: F32(NB), sid: new Int32Array(NB), fid: new Int32Array(NB), off: new Uint8Array(16),\n    col: F32(NB * 3), f: F32(N * 3), bg: F32(N * 3), dust: [],\n  });\n  geometry(P);\n  // The breaks the bowl has already been through, oldest first.\n  for (let k = 0; k \u003c 8; k++) seams(P, crack(P, 4 + floor(rnd() * 3)), 1 + floor(rnd() * 3));\n  brk(P);\n  backdrop(P);\n  swing(P);\n}\n\n// Where each LED of the bowl's picture sits on it: outer wall, inside, lip or\n// foot, which way it faces, how much the bowl shades it, and the glaze's pooling.\nfunction geometry(P) {\n  const { mat, nrm, ao, mot, jit } = P;\n  for (let b = 0; b \u003c NB; b++) {\n    const x = b & 63, y = (b >> 6) + BY0, px = x + 0.5 - CX, h0 = FB - y - 0.5;\n    let h = h0, r = 0, u = 9, c = 0, n = null, m = 0, a = 1;\n    for (let it = 0; it \u003c 4; it++) {\n      r = R(h);\n      u = px / r;\n      c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n      h = h0 + E * r * c;\n    }\n    r = R(h);\n    u = px / r;\n    if (h >= 0 && h \u003c= HT && u * u \u003c 1) {\n      c = sqrt(1 - u * u);\n      const dR = (R(h + 0.6) - R(h - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = h \u003c 4 ? 4 : h > HT - 1.1 ? 3 : 1;\n      n = m === 3 ? [u * 0.5, 0.8, 0.35] : [u * nl, -dR * nl, c * nl];\n      a = m === 4 ? 0.8 : 1;\n    } else {\n      const ex = px / RT, ey = (y + 0.5 - (FB - HT)) / (E * RT), e2 = ex * ex + ey * ey;\n      if (e2 >= 1) continue;\n      // Inside: the far wall seen over the rim, darker the deeper it goes.\n      let hb = HT;\n      for (let it = 0; it \u003c 4; it++) {\n        r = R(hb);\n        u = cl(px / r, -1, 1);\n        c = sqrt(1 - u * u);\n        hb = cl(h0 - E * r * c, 4, HT);\n      }\n      const dR = (R(hb + 0.6) - R(hb - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = e2 > 0.84 && ey \u003c 0.2 ? 3 : 2;\n      n = m === 3 ? [ex * 0.5, 0.8, 0.35] : [-u * nl, dR * nl, c * nl];\n      a = m === 3 ? 1 : (0.3 + 0.7 * ((hb - 4) / (HT - 4)) ** 0.6) * (1 - 0.35 * sm(0.2, 0.95, ey));\n    }\n    mat[b] = m;\n    nrm.set(n, b * 3);\n    ao[b] = a;\n    mot[b] = sm(0.3, 0.85, 0.75 * vn(x / 4.5, y / 3.5) + 0.25 * hash(x, y + 999)) * (m === 2 ? 1 : 0.8);\n    jit[b] = (hash(x + 77, y) - 0.5) * 0.6;\n  }\n}\n\n// A break: the bowl's picture split into n shards with ragged edges, taller\n// than wide, like cracks that run down from the rim.\nfunction crack(P, n) {\n  const S = [], reg = new Uint8Array(NB), ox = rnd() * 400, oy = rnd() * 400;\n  while (S.length \u003c n) {\n    const b = floor(rnd() * NB);\n    if (P.mat[b]) S.push([(b & 63) + 0.5, (b >> 6) + 0.5]);\n  }\n  for (let b = 0; b \u003c NB; b++) {\n    if (!P.mat[b]) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + 0.5;\n    const wx = x + 5 * (vn(x / 7 + ox, y / 7 + oy) - 0.5) + 1.6 * (vn(x / 2 + oy, y / 2) - 0.5);\n    const wy = y + 5 * (vn(x / 7 + oy, y / 7 + ox + 50) - 0.5) + 1.6 * (vn(x / 2, y / 2 + ox) - 0.5);\n    let best = 1e9;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = wx - S[i][0], dy = (wy - S[i][1]) * 0.75, dd = dx * dx + dy * dy;\n      if (dd \u003c best) (best = dd), (reg[b] = i + 1);\n    }\n  }\n  // Most breaks also knock a chip out of the rim, and the gold fills it.\n  if (rnd() \u003c 0.8) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 3);\n    const r = 2.4 + rnd() * 1.8, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) if (reg[b] && ((b & 63) - cx) ** 2 + ((b >> 6) - cy) ** 2 \u003c r * r) reg[b] = 255;\n  }\n  // Some lose a shard for good, and a piece of another bowl is set in its\n  // place (yobitsugi).\n  if (rnd() \u003c 0.55) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 1 && P.mat[c] !== 2);\n    const r = 4.5 + rnd() * 2.5, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) {\n      const x = b & 63, y = b >> 6, dx = x - cx, dy = (y - cy) * 1.25;\n      if (reg[b] && reg[b] \u003c 255 && dx * dx + dy * dy \u003c (r * (0.75 + 0.5 * vn(x / 3 + ox, y / 3))) ** 2) reg[b] = 254;\n    }\n  }\n  return reg;\n}\n// One side of a crack (for the seam it leaves) or both (for the edges it opens).\nfunction edge(reg, b, both) {\n  const r = reg[b], x = b & 63;\n  if (!r) return false;\n  for (const nb of [x \u003c 63 ? b + 1 : -1, x > 0 ? b - 1 : -1, b + 64 \u003c NB ? b + 64 : -1, b - 64]) {\n    if (nb \u003c 0 || !reg[nb] || reg[nb] === r) continue;\n    if (both || reg[nb] > r) return true;\n  }\n  return false;\n}\n// A closed break becomes the newest seam, with its gold chip and the piece\n// from another bowl, glazed off glazes along.\nfunction seams(P, reg, off) {\n  const id = ++P.count;\n  P.off[id & 15] = off;\n  for (let b = 0; b \u003c NB; b++) {\n    if (reg[b] === 254) P.fid[b] = id;\n    if (reg[b] === 255 || edge(reg, b, 0)) P.sid[b] = id;\n  }\n}\n\n// The next break: its shards, which way each one drifts and turns, the\n// crack's run from where it is struck, and the order the gold goes round.\nfunction brk(P) {\n  const n = 4 + floor(rnd() * 3), reg = crack(P, n), S = [];\n  for (let i = 0; i \u003c n; i++) S.push({ cx: 0, cy: 0, c: 0, rad: 0, e: [] });\n  for (let b = 0; b \u003c NB; b++)\n    if (reg[b] && reg[b] \u003c 254) {\n      const s = S[reg[b] - 1];\n      (s.cx += (b & 63) + 0.5), (s.cy += (b >> 6) + BY0 + 0.5), s.c++;\n    }\n  for (const s of S) {\n    if (!s.c) continue;\n    (s.cx /= s.c), (s.cy /= s.c);\n    const dx = s.cx - CX, sg = dx \u003c 0 ? -1 : 1;\n    Object.assign(s, { tx: dx * 0.28 + sg * (1.5 + rnd() * 1.5), ty: (s.cy - 80) * 0.16 + 1 + rnd(), rot: (rnd() - 0.5) * 0.5, p: rnd() * TAU, o: rnd() });\n  }\n  const cb = new Uint8Array(NB), ce = new Uint8Array(NB), ga = F32(NB), cd = F32(NB);\n  let ib;\n  do ib = floor(rnd() * NB);\n  while (P.mat[ib] !== 1);\n  let md = 1;\n  for (let b = 0; b \u003c NB; b++) {\n    if (!reg[b] || reg[b] > 253) continue;\n    const s = S[reg[b] - 1], x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5;\n    const dx = s.cx - x, dy = s.cy - y;\n    s.rad = max(s.rad, sqrt(dx * dx + dy * dy) + 1.5);\n    if (edge(reg, b, 1)) (ce[b] = 1), s.e.push(b), (ga[b] = (atan2(dy, dx) / TAU + 0.5 + s.o) % 1);\n    if (edge(reg, b, 0)) (cb[b] = 1), (md = max(md, (cd[b] = sqrt((x - (ib & 63)) ** 2 + (y - (ib >> 6) - BY0) ** 2))));\n  }\n  for (let b = 0; b \u003c NB; b++) cd[b] /= md;\n  Object.assign(P, { reg, S, cb, ce, ga, cd, noff: 1 + floor(rnd() * 3), ix: (ib & 63) + 0.5, iy: (ib >> 6) + BY0 + 0.5 });\n}\n\n// The plaster wall with straw in it, the beam the lantern hangs from, and the\n// folded indigo cloth, before the lantern lights them.\nfunction backdrop(P) {\n  const B = P.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, q = hash(x, y);\n      let col, f;\n      if (y \u003c 3) (col = WOOD), (f = (y === 2 ? 0.55 : 0.9) * (0.85 + 0.15 * vn(x / 6, y)));\n      else if (y \u003c HORIZON) (col = WALL), (f = (0.86 + 0.2 * vn(x / 4, y / 4) + 0.04 * q) * (q > 0.985 ? 1.3 : 1));\n      else {\n        // Folds that run across the cloth and ease towards the front.\n        const v = 0.5 + 0.5 * sin(x * 0.11 - y * 0.17 + 2.2 * sin(y * 0.05 + x * 0.04)) * sin(x * 0.07 + y * 0.05 + 1);\n        (col = CLOTH), (f = (0.6 + 0.5 * v ** 1.4) * (0.94 + 0.06 * ((x + y) & 1)) * (y === HORIZON ? 1.35 : 1));\n      }\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f;\n    }\n}\n\nfunction swing(P) {\n  const w = (TAU / 6.5) * P.tau, a = 0.42 * sin(w) + 0.07 * sin(2.3 * w + 1);\n  P.LX = P.PX + 26 * sin(a);\n  P.LY = 3 + 26 * cos(a);\n}\n\nfunction go(P, ph) {\n  if (ph === 5) seams(P, P.reg, P.noff), brk(P);\n  if (ph === 0) P.wd = DUR[0];\n  P.ph = ph;\n  P.pt = 0;\n}\n\n// Where a shard is now: turned by th about its middle and moved by tx, ty.\nfunction place(P, s) {\n  const ph = P.ph, p = P.pt / DUR[ph], e = ph === 2 ? 1 - (1 - p) ** 3 : ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1, p) : 0;\n  const th = (s.rot + 0.05 * sin(P.tau * 1.1 + s.p)) * e;\n  return [cos(th), sin(th), s.cx + (s.tx + 0.8 * sin(P.tau * 1.7 + s.p)) * e, s.cy + (s.ty + 0.6 * cos(P.tau * 1.3 + s.p)) * e];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.glaze = cl(k[0], 0, 1);\n  P.mends = round(cl(k[2], 2, 8));\n  P.PX = 32 + 14 * cl(k[3], -1, 1);\n  P.tau += d;\n  if (input.btnPressed && input.btnPressed[0] && (P.ph === 0 || P.ph === 5)) go(P, 1);\n  if ((P.pt += d) >= (P.ph ? DUR[P.ph] : P.wd)) go(P, (P.ph + 1) % 6);\n  const p = P.pt / DUR[P.ph];\n  P.fade = P.ph === 3 ? 1 - sm(0.2, 1, p) : P.ph === 4 ? 0 : 1;\n  P.flare = P.ph === 5 ? 1 - p : 0;\n  swing(P);\n\n  // Gold powder dusted on the lacquer falls past the shards to the cloth.\n  if (P.ph === 3 && p > 0.3 && rnd() \u003c d * 16) {\n    const s = P.S[floor(rnd() * P.S.length)];\n    if (s.e.length) {\n      const b = s.e[floor(rnd() * s.e.length)], [co, si, tx, ty] = place(P, s), qx = (b & 63) + 0.5 - s.cx, qy = (b >> 6) + BY0 + 0.5 - s.cy;\n      P.dust.push([co * qx - si * qy + tx, si * qx + co * qy + ty, 0, FB + 5 + rnd() * 19, 1, rnd() * TAU]);\n    }\n  }\n  P.dust = P.dust.filter((q) => {\n    if (q[1] \u003c q[3]) (q[2] += 40 * d), (q[1] = min(q[3], q[1] + q[2] * d));\n    else q[4] -= d / 10;\n    return q[4] > 0;\n  });\n  if (P.dust.length > 90) P.dust.shift();\n}\n\n// The bowl's colours for this moment: glaze lit by the lantern, the seams of\n// the mends it carries, and the crack, the bare clay, the lacquer and the\n// gold of the break under way.\nfunction shade(P) {\n  // The bowl's glaze and the three others, round the ring of four.\n  const G = [0, 1, 2, 3].map((k) => {\n    const g = P.glaze * 3 + k, i = floor(g) % 4, f = g - floor(g);\n    return [0, 1].map((j) => GLAZE[i][j].map((v, n) => mix(v, GLAZE[(i + 1) % 4][j][n], f)));\n  });\n  const { mat, nrm, ao, mot, jit, sid, fid, col, LX, LY, ph, count, fade, flare } = P, lo = count - P.mends, p = P.pt / (ph ? DUR[ph] : P.wd);\n  const lac = ph === 3 ? sm(0, 0.5, p) * 1.05 : ph === 4 ? 2 : 0, gil = ph === 3 ? sm(0.3, 1, p) * 1.05 : ph === 4 ? 2 : 0, open = ph >= 2 && ph \u003c= 4;\n  const vis = (id) => (id > lo ? (id === lo + 1 ? fade : 1) : 0);\n  let gs = 0, r = 0, gg = 0, bb = 0, kg = 0, gl = 0;\n  const gold = (a, age, fl) => {\n    const t = min(1, age / 8);\n    gs += a * fl * (kg + gl);\n    r = mix(r, (mix(GOLD[0], OLDG[0], t) * kg + GLINT[0] * gl) * fl, a);\n    gg = mix(gg, (mix(GOLD[1], OLDG[1], t) * kg + GLINT[1] * gl) * fl, a);\n    bb = mix(bb, (mix(GOLD[2], OLDG[2], t) * kg + GLINT[2] * gl) * fl, a);\n  };\n  const flat = (c, k) => ((r = c[0] * k), (gg = c[1] * k), (bb = c[2] * k));\n  for (let b = 0; b \u003c NB; b++) {\n    const m = mat[b];\n    if (!m) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5, o = b * 3, nx = nrm[o], ny = nrm[o + 1], nz = nrm[o + 2];\n    let lx = LX - x, ly = y - LY, lz = 24;\n    const dd = lx * lx + ly * ly + lz * lz, il = 1 / sqrt(dd), fall = 0.55 + 0.6 * exp(-dd / 5000);\n    (lx *= il), (ly *= il), (lz *= il);\n    const hz = lz + 1, hl = 1 / sqrt(lx * lx + ly * ly + hz * hz), dif = max(0, nx * lx + ny * ly + nz * lz) * fall;\n    kg = 0.62 + 0.55 * dif;\n    gl = min(1.1, 1.7 * fall * max(0, ((nx + jit[b]) * lx + ny * ly + nz * hz) * hl) ** 30);\n    if (m === 4) flat(CLAY, (0.16 + 0.8 * dif) * ao[b]);\n    else {\n      // Glaze, or the piece of another bowl set into it.\n      const t = mot[b], fi = fid[b], nw = ph === 4 && P.reg[b] === 254, gk = nw ? P.noff : fi > lo ? P.off[fi & 15] : 0, ga = !nw && fi === lo + 1 ? fade : 1;\n      const k = (0.2 + 0.3 * max(0, -ny) + 0.95 * dif) * ao[b] * (m === 3 ? 1.15 : 1), sh = 0.6 * fall * max(0, (nx * lx + ny * ly + nz * hz) * hl) ** 24;\n      const A = G[0], B = G[gk];\n      r = mix(mix(A[0][0], A[1][0], t), mix(B[0][0], B[1][0], t), ga) * k + SHEEN[0] * sh;\n      gg = mix(mix(A[0][1], A[1][1], t), mix(B[0][1], B[1][1], t), ga) * k + SHEEN[1] * sh;\n      bb = mix(mix(A[0][2], A[1][2], t), mix(B[0][2], B[1][2], t), ga) * k + SHEEN[2] * sh;\n    }\n    const id = sid[b], a = vis(id);\n    if (open && P.ce[b]) {\n      // An opened edge: bare clay, then red lacquer, then gold.\n      const q = P.ga[b];\n      if (q \u003c gil) gold(1, 0, 1.15);\n      else if (q \u003c lac) flat(URUSHI, 0.5 + 0.6 * dif);\n      else flat(BODY, 0.45 + 0.7 * dif);\n    } else if (a > 0) gold(a, count - id, id === count ? 1 + 0.6 * flare : 1);\n    else if (flare > 0) {\n      // Fresh gold glows a little past the line it fills.\n      for (let j = 0; j \u003c 4; j++) {\n        const nb = b + (j === 0 ? 1 : j === 1 ? -1 : j === 2 ? 64 : -64);\n        if (nb >= 0 && nb \u003c NB && sid[nb] === count) {\n          gold(0.6 * flare, 0, 1);\n          break;\n        }\n      }\n    }\n    if (ph === 1 && P.cb[b] && P.cd[b] \u003c p * 1.6) (r *= 0.12), (gg *= 0.12), (bb *= 0.12);\n    (col[o] = r), (col[o + 1] = gg), (col[o + 2] = bb);\n  }\n  P.gs = gs;\n}\n\n// The wall and cloth lit by the lantern, the bowl's shadow thrown away from\n// it, and the warm light its gold throws down on the cloth.\nfunction back(P, F) {\n  const { LX, LY, bg } = P, sx = CX - (LX - CX) * 0.45, gx = CX + (LX - CX) * 0.3, gk = min(1.6, P.gs / 700);\n  // The glows fall off as a column term times a row term.\n  const X = [], Y = [];\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - LX) ** 2;\n    X.push([exp(-dx / 380), exp(-dx / 1400), exp(-dx / 1500), gk * exp(-((x + 0.5 - gx) ** 2) / 600)]);\n  }\n  for (let y = 0; y \u003c H; y++) Y.push([1.2 * exp(-((y + 0.5 - LY) ** 2) / 380), 0.3 * exp(-((y - LY) ** 2) / 4000), 0.9 * exp(-((y - 118) ** 2) / 700), exp(-((y - 111) ** 2) / 160)]);\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const [a, b, c, d] = Y[y], ey = (y + 0.5 - FB - 3) / 7;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const C = X[x];\n      if (y \u003c HORIZON) {\n        const k = 0.3 + a * C[0] + b * C[1];\n        (F[o] = bg[o] * k), (F[o + 1] = bg[o + 1] * k), (F[o + 2] = bg[o + 2] * k);\n        continue;\n      }\n      const ex = (x + 0.5 - sx) / 31, g = d * C[3] * (bg[o + 2] / CLOTH[2]);\n      let k = 0.42 + c * C[2];\n      if (ey * ey \u003c 1.4 && ex * ex \u003c 1.4) k *= 1 - 0.72 * sm(1.15, 0.55, sqrt(ex * ex + ey * ey));\n      k *= 1 + 0.7 * g;\n      (F[o] = bg[o] * k + 96 * g), (F[o + 1] = bg[o + 1] * k + 74 * g), (F[o + 2] = bg[o + 2] * k + 16 * g);\n    }\n  }\n}\n\nconst put = (F, x, y, c, k) => {\n  if ((x = floor(x)) >= 0 && x \u003c W && (y = floor(y)) >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// The paper lantern on its cord: ribs across the lit paper, black lacquer caps.\nfunction lantern(P, F) {\n  const { LX, LY, PX } = P;\n  for (let t = 0; t \u003c 1; t += 0.04) put(F, mix(PX, LX, t), mix(3, LY - 10, t), [70, 58, 46], 1);\n  for (let yy = -10; yy \u003c= 10; yy++) {\n    const y = round(LY) + yy, cap = yy \u003c= -9 || yy >= 9, w = cap ? 3.6 : 6.3 * sqrt(max(0, 1 - (yy / 9.6) ** 2)) + 0.4;\n    for (let x = floor(LX - w); x \u003c= LX + w; x++) {\n      const dx = x + 0.5 - LX, cov = cl(w - Math.abs(dx) + 0.5, 0, 1);\n      if (y \u003c 0 || x \u003c 0 || x >= W || !cov) continue;\n      const o = (y * W + x) * 3, q = dx / w, gl = 1 - q * q, rib = (yy + 9) % 3 ? 1 : 0.7;\n      for (let n = 0; n \u003c 3; n++) {\n        const c = cap ? [38, 30, 26][n] * (1.2 - 0.4 * q) : mix([236, 118, 44][n], [255, 226, 160][n], gl * (1 - (yy / 10) ** 2)) * rib;\n        F[o + n] = mix(F[o + n], c, cov);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.mat) return;\n  const F = P.f, { col, mat, ph } = P;\n  shade(P);\n  back(P, F);\n  lantern(P, F);\n  if (ph >= 2 && ph \u003c= 4) {\n    // Each shard drawn where it has drifted, read back through its turn.\n    for (let i = 0; i \u003c P.S.length; i++) {\n      const s = P.S[i];\n      if (!s.c) continue;\n      const [co, si, tx, ty] = place(P, s);\n      for (let y = max(0, floor(ty - s.rad)); y \u003c= min(H - 1, ty + s.rad); y++)\n        for (let x = max(0, floor(tx - s.rad)); x \u003c= min(W - 1, tx + s.rad); x++) {\n          const dx = x + 0.5 - tx, dy = y + 0.5 - ty, bx = floor(co * dx + si * dy + s.cx), by = floor(-si * dx + co * dy + s.cy) - BY0;\n          if (bx \u003c 0 || bx > 63 || by \u003c 0 || by >= BH) continue;\n          const b = by * 64 + bx, o = (y * W + x) * 3;\n          if (P.reg[b] === i + 1) (F[o] = col[b * 3]), (F[o + 1] = col[b * 3 + 1]), (F[o + 2] = col[b * 3 + 2]);\n        }\n    }\n    // The lost chip comes back as gold, and the lost shard as a piece of\n    // another bowl, as the shards close.\n    const a = ph === 4 ? sm(0.4, 1, P.pt / DUR[4]) : 0;\n    if (a) for (let b = 0, o = BY0 * W * 3; b \u003c NB; b++, o += 3) if (P.reg[b] > 253) for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], col[b * 3 + n], a);\n  } else for (let b = 0; b \u003c NB; b++) if (mat[b]) F.set(col.subarray(b * 3, b * 3 + 3), (BY0 * W + b) * 3);\n  // The ring of the strike.\n  if (ph === 1) {\n    const p = P.pt / DUR[1];\n    for (let y = -7; y \u003c= 7; y++)\n      for (let x = -7; x \u003c= 7; x++) {\n        const k = (1 - p) * exp(-(x * x + y * y) / (2 + 10 * p)), xx = floor(P.ix + x), yy = floor(P.iy + y);\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let n = 0, o = (yy * W + xx) * 3; n \u003c 3; n++) F[o + n] += 255 * k;\n      }\n  }\n  for (const q of P.dust) {\n    const x = floor(q[0]), y = floor(q[1]), k = q[1] \u003c q[3] ? 0.9 : q[4] * (0.25 + 0.75 * max(0, sin(q[5] + P.tau * 4)) ** 3);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = mix(F[o + n], GOLD[n], k);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-kintsugi","type":"code","name":"kintsugi","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kintsugi\n// Family:  pottery\n// Idea:    A tea bowl on a dark indigo cloth cracks, its shards drift a little apart and turn while lacquer and gold run along their broken edges, then close up again, and a swinging paper lantern sends a glint along the gold seams of every earlier mend.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after kintsugi, the Japanese mending of broken ware with urushi lacquer and powdered gold\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1\n//\n// Knob 1: Glaze. Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on.\n// Knob 2: Speed. At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower.\n// Knob 3: Mends. How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze.\n// Knob 4: Lamp. Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it.\n// Buttons: K1 tap breaks the bowl now, while it stands whole.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The bowl turned about x = CX, its foot on the cloth at FB, HT tall with a\n// rim RT across, seen a little from above: a circle r across shows E * r tall.\n// Its picture is kept in a band of rows from BY0, BH rows tall.\nconst CX = 32, FB = 104, HT = 40, E = 0.3, RT = 28, HORIZON = 84, BY0 = 52, BH = 58, NB = 64 * BH;\nconst R = (h) => (h \u003c 4 ? 11.5 : 13.6 + 14.4 * sin((min(1, (h - 4) / (HT - 4)) * PI) / 2) ** 0.75);\n\n// Each glaze and the colour it pools to, from celadon to raku black.\nconst GLAZE = [\n  [[112, 184, 150], [62, 134, 128]],\n  [[238, 230, 214], [238, 150, 96]],\n  [[240, 120, 44], [150, 60, 26]],\n  [[46, 42, 42], [92, 74, 62]],\n];\nconst CLAY = [206, 158, 116], BODY = [232, 212, 178], URUSHI = [184, 44, 30], GOLD = [255, 206, 86], OLDG = [236, 160, 64], GLINT = [255, 246, 216], SHEEN = [255, 238, 210];\nconst WALL = [92, 74, 56], WOOD = [104, 66, 40], CLOTH = [46, 62, 132];\n// Rest, crack, open, gild, close and shine, in seconds at Speed 2.\nconst DUR = [5, 0.45, 1.3, 2.4, 1.5, 1.2];\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, tau: 0, wd: 2.4, count: 0, mends: 2, glaze: 0, gs: 0, PX: 33, LX: 33, LY: 29, fade: 1, flare: 0,\n    mat: new Uint8Array(NB), nrm: F32(NB * 3), ao: F32(NB), mot: F32(NB), jit: F32(NB), sid: new Int32Array(NB), fid: new Int32Array(NB), off: new Uint8Array(16),\n    col: F32(NB * 3), f: F32(N * 3), bg: F32(N * 3), dust: [],\n  });\n  geometry(P);\n  // The breaks the bowl has already been through, oldest first.\n  for (let k = 0; k \u003c 8; k++) seams(P, crack(P, 4 + floor(rnd() * 3)), 1 + floor(rnd() * 3));\n  brk(P);\n  backdrop(P);\n  swing(P);\n}\n\n// Where each LED of the bowl's picture sits on it: outer wall, inside, lip or\n// foot, which way it faces, how much the bowl shades it, and the glaze's pooling.\nfunction geometry(P) {\n  const { mat, nrm, ao, mot, jit } = P;\n  for (let b = 0; b \u003c NB; b++) {\n    const x = b & 63, y = (b >> 6) + BY0, px = x + 0.5 - CX, h0 = FB - y - 0.5;\n    let h = h0, r = 0, u = 9, c = 0, n = null, m = 0, a = 1;\n    for (let it = 0; it \u003c 4; it++) {\n      r = R(h);\n      u = px / r;\n      c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n      h = h0 + E * r * c;\n    }\n    r = R(h);\n    u = px / r;\n    if (h >= 0 && h \u003c= HT && u * u \u003c 1) {\n      c = sqrt(1 - u * u);\n      const dR = (R(h + 0.6) - R(h - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = h \u003c 4 ? 4 : h > HT - 1.1 ? 3 : 1;\n      n = m === 3 ? [u * 0.5, 0.8, 0.35] : [u * nl, -dR * nl, c * nl];\n      a = m === 4 ? 0.8 : 1;\n    } else {\n      const ex = px / RT, ey = (y + 0.5 - (FB - HT)) / (E * RT), e2 = ex * ex + ey * ey;\n      if (e2 >= 1) continue;\n      // Inside: the far wall seen over the rim, darker the deeper it goes.\n      let hb = HT;\n      for (let it = 0; it \u003c 4; it++) {\n        r = R(hb);\n        u = cl(px / r, -1, 1);\n        c = sqrt(1 - u * u);\n        hb = cl(h0 - E * r * c, 4, HT);\n      }\n      const dR = (R(hb + 0.6) - R(hb - 0.6)) / 1.2, nl = 1 / sqrt(1 + dR * dR);\n      m = e2 > 0.84 && ey \u003c 0.2 ? 3 : 2;\n      n = m === 3 ? [ex * 0.5, 0.8, 0.35] : [-u * nl, dR * nl, c * nl];\n      a = m === 3 ? 1 : (0.3 + 0.7 * ((hb - 4) / (HT - 4)) ** 0.6) * (1 - 0.35 * sm(0.2, 0.95, ey));\n    }\n    mat[b] = m;\n    nrm.set(n, b * 3);\n    ao[b] = a;\n    mot[b] = sm(0.3, 0.85, 0.75 * vn(x / 4.5, y / 3.5) + 0.25 * hash(x, y + 999)) * (m === 2 ? 1 : 0.8);\n    jit[b] = (hash(x + 77, y) - 0.5) * 0.6;\n  }\n}\n\n// A break: the bowl's picture split into n shards with ragged edges, taller\n// than wide, like cracks that run down from the rim.\nfunction crack(P, n) {\n  const S = [], reg = new Uint8Array(NB), ox = rnd() * 400, oy = rnd() * 400;\n  while (S.length \u003c n) {\n    const b = floor(rnd() * NB);\n    if (P.mat[b]) S.push([(b & 63) + 0.5, (b >> 6) + 0.5]);\n  }\n  for (let b = 0; b \u003c NB; b++) {\n    if (!P.mat[b]) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + 0.5;\n    const wx = x + 5 * (vn(x / 7 + ox, y / 7 + oy) - 0.5) + 1.6 * (vn(x / 2 + oy, y / 2) - 0.5);\n    const wy = y + 5 * (vn(x / 7 + oy, y / 7 + ox + 50) - 0.5) + 1.6 * (vn(x / 2, y / 2 + ox) - 0.5);\n    let best = 1e9;\n    for (let i = 0; i \u003c n; i++) {\n      const dx = wx - S[i][0], dy = (wy - S[i][1]) * 0.75, dd = dx * dx + dy * dy;\n      if (dd \u003c best) (best = dd), (reg[b] = i + 1);\n    }\n  }\n  // Most breaks also knock a chip out of the rim, and the gold fills it.\n  if (rnd() \u003c 0.8) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 3);\n    const r = 2.4 + rnd() * 1.8, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) if (reg[b] && ((b & 63) - cx) ** 2 + ((b >> 6) - cy) ** 2 \u003c r * r) reg[b] = 255;\n  }\n  // Some lose a shard for good, and a piece of another bowl is set in its\n  // place (yobitsugi).\n  if (rnd() \u003c 0.55) {\n    let c;\n    do c = floor(rnd() * NB);\n    while (P.mat[c] !== 1 && P.mat[c] !== 2);\n    const r = 4.5 + rnd() * 2.5, cx = c & 63, cy = c >> 6;\n    for (let b = 0; b \u003c NB; b++) {\n      const x = b & 63, y = b >> 6, dx = x - cx, dy = (y - cy) * 1.25;\n      if (reg[b] && reg[b] \u003c 255 && dx * dx + dy * dy \u003c (r * (0.75 + 0.5 * vn(x / 3 + ox, y / 3))) ** 2) reg[b] = 254;\n    }\n  }\n  return reg;\n}\n// One side of a crack (for the seam it leaves) or both (for the edges it opens).\nfunction edge(reg, b, both) {\n  const r = reg[b], x = b & 63;\n  if (!r) return false;\n  for (const nb of [x \u003c 63 ? b + 1 : -1, x > 0 ? b - 1 : -1, b + 64 \u003c NB ? b + 64 : -1, b - 64]) {\n    if (nb \u003c 0 || !reg[nb] || reg[nb] === r) continue;\n    if (both || reg[nb] > r) return true;\n  }\n  return false;\n}\n// A closed break becomes the newest seam, with its gold chip and the piece\n// from another bowl, glazed off glazes along.\nfunction seams(P, reg, off) {\n  const id = ++P.count;\n  P.off[id & 15] = off;\n  for (let b = 0; b \u003c NB; b++) {\n    if (reg[b] === 254) P.fid[b] = id;\n    if (reg[b] === 255 || edge(reg, b, 0)) P.sid[b] = id;\n  }\n}\n\n// The next break: its shards, which way each one drifts and turns, the\n// crack's run from where it is struck, and the order the gold goes round.\nfunction brk(P) {\n  const n = 4 + floor(rnd() * 3), reg = crack(P, n), S = [];\n  for (let i = 0; i \u003c n; i++) S.push({ cx: 0, cy: 0, c: 0, rad: 0, e: [] });\n  for (let b = 0; b \u003c NB; b++)\n    if (reg[b] && reg[b] \u003c 254) {\n      const s = S[reg[b] - 1];\n      (s.cx += (b & 63) + 0.5), (s.cy += (b >> 6) + BY0 + 0.5), s.c++;\n    }\n  for (const s of S) {\n    if (!s.c) continue;\n    (s.cx /= s.c), (s.cy /= s.c);\n    const dx = s.cx - CX, sg = dx \u003c 0 ? -1 : 1;\n    Object.assign(s, { tx: dx * 0.28 + sg * (1.5 + rnd() * 1.5), ty: (s.cy - 80) * 0.16 + 1 + rnd(), rot: (rnd() - 0.5) * 0.5, p: rnd() * TAU, o: rnd() });\n  }\n  const cb = new Uint8Array(NB), ce = new Uint8Array(NB), ga = F32(NB), cd = F32(NB);\n  let ib;\n  do ib = floor(rnd() * NB);\n  while (P.mat[ib] !== 1);\n  let md = 1;\n  for (let b = 0; b \u003c NB; b++) {\n    if (!reg[b] || reg[b] > 253) continue;\n    const s = S[reg[b] - 1], x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5;\n    const dx = s.cx - x, dy = s.cy - y;\n    s.rad = max(s.rad, sqrt(dx * dx + dy * dy) + 1.5);\n    if (edge(reg, b, 1)) (ce[b] = 1), s.e.push(b), (ga[b] = (atan2(dy, dx) / TAU + 0.5 + s.o) % 1);\n    if (edge(reg, b, 0)) (cb[b] = 1), (md = max(md, (cd[b] = sqrt((x - (ib & 63)) ** 2 + (y - (ib >> 6) - BY0) ** 2))));\n  }\n  for (let b = 0; b \u003c NB; b++) cd[b] /= md;\n  Object.assign(P, { reg, S, cb, ce, ga, cd, noff: 1 + floor(rnd() * 3), ix: (ib & 63) + 0.5, iy: (ib >> 6) + BY0 + 0.5 });\n}\n\n// The plaster wall with straw in it, the beam the lantern hangs from, and the\n// folded indigo cloth, before the lantern lights them.\nfunction backdrop(P) {\n  const B = P.bg;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, q = hash(x, y);\n      let col, f;\n      if (y \u003c 3) (col = WOOD), (f = (y === 2 ? 0.55 : 0.9) * (0.85 + 0.15 * vn(x / 6, y)));\n      else if (y \u003c HORIZON) (col = WALL), (f = (0.86 + 0.2 * vn(x / 4, y / 4) + 0.04 * q) * (q > 0.985 ? 1.3 : 1));\n      else {\n        // Folds that run across the cloth and ease towards the front.\n        const v = 0.5 + 0.5 * sin(x * 0.11 - y * 0.17 + 2.2 * sin(y * 0.05 + x * 0.04)) * sin(x * 0.07 + y * 0.05 + 1);\n        (col = CLOTH), (f = (0.6 + 0.5 * v ** 1.4) * (0.94 + 0.06 * ((x + y) & 1)) * (y === HORIZON ? 1.35 : 1));\n      }\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f;\n    }\n}\n\nfunction swing(P) {\n  const w = (TAU / 6.5) * P.tau, a = 0.42 * sin(w) + 0.07 * sin(2.3 * w + 1);\n  P.LX = P.PX + 26 * sin(a);\n  P.LY = 3 + 26 * cos(a);\n}\n\nfunction go(P, ph) {\n  if (ph === 5) seams(P, P.reg, P.noff), brk(P);\n  if (ph === 0) P.wd = DUR[0];\n  P.ph = ph;\n  P.pt = 0;\n}\n\n// Where a shard is now: turned by th about its middle and moved by tx, ty.\nfunction place(P, s) {\n  const ph = P.ph, p = P.pt / DUR[ph], e = ph === 2 ? 1 - (1 - p) ** 3 : ph === 3 ? 1 : ph === 4 ? 1 - sm(0, 1, p) : 0;\n  const th = (s.rot + 0.05 * sin(P.tau * 1.1 + s.p)) * e;\n  return [cos(th), sin(th), s.cx + (s.tx + 0.8 * sin(P.tau * 1.7 + s.p)) * e, s.cy + (s.ty + 0.6 * cos(P.tau * 1.3 + s.p)) * e];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.glaze = cl(k[0], 0, 1);\n  P.mends = round(cl(k[2], 2, 8));\n  P.PX = 32 + 14 * cl(k[3], -1, 1);\n  P.tau += d;\n  if (input.btnPressed && input.btnPressed[0] && (P.ph === 0 || P.ph === 5)) go(P, 1);\n  if ((P.pt += d) >= (P.ph ? DUR[P.ph] : P.wd)) go(P, (P.ph + 1) % 6);\n  const p = P.pt / DUR[P.ph];\n  P.fade = P.ph === 3 ? 1 - sm(0.2, 1, p) : P.ph === 4 ? 0 : 1;\n  P.flare = P.ph === 5 ? 1 - p : 0;\n  swing(P);\n\n  // Gold powder dusted on the lacquer falls past the shards to the cloth.\n  if (P.ph === 3 && p > 0.3 && rnd() \u003c d * 16) {\n    const s = P.S[floor(rnd() * P.S.length)];\n    if (s.e.length) {\n      const b = s.e[floor(rnd() * s.e.length)], [co, si, tx, ty] = place(P, s), qx = (b & 63) + 0.5 - s.cx, qy = (b >> 6) + BY0 + 0.5 - s.cy;\n      P.dust.push([co * qx - si * qy + tx, si * qx + co * qy + ty, 0, FB + 5 + rnd() * 19, 1, rnd() * TAU]);\n    }\n  }\n  P.dust = P.dust.filter((q) => {\n    if (q[1] \u003c q[3]) (q[2] += 40 * d), (q[1] = min(q[3], q[1] + q[2] * d));\n    else q[4] -= d / 10;\n    return q[4] > 0;\n  });\n  if (P.dust.length > 90) P.dust.shift();\n}\n\n// The bowl's colours for this moment: glaze lit by the lantern, the seams of\n// the mends it carries, and the crack, the bare clay, the lacquer and the\n// gold of the break under way.\nfunction shade(P) {\n  // The bowl's glaze and the three others, round the ring of four.\n  const G = [0, 1, 2, 3].map((k) => {\n    const g = P.glaze * 3 + k, i = floor(g) % 4, f = g - floor(g);\n    return [0, 1].map((j) => GLAZE[i][j].map((v, n) => mix(v, GLAZE[(i + 1) % 4][j][n], f)));\n  });\n  const { mat, nrm, ao, mot, jit, sid, fid, col, LX, LY, ph, count, fade, flare } = P, lo = count - P.mends, p = P.pt / (ph ? DUR[ph] : P.wd);\n  const lac = ph === 3 ? sm(0, 0.5, p) * 1.05 : ph === 4 ? 2 : 0, gil = ph === 3 ? sm(0.3, 1, p) * 1.05 : ph === 4 ? 2 : 0, open = ph >= 2 && ph \u003c= 4;\n  const vis = (id) => (id > lo ? (id === lo + 1 ? fade : 1) : 0);\n  let gs = 0, r = 0, gg = 0, bb = 0, kg = 0, gl = 0;\n  const gold = (a, age, fl) => {\n    const t = min(1, age / 8);\n    gs += a * fl * (kg + gl);\n    r = mix(r, (mix(GOLD[0], OLDG[0], t) * kg + GLINT[0] * gl) * fl, a);\n    gg = mix(gg, (mix(GOLD[1], OLDG[1], t) * kg + GLINT[1] * gl) * fl, a);\n    bb = mix(bb, (mix(GOLD[2], OLDG[2], t) * kg + GLINT[2] * gl) * fl, a);\n  };\n  const flat = (c, k) => ((r = c[0] * k), (gg = c[1] * k), (bb = c[2] * k));\n  for (let b = 0; b \u003c NB; b++) {\n    const m = mat[b];\n    if (!m) continue;\n    const x = (b & 63) + 0.5, y = (b >> 6) + BY0 + 0.5, o = b * 3, nx = nrm[o], ny = nrm[o + 1], nz = nrm[o + 2];\n    let lx = LX - x, ly = y - LY, lz = 24;\n    const dd = lx * lx + ly * ly + lz * lz, il = 1 / sqrt(dd), fall = 0.55 + 0.6 * exp(-dd / 5000);\n    (lx *= il), (ly *= il), (lz *= il);\n    const hz = lz + 1, hl = 1 / sqrt(lx * lx + ly * ly + hz * hz), dif = max(0, nx * lx + ny * ly + nz * lz) * fall;\n    kg = 0.62 + 0.55 * dif;\n    gl = min(1.1, 1.7 * fall * max(0, ((nx + jit[b]) * lx + ny * ly + nz * hz) * hl) ** 30);\n    if (m === 4) flat(CLAY, (0.16 + 0.8 * dif) * ao[b]);\n    else {\n      // Glaze, or the piece of another bowl set into it.\n      const t = mot[b], fi = fid[b], nw = ph === 4 && P.reg[b] === 254, gk = nw ? P.noff : fi > lo ? P.off[fi & 15] : 0, ga = !nw && fi === lo + 1 ? fade : 1;\n      const k = (0.2 + 0.3 * max(0, -ny) + 0.95 * dif) * ao[b] * (m === 3 ? 1.15 : 1), sh = 0.6 * fall * max(0, (nx * lx + ny * ly + nz * hz) * hl) ** 24;\n      const A = G[0], B = G[gk];\n      r = mix(mix(A[0][0], A[1][0], t), mix(B[0][0], B[1][0], t), ga) * k + SHEEN[0] * sh;\n      gg = mix(mix(A[0][1], A[1][1], t), mix(B[0][1], B[1][1], t), ga) * k + SHEEN[1] * sh;\n      bb = mix(mix(A[0][2], A[1][2], t), mix(B[0][2], B[1][2], t), ga) * k + SHEEN[2] * sh;\n    }\n    const id = sid[b], a = vis(id);\n    if (open && P.ce[b]) {\n      // An opened edge: bare clay, then red lacquer, then gold.\n      const q = P.ga[b];\n      if (q \u003c gil) gold(1, 0, 1.15);\n      else if (q \u003c lac) flat(URUSHI, 0.5 + 0.6 * dif);\n      else flat(BODY, 0.45 + 0.7 * dif);\n    } else if (a > 0) gold(a, count - id, id === count ? 1 + 0.6 * flare : 1);\n    else if (flare > 0) {\n      // Fresh gold glows a little past the line it fills.\n      for (let j = 0; j \u003c 4; j++) {\n        const nb = b + (j === 0 ? 1 : j === 1 ? -1 : j === 2 ? 64 : -64);\n        if (nb >= 0 && nb \u003c NB && sid[nb] === count) {\n          gold(0.6 * flare, 0, 1);\n          break;\n        }\n      }\n    }\n    if (ph === 1 && P.cb[b] && P.cd[b] \u003c p * 1.6) (r *= 0.12), (gg *= 0.12), (bb *= 0.12);\n    (col[o] = r), (col[o + 1] = gg), (col[o + 2] = bb);\n  }\n  P.gs = gs;\n}\n\n// The wall and cloth lit by the lantern, the bowl's shadow thrown away from\n// it, and the warm light its gold throws down on the cloth.\nfunction back(P, F) {\n  const { LX, LY, bg } = P, sx = CX - (LX - CX) * 0.45, gx = CX + (LX - CX) * 0.3, gk = min(1.6, P.gs / 700);\n  // The glows fall off as a column term times a row term.\n  const X = [], Y = [];\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - LX) ** 2;\n    X.push([exp(-dx / 380), exp(-dx / 1400), exp(-dx / 1500), gk * exp(-((x + 0.5 - gx) ** 2) / 600)]);\n  }\n  for (let y = 0; y \u003c H; y++) Y.push([1.2 * exp(-((y + 0.5 - LY) ** 2) / 380), 0.3 * exp(-((y - LY) ** 2) / 4000), 0.9 * exp(-((y - 118) ** 2) / 700), exp(-((y - 111) ** 2) / 160)]);\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const [a, b, c, d] = Y[y], ey = (y + 0.5 - FB - 3) / 7;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const C = X[x];\n      if (y \u003c HORIZON) {\n        const k = 0.3 + a * C[0] + b * C[1];\n        (F[o] = bg[o] * k), (F[o + 1] = bg[o + 1] * k), (F[o + 2] = bg[o + 2] * k);\n        continue;\n      }\n      const ex = (x + 0.5 - sx) / 31, g = d * C[3] * (bg[o + 2] / CLOTH[2]);\n      let k = 0.42 + c * C[2];\n      if (ey * ey \u003c 1.4 && ex * ex \u003c 1.4) k *= 1 - 0.72 * sm(1.15, 0.55, sqrt(ex * ex + ey * ey));\n      k *= 1 + 0.7 * g;\n      (F[o] = bg[o] * k + 96 * g), (F[o + 1] = bg[o + 1] * k + 74 * g), (F[o + 2] = bg[o + 2] * k + 16 * g);\n    }\n  }\n}\n\nconst put = (F, x, y, c, k) => {\n  if ((x = floor(x)) >= 0 && x \u003c W && (y = floor(y)) >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = c[n] * k;\n};\n\n// The paper lantern on its cord: ribs across the lit paper, black lacquer caps.\nfunction lantern(P, F) {\n  const { LX, LY, PX } = P;\n  for (let t = 0; t \u003c 1; t += 0.04) put(F, mix(PX, LX, t), mix(3, LY - 10, t), [70, 58, 46], 1);\n  for (let yy = -10; yy \u003c= 10; yy++) {\n    const y = round(LY) + yy, cap = yy \u003c= -9 || yy >= 9, w = cap ? 3.6 : 6.3 * sqrt(max(0, 1 - (yy / 9.6) ** 2)) + 0.4;\n    for (let x = floor(LX - w); x \u003c= LX + w; x++) {\n      const dx = x + 0.5 - LX, cov = cl(w - Math.abs(dx) + 0.5, 0, 1);\n      if (y \u003c 0 || x \u003c 0 || x >= W || !cov) continue;\n      const o = (y * W + x) * 3, q = dx / w, gl = 1 - q * q, rib = (yy + 9) % 3 ? 1 : 0.7;\n      for (let n = 0; n \u003c 3; n++) {\n        const c = cap ? [38, 30, 26][n] * (1.2 - 0.4 * q) : mix([236, 118, 44][n], [255, 226, 160][n], gl * (1 - (yy / 10) ** 2)) * rib;\n        F[o + n] = mix(F[o + n], c, cov);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.mat) return;\n  const F = P.f, { col, mat, ph } = P;\n  shade(P);\n  back(P, F);\n  lantern(P, F);\n  if (ph >= 2 && ph \u003c= 4) {\n    // Each shard drawn where it has drifted, read back through its turn.\n    for (let i = 0; i \u003c P.S.length; i++) {\n      const s = P.S[i];\n      if (!s.c) continue;\n      const [co, si, tx, ty] = place(P, s);\n      for (let y = max(0, floor(ty - s.rad)); y \u003c= min(H - 1, ty + s.rad); y++)\n        for (let x = max(0, floor(tx - s.rad)); x \u003c= min(W - 1, tx + s.rad); x++) {\n          const dx = x + 0.5 - tx, dy = y + 0.5 - ty, bx = floor(co * dx + si * dy + s.cx), by = floor(-si * dx + co * dy + s.cy) - BY0;\n          if (bx \u003c 0 || bx > 63 || by \u003c 0 || by >= BH) continue;\n          const b = by * 64 + bx, o = (y * W + x) * 3;\n          if (P.reg[b] === i + 1) (F[o] = col[b * 3]), (F[o + 1] = col[b * 3 + 1]), (F[o + 2] = col[b * 3 + 2]);\n        }\n    }\n    // The lost chip comes back as gold, and the lost shard as a piece of\n    // another bowl, as the shards close.\n    const a = ph === 4 ? sm(0.4, 1, P.pt / DUR[4]) : 0;\n    if (a) for (let b = 0, o = BY0 * W * 3; b \u003c NB; b++, o += 3) if (P.reg[b] > 253) for (let n = 0; n \u003c 3; n++) F[o + n] = mix(F[o + n], col[b * 3 + n], a);\n  } else for (let b = 0; b \u003c NB; b++) if (mat[b]) F.set(col.subarray(b * 3, b * 3 + 3), (BY0 * W + b) * 3);\n  // The ring of the strike.\n  if (ph === 1) {\n    const p = P.pt / DUR[1];\n    for (let y = -7; y \u003c= 7; y++)\n      for (let x = -7; x \u003c= 7; x++) {\n        const k = (1 - p) * exp(-(x * x + y * y) / (2 + 10 * p)), xx = floor(P.ix + x), yy = floor(P.iy + y);\n        if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let n = 0, o = (yy * W + xx) * 3; n \u003c 3; n++) F[o + n] += 255 * k;\n      }\n  }\n  for (const q of P.dust) {\n    const x = floor(q[0]), y = floor(q[1]), k = q[1] \u003c q[3] ? 0.9 : q[4] * (0.25 + 0.75 * max(0, sin(q[5] + P.tau * 4)) ** 3);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let n = 0, o = (y * W + x) * 3; n \u003c 3; n++) F[o + n] = mix(F[o + n], GOLD[n], k);\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glaze=0..1, Speed=0.2..3, Mends=2..8, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glaze","min":0,"max":1,"about":"Celadon jade at 0, then shino white with its fire blush, persimmon kaki and raku black at 1. The foot ring stays bare clay, and the broken edges show the same clay before the lacquer goes on."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a break takes about six seconds from the crack to the closed seam, the bowl rests about six seconds between breaks and the lantern swings once in six and a half; at 0.2 it all runs ten times slower."},{"name":"Mends","min":2,"max":8,"about":"How many earlier breaks the bowl carries, from two to eight: their gold seams, the gold-filled chips in the rim and here and there a piece of another bowl set in where a shard was lost. The more gold, the more warm light it throws on the cloth. Each new mend lays bright gold, and the oldest wears back into the glaze."},{"name":"Lamp","min":-1,"max":1,"about":"Where the lantern hangs, from left of the bowl at -1 to right of it at 1. The lit side of the bowl, the glint on the gold, the pool of light on the cloth and the bowl's shadow move with it."}],"start":[0,2,2,0.06],"measures":{"motion":0.1906,"detail":0.0509,"edges":0.2812,"complexity":2.0844,"coverage":0.9972,"colour":0.1903,"drift":0.136},"knobResponse":[0.0565,0.1068,0.0529,0.1171]},{"slug":"kolakoski","title":"Kolakoski","family":"number","round":35,"note":"제 런 길이 부호와 같은 1 과 2 의 수열이 열 단의 고드름으로 매달려요. 맨 아래 단은 3,000번 항부터 64항이 LED 하나씩 금색 1 과 보라 2 로 서고, 그 위 단마다 아래 단의 런을 만든 항이 런 너비로 앉아 같은 수열이 단마다 3분의 2 로 줄며 왼쪽으로 한 항씩 흘러요. K3 은 단을 16 까지 늘리고, K1 을 누르면 창이 10만 항 뒤로 건너뛰어 맨 위 눈금이 1 이 4 개 앞선 자리에서 2 가 46 개 앞선 자리로 옮겨요.","idea":"The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.","buttons":"K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.","code":"// ===== Patternflow pattern =====\n// Title:   Kolakoski\n// Family:  number\n// Idea:    The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kolakoski sequence (William Kolakoski, 1965), pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1\n//\n// Knob 1: Hue. Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot.\n// Knob 2: Speed. Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s.\n// Knob 3: Bands. How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel.\n// Knob 4: Falloff. Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round.\n// Buttons: K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.\n\n// Term i of the sequence is the length of run i: 1, 2, 2, 1, 1, 2, 1 is a\n// run of one 1, one of two 2s, two 1s, one 2, one 1, ... and the runs\n// alternate 1s and 2s. So term k has K[k] children, the terms of run k,\n// and up[j] is the run that term j sits in: its parent. Term 0 and term 1\n// are their own parents, and every other term climbs to term 1, from term\n// 3,000 in 19 steps, from term 100,000 in 27.\n//\n// Rufus Oldenburger described it first in 1939; Kolakoski asked about it in\n// the American Mathematical Monthly in 1965. Keane's question, whether the\n// share of 1s tends to 1/2, is still open. Counted here: 49,972 1s in the\n// first 100,000 terms, 499,986 in the first million, and the 1s never run\n// more than 66 ahead of the 2s or behind them in all that way.\n\nconst W = 64, H = 128, N = 1 \u003c\u003c 20, W0 = 3000, JUMP = 100000, TOP = 3;\nconst { floor, max, round, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  // 2^20 terms, written by reading the sequence itself two terms behind the\n  // pen: 28 ms.\n  const K = new Uint8Array(N);\n  K[0] = 1;\n  K[1] = 2;\n  K[2] = 2;\n  for (let len = 3, read = 2, val = 1; len \u003c N; val = 3 - val)\n    for (let c = 0, r = K[read++]; c \u003c r && len \u003c N; c++) K[len++] = val;\n  const up = new Int32Array(N), ones = new Int32Array(N + 1);\n  for (let k = 0, pos = 0; pos \u003c N; k++) for (let c = 0; c \u003c K[k] && pos \u003c N; c++) up[pos++] = k;\n  for (let i = 0; i \u003c N; i++) ones[i + 1] = ones[i] + (K[i] === 1 ? 1 : 0);\n  params.s = {\n    K, up, ones, w: W0, acc: 0, hue: 0, speed: 2, bands: 10, fall: 0.06,\n    pal: new Float32Array(12), palHue: NaN, anc: new Int32Array(16 * W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.bands = round(cl(k[2], 10, 16));\n  P.fall = cl(k[3], -1, 1);\n  // Whole terms only: a window between two terms would smear every band.\n  P.acc += d * P.speed * 1.5;\n  while (P.acc >= 1) (P.acc -= 1), P.w++;\n  if (input.btnPressed && input.btnPressed[0]) P.w += JUMP;\n  if (P.w + W >= N) P.w = W0 + ((P.w - W0) % (N - W - W0));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { K, up, anc, pal } = P;\n  if (P.palHue !== P.hue) {\n    // Pale and full gold for the 1s, pale and deep violet for the 2s: each\n    // band runs from the first at its top row to the second at its foot.\n    // The gold keeps its brightness all the way down, as a darker gold\n    // reads olive, and where the knob turns the violet to red, orange or\n    // yellow it is lifted the same way.\n    const h2 = P.hue + 0.72 - floor(P.hue + 0.72), hw = h2 > 0.9 ? h2 - 1 : h2, warm = cl((hw + 0.06) / 0.08, 0, 1) * cl((0.32 - hw) / 0.08, 0, 1);\n    hsv(P.hue + 0.11, 0.28, 1, pal, 0);\n    hsv(P.hue + 0.11, 0.7, 1, pal, 3);\n    hsv(h2, 0.38, 0.8 + 0.15 * warm, pal, 6);\n    hsv(h2, 0.7, 0.56 + 0.36 * warm, pal, 9);\n    P.palHue = P.hue;\n  }\n  // anc[b W + x] is the ancestor b generations up of the term under column\n  // x. A band's term boundaries fall where this changes, so each term is\n  // exactly as wide as its descendants in the window.\n  const B = P.bands;\n  for (let x = 0; x \u003c W; x++)\n    for (let b = 0, j = P.w + x; b \u003c B; b++, j = up[j]) anc[b * W + x] = j;\n  // Band heights grow by `ratio` a band going up, with a dark row between\n  // bands; the top band takes what rounding leaves.\n  const avail = H - TOP - (B - 1), ratio = pow(1.3, P.fall);\n  let sum = 0;\n  for (let b = 0; b \u003c B; b++) sum += pow(ratio, b);\n  for (let b = 0, y = H; b \u003c B; b++) {\n    const hgt = b === B - 1 ? y - TOP : max(3, round((avail * pow(ratio, b)) / sum)), y0 = y - hgt, row = b * W;\n    for (let x = 0; x \u003c W; x++) {\n      const a = anc[row + x], v = K[a], o = (v - 1) * 6;\n      // Neighbours of different value part by colour. Two of the same, the\n      // two terms of one run, get a dark seam on the first column of the\n      // right one when it is two LEDs or more; two 1-LED terms run together\n      // and the band above tells them apart.\n      let g = 255;\n      if (x > 0 && anc[row + x - 1] !== a && K[anc[row + x - 1]] === v && x + 1 \u003c W && anc[row + x + 1] === a) g = 40;\n      for (let yy = y0; yy \u003c y; yy++) {\n        const t = hgt > 1 ? (yy - y0) / (hgt - 1) : 1, u = 1 - t;\n        display.setPixel(x, yy, (pal[o] * u + pal[o + 3] * t) * g, (pal[o + 1] * u + pal[o + 4] * t) * g, (pal[o + 2] * u + pal[o + 5] * t) * g);\n      }\n    }\n    if (y0 - 1 >= TOP) for (let x = 0; x \u003c W; x++) display.setPixel(x, y0 - 1, 0, 0, 0);\n    y = y0 - 1;\n  }\n  // The gauge: 1s minus 2s among the first w + 64 terms, half an LED a\n  // term from the middle, toward the gold side when the 1s are ahead. The\n  // track is dim violet on the left, dim gold on the right.\n  const n = P.w + W, lead = 2 * P.ones[n] - n, mx = cl(32 + round(lead / 2), 0, W - 1);\n  for (let x = 0; x \u003c W; x++) {\n    const o = x \u003c 32 ? 9 : 3, g = x === 32 ? 0 : 70;\n    for (let yy = 0; yy \u003c 2; yy++) {\n      if (x === mx) display.setPixel(x, yy, 255, 255, 255);\n      else if (g === 0) display.setPixel(x, yy, 110, 110, 110);\n      else display.setPixel(x, yy, pal[o] * g, pal[o + 1] * g, pal[o + 2] * g);\n    }\n    display.setPixel(x, 2, 0, 0, 0);\n  }\n}\n","layer":{"id":"layer-kolakoski","type":"code","name":"kolakoski","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kolakoski\n// Family:  number\n// Idea:    The Kolakoski sequence of 1s and 2s, the one that is its own run-length code, hangs as an icicle of ten bands: the bottom band is 64 consecutive terms one LED each, gold for 1 and violet for 2, and every band above holds the terms whose runs make the band below, each term as wide as the run it describes, so each band is the same sequence again with two thirds as many terms, the whole tree slides left one term at a time, and a slim gauge along the top shows how far the 1s so far are ahead of the 2s.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kolakoski sequence (William Kolakoski, 1965), pattern round 35\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1\n//\n// Knob 1: Hue. Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot.\n// Knob 2: Speed. Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s.\n// Knob 3: Bands. How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel.\n// Knob 4: Falloff. Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round.\n// Buttons: K1 tap jumps the window 100,000 terms on down the sequence, to 103,000 on the first tap, wrapping round before the million terms run out.\n\n// Term i of the sequence is the length of run i: 1, 2, 2, 1, 1, 2, 1 is a\n// run of one 1, one of two 2s, two 1s, one 2, one 1, ... and the runs\n// alternate 1s and 2s. So term k has K[k] children, the terms of run k,\n// and up[j] is the run that term j sits in: its parent. Term 0 and term 1\n// are their own parents, and every other term climbs to term 1, from term\n// 3,000 in 19 steps, from term 100,000 in 27.\n//\n// Rufus Oldenburger described it first in 1939; Kolakoski asked about it in\n// the American Mathematical Monthly in 1965. Keane's question, whether the\n// share of 1s tends to 1/2, is still open. Counted here: 49,972 1s in the\n// first 100,000 terms, 499,986 in the first million, and the 1s never run\n// more than 66 ahead of the 2s or behind them in all that way.\n\nconst W = 64, H = 128, N = 1 \u003c\u003c 20, W0 = 3000, JUMP = 100000, TOP = 3;\nconst { floor, max, round, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  // 2^20 terms, written by reading the sequence itself two terms behind the\n  // pen: 28 ms.\n  const K = new Uint8Array(N);\n  K[0] = 1;\n  K[1] = 2;\n  K[2] = 2;\n  for (let len = 3, read = 2, val = 1; len \u003c N; val = 3 - val)\n    for (let c = 0, r = K[read++]; c \u003c r && len \u003c N; c++) K[len++] = val;\n  const up = new Int32Array(N), ones = new Int32Array(N + 1);\n  for (let k = 0, pos = 0; pos \u003c N; k++) for (let c = 0; c \u003c K[k] && pos \u003c N; c++) up[pos++] = k;\n  for (let i = 0; i \u003c N; i++) ones[i + 1] = ones[i] + (K[i] === 1 ? 1 : 0);\n  params.s = {\n    K, up, ones, w: W0, acc: 0, hue: 0, speed: 2, bands: 10, fall: 0.06,\n    pal: new Float32Array(12), palHue: NaN, anc: new Int32Array(16 * W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 10, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.bands = round(cl(k[2], 10, 16));\n  P.fall = cl(k[3], -1, 1);\n  // Whole terms only: a window between two terms would smear every band.\n  P.acc += d * P.speed * 1.5;\n  while (P.acc >= 1) (P.acc -= 1), P.w++;\n  if (input.btnPressed && input.btnPressed[0]) P.w += JUMP;\n  if (P.w + W >= N) P.w = W0 + ((P.w - W0) % (N - W - W0));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { K, up, anc, pal } = P;\n  if (P.palHue !== P.hue) {\n    // Pale and full gold for the 1s, pale and deep violet for the 2s: each\n    // band runs from the first at its top row to the second at its foot.\n    // The gold keeps its brightness all the way down, as a darker gold\n    // reads olive, and where the knob turns the violet to red, orange or\n    // yellow it is lifted the same way.\n    const h2 = P.hue + 0.72 - floor(P.hue + 0.72), hw = h2 > 0.9 ? h2 - 1 : h2, warm = cl((hw + 0.06) / 0.08, 0, 1) * cl((0.32 - hw) / 0.08, 0, 1);\n    hsv(P.hue + 0.11, 0.28, 1, pal, 0);\n    hsv(P.hue + 0.11, 0.7, 1, pal, 3);\n    hsv(h2, 0.38, 0.8 + 0.15 * warm, pal, 6);\n    hsv(h2, 0.7, 0.56 + 0.36 * warm, pal, 9);\n    P.palHue = P.hue;\n  }\n  // anc[b W + x] is the ancestor b generations up of the term under column\n  // x. A band's term boundaries fall where this changes, so each term is\n  // exactly as wide as its descendants in the window.\n  const B = P.bands;\n  for (let x = 0; x \u003c W; x++)\n    for (let b = 0, j = P.w + x; b \u003c B; b++, j = up[j]) anc[b * W + x] = j;\n  // Band heights grow by `ratio` a band going up, with a dark row between\n  // bands; the top band takes what rounding leaves.\n  const avail = H - TOP - (B - 1), ratio = pow(1.3, P.fall);\n  let sum = 0;\n  for (let b = 0; b \u003c B; b++) sum += pow(ratio, b);\n  for (let b = 0, y = H; b \u003c B; b++) {\n    const hgt = b === B - 1 ? y - TOP : max(3, round((avail * pow(ratio, b)) / sum)), y0 = y - hgt, row = b * W;\n    for (let x = 0; x \u003c W; x++) {\n      const a = anc[row + x], v = K[a], o = (v - 1) * 6;\n      // Neighbours of different value part by colour. Two of the same, the\n      // two terms of one run, get a dark seam on the first column of the\n      // right one when it is two LEDs or more; two 1-LED terms run together\n      // and the band above tells them apart.\n      let g = 255;\n      if (x > 0 && anc[row + x - 1] !== a && K[anc[row + x - 1]] === v && x + 1 \u003c W && anc[row + x + 1] === a) g = 40;\n      for (let yy = y0; yy \u003c y; yy++) {\n        const t = hgt > 1 ? (yy - y0) / (hgt - 1) : 1, u = 1 - t;\n        display.setPixel(x, yy, (pal[o] * u + pal[o + 3] * t) * g, (pal[o + 1] * u + pal[o + 4] * t) * g, (pal[o + 2] * u + pal[o + 5] * t) * g);\n      }\n    }\n    if (y0 - 1 >= TOP) for (let x = 0; x \u003c W; x++) display.setPixel(x, y0 - 1, 0, 0, 0);\n    y = y0 - 1;\n  }\n  // The gauge: 1s minus 2s among the first w + 64 terms, half an LED a\n  // term from the middle, toward the gold side when the 1s are ahead. The\n  // track is dim violet on the left, dim gold on the right.\n  const n = P.w + W, lead = 2 * P.ones[n] - n, mx = cl(32 + round(lead / 2), 0, W - 1);\n  for (let x = 0; x \u003c W; x++) {\n    const o = x \u003c 32 ? 9 : 3, g = x === 32 ? 0 : 70;\n    for (let yy = 0; yy \u003c 2; yy++) {\n      if (x === mx) display.setPixel(x, yy, 255, 255, 255);\n      else if (g === 0) display.setPixel(x, yy, 110, 110, 110);\n      else display.setPixel(x, yy, pal[o] * g, pal[o + 1] * g, pal[o + 2] * g);\n    }\n    display.setPixel(x, 2, 0, 0, 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bands=10..16, Falloff=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both colours round the wheel together: at 0 the 1s are gold and the 2s violet, each band pale at its top and full at its foot."},{"name":"Speed","min":0.2,"max":3,"about":"Terms a second that the bottom band slides left: 1.5 per unit, so 3 at 2 and the 64 LEDs are new every 21 s; at 0.2 one term every 3.3 s."},{"name":"Bands","min":10,"max":16,"about":"How many generations of the tree are shown, from 10 to 16. Ten bands at the start reach from terms 3,000 to 3,063 at the bottom up to terms 77 to 79 at the top; 16 reach term 7, where one term covers more than the panel."},{"name":"Falloff","min":-1,"max":1,"about":"Band heights: at 0 all bands are equal, about 12 rows for ten; toward 1 each band is 1.3 times the height of the one below it, so the wide terms at the top get tall bands, and toward -1 the other way round."}],"start":[0,2,10,0.06],"measures":{"motion":0.3357,"detail":0.1184,"edges":0.9202,"complexity":0.2363,"coverage":0.9144,"colour":0.3543,"drift":0.0962},"knobResponse":[0.3404,0.1812,0.286,0.2965]},{"slug":"kuramoto-sivashinsky","title":"Kuramoto-Sivashinsky","family":"noise","round":37,"note":"쿠라모토-시바신스키 방정식을 패널 폭만 한 고리에서 한 열에 격자점 하나씩 풀고, 새 순간이 맨 위로 들어와 아래로 흘러서 128줄이 시공간 그림이 돼요. u 가 양인 청록 줄기와 음인 자홍 줄기가 흔들리고 갈라지고 합쳐지며 땋이고, u 가 0을 지나는 곳은 검게 비어요. K3 은 고리 길이를 22에서 66으로 늘려 두 줄기를 일곱 줄기로 만들고, K4 의 분산 항은 혼돈을 한쪽으로 기우는 펄스 열로 가라앉혀요. 누르면 앞면이 한 군데 패여요.","idea":"The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.","buttons":"K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.","code":"// ===== Patternflow pattern =====\n// Title:   Kuramoto-Sivashinsky\n// Family:  noise\n// Idea:    The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kuramoto-Sivashinsky equation (Yoshiki Kuramoto, 1976; Gregory Sivashinsky, 1977), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1\n//\n// Knob 1: Hue. Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal.\n// Knob 2: Speed. Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s.\n// Knob 3: Length. The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge.\n// Knob 4: Dispersion. A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative.\n// Buttons: K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.\n\n// The solver is ETDRK4, the exponential time-differencing Runge-Kutta\n// scheme of Steven Cox and Paul Matthews (2002), with the coefficients\n// taken as means round a circle in the complex plane, the way Aly-Khan\n// Kassam and Lloyd Trefethen (2005) do it, so they hold for every mode from\n// the growing ones to the most damped. In Fourier space\n//   v_t = (k^2 - k^4 + i delta k^3) v - (i k / 2) FFT(u^2),\n// the linear part solved exactly and only u^2 stepped, 0.25 time units a\n// step, five steps a row, 40 FFTs of size 64 a frame at Speed 2. At 0.4\n// time units a row the streaks hardly bent in 128 rows; at 1.25 they braid.\n//\n// Checked over 10,000 time units from the same start at delta 0:\n// - The energy, the mean of u^2, stays bounded: it averages 1.41 at L 22\n//   and 1.71 at L 66, and never passes 3.13.\n// - The fastest-growing wavelength is 2 pi sqrt 2, so a ring of length L\n//   should hold about L / 8.89 cells. Counting the positive humps of u\n//   (with a 0.4 dead band) gives 2.26 at L 22 against 2.48, 3.66 at 36\n//   against 4.05, 5.34 at 50 against 5.63 and 6.89 at 66 against 7.43:\n//   always 91 to 93 percent of it.\n// - 64 grid points resolve the ring up to L 66, where the highest mode\n//   never carries more than 0.65 percent of the largest. At L 100 it\n//   reached 21 percent, so the knob stops at 66.\nconst W = 64, H = 128, N = 64, STEP = 0.25, ROW = 1.25, RATE = 15, MC = 32, PRERUN = 100;\nconst { floor, exp, cos, sin, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// A complex FFT of size 64: bit reversal, then six rounds of butterflies.\nconst BR = new Uint8Array(N), CS = new Float64Array(N / 2), SN = new Float64Array(N / 2);\nfor (let i = 0; i \u003c N; i++) {\n  let r = 0;\n  for (let b = 0, v = i; b \u003c 6; b++, v >>= 1) r = (r \u003c\u003c 1) | (v & 1);\n  BR[i] = r;\n}\nfor (let k = 0; k \u003c N / 2; k++) (CS[k] = cos((TAU * k) / N)), (SN[k] = sin((TAU * k) / N));\n\nfunction fft(re, im, sign) {\n  for (let i = 0; i \u003c N; i++) {\n    const j = BR[i];\n    if (j > i) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let size = 2; size \u003c= N; size \u003c\u003c= 1) {\n    const half = size >> 1, step = N / size;\n    for (let i = 0; i \u003c N; i += size)\n      for (let k = 0; k \u003c half; k++) {\n        const wr = CS[k * step], wi = sign * SN[k * step], a = i + k, b = a + half;\n        const tr = re[b] * wr - im[b] * wi, ti = re[b] * wi + im[b] * wr;\n        re[b] = re[a] - tr;\n        im[b] = im[a] - ti;\n        re[a] += tr;\n        im[a] += ti;\n      }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\nconst f64 = () => new Float64Array(N);\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: -1, speed: 2, L: -1, delta: NaN, acc: 0, head: 0,\n    vr: f64(), vi: f64(), g: f64(),\n    Er: f64(), Ei: f64(), E2r: f64(), E2i: f64(), Qr: f64(), Qi: f64(),\n    f1r: f64(), f1i: f64(), f2r: f64(), f2i: f64(), f3r: f64(), f3i: f64(),\n    ar: f64(), ai: f64(), br: f64(), bi: f64(), cr: f64(), ci: f64(),\n    Nvr: f64(), Nvi: f64(), Nar: f64(), Nai: f64(), Nbr: f64(), Nbi: f64(), Ncr: f64(), Nci: f64(),\n    tr: f64(), ti: f64(), u: f64(),\n    hist: new Float32Array(H * N), next: new Float32Array(N), lut: new Uint8Array(2 * 257 * 3),\n  };\n}\n\n// The ETDRK4 coefficients for ring length L and dispersion delta. Mode n\n// has wavenumber k = 2 pi n / L for n below 32 and 2 pi (n - 64) / L above;\n// the Nyquist mode, n = 32, gets the damping of its true wavenumber but no\n// share of the nonlinear term, as an odd derivative cannot be taken there.\nfunction coefficients(S) {\n  const { L, delta, g } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const kk = (TAU * (n \u003c N / 2 ? n : n - N)) / L, kn = n === N / 2 ? (TAU * (N / 2)) / L : kk;\n    g[n] = n === N / 2 ? 0 : -0.5 * kk;\n    const zr = STEP * (kn * kn - kn * kn * kn * kn), zi = n === N / 2 ? 0 : STEP * delta * kk * kk * kk;\n    let em = exp(zr);\n    S.Er[n] = em * cos(zi);\n    S.Ei[n] = em * sin(zi);\n    em = exp(zr / 2);\n    S.E2r[n] = em * cos(zi / 2);\n    S.E2i[n] = em * sin(zi / 2);\n    let qr = 0, qi = 0, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0;\n    for (let j = 0; j \u003c MC; j++) {\n      const th = (TAU * (j + 0.5)) / MC, lr = zr + cos(th), li = zi + sin(th);\n      const ex = exp(lr), er = ex * cos(li), ei = ex * sin(li);\n      const hx = exp(lr / 2), hr = hx * cos(li / 2), hi = hx * sin(li / 2);\n      const l2r = lr * lr - li * li, l2i = 2 * lr * li;\n      const l3r = l2r * lr - l2i * li, l3i = l2r * li + l2i * lr;\n      const d1 = lr * lr + li * li, d3 = l3r * l3r + l3i * l3i;\n      qr += ((hr - 1) * lr + hi * li) / d1;\n      qi += (hi * lr - (hr - 1) * li) / d1;\n      let pr = 4 - 3 * lr + l2r, pi = -3 * li + l2i;\n      let nr = -4 - lr + er * pr - ei * pi, ni = -li + er * pi + ei * pr;\n      a1 += (nr * l3r + ni * l3i) / d3;\n      b1 += (ni * l3r - nr * l3i) / d3;\n      pr = lr - 2;\n      pi = li;\n      nr = 2 + lr + er * pr - ei * pi;\n      ni = li + er * pi + ei * pr;\n      a2 += (nr * l3r + ni * l3i) / d3;\n      b2 += (ni * l3r - nr * l3i) / d3;\n      pr = 4 - lr;\n      pi = -li;\n      nr = -4 - 3 * lr - l2r + er * pr - ei * pi;\n      ni = -3 * li - l2i + er * pi + ei * pr;\n      a3 += (nr * l3r + ni * l3i) / d3;\n      b3 += (ni * l3r - nr * l3i) / d3;\n    }\n    const m = STEP / MC;\n    S.Qr[n] = qr * m;\n    S.Qi[n] = qi * m;\n    S.f1r[n] = a1 * m;\n    S.f1i[n] = b1 * m;\n    S.f2r[n] = a2 * m;\n    S.f2i[n] = b2 * m;\n    S.f3r[n] = a3 * m;\n    S.f3i[n] = b3 * m;\n  }\n}\n\n// N(v) = -(i k / 2) FFT(u^2), u the real part of the inverse FFT of v.\nfunction nonlinear(S, xr, xi, outr, outi) {\n  const { tr, ti, g } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = xr[n]), (ti[n] = xi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) {\n    const u = tr[j] / N;\n    tr[j] = u * u;\n    ti[j] = 0;\n  }\n  fft(tr, ti, -1);\n  for (let n = 0; n \u003c N; n++) {\n    outr[n] = -g[n] * ti[n];\n    outi[n] = g[n] * tr[n];\n  }\n}\n\nfunction step(S) {\n  const { vr, vi, ar, ai, br, bi, cr, ci, Nvr, Nvi, Nar, Nai, Nbr, Nbi, Ncr, Nci, E2r, E2i, Qr, Qi } = S;\n  nonlinear(S, vr, vi, Nvr, Nvi);\n  for (let n = 0; n \u003c N; n++) {\n    ar[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nvr[n] - Qi[n] * Nvi[n];\n    ai[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nvi[n] + Qi[n] * Nvr[n];\n  }\n  nonlinear(S, ar, ai, Nar, Nai);\n  for (let n = 0; n \u003c N; n++) {\n    br[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nar[n] - Qi[n] * Nai[n];\n    bi[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nai[n] + Qi[n] * Nar[n];\n  }\n  nonlinear(S, br, bi, Nbr, Nbi);\n  for (let n = 0; n \u003c N; n++) {\n    const xr = 2 * Nbr[n] - Nvr[n], xi = 2 * Nbi[n] - Nvi[n];\n    cr[n] = E2r[n] * ar[n] - E2i[n] * ai[n] + Qr[n] * xr - Qi[n] * xi;\n    ci[n] = E2r[n] * ai[n] + E2i[n] * ar[n] + Qr[n] * xi + Qi[n] * xr;\n  }\n  nonlinear(S, cr, ci, Ncr, Nci);\n  const { Er, Ei, f1r, f1i, f2r, f2i, f3r, f3i } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const sr = Nar[n] + Nbr[n], si = Nai[n] + Nbi[n];\n    const nr =\n      Er[n] * vr[n] - Ei[n] * vi[n] +\n      (Nvr[n] * f1r[n] - Nvi[n] * f1i[n]) + 2 * (sr * f2r[n] - si * f2i[n]) + (Ncr[n] * f3r[n] - Nci[n] * f3i[n]);\n    const ni =\n      Er[n] * vi[n] + Ei[n] * vr[n] +\n      (Nvr[n] * f1i[n] + Nvi[n] * f1r[n]) + 2 * (sr * f2i[n] + si * f2r[n]) + (Ncr[n] * f3i[n] + Nci[n] * f3r[n]);\n    vr[n] = nr;\n    vi[n] = ni;\n  }\n  // u is real, so v_(64-n) is the conjugate of v_n. Round-off breaks that,\n  // and the broken part is invisible to u^2, so nothing holds it down: it\n  // grew at the linear rate of modes 2 and 3, 0.19 a time unit at L = 22,\n  // and blew the run up at t = 340. Folding it back each step keeps it at 0.\n  for (let n = 1; n \u003c N / 2; n++) {\n    const a = 0.5 * (vr[n] + vr[N - n]), b = 0.5 * (vi[n] - vi[N - n]);\n    vr[n] = vr[N - n] = a;\n    vi[n] = b;\n    vi[N - n] = -b;\n  }\n  vr[0] = vi[0] = vi[N / 2] = 0;\n}\n\n// u on the 64 grid points, one per column.\nfunction physical(S, out) {\n  const { tr, ti } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = S.vr[n]), (ti[n] = S.vi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) out[j] = tr[j] / N;\n}\n\nfunction advanceRow(S) {\n  for (let s = 0, n = round(ROW / STEP); s \u003c n; s++) step(S);\n}\n\n// The row just computed goes in at the head; `next` is one row ahead of it,\n// so the top of the panel can slide between the two.\nfunction pushRow(S) {\n  S.head = (S.head + H - 1) % H;\n  S.hist.set(S.next, S.head * N);\n  advanceRow(S);\n  physical(S, S.next);\n}\n\n// u is the slope of Sivashinsky's flame front, so a dent pushed into the\n// front shows in u as a dipole, up on one side and down on the other: the\n// derivative of a Gaussian, 4 columns wide, peaks of +-amp. It has no mean.\n// A plain bump had one, and taking it off shifted the whole row by 0.78,\n// a hard line straight across the diagram.\nfunction kick(S, x0, amp) {\n  const u = S.u;\n  physical(S, u);\n  for (let j = 0; j \u003c N; j++) {\n    let d = j - x0;\n    if (d > N / 2) d -= N;\n    if (d \u003c -N / 2) d += N;\n    const q = d / 4;\n    S.tr[j] = u[j] + amp * 1.6487 * q * exp(-0.5 * q * q);\n    S.ti[j] = 0;\n  }\n  fft(S.tr, S.ti, -1);\n  for (let n = 0; n \u003c N; n++) (S.vr[n] = S.tr[n]), (S.vi[n] = S.ti[n]);\n  S.vr[0] = S.vi[0] = 0;\n}\n\nfunction start(S) {\n  // Low modes with random phases, then PRERUN time units so the first\n  // frame is already chaos, then a full panel of history.\n  for (let n = 0; n \u003c N; n++) S.vr[n] = S.vi[n] = 0;\n  for (let n = 1; n \u003c= 6; n++) {\n    const ph = random() * TAU, a = (0.3 * N) / n;\n    S.vr[n] = a * cos(ph);\n    S.vi[n] = a * sin(ph);\n    S.vr[N - n] = a * cos(ph);\n    S.vi[N - n] = -a * sin(ph);\n  }\n  for (let s = 0, n = round(PRERUN / STEP); s \u003c n; s++) step(S);\n  physical(S, S.next);\n  for (let r = 0; r \u003c H; r++) pushRow(S);\n  S.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 22, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const L = cl(k[2], 22, 66), delta = cl(k[3], -1, 1);\n  if (L !== S.L || delta !== S.delta) {\n    S.L = L;\n    S.delta = delta;\n    coefficients(S);\n  }\n  if (!S.ready) start(S);\n  if (input.btnPressed && input.btnPressed[0]) kick(S, random() * N, 4);\n  S.acc += d * S.speed * RATE;\n  // 30 rows a second at 30 frames lands on 0.9999...; a hair of slack\n  // keeps it one row a frame instead of none and then two.\n  while (S.acc >= 1 - 1e-6) {\n    S.acc = Math.max(0, S.acc - 1);\n    pushRow(S);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  const lut = S.lut;\n  if (S.lutHue !== S.hue) {\n    // Two ramps of 257 steps, positive u then negative: black at zero,\n    // rising straight to full colour at |u| = 2.64, then paling to a tint at\n    // 3.3. A straight ramp keeps the steps between neighbours soft; the\n    // first, steeper ramp put a hard step on 23 percent of them.\n    for (let side = 0; side \u003c 2; side++) {\n      const h = S.hue + (side === 0 ? 0.5 : 0.86);\n      for (let i = 0; i \u003c= 256; i++) {\n        const a = i / 256, f = cl(a / 0.8, 0, 1), w = cl((a - 0.8) / 0.2, 0, 1);\n        hsv(h + 0.05 * (f - 1), 1 - 0.55 * w, f, lut, (side * 257 + i) * 3);\n      }\n    }\n    S.lutHue = S.hue;\n  }\n  // Pulses grow with the dispersion, |u| up to 3.5 at delta 0 and 4.7 at\n  // delta 1, so the map stretches with it and the pulses do not wash out pale.\n  const { hist, next, head, acc } = S, inv = 256 / (3.3 * (1 + 0.4 * abs(S.delta)));\n  for (let y = 0; y \u003c H; y++) {\n    // Display row y is `acc` of the way from history row y - 1 to row y,\n    // where row -1 is the one computed ahead.\n    const a = y - acc, r0 = floor(a), t = a - r0;\n    const A = r0 \u003c 0 ? next : null, o0 = ((head + r0 + H) % H) * N, o1 = ((head + r0 + 1) % H) * N;\n    for (let x = 0; x \u003c W; x++) {\n      const u0 = A ? A[x] : hist[o0 + x], u1 = r0 + 1 \u003c H ? hist[o1 + x] : u0;\n      const u = u0 + (u1 - u0) * t, i = Math.min(256, round(abs(u) * inv)), o = ((u \u003c 0 ? 257 : 0) + i) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-kuramoto-sivashinsky","type":"code","name":"kuramoto-sivashinsky","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kuramoto-Sivashinsky\n// Family:  noise\n// Idea:    The Kuramoto-Sivashinsky equation u_t + u u_x + u_xx + u_xxxx = 0 runs on a ring as wide as the panel, one grid point per column, and each new moment of u enters at the top and scrolls down, so the 128 rows are its space-time diagram: cyan streaks where u is positive and magenta where it is negative wobble, split and merge in a chaotic braid, black where u crosses zero.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kuramoto-Sivashinsky equation (Yoshiki Kuramoto, 1976; Gregory Sivashinsky, 1977), pattern round 37\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1\n//\n// Knob 1: Hue. Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal.\n// Knob 2: Speed. Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s.\n// Knob 3: Length. The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge.\n// Knob 4: Dispersion. A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative.\n// Buttons: K1 tap dents the front at a random place: u gets a dipole of plus and minus 4 there, its two halves run apart, as u above zero travels right and u below it left, and they leave a calm patch in the braid that the streaks fill in again over 1 to 3 s.\n\n// The solver is ETDRK4, the exponential time-differencing Runge-Kutta\n// scheme of Steven Cox and Paul Matthews (2002), with the coefficients\n// taken as means round a circle in the complex plane, the way Aly-Khan\n// Kassam and Lloyd Trefethen (2005) do it, so they hold for every mode from\n// the growing ones to the most damped. In Fourier space\n//   v_t = (k^2 - k^4 + i delta k^3) v - (i k / 2) FFT(u^2),\n// the linear part solved exactly and only u^2 stepped, 0.25 time units a\n// step, five steps a row, 40 FFTs of size 64 a frame at Speed 2. At 0.4\n// time units a row the streaks hardly bent in 128 rows; at 1.25 they braid.\n//\n// Checked over 10,000 time units from the same start at delta 0:\n// - The energy, the mean of u^2, stays bounded: it averages 1.41 at L 22\n//   and 1.71 at L 66, and never passes 3.13.\n// - The fastest-growing wavelength is 2 pi sqrt 2, so a ring of length L\n//   should hold about L / 8.89 cells. Counting the positive humps of u\n//   (with a 0.4 dead band) gives 2.26 at L 22 against 2.48, 3.66 at 36\n//   against 4.05, 5.34 at 50 against 5.63 and 6.89 at 66 against 7.43:\n//   always 91 to 93 percent of it.\n// - 64 grid points resolve the ring up to L 66, where the highest mode\n//   never carries more than 0.65 percent of the largest. At L 100 it\n//   reached 21 percent, so the knob stops at 66.\nconst W = 64, H = 128, N = 64, STEP = 0.25, ROW = 1.25, RATE = 15, MC = 32, PRERUN = 100;\nconst { floor, exp, cos, sin, abs, round, random, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// A complex FFT of size 64: bit reversal, then six rounds of butterflies.\nconst BR = new Uint8Array(N), CS = new Float64Array(N / 2), SN = new Float64Array(N / 2);\nfor (let i = 0; i \u003c N; i++) {\n  let r = 0;\n  for (let b = 0, v = i; b \u003c 6; b++, v >>= 1) r = (r \u003c\u003c 1) | (v & 1);\n  BR[i] = r;\n}\nfor (let k = 0; k \u003c N / 2; k++) (CS[k] = cos((TAU * k) / N)), (SN[k] = sin((TAU * k) / N));\n\nfunction fft(re, im, sign) {\n  for (let i = 0; i \u003c N; i++) {\n    const j = BR[i];\n    if (j > i) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let size = 2; size \u003c= N; size \u003c\u003c= 1) {\n    const half = size >> 1, step = N / size;\n    for (let i = 0; i \u003c N; i += size)\n      for (let k = 0; k \u003c half; k++) {\n        const wr = CS[k * step], wi = sign * SN[k * step], a = i + k, b = a + half;\n        const tr = re[b] * wr - im[b] * wi, ti = re[b] * wi + im[b] * wr;\n        re[b] = re[a] - tr;\n        im[b] = im[a] - ti;\n        re[a] += tr;\n        im[a] += ti;\n      }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = 255 * (i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p);\n  out[o + 1] = 255 * (i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p);\n  out[o + 2] = 255 * (i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p);\n}\n\nconst f64 = () => new Float64Array(N);\n\nexport function setup(params) {\n  params.s = {\n    ready: false, hue: -1, speed: 2, L: -1, delta: NaN, acc: 0, head: 0,\n    vr: f64(), vi: f64(), g: f64(),\n    Er: f64(), Ei: f64(), E2r: f64(), E2i: f64(), Qr: f64(), Qi: f64(),\n    f1r: f64(), f1i: f64(), f2r: f64(), f2i: f64(), f3r: f64(), f3i: f64(),\n    ar: f64(), ai: f64(), br: f64(), bi: f64(), cr: f64(), ci: f64(),\n    Nvr: f64(), Nvi: f64(), Nar: f64(), Nai: f64(), Nbr: f64(), Nbi: f64(), Ncr: f64(), Nci: f64(),\n    tr: f64(), ti: f64(), u: f64(),\n    hist: new Float32Array(H * N), next: new Float32Array(N), lut: new Uint8Array(2 * 257 * 3),\n  };\n}\n\n// The ETDRK4 coefficients for ring length L and dispersion delta. Mode n\n// has wavenumber k = 2 pi n / L for n below 32 and 2 pi (n - 64) / L above;\n// the Nyquist mode, n = 32, gets the damping of its true wavenumber but no\n// share of the nonlinear term, as an odd derivative cannot be taken there.\nfunction coefficients(S) {\n  const { L, delta, g } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const kk = (TAU * (n \u003c N / 2 ? n : n - N)) / L, kn = n === N / 2 ? (TAU * (N / 2)) / L : kk;\n    g[n] = n === N / 2 ? 0 : -0.5 * kk;\n    const zr = STEP * (kn * kn - kn * kn * kn * kn), zi = n === N / 2 ? 0 : STEP * delta * kk * kk * kk;\n    let em = exp(zr);\n    S.Er[n] = em * cos(zi);\n    S.Ei[n] = em * sin(zi);\n    em = exp(zr / 2);\n    S.E2r[n] = em * cos(zi / 2);\n    S.E2i[n] = em * sin(zi / 2);\n    let qr = 0, qi = 0, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0;\n    for (let j = 0; j \u003c MC; j++) {\n      const th = (TAU * (j + 0.5)) / MC, lr = zr + cos(th), li = zi + sin(th);\n      const ex = exp(lr), er = ex * cos(li), ei = ex * sin(li);\n      const hx = exp(lr / 2), hr = hx * cos(li / 2), hi = hx * sin(li / 2);\n      const l2r = lr * lr - li * li, l2i = 2 * lr * li;\n      const l3r = l2r * lr - l2i * li, l3i = l2r * li + l2i * lr;\n      const d1 = lr * lr + li * li, d3 = l3r * l3r + l3i * l3i;\n      qr += ((hr - 1) * lr + hi * li) / d1;\n      qi += (hi * lr - (hr - 1) * li) / d1;\n      let pr = 4 - 3 * lr + l2r, pi = -3 * li + l2i;\n      let nr = -4 - lr + er * pr - ei * pi, ni = -li + er * pi + ei * pr;\n      a1 += (nr * l3r + ni * l3i) / d3;\n      b1 += (ni * l3r - nr * l3i) / d3;\n      pr = lr - 2;\n      pi = li;\n      nr = 2 + lr + er * pr - ei * pi;\n      ni = li + er * pi + ei * pr;\n      a2 += (nr * l3r + ni * l3i) / d3;\n      b2 += (ni * l3r - nr * l3i) / d3;\n      pr = 4 - lr;\n      pi = -li;\n      nr = -4 - 3 * lr - l2r + er * pr - ei * pi;\n      ni = -3 * li - l2i + er * pi + ei * pr;\n      a3 += (nr * l3r + ni * l3i) / d3;\n      b3 += (ni * l3r - nr * l3i) / d3;\n    }\n    const m = STEP / MC;\n    S.Qr[n] = qr * m;\n    S.Qi[n] = qi * m;\n    S.f1r[n] = a1 * m;\n    S.f1i[n] = b1 * m;\n    S.f2r[n] = a2 * m;\n    S.f2i[n] = b2 * m;\n    S.f3r[n] = a3 * m;\n    S.f3i[n] = b3 * m;\n  }\n}\n\n// N(v) = -(i k / 2) FFT(u^2), u the real part of the inverse FFT of v.\nfunction nonlinear(S, xr, xi, outr, outi) {\n  const { tr, ti, g } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = xr[n]), (ti[n] = xi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) {\n    const u = tr[j] / N;\n    tr[j] = u * u;\n    ti[j] = 0;\n  }\n  fft(tr, ti, -1);\n  for (let n = 0; n \u003c N; n++) {\n    outr[n] = -g[n] * ti[n];\n    outi[n] = g[n] * tr[n];\n  }\n}\n\nfunction step(S) {\n  const { vr, vi, ar, ai, br, bi, cr, ci, Nvr, Nvi, Nar, Nai, Nbr, Nbi, Ncr, Nci, E2r, E2i, Qr, Qi } = S;\n  nonlinear(S, vr, vi, Nvr, Nvi);\n  for (let n = 0; n \u003c N; n++) {\n    ar[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nvr[n] - Qi[n] * Nvi[n];\n    ai[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nvi[n] + Qi[n] * Nvr[n];\n  }\n  nonlinear(S, ar, ai, Nar, Nai);\n  for (let n = 0; n \u003c N; n++) {\n    br[n] = E2r[n] * vr[n] - E2i[n] * vi[n] + Qr[n] * Nar[n] - Qi[n] * Nai[n];\n    bi[n] = E2r[n] * vi[n] + E2i[n] * vr[n] + Qr[n] * Nai[n] + Qi[n] * Nar[n];\n  }\n  nonlinear(S, br, bi, Nbr, Nbi);\n  for (let n = 0; n \u003c N; n++) {\n    const xr = 2 * Nbr[n] - Nvr[n], xi = 2 * Nbi[n] - Nvi[n];\n    cr[n] = E2r[n] * ar[n] - E2i[n] * ai[n] + Qr[n] * xr - Qi[n] * xi;\n    ci[n] = E2r[n] * ai[n] + E2i[n] * ar[n] + Qr[n] * xi + Qi[n] * xr;\n  }\n  nonlinear(S, cr, ci, Ncr, Nci);\n  const { Er, Ei, f1r, f1i, f2r, f2i, f3r, f3i } = S;\n  for (let n = 0; n \u003c N; n++) {\n    const sr = Nar[n] + Nbr[n], si = Nai[n] + Nbi[n];\n    const nr =\n      Er[n] * vr[n] - Ei[n] * vi[n] +\n      (Nvr[n] * f1r[n] - Nvi[n] * f1i[n]) + 2 * (sr * f2r[n] - si * f2i[n]) + (Ncr[n] * f3r[n] - Nci[n] * f3i[n]);\n    const ni =\n      Er[n] * vi[n] + Ei[n] * vr[n] +\n      (Nvr[n] * f1i[n] + Nvi[n] * f1r[n]) + 2 * (sr * f2i[n] + si * f2r[n]) + (Ncr[n] * f3i[n] + Nci[n] * f3r[n]);\n    vr[n] = nr;\n    vi[n] = ni;\n  }\n  // u is real, so v_(64-n) is the conjugate of v_n. Round-off breaks that,\n  // and the broken part is invisible to u^2, so nothing holds it down: it\n  // grew at the linear rate of modes 2 and 3, 0.19 a time unit at L = 22,\n  // and blew the run up at t = 340. Folding it back each step keeps it at 0.\n  for (let n = 1; n \u003c N / 2; n++) {\n    const a = 0.5 * (vr[n] + vr[N - n]), b = 0.5 * (vi[n] - vi[N - n]);\n    vr[n] = vr[N - n] = a;\n    vi[n] = b;\n    vi[N - n] = -b;\n  }\n  vr[0] = vi[0] = vi[N / 2] = 0;\n}\n\n// u on the 64 grid points, one per column.\nfunction physical(S, out) {\n  const { tr, ti } = S;\n  for (let n = 0; n \u003c N; n++) (tr[n] = S.vr[n]), (ti[n] = S.vi[n]);\n  fft(tr, ti, 1);\n  for (let j = 0; j \u003c N; j++) out[j] = tr[j] / N;\n}\n\nfunction advanceRow(S) {\n  for (let s = 0, n = round(ROW / STEP); s \u003c n; s++) step(S);\n}\n\n// The row just computed goes in at the head; `next` is one row ahead of it,\n// so the top of the panel can slide between the two.\nfunction pushRow(S) {\n  S.head = (S.head + H - 1) % H;\n  S.hist.set(S.next, S.head * N);\n  advanceRow(S);\n  physical(S, S.next);\n}\n\n// u is the slope of Sivashinsky's flame front, so a dent pushed into the\n// front shows in u as a dipole, up on one side and down on the other: the\n// derivative of a Gaussian, 4 columns wide, peaks of +-amp. It has no mean.\n// A plain bump had one, and taking it off shifted the whole row by 0.78,\n// a hard line straight across the diagram.\nfunction kick(S, x0, amp) {\n  const u = S.u;\n  physical(S, u);\n  for (let j = 0; j \u003c N; j++) {\n    let d = j - x0;\n    if (d > N / 2) d -= N;\n    if (d \u003c -N / 2) d += N;\n    const q = d / 4;\n    S.tr[j] = u[j] + amp * 1.6487 * q * exp(-0.5 * q * q);\n    S.ti[j] = 0;\n  }\n  fft(S.tr, S.ti, -1);\n  for (let n = 0; n \u003c N; n++) (S.vr[n] = S.tr[n]), (S.vi[n] = S.ti[n]);\n  S.vr[0] = S.vi[0] = 0;\n}\n\nfunction start(S) {\n  // Low modes with random phases, then PRERUN time units so the first\n  // frame is already chaos, then a full panel of history.\n  for (let n = 0; n \u003c N; n++) S.vr[n] = S.vi[n] = 0;\n  for (let n = 1; n \u003c= 6; n++) {\n    const ph = random() * TAU, a = (0.3 * N) / n;\n    S.vr[n] = a * cos(ph);\n    S.vi[n] = a * sin(ph);\n    S.vr[N - n] = a * cos(ph);\n    S.vi[N - n] = -a * sin(ph);\n  }\n  for (let s = 0, n = round(PRERUN / STEP); s \u003c n; s++) step(S);\n  physical(S, S.next);\n  for (let r = 0; r \u003c H; r++) pushRow(S);\n  S.ready = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 22, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const L = cl(k[2], 22, 66), delta = cl(k[3], -1, 1);\n  if (L !== S.L || delta !== S.delta) {\n    S.L = L;\n    S.delta = delta;\n    coefficients(S);\n  }\n  if (!S.ready) start(S);\n  if (input.btnPressed && input.btnPressed[0]) kick(S, random() * N, 4);\n  S.acc += d * S.speed * RATE;\n  // 30 rows a second at 30 frames lands on 0.9999...; a hair of slack\n  // keeps it one row a frame instead of none and then two.\n  while (S.acc >= 1 - 1e-6) {\n    S.acc = Math.max(0, S.acc - 1);\n    pushRow(S);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.ready) return;\n  const lut = S.lut;\n  if (S.lutHue !== S.hue) {\n    // Two ramps of 257 steps, positive u then negative: black at zero,\n    // rising straight to full colour at |u| = 2.64, then paling to a tint at\n    // 3.3. A straight ramp keeps the steps between neighbours soft; the\n    // first, steeper ramp put a hard step on 23 percent of them.\n    for (let side = 0; side \u003c 2; side++) {\n      const h = S.hue + (side === 0 ? 0.5 : 0.86);\n      for (let i = 0; i \u003c= 256; i++) {\n        const a = i / 256, f = cl(a / 0.8, 0, 1), w = cl((a - 0.8) / 0.2, 0, 1);\n        hsv(h + 0.05 * (f - 1), 1 - 0.55 * w, f, lut, (side * 257 + i) * 3);\n      }\n    }\n    S.lutHue = S.hue;\n  }\n  // Pulses grow with the dispersion, |u| up to 3.5 at delta 0 and 4.7 at\n  // delta 1, so the map stretches with it and the pulses do not wash out pale.\n  const { hist, next, head, acc } = S, inv = 256 / (3.3 * (1 + 0.4 * abs(S.delta)));\n  for (let y = 0; y \u003c H; y++) {\n    // Display row y is `acc` of the way from history row y - 1 to row y,\n    // where row -1 is the one computed ahead.\n    const a = y - acc, r0 = floor(a), t = a - r0;\n    const A = r0 \u003c 0 ? next : null, o0 = ((head + r0 + H) % H) * N, o1 = ((head + r0 + 1) % H) * N;\n    for (let x = 0; x \u003c W; x++) {\n      const u0 = A ? A[x] : hist[o0 + x], u1 = r0 + 1 \u003c H ? hist[o1 + x] : u0;\n      const u = u0 + (u1 - u0) * t, i = Math.min(256, round(abs(u) * inv)), o = ((u \u003c 0 ? 257 : 0) + i) * 3;\n      display.setPixel(x, y, lut[o], lut[o + 1], lut[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=22..66, Dispersion=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns both sides of the colour map round the wheel together. At 0 positive u is cyan and negative u magenta, black where u crosses zero and pale where |u| passes 2.6; at 0.3 gold and violet, at 0.6 orange and teal."},{"name":"Speed","min":0.2,"max":3,"about":"Rows a second, 15 times the knob, and each row is 1.25 time units of the equation, so the panel always holds the last 160 time units. At 2 that is one row a frame and a moment takes 4.3 s from top to bottom; at 0.2 it takes 43 s."},{"name":"Length","min":22,"max":66,"about":"The length L of the ring, 22 to 66. L / 2 pi is the number of linearly unstable modes, 3.5 at 22 and 10.5 at 66. At 22, the size Predrag Cvitanovic and his group studied, two fat cyan streaks wobble in step and now and then slip sideways all at once; at 66 about seven thin ones split and merge."},{"name":"Dispersion","min":-1,"max":1,"about":"A third-derivative term delta u_xxx, which makes it the Kawahara equation. At the start, 0.06, it is still Kuramoto-Sivashinsky; from about 0.15 at L 22 and 0.25 at L 66 the chaos settles into a train of pulses that lean one way across the diagram, right and cyan for positive delta, left and magenta for negative."}],"start":[0,2,22,0.06],"measures":{"motion":2.1967,"detail":0.0813,"edges":0.1461,"complexity":1.9024,"coverage":0.8129,"colour":0.4992,"drift":0.2147},"knobResponse":[0.3397,0.3051,0.3397,0.3324]},{"slug":"lakes-of-wada","title":"Lakes of Wada","family":"topology","round":34,"note":"섬 안의 두 호수와 바다가 차례로 1 LED 운하를 파요. 마른 땅이 파는 물에서 32, 16, 8, … LED 안에 들 때까지 차례마다 거리를 반으로 줄여 파고 서로 다른 물은 끝내 닿지 않아서, 다 판 섬은 하늘색 바다와 분홍, 연두 호수 사이에 가는 땅 벽만 남은 미로가 돼요. K3 은 호수를 다섯까지 늘리고, K1 을 누르면 섬이 잠기고 새 섬이 솟아요.","idea":"An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.","buttons":"K1 tap floods the island now and raises a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Lakes of Wada\n// Family:  topology\n// Idea:    An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Lakes of Wada (Kunizō Yoneyama, 1917, after Takeo Wada), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1\n//\n// Knob 1: Hue. Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink.\n// Knob 2: Speed. At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds.\n// Knob 3: Lakes. How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters.\n// Knob 4: Wander. How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends.\n// Buttons: K1 tap floods the island now and raises a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst LAND = -1, BIG = 30000;\n// Canal heads digging at once for the water whose turn it is.\nconst TIPS = 3;\n// The first turn's distance; every later turn halves it, down to 1.\nconst D0 = 32;\n// LEDs dug a second for each unit of Speed.\nconst RATE = 110;\n// Distance searches a frame may run, so a late turn full of short canals\n// spreads over frames instead of stalling one.\nconst SEARCHES = 14;\n// LEDs a turn digs before it starts no new canal, a third of it once the\n// distance is 4 or less, so the water whose turn comes at a fine distance\n// cannot take the whole island.\nconst TURN_CAP = 160;\n// Hue of the sea at Hue 0; the lakes follow round the wheel.\nconst H0 = 0.56;\n// Seconds of digging before the first frame, and the waters' saturation.\n// Six seconds at a RATE of 80 and full colour put the study's colour at 0.723\n// and its motion at 0.017, both past the ends of their map axes, which\n// emptied six cells of the map.\nconst PRE = 3, SAT = 0.88;\nconst NB = [1, -1, W, -W], ANG = [0, PI, PI / 2, -PI / 2];\nconst wrap = (a) => a - 2 * PI * floor((a + PI) / (2 * PI));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, wander: 0.06, warm: false, clock: 0, acc: 0,\n    phase: \"dig\", pt: 0, stage: 0, turnDug: 0, roundDug: 0, roundTurns: 0, stageSteps: 0, searches: 0, rr: 0,\n    wat: new Int8Array(N), born: new Float32Array(N), give: new Uint8Array(N),\n    D: new Int16Array(N), C: new Int16Array(N), cw: -1, clr: 2, F: new Float32Array(N), FD: new Int16Array(N), fdMax: 1, fMax: 1,\n    Q: new Int32Array(N), tips: [], c: [0, 0, 0], next: null,\n  };\n  for (let k = 0; k \u003c TIPS; k++) params.s.tips.push({ on: false, sleep: false, pos: 0, tgt: 0, T: new Int16Array(N), steps: 0, cap: 0, h: 0 });\n}\n\n// ---------- the island ----------\n\n// A smooth random field on a coarse lattice, eased between lattice points.\nfunction field(gx, gy) {\n  const g = new Float32Array((gx + 1) * (gy + 1));\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / (W - 1)) * gx, v = (y / (H - 1)) * gy;\n      const i = min(gx - 1, floor(u)), j = min(gy - 1, floor(v));\n      const fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * (gx + 1) + i], b = g[j * (gx + 1) + i + 1], c = g[(j + 1) * (gx + 1) + i], d = g[(j + 1) * (gx + 1) + i + 1];\n      out[y * W + x] = (a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv;\n    }\n  return out;\n}\n\n// A new island with n - 1 lakes: water 0 is the sea, 1..n-1 the lakes.\n// Every water is kept at least two LEDs from every other, so no two touch\n// even at a corner.\nfunction makeIsland(n) {\n  const wat = new Int8Array(N), f = new Float32Array(N), Q = new Int32Array(N);\n  const a = field(5, 9), b = field(11, 21);\n  const rx = 29.5 + random() * 2, ry = 59 + random() * 3, cx = 31.5 + (random() - 0.5) * 3, cy = 63.5 + (random() - 0.5) * 6;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = (x - cx) / rx, dy = (y - cy) / ry;\n      // The coast bends away from the panel's rim instead of running along it.\n      const rim = min(x, W - 1 - x, y, H - 1 - y);\n      f[p] = 0.6 * (1 - dx * dx - dy * dy) + 0.32 * a[p] + 0.12 * b[p] - 0.5 * (1 - sm(1.5, 6, rim));\n      const edge = rim \u003c 2;\n      wat[p] = f[p] > 0 && !edge ? LAND : 0;\n    }\n  // Keep the largest piece of land, and fill any pond the field left in it.\n  const lab = new Int32Array(N).fill(-1);\n  let best = -1, bestSize = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (wat[s] !== LAND || lab[s] >= 0) continue;\n    let qh = 0, qt = 0;\n    Q[qt++] = s;\n    lab[s] = s;\n    while (qh \u003c qt) {\n      const p = Q[qh++], x = p % W;\n      for (let k = 0; k \u003c 4; k++) {\n        const q = p + NB[k];\n        if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n        if (wat[q] === LAND && lab[q] \u003c 0) (lab[q] = s), (Q[qt++] = q);\n      }\n    }\n    if (qt > bestSize) (bestSize = qt), (best = s);\n  }\n  for (let p = 0; p \u003c N; p++) if (wat[p] === LAND && lab[p] !== best) wat[p] = 0;\n  const sea = new Uint8Array(N);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0;\n    if ((x === 0 || y === 0 || x === W - 1 || y === H - 1) && wat[p] !== LAND) (sea[p] = 1), (Q[qt++] = p);\n  }\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (!sea[q] && wat[q] !== LAND) (sea[q] = 1), (Q[qt++] = q);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) if (!sea[p]) wat[p] = LAND;\n  // Distance from the coast, through the land.\n  const cd = new Int16Array(N).fill(BIG);\n  qh = qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (cd[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && cd[q] === BIG) (cd[q] = cd[p] + 1), (Q[qt++] = q);\n    }\n  }\n  // The lakes, spread over the island: each the best of 60 tries, as far as\n  // it can be from the lakes already placed.\n  const lakes = [];\n  for (let w = 1; w \u003c n; w++) {\n    const r = 4 + random() * 2;\n    let bx = -1, by = -1, bs = -1;\n    for (let k = 0; k \u003c 60; k++) {\n      const p = floor(random() * N);\n      if (wat[p] !== LAND || cd[p] \u003c r + 9) continue;\n      const x = p % W, y = (p / W) | 0;\n      let s = 200 + random();\n      for (const l of lakes) s = min(s, sqrt((x - l.x) ** 2 + (y - l.y) ** 2) - l.r - r);\n      if (s > bs) (bs = s), (bx = x), (by = y);\n    }\n    if (bx \u003c 0) continue;\n    lakes.push({ x: bx, y: by, r });\n    const ph = random() * 6.28;\n    for (let y = max(2, floor(by - r - 2)); y \u003c= min(H - 3, by + r + 2); y++)\n      for (let x = max(2, floor(bx - r - 2)); x \u003c= min(W - 3, bx + r + 2); x++) {\n        const p = y * W + x, dx = x - bx, dy = y - by;\n        if (wat[p] !== LAND || cd[p] \u003c 3) continue;\n        const th = atan2(dy, dx);\n        if (sqrt(dx * dx + dy * dy) > r * (1 + 0.12 * sin(2 * th + ph) + 0.1 * sin(3 * th + 2 * ph))) continue;\n        let ok = true;\n        for (let v = -2; v \u003c= 2 && ok; v++) for (let u = -2; u \u003c= 2; u++) if (wat[p + v * W + u] > 0 && wat[p + v * W + u] !== w) ok = false;\n        if (ok) wat[p] = w;\n      }\n  }\n  let fMax = 0;\n  for (let p = 0; p \u003c N; p++) fMax = max(fMax, f[p]);\n  return { wat, f, fMax };\n}\n\nfunction begin(S, isl) {\n  S.wat.set(isl.wat);\n  S.F.set(isl.f);\n  S.fMax = isl.fMax;\n  S.born.fill(-99);\n  S.give.fill(0);\n  S.stage = 0;\n  S.cw = -1;\n  S.turnDug = 0;\n  S.roundDug = 0;\n  S.roundTurns = 0;\n  S.stageSteps = 0;\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n}\n\n// ---------- digging ----------\n\nconst turnWater = (S) => (S.stage + 1) % S.n;\nconst turnDist = (S) => max(1, floor(D0 / 2 ** S.stage));\n// How far a canal keeps from the other waters: a quarter of the turn's\n// distance, and never closer than one LED of land between. A long early\n// canal that ran up to another water's shore would close the way past it.\nconst turnClear = (S) => max(2, floor(turnDist(S) / 4));\n\n// Chebyshev distance from every cell to the nearest water other than w,\n// into S.C. The others hold still during w's turn, so once a turn is enough.\nfunction clearance(S, w) {\n  const { wat, C, Q } = S;\n  C.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] !== LAND && wat[p] !== w) (C[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W, y = (p / W) | 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        const u = x + dx, v = y + dy;\n        if (u \u003c 0 || u >= W || v \u003c 0 || v >= H) continue;\n        const q = v * W + u;\n        if (C[q] === BIG) (C[q] = C[p] + 1), (Q[qt++] = q);\n      }\n  }\n  S.cw = w;\n}\n\n// Land a canal of w may take at all: inside the panel's rim and clear of\n// the other waters.\nconst free = (S, c) => S.wat[c] === LAND && S.C[c] >= S.clr && c % W > 0 && c % W \u003c W - 1 && c >= W && c \u003c N - W;\n\n// May water w dig land cell c, coming from its own cell t? Of c's eight\n// neighbours only t and the two cells beside t may be water, so a canal\n// never runs alongside itself or another canal of its own water.\nfunction canDig(S, c, t, w) {\n  if (!free(S, c)) return false;\n  const wat = S.wat, cx = c % W, cy = (c / W) | 0, ex = (t % W) - cx, ey = ((t / W) | 0) - cy;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      if ((!dx && !dy) || wat[c + dy * W + dx] === LAND) continue;\n      // t itself, or a cell beside t across the canal's line.\n      if ((ex !== 0 && dx === ex) || (ey !== 0 && dy === ey)) continue;\n      return false;\n    }\n  return true;\n}\n\n// Land with no water at all among its eight neighbours: a canal can pass.\nfunction open(S, c) {\n  if (!free(S, c)) return false;\n  const wat = S.wat;\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) if (wat[c + dy * W + dx] !== LAND) return false;\n  return true;\n}\n\n// Distance through the land from water w (and from the targets the other\n// heads are already digging toward), into S.D.\nfunction distances(S, w, mine) {\n  const { wat, D, Q } = S;\n  D.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === w) (D[p] = 0), (Q[qt++] = p);\n  for (const t of S.tips) if (t !== mine && t.on && D[t.tgt] === BIG) (D[t.tgt] = 0), (Q[qt++] = t.tgt);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && D[q] === BIG) (D[q] = D[p] + 1), (Q[qt++] = q);\n    }\n  }\n}\n\nfunction dig(S, c, w) {\n  S.wat[c] = w;\n  S.born[c] = S.clock;\n  S.turnDug++;\n}\n\nfunction finish(S, tip) {\n  tip.on = false;\n  S.give[tip.tgt] = 1;\n  for (const t of S.tips) t.sleep = false;\n}\n\n// A new canal for this head: the land farthest from the water whose turn it\n// is, and the nearest place on that water's shore to set out from.\n// Returns 1 if it dug, 0 if this turn has nothing left for it, -1 to retry.\nfunction startCanal(S, tip) {\n  const w = turnWater(S), d = turnDist(S), { D, give, Q } = S;\n  S.searches++;\n  if (S.cw !== w) clearance(S, w);\n  S.clr = turnClear(S);\n  distances(S, w, tip);\n  let m = d + 1, cnt = 0, X = -1;\n  for (let p = 0; p \u003c N; p++) {\n    const v = D[p];\n    if (v \u003c m || v === BIG || give[p] || !free(S, p)) continue;\n    if (v > m) (m = v), (cnt = 0);\n    if (random() * ++cnt \u003c 1) X = p;\n  }\n  if (X \u003c 0) return 0;\n  // Distance to X through land a canal can cross; the first cells reached\n  // that w can dig from its shore are where the canal may start.\n  const T = tip.T;\n  T.fill(BIG);\n  let qh = 0, qt = 0, start = -1, from = -1, tmin = BIG, seen = 0;\n  T[X] = 0;\n  Q[qt++] = X;\n  const tryStart = (c) => {\n    for (let k = 0; k \u003c 4; k++) {\n      const t = c + NB[k];\n      if (S.wat[t] === w && canDig(S, c, t, w) && random() * ++seen \u003c 1) (start = c), (from = t), (tmin = T[c]);\n    }\n  };\n  tryStart(X);\n  while (qh \u003c qt && T[Q[qh]] \u003c= tmin) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG) continue;\n      if (open(S, q)) {\n        T[q] = T[p] + 1;\n        Q[qt++] = q;\n      } else if (S.wat[q] === LAND) {\n        T[q] = T[p] + 1;\n        if (T[q] \u003c= tmin) tryStart(q);\n      }\n    }\n  }\n  if (start \u003c 0) {\n    // No way in from w's shore: none of this land counts for the turn.\n    for (let i = 0; i \u003c qt; i++) give[Q[i]] = 1;\n    give[X] = 1;\n    return -1;\n  }\n  // Finish the map past the start, so a wandering head still knows its way.\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG || !open(S, q)) continue;\n      T[q] = T[p] + 1;\n      Q[qt++] = q;\n    }\n  }\n  dig(S, start, w);\n  Object.assign(tip, { on: true, pos: start, tgt: X, steps: 1, cap: 2 * T[start] + 12 });\n  tip.h = atan2(((start / W) | 0) - ((from / W) | 0), (start % W) - (from % W));\n  if (T[start] === 0) finish(S, tip);\n  return 1;\n}\n\n// One LED more for an active head: toward X along the land map, with the\n// heading drifting as Wander allows.\nfunction extend(S, tip) {\n  const w = turnWater(S), t = tip.pos, T = tip.T, u = S.wander;\n  const beta = 3.2 - 2.4 * u, kap = 0.5 + 2.0 * u, noise = 0.12 + 1.1 * u;\n  let best = -1, bs = -1e9;\n  for (let k = 0; k \u003c 4; k++) {\n    const c = t + NB[k];\n    if (!canDig(S, c, t, w)) continue;\n    const dT = T[c] === BIG ? 3 : T[c] - T[t];\n    const s = -beta * dT + kap * cos(ANG[k] - tip.h) + noise * random();\n    if (s > bs) (bs = s), (best = k);\n  }\n  if (best \u003c 0) {\n    finish(S, tip);\n    return false;\n  }\n  const c = t + NB[best];\n  dig(S, c, w);\n  tip.pos = c;\n  tip.steps++;\n  const tx = tip.tgt % W, ty = (tip.tgt / W) | 0, cx = c % W, cy = (c / W) | 0;\n  tip.h += 0.25 * wrap(ANG[best] - tip.h) + 0.12 * (1 - u) * wrap(atan2(ty - cy, tx - cx) - tip.h) + (random() - 0.5) * 1.3 * u;\n  if (T[c] === 0 || tip.steps >= tip.cap) finish(S, tip);\n  return true;\n}\n\nfunction nextTurn(S) {\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n  S.give.fill(0);\n  S.cw = -1;\n  // A whole round of turns at distance 1 that found almost nothing to dig:\n  // the labyrinth is finished.\n  if (turnDist(S) === 1) {\n    S.roundDug += S.turnDug;\n    if (++S.roundTurns >= S.n) {\n      if (S.roundDug \u003c 4) {\n        S.phase = \"hold\";\n        S.pt = 0;\n      }\n      S.roundDug = 0;\n      S.roundTurns = 0;\n    }\n  }\n  S.stage++;\n  S.turnDug = 0;\n  S.stageSteps = 0;\n}\n\n// One step of digging: one LED for one head, round robin. Once the turn has\n// dug its share no new canal starts, but the heads finish the ones they are\n// on, so a long canal into the far land is not left half dug.\nfunction step(S, limited) {\n  if (++S.stageSteps > 1400) {\n    nextTurn(S);\n    return;\n  }\n  const full = S.turnDug >= (turnDist(S) > 4 ? TURN_CAP : TURN_CAP / 3);\n  for (let tries = 0; tries \u003c TIPS * 2; tries++) {\n    const tip = S.tips[(S.rr = (S.rr + 1) % TIPS)];\n    if (tip.on) {\n      if (extend(S, tip)) return;\n      continue;\n    }\n    if (tip.sleep || full) continue;\n    if (limited && S.searches >= SEARCHES) return;\n    const r = startCanal(S, tip);\n    if (r === 1) return;\n    if (r === 0) tip.sleep = true;\n  }\n  if (S.tips.every((t) => !t.on && (t.sleep || full))) nextTurn(S);\n}\n\n// ---------- flood ----------\n\n// Distance from the sea through everything else, for the flood front.\nfunction floodMap(S) {\n  const { wat, FD, Q } = S;\n  FD.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (FD[p] = 0), (Q[qt++] = p);\n  let m = 1;\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N || FD[q] !== BIG) continue;\n      FD[q] = FD[p] + 1;\n      m = max(m, FD[q]);\n      Q[qt++] = q;\n    }\n  }\n  S.fdMax = m;\n}\n\nfunction startFlood(S) {\n  floodMap(S);\n  for (const t of S.tips) t.on = false;\n  S.phase = \"flood\";\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wander = cl(k[3], 0, 1);\n  const n = round(cl(k[2], 3, 5));\n  if (!S.warm) {\n    S.n = n;\n    begin(S, makeIsland(n));\n    // Open on an island the waters have been digging for PRE seconds at\n    // this Speed.\n    const pre = round(PRE * S.speed * RATE);\n    for (let i = 0; i \u003c pre; i++) step(S, false);\n    S.clock = 10;\n    S.warm = true;\n  } else if (n !== S.n && S.phase !== \"flood\" && S.phase !== \"rise\") {\n    S.next = n;\n    startFlood(S);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== \"flood\" && S.phase !== \"rise\") startFlood(S);\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  S.pt += ds;\n  if (S.phase === \"dig\") {\n    S.acc += d * S.speed * RATE;\n    S.searches = 0;\n    let steps = 0;\n    while (S.acc >= 1 && steps \u003c 200 && S.phase === \"dig\") {\n      step(S, true);\n      S.acc -= 1;\n      steps++;\n      if (S.searches >= SEARCHES) {\n        S.acc = min(S.acc, 2);\n        break;\n      }\n    }\n  } else if (S.phase === \"hold\" && S.pt > 3) startFlood(S);\n  else if (S.phase === \"flood\" && S.pt > 1.2) {\n    if (S.next) (S.n = S.next), (S.next = null);\n    begin(S, makeIsland(S.n));\n    S.phase = \"rise\";\n    S.pt = 0;\n  } else if (S.phase === \"rise\" && S.pt > 1) {\n    S.phase = \"dig\";\n    S.pt = 0;\n    S.acc = 0;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { wat, born, c, n } = S;\n  const front = S.phase === \"flood\" ? S.fdMax * sm(0, 1.1, S.pt) : -1;\n  const level = S.phase === \"rise\" ? S.fMax * (1 - sm(0, 0.95, S.pt)) : -1;\n  const tipAt = new Set();\n  for (const t of S.tips) if (t.on) tipAt.add(t.pos);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let w = wat[p], glow = 0;\n      if (front >= 0 && S.FD[p] \u003c= front) {\n        w = 0;\n        if (S.FD[p] > 0) glow = 0.7 * sm(4, 0, front - S.FD[p]);\n      } else if (level >= 0 && S.F[p] \u003c= level) {\n        w = 0;\n        glow = 0.6 * sm(0.06, 0, level - S.F[p]) * (S.F[p] > 0 ? 1 : 0);\n      }\n      if (w === LAND) {\n        display.setPixel(x, y, 14, 12, 10);\n        continue;\n      }\n      if (front \u003c 0 && level \u003c 0) glow = tipAt.has(p) ? 1 : exp(-(S.clock - born[p]) / 0.22);\n      hsv(S.hue + H0 + w / n, SAT, 1, c);\n      const v = 255, s = 1 - 0.85 * glow;\n      display.setPixel(x, y, round(v * (c[0] * s + 1 - s)), round(v * (c[1] * s + 1 - s)), round(v * (c[2] * s + 1 - s)));\n    }\n}\n","layer":{"id":"layer-lakes-of-wada","type":"code","name":"lakes-of-wada","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lakes of Wada\n// Family:  topology\n// Idea:    An island holds two lakes, and lake one, lake two and the sea take turns digging one-LED canals into the dry land until none of it lies farther than 32, then 16, 8, 4, 2 and 1 LEDs from the digging water, no water ever touching another, so the canals interleave until nearly every LED of land left is a one-LED wall between two waters; the finished labyrinth stands three seconds, the sea floods it and a new island rises.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Lakes of Wada (Kunizō Yoneyama, 1917, after Takeo Wada), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1\n//\n// Knob 1: Hue. Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink.\n// Knob 2: Speed. At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds.\n// Knob 3: Lakes. How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters.\n// Knob 4: Wander. How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends.\n// Buttons: K1 tap floods the island now and raises a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nconst LAND = -1, BIG = 30000;\n// Canal heads digging at once for the water whose turn it is.\nconst TIPS = 3;\n// The first turn's distance; every later turn halves it, down to 1.\nconst D0 = 32;\n// LEDs dug a second for each unit of Speed.\nconst RATE = 110;\n// Distance searches a frame may run, so a late turn full of short canals\n// spreads over frames instead of stalling one.\nconst SEARCHES = 14;\n// LEDs a turn digs before it starts no new canal, a third of it once the\n// distance is 4 or less, so the water whose turn comes at a fine distance\n// cannot take the whole island.\nconst TURN_CAP = 160;\n// Hue of the sea at Hue 0; the lakes follow round the wheel.\nconst H0 = 0.56;\n// Seconds of digging before the first frame, and the waters' saturation.\n// Six seconds at a RATE of 80 and full colour put the study's colour at 0.723\n// and its motion at 0.017, both past the ends of their map axes, which\n// emptied six cells of the map.\nconst PRE = 3, SAT = 0.88;\nconst NB = [1, -1, W, -W], ANG = [0, PI, PI / 2, -PI / 2];\nconst wrap = (a) => a - 2 * PI * floor((a + PI) / (2 * PI));\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, wander: 0.06, warm: false, clock: 0, acc: 0,\n    phase: \"dig\", pt: 0, stage: 0, turnDug: 0, roundDug: 0, roundTurns: 0, stageSteps: 0, searches: 0, rr: 0,\n    wat: new Int8Array(N), born: new Float32Array(N), give: new Uint8Array(N),\n    D: new Int16Array(N), C: new Int16Array(N), cw: -1, clr: 2, F: new Float32Array(N), FD: new Int16Array(N), fdMax: 1, fMax: 1,\n    Q: new Int32Array(N), tips: [], c: [0, 0, 0], next: null,\n  };\n  for (let k = 0; k \u003c TIPS; k++) params.s.tips.push({ on: false, sleep: false, pos: 0, tgt: 0, T: new Int16Array(N), steps: 0, cap: 0, h: 0 });\n}\n\n// ---------- the island ----------\n\n// A smooth random field on a coarse lattice, eased between lattice points.\nfunction field(gx, gy) {\n  const g = new Float32Array((gx + 1) * (gy + 1));\n  for (let i = 0; i \u003c g.length; i++) g[i] = random() * 2 - 1;\n  const out = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / (W - 1)) * gx, v = (y / (H - 1)) * gy;\n      const i = min(gx - 1, floor(u)), j = min(gy - 1, floor(v));\n      const fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * (gx + 1) + i], b = g[j * (gx + 1) + i + 1], c = g[(j + 1) * (gx + 1) + i], d = g[(j + 1) * (gx + 1) + i + 1];\n      out[y * W + x] = (a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv;\n    }\n  return out;\n}\n\n// A new island with n - 1 lakes: water 0 is the sea, 1..n-1 the lakes.\n// Every water is kept at least two LEDs from every other, so no two touch\n// even at a corner.\nfunction makeIsland(n) {\n  const wat = new Int8Array(N), f = new Float32Array(N), Q = new Int32Array(N);\n  const a = field(5, 9), b = field(11, 21);\n  const rx = 29.5 + random() * 2, ry = 59 + random() * 3, cx = 31.5 + (random() - 0.5) * 3, cy = 63.5 + (random() - 0.5) * 6;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, dx = (x - cx) / rx, dy = (y - cy) / ry;\n      // The coast bends away from the panel's rim instead of running along it.\n      const rim = min(x, W - 1 - x, y, H - 1 - y);\n      f[p] = 0.6 * (1 - dx * dx - dy * dy) + 0.32 * a[p] + 0.12 * b[p] - 0.5 * (1 - sm(1.5, 6, rim));\n      const edge = rim \u003c 2;\n      wat[p] = f[p] > 0 && !edge ? LAND : 0;\n    }\n  // Keep the largest piece of land, and fill any pond the field left in it.\n  const lab = new Int32Array(N).fill(-1);\n  let best = -1, bestSize = 0;\n  for (let s = 0; s \u003c N; s++) {\n    if (wat[s] !== LAND || lab[s] >= 0) continue;\n    let qh = 0, qt = 0;\n    Q[qt++] = s;\n    lab[s] = s;\n    while (qh \u003c qt) {\n      const p = Q[qh++], x = p % W;\n      for (let k = 0; k \u003c 4; k++) {\n        const q = p + NB[k];\n        if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n        if (wat[q] === LAND && lab[q] \u003c 0) (lab[q] = s), (Q[qt++] = q);\n      }\n    }\n    if (qt > bestSize) (bestSize = qt), (best = s);\n  }\n  for (let p = 0; p \u003c N; p++) if (wat[p] === LAND && lab[p] !== best) wat[p] = 0;\n  const sea = new Uint8Array(N);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0;\n    if ((x === 0 || y === 0 || x === W - 1 || y === H - 1) && wat[p] !== LAND) (sea[p] = 1), (Q[qt++] = p);\n  }\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (!sea[q] && wat[q] !== LAND) (sea[q] = 1), (Q[qt++] = q);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) if (!sea[p]) wat[p] = LAND;\n  // Distance from the coast, through the land.\n  const cd = new Int16Array(N).fill(BIG);\n  qh = qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (cd[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && cd[q] === BIG) (cd[q] = cd[p] + 1), (Q[qt++] = q);\n    }\n  }\n  // The lakes, spread over the island: each the best of 60 tries, as far as\n  // it can be from the lakes already placed.\n  const lakes = [];\n  for (let w = 1; w \u003c n; w++) {\n    const r = 4 + random() * 2;\n    let bx = -1, by = -1, bs = -1;\n    for (let k = 0; k \u003c 60; k++) {\n      const p = floor(random() * N);\n      if (wat[p] !== LAND || cd[p] \u003c r + 9) continue;\n      const x = p % W, y = (p / W) | 0;\n      let s = 200 + random();\n      for (const l of lakes) s = min(s, sqrt((x - l.x) ** 2 + (y - l.y) ** 2) - l.r - r);\n      if (s > bs) (bs = s), (bx = x), (by = y);\n    }\n    if (bx \u003c 0) continue;\n    lakes.push({ x: bx, y: by, r });\n    const ph = random() * 6.28;\n    for (let y = max(2, floor(by - r - 2)); y \u003c= min(H - 3, by + r + 2); y++)\n      for (let x = max(2, floor(bx - r - 2)); x \u003c= min(W - 3, bx + r + 2); x++) {\n        const p = y * W + x, dx = x - bx, dy = y - by;\n        if (wat[p] !== LAND || cd[p] \u003c 3) continue;\n        const th = atan2(dy, dx);\n        if (sqrt(dx * dx + dy * dy) > r * (1 + 0.12 * sin(2 * th + ph) + 0.1 * sin(3 * th + 2 * ph))) continue;\n        let ok = true;\n        for (let v = -2; v \u003c= 2 && ok; v++) for (let u = -2; u \u003c= 2; u++) if (wat[p + v * W + u] > 0 && wat[p + v * W + u] !== w) ok = false;\n        if (ok) wat[p] = w;\n      }\n  }\n  let fMax = 0;\n  for (let p = 0; p \u003c N; p++) fMax = max(fMax, f[p]);\n  return { wat, f, fMax };\n}\n\nfunction begin(S, isl) {\n  S.wat.set(isl.wat);\n  S.F.set(isl.f);\n  S.fMax = isl.fMax;\n  S.born.fill(-99);\n  S.give.fill(0);\n  S.stage = 0;\n  S.cw = -1;\n  S.turnDug = 0;\n  S.roundDug = 0;\n  S.roundTurns = 0;\n  S.stageSteps = 0;\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n}\n\n// ---------- digging ----------\n\nconst turnWater = (S) => (S.stage + 1) % S.n;\nconst turnDist = (S) => max(1, floor(D0 / 2 ** S.stage));\n// How far a canal keeps from the other waters: a quarter of the turn's\n// distance, and never closer than one LED of land between. A long early\n// canal that ran up to another water's shore would close the way past it.\nconst turnClear = (S) => max(2, floor(turnDist(S) / 4));\n\n// Chebyshev distance from every cell to the nearest water other than w,\n// into S.C. The others hold still during w's turn, so once a turn is enough.\nfunction clearance(S, w) {\n  const { wat, C, Q } = S;\n  C.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] !== LAND && wat[p] !== w) (C[p] = 0), (Q[qt++] = p);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W, y = (p / W) | 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        const u = x + dx, v = y + dy;\n        if (u \u003c 0 || u >= W || v \u003c 0 || v >= H) continue;\n        const q = v * W + u;\n        if (C[q] === BIG) (C[q] = C[p] + 1), (Q[qt++] = q);\n      }\n  }\n  S.cw = w;\n}\n\n// Land a canal of w may take at all: inside the panel's rim and clear of\n// the other waters.\nconst free = (S, c) => S.wat[c] === LAND && S.C[c] >= S.clr && c % W > 0 && c % W \u003c W - 1 && c >= W && c \u003c N - W;\n\n// May water w dig land cell c, coming from its own cell t? Of c's eight\n// neighbours only t and the two cells beside t may be water, so a canal\n// never runs alongside itself or another canal of its own water.\nfunction canDig(S, c, t, w) {\n  if (!free(S, c)) return false;\n  const wat = S.wat, cx = c % W, cy = (c / W) | 0, ex = (t % W) - cx, ey = ((t / W) | 0) - cy;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      if ((!dx && !dy) || wat[c + dy * W + dx] === LAND) continue;\n      // t itself, or a cell beside t across the canal's line.\n      if ((ex !== 0 && dx === ex) || (ey !== 0 && dy === ey)) continue;\n      return false;\n    }\n  return true;\n}\n\n// Land with no water at all among its eight neighbours: a canal can pass.\nfunction open(S, c) {\n  if (!free(S, c)) return false;\n  const wat = S.wat;\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = -1; dx \u003c= 1; dx++) if (wat[c + dy * W + dx] !== LAND) return false;\n  return true;\n}\n\n// Distance through the land from water w (and from the targets the other\n// heads are already digging toward), into S.D.\nfunction distances(S, w, mine) {\n  const { wat, D, Q } = S;\n  D.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === w) (D[p] = 0), (Q[qt++] = p);\n  for (const t of S.tips) if (t !== mine && t.on && D[t.tgt] === BIG) (D[t.tgt] = 0), (Q[qt++] = t.tgt);\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N) continue;\n      if (wat[q] === LAND && D[q] === BIG) (D[q] = D[p] + 1), (Q[qt++] = q);\n    }\n  }\n}\n\nfunction dig(S, c, w) {\n  S.wat[c] = w;\n  S.born[c] = S.clock;\n  S.turnDug++;\n}\n\nfunction finish(S, tip) {\n  tip.on = false;\n  S.give[tip.tgt] = 1;\n  for (const t of S.tips) t.sleep = false;\n}\n\n// A new canal for this head: the land farthest from the water whose turn it\n// is, and the nearest place on that water's shore to set out from.\n// Returns 1 if it dug, 0 if this turn has nothing left for it, -1 to retry.\nfunction startCanal(S, tip) {\n  const w = turnWater(S), d = turnDist(S), { D, give, Q } = S;\n  S.searches++;\n  if (S.cw !== w) clearance(S, w);\n  S.clr = turnClear(S);\n  distances(S, w, tip);\n  let m = d + 1, cnt = 0, X = -1;\n  for (let p = 0; p \u003c N; p++) {\n    const v = D[p];\n    if (v \u003c m || v === BIG || give[p] || !free(S, p)) continue;\n    if (v > m) (m = v), (cnt = 0);\n    if (random() * ++cnt \u003c 1) X = p;\n  }\n  if (X \u003c 0) return 0;\n  // Distance to X through land a canal can cross; the first cells reached\n  // that w can dig from its shore are where the canal may start.\n  const T = tip.T;\n  T.fill(BIG);\n  let qh = 0, qt = 0, start = -1, from = -1, tmin = BIG, seen = 0;\n  T[X] = 0;\n  Q[qt++] = X;\n  const tryStart = (c) => {\n    for (let k = 0; k \u003c 4; k++) {\n      const t = c + NB[k];\n      if (S.wat[t] === w && canDig(S, c, t, w) && random() * ++seen \u003c 1) (start = c), (from = t), (tmin = T[c]);\n    }\n  };\n  tryStart(X);\n  while (qh \u003c qt && T[Q[qh]] \u003c= tmin) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG) continue;\n      if (open(S, q)) {\n        T[q] = T[p] + 1;\n        Q[qt++] = q;\n      } else if (S.wat[q] === LAND) {\n        T[q] = T[p] + 1;\n        if (T[q] \u003c= tmin) tryStart(q);\n      }\n    }\n  }\n  if (start \u003c 0) {\n    // No way in from w's shore: none of this land counts for the turn.\n    for (let i = 0; i \u003c qt; i++) give[Q[i]] = 1;\n    give[X] = 1;\n    return -1;\n  }\n  // Finish the map past the start, so a wandering head still knows its way.\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || T[q] !== BIG || !open(S, q)) continue;\n      T[q] = T[p] + 1;\n      Q[qt++] = q;\n    }\n  }\n  dig(S, start, w);\n  Object.assign(tip, { on: true, pos: start, tgt: X, steps: 1, cap: 2 * T[start] + 12 });\n  tip.h = atan2(((start / W) | 0) - ((from / W) | 0), (start % W) - (from % W));\n  if (T[start] === 0) finish(S, tip);\n  return 1;\n}\n\n// One LED more for an active head: toward X along the land map, with the\n// heading drifting as Wander allows.\nfunction extend(S, tip) {\n  const w = turnWater(S), t = tip.pos, T = tip.T, u = S.wander;\n  const beta = 3.2 - 2.4 * u, kap = 0.5 + 2.0 * u, noise = 0.12 + 1.1 * u;\n  let best = -1, bs = -1e9;\n  for (let k = 0; k \u003c 4; k++) {\n    const c = t + NB[k];\n    if (!canDig(S, c, t, w)) continue;\n    const dT = T[c] === BIG ? 3 : T[c] - T[t];\n    const s = -beta * dT + kap * cos(ANG[k] - tip.h) + noise * random();\n    if (s > bs) (bs = s), (best = k);\n  }\n  if (best \u003c 0) {\n    finish(S, tip);\n    return false;\n  }\n  const c = t + NB[best];\n  dig(S, c, w);\n  tip.pos = c;\n  tip.steps++;\n  const tx = tip.tgt % W, ty = (tip.tgt / W) | 0, cx = c % W, cy = (c / W) | 0;\n  tip.h += 0.25 * wrap(ANG[best] - tip.h) + 0.12 * (1 - u) * wrap(atan2(ty - cy, tx - cx) - tip.h) + (random() - 0.5) * 1.3 * u;\n  if (T[c] === 0 || tip.steps >= tip.cap) finish(S, tip);\n  return true;\n}\n\nfunction nextTurn(S) {\n  for (const t of S.tips) (t.on = false), (t.sleep = false);\n  S.give.fill(0);\n  S.cw = -1;\n  // A whole round of turns at distance 1 that found almost nothing to dig:\n  // the labyrinth is finished.\n  if (turnDist(S) === 1) {\n    S.roundDug += S.turnDug;\n    if (++S.roundTurns >= S.n) {\n      if (S.roundDug \u003c 4) {\n        S.phase = \"hold\";\n        S.pt = 0;\n      }\n      S.roundDug = 0;\n      S.roundTurns = 0;\n    }\n  }\n  S.stage++;\n  S.turnDug = 0;\n  S.stageSteps = 0;\n}\n\n// One step of digging: one LED for one head, round robin. Once the turn has\n// dug its share no new canal starts, but the heads finish the ones they are\n// on, so a long canal into the far land is not left half dug.\nfunction step(S, limited) {\n  if (++S.stageSteps > 1400) {\n    nextTurn(S);\n    return;\n  }\n  const full = S.turnDug >= (turnDist(S) > 4 ? TURN_CAP : TURN_CAP / 3);\n  for (let tries = 0; tries \u003c TIPS * 2; tries++) {\n    const tip = S.tips[(S.rr = (S.rr + 1) % TIPS)];\n    if (tip.on) {\n      if (extend(S, tip)) return;\n      continue;\n    }\n    if (tip.sleep || full) continue;\n    if (limited && S.searches >= SEARCHES) return;\n    const r = startCanal(S, tip);\n    if (r === 1) return;\n    if (r === 0) tip.sleep = true;\n  }\n  if (S.tips.every((t) => !t.on && (t.sleep || full))) nextTurn(S);\n}\n\n// ---------- flood ----------\n\n// Distance from the sea through everything else, for the flood front.\nfunction floodMap(S) {\n  const { wat, FD, Q } = S;\n  FD.fill(BIG);\n  let qh = 0, qt = 0;\n  for (let p = 0; p \u003c N; p++) if (wat[p] === 0) (FD[p] = 0), (Q[qt++] = p);\n  let m = 1;\n  while (qh \u003c qt) {\n    const p = Q[qh++], x = p % W;\n    for (let k = 0; k \u003c 4; k++) {\n      const q = p + NB[k];\n      if ((k === 0 && x === W - 1) || (k === 1 && x === 0) || q \u003c 0 || q >= N || FD[q] !== BIG) continue;\n      FD[q] = FD[p] + 1;\n      m = max(m, FD[q]);\n      Q[qt++] = q;\n    }\n  }\n  S.fdMax = m;\n}\n\nfunction startFlood(S) {\n  floodMap(S);\n  for (const t of S.tips) t.on = false;\n  S.phase = \"flood\";\n  S.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.wander = cl(k[3], 0, 1);\n  const n = round(cl(k[2], 3, 5));\n  if (!S.warm) {\n    S.n = n;\n    begin(S, makeIsland(n));\n    // Open on an island the waters have been digging for PRE seconds at\n    // this Speed.\n    const pre = round(PRE * S.speed * RATE);\n    for (let i = 0; i \u003c pre; i++) step(S, false);\n    S.clock = 10;\n    S.warm = true;\n  } else if (n !== S.n && S.phase !== \"flood\" && S.phase !== \"rise\") {\n    S.next = n;\n    startFlood(S);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.phase !== \"flood\" && S.phase !== \"rise\") startFlood(S);\n  const ds = (d * S.speed) / 2;\n  S.clock += ds;\n  S.pt += ds;\n  if (S.phase === \"dig\") {\n    S.acc += d * S.speed * RATE;\n    S.searches = 0;\n    let steps = 0;\n    while (S.acc >= 1 && steps \u003c 200 && S.phase === \"dig\") {\n      step(S, true);\n      S.acc -= 1;\n      steps++;\n      if (S.searches >= SEARCHES) {\n        S.acc = min(S.acc, 2);\n        break;\n      }\n    }\n  } else if (S.phase === \"hold\" && S.pt > 3) startFlood(S);\n  else if (S.phase === \"flood\" && S.pt > 1.2) {\n    if (S.next) (S.n = S.next), (S.next = null);\n    begin(S, makeIsland(S.n));\n    S.phase = \"rise\";\n    S.pt = 0;\n  } else if (S.phase === \"rise\" && S.pt > 1) {\n    S.phase = \"dig\";\n    S.pt = 0;\n    S.acc = 0;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { wat, born, c, n } = S;\n  const front = S.phase === \"flood\" ? S.fdMax * sm(0, 1.1, S.pt) : -1;\n  const level = S.phase === \"rise\" ? S.fMax * (1 - sm(0, 0.95, S.pt)) : -1;\n  const tipAt = new Set();\n  for (const t of S.tips) if (t.on) tipAt.add(t.pos);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let w = wat[p], glow = 0;\n      if (front >= 0 && S.FD[p] \u003c= front) {\n        w = 0;\n        if (S.FD[p] > 0) glow = 0.7 * sm(4, 0, front - S.FD[p]);\n      } else if (level >= 0 && S.F[p] \u003c= level) {\n        w = 0;\n        glow = 0.6 * sm(0.06, 0, level - S.F[p]) * (S.F[p] > 0 ? 1 : 0);\n      }\n      if (w === LAND) {\n        display.setPixel(x, y, 14, 12, 10);\n        continue;\n      }\n      if (front \u003c 0 && level \u003c 0) glow = tipAt.has(p) ? 1 : exp(-(S.clock - born[p]) / 0.22);\n      hsv(S.hue + H0 + w / n, SAT, 1, c);\n      const v = 255, s = 1 - 0.85 * glow;\n      display.setPixel(x, y, round(v * (c[0] * s + 1 - s)), round(v * (c[1] * s + 1 - s)), round(v * (c[2] * s + 1 - s)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lakes=3..5, Wander=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the waters round the wheel together, each the same step from the next. At 0 the sea is azure, lake one pink and lake two lime; at 0.17 the sea is violet, lake one orange and lake two green; at 0.33 the three colours have moved on by one water and the sea is pink."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 three canal heads dig 220 LEDs a second between them, a fresh island is dug in about 11 seconds, the finished labyrinth stands 3 seconds, the flood takes 1.2 and the new island rises in 1; the panel opens on an island 3 seconds into its digging. At 0.2 they dig 22 a second and an island takes nearly two minutes; at 3, 330 a second and about 8 seconds."},{"name":"Lakes","min":3,"max":5,"about":"How many waters share the shore, the sea counted: at 3 two lakes and the sea, a third of the wheel apart; at 4 three lakes, a quarter apart; at 5 four lakes, a fifth apart. Turning it floods the island and raises a new one with that many waters."},{"name":"Wander","min":0,"max":1,"about":"How a canal finds the far land. At 0 it takes the shortest way through the land, ties broken toward the target, so canals run straight or in even steps; at 0.06 almost the same; at 1 its heading drifts up to 37 degrees with every LED and the canals wind, so the walls between them become a maze of bends."}],"start":[0,2,3,0.06],"measures":{"motion":0.0225,"detail":0.2272,"edges":1,"complexity":0.1697,"coverage":0.5713,"colour":0.6325,"drift":0.1351},"knobResponse":[0.4015,0.1136,0.142,0.1216]},{"slug":"lap-pool","title":"Lap Pool","family":"sport","round":21,"note":"야외 25 m 수영장을 바로 위에서 내려다본 그림이 128줄을 다 써요. 색 수모를 쓴 사람들이 레인마다 제 속도로 오가다 벽에서 플립 턴을 하고, 뒤로 퍼지는 V자 물결이 빨강·하양·파랑 레인 로프를 흔들어요. 타일 바닥에는 햇빛이 만든 물결 그물이 흘러요.","idea":"A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","layer":{"id":"layer-lap-pool","type":"code","name":"lap-pool","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stroke","min":0,"max":3,"about":"What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20."},{"name":"Swimmers","min":4,"max":15,"about":"Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15."},{"name":"Sun","min":-1,"max":1,"about":"Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes."}],"start":[0,2,4,0.06],"measures":{"motion":0.3073,"detail":0.1425,"edges":0.4977,"complexity":2.1556,"coverage":0.9906,"colour":0.3817,"drift":0.0257},"knobResponse":[0.044,0.0596,0.0629,0.1105]},{"slug":"lava-lake","title":"Lava Lake","family":"volcano","round":27,"note":"화구 가장자리에서 용암 호수를 곧장 내려다봐요. 검은 지각 판들이 노랗게 벌어진 확장 균열에서 떨어져 나와 변환 단층을 끼고 위아래로 흘러가다, 계단진 화구 벽 밑에서 밝은 이음매를 그으며 가라앉아요. K1 은 틈을 주황 용암 강으로 넓히고, 누르면 큰 가스 거품이 터져 용암을 튀겨요.","idea":"Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.","buttons":"K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.","code":"// ===== Patternflow pattern =====\n// Title:   Lava Lake\n// Family:  volcano\n// Idea:    Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the lava lakes of Erta Ale and Nyiragongo seen from the crater rim\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1\n//\n// Knob 1: Heat. At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter.\n// Knob 2: Speed. At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower.\n// Knob 3: Plates. At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three.\n// Knob 4: Spatter. How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder.\n// Buttons: K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.\n\nconst W = 64, H = 128, N = W * H;\n// Sparks at most; plates are 1 / AX wider than tall, stretched along the\n// crack; the crust drifts V LEDs per second at Speed 2.\nconst MAXP = 700, AX = 0.72, V = 1.6;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction h32(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return (h ^ (h >>> 16)) >>> 0;\n}\nconst hash = (i, j) => h32(i, j) / 4294967296;\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Smooth noise on a 128 x 128 torus, features about eight texels across.\nconst NZ = new Float32Array(128 * 128).map((_, k) => 0.65 * vn((k & 127) / 8, (k >> 7) / 8, 16) + 0.35 * vn((k & 127) / 4 + 3, (k >> 7) / 4, 32));\nfunction nz(u, v) {\n  const xi = floor(u), yi = floor(v), fx = u - xi, fy = v - yi, x0 = xi & 127, y0 = (yi & 127) \u003c\u003c 7, x1 = (x0 + 1) & 127, y1 = ((yi + 1) & 127) \u003c\u003c 7;\n  const a = NZ[y0 + x0], b = NZ[y0 + x1], c = NZ[y1 + x0];\n  return a + (b - a) * fx + (c - a) * fy + (a - b - c + NZ[y1 + x1]) * fx * fy;\n}\n// Lava by temperature: dull red, cherry, orange, yellow, the white of a fresh tear.\nconst STOPS = [[0, 30, 1, 0], [0.2, 104, 7, 0], [0.4, 184, 27, 2], [0.6, 238, 82, 7], [0.8, 250, 158, 36], [1, 254, 230, 148]];\nconst LUT = new Float32Array(257 * 3);\nfor (let q = 0; q \u003c= 256; q++) {\n  const T = q / 256;\n  let k = 0;\n  while (k \u003c 4 && T > STOPS[k + 1][0]) k++;\n  const [a, b] = [STOPS[k], STOPS[k + 1]], u = (T - a[0]) / (b[0] - a[0]);\n  for (let c = 0; c \u003c 3; c++) LUT[q * 3 + c] = mix(a[c + 1], b[c + 1], u);\n}\nconst lut = (T) => round(cl(T, 0, 1) * 256) * 3;\n// exp(-v) for v >= 0, read from a table.\nconst EX = new Float32Array(1025).map((_, k) => exp(-k / 64)), ex = (v) => (v \u003c 16 ? EX[(v * 64) | 0] : 0);\n// sin, read from a table.\nconst SN = new Float32Array(1024).map((_, k) => sin((k * PI) / 512)), fsin = (a) => SN[(a * 162.97) & 1023];\n\n// The shore of the lake under each column, and where the crater rim is.\nconst ST = new Float32Array(W), SB = new Float32Array(W), RT = new Float32Array(W), RB = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  ST[x] = 17.5 + 2.2 * sin(x * 0.11 + 1) + 1.4 * sin(x * 0.29 + 4) + 1.6 * (vn(x * 0.35, 2, 64) - 0.5);\n  SB[x] = 109.5 + 2.4 * sin(x * 0.09 + 3) + 1.3 * sin(x * 0.31) + 1.6 * (vn(x * 0.35, 9, 64) - 0.5);\n  RT[x] = 4 + 1.6 * sin(x * 0.07 + 2) + 1.4 * vn(x * 0.4, 5, 64);\n  RB[x] = H - 4 - 1.5 * sin(x * 0.08) - 1.4 * vn(x * 0.4, 7, 64);\n}\n// The walls: old lava beds stacked up the crater, the lip of each catching\n// the lake's light, and the rim at the top; a dark grain everywhere.\nconst WG = new Float32Array(N * 3), WA = new Float32Array(N);\nfor (let i = 0; i \u003c N; i++) {\n  const x = i & 63, y = i >> 6, top = y \u003c 64, u = top ? ST[x] - y - 0.5 : y + 0.5 - SB[x], g = h32(i, 77);\n  const q = u * 0.27 + 0.7 * vn(x * 0.1, top ? 1 : 30, 64) + 0.25 * vn(x * 0.4, top ? 4 : 40, 64), k = floor(q) + (top ? 0 : 50), f = q - floor(q);\n  WG[i * 3] = (g & 31) * 0.78;\n  WG[i * 3 + 1] = ((g >> 5) & 31) * 0.78;\n  WG[i * 3 + 2] = ((g >> 10) & 31) * 0.78;\n  const rim = top ? RT[x] - y - 0.5 : y + 0.5 - RB[x];\n  WA[i] = rim > 0.5 ? 0 : (rim > -0.5 ? 0.9 : (0.5 + 0.5 * hash(k, 3)) * sm(0.34, 0.08, f) * sm(0.12, 0.32, vn(x * 0.25, k * 7, 64))) * (0.8 + 0.4 * hash(i, 5));\n}\n\n// The fumaroles, each as its column and its height above the shore; the\n// last number is 1 on the top wall.\nconst VENTS = [[6, 5, 1], [27, 8, 1], [44, 4.5, 1], [15, 4.5, 0], [36, 7, 0], [55, 5, 0]];\n// Where the spreading crack steps sideways, and by how much: one fault at\n// the start, two or three as the crust breaks up.\nconst FAULTS = [[27, 11], [17, 9, 45, -8], [12, 8, 31, -10, 50, 8]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  params.s = {\n    PX: F32(MAXP), PY: F32(MAXP), PVX: F32(MAXP), PVY: F32(MAXP), PF: F32(MAXP), PT: F32(MAXP), PG: new Int8Array(MAXP), np: 0,\n    t: 0, off: 0, k3: -1, heat: 0, spat: 0.06, c: 13, pm: 0.18, tf: FAULTS[0], rb: 50,\n    bubs: [], fl: [], hot: [], puffs: [], vt: [0, 0, 0, 0, 0, 0], fnd: null, fe: 0, next: 1.2, nfl: 0.5,\n  };\n}\n\nfunction ridge(S, x) {\n  let y = S.rb + 2.2 * sin(x * 0.085 + S.t * 0.05) + 1.3 * sin(x * 0.23 - S.t * 0.037 + 2);\n  for (let k = 0; k \u003c S.tf.length; k += 2) y += S.tf[k + 1] * (1 / (1 + exp(-(x - S.tf[k]) / 0.6)) - 0.5);\n  return y;\n}\n\n// The crust on each side of the crack is one rigid sheet sliding away from\n// it, so its plates are cells of a jittered grid in the sheet's own frame.\n// Each frame the grid points the panel can see are kept in a table (tab).\nconst CELL = { id: 0, px: 0, py: 0, e: 9, em: 9 }, TPX = new Float32Array(2048), TPY = new Float32Array(2048), TID = new Uint32Array(2048), GY0 = [0, 0];\nlet GX0 = 0, TW = 1;\nconst grid = (gx, gy, s) => h32(gx + s * 7919, gy);\nfunction table(off, c) {\n  (GX0 = floor((-3 * AX) / c) - 2), (TW = floor((67 * AX) / c) + 3 - GX0);\n  for (let s = 0; s \u003c 2; s++) {\n    const y0 = (s ? -off : off) + s * 300 - 3, n = floor((y0 + 134) / c) + 3 - (GY0[s] = floor(y0 / c) - 2);\n    for (let j = 0; j \u003c n * TW && j \u003c 1024; j++) {\n      const gx = GX0 + (j % TW), gy = GY0[s] + floor(j / TW), h = grid(gx, gy, s), q = s * 1024 + j;\n      (TID[q] = h), (TPX[q] = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (TPY[q] = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n    }\n  }\n}\nfunction cells(xx, ya, s, c, pm, tab) {\n  const u = (xx * AX) / c, v = ya / c, cu = floor(u), cv = floor(v);\n  let d1 = 99, d2 = 99, d3 = 99, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0, i1 = 0, i2 = 0, i3 = 0;\n  for (let gy = cv - 1; gy \u003c= cv + 1; gy++)\n    for (let gx = cu - 1; gx \u003c= cu + 1; gx++) {\n      let h, px, py;\n      if (tab) {\n        const q = s * 1024 + (gy - GY0[s]) * TW + gx - GX0;\n        (h = TID[q]), (px = TPX[q]), (py = TPY[q]);\n      } else (h = grid(gx, gy, s)), (px = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (py = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n      const d = (px - u) * (px - u) + (py - v) * (py - v);\n      if (d \u003c d1) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d1), (a2 = a1), (b2 = b1), (i2 = i1), (d1 = d), (a1 = px), (b1 = py), (i1 = h);\n      else if (d \u003c d2) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d), (a2 = px), (b2 = py), (i2 = h);\n      else if (d \u003c d3) (d3 = d), (a3 = px), (b3 = py), (i3 = h);\n    }\n  // Some neighbours have frozen together into one bigger, odd-shaped plate.\n  let e = (c * (d2 - d1)) / (2 * sqrt(AX * AX * (a1 - a2) ** 2 + (b1 - b2) ** 2) + 1e-6), em = 9;\n  if (hash(i1 ^ i2, 99) \u003c pm) {\n    em = e;\n    e = hash(i1 ^ i3, 99) \u003c pm ? 9 : (c * (d3 - d1)) / (2 * sqrt(AX * AX * (a1 - a3) ** 2 + (b1 - b3) ** 2) + 1e-6);\n  }\n  (CELL.id = i1), (CELL.px = (a1 * c) / AX), (CELL.py = b1 * c), (CELL.e = e), (CELL.em = em);\n  return CELL;\n}\n\nfunction bubble(S, big) {\n  const x = 4 + rnd() * 56, y = mix(ST[floor(x)] + 7, SB[floor(x)] - 7, 0.1 + 0.8 * rnd());\n  const sg = y \u003c ridge(S, x) ? -1 : 1;\n  S.bubs.push({ x, y, sg, t0: S.t, r: big ? 4.5 + 2 * rnd() : 1.2 + rnd() * (1.4 + 1.8 * S.spat), big: big ? 1 : rnd() \u003c S.spat * 0.4 ? 0.6 : 0, done: 0 });\n}\nfunction spark(S, x, y, sp, tf) {\n  if (S.np >= MAXP) return;\n  const i = S.np++, a = rnd() * 2 * PI;\n  (S.PX[i] = x), (S.PY[i] = y), (S.PVX[i] = cos(a) * sp), (S.PVY[i] = sin(a) * sp), (S.PF[i] = tf), (S.PT[i] = 0.62 + 0.3 * rnd()), (S.PG[i] = 0);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d);\n  S.off += V * d;\n  // Gas bubbles: a couple of seconds apart at the start, often and bigger with Spatter.\n  if ((S.next -= d * (0.35 + 2.2 * S.spat)) \u003c= 0) bubble(S, rnd() \u003c (S.spat - 0.55) * 0.5), (S.next = 0.4 + rnd());\n  for (const b of S.bubs) {\n    const a = t - b.t0;\n    b.y += b.sg * V * d;\n    if (a > 0.6 && !b.done) {\n      b.done = 1;\n      S.fe = max(S.fe, 0.25 + 0.9 * b.big + 0.05 * b.r);\n      for (let k = 0; k \u003c 5 + 7 * b.r + 40 * b.big; k++) spark(S, b.x, b.y, 3 + rnd() * (6 + 3 * b.r), 0.25 + rnd() * (0.4 + 0.8 * b.big));\n    }\n    // A big bubble keeps a fountain going for a while.\n    if (b.big && a > 0.6 && a \u003c 0.6 + 2 * b.big) for (let k = 0; k \u003c 2 + 4 * b.big; k++) spark(S, b.x + rnd() - 0.5, b.y + rnd() - 0.5, 2 + rnd() * 13 * b.big, 0.4 + rnd() * 1.1 * b.big);\n  }\n  S.bubs = S.bubs.filter((b) => t - b.t0 \u003c 5);\n  // Sparks fly out from the burst, land on the crust and ride it as they cool.\n  const { PX, PY, PVX, PVY, PF, PT, PG } = S;\n  let j = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    if (PF[i] > 0) {\n      (PX[i] += PVX[i] * d), (PY[i] += PVY[i] * d);\n      if ((PF[i] -= d) \u003c= 0) {\n        const x = floor(cl(PX[i], 0, W - 1));\n        PG[i] = PY[i] \u003c ST[x] || PY[i] > SB[x] ? 0 : PY[i] \u003c ridge(S, PX[i]) ? -1 : 1;\n      }\n    } else (PT[i] -= d * 0.28), (PY[i] += PG[i] * V * d);\n    if (PT[i] \u003c= 0 || PX[i] \u003c -2 || PX[i] > W + 2 || PY[i] \u003c -2 || PY[i] > H + 2) continue;\n    (PX[j] = PX[i]), (PY[j] = PY[i]), (PVX[j] = PVX[i]), (PVY[j] = PVY[i]), (PF[j] = PF[i]), (PT[j] = PT[i]), (PG[j] = PG[i]), j++;\n  }\n  S.np = j;\n  // Where plates dive under the walls the crust breaks with a flash.\n  if ((S.nfl -= d * V) \u003c= 0) S.fl.push({ x: rnd() * W, top: rnd() \u003c 0.4, t0: t, a: 0.4 + 0.6 * rnd() }), (S.nfl = 0.3 + 1.1 * rnd());\n  S.fl = S.fl.filter((f) => t - f.t0 \u003c 1.6);\n  // Fumaroles in the walls breathe out puffs that the wind takes along the rim.\n  VENTS.forEach(([x, u, top], k) => {\n    if ((S.vt[k] -= d * (1.6 + 3 * S.spat)) \u003c= 0) (S.vt[k] = 0.6 + 0.6 * rnd()), S.puffs.push({ x: x + rnd() - 0.5, u, top, t0: t, r: 1.4 + rnd() + 2 * S.spat });\n  });\n  for (const p of S.puffs) (p.x += (2.2 + 0.6 * sin(t * 0.3)) * d), (p.u += 1.1 * d);\n  S.puffs = S.puffs.filter((p) => t - p.t0 \u003c 4.5 && p.x \u003c W + 6);\n  S.fe *= exp(-d / 0.5);\n  // A foundering plate sinks for two seconds, then the hole crusts over.\n  const f = S.fnd;\n  if (f && t - f.t0 > 2.2) S.hot.push({ s: f.s, id: f.id, t }), (S.fnd = null);\n  S.hot = S.hot.filter((h) => t - h.t \u003c 7);\n}\n\nfunction founder(S) {\n  if (S.fnd) return;\n  const x = 16 + rnd() * 32, y = 72 + rnd() * 16, c = cells(x, y - S.off + 300, 1, S.c, S.pm);\n  S.fnd = { s: 1, id: c.id, t0: S.t };\n  S.fe = max(S.fe, 0.5);\n  for (let k = 0; k \u003c 24; k++) spark(S, x + (rnd() - 0.5) * S.c, y + (rnd() - 0.5) * S.c * 0.7, 2 + 5 * rnd(), 0.2 + 0.4 * rnd());\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k3 = cl(k[2], 0, 1);\n  S.heat = cl(k[0], 0, 1);\n  S.spat = cl(k[3], 0, 1);\n  if (abs(k3 - S.k3) > 0.005) (S.k3 = k3), (S.c = mix(13, 6, k3)), (S.pm = mix(0.18, 0.06, k3)), (S.tf = FAULTS[min(2, floor(k3 * 2.6))]), (S.fnd = null);\n  const p = input.btnPressed || [];\n  if (p[0]) bubble(S, 1), (S.bubs[S.bubs.length - 1].t0 -= 0.3);\n  if (p[1]) founder(S);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nconst F = new Float32Array(N * 3), SD = new Float32Array(N), RC = new Float32Array(W + 2), RMN = new Float32Array(W), RMX = new Float32Array(W);\nconst LAKE = [205, 80, 46], STEAM = [170, 112, 100], FL = new Float32Array(W * 2), SHN = new Float32Array(W * 2), WRN = new Float32Array(W), HS = new Int8Array(8), HI = new Uint32Array(8), HT = new Float32Array(8);\n\n// The distance from (x, y) to the crack, along its line through the column centres.\nlet STEEP = 0;\nfunction ridgeDist(x, xx, yy) {\n  let best = 1e9;\n  for (let c = max(0, x - 5); c \u003c min(W, x + 5); c++) {\n    const ax = c + 0.5, ay = RC[c], ey = RC[c + 1] - ay;\n    const u = cl((xx - ax + (yy - ay) * ey) / (1 + ey * ey), 0, 1), dx = xx - ax - u, dy = yy - ay - ey * u, d = dx * dx + dy * dy;\n    if (d \u003c best) (best = d), (STEEP = abs(ey));\n  }\n  return sqrt(best);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k3 \u003c 0) return;\n  const { t, heat, off, c: C } = S;\n  for (let x = 0; x \u003c W + 1; x++) RC[x] = ridge(S, x + 0.5);\n  for (let x = 0; x \u003c W; x++) {\n    let a = 1e9, b = -1e9;\n    for (let c = max(0, x - 5); c \u003c= min(W, x + 5); c++) (a = min(a, RC[c])), (b = max(b, RC[c]));\n    (RMN[x] = a), (RMX[x] = b), (WRN[x] = 0.5 + nz(x * 0.9 + 70, t * 0.7 + 20));\n    for (let s = 0; s \u003c 2; s++) SHN[x * 2 + s] = sm(0.3, 0.75, nz(x * 1.4 + 90 + s * 40, t * 0.5));\n  }\n  const LL = (0.5 + 0.75 * heat) * (0.92 + 0.08 * sin(t * 0.45)) + S.fe;\n  const ws0 = 0.42 + 2.5 * heat, wr0 = 0.8 + 3.4 * heat, Lc = 1.6 + 7 * heat, opA = 0.22 - 0.3 * heat;\n  table(off, C);\n  const fnd = S.fnd, fp = fnd ? cl((t - fnd.t0) / 2.2, 0, 1) : 0, nh = min(8, S.hot.length);\n  for (let k = 0; k \u003c nh; k++) (HS[k] = S.hot[k].s), (HI[k] = S.hot[k].id), (HT[k] = S.hot[k].t);\n  // Flashes along each shore, per column.\n  FL.fill(0);\n  for (const f of S.fl) for (let x = 0; x \u003c W; x++) FL[x * 2 + (f.top ? 0 : 1)] += f.a * exp(-(((x + 0.5 - f.x) / 2.6) ** 2)) * sm(0, 0.1, t - f.t0) * exp(-(t - f.t0) / 0.45);\n\n  for (let y = 0; y \u003c H; y++) {\n    const yy = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, xx = x + 0.5, st = ST[x], sb = SB[x];\n      if (yy \u003c st || yy > sb) {\n        // Crater wall, lit red from the lake below: its foot, then the lip of each bed.\n        const top = yy \u003c st, u = top ? st - yy : yy - sb, a = WA[i];\n        const lw = LL * (1.7 * ex(u / 1.6) * (0.6 + 0.6 * a) + 2.4 * a * ex(u / 11));\n        for (let c = 0; c \u003c 3; c++) F[o + c] = WG[o + c] + LAKE[c] * lw;\n        continue;\n      }\n      const up = yy \u003c RC[x], s = up ? 0 : 1, sg = up ? -1 : 1, ya = yy - sg * off + s * 300;\n      // Plate edges bend a little: the grid is read through a slow warp.\n      const n1 = nz(xx * 1.3, ya * 1.3), n2 = nz(xx * 0.6 + 40, ya * 0.6), P = cells(xx + 3 * (n2 - 0.5), ya + 2.6 * (n1 - 0.5), s, C, S.pm, 1), id = P.id, e = P.e, em = P.em, px = P.px, py = P.py;\n      STEEP = 0;\n      const dr = yy > RMN[x] - 7 && yy \u003c RMX[x] + 7 ? ridgeDist(x, xx, yy) : abs(yy - RC[x]) * 0.92, tf = sm(1.2, 3, STEEP);\n      const ds = up ? yy - st : sb - yy;\n\n      // The crust: black, its grain and ropes fixed to the plate.\n      const lx = xx - px, ly = (ya - py) * sg, g = h32(x + s * 131, round(ya) + 5003), pt = (id & 255) / 255;\n      const rope = fsin(ly * 1.9 + 0.05 * lx * lx + pt * 40) * (0.6 + 0.4 * fsin(lx * 0.4 + pt * 9)), tilt = 0.45 + 0.55 * sm(0, 4, ds);\n      let cr = ((g & 31) * 0.76 + rope * 1.5 + pt * 2) * tilt, cg = (((g >> 5) & 31) * 0.74 + rope * 2) * tilt, cb = (((g >> 10) & 31) * 0.76 + rope * 2.5 + pt * 2.5) * tilt;\n      // Young crust near the crack still glows through; so does a plate that foundered and froze over.\n      let Tc = 0.62 * ex(dr / Lc) * (0.65 + 0.7 * n1), hot = 99;\n      for (let k = 0; k \u003c nh; k++) if (HS[k] === s && HI[k] === id) hot = t - HT[k];\n      if (hot \u003c 7) Tc = max(Tc, 0.9 * exp(-hot / 0.7) * (0.75 + 0.5 * n2));\n      Tc = max(Tc, 0.22 * ex(e / 0.7) * (0.6 + heat));\n      if (Tc > 0.02) {\n        const L = lut(Tc), gl = sm(0, 0.5, Tc) * (0.75 + 0.03 * ((g >> 12) & 15));\n        (cr += LUT[L] * gl), (cg += LUT[L + 1] * gl), (cb += LUT[L + 2] * gl);\n      }\n      if (em \u003c 1.2) cr += 14 * sm(1.2, 0.2, em + 0.8 * (n1 - 0.5));\n      // Seams between plates: some open and red, some crusted shut; near the crack they spread wider.\n      const ws = ws0 * (0.4 + 1.2 * n1) * (1 + 0.7 * ex(dr / 6)), op = sm(opA, opA + 0.12, n1);\n      let A = e \u003c ws + 0.35 ? sm(ws + 0.35, ws - 0.25, e) * op : 0, T = 0.57 + 0.27 * heat + 0.12 * ex(dr / 8) + 0.36 * (n2 - 0.5);\n      // The spreading crack: the hottest lava, opening and closing along its length.\n      const wr = wr0 * WRN[x] * (1 - 0.6 * tf), ar = dr \u003c wr + 0.6 ? sm(wr + 0.6, wr - 0.4, dr) : 0;\n      if (ar > A) (A = ar), (T = 0.9 + 0.1 * heat - 0.3 * (dr / (wr + 0.6)) ** 2 + 0.25 * (n1 - 0.5) - 0.3 * tf);\n      // The shore where the crust dives under, flashing as it breaks.\n      const sh = ds \u003c 5 ? sm(1.7, 0.2, ds) * SHN[x * 2 + s] + 0.7 * ex(e / 1.2) * sm(5, 0.5, ds) + FL[x * 2 + s] * sm(4, 0.3, ds) : 0;\n      if (sh > A) (A = min(1, sh)), (T = 0.45 + 0.3 * heat + 0.3 * min(1, sh) + 0.2 * (n2 - 0.5));\n      // A foundering plate: its edges melt inward as it tilts and sinks.\n      if (fnd && fnd.s === s && fnd.id === id) {\n        const fa = sm(fp * 0.5 * C + 0.6, fp * 0.5 * C - 0.4, e);\n        (cr *= 1 - 0.6 * fp), (cg *= 1 - 0.6 * fp), (cb *= 1 - 0.6 * fp);\n        if (fa > A) (A = fa), (T = 0.62 + 0.3 * (1 - fp) + 0.2 * (n1 - 0.5));\n      }\n      if (hot \u003c 7) {\n        // The hole skins over in small new plates, their cracks narrowing and dimming.\n        const k = exp(-hot / 1.3), w = 0.3 + 3.5 * k * k * k, ha = sm(w + 0.5, w - 0.4, cells(xx, ya, s + 2, 4.5, 0).e) * sm(7, 4, hot);\n        if (ha > A) (A = ha), (T = 0.24 + 0.72 * k + 0.8 * k * (nz(xx * 2.4, ya * 2.4 + 9) - 0.5));\n      }\n      if (A > 0.003) {\n        // Open lava wrinkles a dark skin on itself as it cools.\n        const sw = hot \u003c 7 ? 0.8 : sm(0.2, 0.6, heat), sk = A > 0.5 && sw > 0 ? sm(0.07, 0.01, abs(nz(xx * 2.2 + 5, ya * 2.2) - 0.5)) * sw * 0.7 : 0;\n        const L = lut(T), b = A * (1 - sk);\n        (cr = mix(cr, LUT[L] + ((g >> 15) & 15) - 7.5, b)), (cg = mix(cg, LUT[L + 1] + ((g >> 19) & 31) * 0.8 - 12, b)), (cb = mix(cb, LUT[L + 2] + ((g >>> 24) & 31) * 0.8, b));\n      }\n      (F[o] = cr), (F[o + 1] = cg), (F[o + 2] = cb);\n    }\n  }\n  overlay(S, t);\n  // Exposed for the lava, as a night photograph of a lava lake is: what only\n  // glows faintly sinks back into the black of the crust.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const m = max(F[o], F[o + 1], F[o + 2]), k = m > 24 && m \u003c 60 ? (12 + (m - 24) * 1.333) / m : 1;\n    display.setPixel(i & 63, i >> 6, cl(F[o] * k, 0, 255) | 0, cl(F[o + 1] * k, 0, 255) | 0, cl(F[o + 2] * k, 0, 255) | 0);\n  }\n}\n\nfunction add(x, y, L, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], LUT[L + c], min(1, a));\n}\n\nfunction overlay(S, t) {\n  // Bubbles: the crust domes and cracks in a ring, then tears open and freezes over.\n  for (const b of S.bubs) {\n    const a = t - b.t0, R = b.r, E = R * 1.3 + 2, fnt = 2 * b.big;\n    for (let y = max(0, floor(b.y - E)); y \u003c min(H, b.y + E); y++)\n      for (let x = max(0, floor(b.x - E)); x \u003c min(W, b.x + E); x++) {\n        if (y \u003c ST[x] || y > SB[x]) continue;\n        const dx = x + 0.5 - b.x, dy = y + 0.5 - b.y, d = sqrt(dx * dx + dy * dy), o = (y * W + x) * 3;\n        let A, T;\n        if (a \u003c 0.6) {\n          // The crust domes up and cracks: a ring and spokes.\n          const p = a / 0.6, rr = R * (0.6 + 0.4 * p), sp = d \u003c rr ? sm(0.3, 0.08, abs(sin(Math.atan2(dy, dx) * 2.5 + b.r))) * sm(0.5, rr, d) : 0;\n          (A = p * max(sm(1, 0.2, abs(d - rr)), 0.8 * sp)), (T = 0.4 + 0.45 * p);\n        } else {\n          // Torn open: white-hot, churning while a fountain plays, then a skin\n          // closes over it in small plates, as over a foundered one.\n          const c = a - 0.6, hot = c \u003c fnt ? 1 : exp(-(c - fnt) / (0.4 + 0.2 * R)), sk = nz(x * 2.3 + b.r * 9, y * 2.3 + b.t0 * 7 + (c \u003c fnt ? c * 5 : 0));\n          const rr = R * (c \u003c fnt ? 0.6 : 1) * (0.7 + 0.8 * nz(x * 1.1 + b.r * 5, y * 1.1 + 40)), w = 0.3 + 3 * hot * hot * hot;\n          (A = sm(rr + 0.5, rr - 0.5, d) * sm(w + 0.5, w - 0.4, cells(dx + 40, dy + 40, 9 + floor(b.r * 97), 3.2, 0).e) * sm(0, 0.15, hot)), (T = 0.22 + 0.66 * hot - (0.2 * d) / R + 0.5 * (sk - 0.5) + (c \u003c fnt ? 0.25 * sm(R * 0.6, 0, d) : 0));\n          A = max(A, 0.9 * sm(1, 0.2, abs(d - R * 1.15)) * exp(-c / 0.35));\n        }\n        if (A > 0) {\n          const L = lut(T);\n          for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], LUT[L + k], min(1, A));\n        }\n      }\n  }\n  // Steam: soft puffs that swell and thin out, lit from the lake below.\n  SD.fill(0);\n  for (const p of S.puffs) {\n    const a = t - p.t0, r = p.r + 0.8 * a, al = sm(0, 0.5, a) * sm(4.5, 1.5, a);\n    const sx = p.top ? ST[cl(floor(p.x), 0, W - 1)] : SB[cl(floor(p.x), 0, W - 1)], yc = p.top ? sx - p.u : sx + p.u;\n    for (let y = max(0, floor(yc - r)); y \u003c min(H, yc + r + 1); y++) {\n      const u = p.top ? sx - y - 0.5 : y + 0.5 - sx, dy = (u - p.u) / 0.8;\n      if (abs(dy) > r) continue;\n      for (let x = max(0, floor(p.x - r)); x \u003c min(W, p.x + r); x++) {\n        const dx = x + 0.5 - p.x, q = 1 - (dx * dx + dy * dy) / (r * r);\n        if (q \u003c= 0) continue;\n        SD[y * W + x] += al * q * q * (0.45 + 0.55 * ex(max(0, u) / 7)) * (0.7 + 0.6 * nz(x * 1.7 + p.t0 * 13, y * 1.7));\n      }\n    }\n  }\n  const sl = min(1, (0.65 + 0.6 * S.spat) * (S.fe + 0.6 + 0.6 * S.heat));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (SD[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += STEAM[c] * sl * min(1, SD[i]) * (1 - F[o + c] / 255);\n  // Sparks: white-hot in the air, orange where they land, then dull red and gone.\n  const { PX, PY, PVX, PVY, PF, PT, np } = S;\n  for (let i = 0; i \u003c np; i++) {\n    if (PF[i] > 0) {\n      const L = lut(0.93 + 0.07 * sin(i));\n      add(PX[i], PY[i], L, 1), add(PX[i] - PVX[i] * 0.04, PY[i] - PVY[i] * 0.04, L, 0.5);\n    } else add(PX[i], PY[i], lut(PT[i] * 0.85), sm(0, 0.3, PT[i]));\n  }\n}\n","layer":{"id":"layer-lava-lake","type":"code","name":"lava-lake","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lava Lake\n// Family:  volcano\n// Idea:    Looking straight down into a lava lake at night: plates of black crust drift away from a glowing spreading crack that steps sideways at a transform fault, toward the terraced crater walls, where they tilt and go under a bright seam, while gas bubbles burst and throw spatter that lands and darkens and steam drifts off the walls.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after the lava lakes of Erta Ale and Nyiragongo seen from the crater rim\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1\n//\n// Knob 1: Heat. At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter.\n// Knob 2: Speed. At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower.\n// Knob 3: Plates. At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three.\n// Knob 4: Spatter. How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder.\n// Buttons: K1 tap bursts a big gas bubble that throws a fountain of spatter for two seconds. K2 tap founders a plate below the crack: its edges melt in as it tilts and sinks, and the hole skins over in small new plates.\n\nconst W = 64, H = 128, N = W * H;\n// Sparks at most; plates are 1 / AX wider than tall, stretched along the\n// crack; the crust drifts V LEDs per second at Speed 2.\nconst MAXP = 700, AX = 0.72, V = 1.6;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction h32(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return (h ^ (h >>> 16)) >>> 0;\n}\nconst hash = (i, j) => h32(i, j) / 4294967296;\nfunction vn(x, y, p) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), x0 = xi % p, y0 = yi % p, x1 = (xi + 1) % p, y1 = (yi + 1) % p;\n  const a = hash(x0, y0), b = hash(x1, y0), c = hash(x0, y1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, y1)) * su * sv;\n}\n// Smooth noise on a 128 x 128 torus, features about eight texels across.\nconst NZ = new Float32Array(128 * 128).map((_, k) => 0.65 * vn((k & 127) / 8, (k >> 7) / 8, 16) + 0.35 * vn((k & 127) / 4 + 3, (k >> 7) / 4, 32));\nfunction nz(u, v) {\n  const xi = floor(u), yi = floor(v), fx = u - xi, fy = v - yi, x0 = xi & 127, y0 = (yi & 127) \u003c\u003c 7, x1 = (x0 + 1) & 127, y1 = ((yi + 1) & 127) \u003c\u003c 7;\n  const a = NZ[y0 + x0], b = NZ[y0 + x1], c = NZ[y1 + x0];\n  return a + (b - a) * fx + (c - a) * fy + (a - b - c + NZ[y1 + x1]) * fx * fy;\n}\n// Lava by temperature: dull red, cherry, orange, yellow, the white of a fresh tear.\nconst STOPS = [[0, 30, 1, 0], [0.2, 104, 7, 0], [0.4, 184, 27, 2], [0.6, 238, 82, 7], [0.8, 250, 158, 36], [1, 254, 230, 148]];\nconst LUT = new Float32Array(257 * 3);\nfor (let q = 0; q \u003c= 256; q++) {\n  const T = q / 256;\n  let k = 0;\n  while (k \u003c 4 && T > STOPS[k + 1][0]) k++;\n  const [a, b] = [STOPS[k], STOPS[k + 1]], u = (T - a[0]) / (b[0] - a[0]);\n  for (let c = 0; c \u003c 3; c++) LUT[q * 3 + c] = mix(a[c + 1], b[c + 1], u);\n}\nconst lut = (T) => round(cl(T, 0, 1) * 256) * 3;\n// exp(-v) for v >= 0, read from a table.\nconst EX = new Float32Array(1025).map((_, k) => exp(-k / 64)), ex = (v) => (v \u003c 16 ? EX[(v * 64) | 0] : 0);\n// sin, read from a table.\nconst SN = new Float32Array(1024).map((_, k) => sin((k * PI) / 512)), fsin = (a) => SN[(a * 162.97) & 1023];\n\n// The shore of the lake under each column, and where the crater rim is.\nconst ST = new Float32Array(W), SB = new Float32Array(W), RT = new Float32Array(W), RB = new Float32Array(W);\nfor (let x = 0; x \u003c W; x++) {\n  ST[x] = 17.5 + 2.2 * sin(x * 0.11 + 1) + 1.4 * sin(x * 0.29 + 4) + 1.6 * (vn(x * 0.35, 2, 64) - 0.5);\n  SB[x] = 109.5 + 2.4 * sin(x * 0.09 + 3) + 1.3 * sin(x * 0.31) + 1.6 * (vn(x * 0.35, 9, 64) - 0.5);\n  RT[x] = 4 + 1.6 * sin(x * 0.07 + 2) + 1.4 * vn(x * 0.4, 5, 64);\n  RB[x] = H - 4 - 1.5 * sin(x * 0.08) - 1.4 * vn(x * 0.4, 7, 64);\n}\n// The walls: old lava beds stacked up the crater, the lip of each catching\n// the lake's light, and the rim at the top; a dark grain everywhere.\nconst WG = new Float32Array(N * 3), WA = new Float32Array(N);\nfor (let i = 0; i \u003c N; i++) {\n  const x = i & 63, y = i >> 6, top = y \u003c 64, u = top ? ST[x] - y - 0.5 : y + 0.5 - SB[x], g = h32(i, 77);\n  const q = u * 0.27 + 0.7 * vn(x * 0.1, top ? 1 : 30, 64) + 0.25 * vn(x * 0.4, top ? 4 : 40, 64), k = floor(q) + (top ? 0 : 50), f = q - floor(q);\n  WG[i * 3] = (g & 31) * 0.78;\n  WG[i * 3 + 1] = ((g >> 5) & 31) * 0.78;\n  WG[i * 3 + 2] = ((g >> 10) & 31) * 0.78;\n  const rim = top ? RT[x] - y - 0.5 : y + 0.5 - RB[x];\n  WA[i] = rim > 0.5 ? 0 : (rim > -0.5 ? 0.9 : (0.5 + 0.5 * hash(k, 3)) * sm(0.34, 0.08, f) * sm(0.12, 0.32, vn(x * 0.25, k * 7, 64))) * (0.8 + 0.4 * hash(i, 5));\n}\n\n// The fumaroles, each as its column and its height above the shore; the\n// last number is 1 on the top wall.\nconst VENTS = [[6, 5, 1], [27, 8, 1], [44, 4.5, 1], [15, 4.5, 0], [36, 7, 0], [55, 5, 0]];\n// Where the spreading crack steps sideways, and by how much: one fault at\n// the start, two or three as the crust breaks up.\nconst FAULTS = [[27, 11], [17, 9, 45, -8], [12, 8, 31, -10, 50, 8]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  params.s = {\n    PX: F32(MAXP), PY: F32(MAXP), PVX: F32(MAXP), PVY: F32(MAXP), PF: F32(MAXP), PT: F32(MAXP), PG: new Int8Array(MAXP), np: 0,\n    t: 0, off: 0, k3: -1, heat: 0, spat: 0.06, c: 13, pm: 0.18, tf: FAULTS[0], rb: 50,\n    bubs: [], fl: [], hot: [], puffs: [], vt: [0, 0, 0, 0, 0, 0], fnd: null, fe: 0, next: 1.2, nfl: 0.5,\n  };\n}\n\nfunction ridge(S, x) {\n  let y = S.rb + 2.2 * sin(x * 0.085 + S.t * 0.05) + 1.3 * sin(x * 0.23 - S.t * 0.037 + 2);\n  for (let k = 0; k \u003c S.tf.length; k += 2) y += S.tf[k + 1] * (1 / (1 + exp(-(x - S.tf[k]) / 0.6)) - 0.5);\n  return y;\n}\n\n// The crust on each side of the crack is one rigid sheet sliding away from\n// it, so its plates are cells of a jittered grid in the sheet's own frame.\n// Each frame the grid points the panel can see are kept in a table (tab).\nconst CELL = { id: 0, px: 0, py: 0, e: 9, em: 9 }, TPX = new Float32Array(2048), TPY = new Float32Array(2048), TID = new Uint32Array(2048), GY0 = [0, 0];\nlet GX0 = 0, TW = 1;\nconst grid = (gx, gy, s) => h32(gx + s * 7919, gy);\nfunction table(off, c) {\n  (GX0 = floor((-3 * AX) / c) - 2), (TW = floor((67 * AX) / c) + 3 - GX0);\n  for (let s = 0; s \u003c 2; s++) {\n    const y0 = (s ? -off : off) + s * 300 - 3, n = floor((y0 + 134) / c) + 3 - (GY0[s] = floor(y0 / c) - 2);\n    for (let j = 0; j \u003c n * TW && j \u003c 1024; j++) {\n      const gx = GX0 + (j % TW), gy = GY0[s] + floor(j / TW), h = grid(gx, gy, s), q = s * 1024 + j;\n      (TID[q] = h), (TPX[q] = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (TPY[q] = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n    }\n  }\n}\nfunction cells(xx, ya, s, c, pm, tab) {\n  const u = (xx * AX) / c, v = ya / c, cu = floor(u), cv = floor(v);\n  let d1 = 99, d2 = 99, d3 = 99, a1 = 0, b1 = 0, a2 = 0, b2 = 0, a3 = 0, b3 = 0, i1 = 0, i2 = 0, i3 = 0;\n  for (let gy = cv - 1; gy \u003c= cv + 1; gy++)\n    for (let gx = cu - 1; gx \u003c= cu + 1; gx++) {\n      let h, px, py;\n      if (tab) {\n        const q = s * 1024 + (gy - GY0[s]) * TW + gx - GX0;\n        (h = TID[q]), (px = TPX[q]), (py = TPY[q]);\n      } else (h = grid(gx, gy, s)), (px = gx + 0.05 + 0.9 * ((h & 65535) / 65536)), (py = gy + 0.05 + 0.9 * ((h >>> 16) / 65536));\n      const d = (px - u) * (px - u) + (py - v) * (py - v);\n      if (d \u003c d1) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d1), (a2 = a1), (b2 = b1), (i2 = i1), (d1 = d), (a1 = px), (b1 = py), (i1 = h);\n      else if (d \u003c d2) (d3 = d2), (a3 = a2), (b3 = b2), (i3 = i2), (d2 = d), (a2 = px), (b2 = py), (i2 = h);\n      else if (d \u003c d3) (d3 = d), (a3 = px), (b3 = py), (i3 = h);\n    }\n  // Some neighbours have frozen together into one bigger, odd-shaped plate.\n  let e = (c * (d2 - d1)) / (2 * sqrt(AX * AX * (a1 - a2) ** 2 + (b1 - b2) ** 2) + 1e-6), em = 9;\n  if (hash(i1 ^ i2, 99) \u003c pm) {\n    em = e;\n    e = hash(i1 ^ i3, 99) \u003c pm ? 9 : (c * (d3 - d1)) / (2 * sqrt(AX * AX * (a1 - a3) ** 2 + (b1 - b3) ** 2) + 1e-6);\n  }\n  (CELL.id = i1), (CELL.px = (a1 * c) / AX), (CELL.py = b1 * c), (CELL.e = e), (CELL.em = em);\n  return CELL;\n}\n\nfunction bubble(S, big) {\n  const x = 4 + rnd() * 56, y = mix(ST[floor(x)] + 7, SB[floor(x)] - 7, 0.1 + 0.8 * rnd());\n  const sg = y \u003c ridge(S, x) ? -1 : 1;\n  S.bubs.push({ x, y, sg, t0: S.t, r: big ? 4.5 + 2 * rnd() : 1.2 + rnd() * (1.4 + 1.8 * S.spat), big: big ? 1 : rnd() \u003c S.spat * 0.4 ? 0.6 : 0, done: 0 });\n}\nfunction spark(S, x, y, sp, tf) {\n  if (S.np >= MAXP) return;\n  const i = S.np++, a = rnd() * 2 * PI;\n  (S.PX[i] = x), (S.PY[i] = y), (S.PVX[i] = cos(a) * sp), (S.PVY[i] = sin(a) * sp), (S.PF[i] = tf), (S.PT[i] = 0.62 + 0.3 * rnd()), (S.PG[i] = 0);\n}\n\nfunction step(S, d) {\n  const t = (S.t += d);\n  S.off += V * d;\n  // Gas bubbles: a couple of seconds apart at the start, often and bigger with Spatter.\n  if ((S.next -= d * (0.35 + 2.2 * S.spat)) \u003c= 0) bubble(S, rnd() \u003c (S.spat - 0.55) * 0.5), (S.next = 0.4 + rnd());\n  for (const b of S.bubs) {\n    const a = t - b.t0;\n    b.y += b.sg * V * d;\n    if (a > 0.6 && !b.done) {\n      b.done = 1;\n      S.fe = max(S.fe, 0.25 + 0.9 * b.big + 0.05 * b.r);\n      for (let k = 0; k \u003c 5 + 7 * b.r + 40 * b.big; k++) spark(S, b.x, b.y, 3 + rnd() * (6 + 3 * b.r), 0.25 + rnd() * (0.4 + 0.8 * b.big));\n    }\n    // A big bubble keeps a fountain going for a while.\n    if (b.big && a > 0.6 && a \u003c 0.6 + 2 * b.big) for (let k = 0; k \u003c 2 + 4 * b.big; k++) spark(S, b.x + rnd() - 0.5, b.y + rnd() - 0.5, 2 + rnd() * 13 * b.big, 0.4 + rnd() * 1.1 * b.big);\n  }\n  S.bubs = S.bubs.filter((b) => t - b.t0 \u003c 5);\n  // Sparks fly out from the burst, land on the crust and ride it as they cool.\n  const { PX, PY, PVX, PVY, PF, PT, PG } = S;\n  let j = 0;\n  for (let i = 0; i \u003c S.np; i++) {\n    if (PF[i] > 0) {\n      (PX[i] += PVX[i] * d), (PY[i] += PVY[i] * d);\n      if ((PF[i] -= d) \u003c= 0) {\n        const x = floor(cl(PX[i], 0, W - 1));\n        PG[i] = PY[i] \u003c ST[x] || PY[i] > SB[x] ? 0 : PY[i] \u003c ridge(S, PX[i]) ? -1 : 1;\n      }\n    } else (PT[i] -= d * 0.28), (PY[i] += PG[i] * V * d);\n    if (PT[i] \u003c= 0 || PX[i] \u003c -2 || PX[i] > W + 2 || PY[i] \u003c -2 || PY[i] > H + 2) continue;\n    (PX[j] = PX[i]), (PY[j] = PY[i]), (PVX[j] = PVX[i]), (PVY[j] = PVY[i]), (PF[j] = PF[i]), (PT[j] = PT[i]), (PG[j] = PG[i]), j++;\n  }\n  S.np = j;\n  // Where plates dive under the walls the crust breaks with a flash.\n  if ((S.nfl -= d * V) \u003c= 0) S.fl.push({ x: rnd() * W, top: rnd() \u003c 0.4, t0: t, a: 0.4 + 0.6 * rnd() }), (S.nfl = 0.3 + 1.1 * rnd());\n  S.fl = S.fl.filter((f) => t - f.t0 \u003c 1.6);\n  // Fumaroles in the walls breathe out puffs that the wind takes along the rim.\n  VENTS.forEach(([x, u, top], k) => {\n    if ((S.vt[k] -= d * (1.6 + 3 * S.spat)) \u003c= 0) (S.vt[k] = 0.6 + 0.6 * rnd()), S.puffs.push({ x: x + rnd() - 0.5, u, top, t0: t, r: 1.4 + rnd() + 2 * S.spat });\n  });\n  for (const p of S.puffs) (p.x += (2.2 + 0.6 * sin(t * 0.3)) * d), (p.u += 1.1 * d);\n  S.puffs = S.puffs.filter((p) => t - p.t0 \u003c 4.5 && p.x \u003c W + 6);\n  S.fe *= exp(-d / 0.5);\n  // A foundering plate sinks for two seconds, then the hole crusts over.\n  const f = S.fnd;\n  if (f && t - f.t0 > 2.2) S.hot.push({ s: f.s, id: f.id, t }), (S.fnd = null);\n  S.hot = S.hot.filter((h) => t - h.t \u003c 7);\n}\n\nfunction founder(S) {\n  if (S.fnd) return;\n  const x = 16 + rnd() * 32, y = 72 + rnd() * 16, c = cells(x, y - S.off + 300, 1, S.c, S.pm);\n  S.fnd = { s: 1, id: c.id, t0: S.t };\n  S.fe = max(S.fe, 0.5);\n  for (let k = 0; k \u003c 24; k++) spark(S, x + (rnd() - 0.5) * S.c, y + (rnd() - 0.5) * S.c * 0.7, 2 + 5 * rnd(), 0.2 + 0.4 * rnd());\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], k3 = cl(k[2], 0, 1);\n  S.heat = cl(k[0], 0, 1);\n  S.spat = cl(k[3], 0, 1);\n  if (abs(k3 - S.k3) > 0.005) (S.k3 = k3), (S.c = mix(13, 6, k3)), (S.pm = mix(0.18, 0.06, k3)), (S.tf = FAULTS[min(2, floor(k3 * 2.6))]), (S.fnd = null);\n  const p = input.btnPressed || [];\n  if (p[0]) bubble(S, 1), (S.bubs[S.bubs.length - 1].t0 -= 0.3);\n  if (p[1]) founder(S);\n  step(S, cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) * 0.5);\n}\n\nconst F = new Float32Array(N * 3), SD = new Float32Array(N), RC = new Float32Array(W + 2), RMN = new Float32Array(W), RMX = new Float32Array(W);\nconst LAKE = [205, 80, 46], STEAM = [170, 112, 100], FL = new Float32Array(W * 2), SHN = new Float32Array(W * 2), WRN = new Float32Array(W), HS = new Int8Array(8), HI = new Uint32Array(8), HT = new Float32Array(8);\n\n// The distance from (x, y) to the crack, along its line through the column centres.\nlet STEEP = 0;\nfunction ridgeDist(x, xx, yy) {\n  let best = 1e9;\n  for (let c = max(0, x - 5); c \u003c min(W, x + 5); c++) {\n    const ax = c + 0.5, ay = RC[c], ey = RC[c + 1] - ay;\n    const u = cl((xx - ax + (yy - ay) * ey) / (1 + ey * ey), 0, 1), dx = xx - ax - u, dy = yy - ay - ey * u, d = dx * dx + dy * dy;\n    if (d \u003c best) (best = d), (STEEP = abs(ey));\n  }\n  return sqrt(best);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k3 \u003c 0) return;\n  const { t, heat, off, c: C } = S;\n  for (let x = 0; x \u003c W + 1; x++) RC[x] = ridge(S, x + 0.5);\n  for (let x = 0; x \u003c W; x++) {\n    let a = 1e9, b = -1e9;\n    for (let c = max(0, x - 5); c \u003c= min(W, x + 5); c++) (a = min(a, RC[c])), (b = max(b, RC[c]));\n    (RMN[x] = a), (RMX[x] = b), (WRN[x] = 0.5 + nz(x * 0.9 + 70, t * 0.7 + 20));\n    for (let s = 0; s \u003c 2; s++) SHN[x * 2 + s] = sm(0.3, 0.75, nz(x * 1.4 + 90 + s * 40, t * 0.5));\n  }\n  const LL = (0.5 + 0.75 * heat) * (0.92 + 0.08 * sin(t * 0.45)) + S.fe;\n  const ws0 = 0.42 + 2.5 * heat, wr0 = 0.8 + 3.4 * heat, Lc = 1.6 + 7 * heat, opA = 0.22 - 0.3 * heat;\n  table(off, C);\n  const fnd = S.fnd, fp = fnd ? cl((t - fnd.t0) / 2.2, 0, 1) : 0, nh = min(8, S.hot.length);\n  for (let k = 0; k \u003c nh; k++) (HS[k] = S.hot[k].s), (HI[k] = S.hot[k].id), (HT[k] = S.hot[k].t);\n  // Flashes along each shore, per column.\n  FL.fill(0);\n  for (const f of S.fl) for (let x = 0; x \u003c W; x++) FL[x * 2 + (f.top ? 0 : 1)] += f.a * exp(-(((x + 0.5 - f.x) / 2.6) ** 2)) * sm(0, 0.1, t - f.t0) * exp(-(t - f.t0) / 0.45);\n\n  for (let y = 0; y \u003c H; y++) {\n    const yy = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, xx = x + 0.5, st = ST[x], sb = SB[x];\n      if (yy \u003c st || yy > sb) {\n        // Crater wall, lit red from the lake below: its foot, then the lip of each bed.\n        const top = yy \u003c st, u = top ? st - yy : yy - sb, a = WA[i];\n        const lw = LL * (1.7 * ex(u / 1.6) * (0.6 + 0.6 * a) + 2.4 * a * ex(u / 11));\n        for (let c = 0; c \u003c 3; c++) F[o + c] = WG[o + c] + LAKE[c] * lw;\n        continue;\n      }\n      const up = yy \u003c RC[x], s = up ? 0 : 1, sg = up ? -1 : 1, ya = yy - sg * off + s * 300;\n      // Plate edges bend a little: the grid is read through a slow warp.\n      const n1 = nz(xx * 1.3, ya * 1.3), n2 = nz(xx * 0.6 + 40, ya * 0.6), P = cells(xx + 3 * (n2 - 0.5), ya + 2.6 * (n1 - 0.5), s, C, S.pm, 1), id = P.id, e = P.e, em = P.em, px = P.px, py = P.py;\n      STEEP = 0;\n      const dr = yy > RMN[x] - 7 && yy \u003c RMX[x] + 7 ? ridgeDist(x, xx, yy) : abs(yy - RC[x]) * 0.92, tf = sm(1.2, 3, STEEP);\n      const ds = up ? yy - st : sb - yy;\n\n      // The crust: black, its grain and ropes fixed to the plate.\n      const lx = xx - px, ly = (ya - py) * sg, g = h32(x + s * 131, round(ya) + 5003), pt = (id & 255) / 255;\n      const rope = fsin(ly * 1.9 + 0.05 * lx * lx + pt * 40) * (0.6 + 0.4 * fsin(lx * 0.4 + pt * 9)), tilt = 0.45 + 0.55 * sm(0, 4, ds);\n      let cr = ((g & 31) * 0.76 + rope * 1.5 + pt * 2) * tilt, cg = (((g >> 5) & 31) * 0.74 + rope * 2) * tilt, cb = (((g >> 10) & 31) * 0.76 + rope * 2.5 + pt * 2.5) * tilt;\n      // Young crust near the crack still glows through; so does a plate that foundered and froze over.\n      let Tc = 0.62 * ex(dr / Lc) * (0.65 + 0.7 * n1), hot = 99;\n      for (let k = 0; k \u003c nh; k++) if (HS[k] === s && HI[k] === id) hot = t - HT[k];\n      if (hot \u003c 7) Tc = max(Tc, 0.9 * exp(-hot / 0.7) * (0.75 + 0.5 * n2));\n      Tc = max(Tc, 0.22 * ex(e / 0.7) * (0.6 + heat));\n      if (Tc > 0.02) {\n        const L = lut(Tc), gl = sm(0, 0.5, Tc) * (0.75 + 0.03 * ((g >> 12) & 15));\n        (cr += LUT[L] * gl), (cg += LUT[L + 1] * gl), (cb += LUT[L + 2] * gl);\n      }\n      if (em \u003c 1.2) cr += 14 * sm(1.2, 0.2, em + 0.8 * (n1 - 0.5));\n      // Seams between plates: some open and red, some crusted shut; near the crack they spread wider.\n      const ws = ws0 * (0.4 + 1.2 * n1) * (1 + 0.7 * ex(dr / 6)), op = sm(opA, opA + 0.12, n1);\n      let A = e \u003c ws + 0.35 ? sm(ws + 0.35, ws - 0.25, e) * op : 0, T = 0.57 + 0.27 * heat + 0.12 * ex(dr / 8) + 0.36 * (n2 - 0.5);\n      // The spreading crack: the hottest lava, opening and closing along its length.\n      const wr = wr0 * WRN[x] * (1 - 0.6 * tf), ar = dr \u003c wr + 0.6 ? sm(wr + 0.6, wr - 0.4, dr) : 0;\n      if (ar > A) (A = ar), (T = 0.9 + 0.1 * heat - 0.3 * (dr / (wr + 0.6)) ** 2 + 0.25 * (n1 - 0.5) - 0.3 * tf);\n      // The shore where the crust dives under, flashing as it breaks.\n      const sh = ds \u003c 5 ? sm(1.7, 0.2, ds) * SHN[x * 2 + s] + 0.7 * ex(e / 1.2) * sm(5, 0.5, ds) + FL[x * 2 + s] * sm(4, 0.3, ds) : 0;\n      if (sh > A) (A = min(1, sh)), (T = 0.45 + 0.3 * heat + 0.3 * min(1, sh) + 0.2 * (n2 - 0.5));\n      // A foundering plate: its edges melt inward as it tilts and sinks.\n      if (fnd && fnd.s === s && fnd.id === id) {\n        const fa = sm(fp * 0.5 * C + 0.6, fp * 0.5 * C - 0.4, e);\n        (cr *= 1 - 0.6 * fp), (cg *= 1 - 0.6 * fp), (cb *= 1 - 0.6 * fp);\n        if (fa > A) (A = fa), (T = 0.62 + 0.3 * (1 - fp) + 0.2 * (n1 - 0.5));\n      }\n      if (hot \u003c 7) {\n        // The hole skins over in small new plates, their cracks narrowing and dimming.\n        const k = exp(-hot / 1.3), w = 0.3 + 3.5 * k * k * k, ha = sm(w + 0.5, w - 0.4, cells(xx, ya, s + 2, 4.5, 0).e) * sm(7, 4, hot);\n        if (ha > A) (A = ha), (T = 0.24 + 0.72 * k + 0.8 * k * (nz(xx * 2.4, ya * 2.4 + 9) - 0.5));\n      }\n      if (A > 0.003) {\n        // Open lava wrinkles a dark skin on itself as it cools.\n        const sw = hot \u003c 7 ? 0.8 : sm(0.2, 0.6, heat), sk = A > 0.5 && sw > 0 ? sm(0.07, 0.01, abs(nz(xx * 2.2 + 5, ya * 2.2) - 0.5)) * sw * 0.7 : 0;\n        const L = lut(T), b = A * (1 - sk);\n        (cr = mix(cr, LUT[L] + ((g >> 15) & 15) - 7.5, b)), (cg = mix(cg, LUT[L + 1] + ((g >> 19) & 31) * 0.8 - 12, b)), (cb = mix(cb, LUT[L + 2] + ((g >>> 24) & 31) * 0.8, b));\n      }\n      (F[o] = cr), (F[o + 1] = cg), (F[o + 2] = cb);\n    }\n  }\n  overlay(S, t);\n  // Exposed for the lava, as a night photograph of a lava lake is: what only\n  // glows faintly sinks back into the black of the crust.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const m = max(F[o], F[o + 1], F[o + 2]), k = m > 24 && m \u003c 60 ? (12 + (m - 24) * 1.333) / m : 1;\n    display.setPixel(i & 63, i >> 6, cl(F[o] * k, 0, 255) | 0, cl(F[o + 1] * k, 0, 255) | 0, cl(F[o + 2] * k, 0, 255) | 0);\n  }\n}\n\nfunction add(x, y, L, a) {\n  (x = floor(x)), (y = floor(y));\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], LUT[L + c], min(1, a));\n}\n\nfunction overlay(S, t) {\n  // Bubbles: the crust domes and cracks in a ring, then tears open and freezes over.\n  for (const b of S.bubs) {\n    const a = t - b.t0, R = b.r, E = R * 1.3 + 2, fnt = 2 * b.big;\n    for (let y = max(0, floor(b.y - E)); y \u003c min(H, b.y + E); y++)\n      for (let x = max(0, floor(b.x - E)); x \u003c min(W, b.x + E); x++) {\n        if (y \u003c ST[x] || y > SB[x]) continue;\n        const dx = x + 0.5 - b.x, dy = y + 0.5 - b.y, d = sqrt(dx * dx + dy * dy), o = (y * W + x) * 3;\n        let A, T;\n        if (a \u003c 0.6) {\n          // The crust domes up and cracks: a ring and spokes.\n          const p = a / 0.6, rr = R * (0.6 + 0.4 * p), sp = d \u003c rr ? sm(0.3, 0.08, abs(sin(Math.atan2(dy, dx) * 2.5 + b.r))) * sm(0.5, rr, d) : 0;\n          (A = p * max(sm(1, 0.2, abs(d - rr)), 0.8 * sp)), (T = 0.4 + 0.45 * p);\n        } else {\n          // Torn open: white-hot, churning while a fountain plays, then a skin\n          // closes over it in small plates, as over a foundered one.\n          const c = a - 0.6, hot = c \u003c fnt ? 1 : exp(-(c - fnt) / (0.4 + 0.2 * R)), sk = nz(x * 2.3 + b.r * 9, y * 2.3 + b.t0 * 7 + (c \u003c fnt ? c * 5 : 0));\n          const rr = R * (c \u003c fnt ? 0.6 : 1) * (0.7 + 0.8 * nz(x * 1.1 + b.r * 5, y * 1.1 + 40)), w = 0.3 + 3 * hot * hot * hot;\n          (A = sm(rr + 0.5, rr - 0.5, d) * sm(w + 0.5, w - 0.4, cells(dx + 40, dy + 40, 9 + floor(b.r * 97), 3.2, 0).e) * sm(0, 0.15, hot)), (T = 0.22 + 0.66 * hot - (0.2 * d) / R + 0.5 * (sk - 0.5) + (c \u003c fnt ? 0.25 * sm(R * 0.6, 0, d) : 0));\n          A = max(A, 0.9 * sm(1, 0.2, abs(d - R * 1.15)) * exp(-c / 0.35));\n        }\n        if (A > 0) {\n          const L = lut(T);\n          for (let k = 0; k \u003c 3; k++) F[o + k] = mix(F[o + k], LUT[L + k], min(1, A));\n        }\n      }\n  }\n  // Steam: soft puffs that swell and thin out, lit from the lake below.\n  SD.fill(0);\n  for (const p of S.puffs) {\n    const a = t - p.t0, r = p.r + 0.8 * a, al = sm(0, 0.5, a) * sm(4.5, 1.5, a);\n    const sx = p.top ? ST[cl(floor(p.x), 0, W - 1)] : SB[cl(floor(p.x), 0, W - 1)], yc = p.top ? sx - p.u : sx + p.u;\n    for (let y = max(0, floor(yc - r)); y \u003c min(H, yc + r + 1); y++) {\n      const u = p.top ? sx - y - 0.5 : y + 0.5 - sx, dy = (u - p.u) / 0.8;\n      if (abs(dy) > r) continue;\n      for (let x = max(0, floor(p.x - r)); x \u003c min(W, p.x + r); x++) {\n        const dx = x + 0.5 - p.x, q = 1 - (dx * dx + dy * dy) / (r * r);\n        if (q \u003c= 0) continue;\n        SD[y * W + x] += al * q * q * (0.45 + 0.55 * ex(max(0, u) / 7)) * (0.7 + 0.6 * nz(x * 1.7 + p.t0 * 13, y * 1.7));\n      }\n    }\n  }\n  const sl = min(1, (0.65 + 0.6 * S.spat) * (S.fe + 0.6 + 0.6 * S.heat));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (SD[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += STEAM[c] * sl * min(1, SD[i]) * (1 - F[o + c] / 255);\n  // Sparks: white-hot in the air, orange where they land, then dull red and gone.\n  const { PX, PY, PVX, PVY, PF, PT, np } = S;\n  for (let i = 0; i \u003c np; i++) {\n    if (PF[i] > 0) {\n      const L = lut(0.93 + 0.07 * sin(i));\n      add(PX[i], PY[i], L, 1), add(PX[i] - PVX[i] * 0.04, PY[i] - PVY[i] * 0.04, L, 0.5);\n    } else add(PX[i], PY[i], lut(PT[i] * 0.85), sm(0, 0.3, PT[i]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Heat=0..1, Speed=0.2..3, Plates=0..1, Spatter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Heat","min":0,"max":1,"about":"At 0 the lake is crusted over and only thin red-orange seams show between the plates; turned up, the seams and the crack open into rivers of orange lava with dark skin wrinkling on them, the young crust glows further from the crack and the walls and steam burn brighter."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the plates drift about a LED and a half a second, so a plate born at the crack reaches the bottom wall in about half a minute; at 0.2 ten times slower."},{"name":"Plates","min":0,"max":1,"about":"At 0 plates about eighteen LEDs wide and thirteen tall and one transform fault in the crack; turned up, the crust breaks into plates under half that size and the crack steps sideways at two faults, then three."},{"name":"Spatter","min":0,"max":1,"about":"How often gas bubbles burst: at the start a small one every two seconds or so; turned up they come faster and bigger, past the middle some throw fountains, and the fumaroles in the walls steam harder."}],"start":[0,2,0,0.06],"measures":{"motion":0.2026,"detail":0.1176,"edges":0.3894,"complexity":2.2223,"coverage":0.271,"colour":0.2444,"drift":0.0498},"knobResponse":[0.229,0.0729,0.0899,0.0472]},{"slug":"lava-lamp","title":"Lava Lamp","family":"sim","round":3,"note":"전구 위 웅덩이에서 데워진 왁스가 목을 늘이며 떨어져 나와 방울로 떠오르고, 위에서 식으면 다시 가라앉아요. 파란 물속에서 식은 왁스는 주황, 뜨거운 왁스는 노랑이에요.","idea":"A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.","buttons":"K1 tap flares the bulb, and the lowest drop heats through and lets go.","code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-lava-lamp","type":"code","name":"lava-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot."},{"name":"Heat","min":0.3,"max":3,"about":"How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top."},{"name":"Wax","min":4,"max":10,"about":"How many drops are loose in the lamp; drops past the count sink into the pool and melt into it."},{"name":"Stretch","min":0,"max":1,"about":"At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it."}],"start":[0,2,4,0.06],"measures":{"motion":0.1138,"detail":0.0147,"edges":0.1844,"complexity":1.5488,"coverage":1,"colour":0.5657,"drift":0.068},"knobResponse":[0.5599,0.1621,0.1504,0.0519]},{"slug":"lichtenberg","title":"Lichtenberg","family":"fractal","round":26,"note":"소다물을 바른 단풍나무 판의 위아래 전극에서 깃털 잔가지를 단 프랙탈 나무가 파란 플라스마와 주황 불씨를 달고 서로를 향해 타 들어가고, 만나면 아크가 번쩍여요. K1 이 판의 나무를 바꾸고, 누르면 다음 판이에요.","idea":"High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.","buttons":"K1 tap cuts the power and slides the next board in now.","code":"// ===== Patternflow pattern =====\n// Title:   Lichtenberg\n// Family:  fractal\n// Idea:    High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after fractal wood burning and the dielectric breakdown model (Niemeyer, Pietronero and Wiesmann, 1984)\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1\n//\n// Knob 1: Wood. Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash.\n// Knob 2: Speed. At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower.\n// Knob 3: Pull. The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders.\n// Knob 4: Lead. Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway.\n// Buttons: K1 tap cuts the power and slides the next board in now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, exp, sqrt, pow, sin, abs, log2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The board at rest fills columns X0..X1 and rows Y0..Y1; the electrodes\n// touch it at (TX, TY) and (BX, BY).\nconst X0 = 2, X1 = 61, Y0 = 3, Y1 = 124, TX = 32, TY = 9, BX = 31, BY = 118;\n// A board slides down this far for the next, with a few rows of rig between.\nconst SL = 131;\n// Seconds at Speed 2: wet board before the power, growth until the trees\n// meet, the arc, the embers dying, the slide.\nconst SOAK = 1.0, TG = 4.8, ARC = 0.5, COOL = 3, SLIDE = 1.6;\n// Cells each tree adds a second at the front when it keeps pace with its\n// schedule, and fringe twigs a second for every cell of its channels.\nconst RATE = 200, TWIG = 0.14;\n// A cell that joined the tree this recently is still plasma.\nconst TIP = 0.16;\nconst DIRS = [[1, 0], [1, 1], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1], [1, -1]];\n// How readily a channel, a twig and a twig's twig sprout a fringe twig,\n// and how far each new generation runs: three or four LEDs, two, then one.\nconst GEN = [1, 0.4, 0.25], LEN = [2, 1, 0];\n// A channel feeding this many cells beyond it burns a groove one, two,\n// three and four steps wider, with a brown scorch round it: the trunks\n// near the electrodes run thick and dark.\nconst WIDE = [12, 50, 160, 500];\n// How dark the curl's bands run, in grain darkness.\nconst CURL = 0.45;\nconst N4 = [-1, 1, -W, W], ND = [-W - 1, -W + 1, W - 1, W + 1], LUT = [0, 1, 16];\n\n// Board, grain, knot and char colours for maple, birch, walnut and\n// black-stained oak, where the burn leaves grey ash.\nconst WOODS = [\n  [[228, 196, 150], [160, 110, 66], [128, 76, 40], [30, 19, 14]],\n  [[244, 232, 204], [210, 186, 142], [120, 90, 58], [30, 19, 14]],\n  [[140, 90, 58], [88, 54, 34], [50, 30, 18], [26, 16, 12]],\n  [[50, 44, 46], [30, 26, 28], [18, 14, 14], [92, 86, 80]],\n];\nconst SMOKE = [196, 190, 184], RIG = [16, 17, 22];\n\n// One board's wood: grain darkness (above 1 in a knot), how wet the soda\n// wash left each spot, and a per-channel speckle.\nfunction wood() {\n  const g = F32(N), wet = F32(N), nz = new Int8Array(N * 3);\n  const ox = rnd() * 300, oy = rnd() * 300, per = 2.6 + rnd() * 0.6, tilt = (rnd() - 0.5) * 0.06;\n  const knots = [];\n  for (let k = 0, nk = 1 + floor(rnd() * 3); k \u003c nk; k++)\n    knots.push([X0 + 9 + rnd() * (X1 - X0 - 18), Y0 + 14 + rnd() * (Y1 - Y0 - 28), 1.6 + rnd() * 1.4]);\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let u = x + tilt * y + 9 * (vn(x / 26 + ox, y / 40 + oy) - 0.5) + 2 * (vn(x / 7 + oy, y / 11 + ox) - 0.5), kd = 0;\n      for (const [kx, ky, kr] of knots) {\n        const dx = x - kx, dy = (y - ky) / 2.2, d2 = dx * dx + dy * dy;\n        // The grain bends round a knot and crowds in close to it.\n        u += (kr * kr * 3 * dx) / (d2 + kr * kr);\n        kd = max(kd, 1 - sqrt(d2) / kr);\n      }\n      // Thin dark latewood lines, a pore streak here and there, and the curl\n      // of figured maple across the grain, a band every two rows or so.\n      const c = 0.5 + 0.5 * Math.cos((2 * Math.PI * u) / per);\n      let v = c ** 4 * (0.8 + 0.6 * vn(x / 5 + ox, y / 30)) + 0.22 * (hash(x, floor(y / 4) + 7) - 0.5);\n      v += CURL * (0.5 + 0.5 * Math.sin((2 * Math.PI * (y + 1.5 * vn(x / 6 + oy, y / 20))) / 2.3));\n      if (kd > 0) v = 1 + kd * 0.6;\n      g[i] = cl(v, 0, 1.6);\n      wet[i] = 0.5 + 0.5 * vn(x / 9 + oy, y / 9 + ox);\n      for (let ch = 0; ch \u003c 3; ch++) nz[i * 3 + ch] = round((rnd() - 0.5) * 4);\n    }\n  return { g, wet, nz, col: F32(N * 3), at: -1 };\n}\n\n// A board's colours for this K1: grain, knots, lamp, bevels and speckle.\nfunction paint(B, wood) {\n  const wv = wood * 3, wi = min(2, floor(wv)), wf = wv - wi, WC = [];\n  for (let j = 0; j \u003c 4; j++) WC.push([0, 1, 2].map((c) => WOODS[wi][j][c] + (WOODS[wi + 1][j][c] - WOODS[wi][j][c]) * wf));\n  B.ch = WC[3];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x, gv = B.g[i], lo = gv \u003c= 1 ? 0 : 1, t = gv \u003c= 1 ? gv : (gv - 1) / 0.6;\n      let lf = 1.02 - 0.12 * (y / H);\n      if (x === X0 || y === Y0) lf *= 1.08;\n      if (x === X1 || y === Y1) lf *= 0.7;\n      for (let c = 0; c \u003c 3; c++) B.col[i * 3 + c] = (WC[lo][c] + (WC[lo + 1][c] - WC[lo][c]) * t) * lf + B.nz[i * 3 + c];\n    }\n  B.at = wood;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    time: 0, ph: 0, pt: 0, tau: 0, power: 0, wood: 0, eta: 1, lead: 0, ym: 64,\n    own: new Uint8Array(N), twg: new Uint8Array(N), par: new Int32Array(N), cnt: new Int32Array(N), born: F32(N),\n    phi: F32(N), phi0: F32(N), chr: F32(N), sco: F32(N), ht: F32(N),\n    cand: [new Int32Array(N), new Int32Array(N)], cw: [F32(N), F32(N)], nc: [0, 0], acc: [0, 0], tac: [0, 0], tw: [], ntw: 0, cells: [new Int32Array(N), new Int32Array(N)], ncell: [1, 1], nsk: [1, 1],\n    fr: [TY, BY], meet: -1, meetQ: -1, path: new Int32Array(N), np: 0,\n    pl: F32(N), sm: F32(N), puffs: [], ring: new Int32Array(512), nr: 0, hot: new Int32Array(32), nh: 0, flash: 0,\n    wa: wood(), wb: wood(),\n  });\n  for (let k = 0; k \u003c 256; k++) P.tw.push({ left: 0 }), k \u003c 70 && P.puffs.push({ on: 0 });\n  // The field round the two bare electrodes, solved once from a straight ramp.\n  for (let y = Y0; y \u003c= Y1; y++) for (let x = X0; x \u003c= X1; x++) P.phi[y * W + x] = cl((y - TY) / (BY - TY), 0, 1);\n  (P.own[TY * W + TX] = 1), (P.phi[TY * W + TX] = 0), (P.own[BY * W + BX] = 2), (P.phi[BY * W + BX] = 1);\n  relax(P, 400);\n  P.phi0.set(P.phi);\n  fresh(P);\n}\n\n// A clean board under the electrodes, wet and unburnt.\nfunction fresh(P) {\n  for (const a of [P.own, P.twg, P.cnt, P.chr, P.sco, P.ht]) a.fill(0);\n  P.par.fill(-1);\n  P.born.fill(-9);\n  P.phi.set(P.phi0);\n  for (const t of P.tw) t.left = 0;\n  const t = TY * W + TX, b = BY * W + BX;\n  (P.own[t] = P.cnt[t] = P.cnt[b] = 1), (P.own[b] = 2), (P.cells[0][0] = t), (P.cells[1][0] = b);\n  Object.assign(P, { ncell: [1, 1], nsk: [1, 1], fr: [TY, BY], acc: [0, 0], tac: [0, 0], meet: -1, meetQ: -1, np: 0, tau: 0 });\n}\n\n// Red-black over-relaxation of Laplace's equation on the board: the top tree\n// held at 0, the bottom one at 1, the board's edges insulating.\nfunction relax(P, sweeps) {\n  const { own, phi } = P;\n  for (let s = 0; s \u003c sweeps; s++)\n    for (let c = 0; c \u003c 2; c++)\n      for (let y = Y0; y \u003c= Y1; y++) {\n        const r = y * W;\n        for (let x = X0 + ((y + c) & 1); x \u003c= X1; x += 2) {\n          const i = r + x;\n          if (own[i]) continue;\n          const v = phi[i];\n          const a = x > X0 ? phi[i - 1] : v, b = x \u003c X1 ? phi[i + 1] : v, u = y > Y0 ? phi[i - W] : v, d = y \u003c Y1 ? phi[i + W] : v;\n          phi[i] = v + 1.85 * ((a + b + u + d) * 0.25 - v);\n        }\n      }\n}\n\n// A wood cell beside one cell of a tree, or touching one at a corner, may\n// join it, with a chance that goes as the field there to the power eta.\n// Nothing off the board ever joins, so neighbours need no bounds checks.\nfunction scan(P, eta) {\n  const { own, phi, cand, cw } = P, n = [0, 0], t = [0, 0];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      if (own[i]) continue;\n      // Neighbours of each tree counted in one number, four bits a tree.\n      const s4 = LUT[own[i - 1]] + LUT[own[i + 1]] + LUT[own[i - W]] + LUT[own[i + W]];\n      const s8 = LUT[own[i - W - 1]] + LUT[own[i - W + 1]] + LUT[own[i + W - 1]] + LUT[own[i + W + 1]];\n      for (let k = 0; k \u003c 2; k++) {\n        const a = (s4 >> (4 * k)) & 15;\n        if (a > 1 || (!a && ((s8 >> (4 * k)) & 15) !== 1)) continue;\n        t[k] += pow(max(k ? 1 - phi[i] : phi[i], 1e-5), eta);\n        cand[k][n[k]] = i;\n        cw[k][n[k]++] = t[k];\n      }\n    }\n  P.nc = n;\n}\n\n// A cell joins tree k only if branches stay one LED wide: nothing of the\n// tree may touch it but the cell it grows from and that cell's neighbours.\n// Touching the other tree is the meeting.\nfunction join(P, c, k, tw = 0) {\n  const { own } = P;\n  if (own[c]) return false;\n  let p = -1, m = 0;\n  for (const o of N4) if (own[c + o] === k) (p = c + o), m++;\n  if (m > 1) return false;\n  if (p \u003c 0) for (const o of ND) if (own[c + o] === k && p \u003c 0) p = c + o;\n  if (p \u003c 0) return false;\n  const px = p & 63, py = p >> 6;\n  let other = -1;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const q = c + dy * W + dx;\n      if (q === c || q === p || !own[q]) continue;\n      if (own[q] !== k) {\n        // The trees may not close before their time.\n        if (P.tau \u003c TG - 0.25) return false;\n        other = q;\n      } else if (abs((q & 63) - px) > 1 || abs((q >> 6) - py) > 1) return false;\n    }\n  add(P, c, p, k, tw);\n  if (other >= 0) (P.meet = c), (P.meetQ = other);\n  return true;\n}\n\nfunction add(P, c, p, k, tw) {\n  const { cnt, par } = P, y = c >> 6, x = c & 63;\n  (P.own[c] = k), (P.twg[c] = tw), (par[c] = p), (cnt[c] = P.ht[c] = P.chr[c] = 1), (P.born[c] = P.time), (P.phi[c] = k - 1);\n  P.fr[k - 1] = k === 1 ? max(P.fr[0], y) : min(P.fr[1], y);\n  scorch(P, x, y, 1, 0.04);\n  P.ring[P.nr++ & 511] = c;\n  P.cells[k - 1][P.ncell[k - 1]++] = c;\n  if (!tw) P.nsk[k - 1]++;\n  // The current that feeds every cell beyond reaches it through all the\n  // cells back to the electrode, and the busiest burn into wide grooves.\n  for (let a = p; a >= 0; a = par[a]) {\n    const w = WIDE.indexOf(++cnt[a]);\n    if (w >= 0) {\n      const ax = a & 63, ay = a >> 6, r = 1 + 0.6 * w;\n      scorch(P, ax, ay, r, w ? 0.9 : 0.7, 1);\n      scorch(P, ax, ay, r + 2, 0.35);\n    }\n  }\n}\n\n// With burn set, char a groove of radius r round (x, y), still warm;\n// without, brown the wood within r by v, less towards the edge.\nfunction scorch(P, x, y, r, v, burn) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy, q = qy * W + qx;\n      if (d2 > r * r || qx \u003c X0 || qx > X1 || qy \u003c Y0 || qy > Y1) continue;\n      if (!burn) P.sco[q] = min(1, P.sco[q] + v * (1 - d2 / (r * r + 1)));\n      else (P.chr[q] = max(P.chr[q], v)), (P.ht[q] = max(P.ht[q], 0.5 * v));\n    }\n}\n\nfunction grow(P, d) {\n  relax(P, 3);\n  // Each tree has a front it should have reached by now, eased in so the\n  // growth speeds up as the trees close (a hard pull sends leaders racing\n  // out at once), and a cell budget that rises steeply when it lags.\n  const s = min(1, P.tau / TG) ** (1.35 - 0.15 * P.eta), late = max(0, P.tau - TG);\n  const lag = [TY + (P.ym - TY) * s - P.fr[0], P.fr[1] - (BY - (BY - P.ym) * s)];\n  // The leading electrode's tree takes the larger share of the front's\n  // cells; fringe twigs sprout as fast as there is channel to carry them,\n  // fewer the harder the pull.\n  for (let k = 0; k \u003c 2; k++) {\n    const f = exp(cl(lag[k] / 6, -2, 2.5)), sh = 1 + (k ? 0.85 : -0.85) * P.lead;\n    P.acc[k] += d * RATE * sh * f * (1 + 4 * late);\n    P.tac[k] += d * TWIG * P.nsk[k] * ((4.5 - P.eta) / 3.5) ** 2;\n  }\n  twigs(P);\n  if (P.acc[0] \u003c 1 && P.acc[1] \u003c 1 && P.tac[0] \u003c 1 && P.tac[1] \u003c 1) return;\n  scan(P, P.eta + 2 * late);\n  for (let k = 0; k \u003c 2; k++) {\n    const n = min(120, floor(P.acc[k])), C = P.cand[k], S = P.cw[k], m = P.nc[k];\n    P.acc[k] -= n;\n    if (!m) continue;\n    const tot = S[m - 1];\n    for (let t = 0, tries = 0; t \u003c n && tries \u003c 3 * n; tries++) {\n      const r = rnd() * tot;\n      let lo = 0;\n      for (let hi = m - 1, mid; lo \u003c hi; ) (mid = (lo + hi) >> 1), S[mid] \u003c r ? (lo = mid + 1) : (hi = mid);\n      if (join(P, C[lo], k + 1)) t++;\n      if (P.meet >= 0) return;\n    }\n  }\n  // A fringe twig sprouts off a burnt channel, an eighth of a turn off it\n  // or now and then a quarter, and runs a few LEDs, bending as it goes. A\n  // twig sprouts shorter twigs of its own, three generations deep.\n  for (let tries = 0, k = 0; tries \u003c 300; tries++) {\n    if (P.tac[k] \u003c 1) k = 1 - k;\n    if (P.tac[k] \u003c 1) break;\n    const a = P.cells[k][floor(rnd() * P.ncell[k])], g = P.twg[a];\n    if (P.par[a] \u003c 0 || g > 2 || rnd() > GEN[g]) continue;\n    // The branch's way here, read over four cells so one step cannot throw it.\n    let b = a;\n    for (let n = 0; n \u003c 4 && P.par[b] >= 0; n++) b = P.par[b];\n    const j = round((Math.atan2((a >> 6) - (b >> 6), (a & 63) - (b & 63)) * 4) / Math.PI) & 7;\n    const dir = (j + (rnd() \u003c 0.5 ? 1 : 7) * (rnd() \u003c 0.85 ? 1 : 2)) & 7;\n    const x = (a & 63) + DIRS[dir][0], y = (a >> 6) + DIRS[dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, k + 1, g + 1)) continue;\n    P.tac[k]--;\n    if (P.meet >= 0) return;\n    Object.assign(P.tw[P.ntw++ & 255], { c, d0: dir, dir, k: k + 1, g: g + 1, left: LEN[g] + floor(rnd() * LEN[g]) });\n  }\n  P.tac = P.tac.map((v) => min(v, 4));\n}\n\nfunction twigs(P) {\n  for (const t of P.tw) {\n    if (t.left \u003c= 0) continue;\n    t.left--;\n    // A twig wanders an eighth of a turn, never further off its way.\n    if (rnd() \u003c 0.25) {\n      const dir = (t.dir + (rnd() \u003c 0.5 ? 1 : 7)) & 7, off = (dir - t.d0 + 8) & 7;\n      if (off \u003c= 1 || off >= 7) t.dir = dir;\n    }\n    const x = (t.c & 63) + DIRS[t.dir][0], y = (t.c >> 6) + DIRS[t.dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, t.k, t.g)) {\n      t.left = 0;\n      continue;\n    }\n    t.c = c;\n    if (P.meet >= 0) return;\n  }\n}\n\n// The joined path, from the top electrode to the bottom one.\nfunction trace(P) {\n  const top = P.own[P.meet] === 1 ? P.meet : P.meetQ, bot = top === P.meet ? P.meetQ : P.meet;\n  let n = 0;\n  for (let a = top; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.path.subarray(0, n).reverse();\n  for (let a = bot; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.np = n;\n  for (let j = 0; j \u003c n; j++) {\n    const a = P.path[j], x = a & 63, y = a >> 6;\n    scorch(P, x, y, 2, 1, 1);\n    scorch(P, x, y, 4, 0.5);\n    P.ht[a] = 1;\n  }\n}\n\nfunction go(P, ph) {\n  (P.ph = ph), (P.pt = 0);\n  if (ph === 1) P.power = 1;\n  if (ph === 2) trace(P), (P.flash = 1);\n  if (ph > 2) P.power = 0;\n  if (ph === 0) ([P.wa, P.wb] = [P.wb, P.wa]), fresh(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  (P.wood = cl(k[0], 0, 1)), (P.eta = cl(k[2], 1, 4)), (P.lead = cl(k[3], -1, 1));\n  P.ym = (TY + BY) / 2 - 44 * P.lead;\n  (P.time += d), (P.pt += d);\n  if (input.btnPressed && input.btnPressed[0] && P.ph > 0 && P.ph \u003c 4) go(P, 4);\n  const ph = P.ph;\n  if (ph === 0 && P.pt >= SOAK) go(P, 1);\n  else if (ph === 1) {\n    P.tau += d;\n    grow(P, d);\n    // A board the trees cannot cross trips the breaker without an arc.\n    if (P.meet >= 0) go(P, 2);\n    else if (P.tau > TG + 3) go(P, 3);\n  } else if (ph === 2) {\n    // The arc keeps its path white hot.\n    for (let j = 0; j \u003c P.np; j++) P.ht[P.path[j]] = 1;\n    if (P.pt >= ARC) go(P, 3);\n  } else if (ph === 3 && P.pt >= COOL) go(P, 4);\n  else if (ph === 4 && P.pt >= SLIDE) go(P, 0), (P.wb = wood());\n  P.flash = max(0, P.flash - d * 9);\n  heat(P, d), smoke(P, d);\n}\n\n// Embers: fresh channels glow and cool to char, while the power is on the\n// busy trunks stay hot, and anything hot browns the wood round it.\nfunction heat(P, d) {\n  const { ht, own, cnt, sco, hot } = P, dec = exp(-d / (P.power ? 0.3 : 0.9));\n  let sum = 0, nh = 0;\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let h = ht[i];\n      if (h \u003c 0.004 && !own[i]) continue;\n      h *= dec;\n      if (P.power && own[i] && cnt[i] > 24) h = max(h, min(0.6, 0.12 * (log2(cnt[i]) - 3.5)) * (0.85 + 0.15 * rnd()));\n      ht[i] = h;\n      if (h > 0.2 && (cnt[i] > 12 || !own[i])) {\n        sum += h;\n        for (const o of N4) sco[i + o] = min(1, sco[i + o] + d * h * 0.3);\n        if (nh \u003c 32) hot[nh++] = i;\n        else if (rnd() \u003c 0.05) hot[floor(rnd() * 32)] = i;\n      }\n    }\n  P.nh = nh;\n  P.heatSum = sum;\n}\n\n// Smoke puffs rise off the hot channels, spread and thin out.\nfunction smoke(P, d) {\n  let want = (P.ph === 4 ? 0 : P.heatSum) * d * 0.22;\n  for (const s of P.puffs) {\n    if (s.on) {\n      if ((s.age += d) > s.life) {\n        s.on = 0;\n        continue;\n      }\n      s.x += (s.vx + 3 * sin(s.age * 2.3 + s.y * 0.1)) * d;\n      s.y += s.vy * d;\n      s.r += d * 1.6;\n      continue;\n    }\n    if (want > rnd() && P.nh) {\n      const i = P.hot[floor(rnd() * P.nh)];\n      Object.assign(s, { on: 1, x: i & 63, y: i >> 6, vx: (rnd() - 0.5) * 4, vy: -8 - rnd() * 8, r: 1, a: 0.16 + rnd() * 0.16, age: 0, life: 2.5 + rnd() * 2 });\n      want -= 1;\n    }\n  }\n}\n\n// Plasma at (x, y): how strongly it covers each LED round it.\nfunction plasma(L, x, y, r, v) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy;\n      if (qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c H && d2 \u003c= r * r) L[qy * W + qx] += v / (1 + d2 * 2.5);\n    }\n}\n\n// Ember colour by heat: dull red, orange, then yellow-white.\nconst EK = [0, 0.25, 0.6, 1], EC = [[0, 0, 0], [175, 35, 6], [255, 110, 20], [255, 220, 140]];\nfunction ember(h, out) {\n  const j = h \u003c 0.25 ? 0 : h \u003c 0.6 ? 1 : 2, t = (min(h, 1) - EK[j]) / (EK[j + 1] - EK[j]);\n  for (let c = 0; c \u003c 3; c++) out[c] = EC[j][c] + (EC[j + 1][c] - EC[j][c]) * t;\n}\n\nconst EM = [0, 0, 0];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { own, chr, sco, ht, born, pl, sm } = P;\n  pl.fill(0);\n  sm.fill(0);\n  if (P.wa.at !== P.wood) paint(P.wa, P.wood);\n  if (P.ph === 4 && P.wb.at !== P.wood) paint(P.wb, P.wood);\n  const off = P.ph === 4 ? SL * (1 - (1 + Math.cos((Math.PI * min(1, P.pt / SLIDE)))) / 2) : 0, oy = round(off);\n\n  // Plasma at the tips, and short streamers crackling ahead of them.\n  if (P.power) {\n    for (let j = 0; j \u003c 512 && j \u003c P.nr; j++) {\n      const c = P.ring[(P.nr - 1 - j) & 511], age = P.time - born[c];\n      if (age > TIP) break;\n      // Twigs behind the front only flash orange.\n      if (P.twg[c] && (own[c] === 1 ? (c >> 6) \u003c P.fr[0] - 14 : (c >> 6) > P.fr[1] + 14)) continue;\n      const f = (1 - age / TIP) * (0.5 + 0.5 * rnd()), x = c & 63, y = (c >> 6) + oy;\n      plasma(pl, x, y, 1.5, f);\n      if (rnd() \u003c 0.2)\n        for (let st = 0, sx = x, sy = y, len = 2 + floor(rnd() * 5); st \u003c len; st++) {\n          if (rnd() \u003c 0.6) sy += own[c] === 1 ? 1 : -1;\n          else sx += rnd() \u003c 0.5 ? -1 : 1;\n          if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n          pl[sy * W + sx] += 0.9 - st * 0.12;\n        }\n    }\n    // A blue corona at each electrode.\n    const z = 0.4 + 0.4 * rnd();\n    plasma(pl, TX, TY + oy, 2.5, z);\n    plasma(pl, BX, BY + oy, 2.5, z);\n  }\n  // The arc down the joined path, flickering sideways.\n  if (P.ph === 2) {\n    const f = (1 - 0.6 * (P.pt / ARC)) * (0.7 + 0.3 * rnd()), seed = rnd() * 99;\n    for (let j = 0; j \u003c P.np; j++) {\n      const a = P.path[j], x = (a & 63) + round(1.6 * (vn(j * 0.3, seed) - 0.5)), y = a >> 6;\n      if (j % 2 === 0) plasma(pl, x, y, 3.5, 0.35 * f);\n      pl[y * W + x] += 3 * f;\n    }\n  }\n  for (const s of P.puffs) {\n    if (!s.on) continue;\n    // A wisp, twice as tall as it is wide.\n    const a = s.a * sin((Math.PI * s.age) / s.life), R = Math.ceil(s.r), R2 = 2 * R;\n    for (let dy = -R2; dy \u003c= R2; dy++)\n      for (let dx = -R; dx \u003c= R; dx++) {\n        const qx = round(s.x) + dx, qy = round(s.y) + dy, d2 = (dx * dx + dy * dy * 0.25) / (s.r * s.r);\n        if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H || d2 >= 1) continue;\n        sm[qy * W + qx] += a * (1 - d2) * (1 - d2);\n      }\n  }\n\n  const fl = P.flash * 70, CH = P.wa.ch, dry = P.ph > 1 ? 1 : P.ph ? P.tau / (TG + 0.5) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r, g, b;\n      // Which board, if any, is under this LED.\n      let yb = y - oy, B = P.wa, burnt = 1;\n      if (P.ph === 4 && yb \u003c Y0) (yb += SL), (B = P.wb), (burnt = 0);\n      if (x >= X0 && x \u003c= X1 && yb >= Y0 && yb \u003c= Y1) {\n        const i = yb * W + x, C = B.col;\n        // The wet wash glosses the wood; the current steams it off the whole\n        // board and the burn dries it at once.\n        const s = burnt ? sco[i] : 0, lf = 0.86 + 0.28 * B.wet[i] * max(0, 1 - 3 * s - (burnt ? dry : 0));\n        (r = C[i * 3] * lf), (g = C[i * 3 + 1] * lf), (b = C[i * 3 + 2] * lf);\n        if (burnt) {\n          if (s > 0) (r *= 1 - 0.5 * s), (g *= 1 - 0.66 * s), (b *= 1 - 0.8 * s);\n          const c = chr[i];\n          if (c > 0) (r += (CH[0] - r) * c), (g += (CH[1] - g) * c), (b += (CH[2] - b) * c);\n          const h = ht[i];\n          if (h > 0.02 && c > 0.3) {\n            // Thick char glows only along its rim.\n            const rim = (x > X0 && chr[i - 1] \u003c 0.5) || (x \u003c X1 && chr[i + 1] \u003c 0.5) || chr[i - W] \u003c 0.5 || chr[i + W] \u003c 0.5;\n            ember(h * (rim ? 1 : 0.45), EM);\n            (r = max(r, EM[0])), (g = max(g, EM[1])), (b = max(b, EM[2]));\n          }\n        }\n        (r += fl), (g += fl), (b += fl * 1.2);\n      } else {\n        // The dark rig behind, with the board's shadow to its right.\n        const sh = x > X1 ? 0.55 : 1, q = hash(x, y);\n        (r = (RIG[0] + 6 * q) * sh), (g = (RIG[1] + 6 * hash(y, x)) * sh), (b = (RIG[2] + 6 * q) * sh);\n        if (x === 0 || x === 63) (r = 64 + 10 * q), (g = 66 + 10 * q), (b = 74 + 10 * q);\n      }\n      const m = min(0.7, sm[p]);\n      (r += (SMOKE[0] - r) * m), (g += (SMOKE[1] - g) * m), (b += (SMOKE[2] - b) * m);\n      // Plasma: deep blue where it is thin, blue-white where it is thick.\n      const t = pl[p];\n      if (t > 0.01) {\n        const u = min(1, t), w = min(1, t / 2.5);\n        (r += (90 + 160 * w - r) * u), (g += (120 + 130 * w - g) * u), (b += (255 - b) * u);\n      }\n      display.setPixel(x, y, cl(r, 0, 255) | 0, cl(g, 0, 255) | 0, cl(b, 0, 255) | 0);\n    }\n  electrodes(display, P);\n}\n\n// Brass clamps with their tips on the board, the red lead in from the top\n// and the black one from the bottom.\nfunction electrodes(display, P) {\n  for (let e = 0; e \u003c 2; e++) {\n    const cx = e ? BX : TX, s = e ? -1 : 1, y0 = e ? H - 1 : 0, lead = e ? [[96, 98, 110], [36, 36, 42]] : [[236, 84, 64], [172, 28, 22]];\n    for (let j = 0; j \u003c= 8; j++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const lit = j === 4 || dx === -3, dark = j === 7 || dx === 3;\n        let c = null;\n        if (j \u003c= 3 && abs(dx) \u003c= 1) c = lead[dx \u003c 0 ? 0 : 1];\n        else if (j >= 4 && j \u003c= 7) c = lit ? [236, 200, 110] : dark ? [130, 96, 40] : [196, 156, 70];\n        else if (j === 8 && !dx) c = P.power ? [210, 220, 255] : [240, 214, 130];\n        if (c) display.setPixel(cx + dx, y0 + s * j, c[0], c[1], c[2]);\n      }\n  }\n}\n","layer":{"id":"layer-lichtenberg","type":"code","name":"lichtenberg","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lichtenberg\n// Family:  fractal\n// Idea:    High voltage creeps over a wet board of pale wood from an electrode at each end; two branching trees of blue-white plasma and orange embers burn toward each other and char black, an arc flashes down the joined path, the embers die and the next board slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after fractal wood burning and the dielectric breakdown model (Niemeyer, Pietronero and Wiesmann, 1984)\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1\n//\n// Knob 1: Wood. Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash.\n// Knob 2: Speed. At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower.\n// Knob 3: Pull. The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders.\n// Knob 4: Lead. Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway.\n// Buttons: K1 tap cuts the power and slides the next board in now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, exp, sqrt, pow, sin, abs, log2 } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The board at rest fills columns X0..X1 and rows Y0..Y1; the electrodes\n// touch it at (TX, TY) and (BX, BY).\nconst X0 = 2, X1 = 61, Y0 = 3, Y1 = 124, TX = 32, TY = 9, BX = 31, BY = 118;\n// A board slides down this far for the next, with a few rows of rig between.\nconst SL = 131;\n// Seconds at Speed 2: wet board before the power, growth until the trees\n// meet, the arc, the embers dying, the slide.\nconst SOAK = 1.0, TG = 4.8, ARC = 0.5, COOL = 3, SLIDE = 1.6;\n// Cells each tree adds a second at the front when it keeps pace with its\n// schedule, and fringe twigs a second for every cell of its channels.\nconst RATE = 200, TWIG = 0.14;\n// A cell that joined the tree this recently is still plasma.\nconst TIP = 0.16;\nconst DIRS = [[1, 0], [1, 1], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1], [1, -1]];\n// How readily a channel, a twig and a twig's twig sprout a fringe twig,\n// and how far each new generation runs: three or four LEDs, two, then one.\nconst GEN = [1, 0.4, 0.25], LEN = [2, 1, 0];\n// A channel feeding this many cells beyond it burns a groove one, two,\n// three and four steps wider, with a brown scorch round it: the trunks\n// near the electrodes run thick and dark.\nconst WIDE = [12, 50, 160, 500];\n// How dark the curl's bands run, in grain darkness.\nconst CURL = 0.45;\nconst N4 = [-1, 1, -W, W], ND = [-W - 1, -W + 1, W - 1, W + 1], LUT = [0, 1, 16];\n\n// Board, grain, knot and char colours for maple, birch, walnut and\n// black-stained oak, where the burn leaves grey ash.\nconst WOODS = [\n  [[228, 196, 150], [160, 110, 66], [128, 76, 40], [30, 19, 14]],\n  [[244, 232, 204], [210, 186, 142], [120, 90, 58], [30, 19, 14]],\n  [[140, 90, 58], [88, 54, 34], [50, 30, 18], [26, 16, 12]],\n  [[50, 44, 46], [30, 26, 28], [18, 14, 14], [92, 86, 80]],\n];\nconst SMOKE = [196, 190, 184], RIG = [16, 17, 22];\n\n// One board's wood: grain darkness (above 1 in a knot), how wet the soda\n// wash left each spot, and a per-channel speckle.\nfunction wood() {\n  const g = F32(N), wet = F32(N), nz = new Int8Array(N * 3);\n  const ox = rnd() * 300, oy = rnd() * 300, per = 2.6 + rnd() * 0.6, tilt = (rnd() - 0.5) * 0.06;\n  const knots = [];\n  for (let k = 0, nk = 1 + floor(rnd() * 3); k \u003c nk; k++)\n    knots.push([X0 + 9 + rnd() * (X1 - X0 - 18), Y0 + 14 + rnd() * (Y1 - Y0 - 28), 1.6 + rnd() * 1.4]);\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let u = x + tilt * y + 9 * (vn(x / 26 + ox, y / 40 + oy) - 0.5) + 2 * (vn(x / 7 + oy, y / 11 + ox) - 0.5), kd = 0;\n      for (const [kx, ky, kr] of knots) {\n        const dx = x - kx, dy = (y - ky) / 2.2, d2 = dx * dx + dy * dy;\n        // The grain bends round a knot and crowds in close to it.\n        u += (kr * kr * 3 * dx) / (d2 + kr * kr);\n        kd = max(kd, 1 - sqrt(d2) / kr);\n      }\n      // Thin dark latewood lines, a pore streak here and there, and the curl\n      // of figured maple across the grain, a band every two rows or so.\n      const c = 0.5 + 0.5 * Math.cos((2 * Math.PI * u) / per);\n      let v = c ** 4 * (0.8 + 0.6 * vn(x / 5 + ox, y / 30)) + 0.22 * (hash(x, floor(y / 4) + 7) - 0.5);\n      v += CURL * (0.5 + 0.5 * Math.sin((2 * Math.PI * (y + 1.5 * vn(x / 6 + oy, y / 20))) / 2.3));\n      if (kd > 0) v = 1 + kd * 0.6;\n      g[i] = cl(v, 0, 1.6);\n      wet[i] = 0.5 + 0.5 * vn(x / 9 + oy, y / 9 + ox);\n      for (let ch = 0; ch \u003c 3; ch++) nz[i * 3 + ch] = round((rnd() - 0.5) * 4);\n    }\n  return { g, wet, nz, col: F32(N * 3), at: -1 };\n}\n\n// A board's colours for this K1: grain, knots, lamp, bevels and speckle.\nfunction paint(B, wood) {\n  const wv = wood * 3, wi = min(2, floor(wv)), wf = wv - wi, WC = [];\n  for (let j = 0; j \u003c 4; j++) WC.push([0, 1, 2].map((c) => WOODS[wi][j][c] + (WOODS[wi + 1][j][c] - WOODS[wi][j][c]) * wf));\n  B.ch = WC[3];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x, gv = B.g[i], lo = gv \u003c= 1 ? 0 : 1, t = gv \u003c= 1 ? gv : (gv - 1) / 0.6;\n      let lf = 1.02 - 0.12 * (y / H);\n      if (x === X0 || y === Y0) lf *= 1.08;\n      if (x === X1 || y === Y1) lf *= 0.7;\n      for (let c = 0; c \u003c 3; c++) B.col[i * 3 + c] = (WC[lo][c] + (WC[lo + 1][c] - WC[lo][c]) * t) * lf + B.nz[i * 3 + c];\n    }\n  B.at = wood;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    time: 0, ph: 0, pt: 0, tau: 0, power: 0, wood: 0, eta: 1, lead: 0, ym: 64,\n    own: new Uint8Array(N), twg: new Uint8Array(N), par: new Int32Array(N), cnt: new Int32Array(N), born: F32(N),\n    phi: F32(N), phi0: F32(N), chr: F32(N), sco: F32(N), ht: F32(N),\n    cand: [new Int32Array(N), new Int32Array(N)], cw: [F32(N), F32(N)], nc: [0, 0], acc: [0, 0], tac: [0, 0], tw: [], ntw: 0, cells: [new Int32Array(N), new Int32Array(N)], ncell: [1, 1], nsk: [1, 1],\n    fr: [TY, BY], meet: -1, meetQ: -1, path: new Int32Array(N), np: 0,\n    pl: F32(N), sm: F32(N), puffs: [], ring: new Int32Array(512), nr: 0, hot: new Int32Array(32), nh: 0, flash: 0,\n    wa: wood(), wb: wood(),\n  });\n  for (let k = 0; k \u003c 256; k++) P.tw.push({ left: 0 }), k \u003c 70 && P.puffs.push({ on: 0 });\n  // The field round the two bare electrodes, solved once from a straight ramp.\n  for (let y = Y0; y \u003c= Y1; y++) for (let x = X0; x \u003c= X1; x++) P.phi[y * W + x] = cl((y - TY) / (BY - TY), 0, 1);\n  (P.own[TY * W + TX] = 1), (P.phi[TY * W + TX] = 0), (P.own[BY * W + BX] = 2), (P.phi[BY * W + BX] = 1);\n  relax(P, 400);\n  P.phi0.set(P.phi);\n  fresh(P);\n}\n\n// A clean board under the electrodes, wet and unburnt.\nfunction fresh(P) {\n  for (const a of [P.own, P.twg, P.cnt, P.chr, P.sco, P.ht]) a.fill(0);\n  P.par.fill(-1);\n  P.born.fill(-9);\n  P.phi.set(P.phi0);\n  for (const t of P.tw) t.left = 0;\n  const t = TY * W + TX, b = BY * W + BX;\n  (P.own[t] = P.cnt[t] = P.cnt[b] = 1), (P.own[b] = 2), (P.cells[0][0] = t), (P.cells[1][0] = b);\n  Object.assign(P, { ncell: [1, 1], nsk: [1, 1], fr: [TY, BY], acc: [0, 0], tac: [0, 0], meet: -1, meetQ: -1, np: 0, tau: 0 });\n}\n\n// Red-black over-relaxation of Laplace's equation on the board: the top tree\n// held at 0, the bottom one at 1, the board's edges insulating.\nfunction relax(P, sweeps) {\n  const { own, phi } = P;\n  for (let s = 0; s \u003c sweeps; s++)\n    for (let c = 0; c \u003c 2; c++)\n      for (let y = Y0; y \u003c= Y1; y++) {\n        const r = y * W;\n        for (let x = X0 + ((y + c) & 1); x \u003c= X1; x += 2) {\n          const i = r + x;\n          if (own[i]) continue;\n          const v = phi[i];\n          const a = x > X0 ? phi[i - 1] : v, b = x \u003c X1 ? phi[i + 1] : v, u = y > Y0 ? phi[i - W] : v, d = y \u003c Y1 ? phi[i + W] : v;\n          phi[i] = v + 1.85 * ((a + b + u + d) * 0.25 - v);\n        }\n      }\n}\n\n// A wood cell beside one cell of a tree, or touching one at a corner, may\n// join it, with a chance that goes as the field there to the power eta.\n// Nothing off the board ever joins, so neighbours need no bounds checks.\nfunction scan(P, eta) {\n  const { own, phi, cand, cw } = P, n = [0, 0], t = [0, 0];\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      if (own[i]) continue;\n      // Neighbours of each tree counted in one number, four bits a tree.\n      const s4 = LUT[own[i - 1]] + LUT[own[i + 1]] + LUT[own[i - W]] + LUT[own[i + W]];\n      const s8 = LUT[own[i - W - 1]] + LUT[own[i - W + 1]] + LUT[own[i + W - 1]] + LUT[own[i + W + 1]];\n      for (let k = 0; k \u003c 2; k++) {\n        const a = (s4 >> (4 * k)) & 15;\n        if (a > 1 || (!a && ((s8 >> (4 * k)) & 15) !== 1)) continue;\n        t[k] += pow(max(k ? 1 - phi[i] : phi[i], 1e-5), eta);\n        cand[k][n[k]] = i;\n        cw[k][n[k]++] = t[k];\n      }\n    }\n  P.nc = n;\n}\n\n// A cell joins tree k only if branches stay one LED wide: nothing of the\n// tree may touch it but the cell it grows from and that cell's neighbours.\n// Touching the other tree is the meeting.\nfunction join(P, c, k, tw = 0) {\n  const { own } = P;\n  if (own[c]) return false;\n  let p = -1, m = 0;\n  for (const o of N4) if (own[c + o] === k) (p = c + o), m++;\n  if (m > 1) return false;\n  if (p \u003c 0) for (const o of ND) if (own[c + o] === k && p \u003c 0) p = c + o;\n  if (p \u003c 0) return false;\n  const px = p & 63, py = p >> 6;\n  let other = -1;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const q = c + dy * W + dx;\n      if (q === c || q === p || !own[q]) continue;\n      if (own[q] !== k) {\n        // The trees may not close before their time.\n        if (P.tau \u003c TG - 0.25) return false;\n        other = q;\n      } else if (abs((q & 63) - px) > 1 || abs((q >> 6) - py) > 1) return false;\n    }\n  add(P, c, p, k, tw);\n  if (other >= 0) (P.meet = c), (P.meetQ = other);\n  return true;\n}\n\nfunction add(P, c, p, k, tw) {\n  const { cnt, par } = P, y = c >> 6, x = c & 63;\n  (P.own[c] = k), (P.twg[c] = tw), (par[c] = p), (cnt[c] = P.ht[c] = P.chr[c] = 1), (P.born[c] = P.time), (P.phi[c] = k - 1);\n  P.fr[k - 1] = k === 1 ? max(P.fr[0], y) : min(P.fr[1], y);\n  scorch(P, x, y, 1, 0.04);\n  P.ring[P.nr++ & 511] = c;\n  P.cells[k - 1][P.ncell[k - 1]++] = c;\n  if (!tw) P.nsk[k - 1]++;\n  // The current that feeds every cell beyond reaches it through all the\n  // cells back to the electrode, and the busiest burn into wide grooves.\n  for (let a = p; a >= 0; a = par[a]) {\n    const w = WIDE.indexOf(++cnt[a]);\n    if (w >= 0) {\n      const ax = a & 63, ay = a >> 6, r = 1 + 0.6 * w;\n      scorch(P, ax, ay, r, w ? 0.9 : 0.7, 1);\n      scorch(P, ax, ay, r + 2, 0.35);\n    }\n  }\n}\n\n// With burn set, char a groove of radius r round (x, y), still warm;\n// without, brown the wood within r by v, less towards the edge.\nfunction scorch(P, x, y, r, v, burn) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy, q = qy * W + qx;\n      if (d2 > r * r || qx \u003c X0 || qx > X1 || qy \u003c Y0 || qy > Y1) continue;\n      if (!burn) P.sco[q] = min(1, P.sco[q] + v * (1 - d2 / (r * r + 1)));\n      else (P.chr[q] = max(P.chr[q], v)), (P.ht[q] = max(P.ht[q], 0.5 * v));\n    }\n}\n\nfunction grow(P, d) {\n  relax(P, 3);\n  // Each tree has a front it should have reached by now, eased in so the\n  // growth speeds up as the trees close (a hard pull sends leaders racing\n  // out at once), and a cell budget that rises steeply when it lags.\n  const s = min(1, P.tau / TG) ** (1.35 - 0.15 * P.eta), late = max(0, P.tau - TG);\n  const lag = [TY + (P.ym - TY) * s - P.fr[0], P.fr[1] - (BY - (BY - P.ym) * s)];\n  // The leading electrode's tree takes the larger share of the front's\n  // cells; fringe twigs sprout as fast as there is channel to carry them,\n  // fewer the harder the pull.\n  for (let k = 0; k \u003c 2; k++) {\n    const f = exp(cl(lag[k] / 6, -2, 2.5)), sh = 1 + (k ? 0.85 : -0.85) * P.lead;\n    P.acc[k] += d * RATE * sh * f * (1 + 4 * late);\n    P.tac[k] += d * TWIG * P.nsk[k] * ((4.5 - P.eta) / 3.5) ** 2;\n  }\n  twigs(P);\n  if (P.acc[0] \u003c 1 && P.acc[1] \u003c 1 && P.tac[0] \u003c 1 && P.tac[1] \u003c 1) return;\n  scan(P, P.eta + 2 * late);\n  for (let k = 0; k \u003c 2; k++) {\n    const n = min(120, floor(P.acc[k])), C = P.cand[k], S = P.cw[k], m = P.nc[k];\n    P.acc[k] -= n;\n    if (!m) continue;\n    const tot = S[m - 1];\n    for (let t = 0, tries = 0; t \u003c n && tries \u003c 3 * n; tries++) {\n      const r = rnd() * tot;\n      let lo = 0;\n      for (let hi = m - 1, mid; lo \u003c hi; ) (mid = (lo + hi) >> 1), S[mid] \u003c r ? (lo = mid + 1) : (hi = mid);\n      if (join(P, C[lo], k + 1)) t++;\n      if (P.meet >= 0) return;\n    }\n  }\n  // A fringe twig sprouts off a burnt channel, an eighth of a turn off it\n  // or now and then a quarter, and runs a few LEDs, bending as it goes. A\n  // twig sprouts shorter twigs of its own, three generations deep.\n  for (let tries = 0, k = 0; tries \u003c 300; tries++) {\n    if (P.tac[k] \u003c 1) k = 1 - k;\n    if (P.tac[k] \u003c 1) break;\n    const a = P.cells[k][floor(rnd() * P.ncell[k])], g = P.twg[a];\n    if (P.par[a] \u003c 0 || g > 2 || rnd() > GEN[g]) continue;\n    // The branch's way here, read over four cells so one step cannot throw it.\n    let b = a;\n    for (let n = 0; n \u003c 4 && P.par[b] >= 0; n++) b = P.par[b];\n    const j = round((Math.atan2((a >> 6) - (b >> 6), (a & 63) - (b & 63)) * 4) / Math.PI) & 7;\n    const dir = (j + (rnd() \u003c 0.5 ? 1 : 7) * (rnd() \u003c 0.85 ? 1 : 2)) & 7;\n    const x = (a & 63) + DIRS[dir][0], y = (a >> 6) + DIRS[dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, k + 1, g + 1)) continue;\n    P.tac[k]--;\n    if (P.meet >= 0) return;\n    Object.assign(P.tw[P.ntw++ & 255], { c, d0: dir, dir, k: k + 1, g: g + 1, left: LEN[g] + floor(rnd() * LEN[g]) });\n  }\n  P.tac = P.tac.map((v) => min(v, 4));\n}\n\nfunction twigs(P) {\n  for (const t of P.tw) {\n    if (t.left \u003c= 0) continue;\n    t.left--;\n    // A twig wanders an eighth of a turn, never further off its way.\n    if (rnd() \u003c 0.25) {\n      const dir = (t.dir + (rnd() \u003c 0.5 ? 1 : 7)) & 7, off = (dir - t.d0 + 8) & 7;\n      if (off \u003c= 1 || off >= 7) t.dir = dir;\n    }\n    const x = (t.c & 63) + DIRS[t.dir][0], y = (t.c >> 6) + DIRS[t.dir][1], c = y * W + x;\n    if (x \u003c X0 || x > X1 || y \u003c Y0 || y > Y1 || !join(P, c, t.k, t.g)) {\n      t.left = 0;\n      continue;\n    }\n    t.c = c;\n    if (P.meet >= 0) return;\n  }\n}\n\n// The joined path, from the top electrode to the bottom one.\nfunction trace(P) {\n  const top = P.own[P.meet] === 1 ? P.meet : P.meetQ, bot = top === P.meet ? P.meetQ : P.meet;\n  let n = 0;\n  for (let a = top; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.path.subarray(0, n).reverse();\n  for (let a = bot; a >= 0; a = P.par[a]) P.path[n++] = a;\n  P.np = n;\n  for (let j = 0; j \u003c n; j++) {\n    const a = P.path[j], x = a & 63, y = a >> 6;\n    scorch(P, x, y, 2, 1, 1);\n    scorch(P, x, y, 4, 0.5);\n    P.ht[a] = 1;\n  }\n}\n\nfunction go(P, ph) {\n  (P.ph = ph), (P.pt = 0);\n  if (ph === 1) P.power = 1;\n  if (ph === 2) trace(P), (P.flash = 1);\n  if (ph > 2) P.power = 0;\n  if (ph === 0) ([P.wa, P.wb] = [P.wb, P.wa]), fresh(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  (P.wood = cl(k[0], 0, 1)), (P.eta = cl(k[2], 1, 4)), (P.lead = cl(k[3], -1, 1));\n  P.ym = (TY + BY) / 2 - 44 * P.lead;\n  (P.time += d), (P.pt += d);\n  if (input.btnPressed && input.btnPressed[0] && P.ph > 0 && P.ph \u003c 4) go(P, 4);\n  const ph = P.ph;\n  if (ph === 0 && P.pt >= SOAK) go(P, 1);\n  else if (ph === 1) {\n    P.tau += d;\n    grow(P, d);\n    // A board the trees cannot cross trips the breaker without an arc.\n    if (P.meet >= 0) go(P, 2);\n    else if (P.tau > TG + 3) go(P, 3);\n  } else if (ph === 2) {\n    // The arc keeps its path white hot.\n    for (let j = 0; j \u003c P.np; j++) P.ht[P.path[j]] = 1;\n    if (P.pt >= ARC) go(P, 3);\n  } else if (ph === 3 && P.pt >= COOL) go(P, 4);\n  else if (ph === 4 && P.pt >= SLIDE) go(P, 0), (P.wb = wood());\n  P.flash = max(0, P.flash - d * 9);\n  heat(P, d), smoke(P, d);\n}\n\n// Embers: fresh channels glow and cool to char, while the power is on the\n// busy trunks stay hot, and anything hot browns the wood round it.\nfunction heat(P, d) {\n  const { ht, own, cnt, sco, hot } = P, dec = exp(-d / (P.power ? 0.3 : 0.9));\n  let sum = 0, nh = 0;\n  for (let y = Y0; y \u003c= Y1; y++)\n    for (let x = X0; x \u003c= X1; x++) {\n      const i = y * W + x;\n      let h = ht[i];\n      if (h \u003c 0.004 && !own[i]) continue;\n      h *= dec;\n      if (P.power && own[i] && cnt[i] > 24) h = max(h, min(0.6, 0.12 * (log2(cnt[i]) - 3.5)) * (0.85 + 0.15 * rnd()));\n      ht[i] = h;\n      if (h > 0.2 && (cnt[i] > 12 || !own[i])) {\n        sum += h;\n        for (const o of N4) sco[i + o] = min(1, sco[i + o] + d * h * 0.3);\n        if (nh \u003c 32) hot[nh++] = i;\n        else if (rnd() \u003c 0.05) hot[floor(rnd() * 32)] = i;\n      }\n    }\n  P.nh = nh;\n  P.heatSum = sum;\n}\n\n// Smoke puffs rise off the hot channels, spread and thin out.\nfunction smoke(P, d) {\n  let want = (P.ph === 4 ? 0 : P.heatSum) * d * 0.22;\n  for (const s of P.puffs) {\n    if (s.on) {\n      if ((s.age += d) > s.life) {\n        s.on = 0;\n        continue;\n      }\n      s.x += (s.vx + 3 * sin(s.age * 2.3 + s.y * 0.1)) * d;\n      s.y += s.vy * d;\n      s.r += d * 1.6;\n      continue;\n    }\n    if (want > rnd() && P.nh) {\n      const i = P.hot[floor(rnd() * P.nh)];\n      Object.assign(s, { on: 1, x: i & 63, y: i >> 6, vx: (rnd() - 0.5) * 4, vy: -8 - rnd() * 8, r: 1, a: 0.16 + rnd() * 0.16, age: 0, life: 2.5 + rnd() * 2 });\n      want -= 1;\n    }\n  }\n}\n\n// Plasma at (x, y): how strongly it covers each LED round it.\nfunction plasma(L, x, y, r, v) {\n  const R = Math.ceil(r);\n  for (let dy = -R; dy \u003c= R; dy++)\n    for (let dx = -R; dx \u003c= R; dx++) {\n      const qx = x + dx, qy = y + dy, d2 = dx * dx + dy * dy;\n      if (qx >= 0 && qx \u003c W && qy >= 0 && qy \u003c H && d2 \u003c= r * r) L[qy * W + qx] += v / (1 + d2 * 2.5);\n    }\n}\n\n// Ember colour by heat: dull red, orange, then yellow-white.\nconst EK = [0, 0.25, 0.6, 1], EC = [[0, 0, 0], [175, 35, 6], [255, 110, 20], [255, 220, 140]];\nfunction ember(h, out) {\n  const j = h \u003c 0.25 ? 0 : h \u003c 0.6 ? 1 : 2, t = (min(h, 1) - EK[j]) / (EK[j + 1] - EK[j]);\n  for (let c = 0; c \u003c 3; c++) out[c] = EC[j][c] + (EC[j + 1][c] - EC[j][c]) * t;\n}\n\nconst EM = [0, 0, 0];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { own, chr, sco, ht, born, pl, sm } = P;\n  pl.fill(0);\n  sm.fill(0);\n  if (P.wa.at !== P.wood) paint(P.wa, P.wood);\n  if (P.ph === 4 && P.wb.at !== P.wood) paint(P.wb, P.wood);\n  const off = P.ph === 4 ? SL * (1 - (1 + Math.cos((Math.PI * min(1, P.pt / SLIDE)))) / 2) : 0, oy = round(off);\n\n  // Plasma at the tips, and short streamers crackling ahead of them.\n  if (P.power) {\n    for (let j = 0; j \u003c 512 && j \u003c P.nr; j++) {\n      const c = P.ring[(P.nr - 1 - j) & 511], age = P.time - born[c];\n      if (age > TIP) break;\n      // Twigs behind the front only flash orange.\n      if (P.twg[c] && (own[c] === 1 ? (c >> 6) \u003c P.fr[0] - 14 : (c >> 6) > P.fr[1] + 14)) continue;\n      const f = (1 - age / TIP) * (0.5 + 0.5 * rnd()), x = c & 63, y = (c >> 6) + oy;\n      plasma(pl, x, y, 1.5, f);\n      if (rnd() \u003c 0.2)\n        for (let st = 0, sx = x, sy = y, len = 2 + floor(rnd() * 5); st \u003c len; st++) {\n          if (rnd() \u003c 0.6) sy += own[c] === 1 ? 1 : -1;\n          else sx += rnd() \u003c 0.5 ? -1 : 1;\n          if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n          pl[sy * W + sx] += 0.9 - st * 0.12;\n        }\n    }\n    // A blue corona at each electrode.\n    const z = 0.4 + 0.4 * rnd();\n    plasma(pl, TX, TY + oy, 2.5, z);\n    plasma(pl, BX, BY + oy, 2.5, z);\n  }\n  // The arc down the joined path, flickering sideways.\n  if (P.ph === 2) {\n    const f = (1 - 0.6 * (P.pt / ARC)) * (0.7 + 0.3 * rnd()), seed = rnd() * 99;\n    for (let j = 0; j \u003c P.np; j++) {\n      const a = P.path[j], x = (a & 63) + round(1.6 * (vn(j * 0.3, seed) - 0.5)), y = a >> 6;\n      if (j % 2 === 0) plasma(pl, x, y, 3.5, 0.35 * f);\n      pl[y * W + x] += 3 * f;\n    }\n  }\n  for (const s of P.puffs) {\n    if (!s.on) continue;\n    // A wisp, twice as tall as it is wide.\n    const a = s.a * sin((Math.PI * s.age) / s.life), R = Math.ceil(s.r), R2 = 2 * R;\n    for (let dy = -R2; dy \u003c= R2; dy++)\n      for (let dx = -R; dx \u003c= R; dx++) {\n        const qx = round(s.x) + dx, qy = round(s.y) + dy, d2 = (dx * dx + dy * dy * 0.25) / (s.r * s.r);\n        if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H || d2 >= 1) continue;\n        sm[qy * W + qx] += a * (1 - d2) * (1 - d2);\n      }\n  }\n\n  const fl = P.flash * 70, CH = P.wa.ch, dry = P.ph > 1 ? 1 : P.ph ? P.tau / (TG + 0.5) : 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r, g, b;\n      // Which board, if any, is under this LED.\n      let yb = y - oy, B = P.wa, burnt = 1;\n      if (P.ph === 4 && yb \u003c Y0) (yb += SL), (B = P.wb), (burnt = 0);\n      if (x >= X0 && x \u003c= X1 && yb >= Y0 && yb \u003c= Y1) {\n        const i = yb * W + x, C = B.col;\n        // The wet wash glosses the wood; the current steams it off the whole\n        // board and the burn dries it at once.\n        const s = burnt ? sco[i] : 0, lf = 0.86 + 0.28 * B.wet[i] * max(0, 1 - 3 * s - (burnt ? dry : 0));\n        (r = C[i * 3] * lf), (g = C[i * 3 + 1] * lf), (b = C[i * 3 + 2] * lf);\n        if (burnt) {\n          if (s > 0) (r *= 1 - 0.5 * s), (g *= 1 - 0.66 * s), (b *= 1 - 0.8 * s);\n          const c = chr[i];\n          if (c > 0) (r += (CH[0] - r) * c), (g += (CH[1] - g) * c), (b += (CH[2] - b) * c);\n          const h = ht[i];\n          if (h > 0.02 && c > 0.3) {\n            // Thick char glows only along its rim.\n            const rim = (x > X0 && chr[i - 1] \u003c 0.5) || (x \u003c X1 && chr[i + 1] \u003c 0.5) || chr[i - W] \u003c 0.5 || chr[i + W] \u003c 0.5;\n            ember(h * (rim ? 1 : 0.45), EM);\n            (r = max(r, EM[0])), (g = max(g, EM[1])), (b = max(b, EM[2]));\n          }\n        }\n        (r += fl), (g += fl), (b += fl * 1.2);\n      } else {\n        // The dark rig behind, with the board's shadow to its right.\n        const sh = x > X1 ? 0.55 : 1, q = hash(x, y);\n        (r = (RIG[0] + 6 * q) * sh), (g = (RIG[1] + 6 * hash(y, x)) * sh), (b = (RIG[2] + 6 * q) * sh);\n        if (x === 0 || x === 63) (r = 64 + 10 * q), (g = 66 + 10 * q), (b = 74 + 10 * q);\n      }\n      const m = min(0.7, sm[p]);\n      (r += (SMOKE[0] - r) * m), (g += (SMOKE[1] - g) * m), (b += (SMOKE[2] - b) * m);\n      // Plasma: deep blue where it is thin, blue-white where it is thick.\n      const t = pl[p];\n      if (t > 0.01) {\n        const u = min(1, t), w = min(1, t / 2.5);\n        (r += (90 + 160 * w - r) * u), (g += (120 + 130 * w - g) * u), (b += (255 - b) * u);\n      }\n      display.setPixel(x, y, cl(r, 0, 255) | 0, cl(g, 0, 255) | 0, cl(b, 0, 255) | 0);\n    }\n  electrodes(display, P);\n}\n\n// Brass clamps with their tips on the board, the red lead in from the top\n// and the black one from the bottom.\nfunction electrodes(display, P) {\n  for (let e = 0; e \u003c 2; e++) {\n    const cx = e ? BX : TX, s = e ? -1 : 1, y0 = e ? H - 1 : 0, lead = e ? [[96, 98, 110], [36, 36, 42]] : [[236, 84, 64], [172, 28, 22]];\n    for (let j = 0; j \u003c= 8; j++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const lit = j === 4 || dx === -3, dark = j === 7 || dx === 3;\n        let c = null;\n        if (j \u003c= 3 && abs(dx) \u003c= 1) c = lead[dx \u003c 0 ? 0 : 1];\n        else if (j >= 4 && j \u003c= 7) c = lit ? [236, 200, 110] : dark ? [130, 96, 40] : [196, 156, 70];\n        else if (j === 8 && !dx) c = P.power ? [210, 220, 255] : [240, 214, 130];\n        if (c) display.setPixel(cx + dx, y0 + s * j, c[0], c[1], c[2]);\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wood=0..1, Speed=0.2..3, Pull=1..4, Lead=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wood","min":0,"max":1,"about":"Pale maple at 0, then white birch, walnut and black-stained oak at 1. The char is black-brown on the pale boards; on the stained one the burn eats through to grey ash."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the power comes on a second and a half after a board is in, the trees meet four and a half seconds later, and a board takes about eleven seconds from wet to gone; at 0.2 it all runs ten times slower."},{"name":"Pull","min":1,"max":4,"about":"The exponent of the dielectric breakdown model, how hard the far electrode's field draws the growth: at 1 the trees fork like a river delta, each channel feathered with fine twigs and open wood between; at 4 they shoot at each other in a few straight leaders."},{"name":"Lead","min":-1,"max":1,"about":"Which electrode leads: at -1 the top tree burns most of the way down, at 1 the bottom one climbs most of the way up, and near 0 they meet halfway."}],"start":[0,2,1,0.06],"measures":{"motion":0.2052,"detail":0.13,"edges":0.3965,"complexity":2.6118,"coverage":0.9587,"colour":0.1893,"drift":0.2406},"knobResponse":[0.4635,0.1257,0.0391,0.0652]},{"slug":"life","title":"Life","family":"automata","round":1,"note":"같은 여덟 이웃에 법칙이 여섯이에요. 세포가 나이만큼 색을 입어서 법칙마다 무엇이 남는지 보여요.","idea":"The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.","buttons":"K1 tap sweeps a fresh soup down the whole panel.","code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-life","type":"code","name":"life","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole palette, newborn to old to ghost, around the colour wheel."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from one to about 24."},{"name":"Rule","min":0,"max":5,"about":"0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345."},{"name":"Ghosts","min":0,"max":1,"about":"How long a dead cell glows on, from a short smear to long exposure."}],"start":[0,2,0,0.06],"measures":{"motion":0.6935,"detail":0.1138,"edges":0.7121,"complexity":0.3343,"coverage":0.2193,"colour":0.2429,"drift":0.1393},"knobResponse":[0.1027,0.1531,0.303,0.0806]},{"slug":"liftoff","title":"Liftoff","family":"flight","round":22,"note":"새벽 물 건너 발사대에서 로켓이 하얀 산소 김을 흘리며 서 있다가 김구름 속에 불을 붙이고 솟아올라요. 카메라가 따라 고개를 들면 하늘이 파랑에서 별 뜬 검정으로 바뀌고, Max-Q 와 단 분리를 지나 밝은 점이 되면 새 로켓이 발사대에 서요.","idea":"A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.","buttons":"K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.","code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","layer":{"id":"layer-liftoff","type":"code","name":"liftoff","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Rocket","min":0,"max":3,"about":"A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer."},{"name":"Stages","min":1,"max":3,"about":"1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb."},{"name":"Time","min":0,"max":1,"about":"Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun."}],"start":[0,2,1,0.06],"measures":{"motion":0.3231,"detail":0.0267,"edges":0.3728,"complexity":1.8839,"coverage":0.9986,"colour":0.2838,"drift":0.1066},"knobResponse":[0.0489,0.062,0.0431,0.4667]},{"slug":"lip-gloss","title":"Lip Gloss","family":"cosmetic","round":31,"note":"맑은 글로스가 위에서 부어져 옅은 벽을 타고 흘러내리고, 앞머리가 길이 다른 방울 줄기로 갈라져 끝마다 빛 한 점을 문 구슬이 맺혀요. 바닥에 닿은 구슬은 떨어지고 글로스는 얇아지며 맑아져요. K1 은 색상환을 다 돌고, 누르면 위에 새로 부어요.","idea":"A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.","buttons":"K1 tap pours a fresh band along the top now.","code":"// ===== Patternflow pattern =====\n// Title:   Lip Gloss\n// Family:  cosmetic\n// Idea:    A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after clear lip gloss sliding down a tester wall\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it.\n// Knob 2: Speed. How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Pour. How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front.\n// Knob 4: Shimmer. Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly.\n// Buttons: K1 tap pours a fresh band along the top now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: rose, not red.\nconst H0 = 0.935;\n// The film moves under gravity with a flux C*h^3 (a viscous film on a wall,\n// speed going as thickness squared), so a film one unit thick runs C rows a\n// second at its front at Speed 2. A pour lasts POUR seconds, one starts\n// every CYCLE seconds.\nconst C = 30, POUR = 3, CYCLE = 11;\n// Flecks of mica for the Shimmer knob, at most MAXF at once.\nconst MAXF = 700;\n// Beads hanging from the bottom edge, at most MAXD; one lets go once it holds\n// DROP units of gloss.\nconst MAXD = 24, DROP = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    h: F(N), hr: F(N), q: F(H), m: F(W), front: new Int16Array(W), hf: F(W),\n    T: 0, since: 0, pourLeft: 0, flow: 0, out: F(W),\n    dx: F(MAXD), dv: F(MAXD), df: F(MAXD), dvy: F(MAXD), nd: 0,\n    bx: F(MAXD * 3), by: F(MAXD * 3), br: F(MAXD * 3), nb: 0,\n    fx: F(MAXF), fy: F(MAXF), fp: F(MAXF), fw: F(MAXF), nf: 0, cover: 0,\n    hue: 0, rate: 1, amount: 0, shim: 0.06, started: false,\n    tint: F(3), absb: F(3), wall: F(3), pear: F(3), gain: 1, dim: 0.27, buf: F(N * 3),\n  };\n}\n\n// A fresh pour: how much gloss comes down each column. A film running down\n// a wall breaks its front into fingers (Huppert 1982), the columns that get\n// ahead taking more of the flow. Here the fingers are laid into the pour: a\n// thin sheet across the whole width with bumps on it of different heights,\n// and since the front runs at a speed that goes as thickness squared, each\n// bump runs ahead as a drip of its own length.\nfunction newPour(S) {\n  const P = S.amount, m = S.m, nf = round(3 + 5 * P + rnd() * 0.8);\n  const base = 0.1 + 0.95 * P;\n  for (let x = 0; x \u003c W; x++) m[x] = base * (0.9 + 0.2 * rnd());\n  for (let k = 0; k \u003c nf; k++) {\n    const c = ((k + 0.5 + (rnd() - 0.5) * 0.7) / nf) * W, w = (1.6 + 1.3 * rnd()) * (1.3 - 0.4 * P);\n    const a = (0.6 + 1.0 * rnd()) * (1 - 0.55 * P);\n    for (let x = 0; x \u003c W; x++) m[x] += a * exp(-(((x + 0.5 - c) / w) ** 2));\n  }\n  S.pourLeft = POUR * (1 - 0.35 * P);\n  S.since = 0;\n  S.flow = C * (0.85 + 0.6 * P);\n}\n\nfunction flecks(S, st) {\n  // Mica hangs all through the gloss: new flecks turn up wherever the film is\n  // thick enough to hold them, as many as Shimmer asks for the film there is,\n  // and each rides down at the surface speed of the film under it, half as\n  // fast again as the film's mean.\n  const h = S.h, want = min(MAXF, S.shim * 1000 * S.cover);\n  for (let tries = 0; tries \u003c 60 && S.nf \u003c want; tries++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (h[floor(y) * W + floor(x)] \u003c 0.15) continue;\n    const i = S.nf++;\n    S.fx[i] = x;\n    S.fy[i] = y;\n    S.fp[i] = rnd() * 2 * PI;\n    S.fw[i] = (1.5 + 2.5 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  }\n  for (let i = S.nf - 1; i >= 0; i--) {\n    const hh = h[floor(S.fy[i]) * W + floor(S.fx[i])];\n    S.fy[i] += 1.5 * C * hh * hh * st;\n    S.fp[i] += S.fw[i] * st;\n    if (S.fy[i] >= H || hh \u003c 0.06 || S.nf > want + 20) {\n      const j = --S.nf;\n      S.fx[i] = S.fx[j];\n      S.fy[i] = S.fy[j];\n      S.fp[i] = S.fp[j];\n      S.fw[i] = S.fw[j];\n    }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= CYCLE) newPour(S);\n  const h = S.h, q = S.q, m = S.m;\n  // The pour feeds the top row; as it ends it tapers off over half a second.\n  if (S.pourLeft > 0) {\n    const f = S.flow * min(1, S.pourLeft * 2) * st;\n    for (let x = 0; x \u003c W; x++) h[x] += m[x] * f;\n    S.pourLeft -= st;\n  }\n  // Each column runs down with flux C*h^3, worked upwind in steps short\n  // enough for the fastest wave, which runs at 3*C*h^2.\n  let hm = 0;\n  for (let p = 0; p \u003c N; p++) if (h[p] > hm) hm = h[p];\n  const n = Math.ceil((st * 3 * C * hm * hm) / 0.8) || 1, dt = st / n;\n  for (let k = 0; k \u003c n; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      for (let y = 0, p = x; y \u003c H; y++, p += W) {\n        const v = h[p];\n        q[y] = C * v * v * v;\n      }\n      h[x] -= dt * q[0];\n      S.out[x] += dt * q[H - 1];\n      for (let y = 1, p = x + W; y \u003c H; y++, p += W) h[p] += dt * (q[y - 1] - q[y]);\n    }\n  }\n  // Surface tension pulls a little gloss sideways, so the drips stay round.\n  const D = min(0.2, 0.7 * st);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let prev = h[o];\n    for (let x = 0; x \u003c W; x++) {\n      const c = h[o + x], r = x \u003c W - 1 ? h[o + x + 1] : c;\n      h[o + x] = c + D * (prev + r - 2 * c);\n      prev = c;\n    }\n  }\n  // A film thinner than 0.45 slowly soaks away, the thinner the faster, so\n  // the wall clears from the top, where the draining film is thinnest, while\n  // the drips stay.\n  const fade = 0.075 * st;\n  let cover = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const v = h[p];\n    if (v \u003c 0.45) h[p] = max(0, v - fade * (1 - v / 0.45));\n    if (v > 0.15) cover++;\n  }\n  S.cover = cover / N;\n  flecks(S, st);\n  drops(S, st);\n}\n\n// What runs off the bottom row gathers into a bead hanging from the edge\n// under its drip; a full bead lets go and falls away.\nfunction drops(S, st) {\n  const out = S.out;\n  for (let x = 0; x \u003c W; x++) {\n    const v = out[x];\n    if (v \u003c= 0) continue;\n    out[x] = 0;\n    let b = -1, bd = 4.5;\n    for (let i = 0; i \u003c S.nd; i++) {\n      const d = abs(S.dx[i] - x - 0.5);\n      if (S.df[i] \u003c 0 && d \u003c bd) (bd = d), (b = i);\n    }\n    if (b \u003c 0) {\n      if (S.nd >= MAXD) continue;\n      b = S.nd++;\n      S.dx[b] = x + 0.5;\n      S.dv[b] = 0;\n      S.df[b] = -1;\n    }\n    const nv = S.dv[b] + v;\n    S.dx[b] = (S.dx[b] * S.dv[b] + (x + 0.5) * v) / nv;\n    S.dv[b] = nv;\n  }\n  for (let i = S.nd - 1; i >= 0; i--) {\n    if (S.df[i] \u003c 0) {\n      // A bead nothing feeds any more slowly soaks away like the film.\n      S.dv[i] -= 0.12 * st;\n      if (S.dv[i] > DROP) (S.df[i] = 0), (S.dvy[i] = 20);\n      else if (S.dv[i] \u003c 0.05) S.df[i] = 99;\n      continue;\n    }\n    S.dvy[i] += 500 * st;\n    S.df[i] += S.dvy[i] * st;\n    if (S.df[i] > 14) {\n      const j = --S.nd;\n      S.dx[i] = S.dx[j];\n      S.dv[i] = S.dv[j];\n      S.df[i] = S.df[j];\n      S.dvy[i] = S.dvy[j];\n    }\n  }\n}\n\n// Adds a round bead of gloss, radius r and height A, centred at cx, cy.\nfunction dome(S, cx, cy, r, A) {\n  const { hr, h } = S;\n  if (S.nb \u003c MAXD * 3) {\n    S.bx[S.nb] = cx;\n    S.by[S.nb] = cy;\n    S.br[S.nb++] = r;\n  }\n  for (let y = max(0, floor(cy - r)); y \u003c= min(H - 1, floor(cy + r)); y++)\n    for (let X = max(0, floor(cx - r)); X \u003c= min(W - 1, floor(cx + r)); X++) {\n      const dx = (X + 0.5 - cx) / r, dy = (y + 0.5 - cy) / r, d2 = dx * dx + dy * dy;\n      if (d2 \u003c 1) {\n        const p = y * W + X;\n        hr[p] = max(hr[p], h[p] + A * sqrt(1 - d2));\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.amount = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    newPour(S);\n    // Open a second and a half into the first pour.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) newPour(S);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { h, hr, front, hf, buf, tint, absb, wall } = S;\n  const hue = H0 + S.hue;\n  // How the gloss tints the light that goes through it: each channel is cut\n  // by exp(-a*h), a taken from the tint so thick gloss is the deep colour.\n  hsv(hue, 0.8, 1, tint, 0);\n  for (let c = 0; c \u003c 3; c++) absb[c] = -Math.log(max(0.2, tint[c])) * 0.95;\n  // Orange and yellow tints darkened read brown and olive on LEDs; the wall\n  // is bright enough that they stay clear, and they get a touch more light.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.11) / 0.1);\n  S.gain = 1 + 0.08 * am;\n  S.dim = 0.27 * (1 - 0.85 * max(0, 1 - abs(hw - 0.13) / 0.16));\n  // The wall: a pale warm white with a breath of the tint.\n  hsv(hue + 0.04, 0.07, 1, wall, 0);\n  // Each column's front and the rim behind it: walking up from the bottom,\n  // every step where the film thickens adds to a ridge that fades over three\n  // rows, the capillary ridge a running film piles up at its front.\n  const kr = exp(-1 / 2.6);\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0, f = -1, fh = 0;\n    for (let y = H - 1; y >= 0; y--) {\n      const p = y * W + x, below = y \u003c H - 1 ? h[p + W] : 0, jump = h[p] - below;\n      r *= kr;\n      if (jump > 0.02) r += jump * 0.9;\n      if (f \u003c 0 && h[p] > 0.1) (f = y), (fh = h[p]);\n      hr[p] = h[p] + r;\n    }\n    front[x] = f;\n    hf[x] = fh;\n  }\n  S.nb = 0;\n  // Beads: where a column's front runs further than its neighbours', the\n  // gloss gathers into a round bead at the tip of the drip.\n  for (let x = 0; x \u003c W; x++) {\n    const f = front[x];\n    if (f \u003c 6 || f > H - 5) continue;\n    let tip = true, lo = 1e9;\n    for (let d = -3; d \u003c= 3 && tip; d++) {\n      if (!d) continue;\n      const xx = x + d;\n      if (xx \u003c 0 || xx >= W) continue;\n      if (front[xx] > f || (front[xx] === f && d \u003c 0)) tip = false;\n      lo = min(lo, front[xx]);\n    }\n    if (!tip || f - lo \u003c 2) continue;\n    const r = 2 + 1.8 * min(1.2, hf[x]);\n    dome(S, x + 0.5, f + 0.6 - r * 0.55, r, 0.5 + 0.7 * min(1.2, hf[x]));\n  }\n  for (let i = 0; i \u003c S.nd; i++) {\n    const r = 1.3 + 1.2 * sqrt(S.dv[i]);\n    dome(S, S.dx[i], H - 0.3 - r + max(0, S.df[i]), r, 0.6 + 0.15 * r);\n  }\n  // The light: a soft bar above the wall that glides down it, seen in the\n  // gloss as a mirror image moved by the slope of the surface, and a small\n  // lamp to one side that puts a point of light on every bead.\n  const T = S.T, ys = ((T * 9) % (H + 60)) - 30, lxa = 0.25 * sin(T * 0.37), lya = -0.32 + 0.08 * sin(T * 0.23);\n  let hx = lxa, hy = lya, hz = 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hl;\n  hy /= hl;\n  hz /= hl;\n  const sh = S.shim, pear = S.pear;\n  hsv(hue - 0.04, 0.3, 245, pear, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t0 = hr[p], t = t0 / (1 + 0.25 * t0);\n      const wb = (0.8 + 0.07 * exp(-(((x - 32) / 40) ** 2 + ((y - ys * 0.5 - 30) / 90) ** 2))) * 255;\n      const film = sm(0.02, 0.14, t);\n      let R = wall[0] * wb, G = wall[1] * wb, B = wall[2] * wb;\n      if (film > 0) {\n        // Thick gloss also dims the wall a little in every channel, the band\n        // and the beads most, so the deep parts read deeper; less so for the\n        // warm tints, which dimmed turn brown and olive.\n        const g = S.gain * exp(-S.dim * t * t);\n        R *= exp(-absb[0] * t) * g;\n        G *= exp(-absb[1] * t) * g;\n        B *= exp(-absb[2] * t) * g;\n        // Mica scatters light back out of the gloss, a pearly haze of the\n        // tint over the film that grows with Shimmer.\n        const pe = 0.42 * sh * film;\n        R += (pear[0] - R) * pe;\n        G += (pear[1] - G) * pe;\n        B += (pear[2] - B) * pe;\n        const gx = (hr[x \u003c W - 1 ? p + 1 : p] - hr[x > 0 ? p - 1 : p]) * 0.5;\n        const gy = (hr[y \u003c H - 1 ? p + W : p] - hr[y > 0 ? p - W : p]) * 0.5;\n        let nx = -gx * 3, ny = -gy * 3, nz = 1;\n        const nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        nx *= nl;\n        ny *= nl;\n        nz *= nl;\n        // The bar seen in the gloss.\n        const yr = y - ny * 22 + (x - 32) * 0.15, bar = exp(-(((yr - ys) / 5) ** 2)) * 0.26 * film;\n        // The lamp: a sharp highlight where the surface faces half way\n        // between it and the eye.\n        const nd = max(0, nx * hx + ny * hy + nz * hz), spot = pow(nd, 200) * film;\n        const s = (bar + spot * 1.3 * sm(0.08, 0.35, t)) * 255;\n        R += s;\n        G += s;\n        B += s;\n      }\n      const q = p * 3;\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  // Every bead holds a point of light on the side towards the lamp, and the\n  // light it gathers lands as a glow of the tint low on the far side.\n  const pl = sqrt(hx * hx + hy * hy) || 1, ux = hx / pl, uy = hy / pl;\n  for (let i = 0; i \u003c S.nb; i++) {\n    const r = S.br[i], cx = S.bx[i], cy = S.by[i];\n    glow(buf, cx + ux * r * 0.42, cy + uy * r * 0.42, 0.55 + 0.04 * r, 235, 235, 235);\n    glow(buf, cx - ux * r * 0.35, cy - uy * r * 0.35 + r * 0.15, r * 0.38, 110 * tint[0], 110 * tint[1], 110 * tint[2]);\n  }\n  // Mica flecks: a pale glint of the tint, flashing white as they turn to\n  // the lamp, a bright flash spilling onto the four LEDs round it.\n  for (let i = 0; i \u003c S.nf; i++) {\n    const x = floor(S.fx[i]), y = floor(S.fy[i]);\n    const f = exp((cos(S.fp[i]) - 1) / 0.08), q = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[q + c] += 70 * (0.4 + 0.6 * tint[c]) + 200 * f;\n    if (f > 0.6)\n      for (let k = 0; k \u003c 4; k++) {\n        const X = x + (k === 0 ? 1 : k === 1 ? -1 : 0), Y = y + (k === 2 ? 1 : k === 3 ? -1 : 0);\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const o = (Y * W + X) * 3;\n        buf[o] += 90 * f;\n        buf[o + 1] += 90 * f;\n        buf[o + 2] += 90 * f;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    display.setPixel(p % W, (p / W) | 0, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n  }\n}\n\n// A soft round spot of light, sigma s LEDs, added at x, y.\nfunction glow(buf, x, y, s, r, g, b) {\n  const e = s * 2.5, k = 1 / (2 * s * s);\n  for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n    for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n      const w = exp(-((X + 0.5 - x) ** 2 + (Y + 0.5 - y) ** 2) * k), q = (Y * W + X) * 3;\n      buf[q] += r * w;\n      buf[q + 1] += g * w;\n      buf[q + 2] += b * w;\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-lip-gloss","type":"code","name":"lip-gloss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lip Gloss\n// Family:  cosmetic\n// Idea:    A band of thick clear gloss is poured along the top of a pale wall and slides down it, its front swelling into a rim that breaks into drips of different lengths, each tipped with a round bead that holds a point of light, while a soft light glides down the film and the drips run off the bottom before a fresh pour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after clear lip gloss sliding down a tester wall\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it.\n// Knob 2: Speed. How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Pour. How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front.\n// Knob 4: Shimmer. Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly.\n// Buttons: K1 tap pours a fresh band along the top now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sqrt, sin, cos, exp, abs, pow, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The opening tint: rose, not red.\nconst H0 = 0.935;\n// The film moves under gravity with a flux C*h^3 (a viscous film on a wall,\n// speed going as thickness squared), so a film one unit thick runs C rows a\n// second at its front at Speed 2. A pour lasts POUR seconds, one starts\n// every CYCLE seconds.\nconst C = 30, POUR = 3, CYCLE = 11;\n// Flecks of mica for the Shimmer knob, at most MAXF at once.\nconst MAXF = 700;\n// Beads hanging from the bottom edge, at most MAXD; one lets go once it holds\n// DROP units of gloss.\nconst MAXD = 24, DROP = 5;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    h: F(N), hr: F(N), q: F(H), m: F(W), front: new Int16Array(W), hf: F(W),\n    T: 0, since: 0, pourLeft: 0, flow: 0, out: F(W),\n    dx: F(MAXD), dv: F(MAXD), df: F(MAXD), dvy: F(MAXD), nd: 0,\n    bx: F(MAXD * 3), by: F(MAXD * 3), br: F(MAXD * 3), nb: 0,\n    fx: F(MAXF), fy: F(MAXF), fp: F(MAXF), fw: F(MAXF), nf: 0, cover: 0,\n    hue: 0, rate: 1, amount: 0, shim: 0.06, started: false,\n    tint: F(3), absb: F(3), wall: F(3), pear: F(3), gain: 1, dim: 0.27, buf: F(N * 3),\n  };\n}\n\n// A fresh pour: how much gloss comes down each column. A film running down\n// a wall breaks its front into fingers (Huppert 1982), the columns that get\n// ahead taking more of the flow. Here the fingers are laid into the pour: a\n// thin sheet across the whole width with bumps on it of different heights,\n// and since the front runs at a speed that goes as thickness squared, each\n// bump runs ahead as a drip of its own length.\nfunction newPour(S) {\n  const P = S.amount, m = S.m, nf = round(3 + 5 * P + rnd() * 0.8);\n  const base = 0.1 + 0.95 * P;\n  for (let x = 0; x \u003c W; x++) m[x] = base * (0.9 + 0.2 * rnd());\n  for (let k = 0; k \u003c nf; k++) {\n    const c = ((k + 0.5 + (rnd() - 0.5) * 0.7) / nf) * W, w = (1.6 + 1.3 * rnd()) * (1.3 - 0.4 * P);\n    const a = (0.6 + 1.0 * rnd()) * (1 - 0.55 * P);\n    for (let x = 0; x \u003c W; x++) m[x] += a * exp(-(((x + 0.5 - c) / w) ** 2));\n  }\n  S.pourLeft = POUR * (1 - 0.35 * P);\n  S.since = 0;\n  S.flow = C * (0.85 + 0.6 * P);\n}\n\nfunction flecks(S, st) {\n  // Mica hangs all through the gloss: new flecks turn up wherever the film is\n  // thick enough to hold them, as many as Shimmer asks for the film there is,\n  // and each rides down at the surface speed of the film under it, half as\n  // fast again as the film's mean.\n  const h = S.h, want = min(MAXF, S.shim * 1000 * S.cover);\n  for (let tries = 0; tries \u003c 60 && S.nf \u003c want; tries++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (h[floor(y) * W + floor(x)] \u003c 0.15) continue;\n    const i = S.nf++;\n    S.fx[i] = x;\n    S.fy[i] = y;\n    S.fp[i] = rnd() * 2 * PI;\n    S.fw[i] = (1.5 + 2.5 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  }\n  for (let i = S.nf - 1; i >= 0; i--) {\n    const hh = h[floor(S.fy[i]) * W + floor(S.fx[i])];\n    S.fy[i] += 1.5 * C * hh * hh * st;\n    S.fp[i] += S.fw[i] * st;\n    if (S.fy[i] >= H || hh \u003c 0.06 || S.nf > want + 20) {\n      const j = --S.nf;\n      S.fx[i] = S.fx[j];\n      S.fy[i] = S.fy[j];\n      S.fp[i] = S.fp[j];\n      S.fw[i] = S.fw[j];\n    }\n  }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.since += st;\n  if (S.since >= CYCLE) newPour(S);\n  const h = S.h, q = S.q, m = S.m;\n  // The pour feeds the top row; as it ends it tapers off over half a second.\n  if (S.pourLeft > 0) {\n    const f = S.flow * min(1, S.pourLeft * 2) * st;\n    for (let x = 0; x \u003c W; x++) h[x] += m[x] * f;\n    S.pourLeft -= st;\n  }\n  // Each column runs down with flux C*h^3, worked upwind in steps short\n  // enough for the fastest wave, which runs at 3*C*h^2.\n  let hm = 0;\n  for (let p = 0; p \u003c N; p++) if (h[p] > hm) hm = h[p];\n  const n = Math.ceil((st * 3 * C * hm * hm) / 0.8) || 1, dt = st / n;\n  for (let k = 0; k \u003c n; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      for (let y = 0, p = x; y \u003c H; y++, p += W) {\n        const v = h[p];\n        q[y] = C * v * v * v;\n      }\n      h[x] -= dt * q[0];\n      S.out[x] += dt * q[H - 1];\n      for (let y = 1, p = x + W; y \u003c H; y++, p += W) h[p] += dt * (q[y - 1] - q[y]);\n    }\n  }\n  // Surface tension pulls a little gloss sideways, so the drips stay round.\n  const D = min(0.2, 0.7 * st);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let prev = h[o];\n    for (let x = 0; x \u003c W; x++) {\n      const c = h[o + x], r = x \u003c W - 1 ? h[o + x + 1] : c;\n      h[o + x] = c + D * (prev + r - 2 * c);\n      prev = c;\n    }\n  }\n  // A film thinner than 0.45 slowly soaks away, the thinner the faster, so\n  // the wall clears from the top, where the draining film is thinnest, while\n  // the drips stay.\n  const fade = 0.075 * st;\n  let cover = 0;\n  for (let p = 0; p \u003c N; p++) {\n    const v = h[p];\n    if (v \u003c 0.45) h[p] = max(0, v - fade * (1 - v / 0.45));\n    if (v > 0.15) cover++;\n  }\n  S.cover = cover / N;\n  flecks(S, st);\n  drops(S, st);\n}\n\n// What runs off the bottom row gathers into a bead hanging from the edge\n// under its drip; a full bead lets go and falls away.\nfunction drops(S, st) {\n  const out = S.out;\n  for (let x = 0; x \u003c W; x++) {\n    const v = out[x];\n    if (v \u003c= 0) continue;\n    out[x] = 0;\n    let b = -1, bd = 4.5;\n    for (let i = 0; i \u003c S.nd; i++) {\n      const d = abs(S.dx[i] - x - 0.5);\n      if (S.df[i] \u003c 0 && d \u003c bd) (bd = d), (b = i);\n    }\n    if (b \u003c 0) {\n      if (S.nd >= MAXD) continue;\n      b = S.nd++;\n      S.dx[b] = x + 0.5;\n      S.dv[b] = 0;\n      S.df[b] = -1;\n    }\n    const nv = S.dv[b] + v;\n    S.dx[b] = (S.dx[b] * S.dv[b] + (x + 0.5) * v) / nv;\n    S.dv[b] = nv;\n  }\n  for (let i = S.nd - 1; i >= 0; i--) {\n    if (S.df[i] \u003c 0) {\n      // A bead nothing feeds any more slowly soaks away like the film.\n      S.dv[i] -= 0.12 * st;\n      if (S.dv[i] > DROP) (S.df[i] = 0), (S.dvy[i] = 20);\n      else if (S.dv[i] \u003c 0.05) S.df[i] = 99;\n      continue;\n    }\n    S.dvy[i] += 500 * st;\n    S.df[i] += S.dvy[i] * st;\n    if (S.df[i] > 14) {\n      const j = --S.nd;\n      S.dx[i] = S.dx[j];\n      S.dv[i] = S.dv[j];\n      S.df[i] = S.df[j];\n      S.dvy[i] = S.dvy[j];\n    }\n  }\n}\n\n// Adds a round bead of gloss, radius r and height A, centred at cx, cy.\nfunction dome(S, cx, cy, r, A) {\n  const { hr, h } = S;\n  if (S.nb \u003c MAXD * 3) {\n    S.bx[S.nb] = cx;\n    S.by[S.nb] = cy;\n    S.br[S.nb++] = r;\n  }\n  for (let y = max(0, floor(cy - r)); y \u003c= min(H - 1, floor(cy + r)); y++)\n    for (let X = max(0, floor(cx - r)); X \u003c= min(W - 1, floor(cx + r)); X++) {\n      const dx = (X + 0.5 - cx) / r, dy = (y + 0.5 - cy) / r, d2 = dx * dx + dy * dy;\n      if (d2 \u003c 1) {\n        const p = y * W + X;\n        hr[p] = max(hr[p], h[p] + A * sqrt(1 - d2));\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.amount = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    newPour(S);\n    // Open a second and a half into the first pour.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) newPour(S);\n  step(S, d * S.rate);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { h, hr, front, hf, buf, tint, absb, wall } = S;\n  const hue = H0 + S.hue;\n  // How the gloss tints the light that goes through it: each channel is cut\n  // by exp(-a*h), a taken from the tint so thick gloss is the deep colour.\n  hsv(hue, 0.8, 1, tint, 0);\n  for (let c = 0; c \u003c 3; c++) absb[c] = -Math.log(max(0.2, tint[c])) * 0.95;\n  // Orange and yellow tints darkened read brown and olive on LEDs; the wall\n  // is bright enough that they stay clear, and they get a touch more light.\n  const hw = (hue - floor(hue) + 1) % 1, am = max(0, 1 - abs(hw - 0.11) / 0.1);\n  S.gain = 1 + 0.08 * am;\n  S.dim = 0.27 * (1 - 0.85 * max(0, 1 - abs(hw - 0.13) / 0.16));\n  // The wall: a pale warm white with a breath of the tint.\n  hsv(hue + 0.04, 0.07, 1, wall, 0);\n  // Each column's front and the rim behind it: walking up from the bottom,\n  // every step where the film thickens adds to a ridge that fades over three\n  // rows, the capillary ridge a running film piles up at its front.\n  const kr = exp(-1 / 2.6);\n  for (let x = 0; x \u003c W; x++) {\n    let r = 0, f = -1, fh = 0;\n    for (let y = H - 1; y >= 0; y--) {\n      const p = y * W + x, below = y \u003c H - 1 ? h[p + W] : 0, jump = h[p] - below;\n      r *= kr;\n      if (jump > 0.02) r += jump * 0.9;\n      if (f \u003c 0 && h[p] > 0.1) (f = y), (fh = h[p]);\n      hr[p] = h[p] + r;\n    }\n    front[x] = f;\n    hf[x] = fh;\n  }\n  S.nb = 0;\n  // Beads: where a column's front runs further than its neighbours', the\n  // gloss gathers into a round bead at the tip of the drip.\n  for (let x = 0; x \u003c W; x++) {\n    const f = front[x];\n    if (f \u003c 6 || f > H - 5) continue;\n    let tip = true, lo = 1e9;\n    for (let d = -3; d \u003c= 3 && tip; d++) {\n      if (!d) continue;\n      const xx = x + d;\n      if (xx \u003c 0 || xx >= W) continue;\n      if (front[xx] > f || (front[xx] === f && d \u003c 0)) tip = false;\n      lo = min(lo, front[xx]);\n    }\n    if (!tip || f - lo \u003c 2) continue;\n    const r = 2 + 1.8 * min(1.2, hf[x]);\n    dome(S, x + 0.5, f + 0.6 - r * 0.55, r, 0.5 + 0.7 * min(1.2, hf[x]));\n  }\n  for (let i = 0; i \u003c S.nd; i++) {\n    const r = 1.3 + 1.2 * sqrt(S.dv[i]);\n    dome(S, S.dx[i], H - 0.3 - r + max(0, S.df[i]), r, 0.6 + 0.15 * r);\n  }\n  // The light: a soft bar above the wall that glides down it, seen in the\n  // gloss as a mirror image moved by the slope of the surface, and a small\n  // lamp to one side that puts a point of light on every bead.\n  const T = S.T, ys = ((T * 9) % (H + 60)) - 30, lxa = 0.25 * sin(T * 0.37), lya = -0.32 + 0.08 * sin(T * 0.23);\n  let hx = lxa, hy = lya, hz = 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hl;\n  hy /= hl;\n  hz /= hl;\n  const sh = S.shim, pear = S.pear;\n  hsv(hue - 0.04, 0.3, 245, pear, 0);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t0 = hr[p], t = t0 / (1 + 0.25 * t0);\n      const wb = (0.8 + 0.07 * exp(-(((x - 32) / 40) ** 2 + ((y - ys * 0.5 - 30) / 90) ** 2))) * 255;\n      const film = sm(0.02, 0.14, t);\n      let R = wall[0] * wb, G = wall[1] * wb, B = wall[2] * wb;\n      if (film > 0) {\n        // Thick gloss also dims the wall a little in every channel, the band\n        // and the beads most, so the deep parts read deeper; less so for the\n        // warm tints, which dimmed turn brown and olive.\n        const g = S.gain * exp(-S.dim * t * t);\n        R *= exp(-absb[0] * t) * g;\n        G *= exp(-absb[1] * t) * g;\n        B *= exp(-absb[2] * t) * g;\n        // Mica scatters light back out of the gloss, a pearly haze of the\n        // tint over the film that grows with Shimmer.\n        const pe = 0.42 * sh * film;\n        R += (pear[0] - R) * pe;\n        G += (pear[1] - G) * pe;\n        B += (pear[2] - B) * pe;\n        const gx = (hr[x \u003c W - 1 ? p + 1 : p] - hr[x > 0 ? p - 1 : p]) * 0.5;\n        const gy = (hr[y \u003c H - 1 ? p + W : p] - hr[y > 0 ? p - W : p]) * 0.5;\n        let nx = -gx * 3, ny = -gy * 3, nz = 1;\n        const nl = 1 / sqrt(nx * nx + ny * ny + 1);\n        nx *= nl;\n        ny *= nl;\n        nz *= nl;\n        // The bar seen in the gloss.\n        const yr = y - ny * 22 + (x - 32) * 0.15, bar = exp(-(((yr - ys) / 5) ** 2)) * 0.26 * film;\n        // The lamp: a sharp highlight where the surface faces half way\n        // between it and the eye.\n        const nd = max(0, nx * hx + ny * hy + nz * hz), spot = pow(nd, 200) * film;\n        const s = (bar + spot * 1.3 * sm(0.08, 0.35, t)) * 255;\n        R += s;\n        G += s;\n        B += s;\n      }\n      const q = p * 3;\n      buf[q] = R;\n      buf[q + 1] = G;\n      buf[q + 2] = B;\n    }\n  // Every bead holds a point of light on the side towards the lamp, and the\n  // light it gathers lands as a glow of the tint low on the far side.\n  const pl = sqrt(hx * hx + hy * hy) || 1, ux = hx / pl, uy = hy / pl;\n  for (let i = 0; i \u003c S.nb; i++) {\n    const r = S.br[i], cx = S.bx[i], cy = S.by[i];\n    glow(buf, cx + ux * r * 0.42, cy + uy * r * 0.42, 0.55 + 0.04 * r, 235, 235, 235);\n    glow(buf, cx - ux * r * 0.35, cy - uy * r * 0.35 + r * 0.15, r * 0.38, 110 * tint[0], 110 * tint[1], 110 * tint[2]);\n  }\n  // Mica flecks: a pale glint of the tint, flashing white as they turn to\n  // the lamp, a bright flash spilling onto the four LEDs round it.\n  for (let i = 0; i \u003c S.nf; i++) {\n    const x = floor(S.fx[i]), y = floor(S.fy[i]);\n    const f = exp((cos(S.fp[i]) - 1) / 0.08), q = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[q + c] += 70 * (0.4 + 0.6 * tint[c]) + 200 * f;\n    if (f > 0.6)\n      for (let k = 0; k \u003c 4; k++) {\n        const X = x + (k === 0 ? 1 : k === 1 ? -1 : 0), Y = y + (k === 2 ? 1 : k === 3 ? -1 : 0);\n        if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n        const o = (Y * W + X) * 3;\n        buf[o] += 90 * f;\n        buf[o + 1] += 90 * f;\n        buf[o + 2] += 90 * f;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    display.setPixel(p % W, (p / W) | 0, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n  }\n}\n\n// A soft round spot of light, sigma s LEDs, added at x, y.\nfunction glow(buf, x, y, s, r, g, b) {\n  const e = s * 2.5, k = 1 / (2 * s * s);\n  for (let Y = max(0, floor(y - e)); Y \u003c= min(H - 1, floor(y + e)); Y++)\n    for (let X = max(0, floor(x - e)); X \u003c= min(W - 1, floor(x + e)); X++) {\n      const w = exp(-((X + 0.5 - x) ** 2 + (Y + 0.5 - y) ** 2) * k), q = (Y * W + X) * 3;\n      buf[q] += r * w;\n      buf[q + 1] += g * w;\n      buf[q + 2] += b * w;\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Pour=0..1, Shimmer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the gloss, all the way round the colour wheel from rose at 0; the wall stays pale and takes only a breath of it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the gloss runs: at 2 the longest drip reaches the bottom about five seconds after the pour starts and a fresh pour comes every eleven seconds; at 0.2 it all runs ten times slower."},{"name":"Pour","min":0,"max":1,"about":"How much gloss each pour carries, from a thin band that breaks into three or four long drips at 0 to a heavy curtain at 1 that comes down the whole width with eight or nine short scallops on its front."},{"name":"Shimmer","min":0,"max":1,"about":"Fine flecks of mica in the gloss that ride down with it and flash as they turn, from a clear gloss with a few dozen at 0 to a shimmer gloss packed with them at 1, its film turned pearly."}],"start":[0,2,0,0.06],"measures":{"motion":0.0402,"detail":0.004,"edges":0.0558,"complexity":1.0787,"coverage":1,"colour":0.1859,"drift":0.0271},"knobResponse":[0.1707,0.0957,0.1771,0.0458]},{"slug":"littlewood-roots","title":"Littlewood Roots","family":"fractal","round":31,"note":"계수가 다 ±1 인 13차 다항식 8192개의 근 106,496개가 단위원 둘레에 옅은 레이스로 번지고, 1의 거듭제곱근 자리마다 구멍이 나요. 그레이 부호로 계수 하나씩 뒤집는 지금 다항식의 근이 불티로 옮겨 다니며 레이스를 다시 밝혀요. K1 을 누르면 단위원이 번쩍여요.","idea":"Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.","buttons":"K1 tap flashes the unit circle the lace hugs.","code":"// ===== Patternflow pattern =====\n// Title:   Littlewood Roots\n// Family:  fractal\n// Idea:    Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: roots of Littlewood polynomials (John Edensor Littlewood, 1966), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1\n//\n// Knob 1: Hue. Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white.\n// Knob 2: Speed. How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs.\n// Knob 3: Degree. The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16.\n// Knob 4: Glow. How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit.\n// Buttons: K1 tap flashes the unit circle the lace hugs.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 44 LEDs per unit: Re z from 0 to 1.45 across, Im z from 1.45 down to\n// -1.45, so the unit circle runs from row 20 to row 108. The set is the same\n// under z -> -z and z -> conj z, so the left half folds onto the right; all\n// roots lie in 1/2 \u003c |z| \u003c 2, and those beyond 1.45 are few.\nconst S = 44;\n// Widths in LEDs of the fine blur, the wide blur the lace is compared with,\n// the sparks and the light they leave.\nconst FINE = 0.6, WIDE = 2.5, SPARK = 1.8, DEP = 1.4;\nconst px = (re) => abs(re) * S - 0.5, py = (im) => H / 2 - 0.5 - im * S;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Normalised Gaussian kernels, three widths each side.\nfunction kernel(sg) {\n  const R = Math.ceil(sg * 3), k = new Float32Array(2 * R + 1);\n  let s = 0;\n  for (let i = -R; i \u003c= R; i++) s += k[i + R] = exp((-i * i) / (2 * sg * sg));\n  for (let i = 0; i \u003c= 2 * R; i++) k[i] /= s;\n  return k;\n}\nconst KF = kernel(FINE), KW = kernel(WIDE);\n\nexport function setup(params) {\n  params.s = {\n    n: 0, M: 0, i: 0, c: null, re: null, im: null, pr: null, pi: null, built: 0,\n    dens: new Float32Array(N), lace: new Float32Array(N), tmp: new Float32Array(N), wide: new Float32Array(N), glow: new Float32Array(N),\n    step: 0, hue: 0, sp: 2, tau: 1, ring: 0, glw: 0.06, col: new Float32Array(12), colHue: -1,\n  };\n}\n\n// The polynomial z^n + z^(n-1) + c(n-2) z^(n-2) + ... + c0 with every c = +-1.\n// Fixing the top two coefficients loses nothing: -p(-z) has the other sign\n// of z^(n-1), and its roots are -z, which fold onto the conjugates of the\n// roots of p. The walk starts at all +1, whose roots are the (n+1)th roots\n// of unity other than 1.\nfunction start(P, n) {\n  P.n = n;\n  P.M = 1 \u003c\u003c (n - 1);\n  P.i = 0;\n  P.built = 0;\n  P.c = new Float64Array(n + 1).fill(1);\n  P.re = new Float64Array(n);\n  P.im = new Float64Array(n);\n  P.pr = new Float64Array(n);\n  P.pi = new Float64Array(n);\n  for (let k = 0; k \u003c n; k++) {\n    const a = (2 * PI * (k + 1)) / (n + 1);\n    P.re[k] = P.pr[k] = cos(a);\n    P.im[k] = P.pi[k] = sin(a);\n  }\n  P.dens.fill(0);\n  P.lace.fill(0);\n}\n\n// Durand-Kerner (Weierstrass) iteration: every root at once moves by\n// p(z_r) / prod (z_r - z_s). Started from the roots of the polynomial one\n// sign flip back, it settles in about eight rounds. Returns false if it has\n// not settled.\nfunction solve(P, rounds) {\n  const n = P.n, c = P.c, re = P.re, im = P.im;\n  for (let it = 0; it \u003c rounds; it++) {\n    let mx = 0;\n    for (let r = 0; r \u003c n; r++) {\n      const x = re[r], y = im[r];\n      let pr = 1, pi = 0;\n      for (let k = n - 1; k >= 0; k--) {\n        const t = pr * x - pi * y + c[k];\n        pi = pr * y + pi * x;\n        pr = t;\n      }\n      let dr = 1, di = 0;\n      for (let s = 0; s \u003c n; s++) {\n        if (s === r) continue;\n        const ux = x - re[s], uy = y - im[s], t = dr * ux - di * uy;\n        di = dr * uy + di * ux;\n        dr = t;\n      }\n      let dd = dr * dr + di * di;\n      if (!(dd > 1e-30)) dd = 1e-30;\n      const qr = (pr * dr + pi * di) / dd, qi = (pi * dr - pr * di) / dd;\n      re[r] = x - qr;\n      im[r] = y - qi;\n      const m = qr * qr + qi * qi;\n      if (m > mx) mx = m;\n    }\n    if (mx \u003c 1e-13) return true;\n  }\n  return false;\n}\n\n// One step along the Gray code: flip the coefficient its index says, then\n// find the new roots. If the warm start fails (two roots nearly meeting),\n// start again from a circle.\nfunction advance(P) {\n  P.i = (P.i + 1) % P.M;\n  let b = P.n - 2;\n  if (P.i) for (b = 0; !((P.i >> b) & 1); b++);\n  P.c[b] = -P.c[b];\n  if (solve(P, 24)) return;\n  for (let k = 0; k \u003c P.n; k++) {\n    P.re[k] = 1.1 * cos((2 * PI * k) / P.n + 0.4);\n    P.im[k] = 1.1 * sin((2 * PI * k) / P.n + 0.4);\n  }\n  solve(P, 80);\n}\n\n// Bilinear splat of the folded roots into the density. The fold puts the\n// mirror line Re z = 0 half a LED left of column 0, so weight that falls\n// into column -1 belongs to column 0.\nfunction splat(P) {\n  const re = P.re, im = P.im, d = P.dens;\n  for (let r = 0; r \u003c P.n; r++) {\n    const X = px(re[r]), Y = py(im[r]);\n    const x0 = floor(X), y0 = floor(Y), fx = X - x0, fy = Y - y0;\n    if (!(x0 >= -1 && x0 \u003c W && y0 >= 0 && y0 \u003c H - 1)) continue;\n    const xa = x0 \u003c 0 ? 0 : x0, xb = x0 + 1;\n    d[y0 * W + xa] += (1 - fx) * (1 - fy);\n    d[(y0 + 1) * W + xa] += (1 - fx) * fy;\n    if (xb \u003c W) {\n      d[y0 * W + xb] += fx * (1 - fy);\n      d[(y0 + 1) * W + xb] += fx * fy;\n    }\n  }\n}\n\n// Separable blur of src into out with kernel k; the column left of 0 is the\n// mirror of column 0, as the fold makes it.\nfunction blur(src, out, tmp, k) {\n  const R = (k.length - 1) / 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        let xx = x + i;\n        if (xx \u003c 0) xx = -1 - xx;\n        else if (xx >= W) continue;\n        a += src[y * W + xx] * k[i + R];\n      }\n      tmp[y * W + x] = a;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        const yy = y + i;\n        if (yy >= 0 && yy \u003c H) a += tmp[yy * W + x] * k[i + R];\n      }\n      out[y * W + x] = a;\n    }\n}\n\n// The lace level, 0..1: the finely blurred density, normalised by the number\n// of roots expected in all so the lace fades in while it builds, and\n// sharpened against its own wide blur, so the holes round the roots of unity\n// go dark and the knots of the fringe stand out of the band.\nfunction tone(P) {\n  const L = P.lace, Wd = P.wide;\n  blur(P.dens, L, P.tmp, KF);\n  blur(P.dens, Wd, P.tmp, KW);\n  // About 3600 LEDs of band at this scale, so this makes its mean density 1.\n  const norm = 3600 / (P.M * P.n);\n  for (let p = 0; p \u003c N; p++) {\n    const a = L[p], q = a / (Wd[p] + 1e-9);\n    L[p] = min(1, min(1, (a * norm) / 2.5) ** 1.2 * min(1.6, q * q));\n  }\n}\n\nfunction blob(G, X, Y, sg, amp) {\n  const R = Math.ceil(sg * 2.6), k = 1 / (2 * sg * sg);\n  const xa = max(0, floor(X - R)), xb = min(W - 1, floor(X + R) + 1), ya = max(0, floor(Y - R)), yb = min(H - 1, floor(Y + R) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - X, dy = y - Y;\n      // The mirror image across Re z = 0 for blobs near the left edge.\n      const dm = x + 1 + X;\n      G[y * W + x] += amp * (exp(-(dx * dx + dy * dy) * k) + (X \u003c R ? exp(-(dm * dm + dy * dy) * k) : 0));\n    }\n}\n\nfunction colours(P) {\n  const h = P.hue + 0.42, c = P.col;\n  // The lace deep where it is thin and paler where it is dense, the light\n  // the sparks leave a little bluer, and the sparks nearly white.\n  hsv(h, 0.85, 1, c, 0);\n  hsv(h + 0.03, 0.4, 1, c, 9);\n  hsv(h + 0.07, 0.5, 1, c, 3);\n  hsv(h + 0.03, 0.18, 1, c, 6);\n  P.colHue = P.hue;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  // About a second at Glow 0, eight at 1.\n  P.glw = cl(k[3], 0, 1);\n  P.tau = 1.2 * 8 ** P.glw;\n  const n = round(cl(k[2], 13, 16));\n  if (n !== P.n) start(P, n);\n  if (P.built \u003c P.M) {\n    // Build the lace: about 1.3 million root updates a frame, so degree 13\n    // takes six frames and degree 16 about two seconds.\n    const per = max(64, floor(1.3e6 / (9 * n * n)));\n    for (let j = 0; j \u003c per && P.built \u003c P.M; j++, P.built++) {\n      advance(P);\n      splat(P);\n    }\n    tone(P);\n    if (P.built >= P.M) {\n      P.step = 0;\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n    }\n  } else {\n    // The walk: 4 x Speed flips a second. A spark glides from where it was\n    // to its new root over the first half of the step and lights the lace\n    // where it lands.\n    P.step += d * 4 * P.sp;\n    while (P.step >= 1) {\n      P.step -= 1;\n      for (let r = 0; r \u003c P.n; r++) blob(P.glow, px(P.re[r]), py(P.im[r]), DEP + 2.2 * P.glw, 0.55);\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n      advance(P);\n    }\n  }\n  const g = P.glow, f = exp(-d / P.tau);\n  for (let p = 0; p \u003c N; p++) g[p] *= f;\n  const b = input.btnPressed || [];\n  if (b[0]) P.ring = 1;\n  P.ring = max(0, P.ring - d * 0.6);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.colHue !== P.hue) colours(P);\n  const L = P.lace, G = P.glow, T = P.tmp, c = P.col;\n  // The sparks into the scratch buffer, eased between their old and new\n  // roots.\n  T.fill(0);\n  if (P.built >= P.M) {\n    let e = cl(P.step * 2, 0, 1);\n    e = e * e * (3 - 2 * e);\n    for (let r = 0; r \u003c P.n; r++) {\n      const x = P.pr[r] + (P.re[r] - P.pr[r]) * e, y = P.pi[r] + (P.im[r] - P.pi[r]) * e;\n      blob(T, px(x), py(y), SPARK + 1.4 * P.glw, 0.36);\n    }\n  }\n  const ring = P.ring * P.ring;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const l = L[p], lace = l > 0.09 ? (0.6 * (l - 0.09)) / 0.91 : 0, sp0 = T[p], m = 0.5 * l * l;\n      // The glow saturates softly and only lights the lace, so a place lit\n      // again and again shows the lace's own grain.\n      const gl = 0.4 * l * (1 - exp(-G[p] * 1.2));\n      let sp = sp0;\n      if (ring > 0) {\n        const re = (x + 0.5) / S, im = (H / 2 - 0.5 - y) / S, dr = (sqrt(re * re + im * im) - 1) * S;\n        sp += 0.45 * ring * exp(-dr * dr * 0.18);\n      }\n      const v1 = lace, v2 = gl, v3 = min(0.5, sp);\n      const lr = c[0] + (c[9] - c[0]) * m, lg = c[1] + (c[10] - c[1]) * m, lb = c[2] + (c[11] - c[2]) * m;\n      const r = lr * v1 + c[3] * v2 + c[6] * v3, g = lg * v1 + c[4] * v2 + c[7] * v3, b = lb * v1 + c[5] * v2 + c[8] * v3;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, b * 255));\n    }\n}\n","layer":{"id":"layer-littlewood-roots","type":"code","name":"littlewood-roots","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Littlewood Roots\n// Family:  fractal\n// Idea:    Every root of every polynomial of one degree whose coefficients are all +1 or -1 glows as a soft lace round the unit circle, with holes at the roots of unity, knotted fringes at its edges and a line of real roots, while the polynomials are walked one sign flip at a time and the roots of the current one hop over the lace as sparks that relight it where they land.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: roots of Littlewood polynomials (John Edensor Littlewood, 1966), pattern round 31\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1\n//\n// Knob 1: Hue. Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white.\n// Knob 2: Speed. How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs.\n// Knob 3: Degree. The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16.\n// Knob 4: Glow. How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit.\n// Buttons: K1 tap flashes the unit circle the lace hugs.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, abs, sqrt, cos, sin, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// 44 LEDs per unit: Re z from 0 to 1.45 across, Im z from 1.45 down to\n// -1.45, so the unit circle runs from row 20 to row 108. The set is the same\n// under z -> -z and z -> conj z, so the left half folds onto the right; all\n// roots lie in 1/2 \u003c |z| \u003c 2, and those beyond 1.45 are few.\nconst S = 44;\n// Widths in LEDs of the fine blur, the wide blur the lace is compared with,\n// the sparks and the light they leave.\nconst FINE = 0.6, WIDE = 2.5, SPARK = 1.8, DEP = 1.4;\nconst px = (re) => abs(re) * S - 0.5, py = (im) => H / 2 - 0.5 - im * S;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Normalised Gaussian kernels, three widths each side.\nfunction kernel(sg) {\n  const R = Math.ceil(sg * 3), k = new Float32Array(2 * R + 1);\n  let s = 0;\n  for (let i = -R; i \u003c= R; i++) s += k[i + R] = exp((-i * i) / (2 * sg * sg));\n  for (let i = 0; i \u003c= 2 * R; i++) k[i] /= s;\n  return k;\n}\nconst KF = kernel(FINE), KW = kernel(WIDE);\n\nexport function setup(params) {\n  params.s = {\n    n: 0, M: 0, i: 0, c: null, re: null, im: null, pr: null, pi: null, built: 0,\n    dens: new Float32Array(N), lace: new Float32Array(N), tmp: new Float32Array(N), wide: new Float32Array(N), glow: new Float32Array(N),\n    step: 0, hue: 0, sp: 2, tau: 1, ring: 0, glw: 0.06, col: new Float32Array(12), colHue: -1,\n  };\n}\n\n// The polynomial z^n + z^(n-1) + c(n-2) z^(n-2) + ... + c0 with every c = +-1.\n// Fixing the top two coefficients loses nothing: -p(-z) has the other sign\n// of z^(n-1), and its roots are -z, which fold onto the conjugates of the\n// roots of p. The walk starts at all +1, whose roots are the (n+1)th roots\n// of unity other than 1.\nfunction start(P, n) {\n  P.n = n;\n  P.M = 1 \u003c\u003c (n - 1);\n  P.i = 0;\n  P.built = 0;\n  P.c = new Float64Array(n + 1).fill(1);\n  P.re = new Float64Array(n);\n  P.im = new Float64Array(n);\n  P.pr = new Float64Array(n);\n  P.pi = new Float64Array(n);\n  for (let k = 0; k \u003c n; k++) {\n    const a = (2 * PI * (k + 1)) / (n + 1);\n    P.re[k] = P.pr[k] = cos(a);\n    P.im[k] = P.pi[k] = sin(a);\n  }\n  P.dens.fill(0);\n  P.lace.fill(0);\n}\n\n// Durand-Kerner (Weierstrass) iteration: every root at once moves by\n// p(z_r) / prod (z_r - z_s). Started from the roots of the polynomial one\n// sign flip back, it settles in about eight rounds. Returns false if it has\n// not settled.\nfunction solve(P, rounds) {\n  const n = P.n, c = P.c, re = P.re, im = P.im;\n  for (let it = 0; it \u003c rounds; it++) {\n    let mx = 0;\n    for (let r = 0; r \u003c n; r++) {\n      const x = re[r], y = im[r];\n      let pr = 1, pi = 0;\n      for (let k = n - 1; k >= 0; k--) {\n        const t = pr * x - pi * y + c[k];\n        pi = pr * y + pi * x;\n        pr = t;\n      }\n      let dr = 1, di = 0;\n      for (let s = 0; s \u003c n; s++) {\n        if (s === r) continue;\n        const ux = x - re[s], uy = y - im[s], t = dr * ux - di * uy;\n        di = dr * uy + di * ux;\n        dr = t;\n      }\n      let dd = dr * dr + di * di;\n      if (!(dd > 1e-30)) dd = 1e-30;\n      const qr = (pr * dr + pi * di) / dd, qi = (pi * dr - pr * di) / dd;\n      re[r] = x - qr;\n      im[r] = y - qi;\n      const m = qr * qr + qi * qi;\n      if (m > mx) mx = m;\n    }\n    if (mx \u003c 1e-13) return true;\n  }\n  return false;\n}\n\n// One step along the Gray code: flip the coefficient its index says, then\n// find the new roots. If the warm start fails (two roots nearly meeting),\n// start again from a circle.\nfunction advance(P) {\n  P.i = (P.i + 1) % P.M;\n  let b = P.n - 2;\n  if (P.i) for (b = 0; !((P.i >> b) & 1); b++);\n  P.c[b] = -P.c[b];\n  if (solve(P, 24)) return;\n  for (let k = 0; k \u003c P.n; k++) {\n    P.re[k] = 1.1 * cos((2 * PI * k) / P.n + 0.4);\n    P.im[k] = 1.1 * sin((2 * PI * k) / P.n + 0.4);\n  }\n  solve(P, 80);\n}\n\n// Bilinear splat of the folded roots into the density. The fold puts the\n// mirror line Re z = 0 half a LED left of column 0, so weight that falls\n// into column -1 belongs to column 0.\nfunction splat(P) {\n  const re = P.re, im = P.im, d = P.dens;\n  for (let r = 0; r \u003c P.n; r++) {\n    const X = px(re[r]), Y = py(im[r]);\n    const x0 = floor(X), y0 = floor(Y), fx = X - x0, fy = Y - y0;\n    if (!(x0 >= -1 && x0 \u003c W && y0 >= 0 && y0 \u003c H - 1)) continue;\n    const xa = x0 \u003c 0 ? 0 : x0, xb = x0 + 1;\n    d[y0 * W + xa] += (1 - fx) * (1 - fy);\n    d[(y0 + 1) * W + xa] += (1 - fx) * fy;\n    if (xb \u003c W) {\n      d[y0 * W + xb] += fx * (1 - fy);\n      d[(y0 + 1) * W + xb] += fx * fy;\n    }\n  }\n}\n\n// Separable blur of src into out with kernel k; the column left of 0 is the\n// mirror of column 0, as the fold makes it.\nfunction blur(src, out, tmp, k) {\n  const R = (k.length - 1) / 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        let xx = x + i;\n        if (xx \u003c 0) xx = -1 - xx;\n        else if (xx >= W) continue;\n        a += src[y * W + xx] * k[i + R];\n      }\n      tmp[y * W + x] = a;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let a = 0;\n      for (let i = -R; i \u003c= R; i++) {\n        const yy = y + i;\n        if (yy >= 0 && yy \u003c H) a += tmp[yy * W + x] * k[i + R];\n      }\n      out[y * W + x] = a;\n    }\n}\n\n// The lace level, 0..1: the finely blurred density, normalised by the number\n// of roots expected in all so the lace fades in while it builds, and\n// sharpened against its own wide blur, so the holes round the roots of unity\n// go dark and the knots of the fringe stand out of the band.\nfunction tone(P) {\n  const L = P.lace, Wd = P.wide;\n  blur(P.dens, L, P.tmp, KF);\n  blur(P.dens, Wd, P.tmp, KW);\n  // About 3600 LEDs of band at this scale, so this makes its mean density 1.\n  const norm = 3600 / (P.M * P.n);\n  for (let p = 0; p \u003c N; p++) {\n    const a = L[p], q = a / (Wd[p] + 1e-9);\n    L[p] = min(1, min(1, (a * norm) / 2.5) ** 1.2 * min(1.6, q * q));\n  }\n}\n\nfunction blob(G, X, Y, sg, amp) {\n  const R = Math.ceil(sg * 2.6), k = 1 / (2 * sg * sg);\n  const xa = max(0, floor(X - R)), xb = min(W - 1, floor(X + R) + 1), ya = max(0, floor(Y - R)), yb = min(H - 1, floor(Y + R) + 1);\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - X, dy = y - Y;\n      // The mirror image across Re z = 0 for blobs near the left edge.\n      const dm = x + 1 + X;\n      G[y * W + x] += amp * (exp(-(dx * dx + dy * dy) * k) + (X \u003c R ? exp(-(dm * dm + dy * dy) * k) : 0));\n    }\n}\n\nfunction colours(P) {\n  const h = P.hue + 0.42, c = P.col;\n  // The lace deep where it is thin and paler where it is dense, the light\n  // the sparks leave a little bluer, and the sparks nearly white.\n  hsv(h, 0.85, 1, c, 0);\n  hsv(h + 0.03, 0.4, 1, c, 9);\n  hsv(h + 0.07, 0.5, 1, c, 3);\n  hsv(h + 0.03, 0.18, 1, c, 6);\n  P.colHue = P.hue;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  // About a second at Glow 0, eight at 1.\n  P.glw = cl(k[3], 0, 1);\n  P.tau = 1.2 * 8 ** P.glw;\n  const n = round(cl(k[2], 13, 16));\n  if (n !== P.n) start(P, n);\n  if (P.built \u003c P.M) {\n    // Build the lace: about 1.3 million root updates a frame, so degree 13\n    // takes six frames and degree 16 about two seconds.\n    const per = max(64, floor(1.3e6 / (9 * n * n)));\n    for (let j = 0; j \u003c per && P.built \u003c P.M; j++, P.built++) {\n      advance(P);\n      splat(P);\n    }\n    tone(P);\n    if (P.built >= P.M) {\n      P.step = 0;\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n    }\n  } else {\n    // The walk: 4 x Speed flips a second. A spark glides from where it was\n    // to its new root over the first half of the step and lights the lace\n    // where it lands.\n    P.step += d * 4 * P.sp;\n    while (P.step >= 1) {\n      P.step -= 1;\n      for (let r = 0; r \u003c P.n; r++) blob(P.glow, px(P.re[r]), py(P.im[r]), DEP + 2.2 * P.glw, 0.55);\n      P.pr.set(P.re);\n      P.pi.set(P.im);\n      advance(P);\n    }\n  }\n  const g = P.glow, f = exp(-d / P.tau);\n  for (let p = 0; p \u003c N; p++) g[p] *= f;\n  const b = input.btnPressed || [];\n  if (b[0]) P.ring = 1;\n  P.ring = max(0, P.ring - d * 0.6);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.colHue !== P.hue) colours(P);\n  const L = P.lace, G = P.glow, T = P.tmp, c = P.col;\n  // The sparks into the scratch buffer, eased between their old and new\n  // roots.\n  T.fill(0);\n  if (P.built >= P.M) {\n    let e = cl(P.step * 2, 0, 1);\n    e = e * e * (3 - 2 * e);\n    for (let r = 0; r \u003c P.n; r++) {\n      const x = P.pr[r] + (P.re[r] - P.pr[r]) * e, y = P.pi[r] + (P.im[r] - P.pi[r]) * e;\n      blob(T, px(x), py(y), SPARK + 1.4 * P.glw, 0.36);\n    }\n  }\n  const ring = P.ring * P.ring;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const l = L[p], lace = l > 0.09 ? (0.6 * (l - 0.09)) / 0.91 : 0, sp0 = T[p], m = 0.5 * l * l;\n      // The glow saturates softly and only lights the lace, so a place lit\n      // again and again shows the lace's own grain.\n      const gl = 0.4 * l * (1 - exp(-G[p] * 1.2));\n      let sp = sp0;\n      if (ring > 0) {\n        const re = (x + 0.5) / S, im = (H / 2 - 0.5 - y) / S, dr = (sqrt(re * re + im * im) - 1) * S;\n        sp += 0.45 * ring * exp(-dr * dr * 0.18);\n      }\n      const v1 = lace, v2 = gl, v3 = min(0.5, sp);\n      const lr = c[0] + (c[9] - c[0]) * m, lg = c[1] + (c[10] - c[1]) * m, lb = c[2] + (c[11] - c[2]) * m;\n      const r = lr * v1 + c[3] * v2 + c[6] * v3, g = lg * v1 + c[4] * v2 + c[7] * v3, b = lb * v1 + c[5] * v2 + c[8] * v3;\n      display.setPixel(x, y, min(255, r * 255), min(255, g * 255), min(255, b * 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Degree=13..16, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lace and the sparks round the colour wheel together; at 0 the lace is sea green, paler where it is dense, and the sparks nearly white."},{"name":"Speed","min":0.2,"max":3,"about":"How many sign flips a second: eight at 2, twelve at 3 and under one at 0.2, where the light piles up under sparks that hardly move; each flip moves a spark a few LEDs."},{"name":"Degree","min":13,"max":16,"about":"The degree n of the polynomials, 13 to 16: at 13 the lace holds the 106,496 roots of all 8192 polynomials with leading coefficient 1, at 16 nearly ten times as many, and the band grows narrower and smoother. Each change computes the lace afresh, and it draws itself in, in a fifth of a second at 13 and about two seconds at 16."},{"name":"Glow","min":0,"max":1,"about":"How long a place stays lit after a spark lands on it, from just over a second near 0 to ten seconds at 1; the sparks and the patches they light grow wider with it, until at 1 most of the band is lit."}],"start":[0,2,13,0.06],"measures":{"motion":0.2172,"detail":0.0303,"edges":0.1403,"complexity":0.6238,"coverage":0.2539,"colour":0.1322,"drift":0.0228},"knobResponse":[0.0566,0.0256,0.0365,0.0521]},{"slug":"loewner-trace","title":"Loewner Trace","family":"line","round":28,"note":"브라운 운동이 모는 슈람-뢰브너 곡선이 패널만 한 골짜기를 기어오르고, 그 곡선을 푸는 등각 사상의 격자가 곡선 끝을 돌아 휘어요. 화면은 곡선을 따라 끝없이 위로 흘러가요. K3 이 κ 를 4 에서 8 까지 올리면 곡선이 제 몸과 벽에 닿아 가둔 땅을 삼키고, 8 에서는 다 메워요. 누르면 새 브라운 경로로 다시 자라요.","idea":"A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.","buttons":"K1 tap starts a fresh Brownian path from the floor of the channel.","code":"// ===== Patternflow pattern =====\n// Title:   Loewner Trace\n// Family:  line\n// Idea:    A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schramm-Loewner evolution (Oded Schramm, 2000) grown with Loewner's equation (Charles Loewner, 1923), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages.\n// Knob 2: Speed. Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower.\n// Knob 3: Kappa. The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip.\n// Knob 4: Trace. Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black.\n// Buttons: K1 tap starts a fresh Brownian path from the floor of the channel.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, log, atan2, exp, abs, sin, cos, PI, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The panel is a half-strip of the plane 65 LEDs wide, its walls and floor\n// one LED beyond the outer LEDs so that none sits on the boundary. sin()\n// carries the half-strip onto the upper half-plane, where the Loewner\n// equation lives: the floor goes to [-1, 1], the walls to the rest of the\n// real line, and the top of the channel, however far it scrolls, to\n// infinity. Each row up the channel is a factor e^(pi/65) further out.\n// Scale invariance of SLE makes that a channel the curve climbs for ever.\nconst PX = PI / 65;\nconst M = 12; // Laurent terms of g_t at infinity, for rows that scroll in\nconst CAP = 1 \u003c\u003c 16; // steps of driving function kept for the tip\nconst BACK = 6000; // steps walked back when finding the tip\nconst V = 0.025; // LEDs the curve climbs a step, on average\nconst RATE = 600; // steps a second at Speed 1\nconst NEAR = 0.6; // an LED this close to the curve is the curve\nconst KNEAR = 0.1; // the next slit against the w-distance of the LED nearest the tip\nconst TIPROW = 52; // the view scrolls to keep the tip at least this far down\n\nfunction zOf(s, x, py) {\n  const xi = (x - 31.5) * PX, eta = (127 - py + 1 + s.scroll) * PX;\n  const a = exp(eta - s.lnL) * 0.5, b = exp(-eta - s.lnL) * 0.5, il = exp(-s.lnL);\n  const ch = a + b, sh = a - b, c = cos(xi);\n  return [sin(xi) * ch, c * sh, PX * sqrt(c * c * il * il + sh * sh)];\n}\n\nfunction fresh(s) {\n  s.scroll = 0;\n  s.lnL = 0;\n  s.t = 0;\n  s.Wd = 0;\n  s.n = 0;\n  s.tau = 0;\n  s.near = Infinity;\n  s.b.fill(0);\n  s.mk.fill(0);\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const [zx, zy, S] = zOf(s, x, py);\n      s.wx[p] = zx;\n      s.wy[p] = zy;\n      s.d2[p] = S * S;\n    }\n  s.tipx = 31.5;\n  s.tipy = 128;\n}\n\nfunction gauss(s) {\n  if (s.spare !== null) {\n    const g = s.spare;\n    s.spare = null;\n    return g;\n  }\n  let u = Math.random();\n  if (u \u003c 1e-12) u = 1e-12;\n  const r = sqrt(-2 * log(u)), a = 2 * PI * Math.random();\n  s.spare = r * sin(a);\n  return r * cos(a);\n}\n\n// One Loewner step: the driving point jumps, then a vertical slit of\n// half-plane capacity 2 dt grows at it. Every LED's g_t(z) goes through the\n// slit map w -> W + sqrt((w - W)^2 + 4 dt), and so do the Laurent\n// coefficients of g_t at infinity.\nfunction step(s, kappa) {\n  const il2 = exp(-2 * s.lnL), t = s.t;\n  const base = V * PX * sqrt((t + 0.25 * PX * PX * il2) * (il2 + 4 * t));\n  // Where the tip sits in a sheltered passage a small slit at W unrolls\n  // into a long arc on the panel; the LEDs closest to the tip in the\n  // w-plane say how small the next slit must be to stay within one of them.\n  const dt = max(base * 0.02, min(base, s.near * KNEAR));\n  s.Wd += sqrt(kappa * dt) * gauss(s);\n  const Wk = s.Wd, c4 = 4 * dt, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, tau = s.tau;\n  const near2 = NEAR * NEAR;\n  let mmin = Infinity;\n  for (let p = 0; p \u003c N; p++) {\n    if (mk[p]) continue;\n    const ux = wx[p] - Wk, uy = wy[p];\n    const a = ux * ux - uy * uy + c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = b / (2 * re);\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    wx[p] = Wk + re;\n    wy[p] = im;\n    if (m \u003c mmin) mmin = m;\n    const g = (d2[p] *= (ux * ux + uy * uy) / m);\n    if (im * im \u003c near2 * g) (mk[p] = 1), (mt[p] = tau);\n  }\n  s.near = mmin;\n  // Laurent coefficients: g = z (1 + sum V_k z^-k), V_1 = -W, V_k = b_{k-1}.\n  const Vc = s.Vc, P = s.P, Q = s.Q, bb = s.b;\n  Vc[0] = 1;\n  Vc[1] = -Wk;\n  for (let k = 2; k \u003c= M + 1; k++) Vc[k] = bb[k - 1];\n  for (let k = 0; k \u003c= M + 1; k++) {\n    let acc = 0;\n    for (let j = 0; j \u003c= k; j++) acc += Vc[j] * Vc[k - j];\n    P[k] = acc + (k === 2 ? c4 : 0);\n  }\n  Q[0] = 1;\n  for (let k = 1; k \u003c= M + 1; k++) {\n    let acc = P[k];\n    for (let j = 1; j \u003c k; j++) acc -= Q[j] * Q[k - j];\n    Q[k] = acc * 0.5;\n  }\n  for (let n = 1; n \u003c= M; n++) bb[n] = Q[n + 1];\n  if (s.n === CAP) {\n    s.hw.copyWithin(0, CAP / 2);\n    s.ht.copyWithin(0, CAP / 2);\n    s.n = CAP / 2;\n  }\n  s.hw[s.n] = Wk;\n  s.ht[s.n] = dt;\n  s.n++;\n  s.t = t + dt;\n}\n\n// For kappa above 4 the curve hits itself and the walls, and whatever it\n// closes off from the top of the channel leaves the domain: an LED no path\n// of open LEDs joins to the top row is swallowed. At 4 and below SLE is a\n// simple curve that touches nothing, so nothing is filled there, even where\n// two strands pass within an LED of each other.\nfunction fill(s) {\n  const mk = s.mk, seen = s.seen, st = s.stack;\n  seen.fill(0);\n  let top = 0;\n  for (let x = 0; x \u003c W; x++) if (!mk[x]) (seen[x] = 1), (st[top++] = x);\n  while (top) {\n    const p = st[--top], x = p % W;\n    if (x > 0 && !mk[p - 1] && !seen[p - 1]) (seen[p - 1] = 1), (st[top++] = p - 1);\n    if (x \u003c W - 1 && !mk[p + 1] && !seen[p + 1]) (seen[p + 1] = 1), (st[top++] = p + 1);\n    if (p >= W && !mk[p - W] && !seen[p - W]) (seen[p - W] = 1), (st[top++] = p - W);\n    if (p \u003c N - W && !mk[p + W] && !seen[p + W]) (seen[p + W] = 1), (st[top++] = p + W);\n  }\n  for (let p = 0; p \u003c N; p++) if (!mk[p] && !seen[p]) (mk[p] = 2), (s.mt[p] = s.tau);\n}\n\n// The tip, g_t^{-1}(W_t): the slit maps undone newest first.\nfunction tip(s) {\n  const n = s.n;\n  if (!n) return [0, 0];\n  let zx = s.hw[n - 1], zy = 2 * sqrt(s.ht[n - 1]), T = s.t - s.ht[n - 1];\n  const stop = max(0, n - BACK);\n  for (let k = n - 2; k >= stop; k--) {\n    const Wk = s.hw[k], c4 = 4 * s.ht[k];\n    T -= s.ht[k];\n    const ux = zx - Wk, uy = zy;\n    const a = ux * ux - uy * uy - c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = re > 0 ? b / (2 * re) : 0;\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    zx = Wk + re;\n    zy = im;\n  }\n  // Whatever lies further back is small beside the tip: g^{-1}(w) ~ w - 2T/w.\n  if (stop > 0 && T > 0) {\n    const r2 = zx * zx + zy * zy;\n    zx -= (2 * T * zx) / r2;\n    zy += (2 * T * zy) / r2;\n  }\n  return [zx, zy];\n}\n\n// Where a point of the half-plane sits on the panel: arcsin back to the strip.\nfunction toPanel(s, zx, zy) {\n  const il2 = exp(-2 * s.lnL);\n  // q = -i z + sqrt(1/L^2 - z^2), the root of larger modulus.\n  const ax = il2 - (zx * zx - zy * zy), ay = -2 * zx * zy, m = sqrt(ax * ax + ay * ay);\n  let rx, ry;\n  if (ax >= 0) (rx = sqrt((m + ax) * 0.5)), (ry = rx > 0 ? ay / (2 * rx) : 0);\n  else (ry = sqrt((m - ax) * 0.5)), (rx = abs(ay) / (2 * ry)), (ry = ay \u003c 0 ? -ry : ry);\n  let qx = zy + rx, qy = -zx + ry;\n  const q2x = zy - rx, q2y = -zx - ry;\n  if (q2x * q2x + q2y * q2y > qx * qx + qy * qy) (qx = q2x), (qy = q2y);\n  const xi = -atan2(qy, qx), eta = s.lnL + 0.5 * log(qx * qx + qy * qy);\n  return [xi / PX + 31.5, 128 + s.scroll - eta / PX];\n}\n\n// A row scrolling in at the top, far above the hull, takes g_t from its\n// Laurent series at infinity.\nfunction newRow(s) {\n  const wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, bb = s.b;\n  wx.copyWithin(W, 0, N - W);\n  wy.copyWithin(W, 0, N - W);\n  d2.copyWithin(W, 0, N - W);\n  mk.copyWithin(W, 0, N - W);\n  s.mt.copyWithin(W, 0, N - W);\n  s.scroll++;\n  for (let x = 0; x \u003c W; x++) {\n    const [zx, zy, S] = zOf(s, x, 0);\n    const r2 = zx * zx + zy * zy, yx = zx / r2, yy = -zy / r2;\n    // sum b_n y^n and sum n b_n y^(n-1) by Horner.\n    let fx = bb[M], fy = 0, dx = M * bb[M], dy = 0;\n    for (let n = M - 1; n >= 1; n--) {\n      const tx = fx * yx - fy * yy + bb[n];\n      fy = fx * yy + fy * yx;\n      fx = tx;\n      const ex = dx * yx - dy * yy + n * bb[n];\n      dy = dx * yy + dy * yx;\n      dx = ex;\n    }\n    const gx = fx * yx - fy * yy, gy = fx * yy + fy * yx;\n    const y2x = yx * yx - yy * yy, y2y = 2 * yx * yy;\n    const hx = 1 - (dx * y2x - dy * y2y), hy = -(dx * y2y + dy * y2x);\n    wx[x] = zx + gx;\n    wy[x] = zy + gy;\n    d2[x] = (hx * hx + hy * hy) * S * S;\n    mk[x] = 0;\n  }\n  // Keep the numbers small: SLE does not see the scale.\n  if (s.scroll * PX - s.lnL > 9) renorm(s, 4);\n}\n\nfunction renorm(s, lnl) {\n  const l = exp(lnl), il = 1 / l;\n  s.lnL += lnl;\n  for (let p = 0; p \u003c N; p++) {\n    s.wx[p] *= il;\n    s.wy[p] *= il;\n    s.d2[p] *= il * il;\n  }\n  s.Wd *= il;\n  s.t *= il * il;\n  for (let k = 0; k \u003c s.n; k++) (s.hw[k] *= il), (s.ht[k] *= il * il);\n  s.near *= il * il;\n  let f = il;\n  for (let n = 1; n \u003c= M; n++) (f *= il), (s.b[n] *= f);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float64Array(n);\n  params.s = {\n    wx: F(N), wy: F(N), d2: F(N), mk: new Uint8Array(N), mt: F(N),\n    b: F(M + 1), Vc: F(M + 2), P: F(M + 2), Q: F(M + 2), hw: F(CAP), ht: F(CAP),\n    seen: new Uint8Array(N), stack: new Int32Array(N), spare: null, acc: 0, hue: 0, kappa: 4, trace: 0.06,\n    buf: new Float32Array(N * 3), tlut: new Float32Array(LUT * 3), blut: new Float32Array(LUT * 3),\n    side: new Float32Array(12), lutHue: NaN,\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  s.hue = k[0];\n  s.kappa = cl(k[2], 4, 8);\n  s.trace = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) fresh(s);\n  const sp = cl(k[1], 0.2, 3);\n  s.acc += d * sp * RATE;\n  let n = floor(s.acc);\n  s.acc -= n;\n  s.tau += d * sp;\n  while (n-- > 0) step(s, s.kappa);\n  if (s.kappa > 4) fill(s);\n  const [zx, zy] = tip(s);\n  const [px, py] = toPanel(s, zx, zy);\n  s.tipx = px;\n  s.tipy = py;\n  const rows = min(3, ceilPos(TIPROW - py));\n  for (let i = 0; i \u003c rows; i++) newRow(s);\n  s.tipy = py + rows;\n}\nconst ceilPos = (v) => (v > 0 ? Math.ceil(v) : 0);\n\n// Colour stops, turned round the colour wheel by Hue: the trace by its age,\n// new to old; swallowed ground by when it was swallowed; the field on the\n// right and on the left of the curve; the rays and the rings of the grid.\nconst TRACE = [[255, 238, 196], [255, 178, 84], [250, 92, 112], [206, 62, 196], [124, 76, 236]];\nconst BUBBLE = [[150, 40, 92], [112, 34, 128], [58, 40, 128], [96, 30, 70], [150, 40, 92]];\nconst RIGHT = [16, 32, 78], LEFT = [8, 50, 72], RAY = [52, 150, 172], RING = [96, 112, 206];\nconst LUT = 64;\nfunction ramp(stops, out, rot) {\n  const n = stops.length - 1;\n  for (let i = 0; i \u003c LUT; i++) {\n    const u = (i / (LUT - 1)) * n, j = min(n - 1, floor(u)), f = u - j;\n    const c = [0, 1, 2].map((k) => stops[j][k] + (stops[j + 1][k] - stops[j][k]) * f);\n    turn(c, rot, out, i * 3);\n  }\n}\n// A hue turn that keeps the grey axis: rotation about (1, 1, 1).\nfunction turn(c, a, out, o) {\n  const co = cos(a), si = sin(a), k = (1 - co) / 3, r = sqrt(1 / 3) * si;\n  const m0 = co + k, m1 = k - r, m2 = k + r;\n  out[o] = cl(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255);\n  out[o + 1] = cl(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255);\n  out[o + 2] = cl(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255);\n}\n\n// The grid is the conformal map log(g_t(z) - W_t), which unrolls what is\n// left of the channel into a straight strip with the tip at minus infinity:\n// its level lines are circles round the tip and the rays out of it. Where a\n// cell grows large a finer grid fades in, up to three halvings.\nconst DELTA = PI / 8, LEVELS = 4, LOG7 = log(DELTA / 7);\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s) return;\n  const buf = s.buf, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, Wk = s.Wd;\n  const fld = 1 - s.trace, tr = s.tlut, bu = s.blut, side = s.side;\n  if (s.lutHue !== s.hue) {\n    const rot = s.hue * 2 * PI;\n    ramp(TRACE, tr, rot);\n    ramp(BUBBLE, bu, rot);\n    turn(RIGHT, rot, side, 0);\n    turn(LEFT, rot, side, 3);\n    turn(RAY, rot, side, 6);\n    turn(RING, rot, side, 9);\n    s.lutHue = s.hue;\n  }\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (mk[p]) {\n        const age = max(0, s.tau - mt[p]);\n        if (mk[p] === 1) {\n          const i = min(LUT - 1, floor((age / 8) * (LUT - 1))) * 3;\n          buf[q] = tr[i];\n          buf[q + 1] = tr[i + 1];\n          buf[q + 2] = tr[i + 2];\n        } else {\n          // Swallowed ground keeps the colour of the moment it was cut off,\n          // and dims as it ages.\n          const u = mt[p] / 5, i = floor((u - floor(u)) * (LUT - 1)) * 3, v = 0.55 + 0.45 * exp(-age / 6);\n          const hat = ((x + (floor(u * 7) & 1 ? 1 : -1) * (py - s.scroll) + 4096) & 3) === 0 ? 1 : 0.5;\n          buf[q] = bu[i] * v * hat;\n          buf[q + 1] = bu[i + 1] * v * hat;\n          buf[q + 2] = bu[i + 2] * v * hat;\n        }\n        continue;\n      }\n      const ux = wx[p] - Wk, uy = wy[p], r2 = ux * ux + uy * uy, rr = sqrt(r2);\n      const lr = log(rr), th = atan2(uy, ux), lg = 0.5 * log(d2[p]);\n      const cell = DELTA * exp(lr - lg); // LEDs per grid cell here\n      const fa = lr / DELTA, fb = th / DELTA;\n      // Lines, coarse to fine.\n      let ring = 0, ray = 0, cj = cell, sa = fa, sb = fb, chk = 0;\n      const lc = cl((lr - lg + LOG7) * 1.4427, 0, LEVELS - 1.001), jc = floor(lc), fc = lc - jc;\n      for (let j = 0; j \u003c LEVELS && (j \u003c= jc + 1 || cj >= 6); j++) {\n        const ia = floor(sa), ib = floor(sb), nb = round(sb);\n        // The rays at angle 0 and pi are the boundary itself, not grid. The\n        // ray at pi/2 is the hyperbolic geodesic from the tip to the top of\n        // the channel, where the curve is bound, and burns brighter.\n        const da = min(sa - ia, ia + 1 - sa) * cj, db = nb > 0 && nb \u003c 8 \u003c\u003c j ? abs(sb - nb) * cj : 99;\n        const fade = j === 0 ? cl((cj - 2) / 3, 0, 1) : cl((cj - 6) / 6, 0, 1) * 0.6;\n        ring = max(ring, cl(1 - da / 0.8, 0, 1) * fade);\n        ray = max(ray, cl(1 - db / 0.8, 0, 1) * fade * (j === 0 && nb === 4 ? 1.6 : 1));\n        if (j === jc) chk += ((ia + ib) & 1) * (1 - fc);\n        if (j === jc + 1) chk += ((ia + ib) & 1) * fc;\n        cj *= 0.5;\n        sa *= 2;\n        sb *= 2;\n      }\n      // The two sides of the curve: th / pi is the chance that a Brownian\n      // walker from here leaves by the left-hand side.\n      const hs = th / PI, cf = (0.82 + 0.36 * chk * cl((cell - 2) / 3, 0, 1)) * (0.4 + 0.6 * sqrt(uy / rr));\n      let r = (side[0] + (side[3] - side[0]) * hs) * cf * fld;\n      let gg = (side[1] + (side[4] - side[1]) * hs) * cf * fld;\n      let bl = (side[2] + (side[5] - side[2]) * hs) * cf * fld;\n      let li = ring * fld;\n      r += (side[9] - r) * li;\n      gg += (side[10] - gg) * li;\n      bl += (side[11] - bl) * li;\n      li = min(1, ray) * fld;\n      const hot = max(0, ray - 1) * 1.6 * fld;\n      r += (side[6] - r) * li;\n      gg += (side[7] - gg) * li;\n      bl += (side[8] - bl) * li;\n      r += (210 - r) * hot;\n      gg += (240 - gg) * hot;\n      bl += (240 - bl) * hot;\n      buf[q] = r;\n      buf[q + 1] = gg;\n      buf[q + 2] = bl;\n    }\n  // The tip.\n  const tx = s.tipx, ty = s.tipy;\n  for (let y = max(0, floor(ty - 3)); y \u003c= min(H - 1, floor(ty + 3)); y++)\n    for (let x = max(0, floor(tx - 3)); x \u003c= min(W - 1, floor(tx + 3)); x++) {\n      const dd = (x - tx) ** 2 + (y - ty) ** 2, w = exp(-dd / 1.5);\n      const q = (y * W + x) * 3;\n      buf[q] += (255 - buf[q]) * w;\n      buf[q + 1] += (250 - buf[q + 1]) * w;\n      buf[q + 2] += (235 - buf[q + 2]) * w;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-loewner-trace","type":"code","name":"loewner-trace","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Loewner Trace\n// Family:  line\n// Idea:    A Schramm-Loewner curve driven by Brownian motion climbs a channel as wide as the panel, and the conformal grid of the map that unzips it bends round its tip.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schramm-Loewner evolution (Oded Schramm, 2000) grown with Loewner's equation (Charles Loewner, 1923), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages.\n// Knob 2: Speed. Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower.\n// Knob 3: Kappa. The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip.\n// Knob 4: Trace. Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black.\n// Buttons: K1 tap starts a fresh Brownian path from the floor of the channel.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, log, atan2, exp, abs, sin, cos, PI, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The panel is a half-strip of the plane 65 LEDs wide, its walls and floor\n// one LED beyond the outer LEDs so that none sits on the boundary. sin()\n// carries the half-strip onto the upper half-plane, where the Loewner\n// equation lives: the floor goes to [-1, 1], the walls to the rest of the\n// real line, and the top of the channel, however far it scrolls, to\n// infinity. Each row up the channel is a factor e^(pi/65) further out.\n// Scale invariance of SLE makes that a channel the curve climbs for ever.\nconst PX = PI / 65;\nconst M = 12; // Laurent terms of g_t at infinity, for rows that scroll in\nconst CAP = 1 \u003c\u003c 16; // steps of driving function kept for the tip\nconst BACK = 6000; // steps walked back when finding the tip\nconst V = 0.025; // LEDs the curve climbs a step, on average\nconst RATE = 600; // steps a second at Speed 1\nconst NEAR = 0.6; // an LED this close to the curve is the curve\nconst KNEAR = 0.1; // the next slit against the w-distance of the LED nearest the tip\nconst TIPROW = 52; // the view scrolls to keep the tip at least this far down\n\nfunction zOf(s, x, py) {\n  const xi = (x - 31.5) * PX, eta = (127 - py + 1 + s.scroll) * PX;\n  const a = exp(eta - s.lnL) * 0.5, b = exp(-eta - s.lnL) * 0.5, il = exp(-s.lnL);\n  const ch = a + b, sh = a - b, c = cos(xi);\n  return [sin(xi) * ch, c * sh, PX * sqrt(c * c * il * il + sh * sh)];\n}\n\nfunction fresh(s) {\n  s.scroll = 0;\n  s.lnL = 0;\n  s.t = 0;\n  s.Wd = 0;\n  s.n = 0;\n  s.tau = 0;\n  s.near = Infinity;\n  s.b.fill(0);\n  s.mk.fill(0);\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const [zx, zy, S] = zOf(s, x, py);\n      s.wx[p] = zx;\n      s.wy[p] = zy;\n      s.d2[p] = S * S;\n    }\n  s.tipx = 31.5;\n  s.tipy = 128;\n}\n\nfunction gauss(s) {\n  if (s.spare !== null) {\n    const g = s.spare;\n    s.spare = null;\n    return g;\n  }\n  let u = Math.random();\n  if (u \u003c 1e-12) u = 1e-12;\n  const r = sqrt(-2 * log(u)), a = 2 * PI * Math.random();\n  s.spare = r * sin(a);\n  return r * cos(a);\n}\n\n// One Loewner step: the driving point jumps, then a vertical slit of\n// half-plane capacity 2 dt grows at it. Every LED's g_t(z) goes through the\n// slit map w -> W + sqrt((w - W)^2 + 4 dt), and so do the Laurent\n// coefficients of g_t at infinity.\nfunction step(s, kappa) {\n  const il2 = exp(-2 * s.lnL), t = s.t;\n  const base = V * PX * sqrt((t + 0.25 * PX * PX * il2) * (il2 + 4 * t));\n  // Where the tip sits in a sheltered passage a small slit at W unrolls\n  // into a long arc on the panel; the LEDs closest to the tip in the\n  // w-plane say how small the next slit must be to stay within one of them.\n  const dt = max(base * 0.02, min(base, s.near * KNEAR));\n  s.Wd += sqrt(kappa * dt) * gauss(s);\n  const Wk = s.Wd, c4 = 4 * dt, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, tau = s.tau;\n  const near2 = NEAR * NEAR;\n  let mmin = Infinity;\n  for (let p = 0; p \u003c N; p++) {\n    if (mk[p]) continue;\n    const ux = wx[p] - Wk, uy = wy[p];\n    const a = ux * ux - uy * uy + c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = b / (2 * re);\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    wx[p] = Wk + re;\n    wy[p] = im;\n    if (m \u003c mmin) mmin = m;\n    const g = (d2[p] *= (ux * ux + uy * uy) / m);\n    if (im * im \u003c near2 * g) (mk[p] = 1), (mt[p] = tau);\n  }\n  s.near = mmin;\n  // Laurent coefficients: g = z (1 + sum V_k z^-k), V_1 = -W, V_k = b_{k-1}.\n  const Vc = s.Vc, P = s.P, Q = s.Q, bb = s.b;\n  Vc[0] = 1;\n  Vc[1] = -Wk;\n  for (let k = 2; k \u003c= M + 1; k++) Vc[k] = bb[k - 1];\n  for (let k = 0; k \u003c= M + 1; k++) {\n    let acc = 0;\n    for (let j = 0; j \u003c= k; j++) acc += Vc[j] * Vc[k - j];\n    P[k] = acc + (k === 2 ? c4 : 0);\n  }\n  Q[0] = 1;\n  for (let k = 1; k \u003c= M + 1; k++) {\n    let acc = P[k];\n    for (let j = 1; j \u003c k; j++) acc -= Q[j] * Q[k - j];\n    Q[k] = acc * 0.5;\n  }\n  for (let n = 1; n \u003c= M; n++) bb[n] = Q[n + 1];\n  if (s.n === CAP) {\n    s.hw.copyWithin(0, CAP / 2);\n    s.ht.copyWithin(0, CAP / 2);\n    s.n = CAP / 2;\n  }\n  s.hw[s.n] = Wk;\n  s.ht[s.n] = dt;\n  s.n++;\n  s.t = t + dt;\n}\n\n// For kappa above 4 the curve hits itself and the walls, and whatever it\n// closes off from the top of the channel leaves the domain: an LED no path\n// of open LEDs joins to the top row is swallowed. At 4 and below SLE is a\n// simple curve that touches nothing, so nothing is filled there, even where\n// two strands pass within an LED of each other.\nfunction fill(s) {\n  const mk = s.mk, seen = s.seen, st = s.stack;\n  seen.fill(0);\n  let top = 0;\n  for (let x = 0; x \u003c W; x++) if (!mk[x]) (seen[x] = 1), (st[top++] = x);\n  while (top) {\n    const p = st[--top], x = p % W;\n    if (x > 0 && !mk[p - 1] && !seen[p - 1]) (seen[p - 1] = 1), (st[top++] = p - 1);\n    if (x \u003c W - 1 && !mk[p + 1] && !seen[p + 1]) (seen[p + 1] = 1), (st[top++] = p + 1);\n    if (p >= W && !mk[p - W] && !seen[p - W]) (seen[p - W] = 1), (st[top++] = p - W);\n    if (p \u003c N - W && !mk[p + W] && !seen[p + W]) (seen[p + W] = 1), (st[top++] = p + W);\n  }\n  for (let p = 0; p \u003c N; p++) if (!mk[p] && !seen[p]) (mk[p] = 2), (s.mt[p] = s.tau);\n}\n\n// The tip, g_t^{-1}(W_t): the slit maps undone newest first.\nfunction tip(s) {\n  const n = s.n;\n  if (!n) return [0, 0];\n  let zx = s.hw[n - 1], zy = 2 * sqrt(s.ht[n - 1]), T = s.t - s.ht[n - 1];\n  const stop = max(0, n - BACK);\n  for (let k = n - 2; k >= stop; k--) {\n    const Wk = s.hw[k], c4 = 4 * s.ht[k];\n    T -= s.ht[k];\n    const ux = zx - Wk, uy = zy;\n    const a = ux * ux - uy * uy - c4, b = 2 * ux * uy, m = sqrt(a * a + b * b);\n    let re, im;\n    if (a >= 0) {\n      re = sqrt((m + a) * 0.5);\n      im = re > 0 ? b / (2 * re) : 0;\n    } else {\n      im = sqrt((m - a) * 0.5);\n      re = abs(b) / (2 * im);\n      if (b \u003c 0) im = -im;\n    }\n    if (ux \u003c 0) (re = -re), (im = -im);\n    zx = Wk + re;\n    zy = im;\n  }\n  // Whatever lies further back is small beside the tip: g^{-1}(w) ~ w - 2T/w.\n  if (stop > 0 && T > 0) {\n    const r2 = zx * zx + zy * zy;\n    zx -= (2 * T * zx) / r2;\n    zy += (2 * T * zy) / r2;\n  }\n  return [zx, zy];\n}\n\n// Where a point of the half-plane sits on the panel: arcsin back to the strip.\nfunction toPanel(s, zx, zy) {\n  const il2 = exp(-2 * s.lnL);\n  // q = -i z + sqrt(1/L^2 - z^2), the root of larger modulus.\n  const ax = il2 - (zx * zx - zy * zy), ay = -2 * zx * zy, m = sqrt(ax * ax + ay * ay);\n  let rx, ry;\n  if (ax >= 0) (rx = sqrt((m + ax) * 0.5)), (ry = rx > 0 ? ay / (2 * rx) : 0);\n  else (ry = sqrt((m - ax) * 0.5)), (rx = abs(ay) / (2 * ry)), (ry = ay \u003c 0 ? -ry : ry);\n  let qx = zy + rx, qy = -zx + ry;\n  const q2x = zy - rx, q2y = -zx - ry;\n  if (q2x * q2x + q2y * q2y > qx * qx + qy * qy) (qx = q2x), (qy = q2y);\n  const xi = -atan2(qy, qx), eta = s.lnL + 0.5 * log(qx * qx + qy * qy);\n  return [xi / PX + 31.5, 128 + s.scroll - eta / PX];\n}\n\n// A row scrolling in at the top, far above the hull, takes g_t from its\n// Laurent series at infinity.\nfunction newRow(s) {\n  const wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, bb = s.b;\n  wx.copyWithin(W, 0, N - W);\n  wy.copyWithin(W, 0, N - W);\n  d2.copyWithin(W, 0, N - W);\n  mk.copyWithin(W, 0, N - W);\n  s.mt.copyWithin(W, 0, N - W);\n  s.scroll++;\n  for (let x = 0; x \u003c W; x++) {\n    const [zx, zy, S] = zOf(s, x, 0);\n    const r2 = zx * zx + zy * zy, yx = zx / r2, yy = -zy / r2;\n    // sum b_n y^n and sum n b_n y^(n-1) by Horner.\n    let fx = bb[M], fy = 0, dx = M * bb[M], dy = 0;\n    for (let n = M - 1; n >= 1; n--) {\n      const tx = fx * yx - fy * yy + bb[n];\n      fy = fx * yy + fy * yx;\n      fx = tx;\n      const ex = dx * yx - dy * yy + n * bb[n];\n      dy = dx * yy + dy * yx;\n      dx = ex;\n    }\n    const gx = fx * yx - fy * yy, gy = fx * yy + fy * yx;\n    const y2x = yx * yx - yy * yy, y2y = 2 * yx * yy;\n    const hx = 1 - (dx * y2x - dy * y2y), hy = -(dx * y2y + dy * y2x);\n    wx[x] = zx + gx;\n    wy[x] = zy + gy;\n    d2[x] = (hx * hx + hy * hy) * S * S;\n    mk[x] = 0;\n  }\n  // Keep the numbers small: SLE does not see the scale.\n  if (s.scroll * PX - s.lnL > 9) renorm(s, 4);\n}\n\nfunction renorm(s, lnl) {\n  const l = exp(lnl), il = 1 / l;\n  s.lnL += lnl;\n  for (let p = 0; p \u003c N; p++) {\n    s.wx[p] *= il;\n    s.wy[p] *= il;\n    s.d2[p] *= il * il;\n  }\n  s.Wd *= il;\n  s.t *= il * il;\n  for (let k = 0; k \u003c s.n; k++) (s.hw[k] *= il), (s.ht[k] *= il * il);\n  s.near *= il * il;\n  let f = il;\n  for (let n = 1; n \u003c= M; n++) (f *= il), (s.b[n] *= f);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float64Array(n);\n  params.s = {\n    wx: F(N), wy: F(N), d2: F(N), mk: new Uint8Array(N), mt: F(N),\n    b: F(M + 1), Vc: F(M + 2), P: F(M + 2), Q: F(M + 2), hw: F(CAP), ht: F(CAP),\n    seen: new Uint8Array(N), stack: new Int32Array(N), spare: null, acc: 0, hue: 0, kappa: 4, trace: 0.06,\n    buf: new Float32Array(N * 3), tlut: new Float32Array(LUT * 3), blut: new Float32Array(LUT * 3),\n    side: new Float32Array(12), lutHue: NaN,\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  s.hue = k[0];\n  s.kappa = cl(k[2], 4, 8);\n  s.trace = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) fresh(s);\n  const sp = cl(k[1], 0.2, 3);\n  s.acc += d * sp * RATE;\n  let n = floor(s.acc);\n  s.acc -= n;\n  s.tau += d * sp;\n  while (n-- > 0) step(s, s.kappa);\n  if (s.kappa > 4) fill(s);\n  const [zx, zy] = tip(s);\n  const [px, py] = toPanel(s, zx, zy);\n  s.tipx = px;\n  s.tipy = py;\n  const rows = min(3, ceilPos(TIPROW - py));\n  for (let i = 0; i \u003c rows; i++) newRow(s);\n  s.tipy = py + rows;\n}\nconst ceilPos = (v) => (v > 0 ? Math.ceil(v) : 0);\n\n// Colour stops, turned round the colour wheel by Hue: the trace by its age,\n// new to old; swallowed ground by when it was swallowed; the field on the\n// right and on the left of the curve; the rays and the rings of the grid.\nconst TRACE = [[255, 238, 196], [255, 178, 84], [250, 92, 112], [206, 62, 196], [124, 76, 236]];\nconst BUBBLE = [[150, 40, 92], [112, 34, 128], [58, 40, 128], [96, 30, 70], [150, 40, 92]];\nconst RIGHT = [16, 32, 78], LEFT = [8, 50, 72], RAY = [52, 150, 172], RING = [96, 112, 206];\nconst LUT = 64;\nfunction ramp(stops, out, rot) {\n  const n = stops.length - 1;\n  for (let i = 0; i \u003c LUT; i++) {\n    const u = (i / (LUT - 1)) * n, j = min(n - 1, floor(u)), f = u - j;\n    const c = [0, 1, 2].map((k) => stops[j][k] + (stops[j + 1][k] - stops[j][k]) * f);\n    turn(c, rot, out, i * 3);\n  }\n}\n// A hue turn that keeps the grey axis: rotation about (1, 1, 1).\nfunction turn(c, a, out, o) {\n  const co = cos(a), si = sin(a), k = (1 - co) / 3, r = sqrt(1 / 3) * si;\n  const m0 = co + k, m1 = k - r, m2 = k + r;\n  out[o] = cl(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255);\n  out[o + 1] = cl(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255);\n  out[o + 2] = cl(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255);\n}\n\n// The grid is the conformal map log(g_t(z) - W_t), which unrolls what is\n// left of the channel into a straight strip with the tip at minus infinity:\n// its level lines are circles round the tip and the rays out of it. Where a\n// cell grows large a finer grid fades in, up to three halvings.\nconst DELTA = PI / 8, LEVELS = 4, LOG7 = log(DELTA / 7);\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s) return;\n  const buf = s.buf, wx = s.wx, wy = s.wy, d2 = s.d2, mk = s.mk, mt = s.mt, Wk = s.Wd;\n  const fld = 1 - s.trace, tr = s.tlut, bu = s.blut, side = s.side;\n  if (s.lutHue !== s.hue) {\n    const rot = s.hue * 2 * PI;\n    ramp(TRACE, tr, rot);\n    ramp(BUBBLE, bu, rot);\n    turn(RIGHT, rot, side, 0);\n    turn(LEFT, rot, side, 3);\n    turn(RAY, rot, side, 6);\n    turn(RING, rot, side, 9);\n    s.lutHue = s.hue;\n  }\n  for (let py = 0, p = 0; py \u003c H; py++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (mk[p]) {\n        const age = max(0, s.tau - mt[p]);\n        if (mk[p] === 1) {\n          const i = min(LUT - 1, floor((age / 8) * (LUT - 1))) * 3;\n          buf[q] = tr[i];\n          buf[q + 1] = tr[i + 1];\n          buf[q + 2] = tr[i + 2];\n        } else {\n          // Swallowed ground keeps the colour of the moment it was cut off,\n          // and dims as it ages.\n          const u = mt[p] / 5, i = floor((u - floor(u)) * (LUT - 1)) * 3, v = 0.55 + 0.45 * exp(-age / 6);\n          const hat = ((x + (floor(u * 7) & 1 ? 1 : -1) * (py - s.scroll) + 4096) & 3) === 0 ? 1 : 0.5;\n          buf[q] = bu[i] * v * hat;\n          buf[q + 1] = bu[i + 1] * v * hat;\n          buf[q + 2] = bu[i + 2] * v * hat;\n        }\n        continue;\n      }\n      const ux = wx[p] - Wk, uy = wy[p], r2 = ux * ux + uy * uy, rr = sqrt(r2);\n      const lr = log(rr), th = atan2(uy, ux), lg = 0.5 * log(d2[p]);\n      const cell = DELTA * exp(lr - lg); // LEDs per grid cell here\n      const fa = lr / DELTA, fb = th / DELTA;\n      // Lines, coarse to fine.\n      let ring = 0, ray = 0, cj = cell, sa = fa, sb = fb, chk = 0;\n      const lc = cl((lr - lg + LOG7) * 1.4427, 0, LEVELS - 1.001), jc = floor(lc), fc = lc - jc;\n      for (let j = 0; j \u003c LEVELS && (j \u003c= jc + 1 || cj >= 6); j++) {\n        const ia = floor(sa), ib = floor(sb), nb = round(sb);\n        // The rays at angle 0 and pi are the boundary itself, not grid. The\n        // ray at pi/2 is the hyperbolic geodesic from the tip to the top of\n        // the channel, where the curve is bound, and burns brighter.\n        const da = min(sa - ia, ia + 1 - sa) * cj, db = nb > 0 && nb \u003c 8 \u003c\u003c j ? abs(sb - nb) * cj : 99;\n        const fade = j === 0 ? cl((cj - 2) / 3, 0, 1) : cl((cj - 6) / 6, 0, 1) * 0.6;\n        ring = max(ring, cl(1 - da / 0.8, 0, 1) * fade);\n        ray = max(ray, cl(1 - db / 0.8, 0, 1) * fade * (j === 0 && nb === 4 ? 1.6 : 1));\n        if (j === jc) chk += ((ia + ib) & 1) * (1 - fc);\n        if (j === jc + 1) chk += ((ia + ib) & 1) * fc;\n        cj *= 0.5;\n        sa *= 2;\n        sb *= 2;\n      }\n      // The two sides of the curve: th / pi is the chance that a Brownian\n      // walker from here leaves by the left-hand side.\n      const hs = th / PI, cf = (0.82 + 0.36 * chk * cl((cell - 2) / 3, 0, 1)) * (0.4 + 0.6 * sqrt(uy / rr));\n      let r = (side[0] + (side[3] - side[0]) * hs) * cf * fld;\n      let gg = (side[1] + (side[4] - side[1]) * hs) * cf * fld;\n      let bl = (side[2] + (side[5] - side[2]) * hs) * cf * fld;\n      let li = ring * fld;\n      r += (side[9] - r) * li;\n      gg += (side[10] - gg) * li;\n      bl += (side[11] - bl) * li;\n      li = min(1, ray) * fld;\n      const hot = max(0, ray - 1) * 1.6 * fld;\n      r += (side[6] - r) * li;\n      gg += (side[7] - gg) * li;\n      bl += (side[8] - bl) * li;\n      r += (210 - r) * hot;\n      gg += (240 - gg) * hot;\n      bl += (240 - bl) * hot;\n      buf[q] = r;\n      buf[q + 1] = gg;\n      buf[q + 2] = bl;\n    }\n  // The tip.\n  const tx = s.tipx, ty = s.tipy;\n  for (let y = max(0, floor(ty - 3)); y \u003c= min(H - 1, floor(ty + 3)); y++)\n    for (let x = max(0, floor(tx - 3)); x \u003c= min(W - 1, floor(tx + 3)); x++) {\n      const dd = (x - tx) ** 2 + (y - ty) ** 2, w = exp(-dd / 1.5);\n      const q = (y * W + x) * 3;\n      buf[q] += (255 - buf[q]) * w;\n      buf[q + 1] += (250 - buf[q + 1]) * w;\n      buf[q + 2] += (235 - buf[q + 2]) * w;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Kappa=4..8, Trace=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the grid is blue and teal and the trace runs from white-gold at the tip through orange and rose to violet as it ages."},{"name":"Speed","min":0.2,"max":3,"about":"Loewner steps a second, 1200 at 2. The tip passes the middle of the panel in two and a half seconds, then climbs 17 to 24 LEDs a second, fastest at Kappa 4, and the view scrolls after it. At 0.2 everything runs ten times slower."},{"name":"Kappa","min":4,"max":8,"about":"The kappa of SLE, how hard the Brownian motion drives the curve. At 4 the curve is simple and never touches itself or the walls. Above 4 it hits both, and the ground it closes off is swallowed and hatched in the colour of the moment it was cut off. At 8 it fills everything behind the tip."},{"name":"Trace","min":0,"max":1,"about":"Fades the grid out from behind the trace. At 0 the conformal grid lights the channel round the curve; at 1 it is gone and the trace burns on black."}],"start":[0,2,4,0.06],"measures":{"motion":2.6307,"detail":0.0738,"edges":0.5207,"complexity":1.219,"coverage":0.8893,"colour":0.2244,"drift":0.1264},"knobResponse":[0.1533,0.1433,0.1845,0.1423]},{"slug":"longcase-clock","title":"Longcase Clock","family":"time","round":18,"note":"촛불 켠 밤 방에 128줄을 다 쓰는 괘종시계가 서 있어요. 줄의 유리문 안에서 황동 추가 1초에 한 번씩 흔들리고 무게추가 내려가며, 다이얼 아치의 달 원판이 돌고, 정시마다 꼭대기 종이 번쩍이며 울려요. K3 을 돌리면 촛불이 시계 왼쪽에서 앞을 지나 오른쪽으로 옮겨 가고, 벽에 진 그림자가 반대쪽으로 넘어가요.","idea":"A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","layer":{"id":"layer-longcase-clock","type":"code","name":"longcase-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wood","min":0,"max":1,"about":"The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1."},{"name":"Speed","min":0,"max":3,"about":"How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window."},{"name":"Candle","min":0,"max":1,"about":"Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side."},{"name":"Lamp","min":0,"max":1,"about":"The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.144,"detail":0.0765,"edges":0.4175,"complexity":2.1824,"coverage":0.9202,"colour":0.2877,"drift":0.0825},"knobResponse":[0.0907,0.1391,0.1097,0.2042]},{"slug":"look-and-say","title":"Look and Say","family":"data","round":28,"note":"콘웨이의 보고 말하기 수열이 한 줄씩 제 위 줄을 소리 내어 읽으며 쪽을 내려와요. 줄이 한 걸음에 1.3배씩 길어지면 글자가 3×5 숫자에서 막대로, LED 하나에 숫자 하나로 작아지고, 콘웨이의 원소 92개가 저마다 제 색이에요. K3 이 씨앗을 3, 312, 311311, 고정점 22 로 바꿔요.","idea":"Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.","buttons":"K1 tap starts the page again from the next seed.","code":"// ===== Patternflow pattern =====\n// Title:   Look and Say\n// Family:  data\n// Idea:    Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the look-and-say sequence and its audioactive decay into 92 elements (John Horton Conway, 1986), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream.\n// Knob 2: Speed. How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long.\n// Knob 3: Seed. The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s).\n// Knob 4: Digits. At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold.\n// Buttons: K1 tap starts the page again from the next seed.\n\nconst W = 64, H = 128;\nconst { min, max, floor, ceil, exp, pow, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Conway's 92 elements, H to U: the name, the digits, and what the element\n// becomes when it is read aloud. Every term of the sequence from the eighth\n// on is a row of these, and each element decays on its own.\nconst TABLE = `H 22 H|He 13112221133211322112211213322112 Hf.Pa.H.Ca.Li|Li 312211322212221121123222112 He|Be 111312211312113221133211322112211213322112 Ge.Ca.Li|B 1321132122211322212221121123222112 Be|C 3113112211322112211213322112 B|N 111312212221121123222112 C|O 132112211213322112 N|F 31121123222112 O|Ne 111213322112 F|Na 123222112 Ne|Mg 3113322112 Pm.Na|Al 1113222112 Mg|Si 1322112 Al|P 311311222112 Ho.Si|S 1113122112 P|Cl 132112 S|Ar 3112 Cl|K 1112 Ar|Ca 12 K|Sc 3113112221133112 Ho.Pa.H.Ca.Co|Ti 11131221131112 Sc|V 13211312 Ti|Cr 31132 V|Mn 111311222112 Cr.Si|Fe 13122112 Mn|Co 32112 Fe|Ni 11133112 Zn.Co|Cu 131112 Ni|Zn 312 Cu|Ga 13221133122211332 Eu.Ca.Ac.H.Ca.Zn|Ge 31131122211311122113222 Ho.Ga|As 11131221131211322113322112 Ge.Na|Se 13211321222113222112 As|Br 3113112211322112 Se|Kr 11131221222112 Br|Rb 1321122112 Kr|Sr 3112112 Rb|Y 1112133 Sr.U|Zr 12322211331222113112211 Y.H.Ca.Tc|Nb 1113122113322113111221131221 Er.Zr|Mo 13211322211312113211 Nb|Tc 311322113212221 Mo|Ru 132211331222113112211 Eu.Ca.Tc|Rh 311311222113111221131221 Ho.Ru|Pd 111312211312113211 Rh|Ag 132113212221 Pd|Cd 3113112211 Ag|In 11131221 Cd|Sn 13211 In|Sb 3112221 Pm.Sn|Te 1322113312211 Eu.Ca.Sb|I 311311222113111221 Ho.Te|Xe 11131221131211 I|Cs 13211321 Xe|Ba 311311 Cs|La 11131 Ba|Ce 1321133112 La.H.Ca.Co|Pr 31131112 Ce|Nd 111312 Pr|Pm 132 Nd|Sm 311332 Pm.Ca.Zn|Eu 1113222 Sm|Gd 13221133112 Eu.Ca.Co|Tb 3113112221131112 Ho.Gd|Dy 111312211312 Tb|Ho 1321132 Dy|Er 311311222 Ho.Pm|Tm 11131221133112 Er.Ca.Co|Yb 1321131112 Tm|Lu 311312 Yb|Hf 11132 Lu|Ta 13112221133211322112211213322113 Hf.Pa.H.Ca.W|W 312211322212221121123222113 Ta|Re 111312211312113221133211322112211213322113 Ge.Ca.W|Os 1321132122211322212221121123222113 Re|Ir 3113112211322112211213322113 Os|Pt 111312212221121123222113 Ir|Au 132112211213322113 Pt|Hg 31121123222113 Au|Tl 111213322113 Hg|Pb 123222113 Tl|Bi 3113322113 Pm.Pb|Po 1113222113 Bi|At 1322113 Po|Rn 311311222113 Ho.At|Fr 1113122113 Rn|Ra 132113 Fr|Ac 3113 Ra|Th 1113 Ac|Pa 13 Th|U 3 Pa`;\nconst ROWS = TABLE.split(\"|\").map((r) => r.split(\" \"));\nconst NAME = ROWS.map((r) => r[0]);\nconst LEN = ROWS.map((r) => r[1].length);\nconst DEC = ROWS.map((r) => r[2].split(\".\").map((n) => NAME.indexOf(n)));\nconst NONE = 92;\n\n// The seeds: the first row, the row from which it is a compound of elements,\n// and that compound. Seed 1 runs seven rows before it splits into Hf.Sn.\nconst SEEDS = [\n  [\"1\", 8, \"Hf.Sn\"],\n  [\"3\", 1, \"U\"],\n  [\"312\", 1, \"Zn\"],\n  [\"311311\", 1, \"Ba\"],\n  [\"22\", 1, \"H\"],\n];\n\n// The four prints: cell width and height, digits a line, blank lines between\n// rows, top margin, and how many lines the row read and the row typed may\n// fill together before the page steps down to the next print. Numerals\n// first, then bars one LED wide and as tall as the digit, so a run of equal\n// digits stands as a flat step; then one LED a digit, two LEDs tall, then\n// one.\nconst LV = [\n  { cw: 4, ch: 6, per: 16, gap: 0, top: 1, fit: 16 },\n  { cw: 1, ch: 4, per: 64, gap: 1, top: 0, fit: 24 },\n  { cw: 1, ch: 2, per: 64, gap: 1, top: 0, fit: 48 },\n  { cw: 1, ch: 1, per: 64, gap: 1, top: 0, fit: 999 },\n];\n// 3x5 numerals 1, 2 and 3, one octal digit a row from the top. No other\n// digit ever appears: no run in these seeds is longer than three.\nconst FONT = [0, 0o26227, 0o71747, 0o71317];\n// The largest row the finest print still holds, in lines of 64.\nconst LAST = 120;\n// Rows the page rattles off at the start before it settles to reading.\nconst BURST = 20;\n\nfunction say(d) {\n  const o = [];\n  for (let i = 0; i \u003c d.length; ) {\n    let j = i + 1;\n    while (j \u003c d.length && d[j] === d[i]) j++;\n    o.push(j - i, d[i]);\n    i = j;\n  }\n  return Uint8Array.from(o);\n}\n\nfunction build(P, si) {\n  const [s0, at, comp] = SEEDS[si];\n  const T = [];\n  let d = Uint8Array.from(s0, (c) => +c), E = null;\n  for (let n = 1; n \u003c= 48; n++) {\n    if (n === at) E = comp.split(\".\").map((x) => NAME.indexOf(x));\n    else if (E) E = E.flatMap((k) => DEC[k]);\n    const e = new Uint8Array(d.length).fill(NONE), end = new Uint8Array(d.length);\n    if (E) {\n      let p = 0;\n      for (const k of E) e.fill(k, p, (p += LEN[k])), (end[p - 1] = 1);\n    }\n    T.push({ d, e, end, n: d.length, ri: null });\n    const nx = say(d);\n    if (nx.length > LAST * 64) break;\n    d = nx;\n  }\n  P.si = si;\n  P.T = T;\n  P.lv = 0;\n  P.ls = lines(T, 0);\n  P.l0 = P.ls;\n  P.sc = 0;\n  P.n = 0;\n  P.st = 1;\n  P.w = 0.1;\n  P.r = 0;\n  // The seed is on the page from the start.\n  P.typed = T[0].n;\n  P.at = new Float32Array(T[0].n).fill(P.clock - 1);\n  P.u = 0;\n}\n\n// Where each row starts, in lines of a print.\nfunction lines(T, lv) {\n  const L = LV[lv], ls = new Int32Array(T.length + 1);\n  for (let k = 0; k \u003c T.length; k++) ls[k + 1] = ls[k] + ceil(T[k].n / L.per) + L.gap;\n  return ls;\n}\nconst rowLines = (P, k, lv) => ceil(P.T[k].n / LV[lv].per);\n\n// The runs of the row being read: for each digit, the number of its run.\nfunction runs(t) {\n  if (t.ri) return;\n  t.ri = new Int32Array(t.n);\n  t.rs = [];\n  for (let i = 0, r = -1; i \u003c t.n; i++) {\n    if (i === 0 || t.d[i] !== t.d[i - 1]) r++, t.rs.push(i);\n    t.ri[i] = r;\n  }\n}\n\n// How long a row takes to type: seconds for its runs at the Speed knob.\nfunction dur(P, k) {\n  const runsN = P.T[k].n / 2, f = 2 / P.sp;\n  if (P.l0[k] \u003c BURST) return 0.15 * pow(f, 0.5);\n  if (P.lv === 0) return f * (0.2 + 0.55 * pow(runsN, 0.5));\n  return f * (0.5 + 0.55 * pow(runsN, 0.3));\n}\n\n// The scroll that keeps the typing line at the foot of the panel and the\n// reading head on it.\nfunction want(P, lv, ls, typed) {\n  const L = LV[lv], n = P.n;\n  if (n >= P.T.length) return P.sc;\n  const tl = ls[n] + floor(min(typed, P.T[n].n - 1) / L.per);\n  let s = L.top + (tl + 1) * L.ch + 1 - H;\n  if (n > 0) {\n    const src = P.T[n - 1], i = src.rs ? src.rs[min(src.rs.length - 1, floor(P.r))] : 0;\n    s = min(s, L.top + (ls[n - 1] + floor(i / L.per)) * L.ch - 2);\n  }\n  return max(0, s);\n}\n\nfunction next(P) {\n  P.n++;\n  P.r = 0;\n  P.typed = 0;\n  if (P.n >= P.T.length) return void ((P.st = 3), (P.w = 3));\n  const t = P.T[P.n];\n  runs(P.T[P.n - 1]);\n  P.at = new Float32Array(t.n);\n  P.st = 0;\n  const lv = P.lv;\n  if (lv \u003c 3 && rowLines(P, P.n - 1, lv) + rowLines(P, P.n, lv) > LV[lv].fit) {\n    // Step down a print: every digit flies from its old place to its new one.\n    P.nl = lv + 1;\n    P.nls = lines(P.T, lv + 1);\n    P.nsc = want(P, lv + 1, P.nls, 0);\n    P.st = 2;\n    P.u = 0;\n  }\n}\n\nexport function setup(params) {\n  params.s = { si: 0, off: 0, sp: 2, hue: 0, dig: 0.06, col: new Float32Array(93 * 4 * 3), buf: new Float32Array(W * H * 3), clock: 0 };\n  build(params.s, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.dig = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.off++;\n  const si = (round(cl(k[2], 1, 5)) - 1 + P.off) % SEEDS.length;\n  if (si !== P.si) build(P, si);\n  P.clock += d;\n  if (P.st === 0) {\n    const t = P.T[P.n], rn = t.n / 2;\n    P.r = min(rn, P.r + (d * rn) / dur(P, P.n));\n    // The count is spoken as the run lights up, the digit just after.\n    while (P.typed \u003c t.n && (P.typed >> 1) + (P.typed & 1 ? 0.55 : 0.12) \u003c= P.r) P.at[P.typed++] = P.clock;\n    if (P.typed >= t.n) (P.st = 1), (P.w = P.l0[P.n] \u003c BURST ? 0.03 : 0.35 * (2 / P.sp));\n  } else if (P.st === 1) {\n    P.w -= d;\n    if (P.w \u003c= 0) next(P);\n  } else if (P.st === 2) {\n    P.u += d / 1.6;\n    if (P.u >= 1) (P.lv = P.nl), (P.ls = P.nls), (P.sc = P.nsc), (P.st = 0);\n  } else if (P.st === 3) {\n    P.w -= d;\n    if (P.w \u003c= 0) (P.st = 4), (P.u = 0);\n  } else if (P.st === 4) {\n    P.u += d / 0.8;\n    if (P.u >= 1) build(P, P.si);\n  }\n  if (P.st !== 2) P.sc += (want(P, P.lv, P.ls, P.typed) - P.sc) * (1 - exp(-d * 10));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\n// Colour of each element and digit: element hue by place in Conway's table,\n// from pink at hydrogen through violet and blue to green at uranium, so an\n// element and what it decays into are near in colour. The Digits knob mixes\n// toward a hue for each digit. Rows before the split into elements are pale.\nconst tmp = new Float32Array(6);\nfunction palette(P) {\n  const h0 = P.hue + 0.95, col = P.col, k = cl((P.dig - 0.3) / 0.4, 0, 1), g = k * k * (3 - 2 * k);\n  for (let e = 0; e \u003c= NONE; e++)\n    for (let dg = 1; dg \u003c= 3; dg++) {\n      if (e === NONE) hsv(h0 + 0.2, 0.3, 1, tmp, 0);\n      else hsv(h0 - 0.58 * (e / 91), 0.75, 1, tmp, 0);\n      hsv(h0 + [0, 0.56, 0.85, 0.19][dg], 0.8, 1, tmp, 3);\n      const o = (e * 4 + dg) * 3;\n      for (let c = 0; c \u003c 3; c++) col[o + c] = tmp[c] + (tmp[c + 3] - tmp[c]) * g;\n    }\n}\n\n// One digit onto the buffer in print lv at (x, y), the palette colour at o\n// scaled by v and whitened by w. Behind a numeral lies a strip of tint, open\n// after the last digit of an element; a bar at the end of an element is dimmer.\nfunction put(P, lv, x, y, dg, o, v, w, tint, end) {\n  const buf = P.buf, col = P.col;\n  const r = col[o] * v, g = col[o + 1] * v, b = col[o + 2] * v;\n  const R = r + (255 - r) * w, G = g + (255 - g) * w, B = b + (255 - b) * w;\n  if (lv === 0) {\n    const bits = FONT[dg], tw = end ? 3 : 4;\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const yy = y + gy;\n      if (yy \u003c 0 || yy >= H) continue;\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c tw; gx++) {\n        const xx = x + gx;\n        if (xx >= W) break;\n        const q = (yy * W + xx) * 3;\n        if (gx \u003c 3 && row & (4 >> gx)) (buf[q] = R), (buf[q + 1] = G), (buf[q + 2] = B);\n        else if (tint > 0) (buf[q] = col[o] * tint), (buf[q + 1] = col[o + 1] * tint), (buf[q + 2] = col[o + 2] * tint);\n      }\n    }\n    return;\n  }\n  const m = lv === 1 ? (end ? 0.6 : 1) : lv === 2 ? [0, 0.7, 0.86, 1][dg] : [0, 0.8, 0.9, 1][dg];\n  for (let yy = lv === 1 ? y + 3 - dg : y, y1 = lv === 1 ? y + 3 : y + LV[lv].ch; yy \u003c y1; yy++) {\n    if (yy \u003c 0 || yy >= H || x >= W) continue;\n    const q = (yy * W + x) * 3;\n    buf[q] = R * m;\n    buf[q + 1] = G * m;\n    buf[q + 2] = B * m;\n  }\n}\n\n// Brightness and whitening of digit i of row k: rows long read are dim, the\n// row being read dims behind the reading head, the run under the head lights\n// up, and a digit just typed flashes.\nconst OLD = 0.62, SRC = 0.95;\nfunction look(P, k, i, out) {\n  const n = P.n;\n  out[0] = OLD;\n  out[1] = 0;\n  if (k === n && P.st \u003c= 1) {\n    out[0] = 1;\n    out[1] = 0.85 * exp(-(P.clock - P.at[i]) / 0.22);\n  } else if (k === n - 1 && P.st \u003c= 1) {\n    const t = P.T[k], dr = P.r - t.ri[i];\n    if (dr \u003c 0) out[0] = SRC;\n    else {\n      const tau = dur(P, n) / (P.T[n].n / 2), s = dr \u003c 1 ? 0 : ((dr - 1) * tau) / 0.25;\n      out[1] = 0.8 * exp(-s);\n      out[0] = OLD + (SRC - OLD) * exp(-s * 0.3);\n    }\n  } else if (k === n - 1) out[0] = SRC;\n}\n\nconst lk = new Float32Array(2);\nfunction drawPage(P, lv, ls, sc) {\n  const L = LV[lv], top = L.top - round(sc), tintBase = (1 - P.dig) * 0.13;\n  const last = min(P.n, P.T.length - 1);\n  for (let k = 0; k \u003c= last; k++) {\n    const t = P.T[k], y0 = top + ls[k] * L.ch;\n    if (y0 >= H) break;\n    if (y0 + (ls[k + 1] - ls[k]) * L.ch \u003c 0) continue;\n    const cnt = k === P.n ? (P.st \u003c= 1 ? P.typed : 0) : t.n;\n    for (let i = 0; i \u003c cnt; i++) {\n      const y = y0 + floor(i / L.per) * L.ch;\n      if (y + L.ch \u003c= 0) {\n        i += L.per - 1 - (i % L.per);\n        continue;\n      }\n      if (y >= H) break;\n      look(P, k, i, lk);\n      const e = t.e[i], dg = t.d[i];\n      put(P, lv, (i % L.per) * L.cw, y, dg, (e * 4 + dg) * 3, lk[0], lk[1], e === NONE ? 0 : tintBase * (0.6 + 0.4 * lk[0]), t.end[i]);\n    }\n  }\n}\n\n// Stepping down a print: line by line from the top, each numeral drops to a\n// block and flies to its place in the finer print.\nfunction drawFlight(P) {\n  const A = LV[P.lv], B = LV[P.nl], u = P.u, tintBase = (1 - P.dig) * 0.13;\n  const ta = A.top - round(P.sc), tb = B.top - round(P.nsc);\n  for (let k = 0; k \u003c P.n; k++) {\n    const t = P.T[k];\n    for (let i = 0; i \u003c t.n; i++) {\n      const xa = (i % A.per) * A.cw, ya = ta + (P.ls[k] + floor(i / A.per)) * A.ch;\n      const xb = (i % B.per) * B.cw, yb = tb + (P.nls[k] + floor(i / B.per)) * B.ch;\n      if ((ya \u003c -6 || ya >= H) && (yb \u003c -6 || yb >= H)) continue;\n      const v = k === P.n - 1 ? SRC : OLD, e = t.e[i], dg = t.d[i], o = (e * 4 + dg) * 3;\n      const s = cl((u * 1.5 - 0.5 * cl(ya / H, 0, 1)) * 1.25, 0, 1);\n      if (s \u003c= 0) put(P, P.lv, xa, ya, dg, o, v, 0, e === NONE ? 0 : tintBase * (0.6 + 0.4 * v), t.end[i]);\n      else {\n        const f = s * s * (3 - 2 * s);\n        put(P, P.nl, round(xa + (xb - xa) * f), round(ya + (yb - ya) * f), dg, o, v, 0.5 * (1 - f), 0, t.end[i]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  palette(P);\n  const buf = P.buf;\n  buf.fill(0);\n  if (P.st === 2) drawFlight(P);\n  else drawPage(P, P.lv, P.ls, P.sc);\n  const fade = P.st === 4 ? 1 - P.u : 1;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * fade, buf[p + 1] * fade, buf[p + 2] * fade);\n}\n","layer":{"id":"layer-look-and-say","type":"code","name":"look-and-say","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Look and Say\n// Family:  data\n// Idea:    Conway's look-and-say sequence types itself down the page, each row read aloud run by run from the row above, and as the rows grow by 1.3 a step the page steps down from numerals to bars to one LED a digit, every Conway element in its own colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the look-and-say sequence and its audioactive decay into 92 elements (John Horton Conway, 1986), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream.\n// Knob 2: Speed. How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long.\n// Knob 3: Seed. The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s).\n// Knob 4: Digits. At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold.\n// Buttons: K1 tap starts the page again from the next seed.\n\nconst W = 64, H = 128;\nconst { min, max, floor, ceil, exp, pow, round } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Conway's 92 elements, H to U: the name, the digits, and what the element\n// becomes when it is read aloud. Every term of the sequence from the eighth\n// on is a row of these, and each element decays on its own.\nconst TABLE = `H 22 H|He 13112221133211322112211213322112 Hf.Pa.H.Ca.Li|Li 312211322212221121123222112 He|Be 111312211312113221133211322112211213322112 Ge.Ca.Li|B 1321132122211322212221121123222112 Be|C 3113112211322112211213322112 B|N 111312212221121123222112 C|O 132112211213322112 N|F 31121123222112 O|Ne 111213322112 F|Na 123222112 Ne|Mg 3113322112 Pm.Na|Al 1113222112 Mg|Si 1322112 Al|P 311311222112 Ho.Si|S 1113122112 P|Cl 132112 S|Ar 3112 Cl|K 1112 Ar|Ca 12 K|Sc 3113112221133112 Ho.Pa.H.Ca.Co|Ti 11131221131112 Sc|V 13211312 Ti|Cr 31132 V|Mn 111311222112 Cr.Si|Fe 13122112 Mn|Co 32112 Fe|Ni 11133112 Zn.Co|Cu 131112 Ni|Zn 312 Cu|Ga 13221133122211332 Eu.Ca.Ac.H.Ca.Zn|Ge 31131122211311122113222 Ho.Ga|As 11131221131211322113322112 Ge.Na|Se 13211321222113222112 As|Br 3113112211322112 Se|Kr 11131221222112 Br|Rb 1321122112 Kr|Sr 3112112 Rb|Y 1112133 Sr.U|Zr 12322211331222113112211 Y.H.Ca.Tc|Nb 1113122113322113111221131221 Er.Zr|Mo 13211322211312113211 Nb|Tc 311322113212221 Mo|Ru 132211331222113112211 Eu.Ca.Tc|Rh 311311222113111221131221 Ho.Ru|Pd 111312211312113211 Rh|Ag 132113212221 Pd|Cd 3113112211 Ag|In 11131221 Cd|Sn 13211 In|Sb 3112221 Pm.Sn|Te 1322113312211 Eu.Ca.Sb|I 311311222113111221 Ho.Te|Xe 11131221131211 I|Cs 13211321 Xe|Ba 311311 Cs|La 11131 Ba|Ce 1321133112 La.H.Ca.Co|Pr 31131112 Ce|Nd 111312 Pr|Pm 132 Nd|Sm 311332 Pm.Ca.Zn|Eu 1113222 Sm|Gd 13221133112 Eu.Ca.Co|Tb 3113112221131112 Ho.Gd|Dy 111312211312 Tb|Ho 1321132 Dy|Er 311311222 Ho.Pm|Tm 11131221133112 Er.Ca.Co|Yb 1321131112 Tm|Lu 311312 Yb|Hf 11132 Lu|Ta 13112221133211322112211213322113 Hf.Pa.H.Ca.W|W 312211322212221121123222113 Ta|Re 111312211312113221133211322112211213322113 Ge.Ca.W|Os 1321132122211322212221121123222113 Re|Ir 3113112211322112211213322113 Os|Pt 111312212221121123222113 Ir|Au 132112211213322113 Pt|Hg 31121123222113 Au|Tl 111213322113 Hg|Pb 123222113 Tl|Bi 3113322113 Pm.Pb|Po 1113222113 Bi|At 1322113 Po|Rn 311311222113 Ho.At|Fr 1113122113 Rn|Ra 132113 Fr|Ac 3113 Ra|Th 1113 Ac|Pa 13 Th|U 3 Pa`;\nconst ROWS = TABLE.split(\"|\").map((r) => r.split(\" \"));\nconst NAME = ROWS.map((r) => r[0]);\nconst LEN = ROWS.map((r) => r[1].length);\nconst DEC = ROWS.map((r) => r[2].split(\".\").map((n) => NAME.indexOf(n)));\nconst NONE = 92;\n\n// The seeds: the first row, the row from which it is a compound of elements,\n// and that compound. Seed 1 runs seven rows before it splits into Hf.Sn.\nconst SEEDS = [\n  [\"1\", 8, \"Hf.Sn\"],\n  [\"3\", 1, \"U\"],\n  [\"312\", 1, \"Zn\"],\n  [\"311311\", 1, \"Ba\"],\n  [\"22\", 1, \"H\"],\n];\n\n// The four prints: cell width and height, digits a line, blank lines between\n// rows, top margin, and how many lines the row read and the row typed may\n// fill together before the page steps down to the next print. Numerals\n// first, then bars one LED wide and as tall as the digit, so a run of equal\n// digits stands as a flat step; then one LED a digit, two LEDs tall, then\n// one.\nconst LV = [\n  { cw: 4, ch: 6, per: 16, gap: 0, top: 1, fit: 16 },\n  { cw: 1, ch: 4, per: 64, gap: 1, top: 0, fit: 24 },\n  { cw: 1, ch: 2, per: 64, gap: 1, top: 0, fit: 48 },\n  { cw: 1, ch: 1, per: 64, gap: 1, top: 0, fit: 999 },\n];\n// 3x5 numerals 1, 2 and 3, one octal digit a row from the top. No other\n// digit ever appears: no run in these seeds is longer than three.\nconst FONT = [0, 0o26227, 0o71747, 0o71317];\n// The largest row the finest print still holds, in lines of 64.\nconst LAST = 120;\n// Rows the page rattles off at the start before it settles to reading.\nconst BURST = 20;\n\nfunction say(d) {\n  const o = [];\n  for (let i = 0; i \u003c d.length; ) {\n    let j = i + 1;\n    while (j \u003c d.length && d[j] === d[i]) j++;\n    o.push(j - i, d[i]);\n    i = j;\n  }\n  return Uint8Array.from(o);\n}\n\nfunction build(P, si) {\n  const [s0, at, comp] = SEEDS[si];\n  const T = [];\n  let d = Uint8Array.from(s0, (c) => +c), E = null;\n  for (let n = 1; n \u003c= 48; n++) {\n    if (n === at) E = comp.split(\".\").map((x) => NAME.indexOf(x));\n    else if (E) E = E.flatMap((k) => DEC[k]);\n    const e = new Uint8Array(d.length).fill(NONE), end = new Uint8Array(d.length);\n    if (E) {\n      let p = 0;\n      for (const k of E) e.fill(k, p, (p += LEN[k])), (end[p - 1] = 1);\n    }\n    T.push({ d, e, end, n: d.length, ri: null });\n    const nx = say(d);\n    if (nx.length > LAST * 64) break;\n    d = nx;\n  }\n  P.si = si;\n  P.T = T;\n  P.lv = 0;\n  P.ls = lines(T, 0);\n  P.l0 = P.ls;\n  P.sc = 0;\n  P.n = 0;\n  P.st = 1;\n  P.w = 0.1;\n  P.r = 0;\n  // The seed is on the page from the start.\n  P.typed = T[0].n;\n  P.at = new Float32Array(T[0].n).fill(P.clock - 1);\n  P.u = 0;\n}\n\n// Where each row starts, in lines of a print.\nfunction lines(T, lv) {\n  const L = LV[lv], ls = new Int32Array(T.length + 1);\n  for (let k = 0; k \u003c T.length; k++) ls[k + 1] = ls[k] + ceil(T[k].n / L.per) + L.gap;\n  return ls;\n}\nconst rowLines = (P, k, lv) => ceil(P.T[k].n / LV[lv].per);\n\n// The runs of the row being read: for each digit, the number of its run.\nfunction runs(t) {\n  if (t.ri) return;\n  t.ri = new Int32Array(t.n);\n  t.rs = [];\n  for (let i = 0, r = -1; i \u003c t.n; i++) {\n    if (i === 0 || t.d[i] !== t.d[i - 1]) r++, t.rs.push(i);\n    t.ri[i] = r;\n  }\n}\n\n// How long a row takes to type: seconds for its runs at the Speed knob.\nfunction dur(P, k) {\n  const runsN = P.T[k].n / 2, f = 2 / P.sp;\n  if (P.l0[k] \u003c BURST) return 0.15 * pow(f, 0.5);\n  if (P.lv === 0) return f * (0.2 + 0.55 * pow(runsN, 0.5));\n  return f * (0.5 + 0.55 * pow(runsN, 0.3));\n}\n\n// The scroll that keeps the typing line at the foot of the panel and the\n// reading head on it.\nfunction want(P, lv, ls, typed) {\n  const L = LV[lv], n = P.n;\n  if (n >= P.T.length) return P.sc;\n  const tl = ls[n] + floor(min(typed, P.T[n].n - 1) / L.per);\n  let s = L.top + (tl + 1) * L.ch + 1 - H;\n  if (n > 0) {\n    const src = P.T[n - 1], i = src.rs ? src.rs[min(src.rs.length - 1, floor(P.r))] : 0;\n    s = min(s, L.top + (ls[n - 1] + floor(i / L.per)) * L.ch - 2);\n  }\n  return max(0, s);\n}\n\nfunction next(P) {\n  P.n++;\n  P.r = 0;\n  P.typed = 0;\n  if (P.n >= P.T.length) return void ((P.st = 3), (P.w = 3));\n  const t = P.T[P.n];\n  runs(P.T[P.n - 1]);\n  P.at = new Float32Array(t.n);\n  P.st = 0;\n  const lv = P.lv;\n  if (lv \u003c 3 && rowLines(P, P.n - 1, lv) + rowLines(P, P.n, lv) > LV[lv].fit) {\n    // Step down a print: every digit flies from its old place to its new one.\n    P.nl = lv + 1;\n    P.nls = lines(P.T, lv + 1);\n    P.nsc = want(P, lv + 1, P.nls, 0);\n    P.st = 2;\n    P.u = 0;\n  }\n}\n\nexport function setup(params) {\n  params.s = { si: 0, off: 0, sp: 2, hue: 0, dig: 0.06, col: new Float32Array(93 * 4 * 3), buf: new Float32Array(W * H * 3), clock: 0 };\n  build(params.s, 0);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.dig = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.off++;\n  const si = (round(cl(k[2], 1, 5)) - 1 + P.off) % SEEDS.length;\n  if (si !== P.si) build(P, si);\n  P.clock += d;\n  if (P.st === 0) {\n    const t = P.T[P.n], rn = t.n / 2;\n    P.r = min(rn, P.r + (d * rn) / dur(P, P.n));\n    // The count is spoken as the run lights up, the digit just after.\n    while (P.typed \u003c t.n && (P.typed >> 1) + (P.typed & 1 ? 0.55 : 0.12) \u003c= P.r) P.at[P.typed++] = P.clock;\n    if (P.typed >= t.n) (P.st = 1), (P.w = P.l0[P.n] \u003c BURST ? 0.03 : 0.35 * (2 / P.sp));\n  } else if (P.st === 1) {\n    P.w -= d;\n    if (P.w \u003c= 0) next(P);\n  } else if (P.st === 2) {\n    P.u += d / 1.6;\n    if (P.u >= 1) (P.lv = P.nl), (P.ls = P.nls), (P.sc = P.nsc), (P.st = 0);\n  } else if (P.st === 3) {\n    P.w -= d;\n    if (P.w \u003c= 0) (P.st = 4), (P.u = 0);\n  } else if (P.st === 4) {\n    P.u += d / 0.8;\n    if (P.u >= 1) build(P, P.si);\n  }\n  if (P.st !== 2) P.sc += (want(P, P.lv, P.ls, P.typed) - P.sc) * (1 - exp(-d * 10));\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = c[0] * 255;\n  out[o + 1] = c[1] * 255;\n  out[o + 2] = c[2] * 255;\n}\n\n// Colour of each element and digit: element hue by place in Conway's table,\n// from pink at hydrogen through violet and blue to green at uranium, so an\n// element and what it decays into are near in colour. The Digits knob mixes\n// toward a hue for each digit. Rows before the split into elements are pale.\nconst tmp = new Float32Array(6);\nfunction palette(P) {\n  const h0 = P.hue + 0.95, col = P.col, k = cl((P.dig - 0.3) / 0.4, 0, 1), g = k * k * (3 - 2 * k);\n  for (let e = 0; e \u003c= NONE; e++)\n    for (let dg = 1; dg \u003c= 3; dg++) {\n      if (e === NONE) hsv(h0 + 0.2, 0.3, 1, tmp, 0);\n      else hsv(h0 - 0.58 * (e / 91), 0.75, 1, tmp, 0);\n      hsv(h0 + [0, 0.56, 0.85, 0.19][dg], 0.8, 1, tmp, 3);\n      const o = (e * 4 + dg) * 3;\n      for (let c = 0; c \u003c 3; c++) col[o + c] = tmp[c] + (tmp[c + 3] - tmp[c]) * g;\n    }\n}\n\n// One digit onto the buffer in print lv at (x, y), the palette colour at o\n// scaled by v and whitened by w. Behind a numeral lies a strip of tint, open\n// after the last digit of an element; a bar at the end of an element is dimmer.\nfunction put(P, lv, x, y, dg, o, v, w, tint, end) {\n  const buf = P.buf, col = P.col;\n  const r = col[o] * v, g = col[o + 1] * v, b = col[o + 2] * v;\n  const R = r + (255 - r) * w, G = g + (255 - g) * w, B = b + (255 - b) * w;\n  if (lv === 0) {\n    const bits = FONT[dg], tw = end ? 3 : 4;\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const yy = y + gy;\n      if (yy \u003c 0 || yy >= H) continue;\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c tw; gx++) {\n        const xx = x + gx;\n        if (xx >= W) break;\n        const q = (yy * W + xx) * 3;\n        if (gx \u003c 3 && row & (4 >> gx)) (buf[q] = R), (buf[q + 1] = G), (buf[q + 2] = B);\n        else if (tint > 0) (buf[q] = col[o] * tint), (buf[q + 1] = col[o + 1] * tint), (buf[q + 2] = col[o + 2] * tint);\n      }\n    }\n    return;\n  }\n  const m = lv === 1 ? (end ? 0.6 : 1) : lv === 2 ? [0, 0.7, 0.86, 1][dg] : [0, 0.8, 0.9, 1][dg];\n  for (let yy = lv === 1 ? y + 3 - dg : y, y1 = lv === 1 ? y + 3 : y + LV[lv].ch; yy \u003c y1; yy++) {\n    if (yy \u003c 0 || yy >= H || x >= W) continue;\n    const q = (yy * W + x) * 3;\n    buf[q] = R * m;\n    buf[q + 1] = G * m;\n    buf[q + 2] = B * m;\n  }\n}\n\n// Brightness and whitening of digit i of row k: rows long read are dim, the\n// row being read dims behind the reading head, the run under the head lights\n// up, and a digit just typed flashes.\nconst OLD = 0.62, SRC = 0.95;\nfunction look(P, k, i, out) {\n  const n = P.n;\n  out[0] = OLD;\n  out[1] = 0;\n  if (k === n && P.st \u003c= 1) {\n    out[0] = 1;\n    out[1] = 0.85 * exp(-(P.clock - P.at[i]) / 0.22);\n  } else if (k === n - 1 && P.st \u003c= 1) {\n    const t = P.T[k], dr = P.r - t.ri[i];\n    if (dr \u003c 0) out[0] = SRC;\n    else {\n      const tau = dur(P, n) / (P.T[n].n / 2), s = dr \u003c 1 ? 0 : ((dr - 1) * tau) / 0.25;\n      out[1] = 0.8 * exp(-s);\n      out[0] = OLD + (SRC - OLD) * exp(-s * 0.3);\n    }\n  } else if (k === n - 1) out[0] = SRC;\n}\n\nconst lk = new Float32Array(2);\nfunction drawPage(P, lv, ls, sc) {\n  const L = LV[lv], top = L.top - round(sc), tintBase = (1 - P.dig) * 0.13;\n  const last = min(P.n, P.T.length - 1);\n  for (let k = 0; k \u003c= last; k++) {\n    const t = P.T[k], y0 = top + ls[k] * L.ch;\n    if (y0 >= H) break;\n    if (y0 + (ls[k + 1] - ls[k]) * L.ch \u003c 0) continue;\n    const cnt = k === P.n ? (P.st \u003c= 1 ? P.typed : 0) : t.n;\n    for (let i = 0; i \u003c cnt; i++) {\n      const y = y0 + floor(i / L.per) * L.ch;\n      if (y + L.ch \u003c= 0) {\n        i += L.per - 1 - (i % L.per);\n        continue;\n      }\n      if (y >= H) break;\n      look(P, k, i, lk);\n      const e = t.e[i], dg = t.d[i];\n      put(P, lv, (i % L.per) * L.cw, y, dg, (e * 4 + dg) * 3, lk[0], lk[1], e === NONE ? 0 : tintBase * (0.6 + 0.4 * lk[0]), t.end[i]);\n    }\n  }\n}\n\n// Stepping down a print: line by line from the top, each numeral drops to a\n// block and flies to its place in the finer print.\nfunction drawFlight(P) {\n  const A = LV[P.lv], B = LV[P.nl], u = P.u, tintBase = (1 - P.dig) * 0.13;\n  const ta = A.top - round(P.sc), tb = B.top - round(P.nsc);\n  for (let k = 0; k \u003c P.n; k++) {\n    const t = P.T[k];\n    for (let i = 0; i \u003c t.n; i++) {\n      const xa = (i % A.per) * A.cw, ya = ta + (P.ls[k] + floor(i / A.per)) * A.ch;\n      const xb = (i % B.per) * B.cw, yb = tb + (P.nls[k] + floor(i / B.per)) * B.ch;\n      if ((ya \u003c -6 || ya >= H) && (yb \u003c -6 || yb >= H)) continue;\n      const v = k === P.n - 1 ? SRC : OLD, e = t.e[i], dg = t.d[i], o = (e * 4 + dg) * 3;\n      const s = cl((u * 1.5 - 0.5 * cl(ya / H, 0, 1)) * 1.25, 0, 1);\n      if (s \u003c= 0) put(P, P.lv, xa, ya, dg, o, v, 0, e === NONE ? 0 : tintBase * (0.6 + 0.4 * v), t.end[i]);\n      else {\n        const f = s * s * (3 - 2 * s);\n        put(P, P.nl, round(xa + (xb - xa) * f), round(ya + (yb - ya) * f), dg, o, v, 0.5 * (1 - f), 0, t.end[i]);\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  palette(P);\n  const buf = P.buf;\n  buf.fill(0);\n  if (P.st === 2) drawFlight(P);\n  else drawPage(P, P.lv, P.ls, P.sc);\n  const fade = P.st === 4 ? 1 - P.u : 1;\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p] * fade, buf[p + 1] * fade, buf[p + 2] * fade);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Seed=1..5, Digits=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the elements run from pink at hydrogen through violet and blue to green at uranium, and the first seven rows of seed 1, which are not yet elements, are cream."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rows are read. At 2 a row of 78 digits takes three and a half seconds and a row of 5808 six and a half, and the page from seed 1 starts again after about a minute and a half; at 0.2 the reading takes ten times as long."},{"name":"Seed","min":1,"max":5,"about":"The first row: 1, then 3 (uranium), 312 (zinc), 311311 (barium) and 22 (hydrogen, the one row that reads back as itself, so the page fills with 22s)."},{"name":"Digits","min":0,"max":1,"about":"At 0 each Conway element has its own colour, with a dim strip of it behind its numerals; past the middle the colour says only which digit it is: 1 cyan, 2 violet, 3 gold."}],"start":[0,2,1,0.06],"measures":{"motion":1.7275,"detail":0.2216,"edges":0.866,"complexity":0.242,"coverage":0.6191,"colour":0.2962,"drift":0.1823},"knobResponse":[0.1154,0.1635,0.2082,0.064]},{"slug":"loose-powder","title":"Loose Powder","family":"cosmetic","round":29,"note":"꽃 무늬가 눌린 분홍 압축 파우더 위로 보이지 않는 퍼프가 그림자로만 내려와 자국을 내고, 들릴 때 하얀 가루 구름이 운모 반짝임과 함께 피어 위로 흘러가요. K3 을 올리면 무늬 비탈에 새틴 광이 돌고, 누르면 퍼프가 바로 내려와요.","idea":"A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.","buttons":"K1 tap brings the puff down now, once the last one has lifted.","code":"// ===== Patternflow pattern =====\n// Title:   Loose Powder\n// Family:  cosmetic\n// Idea:    A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the embossed relief of pressed face powder and the puff lifted from it\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1\n//\n// Knob 1: Hue. The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are.\n// Knob 2: Speed. How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower.\n// Knob 3: Shimmer. How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica.\n// Knob 4: Air. How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself.\n// Buttons: K1 tap brings the puff down now, once the last one has lifted.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, sqrt, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The powder ends at row FLOOR, where a gold line edges a white band: the\n// packaging, the only part of it on show. The medallion sits centred above.\nconst FLOOR = 115, MY = 57;\n\n// The emboss, as a height: an eight-petalled flower with a raised rim round\n// each petal, a ring at its heart, a wide ring cut off by the panel's sides\n// and fine rays beyond it. GRAIN is each LED's fixed bit of powder texture and\n// TW the seed of the mica that may sit there.\nconst E = new Float32Array(N), GRAIN = new Float32Array(N), TW = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = x + 0.5 - 32, dy = y + 0.5 - MY, r = hypot(dx, dy), a = atan2(dy, dx);\n    const pet = 21 + 6 * cos(a * 8);\n    let h = cl((pet - r) / 3, 0, 1) * 0.6;\n    h += 0.4 * exp(-(((r - pet) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 8.5) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 42) / 1.3) ** 2));\n    if (r > 44) h += 0.25 * (0.5 + 0.5 * cos(a * 48));\n    const i = y * W + x;\n    E[i] = h;\n    GRAIN[i] = (hash(i) - 0.5) * 0.07;\n    TW[i] = hash(i + 77777);\n  }\n\n// The LEDs that could hold mica, in the order Shimmer turns them on.\nconst MICA = Int32Array.from({ length: FLOOR * W }, (_, i) => i)\n  .filter((i) => TW[i] \u003c 0.02)\n  .sort((a, b) => TW[a] - TW[b]);\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), z: F(MAXP), vx: F(MAXP), vy: F(MAXP), vz: F(MAXP), ph: F(MAXP), om: F(MAXP), mica: new Uint8Array(MAXP),\n    n: 0, dent: F(N), wear: F(N).fill(1), dust: F(N), prof: F(N), hm: F(N), den: F(N), sh: F(N), tmp: F(N), buf: F(N * 3),\n    T: 0, u: 99, wisp: 0, px: 32, py: 64, pz: 40, started: false, hue: 0, shim: 1, air: 0.06, az: 0, col: F(6),\n  };\n}\n\n// One grain of powder into the air at height z. When the air is full, it\n// takes the place of a grain already there.\nfunction emit(S, x, y, z, vx, vy, vz) {\n  let i = S.n;\n  if (i >= MAXP) i = floor(Math.random() * MAXP);\n  else S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.z[i] = z;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  S.vz[i] = vz;\n  // A mica flake turns at its own rate and flashes once a turn.\n  S.mica[i] = Math.random() \u003c 0.04 * S.shim ? 1 : 0;\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.5 + 3.5 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n}\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.z[i] = S.z[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.vz[i] = S.vz[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.mica[i] = S.mica[j];\n}\n\n// The puff's round, in seconds at Speed 2: it comes down, presses, lifts, and\n// the cloud has the rest. R is its radius in LEDs, ZTOP how high it waits.\nconst DOWN = 1.2, PRESS = 0.8, LIFT = 0.7, ROUND = 7, R = 16, ZTOP = 34;\n\n// A new round: the puff picks a spot, and the dent it will press is drawn up.\nfunction start(S) {\n  S.u = 0;\n  S.px = 18 + Math.random() * 28;\n  S.py = 22 + Math.random() * (FLOOR - 46);\n  const p = S.prof;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = hypot(x + 0.5 - S.px, y + 0.5 - S.py);\n      p[y * W + x] = 1 - sstep(R * 0.3, R, r);\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.az = 0.32 * sin(S.T * 0.21) + 0.12 * sin(S.T * 0.53 + 1);\n  if (S.u > ROUND) start(S);\n  const u0 = S.u;\n  S.u += st;\n  const u = S.u;\n  // Height of the puff above the powder, and how deep it is pressed.\n  if (u \u003c DOWN) S.pz = ZTOP * (1 - sstep(0, DOWN, u));\n  else if (u \u003c DOWN + PRESS) S.pz = 0;\n  else S.pz = ZTOP * sstep(DOWN + PRESS, DOWN + PRESS + LIFT * 1.6, u);\n  const press = u \u003c DOWN ? 0 : u \u003c DOWN + PRESS ? sstep(DOWN, DOWN + PRESS * 0.6, u) : 1;\n  // Pressing dents the powder and flattens the emboss under the puff. Both\n  // come back slowly as the cloud dusts the surface, so the round can repeat.\n  const dent = S.dent, wear = S.wear, dust = S.dust, prof = S.prof;\n  const fd = exp(-st / 7), fw = st / 9, fu = exp(-st / 5);\n  for (let i = 0; i \u003c N; i++) {\n    dent[i] *= fd;\n    wear[i] += (1 - wear[i]) * fw;\n    dust[i] *= fu;\n    if (press > 0 && u \u003c DOWN + PRESS + 0.05) {\n      const p = prof[i] * press;\n      if (p > dent[i]) dent[i] = p;\n      const w = 1 - 0.6 * p;\n      if (w \u003c wear[i]) wear[i] = w;\n    }\n  }\n  // Squeezed out at the rim as it presses in, lifted out of the dent as it rises.\n  if (u0 \u003c DOWN + 0.1 && u >= DOWN + 0.1)\n    for (let k = 0; k \u003c 420; k++) {\n      const a = Math.random() * 2 * PI, s = 10 + 22 * Math.random();\n      emit(S, S.px + cos(a) * R * 0.9, S.py + sin(a) * R * 0.9, 0.5 + Math.random() * 2, cos(a) * s, sin(a) * s, 4 + 8 * Math.random());\n    }\n  if (u > DOWN + PRESS && u \u003c DOWN + PRESS + LIFT) {\n    const n = floor((850 * st) / LIFT + Math.random());\n    for (let k = 0; k \u003c n; k++) {\n      const a = Math.random() * 2 * PI, r = R * sqrt(Math.random()) * 0.9, s = 3 + 9 * Math.random();\n      emit(S, S.px + cos(a) * r, S.py + sin(a) * r, Math.random() * 3, cos(a) * s, sin(a) * s, 8 + 12 * Math.random());\n    }\n  }\n  // The air: slow eddies and a drift up the panel, both stronger with Air.\n  // A strong draught lifts wisps of loose powder off the surface by itself.\n  const A = S.air, T = S.T, kd = min(1, 1.2 * st), kz = min(1, 0.9 * st);\n  S.wisp += st * 160 * A * A;\n  while (S.wisp >= 1) {\n    S.wisp -= 1;\n    emit(S, Math.random() * W, 10 + Math.random() * (FLOOR - 10), 0.2, 0, 0, 2 + 4 * Math.random());\n  }\n  for (let i = S.n - 1; i >= 0; i--) {\n    const x = S.x[i], y = S.y[i];\n    const ex = (1.5 + 6 * A) * sin(y * 0.06 + T * 0.4) + (1 + 3 * A) * sin(y * 0.13 - T * 0.3 + x * 0.05);\n    const ey = -(2 + 16 * A) + (1.5 + 4 * A) * sin(x * 0.09 - T * 0.33);\n    S.vx[i] += (ex - S.vx[i]) * kd;\n    S.vy[i] += (ey - S.vy[i]) * kd;\n    S.vz[i] += (-1.3 - S.vz[i]) * kz;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + S.vy[i] * st;\n    S.z[i] += S.vz[i] * st;\n    S.ph[i] += S.om[i] * st;\n    const nx = S.x[i], ny = S.y[i];\n    if (nx \u003c -4 || nx > W + 4 || ny \u003c -6 || ny > FLOOR + 4) {\n      kill(S, i);\n      continue;\n    }\n    if (S.z[i] \u003c= 0) {\n      // Settling: it dusts the powder where it lands.\n      const p = floor(ny) * W + floor(nx);\n      if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c FLOOR) dust[p] = min(1.5, dust[p] + 0.05);\n      kill(S, i);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.shim = cl(k[2], 1, 5);\n  S.air = cl(k[3], 0, 1);\n  // Open with the last round's cloud still in the air and the next puff a\n  // second and a half away.\n  if (!S.started) {\n    S.started = true;\n    start(S);\n    for (let i = 0; i \u003c 162; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.u > DOWN + PRESS + LIFT) start(S);\n  step(S, d * rate);\n}\n\n// Spreads a splat buffer over its neighbours, for a soft cloud.\nfunction blur(a, t, passes) {\n  for (let pass = 0; pass \u003c passes; pass++) {\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        t[i] = (a[i] * 2 + (x > 0 ? a[i - 1] : a[i]) + (x \u003c W - 1 ? a[i + 1] : a[i])) * 0.25;\n      }\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        a[i] = (t[i] * 2 + (y > 0 ? t[i - W] : t[i]) + (y \u003c H - 1 ? t[i + W] : t[i])) * 0.25;\n      }\n  }\n}\nfunction splat(a, x, y, w) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i, py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      a[py * W + px] += w * (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n    }\n}\n\n// The four LEDs beside one, as offsets into the colour buffer.\nconst NB = [-3, 3, -W * 3, W * 3];\n\n// The light comes low from the upper left, so the relief stands out, and sways\n// a little: the sheen and the glints move with it.\nconst LA = atan2(-0.65, -0.55), LZ = 0.5;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, hm = S.hm, den = S.den, sh = S.sh, col = S.col;\n  hsv(S.hue + 0.95, 0.5, 205, col, 0);\n  hsv(S.hue + 0.95, 0.07, 255, col, 3);\n  const la = LA + S.az, lx = cos(la), ly = sin(la);\n  const hl = hypot(lx * 0.894, ly * 0.894, 1.447), hx = (lx * 0.894) / hl, hy = (ly * 0.894) / hl, hz = 1.447 / hl;\n  const sheen = 0.1 + 0.45 * (S.shim - 1);\n  // The height of the surface, then the cloud's density and its shadow,\n  // thrown away from the light by each grain's height.\n  for (let i = 0; i \u003c N; i++) hm[i] = E[i] * S.wear[i] - 0.9 * S.dent[i] + 0.25 * S.dust[i];\n  den.fill(0);\n  sh.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const z = S.z[i];\n    splat(den, S.x[i], S.y[i], 0.55);\n    splat(sh, S.x[i] - lx * z * 0.8, S.y[i] - ly * z * 0.8, 0.35);\n  }\n  blur(den, S.tmp, 2);\n  blur(sh, S.tmp, 1);\n  // The puff's shadow, cast away from the light, softer the higher it is.\n  const sx = S.px - lx * S.pz * 0.8, sy = S.py - ly * S.pz * 0.8, soft = 1.5 + S.pz * 0.3, dark = 0.36 - 0.2 * (S.pz / ZTOP);\n  const sr = R * (1 + S.pz * 0.01);\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3;\n      const gx = (hm[y * W + min(W - 1, x + 1)] - hm[y * W + max(0, x - 1)]) * 1.6;\n      const gy = (hm[min(FLOOR - 1, y + 1) * W + x] - hm[max(0, y - 1) * W + x]) * 1.6;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1), lam = max(0, (-gx * lx - gy * ly + LZ) * inv) / LZ;\n      // Shimmer: a satin sheen on the slopes that face halfway between the\n      // light and the eye.\n      let sp = max(0, (-gx * hx - gy * hy + hz) * inv);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp = sp * sp * sp * sheen;\n      let v = (0.42 + 0.5 * lam) * (1 + GRAIN[i]);\n      // Fresh loose powder on top is paler; the pressed patch a touch deeper.\n      const du = min(1, S.dust[i]) * 0.3, pr = S.dent[i] * 0.1;\n      v *= 1 - pr;\n      const c = sh[i] * 1.4;\n      v *= 1 - (0.16 * c) / (1 + c);\n      const ddx = x + 0.5 - sx, ddy = y + 0.5 - sy, dd = ddx * ddx + ddy * ddy;\n      if (S.pz \u003c ZTOP * 0.99 && dd \u003c (sr + soft) ** 2) v *= 1 - dark * (1 - sstep(sr - soft, sr + soft, sqrt(dd)));\n      let r = col[0] * v + 250 * sp, g = col[1] * v + 240 * sp, b = col[2] * v + 225 * sp;\n      r += (col[3] * v - r) * du;\n      g += (col[4] * v - g) * du;\n      b += (col[5] * v - b) * du;\n      // The cloud in the air, lit and pale.\n      const e = den[i] * 1.8, a = min(0.9, e / (1 + e));\n      buf[q] = r + (col[3] - r) * a;\n      buf[q + 1] = g + (col[4] - g) * a;\n      buf[q + 2] = b + (col[5] - b) * a;\n    }\n  // The white band, and the gold line along its top with a highlight that\n  // slides along it as the light sways.\n  {\n    const gx = 32 + 110 * S.az;\n    for (let y = FLOOR; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const q = (y * W + x) * 3, gold = y === FLOOR ? 1 : y === FLOOR + 1 ? 0.35 : 0;\n        const hl = 0.8 + 0.45 * exp(-((x - gx) ** 2) / 50);\n        buf[q] = 222 + (240 * hl - 222) * gold;\n        buf[q + 1] = 216 + (178 * hl - 216) * gold;\n        buf[q + 2] = 208 + (70 * hl - 208) * gold;\n      }\n  }\n  // Mica pressed into the powder: a few LEDs, more with Shimmer, each glinting\n  // when the swaying light passes the angle of its face.\n  const lim = 0.004 * S.shim;\n  for (let k = 0; k \u003c MICA.length && TW[MICA[k]] \u003c lim; k++) {\n    const i = MICA[k];\n    const g = exp((cos(TW[i] * 1500 + S.az * 7) - 1) / 0.03) * (1 - min(1, S.dent[i]));\n    if (g \u003c 0.02) continue;\n    const q = i * 3, v = 230 * g;\n    buf[q] += v;\n    buf[q + 1] += v * 0.92;\n    buf[q + 2] += v * 0.8;\n  }\n  // Mica in the cloud: each flake turns and flashes as its face meets the light.\n  for (let i = 0; i \u003c S.n; i++) {\n    if (!S.mica[i]) continue;\n    const f = exp((cos(S.ph[i]) - 1) / 0.05), v = 40 + 260 * f;\n    const x = floor(S.x[i]), y = floor(S.y[i]);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= FLOOR - 1) continue;\n    const q = (y * W + x) * 3;\n    buf[q] += v;\n    buf[q + 1] += v * 0.95;\n    buf[q + 2] += v * 0.85;\n    // A flash spills a little onto the LEDs beside it, or it looks pinpricked.\n    if (f > 0.3)\n      for (const o of NB) {\n        buf[q + o] += v * 0.25;\n        buf[q + o + 1] += v * 0.24;\n        buf[q + o + 2] += v * 0.21;\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-loose-powder","type":"code","name":"loose-powder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Loose Powder\n// Family:  cosmetic\n// Idea:    A pressed powder embossed with a flower medallion fills the panel under a low light; an unseen puff, shown only by its shadow, comes down and presses a soft dent into it, and as it lifts a pale cloud of powder rises with mica glinting in it, drifts up the panel on slow air and settles back as a dusting, over a white band edged with one gold line.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the embossed relief of pressed face powder and the puff lifted from it\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1\n//\n// Knob 1: Hue. The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are.\n// Knob 2: Speed. How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower.\n// Knob 3: Shimmer. How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica.\n// Knob 4: Air. How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself.\n// Buttons: K1 tap brings the puff down now, once the last one has lifted.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 2600;\nconst { min, max, floor, sin, cos, exp, sqrt, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The powder ends at row FLOOR, where a gold line edges a white band: the\n// packaging, the only part of it on show. The medallion sits centred above.\nconst FLOOR = 115, MY = 57;\n\n// The emboss, as a height: an eight-petalled flower with a raised rim round\n// each petal, a ring at its heart, a wide ring cut off by the panel's sides\n// and fine rays beyond it. GRAIN is each LED's fixed bit of powder texture and\n// TW the seed of the mica that may sit there.\nconst E = new Float32Array(N), GRAIN = new Float32Array(N), TW = new Float32Array(N);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = x + 0.5 - 32, dy = y + 0.5 - MY, r = hypot(dx, dy), a = atan2(dy, dx);\n    const pet = 21 + 6 * cos(a * 8);\n    let h = cl((pet - r) / 3, 0, 1) * 0.6;\n    h += 0.4 * exp(-(((r - pet) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 8.5) / 1.2) ** 2));\n    h += 0.5 * exp(-(((r - 42) / 1.3) ** 2));\n    if (r > 44) h += 0.25 * (0.5 + 0.5 * cos(a * 48));\n    const i = y * W + x;\n    E[i] = h;\n    GRAIN[i] = (hash(i) - 0.5) * 0.07;\n    TW[i] = hash(i + 77777);\n  }\n\n// The LEDs that could hold mica, in the order Shimmer turns them on.\nconst MICA = Int32Array.from({ length: FLOOR * W }, (_, i) => i)\n  .filter((i) => TW[i] \u003c 0.02)\n  .sort((a, b) => TW[a] - TW[b]);\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), z: F(MAXP), vx: F(MAXP), vy: F(MAXP), vz: F(MAXP), ph: F(MAXP), om: F(MAXP), mica: new Uint8Array(MAXP),\n    n: 0, dent: F(N), wear: F(N).fill(1), dust: F(N), prof: F(N), hm: F(N), den: F(N), sh: F(N), tmp: F(N), buf: F(N * 3),\n    T: 0, u: 99, wisp: 0, px: 32, py: 64, pz: 40, started: false, hue: 0, shim: 1, air: 0.06, az: 0, col: F(6),\n  };\n}\n\n// One grain of powder into the air at height z. When the air is full, it\n// takes the place of a grain already there.\nfunction emit(S, x, y, z, vx, vy, vz) {\n  let i = S.n;\n  if (i >= MAXP) i = floor(Math.random() * MAXP);\n  else S.n++;\n  S.x[i] = x;\n  S.y[i] = y;\n  S.z[i] = z;\n  S.vx[i] = vx;\n  S.vy[i] = vy;\n  S.vz[i] = vz;\n  // A mica flake turns at its own rate and flashes once a turn.\n  S.mica[i] = Math.random() \u003c 0.04 * S.shim ? 1 : 0;\n  S.ph[i] = Math.random() * 2 * PI;\n  S.om[i] = (1.5 + 3.5 * Math.random()) * (Math.random() \u003c 0.5 ? -1 : 1);\n}\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.z[i] = S.z[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.vz[i] = S.vz[j];\n  S.ph[i] = S.ph[j];\n  S.om[i] = S.om[j];\n  S.mica[i] = S.mica[j];\n}\n\n// The puff's round, in seconds at Speed 2: it comes down, presses, lifts, and\n// the cloud has the rest. R is its radius in LEDs, ZTOP how high it waits.\nconst DOWN = 1.2, PRESS = 0.8, LIFT = 0.7, ROUND = 7, R = 16, ZTOP = 34;\n\n// A new round: the puff picks a spot, and the dent it will press is drawn up.\nfunction start(S) {\n  S.u = 0;\n  S.px = 18 + Math.random() * 28;\n  S.py = 22 + Math.random() * (FLOOR - 46);\n  const p = S.prof;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = hypot(x + 0.5 - S.px, y + 0.5 - S.py);\n      p[y * W + x] = 1 - sstep(R * 0.3, R, r);\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  S.az = 0.32 * sin(S.T * 0.21) + 0.12 * sin(S.T * 0.53 + 1);\n  if (S.u > ROUND) start(S);\n  const u0 = S.u;\n  S.u += st;\n  const u = S.u;\n  // Height of the puff above the powder, and how deep it is pressed.\n  if (u \u003c DOWN) S.pz = ZTOP * (1 - sstep(0, DOWN, u));\n  else if (u \u003c DOWN + PRESS) S.pz = 0;\n  else S.pz = ZTOP * sstep(DOWN + PRESS, DOWN + PRESS + LIFT * 1.6, u);\n  const press = u \u003c DOWN ? 0 : u \u003c DOWN + PRESS ? sstep(DOWN, DOWN + PRESS * 0.6, u) : 1;\n  // Pressing dents the powder and flattens the emboss under the puff. Both\n  // come back slowly as the cloud dusts the surface, so the round can repeat.\n  const dent = S.dent, wear = S.wear, dust = S.dust, prof = S.prof;\n  const fd = exp(-st / 7), fw = st / 9, fu = exp(-st / 5);\n  for (let i = 0; i \u003c N; i++) {\n    dent[i] *= fd;\n    wear[i] += (1 - wear[i]) * fw;\n    dust[i] *= fu;\n    if (press > 0 && u \u003c DOWN + PRESS + 0.05) {\n      const p = prof[i] * press;\n      if (p > dent[i]) dent[i] = p;\n      const w = 1 - 0.6 * p;\n      if (w \u003c wear[i]) wear[i] = w;\n    }\n  }\n  // Squeezed out at the rim as it presses in, lifted out of the dent as it rises.\n  if (u0 \u003c DOWN + 0.1 && u >= DOWN + 0.1)\n    for (let k = 0; k \u003c 420; k++) {\n      const a = Math.random() * 2 * PI, s = 10 + 22 * Math.random();\n      emit(S, S.px + cos(a) * R * 0.9, S.py + sin(a) * R * 0.9, 0.5 + Math.random() * 2, cos(a) * s, sin(a) * s, 4 + 8 * Math.random());\n    }\n  if (u > DOWN + PRESS && u \u003c DOWN + PRESS + LIFT) {\n    const n = floor((850 * st) / LIFT + Math.random());\n    for (let k = 0; k \u003c n; k++) {\n      const a = Math.random() * 2 * PI, r = R * sqrt(Math.random()) * 0.9, s = 3 + 9 * Math.random();\n      emit(S, S.px + cos(a) * r, S.py + sin(a) * r, Math.random() * 3, cos(a) * s, sin(a) * s, 8 + 12 * Math.random());\n    }\n  }\n  // The air: slow eddies and a drift up the panel, both stronger with Air.\n  // A strong draught lifts wisps of loose powder off the surface by itself.\n  const A = S.air, T = S.T, kd = min(1, 1.2 * st), kz = min(1, 0.9 * st);\n  S.wisp += st * 160 * A * A;\n  while (S.wisp >= 1) {\n    S.wisp -= 1;\n    emit(S, Math.random() * W, 10 + Math.random() * (FLOOR - 10), 0.2, 0, 0, 2 + 4 * Math.random());\n  }\n  for (let i = S.n - 1; i >= 0; i--) {\n    const x = S.x[i], y = S.y[i];\n    const ex = (1.5 + 6 * A) * sin(y * 0.06 + T * 0.4) + (1 + 3 * A) * sin(y * 0.13 - T * 0.3 + x * 0.05);\n    const ey = -(2 + 16 * A) + (1.5 + 4 * A) * sin(x * 0.09 - T * 0.33);\n    S.vx[i] += (ex - S.vx[i]) * kd;\n    S.vy[i] += (ey - S.vy[i]) * kd;\n    S.vz[i] += (-1.3 - S.vz[i]) * kz;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + S.vy[i] * st;\n    S.z[i] += S.vz[i] * st;\n    S.ph[i] += S.om[i] * st;\n    const nx = S.x[i], ny = S.y[i];\n    if (nx \u003c -4 || nx > W + 4 || ny \u003c -6 || ny > FLOOR + 4) {\n      kill(S, i);\n      continue;\n    }\n    if (S.z[i] \u003c= 0) {\n      // Settling: it dusts the powder where it lands.\n      const p = floor(ny) * W + floor(nx);\n      if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c FLOOR) dust[p] = min(1.5, dust[p] + 0.05);\n      kill(S, i);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0];\n  S.shim = cl(k[2], 1, 5);\n  S.air = cl(k[3], 0, 1);\n  // Open with the last round's cloud still in the air and the next puff a\n  // second and a half away.\n  if (!S.started) {\n    S.started = true;\n    start(S);\n    for (let i = 0; i \u003c 162; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.u > DOWN + PRESS + LIFT) start(S);\n  step(S, d * rate);\n}\n\n// Spreads a splat buffer over its neighbours, for a soft cloud.\nfunction blur(a, t, passes) {\n  for (let pass = 0; pass \u003c passes; pass++) {\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        t[i] = (a[i] * 2 + (x > 0 ? a[i - 1] : a[i]) + (x \u003c W - 1 ? a[i + 1] : a[i])) * 0.25;\n      }\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = y * W + x;\n        a[i] = (t[i] * 2 + (y > 0 ? t[i - W] : t[i]) + (y \u003c H - 1 ? t[i + W] : t[i])) * 0.25;\n      }\n  }\n}\nfunction splat(a, x, y, w) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i, py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      a[py * W + px] += w * (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n    }\n}\n\n// The four LEDs beside one, as offsets into the colour buffer.\nconst NB = [-3, 3, -W * 3, W * 3];\n\n// The light comes low from the upper left, so the relief stands out, and sways\n// a little: the sheen and the glints move with it.\nconst LA = atan2(-0.65, -0.55), LZ = 0.5;\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const buf = S.buf, hm = S.hm, den = S.den, sh = S.sh, col = S.col;\n  hsv(S.hue + 0.95, 0.5, 205, col, 0);\n  hsv(S.hue + 0.95, 0.07, 255, col, 3);\n  const la = LA + S.az, lx = cos(la), ly = sin(la);\n  const hl = hypot(lx * 0.894, ly * 0.894, 1.447), hx = (lx * 0.894) / hl, hy = (ly * 0.894) / hl, hz = 1.447 / hl;\n  const sheen = 0.1 + 0.45 * (S.shim - 1);\n  // The height of the surface, then the cloud's density and its shadow,\n  // thrown away from the light by each grain's height.\n  for (let i = 0; i \u003c N; i++) hm[i] = E[i] * S.wear[i] - 0.9 * S.dent[i] + 0.25 * S.dust[i];\n  den.fill(0);\n  sh.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const z = S.z[i];\n    splat(den, S.x[i], S.y[i], 0.55);\n    splat(sh, S.x[i] - lx * z * 0.8, S.y[i] - ly * z * 0.8, 0.35);\n  }\n  blur(den, S.tmp, 2);\n  blur(sh, S.tmp, 1);\n  // The puff's shadow, cast away from the light, softer the higher it is.\n  const sx = S.px - lx * S.pz * 0.8, sy = S.py - ly * S.pz * 0.8, soft = 1.5 + S.pz * 0.3, dark = 0.36 - 0.2 * (S.pz / ZTOP);\n  const sr = R * (1 + S.pz * 0.01);\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3;\n      const gx = (hm[y * W + min(W - 1, x + 1)] - hm[y * W + max(0, x - 1)]) * 1.6;\n      const gy = (hm[min(FLOOR - 1, y + 1) * W + x] - hm[max(0, y - 1) * W + x]) * 1.6;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1), lam = max(0, (-gx * lx - gy * ly + LZ) * inv) / LZ;\n      // Shimmer: a satin sheen on the slopes that face halfway between the\n      // light and the eye.\n      let sp = max(0, (-gx * hx - gy * hy + hz) * inv);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp = sp * sp * sp * sheen;\n      let v = (0.42 + 0.5 * lam) * (1 + GRAIN[i]);\n      // Fresh loose powder on top is paler; the pressed patch a touch deeper.\n      const du = min(1, S.dust[i]) * 0.3, pr = S.dent[i] * 0.1;\n      v *= 1 - pr;\n      const c = sh[i] * 1.4;\n      v *= 1 - (0.16 * c) / (1 + c);\n      const ddx = x + 0.5 - sx, ddy = y + 0.5 - sy, dd = ddx * ddx + ddy * ddy;\n      if (S.pz \u003c ZTOP * 0.99 && dd \u003c (sr + soft) ** 2) v *= 1 - dark * (1 - sstep(sr - soft, sr + soft, sqrt(dd)));\n      let r = col[0] * v + 250 * sp, g = col[1] * v + 240 * sp, b = col[2] * v + 225 * sp;\n      r += (col[3] * v - r) * du;\n      g += (col[4] * v - g) * du;\n      b += (col[5] * v - b) * du;\n      // The cloud in the air, lit and pale.\n      const e = den[i] * 1.8, a = min(0.9, e / (1 + e));\n      buf[q] = r + (col[3] - r) * a;\n      buf[q + 1] = g + (col[4] - g) * a;\n      buf[q + 2] = b + (col[5] - b) * a;\n    }\n  // The white band, and the gold line along its top with a highlight that\n  // slides along it as the light sways.\n  {\n    const gx = 32 + 110 * S.az;\n    for (let y = FLOOR; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const q = (y * W + x) * 3, gold = y === FLOOR ? 1 : y === FLOOR + 1 ? 0.35 : 0;\n        const hl = 0.8 + 0.45 * exp(-((x - gx) ** 2) / 50);\n        buf[q] = 222 + (240 * hl - 222) * gold;\n        buf[q + 1] = 216 + (178 * hl - 216) * gold;\n        buf[q + 2] = 208 + (70 * hl - 208) * gold;\n      }\n  }\n  // Mica pressed into the powder: a few LEDs, more with Shimmer, each glinting\n  // when the swaying light passes the angle of its face.\n  const lim = 0.004 * S.shim;\n  for (let k = 0; k \u003c MICA.length && TW[MICA[k]] \u003c lim; k++) {\n    const i = MICA[k];\n    const g = exp((cos(TW[i] * 1500 + S.az * 7) - 1) / 0.03) * (1 - min(1, S.dent[i]));\n    if (g \u003c 0.02) continue;\n    const q = i * 3, v = 230 * g;\n    buf[q] += v;\n    buf[q + 1] += v * 0.92;\n    buf[q + 2] += v * 0.8;\n  }\n  // Mica in the cloud: each flake turns and flashes as its face meets the light.\n  for (let i = 0; i \u003c S.n; i++) {\n    if (!S.mica[i]) continue;\n    const f = exp((cos(S.ph[i]) - 1) / 0.05), v = 40 + 260 * f;\n    const x = floor(S.x[i]), y = floor(S.y[i]);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= FLOOR - 1) continue;\n    const q = (y * W + x) * 3;\n    buf[q] += v;\n    buf[q + 1] += v * 0.95;\n    buf[q + 2] += v * 0.85;\n    // A flash spills a little onto the LEDs beside it, or it looks pinpricked.\n    if (f > 0.3)\n      for (const o of NB) {\n        buf[q + o] += v * 0.25;\n        buf[q + o + 1] += v * 0.24;\n        buf[q + o + 2] += v * 0.21;\n      }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shimmer=1..5, Air=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the powder, all the way round the wheel from rose at 0; the cloud stays a pale tint of it, and the white band and the gold line stay as they are."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the puff and the air move: at 2 the puff comes down every seven seconds and its cloud hangs for about ten; at 0.2 everything runs ten times slower."},{"name":"Shimmer","min":1,"max":5,"about":"How much mica is in the powder: at 1 it is matte with a few glints in the cloud; turned up, a satin sheen runs along the slopes of the relief that face the light, the surface glints here and there and the cloud carries up to five times the mica."},{"name":"Air","min":0,"max":1,"about":"How far the cloud drifts: at 0 it creeps a few rows up the panel and settles near the dent; at 1 a draught carries it off the top in a few seconds and lifts wisps of loose powder off the surface by itself."}],"start":[0,2,1,0.06],"measures":{"motion":0.0756,"detail":0.0494,"edges":0.1592,"complexity":2.3434,"coverage":1,"colour":0.2039,"drift":0.0525},"knobResponse":[0.2504,0.0583,0.0484,0.0614]},{"slug":"lotion-ribbon","title":"Lotion Ribbon","family":"cosmetic","round":36,"note":"위에서 굵은 로션 줄기가 쏟아지며 가늘어지고, 닿는 자리에서 꿀처럼 똬리를 틀어 접힌 더미를 쌓아요. K3 은 로션의 무게라서 묽은 세럼은 작은 고리로 빨리 감기고 바디 버터는 25 LED 너비의 고리로 천천히 접혀요. K1 을 누르면 줄기가 끊기고, 더미가 가라앉은 뒤 새 줄기가 내려와요.","idea":"A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.","buttons":"K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.","code":"// ===== Patternflow pattern =====\n// Title:   Lotion Ribbon\n// Family:  cosmetic\n// Idea:    A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after the slow pour of body lotion in skincare films; the coiling follows liquid rope coiling (Neil Ribe, 2004) and the heap spreads as a viscous gravity current (Herbert Huppert, 1982)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Thick. How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up.\n// Knob 4: Gloss. At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim.\n// Buttons: K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.\n\nconst W = 64, H = 128, N = W * H;\n// The counter under the heap, one cell an LED: x 0..63, z from -28 at the\n// back to 36 at the front, below the bottom edge.\nconst GX = 64, GZ = 64, ZC = 28, NG = GX * GZ;\n// The heap's bulk flows on cells two LEDs square; the fresh folds lie on the\n// LED cells above it.\nconst BX = GX / 2, BZ = GZ / 2, NB = BX * BZ;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, pow, round, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[0] = r;\n  out[1] = g;\n  out[2] = b;\n}\n\n// The camera looks down at the counter from EL radians above level. A point\n// x across, Y up and z toward the eye lands on screen row FY - Y*CE + z*SE,\n// and lies Y*SE + z*CE toward the eye.\nconst EL = 0.5, CE = cos(EL), SE = sin(EL);\nconst FY = 113, AX = 32;\n// The spout is just above the top edge.\nconst YN = (FY + 4) / CE;\n// Gravity and the speed the lotion leaves the spout, in LEDs and seconds at\n// Speed 2, and the spout's radius at Thick 0.\nconst G = 8, V0 = 14, A0 = 5.6;\n// Coiling rate: the gravitational regime of liquid rope coiling,\n// Omega = CW * (g Q^3 / (nu a1^8))^(1/4), Q the flux, nu the viscosity and a1\n// the rope's radius where it lands.\nconst CW = 0.144;\n// The coil bends out from the stream's axis over HC coil radii of height,\n// winding a quarter turn ahead of the point where it lands.\nconst HC = 1.5;\n// Slump: the heap flows as a thin viscous layer, dh/dt = div(K h^3 grad h),\n// K = KS / nu. A fresh loop holds its fold TF * nu^(1/4) seconds before it\n// melts into the heap.\nconst KS = 3e-2, TF = 3;\n// The coil does not land on one circle: its centre wanders up to EC coil\n// radii off the axis, round and back about every PW seconds, so the loops\n// cross and fold over each other.\nconst EC = 0.7, PW = 5.3;\n// One pour lasts POUR seconds; after the tail lands the heap settles SETTLE\n// seconds, then sinks SINK LEDs a second while the next pour falls.\nconst POUR = 16, SETTLE = 0.8, SINK = 5;\n// Little swellings ride down the stream FB times a second, BA of the radius.\nconst FB = 1.1, BA = 0.05;\n// Opening hue: pink, not red.\nconst H0 = 0.9;\n\n// Light from the upper left and a little in front, and the eye, in world\n// axes and in the camera's (x right, y up the screen, z toward the eye).\nconst nrm = (v) => {\n  const l = Math.hypot(v[0], v[1], v[2]);\n  return [v[0] / l, v[1] / l, v[2] / l];\n};\nconst LW = nrm([-0.5, 0.75, 0.45]);\nconst VW = [0, SE, CE];\nconst HW = nrm([LW[0] + VW[0], LW[1] + VW[1], LW[2] + VW[2]]);\nconst toCam = (v) => [v[0], v[1] * CE - v[2] * SE, v[1] * SE + v[2] * CE];\nconst LC = toCam(LW), HCm = toCam(HW);\n// A tall strip light to the left of the eye: on the falling rope it draws a\n// highlight down its whole length.\nconst HS = nrm([-0.3, 0, 1]);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, thick: 0, gloss: 0, warm: false,\n    t: 0, phi: 0, tPour: 0,\n    // top: height of the rope's upper end (YN while the spout runs); tip: its\n    // lower end while a fresh pour is still falling, or -1 once it has landed.\n    top: YN, topV: 0, tip: -1, tipV: 0, cut: false, gone: false, wait: 0, sinking: false,\n    h: new Float32Array(NG), b: new Float32Array(NB), f: new Float32Array(NG), dh: new Float32Array(NB),\n    blur: new Float32Array(NG), tmp: new Float32Array(NG), hs: new Float32Array(NG), cc: new Float32Array(NG * 3), fl: new Float32Array(NG),\n    hdep: new Float32Array(N), col: new Float32Array(N * 3),\n    rdep: new Float32Array(N), rcov: new Float32Array(N), rcol: new Float32Array(N * 3),\n    bg: new Float32Array(N),\n    lit: [0, 0, 0], dark: [0, 0, 0], wall: [0, 0, 0], pearl: [0, 0, 0], c: [0, 0, 0], up: [0, 0, 0],\n    spec: new Float32Array(SPN), specKey: null,\n  };\n  const S = params.s;\n  // A soft glow on the wall behind the stream, falling off to near black in\n  // the top corners.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = (x + 0.5 - AX) / 26, dy = (y - 78) / 70;\n      S.bg[y * W + x] = 0.12 + 0.88 * exp(-dx * dx - dy * dy);\n    }\n}\n\n// The lotion's make-up at the current Thick.\nfunction lotion(S) {\n  const nu = pow(4, S.thick), a0 = A0 * pow(1.25, S.thick);\n  return { nu, a0, Q: PI * a0 * a0 * V0, K: KS / nu, tf: TF * pow(nu, 0.25) };\n}\n\n// Free fall from the spout: speed at height Y, and the radius that keeps the\n// mass flux pi a^2 v the same all the way down.\nconst speedAt = (Y) => sqrt(V0 * V0 + 2 * G * max(0, YN - Y));\nconst radiusAt = (a0, Y) => a0 * sqrt(V0 / speedAt(Y));\n\n// The heap's height under a point, bilinear.\nfunction heightAt(S, x, z) {\n  const u = cl(x - 0.5, 0, GX - 1.001), v = cl(z + ZC - 0.5, 0, GZ - 1.001);\n  const i = floor(u), j = floor(v), fu = u - i, fv = v - j, h = S.h, p = j * GX + i;\n  return (h[p] * (1 - fu) + h[p + 1] * fu) * (1 - fv) + (h[p + GX] * (1 - fu) + h[p + GX + 1] * fu) * fv;\n}\n\n// Where the rope lands now: the coil's radius and rate and the surface under it.\nfunction coil(S, L) {\n  const R0 = 8;\n  // The surface a little ahead of the contact, where the rope is about to lie.\n  let Yc = heightAt(S, AX + R0 * cos(S.phi + 0.3), R0 * sin(S.phi + 0.3));\n  const U1 = speedAt(Yc), a1 = radiusAt(L.a0, Yc);\n  const om = CW * pow((G * L.Q * L.Q * L.Q) / (L.nu * pow(a1, 8)), 0.25);\n  const R = U1 / om, ps = (2 * PI * S.t) / PW, e = EC * R * (0.6 + 0.4 * sin(ps * 0.37 + 1));\n  const cx = AX + e * cos(ps), cz = e * sin(ps * 1.3);\n  Yc = heightAt(S, cx + R * cos(S.phi + a1 / R), cz + R * sin(S.phi + a1 / R));\n  return { Yc, U1, a1, om, R, cx, cz };\n}\n\n// Lay a short piece of rope at (x, z): its volume pi a^2 ds spread over the\n// cells under it, heaped in the middle.\nfunction deposit(S, x, z, a, ds) {\n  const h = S.f, vol = PI * a * a * ds;\n  const i0 = max(0, floor(x - a - 0.5)), i1 = min(GX - 1, ceil(x + a - 0.5));\n  const j0 = max(0, floor(z + ZC - a - 0.5)), j1 = min(GZ - 1, ceil(z + ZC + a - 0.5));\n  let sum = 0;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) sum += q;\n    }\n  if (sum \u003c= 0) return;\n  const k = vol / sum;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) h[j * GX + i] += k * q;\n    }\n}\n\n// The heap flows: flux K h^3 times the slope across every face between two\n// bulk cells, none out through the counter's edges, so no lotion is lost.\nfunction slump(S, L, dt) {\n  const h = S.b, d = S.dh, k = L.K / 4;\n  let left = dt;\n  while (left > 1e-6) {\n    let hm = 0;\n    for (let p = 0; p \u003c NB; p++) if (h[p] > hm) hm = h[p];\n    const st = min(left, 0.2 / (k * hm * hm * hm + 1e-6));\n    d.fill(0);\n    for (let j = 0; j \u003c BZ; j++)\n      for (let i = 0; i \u003c BX; i++) {\n        const p = j * BX + i, a = h[p];\n        if (i \u003c BX - 1) {\n          const b = h[p + 1], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + 1] += f;\n        }\n        if (j \u003c BZ - 1) {\n          const b = h[p + BX], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + BX] += f;\n        }\n      }\n    for (let p = 0; p \u003c NB; p++) h[p] = max(0, h[p] + d[p] * st);\n    left -= st;\n  }\n}\n\n// The bulk under an LED cell, bilinear between bulk cell centres.\nfunction bulkAt(b, i, j) {\n  const u = cl(i * 0.5 - 0.25, 0, BX - 1.001), v = cl(j * 0.5 - 0.25, 0, BZ - 1.001);\n  const I = floor(u), J = floor(v), fu = u - I, fv = v - J, p = J * BX + I;\n  return (b[p] * (1 - fu) + b[p + 1] * fu) * (1 - fv) + (b[p + BX] * (1 - fu) + b[p + BX + 1] * fu) * fv;\n}\n\nfunction breakStream(S) {\n  if (S.cut || S.gone || S.tip >= 0) return;\n  S.cut = true;\n  S.topV = V0;\n}\n\nfunction step(S, dt) {\n  const L = lotion(S);\n  S.t += dt;\n  const C = coil(S, L);\n  // A fresh pour falls until its front reaches the heap.\n  if (S.tip >= 0) {\n    S.tipV += G * dt;\n    S.tip -= S.tipV * dt;\n    if (S.tip \u003c= C.Yc + C.a1) S.tip = -1;\n  }\n  if (!S.cut && !S.gone) {\n    S.tPour += dt;\n    if (S.tPour > POUR) breakStream(S);\n  }\n  // A broken stream's tail falls in.\n  if (S.cut) {\n    S.topV += G * dt;\n    S.top -= S.topV * dt;\n    if (S.top \u003c= C.Yc + C.a1) {\n      S.cut = false;\n      S.gone = true;\n      S.wait = SETTLE;\n    }\n  }\n  if (S.gone) {\n    S.wait -= dt;\n    if (S.wait \u003c= 0 && !S.sinking) {\n      // The heap sinks away and the next pour starts from the spout.\n      S.sinking = true;\n      S.gone = false;\n      S.top = YN;\n      S.tip = YN;\n      S.tipV = V0;\n      S.tPour = 0;\n    }\n  }\n  const { b, f } = S;\n  const toBulk = (p) => ((p / GX) >> 1) * BX + ((p % GX) >> 1);\n  if (S.sinking) {\n    let any = false;\n    for (let p = 0; p \u003c NG; p++) {\n      b[toBulk(p)] += f[p] / 4;\n      f[p] = 0;\n    }\n    for (let p = 0; p \u003c NB; p++) {\n      b[p] = max(0, b[p] - SINK * dt);\n      if (b[p] > 0) any = true;\n    }\n    if (!any) S.sinking = false;\n  }\n  // The rope lays itself down along the coil at the speed it arrives, so the\n  // contact runs round at Omega = U1 / R.\n  if (!S.gone && S.tip \u003c 0) {\n    const dphi = C.om * dt, n = max(1, ceil((C.R * dphi) / 0.5));\n    for (let k = 0; k \u003c n; k++) {\n      const ph = S.phi + (dphi * (k + 0.5)) / n;\n      deposit(S, C.cx + C.R * cos(ph), C.cz + C.R * sin(ph), C.a1, (C.R * dphi) / n);\n    }\n    S.phi += dphi;\n  }\n  // Loops melt into the heap, which flows.\n  const m = 1 - exp(-dt / L.tf);\n  for (let p = 0; p \u003c NG; p++) {\n    const v = f[p] * m;\n    f[p] -= v;\n    b[toBulk(p)] += v / 4;\n  }\n  slump(S, L, dt);\n  for (let j = 0, p = 0; j \u003c GZ; j++) for (let i = 0; i \u003c GX; i++, p++) S.h[p] = bulkAt(b, i, j) + f[p];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.thick = cl(k[2], -1, 1);\n  S.gloss = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open six seconds into a pour.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breakStream(S);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours for the hue: the lit lotion, its shadow side and the wall.\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime go brown or olive when deep: there the lotion is\n  // paled to cream and the wall taken down almost to black.\n  const warm = sm(0.0, 0.08, hh) * (1 - sm(0.22, 0.32, hh));\n  // A wetter finish is a little deeper in colour.\n  const wet = 0.5 + 0.5 * S.gloss;\n  hsv(h, (0.38 + 0.14 * wet) * (1 - 0.4 * warm), 0.8 - 0.08 * wet + 0.06 * warm, S.lit);\n  hsv(h + 0.015, (0.6 + 0.2 * wet) * (1 - 0.35 * warm), 0.4 - 0.1 * wet + 0.2 * warm, S.dark);\n  hsv(h - 0.04, 0.85 - 0.5 * warm, 0.2 - 0.15 * warm, S.wall);\n  // The pearl in the lotion glints a cooler shade at grazing angles.\n  hsv(h - 0.12, 0.45 - 0.15 * warm, 1, S.pearl);\n}\n\n// The highlight against how squarely a surface faces the half vector,\n// tabled once per Gloss. Satin at -1: a broad dim sheen; wet at 1: a narrow\n// hot highlight.\nconst SPN = 1024;\nfunction specTable(S) {\n  if (S.specKey === S.gloss) return;\n  S.specKey = S.gloss;\n  const g = S.gloss, P = 28 * pow(5, g), KSp = 0.6 + 0.35 * g;\n  for (let i = 0; i \u003c SPN; i++) {\n    const n = i / (SPN - 1), n2 = n * n;\n    S.spec[i] = KSp * pow(n, P) + 0.16 * max(0, -g) * n2 * n2;\n  }\n}\n\nfunction shade(S, nx, ny, nz, vx, vy, vz, lx, ly, lz, hx, hy, hz, strip, ao, out) {\n  // A wet finish has a bright rim.\n  const KR = 0.25 + 0.3 * max(0, S.gloss);\n  const nl = nx * lx + ny * ly + nz * lz;\n  const dif = cl((nl + 0.25) / 1.25, 0, 1);\n  let nh = max(0, nx * hx + ny * hy + nz * hz);\n  // The strip light, seen in the rope: only the turn of the rope across\n  // matters, not along it.\n  if (strip) {\n    const l = sqrt(nx * nx + nz * nz) + 1e-6;\n    nh = max(nh, ((nx * HS[0] + nz * HS[2]) / l) * (0.75 + 0.25 * l));\n  }\n  const sp = S.spec[round(cl(nh, 0, 1) * (SPN - 1))], e = 1 - cl(nx * vx + ny * vy + nz * vz, 0, 1);\n  const rim = KR * e * e * e;\n  const lit = S.lit, dk = S.dark, pe = S.pearl;\n  for (let c = 0; c \u003c 3; c++) out[c] = (dk[c] + (lit[c] - dk[c]) * dif) * ao + sp + rim * pe[c];\n}\n\n// Highlights roll off softly instead of clipping: a table over 0..2.\nconst TONE = new Uint8Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) TONE[i] = round(min(255, 319 * (1 - exp((-1.6 * 2 * i) / 1024))));\nconst tone = (v) => TONE[v \u003c= 0 ? 0 : v >= 2 ? 1024 : (v * 512) | 0];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  specTable(S);\n  const L = lotion(S), C = coil(S, L);\n  const { h, hdep, col, rdep, rcov, rcol, bg, wall, c, blur, tmp } = S;\n  // The heap's height blurred over 5 cells, for its shadow on the counter:\n  // a running sum along x, then along z.\n  for (let j = 0; j \u003c GZ; j++) {\n    const o = j * GX;\n    let a = h[o] * 3 + h[o + 1] + h[o + 2];\n    for (let i = 0; i \u003c GX; i++) {\n      tmp[o + i] = a * 0.2;\n      a += h[o + min(GX - 1, i + 3)] - h[o + max(0, i - 2)];\n    }\n  }\n  for (let i = 0; i \u003c GX; i++) {\n    let a = tmp[i] * 3 + tmp[GX + i] + tmp[2 * GX + i];\n    for (let j = 0; j \u003c GZ; j++) {\n      blur[j * GX + i] = a * 0.2;\n      a += tmp[min(GZ - 1, j + 3) * GX + i] - tmp[max(0, j - 2) * GX + i];\n    }\n  }\n  // Heights smoothed 1-2-1 for the normals, so the steep rim of the heap\n  // does not break into a comb along the grid.\n  const hs = S.hs;\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, l = i > 0 ? p - 1 : p, r = i \u003c GX - 1 ? p + 1 : p;\n      tmp[p] = (h[l] + 2 * h[p] + h[r]) * 0.25;\n    }\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, b0 = j > 0 ? p - GX : p, f0 = j \u003c GZ - 1 ? p + GX : p;\n      hs[p] = (tmp[b0] + 2 * tmp[p] + tmp[f0]) * 0.25;\n    }\n  // The wall.\n  for (let p = 0; p \u003c N; p++) {\n    const v = bg[p];\n    col[p * 3] = wall[0] * v;\n    col[p * 3 + 1] = wall[1] * v;\n    col[p * 3 + 2] = wall[2] * v;\n    hdep[p] = -1e9;\n    rdep[p] = -1e9;\n    rcov[p] = 0;\n  }\n  // Each cell's colour: the lotion lit from its normal, valleys between\n  // folds a little darker; and the bare counter, a satin shelf a little\n  // lighter than the wall, in the shade of the heap beside it.\n  const cc = S.cc, up = S.up;\n  shade(S, 0, 1, 0, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1, up);\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, z = j + 0.5 - ZC;\n      S.fl[p] = (0.55 + 0.25 * sm(-28, 28, z)) * (1 - 0.6 * sm(0, 4, blur[p]));\n      if (hs[p] \u003c 1e-3) {\n        cc[p * 3] = up[0];\n        cc[p * 3 + 1] = up[1];\n        cc[p * 3 + 2] = up[2];\n        continue;\n      }\n      const hl = hs[p - (i > 0 ? 1 : 0)], hr = hs[p + (i \u003c GX - 1 ? 1 : 0)];\n      const hb = hs[p - (j > 0 ? GX : 0)], hf = hs[p + (j \u003c GZ - 1 ? GX : 0)];\n      const gx = (hr - hl) * 0.5, gz = (hf - hb) * 0.5, inv = 1 / sqrt(gx * gx + 1 + gz * gz);\n      const lap = hl + hr + hb + hf - 4 * hs[p];\n      shade(S, -gx * inv, inv, -gz * inv, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1 - 0.3 * cl(lap * 0.25, 0, 1), c);\n      cc[p * 3] = c[0];\n      cc[p * 3 + 1] = c[1];\n      cc[p * 3 + 2] = c[2];\n    }\n  // The counter and the heap, column by column from the front back in half\n  // cells, height and colour taken between cell centres, each sample filling\n  // the rows its top rises above the samples in front of it.\n  const FL = S.fl;\n  for (let i = 0; i \u003c GX; i++) {\n    let yb = H;\n    for (let v = GZ - 1; v >= 0; v -= 0.5) {\n      const j = floor(v), fv = v - j, p = j * GX + i, p2 = j \u003c GZ - 1 ? p + GX : p;\n      const Yv = h[p] + (h[p2] - h[p]) * fv, z = v + 0.5 - ZC;\n      const y0 = ceil(FY - Yv * CE + z * SE - 0.5);\n      if (y0 >= yb) continue;\n      // Thin lotion lets the counter show through.\n      const film = sm(0.05, 0.9, Yv), fl = (FL[p] + (FL[p2] - FL[p]) * fv) * (1 - film);\n      const r = (cc[p * 3] + (cc[p2 * 3] - cc[p * 3]) * fv) * film + wall[0] * fl;\n      const g = (cc[p * 3 + 1] + (cc[p2 * 3 + 1] - cc[p * 3 + 1]) * fv) * film + wall[1] * fl;\n      const b = (cc[p * 3 + 2] + (cc[p2 * 3 + 2] - cc[p * 3 + 2]) * fv) * film + wall[2] * fl;\n      const dep = Yv * SE + z * CE;\n      for (let y = max(0, y0); y \u003c yb; y++) {\n        const q = y * W + i;\n        col[q * 3] = r;\n        col[q * 3 + 1] = g;\n        col[q * 3 + 2] = b;\n        hdep[q] = dep;\n      }\n      yb = y0;\n    }\n  }\n  // The rope: a chain of balls half an LED apart, each a sphere, the nearest\n  // surface's normal kept at every LED.\n  const ropeOn = !S.gone;\n  if (ropeOn) {\n    const t = S.t, top = min(S.top, YN + 3);\n    const landed = S.tip \u003c 0;\n    const coilTop = C.Yc + C.a1 + HC * C.R;\n    const low = landed ? coilTop : S.tip;\n    const ball = (x, Y, z, a) => {\n      if (a \u003c 0.3) return;\n      const sx = x, sy = FY - Y * CE + z * SE, dd = Y * SE + z * CE;\n      const x0 = max(0, floor(sx - a - 1)), x1 = min(W - 1, ceil(sx + a)), y0 = max(0, floor(sy - a - 1)), y1 = min(H - 1, ceil(sy + a));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let xx = x0; xx \u003c= x1; xx++) {\n          const dx = xx + 0.5 - sx, dy = y + 0.5 - sy, r = sqrt(dx * dx + dy * dy);\n          const cov = cl(a - r + 0.5, 0, 1);\n          if (cov \u003c= 0) continue;\n          const q = y * W + xx, uz = sqrt(max(0, 1 - (r * r) / (a * a)));\n          const depth = dd + a * uz;\n          if (cov \u003c rcov[q] - 0.02 || (cov \u003c= rcov[q] + 0.02 && depth \u003c= rdep[q])) continue;\n          const m = 1 / max(a, r + 1e-6);\n          rcov[q] = cov;\n          rdep[q] = depth;\n          rcol[q * 3] = dx * m;\n          rcol[q * 3 + 1] = -dy * m;\n          rcol[q * 3 + 2] = uz;\n        }\n    };\n    // The falling stream, with swellings that left the spout at a steady\n    // beat and stretch apart as the lotion speeds up.\n    for (let Y = top; Y > low; Y -= 0.5) {\n      const v = speedAt(Y), age = (v - V0) / G;\n      let a = radiusAt(L.a0, Y) * (1 + BA * sin(2 * PI * FB * (t - age)));\n      // A broken stream's upper end narrows to a rounded tail.\n      if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n      ball(AX, Y, 0, a);\n    }\n    if (!landed) ball(AX, S.tip, 0, radiusAt(L.a0, S.tip) * 1.15);\n    else {\n      // The coil: from the axis at its top it bends out to radius R, winding\n      // a quarter turn as it comes down level onto the heap.\n      const len = HC * C.R + 2 * C.R, n = ceil(len / 0.5);\n      for (let k = n; k >= 0; k--) {\n        const s = k / n, Y = C.Yc + C.a1 + HC * C.R * s * s;\n        if (Y > top) continue;\n        const r = C.R * (1 - s * s) * (1 - s * s), th = S.phi + s * PI * 0.5, e = (1 - s) * (1 - s);\n        let a = radiusAt(L.a0, Y);\n        if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n        ball(AX + (C.cx - AX) * e + r * cos(th), Y, C.cz * e + r * sin(th), a);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let r = col[q * 3], g = col[q * 3 + 1], b = col[q * 3 + 2];\n      const cv = rcov[q];\n      if (cv > 0 && rdep[q] > hdep[q]) {\n        // The rope, lit from the normal its nearest ball left here.\n        shade(S, rcol[q * 3], rcol[q * 3 + 1], rcol[q * 3 + 2], 0, 0, 1, LC[0], LC[1], LC[2], HCm[0], HCm[1], HCm[2], true, 1, c);\n        r += (c[0] - r) * cv;\n        g += (c[1] - g) * cv;\n        b += (c[2] - b) * cv;\n      }\n      display.setPixel(x, y, tone(r), tone(g), tone(b));\n    }\n}\n","layer":{"id":"layer-lotion-ribbon","type":"code","name":"lotion-ribbon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lotion Ribbon\n// Family:  cosmetic\n// Idea:    A thick glossy ribbon of lotion pours from above the top edge in a steady stream that thins as it falls, coils where it lands and lays loop on loop onto a heap that slumps and spreads across the counter, the shine running down the rope and over the folds, until the stream breaks off, its tail falls in, the heap sinks away and a fresh pour begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after the slow pour of body lotion in skincare films; the coiling follows liquid rope coiling (Neil Ribe, 2004) and the heap spreads as a viscous gravity current (Herbert Huppert, 1982)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1\n//\n// Knob 1: Hue. Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Thick. How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up.\n// Knob 4: Gloss. At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim.\n// Buttons: K1 tap breaks the stream now: its tail falls in, the heap sinks away and a fresh pour starts from the top.\n\nconst W = 64, H = 128, N = W * H;\n// The counter under the heap, one cell an LED: x 0..63, z from -28 at the\n// back to 36 at the front, below the bottom edge.\nconst GX = 64, GZ = 64, ZC = 28, NG = GX * GZ;\n// The heap's bulk flows on cells two LEDs square; the fresh folds lie on the\n// LED cells above it.\nconst BX = GX / 2, BZ = GZ / 2, NB = BX * BZ;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, pow, round, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[0] = r;\n  out[1] = g;\n  out[2] = b;\n}\n\n// The camera looks down at the counter from EL radians above level. A point\n// x across, Y up and z toward the eye lands on screen row FY - Y*CE + z*SE,\n// and lies Y*SE + z*CE toward the eye.\nconst EL = 0.5, CE = cos(EL), SE = sin(EL);\nconst FY = 113, AX = 32;\n// The spout is just above the top edge.\nconst YN = (FY + 4) / CE;\n// Gravity and the speed the lotion leaves the spout, in LEDs and seconds at\n// Speed 2, and the spout's radius at Thick 0.\nconst G = 8, V0 = 14, A0 = 5.6;\n// Coiling rate: the gravitational regime of liquid rope coiling,\n// Omega = CW * (g Q^3 / (nu a1^8))^(1/4), Q the flux, nu the viscosity and a1\n// the rope's radius where it lands.\nconst CW = 0.144;\n// The coil bends out from the stream's axis over HC coil radii of height,\n// winding a quarter turn ahead of the point where it lands.\nconst HC = 1.5;\n// Slump: the heap flows as a thin viscous layer, dh/dt = div(K h^3 grad h),\n// K = KS / nu. A fresh loop holds its fold TF * nu^(1/4) seconds before it\n// melts into the heap.\nconst KS = 3e-2, TF = 3;\n// The coil does not land on one circle: its centre wanders up to EC coil\n// radii off the axis, round and back about every PW seconds, so the loops\n// cross and fold over each other.\nconst EC = 0.7, PW = 5.3;\n// One pour lasts POUR seconds; after the tail lands the heap settles SETTLE\n// seconds, then sinks SINK LEDs a second while the next pour falls.\nconst POUR = 16, SETTLE = 0.8, SINK = 5;\n// Little swellings ride down the stream FB times a second, BA of the radius.\nconst FB = 1.1, BA = 0.05;\n// Opening hue: pink, not red.\nconst H0 = 0.9;\n\n// Light from the upper left and a little in front, and the eye, in world\n// axes and in the camera's (x right, y up the screen, z toward the eye).\nconst nrm = (v) => {\n  const l = Math.hypot(v[0], v[1], v[2]);\n  return [v[0] / l, v[1] / l, v[2] / l];\n};\nconst LW = nrm([-0.5, 0.75, 0.45]);\nconst VW = [0, SE, CE];\nconst HW = nrm([LW[0] + VW[0], LW[1] + VW[1], LW[2] + VW[2]]);\nconst toCam = (v) => [v[0], v[1] * CE - v[2] * SE, v[1] * SE + v[2] * CE];\nconst LC = toCam(LW), HCm = toCam(HW);\n// A tall strip light to the left of the eye: on the falling rope it draws a\n// highlight down its whole length.\nconst HS = nrm([-0.3, 0, 1]);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, thick: 0, gloss: 0, warm: false,\n    t: 0, phi: 0, tPour: 0,\n    // top: height of the rope's upper end (YN while the spout runs); tip: its\n    // lower end while a fresh pour is still falling, or -1 once it has landed.\n    top: YN, topV: 0, tip: -1, tipV: 0, cut: false, gone: false, wait: 0, sinking: false,\n    h: new Float32Array(NG), b: new Float32Array(NB), f: new Float32Array(NG), dh: new Float32Array(NB),\n    blur: new Float32Array(NG), tmp: new Float32Array(NG), hs: new Float32Array(NG), cc: new Float32Array(NG * 3), fl: new Float32Array(NG),\n    hdep: new Float32Array(N), col: new Float32Array(N * 3),\n    rdep: new Float32Array(N), rcov: new Float32Array(N), rcol: new Float32Array(N * 3),\n    bg: new Float32Array(N),\n    lit: [0, 0, 0], dark: [0, 0, 0], wall: [0, 0, 0], pearl: [0, 0, 0], c: [0, 0, 0], up: [0, 0, 0],\n    spec: new Float32Array(SPN), specKey: null,\n  };\n  const S = params.s;\n  // A soft glow on the wall behind the stream, falling off to near black in\n  // the top corners.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = (x + 0.5 - AX) / 26, dy = (y - 78) / 70;\n      S.bg[y * W + x] = 0.12 + 0.88 * exp(-dx * dx - dy * dy);\n    }\n}\n\n// The lotion's make-up at the current Thick.\nfunction lotion(S) {\n  const nu = pow(4, S.thick), a0 = A0 * pow(1.25, S.thick);\n  return { nu, a0, Q: PI * a0 * a0 * V0, K: KS / nu, tf: TF * pow(nu, 0.25) };\n}\n\n// Free fall from the spout: speed at height Y, and the radius that keeps the\n// mass flux pi a^2 v the same all the way down.\nconst speedAt = (Y) => sqrt(V0 * V0 + 2 * G * max(0, YN - Y));\nconst radiusAt = (a0, Y) => a0 * sqrt(V0 / speedAt(Y));\n\n// The heap's height under a point, bilinear.\nfunction heightAt(S, x, z) {\n  const u = cl(x - 0.5, 0, GX - 1.001), v = cl(z + ZC - 0.5, 0, GZ - 1.001);\n  const i = floor(u), j = floor(v), fu = u - i, fv = v - j, h = S.h, p = j * GX + i;\n  return (h[p] * (1 - fu) + h[p + 1] * fu) * (1 - fv) + (h[p + GX] * (1 - fu) + h[p + GX + 1] * fu) * fv;\n}\n\n// Where the rope lands now: the coil's radius and rate and the surface under it.\nfunction coil(S, L) {\n  const R0 = 8;\n  // The surface a little ahead of the contact, where the rope is about to lie.\n  let Yc = heightAt(S, AX + R0 * cos(S.phi + 0.3), R0 * sin(S.phi + 0.3));\n  const U1 = speedAt(Yc), a1 = radiusAt(L.a0, Yc);\n  const om = CW * pow((G * L.Q * L.Q * L.Q) / (L.nu * pow(a1, 8)), 0.25);\n  const R = U1 / om, ps = (2 * PI * S.t) / PW, e = EC * R * (0.6 + 0.4 * sin(ps * 0.37 + 1));\n  const cx = AX + e * cos(ps), cz = e * sin(ps * 1.3);\n  Yc = heightAt(S, cx + R * cos(S.phi + a1 / R), cz + R * sin(S.phi + a1 / R));\n  return { Yc, U1, a1, om, R, cx, cz };\n}\n\n// Lay a short piece of rope at (x, z): its volume pi a^2 ds spread over the\n// cells under it, heaped in the middle.\nfunction deposit(S, x, z, a, ds) {\n  const h = S.f, vol = PI * a * a * ds;\n  const i0 = max(0, floor(x - a - 0.5)), i1 = min(GX - 1, ceil(x + a - 0.5));\n  const j0 = max(0, floor(z + ZC - a - 0.5)), j1 = min(GZ - 1, ceil(z + ZC + a - 0.5));\n  let sum = 0;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) sum += q;\n    }\n  if (sum \u003c= 0) return;\n  const k = vol / sum;\n  for (let j = j0; j \u003c= j1; j++)\n    for (let i = i0; i \u003c= i1; i++) {\n      const dx = i + 0.5 - x, dz = j + 0.5 - ZC - z, q = 1 - (dx * dx + dz * dz) / (a * a);\n      if (q > 0) h[j * GX + i] += k * q;\n    }\n}\n\n// The heap flows: flux K h^3 times the slope across every face between two\n// bulk cells, none out through the counter's edges, so no lotion is lost.\nfunction slump(S, L, dt) {\n  const h = S.b, d = S.dh, k = L.K / 4;\n  let left = dt;\n  while (left > 1e-6) {\n    let hm = 0;\n    for (let p = 0; p \u003c NB; p++) if (h[p] > hm) hm = h[p];\n    const st = min(left, 0.2 / (k * hm * hm * hm + 1e-6));\n    d.fill(0);\n    for (let j = 0; j \u003c BZ; j++)\n      for (let i = 0; i \u003c BX; i++) {\n        const p = j * BX + i, a = h[p];\n        if (i \u003c BX - 1) {\n          const b = h[p + 1], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + 1] += f;\n        }\n        if (j \u003c BZ - 1) {\n          const b = h[p + BX], m = (a + b) * 0.5, f = k * m * m * m * (a - b);\n          d[p] -= f;\n          d[p + BX] += f;\n        }\n      }\n    for (let p = 0; p \u003c NB; p++) h[p] = max(0, h[p] + d[p] * st);\n    left -= st;\n  }\n}\n\n// The bulk under an LED cell, bilinear between bulk cell centres.\nfunction bulkAt(b, i, j) {\n  const u = cl(i * 0.5 - 0.25, 0, BX - 1.001), v = cl(j * 0.5 - 0.25, 0, BZ - 1.001);\n  const I = floor(u), J = floor(v), fu = u - I, fv = v - J, p = J * BX + I;\n  return (b[p] * (1 - fu) + b[p + 1] * fu) * (1 - fv) + (b[p + BX] * (1 - fu) + b[p + BX + 1] * fu) * fv;\n}\n\nfunction breakStream(S) {\n  if (S.cut || S.gone || S.tip >= 0) return;\n  S.cut = true;\n  S.topV = V0;\n}\n\nfunction step(S, dt) {\n  const L = lotion(S);\n  S.t += dt;\n  const C = coil(S, L);\n  // A fresh pour falls until its front reaches the heap.\n  if (S.tip >= 0) {\n    S.tipV += G * dt;\n    S.tip -= S.tipV * dt;\n    if (S.tip \u003c= C.Yc + C.a1) S.tip = -1;\n  }\n  if (!S.cut && !S.gone) {\n    S.tPour += dt;\n    if (S.tPour > POUR) breakStream(S);\n  }\n  // A broken stream's tail falls in.\n  if (S.cut) {\n    S.topV += G * dt;\n    S.top -= S.topV * dt;\n    if (S.top \u003c= C.Yc + C.a1) {\n      S.cut = false;\n      S.gone = true;\n      S.wait = SETTLE;\n    }\n  }\n  if (S.gone) {\n    S.wait -= dt;\n    if (S.wait \u003c= 0 && !S.sinking) {\n      // The heap sinks away and the next pour starts from the spout.\n      S.sinking = true;\n      S.gone = false;\n      S.top = YN;\n      S.tip = YN;\n      S.tipV = V0;\n      S.tPour = 0;\n    }\n  }\n  const { b, f } = S;\n  const toBulk = (p) => ((p / GX) >> 1) * BX + ((p % GX) >> 1);\n  if (S.sinking) {\n    let any = false;\n    for (let p = 0; p \u003c NG; p++) {\n      b[toBulk(p)] += f[p] / 4;\n      f[p] = 0;\n    }\n    for (let p = 0; p \u003c NB; p++) {\n      b[p] = max(0, b[p] - SINK * dt);\n      if (b[p] > 0) any = true;\n    }\n    if (!any) S.sinking = false;\n  }\n  // The rope lays itself down along the coil at the speed it arrives, so the\n  // contact runs round at Omega = U1 / R.\n  if (!S.gone && S.tip \u003c 0) {\n    const dphi = C.om * dt, n = max(1, ceil((C.R * dphi) / 0.5));\n    for (let k = 0; k \u003c n; k++) {\n      const ph = S.phi + (dphi * (k + 0.5)) / n;\n      deposit(S, C.cx + C.R * cos(ph), C.cz + C.R * sin(ph), C.a1, (C.R * dphi) / n);\n    }\n    S.phi += dphi;\n  }\n  // Loops melt into the heap, which flows.\n  const m = 1 - exp(-dt / L.tf);\n  for (let p = 0; p \u003c NG; p++) {\n    const v = f[p] * m;\n    f[p] -= v;\n    b[toBulk(p)] += v / 4;\n  }\n  slump(S, L, dt);\n  for (let j = 0, p = 0; j \u003c GZ; j++) for (let i = 0; i \u003c GX; i++, p++) S.h[p] = bulkAt(b, i, j) + f[p];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.thick = cl(k[2], -1, 1);\n  S.gloss = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open six seconds into a pour.\n    for (let i = 0; i \u003c 180; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breakStream(S);\n  step(S, (d * S.speed) / 2);\n}\n\n// Colours for the hue: the lit lotion, its shadow side and the wall.\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime go brown or olive when deep: there the lotion is\n  // paled to cream and the wall taken down almost to black.\n  const warm = sm(0.0, 0.08, hh) * (1 - sm(0.22, 0.32, hh));\n  // A wetter finish is a little deeper in colour.\n  const wet = 0.5 + 0.5 * S.gloss;\n  hsv(h, (0.38 + 0.14 * wet) * (1 - 0.4 * warm), 0.8 - 0.08 * wet + 0.06 * warm, S.lit);\n  hsv(h + 0.015, (0.6 + 0.2 * wet) * (1 - 0.35 * warm), 0.4 - 0.1 * wet + 0.2 * warm, S.dark);\n  hsv(h - 0.04, 0.85 - 0.5 * warm, 0.2 - 0.15 * warm, S.wall);\n  // The pearl in the lotion glints a cooler shade at grazing angles.\n  hsv(h - 0.12, 0.45 - 0.15 * warm, 1, S.pearl);\n}\n\n// The highlight against how squarely a surface faces the half vector,\n// tabled once per Gloss. Satin at -1: a broad dim sheen; wet at 1: a narrow\n// hot highlight.\nconst SPN = 1024;\nfunction specTable(S) {\n  if (S.specKey === S.gloss) return;\n  S.specKey = S.gloss;\n  const g = S.gloss, P = 28 * pow(5, g), KSp = 0.6 + 0.35 * g;\n  for (let i = 0; i \u003c SPN; i++) {\n    const n = i / (SPN - 1), n2 = n * n;\n    S.spec[i] = KSp * pow(n, P) + 0.16 * max(0, -g) * n2 * n2;\n  }\n}\n\nfunction shade(S, nx, ny, nz, vx, vy, vz, lx, ly, lz, hx, hy, hz, strip, ao, out) {\n  // A wet finish has a bright rim.\n  const KR = 0.25 + 0.3 * max(0, S.gloss);\n  const nl = nx * lx + ny * ly + nz * lz;\n  const dif = cl((nl + 0.25) / 1.25, 0, 1);\n  let nh = max(0, nx * hx + ny * hy + nz * hz);\n  // The strip light, seen in the rope: only the turn of the rope across\n  // matters, not along it.\n  if (strip) {\n    const l = sqrt(nx * nx + nz * nz) + 1e-6;\n    nh = max(nh, ((nx * HS[0] + nz * HS[2]) / l) * (0.75 + 0.25 * l));\n  }\n  const sp = S.spec[round(cl(nh, 0, 1) * (SPN - 1))], e = 1 - cl(nx * vx + ny * vy + nz * vz, 0, 1);\n  const rim = KR * e * e * e;\n  const lit = S.lit, dk = S.dark, pe = S.pearl;\n  for (let c = 0; c \u003c 3; c++) out[c] = (dk[c] + (lit[c] - dk[c]) * dif) * ao + sp + rim * pe[c];\n}\n\n// Highlights roll off softly instead of clipping: a table over 0..2.\nconst TONE = new Uint8Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) TONE[i] = round(min(255, 319 * (1 - exp((-1.6 * 2 * i) / 1024))));\nconst tone = (v) => TONE[v \u003c= 0 ? 0 : v >= 2 ? 1024 : (v * 512) | 0];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  specTable(S);\n  const L = lotion(S), C = coil(S, L);\n  const { h, hdep, col, rdep, rcov, rcol, bg, wall, c, blur, tmp } = S;\n  // The heap's height blurred over 5 cells, for its shadow on the counter:\n  // a running sum along x, then along z.\n  for (let j = 0; j \u003c GZ; j++) {\n    const o = j * GX;\n    let a = h[o] * 3 + h[o + 1] + h[o + 2];\n    for (let i = 0; i \u003c GX; i++) {\n      tmp[o + i] = a * 0.2;\n      a += h[o + min(GX - 1, i + 3)] - h[o + max(0, i - 2)];\n    }\n  }\n  for (let i = 0; i \u003c GX; i++) {\n    let a = tmp[i] * 3 + tmp[GX + i] + tmp[2 * GX + i];\n    for (let j = 0; j \u003c GZ; j++) {\n      blur[j * GX + i] = a * 0.2;\n      a += tmp[min(GZ - 1, j + 3) * GX + i] - tmp[max(0, j - 2) * GX + i];\n    }\n  }\n  // Heights smoothed 1-2-1 for the normals, so the steep rim of the heap\n  // does not break into a comb along the grid.\n  const hs = S.hs;\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, l = i > 0 ? p - 1 : p, r = i \u003c GX - 1 ? p + 1 : p;\n      tmp[p] = (h[l] + 2 * h[p] + h[r]) * 0.25;\n    }\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, b0 = j > 0 ? p - GX : p, f0 = j \u003c GZ - 1 ? p + GX : p;\n      hs[p] = (tmp[b0] + 2 * tmp[p] + tmp[f0]) * 0.25;\n    }\n  // The wall.\n  for (let p = 0; p \u003c N; p++) {\n    const v = bg[p];\n    col[p * 3] = wall[0] * v;\n    col[p * 3 + 1] = wall[1] * v;\n    col[p * 3 + 2] = wall[2] * v;\n    hdep[p] = -1e9;\n    rdep[p] = -1e9;\n    rcov[p] = 0;\n  }\n  // Each cell's colour: the lotion lit from its normal, valleys between\n  // folds a little darker; and the bare counter, a satin shelf a little\n  // lighter than the wall, in the shade of the heap beside it.\n  const cc = S.cc, up = S.up;\n  shade(S, 0, 1, 0, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1, up);\n  for (let j = 0; j \u003c GZ; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const p = j * GX + i, z = j + 0.5 - ZC;\n      S.fl[p] = (0.55 + 0.25 * sm(-28, 28, z)) * (1 - 0.6 * sm(0, 4, blur[p]));\n      if (hs[p] \u003c 1e-3) {\n        cc[p * 3] = up[0];\n        cc[p * 3 + 1] = up[1];\n        cc[p * 3 + 2] = up[2];\n        continue;\n      }\n      const hl = hs[p - (i > 0 ? 1 : 0)], hr = hs[p + (i \u003c GX - 1 ? 1 : 0)];\n      const hb = hs[p - (j > 0 ? GX : 0)], hf = hs[p + (j \u003c GZ - 1 ? GX : 0)];\n      const gx = (hr - hl) * 0.5, gz = (hf - hb) * 0.5, inv = 1 / sqrt(gx * gx + 1 + gz * gz);\n      const lap = hl + hr + hb + hf - 4 * hs[p];\n      shade(S, -gx * inv, inv, -gz * inv, VW[0], VW[1], VW[2], LW[0], LW[1], LW[2], HW[0], HW[1], HW[2], false, 1 - 0.3 * cl(lap * 0.25, 0, 1), c);\n      cc[p * 3] = c[0];\n      cc[p * 3 + 1] = c[1];\n      cc[p * 3 + 2] = c[2];\n    }\n  // The counter and the heap, column by column from the front back in half\n  // cells, height and colour taken between cell centres, each sample filling\n  // the rows its top rises above the samples in front of it.\n  const FL = S.fl;\n  for (let i = 0; i \u003c GX; i++) {\n    let yb = H;\n    for (let v = GZ - 1; v >= 0; v -= 0.5) {\n      const j = floor(v), fv = v - j, p = j * GX + i, p2 = j \u003c GZ - 1 ? p + GX : p;\n      const Yv = h[p] + (h[p2] - h[p]) * fv, z = v + 0.5 - ZC;\n      const y0 = ceil(FY - Yv * CE + z * SE - 0.5);\n      if (y0 >= yb) continue;\n      // Thin lotion lets the counter show through.\n      const film = sm(0.05, 0.9, Yv), fl = (FL[p] + (FL[p2] - FL[p]) * fv) * (1 - film);\n      const r = (cc[p * 3] + (cc[p2 * 3] - cc[p * 3]) * fv) * film + wall[0] * fl;\n      const g = (cc[p * 3 + 1] + (cc[p2 * 3 + 1] - cc[p * 3 + 1]) * fv) * film + wall[1] * fl;\n      const b = (cc[p * 3 + 2] + (cc[p2 * 3 + 2] - cc[p * 3 + 2]) * fv) * film + wall[2] * fl;\n      const dep = Yv * SE + z * CE;\n      for (let y = max(0, y0); y \u003c yb; y++) {\n        const q = y * W + i;\n        col[q * 3] = r;\n        col[q * 3 + 1] = g;\n        col[q * 3 + 2] = b;\n        hdep[q] = dep;\n      }\n      yb = y0;\n    }\n  }\n  // The rope: a chain of balls half an LED apart, each a sphere, the nearest\n  // surface's normal kept at every LED.\n  const ropeOn = !S.gone;\n  if (ropeOn) {\n    const t = S.t, top = min(S.top, YN + 3);\n    const landed = S.tip \u003c 0;\n    const coilTop = C.Yc + C.a1 + HC * C.R;\n    const low = landed ? coilTop : S.tip;\n    const ball = (x, Y, z, a) => {\n      if (a \u003c 0.3) return;\n      const sx = x, sy = FY - Y * CE + z * SE, dd = Y * SE + z * CE;\n      const x0 = max(0, floor(sx - a - 1)), x1 = min(W - 1, ceil(sx + a)), y0 = max(0, floor(sy - a - 1)), y1 = min(H - 1, ceil(sy + a));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let xx = x0; xx \u003c= x1; xx++) {\n          const dx = xx + 0.5 - sx, dy = y + 0.5 - sy, r = sqrt(dx * dx + dy * dy);\n          const cov = cl(a - r + 0.5, 0, 1);\n          if (cov \u003c= 0) continue;\n          const q = y * W + xx, uz = sqrt(max(0, 1 - (r * r) / (a * a)));\n          const depth = dd + a * uz;\n          if (cov \u003c rcov[q] - 0.02 || (cov \u003c= rcov[q] + 0.02 && depth \u003c= rdep[q])) continue;\n          const m = 1 / max(a, r + 1e-6);\n          rcov[q] = cov;\n          rdep[q] = depth;\n          rcol[q * 3] = dx * m;\n          rcol[q * 3 + 1] = -dy * m;\n          rcol[q * 3 + 2] = uz;\n        }\n    };\n    // The falling stream, with swellings that left the spout at a steady\n    // beat and stretch apart as the lotion speeds up.\n    for (let Y = top; Y > low; Y -= 0.5) {\n      const v = speedAt(Y), age = (v - V0) / G;\n      let a = radiusAt(L.a0, Y) * (1 + BA * sin(2 * PI * FB * (t - age)));\n      // A broken stream's upper end narrows to a rounded tail.\n      if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n      ball(AX, Y, 0, a);\n    }\n    if (!landed) ball(AX, S.tip, 0, radiusAt(L.a0, S.tip) * 1.15);\n    else {\n      // The coil: from the axis at its top it bends out to radius R, winding\n      // a quarter turn as it comes down level onto the heap.\n      const len = HC * C.R + 2 * C.R, n = ceil(len / 0.5);\n      for (let k = n; k >= 0; k--) {\n        const s = k / n, Y = C.Yc + C.a1 + HC * C.R * s * s;\n        if (Y > top) continue;\n        const r = C.R * (1 - s * s) * (1 - s * s), th = S.phi + s * PI * 0.5, e = (1 - s) * (1 - s);\n        let a = radiusAt(L.a0, Y);\n        if (S.cut) a *= 0.45 + 0.55 * sm(0, 12, top - Y);\n        ball(AX + (C.cx - AX) * e + r * cos(th), Y, C.cz * e + r * sin(th), a);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let r = col[q * 3], g = col[q * 3 + 1], b = col[q * 3 + 2];\n      const cv = rcov[q];\n      if (cv > 0 && rdep[q] > hdep[q]) {\n        // The rope, lit from the normal its nearest ball left here.\n        shade(S, rcol[q * 3], rcol[q * 3 + 1], rcol[q * 3 + 2], 0, 0, 1, LC[0], LC[1], LC[2], HCm[0], HCm[1], HCm[2], true, 1, c);\n        r += (c[0] - r) * cv;\n        g += (c[1] - g) * cv;\n        b += (c[2] - b) * cv;\n      }\n      display.setPixel(x, y, tone(r), tone(g), tone(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thick=-1..1, Gloss=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lotion and the deep wall behind it round the whole wheel together. At 0 pink lotion on plum; at 0.1 salmon on wine; at 0.2 cream and at 0.3 lemon, both on near black; at 0.45 pistachio on green; at 0.6 aqua on teal; at 0.7 powder blue on navy; at 0.8 periwinkle on indigo; at 0.9 orchid on plum. From 0.1 to 0.42 the lotion is paled and the wall taken down almost to black, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lotion leaves the top edge at 14 LEDs a second and lands at about 47, coiling about once a second; the spout runs 16 seconds, the broken tail takes 4 seconds to fall in and the next pour lands 5 seconds after that, about 21 seconds in all. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Thick","min":-1,"max":1,"about":"How heavy the lotion is. At 0 the rope is 11 LEDs wide at the top and 6 where it lands, coiling in loops 16 LEDs across that hold their folds about 3 seconds; at -1 a runny serum 9 wide, coiling 1.5 times a second in loops 10 across that melt in 2 seconds into a heap that spreads four times as fast; at 1 a rich body butter 14 wide, coiling 0.6 times a second in loops 25 across that hold 4 seconds and pile up."},{"name":"Gloss","min":-1,"max":1,"about":"At -1 a satin lotion with a broad soft sheen; at 0 a white highlight about 2 LEDs wide runs down the rope and catches the top of every fold; at 1 a wet serum, a little deeper in colour, with a thin hot highlight and a bright pearly rim."}],"start":[0,2,0,0.06],"measures":{"motion":0.0659,"detail":0.0182,"edges":0.2668,"complexity":1.0681,"coverage":0.9585,"colour":0.134,"drift":0.0362},"knobResponse":[0.16,0.0263,0.0576,0.0386]},{"slug":"lunation","title":"Lunation","family":"celestial","round":16,"note":"망원 렌즈로 본 한 달을 빠르게 돌려요. 패널 너비만 한 달이 지구조에 비친 초승달에서 보름달로 차오르며 달의 바다와 크레이터를 드러내고, 하늘도 같이 밝아져요. K1 을 누르면 다음 보름에 개기월식이 들어 달이 구릿빛이 돼요.","idea":"One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.","buttons":"K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.","code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-lunation","type":"code","name":"lunation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Latitude","min":-90,"max":90,"about":"Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down."},{"name":"Days","min":0.5,"max":4,"about":"Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4."},{"name":"Zoom","min":0,"max":1,"about":"The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame."},{"name":"Exposure","min":-2,"max":2,"about":"Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white."}],"start":[0,2,0,0.06],"measures":{"motion":0.058,"detail":0.023,"edges":0.2973,"complexity":1.178,"coverage":0.7526,"colour":0.083,"drift":0.3482},"knobResponse":[0.0549,0.1588,0.1276,0.2614]},{"slug":"mandelbrot","title":"Mandel Dive","family":"fractal","round":2,"note":"망델브로 집합 전체가 서 있다가 가장자리의 한 점으로 끝없이 떨어져 들어가요. 처음 자리는 안테나 위의 미니 망델브로라서, 다 들어가면 처음과 같은 그림으로 녹아들어 다시 떨어져요.","idea":"The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.","buttons":"K1 tap starts the next dive now.","code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-mandelbrot","type":"code","name":"mandelbrot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour bands around the wheel."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the view falls, from one doubling every eight seconds to two a second."},{"name":"Spot","min":0,"max":3,"about":"Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral."},{"name":"Bands","min":1,"max":3.5,"about":"How tightly the colour bands are packed, from slow washes to fine contour rings."}],"start":[0,2,0,1],"measures":{"motion":1.8353,"detail":0.0554,"edges":0.2209,"complexity":1.9032,"coverage":0.846,"colour":0.2924,"drift":0.4001},"knobResponse":[0.262,0.2907,0.2828,0.2216]},{"slug":"marble-run","title":"Marble Run","family":"toy","round":17,"note":"패널 높이의 구슬 굴리기 장난감이에요. 고양이눈 유리구슬이 깔때기를 돌고 지그재그 레일 셋과 나선, 실로폰을 지나 내려오면 옆의 나사 리프트가 다시 꼭대기로 올리고, 구슬이 지나는 플라스틱 조각에는 불이 들어와요. K1 을 누르면 구슬 여섯 개를 깔때기에 쏟아요.","idea":"Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.","buttons":"K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.","code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-marble-run","type":"code","name":"marble-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paint","min":0,"max":1,"about":"Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again."},{"name":"Marbles","min":6,"max":28,"about":"How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop."},{"name":"Tilt","min":0,"max":1,"about":"How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them."}],"start":[0,2,6,0.06],"measures":{"motion":0.4936,"detail":0.087,"edges":0.6482,"complexity":0.8353,"coverage":0.464,"colour":0.2101,"drift":0.042},"knobResponse":[0.0707,0.0515,0.0698,0.0736]},{"slug":"marbling","title":"Marbling","family":"print","round":15,"note":"물 위에 떨어진 잉크 방울이 과녁처럼 번지고, 빗이 지나가면 깃털과 갈매기 무늬로 끌려가요. 종이를 들어 올리면 물이 비고 다음 판에 다시 방울이 떨어져요.","idea":"Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.","buttons":"K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.","code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","layer":{"id":"layer-marbling","type":"code","name":"marbling","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top."},{"name":"Drops","min":3,"max":8,"about":"How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count."},{"name":"Comb","min":0,"max":1,"about":"How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10."}],"start":[0,2,3,0.06],"measures":{"motion":1.6459,"detail":0.1305,"edges":0.9605,"complexity":0.2799,"coverage":0.6371,"colour":0.5767,"drift":0.3773},"knobResponse":[0.3451,0.3454,0.3519,0.2984]},{"slug":"marionette","title":"Marionette","family":"stage","round":25,"note":"작은 인형극 무대에서 어릿광대 꼭두각시가 팔로 스폿을 받으며 지그를 춰요. 머리와 두 손, 두 무릎, 등에 맨 실 일곱이 꼭대기 다리에서 인형사가 쥔 십자 조종대까지 올라가서, 조종대가 기울면 실이 따라 기울고 팔과 무릎이 끌려 올라가요. K4 가 스폿을 옆으로 옮기면 인형과 실의 그림자가 반대쪽 배경막에 서고, K1 을 누르면 인형이 무릎을 접고 높이 뛰었다가 인사해요.","idea":"A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.","buttons":"K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.","code":"// ===== Patternflow pattern =====\n// Title:   Marionette\n// Family:  stage\n// Idea:    A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the string marionettes of the European puppet theatres\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1\n//\n// Knob 1: Costume. The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald.\n// Knob 2: Speed. The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower.\n// Knob 3: Number. The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order.\n// Knob 4: Spot. Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side.\n// Buttons: K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// Rows: bridge rail, grip, top of the backcloth, its foot, the ankles' floor, the apron.\nconst [RAIL, GRIP, CLOTH, BACK, FLOOR, APRON] = [3, 11, 28, 108, 117, 124];\n// Gravity in LEDs/s² (the 46 LED puppet is about 60 cm), damping per step, beats a second at Speed 2.\nconst [G, DAMP, BPS] = [700, 0.992, 2.4];\n// The puppet standing, x from its middle: temples, shoulders, hips, elbows, hands, knees, ankles.\nconst REST = [-3, 74, 3, 74, -5, 80, 5, 80, -3, 94, 3, 94, -6, 88, 6, 88, -7, 96, 7, 96, -3, 106, 3, 106, -3, 117, 3, 117];\n// Bones and their stiffness. The neck's diagonals are soft so the head can nod.\nconst BONES = \"01 02 13 03. 12. 23 45 24 35 25 34 26 68 37 79 4a ac 5b bd\".split(\" \").map((s) => [parseInt(s[0], 16), parseInt(s[1], 16), s[2] ? 0.2 : 1]);\n// The threads in the order of their anchors: temples, hands, the small of the back, knees.\nconst STR = [[0], [1], [8], [9], [4, 5], [10], [11]];\n// How low each particle may go.\nconst LIM = [3.5, 3.5, 2, 2, 2, 2, 1.5, 1.5, 1.3, 1.3, 1.6, 1.6, 0, 0].map((v) => FLOOR - v);\n// Beats in each number.\nconst LEN = [14, 8, 10, 10, 12];\n// Each number's light: wash, follow spot, its radius, footlights, pin spot, rail lamps.\nconst CUES = [\n  [0.5, 0.42, 0.34, 1, 0.9, 0.72, 21, 0.5, 0, 1],\n  [0.05, 0.05, 0.1, 0.3, 0.3, 0.34, 13, 0.12, 1, 0.8],\n  [0.12, 0.2, 0.42, 0.72, 0.84, 1, 20, 0.08, 0, 0.7],\n  [0.42, 0.1, 0.16, 1, 0.66, 0.36, 17, 1.2, 0, 1],\n  [0.58, 0.55, 0.46, 1, 1, 0.94, 25, 0.45, 0, 1],\n];\nconst WOOD = [205, 150, 95], FACE = [232, 194, 156], GOLD = [255, 200, 80], FT = [1, 0.72, 0.42], LM = [1, 0.78, 0.52], PK = [1, 0.97, 0.9];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    p: F32(42), q: F32(42), f: F32(N * 3), lt: F32(N * 3), m: F32(N), alb: F32(N * 3), pi: new Int8Array(N),\n    b: 0, num: 0, nk: -1, cue: CUES[0].slice(), leap: -1, walk: 0, sx: 32, sy: 92, bell: [38, 62, 0, 0], dust: [], k1: 0, s4: 0.06, flash: 0, stc: [0, 0],\n    C: { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0 },\n  });\n  for (let i = 0; i \u003c 14; i++) (P.p[i * 3] = P.q[i * 3] = 32 + REST[i * 2]), (P.p[i * 3 + 1] = P.q[i * 3 + 1] = REST[i * 2 + 1]);\n  const p = P.p, A = (P.A = anchors(P.C));\n  P.bl = BONES.map(([a, b]) => sqrt((p[a * 3] - p[b * 3]) ** 2 + (p[a * 3 + 1] - p[b * 3 + 1]) ** 2));\n  P.sl = STR.map((s, j) => {\n    const m = mid(p, s);\n    return sqrt((m[0] - A[j][0]) ** 2 + (m[1] - A[j][1]) ** 2 + (m[2] - A[j][2]) ** 2) + (j > 4 ? 2 : 1);\n  });\n  paint(P);\n  phys(P, A, A, 1 / 120, 150);\n}\n\nconst mid = (p, s) => [0, 1, 2].map((c) => (p[s[0] * 3 + c] + p[s[s.length - 1] * 3 + c]) / 2);\n\n// The cross: a stick from the grip with a bar across it. The leg bar is in the other hand below it.\nfunction anchors(C) {\n  const cp = cos(C.p), sp = sin(C.p), cr = cos(C.r), sr = sin(C.r), cw = cos(C.w), sw = sin(C.w);\n  const T = (lx, ly) => {\n    const y1 = ly * cp, z1 = ly * sp, x2 = lx * cr - y1 * sr, y2 = lx * sr + y1 * cr;\n    return [C.x + x2 * cw + z1 * sw, C.y + y2, -x2 * sw + z1 * cw];\n  };\n  const L = (s, k) => [C.x + s * 7 * cw, C.y + 19 - k, 3 - s * 7 * sw];\n  return [T(-4, 5), T(4, 5), T(-12, 5), T(12, 5), T(0, 16), L(-1, C.kL), L(1, C.kR), T(0, 0)];\n}\n\n// Verlet steps: gravity, bones, threads that pull only when taut, the floor.\nfunction phys(P, A0, A1, h, n) {\n  const p = P.p, q = P.q, C = P.C, h2 = h * h, d = [0, 0, 0];\n  for (let st = 0; st \u003c n; st++) {\n    const f = (st + 1) / n;\n    let rx = p[9] - p[6], rz = p[11] - p[8];\n    const rl = sqrt(rx * rx + rz * rz) || 1;\n    (rx /= rl), (rz /= rl);\n    for (let i = 0; i \u003c 14; i++) {\n      // Knees bend forward, elbows out and back, the head leans in a bow.\n      const sd = i & 1 ? 30 : -30, a = i > 9 && i \u003c 12 ? [-90 * rz, 90 * rx] : i === 6 || i === 7 ? [sd * rx + 25 * rz, sd * rz - 25 * rx] : i \u003c 2 ? [-C.lean * 400 * rz, C.lean * 400 * rx] : [0, 0];\n      for (let c = 0, o = i * 3; c \u003c 3; c++, o++) {\n        const v = (p[o] - q[o]) * DAMP;\n        (q[o] = p[o]), (p[o] += v + (c === 1 ? G : a[c >> 1]) * h2);\n      }\n    }\n    for (let it = 0; it \u003c 6; it++) {\n      BONES.forEach(([a, b, k], j) => {\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = p[b * 3 + c] - p[a * 3 + c]), (l += d[c] * d[c]);\n        const m = (1 - P.bl[j] / (sqrt(l) || 1e-6)) * 0.5 * k;\n        for (let c = 0; c \u003c 3; c++) (p[a * 3 + c] += d[c] * m), (p[b * 3 + c] -= d[c] * m);\n      });\n      for (let s = 0; s \u003c 7; s++) {\n        const m = mid(p, STR[s]), L = max(4, P.sl[s] + (s \u003c 2 ? C.sH : s === 2 ? -C.hL : s === 3 ? -C.hR : s === 4 ? C.sB : 0));\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = m[c] - mix(A0[s][c], A1[s][c], f)), (l += d[c] * d[c]);\n        if ((l = sqrt(l)) > L) for (const i of STR[s]) for (let c = 0; c \u003c 3; c++) p[i * 3 + c] -= (d[c] * (l - L)) / l;\n      }\n      for (let i = 0; i \u003c 14; i++) {\n        const o = i * 3;\n        if (p[o + 1] > LIM[i]) {\n          // A foot that comes down hard raises dust.\n          if (i > 11 && it === 0 && p[o + 1] - q[o + 1] > 0.45 && P.stc[i - 12] \u003c= 0) stamp(P, p[o], p[o + 1] - q[o + 1]), (P.stc[i - 12] = 0.25);\n          (p[o + 1] = q[o + 1] = LIM[i]), (q[o] = p[o] - (p[o] - q[o]) * 0.5), (q[o + 2] = p[o + 2] - (p[o + 2] - q[o + 2]) * 0.5);\n        }\n        (p[o] = cl(p[o], 3, 60)), (p[o + 2] = cl(p[o + 2], -14, 14));\n      }\n    }\n  }\n}\n\nfunction stamp(P, x, v) {\n  for (let i = 0; i \u003c 7; i++) P.dust.push([x + (Math.random() - 0.5) * 4, FLOOR + 1, (Math.random() - 0.5) * 40, -6 - Math.random() * 14 * v, 0.5 + Math.random() * 0.5]);\n}\n\n// What the puppeteer does with the cross in each number, beat by beat.\nfunction script(n, b) {\n  const T = { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0, au: 0 };\n  const ph = fr(b), bu = sin(PI * ph), odd = floor(b) & 1;\n  if (n === 0) {\n    // The jig: a hop on every beat, knees and arms up in turn, across and back.\n    const tr = (TAU * b) / 8, sw = sin((PI * b) / 2), e = 1 - sm(LEN[0] - 1.5, LEN[0], b);\n    (T.x = 32 + 10 * sin(tr) * e), (T.w = 0.5 * cos(tr) * e), (T.y -= 3.5 * bu * e), (T[odd ? \"kR\" : \"kL\"] = 9 * bu * bu * e);\n    (T.r = 0.3 * sw), (T.hL = 13 * max(0, sw) * e), (T.hR = 13 * max(0, -sw) * e);\n  } else if (n === 1) {\n    // The bow: the head threads let out, the back thread holds, the cross tips over.\n    const u = sm(1, 2.4, b) * (1 - sm(5, 6.6, b));\n    (T.y += u), (T.p = -0.5 * u), (T.sH = 11 * u), (T.sB = -3 * u), (T.lean = 1.3 * u), (T.w = 0.6 * u), (T.hR = 12 * sm(0.2, 1.2, b) * (1 - sm(4.6, 6.2, b))), (T.au = 1);\n  } else if (n === 2) {\n    // The flop: all let go, a heap on the floor, the head comes up to look round, lifted back up, a shake.\n    const dr = sm(0.8, 1.15, b) * (1 - sm(5.2, 6.8, b)), lk = sm(2.2, 2.9, b) * (1 - sm(4.4, 5, b));\n    (T.x = 27), (T.y += 26 * dr), (T.sH = -14 * lk * dr), (T.w = 0.7 * dr + 0.6 * sin((TAU * (b - 2.2)) / 2.2) * lk), (T.au = 1);\n    T.r = 0.35 * sin(TAU * b) * sm(6.8, 7.3, b) * (1 - sm(9, 9.8, b));\n  } else if (n === 3) {\n    // The stamp: a knee drawn up slowly and let drop hard on the beat.\n    (T.x = 37), (T[odd ? \"kR\" : \"kL\"] = 11 * sm(0.1, 0.6, ph) * (1 - sm(0.82, 0.9, ph))), (T.r = (odd ? 0.22 : -0.22) * bu);\n    (T.lean = -0.25), (T.hL = T.hR = 5), (T.w = 0.3 * sin((TAU * b) / 4)), (T.au = 1);\n  } else {\n    // The strut: across the stage and back, facing the way it goes.\n    const tr = (TAU * b) / 12;\n    (T.x = 32 + 12 * cos(tr)), (T.w = -0.8 * sin(tr)), (T.y -= 1.5 * bu), (T[odd ? \"kR\" : \"kL\"] = 6 * bu), (T.r = 0.25 * sin(PI * b)), (T.p = -0.1);\n  }\n  return T;\n}\n\n// K1's leap, in seconds: crouch, jerk up, fly, land, bow.\nfunction leap(P, T, rd) {\n  const u = P.leap, a = 1 - sm(2.7, 3.3, u), air = sm(0.25, 0.4, u) * (1 - sm(0.55, 0.95, u)), tuck = sm(0.3, 0.45, u) * (1 - sm(0.75, 0.95, u));\n  const bow = sm(1.2, 1.7, u) * (1 - sm(2.4, 3, u)), cr = sm(0, 0.2, u) * (1 - sm(0.22, 0.32, u));\n  (T.y = mix(T.y, GRIP + 4 * cr - 10 * air + 4 * bow, a)), (T.kL = T.kR = mix(T.kL, 7 * tuck, a)), (T.hL = T.hR = mix(T.hL, 15 * tuck, a));\n  (T.sH = mix(T.sH, 10 * bow, a)), (T.lean = mix(T.lean, bow, a)), (T.p = mix(T.p, -0.5 * bow, a)), (T.r *= 1 - a), (T.w *= 1 - a), (T.x = mix(T.x, P.C.x, a));\n  if (u \u003c 0.4 && u + rd >= 0.4) P.flash = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05), d = (rd * cl(k[1], 0.2, 3)) / 2;\n  (P.k1 = cl(k[0], 0, 1)), (P.s4 = cl(k[3], -1, 1));\n  const nk = round(cl(k[2], 0, 4));\n  if (nk !== P.nk) {\n    if (P.nk \u003c 0) P.cue = CUES[nk].slice();\n    (P.nk = P.num = nk), (P.b = 0);\n  }\n  if ((P.b += d * BPS) >= LEN[P.num]) (P.b -= LEN[P.num]), (P.num = (P.num + 1) % 5);\n  if (input.btnPressed && input.btnPressed[0] && P.leap \u003c 0) P.leap = 0;\n  const T = script(P.num, P.b), C = P.C, x0 = C.x;\n  if (P.leap >= 0 && (leap(P, T, rd), (P.leap += rd) > 3.3)) P.leap = -1;\n  const ex = min(1, rd / 0.45), e = min(1, rd / 0.05);\n  for (const key in C) C[key] = mix(C[key], T[key], key === \"x\" ? ex : e);\n  // Steps wherever the cross travels in a number without its own.\n  const dx = abs(C.x - x0);\n  P.walk += dx / 5;\n  if (T.au && rd > 0) {\n    const lift = min(1, dx / rd / 6) * 6 * sin(PI * fr(P.walk)) ** 2;\n    floor(P.walk) & 1 ? (C.kR = max(C.kR, lift)) : (C.kL = max(C.kL, lift));\n  }\n  const A = anchors(C), n = max(1, ceil(rd * 120 - 1e-6));\n  if (rd > 0) phys(P, P.A, A, rd / n, n);\n  P.A = A;\n  for (let i = 0; i \u003c 10; i++) P.cue[i] = mix(P.cue[i], CUES[P.num][i], min(1, rd * 2.2));\n  // The follow spot keeps to the body.\n  const p = P.p;\n  (P.sx = mix(P.sx, (p[6] + p[9] + p[12] + p[15]) / 4, min(1, rd * 3.5))), (P.sy = mix(P.sy, (p[7] + p[10] + p[13] + p[16]) / 4 + 3, min(1, rd * 2.5)));\n  // The bell on the cap swings after the head.\n  const hd = head(p), B = P.bell, gx = hd.x + hd.ux * 7 - hd.uy * 6, gy = hd.y + hd.uy * 7 + hd.ux * 6 + 2;\n  (B[2] += ((gx - B[0]) * 160 - B[2] * 7) * rd), (B[3] += ((gy - B[1]) * 160 - B[3] * 7 + 60) * rd), (B[0] += B[2] * rd), (B[1] += B[3] * rd);\n  (B[0] = cl(B[0], gx - 6, gx + 6)), (B[1] = cl(B[1], gy - 6, gy + 6));\n  P.dust = P.dust.filter((s) => ((s[3] += 50 * rd), (s[0] += s[2] * rd), (s[1] = min(FLOOR + 2, s[1] + s[3] * rd)), (s[4] -= rd) > 0));\n  (P.stc[0] -= rd), (P.stc[1] -= rd), (P.flash = max(0, P.flash - rd * 1.5));\n}\n\n// The head: its middle, which way is up, how far it is turned and nodded.\nfunction head(p) {\n  const x = (p[0] + p[3]) / 2, y = (p[1] + p[4]) / 2 - 0.5, z = (p[2] + p[5]) / 2, sx = (p[6] + p[9]) / 2, sy = (p[7] + p[10]) / 2, sz = (p[8] + p[11]) / 2;\n  const l = Math.hypot(x - sx, y - sy) || 1;\n  return { x, y, ux: (x - sx) / l, uy: (y - sy) / l, yaw: atan2(-(p[5] - p[2]), p[3] - p[0]), nod: (z - sz) / 6.3 };\n}\n\n// What does not move: velvet, rail, backcloth, boards, apron.\nfunction paint(P) {\n  const A = P.alb, I = P.pi;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.05, 0.045, 0.06];\n    I[i] = -1;\n    if (y >= RAIL && y \u003c= RAIL + 3) {\n      const g = (0.8 + 0.3 * hash(floor((x + y * 7) / 11), y)) * (y === RAIL ? 1.2 : y === RAIL + 3 ? 0.6 : 1) * (0.92 + 0.08 * n);\n      c = [0.55 * g, 0.36 * g, 0.22 * g];\n    } else if (y >= CLOTH - 2 && y \u003c CLOTH) c = [0.13, 0.1, 0.08];\n    else if (y >= CLOTH && y \u003c BACK) {\n      // Painted night: stars over two rows of hills, in soft folds.\n      const hf = 86 + 4 * sin(x * 0.09 + 0.5) + 2 * sin(x * 0.27 + 1), hn = 97 + 3 * sin(x * 0.13 + 2) + 1.5 * sin(x * 0.41);\n      const cx = floor(x / 7), cy = floor(y / 8), r = hash(cx, cy + 50), sx = cx * 7 + 1 + floor(r * 5), sy = cy * 8 + 1 + floor(hash(cx + 9, cy) * 6);\n      I[i] = y >= hn ? 2 : y >= hf ? 1 : r \u003c 0.5 && y \u003c hf - 3 ? (x === sx && y === sy ? 3 : abs(x - sx) + abs(y - sy) === 1 ? 4 : 0) : 0;\n      c = [(0.8 + 0.2 * (0.5 + 0.5 * sin(x * 0.95 + 0.6 * sin(y * 0.05)))) * (0.95 + 0.1 * n), 0, 0];\n    } else if (y >= BACK && y \u003c APRON) {\n      // Boards running towards you.\n      const u = (x - 31.5) / ((y - 30) / (APRON - 30)) / 6 + 0.5, bd = floor(u), g = (0.8 + 0.2 * hash(bd, 3)) * mix(0.45, 1, cl(min(fr(u), 1 - fr(u)) * 9 - 0.3, 0, 1)) * (y > APRON - 3 ? 1.12 : 1) * (0.92 + 0.14 * hash(x, bd * 31 + floor(y / 3)));\n      c = [0.6 * g, 0.42 * g, 0.27 * g];\n    } else if (y >= APRON) c = y === APRON ? [0.4, 0.28, 0.18] : [0.14, 0.09, 0.07];\n    (A[o] = c[0]), (A[o + 1] = c[1]), (A[o + 2] = c[2]);\n  }\n}\n\nlet F, L, M, MODE, SIDE;\n// One LED of the puppet or cross: the shadow mask, or its colour in the light there.\nfunction dot(x, y, c, nx = 0, flat = 0) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const i = y * W + x, o = i * 3;\n  if (MODE === 0) return void (M[i] = 1);\n  const k = 1 - 0.2 * nx * nx + 0.4 * SIDE * nx;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = c[j] * max(flat, L[o + j]) * k;\n}\n// A capsule; the colour may be a function of how far along.\nfunction seg(x0, y0, x1, y1, r, c, flat = 0) {\n  const dx = x1 - x0, dy = y1 - y0, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = floor(min(y0, y1) - r); y \u003c= ceil(max(y0, y1) + r); y++)\n    for (let x = floor(min(x0, x1) - r); x \u003c= ceil(max(x0, x1) + r); x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / l2, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      if (ex * ex + ey * ey \u003c= r * r) dot(x, y, typeof c === \"function\" ? c(t) : c, cl(ex / r, -1, 1), flat);\n    }\n}\nconst disc = (x, y, r, c, flat) => seg(x, y, x, y, r, c, flat);\n\n// A thread: one LED wide over two columns, a faint halo, a glint that slides as it tilts.\nfunction thread(ax, ay, bx, by, gl) {\n  const n = ceil(abs(by - ay)) + 1, tilt = (bx - ax) / (by - ay || 1), g0 = 0.5 + 6 * (tilt + SIDE * 0.06);\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n, x = mix(ax, bx, t), y = round(mix(ay, by, t)), x0 = floor(x), f = x - x0;\n    if (y \u003c 0 || y >= H) continue;\n    if (MODE === 0) {\n      if (x0 >= 0 && x0 \u003c W) M[y * W + x0] = max(M[y * W + x0], 0.45);\n      continue;\n    }\n    const o = (y * W + cl(x0, 0, W - 1)) * 3, gls = gl * 150 * exp(-((((t - g0) * n) / 5) ** 2));\n    for (let e = -1; e \u003c 3; e++) {\n      const xx = x0 + e, a = e \u003c 0 ? 0.12 - 0.12 * f : e ? (e > 1 ? 0.12 * f : 0.12 + 0.88 * f) : 1 - 0.88 * f, q = (y * W + xx) * 3;\n      if (xx \u003c 0 || xx >= W) continue;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += a * (24 + 64 * L[o + j] + gls);\n    }\n  }\n}\n\nfunction puppet(P, C1, C2) {\n  const p = P.p, X = (i) => p[i * 3], Y = (i) => p[i * 3 + 1], Z = (i) => p[i * 3 + 2], tz = (Z(2) + Z(3) + Z(4) + Z(5)) / 4;\n  const stock = (t) => (floor(t * 5) & 1 ? C1 : [235, 228, 210]);\n  const limb = (a, b, c, up, low, r1, r2) => {\n    seg(X(a), Y(a), X(b), Y(b), r1, up), seg(X(b), Y(b), X(c), Y(c), r2, low);\n  };\n  const arm = (s) => (limb(2 + s, 6 + s, 8 + s, C2, C1, 1.6, 1.2), disc(X(8 + s), Y(8 + s), 1.4, FACE));\n  const leg = (s) => {\n    limb(4 + s, 10 + s, 12 + s, C2, stock, 1.8, 1.2);\n    const fx = X(12 + s), fy = Y(12 + s) + 1.2, yw = atan2(-(Z(3) - Z(2)), X(3) - X(2));\n    seg(fx - 1.2, fy, fx + 1.2 + 2.4 * sin(yw), fy, 1.1, C2.map((v) => v * 0.55)), dot(round(fx + 2.4 + 2.6 * sin(yw)), round(fy - 1), GOLD);\n  };\n  const parts = [[(Z(6) + Z(8)) / 2, () => arm(0)], [(Z(7) + Z(9)) / 2, () => arm(1)], [(Z(10) + Z(12)) / 2, () => leg(0)], [(Z(11) + Z(13)) / 2, () => leg(1)]];\n  for (const [z, f] of parts) if (z \u003c tz - 1) f();\n  // The doublet in diamonds, flaring to a hem of points, with a belt.\n  const sx = (X(2) + X(3)) / 2, sy = (Y(2) + Y(3)) / 2, hx = (X(4) + X(5)) / 2, hy = (Y(4) + Y(5)) / 2, ax = hx - sx, ay = hy - sy, al = ax * ax + ay * ay || 1;\n  let ex = X(3) - X(2) + X(5) - X(4), ey = Y(3) - Y(2) + Y(5) - Y(4);\n  const el = Math.hypot(ex, ey) || 1, hwS = max(2.5, Math.hypot(X(3) - X(2), Y(3) - Y(2)) / 2), hwH = max(2.5, Math.hypot(X(5) - X(4), Y(5) - Y(4)) * 0.62);\n  (ex /= el), (ey /= el);\n  for (let y = floor(min(sy, hy) - 6); y \u003c= ceil(max(sy, hy) + 6); y++)\n    for (let x = floor(min(sx, hx) - 7); x \u003c= ceil(max(sx, hx) + 7); x++) {\n      const v = ((x - sx) * ax + (y - sy) * ay) / al, hw = mix(hwS, hwH, v), u = ((x - sx - ax * v) * ex + (y - sy - ay * v) * ey) / hw;\n      if (v \u003c -0.05 || abs(u) > 1 || v > 1.1 + 0.12 * abs(fr(u * 2.5) - 0.5) * 2) continue;\n      const belt = v > 0.84 && v \u003c 0.94, dia = (floor(u * 1.6 + v * 3.2) + floor(u * 1.6 - v * 3.2)) & 1;\n      dot(x, y, belt ? (abs(u) \u003c 0.22 ? GOLD : [60, 40, 30]) : dia ? C1 : C2, u);\n    }\n  for (const [z, f] of parts) if (z >= tz - 1) f();\n  // The ruff, the head, the face, the cap and its bell.\n  seg(X(2), Y(2) - 1, X(3), Y(3) - 1, 1.7, (t) => (floor(t * 9) & 1 ? [250, 246, 236] : [205, 200, 192]));\n  const hd = head(p), R = 4.3, px = -hd.uy, py = hd.ux;\n  disc(hd.x, hd.y, R, FACE);\n  if (MODE && hd.nod \u003c 0.7)\n    for (const [ph, hy, c] of [[0.5, -0.4, [30, 22, 34]], [0.8, 1.2, [240, 120, 110]], [0, 2.1, [150, 40, 46]], [-0.5, -0.4, [30, 22, 34]], [-0.8, 1.2, [240, 120, 110]]]) {\n      const a = ph + hd.yaw;\n      if (cos(a) > 0.25) dot(round(hd.x + R * 0.85 * sin(a)), round(hd.y + hy + hd.nod * 3), c);\n    }\n  const b0x = hd.x + hd.ux * 3.1, b0y = hd.y + hd.uy * 3.1, b1x = hd.x + hd.ux * 8 + px, b1y = hd.y + hd.uy * 8 + py, [bx, by] = P.bell;\n  for (let i = 0, lx = b0x, ly = b0y; i \u003c= 8; i++) {\n    const t = i / 8, x = mix(mix(b0x, b1x, t), mix(b1x, bx, t), t), y = mix(mix(b0y, b1y, t), mix(b1y, by, t), t);\n    seg(lx, ly, x, y, mix(3.3, 0.8, t), C1), (lx = x), (ly = y);\n  }\n  seg(hd.x + hd.ux * 2.3 - px * 4, hd.y + hd.uy * 2.3 - py * 4, hd.x + hd.ux * 2.3 + px * 4, hd.y + hd.uy * 2.3 + py * 4, 0.9, C2);\n  disc(bx, by, 1.3, GOLD);\n}\n\n// The puppeteer's sleeves and hands, the cross and the leg bar.\nfunction cross(P) {\n  const A = P.A, [gx, gy] = A[7], sleeve = [46, 38, 60], skin = [232, 176, 140], cuff = [236, 232, 222];\n  const arm = (x0, x1, y1) => seg(x0, -3, x1, y1, 2.6, (t) => (t > 0.84 ? cuff : sleeve), 0.32);\n  seg(A[5][0] - 1.5, A[5][1], A[6][0] + 1.5, A[6][1], 0.7, WOOD, 0.35);\n  seg(gx, gy, A[4][0], A[4][1], 0.9, WOOD, 0.35), seg(A[2][0], A[2][1], A[3][0], A[3][1], 0.8, WOOD, 0.35);\n  for (let j = 0; j \u003c 7; j++) dot(round(A[j][0]), round(A[j][1]), [220, 220, 230], 0, 0.5);\n  arm(gx + 17, gx + 1.5, gy - 1.5), disc(gx + 0.5, gy - 0.5, 2.2, skin, 0.4);\n  arm(A[5][0] - 22, A[5][0] - 2.5, A[5][1] - 1), disc(A[5][0] - 2, A[5][1] - 0.5, 2, skin, 0.4);\n}\n\nfunction stage(P, pal) {\n  const [wr, wg, wb, sr0, sg0, sb0, rad0, foot, pin, lamp] = P.cue, s = P.s4, A = P.alb, I = P.pi, p = P.p;\n  const fl = 1 + 0.5 * P.flash, rad = rad0 + 7 * P.flash, S = [sr0 * fl, sg0 * fl, sb0 * fl], WS = [wr, wg, wb];\n  const px = P.sx - s * 11, py = P.sy, rx = rad * (1 + 0.45 * abs(s)), ry = rad * 1.35, sdx = -s * 15, fx = (p[36] + p[39]) / 2, pinX = P.sx;\n  const lift = [0, 1].map((j) => 1 - sm(0, 8, FLOOR - p[37 + j * 3]));\n  for (let y = 0; y \u003c H; y++) {\n    const ft = y \u003c APRON ? foot * exp((y - APRON) / 14) : 0, wash = y \u003c CLOTH - 2 ? (y >= RAIL && y \u003c= RAIL + 3 ? 0.3 : 0.08) : 1, cw = 2 + (y + 12) * 0.085;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = (x - px) / rx, dy = (y - py) / ry, pool = 1 - sm(0.84, 1, sqrt(dx * dx + dy * dy));\n      const lm = lamp * (1 / (1 + ((x - 4.5) ** 2 + (y - 10) ** 2) / 260) + 1 / (1 + ((x - 59.5) ** 2 + (y - 10) ** 2) / 260));\n      let cone = 0;\n      if (pin > 0.01) cone = y >= BACK ? pin * (1 - sm(0.7, 1, sqrt(((x - pinX) / 12) ** 2 + ((y - FLOOR - 1) / 4) ** 2))) : pin * (1 - sm(0.6, 1, abs(x - pinX) / cw));\n      for (let j = 0; j \u003c 3; j++) L[o + j] = wash * WS[j] + pool * S[j] + ft * FT[j] + lm * LM[j] + cone * PK[j];\n      // The shadow stands up from the feet, larger, away from the spot.\n      let sh = 0, k = 1;\n      if (y >= CLOTH && y \u003c APRON && pool > 0) {\n        const mx = round(fx + (x - fx - sdx) / 1.12), my = round(FLOOR + (y - FLOOR + 3) / 1.12);\n        if (mx >= 0 && mx \u003c W && my >= 0 && my \u003c H) sh = M[my * W + mx] * pool * 0.8;\n      }\n      if (y > BACK && y \u003c APRON) for (let j = 0; j \u003c 2; j++) k *= 1 - 0.6 * lift[j] * exp(-1.5 * (((x - p[36 + j * 3]) / 3.5) ** 2 + ((y - FLOOR - 1.5) / 1.3) ** 2));\n      const c = I[i] >= 0 ? pal[I[i]] : null, f = c ? A[o] : 1, cf = c ? 0.8 * cone : 0;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = (c ? c[j] : A[o + j]) * f * k * (L[o + j] - sh * S[j] - cf * PK[j]) * 255;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  [F, L, M, SIDE] = [P.f, P.lt, P.m, P.s4];\n  const h = 0.36 + P.k1, hc = 0.61 + 0.3 * sin(TAU * P.k1), A = P.A, p = P.p;\n  const C1 = hsv(h, 0.8, 0.8).map((v) => v * 255), C2 = hsv(h + 0.06, 0.75, 0.42).map((v) => v * 255);\n  const sky = hsv(hc, 0.62, 0.34), star = [0.95, 0.78, 0.4], pal = [sky, hsv(hc + 0.06, 0.55, 0.46), hsv(hc + 0.12, 0.6, 0.58), star, sky.map((v, j) => mix(v, star[j], 0.4))];\n  const threads = (from, to) => {\n    for (let s = from; s \u003c to; s++) {\n      const m = mid(p, STR[s]), side = s \u003c 2 ? (s ? 2 : -2) * cos(head(p).yaw) : 0;\n      thread(A[s][0], A[s][1], m[0] + side, m[1] - (s \u003c 2 ? 1 : 0), s === 4 ? 0.4 : 1);\n    }\n  };\n  // The shadow first: the puppet and its threads as a mask.\n  M.fill(0), (MODE = 0), threads(0, 7), puppet(P, C1, C2);\n  (MODE = 1), stage(P, pal);\n  threads(0, 7), puppet(P, C1, C2), cross(P);\n  // Dust from the stamps, the haze in the pin beam, the footlights.\n  for (const [x, y, , , l] of P.dust) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) F[o + j] += [190, 160, 130][j] * l * 0.6 * max(0.4, L[o + j]);\n  }\n  const pin = P.cue[8];\n  if (pin > 0.01)\n    for (let y = 0; y \u003c BACK; y++) {\n      const cw = 2 + (y + 12) * 0.085;\n      for (let x = 0; x \u003c W; x++) {\n        const c = pin * 0.09 * (1 - sm(0.6, 1, abs(x - P.sx) / cw)) * 255;\n        for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += c * PK[j];\n      }\n    }\n  // The clip lamps on the rail and the footlights.\n  for (const x of [4.5, 59.5]) {\n    seg(x - 2, 7.5, x + 2, 7.5, 1.2, [40, 80, 58], 0.5), seg(x - 0.5, 9.2, x + 0.5, 9.2, 0.6, [255, 226, 170], P.cue[9]);\n    for (let i = -3; i \u003c 4; i++) for (let j = 0; j \u003c 3; j++) F[(10 * W + round(x + i)) * 3 + j] += (80 * P.cue[9] * LM[j]) / (1 + i * i);\n  }\n  const fb = min(1, P.cue[7] * 1.2 + 0.15);\n  for (const x of [6, 19, 32, 45, 57])\n    for (let i = -2; i \u003c= 3; i++) {\n      const a = i === 0 || i === 1 ? fb : fb * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[(125 * W + x + i) * 3 + j] += 255 * a * FT[j];\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","layer":{"id":"layer-marionette","type":"code","name":"marionette","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marionette\n// Family:  stage\n// Idea:    A jester marionette dances in a follow spot on a little stage, every joint hanging from a thread that runs up to the wooden cross in the puppeteer's hand on the lamplit bridge, so each tilt of the cross shows in the threads and the limbs they pull.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the string marionettes of the European puppet theatres\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1\n//\n// Knob 1: Costume. The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald.\n// Knob 2: Speed. The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower.\n// Knob 3: Number. The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order.\n// Knob 4: Spot. Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side.\n// Buttons: K1 tap: the puppeteer jerks the cross up, the puppet leaps with its knees tucked, lands and bows.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst fr = (v) => v - floor(v);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = fr(h) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// Rows: bridge rail, grip, top of the backcloth, its foot, the ankles' floor, the apron.\nconst [RAIL, GRIP, CLOTH, BACK, FLOOR, APRON] = [3, 11, 28, 108, 117, 124];\n// Gravity in LEDs/s² (the 46 LED puppet is about 60 cm), damping per step, beats a second at Speed 2.\nconst [G, DAMP, BPS] = [700, 0.992, 2.4];\n// The puppet standing, x from its middle: temples, shoulders, hips, elbows, hands, knees, ankles.\nconst REST = [-3, 74, 3, 74, -5, 80, 5, 80, -3, 94, 3, 94, -6, 88, 6, 88, -7, 96, 7, 96, -3, 106, 3, 106, -3, 117, 3, 117];\n// Bones and their stiffness. The neck's diagonals are soft so the head can nod.\nconst BONES = \"01 02 13 03. 12. 23 45 24 35 25 34 26 68 37 79 4a ac 5b bd\".split(\" \").map((s) => [parseInt(s[0], 16), parseInt(s[1], 16), s[2] ? 0.2 : 1]);\n// The threads in the order of their anchors: temples, hands, the small of the back, knees.\nconst STR = [[0], [1], [8], [9], [4, 5], [10], [11]];\n// How low each particle may go.\nconst LIM = [3.5, 3.5, 2, 2, 2, 2, 1.5, 1.5, 1.3, 1.3, 1.6, 1.6, 0, 0].map((v) => FLOOR - v);\n// Beats in each number.\nconst LEN = [14, 8, 10, 10, 12];\n// Each number's light: wash, follow spot, its radius, footlights, pin spot, rail lamps.\nconst CUES = [\n  [0.5, 0.42, 0.34, 1, 0.9, 0.72, 21, 0.5, 0, 1],\n  [0.05, 0.05, 0.1, 0.3, 0.3, 0.34, 13, 0.12, 1, 0.8],\n  [0.12, 0.2, 0.42, 0.72, 0.84, 1, 20, 0.08, 0, 0.7],\n  [0.42, 0.1, 0.16, 1, 0.66, 0.36, 17, 1.2, 0, 1],\n  [0.58, 0.55, 0.46, 1, 1, 0.94, 25, 0.45, 0, 1],\n];\nconst WOOD = [205, 150, 95], FACE = [232, 194, 156], GOLD = [255, 200, 80], FT = [1, 0.72, 0.42], LM = [1, 0.78, 0.52], PK = [1, 0.97, 0.9];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    p: F32(42), q: F32(42), f: F32(N * 3), lt: F32(N * 3), m: F32(N), alb: F32(N * 3), pi: new Int8Array(N),\n    b: 0, num: 0, nk: -1, cue: CUES[0].slice(), leap: -1, walk: 0, sx: 32, sy: 92, bell: [38, 62, 0, 0], dust: [], k1: 0, s4: 0.06, flash: 0, stc: [0, 0],\n    C: { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0 },\n  });\n  for (let i = 0; i \u003c 14; i++) (P.p[i * 3] = P.q[i * 3] = 32 + REST[i * 2]), (P.p[i * 3 + 1] = P.q[i * 3 + 1] = REST[i * 2 + 1]);\n  const p = P.p, A = (P.A = anchors(P.C));\n  P.bl = BONES.map(([a, b]) => sqrt((p[a * 3] - p[b * 3]) ** 2 + (p[a * 3 + 1] - p[b * 3 + 1]) ** 2));\n  P.sl = STR.map((s, j) => {\n    const m = mid(p, s);\n    return sqrt((m[0] - A[j][0]) ** 2 + (m[1] - A[j][1]) ** 2 + (m[2] - A[j][2]) ** 2) + (j > 4 ? 2 : 1);\n  });\n  paint(P);\n  phys(P, A, A, 1 / 120, 150);\n}\n\nconst mid = (p, s) => [0, 1, 2].map((c) => (p[s[0] * 3 + c] + p[s[s.length - 1] * 3 + c]) / 2);\n\n// The cross: a stick from the grip with a bar across it. The leg bar is in the other hand below it.\nfunction anchors(C) {\n  const cp = cos(C.p), sp = sin(C.p), cr = cos(C.r), sr = sin(C.r), cw = cos(C.w), sw = sin(C.w);\n  const T = (lx, ly) => {\n    const y1 = ly * cp, z1 = ly * sp, x2 = lx * cr - y1 * sr, y2 = lx * sr + y1 * cr;\n    return [C.x + x2 * cw + z1 * sw, C.y + y2, -x2 * sw + z1 * cw];\n  };\n  const L = (s, k) => [C.x + s * 7 * cw, C.y + 19 - k, 3 - s * 7 * sw];\n  return [T(-4, 5), T(4, 5), T(-12, 5), T(12, 5), T(0, 16), L(-1, C.kL), L(1, C.kR), T(0, 0)];\n}\n\n// Verlet steps: gravity, bones, threads that pull only when taut, the floor.\nfunction phys(P, A0, A1, h, n) {\n  const p = P.p, q = P.q, C = P.C, h2 = h * h, d = [0, 0, 0];\n  for (let st = 0; st \u003c n; st++) {\n    const f = (st + 1) / n;\n    let rx = p[9] - p[6], rz = p[11] - p[8];\n    const rl = sqrt(rx * rx + rz * rz) || 1;\n    (rx /= rl), (rz /= rl);\n    for (let i = 0; i \u003c 14; i++) {\n      // Knees bend forward, elbows out and back, the head leans in a bow.\n      const sd = i & 1 ? 30 : -30, a = i > 9 && i \u003c 12 ? [-90 * rz, 90 * rx] : i === 6 || i === 7 ? [sd * rx + 25 * rz, sd * rz - 25 * rx] : i \u003c 2 ? [-C.lean * 400 * rz, C.lean * 400 * rx] : [0, 0];\n      for (let c = 0, o = i * 3; c \u003c 3; c++, o++) {\n        const v = (p[o] - q[o]) * DAMP;\n        (q[o] = p[o]), (p[o] += v + (c === 1 ? G : a[c >> 1]) * h2);\n      }\n    }\n    for (let it = 0; it \u003c 6; it++) {\n      BONES.forEach(([a, b, k], j) => {\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = p[b * 3 + c] - p[a * 3 + c]), (l += d[c] * d[c]);\n        const m = (1 - P.bl[j] / (sqrt(l) || 1e-6)) * 0.5 * k;\n        for (let c = 0; c \u003c 3; c++) (p[a * 3 + c] += d[c] * m), (p[b * 3 + c] -= d[c] * m);\n      });\n      for (let s = 0; s \u003c 7; s++) {\n        const m = mid(p, STR[s]), L = max(4, P.sl[s] + (s \u003c 2 ? C.sH : s === 2 ? -C.hL : s === 3 ? -C.hR : s === 4 ? C.sB : 0));\n        let l = 0;\n        for (let c = 0; c \u003c 3; c++) (d[c] = m[c] - mix(A0[s][c], A1[s][c], f)), (l += d[c] * d[c]);\n        if ((l = sqrt(l)) > L) for (const i of STR[s]) for (let c = 0; c \u003c 3; c++) p[i * 3 + c] -= (d[c] * (l - L)) / l;\n      }\n      for (let i = 0; i \u003c 14; i++) {\n        const o = i * 3;\n        if (p[o + 1] > LIM[i]) {\n          // A foot that comes down hard raises dust.\n          if (i > 11 && it === 0 && p[o + 1] - q[o + 1] > 0.45 && P.stc[i - 12] \u003c= 0) stamp(P, p[o], p[o + 1] - q[o + 1]), (P.stc[i - 12] = 0.25);\n          (p[o + 1] = q[o + 1] = LIM[i]), (q[o] = p[o] - (p[o] - q[o]) * 0.5), (q[o + 2] = p[o + 2] - (p[o + 2] - q[o + 2]) * 0.5);\n        }\n        (p[o] = cl(p[o], 3, 60)), (p[o + 2] = cl(p[o + 2], -14, 14));\n      }\n    }\n  }\n}\n\nfunction stamp(P, x, v) {\n  for (let i = 0; i \u003c 7; i++) P.dust.push([x + (Math.random() - 0.5) * 4, FLOOR + 1, (Math.random() - 0.5) * 40, -6 - Math.random() * 14 * v, 0.5 + Math.random() * 0.5]);\n}\n\n// What the puppeteer does with the cross in each number, beat by beat.\nfunction script(n, b) {\n  const T = { x: 32, y: GRIP, r: 0, p: 0, w: 0, kL: 0, kR: 0, hL: 0, hR: 0, sH: 0, sB: 0, lean: 0, au: 0 };\n  const ph = fr(b), bu = sin(PI * ph), odd = floor(b) & 1;\n  if (n === 0) {\n    // The jig: a hop on every beat, knees and arms up in turn, across and back.\n    const tr = (TAU * b) / 8, sw = sin((PI * b) / 2), e = 1 - sm(LEN[0] - 1.5, LEN[0], b);\n    (T.x = 32 + 10 * sin(tr) * e), (T.w = 0.5 * cos(tr) * e), (T.y -= 3.5 * bu * e), (T[odd ? \"kR\" : \"kL\"] = 9 * bu * bu * e);\n    (T.r = 0.3 * sw), (T.hL = 13 * max(0, sw) * e), (T.hR = 13 * max(0, -sw) * e);\n  } else if (n === 1) {\n    // The bow: the head threads let out, the back thread holds, the cross tips over.\n    const u = sm(1, 2.4, b) * (1 - sm(5, 6.6, b));\n    (T.y += u), (T.p = -0.5 * u), (T.sH = 11 * u), (T.sB = -3 * u), (T.lean = 1.3 * u), (T.w = 0.6 * u), (T.hR = 12 * sm(0.2, 1.2, b) * (1 - sm(4.6, 6.2, b))), (T.au = 1);\n  } else if (n === 2) {\n    // The flop: all let go, a heap on the floor, the head comes up to look round, lifted back up, a shake.\n    const dr = sm(0.8, 1.15, b) * (1 - sm(5.2, 6.8, b)), lk = sm(2.2, 2.9, b) * (1 - sm(4.4, 5, b));\n    (T.x = 27), (T.y += 26 * dr), (T.sH = -14 * lk * dr), (T.w = 0.7 * dr + 0.6 * sin((TAU * (b - 2.2)) / 2.2) * lk), (T.au = 1);\n    T.r = 0.35 * sin(TAU * b) * sm(6.8, 7.3, b) * (1 - sm(9, 9.8, b));\n  } else if (n === 3) {\n    // The stamp: a knee drawn up slowly and let drop hard on the beat.\n    (T.x = 37), (T[odd ? \"kR\" : \"kL\"] = 11 * sm(0.1, 0.6, ph) * (1 - sm(0.82, 0.9, ph))), (T.r = (odd ? 0.22 : -0.22) * bu);\n    (T.lean = -0.25), (T.hL = T.hR = 5), (T.w = 0.3 * sin((TAU * b) / 4)), (T.au = 1);\n  } else {\n    // The strut: across the stage and back, facing the way it goes.\n    const tr = (TAU * b) / 12;\n    (T.x = 32 + 12 * cos(tr)), (T.w = -0.8 * sin(tr)), (T.y -= 1.5 * bu), (T[odd ? \"kR\" : \"kL\"] = 6 * bu), (T.r = 0.25 * sin(PI * b)), (T.p = -0.1);\n  }\n  return T;\n}\n\n// K1's leap, in seconds: crouch, jerk up, fly, land, bow.\nfunction leap(P, T, rd) {\n  const u = P.leap, a = 1 - sm(2.7, 3.3, u), air = sm(0.25, 0.4, u) * (1 - sm(0.55, 0.95, u)), tuck = sm(0.3, 0.45, u) * (1 - sm(0.75, 0.95, u));\n  const bow = sm(1.2, 1.7, u) * (1 - sm(2.4, 3, u)), cr = sm(0, 0.2, u) * (1 - sm(0.22, 0.32, u));\n  (T.y = mix(T.y, GRIP + 4 * cr - 10 * air + 4 * bow, a)), (T.kL = T.kR = mix(T.kL, 7 * tuck, a)), (T.hL = T.hR = mix(T.hL, 15 * tuck, a));\n  (T.sH = mix(T.sH, 10 * bow, a)), (T.lean = mix(T.lean, bow, a)), (T.p = mix(T.p, -0.5 * bow, a)), (T.r *= 1 - a), (T.w *= 1 - a), (T.x = mix(T.x, P.C.x, a));\n  if (u \u003c 0.4 && u + rd >= 0.4) P.flash = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05), d = (rd * cl(k[1], 0.2, 3)) / 2;\n  (P.k1 = cl(k[0], 0, 1)), (P.s4 = cl(k[3], -1, 1));\n  const nk = round(cl(k[2], 0, 4));\n  if (nk !== P.nk) {\n    if (P.nk \u003c 0) P.cue = CUES[nk].slice();\n    (P.nk = P.num = nk), (P.b = 0);\n  }\n  if ((P.b += d * BPS) >= LEN[P.num]) (P.b -= LEN[P.num]), (P.num = (P.num + 1) % 5);\n  if (input.btnPressed && input.btnPressed[0] && P.leap \u003c 0) P.leap = 0;\n  const T = script(P.num, P.b), C = P.C, x0 = C.x;\n  if (P.leap >= 0 && (leap(P, T, rd), (P.leap += rd) > 3.3)) P.leap = -1;\n  const ex = min(1, rd / 0.45), e = min(1, rd / 0.05);\n  for (const key in C) C[key] = mix(C[key], T[key], key === \"x\" ? ex : e);\n  // Steps wherever the cross travels in a number without its own.\n  const dx = abs(C.x - x0);\n  P.walk += dx / 5;\n  if (T.au && rd > 0) {\n    const lift = min(1, dx / rd / 6) * 6 * sin(PI * fr(P.walk)) ** 2;\n    floor(P.walk) & 1 ? (C.kR = max(C.kR, lift)) : (C.kL = max(C.kL, lift));\n  }\n  const A = anchors(C), n = max(1, ceil(rd * 120 - 1e-6));\n  if (rd > 0) phys(P, P.A, A, rd / n, n);\n  P.A = A;\n  for (let i = 0; i \u003c 10; i++) P.cue[i] = mix(P.cue[i], CUES[P.num][i], min(1, rd * 2.2));\n  // The follow spot keeps to the body.\n  const p = P.p;\n  (P.sx = mix(P.sx, (p[6] + p[9] + p[12] + p[15]) / 4, min(1, rd * 3.5))), (P.sy = mix(P.sy, (p[7] + p[10] + p[13] + p[16]) / 4 + 3, min(1, rd * 2.5)));\n  // The bell on the cap swings after the head.\n  const hd = head(p), B = P.bell, gx = hd.x + hd.ux * 7 - hd.uy * 6, gy = hd.y + hd.uy * 7 + hd.ux * 6 + 2;\n  (B[2] += ((gx - B[0]) * 160 - B[2] * 7) * rd), (B[3] += ((gy - B[1]) * 160 - B[3] * 7 + 60) * rd), (B[0] += B[2] * rd), (B[1] += B[3] * rd);\n  (B[0] = cl(B[0], gx - 6, gx + 6)), (B[1] = cl(B[1], gy - 6, gy + 6));\n  P.dust = P.dust.filter((s) => ((s[3] += 50 * rd), (s[0] += s[2] * rd), (s[1] = min(FLOOR + 2, s[1] + s[3] * rd)), (s[4] -= rd) > 0));\n  (P.stc[0] -= rd), (P.stc[1] -= rd), (P.flash = max(0, P.flash - rd * 1.5));\n}\n\n// The head: its middle, which way is up, how far it is turned and nodded.\nfunction head(p) {\n  const x = (p[0] + p[3]) / 2, y = (p[1] + p[4]) / 2 - 0.5, z = (p[2] + p[5]) / 2, sx = (p[6] + p[9]) / 2, sy = (p[7] + p[10]) / 2, sz = (p[8] + p[11]) / 2;\n  const l = Math.hypot(x - sx, y - sy) || 1;\n  return { x, y, ux: (x - sx) / l, uy: (y - sy) / l, yaw: atan2(-(p[5] - p[2]), p[3] - p[0]), nod: (z - sz) / 6.3 };\n}\n\n// What does not move: velvet, rail, backcloth, boards, apron.\nfunction paint(P) {\n  const A = P.alb, I = P.pi;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.05, 0.045, 0.06];\n    I[i] = -1;\n    if (y >= RAIL && y \u003c= RAIL + 3) {\n      const g = (0.8 + 0.3 * hash(floor((x + y * 7) / 11), y)) * (y === RAIL ? 1.2 : y === RAIL + 3 ? 0.6 : 1) * (0.92 + 0.08 * n);\n      c = [0.55 * g, 0.36 * g, 0.22 * g];\n    } else if (y >= CLOTH - 2 && y \u003c CLOTH) c = [0.13, 0.1, 0.08];\n    else if (y >= CLOTH && y \u003c BACK) {\n      // Painted night: stars over two rows of hills, in soft folds.\n      const hf = 86 + 4 * sin(x * 0.09 + 0.5) + 2 * sin(x * 0.27 + 1), hn = 97 + 3 * sin(x * 0.13 + 2) + 1.5 * sin(x * 0.41);\n      const cx = floor(x / 7), cy = floor(y / 8), r = hash(cx, cy + 50), sx = cx * 7 + 1 + floor(r * 5), sy = cy * 8 + 1 + floor(hash(cx + 9, cy) * 6);\n      I[i] = y >= hn ? 2 : y >= hf ? 1 : r \u003c 0.5 && y \u003c hf - 3 ? (x === sx && y === sy ? 3 : abs(x - sx) + abs(y - sy) === 1 ? 4 : 0) : 0;\n      c = [(0.8 + 0.2 * (0.5 + 0.5 * sin(x * 0.95 + 0.6 * sin(y * 0.05)))) * (0.95 + 0.1 * n), 0, 0];\n    } else if (y >= BACK && y \u003c APRON) {\n      // Boards running towards you.\n      const u = (x - 31.5) / ((y - 30) / (APRON - 30)) / 6 + 0.5, bd = floor(u), g = (0.8 + 0.2 * hash(bd, 3)) * mix(0.45, 1, cl(min(fr(u), 1 - fr(u)) * 9 - 0.3, 0, 1)) * (y > APRON - 3 ? 1.12 : 1) * (0.92 + 0.14 * hash(x, bd * 31 + floor(y / 3)));\n      c = [0.6 * g, 0.42 * g, 0.27 * g];\n    } else if (y >= APRON) c = y === APRON ? [0.4, 0.28, 0.18] : [0.14, 0.09, 0.07];\n    (A[o] = c[0]), (A[o + 1] = c[1]), (A[o + 2] = c[2]);\n  }\n}\n\nlet F, L, M, MODE, SIDE;\n// One LED of the puppet or cross: the shadow mask, or its colour in the light there.\nfunction dot(x, y, c, nx = 0, flat = 0) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const i = y * W + x, o = i * 3;\n  if (MODE === 0) return void (M[i] = 1);\n  const k = 1 - 0.2 * nx * nx + 0.4 * SIDE * nx;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = c[j] * max(flat, L[o + j]) * k;\n}\n// A capsule; the colour may be a function of how far along.\nfunction seg(x0, y0, x1, y1, r, c, flat = 0) {\n  const dx = x1 - x0, dy = y1 - y0, l2 = dx * dx + dy * dy || 1e-6;\n  for (let y = floor(min(y0, y1) - r); y \u003c= ceil(max(y0, y1) + r); y++)\n    for (let x = floor(min(x0, x1) - r); x \u003c= ceil(max(x0, x1) + r); x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / l2, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      if (ex * ex + ey * ey \u003c= r * r) dot(x, y, typeof c === \"function\" ? c(t) : c, cl(ex / r, -1, 1), flat);\n    }\n}\nconst disc = (x, y, r, c, flat) => seg(x, y, x, y, r, c, flat);\n\n// A thread: one LED wide over two columns, a faint halo, a glint that slides as it tilts.\nfunction thread(ax, ay, bx, by, gl) {\n  const n = ceil(abs(by - ay)) + 1, tilt = (bx - ax) / (by - ay || 1), g0 = 0.5 + 6 * (tilt + SIDE * 0.06);\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n, x = mix(ax, bx, t), y = round(mix(ay, by, t)), x0 = floor(x), f = x - x0;\n    if (y \u003c 0 || y >= H) continue;\n    if (MODE === 0) {\n      if (x0 >= 0 && x0 \u003c W) M[y * W + x0] = max(M[y * W + x0], 0.45);\n      continue;\n    }\n    const o = (y * W + cl(x0, 0, W - 1)) * 3, gls = gl * 150 * exp(-((((t - g0) * n) / 5) ** 2));\n    for (let e = -1; e \u003c 3; e++) {\n      const xx = x0 + e, a = e \u003c 0 ? 0.12 - 0.12 * f : e ? (e > 1 ? 0.12 * f : 0.12 + 0.88 * f) : 1 - 0.88 * f, q = (y * W + xx) * 3;\n      if (xx \u003c 0 || xx >= W) continue;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += a * (24 + 64 * L[o + j] + gls);\n    }\n  }\n}\n\nfunction puppet(P, C1, C2) {\n  const p = P.p, X = (i) => p[i * 3], Y = (i) => p[i * 3 + 1], Z = (i) => p[i * 3 + 2], tz = (Z(2) + Z(3) + Z(4) + Z(5)) / 4;\n  const stock = (t) => (floor(t * 5) & 1 ? C1 : [235, 228, 210]);\n  const limb = (a, b, c, up, low, r1, r2) => {\n    seg(X(a), Y(a), X(b), Y(b), r1, up), seg(X(b), Y(b), X(c), Y(c), r2, low);\n  };\n  const arm = (s) => (limb(2 + s, 6 + s, 8 + s, C2, C1, 1.6, 1.2), disc(X(8 + s), Y(8 + s), 1.4, FACE));\n  const leg = (s) => {\n    limb(4 + s, 10 + s, 12 + s, C2, stock, 1.8, 1.2);\n    const fx = X(12 + s), fy = Y(12 + s) + 1.2, yw = atan2(-(Z(3) - Z(2)), X(3) - X(2));\n    seg(fx - 1.2, fy, fx + 1.2 + 2.4 * sin(yw), fy, 1.1, C2.map((v) => v * 0.55)), dot(round(fx + 2.4 + 2.6 * sin(yw)), round(fy - 1), GOLD);\n  };\n  const parts = [[(Z(6) + Z(8)) / 2, () => arm(0)], [(Z(7) + Z(9)) / 2, () => arm(1)], [(Z(10) + Z(12)) / 2, () => leg(0)], [(Z(11) + Z(13)) / 2, () => leg(1)]];\n  for (const [z, f] of parts) if (z \u003c tz - 1) f();\n  // The doublet in diamonds, flaring to a hem of points, with a belt.\n  const sx = (X(2) + X(3)) / 2, sy = (Y(2) + Y(3)) / 2, hx = (X(4) + X(5)) / 2, hy = (Y(4) + Y(5)) / 2, ax = hx - sx, ay = hy - sy, al = ax * ax + ay * ay || 1;\n  let ex = X(3) - X(2) + X(5) - X(4), ey = Y(3) - Y(2) + Y(5) - Y(4);\n  const el = Math.hypot(ex, ey) || 1, hwS = max(2.5, Math.hypot(X(3) - X(2), Y(3) - Y(2)) / 2), hwH = max(2.5, Math.hypot(X(5) - X(4), Y(5) - Y(4)) * 0.62);\n  (ex /= el), (ey /= el);\n  for (let y = floor(min(sy, hy) - 6); y \u003c= ceil(max(sy, hy) + 6); y++)\n    for (let x = floor(min(sx, hx) - 7); x \u003c= ceil(max(sx, hx) + 7); x++) {\n      const v = ((x - sx) * ax + (y - sy) * ay) / al, hw = mix(hwS, hwH, v), u = ((x - sx - ax * v) * ex + (y - sy - ay * v) * ey) / hw;\n      if (v \u003c -0.05 || abs(u) > 1 || v > 1.1 + 0.12 * abs(fr(u * 2.5) - 0.5) * 2) continue;\n      const belt = v > 0.84 && v \u003c 0.94, dia = (floor(u * 1.6 + v * 3.2) + floor(u * 1.6 - v * 3.2)) & 1;\n      dot(x, y, belt ? (abs(u) \u003c 0.22 ? GOLD : [60, 40, 30]) : dia ? C1 : C2, u);\n    }\n  for (const [z, f] of parts) if (z >= tz - 1) f();\n  // The ruff, the head, the face, the cap and its bell.\n  seg(X(2), Y(2) - 1, X(3), Y(3) - 1, 1.7, (t) => (floor(t * 9) & 1 ? [250, 246, 236] : [205, 200, 192]));\n  const hd = head(p), R = 4.3, px = -hd.uy, py = hd.ux;\n  disc(hd.x, hd.y, R, FACE);\n  if (MODE && hd.nod \u003c 0.7)\n    for (const [ph, hy, c] of [[0.5, -0.4, [30, 22, 34]], [0.8, 1.2, [240, 120, 110]], [0, 2.1, [150, 40, 46]], [-0.5, -0.4, [30, 22, 34]], [-0.8, 1.2, [240, 120, 110]]]) {\n      const a = ph + hd.yaw;\n      if (cos(a) > 0.25) dot(round(hd.x + R * 0.85 * sin(a)), round(hd.y + hy + hd.nod * 3), c);\n    }\n  const b0x = hd.x + hd.ux * 3.1, b0y = hd.y + hd.uy * 3.1, b1x = hd.x + hd.ux * 8 + px, b1y = hd.y + hd.uy * 8 + py, [bx, by] = P.bell;\n  for (let i = 0, lx = b0x, ly = b0y; i \u003c= 8; i++) {\n    const t = i / 8, x = mix(mix(b0x, b1x, t), mix(b1x, bx, t), t), y = mix(mix(b0y, b1y, t), mix(b1y, by, t), t);\n    seg(lx, ly, x, y, mix(3.3, 0.8, t), C1), (lx = x), (ly = y);\n  }\n  seg(hd.x + hd.ux * 2.3 - px * 4, hd.y + hd.uy * 2.3 - py * 4, hd.x + hd.ux * 2.3 + px * 4, hd.y + hd.uy * 2.3 + py * 4, 0.9, C2);\n  disc(bx, by, 1.3, GOLD);\n}\n\n// The puppeteer's sleeves and hands, the cross and the leg bar.\nfunction cross(P) {\n  const A = P.A, [gx, gy] = A[7], sleeve = [46, 38, 60], skin = [232, 176, 140], cuff = [236, 232, 222];\n  const arm = (x0, x1, y1) => seg(x0, -3, x1, y1, 2.6, (t) => (t > 0.84 ? cuff : sleeve), 0.32);\n  seg(A[5][0] - 1.5, A[5][1], A[6][0] + 1.5, A[6][1], 0.7, WOOD, 0.35);\n  seg(gx, gy, A[4][0], A[4][1], 0.9, WOOD, 0.35), seg(A[2][0], A[2][1], A[3][0], A[3][1], 0.8, WOOD, 0.35);\n  for (let j = 0; j \u003c 7; j++) dot(round(A[j][0]), round(A[j][1]), [220, 220, 230], 0, 0.5);\n  arm(gx + 17, gx + 1.5, gy - 1.5), disc(gx + 0.5, gy - 0.5, 2.2, skin, 0.4);\n  arm(A[5][0] - 22, A[5][0] - 2.5, A[5][1] - 1), disc(A[5][0] - 2, A[5][1] - 0.5, 2, skin, 0.4);\n}\n\nfunction stage(P, pal) {\n  const [wr, wg, wb, sr0, sg0, sb0, rad0, foot, pin, lamp] = P.cue, s = P.s4, A = P.alb, I = P.pi, p = P.p;\n  const fl = 1 + 0.5 * P.flash, rad = rad0 + 7 * P.flash, S = [sr0 * fl, sg0 * fl, sb0 * fl], WS = [wr, wg, wb];\n  const px = P.sx - s * 11, py = P.sy, rx = rad * (1 + 0.45 * abs(s)), ry = rad * 1.35, sdx = -s * 15, fx = (p[36] + p[39]) / 2, pinX = P.sx;\n  const lift = [0, 1].map((j) => 1 - sm(0, 8, FLOOR - p[37 + j * 3]));\n  for (let y = 0; y \u003c H; y++) {\n    const ft = y \u003c APRON ? foot * exp((y - APRON) / 14) : 0, wash = y \u003c CLOTH - 2 ? (y >= RAIL && y \u003c= RAIL + 3 ? 0.3 : 0.08) : 1, cw = 2 + (y + 12) * 0.085;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = (x - px) / rx, dy = (y - py) / ry, pool = 1 - sm(0.84, 1, sqrt(dx * dx + dy * dy));\n      const lm = lamp * (1 / (1 + ((x - 4.5) ** 2 + (y - 10) ** 2) / 260) + 1 / (1 + ((x - 59.5) ** 2 + (y - 10) ** 2) / 260));\n      let cone = 0;\n      if (pin > 0.01) cone = y >= BACK ? pin * (1 - sm(0.7, 1, sqrt(((x - pinX) / 12) ** 2 + ((y - FLOOR - 1) / 4) ** 2))) : pin * (1 - sm(0.6, 1, abs(x - pinX) / cw));\n      for (let j = 0; j \u003c 3; j++) L[o + j] = wash * WS[j] + pool * S[j] + ft * FT[j] + lm * LM[j] + cone * PK[j];\n      // The shadow stands up from the feet, larger, away from the spot.\n      let sh = 0, k = 1;\n      if (y >= CLOTH && y \u003c APRON && pool > 0) {\n        const mx = round(fx + (x - fx - sdx) / 1.12), my = round(FLOOR + (y - FLOOR + 3) / 1.12);\n        if (mx >= 0 && mx \u003c W && my >= 0 && my \u003c H) sh = M[my * W + mx] * pool * 0.8;\n      }\n      if (y > BACK && y \u003c APRON) for (let j = 0; j \u003c 2; j++) k *= 1 - 0.6 * lift[j] * exp(-1.5 * (((x - p[36 + j * 3]) / 3.5) ** 2 + ((y - FLOOR - 1.5) / 1.3) ** 2));\n      const c = I[i] >= 0 ? pal[I[i]] : null, f = c ? A[o] : 1, cf = c ? 0.8 * cone : 0;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = (c ? c[j] : A[o + j]) * f * k * (L[o + j] - sh * S[j] - cf * PK[j]) * 255;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  [F, L, M, SIDE] = [P.f, P.lt, P.m, P.s4];\n  const h = 0.36 + P.k1, hc = 0.61 + 0.3 * sin(TAU * P.k1), A = P.A, p = P.p;\n  const C1 = hsv(h, 0.8, 0.8).map((v) => v * 255), C2 = hsv(h + 0.06, 0.75, 0.42).map((v) => v * 255);\n  const sky = hsv(hc, 0.62, 0.34), star = [0.95, 0.78, 0.4], pal = [sky, hsv(hc + 0.06, 0.55, 0.46), hsv(hc + 0.12, 0.6, 0.58), star, sky.map((v, j) => mix(v, star[j], 0.4))];\n  const threads = (from, to) => {\n    for (let s = from; s \u003c to; s++) {\n      const m = mid(p, STR[s]), side = s \u003c 2 ? (s ? 2 : -2) * cos(head(p).yaw) : 0;\n      thread(A[s][0], A[s][1], m[0] + side, m[1] - (s \u003c 2 ? 1 : 0), s === 4 ? 0.4 : 1);\n    }\n  };\n  // The shadow first: the puppet and its threads as a mask.\n  M.fill(0), (MODE = 0), threads(0, 7), puppet(P, C1, C2);\n  (MODE = 1), stage(P, pal);\n  threads(0, 7), puppet(P, C1, C2), cross(P);\n  // Dust from the stamps, the haze in the pin beam, the footlights.\n  for (const [x, y, , , l] of P.dust) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) F[o + j] += [190, 160, 130][j] * l * 0.6 * max(0.4, L[o + j]);\n  }\n  const pin = P.cue[8];\n  if (pin > 0.01)\n    for (let y = 0; y \u003c BACK; y++) {\n      const cw = 2 + (y + 12) * 0.085;\n      for (let x = 0; x \u003c W; x++) {\n        const c = pin * 0.09 * (1 - sm(0.6, 1, abs(x - P.sx) / cw)) * 255;\n        for (let j = 0; j \u003c 3; j++) F[(y * W + x) * 3 + j] += c * PK[j];\n      }\n    }\n  // The clip lamps on the rail and the footlights.\n  for (const x of [4.5, 59.5]) {\n    seg(x - 2, 7.5, x + 2, 7.5, 1.2, [40, 80, 58], 0.5), seg(x - 0.5, 9.2, x + 0.5, 9.2, 0.6, [255, 226, 170], P.cue[9]);\n    for (let i = -3; i \u003c 4; i++) for (let j = 0; j \u003c 3; j++) F[(10 * W + round(x + i)) * 3 + j] += (80 * P.cue[9] * LM[j]) / (1 + i * i);\n  }\n  const fb = min(1, P.cue[7] * 1.2 + 0.15);\n  for (const x of [6, 19, 32, 45, 57])\n    for (let i = -2; i \u003c= 3; i++) {\n      const a = i === 0 || i === 1 ? fb : fb * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[(125 * W + x + i) * 3 + j] += 255 * a * FT[j];\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Costume=0..1, Speed=0.2..3, Number=0..4, Spot=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Costume","min":0,"max":1,"about":"The jester's motley: emerald at 0, then blue, magenta, scarlet and amber. The painted backcloth changes with it, a blue night behind the emerald."},{"name":"Speed","min":0.2,"max":3,"about":"The tempo: at 2 the jig goes at 144 beats a minute and the five numbers take 22.5 s; at 0.2 ten times slower."},{"name":"Number","min":0,"max":4,"about":"The number the show opens on, each in its own light: the jig in warm light, the bow under a pin spot, the flop in moonlight, the stamping dance over footlights, the strut across the stage. The rest follow in order."},{"name":"Spot","min":-1,"max":1,"about":"Where the follow spot stands out front, left at -1 to right at 1. The pool slides away from it, and the shadow of the puppet and its threads falls on the backcloth on the other side."}],"start":[0,2,0,0.06],"measures":{"motion":0.7728,"detail":0.0499,"edges":0.328,"complexity":1.7055,"coverage":0.7031,"colour":0.18,"drift":0.1687},"knobResponse":[0.0905,0.1199,0.1924,0.0547]},{"slug":"maze","title":"Maze","family":"algo","round":2,"note":"미로를 한 칸씩 파고 나면 입구에서 너비 우선 물결이 퍼져 복도마다 거리만큼 색을 입혀요. 가장 짧은 길이 밝게 그어지고, 미로가 부서진 자리에 다음 미로가 파여요.","idea":"A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.","buttons":"K1 tap crumbles the maze and carves a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-maze","type":"code","name":"maze","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it."},{"name":"Speed","min":0,"max":4,"about":"Carving, flood and trace together, from about 50 carving steps a second to about 1100."},{"name":"Cell","min":2,"max":4,"about":"Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25."},{"name":"Carver","min":0,"max":3,"about":"0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row."}],"start":[0,2,2,0.06],"measures":{"motion":0.0785,"detail":0.1747,"edges":0.9998,"complexity":0.1404,"coverage":0.6288,"colour":0.2889,"drift":0.1789},"knobResponse":[0.1257,0.2208,0.2744,0.1999]},{"slug":"meander","title":"Meander","family":"line","round":30,"note":"패널 한가운데 세로로 난 길을 12번에서 32번 건너는 닫힌 곡선 하나예요. 한쪽 아치들이 길 위로 누웠다가 새 짝으로 펴져도 곡선은 늘 하나로 닫혀요.","idea":"A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.","buttons":"K1 tap folds both sides at once and opens a fresh meander of the same order.","code":"// ===== Patternflow pattern =====\n// Title:   Meander\n// Family:  line\n// Idea:    A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: meanders (Vladimir Arnold, 1988), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1\n//\n// Knob 1: Hue. Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse.\n// Knob 2: Speed. At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again.\n// Knob 3: Crossings. How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander.\n// Knob 4: Hollow. At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left.\n// Buttons: K1 tap folds both sides at once and opens a fresh meander of the same order.\n\n// The road runs down the middle, between columns 31 and 32. The 2n crossings\n// sit evenly on it from row 2 to row 126, 4 LEDs apart at n = 16, and the\n// widest arc on a side reaches 28.5 LEDs out, so its line stays off the wall.\n// A meander of order n is a pair of non-crossing matchings of those points,\n// arcs on the left and arcs on the right, that join into one loop. Arnold\n// asked how many there are: 1, 2, 8, 42, 262, 1828, ..., each about ten\n// times the last by n = 16 and the ratio creeping up towards 12.26. No\n// formula is known.\nconst W = 64, H = 128, NP = W * H, MID = 32, WMAX = 28.5, TOP = 2, SPAN = 124;\nconst { min, max, floor, ceil, sqrt, cos, acos, abs, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n// The arc's distance from the road: its semicircle r, cut off softly at the\n// width w its nesting gives it. Both grow from an arc to any arc round it,\n// so nested arcs never touch.\nconst smin = (w, r) => (w \u003c= 0 || r \u003c= 0 ? 0 : (w * r) / sqrt(sqrt(w * w * w * w + r * r * r * r)));\n\n// A non-crossing perfect matching of 2n points as a uniform random Dyck word,\n// by the cycle lemma: shuffle n opens and n + 1 closes, start just after the\n// first lowest point of the walk, drop the last close.\nconst WALK = new Int8Array(33);\nfunction dyck(n, P) {\n  const m = 2 * n + 1, a = WALK;\n  for (let i = 0; i \u003c m; i++) a[i] = i \u003c n ? 1 : -1;\n  for (let i = m - 1; i > 0; i--) {\n    const j = floor(random() * (i + 1)), t = a[i];\n    (a[i] = a[j]), (a[j] = t);\n  }\n  let s = 0, lo = 0, at = 0;\n  for (let i = 0; i \u003c m; i++) if ((s += a[i]) \u003c lo) (lo = s), (at = i);\n  const st = [];\n  for (let k = 0; k \u003c 2 * n; k++) {\n    if (a[(at + 1 + k) % m] > 0) st.push(k);\n    else {\n      const o = st.pop();\n      (P[o] = k), (P[k] = o);\n    }\n  }\n}\n\n// Left arcs and right arcs together are one closed curve when walking left,\n// right, left, ... from point 0 meets every point before it comes back.\nfunction oneLoop(L, R, n2) {\n  let i = 0, c = 0;\n  do (i = R[L[i]]), (c += 2);\n  while (i !== 0 && c \u003c= n2);\n  return c === n2;\n}\n\n// Each arc's height: 0 when no arc lies inside it, else one more than the\n// highest arc directly inside. It sets the arc's width, so a nest of any\n// depth fits between the road and the wall.\nfunction heights(P, n2, h) {\n  const st = new Int8Array(n2 + 1);\n  let sp = 0;\n  st[0] = -1;\n  for (let i = 0; i \u003c n2; i++) {\n    if (P[i] > i) st[++sp] = -1;\n    else {\n      const v = st[sp--] + 1;\n      h[i] = h[P[i]] = v;\n      if (v > st[sp]) st[sp] = v;\n    }\n  }\n  return st[0];\n}\n\nfunction dress(n, L, R) {\n  const hL = new Int8Array(2 * n), hR = new Int8Array(2 * n);\n  return { n, L, R, hL, hR, HL: heights(L, 2 * n, hL), HR: heights(R, 2 * n, hR) };\n}\n\n// A uniform random meander of order n: draw both sides until they close into\n// one loop. About one pair in 10 does at n = 6 and one in 210 at n = 16.\nfunction meander(n) {\n  for (; n > 1; n--) {\n    const L = new Int8Array(2 * n), R = new Int8Array(2 * n);\n    for (let t = 0; t \u003c 4000; t++) {\n      dyck(n, L), dyck(n, R);\n      if (oneLoop(L, R, 2 * n)) return dress(n, L, R);\n    }\n  }\n  return dress(1, new Int8Array([1, 0]), new Int8Array([1, 0]));\n}\n\n// The same meander with side X drawn again, the other side kept.\nfunction reside(M, X) {\n  const n = M.n, Q = new Int8Array(2 * n);\n  for (let t = 0; t \u003c 4000; t++) {\n    dyck(n, Q);\n    if (X ? oneLoop(M.L, Q, 2 * n) : oneLoop(Q, M.R, 2 * n)) return X ? dress(n, M.L, Q) : dress(n, Q, M.R);\n  }\n  return M;\n}\n\nexport function setup(params) {\n  params.s = {\n    M: null, n2: 0, ph: 0, side: 2, u: 0, next: 0, both: false, flow: 0, ck: 0, cu: 0,\n    // the loop, arc by arc: from point, to point, side (0 left, 1 right)\n    AF: new Int8Array(32), AT: new Int8Array(32), AS: new Int8Array(32),\n    // each kept arc's place on the loop before the last swap, at its start and end\n    OS: new Float32Array(32), OE: new Float32Array(32), OK: new Uint8Array(32), old: 0,\n    len: new Float32Array(32), cum: new Float32Array(33),\n    gp: new Float32Array(32 * 6), D: new Float32Array(NP), LA: new Int8Array(NP), LT: new Float32Array(NP),\n    hue: 0, speed: 2, hollow: 0.06, nT: 6,\n  };\n}\n\n// Walk the loop from point a, first along side s.\nfunction order(P, a, s) {\n  const M = P.M;\n  for (let k = 0; k \u003c P.n2; k++) {\n    const b = s ? M.R[a] : M.L[a];\n    (P.AF[k] = a), (P.AT[k] = b), (P.AS[k] = s);\n    (a = b), (s ^= 1);\n  }\n}\n\n// Swap in new arcs while the side is flat on the road. A one-side swap keeps\n// the pulse on the kept arc it is on, or the next one, and lets every kept\n// arc carry its old colours over into the new loop's while the side opens.\nfunction swap(P) {\n  const X = P.side;\n  if (X === 2) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), floor(random() * 2));\n    (P.ck = 0), (P.cu = 0), (P.old = 0), (P.side = 2);\n    return;\n  }\n  const Q = 1 - X, n2 = P.n2, L = P.cum[n2] || 1;\n  const os = new Float32Array(n2), oe = new Float32Array(n2);\n  for (let k = 0; k \u003c n2; k++)\n    if (P.AS[k] === Q) {\n      const i = P.AF[k], j = P.AT[k];\n      (os[i] = P.cum[k] / L), (oe[i] = P.cum[k + 1] / L);\n      (os[j] = P.cum[k + 1] / L), (oe[j] = P.cum[k] / L);\n    }\n  let a = P.AF[P.ck];\n  if (P.AS[P.ck] !== Q) (a = P.AT[P.ck]), (P.cu = 0);\n  P.M = reside(P.M, X);\n  order(P, a, Q);\n  P.ck = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    P.OK[k] = P.AS[k] === Q ? 1 : 0;\n    (P.OS[k] = os[P.AF[k]]), (P.OE[k] = oe[P.AF[k]]);\n  }\n  P.old = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nT = cl(round(cl(k[2], 12, 32) / 2), 6, 16);\n  P.hollow = cl(k[3], 0, 1);\n  if (!P.M) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), 0);\n    (P.ph = 2), (P.side = 2), (P.u = 0);\n  }\n  const s = P.speed;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.both = true;\n    if (P.ph === 0) P.u = 1;\n  }\n  // 0 hold, 1 close, 2 open; in clock units that run at Speed a second.\n  if (P.ph === 0) {\n    P.u += (d * s) / 7;\n    if (P.M.n !== P.nT) P.u = 1;\n    if (P.u >= 1) {\n      P.side = P.both || P.M.n !== P.nT ? 2 : P.next;\n      if (P.side \u003c 2) P.next ^= 1;\n      (P.both = false), (P.ph = 1), (P.u = 0);\n    }\n  } else if (P.ph === 1) {\n    P.u += (d * s) / 1.2;\n    if (P.u >= 1) swap(P), (P.ph = 2), (P.u = 0);\n  } else {\n    P.u += (d * s) / 1.8;\n    if (P.u >= 1) (P.ph = 0), (P.u = 0), (P.old = 0);\n  }\n  P.flow += d * s * 0.04;\n  // The pulse: 40 LEDs of curve a second per unit of Speed.\n  P.cu += (d * s * 40) / max(4, P.len[P.ck]);\n  while (P.cu >= 1) (P.cu -= 1), (P.ck = (P.ck + 1) % P.n2);\n}\n\n// The colour wheel once round the loop, 1024 steps.\nconst LUT = new Float32Array(1024 * 3);\nfor (let i = 0; i \u003c 1024; i++) {\n  const h = (i / 1024) * 6, j = floor(h), f = h - j;\n  const c = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][j];\n  for (let q = 0; q \u003c 3; q++) LUT[i * 3 + q] = c[q] ** 0.9;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.M) return;\n  const M = P.M, n2 = P.n2, sp = SPAN / (n2 - 1), g = P.gp;\n  const open = P.ph === 0 ? 1 : P.ph === 1 ? 1 - ease(P.u) : ease(P.u);\n  const sL = P.side === 1 ? 1 : open, sR = P.side === 0 ? 1 : open;\n  const mix = P.old ? ease(P.ph === 2 ? P.u : 1) : 1;\n  // Each arc: top and bottom y, centre, radius, width, side sign. While a\n  // side folds, its arcs all lose width at one rate, so the innermost lie flat\n  // first and the nest never crosses itself; it opens outermost first.\n  for (let k = 0; k \u003c n2; k++) {\n    const a = P.AF[k], b = P.AT[k], side = P.AS[k];\n    const h = side ? M.hR[a] : M.hL[a], Hs = side ? M.HR : M.HL, so = side ? sR : sL;\n    const ya = TOP + a * sp, yb = TOP + b * sp, o = k * 6;\n    (g[o] = min(ya, yb)), (g[o + 1] = max(ya, yb));\n    (g[o + 2] = (ya + yb) / 2), (g[o + 3] = abs(yb - ya) / 2);\n    g[o + 4] = (WMAX / (Hs + 1)) * cl(so * (Hs + 1) - (Hs - h), 0, h + 1);\n    g[o + 5] = side ? 1 : -1;\n  }\n  // The curve: sample every arc in loop order, keep for each LED the nearest\n  // sample, which arc it was on and how far along.\n  const D = P.D, LA = P.LA, LT = P.LT;\n  D.fill(9);\n  P.cum[0] = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    const o = k * 6, c = g[o + 2], R = g[o + 3], w = g[o + 4], sg = g[o + 5];\n    const down = P.AF[k] \u003c P.AT[k], ns = max(4, ceil((PI * R) / 0.4));\n    let px = 0, py = 0, len = 0;\n    for (let j = 0; j \u003c= ns; j++) {\n      const t = (PI * j) / ns, X = MID + sg * smin(w, R * Math.sin(t)), Y = c - R * cos(t);\n      if (j) len += sqrt((X - px) ** 2 + (Y - py) ** 2);\n      (px = X), (py = Y);\n      const tau = down ? j / ns : 1 - j / ns;\n      for (let yy = ceil(Y - 2.3), y1 = floor(Y + 1.3); yy \u003c= y1; yy++) {\n        if (yy \u003c 0 || yy >= H) continue;\n        const ey = yy + 0.5 - Y;\n        for (let xx = ceil(X - 2.3), x1 = floor(X + 1.3); xx \u003c= x1; xx++) {\n          if (xx \u003c 0 || xx >= W) continue;\n          const ex = xx + 0.5 - X, dd = ex * ex + ey * ey, p = yy * W + xx;\n          if (dd \u003c D[p]) (D[p] = dd), (LA[p] = k), (LT[p] = tau);\n        }\n      }\n    }\n    P.len[k] = len;\n    P.cum[k + 1] = P.cum[k] + len;\n  }\n  const Ltot = P.cum[n2] || 1, head = P.cum[P.ck] + P.cu * P.len[P.ck];\n  // Where on the loop a point is, 0..1, with a kept arc's old place blended\n  // into its new one while its side opens.\n  const at = (k, tau) => {\n    let f = (P.cum[k] + tau * P.len[k]) / Ltot;\n    if (mix \u003c 1 && P.OK[k]) {\n      let e = P.OS[k] + tau * (P.OE[k] - P.OS[k]) - f;\n      e -= round(e);\n      f += (1 - mix) * e;\n    }\n    return f;\n  };\n  // The pulse's head, for the glow round it.\n  const ho = P.ck * 6, hr = g[ho + 3], ht = PI * (P.AF[P.ck] \u003c P.AT[P.ck] ? P.cu : 1 - P.cu);\n  const hx = MID + g[ho + 5] * smin(g[ho + 4], hr * Math.sin(ht)), hy = g[ho + 2] - hr * cos(ht);\n  const hue0 = P.hue + 0.55 - P.flow, fillV = 255 * 0.97 * (1 - P.hollow) ** 1.2;\n  const lineS = 0.5 + 0.35 * P.hollow;\n  // The inside by the even-odd rule, row by row: a LED is inside when a ray\n  // from it to the right wall crosses the curve an odd number of times. The\n  // arcs a row meets on one side are nested, so the band a LED sits in takes\n  // the colour of the arc just outside it, at this row.\n  const fl = new Float32Array(16), ka = new Int8Array(16), ta = new Float32Array(16);\n  const fr = new Float32Array(16), kb = new Int8Array(16), tb = new Float32Array(16);\n  for (let yy = 0; yy \u003c H; yy++) {\n    const yc = yy + 0.5;\n    let nl = 0, nr = 0;\n    for (let k = 0; k \u003c n2; k++) {\n      const o = k * 6;\n      if (!(g[o] \u003c yc && yc \u003c g[o + 1])) continue;\n      const c = g[o + 2], R = g[o + 3], dy = yc - c, f = smin(g[o + 4], sqrt(R * R - dy * dy));\n      const t = acos(cl(-dy / R, -1, 1)) / PI, tau = P.AF[k] \u003c P.AT[k] ? t : 1 - t;\n      const A = g[o + 5] > 0 ? fr : fl, KK = g[o + 5] > 0 ? kb : ka, T = g[o + 5] > 0 ? tb : ta;\n      let i = g[o + 5] > 0 ? nr++ : nl++;\n      while (i > 0 && A[i - 1] > f) (A[i] = A[i - 1]), (KK[i] = KK[i - 1]), (T[i] = T[i - 1]), i--;\n      (A[i] = f), (KK[i] = k), (T[i] = tau);\n    }\n    for (let half = 0; half \u003c 2; half++) {\n      const A = half ? fr : fl, KK = half ? kb : ka, T = half ? tb : ta, n = half ? nr : nl;\n      let i = 0;\n      for (let q = 0; q \u003c 32; q++) {\n        const xx = half ? MID + q : MID - 1 - q, dist = q + 0.5, p = yy * W + xx;\n        while (i \u003c n && A[i] \u003c dist) i++;\n        let r = 0, gg = 0, b = 0;\n        const inside = half ? (nr - i) & 1 : (i + nr) & 1;\n        if (inside && fillV > 0) {\n          const f = at(KK[i], T[i]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          (r = LUT[ix] * fillV), (gg = LUT[ix + 1] * fillV), (b = LUT[ix + 2] * fillV);\n        }\n        // The road, a faint line on the dark and a darker one through the colour.\n        if (q === 0) {\n          if (inside && fillV > 0) (r *= 0.6), (gg *= 0.6), (b *= 0.6);\n          else (r += 34), (gg += 36), (b += 44);\n        }\n        const dl = sqrt(D[p]);\n        if (dl \u003c 2.3) {\n          const k = LA[p], f = at(k, LT[p]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          let behind = (head - (P.cum[k] + LT[p] * P.len[k])) % Ltot;\n          if (behind \u003c 0) behind += Ltot;\n          const pulse = exp(-behind / 24) + (behind > Ltot - 3 ? (behind - Ltot + 3) / 3 : 0);\n          const I = cl(1.75 - dl * 1.1, 0, 1), J = cl(2 - dl * 0.75, 0, 1) * pulse, wh = 1 - lineS;\n          let lr = 255 * (wh + lineS * LUT[ix]), lg = 255 * (wh + lineS * LUT[ix + 1]), lb = 255 * (wh + lineS * LUT[ix + 2]);\n          const pv = min(1, pulse);\n          (lr += (255 - lr) * pv), (lg += (250 - lg) * pv), (lb += (235 - lb) * pv);\n          const m = max(I, J);\n          (r += (lr - r) * m), (gg += (lg - gg) * m), (b += (lb - b) * m);\n        }\n        const ex = xx + 0.5 - hx, ey = yc - hy, e2 = ex * ex + ey * ey;\n        if (e2 \u003c 30) {\n          const gl = 0.9 * exp(-e2 / 6);\n          (r += (255 - r) * gl), (gg += (250 - gg) * gl), (b += (235 - b) * gl);\n        }\n        display.setPixel(xx, yy, min(255, r), min(255, gg), min(255, b));\n      }\n    }\n  }\n}\n","layer":{"id":"layer-meander","type":"code","name":"meander","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Meander\n// Family:  line\n// Idea:    A random meander, one closed curve that crosses a straight road down the middle of the panel 12 to 32 times, filled solid with the colour wheel laid once round its length; every few seconds the arcs on one side fold flat onto the road and open again as a new set that still closes into one loop.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: meanders (Vladimir Arnold, 1988), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1\n//\n// Knob 1: Hue. Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse.\n// Knob 2: Speed. At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again.\n// Knob 3: Crossings. How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander.\n// Knob 4: Hollow. At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left.\n// Buttons: K1 tap folds both sides at once and opens a fresh meander of the same order.\n\n// The road runs down the middle, between columns 31 and 32. The 2n crossings\n// sit evenly on it from row 2 to row 126, 4 LEDs apart at n = 16, and the\n// widest arc on a side reaches 28.5 LEDs out, so its line stays off the wall.\n// A meander of order n is a pair of non-crossing matchings of those points,\n// arcs on the left and arcs on the right, that join into one loop. Arnold\n// asked how many there are: 1, 2, 8, 42, 262, 1828, ..., each about ten\n// times the last by n = 16 and the ratio creeping up towards 12.26. No\n// formula is known.\nconst W = 64, H = 128, NP = W * H, MID = 32, WMAX = 28.5, TOP = 2, SPAN = 124;\nconst { min, max, floor, ceil, sqrt, cos, acos, abs, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\n// The arc's distance from the road: its semicircle r, cut off softly at the\n// width w its nesting gives it. Both grow from an arc to any arc round it,\n// so nested arcs never touch.\nconst smin = (w, r) => (w \u003c= 0 || r \u003c= 0 ? 0 : (w * r) / sqrt(sqrt(w * w * w * w + r * r * r * r)));\n\n// A non-crossing perfect matching of 2n points as a uniform random Dyck word,\n// by the cycle lemma: shuffle n opens and n + 1 closes, start just after the\n// first lowest point of the walk, drop the last close.\nconst WALK = new Int8Array(33);\nfunction dyck(n, P) {\n  const m = 2 * n + 1, a = WALK;\n  for (let i = 0; i \u003c m; i++) a[i] = i \u003c n ? 1 : -1;\n  for (let i = m - 1; i > 0; i--) {\n    const j = floor(random() * (i + 1)), t = a[i];\n    (a[i] = a[j]), (a[j] = t);\n  }\n  let s = 0, lo = 0, at = 0;\n  for (let i = 0; i \u003c m; i++) if ((s += a[i]) \u003c lo) (lo = s), (at = i);\n  const st = [];\n  for (let k = 0; k \u003c 2 * n; k++) {\n    if (a[(at + 1 + k) % m] > 0) st.push(k);\n    else {\n      const o = st.pop();\n      (P[o] = k), (P[k] = o);\n    }\n  }\n}\n\n// Left arcs and right arcs together are one closed curve when walking left,\n// right, left, ... from point 0 meets every point before it comes back.\nfunction oneLoop(L, R, n2) {\n  let i = 0, c = 0;\n  do (i = R[L[i]]), (c += 2);\n  while (i !== 0 && c \u003c= n2);\n  return c === n2;\n}\n\n// Each arc's height: 0 when no arc lies inside it, else one more than the\n// highest arc directly inside. It sets the arc's width, so a nest of any\n// depth fits between the road and the wall.\nfunction heights(P, n2, h) {\n  const st = new Int8Array(n2 + 1);\n  let sp = 0;\n  st[0] = -1;\n  for (let i = 0; i \u003c n2; i++) {\n    if (P[i] > i) st[++sp] = -1;\n    else {\n      const v = st[sp--] + 1;\n      h[i] = h[P[i]] = v;\n      if (v > st[sp]) st[sp] = v;\n    }\n  }\n  return st[0];\n}\n\nfunction dress(n, L, R) {\n  const hL = new Int8Array(2 * n), hR = new Int8Array(2 * n);\n  return { n, L, R, hL, hR, HL: heights(L, 2 * n, hL), HR: heights(R, 2 * n, hR) };\n}\n\n// A uniform random meander of order n: draw both sides until they close into\n// one loop. About one pair in 10 does at n = 6 and one in 210 at n = 16.\nfunction meander(n) {\n  for (; n > 1; n--) {\n    const L = new Int8Array(2 * n), R = new Int8Array(2 * n);\n    for (let t = 0; t \u003c 4000; t++) {\n      dyck(n, L), dyck(n, R);\n      if (oneLoop(L, R, 2 * n)) return dress(n, L, R);\n    }\n  }\n  return dress(1, new Int8Array([1, 0]), new Int8Array([1, 0]));\n}\n\n// The same meander with side X drawn again, the other side kept.\nfunction reside(M, X) {\n  const n = M.n, Q = new Int8Array(2 * n);\n  for (let t = 0; t \u003c 4000; t++) {\n    dyck(n, Q);\n    if (X ? oneLoop(M.L, Q, 2 * n) : oneLoop(Q, M.R, 2 * n)) return X ? dress(n, M.L, Q) : dress(n, Q, M.R);\n  }\n  return M;\n}\n\nexport function setup(params) {\n  params.s = {\n    M: null, n2: 0, ph: 0, side: 2, u: 0, next: 0, both: false, flow: 0, ck: 0, cu: 0,\n    // the loop, arc by arc: from point, to point, side (0 left, 1 right)\n    AF: new Int8Array(32), AT: new Int8Array(32), AS: new Int8Array(32),\n    // each kept arc's place on the loop before the last swap, at its start and end\n    OS: new Float32Array(32), OE: new Float32Array(32), OK: new Uint8Array(32), old: 0,\n    len: new Float32Array(32), cum: new Float32Array(33),\n    gp: new Float32Array(32 * 6), D: new Float32Array(NP), LA: new Int8Array(NP), LT: new Float32Array(NP),\n    hue: 0, speed: 2, hollow: 0.06, nT: 6,\n  };\n}\n\n// Walk the loop from point a, first along side s.\nfunction order(P, a, s) {\n  const M = P.M;\n  for (let k = 0; k \u003c P.n2; k++) {\n    const b = s ? M.R[a] : M.L[a];\n    (P.AF[k] = a), (P.AT[k] = b), (P.AS[k] = s);\n    (a = b), (s ^= 1);\n  }\n}\n\n// Swap in new arcs while the side is flat on the road. A one-side swap keeps\n// the pulse on the kept arc it is on, or the next one, and lets every kept\n// arc carry its old colours over into the new loop's while the side opens.\nfunction swap(P) {\n  const X = P.side;\n  if (X === 2) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), floor(random() * 2));\n    (P.ck = 0), (P.cu = 0), (P.old = 0), (P.side = 2);\n    return;\n  }\n  const Q = 1 - X, n2 = P.n2, L = P.cum[n2] || 1;\n  const os = new Float32Array(n2), oe = new Float32Array(n2);\n  for (let k = 0; k \u003c n2; k++)\n    if (P.AS[k] === Q) {\n      const i = P.AF[k], j = P.AT[k];\n      (os[i] = P.cum[k] / L), (oe[i] = P.cum[k + 1] / L);\n      (os[j] = P.cum[k + 1] / L), (oe[j] = P.cum[k] / L);\n    }\n  let a = P.AF[P.ck];\n  if (P.AS[P.ck] !== Q) (a = P.AT[P.ck]), (P.cu = 0);\n  P.M = reside(P.M, X);\n  order(P, a, Q);\n  P.ck = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    P.OK[k] = P.AS[k] === Q ? 1 : 0;\n    (P.OS[k] = os[P.AF[k]]), (P.OE[k] = oe[P.AF[k]]);\n  }\n  P.old = 1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nT = cl(round(cl(k[2], 12, 32) / 2), 6, 16);\n  P.hollow = cl(k[3], 0, 1);\n  if (!P.M) {\n    P.M = meander(P.nT);\n    P.n2 = 2 * P.M.n;\n    order(P, floor(random() * P.n2), 0);\n    (P.ph = 2), (P.side = 2), (P.u = 0);\n  }\n  const s = P.speed;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.both = true;\n    if (P.ph === 0) P.u = 1;\n  }\n  // 0 hold, 1 close, 2 open; in clock units that run at Speed a second.\n  if (P.ph === 0) {\n    P.u += (d * s) / 7;\n    if (P.M.n !== P.nT) P.u = 1;\n    if (P.u >= 1) {\n      P.side = P.both || P.M.n !== P.nT ? 2 : P.next;\n      if (P.side \u003c 2) P.next ^= 1;\n      (P.both = false), (P.ph = 1), (P.u = 0);\n    }\n  } else if (P.ph === 1) {\n    P.u += (d * s) / 1.2;\n    if (P.u >= 1) swap(P), (P.ph = 2), (P.u = 0);\n  } else {\n    P.u += (d * s) / 1.8;\n    if (P.u >= 1) (P.ph = 0), (P.u = 0), (P.old = 0);\n  }\n  P.flow += d * s * 0.04;\n  // The pulse: 40 LEDs of curve a second per unit of Speed.\n  P.cu += (d * s * 40) / max(4, P.len[P.ck]);\n  while (P.cu >= 1) (P.cu -= 1), (P.ck = (P.ck + 1) % P.n2);\n}\n\n// The colour wheel once round the loop, 1024 steps.\nconst LUT = new Float32Array(1024 * 3);\nfor (let i = 0; i \u003c 1024; i++) {\n  const h = (i / 1024) * 6, j = floor(h), f = h - j;\n  const c = [[1, f, 0], [1 - f, 1, 0], [0, 1, f], [0, 1 - f, 1], [f, 0, 1], [1, 0, 1 - f]][j];\n  for (let q = 0; q \u003c 3; q++) LUT[i * 3 + q] = c[q] ** 0.9;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.M) return;\n  const M = P.M, n2 = P.n2, sp = SPAN / (n2 - 1), g = P.gp;\n  const open = P.ph === 0 ? 1 : P.ph === 1 ? 1 - ease(P.u) : ease(P.u);\n  const sL = P.side === 1 ? 1 : open, sR = P.side === 0 ? 1 : open;\n  const mix = P.old ? ease(P.ph === 2 ? P.u : 1) : 1;\n  // Each arc: top and bottom y, centre, radius, width, side sign. While a\n  // side folds, its arcs all lose width at one rate, so the innermost lie flat\n  // first and the nest never crosses itself; it opens outermost first.\n  for (let k = 0; k \u003c n2; k++) {\n    const a = P.AF[k], b = P.AT[k], side = P.AS[k];\n    const h = side ? M.hR[a] : M.hL[a], Hs = side ? M.HR : M.HL, so = side ? sR : sL;\n    const ya = TOP + a * sp, yb = TOP + b * sp, o = k * 6;\n    (g[o] = min(ya, yb)), (g[o + 1] = max(ya, yb));\n    (g[o + 2] = (ya + yb) / 2), (g[o + 3] = abs(yb - ya) / 2);\n    g[o + 4] = (WMAX / (Hs + 1)) * cl(so * (Hs + 1) - (Hs - h), 0, h + 1);\n    g[o + 5] = side ? 1 : -1;\n  }\n  // The curve: sample every arc in loop order, keep for each LED the nearest\n  // sample, which arc it was on and how far along.\n  const D = P.D, LA = P.LA, LT = P.LT;\n  D.fill(9);\n  P.cum[0] = 0;\n  for (let k = 0; k \u003c n2; k++) {\n    const o = k * 6, c = g[o + 2], R = g[o + 3], w = g[o + 4], sg = g[o + 5];\n    const down = P.AF[k] \u003c P.AT[k], ns = max(4, ceil((PI * R) / 0.4));\n    let px = 0, py = 0, len = 0;\n    for (let j = 0; j \u003c= ns; j++) {\n      const t = (PI * j) / ns, X = MID + sg * smin(w, R * Math.sin(t)), Y = c - R * cos(t);\n      if (j) len += sqrt((X - px) ** 2 + (Y - py) ** 2);\n      (px = X), (py = Y);\n      const tau = down ? j / ns : 1 - j / ns;\n      for (let yy = ceil(Y - 2.3), y1 = floor(Y + 1.3); yy \u003c= y1; yy++) {\n        if (yy \u003c 0 || yy >= H) continue;\n        const ey = yy + 0.5 - Y;\n        for (let xx = ceil(X - 2.3), x1 = floor(X + 1.3); xx \u003c= x1; xx++) {\n          if (xx \u003c 0 || xx >= W) continue;\n          const ex = xx + 0.5 - X, dd = ex * ex + ey * ey, p = yy * W + xx;\n          if (dd \u003c D[p]) (D[p] = dd), (LA[p] = k), (LT[p] = tau);\n        }\n      }\n    }\n    P.len[k] = len;\n    P.cum[k + 1] = P.cum[k] + len;\n  }\n  const Ltot = P.cum[n2] || 1, head = P.cum[P.ck] + P.cu * P.len[P.ck];\n  // Where on the loop a point is, 0..1, with a kept arc's old place blended\n  // into its new one while its side opens.\n  const at = (k, tau) => {\n    let f = (P.cum[k] + tau * P.len[k]) / Ltot;\n    if (mix \u003c 1 && P.OK[k]) {\n      let e = P.OS[k] + tau * (P.OE[k] - P.OS[k]) - f;\n      e -= round(e);\n      f += (1 - mix) * e;\n    }\n    return f;\n  };\n  // The pulse's head, for the glow round it.\n  const ho = P.ck * 6, hr = g[ho + 3], ht = PI * (P.AF[P.ck] \u003c P.AT[P.ck] ? P.cu : 1 - P.cu);\n  const hx = MID + g[ho + 5] * smin(g[ho + 4], hr * Math.sin(ht)), hy = g[ho + 2] - hr * cos(ht);\n  const hue0 = P.hue + 0.55 - P.flow, fillV = 255 * 0.97 * (1 - P.hollow) ** 1.2;\n  const lineS = 0.5 + 0.35 * P.hollow;\n  // The inside by the even-odd rule, row by row: a LED is inside when a ray\n  // from it to the right wall crosses the curve an odd number of times. The\n  // arcs a row meets on one side are nested, so the band a LED sits in takes\n  // the colour of the arc just outside it, at this row.\n  const fl = new Float32Array(16), ka = new Int8Array(16), ta = new Float32Array(16);\n  const fr = new Float32Array(16), kb = new Int8Array(16), tb = new Float32Array(16);\n  for (let yy = 0; yy \u003c H; yy++) {\n    const yc = yy + 0.5;\n    let nl = 0, nr = 0;\n    for (let k = 0; k \u003c n2; k++) {\n      const o = k * 6;\n      if (!(g[o] \u003c yc && yc \u003c g[o + 1])) continue;\n      const c = g[o + 2], R = g[o + 3], dy = yc - c, f = smin(g[o + 4], sqrt(R * R - dy * dy));\n      const t = acos(cl(-dy / R, -1, 1)) / PI, tau = P.AF[k] \u003c P.AT[k] ? t : 1 - t;\n      const A = g[o + 5] > 0 ? fr : fl, KK = g[o + 5] > 0 ? kb : ka, T = g[o + 5] > 0 ? tb : ta;\n      let i = g[o + 5] > 0 ? nr++ : nl++;\n      while (i > 0 && A[i - 1] > f) (A[i] = A[i - 1]), (KK[i] = KK[i - 1]), (T[i] = T[i - 1]), i--;\n      (A[i] = f), (KK[i] = k), (T[i] = tau);\n    }\n    for (let half = 0; half \u003c 2; half++) {\n      const A = half ? fr : fl, KK = half ? kb : ka, T = half ? tb : ta, n = half ? nr : nl;\n      let i = 0;\n      for (let q = 0; q \u003c 32; q++) {\n        const xx = half ? MID + q : MID - 1 - q, dist = q + 0.5, p = yy * W + xx;\n        while (i \u003c n && A[i] \u003c dist) i++;\n        let r = 0, gg = 0, b = 0;\n        const inside = half ? (nr - i) & 1 : (i + nr) & 1;\n        if (inside && fillV > 0) {\n          const f = at(KK[i], T[i]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          (r = LUT[ix] * fillV), (gg = LUT[ix + 1] * fillV), (b = LUT[ix + 2] * fillV);\n        }\n        // The road, a faint line on the dark and a darker one through the colour.\n        if (q === 0) {\n          if (inside && fillV > 0) (r *= 0.6), (gg *= 0.6), (b *= 0.6);\n          else (r += 34), (gg += 36), (b += 44);\n        }\n        const dl = sqrt(D[p]);\n        if (dl \u003c 2.3) {\n          const k = LA[p], f = at(k, LT[p]), ix = floor((((hue0 + f) % 1) + 1) % 1 * 1024) * 3;\n          let behind = (head - (P.cum[k] + LT[p] * P.len[k])) % Ltot;\n          if (behind \u003c 0) behind += Ltot;\n          const pulse = exp(-behind / 24) + (behind > Ltot - 3 ? (behind - Ltot + 3) / 3 : 0);\n          const I = cl(1.75 - dl * 1.1, 0, 1), J = cl(2 - dl * 0.75, 0, 1) * pulse, wh = 1 - lineS;\n          let lr = 255 * (wh + lineS * LUT[ix]), lg = 255 * (wh + lineS * LUT[ix + 1]), lb = 255 * (wh + lineS * LUT[ix + 2]);\n          const pv = min(1, pulse);\n          (lr += (255 - lr) * pv), (lg += (250 - lg) * pv), (lb += (235 - lb) * pv);\n          const m = max(I, J);\n          (r += (lr - r) * m), (gg += (lg - gg) * m), (b += (lb - b) * m);\n        }\n        const ex = xx + 0.5 - hx, ey = yc - hy, e2 = ex * ex + ey * ey;\n        if (e2 \u003c 30) {\n          const gl = 0.9 * exp(-e2 / 6);\n          (r += (255 - r) * gl), (gg += (250 - gg) * gl), (b += (235 - b) * gl);\n        }\n        display.setPixel(xx, yy, min(255, r), min(255, gg), min(255, b));\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Crossings=12..32, Hollow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour wheel that lies once round the loop. At 0 the loop starts azure where the pulse first sets off and runs on through blue, magenta, red, gold and green back to azure; the colours then flow forward along the curve with the pulse."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the pulse runs 80 LEDs of curve a second, the colours flow round the loop once in 12.5 seconds, and one side of the meander folds and reopens every 5 seconds; at 0.2 all of it is ten times slower, at 3 half as fast again."},{"name":"Crossings","min":12,"max":32,"about":"How many times the curve crosses the road, 2n for a meander of order n: 12 at the start, 4 LEDs apart at 32. A new order folds both sides flat and opens a new meander."},{"name":"Hollow","min":0,"max":1,"about":"At 0 the inside of the loop burns in full colour; turned up it dims, and at 1 only the curve and the road are left."}],"start":[0,2,12,0.06],"measures":{"motion":0.1079,"detail":0.0446,"edges":0.5226,"complexity":0.7574,"coverage":0.4978,"colour":0.5487,"drift":0.1848},"knobResponse":[0.3105,0.2838,0.4218,0.1979]},{"slug":"metro-map","title":"Metro Map","family":"city","round":15,"note":"해리 벡 식 지하철 노선도예요. 색 노선 넷이 45도로 꺾이며 위아래로 달리고, 갈아타는 역은 흰 고리예요. 흰 열차가 역마다 섰다 떠나고 끝에서 되돌아가요. K1 을 누르면 급행이 지나가요.","idea":"A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.","buttons":"K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.","code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-metro-map","type":"code","name":"metro-map","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole line palette round the colour wheel together; the river stays blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21."},{"name":"Lines","min":4,"max":7,"about":"How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges."},{"name":"Rush","min":0,"max":1,"about":"The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds."}],"start":[0,2,4,0.06],"measures":{"motion":0.0316,"detail":0.0683,"edges":0.914,"complexity":0.1388,"coverage":0.2043,"colour":0.2301,"drift":0.035},"knobResponse":[0.0664,0.0514,0.0687,0.0629]},{"slug":"milk-ring","title":"Milk Ring","family":"cosmetic","round":38,"note":"우윳빛 크림 방울이 색을 띤 세럼에 떨어져 테두리가 밝은 소용돌이 고리가 돼요. 고리는 가라앉으며 부풀다 작은 방울 몇 개로 갈라지고, 그 방울이 다시 작은 고리가 되어 가는 크림 실에 매달린 나무처럼 패널 아래로 늘어져요. K3 은 한 고리가 갈라지는 방울 수를 셋에서 여섯으로 늘리고, K1 을 누르면 방울이 바로 떨어져요.","idea":"Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.","buttons":"K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Milk Ring\n// Family:  cosmetic\n// Idea:    Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after drops of cream let fall into clear serum, the vortex rings they form and the cascade in which each ring breaks into smaller rings (J. J. Thomson and H. F. Newall, 1885)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive.\n// Knob 2: Speed. At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Drops. How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117.\n// Knob 4: Gel. How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain.\n// Buttons: K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\n// The serum's surface, rows above it are the air the drop falls through.\nconst SURF = 5;\n// Seen from a little above: a ring of radius R is an ellipse R wide and\n// R * TILT tall, its near half lower on the panel.\nconst TILT = 0.4;\n// Per generation: starting radius, the radius it swells to, starting sink\n// speed in LEDs a second, how long it sinks before its rim breaks.\nconst GEN = [\n  { r0: 2.4, r1: 10, v0: 24, brk: 3.2 },\n  { r0: 1.4, r1: 5.2, v0: 18, brk: 2.8 },\n  { r0: 0.9, r1: 2.8, v0: 14, brk: 99 },\n];\n// Every sink speed falls toward VS with time constant TV; radii swell with TR.\nconst VS = 3.2, TV = 1.3, TR = 1.6;\n// Seconds between drops at Speed 2 and Gel 1, and the run before the first frame.\nconst PERIOD = 7, PREROLL = 9;\n// Opening hue: rose.\nconst H0 = 0.93;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, gel: 1, begun: false, t: 0, next: 0, tk: 1,\n    rings: [], falling: [], ripples: [],\n    D: new Float32Array(N), F: new Float32Array(N), T: new Float32Array(N), G: new Float32Array(N), tmp: new Float32Array(N),\n    deep: [0, 0, 0], light: [0, 0, 0], cream: [0, 0, 0],\n  };\n}\n\n// Soft dot of cream into a field, a Gaussian of width s.\nfunction splat(A, x, y, s, w) {\n  const r = Math.ceil(2.2 * s), xi = round(x), yi = round(y), k = -0.5 / (s * s);\n  for (let j = max(0, yi - r); j \u003c= min(H - 1, yi + r); j++) {\n    const dy = j - y, ey = dy * dy;\n    for (let i = max(0, xi - r); i \u003c= min(W - 1, xi + r); i++) {\n      const dx = i - x;\n      A[j * W + i] += w * exp((dx * dx + ey) * k);\n    }\n  }\n}\n\n// A thin thread point, bilinear into the trail.\nfunction dab(T, x, y, w) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  for (let b = 0; b \u003c 2; b++)\n    for (let a = 0; a \u003c 2; a++) {\n      const xx = i + a, yy = j + b;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      T[yy * W + xx] += w * (a ? fx : 1 - fx) * (b ? fy : 1 - fy);\n    }\n}\n\nfunction newRing(S, g, x, y, z, vx, vz) {\n  const G0 = GEN[g];\n  S.rings.push({ g, x, y, z, vx, vz, age: 0, R: G0.r0, amp: 1, broken: false, spin: random() * 2 * PI, v0: G0.v0 * (0.85 + 0.3 * random()) });\n}\n\nfunction drop(S) {\n  S.falling.push({ x: 18 + random() * 28, y: -4, z: (random() - 0.5) * 6 });\n}\n\n// Sim time, in seconds at Speed 2 and Gel 1; the gel stretches it.\nfunction step(S, dt) {\n  // A thicker gel slows everything, keeps the rings smaller and holds the\n  // threads longer.\n  const ts = S.gel ** 0.6, d = dt / ts, rs = S.gel ** -0.2;\n  S.t += d;\n  if (S.t >= S.next) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  // The drop falls through the air and goes in at the surface.\n  for (let i = S.falling.length - 1; i >= 0; i--) {\n    const f = S.falling[i];\n    f.y += 34 * d;\n    if (f.y >= SURF + 1) {\n      newRing(S, 0, f.x, SURF + 2.5, f.z, 0, 0);\n      S.ripples.push({ x: f.x, age: 0 });\n      S.falling.splice(i, 1);\n    }\n  }\n  for (const rp of S.ripples) rp.age += d;\n  S.ripples = S.ripples.filter((rp) => rp.age \u003c 3);\n  const T = S.T, born = [];\n  for (const r of S.rings) {\n    const G0 = GEN[r.g];\n    r.age += d;\n    r.R = (G0.r0 + (G0.r1 - G0.r0) * (1 - exp(-r.age / TR))) * rs;\n    const vy = r.v0 * exp(-r.age / TV) + VS, k = exp(-d / 0.8);\n    const x0 = r.x, y0 = r.y + r.z * TILT;\n    r.y += vy * d;\n    r.x += r.vx * d;\n    r.z += r.vz * d;\n    r.vx *= k;\n    r.vz *= k;\n    // The thread: the ring leaves cream behind it, the same for every LED\n    // of the way it goes.\n    const y1 = r.y + r.z * TILT, len = sqrt((r.x - x0) ** 2 + (y1 - y0) ** 2);\n    dab(T, r.x, y1, (r.g === 0 ? 0.75 : 0.55) * len * r.amp);\n    if (!r.broken && r.age > G0.brk) {\n      // The rim breaks into n drops round the ring, each thrown a little\n      // outward and down, and the ring itself is spent into them.\n      r.broken = true;\n      const n = S.n, ph = r.spin;\n      for (let j = 0; j \u003c n; j++) {\n        const a = ph + (2 * PI * j) / n, c = cos(a), s = sin(a);\n        born.push([r.g + 1, r.x + r.R * c, r.y + 0.5, r.z + r.R * s, 7 * c, 7 * s]);\n      }\n    }\n    if (r.broken) r.amp -= d / 0.7;\n    // The last generation dissolves into the serum after 4 s.\n    if (r.g === GEN.length - 1 && r.age > 4) r.amp -= d / 3;\n  }\n  for (const b of born) newRing(S, b[0], b[1], b[2], b[3], b[4], b[5]);\n  S.rings = S.rings.filter((r) => r.amp > 0.01 && r.y \u003c H + 12);\n  // Threads fade, the fade gathered up and laid on every few frames.\n  S.tk *= exp(-d / (4 * S.gel));\n  if (S.tk \u003c 0.98) {\n    for (let p = 0; p \u003c N; p++) T[p] *= S.tk;\n    S.tk = 1;\n  }\n}\n\n// Draw every ring into the cream field.\nfunction render(S) {\n  const D = S.D, F = S.F;\n  D.fill(0);\n  F.fill(0);\n  for (const r of S.rings) {\n    const form = cl(r.age / 0.6, 0, 1), R = r.R, amp = r.amp;\n    const cy = r.y + r.z * TILT;\n    // A fresh drop is a round blob that opens into the ring.\n    if (form \u003c 1) splat(D, r.x, cy, 0.55 * R + 0.5, 1.3 * (1 - form) * amp);\n    // The ring: its core is an eighth of its radius thick, at least 0.55\n    // LED, laid as dots along it so that a line of them peaks at the weight.\n    const core = max(0.55, 0.12 * R), m = max(10, round(2 * PI * R * 1.6)), ds = (2 * PI * R) / m;\n    for (let j = 0; j \u003c m; j++) {\n      const a = (2 * PI * j) / m, c = cos(a), s = sin(a);\n      // The near half (s > 0) lower on the panel and brighter than the far\n      // half seen through the ring.\n      const w = (0.85 + 0.45 * s) * form * amp * (ds / (core * 2.5066));\n      splat(D, r.x + R * c, cy + R * s * TILT, core, w);\n    }\n    // The bell of milky serum the ring carries above it.\n    splat(F, r.x, cy - 0.45 * R, 0.6 * R + 0.5, 0.4 * form * amp);\n  }\n  for (const f of S.falling) {\n    splat(D, f.x, f.y, 1.1, 1.4);\n    splat(D, f.x, f.y - 1.6, 0.7, 0.5);\n  }\n}\n\n// Box blur of radius r, horizontal then vertical, A into B.\nfunction blur(A, B, tmp, r) {\n  const k = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += A[y * W + cl(x + i, 0, W - 1)];\n      tmp[y * W + x] = s * k;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += tmp[cl(y + i, 0, H - 1) * W + x];\n      B[y * W + x] = s * k;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 3, 6));\n  S.gel = cl(k[3], 1, 5);\n  if (!S.begun) {\n    // The gel stretches the run before as it stretches everything.\n    const n = round(PREROLL * 30 * S.gel ** 0.6);\n    for (let i = 0; i \u003c n; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  render(S);\n  const { D, F, T, G, tmp, deep, light, cream } = S;\n  blur(D, G, tmp, 2);\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime serum goes brown or olive when deep: there it\n  // is lifted, so the bottom of the glass is as bright as the top elsewhere.\n  const warm = cl(1.3 - abs(hh - 0.13) / 0.13, 0, 1);\n  hsv(h, 0.7 - 0.2 * warm, 0.3 + 0.34 * warm, deep);\n  hsv(h + 0.03, 0.5 - 0.1 * warm, 0.62 + 0.14 * warm, light);\n  hsv(h + 0.02, 0.4, 1, cream);\n  const t = S.t;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1), lg = (1 - u) ** 1.6;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vig = 0.8 + 0.2 * sin((PI * (x + 0.5)) / W);\n      // The serum: light from above, and a slow shimmer of caustics.\n      const sh = 0.07 * sin(x * 0.31 + y * 0.07 + t * 0.6 + 1.7 * sin(x * 0.11 - y * 0.05 - t * 0.4)) * lg;\n      let r = deep[0] + (light[0] - deep[0]) * lg, g = deep[1] + (light[1] - deep[1]) * lg, b = deep[2] + (light[2] - deep[2]) * lg;\n      r *= (1 + sh) * vig;\n      g *= (1 + sh) * vig;\n      b *= (1 + sh) * vig;\n      if (y \u003c SURF) {\n        r *= 0.25;\n        g *= 0.25;\n        b *= 0.25;\n      }\n      // Cream: the rings, a soft glow round them, the bell and the threads,\n      // tinted where it is thin and white where it is thick.\n      const C = D[p] + 0.5 * G[p] + F[p] + T[p];\n      const c = 1 - exp(-1.2 * C), wh = c * sqrt(c);\n      const cr = cream[0] + (1 - cream[0]) * wh, cg = cream[1] + (1 - cream[1]) * wh, cb = cream[2] + (1 - cream[2]) * wh;\n      r = r * (1 - 0.85 * c) + cr * c;\n      g = g * (1 - 0.85 * c) + cg * c;\n      b = b * (1 - 0.85 * c) + cb * c;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n  // The surface: a bright line, rippled where a drop went in.\n  for (let x = 0; x \u003c W; x++) {\n    let off = 0;\n    for (const rp of S.ripples) {\n      const dx = abs(x - rp.x), front = rp.age * 14;\n      off += 1.2 * exp(-rp.age / 0.8) * sin(dx * 0.9 - rp.age * 12) * exp(-((dx - front) ** 2) / 30);\n    }\n    const y = cl(round(SURF + off), 0, H - 1);\n    display.setPixel(x, y, round(255 * min(1, light[0] * 0.5 + 0.5)), round(255 * min(1, light[1] * 0.5 + 0.5)), round(255 * min(1, light[2] * 0.5 + 0.5)));\n  }\n}\n","layer":{"id":"layer-milk-ring","type":"code","name":"milk-ring","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Milk Ring\n// Family:  cosmetic\n// Idea:    Drops of milky cream fall one at a time through the surface of a tall glass of tinted serum, each rolls up into a vortex ring with a bright rim that sinks, slows and swells until its rim breaks into a few smaller drops, and each of those rolls up into a smaller ring and sinks further, so a branching tree of rings hangs down the panel on thin cream threads.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after drops of cream let fall into clear serum, the vortex rings they form and the cascade in which each ring breaks into smaller rings (J. J. Thomson and H. F. Newall, 1885)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5\n//\n// Knob 1: Hue. Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive.\n// Knob 2: Speed. At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Drops. How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117.\n// Knob 4: Gel. How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain.\n// Buttons: K1 tap lets a drop fall now; the next comes 7 s after it at Speed 2.\n\nconst W = 64, H = 128, N = W * H;\n// The serum's surface, rows above it are the air the drop falls through.\nconst SURF = 5;\n// Seen from a little above: a ring of radius R is an ellipse R wide and\n// R * TILT tall, its near half lower on the panel.\nconst TILT = 0.4;\n// Per generation: starting radius, the radius it swells to, starting sink\n// speed in LEDs a second, how long it sinks before its rim breaks.\nconst GEN = [\n  { r0: 2.4, r1: 10, v0: 24, brk: 3.2 },\n  { r0: 1.4, r1: 5.2, v0: 18, brk: 2.8 },\n  { r0: 0.9, r1: 2.8, v0: 14, brk: 99 },\n];\n// Every sink speed falls toward VS with time constant TV; radii swell with TR.\nconst VS = 3.2, TV = 1.3, TR = 1.6;\n// Seconds between drops at Speed 2 and Gel 1, and the run before the first frame.\nconst PERIOD = 7, PREROLL = 9;\n// Opening hue: rose.\nconst H0 = 0.93;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 3, gel: 1, begun: false, t: 0, next: 0, tk: 1,\n    rings: [], falling: [], ripples: [],\n    D: new Float32Array(N), F: new Float32Array(N), T: new Float32Array(N), G: new Float32Array(N), tmp: new Float32Array(N),\n    deep: [0, 0, 0], light: [0, 0, 0], cream: [0, 0, 0],\n  };\n}\n\n// Soft dot of cream into a field, a Gaussian of width s.\nfunction splat(A, x, y, s, w) {\n  const r = Math.ceil(2.2 * s), xi = round(x), yi = round(y), k = -0.5 / (s * s);\n  for (let j = max(0, yi - r); j \u003c= min(H - 1, yi + r); j++) {\n    const dy = j - y, ey = dy * dy;\n    for (let i = max(0, xi - r); i \u003c= min(W - 1, xi + r); i++) {\n      const dx = i - x;\n      A[j * W + i] += w * exp((dx * dx + ey) * k);\n    }\n  }\n}\n\n// A thin thread point, bilinear into the trail.\nfunction dab(T, x, y, w) {\n  const i = floor(x), j = floor(y), fx = x - i, fy = y - j;\n  for (let b = 0; b \u003c 2; b++)\n    for (let a = 0; a \u003c 2; a++) {\n      const xx = i + a, yy = j + b;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      T[yy * W + xx] += w * (a ? fx : 1 - fx) * (b ? fy : 1 - fy);\n    }\n}\n\nfunction newRing(S, g, x, y, z, vx, vz) {\n  const G0 = GEN[g];\n  S.rings.push({ g, x, y, z, vx, vz, age: 0, R: G0.r0, amp: 1, broken: false, spin: random() * 2 * PI, v0: G0.v0 * (0.85 + 0.3 * random()) });\n}\n\nfunction drop(S) {\n  S.falling.push({ x: 18 + random() * 28, y: -4, z: (random() - 0.5) * 6 });\n}\n\n// Sim time, in seconds at Speed 2 and Gel 1; the gel stretches it.\nfunction step(S, dt) {\n  // A thicker gel slows everything, keeps the rings smaller and holds the\n  // threads longer.\n  const ts = S.gel ** 0.6, d = dt / ts, rs = S.gel ** -0.2;\n  S.t += d;\n  if (S.t >= S.next) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  // The drop falls through the air and goes in at the surface.\n  for (let i = S.falling.length - 1; i >= 0; i--) {\n    const f = S.falling[i];\n    f.y += 34 * d;\n    if (f.y >= SURF + 1) {\n      newRing(S, 0, f.x, SURF + 2.5, f.z, 0, 0);\n      S.ripples.push({ x: f.x, age: 0 });\n      S.falling.splice(i, 1);\n    }\n  }\n  for (const rp of S.ripples) rp.age += d;\n  S.ripples = S.ripples.filter((rp) => rp.age \u003c 3);\n  const T = S.T, born = [];\n  for (const r of S.rings) {\n    const G0 = GEN[r.g];\n    r.age += d;\n    r.R = (G0.r0 + (G0.r1 - G0.r0) * (1 - exp(-r.age / TR))) * rs;\n    const vy = r.v0 * exp(-r.age / TV) + VS, k = exp(-d / 0.8);\n    const x0 = r.x, y0 = r.y + r.z * TILT;\n    r.y += vy * d;\n    r.x += r.vx * d;\n    r.z += r.vz * d;\n    r.vx *= k;\n    r.vz *= k;\n    // The thread: the ring leaves cream behind it, the same for every LED\n    // of the way it goes.\n    const y1 = r.y + r.z * TILT, len = sqrt((r.x - x0) ** 2 + (y1 - y0) ** 2);\n    dab(T, r.x, y1, (r.g === 0 ? 0.75 : 0.55) * len * r.amp);\n    if (!r.broken && r.age > G0.brk) {\n      // The rim breaks into n drops round the ring, each thrown a little\n      // outward and down, and the ring itself is spent into them.\n      r.broken = true;\n      const n = S.n, ph = r.spin;\n      for (let j = 0; j \u003c n; j++) {\n        const a = ph + (2 * PI * j) / n, c = cos(a), s = sin(a);\n        born.push([r.g + 1, r.x + r.R * c, r.y + 0.5, r.z + r.R * s, 7 * c, 7 * s]);\n      }\n    }\n    if (r.broken) r.amp -= d / 0.7;\n    // The last generation dissolves into the serum after 4 s.\n    if (r.g === GEN.length - 1 && r.age > 4) r.amp -= d / 3;\n  }\n  for (const b of born) newRing(S, b[0], b[1], b[2], b[3], b[4], b[5]);\n  S.rings = S.rings.filter((r) => r.amp > 0.01 && r.y \u003c H + 12);\n  // Threads fade, the fade gathered up and laid on every few frames.\n  S.tk *= exp(-d / (4 * S.gel));\n  if (S.tk \u003c 0.98) {\n    for (let p = 0; p \u003c N; p++) T[p] *= S.tk;\n    S.tk = 1;\n  }\n}\n\n// Draw every ring into the cream field.\nfunction render(S) {\n  const D = S.D, F = S.F;\n  D.fill(0);\n  F.fill(0);\n  for (const r of S.rings) {\n    const form = cl(r.age / 0.6, 0, 1), R = r.R, amp = r.amp;\n    const cy = r.y + r.z * TILT;\n    // A fresh drop is a round blob that opens into the ring.\n    if (form \u003c 1) splat(D, r.x, cy, 0.55 * R + 0.5, 1.3 * (1 - form) * amp);\n    // The ring: its core is an eighth of its radius thick, at least 0.55\n    // LED, laid as dots along it so that a line of them peaks at the weight.\n    const core = max(0.55, 0.12 * R), m = max(10, round(2 * PI * R * 1.6)), ds = (2 * PI * R) / m;\n    for (let j = 0; j \u003c m; j++) {\n      const a = (2 * PI * j) / m, c = cos(a), s = sin(a);\n      // The near half (s > 0) lower on the panel and brighter than the far\n      // half seen through the ring.\n      const w = (0.85 + 0.45 * s) * form * amp * (ds / (core * 2.5066));\n      splat(D, r.x + R * c, cy + R * s * TILT, core, w);\n    }\n    // The bell of milky serum the ring carries above it.\n    splat(F, r.x, cy - 0.45 * R, 0.6 * R + 0.5, 0.4 * form * amp);\n  }\n  for (const f of S.falling) {\n    splat(D, f.x, f.y, 1.1, 1.4);\n    splat(D, f.x, f.y - 1.6, 0.7, 0.5);\n  }\n}\n\n// Box blur of radius r, horizontal then vertical, A into B.\nfunction blur(A, B, tmp, r) {\n  const k = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += A[y * W + cl(x + i, 0, W - 1)];\n      tmp[y * W + x] = s * k;\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0;\n      for (let i = -r; i \u003c= r; i++) s += tmp[cl(y + i, 0, H - 1) * W + x];\n      B[y * W + x] = s * k;\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 3, 6));\n  S.gel = cl(k[3], 1, 5);\n  if (!S.begun) {\n    // The gel stretches the run before as it stretches everything.\n    const n = round(PREROLL * 30 * S.gel ** 0.6);\n    for (let i = 0; i \u003c n; i++) step(S, 1 / 30);\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    drop(S);\n    S.next = S.t + PERIOD;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  render(S);\n  const { D, F, T, G, tmp, deep, light, cream } = S;\n  blur(D, G, tmp, 2);\n  const h = S.hue + H0, hh = h - floor(h);\n  // Orange, yellow and lime serum goes brown or olive when deep: there it\n  // is lifted, so the bottom of the glass is as bright as the top elsewhere.\n  const warm = cl(1.3 - abs(hh - 0.13) / 0.13, 0, 1);\n  hsv(h, 0.7 - 0.2 * warm, 0.3 + 0.34 * warm, deep);\n  hsv(h + 0.03, 0.5 - 0.1 * warm, 0.62 + 0.14 * warm, light);\n  hsv(h + 0.02, 0.4, 1, cream);\n  const t = S.t;\n  for (let y = 0; y \u003c H; y++) {\n    const u = y / (H - 1), lg = (1 - u) ** 1.6;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, vig = 0.8 + 0.2 * sin((PI * (x + 0.5)) / W);\n      // The serum: light from above, and a slow shimmer of caustics.\n      const sh = 0.07 * sin(x * 0.31 + y * 0.07 + t * 0.6 + 1.7 * sin(x * 0.11 - y * 0.05 - t * 0.4)) * lg;\n      let r = deep[0] + (light[0] - deep[0]) * lg, g = deep[1] + (light[1] - deep[1]) * lg, b = deep[2] + (light[2] - deep[2]) * lg;\n      r *= (1 + sh) * vig;\n      g *= (1 + sh) * vig;\n      b *= (1 + sh) * vig;\n      if (y \u003c SURF) {\n        r *= 0.25;\n        g *= 0.25;\n        b *= 0.25;\n      }\n      // Cream: the rings, a soft glow round them, the bell and the threads,\n      // tinted where it is thin and white where it is thick.\n      const C = D[p] + 0.5 * G[p] + F[p] + T[p];\n      const c = 1 - exp(-1.2 * C), wh = c * sqrt(c);\n      const cr = cream[0] + (1 - cream[0]) * wh, cg = cream[1] + (1 - cream[1]) * wh, cb = cream[2] + (1 - cream[2]) * wh;\n      r = r * (1 - 0.85 * c) + cr * c;\n      g = g * (1 - 0.85 * c) + cg * c;\n      b = b * (1 - 0.85 * c) + cb * c;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n  // The surface: a bright line, rippled where a drop went in.\n  for (let x = 0; x \u003c W; x++) {\n    let off = 0;\n    for (const rp of S.ripples) {\n      const dx = abs(x - rp.x), front = rp.age * 14;\n      off += 1.2 * exp(-rp.age / 0.8) * sin(dx * 0.9 - rp.age * 12) * exp(-((dx - front) ** 2) / 30);\n    }\n    const y = cl(round(SURF + off), 0, H - 1);\n    display.setPixel(x, y, round(255 * min(1, light[0] * 0.5 + 0.5)), round(255 * min(1, light[1] * 0.5 + 0.5)), round(255 * min(1, light[2] * 0.5 + 0.5)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=3..6, Gel=1..5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel; the cream stays milk white, tinted with the serum where it is thin. At 0 rose, at 0.05 crimson, 0.1 coral, 0.15 apricot, 0.2 butter, 0.25 pale lime, 0.35 green, 0.5 teal, 0.6 sky blue, 0.75 indigo, 0.85 violet. From 0.03 to 0.37 the bottom of the glass is lifted up to 2.1 times and paled a little, so orange and yellow serum never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a drop falls every 7 s; its ring reaches its first break 3.2 s after it goes in, the second 2.8 s later, and the last rings melt into the serum 4 to 7 s after that, so two trees always share the glass. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Drops","min":3,"max":6,"about":"How many drops each ring breaks into, spaced evenly round its rim and thrown a little outward. At 3 a tree of 1, 3 and 9 rings, at most 13 in the glass; at 6 1, 6 and 36, up to 43, and the bottom third fills with small rings. At Gel 1 the first ring swells from 2.4 to 9 LEDs across its radius, an ellipse 18 wide and 7 tall, and breaks about row 47; its rings swell to 4.6 and break about row 76; the last swell to 2.6 and are gone by about row 117."},{"name":"Gel","min":1,"max":5,"about":"How thick the serum is. At 1 the threads fade with a time constant of 4 s. Turned up, everything runs slower, 2.6 times at 5; the rings stay smaller, 0.72 of their size at 5, so the tree is narrower; and the threads hold longer, about 50 s at 5, so the threads of the last three drops hang together as a curtain."}],"start":[0,2,3,1],"measures":{"motion":0.0728,"detail":0.0206,"edges":0.212,"complexity":1.5604,"coverage":1,"colour":0.1167,"drift":0.0533},"knobResponse":[0.2862,0.0564,0.077,0.0544]},{"slug":"millefiori","title":"Millefiori","family":"glass","round":20,"note":"무라노 밀레피오리 접시 위로 시야가 천천히 미끄러지며, 1 LED 고리와 꽃잎으로 된 유리 막대 조각 수백 개가 어두운 유리에 촘촘히 박혀 지나가요. K1 을 누르면 새로 뽑은 막대로 만든 접시가 오른쪽에서 밀려 들어와요.","idea":"The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.","buttons":"K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.","code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-millefiori","type":"code","name":"millefiori","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds."},{"name":"Canes","min":6,"max":12,"about":"How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals."},{"name":"Light","min":0,"max":1,"about":"How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim."}],"start":[0,2,6,0.06],"measures":{"motion":1.2091,"detail":0.3373,"edges":0.8101,"complexity":1.6267,"coverage":1,"colour":0.5579,"drift":0.0871},"knobResponse":[0.1882,0.3627,0.3509,0.1412]},{"slug":"mitosis","title":"Mitosis","family":"microbe","round":27,"note":"검은 바탕에 찍은 면역형광 사진 속 세포 배양이에요. DNA 는 파랑, 미세소관은 초록, 액틴은 빨강으로 물든 세포가 둥글게 말려 염색체를 두 방추극 사이에 세우고, 양쪽 극으로 끌어 나눈 뒤 빨간 수축 고리에서 잘록해져 둘이 돼요. K1 이 염료를 바꾸고, 누르면 가운데 세포가 바로 분열을 시작해요.","idea":"A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.","buttons":"K1 tap sends the interphase cell nearest the middle into prophase now.","code":"// ===== Patternflow pattern =====\n// Title:   Mitosis\n// Family:  microbe\n// Idea:    A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after immunofluorescence micrographs of dividing cells\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1\n//\n// Knob 1: Stain. The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA.\n// Knob 2: Speed. At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower.\n// Knob 3: Cells. How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in.\n// Knob 4: Zoom. The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show.\n// Buttons: K1 tap sends the interphase cell nearest the middle into prophase now.\n\nconst W = 64, H = 128, N = W * H, TAU = 2 * Math.PI, NCH = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// A 64x64 tile of value noise that wraps, for chromatin.\nconst NT = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = ((k & 63) * 16) / 64, y = ((k >> 6) * 16) / 64, xi = floor(x), yi = floor(y), u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), a = hash(xi, yi), b = hash((xi + 1) % 16, yi), c = hash(xi, (yi + 1) % 16), d = hash((xi + 1) % 16, (yi + 1) % 16);\n  NT[k] = a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, x0 = xi & 63, y0 = (yi & 63) * 64, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) * 64;\n  return mix(mix(NT[y0 + x0], NT[y0 + x1], fx), mix(NT[y1 + x0], NT[y1 + x1], fx), fy);\n}\n\n// The cycle, as fractions of it: daughters spread, interphase, prophase,\n// prometaphase, metaphase, anaphase, telophase to the split at 1.\nconst P1 = 0.1, P2 = 0.5, P3 = 0.6, P4 = 0.67, P5 = 0.79, P6 = 0.86;\n\n// Dye hues in degrees: DNA, tubulin, actin, centrosome.\nconst STAINS = [\n  [240, 120, 0, 55],\n  [228, 352, 125, 185],\n  [192, 305, 55, 120],\n  [262, 60, 318, 170],\n];\nconst hueRGB = (h, out, o) => {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (((5 - 2 * j) + h / 60) % 6 + 6) % 6;\n    out[o + j] = 1 - max(0, min(k, 4 - k, 1));\n  }\n};\n\n// One buffer per dye (actin, tubulin, DNA, centrosome) and one for the body\n// haze. LIN holds the merged colour and BL its blur for the glow; TMP is scratch.\nconst SA = new Float32Array(N), ST = new Float32Array(N), SD = new Float32Array(N), SC = new Float32Array(N), HZ = new Float32Array(N);\nconst LIN = new Float32Array(N * 3), BL = new Float32Array(N * 3), TMP = new Float32Array(N * 3);\nlet Z = 1, TT = 0;\n\nfunction newCell(x, y, p, B) {\n  const c = {\n    x, y, vx: 0, vy: 0, a: rnd() * PI, hd: rnd() * TAU, p, rate: 0.85 + 0.3 * rnd(), B: B || 12 + 2 * rnd(),\n    sd: floor(rnd() * 9973), w1: rnd() * TAU, w2: rnd() * TAU, w3: rnd() * TAU, nf: 22 + floor(rnd() * 7), cang: rnd() * TAU,\n    ox: rnd() * 64, oy: rnd() * 64, tilt: (rnd() - 0.5) * 0.4, al: 1, out: 0, br: 0, bx: 0, by: 0,\n    ca: 1, sa: 0, e: 0, rl: 5, kk: 2, pin: 0, wa: 0, hdl: 0, lam: 0, cx: 1, fur: 0, nS: 0, rn: 3, cond: 0, dense: 0, dS: 0, dr: 2,\n    Lp: 3, sp: 0, net: 0, ast: 0, chA: 0, sh: 0.5, pf: 0, ip: 0, ft: 0, fa: 0, cu: 0, cv: 0, dup: 0, rad: 10, p1u: 0, p1v: 0, p2u: 0, p2v: 0,\n    ch: new Float32Array(NCH * 4), wt: new Float32Array(64), fw: new Float32Array(64), gp: new Float32Array(64),\n  };\n  for (let j = 0; j \u003c NCH; j++) {\n    const r = 0.75 * sqrt(rnd()), q = rnd() * TAU;\n    c.ch[j * 4] = r * cos(q);\n    c.ch[j * 4 + 1] = r * sin(q);\n    c.ch[j * 4 + 2] = ((j + 0.5) / NCH) * 2 - 1 + (rnd() - 0.5) * 0.15;\n    c.ch[j * 4 + 3] = rnd() * PI;\n  }\n  return c;\n}\n\n// Where the cell is in its cycle decides its shape and what each dye shows.\nfunction geo(c) {\n  const p = c.p, B = c.B, Rm = 0.8 * B;\n  let rho = 1, R = Rm, f;\n  if (p \u003c P1) (f = sm(0, P1, p)), (rho = 1 - f), (R = mix(0.59 * B, 0.74 * B, f));\n  else if (p \u003c P2) (rho = 0), (R = mix(0.74 * B, B, (p - P1) / (P2 - P1)));\n  else if (p \u003c P3) (f = sm(P2, P3, p)), (rho = f), (R = mix(B, Rm, f));\n  const fa = (c.fa = sm(P5, P6, p)), ft = (c.ft = sm(P6, 1, p));\n  let e = 0.3 * R * (1 - rho);\n  if (p >= P5) e = p \u003c P6 ? 0.3 * Rm * fa : mix(0.3, 0.58, ft) * Rm;\n  c.e = e;\n  c.rl = R - 0.45 * e;\n  c.kk = (p >= P6 ? mix(0.5, 0.06, ft) : 0.5) * R;\n  c.pin = p >= P6 ? 3 * ft * sqrt(ft) : 0;\n  c.wa = 0.16 * (1 - rho) + 0.025;\n  c.lam = 1 - rho;\n  c.cx = mix(0.85, 1.2, rho);\n  c.fur = ft;\n  c.hdl = c.hd - c.a;\n  // Nucleus: whole until the envelope breaks early in prometaphase.\n  c.rn = 0.44 * R;\n  c.nS = p \u003c P3 ? 1 : 1 - sm(P3, P3 + 0.035, p);\n  c.cond = p \u003c P2 || p >= P6 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dense = p \u003c P1 ? 1 - sm(0, P1, p) : p >= P6 ? 1 : 0;\n  c.dS = sm(0.3, 0.8, ft);\n  c.dr = mix(0.13, 0.22, ft) * B;\n  // Chromosomes gather on the plate; in anaphase the sisters part for the poles.\n  c.pf = sm(P3, P4, p);\n  c.chA = p \u003c P3 ? 0 : sm(P3, P3 + 0.03, p) * (1 - sm(0.25, 0.7, ft));\n  const Lp0 = 0.58 * Rm;\n  c.Lp = p \u003c P5 ? Lp0 : p \u003c P6 ? Lp0 + 0.7 * e : mix(0.79, 0.86, ft) * Rm;\n  c.sh = p \u003c P5 ? 0.5 : p \u003c P6 ? mix(0.5, c.Lp - 1.4, fa) : c.Lp - 1.4;\n  c.sp = p \u003c P3 ? 0 : p \u003c P6 ? sm(P3, P4, p) : 1 - ft;\n  c.ip = p \u003c P5 ? 0 : p \u003c P6 ? fa : 1;\n  c.net = p \u003c P1 ? mix(0.45, 1, sm(0, P1, p)) : p \u003c P2 ? 1 : p \u003c P3 ? 1 - sm(P2, P3, p) : 0;\n  c.ast = p \u003c P2 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dup = p > 0.4 && p \u003c P3 ? 1 : 0;\n  // Centrosome beside the nucleus; in prophase the pair travels round it to the poles.\n  c.cu = (c.rn + 1) * cos(c.cang);\n  c.cv = (c.rn + 1) * sin(c.cang);\n  if (p >= P2) {\n    const g = p \u003c P3 ? sm(P2, P3, p) : 1;\n    c.p1u = mix(c.cu, -c.Lp, g);\n    c.p1v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n    c.p2u = mix(c.cu, c.Lp, g);\n    c.p2v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n  }\n  // The ruffled outline and the leading edge, as a table round the cell.\n  for (let k = 0; k \u003c 64; k++) {\n    const th = (k * PI) / 32 - PI, fr = max(0, cos(th - c.hdl)), F = fr * fr * c.lam;\n    c.fw[k] = F;\n    c.gp[k] = 1 - 0.9 * c.lam * sm(0.4, 0.5, 0.5 + 0.28 * sin(3 * th + 2 * c.w2) + 0.22 * sin(7 * th + c.w3));\n    c.wt[k] = c.rl * c.wa * (0.5 * sin(2 * th + c.w1) + 0.3 * sin(3 * th + c.w2) + 0.2 * sin(5 * th + c.w3 + TT * 0.35) + 0.9 * F);\n  }\n  c.rad = (c.e + c.rl * (1 + 1.6 * c.wa) + 2) * Z;\n  c.ca = cos(c.a);\n  c.sa = sin(c.a);\n}\n\n// What shapeD found at the last point it was asked about, kept for drawCell.\n// A typed array, so writing it for every LED makes no garbage.\nconst G = new Float64Array(3);\n// Signed distance to the cell's outline in its own frame: two discs joined\n// smoothly, ruffled, bulging at the leading edge, pinched at the furrow.\nfunction shapeD(c, u, v) {\n  const e = c.e, rl = c.rl, kk = c.kk;\n  const d1 = hypot(u - e, v) - rl, d2 = hypot(u + e, v) - rl, h = cl(0.5 + (0.5 * (d2 - d1)) / kk, 0, 1);\n  let d = mix(d2, d1, h) - kk * h * (1 - h);\n  const th = (G[1] = atan2(v, u)), q = (th + PI) * (32 / PI), k = floor(q), f = q - k, k0 = k & 63, k1 = (k + 1) & 63;\n  G[0] = mix(c.fw[k0], c.fw[k1], f);\n  G[2] = mix(c.gp[k0], c.gp[k1], f);\n  d -= mix(c.wt[k0], c.wt[k1], f);\n  if (c.pin > 0) d += c.pin * exp(-u * u * 0.4);\n  return d;\n}\n\nfunction put(B, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n    const i = y * W + x;\n    if (v > B[i]) B[i] = v;\n  }\n}\n// A soft dot at a world point; weights sharpened so lines stay one LED wide.\nfunction dot(B, wx, wy, a) {\n  const x = (wx - 32) * Z + 31.5, y = (wy - 64) * Z + 63.5, x0 = floor(x), y0 = floor(y);\n  let fx = x - x0, fy = y - y0;\n  (fx = fx * fx * (3 - 2 * fx)), (fy = fy * fy * (3 - 2 * fy));\n  put(B, x0, y0, a * (1 - fx) * (1 - fy));\n  put(B, x0 + 1, y0, a * fx * (1 - fy));\n  put(B, x0, y0 + 1, a * (1 - fx) * fy);\n  put(B, x0 + 1, y0 + 1, a * fx * fy);\n}\n// A curve in the cell's frame from (au, av) to (bu, bv) bowed through (mu, mv).\nfunction curve(B, c, au, av, mu, mv, bu, bv, a) {\n  const n = max(2, ceil((hypot(mu - au, mv - av) + hypot(bu - mu, bv - mv)) * Z * 2.2));\n  for (let k = 0; k \u003c= n; k++) {\n    const t = k / n, s = 1 - t, u = s * s * au + 2 * s * t * mu + t * t * bu, v = s * s * av + 2 * s * t * mv + t * t * bv;\n    dot(B, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, a);\n  }\n}\nconst line = (B, c, au, av, bu, bv, a) => curve(B, c, au, av, (au + bu) / 2, (av + bv) / 2, bu, bv, a);\n\n// Microtubules grown out from (u0, v0) until they meet the cortex.\nfunction rays(c, u0, v0, n, ang, spread, len, a, sd) {\n  const st = 0.45 / Z;\n  for (let i = 0; i \u003c n; i++) {\n    const h1 = hash(c.sd + sd, i), h2 = hash(i, c.sd + sd + 7);\n    let q = ang + (n > 1 ? ((i + 0.5 * h1) / n - 0.5) * spread : 0), u = u0, v = v0;\n    const L = len * (0.7 + 0.45 * h2), curl = (h1 - 0.5) * 0.3, b = a * (0.9 + 0.25 * h2);\n    for (let s = 0; s \u003c L; s += st) {\n      q += curl * st + 0.12 * sin(s * 0.6 + i * 1.7) * st;\n      u += cos(q) * st;\n      v += sin(q) * st;\n      if (shapeD(c, u, v) > -1.6 - 1.4 * G[0]) break;\n      const nq = c.nS > 0.5 ? hypot(u / (c.rn * 1.1), v / (c.rn * 0.92)) : 2;\n      // Asters wrap round the nucleus until its envelope breaks.\n      if (nq \u003c 1 && sd) break;\n      dot(ST, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, nq \u003c 1 ? b * 0.3 : b);\n    }\n  }\n}\n\nfunction chromatin(c, u, v, cond) {\n  const tu = u * 1.5 + c.ox, tv = v * 1.5 + c.oy;\n  let t = mix(0.35 + 0.9 * nz(tu, tv) - 0.6 * exp(-((u - 0.3 * c.rn) ** 2 + (v + 0.2 * c.rn) ** 2) * 0.9), 1.2, c.dense);\n  if (cond > 0) t = mix(t, 1.5 * sm(0.14, 0.04, abs(nz(tu * 1.4 + 17, tv * 1.4 + 5) - 0.5)), cond);\n  return t;\n}\n\nfunction drawCell(c) {\n  const al = c.al, cx = (c.x - 32) * Z + 32, cy = (c.y - 64) * Z + 64, r = c.rad;\n  const x0 = max(0, floor(cx - r)), x1 = min(W - 1, ceil(cx + r)), y0 = max(0, floor(cy - r)), y1 = min(H - 1, ceil(cy + r));\n  if (x0 > x1 || y0 > y1) return;\n  const iz = 1 / Z, rn = c.rn, na = rn * 1.1, nb = rn * 0.92, r2 = r * r;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      if ((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2 > r2) continue;\n      const dx = (x + 0.5 - cx) * iz, dy = (y + 0.5 - cy) * iz, u = dx * c.ca + dy * c.sa, v = -dx * c.sa + dy * c.ca;\n      const d = shapeD(c, u, v);\n      if (d > 0.8) continue;\n      const i = y * W + x;\n      // Actin: the cortex, broad at the leading edge, and the ring at the furrow.\n      const fr = G[0], th = G[1];\n      let A = sm(-1.2, -0.7, d) * sm(0.35, -0.15, d) * c.cx * G[2];\n      if (fr > 0.05) A = max(A, fr * sm(-2.6, -1.9, d) * sm(0.35, -0.15, d) * (0.55 + 0.6 * nz(th * 20.372 + c.oy, c.ox + d)));\n      if (c.lam > 0.05 && d \u003c -1.2) {\n        // Stress fibres along the cell's long axis, some broken off short.\n        const q = (v + c.tilt * u) / 2.7 + c.ox, k = floor(q + 0.5), h = hash(c.sd + 11, k), e = (hash(k, c.sd) - 0.5) * c.rl;\n        if (h > 0.55 && abs(u - e) \u003c c.rl * (0.3 + 0.7 * h) && hypot(u / na, v / nb) > 1.15) A = max(A, c.lam * sm(0.62, 0.22, abs(q - k) * 2.7) * sm(-1.2, -2.2, d));\n      }\n      if (c.fur > 0) A = max(A, 1.3 * c.fur * exp(-u * u * 1.4) * sm(0.3, -0.5, d));\n      if (A * al > SA[i]) SA[i] = A * al;\n      if (d \u003c 0 && al > HZ[i]) HZ[i] = al * sm(0.5, -2, d);\n      // DNA: an interphase nucleus, or the two that reform in telophase.\n      let D = 0;\n      if (c.nS > 0) {\n        const dn = (hypot(u / na, v / nb) - 1) * nb;\n        if (dn \u003c 0.6) D = sm(0.55, -0.45, dn) * c.nS * chromatin(c, u, v, c.cond);\n      }\n      if (c.dS > 0) {\n        const dn = hypot(abs(u) - c.e, v) - c.dr;\n        if (dn \u003c 0.6) D = max(D, sm(0.55, -0.45, dn) * c.dS * chromatin(c, abs(u) - c.e, v, c.cond));\n      }\n      if (D * al > SD[i]) SD[i] = D * al;\n    }\n  const p = c.p, Rm = 0.8 * c.B;\n  // Interphase network from the centrosome.\n  if (c.net > 0.02) rays(c, c.cu, c.cv, c.nf, c.cang, TAU, c.net * 1.6 * c.rl, al, 0);\n  if (p \u003c P2) {\n    dot(SC, c.x + c.cu * c.ca - c.cv * c.sa, c.y + c.cu * c.sa + c.cv * c.ca, 1.2 * al);\n    if (c.dup) dot(SC, c.x + (c.cu + 0.8) * c.ca - c.cv * c.sa, c.y + (c.cu + 0.8) * c.sa + c.cv * c.ca, 1.2 * al);\n  } else {\n    // Asters, and the spindle between its poles.\n    const spr = mix(TAU, 2.2, c.sp), la = c.ast * c.rl * 1.2;\n    rays(c, c.p1u, c.p1v, 9, PI, spr, la, al, 3);\n    rays(c, c.p2u, c.p2v, 9, 0, spr, la, al, 5);\n    dot(SC, c.x + c.p1u * c.ca - c.p1v * c.sa, c.y + c.p1u * c.sa + c.p1v * c.ca, 1.25 * al);\n    dot(SC, c.x + c.p2u * c.ca - c.p2v * c.sa, c.y + c.p2u * c.sa + c.p2v * c.ca, 1.25 * al);\n    const hw = 0.42 * Rm, ch = c.ch, pf = c.pf * c.pf * (3 - 2 * c.pf);\n    for (let j = 0; j \u003c NCH; j++) {\n      const cu = mix(ch[j * 4] * c.rn, 0.25 * sin(TT * 3.5 + j), pf), cv = mix(ch[j * 4 + 1] * c.rn, ch[j * 4 + 2] * hw, pf), o = mix(ch[j * 4 + 3], PI / 2, pf);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const su = cu + s * c.sh * mix(-sin(o), 1, pf), sv = cv + s * c.sh * mix(cos(o), 0, pf);\n        if (c.sp > 0.02) curve(ST, c, s * c.Lp, 0, (s * c.Lp + su) / 2, sv * 1.3, su, sv, c.sp * al * 0.95);\n        if (c.chA > 0.02) {\n          // Sister chromatids, arms trailing back toward the plate in anaphase.\n          const tr = c.fa, du = mix(cos(o), -s * 0.9, tr) * 1.1, dv = mix(sin(o), 0.45 * (cv \u003c 0 ? -1 : 1), tr) * 1.1;\n          line(SD, c, su - du * (1 - tr), sv - dv * (1 - tr), su + du, sv + dv, 1.3 * c.chA * al);\n        }\n      }\n    }\n    // Central spindle, gathered into the midbody as the furrow closes.\n    if (c.ip > 0.02) {\n      const x = max(1.4, (c.sh - 0.8) * (1 - c.ft) + 1.6 * c.ft);\n      for (let k = -1; k \u003c= 1; k++) line(ST, c, -x, k * 1.1 * (1 - c.ft), x, k * 1.1 * (1 - c.ft), c.ip * al * (k ? 0.85 : 1.1));\n    }\n  }\n  // The midbody bridge back to the sister cell, with its ring.\n  if (c.br > 0.02) {\n    const dx = c.bx - c.x, dy = c.by - c.y, L = hypot(dx, dy), r0 = c.rl * 0.8;\n    if (L > r0) {\n      const ux = dx / L, uy = dy / L, n = ceil((L - r0) * Z * 2.2);\n      for (let k = 0; k \u003c= n; k++) dot(ST, c.x + ux * (r0 + ((L - r0) * k) / n), c.y + uy * (r0 + ((L - r0) * k) / n), c.br * al);\n      dot(SA, c.bx, c.by, 1.2 * c.br * al);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = { cells: [], t: 0, k1: -1, pal: new Float32Array(12), cool: 0, n: 0 };\n}\n\n// The emptiest spot in the field: best of a dozen tries.\nfunction freeSpot(S) {\n  let bx = 32, by = 64, bd = -1;\n  for (let k = 0; k \u003c 14; k++) {\n    const x = 6 + rnd() * 52, y = 6 + rnd() * 116;\n    let d = min(x + 6, 70 - x, y + 6, 134 - y) * 0.6;\n    for (const c of S.cells) d = min(d, hypot(c.x - x, c.y - y));\n    if (d > bd) (bd = d), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// Everything here runs on the slide's own clock, ds seconds a step.\nfunction step(S, ds) {\n  const cells = S.cells, n = S.n;\n  S.t += ds;\n  TT = S.t;\n  for (let i = cells.length - 1; i >= 0; i--) {\n    const c = cells[i];\n    c.p += (ds * c.rate) / 30;\n    if (c.br > 0) {\n      c.br = c.p \u003c 0.13 ? 1 - sm(0.07, 0.13, c.p) : 0;\n      if (hypot(c.bx - c.x, c.by - c.y) > c.rl * 2.4) c.br = max(0, c.br - ds * 2);\n    }\n    if (c.p >= 1) {\n      // Abscission: two daughters, each half the size, moving apart.\n      cells.splice(i, 1);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const d = newCell(c.x + s * c.e * c.ca, c.y + s * c.e * c.sa, 0, c.B * (0.95 + 0.1 * rnd()));\n        (d.vx = s * c.ca * 0.7), (d.vy = s * c.sa * 0.7), (d.br = 1), (d.bx = c.x), (d.by = c.y), (d.al = c.al), (d.out = c.out);\n        // Each daughter keeps its centrosome on the far side from its sister.\n        d.hd = c.a + (s \u003c 0 ? PI : 0) + (rnd() - 0.5);\n        d.cang = c.a + (s \u003c 0 ? PI : 0) - d.a;\n        cells.push(d);\n      }\n      continue;\n    }\n    // Crawling: interphase cells wander, round cells sit still.\n    const crawl = c.lam * 0.7;\n    c.hd += (rnd() - 0.5) * ds * 1.2;\n    c.vx *= exp(-ds * 0.6);\n    c.vy *= exp(-ds * 0.6);\n    c.x += (c.vx + cos(c.hd) * crawl) * ds;\n    c.y += (c.vy + sin(c.hd) * crawl) * ds;\n    // The walls turn a cell back and nudge it in.\n    const wx = sm(4, -3, c.x) - sm(60, 67, c.x), wy = sm(4, -3, c.y) - sm(124, 131, c.y);\n    if (wx || wy) {\n      c.hd = atan2(sin(c.hd) + wy * ds * 3, cos(c.hd) + wx * ds * 3);\n      (c.x += wx * ds * 2), (c.y += wy * ds * 2);\n    }\n    if (c.out) c.al -= ds * 0.45;\n    else c.al = min(1, c.al + ds * 0.5);\n  }\n  // Cells push gently apart.\n  for (let i = 0; i \u003c cells.length; i++)\n    for (let j = i + 1; j \u003c cells.length; j++) {\n      const a = cells[i], b = cells[j], dx = b.x - a.x, dy = b.y - a.y, d = hypot(dx, dy) + 1e-6, m = 0.8 * (a.rl + b.rl + a.e + b.e);\n      if (d \u003c 1.8 * m) {\n        const f = (((d \u003c m ? m - d : 0) * 0.5 + (1.8 * m - d) * 0.15) / d) * ds;\n        (a.x -= dx * f), (a.y -= dy * f), (b.x += dx * f), (b.y += dy * f);\n      }\n    }\n  for (let i = cells.length - 1; i >= 0; i--) if (cells[i].al \u003c= 0 && cells[i].out) cells.splice(i, 1);\n  // Keep the count: a crowded interphase cell lifts away, or a new one settles in.\n  let live = 0;\n  for (const c of cells) live += c.out ? 0 : 1;\n  S.cool -= ds;\n  if (live > n && (S.cool \u003c= 0 || live > n + 1)) {\n    let best = null, bs = -1;\n    for (const a of cells) {\n      if (a.out || a.p \u003c 0.14 || a.p > P2 - 0.04) continue;\n      let s = 0;\n      for (const b of cells) if (b !== a) s += max(0, a.rl + b.rl - hypot(a.x - b.x, a.y - b.y));\n      s += max(0, 10 - min(a.x, 64 - a.x, a.y, 128 - a.y));\n      if (s > bs) (bs = s), (best = a);\n    }\n    if (best) (best.out = 1), (S.cool = 0.8);\n  } else if (live \u003c n && S.cool \u003c= 0) {\n    const [x, y] = freeSpot(S), c = newCell(x, y, 0.12 + 0.6 * rnd());\n    c.al = 0;\n    cells.push(c);\n    S.cool = 0.5;\n  }\n  for (const c of cells) geo(c);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 9, 0.06], speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 9, 17));\n  Z = 1 + 1.15 * cl(k[3], 0, 1) ** 1.3;\n  if (k[0] !== S.k1) {\n    const s = cl(k[0], 0, 1) * 3, i = min(2, floor(s)), f = sm(0, 1, s - i);\n    for (let j = 0; j \u003c 4; j++) {\n      let a = STAINS[i][j], b = STAINS[i + 1][j];\n      if (b - a > 180) a += 360;\n      if (a - b > 180) b += 360;\n      hueRGB(mix(a, b, f), S.pal, j * 3);\n    }\n    S.k1 = k[0];\n  }\n  if (!S.cells.length) {\n    for (let i = 0; i \u003c S.n; i++) {\n      const [x, y] = freeSpot(S);\n      S.cells.push(newCell(x, y, (i + 0.8 * rnd()) / S.n));\n    }\n    for (const c of S.cells) geo(c);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    let best = null, bd = 1e9;\n    for (const c of S.cells) {\n      const d = hypot(c.x - 32, c.y - 64);\n      if (!c.out && c.p > P1 && c.p \u003c P2 && d \u003c bd) (bd = d), (best = c);\n    }\n    if (best) best.p = P2;\n  }\n  step(S, cl(dt || 0, 0, 0.1) * speed * 0.5);\n}\n\n// Box blur of radius 2 across and then down, for the glow.\nfunction blur(src, dst) {\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = y * W * 3 + ch;\n      for (let x = -2; x \u003c W; x++) {\n        if (x + 2 \u003c W) s += src[o + (x + 2) * 3];\n        if (x - 3 >= 0) s -= src[o + (x - 3) * 3];\n        if (x >= 0) dst[o + x * 3] = s / 5;\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = x * 3 + ch;\n      for (let y = -2; y \u003c H; y++) {\n        if (y + 2 \u003c H) s += dst[o + (y + 2) * W * 3];\n        if (y - 3 >= 0) s -= dst[o + (y - 3) * W * 3];\n        if (y >= 0) src[o + y * W * 3] = s / 5;\n      }\n    }\n}\n\n// Hard knee: a dye is either lit near full or left under the glow.\nconst knee = (v) => (v \u003c= 0.28 ? 0 : v >= 0.52 ? 255 : 255 * sm(0.28, 0.52, v));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.cells.length) return;\n  SA.fill(0), ST.fill(0), SD.fill(0), SC.fill(0), HZ.fill(0);\n  TT = S.t;\n  for (const c of S.cells) drawCell(c);\n  const P = S.pal;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = SA[i], t = ST[i], d = SD[i], z = SC[i];\n    if (a + t + d + z === 0) {\n      LIN[o] = LIN[o + 1] = LIN[o + 2] = BL[o] = BL[o + 1] = BL[o + 2] = 0;\n      continue;\n    }\n    LIN[o] = BL[o] = min(1, a * P[6] + t * P[3] + d * P[0] + z * P[9]);\n    LIN[o + 1] = BL[o + 1] = min(1, a * P[7] + t * P[4] + d * P[1] + z * P[10]);\n    LIN[o + 2] = BL[o + 2] = min(1, a * P[8] + t * P[5] + d * P[2] + z * P[11]);\n  }\n  blur(BL, TMP);\n  // The glow and a faint body haze stay under 21, below what counts as lit.\n  const h0 = 13 * P[3], h1 = 13 * P[4], h2 = 13 * P[5];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const h = HZ[i];\n    display.setPixel(\n      i & 63,\n      i >> 6,\n      max(knee(LIN[o]), min(21, 24 * BL[o] + h * h0)) | 0,\n      max(knee(LIN[o + 1]), min(21, 24 * BL[o + 1] + h * h1)) | 0,\n      max(knee(LIN[o + 2]), min(21, 24 * BL[o + 2] + h * h2)) | 0,\n    );\n  }\n}\n","layer":{"id":"layer-mitosis","type":"code","name":"mitosis","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mitosis\n// Family:  microbe\n// Idea:    A confocal immunofluorescence micrograph of a cell culture on black, DNA blue, microtubules green, actin red and centrosomes yellow, where each cell crawls and grows, then rounds up, lines its chromosomes on the plate between two spindle poles, pulls them apart and pinches in two at a red contractile ring, leaving a green midbody bridge between daughters that drift apart.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after immunofluorescence micrographs of dividing cells\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1\n//\n// Knob 1: Stain. The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA.\n// Knob 2: Speed. At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower.\n// Knob 3: Cells. How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in.\n// Knob 4: Zoom. The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show.\n// Buttons: K1 tap sends the interphase cell nearest the middle into prophase now.\n\nconst W = 64, H = 128, N = W * H, TAU = 2 * Math.PI, NCH = 8;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst hypot = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// A 64x64 tile of value noise that wraps, for chromatin.\nconst NT = new Float32Array(4096);\nfor (let k = 0; k \u003c 4096; k++) {\n  const x = ((k & 63) * 16) / 64, y = ((k >> 6) * 16) / 64, xi = floor(x), yi = floor(y), u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v), a = hash(xi, yi), b = hash((xi + 1) % 16, yi), c = hash(xi, (yi + 1) % 16), d = hash((xi + 1) % 16, (yi + 1) % 16);\n  NT[k] = a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nfunction nz(x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, x0 = xi & 63, y0 = (yi & 63) * 64, x1 = (xi + 1) & 63, y1 = ((yi + 1) & 63) * 64;\n  return mix(mix(NT[y0 + x0], NT[y0 + x1], fx), mix(NT[y1 + x0], NT[y1 + x1], fx), fy);\n}\n\n// The cycle, as fractions of it: daughters spread, interphase, prophase,\n// prometaphase, metaphase, anaphase, telophase to the split at 1.\nconst P1 = 0.1, P2 = 0.5, P3 = 0.6, P4 = 0.67, P5 = 0.79, P6 = 0.86;\n\n// Dye hues in degrees: DNA, tubulin, actin, centrosome.\nconst STAINS = [\n  [240, 120, 0, 55],\n  [228, 352, 125, 185],\n  [192, 305, 55, 120],\n  [262, 60, 318, 170],\n];\nconst hueRGB = (h, out, o) => {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (((5 - 2 * j) + h / 60) % 6 + 6) % 6;\n    out[o + j] = 1 - max(0, min(k, 4 - k, 1));\n  }\n};\n\n// One buffer per dye (actin, tubulin, DNA, centrosome) and one for the body\n// haze. LIN holds the merged colour and BL its blur for the glow; TMP is scratch.\nconst SA = new Float32Array(N), ST = new Float32Array(N), SD = new Float32Array(N), SC = new Float32Array(N), HZ = new Float32Array(N);\nconst LIN = new Float32Array(N * 3), BL = new Float32Array(N * 3), TMP = new Float32Array(N * 3);\nlet Z = 1, TT = 0;\n\nfunction newCell(x, y, p, B) {\n  const c = {\n    x, y, vx: 0, vy: 0, a: rnd() * PI, hd: rnd() * TAU, p, rate: 0.85 + 0.3 * rnd(), B: B || 12 + 2 * rnd(),\n    sd: floor(rnd() * 9973), w1: rnd() * TAU, w2: rnd() * TAU, w3: rnd() * TAU, nf: 22 + floor(rnd() * 7), cang: rnd() * TAU,\n    ox: rnd() * 64, oy: rnd() * 64, tilt: (rnd() - 0.5) * 0.4, al: 1, out: 0, br: 0, bx: 0, by: 0,\n    ca: 1, sa: 0, e: 0, rl: 5, kk: 2, pin: 0, wa: 0, hdl: 0, lam: 0, cx: 1, fur: 0, nS: 0, rn: 3, cond: 0, dense: 0, dS: 0, dr: 2,\n    Lp: 3, sp: 0, net: 0, ast: 0, chA: 0, sh: 0.5, pf: 0, ip: 0, ft: 0, fa: 0, cu: 0, cv: 0, dup: 0, rad: 10, p1u: 0, p1v: 0, p2u: 0, p2v: 0,\n    ch: new Float32Array(NCH * 4), wt: new Float32Array(64), fw: new Float32Array(64), gp: new Float32Array(64),\n  };\n  for (let j = 0; j \u003c NCH; j++) {\n    const r = 0.75 * sqrt(rnd()), q = rnd() * TAU;\n    c.ch[j * 4] = r * cos(q);\n    c.ch[j * 4 + 1] = r * sin(q);\n    c.ch[j * 4 + 2] = ((j + 0.5) / NCH) * 2 - 1 + (rnd() - 0.5) * 0.15;\n    c.ch[j * 4 + 3] = rnd() * PI;\n  }\n  return c;\n}\n\n// Where the cell is in its cycle decides its shape and what each dye shows.\nfunction geo(c) {\n  const p = c.p, B = c.B, Rm = 0.8 * B;\n  let rho = 1, R = Rm, f;\n  if (p \u003c P1) (f = sm(0, P1, p)), (rho = 1 - f), (R = mix(0.59 * B, 0.74 * B, f));\n  else if (p \u003c P2) (rho = 0), (R = mix(0.74 * B, B, (p - P1) / (P2 - P1)));\n  else if (p \u003c P3) (f = sm(P2, P3, p)), (rho = f), (R = mix(B, Rm, f));\n  const fa = (c.fa = sm(P5, P6, p)), ft = (c.ft = sm(P6, 1, p));\n  let e = 0.3 * R * (1 - rho);\n  if (p >= P5) e = p \u003c P6 ? 0.3 * Rm * fa : mix(0.3, 0.58, ft) * Rm;\n  c.e = e;\n  c.rl = R - 0.45 * e;\n  c.kk = (p >= P6 ? mix(0.5, 0.06, ft) : 0.5) * R;\n  c.pin = p >= P6 ? 3 * ft * sqrt(ft) : 0;\n  c.wa = 0.16 * (1 - rho) + 0.025;\n  c.lam = 1 - rho;\n  c.cx = mix(0.85, 1.2, rho);\n  c.fur = ft;\n  c.hdl = c.hd - c.a;\n  // Nucleus: whole until the envelope breaks early in prometaphase.\n  c.rn = 0.44 * R;\n  c.nS = p \u003c P3 ? 1 : 1 - sm(P3, P3 + 0.035, p);\n  c.cond = p \u003c P2 || p >= P6 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dense = p \u003c P1 ? 1 - sm(0, P1, p) : p >= P6 ? 1 : 0;\n  c.dS = sm(0.3, 0.8, ft);\n  c.dr = mix(0.13, 0.22, ft) * B;\n  // Chromosomes gather on the plate; in anaphase the sisters part for the poles.\n  c.pf = sm(P3, P4, p);\n  c.chA = p \u003c P3 ? 0 : sm(P3, P3 + 0.03, p) * (1 - sm(0.25, 0.7, ft));\n  const Lp0 = 0.58 * Rm;\n  c.Lp = p \u003c P5 ? Lp0 : p \u003c P6 ? Lp0 + 0.7 * e : mix(0.79, 0.86, ft) * Rm;\n  c.sh = p \u003c P5 ? 0.5 : p \u003c P6 ? mix(0.5, c.Lp - 1.4, fa) : c.Lp - 1.4;\n  c.sp = p \u003c P3 ? 0 : p \u003c P6 ? sm(P3, P4, p) : 1 - ft;\n  c.ip = p \u003c P5 ? 0 : p \u003c P6 ? fa : 1;\n  c.net = p \u003c P1 ? mix(0.45, 1, sm(0, P1, p)) : p \u003c P2 ? 1 : p \u003c P3 ? 1 - sm(P2, P3, p) : 0;\n  c.ast = p \u003c P2 ? 0 : p \u003c P3 ? sm(P2, P3, p) : 1;\n  c.dup = p > 0.4 && p \u003c P3 ? 1 : 0;\n  // Centrosome beside the nucleus; in prophase the pair travels round it to the poles.\n  c.cu = (c.rn + 1) * cos(c.cang);\n  c.cv = (c.rn + 1) * sin(c.cang);\n  if (p >= P2) {\n    const g = p \u003c P3 ? sm(P2, P3, p) : 1;\n    c.p1u = mix(c.cu, -c.Lp, g);\n    c.p1v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n    c.p2u = mix(c.cu, c.Lp, g);\n    c.p2v = mix(c.cv, 0, g) + sin(g * PI) * (c.rn + 1) * (c.cv \u003c 0 ? -1 : 1);\n  }\n  // The ruffled outline and the leading edge, as a table round the cell.\n  for (let k = 0; k \u003c 64; k++) {\n    const th = (k * PI) / 32 - PI, fr = max(0, cos(th - c.hdl)), F = fr * fr * c.lam;\n    c.fw[k] = F;\n    c.gp[k] = 1 - 0.9 * c.lam * sm(0.4, 0.5, 0.5 + 0.28 * sin(3 * th + 2 * c.w2) + 0.22 * sin(7 * th + c.w3));\n    c.wt[k] = c.rl * c.wa * (0.5 * sin(2 * th + c.w1) + 0.3 * sin(3 * th + c.w2) + 0.2 * sin(5 * th + c.w3 + TT * 0.35) + 0.9 * F);\n  }\n  c.rad = (c.e + c.rl * (1 + 1.6 * c.wa) + 2) * Z;\n  c.ca = cos(c.a);\n  c.sa = sin(c.a);\n}\n\n// What shapeD found at the last point it was asked about, kept for drawCell.\n// A typed array, so writing it for every LED makes no garbage.\nconst G = new Float64Array(3);\n// Signed distance to the cell's outline in its own frame: two discs joined\n// smoothly, ruffled, bulging at the leading edge, pinched at the furrow.\nfunction shapeD(c, u, v) {\n  const e = c.e, rl = c.rl, kk = c.kk;\n  const d1 = hypot(u - e, v) - rl, d2 = hypot(u + e, v) - rl, h = cl(0.5 + (0.5 * (d2 - d1)) / kk, 0, 1);\n  let d = mix(d2, d1, h) - kk * h * (1 - h);\n  const th = (G[1] = atan2(v, u)), q = (th + PI) * (32 / PI), k = floor(q), f = q - k, k0 = k & 63, k1 = (k + 1) & 63;\n  G[0] = mix(c.fw[k0], c.fw[k1], f);\n  G[2] = mix(c.gp[k0], c.gp[k1], f);\n  d -= mix(c.wt[k0], c.wt[k1], f);\n  if (c.pin > 0) d += c.pin * exp(-u * u * 0.4);\n  return d;\n}\n\nfunction put(B, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n    const i = y * W + x;\n    if (v > B[i]) B[i] = v;\n  }\n}\n// A soft dot at a world point; weights sharpened so lines stay one LED wide.\nfunction dot(B, wx, wy, a) {\n  const x = (wx - 32) * Z + 31.5, y = (wy - 64) * Z + 63.5, x0 = floor(x), y0 = floor(y);\n  let fx = x - x0, fy = y - y0;\n  (fx = fx * fx * (3 - 2 * fx)), (fy = fy * fy * (3 - 2 * fy));\n  put(B, x0, y0, a * (1 - fx) * (1 - fy));\n  put(B, x0 + 1, y0, a * fx * (1 - fy));\n  put(B, x0, y0 + 1, a * (1 - fx) * fy);\n  put(B, x0 + 1, y0 + 1, a * fx * fy);\n}\n// A curve in the cell's frame from (au, av) to (bu, bv) bowed through (mu, mv).\nfunction curve(B, c, au, av, mu, mv, bu, bv, a) {\n  const n = max(2, ceil((hypot(mu - au, mv - av) + hypot(bu - mu, bv - mv)) * Z * 2.2));\n  for (let k = 0; k \u003c= n; k++) {\n    const t = k / n, s = 1 - t, u = s * s * au + 2 * s * t * mu + t * t * bu, v = s * s * av + 2 * s * t * mv + t * t * bv;\n    dot(B, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, a);\n  }\n}\nconst line = (B, c, au, av, bu, bv, a) => curve(B, c, au, av, (au + bu) / 2, (av + bv) / 2, bu, bv, a);\n\n// Microtubules grown out from (u0, v0) until they meet the cortex.\nfunction rays(c, u0, v0, n, ang, spread, len, a, sd) {\n  const st = 0.45 / Z;\n  for (let i = 0; i \u003c n; i++) {\n    const h1 = hash(c.sd + sd, i), h2 = hash(i, c.sd + sd + 7);\n    let q = ang + (n > 1 ? ((i + 0.5 * h1) / n - 0.5) * spread : 0), u = u0, v = v0;\n    const L = len * (0.7 + 0.45 * h2), curl = (h1 - 0.5) * 0.3, b = a * (0.9 + 0.25 * h2);\n    for (let s = 0; s \u003c L; s += st) {\n      q += curl * st + 0.12 * sin(s * 0.6 + i * 1.7) * st;\n      u += cos(q) * st;\n      v += sin(q) * st;\n      if (shapeD(c, u, v) > -1.6 - 1.4 * G[0]) break;\n      const nq = c.nS > 0.5 ? hypot(u / (c.rn * 1.1), v / (c.rn * 0.92)) : 2;\n      // Asters wrap round the nucleus until its envelope breaks.\n      if (nq \u003c 1 && sd) break;\n      dot(ST, c.x + u * c.ca - v * c.sa, c.y + u * c.sa + v * c.ca, nq \u003c 1 ? b * 0.3 : b);\n    }\n  }\n}\n\nfunction chromatin(c, u, v, cond) {\n  const tu = u * 1.5 + c.ox, tv = v * 1.5 + c.oy;\n  let t = mix(0.35 + 0.9 * nz(tu, tv) - 0.6 * exp(-((u - 0.3 * c.rn) ** 2 + (v + 0.2 * c.rn) ** 2) * 0.9), 1.2, c.dense);\n  if (cond > 0) t = mix(t, 1.5 * sm(0.14, 0.04, abs(nz(tu * 1.4 + 17, tv * 1.4 + 5) - 0.5)), cond);\n  return t;\n}\n\nfunction drawCell(c) {\n  const al = c.al, cx = (c.x - 32) * Z + 32, cy = (c.y - 64) * Z + 64, r = c.rad;\n  const x0 = max(0, floor(cx - r)), x1 = min(W - 1, ceil(cx + r)), y0 = max(0, floor(cy - r)), y1 = min(H - 1, ceil(cy + r));\n  if (x0 > x1 || y0 > y1) return;\n  const iz = 1 / Z, rn = c.rn, na = rn * 1.1, nb = rn * 0.92, r2 = r * r;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      if ((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2 > r2) continue;\n      const dx = (x + 0.5 - cx) * iz, dy = (y + 0.5 - cy) * iz, u = dx * c.ca + dy * c.sa, v = -dx * c.sa + dy * c.ca;\n      const d = shapeD(c, u, v);\n      if (d > 0.8) continue;\n      const i = y * W + x;\n      // Actin: the cortex, broad at the leading edge, and the ring at the furrow.\n      const fr = G[0], th = G[1];\n      let A = sm(-1.2, -0.7, d) * sm(0.35, -0.15, d) * c.cx * G[2];\n      if (fr > 0.05) A = max(A, fr * sm(-2.6, -1.9, d) * sm(0.35, -0.15, d) * (0.55 + 0.6 * nz(th * 20.372 + c.oy, c.ox + d)));\n      if (c.lam > 0.05 && d \u003c -1.2) {\n        // Stress fibres along the cell's long axis, some broken off short.\n        const q = (v + c.tilt * u) / 2.7 + c.ox, k = floor(q + 0.5), h = hash(c.sd + 11, k), e = (hash(k, c.sd) - 0.5) * c.rl;\n        if (h > 0.55 && abs(u - e) \u003c c.rl * (0.3 + 0.7 * h) && hypot(u / na, v / nb) > 1.15) A = max(A, c.lam * sm(0.62, 0.22, abs(q - k) * 2.7) * sm(-1.2, -2.2, d));\n      }\n      if (c.fur > 0) A = max(A, 1.3 * c.fur * exp(-u * u * 1.4) * sm(0.3, -0.5, d));\n      if (A * al > SA[i]) SA[i] = A * al;\n      if (d \u003c 0 && al > HZ[i]) HZ[i] = al * sm(0.5, -2, d);\n      // DNA: an interphase nucleus, or the two that reform in telophase.\n      let D = 0;\n      if (c.nS > 0) {\n        const dn = (hypot(u / na, v / nb) - 1) * nb;\n        if (dn \u003c 0.6) D = sm(0.55, -0.45, dn) * c.nS * chromatin(c, u, v, c.cond);\n      }\n      if (c.dS > 0) {\n        const dn = hypot(abs(u) - c.e, v) - c.dr;\n        if (dn \u003c 0.6) D = max(D, sm(0.55, -0.45, dn) * c.dS * chromatin(c, abs(u) - c.e, v, c.cond));\n      }\n      if (D * al > SD[i]) SD[i] = D * al;\n    }\n  const p = c.p, Rm = 0.8 * c.B;\n  // Interphase network from the centrosome.\n  if (c.net > 0.02) rays(c, c.cu, c.cv, c.nf, c.cang, TAU, c.net * 1.6 * c.rl, al, 0);\n  if (p \u003c P2) {\n    dot(SC, c.x + c.cu * c.ca - c.cv * c.sa, c.y + c.cu * c.sa + c.cv * c.ca, 1.2 * al);\n    if (c.dup) dot(SC, c.x + (c.cu + 0.8) * c.ca - c.cv * c.sa, c.y + (c.cu + 0.8) * c.sa + c.cv * c.ca, 1.2 * al);\n  } else {\n    // Asters, and the spindle between its poles.\n    const spr = mix(TAU, 2.2, c.sp), la = c.ast * c.rl * 1.2;\n    rays(c, c.p1u, c.p1v, 9, PI, spr, la, al, 3);\n    rays(c, c.p2u, c.p2v, 9, 0, spr, la, al, 5);\n    dot(SC, c.x + c.p1u * c.ca - c.p1v * c.sa, c.y + c.p1u * c.sa + c.p1v * c.ca, 1.25 * al);\n    dot(SC, c.x + c.p2u * c.ca - c.p2v * c.sa, c.y + c.p2u * c.sa + c.p2v * c.ca, 1.25 * al);\n    const hw = 0.42 * Rm, ch = c.ch, pf = c.pf * c.pf * (3 - 2 * c.pf);\n    for (let j = 0; j \u003c NCH; j++) {\n      const cu = mix(ch[j * 4] * c.rn, 0.25 * sin(TT * 3.5 + j), pf), cv = mix(ch[j * 4 + 1] * c.rn, ch[j * 4 + 2] * hw, pf), o = mix(ch[j * 4 + 3], PI / 2, pf);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const su = cu + s * c.sh * mix(-sin(o), 1, pf), sv = cv + s * c.sh * mix(cos(o), 0, pf);\n        if (c.sp > 0.02) curve(ST, c, s * c.Lp, 0, (s * c.Lp + su) / 2, sv * 1.3, su, sv, c.sp * al * 0.95);\n        if (c.chA > 0.02) {\n          // Sister chromatids, arms trailing back toward the plate in anaphase.\n          const tr = c.fa, du = mix(cos(o), -s * 0.9, tr) * 1.1, dv = mix(sin(o), 0.45 * (cv \u003c 0 ? -1 : 1), tr) * 1.1;\n          line(SD, c, su - du * (1 - tr), sv - dv * (1 - tr), su + du, sv + dv, 1.3 * c.chA * al);\n        }\n      }\n    }\n    // Central spindle, gathered into the midbody as the furrow closes.\n    if (c.ip > 0.02) {\n      const x = max(1.4, (c.sh - 0.8) * (1 - c.ft) + 1.6 * c.ft);\n      for (let k = -1; k \u003c= 1; k++) line(ST, c, -x, k * 1.1 * (1 - c.ft), x, k * 1.1 * (1 - c.ft), c.ip * al * (k ? 0.85 : 1.1));\n    }\n  }\n  // The midbody bridge back to the sister cell, with its ring.\n  if (c.br > 0.02) {\n    const dx = c.bx - c.x, dy = c.by - c.y, L = hypot(dx, dy), r0 = c.rl * 0.8;\n    if (L > r0) {\n      const ux = dx / L, uy = dy / L, n = ceil((L - r0) * Z * 2.2);\n      for (let k = 0; k \u003c= n; k++) dot(ST, c.x + ux * (r0 + ((L - r0) * k) / n), c.y + uy * (r0 + ((L - r0) * k) / n), c.br * al);\n      dot(SA, c.bx, c.by, 1.2 * c.br * al);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = { cells: [], t: 0, k1: -1, pal: new Float32Array(12), cool: 0, n: 0 };\n}\n\n// The emptiest spot in the field: best of a dozen tries.\nfunction freeSpot(S) {\n  let bx = 32, by = 64, bd = -1;\n  for (let k = 0; k \u003c 14; k++) {\n    const x = 6 + rnd() * 52, y = 6 + rnd() * 116;\n    let d = min(x + 6, 70 - x, y + 6, 134 - y) * 0.6;\n    for (const c of S.cells) d = min(d, hypot(c.x - x, c.y - y));\n    if (d > bd) (bd = d), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// Everything here runs on the slide's own clock, ds seconds a step.\nfunction step(S, ds) {\n  const cells = S.cells, n = S.n;\n  S.t += ds;\n  TT = S.t;\n  for (let i = cells.length - 1; i >= 0; i--) {\n    const c = cells[i];\n    c.p += (ds * c.rate) / 30;\n    if (c.br > 0) {\n      c.br = c.p \u003c 0.13 ? 1 - sm(0.07, 0.13, c.p) : 0;\n      if (hypot(c.bx - c.x, c.by - c.y) > c.rl * 2.4) c.br = max(0, c.br - ds * 2);\n    }\n    if (c.p >= 1) {\n      // Abscission: two daughters, each half the size, moving apart.\n      cells.splice(i, 1);\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const d = newCell(c.x + s * c.e * c.ca, c.y + s * c.e * c.sa, 0, c.B * (0.95 + 0.1 * rnd()));\n        (d.vx = s * c.ca * 0.7), (d.vy = s * c.sa * 0.7), (d.br = 1), (d.bx = c.x), (d.by = c.y), (d.al = c.al), (d.out = c.out);\n        // Each daughter keeps its centrosome on the far side from its sister.\n        d.hd = c.a + (s \u003c 0 ? PI : 0) + (rnd() - 0.5);\n        d.cang = c.a + (s \u003c 0 ? PI : 0) - d.a;\n        cells.push(d);\n      }\n      continue;\n    }\n    // Crawling: interphase cells wander, round cells sit still.\n    const crawl = c.lam * 0.7;\n    c.hd += (rnd() - 0.5) * ds * 1.2;\n    c.vx *= exp(-ds * 0.6);\n    c.vy *= exp(-ds * 0.6);\n    c.x += (c.vx + cos(c.hd) * crawl) * ds;\n    c.y += (c.vy + sin(c.hd) * crawl) * ds;\n    // The walls turn a cell back and nudge it in.\n    const wx = sm(4, -3, c.x) - sm(60, 67, c.x), wy = sm(4, -3, c.y) - sm(124, 131, c.y);\n    if (wx || wy) {\n      c.hd = atan2(sin(c.hd) + wy * ds * 3, cos(c.hd) + wx * ds * 3);\n      (c.x += wx * ds * 2), (c.y += wy * ds * 2);\n    }\n    if (c.out) c.al -= ds * 0.45;\n    else c.al = min(1, c.al + ds * 0.5);\n  }\n  // Cells push gently apart.\n  for (let i = 0; i \u003c cells.length; i++)\n    for (let j = i + 1; j \u003c cells.length; j++) {\n      const a = cells[i], b = cells[j], dx = b.x - a.x, dy = b.y - a.y, d = hypot(dx, dy) + 1e-6, m = 0.8 * (a.rl + b.rl + a.e + b.e);\n      if (d \u003c 1.8 * m) {\n        const f = (((d \u003c m ? m - d : 0) * 0.5 + (1.8 * m - d) * 0.15) / d) * ds;\n        (a.x -= dx * f), (a.y -= dy * f), (b.x += dx * f), (b.y += dy * f);\n      }\n    }\n  for (let i = cells.length - 1; i >= 0; i--) if (cells[i].al \u003c= 0 && cells[i].out) cells.splice(i, 1);\n  // Keep the count: a crowded interphase cell lifts away, or a new one settles in.\n  let live = 0;\n  for (const c of cells) live += c.out ? 0 : 1;\n  S.cool -= ds;\n  if (live > n && (S.cool \u003c= 0 || live > n + 1)) {\n    let best = null, bs = -1;\n    for (const a of cells) {\n      if (a.out || a.p \u003c 0.14 || a.p > P2 - 0.04) continue;\n      let s = 0;\n      for (const b of cells) if (b !== a) s += max(0, a.rl + b.rl - hypot(a.x - b.x, a.y - b.y));\n      s += max(0, 10 - min(a.x, 64 - a.x, a.y, 128 - a.y));\n      if (s > bs) (bs = s), (best = a);\n    }\n    if (best) (best.out = 1), (S.cool = 0.8);\n  } else if (live \u003c n && S.cool \u003c= 0) {\n    const [x, y] = freeSpot(S), c = newCell(x, y, 0.12 + 0.6 * rnd());\n    c.al = 0;\n    cells.push(c);\n    S.cool = 0.5;\n  }\n  for (const c of cells) geo(c);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 9, 0.06], speed = cl(k[1], 0.2, 3);\n  S.n = round(cl(k[2], 9, 17));\n  Z = 1 + 1.15 * cl(k[3], 0, 1) ** 1.3;\n  if (k[0] !== S.k1) {\n    const s = cl(k[0], 0, 1) * 3, i = min(2, floor(s)), f = sm(0, 1, s - i);\n    for (let j = 0; j \u003c 4; j++) {\n      let a = STAINS[i][j], b = STAINS[i + 1][j];\n      if (b - a > 180) a += 360;\n      if (a - b > 180) b += 360;\n      hueRGB(mix(a, b, f), S.pal, j * 3);\n    }\n    S.k1 = k[0];\n  }\n  if (!S.cells.length) {\n    for (let i = 0; i \u003c S.n; i++) {\n      const [x, y] = freeSpot(S);\n      S.cells.push(newCell(x, y, (i + 0.8 * rnd()) / S.n));\n    }\n    for (const c of S.cells) geo(c);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    let best = null, bd = 1e9;\n    for (const c of S.cells) {\n      const d = hypot(c.x - 32, c.y - 64);\n      if (!c.out && c.p > P1 && c.p \u003c P2 && d \u003c bd) (bd = d), (best = c);\n    }\n    if (best) best.p = P2;\n  }\n  step(S, cl(dt || 0, 0, 0.1) * speed * 0.5);\n}\n\n// Box blur of radius 2 across and then down, for the glow.\nfunction blur(src, dst) {\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = y * W * 3 + ch;\n      for (let x = -2; x \u003c W; x++) {\n        if (x + 2 \u003c W) s += src[o + (x + 2) * 3];\n        if (x - 3 >= 0) s -= src[o + (x - 3) * 3];\n        if (x >= 0) dst[o + x * 3] = s / 5;\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      let s = 0;\n      const o = x * 3 + ch;\n      for (let y = -2; y \u003c H; y++) {\n        if (y + 2 \u003c H) s += dst[o + (y + 2) * W * 3];\n        if (y - 3 >= 0) s -= dst[o + (y - 3) * W * 3];\n        if (y >= 0) src[o + y * W * 3] = s / 5;\n      }\n    }\n}\n\n// Hard knee: a dye is either lit near full or left under the glow.\nconst knee = (v) => (v \u003c= 0.28 ? 0 : v >= 0.52 ? 255 : 255 * sm(0.28, 0.52, v));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.cells.length) return;\n  SA.fill(0), ST.fill(0), SD.fill(0), SC.fill(0), HZ.fill(0);\n  TT = S.t;\n  for (const c of S.cells) drawCell(c);\n  const P = S.pal;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = SA[i], t = ST[i], d = SD[i], z = SC[i];\n    if (a + t + d + z === 0) {\n      LIN[o] = LIN[o + 1] = LIN[o + 2] = BL[o] = BL[o + 1] = BL[o + 2] = 0;\n      continue;\n    }\n    LIN[o] = BL[o] = min(1, a * P[6] + t * P[3] + d * P[0] + z * P[9]);\n    LIN[o + 1] = BL[o + 1] = min(1, a * P[7] + t * P[4] + d * P[1] + z * P[10]);\n    LIN[o + 2] = BL[o + 2] = min(1, a * P[8] + t * P[5] + d * P[2] + z * P[11]);\n  }\n  blur(BL, TMP);\n  // The glow and a faint body haze stay under 21, below what counts as lit.\n  const h0 = 13 * P[3], h1 = 13 * P[4], h2 = 13 * P[5];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const h = HZ[i];\n    display.setPixel(\n      i & 63,\n      i >> 6,\n      max(knee(LIN[o]), min(21, 24 * BL[o] + h * h0)) | 0,\n      max(knee(LIN[o + 1]), min(21, 24 * BL[o + 1] + h * h1)) | 0,\n      max(knee(LIN[o + 2]), min(21, 24 * BL[o + 2] + h * h2)) | 0,\n    );\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stain=0..1, Speed=0.2..3, Cells=9..17, Zoom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stain","min":0,"max":1,"about":"The dyes and their colours. At 0 the classic merge: DAPI blue DNA, green tubulin, red actin and yellow centrosomes. Turning it swaps them round, red tubulin against green actin at a third and magenta tubulin with yellow actin on cyan DNA at two thirds; at 1 the tubulin is yellow and the actin magenta, on violet DNA."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a cell runs its whole cycle in about 30 seconds, half of it in mitosis; 0.2 is ten times slower."},{"name":"Cells","min":9,"max":17,"about":"How many cells share the field, from 9 to 17. When a division leaves one too many, the most crowded interphase cell lifts out of the focal plane and fades; when one is missing, a new cell settles in."},{"name":"Zoom","min":0,"max":1,"about":"The objective, from the whole field at 0 to about twice the magnification at 1, where single spindle fibres and chromosomes show."}],"start":[0,2,9,0.06],"measures":{"motion":0.3411,"detail":0.1419,"edges":0.8838,"complexity":0.8038,"coverage":0.2626,"colour":0.5399,"drift":0.2023},"knobResponse":[0.1544,0.1632,0.2075,0.2066]},{"slug":"moire-rings","title":"Moire Rings","family":"wave","round":1,"note":"동심원 두 벌이 서로 지나가고, 어긋나는 자리에 아무도 그리지 않은 무늬가 생겨요.","idea":"Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.","buttons":"K1 tap swaps which set of rings is drawn bright.","code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-moire-rings","type":"code","name":"moire-rings","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two-colour pair around the colour wheel."},{"name":"Speed","min":0.1,"max":6,"about":"How fast the two centres orbit."},{"name":"Rings","min":5,"max":16,"about":"Ring spacing in LEDs; small is a fine moire, large is a few fat bands."},{"name":"Spread","min":-1,"max":1,"about":"How far apart the two centres travel, and below 0 the second one turns the other way."}],"start":[0,2,5,0.06],"measures":{"motion":1.5703,"detail":0.2108,"edges":1,"complexity":0.1822,"coverage":0.7502,"colour":0.4676,"drift":0.1626},"knobResponse":[0.2556,0.2849,0.3431,0.2821]},{"slug":"mood-tint","title":"Mood Tint","family":"cosmetic","round":34,"note":"판 전체가 열에 색이 바뀌는 짙은 보라 코팅이에요. 보이지 않는 손끝이 누른 자리마다 지문 결이 든 옅은 난초색 타원이 피고, 열이 퍼지며 결부터 흐려지고 이웃 자국과 엉겨 붙었다가 다시 보라 속으로 줄어들어요. K1 을 누르면 손바닥 하나가 1.1초 동안 눌러요.","idea":"A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.","buttons":"K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.","code":"// ===== Patternflow pattern =====\n// Title:   Mood Tint\n// Family:  cosmetic\n// Idea:    A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after thermochromic lip tints and mood nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1\n//\n// Knob 1: Hue. The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive.\n// Knob 2: Speed. At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster.\n// Knob 3: Warmth. How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together.\n// Knob 4: Blend. How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring.\n// Buttons: K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Temperatures are in units of a fingertip at Warmth 0 above the room: the\n// room is 0, a fingertip 1. The coat turns at THETA.\nconst THETA = 0.4;\n// Heat diffusion in LED^2 a second and Newton cooling a second, at Speed 2.\nconst ALPHA = 1.1, COOL = 0.32;\n// How fast the coat under a pressed fingertip takes its warmth, a second.\nconst GRIP = 7;\n// Hue of the cool coat at Hue 0: violet. The warm coat is a paler, pinker shade.\nconst H0 = 0.76;\n// The colour table spans temperatures -0.2 to 1.8.\nconst LUT = 512, T0 = -0.2, T1 = 1.8;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, warmth: 0, blend: 0.06, warm: false, clock: 0, nextPress: 0,\n    T: new Float32Array(N), U: new Float32Array(N), room: new Float32Array(N),\n    presses: [], lut: new Uint8Array(LUT * 3), lutKey: \"\", c: [0, 0, 0], c2: [0, 0, 0],\n  };\n  const S = params.s;\n  // The room is not quite even: a soft field of +-0.05 that only the cool\n  // shade shows.\n  const g = [];\n  for (let i = 0; i \u003c 5 * 9; i++) g.push(random() * 2 - 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / W) * 4, v = (y / H) * 8, i = floor(u), j = floor(v), fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * 5 + i], b = g[j * 5 + i + 1], c = g[(j + 1) * 5 + i], d = g[(j + 1) * 5 + i + 1];\n      S.room[y * W + x] = 0.05 * ((a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv);\n    }\n}\n\n// A fingertip pad: an oval about 11 by 16 LEDs, tilted, with whorl ridges\n// 2.3 LEDs apart round a core a little below its middle.\nfunction fingertip(x, y) {\n  return {\n    x, y, rx: 5 + random() * 1.5, ry: 7 + random() * 1.8, a: (random() - 0.5) * 1.1,\n    core: 1 + random() * 2, ph: random() * 6.28, lam: 2.8, palm: false,\n    t: 0, dur: 0.45 + random() * 0.3,\n  };\n}\n\n// The coat's colour at each temperature, rebuilt when a knob moves it.\nfunction buildLut(S) {\n  const key = S.hue.toFixed(3) + S.blend.toFixed(3);\n  if (key === S.lutKey) return;\n  S.lutKey = key;\n  const h = S.hue + H0, hh = h - floor(h), c = S.c, c2 = S.c2;\n  // Orange and yellow go brown or olive when deep, so round them the cool\n  // shade stays bright.\n  const lift = sm(0.0, 0.06, hh) * (1 - sm(0.24, 0.33, hh));\n  const width = 0.012 + 0.6 * S.blend * S.blend;\n  for (let i = 0; i \u003c LUT; i++) {\n    const T = T0 + ((T1 - T0) * i) / (LUT - 1);\n    const m = sm(THETA - width, THETA + width, T);\n    // Cool: deeper the colder it is, a little lighter just short of turning.\n    const vc = 0.44 + 0.34 * lift + 0.12 * sm(-0.1, THETA, T);\n    hsv(h, 0.9 - 0.1 * lift, vc, c);\n    // Warm: pale, and paler the hotter, so a ridge pressed hot is a whiter line.\n    const hot = sm(THETA, THETA + 0.7, T);\n    hsv(h + 0.08, (0.5 - 0.42 * hot) * (1 - 0.5 * lift), 1, c2);\n    for (let k = 0; k \u003c 3; k++) S.lut[i * 3 + k] = round(255 * (c[k] + (c2[k] - c[k]) * m));\n  }\n}\n\n// One moment of the coat: presses warm it, heat spreads and drains away.\nfunction step(S, dt) {\n  const { T, U, room } = S;\n  const Tf = 1.6 ** S.warmth;\n  // Fingertips arrive in little groups of one to three, about every 0.42 s.\n  S.nextPress -= dt;\n  if (S.nextPress \u003c= 0) {\n    S.nextPress = 0.1 + random() * 0.35;\n    const n = random() \u003c 0.55 ? 1 : random() \u003c 0.7 ? 2 : 3;\n    const x0 = 6 + random() * (W - 12), y0 = 8 + random() * (H - 16);\n    for (let i = 0; i \u003c n; i++) S.presses.push(fingertip(x0 + (i - (n - 1) / 2) * 12 + (random() - 0.5) * 3, y0 + (random() - 0.5) * 8));\n  }\n  for (const P of S.presses) {\n    P.t += dt;\n    const env = sm(0, 0.12, P.t) * (1 - sm(P.dur - 0.1, P.dur, P.t));\n    if (env \u003c= 0) continue;\n    const ca = cos(P.a), sa = sin(P.a), R = max(P.rx, P.ry) + 2;\n    const k = 1 - exp(-GRIP * dt * env);\n    for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, P.y + R); y++)\n      for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, P.x + R); x++) {\n        const dx = x - P.x, dy = y - P.y, u = dx * ca + dy * sa, v = -dx * sa + dy * ca;\n        const rho = sqrt((u / P.rx) ** 2 + (v / P.ry) ** 2);\n        if (rho >= 1) continue;\n        let ridge;\n        if (P.palm) ridge = 0.5 + 0.5 * cos(u * 0.35 + 2.2 * sin(v * 0.11 + P.ph)) * cos(v * 0.5 + sin(u * 0.2));\n        else {\n          const vv = v - P.core, rw = sqrt(u * u + vv * vv * 0.7) + 0.8 * sin(atan2(vv, u) + P.ph);\n          ridge = 0.5 + 0.5 * cos((2 * PI * rw) / P.lam);\n        }\n        const s = (1 - sm(0.72, 1, rho)) * (0.58 + 0.42 * ridge);\n        const p = y * W + x, target = Tf * s;\n        if (target > T[p]) T[p] += (target - T[p]) * k;\n      }\n  }\n  S.presses = S.presses.filter((P) => P.t \u003c P.dur);\n  // Heat equation on the panel, its edges insulated, and Newton cooling\n  // toward the room.\n  const a = ALPHA * dt, c = COOL * dt;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p];\n      const l = x > 0 ? T[p - 1] : t, r = x \u003c W - 1 ? T[p + 1] : t, u = y > 0 ? T[p - W] : t, d = y \u003c H - 1 ? T[p + W] : t;\n      U[p] = t + a * (l + r + u + d - 4 * t) - c * (t - room[p]);\n    }\n  T.set(U);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.warmth = cl(k[2], -1, 1);\n  S.blend = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a coat that has been pressed for four seconds.\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const P = fingertip(10 + random() * (W - 20), 22 + random() * (H - 44));\n    Object.assign(P, { rx: 17, ry: 23, a: (random() - 0.5) * 0.5, palm: true, dur: 1.1 });\n    S.presses.push(P);\n  }\n  // Time on the coat runs at Speed / 2; steps stay under 0.07 s so the heat\n  // equation holds steady.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 0.07);\n    step(S, h);\n    left -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  buildLut(S);\n  const { T, lut } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = round(((cl(T[y * W + x], T0, T1) - T0) / (T1 - T0)) * (LUT - 1)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n}\n","layer":{"id":"layer-mood-tint","type":"code","name":"mood-tint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mood Tint\n// Family:  cosmetic\n// Idea:    A thermochromic coat over the whole panel, deep violet while cool, that unseen fingertips press here and there: each press leaves a warm oval with faint fingerprint ridges, the heat spreads and drains back into the room, and the colour flips to pale orchid wherever the surface is above one temperature, so the prints bloom with crisp edges, lose their ridges first, merge with their neighbours like soft blobs and shrink back into the deep colour.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after thermochromic lip tints and mood nail polish\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1\n//\n// Knob 1: Hue. The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive.\n// Knob 2: Speed. At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster.\n// Knob 3: Warmth. How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together.\n// Knob 4: Blend. How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring.\n// Buttons: K1 tap presses a whole palm somewhere on the panel for 1.1 seconds: a warm oval 34 by 46 LEDs with soft crease lines across it.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Temperatures are in units of a fingertip at Warmth 0 above the room: the\n// room is 0, a fingertip 1. The coat turns at THETA.\nconst THETA = 0.4;\n// Heat diffusion in LED^2 a second and Newton cooling a second, at Speed 2.\nconst ALPHA = 1.1, COOL = 0.32;\n// How fast the coat under a pressed fingertip takes its warmth, a second.\nconst GRIP = 7;\n// Hue of the cool coat at Hue 0: violet. The warm coat is a paler, pinker shade.\nconst H0 = 0.76;\n// The colour table spans temperatures -0.2 to 1.8.\nconst LUT = 512, T0 = -0.2, T1 = 1.8;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, warmth: 0, blend: 0.06, warm: false, clock: 0, nextPress: 0,\n    T: new Float32Array(N), U: new Float32Array(N), room: new Float32Array(N),\n    presses: [], lut: new Uint8Array(LUT * 3), lutKey: \"\", c: [0, 0, 0], c2: [0, 0, 0],\n  };\n  const S = params.s;\n  // The room is not quite even: a soft field of +-0.05 that only the cool\n  // shade shows.\n  const g = [];\n  for (let i = 0; i \u003c 5 * 9; i++) g.push(random() * 2 - 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const u = (x / W) * 4, v = (y / H) * 8, i = floor(u), j = floor(v), fu = sm(0, 1, u - i), fv = sm(0, 1, v - j);\n      const a = g[j * 5 + i], b = g[j * 5 + i + 1], c = g[(j + 1) * 5 + i], d = g[(j + 1) * 5 + i + 1];\n      S.room[y * W + x] = 0.05 * ((a + (b - a) * fu) * (1 - fv) + (c + (d - c) * fu) * fv);\n    }\n}\n\n// A fingertip pad: an oval about 11 by 16 LEDs, tilted, with whorl ridges\n// 2.3 LEDs apart round a core a little below its middle.\nfunction fingertip(x, y) {\n  return {\n    x, y, rx: 5 + random() * 1.5, ry: 7 + random() * 1.8, a: (random() - 0.5) * 1.1,\n    core: 1 + random() * 2, ph: random() * 6.28, lam: 2.8, palm: false,\n    t: 0, dur: 0.45 + random() * 0.3,\n  };\n}\n\n// The coat's colour at each temperature, rebuilt when a knob moves it.\nfunction buildLut(S) {\n  const key = S.hue.toFixed(3) + S.blend.toFixed(3);\n  if (key === S.lutKey) return;\n  S.lutKey = key;\n  const h = S.hue + H0, hh = h - floor(h), c = S.c, c2 = S.c2;\n  // Orange and yellow go brown or olive when deep, so round them the cool\n  // shade stays bright.\n  const lift = sm(0.0, 0.06, hh) * (1 - sm(0.24, 0.33, hh));\n  const width = 0.012 + 0.6 * S.blend * S.blend;\n  for (let i = 0; i \u003c LUT; i++) {\n    const T = T0 + ((T1 - T0) * i) / (LUT - 1);\n    const m = sm(THETA - width, THETA + width, T);\n    // Cool: deeper the colder it is, a little lighter just short of turning.\n    const vc = 0.44 + 0.34 * lift + 0.12 * sm(-0.1, THETA, T);\n    hsv(h, 0.9 - 0.1 * lift, vc, c);\n    // Warm: pale, and paler the hotter, so a ridge pressed hot is a whiter line.\n    const hot = sm(THETA, THETA + 0.7, T);\n    hsv(h + 0.08, (0.5 - 0.42 * hot) * (1 - 0.5 * lift), 1, c2);\n    for (let k = 0; k \u003c 3; k++) S.lut[i * 3 + k] = round(255 * (c[k] + (c2[k] - c[k]) * m));\n  }\n}\n\n// One moment of the coat: presses warm it, heat spreads and drains away.\nfunction step(S, dt) {\n  const { T, U, room } = S;\n  const Tf = 1.6 ** S.warmth;\n  // Fingertips arrive in little groups of one to three, about every 0.42 s.\n  S.nextPress -= dt;\n  if (S.nextPress \u003c= 0) {\n    S.nextPress = 0.1 + random() * 0.35;\n    const n = random() \u003c 0.55 ? 1 : random() \u003c 0.7 ? 2 : 3;\n    const x0 = 6 + random() * (W - 12), y0 = 8 + random() * (H - 16);\n    for (let i = 0; i \u003c n; i++) S.presses.push(fingertip(x0 + (i - (n - 1) / 2) * 12 + (random() - 0.5) * 3, y0 + (random() - 0.5) * 8));\n  }\n  for (const P of S.presses) {\n    P.t += dt;\n    const env = sm(0, 0.12, P.t) * (1 - sm(P.dur - 0.1, P.dur, P.t));\n    if (env \u003c= 0) continue;\n    const ca = cos(P.a), sa = sin(P.a), R = max(P.rx, P.ry) + 2;\n    const k = 1 - exp(-GRIP * dt * env);\n    for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, P.y + R); y++)\n      for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, P.x + R); x++) {\n        const dx = x - P.x, dy = y - P.y, u = dx * ca + dy * sa, v = -dx * sa + dy * ca;\n        const rho = sqrt((u / P.rx) ** 2 + (v / P.ry) ** 2);\n        if (rho >= 1) continue;\n        let ridge;\n        if (P.palm) ridge = 0.5 + 0.5 * cos(u * 0.35 + 2.2 * sin(v * 0.11 + P.ph)) * cos(v * 0.5 + sin(u * 0.2));\n        else {\n          const vv = v - P.core, rw = sqrt(u * u + vv * vv * 0.7) + 0.8 * sin(atan2(vv, u) + P.ph);\n          ridge = 0.5 + 0.5 * cos((2 * PI * rw) / P.lam);\n        }\n        const s = (1 - sm(0.72, 1, rho)) * (0.58 + 0.42 * ridge);\n        const p = y * W + x, target = Tf * s;\n        if (target > T[p]) T[p] += (target - T[p]) * k;\n      }\n  }\n  S.presses = S.presses.filter((P) => P.t \u003c P.dur);\n  // Heat equation on the panel, its edges insulated, and Newton cooling\n  // toward the room.\n  const a = ALPHA * dt, c = COOL * dt;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, t = T[p];\n      const l = x > 0 ? T[p - 1] : t, r = x \u003c W - 1 ? T[p + 1] : t, u = y > 0 ? T[p - W] : t, d = y \u003c H - 1 ? T[p + W] : t;\n      U[p] = t + a * (l + r + u + d - 4 * t) - c * (t - room[p]);\n    }\n  T.set(U);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.warmth = cl(k[2], -1, 1);\n  S.blend = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on a coat that has been pressed for four seconds.\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const P = fingertip(10 + random() * (W - 20), 22 + random() * (H - 44));\n    Object.assign(P, { rx: 17, ry: 23, a: (random() - 0.5) * 0.5, palm: true, dur: 1.1 });\n    S.presses.push(P);\n  }\n  // Time on the coat runs at Speed / 2; steps stay under 0.07 s so the heat\n  // equation holds steady.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 0.07);\n    step(S, h);\n    left -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  buildLut(S);\n  const { T, lut } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = round(((cl(T[y * W + x], T0, T1) - T0) / (T1 - T0)) * (LUT - 1)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Warmth=-1..1, Blend=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The coat's colour once round the wheel; the warm shade is a pale tint 0.08 further round. At 0 deep violet turning pale orchid; at 0.24 wine red turning peach; at 0.3 orange turning cream; at 0.4 yellow turning pale lemon; at 0.5 green turning mint; at 0.75 deep teal turning pale sky; at 0.9 indigo turning lavender. Round orange, yellow and lime the cool coat stays bright, 0.78 of full instead of 0.44, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a group of one to three fingertips lands every 0.28 seconds on average and each is held 0.45 to 0.75 seconds; a lone print's ridges fade within about 0.4 seconds of lifting and the print is gone 1.7 seconds after. At 0.2 all of it runs ten times slower, at 3 one and a half times faster."},{"name":"Warmth","min":-1,"max":1,"about":"How warm the fingertips are over the room, the coat turning at 0.4. At 0 they are 1.0 and a lone print turns about 100 LEDs pale; at -1 they are 0.63, only the pressed ridges cross the turning point and each print is a broken whorl of about 60 LEDs gone within a second; at 1 they are 1.6, the prints whiten, spread to about 115 LEDs, last 3.5 seconds and run together."},{"name":"Blend","min":0,"max":1,"about":"How far either side of the turning point the colour change is spread. At 0 it is 0.012 of a fingertip's warmth, so the edge of a print is one LED sharp; at 0.06 almost the same; at 0.5 it is 0.16 and the edges go soft; at 1 it is 0.61 and the heat shows as soft glows with the fresh ridges standing out white, like a mood ring."}],"start":[0,2,0,0.06],"measures":{"motion":0.0548,"detail":0.0134,"edges":0.483,"complexity":0.652,"coverage":1,"colour":0.1889,"drift":0.0997},"knobResponse":[0.4028,0.1176,0.1081,0.0933]},{"slug":"moth-lamp","title":"Moth Lamp","family":"insect","round":20,"note":"벽돌집 처마 밑 사슬에 매달린 옛 등이 흔들리고, 나방이 어둠에서 나선을 그리며 날아와 등을 돌다가 유리와 불빛 든 벽돌에 날개를 펴고 앉아요. K1 을 누르면 박쥐가 빛 속으로 날아들어 나방 한 마리를 채 가요.","idea":"An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.","buttons":"K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.","code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","layer":{"id":"layer-moth-lamp","type":"code","name":"moth-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds."},{"name":"Moths","min":12,"max":120,"about":"Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them."},{"name":"Breeze","min":-1,"max":1,"about":"A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers."}],"start":[0,2,12,0.06],"measures":{"motion":0.1073,"detail":0.0382,"edges":0.2646,"complexity":2.2012,"coverage":0.2737,"colour":0.0944,"drift":0.0456},"knobResponse":[0.0525,0.0467,0.0451,0.0578]},{"slug":"moving-sofa","title":"Moving Sofa","family":"geometry","round":34,"note":"폭 14 LED 의 ㄇ자 복도를 해머슬리 소파가 오른쪽 다리로 올라와 모퉁이를 돌고, 위를 건너 왼쪽 다리로 내려가요. 모퉁이마다 안쪽 모서리가 소파의 금빛 반원 홈 안을 지나가고, 소파 뒤에 옅게 붙어 온 띠가 벽에 깎여 나가 소파 모양만 남아요. K3 은 홈의 반지름을 0 의 반원판에서 넓이 2 인 소파까지 바꿔요.","idea":"Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Moving Sofa\n// Family:  geometry\n// Idea:    Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: moving sofa problem (Leo Moser, 1966) and Hammersley's sofa (John Hammersley, 1968), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1\n//\n// Knob 1: Hue. Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim.\n// Knob 2: Speed. At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds.\n// Knob 3: Hole. The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole.\n// Knob 4: Trail. How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, abs, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (t) => {\n  t = cl(t, 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// One corner of the hallway, in widths: the arm the sofa comes along is\n// 0 \u003c= wy \u003c= 1, wx \u003c= 1, the arm it leaves by 0 \u003c= wx \u003c= 1, wy \u003c= 1, the\n// inner corner the origin and the outer corner (1, 1). On the panel the right\n// corner has wx running up the right leg and wy across, X = XC + U wy and\n// Y = YC - U wx; the left corner is its mirror image, X -> 64 - X.\nconst U = 14, XC = 49, YC = 15;\n\n// Hole 0 is r = 2/pi, where the area pi/2 + 2r - pi r^2 / 2 is largest.\n// Gerver's sofa of 1992, area 2.2195, is larger still and is not drawn here.\nconst R_OPT = 2 / PI;\nconst holeRadius = (k) => (k \u003c 0 ? R_OPT * (1 + k) : R_OPT + (1 - R_OPT) * k);\n\n// Signed distance, in widths, to Hammersley's sofa with hole radius r: the\n// points with y >= 0 within 1 of the segment from (-r, 0) to (r, 0), less\n// the half disc of radius r on the origin. Negative inside. Below the flat\n// side it is the distance to the two flat pieces, so a sharp end of the hole\n// touching a wall does not bleed into the wall's LED.\nfunction sdf(x, y, r) {\n  const ax = abs(x);\n  if (y \u003c 0) {\n    const ex = ax \u003c r ? r - ax : ax > r + 1 ? ax - r - 1 : 0;\n    return sqrt(ex * ex + y * y);\n  }\n  const dx = ax > r ? ax - r : 0;\n  return max(-y, sqrt(dx * dx + y * y) - 1, r - sqrt(x * x + y * y));\n}\n// Whether the sofa's nearest edge to (x, y) is the hole's semicircle.\nconst notch = (x, y, r) => r > 0.02 && x * x + y * y \u003c (r + 0.12) * (r + 0.12) && abs(x) \u003c r + 0.04;\n\n// How far (x, y), in the sofa's frame, lies inside every position the\n// hallway has taken in a turn so far, th of the way round, starting from the\n// strip behind the sofa's front: negative once some wall has passed through\n// it. The outer wall a = 1 has kept (x - r, y) within 1 of the origin in the\n// directions 0..th, the wall b = 1 has done the same for (x + r, y) in the\n// directions 90..90+th degrees, and the inner corner has cut from the hole\n// the part below the chord from (-r, 0) at angle th. At th = 90 degrees\n// this is the sofa.\nfunction block(x, y, th, r) {\n  const ct = cos(th), st = sin(th);\n  let s = min(y, 1 - y, r + 1 - x);\n  const vx = x - r, vy = y;\n  if (vy >= 0 && vx * st - vy * ct >= 0) s = min(s, 1 - sqrt(vx * vx + vy * vy));\n  else s = min(s, 1 - vx, 1 - vx * ct - vy * st);\n  const wx = x + r, wy = y;\n  if (wx \u003c= 0 && wy * st + wx * ct >= 0) s = min(s, 1 - sqrt(wx * wx + wy * wy));\n  else s = min(s, 1 - wy, 1 + wx * st - wy * ct);\n  return min(s, max(sqrt(x * x + y * y) - r, -wx * st + wy * ct));\n}\n\n// The motion, seen from the sofa: the hallway is turned through th and its\n// inner corner sits at c. While th runs from 0 to 90 degrees c runs round\n// the hole's semicircle, c = r (cos 2th, sin 2th). By Thales the inner walls\n// then pass through the hole's two ends, and the outer walls stay tangent to\n// the two quarter discs, so the sofa touches both outer walls all the way\n// round. Phases, in seconds at Speed 2: up the right leg, round the right\n// corner, across the top, round the left corner (the right one mirrored and\n// run backwards), down the left leg.\nconst TA = 4.4, TB = 2.4, TC = 1.4;\nconst T1 = TA, T2 = T1 + TB, T3 = T2 + TC, T4 = T3 + TB, LIFE = T4 + TA;\n// A new sofa sets off as the last one starts round the right corner, so it\n// reaches that corner as the last one leaves the left.\nconst PERIOD = TB + TC + TB;\n// Up the leg from below the panel, and the run across the top.\nconst DA = 9.2, EC = (XC - (64 - XC)) / U;\nconst KE = 0.3, VE = 1 / (1 - KE / 2);\n// Constant speed, then a stop over the last KE of the way.\nfunction easeOut(t) {\n  t = cl(t, 0, 1);\n  if (t \u003c= 1 - KE) return VE * t;\n  const s = t - (1 - KE);\n  return VE * (1 - KE + s - (s * s) / (2 * KE));\n}\nfunction turn(th, r, o) {\n  o.th = th;\n  o.cx = r * cos(2 * th);\n  o.cy = r * sin(2 * th);\n}\n// Pose at phase ph: o.m is 1 when it is given in the left corner's mirrored\n// frame.\nfunction pose(ph, r, o) {\n  o.m = 0;\n  o.cy = 0;\n  if (ph \u003c T1) {\n    o.th = 0;\n    o.cx = r + DA * (1 - easeOut(ph / TA));\n  } else if (ph \u003c T2) turn((PI / 2) * sm((ph - T1) / TB), r, o);\n  else if (ph \u003c T3) {\n    o.th = PI / 2;\n    o.cx = -r - (EC - 2 * r) * sm((ph - T2) / TC);\n  } else {\n    o.m = 1;\n    if (ph \u003c T4) turn((PI / 2) * (1 - sm((ph - T3) / TB)), r, o);\n    else {\n      o.th = 0;\n      o.cx = r + DA * (1 - easeOut(1 - (ph - T4) / TA));\n    }\n  }\n  return o;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Calls f(X, Y, sx, sy) for every LED near the sofa at pose P, with (sx, sy)\n// the LED centre in the sofa's frame.\nfunction eachLed(P, r, f, xa = -r - 1, xb = r + 1) {\n  const ct = cos(P.th), st = sin(P.th);\n  let x0 = 99, x1 = -99, y0 = 999, y1 = -999;\n  for (const [sx, sy] of [[xa, 0], [xb, 0], [xa, 1], [xb, 1]]) {\n    const ex = sx - P.cx, ey = sy - P.cy, wx = ex * ct + ey * st, wy = -ex * st + ey * ct;\n    const X = XC + U * wy, Y = YC - U * wx;\n    x0 = min(x0, X), x1 = max(x1, X), y0 = min(y0, Y), y1 = max(y1, Y);\n  }\n  x0 = max(0, floor(x0) - 1), x1 = min(W - 1, floor(x1) + 1), y0 = max(0, floor(y0) - 1), y1 = min(H - 1, floor(y1) + 1);\n  for (let Y = y0; Y \u003c= y1; Y++)\n    for (let Xm = x0; Xm \u003c= x1; Xm++) {\n      const wx = (YC - (Y + 0.5)) / U, wy = (Xm + 0.5 - XC) / U;\n      f(P.m ? W - 1 - Xm : Xm, Y, P.cx + wx * ct - wy * st, P.cy + wx * st + wy * ct);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    clock: 0, hue: 0, speed: 2, hole: 0, trail: 0.06, r: R_OPT, warm: false,\n    wake: new Float32Array(N), buf: new Float32Array(N * 3),\n    pose: { th: 0, cx: 0, cy: 0, m: 0 }, c1: [0, 0, 0], c2: [0, 0, 0], c3: [0, 0, 0],\n  };\n}\n\n// Advance the clock by dc and let the floor's glow where the sofas have been\n// fade.\nfunction step(S, dc) {\n  S.clock += dc;\n  const keep = exp(-dc / (0.25 + 1.5 * S.trail + 6 * S.trail * S.trail)), r = S.r, wake = S.wake;\n  for (let p = 0; p \u003c N; p++) wake[p] *= keep;\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    eachLed(pose(ph, r, S.pose), r, (X, Y, sx, sy) => {\n      const cov = cl(0.5 - sdf(sx, sy, r) * U, 0, 1), p = Y * W + X;\n      if (cov > wake[p]) wake[p] = cov;\n    });\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.hole = cl(k[2], -1, 1);\n  S.trail = cl(k[3], 0, 1);\n  S.r = holeRadius(S.hole);\n  if (!S.warm) {\n    // Open with a sofa 1.6 s short of the right corner and four seconds of\n    // memory already laid down behind it.\n    S.clock = T1 - 1.6 - 4;\n    for (let i = 0; i \u003c 60; i++) step(S, 4 / 60);\n    S.warm = true;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, c1, c2, c3, wake } = S, r = S.r, h = S.hue + 0.52;\n  buf.fill(0);\n  const put = (p, c, v) => {\n    buf[p * 3] = max(buf[p * 3], c[0] * v);\n    buf[p * 3 + 1] = max(buf[p * 3 + 1], c[1] * v);\n    buf[p * 3 + 2] = max(buf[p * 3 + 2], c[2] * v);\n  };\n  const set = (p, c, v, al) => {\n    buf[p * 3] += (c[0] * v - buf[p * 3]) * al;\n    buf[p * 3 + 1] += (c[1] * v - buf[p * 3 + 1]) * al;\n    buf[p * 3 + 2] += (c[2] * v - buf[p * 3 + 2]) * al;\n  };\n\n  // Walls one LED outside the hallway, the solid between the legs hatched\n  // as on a floor plan, and the floor's glow where the sofas have passed.\n  hsv(h + 0.2, 0.45, 1, c1);\n  for (let Y = 0; Y \u003c H; Y++) put(Y * W, c1, 70), put(Y * W + 63, c1, 70);\n  for (let X = 0; X \u003c W; X++) put(X, c1, 70);\n  for (let Y = 15; Y \u003c H; Y++) put(Y * W + 15, c1, 70), put(Y * W + 48, c1, 70);\n  for (let X = 15; X \u003c= 48; X++) put(15 * W + X, c1, 70);\n  for (let Y = 16; Y \u003c H; Y++) for (let X = 16; X \u003c 48; X++) if ((X + Y) % 5 === 0) put(Y * W + X, c1, 40);\n  hsv(h + 0.05, 0.6, 1, c2);\n  for (let p = 0; p \u003c N; p++) if (wake[p] > 0.01) put(p, c2, 100 * wake[p]);\n\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    const P = pose(ph, r, S.pose);\n    // In a turn, the rest of the strip behind the sofa that every position\n    // of the hallway so far still holds: the walls shave it down to the sofa.\n    const u = ph >= T1 && ph \u003c T2 ? (ph - T1) / TB : ph >= T3 && ph \u003c T4 ? (ph - T3) / TB : -1;\n    if (u >= 0) {\n      const th = (PI / 2) * sm(u), al = sm(u / 0.12), back = min(r + 1 / max(sin(th), 1e-3), 12);\n      hsv(h, 0.45, 1, c1);\n      eachLed(P, r, (X, Y, sx, sy) => {\n        // Each corner's own hallway runs on for ever; the panel's other\n        // corner stops the strip.\n        if (X \u003c 1 || X > 62 || Y \u003c 1 || (Y > 14 && X > 14 && X \u003c 49)) return;\n        const x = P.m ? -sx : sx, ex = cl(0.5 + block(x, sy, th, r) * U, 0, 1) - cl(0.5 - sdf(sx, sy, r) * U, 0, 1);\n        if (ex > 0) put(Y * W + X, c1, 80 * ex * al);\n      }, P.m ? -r - 1 : -back, P.m ? back : r + 1);\n    }\n    hsv(h, 0.85, 1, c1);\n    hsv(h, 0.3, 1, c2);\n    hsv(h + 0.62, 0.55, 1, c3);\n    eachLed(P, r, (X, Y, sx, sy) => {\n      const dl = sdf(sx, sy, r) * U, cov = cl(0.5 - dl, 0, 1);\n      if (cov \u003c= 0) return;\n      const p = Y * W + X;\n      set(p, c1, 150, cov);\n      put(p, notch(sx, sy, r) ? c3 : c2, 255 * cl(1.6 + dl, 0, 1) * cov);\n    });\n  }\n  // The inner corners.\n  hsv(h + 0.62, 0.3, 1, c3);\n  put(15 * W + 48, c3, 255);\n  put(15 * W + 15, c3, 255);\n\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(min(255, buf[p * 3])), round(min(255, buf[p * 3 + 1])), round(min(255, buf[p * 3 + 2])));\n}\n","layer":{"id":"layer-moving-sofa","type":"code","name":"moving-sofa","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moving Sofa\n// Family:  geometry\n// Idea:    Hammersley's sofa, two quarter discs set apart by a block with a half disc cut from its inner side, is carried up the right leg of a hallway fourteen LEDs wide, round the corner with the inner corner riding inside its hole, across the top and down the left leg, and in every turn a faint strip trailing behind it is shaved off by the walls until only the sofa is left.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: moving sofa problem (Leo Moser, 1966) and Hammersley's sofa (John Hammersley, 1968), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1\n//\n// Knob 1: Hue. Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim.\n// Knob 2: Speed. At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds.\n// Knob 3: Hole. The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole.\n// Knob 4: Trail. How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, abs, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (t) => {\n  t = cl(t, 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// One corner of the hallway, in widths: the arm the sofa comes along is\n// 0 \u003c= wy \u003c= 1, wx \u003c= 1, the arm it leaves by 0 \u003c= wx \u003c= 1, wy \u003c= 1, the\n// inner corner the origin and the outer corner (1, 1). On the panel the right\n// corner has wx running up the right leg and wy across, X = XC + U wy and\n// Y = YC - U wx; the left corner is its mirror image, X -> 64 - X.\nconst U = 14, XC = 49, YC = 15;\n\n// Hole 0 is r = 2/pi, where the area pi/2 + 2r - pi r^2 / 2 is largest.\n// Gerver's sofa of 1992, area 2.2195, is larger still and is not drawn here.\nconst R_OPT = 2 / PI;\nconst holeRadius = (k) => (k \u003c 0 ? R_OPT * (1 + k) : R_OPT + (1 - R_OPT) * k);\n\n// Signed distance, in widths, to Hammersley's sofa with hole radius r: the\n// points with y >= 0 within 1 of the segment from (-r, 0) to (r, 0), less\n// the half disc of radius r on the origin. Negative inside. Below the flat\n// side it is the distance to the two flat pieces, so a sharp end of the hole\n// touching a wall does not bleed into the wall's LED.\nfunction sdf(x, y, r) {\n  const ax = abs(x);\n  if (y \u003c 0) {\n    const ex = ax \u003c r ? r - ax : ax > r + 1 ? ax - r - 1 : 0;\n    return sqrt(ex * ex + y * y);\n  }\n  const dx = ax > r ? ax - r : 0;\n  return max(-y, sqrt(dx * dx + y * y) - 1, r - sqrt(x * x + y * y));\n}\n// Whether the sofa's nearest edge to (x, y) is the hole's semicircle.\nconst notch = (x, y, r) => r > 0.02 && x * x + y * y \u003c (r + 0.12) * (r + 0.12) && abs(x) \u003c r + 0.04;\n\n// How far (x, y), in the sofa's frame, lies inside every position the\n// hallway has taken in a turn so far, th of the way round, starting from the\n// strip behind the sofa's front: negative once some wall has passed through\n// it. The outer wall a = 1 has kept (x - r, y) within 1 of the origin in the\n// directions 0..th, the wall b = 1 has done the same for (x + r, y) in the\n// directions 90..90+th degrees, and the inner corner has cut from the hole\n// the part below the chord from (-r, 0) at angle th. At th = 90 degrees\n// this is the sofa.\nfunction block(x, y, th, r) {\n  const ct = cos(th), st = sin(th);\n  let s = min(y, 1 - y, r + 1 - x);\n  const vx = x - r, vy = y;\n  if (vy >= 0 && vx * st - vy * ct >= 0) s = min(s, 1 - sqrt(vx * vx + vy * vy));\n  else s = min(s, 1 - vx, 1 - vx * ct - vy * st);\n  const wx = x + r, wy = y;\n  if (wx \u003c= 0 && wy * st + wx * ct >= 0) s = min(s, 1 - sqrt(wx * wx + wy * wy));\n  else s = min(s, 1 - wy, 1 + wx * st - wy * ct);\n  return min(s, max(sqrt(x * x + y * y) - r, -wx * st + wy * ct));\n}\n\n// The motion, seen from the sofa: the hallway is turned through th and its\n// inner corner sits at c. While th runs from 0 to 90 degrees c runs round\n// the hole's semicircle, c = r (cos 2th, sin 2th). By Thales the inner walls\n// then pass through the hole's two ends, and the outer walls stay tangent to\n// the two quarter discs, so the sofa touches both outer walls all the way\n// round. Phases, in seconds at Speed 2: up the right leg, round the right\n// corner, across the top, round the left corner (the right one mirrored and\n// run backwards), down the left leg.\nconst TA = 4.4, TB = 2.4, TC = 1.4;\nconst T1 = TA, T2 = T1 + TB, T3 = T2 + TC, T4 = T3 + TB, LIFE = T4 + TA;\n// A new sofa sets off as the last one starts round the right corner, so it\n// reaches that corner as the last one leaves the left.\nconst PERIOD = TB + TC + TB;\n// Up the leg from below the panel, and the run across the top.\nconst DA = 9.2, EC = (XC - (64 - XC)) / U;\nconst KE = 0.3, VE = 1 / (1 - KE / 2);\n// Constant speed, then a stop over the last KE of the way.\nfunction easeOut(t) {\n  t = cl(t, 0, 1);\n  if (t \u003c= 1 - KE) return VE * t;\n  const s = t - (1 - KE);\n  return VE * (1 - KE + s - (s * s) / (2 * KE));\n}\nfunction turn(th, r, o) {\n  o.th = th;\n  o.cx = r * cos(2 * th);\n  o.cy = r * sin(2 * th);\n}\n// Pose at phase ph: o.m is 1 when it is given in the left corner's mirrored\n// frame.\nfunction pose(ph, r, o) {\n  o.m = 0;\n  o.cy = 0;\n  if (ph \u003c T1) {\n    o.th = 0;\n    o.cx = r + DA * (1 - easeOut(ph / TA));\n  } else if (ph \u003c T2) turn((PI / 2) * sm((ph - T1) / TB), r, o);\n  else if (ph \u003c T3) {\n    o.th = PI / 2;\n    o.cx = -r - (EC - 2 * r) * sm((ph - T2) / TC);\n  } else {\n    o.m = 1;\n    if (ph \u003c T4) turn((PI / 2) * (1 - sm((ph - T3) / TB)), r, o);\n    else {\n      o.th = 0;\n      o.cx = r + DA * (1 - easeOut(1 - (ph - T4) / TA));\n    }\n  }\n  return o;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Calls f(X, Y, sx, sy) for every LED near the sofa at pose P, with (sx, sy)\n// the LED centre in the sofa's frame.\nfunction eachLed(P, r, f, xa = -r - 1, xb = r + 1) {\n  const ct = cos(P.th), st = sin(P.th);\n  let x0 = 99, x1 = -99, y0 = 999, y1 = -999;\n  for (const [sx, sy] of [[xa, 0], [xb, 0], [xa, 1], [xb, 1]]) {\n    const ex = sx - P.cx, ey = sy - P.cy, wx = ex * ct + ey * st, wy = -ex * st + ey * ct;\n    const X = XC + U * wy, Y = YC - U * wx;\n    x0 = min(x0, X), x1 = max(x1, X), y0 = min(y0, Y), y1 = max(y1, Y);\n  }\n  x0 = max(0, floor(x0) - 1), x1 = min(W - 1, floor(x1) + 1), y0 = max(0, floor(y0) - 1), y1 = min(H - 1, floor(y1) + 1);\n  for (let Y = y0; Y \u003c= y1; Y++)\n    for (let Xm = x0; Xm \u003c= x1; Xm++) {\n      const wx = (YC - (Y + 0.5)) / U, wy = (Xm + 0.5 - XC) / U;\n      f(P.m ? W - 1 - Xm : Xm, Y, P.cx + wx * ct - wy * st, P.cy + wx * st + wy * ct);\n    }\n}\n\nexport function setup(params) {\n  params.s = {\n    clock: 0, hue: 0, speed: 2, hole: 0, trail: 0.06, r: R_OPT, warm: false,\n    wake: new Float32Array(N), buf: new Float32Array(N * 3),\n    pose: { th: 0, cx: 0, cy: 0, m: 0 }, c1: [0, 0, 0], c2: [0, 0, 0], c3: [0, 0, 0],\n  };\n}\n\n// Advance the clock by dc and let the floor's glow where the sofas have been\n// fade.\nfunction step(S, dc) {\n  S.clock += dc;\n  const keep = exp(-dc / (0.25 + 1.5 * S.trail + 6 * S.trail * S.trail)), r = S.r, wake = S.wake;\n  for (let p = 0; p \u003c N; p++) wake[p] *= keep;\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    eachLed(pose(ph, r, S.pose), r, (X, Y, sx, sy) => {\n      const cov = cl(0.5 - sdf(sx, sy, r) * U, 0, 1), p = Y * W + X;\n      if (cov > wake[p]) wake[p] = cov;\n    });\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.hole = cl(k[2], -1, 1);\n  S.trail = cl(k[3], 0, 1);\n  S.r = holeRadius(S.hole);\n  if (!S.warm) {\n    // Open with a sofa 1.6 s short of the right corner and four seconds of\n    // memory already laid down behind it.\n    S.clock = T1 - 1.6 - 4;\n    for (let i = 0; i \u003c 60; i++) step(S, 4 / 60);\n    S.warm = true;\n  }\n  step(S, (d * S.speed) / 2);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { buf, c1, c2, c3, wake } = S, r = S.r, h = S.hue + 0.52;\n  buf.fill(0);\n  const put = (p, c, v) => {\n    buf[p * 3] = max(buf[p * 3], c[0] * v);\n    buf[p * 3 + 1] = max(buf[p * 3 + 1], c[1] * v);\n    buf[p * 3 + 2] = max(buf[p * 3 + 2], c[2] * v);\n  };\n  const set = (p, c, v, al) => {\n    buf[p * 3] += (c[0] * v - buf[p * 3]) * al;\n    buf[p * 3 + 1] += (c[1] * v - buf[p * 3 + 1]) * al;\n    buf[p * 3 + 2] += (c[2] * v - buf[p * 3 + 2]) * al;\n  };\n\n  // Walls one LED outside the hallway, the solid between the legs hatched\n  // as on a floor plan, and the floor's glow where the sofas have passed.\n  hsv(h + 0.2, 0.45, 1, c1);\n  for (let Y = 0; Y \u003c H; Y++) put(Y * W, c1, 70), put(Y * W + 63, c1, 70);\n  for (let X = 0; X \u003c W; X++) put(X, c1, 70);\n  for (let Y = 15; Y \u003c H; Y++) put(Y * W + 15, c1, 70), put(Y * W + 48, c1, 70);\n  for (let X = 15; X \u003c= 48; X++) put(15 * W + X, c1, 70);\n  for (let Y = 16; Y \u003c H; Y++) for (let X = 16; X \u003c 48; X++) if ((X + Y) % 5 === 0) put(Y * W + X, c1, 40);\n  hsv(h + 0.05, 0.6, 1, c2);\n  for (let p = 0; p \u003c N; p++) if (wake[p] > 0.01) put(p, c2, 100 * wake[p]);\n\n  const first = floor((S.clock - LIFE) / PERIOD) + 1, last = floor(S.clock / PERIOD);\n  for (let n = first; n \u003c= last; n++) {\n    const ph = S.clock - n * PERIOD;\n    if (ph \u003c 0 || ph > LIFE) continue;\n    const P = pose(ph, r, S.pose);\n    // In a turn, the rest of the strip behind the sofa that every position\n    // of the hallway so far still holds: the walls shave it down to the sofa.\n    const u = ph >= T1 && ph \u003c T2 ? (ph - T1) / TB : ph >= T3 && ph \u003c T4 ? (ph - T3) / TB : -1;\n    if (u >= 0) {\n      const th = (PI / 2) * sm(u), al = sm(u / 0.12), back = min(r + 1 / max(sin(th), 1e-3), 12);\n      hsv(h, 0.45, 1, c1);\n      eachLed(P, r, (X, Y, sx, sy) => {\n        // Each corner's own hallway runs on for ever; the panel's other\n        // corner stops the strip.\n        if (X \u003c 1 || X > 62 || Y \u003c 1 || (Y > 14 && X > 14 && X \u003c 49)) return;\n        const x = P.m ? -sx : sx, ex = cl(0.5 + block(x, sy, th, r) * U, 0, 1) - cl(0.5 - sdf(sx, sy, r) * U, 0, 1);\n        if (ex > 0) put(Y * W + X, c1, 80 * ex * al);\n      }, P.m ? -r - 1 : -back, P.m ? back : r + 1);\n    }\n    hsv(h, 0.85, 1, c1);\n    hsv(h, 0.3, 1, c2);\n    hsv(h + 0.62, 0.55, 1, c3);\n    eachLed(P, r, (X, Y, sx, sy) => {\n      const dl = sdf(sx, sy, r) * U, cov = cl(0.5 - dl, 0, 1);\n      if (cov \u003c= 0) return;\n      const p = Y * W + X;\n      set(p, c1, 150, cov);\n      put(p, notch(sx, sy, r) ? c3 : c2, 255 * cl(1.6 + dl, 0, 1) * cov);\n    });\n  }\n  // The inner corners.\n  hsv(h + 0.62, 0.3, 1, c3);\n  put(15 * W + 48, c3, 255);\n  put(15 * W + 15, c3, 255);\n\n  for (let p = 0; p \u003c N; p++)\n    display.setPixel(p % W, (p / W) | 0, round(min(255, buf[p * 3])), round(min(255, buf[p * 3 + 1])), round(min(255, buf[p * 3 + 2])));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Hole=-1..1, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour once round the wheel. At 0 the sofa is teal with a gold rim on its hole and the walls are lavender; at 0.25 the sofa is violet with a green rim, at 0.5 brick red with a blue rim, at 0.75 green with a pink rim."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a sofa comes up the right leg at 34 LEDs a second, takes 2.4 seconds over each corner and 1.4 seconds across the top, and a new one sets off every 6.2 seconds; at 0.2 a corner takes 24 seconds, at 3 it takes 1.6 and a sofa sets off every 4.1 seconds."},{"name":"Hole","min":-1,"max":1,"about":"The radius r of the hole, in hallway widths. At 0 it is Hammersley's 2/pi = 0.637, the largest sofa of this shape, area pi/2 + 2/pi = 2.2074 widths squared and 46 LEDs long; at -1 r = 0 and the sofa is a half disc of area pi/2 = 1.571 that pivots on the inner corner; at 1 r = 1, area 2, and the two quarter discs meet at a single point above the hole."},{"name":"Trail","min":0,"max":1,"about":"How long the floor keeps a glow where the sofas have passed, a fade time of 0.25 seconds at 0, 0.36 at 0.06, 2.5 at 0.5 and 7.8 at 1 (at Speed 2). Turned up, the whole hallway glows except the two outer corners, which no sofa ever reaches."}],"start":[0,2,0,0.06],"measures":{"motion":0.3083,"detail":0.0578,"edges":0.2742,"complexity":0.3757,"coverage":0.3481,"colour":0.1671,"drift":0.1766},"knobResponse":[0.06,0.1158,0.0644,0.0648]},{"slug":"needlepoint","title":"Needlepoint","family":"textile","round":19,"note":"슬레이트 틀의 인쇄 캔버스를 바늘이 오른쪽 위 구석부터 바스켓위브로 한 대각선씩 메워 가요. 앵무새 쿠션이나 검은 바탕의 베를린 장미, 알파벳 샘플러가 다 차면 틀이 굴러 새 캔버스를 감아 와요.","idea":"A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","layer":{"id":"layer-needlepoint","type":"code","name":"needlepoint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wool","min":0,"max":1,"about":"Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground."},{"name":"Speed","min":0.2,"max":3,"about":"Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds."},{"name":"Design","min":0,"max":2,"about":"Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow."}],"start":[0,2,0,0.06],"measures":{"motion":0.1581,"detail":0.3325,"edges":0.8053,"complexity":1.8885,"coverage":0.6687,"colour":0.2513,"drift":0.043},"knobResponse":[0.1114,0.0649,0.1048,0.0607]},{"slug":"neon-alley","title":"Neon Alley","family":"city","round":16,"note":"밤 골목의 벽에 유리관을 구부린 네온 그림 간판이 지붕부터 젖은 길까지 걸려서, 관이 하나씩 켜지고 화살표가 달리고 지친 관 하나가 지직거려요. K1 을 누르면 정전이 됐다가 간판이 하나씩 다시 켜지고, K2 를 누르면 간판이 새로 걸려요.","idea":"The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.","buttons":"K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.","code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","layer":{"id":"layer-neon-alley","type":"code","name":"neon-alley","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta."},{"name":"Pace","min":0,"max":4,"about":"The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between."},{"name":"Wear","min":0,"max":1,"about":"How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark."},{"name":"Rain","min":0,"max":1,"about":"A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow."}],"start":[0,2,0,0.06],"measures":{"motion":0.7208,"detail":0.1177,"edges":0.5393,"complexity":0.4294,"coverage":0.2587,"colour":0.5724,"drift":0.1545},"knobResponse":[0.2671,0.0583,0.0882,0.0858]},{"slug":"night-flight","title":"Night Flight","family":"city","round":22,"note":"여객기 창으로 내려다본 밤 도시예요. 1 LED 가로등이 바둑판 길과 대로, 강 위 다리를 따라 레이스처럼 이어지고, 고속도로에는 흰 전조등과 빨간 미등이 흘러요. 도시는 초록 항법등과 흰 섬광등이 달린 날개 끝을 지나 왼쪽 아래로 천천히 미끄러져요.","idea":"A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.","buttons":"K3 tap flies over another city.","code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-night-flight","type":"code","name":"night-flight","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1."},{"name":"Speed","min":0.2,"max":3,"about":"Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it."},{"name":"Grid","min":0,"max":1,"about":"Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones."},{"name":"Haze","min":0,"max":1,"about":"Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through."}],"start":[0,2,0,0.06],"measures":{"motion":0.3475,"detail":0.3276,"edges":0.2578,"complexity":1.0097,"coverage":0.5044,"colour":0.2424,"drift":0.0667},"knobResponse":[0.0508,0.1119,0.0511,0.1477]},{"slug":"nixie","title":"Nixie","family":"circuit","round":21,"note":"회로판 소켓에 선 닉시관 속, 육각 그물 뒤에 겹겹이 선 숫자 철사 가운데 하나가 네온 주황으로 빛나요. 숫자가 돌다가 하나씩 멈추고, Mode 노브를 돌리면 주파수 계수기나 시계가 돼요.","idea":"Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.","buttons":"K1 tap runs every cathode in turn now.","code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-nixie","type":"code","name":"nixie","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gas","min":0,"max":1,"about":"What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops."},{"name":"Rows","min":1,"max":3,"about":"One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter."},{"name":"Mode","min":0,"max":3,"about":"Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3."}],"start":[0,2,1,0.06],"measures":{"motion":0.4696,"detail":0.0533,"edges":0.238,"complexity":1.7971,"coverage":0.5829,"colour":0.1892,"drift":0.1676},"knobResponse":[0.0576,0.0717,0.1676,0.0732]},{"slug":"noborigama","title":"Noborigama","family":"pottery","round":26,"note":"밤 언덕의 오름가마를 세로로 잘라 봐요. 불이 그릇 쌓인 칸들을 타고 올라 아래 칸은 희고 위 칸은 붉으며, 장작을 넣을 때마다 감시 구멍에서 불길이, 굴뚝에서 검은 연기와 불티가 나와요. K1 은 소성 날짜를 바꾸고, 누르면 모든 구멍에 한꺼번에 불을 넣어요.","idea":"A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.","buttons":"K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.","code":"// ===== Patternflow pattern =====\n// Title:   Noborigama\n// Family:  pottery\n// Idea:    A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the noborigama, the wood-fired climbing kiln of Japan and Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1\n//\n// Knob 1: Firing. The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white.\n// Knob 2: Speed. At 2 the potter stokes every few seconds; 0.2 is ten times slower.\n// Knob 3: Chambers. Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves.\n// Knob 4: Draft. Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame.\n// Buttons: K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi % p), b = hash(xi + 1, yi % p), c = hash(xi, (yi + 1) % p);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, (yi + 1) % p)) * su * sv;\n}\n// Fine noise that wraps every 256 rows, for the quick flicker of flame and smoke.\nconst FN = new Float32Array(64 * 256).map((_, i) => vn((i & 63) * 0.9, ((i >> 6) * 84) / 256, 84));\nconst fn = (x, y) => FN[(y & 255) * 64 + (x & 63)];\n\n// Brick, gas and flame by temperature: dull red at 0.15, orange at 0.6, white\n// heat at 1. Red stops at 232: pinned at 255 it hid the flicker of the hottest\n// chambers, since an LED reads by its brightest channel.\nconst RAMP = [[0, 24, 4, 2], [0.15, 92, 13, 4], [0.3, 158, 30, 6], [0.45, 204, 68, 12], [0.6, 226, 114, 24], [0.75, 232, 160, 50], [0.88, 232, 194, 96], [1, 232, 216, 160], [1.25, 236, 230, 204]];\nconst LUT = new Float32Array(768);\nfor (let i = 0; i \u003c 256; i++) {\n  let k = 0;\n  const T = i / 204;\n  while (k \u003c 7 && T > RAMP[k + 1][0]) k++;\n  const u = cl((T - RAMP[k][0]) / (RAMP[k + 1][0] - RAMP[k][0]), 0, 1);\n  for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(RAMP[k][c + 1], RAMP[k + 1][c + 1], u);\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n// One colour array for every put(), to spare the garbage collector.\nconst C3 = [0, 0, 0];\nconst lc = (T, b = 1) => ((T = lut(T)), C3[0] = LUT[T] * b, C3[1] = LUT[T + 1] * b, C3[2] = LUT[T + 2] * b, C3);\n\nconst SKY = 0, EARTH = 1, WALL = 3, GAS = 4, POT = 5, SHELF = 6, HOLE = 7, FLUE = 8;\n// A vault on low walls: roof height across a chamber, 0.4 at the walls, 1 at the crown.\nconst arch = (u) => 0.4 + 0.6 * sqrt(max(0, 1 - (2 * u - 1) ** 2));\nconst TOP = 18; // the chimney's mouth row\nconst WOOD = [150, 118, 66], TOWEL = [214, 204, 184], FACE = [176, 116, 78], COAT = [46, 60, 128], LEGS = [74, 62, 54], RIM = [255, 150, 60];\n// Jar, flared bowl, bottle and cup: half width up the pot, bottom to top.\nconst prof = (k, t) => (k === 0 ? (t > 0.84 ? 0.5 : 0.6 + 0.4 * sin(PI * t)) : k === 1 ? 0.5 + 0.5 * t : k === 2 ? (t \u003c 0.55 ? 0.55 + 0.45 * sin((PI * t) / 0.55) : t > 0.88 ? 0.5 : 0.3) : 0.8);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    t: 0, n: 0, kind: new Uint8Array(N), ch: new Uint8Array(N), V: F32(N), bg: F32(N * 3), gw: F32(N), f: F32(N * 3), A: F32(W * 64), K: F32(W * 64), Q: F32(W * 64),\n    T: F32(8).fill(-1), Hc: F32(8).fill(-1), age: F32(8).fill(9), q: F32(8), open: F32(8), Te: F32(8), Br: F32(8),\n    puffs: [], sparks: [], logs: [], slugs: [], ev: [], motes: [], pot: { A: 0, tgt: 0, mode: 1, tm: -1.6, thr: 0, k: 0, ph: 0 }, fb: { tm: 1, an: 0 }, flare: 0, np: 0, ns: 0,\n  });\n  for (let k = 0; k \u003c 40; k++) S.motes.push({ x: rnd() * W, y: rnd() * H, e: rnd() \u003c 0.45, ph: rnd() * 7 });\n  for (let k = 0; k \u003c 3; k++) S.logs.push({ c: 0, x: 8 + k * 6 + rnd() * 3, y: 120 + (k & 1), len: 5, life: 0.4 + 0.5 * rnd() });\n}\n\nconst front = (S) => ((S.k1 + 1) / 2) * (S.n + 0.3);\n\nfunction build(S, n) {\n  S.n = n;\n  const P = 77 / n, h = P - 3, Wc = 34 - 2 * n, s = (43 - Wc) / (n - 1);\n  // The firebox, then the chambers, each P rows above the last and s LEDs to the right.\n  const g = (S.g = [{ L: 6, W: 25, F: 123, h: 11 }]);\n  for (let c = 1; c \u003c= n; c++) g.push({ L: 14 + (c - 1) * s, W: Wc, F: 108 - (c - 1) * P, h });\n  // The roof row over X inside a chamber; with e = 2, the top of its brick.\n  const inT = (S.inT = (k, X, e = 0) => {\n    const q = g[k], u = (X - q.L + e) / (q.W + 2 * e);\n    return u > 0 && u \u003c 1 ? q.F - (q.h + e) * arch(u) : 1e3;\n  });\n  const outT = (k, X) => inT(k, X, 2), tp = g[n], CX = (S.CX = tp.L + 0.62 * tp.W);\n  const hill = (X) => (X \u003c 4 ? 123 : X \u003c tp.L - 2 ? mix(123, tp.F + 2, (X - 4) / (tp.L - 6)) : mix(tp.F + 2, tp.F - 5, (X - tp.L + 2) / (66 - tp.L)));\n  // Flame passages through each chamber's floor, over the crown of the one below.\n  const holes = [];\n  for (let c = 1; c \u003c= n; c++) for (let a = g[c - 1], x = round(a.L + 0.2 * a.W); x \u003c= a.L + 0.8 * a.W; x += 4) if (x > g[c].L && x \u003c g[c].L + Wc - 2) holes.push([x, c]);\n  const { kind, ch, V, bg, gw } = S;\n  S.stars = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, r = hash(x, y), nz = 0.8 + 0.4 * vn(x * 0.3, y * 0.3);\n    let k = SKY, c = 0, v = 0, col = [0, 0, 0];\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F && Y > inT(j, X)) k = GAS, c = j, v = (g[j].F - Y) / g[j].h;\n    if (!k && abs(X - CX) \u003c 2 && Y > TOP && Y \u003c inT(n, X) + 0.5) k = FLUE, c = n, v = (Y - TOP) / (inT(n, CX) - TOP);\n    if (!k) for (const [hx, hc] of holes) if (x === hx && Y > g[hc].F && Y \u003c inT(hc - 1, X)) k = HOLE, c = hc;\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F + 2 && Y > outT(j, X)) k = WALL, c = j;\n    if (!k && Y > TOP && ((abs(X - CX) \u003c 4 && Y \u003c outT(n, X) + 1) || (Y \u003c TOP + 2 && abs(X - CX) \u003c 5))) k = WALL, c = n + 1;\n    if (!k && Y > hill(X)) k = EARTH;\n    // The fire mouth in the firebox's front wall.\n    if (k === WALL && !c && x \u003c 6 && y > 116) k = GAS, v = (123 - Y) / 11;\n    kind[i] = k, ch[i] = c, V[i] = v;\n    if (k === SKY) {\n      const u = sm(0, 112, Y), dm = hypot(X - 11, Y - 11), e = 26 * exp(-dm / 3.5), st = r \u003c 0.014 && y \u003c 100 && dm > 12 ? 70 + 140 * hash(y, x) : 0;\n      col = [5 + 15 * u + e + st, 9 + 17 * u + e + st, 32 + 30 * u + e + st];\n      // A crescent moon.\n      if (dm \u003c 3.6 && hypot(X - 12.6, Y - 10) > 3.2) col = [226, 222, 196];\n      if (st) S.stars.push(i);\n    } else if (k === EARTH) {\n      // Beds along the slope, stones, grass on top.\n      const dd = Y - hill(X), bd = (0.7 + 0.5 * vn(dd * 0.3 + x * 0.04, 3.5 + x * 0.02)) * nz;\n      col = dd \u003c 1.5 ? [24, 38, 24] : r \u003c 0.035 ? [58, 52, 46] : [30 * bd, 23 * bd, 19 * bd];\n    }\n    // Brick, coursed on the chimney.\n    else if (k === WALL) col = [96, 66, 50].map((v2) => v2 * ((c > n ? y % 3 === 0 || (x + (floor(y / 3) & 1) * 2) % 4 === 0 : r \u003c 0.25) ? 0.62 : 0.85 + 0.3 * r));\n    bg.set(col, i * 3);\n  }\n  gw.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, k = kind[i];\n    // The brick the fire touches.\n    if (k === WALL) V[i] = [1, -1, W, -W].some((d) => kind[i + d] >= GAS && (abs(d) > 1 || (x + d) >> 6 === 0)) ? 1 : 0;\n    // Earth and air by the kiln are warm: how near each LED is to a wall, and whose.\n    if (k \u003c= EARTH) {\n      let best = 9;\n      for (let dy = -4; dy \u003c= 4; dy++)\n        for (let dx = -4; dx \u003c= 4; dx++) {\n          const X = x + dx, Y = y + dy, d = abs(dx) + abs(dy);\n          if (X >= 0 && X \u003c W && Y >= 0 && Y \u003c H && kind[Y * W + X] === WALL && d \u003c best) best = d, ch[i] = ch[Y * W + X];\n        }\n      gw[i] = best \u003c 9 ? exp(-best / 1.4) * (k ? 0.8 : 0.6) : 0;\n    }\n  }\n  // Shelves and pots: two or three levels a chamber, under the vault.\n  const nl = h >= 16 ? 3 : 2, lh = h / nl;\n  for (let c = 1; c \u003c= n; c++) {\n    const q = g[c], x0 = round(q.L + max(6, 0.22 * Wc)), x1 = floor(q.L + Wc - 1);\n    const set = (x, y, k2, v2) => kind[y * W + x] === GAS && ch[y * W + x] === c && ((kind[y * W + x] = k2), (V[y * W + x] = v2));\n    for (let j = 0; j \u003c nl; j++) {\n      const ys = round(q.F - j * lh), base = ys - 1;\n      if (j) {\n        for (let x = x0; x \u003c= x1; x++) if (inT(c, x + 0.5) \u003c ys - 1) set(x, ys, SHELF, 0);\n        for (let y = ys + 1; y \u003c round(q.F - (j - 1) * lh); y++) set(x0, y, SHELF, 0), set(x1 - 1, y, SHELF, 0);\n      }\n      for (let x = x0 + 1; x \u003c x1 - 1; ) {\n        const ty = floor(hash(c * 7 + j, x) * 4), w = [5, 5, 4, 3][ty];\n        const ph = min(floor(lh - 2), [5, 3, 6, 4][ty], floor(base - max(inT(c, x + 0.5), inT(c, x + w - 0.5)) - 1));\n        if (ph \u003c 2 || x + w > x1) break;\n        for (let r = 0; r \u003c ph; r++)\n          for (let xx = x; xx \u003c x + w; xx++) {\n            const dx = xx + 0.5 - x - w / 2;\n            if (abs(dx) \u003c= (prof(ty, (r + 0.5) / ph) * w) / 2 + 0.15) set(xx, base - r, POT, 0.5 - dx / w + (r === ph - 1 ? 0.2 : 0));\n          }\n        x += w + 1;\n      }\n    }\n  }\n  // Ladders up each chamber's front, and the potter's way between the stoke holes.\n  const xs = (c) => g[c].L - 4, px = [], py = [], at = [0], pl = [0];\n  S.lad = [];\n  S.spy = [0];\n  for (let c = 1; c \u003c= n; c++) {\n    const yw = outT(c, g[c].L - 1.5);\n    S.lad.push([round(xs(c)), yw, outT(c - 1, xs(c))]);\n    S.spy.push(round(g[c].F - max(5, 0.35 * h)));\n    at.push(px.length);\n    px.push(xs(c)), py.push(g[c].F + 2);\n    if (c \u003c n) {\n      px.push(xs(c)), py.push(yw);\n      for (let x = g[c].L - 1.5; x \u003c xs(c + 1); x += 1.5) px.push(x), py.push(outT(c, x));\n      px.push(xs(c + 1)), py.push(outT(c, xs(c + 1)));\n    }\n  }\n  for (let j = 1; j \u003c px.length; j++) pl.push(pl[j - 1] + hypot(px[j] - px[j - 1], py[j] - py[j - 1]));\n  Object.assign(S, { px, py, pl, Ac: at.map((j, c) => (c ? pl[j] : 0)) });\n  // The first time, the potter stands by the chamber above the one being fired.\n  const pt = S.pot;\n  if (!S.built) S.built = 1, pt.tgt = min(n, cl(round(front(S)), 1, n) + 1);\n  pt.tgt = min(pt.tgt, n);\n  pt.A = S.Ac[pt.tgt];\n  if (!pt.mode) pt.mode = 2;\n  S.logs = S.logs.filter((l) => l.c \u003c= n);\n  S.slugs = [];\n  S.ev = [];\n}\n\n// A stoke: reduction first, the flame starved and smoky, then the surge.\nconst red = (a) => (a \u003c 0.2 ? a / 0.2 : exp(-(a - 0.2) / 1.1));\nconst surge = (a) => sm(0.9, 2.1, a) * exp(-max(0, a - 2.1) / 2.4);\n\nfunction pulse(S, c, s) {\n  S.age[c] = 0, S.q[c] = s;\n  // Its black smoke reaches the chimney later the lower the chamber.\n  S.ev.push({ at: 0.25 + 0.12 * (S.n - c), fn: () => S.slugs.push({ y: S.inT(S.n, S.CX), a: 0.5 + 0.5 * s }) });\n}\n\nfunction stoke(S, c) {\n  const q = S.g[c];\n  pulse(S, c, 1);\n  S.logs.push({ c, x: q.L + (c ? 0.5 + rnd() * 2 : 2 + rnd() * 9), y: c ? round(q.F) - 1 : 120 + (rnd() \u003c 0.5), len: (c ? 3 : 4) + floor(rnd() * 3), life: 1 });\n  // The firebox's flame goes on through the first chamber.\n  if (!c) S.ev.push({ at: 0.35, fn: () => pulse(S, 1, 0.6) });\n}\n\nfunction throwTo(S, c, delay = 0) {\n  S.ev.push({ at: 0.3 + delay, fn: () => stoke(S, c) });\n  S.open[c] = 1.3 + delay;\n}\n\nfunction puff(S, x, y, vy, r, a, k) {\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vy, r, a, k, hot: 0.7 - 0.2 * k, ph: rnd() * 7 });\n}\n\nfunction spark(S, s) {\n  if (S.sparks.length > 160) S.sparks.shift();\n  const life = 0.8 + 1.4 * rnd();\n  S.sparks.push({ x: S.CX + (rnd() - 0.5) * 3, y: TOP - 1, vx: (rnd() - 0.5) * 6 * s, vy: -(10 + 14 * rnd()) * s, life, L: life });\n}\n\nfunction posAt(S, A) {\n  const { px, py, pl } = S;\n  let j = 1;\n  while (j \u003c pl.length - 1 && pl[j] \u003c A) j++;\n  const u = cl((A - pl[j - 1]) / max(1e-6, pl[j] - pl[j - 1]), 0, 1);\n  return [mix(px[j - 1], px[j], u), mix(py[j - 1], py[j], u), abs(px[j] - px[j - 1]) \u003c 0.01];\n}\n\nfunction step(S, d) {\n  S.t += d;\n  const { n, T, age, q, Hc, Te, Br, wind, pot: pt, fb } = S, fr = front(S), peak = 0.5 + 0.45 * sm(0, 0.5, (S.k1 + 1) / 2);\n  S.cf = cl(round(fr), 1, n);\n  for (let c = 0; c \u003c= n; c++) {\n    // Fired chambers hold white heat; above the one being fired each is cooler.\n    const tg = max(0.2, peak - (1.1 / n) * max(0, c - fr));\n    T[c] = T[c] \u003c 0 ? tg : T[c] + (tg - T[c]) * min(1, d * 0.8);\n    age[c] += d;\n    // Wind up the hill pulls on the chimney; wind down it chokes the draft.\n    Te[c] = T[c] + q[c] * (0.1 * surge(age[c]) - 0.15 * red(age[c])) + 0.02 * sin(S.t * 1.3 + c * 2.1) + 0.06 * wind;\n    Br[c] = 1 - 0.36 * q[c] * red(age[c]);\n    // Heat work for the cones creeps up and hardly comes back.\n    if (Hc[c] \u003c 0) Hc[c] = T[c] - 0.1;\n    Hc[c] += (Te[c] - Hc[c]) * d * (Te[c] > Hc[c] ? 0.07 : 0.02);\n    S.open[c] = max(0, S.open[c] - d);\n  }\n  Te[n + 1] = Te[n] - 0.22, Br[n + 1] = Br[n];\n  for (const e of S.ev) if ((e.at -= d) \u003c= 0) e.fn();\n  S.ev = S.ev.filter((e) => e.at > 0);\n  // The potter stokes twice, watches the spy hole, then goes where wood is needed.\n  pt.ph += d;\n  if (!pt.mode) {\n    pt.A += cl(S.Ac[pt.tgt] - pt.A, -13 * d, 13 * d);\n    if (abs(S.Ac[pt.tgt] - pt.A) \u003c 1e-3) pt.mode = 1, pt.tm = 0, pt.thr = 0;\n  } else if (pt.mode === 1) {\n    pt.tm += d;\n    if (pt.thr \u003c 2 && pt.tm > 0.3 + 0.7 * pt.thr) {\n      throwTo(S, pt.tgt);\n      pt.thr++;\n    }\n    if (pt.tm > 1.5) pt.mode = 2, pt.tm = 0.6 + 0.6 * rnd();\n  } else if ((pt.tm -= d) \u003c= 0) pt.tgt = ++pt.k % 3 ? S.cf : min(n, S.cf + 1), pt.mode = 0;\n  // The stoker feeds the fire mouth.\n  fb.an = max(0, fb.an - d);\n  if ((fb.tm -= d) \u003c= 0) fb.tm = 3 + rnd(), fb.an = 0.5, throwTo(S, 0);\n  for (const l of S.logs) l.life -= d * (0.12 + 0.2 * T[l.c]);\n  S.logs = S.logs.filter((l) => l.life > 0);\n  // Black smoke up the chimney: at the top, a billow, a flare and sparks.\n  for (const s of S.slugs)\n    if ((s.y -= d * 30) \u003c TOP) {\n      s.done = 1;\n      for (let j = 0; j \u003c 3; j++) puff(S, S.CX + (rnd() - 0.5) * 3, TOP - 1 - j * 2, -6 - 4 * rnd(), 3 + rnd(), 0.6 + 0.6 * s.a, 1);\n      for (let j = 0; j \u003c 14 * s.a; j++) spark(S, 1.3);\n      S.flare = min(1.4, S.flare + s.a);\n    }\n  S.slugs = S.slugs.filter((s) => !s.done);\n  S.flare = max(0.15 + 0.35 * sm(0.6, 1, T[n]), S.flare * exp(-d * 1.6));\n  air(S, d);\n  // Ash and embers.\n  for (const m of S.motes) m.x = (m.x + (wind * 9 + 1 + 1.5 * sin(S.t * 0.7 + m.ph)) * d + 65) % 65, m.y = (m.y + (m.e ? -3.5 : 2.2) * d + 129) % 129;\n}\n\n// A grey plume that slows and spreads under the top of the panel, and sparks.\nfunction air(S, d) {\n  const { n, T, wind } = S;\n  for (S.np += d * 6; S.np >= 1; S.np--) puff(S, S.CX + (rnd() - 0.5) * 2, TOP - 1, -7 - 3 * rnd(), 3, 0.55 + 0.2 * T[n], 0);\n  for (const p of S.puffs) {\n    // A strong wind bends the plume over and draws it out downwind.\n    p.vy += (-3.5 * (1 - 0.55 * abs(wind)) * cl(p.y / 12, 0.3, 1) - p.vy) * d * 1.2;\n    p.y += p.vy * d;\n    p.x += (wind * 18 * (0.5 + 0.5 * cl((TOP - p.y) / TOP, 0, 1)) + 1.2 * sin(S.t * 0.9 + p.ph)) * d;\n    p.r = min(10 + p.k, p.r + d * (1.5 + 1.2 * p.k + 2 * cl((8 - p.y) / 8, 0, 1)));\n    p.a -= d * (0.05 + 0.04 * (1 - p.k));\n    p.hot = max(0, p.hot - d * 1.4);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.03 && p.y + p.r > -3 && p.x > -14 && p.x \u003c W + 14);\n  for (S.ns += d * (2 + 5 * T[n]) * (1 + 0.6 * wind); S.ns >= 1; S.ns--) spark(S, 1);\n  for (const p of S.sparks) {\n    p.vy += (-6 - p.vy) * d * 1.5;\n    p.vx += ((rnd() - 0.5) * 40 + (wind * 16 - p.vx) * 2) * d;\n    p.x += p.vx * d, p.y += p.vy * d, p.life -= d;\n  }\n  S.sparks = S.sparks.filter((p) => p.life > 0 && p.y > -1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], n = cl(round(k[2]), 3, 6);\n  S.k1 = cl(k[0], -1, 1);\n  S.wind = cl(k[3], -1, 1);\n  if (n !== S.n) build(S, n);\n  // The kiln has been smoking for hours before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    step(S, 0);\n    for (let j = 0; j \u003c 75; j++) air(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c= n; c++) throwTo(S, c, 0.05 * c);\n  step(S, cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2));\n}\n\nlet F;\nfunction put(x, y, c, a = 1, add = 0) {\n  x = floor(x), y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = add ? F[o + i] + c[i] * a : mix(F[o + i], c[i], a);\n}\nfunction glow(x, y, r, c, a) {\n  for (let Y = floor(y - r); Y \u003c= y + r; Y++) for (let X = floor(x - r); X \u003c= x + r; X++) put(X, Y, c, a * max(0, 1 - hypot(X + 0.5 - x, Y + 0.5 - y) / r) ** 2, 1);\n}\n\n// A figure nine LEDs tall, feet on row y, facing the kiln: white towel, indigo\n// jacket lit orange on the kiln side, paper lantern.\nfunction figure(x, y, pose, ph, rim, lamp) {\n  x = round(x), y = round(y);\n  const a = floor(ph * 6) & 1 ? -1 : 1, pts = [[-1, -8, TOWEL], [0, -8, TOWEL], [0, -7, FACE, 1]];\n  for (let dy = -6; dy \u003c= -4; dy++) pts.push([-1, dy, COAT], [0, dy, COAT], [1, dy, COAT, 1]);\n  const L = (l, b) => pts.push([l, -3, LEGS], [b, -2, LEGS], [b, -1, LEGS], [b, 0, LEGS]);\n  if (pose === 1 && a \u003c 0) L(0, 0);\n  else if (pose === 2) L(a, a), L(-a, -a), pts.push([a, -7, COAT, 1], [-a, -3, LEGS]);\n  else L(-1, -1), L(1, 1);\n  if (pose === 3) pts.push(...(ph \u003c 0.5 ? [[-1, -7, COAT], [-2, -8, COAT]] : [[2, -5, COAT, 1], [3, -5, FACE, 1]]));\n  for (const [dx, dy, c, k] of pts) put(x + dx, y + dy, k ? c.map((v, i) => mix(v, RIM[i], rim)) : c);\n  if (lamp) put(x - 2, y - 4, [120, 70, 40]), put(x - 2, y - 3, [255, 222, 150]), put(x - 2, y - 2, [240, 160, 80]), glow(x - 1.5, y - 2, 7, [70, 44, 16], 1);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  F = S.f;\n  const { n, t, kind, ch, V, bg, gw, Te, Br, g, wind, A, K, Q, q, age } = S, lean = wind * 2.2 + 0.8, fs = 1 + 0.45 * wind, fo = floor(t * fs * 17);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const k = kind[i], c = ch[i], x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, T = Te[c], B = Br[c], v = V[i];\n    // Each LED: backdrop times m plus a ramp colour times b.\n    let j = lut(T * 0.7), b = 0, m = 0;\n    if (k \u003c= EARTH) m = 1, b = gw[i] * 0.28 * B;\n    else if (k === WALL) m = v ? 0.45 : 0.95, j = lut(T * 0.85 - 0.05), b = B * (v ? 0.5 : 0.1);\n    else if (k === GAS) {\n      let I = sm(0.25, 0.85, 0.65 * vn(X * 0.45 - lean * (0.3 + v) * 3 + c * 19, (Y + t * fs * 10) * 0.16) + 0.35 * fn(x, y + fo) + 0.25 * (1 - v) - 0.07);\n      // The firebox floor: a bed of embers under the logs.\n      if (!c && v \u003c 0.3) I = sm(0.35, 0.85, 0.7 * vn(X * 0.7, Y * 0.9 + t * 0.4) + 0.3 * vn(X * 1.7 + t, Y * 1.5) + 0.1);\n      // Darker flame is cooler, orange rather than grey. The firebox burns rougher.\n      const r = c ? 0.14 : 0.26;\n      j = lut(T - r + 2 * r * I), b = B * (1 - 2 * r + 2 * r * I);\n    } else if (k === POT) j = lut(T - 0.18), b = B * (0.32 + 0.22 * v + 0.14 * fn(x >> 1, y + (fo >> 1)));\n    else if (k === SHELF) j = lut(T - 0.2), b = B * 0.4;\n    else if (k === HOLE) j = lut(mix(Te[c - 1], T, 0.5) + 0.04), b = 0.85 + 0.15 * sin(t * 9 + x);\n    else {\n      // The flue: hot gas rising in bands, and each stoke's black smoke going up.\n      let dk = 0;\n      for (const s of S.slugs) dk = max(dk, s.a * exp(-(((Y - s.y) / 3) ** 2)));\n      j = lut(T - 0.12 - 0.2 * v + 0.1 * vn(X * 0.6, (Y + t * 22) * 0.3)), b = B * (0.6 + 0.3 * vn(X * 0.5 + 9, (Y + t * 26) * 0.2)) * (1 - 0.85 * dk);\n    }\n    for (let e = 0; e \u003c 3; e++) F[o + e] = bg[o + e] * m + LUT[j + e] * b;\n  }\n  for (const i of S.stars) for (let e = 0; e \u003c 3; e++) F[i * 3 + e] *= 0.75 + 0.25 * sin(t * 2.3 + i);\n\n  // Burning wood on the floors; in the firebox, thicker logs with their tops alight.\n  for (const l of S.logs)\n    for (let k = 0, T = Te[l.c], len = max(1, round(l.len * min(1, l.life * 1.6))); k \u003c len; k++) {\n      put(l.x + k, l.y, (k + floor(t * 4 + l.x)) % 3 ? lc(T - 0.45, 0.45) : lc(T + 0.1));\n      if (!l.c) put(l.x + k, l.y - 1, lc(T - 0.1 + 0.15 * sin(t * 7 + k + l.x)), 0.85);\n    }\n  for (const [lx, y0, y1] of S.lad) for (let y = floor(y0); y \u003c= y1; y++) put(lx - 1, y, WOOD, 0.7), put(lx + 1, y, WOOD, 0.7), y % 3 || put(lx, y, WOOD, 0.6);\n  for (let c = 1; c \u003c= n; c++) {\n    // The stoke hole, open while wood goes in, and the spy hole.\n    const T = Te[c], wx = floor(g[c].L - 1.5), sy = S.spy[c], fy = round(g[c].F), op = sm(0, 0.3, S.open[c]);\n    for (let y = fy - 3; y \u003c= fy - 2; y++) for (let x = wx; x \u003c= wx + 1; x++) put(x, y, op > 0.05 ? lc(T + 0.05, op) : lc(T - 0.3, 0.35));\n    if (op > 0.05) glow(wx - 1, fy - 2.5, 6, lc(T - 0.1), 0.35 * op);\n    put(wx, sy, lc(T, 0.9)), put(wx + 1, sy, lc(T));\n    for (let x = wx + 2; x \u003c= wx + 6; x++) put(x, sy + 2, lc(T - 0.2, 0.4));\n    // Three cones on a pad, each bending once the heat work passes its number.\n    for (let m = 0; m \u003c 3; m++) {\n      const b = sm(0.57 + 0.12 * m, 0.68 + 0.12 * m, S.Hc[c]), cx = wx + 2 + 2 * m + (b > 0.4), cc = lc(T - 0.15, 0.5);\n      put(cx - (b > 0.4), sy + 1, cc), put(cx, sy, cc, b \u003c 0.75 ? 1 : 0.5), put(cx, b \u003c 0.75 ? sy - 1 : sy + 1, cc);\n    }\n    // Flame out of the spy hole after a stoke, or whenever the wind chokes the chimney.\n    const s = max(q[c] * red(age[c]) * sm(0.15, 0.35, age[c]), 0.55 * q[c - 1] * red(age[c - 1] - 0.3) * sm(0.4, 0.6, age[c - 1])) + 0.3 * max(0, -wind) * (0.7 + 0.3 * sin(t * 3 + c));\n    if (s \u003c 0.05) continue;\n    const x0 = wx - 0.5, y0 = sy + 0.5, len = 2 + 9 * s * (0.8 + 0.2 * sin(t * 13 + c));\n    glow(x0, y0, 5, [120, 50, 10], s);\n    for (let j = 0; j \u003c len; j++) {\n      const u = j / len, x = x0 - j * (1 - 0.6 * max(0, wind)) + wind * j * 0.4, y = y0 - j * j * 0.06 - j * 0.15 + sin(t * 17 + j) * 0.4 * u;\n      put(x, y, lc(T + 0.45 - 0.6 * u), 1 - u * 0.3);\n      if (u \u003c 0.7) put(x, y - 1, lc(T + 0.25 - 0.6 * u), 0.8 - u), put(x, y + 1, lc(T + 0.1 - 0.6 * u), 0.5 - 0.5 * u);\n    }\n  }\n  const pt = S.pot, [px, py, climb] = posAt(S, pt.A), pose = pt.mode === 1 ? 3 : pt.mode ? 0 : climb ? 2 : 1;\n  figure(px, py, pose, pose === 3 ? (pt.tm % 0.7) / 0.7 : pt.ph, 0.25 + 0.6 * sm(0, 0.3, S.open[pt.tgt]) * (pose === 3), 1);\n  figure(1, 122, S.fb.an > 0 ? 3 : 0, 1 - S.fb.an / 0.5, 0.5 + 0.3 * sin(t * 7), 0);\n  glow(5, 120, 6, lc(Te[0] - 0.1), 0.35);\n\n  // Smoke: puffs summed, then shaded grey, lit from below, or black after a stoke.\n  A.fill(0), K.fill(0), Q.fill(0);\n  for (const p of S.puffs)\n    for (let y = max(0, floor(p.y - p.r)); y \u003c= min(63, p.y + p.r); y++)\n      for (let x = max(0, floor(p.x - p.r)); x \u003c= min(W - 1, p.x + p.r); x++) {\n        const dx = (x + 0.5 - p.x) / p.r, dy = (y + 0.5 - p.y) / p.r, w = p.a * (1 - dx * dx - dy * dy) ** 2, i = y * W + x;\n        if (dx * dx + dy * dy \u003c 1) A[i] += w, K[i] += w * p.k, Q[i] += w * p.hot;\n      }\n  for (let i = 0; i \u003c W * 64; i++) {\n    if (A[i] \u003c 0.01) continue;\n    const y = i >> 6, tx = 0.6 * vn((i & 63) * 0.25 - t * wind, y * 0.25 + t * 0.8) + 0.4 * fn(i, y + (fo >> 2)), gr = 0.7 + 0.5 * tx;\n    const al = min(0.95, (1 - exp(-A[i] * 2.2)) * (0.6 + 0.6 * tx)), dk = K[i] / A[i], hq = min(1, Q[i] / A[i]) * (0.4 + 0.6 * sm(30, 10, y));\n    const o = i * 3;\n    F[o] = mix(F[o], mix(118 * gr, 16, dk) + 160 * hq, al), F[o + 1] = mix(F[o + 1], mix(106 * gr, 11, dk) + 60 * hq, al), F[o + 2] = mix(F[o + 2], mix(104 * gr, 10, dk) + 14 * hq, al);\n  }\n  // Flame licking out of the chimney's mouth.\n  const fh = 2 + 7 * S.flare;\n  glow(S.CX, TOP, 6, [110, 40, 8], S.flare * 0.8);\n  for (let j = 0, u = 0; j \u003c fh; u = ++j / fh)\n    for (let e = -1; e \u003c 2; e++) (u \u003c 0.5 || !e) && put(S.CX + e + wind * j * 0.6 + sin(t * 11 + j) * 0.6 * u, TOP - 1 - j, lc(Te[n] - 0.05 - 0.45 * u - 0.2 * abs(e)), e ? 0.6 : 1 - 0.5 * u);\n  for (const p of S.sparks) put(p.x, p.y, lc(0.35 + 0.75 * (p.life / p.L)), min(1, p.life * 2));\n  for (const m of S.motes) put(m.x, m.y, m.e ? [230, 110, 30] : [80, 78, 84], m.e ? 0.5 + 0.4 * sin(t * 5 + m.ph) : 0.6);\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-noborigama","type":"code","name":"noborigama","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Noborigama\n// Family:  pottery\n// Idea:    A climbing kiln cut open on a hillside at night: flame climbs from the firebox through vaulted chambers of pots, white-yellow below and red above, and each time the potter stokes, flame bursts from the spy holes and black smoke and sparks leave the chimney.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the noborigama, the wood-fired climbing kiln of Japan and Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1\n//\n// Knob 1: Firing. The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white.\n// Knob 2: Speed. At 2 the potter stokes every few seconds; 0.2 is ten times slower.\n// Knob 3: Chambers. Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves.\n// Knob 4: Draft. Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame.\n// Buttons: K1 tap stokes every hole at once: flame from every spy hole, then a black cloud full of sparks from the chimney.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, sin, sqrt, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y, p = 1e9) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi % p), b = hash(xi + 1, yi % p), c = hash(xi, (yi + 1) % p);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, (yi + 1) % p)) * su * sv;\n}\n// Fine noise that wraps every 256 rows, for the quick flicker of flame and smoke.\nconst FN = new Float32Array(64 * 256).map((_, i) => vn((i & 63) * 0.9, ((i >> 6) * 84) / 256, 84));\nconst fn = (x, y) => FN[(y & 255) * 64 + (x & 63)];\n\n// Brick, gas and flame by temperature: dull red at 0.15, orange at 0.6, white\n// heat at 1. Red stops at 232: pinned at 255 it hid the flicker of the hottest\n// chambers, since an LED reads by its brightest channel.\nconst RAMP = [[0, 24, 4, 2], [0.15, 92, 13, 4], [0.3, 158, 30, 6], [0.45, 204, 68, 12], [0.6, 226, 114, 24], [0.75, 232, 160, 50], [0.88, 232, 194, 96], [1, 232, 216, 160], [1.25, 236, 230, 204]];\nconst LUT = new Float32Array(768);\nfor (let i = 0; i \u003c 256; i++) {\n  let k = 0;\n  const T = i / 204;\n  while (k \u003c 7 && T > RAMP[k + 1][0]) k++;\n  const u = cl((T - RAMP[k][0]) / (RAMP[k + 1][0] - RAMP[k][0]), 0, 1);\n  for (let c = 0; c \u003c 3; c++) LUT[i * 3 + c] = mix(RAMP[k][c + 1], RAMP[k + 1][c + 1], u);\n}\nconst lut = (T) => cl(round(T * 204), 0, 255) * 3;\n// One colour array for every put(), to spare the garbage collector.\nconst C3 = [0, 0, 0];\nconst lc = (T, b = 1) => ((T = lut(T)), C3[0] = LUT[T] * b, C3[1] = LUT[T + 1] * b, C3[2] = LUT[T + 2] * b, C3);\n\nconst SKY = 0, EARTH = 1, WALL = 3, GAS = 4, POT = 5, SHELF = 6, HOLE = 7, FLUE = 8;\n// A vault on low walls: roof height across a chamber, 0.4 at the walls, 1 at the crown.\nconst arch = (u) => 0.4 + 0.6 * sqrt(max(0, 1 - (2 * u - 1) ** 2));\nconst TOP = 18; // the chimney's mouth row\nconst WOOD = [150, 118, 66], TOWEL = [214, 204, 184], FACE = [176, 116, 78], COAT = [46, 60, 128], LEGS = [74, 62, 54], RIM = [255, 150, 60];\n// Jar, flared bowl, bottle and cup: half width up the pot, bottom to top.\nconst prof = (k, t) => (k === 0 ? (t > 0.84 ? 0.5 : 0.6 + 0.4 * sin(PI * t)) : k === 1 ? 0.5 + 0.5 * t : k === 2 ? (t \u003c 0.55 ? 0.55 + 0.45 * sin((PI * t) / 0.55) : t > 0.88 ? 0.5 : 0.3) : 0.8);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = (params.s = {\n    t: 0, n: 0, kind: new Uint8Array(N), ch: new Uint8Array(N), V: F32(N), bg: F32(N * 3), gw: F32(N), f: F32(N * 3), A: F32(W * 64), K: F32(W * 64), Q: F32(W * 64),\n    T: F32(8).fill(-1), Hc: F32(8).fill(-1), age: F32(8).fill(9), q: F32(8), open: F32(8), Te: F32(8), Br: F32(8),\n    puffs: [], sparks: [], logs: [], slugs: [], ev: [], motes: [], pot: { A: 0, tgt: 0, mode: 1, tm: -1.6, thr: 0, k: 0, ph: 0 }, fb: { tm: 1, an: 0 }, flare: 0, np: 0, ns: 0,\n  });\n  for (let k = 0; k \u003c 40; k++) S.motes.push({ x: rnd() * W, y: rnd() * H, e: rnd() \u003c 0.45, ph: rnd() * 7 });\n  for (let k = 0; k \u003c 3; k++) S.logs.push({ c: 0, x: 8 + k * 6 + rnd() * 3, y: 120 + (k & 1), len: 5, life: 0.4 + 0.5 * rnd() });\n}\n\nconst front = (S) => ((S.k1 + 1) / 2) * (S.n + 0.3);\n\nfunction build(S, n) {\n  S.n = n;\n  const P = 77 / n, h = P - 3, Wc = 34 - 2 * n, s = (43 - Wc) / (n - 1);\n  // The firebox, then the chambers, each P rows above the last and s LEDs to the right.\n  const g = (S.g = [{ L: 6, W: 25, F: 123, h: 11 }]);\n  for (let c = 1; c \u003c= n; c++) g.push({ L: 14 + (c - 1) * s, W: Wc, F: 108 - (c - 1) * P, h });\n  // The roof row over X inside a chamber; with e = 2, the top of its brick.\n  const inT = (S.inT = (k, X, e = 0) => {\n    const q = g[k], u = (X - q.L + e) / (q.W + 2 * e);\n    return u > 0 && u \u003c 1 ? q.F - (q.h + e) * arch(u) : 1e3;\n  });\n  const outT = (k, X) => inT(k, X, 2), tp = g[n], CX = (S.CX = tp.L + 0.62 * tp.W);\n  const hill = (X) => (X \u003c 4 ? 123 : X \u003c tp.L - 2 ? mix(123, tp.F + 2, (X - 4) / (tp.L - 6)) : mix(tp.F + 2, tp.F - 5, (X - tp.L + 2) / (66 - tp.L)));\n  // Flame passages through each chamber's floor, over the crown of the one below.\n  const holes = [];\n  for (let c = 1; c \u003c= n; c++) for (let a = g[c - 1], x = round(a.L + 0.2 * a.W); x \u003c= a.L + 0.8 * a.W; x += 4) if (x > g[c].L && x \u003c g[c].L + Wc - 2) holes.push([x, c]);\n  const { kind, ch, V, bg, gw } = S;\n  S.stars = [];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, r = hash(x, y), nz = 0.8 + 0.4 * vn(x * 0.3, y * 0.3);\n    let k = SKY, c = 0, v = 0, col = [0, 0, 0];\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F && Y > inT(j, X)) k = GAS, c = j, v = (g[j].F - Y) / g[j].h;\n    if (!k && abs(X - CX) \u003c 2 && Y > TOP && Y \u003c inT(n, X) + 0.5) k = FLUE, c = n, v = (Y - TOP) / (inT(n, CX) - TOP);\n    if (!k) for (const [hx, hc] of holes) if (x === hx && Y > g[hc].F && Y \u003c inT(hc - 1, X)) k = HOLE, c = hc;\n    for (let j = 0; j \u003c= n && !k; j++) if (Y \u003c g[j].F + 2 && Y > outT(j, X)) k = WALL, c = j;\n    if (!k && Y > TOP && ((abs(X - CX) \u003c 4 && Y \u003c outT(n, X) + 1) || (Y \u003c TOP + 2 && abs(X - CX) \u003c 5))) k = WALL, c = n + 1;\n    if (!k && Y > hill(X)) k = EARTH;\n    // The fire mouth in the firebox's front wall.\n    if (k === WALL && !c && x \u003c 6 && y > 116) k = GAS, v = (123 - Y) / 11;\n    kind[i] = k, ch[i] = c, V[i] = v;\n    if (k === SKY) {\n      const u = sm(0, 112, Y), dm = hypot(X - 11, Y - 11), e = 26 * exp(-dm / 3.5), st = r \u003c 0.014 && y \u003c 100 && dm > 12 ? 70 + 140 * hash(y, x) : 0;\n      col = [5 + 15 * u + e + st, 9 + 17 * u + e + st, 32 + 30 * u + e + st];\n      // A crescent moon.\n      if (dm \u003c 3.6 && hypot(X - 12.6, Y - 10) > 3.2) col = [226, 222, 196];\n      if (st) S.stars.push(i);\n    } else if (k === EARTH) {\n      // Beds along the slope, stones, grass on top.\n      const dd = Y - hill(X), bd = (0.7 + 0.5 * vn(dd * 0.3 + x * 0.04, 3.5 + x * 0.02)) * nz;\n      col = dd \u003c 1.5 ? [24, 38, 24] : r \u003c 0.035 ? [58, 52, 46] : [30 * bd, 23 * bd, 19 * bd];\n    }\n    // Brick, coursed on the chimney.\n    else if (k === WALL) col = [96, 66, 50].map((v2) => v2 * ((c > n ? y % 3 === 0 || (x + (floor(y / 3) & 1) * 2) % 4 === 0 : r \u003c 0.25) ? 0.62 : 0.85 + 0.3 * r));\n    bg.set(col, i * 3);\n  }\n  gw.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, k = kind[i];\n    // The brick the fire touches.\n    if (k === WALL) V[i] = [1, -1, W, -W].some((d) => kind[i + d] >= GAS && (abs(d) > 1 || (x + d) >> 6 === 0)) ? 1 : 0;\n    // Earth and air by the kiln are warm: how near each LED is to a wall, and whose.\n    if (k \u003c= EARTH) {\n      let best = 9;\n      for (let dy = -4; dy \u003c= 4; dy++)\n        for (let dx = -4; dx \u003c= 4; dx++) {\n          const X = x + dx, Y = y + dy, d = abs(dx) + abs(dy);\n          if (X >= 0 && X \u003c W && Y >= 0 && Y \u003c H && kind[Y * W + X] === WALL && d \u003c best) best = d, ch[i] = ch[Y * W + X];\n        }\n      gw[i] = best \u003c 9 ? exp(-best / 1.4) * (k ? 0.8 : 0.6) : 0;\n    }\n  }\n  // Shelves and pots: two or three levels a chamber, under the vault.\n  const nl = h >= 16 ? 3 : 2, lh = h / nl;\n  for (let c = 1; c \u003c= n; c++) {\n    const q = g[c], x0 = round(q.L + max(6, 0.22 * Wc)), x1 = floor(q.L + Wc - 1);\n    const set = (x, y, k2, v2) => kind[y * W + x] === GAS && ch[y * W + x] === c && ((kind[y * W + x] = k2), (V[y * W + x] = v2));\n    for (let j = 0; j \u003c nl; j++) {\n      const ys = round(q.F - j * lh), base = ys - 1;\n      if (j) {\n        for (let x = x0; x \u003c= x1; x++) if (inT(c, x + 0.5) \u003c ys - 1) set(x, ys, SHELF, 0);\n        for (let y = ys + 1; y \u003c round(q.F - (j - 1) * lh); y++) set(x0, y, SHELF, 0), set(x1 - 1, y, SHELF, 0);\n      }\n      for (let x = x0 + 1; x \u003c x1 - 1; ) {\n        const ty = floor(hash(c * 7 + j, x) * 4), w = [5, 5, 4, 3][ty];\n        const ph = min(floor(lh - 2), [5, 3, 6, 4][ty], floor(base - max(inT(c, x + 0.5), inT(c, x + w - 0.5)) - 1));\n        if (ph \u003c 2 || x + w > x1) break;\n        for (let r = 0; r \u003c ph; r++)\n          for (let xx = x; xx \u003c x + w; xx++) {\n            const dx = xx + 0.5 - x - w / 2;\n            if (abs(dx) \u003c= (prof(ty, (r + 0.5) / ph) * w) / 2 + 0.15) set(xx, base - r, POT, 0.5 - dx / w + (r === ph - 1 ? 0.2 : 0));\n          }\n        x += w + 1;\n      }\n    }\n  }\n  // Ladders up each chamber's front, and the potter's way between the stoke holes.\n  const xs = (c) => g[c].L - 4, px = [], py = [], at = [0], pl = [0];\n  S.lad = [];\n  S.spy = [0];\n  for (let c = 1; c \u003c= n; c++) {\n    const yw = outT(c, g[c].L - 1.5);\n    S.lad.push([round(xs(c)), yw, outT(c - 1, xs(c))]);\n    S.spy.push(round(g[c].F - max(5, 0.35 * h)));\n    at.push(px.length);\n    px.push(xs(c)), py.push(g[c].F + 2);\n    if (c \u003c n) {\n      px.push(xs(c)), py.push(yw);\n      for (let x = g[c].L - 1.5; x \u003c xs(c + 1); x += 1.5) px.push(x), py.push(outT(c, x));\n      px.push(xs(c + 1)), py.push(outT(c, xs(c + 1)));\n    }\n  }\n  for (let j = 1; j \u003c px.length; j++) pl.push(pl[j - 1] + hypot(px[j] - px[j - 1], py[j] - py[j - 1]));\n  Object.assign(S, { px, py, pl, Ac: at.map((j, c) => (c ? pl[j] : 0)) });\n  // The first time, the potter stands by the chamber above the one being fired.\n  const pt = S.pot;\n  if (!S.built) S.built = 1, pt.tgt = min(n, cl(round(front(S)), 1, n) + 1);\n  pt.tgt = min(pt.tgt, n);\n  pt.A = S.Ac[pt.tgt];\n  if (!pt.mode) pt.mode = 2;\n  S.logs = S.logs.filter((l) => l.c \u003c= n);\n  S.slugs = [];\n  S.ev = [];\n}\n\n// A stoke: reduction first, the flame starved and smoky, then the surge.\nconst red = (a) => (a \u003c 0.2 ? a / 0.2 : exp(-(a - 0.2) / 1.1));\nconst surge = (a) => sm(0.9, 2.1, a) * exp(-max(0, a - 2.1) / 2.4);\n\nfunction pulse(S, c, s) {\n  S.age[c] = 0, S.q[c] = s;\n  // Its black smoke reaches the chimney later the lower the chamber.\n  S.ev.push({ at: 0.25 + 0.12 * (S.n - c), fn: () => S.slugs.push({ y: S.inT(S.n, S.CX), a: 0.5 + 0.5 * s }) });\n}\n\nfunction stoke(S, c) {\n  const q = S.g[c];\n  pulse(S, c, 1);\n  S.logs.push({ c, x: q.L + (c ? 0.5 + rnd() * 2 : 2 + rnd() * 9), y: c ? round(q.F) - 1 : 120 + (rnd() \u003c 0.5), len: (c ? 3 : 4) + floor(rnd() * 3), life: 1 });\n  // The firebox's flame goes on through the first chamber.\n  if (!c) S.ev.push({ at: 0.35, fn: () => pulse(S, 1, 0.6) });\n}\n\nfunction throwTo(S, c, delay = 0) {\n  S.ev.push({ at: 0.3 + delay, fn: () => stoke(S, c) });\n  S.open[c] = 1.3 + delay;\n}\n\nfunction puff(S, x, y, vy, r, a, k) {\n  if (S.puffs.length > 110) S.puffs.shift();\n  S.puffs.push({ x, y, vy, r, a, k, hot: 0.7 - 0.2 * k, ph: rnd() * 7 });\n}\n\nfunction spark(S, s) {\n  if (S.sparks.length > 160) S.sparks.shift();\n  const life = 0.8 + 1.4 * rnd();\n  S.sparks.push({ x: S.CX + (rnd() - 0.5) * 3, y: TOP - 1, vx: (rnd() - 0.5) * 6 * s, vy: -(10 + 14 * rnd()) * s, life, L: life });\n}\n\nfunction posAt(S, A) {\n  const { px, py, pl } = S;\n  let j = 1;\n  while (j \u003c pl.length - 1 && pl[j] \u003c A) j++;\n  const u = cl((A - pl[j - 1]) / max(1e-6, pl[j] - pl[j - 1]), 0, 1);\n  return [mix(px[j - 1], px[j], u), mix(py[j - 1], py[j], u), abs(px[j] - px[j - 1]) \u003c 0.01];\n}\n\nfunction step(S, d) {\n  S.t += d;\n  const { n, T, age, q, Hc, Te, Br, wind, pot: pt, fb } = S, fr = front(S), peak = 0.5 + 0.45 * sm(0, 0.5, (S.k1 + 1) / 2);\n  S.cf = cl(round(fr), 1, n);\n  for (let c = 0; c \u003c= n; c++) {\n    // Fired chambers hold white heat; above the one being fired each is cooler.\n    const tg = max(0.2, peak - (1.1 / n) * max(0, c - fr));\n    T[c] = T[c] \u003c 0 ? tg : T[c] + (tg - T[c]) * min(1, d * 0.8);\n    age[c] += d;\n    // Wind up the hill pulls on the chimney; wind down it chokes the draft.\n    Te[c] = T[c] + q[c] * (0.1 * surge(age[c]) - 0.15 * red(age[c])) + 0.02 * sin(S.t * 1.3 + c * 2.1) + 0.06 * wind;\n    Br[c] = 1 - 0.36 * q[c] * red(age[c]);\n    // Heat work for the cones creeps up and hardly comes back.\n    if (Hc[c] \u003c 0) Hc[c] = T[c] - 0.1;\n    Hc[c] += (Te[c] - Hc[c]) * d * (Te[c] > Hc[c] ? 0.07 : 0.02);\n    S.open[c] = max(0, S.open[c] - d);\n  }\n  Te[n + 1] = Te[n] - 0.22, Br[n + 1] = Br[n];\n  for (const e of S.ev) if ((e.at -= d) \u003c= 0) e.fn();\n  S.ev = S.ev.filter((e) => e.at > 0);\n  // The potter stokes twice, watches the spy hole, then goes where wood is needed.\n  pt.ph += d;\n  if (!pt.mode) {\n    pt.A += cl(S.Ac[pt.tgt] - pt.A, -13 * d, 13 * d);\n    if (abs(S.Ac[pt.tgt] - pt.A) \u003c 1e-3) pt.mode = 1, pt.tm = 0, pt.thr = 0;\n  } else if (pt.mode === 1) {\n    pt.tm += d;\n    if (pt.thr \u003c 2 && pt.tm > 0.3 + 0.7 * pt.thr) {\n      throwTo(S, pt.tgt);\n      pt.thr++;\n    }\n    if (pt.tm > 1.5) pt.mode = 2, pt.tm = 0.6 + 0.6 * rnd();\n  } else if ((pt.tm -= d) \u003c= 0) pt.tgt = ++pt.k % 3 ? S.cf : min(n, S.cf + 1), pt.mode = 0;\n  // The stoker feeds the fire mouth.\n  fb.an = max(0, fb.an - d);\n  if ((fb.tm -= d) \u003c= 0) fb.tm = 3 + rnd(), fb.an = 0.5, throwTo(S, 0);\n  for (const l of S.logs) l.life -= d * (0.12 + 0.2 * T[l.c]);\n  S.logs = S.logs.filter((l) => l.life > 0);\n  // Black smoke up the chimney: at the top, a billow, a flare and sparks.\n  for (const s of S.slugs)\n    if ((s.y -= d * 30) \u003c TOP) {\n      s.done = 1;\n      for (let j = 0; j \u003c 3; j++) puff(S, S.CX + (rnd() - 0.5) * 3, TOP - 1 - j * 2, -6 - 4 * rnd(), 3 + rnd(), 0.6 + 0.6 * s.a, 1);\n      for (let j = 0; j \u003c 14 * s.a; j++) spark(S, 1.3);\n      S.flare = min(1.4, S.flare + s.a);\n    }\n  S.slugs = S.slugs.filter((s) => !s.done);\n  S.flare = max(0.15 + 0.35 * sm(0.6, 1, T[n]), S.flare * exp(-d * 1.6));\n  air(S, d);\n  // Ash and embers.\n  for (const m of S.motes) m.x = (m.x + (wind * 9 + 1 + 1.5 * sin(S.t * 0.7 + m.ph)) * d + 65) % 65, m.y = (m.y + (m.e ? -3.5 : 2.2) * d + 129) % 129;\n}\n\n// A grey plume that slows and spreads under the top of the panel, and sparks.\nfunction air(S, d) {\n  const { n, T, wind } = S;\n  for (S.np += d * 6; S.np >= 1; S.np--) puff(S, S.CX + (rnd() - 0.5) * 2, TOP - 1, -7 - 3 * rnd(), 3, 0.55 + 0.2 * T[n], 0);\n  for (const p of S.puffs) {\n    // A strong wind bends the plume over and draws it out downwind.\n    p.vy += (-3.5 * (1 - 0.55 * abs(wind)) * cl(p.y / 12, 0.3, 1) - p.vy) * d * 1.2;\n    p.y += p.vy * d;\n    p.x += (wind * 18 * (0.5 + 0.5 * cl((TOP - p.y) / TOP, 0, 1)) + 1.2 * sin(S.t * 0.9 + p.ph)) * d;\n    p.r = min(10 + p.k, p.r + d * (1.5 + 1.2 * p.k + 2 * cl((8 - p.y) / 8, 0, 1)));\n    p.a -= d * (0.05 + 0.04 * (1 - p.k));\n    p.hot = max(0, p.hot - d * 1.4);\n  }\n  S.puffs = S.puffs.filter((p) => p.a > 0.03 && p.y + p.r > -3 && p.x > -14 && p.x \u003c W + 14);\n  for (S.ns += d * (2 + 5 * T[n]) * (1 + 0.6 * wind); S.ns >= 1; S.ns--) spark(S, 1);\n  for (const p of S.sparks) {\n    p.vy += (-6 - p.vy) * d * 1.5;\n    p.vx += ((rnd() - 0.5) * 40 + (wind * 16 - p.vx) * 2) * d;\n    p.x += p.vx * d, p.y += p.vy * d, p.life -= d;\n  }\n  S.sparks = S.sparks.filter((p) => p.life > 0 && p.y > -1);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], n = cl(round(k[2]), 3, 6);\n  S.k1 = cl(k[0], -1, 1);\n  S.wind = cl(k[3], -1, 1);\n  if (n !== S.n) build(S, n);\n  // The kiln has been smoking for hours before you look.\n  if (!S.warm) {\n    S.warm = 1;\n    step(S, 0);\n    for (let j = 0; j \u003c 75; j++) air(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let c = 0; c \u003c= n; c++) throwTo(S, c, 0.05 * c);\n  step(S, cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2));\n}\n\nlet F;\nfunction put(x, y, c, a = 1, add = 0) {\n  x = floor(x), y = floor(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let i = 0, o = (y * W + x) * 3; i \u003c 3; i++) F[o + i] = add ? F[o + i] + c[i] * a : mix(F[o + i], c[i], a);\n}\nfunction glow(x, y, r, c, a) {\n  for (let Y = floor(y - r); Y \u003c= y + r; Y++) for (let X = floor(x - r); X \u003c= x + r; X++) put(X, Y, c, a * max(0, 1 - hypot(X + 0.5 - x, Y + 0.5 - y) / r) ** 2, 1);\n}\n\n// A figure nine LEDs tall, feet on row y, facing the kiln: white towel, indigo\n// jacket lit orange on the kiln side, paper lantern.\nfunction figure(x, y, pose, ph, rim, lamp) {\n  x = round(x), y = round(y);\n  const a = floor(ph * 6) & 1 ? -1 : 1, pts = [[-1, -8, TOWEL], [0, -8, TOWEL], [0, -7, FACE, 1]];\n  for (let dy = -6; dy \u003c= -4; dy++) pts.push([-1, dy, COAT], [0, dy, COAT], [1, dy, COAT, 1]);\n  const L = (l, b) => pts.push([l, -3, LEGS], [b, -2, LEGS], [b, -1, LEGS], [b, 0, LEGS]);\n  if (pose === 1 && a \u003c 0) L(0, 0);\n  else if (pose === 2) L(a, a), L(-a, -a), pts.push([a, -7, COAT, 1], [-a, -3, LEGS]);\n  else L(-1, -1), L(1, 1);\n  if (pose === 3) pts.push(...(ph \u003c 0.5 ? [[-1, -7, COAT], [-2, -8, COAT]] : [[2, -5, COAT, 1], [3, -5, FACE, 1]]));\n  for (const [dx, dy, c, k] of pts) put(x + dx, y + dy, k ? c.map((v, i) => mix(v, RIM[i], rim)) : c);\n  if (lamp) put(x - 2, y - 4, [120, 70, 40]), put(x - 2, y - 3, [255, 222, 150]), put(x - 2, y - 2, [240, 160, 80]), glow(x - 1.5, y - 2, 7, [70, 44, 16], 1);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  F = S.f;\n  const { n, t, kind, ch, V, bg, gw, Te, Br, g, wind, A, K, Q, q, age } = S, lean = wind * 2.2 + 0.8, fs = 1 + 0.45 * wind, fo = floor(t * fs * 17);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const k = kind[i], c = ch[i], x = i & 63, y = i >> 6, X = x + 0.5, Y = y + 0.5, T = Te[c], B = Br[c], v = V[i];\n    // Each LED: backdrop times m plus a ramp colour times b.\n    let j = lut(T * 0.7), b = 0, m = 0;\n    if (k \u003c= EARTH) m = 1, b = gw[i] * 0.28 * B;\n    else if (k === WALL) m = v ? 0.45 : 0.95, j = lut(T * 0.85 - 0.05), b = B * (v ? 0.5 : 0.1);\n    else if (k === GAS) {\n      let I = sm(0.25, 0.85, 0.65 * vn(X * 0.45 - lean * (0.3 + v) * 3 + c * 19, (Y + t * fs * 10) * 0.16) + 0.35 * fn(x, y + fo) + 0.25 * (1 - v) - 0.07);\n      // The firebox floor: a bed of embers under the logs.\n      if (!c && v \u003c 0.3) I = sm(0.35, 0.85, 0.7 * vn(X * 0.7, Y * 0.9 + t * 0.4) + 0.3 * vn(X * 1.7 + t, Y * 1.5) + 0.1);\n      // Darker flame is cooler, orange rather than grey. The firebox burns rougher.\n      const r = c ? 0.14 : 0.26;\n      j = lut(T - r + 2 * r * I), b = B * (1 - 2 * r + 2 * r * I);\n    } else if (k === POT) j = lut(T - 0.18), b = B * (0.32 + 0.22 * v + 0.14 * fn(x >> 1, y + (fo >> 1)));\n    else if (k === SHELF) j = lut(T - 0.2), b = B * 0.4;\n    else if (k === HOLE) j = lut(mix(Te[c - 1], T, 0.5) + 0.04), b = 0.85 + 0.15 * sin(t * 9 + x);\n    else {\n      // The flue: hot gas rising in bands, and each stoke's black smoke going up.\n      let dk = 0;\n      for (const s of S.slugs) dk = max(dk, s.a * exp(-(((Y - s.y) / 3) ** 2)));\n      j = lut(T - 0.12 - 0.2 * v + 0.1 * vn(X * 0.6, (Y + t * 22) * 0.3)), b = B * (0.6 + 0.3 * vn(X * 0.5 + 9, (Y + t * 26) * 0.2)) * (1 - 0.85 * dk);\n    }\n    for (let e = 0; e \u003c 3; e++) F[o + e] = bg[o + e] * m + LUT[j + e] * b;\n  }\n  for (const i of S.stars) for (let e = 0; e \u003c 3; e++) F[i * 3 + e] *= 0.75 + 0.25 * sin(t * 2.3 + i);\n\n  // Burning wood on the floors; in the firebox, thicker logs with their tops alight.\n  for (const l of S.logs)\n    for (let k = 0, T = Te[l.c], len = max(1, round(l.len * min(1, l.life * 1.6))); k \u003c len; k++) {\n      put(l.x + k, l.y, (k + floor(t * 4 + l.x)) % 3 ? lc(T - 0.45, 0.45) : lc(T + 0.1));\n      if (!l.c) put(l.x + k, l.y - 1, lc(T - 0.1 + 0.15 * sin(t * 7 + k + l.x)), 0.85);\n    }\n  for (const [lx, y0, y1] of S.lad) for (let y = floor(y0); y \u003c= y1; y++) put(lx - 1, y, WOOD, 0.7), put(lx + 1, y, WOOD, 0.7), y % 3 || put(lx, y, WOOD, 0.6);\n  for (let c = 1; c \u003c= n; c++) {\n    // The stoke hole, open while wood goes in, and the spy hole.\n    const T = Te[c], wx = floor(g[c].L - 1.5), sy = S.spy[c], fy = round(g[c].F), op = sm(0, 0.3, S.open[c]);\n    for (let y = fy - 3; y \u003c= fy - 2; y++) for (let x = wx; x \u003c= wx + 1; x++) put(x, y, op > 0.05 ? lc(T + 0.05, op) : lc(T - 0.3, 0.35));\n    if (op > 0.05) glow(wx - 1, fy - 2.5, 6, lc(T - 0.1), 0.35 * op);\n    put(wx, sy, lc(T, 0.9)), put(wx + 1, sy, lc(T));\n    for (let x = wx + 2; x \u003c= wx + 6; x++) put(x, sy + 2, lc(T - 0.2, 0.4));\n    // Three cones on a pad, each bending once the heat work passes its number.\n    for (let m = 0; m \u003c 3; m++) {\n      const b = sm(0.57 + 0.12 * m, 0.68 + 0.12 * m, S.Hc[c]), cx = wx + 2 + 2 * m + (b > 0.4), cc = lc(T - 0.15, 0.5);\n      put(cx - (b > 0.4), sy + 1, cc), put(cx, sy, cc, b \u003c 0.75 ? 1 : 0.5), put(cx, b \u003c 0.75 ? sy - 1 : sy + 1, cc);\n    }\n    // Flame out of the spy hole after a stoke, or whenever the wind chokes the chimney.\n    const s = max(q[c] * red(age[c]) * sm(0.15, 0.35, age[c]), 0.55 * q[c - 1] * red(age[c - 1] - 0.3) * sm(0.4, 0.6, age[c - 1])) + 0.3 * max(0, -wind) * (0.7 + 0.3 * sin(t * 3 + c));\n    if (s \u003c 0.05) continue;\n    const x0 = wx - 0.5, y0 = sy + 0.5, len = 2 + 9 * s * (0.8 + 0.2 * sin(t * 13 + c));\n    glow(x0, y0, 5, [120, 50, 10], s);\n    for (let j = 0; j \u003c len; j++) {\n      const u = j / len, x = x0 - j * (1 - 0.6 * max(0, wind)) + wind * j * 0.4, y = y0 - j * j * 0.06 - j * 0.15 + sin(t * 17 + j) * 0.4 * u;\n      put(x, y, lc(T + 0.45 - 0.6 * u), 1 - u * 0.3);\n      if (u \u003c 0.7) put(x, y - 1, lc(T + 0.25 - 0.6 * u), 0.8 - u), put(x, y + 1, lc(T + 0.1 - 0.6 * u), 0.5 - 0.5 * u);\n    }\n  }\n  const pt = S.pot, [px, py, climb] = posAt(S, pt.A), pose = pt.mode === 1 ? 3 : pt.mode ? 0 : climb ? 2 : 1;\n  figure(px, py, pose, pose === 3 ? (pt.tm % 0.7) / 0.7 : pt.ph, 0.25 + 0.6 * sm(0, 0.3, S.open[pt.tgt]) * (pose === 3), 1);\n  figure(1, 122, S.fb.an > 0 ? 3 : 0, 1 - S.fb.an / 0.5, 0.5 + 0.3 * sin(t * 7), 0);\n  glow(5, 120, 6, lc(Te[0] - 0.1), 0.35);\n\n  // Smoke: puffs summed, then shaded grey, lit from below, or black after a stoke.\n  A.fill(0), K.fill(0), Q.fill(0);\n  for (const p of S.puffs)\n    for (let y = max(0, floor(p.y - p.r)); y \u003c= min(63, p.y + p.r); y++)\n      for (let x = max(0, floor(p.x - p.r)); x \u003c= min(W - 1, p.x + p.r); x++) {\n        const dx = (x + 0.5 - p.x) / p.r, dy = (y + 0.5 - p.y) / p.r, w = p.a * (1 - dx * dx - dy * dy) ** 2, i = y * W + x;\n        if (dx * dx + dy * dy \u003c 1) A[i] += w, K[i] += w * p.k, Q[i] += w * p.hot;\n      }\n  for (let i = 0; i \u003c W * 64; i++) {\n    if (A[i] \u003c 0.01) continue;\n    const y = i >> 6, tx = 0.6 * vn((i & 63) * 0.25 - t * wind, y * 0.25 + t * 0.8) + 0.4 * fn(i, y + (fo >> 2)), gr = 0.7 + 0.5 * tx;\n    const al = min(0.95, (1 - exp(-A[i] * 2.2)) * (0.6 + 0.6 * tx)), dk = K[i] / A[i], hq = min(1, Q[i] / A[i]) * (0.4 + 0.6 * sm(30, 10, y));\n    const o = i * 3;\n    F[o] = mix(F[o], mix(118 * gr, 16, dk) + 160 * hq, al), F[o + 1] = mix(F[o + 1], mix(106 * gr, 11, dk) + 60 * hq, al), F[o + 2] = mix(F[o + 2], mix(104 * gr, 10, dk) + 14 * hq, al);\n  }\n  // Flame licking out of the chimney's mouth.\n  const fh = 2 + 7 * S.flare;\n  glow(S.CX, TOP, 6, [110, 40, 8], S.flare * 0.8);\n  for (let j = 0, u = 0; j \u003c fh; u = ++j / fh)\n    for (let e = -1; e \u003c 2; e++) (u \u003c 0.5 || !e) && put(S.CX + e + wind * j * 0.6 + sin(t * 11 + j) * 0.6 * u, TOP - 1 - j, lc(Te[n] - 0.05 - 0.45 * u - 0.2 * abs(e)), e ? 0.6 : 1 - 0.5 * u);\n  for (const p of S.sparks) put(p.x, p.y, lc(0.35 + 0.75 * (p.life / p.L)), min(1, p.life * 2));\n  for (const m of S.motes) put(m.x, m.y, m.e ? [230, 110, 30] : [80, 78, 84], m.e ? 0.5 + 0.4 * sin(t * 5 + m.ph) : 0.6);\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Firing=-1..1, Speed=0.2..3, Chambers=3..6, Draft=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Firing","min":-1,"max":1,"about":"The first day at -1: only the firebox burns hot, the chambers glow dull red. At 0 the lower chambers are white-yellow and the top one red; at 1, the last day, all are near white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the potter stokes every few seconds; 0.2 is ten times slower."},{"name":"Chambers","min":3,"max":6,"about":"Three to six chambers between the firebox and the chimney; with more, each is lower, with fewer shelves."},{"name":"Draft","min":-1,"max":1,"about":"Wind from the left at -1 to the right at 1 leans smoke, sparks and flames. Up the hill it pulls the fire hotter; down it, it chokes the chimney and the spy holes lick flame."}],"start":[0,2,3,0.06],"measures":{"motion":0.141,"detail":0.0581,"edges":0.3934,"complexity":1.5788,"coverage":0.9717,"colour":0.2311,"drift":0.0397},"knobResponse":[0.0974,0.0413,0.0659,0.0443]},{"slug":"one-bit","title":"One Bit","family":"pixel","round":17,"note":"달밤 바닷가 벼랑에 선 등대를 두 색과 Bayer 순서 디더링만으로 그린 1비트 화면이에요. 빛줄기가 돌고 구름이 달 앞을 지나고 안개 둑이 바다 위에서 오르내려도 한 프레임에 뒤집히는 픽셀은 열 개 안팎이에요. K1 이 앰버 단말기, 게임보이, 매킨토시, 전자잉크, 플레이데이트의 두 색을 골라요.","idea":"A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","layer":{"id":"layer-one-bit","type":"code","name":"one-bit","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver."},{"name":"Time","min":0.2,"max":3,"about":"How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still."},{"name":"Fog","min":0,"max":1,"about":"How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear."},{"name":"Wind","min":0,"max":1,"about":"At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff."}],"start":[0,2,0,0.06],"measures":{"motion":0.0337,"detail":0.3203,"edges":1,"complexity":0.0918,"coverage":0.242,"colour":0.3801,"drift":0.0416},"knobResponse":[0.2143,0.057,0.0812,0.0548]},{"slug":"op-stripes","title":"Op Stripes","family":"wave","round":1,"note":"브리짓 라일리 식의 두 색 가로줄이에요. 밑으로 지나가는 넓은 부풂 둘이 줄 간격을 벌려서 평평한 패널이 부푸는 것처럼 보여요.","idea":"Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-op-stripes","type":"code","name":"op-stripes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown."},{"name":"Drift","min":0.1,"max":6,"about":"How fast the bulges travel under the stripes and the bend rolls along them."},{"name":"Stripes","min":14,"max":26,"about":"Stripe pairs from top to bottom where nothing is swelling."},{"name":"Swell","min":0,"max":1,"about":"How far the stripes open over a bulge, from a soft swell to a wide flat lens."}],"start":[0,2,14,0.06],"measures":{"motion":0.0622,"detail":0.0792,"edges":1,"complexity":0.0654,"coverage":1,"colour":0.6118,"drift":0.0499},"knobResponse":[0.4596,0.1655,0.1894,0.1993]},{"slug":"origami","title":"Origami","family":"paper","round":26,"note":"어두운 호두나무 탁자의 램프 아래에서 청록 종이 한 장이 아홉 단계로 한 주름씩 접혀 종이학이 돼요. 학은 날개를 한 번 친 뒤 다시 펼쳐지고, 펼친 종이에는 산접기와 골접기의 주름 무늬가 남아요. K1 이 세이가이하 무늬 종이와 금박 같은 종이를 고르고, 누르면 학이 바로 펼쳐져요.","idea":"A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.","buttons":"K1 tap opens the crane flat now, or lays the next sheet if it is already open.","code":"// ===== Patternflow pattern =====\n// Title:   Origami\n// Family:  paper\n// Idea:    A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the orizuru, the paper crane folded from the bird base\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1\n//\n// Knob 1: Paper. Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which.\n// Knob 2: Speed. How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Sheets. How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3.\n// Knob 4: Lamp. Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way.\n// Buttons: K1 tap opens the crane flat now, or lays the next sheet if it is already open.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, hypot, log, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// The sheet is a diamond with corners (0, ±1) and (±1, 0), its crease-pattern\n// coordinates. K is where the petal fold's hinge crosses the square base and Q\n// is half the width of a leg once it is thinned.\nconst K = 1 - Math.SQRT1_2;\nconst Q = Math.SQRT1_2 * Math.tan(PI / 16);\n\n// An affine map [a, b, c, d, e, f]: x' = a x + b y + e, y' = c x + d y + f.\nconst mul = (M, A) => [\n  M[0] * A[0] + M[1] * A[2], M[0] * A[1] + M[1] * A[3],\n  M[2] * A[0] + M[3] * A[2], M[2] * A[1] + M[3] * A[3],\n  M[0] * A[4] + M[1] * A[5] + M[4], M[2] * A[4] + M[3] * A[5] + M[5],\n];\nconst tx = (A, c, j) => A[0] * c[j] + A[1] * c[j + 1] + A[4];\nconst ty = (A, c, j) => A[2] * c[j] + A[3] * c[j + 1] + A[5];\n// A flap turned by theta about the hinge through (hx, hy) with unit normal\n// (nx, ny) toward the flap, as seen from straight above: k = cos(theta) - 1.\n// At k = -2 the flap lies flat on the other side, mirrored.\nfunction hingeM(h, k) {\n  const [hx, hy, nx, ny] = h;\n  const hn = hx * nx + hy * ny;\n  return [1 + k * nx * nx, k * nx * ny, k * nx * ny, 1 + k * ny * ny, -k * hn * nx, -k * hn * ny];\n}\n\n// The crane. Each step is one or more folds: a crease line, a point on the\n// side that moves, which facets go (by the eighth of the sheet they came from\n// or where they lie now), and +1 for a valley fold that lands on top or -1\n// for one that goes behind.\nconst ALL = () => true;\nconst sec = (...s) => (f) => s.includes(f.sec);\nconst low = (...s) => (f, x, y) => y > K && s.includes(f.sec);\nconst legL = (f, x, y) => x \u003c 0 && y > K;\nconst legR = (f, x, y) => x > 0 && y > K;\n// The legs turn up about a line through (0, YP) along NL, so neck and tail\n// rise at 40 degrees.\nconst YP = 0.34;\nconst NL = [-0.906, 0.423];\nconst CRANE = [\n  // In half, corner to corner.\n  [{ l: [-1, 0, 1, 0], s: [0, -1], m: 1, sel: ALL }],\n  // Turned so the fold lies along the top.\n  [],\n  // The side corners down to the bottom one: the square base.\n  [{ l: [0, 0, -0.5, 0.5], s: [-1, 0], m: 1, sel: ALL }, { l: [0, 0, 0.5, 0.5], s: [1, 0], m: 1, sel: ALL }],\n  // Kite folds, the front layer to the front and the back one behind.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: 1, sel: sec(3) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: 1, sel: sec(0) },\n    { l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: sec(2) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: sec(1) }],\n  // The petal folds: front and back layers lift up past the top.\n  [{ l: [-1, K, 1, K], s: [0, 1], m: 1, sel: sec(0, 3) }, { l: [-1, K, 1, K], s: [0, 1], m: -1, sel: sec(1, 2) }],\n  // The sides of the middle layers tuck in: the bird base.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: low(4, 5) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: low(6, 7) }],\n  // The legs thinned.\n  [{ l: [0, 1, -Q, K], s: [-K, K], m: -1, sel: legL }, { l: [0, 1, Q, K], s: [K, K], m: -1, sel: legR }],\n  // The legs reverse-folded up into neck and tail.\n  [{ l: [0, YP, NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legL }, { l: [0, YP, -NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legR }],\n  // The tip of the neck reverse-folded down into the head.\n  [{ l: [-0.515, -0.013, -0.374, 0.004], s: [-0.506, -0.084], m: -1, sel: (f, x) => f.H[8] && x \u003c 0 }],\n];\n// Seconds per step at Speed 2, and how the sheet lies on the table at each\n// state: turned 45 degrees it is a square on the panel.\nconst DUR = [1.1, 0.7, 1.1, 0.8, 1.1, 0.8, 0.7, 1.0, 0.6];\nconst PHI = [PI / 4, PI / 4, 0, 0, 0, 0, 0, 0, 0, 0];\n// The finished crane flaps its front wing about the line it was lifted on.\nconst FLAPH = [0, K, 0, -1, 1];\n\n// A crease as a point on it and its unit normal toward the side that moves.\nfunction lineOf(mv) {\n  const [x1, y1, x2, y2] = mv.l;\n  const l = hypot(x2 - x1, y2 - y1) * ((mv.s[0] - x1) * (y1 - y2) + (mv.s[1] - y1) * (x2 - x1) \u003c 0 ? -1 : 1);\n  return [x1, y1, (y1 - y2) / l, (x2 - x1) / l];\n}\n\n// Cut a convex polygon by the sign of d, keeping the side s.\nfunction clip(cp, d, s) {\n  const out = [];\n  d.forEach((v, i) => {\n    const j = (i + 1) % d.length;\n    const a = v * s;\n    const b = d[j] * s;\n    const t = a / (a - b);\n    if (a >= 0) out.push(cp[2 * i], cp[2 * i + 1]);\n    if (a * b \u003c 0) out.push(cp[2 * i] + t * (cp[2 * j] - cp[2 * i]), cp[2 * i + 1] + t * (cp[2 * j + 1] - cp[2 * i + 1]));\n  });\n  return out;\n}\n\n// Fold the sheet through every step once, cutting facets along each crease\n// they cross. Each facet keeps where it lies, which way up and in which layer\n// at every state, so any moment of the folding and unfolding is a lookup.\nfunction build(steps) {\n  const C = [[1, 0], [0.5, 0.5], [0, 1], [-0.5, 0.5], [-1, 0], [-0.5, -0.5], [0, -1], [0.5, -0.5]];\n  const F = C.map((c, s) => ({ cp: [0, 0, c[0], c[1], ...C[(s + 1) % 8]], sec: s, T: [[1, 0, 0, 1, 0, 0]], L: [0], H: [null] }));\n  const n = steps.length;\n  for (let k = 1; k \u003c= n; k++) {\n    const top = max(...F.map((f) => f.L[k - 1]));\n    const bot = min(...F.map((f) => f.L[k - 1]));\n    for (const f of F) (f.T[k] = f.T[k - 1]), (f.L[k] = f.L[k - 1]), (f.H[k] = null);\n    for (const mv of steps[k - 1]) {\n      const h = lineOf(mv);\n      const [px, py, nx, ny] = h;\n      const moved = [];\n      for (const f of F.slice()) {\n        if (f.H[k]) continue;\n        const A = f.T[k - 1];\n        const cp = f.cp;\n        const m = cp.length / 2;\n        let cx = 0;\n        let cy = 0;\n        const d = [];\n        for (let j = 0; j \u003c 2 * m; j += 2) {\n          const x = tx(A, cp, j);\n          const y = ty(A, cp, j);\n          (cx += x / m), (cy += y / m);\n          const dd = (x - px) * nx + (y - py) * ny;\n          d.push(abs(dd) \u003c 1e-9 ? 0 : dd);\n        }\n        if (!mv.sel(f, cx, cy) || max(...d) \u003c 1e-6) continue;\n        let g = f;\n        if (min(...d) \u003c -1e-6) {\n          g = { cp: clip(cp, d, 1), sec: f.sec, T: f.T.slice(), L: f.L.slice(), H: f.H.slice() };\n          f.cp = clip(cp, d, -1);\n          F.push(g);\n        }\n        moved.push(g);\n      }\n      let lo = 1e9;\n      let hi = -1e9;\n      for (const g of moved) (lo = min(lo, g.L[k - 1])), (hi = max(hi, g.L[k - 1]));\n      for (const g of moved) {\n        g.T[k] = mul(hingeM(h, -2), g.T[k - 1]);\n        g.H[k] = [px, py, nx, ny, mv.m];\n        g.L[k] = mv.m > 0 ? top + 1 + hi - g.L[k - 1] : bot - 1 - (g.L[k - 1] - lo);\n      }\n    }\n  }\n  // Facets that lie together at a state share a group there: a crease shows\n  // between two facets that lie together now but were parted at the deepest\n  // fold.\n  // And the extent of each state, turned as it lies, for the camera.\n  const nf = F.length;\n  const gid = new Int32Array(nf * (n + 1));\n  const det = new Int8Array(nf * (n + 1));\n  const box = [];\n  for (let k = 0; k \u003c= n; k++) {\n    const seen = new Map();\n    const c = cos(PHI[k]);\n    const s = sin(PHI[k]);\n    const b = [1e9, -1e9, 1e9, -1e9];\n    F.forEach((f, i) => {\n      const A = f.T[k];\n      const key = A.map((v) => round(v * 1e4)).join();\n      if (!seen.has(key)) seen.set(key, seen.size);\n      gid[i * (n + 1) + k] = seen.get(key);\n      det[i * (n + 1) + k] = A[0] * A[3] - A[1] * A[2] > 0 ? 1 : -1;\n      for (let j = 0; j \u003c f.cp.length; j += 2) {\n        const x = tx(A, f.cp, j);\n        const y = ty(A, f.cp, j);\n        const u = x * c - y * s;\n        const v = x * s + y * c;\n        (b[0] = min(b[0], u)), (b[1] = max(b[1], u)), (b[2] = min(b[2], v)), (b[3] = max(b[3], v));\n      }\n    });\n    const u = (b[0] + b[1]) / 2;\n    const v = (b[2] + b[3]) / 2;\n    box.push([u * c + v * s, -u * s + v * c, b[1] - b[0], b[3] - b[2]]);\n  }\n  const tilt = F32(nf * 2);\n  for (let i = 0; i \u003c nf * 2; i++) tilt[i] = Math.random() - 0.5;\n  return { F, n, gid, det, box, tilt };\n}\n\n// Papers: colour, second colour, print. 0 plain kami, 1 seigaiha waves,\n// 2 metal foil, 3 kanoko dots, 4 ichimatsu checks.\nconst PAPERS = [\n  [[0.16, 0.72, 0.8], null, 0],\n  [[0.13, 0.2, 0.58], [0.78, 0.86, 0.96], 1],\n  [[1, 0.78, 0.3], null, 2],\n  [[0.96, 0.46, 0.6], [1, 0.95, 0.96], 3],\n  [[0.98, 0.78, 0.12], null, 0],\n  [[0.12, 0.46, 0.26], [0.94, 0.88, 0.7], 4],\n  [[0.74, 0.78, 0.84], null, 2],\n  [[0.9, 0.16, 0.12], null, 0],\n];\nconst WHITE = [0.95, 0.93, 0.87];\n\nfunction print(kind, s, t) {\n  if (kind === 1) {\n    // Rows of scales two wide, each row half a scale lower and covering the one above.\n    const X = s * 3;\n    const Y = t * 3;\n    const j = ceil(2 * Y);\n    for (let jj = j + 1; jj >= j; jj--) {\n      const ox = jj & 1;\n      const dx = X - ox - 2 * round((X - ox) / 2);\n      const dy = Y - jj / 2;\n      const r = sqrt(dx * dx + dy * dy);\n      if (r \u003c 1 || jj === j) return (r * 3) % 1 \u003c 0.4 ? 1 : 0;\n    }\n  }\n  if (kind === 3) {\n    const X = s * 5;\n    const Y = t * 5;\n    const ox = floor(Y) & 1 ? 0.5 : 0;\n    const dx = X + ox - floor(X + ox) - 0.5;\n    const dy = Y - floor(Y) - 0.5;\n    return dx * dx + dy * dy \u003c 0.06 ? 1 : 0;\n  }\n  if (kind === 4) return (floor(s * 4 + 4) + floor(t * 4 + 4)) & 1;\n  return 0;\n}\n\n// The order a sheet goes through.\nconst WAIT = 0, IN = 1, REST = 2, FOLD = 3, HOLD = 4, SIT = 5, UNFOLD = 6, CREASE = 7;\n\nconst newSheet = (sl, first) =>\n  Object.assign(sl, { old: first ? null : { seq: sl.seq, kmax: sl.kmax }, seq: sl.seq + 1, ph: IN, pt: 0, k: 0, u: 1, kmax: 0, rush: false });\nconst slot = (i) => ({ i, ph: WAIT, pt: -2.4 * i, k: 0, u: 1, kmax: 0, seq: -1, old: null, rush: false });\nconst F32 = (n) => new Float32Array(n);\n\nexport function setup(params) {\n  const grain = F32(N);\n  for (let y = 0; y \u003c H; y++) {\n    let w = Math.random();\n    for (let x = 0; x \u003c W; x++) {\n      w += 0.25 * (Math.random() - 0.5);\n      grain[y * W + x] = 0.75 + 0.2 * sin(y * 0.9 + 3 * sin(x * 0.05 + y * 0.02)) + 0.1 * w;\n    }\n  }\n  params.s = { M: build(CRANE), slots: [slot(0)], n: 1, base: 0, rate: 1, lamp: 0.06, lampKey: null, grain, bg: F32(N * 3) };\n  for (const k of [\"LX\", \"LY\", \"LZ\", \"LI\", \"HZ\"]) params.s[k] = F32(N);\n}\n\nfunction stepSlot(sl, h, M) {\n  if (sl.rush && (sl.ph === UNFOLD || sl.ph === CREASE)) h *= 4;\n  sl.pt += h;\n  const ph = sl.ph;\n  if (ph === WAIT && sl.pt >= 0) newSheet(sl, true);\n  else if (ph === IN && sl.pt >= 1.2) Object.assign(sl, { ph: REST, pt: 0, old: null });\n  else if (ph === REST && sl.pt >= 1) Object.assign(sl, { ph: FOLD, k: 1, u: 0 });\n  else if (ph === FOLD) {\n    sl.u = min(1, sl.u + h / DUR[sl.k - 1]);\n    if (sl.u >= 1) Object.assign(sl, { kmax: max(sl.kmax, sl.k), ph: HOLD, pt: 0 });\n  } else if (ph === HOLD && sl.pt >= 0.25) {\n    if (sl.k \u003c M.n) Object.assign(sl, { k: sl.k + 1, u: 0, ph: FOLD });\n    else Object.assign(sl, { ph: SIT, pt: 0 });\n  } else if (ph === SIT && sl.pt >= 3) sl.ph = UNFOLD;\n  else if (ph === UNFOLD && (sl.u -= h / 0.45) \u003c= 0) {\n    if (sl.k > 1) (sl.k--), (sl.u += 1);\n    else Object.assign(sl, { k: 0, u: 1, ph: CREASE, pt: 0 });\n  } else if (ph === CREASE && (sl.pt >= 2.5 || sl.rush)) newSheet(sl, false);\n}\n\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.base = floor(cl(k[0], 0, 1) * (PAPERS.length - 0.01));\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.lamp = cl(k[3], -1, 1);\n  const n = cl(round(k[2]), 1, 3);\n  if (n !== S.n) {\n    S.n = n;\n    while (S.slots.length \u003c n) S.slots.push(slot(S.slots.length));\n    S.slots.length = n;\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sl of S.slots) {\n      if (sl.ph === FOLD || sl.ph === HOLD || sl.ph === SIT) {\n        if (sl.ph !== FOLD) sl.u = 1;\n        sl.kmax = max(sl.kmax, sl.k);\n        sl.ph = UNFOLD;\n      } else if (sl.ph !== WAIT) {\n        if (sl.ph === UNFOLD || sl.ph === CREASE) sl.rush = true;\n        else newSheet(sl, false);\n      }\n    }\n  for (const sl of S.slots) stepSlot(sl, dt * S.rate, S.M);\n}\n\n// The lamp: a bulb LH above the table at (lx, LY0). Each LED keeps the unit\n// vector to it, the half vector's height for the shine on foil, and how much\n// light reaches it. The table is dark walnut, kept below 24 of 255; on it lie\n// the pack of paper, the next sheet on top, and a bone folder.\nconst LH = 80;\nconst LY0 = 34;\nconst PC = cos(-0.2);\nconst PS = sin(-0.2);\nfunction lampField(S, next) {\n  const lx = 31.5 + 44 * S.lamp;\n  const { LX, LY, LZ, LI, HZ, bg, grain } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = lx - x - 0.5;\n      const dy = LY0 - y - 0.5;\n      const r2 = dx * dx + dy * dy;\n      const l = sqrt(r2 + LH * LH);\n      LX[p] = dx / l;\n      LY[p] = dy / l;\n      LZ[p] = LH / l;\n      LI[p] = (LH * LH) / (LH * LH + 0.4 * r2);\n      HZ[p] = (LZ[p] + 1) / sqrt(LX[p] * LX[p] + LY[p] * LY[p] + (LZ[p] + 1) * (LZ[p] + 1));\n      const lit = LI[p] * (0.22 + 0.9 * LZ[p]);\n      const w = min(21, 255 * 0.085 * (0.25 + 0.75 * LI[p]) * grain[p]);\n      let c = [w, w * 0.56, w * 0.32];\n      // The pack: four sheets a little askew, each showing an edge of its colour.\n      for (let j = 0; j \u003c 4; j++) {\n        const X = x + 0.5 + 1 - 0.9 * j;\n        const Y = y + 0.5 - 1 - 1.3 * j;\n        const u = (X * PC + Y * PS) / 13;\n        const v = (Y * PC - X * PS) / 13;\n        if (abs(u) \u003c 1 && abs(v) \u003c 1) {\n          const P = PAPERS[(next + j) % PAPERS.length];\n          const col = P[2] !== 2 && print(P[2], u, v) ? P[1] : P[0];\n          const e = (abs(u) > 0.92 || abs(v) > 0.92 ? 0.7 : 1) * (j ? 0.8 : 1) * (P[2] === 2 ? 0.75 : 1);\n          c = col.map((v) => 255 * v * lit * e);\n          break;\n        }\n      }\n      // The bone folder, rounded at both ends, its back catching the lamp.\n      const ax = x + 0.5 - 47;\n      const ay = y + 0.5 - 118;\n      const t = cl((ax * 14 - ay * 15) / 421, 0, 1);\n      const d = hypot(ax - 14 * t, ay + 15 * t);\n      if (d \u003c 1.7) c = [0.8, 0.74, 0.62].map((v) => 255 * v * lit * (0.75 + 0.35 * (1 - d / 1.7)));\n      bg[p * 3] = c[0];\n      bg[p * 3 + 1] = c[1];\n      bg[p * 3 + 2] = c[2];\n    }\n  S.lp = [lx, LY0, LH];\n}\n\n// Per frame: every facet on the table, as drawn.\n// RA maps it from the crease pattern to the panel, RN is its lit normal, RK\n// its draw order; RS the side up, RP the paper, RQ the sheet; RG and RX its\n// group now and at the deepest fold, RU and RL its side and layer there.\nconst MAXR = 1600;\nconst [RA, RN, RK, RL, RM] = [6, 3, 1, 1, 1].map((k) => F32(MAXR * k));\nconst [RS, RU] = [new Int8Array(MAXR), new Int8Array(MAXR)];\nconst [RP, RQ, RG, RX] = [0, 0, 0, 0].map(() => new Int32Array(MAXR));\nconst ORD = [];\nconst RCP = [];\nconst ID = new Int16Array(N);\nconst SHK = F32(N);\nconst VX = F32(64);\nconst VY = F32(64);\nlet nr = 0;\n\n// Fill a convex polygon with v; mode 0 writes facet ids, mode 1 raises the\n// shadow key.\nfunction fill(cnt, v, mode) {\n  let ya = 1e9;\n  let yb = -1e9;\n  for (let i = 0; i \u003c cnt; i++) (ya = min(ya, VY[i])), (yb = max(yb, VY[i]));\n  const y0 = max(0, ceil(ya - 0.5));\n  const y1 = min(H - 1, floor(yb - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 1e9;\n    let xr = -1e9;\n    for (let i = 0; i \u003c cnt; i++) {\n      const j = i + 1 \u003c cnt ? i + 1 : 0;\n      const ay = VY[i];\n      const by = VY[j];\n      if ((ay \u003c= py && by > py) || (by \u003c= py && ay > py)) {\n        const x = VX[i] + ((py - ay) / (by - ay)) * (VX[j] - VX[i]);\n        (xl = min(xl, x)), (xr = max(xr, x));\n      }\n    }\n    const x0 = max(0, ceil(xl - 0.5));\n    const x1 = min(W - 1, floor(xr - 0.5));\n    const row = y * W;\n    if (mode === 0) for (let x = x0; x \u003c= x1; x++) ID[row + x] = v;\n    else for (let x = x0; x \u003c= x1; x++) if (SHK[row + x] \u003c v) SHK[row + x] = v;\n  }\n}\n\n// The camera for state j of a sheet in its slot: turned PHI[j], scaled to fit.\nfunction viewOf(M, j, fw, fh, zmax) {\n  const b = M.box[j];\n  return [PHI[j], log(min(fw / b[2], fh / b[3], zmax)), b[0], b[1]];\n}\n\n// Put one sheet on the table: model M at step k, progress u, in slot\n// region (cy, fw, fh), paper index pi. dx and dphi slide a new sheet in.\nfunction placeSheet(S, M, k, u, flap, kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, keyBase, mem, qid) {\n  const n1 = M.n + 1;\n  const go = k > 0 && u > 0 && u \u003c 1;\n  const jb = k === 0 ? 0 : u >= 1 ? k : k - 1;\n  const a = viewOf(M, k > 0 ? k - 1 : 0, fw, fh, zmax);\n  const b = viewOf(M, k, fw, fh, zmax);\n  const w = k > 0 ? ease(u) : 1;\n  const phi = mix(a[0], b[0], w) + dphi;\n  const z = exp(mix(a[1], b[1], w));\n  const ccx = mix(a[2], b[2], w);\n  const ccy = mix(a[3], b[3], w);\n  const c = cos(phi) * z;\n  const s = sin(phi) * z;\n  const V = [c, -s, s, c, 31.5 + dx - (c * ccx - s * ccy), cyp + dy - (s * ccx + c * ccy)];\n  const [lx, ly, lh] = S.lp;\n  M.F.forEach((f, i) => {\n    if (nr >= MAXR) return;\n    const r = nr++;\n    // The hinge this facet turns on now, if any: the fold under way, or the\n    // finished crane's wing beat.\n    let hg = null;\n    let th = 0;\n    if (go && f.H[k]) (hg = f.H[k]), (th = PI * ease(u));\n    else if (flap > 0 && (f.sec === 0 || f.sec === 3)) (hg = FLAPH), (th = flap);\n    const A0 = f.T[jb];\n    const ct = cos(th);\n    const st = sin(th);\n    const A = mul(V, hg ? mul(hingeM(hg, ct - 1), A0) : A0);\n    RA.set(A, r * 6);\n    RCP[r] = f.cp;\n    let side = M.det[i * n1 + jb];\n    let nx = 0;\n    let ny = 0;\n    let nz = 1;\n    let key = f.L[jb];\n    if (hg) {\n      const m = hg[4];\n      // The hinge normal as it lies on the panel.\n      const hx = hg[2] * cos(phi) - hg[3] * sin(phi);\n      const hy = hg[2] * sin(phi) + hg[3] * cos(phi);\n      nx = -m * st * hx;\n      ny = -m * st * hy;\n      nz = ct;\n      if (ct \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz), (side = -side);\n      key = (m > 0 ? 1e6 : -1e6) + (ct >= 0 ? f.L[jb] : go ? f.L[k] : -f.L[jb]);\n      // A lifted flap throws its shadow away from the lamp.\n      if (m > 0 && st > 0.02) {\n        const cp = f.cp;\n        const cnt = cp.length / 2;\n        for (let j = 0; j \u003c cnt; j++) {\n          const hz = (((tx(A0, cp, 2 * j) - hg[0]) * hg[2] + (ty(A0, cp, 2 * j) - hg[1]) * hg[3]) * st * z) / lh;\n          const px = tx(A, cp, 2 * j);\n          const py = ty(A, cp, 2 * j);\n          VX[j] = px + hz * (px - lx);\n          VY[j] = py + hz * (py - ly);\n        }\n        fill(cnt, keyBase + key, 1);\n      }\n    }\n    // Paper never lies quite flat: each layer tips a little its own way, and a\n    // sheet opened out again keeps a tilt in every facet between its creases.\n    const g = M.gid[i * n1 + jb];\n    nx += 0.06 * M.tilt[2 * g] + 0.12 * mem * M.tilt[2 * i + 1];\n    ny += 0.06 * M.tilt[2 * g + 1] + 0.12 * mem * M.tilt[2 * i];\n    const nl = hypot(nx, ny, nz);\n    RN[r * 3] = nx / nl;\n    RN[r * 3 + 1] = ny / nl;\n    RN[r * 3 + 2] = nz / nl;\n    RS[r] = side;\n    RK[r] = keyBase + key;\n    RP[r] = pi;\n    RG[r] = g;\n    RX[r] = M.gid[i * n1 + kmax];\n    RU[r] = M.det[i * n1 + kmax];\n    RL[r] = f.L[kmax];\n    RQ[r] = qid;\n    RM[r] = mem;\n    ORD.push(r);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const next = (S.base + S.slots[0].seq + 1) % PAPERS.length;\n  const lk = S.lamp + 10 * next;\n  if (S.lampKey !== lk) (S.lampKey = lk), lampField(S, next);\n  const { M, LX, LY, LZ, LI, HZ, bg } = S;\n  nr = 0;\n  ORD.length = 0;\n  SHK.fill(-1e12);\n  const n = S.slots.length;\n  const sh = H / n;\n  const zmax = [74, 50, 34][n - 1];\n  const fw = n === 1 ? 60 : n === 2 ? 56 : 46;\n  const fh = sh - (n === 1 ? 12 : 8);\n  let q = 0;\n  for (const sl of S.slots) {\n    if (sl.ph === WAIT) continue;\n    const cyp = sl.i * sh + sh / 2;\n    const pi = (S.base + 3 * sl.i + sl.seq) % PAPERS.length;\n    if (sl.old) placeSheet(S, M, 0, 1, 0, sl.old.kmax, (S.base + 3 * sl.i + sl.old.seq) % PAPERS.length, cyp, fw, fh, zmax, 0, 0, 0, -1e8, 1, q++);\n    let dx = 0;\n    let dy = 0;\n    let dphi = 0;\n    if (sl.ph === IN) {\n      // Slid off the pack in the corner.\n      const e = 1 - ease(sl.pt / 1.2);\n      dx = -62 * e;\n      dy = (8 - cyp) * e;\n      dphi = -0.2 * e;\n    }\n    let flap = 0;\n    if (sl.ph === SIT) {\n      // The crane beats its wing once.\n      const t = (sl.pt - 0.6) / 1.6;\n      if (t > 0 && t \u003c 1) flap = 0.78 * PI * sin(PI * t) ** 2;\n    }\n    const mem = sl.ph === UNFOLD || sl.ph === CREASE ? 1 : 0;\n    placeSheet(S, M, sl.k, sl.u, flap, sl.kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, 0, mem, q++);\n  }\n  ORD.sort((a, b) => RK[a] - RK[b]);\n  ID.fill(-1);\n  for (const r of ORD) {\n    const cp = RCP[r];\n    const A = RA.subarray(r * 6, r * 6 + 6);\n    for (let j = 0; j \u003c cp.length; j += 2) (VX[j / 2] = tx(A, cp, j)), (VY[j / 2] = ty(A, cp, j));\n    fill(cp.length / 2, r, 0);\n  }\n  const lx = S.lp[0];\n  const sx = lx \u003c 31.5 ? -1 : 1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const r = ID[p];\n      if (r \u003c 0) {\n        const f = SHK[p] > -1e11 ? 0.55 : 1;\n        display.setPixel(x, y, bg[p * 3] * f, bg[p * 3 + 1] * f, bg[p * 3 + 2] * f);\n      } else {\n        // The print, found back in the crease pattern: paper square s, t in -1..1.\n        const o = r * 6;\n        const [a, b, c, d] = [RA[o], RA[o + 1], RA[o + 2], RA[o + 3]];\n        const det = a * d - b * c;\n        const P = PAPERS[RP[r]];\n        let col = P[0];\n        let kind = P[2];\n        if (RS[r] \u003c 0) (col = WHITE), (kind = -1);\n        else if (P[1] && abs(det) > 1e-3) {\n          const X = x + 0.5 - RA[o + 4];\n          const Y = y + 0.5 - RA[o + 5];\n          const cu = (d * X - b * Y) / det;\n          const cv = (a * Y - c * X) / det;\n          if (print(kind, cu + cv, cv - cu)) col = P[1];\n        }\n        const nz = RN[r * 3 + 2];\n        const I = LI[p];\n        const hz = max(0, nz * HZ[p]);\n        // Kami is matte with a little sheen; foil is darker but throws the lamp back.\n        const fo = kind === 2;\n        const lit = I * (0.22 + 0.9 * max(0, RN[r * 3] * LX[p] + RN[r * 3 + 1] * LY[p] + nz * LZ[p])) * (fo ? 0.8 : 1);\n        const sp = I * (fo ? 0.25 + 0.9 * hz ** 12 : 0.06 * hz ** 8);\n        // Shade under a lifted flap, and along the edge of a layer above.\n        const k = RK[r];\n        let f = SHK[p] > k ? 0.55 : 1;\n        const s = x - sx >= 0 && x - sx \u003c W && y > 0 ? ID[p - W - sx] : -1;\n        if (s >= 0 && RQ[s] === RQ[r] && RK[s] > k + 0.5 && RG[s] !== RG[r]) f *= 0.66;\n        // Creases left from the folding.\n        if (RM[r] > 0) {\n          for (const s of [x + 1 \u003c W ? ID[p + 1] : -1, y + 1 \u003c H ? ID[p + W] : -1])\n            if (s >= 0 && s !== r && RQ[s] === RQ[r] && RG[s] === RG[r] && RX[s] !== RX[r]) {\n              const up = RL[s] > RL[r] ? s : r;\n              f *= RU[up] * RS[r] > 0 ? 1.22 : 0.72;\n              break;\n            }\n        }\n        const m = 255 * f * (fo ? lit + sp : lit);\n        const e = fo ? 0 : 255 * f * sp;\n        display.setPixel(x, y, min(255, col[0] * m + e), min(255, col[1] * m + e), min(255, col[2] * m + e));\n      }\n    }\n}\n","layer":{"id":"layer-origami","type":"code","name":"origami","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Origami\n// Family:  paper\n// Idea:    A square of origami paper lies on a dark table under a lamp and folds into a crane one crease at a time, each flap swinging over with the light sliding across its face and the white back turning up, then the crane opens flat again and its crease pattern glows faintly before the next sheet is laid on top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the orizuru, the paper crane folded from the bird base\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1\n//\n// Knob 1: Paper. Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which.\n// Knob 2: Speed. How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Sheets. How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3.\n// Knob 4: Lamp. Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way.\n// Buttons: K1 tap opens the crane flat now, or lays the next sheet if it is already open.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, abs, hypot, log, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (x) => (x \u003c= 0 ? 0 : x >= 1 ? 1 : x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// The sheet is a diamond with corners (0, ±1) and (±1, 0), its crease-pattern\n// coordinates. K is where the petal fold's hinge crosses the square base and Q\n// is half the width of a leg once it is thinned.\nconst K = 1 - Math.SQRT1_2;\nconst Q = Math.SQRT1_2 * Math.tan(PI / 16);\n\n// An affine map [a, b, c, d, e, f]: x' = a x + b y + e, y' = c x + d y + f.\nconst mul = (M, A) => [\n  M[0] * A[0] + M[1] * A[2], M[0] * A[1] + M[1] * A[3],\n  M[2] * A[0] + M[3] * A[2], M[2] * A[1] + M[3] * A[3],\n  M[0] * A[4] + M[1] * A[5] + M[4], M[2] * A[4] + M[3] * A[5] + M[5],\n];\nconst tx = (A, c, j) => A[0] * c[j] + A[1] * c[j + 1] + A[4];\nconst ty = (A, c, j) => A[2] * c[j] + A[3] * c[j + 1] + A[5];\n// A flap turned by theta about the hinge through (hx, hy) with unit normal\n// (nx, ny) toward the flap, as seen from straight above: k = cos(theta) - 1.\n// At k = -2 the flap lies flat on the other side, mirrored.\nfunction hingeM(h, k) {\n  const [hx, hy, nx, ny] = h;\n  const hn = hx * nx + hy * ny;\n  return [1 + k * nx * nx, k * nx * ny, k * nx * ny, 1 + k * ny * ny, -k * hn * nx, -k * hn * ny];\n}\n\n// The crane. Each step is one or more folds: a crease line, a point on the\n// side that moves, which facets go (by the eighth of the sheet they came from\n// or where they lie now), and +1 for a valley fold that lands on top or -1\n// for one that goes behind.\nconst ALL = () => true;\nconst sec = (...s) => (f) => s.includes(f.sec);\nconst low = (...s) => (f, x, y) => y > K && s.includes(f.sec);\nconst legL = (f, x, y) => x \u003c 0 && y > K;\nconst legR = (f, x, y) => x > 0 && y > K;\n// The legs turn up about a line through (0, YP) along NL, so neck and tail\n// rise at 40 degrees.\nconst YP = 0.34;\nconst NL = [-0.906, 0.423];\nconst CRANE = [\n  // In half, corner to corner.\n  [{ l: [-1, 0, 1, 0], s: [0, -1], m: 1, sel: ALL }],\n  // Turned so the fold lies along the top.\n  [],\n  // The side corners down to the bottom one: the square base.\n  [{ l: [0, 0, -0.5, 0.5], s: [-1, 0], m: 1, sel: ALL }, { l: [0, 0, 0.5, 0.5], s: [1, 0], m: 1, sel: ALL }],\n  // Kite folds, the front layer to the front and the back one behind.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: 1, sel: sec(3) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: 1, sel: sec(0) },\n    { l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: sec(2) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: sec(1) }],\n  // The petal folds: front and back layers lift up past the top.\n  [{ l: [-1, K, 1, K], s: [0, 1], m: 1, sel: sec(0, 3) }, { l: [-1, K, 1, K], s: [0, 1], m: -1, sel: sec(1, 2) }],\n  // The sides of the middle layers tuck in: the bird base.\n  [{ l: [0, 1, -K, K], s: [-0.5, 0.5], m: -1, sel: low(4, 5) }, { l: [0, 1, K, K], s: [0.5, 0.5], m: -1, sel: low(6, 7) }],\n  // The legs thinned.\n  [{ l: [0, 1, -Q, K], s: [-K, K], m: -1, sel: legL }, { l: [0, 1, Q, K], s: [K, K], m: -1, sel: legR }],\n  // The legs reverse-folded up into neck and tail.\n  [{ l: [0, YP, NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legL }, { l: [0, YP, -NL[0], YP + NL[1]], s: [0, 1], m: -1, sel: legR }],\n  // The tip of the neck reverse-folded down into the head.\n  [{ l: [-0.515, -0.013, -0.374, 0.004], s: [-0.506, -0.084], m: -1, sel: (f, x) => f.H[8] && x \u003c 0 }],\n];\n// Seconds per step at Speed 2, and how the sheet lies on the table at each\n// state: turned 45 degrees it is a square on the panel.\nconst DUR = [1.1, 0.7, 1.1, 0.8, 1.1, 0.8, 0.7, 1.0, 0.6];\nconst PHI = [PI / 4, PI / 4, 0, 0, 0, 0, 0, 0, 0, 0];\n// The finished crane flaps its front wing about the line it was lifted on.\nconst FLAPH = [0, K, 0, -1, 1];\n\n// A crease as a point on it and its unit normal toward the side that moves.\nfunction lineOf(mv) {\n  const [x1, y1, x2, y2] = mv.l;\n  const l = hypot(x2 - x1, y2 - y1) * ((mv.s[0] - x1) * (y1 - y2) + (mv.s[1] - y1) * (x2 - x1) \u003c 0 ? -1 : 1);\n  return [x1, y1, (y1 - y2) / l, (x2 - x1) / l];\n}\n\n// Cut a convex polygon by the sign of d, keeping the side s.\nfunction clip(cp, d, s) {\n  const out = [];\n  d.forEach((v, i) => {\n    const j = (i + 1) % d.length;\n    const a = v * s;\n    const b = d[j] * s;\n    const t = a / (a - b);\n    if (a >= 0) out.push(cp[2 * i], cp[2 * i + 1]);\n    if (a * b \u003c 0) out.push(cp[2 * i] + t * (cp[2 * j] - cp[2 * i]), cp[2 * i + 1] + t * (cp[2 * j + 1] - cp[2 * i + 1]));\n  });\n  return out;\n}\n\n// Fold the sheet through every step once, cutting facets along each crease\n// they cross. Each facet keeps where it lies, which way up and in which layer\n// at every state, so any moment of the folding and unfolding is a lookup.\nfunction build(steps) {\n  const C = [[1, 0], [0.5, 0.5], [0, 1], [-0.5, 0.5], [-1, 0], [-0.5, -0.5], [0, -1], [0.5, -0.5]];\n  const F = C.map((c, s) => ({ cp: [0, 0, c[0], c[1], ...C[(s + 1) % 8]], sec: s, T: [[1, 0, 0, 1, 0, 0]], L: [0], H: [null] }));\n  const n = steps.length;\n  for (let k = 1; k \u003c= n; k++) {\n    const top = max(...F.map((f) => f.L[k - 1]));\n    const bot = min(...F.map((f) => f.L[k - 1]));\n    for (const f of F) (f.T[k] = f.T[k - 1]), (f.L[k] = f.L[k - 1]), (f.H[k] = null);\n    for (const mv of steps[k - 1]) {\n      const h = lineOf(mv);\n      const [px, py, nx, ny] = h;\n      const moved = [];\n      for (const f of F.slice()) {\n        if (f.H[k]) continue;\n        const A = f.T[k - 1];\n        const cp = f.cp;\n        const m = cp.length / 2;\n        let cx = 0;\n        let cy = 0;\n        const d = [];\n        for (let j = 0; j \u003c 2 * m; j += 2) {\n          const x = tx(A, cp, j);\n          const y = ty(A, cp, j);\n          (cx += x / m), (cy += y / m);\n          const dd = (x - px) * nx + (y - py) * ny;\n          d.push(abs(dd) \u003c 1e-9 ? 0 : dd);\n        }\n        if (!mv.sel(f, cx, cy) || max(...d) \u003c 1e-6) continue;\n        let g = f;\n        if (min(...d) \u003c -1e-6) {\n          g = { cp: clip(cp, d, 1), sec: f.sec, T: f.T.slice(), L: f.L.slice(), H: f.H.slice() };\n          f.cp = clip(cp, d, -1);\n          F.push(g);\n        }\n        moved.push(g);\n      }\n      let lo = 1e9;\n      let hi = -1e9;\n      for (const g of moved) (lo = min(lo, g.L[k - 1])), (hi = max(hi, g.L[k - 1]));\n      for (const g of moved) {\n        g.T[k] = mul(hingeM(h, -2), g.T[k - 1]);\n        g.H[k] = [px, py, nx, ny, mv.m];\n        g.L[k] = mv.m > 0 ? top + 1 + hi - g.L[k - 1] : bot - 1 - (g.L[k - 1] - lo);\n      }\n    }\n  }\n  // Facets that lie together at a state share a group there: a crease shows\n  // between two facets that lie together now but were parted at the deepest\n  // fold.\n  // And the extent of each state, turned as it lies, for the camera.\n  const nf = F.length;\n  const gid = new Int32Array(nf * (n + 1));\n  const det = new Int8Array(nf * (n + 1));\n  const box = [];\n  for (let k = 0; k \u003c= n; k++) {\n    const seen = new Map();\n    const c = cos(PHI[k]);\n    const s = sin(PHI[k]);\n    const b = [1e9, -1e9, 1e9, -1e9];\n    F.forEach((f, i) => {\n      const A = f.T[k];\n      const key = A.map((v) => round(v * 1e4)).join();\n      if (!seen.has(key)) seen.set(key, seen.size);\n      gid[i * (n + 1) + k] = seen.get(key);\n      det[i * (n + 1) + k] = A[0] * A[3] - A[1] * A[2] > 0 ? 1 : -1;\n      for (let j = 0; j \u003c f.cp.length; j += 2) {\n        const x = tx(A, f.cp, j);\n        const y = ty(A, f.cp, j);\n        const u = x * c - y * s;\n        const v = x * s + y * c;\n        (b[0] = min(b[0], u)), (b[1] = max(b[1], u)), (b[2] = min(b[2], v)), (b[3] = max(b[3], v));\n      }\n    });\n    const u = (b[0] + b[1]) / 2;\n    const v = (b[2] + b[3]) / 2;\n    box.push([u * c + v * s, -u * s + v * c, b[1] - b[0], b[3] - b[2]]);\n  }\n  const tilt = F32(nf * 2);\n  for (let i = 0; i \u003c nf * 2; i++) tilt[i] = Math.random() - 0.5;\n  return { F, n, gid, det, box, tilt };\n}\n\n// Papers: colour, second colour, print. 0 plain kami, 1 seigaiha waves,\n// 2 metal foil, 3 kanoko dots, 4 ichimatsu checks.\nconst PAPERS = [\n  [[0.16, 0.72, 0.8], null, 0],\n  [[0.13, 0.2, 0.58], [0.78, 0.86, 0.96], 1],\n  [[1, 0.78, 0.3], null, 2],\n  [[0.96, 0.46, 0.6], [1, 0.95, 0.96], 3],\n  [[0.98, 0.78, 0.12], null, 0],\n  [[0.12, 0.46, 0.26], [0.94, 0.88, 0.7], 4],\n  [[0.74, 0.78, 0.84], null, 2],\n  [[0.9, 0.16, 0.12], null, 0],\n];\nconst WHITE = [0.95, 0.93, 0.87];\n\nfunction print(kind, s, t) {\n  if (kind === 1) {\n    // Rows of scales two wide, each row half a scale lower and covering the one above.\n    const X = s * 3;\n    const Y = t * 3;\n    const j = ceil(2 * Y);\n    for (let jj = j + 1; jj >= j; jj--) {\n      const ox = jj & 1;\n      const dx = X - ox - 2 * round((X - ox) / 2);\n      const dy = Y - jj / 2;\n      const r = sqrt(dx * dx + dy * dy);\n      if (r \u003c 1 || jj === j) return (r * 3) % 1 \u003c 0.4 ? 1 : 0;\n    }\n  }\n  if (kind === 3) {\n    const X = s * 5;\n    const Y = t * 5;\n    const ox = floor(Y) & 1 ? 0.5 : 0;\n    const dx = X + ox - floor(X + ox) - 0.5;\n    const dy = Y - floor(Y) - 0.5;\n    return dx * dx + dy * dy \u003c 0.06 ? 1 : 0;\n  }\n  if (kind === 4) return (floor(s * 4 + 4) + floor(t * 4 + 4)) & 1;\n  return 0;\n}\n\n// The order a sheet goes through.\nconst WAIT = 0, IN = 1, REST = 2, FOLD = 3, HOLD = 4, SIT = 5, UNFOLD = 6, CREASE = 7;\n\nconst newSheet = (sl, first) =>\n  Object.assign(sl, { old: first ? null : { seq: sl.seq, kmax: sl.kmax }, seq: sl.seq + 1, ph: IN, pt: 0, k: 0, u: 1, kmax: 0, rush: false });\nconst slot = (i) => ({ i, ph: WAIT, pt: -2.4 * i, k: 0, u: 1, kmax: 0, seq: -1, old: null, rush: false });\nconst F32 = (n) => new Float32Array(n);\n\nexport function setup(params) {\n  const grain = F32(N);\n  for (let y = 0; y \u003c H; y++) {\n    let w = Math.random();\n    for (let x = 0; x \u003c W; x++) {\n      w += 0.25 * (Math.random() - 0.5);\n      grain[y * W + x] = 0.75 + 0.2 * sin(y * 0.9 + 3 * sin(x * 0.05 + y * 0.02)) + 0.1 * w;\n    }\n  }\n  params.s = { M: build(CRANE), slots: [slot(0)], n: 1, base: 0, rate: 1, lamp: 0.06, lampKey: null, grain, bg: F32(N * 3) };\n  for (const k of [\"LX\", \"LY\", \"LZ\", \"LI\", \"HZ\"]) params.s[k] = F32(N);\n}\n\nfunction stepSlot(sl, h, M) {\n  if (sl.rush && (sl.ph === UNFOLD || sl.ph === CREASE)) h *= 4;\n  sl.pt += h;\n  const ph = sl.ph;\n  if (ph === WAIT && sl.pt >= 0) newSheet(sl, true);\n  else if (ph === IN && sl.pt >= 1.2) Object.assign(sl, { ph: REST, pt: 0, old: null });\n  else if (ph === REST && sl.pt >= 1) Object.assign(sl, { ph: FOLD, k: 1, u: 0 });\n  else if (ph === FOLD) {\n    sl.u = min(1, sl.u + h / DUR[sl.k - 1]);\n    if (sl.u >= 1) Object.assign(sl, { kmax: max(sl.kmax, sl.k), ph: HOLD, pt: 0 });\n  } else if (ph === HOLD && sl.pt >= 0.25) {\n    if (sl.k \u003c M.n) Object.assign(sl, { k: sl.k + 1, u: 0, ph: FOLD });\n    else Object.assign(sl, { ph: SIT, pt: 0 });\n  } else if (ph === SIT && sl.pt >= 3) sl.ph = UNFOLD;\n  else if (ph === UNFOLD && (sl.u -= h / 0.45) \u003c= 0) {\n    if (sl.k > 1) (sl.k--), (sl.u += 1);\n    else Object.assign(sl, { k: 0, u: 1, ph: CREASE, pt: 0 });\n  } else if (ph === CREASE && (sl.pt >= 2.5 || sl.rush)) newSheet(sl, false);\n}\n\nexport function update(dt, input, params) {\n  const S = params.s;\n  if (!S) return;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.base = floor(cl(k[0], 0, 1) * (PAPERS.length - 0.01));\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.lamp = cl(k[3], -1, 1);\n  const n = cl(round(k[2]), 1, 3);\n  if (n !== S.n) {\n    S.n = n;\n    while (S.slots.length \u003c n) S.slots.push(slot(S.slots.length));\n    S.slots.length = n;\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sl of S.slots) {\n      if (sl.ph === FOLD || sl.ph === HOLD || sl.ph === SIT) {\n        if (sl.ph !== FOLD) sl.u = 1;\n        sl.kmax = max(sl.kmax, sl.k);\n        sl.ph = UNFOLD;\n      } else if (sl.ph !== WAIT) {\n        if (sl.ph === UNFOLD || sl.ph === CREASE) sl.rush = true;\n        else newSheet(sl, false);\n      }\n    }\n  for (const sl of S.slots) stepSlot(sl, dt * S.rate, S.M);\n}\n\n// The lamp: a bulb LH above the table at (lx, LY0). Each LED keeps the unit\n// vector to it, the half vector's height for the shine on foil, and how much\n// light reaches it. The table is dark walnut, kept below 24 of 255; on it lie\n// the pack of paper, the next sheet on top, and a bone folder.\nconst LH = 80;\nconst LY0 = 34;\nconst PC = cos(-0.2);\nconst PS = sin(-0.2);\nfunction lampField(S, next) {\n  const lx = 31.5 + 44 * S.lamp;\n  const { LX, LY, LZ, LI, HZ, bg, grain } = S;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = lx - x - 0.5;\n      const dy = LY0 - y - 0.5;\n      const r2 = dx * dx + dy * dy;\n      const l = sqrt(r2 + LH * LH);\n      LX[p] = dx / l;\n      LY[p] = dy / l;\n      LZ[p] = LH / l;\n      LI[p] = (LH * LH) / (LH * LH + 0.4 * r2);\n      HZ[p] = (LZ[p] + 1) / sqrt(LX[p] * LX[p] + LY[p] * LY[p] + (LZ[p] + 1) * (LZ[p] + 1));\n      const lit = LI[p] * (0.22 + 0.9 * LZ[p]);\n      const w = min(21, 255 * 0.085 * (0.25 + 0.75 * LI[p]) * grain[p]);\n      let c = [w, w * 0.56, w * 0.32];\n      // The pack: four sheets a little askew, each showing an edge of its colour.\n      for (let j = 0; j \u003c 4; j++) {\n        const X = x + 0.5 + 1 - 0.9 * j;\n        const Y = y + 0.5 - 1 - 1.3 * j;\n        const u = (X * PC + Y * PS) / 13;\n        const v = (Y * PC - X * PS) / 13;\n        if (abs(u) \u003c 1 && abs(v) \u003c 1) {\n          const P = PAPERS[(next + j) % PAPERS.length];\n          const col = P[2] !== 2 && print(P[2], u, v) ? P[1] : P[0];\n          const e = (abs(u) > 0.92 || abs(v) > 0.92 ? 0.7 : 1) * (j ? 0.8 : 1) * (P[2] === 2 ? 0.75 : 1);\n          c = col.map((v) => 255 * v * lit * e);\n          break;\n        }\n      }\n      // The bone folder, rounded at both ends, its back catching the lamp.\n      const ax = x + 0.5 - 47;\n      const ay = y + 0.5 - 118;\n      const t = cl((ax * 14 - ay * 15) / 421, 0, 1);\n      const d = hypot(ax - 14 * t, ay + 15 * t);\n      if (d \u003c 1.7) c = [0.8, 0.74, 0.62].map((v) => 255 * v * lit * (0.75 + 0.35 * (1 - d / 1.7)));\n      bg[p * 3] = c[0];\n      bg[p * 3 + 1] = c[1];\n      bg[p * 3 + 2] = c[2];\n    }\n  S.lp = [lx, LY0, LH];\n}\n\n// Per frame: every facet on the table, as drawn.\n// RA maps it from the crease pattern to the panel, RN is its lit normal, RK\n// its draw order; RS the side up, RP the paper, RQ the sheet; RG and RX its\n// group now and at the deepest fold, RU and RL its side and layer there.\nconst MAXR = 1600;\nconst [RA, RN, RK, RL, RM] = [6, 3, 1, 1, 1].map((k) => F32(MAXR * k));\nconst [RS, RU] = [new Int8Array(MAXR), new Int8Array(MAXR)];\nconst [RP, RQ, RG, RX] = [0, 0, 0, 0].map(() => new Int32Array(MAXR));\nconst ORD = [];\nconst RCP = [];\nconst ID = new Int16Array(N);\nconst SHK = F32(N);\nconst VX = F32(64);\nconst VY = F32(64);\nlet nr = 0;\n\n// Fill a convex polygon with v; mode 0 writes facet ids, mode 1 raises the\n// shadow key.\nfunction fill(cnt, v, mode) {\n  let ya = 1e9;\n  let yb = -1e9;\n  for (let i = 0; i \u003c cnt; i++) (ya = min(ya, VY[i])), (yb = max(yb, VY[i]));\n  const y0 = max(0, ceil(ya - 0.5));\n  const y1 = min(H - 1, floor(yb - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 1e9;\n    let xr = -1e9;\n    for (let i = 0; i \u003c cnt; i++) {\n      const j = i + 1 \u003c cnt ? i + 1 : 0;\n      const ay = VY[i];\n      const by = VY[j];\n      if ((ay \u003c= py && by > py) || (by \u003c= py && ay > py)) {\n        const x = VX[i] + ((py - ay) / (by - ay)) * (VX[j] - VX[i]);\n        (xl = min(xl, x)), (xr = max(xr, x));\n      }\n    }\n    const x0 = max(0, ceil(xl - 0.5));\n    const x1 = min(W - 1, floor(xr - 0.5));\n    const row = y * W;\n    if (mode === 0) for (let x = x0; x \u003c= x1; x++) ID[row + x] = v;\n    else for (let x = x0; x \u003c= x1; x++) if (SHK[row + x] \u003c v) SHK[row + x] = v;\n  }\n}\n\n// The camera for state j of a sheet in its slot: turned PHI[j], scaled to fit.\nfunction viewOf(M, j, fw, fh, zmax) {\n  const b = M.box[j];\n  return [PHI[j], log(min(fw / b[2], fh / b[3], zmax)), b[0], b[1]];\n}\n\n// Put one sheet on the table: model M at step k, progress u, in slot\n// region (cy, fw, fh), paper index pi. dx and dphi slide a new sheet in.\nfunction placeSheet(S, M, k, u, flap, kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, keyBase, mem, qid) {\n  const n1 = M.n + 1;\n  const go = k > 0 && u > 0 && u \u003c 1;\n  const jb = k === 0 ? 0 : u >= 1 ? k : k - 1;\n  const a = viewOf(M, k > 0 ? k - 1 : 0, fw, fh, zmax);\n  const b = viewOf(M, k, fw, fh, zmax);\n  const w = k > 0 ? ease(u) : 1;\n  const phi = mix(a[0], b[0], w) + dphi;\n  const z = exp(mix(a[1], b[1], w));\n  const ccx = mix(a[2], b[2], w);\n  const ccy = mix(a[3], b[3], w);\n  const c = cos(phi) * z;\n  const s = sin(phi) * z;\n  const V = [c, -s, s, c, 31.5 + dx - (c * ccx - s * ccy), cyp + dy - (s * ccx + c * ccy)];\n  const [lx, ly, lh] = S.lp;\n  M.F.forEach((f, i) => {\n    if (nr >= MAXR) return;\n    const r = nr++;\n    // The hinge this facet turns on now, if any: the fold under way, or the\n    // finished crane's wing beat.\n    let hg = null;\n    let th = 0;\n    if (go && f.H[k]) (hg = f.H[k]), (th = PI * ease(u));\n    else if (flap > 0 && (f.sec === 0 || f.sec === 3)) (hg = FLAPH), (th = flap);\n    const A0 = f.T[jb];\n    const ct = cos(th);\n    const st = sin(th);\n    const A = mul(V, hg ? mul(hingeM(hg, ct - 1), A0) : A0);\n    RA.set(A, r * 6);\n    RCP[r] = f.cp;\n    let side = M.det[i * n1 + jb];\n    let nx = 0;\n    let ny = 0;\n    let nz = 1;\n    let key = f.L[jb];\n    if (hg) {\n      const m = hg[4];\n      // The hinge normal as it lies on the panel.\n      const hx = hg[2] * cos(phi) - hg[3] * sin(phi);\n      const hy = hg[2] * sin(phi) + hg[3] * cos(phi);\n      nx = -m * st * hx;\n      ny = -m * st * hy;\n      nz = ct;\n      if (ct \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz), (side = -side);\n      key = (m > 0 ? 1e6 : -1e6) + (ct >= 0 ? f.L[jb] : go ? f.L[k] : -f.L[jb]);\n      // A lifted flap throws its shadow away from the lamp.\n      if (m > 0 && st > 0.02) {\n        const cp = f.cp;\n        const cnt = cp.length / 2;\n        for (let j = 0; j \u003c cnt; j++) {\n          const hz = (((tx(A0, cp, 2 * j) - hg[0]) * hg[2] + (ty(A0, cp, 2 * j) - hg[1]) * hg[3]) * st * z) / lh;\n          const px = tx(A, cp, 2 * j);\n          const py = ty(A, cp, 2 * j);\n          VX[j] = px + hz * (px - lx);\n          VY[j] = py + hz * (py - ly);\n        }\n        fill(cnt, keyBase + key, 1);\n      }\n    }\n    // Paper never lies quite flat: each layer tips a little its own way, and a\n    // sheet opened out again keeps a tilt in every facet between its creases.\n    const g = M.gid[i * n1 + jb];\n    nx += 0.06 * M.tilt[2 * g] + 0.12 * mem * M.tilt[2 * i + 1];\n    ny += 0.06 * M.tilt[2 * g + 1] + 0.12 * mem * M.tilt[2 * i];\n    const nl = hypot(nx, ny, nz);\n    RN[r * 3] = nx / nl;\n    RN[r * 3 + 1] = ny / nl;\n    RN[r * 3 + 2] = nz / nl;\n    RS[r] = side;\n    RK[r] = keyBase + key;\n    RP[r] = pi;\n    RG[r] = g;\n    RX[r] = M.gid[i * n1 + kmax];\n    RU[r] = M.det[i * n1 + kmax];\n    RL[r] = f.L[kmax];\n    RQ[r] = qid;\n    RM[r] = mem;\n    ORD.push(r);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const next = (S.base + S.slots[0].seq + 1) % PAPERS.length;\n  const lk = S.lamp + 10 * next;\n  if (S.lampKey !== lk) (S.lampKey = lk), lampField(S, next);\n  const { M, LX, LY, LZ, LI, HZ, bg } = S;\n  nr = 0;\n  ORD.length = 0;\n  SHK.fill(-1e12);\n  const n = S.slots.length;\n  const sh = H / n;\n  const zmax = [74, 50, 34][n - 1];\n  const fw = n === 1 ? 60 : n === 2 ? 56 : 46;\n  const fh = sh - (n === 1 ? 12 : 8);\n  let q = 0;\n  for (const sl of S.slots) {\n    if (sl.ph === WAIT) continue;\n    const cyp = sl.i * sh + sh / 2;\n    const pi = (S.base + 3 * sl.i + sl.seq) % PAPERS.length;\n    if (sl.old) placeSheet(S, M, 0, 1, 0, sl.old.kmax, (S.base + 3 * sl.i + sl.old.seq) % PAPERS.length, cyp, fw, fh, zmax, 0, 0, 0, -1e8, 1, q++);\n    let dx = 0;\n    let dy = 0;\n    let dphi = 0;\n    if (sl.ph === IN) {\n      // Slid off the pack in the corner.\n      const e = 1 - ease(sl.pt / 1.2);\n      dx = -62 * e;\n      dy = (8 - cyp) * e;\n      dphi = -0.2 * e;\n    }\n    let flap = 0;\n    if (sl.ph === SIT) {\n      // The crane beats its wing once.\n      const t = (sl.pt - 0.6) / 1.6;\n      if (t > 0 && t \u003c 1) flap = 0.78 * PI * sin(PI * t) ** 2;\n    }\n    const mem = sl.ph === UNFOLD || sl.ph === CREASE ? 1 : 0;\n    placeSheet(S, M, sl.k, sl.u, flap, sl.kmax, pi, cyp, fw, fh, zmax, dx, dy, dphi, 0, mem, q++);\n  }\n  ORD.sort((a, b) => RK[a] - RK[b]);\n  ID.fill(-1);\n  for (const r of ORD) {\n    const cp = RCP[r];\n    const A = RA.subarray(r * 6, r * 6 + 6);\n    for (let j = 0; j \u003c cp.length; j += 2) (VX[j / 2] = tx(A, cp, j)), (VY[j / 2] = ty(A, cp, j));\n    fill(cp.length / 2, r, 0);\n  }\n  const lx = S.lp[0];\n  const sx = lx \u003c 31.5 ? -1 : 1;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const r = ID[p];\n      if (r \u003c 0) {\n        const f = SHK[p] > -1e11 ? 0.55 : 1;\n        display.setPixel(x, y, bg[p * 3] * f, bg[p * 3 + 1] * f, bg[p * 3 + 2] * f);\n      } else {\n        // The print, found back in the crease pattern: paper square s, t in -1..1.\n        const o = r * 6;\n        const [a, b, c, d] = [RA[o], RA[o + 1], RA[o + 2], RA[o + 3]];\n        const det = a * d - b * c;\n        const P = PAPERS[RP[r]];\n        let col = P[0];\n        let kind = P[2];\n        if (RS[r] \u003c 0) (col = WHITE), (kind = -1);\n        else if (P[1] && abs(det) > 1e-3) {\n          const X = x + 0.5 - RA[o + 4];\n          const Y = y + 0.5 - RA[o + 5];\n          const cu = (d * X - b * Y) / det;\n          const cv = (a * Y - c * X) / det;\n          if (print(kind, cu + cv, cv - cu)) col = P[1];\n        }\n        const nz = RN[r * 3 + 2];\n        const I = LI[p];\n        const hz = max(0, nz * HZ[p]);\n        // Kami is matte with a little sheen; foil is darker but throws the lamp back.\n        const fo = kind === 2;\n        const lit = I * (0.22 + 0.9 * max(0, RN[r * 3] * LX[p] + RN[r * 3 + 1] * LY[p] + nz * LZ[p])) * (fo ? 0.8 : 1);\n        const sp = I * (fo ? 0.25 + 0.9 * hz ** 12 : 0.06 * hz ** 8);\n        // Shade under a lifted flap, and along the edge of a layer above.\n        const k = RK[r];\n        let f = SHK[p] > k ? 0.55 : 1;\n        const s = x - sx >= 0 && x - sx \u003c W && y > 0 ? ID[p - W - sx] : -1;\n        if (s >= 0 && RQ[s] === RQ[r] && RK[s] > k + 0.5 && RG[s] !== RG[r]) f *= 0.66;\n        // Creases left from the folding.\n        if (RM[r] > 0) {\n          for (const s of [x + 1 \u003c W ? ID[p + 1] : -1, y + 1 \u003c H ? ID[p + W] : -1])\n            if (s >= 0 && s !== r && RQ[s] === RQ[r] && RG[s] === RG[r] && RX[s] !== RX[r]) {\n              const up = RL[s] > RL[r] ? s : r;\n              f *= RU[up] * RS[r] > 0 ? 1.22 : 0.72;\n              break;\n            }\n        }\n        const m = 255 * f * (fo ? lit + sp : lit);\n        const e = fo ? 0 : 255 * f * sp;\n        display.setPixel(x, y, min(255, col[0] * m + e), min(255, col[1] * m + e), min(255, col[2] * m + e));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Speed=0.2..3, Sheets=1..3, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"Which sheet comes off the pack: teal kami at 0, then indigo chiyogami printed with seigaiha waves, gold foil, pink with white kanoko dots, yellow, green ichimatsu checks, silver foil and vermilion at 1. Each new sheet is the next one in the pack, and the pack in the corner shows which."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands fold: at 2 a fold takes about a second and a sheet goes from flat to crane and back to flat in twenty-two seconds; at 0.2 it all runs ten times slower."},{"name":"Sheets","min":1,"max":3,"about":"How many sheets fold at once, one above the other, each a step behind the last: one big sheet at 1, three small ones at 3."},{"name":"Lamp","min":-1,"max":1,"about":"Where the lamp stands, from the left of the table at -1 to the right at 1. The flaps that turn toward it light up, the far side of the sheet falls into shade and a lifted flap throws its shadow the other way."}],"start":[0,2,1,0.06],"measures":{"motion":0.2431,"detail":0.0239,"edges":0.722,"complexity":0.6298,"coverage":0.2643,"colour":0.177,"drift":0.2549},"knobResponse":[0.2136,0.2519,0.2517,0.0599]},{"slug":"outer-billiards","title":"Outer Billiards","family":"geometry","round":30,"note":"정오각형 밖의 평면을 점마다 꼭짓점 대칭 뛰기 몇 번 만에 제자리로 오는지로 칠했어요. 십각형과 오각형 목걸이가 둘레를 감고, 흰 점 하나가 제 궤도를 뛰어요.","idea":"A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.","buttons":"K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.","code":"// ===== Patternflow pattern =====\n// Title:   Outer Billiards\n// Family:  geometry\n// Idea:    A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: outer billiards (Bernhard Neumann, 1959) and Sergei Tabachnikov's regular pentagon (1995), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green.\n// Knob 2: Speed. At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes.\n// Knob 3: Sides. The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second.\n// Knob 4: Zoom. How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1.\n// Buttons: K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, atan2, log, exp, PI, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst TAU = 2 * PI;\n\n// The map has the polygon's symmetry, turns by 2pi/n and mirrors in its\n// axes (a mirror turns the map into its inverse, which has the same periods),\n// so one wedge of angle pi/n holds it all. The wedge is gridded log-polar:\n// radius RA to RMAX in CR cells per e-fold, angle in steps of 1/CR.\nconst RA = 0.7, RMAX = 33, CR = 110, NI = ceil(CR * log(RMAX / RA));\nconst MAXIT = 4000, INSIDE = 65535, BUDGET = 500000;\n\n// Four sample points in each LED: radius in LEDs, CR times its log, angle in turns.\nconst SR = new Float32Array(NP * 4), SL = new Float32Array(NP * 4), SA = new Float32Array(NP * 4);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++)\n    for (let s = 0; s \u003c 4; s++) {\n      const q = (y * W + x) * 4 + s, dx = x + (s & 1 ? 0.75 : 0.25) - 32, dy = 64 - y - (s & 2 ? 0.75 : 0.25);\n      SR[q] = sqrt(dx * dx + dy * dy);\n      SL[q] = CR * log(SR[q]);\n      SA[q] = atan2(dy, dx) / TAU;\n    }\n\n// A regular n-gon on the unit circle, vertex 0 on the x axis; edge k runs\n// from vertex k to k + 1 and its outward normal is NX, NY.\nfunction makePoly(n) {\n  const G = { n, r: cos(PI / n), NJ: ceil((PI / n) * CR), next: 0, VX: [], VY: [], NX: [], NY: [] };\n  for (let k = 0; k \u003c n; k++) {\n    G.VX.push(cos((TAU * k) / n));\n    G.VY.push(sin((TAU * k) / n));\n    G.NX.push(cos((TAU * (k + 0.5)) / n));\n    G.NY.push(sin((TAU * (k + 0.5)) / n));\n  }\n  G.M = new Uint16Array(NI * G.NJ);\n  return G;\n}\n\n// The vertex x reflects in: the first, counterclockwise, of the run of edges\n// x can see, so the polygon lies right of the ray from x through it. -1 inside.\nfunction vtx(G, x, y) {\n  const { n, NX, NY, r } = G;\n  let prev = x * NX[n - 1] + y * NY[n - 1] > r;\n  for (let k = 0; k \u003c n; k++) {\n    const vis = x * NX[k] + y * NY[k] > r;\n    if (vis && !prev) return k;\n    prev = vis;\n  }\n  return -1;\n}\n\n// Two jumps make a translation, so after an even number of jumps a periodic\n// point is back exactly, up to rounding. A domain whose centre has odd period p\n// is turned half round by p jumps, and its points come back after 2p; every\n// point of a domain gets the same number that way.\nlet spent = 0;\nfunction period(G, x0, y0) {\n  let x = x0, y = y0;\n  for (let it = 1; it \u003c= MAXIT; it++) {\n    const k = vtx(G, x, y);\n    if (k \u003c 0) return (spent += it), INSIDE;\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    if (!(it & 1) && (x - x0) ** 2 + (y - y0) ** 2 \u003c 1e-14) return (spent += it), it;\n  }\n  spent += MAXIT;\n  return 0;\n}\n\n// Fill the wedge outward from the polygon, BUDGET jumps a frame.\nfunction grow(G) {\n  spent = 0;\n  const total = NI * G.NJ;\n  while (G.next \u003c total && spent \u003c BUDGET) {\n    const c = G.next++, i = (c / G.NJ) | 0, a = (c - i * G.NJ + 0.5) / CR, rho = RA * exp((i + 0.5) / CR);\n    G.M[c] = period(G, rho * cos(a), rho * sin(a));\n  }\n}\n\n// The domain of a periodic point: the points that see the same vertices for p\n// jumps. After j jumps a point X is at s X + c; each jump adds two half\n// planes, and a square clipped by them all is the domain. Its centroid.\nfunction domain(G, x0, y0, p) {\n  let poly = [[x0 - 30, y0 - 30], [x0 + 30, y0 - 30], [x0 + 30, y0 + 30], [x0 - 30, y0 + 30]];\n  const clip = (ax, ay, b) => {\n    const out = [];\n    for (let i = 0; i \u003c poly.length; i++) {\n      const A = poly[i], B = poly[(i + 1) % poly.length], d1 = ax * A[0] + ay * A[1] - b, d2 = ax * B[0] + ay * B[1] - b;\n      if (d1 \u003c= 0) out.push(A);\n      if (d1 \u003c 0 !== d2 \u003c 0) out.push([A[0] + (d1 / (d1 - d2)) * (B[0] - A[0]), A[1] + (d1 / (d1 - d2)) * (B[1] - A[1])]);\n    }\n    poly = out;\n  };\n  let s = 1, cx = 0, cy = 0, x = x0, y = y0;\n  for (let j = 0; j \u003c p && poly.length; j++) {\n    const k = vtx(G, x, y), m = (k + G.n - 1) % G.n;\n    clip(-s * G.NX[k], -s * G.NY[k], G.NX[k] * cx + G.NY[k] * cy - G.r);\n    clip(s * G.NX[m], s * G.NY[m], G.r - G.NX[m] * cx - G.NY[m] * cy);\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    cx = 2 * G.VX[k] - cx;\n    cy = 2 * G.VY[k] - cy;\n    s = -s;\n  }\n  let A = 0, X = 0, Y = 0;\n  for (let i = 0; i \u003c poly.length; i++) {\n    const [x1, y1] = poly[i], [x2, y2] = poly[(i + 1) % poly.length], c = x1 * y2 - x2 * y1;\n    A += c;\n    X += (x1 + x2) * c;\n    Y += (y1 + y2) * c;\n  }\n  return A > 1e-9 ? [X / (3 * A), Y / (3 * A), A / 2] : [x0, y0, 0];\n}\n\nconst POLYS = {};\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 5, zoom: 5.2, rot: PI / 2, t: 0,\n    orb: null, k: 0, ph: 0, hops: 0, seen: [], marks: [],\n    lut: new Float32Array((MAXIT + 1) * 3), lutKey: \"\",\n    buf: new Float32Array(NP * 3),\n  };\n}\n\n// A seed: of forty random cells of the wedge, the one whose domain is biggest\n// on the panel, give or take, and not one of the last two periods, moved to its\n// domain's centroid. The orbit is kept as a list, so it closes exactly however\n// long it runs, and must stay within 44 LEDs of the centre: the 128 rows hold\n// all of it and the 64 columns most.\nfunction pick(P, G) {\n  const Z = P.zoom, lo = 1.1, hi = 40 / Z;\n  let best = 0;\n  for (let t = 0; t \u003c 40; t++) {\n    const i = floor(CR * log((lo + (hi - lo) * random()) / RA)), j = floor((random() * PI * CR) / G.n), c = i * G.NJ + j;\n    if (c >= G.next) continue;\n    const p = G.M[c], rho = RA * exp((i + 0.5) / CR), a = (j + 0.5) / CR;\n    if (!p || p === INSIDE || p > 12 * G.n) continue;\n    const [cx, cy, area] = domain(G, rho * cos(a), rho * sin(a), p);\n    const score = sqrt(min(area * Z * Z, 300)) * (0.5 + random()) * (P.seen.includes(p) ? 0.25 : 1);\n    if (area * Z * Z \u003c 8 || score \u003c= best) continue;\n    const ox = [cx], oy = [cy];\n    let far = 0;\n    for (let h = 0; h \u003c p; h++) {\n      const k = vtx(G, ox[h], oy[h]);\n      if (k \u003c 0) break;\n      ox.push(2 * G.VX[k] - ox[h]);\n      oy.push(2 * G.VY[k] - oy[h]);\n      far = max(far, sqrt(ox[h] ** 2 + oy[h] ** 2));\n    }\n    if (ox.length \u003c= p || far * Z > 44) continue;\n    best = score;\n    P.orb = { ox, oy, p, far };\n  }\n  if (best) {\n    P.seen = [P.orb.p, P.seen[0]];\n    P.k = P.ph = P.hops = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const n = cl(round(kv[2]), 5, 12);\n  P.zoom = 5.2 * 2 ** (1.2 * cl(kv[3], -1, 1));\n  if (n !== P.n || !P.G) {\n    P.n = n;\n    P.G = POLYS[n] || (POLYS[n] = makePoly(n));\n    P.orb = null;\n  }\n  const G = P.G;\n  grow(G);\n  P.t += d;\n  P.rot += d * P.speed * 0.045;\n  // K1, or a zoom that has pushed the orbit off the panel: a new orbit.\n  if ((input.btnPressed && input.btnPressed[0]) || (P.orb && P.orb.far * P.zoom > 52)) P.orb = null;\n  if (!P.orb) {\n    if (G.next > CR * log(30 / P.zoom / RA) * G.NJ) pick(P, G);\n  } else {\n    P.ph += d * P.speed * 1.2;\n    while (P.ph >= 1) {\n      P.ph -= 1;\n      const o = P.orb;\n      P.k = (P.k + 1) % o.p;\n      P.marks.push([o.ox[P.k], o.oy[P.k], P.t, cl(o.p / (P.speed * 1.2), 4, 12)]);\n      if (P.marks.length > 120) P.marks.shift();\n      if (++P.hops >= max(o.p, 2 * o.p * (o.p \u003c 16))) P.orb = null;\n    }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The colour of a period.\nfunction makeLut(P) {\n  const L = P.lut;\n  for (let p = 1; p \u003c= MAXIT; p++) {\n    const v = cl(1.1 - 0.12 * log(p / (2 * P.n)) / log(2), 0.5, 1);\n    hsv(P.hue + 0.55 + 0.618034 * p, 0.85, v * 255, L, p * 3);\n  }\n  P.lutKey = P.hue + \",\" + P.n;\n}\n\n// Additive splat with bilinear weights, in LEDs.\nfunction splat(buf, x, y, a, r, g, b) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const X = x0 + i, Y = y0 + j;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const w = a * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), q = (Y * W + X) * 3;\n      buf[q] += w * r;\n      buf[q + 1] += w * g;\n      buf[q + 2] += w * b;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.G) return;\n  const G = P.G, { n, M, NJ, r } = G, Z = P.zoom, buf = P.buf, L = P.lut;\n  if (P.lutKey !== P.hue + \",\" + n) makeLut(P);\n  const off = CR * (log(Z) + log(RA)), turn = (P.rot / TAU) * n, K = (TAU / n) * CR, pin = PI / n;\n  const w = 0.55 / Z;\n  for (let p = 0; p \u003c NP; p++) {\n    let R = 0, Gc = 0, B = 0, first = -1, mixed = 0, tab = 0, rim = 0;\n    for (let s = 0; s \u003c 4; s++) {\n      const q = p * 4 + s, rho = SR[q] / Z;\n      let a = SA[q] * n - turn;\n      a -= floor(a);\n      if (a > 0.5) a = 1 - a;\n      let per = 0;\n      // In the polygon, or on its rim.\n      if (rho \u003c 1 + w) {\n        const dd = rho * cos(pin - (a * TAU) / n) - r;\n        if (dd \u003c w) {\n          dd > -w ? rim++ : tab++;\n          continue;\n        }\n      }\n      const i = floor(SL[q] - off), c = i * NJ + floor(a * K);\n      if (i >= 0 && i \u003c NI && c \u003c G.next) per = M[c];\n      if (per === INSIDE) per = 0;\n      if (first \u003c 0) first = per;\n      else if (per !== first) mixed = 1;\n      if (per) (R += L[per * 3]), (Gc += L[per * 3 + 1]), (B += L[per * 3 + 2]);\n    }\n    // Where the period changes inside a LED, a dark seam.\n    const f = mixed || (tab && R + Gc + B) ? 0.15 : 0.25;\n    buf[p * 3] = R * f + rim * 64 + tab * 9;\n    buf[p * 3 + 1] = Gc * f + rim * 63 + tab * 9;\n    buf[p * 3 + 2] = B * f + rim * 61 + tab * 12;\n  }\n  // The orbit: the points it has landed on, each fading over the time one\n  // round takes (4 to 12 seconds), and the jump under way, a streak from the\n  // point through the vertex to its image.\n  const ca = cos(P.rot), sa = sin(P.rot);\n  const sx = (x, y) => 32 + Z * (x * ca - y * sa), sy = (x, y) => 64 - Z * (x * sa + y * ca);\n  for (const [x, y, t, life] of P.marks) {\n    const a = 1 - (P.t - t) / life;\n    if (a > 0) splat(buf, sx(x, y), sy(x, y), a * 255, 1, 1, 1);\n  }\n  const o = P.orb;\n  if (o) {\n    const k = P.k, k1 = (k + 1) % o.p, x0 = o.ox[k], y0 = o.oy[k], x1 = o.ox[k1], y1 = o.oy[k1];\n    const u = cl(P.ph / 0.4, 0, 1), e = u * u * (3 - 2 * u), fade = P.ph \u003c 0.4 ? 1 : 1 - (P.ph - 0.4) / 0.6;\n    const ax = sx(x0, y0), ay = sy(x0, y0), bx = sx(x1, y1), by = sy(x1, y1);\n    const len = sqrt((bx - ax) ** 2 + (by - ay) ** 2), steps = ceil((len * e) / 0.4);\n    for (let j = 0; j \u003c= steps; j++) {\n      const v = steps ? (j / steps) * e : 0;\n      splat(buf, ax + (bx - ax) * v, ay + (by - ay) * v, 170 * fade * (0.3 + 0.7 * (v / (e || 1))), 1, 0.97, 0.9);\n    }\n    const hx = ax + (bx - ax) * e, hy = ay + (by - ay) * e;\n    splat(buf, hx, hy, 400, 1, 1, 1);\n    const vx = (ax + bx) / 2, vy = (ay + by) / 2, fl = exp(-(((e - 0.5) * 5) ** 2)) * fade;\n    splat(buf, vx, vy, 500 * fl, 1, 1, 1);\n    for (let j = 0; j \u003c 8; j++) splat(buf, vx + 1.5 * cos((j * PI) / 4), vy + 1.5 * sin((j * PI) / 4), 140 * fl, 1, 1, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","layer":{"id":"layer-outer-billiards","type":"code","name":"outer-billiards","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Outer Billiards\n// Family:  geometry\n// Idea:    A regular pentagon in the middle of the panel and the plane round it coloured by how many outer billiard jumps bring each point back, so Tabachnikov's necklaces of decagons and pentagons ring it to the top and bottom of the panel; one white point hops along its orbit, each jump a streak through the corner it reflects in.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: outer billiards (Bernhard Neumann, 1959) and Sergei Tabachnikov's regular pentagon (1995), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1\n//\n// Knob 1: Hue. Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green.\n// Knob 2: Speed. At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes.\n// Knob 3: Sides. The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second.\n// Knob 4: Zoom. How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1.\n// Buttons: K1 tap drops the orbit and starts another, in the biggest domain of forty random tries whose period is not one of the last two.\n\nconst W = 64, H = 128, NP = W * H;\nconst { min, max, floor, ceil, sqrt, sin, cos, atan2, log, exp, PI, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst TAU = 2 * PI;\n\n// The map has the polygon's symmetry, turns by 2pi/n and mirrors in its\n// axes (a mirror turns the map into its inverse, which has the same periods),\n// so one wedge of angle pi/n holds it all. The wedge is gridded log-polar:\n// radius RA to RMAX in CR cells per e-fold, angle in steps of 1/CR.\nconst RA = 0.7, RMAX = 33, CR = 110, NI = ceil(CR * log(RMAX / RA));\nconst MAXIT = 4000, INSIDE = 65535, BUDGET = 500000;\n\n// Four sample points in each LED: radius in LEDs, CR times its log, angle in turns.\nconst SR = new Float32Array(NP * 4), SL = new Float32Array(NP * 4), SA = new Float32Array(NP * 4);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++)\n    for (let s = 0; s \u003c 4; s++) {\n      const q = (y * W + x) * 4 + s, dx = x + (s & 1 ? 0.75 : 0.25) - 32, dy = 64 - y - (s & 2 ? 0.75 : 0.25);\n      SR[q] = sqrt(dx * dx + dy * dy);\n      SL[q] = CR * log(SR[q]);\n      SA[q] = atan2(dy, dx) / TAU;\n    }\n\n// A regular n-gon on the unit circle, vertex 0 on the x axis; edge k runs\n// from vertex k to k + 1 and its outward normal is NX, NY.\nfunction makePoly(n) {\n  const G = { n, r: cos(PI / n), NJ: ceil((PI / n) * CR), next: 0, VX: [], VY: [], NX: [], NY: [] };\n  for (let k = 0; k \u003c n; k++) {\n    G.VX.push(cos((TAU * k) / n));\n    G.VY.push(sin((TAU * k) / n));\n    G.NX.push(cos((TAU * (k + 0.5)) / n));\n    G.NY.push(sin((TAU * (k + 0.5)) / n));\n  }\n  G.M = new Uint16Array(NI * G.NJ);\n  return G;\n}\n\n// The vertex x reflects in: the first, counterclockwise, of the run of edges\n// x can see, so the polygon lies right of the ray from x through it. -1 inside.\nfunction vtx(G, x, y) {\n  const { n, NX, NY, r } = G;\n  let prev = x * NX[n - 1] + y * NY[n - 1] > r;\n  for (let k = 0; k \u003c n; k++) {\n    const vis = x * NX[k] + y * NY[k] > r;\n    if (vis && !prev) return k;\n    prev = vis;\n  }\n  return -1;\n}\n\n// Two jumps make a translation, so after an even number of jumps a periodic\n// point is back exactly, up to rounding. A domain whose centre has odd period p\n// is turned half round by p jumps, and its points come back after 2p; every\n// point of a domain gets the same number that way.\nlet spent = 0;\nfunction period(G, x0, y0) {\n  let x = x0, y = y0;\n  for (let it = 1; it \u003c= MAXIT; it++) {\n    const k = vtx(G, x, y);\n    if (k \u003c 0) return (spent += it), INSIDE;\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    if (!(it & 1) && (x - x0) ** 2 + (y - y0) ** 2 \u003c 1e-14) return (spent += it), it;\n  }\n  spent += MAXIT;\n  return 0;\n}\n\n// Fill the wedge outward from the polygon, BUDGET jumps a frame.\nfunction grow(G) {\n  spent = 0;\n  const total = NI * G.NJ;\n  while (G.next \u003c total && spent \u003c BUDGET) {\n    const c = G.next++, i = (c / G.NJ) | 0, a = (c - i * G.NJ + 0.5) / CR, rho = RA * exp((i + 0.5) / CR);\n    G.M[c] = period(G, rho * cos(a), rho * sin(a));\n  }\n}\n\n// The domain of a periodic point: the points that see the same vertices for p\n// jumps. After j jumps a point X is at s X + c; each jump adds two half\n// planes, and a square clipped by them all is the domain. Its centroid.\nfunction domain(G, x0, y0, p) {\n  let poly = [[x0 - 30, y0 - 30], [x0 + 30, y0 - 30], [x0 + 30, y0 + 30], [x0 - 30, y0 + 30]];\n  const clip = (ax, ay, b) => {\n    const out = [];\n    for (let i = 0; i \u003c poly.length; i++) {\n      const A = poly[i], B = poly[(i + 1) % poly.length], d1 = ax * A[0] + ay * A[1] - b, d2 = ax * B[0] + ay * B[1] - b;\n      if (d1 \u003c= 0) out.push(A);\n      if (d1 \u003c 0 !== d2 \u003c 0) out.push([A[0] + (d1 / (d1 - d2)) * (B[0] - A[0]), A[1] + (d1 / (d1 - d2)) * (B[1] - A[1])]);\n    }\n    poly = out;\n  };\n  let s = 1, cx = 0, cy = 0, x = x0, y = y0;\n  for (let j = 0; j \u003c p && poly.length; j++) {\n    const k = vtx(G, x, y), m = (k + G.n - 1) % G.n;\n    clip(-s * G.NX[k], -s * G.NY[k], G.NX[k] * cx + G.NY[k] * cy - G.r);\n    clip(s * G.NX[m], s * G.NY[m], G.r - G.NX[m] * cx - G.NY[m] * cy);\n    x = 2 * G.VX[k] - x;\n    y = 2 * G.VY[k] - y;\n    cx = 2 * G.VX[k] - cx;\n    cy = 2 * G.VY[k] - cy;\n    s = -s;\n  }\n  let A = 0, X = 0, Y = 0;\n  for (let i = 0; i \u003c poly.length; i++) {\n    const [x1, y1] = poly[i], [x2, y2] = poly[(i + 1) % poly.length], c = x1 * y2 - x2 * y1;\n    A += c;\n    X += (x1 + x2) * c;\n    Y += (y1 + y2) * c;\n  }\n  return A > 1e-9 ? [X / (3 * A), Y / (3 * A), A / 2] : [x0, y0, 0];\n}\n\nconst POLYS = {};\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 5, zoom: 5.2, rot: PI / 2, t: 0,\n    orb: null, k: 0, ph: 0, hops: 0, seen: [], marks: [],\n    lut: new Float32Array((MAXIT + 1) * 3), lutKey: \"\",\n    buf: new Float32Array(NP * 3),\n  };\n}\n\n// A seed: of forty random cells of the wedge, the one whose domain is biggest\n// on the panel, give or take, and not one of the last two periods, moved to its\n// domain's centroid. The orbit is kept as a list, so it closes exactly however\n// long it runs, and must stay within 44 LEDs of the centre: the 128 rows hold\n// all of it and the 64 columns most.\nfunction pick(P, G) {\n  const Z = P.zoom, lo = 1.1, hi = 40 / Z;\n  let best = 0;\n  for (let t = 0; t \u003c 40; t++) {\n    const i = floor(CR * log((lo + (hi - lo) * random()) / RA)), j = floor((random() * PI * CR) / G.n), c = i * G.NJ + j;\n    if (c >= G.next) continue;\n    const p = G.M[c], rho = RA * exp((i + 0.5) / CR), a = (j + 0.5) / CR;\n    if (!p || p === INSIDE || p > 12 * G.n) continue;\n    const [cx, cy, area] = domain(G, rho * cos(a), rho * sin(a), p);\n    const score = sqrt(min(area * Z * Z, 300)) * (0.5 + random()) * (P.seen.includes(p) ? 0.25 : 1);\n    if (area * Z * Z \u003c 8 || score \u003c= best) continue;\n    const ox = [cx], oy = [cy];\n    let far = 0;\n    for (let h = 0; h \u003c p; h++) {\n      const k = vtx(G, ox[h], oy[h]);\n      if (k \u003c 0) break;\n      ox.push(2 * G.VX[k] - ox[h]);\n      oy.push(2 * G.VY[k] - oy[h]);\n      far = max(far, sqrt(ox[h] ** 2 + oy[h] ** 2));\n    }\n    if (ox.length \u003c= p || far * Z > 44) continue;\n    best = score;\n    P.orb = { ox, oy, p, far };\n  }\n  if (best) {\n    P.seen = [P.orb.p, P.seen[0]];\n    P.k = P.ph = P.hops = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const n = cl(round(kv[2]), 5, 12);\n  P.zoom = 5.2 * 2 ** (1.2 * cl(kv[3], -1, 1));\n  if (n !== P.n || !P.G) {\n    P.n = n;\n    P.G = POLYS[n] || (POLYS[n] = makePoly(n));\n    P.orb = null;\n  }\n  const G = P.G;\n  grow(G);\n  P.t += d;\n  P.rot += d * P.speed * 0.045;\n  // K1, or a zoom that has pushed the orbit off the panel: a new orbit.\n  if ((input.btnPressed && input.btnPressed[0]) || (P.orb && P.orb.far * P.zoom > 52)) P.orb = null;\n  if (!P.orb) {\n    if (G.next > CR * log(30 / P.zoom / RA) * G.NJ) pick(P, G);\n  } else {\n    P.ph += d * P.speed * 1.2;\n    while (P.ph >= 1) {\n      P.ph -= 1;\n      const o = P.orb;\n      P.k = (P.k + 1) % o.p;\n      P.marks.push([o.ox[P.k], o.oy[P.k], P.t, cl(o.p / (P.speed * 1.2), 4, 12)]);\n      if (P.marks.length > 120) P.marks.shift();\n      if (++P.hops >= max(o.p, 2 * o.p * (o.p \u003c 16))) P.orb = null;\n    }\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The colour of a period.\nfunction makeLut(P) {\n  const L = P.lut;\n  for (let p = 1; p \u003c= MAXIT; p++) {\n    const v = cl(1.1 - 0.12 * log(p / (2 * P.n)) / log(2), 0.5, 1);\n    hsv(P.hue + 0.55 + 0.618034 * p, 0.85, v * 255, L, p * 3);\n  }\n  P.lutKey = P.hue + \",\" + P.n;\n}\n\n// Additive splat with bilinear weights, in LEDs.\nfunction splat(buf, x, y, a, r, g, b) {\n  const x0 = floor(x - 0.5), y0 = floor(y - 0.5), fx = x - 0.5 - x0, fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const X = x0 + i, Y = y0 + j;\n      if (X \u003c 0 || X >= W || Y \u003c 0 || Y >= H) continue;\n      const w = a * (i ? fx : 1 - fx) * (j ? fy : 1 - fy), q = (Y * W + X) * 3;\n      buf[q] += w * r;\n      buf[q + 1] += w * g;\n      buf[q + 2] += w * b;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.G) return;\n  const G = P.G, { n, M, NJ, r } = G, Z = P.zoom, buf = P.buf, L = P.lut;\n  if (P.lutKey !== P.hue + \",\" + n) makeLut(P);\n  const off = CR * (log(Z) + log(RA)), turn = (P.rot / TAU) * n, K = (TAU / n) * CR, pin = PI / n;\n  const w = 0.55 / Z;\n  for (let p = 0; p \u003c NP; p++) {\n    let R = 0, Gc = 0, B = 0, first = -1, mixed = 0, tab = 0, rim = 0;\n    for (let s = 0; s \u003c 4; s++) {\n      const q = p * 4 + s, rho = SR[q] / Z;\n      let a = SA[q] * n - turn;\n      a -= floor(a);\n      if (a > 0.5) a = 1 - a;\n      let per = 0;\n      // In the polygon, or on its rim.\n      if (rho \u003c 1 + w) {\n        const dd = rho * cos(pin - (a * TAU) / n) - r;\n        if (dd \u003c w) {\n          dd > -w ? rim++ : tab++;\n          continue;\n        }\n      }\n      const i = floor(SL[q] - off), c = i * NJ + floor(a * K);\n      if (i >= 0 && i \u003c NI && c \u003c G.next) per = M[c];\n      if (per === INSIDE) per = 0;\n      if (first \u003c 0) first = per;\n      else if (per !== first) mixed = 1;\n      if (per) (R += L[per * 3]), (Gc += L[per * 3 + 1]), (B += L[per * 3 + 2]);\n    }\n    // Where the period changes inside a LED, a dark seam.\n    const f = mixed || (tab && R + Gc + B) ? 0.15 : 0.25;\n    buf[p * 3] = R * f + rim * 64 + tab * 9;\n    buf[p * 3 + 1] = Gc * f + rim * 63 + tab * 9;\n    buf[p * 3 + 2] = B * f + rim * 61 + tab * 12;\n  }\n  // The orbit: the points it has landed on, each fading over the time one\n  // round takes (4 to 12 seconds), and the jump under way, a streak from the\n  // point through the vertex to its image.\n  const ca = cos(P.rot), sa = sin(P.rot);\n  const sx = (x, y) => 32 + Z * (x * ca - y * sa), sy = (x, y) => 64 - Z * (x * sa + y * ca);\n  for (const [x, y, t, life] of P.marks) {\n    const a = 1 - (P.t - t) / life;\n    if (a > 0) splat(buf, sx(x, y), sy(x, y), a * 255, 1, 1, 1);\n  }\n  const o = P.orb;\n  if (o) {\n    const k = P.k, k1 = (k + 1) % o.p, x0 = o.ox[k], y0 = o.oy[k], x1 = o.ox[k1], y1 = o.oy[k1];\n    const u = cl(P.ph / 0.4, 0, 1), e = u * u * (3 - 2 * u), fade = P.ph \u003c 0.4 ? 1 : 1 - (P.ph - 0.4) / 0.6;\n    const ax = sx(x0, y0), ay = sy(x0, y0), bx = sx(x1, y1), by = sy(x1, y1);\n    const len = sqrt((bx - ax) ** 2 + (by - ay) ** 2), steps = ceil((len * e) / 0.4);\n    for (let j = 0; j \u003c= steps; j++) {\n      const v = steps ? (j / steps) * e : 0;\n      splat(buf, ax + (bx - ax) * v, ay + (by - ay) * v, 170 * fade * (0.3 + 0.7 * (v / (e || 1))), 1, 0.97, 0.9);\n    }\n    const hx = ax + (bx - ax) * e, hy = ay + (by - ay) * e;\n    splat(buf, hx, hy, 400, 1, 1, 1);\n    const vx = (ax + bx) / 2, vy = (ay + by) / 2, fl = exp(-(((e - 0.5) * 5) ** 2)) * fade;\n    splat(buf, vx, vy, 500 * fl, 1, 1, 1);\n    for (let j = 0; j \u003c 8; j++) splat(buf, vx + 1.5 * cos((j * PI) / 4), vy + 1.5 * sin((j * PI) / 4), 140 * fl, 1, 1, 1);\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, min(255, buf[p]), min(255, buf[p + 1]), min(255, buf[p + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Zoom=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every period's colour round the wheel together. At 0 the five big decagons round the pentagon (period 5) are violet, the ring of pentagons outside them (period 20) pink and the big decagons above and below (period 15) orange; at 0.25 the same three are red, yellow and green."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the point jumps 2.4 times a second and the plane turns once in 70 seconds; at 0.2 it jumps once in 4 seconds and the turn takes 12 minutes."},{"name":"Sides","min":5,"max":12,"about":"The polygon, 5 to 12 sides, opening on the pentagon. The hexagon (6) has its corners on a lattice and its plane breaks into hexagons and triangles that repeat; every other count gives rings of polygons of many sizes with dark residue between. A new count fills in outward from the polygon in about half a second."},{"name":"Zoom","min":-1,"max":1,"about":"How many LEDs a corner of the polygon stands from its centre: 5.4 at the start, 2.3 at -1, where the panel's corners reach 31 times that out, and 12 at 1."}],"start":[0,2,5,0.06],"measures":{"motion":0.5156,"detail":0.1148,"edges":0.7368,"complexity":0.7773,"coverage":0.9999,"colour":0.6754,"drift":0.0832},"knobResponse":[0.5981,0.1953,0.4355,0.388]},{"slug":"pancakes","title":"Pancakes","family":"kitchen","round":21,"note":"길든 철판을 위에서 내려다봐요. 국자로 부은 반죽이 퍼지고 기포가 올라와 터지며 구멍을 남기는 동안, 뒤집개가 하나씩 뒤집어 노릇한 면을 보이고 다 익은 것을 숯색 접시에 쌓아요. K1 을 누르면 가장 많이 익은 것부터 바로 뒤집거나 접시로 옮겨요.","idea":"A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.","buttons":"K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.","code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","layer":{"id":"layer-pancakes","type":"code","name":"pancakes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Batter","min":0,"max":1,"about":"Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds."},{"name":"Pancakes","min":6,"max":12,"about":"How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them."},{"name":"Heat","min":0,"max":1,"about":"How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke."}],"start":[0,2,6,0.06],"measures":{"motion":0.2802,"detail":0.2275,"edges":0.2381,"complexity":2.2758,"coverage":0.9979,"colour":0.2408,"drift":0.1011},"knobResponse":[0.1406,0.1266,0.1876,0.1386]},{"slug":"paternoster","title":"Paternoster","family":"machine","round":19,"note":"옛 사무실 건물의 파테르노스터를 기계실에서 피트까지 잘라 보여요. 나무 칸들이 오른쪽으로 오르고 왼쪽으로 내려오며 꼭대기와 바닥의 사슬 바퀴를 넘어가고, 층마다 사람이 지나가는 칸에 올라타고 내려요.","idea":"A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","layer":{"id":"layer-paternoster","type":"code","name":"paternoster","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again."},{"name":"Floors","min":3,"max":6,"about":"Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain."},{"name":"Busy","min":0,"max":1,"about":"How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom."}],"start":[0,2,3,0.06],"measures":{"motion":0.1311,"detail":0.0811,"edges":0.4174,"complexity":0.5845,"coverage":0.8893,"colour":0.2319,"drift":0.047},"knobResponse":[0.1087,0.0733,0.147,0.0325]},{"slug":"pearl-sheen","title":"Pearl Sheen","family":"cosmetic","round":30,"note":"펄 안료를 부은 면이 새틴 결로 흘러내려요. 누운 결은 로즈이고 기운 결은 박막 간섭으로 금빛 쪽으로 넘어가며, 긴 반사띠가 면을 가로질러요.","idea":"Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.","buttons":"K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.","code":"// ===== Patternflow pattern =====\n// Title:   Pearl Sheen\n// Family:  cosmetic\n// Idea:    Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after thin-film interference in pearlescent mica pigments (titania-coated mica)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1\n//\n// Knob 1: Hue. Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta.\n// Knob 2: Speed. How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that.\n// Knob 3: Shift. The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold.\n// Knob 4: Sheen. The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour.\n// Buttons: K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, tanh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Smooth noise in a 256 x 256 tile, three octaves of 8, 16 and 32 cells,\n// built once in setup. The streaks are this tile stretched about twelve times\n// along the flow.\nconst T = 256, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = Math.random() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.45;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The interference colour of the flakes' coat against the optical path\n// difference 2 n d cos(theta), 0 to 1600 nm in 1024 steps. Each entry sums\n// the two-beam reflectance over the spectrum, 400 to 700 nm every 5 nm, under\n// three bell-shaped channel curves at 600, 545 and 455 nm. The air-to-titania\n// face turns its beam over and the titania-to-mica face does not, so the\n// reflectance is (1 - cos(2 pi path / lambda)) / 2. Only the chroma is kept,\n// the colour less its grey, scaled so the second order's strongest is about 1.\nconst LN = 1024, OPD_MAX = 1600;\nconst RAW = new Float32Array(LN * 3);\nfunction buildRaw() {\n  const chan = [[600, 45], [545, 40], [455, 32]], norm = [0, 0, 0], wts = [];\n  for (let l = 400; l \u003c= 700; l += 5) {\n    const w = chan.map(([m, s]) => exp(-(((l - m) / s) ** 2) / 2));\n    wts.push([l, w]);\n    for (let c = 0; c \u003c 3; c++) norm[c] += w[c];\n  }\n  for (let i = 0; i \u003c LN; i++) {\n    const opd = (i / (LN - 1)) * OPD_MAX, acc = [0, 0, 0];\n    for (const [l, w] of wts) {\n      const r = 0.5 - 0.5 * cos((2 * PI * opd) / l);\n      for (let c = 0; c \u003c 3; c++) acc[c] += r * w[c];\n    }\n    for (let c = 0; c \u003c 3; c++) acc[c] /= norm[c];\n    const m = (acc[0] + acc[1] + acc[2]) / 3;\n    for (let c = 0; c \u003c 3; c++) RAW[i * 3 + c] = (acc[c] - m) / 0.45;\n  }\n}\n\n// The angle of a chroma round the grey axis, red at 0.\nconst chromaAngle = (r, g, b) => atan2((sqrt(3) / 2) * (g - b), r - (g + b) / 2);\n\n// Hue turns the table round the grey axis. Warm entries get LIFT: orange and\n// yellow at half light read as brown and olive on the panel, so they are\n// lifted and their deep tones kept lighter.\nconst LUT = new Float32Array(LN * 3), LIFT = new Float32Array(LN);\nlet lutRot = NaN;\nfunction buildLut(a) {\n  const c = cos(a), s = sin(a), k = (1 - c) / 3, q = s / sqrt(3), m0 = c + k, m1 = k - q, m2 = k + q;\n  for (let i = 0, j = 0; j \u003c LN; i += 3, j++) {\n    const r = RAW[i], g = RAW[i + 1], b = RAW[i + 2];\n    LUT[i] = r * m0 + g * m1 + b * m2;\n    LUT[i + 1] = r * m2 + g * m0 + b * m1;\n    LUT[i + 2] = r * m1 + g * m2 + b * m0;\n    const y = cos(chromaAngle(LUT[i], LUT[i + 1], LUT[i + 2]) - 1);\n    LIFT[j] = y > 0 ? y * y : 0;\n  }\n}\n\n// A flat flake's light path: the second order's magenta, 980 nm. A tilted\n// flake sees the light slant through its coat, 2 n d cos(theta) is shorter,\n// and the colour moves on through orange to gold. Hue then turns the table so\n// the flat colour sits on the knob's hue and the gold on its neighbour.\nconst BASE = 980;\nlet baseAng = 0;\n\nexport function setup(params) {\n  buildTex();\n  buildRaw();\n  const bi = round((BASE / OPD_MAX) * (LN - 1)) * 3;\n  baseAng = chromaAngle(RAW[bi], RAW[bi + 1], RAW[bi + 2]);\n  lutRot = NaN;\n  params.s = {\n    t: 0, flow: 0, hue: 0, shift: 0, sheen: 0.06, stir: -1,\n    u: new Float32Array(N), h: new Float32Array(N), big: new Float32Array(N), fine: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.shift = cl(k[2], 0, 1);\n  P.sheen = cl(k[3], 0, 1);\n  P.t += d;\n  P.flow += d * cl(k[1], 0.2, 3);\n  if (P.stir >= 0) {\n    P.stir += d;\n    if (P.stir > 12) P.stir = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.stir = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const rot = 2 * PI * (P.hue + 0.97) - baseAng;\n  if (rot !== lutRot) buildLut((lutRot = rot));\n  const ub = P.u, hb = P.h, bb = P.big, fb = P.fine, t = P.t, f = P.flow;\n\n  // Across-the-flow coordinate u: the panel's x bent by two slow warps, one\n  // carried down by the pour and one drifting on its own. A streak is a line\n  // of constant u. The spatula pushes u aside above its edge.\n  const sa0 = P.stir, sy = sa0 >= 0 ? -0.3 + (4.6 * sa0) / 2.5 : 0;\n  const sAmp = sa0 \u003c 0 ? 0 : 0.32 * (sa0 \u003c 2.5 ? 1 : exp(-(sa0 - 2.5) / 1.6));\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, push = sAmp > 0 ? sAmp * 0.5 * (1 + tanh((sy - Y) / 0.22)) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const X = x / 32;\n      ub[y * W + x] = X + tap(X * 6 + 40, Y * 5 - f * 0.5 + 7) * 1.4 + tap(X * 3 + t * 0.3, Y * 3 + 90) * 0.9 - push * sin((PI * (x + 0.5)) / W);\n    }\n  }\n  // The surface: broad swells (big) and fine striations (fine), both long\n  // along u. Where the warp squeezes the striations finer than two LEDs can\n  // hold, they fade out instead of breaking into stair steps.\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, u = ub[i];\n      const dx = ub[y * W + (x \u003c W - 1 ? x + 1 : x)] - ub[y * W + (x > 0 ? x - 1 : x)], dy = ub[yd + x] - ub[yu + x];\n      const over = 27 * sqrt(dx * dx + dy * dy) - 2;\n      const big = tap(u * 22 + 130, Y * 4 - f * 0.6);\n      const fine = tap(u * 55, Y * 4 - f * 3) / (1 + (over > 0 ? over * over : 0));\n      bb[i] = big;\n      fb[i] = fine;\n      hb[i] = big + fine * 0.12;\n    }\n  }\n\n  const sh = P.shift, sp = 0.2 + 0.8 * P.sheen;\n  // How much shorter a fully tilted flake's path is, and how much the coat's\n  // thickness varies along the striations.\n  const dmax = 0.03 + 0.115 * sh, thin = 10 + 40 * sh;\n  // A long strip light seen in the surface. Its reflection sweeps across and\n  // back every 21 s with a second, dimmer strip trailing it; Sheen narrows both.\n  const sw = 0.8 - 0.65 * sp, iw = 1 / sw, amp = 0.46 + 0.3 * sp;\n  const sc = 1.2 * sin(t * 0.3), sc2 = sc + (sc > 0 ? -1.6 : 1.6), sa = 0.25 * sin(t * 0.13);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, xl = y * W + (x > 0 ? x - 1 : x), xr = y * W + (x \u003c W - 1 ? x + 1 : x);\n      const hx = (hb[xr] - hb[xl]) * 8, hy = (hb[yd + x] - hb[yu + x]) * 8;\n      const n2 = 1 / (1 + hx * hx + hy * hy);\n      // The straight-on view reflected, r = 2 (n.v) n - v, on a swatch that\n      // bulges a little, so the strip lands as one broad band.\n      const bulge = 0.8 * ((x - 32) / 32 + (y - 64) / 160);\n      const rq = -2 * n2 * (hx + sa * hy) + bulge, q = (rq - sc) * iw, q2 = (rq - sc2) * iw;\n      const glow = exp(-q * q) + 0.6 * exp(-q2 * q2);\n      // The flakes lie along the flow and tilt with the fine striations. A\n      // tilted flake sees the light at an angle, which shortens its path:\n      // flip runs from 0 for flakes within 18 degrees of flat to 1 past 45.\n      const fx = ((fb[xr] - fb[xl]) * 4 + hx * 0.4) * 2.2, fy = ((fb[yd + x] - fb[yu + x]) * 4 + hy * 0.4) * 2.2;\n      const c2 = 1 / (1 + fx * fx + fy * fy);\n      const a = cl((0.9 - c2) * 2.5, 0, 1), flip = a * a * (3 - 2 * a);\n      const j = cl(round((((BASE + thin * fb[i]) * (1 - dmax * flip)) / OPD_MAX) * (LN - 1)), 0, LN - 1), li = j * 3;\n      // The flakes catch the strip in finer lines of their own.\n      const fq = (bulge - 2 * c2 * (fx + sa * fy) - sc) * 2.2;\n      const gl = 0.75 * glow + 0.25 * exp(-fq * fq);\n      // Deep tones only in the troughs of the broad swells.\n      const B = bb[i], deep = B \u003c -0.1 ? (B > -0.35 ? (-0.1 - B) / 0.25 : 1) : 0;\n      let lum = 0.64 - 0.12 * sp + amp * gl - 0.26 * deep + (0.1 * flip * dmax) / 0.13;\n      if (lum > 0.95) lum = 0.95 + (lum - 0.95) * 0.4;\n      const sat = 0.45 + 0.12 * sp - 0.32 * gl + 0.45 * deep + 0.3 * sh * flip;\n      const yl = LIFT[j], L = (lum + 0.12 * yl + 0.2 * yl * deep) * 235, S = sat * (1 - 0.3 * yl);\n      display.setPixel(x, y, cl(L * (1 + S * LUT[li]), 0, 255), cl(L * (1 + S * LUT[li + 1]), 0, 255), cl(L * (1 + S * LUT[li + 2]), 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-pearl-sheen","type":"code","name":"pearl-sheen","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pearl Sheen\n// Family:  cosmetic\n// Idea:    Pearl pigment pours slowly down the panel in long satin streaks while a strip light's reflection slides across it, and each LED takes its colour from thin-film interference in the coat of the mica flakes, so flakes lying flat show one pearl colour and flakes tilted along the streaks flip to a second.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after thin-film interference in pearlescent mica pigments (titania-coated mica)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1\n//\n// Knob 1: Hue. Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta.\n// Knob 2: Speed. How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that.\n// Knob 3: Shift. The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold.\n// Knob 4: Sheen. The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour.\n// Buttons: K1 tap drags a spatula down through the pour: in 2.5 s a kink runs from the top to the bottom pushing the streaks up to 10 LEDs aside, and over the next 6 s they ease back.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, sqrt, sin, cos, exp, tanh, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Smooth noise in a 256 x 256 tile, three octaves of 8, 16 and 32 cells,\n// built once in setup. The streaks are this tile stretched about twelve times\n// along the flow.\nconst T = 256, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nconst fade = (t) => t * t * (3 - 2 * t);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = Math.random() * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = fade(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = fade(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.45;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\n// The interference colour of the flakes' coat against the optical path\n// difference 2 n d cos(theta), 0 to 1600 nm in 1024 steps. Each entry sums\n// the two-beam reflectance over the spectrum, 400 to 700 nm every 5 nm, under\n// three bell-shaped channel curves at 600, 545 and 455 nm. The air-to-titania\n// face turns its beam over and the titania-to-mica face does not, so the\n// reflectance is (1 - cos(2 pi path / lambda)) / 2. Only the chroma is kept,\n// the colour less its grey, scaled so the second order's strongest is about 1.\nconst LN = 1024, OPD_MAX = 1600;\nconst RAW = new Float32Array(LN * 3);\nfunction buildRaw() {\n  const chan = [[600, 45], [545, 40], [455, 32]], norm = [0, 0, 0], wts = [];\n  for (let l = 400; l \u003c= 700; l += 5) {\n    const w = chan.map(([m, s]) => exp(-(((l - m) / s) ** 2) / 2));\n    wts.push([l, w]);\n    for (let c = 0; c \u003c 3; c++) norm[c] += w[c];\n  }\n  for (let i = 0; i \u003c LN; i++) {\n    const opd = (i / (LN - 1)) * OPD_MAX, acc = [0, 0, 0];\n    for (const [l, w] of wts) {\n      const r = 0.5 - 0.5 * cos((2 * PI * opd) / l);\n      for (let c = 0; c \u003c 3; c++) acc[c] += r * w[c];\n    }\n    for (let c = 0; c \u003c 3; c++) acc[c] /= norm[c];\n    const m = (acc[0] + acc[1] + acc[2]) / 3;\n    for (let c = 0; c \u003c 3; c++) RAW[i * 3 + c] = (acc[c] - m) / 0.45;\n  }\n}\n\n// The angle of a chroma round the grey axis, red at 0.\nconst chromaAngle = (r, g, b) => atan2((sqrt(3) / 2) * (g - b), r - (g + b) / 2);\n\n// Hue turns the table round the grey axis. Warm entries get LIFT: orange and\n// yellow at half light read as brown and olive on the panel, so they are\n// lifted and their deep tones kept lighter.\nconst LUT = new Float32Array(LN * 3), LIFT = new Float32Array(LN);\nlet lutRot = NaN;\nfunction buildLut(a) {\n  const c = cos(a), s = sin(a), k = (1 - c) / 3, q = s / sqrt(3), m0 = c + k, m1 = k - q, m2 = k + q;\n  for (let i = 0, j = 0; j \u003c LN; i += 3, j++) {\n    const r = RAW[i], g = RAW[i + 1], b = RAW[i + 2];\n    LUT[i] = r * m0 + g * m1 + b * m2;\n    LUT[i + 1] = r * m2 + g * m0 + b * m1;\n    LUT[i + 2] = r * m1 + g * m2 + b * m0;\n    const y = cos(chromaAngle(LUT[i], LUT[i + 1], LUT[i + 2]) - 1);\n    LIFT[j] = y > 0 ? y * y : 0;\n  }\n}\n\n// A flat flake's light path: the second order's magenta, 980 nm. A tilted\n// flake sees the light slant through its coat, 2 n d cos(theta) is shorter,\n// and the colour moves on through orange to gold. Hue then turns the table so\n// the flat colour sits on the knob's hue and the gold on its neighbour.\nconst BASE = 980;\nlet baseAng = 0;\n\nexport function setup(params) {\n  buildTex();\n  buildRaw();\n  const bi = round((BASE / OPD_MAX) * (LN - 1)) * 3;\n  baseAng = chromaAngle(RAW[bi], RAW[bi + 1], RAW[bi + 2]);\n  lutRot = NaN;\n  params.s = {\n    t: 0, flow: 0, hue: 0, shift: 0, sheen: 0.06, stir: -1,\n    u: new Float32Array(N), h: new Float32Array(N), big: new Float32Array(N), fine: new Float32Array(N),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.shift = cl(k[2], 0, 1);\n  P.sheen = cl(k[3], 0, 1);\n  P.t += d;\n  P.flow += d * cl(k[1], 0.2, 3);\n  if (P.stir >= 0) {\n    P.stir += d;\n    if (P.stir > 12) P.stir = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.stir = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const rot = 2 * PI * (P.hue + 0.97) - baseAng;\n  if (rot !== lutRot) buildLut((lutRot = rot));\n  const ub = P.u, hb = P.h, bb = P.big, fb = P.fine, t = P.t, f = P.flow;\n\n  // Across-the-flow coordinate u: the panel's x bent by two slow warps, one\n  // carried down by the pour and one drifting on its own. A streak is a line\n  // of constant u. The spatula pushes u aside above its edge.\n  const sa0 = P.stir, sy = sa0 >= 0 ? -0.3 + (4.6 * sa0) / 2.5 : 0;\n  const sAmp = sa0 \u003c 0 ? 0 : 0.32 * (sa0 \u003c 2.5 ? 1 : exp(-(sa0 - 2.5) / 1.6));\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, push = sAmp > 0 ? sAmp * 0.5 * (1 + tanh((sy - Y) / 0.22)) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const X = x / 32;\n      ub[y * W + x] = X + tap(X * 6 + 40, Y * 5 - f * 0.5 + 7) * 1.4 + tap(X * 3 + t * 0.3, Y * 3 + 90) * 0.9 - push * sin((PI * (x + 0.5)) / W);\n    }\n  }\n  // The surface: broad swells (big) and fine striations (fine), both long\n  // along u. Where the warp squeezes the striations finer than two LEDs can\n  // hold, they fade out instead of breaking into stair steps.\n  for (let y = 0; y \u003c H; y++) {\n    const Y = y / 32, yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, u = ub[i];\n      const dx = ub[y * W + (x \u003c W - 1 ? x + 1 : x)] - ub[y * W + (x > 0 ? x - 1 : x)], dy = ub[yd + x] - ub[yu + x];\n      const over = 27 * sqrt(dx * dx + dy * dy) - 2;\n      const big = tap(u * 22 + 130, Y * 4 - f * 0.6);\n      const fine = tap(u * 55, Y * 4 - f * 3) / (1 + (over > 0 ? over * over : 0));\n      bb[i] = big;\n      fb[i] = fine;\n      hb[i] = big + fine * 0.12;\n    }\n  }\n\n  const sh = P.shift, sp = 0.2 + 0.8 * P.sheen;\n  // How much shorter a fully tilted flake's path is, and how much the coat's\n  // thickness varies along the striations.\n  const dmax = 0.03 + 0.115 * sh, thin = 10 + 40 * sh;\n  // A long strip light seen in the surface. Its reflection sweeps across and\n  // back every 21 s with a second, dimmer strip trailing it; Sheen narrows both.\n  const sw = 0.8 - 0.65 * sp, iw = 1 / sw, amp = 0.46 + 0.3 * sp;\n  const sc = 1.2 * sin(t * 0.3), sc2 = sc + (sc > 0 ? -1.6 : 1.6), sa = 0.25 * sin(t * 0.13);\n  for (let y = 0; y \u003c H; y++) {\n    const yu = (y > 0 ? y - 1 : y) * W, yd = (y \u003c H - 1 ? y + 1 : y) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, xl = y * W + (x > 0 ? x - 1 : x), xr = y * W + (x \u003c W - 1 ? x + 1 : x);\n      const hx = (hb[xr] - hb[xl]) * 8, hy = (hb[yd + x] - hb[yu + x]) * 8;\n      const n2 = 1 / (1 + hx * hx + hy * hy);\n      // The straight-on view reflected, r = 2 (n.v) n - v, on a swatch that\n      // bulges a little, so the strip lands as one broad band.\n      const bulge = 0.8 * ((x - 32) / 32 + (y - 64) / 160);\n      const rq = -2 * n2 * (hx + sa * hy) + bulge, q = (rq - sc) * iw, q2 = (rq - sc2) * iw;\n      const glow = exp(-q * q) + 0.6 * exp(-q2 * q2);\n      // The flakes lie along the flow and tilt with the fine striations. A\n      // tilted flake sees the light at an angle, which shortens its path:\n      // flip runs from 0 for flakes within 18 degrees of flat to 1 past 45.\n      const fx = ((fb[xr] - fb[xl]) * 4 + hx * 0.4) * 2.2, fy = ((fb[yd + x] - fb[yu + x]) * 4 + hy * 0.4) * 2.2;\n      const c2 = 1 / (1 + fx * fx + fy * fy);\n      const a = cl((0.9 - c2) * 2.5, 0, 1), flip = a * a * (3 - 2 * a);\n      const j = cl(round((((BASE + thin * fb[i]) * (1 - dmax * flip)) / OPD_MAX) * (LN - 1)), 0, LN - 1), li = j * 3;\n      // The flakes catch the strip in finer lines of their own.\n      const fq = (bulge - 2 * c2 * (fx + sa * fy) - sc) * 2.2;\n      const gl = 0.75 * glow + 0.25 * exp(-fq * fq);\n      // Deep tones only in the troughs of the broad swells.\n      const B = bb[i], deep = B \u003c -0.1 ? (B > -0.35 ? (-0.1 - B) / 0.25 : 1) : 0;\n      let lum = 0.64 - 0.12 * sp + amp * gl - 0.26 * deep + (0.1 * flip * dmax) / 0.13;\n      if (lum > 0.95) lum = 0.95 + (lum - 0.95) * 0.4;\n      const sat = 0.45 + 0.12 * sp - 0.32 * gl + 0.45 * deep + 0.3 * sh * flip;\n      const yl = LIFT[j], L = (lum + 0.12 * yl + 0.2 * yl * deep) * 235, S = sat * (1 - 0.3 * yl);\n      display.setPixel(x, y, cl(L * (1 + S * LUT[li]), 0, 255), cl(L * (1 + S * LUT[li + 1]), 0, 255), cl(L * (1 + S * LUT[li + 2]), 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Shift=0..1, Sheen=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole pigment round the colour wheel, flip colour and all. At 0 the flat flakes are pearl rose and the tilted ones peach; at 0.5 aqua turning periwinkle, at 0.75 lavender turning magenta."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the pour runs. At 2 the broad swells slide down about 10 LEDs a second and the fine striations inside them 48, so the top layer slips past the body of the pour; at 0.2 a tenth of that."},{"name":"Shift","min":0,"max":1,"about":"The duochrome's strength: how much shorter a tilted flake's light path is than a flat one's. At 0 it is 3%, 950 nm against 980, a faint peach on rose; at 1 it is 14.5%, 840 nm, and the flanks of the streaks turn gold."},{"name":"Sheen","min":0,"max":1,"about":"The width of the strip light's reflection. At 0 a soft satin glow about 45 LEDs across over a pale body; at 1 a wet gloss, a band about 10 LEDs across that the swells break into white-hot lines, over deeper colour."}],"start":[0,2,0,0.06],"measures":{"motion":0.0507,"detail":0.0087,"edges":0,"complexity":1.7213,"coverage":1,"colour":0.1379,"drift":0.0591},"knobResponse":[0.2049,0.0688,0.0476,0.2033]},{"slug":"peel-off","title":"Peel-Off","family":"cosmetic","round":33,"note":"보랏빛 젤 막이 진줏빛 살결을 덮고, 위에서부터 벗겨지는 막이 옅은 안쪽을 드러낸 원통으로 말려 128줄을 내려가요. 막이 아래로 빠지면 젖은 새 막이 위에서 흘러내려 반무광으로 마르고, K3 은 그 막을 비치는 얇은 막에서 거의 불투명한 막까지 두껍게 해요. K1 은 색상환을 다 돌고, 누르면 바로 벗기기 시작해요.","idea":"A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.","buttons":"K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.","code":"// ===== Patternflow pattern =====\n// Title:   Peel-Off\n// Family:  cosmetic\n// Idea:    A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a peel-off gel mask lifted off in one sheet\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1\n//\n// Knob 1: Hue. The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive.\n// Knob 2: Speed. How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower.\n// Knob 3: Thickness. How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine.\n// Knob 4: Curl. How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40.\n// Buttons: K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells, built once: the pearl of the skin and the gel's uneven thickness.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 7 + o * 9973) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// Phases: the film peels, the skin shows bare, a new coat flows on, it dries.\nconst PEEL = 0, BARE = 1, COAT = 2, DRY = 3;\nconst PEEL_T = 7.5, BARE_T = 1.2, COAT_T = 2.4, DRY_T = 3.8;\n\n// The light: above and a little left, in front.\nconst LX = -0.15, LY = -0.75, LZ = -0.64, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst HX = LX * LN, HY = LY * LN, HZ = LZ * LN - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    t: 0, hue: 0, speed: 2, thick: 0, curl: 0.06,\n    phase: PEEL, pt: 0, coatAge: 99, queue: false,\n    yf: new Float32Array(W), rr: new Float32Array(W), roll: 0, R0: 6,\n    unc: new Float32Array(N).fill(-1),\n    sticks: [{ x: 20, w: 9, a: 4, age: -0.8, len: 1.2 }, { x: 46, w: 7, a: 3.5, age: -2.6, len: 1.0 }],\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n}\n\n// Where the coat's leading edge is, pt seconds into the coat: it flows fast\n// from the top and slows as it reaches the bottom.\nconst coatFront = (pt) => -4 + 136 * (1 - (1 - min(1, pt / COAT_T)) ** 2);\n// When it passed row y, for how wet that row still is.\nconst coatPassed = (y) => COAT_T * (1 - sqrt(cl(1 - (y + 4) / 136, 0, 1)));\n\n// The peel line: it starts above the top edge and leaves below the bottom.\nfunction peelY(P, pr) {\n  const span = H + 2.6 * P.R0 + 6, e = pr \u003c 0.08 ? (pr * pr) / 0.16 : pr - 0.04;\n  return -1.3 * P.R0 - 2 + (span * e) / 0.96;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], 0, 1);\n  P.curl = cl(k[3], 0, 1);\n  P.R0 = 5.5 + 10 * P.curl;\n  const d = (d0 * P.speed) / 2;\n  P.t += d;\n  P.pt += d;\n  P.coatAge += d;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.phase === DRY) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n    else if (P.phase === BARE) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0), (P.queue = true);\n    else if (P.phase === COAT) P.queue = true;\n  }\n  if (P.phase === PEEL && P.pt >= PEEL_T) (P.phase = BARE), (P.pt = 0);\n  else if (P.phase === BARE && P.pt >= BARE_T) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0);\n  else if (P.phase === COAT && P.pt >= COAT_T) {\n    P.phase = P.queue ? PEEL : DRY;\n    P.pt = 0;\n    P.queue = false;\n    if (P.phase === PEEL) P.unc.fill(-1);\n  } else if (P.phase === DRY && P.pt >= DRY_T) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n\n  // Spots where the gel holds on. Each one holds the peel line back for about\n  // a second while the film stretches, up to 5 rows, then lets go: the line\n  // snaps forward past straight and settles in a fifth of a second.\n  for (const s of P.sticks) {\n    s.age += d;\n    if (s.age > s.len + 0.35) {\n      s.age = -0.3 - 1.4 * Math.random();\n      s.x = 6 + Math.random() * 52;\n      s.w = 6 + Math.random() * 6;\n      s.a = 2.5 + Math.random() * 3;\n      s.len = 0.8 + Math.random() * 0.6;\n    }\n  }\n  if (P.phase === PEEL) {\n    const pr = P.pt / PEEL_T, Y = peelY(P, pr), t = P.t;\n    // The roll gathers the sheet and grows by half on its way down.\n    const R = P.R0 * (0.85 + 0.45 * pr);\n    P.roll = Y;\n    for (let x = 0; x \u003c W; x++) {\n      let y = Y + 1.3 * sin(0.11 * x + 0.9 * t) + 0.8 * sin(0.27 * x - 1.4 * t + 1) + 1.2 * tap(x * 0.9, t * 3);\n      for (const s of P.sticks) {\n        if (s.age \u003c 0) continue;\n        const g = exp(-(((x - s.x) / s.w) ** 2));\n        let lag;\n        if (s.age \u003c s.len) lag = s.a * (s.age / s.len) ** 1.5;\n        else {\n          const q = s.age - s.len;\n          lag = s.a * exp(-q / 0.07) * cos(q * 26);\n        }\n        y -= lag * g;\n      }\n      P.yf[x] = y;\n      P.rr[x] = R * (1 + 0.07 * sin(0.2 * x + 0.5 * t));\n      // Skin the peel has just passed over keeps a fresh glow for a while.\n      const top = min(H, max(0, floor(y)));\n      for (let yy = 0; yy \u003c top; yy++) {\n        const p = yy * W + x;\n        if (P.unc[p] \u003c 0) P.unc[p] = t;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const t = P.t, ph = P.phase, k3 = P.thick, tint = P.tint;\n  if (P.lastHue !== P.hue) {\n    // From red through orange and gold to lime the gel is lifted towards\n    // coral, peach, butter and pale lime: less saturation and more light than\n    // the skin, so it reads as a lit jelly. At 0.6 of full these hues read as\n    // brick, tan, khaki and olive.\n    let h = P.hue + 0.78;\n    h -= floor(h);\n    let dh = h - 0.13;\n    if (dh > 0.5) dh -= 1;\n    P.warm = sm(1 - abs(dh) / 0.21);\n    hsv(h, 0.68 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm, tr = tint[0], tg = tint[1], tb = tint[2];\n  // The gel's own colour at the start knobs is about 0.6 of full: deep enough\n  // that the peel reads as a change of light, not only of colour.\n  const deepV = 0.6 + 0.65 * warm - 0.14 * k3 * (1 - warm), op = 0.55 + 0.4 * k3;\n  const cf = ph === COAT ? coatFront(P.pt) : 0;\n  // A strip light's reflection drifts slowly across the gel.\n  const sweep = 52 + 34 * sin(t * 0.21);\n  // The broad glow on the skin wanders.\n  const gx = 32 + 20 * sin(t * 0.17), gy = 64 + 40 * sin(t * 0.11 + 1);\n\n  for (let x = 0; x \u003c W; x++) {\n    const yf = P.yf[x], R = P.rr[x], wob = 1.5 * sin(0.2 * x + 3 * P.pt) + sin(0.37 * x - 2 * P.pt);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      // Is there gel here, and how wet is it?\n      let film;\n      if (ph === PEEL) film = y > yf;\n      else if (ph === DRY) film = true;\n      else if (ph === BARE) film = false;\n      else film = y \u003c cf + wob;\n      const wet = film ? exp(-max(0, P.coatAge - coatPassed(y)) / 1.4) : 0;\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and mint\n      // across the panel, a broad soft glow that wanders, fine shimmer, and a\n      // fresh glow where the film has just come off.\n      const q = 0.5 * tap(x * 0.45 + 7, y * 0.45 + t * 0.8) + (x * 0.6 + y) / 170 + t * 0.03;\n      const gl = exp(-((x - gx) ** 2 + (y - gy) ** 2 * 0.3) / 1300);\n      const fr = P.unc[p] >= 0 ? exp(-(t - P.unc[p]) / 2.2) : 0;\n      const L = 0.8 + 0.13 * gl + 0.1 * fr + 0.02 * (hash(p) - 0.5);\n      let r = (1 + 0.035 * cos(TAU * q) + 0.03 * fr) * L;\n      let g = (0.875 + 0.03 * cos(TAU * (q - 0.33))) * L;\n      let b = (0.83 + 0.04 * cos(TAU * (q - 0.67)) + 0.015 * fr) * L;\n      const hs = hash(p + 101);\n      if (hs \u003c 0.022) {\n        const tw = max(0, sin(t * (2.4 + 40 * hs) + hash(p + 5) * 40)) ** 10 * (0.4 + 0.3 * gl);\n        r += tw;\n        g += tw;\n        b += tw;\n      }\n\n      if (film) {\n        // The gel: its own deep colour over the skin seen through it, uneven\n        // in thickness, deeper while wet. Wet, the strip light shows as a\n        // sharp band that the coat's ripples bend; dry, a broad soft sheen\n        // over a fine satin grain.\n        const th = tap(x * 0.8 + 60, y * 0.8 + 31);\n        const dv = deepV * (1 + (0.2 * th - 0.1 * wet) * (1 - 0.7 * warm)), thr = 1 - op;\n        r = tr * dv * op + r * (0.5 + 0.5 * tr) * thr * 0.8;\n        g = tg * dv * op + g * (0.5 + 0.5 * tg) * thr * 0.8;\n        b = tb * dv * op + b * (0.5 + 0.5 * tb) * thr * 0.8;\n        const rip = ph === COAT ? 2.5 * wet * sin((y - cf) * 0.32 - P.pt * 5) * exp(-max(0, cf - y) / 30) : 0;\n        const band = x * 0.5 + y * 0.42 + th * 4 + rip - sweep;\n        const wd = 13 - 8.5 * wet, amp = 0.15 + 0.12 * k3 + 0.55 * wet;\n        let hl = amp * exp(-((band / wd) ** 2)) + 0.3 * wet * exp(-(((band + 24) / 2.5) ** 2));\n        // Behind the coat's edge the wet gel still moves in low swells, each\n        // catching a thin line of light, and they die out as it settles.\n        if (ph === COAT && y \u003c cf + wob) hl += 0.3 * wet * max(0, sin((y - cf - wob) * 0.42 - P.pt * 5)) ** 8 * exp(-(cf - y) / 26);\n        const grain = (1 - wet) * 0.04 * (hash(p + 33) - 0.5);\n        r += hl * (0.85 + 0.15 * tr) + grain;\n        g += hl * (0.85 + 0.15 * tg) + grain;\n        b += hl * (0.85 + 0.15 * tb) + grain;\n        // The new coat's leading edge is a ridge of wet gel: a line of light\n        // on its upper slope, deeper colour where it is thickest.\n        if (ph === COAT) {\n          const e = y - (cf + wob);\n          if (e > -6) {\n            const deep = 1 - 0.28 * exp(-(((e + 1.2) / 1.3) ** 2)), hi = 0.75 * exp(-(((e + 3.2) / 0.9) ** 2));\n            r = r * deep + hi;\n            g = g * deep + hi;\n            b = b * deep + hi;\n          }\n        }\n        // Below the curl, its shadow on the film, lighter on the warm hues,\n        // where a deep shadow turns butter to olive.\n        if (ph === PEEL) {\n          const sd = (0.45 - 0.22 * warm) * exp(-max(0, y - yf - R * 0.9) / (0.7 * R + 1));\n          r *= 1 - sd;\n          g *= 1 - sd;\n          b *= 1 - sd;\n        }\n      }\n\n      // The curl: a cylinder of film lying on the skin along the peel line,\n      // its paler underside out. Its material turns as it rolls, carrying faint\n      // stretch lines and the edge of the outer turn round with it, and light\n      // coming through the gel tints its lower edge.\n      if (ph === PEEL) {\n        const v = (y - yf) / R;\n        if (v \u003c -1 && v > -1.6) {\n          // A little shade on the skin just above the roll.\n          const ao = 0.2 * sm((v + 1.6) / 0.6);\n          r *= 1 - ao;\n          g *= 1 - ao;\n          b *= 1 - ao;\n        }\n        if (v > -1.05 && v \u003c 1.05) {\n          const vv = cl(v, -0.999, 0.999), nz = sqrt(1 - vv * vv);\n          const dif = max(0, (vv * LY - nz * LZ) * LN);\n          const sp = max(0, (vv * HY - nz * HZ) * HN) ** 30;\n          const s = atan2(vv, nz) * R - P.roll;\n          const str = 0.05 * sin(s * 0.8 + tap(x * 0.7, 40) * 5);\n          let ed = (s / (TAU * R)) % 1;\n          if (ed \u003c 0) ed += 1;\n          const line = 0.16 * exp(-(((ed > 0.5 ? ed - 1 : ed) / 0.025) ** 2));\n          const lit = (0.32 + 0.3 * warm + 0.62 * dif) * (1 + str - line);\n          const rim = (1 - nz) ** 2 * 0.4, glow = 0.35 * sm((vv - 0.1) / 0.8);\n          const ur = 0.3 + 0.7 * tr, ug = 0.3 + 0.7 * tg, ub = 0.3 + 0.7 * tb;\n          const cr = ur * lit + (rim + glow) * tr + sp;\n          const cg = ug * lit + (rim + glow) * tg + sp;\n          const cbl = ub * lit + (rim + glow) * tb + sp;\n          const cov = cl((1 - abs(v)) * R + 0.5, 0, 1);\n          r += (cr - r) * cov;\n          g += (cg - g) * cov;\n          b += (cbl - b) * cov;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-peel-off","type":"code","name":"peel-off","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Peel-Off\n// Family:  cosmetic\n// Idea:    A glossy tinted gel film covers a pearly skin-toned base and an unseen hand peels it from the top edge down, the film lifting into a rolling curl with a bright rim and its paler underside out, the peel line wavering as the film catches, stretches and snaps free, until the sheet leaves the bottom and a wet new coat flows down from the top and dries to a soft satin for the next peel.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 33, after a peel-off gel mask lifted off in one sheet\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1\n//\n// Knob 1: Hue. The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive.\n// Knob 2: Speed. How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower.\n// Knob 3: Thickness. How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine.\n// Knob 4: Curl. How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40.\n// Buttons: K1 tap starts the peel at once; on bare skin it lays the new coat first and peels as soon as the coat is down.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells, built once: the pearl of the skin and the gel's uneven thickness.\nconst T = 128, TM = T - 1;\nconst TEX = new Float32Array(T * T);\nfunction buildTex() {\n  TEX.fill(0);\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 7 + o * 9973) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// Phases: the film peels, the skin shows bare, a new coat flows on, it dries.\nconst PEEL = 0, BARE = 1, COAT = 2, DRY = 3;\nconst PEEL_T = 7.5, BARE_T = 1.2, COAT_T = 2.4, DRY_T = 3.8;\n\n// The light: above and a little left, in front.\nconst LX = -0.15, LY = -0.75, LZ = -0.64, LN = 1 / sqrt(LX * LX + LY * LY + LZ * LZ);\nconst HX = LX * LN, HY = LY * LN, HZ = LZ * LN - 1, HN = 1 / sqrt(HX * HX + HY * HY + HZ * HZ);\n\nexport function setup(params) {\n  buildTex();\n  params.s = {\n    t: 0, hue: 0, speed: 2, thick: 0, curl: 0.06,\n    phase: PEEL, pt: 0, coatAge: 99, queue: false,\n    yf: new Float32Array(W), rr: new Float32Array(W), roll: 0, R0: 6,\n    unc: new Float32Array(N).fill(-1),\n    sticks: [{ x: 20, w: 9, a: 4, age: -0.8, len: 1.2 }, { x: 46, w: 7, a: 3.5, age: -2.6, len: 1.0 }],\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n}\n\n// Where the coat's leading edge is, pt seconds into the coat: it flows fast\n// from the top and slows as it reaches the bottom.\nconst coatFront = (pt) => -4 + 136 * (1 - (1 - min(1, pt / COAT_T)) ** 2);\n// When it passed row y, for how wet that row still is.\nconst coatPassed = (y) => COAT_T * (1 - sqrt(cl(1 - (y + 4) / 136, 0, 1)));\n\n// The peel line: it starts above the top edge and leaves below the bottom.\nfunction peelY(P, pr) {\n  const span = H + 2.6 * P.R0 + 6, e = pr \u003c 0.08 ? (pr * pr) / 0.16 : pr - 0.04;\n  return -1.3 * P.R0 - 2 + (span * e) / 0.96;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.thick = cl(k[2], 0, 1);\n  P.curl = cl(k[3], 0, 1);\n  P.R0 = 5.5 + 10 * P.curl;\n  const d = (d0 * P.speed) / 2;\n  P.t += d;\n  P.pt += d;\n  P.coatAge += d;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.phase === DRY) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n    else if (P.phase === BARE) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0), (P.queue = true);\n    else if (P.phase === COAT) P.queue = true;\n  }\n  if (P.phase === PEEL && P.pt >= PEEL_T) (P.phase = BARE), (P.pt = 0);\n  else if (P.phase === BARE && P.pt >= BARE_T) (P.phase = COAT), (P.pt = 0), (P.coatAge = 0);\n  else if (P.phase === COAT && P.pt >= COAT_T) {\n    P.phase = P.queue ? PEEL : DRY;\n    P.pt = 0;\n    P.queue = false;\n    if (P.phase === PEEL) P.unc.fill(-1);\n  } else if (P.phase === DRY && P.pt >= DRY_T) (P.phase = PEEL), (P.pt = 0), P.unc.fill(-1);\n\n  // Spots where the gel holds on. Each one holds the peel line back for about\n  // a second while the film stretches, up to 5 rows, then lets go: the line\n  // snaps forward past straight and settles in a fifth of a second.\n  for (const s of P.sticks) {\n    s.age += d;\n    if (s.age > s.len + 0.35) {\n      s.age = -0.3 - 1.4 * Math.random();\n      s.x = 6 + Math.random() * 52;\n      s.w = 6 + Math.random() * 6;\n      s.a = 2.5 + Math.random() * 3;\n      s.len = 0.8 + Math.random() * 0.6;\n    }\n  }\n  if (P.phase === PEEL) {\n    const pr = P.pt / PEEL_T, Y = peelY(P, pr), t = P.t;\n    // The roll gathers the sheet and grows by half on its way down.\n    const R = P.R0 * (0.85 + 0.45 * pr);\n    P.roll = Y;\n    for (let x = 0; x \u003c W; x++) {\n      let y = Y + 1.3 * sin(0.11 * x + 0.9 * t) + 0.8 * sin(0.27 * x - 1.4 * t + 1) + 1.2 * tap(x * 0.9, t * 3);\n      for (const s of P.sticks) {\n        if (s.age \u003c 0) continue;\n        const g = exp(-(((x - s.x) / s.w) ** 2));\n        let lag;\n        if (s.age \u003c s.len) lag = s.a * (s.age / s.len) ** 1.5;\n        else {\n          const q = s.age - s.len;\n          lag = s.a * exp(-q / 0.07) * cos(q * 26);\n        }\n        y -= lag * g;\n      }\n      P.yf[x] = y;\n      P.rr[x] = R * (1 + 0.07 * sin(0.2 * x + 0.5 * t));\n      // Skin the peel has just passed over keeps a fresh glow for a while.\n      const top = min(H, max(0, floor(y)));\n      for (let yy = 0; yy \u003c top; yy++) {\n        const p = yy * W + x;\n        if (P.unc[p] \u003c 0) P.unc[p] = t;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const t = P.t, ph = P.phase, k3 = P.thick, tint = P.tint;\n  if (P.lastHue !== P.hue) {\n    // From red through orange and gold to lime the gel is lifted towards\n    // coral, peach, butter and pale lime: less saturation and more light than\n    // the skin, so it reads as a lit jelly. At 0.6 of full these hues read as\n    // brick, tan, khaki and olive.\n    let h = P.hue + 0.78;\n    h -= floor(h);\n    let dh = h - 0.13;\n    if (dh > 0.5) dh -= 1;\n    P.warm = sm(1 - abs(dh) / 0.21);\n    hsv(h, 0.68 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm, tr = tint[0], tg = tint[1], tb = tint[2];\n  // The gel's own colour at the start knobs is about 0.6 of full: deep enough\n  // that the peel reads as a change of light, not only of colour.\n  const deepV = 0.6 + 0.65 * warm - 0.14 * k3 * (1 - warm), op = 0.55 + 0.4 * k3;\n  const cf = ph === COAT ? coatFront(P.pt) : 0;\n  // A strip light's reflection drifts slowly across the gel.\n  const sweep = 52 + 34 * sin(t * 0.21);\n  // The broad glow on the skin wanders.\n  const gx = 32 + 20 * sin(t * 0.17), gy = 64 + 40 * sin(t * 0.11 + 1);\n\n  for (let x = 0; x \u003c W; x++) {\n    const yf = P.yf[x], R = P.rr[x], wob = 1.5 * sin(0.2 * x + 3 * P.pt) + sin(0.37 * x - 2 * P.pt);\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      // Is there gel here, and how wet is it?\n      let film;\n      if (ph === PEEL) film = y > yf;\n      else if (ph === DRY) film = true;\n      else if (ph === BARE) film = false;\n      else film = y \u003c cf + wob;\n      const wet = film ? exp(-max(0, P.coatAge - coatPassed(y)) / 1.4) : 0;\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and mint\n      // across the panel, a broad soft glow that wanders, fine shimmer, and a\n      // fresh glow where the film has just come off.\n      const q = 0.5 * tap(x * 0.45 + 7, y * 0.45 + t * 0.8) + (x * 0.6 + y) / 170 + t * 0.03;\n      const gl = exp(-((x - gx) ** 2 + (y - gy) ** 2 * 0.3) / 1300);\n      const fr = P.unc[p] >= 0 ? exp(-(t - P.unc[p]) / 2.2) : 0;\n      const L = 0.8 + 0.13 * gl + 0.1 * fr + 0.02 * (hash(p) - 0.5);\n      let r = (1 + 0.035 * cos(TAU * q) + 0.03 * fr) * L;\n      let g = (0.875 + 0.03 * cos(TAU * (q - 0.33))) * L;\n      let b = (0.83 + 0.04 * cos(TAU * (q - 0.67)) + 0.015 * fr) * L;\n      const hs = hash(p + 101);\n      if (hs \u003c 0.022) {\n        const tw = max(0, sin(t * (2.4 + 40 * hs) + hash(p + 5) * 40)) ** 10 * (0.4 + 0.3 * gl);\n        r += tw;\n        g += tw;\n        b += tw;\n      }\n\n      if (film) {\n        // The gel: its own deep colour over the skin seen through it, uneven\n        // in thickness, deeper while wet. Wet, the strip light shows as a\n        // sharp band that the coat's ripples bend; dry, a broad soft sheen\n        // over a fine satin grain.\n        const th = tap(x * 0.8 + 60, y * 0.8 + 31);\n        const dv = deepV * (1 + (0.2 * th - 0.1 * wet) * (1 - 0.7 * warm)), thr = 1 - op;\n        r = tr * dv * op + r * (0.5 + 0.5 * tr) * thr * 0.8;\n        g = tg * dv * op + g * (0.5 + 0.5 * tg) * thr * 0.8;\n        b = tb * dv * op + b * (0.5 + 0.5 * tb) * thr * 0.8;\n        const rip = ph === COAT ? 2.5 * wet * sin((y - cf) * 0.32 - P.pt * 5) * exp(-max(0, cf - y) / 30) : 0;\n        const band = x * 0.5 + y * 0.42 + th * 4 + rip - sweep;\n        const wd = 13 - 8.5 * wet, amp = 0.15 + 0.12 * k3 + 0.55 * wet;\n        let hl = amp * exp(-((band / wd) ** 2)) + 0.3 * wet * exp(-(((band + 24) / 2.5) ** 2));\n        // Behind the coat's edge the wet gel still moves in low swells, each\n        // catching a thin line of light, and they die out as it settles.\n        if (ph === COAT && y \u003c cf + wob) hl += 0.3 * wet * max(0, sin((y - cf - wob) * 0.42 - P.pt * 5)) ** 8 * exp(-(cf - y) / 26);\n        const grain = (1 - wet) * 0.04 * (hash(p + 33) - 0.5);\n        r += hl * (0.85 + 0.15 * tr) + grain;\n        g += hl * (0.85 + 0.15 * tg) + grain;\n        b += hl * (0.85 + 0.15 * tb) + grain;\n        // The new coat's leading edge is a ridge of wet gel: a line of light\n        // on its upper slope, deeper colour where it is thickest.\n        if (ph === COAT) {\n          const e = y - (cf + wob);\n          if (e > -6) {\n            const deep = 1 - 0.28 * exp(-(((e + 1.2) / 1.3) ** 2)), hi = 0.75 * exp(-(((e + 3.2) / 0.9) ** 2));\n            r = r * deep + hi;\n            g = g * deep + hi;\n            b = b * deep + hi;\n          }\n        }\n        // Below the curl, its shadow on the film, lighter on the warm hues,\n        // where a deep shadow turns butter to olive.\n        if (ph === PEEL) {\n          const sd = (0.45 - 0.22 * warm) * exp(-max(0, y - yf - R * 0.9) / (0.7 * R + 1));\n          r *= 1 - sd;\n          g *= 1 - sd;\n          b *= 1 - sd;\n        }\n      }\n\n      // The curl: a cylinder of film lying on the skin along the peel line,\n      // its paler underside out. Its material turns as it rolls, carrying faint\n      // stretch lines and the edge of the outer turn round with it, and light\n      // coming through the gel tints its lower edge.\n      if (ph === PEEL) {\n        const v = (y - yf) / R;\n        if (v \u003c -1 && v > -1.6) {\n          // A little shade on the skin just above the roll.\n          const ao = 0.2 * sm((v + 1.6) / 0.6);\n          r *= 1 - ao;\n          g *= 1 - ao;\n          b *= 1 - ao;\n        }\n        if (v > -1.05 && v \u003c 1.05) {\n          const vv = cl(v, -0.999, 0.999), nz = sqrt(1 - vv * vv);\n          const dif = max(0, (vv * LY - nz * LZ) * LN);\n          const sp = max(0, (vv * HY - nz * HZ) * HN) ** 30;\n          const s = atan2(vv, nz) * R - P.roll;\n          const str = 0.05 * sin(s * 0.8 + tap(x * 0.7, 40) * 5);\n          let ed = (s / (TAU * R)) % 1;\n          if (ed \u003c 0) ed += 1;\n          const line = 0.16 * exp(-(((ed > 0.5 ? ed - 1 : ed) / 0.025) ** 2));\n          const lit = (0.32 + 0.3 * warm + 0.62 * dif) * (1 + str - line);\n          const rim = (1 - nz) ** 2 * 0.4, glow = 0.35 * sm((vv - 0.1) / 0.8);\n          const ur = 0.3 + 0.7 * tr, ug = 0.3 + 0.7 * tg, ub = 0.3 + 0.7 * tb;\n          const cr = ur * lit + (rim + glow) * tr + sp;\n          const cg = ug * lit + (rim + glow) * tg + sp;\n          const cbl = ub * lit + (rim + glow) * tb + sp;\n          const cov = cl((1 - abs(v)) * R + 0.5, 0, 1);\n          r += (cr - r) * cov;\n          g += (cg - g) * cov;\n          b += (cbl - b) * cov;\n        }\n      }\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Thickness=0..1, Curl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The gel's colour, all the way round the wheel from violet at 0; the curl shows it paler. From red round to lime the gel is laid lighter than the skin, coral, peach, butter and pale lime, because at the violet's depth those hues read as brick, tan, khaki and olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it all runs. At 2 the peel crosses the 128 rows in 7.5 s, the bare skin shows for 1.2 s, the new coat flows down in 2.4 s and each row of it dries in about 3, 15 s round; at 0.2 ten times slower."},{"name":"Thickness","min":0,"max":1,"about":"How thick the gel is laid. At 0 a sheer film that lets the pearl of the skin show through it; at 1 a deep, nearly opaque coat with a stronger shine."},{"name":"Curl","min":0,"max":1,"about":"How tight the film rolls as it comes away: at 0 a roll 9 rows across at the top that grows to 14 as it gathers the sheet on its way down; at 1, 26 growing to 40."}],"start":[0,2,0,0.06],"measures":{"motion":0.2317,"detail":0.0136,"edges":0.1088,"complexity":2.1892,"coverage":1,"colour":0.193,"drift":0.226},"knobResponse":[0.1816,0.2118,0.0647,0.0647]},{"slug":"peg-light","title":"Peg Light","family":"toy","round":18,"note":"1967년 Lite-Brite 처럼 검은 판의 엇갈린 구멍에 색 페그를 하나씩 꽂아 로켓, 돛배, 화분, 물고기, 집, 광대 그림을 채워요. 다 차면 4초 머문 뒤 페그가 위에서부터 쓸려 빠지고 다음 종이가 올라가요. K1 을 누르면 판을 비우고 같은 그림을 처음부터 다시 꽂아요.","idea":"Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.","buttons":"K1 tap pushes every peg out and starts the same picture again.","code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-peg-light","type":"code","name":"peg-light","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulb","min":0,"max":1,"about":"The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first."},{"name":"Speed","min":0.2,"max":3,"about":"Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too."},{"name":"Picture","min":0,"max":5,"about":"Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order."},{"name":"Glow","min":0,"max":1,"about":"How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.0352,"detail":0.2377,"edges":0.8627,"complexity":0.6614,"coverage":0.1604,"colour":0.2171,"drift":0.0512},"knobResponse":[0.0548,0.0566,0.1395,0.0943]},{"slug":"pendulum-wave","title":"Pendulum Wave","family":"physics","round":24,"note":"길이가 조금씩 다른 진자 줄을 위에서 내려다봐요. 한꺼번에 놓은 추들이 한 줄로 흔들리다가 뱀처럼 휘고, 세 줄, 두 줄로 엇갈렸다가 28초 만에 다시 한 줄로 모여요. K1 이 강철에서 놋쇠와 구리를 지나 무지개 유리구슬까지 추를 바꾸고, K4 를 올리면 추가 지나간 자리에 빛 꼬리가 남아요.","idea":"Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.","buttons":"K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.","code":"// ===== Patternflow pattern =====\n// Title:   Pendulum Wave\n// Family:  physics\n// Idea:    Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the pendulum wave demonstration of the Harvard Natural Sciences Lecture Demonstrations, fifteen pendulums tuned to 51 to 65 swings a minute\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1\n//\n// Knob 1: Finish. The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow.\n// Knob 2: Speed. The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again.\n// Knob 3: Pendulums. How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22.\n// Knob 4: Trails. A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them.\n// Buttons: K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, cos, sqrt, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// The beam's centre line (it covers columns 30 and 31) and the swing.\nconst BX = 31;\nconst AMP = 22;\n// One cycle at Speed 2, in seconds, and how many times the longest\n// pendulum swings in it; each shorter one swings once more.\nconst TC = 28;\nconst N0 = 22;\n// The lamp, off the left edge, and the beam's height over the table, in\n// LEDs. The longest string is 13 LEDs, so its bob hangs 4 over the table.\nconst [LX, LY, LZ] = [-34, 58, 120];\nconst ZB = 17;\nconst L0 = 13;\nconst MAXN = 24;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The lamp's colour, and the metal, at Finish 0, 1/4, 1/2 and 3/4 and on.\nconst LAMPS = [\n  [184, 206, 248],\n  [255, 214, 160],\n  [255, 192, 142],\n  [238, 236, 226],\n  [238, 236, 226],\n];\nconst METALS = [\n  [196, 208, 226],\n  [236, 172, 72],\n  [240, 122, 74],\n  [240, 122, 74],\n  [240, 122, 74],\n];\nconst stop = (T, f) => {\n  const u = cl(f, 0, 1) * 4, i = min(3, floor(u));\n  return T[i].map((v, c) => mix(v, T[i + 1][c], u - i));\n};\n\n// The table: walnut boards running along the beam, and a pale epoxy bench.\n// The lamp's pool on it never moves, so it is worked out once.\nfunction build(P) {\n  const seams = [11, 37, 58];\n  const ax = 14 - LX, ay = 62 - LY, az = -LZ, al = sqrt(ax * ax + ay * ay + az * az);\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    let pk = 0;\n    for (const s of seams) if (x >= s) pk++;\n    const sx = x + pk * 17.3, warp = 2.2 * vn(sx * 0.12, y * 0.018 + pk * 7);\n    const grain = vn(sx * 0.62 + warp, y * 0.04 + pk * 13), fine = vn(sx * 1.9, y * 0.22 + pk * 5);\n    const k = (0.74 + 0.36 * grain + 0.12 * fine) * (seams.includes(x) ? 0.6 : 1) * (0.88 + 0.24 * hash(pk, 99));\n    P.wood[i * 3] = 0.76 * k;\n    P.wood[i * 3 + 1] = 0.37 * k;\n    P.wood[i * 3 + 2] = 0.16 * k;\n    const b = 0.95 + 0.05 * hash(x, y + 300) + 0.05 * vn(x * 0.25, y * 0.25);\n    P.bench[i * 3] = 0.8 * b;\n    P.bench[i * 3 + 1] = 0.84 * b;\n    P.bench[i * 3 + 2] = 0.8 * b;\n    // Inverse square and the floor's slant, inside the shade's cone.\n    const vx = x + 0.5 - LX, vy = y + 0.5 - LY, d = sqrt(vx * vx + vy * vy + LZ * LZ);\n    const ca = (vx * ax + vy * ay + LZ * -az) / (d * al);\n    const p = (LZ / d) ** 3 * (0.25 + 0.75 * sm(0.83, 0.97, ca));\n    P.pool[i] = p;\n    top = max(top, p);\n    // The beam's shadow: it lies level, so its shadow is a straight band.\n    const bx = LX + (BX - LX) * (LZ / (LZ - ZB)), hw = LZ / (LZ - ZB);\n    P.beamD[i] = 0.5 * (1 - sm(hw - 0.9, hw + 0.9, Math.abs(x + 0.5 - bx)));\n  }\n  for (let i = 0; i \u003c N; i++) P.pool[i] /= top;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    wood: F(N * 3), bench: F(N * 3), pool: F(N), beamD: F(N), D: F(N), tr: F(N * 3), f: F(N * 3),\n    x: F(MAXN), prev: F(MAXN), from: F(MAXN), y: F(MAXN), z: F(MAXN), r: F(MAXN),\n    c: 0, n: 0, hold: 0.3, board: 1, fin: 0, tau: 0.05, first: true,\n  };\n  params.s.from.fill(BX + AMP);\n  build(params.s);\n}\n\n// Where each pendulum hangs, how high its bob is and how big it looks.\nfunction layout(P, n) {\n  P.n = n;\n  const s = H / n, rb = min(2.35, 0.31 * s);\n  for (let i = 0; i \u003c MAXN; i++) {\n    P.y[i] = floor(s / 2 + s * i) + 0.5;\n    // A string's length goes as the square of its period.\n    P.z[i] = ZB - L0 * (N0 / (N0 + i)) ** 2;\n    P.r[i] = rb * (0.93 + 0.022 * P.z[i]);\n  }\n}\n\n// The colours the finish gives the lamp and each bob.\nfunction colours(P) {\n  const f = P.fin, n = P.n;\n  P.lamp = stop(LAMPS, f);\n  P.glass = sm(0.52, 0.74, f);\n  P.benchK = sm(0.5, 0.74, f);\n  // Brass and copper tint their own highlights; steel and glass do not.\n  P.tint = (0.15 + 0.7 * sm(0, 0.25, f)) * (1 - P.glass);\n  const m = stop(METALS, f), u = sm(0.75, 1, f);\n  P.col = [];\n  // Sea-green glass at 3/4, opening into a rainbow down the row at 1.\n  for (let i = 0; i \u003c n; i++) {\n    const b = hsv(mix(0.42, 0.02 + (0.8 * i) / (n - 1), u), 0.82, 1);\n    P.col.push(m.map((v, c) => mix(v, b[c], P.glass)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const real = cl(dt || 0, 0, 0.1), d = (real * cl(k[1], 0.2, 3)) / 2;\n  P.fin = cl(k[0], 0, 1);\n  P.tau = 0.05 + 0.3 * cl(k[3], 0, 1) ** 1.6;\n  const n = cl(round(k[2]), 16, 24);\n  if (n !== P.n) layout(P, n);\n  colours(P);\n\n  // The button: a board comes in, every bob is caught against it, and all\n  // are let go at once.\n  if (input.btnPressed && input.btnPressed[0] && P.hold \u003c 0) {\n    P.hold = 0;\n    P.from.set(P.x);\n  }\n  if (P.hold >= 0) {\n    P.hold += real;\n    const e = sm(0.05, 0.6, P.hold);\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = mix(P.from[i], BX + AMP, e);\n    P.board = sm(0, 0.35, P.hold);\n    if (P.hold >= 0.95) (P.hold = -1), (P.c = 0);\n  } else {\n    P.c = (P.c + d) % TC;\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = BX + AMP * cos((2 * PI * (N0 + i) * P.c) / TC);\n    P.board = max(0, P.board - real * 5);\n  }\n  if (P.first) (P.first = false), P.prev.set(P.x);\n\n  // The long exposure fades in the pendulums' own time, so a trail is as\n  // long on the table at any speed. Each bob paints the way it came this\n  // frame, older parts dimmer.\n  const tr = P.tr, fade = exp(-d / P.tau), span = max(d, 0.004);\n  for (let i = 0; i \u003c tr.length; i++) tr[i] *= fade;\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = P.prev[i], x1 = P.x[i], y = P.y[i], rt = P.r[i] * 0.8, steps = max(1, ceil(Math.abs(x1 - x0) / 0.6));\n    const col = P.col[i].map((v, c) => (v * 0.55 + P.lamp[c] * 0.25) * 0.85);\n    for (let s = 1; s \u003c= steps; s++) {\n      const t = s / steps, xs = mix(x0, x1, t), lev = exp((-(1 - t) * span) / P.tau);\n      for (let yy = floor(y - rt - 1); yy \u003c= y + rt + 1; yy++)\n        for (let xx = floor(xs - rt - 1); xx \u003c= xs + rt + 1; xx++) {\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const dx = xx + 0.5 - xs, dy = yy + 0.5 - y, q = (dx * dx + dy * dy) / (rt * rt);\n          if (q >= 1.6) continue;\n          const a = lev * exp(-1.6 * q), o = (yy * W + xx) * 3;\n          for (let c = 0; c \u003c 3; c++) tr[o + c] = max(tr[o + c], col[c] * a);\n        }\n    }\n  }\n  P.prev.set(P.x);\n}\n\n// Where the lamp throws a point at height z onto the table.\nconst proj = (x, y, z) => {\n  const k = LZ / (LZ - z);\n  return [LX + (x - LX) * k, LY + (y - LY) * k];\n};\n\n// A shiny ball, sampled two by two inside each LED.\nfunction ball(F, cx, cy, cz, r, base, lamp, g, tint) {\n  const sc = lamp.map((v, c) => v * mix(1, (base[c] / 255) * 1.15, tint));\n  // The light leans twice as far as the lamp really stands, so the glint\n  // sits clearly on the lamp's side of a ball five LEDs across.\n  let lx = 2 * (LX - cx), ly = 2 * (LY - cy), lz = LZ - cz;\n  const ll = sqrt(lx * lx + ly * ly + lz * lz);\n  (lx /= ll), (ly /= ll), (lz /= ll);\n  let hx = lx, hy = ly, hz = lz + 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  (hx /= hl), (hy /= hl), (hz /= hl);\n  const lxy = sqrt(lx * lx + ly * ly) || 1;\n  const col = [0, 0, 0];\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      let cov = 0;\n      col[0] = col[1] = col[2] = 0;\n      for (let sy = 0; sy \u003c 2; sy++)\n        for (let sx = 0; sx \u003c 2; sx++) {\n          const dx = (x + 0.25 + 0.5 * sx - cx) / r, dy = (y + 0.25 + 0.5 * sy - cy) / r, q = dx * dx + dy * dy;\n          if (q >= 1) continue;\n          cov += 0.25;\n          const nz = sqrt(1 - q), diff = max(0, dx * lx + dy * ly + nz * lz), nh = max(0, dx * hx + dy * hy + nz * hz), spec = nh ** 18, sheen = nh ** 3;\n          // Metal: the lamp's side lit, the rim holding the dark table.\n          const rim = 0.4 + 0.6 * nz, back = max(0, -(dx * lx + dy * ly) / lxy) * sqrt(q);\n          for (let c = 0; c \u003c 3; c++) {\n            const m = base[c] * (0.1 + 0.85 * diff * sqrt(diff)) * rim, gl = base[c] * (0.3 + 0.25 * diff + 0.9 * back);\n            col[c] += (mix(m, gl, g) + sc[c] * (spec * 1.6 + 0.12 * sheen)) * 0.25;\n          }\n        }\n      if (cov \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = F[o + c] * (1 - cov) + col[c];\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const F = P.f, D = P.D, n = P.n, lamp = P.lamp, g = P.glass, bk = P.benchK;\n\n  // Shadows on the table: the beam, each string and each bob. A bob higher\n  // up throws its shadow further from the lamp and softer.\n  D.set(P.beamD);\n  const sh = [];\n  for (let i = 0; i \u003c n; i++) {\n    const [sx, sy] = proj(P.x[i], P.y[i], P.z[i]), [px, py] = proj(BX, P.y[i], ZB);\n    sh.push([sx, sy]);\n    const rs = P.r[i] * 0.95, pen = 0.45 + 0.09 * P.z[i], dk = (0.9 - 0.02 * P.z[i]) * (1 - 0.15 * g);\n    for (let y = floor(sy - rs - pen - 1); y \u003c= sy + rs + pen + 1; y++)\n      for (let x = floor(sx - rs - pen - 1); x \u003c= sx + rs + pen + 1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const dd = sqrt((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2), v = dk * (1 - sm(rs - pen, rs + pen, dd)), j = y * W + x;\n        if (v > D[j]) D[j] = v;\n      }\n    const len = sqrt((sx - px) ** 2 + (sy - py) ** 2), m = ceil(len * 1.5);\n    for (let s = 0; s \u003c= m; s++) {\n      const t = s / max(1, m), x = floor(mix(px, sx, t)), y = floor(mix(py, sy, t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && D[y * W + x] \u003c 0.2) D[y * W + x] = 0.2;\n    }\n  }\n\n  // The table under the lamp.\n  const fl = 0.42;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const e = (0.1 + 0.9 * P.pool[i] * (1 - D[i])) * fl;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(P.wood[o + c], P.bench[o + c], bk) * lamp[c] * e + P.tr[o + c];\n  }\n  // A glass bead gathers the lamp into a spot of its colour in its shadow.\n  if (g > 0.01)\n    for (let i = 0; i \u003c n; i++) {\n      const [sx, sy] = sh[i], rc = P.r[i] * 0.55, col = P.col[i];\n      for (let y = floor(sy - 3); y \u003c= sy + 3; y++)\n        for (let x = floor(sx - 3); x \u003c= sx + 3; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const q = ((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2) / (rc * rc), a = g * 0.75 * exp(-q) * (0.4 + 0.6 * P.pool[y * W + x]), o = (y * W + x) * 3;\n          for (let c = 0; c \u003c 3; c++) F[o + c] += col[c] * a;\n        }\n    }\n\n  // Strings: a fine line from the beam out to each bob, catching the lamp.\n  for (let i = 0; i \u003c n; i++) {\n    const x1 = P.x[i], y = floor(P.y[i]), a0 = min(BX, x1), a1 = max(BX, x1);\n    for (let x = floor(a0); x \u003c a1; x++) {\n      if (x \u003c 0 || x >= W) continue;\n      const o = (y * W + x) * 3, a = 0.5 * cl(min(x + 1 - a0, a1 - x), 0, 1);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], lamp[c] * 0.5, a);\n    }\n  }\n  // The bobs, the higher ones last.\n  for (let i = 0; i \u003c n; i++) ball(F, P.x[i], P.y[i], P.z[i], P.r[i], P.col[i], lamp, g, P.tint);\n\n  // The release board, a strip of pale wood that holds the row straight.\n  if (P.board > 0.01) {\n    const bx = BX + AMP + 3.2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = floor(bx); x \u003c bx + 2 && x \u003c W; x++) {\n        const o = (y * W + x) * 3, v = x === floor(bx) ? 0.85 : 0.55;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [224, 186, 132][c] * (lamp[c] / 255) * v, P.board);\n      }\n  }\n\n  // The beam over everything: brushed metal, its lamp side bright, with a\n  // clamp at every pivot.\n  for (let y = 0; y \u003c H; y++) {\n    const grain = 0.92 + 0.08 * hash(y, 7);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = (x \u003c BX ? 0.5 : 0.24) * grain;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    const y = floor(P.y[i]);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = x \u003c BX ? 0.78 : 0.4;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-pendulum-wave","type":"code","name":"pendulum-wave","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pendulum Wave\n// Family:  physics\n// Idea:    Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the pendulum wave demonstration of the Harvard Natural Sciences Lecture Demonstrations, fifteen pendulums tuned to 51 to 65 swings a minute\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1\n//\n// Knob 1: Finish. The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow.\n// Knob 2: Speed. The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again.\n// Knob 3: Pendulums. How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22.\n// Knob 4: Trails. A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them.\n// Buttons: K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, cos, sqrt, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// The beam's centre line (it covers columns 30 and 31) and the swing.\nconst BX = 31;\nconst AMP = 22;\n// One cycle at Speed 2, in seconds, and how many times the longest\n// pendulum swings in it; each shorter one swings once more.\nconst TC = 28;\nconst N0 = 22;\n// The lamp, off the left edge, and the beam's height over the table, in\n// LEDs. The longest string is 13 LEDs, so its bob hangs 4 over the table.\nconst [LX, LY, LZ] = [-34, 58, 120];\nconst ZB = 17;\nconst L0 = 13;\nconst MAXN = 24;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The lamp's colour, and the metal, at Finish 0, 1/4, 1/2 and 3/4 and on.\nconst LAMPS = [\n  [184, 206, 248],\n  [255, 214, 160],\n  [255, 192, 142],\n  [238, 236, 226],\n  [238, 236, 226],\n];\nconst METALS = [\n  [196, 208, 226],\n  [236, 172, 72],\n  [240, 122, 74],\n  [240, 122, 74],\n  [240, 122, 74],\n];\nconst stop = (T, f) => {\n  const u = cl(f, 0, 1) * 4, i = min(3, floor(u));\n  return T[i].map((v, c) => mix(v, T[i + 1][c], u - i));\n};\n\n// The table: walnut boards running along the beam, and a pale epoxy bench.\n// The lamp's pool on it never moves, so it is worked out once.\nfunction build(P) {\n  const seams = [11, 37, 58];\n  const ax = 14 - LX, ay = 62 - LY, az = -LZ, al = sqrt(ax * ax + ay * ay + az * az);\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    let pk = 0;\n    for (const s of seams) if (x >= s) pk++;\n    const sx = x + pk * 17.3, warp = 2.2 * vn(sx * 0.12, y * 0.018 + pk * 7);\n    const grain = vn(sx * 0.62 + warp, y * 0.04 + pk * 13), fine = vn(sx * 1.9, y * 0.22 + pk * 5);\n    const k = (0.74 + 0.36 * grain + 0.12 * fine) * (seams.includes(x) ? 0.6 : 1) * (0.88 + 0.24 * hash(pk, 99));\n    P.wood[i * 3] = 0.76 * k;\n    P.wood[i * 3 + 1] = 0.37 * k;\n    P.wood[i * 3 + 2] = 0.16 * k;\n    const b = 0.95 + 0.05 * hash(x, y + 300) + 0.05 * vn(x * 0.25, y * 0.25);\n    P.bench[i * 3] = 0.8 * b;\n    P.bench[i * 3 + 1] = 0.84 * b;\n    P.bench[i * 3 + 2] = 0.8 * b;\n    // Inverse square and the floor's slant, inside the shade's cone.\n    const vx = x + 0.5 - LX, vy = y + 0.5 - LY, d = sqrt(vx * vx + vy * vy + LZ * LZ);\n    const ca = (vx * ax + vy * ay + LZ * -az) / (d * al);\n    const p = (LZ / d) ** 3 * (0.25 + 0.75 * sm(0.83, 0.97, ca));\n    P.pool[i] = p;\n    top = max(top, p);\n    // The beam's shadow: it lies level, so its shadow is a straight band.\n    const bx = LX + (BX - LX) * (LZ / (LZ - ZB)), hw = LZ / (LZ - ZB);\n    P.beamD[i] = 0.5 * (1 - sm(hw - 0.9, hw + 0.9, Math.abs(x + 0.5 - bx)));\n  }\n  for (let i = 0; i \u003c N; i++) P.pool[i] /= top;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    wood: F(N * 3), bench: F(N * 3), pool: F(N), beamD: F(N), D: F(N), tr: F(N * 3), f: F(N * 3),\n    x: F(MAXN), prev: F(MAXN), from: F(MAXN), y: F(MAXN), z: F(MAXN), r: F(MAXN),\n    c: 0, n: 0, hold: 0.3, board: 1, fin: 0, tau: 0.05, first: true,\n  };\n  params.s.from.fill(BX + AMP);\n  build(params.s);\n}\n\n// Where each pendulum hangs, how high its bob is and how big it looks.\nfunction layout(P, n) {\n  P.n = n;\n  const s = H / n, rb = min(2.35, 0.31 * s);\n  for (let i = 0; i \u003c MAXN; i++) {\n    P.y[i] = floor(s / 2 + s * i) + 0.5;\n    // A string's length goes as the square of its period.\n    P.z[i] = ZB - L0 * (N0 / (N0 + i)) ** 2;\n    P.r[i] = rb * (0.93 + 0.022 * P.z[i]);\n  }\n}\n\n// The colours the finish gives the lamp and each bob.\nfunction colours(P) {\n  const f = P.fin, n = P.n;\n  P.lamp = stop(LAMPS, f);\n  P.glass = sm(0.52, 0.74, f);\n  P.benchK = sm(0.5, 0.74, f);\n  // Brass and copper tint their own highlights; steel and glass do not.\n  P.tint = (0.15 + 0.7 * sm(0, 0.25, f)) * (1 - P.glass);\n  const m = stop(METALS, f), u = sm(0.75, 1, f);\n  P.col = [];\n  // Sea-green glass at 3/4, opening into a rainbow down the row at 1.\n  for (let i = 0; i \u003c n; i++) {\n    const b = hsv(mix(0.42, 0.02 + (0.8 * i) / (n - 1), u), 0.82, 1);\n    P.col.push(m.map((v, c) => mix(v, b[c], P.glass)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const real = cl(dt || 0, 0, 0.1), d = (real * cl(k[1], 0.2, 3)) / 2;\n  P.fin = cl(k[0], 0, 1);\n  P.tau = 0.05 + 0.3 * cl(k[3], 0, 1) ** 1.6;\n  const n = cl(round(k[2]), 16, 24);\n  if (n !== P.n) layout(P, n);\n  colours(P);\n\n  // The button: a board comes in, every bob is caught against it, and all\n  // are let go at once.\n  if (input.btnPressed && input.btnPressed[0] && P.hold \u003c 0) {\n    P.hold = 0;\n    P.from.set(P.x);\n  }\n  if (P.hold >= 0) {\n    P.hold += real;\n    const e = sm(0.05, 0.6, P.hold);\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = mix(P.from[i], BX + AMP, e);\n    P.board = sm(0, 0.35, P.hold);\n    if (P.hold >= 0.95) (P.hold = -1), (P.c = 0);\n  } else {\n    P.c = (P.c + d) % TC;\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = BX + AMP * cos((2 * PI * (N0 + i) * P.c) / TC);\n    P.board = max(0, P.board - real * 5);\n  }\n  if (P.first) (P.first = false), P.prev.set(P.x);\n\n  // The long exposure fades in the pendulums' own time, so a trail is as\n  // long on the table at any speed. Each bob paints the way it came this\n  // frame, older parts dimmer.\n  const tr = P.tr, fade = exp(-d / P.tau), span = max(d, 0.004);\n  for (let i = 0; i \u003c tr.length; i++) tr[i] *= fade;\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = P.prev[i], x1 = P.x[i], y = P.y[i], rt = P.r[i] * 0.8, steps = max(1, ceil(Math.abs(x1 - x0) / 0.6));\n    const col = P.col[i].map((v, c) => (v * 0.55 + P.lamp[c] * 0.25) * 0.85);\n    for (let s = 1; s \u003c= steps; s++) {\n      const t = s / steps, xs = mix(x0, x1, t), lev = exp((-(1 - t) * span) / P.tau);\n      for (let yy = floor(y - rt - 1); yy \u003c= y + rt + 1; yy++)\n        for (let xx = floor(xs - rt - 1); xx \u003c= xs + rt + 1; xx++) {\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const dx = xx + 0.5 - xs, dy = yy + 0.5 - y, q = (dx * dx + dy * dy) / (rt * rt);\n          if (q >= 1.6) continue;\n          const a = lev * exp(-1.6 * q), o = (yy * W + xx) * 3;\n          for (let c = 0; c \u003c 3; c++) tr[o + c] = max(tr[o + c], col[c] * a);\n        }\n    }\n  }\n  P.prev.set(P.x);\n}\n\n// Where the lamp throws a point at height z onto the table.\nconst proj = (x, y, z) => {\n  const k = LZ / (LZ - z);\n  return [LX + (x - LX) * k, LY + (y - LY) * k];\n};\n\n// A shiny ball, sampled two by two inside each LED.\nfunction ball(F, cx, cy, cz, r, base, lamp, g, tint) {\n  const sc = lamp.map((v, c) => v * mix(1, (base[c] / 255) * 1.15, tint));\n  // The light leans twice as far as the lamp really stands, so the glint\n  // sits clearly on the lamp's side of a ball five LEDs across.\n  let lx = 2 * (LX - cx), ly = 2 * (LY - cy), lz = LZ - cz;\n  const ll = sqrt(lx * lx + ly * ly + lz * lz);\n  (lx /= ll), (ly /= ll), (lz /= ll);\n  let hx = lx, hy = ly, hz = lz + 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  (hx /= hl), (hy /= hl), (hz /= hl);\n  const lxy = sqrt(lx * lx + ly * ly) || 1;\n  const col = [0, 0, 0];\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      let cov = 0;\n      col[0] = col[1] = col[2] = 0;\n      for (let sy = 0; sy \u003c 2; sy++)\n        for (let sx = 0; sx \u003c 2; sx++) {\n          const dx = (x + 0.25 + 0.5 * sx - cx) / r, dy = (y + 0.25 + 0.5 * sy - cy) / r, q = dx * dx + dy * dy;\n          if (q >= 1) continue;\n          cov += 0.25;\n          const nz = sqrt(1 - q), diff = max(0, dx * lx + dy * ly + nz * lz), nh = max(0, dx * hx + dy * hy + nz * hz), spec = nh ** 18, sheen = nh ** 3;\n          // Metal: the lamp's side lit, the rim holding the dark table.\n          const rim = 0.4 + 0.6 * nz, back = max(0, -(dx * lx + dy * ly) / lxy) * sqrt(q);\n          for (let c = 0; c \u003c 3; c++) {\n            const m = base[c] * (0.1 + 0.85 * diff * sqrt(diff)) * rim, gl = base[c] * (0.3 + 0.25 * diff + 0.9 * back);\n            col[c] += (mix(m, gl, g) + sc[c] * (spec * 1.6 + 0.12 * sheen)) * 0.25;\n          }\n        }\n      if (cov \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = F[o + c] * (1 - cov) + col[c];\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const F = P.f, D = P.D, n = P.n, lamp = P.lamp, g = P.glass, bk = P.benchK;\n\n  // Shadows on the table: the beam, each string and each bob. A bob higher\n  // up throws its shadow further from the lamp and softer.\n  D.set(P.beamD);\n  const sh = [];\n  for (let i = 0; i \u003c n; i++) {\n    const [sx, sy] = proj(P.x[i], P.y[i], P.z[i]), [px, py] = proj(BX, P.y[i], ZB);\n    sh.push([sx, sy]);\n    const rs = P.r[i] * 0.95, pen = 0.45 + 0.09 * P.z[i], dk = (0.9 - 0.02 * P.z[i]) * (1 - 0.15 * g);\n    for (let y = floor(sy - rs - pen - 1); y \u003c= sy + rs + pen + 1; y++)\n      for (let x = floor(sx - rs - pen - 1); x \u003c= sx + rs + pen + 1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const dd = sqrt((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2), v = dk * (1 - sm(rs - pen, rs + pen, dd)), j = y * W + x;\n        if (v > D[j]) D[j] = v;\n      }\n    const len = sqrt((sx - px) ** 2 + (sy - py) ** 2), m = ceil(len * 1.5);\n    for (let s = 0; s \u003c= m; s++) {\n      const t = s / max(1, m), x = floor(mix(px, sx, t)), y = floor(mix(py, sy, t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && D[y * W + x] \u003c 0.2) D[y * W + x] = 0.2;\n    }\n  }\n\n  // The table under the lamp.\n  const fl = 0.42;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const e = (0.1 + 0.9 * P.pool[i] * (1 - D[i])) * fl;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(P.wood[o + c], P.bench[o + c], bk) * lamp[c] * e + P.tr[o + c];\n  }\n  // A glass bead gathers the lamp into a spot of its colour in its shadow.\n  if (g > 0.01)\n    for (let i = 0; i \u003c n; i++) {\n      const [sx, sy] = sh[i], rc = P.r[i] * 0.55, col = P.col[i];\n      for (let y = floor(sy - 3); y \u003c= sy + 3; y++)\n        for (let x = floor(sx - 3); x \u003c= sx + 3; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const q = ((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2) / (rc * rc), a = g * 0.75 * exp(-q) * (0.4 + 0.6 * P.pool[y * W + x]), o = (y * W + x) * 3;\n          for (let c = 0; c \u003c 3; c++) F[o + c] += col[c] * a;\n        }\n    }\n\n  // Strings: a fine line from the beam out to each bob, catching the lamp.\n  for (let i = 0; i \u003c n; i++) {\n    const x1 = P.x[i], y = floor(P.y[i]), a0 = min(BX, x1), a1 = max(BX, x1);\n    for (let x = floor(a0); x \u003c a1; x++) {\n      if (x \u003c 0 || x >= W) continue;\n      const o = (y * W + x) * 3, a = 0.5 * cl(min(x + 1 - a0, a1 - x), 0, 1);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], lamp[c] * 0.5, a);\n    }\n  }\n  // The bobs, the higher ones last.\n  for (let i = 0; i \u003c n; i++) ball(F, P.x[i], P.y[i], P.z[i], P.r[i], P.col[i], lamp, g, P.tint);\n\n  // The release board, a strip of pale wood that holds the row straight.\n  if (P.board > 0.01) {\n    const bx = BX + AMP + 3.2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = floor(bx); x \u003c bx + 2 && x \u003c W; x++) {\n        const o = (y * W + x) * 3, v = x === floor(bx) ? 0.85 : 0.55;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [224, 186, 132][c] * (lamp[c] / 255) * v, P.board);\n      }\n  }\n\n  // The beam over everything: brushed metal, its lamp side bright, with a\n  // clamp at every pivot.\n  for (let y = 0; y \u003c H; y++) {\n    const grain = 0.92 + 0.08 * hash(y, 7);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = (x \u003c BX ? 0.5 : 0.24) * grain;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    const y = floor(P.y[i]);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = x \u003c BX ? 0.78 : 0.4;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Finish","min":0,"max":1,"about":"The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again."},{"name":"Pendulums","min":16,"max":24,"about":"How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22."},{"name":"Trails","min":0,"max":1,"about":"A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them."}],"start":[0,2,16,0.06],"measures":{"motion":0.7632,"detail":0.0304,"edges":0.1868,"complexity":1.4841,"coverage":0.886,"colour":0.0797,"drift":0.0334},"knobResponse":[0.1242,0.0438,0.0523,0.0491]},{"slug":"penrose","title":"Penrose","family":"geometry","round":25,"note":"굵은 마름모와 가는 마름모의 펜로즈 타일링이 다섯 겹 대칭의 가운데로 끝없이 들어가요. 가운데서 꽃잎 다섯 장 꼴로 열리는 빛의 고리가 지나가면 타일이 황금비만큼 작은 타일로 나뉘고, 굵은 마름모 다섯이 모인 별은 금색이에요. Glow 를 올리면 유리가 어두워져 고리 뒤만 밝고, K1 을 누르면 연과 화살(P2)로 바뀌어요.","idea":"A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.","buttons":"K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.","code":"// ===== Patternflow pattern =====\n// Title:   Penrose\n// Family:  geometry\n// Idea:    A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after Roger Penrose's rhomb tiling (P3) and Raphael Robinson's golden triangles\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1\n//\n// Knob 1: Hue. Turns all the tile colours round the colour wheel together.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute.\n// Knob 3: Size. The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them.\n// Knob 4: Glow. How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring.\n// Buttons: K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.\n\n// The centre sits on an LED column, so the edges along the five-fold axis\n// draw as one dark LED rather than two grey ones.\nconst W = 64, H = 128, N = W * H, CX = 31.5, CY = 64;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, round, hypot, PI } = Math;\nconst PHI = (1 + sqrt(5)) / 2;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The smallest Size, how far the splitting ring runs in one level, the reach\n// of its five petals and how many levels lie between the seed and the tiles.\nconst EMIN = 7, RHO = 130, PET = 0.12, DEEP = 6;\n\n// Robinson's golden triangles. A triangle [kind, A, B, C, parent] is half a\n// tile: AB and AC are tile edges, BC runs through the middle of the tile.\n// Kind 0 is the sharp one (36-72-72), kind 1 the blunt one (108-36-36).\n// Rhombs (P3) and kites and darts (P2) split them by different rules.\nfunction split(fam, T, out, idx, R) {\n  const put = (k, ax, ay, bx, by, cx, cy) => {\n    if (reach(ax, ay, bx, by, cx, cy) \u003c R) out.push([k, ax, ay, bx, by, cx, cy, idx]);\n  };\n  const [k, ax, ay, bx, by, cx, cy] = T;\n  const g = (p, q) => p + (q - p) / PHI;\n  if (fam === 0) {\n    if (k === 0) {\n      const px = g(ax, bx), py = g(ay, by);\n      put(0, cx, cy, px, py, bx, by);\n      put(1, px, py, cx, cy, ax, ay);\n    } else {\n      const qx = g(bx, ax), qy = g(by, ay), rx = g(bx, cx), ry = g(by, cy);\n      put(1, rx, ry, cx, cy, ax, ay);\n      put(1, qx, qy, rx, ry, bx, by);\n      put(0, rx, ry, qx, qy, ax, ay);\n    }\n  } else if (k === 0) {\n    const qx = g(ax, bx), qy = g(ay, by), rx = g(bx, cx), ry = g(by, cy);\n    put(1, rx, ry, qx, qy, bx, by);\n    put(0, qx, qy, ax, ay, rx, ry);\n    put(0, cx, cy, ax, ay, rx, ry);\n  } else {\n    const px = g(cx, ax), py = g(cy, ay);\n    put(1, bx, by, px, py, ax, ay);\n    put(0, px, py, cx, cy, bx, by);\n  }\n}\n\n// How far the origin is from a triangle.\nfunction seg(ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay, t = cl(-(ax * dx + ay * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(ax + t * dx, ay + t * dy);\n}\nfunction reach(ax, ay, bx, by, cx, cy) {\n  const s1 = ax * by - ay * bx, s2 = bx * cy - by * cx, s3 = cx * ay - cy * ax;\n  if ((s1 >= 0 && s2 >= 0 && s3 >= 0) || (s1 \u003c= 0 && s2 \u003c= 0 && s3 \u003c= 0)) return 0;\n  return min(seg(ax, ay, bx, by), seg(bx, by, cx, cy), seg(cx, cy, ax, ay));\n}\n\n// One tiling, three levels deep. Level 0 has tile edge 1; levels 1 and 2 are\n// it split once and twice. Level 2 blown up by phi squared and turned 36\n// degrees is level 0 again, which is what lets the zoom run for ever. The\n// rhombs grow from a star of five fat rhombs, kites and darts from a sun of\n// five kites; both come back to themselves every second split. Each level\n// reaches just past the corners of the panel at the smallest Size.\nfunction build(fam, scale) {\n  const s = EMIN * scale, R = [75 / s + 3, 75 / s + 2, 75 / (s * PHI) + 1.5];\n  let T = [];\n  for (let i = 0; i \u003c 10; i++) {\n    const a = -PI / 2 + ((2 * PI) / 5) * (i >> 1), b = a + (i & 1 ? PI : -PI) / 5, L = PHI ** DEEP;\n    if (fam === 0) T.push([1, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L * PHI, sin(a) * L * PHI, 0]);\n    else T.push([0, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L, sin(a) * L, 0]);\n  }\n  const levels = [];\n  for (let d = 0; d \u003c DEEP + 2; d++) {\n    const out = [];\n    T.forEach((t, i) => split(fam, t, out, i, R[max(0, d - DEEP + 1)]));\n    T = out;\n    if (d >= DEEP - 1) levels.push(T);\n  }\n  return levels;\n}\n\n// Every corner where tiles meet is one of seven kinds; for kites and darts\n// Conway named them sun, star, ace, deuce, jack, queen and king. A tile's\n// colour class comes from its kind and the kinds of its four corners: ten\n// classes of rhomb, eight of kite and dart.\nconst vkey = (x, y) => round(x * 4096) * 1048576 + round(y * 4096);\n// The angle at A, B and C in tenths of a turn, sharp then blunt, per tiling.\nconst ANG = [\n  [1, 2, 2, 3, 1, 1],\n  [2, 1, 2, 1, 3, 1],\n];\nfunction classify(fam, levels) {\n  const an = ANG[fam];\n  const maps = levels.map((L) => {\n    const V = new Map();\n    const add = (x, y, slot) => {\n      const k = vkey(x, y);\n      let c = V.get(k);\n      if (!c) V.set(k, (c = new Array(16).fill(0)));\n      c[slot]++;\n    };\n    for (const [k, ax, ay, bx, by, cx, cy] of L) {\n      add(ax, ay, k * 8 + an[k * 3]);\n      add(bx, by, k * 8 + 4 + an[k * 3 + 1]);\n      add(cx, cy, k * 8 + 4 + an[k * 3 + 2]);\n    }\n    // A corner cut off at the edge of the patch does not close to 360 degrees.\n    for (const [k, c] of V) V.set(k, c.reduce((s, n, i) => s + n * (i & 3), 0) === 10 ? c.join(\" \") : \"x\");\n    return V;\n  });\n  const vnames = [...new Set(maps.flatMap((V) => [...V.values()]))].sort(), X = vnames.indexOf(\"x\");\n  const id = new Map(vnames.map((n, i) => [n, i]));\n  const codes = levels.map((L, j) => {\n    const V = maps[j], vt = (x, y) => id.get(V.get(vkey(x, y))), mid = new Map();\n    L.forEach((t, i) => {\n      const k = vkey(t[3] + t[5], t[4] + t[6]);\n      mid.set(k, mid.has(k) ? [mid.get(k)[0], i] : [i]);\n    });\n    return L.map((t, i) => {\n      const pair = mid.get(vkey(t[3] + t[5], t[4] + t[6])), o = L[pair[0] === i ? pair[1] ?? i : pair[0]];\n      const a0 = vt(t[1], t[2]), a1 = vt(o[1], o[2]), b0 = vt(t[3], t[4]), b1 = vt(t[5], t[6]);\n      if (a0 === X || a1 === X || b0 === X || b1 === X) return t[0] * 4096;\n      return t[0] * 4096 + min(a0, a1) * 512 + max(a0, a1) * 64 + min(b0, b1) * 8 + max(b0, b1);\n    });\n  });\n  const names = [...new Set(codes.flat())].sort((p, q) => p - q), cls = new Map(names.map((n, i) => [n, i]));\n  return codes.map((L) => L.map((n) => cls.get(n)));\n}\n\n// Packed for drawing: corners, colour class, parent, and the tile's middle as\n// its distance from the centre (pulled in along five petals) and how far the\n// triangle can reach past it.\nconst petal = (x, y, r) => (r > 1e-6 ? (5 * x ** 4 * y - 10 * x * x * y ** 3 + y ** 5) / r ** 5 : 0);\nfunction pack(levels, cls) {\n  return levels.map((L, j) => {\n    const n = L.length, P = { n, xy: new Float32Array(n * 6), cls: new Uint8Array(cls[j]), par: new Int32Array(n), rq: new Float32Array(n), near: new Float32Array(n), age: new Float32Array(n) };\n    L.forEach((t, i) => {\n      for (let q = 0; q \u003c 6; q++) P.xy[i * 6 + q] = t[q + 1];\n      P.par[i] = t[7];\n      // The middle of BC is the middle of the whole tile, so both halves of\n      // a tile split together.\n      const mx = (t[3] + t[5]) / 2, my = (t[4] + t[6]) / 2, r = hypot(mx, my);\n      P.rq[i] = r * (1 + PET * petal(mx, my, r));\n      P.near[i] = r - max(hypot(t[1] - mx, t[2] - my), hypot(t[3] - mx, t[4] - my));\n    });\n    return P;\n  });\n}\n\n// P2 is drawn half a level larger so the two tilings show tiles of about the\n// same area.\nconst SCALE = [1, sqrt(PHI)];\nconst FAM = [0, 1].map((f) => {\n  const levels = build(f, SCALE[f]);\n  return pack(levels, classify(f, levels));\n});\n\n// Hue offset, saturation and brightness of each colour class, in class order:\n// the sharp kind first (thin rhombs, kites), then the blunt kind (fat rhombs,\n// darts), each led by a fallback for tiles cut off at the edge of the patch,\n// which never reach the panel. Fat rhombs round a five-pointed star and the\n// darts of a star are gold.\nconst PAL = [\n  [\n    [0.6, 0.8, 0.75],\n    [0.5, 0.85, 0.85],\n    [0.42, 0.7, 0.95],\n    [0.63, 0.85, 0.85],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.15, 0.85, 1],\n    [0.88, 0.75, 0.9],\n    [0.76, 0.8, 0.75],\n    [0.98, 0.8, 0.9],\n    [0.1, 0.89, 1],\n    [0.33, 0.8, 0.8],\n  ],\n  [\n    [0.55, 0.8, 0.8],\n    [0.5, 0.85, 0.85],\n    [0.36, 0.75, 0.85],\n    [0.62, 0.85, 0.85],\n    [0.45, 0.75, 0.95],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.9, 0.75, 0.9],\n    [0.02, 0.8, 0.95],\n    [0.78, 0.8, 0.8],\n  ],\n];\nconst GLOW = [255, 226, 150];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Each LED's distance from the centre, pulled in along five petals: the\n// regrouping ring after a K1 tap opens along it.\nconst RR = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const x = (p % W) + 0.5 - CX, y = floor(p / W) + 0.5 - CY, r = hypot(x, y);\n  RR[p] = r * (1 + PET * petal(x, y, r));\n}\n\nexport function setup(params) {\n  params.s = { Z: 0, rot: 0, fam: 0, to: -1, rm: 0, hue: 0, e: EMIN, glow: 0.06, buf: new Float32Array(N * 3), col: new Float32Array(16 * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.e = cl(k[2], EMIN, 15);\n  P.glow = cl(k[3], 0, 1);\n  // Two levels of zoom, phi squared, bring level 2 to where level 0 was, a\n  // tenth of a turn round.\n  P.Z += d * cl(k[1], 0.2, 3) * 0.15;\n  if (P.Z >= 2) (P.Z -= 2), (P.rot = (P.rot + PI / 5) % (2 * PI));\n  if (P.to >= 0) {\n    P.rm += d * 45;\n    if (P.rm > 86) (P.fam = P.to), (P.to = -1);\n  } else if (input.btnPressed && input.btnPressed[0]) (P.to = 1 - P.fam), (P.rm = 0);\n}\n\n// One golden triangle onto the LEDs, colour (r, g, b) and line light gl.\n// Within LW of a tile edge an LED darkens into the 1-LED line between tiles;\n// mode 1 and 2 keep only the LEDs inside or outside the regrouping ring.\nconst LW = 0.72;\nfunction tri(P, xy, o, co, si, r, g, b, gl, mode) {\n  const ax = CX + co * xy[o] - si * xy[o + 1], ay = CY + si * xy[o] + co * xy[o + 1];\n  const bx = CX + co * xy[o + 2] - si * xy[o + 3], by = CY + si * xy[o + 2] + co * xy[o + 3];\n  const cx = CX + co * xy[o + 4] - si * xy[o + 5], cy = CY + si * xy[o + 4] + co * xy[o + 5];\n  const x0 = max(0, ceil(min(ax, bx, cx) - 0.5)), x1 = min(W - 1, floor(max(ax, bx, cx) - 0.5));\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(H - 1, floor(max(ay, by, cy) - 0.5));\n  if (x0 > x1 || y0 > y1) return;\n  const sg = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax) > 0 ? 1 : -1, buf = P.buf;\n  // Signed distances to AB, BC and CA as a*X + b*Y + c, positive inside.\n  const l1 = sg / hypot(bx - ax, by - ay), l2 = sg / hypot(cx - bx, cy - by), l3 = sg / hypot(ax - cx, ay - cy);\n  const a1 = (ay - by) * l1, b1 = (bx - ax) * l1, c1 = ((by - ay) * ax - (bx - ax) * ay) * l1;\n  const a2 = (by - cy) * l2, b2 = (cx - bx) * l2, c2 = ((cy - by) * bx - (cx - bx) * by) * l2;\n  const a3 = (cy - ay) * l3, b3 = (ax - cx) * l3, c3 = ((ay - cy) * cx - (ax - cx) * cy) * l3;\n  for (let y = y0; y \u003c= y1; y++) {\n    const Y = y + 0.5, X = x0 + 0.5;\n    let d1 = a1 * X + b1 * Y + c1, d2 = a2 * X + b2 * Y + c2, d3 = a3 * X + b3 * Y + c3;\n    for (let x = x0, p = y * W + x0; x \u003c= x1; x++, p++, d1 += a1, d2 += a2, d3 += a3) {\n      if (d1 \u003c -0.001 || d2 \u003c -0.001 || d3 \u003c -0.001 || (mode && (RR[p] \u003c P.rm) !== (mode === 1))) continue;\n      // The line's light keeps to its core, so a small tile behind the ring\n      // keeps its colour.\n      const w = cl((LW - min(d1, d3)) * 2.2, 0, 1), m = 1 - 0.93 * w, v = w * w * gl, q = p * 3;\n      buf[q] = r * m + (GLOW[0] - r * m) * v;\n      buf[q + 1] = g * m + (GLOW[1] - g * m) * v;\n      buf[q + 2] = b * m + (GLOW[2] - b * m) * v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const h = P.Z >= 1 ? 1 : 0, rho = (P.Z - h) * RHO, buf = P.buf, col = P.col, dim = 1 - 0.65 * P.glow;\n  buf.fill(0);\n  const jobs = P.to \u003c 0 ? [[P.fam, 0]] : [[P.fam, 2], [P.to, 1]];\n  for (const [fi, mode] of jobs) {\n    const S = P.e * PHI ** P.Z * SCALE[fi], co = cos(P.rot) * S, si = sin(P.rot) * S, lim = 73 / S;\n    const Lc = FAM[fi][h], Lf = FAM[fi][h + 1], pal = PAL[fi];\n    for (let c = 0; c \u003c pal.length; c++) hsv(P.hue + pal[c][0], pal[c][1], pal[c][2], col, c * 3);\n    // A tile splits once the ring has passed its middle. The ring runs RHO\n    // LEDs a level, well past the corners, so every tile on show has split\n    // and its light has died before the next level begins.\n    for (let i = 0; i \u003c Lc.n; i++) {\n      const a = (Lc.age[i] = rho - S * Lc.rq[i]);\n      if (a > 0 || Lc.near[i] > lim) continue;\n      const c = Lc.cls[i] * 3;\n      tri(P, Lc.xy, i * 6, co, si, col[c] * dim, col[c + 1] * dim, col[c + 2] * dim, 0, mode);\n    }\n    // Behind the ring the new edges flash, and the glass lights up and fades\n    // back down to what Glow leaves it.\n    for (let j = 0; j \u003c Lf.n; j++) {\n      const a = Lc.age[Lf.par[j]];\n      if (a \u003c= 0 || Lf.near[j] > lim) continue;\n      const c = Lf.cls[j] * 3, lit = dim + (1 - dim) * exp(-a / 10), fl = 0.3 * P.glow * exp(-a / 5);\n      const r = col[c] * lit, g = col[c + 1] * lit, b = col[c + 2] * lit;\n      tri(P, Lf.xy, j * 6, co, si, r + (255 - r) * fl, g + (255 - g) * fl, b + (255 - b) * fl, exp(-a / 2.5), mode);\n    }\n  }\n  // The regrouping ring itself, a line of light.\n  if (P.to >= 0)\n    for (let p = 0; p \u003c N; p++) {\n      const w = 1 - abs(RR[p] - P.rm) / 1.6;\n      if (w > 0) for (let q = 0; q \u003c 3; q++) buf[p * 3 + q] += (GLOW[q] - buf[p * 3 + q]) * w * 0.85;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-penrose","type":"code","name":"penrose","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Penrose\n// Family:  geometry\n// Idea:    A Penrose tiling of fat and thin rhombs zooms for ever into its five-fold centre, and a five-petalled ring of light opening from the middle splits every tile it passes into tiles a golden ratio smaller.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after Roger Penrose's rhomb tiling (P3) and Raphael Robinson's golden triangles\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1\n//\n// Knob 1: Hue. Turns all the tile colours round the colour wheel together.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute.\n// Knob 3: Size. The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them.\n// Knob 4: Glow. How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring.\n// Buttons: K1 tap turns the tiling into kites and darts (P2) behind a ring that opens from the centre; tap again for the rhombs.\n\n// The centre sits on an LED column, so the edges along the five-fold axis\n// draw as one dark LED rather than two grey ones.\nconst W = 64, H = 128, N = W * H, CX = 31.5, CY = 64;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, round, hypot, PI } = Math;\nconst PHI = (1 + sqrt(5)) / 2;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The smallest Size, how far the splitting ring runs in one level, the reach\n// of its five petals and how many levels lie between the seed and the tiles.\nconst EMIN = 7, RHO = 130, PET = 0.12, DEEP = 6;\n\n// Robinson's golden triangles. A triangle [kind, A, B, C, parent] is half a\n// tile: AB and AC are tile edges, BC runs through the middle of the tile.\n// Kind 0 is the sharp one (36-72-72), kind 1 the blunt one (108-36-36).\n// Rhombs (P3) and kites and darts (P2) split them by different rules.\nfunction split(fam, T, out, idx, R) {\n  const put = (k, ax, ay, bx, by, cx, cy) => {\n    if (reach(ax, ay, bx, by, cx, cy) \u003c R) out.push([k, ax, ay, bx, by, cx, cy, idx]);\n  };\n  const [k, ax, ay, bx, by, cx, cy] = T;\n  const g = (p, q) => p + (q - p) / PHI;\n  if (fam === 0) {\n    if (k === 0) {\n      const px = g(ax, bx), py = g(ay, by);\n      put(0, cx, cy, px, py, bx, by);\n      put(1, px, py, cx, cy, ax, ay);\n    } else {\n      const qx = g(bx, ax), qy = g(by, ay), rx = g(bx, cx), ry = g(by, cy);\n      put(1, rx, ry, cx, cy, ax, ay);\n      put(1, qx, qy, rx, ry, bx, by);\n      put(0, rx, ry, qx, qy, ax, ay);\n    }\n  } else if (k === 0) {\n    const qx = g(ax, bx), qy = g(ay, by), rx = g(bx, cx), ry = g(by, cy);\n    put(1, rx, ry, qx, qy, bx, by);\n    put(0, qx, qy, ax, ay, rx, ry);\n    put(0, cx, cy, ax, ay, rx, ry);\n  } else {\n    const px = g(cx, ax), py = g(cy, ay);\n    put(1, bx, by, px, py, ax, ay);\n    put(0, px, py, cx, cy, bx, by);\n  }\n}\n\n// How far the origin is from a triangle.\nfunction seg(ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay, t = cl(-(ax * dx + ay * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(ax + t * dx, ay + t * dy);\n}\nfunction reach(ax, ay, bx, by, cx, cy) {\n  const s1 = ax * by - ay * bx, s2 = bx * cy - by * cx, s3 = cx * ay - cy * ax;\n  if ((s1 >= 0 && s2 >= 0 && s3 >= 0) || (s1 \u003c= 0 && s2 \u003c= 0 && s3 \u003c= 0)) return 0;\n  return min(seg(ax, ay, bx, by), seg(bx, by, cx, cy), seg(cx, cy, ax, ay));\n}\n\n// One tiling, three levels deep. Level 0 has tile edge 1; levels 1 and 2 are\n// it split once and twice. Level 2 blown up by phi squared and turned 36\n// degrees is level 0 again, which is what lets the zoom run for ever. The\n// rhombs grow from a star of five fat rhombs, kites and darts from a sun of\n// five kites; both come back to themselves every second split. Each level\n// reaches just past the corners of the panel at the smallest Size.\nfunction build(fam, scale) {\n  const s = EMIN * scale, R = [75 / s + 3, 75 / s + 2, 75 / (s * PHI) + 1.5];\n  let T = [];\n  for (let i = 0; i \u003c 10; i++) {\n    const a = -PI / 2 + ((2 * PI) / 5) * (i >> 1), b = a + (i & 1 ? PI : -PI) / 5, L = PHI ** DEEP;\n    if (fam === 0) T.push([1, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L * PHI, sin(a) * L * PHI, 0]);\n    else T.push([0, cos(b) * L, sin(b) * L, 0, 0, cos(a) * L, sin(a) * L, 0]);\n  }\n  const levels = [];\n  for (let d = 0; d \u003c DEEP + 2; d++) {\n    const out = [];\n    T.forEach((t, i) => split(fam, t, out, i, R[max(0, d - DEEP + 1)]));\n    T = out;\n    if (d >= DEEP - 1) levels.push(T);\n  }\n  return levels;\n}\n\n// Every corner where tiles meet is one of seven kinds; for kites and darts\n// Conway named them sun, star, ace, deuce, jack, queen and king. A tile's\n// colour class comes from its kind and the kinds of its four corners: ten\n// classes of rhomb, eight of kite and dart.\nconst vkey = (x, y) => round(x * 4096) * 1048576 + round(y * 4096);\n// The angle at A, B and C in tenths of a turn, sharp then blunt, per tiling.\nconst ANG = [\n  [1, 2, 2, 3, 1, 1],\n  [2, 1, 2, 1, 3, 1],\n];\nfunction classify(fam, levels) {\n  const an = ANG[fam];\n  const maps = levels.map((L) => {\n    const V = new Map();\n    const add = (x, y, slot) => {\n      const k = vkey(x, y);\n      let c = V.get(k);\n      if (!c) V.set(k, (c = new Array(16).fill(0)));\n      c[slot]++;\n    };\n    for (const [k, ax, ay, bx, by, cx, cy] of L) {\n      add(ax, ay, k * 8 + an[k * 3]);\n      add(bx, by, k * 8 + 4 + an[k * 3 + 1]);\n      add(cx, cy, k * 8 + 4 + an[k * 3 + 2]);\n    }\n    // A corner cut off at the edge of the patch does not close to 360 degrees.\n    for (const [k, c] of V) V.set(k, c.reduce((s, n, i) => s + n * (i & 3), 0) === 10 ? c.join(\" \") : \"x\");\n    return V;\n  });\n  const vnames = [...new Set(maps.flatMap((V) => [...V.values()]))].sort(), X = vnames.indexOf(\"x\");\n  const id = new Map(vnames.map((n, i) => [n, i]));\n  const codes = levels.map((L, j) => {\n    const V = maps[j], vt = (x, y) => id.get(V.get(vkey(x, y))), mid = new Map();\n    L.forEach((t, i) => {\n      const k = vkey(t[3] + t[5], t[4] + t[6]);\n      mid.set(k, mid.has(k) ? [mid.get(k)[0], i] : [i]);\n    });\n    return L.map((t, i) => {\n      const pair = mid.get(vkey(t[3] + t[5], t[4] + t[6])), o = L[pair[0] === i ? pair[1] ?? i : pair[0]];\n      const a0 = vt(t[1], t[2]), a1 = vt(o[1], o[2]), b0 = vt(t[3], t[4]), b1 = vt(t[5], t[6]);\n      if (a0 === X || a1 === X || b0 === X || b1 === X) return t[0] * 4096;\n      return t[0] * 4096 + min(a0, a1) * 512 + max(a0, a1) * 64 + min(b0, b1) * 8 + max(b0, b1);\n    });\n  });\n  const names = [...new Set(codes.flat())].sort((p, q) => p - q), cls = new Map(names.map((n, i) => [n, i]));\n  return codes.map((L) => L.map((n) => cls.get(n)));\n}\n\n// Packed for drawing: corners, colour class, parent, and the tile's middle as\n// its distance from the centre (pulled in along five petals) and how far the\n// triangle can reach past it.\nconst petal = (x, y, r) => (r > 1e-6 ? (5 * x ** 4 * y - 10 * x * x * y ** 3 + y ** 5) / r ** 5 : 0);\nfunction pack(levels, cls) {\n  return levels.map((L, j) => {\n    const n = L.length, P = { n, xy: new Float32Array(n * 6), cls: new Uint8Array(cls[j]), par: new Int32Array(n), rq: new Float32Array(n), near: new Float32Array(n), age: new Float32Array(n) };\n    L.forEach((t, i) => {\n      for (let q = 0; q \u003c 6; q++) P.xy[i * 6 + q] = t[q + 1];\n      P.par[i] = t[7];\n      // The middle of BC is the middle of the whole tile, so both halves of\n      // a tile split together.\n      const mx = (t[3] + t[5]) / 2, my = (t[4] + t[6]) / 2, r = hypot(mx, my);\n      P.rq[i] = r * (1 + PET * petal(mx, my, r));\n      P.near[i] = r - max(hypot(t[1] - mx, t[2] - my), hypot(t[3] - mx, t[4] - my));\n    });\n    return P;\n  });\n}\n\n// P2 is drawn half a level larger so the two tilings show tiles of about the\n// same area.\nconst SCALE = [1, sqrt(PHI)];\nconst FAM = [0, 1].map((f) => {\n  const levels = build(f, SCALE[f]);\n  return pack(levels, classify(f, levels));\n});\n\n// Hue offset, saturation and brightness of each colour class, in class order:\n// the sharp kind first (thin rhombs, kites), then the blunt kind (fat rhombs,\n// darts), each led by a fallback for tiles cut off at the edge of the patch,\n// which never reach the panel. Fat rhombs round a five-pointed star and the\n// darts of a star are gold.\nconst PAL = [\n  [\n    [0.6, 0.8, 0.75],\n    [0.5, 0.85, 0.85],\n    [0.42, 0.7, 0.95],\n    [0.63, 0.85, 0.85],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.15, 0.85, 1],\n    [0.88, 0.75, 0.9],\n    [0.76, 0.8, 0.75],\n    [0.98, 0.8, 0.9],\n    [0.1, 0.89, 1],\n    [0.33, 0.8, 0.8],\n  ],\n  [\n    [0.55, 0.8, 0.8],\n    [0.5, 0.85, 0.85],\n    [0.36, 0.75, 0.85],\n    [0.62, 0.85, 0.85],\n    [0.45, 0.75, 0.95],\n    [0.12, 0.85, 1],\n    [0.13, 0.89, 1],\n    [0.9, 0.75, 0.9],\n    [0.02, 0.8, 0.95],\n    [0.78, 0.8, 0.8],\n  ],\n];\nconst GLOW = [255, 226, 150];\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Each LED's distance from the centre, pulled in along five petals: the\n// regrouping ring after a K1 tap opens along it.\nconst RR = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const x = (p % W) + 0.5 - CX, y = floor(p / W) + 0.5 - CY, r = hypot(x, y);\n  RR[p] = r * (1 + PET * petal(x, y, r));\n}\n\nexport function setup(params) {\n  params.s = { Z: 0, rot: 0, fam: 0, to: -1, rm: 0, hue: 0, e: EMIN, glow: 0.06, buf: new Float32Array(N * 3), col: new Float32Array(16 * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.e = cl(k[2], EMIN, 15);\n  P.glow = cl(k[3], 0, 1);\n  // Two levels of zoom, phi squared, bring level 2 to where level 0 was, a\n  // tenth of a turn round.\n  P.Z += d * cl(k[1], 0.2, 3) * 0.15;\n  if (P.Z >= 2) (P.Z -= 2), (P.rot = (P.rot + PI / 5) % (2 * PI));\n  if (P.to >= 0) {\n    P.rm += d * 45;\n    if (P.rm > 86) (P.fam = P.to), (P.to = -1);\n  } else if (input.btnPressed && input.btnPressed[0]) (P.to = 1 - P.fam), (P.rm = 0);\n}\n\n// One golden triangle onto the LEDs, colour (r, g, b) and line light gl.\n// Within LW of a tile edge an LED darkens into the 1-LED line between tiles;\n// mode 1 and 2 keep only the LEDs inside or outside the regrouping ring.\nconst LW = 0.72;\nfunction tri(P, xy, o, co, si, r, g, b, gl, mode) {\n  const ax = CX + co * xy[o] - si * xy[o + 1], ay = CY + si * xy[o] + co * xy[o + 1];\n  const bx = CX + co * xy[o + 2] - si * xy[o + 3], by = CY + si * xy[o + 2] + co * xy[o + 3];\n  const cx = CX + co * xy[o + 4] - si * xy[o + 5], cy = CY + si * xy[o + 4] + co * xy[o + 5];\n  const x0 = max(0, ceil(min(ax, bx, cx) - 0.5)), x1 = min(W - 1, floor(max(ax, bx, cx) - 0.5));\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(H - 1, floor(max(ay, by, cy) - 0.5));\n  if (x0 > x1 || y0 > y1) return;\n  const sg = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax) > 0 ? 1 : -1, buf = P.buf;\n  // Signed distances to AB, BC and CA as a*X + b*Y + c, positive inside.\n  const l1 = sg / hypot(bx - ax, by - ay), l2 = sg / hypot(cx - bx, cy - by), l3 = sg / hypot(ax - cx, ay - cy);\n  const a1 = (ay - by) * l1, b1 = (bx - ax) * l1, c1 = ((by - ay) * ax - (bx - ax) * ay) * l1;\n  const a2 = (by - cy) * l2, b2 = (cx - bx) * l2, c2 = ((cy - by) * bx - (cx - bx) * by) * l2;\n  const a3 = (cy - ay) * l3, b3 = (ax - cx) * l3, c3 = ((ay - cy) * cx - (ax - cx) * cy) * l3;\n  for (let y = y0; y \u003c= y1; y++) {\n    const Y = y + 0.5, X = x0 + 0.5;\n    let d1 = a1 * X + b1 * Y + c1, d2 = a2 * X + b2 * Y + c2, d3 = a3 * X + b3 * Y + c3;\n    for (let x = x0, p = y * W + x0; x \u003c= x1; x++, p++, d1 += a1, d2 += a2, d3 += a3) {\n      if (d1 \u003c -0.001 || d2 \u003c -0.001 || d3 \u003c -0.001 || (mode && (RR[p] \u003c P.rm) !== (mode === 1))) continue;\n      // The line's light keeps to its core, so a small tile behind the ring\n      // keeps its colour.\n      const w = cl((LW - min(d1, d3)) * 2.2, 0, 1), m = 1 - 0.93 * w, v = w * w * gl, q = p * 3;\n      buf[q] = r * m + (GLOW[0] - r * m) * v;\n      buf[q + 1] = g * m + (GLOW[1] - g * m) * v;\n      buf[q + 2] = b * m + (GLOW[2] - b * m) * v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const h = P.Z >= 1 ? 1 : 0, rho = (P.Z - h) * RHO, buf = P.buf, col = P.col, dim = 1 - 0.65 * P.glow;\n  buf.fill(0);\n  const jobs = P.to \u003c 0 ? [[P.fam, 0]] : [[P.fam, 2], [P.to, 1]];\n  for (const [fi, mode] of jobs) {\n    const S = P.e * PHI ** P.Z * SCALE[fi], co = cos(P.rot) * S, si = sin(P.rot) * S, lim = 73 / S;\n    const Lc = FAM[fi][h], Lf = FAM[fi][h + 1], pal = PAL[fi];\n    for (let c = 0; c \u003c pal.length; c++) hsv(P.hue + pal[c][0], pal[c][1], pal[c][2], col, c * 3);\n    // A tile splits once the ring has passed its middle. The ring runs RHO\n    // LEDs a level, well past the corners, so every tile on show has split\n    // and its light has died before the next level begins.\n    for (let i = 0; i \u003c Lc.n; i++) {\n      const a = (Lc.age[i] = rho - S * Lc.rq[i]);\n      if (a > 0 || Lc.near[i] > lim) continue;\n      const c = Lc.cls[i] * 3;\n      tri(P, Lc.xy, i * 6, co, si, col[c] * dim, col[c + 1] * dim, col[c + 2] * dim, 0, mode);\n    }\n    // Behind the ring the new edges flash, and the glass lights up and fades\n    // back down to what Glow leaves it.\n    for (let j = 0; j \u003c Lf.n; j++) {\n      const a = Lc.age[Lf.par[j]];\n      if (a \u003c= 0 || Lf.near[j] > lim) continue;\n      const c = Lf.cls[j] * 3, lit = dim + (1 - dim) * exp(-a / 10), fl = 0.3 * P.glow * exp(-a / 5);\n      const r = col[c] * lit, g = col[c + 1] * lit, b = col[c + 2] * lit;\n      tri(P, Lf.xy, j * 6, co, si, r + (255 - r) * fl, g + (255 - g) * fl, b + (255 - b) * fl, exp(-a / 2.5), mode);\n    }\n  }\n  // The regrouping ring itself, a line of light.\n  if (P.to >= 0)\n    for (let p = 0; p \u003c N; p++) {\n      const w = 1 - abs(RR[p] - P.rm) / 1.6;\n      if (w > 0) for (let q = 0; q \u003c 3; q++) buf[p * 3 + q] += (GLOW[q] - buf[p * 3 + q]) * w * 0.85;\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=7..15, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns all the tile colours round the colour wheel together."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by the golden ratio every three and a third seconds and a new ring opens each time; at 0.2 it takes half a minute."},{"name":"Size","min":7,"max":15,"about":"The tile edge in LEDs, 7 to 15, when a level begins; the tiles grow from there until the ring splits them."},{"name":"Glow","min":0,"max":1,"about":"How much of the light comes from the ring. At 0 the glass is lit all over and the ring is a thin line of light; at 1 the glass stands dark and lights up only behind the ring."}],"start":[0,2,7,0.06],"measures":{"motion":1.7979,"detail":0.2641,"edges":0.8556,"complexity":1.1732,"coverage":0.804,"colour":0.583,"drift":0.0983},"knobResponse":[0.4132,0.358,0.3898,0.2306]},{"slug":"penrose-room","title":"Penrose Room","family":"physics","round":33,"note":"거울로 된 펜로즈의 방에서 빛 한 점이 떠돌고, 수백 개의 광선이 반사하며 복도와 위아래 반타원을 밝히는 동안 양옆 방은 캄캄해요. 빛이 반타원을 지나 옆방으로 건너가면 밝은 곳과 어두운 곳이 뒤바뀌어요. K3 은 복도 벽을 초점에서 4 LED 까지 옮겨 어둠에 빛이 새게 하고, K1 을 누르면 빛이 바로 건너가요.","idea":"A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.","buttons":"K1 tap sends the light across now, from the corridor into a side chamber or back.","code":"// ===== Patternflow pattern =====\n// Title:   Penrose Room\n// Family:  physics\n// Idea:    A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Penrose unilluminable room (Roger Penrose, 1958), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1\n//\n// Knob 1: Hue. The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive.\n// Knob 2: Speed. How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower.\n// Knob 3: Offset. How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow.\n// Knob 4: Bounces. How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue.\n// Buttons: K1 tap sends the light across now, from the corridor into a side chamber or back.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The room, in LEDs. Two half-ellipses with semi-axes 31.5 and 26 put their\n// flat sides at rows 26.5 and 101.5, and their arcs touch rows 0 and 127, so\n// the room is the whole panel. The foci sit on the flat sides at 17.78 either\n// side of the middle column; the outer walls are the ellipses' own tangents\n// at the ends of the major axis, columns 0 and 63.\nconst A = 31.5, B = 26, C = sqrt(A * A - B * B), CX = 32;\nconst YT = 0.5 + B, YB = 127.5 - B, YM = 64;\nconst IA2 = 1 / (A * A), IB2 = 1 / (B * B), EPS = 1e-6;\n// Each reflection keeps 60% of the light. The glow is LEVEL times the light\n// over the mean of the lit LEDs, raised to GAMMA: the mean shows at 128 of 255\n// and the glow round the lamp comes close to full. At 92 the swap moved the\n// picture 0.270 on the study's drift scale; at 128 it moves it 0.365.\nconst REFL = 0.6, LEVEL = 0.50, GAMMA = 0.7;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, off: 0, nb: 14, w: C,\n    buf: new Float32Array(N), tmp: new Float32Array(N), hz: new Float32Array(N), kb: new Float32Array(N), kz: new Float32Array(N), wall: new Float32Array(N), wallW: NaN,\n    lu: 0, ly: YM, region: 0, tau: 0, stay: 3.2, mode: 0,\n    tt: 0, from: 0, to: 0, expo: 0, bz: new Float64Array(8), col: new Float32Array(51),\n  };\n}\n\n// Where the light may stand: the corridor between the walls, or one side\n// chamber, a little clear of every wall.\nfunction clampTo(S, region, u) {\n  const w = S.w;\n  if (region === 0) return cl(u, -(w - 1.2), w - 1.2);\n  return region * cl(region * u, w + 1.2, A - 1.2);\n}\n\n// A slow wander that starts from the middle of the place, so the light\n// arrives at the middle and sets off from there without a jump.\nfunction wander(S) {\n  const w = S.w, t = S.tau;\n  const y = YM + 30 * sin(0.4 * t);\n  if (S.region === 0) return [(w - 3.5) * sin(0.55 * t), y];\n  const uc = (S.region * (w + A)) / 2, au = max(0, (A - w) / 2 - 2.5);\n  return [uc + au * sin(0.7 * t), y];\n}\n\n// Crossing over: a cubic curve that leaves straight up (or down) through the\n// flat side nearer the light, arcs through the half-ellipse and drops\n// straight into the middle of the other place. From the corridor it leaves\n// between the foci and from a chamber outside them, as a ray would.\nfunction startTransit(S) {\n  const u0 = S.lu, y0 = S.ly, w = S.w;\n  S.from = S.region;\n  S.to = S.region === 0 ? (u0 > 0.5 ? 1 : u0 \u003c -0.5 ? -1 : Math.random() \u003c 0.5 ? -1 : 1) : 0;\n  const u3 = S.to === 0 ? 0 : (S.to * (w + A)) / 2, cy = y0 \u003c= YM ? YT - 32 : YB + 32;\n  S.bz.set([u0, y0, u0, cy, u3, cy, u3, YM]);\n  S.mode = 1;\n  S.tt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.off = cl(k[2] || 0, -4, 4);\n  S.w = C + S.off;\n  S.nb = Math.round(40 * Math.pow(cl(k[3], 0, 1), 0.373));\n  const sp = S.speed / 2;\n\n  if (input.btnPressed && input.btnPressed[0] && S.mode === 0) startTransit(S);\n  if (S.mode === 0) {\n    S.tau += d * sp;\n    S.stay -= d * sp;\n    const p = wander(S);\n    S.lu = clampTo(S, S.region, p[0]);\n    S.ly = p[1];\n    if (S.stay \u003c= 0) startTransit(S);\n  } else {\n    S.tt = min(1, S.tt + (d * sp) / 1.8);\n    const e = S.tt * S.tt * (3 - 2 * S.tt), f = 1 - e, b = S.bz;\n    const c0 = f * f * f, c1 = 3 * f * f * e, c2 = 3 * f * e * e, c3 = e * e * e;\n    let u = c0 * b[0] + c1 * b[2] + c2 * b[4] + c3 * b[6];\n    const y = c0 * b[1] + c1 * b[3] + c2 * b[5] + c3 * b[7];\n    // Between the flat sides the light is in a place, never in a wall.\n    // In a half-ellipse it keeps clear of the arc: with the walls 4 LEDs out,\n    // the curve's top would just touch it.\n    let yy = y;\n    if (y > YT && y \u003c YB) u = clampTo(S, S.tt \u003c 0.5 ? S.from : S.to, u);\n    else {\n      const yc = y \u003c= YT ? YT : YB, v = y - yc, E = u * u * IA2 + v * v * IB2;\n      if (E > 0.85) {\n        const q = sqrt(0.85 / E);\n        u *= q;\n        yy = yc + v * q;\n      }\n    }\n    S.lu = u;\n    S.ly = yy;\n    if (S.tt >= 1) {\n      S.mode = 0;\n      S.region = S.to;\n      S.tau = 0;\n      S.stay = S.region === 0 ? 5 + 3 * Math.random() : 7 + 3 * Math.random();\n    }\n  }\n\n  // The light fades over about a sixth of a second, so a place goes dark\n  // soon after the light has left it.\n  const buf = S.buf, kb = S.kb, fade = exp(-d / 0.16);\n  for (let i = 0; i \u003c N; i++) {\n    buf[i] *= fade;\n    kb[i] *= fade;\n  }\n  trace(S, d * 30);\n  // Exposure follows the mean of the lit LEDs over about half a second, the\n  // way an eye adjusts, so a chamber, where every ray soon hits a wall and\n  // loses 40% of its light, glows about as bright as the corridor.\n  let sum = 0, n = 0;\n  for (let i = 0; i \u003c N; i++)\n    if (buf[i] > 0.5) {\n      sum += buf[i];\n      n++;\n    }\n  const m = n ? sum / n : 1;\n  S.expo = S.expo > 0 ? S.expo + (m - S.expo) * (1 - exp(-d / 0.5)) : m;\n}\n\n// Rays leave the light evenly spaced round the circle, the whole fan turned\n// by a random angle each frame, and bounce off the mirrors; each reflection\n// keeps 60% of the light, so the first few reflections draw the shapes and\n// the later ones fill in. A ray's path is added to the buffer one LED step at\n// a time, so a pixel gathers light in proportion to the rays crossing it.\nfunction trace(S, gain) {\n  const nb = S.nb, R = cl(floor(4200 / (nb + 1)), 120, 300), w = S.w, buf = S.buf, kb = S.kb;\n  const phase = Math.random(), w0 = (gain * 0.5 * 300) / R;\n  for (let r = 0; r \u003c R; r++) {\n    const th = (2 * PI * (r + phase)) / R;\n    let u = S.lu, y = S.ly, dx = cos(th), dy = sin(th), wt = w0;\n    for (let k = 0; k \u003c= nb; k++) {\n      let best = 1e9, kind = 0, nx = 0, ny = 0;\n      // The two arcs: an ellipse counts as a mirror only on its own side of\n      // its flat side, which is open to the room between them.\n      for (let e = 0; e \u003c 2; e++) {\n        const yc = e ? YB : YT, v = y - yc;\n        const qa = dx * dx * IA2 + dy * dy * IB2, qb = 2 * (u * dx * IA2 + v * dy * IB2), qc = u * u * IA2 + v * v * IB2 - 1;\n        const disc = qb * qb - 4 * qa * qc;\n        if (disc \u003c= 0) continue;\n        const sq = sqrt(disc);\n        for (let j = 0; j \u003c 2; j++) {\n          const t = (-qb + (j ? sq : -sq)) / (2 * qa);\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (e ? hy >= YB : hy \u003c= YT) {\n            best = t;\n            kind = 1;\n            nx = (u + dx * t) * IA2;\n            ny = (hy - yc) * IB2;\n            break;\n          }\n        }\n      }\n      // The outer walls and the two thin corridor walls, mirrors on both sides.\n      if (dx !== 0)\n        for (let j = 0; j \u003c 4; j++) {\n          const X = j === 0 ? A : j === 1 ? -A : j === 2 ? w : -w, t = (X - u) / dx;\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (hy >= YT && hy \u003c= YB) {\n            best = t;\n            kind = 2;\n          }\n        }\n      if (kind === 0) break;\n      const u1 = u + dx * best, y1 = y + dy * best;\n      const n = floor(best) + 1, sx = (dx * best) / n, sy = (dy * best) / n, ww = (wt * best) / n;\n      let px = CX + u + sx * 0.5, py = y + sy * 0.5;\n      for (let i = 0; i \u003c n; i++) {\n        const ix = px | 0, iy = py | 0;\n        if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H) {\n          buf[iy * W + ix] += ww;\n          kb[iy * W + ix] += ww * k;\n        }\n        px += sx;\n        py += sy;\n      }\n      u = u1;\n      y = y1;\n      if (kind === 2) dx = -dx;\n      else {\n        const q = (2 * (dx * nx + dy * ny)) / (nx * nx + ny * ny);\n        dx -= q * nx;\n        dy -= q * ny;\n      }\n      wt *= REFL;\n    }\n  }\n}\n\n// The walls as one-LED lines, anti-aliased by distance: the arcs, the outer\n// walls and the two corridor walls from focus to focus (or wherever Offset\n// has moved them).\nfunction buildWalls(S) {\n  const wall = S.wall, w = S.w;\n  for (let py = 0, i = 0; py \u003c H; py++)\n    for (let px = 0; px \u003c W; px++, i++) {\n      const u = px + 0.5 - CX, y = py + 0.5, au = abs(u);\n      let dmin = 9;\n      if (y \u003c= YT || y >= YB) {\n        const v = y - (y \u003c= YT ? YT : YB);\n        const E = u * u * IA2 + v * v * IB2, g = 2 * sqrt(u * u * IA2 * IA2 + v * v * IB2 * IB2);\n        dmin = abs(E - 1) / max(g, 1e-6);\n        dmin = min(dmin, sqrt((au - w) * (au - w) + v * v));\n      } else dmin = min(abs(au - A), abs(au - w));\n      wall[i] = cl(1 - dmin, 0, 1);\n    }\n  S.wallW = w;\n}\n\n// A soft blur, 1 4 6 4 1 across and then down, about an LED wide, so the\n// rays glow instead of drawing hard lines and the edge of the light steps\n// down by under 40 levels a LED.\nfunction blur(src, out, tmp) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++)\n      tmp[o + x] = (src[o + max(0, x - 2)] + 4 * src[o + max(0, x - 1)] + 6 * src[o + x] + 4 * src[o + min(W - 1, x + 1)] + src[o + min(W - 1, x + 2)]) / 16;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o0 = max(0, y - 2) * W, o1 = max(0, y - 1) * W, o2 = y * W, o3 = min(H - 1, y + 1) * W, o4 = min(H - 1, y + 2) * W;\n    for (let x = 0; x \u003c W; x++) out[o2 + x] = (tmp[o0 + x] + 4 * tmp[o1 + x] + 6 * tmp[o2 + x] + 4 * tmp[o3 + x] + tmp[o4 + x]) / 16;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.wallW !== S.w) buildWalls(S);\n  const hz = S.hz, kz = S.kz, wall = S.wall, col = S.col;\n  blur(S.buf, hz, S.tmp);\n  blur(S.kb, kz, S.tmp);\n  // Colour by how many mirrors the light has met: the direct light is a pale\n  // tint of the hue, and each reflection turns it a little further round the\n  // wheel and deeper, a sixth of a turn by the fifth.\n  // Round orange, yellow and yellow-green, 0.03 to 0.29 on the wheel, the\n  // colour goes paler so the dimmer far light reads as butter, not olive.\n  const h = S.hue + 0.5;\n  for (let j = 0; j \u003c 16; j++) {\n    const f = 1 - exp(-j / 3), hj = h + 0.17 * f, hf = hj - floor(hj);\n    const mud = cl((hf - 0.01) / 0.04, 0, 1) * cl((0.33 - hf) / 0.06, 0, 1);\n    hsv(hj, (0.18 + 0.62 * f) * (1 - 0.6 * mud), 1, col, j * 3);\n  }\n  hsv(h + 0.27, 0.45, 34, col, 48);\n  const lx = CX + S.lu, ly = S.ly, ie = 1 / max(1, S.expo);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const L = hz[i], v = min(1, LEVEL * Math.pow(L * ie, GAMMA));\n      // The mean number of reflections here, read between two palette steps.\n      const kb = L > 1e-4 ? min(14.99, kz[i] / L) : 0, j = floor(kb), f = kb - j, o = j * 3;\n      const ddx = x + 0.5 - lx, ddy = y + 0.5 - ly, core = 255 * exp(-(ddx * ddx + ddy * ddy) / 1.1);\n      // A wall is a dim line in the dark and a darker line across the glow,\n      // a mirror seen edge on, so it never stands 40 levels off its sides.\n      const wv = wall[i], g = 255 * v * (1 - 0.5 * wv);\n      const r = g * (col[o] + (col[o + 3] - col[o]) * f) + wv * col[48] + core;\n      const gg = g * (col[o + 1] + (col[o + 4] - col[o + 1]) * f) + wv * col[49] + core;\n      const b = g * (col[o + 2] + (col[o + 5] - col[o + 2]) * f) + wv * col[50] + core;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","layer":{"id":"layer-penrose-room","type":"code","name":"penrose-room","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Penrose Room\n// Family:  physics\n// Idea:    A point of light wanders in Penrose's mirrored room, two half-ellipses joined by a corridor whose thin walls run from focus to focus, and its traced rays fill the corridor and the ellipses while the two side chambers stay dark, until the light floats up through an ellipse into a chamber and the lit and dark parts of the room swap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Penrose unilluminable room (Roger Penrose, 1958), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1\n//\n// Knob 1: Hue. The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive.\n// Knob 2: Speed. How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower.\n// Knob 3: Offset. How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow.\n// Knob 4: Bounces. How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue.\n// Buttons: K1 tap sends the light across now, from the corridor into a side chamber or back.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The room, in LEDs. Two half-ellipses with semi-axes 31.5 and 26 put their\n// flat sides at rows 26.5 and 101.5, and their arcs touch rows 0 and 127, so\n// the room is the whole panel. The foci sit on the flat sides at 17.78 either\n// side of the middle column; the outer walls are the ellipses' own tangents\n// at the ends of the major axis, columns 0 and 63.\nconst A = 31.5, B = 26, C = sqrt(A * A - B * B), CX = 32;\nconst YT = 0.5 + B, YB = 127.5 - B, YM = 64;\nconst IA2 = 1 / (A * A), IB2 = 1 / (B * B), EPS = 1e-6;\n// Each reflection keeps 60% of the light. The glow is LEVEL times the light\n// over the mean of the lit LEDs, raised to GAMMA: the mean shows at 128 of 255\n// and the glow round the lamp comes close to full. At 92 the swap moved the\n// picture 0.270 on the study's drift scale; at 128 it moves it 0.365.\nconst REFL = 0.6, LEVEL = 0.50, GAMMA = 0.7;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, off: 0, nb: 14, w: C,\n    buf: new Float32Array(N), tmp: new Float32Array(N), hz: new Float32Array(N), kb: new Float32Array(N), kz: new Float32Array(N), wall: new Float32Array(N), wallW: NaN,\n    lu: 0, ly: YM, region: 0, tau: 0, stay: 3.2, mode: 0,\n    tt: 0, from: 0, to: 0, expo: 0, bz: new Float64Array(8), col: new Float32Array(51),\n  };\n}\n\n// Where the light may stand: the corridor between the walls, or one side\n// chamber, a little clear of every wall.\nfunction clampTo(S, region, u) {\n  const w = S.w;\n  if (region === 0) return cl(u, -(w - 1.2), w - 1.2);\n  return region * cl(region * u, w + 1.2, A - 1.2);\n}\n\n// A slow wander that starts from the middle of the place, so the light\n// arrives at the middle and sets off from there without a jump.\nfunction wander(S) {\n  const w = S.w, t = S.tau;\n  const y = YM + 30 * sin(0.4 * t);\n  if (S.region === 0) return [(w - 3.5) * sin(0.55 * t), y];\n  const uc = (S.region * (w + A)) / 2, au = max(0, (A - w) / 2 - 2.5);\n  return [uc + au * sin(0.7 * t), y];\n}\n\n// Crossing over: a cubic curve that leaves straight up (or down) through the\n// flat side nearer the light, arcs through the half-ellipse and drops\n// straight into the middle of the other place. From the corridor it leaves\n// between the foci and from a chamber outside them, as a ray would.\nfunction startTransit(S) {\n  const u0 = S.lu, y0 = S.ly, w = S.w;\n  S.from = S.region;\n  S.to = S.region === 0 ? (u0 > 0.5 ? 1 : u0 \u003c -0.5 ? -1 : Math.random() \u003c 0.5 ? -1 : 1) : 0;\n  const u3 = S.to === 0 ? 0 : (S.to * (w + A)) / 2, cy = y0 \u003c= YM ? YT - 32 : YB + 32;\n  S.bz.set([u0, y0, u0, cy, u3, cy, u3, YM]);\n  S.mode = 1;\n  S.tt = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.off = cl(k[2] || 0, -4, 4);\n  S.w = C + S.off;\n  S.nb = Math.round(40 * Math.pow(cl(k[3], 0, 1), 0.373));\n  const sp = S.speed / 2;\n\n  if (input.btnPressed && input.btnPressed[0] && S.mode === 0) startTransit(S);\n  if (S.mode === 0) {\n    S.tau += d * sp;\n    S.stay -= d * sp;\n    const p = wander(S);\n    S.lu = clampTo(S, S.region, p[0]);\n    S.ly = p[1];\n    if (S.stay \u003c= 0) startTransit(S);\n  } else {\n    S.tt = min(1, S.tt + (d * sp) / 1.8);\n    const e = S.tt * S.tt * (3 - 2 * S.tt), f = 1 - e, b = S.bz;\n    const c0 = f * f * f, c1 = 3 * f * f * e, c2 = 3 * f * e * e, c3 = e * e * e;\n    let u = c0 * b[0] + c1 * b[2] + c2 * b[4] + c3 * b[6];\n    const y = c0 * b[1] + c1 * b[3] + c2 * b[5] + c3 * b[7];\n    // Between the flat sides the light is in a place, never in a wall.\n    // In a half-ellipse it keeps clear of the arc: with the walls 4 LEDs out,\n    // the curve's top would just touch it.\n    let yy = y;\n    if (y > YT && y \u003c YB) u = clampTo(S, S.tt \u003c 0.5 ? S.from : S.to, u);\n    else {\n      const yc = y \u003c= YT ? YT : YB, v = y - yc, E = u * u * IA2 + v * v * IB2;\n      if (E > 0.85) {\n        const q = sqrt(0.85 / E);\n        u *= q;\n        yy = yc + v * q;\n      }\n    }\n    S.lu = u;\n    S.ly = yy;\n    if (S.tt >= 1) {\n      S.mode = 0;\n      S.region = S.to;\n      S.tau = 0;\n      S.stay = S.region === 0 ? 5 + 3 * Math.random() : 7 + 3 * Math.random();\n    }\n  }\n\n  // The light fades over about a sixth of a second, so a place goes dark\n  // soon after the light has left it.\n  const buf = S.buf, kb = S.kb, fade = exp(-d / 0.16);\n  for (let i = 0; i \u003c N; i++) {\n    buf[i] *= fade;\n    kb[i] *= fade;\n  }\n  trace(S, d * 30);\n  // Exposure follows the mean of the lit LEDs over about half a second, the\n  // way an eye adjusts, so a chamber, where every ray soon hits a wall and\n  // loses 40% of its light, glows about as bright as the corridor.\n  let sum = 0, n = 0;\n  for (let i = 0; i \u003c N; i++)\n    if (buf[i] > 0.5) {\n      sum += buf[i];\n      n++;\n    }\n  const m = n ? sum / n : 1;\n  S.expo = S.expo > 0 ? S.expo + (m - S.expo) * (1 - exp(-d / 0.5)) : m;\n}\n\n// Rays leave the light evenly spaced round the circle, the whole fan turned\n// by a random angle each frame, and bounce off the mirrors; each reflection\n// keeps 60% of the light, so the first few reflections draw the shapes and\n// the later ones fill in. A ray's path is added to the buffer one LED step at\n// a time, so a pixel gathers light in proportion to the rays crossing it.\nfunction trace(S, gain) {\n  const nb = S.nb, R = cl(floor(4200 / (nb + 1)), 120, 300), w = S.w, buf = S.buf, kb = S.kb;\n  const phase = Math.random(), w0 = (gain * 0.5 * 300) / R;\n  for (let r = 0; r \u003c R; r++) {\n    const th = (2 * PI * (r + phase)) / R;\n    let u = S.lu, y = S.ly, dx = cos(th), dy = sin(th), wt = w0;\n    for (let k = 0; k \u003c= nb; k++) {\n      let best = 1e9, kind = 0, nx = 0, ny = 0;\n      // The two arcs: an ellipse counts as a mirror only on its own side of\n      // its flat side, which is open to the room between them.\n      for (let e = 0; e \u003c 2; e++) {\n        const yc = e ? YB : YT, v = y - yc;\n        const qa = dx * dx * IA2 + dy * dy * IB2, qb = 2 * (u * dx * IA2 + v * dy * IB2), qc = u * u * IA2 + v * v * IB2 - 1;\n        const disc = qb * qb - 4 * qa * qc;\n        if (disc \u003c= 0) continue;\n        const sq = sqrt(disc);\n        for (let j = 0; j \u003c 2; j++) {\n          const t = (-qb + (j ? sq : -sq)) / (2 * qa);\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (e ? hy >= YB : hy \u003c= YT) {\n            best = t;\n            kind = 1;\n            nx = (u + dx * t) * IA2;\n            ny = (hy - yc) * IB2;\n            break;\n          }\n        }\n      }\n      // The outer walls and the two thin corridor walls, mirrors on both sides.\n      if (dx !== 0)\n        for (let j = 0; j \u003c 4; j++) {\n          const X = j === 0 ? A : j === 1 ? -A : j === 2 ? w : -w, t = (X - u) / dx;\n          if (t \u003c= EPS || t >= best) continue;\n          const hy = y + dy * t;\n          if (hy >= YT && hy \u003c= YB) {\n            best = t;\n            kind = 2;\n          }\n        }\n      if (kind === 0) break;\n      const u1 = u + dx * best, y1 = y + dy * best;\n      const n = floor(best) + 1, sx = (dx * best) / n, sy = (dy * best) / n, ww = (wt * best) / n;\n      let px = CX + u + sx * 0.5, py = y + sy * 0.5;\n      for (let i = 0; i \u003c n; i++) {\n        const ix = px | 0, iy = py | 0;\n        if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H) {\n          buf[iy * W + ix] += ww;\n          kb[iy * W + ix] += ww * k;\n        }\n        px += sx;\n        py += sy;\n      }\n      u = u1;\n      y = y1;\n      if (kind === 2) dx = -dx;\n      else {\n        const q = (2 * (dx * nx + dy * ny)) / (nx * nx + ny * ny);\n        dx -= q * nx;\n        dy -= q * ny;\n      }\n      wt *= REFL;\n    }\n  }\n}\n\n// The walls as one-LED lines, anti-aliased by distance: the arcs, the outer\n// walls and the two corridor walls from focus to focus (or wherever Offset\n// has moved them).\nfunction buildWalls(S) {\n  const wall = S.wall, w = S.w;\n  for (let py = 0, i = 0; py \u003c H; py++)\n    for (let px = 0; px \u003c W; px++, i++) {\n      const u = px + 0.5 - CX, y = py + 0.5, au = abs(u);\n      let dmin = 9;\n      if (y \u003c= YT || y >= YB) {\n        const v = y - (y \u003c= YT ? YT : YB);\n        const E = u * u * IA2 + v * v * IB2, g = 2 * sqrt(u * u * IA2 * IA2 + v * v * IB2 * IB2);\n        dmin = abs(E - 1) / max(g, 1e-6);\n        dmin = min(dmin, sqrt((au - w) * (au - w) + v * v));\n      } else dmin = min(abs(au - A), abs(au - w));\n      wall[i] = cl(1 - dmin, 0, 1);\n    }\n  S.wallW = w;\n}\n\n// A soft blur, 1 4 6 4 1 across and then down, about an LED wide, so the\n// rays glow instead of drawing hard lines and the edge of the light steps\n// down by under 40 levels a LED.\nfunction blur(src, out, tmp) {\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    for (let x = 0; x \u003c W; x++)\n      tmp[o + x] = (src[o + max(0, x - 2)] + 4 * src[o + max(0, x - 1)] + 6 * src[o + x] + 4 * src[o + min(W - 1, x + 1)] + src[o + min(W - 1, x + 2)]) / 16;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const o0 = max(0, y - 2) * W, o1 = max(0, y - 1) * W, o2 = y * W, o3 = min(H - 1, y + 1) * W, o4 = min(H - 1, y + 2) * W;\n    for (let x = 0; x \u003c W; x++) out[o2 + x] = (tmp[o0 + x] + 4 * tmp[o1 + x] + 6 * tmp[o2 + x] + 4 * tmp[o3 + x] + tmp[o4 + x]) / 16;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  if (S.wallW !== S.w) buildWalls(S);\n  const hz = S.hz, kz = S.kz, wall = S.wall, col = S.col;\n  blur(S.buf, hz, S.tmp);\n  blur(S.kb, kz, S.tmp);\n  // Colour by how many mirrors the light has met: the direct light is a pale\n  // tint of the hue, and each reflection turns it a little further round the\n  // wheel and deeper, a sixth of a turn by the fifth.\n  // Round orange, yellow and yellow-green, 0.03 to 0.29 on the wheel, the\n  // colour goes paler so the dimmer far light reads as butter, not olive.\n  const h = S.hue + 0.5;\n  for (let j = 0; j \u003c 16; j++) {\n    const f = 1 - exp(-j / 3), hj = h + 0.17 * f, hf = hj - floor(hj);\n    const mud = cl((hf - 0.01) / 0.04, 0, 1) * cl((0.33 - hf) / 0.06, 0, 1);\n    hsv(hj, (0.18 + 0.62 * f) * (1 - 0.6 * mud), 1, col, j * 3);\n  }\n  hsv(h + 0.27, 0.45, 34, col, 48);\n  const lx = CX + S.lu, ly = S.ly, ie = 1 / max(1, S.expo);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const L = hz[i], v = min(1, LEVEL * Math.pow(L * ie, GAMMA));\n      // The mean number of reflections here, read between two palette steps.\n      const kb = L > 1e-4 ? min(14.99, kz[i] / L) : 0, j = floor(kb), f = kb - j, o = j * 3;\n      const ddx = x + 0.5 - lx, ddy = y + 0.5 - ly, core = 255 * exp(-(ddx * ddx + ddy * ddy) / 1.1);\n      // A wall is a dim line in the dark and a darker line across the glow,\n      // a mirror seen edge on, so it never stands 40 levels off its sides.\n      const wv = wall[i], g = 255 * v * (1 - 0.5 * wv);\n      const r = g * (col[o] + (col[o + 3] - col[o]) * f) + wv * col[48] + core;\n      const gg = g * (col[o + 1] + (col[o + 4] - col[o + 1]) * f) + wv * col[49] + core;\n      const b = g * (col[o + 2] + (col[o + 5] - col[o + 2]) * f) + wv * col[50] + core;\n      display.setPixel(x, y, min(255, r), min(255, gg), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Offset=-4..4, Bounces=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the light. At 0 the light straight from the lamp is a pale aqua and light that has met more mirrors turns deeper, to azure after five; the walls are a dim violet a quarter turn on. Round orange and yellow the light goes paler, so far light reads as butter, not olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the light wanders and how soon it moves: at 2 it stays 3.2 s in the corridor at the start, takes 1.8 s to float through an ellipse into a chamber, and after that stays 5 to 8 s in the corridor and 7 to 10 s in a chamber; at 0.2 all of it is ten times slower."},{"name":"Offset","min":-4,"max":4,"about":"How far the two corridor walls stand off the foci, in LEDs. At 0 they run exactly from focus to focus and not one ray crosses into the dark part; moved 4 LEDs in or out, the gap between wall and focus lets rays through and the dark part fills with a dimmer glow."},{"name":"Bounces","min":0,"max":1,"about":"How many times each ray is reflected: 14 at the start; none at 0, where only what the lamp sees straight on is lit and from a chamber the far side of the room stays dark; 40 at 1, where more of the light has met many mirrors and the room turns a deeper blue."}],"start":[0,2,0,0.06],"measures":{"motion":0.1329,"detail":0.0175,"edges":0.0753,"complexity":1.6655,"coverage":0.6752,"colour":0.1329,"drift":0.3645},"knobResponse":[0.1321,0.1111,0.1163,0.0615]},{"slug":"pentomino-cover","title":"Pentomino Cover","family":"algo","round":34,"note":"6×10 직사각형을 크누스의 춤추는 링크가 열두 펜토미노로 채워요. 고를 수가 가장 적은 칸부터 조각을 놓고 막히면 빼서 아래쪽 조각들이 쉴 새 없이 들고 나며 윤곽만 잠깐 남기고, 다 덮이면 2초 동안 빛이 비스듬히 쓸고 판 아래에 눈금이 하나 늘어요. K3 은 판을 5×12, 4×15, 해가 둘뿐인 3×20 으로 바꿔요.","idea":"A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.","buttons":"K1 tap starts a new search in a new shuffled order.","code":"// ===== Patternflow pattern =====\n// Title:   Pentomino Cover\n// Family:  algo\n// Idea:    A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dancing Links and Algorithm X (Donald Knuth, 2000) on Solomon Golomb's pentominoes (1953), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1\n//\n// Knob 1: Hue. Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had.\n// Knob 2: Speed. Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3.\n// Knob 3: Board. 0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images.\n// Knob 4: Shuffle. How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search.\n// Buttons: K1 tap starts a new search in a new shuffled order.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, round, abs, pow, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The twelve pentominoes, F I L N P T U V W X Y Z.\nconst PIECES = [\n  [[1, 0], [2, 0], [0, 1], [1, 1], [1, 2]],\n  [[0, 0], [1, 0], [2, 0], [3, 0], [4, 0]],\n  [[0, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [0, 1], [1, 1], [0, 2]],\n  [[0, 0], [1, 0], [2, 0], [1, 1], [1, 2]],\n  [[0, 0], [2, 0], [0, 1], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [0, 2], [1, 2], [2, 2]],\n  [[0, 0], [0, 1], [1, 1], [1, 2], [2, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [1, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [1, 2], [2, 2]],\n];\nconst P_ = 4, X_ = 9;\n// Boards, columns by rows, and the LEDs a cell takes.\nconst BOARDS = [[6, 10, 10], [5, 12, 10], [4, 15, 8], [3, 20, 6]];\n\n// Every distinct orientation of a piece: the four turns first, then the\n// four turns of its mirror image, so flip marks the mirrored ones.\nfunction orientations(cells) {\n  const out = [], seen = new Set();\n  for (let f = 0; f \u003c 2; f++)\n    for (let q = 0; q \u003c 4; q++) {\n      let c = cells.map(([x, y]) => (f ? [-x, y] : [x, y]));\n      for (let k = 0; k \u003c q; k++) c = c.map(([x, y]) => [-y, x]);\n      const mx = min(...c.map((p) => p[0])), my = min(...c.map((p) => p[1]));\n      c = c.map(([x, y]) => [x - mx, y - my]).sort((a, b) => a[1] - b[1] || a[0] - b[0]);\n      const key = c.join(\";\");\n      if (!seen.has(key)) seen.add(key), out.push({ cells: c, flip: f });\n    }\n  return out;\n}\nconst ORIENT = PIECES.map(orientations);\n\n// The exact cover matrix: one column per piece, one per cell, and one\n// secondary column that keeps the count to solutions up to symmetry. The X\n// may only sit in the board's first quarter; when it sits on a mirror line\n// of the board the P may not be mirrored, and the secondary column holds\n// those two choices apart.\nfunction placements(bw, bh) {\n  const rows = [];\n  PIECES.forEach((_, pi) => {\n    for (const o of ORIENT[pi]) {\n      const ow = max(...o.cells.map((p) => p[0])) + 1, oh = max(...o.cells.map((p) => p[1])) + 1;\n      for (let y = 0; y + oh \u003c= bh; y++)\n        for (let x = 0; x + ow \u003c= bw; x++) {\n          let sec = pi === P_ && o.flip === 1;\n          if (pi === X_) {\n            const cx = x + 1, cy = y + 1;\n            if (2 * cx > bw - 1 || 2 * cy > bh - 1) continue;\n            sec = (bw % 2 === 1 && 2 * cx === bw - 1) || (bh % 2 === 1 && 2 * cy === bh - 1);\n          }\n          rows.push({ piece: pi, cells: o.cells.map(([a, b]) => (y + b) * bw + x + a), sec });\n        }\n    }\n  });\n  return rows;\n}\n\nconst MAXN = 16000;\nfunction newSearch(S, again) {\n  const [bw, bh] = BOARDS[S.board];\n  const rows = placements(bw, bh);\n  // Shuffle moves each row by up to twice that share of the list. A search\n  // started again keeps the order it had.\n  if (!again) S.jit = rows.map(() => random());\n  const key = rows.map((_, i) => i / rows.length + 2 * S.shuffle * S.jit[i]);\n  const order = rows.map((_, i) => i).sort((a, b) => key[a] - key[b]);\n  const NC = 12 + bw * bh, SEC = NC + 1;\n  const { L, R, U, D, C, RW, SZ } = S;\n  for (let c = 0; c \u003c= NC; c++) (L[c] = c - 1), (R[c] = c + 1), (U[c] = D[c] = C[c] = c), (SZ[c] = 0);\n  L[0] = NC;\n  R[NC] = 0;\n  L[SEC] = R[SEC] = U[SEC] = D[SEC] = C[SEC] = SEC;\n  let k = SEC + 1;\n  S.rows = order.map((i) => rows[i]);\n  S.rows.forEach((r, ri) => {\n    const cols = [1 + r.piece, ...r.cells.map((c) => 13 + c)];\n    if (r.sec) cols.push(SEC);\n    const first = k;\n    for (const c of cols) {\n      C[k] = c;\n      RW[k] = ri;\n      U[k] = U[c];\n      D[k] = c;\n      D[U[c]] = k;\n      U[c] = k;\n      SZ[c]++;\n      L[k] = k - 1;\n      R[k] = k + 1;\n      k++;\n    }\n    L[first] = k - 1;\n    R[k - 1] = first;\n  });\n  S.bw = bw;\n  S.bh = bh;\n  S.cs = BOARDS[S.board][2];\n  S.k = 0;\n  S.mode = 0;\n  S.done = false;\n  S.found = 0;\n  S.hold = 0;\n  S.cell.fill(-1);\n  S.age.fill(9);\n  S.ghost.fill(-1);\n  S.gAge.fill(9);\n  S.builtBoard = S.board;\n  S.builtShuffle = S.shuffle;\n}\n\nfunction cover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  L[R[c]] = L[c];\n  R[L[c]] = R[c];\n  for (let i = D[c]; i !== c; i = D[i])\n    for (let j = R[i]; j !== i; j = R[j]) (U[D[j]] = U[j]), (D[U[j]] = D[j]), SZ[C[j]]--;\n}\nfunction uncover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  for (let i = U[c]; i !== c; i = U[i])\n    for (let j = L[i]; j !== i; j = L[j]) SZ[C[j]]++, (U[D[j]] = j), (D[U[j]] = j);\n  L[R[c]] = c;\n  R[L[c]] = c;\n}\nfunction place(S, node, on) {\n  const r = S.rows[S.RW[node]];\n  for (const c of r.cells) {\n    if (on) (S.cell[c] = r.piece), (S.age[c] = 0);\n    else (S.ghost[c] = S.cell[c]), (S.gAge[c] = 0), (S.cell[c] = -1);\n  }\n}\n\n// Algorithm X, one node of the search tree a call: enter a level and cover\n// the column with the fewest rows left, try its next row, or step back.\n// Returns true when the board is full.\nfunction searchStep(S) {\n  const { L, R, D, C, SZ, col, row } = S;\n  if (S.mode === 0) {\n    if (R[0] === 0) {\n      S.mode = 2;\n      return true;\n    }\n    let c = R[0], best = 1e9;\n    for (let j = R[0]; j !== 0; j = R[j]) if (SZ[j] \u003c best) (best = SZ[j]), (c = j);\n    cover(S, c);\n    col[S.k] = c;\n    row[S.k] = D[c];\n    S.mode = 1;\n  } else if (S.mode === 1) {\n    const r = row[S.k];\n    if (r === col[S.k]) {\n      uncover(S, col[S.k]);\n      S.mode = 2;\n      return false;\n    }\n    for (let j = R[r]; j !== r; j = R[j]) cover(S, C[j]);\n    place(S, r, true);\n    S.k++;\n    S.mode = 0;\n  } else {\n    if (S.k === 0) {\n      S.done = true;\n      return false;\n    }\n    S.k--;\n    const r = row[S.k];\n    place(S, r, false);\n    for (let j = L[r]; j !== r; j = L[j]) uncover(S, C[j]);\n    row[S.k] = D[r];\n    S.mode = 1;\n  }\n  return false;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, board: 0, shuffle: 0.06, warm: false, acc: 0, sweep: 0,\n    L: new Int32Array(MAXN), R: new Int32Array(MAXN), U: new Int32Array(MAXN), D: new Int32Array(MAXN),\n    C: new Int32Array(MAXN), RW: new Int32Array(MAXN), SZ: new Int32Array(80), col: new Int32Array(16), row: new Int32Array(16),\n    cell: new Int8Array(60), age: new Float32Array(60), ghost: new Int8Array(60), gAge: new Float32Array(60),\n    key: new Int8Array(60), pc: new Int8Array(N), c: [0, 0, 0],\n  };\n}\n\n// A full cover holds for HOLD seconds; the search takes rate(Speed) steps a\n// second.\nconst HOLD = 2;\nconst rate = (sp) => 5 * pow(2, 3.5 * (sp - 0.2));\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.board = cl(round(k[2]), 0, 3);\n  S.shuffle = cl(k[3], 0, 1);\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (!S.warm || pressed || S.board !== S.builtBoard || abs(S.shuffle - S.builtShuffle) > 0.04) {\n    newSearch(S);\n    if (!S.warm) {\n      // Open about 1100 steps short of the first full board, so at Speed 2\n      // the first solution comes near 2.8 s.\n      let n = 0;\n      while (!searchStep(S) && !S.done) n++;\n      newSearch(S, true);\n      for (let i = 0; i \u003c n - 1100; i++) searchStep(S);\n      S.age.fill(9);\n      S.ghost.fill(-1);\n      S.warm = true;\n    }\n  }\n  for (let c = 0; c \u003c 60; c++) (S.age[c] += d), (S.gAge[c] += d);\n  if (S.hold > 0) {\n    S.hold = max(0, S.hold - d);\n    S.sweep += d / HOLD;\n    return;\n  }\n  if (S.done) {\n    newSearch(S);\n    return;\n  }\n  S.acc += d * rate(S.speed);\n  while (S.acc >= 1) {\n    S.acc--;\n    if (searchStep(S)) {\n      S.found++;\n      S.hold = HOLD;\n      S.sweep = 0;\n      S.acc = 0;\n      break;\n    }\n    if (S.done) break;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { bw, bh, cs, cell, age, ghost, gAge, key, pc, c } = S, base = S.hue + 0.55;\n  const BW = bw * cs + 1, BH = bh * cs + 1, ox = floor((W - BW) / 2), oy = floor((H - BH) / 2);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, 0, 0, 0);\n  // Each cell shows its piece, or for 0.18 s after the search takes a\n  // piece out, that piece's outline fading.\n  for (let i = 0; i \u003c bw * bh; i++) key[i] = cell[i] >= 0 ? cell[i] : ghost[i] >= 0 && gAge[i] \u003c 0.18 ? 12 + ghost[i] : -1;\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= bw || y >= bh ? -2 : key[y * bw + x]);\n  // A cell's own LEDs show its piece, a grid line between two cells of one\n  // piece that piece, any other grid line the dark seam.\n  pc.fill(-1);\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const gx = X % cs === 0, gy = Y % cs === 0, cx = floor(X / cs), cy = floor(Y / cs);\n      let q;\n      if (!gx && !gy) q = at(cx, cy);\n      else if (gx && !gy) q = at(cx - 1, cy) === at(cx, cy) ? at(cx, cy) : -1;\n      else if (!gx && gy) q = at(cx, cy - 1) === at(cx, cy) ? at(cx, cy) : -1;\n      else {\n        const a = at(cx - 1, cy - 1);\n        q = a === at(cx, cy - 1) && a === at(cx - 1, cy) && a === at(cx, cy) ? a : -1;\n      }\n      pc[(oy + Y) * W + ox + X] = q;\n    }\n  // A light sweeps across the board while a solution holds.\n  const band = S.hold > 0 ? -0.25 + 1.5 * cl(S.sweep, 0, 1) : -9;\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const p = (oy + Y) * W + ox + X, q = pc[p];\n      const cx = min(bw - 1, floor(X / cs)), cy = min(bh - 1, floor(Y / cs)), ci = cy * bw + cx;\n      const g = (X / BW + Y / BH) / 2 - band, lit = S.hold > 0 ? exp(-g * g * 90) : 0;\n      if (q >= 0 && q \u003c 12) {\n        // A slight bevel: lighter next to a seam above or to the left,\n        // darker next to one below or to the right.\n        const up = pc[p - W] \u003c 0 || pc[p - W] >= 12, lf = pc[p - 1] \u003c 0 || pc[p - 1] >= 12;\n        const dn = pc[p + W] \u003c 0 || pc[p + W] >= 12, rt = pc[p + 1] \u003c 0 || pc[p + 1] >= 12;\n        const fresh = cl(1 - age[ci] / 0.15, 0, 1);\n        const v = min(1, 0.82 + (up || lf ? 0.18 : 0) - (dn || rt ? 0.2 : 0) + 0.15 * fresh + 0.3 * lit);\n        hsv(base + q / 12, (0.72 - 0.3 * fresh) * (1 - 0.7 * lit), 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 255 * v), round(c[1] * 255 * v), round(c[2] * 255 * v));\n      } else if (q >= 12) {\n        // A piece just taken out leaves its outline for a moment.\n        if (pc[p - W] === q && pc[p + W] === q && pc[p - 1] === q && pc[p + 1] === q) continue;\n        const f = cl(1 - gAge[ci] / 0.18, 0, 1);\n        hsv(base + (q - 12) / 12, 0.6, 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 150 * f), round(c[1] * 150 * f), round(c[2] * 150 * f));\n      } else if (X === 0 || Y === 0 || X === BW - 1 || Y === BH - 1) display.setPixel(ox + X, oy + Y, 44, 44, 54);\n      else if (X % cs === 0 && Y % cs === 0) display.setPixel(ox + X, oy + Y, 40, 40, 48);\n    }\n  // One tick under the board for each solution this search has found, 31\n  // to a row; a full row turns dim and the next starts over it.\n  const ty = oy + BH + (oy > 6 ? 2 : 0), full = floor(S.found / 31), part = S.found % 31;\n  for (let i = 0; i \u003c 31; i++) {\n    const on = i \u003c part, x = 1 + 2 * i;\n    if (!on && full === 0) continue;\n    hsv(base + 0.1 * (on ? full : full - 1), on ? 0.25 : 0.5, 1, c);\n    const v = on ? (i === part - 1 && S.hold > 0 ? 255 : 190) : 70;\n    for (let y = ty; y \u003c min(H, ty + 2); y++) display.setPixel(x, y, round(c[0] * v), round(c[1] * v), round(c[2] * v));\n  }\n}\n","layer":{"id":"layer-pentomino-cover","type":"code","name":"pentomino-cover","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pentomino Cover\n// Family:  algo\n// Idea:    A rectangle of sixty cells stands on the panel and Knuth's dancing links fill it with the twelve pentominoes as an exact cover, always placing a piece on the cell with the fewest choices left and taking pieces back out as it backs up, so the board flickers with pieces dropping in and leaving their outlines as they go, and each full cover holds for two seconds under a sweep of light and adds a tick below the board.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Dancing Links and Algorithm X (Donald Knuth, 2000) on Solomon Golomb's pentominoes (1953), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1\n//\n// Knob 1: Hue. Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had.\n// Knob 2: Speed. Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3.\n// Knob 3: Board. 0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images.\n// Knob 4: Shuffle. How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search.\n// Buttons: K1 tap starts a new search in a new shuffled order.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, round, abs, pow, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The twelve pentominoes, F I L N P T U V W X Y Z.\nconst PIECES = [\n  [[1, 0], [2, 0], [0, 1], [1, 1], [1, 2]],\n  [[0, 0], [1, 0], [2, 0], [3, 0], [4, 0]],\n  [[0, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [0, 1], [1, 1], [0, 2]],\n  [[0, 0], [1, 0], [2, 0], [1, 1], [1, 2]],\n  [[0, 0], [2, 0], [0, 1], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [0, 2], [1, 2], [2, 2]],\n  [[0, 0], [0, 1], [1, 1], [1, 2], [2, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [1, 2]],\n  [[1, 0], [0, 1], [1, 1], [2, 1], [3, 1]],\n  [[0, 0], [1, 0], [1, 1], [1, 2], [2, 2]],\n];\nconst P_ = 4, X_ = 9;\n// Boards, columns by rows, and the LEDs a cell takes.\nconst BOARDS = [[6, 10, 10], [5, 12, 10], [4, 15, 8], [3, 20, 6]];\n\n// Every distinct orientation of a piece: the four turns first, then the\n// four turns of its mirror image, so flip marks the mirrored ones.\nfunction orientations(cells) {\n  const out = [], seen = new Set();\n  for (let f = 0; f \u003c 2; f++)\n    for (let q = 0; q \u003c 4; q++) {\n      let c = cells.map(([x, y]) => (f ? [-x, y] : [x, y]));\n      for (let k = 0; k \u003c q; k++) c = c.map(([x, y]) => [-y, x]);\n      const mx = min(...c.map((p) => p[0])), my = min(...c.map((p) => p[1]));\n      c = c.map(([x, y]) => [x - mx, y - my]).sort((a, b) => a[1] - b[1] || a[0] - b[0]);\n      const key = c.join(\";\");\n      if (!seen.has(key)) seen.add(key), out.push({ cells: c, flip: f });\n    }\n  return out;\n}\nconst ORIENT = PIECES.map(orientations);\n\n// The exact cover matrix: one column per piece, one per cell, and one\n// secondary column that keeps the count to solutions up to symmetry. The X\n// may only sit in the board's first quarter; when it sits on a mirror line\n// of the board the P may not be mirrored, and the secondary column holds\n// those two choices apart.\nfunction placements(bw, bh) {\n  const rows = [];\n  PIECES.forEach((_, pi) => {\n    for (const o of ORIENT[pi]) {\n      const ow = max(...o.cells.map((p) => p[0])) + 1, oh = max(...o.cells.map((p) => p[1])) + 1;\n      for (let y = 0; y + oh \u003c= bh; y++)\n        for (let x = 0; x + ow \u003c= bw; x++) {\n          let sec = pi === P_ && o.flip === 1;\n          if (pi === X_) {\n            const cx = x + 1, cy = y + 1;\n            if (2 * cx > bw - 1 || 2 * cy > bh - 1) continue;\n            sec = (bw % 2 === 1 && 2 * cx === bw - 1) || (bh % 2 === 1 && 2 * cy === bh - 1);\n          }\n          rows.push({ piece: pi, cells: o.cells.map(([a, b]) => (y + b) * bw + x + a), sec });\n        }\n    }\n  });\n  return rows;\n}\n\nconst MAXN = 16000;\nfunction newSearch(S, again) {\n  const [bw, bh] = BOARDS[S.board];\n  const rows = placements(bw, bh);\n  // Shuffle moves each row by up to twice that share of the list. A search\n  // started again keeps the order it had.\n  if (!again) S.jit = rows.map(() => random());\n  const key = rows.map((_, i) => i / rows.length + 2 * S.shuffle * S.jit[i]);\n  const order = rows.map((_, i) => i).sort((a, b) => key[a] - key[b]);\n  const NC = 12 + bw * bh, SEC = NC + 1;\n  const { L, R, U, D, C, RW, SZ } = S;\n  for (let c = 0; c \u003c= NC; c++) (L[c] = c - 1), (R[c] = c + 1), (U[c] = D[c] = C[c] = c), (SZ[c] = 0);\n  L[0] = NC;\n  R[NC] = 0;\n  L[SEC] = R[SEC] = U[SEC] = D[SEC] = C[SEC] = SEC;\n  let k = SEC + 1;\n  S.rows = order.map((i) => rows[i]);\n  S.rows.forEach((r, ri) => {\n    const cols = [1 + r.piece, ...r.cells.map((c) => 13 + c)];\n    if (r.sec) cols.push(SEC);\n    const first = k;\n    for (const c of cols) {\n      C[k] = c;\n      RW[k] = ri;\n      U[k] = U[c];\n      D[k] = c;\n      D[U[c]] = k;\n      U[c] = k;\n      SZ[c]++;\n      L[k] = k - 1;\n      R[k] = k + 1;\n      k++;\n    }\n    L[first] = k - 1;\n    R[k - 1] = first;\n  });\n  S.bw = bw;\n  S.bh = bh;\n  S.cs = BOARDS[S.board][2];\n  S.k = 0;\n  S.mode = 0;\n  S.done = false;\n  S.found = 0;\n  S.hold = 0;\n  S.cell.fill(-1);\n  S.age.fill(9);\n  S.ghost.fill(-1);\n  S.gAge.fill(9);\n  S.builtBoard = S.board;\n  S.builtShuffle = S.shuffle;\n}\n\nfunction cover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  L[R[c]] = L[c];\n  R[L[c]] = R[c];\n  for (let i = D[c]; i !== c; i = D[i])\n    for (let j = R[i]; j !== i; j = R[j]) (U[D[j]] = U[j]), (D[U[j]] = D[j]), SZ[C[j]]--;\n}\nfunction uncover(S, c) {\n  const { L, R, U, D, C, SZ } = S;\n  for (let i = U[c]; i !== c; i = U[i])\n    for (let j = L[i]; j !== i; j = L[j]) SZ[C[j]]++, (U[D[j]] = j), (D[U[j]] = j);\n  L[R[c]] = c;\n  R[L[c]] = c;\n}\nfunction place(S, node, on) {\n  const r = S.rows[S.RW[node]];\n  for (const c of r.cells) {\n    if (on) (S.cell[c] = r.piece), (S.age[c] = 0);\n    else (S.ghost[c] = S.cell[c]), (S.gAge[c] = 0), (S.cell[c] = -1);\n  }\n}\n\n// Algorithm X, one node of the search tree a call: enter a level and cover\n// the column with the fewest rows left, try its next row, or step back.\n// Returns true when the board is full.\nfunction searchStep(S) {\n  const { L, R, D, C, SZ, col, row } = S;\n  if (S.mode === 0) {\n    if (R[0] === 0) {\n      S.mode = 2;\n      return true;\n    }\n    let c = R[0], best = 1e9;\n    for (let j = R[0]; j !== 0; j = R[j]) if (SZ[j] \u003c best) (best = SZ[j]), (c = j);\n    cover(S, c);\n    col[S.k] = c;\n    row[S.k] = D[c];\n    S.mode = 1;\n  } else if (S.mode === 1) {\n    const r = row[S.k];\n    if (r === col[S.k]) {\n      uncover(S, col[S.k]);\n      S.mode = 2;\n      return false;\n    }\n    for (let j = R[r]; j !== r; j = R[j]) cover(S, C[j]);\n    place(S, r, true);\n    S.k++;\n    S.mode = 0;\n  } else {\n    if (S.k === 0) {\n      S.done = true;\n      return false;\n    }\n    S.k--;\n    const r = row[S.k];\n    place(S, r, false);\n    for (let j = L[r]; j !== r; j = L[j]) uncover(S, C[j]);\n    row[S.k] = D[r];\n    S.mode = 1;\n  }\n  return false;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, board: 0, shuffle: 0.06, warm: false, acc: 0, sweep: 0,\n    L: new Int32Array(MAXN), R: new Int32Array(MAXN), U: new Int32Array(MAXN), D: new Int32Array(MAXN),\n    C: new Int32Array(MAXN), RW: new Int32Array(MAXN), SZ: new Int32Array(80), col: new Int32Array(16), row: new Int32Array(16),\n    cell: new Int8Array(60), age: new Float32Array(60), ghost: new Int8Array(60), gAge: new Float32Array(60),\n    key: new Int8Array(60), pc: new Int8Array(N), c: [0, 0, 0],\n  };\n}\n\n// A full cover holds for HOLD seconds; the search takes rate(Speed) steps a\n// second.\nconst HOLD = 2;\nconst rate = (sp) => 5 * pow(2, 3.5 * (sp - 0.2));\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.board = cl(round(k[2]), 0, 3);\n  S.shuffle = cl(k[3], 0, 1);\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (!S.warm || pressed || S.board !== S.builtBoard || abs(S.shuffle - S.builtShuffle) > 0.04) {\n    newSearch(S);\n    if (!S.warm) {\n      // Open about 1100 steps short of the first full board, so at Speed 2\n      // the first solution comes near 2.8 s.\n      let n = 0;\n      while (!searchStep(S) && !S.done) n++;\n      newSearch(S, true);\n      for (let i = 0; i \u003c n - 1100; i++) searchStep(S);\n      S.age.fill(9);\n      S.ghost.fill(-1);\n      S.warm = true;\n    }\n  }\n  for (let c = 0; c \u003c 60; c++) (S.age[c] += d), (S.gAge[c] += d);\n  if (S.hold > 0) {\n    S.hold = max(0, S.hold - d);\n    S.sweep += d / HOLD;\n    return;\n  }\n  if (S.done) {\n    newSearch(S);\n    return;\n  }\n  S.acc += d * rate(S.speed);\n  while (S.acc >= 1) {\n    S.acc--;\n    if (searchStep(S)) {\n      S.found++;\n      S.hold = HOLD;\n      S.sweep = 0;\n      S.acc = 0;\n      break;\n    }\n    if (S.done) break;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { bw, bh, cs, cell, age, ghost, gAge, key, pc, c } = S, base = S.hue + 0.55;\n  const BW = bw * cs + 1, BH = bh * cs + 1, ox = floor((W - BW) / 2), oy = floor((H - BH) / 2);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, 0, 0, 0);\n  // Each cell shows its piece, or for 0.18 s after the search takes a\n  // piece out, that piece's outline fading.\n  for (let i = 0; i \u003c bw * bh; i++) key[i] = cell[i] >= 0 ? cell[i] : ghost[i] >= 0 && gAge[i] \u003c 0.18 ? 12 + ghost[i] : -1;\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= bw || y >= bh ? -2 : key[y * bw + x]);\n  // A cell's own LEDs show its piece, a grid line between two cells of one\n  // piece that piece, any other grid line the dark seam.\n  pc.fill(-1);\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const gx = X % cs === 0, gy = Y % cs === 0, cx = floor(X / cs), cy = floor(Y / cs);\n      let q;\n      if (!gx && !gy) q = at(cx, cy);\n      else if (gx && !gy) q = at(cx - 1, cy) === at(cx, cy) ? at(cx, cy) : -1;\n      else if (!gx && gy) q = at(cx, cy - 1) === at(cx, cy) ? at(cx, cy) : -1;\n      else {\n        const a = at(cx - 1, cy - 1);\n        q = a === at(cx, cy - 1) && a === at(cx - 1, cy) && a === at(cx, cy) ? a : -1;\n      }\n      pc[(oy + Y) * W + ox + X] = q;\n    }\n  // A light sweeps across the board while a solution holds.\n  const band = S.hold > 0 ? -0.25 + 1.5 * cl(S.sweep, 0, 1) : -9;\n  for (let Y = 0; Y \u003c BH; Y++)\n    for (let X = 0; X \u003c BW; X++) {\n      const p = (oy + Y) * W + ox + X, q = pc[p];\n      const cx = min(bw - 1, floor(X / cs)), cy = min(bh - 1, floor(Y / cs)), ci = cy * bw + cx;\n      const g = (X / BW + Y / BH) / 2 - band, lit = S.hold > 0 ? exp(-g * g * 90) : 0;\n      if (q >= 0 && q \u003c 12) {\n        // A slight bevel: lighter next to a seam above or to the left,\n        // darker next to one below or to the right.\n        const up = pc[p - W] \u003c 0 || pc[p - W] >= 12, lf = pc[p - 1] \u003c 0 || pc[p - 1] >= 12;\n        const dn = pc[p + W] \u003c 0 || pc[p + W] >= 12, rt = pc[p + 1] \u003c 0 || pc[p + 1] >= 12;\n        const fresh = cl(1 - age[ci] / 0.15, 0, 1);\n        const v = min(1, 0.82 + (up || lf ? 0.18 : 0) - (dn || rt ? 0.2 : 0) + 0.15 * fresh + 0.3 * lit);\n        hsv(base + q / 12, (0.72 - 0.3 * fresh) * (1 - 0.7 * lit), 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 255 * v), round(c[1] * 255 * v), round(c[2] * 255 * v));\n      } else if (q >= 12) {\n        // A piece just taken out leaves its outline for a moment.\n        if (pc[p - W] === q && pc[p + W] === q && pc[p - 1] === q && pc[p + 1] === q) continue;\n        const f = cl(1 - gAge[ci] / 0.18, 0, 1);\n        hsv(base + (q - 12) / 12, 0.6, 1, c);\n        display.setPixel(ox + X, oy + Y, round(c[0] * 150 * f), round(c[1] * 150 * f), round(c[2] * 150 * f));\n      } else if (X === 0 || Y === 0 || X === BW - 1 || Y === BH - 1) display.setPixel(ox + X, oy + Y, 44, 44, 54);\n      else if (X % cs === 0 && Y % cs === 0) display.setPixel(ox + X, oy + Y, 40, 40, 48);\n    }\n  // One tick under the board for each solution this search has found, 31\n  // to a row; a full row turns dim and the next starts over it.\n  const ty = oy + BH + (oy > 6 ? 2 : 0), full = floor(S.found / 31), part = S.found % 31;\n  for (let i = 0; i \u003c 31; i++) {\n    const on = i \u003c part, x = 1 + 2 * i;\n    if (!on && full === 0) continue;\n    hsv(base + 0.1 * (on ? full : full - 1), on ? 0.25 : 0.5, 1, c);\n    const v = on ? (i === part - 1 && S.hold > 0 ? 255 : 190) : 70;\n    for (let y = ty; y \u003c min(H, ty + 2); y++) display.setPixel(x, y, round(c[0] * v), round(c[1] * v), round(c[2] * v));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Board=0..3, Shuffle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the twelve piece colours, 30 degrees apart, together round the wheel. At 0 the F is sky blue, the I blue, the X green and the U red-orange; at 0.5 each piece takes the colour the piece six letters on had."},{"name":"Speed","min":0.2,"max":3,"about":"Steps of the search a second, one step being a column chosen, a row tried or a step back: 5 at 0.2, where each piece can be followed in and out; 394 at 2, where the 6 by 10 search averages 1532 steps, about 4 seconds, from one cover to the next; 4457 at 3."},{"name":"Board","min":0,"max":3,"about":"0 is 6 by 10 cells of 10 LEDs, with 2339 covers; 1 is 5 by 12 of 10 LEDs, 1010 covers; 2 is 4 by 15 of 8 LEDs, 368 covers; 3 is 3 by 20 of 6 LEDs, where the whole search, 33,545 steps, finds only 2 covers before it starts again. Covers are counted once for each set of rotations and mirror images."},{"name":"Shuffle","min":0,"max":1,"about":"How far the rows are shuffled when a search starts: at 0 every column tries its placements in the fixed order F to Z, top left first; at 0.06 a row moves by up to 12% of the list; at 1 the order is random and the same board gives other covers first. Turning it by more than 0.04 starts a new search."}],"start":[0,2,0,0.06],"measures":{"motion":1.8284,"detail":0.0833,"edges":0.9414,"complexity":0.2159,"coverage":0.603,"colour":0.4009,"drift":0.2078},"knobResponse":[0.2347,0.2072,0.3116,0.2483]},{"slug":"percolation","title":"Percolation","family":"cells","round":30,"note":"LED 마다 정해 둔 난수가 p 보다 작으면 열리고, 이어진 자리끼리 제 색의 클러스터가 돼요. p 가 오르다 한 클러스터가 위아래 128줄을 이으면 금빛으로 켜지고 가장 짧은 길이 그어져요.","idea":"Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.","buttons":"K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.","code":"// ===== Patternflow pattern =====\n// Title:   Percolation\n// Family:  cells\n// Idea:    Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: percolation (Simon Broadbent and John Hammersley, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle.\n// Knob 2: Speed. How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s.\n// Knob 3: Window. How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site.\n// Knob 4: Small. How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour.\n// Buttons: K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sqrt, acos, imul } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Site percolation threshold of the square lattice with edge neighbours,\n// found numerically (Newman and Ziff, 2000, give 0.59274621). Below it every\n// cluster on the infinite lattice is finite; above it one is infinite; at it\n// the clusters are fractal, of dimension 91/48, at every scale.\nconst PC = 0.592746;\n// Phase speed of the sweep per unit of Speed, over the root of the sweep's\n// width in p, so a wide Window sweeps faster in p but not in proportion.\nconst RATE = 0.0657;\n// Crossing comes this many seconds after the start, at Speed 2.\nconst LEAD = 2.7;\n\n// Union-find with union by size and path halving.\nfunction find(par, i) {\n  while (par[i] !== i) {\n    const g = par[par[i]];\n    par[i] = g;\n    i = g;\n  }\n  return i;\n}\n\nfunction join(par, sz, a, b) {\n  a = find(par, a);\n  b = find(par, b);\n  if (a === b) return;\n  if (sz[a] \u003c sz[b]) {\n    const t = a;\n    a = b;\n    b = t;\n  }\n  par[b] = a;\n  sz[a] += sz[b];\n}\n\nfunction hash(i) {\n  let h = imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h ^= h >>> 13;\n  h = imul(h, 0xc2b2ae35);\n  h ^= h >>> 16;\n  return (h >>> 0) / 4294967296;\n}\n\n// p*, the lattice's own crossing point: open the sites one at a time in the\n// order of their numbers, as Newman and Ziff do, with the top row joined to\n// one extra node and the bottom row to another, and stop when the two meet.\n// On a 64-wide strip it lands a few hundredths either side of p_c; the\n// study's seed gives 0.6038.\nfunction threshold(P) {\n  const { u, par, sz } = P;\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => u[a] - u[b]);\n  const on = new Uint8Array(N);\n  (par[N] = N), (par[N + 1] = N + 1), (sz[N] = sz[N + 1] = 1);\n  for (const i of order) {\n    (on[i] = 1), (par[i] = i), (sz[i] = 1);\n    const x = i % W, y = (i / W) | 0;\n    if (x > 0 && on[i - 1]) join(par, sz, i, i - 1);\n    if (x \u003c W - 1 && on[i + 1]) join(par, sz, i, i + 1);\n    if (y === 0) join(par, sz, i, N);\n    else if (on[i - W]) join(par, sz, i, i - W);\n    if (y === H - 1) join(par, sz, i, N + 1);\n    else if (on[i + W]) join(par, sz, i, i + W);\n    if (find(par, N) === find(par, N + 1)) return u[i];\n  }\n  return 1;\n}\n\nfunction lattice(P) {\n  for (let i = 0; i \u003c N; i++) P.u[i] = Math.random();\n  P.pstar = threshold(P);\n  P.id.fill(-1);\n  (P.span = false), (P.soft = 1);\n}\n\n// The sweep runs from W below p_c (or below p*, on a lattice that crosses\n// early) to 0.3 W above p*, so every rise ends in a crossing. Returns the\n// phase speed.\nfunction sweep(P, win, speed) {\n  P.lo = min(PC, P.pstar) - win;\n  P.hi = P.pstar + 0.3 * win;\n  return (RATE * speed) / sqrt(P.hi - P.lo);\n}\n\n// Puts the phase LEAD seconds before the crossing at the given Window and\n// Speed. p = lo + (hi - lo)(1 - cos phase) / 2.\nfunction aim(P, win, speed) {\n  const w = sweep(P, win, speed);\n  P.phase = acos(cl(1 - (2 * (P.pstar - P.lo)) / (P.hi - P.lo), -1, 1)) - LEAD * w;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N + 2), F = () => new Float32Array(N);\n  const P = (params.s = {\n    u: F(), jit: F(), sat: F(), glow: F(), cr: F(), cg: F(), cb: F(),\n    par: I(), sz: I(), root: I(), id: I(), idSize: I(), idHue: F(),\n    best: I(), bestS: I(), muSite: I(), rid: I(), owner: I(), prev: I(), queue: I(), path: I(), pathK: I().fill(-1),\n    flag: new Uint8Array(N), used: new Uint8Array(N),\n    pathLen: 0, cur: 0, maxSize: 1, spanRoot: -1, flash: 0, pulse: 0, p: 0.5, pstar: PC, dt: 1 / 30,\n    hue: 0, speed: 2, win: 0.04, small: 0.06, soft: 1, phase: 0, span: false, lo: 0.55, hi: 0.62,\n  });\n  // A fixed tint per LED: hue off by up to 0.05 and saturation 0.6 to 0.98.\n  for (let i = 0; i \u003c N; i++) (P.jit[i] = (hash(i + 7919) - 0.5) * 0.1), (P.sat[i] = 0.6 + 0.38 * hash(i + 104729));\n  lattice(P);\n  // The opening is aimed for Window 0.04 and Speed 2 whatever the knobs say,\n  // so a faster Speed crosses sooner and a wider Window starts further down.\n  aim(P, 0.04, 2);\n}\n\n// Labels the clusters at the current p and hands each one a colour. A\n// cluster's colour is an id with a hue. When clusters merge, the merged one\n// keeps the id of whichever part was biggest a frame ago; when one splits,\n// the biggest piece keeps it and the rest take fresh ids, hued from their\n// lowest-numbered site. So the big clusters hold their colour through the\n// whole sweep and only the small ones change.\nfunction label(P) {\n  const { u, par, sz, root, flag, muSite, best, bestS, rid, owner, used, id, idSize, idHue, p } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (u[i] \u003c p) (par[i] = i), (sz[i] = 1);\n    else par[i] = -1;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    if (par[i] \u003c 0) continue;\n    if (i % W && par[i - 1] >= 0) join(par, sz, i, i - 1);\n    if (i >= W && par[i - W] >= 0) join(par, sz, i, i - W);\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const r = par[i] \u003c 0 ? -1 : find(par, i);\n    root[i] = r;\n    if (r === i) (flag[i] = 0), (muSite[i] = i), (best[i] = -1), (bestS[i] = -1);\n  }\n  // Which rows each cluster touches (1 top, 2 bottom), its lowest site, and\n  // of the ids its sites wore last frame, the one whose cluster was biggest.\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r \u003c 0) continue;\n    if (i \u003c W) flag[r] |= 1;\n    if (i >= N - W) flag[r] |= 2;\n    if (u[i] \u003c u[muSite[r]]) muSite[r] = i;\n    const a = id[i];\n    if (a >= 0 && idSize[a] > bestS[r]) (bestS[r] = idSize[a]), (best[r] = a);\n  }\n  owner.fill(-1);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && (owner[c] \u003c 0 || sz[r] > sz[owner[c]])) owner[c] = r;\n  }\n  used.fill(0);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && owner[c] === r) (rid[r] = c), (used[c] = 1);\n    else rid[r] = -1;\n  }\n  let big = 1, span = -1;\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    if (rid[r] \u003c 0) {\n      while (used[P.cur]) P.cur = (P.cur + 1) % N;\n      (rid[r] = P.cur), (used[P.cur] = 1), (idHue[P.cur] = hash(muSite[r]) - 0.5);\n    }\n    idSize[rid[r]] = sz[r];\n    if (sz[r] > big) big = sz[r];\n    if (flag[r] === 3 && (span \u003c 0 || sz[r] > sz[span])) span = r;\n  }\n  for (let i = 0; i \u003c N; i++) id[i] = root[i] \u003c 0 ? -1 : rid[root[i]];\n  P.maxSize = big;\n  P.spanRoot = span;\n}\n\n// The shortest open path from the top row to the bottom row inside the\n// crossing cluster: a breadth-first search from all its top-row sites at\n// once, stopped at the first bottom-row site it reaches.\nfunction shortest(P, R) {\n  const { root, prev, queue, pathK, path } = P;\n  for (let j = 0; j \u003c P.pathLen; j++) pathK[path[j]] = -1;\n  P.pathLen = 0;\n  if (R \u003c 0) return;\n  prev.fill(-2);\n  let qh = 0, qt = 0, end = -1;\n  for (let x = 0; x \u003c W; x++) if (root[x] === R) (prev[x] = -1), (queue[qt++] = x);\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i >= N - W) {\n      end = i;\n      break;\n    }\n    const x = i % W;\n    let n = i + W;\n    if (root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - 1;\n    if (x > 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i + 1;\n    if (x \u003c W - 1 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - W;\n    if (n >= 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n  }\n  let len = 0;\n  for (let i = end; i >= 0; i = prev[i]) len++;\n  let j = len;\n  for (let i = end; i >= 0; i = prev[i]) (path[--j] = i), (pathK[i] = j);\n  P.pathLen = len;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0.04, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.win = cl(k[2], 0.04, 0.2);\n  P.small = cl(k[3], -1, 1);\n  // K1: a fresh lattice, crossed 2.7 s from now at the current knobs.\n  if (input.btnPressed && input.btnPressed[0]) lattice(P), aim(P, P.win, P.speed);\n  P.phase += sweep(P, P.win, P.speed) * d;\n  P.p = P.lo + ((P.hi - P.lo) * (1 - cos(P.phase))) / 2;\n  label(P);\n  // The flash comes on the frame a cluster first joins top to bottom and\n  // fades in 0.6 s; the gold stays while it spans and fades in 0.35 s after.\n  const spanning = P.spanRoot >= 0;\n  if (spanning && !P.span) P.flash = 1;\n  P.span = spanning;\n  P.flash *= exp(-d / 0.6);\n  P.soft *= exp(-d / 0.5);\n  P.pulse += (30 + 25 * P.speed) * d;\n  const fall = exp(-d / 0.35), { root, flag, glow } = P;\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r >= 0 && flag[r] === 3) glow[i] = 1;\n    else glow[i] *= fall;\n  }\n  shortest(P, P.spanRoot);\n  P.dt = d;\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { u, root, id, sz, idHue, jit, sat, glow, pathK, cr, cg, cb, p } = P;\n  const gold = 0.125 + P.hue, sm = P.small, fl = P.flash;\n  // Small: brightness lo + (1 - lo) f^gam, f = log size / log largest size.\n  const lo = sm \u003c 0 ? 0.3 * (1 + sm) : 0.3 + 0.5 * sm, gam = sm \u003c 0 ? 1.2 - 2.8 * sm : 1.2;\n  const lb = 1 / log(max(2, P.maxSize));\n  // Each LED eases to its colour in 0.1 s, so a merge washes over a cluster\n  // instead of blinking; after a K1 tap, in 0.7 s.\n  const kk = 1 - exp(-P.dt / (0.1 + 0.6 * P.soft));\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    let R, G, B;\n    if (r \u003c 0) {\n      // A closed site keeps an ember under 20 of 255, brightest when its\n      // number is just above p and it is next to open.\n      const e = 1 - (u[i] - p) / (1 - p);\n      hsv(gold + 0.5 + jit[i], sat[i], 0.075 * e * e);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    } else {\n      // An open site burns brighter the longer it has been open, from 42% at\n      // u = p to full at u = 0, and comes up over its first 0.004 of p.\n      const f = log(sz[r]) * lb, v = lo + (1 - lo) * f ** gam;\n      const g = (0.42 + 0.58 * (1 - u[i] / p)) * cl((p - u[i]) / 0.004, 0, 1);\n      hsv(gold + 0.475 + 0.55 * idHue[id[i]] + jit[i], sat[i], v * g);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = glow[i];\n      if (w > 0.002) {\n        hsv(gold + 0.4 * jit[i], (0.4 + 0.45 * sat[i]) * (1 - fl), (0.6 + 0.38 * g) * (1 - fl) + fl);\n        (R += (C[0] - R) * w), (G += (C[1] - G) * w), (B += (C[2] - B) * w);\n      }\n      // The shortest path: white, with a drop every 48 sites running down it.\n      const j = pathK[i];\n      if (j >= 0) {\n        const q = (((P.pulse - j) % 48) + 48) % 48, b = 0.65 + 0.35 * max(0, 1 - q / 14);\n        (R += (1 - R) * b), (G += (0.97 - G) * b), (B += (0.9 - B) * b);\n      }\n    }\n    cr[i] += (R * 255 - cr[i]) * kk;\n    cg[i] += (G * 255 - cg[i]) * kk;\n    cb[i] += (B * 255 - cb[i]) * kk;\n    display.setPixel(i % W, (i / W) | 0, cr[i], cg[i], cb[i]);\n  }\n}\n","layer":{"id":"layer-percolation","type":"code","name":"percolation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Percolation\n// Family:  cells\n// Idea:    Site percolation on the panel's 64x128 square lattice: every LED keeps one random number and is open while that number is below p, open neighbours join into clusters of their own colour, and as p sweeps slowly up through the critical point 0.5927 the clusters merge until one first joins the top row to the bottom row, flashes white and burns gold, with its shortest open path traced in white and drops running down it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: percolation (Simon Broadbent and John Hammersley, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle.\n// Knob 2: Speed. How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s.\n// Knob 3: Window. How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site.\n// Knob 4: Small. How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour.\n// Buttons: K1 tap draws a fresh number for every site, finds the new lattice's p* and sets the sweep to reach it 2.7 seconds later.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sqrt, acos, imul } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Site percolation threshold of the square lattice with edge neighbours,\n// found numerically (Newman and Ziff, 2000, give 0.59274621). Below it every\n// cluster on the infinite lattice is finite; above it one is infinite; at it\n// the clusters are fractal, of dimension 91/48, at every scale.\nconst PC = 0.592746;\n// Phase speed of the sweep per unit of Speed, over the root of the sweep's\n// width in p, so a wide Window sweeps faster in p but not in proportion.\nconst RATE = 0.0657;\n// Crossing comes this many seconds after the start, at Speed 2.\nconst LEAD = 2.7;\n\n// Union-find with union by size and path halving.\nfunction find(par, i) {\n  while (par[i] !== i) {\n    const g = par[par[i]];\n    par[i] = g;\n    i = g;\n  }\n  return i;\n}\n\nfunction join(par, sz, a, b) {\n  a = find(par, a);\n  b = find(par, b);\n  if (a === b) return;\n  if (sz[a] \u003c sz[b]) {\n    const t = a;\n    a = b;\n    b = t;\n  }\n  par[b] = a;\n  sz[a] += sz[b];\n}\n\nfunction hash(i) {\n  let h = imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h ^= h >>> 13;\n  h = imul(h, 0xc2b2ae35);\n  h ^= h >>> 16;\n  return (h >>> 0) / 4294967296;\n}\n\n// p*, the lattice's own crossing point: open the sites one at a time in the\n// order of their numbers, as Newman and Ziff do, with the top row joined to\n// one extra node and the bottom row to another, and stop when the two meet.\n// On a 64-wide strip it lands a few hundredths either side of p_c; the\n// study's seed gives 0.6038.\nfunction threshold(P) {\n  const { u, par, sz } = P;\n  const order = Array.from({ length: N }, (_, i) => i).sort((a, b) => u[a] - u[b]);\n  const on = new Uint8Array(N);\n  (par[N] = N), (par[N + 1] = N + 1), (sz[N] = sz[N + 1] = 1);\n  for (const i of order) {\n    (on[i] = 1), (par[i] = i), (sz[i] = 1);\n    const x = i % W, y = (i / W) | 0;\n    if (x > 0 && on[i - 1]) join(par, sz, i, i - 1);\n    if (x \u003c W - 1 && on[i + 1]) join(par, sz, i, i + 1);\n    if (y === 0) join(par, sz, i, N);\n    else if (on[i - W]) join(par, sz, i, i - W);\n    if (y === H - 1) join(par, sz, i, N + 1);\n    else if (on[i + W]) join(par, sz, i, i + W);\n    if (find(par, N) === find(par, N + 1)) return u[i];\n  }\n  return 1;\n}\n\nfunction lattice(P) {\n  for (let i = 0; i \u003c N; i++) P.u[i] = Math.random();\n  P.pstar = threshold(P);\n  P.id.fill(-1);\n  (P.span = false), (P.soft = 1);\n}\n\n// The sweep runs from W below p_c (or below p*, on a lattice that crosses\n// early) to 0.3 W above p*, so every rise ends in a crossing. Returns the\n// phase speed.\nfunction sweep(P, win, speed) {\n  P.lo = min(PC, P.pstar) - win;\n  P.hi = P.pstar + 0.3 * win;\n  return (RATE * speed) / sqrt(P.hi - P.lo);\n}\n\n// Puts the phase LEAD seconds before the crossing at the given Window and\n// Speed. p = lo + (hi - lo)(1 - cos phase) / 2.\nfunction aim(P, win, speed) {\n  const w = sweep(P, win, speed);\n  P.phase = acos(cl(1 - (2 * (P.pstar - P.lo)) / (P.hi - P.lo), -1, 1)) - LEAD * w;\n}\n\nexport function setup(params) {\n  const I = () => new Int32Array(N + 2), F = () => new Float32Array(N);\n  const P = (params.s = {\n    u: F(), jit: F(), sat: F(), glow: F(), cr: F(), cg: F(), cb: F(),\n    par: I(), sz: I(), root: I(), id: I(), idSize: I(), idHue: F(),\n    best: I(), bestS: I(), muSite: I(), rid: I(), owner: I(), prev: I(), queue: I(), path: I(), pathK: I().fill(-1),\n    flag: new Uint8Array(N), used: new Uint8Array(N),\n    pathLen: 0, cur: 0, maxSize: 1, spanRoot: -1, flash: 0, pulse: 0, p: 0.5, pstar: PC, dt: 1 / 30,\n    hue: 0, speed: 2, win: 0.04, small: 0.06, soft: 1, phase: 0, span: false, lo: 0.55, hi: 0.62,\n  });\n  // A fixed tint per LED: hue off by up to 0.05 and saturation 0.6 to 0.98.\n  for (let i = 0; i \u003c N; i++) (P.jit[i] = (hash(i + 7919) - 0.5) * 0.1), (P.sat[i] = 0.6 + 0.38 * hash(i + 104729));\n  lattice(P);\n  // The opening is aimed for Window 0.04 and Speed 2 whatever the knobs say,\n  // so a faster Speed crosses sooner and a wider Window starts further down.\n  aim(P, 0.04, 2);\n}\n\n// Labels the clusters at the current p and hands each one a colour. A\n// cluster's colour is an id with a hue. When clusters merge, the merged one\n// keeps the id of whichever part was biggest a frame ago; when one splits,\n// the biggest piece keeps it and the rest take fresh ids, hued from their\n// lowest-numbered site. So the big clusters hold their colour through the\n// whole sweep and only the small ones change.\nfunction label(P) {\n  const { u, par, sz, root, flag, muSite, best, bestS, rid, owner, used, id, idSize, idHue, p } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (u[i] \u003c p) (par[i] = i), (sz[i] = 1);\n    else par[i] = -1;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    if (par[i] \u003c 0) continue;\n    if (i % W && par[i - 1] >= 0) join(par, sz, i, i - 1);\n    if (i >= W && par[i - W] >= 0) join(par, sz, i, i - W);\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const r = par[i] \u003c 0 ? -1 : find(par, i);\n    root[i] = r;\n    if (r === i) (flag[i] = 0), (muSite[i] = i), (best[i] = -1), (bestS[i] = -1);\n  }\n  // Which rows each cluster touches (1 top, 2 bottom), its lowest site, and\n  // of the ids its sites wore last frame, the one whose cluster was biggest.\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r \u003c 0) continue;\n    if (i \u003c W) flag[r] |= 1;\n    if (i >= N - W) flag[r] |= 2;\n    if (u[i] \u003c u[muSite[r]]) muSite[r] = i;\n    const a = id[i];\n    if (a >= 0 && idSize[a] > bestS[r]) (bestS[r] = idSize[a]), (best[r] = a);\n  }\n  owner.fill(-1);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && (owner[c] \u003c 0 || sz[r] > sz[owner[c]])) owner[c] = r;\n  }\n  used.fill(0);\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    const c = best[r];\n    if (c >= 0 && owner[c] === r) (rid[r] = c), (used[c] = 1);\n    else rid[r] = -1;\n  }\n  let big = 1, span = -1;\n  for (let r = 0; r \u003c N; r++) {\n    if (root[r] !== r) continue;\n    if (rid[r] \u003c 0) {\n      while (used[P.cur]) P.cur = (P.cur + 1) % N;\n      (rid[r] = P.cur), (used[P.cur] = 1), (idHue[P.cur] = hash(muSite[r]) - 0.5);\n    }\n    idSize[rid[r]] = sz[r];\n    if (sz[r] > big) big = sz[r];\n    if (flag[r] === 3 && (span \u003c 0 || sz[r] > sz[span])) span = r;\n  }\n  for (let i = 0; i \u003c N; i++) id[i] = root[i] \u003c 0 ? -1 : rid[root[i]];\n  P.maxSize = big;\n  P.spanRoot = span;\n}\n\n// The shortest open path from the top row to the bottom row inside the\n// crossing cluster: a breadth-first search from all its top-row sites at\n// once, stopped at the first bottom-row site it reaches.\nfunction shortest(P, R) {\n  const { root, prev, queue, pathK, path } = P;\n  for (let j = 0; j \u003c P.pathLen; j++) pathK[path[j]] = -1;\n  P.pathLen = 0;\n  if (R \u003c 0) return;\n  prev.fill(-2);\n  let qh = 0, qt = 0, end = -1;\n  for (let x = 0; x \u003c W; x++) if (root[x] === R) (prev[x] = -1), (queue[qt++] = x);\n  while (qh \u003c qt) {\n    const i = queue[qh++];\n    if (i >= N - W) {\n      end = i;\n      break;\n    }\n    const x = i % W;\n    let n = i + W;\n    if (root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - 1;\n    if (x > 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i + 1;\n    if (x \u003c W - 1 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n    n = i - W;\n    if (n >= 0 && root[n] === R && prev[n] === -2) (prev[n] = i), (queue[qt++] = n);\n  }\n  let len = 0;\n  for (let i = end; i >= 0; i = prev[i]) len++;\n  let j = len;\n  for (let i = end; i >= 0; i = prev[i]) (path[--j] = i), (pathK[i] = j);\n  P.pathLen = len;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0.04, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.win = cl(k[2], 0.04, 0.2);\n  P.small = cl(k[3], -1, 1);\n  // K1: a fresh lattice, crossed 2.7 s from now at the current knobs.\n  if (input.btnPressed && input.btnPressed[0]) lattice(P), aim(P, P.win, P.speed);\n  P.phase += sweep(P, P.win, P.speed) * d;\n  P.p = P.lo + ((P.hi - P.lo) * (1 - cos(P.phase))) / 2;\n  label(P);\n  // The flash comes on the frame a cluster first joins top to bottom and\n  // fades in 0.6 s; the gold stays while it spans and fades in 0.35 s after.\n  const spanning = P.spanRoot >= 0;\n  if (spanning && !P.span) P.flash = 1;\n  P.span = spanning;\n  P.flash *= exp(-d / 0.6);\n  P.soft *= exp(-d / 0.5);\n  P.pulse += (30 + 25 * P.speed) * d;\n  const fall = exp(-d / 0.35), { root, flag, glow } = P;\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    if (r >= 0 && flag[r] === 3) glow[i] = 1;\n    else glow[i] *= fall;\n  }\n  shortest(P, P.spanRoot);\n  P.dt = d;\n}\n\nconst C = [0, 0, 0];\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = h | 0, f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  if (i === 0) (C[0] = v), (C[1] = t), (C[2] = p);\n  else if (i === 1) (C[0] = q), (C[1] = v), (C[2] = p);\n  else if (i === 2) (C[0] = p), (C[1] = v), (C[2] = t);\n  else if (i === 3) (C[0] = p), (C[1] = q), (C[2] = v);\n  else if (i === 4) (C[0] = t), (C[1] = p), (C[2] = v);\n  else (C[0] = v), (C[1] = p), (C[2] = q);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { u, root, id, sz, idHue, jit, sat, glow, pathK, cr, cg, cb, p } = P;\n  const gold = 0.125 + P.hue, sm = P.small, fl = P.flash;\n  // Small: brightness lo + (1 - lo) f^gam, f = log size / log largest size.\n  const lo = sm \u003c 0 ? 0.3 * (1 + sm) : 0.3 + 0.5 * sm, gam = sm \u003c 0 ? 1.2 - 2.8 * sm : 1.2;\n  const lb = 1 / log(max(2, P.maxSize));\n  // Each LED eases to its colour in 0.1 s, so a merge washes over a cluster\n  // instead of blinking; after a K1 tap, in 0.7 s.\n  const kk = 1 - exp(-P.dt / (0.1 + 0.6 * P.soft));\n  for (let i = 0; i \u003c N; i++) {\n    const r = root[i];\n    let R, G, B;\n    if (r \u003c 0) {\n      // A closed site keeps an ember under 20 of 255, brightest when its\n      // number is just above p and it is next to open.\n      const e = 1 - (u[i] - p) / (1 - p);\n      hsv(gold + 0.5 + jit[i], sat[i], 0.075 * e * e);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n    } else {\n      // An open site burns brighter the longer it has been open, from 42% at\n      // u = p to full at u = 0, and comes up over its first 0.004 of p.\n      const f = log(sz[r]) * lb, v = lo + (1 - lo) * f ** gam;\n      const g = (0.42 + 0.58 * (1 - u[i] / p)) * cl((p - u[i]) / 0.004, 0, 1);\n      hsv(gold + 0.475 + 0.55 * idHue[id[i]] + jit[i], sat[i], v * g);\n      (R = C[0]), (G = C[1]), (B = C[2]);\n      const w = glow[i];\n      if (w > 0.002) {\n        hsv(gold + 0.4 * jit[i], (0.4 + 0.45 * sat[i]) * (1 - fl), (0.6 + 0.38 * g) * (1 - fl) + fl);\n        (R += (C[0] - R) * w), (G += (C[1] - G) * w), (B += (C[2] - B) * w);\n      }\n      // The shortest path: white, with a drop every 48 sites running down it.\n      const j = pathK[i];\n      if (j >= 0) {\n        const q = (((P.pulse - j) % 48) + 48) % 48, b = 0.65 + 0.35 * max(0, 1 - q / 14);\n        (R += (1 - R) * b), (G += (0.97 - G) * b), (B += (0.9 - B) * b);\n      }\n    }\n    cr[i] += (R * 255 - cr[i]) * kk;\n    cg[i] += (G * 255 - cg[i]) * kk;\n    cb[i] += (B * 255 - cb[i]) * kk;\n    display.setPixel(i % W, (i / W) | 0, cr[i], cg[i], cb[i]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Window=0.04..0.2, Small=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the clusters take hues from green through cyan and blue to magenta (0.33 to 0.88 of the wheel) and the crossing cluster is gold at 0.125; the gold always sits in the middle of the gap the cluster hues leave, so at 0.5 the clusters run magenta through red and orange to green and the crossing one is periwinkle."},{"name":"Speed","min":0.2,"max":3,"about":"How fast p rises and falls. At 2 one rise and fall takes 12 s at the opening Window (25 s at Window 0.2), and the first crossing comes 2.7 s in; at 3 it comes after 1.8 s, at 0.2 after 27 s."},{"name":"Window","min":0.04,"max":0.2,"about":"How far below p_c the sweep goes; it always ends 0.3 of that above p*, the lowest p at which this lattice has an open path from top to bottom. At 0.04 p runs 0.553 to 0.616 on the study's lattice and stays where clusters of every size touch; at 0.2 it reaches down to 0.39, where the open sites stand apart in small clusters on black, and ends at 0.66, where one cluster holds nearly every open site."},{"name":"Small","min":-1,"max":1,"about":"How bright the smaller clusters burn against the largest, which is always at full. At -1 brightness goes as the fourth power of log size over log largest size, so only the few biggest clusters show; at 0 a lone open site burns at 30%, and at 1 at 80%, and every cluster shows as a patch of its own colour."}],"start":[0,2,0.04,0.06],"measures":{"motion":0.076,"detail":0.3535,"edges":0.6496,"complexity":2.5378,"coverage":0.6081,"colour":0.3525,"drift":0.1555},"knobResponse":[0.2138,0.2514,0.1582,0.0547]},{"slug":"perron-tree","title":"Perron Tree","family":"geometry","round":29,"note":"키 120 LED 삼각형을 2^n 조각으로 잘라 페론처럼 한 단씩 겹쳐 밀면, 모든 방향을 품은 채 넓이가 30% 로 줄어든 나무가 돼요. 흰 바늘이 모든 방향을 돌며 싹에서 싹으로 건너뛰어요. K3 은 단 수(32~256 조각)이고 K1 을 누르면 삼각형부터 다시 지어요.","idea":"A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.","buttons":"K1 tap starts again from the single triangle.","code":"// ===== Patternflow pattern =====\n// Title:   Perron Tree\n// Family:  geometry\n// Idea:    A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kakeya needle problem (Sōichi Kakeya, 1917), Besicovitch set drawn as Oskar Perron's tree (1928), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1\n//\n// Knob 1: Hue. Turns the sweep of colours that marks each sliver's direction round the wheel.\n// Knob 2: Speed. How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three.\n// Knob 3: Depth. How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8.\n// Knob 4: Slide. How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was.\n// Buttons: K1 tap starts again from the single triangle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, cos, abs, pow, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The triangle: base on the bottom edge, BW LEDs wide, apex HT LEDs up.\nconst BW = 60, HT = 120, Y0 = 128, MAXN = 8, MAXM = 1 \u003c\u003c MAXN;\n// How much of the blurred light comes back as glow (the blur sums to 81).\nconst GLOW = 0.22 / 81;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0];\n  out[o + 1] = c[1];\n  out[o + 2] = c[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    lam: 0, hold: 0, phase: 0, needle: 0, n: 5, g: 0.8, hue: 0,\n    acc: new Float32Array(N * 3), trail: new Float32Array(N), fade: 1, blo: new Float32Array(N * 3), sh: new Float32Array(MAXM), tj: new Float32Array(MAXN + 1), dur: new Float32Array(MAXN + 1),\n    col: new Float32Array(MAXM * 3),\n  };\n}\n\n// Perron's slides. At level j the base pieces pair up in groups of 2^j and\n// the right half of each group slides left by tj[j]: first closing the gap\n// its heart left at the level before, then a further 2(1 - g) of its half\n// base, so the two halves cross at 2g - 1 of the group triangle's height and\n// fork into two sprouts above it. What lies below is the group's heart, its\n// triangle shrunk by g^j toward its left corner, and the next level slides\n// hearts the same way. (Stein's write-up of Schoenberg's version.)\nfunction slides(P, n, g) {\n  const w = BW / (1 \u003c\u003c n);\n  for (let j = 1; j \u003c= n; j++) {\n    const half = w * (1 \u003c\u003c (j - 1)), s = pow(g, j - 1);\n    P.tj[j] = half * (1 - s) + 2 * (1 - g) * s * half;\n  }\n  // Seconds per level at Speed 2: the first levels move a fraction of an\n  // LED and go by quickly, the last ones take their time.\n  for (let j = 1; j \u003c= n; j++) P.dur[j] = 0.3 + 1.7 * pow(P.tj[j] / P.tj[n], 0.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) / 2;\n  P.hue = cl(k[0], 0, 1);\n  const n = cl(round(k[2]), 5, MAXN), g = 0.8 - 0.12 * cl(k[3], -1, 1);\n  if (n !== P.n || abs(g - P.g) > 1e-4) {\n    // Keep the same share of the build when the depth changes.\n    const frac = P.lam / P.n;\n    P.n = n;\n    P.g = g;\n    P.lam = frac * n;\n  }\n  slides(P, P.n, P.g);\n  if (input.btnPressed && input.btnPressed[0]) (P.phase = 0), (P.lam = 0), (P.hold = 0);\n  // Build level by level, hold the tree, take it apart again from the top\n  // level down at twice the pace, rest on the whole triangle, and again.\n  if (P.phase === 0) {\n    P.lam += d / P.dur[min(P.n, floor(P.lam) + 1)];\n    if (P.lam >= P.n) (P.lam = P.n), (P.phase = 1), (P.hold = 0);\n  } else if (P.phase === 1) {\n    if ((P.hold += d) > 6) P.phase = 2;\n  } else if (P.phase === 2) {\n    P.lam -= (2 * d) / P.dur[cl(Math.ceil(P.lam), 1, P.n)];\n    if (P.lam \u003c= 0) (P.lam = 0), (P.phase = 3), (P.hold = 0);\n  } else if ((P.hold += d) > 1.2) P.phase = 0;\n  P.needle += d * 0.11;\n  P.fade = exp(-cl(dt || 0, 0, 0.1) / 0.12);\n}\n\n// One row of one sliver into the light buffer: the span [l, r) at row y.\n// A span under an LED wide is drawn one LED wide and dimmer, so the sprouts\n// taper in light rather than vanish between LEDs.\nfunction span(acc, y, l, r, cr, cg, cb) {\n  let wd = r - l, k = 1;\n  if (wd \u003c 1) {\n    const c = (l + r) / 2;\n    k = sqrt(max(wd, 0));\n    (l = c - 0.5), (r = c + 0.5), (wd = 1);\n  }\n  const x0 = max(0, floor(l)), x1 = min(W - 1, floor(r - 1e-6));\n  for (let x = x0, p = (y * W + x0) * 3; x \u003c= x1; x++, p += 3) {\n    const cov = (min(r, x + 1) - max(l, x)) * k;\n    if (cov \u003c= 0) continue;\n    acc[p] += cr * cov;\n    acc[p + 1] += cg * cov;\n    acc[p + 2] += cb * cov;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, M = 1 \u003c\u003c n, w = BW / M, acc = P.acc, sh = P.sh, col = P.col;\n  acc.fill(0);\n  // How far each level has slid: level j runs while lam goes from j-1 to j.\n  let lo = 1e9, hi = -1e9;\n  for (let i = 0; i \u003c M; i++) {\n    let s = 0;\n    for (let j = 1; j \u003c= n; j++) if ((i >> (j - 1)) & 1) s -= P.tj[j] * sm(P.lam - (j - 1));\n    sh[i] = s;\n    lo = min(lo, s + i * w, s + BW / 2);\n    hi = max(hi, s + (i + 1) * w, s + BW / 2);\n  }\n  // Keep the whole figure centred as it slides.\n  const ox = W / 2 - (lo + hi) / 2;\n  // Each sliver's colour from its direction, the hue sweeping 0.8 of the wheel\n  // from one side of the triangle to the other.\n  // One sliver alone tones to about 140 of 255, two to 200, four near white.\n  for (let i = 0; i \u003c M; i++) hsv(P.hue + 0.5 + (0.8 * (i + 0.5)) / M, 0.85, 0.5, col, i * 3);\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT;\n    if (f \u003c 0 || f > 1) continue;\n    for (let i = 0; i \u003c M; i++) {\n      const a = ox + sh[i] + BW / 2, l = ox + sh[i] + i * w, r = l + w;\n      span(acc, y, l + (a - l) * f, r + (a - r) * f, col[i * 3], col[i * 3 + 1], col[i * 3 + 2]);\n    }\n  }\n  // The needle: a segment the height of the triangle, swinging through every\n  // direction between its sides and back. Its direction picks the base point\n  // it stands on, and that point the sliver whose sprout holds it.\n  const sw = 0.5 - 0.5 * cos(P.needle * 2 * PI), b = sw * BW, i = min(M - 1, floor(b / w));\n  const bx = ox + sh[i] + b, ax = ox + sh[i] + BW / 2, tr = P.trail, fd = P.fade;\n  // Its light fades over about a tenth of a second, which softens each hop.\n  for (let p = 0; p \u003c N; p++) tr[p] *= fd;\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT, x = bx + (ax - bx) * f;\n    for (let xx = max(0, floor(x - 2)); xx \u003c= min(W - 1, floor(x + 2)); xx++) {\n      const dd = abs(xx + 0.5 - x), wgt = dd \u003c 0.5 ? 1 : dd \u003c 1.5 ? 0.9 * (1.5 - dd) : 0.12 * (2.5 - dd), p = y * W + xx;\n      if (wgt > tr[p]) tr[p] = wgt;\n    }\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const v = tr[p];\n    if (v \u003c 0.01) continue;\n    acc[q] += 1.6 * v;\n    acc[q + 1] += 1.55 * v;\n    acc[q + 2] += 1.4 * v;\n  }\n  // A soft glow round everything bright: a 5 by 5 blur, about a fifth of it\n  // added back, so the thin sprouts read from a few metres away.\n  const blo = P.blo;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W * 3; x \u003c W; x++, p += 3)\n      for (let c = 0; c \u003c 3; c++) blo[p + c] = (x > 1 ? acc[p + c - 6] : 0) + 2 * (x > 0 ? acc[p + c - 3] : 0) + 3 * acc[p + c] + 2 * (x \u003c W - 1 ? acc[p + c + 3] : 0) + (x \u003c W - 2 ? acc[p + c + 6] : 0);\n  // Overlaps add up: light piles toward white where many slivers cross.\n  const R = W * 3, tone = (q, y) => {\n    const g = (y > 1 ? blo[q - 2 * R] : 0) + 2 * (y > 0 ? blo[q - R] : 0) + 3 * blo[q] + 2 * (y \u003c H - 1 ? blo[q + R] : 0) + (y \u003c H - 2 ? blo[q + 2 * R] : 0);\n    return 255 * (1 - exp(-1.6 * (acc[q] + GLOW * g)));\n  };\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, tone(p, y), tone(p + 1, y), tone(p + 2, y));\n}\n","layer":{"id":"layer-perron-tree","type":"code","name":"perron-tree","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Perron Tree\n// Family:  geometry\n// Idea:    A tall triangle that holds a needle in every direction between its sides is cut into thin slivers that slide over each other level by level, as Perron did, until it is a tree of sprouts on a third of the area that still holds every direction, and a white needle turns through all of them, hopping from sprout to sprout.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Kakeya needle problem (Sōichi Kakeya, 1917), Besicovitch set drawn as Oskar Perron's tree (1928), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1\n//\n// Knob 1: Hue. Turns the sweep of colours that marks each sliver's direction round the wheel.\n// Knob 2: Speed. How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three.\n// Knob 3: Depth. How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8.\n// Knob 4: Slide. How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was.\n// Buttons: K1 tap starts again from the single triangle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, exp, cos, abs, pow, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The triangle: base on the bottom edge, BW LEDs wide, apex HT LEDs up.\nconst BW = 60, HT = 120, Y0 = 128, MAXN = 8, MAXM = 1 \u003c\u003c MAXN;\n// How much of the blurred light comes back as glow (the blur sums to 81).\nconst GLOW = 0.22 / 81;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const c = i === 0 ? [v, t, p] : i === 1 ? [q, v, p] : i === 2 ? [p, v, t] : i === 3 ? [p, q, v] : i === 4 ? [t, p, v] : [v, p, q];\n  out[o] = c[0];\n  out[o + 1] = c[1];\n  out[o + 2] = c[2];\n}\n\nexport function setup(params) {\n  params.s = {\n    lam: 0, hold: 0, phase: 0, needle: 0, n: 5, g: 0.8, hue: 0,\n    acc: new Float32Array(N * 3), trail: new Float32Array(N), fade: 1, blo: new Float32Array(N * 3), sh: new Float32Array(MAXM), tj: new Float32Array(MAXN + 1), dur: new Float32Array(MAXN + 1),\n    col: new Float32Array(MAXM * 3),\n  };\n}\n\n// Perron's slides. At level j the base pieces pair up in groups of 2^j and\n// the right half of each group slides left by tj[j]: first closing the gap\n// its heart left at the level before, then a further 2(1 - g) of its half\n// base, so the two halves cross at 2g - 1 of the group triangle's height and\n// fork into two sprouts above it. What lies below is the group's heart, its\n// triangle shrunk by g^j toward its left corner, and the next level slides\n// hearts the same way. (Stein's write-up of Schoenberg's version.)\nfunction slides(P, n, g) {\n  const w = BW / (1 \u003c\u003c n);\n  for (let j = 1; j \u003c= n; j++) {\n    const half = w * (1 \u003c\u003c (j - 1)), s = pow(g, j - 1);\n    P.tj[j] = half * (1 - s) + 2 * (1 - g) * s * half;\n  }\n  // Seconds per level at Speed 2: the first levels move a fraction of an\n  // LED and go by quickly, the last ones take their time.\n  for (let j = 1; j \u003c= n; j++) P.dur[j] = 0.3 + 1.7 * pow(P.tj[j] / P.tj[n], 0.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3) / 2;\n  P.hue = cl(k[0], 0, 1);\n  const n = cl(round(k[2]), 5, MAXN), g = 0.8 - 0.12 * cl(k[3], -1, 1);\n  if (n !== P.n || abs(g - P.g) > 1e-4) {\n    // Keep the same share of the build when the depth changes.\n    const frac = P.lam / P.n;\n    P.n = n;\n    P.g = g;\n    P.lam = frac * n;\n  }\n  slides(P, P.n, P.g);\n  if (input.btnPressed && input.btnPressed[0]) (P.phase = 0), (P.lam = 0), (P.hold = 0);\n  // Build level by level, hold the tree, take it apart again from the top\n  // level down at twice the pace, rest on the whole triangle, and again.\n  if (P.phase === 0) {\n    P.lam += d / P.dur[min(P.n, floor(P.lam) + 1)];\n    if (P.lam >= P.n) (P.lam = P.n), (P.phase = 1), (P.hold = 0);\n  } else if (P.phase === 1) {\n    if ((P.hold += d) > 6) P.phase = 2;\n  } else if (P.phase === 2) {\n    P.lam -= (2 * d) / P.dur[cl(Math.ceil(P.lam), 1, P.n)];\n    if (P.lam \u003c= 0) (P.lam = 0), (P.phase = 3), (P.hold = 0);\n  } else if ((P.hold += d) > 1.2) P.phase = 0;\n  P.needle += d * 0.11;\n  P.fade = exp(-cl(dt || 0, 0, 0.1) / 0.12);\n}\n\n// One row of one sliver into the light buffer: the span [l, r) at row y.\n// A span under an LED wide is drawn one LED wide and dimmer, so the sprouts\n// taper in light rather than vanish between LEDs.\nfunction span(acc, y, l, r, cr, cg, cb) {\n  let wd = r - l, k = 1;\n  if (wd \u003c 1) {\n    const c = (l + r) / 2;\n    k = sqrt(max(wd, 0));\n    (l = c - 0.5), (r = c + 0.5), (wd = 1);\n  }\n  const x0 = max(0, floor(l)), x1 = min(W - 1, floor(r - 1e-6));\n  for (let x = x0, p = (y * W + x0) * 3; x \u003c= x1; x++, p += 3) {\n    const cov = (min(r, x + 1) - max(l, x)) * k;\n    if (cov \u003c= 0) continue;\n    acc[p] += cr * cov;\n    acc[p + 1] += cg * cov;\n    acc[p + 2] += cb * cov;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, M = 1 \u003c\u003c n, w = BW / M, acc = P.acc, sh = P.sh, col = P.col;\n  acc.fill(0);\n  // How far each level has slid: level j runs while lam goes from j-1 to j.\n  let lo = 1e9, hi = -1e9;\n  for (let i = 0; i \u003c M; i++) {\n    let s = 0;\n    for (let j = 1; j \u003c= n; j++) if ((i >> (j - 1)) & 1) s -= P.tj[j] * sm(P.lam - (j - 1));\n    sh[i] = s;\n    lo = min(lo, s + i * w, s + BW / 2);\n    hi = max(hi, s + (i + 1) * w, s + BW / 2);\n  }\n  // Keep the whole figure centred as it slides.\n  const ox = W / 2 - (lo + hi) / 2;\n  // Each sliver's colour from its direction, the hue sweeping 0.8 of the wheel\n  // from one side of the triangle to the other.\n  // One sliver alone tones to about 140 of 255, two to 200, four near white.\n  for (let i = 0; i \u003c M; i++) hsv(P.hue + 0.5 + (0.8 * (i + 0.5)) / M, 0.85, 0.5, col, i * 3);\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT;\n    if (f \u003c 0 || f > 1) continue;\n    for (let i = 0; i \u003c M; i++) {\n      const a = ox + sh[i] + BW / 2, l = ox + sh[i] + i * w, r = l + w;\n      span(acc, y, l + (a - l) * f, r + (a - r) * f, col[i * 3], col[i * 3 + 1], col[i * 3 + 2]);\n    }\n  }\n  // The needle: a segment the height of the triangle, swinging through every\n  // direction between its sides and back. Its direction picks the base point\n  // it stands on, and that point the sliver whose sprout holds it.\n  const sw = 0.5 - 0.5 * cos(P.needle * 2 * PI), b = sw * BW, i = min(M - 1, floor(b / w));\n  const bx = ox + sh[i] + b, ax = ox + sh[i] + BW / 2, tr = P.trail, fd = P.fade;\n  // Its light fades over about a tenth of a second, which softens each hop.\n  for (let p = 0; p \u003c N; p++) tr[p] *= fd;\n  for (let y = Y0 - HT; y \u003c Y0; y++) {\n    const h = Y0 - (y + 0.5), f = h / HT, x = bx + (ax - bx) * f;\n    for (let xx = max(0, floor(x - 2)); xx \u003c= min(W - 1, floor(x + 2)); xx++) {\n      const dd = abs(xx + 0.5 - x), wgt = dd \u003c 0.5 ? 1 : dd \u003c 1.5 ? 0.9 * (1.5 - dd) : 0.12 * (2.5 - dd), p = y * W + xx;\n      if (wgt > tr[p]) tr[p] = wgt;\n    }\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const v = tr[p];\n    if (v \u003c 0.01) continue;\n    acc[q] += 1.6 * v;\n    acc[q + 1] += 1.55 * v;\n    acc[q + 2] += 1.4 * v;\n  }\n  // A soft glow round everything bright: a 5 by 5 blur, about a fifth of it\n  // added back, so the thin sprouts read from a few metres away.\n  const blo = P.blo;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W * 3; x \u003c W; x++, p += 3)\n      for (let c = 0; c \u003c 3; c++) blo[p + c] = (x > 1 ? acc[p + c - 6] : 0) + 2 * (x > 0 ? acc[p + c - 3] : 0) + 3 * acc[p + c] + 2 * (x \u003c W - 1 ? acc[p + c + 3] : 0) + (x \u003c W - 2 ? acc[p + c + 6] : 0);\n  // Overlaps add up: light piles toward white where many slivers cross.\n  const R = W * 3, tone = (q, y) => {\n    const g = (y > 1 ? blo[q - 2 * R] : 0) + 2 * (y > 0 ? blo[q - R] : 0) + 3 * blo[q] + 2 * (y \u003c H - 1 ? blo[q + R] : 0) + (y \u003c H - 2 ? blo[q + 2 * R] : 0);\n    return 255 * (1 - exp(-1.6 * (acc[q] + GLOW * g)));\n  };\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, tone(p, y), tone(p + 1, y), tone(p + 2, y));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=5..8, Slide=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the sweep of colours that marks each sliver's direction round the wheel."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the slivers slide and the needle turns; at 2 the tree takes five and a half seconds to grow, stands for six and folds back up in three."},{"name":"Depth","min":5,"max":8,"about":"How many times the base is halved, 5 to 8: from 32 slivers to 256, and as many levels of sliding. The finished tree covers 30% of the triangle at 5 and 24% at 8."},{"name":"Slide","min":-1,"max":1,"about":"How far each pair slides over the other: at -1 a little, and the tree is a tall trunk with a small crown frayed out at the top; at 1 a long way, and a short stub carries a crown that fans out nearly as wide as the triangle was."}],"start":[0,2,5,0.06],"measures":{"motion":0.2474,"detail":0.037,"edges":0.3794,"complexity":1.0174,"coverage":0.2747,"colour":0.1818,"drift":0.2212},"knobResponse":[0.075,0.1981,0.1861,0.1179]},{"slug":"photochromic","title":"Photochromic","family":"cosmetic","round":38,"note":"LED 마다 맨 폴리시이거나 펄 조각인 옅은 매니큐어 위로 보이지 않는 UV 손전등이 구불구불 쓸고 지나가면, 지나간 자리가 순식간에 짙은 보석 색으로 바뀌었다가 몇 초에 걸쳐 다시 옅어져요. K3 은 펄 조각을 한 LED 에서 네 LED 너비로 키워 굵은 글리터로 바꾸고, K1 을 누르면 지난번과 반대쪽으로 한 번 더 쓸어요.","idea":"A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.","buttons":"K1 tap sends a stroke now, running the other way from the last one.","code":"// ===== Patternflow pattern =====\n// Title:   Photochromic\n// Family:  cosmetic\n// Idea:    A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after photochromic nail polish, pale in the shade, that deepens under UV light and fades back [Beer-Lambert law, August Beer, 1852]\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1\n//\n// Knob 1: Hue. Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening.\n// Knob 2: Speed. At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds.\n// Knob 3: Flakes. The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter.\n// Knob 4: Fade. How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture.\n// Buttons: K1 tap sends a stroke now, running the other way from the last one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sin, exp, round, random, LN10, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Seconds at Speed 2: a stroke every PERIOD, crossing in SWEEP. The first\n// stroke of a fresh start begins at FIRST; the one before it, which ended\n// 8.4 seconds before the start, is run through when the pattern opens.\nconst PERIOD = 13, SWEEP = 2.4, FIRST = 2.2;\n// The torch: a soft spot of sigma SIG LEDs, weaving AMP LEDs either side of\n// the middle; the dye switches at KON per second where it is brightest.\nconst SIG = 15, AMP = 20, KON = 10;\n// Optical density of the switched dye, so the depth of colour goes as\n// 1 - 10^(-OD a) (Beer-Lambert): it holds dark while most of the dye is\n// still switched and lets go toward the end.\nconst OD = 2;\n// The fade, from a = 0.95 to the a where the colour is half gone.\nconst HALF_A = 1.856;\n// Opening hue: violet, not red.\nconst H0 = 0.76;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, flakes: 1, fade: 0.06, t: 0, begun: false, k: 0, tx: -99, ty: -99, on: 0,\n    a: new Float32Array(N), g: new Float32Array(N), ph: new Float32Array(N), om: new Float32Array(N),\n    size: 0, pale: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], pearl: [0, 0, 0], extra: -1,\n  };\n}\n\n// The flakes for a size, one glint per LED, every LED of a flake sharing\n// it: 1 catches the light, -1 is turned away and shades the polish under\n// it, 0 is bare polish. At size 1 every LED holds mica, 38% catching the\n// light, 22% turned away; larger flakes are fewer, 30% and 10%.\nfunction flakes(S, size) {\n  const { g, ph, om } = S;\n  const cw = Math.ceil(W / size), nc = cw * Math.ceil(H / size);\n  const cg = new Float32Array(nc), cp = new Float32Array(nc), co = new Float32Array(nc);\n  for (let c = 0; c \u003c nc; c++) {\n    const u = random();\n    if (size === 1) cg[c] = u \u003c 0.4 ? 0 : u \u003c 0.62 ? -1 : 1;\n    else cg[c] = u \u003c 0.6 ? 0 : u \u003c 0.7 ? -1 : 1;\n    cp[c] = random() * TAU;\n    co[c] = 0.8 + 0.7 * random();\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = floor(y / size) * cw + floor(x / size), i = y * W + x;\n      // Flakes three or four across lose their corners.\n      const ex = x % size === 0 || x % size === size - 1, ey = y % size === 0 || y % size === size - 1;\n      g[i] = size > 2 && ex && ey ? 0 : cg[c];\n      ph[i] = cp[c];\n      om[i] = co[c];\n    }\n  S.size = size;\n}\n\n// Where stroke k has the torch at progress s (0..1): strokes alternate down\n// and up the panel, weaving side to side, each a little different.\nfunction torchAt(S, k, s) {\n  const down = (k & 1) === 0, w = 2.4 + 0.5 * ((k * 0.618 + 10) % 1), ph = k * 2.4;\n  S.ty = down ? -30 + s * (H + 60) : H + 30 - s * (H + 60);\n  S.tx = W / 2 + AMP * sin(TAU * w * s + ph);\n}\n\n// Advance the dye by dt seconds of pattern time: switched by the torch at\n// KON times its intensity, back by the thermal fade.\nfunction dye(S, dt) {\n  const a = S.a, half = 4.5 * 3 ** S.fade, decay = exp((-HALF_A / half) * dt);\n  for (let i = 0; i \u003c N; i++) a[i] *= decay;\n  if (!S.on) return;\n  const R = 3 * SIG, x0 = max(0, floor(S.tx - R)), x1 = min(W - 1, Math.ceil(S.tx + R));\n  const y0 = max(0, floor(S.ty - R)), y1 = min(H - 1, Math.ceil(S.ty + R));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, I = exp(-(dx * dx + dy * dy) / (2 * SIG * SIG));\n      if (I \u003c 0.01) continue;\n      const i = y * W + x;\n      a[i] += (1 - a[i]) * (1 - exp(-KON * I * dt));\n    }\n}\n\n// Run the clock from t0 to t1 in steps, strokes switching on and off.\nfunction run(S, t0, t1, step) {\n  for (let t = t0; t \u003c t1 - 1e-9; t += step) {\n    const d = min(step, t1 - t), tm = t + d;\n    const k = floor((tm - FIRST) / PERIOD), s = (tm - FIRST - k * PERIOD) / SWEEP;\n    S.on = 0;\n    if (s \u003c= 1) {\n      S.on = 1;\n      S.k = k;\n      torchAt(S, k, s);\n    }\n    if (S.extra >= 0) {\n      const se = (tm - S.extra) / SWEEP;\n      if (se \u003c= 1) {\n        S.on = 1;\n        torchAt(S, S.k + 1, se);\n      } else S.extra = -1;\n    }\n    dye(S, d);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.flakes = cl(k[2], 1, 4);\n  S.fade = cl(k[3], -1, 1);\n  const size = round(S.flakes);\n  if (size !== S.size) flakes(S, size);\n  if (!S.begun) {\n    S.t = FIRST - PERIOD - 0.3;\n    run(S, S.t, 0, 0.1);\n    S.t = 0;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.extra \u003c 0) S.extra = S.t;\n  const step = (d * S.speed) / 2;\n  if (step > 0) run(S, S.t, S.t + step, step);\n  S.t += step;\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Red, orange, yellow and lime go brown or olive when dark: there the\n  // polish deepens to a bright full colour instead, from a cream.\n  const dw = min(abs(hh - 0.12), 1 - abs(hh - 0.12)), warm = 1 - sm(0.12, 0.24, dw);\n  hsv(h, 0.32 - 0.1 * warm, 0.52 + 0.04 * warm, S.pale);\n  hsv(h + 0.015 * (1 - warm), 0.92 + 0.06 * warm, 0.11 + 0.5 * warm, S.deep);\n  hsv(h, 0.6 - 0.1 * warm, 0.5 + 0.4 * warm, S.tint);\n  hsv(h, 0.12, 1, S.pearl);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { a, g, ph, om, pale, deep, tint, pearl } = S, t = S.t, k = -OD * LN10, norm = 1 - exp(k);\n  const sig2 = 2 * (SIG * 1.2) ** 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // How deep the colour is: Beer-Lambert in the switched dye.\n      const D = (1 - exp(k * a[i])) / norm;\n      let r = pale[0] + (deep[0] - pale[0]) * D;\n      let gg = pale[1] + (deep[1] - pale[1]) * D;\n      let b = pale[2] + (deep[2] - pale[2]) * D;\n      // The flake: pearl white in the pale polish; under the dark dye the light\n      // crosses the dye twice on its way to the flake and back, so the\n      // flake goes dim and takes the colour. Now and then a flake turns half\n      // away from the room light.\n      const gl = g[i] * (sin(ph[i] + t * om[i]) > -0.8 ? 1 : 0.5);\n      if (gl \u003c 0) {\n        r *= 1 + 0.3 * gl;\n        gg *= 1 + 0.3 * gl;\n        b *= 1 + 0.3 * gl;\n      } else if (gl > 0) {\n        r += (pearl[0] + (tint[0] - pearl[0]) * D - r) * gl;\n        gg += (pearl[1] + (tint[1] - pearl[1]) * D - gg) * gl;\n        b += (pearl[2] + (tint[2] - pearl[2]) * D - b) * gl;\n      }\n      // The torch's violet spill.\n      if (S.on) {\n        const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, v = 0.12 * exp(-(dx * dx + dy * dy) / sig2);\n        r += v * 0.45;\n        b += v;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, gg)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-photochromic","type":"code","name":"photochromic","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Photochromic\n// Family:  cosmetic\n// Idea:    A pale shimmer polish fills the panel, every LED either bare polish or a mica flake that catches the light or turns away from it; an unseen UV torch, seen only by its faint violet spill, sweeps down or up the panel in a weaving stroke every 13 seconds, and wherever it passes the polish deepens within a quarter of a second to a dark jewel colour that dims and tints the flakes under it, then fades back to pale over the next few seconds, the first-lit parts first.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after photochromic nail polish, pale in the shade, that deepens under UV light and fades back [Beer-Lambert law, August Beer, 1852]\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1\n//\n// Knob 1: Hue. Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening.\n// Knob 2: Speed. At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds.\n// Knob 3: Flakes. The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter.\n// Knob 4: Fade. How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture.\n// Buttons: K1 tap sends a stroke now, running the other way from the last one.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sin, exp, round, random, LN10, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Seconds at Speed 2: a stroke every PERIOD, crossing in SWEEP. The first\n// stroke of a fresh start begins at FIRST; the one before it, which ended\n// 8.4 seconds before the start, is run through when the pattern opens.\nconst PERIOD = 13, SWEEP = 2.4, FIRST = 2.2;\n// The torch: a soft spot of sigma SIG LEDs, weaving AMP LEDs either side of\n// the middle; the dye switches at KON per second where it is brightest.\nconst SIG = 15, AMP = 20, KON = 10;\n// Optical density of the switched dye, so the depth of colour goes as\n// 1 - 10^(-OD a) (Beer-Lambert): it holds dark while most of the dye is\n// still switched and lets go toward the end.\nconst OD = 2;\n// The fade, from a = 0.95 to the a where the colour is half gone.\nconst HALF_A = 1.856;\n// Opening hue: violet, not red.\nconst H0 = 0.76;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, flakes: 1, fade: 0.06, t: 0, begun: false, k: 0, tx: -99, ty: -99, on: 0,\n    a: new Float32Array(N), g: new Float32Array(N), ph: new Float32Array(N), om: new Float32Array(N),\n    size: 0, pale: [0, 0, 0], deep: [0, 0, 0], tint: [0, 0, 0], pearl: [0, 0, 0], extra: -1,\n  };\n}\n\n// The flakes for a size, one glint per LED, every LED of a flake sharing\n// it: 1 catches the light, -1 is turned away and shades the polish under\n// it, 0 is bare polish. At size 1 every LED holds mica, 38% catching the\n// light, 22% turned away; larger flakes are fewer, 30% and 10%.\nfunction flakes(S, size) {\n  const { g, ph, om } = S;\n  const cw = Math.ceil(W / size), nc = cw * Math.ceil(H / size);\n  const cg = new Float32Array(nc), cp = new Float32Array(nc), co = new Float32Array(nc);\n  for (let c = 0; c \u003c nc; c++) {\n    const u = random();\n    if (size === 1) cg[c] = u \u003c 0.4 ? 0 : u \u003c 0.62 ? -1 : 1;\n    else cg[c] = u \u003c 0.6 ? 0 : u \u003c 0.7 ? -1 : 1;\n    cp[c] = random() * TAU;\n    co[c] = 0.8 + 0.7 * random();\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = floor(y / size) * cw + floor(x / size), i = y * W + x;\n      // Flakes three or four across lose their corners.\n      const ex = x % size === 0 || x % size === size - 1, ey = y % size === 0 || y % size === size - 1;\n      g[i] = size > 2 && ex && ey ? 0 : cg[c];\n      ph[i] = cp[c];\n      om[i] = co[c];\n    }\n  S.size = size;\n}\n\n// Where stroke k has the torch at progress s (0..1): strokes alternate down\n// and up the panel, weaving side to side, each a little different.\nfunction torchAt(S, k, s) {\n  const down = (k & 1) === 0, w = 2.4 + 0.5 * ((k * 0.618 + 10) % 1), ph = k * 2.4;\n  S.ty = down ? -30 + s * (H + 60) : H + 30 - s * (H + 60);\n  S.tx = W / 2 + AMP * sin(TAU * w * s + ph);\n}\n\n// Advance the dye by dt seconds of pattern time: switched by the torch at\n// KON times its intensity, back by the thermal fade.\nfunction dye(S, dt) {\n  const a = S.a, half = 4.5 * 3 ** S.fade, decay = exp((-HALF_A / half) * dt);\n  for (let i = 0; i \u003c N; i++) a[i] *= decay;\n  if (!S.on) return;\n  const R = 3 * SIG, x0 = max(0, floor(S.tx - R)), x1 = min(W - 1, Math.ceil(S.tx + R));\n  const y0 = max(0, floor(S.ty - R)), y1 = min(H - 1, Math.ceil(S.ty + R));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, I = exp(-(dx * dx + dy * dy) / (2 * SIG * SIG));\n      if (I \u003c 0.01) continue;\n      const i = y * W + x;\n      a[i] += (1 - a[i]) * (1 - exp(-KON * I * dt));\n    }\n}\n\n// Run the clock from t0 to t1 in steps, strokes switching on and off.\nfunction run(S, t0, t1, step) {\n  for (let t = t0; t \u003c t1 - 1e-9; t += step) {\n    const d = min(step, t1 - t), tm = t + d;\n    const k = floor((tm - FIRST) / PERIOD), s = (tm - FIRST - k * PERIOD) / SWEEP;\n    S.on = 0;\n    if (s \u003c= 1) {\n      S.on = 1;\n      S.k = k;\n      torchAt(S, k, s);\n    }\n    if (S.extra >= 0) {\n      const se = (tm - S.extra) / SWEEP;\n      if (se \u003c= 1) {\n        S.on = 1;\n        torchAt(S, S.k + 1, se);\n      } else S.extra = -1;\n    }\n    dye(S, d);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.flakes = cl(k[2], 1, 4);\n  S.fade = cl(k[3], -1, 1);\n  const size = round(S.flakes);\n  if (size !== S.size) flakes(S, size);\n  if (!S.begun) {\n    S.t = FIRST - PERIOD - 0.3;\n    run(S, S.t, 0, 0.1);\n    S.t = 0;\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.extra \u003c 0) S.extra = S.t;\n  const step = (d * S.speed) / 2;\n  if (step > 0) run(S, S.t, S.t + step, step);\n  S.t += step;\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Red, orange, yellow and lime go brown or olive when dark: there the\n  // polish deepens to a bright full colour instead, from a cream.\n  const dw = min(abs(hh - 0.12), 1 - abs(hh - 0.12)), warm = 1 - sm(0.12, 0.24, dw);\n  hsv(h, 0.32 - 0.1 * warm, 0.52 + 0.04 * warm, S.pale);\n  hsv(h + 0.015 * (1 - warm), 0.92 + 0.06 * warm, 0.11 + 0.5 * warm, S.deep);\n  hsv(h, 0.6 - 0.1 * warm, 0.5 + 0.4 * warm, S.tint);\n  hsv(h, 0.12, 1, S.pearl);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  palette(S);\n  const { a, g, ph, om, pale, deep, tint, pearl } = S, t = S.t, k = -OD * LN10, norm = 1 - exp(k);\n  const sig2 = 2 * (SIG * 1.2) ** 2;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // How deep the colour is: Beer-Lambert in the switched dye.\n      const D = (1 - exp(k * a[i])) / norm;\n      let r = pale[0] + (deep[0] - pale[0]) * D;\n      let gg = pale[1] + (deep[1] - pale[1]) * D;\n      let b = pale[2] + (deep[2] - pale[2]) * D;\n      // The flake: pearl white in the pale polish; under the dark dye the light\n      // crosses the dye twice on its way to the flake and back, so the\n      // flake goes dim and takes the colour. Now and then a flake turns half\n      // away from the room light.\n      const gl = g[i] * (sin(ph[i] + t * om[i]) > -0.8 ? 1 : 0.5);\n      if (gl \u003c 0) {\n        r *= 1 + 0.3 * gl;\n        gg *= 1 + 0.3 * gl;\n        b *= 1 + 0.3 * gl;\n      } else if (gl > 0) {\n        r += (pearl[0] + (tint[0] - pearl[0]) * D - r) * gl;\n        gg += (pearl[1] + (tint[1] - pearl[1]) * D - gg) * gl;\n        b += (pearl[2] + (tint[2] - pearl[2]) * D - b) * gl;\n      }\n      // The torch's violet spill.\n      if (S.on) {\n        const dx = x + 0.5 - S.tx, dy = y + 0.5 - S.ty, v = 0.12 * exp(-(dx * dx + dy * dy) / sig2);\n        r += v * 0.45;\n        b += v;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, gg)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Flakes=1..4, Fade=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the polish round the whole wheel, pale and deep together. At 0 lavender deepening to dark violet; at 0.1 pink to plum; at 0.2 blush to raspberry; at 0.3 cream to tangerine; at 0.4 butter to marigold; at 0.5 pale lime to lime; at 0.6 mint to forest; at 0.7 aqua to deep teal; at 0.8 sky to navy; at 0.9 periwinkle to indigo. From 0.24 to 0.48, and partly from 0.12 to 0.6, where a dark shade would read brown or olive, the polish goes from cream to a bright full colour instead of darkening."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a stroke starts every 13 seconds and takes 1.6 seconds to cross the 128 rows, weaving 20 LEDs either side of the middle about twice on the way; the dye under the middle of the torch is 90% switched in 0.23 seconds. At 0.2 all of it ten times slower, so the first stroke comes at 22 seconds; at 3 one and a half times faster, the first stroke at 1.5 seconds."},{"name":"Flakes","min":1,"max":4,"about":"The size of the shimmer flakes. At 1 one LED, 38% of them catching the light and 22% turned away, a fine shimmer over every LED; at 2 flakes two LEDs across, 30% catching and 10% turned away, with bare polish between; at 3 small crosses and at 4 round flakes four LEDs across, a coarse glitter."},{"name":"Fade","min":-1,"max":1,"about":"How long the deep colour lasts once the torch has passed. At -1 it is half gone in 1.5 seconds and only a short band trails the torch; at 0.06 half gone in 4.8 seconds; at 1 in 13.5, so the panel is still half deep when the next stroke comes, and the stroke from before the start still shows on the opening picture."}],"start":[0,2,1,0.06],"measures":{"motion":0.1311,"detail":0.2098,"edges":0.7508,"complexity":1.4701,"coverage":0.9752,"colour":0.1059,"drift":0.3646},"knobResponse":[0.1323,0.3042,0.2265,0.1945]},{"slug":"pin-art","title":"Pin Art","family":"toy","round":22,"note":"핀 아트 장난감을 앞에서 봐요. 엇갈린 격자의 강철 핀 4096개가 패널을 채우고, 뒤에서 펼친 손이 눌러 들어오면 밀려 나온 핀만 비스듬한 등빛을 받아 빛나요. 장난감을 기울이면 핀이 물결치며 평평해지고 열쇠가 다음으로 눌러 들어와요.","idea":"A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.","buttons":"K1 tap tilts the toy flat now and presses the next object in.","code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","layer":{"id":"layer-pin-art","type":"code","name":"pin-art","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower."},{"name":"Object","min":0,"max":4,"about":"What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one."},{"name":"Light","min":0,"max":1,"about":"Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.0617,"detail":0.3463,"edges":0.9544,"complexity":1.3204,"coverage":0.7864,"colour":0.2041,"drift":0.3573},"knobResponse":[0.1597,0.2367,0.0944,0.0463]},{"slug":"pint","title":"Pint","family":"cells","round":18,"note":"탭이 패널 높이만 한 파인트 잔에 맥주를 따르면, 뿌연 맥주가 바닥부터 맑아지고 기포 줄이 오르는 동안 거품 머리가 밝은 테두리의 다각형 셀로 굵어져요. 누군가 다섯 모금에 나눠 마시며 잔에 레이싱 고리를 남기고, 바닥이 보이면 다시 따라요. K1 은 라거에서 앰버 에일, 레드 에일을 지나 스타우트까지 맥주를 바꾸고, 스타우트는 크림빛 서지가 바닥부터 검게 가라앉아요.","idea":"A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-pint","type":"code","name":"pint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Beer","min":0,"max":1,"about":"What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower."},{"name":"Fizz","min":4,"max":20,"about":"How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20."},{"name":"Head","min":0,"max":1,"about":"How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells."}],"start":[0,2,4,0.06],"measures":{"motion":0.1411,"detail":0.0425,"edges":0.5054,"complexity":1.0501,"coverage":0.678,"colour":0.3448,"drift":0.1113},"knobResponse":[0.1725,0.2433,0.0546,0.0641]},{"slug":"pinwheel-tiling","title":"Pinwheel Tiling","family":"geometry","round":32,"note":"다리가 1 과 2 인 직각삼각형 타일링 속으로 끝없이 들어가요. 3.6초마다 타일마다 이음매가 옅게 나타나 다섯 조각으로 갈라지고, 그 가운데 하나는 부모에서 26.6° 돌아가 있어요. 타일을 긴 다리의 방향으로 칠해서, 같은 색 무리가 서로 다른 각도로 기운 것이 보여요.","idea":"The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.","buttons":"K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.","code":"// ===== Patternflow pattern =====\n// Title:   Pinwheel Tiling\n// Family:  geometry\n// Idea:    The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: pinwheel tiling (John Conway and Charles Radin, 1994), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1\n//\n// Knob 1: Hue. Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other.\n// Knob 2: Speed. At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4.\n// Knob 3: Size. How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider.\n// Knob 4: Paint. At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers.\n// Buttons: K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5;\nconst { floor, sqrt, cos, sin, atan, atan2, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst S5 = sqrt(5), LS5 = log(S5), TAU = 2 * PI, A2 = atan(0.5);\n\n// The tile in its own frame: small angle at (0,0), right angle at (2,0),\n// large angle at (2,1). Conway's cut: the altitude from the right angle takes\n// one copy off the short side; the larger part is cut from the midpoint of\n// its hypotenuse to its right angle and to the midpoints of its two legs,\n// four copies in two mirror pairs. Each child is [small, right, large] in the\n// parent's frame. Children 2 and 3 keep the parent's hand, 0, 1 and 4 are\n// mirrored. Cut with the midpoint split instead, the tiles keep to eight\n// directions; with this cut the count grows with every level.\nconst KIDS = [\n  [[2, 0], [1.6, 0.8], [2, 1]],\n  [[1, 0], [1.8, 0.4], [2, 0]],\n  [[1, 0], [1.8, 0.4], [1.6, 0.8]],\n  [[1.6, 0.8], [0.8, 0.4], [1, 0]],\n  [[0, 0], [0.8, 0.4], [1, 0]],\n].map(([a, b, c]) => {\n  const ux = (b[0] - a[0]) / 2, uy = (b[1] - a[1]) / 2, vx = c[0] - b[0], vy = c[1] - b[1], det = ux * vy - vx * uy;\n  return { ax: a[0], ay: a[1], ux, uy, vx, vy, i00: vy / det, i01: -vx / det, i10: -uy / det, i11: ux / det, flip: det \u003c 0 };\n});\n\n// Points the zoom can dive into, each the fixed point of a chain of children\n// that keeps the hand: child 2 alone, a copy a fifth of the area turned by\n// arctan(1/2); child 3 twice; 2 then 3; 3 then 2. P is the chain's length in\n// levels, R its turn.\nconst DIVES = [\n  { zx: 1.5, zy: 0.5, P: 1, R: A2 },\n  { zx: 1.2, zy: 0.4, P: 2, R: 2 * A2 },\n  { zx: 1.375, zy: 0.375, P: 2, R: 2 * A2 - PI },\n  { zx: 1.125, zy: 0.375, P: 2, R: 2 * A2 - PI },\n];\nconst N0 = 8;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  params.s = {\n    z: 0, hue: 0, speed: 2, size: 13, paint: 0.06, dive: 0, prev: -1, fade: 1,\n    lut: new Float32Array(256 * 3 * 4), lutHue: NaN, out: new Float32Array(W * H * 3), tmp: new Float32Array(W * H * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = cl(k[2], 13, 40);\n  P.paint = cl(k[3], 0, 1);\n  P.z += d * P.speed * 0.14;\n  if (P.fade \u003c 1) P.fade = Math.min(1, P.fade + d / 0.8);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.prev = P.dive;\n    P.dive = (P.dive + 1) % DIVES.length;\n    P.fade = 0;\n  }\n}\n\n// Draws one dive into buf: RGB 0..255 per LED.\nfunction render(P, D, buf) {\n  const u = P.z % D.P, S = Math.pow(S5, N0 + u), phi = -D.R * (u / D.P);\n  const cp = cos(-phi) / S, sp = sin(-phi) / S;\n  // Depth d tiles span S * sqrt5^(1-d) LEDs along the hypotenuse; the deepest\n  // drawn is the last one at least Size long, and it fades in.\n  const lam = N0 + u + 1 - log(P.size) / LS5, dn = floor(lam), al = sm(0, 0.3, lam - dn), ac = sm(0.28, 0.42, lam - dn);\n  // Each level's seam: its scale on the panel, how far it reaches from the\n  // edge (a little wider for the older, larger tiles) and how dark it is.\n  const sig = new Float32Array(dn + 1), reach = new Float32Array(dn + 1), dark = new Float32Array(dn + 1);\n  for (let d = 0; d \u003c= dn; d++) {\n    sig[d] = S * Math.pow(S5, -d);\n    reach[d] = 1.1 + 0.45 * sm(1, 2.5, lam - d);\n    dark[d] = d === dn ? al : 1;\n  }\n  const lut = P.lut, paint = P.paint;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - CX, dy = y - CY;\n      let qx = D.zx + cp * dx - sp * dy, qy = D.zy + sp * dx + cp * dy;\n      let m00 = 1, m01 = 0, m10 = 0, m11 = 1, flip = false;\n      let a0 = 0, f0 = false, seam = 0;\n      for (let d = 1; d \u003c= dn; d++) {\n        if (d === dn) (a0 = atan2(m10, m00)), (f0 = flip);\n        let best = -9, bi = 0, bx = 0, by = 0;\n        for (let i = 0; i \u003c 5; i++) {\n          const K = KIDS[i], rx = qx - K.ax, ry = qy - K.ay;\n          const tx = K.i00 * rx + K.i01 * ry, ty = K.i10 * rx + K.i11 * ry;\n          const mg = Math.min(ty, 2 - tx, (tx - 2 * ty) / S5);\n          if (mg > best) {\n            (best = mg), (bi = i), (bx = tx), (by = ty);\n            // The children do not overlap: one inside is the one.\n            if (mg > 0) break;\n          }\n        }\n        const K = KIDS[bi];\n        const n00 = m00 * K.ux + m01 * K.uy, n01 = m00 * K.vx + m01 * K.vy, n10 = m10 * K.ux + m11 * K.uy, n11 = m10 * K.vx + m11 * K.vy;\n        (m00 = n00), (m01 = n01), (m10 = n10), (m11 = n11), (flip = flip !== K.flip);\n        (qx = bx), (qy = by);\n        const sd = dark[d] * cl(reach[d] - best * sig[d], 0, 1);\n        if (sd > seam) seam = sd;\n      }\n      const a1 = atan2(m10, m00);\n      const o = (y * W + x) * 3;\n      // Colour of the tile one level up and of the newest tile, mixed.\n      tint(lut, a0 + phi, f0, paint);\n      const r0 = cr, g0 = cg, b0 = cb;\n      tint(lut, a1 + phi, flip, paint);\n      const r = r0 + (cr - r0) * ac, g = g0 + (cg - g0) * ac, b = b0 + (cb - b0) * ac;\n      const v = 1 - 0.94 * seam;\n      buf[o] = r * v;\n      buf[o + 1] = g * v;\n      buf[o + 2] = b * v;\n    }\n}\n\n// A tile's colour from the direction of its long leg on the panel and its\n// hand: four tables of 256 directions, by direction and by light, each for\n// both hands.\nlet cr = 0, cg = 0, cb = 0;\nfunction tint(lut, ang, flip, paint) {\n  let t = ang / TAU;\n  t -= floor(t);\n  const i = ((floor(t * 256) & 255) + (flip ? 256 : 0)) * 3, j = i + 1536;\n  cr = lut[i] + (lut[j] - lut[i]) * paint;\n  cg = lut[i + 1] + (lut[j + 1] - lut[i + 1]) * paint;\n  cb = lut[i + 2] + (lut[j + 2] - lut[i + 2]) * paint;\n}\n\nfunction buildLut(P) {\n  for (let i = 0; i \u003c 256; i++) {\n    const t = i / 256, lit = 0.5 + 0.5 * cos(t * TAU - 2.2);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 1, P.lut, i * 3);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 0.8, P.lut, (256 + i) * 3);\n    hsv(P.hue + 0.55, 0.55, 0.35 + 0.65 * lit, P.lut, (512 + i) * 3);\n    hsv(P.hue + 0.62, 0.85, 0.25 + 0.6 * lit, P.lut, (768 + i) * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const out = P.out;\n  render(P, DIVES[P.dive], out);\n  if (P.fade \u003c 1 && P.prev >= 0) {\n    render(P, DIVES[P.prev], P.tmp);\n    const f = sm(0, 1, P.fade), tmp = P.tmp;\n    for (let i = 0; i \u003c out.length; i++) out[i] = tmp[i] + (out[i] - tmp[i]) * f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","layer":{"id":"layer-pinwheel-tiling","type":"code","name":"pinwheel-tiling","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pinwheel Tiling\n// Family:  geometry\n// Idea:    The pinwheel tiling of right triangles with legs 1 and 2 zooms for ever into the point held still by the child turned through arctan(1/2), each tile splitting into five copies a root five smaller, one of them turned by arctan(1/2), so every level brings directions the last one did not have, and each tile is coloured by the direction of its long leg.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: pinwheel tiling (John Conway and Charles Radin, 1994), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1\n//\n// Knob 1: Hue. Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other.\n// Knob 2: Speed. At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4.\n// Knob 3: Size. How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider.\n// Knob 4: Paint. At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers.\n// Buttons: K1 tap crossfades in 0.8 seconds to the next of four points to dive into: the fixed point of child 2 (turned by arctan(1/2)), of child 3 taken twice, and of the chains 2 then 3 and 3 then 2, where the view turns the other way, 63.4 degrees a level.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5;\nconst { floor, sqrt, cos, sin, atan, atan2, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst S5 = sqrt(5), LS5 = log(S5), TAU = 2 * PI, A2 = atan(0.5);\n\n// The tile in its own frame: small angle at (0,0), right angle at (2,0),\n// large angle at (2,1). Conway's cut: the altitude from the right angle takes\n// one copy off the short side; the larger part is cut from the midpoint of\n// its hypotenuse to its right angle and to the midpoints of its two legs,\n// four copies in two mirror pairs. Each child is [small, right, large] in the\n// parent's frame. Children 2 and 3 keep the parent's hand, 0, 1 and 4 are\n// mirrored. Cut with the midpoint split instead, the tiles keep to eight\n// directions; with this cut the count grows with every level.\nconst KIDS = [\n  [[2, 0], [1.6, 0.8], [2, 1]],\n  [[1, 0], [1.8, 0.4], [2, 0]],\n  [[1, 0], [1.8, 0.4], [1.6, 0.8]],\n  [[1.6, 0.8], [0.8, 0.4], [1, 0]],\n  [[0, 0], [0.8, 0.4], [1, 0]],\n].map(([a, b, c]) => {\n  const ux = (b[0] - a[0]) / 2, uy = (b[1] - a[1]) / 2, vx = c[0] - b[0], vy = c[1] - b[1], det = ux * vy - vx * uy;\n  return { ax: a[0], ay: a[1], ux, uy, vx, vy, i00: vy / det, i01: -vx / det, i10: -uy / det, i11: ux / det, flip: det \u003c 0 };\n});\n\n// Points the zoom can dive into, each the fixed point of a chain of children\n// that keeps the hand: child 2 alone, a copy a fifth of the area turned by\n// arctan(1/2); child 3 twice; 2 then 3; 3 then 2. P is the chain's length in\n// levels, R its turn.\nconst DIVES = [\n  { zx: 1.5, zy: 0.5, P: 1, R: A2 },\n  { zx: 1.2, zy: 0.4, P: 2, R: 2 * A2 },\n  { zx: 1.375, zy: 0.375, P: 2, R: 2 * A2 - PI },\n  { zx: 1.125, zy: 0.375, P: 2, R: 2 * A2 - PI },\n];\nconst N0 = 8;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  params.s = {\n    z: 0, hue: 0, speed: 2, size: 13, paint: 0.06, dive: 0, prev: -1, fade: 1,\n    lut: new Float32Array(256 * 3 * 4), lutHue: NaN, out: new Float32Array(W * H * 3), tmp: new Float32Array(W * H * 3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 13, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.size = cl(k[2], 13, 40);\n  P.paint = cl(k[3], 0, 1);\n  P.z += d * P.speed * 0.14;\n  if (P.fade \u003c 1) P.fade = Math.min(1, P.fade + d / 0.8);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.prev = P.dive;\n    P.dive = (P.dive + 1) % DIVES.length;\n    P.fade = 0;\n  }\n}\n\n// Draws one dive into buf: RGB 0..255 per LED.\nfunction render(P, D, buf) {\n  const u = P.z % D.P, S = Math.pow(S5, N0 + u), phi = -D.R * (u / D.P);\n  const cp = cos(-phi) / S, sp = sin(-phi) / S;\n  // Depth d tiles span S * sqrt5^(1-d) LEDs along the hypotenuse; the deepest\n  // drawn is the last one at least Size long, and it fades in.\n  const lam = N0 + u + 1 - log(P.size) / LS5, dn = floor(lam), al = sm(0, 0.3, lam - dn), ac = sm(0.28, 0.42, lam - dn);\n  // Each level's seam: its scale on the panel, how far it reaches from the\n  // edge (a little wider for the older, larger tiles) and how dark it is.\n  const sig = new Float32Array(dn + 1), reach = new Float32Array(dn + 1), dark = new Float32Array(dn + 1);\n  for (let d = 0; d \u003c= dn; d++) {\n    sig[d] = S * Math.pow(S5, -d);\n    reach[d] = 1.1 + 0.45 * sm(1, 2.5, lam - d);\n    dark[d] = d === dn ? al : 1;\n  }\n  const lut = P.lut, paint = P.paint;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - CX, dy = y - CY;\n      let qx = D.zx + cp * dx - sp * dy, qy = D.zy + sp * dx + cp * dy;\n      let m00 = 1, m01 = 0, m10 = 0, m11 = 1, flip = false;\n      let a0 = 0, f0 = false, seam = 0;\n      for (let d = 1; d \u003c= dn; d++) {\n        if (d === dn) (a0 = atan2(m10, m00)), (f0 = flip);\n        let best = -9, bi = 0, bx = 0, by = 0;\n        for (let i = 0; i \u003c 5; i++) {\n          const K = KIDS[i], rx = qx - K.ax, ry = qy - K.ay;\n          const tx = K.i00 * rx + K.i01 * ry, ty = K.i10 * rx + K.i11 * ry;\n          const mg = Math.min(ty, 2 - tx, (tx - 2 * ty) / S5);\n          if (mg > best) {\n            (best = mg), (bi = i), (bx = tx), (by = ty);\n            // The children do not overlap: one inside is the one.\n            if (mg > 0) break;\n          }\n        }\n        const K = KIDS[bi];\n        const n00 = m00 * K.ux + m01 * K.uy, n01 = m00 * K.vx + m01 * K.vy, n10 = m10 * K.ux + m11 * K.uy, n11 = m10 * K.vx + m11 * K.vy;\n        (m00 = n00), (m01 = n01), (m10 = n10), (m11 = n11), (flip = flip !== K.flip);\n        (qx = bx), (qy = by);\n        const sd = dark[d] * cl(reach[d] - best * sig[d], 0, 1);\n        if (sd > seam) seam = sd;\n      }\n      const a1 = atan2(m10, m00);\n      const o = (y * W + x) * 3;\n      // Colour of the tile one level up and of the newest tile, mixed.\n      tint(lut, a0 + phi, f0, paint);\n      const r0 = cr, g0 = cg, b0 = cb;\n      tint(lut, a1 + phi, flip, paint);\n      const r = r0 + (cr - r0) * ac, g = g0 + (cg - g0) * ac, b = b0 + (cb - b0) * ac;\n      const v = 1 - 0.94 * seam;\n      buf[o] = r * v;\n      buf[o + 1] = g * v;\n      buf[o + 2] = b * v;\n    }\n}\n\n// A tile's colour from the direction of its long leg on the panel and its\n// hand: four tables of 256 directions, by direction and by light, each for\n// both hands.\nlet cr = 0, cg = 0, cb = 0;\nfunction tint(lut, ang, flip, paint) {\n  let t = ang / TAU;\n  t -= floor(t);\n  const i = ((floor(t * 256) & 255) + (flip ? 256 : 0)) * 3, j = i + 1536;\n  cr = lut[i] + (lut[j] - lut[i]) * paint;\n  cg = lut[i + 1] + (lut[j + 1] - lut[i + 1]) * paint;\n  cb = lut[i + 2] + (lut[j + 2] - lut[i + 2]) * paint;\n}\n\nfunction buildLut(P) {\n  for (let i = 0; i \u003c 256; i++) {\n    const t = i / 256, lit = 0.5 + 0.5 * cos(t * TAU - 2.2);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 1, P.lut, i * 3);\n    hsv(P.hue + 0.55 + 2 * t, 0.78, 0.8, P.lut, (256 + i) * 3);\n    hsv(P.hue + 0.55, 0.55, 0.35 + 0.65 * lit, P.lut, (512 + i) * 3);\n    hsv(P.hue + 0.62, 0.85, 0.25 + 0.6 * lit, P.lut, (768 + i) * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) buildLut(P);\n  const out = P.out;\n  render(P, DIVES[P.dive], out);\n  if (P.fade \u003c 1 && P.prev >= 0) {\n    render(P, DIVES[P.prev], P.tmp);\n    const f = sm(0, 1, P.fade), tmp = P.tmp;\n    for (let i = 0; i \u003c out.length; i++) out[i] = tmp[i] + (out[i] - tmp[i]) * f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Size=13..40, Paint=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours against the directions. At 0 a tile whose long leg lies across the panel is cyan, one standing upright red, one along the rising diagonal green and one along the falling diagonal violet; parallel legs share a colour whichever way they point, and the tiles of one hand are a fifth darker than those of the other."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the view grows by the square root of 5 and turns 26.6 degrees every 3.6 seconds, one level of tiles; at 0.2 a level takes 36 seconds, at 3 it takes 2.4."},{"name":"Size","min":13,"max":40,"about":"How long a tile's hypotenuse is, 13 to 40 LEDs, when the next level starts to split off it. The new seams come in over the first 30% of the level and the five children take their own colours between 28% and 42%; the seams of tiles two levels older and more grow about one LED wider."},{"name":"Paint","min":0,"max":1,"about":"At 0 every tile is coloured by its direction. At 1 the tiles are one blue, the hue moving with Hue, each as bright as its long leg points to the lower left, one hand pale and the other deep, so the two hands show in equal numbers."}],"start":[0,2,13,0.06],"measures":{"motion":2.1331,"detail":0.1861,"edges":0.7085,"complexity":1.6658,"coverage":0.856,"colour":0.5245,"drift":0.1667},"knobResponse":[0.362,0.3049,0.2869,0.2296]},{"slug":"pipe-organ","title":"Pipe Organ","family":"music","round":24,"note":"어두운 성당의 파이프오르간 정면이 패널을 채워요. 보이지 않는 오르가니스트가 여덟 화음 코랄을 되풀이하면, 소리 나는 파이프마다 입에서 빛이 켜지고 몸통을 따라 정상파 띠가 올라가요. 가운데 가장 긴 파이프가 가장 낮은 음이에요. K1 이 플루트의 파랑, 프린시펄의 은빛, 리드의 금빛과 빨강 사이에서 음전을 고르고, K1 을 누르면 파이프 열아홉이 다 울려요.","idea":"The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.","buttons":"K1 tap is full organ: every pipe in the front speaks at once for about three seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Pipe Organ\n// Family:  music\n// Idea:    The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower-and-flat fronts of North German Baroque organ cases and four-part chorale harmony\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1\n//\n// Knob 1: Stops. The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too.\n// Knob 2: Tempo. At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one.\n// Knob 3: Voices. How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord.\n// Knob 4: Tremulant. The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them.\n// Buttons: K1 tap is full organ: every pipe in the front speaks at once for about three seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Pipe d sounds the d-th note of a major scale up from the longest pipe, and\n// an open pipe halves its length each octave.\nconst STEP = [0, 2, 4, 5, 7, 9, 11];\nconst len = (d) => 92 * 2 ** (-(12 * floor(d / 7) + STEP[d % 7]) / 12);\n// The front: the lowest note in the middle of the centre tower, then pairs,\n// the lower note left and the next one right, as the C and C sharp chests of\n// a real case split a scale between the two sides.\nconst PIPES = [];\nfunction pair(d, x, w, top, mouth, base) {\n  const L = d ? (len(d) + len(d + 1)) / 2 : len(0);\n  const t = round(top >= 0 ? top : mouth - L);\n  const m = round(top >= 0 ? top + L : mouth);\n  const mh = w >= 5 ? 2 : 1;\n  PIPES[d] = { x, w, top: t, m, mh, f0: m + mh + 1, base };\n  if (d) PIPES[d + 1] = { x: W - x - w, w, top: t, m, mh, f0: m + mh + 1, base };\n}\n// The centre tower and the side towers hang from their crowns, so their\n// mouths step; the flats stand on equal feet, so their tops ramp.\npair(0, 29, 6, 9, 0, 110);\npair(1, 23, 5, 12, 0, 110);\npair(3, 1, 4, 30, 0, 110);\npair(5, 6, 4, 38, 0, 110);\npair(7, 19, 3, -1, 102, 110);\npair(9, 15, 3, -1, 102, 110);\npair(11, 11, 3, -1, 102, 110);\npair(13, 19, 3, -1, 44, 50);\npair(15, 15, 3, -1, 44, 50);\npair(17, 11, 3, -1, 44, 50);\nconst NP = 19;\n\n// Eight-chord phrases on the scale's chords, I = 0 to vi = 5. The first one\n// always opens the piece.\nconst PHRASES = [\n  [0, 4, 5, 3, 0, 1, 4, 0],\n  [0, 5, 1, 4, 0, 3, 4, 0],\n  [5, 3, 0, 4, 5, 1, 4, 4],\n  [0, 3, 0, 4, 5, 1, 4, 0],\n  [3, 4, 0, 5, 1, 0, 4, 0],\n  [0, 2, 5, 3, 1, 4, 4, 0],\n];\n// Voices in the order the knob adds them: soprano, bass, alto, tenor, then\n// three that fill the chord.\nconst VORD = [0, 3, 1, 2, 4, 5, 6];\n\n// Surfaces, as how much of each light they give back.\nconst TIN = [0.9, 0.95, 1];\nconst WOOD = [0.42, 0.25, 0.15];\nconst GILT = [1.3, 1, 0.42];\nconst DARK = [0.07, 0.05, 0.045];\nconst STONE = [0.9, 0.88, 0.84];\n// Grey daylight from the nave, the candles, and the lamp on the music desk.\nconst DAY = [56, 56, 64];\nconst CAN = [200, 126, 58];\nconst LAMP = [255, 210, 140];\n// The rose window's glass.\nconst RUBY = [230, 40, 60];\nconst SAPH = [50, 90, 255];\nconst AMBER = [255, 200, 80];\nconst GREEN = [60, 200, 110];\nconst ROSE = [RUBY, SAPH, GREEN, SAPH];\n// Stop colours: flute, principal, reed at the mouth and up the body, full organ.\nconst FLUTE = [0.35, 0.62, 1];\nconst PRIN = [0.84, 0.9, 1];\nconst REED0 = [1, 0.77, 0.27];\nconst REED1 = [1, 0.2, 0.08];\nconst FULL = [1, 0.86, 0.58];\n\n// Round tin: a highlight a third of the way across and a dark far edge.\nfunction shade(p) {\n  return (0.2 + 0.5 * sin(PI * p) ** 0.7 + 0.55 * exp(-(((p - 0.36) / 0.14) ** 2))) * (1.1 - 0.4 * p);\n}\n\n// Carved and gilt pipe shades: pierced scrolls.\nfunction fret(x, y) {\n  return sin(x * 1.25 + 2 * sin(y * 0.52)) * sin(y * 0.9 + 1.6 * sin(x * 0.61));\n}\n\nfunction build(P) {\n  const A = P.A;\n  const put = (x, y, c, k = 1, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    for (let n = 0; n \u003c 3; n++) A[o + n] = mix(A[o + n], c[n] * k, a);\n  };\n  // Left half and its mirror.\n  const two = (x, y, c, k, a) => (put(x, y, c, k, a), put(W - 1 - x, y, c, k, a));\n  const row = (x0, x1, y, c, k) => {\n    for (let x = x0; x \u003c= x1; x++) two(x, y, c, k);\n  };\n  // The church wall: courses of ashlar.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cs = floor(y / 5), off = (cs & 1) * 4, mortar = y % 5 === 4 || (x + off) % 8 === 7;\n      put(x, y, STONE, mortar ? 0.14 : 0.27 + 0.1 * hash(floor((x + off) / 8), cs));\n    }\n  // The case, dark inside.\n  for (let y = 0; y \u003c 114; y++) for (let x = 0; x \u003c 32; x++) if (x > 21 || (x > 9 ? y >= 11 : y >= 22)) two(x, y, DARK, 1);\n  // Stiles between the towers and the flats.\n  for (const [x, y0] of [[0, 30], [10, 16], [22, 9]]) for (let y = y0; y \u003c 110; y++) two(x, y, WOOD, 1.05 + 0.15 * sin(y * 0.8) * (y % 12 \u003c 2 ? 1 : 0));\n  // The side towers' crowns, each with a gilt urn and a flame on top.\n  row(0, 10, 29, GILT, 0.9);\n  for (let y = 26; y \u003c= 28; y++) row(0, 10, y, WOOD, 0.9);\n  for (const x of [2, 5, 8]) two(x, 27, GILT, 1.05);\n  row(0, 10, 25, GILT, 1.05);\n  row(0, 10, 24, WOOD, 0.7);\n  row(0, 10, 23, WOOD, 1);\n  row(0, 10, 22, GILT, 1.15);\n  const URN = [[21, 2], [20, 1], [19, 2], [18, 2], [17, 1], [16, 0], [15, 1], [14, 0]];\n  for (const [y, r] of URN) for (let x = 5 - r; x \u003c= 5 + r; x++) two(x, y, GILT, 1.15 - 0.18 * (x - 5 + r));\n  // The upper flats' cornice and a scroll pediment.\n  row(10, 22, 15, GILT, 0.9);\n  for (let y = 12; y \u003c= 14; y++) for (let x = 10; x \u003c= 22; x++) two(x, y, WOOD, y === 13 && x % 2 ? 1.25 : 0.9);\n  row(10, 22, 11, GILT, 1.1);\n  row(12, 20, 10, GILT, 0.75);\n  for (const [x, y] of [[12, 9], [13, 9], [19, 9], [20, 9], [14, 8], [15, 8], [17, 8], [18, 8], [16, 7], [16, 6]]) two(x, y, GILT, 1.05);\n  // The centre tower's crown, with a carved crest over it.\n  row(22, 31, 8, GILT, 0.95);\n  for (let y = 5; y \u003c= 7; y++) for (let x = 22; x \u003c= 31; x++) two(x, y, x % 4 === 1 && y === 6 ? GILT : WOOD, x % 4 === 1 && y === 6 ? 1.1 : 0.9);\n  row(22, 31, 4, GILT, 1.1);\n  for (let x = 23; x \u003c= 31; x++) {\n    const h = 4 * (1 - ((x - 31.5) / 9) ** 2);\n    for (let y = floor(4 - h); y \u003c 4; y++) if (fret(x, y + 3) > -0.2 || x === 31) two(x, y, GILT, x === 31 ? 1.25 : 0.8 + 0.3 * fret(x, y));\n  }\n  // Pipe shades over every pipe that stops short of the carving above it.\n  const GAP = [5, 14, 18, 28, 35, 45, 49, 58];\n  for (const q of PIPES) {\n    const y0 = q.base === 50 ? 16 : q.x === 1 || q.x === 6 || q.x > 53 ? 30 : q.x > 22 && q.x \u003c 41 ? 9 : 54;\n    for (let x = q.x - 1; x \u003c= q.x + q.w; x++) {\n      const own = x >= q.x && x \u003c q.x + q.w;\n      if (own || GAP.indexOf(x) >= 0)\n        for (let y = y0; y \u003c q.top; y++) {\n          const v = fret(x, y);\n          if (own && y === q.top - 1) put(x, y, GILT, 1.05);\n          else if (v > -0.1) put(x, y, GILT, 0.55 + 0.5 * v);\n        }\n    }\n  }\n  // Under the lower flats the pipe shades of the upper ones, and the shelf they stand on.\n  row(10, 22, 50, GILT, 0.95);\n  row(10, 22, 51, WOOD, 1);\n  row(10, 22, 52, WOOD, 0.9);\n  row(10, 22, 53, WOOD, 0.55);\n  // The pipes: body, mouth with its lips, and the conical foot.\n  for (const q of PIPES) {\n    const { x, w, top, m, mh, f0, base } = q;\n    for (let y = top; y \u003c m; y++) for (let j = 0; j \u003c w; j++) put(x + j, y, TIN, shade((j + 0.5) / w) * (y === top ? 0.7 : 1));\n    for (let j = 0; j \u003c w; j++) {\n      const inner = j > 0 && j \u003c w - 1, s = shade((j + 0.5) / w);\n      if (inner) put(x + j, m - 1, TIN, s * 1.3);\n      for (let y = m; y \u003c m + mh; y++) put(x + j, y, inner ? DARK : TIN, inner ? 0.8 : s);\n      put(x + j, m + mh, TIN, s * (inner ? 1.15 : 0.9));\n    }\n    if (w >= 5) for (let j = floor((w - 1) / 2); j \u003c= floor(w / 2); j++) put(x + j, m - 2, TIN, 1.25);\n    const cx = x + w / 2;\n    for (let y = f0; y \u003c base; y++) {\n      const hw = mix(w / 2, 0.7, (y - f0) / max(1, base - 1 - f0));\n      for (let xx = floor(cx - hw); xx \u003c= cx + hw; xx++) {\n        const cov = cl(hw - abs(xx + 0.5 - cx) + 0.5, 0, 1);\n        put(xx, y, TIN, 0.9 * shade(cl((xx + 0.5 - cx + hw) / (2 * hw), 0, 1)), cov);\n      }\n    }\n  }\n  // The impost the pipes stand on.\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 110, GILT, 1);\n    put(x, 111, WOOD, x % 16 === 0 ? 0.6 : 1);\n    put(x, 112, WOOD, x % 16 === 0 ? 0.6 : 0.95);\n    put(x, 113, WOOD, 0.5);\n  }\n  // Candles on the stiles between the side towers and the flats.\n  for (let y = 98; y \u003c= 101; y++) two(10, y, [0.95, 0.9, 0.8], 0.5);\n  for (let x = 9; x \u003c= 11; x++) two(x, 102, GILT, 0.6);\n  // The console: the music desk with its lamp, and one manual.\n  for (let y = 114; y \u003c H; y++) for (let x = 0; x \u003c W; x++) put(x, y, WOOD, 0.7);\n  for (let y = 114; y \u003c= 119; y++) for (let x = 16; x \u003c= 47; x++) put(x, y, WOOD, 0.85);\n  for (let y = 115; y \u003c= 119; y++)\n    for (let x = 21; x \u003c= 42; x++) put(x, y, [0.95, 0.9, 0.76], y === 116 || y === 118 ? 0.62 : hash(x, y) \u003c 0.13 ? 0.3 : 1);\n  for (let x = 27; x \u003c= 36; x++) put(x, 114, GILT, 1.15);\n  for (let k = 0; k \u003c 21; k++) {\n    for (let y = 121; y \u003c= 125; y++) for (let x = 3 * k; x \u003c 3 * k + 2; x++) put(x, y, [0.92, 0.88, 0.78], y === 125 ? 0.7 : 1);\n    const n = (k + 6) % 7;\n    if (k \u003c 20 && n !== 2 && n !== 6) for (let y = 121; y \u003c= 123; y++) put(3 * k + 2, y, DARK, 1), put(3 * k + 3, y, DARK, 1);\n  }\n  // Light: grey daylight from above, warm candlelight, the desk lamp.\n  for (let i = 0; i \u003c N; i++) {\n    const x = (i & 63) + 0.5, y = (i >> 6) + 0.5;\n    P.day[i] = 0.45 + 0.55 * (1 - y / H) ** 1.3;\n    P.cL[i] = 0.85 / (1 + ((x - 10.5) ** 2 + (y - 96) ** 2) / 450);\n    P.cR[i] = 0.85 / (1 + ((x - 53.5) ** 2 + (y - 96) ** 2) / 450);\n    P.lamp[i] = y > 115 ? 1.1 / (1 + (x - 32) ** 2 / 90 + (y - 115) ** 2 / 40) : 0.45 / (1 + ((x - 32) ** 2 + (y - 114) ** 2) / 140);\n  }\n}\n\n// The nearest scale degree in lo..hi under cap whose note is in pcs, moving\n// from prev, sitting still costing `same`.\nfunction near(lo, hi, pcs, prev, same, cap) {\n  let best = -1;\n  let bs = 1e9;\n  for (let d = lo; d \u003c= hi; d++) {\n    if (d >= cap || pcs.indexOf(d % 7) \u003c 0) continue;\n    const j = abs(d - prev), s = j + (j === 0 ? same : 0) + (j > 4 ? 2 : 0) + rnd() * 0.9;\n    if (s \u003c bs) (bs = s), (best = d);\n  }\n  return best \u003c 0 ? (cap \u003c 99 ? near(lo, hi, pcs, prev, same, 99) : prev) : best;\n}\n\n// The next chord of the chorale, voiced from the last one.\nfunction chord(P) {\n  if (P.pi >= P.ph.length) (P.ph = PHRASES[floor(rnd() * PHRASES.length)]), (P.pi = 0);\n  const r = P.ph[P.pi++], last = P.pi === P.ph.length, pen = P.pi === P.ph.length - 1;\n  const T = [r, (r + 2) % 7, (r + 4) % 7];\n  if (pen && r === 4 && rnd() \u003c 0.6) T.push(3);\n  const [s0, a0, t0, b0] = P.prev;\n  const B = near(0, 7, [!last && !pen && rnd() \u003c 0.3 ? T[1] : r], b0, 0, 99);\n  const S = near(11, 18, last && r === 0 ? [0] : T, s0, 1.6, 99);\n  const A = near(8, 14, T, a0, 0.4, S);\n  const miss = T.filter((c) => c !== S % 7 && c !== A % 7 && c !== B % 7);\n  const Tn = near(4, 11, miss.length ? miss : T, t0, 0.4, A);\n  const v = [S, A, Tn, B];\n  // Three more parts fill the chord: the bass an octave up, one in the middle, one high.\n  for (const goal of [B + 7, 10, 16]) {\n    let best = -1;\n    let bs = 1e9;\n    for (let d = 0; d \u003c NP; d++) {\n      const s = abs(d - goal) + rnd() * 0.5;\n      if (T.indexOf(d % 7) >= 0 && v.indexOf(d) \u003c 0 && s \u003c bs) (bs = s), (best = d);\n    }\n    v.push(best);\n  }\n  P.prev = v;\n  return { v, dur: last ? 2 : 1, last, pass: [-1, -1, -1, -1], at: 0 };\n}\n\n// A part moving a third walks through the note between on the half beat.\nfunction passing(c, nx) {\n  if (c.last) return;\n  for (let k = 0; k \u003c 4; k++) if (abs(nx.v[k] - c.v[k]) === 2 && rnd() \u003c (k ? 0.4 : 0.6)) c.pass[k] = (c.v[k] + nx.v[k]) / 2;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    A: F32(N * 3), F: F32(N * 3), day: F32(N), cL: F32(N), cR: F32(N), lamp: F32(N),\n    amp: F32(NP), tgt: F32(NP), on: F32(NP), chiff: F32(NP), keys: F32(NP),\n    t: 0, beat: 0, fullT: 99, full: 0, fl: 1, fr: 1, s: 0, tr: 0,\n    ph1: rnd() * 6.28, ph2: rnd() * 6.28, ph: PHRASES[0], pi: 0, prev: [14, 11, 7, 0, 7, 9, 16],\n  });\n  build(P);\n  P.cur = chord(P);\n  P.nx = chord(P);\n  passing(P.cur, P.nx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  const s = (P.s = cl(k[0], 0, 1));\n  const tempo = cl(k[1], 0.2, 3);\n  const nv = cl(round(k[2]), 1, 6);\n  const tr = (P.tr = cl(k[3], 0, 1));\n  const t = (P.t += d);\n  P.beat += (d * tempo) / 2;\n  while (P.beat >= P.cur.at + P.cur.dur) {\n    const at = P.cur.at + P.cur.dur;\n    P.cur = P.nx;\n    P.cur.at = at;\n    P.nx = chord(P);\n    passing(P.cur, P.nx);\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.fullT = 0;\n  P.fullT += d;\n  P.full = P.fullT \u003c 2.8 ? sm(0, 0.06, P.fullT) : 1 - sm(2.8, 3.6, P.fullT);\n\n  // Which pipes speak: each part's note, the octave above from the\n  // principals on, and with the reeds the octave below, the twelfth and the\n  // fifteenth.\n  const c = P.cur, pos = P.beat - c.at, r4 = 0.8 * sm(0.3, 0.55, s), r2 = 0.75 * sm(0.7, 0.92, s);\n  P.tgt.fill(0);\n  P.keys.fill(0);\n  if (!(c.last && pos > c.dur - 0.22))\n    for (let n = 0; n \u003c= nv; n++) {\n      const v = VORD[n], g = v \u003c 4 && c.pass[v] >= 0 && pos >= c.dur / 2 ? c.pass[v] : c.v[v];\n      if (g \u003c 0) continue;\n      P.tgt[g] = 1;\n      if (v !== 3) P.keys[g] = 1;\n      if (g + 7 \u003c NP) P.tgt[g + 7] = max(P.tgt[g + 7], r4);\n      if (g >= 7) P.tgt[g - 7] = max(P.tgt[g - 7], r2);\n      if (g + 11 \u003c NP) P.tgt[g + 11] = max(P.tgt[g + 11], r2);\n      if (g + 14 \u003c NP) P.tgt[g + 14] = max(P.tgt[g + 14], r2);\n    }\n  for (let i = 0; i \u003c NP; i++) {\n    const g = max(P.tgt[i], 0.9 * P.full);\n    if (g > 0.5 && P.on[i] \u003c 0.5) P.chiff[i] = 1;\n    P.on[i] = g;\n    P.amp[i] += (g - P.amp[i]) * (1 - exp(-d / (g > P.amp[i] ? 0.035 : 0.14)));\n    P.chiff[i] *= exp(-d / 0.18);\n  }\n  // Candles in the draught: as the tremulant shakes the wind they flicker\n  // harder and burn lower.\n  const fa = 0.05 + tr;\n  const fl = (ph) => 1 - 0.4 * fa + fa * (0.6 * sin(t * 7.1 + ph) + 0.45 * sin(t * 11.9 + 2 * ph) + 0.35 * sin(t * 4.3 + 3 * ph) * sin(t * 17.3));\n  P.fl = cl(fl(0), 0.1, 2);\n  P.fr = cl(fl(2.1), 0.1, 2);\n}\n\n// A stop's colour, u from the mouth (0) to the top (1).\nfunction stopCol(out, s, u, full) {\n  for (let n = 0; n \u003c 3; n++) {\n    const v = s \u003c 0.5 ? mix(FLUTE[n], PRIN[n], s * 2) : mix(PRIN[n], mix(REED0[n], REED1[n], min(1, u * 1.6)), s * 2 - 1);\n    out[n] = mix(v, FULL[n], full);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { A, F, day, cL, cR, lamp, t } = P;\n  // The case in daylight, candlelight and lamplight.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const dl = day[i], cn = cL[i] * P.fl + cR[i] * P.fr, lp = lamp[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = A[o + n] * (DAY[n] * dl + CAN[n] * cn + LAMP[n] * lp);\n  }\n  // The rose window's light, cast long and slow across the case.\n  const px = 32 + 17 * sin(t * 0.05 + P.ph1), py = 60 + 34 * sin(t * 0.031 + P.ph2), RX = 15, RY = 24;\n  const I0 = 0.65 * (0.8 + 0.2 * sin(t * 0.23 + P.ph1));\n  for (let y = max(0, floor(py - RY)); y \u003c= min(H - 1, py + RY); y++)\n    for (let x = max(0, floor(px - RX)); x \u003c= min(W - 1, px + RX); x++) {\n      const dx = (x + 0.5 - px) / RX, dy = (y + 0.5 - py) / RY, r = sqrt(dx * dx + dy * dy);\n      if (r >= 1) continue;\n      const a = atan2(dy, dx) / (2 * PI) + 0.5;\n      let c, lead;\n      if (r \u003c 0.2) (c = AMBER), (lead = r > 0.15);\n      else if (r \u003c 0.5) {\n        const q = a * 8;\n        (c = floor(q) & 1 ? RUBY : SAPH), (lead = q - floor(q) \u003c 0.1 || r \u003c 0.24);\n      } else {\n        const q = a * 16;\n        (c = ROSE[floor(q) & 3]), (lead = q - floor(q) \u003c 0.08 || r \u003c 0.54);\n      }\n      const kk = I0 * (lead ? 0.45 : 1) * sm(1, 0.82, r), o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * c[n] * kk;\n    }\n  // The pipes that speak: the mouth lights and a standing wave shimmers up\n  // the body, its bands creeping upward and wavering with the tremulant.\n  const s = P.s, tr = P.tr, gain = 240 * (0.8 + 0.4 * s), bands = 2 + 4 * s, floor0 = 0.45 - 0.25 * s;\n  // Many pipes at once light the case less each, or the chord drowns in its own light.\n  let ns = 0;\n  for (let i = 0; i \u003c NP; i++) ns += P.amp[i];\n  const spread = (1 - 0.6 * P.full) / (1 + 0.12 * max(0, ns - 2));\n  const trem = sin(2 * PI * 5.4 * t), tm = 1 - 0.9 * tr * (0.5 + 0.5 * trem), wob = 0.3 * tr * trem;\n  const col = [0, 0, 0];\n  for (let i = 0; i \u003c NP; i++) {\n    const am = P.amp[i];\n    if (am \u003c 0.004) continue;\n    const { x, w, top, m, mh, base } = PIPES[i];\n    const a = am * gain * tm, span = m - top, osc = 0.7 + 0.3 * cos(t * (5 + 0.6 * i) + i * 1.7);\n    const bm = max(bands, 5 * P.full), creep = 0.3 * t + i * 0.37;\n    // Its light on the polished tin and the gilt round it.\n    stopCol(col, s, 0.4, P.full);\n    const kb = am * tm * (0.22 + 0.5 * s) * spread * 255;\n    for (let y = max(0, top - 10); y \u003c min(H, base + 6); y++) {\n      const ly = kb * (y \u003c top ? exp((y - top) / 4) : y > m ? exp((m - y) / 7) : 1);\n      for (let xx = max(0, x - 16); xx \u003c min(W, x + w + 16); xx++) {\n        const dd = xx \u003c x ? x - xx : xx >= x + w ? xx - x - w + 1 : 0, lb = ly / (1 + dd * dd * 0.05), o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * col[n] * lb;\n      }\n    }\n    for (let y = top; y \u003c m; y++) {\n      const u = (m - 0.5 - y) / span;\n      const bv = abs(cos(PI * (bm * u - creep + wob))) ** 2.5 * osc;\n      const g = a * (0.75 + 0.25 * exp(-3 * u)) * (floor0 + (1 - floor0) * bv);\n      stopCol(col, s, u, P.full);\n      for (let j = -2; j \u003c w + 2; j++) {\n        const xx = x + j;\n        if (xx \u003c 0 || xx >= W) continue;\n        const cr = j \u003c 0 || j >= w ? (j === -1 || j === w ? 0.2 : 0.07) : 0.6 + 0.4 * sin((PI * (j + 0.5)) / w);\n        const o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += col[n] * g * cr;\n      }\n    }\n    // The mouth: hot in the slot, flaring as the pipe speaks, and a glow round it.\n    stopCol(col, s, 0, P.full);\n    const cx = x + w / 2, cy = m + mh / 2, hot = a * (0.8 + 1.1 * P.chiff[i]);\n    for (let y = m - 4; y \u003c= m + mh + 4; y++)\n      for (let xx = x - 3; xx \u003c x + w + 3; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const e = ((xx + 0.5 - cx) / (w / 2 + 1.2)) ** 2 + ((y + 0.5 - cy) / 2.6) ** 2;\n        if (e > 3) continue;\n        const slot = y >= m && y \u003c m + mh && xx > x && xx \u003c x + w - 1;\n        const o = (y * W + xx) * 3, k = slot ? hot * 2 : hot * 0.5 * exp(-e * 1.3);\n        for (let n = 0; n \u003c 3; n++) F[o + n] += mix(col[n], 1, slot ? 0.7 : 0.2) * k;\n      }\n  }\n  // The candle flames, each with a halo in the air round it.\n  for (const [x, f] of [[10, P.fl], [53, P.fr]]) {\n    for (let y = 92; y \u003c= 100; y++)\n      for (let xx = x - 3; xx \u003c= x + 3; xx++) {\n        const e = (xx - x) ** 2 + ((y - 96.5) * 0.8) ** 2, o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += CAN[n] * 0.45 * f * exp(-e / 3);\n      }\n    for (const [y, c, k] of [[97, [255, 250, 225], 1], [96, [255, 236, 160], min(1, f)], [95, [255, 190, 80], cl(f, 0, 1)], [94, [255, 120, 30], cl(f - 0.8, 0, 1)]]) {\n      const o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = max(F[o + n], c[n] * k);\n    }\n  }\n  // Keys held down on the manual.\n  for (let i = 0; i \u003c NP; i++)\n    if (P.keys[i] > 0)\n      for (let y = 121; y \u003c= 125; y++)\n        for (let x = 3 * (i + 1); x \u003c 3 * (i + 1) + 2; x++) {\n          const o = (y * W + x) * 3;\n          for (let n = 0; n \u003c 3; n++) F[o + n] *= y === 125 ? 0.35 : 0.6;\n        }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, knee(F[o]), knee(F[o + 1]), knee(F[o + 2]));\n}\n\n// Light past 180 rolls off towards 255, so a speaking pipe keeps its colour.\nfunction knee(v) {\n  return (v \u003c 180 ? v : 255 - 75 * exp(-(v - 180) / 75)) | 0;\n}\n","layer":{"id":"layer-pipe-organ","type":"code","name":"pipe-organ","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pipe Organ\n// Family:  music\n// Idea:    The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower-and-flat fronts of North German Baroque organ cases and four-part chorale harmony\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1\n//\n// Knob 1: Stops. The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too.\n// Knob 2: Tempo. At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one.\n// Knob 3: Voices. How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord.\n// Knob 4: Tremulant. The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them.\n// Buttons: K1 tap is full organ: every pipe in the front speaks at once for about three seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Pipe d sounds the d-th note of a major scale up from the longest pipe, and\n// an open pipe halves its length each octave.\nconst STEP = [0, 2, 4, 5, 7, 9, 11];\nconst len = (d) => 92 * 2 ** (-(12 * floor(d / 7) + STEP[d % 7]) / 12);\n// The front: the lowest note in the middle of the centre tower, then pairs,\n// the lower note left and the next one right, as the C and C sharp chests of\n// a real case split a scale between the two sides.\nconst PIPES = [];\nfunction pair(d, x, w, top, mouth, base) {\n  const L = d ? (len(d) + len(d + 1)) / 2 : len(0);\n  const t = round(top >= 0 ? top : mouth - L);\n  const m = round(top >= 0 ? top + L : mouth);\n  const mh = w >= 5 ? 2 : 1;\n  PIPES[d] = { x, w, top: t, m, mh, f0: m + mh + 1, base };\n  if (d) PIPES[d + 1] = { x: W - x - w, w, top: t, m, mh, f0: m + mh + 1, base };\n}\n// The centre tower and the side towers hang from their crowns, so their\n// mouths step; the flats stand on equal feet, so their tops ramp.\npair(0, 29, 6, 9, 0, 110);\npair(1, 23, 5, 12, 0, 110);\npair(3, 1, 4, 30, 0, 110);\npair(5, 6, 4, 38, 0, 110);\npair(7, 19, 3, -1, 102, 110);\npair(9, 15, 3, -1, 102, 110);\npair(11, 11, 3, -1, 102, 110);\npair(13, 19, 3, -1, 44, 50);\npair(15, 15, 3, -1, 44, 50);\npair(17, 11, 3, -1, 44, 50);\nconst NP = 19;\n\n// Eight-chord phrases on the scale's chords, I = 0 to vi = 5. The first one\n// always opens the piece.\nconst PHRASES = [\n  [0, 4, 5, 3, 0, 1, 4, 0],\n  [0, 5, 1, 4, 0, 3, 4, 0],\n  [5, 3, 0, 4, 5, 1, 4, 4],\n  [0, 3, 0, 4, 5, 1, 4, 0],\n  [3, 4, 0, 5, 1, 0, 4, 0],\n  [0, 2, 5, 3, 1, 4, 4, 0],\n];\n// Voices in the order the knob adds them: soprano, bass, alto, tenor, then\n// three that fill the chord.\nconst VORD = [0, 3, 1, 2, 4, 5, 6];\n\n// Surfaces, as how much of each light they give back.\nconst TIN = [0.9, 0.95, 1];\nconst WOOD = [0.42, 0.25, 0.15];\nconst GILT = [1.3, 1, 0.42];\nconst DARK = [0.07, 0.05, 0.045];\nconst STONE = [0.9, 0.88, 0.84];\n// Grey daylight from the nave, the candles, and the lamp on the music desk.\nconst DAY = [56, 56, 64];\nconst CAN = [200, 126, 58];\nconst LAMP = [255, 210, 140];\n// The rose window's glass.\nconst RUBY = [230, 40, 60];\nconst SAPH = [50, 90, 255];\nconst AMBER = [255, 200, 80];\nconst GREEN = [60, 200, 110];\nconst ROSE = [RUBY, SAPH, GREEN, SAPH];\n// Stop colours: flute, principal, reed at the mouth and up the body, full organ.\nconst FLUTE = [0.35, 0.62, 1];\nconst PRIN = [0.84, 0.9, 1];\nconst REED0 = [1, 0.77, 0.27];\nconst REED1 = [1, 0.2, 0.08];\nconst FULL = [1, 0.86, 0.58];\n\n// Round tin: a highlight a third of the way across and a dark far edge.\nfunction shade(p) {\n  return (0.2 + 0.5 * sin(PI * p) ** 0.7 + 0.55 * exp(-(((p - 0.36) / 0.14) ** 2))) * (1.1 - 0.4 * p);\n}\n\n// Carved and gilt pipe shades: pierced scrolls.\nfunction fret(x, y) {\n  return sin(x * 1.25 + 2 * sin(y * 0.52)) * sin(y * 0.9 + 1.6 * sin(x * 0.61));\n}\n\nfunction build(P) {\n  const A = P.A;\n  const put = (x, y, c, k = 1, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    for (let n = 0; n \u003c 3; n++) A[o + n] = mix(A[o + n], c[n] * k, a);\n  };\n  // Left half and its mirror.\n  const two = (x, y, c, k, a) => (put(x, y, c, k, a), put(W - 1 - x, y, c, k, a));\n  const row = (x0, x1, y, c, k) => {\n    for (let x = x0; x \u003c= x1; x++) two(x, y, c, k);\n  };\n  // The church wall: courses of ashlar.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cs = floor(y / 5), off = (cs & 1) * 4, mortar = y % 5 === 4 || (x + off) % 8 === 7;\n      put(x, y, STONE, mortar ? 0.14 : 0.27 + 0.1 * hash(floor((x + off) / 8), cs));\n    }\n  // The case, dark inside.\n  for (let y = 0; y \u003c 114; y++) for (let x = 0; x \u003c 32; x++) if (x > 21 || (x > 9 ? y >= 11 : y >= 22)) two(x, y, DARK, 1);\n  // Stiles between the towers and the flats.\n  for (const [x, y0] of [[0, 30], [10, 16], [22, 9]]) for (let y = y0; y \u003c 110; y++) two(x, y, WOOD, 1.05 + 0.15 * sin(y * 0.8) * (y % 12 \u003c 2 ? 1 : 0));\n  // The side towers' crowns, each with a gilt urn and a flame on top.\n  row(0, 10, 29, GILT, 0.9);\n  for (let y = 26; y \u003c= 28; y++) row(0, 10, y, WOOD, 0.9);\n  for (const x of [2, 5, 8]) two(x, 27, GILT, 1.05);\n  row(0, 10, 25, GILT, 1.05);\n  row(0, 10, 24, WOOD, 0.7);\n  row(0, 10, 23, WOOD, 1);\n  row(0, 10, 22, GILT, 1.15);\n  const URN = [[21, 2], [20, 1], [19, 2], [18, 2], [17, 1], [16, 0], [15, 1], [14, 0]];\n  for (const [y, r] of URN) for (let x = 5 - r; x \u003c= 5 + r; x++) two(x, y, GILT, 1.15 - 0.18 * (x - 5 + r));\n  // The upper flats' cornice and a scroll pediment.\n  row(10, 22, 15, GILT, 0.9);\n  for (let y = 12; y \u003c= 14; y++) for (let x = 10; x \u003c= 22; x++) two(x, y, WOOD, y === 13 && x % 2 ? 1.25 : 0.9);\n  row(10, 22, 11, GILT, 1.1);\n  row(12, 20, 10, GILT, 0.75);\n  for (const [x, y] of [[12, 9], [13, 9], [19, 9], [20, 9], [14, 8], [15, 8], [17, 8], [18, 8], [16, 7], [16, 6]]) two(x, y, GILT, 1.05);\n  // The centre tower's crown, with a carved crest over it.\n  row(22, 31, 8, GILT, 0.95);\n  for (let y = 5; y \u003c= 7; y++) for (let x = 22; x \u003c= 31; x++) two(x, y, x % 4 === 1 && y === 6 ? GILT : WOOD, x % 4 === 1 && y === 6 ? 1.1 : 0.9);\n  row(22, 31, 4, GILT, 1.1);\n  for (let x = 23; x \u003c= 31; x++) {\n    const h = 4 * (1 - ((x - 31.5) / 9) ** 2);\n    for (let y = floor(4 - h); y \u003c 4; y++) if (fret(x, y + 3) > -0.2 || x === 31) two(x, y, GILT, x === 31 ? 1.25 : 0.8 + 0.3 * fret(x, y));\n  }\n  // Pipe shades over every pipe that stops short of the carving above it.\n  const GAP = [5, 14, 18, 28, 35, 45, 49, 58];\n  for (const q of PIPES) {\n    const y0 = q.base === 50 ? 16 : q.x === 1 || q.x === 6 || q.x > 53 ? 30 : q.x > 22 && q.x \u003c 41 ? 9 : 54;\n    for (let x = q.x - 1; x \u003c= q.x + q.w; x++) {\n      const own = x >= q.x && x \u003c q.x + q.w;\n      if (own || GAP.indexOf(x) >= 0)\n        for (let y = y0; y \u003c q.top; y++) {\n          const v = fret(x, y);\n          if (own && y === q.top - 1) put(x, y, GILT, 1.05);\n          else if (v > -0.1) put(x, y, GILT, 0.55 + 0.5 * v);\n        }\n    }\n  }\n  // Under the lower flats the pipe shades of the upper ones, and the shelf they stand on.\n  row(10, 22, 50, GILT, 0.95);\n  row(10, 22, 51, WOOD, 1);\n  row(10, 22, 52, WOOD, 0.9);\n  row(10, 22, 53, WOOD, 0.55);\n  // The pipes: body, mouth with its lips, and the conical foot.\n  for (const q of PIPES) {\n    const { x, w, top, m, mh, f0, base } = q;\n    for (let y = top; y \u003c m; y++) for (let j = 0; j \u003c w; j++) put(x + j, y, TIN, shade((j + 0.5) / w) * (y === top ? 0.7 : 1));\n    for (let j = 0; j \u003c w; j++) {\n      const inner = j > 0 && j \u003c w - 1, s = shade((j + 0.5) / w);\n      if (inner) put(x + j, m - 1, TIN, s * 1.3);\n      for (let y = m; y \u003c m + mh; y++) put(x + j, y, inner ? DARK : TIN, inner ? 0.8 : s);\n      put(x + j, m + mh, TIN, s * (inner ? 1.15 : 0.9));\n    }\n    if (w >= 5) for (let j = floor((w - 1) / 2); j \u003c= floor(w / 2); j++) put(x + j, m - 2, TIN, 1.25);\n    const cx = x + w / 2;\n    for (let y = f0; y \u003c base; y++) {\n      const hw = mix(w / 2, 0.7, (y - f0) / max(1, base - 1 - f0));\n      for (let xx = floor(cx - hw); xx \u003c= cx + hw; xx++) {\n        const cov = cl(hw - abs(xx + 0.5 - cx) + 0.5, 0, 1);\n        put(xx, y, TIN, 0.9 * shade(cl((xx + 0.5 - cx + hw) / (2 * hw), 0, 1)), cov);\n      }\n    }\n  }\n  // The impost the pipes stand on.\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 110, GILT, 1);\n    put(x, 111, WOOD, x % 16 === 0 ? 0.6 : 1);\n    put(x, 112, WOOD, x % 16 === 0 ? 0.6 : 0.95);\n    put(x, 113, WOOD, 0.5);\n  }\n  // Candles on the stiles between the side towers and the flats.\n  for (let y = 98; y \u003c= 101; y++) two(10, y, [0.95, 0.9, 0.8], 0.5);\n  for (let x = 9; x \u003c= 11; x++) two(x, 102, GILT, 0.6);\n  // The console: the music desk with its lamp, and one manual.\n  for (let y = 114; y \u003c H; y++) for (let x = 0; x \u003c W; x++) put(x, y, WOOD, 0.7);\n  for (let y = 114; y \u003c= 119; y++) for (let x = 16; x \u003c= 47; x++) put(x, y, WOOD, 0.85);\n  for (let y = 115; y \u003c= 119; y++)\n    for (let x = 21; x \u003c= 42; x++) put(x, y, [0.95, 0.9, 0.76], y === 116 || y === 118 ? 0.62 : hash(x, y) \u003c 0.13 ? 0.3 : 1);\n  for (let x = 27; x \u003c= 36; x++) put(x, 114, GILT, 1.15);\n  for (let k = 0; k \u003c 21; k++) {\n    for (let y = 121; y \u003c= 125; y++) for (let x = 3 * k; x \u003c 3 * k + 2; x++) put(x, y, [0.92, 0.88, 0.78], y === 125 ? 0.7 : 1);\n    const n = (k + 6) % 7;\n    if (k \u003c 20 && n !== 2 && n !== 6) for (let y = 121; y \u003c= 123; y++) put(3 * k + 2, y, DARK, 1), put(3 * k + 3, y, DARK, 1);\n  }\n  // Light: grey daylight from above, warm candlelight, the desk lamp.\n  for (let i = 0; i \u003c N; i++) {\n    const x = (i & 63) + 0.5, y = (i >> 6) + 0.5;\n    P.day[i] = 0.45 + 0.55 * (1 - y / H) ** 1.3;\n    P.cL[i] = 0.85 / (1 + ((x - 10.5) ** 2 + (y - 96) ** 2) / 450);\n    P.cR[i] = 0.85 / (1 + ((x - 53.5) ** 2 + (y - 96) ** 2) / 450);\n    P.lamp[i] = y > 115 ? 1.1 / (1 + (x - 32) ** 2 / 90 + (y - 115) ** 2 / 40) : 0.45 / (1 + ((x - 32) ** 2 + (y - 114) ** 2) / 140);\n  }\n}\n\n// The nearest scale degree in lo..hi under cap whose note is in pcs, moving\n// from prev, sitting still costing `same`.\nfunction near(lo, hi, pcs, prev, same, cap) {\n  let best = -1;\n  let bs = 1e9;\n  for (let d = lo; d \u003c= hi; d++) {\n    if (d >= cap || pcs.indexOf(d % 7) \u003c 0) continue;\n    const j = abs(d - prev), s = j + (j === 0 ? same : 0) + (j > 4 ? 2 : 0) + rnd() * 0.9;\n    if (s \u003c bs) (bs = s), (best = d);\n  }\n  return best \u003c 0 ? (cap \u003c 99 ? near(lo, hi, pcs, prev, same, 99) : prev) : best;\n}\n\n// The next chord of the chorale, voiced from the last one.\nfunction chord(P) {\n  if (P.pi >= P.ph.length) (P.ph = PHRASES[floor(rnd() * PHRASES.length)]), (P.pi = 0);\n  const r = P.ph[P.pi++], last = P.pi === P.ph.length, pen = P.pi === P.ph.length - 1;\n  const T = [r, (r + 2) % 7, (r + 4) % 7];\n  if (pen && r === 4 && rnd() \u003c 0.6) T.push(3);\n  const [s0, a0, t0, b0] = P.prev;\n  const B = near(0, 7, [!last && !pen && rnd() \u003c 0.3 ? T[1] : r], b0, 0, 99);\n  const S = near(11, 18, last && r === 0 ? [0] : T, s0, 1.6, 99);\n  const A = near(8, 14, T, a0, 0.4, S);\n  const miss = T.filter((c) => c !== S % 7 && c !== A % 7 && c !== B % 7);\n  const Tn = near(4, 11, miss.length ? miss : T, t0, 0.4, A);\n  const v = [S, A, Tn, B];\n  // Three more parts fill the chord: the bass an octave up, one in the middle, one high.\n  for (const goal of [B + 7, 10, 16]) {\n    let best = -1;\n    let bs = 1e9;\n    for (let d = 0; d \u003c NP; d++) {\n      const s = abs(d - goal) + rnd() * 0.5;\n      if (T.indexOf(d % 7) >= 0 && v.indexOf(d) \u003c 0 && s \u003c bs) (bs = s), (best = d);\n    }\n    v.push(best);\n  }\n  P.prev = v;\n  return { v, dur: last ? 2 : 1, last, pass: [-1, -1, -1, -1], at: 0 };\n}\n\n// A part moving a third walks through the note between on the half beat.\nfunction passing(c, nx) {\n  if (c.last) return;\n  for (let k = 0; k \u003c 4; k++) if (abs(nx.v[k] - c.v[k]) === 2 && rnd() \u003c (k ? 0.4 : 0.6)) c.pass[k] = (c.v[k] + nx.v[k]) / 2;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    A: F32(N * 3), F: F32(N * 3), day: F32(N), cL: F32(N), cR: F32(N), lamp: F32(N),\n    amp: F32(NP), tgt: F32(NP), on: F32(NP), chiff: F32(NP), keys: F32(NP),\n    t: 0, beat: 0, fullT: 99, full: 0, fl: 1, fr: 1, s: 0, tr: 0,\n    ph1: rnd() * 6.28, ph2: rnd() * 6.28, ph: PHRASES[0], pi: 0, prev: [14, 11, 7, 0, 7, 9, 16],\n  });\n  build(P);\n  P.cur = chord(P);\n  P.nx = chord(P);\n  passing(P.cur, P.nx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  const s = (P.s = cl(k[0], 0, 1));\n  const tempo = cl(k[1], 0.2, 3);\n  const nv = cl(round(k[2]), 1, 6);\n  const tr = (P.tr = cl(k[3], 0, 1));\n  const t = (P.t += d);\n  P.beat += (d * tempo) / 2;\n  while (P.beat >= P.cur.at + P.cur.dur) {\n    const at = P.cur.at + P.cur.dur;\n    P.cur = P.nx;\n    P.cur.at = at;\n    P.nx = chord(P);\n    passing(P.cur, P.nx);\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.fullT = 0;\n  P.fullT += d;\n  P.full = P.fullT \u003c 2.8 ? sm(0, 0.06, P.fullT) : 1 - sm(2.8, 3.6, P.fullT);\n\n  // Which pipes speak: each part's note, the octave above from the\n  // principals on, and with the reeds the octave below, the twelfth and the\n  // fifteenth.\n  const c = P.cur, pos = P.beat - c.at, r4 = 0.8 * sm(0.3, 0.55, s), r2 = 0.75 * sm(0.7, 0.92, s);\n  P.tgt.fill(0);\n  P.keys.fill(0);\n  if (!(c.last && pos > c.dur - 0.22))\n    for (let n = 0; n \u003c= nv; n++) {\n      const v = VORD[n], g = v \u003c 4 && c.pass[v] >= 0 && pos >= c.dur / 2 ? c.pass[v] : c.v[v];\n      if (g \u003c 0) continue;\n      P.tgt[g] = 1;\n      if (v !== 3) P.keys[g] = 1;\n      if (g + 7 \u003c NP) P.tgt[g + 7] = max(P.tgt[g + 7], r4);\n      if (g >= 7) P.tgt[g - 7] = max(P.tgt[g - 7], r2);\n      if (g + 11 \u003c NP) P.tgt[g + 11] = max(P.tgt[g + 11], r2);\n      if (g + 14 \u003c NP) P.tgt[g + 14] = max(P.tgt[g + 14], r2);\n    }\n  for (let i = 0; i \u003c NP; i++) {\n    const g = max(P.tgt[i], 0.9 * P.full);\n    if (g > 0.5 && P.on[i] \u003c 0.5) P.chiff[i] = 1;\n    P.on[i] = g;\n    P.amp[i] += (g - P.amp[i]) * (1 - exp(-d / (g > P.amp[i] ? 0.035 : 0.14)));\n    P.chiff[i] *= exp(-d / 0.18);\n  }\n  // Candles in the draught: as the tremulant shakes the wind they flicker\n  // harder and burn lower.\n  const fa = 0.05 + tr;\n  const fl = (ph) => 1 - 0.4 * fa + fa * (0.6 * sin(t * 7.1 + ph) + 0.45 * sin(t * 11.9 + 2 * ph) + 0.35 * sin(t * 4.3 + 3 * ph) * sin(t * 17.3));\n  P.fl = cl(fl(0), 0.1, 2);\n  P.fr = cl(fl(2.1), 0.1, 2);\n}\n\n// A stop's colour, u from the mouth (0) to the top (1).\nfunction stopCol(out, s, u, full) {\n  for (let n = 0; n \u003c 3; n++) {\n    const v = s \u003c 0.5 ? mix(FLUTE[n], PRIN[n], s * 2) : mix(PRIN[n], mix(REED0[n], REED1[n], min(1, u * 1.6)), s * 2 - 1);\n    out[n] = mix(v, FULL[n], full);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { A, F, day, cL, cR, lamp, t } = P;\n  // The case in daylight, candlelight and lamplight.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const dl = day[i], cn = cL[i] * P.fl + cR[i] * P.fr, lp = lamp[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = A[o + n] * (DAY[n] * dl + CAN[n] * cn + LAMP[n] * lp);\n  }\n  // The rose window's light, cast long and slow across the case.\n  const px = 32 + 17 * sin(t * 0.05 + P.ph1), py = 60 + 34 * sin(t * 0.031 + P.ph2), RX = 15, RY = 24;\n  const I0 = 0.65 * (0.8 + 0.2 * sin(t * 0.23 + P.ph1));\n  for (let y = max(0, floor(py - RY)); y \u003c= min(H - 1, py + RY); y++)\n    for (let x = max(0, floor(px - RX)); x \u003c= min(W - 1, px + RX); x++) {\n      const dx = (x + 0.5 - px) / RX, dy = (y + 0.5 - py) / RY, r = sqrt(dx * dx + dy * dy);\n      if (r >= 1) continue;\n      const a = atan2(dy, dx) / (2 * PI) + 0.5;\n      let c, lead;\n      if (r \u003c 0.2) (c = AMBER), (lead = r > 0.15);\n      else if (r \u003c 0.5) {\n        const q = a * 8;\n        (c = floor(q) & 1 ? RUBY : SAPH), (lead = q - floor(q) \u003c 0.1 || r \u003c 0.24);\n      } else {\n        const q = a * 16;\n        (c = ROSE[floor(q) & 3]), (lead = q - floor(q) \u003c 0.08 || r \u003c 0.54);\n      }\n      const kk = I0 * (lead ? 0.45 : 1) * sm(1, 0.82, r), o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * c[n] * kk;\n    }\n  // The pipes that speak: the mouth lights and a standing wave shimmers up\n  // the body, its bands creeping upward and wavering with the tremulant.\n  const s = P.s, tr = P.tr, gain = 240 * (0.8 + 0.4 * s), bands = 2 + 4 * s, floor0 = 0.45 - 0.25 * s;\n  // Many pipes at once light the case less each, or the chord drowns in its own light.\n  let ns = 0;\n  for (let i = 0; i \u003c NP; i++) ns += P.amp[i];\n  const spread = (1 - 0.6 * P.full) / (1 + 0.12 * max(0, ns - 2));\n  const trem = sin(2 * PI * 5.4 * t), tm = 1 - 0.9 * tr * (0.5 + 0.5 * trem), wob = 0.3 * tr * trem;\n  const col = [0, 0, 0];\n  for (let i = 0; i \u003c NP; i++) {\n    const am = P.amp[i];\n    if (am \u003c 0.004) continue;\n    const { x, w, top, m, mh, base } = PIPES[i];\n    const a = am * gain * tm, span = m - top, osc = 0.7 + 0.3 * cos(t * (5 + 0.6 * i) + i * 1.7);\n    const bm = max(bands, 5 * P.full), creep = 0.3 * t + i * 0.37;\n    // Its light on the polished tin and the gilt round it.\n    stopCol(col, s, 0.4, P.full);\n    const kb = am * tm * (0.22 + 0.5 * s) * spread * 255;\n    for (let y = max(0, top - 10); y \u003c min(H, base + 6); y++) {\n      const ly = kb * (y \u003c top ? exp((y - top) / 4) : y > m ? exp((m - y) / 7) : 1);\n      for (let xx = max(0, x - 16); xx \u003c min(W, x + w + 16); xx++) {\n        const dd = xx \u003c x ? x - xx : xx >= x + w ? xx - x - w + 1 : 0, lb = ly / (1 + dd * dd * 0.05), o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * col[n] * lb;\n      }\n    }\n    for (let y = top; y \u003c m; y++) {\n      const u = (m - 0.5 - y) / span;\n      const bv = abs(cos(PI * (bm * u - creep + wob))) ** 2.5 * osc;\n      const g = a * (0.75 + 0.25 * exp(-3 * u)) * (floor0 + (1 - floor0) * bv);\n      stopCol(col, s, u, P.full);\n      for (let j = -2; j \u003c w + 2; j++) {\n        const xx = x + j;\n        if (xx \u003c 0 || xx >= W) continue;\n        const cr = j \u003c 0 || j >= w ? (j === -1 || j === w ? 0.2 : 0.07) : 0.6 + 0.4 * sin((PI * (j + 0.5)) / w);\n        const o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += col[n] * g * cr;\n      }\n    }\n    // The mouth: hot in the slot, flaring as the pipe speaks, and a glow round it.\n    stopCol(col, s, 0, P.full);\n    const cx = x + w / 2, cy = m + mh / 2, hot = a * (0.8 + 1.1 * P.chiff[i]);\n    for (let y = m - 4; y \u003c= m + mh + 4; y++)\n      for (let xx = x - 3; xx \u003c x + w + 3; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const e = ((xx + 0.5 - cx) / (w / 2 + 1.2)) ** 2 + ((y + 0.5 - cy) / 2.6) ** 2;\n        if (e > 3) continue;\n        const slot = y >= m && y \u003c m + mh && xx > x && xx \u003c x + w - 1;\n        const o = (y * W + xx) * 3, k = slot ? hot * 2 : hot * 0.5 * exp(-e * 1.3);\n        for (let n = 0; n \u003c 3; n++) F[o + n] += mix(col[n], 1, slot ? 0.7 : 0.2) * k;\n      }\n  }\n  // The candle flames, each with a halo in the air round it.\n  for (const [x, f] of [[10, P.fl], [53, P.fr]]) {\n    for (let y = 92; y \u003c= 100; y++)\n      for (let xx = x - 3; xx \u003c= x + 3; xx++) {\n        const e = (xx - x) ** 2 + ((y - 96.5) * 0.8) ** 2, o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += CAN[n] * 0.45 * f * exp(-e / 3);\n      }\n    for (const [y, c, k] of [[97, [255, 250, 225], 1], [96, [255, 236, 160], min(1, f)], [95, [255, 190, 80], cl(f, 0, 1)], [94, [255, 120, 30], cl(f - 0.8, 0, 1)]]) {\n      const o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = max(F[o + n], c[n] * k);\n    }\n  }\n  // Keys held down on the manual.\n  for (let i = 0; i \u003c NP; i++)\n    if (P.keys[i] > 0)\n      for (let y = 121; y \u003c= 125; y++)\n        for (let x = 3 * (i + 1); x \u003c 3 * (i + 1) + 2; x++) {\n          const o = (y * W + x) * 3;\n          for (let n = 0; n \u003c 3; n++) F[o + n] *= y === 125 ? 0.35 : 0.6;\n        }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, knee(F[o]), knee(F[o + 1]), knee(F[o + 2]));\n}\n\n// Light past 180 rolls off towards 255, so a speaking pipe keeps its colour.\nfunction knee(v) {\n  return (v \u003c 180 ? v : 255 - 75 * exp(-(v - 180) / 75)) | 0;\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stops","min":0,"max":1,"about":"The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too."},{"name":"Tempo","min":0.2,"max":3,"about":"At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one."},{"name":"Voices","min":1,"max":6,"about":"How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord."},{"name":"Tremulant","min":0,"max":1,"about":"The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them."}],"start":[0,2,1,0.06],"measures":{"motion":0.1017,"detail":0.1071,"edges":0.5078,"complexity":2.0828,"coverage":0.7769,"colour":0.1713,"drift":0.0578},"knobResponse":[0.0627,0.0467,0.0469,0.0424]},{"slug":"plait","title":"Plait","family":"textile","round":15,"note":"세 가닥이 바깥 가닥부터 가운데 위로 넘어가며 땋여 내려가요. 밑으로 들어가는 가닥은 어둡고, 다 땋으면 리본을 묶고 다음 가닥이 내려와요. K3 이 일곱 가닥 납작 땋기까지 가요.","idea":"Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.","buttons":"K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.","code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","layer":{"id":"layer-plait","type":"code","name":"plait","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the strands' colours together, starting from teal, blue and magenta."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds."},{"name":"Strands","min":3,"max":7,"about":"3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge."},{"name":"Tension","min":0,"max":1,"about":"At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7."}],"start":[0,2,3,0.06],"measures":{"motion":1.0033,"detail":0.0467,"edges":0.1711,"complexity":1.4043,"coverage":0.7414,"colour":0.4415,"drift":0.2976},"knobResponse":[0.2929,0.2273,0.2358,0.2751]},{"slug":"player-piano","title":"Player Piano","family":"music","round":15,"note":"자동 피아노의 구멍 뚫린 종이 두루마리가 내려와요. 구멍이 트래커 바를 지날 때마다 발치의 건반이 눌려 빛나요. 곡은 패턴이 그 자리에서 지어서, 화음은 가로줄로, 펼친 화음은 사선으로 읽혀요.","idea":"A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.","buttons":"K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.","code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-player-piano","type":"code","name":"player-piano","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the parts together, starting from a gold tune over a blue bass."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210."},{"name":"Hands","min":2,"max":5,"about":"2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next."},{"name":"Pedal","min":0,"max":1,"about":"At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise."}],"start":[0,2,2,0.06],"measures":{"motion":0.3229,"detail":0.0822,"edges":0.6181,"complexity":0.1256,"coverage":0.9461,"colour":0.1765,"drift":0.0751},"knobResponse":[0.0626,0.0796,0.0519,0.0503]},{"slug":"pole-vault","title":"Pole Vault","family":"sport","round":26,"note":"밤 경기장에서 카메라가 장대를 든 선수를 따라 달리고, 활처럼 휜 장대를 타고 거꾸로 오른 선수가 패널 꼭대기 가까운 가로대를 넘어 매트에 떨어지면 심판이 흰 깃발이나 빨간 깃발을 들어요. K3 이 가로대를 5.00 m 에서 6.20 m 까지 올리고, 누르면 다음 선수가 바로 달려요.","idea":"A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.","buttons":"K1 tap sends the next vaulter down the runway now.","code":"// ===== Patternflow pattern =====\n// Title:   Pole Vault\n// Family:  sport\n// Idea:    A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the pole vault in athletics\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1\n//\n// Knob 1: Colour. The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour.\n// Knob 2: Speed. Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2.\n// Knob 3: Bar. The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses.\n// Knob 4: Wind. Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run.\n// Buttons: K1 tap sends the next vaulter down the runway now.\n\nconst W = 64, H = 128, N = W * H;\n// The runway (GY), the pole's tip in the box, 14 rows a metre. A point z LEDs\n// nearer the camera lands OBX right and OBY down. The standards stand XS past\n// the box, ZS either side; the mat starts at MAT0, MZ either side, MH tall.\nconst GY = 104, BOXY = GY + 2, PXM = 14, OBX = 0.55, OBY = 0.22, XS = 5, ZS = 13, MAT0 = 3, MZ = 11, MH = 9;\n// The camera's left edge on the bar, gravity at Speed 2, the body.\nconst CAMF = -26, G = 170, TORSO = 4.2, ARM = 5, LEG = 3.3, TACC = 0.7, TA = 1.25, PSI1 = 1.64;\nconst [SET, RUN, POLE, FLY, MAT] = [0, 1, 2, 3, 4];\n// The stands texture: CW columns that wrap, rows ST to 83.\nconst CW = 256, ST = 17, CH = 84 - ST;\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, asin, acos, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst lerp = (a, b, u) => a + (b - a) * u;\nconst rnd = () => Math.random();\n// A camera flash somewhere in the stands.\nconst flash = (t0) => ({ x: floor(rnd() * W), y: ST + 2 + floor(rnd() * 64), t0 });\nconst F = (n) => new Float32Array(n);\nconst hash = (a, b) => ((Math.imul(a * 7919 + b * 104729, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\nconst md = (a, m) => ((a % m) + m) % m;\nconst sc3 = (c, k, o = 0) => [c[0] * k + o, c[1] * k + o, c[2] * k + o];\nlet C = null;\nconst put = (x, y, c) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && C.set(c, (y * W + x) * 3);\n\n// Poses: [time, body angle, arm, near hip, near knee, far hip, far knee]. On\n// the pole the body rocks back to head-down (-PI); after the half turn it\n// goes on the other way, face down over the bar and onto the back.\nconst TAKE = [1.5, 1.6, -0.5, 0.3];\nconst VAULT = [[0, 0.08, 0.15, 1.5, 1.6, -0.5, 0.3], [0.2, -0.3, 0.25, 1.1, 1.3, 0.6, 0.2], [0.42, -1.25, 0.4, 2.1, 1.8, 2, 1.5], [0.62, -2.4, 0.9, 0.9, 0.5, 0.8, 0.4], [0.82, -3.05, 2.5, 0.2, 0.05, 0.15, 0.05], [1, -3.14, 0.35, 0.1, 0, 0.1, 0]];\nconst FLYK = [[0, PI, 0.35, 0.1, 0, 0.1, 0], [1, 1.39 * PI, 0.4, 0.7, 0.4, 0.6, 0.5], [1.4, 1.95 * PI, 0.5, 0.6, 0.3, 0.5, 0.4], [2, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8]];\nconst MATK = [[0, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8], [0.4, 2.5 * PI, 1.7, 0.8, 0.9, 0.7, 1], [0.95, 2 * PI + 0.15, 2.7, 1.5, 1.8, 1.4, 1.7]];\nfunction key(T, u, out) {\n  let j = 0;\n  while (j \u003c T.length - 2 && u > T[j + 1][0]) j++;\n  const a = T[j], b = T[j + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  for (let i = 1; i \u003c 7; i++) out[i - 1] = a[i] + (b[i] - a[i]) * f;\n  return out;\n}\n// How far below the hip the lower foot is, for a body leaning th.\nconst drop = (th, L) => LEG * max(cos(th - L[0]) + cos(th - L[0] + L[1]), cos(th - L[2]) + cos(th - L[2] + L[3]));\n\n// Built once: the stands, two LEDs a seat in rows three deep, aisles, empty\n// seats in the team colour, the upper tier in the roof's shadow; the glare.\nfunction build(S) {\n  const cr = F(CW * CH * 3), seat = F(CW * CH), glare = F(30 * 128);\n  for (let y = 0; y \u003c CH; y++) {\n    const lo = y + ST >= 52, ty = y + ST - (lo ? 52 : ST), band = ty % 3, tier = floor(ty / 3) + lo * 40;\n    const li = lo ? 0.62 + (0.38 * ty) / 31 : 0.3 + (0.42 * ty) / 29;\n    for (let x = 0, sn = 0; x \u003c CW; x++, sn = x >> 1) {\n      let c = x % 48 \u003c 2 ? [58, 58, 64] : [20, 20, 25];\n      if (x % 48 > 1 && band \u003c 2)\n        if (hash(sn, tier) > 0.8) (seat[y * CW + x] = (0.24 + 0.08 * band) * li), (c = [3, 3, 4]);\n        else c = band ? sc3(hsv(hash(sn * 3, tier), 0.55, 0.2 + 0.14 * hash(tier, sn)), 255) : x & 1 ? [14, 11, 10] : hash(sn, tier + 99) \u003c 0.5 ? [112, 78, 58] : [60, 42, 32];\n      cr.set(sc3(c, li), (y * CW + x) * 3);\n    }\n  }\n  for (let i = 0; i \u003c 30 * 128; i++) {\n    const dx = (i % 128) - 64, dy = floor(i / 128) - 3.5, d2 = dx * dx + dy * dy;\n    glare[i] = 70 * exp(-d2 / 16) + 30 * exp(-d2 / 110) + 30 * exp(-dy * dy / 1.5 - abs(dx) / 12);\n  }\n  Object.assign(S, { cr, seat, glare });\n}\n\nexport function setup(params) {\n  const S = { t: 0, ph: SET, pt: 0, tset: 1.95, n: 0, notch: 0, miss: 0, base: 5, by: 34, cam: CAMF, wind: 0, hk: 0.13, marks: [], hudF: 0, verdict: 0, done: 0 };\n  Object.assign(S, { clear: true, fig: null, free: null, flashes: [], C: F(N * 3), q: F(6) });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  build(S);\n  params.s = S;\n  newVaulter(S);\n}\n\n// Each vaulter wears a different kit; the stand lights take the opposite colour.\nconst newVaulter = (S) => (S.vo = [0, 0.36, 0.62][S.n++ % 3]);\nfunction colours(S) {\n  const hue = (S.hk + S.vo) % 1, cols = [sc3(hsv(hue, 0.82, 1), 245), sc3(hsv((hue + 0.5) % 1, 0.75, 0.8), 210), [232, 168, 128], [150, 100, 70]];\n  S.cols = cols.concat(cols.map((c) => sc3(c, 0.62)));\n  S.acc = hsv((S.hk + 0.5) % 1, 0.75, 1);\n  S.tint = sc3(S.acc, 0.5, 0.5);\n}\n\n// The cut to the runway: the takeoff spot is where a straight pole reaches\n// the box from hands held straight up.\nfunction startRun(S) {\n  if (S.ph === MAT) newVaulter(S);\n  const h = S.base + 0.1 * S.notch, Lg = 92.5 - GY + PXM * h, th = 0.08, hy = GY - drop(th, TAKE) - 0.8;\n  const px = TORSO * sin(th) + ARM * sin(th + 0.15), py = hy - TORSO * cos(th) - ARM * cos(th + 0.15);\n  const dx = sqrt(Lg * Lg - (BOXY - py) ** 2), D = 88 + 16 * (h - 5);\n  S.R = { Lg, D, dist: 0, Xto: -dx - px, hy, bto: -asin((BOXY - py) / Lg), psi0: atan2(BOXY - py, dx) };\n  Object.assign(S, { ph: RUN, pt: 0, clear: rnd() \u003c 0.72 - 0.08 * S.notch, wob: rnd() \u003c 0.5, free: null, verdict: 0, done: 0, cam: S.R.Xto - D - 16 });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  runPose(S);\n}\n\nfunction runPose(S) {\n  const R = S.R, rem = R.D - R.dist, X = R.Xto - rem, ph = (R.dist / 15) * PI + 0.6, e2 = sm(1 - rem / 15), L = [];\n  for (let i = 0; i \u003c 2; i++) L.push(0.2 + 0.7 * sin(ph + i * PI), 0.25 + 1.3 * max(0, cos(ph + i * PI + 0.9)));\n  for (let i = 0; i \u003c 4; i++) L[i] = lerp(L[i], TAKE[i], e2);\n  const th = lerp(0.16, 0.08, e2), hy = lerp(GY - drop(th, L) - 0.3, R.hy, e2), e = sm(1 - rem / 19);\n  // The pole tip drops over the last strides; then the top hand goes up as\n  // the tip slides into the box.\n  const p1x = lerp(X - 1, X + TORSO * sin(th) + ARM * sin(th + 0.15), e), p1y = lerp(hy - 0.5, hy - TORSO * cos(th) - ARM * cos(th + 0.15), e);\n  const beta = lerp(lerp(1.25 + 0.04 * sin(ph * 2), 0.12, sm((70 - rem) / 51)), R.bto, e), dx = cos(beta), dy = -sin(beta);\n  S.fig = { x: X, y: hy, th, fc: 1, L, hands: [p1x, p1y, p1x + 4.5 * dx, p1y + 4.5 * dy] };\n  S.pole = { x: p1x - 2.5 * dx, y: p1y - 2.5 * dy, x1: p1x + R.Lg * dx, y1: p1y + R.Lg * dy };\n}\n\n// The bent pole as an arc of length L from the box to the top hand.\nconst ARC = F(5);\nfunction arc(px, py, c, L) {\n  const r = cl(c / L, 0.3, 1);\n  let x = sqrt(6 * (1 - r)) + 1e-4;\n  for (let i = 0; i \u003c 5; i++) x = cl(x - (sin(x) - r * x) / (cos(x) - r), 1e-4, 1.56);\n  const R = L / (2 * x), d = R * cos(x), cx = px / 2 + ((py - BOXY) / c) * d, cy = (py + BOXY) / 2 - (px / c) * d, a0 = atan2(BOXY - cy, -cx);\n  ARC.set([cx, cy, R, a0, md(atan2(py - cy, px - cx) - a0 + PI, 2 * PI) - PI]);\n  return ARC;\n}\n\nfunction polePose(S) {\n  const R = S.R, u = min(1, S.pt / TA), L = R.Lg;\n  const c = L * (1 - 0.25 * sin(PI * min(1, u / 0.78)) ** 1.4), psi = R.psi0 + (PSI1 - R.psi0) * (1 - (1 - u) ** 1.6);\n  const p1x = -c * cos(psi), p1y = BOXY - c * sin(psi), q = key(VAULT, u, S.q), th = q[0], a = q[1];\n  const fc = cos(PI * sm((u - 0.66) / 0.24)), ux = sin(th), uy = -cos(th);\n  // Hang the body from the top hand; the bottom hand is 4.5 LEDs down the arc.\n  const ax = ux * cos(a) + cos(th) * fc * sin(a), ay = uy * cos(a) + sin(th) * fc * sin(a);\n  const A = arc(p1x, p1y, c, L), b = A[3] + (A[4] * (L - 4.5)) / L;\n  S.fig = { x: p1x - ARM * ax - TORSO * ux, y: p1y - ARM * ay - TORSO * uy, th, fc, L: q.slice(2), hands: [p1x, p1y, A[0] + A[2] * cos(b), A[1] + A[2] * sin(b)] };\n  S.pole = { c, L, px: p1x, py: p1y };\n}\n\nfunction matPose(S, tau) {\n  const q = key(MATK, tau, S.q), c = S.clear, e = sm((tau - (c ? 1.1 : 1.6)) / 0.3), w = max(0, tau - 1.9) * 20, s = sin(w * 0.4);\n  let L = q.slice(2).map((v) => v * (1 - e)), arms = [lerp(q[1], c ? 0.25 : 2.9, e), lerp(q[1] + 0.3, c ? 0.45 : 3.1, e)];\n  // Up with arms high and a hop if the bar stayed; then off to the right.\n  const Y = lerp(GY - MH - 1 + 0.6 * sm((tau - 0.4) / 0.5), GY - MH - 6.6 - 1.5 * c * abs(sin((tau - 1.1) * 9)) * (tau \u003c 1.9), e);\n  if (w) [L, arms] = [[0.5 * s, 0.4, -0.5 * s, 0.4], [PI - 0.4 * s, PI + 0.4 * s]];\n  S.fig = { x: S.lx + 2 * sm(tau / 0.5) + w, y: w ? GY - MH - 6.6 : Y, th: w ? 0.05 : lerp(q[0], 2 * PI, e), fc: w ? 1 : -1, L, arms };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06];\n  const st = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2, first = S.t === 0;\n  S.hk = (0.13 + cl(k[0], 0, 1)) % 1;\n  S.base = round(cl(k[2], 5, 6.2) * 20) / 20;\n  S.wind = cl(k[3], -1, 1);\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === SET || S.ph === MAT)) startRun(S);\n  S.pt += st;\n  const R = S.R, b = S.bar, tau = S.pt, tgt = GY - PXM * (S.base + 0.1 * S.notch);\n  if (first) S.by = tgt;\n  if (b.st !== 1 && b.st !== 3) S.by += (tgt - S.by) * min(1, st * 3);\n  if (S.ph > POLE) S.cam = CAMF;\n\n  if (S.ph === SET) {\n    [S.cam, S.fig] = [CAMF, null];\n    if (tau >= S.tset) startRun(S);\n  } else if (S.ph === RUN) {\n    R.dist = min(R.D, R.dist + 62 * (1 + 0.12 * S.wind) * min(1, 0.3 + tau / TACC) * st);\n    const rem = R.D - R.dist;\n    runPose(S);\n    S.cam = R.Xto - rem - lerp(16, 6, sm(1 - rem / 40));\n    if (rem \u003c= 0) [S.ph, S.pt, R.cam] = [POLE, 0, S.cam];\n  } else if (S.ph === POLE) {\n    polePose(S);\n    S.cam = lerp(R.cam, CAMF, sm(tau / TA / 0.75));\n    if (tau >= TA) {\n      // Let go: the hips fly on to just over the bar, or into it.\n      const f = S.fig, ya = S.by - (S.clear ? 3.5 : 0.3), tap = sqrt((2 * max(3, f.y - ya)) / G);\n      S.fl = { x: f.x, y: f.y, vx: cl((XS + 1 - f.x) / tap, 6, 30), vy: G * tap, tap, tf: sqrt((2 * max(10, GY - MH - 1.5 - ya)) / G) };\n      S.free = { a: PI / 2 - PSI1, w: 1.4, L: R.Lg + 2.5, amax: acos(2 / (R.Lg + 2.5)) };\n      [S.ph, S.pt] = [FLY, 0];\n    }\n  } else if (S.ph === FLY) {\n    const f = S.fl, X = f.x + f.vx * tau, Y = f.y - f.vy * tau + 0.5 * G * tau * tau;\n    const q = key(FLYK, tau \u003c f.tap ? tau / f.tap : 1 + (tau - f.tap) / f.tf, S.q);\n    S.fig = { x: X, y: Y, th: q[0], fc: -1, L: q.slice(2), arms: [q[1], q[1] + 0.25] };\n    // Every camera in the house goes off at the top, the two in the infield first.\n    if (!f.fl && (f.fl = tau >= f.tap - 0.05))\n      for (let i = 0; i \u003c 18; i++) S.flashes.push(i \u003c 2 ? { x: i * 36 + 20, y: 114 + i * 5, t0: S.t + i * 0.1 } : flash(S.t + rnd() * 0.6));\n    if (tau >= f.tap + 0.05 && b.st === 0 && (!S.clear || S.wob)) [b.st, b.t] = [S.clear ? 2 : 1, 0];\n    if (tau > f.tap && Y >= GY - MH - 1.5) Object.assign(S, { ph: MAT, pt: 0, lx: X });\n  } else if (S.ph === MAT) {\n    matPose(S, tau);\n    if (tau >= 0.5 && !S.verdict) [S.verdict, S.hudF, S.miss] = [2 - S.clear, 1, S.miss + !S.clear, S.marks.push(S.clear ? \"0\" : \"X\")];\n    // A clearance puts the bar up a notch; a third miss sends it back.\n    if (tau >= 1.6 && !S.done && (S.done = 1) && (S.clear || S.miss >= 3)) [S.marks, S.miss, S.notch] = [[], 0, S.clear && S.notch \u003c 6 ? S.notch + 1 : 0];\n    if (tau >= 2.3 && b.st === 3) b.st = 4;\n    if (tau >= 2.9) Object.assign(S, { ph: SET, pt: 0, tset: 0.7, free: null }), newVaulter(S), (b.st = 0);\n  }\n\n  // The pole, once let go, falls back about the box onto the runway.\n  const P = S.free;\n  if (P) {\n    P.w += ((3 * G) / (2 * P.L)) * sin(P.a) * st;\n    P.a += P.w * st;\n    if (P.a > P.amax) [P.a, P.w] = [P.amax, P.w > 0.6 ? -0.3 * P.w : 0];\n  }\n  // The bar shivers, and when it was hit it falls off the pegs onto the mat.\n  b.t += st;\n  if (b.st === 1 && b.t > 0.3) Object.assign(b, { st: 3, y: [S.by - OBY * ZS, S.by + OBY * ZS], v: [0, 0] });\n  for (let i = 0, fl; i \u003c 2 && b.st === 3; i++) {\n    if (b.t \u003c 0.3 + i * 0.08) continue;\n    b.y[i] += (b.v[i] += G * st) * st;\n    if (b.y[i] > (fl = GY - MH + OBY * MZ * (2 * i - 1) - 0.5)) [b.y[i], b.v[i]] = [fl, b.v[i] > 40 ? -0.3 * b.v[i] : 0];\n  }\n  S.hudF = max(0, S.hudF - st * 1.6);\n  S.flashes = S.flashes.filter((f) => S.t - f.t0 \u003c 0.2);\n  if (rnd() \u003c st * 0.8) S.flashes.push(flash(S.t));\n}\n\n// A figure, hip at (hx, hy): th turns the body clockwise from upright, fc\n// faces it right (1) or left (-1). Arms reach for the hands, or hang at angles.\nconst PART = F(96);\nfunction figure(S, hx, hy, th, fc, arms, L, hands, cols, sc) {\n  hx -= S.cam;\n  const ux = sin(th), uy = -cos(th), fx = cos(th) * fc, fy = sin(th) * fc, nx = hx + ux * TORSO * sc, ny = hy + uy * TORSO * sc;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => (PART.set([ax, ay, bx, by, r * sc, c], n), (n += 6));\n  const limb = (x, y, a, l) => [x + l * sc * (ux * cos(a) + fx * sin(a)), y + l * sc * (uy * cos(a) + fy * sin(a))];\n  // Far limbs first and in shade, then the body, then the near limbs.\n  for (let side = 1; side >= 0; side--) {\n    const [kx, ky] = limb(hx, hy, PI - L[side * 2], LEG), d = side * 4;\n    const [ax, ay] = limb(kx, ky, PI - L[side * 2] + L[side * 2 + 1], LEG);\n    const [wx, wy] = hands ? [hands[side * 2] - S.cam, hands[side * 2 + 1]] : limb(nx, ny, arms[side], ARM);\n    part(hx, hy, kx, ky, 0.85, 1 + d);\n    part(kx, ky, ax, ay, 0.62, 2 + d);\n    part(nx, ny, wx, wy, 0.55, 2 + d);\n    if (side) part(hx, hy, nx, ny, 1.05, 0), part(nx + ux * 1.7 * sc, ny + uy * 1.7 * sc, nx + ux * 1.8 * sc, ny + uy * 1.8 * sc, 1.25, 3);\n  }\n  let [x0, x1, y0, y1] = [99, -99, 999, -99];\n  for (let j = 0; j \u003c n; j += 6) [x0, x1, y0, y1] = [min(x0, PART[j], PART[j + 2]), max(x1, PART[j], PART[j + 2]), min(y0, PART[j + 1], PART[j + 3]), max(y1, PART[j + 1], PART[j + 3])];\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, ceil(y1 + 2)); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, ceil(x1 + 2)); x++) {\n      const px = x + 0.5, py = y + 0.5, i = y * W + x;\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j], ay = PART[j + 1], dx = PART[j + 2] - ax, dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const col = cols[PART[j + 5]];\n        for (let c = 0; c \u003c 3; c++) C[i * 3 + c] += (col[c] - C[i * 3 + c]) * a;\n      }\n    }\n}\n\n// The pole, two samples an LED, each shared over four LEDs.\nconst POLEC = [235, 232, 214];\nfunction splat(x, y) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1), w = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy), k = (yy * W + xx) * 3;\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let c = 0; c \u003c 3; c++) C[k + c] += (POLEC[c] - C[k + c]) * w;\n  }\n}\nfunction seg(x0, y0, x1, y1) {\n  for (let i = 0, n = ceil(Math.hypot(x1 - x0, y1 - y0) * 2) + 1; i \u003c= n; i++) splat(lerp(x0, x1, i / n), lerp(y0, y1, i / n));\n}\n\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, M: 0x5fed, X: 0x5aad, \".\": 4 };\nfunction text(s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(x + (j % 3), y + floor(j / 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\n// A photographer kneeling in the infield, lens up at the bar.\nconst SNAP = \"..oo.....oo.cc.####c.######..####...###...##.##..\";\n\n// Sky, roof, stands, LED ribbon, boards, track and grass, each panning by its depth.\nfunction back(S) {\n  const { cr, seat } = S, cam = S.cam, t = S.t, A = S.acc, T = S.tint, s0 = round(cam * 0.4), bx = cam * 0.85;\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) {\n      let r, g, b, v = -1;\n      if (y \u003c 13) (r = 5 + y), (g = 8 + 1.2 * y + 4 * T[1]), (b = 22 + 2 * y);\n      else if (y \u003c ST) {\n        if (y === 15 && md(s0 + x, 3) === 0) v = 190;\n        else r = g = b = y === 13 ? 46 : y === 16 ? 10 : 22;\n      } else if (y >= 46 && y \u003c 52) {\n        v = y > 46 && y \u003c 51 ? (md(floor((s0 + x + t * 12) / 2) * 7 + y, 11) \u003c 5 ? 210 : 50) : 14;\n      } else if (y \u003c 84) {\n        const i = (y - ST) * CW + md(s0 + x, CW), sw = seat[i] * 255;\n        (r = cr[i * 3] * T[0] + sw * A[0]), (g = cr[i * 3 + 1] * T[1] + sw * A[1]), (b = cr[i * 3 + 2] * T[2] + sw * A[2]);\n      } else if (y \u003c 92) {\n        const u = x + bx, sg = floor(u / 40), l = u - sg * 40, on = y > 85 && y \u003c 90 && hash(floor((l + t * 9) / 2) + sg * 50, y) \u003c 0.5;\n        if (l \u003c 1 || y === 91) r = g = b = 6;\n        else if (md(sg, 2) ? on : !on) v = on ? 150 : 55;\n        else r = g = b = on ? 150 : 8;\n      } else if (y \u003c 107) {\n        // The track, then the runway with white edges and metre marks.\n        const X = x + cam, li = y > 100 ? 1 : 0.55 + 0.03 * (y - 92), sp = hash(md(floor(X), 997), y) * 14;\n        if (y === 96 || y === 101 || y === 106 || (y === 105 && md(floor(X), 14) === 0)) r = g = b = 175 * li;\n        else (r = (140 + sp) * li), (g = (58 + sp * 0.4) * li), (b = (40 + sp * 0.3) * li);\n      } else {\n        // Infield grass in mown stripes.\n        const q = (md(floor((x + cam * 1.15 + (y - 107) * 1.3) / 11), 2) ? 0.78 : 1) * (1 - (y - 107) * 0.02);\n        (r = 24 * q), (g = 74 * q), (b = 32 * q);\n      }\n      if (v >= 0) (r = A[0] * v + (y \u003c ST) * 60), (g = A[1] * v + (y \u003c ST) * 60), (b = A[2] * v + (y \u003c ST) * 60);\n      C[j] = r;\n      C[j + 1] = g;\n      C[j + 2] = b;\n    }\n  // Floodlight towers above the roof, and flags streaming or hanging limp.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 1; y \u003c 13; y++)\n      for (let x = xi - 5; x \u003c= xi + 5; x++)\n        if (y \u003c 7) put(x, y, y > 1 && y \u003c 6 && (x - xi) % 2 === 0 && abs(x - xi) \u003c 5 ? [255, 244, 222] : [40, 42, 52]);\n        else if (x === xi) put(x, y, [34, 36, 46]);\n  }\n  const wd = S.wind, e = cl(abs(wd) * 1.4 + 0.25, 0, 1) * (wd \u003c 0 ? -1 : 1), a = abs(e);\n  for (let fx = 20 - md(s0, 32) - 32; fx \u003c W + 6; fx += 32)\n    for (let i = 0; i \u003c 22; i++)\n      if (i \u003c 7) put(fx, 6 + i, [110, 110, 118]);\n      else put(round(fx + e * (i % 5 + 1)), 6 + floor((i - 7) / 5) + round((i % 5 + 1) * ((1 - a) * 0.9 + sin(t * (5 + 7 * a) - i) * 0.12 * a)), i > 11 && i \u003c 17 ? [235, 235, 235] : sc3(A, 230));\n  // The photographers in the infield, and camera flashes going off.\n  for (let k = 0; k \u003c 2; k++) for (let r = 0; r \u003c 49; r++) if (SNAP[r] !== \".\") put(round(k * 36 - 16 - cam * 1.15) + (r % 7), 113 + k * 5 + floor(r / 7), SNAP[r] === \"#\" && r > 6 ? [12, 14, 20] : [48, 48, 56]);\n  for (const f of S.flashes) {\n    const a = 1 - (t - f.t0) / 0.2;\n    for (let i = 0; i \u003c 25 && a \u003c= 1; i++) {\n      const dx = (i % 5) - 2, dy = floor(i / 5) - 2, x = f.x + dx, d = abs(dx) + abs(dy), j = ((f.y + dy) * W + x) * 3;\n      const v = (d ? (d > 1 ? (f.y > 100 && dx * dy === 0 ? 120 : 0) : 150) : 255) * a;\n      if (x >= 0 && x \u003c W && v > 0) for (let c = 0; c \u003c 3; c++) C[j + c] = max(C[j + c], v);\n    }\n  }\n}\n\n// The mat from a little above: the top, the end facing the runway and the side\n// facing us. Then the box and its stop board.\nfunction mat(S) {\n  const cam = S.cam, top = GY - MH, xe = round(-cam);\n  for (let y = 89; y \u003c 108; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const py = y + 0.5, X0 = x + 0.5 + cam, z = (py - top) / OBY, X = X0 - OBX * z, Xf = X0 - OBX * MZ, zl = (X0 - MAT0) / OBX, v = 0.86 + 0.012 * z;\n      if (abs(z) \u003c= MZ && X >= MAT0) put(x, y, md(X, 16) \u003c 1 || z > MZ - 1 ? [110, 150, 250] : [44 * v, 98 * v, 232 * v]);\n      else if (Xf >= MAT0 && py >= top + OBY * MZ && py \u003c= GY + OBY * MZ) put(x, y, abs(py - GY + 0.6) \u003c 0.6 && md(Xf, 9) > 3 ? [215, 220, 235] : md(Xf, 18) \u003c 1 ? [18, 40, 120] : [30, 66, 176]);\n      else if (abs(zl) \u003c= MZ && py >= top + OBY * zl && py \u003c= GY + OBY * zl) put(x, y, [22, 50, 140]);\n    }\n  for (let x = xe - 7; x \u003c= xe; x++) for (let y = GY - 1; y \u003c= GY + 1; y++) put(x, y, x === xe ? [200, 200, 212] : y \u003c GY ? [90, 90, 100] : [10, 10, 14]);\n}\n\nfunction standard(S, z) {\n  const x = round(XS + OBX * z - S.cam), yb = round(GY + OBY * z), yt = round(S.by + OBY * z - 5), near = z > 0;\n  for (let y = yt; y \u003c= yb; y++) for (let w = 0; w \u003c 1 + near; w++) put(x + w, y, sc3([1, 1.02, 1.12], (near ? (w ? 120 : 175) : 100) * (y === yt ? 1.25 : 1)));\n  for (let w = -2; w \u003c= 2; w++) put(x + w, yb, [60, 60, 66]);\n  put(x + (near ? -1 : 1), round(S.by + OBY * z), [220, 220, 225]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const cam = S.cam, P = S.pole, b = S.bar;\n  C = S.C;\n  colours(S);\n  back(S);\n  standard(S, -ZS);\n  mat(S);\n\n  // The pole: carried, bent into an arc in the box, then let go.\n  if (S.ph === RUN) seg(P.x - cam, P.y, P.x1 - cam, P.y1);\n  else if (S.ph === POLE) {\n    const A = arc(P.px, P.py, P.c, P.L), n = ceil(P.L * 2), a = A[3] + A[4], s = A[4] > 0 ? 2.5 : -2.5, ex = A[0] + A[2] * cos(a) - cam, ey = A[1] + A[2] * sin(a);\n    for (let i = 0; i \u003c= n; i++) splat(A[0] + A[2] * cos(A[3] + (A[4] * i) / n) - cam, A[1] + A[2] * sin(A[3] + (A[4] * i) / n));\n    seg(ex, ey, ex - s * sin(a), ey + s * cos(a));\n  } else if (S.free) seg(-cam, BOXY, -cam - S.free.L * sin(S.free.a), BOXY - S.free.L * cos(S.free.a));\n\n  // The bar, striped, on its pegs or on its way down.\n  let [y0, y1] = [S.by - OBY * ZS, S.by + OBY * ZS];\n  const w = b.st === 1 || b.st === 2 ? sin(b.t * 48) * exp(-b.t * (b.st === 2 ? 5 : 2)) * 1.3 : 0;\n  if (b.st >= 3) [y0, y1] = b.y;\n  for (let i = 0; i \u003c= 36 && b.st !== 4; i++) put(floor(lerp(XS - OBX * ZS, XS + OBX * ZS, i / 36) - cam), floor(lerp(y0 + w, y1 + w * 0.6, i / 36)), floor(i / 5.2) % 2 ? [240, 240, 236] : sc3(S.acc, 120, 60));\n\n  // The vaulter, then the near upright in front.\n  const f = S.fig;\n  if (f) figure(S, f.x, f.y, f.th, f.fc, f.arms, f.L, f.hands, S.cols, 1);\n  standard(S, ZS);\n\n  // The judge by the box, a flag up once the bar has settled.\n  const up = S.ph === MAT && S.verdict && S.pt \u003c 2.6, jc = [[34, 50, 120], [70, 70, 82], [225, 165, 125], [40, 40, 44]];\n  figure(S, -13.2, 101.6, 0, 1, [up ? 0.2 : 2.9, 2.95], [0, 0, 0, 0], null, jc.concat(jc), 0.85);\n  for (let r = 0; r \u003c 9 && up; r++) put(round(-12.3 - cam) + (r % 3), 91 + floor(r / 3), S.verdict === 1 ? [245, 245, 245] : [235, 25, 25]);\n\n  // Glare from the lamp banks, over everything.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 0; y \u003c 30; y++)\n      for (let x = max(0, xi - 60), j = (y * W + x) * 3; x \u003c min(W, xi + 60); x++, j += 3) {\n        const v = S.glare[y * 128 + x - xi + 64];\n        C[j] += v;\n        C[j + 1] += v * 0.96;\n        C[j + 2] += v * 0.88;\n      }\n  }\n\n  // The results board: height, marks at it, the vaulter's colours.\n  const hc = S.verdict === 1 ? [255, 255, 255] : [255, 40, 40];\n  for (let y = 1; y \u003c 13; y++) for (let x = 39; x \u003c 63; x++) for (let c = 0, j = (y * W + x) * 3; c \u003c 3; c++) C[j + c] = y === 1 ? S.acc[c] * 230 : C[j + c] * 0.2 + [6, 10, 26][c] * 0.8 + hc[c] * S.hudF * 0.75;\n  text((S.base + 0.1 * S.notch).toFixed(2) + \"M\", 41, 3, [255, 180, 40]);\n  S.marks.slice(-3).forEach((m, i) => text(m, 41 + i * 4, 8, m === \"X\" ? [255, 50, 40] : [240, 240, 240]));\n  for (let r = 0; r \u003c 30; r++) put(55 + (r % 6), 8 + floor(r / 6), r \u003c 12 ? S.cols[0] : S.cols[1]);\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","layer":{"id":"layer-pole-vault","type":"code","name":"pole-vault","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pole Vault\n// Family:  sport\n// Idea:    A pole vault under night floodlights, seen from the side: the camera runs with the vaulter, the pole bends deep in the box, the vaulter swings up head-down, turns over a bar near the top of the panel and drops onto the blue mat as the judge raises a white or a red flag.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the pole vault in athletics\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1\n//\n// Knob 1: Colour. The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour.\n// Knob 2: Speed. Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2.\n// Knob 3: Bar. The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses.\n// Knob 4: Wind. Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run.\n// Buttons: K1 tap sends the next vaulter down the runway now.\n\nconst W = 64, H = 128, N = W * H;\n// The runway (GY), the pole's tip in the box, 14 rows a metre. A point z LEDs\n// nearer the camera lands OBX right and OBY down. The standards stand XS past\n// the box, ZS either side; the mat starts at MAT0, MZ either side, MH tall.\nconst GY = 104, BOXY = GY + 2, PXM = 14, OBX = 0.55, OBY = 0.22, XS = 5, ZS = 13, MAT0 = 3, MZ = 11, MH = 9;\n// The camera's left edge on the bar, gravity at Speed 2, the body.\nconst CAMF = -26, G = 170, TORSO = 4.2, ARM = 5, LEG = 3.3, TACC = 0.7, TA = 1.25, PSI1 = 1.64;\nconst [SET, RUN, POLE, FLY, MAT] = [0, 1, 2, 3, 4];\n// The stands texture: CW columns that wrap, rows ST to 83.\nconst CW = 256, ST = 17, CH = 84 - ST;\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, asin, acos, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst lerp = (a, b, u) => a + (b - a) * u;\nconst rnd = () => Math.random();\n// A camera flash somewhere in the stands.\nconst flash = (t0) => ({ x: floor(rnd() * W), y: ST + 2 + floor(rnd() * 64), t0 });\nconst F = (n) => new Float32Array(n);\nconst hash = (a, b) => ((Math.imul(a * 7919 + b * 104729, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\nconst md = (a, m) => ((a % m) + m) % m;\nconst sc3 = (c, k, o = 0) => [c[0] * k + o, c[1] * k + o, c[2] * k + o];\nlet C = null;\nconst put = (x, y, c) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && C.set(c, (y * W + x) * 3);\n\n// Poses: [time, body angle, arm, near hip, near knee, far hip, far knee]. On\n// the pole the body rocks back to head-down (-PI); after the half turn it\n// goes on the other way, face down over the bar and onto the back.\nconst TAKE = [1.5, 1.6, -0.5, 0.3];\nconst VAULT = [[0, 0.08, 0.15, 1.5, 1.6, -0.5, 0.3], [0.2, -0.3, 0.25, 1.1, 1.3, 0.6, 0.2], [0.42, -1.25, 0.4, 2.1, 1.8, 2, 1.5], [0.62, -2.4, 0.9, 0.9, 0.5, 0.8, 0.4], [0.82, -3.05, 2.5, 0.2, 0.05, 0.15, 0.05], [1, -3.14, 0.35, 0.1, 0, 0.1, 0]];\nconst FLYK = [[0, PI, 0.35, 0.1, 0, 0.1, 0], [1, 1.39 * PI, 0.4, 0.7, 0.4, 0.6, 0.5], [1.4, 1.95 * PI, 0.5, 0.6, 0.3, 0.5, 0.4], [2, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8]];\nconst MATK = [[0, 2.45 * PI, 1.5, 1.2, 0.6, 1, 0.8], [0.4, 2.5 * PI, 1.7, 0.8, 0.9, 0.7, 1], [0.95, 2 * PI + 0.15, 2.7, 1.5, 1.8, 1.4, 1.7]];\nfunction key(T, u, out) {\n  let j = 0;\n  while (j \u003c T.length - 2 && u > T[j + 1][0]) j++;\n  const a = T[j], b = T[j + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  for (let i = 1; i \u003c 7; i++) out[i - 1] = a[i] + (b[i] - a[i]) * f;\n  return out;\n}\n// How far below the hip the lower foot is, for a body leaning th.\nconst drop = (th, L) => LEG * max(cos(th - L[0]) + cos(th - L[0] + L[1]), cos(th - L[2]) + cos(th - L[2] + L[3]));\n\n// Built once: the stands, two LEDs a seat in rows three deep, aisles, empty\n// seats in the team colour, the upper tier in the roof's shadow; the glare.\nfunction build(S) {\n  const cr = F(CW * CH * 3), seat = F(CW * CH), glare = F(30 * 128);\n  for (let y = 0; y \u003c CH; y++) {\n    const lo = y + ST >= 52, ty = y + ST - (lo ? 52 : ST), band = ty % 3, tier = floor(ty / 3) + lo * 40;\n    const li = lo ? 0.62 + (0.38 * ty) / 31 : 0.3 + (0.42 * ty) / 29;\n    for (let x = 0, sn = 0; x \u003c CW; x++, sn = x >> 1) {\n      let c = x % 48 \u003c 2 ? [58, 58, 64] : [20, 20, 25];\n      if (x % 48 > 1 && band \u003c 2)\n        if (hash(sn, tier) > 0.8) (seat[y * CW + x] = (0.24 + 0.08 * band) * li), (c = [3, 3, 4]);\n        else c = band ? sc3(hsv(hash(sn * 3, tier), 0.55, 0.2 + 0.14 * hash(tier, sn)), 255) : x & 1 ? [14, 11, 10] : hash(sn, tier + 99) \u003c 0.5 ? [112, 78, 58] : [60, 42, 32];\n      cr.set(sc3(c, li), (y * CW + x) * 3);\n    }\n  }\n  for (let i = 0; i \u003c 30 * 128; i++) {\n    const dx = (i % 128) - 64, dy = floor(i / 128) - 3.5, d2 = dx * dx + dy * dy;\n    glare[i] = 70 * exp(-d2 / 16) + 30 * exp(-d2 / 110) + 30 * exp(-dy * dy / 1.5 - abs(dx) / 12);\n  }\n  Object.assign(S, { cr, seat, glare });\n}\n\nexport function setup(params) {\n  const S = { t: 0, ph: SET, pt: 0, tset: 1.95, n: 0, notch: 0, miss: 0, base: 5, by: 34, cam: CAMF, wind: 0, hk: 0.13, marks: [], hudF: 0, verdict: 0, done: 0 };\n  Object.assign(S, { clear: true, fig: null, free: null, flashes: [], C: F(N * 3), q: F(6) });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  build(S);\n  params.s = S;\n  newVaulter(S);\n}\n\n// Each vaulter wears a different kit; the stand lights take the opposite colour.\nconst newVaulter = (S) => (S.vo = [0, 0.36, 0.62][S.n++ % 3]);\nfunction colours(S) {\n  const hue = (S.hk + S.vo) % 1, cols = [sc3(hsv(hue, 0.82, 1), 245), sc3(hsv((hue + 0.5) % 1, 0.75, 0.8), 210), [232, 168, 128], [150, 100, 70]];\n  S.cols = cols.concat(cols.map((c) => sc3(c, 0.62)));\n  S.acc = hsv((S.hk + 0.5) % 1, 0.75, 1);\n  S.tint = sc3(S.acc, 0.5, 0.5);\n}\n\n// The cut to the runway: the takeoff spot is where a straight pole reaches\n// the box from hands held straight up.\nfunction startRun(S) {\n  if (S.ph === MAT) newVaulter(S);\n  const h = S.base + 0.1 * S.notch, Lg = 92.5 - GY + PXM * h, th = 0.08, hy = GY - drop(th, TAKE) - 0.8;\n  const px = TORSO * sin(th) + ARM * sin(th + 0.15), py = hy - TORSO * cos(th) - ARM * cos(th + 0.15);\n  const dx = sqrt(Lg * Lg - (BOXY - py) ** 2), D = 88 + 16 * (h - 5);\n  S.R = { Lg, D, dist: 0, Xto: -dx - px, hy, bto: -asin((BOXY - py) / Lg), psi0: atan2(BOXY - py, dx) };\n  Object.assign(S, { ph: RUN, pt: 0, clear: rnd() \u003c 0.72 - 0.08 * S.notch, wob: rnd() \u003c 0.5, free: null, verdict: 0, done: 0, cam: S.R.Xto - D - 16 });\n  S.bar = { st: 0, t: 0, y: [0, 0], v: [0, 0] };\n  runPose(S);\n}\n\nfunction runPose(S) {\n  const R = S.R, rem = R.D - R.dist, X = R.Xto - rem, ph = (R.dist / 15) * PI + 0.6, e2 = sm(1 - rem / 15), L = [];\n  for (let i = 0; i \u003c 2; i++) L.push(0.2 + 0.7 * sin(ph + i * PI), 0.25 + 1.3 * max(0, cos(ph + i * PI + 0.9)));\n  for (let i = 0; i \u003c 4; i++) L[i] = lerp(L[i], TAKE[i], e2);\n  const th = lerp(0.16, 0.08, e2), hy = lerp(GY - drop(th, L) - 0.3, R.hy, e2), e = sm(1 - rem / 19);\n  // The pole tip drops over the last strides; then the top hand goes up as\n  // the tip slides into the box.\n  const p1x = lerp(X - 1, X + TORSO * sin(th) + ARM * sin(th + 0.15), e), p1y = lerp(hy - 0.5, hy - TORSO * cos(th) - ARM * cos(th + 0.15), e);\n  const beta = lerp(lerp(1.25 + 0.04 * sin(ph * 2), 0.12, sm((70 - rem) / 51)), R.bto, e), dx = cos(beta), dy = -sin(beta);\n  S.fig = { x: X, y: hy, th, fc: 1, L, hands: [p1x, p1y, p1x + 4.5 * dx, p1y + 4.5 * dy] };\n  S.pole = { x: p1x - 2.5 * dx, y: p1y - 2.5 * dy, x1: p1x + R.Lg * dx, y1: p1y + R.Lg * dy };\n}\n\n// The bent pole as an arc of length L from the box to the top hand.\nconst ARC = F(5);\nfunction arc(px, py, c, L) {\n  const r = cl(c / L, 0.3, 1);\n  let x = sqrt(6 * (1 - r)) + 1e-4;\n  for (let i = 0; i \u003c 5; i++) x = cl(x - (sin(x) - r * x) / (cos(x) - r), 1e-4, 1.56);\n  const R = L / (2 * x), d = R * cos(x), cx = px / 2 + ((py - BOXY) / c) * d, cy = (py + BOXY) / 2 - (px / c) * d, a0 = atan2(BOXY - cy, -cx);\n  ARC.set([cx, cy, R, a0, md(atan2(py - cy, px - cx) - a0 + PI, 2 * PI) - PI]);\n  return ARC;\n}\n\nfunction polePose(S) {\n  const R = S.R, u = min(1, S.pt / TA), L = R.Lg;\n  const c = L * (1 - 0.25 * sin(PI * min(1, u / 0.78)) ** 1.4), psi = R.psi0 + (PSI1 - R.psi0) * (1 - (1 - u) ** 1.6);\n  const p1x = -c * cos(psi), p1y = BOXY - c * sin(psi), q = key(VAULT, u, S.q), th = q[0], a = q[1];\n  const fc = cos(PI * sm((u - 0.66) / 0.24)), ux = sin(th), uy = -cos(th);\n  // Hang the body from the top hand; the bottom hand is 4.5 LEDs down the arc.\n  const ax = ux * cos(a) + cos(th) * fc * sin(a), ay = uy * cos(a) + sin(th) * fc * sin(a);\n  const A = arc(p1x, p1y, c, L), b = A[3] + (A[4] * (L - 4.5)) / L;\n  S.fig = { x: p1x - ARM * ax - TORSO * ux, y: p1y - ARM * ay - TORSO * uy, th, fc, L: q.slice(2), hands: [p1x, p1y, A[0] + A[2] * cos(b), A[1] + A[2] * sin(b)] };\n  S.pole = { c, L, px: p1x, py: p1y };\n}\n\nfunction matPose(S, tau) {\n  const q = key(MATK, tau, S.q), c = S.clear, e = sm((tau - (c ? 1.1 : 1.6)) / 0.3), w = max(0, tau - 1.9) * 20, s = sin(w * 0.4);\n  let L = q.slice(2).map((v) => v * (1 - e)), arms = [lerp(q[1], c ? 0.25 : 2.9, e), lerp(q[1] + 0.3, c ? 0.45 : 3.1, e)];\n  // Up with arms high and a hop if the bar stayed; then off to the right.\n  const Y = lerp(GY - MH - 1 + 0.6 * sm((tau - 0.4) / 0.5), GY - MH - 6.6 - 1.5 * c * abs(sin((tau - 1.1) * 9)) * (tau \u003c 1.9), e);\n  if (w) [L, arms] = [[0.5 * s, 0.4, -0.5 * s, 0.4], [PI - 0.4 * s, PI + 0.4 * s]];\n  S.fig = { x: S.lx + 2 * sm(tau / 0.5) + w, y: w ? GY - MH - 6.6 : Y, th: w ? 0.05 : lerp(q[0], 2 * PI, e), fc: w ? 1 : -1, L, arms };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06];\n  const st = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2, first = S.t === 0;\n  S.hk = (0.13 + cl(k[0], 0, 1)) % 1;\n  S.base = round(cl(k[2], 5, 6.2) * 20) / 20;\n  S.wind = cl(k[3], -1, 1);\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0] && (S.ph === SET || S.ph === MAT)) startRun(S);\n  S.pt += st;\n  const R = S.R, b = S.bar, tau = S.pt, tgt = GY - PXM * (S.base + 0.1 * S.notch);\n  if (first) S.by = tgt;\n  if (b.st !== 1 && b.st !== 3) S.by += (tgt - S.by) * min(1, st * 3);\n  if (S.ph > POLE) S.cam = CAMF;\n\n  if (S.ph === SET) {\n    [S.cam, S.fig] = [CAMF, null];\n    if (tau >= S.tset) startRun(S);\n  } else if (S.ph === RUN) {\n    R.dist = min(R.D, R.dist + 62 * (1 + 0.12 * S.wind) * min(1, 0.3 + tau / TACC) * st);\n    const rem = R.D - R.dist;\n    runPose(S);\n    S.cam = R.Xto - rem - lerp(16, 6, sm(1 - rem / 40));\n    if (rem \u003c= 0) [S.ph, S.pt, R.cam] = [POLE, 0, S.cam];\n  } else if (S.ph === POLE) {\n    polePose(S);\n    S.cam = lerp(R.cam, CAMF, sm(tau / TA / 0.75));\n    if (tau >= TA) {\n      // Let go: the hips fly on to just over the bar, or into it.\n      const f = S.fig, ya = S.by - (S.clear ? 3.5 : 0.3), tap = sqrt((2 * max(3, f.y - ya)) / G);\n      S.fl = { x: f.x, y: f.y, vx: cl((XS + 1 - f.x) / tap, 6, 30), vy: G * tap, tap, tf: sqrt((2 * max(10, GY - MH - 1.5 - ya)) / G) };\n      S.free = { a: PI / 2 - PSI1, w: 1.4, L: R.Lg + 2.5, amax: acos(2 / (R.Lg + 2.5)) };\n      [S.ph, S.pt] = [FLY, 0];\n    }\n  } else if (S.ph === FLY) {\n    const f = S.fl, X = f.x + f.vx * tau, Y = f.y - f.vy * tau + 0.5 * G * tau * tau;\n    const q = key(FLYK, tau \u003c f.tap ? tau / f.tap : 1 + (tau - f.tap) / f.tf, S.q);\n    S.fig = { x: X, y: Y, th: q[0], fc: -1, L: q.slice(2), arms: [q[1], q[1] + 0.25] };\n    // Every camera in the house goes off at the top, the two in the infield first.\n    if (!f.fl && (f.fl = tau >= f.tap - 0.05))\n      for (let i = 0; i \u003c 18; i++) S.flashes.push(i \u003c 2 ? { x: i * 36 + 20, y: 114 + i * 5, t0: S.t + i * 0.1 } : flash(S.t + rnd() * 0.6));\n    if (tau >= f.tap + 0.05 && b.st === 0 && (!S.clear || S.wob)) [b.st, b.t] = [S.clear ? 2 : 1, 0];\n    if (tau > f.tap && Y >= GY - MH - 1.5) Object.assign(S, { ph: MAT, pt: 0, lx: X });\n  } else if (S.ph === MAT) {\n    matPose(S, tau);\n    if (tau >= 0.5 && !S.verdict) [S.verdict, S.hudF, S.miss] = [2 - S.clear, 1, S.miss + !S.clear, S.marks.push(S.clear ? \"0\" : \"X\")];\n    // A clearance puts the bar up a notch; a third miss sends it back.\n    if (tau >= 1.6 && !S.done && (S.done = 1) && (S.clear || S.miss >= 3)) [S.marks, S.miss, S.notch] = [[], 0, S.clear && S.notch \u003c 6 ? S.notch + 1 : 0];\n    if (tau >= 2.3 && b.st === 3) b.st = 4;\n    if (tau >= 2.9) Object.assign(S, { ph: SET, pt: 0, tset: 0.7, free: null }), newVaulter(S), (b.st = 0);\n  }\n\n  // The pole, once let go, falls back about the box onto the runway.\n  const P = S.free;\n  if (P) {\n    P.w += ((3 * G) / (2 * P.L)) * sin(P.a) * st;\n    P.a += P.w * st;\n    if (P.a > P.amax) [P.a, P.w] = [P.amax, P.w > 0.6 ? -0.3 * P.w : 0];\n  }\n  // The bar shivers, and when it was hit it falls off the pegs onto the mat.\n  b.t += st;\n  if (b.st === 1 && b.t > 0.3) Object.assign(b, { st: 3, y: [S.by - OBY * ZS, S.by + OBY * ZS], v: [0, 0] });\n  for (let i = 0, fl; i \u003c 2 && b.st === 3; i++) {\n    if (b.t \u003c 0.3 + i * 0.08) continue;\n    b.y[i] += (b.v[i] += G * st) * st;\n    if (b.y[i] > (fl = GY - MH + OBY * MZ * (2 * i - 1) - 0.5)) [b.y[i], b.v[i]] = [fl, b.v[i] > 40 ? -0.3 * b.v[i] : 0];\n  }\n  S.hudF = max(0, S.hudF - st * 1.6);\n  S.flashes = S.flashes.filter((f) => S.t - f.t0 \u003c 0.2);\n  if (rnd() \u003c st * 0.8) S.flashes.push(flash(S.t));\n}\n\n// A figure, hip at (hx, hy): th turns the body clockwise from upright, fc\n// faces it right (1) or left (-1). Arms reach for the hands, or hang at angles.\nconst PART = F(96);\nfunction figure(S, hx, hy, th, fc, arms, L, hands, cols, sc) {\n  hx -= S.cam;\n  const ux = sin(th), uy = -cos(th), fx = cos(th) * fc, fy = sin(th) * fc, nx = hx + ux * TORSO * sc, ny = hy + uy * TORSO * sc;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => (PART.set([ax, ay, bx, by, r * sc, c], n), (n += 6));\n  const limb = (x, y, a, l) => [x + l * sc * (ux * cos(a) + fx * sin(a)), y + l * sc * (uy * cos(a) + fy * sin(a))];\n  // Far limbs first and in shade, then the body, then the near limbs.\n  for (let side = 1; side >= 0; side--) {\n    const [kx, ky] = limb(hx, hy, PI - L[side * 2], LEG), d = side * 4;\n    const [ax, ay] = limb(kx, ky, PI - L[side * 2] + L[side * 2 + 1], LEG);\n    const [wx, wy] = hands ? [hands[side * 2] - S.cam, hands[side * 2 + 1]] : limb(nx, ny, arms[side], ARM);\n    part(hx, hy, kx, ky, 0.85, 1 + d);\n    part(kx, ky, ax, ay, 0.62, 2 + d);\n    part(nx, ny, wx, wy, 0.55, 2 + d);\n    if (side) part(hx, hy, nx, ny, 1.05, 0), part(nx + ux * 1.7 * sc, ny + uy * 1.7 * sc, nx + ux * 1.8 * sc, ny + uy * 1.8 * sc, 1.25, 3);\n  }\n  let [x0, x1, y0, y1] = [99, -99, 999, -99];\n  for (let j = 0; j \u003c n; j += 6) [x0, x1, y0, y1] = [min(x0, PART[j], PART[j + 2]), max(x1, PART[j], PART[j + 2]), min(y0, PART[j + 1], PART[j + 3]), max(y1, PART[j + 1], PART[j + 3])];\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, ceil(y1 + 2)); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, ceil(x1 + 2)); x++) {\n      const px = x + 0.5, py = y + 0.5, i = y * W + x;\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j], ay = PART[j + 1], dx = PART[j + 2] - ax, dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const col = cols[PART[j + 5]];\n        for (let c = 0; c \u003c 3; c++) C[i * 3 + c] += (col[c] - C[i * 3 + c]) * a;\n      }\n    }\n}\n\n// The pole, two samples an LED, each shared over four LEDs.\nconst POLEC = [235, 232, 214];\nfunction splat(x, y) {\n  const ix = floor(x - 0.5), iy = floor(y - 0.5), fx = x - 0.5 - ix, fy = y - 0.5 - iy;\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = ix + (j & 1), yy = iy + (j >> 1), w = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy), k = (yy * W + xx) * 3;\n    if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H) for (let c = 0; c \u003c 3; c++) C[k + c] += (POLEC[c] - C[k + c]) * w;\n  }\n}\nfunction seg(x0, y0, x1, y1) {\n  for (let i = 0, n = ceil(Math.hypot(x1 - x0, y1 - y0) * 2) + 1; i \u003c= n; i++) splat(lerp(x0, x1, i / n), lerp(y0, y1, i / n));\n}\n\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, M: 0x5fed, X: 0x5aad, \".\": 4 };\nfunction text(s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(x + (j % 3), y + floor(j / 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\n// A photographer kneeling in the infield, lens up at the bar.\nconst SNAP = \"..oo.....oo.cc.####c.######..####...###...##.##..\";\n\n// Sky, roof, stands, LED ribbon, boards, track and grass, each panning by its depth.\nfunction back(S) {\n  const { cr, seat } = S, cam = S.cam, t = S.t, A = S.acc, T = S.tint, s0 = round(cam * 0.4), bx = cam * 0.85;\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) {\n      let r, g, b, v = -1;\n      if (y \u003c 13) (r = 5 + y), (g = 8 + 1.2 * y + 4 * T[1]), (b = 22 + 2 * y);\n      else if (y \u003c ST) {\n        if (y === 15 && md(s0 + x, 3) === 0) v = 190;\n        else r = g = b = y === 13 ? 46 : y === 16 ? 10 : 22;\n      } else if (y >= 46 && y \u003c 52) {\n        v = y > 46 && y \u003c 51 ? (md(floor((s0 + x + t * 12) / 2) * 7 + y, 11) \u003c 5 ? 210 : 50) : 14;\n      } else if (y \u003c 84) {\n        const i = (y - ST) * CW + md(s0 + x, CW), sw = seat[i] * 255;\n        (r = cr[i * 3] * T[0] + sw * A[0]), (g = cr[i * 3 + 1] * T[1] + sw * A[1]), (b = cr[i * 3 + 2] * T[2] + sw * A[2]);\n      } else if (y \u003c 92) {\n        const u = x + bx, sg = floor(u / 40), l = u - sg * 40, on = y > 85 && y \u003c 90 && hash(floor((l + t * 9) / 2) + sg * 50, y) \u003c 0.5;\n        if (l \u003c 1 || y === 91) r = g = b = 6;\n        else if (md(sg, 2) ? on : !on) v = on ? 150 : 55;\n        else r = g = b = on ? 150 : 8;\n      } else if (y \u003c 107) {\n        // The track, then the runway with white edges and metre marks.\n        const X = x + cam, li = y > 100 ? 1 : 0.55 + 0.03 * (y - 92), sp = hash(md(floor(X), 997), y) * 14;\n        if (y === 96 || y === 101 || y === 106 || (y === 105 && md(floor(X), 14) === 0)) r = g = b = 175 * li;\n        else (r = (140 + sp) * li), (g = (58 + sp * 0.4) * li), (b = (40 + sp * 0.3) * li);\n      } else {\n        // Infield grass in mown stripes.\n        const q = (md(floor((x + cam * 1.15 + (y - 107) * 1.3) / 11), 2) ? 0.78 : 1) * (1 - (y - 107) * 0.02);\n        (r = 24 * q), (g = 74 * q), (b = 32 * q);\n      }\n      if (v >= 0) (r = A[0] * v + (y \u003c ST) * 60), (g = A[1] * v + (y \u003c ST) * 60), (b = A[2] * v + (y \u003c ST) * 60);\n      C[j] = r;\n      C[j + 1] = g;\n      C[j + 2] = b;\n    }\n  // Floodlight towers above the roof, and flags streaming or hanging limp.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 1; y \u003c 13; y++)\n      for (let x = xi - 5; x \u003c= xi + 5; x++)\n        if (y \u003c 7) put(x, y, y > 1 && y \u003c 6 && (x - xi) % 2 === 0 && abs(x - xi) \u003c 5 ? [255, 244, 222] : [40, 42, 52]);\n        else if (x === xi) put(x, y, [34, 36, 46]);\n  }\n  const wd = S.wind, e = cl(abs(wd) * 1.4 + 0.25, 0, 1) * (wd \u003c 0 ? -1 : 1), a = abs(e);\n  for (let fx = 20 - md(s0, 32) - 32; fx \u003c W + 6; fx += 32)\n    for (let i = 0; i \u003c 22; i++)\n      if (i \u003c 7) put(fx, 6 + i, [110, 110, 118]);\n      else put(round(fx + e * (i % 5 + 1)), 6 + floor((i - 7) / 5) + round((i % 5 + 1) * ((1 - a) * 0.9 + sin(t * (5 + 7 * a) - i) * 0.12 * a)), i > 11 && i \u003c 17 ? [235, 235, 235] : sc3(A, 230));\n  // The photographers in the infield, and camera flashes going off.\n  for (let k = 0; k \u003c 2; k++) for (let r = 0; r \u003c 49; r++) if (SNAP[r] !== \".\") put(round(k * 36 - 16 - cam * 1.15) + (r % 7), 113 + k * 5 + floor(r / 7), SNAP[r] === \"#\" && r > 6 ? [12, 14, 20] : [48, 48, 56]);\n  for (const f of S.flashes) {\n    const a = 1 - (t - f.t0) / 0.2;\n    for (let i = 0; i \u003c 25 && a \u003c= 1; i++) {\n      const dx = (i % 5) - 2, dy = floor(i / 5) - 2, x = f.x + dx, d = abs(dx) + abs(dy), j = ((f.y + dy) * W + x) * 3;\n      const v = (d ? (d > 1 ? (f.y > 100 && dx * dy === 0 ? 120 : 0) : 150) : 255) * a;\n      if (x >= 0 && x \u003c W && v > 0) for (let c = 0; c \u003c 3; c++) C[j + c] = max(C[j + c], v);\n    }\n  }\n}\n\n// The mat from a little above: the top, the end facing the runway and the side\n// facing us. Then the box and its stop board.\nfunction mat(S) {\n  const cam = S.cam, top = GY - MH, xe = round(-cam);\n  for (let y = 89; y \u003c 108; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const py = y + 0.5, X0 = x + 0.5 + cam, z = (py - top) / OBY, X = X0 - OBX * z, Xf = X0 - OBX * MZ, zl = (X0 - MAT0) / OBX, v = 0.86 + 0.012 * z;\n      if (abs(z) \u003c= MZ && X >= MAT0) put(x, y, md(X, 16) \u003c 1 || z > MZ - 1 ? [110, 150, 250] : [44 * v, 98 * v, 232 * v]);\n      else if (Xf >= MAT0 && py >= top + OBY * MZ && py \u003c= GY + OBY * MZ) put(x, y, abs(py - GY + 0.6) \u003c 0.6 && md(Xf, 9) > 3 ? [215, 220, 235] : md(Xf, 18) \u003c 1 ? [18, 40, 120] : [30, 66, 176]);\n      else if (abs(zl) \u003c= MZ && py >= top + OBY * zl && py \u003c= GY + OBY * zl) put(x, y, [22, 50, 140]);\n    }\n  for (let x = xe - 7; x \u003c= xe; x++) for (let y = GY - 1; y \u003c= GY + 1; y++) put(x, y, x === xe ? [200, 200, 212] : y \u003c GY ? [90, 90, 100] : [10, 10, 14]);\n}\n\nfunction standard(S, z) {\n  const x = round(XS + OBX * z - S.cam), yb = round(GY + OBY * z), yt = round(S.by + OBY * z - 5), near = z > 0;\n  for (let y = yt; y \u003c= yb; y++) for (let w = 0; w \u003c 1 + near; w++) put(x + w, y, sc3([1, 1.02, 1.12], (near ? (w ? 120 : 175) : 100) * (y === yt ? 1.25 : 1)));\n  for (let w = -2; w \u003c= 2; w++) put(x + w, yb, [60, 60, 66]);\n  put(x + (near ? -1 : 1), round(S.by + OBY * z), [220, 220, 225]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const cam = S.cam, P = S.pole, b = S.bar;\n  C = S.C;\n  colours(S);\n  back(S);\n  standard(S, -ZS);\n  mat(S);\n\n  // The pole: carried, bent into an arc in the box, then let go.\n  if (S.ph === RUN) seg(P.x - cam, P.y, P.x1 - cam, P.y1);\n  else if (S.ph === POLE) {\n    const A = arc(P.px, P.py, P.c, P.L), n = ceil(P.L * 2), a = A[3] + A[4], s = A[4] > 0 ? 2.5 : -2.5, ex = A[0] + A[2] * cos(a) - cam, ey = A[1] + A[2] * sin(a);\n    for (let i = 0; i \u003c= n; i++) splat(A[0] + A[2] * cos(A[3] + (A[4] * i) / n) - cam, A[1] + A[2] * sin(A[3] + (A[4] * i) / n));\n    seg(ex, ey, ex - s * sin(a), ey + s * cos(a));\n  } else if (S.free) seg(-cam, BOXY, -cam - S.free.L * sin(S.free.a), BOXY - S.free.L * cos(S.free.a));\n\n  // The bar, striped, on its pegs or on its way down.\n  let [y0, y1] = [S.by - OBY * ZS, S.by + OBY * ZS];\n  const w = b.st === 1 || b.st === 2 ? sin(b.t * 48) * exp(-b.t * (b.st === 2 ? 5 : 2)) * 1.3 : 0;\n  if (b.st >= 3) [y0, y1] = b.y;\n  for (let i = 0; i \u003c= 36 && b.st !== 4; i++) put(floor(lerp(XS - OBX * ZS, XS + OBX * ZS, i / 36) - cam), floor(lerp(y0 + w, y1 + w * 0.6, i / 36)), floor(i / 5.2) % 2 ? [240, 240, 236] : sc3(S.acc, 120, 60));\n\n  // The vaulter, then the near upright in front.\n  const f = S.fig;\n  if (f) figure(S, f.x, f.y, f.th, f.fc, f.arms, f.L, f.hands, S.cols, 1);\n  standard(S, ZS);\n\n  // The judge by the box, a flag up once the bar has settled.\n  const up = S.ph === MAT && S.verdict && S.pt \u003c 2.6, jc = [[34, 50, 120], [70, 70, 82], [225, 165, 125], [40, 40, 44]];\n  figure(S, -13.2, 101.6, 0, 1, [up ? 0.2 : 2.9, 2.95], [0, 0, 0, 0], null, jc.concat(jc), 0.85);\n  for (let r = 0; r \u003c 9 && up; r++) put(round(-12.3 - cam) + (r % 3), 91 + floor(r / 3), S.verdict === 1 ? [245, 245, 245] : [235, 25, 25]);\n\n  // Glare from the lamp banks, over everything.\n  for (let k = -3; k \u003c= 3; k++) {\n    const xi = round(k * 48 + 12 - cam * 0.2);\n    for (let y = 0; y \u003c 30; y++)\n      for (let x = max(0, xi - 60), j = (y * W + x) * 3; x \u003c min(W, xi + 60); x++, j += 3) {\n        const v = S.glare[y * 128 + x - xi + 64];\n        C[j] += v;\n        C[j + 1] += v * 0.96;\n        C[j + 2] += v * 0.88;\n      }\n  }\n\n  // The results board: height, marks at it, the vaulter's colours.\n  const hc = S.verdict === 1 ? [255, 255, 255] : [255, 40, 40];\n  for (let y = 1; y \u003c 13; y++) for (let x = 39; x \u003c 63; x++) for (let c = 0, j = (y * W + x) * 3; c \u003c 3; c++) C[j + c] = y === 1 ? S.acc[c] * 230 : C[j + c] * 0.2 + [6, 10, 26][c] * 0.8 + hc[c] * S.hudF * 0.75;\n  text((S.base + 0.1 * S.notch).toFixed(2) + \"M\", 41, 3, [255, 180, 40]);\n  S.marks.slice(-3).forEach((m, i) => text(m, 41 + i * 4, 8, m === \"X\" ? [255, 50, 40] : [240, 240, 240]));\n  for (let r = 0; r \u003c 30; r++) put(55 + (r % 6), 8 + floor(r / 6), r \u003c 12 ? S.cols[0] : S.cols[1]);\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Speed=0.2..3, Bar=5..6.2, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"The kit, gold with blue shorts at 0 and once round the wheel; the stand lights, seats and boards take the opposite colour."},{"name":"Speed","min":0.2,"max":3,"about":"Real time at 2, where the vault from plant to landing takes 2.4 s; ten times slower at 0.2."},{"name":"Bar","min":5,"max":6.2,"about":"The opening height, 5.00 to 6.20 m at 14 rows a metre; a higher bar takes a longer pole and a longer run-up. It goes up 10 cm after each clearance and back here after three misses."},{"name":"Wind","min":-1,"max":1,"about":"Headwind to tailwind: the roof flags stream one way or the other, and a tailwind speeds up the run."}],"start":[0,2,5,0.06],"measures":{"motion":0.7696,"detail":0.0793,"edges":0.2827,"complexity":0.9294,"coverage":0.6904,"colour":0.1943,"drift":0.0642},"knobResponse":[0.0451,0.0895,0.0561,0.043]},{"slug":"polya-urn","title":"Pólya Urn","family":"data","round":38,"note":"폴리아 항아리 64개가 한 열에 하나씩 나란히 공을 뽑아요. 로그 시계를 따라 위에서는 크게 흔들리다 아래로 가며 저마다 다른 섞임 비율로 굳고, 한 판이 끝나면 열들이 굳은 비율대로 줄을 서서 고르게 퍼진 극한을 곧은 그러데이션으로 보여 줘요. K3 은 처음 공을 늘려 열들을 가운데 섞임으로 모으고, K4 는 한 번에 더하는 공을 늘려 바코드를 두 색으로 갈라요.","idea":"Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Pólya Urn\n// Family:  data\n// Idea:    Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Pólya's urn (Florian Eggenberger and George Pólya, 1923), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8\n//\n// Knob 1: Hue. Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive.\n// Knob 2: Speed. How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it.\n// Knob 3: Balls. The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends.\n// Knob 4: Added. Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one.\n\nconst W = 64, H = 128;\n// The clock: row r is draw n(r) = N0 ((1 + NMAX / N0)^(r / 127) - 1), 0 at\n// the top and NMAX at the bottom: the first draw lands on row 12, the tenth\n// on row 40, the hundredth on row 77.\nconst NMAX = 2000, N0 = 1;\n// One run fills the panel in FILL / Speed seconds; the finished run waits\n// HOLD1 seconds, sorts at SORTS transposition rounds a second, then shows the\n// ramp for HOLD2 seconds before the next run comes down over it.\nconst FILL = 16, HOLD1 = 1.2, SORTS = 26, HOLD2 = 3.2;\nconst { floor, min, max, abs, round, random, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Draw count at each row boundary.\nconst NAT = new Float64Array(H);\nfor (let r = 0; r \u003c H; r++) NAT[r] = round(N0 * (pow(1 + NMAX / N0, r / (H - 1)) - 1));\n\nexport function setup(params) {\n  params.s = {\n    init: false, phase: 0, t: 0, front: 0, rounds: 0, still: false,\n    balls: 1, added: 1, hue: 0, speed: 2,\n    // Each urn: balls of the first colour, all balls, draws made.\n    A: new Float64Array(W), T: new Float64Array(W), n: new Float64Array(W),\n    // Share of the first colour at each row, this run and the run before.\n    cur: new Float32Array(W * H), old: new Float32Array(W * H),\n    ca: [0, 0, 0], cb: [0, 0, 0],\n  };\n}\n\nfunction startRun(S) {\n  for (let i = 0; i \u003c W; i++) {\n    S.A[i] = S.balls;\n    S.T[i] = 2 * S.balls;\n    S.n[i] = 0;\n  }\n  S.front = 0;\n  S.t = 0;\n  S.phase = 0;\n  S.rounds = 0;\n  S.still = false;\n}\n\n// Run every urn on to row r's draw count and write the shares of the rows it\n// passes; the row the front stands in shows the share as it is now.\nfunction advance(S, rf) {\n  const { A, T, n, cur } = S, c = S.added;\n  const r1 = min(H - 1, floor(rf));\n  for (let i = 0; i \u003c W; i++) {\n    let a = A[i], t = T[i], k = n[i];\n    for (let r = S.front; r \u003c= r1; r++) {\n      const goal = NAT[r];\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[r * W + i] = a / t;\n    }\n    // Draws inside the row the front is crossing, toward the next row.\n    if (r1 \u003c H - 1) {\n      const goal = NAT[r1] + (NAT[r1 + 1] - NAT[r1]) * (rf - r1);\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[(r1 + 1) * W + i] = a / t;\n    }\n    A[i] = a;\n    T[i] = t;\n    n[i] = k;\n  }\n  S.front = r1 + 1;\n}\n\n// One round of odd-even transposition sort on the columns, by the bottom\n// row's share; whole columns move, their history with them.\nfunction sortRound(S) {\n  const { cur } = S, base = (H - 1) * W, odd = S.rounds & 1;\n  let moved = false;\n  for (let i = odd; i + 1 \u003c W; i += 2) {\n    if (cur[base + i] > cur[base + i + 1]) {\n      for (let r = 0; r \u003c H; r++) {\n        const p = r * W + i, v = cur[p];\n        cur[p] = cur[p + 1];\n        cur[p + 1] = v;\n      }\n      moved = true;\n    }\n  }\n  S.rounds++;\n  return moved;\n}\n\nfunction firstRun(S) {\n  // The panel opens on a finished run, so the first run comes down over it.\n  startRun(S);\n  advance(S, H - 1);\n  while (sortRound(S) || sortRound(S));\n  S.old.set(S.cur);\n  startRun(S);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const balls = round(cl(k[2], 1, 8)), added = round(cl(k[3], 1, 8));\n  // A change of Balls or Added starts a fresh run under the new rule.\n  if (S.init && (balls !== S.balls || added !== S.added)) {\n    S.balls = balls;\n    S.added = added;\n    // What is on the panel now becomes the run the new one comes down over.\n    if (S.phase === 0) S.old.set(S.cur.subarray(0, S.front * W));\n    else S.old.set(S.cur);\n    startRun(S);\n  }\n  S.balls = balls;\n  S.added = added;\n  if (!S.init) {\n    firstRun(S);\n    S.init = true;\n  }\n  S.t += d;\n  if (S.phase === 0) {\n    const rf = min(H - 1, (S.t * S.speed * (H - 1)) / FILL);\n    advance(S, rf);\n    if (rf >= H - 1) {\n      S.phase = 1;\n      S.t = 0;\n    }\n  } else if (S.phase === 1) {\n    if (S.t > HOLD1) {\n      S.phase = 2;\n      S.t = 0;\n    }\n  } else if (S.phase === 2) {\n    // Sorting rounds at SORTS a second; two rounds in a row that move\n    // nothing mean the columns are in order.\n    while (S.t > 1 / SORTS) {\n      S.t -= 1 / SORTS;\n      const moved = sortRound(S);\n      if (!moved && S.still) {\n        S.phase = 3;\n        S.t = 0;\n        break;\n      }\n      S.still = !moved;\n    }\n  } else if (S.t > HOLD2) {\n    S.old.set(S.cur);\n    startRun(S);\n  }\n}\n\nfunction colours(S) {\n  // The first colour, and the second a third of the wheel on; orange and\n  // yellow are paled and lifted.\n  for (const [h, out] of [[S.hue + 0.47, S.ca], [S.hue + 0.8, S.cb]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.12) / 0.1, 0, 1);\n    hsv(h, 0.78 - 0.3 * warm, 1, out);\n    if (warm > 0) {\n      const lift = 1 + 0.25 * warm;\n      out[0] = min(1, out[0] * lift);\n      out[1] = min(1, out[1] * lift);\n      out[2] = min(1, out[2] * lift);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  colours(S);\n  const { ca, cb, cur, old } = S;\n  const fill = S.phase === 0, fr = S.front;\n  for (let y = 0; y \u003c H; y++) {\n    const live = !fill || y \u003c fr;\n    const atFront = fill && y === fr - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, s = live ? cur[p] : old[p];\n      // The mix of the two colours by the share of the first, lifted halfway\n      // back to full brightness, so two colours either side of yellow mix to\n      // yellow and not olive. A mix in orange or yellow is lifted and paled\n      // further, a quarter of the way to white. The run before waits under\n      // the front at 70%, sorted, so the new barcode reads against its ramp.\n      let r = s * ca[0] + (1 - s) * cb[0], g = s * ca[1] + (1 - s) * cb[1], b = s * ca[2] + (1 - s) * cb[2];\n      const m = max(r, g, b), warm = cl((min(r, g) - b) / m, 0, 1);\n      const k = ((live ? 0.95 : 0.7) + (live ? 0.05 : 0.3) * warm) * (0.5 + 0.5 / m), pale = 0.25 * warm;\n      r = r * k + (1 - r * k) * pale;\n      g = g * k + (1 - g * k) * pale;\n      b = b * k + (1 - b * k) * pale;\n      if (atFront) {\n        r = r * 0.5 + 0.5;\n        g = g * 0.5 + 0.5;\n        b = b * 0.5 + 0.5;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","layer":{"id":"layer-polya-urn","type":"code","name":"polya-urn","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pólya Urn\n// Family:  data\n// Idea:    Sixty-four Pólya urns run side by side, one per column, each drawing a ball, putting it back and adding another of the same colour, with the draws running down the panel on a logarithmic clock from none at the top to 2000 at the bottom, so every column swings wildly in the top rows and then freezes into its own mix of the two colours, a barcode whose limits are spread evenly from one colour to the other, and when the run is done the columns sort themselves by where they froze and show that spread as a straight ramp.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Pólya's urn (Florian Eggenberger and George Pólya, 1923), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8\n//\n// Knob 1: Hue. Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive.\n// Knob 2: Speed. How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it.\n// Knob 3: Balls. The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends.\n// Knob 4: Added. Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one.\n\nconst W = 64, H = 128;\n// The clock: row r is draw n(r) = N0 ((1 + NMAX / N0)^(r / 127) - 1), 0 at\n// the top and NMAX at the bottom: the first draw lands on row 12, the tenth\n// on row 40, the hundredth on row 77.\nconst NMAX = 2000, N0 = 1;\n// One run fills the panel in FILL / Speed seconds; the finished run waits\n// HOLD1 seconds, sorts at SORTS transposition rounds a second, then shows the\n// ramp for HOLD2 seconds before the next run comes down over it.\nconst FILL = 16, HOLD1 = 1.2, SORTS = 26, HOLD2 = 3.2;\nconst { floor, min, max, abs, round, random, pow } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Draw count at each row boundary.\nconst NAT = new Float64Array(H);\nfor (let r = 0; r \u003c H; r++) NAT[r] = round(N0 * (pow(1 + NMAX / N0, r / (H - 1)) - 1));\n\nexport function setup(params) {\n  params.s = {\n    init: false, phase: 0, t: 0, front: 0, rounds: 0, still: false,\n    balls: 1, added: 1, hue: 0, speed: 2,\n    // Each urn: balls of the first colour, all balls, draws made.\n    A: new Float64Array(W), T: new Float64Array(W), n: new Float64Array(W),\n    // Share of the first colour at each row, this run and the run before.\n    cur: new Float32Array(W * H), old: new Float32Array(W * H),\n    ca: [0, 0, 0], cb: [0, 0, 0],\n  };\n}\n\nfunction startRun(S) {\n  for (let i = 0; i \u003c W; i++) {\n    S.A[i] = S.balls;\n    S.T[i] = 2 * S.balls;\n    S.n[i] = 0;\n  }\n  S.front = 0;\n  S.t = 0;\n  S.phase = 0;\n  S.rounds = 0;\n  S.still = false;\n}\n\n// Run every urn on to row r's draw count and write the shares of the rows it\n// passes; the row the front stands in shows the share as it is now.\nfunction advance(S, rf) {\n  const { A, T, n, cur } = S, c = S.added;\n  const r1 = min(H - 1, floor(rf));\n  for (let i = 0; i \u003c W; i++) {\n    let a = A[i], t = T[i], k = n[i];\n    for (let r = S.front; r \u003c= r1; r++) {\n      const goal = NAT[r];\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[r * W + i] = a / t;\n    }\n    // Draws inside the row the front is crossing, toward the next row.\n    if (r1 \u003c H - 1) {\n      const goal = NAT[r1] + (NAT[r1 + 1] - NAT[r1]) * (rf - r1);\n      while (k \u003c goal) {\n        if (random() * t \u003c a) a += c;\n        t += c;\n        k++;\n      }\n      cur[(r1 + 1) * W + i] = a / t;\n    }\n    A[i] = a;\n    T[i] = t;\n    n[i] = k;\n  }\n  S.front = r1 + 1;\n}\n\n// One round of odd-even transposition sort on the columns, by the bottom\n// row's share; whole columns move, their history with them.\nfunction sortRound(S) {\n  const { cur } = S, base = (H - 1) * W, odd = S.rounds & 1;\n  let moved = false;\n  for (let i = odd; i + 1 \u003c W; i += 2) {\n    if (cur[base + i] > cur[base + i + 1]) {\n      for (let r = 0; r \u003c H; r++) {\n        const p = r * W + i, v = cur[p];\n        cur[p] = cur[p + 1];\n        cur[p + 1] = v;\n      }\n      moved = true;\n    }\n  }\n  S.rounds++;\n  return moved;\n}\n\nfunction firstRun(S) {\n  // The panel opens on a finished run, so the first run comes down over it.\n  startRun(S);\n  advance(S, H - 1);\n  while (sortRound(S) || sortRound(S));\n  S.old.set(S.cur);\n  startRun(S);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 1, 1], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  const balls = round(cl(k[2], 1, 8)), added = round(cl(k[3], 1, 8));\n  // A change of Balls or Added starts a fresh run under the new rule.\n  if (S.init && (balls !== S.balls || added !== S.added)) {\n    S.balls = balls;\n    S.added = added;\n    // What is on the panel now becomes the run the new one comes down over.\n    if (S.phase === 0) S.old.set(S.cur.subarray(0, S.front * W));\n    else S.old.set(S.cur);\n    startRun(S);\n  }\n  S.balls = balls;\n  S.added = added;\n  if (!S.init) {\n    firstRun(S);\n    S.init = true;\n  }\n  S.t += d;\n  if (S.phase === 0) {\n    const rf = min(H - 1, (S.t * S.speed * (H - 1)) / FILL);\n    advance(S, rf);\n    if (rf >= H - 1) {\n      S.phase = 1;\n      S.t = 0;\n    }\n  } else if (S.phase === 1) {\n    if (S.t > HOLD1) {\n      S.phase = 2;\n      S.t = 0;\n    }\n  } else if (S.phase === 2) {\n    // Sorting rounds at SORTS a second; two rounds in a row that move\n    // nothing mean the columns are in order.\n    while (S.t > 1 / SORTS) {\n      S.t -= 1 / SORTS;\n      const moved = sortRound(S);\n      if (!moved && S.still) {\n        S.phase = 3;\n        S.t = 0;\n        break;\n      }\n      S.still = !moved;\n    }\n  } else if (S.t > HOLD2) {\n    S.old.set(S.cur);\n    startRun(S);\n  }\n}\n\nfunction colours(S) {\n  // The first colour, and the second a third of the wheel on; orange and\n  // yellow are paled and lifted.\n  for (const [h, out] of [[S.hue + 0.47, S.ca], [S.hue + 0.8, S.cb]]) {\n    const hh = h - floor(h), warm = cl(1 - abs(hh - 0.12) / 0.1, 0, 1);\n    hsv(h, 0.78 - 0.3 * warm, 1, out);\n    if (warm > 0) {\n      const lift = 1 + 0.25 * warm;\n      out[0] = min(1, out[0] * lift);\n      out[1] = min(1, out[1] * lift);\n      out[2] = min(1, out[2] * lift);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.init) return;\n  colours(S);\n  const { ca, cb, cur, old } = S;\n  const fill = S.phase === 0, fr = S.front;\n  for (let y = 0; y \u003c H; y++) {\n    const live = !fill || y \u003c fr;\n    const atFront = fill && y === fr - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, s = live ? cur[p] : old[p];\n      // The mix of the two colours by the share of the first, lifted halfway\n      // back to full brightness, so two colours either side of yellow mix to\n      // yellow and not olive. A mix in orange or yellow is lifted and paled\n      // further, a quarter of the way to white. The run before waits under\n      // the front at 70%, sorted, so the new barcode reads against its ramp.\n      let r = s * ca[0] + (1 - s) * cb[0], g = s * ca[1] + (1 - s) * cb[1], b = s * ca[2] + (1 - s) * cb[2];\n      const m = max(r, g, b), warm = cl((min(r, g) - b) / m, 0, 1);\n      const k = ((live ? 0.95 : 0.7) + (live ? 0.05 : 0.3) * warm) * (0.5 + 0.5 / m), pale = 0.25 * warm;\n      r = r * k + (1 - r * k) * pale;\n      g = g * k + (1 - g * k) * pale;\n      b = b * k + (1 - b * k) * pale;\n      if (atFront) {\n        r = r * 0.5 + 0.5;\n        g = g * 0.5 + 0.5;\n        b = b * 0.5 + 0.5;\n      }\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Balls=1..8, Added=1..8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two colours round the wheel together, a third of the wheel apart. At 0 teal and violet, mixing to lavender blue; at 0.25 violet and orange, mixing to rose; at 0.5 red and lime, mixing to butter yellow; at 0.75 lime and sky blue, mixing to sea green. Every mix is lifted halfway back to full brightness, and one that lands on orange or yellow is lifted and paled further, so nothing goes brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the run comes down the panel: at 2 one run fills the 128 rows in 8 seconds, at 0.2 in 80, at 3 in 5.3. The clock is the same at every speed, row r holding draw 2001^(r/127) - 1, so the first draw lands on row 12, the tenth on row 40, the hundredth on row 77, and the last rows go by 116 draws at a time. A finished run holds 1.2 seconds, sorts in about 2.5 and shows its ramp for 3.2 before the next run comes down over it."},{"name":"Balls","min":1,"max":8,"about":"The balls of each colour in every urn at the start, 1 to 8, one ball added per draw at Added 1. At 1 the limits are uniform: the bottom row holds every mix from one colour to the other in equal measure and the sorted ramp runs evenly from violet to teal. At 3 they are Beta(3, 3), 0.5 +- 0.19; at 8 Beta(8, 8), 0.5 +- 0.12: every column settles near the even mix, the barcode goes to one soft lavender and the ramp is flat with short ends."},{"name":"Added","min":1,"max":8,"about":"Balls of the drawn colour added after each draw, 1 to 8. The limit is Beta(Balls/Added, Balls/Added), so at Balls 1 and Added 8 it is Beta(1/8, 1/8): most urns lock onto one colour within the first ten draws and the barcode goes nearly two-tone, the sorted ramp a step. Balls and Added equal is the same urn as one and one."}],"start":[0,2,1,1],"measures":{"motion":0.0395,"detail":0.0065,"edges":0.0554,"complexity":1.2351,"coverage":1,"colour":0.4287,"drift":0.1821},"knobResponse":[0.3523,0.0975,0.0619,0.0708]},{"slug":"pop-up-book","title":"Pop-up Book","family":"paper","round":21,"note":"탁자에 펼친 팝업북에서 성과 숲, 등대, 도시가 종이 카드 여러 겹으로 일어서고, 그동안 달이 홈을 따라 가고 사슴이 고개를 숙여요. 페이지가 넘어가면 장면이 가운데 접힌 선으로 납작하게 눕고, 넘어오는 페이지에서 다음 장면이 일어나요.","idea":"A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.","buttons":"K1 tap turns the page now.","code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-pop-up-book","type":"code","name":"pop-up-book","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":3,"about":"Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three."},{"name":"Layers","min":4,"max":6,"about":"How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain)."},{"name":"Lamp","min":0,"max":1,"about":"Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing."}],"start":[0,2,4,0.06],"measures":{"motion":0.2969,"detail":0.0558,"edges":0.4541,"complexity":0.5762,"coverage":0.9872,"colour":0.1893,"drift":0.1346},"knobResponse":[0.1392,0.0773,0.0475,0.1266]},{"slug":"popcorn","title":"Popcorn","family":"kitchen","round":19,"note":"영화관 팝콘 수레가 128줄을 다 써요. 케틀에서 낟알이 터져 뛰고 넘쳐 떨어지다가 케틀이 기울어 한 배치를 더미에 쏟고, K1 을 누르면 스쿱이 더미를 떠 가요.","idea":"A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.","buttons":"K1 tap sends the scoop in now.","code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-popcorn","type":"code","name":"popcorn","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1."},{"name":"Heat","min":0.2,"max":3,"about":"How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one."},{"name":"Batch","min":6,"max":16,"about":"The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap."},{"name":"Heap","min":0,"max":1,"about":"How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle."}],"start":[0,2,6,0.06],"measures":{"motion":0.2278,"detail":0.0649,"edges":0.5093,"complexity":0.7081,"coverage":0.9514,"colour":0.2616,"drift":0.0636},"knobResponse":[0.0358,0.0496,0.0725,0.0766]},{"slug":"population-pyramid","title":"Population Pyramid","family":"data","round":25,"note":"가상의 나라의 인구 피라미드가 한 살에 한 줄씩 움직여요. 왼쪽이 남자, 오른쪽이 여자이고, 10년마다 태어난 세대가 제 색 띠로 해마다 한 줄씩 올라가요. 1995년의 베이비붐 띠가 위로 올라가 2060년에 위가 무거운 항아리꼴이 되면, 1820년의 뾰족한 삼각형으로 돌아가 240년을 다시 지나요. K3 을 내리면 아래가 좁아져 거꾸로 선 피라미드가 되고, K1 을 누르면 그해가 전쟁이나 유행병이 되어 패인 홈이 위로 올라가요.","idea":"The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.","buttons":"K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.","code":"// ===== Patternflow pattern =====\n// Title:   Population Pyramid\n// Family:  data\n// Idea:    The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the animated age pyramids of national statistics offices and the cohort-component model demographers project with\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1\n//\n// Knob 1: Palette. Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part.\n// Knob 2: Speed. At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid.\n// Knob 3: Births. Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads.\n// Knob 4: Migration. Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed.\n// Buttons: K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, exp, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\n\n// Ages 0 to 105 have a row each; the top row holds everyone older.\nconst NA = 107;\n// Row of age 0, first bar column for men (going left) and for women (going right), the widest bar.\nconst [Y0, MX, FX, BAR] = [121, 30, 33, 23];\n// The story runs from 1820 to 2060 and goes back to 1820. The first start opens in OPEN, the boom in middle age and\n// the old reaching the top of the panel, with the years before it run unseen.\nconst [START, END, OPEN] = [1820, 2060, 1995];\n\n// Mortality level: 0 where a quarter of babies die in their first year and life lasts 30 to 33 years on average, 1 where it lasts 79 to 83.\nconst LK = [[1820, 0], [1850, 0.02], [1880, 0.14], [1910, 0.34], [1950, 0.66], [1975, 0.84], [2000, 0.94], [2060, 1]];\n// Children a woman, before Births scales them.\nconst TK = [[1820, 6], [1865, 6], [1885, 5.5], [1905, 4.3], [1926, 2.9], [1933, 2.2], [1940, 2.3], [1947, 3.1], [1955, 3.5], [1962, 3.3], [1968, 2.5], [1977, 1.8], [1992, 1.55], [2008, 1.25], [2035, 1.05], [2060, 1]];\n// Two wars, the influenza after the first, and a cholera year in the opening decade.\nconst EV = [[1914, 1918, 0], [1940, 1945, 0], [1919, 1919, 1], [1823, 1823, 1]];\n\nconst key = (K, y) => {\n  if (y \u003c= K[0][0]) return K[0][1];\n  for (let i = 1; i \u003c K.length; i++)\n    if (y \u003c= K[i][0]) {\n      const t = (y - K[i - 1][0]) / (K[i][0] - K[i - 1][0]);\n      return mix(K[i - 1][1], K[i][1], t * t * (3 - 2 * t));\n    }\n  return K[K.length - 1][1];\n};\n\n// Where in a woman's life the children come: a hump peaking at 28.\nconst PHI = new Float64Array(NA);\n{\n  let s = 0;\n  for (let a = 15; a \u003c 50; a++) s += PHI[a] = (a - 14) ** 2.5 * exp(-(a - 14) / 5.5);\n  for (let a = 15; a \u003c 50; a++) PHI[a] /= s;\n}\n// Where migrants are in life: around 26.\nconst MIG = new Float64Array(NA).map((_, a) => exp(-(((a - 26) / 8) ** 2)));\n\n// Yearly hazard of dying at age a. kind: -1 a plain year, 0 war, 1 epidemic, 2 famine.\nfunction hazard(a, L, male, kind) {\n  let h = a === 0 ? mix(0.27, 0.0035, L) : a \u003c 15 ? mix(0.04, 0.0003, L) * exp(-(a - 1) / 2.2) : 0;\n  h += mix(0.008, 0.0003, L) * (male && a > 14 && a \u003c 40 ? 1.9 : 1);\n  h += 0.1 * exp(0.1 * (a - mix(64, 86, L) - (male ? 0 : mix(2, 4, L))));\n  if (kind === 0 && male && a > 17 && a \u003c 43) h += 0.09;\n  if (kind === 1) h += 0.015 + (a > 17 && a \u003c 41 ? 0.025 : 0) + (a \u003c 5 ? 0.08 : 0) + (a > 64 ? 0.06 : 0);\n  if (kind === 2) h += 0.02 + (a \u003c 5 ? 0.07 : 0) + (a > 59 ? 0.04 : 0);\n  return h;\n}\n\n// A state is six rows of ages: men and women living here, the part of them who came as migrants, and those who left.\nconst SV = new Float64Array(NA);\n// One year of the cohort-component model: the dead leave, everyone is a year older, the year's births come in, migrants come or go.\nfunction step(src, dst, y, fk, mig, kind, push) {\n  const L = key(LK, y);\n  let b = 0;\n  for (let a = 15; a \u003c 50; a++) b += src[1][a] * PHI[a];\n  b *= key(TK, y) * fk * [1, 0.62, 0.75, 0.85][kind + 1] * (push ? 0.7 : 1);\n  for (let s = 0; s \u003c 2; s++) {\n    for (let a = 0; a \u003c NA; a++) SV[a] = exp(-hazard(a, L, !s, kind) * (a ? 1 : 0.5));\n    for (let k = s; k \u003c 6; k += 2) {\n      const S = src[k], D = dst[k];\n      D[NA - 1] = S[NA - 1] * SV[NA - 1] + S[NA - 2] * SV[NA - 2];\n      for (let a = NA - 2; a > 0; a--) D[a] = S[a - 1] * SV[a - 1];\n      D[0] = k \u003c 2 ? b * (s ? 0.488 : 0.512) * SV[0] : 0;\n    }\n    const [D, I, E] = [dst[s], dst[s + 2], dst[s + 4]];\n    for (let a = 12; a \u003c 60; a++)\n      if (mig > 0) {\n        const n = mig * 0.00045 * MIG[a] * (s ? 0.9 : 1.1);\n        (D[a] += n), (I[a] += n);\n      } else if (mig \u003c 0) {\n        const f = 1 - exp(mig * 0.035 * MIG[a]);\n        (E[a] += D[a] * f), (D[a] *= 1 - f), (I[a] *= 1 - f);\n      }\n  }\n  // Keep the people living here at one: the bars are shares of them.\n  let t = 0;\n  for (let a = 0; a \u003c NA; a++) t += dst[0][a] + dst[1][a];\n  for (const A of dst) for (let a = 0; a \u003c NA; a++) A[a] /= t;\n}\n\n// A crisis by the script, or by chance in the hungry decades.\nconst kindOf = (y) => {\n  for (const [a, b, k] of EV) if (y >= a && y \u003c= b) return k;\n  return y \u003c 1880 && rnd() \u003c 0.07 ? 2 : -1;\n};\n\n// 3x5 digits, then M and F.\nconst GL = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf, 0x5fed, 0x79a4];\n\nexport function setup(params) {\n  const S = () => Array.from({ length: 6 }, () => new Float64Array(NA));\n  params.s = { cur: S(), nxt: S(), tmp: S(), y: START, u: 0, scl: 0, f: new Float32Array(N * 3), ready: 0, war: 0, fade: 0, kinds: new Int8Array(END - START + 2) };\n}\n\n// Run the opening regime for 110 years, longer than anyone lives, so it reaches its own shape and the knobs show from the first frame,\n// then the story up to the year it opens on.\nfunction warm(P, fk, mig, open) {\n  for (let s = 0; s \u003c 6; s++) for (let a = 0; a \u003c NA; a++) P.cur[s][a] = s \u003c 2 ? exp(-0.04 * a) : 0;\n  for (let i = 0; i \u003c 110; i++) {\n    step(P.cur, P.tmp, START - 110 + i, fk, mig, rnd() \u003c 0.07 ? 2 : -1, 0);\n    [P.cur, P.tmp] = [P.tmp, P.cur];\n  }\n  P.y = START;\n  P.u = 0;\n  P.kinds.fill(-1);\n  next(P, fk, mig, 0);\n  while (P.y \u003c open) [P.cur, P.nxt] = [P.nxt, P.cur], P.y++, next(P, fk, mig, 0);\n  P.scl = 0;\n}\n\n// Work out the year being lived now, from the state at its first day.\nfunction next(P, fk, mig, push) {\n  const k = push ? push - 1 : kindOf(P.y);\n  P.kinds[P.y - START] = k;\n  step(P.cur, P.nxt, P.y, fk, mig, k, push);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const fk = exp(0.47 * cl(k[2], -1, 1)), k4 = cl(k[3], -1, 1), mig = Math.sign(k4) * max(0, abs(k4) - 0.1) / 0.9, spd = 1.5 * cl(k[1], 0.25, 6);\n  P.hue = k[0];\n  if (!P.ready) (P.ready = 1), warm(P, fk, mig, OPEN);\n  // K1 tap: this year is a war, then an epidemic, by turns.\n  if (input.btnPressed && input.btnPressed[0] && P.y \u003c END) next(P, fk, mig, (P.war ^= 1) ? 1 : 2);\n  if (P.fade > 0) {\n    // The story is over: hold the urn a moment, dim, start again from the old triangle, light up.\n    P.fade += d;\n    if (P.fade > 2 && P.y >= END) warm(P, fk, mig, START);\n    if (P.fade > 2.8) P.fade = 0;\n  } else {\n    P.u += d * spd;\n    for (let i = 0; i \u003c 6 && P.u >= 1; i++) {\n      P.u -= 1;\n      [P.cur, P.nxt] = [P.nxt, P.cur];\n      if (++P.y >= END) {\n        (P.u = 0), (P.fade = 0.001);\n        break;\n      }\n      next(P, fk, mig, 0);\n    }\n  }\n  // The widest bar sets the scale, followed gently so a single year does not jolt it.\n  let m = 1e-9;\n  for (let a = 0; a \u003c NA; a++) m = max(m, P.cur[0][a], P.cur[1][a], P.nxt[0][a], P.nxt[1][a]);\n  const want = BAR / m;\n  P.scl = P.scl ? P.scl * exp(cl(Math.log(want / P.scl), -1, 1) * min(1, d * 1.5)) : want;\n  P.scl = min(P.scl, (BAR + 0.5) / m);\n}\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i % 6].map((c) => c * 255);\n}\n\nlet FB;\nfunction put(x, y, c, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  FB[o] = c[0] * a;\n  FB[o + 1] = c[1] * a;\n  FB[o + 2] = c[2] * a;\n}\nfunction glyph(g, x, y, c, s = 1) {\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((GL[g] >> (14 - r * 3 - q)) & 1) for (let i = 0; i \u003c s; i++) for (let j = 0; j \u003c s; j++) put(x + q * s + j, y + r * s + i, c);\n}\nfunction num(n, x, y, c, w, s = 1) {\n  const t = String(n).padStart(w, \"0\");\n  for (let i = 0; i \u003c t.length; i++) glyph(+t[i], x + i * 4 * s, y, c, s);\n}\n\n// A birth decade's colours: the band, its migrants, its leavers and its label. Decades step bright, middle, dark;\n// the darker two keep off orange and yellow, which go brown and olive when dim.\nconst LV = [1, 0.66, 0.4];\nfunction decade(hue, c) {\n  const l = ((c % 3) + 3) % 3, h0 = hue + c * 0.137, h = l ? 0.2 + (h0 - floor(h0)) * 0.82 : h0;\n  return [hsv(h, 0.8, LV[l]), hsv(h, 0.3, max(0.8, LV[l])), hsv(h, 0.6, 0.55), hsv(h, 0.55, 1)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  FB = P.f;\n  FB.fill(0);\n  const u = P.u, hue = 0.55 + (P.hue || 0), vis = P.fade > 1.2 ? min(1, abs(P.fade - 2) / 0.8) : 1;\n  // The age-0 row holds last year's births; the bands move up a row half way through the year.\n  const yb = P.y - 1 + (u >= 0.5 ? 1 : 0);\n  const grid = [38, 38, 38], lab = [110, 110, 120];\n  // Faint lines every ten years of age, and the ages up the left side.\n  for (let a = 0; a \u003c= 100; a += 10) {\n    const y = Y0 - a;\n    for (let x = 1; x \u003c W; x += 2) put(x, y, grid);\n    if (a % 20 === 0) num(a, 0, y - 2, lab, 1);\n  }\n  // The bars, one row per year of age, mid-year between the two states.\n  const C = P.cur, X = P.nxt, at = (s, a) => mix(C[s][a], X[s][a], u) * P.scl, memo = {}, dec = (c) => memo[c] || (memo[c] = decade(hue, c));\n  for (let a = 0; a \u003c NA; a++) {\n    const y = Y0 - a, [c, pale, ghost] = dec(floor((yb - a) / 10));\n    for (let s = 0; s \u003c 2; s++) {\n      const len = min(BAR, at(s, a)), imm = min(len, at(s + 2, a)), out = min(BAR + 1 - len, at(s + 4, a));\n      const px = (i, q, f = 1) => put(s ? FX + i : MX - i, y, q, f);\n      const n = floor(len), fr = len - n;\n      for (let i = 0; i \u003c n; i++) px(i, i + 0.5 \u003c len - imm ? c : pale);\n      if (fr > 0.05) px(n, imm > 0.5 ? pale : c, fr);\n      // Those who left, dotted past the end of the bar.\n      for (let i = n + 1; i \u003c len + out; i++) if ((i + a) & 1) px(i, ghost);\n    }\n  }\n  // The birth decade of each band, written beside it on the right in its own colour.\n  for (let c = floor((yb - 106) / 10); c \u003c= floor(yb / 10); c++) {\n    const top = min(NA - 1, yb - c * 10), bot = max(0, yb - c * 10 - 9);\n    if (top - bot \u003c 4) continue;\n    // A decade with hardly anyone left keeps a dim label.\n    let w = 0;\n    for (let a = bot; a \u003c= top; a++) w = max(w, at(0, a), at(1, a));\n    num((c * 10) % 100, 57, Math.round(Y0 - cl(yb - c * 10 - 4.5, bot + 2, top - 2)) - 2, dec(c)[3].map((q) => q * cl(w / 3, 0.3, 1)), 2);\n  }\n  // The year being lived, in the colour of the decade being born, red in a year of war or epidemic.\n  const kind = P.kinds[P.y - START] ?? -1, ycol = kind === 0 || kind === 1 ? [255, 60, 40] : decade(hue, floor(P.y / 10))[3];\n  num(P.y, 17, 2, ycol, 4, 2);\n  glyph(10, 18, 123, lab), glyph(11, 43, 123, lab);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, FB[o] * vis) | 0, min(255, FB[o + 1] * vis) | 0, min(255, FB[o + 2] * vis) | 0);\n}\n","layer":{"id":"layer-population-pyramid","type":"code","name":"population-pyramid","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Population Pyramid\n// Family:  data\n// Idea:    The population pyramid of an imagined country runs through 240 years one row per year of age, men left and women right, each ten years of births one colour band climbing as it ages, from the sharp triangle of many births and many deaths through the baby boom to a top-heavy urn, and then starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the animated age pyramids of national statistics offices and the cohort-component model demographers project with\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1\n//\n// Knob 1: Palette. Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part.\n// Knob 2: Speed. At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid.\n// Knob 3: Births. Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads.\n// Knob 4: Migration. Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed.\n// Buttons: K1 tap makes this year a war or an epidemic, in turn: births fall by about half, and either young men or the very young and the old die, so a notch forms and climbs.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, exp, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\n\n// Ages 0 to 105 have a row each; the top row holds everyone older.\nconst NA = 107;\n// Row of age 0, first bar column for men (going left) and for women (going right), the widest bar.\nconst [Y0, MX, FX, BAR] = [121, 30, 33, 23];\n// The story runs from 1820 to 2060 and goes back to 1820. The first start opens in OPEN, the boom in middle age and\n// the old reaching the top of the panel, with the years before it run unseen.\nconst [START, END, OPEN] = [1820, 2060, 1995];\n\n// Mortality level: 0 where a quarter of babies die in their first year and life lasts 30 to 33 years on average, 1 where it lasts 79 to 83.\nconst LK = [[1820, 0], [1850, 0.02], [1880, 0.14], [1910, 0.34], [1950, 0.66], [1975, 0.84], [2000, 0.94], [2060, 1]];\n// Children a woman, before Births scales them.\nconst TK = [[1820, 6], [1865, 6], [1885, 5.5], [1905, 4.3], [1926, 2.9], [1933, 2.2], [1940, 2.3], [1947, 3.1], [1955, 3.5], [1962, 3.3], [1968, 2.5], [1977, 1.8], [1992, 1.55], [2008, 1.25], [2035, 1.05], [2060, 1]];\n// Two wars, the influenza after the first, and a cholera year in the opening decade.\nconst EV = [[1914, 1918, 0], [1940, 1945, 0], [1919, 1919, 1], [1823, 1823, 1]];\n\nconst key = (K, y) => {\n  if (y \u003c= K[0][0]) return K[0][1];\n  for (let i = 1; i \u003c K.length; i++)\n    if (y \u003c= K[i][0]) {\n      const t = (y - K[i - 1][0]) / (K[i][0] - K[i - 1][0]);\n      return mix(K[i - 1][1], K[i][1], t * t * (3 - 2 * t));\n    }\n  return K[K.length - 1][1];\n};\n\n// Where in a woman's life the children come: a hump peaking at 28.\nconst PHI = new Float64Array(NA);\n{\n  let s = 0;\n  for (let a = 15; a \u003c 50; a++) s += PHI[a] = (a - 14) ** 2.5 * exp(-(a - 14) / 5.5);\n  for (let a = 15; a \u003c 50; a++) PHI[a] /= s;\n}\n// Where migrants are in life: around 26.\nconst MIG = new Float64Array(NA).map((_, a) => exp(-(((a - 26) / 8) ** 2)));\n\n// Yearly hazard of dying at age a. kind: -1 a plain year, 0 war, 1 epidemic, 2 famine.\nfunction hazard(a, L, male, kind) {\n  let h = a === 0 ? mix(0.27, 0.0035, L) : a \u003c 15 ? mix(0.04, 0.0003, L) * exp(-(a - 1) / 2.2) : 0;\n  h += mix(0.008, 0.0003, L) * (male && a > 14 && a \u003c 40 ? 1.9 : 1);\n  h += 0.1 * exp(0.1 * (a - mix(64, 86, L) - (male ? 0 : mix(2, 4, L))));\n  if (kind === 0 && male && a > 17 && a \u003c 43) h += 0.09;\n  if (kind === 1) h += 0.015 + (a > 17 && a \u003c 41 ? 0.025 : 0) + (a \u003c 5 ? 0.08 : 0) + (a > 64 ? 0.06 : 0);\n  if (kind === 2) h += 0.02 + (a \u003c 5 ? 0.07 : 0) + (a > 59 ? 0.04 : 0);\n  return h;\n}\n\n// A state is six rows of ages: men and women living here, the part of them who came as migrants, and those who left.\nconst SV = new Float64Array(NA);\n// One year of the cohort-component model: the dead leave, everyone is a year older, the year's births come in, migrants come or go.\nfunction step(src, dst, y, fk, mig, kind, push) {\n  const L = key(LK, y);\n  let b = 0;\n  for (let a = 15; a \u003c 50; a++) b += src[1][a] * PHI[a];\n  b *= key(TK, y) * fk * [1, 0.62, 0.75, 0.85][kind + 1] * (push ? 0.7 : 1);\n  for (let s = 0; s \u003c 2; s++) {\n    for (let a = 0; a \u003c NA; a++) SV[a] = exp(-hazard(a, L, !s, kind) * (a ? 1 : 0.5));\n    for (let k = s; k \u003c 6; k += 2) {\n      const S = src[k], D = dst[k];\n      D[NA - 1] = S[NA - 1] * SV[NA - 1] + S[NA - 2] * SV[NA - 2];\n      for (let a = NA - 2; a > 0; a--) D[a] = S[a - 1] * SV[a - 1];\n      D[0] = k \u003c 2 ? b * (s ? 0.488 : 0.512) * SV[0] : 0;\n    }\n    const [D, I, E] = [dst[s], dst[s + 2], dst[s + 4]];\n    for (let a = 12; a \u003c 60; a++)\n      if (mig > 0) {\n        const n = mig * 0.00045 * MIG[a] * (s ? 0.9 : 1.1);\n        (D[a] += n), (I[a] += n);\n      } else if (mig \u003c 0) {\n        const f = 1 - exp(mig * 0.035 * MIG[a]);\n        (E[a] += D[a] * f), (D[a] *= 1 - f), (I[a] *= 1 - f);\n      }\n  }\n  // Keep the people living here at one: the bars are shares of them.\n  let t = 0;\n  for (let a = 0; a \u003c NA; a++) t += dst[0][a] + dst[1][a];\n  for (const A of dst) for (let a = 0; a \u003c NA; a++) A[a] /= t;\n}\n\n// A crisis by the script, or by chance in the hungry decades.\nconst kindOf = (y) => {\n  for (const [a, b, k] of EV) if (y >= a && y \u003c= b) return k;\n  return y \u003c 1880 && rnd() \u003c 0.07 ? 2 : -1;\n};\n\n// 3x5 digits, then M and F.\nconst GL = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf, 0x5fed, 0x79a4];\n\nexport function setup(params) {\n  const S = () => Array.from({ length: 6 }, () => new Float64Array(NA));\n  params.s = { cur: S(), nxt: S(), tmp: S(), y: START, u: 0, scl: 0, f: new Float32Array(N * 3), ready: 0, war: 0, fade: 0, kinds: new Int8Array(END - START + 2) };\n}\n\n// Run the opening regime for 110 years, longer than anyone lives, so it reaches its own shape and the knobs show from the first frame,\n// then the story up to the year it opens on.\nfunction warm(P, fk, mig, open) {\n  for (let s = 0; s \u003c 6; s++) for (let a = 0; a \u003c NA; a++) P.cur[s][a] = s \u003c 2 ? exp(-0.04 * a) : 0;\n  for (let i = 0; i \u003c 110; i++) {\n    step(P.cur, P.tmp, START - 110 + i, fk, mig, rnd() \u003c 0.07 ? 2 : -1, 0);\n    [P.cur, P.tmp] = [P.tmp, P.cur];\n  }\n  P.y = START;\n  P.u = 0;\n  P.kinds.fill(-1);\n  next(P, fk, mig, 0);\n  while (P.y \u003c open) [P.cur, P.nxt] = [P.nxt, P.cur], P.y++, next(P, fk, mig, 0);\n  P.scl = 0;\n}\n\n// Work out the year being lived now, from the state at its first day.\nfunction next(P, fk, mig, push) {\n  const k = push ? push - 1 : kindOf(P.y);\n  P.kinds[P.y - START] = k;\n  step(P.cur, P.nxt, P.y, fk, mig, k, push);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const fk = exp(0.47 * cl(k[2], -1, 1)), k4 = cl(k[3], -1, 1), mig = Math.sign(k4) * max(0, abs(k4) - 0.1) / 0.9, spd = 1.5 * cl(k[1], 0.25, 6);\n  P.hue = k[0];\n  if (!P.ready) (P.ready = 1), warm(P, fk, mig, OPEN);\n  // K1 tap: this year is a war, then an epidemic, by turns.\n  if (input.btnPressed && input.btnPressed[0] && P.y \u003c END) next(P, fk, mig, (P.war ^= 1) ? 1 : 2);\n  if (P.fade > 0) {\n    // The story is over: hold the urn a moment, dim, start again from the old triangle, light up.\n    P.fade += d;\n    if (P.fade > 2 && P.y >= END) warm(P, fk, mig, START);\n    if (P.fade > 2.8) P.fade = 0;\n  } else {\n    P.u += d * spd;\n    for (let i = 0; i \u003c 6 && P.u >= 1; i++) {\n      P.u -= 1;\n      [P.cur, P.nxt] = [P.nxt, P.cur];\n      if (++P.y >= END) {\n        (P.u = 0), (P.fade = 0.001);\n        break;\n      }\n      next(P, fk, mig, 0);\n    }\n  }\n  // The widest bar sets the scale, followed gently so a single year does not jolt it.\n  let m = 1e-9;\n  for (let a = 0; a \u003c NA; a++) m = max(m, P.cur[0][a], P.cur[1][a], P.nxt[0][a], P.nxt[1][a]);\n  const want = BAR / m;\n  P.scl = P.scl ? P.scl * exp(cl(Math.log(want / P.scl), -1, 1) * min(1, d * 1.5)) : want;\n  P.scl = min(P.scl, (BAR + 0.5) / m);\n}\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i % 6].map((c) => c * 255);\n}\n\nlet FB;\nfunction put(x, y, c, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  FB[o] = c[0] * a;\n  FB[o + 1] = c[1] * a;\n  FB[o + 2] = c[2] * a;\n}\nfunction glyph(g, x, y, c, s = 1) {\n  for (let r = 0; r \u003c 5; r++)\n    for (let q = 0; q \u003c 3; q++)\n      if ((GL[g] >> (14 - r * 3 - q)) & 1) for (let i = 0; i \u003c s; i++) for (let j = 0; j \u003c s; j++) put(x + q * s + j, y + r * s + i, c);\n}\nfunction num(n, x, y, c, w, s = 1) {\n  const t = String(n).padStart(w, \"0\");\n  for (let i = 0; i \u003c t.length; i++) glyph(+t[i], x + i * 4 * s, y, c, s);\n}\n\n// A birth decade's colours: the band, its migrants, its leavers and its label. Decades step bright, middle, dark;\n// the darker two keep off orange and yellow, which go brown and olive when dim.\nconst LV = [1, 0.66, 0.4];\nfunction decade(hue, c) {\n  const l = ((c % 3) + 3) % 3, h0 = hue + c * 0.137, h = l ? 0.2 + (h0 - floor(h0)) * 0.82 : h0;\n  return [hsv(h, 0.8, LV[l]), hsv(h, 0.3, max(0.8, LV[l])), hsv(h, 0.6, 0.55), hsv(h, 0.55, 1)];\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  FB = P.f;\n  FB.fill(0);\n  const u = P.u, hue = 0.55 + (P.hue || 0), vis = P.fade > 1.2 ? min(1, abs(P.fade - 2) / 0.8) : 1;\n  // The age-0 row holds last year's births; the bands move up a row half way through the year.\n  const yb = P.y - 1 + (u >= 0.5 ? 1 : 0);\n  const grid = [38, 38, 38], lab = [110, 110, 120];\n  // Faint lines every ten years of age, and the ages up the left side.\n  for (let a = 0; a \u003c= 100; a += 10) {\n    const y = Y0 - a;\n    for (let x = 1; x \u003c W; x += 2) put(x, y, grid);\n    if (a % 20 === 0) num(a, 0, y - 2, lab, 1);\n  }\n  // The bars, one row per year of age, mid-year between the two states.\n  const C = P.cur, X = P.nxt, at = (s, a) => mix(C[s][a], X[s][a], u) * P.scl, memo = {}, dec = (c) => memo[c] || (memo[c] = decade(hue, c));\n  for (let a = 0; a \u003c NA; a++) {\n    const y = Y0 - a, [c, pale, ghost] = dec(floor((yb - a) / 10));\n    for (let s = 0; s \u003c 2; s++) {\n      const len = min(BAR, at(s, a)), imm = min(len, at(s + 2, a)), out = min(BAR + 1 - len, at(s + 4, a));\n      const px = (i, q, f = 1) => put(s ? FX + i : MX - i, y, q, f);\n      const n = floor(len), fr = len - n;\n      for (let i = 0; i \u003c n; i++) px(i, i + 0.5 \u003c len - imm ? c : pale);\n      if (fr > 0.05) px(n, imm > 0.5 ? pale : c, fr);\n      // Those who left, dotted past the end of the bar.\n      for (let i = n + 1; i \u003c len + out; i++) if ((i + a) & 1) px(i, ghost);\n    }\n  }\n  // The birth decade of each band, written beside it on the right in its own colour.\n  for (let c = floor((yb - 106) / 10); c \u003c= floor(yb / 10); c++) {\n    const top = min(NA - 1, yb - c * 10), bot = max(0, yb - c * 10 - 9);\n    if (top - bot \u003c 4) continue;\n    // A decade with hardly anyone left keeps a dim label.\n    let w = 0;\n    for (let a = bot; a \u003c= top; a++) w = max(w, at(0, a), at(1, a));\n    num((c * 10) % 100, 57, Math.round(Y0 - cl(yb - c * 10 - 4.5, bot + 2, top - 2)) - 2, dec(c)[3].map((q) => q * cl(w / 3, 0.3, 1)), 2);\n  }\n  // The year being lived, in the colour of the decade being born, red in a year of war or epidemic.\n  const kind = P.kinds[P.y - START] ?? -1, ycol = kind === 0 || kind === 1 ? [255, 60, 40] : decade(hue, floor(P.y / 10))[3];\n  num(P.y, 17, 2, ycol, 4, 2);\n  glyph(10, 18, 123, lab), glyph(11, 43, 123, lab);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, FB[o] * vis) | 0, min(255, FB[o + 1] * vis) | 0, min(255, FB[o + 2] * vis) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Speed=0.25..6, Births=-1..1, Migration=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"Turns the colours of the birth decades round the wheel; the decades step bright, middle and dark in threes so neighbouring bands part."},{"name":"Speed","min":0.25,"max":6,"about":"At 2 three years go by each second: it opens in 1995, reaches 2060 in 22 seconds, and the whole 240 years from 1820 take 80 seconds after that; at 6 the bands race up the pyramid."},{"name":"Births","min":-1,"max":1,"about":"Scales the fertility the story runs on, from 0.63 times at the left to 1.6 times at the right. In the middle the country starts near six children a woman and ends near one; turned down the base pinches in, turned up it spreads."},{"name":"Migration","min":-1,"max":1,"about":"Within a tenth of the middle nobody moves. Turned up, young adults arrive each year around age 26 and their part of each bar is drawn paler at its outer end as they grow old in the country; turned down, they leave, and a dotted ghost past the bar's end shows where it would reach had they stayed."}],"start":[0,2,0,0.06],"measures":{"motion":0.1321,"detail":0.0783,"edges":0.6662,"complexity":0.212,"coverage":0.4183,"colour":0.3565,"drift":0.1142},"knobResponse":[0.1688,0.1844,0.07,0.0935]},{"slug":"potters-wheel","title":"Potter's Wheel","family":"pottery","round":24,"note":"밤의 도자기 공방에서 녹색 갓 램프 아래 물레가 돌아요. 두 손이 흙덩이를 가운데로 모아 벽을 끌어올리면 그릇이 76~92줄 높이로 자라고, 물레 자국이 램프 쪽에서 반짝이며 옆으로 흘러가요. 다 빚은 병과 항아리는 줄로 잘려 선반에 올라가 젖은 흙빛에서 하얗게 말라 가요. K1 이 흙을 테라코타에서 검은 흙까지 바꾸고, K1 을 누르면 그릇이 주저앉아요.","idea":"At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.","buttons":"K1 tap makes the wall slump, and the potter balls the clay up and centres it again.","code":"// ===== Patternflow pattern =====\n// Title:   Potter's Wheel\n// Family:  pottery\n// Idea:    At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after throwing a pot on the potter's wheel\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1\n//\n// Knob 1: Clay. The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it.\n// Knob 2: Speed. At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower.\n// Knob 3: Pots. How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln.\n// Knob 4: Lamp. Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it.\n// Buttons: K1 tap makes the wall slump, and the potter balls the clay up and centres it again.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, asin, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The wheel head's centre and radius, the splash pan round it, and the tilt\n// of the view: a circle r across on the wheel shows as an ellipse E * r tall.\nconst [CX, BY, E, WR, PR] = [32, 111, 0.21, 21, 34];\nconst PY = BY + 2.5;\n// Three shelf boards with seven slots each, the order the slots fill, and\n// the size a pot stands at on the shelf against its size on the wheel.\nconst SHELF = [26, 53, 80];\nconst SLOT = [];\nfor (const sy of SHELF) for (let i = 0; i \u003c 7; i++) SLOT.push([4.6 + i * 9.13, sy]);\nconst ORDER = [1, 5, 8, 12, 14, 20, 3, 9, 11, 0, 6, 7, 13, 15, 19, 2, 4, 10, 16, 18, 17];\nconst SHS = 0.27;\n\n// Each clay at every stage of drying, from thrown and wet to bone-dry.\nconst CLAY = [\n  [[255, 112, 56], [196, 96, 58], [238, 158, 108]],\n  [[236, 170, 104], [190, 148, 100], [244, 222, 182]],\n  [[194, 198, 206], [184, 184, 182], [250, 248, 240]],\n  [[110, 96, 96], [86, 80, 78], [156, 148, 142]],\n];\nconst SKIN = [150, 98, 76], WALL = [84, 62, 50], WOOD = [132, 90, 58], METAL = [150, 152, 156], PLASTIC = [76, 80, 90], SLEEVE = [58, 66, 86], SHINE = [255, 232, 196];\n\n// Pot shapes as a height and the radius at keys up the wall: cylinder, bottle,\n// vase with a belly and a flared lip, jar and trumpet vase on the wheel, and\n// bowls and cups from earlier in the evening on the shelves.\nconst SHAPES = [\n  (j) => [76 + 8 * j, [[0, 10.5], [0.45, 10.2 + j], [0.9, 9.6], [1, 11]]],\n  (j) => [84 + 8 * j, [[0, 11], [0.3, 14.5], [0.7, 4.2], [0.93, 4], [1, 5.6]]],\n  (j) => [82 + 8 * j, [[0, 8], [0.42, 15], [0.8, 5], [0.9, 5.4], [1, 9.5]]],\n  (j) => [76 + 6 * j, [[0, 8.5], [0.55, 15.5], [0.9, 9], [1, 10.5]]],\n  (j) => [86 + 6 * j, [[0, 9.5], [0.2, 9.8], [0.62, 5.5], [1, 14]]],\n  (j) => [26 + 6 * j, [[0, 7], [0.45, 14], [1, 19]]],\n  (j) => [40 + 6 * j, [[0, 9], [0.5, 11.5], [0.85, 10.5], [1, 12]]],\n];\nfunction key(K, v) {\n  let i = 0;\n  while (i \u003c K.length - 2 && v > K[i + 1][0]) i++;\n  return mix(K[i][1], K[i + 1][1], sm(K[i][0], K[i + 1][0], v));\n}\n// A radius looked up along a wall kept one entry per row.\nconst at = (pr, h, Hp, i) => ((h = cl(h, 0, Hp)), (i = h | 0), pr[i] + (pr[i + 1] - pr[i]) * (h - i));\nfunction newSpec(not, all) {\n  let type;\n  // The first throw of the night is always one of the three tallest.\n  do type = floor(rnd() * (all ? 7 : 5));\n  while (type === not || (not \u003c -1 && type % 3 === 0));\n  const [Hf, K0] = SHAPES[type](rnd()), g = 0.92 + 0.16 * rnd(), K = K0.map(([v, r]) => [v, r * g]);\n  const pr = F32(ceil(Hf) + 3);\n  for (let h = 0; h \u003c pr.length; h++) pr[h] = key(K, min(1, h / Hf)) + 1.4 * exp(-h / 2.2);\n  // Where the hands shape it: the belly, then the neck above.\n  let vb = 0.5, vn = 0.85, rb = 0, rn = 99;\n  for (const [v, r] of K) if (v > 0.1 && v \u003c 0.85 && r > rb) (rb = r), (vb = v);\n  for (const [v, r] of K) if (v > vb && v \u003c 1 && r \u003c rn) (rn = r), (vn = v);\n  return { type, Hf, pr, rim: K[K.length - 1][1], vb, vn };\n}\n\n// The steps of a throw, how long each takes at Speed 2, and how fast the\n// wheel turns through it (turns a second): slapped down, centred, opened,\n// three pulls, shaped, shown, wired off, lifted to the shelf, and the slump\n// and the balling up after a K1 tap.\nconst DUR = [0.45, 0.9, 0.5, 4.5, 2.6, 1.6, 0.9, 1.8, 1.2, 0.9];\nconst SPIN = [0.4, 1.3, 1.1, 0.95, 0.75, 0.65, 0.3, 0, 0.9, 1];\n// The cylinder after each pull, and its wall at the rim.\nconst RC = [12.5, 11.3, 10.5, 9.9], WALL_T = [4, 2.7, 2.1, 1.7];\nconst cyl = (k, h) => RC[k] - 0.012 * h + 1.4 * exp(-h / 2.2);\nconst dome = (v, r) => r * sqrt(max(0, 1 - v ** 2.4)) + 1.2 * exp(-v * 8);\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, rot: 0, w: 0.4, H: 11, ri: 0, wa: 0, wt: 0, yo: 0, sH: 11, sri: 0, n: 6, LX: 12, clay: 0,\n    pr: F32(128), snap: F32(128), f: F32(N * 3), bg: F32(N * 3),\n    hd: null, hs: null, g: null, wire: -1, pieces: [], sp: [], dr: [], free: 0, bgKey: -1,\n  });\n  P.spec = newSpec(-2);\n  // The pieces already on the shelves, newest first.\n  for (let i = 0; i \u003c 21; i++) P.pieces.push({ slot: ORDER[i], spec: newSpec(i ? P.pieces[i - 1].spec.type : -1, 1), dry: min(1, 0.1 + i * 0.17) });\n  // Old slip spattered in the pan.\n  for (let i = 0; i \u003c 60; i++) {\n    const a = rnd() * TAU, r = 0.66 + 0.3 * rnd();\n    P.sp.push(i \u003c 44 ? [CX + PR * r * sin(a), PY + PR * E * r * cos(a), rnd() \u003c 0.3 ? 2 : 1, 0.6 + 0.5 * rnd()] : [2 + rnd() * 60, PY + 8 + rnd() * 4, 1, 0.5 + 0.4 * rnd()]);\n  }\n  shape(P, 0);\n}\n\nfunction go(P, ph) {\n  // The oldest piece on show goes to the kiln and the new pot takes its place.\n  if (ph === 7) P.free = P.pieces.splice(min(P.n, P.pieces.length) - 1, 1)[0].slot;\n  if (ph === 0 && P.ph === 7) P.pieces.unshift({ slot: P.free, spec: P.spec, dry: 0 }), (P.spec = newSpec(P.spec.type));\n  P.snap.set(P.pr);\n  Object.assign(P, { ph, pt: 0, sH: P.H, sri: P.ri });\n}\n\nfunction fill(P, Hn, f) {\n  P.H = Hn;\n  for (let h = 0, n = min(126, ceil(Hn) + 2); h \u003c= n; h++) P.pr[h] = max(0, f(min(h, Hn)));\n}\nconst snapR = (P, v) => at(P.snap, v * P.sH, P.sH);\nconst offset = (P, h) => P.wa * sin(P.rot) + P.wt * (cl(h / P.H, 0, 1) ** 1.5) * sin(P.rot + 0.8);\n\n// The clay's wall for this moment of the throw, and where the hands are.\nfunction shape(P, p) {\n  const sp = P.spec;\n  let hand = null;\n  Object.assign(P, { wa: 0, wt: 0.2, yo: 0, g: null, wire: -1, ring: 0.07 });\n  switch (P.ph) {\n    case 0: {\n      // Slapped down from the hands, squashing as it lands.\n      const sq = p > 0.6 ? 1 - 0.3 * sin((PI * (p - 0.6)) / 0.4) : 1, r = 10.5 / sqrt(sq), Hn = 11 * sq;\n      P.yo = p \u003c 0.6 ? -56 * (1 - (p / 0.6) ** 2) : 0;\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 0.8), (P.ring = 0.04);\n      hand = [5, -0.3, 0];\n      break;\n    }\n    case 1: {\n      // Centred: coned up and pressed down again while the wobble dies.\n      const Hn = 11 + 10 * sin(PI * sm(0.1, 0.9, p)), r = 10.5 * sqrt(11 / Hn);\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 2.6 * (1 - sm(0, 0.8, p))), (P.ring = 0.05);\n      hand = [Hn * 0.42, -0.5 + 0.4 * sin(p * 20), 0];\n      break;\n    }\n    case 2: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 13, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), cyl(0, h), q));\n      (P.ri = (RC[0] - WALL_T[0]) * sm(0.15, 1, p)), (P.ring = 0.07);\n      hand = [Hn - 1.5, -0.2, 0];\n      break;\n    }\n    case 3: {\n      // Three pulls. The hands squeeze the wall from the base to the rim and\n      // a roll of clay rides up ahead of them.\n      const k = min(2, floor(P.pt / 1.5)), a = (P.pt - k * 1.5) / 1.2, Hp = sp.Hf * 0.93;\n      const HS = [13, mix(13, Hp, 0.55), mix(13, Hp, 0.82), Hp];\n      if (a \u003c= 1) {\n        const Hn = mix(HS[k], HS[k + 1], sm(0, 1, a)), hh = Hn * min(1, a * 1.04) * 0.95, roll = 1.3 * (1 - sm(0.9, 1, a));\n        fill(P, Hn, (h) => mix(cyl(k + 1, h), cyl(k, h), sm(hh - 1, hh + 2.5, h)) + roll * exp(-(((h - hh - 2.6) / 2.2) ** 2)) - 0.8 * exp(-(((h - hh) / 1.4) ** 2)));\n        P.ri = mix(RC[k] - WALL_T[k], RC[k + 1] - WALL_T[k + 1], sm(0.85, 1, a));\n        hand = [hh, -0.3, 0];\n      } else {\n        const Hn = HS[k + 1], b = (a - 1) / 0.25;\n        fill(P, Hn, (h) => cyl(k + 1, h));\n        P.ri = RC[k + 1] - WALL_T[k + 1];\n        hand = [mix(Hn * 0.95, 3, sm(0, 1, b)), 1.5 * sin(PI * b), 0];\n      }\n      break;\n    }\n    case 4: {\n      // Shaped: the belly pushed out from inside, then the neck collared in.\n      const q = sm(0, 1, p), Hn = mix(P.sH, sp.Hf, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), at(sp.pr, (h / Hn) * sp.Hf, sp.Hf), q));\n      P.ri = mix(P.sri, sp.rim - 1.4, q);\n      hand = [Hn * mix(sp.vb, sp.vn, sm(0.4, 0.75, p)), -0.2, 0];\n      break;\n    }\n    case 8: {\n      // Slumped: the wall sinks, bellies and flops round as the wheel turns.\n      const q = sm(0, 1, p), Hn = mix(P.sH, max(12, P.sH * 0.3), q ** 0.8);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), snapR(P, (h / Hn) * 0.6) * (1 + 0.7 * (h / Hn) ** 2) + (3 * h) / Hn, q));\n      P.ri = P.sri > 0 ? max(0, at(P.pr, Hn, Hn) - 1.8) : 0;\n      (P.wt = 6 * sin(PI * min(1, p * 1.3)) + 2), (P.wa = 1);\n      hand = [Hn * 0.5, 4 + 20 * sm(0, 0.3, p), 10 * sm(0, 0.3, p)];\n      break;\n    }\n    case 9: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 11, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), dome(h / Hn, 10.5), q));\n      (P.ri = P.sri * (1 - q)), (P.wa = 2.6), (P.wt = 2 * (1 - q)), (P.ring = 0.04);\n      hand = [Hn * 0.45, mix(6, -0.5, sm(0, 0.5, p)), 0];\n      break;\n    }\n    default: {\n      fill(P, sp.Hf, (h) => at(sp.pr, h, sp.Hf));\n      P.ri = sp.rim - 1.4;\n      // Shown: the hands come away.\n      if (P.ph === 5) hand = [sp.Hf * sp.vn, 2 + 30 * sm(0, 0.6, p), 22 * sm(0, 0.6, p)];\n      if (P.ph === 6) {\n        // Wired off: the hands come in to the wheel and draw the wire under.\n        const a = sm(0, 0.25, p), q = sm(0.25, 1, p), y = mix(BY + 20, BY + E * P.pr[0] * (1 - 2 * q) + 0.5, a);\n        P.wire = a \u003c 1 ? -1 : q;\n        P.hd = [CX - mix(40, 25, a), y, CX + mix(40, 25, a), y];\n        return;\n      }\n      if (P.ph === 7) {\n        // Lifted, then carried back to its slot on the shelf.\n        const q1 = sm(0, 0.3, p), q2 = sm(0.3, 1, p), [sx, sy] = SLOT[P.free], s = mix(1, SHS, q2 ** 0.6);\n        P.g = [mix(CX, sx, q2), mix(BY - 9 * q1, sy + 0.5, q2) - 14 * sin(PI * q2), s];\n        if (q2 \u003c 0.5) {\n          const r = sp.pr[3] * s, y = P.g[1] - 3 * s + 40 * sm(0.2, 0.5, q2);\n          P.hd = [P.g[0] - r, y, P.g[0] + r, y];\n        } else P.hd = null;\n        return;\n      }\n    }\n  }\n  if (hand) {\n    const [h, gap, dy] = hand, r = at(P.pr, h, P.H), o = offset(P, h), y = BY + P.yo - h + dy;\n    P.hd = [CX + o - r - gap, y, CX + o + r + gap, y];\n  } else P.hd = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.clay = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 6, 20));\n  P.LX = mix(9, 55, cl(k[3], 0, 1));\n  if (input.btnPressed && input.btnPressed[0] && P.ph >= 1 && P.ph \u003c= 5) go(P, 8);\n  if ((P.pt += d) >= DUR[P.ph]) go(P, [1, 2, 3, 4, 5, 6, 7, 0, 9, 1][P.ph]);\n  P.w += (SPIN[P.ph] - P.w) * min(1, d * 3);\n  P.rot += TAU * P.w * d;\n  const landing = P.ph === 0 && P.yo \u003c 0;\n  shape(P, P.pt / DUR[P.ph]);\n  // The hands follow their mark, easing over the big jumps between steps.\n  if (!P.hd) P.hs = null;\n  else if (!P.hs) P.hs = P.hd.slice();\n  else for (let i = 0; i \u003c 4; i++) abs(P.hd[i] - P.hs[i]) > 3 ? (P.hs[i] += (P.hd[i] - P.hs[i]) * min(1, d * 14)) : (P.hs[i] = P.hd[i]);\n\n  // Slip flung off the wall by the hands, and spattered as the lump lands.\n  const fling = (x, y, sd, n) => {\n    while (n--) P.dr.push([x, y, sd * (8 + rnd() * 26), -8 - rnd() * 26, PY - 4 + rnd() * 10]);\n  };\n  if (P.hs && (P.ph === 3 || P.ph === 4) && rnd() \u003c d * 3) rnd() \u003c 0.5 ? fling(P.hs[0], P.hs[1], -1, 1) : fling(P.hs[2], P.hs[3], 1, 1);\n  if (landing && P.yo === 0) fling(CX - 9, BY - 2, -1, 3), fling(CX + 9, BY - 2, 1, 3);\n  P.dr = P.dr.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 150 * d);\n    if (q[3] > 0 && q[1] >= q[4]) {\n      P.sp.push([q[0], q[1], rnd() \u003c 0.3 ? 2 : 1, 0.7 + 0.5 * rnd()]);\n      if (P.sp.length > 110) P.sp.shift();\n      return false;\n    }\n    return q[0] > -2 && q[0] \u003c W + 2;\n  });\n  for (const q of P.pieces) q.dry = min(1, q.dry + d / 75);\n}\n\n// The wall, the rack and the lamp's glow, kept until the lamp or the clay changes.\nfunction backdrop(P) {\n  P.bgKey = bgKey(P);\n  // Clay dust lies on everything in the room and takes the clay's colour.\n  const B = P.bg, LX = P.LX, dust = P.dust, wall = WALL.map((v, n) => mix(v, dust[n] * 0.4, 0.55)), wood = WOOD.map((v, n) => mix(v, dust[n] * 0.6, 0.35));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - LX, dy = y - 10, o = (y * W + x) * 3;\n      let f = 0.24 + 0.85 * exp(-(dx * dx + dy * dy * 0.3) / 1500), col = wall;\n      if (dy > 0) {\n        const cw = 4 + dy * 0.72;\n        f += 0.32 * sm(cw + 6, cw - 3, abs(dx)) * exp(-dy / 90);\n      }\n      f *= 0.9 + 0.16 * hash(x >> 1, y >> 1);\n      for (const sy of SHELF) {\n        if (y === sy) (col = wood), (f *= 1.35);\n        else if (y > sy && y \u003c= sy + 3) (col = wood), (f *= 0.75 + 0.15 * hash(x >> 2, sy));\n        else if (y > sy + 3 && y \u003c= sy + 6) f *= 0.45 + 0.17 * (y - sy - 4);\n      }\n      if ((x \u003c 2 || x > 61) && y \u003c SHELF[2] + 4) (col = wood), (f *= x === 1 || x === 62 ? 0.9 : 0.6);\n      const g = 0.55 * exp(-(dx * dx + (y - 10.5) ** 2) / 30);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f + [255, 196, 120][c] * g;\n    }\n}\n\n// The light from the lamp at a spot: its direction and how much reaches it.\nfunction light(P, x, y) {\n  const lx = cl((P.LX - x) / 24, -1.3, 1.3), ly = 0.3 + (y - 10) / 300, n = sqrt(lx * lx + ly * ly + 0.25);\n  return [lx / n, ly / n, 0.5 / n, 0.6 + 0.5 * exp(-((x - P.LX) ** 2 + ((y - 10) * 0.5) ** 2) / 1800)];\n}\n\nlet F;\nconst bgKey = (P) => round(P.LX * 8) * 64 + round(P.clay * 48);\n// A thrown shape turned on its axis, lit by the lamp: wall, rim and the\n// dark inside. Off-centre clay swings its axis round with the wheel.\nfunction solid(o) {\n  const { cx, by, s, pr, Hp, L, alb } = o, Hs = Hp * s, [l0, l1, l2, lm] = L;\n  let Rm = 0;\n  for (let i = 0; i \u003c= Hp + 1; i++) Rm = max(Rm, pr[i]);\n  Rm *= s;\n  const R = (h) => at(pr, h / s, Hp) * s, off = (h) => o.wa * o.s1 + o.wt * (cl(h / Hs, 0, 1) ** 1.5) * o.s2;\n  const RT = R(Hs), cT = cx + off(Hs), yT = by - Hs, ryT = E * RT + 0.35, ri = o.ri * s, ryi = E * ri + 0.25, wb = abs(o.wa) + abs(o.wt);\n  const hn = sqrt(l0 * l0 + l1 * l1 + (l2 + 1) ** 2), hx = l0 / hn, hy = l1 / hn, hz = (l2 + 1) / hn;\n  const y0 = max(0, floor(yT - ryT - 1)), y1 = min(H - 1, ceil(by + E * Rm + 1)), x0 = max(0, floor(cx - Rm - wb - 1)), x1 = min(W - 1, ceil(cx + Rm + wb + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, h0 = by - y - 0.5, ox = wb ? off(h0) : 0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx - ox, o3 = (y * W + x) * 3;\n      let h = h0, r = 0, u = 9, c = 0, k, sp = 0;\n      for (let it = 0; it \u003c 3; it++) {\n        r = R(h);\n        u = r > 0.05 ? px / r : 9;\n        c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n        h = h0 + E * r * c;\n      }\n      r = R(h);\n      u = r > 0.05 ? px / r : 9;\n      if (h >= 0 && h \u003c= Hs && u * u \u003c 1) {\n        c = sqrt(1 - u * u);\n        const hp = h / s, dR = (R(h + 0.6) - R(h - 0.6)) / 1.2 + o.ring * 2.03 * cos(hp * 2.03), nl = 1 / sqrt(1 + dR * dR);\n        const dif = max(0, (u * l0 - dR * l1 + c * l2) * nl), nh = max(0, (u * hx - dR * hy + c * hz) * nl);\n        k = (o.amb + 0.95 * dif + 0.2 * max(0, (-u * l0 + 0.4 * c) * nl)) * lm;\n        sp = o.spec * nh ** 40;\n        if (o.fl) {\n          // Slip streaks and grog flecks ride round with the wheel.\n          const az = asin(u) - o.rot, a = ((az % TAU) + TAU) % TAU, i = floor(a * 6.366), j = floor(hp / 2.3), q = hash(i, j);\n          const st = 1 + 0.1 * sin(3 * az + 1.3) + 0.07 * sin(5 * az + hp * 0.11);\n          k *= st;\n          sp *= st;\n          if (q \u003c 0.2 && abs(a - (i + 0.5) / 6.366) * r \u003c 0.7 && abs(hp - (j + 0.5) * 2.3) \u003c 0.75) k *= q \u003c 0.1 ? 1.5 : 0.55;\n        }\n      } else {\n        const ex = (x + 0.5 - cT) / RT, ey = (y + 0.5 - yT) / ryT;\n        if (RT \u003c 0.4 || ex * ex + ey * ey > 1) continue;\n        const ix = (x + 0.5 - cT) / (ri + 0.01), iy = (y + 0.5 - yT) / ryi;\n        if (ri > 0.4 && ix * ix + iy * iy \u003c 1) k = (0.05 + 0.42 * cl(-ix * l0 * 1.3 + 0.2, 0, 1) * (iy \u003c 0.3 ? 1 : 0.55)) * lm;\n        else (k = (0.3 + 0.8 * l1) * lm), (sp = o.spec * 0.3);\n      }\n      for (let n = 0; n \u003c 3; n++) F[o3 + n] = alb[n] * k + SHINE[n] * sp;\n    }\n}\n\n// The earlier pots on the shelves, wet and dark, then leather-hard, then pale.\nconst STILL = { s: SHS, wa: 0, wt: 0, s1: 0, s2: 0, rot: 0, ring: 0, fl: 0, amb: 0.38 };\nfunction shelves(P, C) {\n  // While a pot is carried over, its slot stands empty.\n  for (let i = 0; i \u003c min(P.n - (P.ph === 7), P.pieces.length); i++) {\n    const q = P.pieces[i], [sx, sy] = SLOT[q.slot], dr = q.dry, a = dr \u003c 0.45 ? dr / 0.45 : (dr - 0.45) / 0.55;\n    const alb = dr \u003c 0.45 ? C[0].map((v, n) => mix(v * 0.62, C[1][n], a)) : C[1].map((v, n) => mix(v, C[2][n], a));\n    solid({ ...STILL, cx: sx, by: sy + 0.5, pr: q.spec.pr, Hp: q.spec.Hf, ri: q.spec.rim - 1.4, alb, spec: 0.6 * (1 - sm(0, 0.4, dr)), L: light(P, sx, sy - 10) });\n  }\n}\n\nconst put = (x, y, col, k) => {\n  if ((x = round(x - 0.5)) >= 0 && x \u003c W && (y = round(y - 0.5)) >= 0 && y \u003c H) for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = col[c] * k;\n};\n\n// The lamp: a cord, an enamel shade and the bulb under it.\nfunction lamp(P) {\n  for (let y = 0; y \u003c 12; y++)\n    for (let x = max(0, floor(P.LX - 8)); x \u003c= min(W - 1, P.LX + 8); x++) {\n      const dx = x + 0.5 - P.LX;\n      if (abs(dx) >= (y \u003c 3 ? 0.6 : y \u003c 10 ? 1.3 + (y - 3) * 0.85 : y \u003c 11 ? 2.4 : 1.2)) continue;\n      const k = y > 2 && y \u003c 9 ? 0.7 + 0.6 * (1 - (y - 3) / 6) * (dx \u003c 0 ? 1 : 0.6) : 1;\n      put(x + 0.5, y + 0.5, y \u003c 3 ? [44, 38, 34] : y \u003c 9 ? [38, 72, 62] : [[236, 170, 96], [255, 244, 214], [255, 226, 168]][y - 9], k);\n    }\n}\n\n// The pot's shadow thrown on the wall behind, leaning away from the lamp.\nfunction shadow(P) {\n  for (let y = max(0, floor(BY - P.H - 6)); y \u003c 106; y++) {\n    const h = BY + 4 - y;\n    if (h \u003c 0 || h > P.H) continue;\n    const r = at(P.pr, h, P.H) * 1.08, xc = CX + (CX - P.LX) * (0.12 + h * 0.007);\n    for (let x = max(0, floor(xc - r - 2)); x \u003c= min(W - 1, xc + r + 2); x++) {\n      const k = 1 - 0.5 * sm(r + 1.5, r - 1, abs(x + 0.5 - xc)), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n}\n\n// The splash pan with its slip, and the wheel head turning in it.\nfunction wheel(P, A) {\n  const [l0, l1, l2, lm] = light(P, CX, PY), mt = METAL.map((v, n) => mix(v, A[n], 0.7)), side = (z) => 0.15 + 0.8 * max(0, z * l0 + sqrt(max(0, 1 - z * z)) * l2);\n  for (let y = 100; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ex = (x + 0.5 - CX) / PR, ey = (y + 0.5 - PY) / (PR * E), dd = ex * ex + ey * ey, o = (y * W + x) * 3;\n      const wx = (x + 0.5 - CX) / WR, wy = (y + 0.5 - BY) / (WR * E), wd = wx * wx + wy * wy;\n      let col, k;\n      if (wd \u003c 1) (col = mt), (k = (0.3 + 0.6 * l1) * lm * (0.9 + 0.1 * cos(sqrt(wd) * WR * 1.4)));\n      else if (wy > 0 && wx * wx \u003c 1 && y + 0.5 \u003c BY + WR * E * sqrt(1 - wx * wx) + 2.5) (col = METAL), (k = 0.5 * side(wx) * lm);\n      else if (dd \u003c 1) dd > 0.86 ? ((col = PLASTIC), (k = (0.6 + 0.6 * l1) * lm)) : ((col = A), (k = (ey \u003c 0 ? 0.26 + 0.12 * (1 + ey) : 0.4) * lm));\n      else if (ey > 0 && ex * ex \u003c 1 && y + 0.5 \u003c PY + PR * E * sqrt(1 - ex * ex) + 6) (col = PLASTIC), (k = side(ex) * lm);\n      else if (y > PY) (col = WALL), (k = 0.2);\n      else continue;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = col[c] * k;\n    }\n  // Slip spattered on the pan, then the wheel's own marks going round.\n  for (const [x, y, z, t] of P.sp) {\n    const ex = (x - CX) / WR, ey = (y - BY) / (WR * E);\n    if (ex * ex + ey * ey \u003c 1.1) continue;\n    put(x, y, A, 0.5 * t * lm);\n    if (z > 1) put(x + 1, y, A, 0.4 * t * lm);\n  }\n  for (let j = 0; j \u003c 6; j++) {\n    const a = P.rot + j * 1.9, r = j \u003c 2 ? 16 : 11.5 + j * 1.6;\n    put(CX + r * sin(a) + 0.5, BY + E * r * cos(a) + 0.5, j \u003c 2 ? [20, 20, 22] : A, j \u003c 2 ? 1 : 0.85 * lm);\n  }\n}\n\n// Skin lit by the lamp, round in section.\nfunction cap(ax, ay, bx, by, ra, rb, col, L, tip) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6, rm = max(ra, rb) + 1;\n  for (let y = max(0, floor(min(ay, by) - rm)); y \u003c= min(H - 1, max(ay, by) + rm); y++)\n    for (let x = max(0, floor(min(ax, bx) - rm)); x \u003c= min(W - 1, max(ax, bx) + rm); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, r = mix(ra, rb, t), dd = ex * ex + ey * ey;\n      if (dd > r * r) continue;\n      const nz = sqrt(1 - dd / (r * r)), k = (0.16 + 0.9 * max(0, (ex / r) * L[0] - (ey / r) * L[1] + nz * L[2])) * L[3], C = tip && t > 0.5 ? tip : col, o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = C[c] * k;\n    }\n}\n\n// A hand on the clay at x, y: the sleeve and forearm down to the side, the\n// back of the hand, the fingers round the wall with slip on them, the thumb.\nfunction hand(P, sd, x, y, slip) {\n  const L = light(P, x, y);\n  cap(x + sd * 22, y + 26, x + sd * 46, y + 62, 5.6, 6.6, SLEEVE, L);\n  cap(x + sd * 6.5, y + 3.5, x + sd * 23, y + 27, 3.4, 4.6, SKIN, L);\n  cap(x + sd * 7.5, y + 3.5, x + sd * 3.2, y - 0.3, 3.6, 3.3, SKIN, L);\n  cap(x + sd * 3.2, y - 0.3, x - sd * 1.8, y + 0.8, 2.6, 2, SKIN, L, slip);\n  cap(x + sd * 3.8, y - 3, x + sd * 2.6, y - 4.4, 1.4, 1.2, SKIN, L, slip);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.pr) return;\n  F = P.f;\n  const c = P.clay * 3, i0 = min(2, floor(c)), f = c - i0, C = [0, 1, 2].map((j) => CLAY[i0][j].map((v, n) => mix(v, CLAY[i0 + 1][j][n], f))), A = C[0];\n  P.dust = C[2];\n  if (P.bgKey !== bgKey(P)) backdrop(P);\n  F.set(P.bg);\n  shelves(P, C);\n  lamp(P);\n  if (!P.g) shadow(P);\n  wheel(P, A);\n  const wire = (front) => {\n    if (P.wire \u003c 0 || !P.hs || P.wire \u003c 0.5 !== front) return;\n    for (let x = P.hs[0]; x \u003c= P.hs[2]; x++) put(x + 0.5, P.hs[1] + 0.5, [220, 222, 230], 0.9);\n  };\n  wire(false);\n  const [gx, gy, gs] = P.g || [CX, BY + P.yo, 1];\n  solid({ cx: gx, by: gy, s: gs, pr: P.pr, Hp: P.H, ri: P.ri, wa: P.wa, wt: P.wt, s1: sin(P.rot), s2: sin(P.rot + 0.8), rot: P.rot, alb: A, spec: 0.9, L: light(P, gx, gy - P.H * gs * 0.5), ring: P.ring, fl: 1, amb: 0.08 });\n  wire(true);\n  if (P.hs) {\n    const slip = SKIN.map((v, n) => mix(v, A[n], 0.6));\n    hand(P, -1, P.hs[0], P.hs[1], slip);\n    hand(P, 1, P.hs[2], P.hs[3], slip);\n  }\n  for (const [x, y] of P.dr) put(x, y, A, 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-potters-wheel","type":"code","name":"potters-wheel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Potter's Wheel\n// Family:  pottery\n// Idea:    At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after throwing a pot on the potter's wheel\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1\n//\n// Knob 1: Clay. The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it.\n// Knob 2: Speed. At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower.\n// Knob 3: Pots. How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln.\n// Knob 4: Lamp. Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it.\n// Buttons: K1 tap makes the wall slump, and the potter balls the clay up and centres it again.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, asin, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The wheel head's centre and radius, the splash pan round it, and the tilt\n// of the view: a circle r across on the wheel shows as an ellipse E * r tall.\nconst [CX, BY, E, WR, PR] = [32, 111, 0.21, 21, 34];\nconst PY = BY + 2.5;\n// Three shelf boards with seven slots each, the order the slots fill, and\n// the size a pot stands at on the shelf against its size on the wheel.\nconst SHELF = [26, 53, 80];\nconst SLOT = [];\nfor (const sy of SHELF) for (let i = 0; i \u003c 7; i++) SLOT.push([4.6 + i * 9.13, sy]);\nconst ORDER = [1, 5, 8, 12, 14, 20, 3, 9, 11, 0, 6, 7, 13, 15, 19, 2, 4, 10, 16, 18, 17];\nconst SHS = 0.27;\n\n// Each clay at every stage of drying, from thrown and wet to bone-dry.\nconst CLAY = [\n  [[255, 112, 56], [196, 96, 58], [238, 158, 108]],\n  [[236, 170, 104], [190, 148, 100], [244, 222, 182]],\n  [[194, 198, 206], [184, 184, 182], [250, 248, 240]],\n  [[110, 96, 96], [86, 80, 78], [156, 148, 142]],\n];\nconst SKIN = [150, 98, 76], WALL = [84, 62, 50], WOOD = [132, 90, 58], METAL = [150, 152, 156], PLASTIC = [76, 80, 90], SLEEVE = [58, 66, 86], SHINE = [255, 232, 196];\n\n// Pot shapes as a height and the radius at keys up the wall: cylinder, bottle,\n// vase with a belly and a flared lip, jar and trumpet vase on the wheel, and\n// bowls and cups from earlier in the evening on the shelves.\nconst SHAPES = [\n  (j) => [76 + 8 * j, [[0, 10.5], [0.45, 10.2 + j], [0.9, 9.6], [1, 11]]],\n  (j) => [84 + 8 * j, [[0, 11], [0.3, 14.5], [0.7, 4.2], [0.93, 4], [1, 5.6]]],\n  (j) => [82 + 8 * j, [[0, 8], [0.42, 15], [0.8, 5], [0.9, 5.4], [1, 9.5]]],\n  (j) => [76 + 6 * j, [[0, 8.5], [0.55, 15.5], [0.9, 9], [1, 10.5]]],\n  (j) => [86 + 6 * j, [[0, 9.5], [0.2, 9.8], [0.62, 5.5], [1, 14]]],\n  (j) => [26 + 6 * j, [[0, 7], [0.45, 14], [1, 19]]],\n  (j) => [40 + 6 * j, [[0, 9], [0.5, 11.5], [0.85, 10.5], [1, 12]]],\n];\nfunction key(K, v) {\n  let i = 0;\n  while (i \u003c K.length - 2 && v > K[i + 1][0]) i++;\n  return mix(K[i][1], K[i + 1][1], sm(K[i][0], K[i + 1][0], v));\n}\n// A radius looked up along a wall kept one entry per row.\nconst at = (pr, h, Hp, i) => ((h = cl(h, 0, Hp)), (i = h | 0), pr[i] + (pr[i + 1] - pr[i]) * (h - i));\nfunction newSpec(not, all) {\n  let type;\n  // The first throw of the night is always one of the three tallest.\n  do type = floor(rnd() * (all ? 7 : 5));\n  while (type === not || (not \u003c -1 && type % 3 === 0));\n  const [Hf, K0] = SHAPES[type](rnd()), g = 0.92 + 0.16 * rnd(), K = K0.map(([v, r]) => [v, r * g]);\n  const pr = F32(ceil(Hf) + 3);\n  for (let h = 0; h \u003c pr.length; h++) pr[h] = key(K, min(1, h / Hf)) + 1.4 * exp(-h / 2.2);\n  // Where the hands shape it: the belly, then the neck above.\n  let vb = 0.5, vn = 0.85, rb = 0, rn = 99;\n  for (const [v, r] of K) if (v > 0.1 && v \u003c 0.85 && r > rb) (rb = r), (vb = v);\n  for (const [v, r] of K) if (v > vb && v \u003c 1 && r \u003c rn) (rn = r), (vn = v);\n  return { type, Hf, pr, rim: K[K.length - 1][1], vb, vn };\n}\n\n// The steps of a throw, how long each takes at Speed 2, and how fast the\n// wheel turns through it (turns a second): slapped down, centred, opened,\n// three pulls, shaped, shown, wired off, lifted to the shelf, and the slump\n// and the balling up after a K1 tap.\nconst DUR = [0.45, 0.9, 0.5, 4.5, 2.6, 1.6, 0.9, 1.8, 1.2, 0.9];\nconst SPIN = [0.4, 1.3, 1.1, 0.95, 0.75, 0.65, 0.3, 0, 0.9, 1];\n// The cylinder after each pull, and its wall at the rim.\nconst RC = [12.5, 11.3, 10.5, 9.9], WALL_T = [4, 2.7, 2.1, 1.7];\nconst cyl = (k, h) => RC[k] - 0.012 * h + 1.4 * exp(-h / 2.2);\nconst dome = (v, r) => r * sqrt(max(0, 1 - v ** 2.4)) + 1.2 * exp(-v * 8);\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, rot: 0, w: 0.4, H: 11, ri: 0, wa: 0, wt: 0, yo: 0, sH: 11, sri: 0, n: 6, LX: 12, clay: 0,\n    pr: F32(128), snap: F32(128), f: F32(N * 3), bg: F32(N * 3),\n    hd: null, hs: null, g: null, wire: -1, pieces: [], sp: [], dr: [], free: 0, bgKey: -1,\n  });\n  P.spec = newSpec(-2);\n  // The pieces already on the shelves, newest first.\n  for (let i = 0; i \u003c 21; i++) P.pieces.push({ slot: ORDER[i], spec: newSpec(i ? P.pieces[i - 1].spec.type : -1, 1), dry: min(1, 0.1 + i * 0.17) });\n  // Old slip spattered in the pan.\n  for (let i = 0; i \u003c 60; i++) {\n    const a = rnd() * TAU, r = 0.66 + 0.3 * rnd();\n    P.sp.push(i \u003c 44 ? [CX + PR * r * sin(a), PY + PR * E * r * cos(a), rnd() \u003c 0.3 ? 2 : 1, 0.6 + 0.5 * rnd()] : [2 + rnd() * 60, PY + 8 + rnd() * 4, 1, 0.5 + 0.4 * rnd()]);\n  }\n  shape(P, 0);\n}\n\nfunction go(P, ph) {\n  // The oldest piece on show goes to the kiln and the new pot takes its place.\n  if (ph === 7) P.free = P.pieces.splice(min(P.n, P.pieces.length) - 1, 1)[0].slot;\n  if (ph === 0 && P.ph === 7) P.pieces.unshift({ slot: P.free, spec: P.spec, dry: 0 }), (P.spec = newSpec(P.spec.type));\n  P.snap.set(P.pr);\n  Object.assign(P, { ph, pt: 0, sH: P.H, sri: P.ri });\n}\n\nfunction fill(P, Hn, f) {\n  P.H = Hn;\n  for (let h = 0, n = min(126, ceil(Hn) + 2); h \u003c= n; h++) P.pr[h] = max(0, f(min(h, Hn)));\n}\nconst snapR = (P, v) => at(P.snap, v * P.sH, P.sH);\nconst offset = (P, h) => P.wa * sin(P.rot) + P.wt * (cl(h / P.H, 0, 1) ** 1.5) * sin(P.rot + 0.8);\n\n// The clay's wall for this moment of the throw, and where the hands are.\nfunction shape(P, p) {\n  const sp = P.spec;\n  let hand = null;\n  Object.assign(P, { wa: 0, wt: 0.2, yo: 0, g: null, wire: -1, ring: 0.07 });\n  switch (P.ph) {\n    case 0: {\n      // Slapped down from the hands, squashing as it lands.\n      const sq = p > 0.6 ? 1 - 0.3 * sin((PI * (p - 0.6)) / 0.4) : 1, r = 10.5 / sqrt(sq), Hn = 11 * sq;\n      P.yo = p \u003c 0.6 ? -56 * (1 - (p / 0.6) ** 2) : 0;\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 0.8), (P.ring = 0.04);\n      hand = [5, -0.3, 0];\n      break;\n    }\n    case 1: {\n      // Centred: coned up and pressed down again while the wobble dies.\n      const Hn = 11 + 10 * sin(PI * sm(0.1, 0.9, p)), r = 10.5 * sqrt(11 / Hn);\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 2.6 * (1 - sm(0, 0.8, p))), (P.ring = 0.05);\n      hand = [Hn * 0.42, -0.5 + 0.4 * sin(p * 20), 0];\n      break;\n    }\n    case 2: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 13, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), cyl(0, h), q));\n      (P.ri = (RC[0] - WALL_T[0]) * sm(0.15, 1, p)), (P.ring = 0.07);\n      hand = [Hn - 1.5, -0.2, 0];\n      break;\n    }\n    case 3: {\n      // Three pulls. The hands squeeze the wall from the base to the rim and\n      // a roll of clay rides up ahead of them.\n      const k = min(2, floor(P.pt / 1.5)), a = (P.pt - k * 1.5) / 1.2, Hp = sp.Hf * 0.93;\n      const HS = [13, mix(13, Hp, 0.55), mix(13, Hp, 0.82), Hp];\n      if (a \u003c= 1) {\n        const Hn = mix(HS[k], HS[k + 1], sm(0, 1, a)), hh = Hn * min(1, a * 1.04) * 0.95, roll = 1.3 * (1 - sm(0.9, 1, a));\n        fill(P, Hn, (h) => mix(cyl(k + 1, h), cyl(k, h), sm(hh - 1, hh + 2.5, h)) + roll * exp(-(((h - hh - 2.6) / 2.2) ** 2)) - 0.8 * exp(-(((h - hh) / 1.4) ** 2)));\n        P.ri = mix(RC[k] - WALL_T[k], RC[k + 1] - WALL_T[k + 1], sm(0.85, 1, a));\n        hand = [hh, -0.3, 0];\n      } else {\n        const Hn = HS[k + 1], b = (a - 1) / 0.25;\n        fill(P, Hn, (h) => cyl(k + 1, h));\n        P.ri = RC[k + 1] - WALL_T[k + 1];\n        hand = [mix(Hn * 0.95, 3, sm(0, 1, b)), 1.5 * sin(PI * b), 0];\n      }\n      break;\n    }\n    case 4: {\n      // Shaped: the belly pushed out from inside, then the neck collared in.\n      const q = sm(0, 1, p), Hn = mix(P.sH, sp.Hf, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), at(sp.pr, (h / Hn) * sp.Hf, sp.Hf), q));\n      P.ri = mix(P.sri, sp.rim - 1.4, q);\n      hand = [Hn * mix(sp.vb, sp.vn, sm(0.4, 0.75, p)), -0.2, 0];\n      break;\n    }\n    case 8: {\n      // Slumped: the wall sinks, bellies and flops round as the wheel turns.\n      const q = sm(0, 1, p), Hn = mix(P.sH, max(12, P.sH * 0.3), q ** 0.8);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), snapR(P, (h / Hn) * 0.6) * (1 + 0.7 * (h / Hn) ** 2) + (3 * h) / Hn, q));\n      P.ri = P.sri > 0 ? max(0, at(P.pr, Hn, Hn) - 1.8) : 0;\n      (P.wt = 6 * sin(PI * min(1, p * 1.3)) + 2), (P.wa = 1);\n      hand = [Hn * 0.5, 4 + 20 * sm(0, 0.3, p), 10 * sm(0, 0.3, p)];\n      break;\n    }\n    case 9: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 11, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), dome(h / Hn, 10.5), q));\n      (P.ri = P.sri * (1 - q)), (P.wa = 2.6), (P.wt = 2 * (1 - q)), (P.ring = 0.04);\n      hand = [Hn * 0.45, mix(6, -0.5, sm(0, 0.5, p)), 0];\n      break;\n    }\n    default: {\n      fill(P, sp.Hf, (h) => at(sp.pr, h, sp.Hf));\n      P.ri = sp.rim - 1.4;\n      // Shown: the hands come away.\n      if (P.ph === 5) hand = [sp.Hf * sp.vn, 2 + 30 * sm(0, 0.6, p), 22 * sm(0, 0.6, p)];\n      if (P.ph === 6) {\n        // Wired off: the hands come in to the wheel and draw the wire under.\n        const a = sm(0, 0.25, p), q = sm(0.25, 1, p), y = mix(BY + 20, BY + E * P.pr[0] * (1 - 2 * q) + 0.5, a);\n        P.wire = a \u003c 1 ? -1 : q;\n        P.hd = [CX - mix(40, 25, a), y, CX + mix(40, 25, a), y];\n        return;\n      }\n      if (P.ph === 7) {\n        // Lifted, then carried back to its slot on the shelf.\n        const q1 = sm(0, 0.3, p), q2 = sm(0.3, 1, p), [sx, sy] = SLOT[P.free], s = mix(1, SHS, q2 ** 0.6);\n        P.g = [mix(CX, sx, q2), mix(BY - 9 * q1, sy + 0.5, q2) - 14 * sin(PI * q2), s];\n        if (q2 \u003c 0.5) {\n          const r = sp.pr[3] * s, y = P.g[1] - 3 * s + 40 * sm(0.2, 0.5, q2);\n          P.hd = [P.g[0] - r, y, P.g[0] + r, y];\n        } else P.hd = null;\n        return;\n      }\n    }\n  }\n  if (hand) {\n    const [h, gap, dy] = hand, r = at(P.pr, h, P.H), o = offset(P, h), y = BY + P.yo - h + dy;\n    P.hd = [CX + o - r - gap, y, CX + o + r + gap, y];\n  } else P.hd = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.clay = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 6, 20));\n  P.LX = mix(9, 55, cl(k[3], 0, 1));\n  if (input.btnPressed && input.btnPressed[0] && P.ph >= 1 && P.ph \u003c= 5) go(P, 8);\n  if ((P.pt += d) >= DUR[P.ph]) go(P, [1, 2, 3, 4, 5, 6, 7, 0, 9, 1][P.ph]);\n  P.w += (SPIN[P.ph] - P.w) * min(1, d * 3);\n  P.rot += TAU * P.w * d;\n  const landing = P.ph === 0 && P.yo \u003c 0;\n  shape(P, P.pt / DUR[P.ph]);\n  // The hands follow their mark, easing over the big jumps between steps.\n  if (!P.hd) P.hs = null;\n  else if (!P.hs) P.hs = P.hd.slice();\n  else for (let i = 0; i \u003c 4; i++) abs(P.hd[i] - P.hs[i]) > 3 ? (P.hs[i] += (P.hd[i] - P.hs[i]) * min(1, d * 14)) : (P.hs[i] = P.hd[i]);\n\n  // Slip flung off the wall by the hands, and spattered as the lump lands.\n  const fling = (x, y, sd, n) => {\n    while (n--) P.dr.push([x, y, sd * (8 + rnd() * 26), -8 - rnd() * 26, PY - 4 + rnd() * 10]);\n  };\n  if (P.hs && (P.ph === 3 || P.ph === 4) && rnd() \u003c d * 3) rnd() \u003c 0.5 ? fling(P.hs[0], P.hs[1], -1, 1) : fling(P.hs[2], P.hs[3], 1, 1);\n  if (landing && P.yo === 0) fling(CX - 9, BY - 2, -1, 3), fling(CX + 9, BY - 2, 1, 3);\n  P.dr = P.dr.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 150 * d);\n    if (q[3] > 0 && q[1] >= q[4]) {\n      P.sp.push([q[0], q[1], rnd() \u003c 0.3 ? 2 : 1, 0.7 + 0.5 * rnd()]);\n      if (P.sp.length > 110) P.sp.shift();\n      return false;\n    }\n    return q[0] > -2 && q[0] \u003c W + 2;\n  });\n  for (const q of P.pieces) q.dry = min(1, q.dry + d / 75);\n}\n\n// The wall, the rack and the lamp's glow, kept until the lamp or the clay changes.\nfunction backdrop(P) {\n  P.bgKey = bgKey(P);\n  // Clay dust lies on everything in the room and takes the clay's colour.\n  const B = P.bg, LX = P.LX, dust = P.dust, wall = WALL.map((v, n) => mix(v, dust[n] * 0.4, 0.55)), wood = WOOD.map((v, n) => mix(v, dust[n] * 0.6, 0.35));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - LX, dy = y - 10, o = (y * W + x) * 3;\n      let f = 0.24 + 0.85 * exp(-(dx * dx + dy * dy * 0.3) / 1500), col = wall;\n      if (dy > 0) {\n        const cw = 4 + dy * 0.72;\n        f += 0.32 * sm(cw + 6, cw - 3, abs(dx)) * exp(-dy / 90);\n      }\n      f *= 0.9 + 0.16 * hash(x >> 1, y >> 1);\n      for (const sy of SHELF) {\n        if (y === sy) (col = wood), (f *= 1.35);\n        else if (y > sy && y \u003c= sy + 3) (col = wood), (f *= 0.75 + 0.15 * hash(x >> 2, sy));\n        else if (y > sy + 3 && y \u003c= sy + 6) f *= 0.45 + 0.17 * (y - sy - 4);\n      }\n      if ((x \u003c 2 || x > 61) && y \u003c SHELF[2] + 4) (col = wood), (f *= x === 1 || x === 62 ? 0.9 : 0.6);\n      const g = 0.55 * exp(-(dx * dx + (y - 10.5) ** 2) / 30);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f + [255, 196, 120][c] * g;\n    }\n}\n\n// The light from the lamp at a spot: its direction and how much reaches it.\nfunction light(P, x, y) {\n  const lx = cl((P.LX - x) / 24, -1.3, 1.3), ly = 0.3 + (y - 10) / 300, n = sqrt(lx * lx + ly * ly + 0.25);\n  return [lx / n, ly / n, 0.5 / n, 0.6 + 0.5 * exp(-((x - P.LX) ** 2 + ((y - 10) * 0.5) ** 2) / 1800)];\n}\n\nlet F;\nconst bgKey = (P) => round(P.LX * 8) * 64 + round(P.clay * 48);\n// A thrown shape turned on its axis, lit by the lamp: wall, rim and the\n// dark inside. Off-centre clay swings its axis round with the wheel.\nfunction solid(o) {\n  const { cx, by, s, pr, Hp, L, alb } = o, Hs = Hp * s, [l0, l1, l2, lm] = L;\n  let Rm = 0;\n  for (let i = 0; i \u003c= Hp + 1; i++) Rm = max(Rm, pr[i]);\n  Rm *= s;\n  const R = (h) => at(pr, h / s, Hp) * s, off = (h) => o.wa * o.s1 + o.wt * (cl(h / Hs, 0, 1) ** 1.5) * o.s2;\n  const RT = R(Hs), cT = cx + off(Hs), yT = by - Hs, ryT = E * RT + 0.35, ri = o.ri * s, ryi = E * ri + 0.25, wb = abs(o.wa) + abs(o.wt);\n  const hn = sqrt(l0 * l0 + l1 * l1 + (l2 + 1) ** 2), hx = l0 / hn, hy = l1 / hn, hz = (l2 + 1) / hn;\n  const y0 = max(0, floor(yT - ryT - 1)), y1 = min(H - 1, ceil(by + E * Rm + 1)), x0 = max(0, floor(cx - Rm - wb - 1)), x1 = min(W - 1, ceil(cx + Rm + wb + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, h0 = by - y - 0.5, ox = wb ? off(h0) : 0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx - ox, o3 = (y * W + x) * 3;\n      let h = h0, r = 0, u = 9, c = 0, k, sp = 0;\n      for (let it = 0; it \u003c 3; it++) {\n        r = R(h);\n        u = r > 0.05 ? px / r : 9;\n        c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n        h = h0 + E * r * c;\n      }\n      r = R(h);\n      u = r > 0.05 ? px / r : 9;\n      if (h >= 0 && h \u003c= Hs && u * u \u003c 1) {\n        c = sqrt(1 - u * u);\n        const hp = h / s, dR = (R(h + 0.6) - R(h - 0.6)) / 1.2 + o.ring * 2.03 * cos(hp * 2.03), nl = 1 / sqrt(1 + dR * dR);\n        const dif = max(0, (u * l0 - dR * l1 + c * l2) * nl), nh = max(0, (u * hx - dR * hy + c * hz) * nl);\n        k = (o.amb + 0.95 * dif + 0.2 * max(0, (-u * l0 + 0.4 * c) * nl)) * lm;\n        sp = o.spec * nh ** 40;\n        if (o.fl) {\n          // Slip streaks and grog flecks ride round with the wheel.\n          const az = asin(u) - o.rot, a = ((az % TAU) + TAU) % TAU, i = floor(a * 6.366), j = floor(hp / 2.3), q = hash(i, j);\n          const st = 1 + 0.1 * sin(3 * az + 1.3) + 0.07 * sin(5 * az + hp * 0.11);\n          k *= st;\n          sp *= st;\n          if (q \u003c 0.2 && abs(a - (i + 0.5) / 6.366) * r \u003c 0.7 && abs(hp - (j + 0.5) * 2.3) \u003c 0.75) k *= q \u003c 0.1 ? 1.5 : 0.55;\n        }\n      } else {\n        const ex = (x + 0.5 - cT) / RT, ey = (y + 0.5 - yT) / ryT;\n        if (RT \u003c 0.4 || ex * ex + ey * ey > 1) continue;\n        const ix = (x + 0.5 - cT) / (ri + 0.01), iy = (y + 0.5 - yT) / ryi;\n        if (ri > 0.4 && ix * ix + iy * iy \u003c 1) k = (0.05 + 0.42 * cl(-ix * l0 * 1.3 + 0.2, 0, 1) * (iy \u003c 0.3 ? 1 : 0.55)) * lm;\n        else (k = (0.3 + 0.8 * l1) * lm), (sp = o.spec * 0.3);\n      }\n      for (let n = 0; n \u003c 3; n++) F[o3 + n] = alb[n] * k + SHINE[n] * sp;\n    }\n}\n\n// The earlier pots on the shelves, wet and dark, then leather-hard, then pale.\nconst STILL = { s: SHS, wa: 0, wt: 0, s1: 0, s2: 0, rot: 0, ring: 0, fl: 0, amb: 0.38 };\nfunction shelves(P, C) {\n  // While a pot is carried over, its slot stands empty.\n  for (let i = 0; i \u003c min(P.n - (P.ph === 7), P.pieces.length); i++) {\n    const q = P.pieces[i], [sx, sy] = SLOT[q.slot], dr = q.dry, a = dr \u003c 0.45 ? dr / 0.45 : (dr - 0.45) / 0.55;\n    const alb = dr \u003c 0.45 ? C[0].map((v, n) => mix(v * 0.62, C[1][n], a)) : C[1].map((v, n) => mix(v, C[2][n], a));\n    solid({ ...STILL, cx: sx, by: sy + 0.5, pr: q.spec.pr, Hp: q.spec.Hf, ri: q.spec.rim - 1.4, alb, spec: 0.6 * (1 - sm(0, 0.4, dr)), L: light(P, sx, sy - 10) });\n  }\n}\n\nconst put = (x, y, col, k) => {\n  if ((x = round(x - 0.5)) >= 0 && x \u003c W && (y = round(y - 0.5)) >= 0 && y \u003c H) for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = col[c] * k;\n};\n\n// The lamp: a cord, an enamel shade and the bulb under it.\nfunction lamp(P) {\n  for (let y = 0; y \u003c 12; y++)\n    for (let x = max(0, floor(P.LX - 8)); x \u003c= min(W - 1, P.LX + 8); x++) {\n      const dx = x + 0.5 - P.LX;\n      if (abs(dx) >= (y \u003c 3 ? 0.6 : y \u003c 10 ? 1.3 + (y - 3) * 0.85 : y \u003c 11 ? 2.4 : 1.2)) continue;\n      const k = y > 2 && y \u003c 9 ? 0.7 + 0.6 * (1 - (y - 3) / 6) * (dx \u003c 0 ? 1 : 0.6) : 1;\n      put(x + 0.5, y + 0.5, y \u003c 3 ? [44, 38, 34] : y \u003c 9 ? [38, 72, 62] : [[236, 170, 96], [255, 244, 214], [255, 226, 168]][y - 9], k);\n    }\n}\n\n// The pot's shadow thrown on the wall behind, leaning away from the lamp.\nfunction shadow(P) {\n  for (let y = max(0, floor(BY - P.H - 6)); y \u003c 106; y++) {\n    const h = BY + 4 - y;\n    if (h \u003c 0 || h > P.H) continue;\n    const r = at(P.pr, h, P.H) * 1.08, xc = CX + (CX - P.LX) * (0.12 + h * 0.007);\n    for (let x = max(0, floor(xc - r - 2)); x \u003c= min(W - 1, xc + r + 2); x++) {\n      const k = 1 - 0.5 * sm(r + 1.5, r - 1, abs(x + 0.5 - xc)), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n}\n\n// The splash pan with its slip, and the wheel head turning in it.\nfunction wheel(P, A) {\n  const [l0, l1, l2, lm] = light(P, CX, PY), mt = METAL.map((v, n) => mix(v, A[n], 0.7)), side = (z) => 0.15 + 0.8 * max(0, z * l0 + sqrt(max(0, 1 - z * z)) * l2);\n  for (let y = 100; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ex = (x + 0.5 - CX) / PR, ey = (y + 0.5 - PY) / (PR * E), dd = ex * ex + ey * ey, o = (y * W + x) * 3;\n      const wx = (x + 0.5 - CX) / WR, wy = (y + 0.5 - BY) / (WR * E), wd = wx * wx + wy * wy;\n      let col, k;\n      if (wd \u003c 1) (col = mt), (k = (0.3 + 0.6 * l1) * lm * (0.9 + 0.1 * cos(sqrt(wd) * WR * 1.4)));\n      else if (wy > 0 && wx * wx \u003c 1 && y + 0.5 \u003c BY + WR * E * sqrt(1 - wx * wx) + 2.5) (col = METAL), (k = 0.5 * side(wx) * lm);\n      else if (dd \u003c 1) dd > 0.86 ? ((col = PLASTIC), (k = (0.6 + 0.6 * l1) * lm)) : ((col = A), (k = (ey \u003c 0 ? 0.26 + 0.12 * (1 + ey) : 0.4) * lm));\n      else if (ey > 0 && ex * ex \u003c 1 && y + 0.5 \u003c PY + PR * E * sqrt(1 - ex * ex) + 6) (col = PLASTIC), (k = side(ex) * lm);\n      else if (y > PY) (col = WALL), (k = 0.2);\n      else continue;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = col[c] * k;\n    }\n  // Slip spattered on the pan, then the wheel's own marks going round.\n  for (const [x, y, z, t] of P.sp) {\n    const ex = (x - CX) / WR, ey = (y - BY) / (WR * E);\n    if (ex * ex + ey * ey \u003c 1.1) continue;\n    put(x, y, A, 0.5 * t * lm);\n    if (z > 1) put(x + 1, y, A, 0.4 * t * lm);\n  }\n  for (let j = 0; j \u003c 6; j++) {\n    const a = P.rot + j * 1.9, r = j \u003c 2 ? 16 : 11.5 + j * 1.6;\n    put(CX + r * sin(a) + 0.5, BY + E * r * cos(a) + 0.5, j \u003c 2 ? [20, 20, 22] : A, j \u003c 2 ? 1 : 0.85 * lm);\n  }\n}\n\n// Skin lit by the lamp, round in section.\nfunction cap(ax, ay, bx, by, ra, rb, col, L, tip) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6, rm = max(ra, rb) + 1;\n  for (let y = max(0, floor(min(ay, by) - rm)); y \u003c= min(H - 1, max(ay, by) + rm); y++)\n    for (let x = max(0, floor(min(ax, bx) - rm)); x \u003c= min(W - 1, max(ax, bx) + rm); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, r = mix(ra, rb, t), dd = ex * ex + ey * ey;\n      if (dd > r * r) continue;\n      const nz = sqrt(1 - dd / (r * r)), k = (0.16 + 0.9 * max(0, (ex / r) * L[0] - (ey / r) * L[1] + nz * L[2])) * L[3], C = tip && t > 0.5 ? tip : col, o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = C[c] * k;\n    }\n}\n\n// A hand on the clay at x, y: the sleeve and forearm down to the side, the\n// back of the hand, the fingers round the wall with slip on them, the thumb.\nfunction hand(P, sd, x, y, slip) {\n  const L = light(P, x, y);\n  cap(x + sd * 22, y + 26, x + sd * 46, y + 62, 5.6, 6.6, SLEEVE, L);\n  cap(x + sd * 6.5, y + 3.5, x + sd * 23, y + 27, 3.4, 4.6, SKIN, L);\n  cap(x + sd * 7.5, y + 3.5, x + sd * 3.2, y - 0.3, 3.6, 3.3, SKIN, L);\n  cap(x + sd * 3.2, y - 0.3, x - sd * 1.8, y + 0.8, 2.6, 2, SKIN, L, slip);\n  cap(x + sd * 3.8, y - 3, x + sd * 2.6, y - 4.4, 1.4, 1.2, SKIN, L, slip);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.pr) return;\n  F = P.f;\n  const c = P.clay * 3, i0 = min(2, floor(c)), f = c - i0, C = [0, 1, 2].map((j) => CLAY[i0][j].map((v, n) => mix(v, CLAY[i0 + 1][j][n], f))), A = C[0];\n  P.dust = C[2];\n  if (P.bgKey !== bgKey(P)) backdrop(P);\n  F.set(P.bg);\n  shelves(P, C);\n  lamp(P);\n  if (!P.g) shadow(P);\n  wheel(P, A);\n  const wire = (front) => {\n    if (P.wire \u003c 0 || !P.hs || P.wire \u003c 0.5 !== front) return;\n    for (let x = P.hs[0]; x \u003c= P.hs[2]; x++) put(x + 0.5, P.hs[1] + 0.5, [220, 222, 230], 0.9);\n  };\n  wire(false);\n  const [gx, gy, gs] = P.g || [CX, BY + P.yo, 1];\n  solid({ cx: gx, by: gy, s: gs, pr: P.pr, Hp: P.H, ri: P.ri, wa: P.wa, wt: P.wt, s1: sin(P.rot), s2: sin(P.rot + 0.8), rot: P.rot, alb: A, spec: 0.9, L: light(P, gx, gy - P.H * gs * 0.5), ring: P.ring, fl: 1, amb: 0.08 });\n  wire(true);\n  if (P.hs) {\n    const slip = SKIN.map((v, n) => mix(v, A[n], 0.6));\n    hand(P, -1, P.hs[0], P.hs[1], slip);\n    hand(P, 1, P.hs[2], P.hs[3], slip);\n  }\n  for (const [x, y] of P.dr) put(x, y, A, 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Clay","min":0,"max":1,"about":"The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower."},{"name":"Pots","min":6,"max":20,"about":"How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it."}],"start":[0,2,6,0.06],"measures":{"motion":0.6649,"detail":0.0524,"edges":0.2558,"complexity":1.7276,"coverage":0.8999,"colour":0.2006,"drift":0.0739},"knobResponse":[0.0662,0.0422,0.05,0.1325]},{"slug":"powder-burst","title":"Powder Burst","family":"cosmetic","round":37,"note":"어두운 스튜디오 바닥의 파우더 케이크가 6.3초마다 좌우를 번갈아 맞아 터지고, 마젠타 파우더가 둥근 머리를 이고 4초쯤 만에 패널 꼭대기 언저리까지 솟아요. 머리는 고리로 말리며 버섯 꼴이 되고, 가장자리에서 고운 먼지가 말려 나가고 무거운 알갱이는 포물선을 그리며 떨어지고, 운모가 가끔 반짝여요. K3 은 머리를 패널보다 넓게 키워 위로 빠져나가게 하고, K4 는 운모를 한 번에 1,460조각까지 늘려요. 누르면 바로 케이크를 쳐요.","idea":"In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.","buttons":"K1 tap strikes the cake now.","code":"// ===== Patternflow pattern =====\n// Title:   Powder Burst\n// Family:  cosmetic\n// Idea:    In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after the slow-motion powder explosions of cosmetics advertising\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive.\n// Knob 2: Speed. How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower.\n// Knob 3: Force. How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90.\n// Knob 4: Shimmer. Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment.\n// Buttons: K1 tap strikes the cake now.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 9000;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Kinds of particle: fine powder, heavy specks, mica flakes.\nconst FINE = 0, SPECK = 1, MICA = 2;\n// Strikes alive at once, kept in a ring.\nconst NB = 4;\n// How far below the head the eye is (see draw), the share of grains drawn\n// round the axis rather than in the plane, how thick powder turns to light\n// (1 - exp(-GAIN d)), and the dust's mean life in seconds.\nconst TILT = 0.12, GAIN = 3.6, FILL = 0.5, LIFE = 6.2;\n// Small eddies: a stream function of four travelling waves, 19 to 44 LEDs\n// long, whose curl wrinkles the cloud's edge without bunching the powder.\nconst WAVES = [\n  [44, 0.4, 0.5],\n  [33, 2.1, -0.7],\n  [25, 3.9, 0.8],\n  [19, 5.1, -1.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 1.9];\n});\n// And a finer set, 8 to 13 LEDs, that only the young powder feels: it\n// wrinkles the head's edge into billows.\nconst FINE_WAVES = [\n  [13, 0.9, 2.2],\n  [10.5, 2.8, -2.6],\n  [8, 4.6, 3.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 2.3];\n});\nconst GS = 4, GX = W / GS + 3, GY = H / GS + 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), kd: F(MAXP), g: F(MAXP), w: F(MAXP), ph: F(MAXP), ca: F(MAXP), sa: F(MAXP),\n    kind: new Uint8Array(MAXP), bid: new Uint8Array(MAXP), n: 0,\n    B0: F(NB).fill(-99), BX: F(NB), BY: F(NB), BD: F(NB), BR: F(NB), BP: F(NB), slot: 0, ring: new Float64Array(NB * 7), nr: 0, fl: [0, 0],\n    U: F(GX * GY), V: F(GX * GY), U2: F(GX * GY), V2: F(GX * GY), D: F(N), O: F(N), S: F(N), G: F(N), tmp: F(N), col: F(12),\n    T: 0, next: 0, side: rnd() \u003c 0.5 ? -1 : 1, hue: 0, force: 0, shim: 0.06, started: false,\n  };\n}\n\n// A strike at x0: the cake sits on the floor at row 116.\nfunction strike(S, x0) {\n  const q = (S.slot = (S.slot + 1) % NB), f = S.force;\n  S.B0[q] = S.T;\n  S.BP[q] = 0;\n  S.BX[q] = x0;\n  S.BY[q] = 116;\n  // How far the head climbs, and how wide its ring opens.\n  S.BD[q] = (80 + 50 * f) * (0.92 + 0.16 * rnd());\n  S.BR[q] = (14.5 + 4.5 * f) * (0.9 + 0.2 * rnd());\n  const nf = 2600, ns = round((90 + 110 * f) * (0.8 + 0.4 * rnd())), nm = 60 + round(1400 * S.shim);\n  for (let j = 0; j \u003c nf + ns + nm && S.n \u003c MAXP; j++) {\n    const i = S.n++, kind = j \u003c nf ? FINE : j \u003c nf + ns ? SPECK : MICA;\n    S.x[i] = x0 + (rnd() - 0.5) * 5;\n    S.y[i] = 115 + (rnd() - 0.5) * 2;\n    S.age[i] = -rnd() * 0.06;\n    S.kind[i] = kind;\n    S.bid[i] = q;\n    S.ph[i] = rnd() * 2 * PI;\n    const az = rnd() * 2 * PI, fill = rnd() \u003c FILL;\n    S.ca[i] = fill ? cos(az) : 1;\n    S.sa[i] = fill ? sin(az) : 0;\n    if (kind === SPECK) {\n      // Specks are thrown out of the cake on steep arcs and fall back.\n      const a = (rnd() + rnd() + rnd() - 1.5) * 1.1, sp = (60 + 50 * rnd()) * (1 + 0.5 * f);\n      S.vx[i] = sp * sin(a);\n      S.vy[i] = -sp * cos(a);\n      S.kd[i] = 0.5 + 0.4 * rnd();\n      S.g[i] = 55 + 25 * rnd();\n      S.life[i] = 2.4 + rnd();\n      S.w[i] = 0.5 + 0.5 * rnd();\n      continue;\n    }\n    // Fine powder is thrown from the cake to a place round the head's\n    // start and comes to rest there in about 0.2 s, its throw halving every\n    // 0.04 to 0.06 s, so the head forms full: 16% round its two eddies, 40%\n    // in a dome over them. Another 22% is lofted over the next 0.6 s and\n    // drawn up behind as the stem, 10% is a skirt flung low along the floor\n    // and 12% a spray that fans out high.\n    const kd = (S.kd[i] = 12 + 6 * rnd()), u = rnd(), R = S.BR[q];\n    let tx, ty;\n    if (u \u003c 0.16) {\n      // Round the two eddies of the head, the hubs it rolls up on.\n      const g = gauss2();\n      tx = x0 + (rnd() \u003c 0.5 ? -R : R) + g[0] * 0.28 * R;\n      ty = 104 + g[1] * 0.28 * R;\n    } else if (u \u003c 0.56 || kind === MICA) {\n      // A thick dome over the head: as the head climbs its outside runs\n      // down round the eddies and curls in under the cap.\n      const t = PI * (1.05 + 0.9 * rnd()), r = 1 - 0.4 * rnd() * rnd();\n      tx = x0 + r * cos(t) * 1.75 * R;\n      ty = 104 + r * sin(t) * 1.45 * R;\n    } else if (u \u003c 0.78) {\n      tx = x0 + (rnd() - 0.5) * 10;\n      ty = 112 - 6 * rnd();\n      S.age[i] = -0.1 - 0.6 * rnd();\n    } else if (u \u003c 0.88) {\n      tx = x0 + (rnd() \u003c 0.5 ? -1 : 1) * (8 + 18 * rnd()) * (1 + 0.4 * f);\n      ty = 114 - 4 * rnd();\n    } else {\n      const a = (rnd() - 0.5) * 2.4, r = (24 + 30 * rnd()) * (1 + 0.4 * f);\n      tx = x0 + r * sin(a);\n      ty = 108 - r * cos(a);\n    }\n    S.vx[i] = (tx - S.x[i]) * kd;\n    S.vy[i] = (ty - S.y[i]) * kd;\n    S.g[i] = 0.4 + 1.2 * rnd();\n    S.life[i] = LIFE * (0.8 + 0.4 * rnd());\n    S.w[i] = 0.6 + 0.6 * rnd();\n  }\n}\n\nfunction gauss2() {\n  const r = sqrt(-2 * Math.log(1 - rnd())), t = 2 * PI * rnd();\n  return [r * cos(t), r * sin(t)];\n}\n\nfunction round(v) {\n  return floor(v + 0.5);\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.kd[i] = S.kd[j];\n  S.g[i] = S.g[j];\n  S.w[i] = S.w[j];\n  S.ph[i] = S.ph[j];\n  S.ca[i] = S.ca[j];\n  S.sa[i] = S.sa[j];\n  S.kind[i] = S.kind[j];\n  S.bid[i] = S.bid[j];\n}\n\n// The eddies on a grid every 4 LEDs, read off between.\nfunction eddies(S) {\n  const T = S.T;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U[gy * GX + gx] = u;\n      S.V[gy * GX + gx] = v;\n      u = 0;\n      v = 0;\n      for (const [kx, ky, w, m, ph] of FINE_WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U2[gy * GX + gx] = u;\n      S.V2[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, h) {\n  S.T += h;\n  S.next -= h;\n  if (S.next \u003c= 0) {\n    // Strikes alternate sides of the middle, 9 to 15 LEDs out.\n    S.side = -S.side;\n    strike(S, 32 + S.side * (9 + 6 * rnd()));\n    S.next = 6.3 * (0.95 + 0.1 * rnd());\n  }\n  eddies(S);\n  // Each strike's head: the plume's ring, seen edge on as two eddies of\n  // opposite spin R apart either side of its axis, climbing D rows on a\n  // curve that slows as it goes.\n  const ring = S.ring;\n  let nr = 0;\n  for (let q = 0; q \u003c NB; q++) {\n    // The head forms once the thrown powder has come to rest round it,\n    // 0.3 s after the strike, and gathers speed over a quarter second.\n    const a = S.T - S.B0[q] - 0.3;\n    if (a \u003c 0 || a > 7) continue;\n    const tau = 2.6, D = S.BD[q], V = ((D / tau) * exp(-a / tau) + 3) * sm(0, 0.25, a);\n    S.BP[q] += V * h;\n    // A third of the climb is the eddies' own: their strength is what moves\n    // a pair of cores 0.65 R wide at V / 3, 4.42 pi R V / 3. The rest is the\n    // warm air the head rides on, a broad rising blob that carries the\n    // cores at the same 2V / 3 as the powder round them; full-strength\n    // eddies rolled the dome into the cores within a second and the head\n    // read as two lobes.\n    const R = S.BR[q], rc = 0.65 * R, o = nr * 7;\n    ring[o] = S.BX[q];\n    ring[o + 1] = S.BY[q] - 12 - S.BP[q];\n    ring[o + 2] = R;\n    ring[o + 3] = rc * rc;\n    ring[o + 4] = (R * (4 + 0.4225) * V) / 6;\n    ring[o + 5] = ((2 * V) / 3) * exp(1 / (1.9 * 1.9));\n    ring[o + 6] = 30 * exp(-a / 2);\n    nr++;\n  }\n  S.nr = nr;\n  const fl = S.fl;\n  for (let i = S.n - 1; i >= 0; i--) {\n    let age = S.age[i];\n    if (age \u003c 0) {\n      S.age[i] = age + h;\n      continue;\n    }\n    age = S.age[i] += h;\n    const x = S.x[i], y = S.y[i];\n    if (age > S.life[i] || y > H + 6 || y \u003c -30 || x \u003c -20 || x > W + 20) {\n      kill(S, i);\n      continue;\n    }\n    if (S.kind[i] === SPECK) {\n      flow(S, x, y, -1);\n      const kd = 1 - exp(-S.kd[i] * h);\n      S.vx[i] += (fl[0] - S.vx[i]) * kd;\n      S.vy[i] += (fl[1] - S.vy[i]) * kd + S.g[i] * h;\n      S.x[i] = x + S.vx[i] * h;\n      S.y[i] = y + S.vy[i] * h;\n    } else {\n      // Fine powder rides the air exactly, plus what is left of the throw\n      // from the strike and a slow settling. Given inertia instead, as the\n      // specks have, it was flung out of the head's two eddies and the head\n      // read as a hollow arch. It is moved by the midpoint rule: a plain\n      // step turned each eddy's core, 19 radians a second, into an outward\n      // spiral, and the head showed two dark holes like eye sockets.\n      const kd = exp(-S.kd[i] * 0.5 * h), tx = S.vx[i] * kd, ty = S.vy[i] * kd + S.g[i] * min(1, age * 0.3);\n      flow(S, x, y, age);\n      flow(S, x + 0.5 * h * (fl[0] + tx), y + 0.5 * h * (fl[1] + ty), age);\n      S.x[i] = x + h * (fl[0] + tx) + (rnd() - 0.5) * 0.5;\n      S.y[i] = y + h * (fl[1] + ty) + (rnd() - 0.5) * 0.5;\n      S.vx[i] *= kd * kd;\n      S.vy[i] *= kd * kd;\n    }\n    // The floor: powder that comes down stays down.\n    if (S.y[i] > 118) {\n      S.y[i] = 118;\n      S.vy[i] *= -0.2;\n      S.vx[i] *= 0.6;\n    }\n  }\n}\n\n// The air at (x, y), into S.fl: the heads' eddies, the column of air still\n// rising under each head, and for powder (age 0 and up) the small eddies,\n// which grow as it ages and spreads.\nfunction flow(S, x, y, age) {\n  const ring = S.ring;\n  let ux = 0, uy = 0;\n  for (let r = 0; r \u003c S.nr; r++) {\n    const o = r * 7, xc = ring[o], yc = ring[o + 1], R = ring[o + 2], rc2 = ring[o + 3], G = ring[o + 4];\n    // Left eddy spins so its inside runs up, the right one the other way.\n    let dx = x - xc + R, dy = y - yc, q = -G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    dx = x - xc - R;\n    q = G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    // The warm air the head rides on.\n    const ex = (x - xc) / (1.9 * R), ey = (y - yc + 0.2 * R) / (1.7 * R);\n    uy -= ring[o + 5] * exp(-ex * ex - ey * ey);\n    // Under the head a column of air keeps rising after it, lifting the\n    // late powder into a stem.\n    if (y > yc) {\n      const sx = (x - xc) / 7;\n      uy -= ring[o + 6] * exp(-sx * sx);\n    }\n  }\n  if (age >= 0) {\n    const U = S.U, V = S.V;\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const eu = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const ev = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    const amp = 0.8 + 1.6 * min(1, age * 0.4), a2 = 9 * exp(-age * 0.7);\n    const U2 = S.U2, V2 = S.V2;\n    const fu = (U2[g] * (1 - ax) + U2[g + 1] * ax) * (1 - ay) + (U2[g + GX] * (1 - ax) + U2[g + GX + 1] * ax) * ay;\n    const fv = (V2[g] * (1 - ax) + V2[g + 1] * ax) * (1 - ay) + (V2[g + GX] * (1 - ax) + V2[g + GX + 1] * ax) * ay;\n    ux += eu * amp + fu * a2;\n    uy += ev * amp + fv * a2;\n  }\n  S.fl[0] = ux;\n  S.fl[1] = uy;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.force = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open 1.5 s after the first strike, the head already rising.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  const h = d * rate;\n  const sub = h > 0.025 ? 2 : 1;\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, O = S.O, SP = S.S, G = S.G, tmp = S.tmp, col = S.col, T = S.T, sh = S.shim;\n  D.fill(0);\n  O.fill(0);\n  SP.fill(0);\n  G.fill(0);\n  // The flow is worked out in one plane through the head's axis, and the\n  // cloud is round that axis, so half the grains are drawn at an angle of\n  // their own round it, seen from a little below, and half in the plane,\n  // which keeps the curls at the head's rim. All in the plane, the head\n  // showed two lobes with dark between them where the jet up the middle\n  // swept it clean; all round the axis, a smooth ball.\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / S.life[i], u2 = u * u, env = min(1, age * 12) * (1 - u2 * u2);\n    const kind = S.kind[i], ax = S.BX[S.bid[i]], r = S.x[i] - ax;\n    const x = ax + r * S.ca[i], y = S.y[i] + r * S.sa[i] * TILT;\n    if (kind === SPECK) splat(SP, x, y, S.w[i] * env);\n    else if (kind === MICA) {\n      // A flake only shows when it turns to the light: a swell a few times\n      // a second, sharpened so most of the time it is dark. Flakes add no\n      // body to the cloud, so Shimmer leaves its size alone.\n      const tw = 0.5 + 0.5 * sin(S.ph[i] + (3 + 2 * sin(S.ph[i] * 3)) * T);\n      const t4 = tw * tw * tw * tw;\n      splat(G, x, y, env * t4 * t4 * (0.8 + 1.2 * sh));\n    } else {\n      // Powder older than a second and a half goes into a softer layer,\n      // so the trails behind the head spread into haze.\n      const old = sm(1, 2.5, age);\n      if (old \u003c 1) splat(D, x, y, S.w[i] * env * (1 - old));\n      if (old > 0) splat(O, x, y, S.w[i] * env * old);\n    }\n  }\n  blur(D, tmp, 2);\n  blur(D, tmp, 1);\n  blur(O, tmp, 3);\n  blur(O, tmp, 2);\n  for (let p = 0; p \u003c N; p++) D[p] += O[p];\n  // Pigment, its pale lit side, the pearl tint mica gives the lit side, and\n  // the glint colour. Coral to lemon read brown and olive when dim, so there\n  // the pigment is paler. Elsewhere the pigment is laid at full saturation\n  // and only the lit side of thick powder goes pale: with an orchid pink at\n  // 0.82 and thick powder paling all over, the cloud's colourfulness was\n  // 0.231, and this way it is 0.393, beside Tunnel on the colour x drift\n  // map, since the cell where it first stood beside Bokeh took Heawood\n  // Torus first.\n  const h = S.hue + 0.84, hf = h - floor(h), warm = sm(0.0, 0.05, hf) * (1 - sm(0.17, 0.24, hf));\n  hsv(h, 1.0 - 0.32 * warm, 1, col, 0);\n  hsv(h - 0.02, 0.6 - 0.12 * warm, 1, col, 3);\n  hsv(h + 0.08, 0.15, 1, col, 6);\n  hsv(h + 0.2, 0.4, 1, col, 9);\n  // Warm powder's faint end is lifted too: a fading peach cloud read as\n  // milky coffee.\n  const gain = GAIN + 0.3 * warm, ga = 1 - 0.4 * warm;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const d = D[p], a = (1 - exp(-d * gain)) ** ga, s = min(1.4, SP[p]), g = G[p];\n      // The studio light is above and to the left: where the cloud thickens\n      // downward or rightward its surface faces the light. Without it the\n      // head was a flat blob of colour.\n      const dn = y \u003c H - 1 ? D[p + W] : d, up = y > 0 ? D[p - W] : d, rt = x \u003c W - 1 ? D[p + 1] : d, lf = x > 0 ? D[p - 1] : d;\n      const nrm = cl(((dn - up) * 0.8 + (rt - lf) * 0.4) / (d + 0.5), -1, 1), lit = 0.98 + 0.4 * nrm;\n      // Thin powder glows in the pigment, thick powder goes pale and bright,\n      // and with mica its lit side turns pearl.\n      const wt = a * a * cl(0.22 + 0.6 * nrm, 0, 1), pm = sh * 0.9 * cl(0.55 + nrm, 0, 1);\n      let r = 0, gg = 0, b = 0;\n      for (let c = 0; c \u003c 3; c++) {\n        const lc = col[3 + c] * (1 - pm) + col[9 + c] * pm, v = (col[c] * (1 - wt) + lc * wt) * a * lit;\n        // Specks are pigment, glints are light.\n        const o = v + col[c] * s * 0.8 + col[6 + c] * g;\n        if (c === 0) r = o;\n        else if (c === 1) gg = o;\n        else b = o;\n      }\n      if (warm > 0) {\n        // Dim peach and lemon read brown and olive, so as warm powder dims\n        // it greys toward a pale dust of the same level instead.\n        const m = max(r, gg, b), k = 0.9 * warm * sqrt(1 - min(1, m / 0.85));\n        r += (m - r) * k;\n        gg += (m - gg) * k;\n        b += (m - b) * k;\n      }\n      display.setPixel(x, y, knee(r * 255), knee(gg * 255), knee(b * 255));\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-powder-burst","type":"code","name":"powder-burst","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Powder Burst\n// Family:  cosmetic\n// Idea:    In slow motion a cake of loose pigment powder at the foot of a dark studio is struck and bursts: the powder rises through the whole panel as a plume whose head rolls up into a ring, a mushroom of soft colour with fine dust curling off its rim and heavier specks arcing back down, mica glinting in it, until it drifts apart and settles and the next strike comes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after the slow-motion powder explosions of cosmetics advertising\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1\n//\n// Knob 1: Hue. The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive.\n// Knob 2: Speed. How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower.\n// Knob 3: Force. How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90.\n// Knob 4: Shimmer. Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment.\n// Buttons: K1 tap strikes the cake now.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 9000;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Kinds of particle: fine powder, heavy specks, mica flakes.\nconst FINE = 0, SPECK = 1, MICA = 2;\n// Strikes alive at once, kept in a ring.\nconst NB = 4;\n// How far below the head the eye is (see draw), the share of grains drawn\n// round the axis rather than in the plane, how thick powder turns to light\n// (1 - exp(-GAIN d)), and the dust's mean life in seconds.\nconst TILT = 0.12, GAIN = 3.6, FILL = 0.5, LIFE = 6.2;\n// Small eddies: a stream function of four travelling waves, 19 to 44 LEDs\n// long, whose curl wrinkles the cloud's edge without bunching the powder.\nconst WAVES = [\n  [44, 0.4, 0.5],\n  [33, 2.1, -0.7],\n  [25, 3.9, 0.8],\n  [19, 5.1, -1.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 1.9];\n});\n// And a finer set, 8 to 13 LEDs, that only the young powder feels: it\n// wrinkles the head's edge into billows.\nconst FINE_WAVES = [\n  [13, 0.9, 2.2],\n  [10.5, 2.8, -2.6],\n  [8, 4.6, 3.0],\n].map(([l, a, w], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, 1 / k, j * 2.3];\n});\nconst GS = 4, GX = W / GS + 3, GY = H / GS + 3;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), kd: F(MAXP), g: F(MAXP), w: F(MAXP), ph: F(MAXP), ca: F(MAXP), sa: F(MAXP),\n    kind: new Uint8Array(MAXP), bid: new Uint8Array(MAXP), n: 0,\n    B0: F(NB).fill(-99), BX: F(NB), BY: F(NB), BD: F(NB), BR: F(NB), BP: F(NB), slot: 0, ring: new Float64Array(NB * 7), nr: 0, fl: [0, 0],\n    U: F(GX * GY), V: F(GX * GY), U2: F(GX * GY), V2: F(GX * GY), D: F(N), O: F(N), S: F(N), G: F(N), tmp: F(N), col: F(12),\n    T: 0, next: 0, side: rnd() \u003c 0.5 ? -1 : 1, hue: 0, force: 0, shim: 0.06, started: false,\n  };\n}\n\n// A strike at x0: the cake sits on the floor at row 116.\nfunction strike(S, x0) {\n  const q = (S.slot = (S.slot + 1) % NB), f = S.force;\n  S.B0[q] = S.T;\n  S.BP[q] = 0;\n  S.BX[q] = x0;\n  S.BY[q] = 116;\n  // How far the head climbs, and how wide its ring opens.\n  S.BD[q] = (80 + 50 * f) * (0.92 + 0.16 * rnd());\n  S.BR[q] = (14.5 + 4.5 * f) * (0.9 + 0.2 * rnd());\n  const nf = 2600, ns = round((90 + 110 * f) * (0.8 + 0.4 * rnd())), nm = 60 + round(1400 * S.shim);\n  for (let j = 0; j \u003c nf + ns + nm && S.n \u003c MAXP; j++) {\n    const i = S.n++, kind = j \u003c nf ? FINE : j \u003c nf + ns ? SPECK : MICA;\n    S.x[i] = x0 + (rnd() - 0.5) * 5;\n    S.y[i] = 115 + (rnd() - 0.5) * 2;\n    S.age[i] = -rnd() * 0.06;\n    S.kind[i] = kind;\n    S.bid[i] = q;\n    S.ph[i] = rnd() * 2 * PI;\n    const az = rnd() * 2 * PI, fill = rnd() \u003c FILL;\n    S.ca[i] = fill ? cos(az) : 1;\n    S.sa[i] = fill ? sin(az) : 0;\n    if (kind === SPECK) {\n      // Specks are thrown out of the cake on steep arcs and fall back.\n      const a = (rnd() + rnd() + rnd() - 1.5) * 1.1, sp = (60 + 50 * rnd()) * (1 + 0.5 * f);\n      S.vx[i] = sp * sin(a);\n      S.vy[i] = -sp * cos(a);\n      S.kd[i] = 0.5 + 0.4 * rnd();\n      S.g[i] = 55 + 25 * rnd();\n      S.life[i] = 2.4 + rnd();\n      S.w[i] = 0.5 + 0.5 * rnd();\n      continue;\n    }\n    // Fine powder is thrown from the cake to a place round the head's\n    // start and comes to rest there in about 0.2 s, its throw halving every\n    // 0.04 to 0.06 s, so the head forms full: 16% round its two eddies, 40%\n    // in a dome over them. Another 22% is lofted over the next 0.6 s and\n    // drawn up behind as the stem, 10% is a skirt flung low along the floor\n    // and 12% a spray that fans out high.\n    const kd = (S.kd[i] = 12 + 6 * rnd()), u = rnd(), R = S.BR[q];\n    let tx, ty;\n    if (u \u003c 0.16) {\n      // Round the two eddies of the head, the hubs it rolls up on.\n      const g = gauss2();\n      tx = x0 + (rnd() \u003c 0.5 ? -R : R) + g[0] * 0.28 * R;\n      ty = 104 + g[1] * 0.28 * R;\n    } else if (u \u003c 0.56 || kind === MICA) {\n      // A thick dome over the head: as the head climbs its outside runs\n      // down round the eddies and curls in under the cap.\n      const t = PI * (1.05 + 0.9 * rnd()), r = 1 - 0.4 * rnd() * rnd();\n      tx = x0 + r * cos(t) * 1.75 * R;\n      ty = 104 + r * sin(t) * 1.45 * R;\n    } else if (u \u003c 0.78) {\n      tx = x0 + (rnd() - 0.5) * 10;\n      ty = 112 - 6 * rnd();\n      S.age[i] = -0.1 - 0.6 * rnd();\n    } else if (u \u003c 0.88) {\n      tx = x0 + (rnd() \u003c 0.5 ? -1 : 1) * (8 + 18 * rnd()) * (1 + 0.4 * f);\n      ty = 114 - 4 * rnd();\n    } else {\n      const a = (rnd() - 0.5) * 2.4, r = (24 + 30 * rnd()) * (1 + 0.4 * f);\n      tx = x0 + r * sin(a);\n      ty = 108 - r * cos(a);\n    }\n    S.vx[i] = (tx - S.x[i]) * kd;\n    S.vy[i] = (ty - S.y[i]) * kd;\n    S.g[i] = 0.4 + 1.2 * rnd();\n    S.life[i] = LIFE * (0.8 + 0.4 * rnd());\n    S.w[i] = 0.6 + 0.6 * rnd();\n  }\n}\n\nfunction gauss2() {\n  const r = sqrt(-2 * Math.log(1 - rnd())), t = 2 * PI * rnd();\n  return [r * cos(t), r * sin(t)];\n}\n\nfunction round(v) {\n  return floor(v + 0.5);\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.kd[i] = S.kd[j];\n  S.g[i] = S.g[j];\n  S.w[i] = S.w[j];\n  S.ph[i] = S.ph[j];\n  S.ca[i] = S.ca[j];\n  S.sa[i] = S.sa[j];\n  S.kind[i] = S.kind[j];\n  S.bid[i] = S.bid[j];\n}\n\n// The eddies on a grid every 4 LEDs, read off between.\nfunction eddies(S) {\n  const T = S.T;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U[gy * GX + gx] = u;\n      S.V[gy * GX + gx] = v;\n      u = 0;\n      v = 0;\n      for (const [kx, ky, w, m, ph] of FINE_WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      S.U2[gy * GX + gx] = u;\n      S.V2[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, h) {\n  S.T += h;\n  S.next -= h;\n  if (S.next \u003c= 0) {\n    // Strikes alternate sides of the middle, 9 to 15 LEDs out.\n    S.side = -S.side;\n    strike(S, 32 + S.side * (9 + 6 * rnd()));\n    S.next = 6.3 * (0.95 + 0.1 * rnd());\n  }\n  eddies(S);\n  // Each strike's head: the plume's ring, seen edge on as two eddies of\n  // opposite spin R apart either side of its axis, climbing D rows on a\n  // curve that slows as it goes.\n  const ring = S.ring;\n  let nr = 0;\n  for (let q = 0; q \u003c NB; q++) {\n    // The head forms once the thrown powder has come to rest round it,\n    // 0.3 s after the strike, and gathers speed over a quarter second.\n    const a = S.T - S.B0[q] - 0.3;\n    if (a \u003c 0 || a > 7) continue;\n    const tau = 2.6, D = S.BD[q], V = ((D / tau) * exp(-a / tau) + 3) * sm(0, 0.25, a);\n    S.BP[q] += V * h;\n    // A third of the climb is the eddies' own: their strength is what moves\n    // a pair of cores 0.65 R wide at V / 3, 4.42 pi R V / 3. The rest is the\n    // warm air the head rides on, a broad rising blob that carries the\n    // cores at the same 2V / 3 as the powder round them; full-strength\n    // eddies rolled the dome into the cores within a second and the head\n    // read as two lobes.\n    const R = S.BR[q], rc = 0.65 * R, o = nr * 7;\n    ring[o] = S.BX[q];\n    ring[o + 1] = S.BY[q] - 12 - S.BP[q];\n    ring[o + 2] = R;\n    ring[o + 3] = rc * rc;\n    ring[o + 4] = (R * (4 + 0.4225) * V) / 6;\n    ring[o + 5] = ((2 * V) / 3) * exp(1 / (1.9 * 1.9));\n    ring[o + 6] = 30 * exp(-a / 2);\n    nr++;\n  }\n  S.nr = nr;\n  const fl = S.fl;\n  for (let i = S.n - 1; i >= 0; i--) {\n    let age = S.age[i];\n    if (age \u003c 0) {\n      S.age[i] = age + h;\n      continue;\n    }\n    age = S.age[i] += h;\n    const x = S.x[i], y = S.y[i];\n    if (age > S.life[i] || y > H + 6 || y \u003c -30 || x \u003c -20 || x > W + 20) {\n      kill(S, i);\n      continue;\n    }\n    if (S.kind[i] === SPECK) {\n      flow(S, x, y, -1);\n      const kd = 1 - exp(-S.kd[i] * h);\n      S.vx[i] += (fl[0] - S.vx[i]) * kd;\n      S.vy[i] += (fl[1] - S.vy[i]) * kd + S.g[i] * h;\n      S.x[i] = x + S.vx[i] * h;\n      S.y[i] = y + S.vy[i] * h;\n    } else {\n      // Fine powder rides the air exactly, plus what is left of the throw\n      // from the strike and a slow settling. Given inertia instead, as the\n      // specks have, it was flung out of the head's two eddies and the head\n      // read as a hollow arch. It is moved by the midpoint rule: a plain\n      // step turned each eddy's core, 19 radians a second, into an outward\n      // spiral, and the head showed two dark holes like eye sockets.\n      const kd = exp(-S.kd[i] * 0.5 * h), tx = S.vx[i] * kd, ty = S.vy[i] * kd + S.g[i] * min(1, age * 0.3);\n      flow(S, x, y, age);\n      flow(S, x + 0.5 * h * (fl[0] + tx), y + 0.5 * h * (fl[1] + ty), age);\n      S.x[i] = x + h * (fl[0] + tx) + (rnd() - 0.5) * 0.5;\n      S.y[i] = y + h * (fl[1] + ty) + (rnd() - 0.5) * 0.5;\n      S.vx[i] *= kd * kd;\n      S.vy[i] *= kd * kd;\n    }\n    // The floor: powder that comes down stays down.\n    if (S.y[i] > 118) {\n      S.y[i] = 118;\n      S.vy[i] *= -0.2;\n      S.vx[i] *= 0.6;\n    }\n  }\n}\n\n// The air at (x, y), into S.fl: the heads' eddies, the column of air still\n// rising under each head, and for powder (age 0 and up) the small eddies,\n// which grow as it ages and spreads.\nfunction flow(S, x, y, age) {\n  const ring = S.ring;\n  let ux = 0, uy = 0;\n  for (let r = 0; r \u003c S.nr; r++) {\n    const o = r * 7, xc = ring[o], yc = ring[o + 1], R = ring[o + 2], rc2 = ring[o + 3], G = ring[o + 4];\n    // Left eddy spins so its inside runs up, the right one the other way.\n    let dx = x - xc + R, dy = y - yc, q = -G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    dx = x - xc - R;\n    q = G / (dx * dx + dy * dy + rc2);\n    ux -= q * dy;\n    uy += q * dx;\n    // The warm air the head rides on.\n    const ex = (x - xc) / (1.9 * R), ey = (y - yc + 0.2 * R) / (1.7 * R);\n    uy -= ring[o + 5] * exp(-ex * ex - ey * ey);\n    // Under the head a column of air keeps rising after it, lifting the\n    // late powder into a stem.\n    if (y > yc) {\n      const sx = (x - xc) / 7;\n      uy -= ring[o + 6] * exp(-sx * sx);\n    }\n  }\n  if (age >= 0) {\n    const U = S.U, V = S.V;\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const eu = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const ev = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    const amp = 0.8 + 1.6 * min(1, age * 0.4), a2 = 9 * exp(-age * 0.7);\n    const U2 = S.U2, V2 = S.V2;\n    const fu = (U2[g] * (1 - ax) + U2[g + 1] * ax) * (1 - ay) + (U2[g + GX] * (1 - ax) + U2[g + GX + 1] * ax) * ay;\n    const fv = (V2[g] * (1 - ax) + V2[g + 1] * ax) * (1 - ay) + (V2[g + GX] * (1 - ax) + V2[g + GX + 1] * ax) * ay;\n    ux += eu * amp + fu * a2;\n    uy += ev * amp + fv * a2;\n  }\n  S.fl[0] = ux;\n  S.fl[1] = uy;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.force = cl(k[2], 0, 1);\n  S.shim = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open 1.5 s after the first strike, the head already rising.\n    for (let i = 0; i \u003c 45; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.next = 0;\n  const h = d * rate;\n  const sub = h > 0.025 ? 2 : 1;\n  for (let i = 0; i \u003c sub; i++) step(S, h / sub);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, O = S.O, SP = S.S, G = S.G, tmp = S.tmp, col = S.col, T = S.T, sh = S.shim;\n  D.fill(0);\n  O.fill(0);\n  SP.fill(0);\n  G.fill(0);\n  // The flow is worked out in one plane through the head's axis, and the\n  // cloud is round that axis, so half the grains are drawn at an angle of\n  // their own round it, seen from a little below, and half in the plane,\n  // which keeps the curls at the head's rim. All in the plane, the head\n  // showed two lobes with dark between them where the jet up the middle\n  // swept it clean; all round the axis, a smooth ball.\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i];\n    if (age \u003c 0) continue;\n    const u = age / S.life[i], u2 = u * u, env = min(1, age * 12) * (1 - u2 * u2);\n    const kind = S.kind[i], ax = S.BX[S.bid[i]], r = S.x[i] - ax;\n    const x = ax + r * S.ca[i], y = S.y[i] + r * S.sa[i] * TILT;\n    if (kind === SPECK) splat(SP, x, y, S.w[i] * env);\n    else if (kind === MICA) {\n      // A flake only shows when it turns to the light: a swell a few times\n      // a second, sharpened so most of the time it is dark. Flakes add no\n      // body to the cloud, so Shimmer leaves its size alone.\n      const tw = 0.5 + 0.5 * sin(S.ph[i] + (3 + 2 * sin(S.ph[i] * 3)) * T);\n      const t4 = tw * tw * tw * tw;\n      splat(G, x, y, env * t4 * t4 * (0.8 + 1.2 * sh));\n    } else {\n      // Powder older than a second and a half goes into a softer layer,\n      // so the trails behind the head spread into haze.\n      const old = sm(1, 2.5, age);\n      if (old \u003c 1) splat(D, x, y, S.w[i] * env * (1 - old));\n      if (old > 0) splat(O, x, y, S.w[i] * env * old);\n    }\n  }\n  blur(D, tmp, 2);\n  blur(D, tmp, 1);\n  blur(O, tmp, 3);\n  blur(O, tmp, 2);\n  for (let p = 0; p \u003c N; p++) D[p] += O[p];\n  // Pigment, its pale lit side, the pearl tint mica gives the lit side, and\n  // the glint colour. Coral to lemon read brown and olive when dim, so there\n  // the pigment is paler. Elsewhere the pigment is laid at full saturation\n  // and only the lit side of thick powder goes pale: with an orchid pink at\n  // 0.82 and thick powder paling all over, the cloud's colourfulness was\n  // 0.231, and this way it is 0.393, beside Tunnel on the colour x drift\n  // map, since the cell where it first stood beside Bokeh took Heawood\n  // Torus first.\n  const h = S.hue + 0.84, hf = h - floor(h), warm = sm(0.0, 0.05, hf) * (1 - sm(0.17, 0.24, hf));\n  hsv(h, 1.0 - 0.32 * warm, 1, col, 0);\n  hsv(h - 0.02, 0.6 - 0.12 * warm, 1, col, 3);\n  hsv(h + 0.08, 0.15, 1, col, 6);\n  hsv(h + 0.2, 0.4, 1, col, 9);\n  // Warm powder's faint end is lifted too: a fading peach cloud read as\n  // milky coffee.\n  const gain = GAIN + 0.3 * warm, ga = 1 - 0.4 * warm;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const d = D[p], a = (1 - exp(-d * gain)) ** ga, s = min(1.4, SP[p]), g = G[p];\n      // The studio light is above and to the left: where the cloud thickens\n      // downward or rightward its surface faces the light. Without it the\n      // head was a flat blob of colour.\n      const dn = y \u003c H - 1 ? D[p + W] : d, up = y > 0 ? D[p - W] : d, rt = x \u003c W - 1 ? D[p + 1] : d, lf = x > 0 ? D[p - 1] : d;\n      const nrm = cl(((dn - up) * 0.8 + (rt - lf) * 0.4) / (d + 0.5), -1, 1), lit = 0.98 + 0.4 * nrm;\n      // Thin powder glows in the pigment, thick powder goes pale and bright,\n      // and with mica its lit side turns pearl.\n      const wt = a * a * cl(0.22 + 0.6 * nrm, 0, 1), pm = sh * 0.9 * cl(0.55 + nrm, 0, 1);\n      let r = 0, gg = 0, b = 0;\n      for (let c = 0; c \u003c 3; c++) {\n        const lc = col[3 + c] * (1 - pm) + col[9 + c] * pm, v = (col[c] * (1 - wt) + lc * wt) * a * lit;\n        // Specks are pigment, glints are light.\n        const o = v + col[c] * s * 0.8 + col[6 + c] * g;\n        if (c === 0) r = o;\n        else if (c === 1) gg = o;\n        else b = o;\n      }\n      if (warm > 0) {\n        // Dim peach and lemon read brown and olive, so as warm powder dims\n        // it greys toward a pale dust of the same level instead.\n        const m = max(r, gg, b), k = 0.9 * warm * sqrt(1 - min(1, m / 0.85));\n        r += (m - r) * k;\n        gg += (m - gg) * k;\n        b += (m - b) * k;\n      }\n      display.setPixel(x, y, knee(r * 255), knee(gg * 255), knee(b * 255));\n    }\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Force=0..1, Shimmer=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The pigment, once round the wheel: at 0 magenta, at 0.08 raspberry, at 0.2 coral, at 0.24 apricot, at 0.31 lemon, at 0.49 green, at 0.67 aqua, at 0.76 cobalt, at 0.91 violet. From coral to lemon the powder is paler, its faint end is lifted, and as it fades it greys to a pale dust, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"How slow the slow motion is: at 2 a strike comes every 6.3 seconds, the head's top reaches the top rows about 4 seconds after it and the last dust is gone about 8 seconds after it; at 0.2 ten times slower."},{"name":"Force","min":0,"max":1,"about":"How hard the cake is struck: at 0 the head climbs about 80 rows and opens about 50 LEDs wide; at 1 it climbs 130 and leaves through the top, opens about 66 wide, wider than the panel, and throws twice the specks, 200 a strike against 90."},{"name":"Shimmer","min":0,"max":1,"about":"Mica in the powder: at 0 about 60 flakes a strike, a glint here and there; at 1 about 1,460, so the cloud glitters, and its lit tops take a pearl tint a fifth of the way round the wheel from the pigment."}],"start":[0,2,0,0.06],"measures":{"motion":0.285,"detail":0.0166,"edges":0.0495,"complexity":1.3583,"coverage":0.4791,"colour":0.3931,"drift":0.3981},"knobResponse":[0.3053,0.2228,0.1341,0.0525]},{"slug":"proscenium","title":"Proscenium","family":"stage","round":23,"note":"금박 프로시니엄 아래 붉은 벨벳 막이 플라이로 올라가면 달빛 바다나 숲, 밤 도시, 눈 내리는 마을을 그린 배경막이 드러나고, 브리지 조명의 빛줄기가 연무를 갈라요. 발레리나가 팔로 스폿을 받으며 도약해 무대를 건너고, 막이 내리면 막 앞에서 인사해요. 맨 아래에는 실크해트를 쓴 사람이 섞인 앞줄 관객의 뒤통수가 있어요.","idea":"A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.","buttons":"K1 tap brings the curtain in now, or takes it out again if it is in.","code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","layer":{"id":"layer-proscenium","type":"code","name":"proscenium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gel","min":0,"max":1,"about":"The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower."},{"name":"Scene","min":0,"max":3,"about":"The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one."},{"name":"Haze","min":0,"max":1,"about":"How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel."}],"start":[0,2,0,0.06],"measures":{"motion":0.1444,"detail":0.0876,"edges":0.3879,"complexity":1.7658,"coverage":0.8713,"colour":0.2563,"drift":0.0949},"knobResponse":[0.0636,0.1625,0.077,0.1771]},{"slug":"pulse-bars","title":"Pulse Bars","family":"rhythm","round":1,"note":"음악 없는 하이파이 미터예요. 작은 드럼 머신이 혼자 치고 막대는 그 소리를 듣는 듯 춤춰요.","idea":"A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.","buttons":"K1 tap grows the bars from the middle line both ways instead of from the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","layer":{"id":"layer-pulse-bars","type":"code","name":"pulse-bars","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour starts at the bass end; it climbs a third of the wheel to the treble end."},{"name":"Tempo","min":90,"max":180,"about":"Beats per minute of the drum machine, with sixteenth-note hats."},{"name":"Bars","min":8,"max":32,"about":"How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth."},{"name":"Decay","min":0,"max":1,"about":"How long each hit rings; low is tight and punchy, high swells and hangs."}],"start":[0,90,8,0.06],"measures":{"motion":0.7885,"detail":0.0861,"edges":0.9999,"complexity":0.1776,"coverage":0.2209,"colour":0.2463,"drift":0.1392},"knobResponse":[0.0897,0.0556,0.0615,0.0607]},{"slug":"rabbit-ears","title":"Rabbit Ears","family":"glitch","round":19,"note":"옛 TV 가 토끼 귀 안테나로 늦은 밤 일기예보를 잡아요. 신호가 흔들리면 진행자와 지도가 색을 잃고 눈 속으로 사라졌다가 블랭킹 띠와 함께 굴러 돌아오고, 오른쪽에는 고스트가 따라붙어요. K1 을 누르면 TV 를 쳐서 그림이 한 바퀴 굴러요.","idea":"An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.","buttons":"K1 tap slaps the side of the set: the hold slips and the picture rolls round once.","code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","layer":{"id":"layer-rabbit-ears","type":"code","name":"rabbit-ears","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between."},{"name":"Signal","min":0,"max":1,"about":"How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow."},{"name":"Ghost","min":0,"max":1,"about":"The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1."}],"start":[0,2,0,0.06],"measures":{"motion":2.2448,"detail":0.1335,"edges":0.365,"complexity":2.3725,"coverage":0.9855,"colour":0.1077,"drift":0.2857},"knobResponse":[0.1208,0.2747,0.0525,0.0711]},{"slug":"rainstorm","title":"Rainstorm","family":"weather","round":2,"note":"빗줄기가 128줄을 다 떨어져 물웅덩이에 고리를 남기고, 가끔 갈라진 번개가 구름을 찢으며 쏟아지는 비를 한순간 밝혀요.","idea":"Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.","buttons":"K1 tap strikes lightning now.","code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-rainstorm","type":"code","name":"rainstorm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the night, the cloud and the rain, starting from slate blue."},{"name":"Rain","min":0.2,"max":3,"about":"From a drizzle of a few slow drops to a downpour."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it."},{"name":"Storm","min":0,"max":1,"about":"How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs."}],"start":[0,2,0,0.06],"measures":{"motion":2.22,"detail":0.0685,"edges":0.8841,"complexity":0.6564,"coverage":0.3785,"colour":0.0656,"drift":0.2647},"knobResponse":[0.0545,0.1279,0.1012,0.1302]},{"slug":"rauzy-fractal","title":"Rauzy Fractal","family":"fractal","round":28,"note":"트리보나치 치환의 라우지 프랙탈이 세 크기의 제 사본으로 판을 덮고, 그 고정점으로 끝없이 들어가요. 타일은 자라 한 크기 위가 되고, 가운데서 퍼지는 고리가 가장 큰 타일을 세 조각으로 나눠요. 누르면 조각 셋이 저마다의 벡터로 미끄러져 같은 테두리 안에 다시 맞물려요.","idea":"The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.","buttons":"K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.","code":"// ===== Patternflow pattern =====\n// Title:   Rauzy Fractal\n// Family:  fractal\n// Idea:    The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Rauzy fractal of the tribonacci substitution (Gérard Rauzy, 1982), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three.\n// Knob 3: Depth. How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4.\n// Knob 4: Glow. At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground.\n// Buttons: K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64;\nconst { min, floor, ceil, sqrt, cos, sin, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The tribonacci constant TH, the real root of x^3 = x^2 + x + 1, and beta,\n// one of the other two roots, |beta| = 1/sqrt(TH) = 0.7374.\nlet TH = 2;\nfor (let i = 0; i \u003c 40; i++) TH -= (TH ** 3 - TH * TH - TH - 1) / (3 * TH * TH - 2 * TH - 1);\nconst BR = (1 - TH) / 2, BI = sqrt(1 / TH - BR * BR), BM = sqrt(BR * BR + BI * BI), BA = atan2(BI, BR);\n// The substitution 1 -> 12, 2 -> 13, 3 -> 1 counts letters with the matrix\n// M = [[1,1,1],[1,0,0],[0,1,0]]. A vector v of letter counts lands in the\n// contracting plane as z(v) = v1 + v2 (beta - 1) + v3 / beta, and z(M v) is\n// beta z(v). ZX, ZY are z of one letter 1, 2 or 3.\nconst ZX = [1, BR - 1, BR * TH], ZY = [0, BI, -BI * TH];\n// The lattice of z(v) with v1 + v2 + v3 = 0, spanned by z(e2 - e3), z(e3 - e1).\nconst AX = ZX[1] - ZX[2], AY = ZY[1] - ZY[2], BX = ZX[2] - 1, BY = ZY[2], DET = AX * BY - AY * BX;\n// The height along the expanding direction, h(v) = TH v1 + (TH^2 - TH) v2 + v3,\n// written as AL (v1 + v2 + v3) + HX Re z(v) + HY Im z(v).\nconst LH = [TH, TH * TH - TH, 1];\nconst [AL, HX, HY] = (() => {\n  const m = [0, 1, 2].map((j) => [1, ZX[j], ZY[j]]);\n  const d3 = (a, b, c) => a[0] * (b[1] * c[2] - b[2] * c[1]) - a[1] * (b[0] * c[2] - b[2] * c[0]) + a[2] * (b[0] * c[1] - b[1] * c[0]);\n  const D = d3(m[0], m[1], m[2]), col = (k) => m.map((r, j) => r.map((v, q) => (q === k ? LH[j] : v)));\n  return [0, 1, 2].map((k) => { const c = col(k); return d3(c[0], c[1], c[2]) / D; });\n})();\n\n// The fixed word 1213121121312... and where each prefix lands. A torus cell\n// (the plane modulo the lattice, G x G cells) remembers the letter after a\n// prefix landing in it and, two bits a letter, the letters of its ancestors\n// under the substitution: the piece, then the piece of the piece, sixteen\n// deep. KA, KB say which copy of the fractal the prefix fell in.\nconst G = 256, GM = G - 1, NW = 160000;\nconst CH = new Int32Array(G * G), KA = new Int8Array(G * G), KB = new Int8Array(G * G);\nlet HR0 = 1e9, HR1 = -1e9, MX = 0, MY = 0;\n{\n  const ch = new Int32Array(NW);\n  let n = 0;\n  for (let m = 0; n \u003c NW; m++) {\n    const a = ch[m] & 3, up = ch[m] \u003c\u003c 2;\n    ch[n++] = up;\n    if (a \u003c 2 && n \u003c NW) ch[n++] = up | (a + 1);\n  }\n  let x = 0, y = 0;\n  for (let i = 0; i \u003c NW; i++) {\n    const a = (x * BY - y * BX) / DET, b = (AX * y - AY * x) / DET, fa = floor(a), fb = floor(b);\n    const c = min(GM, floor((a - fa) * G)) + min(GM, floor((b - fb) * G)) * G;\n    CH[c] = ch[i];\n    KA[c] = fa;\n    KB[c] = fb;\n    const hr = HX * x + HY * y;\n    if (hr \u003c HR0) HR0 = hr;\n    if (hr > HR1) HR1 = hr;\n    const l = ch[i] & 3;\n    MX += x / NW;\n    MY += y / NW;\n    x += ZX[l];\n    y += ZY[l];\n  }\n}\n\n// The middle of R is MX, MY; R_1 = beta R, R_2 = beta^2 R + 1 and\n// R_3 = beta^3 R + beta + 1, and CEN holds their middles.\nconst CEN = [];\n{\n  let x = MX, y = MY;\n  for (let i = 0; i \u003c 3; i++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    CEN.push(x + (i > 0 ? 1 : 0) + (i > 1 ? BR : 0), y + (i > 1 ? BI : 0));\n  }\n}\n\n// The self-replicating tiling: a copy z(v) + R_i of piece i for every\n// v in Z^3 with 0 \u003c= h(v) \u003c h(e_i). The pieces are R scaled by beta, beta^2\n// and beta^3, so every tile is the fractal itself at one of three sizes.\n// For a point p, the copy of piece i holding it has z(v) = p - r with r in\n// R, and only two or three counts v1 + v2 + v3 = k can pass the height test.\nlet TCH = 0, TID = 0, TX = 0, TY = 0;\nfunction tile(px, py) {\n  const cp = HX * px + HY * py, k1 = (HR1 - cp + LH[0]) / AL;\n  for (let k = ceil((HR0 - cp) / AL - 1e-6); k \u003c= k1; k++) {\n    const qx = px - k, a = (qx * BY - py * BX) / DET, b = (AX * py - AY * qx) / DET;\n    const fa = floor(a), fb = floor(b), c = (floor((a - fa) * G) & GM) + (floor((b - fb) * G) & GM) * G;\n    const ta = fa - KA[c], tb = fb - KB[c], ch = CH[c], t = ch & 3;\n    const v1 = k - tb, v2 = ta, v3 = tb - ta, h = LH[0] * v1 + LH[1] * v2 + v3;\n    if (h >= 0 && h \u003c LH[t]) {\n      TCH = ch;\n      TID = ((v1 * 1024 + v2) * 1024 + v3) * 4 + t;\n      TX = v1 * ZX[0] + v2 * ZX[1] + v3 * ZX[2] + CEN[t * 2];\n      TY = v1 * ZY[0] + v2 * ZY[1] + v3 * ZY[2] + CEN[t * 2 + 1];\n      return t;\n    }\n  }\n  return -1;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// A tile's colour follows its age. The smallest tiles (copies of piece 3)\n// are young, piece 2 middle-aged, piece 1 old; a level of zoom later each\n// has grown into the next, and the old ones have split into three. Hue,\n// saturation and value at ages 0, 1 and 2; LUT holds them from age -1 to 2.5\n// for each of a tile's own three pieces, which turn the hue by PH and light\n// it by PV.\nconst AGE = [\n  [0.86, 0.8, 0.85],\n  [0.68, 0.85, 0.95],\n  [0.5, 0.9, 1],\n];\nconst PH = [0, 0.035, -0.03], PV = [1, 0.7, 0.48];\nconst LN = 71, LA = -1, LS = 0.05;\n\n// The domain exchange: piece j of R moves by z(e_j), and the three land in\n// R again. A tile of type t is R scaled by beta^(t+1), so its pieces move by\n// beta^(t+1) z(e_j), EV[t*6 + j*2].\nconst EV = [];\n{\n  let x = 1, y = 0;\n  for (let t = 0; t \u003c 3; t++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    for (let j = 0; j \u003c 3; j++) EV.push(x * ZX[j] - y * ZY[j], x * ZY[j] + y * ZX[j]);\n  }\n}\n\n// LEDs a unit of the plane at the start of a level, the turn of the view per\n// level (a turn of beta less a third of a full turn, so three levels close\n// the loop), how far the splitting ring runs in a level, and the exchange's\n// slide, hold and settle in seconds.\nconst S0 = 24, ROT = BA - (2 * PI) / 3, RING = 140, EX1 = 1.5, EX2 = 2.3, EXT = 3.3;\n\nexport function setup(params) {\n  params.s = { m: 0, f: 0, ex: -1, hue: 0, depth: 1, glow: 0.06, id: new Float64Array(N), buf: new Float32Array(N * 3), lut: new Float32Array(3 * LN * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.depth = cl(k[2], 1, 4);\n  P.glow = cl(k[3], 0, 1);\n  if (P.ex >= 0) {\n    P.ex += d;\n    if (P.ex > EXT) P.ex = -1;\n  } else {\n    P.f += d * cl(k[1], 0.2, 3) * 0.1;\n    if (P.f >= 1) (P.f -= 1), (P.m = (P.m + 1) % 3);\n    if (input.btnPressed && input.btnPressed[0]) P.ex = 0;\n  }\n}\n\n// The light of a point from the pieces it lies in, level by level from\n// letter kk down; a piece of type s splits again s + 1 letters lower.\nfunction tone(ch, kk, D) {\n  let v = 1;\n  for (let n = 2; n \u003c= 5 && kk \u003c 16; n++) {\n    const s = (ch >> (2 * kk)) & 3, w = cl(D + 1 - n, 0, 1) * 0.5;\n    v *= 1 - w * (1 - PV[s]);\n    kk += 1 + s;\n  }\n  return v;\n}\n\n// The colour of the plane point (px, py) into CR, CG, CB, and its tile (and\n// once split, its piece) into CID. Returns the tile's type, or -1 on the\n// rare point the table cannot place.\nlet CR = 0, CG = 0, CB = 0, CID = 0;\nfunction shade(px, py, f, ring, sc, D, lut) {\n  const t = tile(px, py);\n  if (t \u003c 0) return -1;\n  const ch = TCH, s1 = (ch >> (2 * t + 2)) & 3;\n  let a = t ? 2 - t + f : 2, v = tone(ch, t + 2 + s1, D), li = (s1 * LN + round((a - LA) / LS)) * 3;\n  CID = TID * 4;\n  if (t === 0) {\n    // An old tile splits as the ring passes its middle: each piece takes\n    // the colour of the young tile it becomes, with a flash.\n    const sp = cl((ring - sqrt(TX * TX + TY * TY) / sc) / 16, 0, 1);\n    if (sp > 0) {\n      const s2 = (ch >> (4 + 2 * s1)) & 3, a2 = 1 - s1 + f, v2 = tone(ch, 3 + s1 + s2, D) * (1 + 1.4 * sp * (1 - sp));\n      const l2 = (s2 * LN + cl(round((a2 - LA) / LS), 0, LN - 1)) * 3, u = 1 - sp;\n      CR = (lut[li] * v * u + lut[l2] * v2 * sp);\n      CG = (lut[li + 1] * v * u + lut[l2 + 1] * v2 * sp);\n      CB = (lut[li + 2] * v * u + lut[l2 + 2] * v2 * sp);\n      if (sp > 0.5) CID += s1 + 1;\n      return 0;\n    }\n  }\n  CR = lut[li] * v;\n  CG = lut[li + 1] * v;\n  CB = lut[li + 2] * v;\n  return t;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.f, sc = BM ** f / S0, an = ROT * f - ((2 * PI) / 3) * P.m, co = cos(an) * sc, si = sin(an) * sc;\n  const ID = P.id, buf = P.buf, lut = P.lut, D = P.depth, ring = (f - 0.04) * RING;\n  for (let s = 0; s \u003c 3; s++)\n    for (let i = 0; i \u003c LN; i++) {\n      const a = cl(LA + i * LS, 0, 2), j = min(1, floor(a)), u = a - j, A = AGE[j], B = AGE[j + 1], young = cl(1 + (LA + i * LS) * 0.4, 0.6, 1);\n      hsv(P.hue + A[0] + (B[0] - A[0]) * u + PH[s], A[1] + (B[1] - A[1]) * u, (A[2] + (B[2] - A[2]) * u) * young * PV[s], lut, (s * LN + i) * 3);\n    }\n  // While the pieces slide, each LED looks for a piece that has arrived on\n  // it: a point q of a type-t tile in piece j with q + slide = p.\n  const ex = P.ex, sl = ex \u003c 0 ? 0 : sstep(0, EX1, ex), back = ex \u003c 0 ? 1 : sstep(EX2, EXT, ex);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const X = x + 0.5 - CX, Y = y + 0.5 - CY, px = co * X - si * Y, py = si * X + co * Y, o = p * 3;\n      let r = 0, g = 0, b = 0, id = -1;\n      if (back \u003c 1)\n        for (let e = 0; e \u003c 18 && id \u003c 0; e += 2) {\n          const t = (e / 6) | 0;\n          if (shade(px - sl * EV[e], py - sl * EV[e + 1], f, ring, sc, D, lut) === t && ((TCH >> (2 * t + 2)) & 3) === (e % 6) / 2)\n            (r = CR), (g = CG), (b = CB), (id = TID * 32 + 1 + e);\n        }\n      if (back > 0 && (shade(px, py, f, ring, sc, D, lut) >= 0 || shade(px + 0.3 * sc, py, f, ring, sc, D, lut) >= 0)) {\n        r += (CR - r) * back;\n        g += (CG - g) * back;\n        b += (CB - b) * back;\n        if (back > 0.5) id = CID;\n      }\n      ID[p] = id;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  // A seam between tiles: dark at Glow 0, pale light at 1.\n  const gl = P.glow, dim = 1 - 0.55 * gl;\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const s = (x \u003c W - 1 && ID[p + 1] !== ID[p]) || (y \u003c H - 1 && ID[p + W] !== ID[p]), o = p * 3;\n      for (let c = 0; c \u003c 3; c++) {\n        const v = min(255, buf[o + c]) * dim;\n        buf[o + c] = s ? v * (0.12 + 0.3 * gl) + 170 * gl : v;\n      }\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-rauzy-fractal","type":"code","name":"rauzy-fractal","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rauzy Fractal\n// Family:  fractal\n// Idea:    The self-replicating tiling of the tribonacci fractal, copies of the fractal at three sizes, zooms for ever into its fixed point; each tile grows into the next size up, and a ring running out from the middle splits the biggest into their three pieces.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Rauzy fractal of the tribonacci substitution (Gérard Rauzy, 1982), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour.\n// Knob 2: Speed. How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three.\n// Knob 3: Depth. How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4.\n// Knob 4: Glow. At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground.\n// Buttons: K1 tap runs the domain exchange. The zoom stops, the three pieces of every tile slide along their own vectors and lock into the same outline in a new order, and a second later they take the colours of the pieces they now lie in.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64;\nconst { min, floor, ceil, sqrt, cos, sin, atan2, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The tribonacci constant TH, the real root of x^3 = x^2 + x + 1, and beta,\n// one of the other two roots, |beta| = 1/sqrt(TH) = 0.7374.\nlet TH = 2;\nfor (let i = 0; i \u003c 40; i++) TH -= (TH ** 3 - TH * TH - TH - 1) / (3 * TH * TH - 2 * TH - 1);\nconst BR = (1 - TH) / 2, BI = sqrt(1 / TH - BR * BR), BM = sqrt(BR * BR + BI * BI), BA = atan2(BI, BR);\n// The substitution 1 -> 12, 2 -> 13, 3 -> 1 counts letters with the matrix\n// M = [[1,1,1],[1,0,0],[0,1,0]]. A vector v of letter counts lands in the\n// contracting plane as z(v) = v1 + v2 (beta - 1) + v3 / beta, and z(M v) is\n// beta z(v). ZX, ZY are z of one letter 1, 2 or 3.\nconst ZX = [1, BR - 1, BR * TH], ZY = [0, BI, -BI * TH];\n// The lattice of z(v) with v1 + v2 + v3 = 0, spanned by z(e2 - e3), z(e3 - e1).\nconst AX = ZX[1] - ZX[2], AY = ZY[1] - ZY[2], BX = ZX[2] - 1, BY = ZY[2], DET = AX * BY - AY * BX;\n// The height along the expanding direction, h(v) = TH v1 + (TH^2 - TH) v2 + v3,\n// written as AL (v1 + v2 + v3) + HX Re z(v) + HY Im z(v).\nconst LH = [TH, TH * TH - TH, 1];\nconst [AL, HX, HY] = (() => {\n  const m = [0, 1, 2].map((j) => [1, ZX[j], ZY[j]]);\n  const d3 = (a, b, c) => a[0] * (b[1] * c[2] - b[2] * c[1]) - a[1] * (b[0] * c[2] - b[2] * c[0]) + a[2] * (b[0] * c[1] - b[1] * c[0]);\n  const D = d3(m[0], m[1], m[2]), col = (k) => m.map((r, j) => r.map((v, q) => (q === k ? LH[j] : v)));\n  return [0, 1, 2].map((k) => { const c = col(k); return d3(c[0], c[1], c[2]) / D; });\n})();\n\n// The fixed word 1213121121312... and where each prefix lands. A torus cell\n// (the plane modulo the lattice, G x G cells) remembers the letter after a\n// prefix landing in it and, two bits a letter, the letters of its ancestors\n// under the substitution: the piece, then the piece of the piece, sixteen\n// deep. KA, KB say which copy of the fractal the prefix fell in.\nconst G = 256, GM = G - 1, NW = 160000;\nconst CH = new Int32Array(G * G), KA = new Int8Array(G * G), KB = new Int8Array(G * G);\nlet HR0 = 1e9, HR1 = -1e9, MX = 0, MY = 0;\n{\n  const ch = new Int32Array(NW);\n  let n = 0;\n  for (let m = 0; n \u003c NW; m++) {\n    const a = ch[m] & 3, up = ch[m] \u003c\u003c 2;\n    ch[n++] = up;\n    if (a \u003c 2 && n \u003c NW) ch[n++] = up | (a + 1);\n  }\n  let x = 0, y = 0;\n  for (let i = 0; i \u003c NW; i++) {\n    const a = (x * BY - y * BX) / DET, b = (AX * y - AY * x) / DET, fa = floor(a), fb = floor(b);\n    const c = min(GM, floor((a - fa) * G)) + min(GM, floor((b - fb) * G)) * G;\n    CH[c] = ch[i];\n    KA[c] = fa;\n    KB[c] = fb;\n    const hr = HX * x + HY * y;\n    if (hr \u003c HR0) HR0 = hr;\n    if (hr > HR1) HR1 = hr;\n    const l = ch[i] & 3;\n    MX += x / NW;\n    MY += y / NW;\n    x += ZX[l];\n    y += ZY[l];\n  }\n}\n\n// The middle of R is MX, MY; R_1 = beta R, R_2 = beta^2 R + 1 and\n// R_3 = beta^3 R + beta + 1, and CEN holds their middles.\nconst CEN = [];\n{\n  let x = MX, y = MY;\n  for (let i = 0; i \u003c 3; i++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    CEN.push(x + (i > 0 ? 1 : 0) + (i > 1 ? BR : 0), y + (i > 1 ? BI : 0));\n  }\n}\n\n// The self-replicating tiling: a copy z(v) + R_i of piece i for every\n// v in Z^3 with 0 \u003c= h(v) \u003c h(e_i). The pieces are R scaled by beta, beta^2\n// and beta^3, so every tile is the fractal itself at one of three sizes.\n// For a point p, the copy of piece i holding it has z(v) = p - r with r in\n// R, and only two or three counts v1 + v2 + v3 = k can pass the height test.\nlet TCH = 0, TID = 0, TX = 0, TY = 0;\nfunction tile(px, py) {\n  const cp = HX * px + HY * py, k1 = (HR1 - cp + LH[0]) / AL;\n  for (let k = ceil((HR0 - cp) / AL - 1e-6); k \u003c= k1; k++) {\n    const qx = px - k, a = (qx * BY - py * BX) / DET, b = (AX * py - AY * qx) / DET;\n    const fa = floor(a), fb = floor(b), c = (floor((a - fa) * G) & GM) + (floor((b - fb) * G) & GM) * G;\n    const ta = fa - KA[c], tb = fb - KB[c], ch = CH[c], t = ch & 3;\n    const v1 = k - tb, v2 = ta, v3 = tb - ta, h = LH[0] * v1 + LH[1] * v2 + v3;\n    if (h >= 0 && h \u003c LH[t]) {\n      TCH = ch;\n      TID = ((v1 * 1024 + v2) * 1024 + v3) * 4 + t;\n      TX = v1 * ZX[0] + v2 * ZX[1] + v3 * ZX[2] + CEN[t * 2];\n      TY = v1 * ZY[0] + v2 * ZY[1] + v3 * ZY[2] + CEN[t * 2 + 1];\n      return t;\n    }\n  }\n  return -1;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// A tile's colour follows its age. The smallest tiles (copies of piece 3)\n// are young, piece 2 middle-aged, piece 1 old; a level of zoom later each\n// has grown into the next, and the old ones have split into three. Hue,\n// saturation and value at ages 0, 1 and 2; LUT holds them from age -1 to 2.5\n// for each of a tile's own three pieces, which turn the hue by PH and light\n// it by PV.\nconst AGE = [\n  [0.86, 0.8, 0.85],\n  [0.68, 0.85, 0.95],\n  [0.5, 0.9, 1],\n];\nconst PH = [0, 0.035, -0.03], PV = [1, 0.7, 0.48];\nconst LN = 71, LA = -1, LS = 0.05;\n\n// The domain exchange: piece j of R moves by z(e_j), and the three land in\n// R again. A tile of type t is R scaled by beta^(t+1), so its pieces move by\n// beta^(t+1) z(e_j), EV[t*6 + j*2].\nconst EV = [];\n{\n  let x = 1, y = 0;\n  for (let t = 0; t \u003c 3; t++) {\n    [x, y] = [BR * x - BI * y, BI * x + BR * y];\n    for (let j = 0; j \u003c 3; j++) EV.push(x * ZX[j] - y * ZY[j], x * ZY[j] + y * ZX[j]);\n  }\n}\n\n// LEDs a unit of the plane at the start of a level, the turn of the view per\n// level (a turn of beta less a third of a full turn, so three levels close\n// the loop), how far the splitting ring runs in a level, and the exchange's\n// slide, hold and settle in seconds.\nconst S0 = 24, ROT = BA - (2 * PI) / 3, RING = 140, EX1 = 1.5, EX2 = 2.3, EXT = 3.3;\n\nexport function setup(params) {\n  params.s = { m: 0, f: 0, ex: -1, hue: 0, depth: 1, glow: 0.06, id: new Float64Array(N), buf: new Float32Array(N * 3), lut: new Float32Array(3 * LN * 3) };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.depth = cl(k[2], 1, 4);\n  P.glow = cl(k[3], 0, 1);\n  if (P.ex >= 0) {\n    P.ex += d;\n    if (P.ex > EXT) P.ex = -1;\n  } else {\n    P.f += d * cl(k[1], 0.2, 3) * 0.1;\n    if (P.f >= 1) (P.f -= 1), (P.m = (P.m + 1) % 3);\n    if (input.btnPressed && input.btnPressed[0]) P.ex = 0;\n  }\n}\n\n// The light of a point from the pieces it lies in, level by level from\n// letter kk down; a piece of type s splits again s + 1 letters lower.\nfunction tone(ch, kk, D) {\n  let v = 1;\n  for (let n = 2; n \u003c= 5 && kk \u003c 16; n++) {\n    const s = (ch >> (2 * kk)) & 3, w = cl(D + 1 - n, 0, 1) * 0.5;\n    v *= 1 - w * (1 - PV[s]);\n    kk += 1 + s;\n  }\n  return v;\n}\n\n// The colour of the plane point (px, py) into CR, CG, CB, and its tile (and\n// once split, its piece) into CID. Returns the tile's type, or -1 on the\n// rare point the table cannot place.\nlet CR = 0, CG = 0, CB = 0, CID = 0;\nfunction shade(px, py, f, ring, sc, D, lut) {\n  const t = tile(px, py);\n  if (t \u003c 0) return -1;\n  const ch = TCH, s1 = (ch >> (2 * t + 2)) & 3;\n  let a = t ? 2 - t + f : 2, v = tone(ch, t + 2 + s1, D), li = (s1 * LN + round((a - LA) / LS)) * 3;\n  CID = TID * 4;\n  if (t === 0) {\n    // An old tile splits as the ring passes its middle: each piece takes\n    // the colour of the young tile it becomes, with a flash.\n    const sp = cl((ring - sqrt(TX * TX + TY * TY) / sc) / 16, 0, 1);\n    if (sp > 0) {\n      const s2 = (ch >> (4 + 2 * s1)) & 3, a2 = 1 - s1 + f, v2 = tone(ch, 3 + s1 + s2, D) * (1 + 1.4 * sp * (1 - sp));\n      const l2 = (s2 * LN + cl(round((a2 - LA) / LS), 0, LN - 1)) * 3, u = 1 - sp;\n      CR = (lut[li] * v * u + lut[l2] * v2 * sp);\n      CG = (lut[li + 1] * v * u + lut[l2 + 1] * v2 * sp);\n      CB = (lut[li + 2] * v * u + lut[l2 + 2] * v2 * sp);\n      if (sp > 0.5) CID += s1 + 1;\n      return 0;\n    }\n  }\n  CR = lut[li] * v;\n  CG = lut[li + 1] * v;\n  CB = lut[li + 2] * v;\n  return t;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.f, sc = BM ** f / S0, an = ROT * f - ((2 * PI) / 3) * P.m, co = cos(an) * sc, si = sin(an) * sc;\n  const ID = P.id, buf = P.buf, lut = P.lut, D = P.depth, ring = (f - 0.04) * RING;\n  for (let s = 0; s \u003c 3; s++)\n    for (let i = 0; i \u003c LN; i++) {\n      const a = cl(LA + i * LS, 0, 2), j = min(1, floor(a)), u = a - j, A = AGE[j], B = AGE[j + 1], young = cl(1 + (LA + i * LS) * 0.4, 0.6, 1);\n      hsv(P.hue + A[0] + (B[0] - A[0]) * u + PH[s], A[1] + (B[1] - A[1]) * u, (A[2] + (B[2] - A[2]) * u) * young * PV[s], lut, (s * LN + i) * 3);\n    }\n  // While the pieces slide, each LED looks for a piece that has arrived on\n  // it: a point q of a type-t tile in piece j with q + slide = p.\n  const ex = P.ex, sl = ex \u003c 0 ? 0 : sstep(0, EX1, ex), back = ex \u003c 0 ? 1 : sstep(EX2, EXT, ex);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const X = x + 0.5 - CX, Y = y + 0.5 - CY, px = co * X - si * Y, py = si * X + co * Y, o = p * 3;\n      let r = 0, g = 0, b = 0, id = -1;\n      if (back \u003c 1)\n        for (let e = 0; e \u003c 18 && id \u003c 0; e += 2) {\n          const t = (e / 6) | 0;\n          if (shade(px - sl * EV[e], py - sl * EV[e + 1], f, ring, sc, D, lut) === t && ((TCH >> (2 * t + 2)) & 3) === (e % 6) / 2)\n            (r = CR), (g = CG), (b = CB), (id = TID * 32 + 1 + e);\n        }\n      if (back > 0 && (shade(px, py, f, ring, sc, D, lut) >= 0 || shade(px + 0.3 * sc, py, f, ring, sc, D, lut) >= 0)) {\n        r += (CR - r) * back;\n        g += (CG - g) * back;\n        b += (CB - b) * back;\n        if (back > 0.5) id = CID;\n      }\n      ID[p] = id;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  // A seam between tiles: dark at Glow 0, pale light at 1.\n  const gl = P.glow, dim = 1 - 0.55 * gl;\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const s = (x \u003c W - 1 && ID[p + 1] !== ID[p]) || (y \u003c H - 1 && ID[p + W] !== ID[p]), o = p * 3;\n      for (let c = 0; c \u003c 3; c++) {\n        const v = min(255, buf[o + c]) * dim;\n        buf[o + c] = s ? v * (0.12 + 0.3 * gl) + 170 * gl : v;\n      }\n    }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Depth=1..4, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the young (smallest) tiles are magenta, the middle ones blue and the old ones cyan, and each tile's three pieces are three shades of its colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it zooms. At 2 the picture grows by 1/|beta| = 1.356 every five seconds, turning 4.7 degrees, and after three such levels it is the same picture again; at 0.2 a level takes fifty seconds, at 3 a little over three."},{"name":"Depth","min":1,"max":4,"about":"How many levels of pieces a tile shows. At 1 only its own three pieces; each step up shades the pieces inside those pieces, four levels at 4."},{"name":"Glow","min":0,"max":1,"about":"At 0 the seams between tiles are dark lines. Turning it up dims the tiles and lights the seams, until at 1 the fractal outlines glow pale on a dark ground."}],"start":[0,2,1,0.06],"measures":{"motion":0.2887,"detail":0.0655,"edges":0.9038,"complexity":0.1892,"coverage":0.9988,"colour":0.5834,"drift":0.167},"knobResponse":[0.5259,0.2583,0.0944,0.2959]},{"slug":"reaction-diffusion","title":"Reaction Diffusion","family":"sim","round":1,"note":"두 물질이 번지고 먹고 먹히며 산호와 미로와 점박이를 길러요. K3 가 종을 바꿔요.","idea":"Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.","buttons":"K1 tap reseeds the dish.","code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","layer":{"id":"layer-reaction-diffusion","type":"code","name":"reaction-diffusion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the culture's colour around the wheel."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the culture grows; at 2 it runs 240 steps a second."},{"name":"Species","min":0,"max":5,"about":"Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms."},{"name":"Grain","min":0,"max":1,"about":"Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree."}],"start":[0,2,0,0.06],"measures":{"motion":0.0572,"detail":0.0825,"edges":0.3087,"complexity":2.0894,"coverage":0.7212,"colour":0.4058,"drift":0.1337},"knobResponse":[0.314,0.2095,0.2824,0.2879]},{"slug":"renyi-parking","title":"Rényi Parking","family":"data","round":35,"note":"128줄이 저마다 60 LED 길이의 거리이고, 6 LED 짜리 차가 아무 데나 와서 들어갈 틈이 있을 때만 서요. 거리는 위에서 빈 채로 들어와 내려가며 차고, 바닥에 닿으면 차 길이만 한 틈이 하나도 없이 72% 쯤 막혀요. 먼저 온 차는 하늘색, 마지막 틈에 끼어든 차는 금색이며 옆 눈금이 바닥을 떠난 거리 128개의 평균을 예측값 0.722 의 금색 눈금에 대 보고, K3 은 차 길이를 6~15 LED 로 바꾸고 K1 을 누르면 차가 다 왼쪽으로 밀려 줄마다 채운 몫만 한 막대가 돼요.","idea":"Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.","buttons":"K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.","code":"// ===== Patternflow pattern =====\n// Title:   Rényi Parking\n// Family:  data\n// Idea:    Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Rényi's parking problem (Alfréd Rényi, 1958), with its lattice form, Flory's dimers (Paul Flory, 1939)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1\n//\n// Knob 1: Hue. Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too.\n// Knob 2: Speed. How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes.\n// Knob 3: Length. The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it.\n// Knob 4: Lattice. Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street.\n// Buttons: K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.\n\nconst W = 64, H = 128, S = 60, MAXC = 32, GX = 61;\n// Rényi's constant, the share an endless street fills once jammed.\nconst C = 0.7475979202534114;\nconst { min, max, floor, ceil, round, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The street's own clock: t car arrivals have been tried per car length of\n// street by the time it has come down tau rows. It runs slowly at the top\n// and without end at row 127, so every street leaves the panel jammed.\n// With 6-LED cars a street is on average 0.29 full at row 42 (t = 0.45),\n// 0.54 at row 85 (t = 1.8) and 0.70 at row 120, and from there to the\n// bottom the few cars that still fit squeeze in: the slow end of the\n// filling, which on an endless street never stops.\nconst A = 0.9;\nconst clockAt = (tau) => (tau >= H - 1 ? Infinity : (A * tau) / (H - 1 - tau));\n\n// The mean number of cars a jammed street holds. Parked anywhere, a street\n// x car lengths long holds M(x), where M = 0 below 1 and\n// M(x) = 1 + 2/(x - 1) times the integral of M from 0 to x - 1, since the\n// first car splits the street into two streets of random length. That is\n// solved here in steps of 1/2048 of a car: 7.2236 cars at x = 10, the\n// 6-LED cars, a fill of 0.7224. Rényi's C (x + 1) - 1 agrees with it to\n// 1e-5 from x = 6 up and is 0.0045 cars low at x = 4. On a grid of N\n// points with k to a car the same split gives M(n) = 1 + 2/(n - k + 1)\n// times the sum of M(j) for j \u003c= n - k, summed exactly.\nfunction renyi(x) {\n  const h = 1 / 2048, n = round(x / h), one = 2048;\n  if (n \u003c one) return 0;\n  const m = new Float64Array(n + 1), area = new Float64Array(n + 1);\n  for (let i = one; i \u003c= n; i++) {\n    // area[i] is the integral of M from 1 to i h by trapezoids, M being 0\n    // below 1 and jumping to 1 there.\n    m[i] = i === one ? 1 : 1 + (2 / (i * h - 1)) * area[i - one];\n    if (i > one) area[i] = area[i - 1] + (h * (m[i] + m[i - 1])) / 2;\n  }\n  return m[n];\n}\nfunction predict(L, k) {\n  if (!k) return (renyi(S / L) * L) / S;\n  const N = floor((S * k) / L + 1e-9), m = new Float64Array(N + 1);\n  let sum = 0;\n  for (let n = 0; n \u003c= N; n++) {\n    if (n >= k) sum += m[n - k];\n    m[n] = n \u003c k ? 0 : 1 + (2 * sum) / (n - k + 1);\n  }\n  return (m[N] * L) / S;\n}\n\nfunction newStreet() {\n  return { pos: new Float32Array(MAXC), at: new Float32Array(MAXC), n: 0, L: 6, k: 0, F: 0, next: 0, last: 1 };\n}\n\n// Where a car can still stop: for every gap the start points that leave room\n// for it, as a length in LEDs (anywhere) or a count of grid points (on a\n// grid). With pick >= 0 it returns the start point that far into them.\n// rate() turns the total into tries that succeed per unit of the street's\n// clock: one try per car length of street, spread evenly.\nfunction feasible(st, pick) {\n  const { pos, n, L, k } = st;\n  let total = 0, start = 0;\n  if (!k) {\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? pos[i] : S, room = end - start - L;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return start + (pick - total);\n        total += room;\n      }\n      if (i \u003c n) start = pos[i] + L;\n    }\n  } else {\n    const d = L / k, N = floor((S * k) / L + 1e-9);\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? round(pos[i] / d) : N, room = end - start - k + 1;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return (start + floor(pick - total)) * d;\n        total += room;\n      }\n      if (i \u003c n) start = round(pos[i] / d) + k;\n    }\n  }\n  return pick >= 0 ? -1 : total;\n}\n\nconst rate = (st) => (st.k ? st.F / st.k : st.F / st.L);\n\nfunction reset(st, L, k, pred) {\n  st.n = 0;\n  st.L = L;\n  st.k = k;\n  // The share parked when the last car is due to come, so the colours run\n  // from the first car to the last whatever the length.\n  st.last = max(0.05, pred - L / S);\n  st.F = feasible(st, -1);\n  st.next = -log(1 - Math.random()) / rate(st);\n}\n\n// Run a street's clock on to t: a try that lands in a feasible stretch\n// parks a car at a uniform place in it. Tries that land anywhere else are\n// turned away and change nothing, so only the successes are drawn, at the\n// rate of the feasible stretch. Each car keeps the share of the street that\n// was already parked when it came.\nfunction advance(st, t) {\n  while (st.F > 0 && st.next \u003c= t) {\n    const x = feasible(st, Math.random() * st.F);\n    if (x \u003c 0) break;\n    let i = st.n;\n    while (i > 0 && st.pos[i - 1] > x) (st.pos[i] = st.pos[i - 1]), (st.at[i] = st.at[i - 1]), i--;\n    st.pos[i] = x;\n    st.at[i] = (st.n * st.L) / S;\n    st.n++;\n    st.F = feasible(st, -1);\n    if (st.F > 0) st.next += -log(1 - Math.random()) / rate(st);\n  }\n}\n\nexport function setup(params) {\n  const streets = [];\n  for (let i = 0; i \u003c H; i++) streets.push(newStreet());\n  params.s = {\n    streets, head: 0, phase: 0.5, primed: false,\n    hue: 0, speed: 2, L: 6, k: 0, pred: predict(6, 0),\n    // The fills of the last 128 jammed streets of the current length and\n    // grid, as they leave the bottom.\n    outs: new Float32Array(H), outN: 0, outI: 0,\n    pack: -1, rgb: new Float32Array(W * H * 3), pal: new Float32Array(33 * 3), palHue: NaN,\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 6, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const L = round(cl(kv[2], 6, 15)), g = cl(kv[3], 0, 1), k = g \u003c 0.07 ? 0 : max(1, round(1 / g));\n  if (L !== P.L || k !== P.k) {\n    P.L = L;\n    P.k = k;\n    P.pred = predict(L, k);\n    P.outN = P.outI = 0;\n  }\n  // The first frame fills the panel with streets at every stage, each run\n  // on to the clock of its row, so the picture starts whole.\n  if (!P.primed) {\n    for (let r = 0; r \u003c H; r++) {\n      const st = P.streets[(P.head + r) % H];\n      reset(st, L, k, P.pred);\n      advance(st, clockAt(r + P.phase));\n    }\n    P.primed = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.pack \u003c 0) P.pack = 0;\n  if (P.pack >= 0) {\n    // The tap: 0.6 s to pack, 3 s held, 0.6 s back; the streets wait.\n    P.pack += d;\n    if (P.pack >= 4.2) P.pack = -1;\n    return;\n  }\n  P.phase += d * P.speed * 2;\n  while (P.phase >= 1) {\n    P.phase -= 1;\n    // The jammed bottom street leaves and comes back empty at the top.\n    const bottom = P.streets[(P.head + H - 1) % H];\n    if (bottom.L === P.L && bottom.k === P.k) {\n      P.outs[P.outI] = (bottom.n * bottom.L) / S;\n      P.outI = (P.outI + 1) % H;\n      P.outN = min(H, P.outN + 1);\n    }\n    P.head = (P.head + H - 1) % H;\n    reset(bottom, L, k, P.pred);\n  }\n  for (let r = 0; r \u003c H; r++) advance(P.streets[(P.head + r) % H], clockAt(r + P.phase));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.primed) return;\n  const { rgb, pal } = P;\n  if (P.palHue !== P.hue) {\n    // 33 steps from the first car to come to the last: azure through\n    // violet and rose to gold, brighter as it goes, so the latecomers read\n    // first. Between orange and lime a dim car would read brown or olive,\n    // so there the dim end is lifted.\n    for (let i = 0; i \u003c= 32; i++) {\n      const u = i / 32, h = P.hue + 0.58 + 0.55 * u, band = max(0, 1 - abs(h - floor(h) - 0.14) / 0.13);\n      const v = 0.6 + 0.4 * u;\n      hsv(h, 0.75 - 0.1 * u, max(v, v + (0.92 - v) * band), pal, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  const e = P.pack \u003c 0 ? 0 : P.pack \u003c 0.6 ? sm(P.pack / 0.6) : P.pack \u003c 3.6 ? 1 : sm((4.2 - P.pack) / 0.6);\n  for (let r = 0; r \u003c H; r++) {\n    const st = P.streets[(P.head + r) % H], L = st.L;\n    for (let i = 0; i \u003c st.n; i++) {\n      // A car covers the LEDs whose centres fall inside it, less half an\n      // LED at each end: L - 1 LEDs and a dark one, so cars that touch\n      // still read as two.\n      const x = st.pos[i] + (i * L - st.pos[i]) * e, x0 = max(0, ceil(x)), x1 = min(S - 1, ceil(x + L - 1) - 1);\n      const c = min(32, round((st.at[i] / st.last) * 32)) * 3;\n      for (let px = x0; px \u003c= x1; px++) {\n        const q = (r * W + px) * 3;\n        (rgb[q] = pal[c]), (rgb[q + 1] = pal[c + 1]), (rgb[q + 2] = pal[c + 2]);\n      }\n    }\n  }\n  const gold = [];\n  hsv(P.hue + 0.13, 0.7, 1, gold, 0);\n  // Packed, the gold line stands at the predicted fill across the streets.\n  if (e > 0.5) {\n    const gx = min(S - 1, floor(P.pred * S));\n    for (let r = 0; r \u003c H; r++) {\n      const q = (r * W + gx) * 3;\n      (rgb[q] = gold[0]), (rgb[q + 1] = gold[1]), (rgb[q + 2] = gold[2]);\n    }\n  }\n  // The gauge, three LEDs wide, from a fill of 0.65 at the bottom to 1 at\n  // the top: a bar to the mean of the last jammed streets, a white tick at\n  // Rényi's constant for an endless street and a gold one at the\n  // prediction for this one.\n  const rowOf = (f) => cl(round(H - 1 - ((f - 0.65) / 0.35) * (H - 1)), 0, H - 1);\n  if (P.outN) {\n    let s = 0;\n    for (let i = 0; i \u003c P.outN; i++) s += P.outs[i];\n    const top = rowOf(s / P.outN);\n    for (let y = top; y \u003c H; y++)\n      for (let x = GX; x \u003c W; x++) {\n        const q = (y * W + x) * 3;\n        (rgb[q] = 0.36), (rgb[q + 1] = 0.4), (rgb[q + 2] = 0.5);\n      }\n  }\n  const tick = (f, c) => {\n    const y = rowOf(f);\n    for (let x = GX - 1; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = c[0]), (rgb[q + 1] = c[1]), (rgb[q + 2] = c[2]);\n    }\n  };\n  tick(C, [0.85, 0.85, 0.85]);\n  tick(P.pred, gold);\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","layer":{"id":"layer-renyi-parking","type":"code","name":"renyi-parking","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rényi Parking\n// Family:  data\n// Idea:    Each of the 128 rows is a street 60 LEDs long where cars of one length arrive at random points and park only where they fit; the streets scroll down, so the panel runs from empty streets at the top through filling ones to jammed ones at the bottom, packed to about 73% as Rényi's parking problem says, with the latecomers that squeezed into the last gaps lit warm and a gauge at the side holding the last 128 jammed streets against the prediction.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Rényi's parking problem (Alfréd Rényi, 1958), with its lattice form, Flory's dimers (Paul Flory, 1939)\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1\n//\n// Knob 1: Hue. Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too.\n// Knob 2: Speed. How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes.\n// Knob 3: Length. The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it.\n// Knob 4: Lattice. Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street.\n// Buttons: K1 tap stops the streets and slides every car to the left end of its street, so each row becomes a bar as long as its fill and the ragged right edge draws how a street fills as it travels down; the gold line is the prediction, and the bars of the jammed rows stand along it. Three seconds later the cars slide back and the streets move on.\n\nconst W = 64, H = 128, S = 60, MAXC = 32, GX = 61;\n// Rényi's constant, the share an endless street fills once jammed.\nconst C = 0.7475979202534114;\nconst { min, max, floor, ceil, round, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The street's own clock: t car arrivals have been tried per car length of\n// street by the time it has come down tau rows. It runs slowly at the top\n// and without end at row 127, so every street leaves the panel jammed.\n// With 6-LED cars a street is on average 0.29 full at row 42 (t = 0.45),\n// 0.54 at row 85 (t = 1.8) and 0.70 at row 120, and from there to the\n// bottom the few cars that still fit squeeze in: the slow end of the\n// filling, which on an endless street never stops.\nconst A = 0.9;\nconst clockAt = (tau) => (tau >= H - 1 ? Infinity : (A * tau) / (H - 1 - tau));\n\n// The mean number of cars a jammed street holds. Parked anywhere, a street\n// x car lengths long holds M(x), where M = 0 below 1 and\n// M(x) = 1 + 2/(x - 1) times the integral of M from 0 to x - 1, since the\n// first car splits the street into two streets of random length. That is\n// solved here in steps of 1/2048 of a car: 7.2236 cars at x = 10, the\n// 6-LED cars, a fill of 0.7224. Rényi's C (x + 1) - 1 agrees with it to\n// 1e-5 from x = 6 up and is 0.0045 cars low at x = 4. On a grid of N\n// points with k to a car the same split gives M(n) = 1 + 2/(n - k + 1)\n// times the sum of M(j) for j \u003c= n - k, summed exactly.\nfunction renyi(x) {\n  const h = 1 / 2048, n = round(x / h), one = 2048;\n  if (n \u003c one) return 0;\n  const m = new Float64Array(n + 1), area = new Float64Array(n + 1);\n  for (let i = one; i \u003c= n; i++) {\n    // area[i] is the integral of M from 1 to i h by trapezoids, M being 0\n    // below 1 and jumping to 1 there.\n    m[i] = i === one ? 1 : 1 + (2 / (i * h - 1)) * area[i - one];\n    if (i > one) area[i] = area[i - 1] + (h * (m[i] + m[i - 1])) / 2;\n  }\n  return m[n];\n}\nfunction predict(L, k) {\n  if (!k) return (renyi(S / L) * L) / S;\n  const N = floor((S * k) / L + 1e-9), m = new Float64Array(N + 1);\n  let sum = 0;\n  for (let n = 0; n \u003c= N; n++) {\n    if (n >= k) sum += m[n - k];\n    m[n] = n \u003c k ? 0 : 1 + (2 * sum) / (n - k + 1);\n  }\n  return (m[N] * L) / S;\n}\n\nfunction newStreet() {\n  return { pos: new Float32Array(MAXC), at: new Float32Array(MAXC), n: 0, L: 6, k: 0, F: 0, next: 0, last: 1 };\n}\n\n// Where a car can still stop: for every gap the start points that leave room\n// for it, as a length in LEDs (anywhere) or a count of grid points (on a\n// grid). With pick >= 0 it returns the start point that far into them.\n// rate() turns the total into tries that succeed per unit of the street's\n// clock: one try per car length of street, spread evenly.\nfunction feasible(st, pick) {\n  const { pos, n, L, k } = st;\n  let total = 0, start = 0;\n  if (!k) {\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? pos[i] : S, room = end - start - L;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return start + (pick - total);\n        total += room;\n      }\n      if (i \u003c n) start = pos[i] + L;\n    }\n  } else {\n    const d = L / k, N = floor((S * k) / L + 1e-9);\n    for (let i = 0; i \u003c= n; i++) {\n      const end = i \u003c n ? round(pos[i] / d) : N, room = end - start - k + 1;\n      if (room > 0) {\n        if (pick >= 0 && pick \u003c total + room) return (start + floor(pick - total)) * d;\n        total += room;\n      }\n      if (i \u003c n) start = round(pos[i] / d) + k;\n    }\n  }\n  return pick >= 0 ? -1 : total;\n}\n\nconst rate = (st) => (st.k ? st.F / st.k : st.F / st.L);\n\nfunction reset(st, L, k, pred) {\n  st.n = 0;\n  st.L = L;\n  st.k = k;\n  // The share parked when the last car is due to come, so the colours run\n  // from the first car to the last whatever the length.\n  st.last = max(0.05, pred - L / S);\n  st.F = feasible(st, -1);\n  st.next = -log(1 - Math.random()) / rate(st);\n}\n\n// Run a street's clock on to t: a try that lands in a feasible stretch\n// parks a car at a uniform place in it. Tries that land anywhere else are\n// turned away and change nothing, so only the successes are drawn, at the\n// rate of the feasible stretch. Each car keeps the share of the street that\n// was already parked when it came.\nfunction advance(st, t) {\n  while (st.F > 0 && st.next \u003c= t) {\n    const x = feasible(st, Math.random() * st.F);\n    if (x \u003c 0) break;\n    let i = st.n;\n    while (i > 0 && st.pos[i - 1] > x) (st.pos[i] = st.pos[i - 1]), (st.at[i] = st.at[i - 1]), i--;\n    st.pos[i] = x;\n    st.at[i] = (st.n * st.L) / S;\n    st.n++;\n    st.F = feasible(st, -1);\n    if (st.F > 0) st.next += -log(1 - Math.random()) / rate(st);\n  }\n}\n\nexport function setup(params) {\n  const streets = [];\n  for (let i = 0; i \u003c H; i++) streets.push(newStreet());\n  params.s = {\n    streets, head: 0, phase: 0.5, primed: false,\n    hue: 0, speed: 2, L: 6, k: 0, pred: predict(6, 0),\n    // The fills of the last 128 jammed streets of the current length and\n    // grid, as they leave the bottom.\n    outs: new Float32Array(H), outN: 0, outI: 0,\n    pack: -1, rgb: new Float32Array(W * H * 3), pal: new Float32Array(33 * 3), palHue: NaN,\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 6, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = kv[0];\n  P.speed = cl(kv[1], 0.2, 3);\n  const L = round(cl(kv[2], 6, 15)), g = cl(kv[3], 0, 1), k = g \u003c 0.07 ? 0 : max(1, round(1 / g));\n  if (L !== P.L || k !== P.k) {\n    P.L = L;\n    P.k = k;\n    P.pred = predict(L, k);\n    P.outN = P.outI = 0;\n  }\n  // The first frame fills the panel with streets at every stage, each run\n  // on to the clock of its row, so the picture starts whole.\n  if (!P.primed) {\n    for (let r = 0; r \u003c H; r++) {\n      const st = P.streets[(P.head + r) % H];\n      reset(st, L, k, P.pred);\n      advance(st, clockAt(r + P.phase));\n    }\n    P.primed = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.pack \u003c 0) P.pack = 0;\n  if (P.pack >= 0) {\n    // The tap: 0.6 s to pack, 3 s held, 0.6 s back; the streets wait.\n    P.pack += d;\n    if (P.pack >= 4.2) P.pack = -1;\n    return;\n  }\n  P.phase += d * P.speed * 2;\n  while (P.phase >= 1) {\n    P.phase -= 1;\n    // The jammed bottom street leaves and comes back empty at the top.\n    const bottom = P.streets[(P.head + H - 1) % H];\n    if (bottom.L === P.L && bottom.k === P.k) {\n      P.outs[P.outI] = (bottom.n * bottom.L) / S;\n      P.outI = (P.outI + 1) % H;\n      P.outN = min(H, P.outN + 1);\n    }\n    P.head = (P.head + H - 1) % H;\n    reset(bottom, L, k, P.pred);\n  }\n  for (let r = 0; r \u003c H; r++) advance(P.streets[(P.head + r) % H], clockAt(r + P.phase));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.primed) return;\n  const { rgb, pal } = P;\n  if (P.palHue !== P.hue) {\n    // 33 steps from the first car to come to the last: azure through\n    // violet and rose to gold, brighter as it goes, so the latecomers read\n    // first. Between orange and lime a dim car would read brown or olive,\n    // so there the dim end is lifted.\n    for (let i = 0; i \u003c= 32; i++) {\n      const u = i / 32, h = P.hue + 0.58 + 0.55 * u, band = max(0, 1 - abs(h - floor(h) - 0.14) / 0.13);\n      const v = 0.6 + 0.4 * u;\n      hsv(h, 0.75 - 0.1 * u, max(v, v + (0.92 - v) * band), pal, i * 3);\n    }\n    P.palHue = P.hue;\n  }\n  rgb.fill(0);\n  const e = P.pack \u003c 0 ? 0 : P.pack \u003c 0.6 ? sm(P.pack / 0.6) : P.pack \u003c 3.6 ? 1 : sm((4.2 - P.pack) / 0.6);\n  for (let r = 0; r \u003c H; r++) {\n    const st = P.streets[(P.head + r) % H], L = st.L;\n    for (let i = 0; i \u003c st.n; i++) {\n      // A car covers the LEDs whose centres fall inside it, less half an\n      // LED at each end: L - 1 LEDs and a dark one, so cars that touch\n      // still read as two.\n      const x = st.pos[i] + (i * L - st.pos[i]) * e, x0 = max(0, ceil(x)), x1 = min(S - 1, ceil(x + L - 1) - 1);\n      const c = min(32, round((st.at[i] / st.last) * 32)) * 3;\n      for (let px = x0; px \u003c= x1; px++) {\n        const q = (r * W + px) * 3;\n        (rgb[q] = pal[c]), (rgb[q + 1] = pal[c + 1]), (rgb[q + 2] = pal[c + 2]);\n      }\n    }\n  }\n  const gold = [];\n  hsv(P.hue + 0.13, 0.7, 1, gold, 0);\n  // Packed, the gold line stands at the predicted fill across the streets.\n  if (e > 0.5) {\n    const gx = min(S - 1, floor(P.pred * S));\n    for (let r = 0; r \u003c H; r++) {\n      const q = (r * W + gx) * 3;\n      (rgb[q] = gold[0]), (rgb[q + 1] = gold[1]), (rgb[q + 2] = gold[2]);\n    }\n  }\n  // The gauge, three LEDs wide, from a fill of 0.65 at the bottom to 1 at\n  // the top: a bar to the mean of the last jammed streets, a white tick at\n  // Rényi's constant for an endless street and a gold one at the\n  // prediction for this one.\n  const rowOf = (f) => cl(round(H - 1 - ((f - 0.65) / 0.35) * (H - 1)), 0, H - 1);\n  if (P.outN) {\n    let s = 0;\n    for (let i = 0; i \u003c P.outN; i++) s += P.outs[i];\n    const top = rowOf(s / P.outN);\n    for (let y = top; y \u003c H; y++)\n      for (let x = GX; x \u003c W; x++) {\n        const q = (y * W + x) * 3;\n        (rgb[q] = 0.36), (rgb[q + 1] = 0.4), (rgb[q + 2] = 0.5);\n      }\n  }\n  const tick = (f, c) => {\n    const y = rowOf(f);\n    for (let x = GX - 1; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      (rgb[q] = c[0]), (rgb[q + 1] = c[1]), (rgb[q + 2] = c[2]);\n    }\n  };\n  tick(C, [0.85, 0.85, 0.85]);\n  tick(P.pred, gold);\n  for (let y = 0, q = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, min(255, rgb[q] * 255), min(255, rgb[q + 1] * 255), min(255, rgb[q + 2] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Length=6..15, Lattice=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours round the wheel together. At 0 the first cars to park are azure, later ones violet and rose, and the last ones, squeezed into gaps barely a car long, gold; the gauge's tick is gold too."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the streets scroll: 2 rows a second times the knob, so at 2 a street takes 32 seconds from empty at the top to jammed at the bottom, and at 0.2 over five minutes."},{"name":"Length","min":6,"max":15,"about":"The car length in LEDs, 6 to 15 in whole LEDs, so a street is 10 to 4 car lengths long. A street x car lengths long holds 0.7476 x - 0.2524 cars on average once jammed, 7.224 at 6 LEDs, so the share it fills falls from 0.722 at 6 LEDs to 0.686 at 15; the gold tick moves with it."},{"name":"Lattice","min":0,"max":1,"about":"Below 0.07 cars park anywhere. Above it they may only stop on a grid of k points to a car length, k = 1 / Lattice rounded: 4 points at 0.25, where a jammed street of 6-LED cars fills 0.784; 2 at 0.5, Flory's dimers, 0.851 here and 1 - e^-2 = 0.865 on an endless street; from 0.67 up every car has its own bay and every bay fills, which for 6-LED cars is the whole street."}],"start":[0,2,6,0.06],"measures":{"motion":1.1003,"detail":0.1839,"edges":0.8784,"complexity":0.1342,"coverage":0.3299,"colour":0.3078,"drift":0.0658},"knobResponse":[0.1481,0.1885,0.1964,0.2206]},{"slug":"rice-planting","title":"Rice Planting","family":"farm","round":26,"note":"물 댄 논을 위에서 내려다봐요. 밀짚모자를 쓴 일꾼들이 못줄을 따라 뒷걸음질하며 모를 한 포기씩 꽂고, 앞쪽 거울 물에는 구름과 모춤, 백로가 있어요. K1 은 아침 안개에서 노을까지 돌리고, 누르면 남은 모를 한꺼번에 꽂고 줄을 넘겨요.","idea":"Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.","buttons":"K1 tap and the crew pushes in the rest of the row at once and the rope moves on.","code":"// ===== Patternflow pattern =====\n// Title:   Rice Planting\n// Family:  farm\n// Idea:    Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after monaegi, the hand transplanting of rice along a marked rope (motjul) in Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1\n//\n// Knob 1: Hour. A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange.\n// Knob 2: Speed. At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower.\n// Knob 3: Planters. Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look.\n// Knob 4: Wind. Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean.\n// Buttons: K1 tap and the crew pushes in the rest of the row at once and the rope moves on.\n\nconst W = 64, H = 128, N = W * H, PW = 61, NH = 14, NR = 25;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every p cells, so the sky texture tiles.\nfunction vnp(x, y, p, o) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const g = (a, b) => hash(a % p, (b % p) + o);\n  const a = g(xi, yi), b = g(xi + 1, yi), c = g(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + g(xi + 1, yi + 1)) * su * sv;\n}\n\n// A paddy and its left bund are 61 columns of the world; the hills of a row\n// stand every four columns, and the rows every four LEDs from row 5 to 101.\nconst HX = (j) => 5 + 4 * j;\nconst rowY = (r, dn) => (dn > 0 ? 5 + 4 * r : 101 - 4 * r);\n// The light by the hour: sky overhead, sky toward the sun, sunlit cloud,\n// cloud underside, light on the people and the fields, and mist.\nconst HOURS = [\n  [0, 46, 92, 168, 116, 150, 204, 250, 242, 236, 150, 162, 192, 0.88, 0.92, 0.98, 0.32],\n  [0.25, 36, 92, 186, 110, 160, 218, 254, 250, 244, 156, 172, 204, 0.96, 0.98, 1, 0.12],\n  [0.5, 18, 66, 176, 64, 126, 210, 255, 255, 255, 168, 180, 206, 1.05, 1.05, 1, 0],\n  [0.75, 44, 92, 176, 176, 164, 150, 255, 224, 170, 160, 140, 156, 1, 0.9, 0.74, 0],\n  [1, 36, 34, 98, 170, 86, 96, 255, 150, 70, 112, 64, 100, 0.82, 0.56, 0.46, 0.12],\n];\nfunction key(u) {\n  let i = 0;\n  while (i \u003c HOURS.length - 2 && u > HOURS[i + 1][0]) i++;\n  const a = HOURS[i], b = HOURS[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\nconst HAT = [234, 190, 102], SKIN = [226, 176, 136], PANTS = [[60, 62, 120], [126, 62, 110], [70, 84, 72]];\nconst SHIRTS = [[236, 236, 228], [104, 144, 224], [238, 136, 164], [150, 208, 96], [184, 152, 228], [214, 78, 70], [112, 204, 204], [70, 96, 176]];\nconst SEED = [134, 222, 72], LEAF = [70, 166, 56], ROOT = [168, 136, 100], TIE = [230, 200, 112], NUR = [96, 196, 66];\nconst ROPE = [200, 170, 116], MARK = [[240, 52, 40], [252, 216, 60]], GRASS = [62, 116, 40], EARTH = [134, 106, 74], MUD = [120, 92, 58];\nconst WHITE = [248, 248, 242], BILL = [244, 196, 40];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, f: F32(N * 3), rip: F32(N), tb: F32(H), ht: F32(16384), bm: new Uint8Array(W), cd: F32(16384), cs: F32(16384), nz: F32(16384), k: 0, dn: 1, r: 0, fl: new Uint8Array(NH),\n    mv: -1.5, sl: -1.5, cam: 0.5, n: 0, h: 0.5, w: 0.5, ox: rnd() * 128, oy: rnd() * 128, rp: [], bu: [], init: false,\n  });\n  // The sky: clouds with steep edges, the size of a few drift blocks, and a\n  // slower field that says where the wind roughens the water and where mist lies.\n  for (let i = 0; i \u003c 16384; i++) {\n    const x = i & 127, y = i >> 7, q = (f, o) => vnp((x * f) / 128, (y * f) / 128, f, o);\n    const v = 0.55 * q(6, 0) + 0.3 * q(14, 50) + 0.15 * q(32, 90);\n    P.cd[i] = sm(0.5, 0.6, v);\n    P.cs[i] = cl((v - 0.5) * 4, 0, 1);\n    P.nz[i] = 0.6 * q(5, 130) + 0.4 * q(12, 170);\n    P.ht[i] = hash(x, y);\n  }\n  P.crew = SHIRTS.map((s, i) => ({ sh: (i * 3 + floor(rnd() * 8)) % 8, pa: floor(rnd() * 3), sp: 0.85 + rnd() * 0.3, list: [], q: 0, ph: 0.5, home: 32.5, wig: rnd() * 7 }));\n  P.eg = { x: 10 + rnd() * 44, y: 84 + rnd() * 14, a: rnd() * 6.28, m: 0, t: 1 + rnd(), st: -1.5, sx: 0.5, sy: 0.5, tx: 0.5, ty: 0.5, sk: -1.5 };\n  P.ca = { x: 14 + rnd() * 36, tx: 32.5, w: 0.6 + rnd(), tt: -0.5 };\n  P.pu = { x: 18 + rnd() * 30, x1: 0, old: [] };\n  P.pu.x1 = P.pu.x + 10 + rnd() * 12;\n}\n\n// Each planter takes a run of the fourteen hills; on alternate rows they work it the other way.\nfunction assign(P) {\n  const n = P.n;\n  P.crew.forEach((c, i) => {\n    const a = floor((i * NH) / n), b = floor(((i + 1) * NH) / n);\n    c.list = [];\n    if (i \u003c n) for (let j = a; j \u003c b; j++) if (!P.fl[j]) c.list.push(j);\n    if (P.r & 1) c.list.reverse();\n    c.q = 0;\n    c.ph = 0;\n    if (i \u003c n) c.home = (HX(a) + HX(b - 1)) / 2;\n  });\n}\nconst fresh = (P) => (P.fl.fill(0), assign(P));\nconst ropeY = (P) => (P.mv >= 0 ? mix(rowY(P.r, P.dn), rowY(P.r + 1, P.dn), sm(0, 1, P.mv)) : rowY(P.r, P.dn));\nconst ring = (P, x, y, s, life = 0.9) => P.rp.length \u003c 48 && P.rp.push({ x: x + 1e-6, y: y + 1e-6, s, a: 1e-6, life });\nfunction plant(P, j) {\n  P.fl[j] = 1;\n  ring(P, P.k * PW + HX(j), rowY(P.r, P.dn), 0.9);\n}\n// Bundles of seedlings lie about the open water, waiting for the line; ft\n// is how far through its flight a thrown one is, below 0 once it floats.\nconst bun = (x, y, ft, tx, ty) => ({ x, y, fx: x, fy: y, tx, ty, a: floor(rnd() * 8), ft });\nfunction scatter(P, k, lo, hi) {\n  for (let i = 0; i \u003c 12; i++) P.bu.push(bun(k * PW + 8 + rnd() * 46, lo + rnd() * (hi - lo), -1.5, 0.5, 0.5));\n}\n// Where open water lies ahead of the line in this paddy, as rows lo..hi.\nfunction open(P, gap) {\n  const ry = ropeY(P);\n  return P.dn > 0 ? [ry + gap, 99] : [7, ry - gap];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 4, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(kv[1], 0.2, 3)) / 2, n = round(cl(kv[2], 4, 8));\n  P.h = cl(kv[0], 0, 1);\n  P.w = cl(kv[3], 0, 1);\n  if (!P.init) {\n    // They have been at it since dawn: the more hands, the further along.\n    P.n = n;\n    P.r = 8 + round((n - 4) * 1.5) + floor(rnd() * 2);\n    assign(P);\n    scatter(P, 0, rowY(P.r, 1) + 10, 99);\n    P.init = true;\n  }\n  if (n !== P.n) (P.n = n), assign(P);\n  P.t += d;\n  P.ox += (3.4 + 5 * P.w) * d;\n  P.oy += (1.4 + 2 * P.w) * d;\n  const btn = input.btnPressed && input.btnPressed[0];\n  if (P.sl \u003c 0) {\n    if (btn && P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) plant(P, j);\n    if (P.mv \u003c 0) {\n      for (let i = 0; i \u003c P.n; i++) {\n        const c = P.crew[i];\n        if (c.q >= c.list.length) continue;\n        const j = c.list[c.q], p0 = c.ph;\n        if (P.fl[j] && p0 \u003c 0.6) {\n          c.q++;\n          continue;\n        }\n        c.ph += (d * c.sp) / 0.36;\n        if (p0 \u003c 0.6 && c.ph >= 0.6) plant(P, j);\n        if (c.ph >= 1) (c.ph = 0), c.q++;\n      }\n      if (P.fl.every((v) => v)) {\n        if (P.r >= NR - 1) {\n          // The last row is in: the crew crosses the bund to the next paddy,\n          // where the carrier has already thrown the bundles.\n          P.sl = 0;\n          scatter(P, P.k + 1, 10, 96);\n          P.eg.m === 0 && fly(P, P.k + 1);\n        } else P.mv = 0;\n      }\n    } else if ((P.mv += d / 0.5) >= 1) {\n      (P.mv = -1), P.r++, fresh(P);\n      for (let i = 0; i \u003c P.n; i++) ring(P, P.k * PW + P.crew[i].home, rowY(P.r, P.dn) + P.dn * 10, 0.5);\n    }\n  } else if ((P.sl += d / 3.5) >= 1) (P.sl = -1), P.k++, (P.dn = -P.dn), (P.r = 0), fresh(P);\n  P.cam = P.k * PW + (P.sl >= 0 ? PW * sm(0, 1, P.sl) : 0);\n  const ry = ropeY(P), dn = P.dn;\n  // The line picks up the bundles it reaches.\n  P.bu = P.bu.filter((b) => {\n    const k = floor(b.x / PW);\n    return b.ft >= 0 || k > P.k || (k === P.k && (P.sl >= 0 || (b.y - ry) * dn > 5));\n  });\n  for (const b of P.bu)\n    if (b.ft >= 0 && (b.ft += d / 0.75) >= 1) (b.ft = -1.5), (b.x = b.tx), (b.y = b.ty), ring(P, b.x, b.y, 1.2, 1.2);\n  // The carrier on the levee throws a bundle ahead of the line now and then.\n  const C = P.ca;\n  if (C.tt > 0) C.tt -= d;\n  else if (abs(C.tx - C.x) > 0.6) C.x += Math.sign(C.tx - C.x) * 7 * d;\n  else if ((C.w -= d) \u003c 0) {\n    const [lo, hi] = open(P, 10);\n    if (P.sl \u003c 0 && hi - lo > 6 && P.bu.length \u003c 16) {\n      const ty = max(lo, hi - 46) + rnd() * (hi - max(lo, hi - 46));\n      P.bu.push(bun(C.x, 104.5, 1e-6, P.k * PW + 8 + rnd() * 46, ty));\n      C.tt = 0.5;\n    }\n    C.w = 1.6 + rnd() * 2.4;\n    C.tx = P.cam + 6 + rnd() * 52;\n  }\n  // The seedling puller works left along the nursery bed.\n  const U = P.pu;\n  U.x -= 0.5 * d;\n  if (U.x \u003c P.cam - 8) U.old.push([U.x + 2, U.x1]) > 3 && U.old.shift(), (U.x1 = (U.x = P.cam + 70) + 2);\n  egret(P, d, ry);\n  for (const q of P.rp) q.a += d;\n  P.rp = P.rp.filter((q) => q.a \u003c q.life);\n}\n\n// The egret flies to open water in paddy k, away from the line.\nfunction fly(P, k) {\n  const E = P.eg, [lo, hi] = k === P.k ? open(P, 26) : [12, 92];\n  if (hi - lo \u003c 8) return fly(P, k + 1);\n  Object.assign(E, { m: 1, t: 0, sx: E.x, sy: E.y, tx: k * PW + 8 + rnd() * 46, ty: lo + rnd() * (hi - lo) });\n  E.a = Math.atan2(E.ty - E.sy, E.tx - E.sx);\n}\nfunction egret(P, d, ry) {\n  const E = P.eg;\n  if (E.m === 1) {\n    if ((E.t += d / 2.4) >= 1) (E.m = 0), (E.x = E.tx), (E.y = E.ty), (E.t = 1.5), ring(P, E.x, E.y, 0.8);\n    return;\n  }\n  if (E.sk >= 0 && (E.sk += d / 0.35) >= 1) E.sk = -1;\n  // Too near the line, or left behind in a planted paddy: off it goes.\n  if (P.sl \u003c 0 && (floor(E.x / PW) \u003c P.k || (floor(E.x / PW) === P.k && (E.y - ry) * P.dn \u003c 15))) return fly(P, P.k);\n  if (E.st >= 0) {\n    E.st += d / 0.45;\n    const q = sm(0, 1, E.st);\n    E.x = mix(E.sx, E.tx, q);\n    E.y = mix(E.sy, E.ty, q);\n    if (E.st >= 1) (E.st = -1), ring(P, E.x - 1.5 * cos(E.a), E.y - 1.5 * sin(E.a), 0.45, 0.7);\n  } else if ((E.t -= d) \u003c 0) {\n    // A slow step, now and then a strike at something in the mud.\n    if (rnd() \u003c 0.25) (E.sk = 0), ring(P, E.x + 5 * cos(E.a), E.y + 5 * sin(E.a), 0.7);\n    else {\n      const lx = E.x - P.k * PW;\n      E.a += (rnd() - 0.5) * 1.4;\n      if (lx \u003c 10) E.a = 0.2 * (rnd() - 0.5);\n      if (lx > 52) E.a = PI + 0.2 * (rnd() - 0.5);\n      if (E.y > 96 || E.y \u003c 10) E.a = (E.y > 50 ? -PI : PI) / 2 + (rnd() - 0.5);\n      Object.assign(E, { st: 0, sx: E.x, sy: E.y, tx: E.x + 1.6 * cos(E.a), ty: E.y + 1.6 * sin(E.a) });\n    }\n    E.t = 0.6 + rnd() * 1.8;\n  }\n}\n\nlet F, L;\nfunction put(x, y, c, k = 1, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j] * k * L[j], a);\n}\n// Points given along a heading (u forward, v to the side), turned to angle a.\nfunction spr(x, y, a, pts) {\n  const c = cos(a), s = sin(a);\n  for (const [u, v, col, k] of pts) {\n    const px = round(x + u * c - v * s), py = round(y + u * s + v * c), o = (py * W + px) * 3;\n    if (col) put(px, py, col, k);\n    else if (px >= 0 && px \u003c W && py >= 0 && py \u003c H) (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n  }\n}\nfunction disc(x, y, r, col, sh) {\n  x = round(x);\n  y = round(y);\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const e = sqrt(dx * dx + dy * dy);\n      if (e > r + 0.35) continue;\n      put(x + dx, y + dy, col, (1.14 - 0.32 * (e / r) ** 2) * (e > r - 0.55 ? 0.82 : 1) - (sh * 0.1 * (dx + dy)) / r);\n    }\n}\nfunction line(ax, ay, bx, by, c, k) {\n  const n = max(1, round(max(abs(bx - ax), abs(by - ay))));\n  for (let i = 0; i \u003c= n; i++) put(mix(ax, bx, i / n), mix(ay, by, i / n), c, k);\n}\nconst BUNDLE = [[-2, 0, ROOT, 0.9], [-1, 0, TIE, 1], [0, 0, SEED, 0.95], [1, 0, LEAF, 1], [2, 0, LEAF, 0.8], [1, -1, LEAF, 0.75], [1, 1, LEAF, 0.75]];\n\n// One planter bent over, seen from above: the hat, the back and hips\n// behind it, the arms reaching out past the brim to the water, a bundle in\n// one hand and the other pushing a hill in at the rope.\nconst BACK = [3.4, 3.4, 3, 2.6, 2.1];\nfunction planter(P, c, x, y, dn, ry, x0, hr, walk) {\n  const sh = SHIRTS[c.sh], pa = PANTS[c.pa], st = walk ? round(sin(P.t * 9 + c.wig)) : 0;\n  let side = c.home \u003c 32 ? 1 : -1, e = 0, tx = x + side * 3, ty = y - dn * 3.6;\n  if (!walk && c.q \u003c c.list.length) {\n    const hx = x0 + HX(c.list[c.q]);\n    side = hx >= x ? 1 : -1;\n    e = c.ph \u003c 0.6 ? sm(0, 0.5, c.ph) : 1 - sm(0.65, 1, c.ph);\n    tx = mix(x + side * 3, hx, e);\n    ty = mix(y - dn * 3.6, ry + dn * 0.6, e);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    put(x + s, y + dn * (8 + (s * st > 0 ? 1 : 0)), pa, 0.7);\n    for (let dx = -1; dx \u003c= 1; dx++) put(x + dx, y + dn * 7, pa, 0.9 - 0.1 * abs(dx));\n  }\n  BACK.forEach((hw, j) => {\n    for (let dx = -3; dx \u003c= 3; dx++) if (abs(dx) \u003c= hw) put(x + dx, y + dn * (2 + j), sh, (0.98 - 0.07 * j) * (abs(dx) > hw - 1 ? 0.85 : 1));\n  });\n  line(x + side * 2.8, y + dn * 1.5, tx, ty, sh, 0.9);\n  put(tx, ty, SKIN);\n  const bx = x - side * 3.2, by = y - dn * 3;\n  line(x - side * 2.8, y + dn * 1.5, bx, by, sh, 0.9);\n  put(bx, by, SKIN);\n  put(bx, by - dn, SEED);\n  put(bx + side, by - dn * 1.6, LEAF, 0.9);\n  put(bx - side, by - dn, LEAF, 0.8);\n  disc(x + (tx - x) * 0.15, y - dn * e * 0.8, hr, HAT, 1);\n}\n\n// Ripple rings from every push, step and splash, summed per LED.\nfunction ripples(P, cam) {\n  const RIP = P.rip;\n  RIP.fill(0);\n  for (const q of P.rp) {\n    const R = 0.6 + q.a * 6.5, a = q.s * (1 - q.a / q.life), qx = q.x - cam;\n    for (let y = max(0, floor(q.y - R - 1)); y \u003c= min(H - 1, q.y + R + 1); y++)\n      for (let x = max(0, floor(qx - R - 1)); x \u003c= min(W - 1, qx + R + 1); x++) {\n        const e = abs(sqrt((x - qx) ** 2 + (y - q.y) ** 2) - R);\n        if (e \u003c 0.8) RIP[y * W + x] += a * (1 - e / 0.8);\n      }\n  }\n}\n\n// The bunds, the levee, the nursery, and the water mirroring the sky.\nfunction ground(P, K, cam, ry) {\n  const f = F, k = P.k, dn = P.dn, t = P.t, w = P.w, h = P.h, RIP = P.rip, CD = P.cd, CS = P.cs, NZ = P.nz, HT = P.ht, TB = P.tb;\n  const ox = floor(P.ox), oy = floor(P.oy), wo = floor(t * (3 + 6 * w)), ws = 0.75 - 0.6 * w, wa1 = min(1, w * 4);\n  // The sun's glint, near noon, sliding across the paddy with the hour.\n  const gu = cl((h - 0.22) / 0.56, 0, 1), gs = sm(0.22, 0.38, h) * (1 - sm(0.62, 0.8, h)), gx = 6 + 52 * gu, gy = 70 - 30 * sin(PI * gu);\n  // The nursery bed is bare where the seedlings have been pulled.\n  const BM = P.bm;\n  BM.fill(0);\n  for (const [a, b] of [...P.pu.old, [P.pu.x + 2, P.pu.x1]]) for (let x = max(0, ceil(a - cam)); x \u003c= min(W - 1, b - cam); x++) BM[x] = 1;\n  // How muddy the water is on each row of this paddy: churned round the\n  // crew's feet and behind them, settling further back.\n  for (let y = 0; y \u003c H; y++) {\n    const ds = (ry - y) * dn;\n    TB[y] = P.sl >= 0 ? 0.22 : sm(-14, -9, ds) * (0.16 + 0.3 * exp(-max(0, ds) / 14));\n  }\n  const [z0, z1, z2, s0, s1, s2, l0, l1, l2, h0, h1, h2, , , , mist] = K.slice(1), L0 = L[0], L1 = L[1], L2 = L[2], M0 = MUD[0] * L0, M1 = MUD[1] * L1, M2 = MUD[2] * L2;\n  const m0 = mix(s0, 250, 0.6), m1 = mix(s1, 250, 0.6), m2 = mix(s2, 250, 0.6), my = floor(t * 1.5), mx = floor(t * 2.5) + 40;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, wx = x + cam, kk = floor(wx / PW), lx = wx - kk * PW, o = i * 3, hv = HT[(wx & 127) | (y \u003c\u003c 7)];\n    const wet = y >= 3 && y \u003c= 103 && lx >= 3 ? 1 : y === 110 || y === 116 || y === 122 ? 0.7 : 0;\n    if (!wet) {\n      let c = GRASS, v = 0.8 + 0.4 * hv;\n      if (y >= 110) {\n        const bare = y >= 117 && y \u003c= 121 && BM[x];\n        (c = bare ? MUD : NUR), (v = bare ? 0.55 + 0.3 * hv : (y === 111 || y === 115 || y === 117 || y === 121 || y === 123 ? 0.62 : 0.72) + 0.45 * hv);\n      } else if (y >= 104) (c = y >= 106 && y \u003c= 108 ? EARTH : GRASS), (v = y === 104 ? 0.6 + 0.3 * hv : v);\n      else if (y \u003c 3 ? y === 1 : lx === 1) (c = EARTH), (v = 0.75 + 0.35 * hv);\n      else if (y === 2 || (y > 2 && lx === 2)) v *= 0.7;\n      f[o] = c[0] * v * L0;\n      f[o + 1] = c[1] * v * L1;\n      f[o + 2] = c[2] * v * L2;\n      continue;\n    }\n    const ci = ((y + oy) & 127) * 128 + ((x + ox) & 127), cd = CD[ci], cs = CS[ci], g = (0.28 * x) / 63 + 0.52 * (1 - y / 127);\n    let br = 0.9;\n    if (wa1 > 0) {\n      const nz = NZ[(((y >> 1) + wo) & 127) | ((((x >> 1) + (wo >> 1)) & 127) \u003c\u003c 7)];\n      // A cat's paw darkens the mirror and breaks it into glitter.\n      if (nz > ws) {\n        const wa = sm(ws, ws + 0.16, nz) * wa1;\n        br *= 1 - 0.3 * wa;\n        if (HT[((x * 5 + wo * 3) & 127) | (((y + wo) & 127) \u003c\u003c 7)] > 0.87) br += 0.45 * wa;\n      }\n    }\n    const tb = kk \u003c k ? 0.22 : kk === k && wet === 1 ? TB[y] : 0, rp = RIP[i];\n    let gl = 0;\n    if (gs > 0 && abs(x - gx) \u003c 16) {\n      gl = gs * exp(-((x - gx) ** 2 + ((y - gy) * 0.8) ** 2) / 40) * (1 - tb);\n      if (w > 0.1) gl *= mix(1, HT[((x * 7 + wo) & 127) | (y \u003c\u003c 7)] > 0.75 ? 2.6 : 0.25, w);\n    }\n    const r0 = z0 + (s0 - z0) * g, r1 = z1 + (s1 - z1) * g, r2 = z2 + (s2 - z2) * g;\n    const q0 = (r0 + (h0 + (l0 - h0) * cs - r0) * cd) * br, q1 = (r1 + (h1 + (l1 - h1) * cs - r1) * cd) * br, q2 = (r2 + (h2 + (l2 - h2) * cs - r2) * cd) * br;\n    // Morning mist lies over the water in drifting banks.\n    let ms = mist > 0.01 ? (NZ[((((y >> 1) + my) & 127) \u003c\u003c 7) | ((x + mx) & 127)] - 0.5) * 2.4 : 0;\n    ms = ms > 0 ? mist * min(ms, 0.7) : 0;\n    const m = 0.7 + 0.4 * hv, wk = wet \u003c 1 ? 0.8 : 1, c0 = (q0 + (M0 * m - q0) * tb + rp * (60 + 0.35 * q0) + 255 * L0 * gl) * wk;\n    const c1 = (q1 + (M1 * m - q1) * tb + rp * (60 + 0.35 * q1) + 255 * L1 * gl) * wk, c2 = (q2 + (M2 * m - q2) * tb + rp * (60 + 0.35 * q2) + 255 * L2 * gl) * wk;\n    f[o] = c0 + (m0 - c0) * ms;\n    f[o + 1] = c1 + (m1 - c1) * ms;\n    f[o + 2] = c2 + (m2 - c2) * ms;\n  }\n}\n\n// The rope with its markers, one per hill still to plant, and every hill\n// planted so far, leaning and swaying with the wind.\nfunction field(P, cam, ry) {\n  const k = P.k, dn = P.dn, t = P.t, w = P.w, x0 = k * PW - cam;\n  if (P.sl \u003c 0) {\n    const yr = round(ry);\n    for (let x = 1; x \u003c= 62; x++) put(x0 + x, yr, ROPE, 0.85);\n    if (P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) put(x0 + HX(j), yr, MARK[j % 3 === 2 ? 1 : 0]);\n  }\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW) && kk \u003c= k; kk++) {\n    const xk = kk * PW - cam;\n    for (let gi = 0; gi \u003c NR; gi++) {\n      const y = 5 + 4 * gi, ord = kk \u003c k ? -1 : dn > 0 ? gi : NR - 1 - gi;\n      if (kk === k && ord > P.r) continue;\n      for (let j = 0; j \u003c NH; j++) {\n        if (kk === k && ord === P.r && !P.fl[j]) continue;\n        const x = xk + HX(j), v = 0.85 + 0.3 * hash(kk * 31 + j, gi), sw = sin(t * 2.6 + x * 0.3 + y * 0.15) * (0.25 + 0.9 * w) + 0.9 * w, ln = round(cl(sw, -1, 1));\n        put(x, y, SEED, v);\n        put(x + ln, y - 1, LEAF, v);\n        put(x + (v > 1 ? 1 : -1), y, LEAF, 0.75 * v);\n      }\n    }\n  }\n}\n\n// The egret: wading with its neck folded (out in a strike), or on the wing.\nfunction egretDraw(P, cam) {\n  const E = P.eg, pts = [];\n  if (E.m === 0) {\n    const nk = E.sk >= 0 ? 1.8 + 2.4 * sin(PI * E.sk) : 1.8;\n    for (let u = -3.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -1.5; v \u003c= 1.5; v += 0.5) if ((u + 1) ** 2 / 6.5 + (v * v) / 2.1 \u003c= 1) pts.push([u, v, WHITE, 0.9 + 0.06 * v]);\n    for (let u = 2; u \u003c= nk + 0.5; u += 0.5) pts.push([u, 0.5 * sin(u * 1.6), WHITE, 1]);\n    pts.push([nk + 1, 0, WHITE, 1], [nk + 2, 0, BILL, 1], [nk + 2.8, 0, BILL, 0.8]);\n    spr(E.x - cam + 1, E.y + 1, E.a, pts.map(([u, v]) => [u, v, 0, 0.7]));\n    spr(E.x - cam, E.y, E.a, pts);\n    return;\n  }\n  const q = sm(0, 1, E.t), ex = mix(E.sx, E.tx, q) - cam, ey = mix(E.sy, E.ty, q) - 8 * sin(PI * E.t), sp = 3 + 3 * abs(sin(P.t * 8));\n  for (let u = -2; u \u003c= 1; u += 0.5) pts.push([u, 0, WHITE, 1], [u, 0.6, WHITE, 0.9], [u, -0.6, WHITE, 0.9]);\n  for (let v = 1; v \u003c= sp; v += 0.5) for (let s = -1; s \u003c= 1; s += 2) pts.push([-0.4 * (v / sp) ** 2, s * v, WHITE, v > sp - 1 ? 0.75 : 1], [0.6 - 0.6 * (v / sp), s * v, WHITE, 0.85]);\n  pts.push([2, 0, WHITE, 1], [3, 0, WHITE, 1], [4, 0, BILL, 1]);\n  spr(ex, ey, E.a, pts);\n}\n\n// The crew and the rope holders on the bunds, all in straw hats.\nfunction crew(P, cam, ry) {\n  const dn = P.dn, x0 = P.k * PW - cam, hr = P.n > 6 ? 2.6 : 3;\n  if (P.sl \u003c 0) {\n    for (let i = 0; i \u003c P.n; i++) {\n      const c = P.crew[i], lag = P.mv >= 0 ? sm(0.15, 1, P.mv) : 1, cy = mix(rowY(P.r, dn), ry, lag) + dn * 4;\n      planter(P, c, x0 + c.home, cy, dn, ry, x0, hr, false);\n    }\n    for (let hx = 1; hx \u003c 63; hx += 61) {\n      put(x0 + hx + (hx \u003c 9 ? -2 : 2), ry + dn * 2, SHIRTS[hx & 7], 0.8);\n      disc(x0 + hx, ry + dn * 0.5, 2, HAT, 1);\n    }\n    return;\n  }\n  const q = sm(0, 1, P.sl), y0 = rowY(NR - 1, dn) + dn * 4, y1 = rowY(0, -dn) - dn * 4, fd = q \u003c 0.5 ? dn : -dn;\n  for (let i = 0; i \u003c P.n; i++) planter(P, P.crew[i], P.crew[i].home, mix(y0, y1, q), fd, 0, 0, hr, true);\n  for (let hx = 1; hx \u003c 63; hx += 61) disc(hx, mix(y0, y1, q) - fd * 4, 2, HAT, 1);\n}\n\n// The carrier on the levee with bundles on his A-frame, the puller in the\n// nursery with the bundles he has tied laid in the channel, and every bundle\n// afloat or in the air.\nfunction helpers(P, cam) {\n  const C = P.ca, cx = C.x - cam, U = P.pu, ux = U.x - cam, pull = sin(P.t * 7);\n  for (const b of P.bu) if (b.ft \u003c 0) spr(b.x - cam, b.y, (b.a * PI) / 4, BUNDLE);\n  // Trays of seedlings from the nursery wait on the levee path.\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW); kk++)\n    for (let tx = 9; tx \u003c 60; tx += 36)\n      for (let dx = 0; dx \u003c 8; dx++)\n        for (let dy = 0; dy \u003c 3; dy++) put(kk * PW + tx + dx - cam, 106 + dy, dx % 7 ? NUR : ROOT, dx % 7 ? 0.75 + 0.4 * hash(dx + tx, dy + kk * 5) : 0.6);\n  for (let dx = -2; dx \u003c= 2; dx++) for (let dy = 2; dy \u003c= 4; dy++) put(cx + dx, 106 + dy, (dx + dy) & 1 ? SEED : LEAF, dy === 2 ? 0.75 : 0.95);\n  put(cx - 2, 109, TIE), put(cx + 2, 109, TIE);\n  if (C.tt > 0) line(cx + 1, 105, cx + 2, 101 + 2 * C.tt, SKIN, 0.9);\n  disc(cx, 106, 2, HAT, 1);\n  for (let bx = U.x + 6; bx \u003c U.x1 - 1; bx += 5) spr(bx - cam, 116, PI / 2, BUNDLE);\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = 2; dx \u003c= 4; dx++) put(ux + dx, 119 + dy, SHIRTS[5], 0.85);\n  line(ux - 1, 118, ux - 2.5 - pull, 118, SKIN, 0.9);\n  line(ux - 1, 120, ux - 2.5 + pull, 120, SKIN, 0.9);\n  disc(ux, 119, 2, HAT, 1);\n}\nfunction thrown(P, cam) {\n  for (const b of P.bu) if (b.ft >= 0) spr(mix(b.fx, b.tx, b.ft) - cam, mix(b.fy, b.ty, b.ft) - 7 * sin(PI * b.ft), b.ft * 9, BUNDLE);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const K = key(P.h), cam = floor(P.cam), ry = ropeY(P), f = (F = P.f);\n  L = [K[13], K[14], K[15]];\n  ripples(P, cam);\n  ground(P, K, cam, ry);\n  field(P, cam, ry);\n  if (P.eg.m === 0) egretDraw(P, cam);\n  crew(P, cam, ry);\n  helpers(P, cam);\n  thrown(P, cam);\n  if (P.eg.m === 1) egretDraw(P, cam);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","layer":{"id":"layer-rice-planting","type":"code","name":"rice-planting","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rice Planting\n// Family:  farm\n// Idea:    Seen straight down over a flooded paddy, a line of planters in straw hats steps backward along a guide rope with red markers, pushing seedlings into the mud hill by hill, so the field behind them fills with rows of green while the open water ahead mirrors drifting clouds, an egret stalks there and bundles of seedlings land with a splash.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after monaegi, the hand transplanting of rice along a marked rope (motjul) in Korea\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1\n//\n// Knob 1: Hour. A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange.\n// Knob 2: Speed. At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower.\n// Knob 3: Planters. Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look.\n// Knob 4: Wind. Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean.\n// Buttons: K1 tap and the crew pushes in the rest of the row at once and the rope moves on.\n\nconst W = 64, H = 128, N = W * H, PW = 61, NH = 14, NR = 25;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every p cells, so the sky texture tiles.\nfunction vnp(x, y, p, o) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const g = (a, b) => hash(a % p, (b % p) + o);\n  const a = g(xi, yi), b = g(xi + 1, yi), c = g(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + g(xi + 1, yi + 1)) * su * sv;\n}\n\n// A paddy and its left bund are 61 columns of the world; the hills of a row\n// stand every four columns, and the rows every four LEDs from row 5 to 101.\nconst HX = (j) => 5 + 4 * j;\nconst rowY = (r, dn) => (dn > 0 ? 5 + 4 * r : 101 - 4 * r);\n// The light by the hour: sky overhead, sky toward the sun, sunlit cloud,\n// cloud underside, light on the people and the fields, and mist.\nconst HOURS = [\n  [0, 46, 92, 168, 116, 150, 204, 250, 242, 236, 150, 162, 192, 0.88, 0.92, 0.98, 0.32],\n  [0.25, 36, 92, 186, 110, 160, 218, 254, 250, 244, 156, 172, 204, 0.96, 0.98, 1, 0.12],\n  [0.5, 18, 66, 176, 64, 126, 210, 255, 255, 255, 168, 180, 206, 1.05, 1.05, 1, 0],\n  [0.75, 44, 92, 176, 176, 164, 150, 255, 224, 170, 160, 140, 156, 1, 0.9, 0.74, 0],\n  [1, 36, 34, 98, 170, 86, 96, 255, 150, 70, 112, 64, 100, 0.82, 0.56, 0.46, 0.12],\n];\nfunction key(u) {\n  let i = 0;\n  while (i \u003c HOURS.length - 2 && u > HOURS[i + 1][0]) i++;\n  const a = HOURS[i], b = HOURS[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\nconst HAT = [234, 190, 102], SKIN = [226, 176, 136], PANTS = [[60, 62, 120], [126, 62, 110], [70, 84, 72]];\nconst SHIRTS = [[236, 236, 228], [104, 144, 224], [238, 136, 164], [150, 208, 96], [184, 152, 228], [214, 78, 70], [112, 204, 204], [70, 96, 176]];\nconst SEED = [134, 222, 72], LEAF = [70, 166, 56], ROOT = [168, 136, 100], TIE = [230, 200, 112], NUR = [96, 196, 66];\nconst ROPE = [200, 170, 116], MARK = [[240, 52, 40], [252, 216, 60]], GRASS = [62, 116, 40], EARTH = [134, 106, 74], MUD = [120, 92, 58];\nconst WHITE = [248, 248, 242], BILL = [244, 196, 40];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, f: F32(N * 3), rip: F32(N), tb: F32(H), ht: F32(16384), bm: new Uint8Array(W), cd: F32(16384), cs: F32(16384), nz: F32(16384), k: 0, dn: 1, r: 0, fl: new Uint8Array(NH),\n    mv: -1.5, sl: -1.5, cam: 0.5, n: 0, h: 0.5, w: 0.5, ox: rnd() * 128, oy: rnd() * 128, rp: [], bu: [], init: false,\n  });\n  // The sky: clouds with steep edges, the size of a few drift blocks, and a\n  // slower field that says where the wind roughens the water and where mist lies.\n  for (let i = 0; i \u003c 16384; i++) {\n    const x = i & 127, y = i >> 7, q = (f, o) => vnp((x * f) / 128, (y * f) / 128, f, o);\n    const v = 0.55 * q(6, 0) + 0.3 * q(14, 50) + 0.15 * q(32, 90);\n    P.cd[i] = sm(0.5, 0.6, v);\n    P.cs[i] = cl((v - 0.5) * 4, 0, 1);\n    P.nz[i] = 0.6 * q(5, 130) + 0.4 * q(12, 170);\n    P.ht[i] = hash(x, y);\n  }\n  P.crew = SHIRTS.map((s, i) => ({ sh: (i * 3 + floor(rnd() * 8)) % 8, pa: floor(rnd() * 3), sp: 0.85 + rnd() * 0.3, list: [], q: 0, ph: 0.5, home: 32.5, wig: rnd() * 7 }));\n  P.eg = { x: 10 + rnd() * 44, y: 84 + rnd() * 14, a: rnd() * 6.28, m: 0, t: 1 + rnd(), st: -1.5, sx: 0.5, sy: 0.5, tx: 0.5, ty: 0.5, sk: -1.5 };\n  P.ca = { x: 14 + rnd() * 36, tx: 32.5, w: 0.6 + rnd(), tt: -0.5 };\n  P.pu = { x: 18 + rnd() * 30, x1: 0, old: [] };\n  P.pu.x1 = P.pu.x + 10 + rnd() * 12;\n}\n\n// Each planter takes a run of the fourteen hills; on alternate rows they work it the other way.\nfunction assign(P) {\n  const n = P.n;\n  P.crew.forEach((c, i) => {\n    const a = floor((i * NH) / n), b = floor(((i + 1) * NH) / n);\n    c.list = [];\n    if (i \u003c n) for (let j = a; j \u003c b; j++) if (!P.fl[j]) c.list.push(j);\n    if (P.r & 1) c.list.reverse();\n    c.q = 0;\n    c.ph = 0;\n    if (i \u003c n) c.home = (HX(a) + HX(b - 1)) / 2;\n  });\n}\nconst fresh = (P) => (P.fl.fill(0), assign(P));\nconst ropeY = (P) => (P.mv >= 0 ? mix(rowY(P.r, P.dn), rowY(P.r + 1, P.dn), sm(0, 1, P.mv)) : rowY(P.r, P.dn));\nconst ring = (P, x, y, s, life = 0.9) => P.rp.length \u003c 48 && P.rp.push({ x: x + 1e-6, y: y + 1e-6, s, a: 1e-6, life });\nfunction plant(P, j) {\n  P.fl[j] = 1;\n  ring(P, P.k * PW + HX(j), rowY(P.r, P.dn), 0.9);\n}\n// Bundles of seedlings lie about the open water, waiting for the line; ft\n// is how far through its flight a thrown one is, below 0 once it floats.\nconst bun = (x, y, ft, tx, ty) => ({ x, y, fx: x, fy: y, tx, ty, a: floor(rnd() * 8), ft });\nfunction scatter(P, k, lo, hi) {\n  for (let i = 0; i \u003c 12; i++) P.bu.push(bun(k * PW + 8 + rnd() * 46, lo + rnd() * (hi - lo), -1.5, 0.5, 0.5));\n}\n// Where open water lies ahead of the line in this paddy, as rows lo..hi.\nfunction open(P, gap) {\n  const ry = ropeY(P);\n  return P.dn > 0 ? [ry + gap, 99] : [7, ry - gap];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, kv = input.knobValues || [0, 2, 4, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(kv[1], 0.2, 3)) / 2, n = round(cl(kv[2], 4, 8));\n  P.h = cl(kv[0], 0, 1);\n  P.w = cl(kv[3], 0, 1);\n  if (!P.init) {\n    // They have been at it since dawn: the more hands, the further along.\n    P.n = n;\n    P.r = 8 + round((n - 4) * 1.5) + floor(rnd() * 2);\n    assign(P);\n    scatter(P, 0, rowY(P.r, 1) + 10, 99);\n    P.init = true;\n  }\n  if (n !== P.n) (P.n = n), assign(P);\n  P.t += d;\n  P.ox += (3.4 + 5 * P.w) * d;\n  P.oy += (1.4 + 2 * P.w) * d;\n  const btn = input.btnPressed && input.btnPressed[0];\n  if (P.sl \u003c 0) {\n    if (btn && P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) plant(P, j);\n    if (P.mv \u003c 0) {\n      for (let i = 0; i \u003c P.n; i++) {\n        const c = P.crew[i];\n        if (c.q >= c.list.length) continue;\n        const j = c.list[c.q], p0 = c.ph;\n        if (P.fl[j] && p0 \u003c 0.6) {\n          c.q++;\n          continue;\n        }\n        c.ph += (d * c.sp) / 0.36;\n        if (p0 \u003c 0.6 && c.ph >= 0.6) plant(P, j);\n        if (c.ph >= 1) (c.ph = 0), c.q++;\n      }\n      if (P.fl.every((v) => v)) {\n        if (P.r >= NR - 1) {\n          // The last row is in: the crew crosses the bund to the next paddy,\n          // where the carrier has already thrown the bundles.\n          P.sl = 0;\n          scatter(P, P.k + 1, 10, 96);\n          P.eg.m === 0 && fly(P, P.k + 1);\n        } else P.mv = 0;\n      }\n    } else if ((P.mv += d / 0.5) >= 1) {\n      (P.mv = -1), P.r++, fresh(P);\n      for (let i = 0; i \u003c P.n; i++) ring(P, P.k * PW + P.crew[i].home, rowY(P.r, P.dn) + P.dn * 10, 0.5);\n    }\n  } else if ((P.sl += d / 3.5) >= 1) (P.sl = -1), P.k++, (P.dn = -P.dn), (P.r = 0), fresh(P);\n  P.cam = P.k * PW + (P.sl >= 0 ? PW * sm(0, 1, P.sl) : 0);\n  const ry = ropeY(P), dn = P.dn;\n  // The line picks up the bundles it reaches.\n  P.bu = P.bu.filter((b) => {\n    const k = floor(b.x / PW);\n    return b.ft >= 0 || k > P.k || (k === P.k && (P.sl >= 0 || (b.y - ry) * dn > 5));\n  });\n  for (const b of P.bu)\n    if (b.ft >= 0 && (b.ft += d / 0.75) >= 1) (b.ft = -1.5), (b.x = b.tx), (b.y = b.ty), ring(P, b.x, b.y, 1.2, 1.2);\n  // The carrier on the levee throws a bundle ahead of the line now and then.\n  const C = P.ca;\n  if (C.tt > 0) C.tt -= d;\n  else if (abs(C.tx - C.x) > 0.6) C.x += Math.sign(C.tx - C.x) * 7 * d;\n  else if ((C.w -= d) \u003c 0) {\n    const [lo, hi] = open(P, 10);\n    if (P.sl \u003c 0 && hi - lo > 6 && P.bu.length \u003c 16) {\n      const ty = max(lo, hi - 46) + rnd() * (hi - max(lo, hi - 46));\n      P.bu.push(bun(C.x, 104.5, 1e-6, P.k * PW + 8 + rnd() * 46, ty));\n      C.tt = 0.5;\n    }\n    C.w = 1.6 + rnd() * 2.4;\n    C.tx = P.cam + 6 + rnd() * 52;\n  }\n  // The seedling puller works left along the nursery bed.\n  const U = P.pu;\n  U.x -= 0.5 * d;\n  if (U.x \u003c P.cam - 8) U.old.push([U.x + 2, U.x1]) > 3 && U.old.shift(), (U.x1 = (U.x = P.cam + 70) + 2);\n  egret(P, d, ry);\n  for (const q of P.rp) q.a += d;\n  P.rp = P.rp.filter((q) => q.a \u003c q.life);\n}\n\n// The egret flies to open water in paddy k, away from the line.\nfunction fly(P, k) {\n  const E = P.eg, [lo, hi] = k === P.k ? open(P, 26) : [12, 92];\n  if (hi - lo \u003c 8) return fly(P, k + 1);\n  Object.assign(E, { m: 1, t: 0, sx: E.x, sy: E.y, tx: k * PW + 8 + rnd() * 46, ty: lo + rnd() * (hi - lo) });\n  E.a = Math.atan2(E.ty - E.sy, E.tx - E.sx);\n}\nfunction egret(P, d, ry) {\n  const E = P.eg;\n  if (E.m === 1) {\n    if ((E.t += d / 2.4) >= 1) (E.m = 0), (E.x = E.tx), (E.y = E.ty), (E.t = 1.5), ring(P, E.x, E.y, 0.8);\n    return;\n  }\n  if (E.sk >= 0 && (E.sk += d / 0.35) >= 1) E.sk = -1;\n  // Too near the line, or left behind in a planted paddy: off it goes.\n  if (P.sl \u003c 0 && (floor(E.x / PW) \u003c P.k || (floor(E.x / PW) === P.k && (E.y - ry) * P.dn \u003c 15))) return fly(P, P.k);\n  if (E.st >= 0) {\n    E.st += d / 0.45;\n    const q = sm(0, 1, E.st);\n    E.x = mix(E.sx, E.tx, q);\n    E.y = mix(E.sy, E.ty, q);\n    if (E.st >= 1) (E.st = -1), ring(P, E.x - 1.5 * cos(E.a), E.y - 1.5 * sin(E.a), 0.45, 0.7);\n  } else if ((E.t -= d) \u003c 0) {\n    // A slow step, now and then a strike at something in the mud.\n    if (rnd() \u003c 0.25) (E.sk = 0), ring(P, E.x + 5 * cos(E.a), E.y + 5 * sin(E.a), 0.7);\n    else {\n      const lx = E.x - P.k * PW;\n      E.a += (rnd() - 0.5) * 1.4;\n      if (lx \u003c 10) E.a = 0.2 * (rnd() - 0.5);\n      if (lx > 52) E.a = PI + 0.2 * (rnd() - 0.5);\n      if (E.y > 96 || E.y \u003c 10) E.a = (E.y > 50 ? -PI : PI) / 2 + (rnd() - 0.5);\n      Object.assign(E, { st: 0, sx: E.x, sy: E.y, tx: E.x + 1.6 * cos(E.a), ty: E.y + 1.6 * sin(E.a) });\n    }\n    E.t = 0.6 + rnd() * 1.8;\n  }\n}\n\nlet F, L;\nfunction put(x, y, c, k = 1, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j] * k * L[j], a);\n}\n// Points given along a heading (u forward, v to the side), turned to angle a.\nfunction spr(x, y, a, pts) {\n  const c = cos(a), s = sin(a);\n  for (const [u, v, col, k] of pts) {\n    const px = round(x + u * c - v * s), py = round(y + u * s + v * c), o = (py * W + px) * 3;\n    if (col) put(px, py, col, k);\n    else if (px >= 0 && px \u003c W && py >= 0 && py \u003c H) (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n  }\n}\nfunction disc(x, y, r, col, sh) {\n  x = round(x);\n  y = round(y);\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const e = sqrt(dx * dx + dy * dy);\n      if (e > r + 0.35) continue;\n      put(x + dx, y + dy, col, (1.14 - 0.32 * (e / r) ** 2) * (e > r - 0.55 ? 0.82 : 1) - (sh * 0.1 * (dx + dy)) / r);\n    }\n}\nfunction line(ax, ay, bx, by, c, k) {\n  const n = max(1, round(max(abs(bx - ax), abs(by - ay))));\n  for (let i = 0; i \u003c= n; i++) put(mix(ax, bx, i / n), mix(ay, by, i / n), c, k);\n}\nconst BUNDLE = [[-2, 0, ROOT, 0.9], [-1, 0, TIE, 1], [0, 0, SEED, 0.95], [1, 0, LEAF, 1], [2, 0, LEAF, 0.8], [1, -1, LEAF, 0.75], [1, 1, LEAF, 0.75]];\n\n// One planter bent over, seen from above: the hat, the back and hips\n// behind it, the arms reaching out past the brim to the water, a bundle in\n// one hand and the other pushing a hill in at the rope.\nconst BACK = [3.4, 3.4, 3, 2.6, 2.1];\nfunction planter(P, c, x, y, dn, ry, x0, hr, walk) {\n  const sh = SHIRTS[c.sh], pa = PANTS[c.pa], st = walk ? round(sin(P.t * 9 + c.wig)) : 0;\n  let side = c.home \u003c 32 ? 1 : -1, e = 0, tx = x + side * 3, ty = y - dn * 3.6;\n  if (!walk && c.q \u003c c.list.length) {\n    const hx = x0 + HX(c.list[c.q]);\n    side = hx >= x ? 1 : -1;\n    e = c.ph \u003c 0.6 ? sm(0, 0.5, c.ph) : 1 - sm(0.65, 1, c.ph);\n    tx = mix(x + side * 3, hx, e);\n    ty = mix(y - dn * 3.6, ry + dn * 0.6, e);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    put(x + s, y + dn * (8 + (s * st > 0 ? 1 : 0)), pa, 0.7);\n    for (let dx = -1; dx \u003c= 1; dx++) put(x + dx, y + dn * 7, pa, 0.9 - 0.1 * abs(dx));\n  }\n  BACK.forEach((hw, j) => {\n    for (let dx = -3; dx \u003c= 3; dx++) if (abs(dx) \u003c= hw) put(x + dx, y + dn * (2 + j), sh, (0.98 - 0.07 * j) * (abs(dx) > hw - 1 ? 0.85 : 1));\n  });\n  line(x + side * 2.8, y + dn * 1.5, tx, ty, sh, 0.9);\n  put(tx, ty, SKIN);\n  const bx = x - side * 3.2, by = y - dn * 3;\n  line(x - side * 2.8, y + dn * 1.5, bx, by, sh, 0.9);\n  put(bx, by, SKIN);\n  put(bx, by - dn, SEED);\n  put(bx + side, by - dn * 1.6, LEAF, 0.9);\n  put(bx - side, by - dn, LEAF, 0.8);\n  disc(x + (tx - x) * 0.15, y - dn * e * 0.8, hr, HAT, 1);\n}\n\n// Ripple rings from every push, step and splash, summed per LED.\nfunction ripples(P, cam) {\n  const RIP = P.rip;\n  RIP.fill(0);\n  for (const q of P.rp) {\n    const R = 0.6 + q.a * 6.5, a = q.s * (1 - q.a / q.life), qx = q.x - cam;\n    for (let y = max(0, floor(q.y - R - 1)); y \u003c= min(H - 1, q.y + R + 1); y++)\n      for (let x = max(0, floor(qx - R - 1)); x \u003c= min(W - 1, qx + R + 1); x++) {\n        const e = abs(sqrt((x - qx) ** 2 + (y - q.y) ** 2) - R);\n        if (e \u003c 0.8) RIP[y * W + x] += a * (1 - e / 0.8);\n      }\n  }\n}\n\n// The bunds, the levee, the nursery, and the water mirroring the sky.\nfunction ground(P, K, cam, ry) {\n  const f = F, k = P.k, dn = P.dn, t = P.t, w = P.w, h = P.h, RIP = P.rip, CD = P.cd, CS = P.cs, NZ = P.nz, HT = P.ht, TB = P.tb;\n  const ox = floor(P.ox), oy = floor(P.oy), wo = floor(t * (3 + 6 * w)), ws = 0.75 - 0.6 * w, wa1 = min(1, w * 4);\n  // The sun's glint, near noon, sliding across the paddy with the hour.\n  const gu = cl((h - 0.22) / 0.56, 0, 1), gs = sm(0.22, 0.38, h) * (1 - sm(0.62, 0.8, h)), gx = 6 + 52 * gu, gy = 70 - 30 * sin(PI * gu);\n  // The nursery bed is bare where the seedlings have been pulled.\n  const BM = P.bm;\n  BM.fill(0);\n  for (const [a, b] of [...P.pu.old, [P.pu.x + 2, P.pu.x1]]) for (let x = max(0, ceil(a - cam)); x \u003c= min(W - 1, b - cam); x++) BM[x] = 1;\n  // How muddy the water is on each row of this paddy: churned round the\n  // crew's feet and behind them, settling further back.\n  for (let y = 0; y \u003c H; y++) {\n    const ds = (ry - y) * dn;\n    TB[y] = P.sl >= 0 ? 0.22 : sm(-14, -9, ds) * (0.16 + 0.3 * exp(-max(0, ds) / 14));\n  }\n  const [z0, z1, z2, s0, s1, s2, l0, l1, l2, h0, h1, h2, , , , mist] = K.slice(1), L0 = L[0], L1 = L[1], L2 = L[2], M0 = MUD[0] * L0, M1 = MUD[1] * L1, M2 = MUD[2] * L2;\n  const m0 = mix(s0, 250, 0.6), m1 = mix(s1, 250, 0.6), m2 = mix(s2, 250, 0.6), my = floor(t * 1.5), mx = floor(t * 2.5) + 40;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, wx = x + cam, kk = floor(wx / PW), lx = wx - kk * PW, o = i * 3, hv = HT[(wx & 127) | (y \u003c\u003c 7)];\n    const wet = y >= 3 && y \u003c= 103 && lx >= 3 ? 1 : y === 110 || y === 116 || y === 122 ? 0.7 : 0;\n    if (!wet) {\n      let c = GRASS, v = 0.8 + 0.4 * hv;\n      if (y >= 110) {\n        const bare = y >= 117 && y \u003c= 121 && BM[x];\n        (c = bare ? MUD : NUR), (v = bare ? 0.55 + 0.3 * hv : (y === 111 || y === 115 || y === 117 || y === 121 || y === 123 ? 0.62 : 0.72) + 0.45 * hv);\n      } else if (y >= 104) (c = y >= 106 && y \u003c= 108 ? EARTH : GRASS), (v = y === 104 ? 0.6 + 0.3 * hv : v);\n      else if (y \u003c 3 ? y === 1 : lx === 1) (c = EARTH), (v = 0.75 + 0.35 * hv);\n      else if (y === 2 || (y > 2 && lx === 2)) v *= 0.7;\n      f[o] = c[0] * v * L0;\n      f[o + 1] = c[1] * v * L1;\n      f[o + 2] = c[2] * v * L2;\n      continue;\n    }\n    const ci = ((y + oy) & 127) * 128 + ((x + ox) & 127), cd = CD[ci], cs = CS[ci], g = (0.28 * x) / 63 + 0.52 * (1 - y / 127);\n    let br = 0.9;\n    if (wa1 > 0) {\n      const nz = NZ[(((y >> 1) + wo) & 127) | ((((x >> 1) + (wo >> 1)) & 127) \u003c\u003c 7)];\n      // A cat's paw darkens the mirror and breaks it into glitter.\n      if (nz > ws) {\n        const wa = sm(ws, ws + 0.16, nz) * wa1;\n        br *= 1 - 0.3 * wa;\n        if (HT[((x * 5 + wo * 3) & 127) | (((y + wo) & 127) \u003c\u003c 7)] > 0.87) br += 0.45 * wa;\n      }\n    }\n    const tb = kk \u003c k ? 0.22 : kk === k && wet === 1 ? TB[y] : 0, rp = RIP[i];\n    let gl = 0;\n    if (gs > 0 && abs(x - gx) \u003c 16) {\n      gl = gs * exp(-((x - gx) ** 2 + ((y - gy) * 0.8) ** 2) / 40) * (1 - tb);\n      if (w > 0.1) gl *= mix(1, HT[((x * 7 + wo) & 127) | (y \u003c\u003c 7)] > 0.75 ? 2.6 : 0.25, w);\n    }\n    const r0 = z0 + (s0 - z0) * g, r1 = z1 + (s1 - z1) * g, r2 = z2 + (s2 - z2) * g;\n    const q0 = (r0 + (h0 + (l0 - h0) * cs - r0) * cd) * br, q1 = (r1 + (h1 + (l1 - h1) * cs - r1) * cd) * br, q2 = (r2 + (h2 + (l2 - h2) * cs - r2) * cd) * br;\n    // Morning mist lies over the water in drifting banks.\n    let ms = mist > 0.01 ? (NZ[((((y >> 1) + my) & 127) \u003c\u003c 7) | ((x + mx) & 127)] - 0.5) * 2.4 : 0;\n    ms = ms > 0 ? mist * min(ms, 0.7) : 0;\n    const m = 0.7 + 0.4 * hv, wk = wet \u003c 1 ? 0.8 : 1, c0 = (q0 + (M0 * m - q0) * tb + rp * (60 + 0.35 * q0) + 255 * L0 * gl) * wk;\n    const c1 = (q1 + (M1 * m - q1) * tb + rp * (60 + 0.35 * q1) + 255 * L1 * gl) * wk, c2 = (q2 + (M2 * m - q2) * tb + rp * (60 + 0.35 * q2) + 255 * L2 * gl) * wk;\n    f[o] = c0 + (m0 - c0) * ms;\n    f[o + 1] = c1 + (m1 - c1) * ms;\n    f[o + 2] = c2 + (m2 - c2) * ms;\n  }\n}\n\n// The rope with its markers, one per hill still to plant, and every hill\n// planted so far, leaning and swaying with the wind.\nfunction field(P, cam, ry) {\n  const k = P.k, dn = P.dn, t = P.t, w = P.w, x0 = k * PW - cam;\n  if (P.sl \u003c 0) {\n    const yr = round(ry);\n    for (let x = 1; x \u003c= 62; x++) put(x0 + x, yr, ROPE, 0.85);\n    if (P.mv \u003c 0) for (let j = 0; j \u003c NH; j++) if (!P.fl[j]) put(x0 + HX(j), yr, MARK[j % 3 === 2 ? 1 : 0]);\n  }\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW) && kk \u003c= k; kk++) {\n    const xk = kk * PW - cam;\n    for (let gi = 0; gi \u003c NR; gi++) {\n      const y = 5 + 4 * gi, ord = kk \u003c k ? -1 : dn > 0 ? gi : NR - 1 - gi;\n      if (kk === k && ord > P.r) continue;\n      for (let j = 0; j \u003c NH; j++) {\n        if (kk === k && ord === P.r && !P.fl[j]) continue;\n        const x = xk + HX(j), v = 0.85 + 0.3 * hash(kk * 31 + j, gi), sw = sin(t * 2.6 + x * 0.3 + y * 0.15) * (0.25 + 0.9 * w) + 0.9 * w, ln = round(cl(sw, -1, 1));\n        put(x, y, SEED, v);\n        put(x + ln, y - 1, LEAF, v);\n        put(x + (v > 1 ? 1 : -1), y, LEAF, 0.75 * v);\n      }\n    }\n  }\n}\n\n// The egret: wading with its neck folded (out in a strike), or on the wing.\nfunction egretDraw(P, cam) {\n  const E = P.eg, pts = [];\n  if (E.m === 0) {\n    const nk = E.sk >= 0 ? 1.8 + 2.4 * sin(PI * E.sk) : 1.8;\n    for (let u = -3.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -1.5; v \u003c= 1.5; v += 0.5) if ((u + 1) ** 2 / 6.5 + (v * v) / 2.1 \u003c= 1) pts.push([u, v, WHITE, 0.9 + 0.06 * v]);\n    for (let u = 2; u \u003c= nk + 0.5; u += 0.5) pts.push([u, 0.5 * sin(u * 1.6), WHITE, 1]);\n    pts.push([nk + 1, 0, WHITE, 1], [nk + 2, 0, BILL, 1], [nk + 2.8, 0, BILL, 0.8]);\n    spr(E.x - cam + 1, E.y + 1, E.a, pts.map(([u, v]) => [u, v, 0, 0.7]));\n    spr(E.x - cam, E.y, E.a, pts);\n    return;\n  }\n  const q = sm(0, 1, E.t), ex = mix(E.sx, E.tx, q) - cam, ey = mix(E.sy, E.ty, q) - 8 * sin(PI * E.t), sp = 3 + 3 * abs(sin(P.t * 8));\n  for (let u = -2; u \u003c= 1; u += 0.5) pts.push([u, 0, WHITE, 1], [u, 0.6, WHITE, 0.9], [u, -0.6, WHITE, 0.9]);\n  for (let v = 1; v \u003c= sp; v += 0.5) for (let s = -1; s \u003c= 1; s += 2) pts.push([-0.4 * (v / sp) ** 2, s * v, WHITE, v > sp - 1 ? 0.75 : 1], [0.6 - 0.6 * (v / sp), s * v, WHITE, 0.85]);\n  pts.push([2, 0, WHITE, 1], [3, 0, WHITE, 1], [4, 0, BILL, 1]);\n  spr(ex, ey, E.a, pts);\n}\n\n// The crew and the rope holders on the bunds, all in straw hats.\nfunction crew(P, cam, ry) {\n  const dn = P.dn, x0 = P.k * PW - cam, hr = P.n > 6 ? 2.6 : 3;\n  if (P.sl \u003c 0) {\n    for (let i = 0; i \u003c P.n; i++) {\n      const c = P.crew[i], lag = P.mv >= 0 ? sm(0.15, 1, P.mv) : 1, cy = mix(rowY(P.r, dn), ry, lag) + dn * 4;\n      planter(P, c, x0 + c.home, cy, dn, ry, x0, hr, false);\n    }\n    for (let hx = 1; hx \u003c 63; hx += 61) {\n      put(x0 + hx + (hx \u003c 9 ? -2 : 2), ry + dn * 2, SHIRTS[hx & 7], 0.8);\n      disc(x0 + hx, ry + dn * 0.5, 2, HAT, 1);\n    }\n    return;\n  }\n  const q = sm(0, 1, P.sl), y0 = rowY(NR - 1, dn) + dn * 4, y1 = rowY(0, -dn) - dn * 4, fd = q \u003c 0.5 ? dn : -dn;\n  for (let i = 0; i \u003c P.n; i++) planter(P, P.crew[i], P.crew[i].home, mix(y0, y1, q), fd, 0, 0, hr, true);\n  for (let hx = 1; hx \u003c 63; hx += 61) disc(hx, mix(y0, y1, q) - fd * 4, 2, HAT, 1);\n}\n\n// The carrier on the levee with bundles on his A-frame, the puller in the\n// nursery with the bundles he has tied laid in the channel, and every bundle\n// afloat or in the air.\nfunction helpers(P, cam) {\n  const C = P.ca, cx = C.x - cam, U = P.pu, ux = U.x - cam, pull = sin(P.t * 7);\n  for (const b of P.bu) if (b.ft \u003c 0) spr(b.x - cam, b.y, (b.a * PI) / 4, BUNDLE);\n  // Trays of seedlings from the nursery wait on the levee path.\n  for (let kk = floor(cam / PW); kk \u003c= floor((cam + 63) / PW); kk++)\n    for (let tx = 9; tx \u003c 60; tx += 36)\n      for (let dx = 0; dx \u003c 8; dx++)\n        for (let dy = 0; dy \u003c 3; dy++) put(kk * PW + tx + dx - cam, 106 + dy, dx % 7 ? NUR : ROOT, dx % 7 ? 0.75 + 0.4 * hash(dx + tx, dy + kk * 5) : 0.6);\n  for (let dx = -2; dx \u003c= 2; dx++) for (let dy = 2; dy \u003c= 4; dy++) put(cx + dx, 106 + dy, (dx + dy) & 1 ? SEED : LEAF, dy === 2 ? 0.75 : 0.95);\n  put(cx - 2, 109, TIE), put(cx + 2, 109, TIE);\n  if (C.tt > 0) line(cx + 1, 105, cx + 2, 101 + 2 * C.tt, SKIN, 0.9);\n  disc(cx, 106, 2, HAT, 1);\n  for (let bx = U.x + 6; bx \u003c U.x1 - 1; bx += 5) spr(bx - cam, 116, PI / 2, BUNDLE);\n  for (let dy = -1; dy \u003c= 1; dy++) for (let dx = 2; dx \u003c= 4; dx++) put(ux + dx, 119 + dy, SHIRTS[5], 0.85);\n  line(ux - 1, 118, ux - 2.5 - pull, 118, SKIN, 0.9);\n  line(ux - 1, 120, ux - 2.5 + pull, 120, SKIN, 0.9);\n  disc(ux, 119, 2, HAT, 1);\n}\nfunction thrown(P, cam) {\n  for (const b of P.bu) if (b.ft >= 0) spr(mix(b.fx, b.tx, b.ft) - cam, mix(b.fy, b.ty, b.ft) - 7 * sin(PI * b.ft), b.ft * 9, BUNDLE);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const K = key(P.h), cam = floor(P.cam), ry = ropeY(P), f = (F = P.f);\n  L = [K[13], K[14], K[15]];\n  ripples(P, cam);\n  ground(P, K, cam, ry);\n  field(P, cam, ry);\n  if (P.eg.m === 0) egretDraw(P, cam);\n  crew(P, cam, ry);\n  helpers(P, cam);\n  thrown(P, cam);\n  if (P.eg.m === 1) egretDraw(P, cam);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Planters=4..8, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"A misty morning at 0, a deep blue noon with the sun's glint in the paddy, a gold afternoon, and at 1 dusk, when the clouds in the water turn orange."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a planter pushes in a hill every third of a second and the rope moves a row about every two seconds; 0.2 is ten times slower."},{"name":"Planters","min":4,"max":8,"about":"Four to eight in the line, sharing the fourteen hills of a row, so more hands move the rope sooner and the field is further along when you look."},{"name":"Wind","min":0,"max":1,"about":"Calm water is a mirror; turned up, cat's paws darken it and break it into glitter, the clouds run faster and the seedlings lean."}],"start":[0,2,4,0.06],"measures":{"motion":0.0782,"detail":0.0601,"edges":0.318,"complexity":2.2267,"coverage":1,"colour":0.2886,"drift":0.0509},"knobResponse":[0.2048,0.0848,0.0585,0.1025]},{"slug":"rice-terraces","title":"Rice Terraces","family":"farm","round":25,"note":"세운 패널 아래 끝에서 숲이 선 능선까지 물 댄 다랑논이 등고선처럼 휘어 쌓이고, 논마다 해 뜨는 하늘을 비춰요. 위로 갈수록 층이 얇아지고 노을빛이 짙어지며, 구름 반사가 거울 논들을 가로질러 흘러가고 가까운 논에서는 농부가 물소를 몰아 논을 갈아요. K1 을 돌리면 모가 줄지어 서고 초록으로 덮였다가 누렇게 익고, K1 을 누르면 맨 위 물꼬가 열려 물이 둑을 하나씩 넘어 내려가요.","idea":"Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.","buttons":"K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.","code":"// ===== Patternflow pattern =====\n// Title:   Rice Terraces\n// Family:  farm\n// Idea:    Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Hani rice terraces of Yuanyang and the terraces of Banaue\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1\n//\n// Knob 1: Season. At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble.\n// Knob 2: Speed. At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower.\n// Knob 3: Terraces. How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water.\n// Knob 4: Hour. Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door.\n// Buttons: K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Terrace 0 sits just under the panel, the last one at the ridge. The sky's\n// horizon row, and the classes a LED can belong to.\nconst [YB, YT, YH] = [134, 38, 34];\nconst [SKY, FAR, NEAR, WOOD, WATER, WALL, RIM] = [0, 1, 2, 3, 4, 5, 6];\n// The row of the sky (0 the zenith, 31 the horizon) that the water on each\n// panel row holds: low sky in the far paddies, the sky overhead in the near ones.\nconst RR = F32(H).map((v, y) => 26 - 20 * cl((y - 36) / 92, 0, 1) ** 0.9);\nconst FOAM = [220, 236, 250], LAG = 0.22, AT = [0.82, 0.88, 1], MUD = [7, 5.6, 4.4], STUB = [150, 120, 70];\n\n// Light by the hour: sky at the zenith, sky at the horizon, sunlit cloud,\n// then ambient and direct light and how much mist lies in the valley.\nconst HOURS = [\n  [0, 14, 22, 70, 150, 100, 150, 255, 150, 140, 0.3, 0.12, 1],\n  [0.07, 34, 64, 150, 255, 176, 110, 255, 200, 150, 0.5, 0.55, 0.95],\n  [0.25, 40, 100, 200, 190, 215, 235, 255, 245, 225, 0.7, 0.6, 0.4],\n  [0.5, 36, 96, 206, 170, 205, 240, 255, 255, 250, 0.74, 0.66, 0.15],\n  [0.72, 40, 80, 180, 250, 200, 130, 255, 215, 150, 0.64, 0.56, 0.2],\n  [0.86, 40, 36, 100, 255, 120, 70, 255, 140, 90, 0.42, 0.36, 0.4],\n  [1, 6, 8, 28, 40, 36, 70, 60, 60, 90, 0.16, 0, 0.6],\n];\n// The season: earth wall, bund rim, rice. Flooded, planted, green, ripening, cut.\nconst SEASONS = [\n  [0, 66, 48, 36, 206, 184, 150, 120, 200, 70],\n  [0.35, 60, 74, 40, 150, 196, 96, 110, 204, 60],\n  [0.65, 42, 84, 34, 110, 176, 64, 46, 156, 40],\n  [0.85, 80, 84, 40, 186, 176, 84, 184, 184, 50],\n  [1, 96, 76, 44, 224, 184, 96, 244, 178, 40],\n];\nfunction key(T, u) {\n  let i = 0;\n  while (i \u003c T.length - 2 && u > T[i + 1][0]) i++;\n  const a = T[i], b = T[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ox: 0, mt: 0, n: 0, surge: 99, sk: F32(32 * 3), cl: F32(128 * 32), f: F32(N * 3),\n    cls: new Uint8Array(N), kk: new Int8Array(N), e: F32(N), dep: F32(N), tx: F32(N), walk: [[10 + rnd() * 44, 1], [10 + rnd() * 44, -1]],\n  });\n  P.ox = rnd() * 128;\n  // Egrets: where each stands (column, how far up the steps), and how long it waits.\n  P.birds = [0, 1, 2].map(() => ({ x: 6 + rnd() * 52, kf: 0.05 + rnd() * 0.6, w: 1 + rnd() * 8, p: -1 }));\n  // Cloud noise, 128 columns that wrap and 32 rows from the zenith down.\n  for (let i = 0; i \u003c 128 * 32; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.06, y * 0.22) + 0.3 * vn(X * 0.15, y * 0.5 + 9) + 0.15 * vn(X * 0.4, y + 3);\n    P.cl[i] = mix(f(x), f(x - 128), x / 128);\n  }\n  for (let i = 0; i \u003c N; i++) P.tx[i] = vn((i & 63) * 0.5, (i >> 6) * 0.6);\n}\n\n// The terraces for n steps. A level u climbs the panel in steps that shrink\n// with distance, bent by slow noise into spurs and gullies; each whole value\n// of u is a bund. For each LED: which terrace, and whether it is water, the\n// earth wall under a bund, or the bund's lit rim.\nfunction build(P, n) {\n  const q = 0.28 ** (1 / n), L = -log(q), b0 = ((YB - YT) * L) / (1 - q ** n);\n  const V = (y) => ((y = 1 - ((YB - y) * L) / b0), y > 1e-4 ? log(y) / -L : 99);\n  const { cls, kk, e, dep } = P, u = F32(H + 20), yc = F32(n + 6);\n  const put = (x, y, k, i = y * W + x) => y >= 0 && y \u003c H && cls[i] >= WATER && ((cls[i] = RIM), (kk[i] = k));\n  P.lip = F32((n + 2) * W);\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    // A spur comes down left of centre and a gully cuts in on the right.\n    const sp = 1.3 * exp(-(((x - 24) / 13) ** 2)) - 1 * exp(-(((x - 55) / 9) ** 2));\n    for (let y = H + 19, m = -9; y >= 0; y--) {\n      const v0 = V(y), xs = (x - 32) / (q ** v0) ** 0.4 + 40;\n      const v = v0 + sp + 1.2 * (vn(xs * 0.035, v0 * 0.07) * 2 - 1 + 0.4 * (vn(xs * 0.085 + 7, v0 * 0.15 + 5) * 2 - 1));\n      u[y] = m = max(m, v);\n    }\n    // Where each bund crosses this column, to a fraction of a LED.\n    yc.fill(H + 40);\n    for (let y = H + 18; y >= 0; y--) for (let k = max(-3, floor(u[y + 1]) + 1); k \u003c= min(n, u[y]); k++) yc[k + 3] = y + (u[y] - k) / max(1e-3, u[y] - u[y + 1]);\n    for (let k = 0; k \u003c= n; k++) P.lip[k * W + x] = yc[k + 3];\n    let y = H - 1;\n    for (; y >= 0 && u[y] \u003c n; y--) {\n      const k = max(-3, floor(u[y])), lip = yc[k + 4], bp = yc[k + 3] \u003c H + 40 ? yc[k + 3] - lip : b0, d = y - lip, rh = cl(0.22 * bp - 0.6, 0, 3.5), i = y * W + x;\n      if (d \u003c 1) (cls[i] = RIM), (kk[i] = k + 1);\n      else if (d \u003c 1 + rh) (cls[i] = WALL), (kk[i] = k + 1), (e[i] = (d - 1) / rh);\n      else (cls[i] = WATER), (kk[i] = k), (e[i] = d - 1 - rh), (dep[i] = bp - 1 - rh);\n    }\n    P.ridge[x] = y;\n    const top = y - 5 - 3 * vn(x * 0.35, 4) - abs(sin(x * 0.9)) * 1.5;\n    for (; y >= 0; y--) {\n      const i = y * W + x;\n      cls[i] = y > top ? WOOD : y >= 22 + 4 * sin(0.06 * x + 0.5) + 2.5 * sin(0.17 * x + 2) ? NEAR : y >= 15 + 5 * sin(0.045 * x + 2.4) + 2 * sin(0.13 * x + 1) ? FAR : SKY;\n    }\n  }\n  // Close the rim where a bund steps a row or more from one column to the next.\n  for (let k = 1; k \u003c= n; k++)\n    for (let x = 0; x \u003c W - 1; x++) {\n      let a = ceil(P.lip[k * W + x]), b = ceil(P.lip[k * W + x + 1]), xa = x, xb = x + 1;\n      if (a > b) [a, b, xa, xb] = [b, a, xb, xa];\n      const m = floor((a + b) / 2);\n      for (let y = a + 1; y \u003c b; y++) put(y \u003c= m ? xa : xb, y, k);\n      if (b > a) put(xb, m, k);\n    }\n  // How bright each rim is: faint where the steps are thin and far, and\n  // brighter where the bund turns to face the light.\n  const lp = (k, x) => P.lip[k * W + cl(x, 0, W - 1)];\n  for (let i = 0; i \u003c N; i++)\n    if (cls[i] === RIM) {\n      const k = kk[i], x = i & 63;\n      e[i] = k > 0 ? cl((lp(k - 1, x) - lp(k, x) - 2) / 7, 0.2, 1) : 1;\n      dep[i] = k >= 0 ? lp(k, x + 1) - lp(k, x - 1) : 0;\n    }\n  for (P.kw = 1; P.lip[P.kw * W + 32] > 117; P.kw++);\n  P.n = n;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2);\n  const n = round(cl(k[2], 12, 24));\n  if (n !== P.n) build(P, n);\n  P.s = cl(k[0], 0, 1);\n  P.h = cl(k[3], 0, 1);\n  P.t += d;\n  P.ox += 5 * d;\n  P.mt += d;\n  P.surge += d;\n  if (input.btnPressed && input.btnPressed[0]) P.surge = 0;\n  // The ploughing team and the farmer up on the high bund walk to the end and turn.\n  for (const w of P.walk) {\n    w[0] += w[1] * 2.2 * d;\n    if (w[0] > 56 || w[0] \u003c 6) w[1] = -w[1];\n  }\n  // An egret waits, then flies to another paddy in a low arc.\n  for (const b of P.birds)\n    if (b.p >= 0) {\n      if ((b.p += d / 1.8) >= 1) Object.assign(b, { p: -1, x: b.tx, kf: b.tk, w: 4 + rnd() * 9 });\n    } else if ((b.w -= d) \u003c= 0) Object.assign(b, { p: 0, tx: 6 + rnd() * 52, tk: 0.05 + rnd() * 0.6, y0: egY(P, b.x, b.kf) });\n}\n\n// Where an egret stands: a little behind the bund of its terrace.\nconst egY = (P, x, kf) => P.lip[max(1, round(kf * P.n)) * W + round(cl(x, 0, 63))] - 2;\nfunction egrets(P, L, wet) {\n  const c = lit([250, 248, 240], L);\n  for (const b of P.birds) {\n    if (b.p \u003c 0) {\n      const x = b.x, y = egY(P, x, b.kf);\n      put(x, y, c), put(x, y - 1, c), put(x + 1, y - 2, c), put(x, y + 1, c, 0.35 * wet), put(x, y + 2, c, 0.25 * wet);\n    } else {\n      const y1 = egY(P, b.tx, b.tk), x = mix(b.x, b.tx, b.p), y = mix(b.y0, y1, b.p) - 14 * sin(PI * b.p), up = floor(P.t * 7) & 1;\n      put(x, y, c), put(x - 1, y - up, c), put(x + 1, y - up, c), put(x - 2, y - 2 * up, c, 0.7), put(x + 2, y - 2 * up, c, 0.7);\n    }\n  }\n}\n\n// The sky at table x and row r (0 the zenith, 31 the horizon), with its clouds.\nfunction skyAt(P, K, xx, r, out) {\n  const s = P.sk, c = P.cl, xi = floor(xx), fx = xx - xi, i = r * 128;\n  const v = mix(c[i + (xi & 127)], c[i + ((xi + 1) & 127)], fx), cd = cl((v - 0.46) * 8, 0, 1) * (0.4 + 0.6 * sm(0, 6, 31 - r));\n  const lit = 0.3 + 0.7 * cd;\n  for (let j = 0; j \u003c 3; j++) out[j] = mix(s[r * 3 + j], mix(mix(K[1 + j], K[4 + j], 0.5) * 0.75, K[7 + j], lit), cd * 0.94);\n  return cd;\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], a);\n}\nconst lit = (c, L) => c.map((v, j) => v * L[j]);\n\n// Hani houses: earth walls under tall thatch, lamps in the doors at night,\n// smoke from the hearth of the middle one.\nconst HOUSE = [\"..TTT..\", \".TTTTT.\", \"TTTTTTT\", \".WWDWW.\", \".WWDWW.\"];\nfunction village(P, L, night, amb) {\n  const th = lit([176, 128, 70], L), wa = lit([186, 150, 112], L), dr = night > 0.3 ? [255 * night, 170 * night, 80 * night] : [40, 30, 26];\n  for (const [hx, dy] of [[5, 3], [13, 5], [21, 2]]) {\n    const by = P.ridge[hx] + dy;\n    for (let i = -4; i \u003c= 4; i++) put(hx + i, by + 1, lit([70, 56, 40], L));\n    HOUSE.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && put(hx + i - 3, by - 4 + j, ch === \"T\" ? th.map((v) => v * (j === 2 ? 0.8 : 1)) : ch === \"W\" ? wa : dr)));\n  }\n  const by = P.ridge[13] + 1;\n  for (let j = 0; j \u003c 14; j++) put(14 + j * 0.3 + sin(P.t * 1.3 - j * 0.6) * 0.7, by - 3 - j, [220, 216, 220].map((v) => v * (0.4 + 0.6 * amb)), 0.6 * (1 - j / 14));\n}\n\n// Each bund lets a thread of water down its wall through a gap; when the\n// sluice is open the thread runs wide and white.\nfunction streams(P, fo, I) {\n  for (let k = 1; k \u003c P.n; k++) {\n    const x = 5 + floor(hash(k, 11) * 54), y0 = ceil(P.lip[k * W + x]), f = I[k + 3], w = f > 0.3 ? 1 : 0;\n    for (let y = y0; y \u003c y0 + 5 && y \u003c H; y++) {\n      const C = P.cls[y * W + x];\n      if (y > y0 && C === WATER) {\n        put(x, y, fo, 0.35);\n        break;\n      }\n      const st = (y - floor(P.t * 9)) % 3 === 0 ? 1 : 0.7;\n      for (let i = -w; i \u003c= w; i++) put(x + i, y, fo.map((v) => v * st), 0.85);\n    }\n  }\n}\n\n// A farmer ploughs behind his buffalo in a near paddy, both mirrored in the\n// water, and another farmer walks a high bund.\nconst BUFF = [\"......hh\", \".BBBBBBH\", \"BBBBBBBHH\", \".BBBBBB..\"];\nfunction walkers(P, L, s, sk) {\n  const near = P.walk[0], far = P.walk[1], dir = near[1], k = P.kw, wet = 1 - sm(0.3, 0.6, s);\n  const feet = (x) => P.lip[k * W + round(cl(x, 0, 63))] - 1 - 3 * wet;\n  const fig = (x, y, c) => (put(x, y, c), wet > 0 && put(x, 2 * feet(near[0]) - y + 1, c.map((v, j) => v * 0.6 + sk[60 + j] * 0.2), 0.6 * wet));\n  const bx = near[0], by = feet(bx), fx = bx - 5 * dir;\n  // The furrow of churned water behind them.\n  for (let i = 4; i \u003c 20; i++) put(fx - i * dir, feet(fx - i * dir), [120, 100, 80].map((v, j) => v * L[j]), 0.5 * wet * (1 - i / 20));\n  BUFF.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && fig(bx + (dir > 0 ? i - 4 : 4 - i), by - 3 + j, ch === \"h\" ? lit([230, 220, 200], L) : lit(j > 1 ? [30, 27, 30] : [70, 62, 62], L))));\n  const hat = lit([240, 210, 136], L), body = lit([30, 34, 70], L);\n  for (const [i, j, c] of [[0, -4, hat], [-1, -3, hat], [0, -3, hat], [1, -3, hat], [0, -2, body], [0, -1, body], [-dir, -1, body], [0, 0, body]]) fig(fx + i, by + j, c);\n  // The plough's handle between them.\n  fig(fx + dir, by - 1, [70, 56, 44]), fig(fx + 2 * dir, by, [70, 56, 44]);\n  const k2 = k + round((P.n - k) * 0.55), gx = far[0], gy = P.lip[k2 * W + round(gx)] - 1;\n  put(gx, gy - 1, hat), put(gx, gy, body);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const K = key(HOURS, P.h), S = key(SEASONS, P.s), f = (F = P.f), sk = P.sk, n = P.n, t = P.t, s = P.s, cls = P.cls, tx = P.tx;\n  const [amb, dir, mist] = [K[10], K[11], K[12]], night = sm(0.86, 1, P.h);\n  for (let r = 0; r \u003c 32; r++) {\n    const e = sm(0, 0.65, 1 - r / 31) ** 0.8;\n    for (let j = 0; j \u003c 3; j++) sk[r * 3 + j] = mix(K[4 + j], K[1 + j], e);\n  }\n  // The sun along its day from right to left.\n  const a = cl(P.h / 0.86, 0, 1) * PI, sx = 32 + 26 * cos(a), sy = 16 - 80 * sin(a) ** 1.5, side = sx > 32 ? 1 : -1, rs = 31 - 13 * (1 - sy / YH), sunUp = (1 - sm(11, 15, sy)) * (1 - night);\n  const rice1 = sm(0.1, 0.3, s), rice2 = sm(0.3, 0.6, s), cut = sm(0.88, 1, s);\n  const c = P.cl, ox = P.ox, col = [0, 0, 0], L = [0, 0, 0], L0 = AT.map((v, j) => amb * v + (dir * K[7 + j]) / 255);\n  const sh0 = (0.5 + 0.5 * sm(0, 0.2, P.h)) * (1 - night) * 0.8 * dir;\n  const far = AT.map((v, j) => K[1 + j] * 0.9 + 16), near = [30, 44, 70].map((v) => v * (amb + 0.3)), wood = [28, 66, 32].map((v) => v * 1.3);\n  // How hard water is spilling over each bund: the sluice opens at the top and\n  // the overflow runs down one terrace every LAG seconds.\n  const I = F32(n + 8), HZ = F32(n + 8), fo = FOAM.map((v, j) => mix(v, K[7 + j], 0.3) * (0.4 + 0.6 * sm(0.1, 0.5, amb)));\n  for (let k = -3; k \u003c= n + 1; k++) {\n    const tk = P.surge - (n - k) * LAG;\n    HZ[k + 3] = 0.35 * cl(k / n, 0, 1) ** 1.6;\n    I[k + 3] = tk > 0 ? exp(-tk * 0.9) * sm(0, 0.15, tk) : 0;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, C = cls[i];\n    // Cloud shadow on the hillside, sliding across.\n    const shade = cl((c[((floor(y * 0.22) + 3) & 31) * 128 + (floor(x * 0.75 + ox * 1.2 + 40) & 127)] - 0.48) * 4, 0, 1) * sh0;\n    for (let j = 0; j \u003c 3; j++) L[j] = L0[j] - (shade * K[7 + j]) / 255;\n    if (C \u003c WOOD) {\n      const r = cl(round(31 - 13 * (1 - y / YH)), 0, 31), cd = skyAt(P, K, x * 1.3 + ox, r, col);\n      if (C === SKY) {\n        const ds = Math.hypot(x - sx, (y - sy) * 1.1), g = (1 - night) * (0.5 * exp(-ds / 9) * (1 - cd * 0.6) + (ds \u003c 2.6 ? 1 : 0)), st = night > 0.2 && hash(x, y) > 0.985 ? 200 * night : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] += K[7 + j] * g + st;\n      } else for (let j = 0; j \u003c 3; j++) col[j] = (C === FAR ? mix(sk[84 + j], far[j], 0.45) : mix(sk[84 + j], near[j], 0.75)) * (0.9 + 0.1 * tx[i]);\n    } else if (C === WOOD) for (let j = 0; j \u003c 3; j++) col[j] = wood[j] * (0.6 + 0.6 * tx[i]) * L[j];\n    else {\n      const k = P.kk[i], ee = P.e[i], fl = I[k + 3];\n      if (C === WALL) {\n        // Water sheets down the wall when the terrace above overflows.\n        const st = fl > 0.01 ? 0.85 * fl : 0, sv = st ? 0.5 + 0.5 * sin(y * 1.9 - P.surge * 14 + x * 1.3) ** 2 : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(S[1 + j] * L[j] * (1.05 - 0.4 * ee), fo[j] * sv, st);\n      } else if (C === RIM) {\n        const ra = ee * (0.55 + 0.45 * cl(0.5 + 0.3 * P.dep[i] * side, 0, 1));\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(S[1 + j] * L[j], S[4 + j] * (L[j] + 0.3) + sk[84 + j] * 0.25, ra), fo[j], fl);\n      } else {\n        // The mirror: the far paddies hold the low sky, the near ones the sky\n        // overhead, and each holds its own wall dark along the back.\n        const dp = max(2, P.dep[i]), u = cl(ee / dp, 0, 1), rr = RR[y] - 3 * u, r = round(rr);\n        skyAt(P, K, (x - 32) * (0.4 + r / 40) + 32 + ox + k * 1.5, r, col);\n        const gust = cl((c[((floor(y * 0.3) + 17) & 31) * 128 + (floor(x * 0.5 + ox * 1.6) & 127)] - 0.55) * 5, 0, 1), back = dp > 4 ? 0.5 * exp(-ee / 0.9) : 0;\n        // Ripples run out from the wall when water spills in from above.\n        const fi = I[k + 4], rip = fi > 0.01 ? fi * (0.5 + 0.5 * sin(ee * 1.7 - (P.surge - (n - k - 1) * LAG) * 9)) * 0.5 : 0;\n        // The sun's own path down the paddies that hold its height of sky.\n        const gl = sunUp && abs(x - sx) \u003c 7 ? sunUp * exp(-(((x - sx) / 2.2) ** 2) - ((rr - rs) / 1.3) ** 2) * (1 - 0.6 * gust) * (0.75 + 0.25 * sin(x * 2.3 + y * 1.7 + t * 6)) : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(col[j] * 0.88, sk[45 + j] * 0.55, 0.5 * gust), S[1 + j] * L[j], back * (1 - fi)) + MUD[j] * L[j] + fo[j] * rip + K[7 + j] * gl;\n        // Rice: seedlings in rows along the contour, then a closed crop.\n        const ra = max((x + k) % 2 === 0 && floor(ee) % 2 === 0 ? rice1 : 0, rice2);\n        if (ra > 0) {\n          const v = (floor(ee) & 1 ? 1 : 0.84) * (0.9 + 0.2 * hash(x, y * 7 + k)) * (1 + 0.3 * cl((gust - 0.1) * 2, 0, 1)), isCut = (k * 7 + 23) % 10 \u003c cut * 3.5;\n          for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], (isCut ? STUB[j] * (x % 3 ? 1 : 0.7) : S[7 + j]) * L[j] * v, ra);\n        }\n      }\n      // The far steps fade into the haze.\n      const hz = HZ[k + 3];\n      for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], sk[72 + j] * 0.9, hz);\n    }\n    f[o] = col[0];\n    f[o + 1] = col[1];\n    f[o + 2] = col[2];\n  }\n  // The village under the forest, the bunds' outlets, the farmers.\n  village(P, L0, night, amb);\n  streams(P, fo, I);\n  walkers(P, L0, s, sk);\n  egrets(P, L0, 1 - sm(0.3, 0.6, s));\n  // Mist: a bank in the valley behind the ridge and a thinner one over the steps.\n  const mt = P.mt, y1 = 28 + 4 * sin(mt * 0.4), y2 = 66 + 22 * sin(mt * 0.2 + 1), mc = [0, 1, 2].map((j) => mix(sk[93 + j], 250, 0.55) * (0.7 + 0.3 * amb));\n  for (let y = 0; y \u003c H; y++) {\n    const w1 = mist * 0.9 * exp(-(((y - y1) / 6) ** 2)), w2 = mist * 0.45 * exp(-(((y - y2) / 7) ** 2));\n    if (w1 + w2 \u003c 0.01) continue;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      const dm = min(0.9, ((cls[i] \u003c WOOD ? w1 : 0) + w2) * (0.4 + 0.6 * vn(x * 0.08 + mt * 0.3, y * 0.2)));\n      for (let j = 0; j \u003c 3; j++) f[i * 3 + j] = mix(f[i * 3 + j], mc[j], dm);\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","layer":{"id":"layer-rice-terraces","type":"code","name":"rice-terraces","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rice Terraces\n// Family:  farm\n// Idea:    Rice terraces climb in curved steps from the foot of the panel to a forested ridge, every flooded paddy a mirror of the sunrise between dark earth walls with a thin lit rim, while clouds slide across the mirrors and the mist lifts behind the ridge.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Hani rice terraces of Yuanyang and the terraces of Banaue\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1\n//\n// Knob 1: Season. At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble.\n// Knob 2: Speed. At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower.\n// Knob 3: Terraces. How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water.\n// Knob 4: Hour. Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door.\n// Buttons: K1 tap opens the sluice at the top: water spills over each bund in turn down to the foot, and ripples run across every paddy it fills.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst F32 = (n) => new Float32Array(n);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Terrace 0 sits just under the panel, the last one at the ridge. The sky's\n// horizon row, and the classes a LED can belong to.\nconst [YB, YT, YH] = [134, 38, 34];\nconst [SKY, FAR, NEAR, WOOD, WATER, WALL, RIM] = [0, 1, 2, 3, 4, 5, 6];\n// The row of the sky (0 the zenith, 31 the horizon) that the water on each\n// panel row holds: low sky in the far paddies, the sky overhead in the near ones.\nconst RR = F32(H).map((v, y) => 26 - 20 * cl((y - 36) / 92, 0, 1) ** 0.9);\nconst FOAM = [220, 236, 250], LAG = 0.22, AT = [0.82, 0.88, 1], MUD = [7, 5.6, 4.4], STUB = [150, 120, 70];\n\n// Light by the hour: sky at the zenith, sky at the horizon, sunlit cloud,\n// then ambient and direct light and how much mist lies in the valley.\nconst HOURS = [\n  [0, 14, 22, 70, 150, 100, 150, 255, 150, 140, 0.3, 0.12, 1],\n  [0.07, 34, 64, 150, 255, 176, 110, 255, 200, 150, 0.5, 0.55, 0.95],\n  [0.25, 40, 100, 200, 190, 215, 235, 255, 245, 225, 0.7, 0.6, 0.4],\n  [0.5, 36, 96, 206, 170, 205, 240, 255, 255, 250, 0.74, 0.66, 0.15],\n  [0.72, 40, 80, 180, 250, 200, 130, 255, 215, 150, 0.64, 0.56, 0.2],\n  [0.86, 40, 36, 100, 255, 120, 70, 255, 140, 90, 0.42, 0.36, 0.4],\n  [1, 6, 8, 28, 40, 36, 70, 60, 60, 90, 0.16, 0, 0.6],\n];\n// The season: earth wall, bund rim, rice. Flooded, planted, green, ripening, cut.\nconst SEASONS = [\n  [0, 66, 48, 36, 206, 184, 150, 120, 200, 70],\n  [0.35, 60, 74, 40, 150, 196, 96, 110, 204, 60],\n  [0.65, 42, 84, 34, 110, 176, 64, 46, 156, 40],\n  [0.85, 80, 84, 40, 186, 176, 84, 184, 184, 50],\n  [1, 96, 76, 44, 224, 184, 96, 244, 178, 40],\n];\nfunction key(T, u) {\n  let i = 0;\n  while (i \u003c T.length - 2 && u > T[i + 1][0]) i++;\n  const a = T[i], b = T[i + 1], f = cl((u - a[0]) / (b[0] - a[0]), 0, 1);\n  return a.map((v, c) => mix(v, b[c], f));\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ox: 0, mt: 0, n: 0, surge: 99, sk: F32(32 * 3), cl: F32(128 * 32), f: F32(N * 3),\n    cls: new Uint8Array(N), kk: new Int8Array(N), e: F32(N), dep: F32(N), tx: F32(N), walk: [[10 + rnd() * 44, 1], [10 + rnd() * 44, -1]],\n  });\n  P.ox = rnd() * 128;\n  // Egrets: where each stands (column, how far up the steps), and how long it waits.\n  P.birds = [0, 1, 2].map(() => ({ x: 6 + rnd() * 52, kf: 0.05 + rnd() * 0.6, w: 1 + rnd() * 8, p: -1 }));\n  // Cloud noise, 128 columns that wrap and 32 rows from the zenith down.\n  for (let i = 0; i \u003c 128 * 32; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.06, y * 0.22) + 0.3 * vn(X * 0.15, y * 0.5 + 9) + 0.15 * vn(X * 0.4, y + 3);\n    P.cl[i] = mix(f(x), f(x - 128), x / 128);\n  }\n  for (let i = 0; i \u003c N; i++) P.tx[i] = vn((i & 63) * 0.5, (i >> 6) * 0.6);\n}\n\n// The terraces for n steps. A level u climbs the panel in steps that shrink\n// with distance, bent by slow noise into spurs and gullies; each whole value\n// of u is a bund. For each LED: which terrace, and whether it is water, the\n// earth wall under a bund, or the bund's lit rim.\nfunction build(P, n) {\n  const q = 0.28 ** (1 / n), L = -log(q), b0 = ((YB - YT) * L) / (1 - q ** n);\n  const V = (y) => ((y = 1 - ((YB - y) * L) / b0), y > 1e-4 ? log(y) / -L : 99);\n  const { cls, kk, e, dep } = P, u = F32(H + 20), yc = F32(n + 6);\n  const put = (x, y, k, i = y * W + x) => y >= 0 && y \u003c H && cls[i] >= WATER && ((cls[i] = RIM), (kk[i] = k));\n  P.lip = F32((n + 2) * W);\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    // A spur comes down left of centre and a gully cuts in on the right.\n    const sp = 1.3 * exp(-(((x - 24) / 13) ** 2)) - 1 * exp(-(((x - 55) / 9) ** 2));\n    for (let y = H + 19, m = -9; y >= 0; y--) {\n      const v0 = V(y), xs = (x - 32) / (q ** v0) ** 0.4 + 40;\n      const v = v0 + sp + 1.2 * (vn(xs * 0.035, v0 * 0.07) * 2 - 1 + 0.4 * (vn(xs * 0.085 + 7, v0 * 0.15 + 5) * 2 - 1));\n      u[y] = m = max(m, v);\n    }\n    // Where each bund crosses this column, to a fraction of a LED.\n    yc.fill(H + 40);\n    for (let y = H + 18; y >= 0; y--) for (let k = max(-3, floor(u[y + 1]) + 1); k \u003c= min(n, u[y]); k++) yc[k + 3] = y + (u[y] - k) / max(1e-3, u[y] - u[y + 1]);\n    for (let k = 0; k \u003c= n; k++) P.lip[k * W + x] = yc[k + 3];\n    let y = H - 1;\n    for (; y >= 0 && u[y] \u003c n; y--) {\n      const k = max(-3, floor(u[y])), lip = yc[k + 4], bp = yc[k + 3] \u003c H + 40 ? yc[k + 3] - lip : b0, d = y - lip, rh = cl(0.22 * bp - 0.6, 0, 3.5), i = y * W + x;\n      if (d \u003c 1) (cls[i] = RIM), (kk[i] = k + 1);\n      else if (d \u003c 1 + rh) (cls[i] = WALL), (kk[i] = k + 1), (e[i] = (d - 1) / rh);\n      else (cls[i] = WATER), (kk[i] = k), (e[i] = d - 1 - rh), (dep[i] = bp - 1 - rh);\n    }\n    P.ridge[x] = y;\n    const top = y - 5 - 3 * vn(x * 0.35, 4) - abs(sin(x * 0.9)) * 1.5;\n    for (; y >= 0; y--) {\n      const i = y * W + x;\n      cls[i] = y > top ? WOOD : y >= 22 + 4 * sin(0.06 * x + 0.5) + 2.5 * sin(0.17 * x + 2) ? NEAR : y >= 15 + 5 * sin(0.045 * x + 2.4) + 2 * sin(0.13 * x + 1) ? FAR : SKY;\n    }\n  }\n  // Close the rim where a bund steps a row or more from one column to the next.\n  for (let k = 1; k \u003c= n; k++)\n    for (let x = 0; x \u003c W - 1; x++) {\n      let a = ceil(P.lip[k * W + x]), b = ceil(P.lip[k * W + x + 1]), xa = x, xb = x + 1;\n      if (a > b) [a, b, xa, xb] = [b, a, xb, xa];\n      const m = floor((a + b) / 2);\n      for (let y = a + 1; y \u003c b; y++) put(y \u003c= m ? xa : xb, y, k);\n      if (b > a) put(xb, m, k);\n    }\n  // How bright each rim is: faint where the steps are thin and far, and\n  // brighter where the bund turns to face the light.\n  const lp = (k, x) => P.lip[k * W + cl(x, 0, W - 1)];\n  for (let i = 0; i \u003c N; i++)\n    if (cls[i] === RIM) {\n      const k = kk[i], x = i & 63;\n      e[i] = k > 0 ? cl((lp(k - 1, x) - lp(k, x) - 2) / 7, 0.2, 1) : 1;\n      dep[i] = k >= 0 ? lp(k, x + 1) - lp(k, x - 1) : 0;\n    }\n  for (P.kw = 1; P.lip[P.kw * W + 32] > 117; P.kw++);\n  P.n = n;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 12, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2);\n  const n = round(cl(k[2], 12, 24));\n  if (n !== P.n) build(P, n);\n  P.s = cl(k[0], 0, 1);\n  P.h = cl(k[3], 0, 1);\n  P.t += d;\n  P.ox += 5 * d;\n  P.mt += d;\n  P.surge += d;\n  if (input.btnPressed && input.btnPressed[0]) P.surge = 0;\n  // The ploughing team and the farmer up on the high bund walk to the end and turn.\n  for (const w of P.walk) {\n    w[0] += w[1] * 2.2 * d;\n    if (w[0] > 56 || w[0] \u003c 6) w[1] = -w[1];\n  }\n  // An egret waits, then flies to another paddy in a low arc.\n  for (const b of P.birds)\n    if (b.p >= 0) {\n      if ((b.p += d / 1.8) >= 1) Object.assign(b, { p: -1, x: b.tx, kf: b.tk, w: 4 + rnd() * 9 });\n    } else if ((b.w -= d) \u003c= 0) Object.assign(b, { p: 0, tx: 6 + rnd() * 52, tk: 0.05 + rnd() * 0.6, y0: egY(P, b.x, b.kf) });\n}\n\n// Where an egret stands: a little behind the bund of its terrace.\nconst egY = (P, x, kf) => P.lip[max(1, round(kf * P.n)) * W + round(cl(x, 0, 63))] - 2;\nfunction egrets(P, L, wet) {\n  const c = lit([250, 248, 240], L);\n  for (const b of P.birds) {\n    if (b.p \u003c 0) {\n      const x = b.x, y = egY(P, x, b.kf);\n      put(x, y, c), put(x, y - 1, c), put(x + 1, y - 2, c), put(x, y + 1, c, 0.35 * wet), put(x, y + 2, c, 0.25 * wet);\n    } else {\n      const y1 = egY(P, b.tx, b.tk), x = mix(b.x, b.tx, b.p), y = mix(b.y0, y1, b.p) - 14 * sin(PI * b.p), up = floor(P.t * 7) & 1;\n      put(x, y, c), put(x - 1, y - up, c), put(x + 1, y - up, c), put(x - 2, y - 2 * up, c, 0.7), put(x + 2, y - 2 * up, c, 0.7);\n    }\n  }\n}\n\n// The sky at table x and row r (0 the zenith, 31 the horizon), with its clouds.\nfunction skyAt(P, K, xx, r, out) {\n  const s = P.sk, c = P.cl, xi = floor(xx), fx = xx - xi, i = r * 128;\n  const v = mix(c[i + (xi & 127)], c[i + ((xi + 1) & 127)], fx), cd = cl((v - 0.46) * 8, 0, 1) * (0.4 + 0.6 * sm(0, 6, 31 - r));\n  const lit = 0.3 + 0.7 * cd;\n  for (let j = 0; j \u003c 3; j++) out[j] = mix(s[r * 3 + j], mix(mix(K[1 + j], K[4 + j], 0.5) * 0.75, K[7 + j], lit), cd * 0.94);\n  return cd;\n}\n\nlet F;\nfunction put(x, y, c, a = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let j = 0; j \u003c 3; j++) F[o + j] = mix(F[o + j], c[j], a);\n}\nconst lit = (c, L) => c.map((v, j) => v * L[j]);\n\n// Hani houses: earth walls under tall thatch, lamps in the doors at night,\n// smoke from the hearth of the middle one.\nconst HOUSE = [\"..TTT..\", \".TTTTT.\", \"TTTTTTT\", \".WWDWW.\", \".WWDWW.\"];\nfunction village(P, L, night, amb) {\n  const th = lit([176, 128, 70], L), wa = lit([186, 150, 112], L), dr = night > 0.3 ? [255 * night, 170 * night, 80 * night] : [40, 30, 26];\n  for (const [hx, dy] of [[5, 3], [13, 5], [21, 2]]) {\n    const by = P.ridge[hx] + dy;\n    for (let i = -4; i \u003c= 4; i++) put(hx + i, by + 1, lit([70, 56, 40], L));\n    HOUSE.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && put(hx + i - 3, by - 4 + j, ch === \"T\" ? th.map((v) => v * (j === 2 ? 0.8 : 1)) : ch === \"W\" ? wa : dr)));\n  }\n  const by = P.ridge[13] + 1;\n  for (let j = 0; j \u003c 14; j++) put(14 + j * 0.3 + sin(P.t * 1.3 - j * 0.6) * 0.7, by - 3 - j, [220, 216, 220].map((v) => v * (0.4 + 0.6 * amb)), 0.6 * (1 - j / 14));\n}\n\n// Each bund lets a thread of water down its wall through a gap; when the\n// sluice is open the thread runs wide and white.\nfunction streams(P, fo, I) {\n  for (let k = 1; k \u003c P.n; k++) {\n    const x = 5 + floor(hash(k, 11) * 54), y0 = ceil(P.lip[k * W + x]), f = I[k + 3], w = f > 0.3 ? 1 : 0;\n    for (let y = y0; y \u003c y0 + 5 && y \u003c H; y++) {\n      const C = P.cls[y * W + x];\n      if (y > y0 && C === WATER) {\n        put(x, y, fo, 0.35);\n        break;\n      }\n      const st = (y - floor(P.t * 9)) % 3 === 0 ? 1 : 0.7;\n      for (let i = -w; i \u003c= w; i++) put(x + i, y, fo.map((v) => v * st), 0.85);\n    }\n  }\n}\n\n// A farmer ploughs behind his buffalo in a near paddy, both mirrored in the\n// water, and another farmer walks a high bund.\nconst BUFF = [\"......hh\", \".BBBBBBH\", \"BBBBBBBHH\", \".BBBBBB..\"];\nfunction walkers(P, L, s, sk) {\n  const near = P.walk[0], far = P.walk[1], dir = near[1], k = P.kw, wet = 1 - sm(0.3, 0.6, s);\n  const feet = (x) => P.lip[k * W + round(cl(x, 0, 63))] - 1 - 3 * wet;\n  const fig = (x, y, c) => (put(x, y, c), wet > 0 && put(x, 2 * feet(near[0]) - y + 1, c.map((v, j) => v * 0.6 + sk[60 + j] * 0.2), 0.6 * wet));\n  const bx = near[0], by = feet(bx), fx = bx - 5 * dir;\n  // The furrow of churned water behind them.\n  for (let i = 4; i \u003c 20; i++) put(fx - i * dir, feet(fx - i * dir), [120, 100, 80].map((v, j) => v * L[j]), 0.5 * wet * (1 - i / 20));\n  BUFF.forEach((row, j) => [...row].forEach((ch, i) => ch !== \".\" && fig(bx + (dir > 0 ? i - 4 : 4 - i), by - 3 + j, ch === \"h\" ? lit([230, 220, 200], L) : lit(j > 1 ? [30, 27, 30] : [70, 62, 62], L))));\n  const hat = lit([240, 210, 136], L), body = lit([30, 34, 70], L);\n  for (const [i, j, c] of [[0, -4, hat], [-1, -3, hat], [0, -3, hat], [1, -3, hat], [0, -2, body], [0, -1, body], [-dir, -1, body], [0, 0, body]]) fig(fx + i, by + j, c);\n  // The plough's handle between them.\n  fig(fx + dir, by - 1, [70, 56, 44]), fig(fx + 2 * dir, by, [70, 56, 44]);\n  const k2 = k + round((P.n - k) * 0.55), gx = far[0], gy = P.lip[k2 * W + round(gx)] - 1;\n  put(gx, gy - 1, hat), put(gx, gy, body);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const K = key(HOURS, P.h), S = key(SEASONS, P.s), f = (F = P.f), sk = P.sk, n = P.n, t = P.t, s = P.s, cls = P.cls, tx = P.tx;\n  const [amb, dir, mist] = [K[10], K[11], K[12]], night = sm(0.86, 1, P.h);\n  for (let r = 0; r \u003c 32; r++) {\n    const e = sm(0, 0.65, 1 - r / 31) ** 0.8;\n    for (let j = 0; j \u003c 3; j++) sk[r * 3 + j] = mix(K[4 + j], K[1 + j], e);\n  }\n  // The sun along its day from right to left.\n  const a = cl(P.h / 0.86, 0, 1) * PI, sx = 32 + 26 * cos(a), sy = 16 - 80 * sin(a) ** 1.5, side = sx > 32 ? 1 : -1, rs = 31 - 13 * (1 - sy / YH), sunUp = (1 - sm(11, 15, sy)) * (1 - night);\n  const rice1 = sm(0.1, 0.3, s), rice2 = sm(0.3, 0.6, s), cut = sm(0.88, 1, s);\n  const c = P.cl, ox = P.ox, col = [0, 0, 0], L = [0, 0, 0], L0 = AT.map((v, j) => amb * v + (dir * K[7 + j]) / 255);\n  const sh0 = (0.5 + 0.5 * sm(0, 0.2, P.h)) * (1 - night) * 0.8 * dir;\n  const far = AT.map((v, j) => K[1 + j] * 0.9 + 16), near = [30, 44, 70].map((v) => v * (amb + 0.3)), wood = [28, 66, 32].map((v) => v * 1.3);\n  // How hard water is spilling over each bund: the sluice opens at the top and\n  // the overflow runs down one terrace every LAG seconds.\n  const I = F32(n + 8), HZ = F32(n + 8), fo = FOAM.map((v, j) => mix(v, K[7 + j], 0.3) * (0.4 + 0.6 * sm(0.1, 0.5, amb)));\n  for (let k = -3; k \u003c= n + 1; k++) {\n    const tk = P.surge - (n - k) * LAG;\n    HZ[k + 3] = 0.35 * cl(k / n, 0, 1) ** 1.6;\n    I[k + 3] = tk > 0 ? exp(-tk * 0.9) * sm(0, 0.15, tk) : 0;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, C = cls[i];\n    // Cloud shadow on the hillside, sliding across.\n    const shade = cl((c[((floor(y * 0.22) + 3) & 31) * 128 + (floor(x * 0.75 + ox * 1.2 + 40) & 127)] - 0.48) * 4, 0, 1) * sh0;\n    for (let j = 0; j \u003c 3; j++) L[j] = L0[j] - (shade * K[7 + j]) / 255;\n    if (C \u003c WOOD) {\n      const r = cl(round(31 - 13 * (1 - y / YH)), 0, 31), cd = skyAt(P, K, x * 1.3 + ox, r, col);\n      if (C === SKY) {\n        const ds = Math.hypot(x - sx, (y - sy) * 1.1), g = (1 - night) * (0.5 * exp(-ds / 9) * (1 - cd * 0.6) + (ds \u003c 2.6 ? 1 : 0)), st = night > 0.2 && hash(x, y) > 0.985 ? 200 * night : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] += K[7 + j] * g + st;\n      } else for (let j = 0; j \u003c 3; j++) col[j] = (C === FAR ? mix(sk[84 + j], far[j], 0.45) : mix(sk[84 + j], near[j], 0.75)) * (0.9 + 0.1 * tx[i]);\n    } else if (C === WOOD) for (let j = 0; j \u003c 3; j++) col[j] = wood[j] * (0.6 + 0.6 * tx[i]) * L[j];\n    else {\n      const k = P.kk[i], ee = P.e[i], fl = I[k + 3];\n      if (C === WALL) {\n        // Water sheets down the wall when the terrace above overflows.\n        const st = fl > 0.01 ? 0.85 * fl : 0, sv = st ? 0.5 + 0.5 * sin(y * 1.9 - P.surge * 14 + x * 1.3) ** 2 : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(S[1 + j] * L[j] * (1.05 - 0.4 * ee), fo[j] * sv, st);\n      } else if (C === RIM) {\n        const ra = ee * (0.55 + 0.45 * cl(0.5 + 0.3 * P.dep[i] * side, 0, 1));\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(S[1 + j] * L[j], S[4 + j] * (L[j] + 0.3) + sk[84 + j] * 0.25, ra), fo[j], fl);\n      } else {\n        // The mirror: the far paddies hold the low sky, the near ones the sky\n        // overhead, and each holds its own wall dark along the back.\n        const dp = max(2, P.dep[i]), u = cl(ee / dp, 0, 1), rr = RR[y] - 3 * u, r = round(rr);\n        skyAt(P, K, (x - 32) * (0.4 + r / 40) + 32 + ox + k * 1.5, r, col);\n        const gust = cl((c[((floor(y * 0.3) + 17) & 31) * 128 + (floor(x * 0.5 + ox * 1.6) & 127)] - 0.55) * 5, 0, 1), back = dp > 4 ? 0.5 * exp(-ee / 0.9) : 0;\n        // Ripples run out from the wall when water spills in from above.\n        const fi = I[k + 4], rip = fi > 0.01 ? fi * (0.5 + 0.5 * sin(ee * 1.7 - (P.surge - (n - k - 1) * LAG) * 9)) * 0.5 : 0;\n        // The sun's own path down the paddies that hold its height of sky.\n        const gl = sunUp && abs(x - sx) \u003c 7 ? sunUp * exp(-(((x - sx) / 2.2) ** 2) - ((rr - rs) / 1.3) ** 2) * (1 - 0.6 * gust) * (0.75 + 0.25 * sin(x * 2.3 + y * 1.7 + t * 6)) : 0;\n        for (let j = 0; j \u003c 3; j++) col[j] = mix(mix(col[j] * 0.88, sk[45 + j] * 0.55, 0.5 * gust), S[1 + j] * L[j], back * (1 - fi)) + MUD[j] * L[j] + fo[j] * rip + K[7 + j] * gl;\n        // Rice: seedlings in rows along the contour, then a closed crop.\n        const ra = max((x + k) % 2 === 0 && floor(ee) % 2 === 0 ? rice1 : 0, rice2);\n        if (ra > 0) {\n          const v = (floor(ee) & 1 ? 1 : 0.84) * (0.9 + 0.2 * hash(x, y * 7 + k)) * (1 + 0.3 * cl((gust - 0.1) * 2, 0, 1)), isCut = (k * 7 + 23) % 10 \u003c cut * 3.5;\n          for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], (isCut ? STUB[j] * (x % 3 ? 1 : 0.7) : S[7 + j]) * L[j] * v, ra);\n        }\n      }\n      // The far steps fade into the haze.\n      const hz = HZ[k + 3];\n      for (let j = 0; j \u003c 3; j++) col[j] = mix(col[j], sk[72 + j] * 0.9, hz);\n    }\n    f[o] = col[0];\n    f[o + 1] = col[1];\n    f[o + 2] = col[2];\n  }\n  // The village under the forest, the bunds' outlets, the farmers.\n  village(P, L0, night, amb);\n  streams(P, fo, I);\n  walkers(P, L0, s, sk);\n  egrets(P, L0, 1 - sm(0.3, 0.6, s));\n  // Mist: a bank in the valley behind the ridge and a thinner one over the steps.\n  const mt = P.mt, y1 = 28 + 4 * sin(mt * 0.4), y2 = 66 + 22 * sin(mt * 0.2 + 1), mc = [0, 1, 2].map((j) => mix(sk[93 + j], 250, 0.55) * (0.7 + 0.3 * amb));\n  for (let y = 0; y \u003c H; y++) {\n    const w1 = mist * 0.9 * exp(-(((y - y1) / 6) ** 2)), w2 = mist * 0.45 * exp(-(((y - y2) / 7) ** 2));\n    if (w1 + w2 \u003c 0.01) continue;\n    for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n      const dm = min(0.9, ((cls[i] \u003c WOOD ? w1 : 0) + w2) * (0.4 + 0.6 * vn(x * 0.08 + mt * 0.3, y * 0.2)));\n      for (let j = 0; j \u003c 3; j++) f[i * 3 + j] = mix(f[i * 3 + j], mc[j], dm);\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, f[o]) | 0, min(255, f[o + 1]) | 0, min(255, f[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Speed=0.2..3, Terraces=12..24, Hour=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"At 0 the paddies are flooded in spring and each one holds the sky; then rows of seedlings stand in the water, the rice closes over it green, and at 1 it is gold with four terraces in ten already cut to stubble."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a cloud crosses the sky in about seventeen seconds, its reflection slides faster over the near paddies, and the valley mist rises and settles every quarter minute; at 0.2 it all runs ten times slower."},{"name":"Terraces","min":12,"max":24,"about":"How many steps climb from the foot of the panel to the ridge, twelve to twenty-four. The near ones are deep behind walls two or three LEDs high, and the far ones thin to a line over the water."},{"name":"Hour","min":0,"max":1,"about":"Sunrise just after 0, the sun's path glinting in the paddies under it and mist behind the ridge; then morning, noon, a gold afternoon and sunset, and at 1 night, with stars and a lamp in each village door."}],"start":[0,2,12,0.06],"measures":{"motion":0.0809,"detail":0.0942,"edges":0.423,"complexity":2.2579,"coverage":1,"colour":0.1716,"drift":0.0563},"knobResponse":[0.1151,0.0688,0.1253,0.4152]},{"slug":"ripple-tank","title":"Ripple Tank","family":"sim","round":1,"note":"빗방울이 떨어진 자리마다 고리가 퍼지고 벽에 부딪혀 되돌아와 서로 겹쳐요.","idea":"Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-ripple-tank","type":"code","name":"ripple-tank","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the crests round the colour wheel; the troughs stay deep blue."},{"name":"Rain","min":0.5,"max":6,"about":"Drops per second."},{"name":"Damping","min":0,"max":1,"about":"How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far."},{"name":"Drop","min":2.5,"max":6,"about":"Size of each drop; small drops throw fine rings, big ones a slow swell."}],"start":[0,2,0,2.5],"measures":{"motion":4.7512,"detail":0.0907,"edges":0.3794,"complexity":1.2184,"coverage":0.4445,"colour":0.2076,"drift":0.234},"knobResponse":[0.0799,0.2629,0.1082,0.1339]},{"slug":"rule-scroll","title":"Rule Scroll","family":"automata","round":1,"note":"64칸 한 줄이 이웃을 보고 다음 줄을 써 내려가요. 8비트 숫자 하나가 삼각형이 될지 잡음이 될지 정해요.","idea":"A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.","buttons":"K1 tap starts again from a single cell.","code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","layer":{"id":"layer-rule-scroll","type":"code","name":"rule-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from 3 to 24, one row each."},{"name":"Rule","min":0,"max":11,"about":"Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126."},{"name":"Noise","min":0,"max":1,"about":"Random flips each generation, which show as white sparks and break ordered rules open."}],"start":[0,2,0,0.06],"measures":{"motion":3.3184,"detail":0.3747,"edges":0.8011,"complexity":0.6155,"coverage":0.494,"colour":0.4373,"drift":0.0401},"knobResponse":[0.2576,0.1939,0.2319,0.0376]},{"slug":"sandpile","title":"Sandpile","family":"automata","round":21,"note":"한 칸에 모래알이 넷 모이면 이웃 넷에 하나씩 넘기는 쟁반에 모래가 한 줌씩 떨어져요. 사태가 떨어진 자리에서 빛나는 고리로 번지며 네 색 레이스를 다시 쓰고, 쟁반이 다 차면 기울어 모래를 쏟아요.","idea":"Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.","buttons":"K1 tap tips the tray now.","code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","layer":{"id":"layer-sandpile","type":"code","name":"sandpile","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon."},{"name":"Speed","min":0.2,"max":3,"about":"Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile."},{"name":"Sources","min":1,"max":5,"about":"How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre."},{"name":"Scatter","min":0,"max":1,"about":"How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray."}],"start":[0,2,1,0.06],"measures":{"motion":0.6394,"detail":0.335,"edges":0.8978,"complexity":0.6311,"coverage":0.8294,"colour":0.2844,"drift":0.1509},"knobResponse":[0.2234,0.3094,0.3442,0.2665]},{"slug":"satin-fold","title":"Satin Fold","family":"cosmetic","round":30,"note":"한 점에 잡힌 연한 새틴이 부채꼴 주름으로 흔들리고, 광택이 주름을 따라 긴 줄로 서요. 금색 실 하나가 천을 건너며 주름마다 휘어요.","idea":"A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.","buttons":"K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Satin Fold\n// Family:  cosmetic\n// Idea:    A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after satin weave sheen and gold-foil packaging; the sheen is a fibre highlight (James Kajiya and Timothy Kay, 1989) with an anisotropic lobe (Gregory Ward, 1992)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1\n//\n// Knob 1: Hue. The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac.\n// Knob 2: Speed. How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half.\n// Knob 3: Folds. One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5.\n// Knob 4: Gold. The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon.\n// Buttons: K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.\n\nconst W = 64, H = 128;\nconst { sin, cos, sqrt, exp, floor, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The first fold family is a fan: the cloth is held at a point 160 LEDs\n// above the panel's middle and a little left, and 22 folds a radian hang from\n// it, tight at the top of the panel and wide at the bottom.\nconst PX = -14, PY = -160, FAN = 22, FAN_A = 6.5, RC = 160;\n// The others are straight waves: crest angle in degrees, wavelength in LEDs,\n// height in LEDs, bend of the crest, travel in radians a second at Speed 1,\n// swell phase. The last is pressed: its profile has sharp valleys. The first\n// row stands for the fan, which reads only its travel and phase from it.\nconst FOLDS = [\n  [0, 1, 0, 0, 0.42, 0.0],\n  [58, 46, 4.2, -0.004, -0.33, 2.1],\n  [100, 30, 2.6, 0.007, 0.55, 4.0],\n  [128, 24, 1.8, -0.008, -0.71, 1.2],\n  [76, 28, 1.4, 0.004, 0.62, 3.3],\n].map(([ang, lam, A, c, w, ph]) => {\n  const a = (ang * PI) / 180;\n  return { tx: cos(a), ty: sin(a), nx: -sin(a), ny: cos(a), k: (2 * PI) / lam, A, c, w, ph };\n});\n\n// Light from the left, a little above and in front; the eye straight on.\n// y runs down.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.6, -0.35, 0.72);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The floats of the satin weave run nearly across the panel, rising a little\n// to the right, so they cross the hanging folds and catch the light only\n// where they tilt square to the half vector.\nconst FX = 0.985, FY = -0.17;\n// The gold line in the cloth's own coordinates: through the middle, going\n// down to the right, bowed a little.\nconst [GX, GY] = (() => {\n  const l = Math.hypot(0.42, 1);\n  return [0.42 / l, 1 / l];\n})();\nconst MX = -GY, MY = GX;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The satin's ramp from the deepest hollow (0) to the brightest sheen (1):\n// the hue deep and saturated in the hollows, pale over the body, near white\n// in the streaks.\nconst RAMP = 256;\nfunction ramp(P) {\n  const hue = P.hue + 0.975;\n  for (let i = 0; i \u003c RAMP; i++) {\n    const s = i / (RAMP - 1);\n    let sat, val;\n    if (s \u003c 0.5) {\n      const u = s / 0.5;\n      sat = 0.46 + (0.18 - 0.46) * u;\n      val = 0.5 + (0.8 - 0.5) * u;\n    } else {\n      const u = (s - 0.5) / 0.5;\n      sat = 0.18 + (0.04 - 0.18) * u;\n      val = 0.8 + (0.97 - 0.8) * u;\n    }\n    hsv(hue - 0.015 * (1 - s), sat, val, P.lut, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = {\n    t: 0, clock: 0, hue: 0, speed: 2, folds: 1, gold: 0.06, gust: -1,\n    lut: new Float32Array(RAMP * 3), lutHue: NaN, cw: new Float32Array(W), cd: new Float32Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.folds = cl(k[2], 1, 5);\n  P.gold = cl(k[3], 0, 1);\n  P.t += d * P.speed;\n  P.clock += d;\n  if (P.gust >= 0) {\n    P.gust += d / 2.5;\n    if (P.gust >= 1) P.gust = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) P.gust = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) ramp(P);\n  const T = P.t, F = P.folds, lut = P.lut;\n  // Each family fades in over one step of Folds, and the whole cloth gets\n  // deeper as it does.\n  const depth = 0.75 + 0.18 * (F - 1);\n  const act = [];\n  for (let i = 0; i \u003c FOLDS.length; i++) {\n    const f = FOLDS[i], wgt = sm(0, 1, F - i);\n    if (wgt \u003c= 0) continue;\n    const swell = 0.72 + 0.28 * sin(0.37 * T + f.ph);\n    act.push({ ...f, A: (i ? f.A * swell : FAN_A) * wgt * depth, phase: f.w * T + f.ph, press: i === 4 });\n  }\n  const na = act.length, fan = act[0];\n  let tot = 0;\n  for (const f of act) tot += f.A;\n  // The gust: one ridge across the sheet that runs from the bottom up.\n  let gA = 0, gy0 = 0;\n  if (P.gust >= 0) {\n    gA = 5.5 * sin(PI * P.gust);\n    gy0 = 80 - 190 * P.gust;\n  }\n  const wa = 3.2;\n  // The panel sees the cloth a little from below, so a line on it shifts\n  // with the height of the cloth under it: 0.65 LED a LED of height at one\n  // fold family, less on the deep drapes.\n  const lean = 0.65 / (1 + 0.15 * (F - 1));\n  const g = P.gold, gAlpha = sm(0, 0.04, g), hw = 0.6 + 6 * g, sw = 1 + 2.5 * g;\n  const gf = 0.11 + 0.11 * g, gT = P.clock * (0.6 + 0.4 * P.speed);\n  // The warp's sideways part, one value a column.\n  const CW = P.cw, CD = P.cd;\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - 31.5) * 0.07 - T * 0.17 + 1.3;\n    CW[x] = wa * sin(u);\n    CD[x] = wa * 0.07 * cos(u);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const py = y - 63.5;\n    const s1 = sin(py * 0.045 + T * 0.23), c1 = cos(py * 0.045 + T * 0.23);\n    const dxdy = wa * 0.045 * c1;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5;\n      const dydx = CD[x];\n      const qx = px + wa * s1, qy = py + CW[x];\n      let h = 0, gx = 0, gy = 0;\n      {\n        // The fan: the fold phase goes with the angle round the point it\n        // hangs from, and leans with the distance. Its height grows as the\n        // square root of the distance, and a swell runs down it.\n        const dx = qx - PX, dy = qy - PY, r2 = dx * dx + dy * dy, r = sqrt(r2);\n        const th = FAN * Math.atan2(dx, dy) + 0.025 * r - fan.phase;\n        const sv = 0.045 * r - 0.5 * T, ms = 0.75 + 0.25 * sin(sv), rr = sqrt(r / RC);\n        const A = fan.A * rr * ms, dA = A / (2 * r) + fan.A * rr * 0.01125 * cos(sv);\n        const sn = sin(th), cs = cos(th);\n        h += A * sn;\n        const gr = dA * sn + A * cs * 0.025, ga = (A * cs * FAN) / r2;\n        gx += (gr * dx) / r + ga * dy;\n        gy += (gr * dy) / r - ga * dx;\n      }\n      for (let j = 1; j \u003c na; j++) {\n        const f = act[j];\n        const a = qx * f.tx + qy * f.ty, s = qx * f.nx + qy * f.ny + f.c * a * a;\n        const th = f.k * s - f.phase;\n        let v, dv;\n        if (f.press) {\n          // sqrt(sin^2 + e^2): round crests, sharp valleys.\n          const sn = sin(th), cs = cos(th), r = sqrt(sn * sn + 0.04);\n          v = f.A * (r - 0.6);\n          dv = (f.A * f.k * sn * cs) / r;\n        } else {\n          v = f.A * sin(th);\n          dv = f.A * f.k * cos(th);\n        }\n        h += v;\n        const ex = f.nx + 2 * f.c * a * f.tx, ey = f.ny + 2 * f.c * a * f.ty;\n        gx += dv * ex;\n        gy += dv * ey;\n      }\n      if (gA > 0) {\n        const e = (qy - gy0 - 0.006 * qx * qx) / 12, b = gA * exp(-e * e), d = (-2 * e * b) / 12;\n        h += b;\n        gx += d * -0.012 * qx;\n        gy += d;\n      }\n      // Back from the cloth's coordinates to the panel's.\n      const hx = gx + gy * dydx, hy = gx * dxdy + gy;\n      // Normal and the fibre's tangent on the surface.\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), Nx = -hx * nl, Ny = -hy * nl, Nz = nl;\n      let Tx = FX, Ty = FY, Tz = FX * hx + FY * hy;\n      const tl = 1 / sqrt(Tx * Tx + Ty * Ty + Tz * Tz);\n      (Tx *= tl), (Ty *= tl), (Tz *= tl);\n      const NL = Nx * LX + Ny * LY + Nz * LZ;\n      const dif = cl((NL + 0.45) / 1.45, 0, 1);\n      // Ward-like lobe: narrow along the fibre, broad across it.\n      const TH = Tx * HX + Ty * HY + Tz * HZ;\n      const Bx = Ny * Tz - Nz * Ty, By = Nz * Tx - Nx * Tz, Bz = Nx * Ty - Ny * Tx;\n      const BH = Bx * HX + By * HY + Bz * HZ;\n      const spec = 0.45 * exp(-(TH * TH) / 0.012 - (BH * BH) / 0.35) + 0.5 * exp(-(TH * TH) / 0.06 - (BH * BH) / 0.6);\n      // The hollows get less of the light, and less of the sheen.\n      const ao = sm(-0.9 * tot, 0.6 * tot, h);\n      const shade = cl(0.05 + 0.7 * dif * (0.4 + 0.6 * ao) + 0.5 * spec * (0.25 + 0.75 * ao), 0, 1);\n      const o = ((shade * (RAMP - 1)) | 0) * 3;\n      let r = lut[o], gg = lut[o + 1], b = lut[o + 2];\n      if (gAlpha > 0) {\n        const al = qx * GX + qy * GY;\n        const vv = qx * MX + qy * MY + 0.0018 * al * al - 4 + lean * h;\n        const ggx = MX + 0.0036 * al * GX, ggy = MY + 0.0036 * al * GY;\n        const vx = ggx + ggy * dydx + lean * hx, vy = ggx * dxdy + ggy + lean * hy;\n        // Where a fold turns the line back on itself it passes behind the\n        // fold, so it fades out there instead of spreading into a blot.\n        const gl = sqrt(vx * vx + vy * vy), sd = vv / Math.max(0.3, gl), dist = Math.abs(sd), seen = gAlpha * sm(0.3, 0.7, gl);\n        // The line stands a little off the cloth and shades it on the side\n        // away from the light.\n        if (sd \u003c 0) {\n          const sh = 1 - 0.3 * seen * sm(hw + 0.5 + sw, hw - 0.5, dist);\n          (r *= sh), (gg *= sh), (b *= sh);\n        }\n        const cov = cl(hw + 0.5 - dist, 0, 1) * seen;\n        if (cov > 0) {\n          const NH = Nx * HX + Ny * HY + Nz * HZ;\n          const gs = NH > 0.95 ? ((NH - 0.95) / 0.05) ** 4 : 0;\n          const tw = 0.5 + 0.5 * sin(al * gf - gT * 2.2);\n          const glint = tw ** 24 + gs;\n          const lit = 0.62 + 0.38 * dif, gw = cl(glint, 0, 1);\n          const gr = 252 * lit + (255 - 252 * lit) * gw, ggr = 184 * lit + (246 - 184 * lit) * gw, gb = 58 * lit + (205 - 58 * lit) * gw;\n          r += (gr - r) * cov;\n          gg += (ggr - gg) * cov;\n          b += (gb - b) * cov;\n        }\n      }\n      display.setPixel(x, y, r, gg, b);\n    }\n  }\n}\n","layer":{"id":"layer-satin-fold","type":"code","name":"satin-fold","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Satin Fold\n// Family:  cosmetic\n// Idea:    A pale sheet of satin hangs in folds from a point above the panel and sways under a light from the left; its fibres run across the folds, so the sheen lies in long streaks along them, and one thin gold line crosses the cloth and bends over every fold it meets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after satin weave sheen and gold-foil packaging; the sheen is a fibre highlight (James Kajiya and Timothy Kay, 1989) with an anisotropic lobe (Gregory Ward, 1992)\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1\n//\n// Knob 1: Hue. The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac.\n// Knob 2: Speed. How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half.\n// Knob 3: Folds. One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5.\n// Knob 4: Gold. The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon.\n// Buttons: K1 tap sends a gust under the cloth: a bowed swell 5.5 LEDs high runs up the sheet from below the bottom edge to past the top in 2.5 seconds.\n\nconst W = 64, H = 128;\nconst { sin, cos, sqrt, exp, floor, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The first fold family is a fan: the cloth is held at a point 160 LEDs\n// above the panel's middle and a little left, and 22 folds a radian hang from\n// it, tight at the top of the panel and wide at the bottom.\nconst PX = -14, PY = -160, FAN = 22, FAN_A = 6.5, RC = 160;\n// The others are straight waves: crest angle in degrees, wavelength in LEDs,\n// height in LEDs, bend of the crest, travel in radians a second at Speed 1,\n// swell phase. The last is pressed: its profile has sharp valleys. The first\n// row stands for the fan, which reads only its travel and phase from it.\nconst FOLDS = [\n  [0, 1, 0, 0, 0.42, 0.0],\n  [58, 46, 4.2, -0.004, -0.33, 2.1],\n  [100, 30, 2.6, 0.007, 0.55, 4.0],\n  [128, 24, 1.8, -0.008, -0.71, 1.2],\n  [76, 28, 1.4, 0.004, 0.62, 3.3],\n].map(([ang, lam, A, c, w, ph]) => {\n  const a = (ang * PI) / 180;\n  return { tx: cos(a), ty: sin(a), nx: -sin(a), ny: cos(a), k: (2 * PI) / lam, A, c, w, ph };\n});\n\n// Light from the left, a little above and in front; the eye straight on.\n// y runs down.\nconst norm3 = (x, y, z) => {\n  const l = sqrt(x * x + y * y + z * z);\n  return [x / l, y / l, z / l];\n};\nconst [LX, LY, LZ] = norm3(-0.6, -0.35, 0.72);\nconst [HX, HY, HZ] = norm3(LX, LY, LZ + 1);\n// The floats of the satin weave run nearly across the panel, rising a little\n// to the right, so they cross the hanging folds and catch the light only\n// where they tilt square to the half vector.\nconst FX = 0.985, FY = -0.17;\n// The gold line in the cloth's own coordinates: through the middle, going\n// down to the right, bowed a little.\nconst [GX, GY] = (() => {\n  const l = Math.hypot(0.42, 1);\n  return [0.42 / l, 1 / l];\n})();\nconst MX = -GY, MY = GX;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// The satin's ramp from the deepest hollow (0) to the brightest sheen (1):\n// the hue deep and saturated in the hollows, pale over the body, near white\n// in the streaks.\nconst RAMP = 256;\nfunction ramp(P) {\n  const hue = P.hue + 0.975;\n  for (let i = 0; i \u003c RAMP; i++) {\n    const s = i / (RAMP - 1);\n    let sat, val;\n    if (s \u003c 0.5) {\n      const u = s / 0.5;\n      sat = 0.46 + (0.18 - 0.46) * u;\n      val = 0.5 + (0.8 - 0.5) * u;\n    } else {\n      const u = (s - 0.5) / 0.5;\n      sat = 0.18 + (0.04 - 0.18) * u;\n      val = 0.8 + (0.97 - 0.8) * u;\n    }\n    hsv(hue - 0.015 * (1 - s), sat, val, P.lut, i * 3);\n  }\n  P.lutHue = P.hue;\n}\n\nexport function setup(params) {\n  params.s = {\n    t: 0, clock: 0, hue: 0, speed: 2, folds: 1, gold: 0.06, gust: -1,\n    lut: new Float32Array(RAMP * 3), lutHue: NaN, cw: new Float32Array(W), cd: new Float32Array(W),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 1, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.folds = cl(k[2], 1, 5);\n  P.gold = cl(k[3], 0, 1);\n  P.t += d * P.speed;\n  P.clock += d;\n  if (P.gust >= 0) {\n    P.gust += d / 2.5;\n    if (P.gust >= 1) P.gust = -1;\n  } else if (input.btnPressed && input.btnPressed[0]) P.gust = 0;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  if (P.lutHue !== P.hue) ramp(P);\n  const T = P.t, F = P.folds, lut = P.lut;\n  // Each family fades in over one step of Folds, and the whole cloth gets\n  // deeper as it does.\n  const depth = 0.75 + 0.18 * (F - 1);\n  const act = [];\n  for (let i = 0; i \u003c FOLDS.length; i++) {\n    const f = FOLDS[i], wgt = sm(0, 1, F - i);\n    if (wgt \u003c= 0) continue;\n    const swell = 0.72 + 0.28 * sin(0.37 * T + f.ph);\n    act.push({ ...f, A: (i ? f.A * swell : FAN_A) * wgt * depth, phase: f.w * T + f.ph, press: i === 4 });\n  }\n  const na = act.length, fan = act[0];\n  let tot = 0;\n  for (const f of act) tot += f.A;\n  // The gust: one ridge across the sheet that runs from the bottom up.\n  let gA = 0, gy0 = 0;\n  if (P.gust >= 0) {\n    gA = 5.5 * sin(PI * P.gust);\n    gy0 = 80 - 190 * P.gust;\n  }\n  const wa = 3.2;\n  // The panel sees the cloth a little from below, so a line on it shifts\n  // with the height of the cloth under it: 0.65 LED a LED of height at one\n  // fold family, less on the deep drapes.\n  const lean = 0.65 / (1 + 0.15 * (F - 1));\n  const g = P.gold, gAlpha = sm(0, 0.04, g), hw = 0.6 + 6 * g, sw = 1 + 2.5 * g;\n  const gf = 0.11 + 0.11 * g, gT = P.clock * (0.6 + 0.4 * P.speed);\n  // The warp's sideways part, one value a column.\n  const CW = P.cw, CD = P.cd;\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - 31.5) * 0.07 - T * 0.17 + 1.3;\n    CW[x] = wa * sin(u);\n    CD[x] = wa * 0.07 * cos(u);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const py = y - 63.5;\n    const s1 = sin(py * 0.045 + T * 0.23), c1 = cos(py * 0.045 + T * 0.23);\n    const dxdy = wa * 0.045 * c1;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - 31.5;\n      const dydx = CD[x];\n      const qx = px + wa * s1, qy = py + CW[x];\n      let h = 0, gx = 0, gy = 0;\n      {\n        // The fan: the fold phase goes with the angle round the point it\n        // hangs from, and leans with the distance. Its height grows as the\n        // square root of the distance, and a swell runs down it.\n        const dx = qx - PX, dy = qy - PY, r2 = dx * dx + dy * dy, r = sqrt(r2);\n        const th = FAN * Math.atan2(dx, dy) + 0.025 * r - fan.phase;\n        const sv = 0.045 * r - 0.5 * T, ms = 0.75 + 0.25 * sin(sv), rr = sqrt(r / RC);\n        const A = fan.A * rr * ms, dA = A / (2 * r) + fan.A * rr * 0.01125 * cos(sv);\n        const sn = sin(th), cs = cos(th);\n        h += A * sn;\n        const gr = dA * sn + A * cs * 0.025, ga = (A * cs * FAN) / r2;\n        gx += (gr * dx) / r + ga * dy;\n        gy += (gr * dy) / r - ga * dx;\n      }\n      for (let j = 1; j \u003c na; j++) {\n        const f = act[j];\n        const a = qx * f.tx + qy * f.ty, s = qx * f.nx + qy * f.ny + f.c * a * a;\n        const th = f.k * s - f.phase;\n        let v, dv;\n        if (f.press) {\n          // sqrt(sin^2 + e^2): round crests, sharp valleys.\n          const sn = sin(th), cs = cos(th), r = sqrt(sn * sn + 0.04);\n          v = f.A * (r - 0.6);\n          dv = (f.A * f.k * sn * cs) / r;\n        } else {\n          v = f.A * sin(th);\n          dv = f.A * f.k * cos(th);\n        }\n        h += v;\n        const ex = f.nx + 2 * f.c * a * f.tx, ey = f.ny + 2 * f.c * a * f.ty;\n        gx += dv * ex;\n        gy += dv * ey;\n      }\n      if (gA > 0) {\n        const e = (qy - gy0 - 0.006 * qx * qx) / 12, b = gA * exp(-e * e), d = (-2 * e * b) / 12;\n        h += b;\n        gx += d * -0.012 * qx;\n        gy += d;\n      }\n      // Back from the cloth's coordinates to the panel's.\n      const hx = gx + gy * dydx, hy = gx * dxdy + gy;\n      // Normal and the fibre's tangent on the surface.\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), Nx = -hx * nl, Ny = -hy * nl, Nz = nl;\n      let Tx = FX, Ty = FY, Tz = FX * hx + FY * hy;\n      const tl = 1 / sqrt(Tx * Tx + Ty * Ty + Tz * Tz);\n      (Tx *= tl), (Ty *= tl), (Tz *= tl);\n      const NL = Nx * LX + Ny * LY + Nz * LZ;\n      const dif = cl((NL + 0.45) / 1.45, 0, 1);\n      // Ward-like lobe: narrow along the fibre, broad across it.\n      const TH = Tx * HX + Ty * HY + Tz * HZ;\n      const Bx = Ny * Tz - Nz * Ty, By = Nz * Tx - Nx * Tz, Bz = Nx * Ty - Ny * Tx;\n      const BH = Bx * HX + By * HY + Bz * HZ;\n      const spec = 0.45 * exp(-(TH * TH) / 0.012 - (BH * BH) / 0.35) + 0.5 * exp(-(TH * TH) / 0.06 - (BH * BH) / 0.6);\n      // The hollows get less of the light, and less of the sheen.\n      const ao = sm(-0.9 * tot, 0.6 * tot, h);\n      const shade = cl(0.05 + 0.7 * dif * (0.4 + 0.6 * ao) + 0.5 * spec * (0.25 + 0.75 * ao), 0, 1);\n      const o = ((shade * (RAMP - 1)) | 0) * 3;\n      let r = lut[o], gg = lut[o + 1], b = lut[o + 2];\n      if (gAlpha > 0) {\n        const al = qx * GX + qy * GY;\n        const vv = qx * MX + qy * MY + 0.0018 * al * al - 4 + lean * h;\n        const ggx = MX + 0.0036 * al * GX, ggy = MY + 0.0036 * al * GY;\n        const vx = ggx + ggy * dydx + lean * hx, vy = ggx * dxdy + ggy + lean * hy;\n        // Where a fold turns the line back on itself it passes behind the\n        // fold, so it fades out there instead of spreading into a blot.\n        const gl = sqrt(vx * vx + vy * vy), sd = vv / Math.max(0.3, gl), dist = Math.abs(sd), seen = gAlpha * sm(0.3, 0.7, gl);\n        // The line stands a little off the cloth and shades it on the side\n        // away from the light.\n        if (sd \u003c 0) {\n          const sh = 1 - 0.3 * seen * sm(hw + 0.5 + sw, hw - 0.5, dist);\n          (r *= sh), (gg *= sh), (b *= sh);\n        }\n        const cov = cl(hw + 0.5 - dist, 0, 1) * seen;\n        if (cov > 0) {\n          const NH = Nx * HX + Ny * HY + Nz * HZ;\n          const gs = NH > 0.95 ? ((NH - 0.95) / 0.05) ** 4 : 0;\n          const tw = 0.5 + 0.5 * sin(al * gf - gT * 2.2);\n          const glint = tw ** 24 + gs;\n          const lit = 0.62 + 0.38 * dif, gw = cl(glint, 0, 1);\n          const gr = 252 * lit + (255 - 252 * lit) * gw, ggr = 184 * lit + (246 - 184 * lit) * gw, gb = 58 * lit + (205 - 58 * lit) * gw;\n          r += (gr - r) * cov;\n          gg += (ggr - gg) * cov;\n          b += (gb - b) * cov;\n        }\n      }\n      display.setPixel(x, y, r, gg, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Folds=1..5, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the satin, once round the wheel, while the gold line stays gold. At 0 blush rose, at 0.1 nude champagne, at 0.25 pistachio, at 0.45 mint, at 0.6 powder blue and at 0.8 lilac."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the folds sway. At 2 they cross the middle of the panel at about 6 LEDs a second and the glints run 26 LEDs a second along the gold line; at 0.2 the folds go a tenth as fast and the glints half."},{"name":"Folds","min":1,"max":5,"about":"One fold family more at each whole step, fading in over the step before. At 1 only the fan hanging from a point 160 LEDs above the panel's middle, 22 folds to the radian; 2 adds a diagonal drape 46 LEDs across, 3 and 4 two narrower ones at other angles, and 5 a pressed fold with sharp creases. The cloth also gets deeper, from 0.75 of the folds' base height at 1 to 1.47 at 5."},{"name":"Gold","min":0,"max":1,"about":"The gold line. At 0 there is none, at 0.06 a thread about 2 LEDs wide with a glint every 54 LEDs, at 1 a ribbon 13 LEDs wide with a glint every 29. It shades the cloth on its right, 1 LED wide at the thread and 3.5 at the ribbon."}],"start":[0,2,1,0.06],"measures":{"motion":0.094,"detail":0.0124,"edges":0.0787,"complexity":1.2735,"coverage":1,"colour":0.1403,"drift":0.1604},"knobResponse":[0.1121,0.2232,0.0933,0.0521]},{"slug":"scheidegger-rivers","title":"Scheidegger Rivers","family":"line","round":34,"note":"체크무늬로 놓인 LED 마다 물을 왼쪽 아래나 오른쪽 아래로 무작위로 보내는 샤이데거의 강 그물이에요. 모인 물의 로그로 밝혀서 위의 실개천이 아래로 갈수록 굵은 줄기로 합쳐지고, 바닥의 출구마다 다른 색으로 물든 강을 따라 빗방울이 흘러내리며, 가끔 한 자리가 방향을 바꾸면 큰 강이 옆 유역으로 넘어가 옛 물길이 마르고 새 물길이 줄마다 차올라요.","idea":"Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.","buttons":"K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.","code":"// ===== Patternflow pattern =====\n// Title:   Scheidegger Rivers\n// Family:  line\n// Idea:    Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Scheidegger's river network model (Adrian Scheidegger, 1967), pattern round 34; its rivers are coalescing random walks, whose scaling limit is the Brownian web (Balint Toth and Wendelin Werner, 1998)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1\n//\n// Knob 1: Hue. Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale.\n// Knob 2: Speed. At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it.\n// Knob 3: Bias. The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way.\n// Knob 4: Capture. How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn.\n// Buttons: K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.\n\nconst W = 64, H = 128, SW = W / 2, NS = SW * H;\nconst { floor, min, max, log, exp, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Site s sits in row y = s / 32 at x = 2 (s % 32) + (y & 1): the LEDs with\n// x + y even. Its two neighbours below are x - 1 and x + 1 in row y + 1,\n// wrapping round the sides.\nconst SX = new Int16Array(NS), SY = new Int16Array(NS);\nconst DL = new Int32Array(NS), DR = new Int32Array(NS), UL = new Int32Array(NS), UR = new Int32Array(NS);\nconst siteAt = (x, y) => y * SW + (((x % W) + W) % W >> 1);\nfor (let s = 0; s \u003c NS; s++) {\n  const y = floor(s / SW), x = 2 * (s % SW) + (y & 1);\n  SX[s] = x;\n  SY[s] = y;\n  DL[s] = y \u003c H - 1 ? siteAt(x - 1, y + 1) : -1;\n  DR[s] = y \u003c H - 1 ? siteAt(x + 1, y + 1) : -1;\n  UL[s] = y > 0 ? siteAt(x - 1, y - 1) : -1;\n  UR[s] = y > 0 ? siteAt(x + 1, y - 1) : -1;\n}\nconst FMAX = 1500, LFMAX = log(FMAX);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0, cap: 0.06, warm: false, sweep: 0, flipAcc: 0, bigAcc: 0, rainAcc: 0,\n    u: new Float32Array(NS), dn: new Int32Array(NS), F: new Float32Array(NS), Q: new Float32Array(NS),\n    out: new Int16Array(NS), prev: new Int16Array(NS), ov: new Int32Array(SW * SW), col: new Int8Array(SW).fill(-1),\n    col2: new Int8Array(SW), ho: new Float32Array(NS), cum: new Float64Array(NS),\n    drops: [], Lv: new Float32Array(W * H), Hu: new Float32Array(W * H), Sa: new Float32Array(W * H),\n    Wd: new Float32Array(W * H), Dr: new Float32Array(W * H), c: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let s = 0; s \u003c NS; s++) S.u[s] = random();\n}\n\n// Each site drains right when its own random number is under 0.5 + 0.48 Bias.\nfunction route(S) {\n  const p = 0.5 + 0.48 * S.bias;\n  for (let s = 0; s \u003c NS; s++) S.dn[s] = DL[s] \u003c 0 ? -1 : S.u[s] \u003c p ? DR[s] : DL[s];\n}\n\n// The exact flux, row by row from the top: 1 for the site itself plus all\n// that drains into it.\nfunction flux(S) {\n  const F = S.F, dn = S.dn;\n  F.fill(1);\n  for (let s = 0; s \u003c NS - SW; s++) F[dn[s]] += F[s];\n  // Which outlet in the bottom row each site reaches, from the bottom up.\n  for (let s = NS - 1; s >= 0; s--) S.out[s] = dn[s] \u003c 0 ? s - (NS - SW) : S.out[dn[s]];\n}\n\n// The water on show moves one row per sweep: a rerouted river drains and the\n// new one fills from the site that changed downwards.\nfunction sweep(S) {\n  const Q = S.Q, dn = S.dn;\n  for (let s = NS - 1; s >= SW; s--) {\n    let q = 1;\n    const a = UL[s], b = UR[s];\n    if (dn[a] === s) q += Q[a];\n    if (dn[b] === s) q += Q[b];\n    Q[s] = q;\n  }\n}\n\n// Basin colours. A basin draining at least AMIN sites through its outlet\n// holds one of four hue steps; after the network changes, each new basin\n// takes the colour of the old basin it shares most sites with, and a basin\n// with none to take gets the step farthest from those in use.\nconst STEPS = [-0.1, 0, 0.1, 0.2], AMIN = 120;\nfunction basins(S) {\n  const ov = S.ov, F = S.F, B = NS - SW;\n  ov.fill(0);\n  for (let s = 0; s \u003c NS; s++) ov[S.prev[s] * SW + S.out[s]]++;\n  const pairs = [];\n  for (let i = 0; i \u003c SW; i++)\n    if (S.col[i] >= 0) for (let j = 0; j \u003c SW; j++) if (F[B + j] >= AMIN && ov[i * SW + j] > 0) pairs.push([ov[i * SW + j], i, j]);\n  pairs.sort((a, b) => b[0] - a[0]);\n  const col = S.col2.fill(-1), taken = new Uint8Array(SW);\n  for (const [, i, j] of pairs)\n    if (!taken[i] && col[j] \u003c 0) {\n      taken[i] = 1;\n      col[j] = S.col[i];\n    }\n  for (let j = 0; j \u003c SW; j++)\n    if (F[B + j] >= AMIN && col[j] \u003c 0) {\n      let best = 0, far = -1;\n      for (let k = 0; k \u003c STEPS.length; k++) {\n        let near = 9;\n        for (let m = 0; m \u003c SW; m++) if (col[m] >= 0) near = min(near, Math.abs(STEPS[k] - STEPS[col[m]]));\n        if (near > far) (far = near), (best = k);\n      }\n      col[j] = best;\n    }\n  S.col.set(col);\n  S.prev.set(S.out);\n}\n\n// How many rows the two paths out of site s, one through each neighbour\n// below, run apart before they join (or reach the bottom).\nfunction apart(S, s) {\n  let a = DL[s], b = DR[s], n = 0;\n  while (a >= 0 && a !== b) {\n    a = S.dn[a];\n    b = S.dn[b];\n    n++;\n  }\n  return n;\n}\n\n// A capture: site s turns to its other neighbour, with the Metropolis chance\n// that keeps every site draining right with chance p in the long run.\nfunction flip(S, s) {\n  const p = 0.5 + 0.48 * S.bias, right = S.u[s] \u003c p;\n  const want = right ? 1 - p : p;\n  if (random() * max(p, 1 - p) > want) return false;\n  S.u[s] = right ? p + (1 - p) * random() : p * random();\n  S.dn[s] = right ? DL[s] : DR[s];\n  return true;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2;\n  route(S);\n  flux(S);\n  // Small captures land on any site; large ones on a site picked in\n  // proportion to the flux through it, among those whose other way down\n  // runs at least 10 rows apart from the river it leaves.\n  S.flipAcc += d * sp * 150 * S.cap;\n  S.bigAcc += d * sp * 20 * S.cap;\n  let changed = false;\n  while (S.flipAcc >= 1) {\n    S.flipAcc -= 1;\n    changed = flip(S, floor(random() * (NS - SW))) || changed;\n  }\n  if (S.bigAcc >= 1) {\n    const cum = S.cum;\n    let acc = 0;\n    for (let s = 0; s \u003c NS; s++) cum[s] = acc += S.F[s];\n    while (S.bigAcc >= 1) {\n      S.bigAcc -= 1;\n      for (let tries = 0; tries \u003c 8; tries++) {\n        const r = random() * acc;\n        let lo = 0, hi = NS - 1;\n        while (lo \u003c hi) {\n          const m = (lo + hi) >> 1;\n          if (cum[m] \u003c r) lo = m + 1;\n          else hi = m;\n        }\n        if (lo >= NS - SW || apart(S, lo) \u003c 10) continue;\n        changed = flip(S, lo) || changed;\n        break;\n      }\n    }\n  }\n  if (changed) flux(S);\n  S.sweep += d * sp * 40;\n  while (S.sweep >= 1) {\n    S.sweep -= 1;\n    sweep(S);\n  }\n  const k = 1 - exp(-d * sp * 3);\n  basins(S);\n  for (let s = 0; s \u003c NS; s++) {\n    const c = S.col[S.out[s]];\n    if (c >= 0) S.ho[s] += (STEPS[c] - S.ho[s]) * k;\n  }\n\n  // Rain: drops land on random sites and run down the rivers, two LED steps\n  // a row (across, then down).\n  S.rainAcc += d * sp * 14;\n  while (S.rainAcc >= 1) {\n    S.rainAcc -= 1;\n    addDrop(S, floor(random() * (NS - 8 * SW)));\n  }\n  const v = d * sp * 32;\n  const drops = S.drops;\n  for (let i = drops.length - 1; i >= 0; i--) {\n    const D = drops[i];\n    D.pos += v;\n    while (D.pos >= 1) {\n      D.pos -= 1;\n      if (D.mid \u003c 0) {\n        const t = S.dn[D.s];\n        if (t \u003c 0) {\n          D.gone = true;\n          break;\n        }\n        D.mid = SY[D.s] * W + SX[t];\n        D.s = t;\n        D.trail.unshift(D.mid);\n      } else {\n        D.mid = -1;\n        D.trail.unshift(SY[D.s] * W + SX[D.s]);\n      }\n      if (D.trail.length > 8) D.trail.pop();\n    }\n    if (D.gone) drops.splice(i, 1);\n  }\n}\n\nfunction addDrop(S, s) {\n  S.drops.push({ s, mid: -1, pos: random(), trail: [SY[s] * W + SX[s]], gone: false });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], -1, 1);\n  S.cap = cl(k[3], 0, 1);\n  if (!S.warm) {\n    route(S);\n    flux(S);\n    S.Q.set(S.F);\n    S.prev.set(S.out);\n    basins(S);\n    for (let s = 0; s \u003c NS; s++) S.ho[s] = S.col[S.out[s]] >= 0 ? STEPS[S.col[S.out[s]]] : 0;\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let i = 0; i \u003c 260; i++) addDrop(S, floor(random() * 24 * SW));\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { Lv, Hu, Sa, Wd, Dr, Q } = S;\n  Lv.fill(0);\n  Wd.fill(0);\n  Dr.fill(0);\n  // Each site lights its own LED and the LED beside it on the side it drains\n  // to, which is the LED above the site it drains into: a river is a stair of\n  // LEDs, across then down, and two streams meeting make a T.\n  for (let s = 0; s \u003c NS; s++) {\n    const g = cl(log(Q[s]) / LFMAX, 0, 1), L = 30 + 225 * g ** 1.35;\n    const p = SY[s] * W + SX[s], h = S.hue + 0.52 + S.ho[s], sat = 0.85 - 0.45 * g;\n    const wd = 1 + 1.8 * cl((log(Q[s]) - log(30)) / (LFMAX - log(30)), 0, 1);\n    if (L > Lv[p]) (Lv[p] = L), (Hu[p] = h), (Sa[p] = sat), (Wd[p] = wd);\n    const t = S.dn[s];\n    if (t >= 0) {\n      const m = SY[s] * W + SX[t];\n      if (L > Lv[m]) (Lv[m] = L), (Hu[m] = h), (Sa[m] = sat), (Wd[m] = wd);\n    }\n  }\n  for (const D of S.drops)\n    D.trail.forEach((p, i) => {\n      Dr[p] = max(Dr[p], i \u003c 2 ? 1 : 0.85 ** (i - 1));\n    });\n  const out = S.c;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let L = Lv[p], h = Hu[p], sa = Sa[p];\n      // Wide rivers spill onto the LEDs beside them.\n      for (const dx of [-2, -1, 1, 2]) {\n        const q = y * W + ((x + dx + W) % W), w = Wd[q] - Math.abs(dx);\n        if (w > 0) {\n          const v = Lv[q] * min(1, w) * (Math.abs(dx) === 1 ? 0.8 : 0.55);\n          if (v > L) (L = v), (h = Hu[q]), (sa = Sa[q]);\n        }\n      }\n      const dr = Dr[p];\n      if (dr > 0) {\n        L = L + (255 - L) * dr;\n        sa *= 1 - 0.85 * dr;\n      }\n      hsv(h, sa, 1, out);\n      display.setPixel(x, y, round(out[0] * L), round(out[1] * L), round(out[2] * L));\n    }\n}\n","layer":{"id":"layer-scheidegger-rivers","type":"code","name":"scheidegger-rivers","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Scheidegger Rivers\n// Family:  line\n// Idea:    Scheidegger's random river network on the checkerboard of LEDs, every site draining to the LED down-left or down-right of it, each stream lit by the log of the water through it and coloured by the outlet it reaches, so brooks at the top merge into trunks that thicken down the panel; raindrops run down the rivers, and every so often a site turns the other way and a river is captured, its old bed draining and its new one filling row by row.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Scheidegger's river network model (Adrian Scheidegger, 1967), pattern round 34; its rivers are coalescing random walks, whose scaling limit is the Brownian web (Balint Toth and Wendelin Werner, 1998)\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1\n//\n// Knob 1: Hue. Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale.\n// Knob 2: Speed. At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it.\n// Knob 3: Bias. The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way.\n// Knob 4: Capture. How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn.\n// Buttons: K1 tap is a burst of rain: 260 drops land on the top 24 rows at once and run together down the network, tracing the tree into its trunks.\n\nconst W = 64, H = 128, SW = W / 2, NS = SW * H;\nconst { floor, min, max, log, exp, round, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Site s sits in row y = s / 32 at x = 2 (s % 32) + (y & 1): the LEDs with\n// x + y even. Its two neighbours below are x - 1 and x + 1 in row y + 1,\n// wrapping round the sides.\nconst SX = new Int16Array(NS), SY = new Int16Array(NS);\nconst DL = new Int32Array(NS), DR = new Int32Array(NS), UL = new Int32Array(NS), UR = new Int32Array(NS);\nconst siteAt = (x, y) => y * SW + (((x % W) + W) % W >> 1);\nfor (let s = 0; s \u003c NS; s++) {\n  const y = floor(s / SW), x = 2 * (s % SW) + (y & 1);\n  SX[s] = x;\n  SY[s] = y;\n  DL[s] = y \u003c H - 1 ? siteAt(x - 1, y + 1) : -1;\n  DR[s] = y \u003c H - 1 ? siteAt(x + 1, y + 1) : -1;\n  UL[s] = y > 0 ? siteAt(x - 1, y - 1) : -1;\n  UR[s] = y > 0 ? siteAt(x + 1, y - 1) : -1;\n}\nconst FMAX = 1500, LFMAX = log(FMAX);\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, bias: 0, cap: 0.06, warm: false, sweep: 0, flipAcc: 0, bigAcc: 0, rainAcc: 0,\n    u: new Float32Array(NS), dn: new Int32Array(NS), F: new Float32Array(NS), Q: new Float32Array(NS),\n    out: new Int16Array(NS), prev: new Int16Array(NS), ov: new Int32Array(SW * SW), col: new Int8Array(SW).fill(-1),\n    col2: new Int8Array(SW), ho: new Float32Array(NS), cum: new Float64Array(NS),\n    drops: [], Lv: new Float32Array(W * H), Hu: new Float32Array(W * H), Sa: new Float32Array(W * H),\n    Wd: new Float32Array(W * H), Dr: new Float32Array(W * H), c: [0, 0, 0],\n  };\n  const S = params.s;\n  for (let s = 0; s \u003c NS; s++) S.u[s] = random();\n}\n\n// Each site drains right when its own random number is under 0.5 + 0.48 Bias.\nfunction route(S) {\n  const p = 0.5 + 0.48 * S.bias;\n  for (let s = 0; s \u003c NS; s++) S.dn[s] = DL[s] \u003c 0 ? -1 : S.u[s] \u003c p ? DR[s] : DL[s];\n}\n\n// The exact flux, row by row from the top: 1 for the site itself plus all\n// that drains into it.\nfunction flux(S) {\n  const F = S.F, dn = S.dn;\n  F.fill(1);\n  for (let s = 0; s \u003c NS - SW; s++) F[dn[s]] += F[s];\n  // Which outlet in the bottom row each site reaches, from the bottom up.\n  for (let s = NS - 1; s >= 0; s--) S.out[s] = dn[s] \u003c 0 ? s - (NS - SW) : S.out[dn[s]];\n}\n\n// The water on show moves one row per sweep: a rerouted river drains and the\n// new one fills from the site that changed downwards.\nfunction sweep(S) {\n  const Q = S.Q, dn = S.dn;\n  for (let s = NS - 1; s >= SW; s--) {\n    let q = 1;\n    const a = UL[s], b = UR[s];\n    if (dn[a] === s) q += Q[a];\n    if (dn[b] === s) q += Q[b];\n    Q[s] = q;\n  }\n}\n\n// Basin colours. A basin draining at least AMIN sites through its outlet\n// holds one of four hue steps; after the network changes, each new basin\n// takes the colour of the old basin it shares most sites with, and a basin\n// with none to take gets the step farthest from those in use.\nconst STEPS = [-0.1, 0, 0.1, 0.2], AMIN = 120;\nfunction basins(S) {\n  const ov = S.ov, F = S.F, B = NS - SW;\n  ov.fill(0);\n  for (let s = 0; s \u003c NS; s++) ov[S.prev[s] * SW + S.out[s]]++;\n  const pairs = [];\n  for (let i = 0; i \u003c SW; i++)\n    if (S.col[i] >= 0) for (let j = 0; j \u003c SW; j++) if (F[B + j] >= AMIN && ov[i * SW + j] > 0) pairs.push([ov[i * SW + j], i, j]);\n  pairs.sort((a, b) => b[0] - a[0]);\n  const col = S.col2.fill(-1), taken = new Uint8Array(SW);\n  for (const [, i, j] of pairs)\n    if (!taken[i] && col[j] \u003c 0) {\n      taken[i] = 1;\n      col[j] = S.col[i];\n    }\n  for (let j = 0; j \u003c SW; j++)\n    if (F[B + j] >= AMIN && col[j] \u003c 0) {\n      let best = 0, far = -1;\n      for (let k = 0; k \u003c STEPS.length; k++) {\n        let near = 9;\n        for (let m = 0; m \u003c SW; m++) if (col[m] >= 0) near = min(near, Math.abs(STEPS[k] - STEPS[col[m]]));\n        if (near > far) (far = near), (best = k);\n      }\n      col[j] = best;\n    }\n  S.col.set(col);\n  S.prev.set(S.out);\n}\n\n// How many rows the two paths out of site s, one through each neighbour\n// below, run apart before they join (or reach the bottom).\nfunction apart(S, s) {\n  let a = DL[s], b = DR[s], n = 0;\n  while (a >= 0 && a !== b) {\n    a = S.dn[a];\n    b = S.dn[b];\n    n++;\n  }\n  return n;\n}\n\n// A capture: site s turns to its other neighbour, with the Metropolis chance\n// that keeps every site draining right with chance p in the long run.\nfunction flip(S, s) {\n  const p = 0.5 + 0.48 * S.bias, right = S.u[s] \u003c p;\n  const want = right ? 1 - p : p;\n  if (random() * max(p, 1 - p) > want) return false;\n  S.u[s] = right ? p + (1 - p) * random() : p * random();\n  S.dn[s] = right ? DL[s] : DR[s];\n  return true;\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2;\n  route(S);\n  flux(S);\n  // Small captures land on any site; large ones on a site picked in\n  // proportion to the flux through it, among those whose other way down\n  // runs at least 10 rows apart from the river it leaves.\n  S.flipAcc += d * sp * 150 * S.cap;\n  S.bigAcc += d * sp * 20 * S.cap;\n  let changed = false;\n  while (S.flipAcc >= 1) {\n    S.flipAcc -= 1;\n    changed = flip(S, floor(random() * (NS - SW))) || changed;\n  }\n  if (S.bigAcc >= 1) {\n    const cum = S.cum;\n    let acc = 0;\n    for (let s = 0; s \u003c NS; s++) cum[s] = acc += S.F[s];\n    while (S.bigAcc >= 1) {\n      S.bigAcc -= 1;\n      for (let tries = 0; tries \u003c 8; tries++) {\n        const r = random() * acc;\n        let lo = 0, hi = NS - 1;\n        while (lo \u003c hi) {\n          const m = (lo + hi) >> 1;\n          if (cum[m] \u003c r) lo = m + 1;\n          else hi = m;\n        }\n        if (lo >= NS - SW || apart(S, lo) \u003c 10) continue;\n        changed = flip(S, lo) || changed;\n        break;\n      }\n    }\n  }\n  if (changed) flux(S);\n  S.sweep += d * sp * 40;\n  while (S.sweep >= 1) {\n    S.sweep -= 1;\n    sweep(S);\n  }\n  const k = 1 - exp(-d * sp * 3);\n  basins(S);\n  for (let s = 0; s \u003c NS; s++) {\n    const c = S.col[S.out[s]];\n    if (c >= 0) S.ho[s] += (STEPS[c] - S.ho[s]) * k;\n  }\n\n  // Rain: drops land on random sites and run down the rivers, two LED steps\n  // a row (across, then down).\n  S.rainAcc += d * sp * 14;\n  while (S.rainAcc >= 1) {\n    S.rainAcc -= 1;\n    addDrop(S, floor(random() * (NS - 8 * SW)));\n  }\n  const v = d * sp * 32;\n  const drops = S.drops;\n  for (let i = drops.length - 1; i >= 0; i--) {\n    const D = drops[i];\n    D.pos += v;\n    while (D.pos >= 1) {\n      D.pos -= 1;\n      if (D.mid \u003c 0) {\n        const t = S.dn[D.s];\n        if (t \u003c 0) {\n          D.gone = true;\n          break;\n        }\n        D.mid = SY[D.s] * W + SX[t];\n        D.s = t;\n        D.trail.unshift(D.mid);\n      } else {\n        D.mid = -1;\n        D.trail.unshift(SY[D.s] * W + SX[D.s]);\n      }\n      if (D.trail.length > 8) D.trail.pop();\n    }\n    if (D.gone) drops.splice(i, 1);\n  }\n}\n\nfunction addDrop(S, s) {\n  S.drops.push({ s, mid: -1, pos: random(), trail: [SY[s] * W + SX[s]], gone: false });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.bias = cl(k[2], -1, 1);\n  S.cap = cl(k[3], 0, 1);\n  if (!S.warm) {\n    route(S);\n    flux(S);\n    S.Q.set(S.F);\n    S.prev.set(S.out);\n    basins(S);\n    for (let s = 0; s \u003c NS; s++) S.ho[s] = S.col[S.out[s]] >= 0 ? STEPS[S.col[S.out[s]]] : 0;\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 120; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) for (let i = 0; i \u003c 260; i++) addDrop(S, floor(random() * 24 * SW));\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { Lv, Hu, Sa, Wd, Dr, Q } = S;\n  Lv.fill(0);\n  Wd.fill(0);\n  Dr.fill(0);\n  // Each site lights its own LED and the LED beside it on the side it drains\n  // to, which is the LED above the site it drains into: a river is a stair of\n  // LEDs, across then down, and two streams meeting make a T.\n  for (let s = 0; s \u003c NS; s++) {\n    const g = cl(log(Q[s]) / LFMAX, 0, 1), L = 30 + 225 * g ** 1.35;\n    const p = SY[s] * W + SX[s], h = S.hue + 0.52 + S.ho[s], sat = 0.85 - 0.45 * g;\n    const wd = 1 + 1.8 * cl((log(Q[s]) - log(30)) / (LFMAX - log(30)), 0, 1);\n    if (L > Lv[p]) (Lv[p] = L), (Hu[p] = h), (Sa[p] = sat), (Wd[p] = wd);\n    const t = S.dn[s];\n    if (t >= 0) {\n      const m = SY[s] * W + SX[t];\n      if (L > Lv[m]) (Lv[m] = L), (Hu[m] = h), (Sa[m] = sat), (Wd[m] = wd);\n    }\n  }\n  for (const D of S.drops)\n    D.trail.forEach((p, i) => {\n      Dr[p] = max(Dr[p], i \u003c 2 ? 1 : 0.85 ** (i - 1));\n    });\n  const out = S.c;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let L = Lv[p], h = Hu[p], sa = Sa[p];\n      // Wide rivers spill onto the LEDs beside them.\n      for (const dx of [-2, -1, 1, 2]) {\n        const q = y * W + ((x + dx + W) % W), w = Wd[q] - Math.abs(dx);\n        if (w > 0) {\n          const v = Lv[q] * min(1, w) * (Math.abs(dx) === 1 ? 0.8 : 0.55);\n          if (v > L) (L = v), (h = Hu[q]), (sa = Sa[q]);\n        }\n      }\n      const dr = Dr[p];\n      if (dr > 0) {\n        L = L + (255 - L) * dr;\n        sa *= 1 - 0.85 * dr;\n      }\n      hsv(h, sa, 1, out);\n      display.setPixel(x, y, round(out[0] * L), round(out[1] * L), round(out[2] * L));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bias=-1..1, Capture=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rivers round the wheel. Each large basin holds one of four hues 0.1 apart: at 0 green, cyan, blue and violet, at 0.25 blue-violet to rose, at 0.5 pink, red, orange and amber, at 0.75 yellow to teal. Brooks are saturated and the big trunks go pale."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 raindrops run 16 rows a second (a drop from the top reaches the bottom in 8 s), 14 land each second, and a rerouted river drains and refills 40 rows a second; at 0.2 all of it a tenth as fast, at 3 one and a half times. Captures come in step with it."},{"name":"Bias","min":-1,"max":1,"about":"The chance a site drains down-right, 0.5 + 0.48 x Bias. At 0 even, and the trunks wander straight down; at 0.5 it is 0.74 and every river leans right; at -1 or 1 it is 0.02 or 0.98, so the rivers are straight diagonals that merge only where one site in 50 turns the other way."},{"name":"Capture","min":0,"max":1,"about":"How often sites change their way down. At 0.06 and Speed 2, 9 sites a second at random and 1.2 a second on large rivers, picked by the flux through them where the other way runs at least 10 rows apart; at 0 the network holds still, at 1 150 and 20 a second and the basins churn."}],"start":[0,2,0,0.06],"measures":{"motion":0.094,"detail":0.1271,"edges":0.515,"complexity":1.5978,"coverage":0.922,"colour":0.2023,"drift":0.0432},"knobResponse":[0.1672,0.0593,0.2285,0.1968]},{"slug":"schwarz-lantern","title":"Schwarz Lantern","family":"geometry","round":36,"note":"꼭짓점이 모두 원기둥 위에 있는 삼각형 랜턴이 패널 높이만큼 서서 돌고, 띠가 3개에서 40개로 늘었다 줄어요. 접힐수록 아코디언처럼 반짝이고, 왼쪽 막대가 넓이를 원기둥의 1.88배까지 올려요. K3 은 한 고리의 꼭짓점 수를 5에서 12로 바꿔 같은 띠 40개를 매끈한 기둥으로 남기고, K1 을 누르면 단번에 가장 구겨진 꼴로 접혔다가 천천히 풀려요.","idea":"A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.","buttons":"K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.","code":"// ===== Patternflow pattern =====\n// Title:   Schwarz Lantern\n// Family:  geometry\n// Idea:    A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schwarz lantern (Hermann Schwarz, 1880), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1\n//\n// Knob 1: Hue. The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round.\n// Knob 2: Speed. At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long.\n// Knob 3: Sides. Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves.\n// Knob 4: Light. The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep.\n// Buttons: K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.\n\nconst W = 64, H = 128, SS = 2, SW = W * SS, SH = H * SS, SN = SW * SH;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, log, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The cylinder: radius R and height HC in LEDs, its axis at column CX, seen\n// from EL radians above. The bands run from MMIN to MMAX.\nconst R = 26, HC = 114, CX = 34.5, EL = 0.2, MMIN = 3, MMAX = 40, NMAX = 12;\n// The gauge: the lantern's area over the cylinder's, a bar up from row G0 at\n// the left edge, GPX LEDs to the unit, with a mark at 1.\nconst G0 = 125, GPX = 44;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const V = (MMAX + 2) * NMAX;\n  params.s = {\n    hue: 0, speed: 2, n: 5, light: 0.06, spin: 0, sweep: 2.2, snap: -1, mu: MMIN, area: 1,\n    ox: new Float32Array(V), oy: new Float32Array(V), oz: new Float32Array(V),\n    vx: new Float32Array(V), vy: new Float32Array(V), vz: new Float32Array(V),\n    zb: new Float32Array(SN), cr: new Float32Array(SN), cg: new Float32Array(SN), cb: new Float32Array(SN), col: new Float32Array(3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = Math.round(cl(k[2], 5, NMAX));\n  S.light = cl(k[3], 0, 1);\n  S.spin += d * S.speed * 0.12;\n  S.sweep += d * S.speed * 0.16;\n  if (S.snap >= 0) {\n    S.snap += d;\n    if (S.snap > 4.6) S.snap = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.snap = S.snap \u003c 0 ? 0 : min(S.snap, 0.6);\n  // The bands: MMIN to MMAX and back, evenly in log, lingering at both ends.\n  const u = 0.5 - 0.5 * cos(S.sweep);\n  let mu = exp(log(MMIN) + log(MMAX / MMIN) * u);\n  if (S.snap >= 0) {\n    const e = S.snap \u003c 0.6 ? sm(S.snap / 0.6) : 1 - sm((S.snap - 2.6) / 2);\n    mu = exp(log(mu) + (log(MMAX) - log(mu)) * e);\n  }\n  S.mu = mu;\n}\n\n// Rasterise one triangle into the supersampled buffers, flat coloured, row\n// by row: on each row every edge bounds the run of samples on one side.\nfunction tri(S, ax, ay, az, bx, by, bz, cx, cy, cz, r, g, b) {\n  const { zb, cr, cg, cb } = S;\n  const det = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);\n  if (abs(det) \u003c 1e-6) return;\n  // Depth as a plane over the screen.\n  const dzx = ((bz - az) * (cy - ay) - (cz - az) * (by - ay)) / det;\n  const dzy = ((cz - az) * (bx - ax) - (bz - az) * (cx - ax)) / det;\n  const s = det > 0 ? 1 : -1;\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(SH - 1, floor(max(ay, by, cy) - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 0, xr = SW - 1;\n    for (let e = 0; e \u003c 3; e++) {\n      const x0 = e === 0 ? ax : e === 1 ? bx : cx, y0e = e === 0 ? ay : e === 1 ? by : cy;\n      const x1 = e === 0 ? bx : e === 1 ? cx : ax, y1e = e === 0 ? by : e === 1 ? cy : ay;\n      // Inside when s ((x1 - x0)(py - y0) - (y1 - y0)(px - x0)) >= 0, linear in px.\n      const A = -s * (y1e - y0e), B = s * ((x1 - x0) * (py - y0e) + (y1e - y0e) * x0);\n      if (abs(A) \u003c 1e-9) {\n        if (B \u003c 0) xr = -1;\n      } else if (A > 0) xl = max(xl, ceil(-B / A - 0.5));\n      else xr = min(xr, floor(-B / A - 0.5));\n    }\n    for (let x = xl; x \u003c= xr; x++) {\n      const z = az + dzx * (x + 0.5 - ax) + dzy * (py - ay), p = y * SW + x;\n      if (z \u003c zb[p]) {\n        zb[p] = z;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ox, oy, oz, vx, vy, vz, zb, cr, cg, cb, col } = S;\n  const n = S.n, mu = S.mu, K = ceil(mu - 1e-6);\n  const ce = cos(EL), se = sin(EL), cxs = CX * SS, cys = 64 * SS;\n  const ct = cos(S.spin), st = sin(S.spin);\n  // Ring k holds n corners at angles (2 pi j + pi k) / n, so each ring is\n  // turned pi / n from the last, at height k h / mu, the last held at the\n  // top: at a whole mu this is the lantern with mu bands, and between two\n  // whole values the top band opens from flat to full height.\n  for (let k = 0; k \u003c= K; k++) {\n    const y = min(HC, (k * HC) / mu);\n    for (let j = 0; j \u003c n; j++) {\n      const a = (TAU * j + PI * k) / n, x = R * cos(a), z = R * sin(a), o = k * n + j;\n      ox[o] = x;\n      oy[o] = y;\n      oz[o] = z;\n      // Turn about the axis, then look down by EL.\n      const xr = x * ct + z * st, zr = -x * st + z * ct, yc = y - HC / 2;\n      vx[o] = cxs + SS * xr;\n      vy[o] = cys - SS * (yc * ce + zr * se);\n      vz[o] = -yc * se + zr * ce;\n    }\n  }\n  zb.fill(1e9);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  // The light from the front left, its height set by K4: 44 degrees above\n  // at the opening, level at 0.5, 50 below at 1. The eye looks along +z.\n  const le = 0.87 - 1.74 * S.light, Lx = -0.55 * cos(le), Ly = sin(le), Lz = -0.83 * cos(le);\n  const Hx = Lx, Hy = Ly, Hz = Lz - 1, Hn = 1 / sqrt(Hx * Hx + Hy * Hy + Hz * Hz);\n  // The half vector of a second light high above and behind, for the\n  // glints off deep folds.\n  const Gx = 0.25, Gy = 0.8, Gz = -0.45, Gn = 1 / sqrt(Gx * Gx + Gy * Gy + Gz * Gz);\n  const h0 = S.hue + 0.55;\n  let area = 0;\n  for (let k = 0; k \u003c K; k++)\n    for (let j = 0; j \u003c n; j++)\n      for (let t = 0; t \u003c 2; t++) {\n        // t = 0: base on ring k, apex on ring k + 1 between the base's ends.\n        // t = 1: base on ring k + 1, apex on ring k between its ends.\n        const i0 = t === 0 ? k * n + j : (k + 1) * n + ((j + n - 1) % n);\n        const i1 = t === 0 ? k * n + ((j + 1) % n) : (k + 1) * n + j;\n        const i2 = t === 0 ? (k + 1) * n + j : k * n + j;\n        const ux = ox[i1] - ox[i0], uy = oy[i1] - oy[i0], uz = oz[i1] - oz[i0];\n        const wx = ox[i2] - ox[i0], wy = oy[i2] - oy[i0], wz = oz[i2] - oz[i0];\n        let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n        const nl = sqrt(nx * nx + ny * ny + nz * nz);\n        area += nl / 2;\n        if (nl \u003c 1e-9) continue;\n        (nx /= nl), (ny /= nl), (nz /= nl);\n        // Point the normal out of the cylinder.\n        if (nx * (ox[i0] + ox[i1] + ox[i2]) + nz * (oz[i0] + oz[i1] + oz[i2]) \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n        const rx = nx * ct + nz * st, rz0 = -nx * st + nz * ct;\n        const ry = ny * ce + rz0 * se, rz = -ny * se + rz0 * ce;\n        // Outside faces turn toward the eye; the inside shows through the top.\n        const out = rz \u003c 0, sx = out ? rx : -rx, sy = out ? ry : -ry, sz = out ? rz : -rz;\n        const dif = max(0, sx * Lx + sy * Ly + sz * Lz);\n        let lit, spec = 0;\n        if (out) {\n          const hv = max(0, (sx * Hx + sy * Hy + sz * Hz) * Hn), gv = max(0, (sx * Gx + sy * Gy + sz * Gz) * Gn);\n          spec = hv ** 40 * 0.6 + gv ** 40;\n          hsv(h0 + 0.1 * ny, 0.85 - 0.1 * abs(ny), 1, col, 0);\n          lit = 0.16 + 0.84 * dif;\n        } else {\n          hsv(h0 + 0.12, 0.7, 1, col, 0);\n          lit = 0.1 + 0.3 * dif;\n        }\n        tri(S, vx[i0], vy[i0], vz[i0], vx[i1], vy[i1], vz[i1], vx[i2], vy[i2], vz[i2], col[0] * lit + spec, col[1] * lit + spec, col[2] * lit + spec);\n      }\n  // Summed from the triangles themselves; at whole mu it equals\n  // A = 2 m n r sin(pi/n) sqrt((h/m)^2 + r^2 (1 - cos(pi/n))^2).\n  S.area = area / (TAU * R * HC);\n\n  const f = 255 / (SS * SS);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0;\n      for (let dy = 0; dy \u003c SS; dy++)\n        for (let dx = 0; dx \u003c SS; dx++) {\n          const p = (y * SS + dy) * SW + x * SS + dx;\n          r += cr[p];\n          g += cg[p];\n          b += cb[p];\n        }\n      // The gauge: a two-LED bar up the left edge, and a mark at 1, where\n      // the lantern's area would equal the cylinder's.\n      if ((x === 1 || x === 2) && y > G0 - S.area * GPX && y \u003c= G0) r = g = b = 190 / f;\n      if (x \u003c 5 && y === G0 - GPX) r = g = b = 255 / f;\n      display.setPixel(x, y, cl(r * f, 0, 255), cl(g * f, 0, 255), cl(b * f, 0, 255));\n    }\n}\n","layer":{"id":"layer-schwarz-lantern","type":"code","name":"schwarz-lantern","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Schwarz Lantern\n// Family:  geometry\n// Idea:    A lantern of flat triangles, every corner on a cylinder the height of the panel, turns under a light while its bands multiply from 3 to 40 and back, and as it folds into a glinting accordion the bar at the left shows its area climbing to 1.88 times the cylinder's.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Schwarz lantern (Hermann Schwarz, 1880), pattern round 36\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1\n//\n// Knob 1: Hue. The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round.\n// Knob 2: Speed. At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long.\n// Knob 3: Sides. Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves.\n// Knob 4: Light. The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep.\n// Buttons: K1 tap folds the lantern to 40 bands in 0.6 s, holds it there 2 s and lets it ease back over 2 s.\n\nconst W = 64, H = 128, SS = 2, SW = W * SS, SH = H * SS, SN = SW * SH;\nconst { floor, ceil, min, max, sqrt, sin, cos, exp, log, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The cylinder: radius R and height HC in LEDs, its axis at column CX, seen\n// from EL radians above. The bands run from MMIN to MMAX.\nconst R = 26, HC = 114, CX = 34.5, EL = 0.2, MMIN = 3, MMAX = 40, NMAX = 12;\n// The gauge: the lantern's area over the cylinder's, a bar up from row G0 at\n// the left edge, GPX LEDs to the unit, with a mark at 1.\nconst G0 = 125, GPX = 44;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const V = (MMAX + 2) * NMAX;\n  params.s = {\n    hue: 0, speed: 2, n: 5, light: 0.06, spin: 0, sweep: 2.2, snap: -1, mu: MMIN, area: 1,\n    ox: new Float32Array(V), oy: new Float32Array(V), oz: new Float32Array(V),\n    vx: new Float32Array(V), vy: new Float32Array(V), vz: new Float32Array(V),\n    zb: new Float32Array(SN), cr: new Float32Array(SN), cg: new Float32Array(SN), cb: new Float32Array(SN), col: new Float32Array(3),\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.n = Math.round(cl(k[2], 5, NMAX));\n  S.light = cl(k[3], 0, 1);\n  S.spin += d * S.speed * 0.12;\n  S.sweep += d * S.speed * 0.16;\n  if (S.snap >= 0) {\n    S.snap += d;\n    if (S.snap > 4.6) S.snap = -1;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.snap = S.snap \u003c 0 ? 0 : min(S.snap, 0.6);\n  // The bands: MMIN to MMAX and back, evenly in log, lingering at both ends.\n  const u = 0.5 - 0.5 * cos(S.sweep);\n  let mu = exp(log(MMIN) + log(MMAX / MMIN) * u);\n  if (S.snap >= 0) {\n    const e = S.snap \u003c 0.6 ? sm(S.snap / 0.6) : 1 - sm((S.snap - 2.6) / 2);\n    mu = exp(log(mu) + (log(MMAX) - log(mu)) * e);\n  }\n  S.mu = mu;\n}\n\n// Rasterise one triangle into the supersampled buffers, flat coloured, row\n// by row: on each row every edge bounds the run of samples on one side.\nfunction tri(S, ax, ay, az, bx, by, bz, cx, cy, cz, r, g, b) {\n  const { zb, cr, cg, cb } = S;\n  const det = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);\n  if (abs(det) \u003c 1e-6) return;\n  // Depth as a plane over the screen.\n  const dzx = ((bz - az) * (cy - ay) - (cz - az) * (by - ay)) / det;\n  const dzy = ((cz - az) * (bx - ax) - (bz - az) * (cx - ax)) / det;\n  const s = det > 0 ? 1 : -1;\n  const y0 = max(0, ceil(min(ay, by, cy) - 0.5)), y1 = min(SH - 1, floor(max(ay, by, cy) - 0.5));\n  for (let y = y0; y \u003c= y1; y++) {\n    const py = y + 0.5;\n    let xl = 0, xr = SW - 1;\n    for (let e = 0; e \u003c 3; e++) {\n      const x0 = e === 0 ? ax : e === 1 ? bx : cx, y0e = e === 0 ? ay : e === 1 ? by : cy;\n      const x1 = e === 0 ? bx : e === 1 ? cx : ax, y1e = e === 0 ? by : e === 1 ? cy : ay;\n      // Inside when s ((x1 - x0)(py - y0) - (y1 - y0)(px - x0)) >= 0, linear in px.\n      const A = -s * (y1e - y0e), B = s * ((x1 - x0) * (py - y0e) + (y1e - y0e) * x0);\n      if (abs(A) \u003c 1e-9) {\n        if (B \u003c 0) xr = -1;\n      } else if (A > 0) xl = max(xl, ceil(-B / A - 0.5));\n      else xr = min(xr, floor(-B / A - 0.5));\n    }\n    for (let x = xl; x \u003c= xr; x++) {\n      const z = az + dzx * (x + 0.5 - ax) + dzy * (py - ay), p = y * SW + x;\n      if (z \u003c zb[p]) {\n        zb[p] = z;\n        cr[p] = r;\n        cg[p] = g;\n        cb[p] = b;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { ox, oy, oz, vx, vy, vz, zb, cr, cg, cb, col } = S;\n  const n = S.n, mu = S.mu, K = ceil(mu - 1e-6);\n  const ce = cos(EL), se = sin(EL), cxs = CX * SS, cys = 64 * SS;\n  const ct = cos(S.spin), st = sin(S.spin);\n  // Ring k holds n corners at angles (2 pi j + pi k) / n, so each ring is\n  // turned pi / n from the last, at height k h / mu, the last held at the\n  // top: at a whole mu this is the lantern with mu bands, and between two\n  // whole values the top band opens from flat to full height.\n  for (let k = 0; k \u003c= K; k++) {\n    const y = min(HC, (k * HC) / mu);\n    for (let j = 0; j \u003c n; j++) {\n      const a = (TAU * j + PI * k) / n, x = R * cos(a), z = R * sin(a), o = k * n + j;\n      ox[o] = x;\n      oy[o] = y;\n      oz[o] = z;\n      // Turn about the axis, then look down by EL.\n      const xr = x * ct + z * st, zr = -x * st + z * ct, yc = y - HC / 2;\n      vx[o] = cxs + SS * xr;\n      vy[o] = cys - SS * (yc * ce + zr * se);\n      vz[o] = -yc * se + zr * ce;\n    }\n  }\n  zb.fill(1e9);\n  cr.fill(0);\n  cg.fill(0);\n  cb.fill(0);\n  // The light from the front left, its height set by K4: 44 degrees above\n  // at the opening, level at 0.5, 50 below at 1. The eye looks along +z.\n  const le = 0.87 - 1.74 * S.light, Lx = -0.55 * cos(le), Ly = sin(le), Lz = -0.83 * cos(le);\n  const Hx = Lx, Hy = Ly, Hz = Lz - 1, Hn = 1 / sqrt(Hx * Hx + Hy * Hy + Hz * Hz);\n  // The half vector of a second light high above and behind, for the\n  // glints off deep folds.\n  const Gx = 0.25, Gy = 0.8, Gz = -0.45, Gn = 1 / sqrt(Gx * Gx + Gy * Gy + Gz * Gz);\n  const h0 = S.hue + 0.55;\n  let area = 0;\n  for (let k = 0; k \u003c K; k++)\n    for (let j = 0; j \u003c n; j++)\n      for (let t = 0; t \u003c 2; t++) {\n        // t = 0: base on ring k, apex on ring k + 1 between the base's ends.\n        // t = 1: base on ring k + 1, apex on ring k between its ends.\n        const i0 = t === 0 ? k * n + j : (k + 1) * n + ((j + n - 1) % n);\n        const i1 = t === 0 ? k * n + ((j + 1) % n) : (k + 1) * n + j;\n        const i2 = t === 0 ? (k + 1) * n + j : k * n + j;\n        const ux = ox[i1] - ox[i0], uy = oy[i1] - oy[i0], uz = oz[i1] - oz[i0];\n        const wx = ox[i2] - ox[i0], wy = oy[i2] - oy[i0], wz = oz[i2] - oz[i0];\n        let nx = uy * wz - uz * wy, ny = uz * wx - ux * wz, nz = ux * wy - uy * wx;\n        const nl = sqrt(nx * nx + ny * ny + nz * nz);\n        area += nl / 2;\n        if (nl \u003c 1e-9) continue;\n        (nx /= nl), (ny /= nl), (nz /= nl);\n        // Point the normal out of the cylinder.\n        if (nx * (ox[i0] + ox[i1] + ox[i2]) + nz * (oz[i0] + oz[i1] + oz[i2]) \u003c 0) (nx = -nx), (ny = -ny), (nz = -nz);\n        const rx = nx * ct + nz * st, rz0 = -nx * st + nz * ct;\n        const ry = ny * ce + rz0 * se, rz = -ny * se + rz0 * ce;\n        // Outside faces turn toward the eye; the inside shows through the top.\n        const out = rz \u003c 0, sx = out ? rx : -rx, sy = out ? ry : -ry, sz = out ? rz : -rz;\n        const dif = max(0, sx * Lx + sy * Ly + sz * Lz);\n        let lit, spec = 0;\n        if (out) {\n          const hv = max(0, (sx * Hx + sy * Hy + sz * Hz) * Hn), gv = max(0, (sx * Gx + sy * Gy + sz * Gz) * Gn);\n          spec = hv ** 40 * 0.6 + gv ** 40;\n          hsv(h0 + 0.1 * ny, 0.85 - 0.1 * abs(ny), 1, col, 0);\n          lit = 0.16 + 0.84 * dif;\n        } else {\n          hsv(h0 + 0.12, 0.7, 1, col, 0);\n          lit = 0.1 + 0.3 * dif;\n        }\n        tri(S, vx[i0], vy[i0], vz[i0], vx[i1], vy[i1], vz[i1], vx[i2], vy[i2], vz[i2], col[0] * lit + spec, col[1] * lit + spec, col[2] * lit + spec);\n      }\n  // Summed from the triangles themselves; at whole mu it equals\n  // A = 2 m n r sin(pi/n) sqrt((h/m)^2 + r^2 (1 - cos(pi/n))^2).\n  S.area = area / (TAU * R * HC);\n\n  const f = 255 / (SS * SS);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0, g = 0, b = 0;\n      for (let dy = 0; dy \u003c SS; dy++)\n        for (let dx = 0; dx \u003c SS; dx++) {\n          const p = (y * SS + dy) * SW + x * SS + dx;\n          r += cr[p];\n          g += cg[p];\n          b += cb[p];\n        }\n      // The gauge: a two-LED bar up the left edge, and a mark at 1, where\n      // the lantern's area would equal the cylinder's.\n      if ((x === 1 || x === 2) && y > G0 - S.area * GPX && y \u003c= G0) r = g = b = 190 / f;\n      if (x \u003c 5 && y === G0 - GPX) r = g = b = 255 / f;\n      display.setPixel(x, y, cl(r * f, 0, 255), cl(g * f, 0, 255), cl(b * f, 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sides=5..12, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The lantern's colour once round the wheel; facets tipped up lean a little one way round it and facets tipped down the other. At 0 it is azure with blue tops and teal undersides, at 0.25 violet and pink, at 0.5 orange with gold tops, at 0.75 green; the inside, seen through the open top, is a darker shade 0.12 further round."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the lantern turns once in 26 s, so a facet comes round to the same place every 5 s at five sides, and the bands go from 3 to 40 and back to 3 in 20 s, lingering at both ends; at 0.2 everything takes ten times as long, at 3 two thirds as long."},{"name":"Sides","min":5,"max":12,"about":"Corners on each ring, n, 5 to 12. The lantern's area goes with the bands over n squared, so the same 40 bands fold it to 1.88 times the cylinder's area at 5 sides, 1.51 at 6, 1.19 at 8 and only 1.04 at 12, where it stays a smooth, finely hatched column and the bar barely moves."},{"name":"Light","min":0,"max":1,"about":"The height of the light, which comes from the front left. At 0.06 it is 44 degrees above, so the facets tipped up shine and the ones tipped down fall dark and the folds read as stripes; at 0.5 it is level and the two kinds of facet come out alike; at 1 it is 50 degrees below and lights the undersides. A second light high behind the lantern puts glints on the upper facets once the folds are deep."}],"start":[0,2,5,0.06],"measures":{"motion":2.2095,"detail":0.1257,"edges":0.8296,"complexity":0.2813,"coverage":0.7377,"colour":0.3317,"drift":0.1973},"knobResponse":[0.2726,0.2005,0.2242,0.2083]},{"slug":"searchlights","title":"Searchlights","family":"light","round":7,"note":"밤 도시의 지붕 뒤에서 탐조등 세 대가 가장자리가 또렷한 빛기둥을 천천히 휘둘러요. 기둥 둘이 겹친 자리는 하얗게 타고, K1 을 누르면 하늘을 가로지르는 비행기를 모든 기둥이 붙잡았다가 놓아줘요.","idea":"Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.","buttons":"K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.","code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","layer":{"id":"layer-searchlights","type":"code","name":"searchlights","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the lamps, starting from the cold blue-white of a xenon arc."},{"name":"Sweep","min":0.2,"max":4,"about":"How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds."},{"name":"Lights","min":3,"max":7,"about":"How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out."},{"name":"Haze","min":0,"max":1,"about":"How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky."}],"start":[0,2,3,0.06],"measures":{"motion":0.1662,"detail":0.0601,"edges":0.9751,"complexity":0.5201,"coverage":0.2833,"colour":0.1361,"drift":0.3569},"knobResponse":[0.0557,0.2929,0.2085,0.0855]},{"slug":"senbazuru","title":"Senbazuru","family":"paper","round":22,"note":"붉은 옻칠 고리에 실로 꿴 종이학이 줄줄이 매달려 금박 학 아래로 주황에서 초록, 파랑을 지나 보라와 분홍까지 띠를 이루고, 실 끝에는 금 구슬과 비단 술이 달려요. 어두운 절 방에 외풍이 불면 줄이 흔들리고 학이 실을 축으로 돌면서 접힌 면이 하나씩 등불을 받아 번쩍여요. K1 을 누르면 돌풍이 불어 학 하나가 떨어져 나뭇잎처럼 바닥으로 내려앉아요.","idea":"Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.","buttons":"K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-senbazuru","type":"code","name":"senbazuru","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow."},{"name":"Breeze","min":0.2,"max":3,"about":"How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin."},{"name":"Strands","min":8,"max":16,"about":"How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them."},{"name":"Light","min":0,"max":1,"about":"Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it."}],"start":[0,2,8,0.06],"measures":{"motion":0.5463,"detail":0.1059,"edges":0.4439,"complexity":2.0626,"coverage":0.7211,"colour":0.2483,"drift":0.1023},"knobResponse":[0.0684,0.1034,0.1073,0.1606]},{"slug":"sequins","title":"Sequins","family":"textile","round":23,"note":"뒤집히는 스팽글을 촘촘히 단 쿠션이 패널을 채워요. 은빛 비늘이 엇갈린 줄로 겹쳐 있고, 보이지 않는 손끝이 지나가면 스팽글이 차례로 모서리를 보이며 넘어가 하트, 별, 고양이 얼굴, 번개, 파도를 분홍 면으로 그려요. 손바닥이 위에서 아래로 쓸면 다시 은빛이 돼요.","idea":"A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.","buttons":"K1 tap sweeps the palm down the cushion now and the next drawing starts.","code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","layer":{"id":"layer-sequins","type":"code","name":"sequins","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower."},{"name":"Drawing","min":0,"max":4,"about":"What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.1482,"detail":0.3266,"edges":0.6744,"complexity":1.7886,"coverage":0.647,"colour":0.0886,"drift":0.2495},"knobResponse":[0.0553,0.0492,0.2354,0.1678]},{"slug":"serum-drip","title":"Serum Drip","family":"cosmetic","round":39,"note":"위 끝에서 흘러드는 금빛 세럼 실이 목이 졸리고 부풀어 구슬을 꿴 줄이 되고, 가는 실이 끊기며 큰 방울과 작은 위성 방울이 바닥의 웅덩이로 떨어져요. 세로 홈이 진 벽이 구슬마다 크게 비쳐요.","idea":"A thread of clear tinted serum falls from the top edge the height of the panel, necks and swells into beads on a string, the filaments between them thin and snap, and round drops with now and then a small satellite fall into a shallow pool at the bottom, while the stream keeps coming and the lit wall shows through every bead, magnified.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Serum Drip\n// Family:  cosmetic\n// Idea:    A thread of clear tinted serum falls from the top edge the height of the panel, necks and swells into beads on a string, the filaments between them thin and snap, and round drops with now and then a small satellite fall into a shallow pool at the bottom, while the stream keeps coming and the lit wall shows through every bead, magnified.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after a serum stretched from a dropper into a thread that beads up and breaks (the Plateau-Rayleigh instability, Joseph Plateau, 1873, and Lord Rayleigh, 1878)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=-1..1, Flow=-1..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, and the wall behind it takes a faint tint of the same hue. At 0 gold on a grey wall; at 0.04 yellow, 0.1 lime, 0.2 green, 0.36 aqua, 0.46 azure, 0.53 blue, 0.6 violet, 0.7 magenta, 0.78 rose, 0.86 red, 0.92 vermilion and 0.96 orange. From red-orange through gold to lime the wall is greyed and lifted a little and the pool lit from within, so the serum and its pool read amber, gold or lemon, never brown or olive.\n// Knob 2: Speed. At 2 the serum leaves the top edge at 28 LEDs a second, falls the height of the panel in about 3 seconds, and a drop breaks off about every 1.4 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Viscosity. At 0 the ripples grow down the thread into beads on a string, the filaments between them thin and snap about row 80, and drops 15 LEDs across fall into a pool 14 rows deep, now and then with a satellite. At -1 the serum is nine times thinner and snaps into clean drops about row 45. Turned up, the beads stay joined longer: from about 0.35 the thread reaches the pool unbroken as a string of beads, and at 1, nine times thicker than at 0, the ripples barely grow and the pool, draining slower, stands 21 rows deep.\n// Knob 4: Flow. How fast the serum leaves the top edge, 2.2 times slower at -1 and 2.2 times faster at 1. At -1 it cannot keep a thread going and drips: a drop swells below the top edge to 21 LEDs across and lets go about every 10 seconds; at -0.5 the thread breaks about row 60 into drops 19 across; from 0.5 it runs into the pool before it can break, and the pool rises to 19 rows.\n\nconst W = 64, H = 128, NMAX = 800, PMAX = 64;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The thread, in LEDs and seconds at Speed 2, is a slender-thread model: a\n// chain of slices of fixed volume between nodes on the vertical axis, each\n// slice a short cylinder. The area of the surface pulls on the nodes\n// (surface tension over density SIG), gravity GR pulls them down, and\n// viscosity resists stretching. A still thread in this model grows ripples\n// at the rates of Rayleigh's theory, fastest at nine radii. The serum leaves\n// an opening of radius A0, ZN above the top edge and never drawn.\n// TS slows the whole film down without changing a shape, Q scales the\n// thread: every rate below is set so the same shapes come at any Q.\nconst TS = 0.7, Q = 1.18;\nconst ZN = -5, A0 = 3.4 * Q, GR = 12 * Q * TS * TS, SIG = 2200 * Q ** 3 * TS * TS, DZ = 0.9, HCUT = 0.13;\n// A tremor in the flow ripples the thread's radius by about a sixth as it\n// leaves, at 8.8 radii, the wavelength that grows fastest on a thread at\n// rest, wandering a little either side of it. The fall stretches the\n// ripples as they go.\nconst LAM = 30 * Q;\n// Viscosity at Viscosity 0, in LEDs squared a second.\nconst NU0 = 55 * Q * Q * TS;\n// The pool's rest surface, its depth into the wall, and the ripple speed.\nconst POOL = 117, DEPTH = 18, CW = 40;\n// Opening hue: gold.\nconst H0 = 0.14;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  const F = () => new Float64Array(NMAX);\n  params.s = {\n    hue: 0, rate: 1, nu: 30, v0: 16, begun: false, t: 0,\n    n: 0, z: F(), u: F(), x: F(), V: F(), L: F(), h: F(), G: F(), f: F(), m: F(), lk: new Uint8Array(NMAX),\n    ca: F(), cb: F(), cc: F(), cd: F(),\n    drops: [], noise: 0, sway: random() * 6.28, pour: 0, ph: 0, jit: 0,\n    lvl: POOL, eta: new Float64Array(W), etv: new Float64Array(W),\n    PH: new Float64Array(2 * H), PX: new Float64Array(2 * H), PD: new Float64Array(2 * H), PT: new Float64Array(2 * H),\n    ser: [0, 0, 0], wall: [0, 0, 0],\n  };\n  const S = params.s;\n  // The node at the opening.\n  S.n = 1;\n  S.z[0] = ZN;\n  S.u[0] = S.v0;\n  S.x[0] = 32;\n}\n\n// Where the serum leaves the top edge: the hand above drifts slowly from\n// side to side, and the thread below keeps the curve of where it has been.\nconst openX = (S) => 32 + 5 * sin(S.sway + S.t * 0.6 * TS) + 1.5 * sin(S.sway * 2.3 + S.t * 1.4 * TS);\n\nfunction insert(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i + 1, i, S.n);\n  u.copyWithin(i + 1, i, S.n);\n  x.copyWithin(i + 1, i, S.n);\n  V.copyWithin(i + 1, i, S.n);\n  lk.copyWithin(i + 1, i, S.n);\n  S.n++;\n}\n\nfunction remove(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i, i + 1, S.n);\n  u.copyWithin(i, i + 1, S.n);\n  x.copyWithin(i, i + 1, S.n);\n  V.copyWithin(i, i + 1, S.n);\n  lk.copyWithin(i, i + 1, S.n);\n  S.n--;\n}\n\n// Node i is kinematic: the opening, or a node already in the pool.\nconst kin = (S, i) => i === 0 || S.z[i] > S.lvl;\n\nfunction step(S, dt) {\n  const { z, u, V, L, h, G, f, m, lk, ca, cb, cc, cd } = S, n = S.n;\n  // The node at the opening moves at the speed the serum leaves it.\n  u[0] = S.v0;\n  // Slices: length and radius.\n  for (let i = 0; i \u003c n - 1; i++) {\n    G[i] = 0;\n    if (!lk[i]) continue;\n    L[i] = max(1e-4, z[i + 1] - z[i]);\n    h[i] = sqrt(V[i] / (PI * L[i]));\n  }\n  // dArea / dLength of each slice: half a cylinder at each end (with a flat\n  // cap at a free end), a frustum between the middles of every two slices.\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    const hi = h[i], Li = L[i], dhi = -hi / (2 * Li);\n    const top = i === 0 || !lk[i - 1], bot = i + 1 === n - 1 || !lk[i + 1];\n    if (top) G[i] += PI * (hi / 2 - (kin(S, i) ? 0 : (hi * hi) / Li));\n    if (bot) G[i] += PI * (hi / 2 - (kin(S, i + 1) ? 0 : (hi * hi) / Li));\n    else {\n      const j = i + 1, hj = h[j], Lj = L[j], dhj = -hj / (2 * Lj), d = (Li + Lj) / 2, dl = hi - hj, Q = sqrt(d * d + dl * dl), hs = hi + hj;\n      G[i] += PI * (dhi * Q + (hs * (d / 2 + dl * dhi)) / Q);\n      G[j] += PI * (dhj * Q + (hs * (d / 2 - dl * dhj)) / Q);\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    f[i] = 0;\n    m[i] = 0;\n  }\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    f[i] += SIG * G[i];\n    f[i + 1] -= SIG * G[i];\n    m[i] += V[i] / 2;\n    m[i + 1] += V[i] / 2;\n  }\n  for (let i = 0; i \u003c n; i++) if (!kin(S, i) && m[i] > 0) u[i] += dt * (f[i] / m[i] + GR);\n  // Viscosity, implicit: each slice resists stretching with 3 nu V / L^2,\n  // solved along each chain as a tridiagonal system.\n  const nu = S.nu;\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      for (let i = a; i \u003c= b; i++) {\n        const cl0 = i > a ? (3 * nu * V[i - 1]) / (L[i - 1] * L[i - 1]) : 0, cr = i \u003c b ? (3 * nu * V[i]) / (L[i] * L[i]) : 0;\n        if (kin(S, i)) {\n          ca[i] = 0;\n          cb[i] = 1;\n          cc[i] = 0;\n          cd[i] = u[i];\n        } else {\n          ca[i] = -dt * cl0;\n          cb[i] = m[i] + dt * (cl0 + cr);\n          cc[i] = -dt * cr;\n          cd[i] = m[i] * u[i];\n        }\n      }\n      for (let i = a + 1; i \u003c= b; i++) {\n        const w = ca[i] / cb[i - 1];\n        cb[i] -= w * cc[i - 1];\n        cd[i] -= w * cd[i - 1];\n      }\n      u[b] = cd[b] / cb[b];\n      for (let i = b - 1; i >= a; i--) u[i] = (cd[i] - cc[i] * u[i + 1]) / cb[i];\n    }\n    a = b + 1;\n  }\n  for (let i = 0; i \u003c n; i++) z[i] += dt * u[i];\n  S.t += dt;\n}\n\n// After a step: feed the opening, split long slices, merge short ones, cut\n// the thread where it has thinned to nothing, roll free pieces up into drops,\n// and pour what reaches the pool into it.\nfunction tidy(S) {\n  const { z, u, x, V, lk } = S;\n  // The opening: a new slice each time the last one has left it.\n  if (z[0] >= ZN + DZ && S.n \u003c NMAX - 2) {\n    insert(S, 0);\n    z[0] = z[1] - DZ;\n    u[0] = S.v0;\n    x[0] = openX(S);\n    S.noise += 0.35 * (random() - 0.5) - 0.12 * S.noise;\n    S.jit += 0.2 * (random() - 0.5) - 0.05 * S.jit;\n    S.ph += ((2 * PI * DZ) / LAM) * (1 + 0.25 * S.jit);\n    V[0] = PI * A0 * A0 * DZ * (1 + 0.35 * sin(S.ph) + 0.04 * S.noise);\n    lk[0] = 1;\n  }\n  z[0] = max(z[0], ZN);\n  for (let i = 0; i \u003c S.n - 1; i++) {\n    if (!lk[i]) continue;\n    const L = z[i + 1] - z[i], hh = sqrt(V[i] / (PI * max(L, 1e-4))), lo = 0.22 + 0.2 * hh;\n    if (L > max(1, 2.6 * lo) && S.n \u003c NMAX - 2) {\n      insert(S, i + 1);\n      z[i + 1] = (z[i] + z[i + 2]) / 2;\n      u[i + 1] = (u[i] + u[i + 2]) / 2;\n      x[i + 1] = (x[i] + x[i + 2]) / 2;\n      V[i] /= 2;\n      V[i + 1] = V[i];\n      lk[i + 1] = 1;\n    } else if (hh \u003c HCUT) {\n      // Pinch-off.\n      lk[i] = 0;\n      if (i > 0 && lk[i - 1]) V[i - 1] += V[i] / 2;\n      if (i + 1 \u003c S.n - 1 && lk[i + 1]) V[i + 1] += V[i] / 2;\n    } else if (L \u003c lo) {\n      // Merge with a neighbour by dropping the shared node.\n      const left = i > 0 && lk[i - 1] && (!(i + 1 \u003c S.n - 1 && lk[i + 1]) || z[i] - z[i - 1] \u003c z[i + 2] - z[i + 1]);\n      const right = !left && i + 1 \u003c S.n - 1 && lk[i + 1];\n      if (left) {\n        // The dropped node's momentum goes half to each neighbour.\n        const mr = (V[i - 1] + V[i]) / 2, ma = V[i - 1] / 2, mb = V[i] / 2;\n        u[i - 1] = (u[i - 1] * ma + (u[i] * mr) / 2) / (ma + mr / 2);\n        u[i + 1] = (u[i + 1] * mb + (u[i] * mr) / 2) / (mb + mr / 2);\n        V[i - 1] += V[i];\n        remove(S, i);\n        i--;\n      } else if (right) {\n        const j = i + 1, mr = (V[i] + V[j]) / 2;\n        u[i] = (u[i] * V[i] / 2 + (u[j] * mr) / 2) / (V[i] / 2 + mr / 2);\n        u[j + 1] = (u[j + 1] * V[j] / 2 + (u[j] * mr) / 2) / (V[j] / 2 + mr / 2);\n        V[i] += V[j];\n        lk[i] = 1;\n        remove(S, j);\n      }\n    }\n  }\n  // Nodes left with no slice on either side go, but not the one at the opening.\n  for (let i = S.n - 1; i > 0; i--) if (!lk[i - 1] && !(i \u003c S.n - 1 && lk[i])) remove(S, i);\n  // Chains: roll a short free piece into a drop; pour what is in the pool.\n  let a = 0;\n  while (a \u003c S.n) {\n    let b = a;\n    while (b \u003c S.n - 1 && lk[b]) b++;\n    if (b > a) {\n      let vol = 0, mom = 0, zc = 0, xc = 0;\n      for (let i = a; i \u003c b; i++) {\n        vol += V[i];\n        mom += (V[i] * (u[i] + u[i + 1])) / 2;\n        zc += (V[i] * (z[i] + z[i + 1])) / 2;\n        xc += (V[i] * (x[i] + x[i + 1])) / 2;\n      }\n      const R = (0.75 * vol / PI) ** (1 / 3), len = z[b] - z[a];\n      if (a > 0 && (b - a \u003c= 2 || len \u003c 2.3 * R) && z[b] \u003c= S.lvl && S.drops.length \u003c PMAX) {\n        S.drops.push({ y: zc / vol, x: xc / vol, v: mom / vol, R, vol, e: cl(len / (2 * R) - 1, -0.4, 0.6), ph: 0 });\n        for (let i = b; i >= a; i--) remove(S, i);\n        continue;\n      }\n      // Slices wholly under the surface go into the pool.\n      while (b > a && z[b - 1] > S.lvl + 1) {\n        S.pour += V[b - 1];\n        remove(S, b);\n        lk[b - 1] = 0;\n        b--;\n      }\n    }\n    a = b + 1;\n  }\n}\n\nfunction drops(S, d) {\n  const { eta, etv } = S;\n  for (const p of S.drops) {\n    p.v += GR * d;\n    p.y += p.v * d;\n    // A drop rings at its lowest mode, sqrt(8 SIG / R^3), damped by viscosity.\n    p.ph += sqrt((8 * SIG) / (p.R * p.R * p.R)) * d;\n    p.e *= exp((-d * (5 * S.nu + 4)) / (p.R * p.R));\n  }\n  S.drops = S.drops.filter((p) => {\n    if (p.y - 0.3 * p.R \u003c S.lvl + eta[cl(round(p.x), 0, W - 1)]) return true;\n    S.pour += p.vol;\n    const k = p.vol * p.v * 0.0004;\n    for (let i = -6; i \u003c= 6; i++) {\n      const c = cl(round(p.x) + i, 0, W - 1);\n      etv[c] -= k * exp(-(i * i) / (p.R * p.R + 2));\n    }\n    return false;\n  });\n  // The pool fills with what comes in and drains back toward its rest level.\n  // A thicker serum drains away more slowly, so its pool stands higher.\n  S.lvl += -S.pour / (W * DEPTH) + (POOL - S.lvl) * min(1, d / (3 * (S.nu / NU0) ** 0.45));\n  S.pour = 0;\n  for (let i = 0; i \u003c W; i++) {\n    const l = eta[i > 0 ? i - 1 : i], r = eta[i \u003c W - 1 ? i + 1 : i];\n    etv[i] += d * (CW * CW * (l + r - 2 * eta[i]) - 4 * etv[i]);\n  }\n  for (let i = 0; i \u003c W; i++) eta[i] = cl(eta[i] + d * etv[i], -5, 5);\n}\n\nfunction advance(S, d) {\n  // Substeps short enough for the stiffest slice: a capillary wave as short\n  // as the slice rings at sqrt(SIG h / 2) (pi / L)^2.\n  let left = d;\n  while (left > 1e-6) {\n    let w = 0;\n    for (let i = 0; i \u003c S.n - 1; i++) {\n      if (!S.lk[i]) continue;\n      const L = max(0.05, S.z[i + 1] - S.z[i]), hh = sqrt(S.V[i] / (PI * L));\n      w = max(w, (sqrt((SIG * hh) / 2) * PI * PI) / (L * L));\n    }\n    const dt = min(left, 0.6 / max(w, 1), 1 / 120);\n    step(S, dt);\n    tidy(S);\n    drops(S, dt);\n    left -= dt;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.nu = NU0 * 9 ** cl(k[2], -1, 1);\n  S.v0 = 34 * Q * TS * 2.2 ** cl(k[3], -1, 1);\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c 90; i++) advance(S, 1 / 30);\n    // The pool opens at the level where it drains as fast as it fills.\n    S.lvl = POOL - (PI * A0 * A0 * S.v0 * 3 * (S.nu / NU0) ** 0.45) / (W * DEPTH);\n  }\n  advance(S, d * S.rate);\n}\n\n// The radius and centre of the liquid at half-row samples.\nfunction profile(S) {\n  const { PH, PX, PD, z, x, V, lk } = S, n = S.n;\n  PH.fill(0);\n  PD.fill(0);\n  const put = (za, ha, xa, zb, hb, xb) => {\n    const k0 = max(0, Math.ceil(2 * za - 0.5)), k1 = min(2 * H - 1, floor(2 * zb - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const zz = (k + 0.5) / 2, t = zb > za ? (zz - za) / (zb - za) : 0, hh = ha + (hb - ha) * t;\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = xa + (xb - xa) * t;\n        PD[k] = zb > za ? (hb - ha) / (zb - za) : 0;\n      }\n    }\n  };\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      let pz = 0, ph = 0, px = 0;\n      for (let i = a; i \u003c b; i++) {\n        const L = max(1e-3, z[i + 1] - z[i]), hh = sqrt(V[i] / (PI * L)), zm = (z[i] + z[i + 1]) / 2, xm = (x[i] + x[i + 1]) / 2;\n        if (i === a) {\n          // The upper end: the thread runs off the top edge, a free end is capped.\n          if (a === 0) put(z[a] - 2, hh, xm, zm, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm - cap * sqrt(1 - t0 * t0), hh * t0, xm, zm - cap * sqrt(1 - t1 * t1), hh * t1, xm);\n            }\n        } else put(pz, ph, px, zm, hh, xm);\n        if (i === b - 1) {\n          if (z[b] > S.lvl) put(zm, hh, xm, S.lvl + 2, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm + cap * sqrt(1 - t1 * t1), hh * t1, xm, zm + cap * sqrt(1 - t0 * t0), hh * t0, xm);\n            }\n        }\n        pz = zm;\n        ph = hh;\n        px = xm;\n      }\n    }\n    a = b + 1;\n  }\n  for (const p of S.drops) {\n    const dd = p.e * cos(p.ph), ry = p.R * (1 + dd), rx = p.R / sqrt(1 + dd);\n    const k0 = max(0, Math.ceil(2 * (p.y - ry) - 0.5)), k1 = min(2 * H - 1, floor(2 * (p.y + ry) - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const w = ((k + 0.5) / 2 - p.y) / ry, hh = rx * sqrt(max(0, 1 - w * w));\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = p.x;\n        PD[k] = (-rx * w) / ry / max(0.15, sqrt(max(0, 1 - w * w)));\n      }\n    }\n  }\n  // Smooth the radius along the thread so the light runs over it without\n  // steps, and take the slope from the smoothed radius.\n  const { PT } = S;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let k = 0; k \u003c 2 * H; k++) {\n      const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n      PT[k] = PH[k] > 0 && a > 0 && b > 0 ? 0.25 * a + 0.5 * PH[k] + 0.25 * b : PH[k];\n    }\n    PH.set(PT);\n  }\n  for (let k = 0; k \u003c 2 * H; k++) {\n    const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n    if (PH[k] > 0 && a > 0 && b > 0) PD[k] = cl(b - a, -4, 4);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  profile(S);\n  const { PH, PX, PD, ser, wall, eta } = S;\n  const hue = S.hue + H0;\n  hsv(hue, 0.85, 1, ser);\n  // Orange and yellow go brown and olive on a dim wall: there the wall is\n  // greyed and lifted and the pool glows with the serum's own colour.\n  const wu = (hue - floor(hue) - 0.13) / 0.19, wm = wu * wu \u003c 1 ? (1 - wu * wu) ** 2 : 0;\n  hsv(hue, 0.14 - 0.1 * wm, 1 + 0.18 * wm, wall);\n  const [sr, sg, sb] = ser, [wr, wg, wb] = wall;\n  // Absorption per LED of path through the serum, per channel.\n  const ar = 0.3 * (1 - sr), ag = 0.3 * (1 - sg), ab = 0.3 * (1 - sb);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let R = 0, G = 0, B = 0;\n      const px = x + 0.5, e0 = eta[max(0, x - 1)], e1 = eta[x], e2 = eta[min(W - 1, x + 1)];\n      const surf = S.lvl + 0.25 * e0 + 0.5 * e1 + 0.25 * e2, slope = (e2 - e0) / 2, pf = cl(y + 1 - surf, 0, 1);\n      if (pf \u003c 1)\n        for (let sub = 0; sub \u003c 2; sub++) {\n          const k = 2 * y + sub, zz = (k + 0.5) / 2, wv = lit(px, zz);\n          let r = wv * wr, g = wv * wg, b = wv * wb;\n          const hh = PH[k], dx = px - PX[k], cov = cl(hh - abs(dx) + 0.5, 0, 1);\n          if (cov > 0 && hh > 0.2) {\n            // Clear serum: the wall behind seen magnified through it and\n            // tinted by the path the light takes, a darker rim, an inner\n            // glow on the far side, a highlight down the near side.\n            const uu = cl(dx / hh, -0.97, 0.97), c = sqrt(1 - uu * uu), hz = PD[k], nn = 1 / sqrt(1 + hz * hz);\n            const nx = uu * nn, ny = c * nn, nz = -hz * nn;\n            const lv = 1.35 * lit(PX[k] + dx * 0.55, zz + 0.45 * hh * hz), path = 2 * hh * c + 0.5;\n            const rim = 1 - 0.5 * exp(-c * 4), glow = 0.7 * max(0, 0.55 * nx + 0.25 * ny + 0.55 * nz) ** 2;\n            const sp = max(0, -0.4 * nx + 0.82 * ny - 0.42 * nz), spec = 0.95 * sp ** 40 + 0.12 * sp ** 6;\n            r += (lv * wr * exp(-ar * path) * rim + sr * glow + spec - r) * cov;\n            g += (lv * wg * exp(-ag * path) * rim + sg * glow + spec - g) * cov;\n            b += (lv * wb * exp(-ab * path) * rim + sb * glow + spec - b) * cov;\n          }\n          R += r / 2;\n          G += g / 2;\n          B += b / 2;\n        }\n      if (pf > 0) {\n        // The pool: the wall seen through it, a little lower and deeper in\n        // colour further down, lit from within, a dark band under the surface.\n        const top = max(0, y + 0.5 - surf), wv = lit(px, surf + top * 0.75) * 1.15, path = 3 + 0.3 * top;\n        const dk = 1 - 0.35 * exp(-((top - 1.4) ** 2)), gl = 0.2 + 0.06 * wm;\n        R += ((wv * wr * exp(-0.4 * ar * path) + gl * sr) * dk - R) * pf;\n        G += ((wv * wg * exp(-0.4 * ag * path) + gl * sg) * dk - G) * pf;\n        B += ((wv * wb * exp(-0.4 * ab * path) + gl * sb) * dk - B) * pf;\n      }\n      // The bright line of the surface, brighter where a ripple tilts it to the light.\n      const ln = exp(-(((y + 0.5 - surf) / 0.55) ** 2)) * (0.5 + cl(-slope * 0.8, -0.35, 0.5));\n      R += ln;\n      G += ln;\n      B += ln;\n      display.setPixel(x, y, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n    }\n}\n\n// The lit wall, as a level: pale, light from the upper left, soft vertical\n// flutes 8 LEDs apart for the beads to magnify.\nconst lit = (x, z) => (0.4 + 0.24 * (1 - x / 90 - z / 300)) * (1 + 0.07 * cos((2 * PI * x) / 8));\n","layer":{"id":"layer-serum-drip","type":"code","name":"serum-drip","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Serum Drip\n// Family:  cosmetic\n// Idea:    A thread of clear tinted serum falls from the top edge the height of the panel, necks and swells into beads on a string, the filaments between them thin and snap, and round drops with now and then a small satellite fall into a shallow pool at the bottom, while the stream keeps coming and the lit wall shows through every bead, magnified.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after a serum stretched from a dropper into a thread that beads up and breaks (the Plateau-Rayleigh instability, Joseph Plateau, 1873, and Lord Rayleigh, 1878)\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Viscosity=-1..1, Flow=-1..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, and the wall behind it takes a faint tint of the same hue. At 0 gold on a grey wall; at 0.04 yellow, 0.1 lime, 0.2 green, 0.36 aqua, 0.46 azure, 0.53 blue, 0.6 violet, 0.7 magenta, 0.78 rose, 0.86 red, 0.92 vermilion and 0.96 orange. From red-orange through gold to lime the wall is greyed and lifted a little and the pool lit from within, so the serum and its pool read amber, gold or lemon, never brown or olive.\n// Knob 2: Speed. At 2 the serum leaves the top edge at 28 LEDs a second, falls the height of the panel in about 3 seconds, and a drop breaks off about every 1.4 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Viscosity. At 0 the ripples grow down the thread into beads on a string, the filaments between them thin and snap about row 80, and drops 15 LEDs across fall into a pool 14 rows deep, now and then with a satellite. At -1 the serum is nine times thinner and snaps into clean drops about row 45. Turned up, the beads stay joined longer: from about 0.35 the thread reaches the pool unbroken as a string of beads, and at 1, nine times thicker than at 0, the ripples barely grow and the pool, draining slower, stands 21 rows deep.\n// Knob 4: Flow. How fast the serum leaves the top edge, 2.2 times slower at -1 and 2.2 times faster at 1. At -1 it cannot keep a thread going and drips: a drop swells below the top edge to 21 LEDs across and lets go about every 10 seconds; at -0.5 the thread breaks about row 60 into drops 19 across; from 0.5 it runs into the pool before it can break, and the pool rises to 19 rows.\n\nconst W = 64, H = 128, NMAX = 800, PMAX = 64;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The thread, in LEDs and seconds at Speed 2, is a slender-thread model: a\n// chain of slices of fixed volume between nodes on the vertical axis, each\n// slice a short cylinder. The area of the surface pulls on the nodes\n// (surface tension over density SIG), gravity GR pulls them down, and\n// viscosity resists stretching. A still thread in this model grows ripples\n// at the rates of Rayleigh's theory, fastest at nine radii. The serum leaves\n// an opening of radius A0, ZN above the top edge and never drawn.\n// TS slows the whole film down without changing a shape, Q scales the\n// thread: every rate below is set so the same shapes come at any Q.\nconst TS = 0.7, Q = 1.18;\nconst ZN = -5, A0 = 3.4 * Q, GR = 12 * Q * TS * TS, SIG = 2200 * Q ** 3 * TS * TS, DZ = 0.9, HCUT = 0.13;\n// A tremor in the flow ripples the thread's radius by about a sixth as it\n// leaves, at 8.8 radii, the wavelength that grows fastest on a thread at\n// rest, wandering a little either side of it. The fall stretches the\n// ripples as they go.\nconst LAM = 30 * Q;\n// Viscosity at Viscosity 0, in LEDs squared a second.\nconst NU0 = 55 * Q * Q * TS;\n// The pool's rest surface, its depth into the wall, and the ripple speed.\nconst POOL = 117, DEPTH = 18, CW = 40;\n// Opening hue: gold.\nconst H0 = 0.14;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  const F = () => new Float64Array(NMAX);\n  params.s = {\n    hue: 0, rate: 1, nu: 30, v0: 16, begun: false, t: 0,\n    n: 0, z: F(), u: F(), x: F(), V: F(), L: F(), h: F(), G: F(), f: F(), m: F(), lk: new Uint8Array(NMAX),\n    ca: F(), cb: F(), cc: F(), cd: F(),\n    drops: [], noise: 0, sway: random() * 6.28, pour: 0, ph: 0, jit: 0,\n    lvl: POOL, eta: new Float64Array(W), etv: new Float64Array(W),\n    PH: new Float64Array(2 * H), PX: new Float64Array(2 * H), PD: new Float64Array(2 * H), PT: new Float64Array(2 * H),\n    ser: [0, 0, 0], wall: [0, 0, 0],\n  };\n  const S = params.s;\n  // The node at the opening.\n  S.n = 1;\n  S.z[0] = ZN;\n  S.u[0] = S.v0;\n  S.x[0] = 32;\n}\n\n// Where the serum leaves the top edge: the hand above drifts slowly from\n// side to side, and the thread below keeps the curve of where it has been.\nconst openX = (S) => 32 + 5 * sin(S.sway + S.t * 0.6 * TS) + 1.5 * sin(S.sway * 2.3 + S.t * 1.4 * TS);\n\nfunction insert(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i + 1, i, S.n);\n  u.copyWithin(i + 1, i, S.n);\n  x.copyWithin(i + 1, i, S.n);\n  V.copyWithin(i + 1, i, S.n);\n  lk.copyWithin(i + 1, i, S.n);\n  S.n++;\n}\n\nfunction remove(S, i) {\n  const { z, u, x, V, lk } = S;\n  z.copyWithin(i, i + 1, S.n);\n  u.copyWithin(i, i + 1, S.n);\n  x.copyWithin(i, i + 1, S.n);\n  V.copyWithin(i, i + 1, S.n);\n  lk.copyWithin(i, i + 1, S.n);\n  S.n--;\n}\n\n// Node i is kinematic: the opening, or a node already in the pool.\nconst kin = (S, i) => i === 0 || S.z[i] > S.lvl;\n\nfunction step(S, dt) {\n  const { z, u, V, L, h, G, f, m, lk, ca, cb, cc, cd } = S, n = S.n;\n  // The node at the opening moves at the speed the serum leaves it.\n  u[0] = S.v0;\n  // Slices: length and radius.\n  for (let i = 0; i \u003c n - 1; i++) {\n    G[i] = 0;\n    if (!lk[i]) continue;\n    L[i] = max(1e-4, z[i + 1] - z[i]);\n    h[i] = sqrt(V[i] / (PI * L[i]));\n  }\n  // dArea / dLength of each slice: half a cylinder at each end (with a flat\n  // cap at a free end), a frustum between the middles of every two slices.\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    const hi = h[i], Li = L[i], dhi = -hi / (2 * Li);\n    const top = i === 0 || !lk[i - 1], bot = i + 1 === n - 1 || !lk[i + 1];\n    if (top) G[i] += PI * (hi / 2 - (kin(S, i) ? 0 : (hi * hi) / Li));\n    if (bot) G[i] += PI * (hi / 2 - (kin(S, i + 1) ? 0 : (hi * hi) / Li));\n    else {\n      const j = i + 1, hj = h[j], Lj = L[j], dhj = -hj / (2 * Lj), d = (Li + Lj) / 2, dl = hi - hj, Q = sqrt(d * d + dl * dl), hs = hi + hj;\n      G[i] += PI * (dhi * Q + (hs * (d / 2 + dl * dhi)) / Q);\n      G[j] += PI * (dhj * Q + (hs * (d / 2 - dl * dhj)) / Q);\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    f[i] = 0;\n    m[i] = 0;\n  }\n  for (let i = 0; i \u003c n - 1; i++) {\n    if (!lk[i]) continue;\n    f[i] += SIG * G[i];\n    f[i + 1] -= SIG * G[i];\n    m[i] += V[i] / 2;\n    m[i + 1] += V[i] / 2;\n  }\n  for (let i = 0; i \u003c n; i++) if (!kin(S, i) && m[i] > 0) u[i] += dt * (f[i] / m[i] + GR);\n  // Viscosity, implicit: each slice resists stretching with 3 nu V / L^2,\n  // solved along each chain as a tridiagonal system.\n  const nu = S.nu;\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      for (let i = a; i \u003c= b; i++) {\n        const cl0 = i > a ? (3 * nu * V[i - 1]) / (L[i - 1] * L[i - 1]) : 0, cr = i \u003c b ? (3 * nu * V[i]) / (L[i] * L[i]) : 0;\n        if (kin(S, i)) {\n          ca[i] = 0;\n          cb[i] = 1;\n          cc[i] = 0;\n          cd[i] = u[i];\n        } else {\n          ca[i] = -dt * cl0;\n          cb[i] = m[i] + dt * (cl0 + cr);\n          cc[i] = -dt * cr;\n          cd[i] = m[i] * u[i];\n        }\n      }\n      for (let i = a + 1; i \u003c= b; i++) {\n        const w = ca[i] / cb[i - 1];\n        cb[i] -= w * cc[i - 1];\n        cd[i] -= w * cd[i - 1];\n      }\n      u[b] = cd[b] / cb[b];\n      for (let i = b - 1; i >= a; i--) u[i] = (cd[i] - cc[i] * u[i + 1]) / cb[i];\n    }\n    a = b + 1;\n  }\n  for (let i = 0; i \u003c n; i++) z[i] += dt * u[i];\n  S.t += dt;\n}\n\n// After a step: feed the opening, split long slices, merge short ones, cut\n// the thread where it has thinned to nothing, roll free pieces up into drops,\n// and pour what reaches the pool into it.\nfunction tidy(S) {\n  const { z, u, x, V, lk } = S;\n  // The opening: a new slice each time the last one has left it.\n  if (z[0] >= ZN + DZ && S.n \u003c NMAX - 2) {\n    insert(S, 0);\n    z[0] = z[1] - DZ;\n    u[0] = S.v0;\n    x[0] = openX(S);\n    S.noise += 0.35 * (random() - 0.5) - 0.12 * S.noise;\n    S.jit += 0.2 * (random() - 0.5) - 0.05 * S.jit;\n    S.ph += ((2 * PI * DZ) / LAM) * (1 + 0.25 * S.jit);\n    V[0] = PI * A0 * A0 * DZ * (1 + 0.35 * sin(S.ph) + 0.04 * S.noise);\n    lk[0] = 1;\n  }\n  z[0] = max(z[0], ZN);\n  for (let i = 0; i \u003c S.n - 1; i++) {\n    if (!lk[i]) continue;\n    const L = z[i + 1] - z[i], hh = sqrt(V[i] / (PI * max(L, 1e-4))), lo = 0.22 + 0.2 * hh;\n    if (L > max(1, 2.6 * lo) && S.n \u003c NMAX - 2) {\n      insert(S, i + 1);\n      z[i + 1] = (z[i] + z[i + 2]) / 2;\n      u[i + 1] = (u[i] + u[i + 2]) / 2;\n      x[i + 1] = (x[i] + x[i + 2]) / 2;\n      V[i] /= 2;\n      V[i + 1] = V[i];\n      lk[i + 1] = 1;\n    } else if (hh \u003c HCUT) {\n      // Pinch-off.\n      lk[i] = 0;\n      if (i > 0 && lk[i - 1]) V[i - 1] += V[i] / 2;\n      if (i + 1 \u003c S.n - 1 && lk[i + 1]) V[i + 1] += V[i] / 2;\n    } else if (L \u003c lo) {\n      // Merge with a neighbour by dropping the shared node.\n      const left = i > 0 && lk[i - 1] && (!(i + 1 \u003c S.n - 1 && lk[i + 1]) || z[i] - z[i - 1] \u003c z[i + 2] - z[i + 1]);\n      const right = !left && i + 1 \u003c S.n - 1 && lk[i + 1];\n      if (left) {\n        // The dropped node's momentum goes half to each neighbour.\n        const mr = (V[i - 1] + V[i]) / 2, ma = V[i - 1] / 2, mb = V[i] / 2;\n        u[i - 1] = (u[i - 1] * ma + (u[i] * mr) / 2) / (ma + mr / 2);\n        u[i + 1] = (u[i + 1] * mb + (u[i] * mr) / 2) / (mb + mr / 2);\n        V[i - 1] += V[i];\n        remove(S, i);\n        i--;\n      } else if (right) {\n        const j = i + 1, mr = (V[i] + V[j]) / 2;\n        u[i] = (u[i] * V[i] / 2 + (u[j] * mr) / 2) / (V[i] / 2 + mr / 2);\n        u[j + 1] = (u[j + 1] * V[j] / 2 + (u[j] * mr) / 2) / (V[j] / 2 + mr / 2);\n        V[i] += V[j];\n        lk[i] = 1;\n        remove(S, j);\n      }\n    }\n  }\n  // Nodes left with no slice on either side go, but not the one at the opening.\n  for (let i = S.n - 1; i > 0; i--) if (!lk[i - 1] && !(i \u003c S.n - 1 && lk[i])) remove(S, i);\n  // Chains: roll a short free piece into a drop; pour what is in the pool.\n  let a = 0;\n  while (a \u003c S.n) {\n    let b = a;\n    while (b \u003c S.n - 1 && lk[b]) b++;\n    if (b > a) {\n      let vol = 0, mom = 0, zc = 0, xc = 0;\n      for (let i = a; i \u003c b; i++) {\n        vol += V[i];\n        mom += (V[i] * (u[i] + u[i + 1])) / 2;\n        zc += (V[i] * (z[i] + z[i + 1])) / 2;\n        xc += (V[i] * (x[i] + x[i + 1])) / 2;\n      }\n      const R = (0.75 * vol / PI) ** (1 / 3), len = z[b] - z[a];\n      if (a > 0 && (b - a \u003c= 2 || len \u003c 2.3 * R) && z[b] \u003c= S.lvl && S.drops.length \u003c PMAX) {\n        S.drops.push({ y: zc / vol, x: xc / vol, v: mom / vol, R, vol, e: cl(len / (2 * R) - 1, -0.4, 0.6), ph: 0 });\n        for (let i = b; i >= a; i--) remove(S, i);\n        continue;\n      }\n      // Slices wholly under the surface go into the pool.\n      while (b > a && z[b - 1] > S.lvl + 1) {\n        S.pour += V[b - 1];\n        remove(S, b);\n        lk[b - 1] = 0;\n        b--;\n      }\n    }\n    a = b + 1;\n  }\n}\n\nfunction drops(S, d) {\n  const { eta, etv } = S;\n  for (const p of S.drops) {\n    p.v += GR * d;\n    p.y += p.v * d;\n    // A drop rings at its lowest mode, sqrt(8 SIG / R^3), damped by viscosity.\n    p.ph += sqrt((8 * SIG) / (p.R * p.R * p.R)) * d;\n    p.e *= exp((-d * (5 * S.nu + 4)) / (p.R * p.R));\n  }\n  S.drops = S.drops.filter((p) => {\n    if (p.y - 0.3 * p.R \u003c S.lvl + eta[cl(round(p.x), 0, W - 1)]) return true;\n    S.pour += p.vol;\n    const k = p.vol * p.v * 0.0004;\n    for (let i = -6; i \u003c= 6; i++) {\n      const c = cl(round(p.x) + i, 0, W - 1);\n      etv[c] -= k * exp(-(i * i) / (p.R * p.R + 2));\n    }\n    return false;\n  });\n  // The pool fills with what comes in and drains back toward its rest level.\n  // A thicker serum drains away more slowly, so its pool stands higher.\n  S.lvl += -S.pour / (W * DEPTH) + (POOL - S.lvl) * min(1, d / (3 * (S.nu / NU0) ** 0.45));\n  S.pour = 0;\n  for (let i = 0; i \u003c W; i++) {\n    const l = eta[i > 0 ? i - 1 : i], r = eta[i \u003c W - 1 ? i + 1 : i];\n    etv[i] += d * (CW * CW * (l + r - 2 * eta[i]) - 4 * etv[i]);\n  }\n  for (let i = 0; i \u003c W; i++) eta[i] = cl(eta[i] + d * etv[i], -5, 5);\n}\n\nfunction advance(S, d) {\n  // Substeps short enough for the stiffest slice: a capillary wave as short\n  // as the slice rings at sqrt(SIG h / 2) (pi / L)^2.\n  let left = d;\n  while (left > 1e-6) {\n    let w = 0;\n    for (let i = 0; i \u003c S.n - 1; i++) {\n      if (!S.lk[i]) continue;\n      const L = max(0.05, S.z[i + 1] - S.z[i]), hh = sqrt(S.V[i] / (PI * L));\n      w = max(w, (sqrt((SIG * hh) / 2) * PI * PI) / (L * L));\n    }\n    const dt = min(left, 0.6 / max(w, 1), 1 / 120);\n    step(S, dt);\n    tidy(S);\n    drops(S, dt);\n    left -= dt;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.rate = cl(k[1], 0.2, 3) / 2;\n  S.nu = NU0 * 9 ** cl(k[2], -1, 1);\n  S.v0 = 34 * Q * TS * 2.2 ** cl(k[3], -1, 1);\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c 90; i++) advance(S, 1 / 30);\n    // The pool opens at the level where it drains as fast as it fills.\n    S.lvl = POOL - (PI * A0 * A0 * S.v0 * 3 * (S.nu / NU0) ** 0.45) / (W * DEPTH);\n  }\n  advance(S, d * S.rate);\n}\n\n// The radius and centre of the liquid at half-row samples.\nfunction profile(S) {\n  const { PH, PX, PD, z, x, V, lk } = S, n = S.n;\n  PH.fill(0);\n  PD.fill(0);\n  const put = (za, ha, xa, zb, hb, xb) => {\n    const k0 = max(0, Math.ceil(2 * za - 0.5)), k1 = min(2 * H - 1, floor(2 * zb - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const zz = (k + 0.5) / 2, t = zb > za ? (zz - za) / (zb - za) : 0, hh = ha + (hb - ha) * t;\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = xa + (xb - xa) * t;\n        PD[k] = zb > za ? (hb - ha) / (zb - za) : 0;\n      }\n    }\n  };\n  let a = 0;\n  while (a \u003c n) {\n    let b = a;\n    while (b \u003c n - 1 && lk[b]) b++;\n    if (b > a) {\n      let pz = 0, ph = 0, px = 0;\n      for (let i = a; i \u003c b; i++) {\n        const L = max(1e-3, z[i + 1] - z[i]), hh = sqrt(V[i] / (PI * L)), zm = (z[i] + z[i + 1]) / 2, xm = (x[i] + x[i + 1]) / 2;\n        if (i === a) {\n          // The upper end: the thread runs off the top edge, a free end is capped.\n          if (a === 0) put(z[a] - 2, hh, xm, zm, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm - cap * sqrt(1 - t0 * t0), hh * t0, xm, zm - cap * sqrt(1 - t1 * t1), hh * t1, xm);\n            }\n        } else put(pz, ph, px, zm, hh, xm);\n        if (i === b - 1) {\n          if (z[b] > S.lvl) put(zm, hh, xm, S.lvl + 2, hh, xm);\n          else\n            for (let c = 0; c \u003c 4; c++) {\n              const t0 = c / 4, t1 = (c + 1) / 4, cap = max(L / 2, 0.8 * hh);\n              put(zm + cap * sqrt(1 - t1 * t1), hh * t1, xm, zm + cap * sqrt(1 - t0 * t0), hh * t0, xm);\n            }\n        }\n        pz = zm;\n        ph = hh;\n        px = xm;\n      }\n    }\n    a = b + 1;\n  }\n  for (const p of S.drops) {\n    const dd = p.e * cos(p.ph), ry = p.R * (1 + dd), rx = p.R / sqrt(1 + dd);\n    const k0 = max(0, Math.ceil(2 * (p.y - ry) - 0.5)), k1 = min(2 * H - 1, floor(2 * (p.y + ry) - 0.5));\n    for (let k = k0; k \u003c= k1; k++) {\n      const w = ((k + 0.5) / 2 - p.y) / ry, hh = rx * sqrt(max(0, 1 - w * w));\n      if (hh > PH[k]) {\n        PH[k] = hh;\n        PX[k] = p.x;\n        PD[k] = (-rx * w) / ry / max(0.15, sqrt(max(0, 1 - w * w)));\n      }\n    }\n  }\n  // Smooth the radius along the thread so the light runs over it without\n  // steps, and take the slope from the smoothed radius.\n  const { PT } = S;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let k = 0; k \u003c 2 * H; k++) {\n      const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n      PT[k] = PH[k] > 0 && a > 0 && b > 0 ? 0.25 * a + 0.5 * PH[k] + 0.25 * b : PH[k];\n    }\n    PH.set(PT);\n  }\n  for (let k = 0; k \u003c 2 * H; k++) {\n    const a = PH[max(0, k - 1)], b = PH[min(2 * H - 1, k + 1)];\n    if (PH[k] > 0 && a > 0 && b > 0) PD[k] = cl(b - a, -4, 4);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  profile(S);\n  const { PH, PX, PD, ser, wall, eta } = S;\n  const hue = S.hue + H0;\n  hsv(hue, 0.85, 1, ser);\n  // Orange and yellow go brown and olive on a dim wall: there the wall is\n  // greyed and lifted and the pool glows with the serum's own colour.\n  const wu = (hue - floor(hue) - 0.13) / 0.19, wm = wu * wu \u003c 1 ? (1 - wu * wu) ** 2 : 0;\n  hsv(hue, 0.14 - 0.1 * wm, 1 + 0.18 * wm, wall);\n  const [sr, sg, sb] = ser, [wr, wg, wb] = wall;\n  // Absorption per LED of path through the serum, per channel.\n  const ar = 0.3 * (1 - sr), ag = 0.3 * (1 - sg), ab = 0.3 * (1 - sb);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let R = 0, G = 0, B = 0;\n      const px = x + 0.5, e0 = eta[max(0, x - 1)], e1 = eta[x], e2 = eta[min(W - 1, x + 1)];\n      const surf = S.lvl + 0.25 * e0 + 0.5 * e1 + 0.25 * e2, slope = (e2 - e0) / 2, pf = cl(y + 1 - surf, 0, 1);\n      if (pf \u003c 1)\n        for (let sub = 0; sub \u003c 2; sub++) {\n          const k = 2 * y + sub, zz = (k + 0.5) / 2, wv = lit(px, zz);\n          let r = wv * wr, g = wv * wg, b = wv * wb;\n          const hh = PH[k], dx = px - PX[k], cov = cl(hh - abs(dx) + 0.5, 0, 1);\n          if (cov > 0 && hh > 0.2) {\n            // Clear serum: the wall behind seen magnified through it and\n            // tinted by the path the light takes, a darker rim, an inner\n            // glow on the far side, a highlight down the near side.\n            const uu = cl(dx / hh, -0.97, 0.97), c = sqrt(1 - uu * uu), hz = PD[k], nn = 1 / sqrt(1 + hz * hz);\n            const nx = uu * nn, ny = c * nn, nz = -hz * nn;\n            const lv = 1.35 * lit(PX[k] + dx * 0.55, zz + 0.45 * hh * hz), path = 2 * hh * c + 0.5;\n            const rim = 1 - 0.5 * exp(-c * 4), glow = 0.7 * max(0, 0.55 * nx + 0.25 * ny + 0.55 * nz) ** 2;\n            const sp = max(0, -0.4 * nx + 0.82 * ny - 0.42 * nz), spec = 0.95 * sp ** 40 + 0.12 * sp ** 6;\n            r += (lv * wr * exp(-ar * path) * rim + sr * glow + spec - r) * cov;\n            g += (lv * wg * exp(-ag * path) * rim + sg * glow + spec - g) * cov;\n            b += (lv * wb * exp(-ab * path) * rim + sb * glow + spec - b) * cov;\n          }\n          R += r / 2;\n          G += g / 2;\n          B += b / 2;\n        }\n      if (pf > 0) {\n        // The pool: the wall seen through it, a little lower and deeper in\n        // colour further down, lit from within, a dark band under the surface.\n        const top = max(0, y + 0.5 - surf), wv = lit(px, surf + top * 0.75) * 1.15, path = 3 + 0.3 * top;\n        const dk = 1 - 0.35 * exp(-((top - 1.4) ** 2)), gl = 0.2 + 0.06 * wm;\n        R += ((wv * wr * exp(-0.4 * ar * path) + gl * sr) * dk - R) * pf;\n        G += ((wv * wg * exp(-0.4 * ag * path) + gl * sg) * dk - G) * pf;\n        B += ((wv * wb * exp(-0.4 * ab * path) + gl * sb) * dk - B) * pf;\n      }\n      // The bright line of the surface, brighter where a ripple tilts it to the light.\n      const ln = exp(-(((y + 0.5 - surf) / 0.55) ** 2)) * (0.5 + cl(-slope * 0.8, -0.35, 0.5));\n      R += ln;\n      G += ln;\n      B += ln;\n      display.setPixel(x, y, round(255 * min(1, R)), round(255 * min(1, G)), round(255 * min(1, B)));\n    }\n}\n\n// The lit wall, as a level: pale, light from the upper left, soft vertical\n// flutes 8 LEDs apart for the beads to magnify.\nconst lit = (x, z) => (0.4 + 0.24 * (1 - x / 90 - z / 300)) * (1 + 0.07 * cos((2 * PI * x) / 8));\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Viscosity=-1..1, Flow=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel, and the wall behind it takes a faint tint of the same hue. At 0 gold on a grey wall; at 0.04 yellow, 0.1 lime, 0.2 green, 0.36 aqua, 0.46 azure, 0.53 blue, 0.6 violet, 0.7 magenta, 0.78 rose, 0.86 red, 0.92 vermilion and 0.96 orange. From red-orange through gold to lime the wall is greyed and lifted a little and the pool lit from within, so the serum and its pool read amber, gold or lemon, never brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the serum leaves the top edge at 28 LEDs a second, falls the height of the panel in about 3 seconds, and a drop breaks off about every 1.4 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Viscosity","min":-1,"max":1,"about":"At 0 the ripples grow down the thread into beads on a string, the filaments between them thin and snap about row 80, and drops 15 LEDs across fall into a pool 14 rows deep, now and then with a satellite. At -1 the serum is nine times thinner and snaps into clean drops about row 45. Turned up, the beads stay joined longer: from about 0.35 the thread reaches the pool unbroken as a string of beads, and at 1, nine times thicker than at 0, the ripples barely grow and the pool, draining slower, stands 21 rows deep."},{"name":"Flow","min":-1,"max":1,"about":"How fast the serum leaves the top edge, 2.2 times slower at -1 and 2.2 times faster at 1. At -1 it cannot keep a thread going and drips: a drop swells below the top edge to 21 LEDs across and lets go about every 10 seconds; at -0.5 the thread breaks about row 60 into drops 19 across; from 0.5 it runs into the pool before it can break, and the pool rises to 19 rows."}],"start":[0,2,0,0.06],"measures":{"motion":0.1144,"detail":0.0191,"edges":0.1005,"complexity":1.4238,"coverage":1,"colour":0.2611,"drift":0.048},"knobResponse":[0.2045,0.0526,0.0374,0.0514]},{"slug":"serum-fingers","title":"Serum Fingers","family":"cosmetic","round":38,"note":"유리판 두 장 사이 진한 크림에 묽은 세럼을 밑에서 밀어 넣으면, 둥근 손가락이 부풀고 갈라지며 위로 다투어 올라가요. LED 는 세럼이 닿을 때 한 번만 바뀌고, 한 손가락이 꼭대기에 닿으면 크림이 가는 손가락부터 다시 덮고 새로 밀어요. K3 은 표면 장력을 낮춰 굵은 손가락 셋을 가는 손가락 열둘로 바꾸고, K1 을 누르면 크림이 바로 다시 덮어요.","idea":"A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.","buttons":"K1 tap: the cream closes back now and a new press begins.","code":"// ===== Patternflow pattern =====\n// Title:   Serum Fingers\n// Family:  cosmetic\n// Idea:    A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after a thin serum pressed into thick cream between two glass plates (Saffman-Taylor viscous fingering, Philip Saffman and Geoffrey Taylor, 1958, in a Hele-Shaw cell, Henry Selby Hele-Shaw, 1898)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in.\n// Knob 2: Speed. At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster.\n// Knob 3: Fingers. Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press.\n// Knob 4: Inlet. Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press.\n// Buttons: K1 tap: the cream closes back now and a new press begins.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, cos, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Serum pressed in, in LEDs of area a second at Speed 2.\nconst Q0 = 580;\n// A fresh run opens with the first PRE seconds of a press already in.\nconst PRE = 0.6;\n// The cream gives way at a front LED as the pressure drop across it to the\n// power ETA, times the roughness of the glass there, times 1 + SIG phi, where\n// phi is how much more of the disc round it is serum than at a flat front:\n// below 0 at a fingertip, which is held back, above 0 in a crevice, which is\n// filled up to CAP times faster. That is the surface tension that keeps the\n// fingers round. SIG is for Fingers 0.\nconst ETA = 0.7, SIG = 2, CAP = 1.6;\n// Gauss-Seidel sweeps of the pressure each frame, over-relaxed.\nconst SWEEPS = 12, OMEGA = 1.9;\n// The disc the curvature is read over: cells within RC of a front cell. A\n// flat front fills PHI0 of it with serum.\nconst RC = 3.2;\nconst DISC = [];\nfor (let dy = -3; dy \u003c= 3; dy++) for (let dx = -3; dx \u003c= 3; dx++) if (dx * dx + dy * dy \u003c= RC * RC) DISC.push(dx, dy);\nlet PHI0 = 0;\n{\n  let a = 0, b = 0;\n  for (let k = 0; k \u003c DISC.length; k += 2) {\n    b++;\n    if (DISC[k + 1] \u003c 0) a++;\n  }\n  PHI0 = a / b;\n}\n// Opening hue: aqua serum.\nconst H0 = 0.5;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, fingers: 0, inlet: 0, sigma: SIG, begun: false,\n    st: new Uint8Array(N), fill: new Float32Array(N), P: new Float32Array(N),\n    eta: new Float32Array(N), phi: new Float32Array(N), band: new Float32Array(N), fill0: new Float32Array(N), dist: new Float32Array(N),\n    seed: new Uint8Array(N), tex: new Float32Array(N), front: new Int32Array(N), nf: 0,\n    vol: 0, mode: 0, timer: 0, maxd: 1,\n    A: new Float32Array(4 * N), T: new Float32Array(4 * N), ser: [0, 0, 0], pale: [0, 0, 0], cream: [0, 0, 0],\n  };\n  const S = params.s;\n  // The cream's own static mottle, a few soft lumps.\n  const lumps = [];\n  for (let k = 0; k \u003c 14; k++) lumps.push([random() * W, random() * H, 6 + random() * 14, random() - 0.5]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v = 0;\n      for (const [lx, ly, r, a] of lumps) v += a * exp(-((x - lx) ** 2 + (y - ly) ** 2) / (r * r));\n      S.tex[y * W + x] = v;\n    }\n}\n\n// A fresh press: the inlet filled, the rest cream, new roughness in the glass.\nfunction fresh(S) {\n  const { st, fill, P, eta, band, seed } = S;\n  st.fill(0);\n  fill.fill(0);\n  seed.fill(0);\n  // The inlet: a slot along the whole bottom at Inlet 0, narrowing to a half\n  // disc 5 LEDs across at the bottom centre at 1, its lip rounded at each\n  // end. Along the slot the lip is waved, from 3 waves across the panel at\n  // Fingers -1 to 12 at 1, so the fingers start at the width they would grow.\n  const half = 32 - 30 * S.inlet, RE = 2.6, nb = round(6 * 2 ** S.fingers), ph = random() * 2 * PI, amps = [];\n  for (let k = 0; k \u003c 16; k++) amps.push(2 + 4 * random());\n  for (let y = H - 6; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = max(0, abs(x + 0.5 - W / 2) - (half - RE)), up = H - (y + 0.5);\n      const wv = (2 * PI * nb * (x + 0.5)) / W + ph, amp = amps[floor(wv / (2 * PI) + 0.5) % amps.length];\n      const lip = dx > 0 ? sqrt(max(0, RE * RE - dx * dx)) : 2 + amp * (0.5 + 0.5 * cos(wv));\n      if (dx \u003c= RE && up \u003c= lip) {\n        const p = y * W + x;\n        st[p] = 1;\n        fill[p] = 1;\n        seed[p] = 1;\n        band[p] = 0;\n      }\n    }\n  // Roughness of the glass: two octaves of smooth noise, 8 and 4 LEDs\n  // across, so the front is nudged at the scale of a finger, not per LED.\n  const g8 = [], g4 = [];\n  for (let k = 0; k \u003c 9 * 17; k++) g8.push(random() - 0.5);\n  for (let k = 0; k \u003c 17 * 33; k++) g4.push(random() - 0.5);\n  const vn = (g, s, gw, x, y) => {\n    const u = x / s, v = y / s, i = floor(u), j = floor(v), fu = u - i, fv = v - j, a = j * gw + i;\n    return (g[a] * (1 - fu) + g[a + 1] * fu) * (1 - fv) + (g[a + gw] * (1 - fu) + g[a + gw + 1] * fu) * fv;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      eta[p] = 1 + 0.5 * vn(g8, 8, 9, x, y) + 0.3 * vn(g4, 4, 17, x, y);\n      P[p] = st[p] ? 1 : y / H;\n    }\n  S.vol = 0;\n  S.mode = 0;\n  S.timer = 0;\n}\n\n// The front: every cream LED next to the serum, and phi there.\nfunction boundary(S) {\n  const { st, fill, front, phi } = S;\n  let nf = 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (st[p]) continue;\n      if ((x > 0 && st[p - 1]) || (x \u003c W - 1 && st[p + 1]) || (y > 0 && st[p - W]) || (y \u003c H - 1 && st[p + W])) {\n        let s = 0, c = 0;\n        for (let k = 0; k \u003c DISC.length; k += 2) {\n          const xx = x + DISC[k], yy = y + DISC[k + 1];\n          if (xx \u003c 0 || xx >= W || yy >= H) continue;\n          c++;\n          if (yy \u003c 0) continue;\n          const q = yy * W + xx;\n          s += st[q] ? 1 : fill[q];\n        }\n        phi[p] = s / c - PHI0;\n        front[nf++] = p;\n      }\n    }\n  S.nf = nf;\n}\n\n// Over-relaxed sweeps of Laplace's equation for the pressure in the cream:\n// 1 in the serum, which is so thin it holds one pressure throughout, 0 at the\n// top edge, where the cream leaves the cell, and no flow through the sides\n// and the bottom.\nfunction relax(S, sweeps) {\n  const { st, P } = S;\n  for (let it = 0; it \u003c sweeps; it++)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        if (st[p]) continue;\n        let s = 0, c = 0;\n        if (y === 0) c++;\n        else {\n          s += st[p - W] ? 1 : P[p - W];\n          c++;\n        }\n        if (y \u003c H - 1) {\n          s += st[p + W] ? 1 : P[p + W];\n          c++;\n        }\n        if (x > 0) {\n          s += st[p - 1] ? 1 : P[p - 1];\n          c++;\n        }\n        if (x \u003c W - 1) {\n          s += st[p + 1] ? 1 : P[p + 1];\n          c++;\n        }\n        P[p] += OMEGA * (s / c - P[p]);\n      }\n}\n\nconst speed = (S, p) => max(0, 1 - S.P[p]) ** ETA * S.eta[p] * cl(1 + S.sigma * S.phi[p], 0, CAP);\n\n// Press in vol LEDs of serum, shared among the front LEDs by how fast the\n// cream gives way at each.\nfunction grow(S, vol) {\n  const { st, fill, P, band, front, nf } = S;\n  let tot = 0;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k];\n    tot += speed(S, p);\n  }\n  if (tot \u003c= 0) return;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k], v = speed(S, p);\n    if (v \u003c= 0) continue;\n    if (fill[p] === 0) band[p] = S.vol;\n    fill[p] += (vol * v) / tot;\n    if (fill[p] >= 1) {\n      fill[p] = 1;\n      st[p] = 1;\n      P[p] = 1;\n      // A finger at the top edge: the cell is full.\n      if (p \u003c 2 * W) S.mode = 1;\n    }\n  }\n  S.vol += vol;\n}\n\n// The cream closing back: every serum LED's distance to the cream, so the\n// fingers thin from their sides and the trunks go last.\nfunction startClear(S) {\n  const { st, fill, fill0, dist, seed } = S;\n  for (let p = 0; p \u003c N; p++) {\n    fill0[p] = fill[p];\n    dist[p] = fill[p] >= 1 && !seed[p] ? 1e9 : 0;\n  }\n  const D = 1, DD = 1.414;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x > 0) d = min(d, dist[p - 1] + D);\n      if (y > 0) {\n        d = min(d, dist[p - W] + D);\n        if (x > 0) d = min(d, dist[p - W - 1] + DD);\n        if (x \u003c W - 1) d = min(d, dist[p - W + 1] + DD);\n      }\n      dist[p] = d;\n    }\n  let m = 1;\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x \u003c W - 1) d = min(d, dist[p + 1] + D);\n      if (y \u003c H - 1) {\n        d = min(d, dist[p + W] + D);\n        if (x \u003c W - 1) d = min(d, dist[p + W + 1] + DD);\n        if (x > 0) d = min(d, dist[p + W - 1] + DD);\n      }\n      dist[p] = d;\n      if (d \u003c 1e8 && d > m) m = d;\n    }\n  S.maxd = m;\n  S.mode = 2;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.fingers = cl(k[2], -1, 1);\n  S.inlet = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const rate = S.speed / 2;\n  // Surface tension: 6 at Fingers -1, 2 at 0, 0.67 at 1.\n  S.sigma = SIG * 3 ** -S.fingers;\n  if (!S.begun) {\n    // Open with the first PRE seconds of a press already in, as at Speed 2.\n    fresh(S);\n    boundary(S);\n    relax(S, 200);\n    for (let i = 0; i \u003c PRE * 30; i++) {\n      boundary(S);\n      relax(S, SWEEPS);\n      grow(S, Q0 / 30);\n    }\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.mode \u003c 2) startClear(S);\n  if (S.mode === 0 || S.mode === 1) {\n    boundary(S);\n    relax(S, SWEEPS);\n    if (S.mode === 0) grow(S, Q0 * rate * d);\n    else {\n      S.timer += d * rate;\n      if (S.timer > 1.5) startClear(S);\n    }\n  } else if (S.mode === 2) {\n    S.timer += d * rate;\n    const u = S.timer / 3, R = (S.maxd + 1.5) * u * u;\n    const { fill, fill0, dist, st, seed } = S;\n    for (let p = 0; p \u003c N; p++) {\n      if (seed[p] || fill0[p] \u003c= 0) continue;\n      const f = min(fill0[p], cl(dist[p] - R, 0, 1));\n      fill[p] = f;\n      st[p] = f >= 1 ? 1 : 0;\n    }\n    if (u >= 1) {\n      fresh(S);\n      boundary(S);\n      relax(S, 60);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { fill, band, tex, ser, pale, cream, A, T } = S;\n  const h = S.hue + H0;\n  hsv(h, 0.72, 1, ser);\n  hsv(h + 0.06, 0.3, 1, pale);\n  hsv(h + 0.5, 0.1, 0.28, cream);\n  // The serum's colour, times how full each LED is, and the fill itself,\n  // softened by a 3 by 3 blur so the fingers' edges are round on the LEDs.\n  // Each LED's serum colour is set once, by how much had been pressed in\n  // when the serum got there: faint growth rings.\n  for (let p = 0; p \u003c N; p++) {\n    const f = fill[p], o = 4 * p;\n    if (f \u003c= 0) {\n      A[o] = A[o + 1] = A[o + 2] = A[o + 3] = 0;\n      continue;\n    }\n    const ring = 0.5 + 0.5 * cos((band[p] / 300) * 2 * PI), kk = (0.88 + 0.12 * ring) * f;\n    A[o] = (ser[0] + (pale[0] - ser[0]) * ring * 0.5) * kk;\n    A[o + 1] = (ser[1] + (pale[1] - ser[1]) * ring * 0.5) * kk;\n    A[o + 2] = (ser[2] + (pale[2] - ser[2]) * ring * 0.5) * kk;\n    A[o + 3] = f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = 4 * (y * W + x), l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) T[o + c] = 0.25 * A[l + c] + 0.5 * A[o + c] + 0.25 * A[r + c];\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, o = 4 * p, u = y > 0 ? o - 4 * W : o, d = y \u003c H - 1 ? o + 4 * W : o;\n      const f = 0.25 * T[u + 3] + 0.5 * T[o + 3] + 0.25 * T[d + 3], t = (1 + tex[p] * 0.25) * (1 - f);\n      const r = cream[0] * t + 0.25 * T[u] + 0.5 * T[o] + 0.25 * T[d];\n      const g = cream[1] * t + 0.25 * T[u + 1] + 0.5 * T[o + 1] + 0.25 * T[d + 1];\n      const b = cream[2] * t + 0.25 * T[u + 2] + 0.5 * T[o + 2] + 0.25 * T[d + 2];\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-serum-fingers","type":"code","name":"serum-fingers","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Serum Fingers\n// Family:  cosmetic\n// Idea:    A thin bright serum is pressed in through a slot along the bottom of a layer of thick pale cream between two glass plates and pushes up through it in rounded fingers that bulge, split and compete, two or three leaders racing for the top while the rest stall, each LED turning from cream to serum once as a finger reaches it; when a finger reaches the top the cream closes back over the fingers, thin ones first, and a new press begins.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 38, after a thin serum pressed into thick cream between two glass plates (Saffman-Taylor viscous fingering, Philip Saffman and Geoffrey Taylor, 1958, in a Hele-Shaw cell, Henry Selby Hele-Shaw, 1898)\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1\n//\n// Knob 1: Hue. Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in.\n// Knob 2: Speed. At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster.\n// Knob 3: Fingers. Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press.\n// Knob 4: Inlet. Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press.\n// Buttons: K1 tap: the cream closes back now and a new press begins.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, abs, sqrt, cos, exp, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// Serum pressed in, in LEDs of area a second at Speed 2.\nconst Q0 = 580;\n// A fresh run opens with the first PRE seconds of a press already in.\nconst PRE = 0.6;\n// The cream gives way at a front LED as the pressure drop across it to the\n// power ETA, times the roughness of the glass there, times 1 + SIG phi, where\n// phi is how much more of the disc round it is serum than at a flat front:\n// below 0 at a fingertip, which is held back, above 0 in a crevice, which is\n// filled up to CAP times faster. That is the surface tension that keeps the\n// fingers round. SIG is for Fingers 0.\nconst ETA = 0.7, SIG = 2, CAP = 1.6;\n// Gauss-Seidel sweeps of the pressure each frame, over-relaxed.\nconst SWEEPS = 12, OMEGA = 1.9;\n// The disc the curvature is read over: cells within RC of a front cell. A\n// flat front fills PHI0 of it with serum.\nconst RC = 3.2;\nconst DISC = [];\nfor (let dy = -3; dy \u003c= 3; dy++) for (let dx = -3; dx \u003c= 3; dx++) if (dx * dx + dy * dy \u003c= RC * RC) DISC.push(dx, dy);\nlet PHI0 = 0;\n{\n  let a = 0, b = 0;\n  for (let k = 0; k \u003c DISC.length; k += 2) {\n    b++;\n    if (DISC[k + 1] \u003c 0) a++;\n  }\n  PHI0 = a / b;\n}\n// Opening hue: aqua serum.\nconst H0 = 0.5;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, fingers: 0, inlet: 0, sigma: SIG, begun: false,\n    st: new Uint8Array(N), fill: new Float32Array(N), P: new Float32Array(N),\n    eta: new Float32Array(N), phi: new Float32Array(N), band: new Float32Array(N), fill0: new Float32Array(N), dist: new Float32Array(N),\n    seed: new Uint8Array(N), tex: new Float32Array(N), front: new Int32Array(N), nf: 0,\n    vol: 0, mode: 0, timer: 0, maxd: 1,\n    A: new Float32Array(4 * N), T: new Float32Array(4 * N), ser: [0, 0, 0], pale: [0, 0, 0], cream: [0, 0, 0],\n  };\n  const S = params.s;\n  // The cream's own static mottle, a few soft lumps.\n  const lumps = [];\n  for (let k = 0; k \u003c 14; k++) lumps.push([random() * W, random() * H, 6 + random() * 14, random() - 0.5]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v = 0;\n      for (const [lx, ly, r, a] of lumps) v += a * exp(-((x - lx) ** 2 + (y - ly) ** 2) / (r * r));\n      S.tex[y * W + x] = v;\n    }\n}\n\n// A fresh press: the inlet filled, the rest cream, new roughness in the glass.\nfunction fresh(S) {\n  const { st, fill, P, eta, band, seed } = S;\n  st.fill(0);\n  fill.fill(0);\n  seed.fill(0);\n  // The inlet: a slot along the whole bottom at Inlet 0, narrowing to a half\n  // disc 5 LEDs across at the bottom centre at 1, its lip rounded at each\n  // end. Along the slot the lip is waved, from 3 waves across the panel at\n  // Fingers -1 to 12 at 1, so the fingers start at the width they would grow.\n  const half = 32 - 30 * S.inlet, RE = 2.6, nb = round(6 * 2 ** S.fingers), ph = random() * 2 * PI, amps = [];\n  for (let k = 0; k \u003c 16; k++) amps.push(2 + 4 * random());\n  for (let y = H - 6; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = max(0, abs(x + 0.5 - W / 2) - (half - RE)), up = H - (y + 0.5);\n      const wv = (2 * PI * nb * (x + 0.5)) / W + ph, amp = amps[floor(wv / (2 * PI) + 0.5) % amps.length];\n      const lip = dx > 0 ? sqrt(max(0, RE * RE - dx * dx)) : 2 + amp * (0.5 + 0.5 * cos(wv));\n      if (dx \u003c= RE && up \u003c= lip) {\n        const p = y * W + x;\n        st[p] = 1;\n        fill[p] = 1;\n        seed[p] = 1;\n        band[p] = 0;\n      }\n    }\n  // Roughness of the glass: two octaves of smooth noise, 8 and 4 LEDs\n  // across, so the front is nudged at the scale of a finger, not per LED.\n  const g8 = [], g4 = [];\n  for (let k = 0; k \u003c 9 * 17; k++) g8.push(random() - 0.5);\n  for (let k = 0; k \u003c 17 * 33; k++) g4.push(random() - 0.5);\n  const vn = (g, s, gw, x, y) => {\n    const u = x / s, v = y / s, i = floor(u), j = floor(v), fu = u - i, fv = v - j, a = j * gw + i;\n    return (g[a] * (1 - fu) + g[a + 1] * fu) * (1 - fv) + (g[a + gw] * (1 - fu) + g[a + gw + 1] * fu) * fv;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      eta[p] = 1 + 0.5 * vn(g8, 8, 9, x, y) + 0.3 * vn(g4, 4, 17, x, y);\n      P[p] = st[p] ? 1 : y / H;\n    }\n  S.vol = 0;\n  S.mode = 0;\n  S.timer = 0;\n}\n\n// The front: every cream LED next to the serum, and phi there.\nfunction boundary(S) {\n  const { st, fill, front, phi } = S;\n  let nf = 0;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (st[p]) continue;\n      if ((x > 0 && st[p - 1]) || (x \u003c W - 1 && st[p + 1]) || (y > 0 && st[p - W]) || (y \u003c H - 1 && st[p + W])) {\n        let s = 0, c = 0;\n        for (let k = 0; k \u003c DISC.length; k += 2) {\n          const xx = x + DISC[k], yy = y + DISC[k + 1];\n          if (xx \u003c 0 || xx >= W || yy >= H) continue;\n          c++;\n          if (yy \u003c 0) continue;\n          const q = yy * W + xx;\n          s += st[q] ? 1 : fill[q];\n        }\n        phi[p] = s / c - PHI0;\n        front[nf++] = p;\n      }\n    }\n  S.nf = nf;\n}\n\n// Over-relaxed sweeps of Laplace's equation for the pressure in the cream:\n// 1 in the serum, which is so thin it holds one pressure throughout, 0 at the\n// top edge, where the cream leaves the cell, and no flow through the sides\n// and the bottom.\nfunction relax(S, sweeps) {\n  const { st, P } = S;\n  for (let it = 0; it \u003c sweeps; it++)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        if (st[p]) continue;\n        let s = 0, c = 0;\n        if (y === 0) c++;\n        else {\n          s += st[p - W] ? 1 : P[p - W];\n          c++;\n        }\n        if (y \u003c H - 1) {\n          s += st[p + W] ? 1 : P[p + W];\n          c++;\n        }\n        if (x > 0) {\n          s += st[p - 1] ? 1 : P[p - 1];\n          c++;\n        }\n        if (x \u003c W - 1) {\n          s += st[p + 1] ? 1 : P[p + 1];\n          c++;\n        }\n        P[p] += OMEGA * (s / c - P[p]);\n      }\n}\n\nconst speed = (S, p) => max(0, 1 - S.P[p]) ** ETA * S.eta[p] * cl(1 + S.sigma * S.phi[p], 0, CAP);\n\n// Press in vol LEDs of serum, shared among the front LEDs by how fast the\n// cream gives way at each.\nfunction grow(S, vol) {\n  const { st, fill, P, band, front, nf } = S;\n  let tot = 0;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k];\n    tot += speed(S, p);\n  }\n  if (tot \u003c= 0) return;\n  for (let k = 0; k \u003c nf; k++) {\n    const p = front[k], v = speed(S, p);\n    if (v \u003c= 0) continue;\n    if (fill[p] === 0) band[p] = S.vol;\n    fill[p] += (vol * v) / tot;\n    if (fill[p] >= 1) {\n      fill[p] = 1;\n      st[p] = 1;\n      P[p] = 1;\n      // A finger at the top edge: the cell is full.\n      if (p \u003c 2 * W) S.mode = 1;\n    }\n  }\n  S.vol += vol;\n}\n\n// The cream closing back: every serum LED's distance to the cream, so the\n// fingers thin from their sides and the trunks go last.\nfunction startClear(S) {\n  const { st, fill, fill0, dist, seed } = S;\n  for (let p = 0; p \u003c N; p++) {\n    fill0[p] = fill[p];\n    dist[p] = fill[p] >= 1 && !seed[p] ? 1e9 : 0;\n  }\n  const D = 1, DD = 1.414;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x > 0) d = min(d, dist[p - 1] + D);\n      if (y > 0) {\n        d = min(d, dist[p - W] + D);\n        if (x > 0) d = min(d, dist[p - W - 1] + DD);\n        if (x \u003c W - 1) d = min(d, dist[p - W + 1] + DD);\n      }\n      dist[p] = d;\n    }\n  let m = 1;\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      if (!dist[p]) continue;\n      let d = dist[p];\n      if (x \u003c W - 1) d = min(d, dist[p + 1] + D);\n      if (y \u003c H - 1) {\n        d = min(d, dist[p + W] + D);\n        if (x \u003c W - 1) d = min(d, dist[p + W + 1] + DD);\n        if (x > 0) d = min(d, dist[p + W - 1] + DD);\n      }\n      dist[p] = d;\n      if (d \u003c 1e8 && d > m) m = d;\n    }\n  S.maxd = m;\n  S.mode = 2;\n  S.timer = 0;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.fingers = cl(k[2], -1, 1);\n  S.inlet = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  const rate = S.speed / 2;\n  // Surface tension: 6 at Fingers -1, 2 at 0, 0.67 at 1.\n  S.sigma = SIG * 3 ** -S.fingers;\n  if (!S.begun) {\n    // Open with the first PRE seconds of a press already in, as at Speed 2.\n    fresh(S);\n    boundary(S);\n    relax(S, 200);\n    for (let i = 0; i \u003c PRE * 30; i++) {\n      boundary(S);\n      relax(S, SWEEPS);\n      grow(S, Q0 / 30);\n    }\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0] && S.mode \u003c 2) startClear(S);\n  if (S.mode === 0 || S.mode === 1) {\n    boundary(S);\n    relax(S, SWEEPS);\n    if (S.mode === 0) grow(S, Q0 * rate * d);\n    else {\n      S.timer += d * rate;\n      if (S.timer > 1.5) startClear(S);\n    }\n  } else if (S.mode === 2) {\n    S.timer += d * rate;\n    const u = S.timer / 3, R = (S.maxd + 1.5) * u * u;\n    const { fill, fill0, dist, st, seed } = S;\n    for (let p = 0; p \u003c N; p++) {\n      if (seed[p] || fill0[p] \u003c= 0) continue;\n      const f = min(fill0[p], cl(dist[p] - R, 0, 1));\n      fill[p] = f;\n      st[p] = f >= 1 ? 1 : 0;\n    }\n    if (u >= 1) {\n      fresh(S);\n      boundary(S);\n      relax(S, 60);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { fill, band, tex, ser, pale, cream, A, T } = S;\n  const h = S.hue + H0;\n  hsv(h, 0.72, 1, ser);\n  hsv(h + 0.06, 0.3, 1, pale);\n  hsv(h + 0.5, 0.1, 0.28, cream);\n  // The serum's colour, times how full each LED is, and the fill itself,\n  // softened by a 3 by 3 blur so the fingers' edges are round on the LEDs.\n  // Each LED's serum colour is set once, by how much had been pressed in\n  // when the serum got there: faint growth rings.\n  for (let p = 0; p \u003c N; p++) {\n    const f = fill[p], o = 4 * p;\n    if (f \u003c= 0) {\n      A[o] = A[o + 1] = A[o + 2] = A[o + 3] = 0;\n      continue;\n    }\n    const ring = 0.5 + 0.5 * cos((band[p] / 300) * 2 * PI), kk = (0.88 + 0.12 * ring) * f;\n    A[o] = (ser[0] + (pale[0] - ser[0]) * ring * 0.5) * kk;\n    A[o + 1] = (ser[1] + (pale[1] - ser[1]) * ring * 0.5) * kk;\n    A[o + 2] = (ser[2] + (pale[2] - ser[2]) * ring * 0.5) * kk;\n    A[o + 3] = f;\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = 4 * (y * W + x), l = x > 0 ? o - 4 : o, r = x \u003c W - 1 ? o + 4 : o;\n      for (let c = 0; c \u003c 4; c++) T[o + c] = 0.25 * A[l + c] + 0.5 * A[o + c] + 0.25 * A[r + c];\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, o = 4 * p, u = y > 0 ? o - 4 * W : o, d = y \u003c H - 1 ? o + 4 * W : o;\n      const f = 0.25 * T[u + 3] + 0.5 * T[o + 3] + 0.25 * T[d + 3], t = (1 + tex[p] * 0.25) * (1 - f);\n      const r = cream[0] * t + 0.25 * T[u] + 0.5 * T[o] + 0.25 * T[d];\n      const g = cream[1] * t + 0.25 * T[u + 1] + 0.5 * T[o + 1] + 0.25 * T[d + 1];\n      const b = cream[2] * t + 0.25 * T[u + 2] + 0.5 * T[o + 2] + 0.25 * T[d + 2];\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Fingers=-1..1, Inlet=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the serum round the whole wheel, the cream a faint tint of the opposite hue. At 0 aqua serum on warm grey cream; at 0.1 azure, at 0.2 violet, at 0.3 orchid, at 0.4 rose, at 0.5 coral, at 0.6 orange, at 0.7 lime, at 0.8 green, at 0.9 jade, each on cream tinted the other way. Faint growth rings in the serum, paler bands between deeper ones 12% dimmer, show where the front stood after every 300 LEDs pressed in."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the serum goes in at 580 LEDs of area a second and a finger reaches the top 9 to 11 seconds into a press; the cell then holds for 1.5 seconds and the cream closes back over 3. At 0.2 all of it ten times slower, the fingers only climbing; at 3 one and a half times faster."},{"name":"Fingers","min":-1,"max":1,"about":"Surface tension, 9 times higher at -1 than at 1. At -1 the lip of the slot carries 3 waves and three fat round fingers rise side by side and seldom split; at 0 six waves, of which two or three fingers win, bulge and split into lobes; at 1 twelve thin fingers, one of which takes off with ragged sides and reaches the top about 2 seconds sooner. The waves of the lip change at the next press."},{"name":"Inlet","min":0,"max":1,"about":"Where the serum comes in. Up to 0.06 a slot along the whole bottom; toward 1 the slot narrows to a half disc 5 LEDs across at the bottom centre and the serum rises from it as one broad plume whose sides bulge into lobes. Takes effect at the next press."}],"start":[0,2,0,0.06],"measures":{"motion":0.0418,"detail":0.0193,"edges":0.1667,"complexity":0.987,"coverage":1,"colour":0.3588,"drift":0.2509},"knobResponse":[0.1449,0.1034,0.0454,0.0842]},{"slug":"serum-gel","title":"Serum Gel","family":"cosmetic","round":29,"note":"연보라 젤 속에 진주와 캡슐, 기포가 떠서 천천히 흔들리고, 뒤쪽 벽에는 젤 표면을 지난 빛이 부드러운 그물로 어른거려요. K3 은 구슬 수를 여덟에서 마흔까지 바꾸고, 누르면 젤이 크게 출렁이며 구슬이 늘어났다 줄어들며 흔들리다 가라앉아요.","idea":"A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.","buttons":"K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.","code":"// ===== Patternflow pattern =====\n// Title:   Serum Gel\n// Family:  cosmetic\n// Idea:    A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the macro shots of serum and gel cream with suspended beads in skincare films\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1\n//\n// Knob 1: Hue. Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac.\n// Knob 2: Speed. How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still.\n// Knob 3: Beads. How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one.\n// Knob 4: Wobble. How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging.\n// Buttons: K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, pow, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The opening hue: lilac, not red.\nconst H0 = 0.78;\n// Light rays are cast from a grid SS times finer than the LEDs, over a\n// margin M beyond the panel so the edges get light from outside too. How\n// far each ray is bent is worked out on a coarser grid, GS LEDs a step,\n// since the ripples are much longer than that, and read between its points.\nconst SS = 1.5, M = 4, GS = 2, GW = (W + 2 * M) / GS + 2, GH = (H + 2 * M) / GS + 2;\nconst RW = (W + 2 * M) * SS, RH = (H + 2 * M) * SS;\n// The surface ripples: six waves 18 to 40 LEDs long.\nconst NWV = 6;\n// Specks of air, always there whatever the Beads knob says.\nconst SPECKS = 16;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The gel's low modes of wobble, as displacement fields: side to side with\n// the top swinging most, a bounce, a twist, and a squeeze. Each is a damped\n// spring with its angular frequency at Speed 2.\nconst MODES = 4;\nconst OMEGA = [3.1, 4.3, 2.6, 5.4];\n// They are kept on the coarse grid, which runs M LEDs past the panel on\n// every side; the gel past the panel's edges does not move.\nconst GN = GW * GH, MX = new Float32Array(MODES * GN), MY = new Float32Array(MODES * GN);\nfor (let j = 0; j \u003c GH; j++)\n  for (let i = 0; i \u003c GW; i++) {\n    const x = cl(i * GS - M, 0, W), y = cl(j * GS - M, 0, H), p = j * GW + i;\n    const sx = sin((PI * x) / W), sy = sin((PI * y) / H), top = cos((PI * y) / (2 * H));\n    MX[p] = sx * top;\n    MY[GN + p] = sx * sy;\n    MX[2 * GN + p] = (-(y - H / 2) / 40) * sx * sy;\n    MY[2 * GN + p] = ((x - W / 2) / 40) * sx * sy;\n    MX[3 * GN + p] = sin((2 * PI * x) / W) * sy;\n  }\n// A cosine table, 1024 steps a turn.\nconst CT = new Float32Array(1024).map((_, i) => cos((i * 2 * PI) / 1024));\nconst fcos = (a) => CT[(a * 162.97466) & 1023];\n\nexport function setup(params) {\n  params.s = {\n    t: 0, wv: new Float32Array(NWV * 8), ph: new Float32Array(NWV), md: new Float32Array(MODES * 2), drive: new Float32Array(MODES), dead: 0,\n    gx: new Float32Array(GN), gy: new Float32Array(GN), acc: new Float32Array(N), tmp: new Float32Array(N),\n    beads: [], want: 0, hue: 0, wob: 0.06, sp: 2, ready: false,\n    bg: new Float32Array(N * 3), col: new Float32Array(8 * 3),\n  };\n  const P = params.s;\n  // Each ripple: its wave vector, how fast it creeps (0.4 to 1.2 LEDs a\n  // second at Speed 2), its phase, the direction it bends light, and how\n  // fast it jiggles to and fro in place, as a gel's surface does.\n  for (let i = 0; i \u003c NWV; i++) {\n    const a = (i / NWV) * PI + rnd() * 0.5, L = 18 + rnd() * 22, o = i * 8;\n    P.wv[o] = (cos(a) * 2 * PI) / L;\n    P.wv[o + 1] = (sin(a) * 2 * PI) / L;\n    P.wv[o + 2] = ((0.4 + rnd() * 0.8) * 2 * PI) / L;\n    P.wv[o + 3] = rnd() * 2 * PI;\n    P.wv[o + 4] = cos(a);\n    P.wv[o + 5] = sin(a);\n    P.wv[o + 6] = 1.6 + rnd() * 1.6;\n    P.wv[o + 7] = rnd() * 2 * PI;\n  }\n}\n\n// A bead hanging at rest point (hx, hy), depth z from 0 (near) to 1 (far),\n// and where it is now. Kind 0 is a pearl, 3 a tinted capsule, 1 an air\n// bubble, 2 one of the specks of air that every gel holds. The fewer beads,\n// the bigger they are. Each new one tries a few places in its own band of\n// the panel's height and keeps the one furthest from the others, so they\n// spread out.\nfunction bead(P, n, kind, all, band, bands) {\n  const big = 10 * sqrt(8 / n), z = rnd(), f = 1 - 0.45 * z;\n  const r = kind === 2 ? 0.7 + rnd() * 0.8 : kind === 1 ? big * (0.3 + 0.3 * rnd()) * f : big * (0.65 + 0.35 * rnd()) * f;\n  let bx = 0, by = 0, best = -1;\n  for (let tries = 0; tries \u003c 12; tries++) {\n    const x = r + 1 + rnd() * (W - 2 * r - 2), y = cl(((band + rnd()) / bands) * H, r + 2, H - r - 3);\n    let near = 1e9;\n    for (const b of all) if (!b.gone && b.kind !== 2) near = min(near, sqrt((b.hx - x) ** 2 + (b.hy - y) ** 2) - b.r - r);\n    if (near > best) (best = near), (bx = x), (by = y);\n  }\n  if (kind === 0 && rnd() \u003c 0.4) kind = 3;\n  return { hx: bx, hy: by, x: bx, y: by, vx: 0, vy: 0, r, z, kind, ph: rnd() * 2 * PI, fq: 0.5 + rnd() * 0.5, a: 0, gone: false };\n}\n\n// Keep as many beads, pearls and capsules, as the knob asks for, and two\n// bubbles for every three beads: new ones fade in, spare ones fade out, and\n// the far ones are drawn first.\nfunction census(P, n) {\n  if (!P.beads.length) for (let i = 0; i \u003c SPECKS; i++) P.beads.push(bead(P, 8, 2, P.beads, i, SPECKS));\n  for (let kind = 0; kind \u003c 2; kind++) {\n    const want = kind ? Math.round((n * 2) / 3) : n, live = P.beads.filter((b) => !b.gone && (b.kind === kind || b.kind === kind + 3));\n    if (live.length \u003c want) for (let i = live.length; i \u003c want; i++) P.beads.push(bead(P, n, kind, P.beads, (i * 7) % want, want));\n    else for (let i = want; i \u003c live.length; i++) live[i].gone = true;\n  }\n  P.beads.sort((a, b) => b.z - a.z);\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\nfunction step(P, dt, sp, wob) {\n  P.t += dt * sp * 0.5;\n  // The modes ring like springs; a slow random push keeps them moving by as\n  // much as Wobble asks.\n  const md = P.md, dr = P.drive, k = sp * 0.5;\n  for (let m = 0; m \u003c MODES; m++) {\n    const w = OMEGA[m] * k, ze = 0.07;\n    dr[m] += (rnd() - 0.5) * dt * 6;\n    dr[m] *= 1 - dt * 0.8;\n    const f = dr[m] * (0.6 + 9 * wob) * w * w * 0.25;\n    let x = md[m * 2], v = md[m * 2 + 1];\n    v += (-w * w * x - 2 * ze * w * v + f) * dt;\n    x += v * dt;\n    md[m * 2] = x;\n    md[m * 2 + 1] = v;\n  }\n  // Beads hang from the gel on springs of their own, softer than the gel, so\n  // they lag behind its swing and then catch up; each drifts a little round\n  // its rest point on its own.\n  for (const b of P.beads) {\n    b.a = b.gone ? max(0, b.a - dt * 1.5) : min(1, b.a + dt * 1.5);\n    if (b.gone && b.a \u003c= 0) P.dead = 1;\n    const p = Math.round((b.hy + M) / GS) * GW + Math.round((b.hx + M) / GS);\n    let ux = 0, uy = 0;\n    for (let m = 0; m \u003c MODES; m++) {\n      ux += md[m * 2] * MX[m * GN + p];\n      uy += md[m * 2] * MY[m * GN + p];\n    }\n    const par = 1.15 - 0.4 * b.z, dfx = 1.4 * sin(P.t * b.fq + b.ph), dfy = 1.8 * sin(P.t * b.fq * 0.71 + b.ph * 1.3);\n    const tx = b.hx + ux * par + dfx, ty = b.hy + uy * par + dfy, w = 2.4 * k * (1.1 - 0.3 * b.z);\n    b.vx += ((tx - b.x) * w * w - 2 * 0.12 * w * b.vx) * dt;\n    b.vy += ((ty - b.y) * w * w - 2 * 0.12 * w * b.vy) * dt;\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n  }\n  if (P.dead) (P.beads = P.beads.filter((b) => !b.gone || b.a > 0)), (P.dead = 0);\n}\n\n// Light comes down through the gel's rippled surface and lands on the back\n// wall. Each ray is bent by the surface's slope where it entered, by up to a\n// few LEDs, and by the gel's wobble; where the rays crowd together the wall\n// is bright, the caustic net.\nfunction caustics(P, wob) {\n  const { gx, gy, acc, wv, md } = P;\n  // A jiggling gel ripples more: the bend grows with Wobble and with how\n  // hard the modes are swinging.\n  let e = 0;\n  for (let m = 0; m \u003c MODES; m++) e += abs(md[m * 2]);\n  const amp = (1.1 + 0.8 * wob + 0.15 * min(6, e)) / sqrt(NWV / 3), t = P.t * 2, ph = P.ph, jig = 0.5 + 0.8 * wob + 0.12 * min(6, e);\n  for (let w = 0; w \u003c NWV; w++) ph[w] = wv[w * 8 + 3] - wv[w * 8 + 2] * t + jig * sin(wv[w * 8 + 6] * t + wv[w * 8 + 7]);\n  const m0 = md[0] * 0.8, m1 = md[2] * 0.8, m2 = md[4] * 0.8, m3 = md[6] * 0.8;\n  for (let j = 0, q = 0; j \u003c GH; j++)\n    for (let i = 0; i \u003c GW; i++, q++) {\n      const x = i * GS - M, y = j * GS - M;\n      let sx = 0, sy = 0;\n      for (let w = 0; w \u003c NWV; w++) {\n        const c = fcos(wv[w * 8] * x + wv[w * 8 + 1] * y + ph[w]);\n        sx += wv[w * 8 + 4] * c;\n        sy += wv[w * 8 + 5] * c;\n      }\n      // The back wall moves with the gel, so the whole net swings with it.\n      gx[q] = sx * amp + m0 * MX[q] + m2 * MX[2 * GN + q] + m3 * MX[3 * GN + q];\n      gy[q] = sy * amp + m1 * MY[GN + q] + m2 * MY[2 * GN + q];\n    }\n  acc.fill(0);\n  const wgt = 1 / (SS * SS), inv = 1 / SS, gi = 1 / GS;\n  for (let rj = 0; rj \u003c RH; rj++) {\n    const fy = rj * inv, uy = fy * gi, j0 = floor(uy), ty = uy - j0;\n    for (let ri = 0; ri \u003c RW; ri++) {\n      const fx = ri * inv, ux = fx * gi, i0 = floor(ux), tx = ux - i0, q = j0 * GW + i0;\n      const X = fx - M + (gx[q] * (1 - tx) + gx[q + 1] * tx) * (1 - ty) + (gx[q + GW] * (1 - tx) + gx[q + GW + 1] * tx) * ty;\n      const Y = fy - M + (gy[q] * (1 - tx) + gy[q + 1] * tx) * (1 - ty) + (gy[q + GW] * (1 - tx) + gy[q + GW + 1] * tx) * ty;\n      const ix = floor(X), iy = floor(Y);\n      if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) continue;\n      const ax = X - ix, ay = Y - iy;\n      if (iy >= 0) {\n        if (ix >= 0) acc[iy * W + ix] += wgt * (1 - ax) * (1 - ay);\n        if (ix \u003c W - 1) acc[iy * W + ix + 1] += wgt * ax * (1 - ay);\n      }\n      if (iy \u003c H - 1) {\n        if (ix >= 0) acc[(iy + 1) * W + ix] += wgt * (1 - ax) * ay;\n        if (ix \u003c W - 1) acc[(iy + 1) * W + ix + 1] += wgt * ax * ay;\n      }\n    }\n  }\n  // Gel is not quite clear: the light softens on its way to the wall, and\n  // each line of it gets a halo on the LEDs beside it.\n  blur(acc, P.tmp);\n  blur(acc, P.tmp);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.wob = cl(k[3], 0, 1);\n  const n = cl(Math.round(k[2]), 8, 40);\n  if (n !== P.want) (P.want = n), census(P, n);\n  if (!P.ready) {\n    // The first frame already shows the gel settled and swaying.\n    for (const b of P.beads) b.a = 1;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, P.sp, P.wob);\n    P.ready = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A knock: the sway and the bounce get a hard kick, the others a little.\n    const s = rnd() \u003c 0.5 ? -1 : 1, w = P.sp * 0.5;\n    P.md[1] += s * 10 * OMEGA[0] * w;\n    P.md[3] += (rnd() - 0.5) * 8 * OMEGA[1] * w;\n    P.md[5] += (rnd() - 0.5) * 4 * OMEGA[2] * w;\n    P.md[7] += (rnd() - 0.5) * 3 * OMEGA[3] * w;\n  }\n  let t = d;\n  while (t > 1e-6) {\n    const h = min(t, 1 / 60);\n    step(P, h, P.sp, P.wob);\n    t -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  caustics(P, P.wob);\n  const { acc, bg, col } = P, hue = H0 + P.hue;\n  // Gel light and deep, caustic light, pearl one side, pearl rim, pearl\n  // other side, capsule body and its gathered light. Orange and yellow gel\n  // darkened reads as brown and olive on LEDs, so around those hues the gel\n  // is kept lighter, like honey.\n  const hw = (hue - floor(hue) + 0.38) % 1, am = max(0, 1 - abs(hw - 0.5) / 0.11);\n  hsv(hue, 0.72 - 0.12 * am, 0.62 + 0.3 * am, col, 0);\n  hsv(hue + 0.02, 0.85 - 0.1 * am, 0.3 + 0.38 * am, col, 3);\n  hsv(hue - 0.03, 0.35, 1, col, 6);\n  hsv(hue + 0.12, 0.2, 1, col, 9);\n  hsv(hue - 0.14, 0.6, 1, col, 12);\n  hsv(hue - 0.1, 0.2, 1, col, 15);\n  hsv(hue + 0.05, 0.95, 0.5, col, 18);\n  hsv(hue + 0.02, 0.5, 1, col, 21);\n  // The gel: light from above, so the top glows and the bottom is deeper,\n  // and over it the net of caustic light.\n  for (let y = 0; y \u003c H; y++) {\n    const g = 1 - (0.55 * y) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, l = cl(acc[p] - 0.6, 0, 1.6) * 0.5;\n      for (let q = 0; q \u003c 3; q++) bg[p * 3 + q] = col[q] * g + col[3 + q] * (1 - g) + col[6 + q] * l * (0.55 + 0.45 * g);\n    }\n  }\n  // Beads and bubbles, far ones first.\n  for (const b of P.beads) drawBead(P, b);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, bg[p * 3]), min(255, bg[p * 3 + 1]), min(255, bg[p * 3 + 2]));\n}\n\n// Pearls are lit from above through the gel, their white leaning one way\n// round the colour wheel on one side and the other way on the other, as a\n// pearl's sheen shifts, with a rim and a white highlight. A capsule is clear and deeply tinted: light coming down through\n// it gathers into a bright spot low inside it. An air bubble is clear, the\n// gel behind it brighter, with a thin bright rim and a highlight; a speck is\n// a point of light. Far ones sink into the gel's colour.\nfunction drawBead(P, b) {\n  // A bead swinging through the gel is drawn out a little along its path\n  // and squeezed across it, so it jiggles as it swings and settles round.\n  const ax = abs(b.vx), ay = abs(b.vy), qx = cl(1 + 0.02 * ax - 0.01 * ay, 0.82, 1.18), qy = cl(1 + 0.02 * ay - 0.01 * ax, 0.82, 1.18);\n  const { bg, col, acc } = P, r = b.r, x1 = max(0, floor(b.x - r * qx - 1)), x2 = min(W - 1, floor(b.x + r * qx + 1));\n  const y1 = max(0, floor(b.y - r * qy - 1)), y2 = min(H - 1, floor(b.y + r * qy + 1));\n  const fog = 0.45 * b.z, cp = cl(floor(b.y), 0, H - 1) * W + cl(floor(b.x), 0, W - 1), glint = 0.85 + 0.35 * cl(acc[cp] - 0.6, 0, 1.5);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const dx = (x + 0.5 - b.x) / (r * qx), dy = (y + 0.5 - b.y) / (r * qy), d2 = dx * dx + dy * dy, d = sqrt(d2);\n      const cov = cl((1 - d) * r + 0.5, 0, 1) * b.a;\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - d2)), p = (y * W + x) * 3, rim = pow(1 - nz, 2.2);\n      let R, G, B;\n      if (b.kind === 2) {\n        const k = 0.9 * (1 - d);\n        R = bg[p] + col[6] * k;\n        G = bg[p + 1] + col[7] * k;\n        B = bg[p + 2] + col[8] * k;\n      } else if (b.kind === 1) {\n        // Air in gel: clear in the middle, the light bent into a bright rim,\n        // and a highlight up towards the light.\n        const ring = sm((d - 0.6) / 0.25) * (1 - sm((d - 0.95) / 0.1)), hi = exp(-((dx + 0.35) ** 2 + (dy + 0.4) ** 2) * 22);\n        const k = 0.15 + 0.85 * ring;\n        R = bg[p] * 1.1 + col[6] * k * 0.85 + 255 * hi;\n        G = bg[p + 1] * 1.1 + col[7] * k * 0.85 + 255 * hi;\n        B = bg[p + 2] * 1.1 + col[8] * k * 0.85 + 255 * hi;\n      } else {\n        const hi = pow(max(0, -dx * 0.36 - dy * 0.5 + nz * 0.79), 40) * 255, edge = 1 - 0.3 * sm((d - 0.86) / 0.12);\n        if (b.kind === 0) {\n          const df = max(0, -dx * 0.3 - dy * 0.75 + nz * 0.6), lit = (0.72 + 0.4 * df) * glint * edge, u = cl(0.5 + 0.6 * (dx - dy) * 0.7, 0, 1);\n          R = (col[9] + (col[15] - col[9]) * u) * lit + col[12] * rim * 0.75 + hi;\n          G = (col[10] + (col[16] - col[10]) * u) * lit + col[13] * rim * 0.75 + hi;\n          B = (col[11] + (col[17] - col[11]) * u) * lit + col[14] * rim * 0.75 + hi;\n        } else {\n          const core = exp(-(dx * dx + (dy - 0.42) ** 2) * 5) * glint, body = 0.55 * edge;\n          R = col[18] * body + col[21] * core + col[21] * rim * 0.5 + hi;\n          G = col[19] * body + col[22] * core + col[22] * rim * 0.5 + hi;\n          B = col[20] * body + col[23] * core + col[23] * rim * 0.5 + hi;\n        }\n      }\n      R += (bg[p] - R) * fog;\n      G += (bg[p + 1] - G) * fog;\n      B += (bg[p + 2] - B) * fog;\n      bg[p] += (R - bg[p]) * cov;\n      bg[p + 1] += (G - bg[p + 1]) * cov;\n      bg[p + 2] += (B - bg[p + 2]) * cov;\n    }\n}\n","layer":{"id":"layer-serum-gel","type":"code","name":"serum-gel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Serum Gel\n// Family:  cosmetic\n// Idea:    A clear tinted gel fills the panel with pearls and air bubbles hanging in it; light through its jiggling surface draws a slow net of caustics on the back, the beads catch a highlight and a rim, and a tap sets the whole gel wobbling until the beads swing and settle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 29, after the macro shots of serum and gel cream with suspended beads in skincare films\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1\n//\n// Knob 1: Hue. Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac.\n// Knob 2: Speed. How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still.\n// Knob 3: Beads. How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one.\n// Knob 4: Wobble. How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging.\n// Buttons: K1 tap knocks the jar: the gel wobbles hard, the caustics swing with it, and the beads swing and settle.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, pow, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The opening hue: lilac, not red.\nconst H0 = 0.78;\n// Light rays are cast from a grid SS times finer than the LEDs, over a\n// margin M beyond the panel so the edges get light from outside too. How\n// far each ray is bent is worked out on a coarser grid, GS LEDs a step,\n// since the ripples are much longer than that, and read between its points.\nconst SS = 1.5, M = 4, GS = 2, GW = (W + 2 * M) / GS + 2, GH = (H + 2 * M) / GS + 2;\nconst RW = (W + 2 * M) * SS, RH = (H + 2 * M) * SS;\n// The surface ripples: six waves 18 to 40 LEDs long.\nconst NWV = 6;\n// Specks of air, always there whatever the Beads knob says.\nconst SPECKS = 16;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  let r, g, b;\n  if (i === 0) (r = v), (g = t), (b = p);\n  else if (i === 1) (r = q), (g = v), (b = p);\n  else if (i === 2) (r = p), (g = v), (b = t);\n  else if (i === 3) (r = p), (g = q), (b = v);\n  else if (i === 4) (r = t), (g = p), (b = v);\n  else (r = v), (g = p), (b = q);\n  out[o] = r * 255;\n  out[o + 1] = g * 255;\n  out[o + 2] = b * 255;\n}\n\n// The gel's low modes of wobble, as displacement fields: side to side with\n// the top swinging most, a bounce, a twist, and a squeeze. Each is a damped\n// spring with its angular frequency at Speed 2.\nconst MODES = 4;\nconst OMEGA = [3.1, 4.3, 2.6, 5.4];\n// They are kept on the coarse grid, which runs M LEDs past the panel on\n// every side; the gel past the panel's edges does not move.\nconst GN = GW * GH, MX = new Float32Array(MODES * GN), MY = new Float32Array(MODES * GN);\nfor (let j = 0; j \u003c GH; j++)\n  for (let i = 0; i \u003c GW; i++) {\n    const x = cl(i * GS - M, 0, W), y = cl(j * GS - M, 0, H), p = j * GW + i;\n    const sx = sin((PI * x) / W), sy = sin((PI * y) / H), top = cos((PI * y) / (2 * H));\n    MX[p] = sx * top;\n    MY[GN + p] = sx * sy;\n    MX[2 * GN + p] = (-(y - H / 2) / 40) * sx * sy;\n    MY[2 * GN + p] = ((x - W / 2) / 40) * sx * sy;\n    MX[3 * GN + p] = sin((2 * PI * x) / W) * sy;\n  }\n// A cosine table, 1024 steps a turn.\nconst CT = new Float32Array(1024).map((_, i) => cos((i * 2 * PI) / 1024));\nconst fcos = (a) => CT[(a * 162.97466) & 1023];\n\nexport function setup(params) {\n  params.s = {\n    t: 0, wv: new Float32Array(NWV * 8), ph: new Float32Array(NWV), md: new Float32Array(MODES * 2), drive: new Float32Array(MODES), dead: 0,\n    gx: new Float32Array(GN), gy: new Float32Array(GN), acc: new Float32Array(N), tmp: new Float32Array(N),\n    beads: [], want: 0, hue: 0, wob: 0.06, sp: 2, ready: false,\n    bg: new Float32Array(N * 3), col: new Float32Array(8 * 3),\n  };\n  const P = params.s;\n  // Each ripple: its wave vector, how fast it creeps (0.4 to 1.2 LEDs a\n  // second at Speed 2), its phase, the direction it bends light, and how\n  // fast it jiggles to and fro in place, as a gel's surface does.\n  for (let i = 0; i \u003c NWV; i++) {\n    const a = (i / NWV) * PI + rnd() * 0.5, L = 18 + rnd() * 22, o = i * 8;\n    P.wv[o] = (cos(a) * 2 * PI) / L;\n    P.wv[o + 1] = (sin(a) * 2 * PI) / L;\n    P.wv[o + 2] = ((0.4 + rnd() * 0.8) * 2 * PI) / L;\n    P.wv[o + 3] = rnd() * 2 * PI;\n    P.wv[o + 4] = cos(a);\n    P.wv[o + 5] = sin(a);\n    P.wv[o + 6] = 1.6 + rnd() * 1.6;\n    P.wv[o + 7] = rnd() * 2 * PI;\n  }\n}\n\n// A bead hanging at rest point (hx, hy), depth z from 0 (near) to 1 (far),\n// and where it is now. Kind 0 is a pearl, 3 a tinted capsule, 1 an air\n// bubble, 2 one of the specks of air that every gel holds. The fewer beads,\n// the bigger they are. Each new one tries a few places in its own band of\n// the panel's height and keeps the one furthest from the others, so they\n// spread out.\nfunction bead(P, n, kind, all, band, bands) {\n  const big = 10 * sqrt(8 / n), z = rnd(), f = 1 - 0.45 * z;\n  const r = kind === 2 ? 0.7 + rnd() * 0.8 : kind === 1 ? big * (0.3 + 0.3 * rnd()) * f : big * (0.65 + 0.35 * rnd()) * f;\n  let bx = 0, by = 0, best = -1;\n  for (let tries = 0; tries \u003c 12; tries++) {\n    const x = r + 1 + rnd() * (W - 2 * r - 2), y = cl(((band + rnd()) / bands) * H, r + 2, H - r - 3);\n    let near = 1e9;\n    for (const b of all) if (!b.gone && b.kind !== 2) near = min(near, sqrt((b.hx - x) ** 2 + (b.hy - y) ** 2) - b.r - r);\n    if (near > best) (best = near), (bx = x), (by = y);\n  }\n  if (kind === 0 && rnd() \u003c 0.4) kind = 3;\n  return { hx: bx, hy: by, x: bx, y: by, vx: 0, vy: 0, r, z, kind, ph: rnd() * 2 * PI, fq: 0.5 + rnd() * 0.5, a: 0, gone: false };\n}\n\n// Keep as many beads, pearls and capsules, as the knob asks for, and two\n// bubbles for every three beads: new ones fade in, spare ones fade out, and\n// the far ones are drawn first.\nfunction census(P, n) {\n  if (!P.beads.length) for (let i = 0; i \u003c SPECKS; i++) P.beads.push(bead(P, 8, 2, P.beads, i, SPECKS));\n  for (let kind = 0; kind \u003c 2; kind++) {\n    const want = kind ? Math.round((n * 2) / 3) : n, live = P.beads.filter((b) => !b.gone && (b.kind === kind || b.kind === kind + 3));\n    if (live.length \u003c want) for (let i = live.length; i \u003c want; i++) P.beads.push(bead(P, n, kind, P.beads, (i * 7) % want, want));\n    else for (let i = want; i \u003c live.length; i++) live[i].gone = true;\n  }\n  P.beads.sort((a, b) => b.z - a.z);\n}\n\nfunction blur(a, b) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) b[p] = (a[x > 0 ? p - 1 : p] + 2 * a[p] + a[x \u003c W - 1 ? p + 1 : p]) * 0.25;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, p = y * W; x \u003c W; x++, p++) a[p] = (b[y > 0 ? p - W : p] + 2 * b[p] + b[y \u003c H - 1 ? p + W : p]) * 0.25;\n}\n\nfunction step(P, dt, sp, wob) {\n  P.t += dt * sp * 0.5;\n  // The modes ring like springs; a slow random push keeps them moving by as\n  // much as Wobble asks.\n  const md = P.md, dr = P.drive, k = sp * 0.5;\n  for (let m = 0; m \u003c MODES; m++) {\n    const w = OMEGA[m] * k, ze = 0.07;\n    dr[m] += (rnd() - 0.5) * dt * 6;\n    dr[m] *= 1 - dt * 0.8;\n    const f = dr[m] * (0.6 + 9 * wob) * w * w * 0.25;\n    let x = md[m * 2], v = md[m * 2 + 1];\n    v += (-w * w * x - 2 * ze * w * v + f) * dt;\n    x += v * dt;\n    md[m * 2] = x;\n    md[m * 2 + 1] = v;\n  }\n  // Beads hang from the gel on springs of their own, softer than the gel, so\n  // they lag behind its swing and then catch up; each drifts a little round\n  // its rest point on its own.\n  for (const b of P.beads) {\n    b.a = b.gone ? max(0, b.a - dt * 1.5) : min(1, b.a + dt * 1.5);\n    if (b.gone && b.a \u003c= 0) P.dead = 1;\n    const p = Math.round((b.hy + M) / GS) * GW + Math.round((b.hx + M) / GS);\n    let ux = 0, uy = 0;\n    for (let m = 0; m \u003c MODES; m++) {\n      ux += md[m * 2] * MX[m * GN + p];\n      uy += md[m * 2] * MY[m * GN + p];\n    }\n    const par = 1.15 - 0.4 * b.z, dfx = 1.4 * sin(P.t * b.fq + b.ph), dfy = 1.8 * sin(P.t * b.fq * 0.71 + b.ph * 1.3);\n    const tx = b.hx + ux * par + dfx, ty = b.hy + uy * par + dfy, w = 2.4 * k * (1.1 - 0.3 * b.z);\n    b.vx += ((tx - b.x) * w * w - 2 * 0.12 * w * b.vx) * dt;\n    b.vy += ((ty - b.y) * w * w - 2 * 0.12 * w * b.vy) * dt;\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n  }\n  if (P.dead) (P.beads = P.beads.filter((b) => !b.gone || b.a > 0)), (P.dead = 0);\n}\n\n// Light comes down through the gel's rippled surface and lands on the back\n// wall. Each ray is bent by the surface's slope where it entered, by up to a\n// few LEDs, and by the gel's wobble; where the rays crowd together the wall\n// is bright, the caustic net.\nfunction caustics(P, wob) {\n  const { gx, gy, acc, wv, md } = P;\n  // A jiggling gel ripples more: the bend grows with Wobble and with how\n  // hard the modes are swinging.\n  let e = 0;\n  for (let m = 0; m \u003c MODES; m++) e += abs(md[m * 2]);\n  const amp = (1.1 + 0.8 * wob + 0.15 * min(6, e)) / sqrt(NWV / 3), t = P.t * 2, ph = P.ph, jig = 0.5 + 0.8 * wob + 0.12 * min(6, e);\n  for (let w = 0; w \u003c NWV; w++) ph[w] = wv[w * 8 + 3] - wv[w * 8 + 2] * t + jig * sin(wv[w * 8 + 6] * t + wv[w * 8 + 7]);\n  const m0 = md[0] * 0.8, m1 = md[2] * 0.8, m2 = md[4] * 0.8, m3 = md[6] * 0.8;\n  for (let j = 0, q = 0; j \u003c GH; j++)\n    for (let i = 0; i \u003c GW; i++, q++) {\n      const x = i * GS - M, y = j * GS - M;\n      let sx = 0, sy = 0;\n      for (let w = 0; w \u003c NWV; w++) {\n        const c = fcos(wv[w * 8] * x + wv[w * 8 + 1] * y + ph[w]);\n        sx += wv[w * 8 + 4] * c;\n        sy += wv[w * 8 + 5] * c;\n      }\n      // The back wall moves with the gel, so the whole net swings with it.\n      gx[q] = sx * amp + m0 * MX[q] + m2 * MX[2 * GN + q] + m3 * MX[3 * GN + q];\n      gy[q] = sy * amp + m1 * MY[GN + q] + m2 * MY[2 * GN + q];\n    }\n  acc.fill(0);\n  const wgt = 1 / (SS * SS), inv = 1 / SS, gi = 1 / GS;\n  for (let rj = 0; rj \u003c RH; rj++) {\n    const fy = rj * inv, uy = fy * gi, j0 = floor(uy), ty = uy - j0;\n    for (let ri = 0; ri \u003c RW; ri++) {\n      const fx = ri * inv, ux = fx * gi, i0 = floor(ux), tx = ux - i0, q = j0 * GW + i0;\n      const X = fx - M + (gx[q] * (1 - tx) + gx[q + 1] * tx) * (1 - ty) + (gx[q + GW] * (1 - tx) + gx[q + GW + 1] * tx) * ty;\n      const Y = fy - M + (gy[q] * (1 - tx) + gy[q + 1] * tx) * (1 - ty) + (gy[q + GW] * (1 - tx) + gy[q + GW + 1] * tx) * ty;\n      const ix = floor(X), iy = floor(Y);\n      if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) continue;\n      const ax = X - ix, ay = Y - iy;\n      if (iy >= 0) {\n        if (ix >= 0) acc[iy * W + ix] += wgt * (1 - ax) * (1 - ay);\n        if (ix \u003c W - 1) acc[iy * W + ix + 1] += wgt * ax * (1 - ay);\n      }\n      if (iy \u003c H - 1) {\n        if (ix >= 0) acc[(iy + 1) * W + ix] += wgt * (1 - ax) * ay;\n        if (ix \u003c W - 1) acc[(iy + 1) * W + ix + 1] += wgt * ax * ay;\n      }\n    }\n  }\n  // Gel is not quite clear: the light softens on its way to the wall, and\n  // each line of it gets a halo on the LEDs beside it.\n  blur(acc, P.tmp);\n  blur(acc, P.tmp);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 8, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.sp = cl(k[1], 0.2, 3);\n  P.wob = cl(k[3], 0, 1);\n  const n = cl(Math.round(k[2]), 8, 40);\n  if (n !== P.want) (P.want = n), census(P, n);\n  if (!P.ready) {\n    // The first frame already shows the gel settled and swaying.\n    for (const b of P.beads) b.a = 1;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, P.sp, P.wob);\n    P.ready = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A knock: the sway and the bounce get a hard kick, the others a little.\n    const s = rnd() \u003c 0.5 ? -1 : 1, w = P.sp * 0.5;\n    P.md[1] += s * 10 * OMEGA[0] * w;\n    P.md[3] += (rnd() - 0.5) * 8 * OMEGA[1] * w;\n    P.md[5] += (rnd() - 0.5) * 4 * OMEGA[2] * w;\n    P.md[7] += (rnd() - 0.5) * 3 * OMEGA[3] * w;\n  }\n  let t = d;\n  while (t > 1e-6) {\n    const h = min(t, 1 / 60);\n    step(P, h, P.sp, P.wob);\n    t -= h;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.ready) return;\n  caustics(P, P.wob);\n  const { acc, bg, col } = P, hue = H0 + P.hue;\n  // Gel light and deep, caustic light, pearl one side, pearl rim, pearl\n  // other side, capsule body and its gathered light. Orange and yellow gel\n  // darkened reads as brown and olive on LEDs, so around those hues the gel\n  // is kept lighter, like honey.\n  const hw = (hue - floor(hue) + 0.38) % 1, am = max(0, 1 - abs(hw - 0.5) / 0.11);\n  hsv(hue, 0.72 - 0.12 * am, 0.62 + 0.3 * am, col, 0);\n  hsv(hue + 0.02, 0.85 - 0.1 * am, 0.3 + 0.38 * am, col, 3);\n  hsv(hue - 0.03, 0.35, 1, col, 6);\n  hsv(hue + 0.12, 0.2, 1, col, 9);\n  hsv(hue - 0.14, 0.6, 1, col, 12);\n  hsv(hue - 0.1, 0.2, 1, col, 15);\n  hsv(hue + 0.05, 0.95, 0.5, col, 18);\n  hsv(hue + 0.02, 0.5, 1, col, 21);\n  // The gel: light from above, so the top glows and the bottom is deeper,\n  // and over it the net of caustic light.\n  for (let y = 0; y \u003c H; y++) {\n    const g = 1 - (0.55 * y) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, l = cl(acc[p] - 0.6, 0, 1.6) * 0.5;\n      for (let q = 0; q \u003c 3; q++) bg[p * 3 + q] = col[q] * g + col[3 + q] * (1 - g) + col[6 + q] * l * (0.55 + 0.45 * g);\n    }\n  }\n  // Beads and bubbles, far ones first.\n  for (const b of P.beads) drawBead(P, b);\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, bg[p * 3]), min(255, bg[p * 3 + 1]), min(255, bg[p * 3 + 2]));\n}\n\n// Pearls are lit from above through the gel, their white leaning one way\n// round the colour wheel on one side and the other way on the other, as a\n// pearl's sheen shifts, with a rim and a white highlight. A capsule is clear and deeply tinted: light coming down through\n// it gathers into a bright spot low inside it. An air bubble is clear, the\n// gel behind it brighter, with a thin bright rim and a highlight; a speck is\n// a point of light. Far ones sink into the gel's colour.\nfunction drawBead(P, b) {\n  // A bead swinging through the gel is drawn out a little along its path\n  // and squeezed across it, so it jiggles as it swings and settles round.\n  const ax = abs(b.vx), ay = abs(b.vy), qx = cl(1 + 0.02 * ax - 0.01 * ay, 0.82, 1.18), qy = cl(1 + 0.02 * ay - 0.01 * ax, 0.82, 1.18);\n  const { bg, col, acc } = P, r = b.r, x1 = max(0, floor(b.x - r * qx - 1)), x2 = min(W - 1, floor(b.x + r * qx + 1));\n  const y1 = max(0, floor(b.y - r * qy - 1)), y2 = min(H - 1, floor(b.y + r * qy + 1));\n  const fog = 0.45 * b.z, cp = cl(floor(b.y), 0, H - 1) * W + cl(floor(b.x), 0, W - 1), glint = 0.85 + 0.35 * cl(acc[cp] - 0.6, 0, 1.5);\n  for (let y = y1; y \u003c= y2; y++)\n    for (let x = x1; x \u003c= x2; x++) {\n      const dx = (x + 0.5 - b.x) / (r * qx), dy = (y + 0.5 - b.y) / (r * qy), d2 = dx * dx + dy * dy, d = sqrt(d2);\n      const cov = cl((1 - d) * r + 0.5, 0, 1) * b.a;\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - d2)), p = (y * W + x) * 3, rim = pow(1 - nz, 2.2);\n      let R, G, B;\n      if (b.kind === 2) {\n        const k = 0.9 * (1 - d);\n        R = bg[p] + col[6] * k;\n        G = bg[p + 1] + col[7] * k;\n        B = bg[p + 2] + col[8] * k;\n      } else if (b.kind === 1) {\n        // Air in gel: clear in the middle, the light bent into a bright rim,\n        // and a highlight up towards the light.\n        const ring = sm((d - 0.6) / 0.25) * (1 - sm((d - 0.95) / 0.1)), hi = exp(-((dx + 0.35) ** 2 + (dy + 0.4) ** 2) * 22);\n        const k = 0.15 + 0.85 * ring;\n        R = bg[p] * 1.1 + col[6] * k * 0.85 + 255 * hi;\n        G = bg[p + 1] * 1.1 + col[7] * k * 0.85 + 255 * hi;\n        B = bg[p + 2] * 1.1 + col[8] * k * 0.85 + 255 * hi;\n      } else {\n        const hi = pow(max(0, -dx * 0.36 - dy * 0.5 + nz * 0.79), 40) * 255, edge = 1 - 0.3 * sm((d - 0.86) / 0.12);\n        if (b.kind === 0) {\n          const df = max(0, -dx * 0.3 - dy * 0.75 + nz * 0.6), lit = (0.72 + 0.4 * df) * glint * edge, u = cl(0.5 + 0.6 * (dx - dy) * 0.7, 0, 1);\n          R = (col[9] + (col[15] - col[9]) * u) * lit + col[12] * rim * 0.75 + hi;\n          G = (col[10] + (col[16] - col[10]) * u) * lit + col[13] * rim * 0.75 + hi;\n          B = (col[11] + (col[17] - col[11]) * u) * lit + col[14] * rim * 0.75 + hi;\n        } else {\n          const core = exp(-(dx * dx + (dy - 0.42) ** 2) * 5) * glint, body = 0.55 * edge;\n          R = col[18] * body + col[21] * core + col[21] * rim * 0.5 + hi;\n          G = col[19] * body + col[22] * core + col[22] * rim * 0.5 + hi;\n          B = col[20] * body + col[23] * core + col[23] * rim * 0.5 + hi;\n        }\n      }\n      R += (bg[p] - R) * fog;\n      G += (bg[p + 1] - G) * fog;\n      B += (bg[p + 2] - B) * fog;\n      bg[p] += (R - bg[p]) * cov;\n      bg[p + 1] += (G - bg[p + 1]) * cov;\n      bg[p + 2] += (B - bg[p + 2]) * cov;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Beads=8..40, Wobble=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the gel, its light and the pearls' sheen round the whole colour wheel together, opening on lilac."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the gel moves: the caustics crawl and the beads sway at 2; at 0.2 everything hangs nearly still."},{"name":"Beads","min":8,"max":40,"about":"How many beads hang in the gel, from eight big ones to forty small ones, with two air bubbles for every three; the fewer there are, the bigger each one."},{"name":"Wobble","min":0,"max":1,"about":"How much the gel jiggles on its own: at 0 it only breathes, turned up its surface ripples, the caustics sharpen into a busy net and the beads keep swinging."}],"start":[0,2,8,0.06],"measures":{"motion":0.1786,"detail":0.0286,"edges":0.0792,"complexity":2.417,"coverage":1,"colour":0.2132,"drift":0.1307},"knobResponse":[0.3676,0.1568,0.0763,0.0849]},{"slug":"server-rack","title":"Server Rack","family":"circuit","round":18,"note":"앞에서 본 42U 서버 랙이 패널을 채워요. 맨 위 스위치로 들어온 트래픽이 서버를 타고 내려가며 드라이브 불을 켜고, 백업이 스토리지 선반의 드라이브를 차례로 채워요. K4 를 올리면 바닥 타일에서 올라온 푸른 냉기 빛이 아래쪽 앞판을 물들여요.","idea":"A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","layer":{"id":"layer-server-rack","type":"code","name":"server-rack","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s."},{"name":"Load","min":0,"max":1,"about":"At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often."},{"name":"Aisle","min":0,"max":1,"about":"Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.3413,"detail":0.1038,"edges":0.3523,"complexity":1.287,"coverage":0.6285,"colour":0.2245,"drift":0.0981},"knobResponse":[0.0421,0.0369,0.0435,0.0677]},{"slug":"setting-mist","title":"Setting Mist","family":"cosmetic","round":31,"note":"왼쪽 밖에서 세팅 미스트가 1초에 한 번쯤 뿜어져, 얇은 원뿔이 3분의 1초 만에 구름으로 부풀고 소용돌이를 말며 흘러가다 가라앉아요. 짙은 물빛 바탕에 굵은 방울이 부드럽게 반짝여요. K1 은 색상환을 다 돌고, 누르면 크게 두 번 뿜어요.","idea":"Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.","buttons":"K1 tap fires a big double puff.","code":"// ===== Patternflow pattern =====\n// Title:   Setting Mist\n// Family:  cosmetic\n// Idea:    Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after a setting spray misted across a face\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1\n//\n// Knob 1: Hue. Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown.\n// Knob 2: Speed. How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower.\n// Knob 3: Spray. How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel.\n// Knob 4: Droplets. How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash.\n// Buttons: K1 tap fires a big double puff.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 6000;\nconst { min, max, floor, sin, cos, exp, abs, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The air: a stream function made of six travelling waves, 14 to 40 LEDs\n// long. Its curl moves the mist without bunching it, so the clouds roll.\n// [wavelength, direction, speed of travel, amplitude]\nconst WAVES = [\n  [40, 0.3, 0.6, 1.0],\n  [31, 1.9, -0.8, 0.9],\n  [24, 3.6, 0.9, 0.8],\n  [19, 4.9, -1.1, 0.7],\n  [16, 0.9, 1.3, 0.6],\n  [14, 2.7, -1.5, 0.5],\n].map(([l, a, w, m], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, (m * 4.2) / k, j * 2.4];\n});\n// The flow is worked out on a grid every 4 LEDs and read off between.\nconst GS = 4, GX = W / GS + 2, GY = H / GS + 2;\n// The ground is lit a little from the upper right: its level, 0..1.\nconst BGL = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const lx = (p % W) - 60, ly = floor(p / W) - 20;\n  BGL[p] = (26 + 26 * exp(-(lx * lx + ly * ly) / 5000)) / 255;\n}\n// Round orange and yellow the ground turns to deep navy, given at full\n// brightness like the hue colour it replaces.\nconst NAVY = [60, 95, 255];\n// Puffs are kept in a ring of NP, long enough for every cloud in the air.\nconst NP = 48;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), w: F(MAXP), gp: F(MAXP), gr: F(MAXP), dr: new Uint8Array(MAXP), pid: new Uint8Array(MAXP), ex: F(MAXP), ey: F(MAXP),\n    n: 0, T: 0, next: 0.3, nz: 0, puffs: [], slot: 0,\n    P0: F(NP).fill(-99), PY: F(NP), AX: F(NP), AY: F(NP), PL: F(NP), PG: F(NP), PR: F(NP),\n    U: F(GX * GY), V: F(GX * GY), D: F(N), Y: F(N), G: F(N), tmp: F(N), buf: F(N * 3), col: F(12),\n    hue: 0, spray: 0, drop: 0.06, started: false,\n  };\n}\n\n// A puff: the nozzle at height y, aimed at angle a (0 points straight right),\n// size s. It sprays for a fifth of a second. Its front rolls up like a smoke\n// ring: two eddies either side of the axis, carried out to reach PL and\n// slowing, which curl the cloud back on itself into billows.\nfunction puff(S, y, a, s, delay) {\n  const q = (S.slot = (S.slot + 1) % NP);\n  S.P0[q] = S.T + delay;\n  S.PY[q] = y;\n  S.AX[q] = cos(a);\n  S.AY[q] = sin(a);\n  S.PL[q] = (36 + 12 * s) * (0.85 + 0.3 * rnd());\n  S.PR[q] = 5 + 4 * s;\n  S.PG[q] = (220 + 100 * s) * (0.45 + 0.55 * rnd());\n  S.puffs.push({ q, y, a, s, t: -delay, left: round(380 * s), spread: 0.3 + 0.1 * s });\n}\n\n// The hand moves the bottle up and down the face: each puff comes from a new\n// height, aimed a little toward the middle of the panel.\nfunction fire(S, big) {\n  S.nz += 0.9 + rnd() * 0.8;\n  const y = 64 + 44 * sin(S.nz * 1.3) + (rnd() - 0.5) * 14;\n  const a = -0.45 * ((y - 64) / 64) + (rnd() - 0.5) * 0.3;\n  const s = big ? 2.2 : (1 + 0.7 * S.spray) * (0.8 + 0.4 * rnd());\n  puff(S, y, a, s, 0);\n  if (big || rnd() \u003c 0.22 + 0.3 * S.spray) {\n    const y2 = cl(y + (y \u003c 64 ? 1 : -1) * (14 + rnd() * 14), 8, H - 8);\n    puff(S, y2, -0.45 * ((y2 - 64) / 64) + (rnd() - 0.5) * 0.3, big ? 2 : s * (0.7 + 0.3 * rnd()), 0.16 + rnd() * 0.12);\n  }\n}\n\nfunction emit(S, p, k) {\n  for (let j = 0; j \u003c k && S.n \u003c MAXP; j++) {\n    const i = S.n++;\n    // Droplets leave the nozzle in a cone, faster along its axis.\n    const off = (rnd() + rnd() + rnd() - 1.5) * 2 * p.spread;\n    const a = p.a + off, v = (80 + 160 * rnd() * rnd()) * (0.85 + 0.15 * p.s) * (1 - 0.5 * abs(off));\n    // Each leaves at its own moment within the frame, so the burst does not\n    // start as one bright knot.\n    const lag = rnd() * 0.035;\n    S.x[i] = -3 + v * cos(a) * lag;\n    S.y[i] = p.y + (rnd() - 0.5) * 1.5 + v * sin(a) * lag;\n    S.vx[i] = v * cos(a);\n    S.vy[i] = v * sin(a);\n    S.age[i] = 0;\n    S.life[i] = 2.6 + 1.8 * rnd();\n    S.w[i] = 0.5 + 0.4 * rnd();\n    S.gp[i] = rnd() * 2 * PI;\n    S.gr[i] = 2 + 4 * rnd();\n    S.dr[i] = rnd() \u003c 0.3 + 0.3 * S.drop ? 1 : 0;\n    S.pid[i] = p.q;\n    // Each droplet also wanders off on its own, so the cloud keeps opening.\n    const e = rnd() * 2 * PI, es = 3 + 6 * rnd();\n    S.ex[i] = es * cos(e);\n    S.ey[i] = es * sin(e);\n  }\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.w[i] = S.w[j];\n  S.gp[i] = S.gp[j];\n  S.gr[i] = S.gr[j];\n  S.dr[i] = S.dr[j];\n  S.pid[i] = S.pid[j];\n  S.ex[i] = S.ex[j];\n  S.ey[i] = S.ey[j];\n}\n\nfunction flow(S) {\n  const T = S.T, U = S.U, V = S.V;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      U[gy * GX + gx] = u;\n      V[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  // Puffs on a clock: about one a second at Spray 0, three at Spray 1.\n  S.next -= st;\n  if (S.next \u003c= 0) {\n    fire(S, false);\n    S.next = (1.15 - 0.8 * S.spray) * (0.75 + 0.5 * rnd());\n  }\n  for (let q = S.puffs.length - 1; q >= 0; q--) {\n    const p = S.puffs[q];\n    p.t += st;\n    if (p.t \u003c 0) continue;\n    const k = p.t >= 0.2 ? p.left : min(p.left, round((p.left * st) / max(st, 0.2 - p.t + st)));\n    emit(S, p, k);\n    p.left -= k;\n    if (p.left \u003c= 0) S.puffs.splice(q, 1);\n  }\n  flow(S);\n  const U = S.U, V = S.V, drag = 3.1 - 1.1 * S.drop, fall = 2.5 + 7 * S.drop;\n  const kd = 1 - exp(-drag * st);\n  for (let i = S.n - 1; i >= 0; i--) {\n    const age = (S.age[i] += st);\n    if (age > S.life[i] || S.x[i] > W + 8 || S.y[i] \u003c -10 || S.y[i] > H + 10) {\n      kill(S, i);\n      continue;\n    }\n    const x = S.x[i], y = S.y[i];\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const u = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const v = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    // The young cloud churns hardest, then the air calms to a slow drift\n    // away from the nozzle, and the droplets sink as they age.\n    const churn = 1 + 1.6 * exp(-age * 1.6);\n    let ux = u * churn + 4 + S.ex[i], uy = v * churn - 1.5 + S.ey[i];\n    const q = S.pid[i], pa = S.T - S.P0[q];\n    if (pa \u003c 2.5) {\n      // The puff's two eddies, in the frame of its axis.\n      const ax = S.AX[q], ay = S.AY[q], f = S.PL[q] * (1 - exp(-pa / 0.22));\n      const dx = x + 3 - ax * f, dy = y - S.PY[q] - ay * f;\n      const sa = dx * ax + dy * ay, ta = dy * ax - dx * ay;\n      const R = S.PR[q] * (1 + 0.8 * pa), rc = 9 + 6 * pa, G = S.PG[q] * exp(-pa / 0.8);\n      const t1 = ta - R, t2 = ta + R;\n      const g1 = G / (sa * sa + t1 * t1 + rc), g2 = -G / (sa * sa + t2 * t2 + rc);\n      const vs = -(g1 * t1 + g2 * t2), vt = (g1 + g2) * sa;\n      ux += vs * ax - vt * ay;\n      uy += vs * ay + vt * ax;\n    }\n    S.vx[i] += (ux - S.vx[i]) * kd;\n    S.vy[i] += (uy - S.vy[i]) * kd;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + (S.vy[i] + fall * min(1, age * 0.6)) * st;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0] || 0;\n  S.spray = cl(k[2], 0, 1);\n  S.drop = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the mist already in the air.\n    for (let i = 0; i \u003c 75; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) fire(S, true);\n  step(S, d * rate);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  if (r \u003c 1) return;\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, Y = S.Y, G = S.G, tmp = S.tmp, buf = S.buf, col = S.col, T = S.T, dp = S.drop;\n  D.fill(0);\n  Y.fill(0);\n  G.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i], u = age / S.life[i];\n    const env = min(1, age * 18) * (1 - u) * (1 - u);\n    const x = S.x[i], y = S.y[i];\n    // For the first quarter second the droplets still fly in a thin cone;\n    // then they open into the soft cloud.\n    const yo = age \u003c 0.2 ? 1 : age > 0.6 ? 0 : (0.6 - age) / 0.4;\n    if (yo > 0) {\n      // Flying droplets smear into short streaks along their path.\n      const wy = S.w[i] * env * yo * 0.06, sx = S.vx[i] * 0.007, sy = S.vy[i] * 0.007;\n      for (let j = 0; j \u003c 4; j++) splat(Y, x - sx * j, y - sy * j, wy);\n    }\n    splat(D, x, y, S.w[i] * env * (1 - yo));\n    if (!S.dr[i]) continue;\n    // A droplet glints when it turns the light to the eye: a smooth swell\n    // a few times a second, so nothing strobes.\n    const tw = 0.5 + 0.5 * sin(S.gp[i] + S.gr[i] * T);\n    const t3 = tw * tw * tw, g = env * (1 - 0.8 * yo) * (0.04 + 0.3 * dp + (0.9 + dp) * t3 * t3 * t3);\n    splat(G, x, y, g);\n  }\n  // Haze is soft and wide; droplets keep their shape.\n  const r = 3 - round(2 * dp);\n  blur(D, tmp, r);\n  blur(D, tmp, r > 1 ? r - 1 : r);\n  blur(Y, tmp, 1);\n  blur(Y, tmp, 1);\n  for (let p = 0; p \u003c N; p++) D[p] += Y[p];\n  if (dp > 0.3) {\n    // Coarse spray: the droplets themselves as small soft dots in the cloud.\n    for (let i = 0; i \u003c S.n; i++) {\n      if (!S.dr[i]) continue;\n      const age = S.age[i], u = age / S.life[i];\n      splat(D, S.x[i], S.y[i], (dp - 0.3) * 1.1 * min(1, age * 18) * (1 - u) * (1 - u));\n    }\n  }\n  blur(G, tmp, dp > 0.6 ? 1 : 0);\n  // Deep ground, mist tint and glint colour from the hue. Dark orange reads\n  // brown and dark yellow olive, so round those hues the ground turns to\n  // navy and the mist is lifted to a brighter gold.\n  const h = S.hue + 0.48, hf = h - floor(h), wm = sm(hf / 0.06) * (1 - sm((hf - 0.17) / 0.1));\n  hsv(h, 0.9, 255, col, 0);\n  for (let c = 0; c \u003c 3; c++) col[c] += (NAVY[c] - col[c]) * wm;\n  hsv(h, 0.45 + 0.12 * wm, 255, col, 3);\n  hsv(h, 0.12 + 0.25 * wm, 255, col, 6);\n  const gain = (4.5 - 1.5 * dp) * (1 + 0.6 * wm);\n  for (let y = 0, q = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++, q += 3) {\n      const bg = BGL[p];\n      const a = 1 - exp(-D[p] * gain), g = G[p];\n      // Thin mist glows in the tint, thick mist goes to white.\n      const wt = a * a;\n      for (let c = 0; c \u003c 3; c++) {\n        const mist = col[3 + c] * (1 - wt) + 255 * wt;\n        buf[q + c] = col[c] * bg * (1 - a) + mist * a * 0.92 + col[6 + c] * g;\n      }\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","layer":{"id":"layer-setting-mist","type":"code","name":"setting-mist","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Setting Mist\n// Family:  cosmetic\n// Idea:    Puffs of setting spray burst in from a nozzle just past the left edge, each a cone of micro-droplets that blooms into a soft cloud, rolls and billows on the air, drifts across the deep panel and settles as it fades, with droplets catching the light as soft glints.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after a setting spray misted across a face\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1\n//\n// Knob 1: Hue. Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown.\n// Knob 2: Speed. How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower.\n// Knob 3: Spray. How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel.\n// Knob 4: Droplets. How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash.\n// Buttons: K1 tap fires a big double puff.\n\nconst W = 64, H = 128, N = W * H;\nconst MAXP = 6000;\nconst { min, max, floor, sin, cos, exp, abs, round, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = () => Math.random();\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n\n// The air: a stream function made of six travelling waves, 14 to 40 LEDs\n// long. Its curl moves the mist without bunching it, so the clouds roll.\n// [wavelength, direction, speed of travel, amplitude]\nconst WAVES = [\n  [40, 0.3, 0.6, 1.0],\n  [31, 1.9, -0.8, 0.9],\n  [24, 3.6, 0.9, 0.8],\n  [19, 4.9, -1.1, 0.7],\n  [16, 0.9, 1.3, 0.6],\n  [14, 2.7, -1.5, 0.5],\n].map(([l, a, w, m], j) => {\n  const k = (2 * PI) / l;\n  return [k * cos(a), k * sin(a), w, (m * 4.2) / k, j * 2.4];\n});\n// The flow is worked out on a grid every 4 LEDs and read off between.\nconst GS = 4, GX = W / GS + 2, GY = H / GS + 2;\n// The ground is lit a little from the upper right: its level, 0..1.\nconst BGL = new Float32Array(N);\nfor (let p = 0; p \u003c N; p++) {\n  const lx = (p % W) - 60, ly = floor(p / W) - 20;\n  BGL[p] = (26 + 26 * exp(-(lx * lx + ly * ly) / 5000)) / 255;\n}\n// Round orange and yellow the ground turns to deep navy, given at full\n// brightness like the hue colour it replaces.\nconst NAVY = [60, 95, 255];\n// Puffs are kept in a ring of NP, long enough for every cloud in the air.\nconst NP = 48;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    x: F(MAXP), y: F(MAXP), vx: F(MAXP), vy: F(MAXP), age: F(MAXP), life: F(MAXP), w: F(MAXP), gp: F(MAXP), gr: F(MAXP), dr: new Uint8Array(MAXP), pid: new Uint8Array(MAXP), ex: F(MAXP), ey: F(MAXP),\n    n: 0, T: 0, next: 0.3, nz: 0, puffs: [], slot: 0,\n    P0: F(NP).fill(-99), PY: F(NP), AX: F(NP), AY: F(NP), PL: F(NP), PG: F(NP), PR: F(NP),\n    U: F(GX * GY), V: F(GX * GY), D: F(N), Y: F(N), G: F(N), tmp: F(N), buf: F(N * 3), col: F(12),\n    hue: 0, spray: 0, drop: 0.06, started: false,\n  };\n}\n\n// A puff: the nozzle at height y, aimed at angle a (0 points straight right),\n// size s. It sprays for a fifth of a second. Its front rolls up like a smoke\n// ring: two eddies either side of the axis, carried out to reach PL and\n// slowing, which curl the cloud back on itself into billows.\nfunction puff(S, y, a, s, delay) {\n  const q = (S.slot = (S.slot + 1) % NP);\n  S.P0[q] = S.T + delay;\n  S.PY[q] = y;\n  S.AX[q] = cos(a);\n  S.AY[q] = sin(a);\n  S.PL[q] = (36 + 12 * s) * (0.85 + 0.3 * rnd());\n  S.PR[q] = 5 + 4 * s;\n  S.PG[q] = (220 + 100 * s) * (0.45 + 0.55 * rnd());\n  S.puffs.push({ q, y, a, s, t: -delay, left: round(380 * s), spread: 0.3 + 0.1 * s });\n}\n\n// The hand moves the bottle up and down the face: each puff comes from a new\n// height, aimed a little toward the middle of the panel.\nfunction fire(S, big) {\n  S.nz += 0.9 + rnd() * 0.8;\n  const y = 64 + 44 * sin(S.nz * 1.3) + (rnd() - 0.5) * 14;\n  const a = -0.45 * ((y - 64) / 64) + (rnd() - 0.5) * 0.3;\n  const s = big ? 2.2 : (1 + 0.7 * S.spray) * (0.8 + 0.4 * rnd());\n  puff(S, y, a, s, 0);\n  if (big || rnd() \u003c 0.22 + 0.3 * S.spray) {\n    const y2 = cl(y + (y \u003c 64 ? 1 : -1) * (14 + rnd() * 14), 8, H - 8);\n    puff(S, y2, -0.45 * ((y2 - 64) / 64) + (rnd() - 0.5) * 0.3, big ? 2 : s * (0.7 + 0.3 * rnd()), 0.16 + rnd() * 0.12);\n  }\n}\n\nfunction emit(S, p, k) {\n  for (let j = 0; j \u003c k && S.n \u003c MAXP; j++) {\n    const i = S.n++;\n    // Droplets leave the nozzle in a cone, faster along its axis.\n    const off = (rnd() + rnd() + rnd() - 1.5) * 2 * p.spread;\n    const a = p.a + off, v = (80 + 160 * rnd() * rnd()) * (0.85 + 0.15 * p.s) * (1 - 0.5 * abs(off));\n    // Each leaves at its own moment within the frame, so the burst does not\n    // start as one bright knot.\n    const lag = rnd() * 0.035;\n    S.x[i] = -3 + v * cos(a) * lag;\n    S.y[i] = p.y + (rnd() - 0.5) * 1.5 + v * sin(a) * lag;\n    S.vx[i] = v * cos(a);\n    S.vy[i] = v * sin(a);\n    S.age[i] = 0;\n    S.life[i] = 2.6 + 1.8 * rnd();\n    S.w[i] = 0.5 + 0.4 * rnd();\n    S.gp[i] = rnd() * 2 * PI;\n    S.gr[i] = 2 + 4 * rnd();\n    S.dr[i] = rnd() \u003c 0.3 + 0.3 * S.drop ? 1 : 0;\n    S.pid[i] = p.q;\n    // Each droplet also wanders off on its own, so the cloud keeps opening.\n    const e = rnd() * 2 * PI, es = 3 + 6 * rnd();\n    S.ex[i] = es * cos(e);\n    S.ey[i] = es * sin(e);\n  }\n}\n\nfunction kill(S, i) {\n  const j = --S.n;\n  S.x[i] = S.x[j];\n  S.y[i] = S.y[j];\n  S.vx[i] = S.vx[j];\n  S.vy[i] = S.vy[j];\n  S.age[i] = S.age[j];\n  S.life[i] = S.life[j];\n  S.w[i] = S.w[j];\n  S.gp[i] = S.gp[j];\n  S.gr[i] = S.gr[j];\n  S.dr[i] = S.dr[j];\n  S.pid[i] = S.pid[j];\n  S.ex[i] = S.ex[j];\n  S.ey[i] = S.ey[j];\n}\n\nfunction flow(S) {\n  const T = S.T, U = S.U, V = S.V;\n  for (let gy = 0; gy \u003c GY; gy++)\n    for (let gx = 0; gx \u003c GX; gx++) {\n      const x = (gx - 1) * GS, y = (gy - 1) * GS;\n      let u = 0, v = 0;\n      for (const [kx, ky, w, m, ph] of WAVES) {\n        const c = m * cos(kx * x + ky * y + w * T + ph);\n        u += c * ky;\n        v -= c * kx;\n      }\n      U[gy * GX + gx] = u;\n      V[gy * GX + gx] = v;\n    }\n}\n\nfunction step(S, st) {\n  S.T += st;\n  // Puffs on a clock: about one a second at Spray 0, three at Spray 1.\n  S.next -= st;\n  if (S.next \u003c= 0) {\n    fire(S, false);\n    S.next = (1.15 - 0.8 * S.spray) * (0.75 + 0.5 * rnd());\n  }\n  for (let q = S.puffs.length - 1; q >= 0; q--) {\n    const p = S.puffs[q];\n    p.t += st;\n    if (p.t \u003c 0) continue;\n    const k = p.t >= 0.2 ? p.left : min(p.left, round((p.left * st) / max(st, 0.2 - p.t + st)));\n    emit(S, p, k);\n    p.left -= k;\n    if (p.left \u003c= 0) S.puffs.splice(q, 1);\n  }\n  flow(S);\n  const U = S.U, V = S.V, drag = 3.1 - 1.1 * S.drop, fall = 2.5 + 7 * S.drop;\n  const kd = 1 - exp(-drag * st);\n  for (let i = S.n - 1; i >= 0; i--) {\n    const age = (S.age[i] += st);\n    if (age > S.life[i] || S.x[i] > W + 8 || S.y[i] \u003c -10 || S.y[i] > H + 10) {\n      kill(S, i);\n      continue;\n    }\n    const x = S.x[i], y = S.y[i];\n    const fx = cl(x / GS + 1, 0, GX - 1.001), fy = cl(y / GS + 1, 0, GY - 1.001);\n    const ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy, g = iy * GX + ix;\n    const u = (U[g] * (1 - ax) + U[g + 1] * ax) * (1 - ay) + (U[g + GX] * (1 - ax) + U[g + GX + 1] * ax) * ay;\n    const v = (V[g] * (1 - ax) + V[g + 1] * ax) * (1 - ay) + (V[g + GX] * (1 - ax) + V[g + GX + 1] * ax) * ay;\n    // The young cloud churns hardest, then the air calms to a slow drift\n    // away from the nozzle, and the droplets sink as they age.\n    const churn = 1 + 1.6 * exp(-age * 1.6);\n    let ux = u * churn + 4 + S.ex[i], uy = v * churn - 1.5 + S.ey[i];\n    const q = S.pid[i], pa = S.T - S.P0[q];\n    if (pa \u003c 2.5) {\n      // The puff's two eddies, in the frame of its axis.\n      const ax = S.AX[q], ay = S.AY[q], f = S.PL[q] * (1 - exp(-pa / 0.22));\n      const dx = x + 3 - ax * f, dy = y - S.PY[q] - ay * f;\n      const sa = dx * ax + dy * ay, ta = dy * ax - dx * ay;\n      const R = S.PR[q] * (1 + 0.8 * pa), rc = 9 + 6 * pa, G = S.PG[q] * exp(-pa / 0.8);\n      const t1 = ta - R, t2 = ta + R;\n      const g1 = G / (sa * sa + t1 * t1 + rc), g2 = -G / (sa * sa + t2 * t2 + rc);\n      const vs = -(g1 * t1 + g2 * t2), vt = (g1 + g2) * sa;\n      ux += vs * ax - vt * ay;\n      uy += vs * ay + vt * ax;\n    }\n    S.vx[i] += (ux - S.vx[i]) * kd;\n    S.vy[i] += (uy - S.vy[i]) * kd;\n    S.x[i] = x + S.vx[i] * st;\n    S.y[i] = y + (S.vy[i] + fall * min(1, age * 0.6)) * st;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1), rate = cl(k[1], 0.2, 3) / 2;\n  S.hue = k[0] || 0;\n  S.spray = cl(k[2], 0, 1);\n  S.drop = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    // Open with the mist already in the air.\n    for (let i = 0; i \u003c 75; i++) step(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) fire(S, true);\n  step(S, d * rate);\n}\n\n// Box blur of radius r along rows then columns, from a into a (b is scratch).\nfunction blur(a, b, r) {\n  if (r \u003c 1) return;\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++) {\n    const o = y * W;\n    let s = 0;\n    for (let x = -r; x \u003c= r; x++) s += a[o + cl(x, 0, W - 1)];\n    for (let x = 0; x \u003c W; x++) {\n      b[o + x] = s * inv;\n      s += a[o + min(W - 1, x + r + 1)] - a[o + max(0, x - r)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    let s = 0;\n    for (let y = -r; y \u003c= r; y++) s += b[cl(y, 0, H - 1) * W + x];\n    for (let y = 0; y \u003c H; y++) {\n      a[y * W + x] = s * inv;\n      s += b[min(H - 1, y + r + 1) * W + x] - b[max(0, y - r) * W + x];\n    }\n  }\n}\n\nfunction splat(A, x, y, w) {\n  const fx = x - 0.5, fy = y - 0.5, ix = floor(fx), iy = floor(fy), ax = fx - ix, ay = fy - iy;\n  if (ix \u003c -1 || ix >= W || iy \u003c -1 || iy >= H) return;\n  const p = iy * W + ix;\n  if (iy >= 0) {\n    if (ix >= 0) A[p] += w * (1 - ax) * (1 - ay);\n    if (ix + 1 \u003c W) A[p + 1] += w * ax * (1 - ay);\n  }\n  if (iy + 1 \u003c H) {\n    if (ix >= 0) A[p + W] += w * (1 - ax) * ay;\n    if (ix + 1 \u003c W) A[p + W + 1] += w * ax * ay;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const D = S.D, Y = S.Y, G = S.G, tmp = S.tmp, buf = S.buf, col = S.col, T = S.T, dp = S.drop;\n  D.fill(0);\n  Y.fill(0);\n  G.fill(0);\n  for (let i = 0; i \u003c S.n; i++) {\n    const age = S.age[i], u = age / S.life[i];\n    const env = min(1, age * 18) * (1 - u) * (1 - u);\n    const x = S.x[i], y = S.y[i];\n    // For the first quarter second the droplets still fly in a thin cone;\n    // then they open into the soft cloud.\n    const yo = age \u003c 0.2 ? 1 : age > 0.6 ? 0 : (0.6 - age) / 0.4;\n    if (yo > 0) {\n      // Flying droplets smear into short streaks along their path.\n      const wy = S.w[i] * env * yo * 0.06, sx = S.vx[i] * 0.007, sy = S.vy[i] * 0.007;\n      for (let j = 0; j \u003c 4; j++) splat(Y, x - sx * j, y - sy * j, wy);\n    }\n    splat(D, x, y, S.w[i] * env * (1 - yo));\n    if (!S.dr[i]) continue;\n    // A droplet glints when it turns the light to the eye: a smooth swell\n    // a few times a second, so nothing strobes.\n    const tw = 0.5 + 0.5 * sin(S.gp[i] + S.gr[i] * T);\n    const t3 = tw * tw * tw, g = env * (1 - 0.8 * yo) * (0.04 + 0.3 * dp + (0.9 + dp) * t3 * t3 * t3);\n    splat(G, x, y, g);\n  }\n  // Haze is soft and wide; droplets keep their shape.\n  const r = 3 - round(2 * dp);\n  blur(D, tmp, r);\n  blur(D, tmp, r > 1 ? r - 1 : r);\n  blur(Y, tmp, 1);\n  blur(Y, tmp, 1);\n  for (let p = 0; p \u003c N; p++) D[p] += Y[p];\n  if (dp > 0.3) {\n    // Coarse spray: the droplets themselves as small soft dots in the cloud.\n    for (let i = 0; i \u003c S.n; i++) {\n      if (!S.dr[i]) continue;\n      const age = S.age[i], u = age / S.life[i];\n      splat(D, S.x[i], S.y[i], (dp - 0.3) * 1.1 * min(1, age * 18) * (1 - u) * (1 - u));\n    }\n  }\n  blur(G, tmp, dp > 0.6 ? 1 : 0);\n  // Deep ground, mist tint and glint colour from the hue. Dark orange reads\n  // brown and dark yellow olive, so round those hues the ground turns to\n  // navy and the mist is lifted to a brighter gold.\n  const h = S.hue + 0.48, hf = h - floor(h), wm = sm(hf / 0.06) * (1 - sm((hf - 0.17) / 0.1));\n  hsv(h, 0.9, 255, col, 0);\n  for (let c = 0; c \u003c 3; c++) col[c] += (NAVY[c] - col[c]) * wm;\n  hsv(h, 0.45 + 0.12 * wm, 255, col, 3);\n  hsv(h, 0.12 + 0.25 * wm, 255, col, 6);\n  const gain = (4.5 - 1.5 * dp) * (1 + 0.6 * wm);\n  for (let y = 0, q = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++, q += 3) {\n      const bg = BGL[p];\n      const a = 1 - exp(-D[p] * gain), g = G[p];\n      // Thin mist glows in the tint, thick mist goes to white.\n      const wt = a * a;\n      for (let c = 0; c \u003c 3; c++) {\n        const mist = col[3 + c] * (1 - wt) + 255 * wt;\n        buf[q + c] = col[c] * bg * (1 - a) + mist * a * 0.92 + col[6 + c] * g;\n      }\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, knee(buf[p]), knee(buf[p + 1]), knee(buf[p + 2]));\n}\n\nfunction knee(v) {\n  return v \u003c 200 ? v : 255 - 55 * exp(-(v - 200) / 55);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Spray=0..1, Droplets=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the mist and the deep ground behind it round the whole colour wheel together, opening on aqua; round orange and gold the ground turns navy, so the mist never sits on brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything happens: at 2 a puff blooms in about a third of a second and its cloud drifts and fades over three or four; at 0.2 it all runs ten times slower."},{"name":"Spray","min":0,"max":1,"about":"How often and how hard the nozzle fires: at 0 a puff about every second, now and then two at once; at 1 about three a second, bigger and more often doubled, until the mist fills the panel."},{"name":"Droplets","min":0,"max":1,"about":"How fine the mist is, from a soft haze with small glints at 0 to a coarse spray at 1 where the single droplets show as dots and flash."}],"start":[0,2,0,0.06],"measures":{"motion":0.1908,"detail":0.0088,"edges":0.0593,"complexity":1.291,"coverage":1,"colour":0.0895,"drift":0.1077},"knobResponse":[0.1473,0.1003,0.1667,0.0634]},{"slug":"seven-shuffles","title":"Seven Shuffles","family":"algo","round":29,"note":"카드 한 벌을 옆에서 본 무지개 막대 더미를 리플 셔플로 섞어요. 한 번 섞을 때마다 그러데이션이 2, 4, 8 갈래로 엇갈려 끼다가 일곱 번쯤에 색종이처럼 흩어지고, 그다음 기수 정렬로 되돌려 다시 시작해요. K4 를 끝까지 돌리면 완벽한 파로 셔플이 되어 32장은 다섯 번 만에 처음 순서로 돌아와요.","idea":"A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.","buttons":"K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.","code":"// ===== Patternflow pattern =====\n// Title:   Seven Shuffles\n// Family:  algo\n// Idea:    A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbert-Shannon-Reeds riffle shuffle (Edgar Gilbert and Claude Shannon, 1955; Jim Reeds, 1981), seven shuffles suffice (Dave Bayer and Persi Diaconis, 1992), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1\n//\n// Knob 1: Hue. Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one.\n// Knob 2: Speed. How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer.\n// Knob 3: Cards. How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines.\n// Knob 4: Neatness. Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128).\n// Buttons: K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.\n\nconst W = 64, H = 128, NMAX = 128;\nconst { min, max, floor, round, exp, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (t) => ((t = cl(t, 0, 1)), t * t * (3 - 2 * t));\nconst rnd = () => Math.random();\n\n// The deck at rest spans columns XL to XL + BW. In a riffle the bottom packet\n// slides DX to the left and the top packet DX to the right, so where they\n// interleave each side shows only its own cards: a comb.\nconst XL = 8, BW = 48, DX = 6;\n// The strip on the left wall shows how far the deck is from random; the\n// marks on the right wall count the riffles.\nconst SX = 0, MX = 63;\n// Where the rainbow starts at Hue 0 (blue) and how much of the wheel it spans.\nconst H0 = 0.6, SPAN = 0.78;\n// Stop shuffling once the deck is this close to random, in total variation:\n// six riffles for 32 cards, seven for 52 (0.334, where six leave 0.614),\n// nine for 128.\nconst ENOUGH = 0.4;\n\n// Phases, and their length in seconds at Speed 2. A riffle splits the deck,\n// drops the cards together and squares it up; an unriffle pass does the\n// same backwards. REST holds the ordered deck before the first riffle, WAIT\n// the shuffled one before it is put back.\nconst REST = 0, SPLIT = 1, DROP = 2, JOIN = 3, PAUSE = 4, WAIT = 5;\nconst RIF = [0.8, 0.3, 0.9, 0.3, 0.25, 1.4], UNR = [0.8, 0.2, 0.55, 0.2, 0.08, 1.4];\n\n// log k! for the binomials in Bayer and Diaconis's formula.\nconst LF = new Float64Array(8400);\nfor (let i = 1; i \u003c LF.length; i++) LF[i] = LF[i - 1] + log(i);\n\n// Bayer and Diaconis: after k riffles, a deck whose order has r rising\n// sequences turns up with probability C(2^k + n - r, n) / 2^(kn), and the\n// Eulerian number A(n, r - 1) counts the orders with r of them. Half the\n// summed gap from 1/n! is the total variation distance from random.\nfunction tvTable(n) {\n  let row = new Float64Array(n + 1), nx = new Float64Array(n + 1);\n  row[0] = 1;\n  for (let m = 2; m \u003c= n; m++) {\n    nx.fill(0);\n    for (let j = 0; j \u003c m; j++) nx[j] = (j + 1) * row[j] + (m - j) * (j > 0 ? row[j - 1] : 0);\n    [row, nx] = [nx, row];\n  }\n  const tv = new Float64Array(14);\n  for (let k = 0; k \u003c 14; k++) {\n    const q = 2 ** k;\n    let s = 0;\n    for (let r = 1; r \u003c= n; r++) {\n      const w = exp(log(row[r - 1]) - LF[n]);\n      const ratio = q >= r ? exp(LF[q + n - r] - LF[q - r] - k * n * Math.LN2) : 0;\n      s += w * abs(ratio - 1);\n    }\n    tv[k] = min(1, s / 2);\n  }\n  return tv;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each card's colour by its place in the new deck, for this Hue.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let c = 0; c \u003c P.n; c++) hsv(hue + H0 + (SPAN * c) / (P.n - 1), 0.88, 255, P.col, c * 3);\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 32, nu: 0, sp: 2, hue: 0,\n    deck: new Int16Array(NMAX), from: new Float32Array(NMAX), to: new Float32Array(NMAX), side: new Int8Array(NMAX), nd: new Int16Array(NMAX),\n    job: 0, ph: REST, t: 0, k: 0, want: 0, pass: 0, bits: 5, tv: null, kmax: 6, faro: 5, strip: 1, glow: 0, mk: new Float32Array(16),\n    col: new Float32Array(NMAX * 3), buf: new Float32Array(W * H * 3), order: new Int16Array(NMAX),\n  };\n  fresh(params.s, 32);\n}\n\n// A new deck of n cards in order: card c at place c, counted from the bottom.\nfunction fresh(P, n) {\n  P.n = n;\n  for (let c = 0; c \u003c n; c++) P.deck[c] = c;\n  P.tv = tvTable(n);\n  P.kmax = 1;\n  while (P.kmax \u003c 13 && P.tv[P.kmax] >= ENOUGH) P.kmax++;\n  P.bits = 1;\n  while (1 \u003c\u003c P.bits \u003c n) P.bits++;\n  // How many perfect out-shuffles bring this deck home.\n  const a = new Int16Array(n), b = new Int16Array(n);\n  for (let c = 0; c \u003c n; c++) a[c] = c;\n  P.faro = 0;\n  do {\n    faro(a, b, n);\n    a.set(b.subarray(0, n));\n    P.faro++;\n  } while (P.faro \u003c 200 && !sorted(a, n));\n  P.job = 0, P.ph = REST, P.t = 0, P.k = 0, P.strip = 1;\n  P.mk.fill(0);\n  paint(P, P.hue);\n}\nfunction sorted(d, n) {\n  for (let i = 0; i \u003c n; i++) if (d[i] !== i) return false;\n  return true;\n}\n// The out-shuffle: the bottom half and the top half alternate from the\n// bottom up, so the bottom and top cards stay where they are.\nfunction faro(a, b, n) {\n  const c = (n + 1) >> 1;\n  for (let i = 0, l = 0, r = c; i \u003c n; i++) b[i] = i & 1 ? a[r++] : a[l++];\n}\n\n// Plan one riffle. The cut is binomial, as if each card picked a hand by a\n// coin; then the cards fall from the bottoms of the two packets, each from a\n// packet with chance in proportion to the cards it still holds. Neatness\n// pulls the cut to the middle and the falls toward strict alternation.\nfunction riffle(P) {\n  const n = P.n, nu = P.nu, d = P.deck;\n  let coin = 0;\n  for (let i = 0; i \u003c n; i++) coin += rnd() \u003c 0.5 ? 1 : 0;\n  const c = cl(round(n / 2 + (coin - n / 2) * (1 - nu) + (n & 1 ? 0.25 : 0)), 0, n);\n  let a = c, b = n - c, l = 0, r = c, last = 1;\n  for (let j = 0; j \u003c n; j++) {\n    const pg = a / (a + b), pa = last > 0 ? 1 : 0;\n    const fromL = b === 0 || (a > 0 && rnd() \u003c (1 - nu) * pg + nu * pa);\n    const card = fromL ? d[l++] : d[r++];\n    fromL ? a-- : b--;\n    last = fromL ? -1 : 1;\n    plan(P, card, fromL ? -1 : 1, j);\n  }\n  P.job = 0;\n}\n\n// Plan one unriffle: a pass of a binary radix sort. Cards whose original\n// place has a 0 in this bit slide left and drop to the bottom, the 1s slide\n// right and rise to the top, each side keeping its order. An inverse riffle\n// is exactly this with the bits drawn at random.\nfunction unriffle(P) {\n  const n = P.n, d = P.deck, bit = 1 \u003c\u003c P.pass;\n  let z = 0;\n  for (let i = 0; i \u003c n; i++) if (!(d[i] & bit)) z++;\n  for (let i = 0, lo = 0, hi = z; i \u003c n; i++) {\n    const card = d[i];\n    if (card & bit) plan(P, card, 1, hi++);\n    else plan(P, card, -1, lo++);\n  }\n  P.job = 1;\n}\n\nfunction plan(P, card, side, j) {\n  P.side[card] = side;\n  P.to[card] = j;\n  P.nd[j] = card;\n}\n\nfunction begin(P) {\n  for (let i = 0; i \u003c P.n; i++) P.from[P.deck[i]] = i;\n  P.ph = SPLIT, P.t = 0;\n}\n\n// What comes after a phase ends.\nfunction next(P) {\n  if (P.ph === SPLIT) return (P.ph = DROP), (P.t = 0);\n  if (P.ph === DROP) return (P.ph = JOIN), (P.t = 0);\n  if (P.ph === JOIN) {\n    for (let j = 0; j \u003c P.n; j++) P.deck[j] = P.nd[j];\n    if (P.job === 0) {\n      P.k++;\n      if (P.k \u003c= 16) P.mk[min(15, P.k - 1)] = 1;\n    } else P.pass++;\n    return (P.ph = PAUSE), (P.t = 0);\n  }\n  // At rest or after a pause, pick what the deck does next.\n  const home = sorted(P.deck, P.n);\n  if (P.job === 1 && P.pass \u003c P.bits) return unriffle(P), begin(P);\n  if (P.job === 1 || (home && P.k > 0)) {\n    // Back in order: by the radix sort, or by itself after perfect faros.\n    if (P.job === 0) P.glow = 1;\n    P.job = 0, P.k = 0;\n    if (P.want \u003c= 0) return (P.ph = REST), (P.t = 0);\n  }\n  if (P.want > 0 || (P.ph !== WAIT && P.k \u003c (P.nu > 0.97 ? max(P.faro, 1) : P.kmax) && P.k \u003c 12)) {\n    P.want = max(0, P.want - 1);\n    return riffle(P), begin(P);\n  }\n  if (P.ph !== WAIT) return (P.ph = WAIT), (P.t = 0);\n  P.pass = 0;\n  return unriffle(P), begin(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 32, 0.06], d = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[2], 32, NMAX));\n  if (n !== P.n) fresh(P, n);\n  if (P.hue !== k[0]) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  // Below a tenth the riffle is the pure random one the strip is true for.\n  P.nu = cl((k[3] - 0.1) / 0.9, 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.want++;\n    if (P.ph === REST || P.ph === WAIT) next(P);\n  }\n  // The hands slow down with Speed, but the waits between riffles do not\n  // drag on past a second or two.\n  const still = P.ph === REST || P.ph === WAIT || P.ph === PAUSE;\n  P.t += d * (still ? max(P.sp / 2, 0.75) : P.sp / 2);\n  const T = P.job ? UNR : RIF;\n  if (P.t >= T[P.ph]) next(P);\n\n  // The strip eases to the distance after k riffles, back to full once the\n  // deck is being put in order; it fades out as the riffles grow neat, where\n  // the formula no longer holds.\n  const goal = P.job === 1 ? 1 : P.tv[min(13, P.k)];\n  P.strip += (goal - P.strip) * min(1, d * 3);\n  P.glow = max(0, P.glow - d * 0.7);\n  for (let i = 0; i \u003c 16; i++) {\n    const on = i \u003c P.k && P.job === 0 ? 1 : 0;\n    P.mk[i] += (on * 0.55 - P.mk[i]) * min(1, d * (on ? 6 : 2.5));\n  }\n}\n\n// One card edge-on: h rows from row top, its face lit from above and its\n// lower edge dim (dark for the thick cards, a faint line at two rows a\n// card), across columns a to a + BW with the ends anti-aliased.\nfunction card(P, c, top, h, a, pass) {\n  const buf = P.buf, col = P.col, b = a + BW, gap = h >= 3 ? 0 : 0.28;\n  const g = P.glow * P.glow * 0.6, r0 = col[c * 3], g0 = col[c * 3 + 1], b0 = col[c * 3 + 2];\n  const R = r0 + (255 - r0) * g, G = g0 + (255 - g0) * g, B = b0 + (255 - b0) * g;\n  for (let yy = 0; yy \u003c h; yy++) {\n    const Y = top + yy, edge = yy === h - 1 && h > 1;\n    if (Y \u003c 0 || Y >= H || edge !== (pass === 0)) continue;\n    const lv = edge ? gap : 1 - 0.13 * yy;\n    for (let x = max(0, floor(a)); x \u003c= min(W - 1, floor(b)); x++) {\n      const w = (min(x + 1, b) - max(x, a)) * lv, q = (Y * W + x) * 3;\n      if (w \u003c= 0) continue;\n      buf[q] += (R - buf[q]) * w;\n      buf[q + 1] += (G - buf[q + 1]) * w;\n      buf[q + 2] += (B - buf[q + 2]) * w;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, buf = P.buf, T = P.job ? UNR : RIF, u = P.t / T[P.ph];\n  const h = n \u003c= 32 ? 4 : n \u003c= 42 ? 3 : n \u003c= 64 ? 2 : 1, y0 = floor((H - n * h) / 2);\n  buf.fill(0);\n  const moving = P.ph === SPLIT || P.ph === DROP || P.ph === JOIN;\n  // While the packets pass through each other the right one is in front.\n  const ord = P.order;\n  if (P.ph === SPLIT || P.ph === DROP) {\n    let m = 0;\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] \u003c 0) ord[m++] = P.nd[j];\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] > 0) ord[m++] = P.nd[j];\n  } else for (let j = 0; j \u003c n; j++) ord[j] = moving ? P.nd[j] : P.deck[j];\n  // Two passes: the dim edge rows first, then the faces, so a card passing\n  // in front never greys another card's face with its edge.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let j = 0; j \u003c n; j++) {\n      const c = ord[j];\n      let y = j, off = 0;\n      if (moving) {\n        const s = P.side[c] * DX;\n        if (P.ph === SPLIT) (y = P.from[c]), (off = s * ease(u));\n        else if (P.ph === DROP) (y = P.from[c] + (P.to[c] - P.from[c]) * ease(u)), (off = s);\n        else (y = P.to[c]), (off = s * (1 - ease(u)));\n      }\n      card(P, c, y0 + round((n - 1 - y) * h), h, XL + off, pass);\n    }\n  // The strip: full height while the deck is far from random, sinking as\n  // the riffles add up.\n  const fade = max(0, 1 - P.nu * 8), sh = P.strip * H;\n  if (fade > 0)\n    for (let y = 0; y \u003c H; y++) {\n      const w = cl(sh - (H - 1 - y), 0, 1) * fade * (H - y \u003c sh - 1.5 ? 0.38 : 0.85), q = (y * W + SX) * 3;\n      buf[q] = 230 * w, buf[q + 1] = 226 * w, buf[q + 2] = 214 * w;\n    }\n  // One mark per riffle down the right wall.\n  for (let i = 0; i \u003c 16; i++) {\n    const w = P.mk[i];\n    if (w \u003c 0.02) continue;\n    for (let y = 2 + i * 6; y \u003c 5 + i * 6 && y \u003c H; y++) {\n      const q = (y * W + MX) * 3;\n      buf[q] = 240 * w, buf[q + 1] = 236 * w, buf[q + 2] = 224 * w;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","layer":{"id":"layer-seven-shuffles","type":"code","name":"seven-shuffles","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Seven Shuffles\n// Family:  algo\n// Idea:    A deck seen edge-on as a stack of rainbow bars is riffle shuffled again and again, each riffle zipping two packets together so the gradient splits into 2, 4, 8 interleaved runs until it reads as confetti, then the deck is unriffled back into order by a radix sort and starts over.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Gilbert-Shannon-Reeds riffle shuffle (Edgar Gilbert and Claude Shannon, 1955; Jim Reeds, 1981), seven shuffles suffice (Dave Bayer and Persi Diaconis, 1992), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1\n//\n// Knob 1: Hue. Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one.\n// Knob 2: Speed. How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer.\n// Knob 3: Cards. How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines.\n// Knob 4: Neatness. Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128).\n// Buttons: K1 tap riffles the deck once more, right away; tapped while the deck is being put back, the riffle comes as soon as it is in order.\n\nconst W = 64, H = 128, NMAX = 128;\nconst { min, max, floor, round, exp, log, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (t) => ((t = cl(t, 0, 1)), t * t * (3 - 2 * t));\nconst rnd = () => Math.random();\n\n// The deck at rest spans columns XL to XL + BW. In a riffle the bottom packet\n// slides DX to the left and the top packet DX to the right, so where they\n// interleave each side shows only its own cards: a comb.\nconst XL = 8, BW = 48, DX = 6;\n// The strip on the left wall shows how far the deck is from random; the\n// marks on the right wall count the riffles.\nconst SX = 0, MX = 63;\n// Where the rainbow starts at Hue 0 (blue) and how much of the wheel it spans.\nconst H0 = 0.6, SPAN = 0.78;\n// Stop shuffling once the deck is this close to random, in total variation:\n// six riffles for 32 cards, seven for 52 (0.334, where six leave 0.614),\n// nine for 128.\nconst ENOUGH = 0.4;\n\n// Phases, and their length in seconds at Speed 2. A riffle splits the deck,\n// drops the cards together and squares it up; an unriffle pass does the\n// same backwards. REST holds the ordered deck before the first riffle, WAIT\n// the shuffled one before it is put back.\nconst REST = 0, SPLIT = 1, DROP = 2, JOIN = 3, PAUSE = 4, WAIT = 5;\nconst RIF = [0.8, 0.3, 0.9, 0.3, 0.25, 1.4], UNR = [0.8, 0.2, 0.55, 0.2, 0.08, 1.4];\n\n// log k! for the binomials in Bayer and Diaconis's formula.\nconst LF = new Float64Array(8400);\nfor (let i = 1; i \u003c LF.length; i++) LF[i] = LF[i - 1] + log(i);\n\n// Bayer and Diaconis: after k riffles, a deck whose order has r rising\n// sequences turns up with probability C(2^k + n - r, n) / 2^(kn), and the\n// Eulerian number A(n, r - 1) counts the orders with r of them. Half the\n// summed gap from 1/n! is the total variation distance from random.\nfunction tvTable(n) {\n  let row = new Float64Array(n + 1), nx = new Float64Array(n + 1);\n  row[0] = 1;\n  for (let m = 2; m \u003c= n; m++) {\n    nx.fill(0);\n    for (let j = 0; j \u003c m; j++) nx[j] = (j + 1) * row[j] + (m - j) * (j > 0 ? row[j - 1] : 0);\n    [row, nx] = [nx, row];\n  }\n  const tv = new Float64Array(14);\n  for (let k = 0; k \u003c 14; k++) {\n    const q = 2 ** k;\n    let s = 0;\n    for (let r = 1; r \u003c= n; r++) {\n      const w = exp(log(row[r - 1]) - LF[n]);\n      const ratio = q >= r ? exp(LF[q + n - r] - LF[q - r] - k * n * Math.LN2) : 0;\n      s += w * abs(ratio - 1);\n    }\n    tv[k] = min(1, s / 2);\n  }\n  return tv;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// Each card's colour by its place in the new deck, for this Hue.\nfunction paint(P, hue) {\n  P.hue = hue;\n  for (let c = 0; c \u003c P.n; c++) hsv(hue + H0 + (SPAN * c) / (P.n - 1), 0.88, 255, P.col, c * 3);\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 32, nu: 0, sp: 2, hue: 0,\n    deck: new Int16Array(NMAX), from: new Float32Array(NMAX), to: new Float32Array(NMAX), side: new Int8Array(NMAX), nd: new Int16Array(NMAX),\n    job: 0, ph: REST, t: 0, k: 0, want: 0, pass: 0, bits: 5, tv: null, kmax: 6, faro: 5, strip: 1, glow: 0, mk: new Float32Array(16),\n    col: new Float32Array(NMAX * 3), buf: new Float32Array(W * H * 3), order: new Int16Array(NMAX),\n  };\n  fresh(params.s, 32);\n}\n\n// A new deck of n cards in order: card c at place c, counted from the bottom.\nfunction fresh(P, n) {\n  P.n = n;\n  for (let c = 0; c \u003c n; c++) P.deck[c] = c;\n  P.tv = tvTable(n);\n  P.kmax = 1;\n  while (P.kmax \u003c 13 && P.tv[P.kmax] >= ENOUGH) P.kmax++;\n  P.bits = 1;\n  while (1 \u003c\u003c P.bits \u003c n) P.bits++;\n  // How many perfect out-shuffles bring this deck home.\n  const a = new Int16Array(n), b = new Int16Array(n);\n  for (let c = 0; c \u003c n; c++) a[c] = c;\n  P.faro = 0;\n  do {\n    faro(a, b, n);\n    a.set(b.subarray(0, n));\n    P.faro++;\n  } while (P.faro \u003c 200 && !sorted(a, n));\n  P.job = 0, P.ph = REST, P.t = 0, P.k = 0, P.strip = 1;\n  P.mk.fill(0);\n  paint(P, P.hue);\n}\nfunction sorted(d, n) {\n  for (let i = 0; i \u003c n; i++) if (d[i] !== i) return false;\n  return true;\n}\n// The out-shuffle: the bottom half and the top half alternate from the\n// bottom up, so the bottom and top cards stay where they are.\nfunction faro(a, b, n) {\n  const c = (n + 1) >> 1;\n  for (let i = 0, l = 0, r = c; i \u003c n; i++) b[i] = i & 1 ? a[r++] : a[l++];\n}\n\n// Plan one riffle. The cut is binomial, as if each card picked a hand by a\n// coin; then the cards fall from the bottoms of the two packets, each from a\n// packet with chance in proportion to the cards it still holds. Neatness\n// pulls the cut to the middle and the falls toward strict alternation.\nfunction riffle(P) {\n  const n = P.n, nu = P.nu, d = P.deck;\n  let coin = 0;\n  for (let i = 0; i \u003c n; i++) coin += rnd() \u003c 0.5 ? 1 : 0;\n  const c = cl(round(n / 2 + (coin - n / 2) * (1 - nu) + (n & 1 ? 0.25 : 0)), 0, n);\n  let a = c, b = n - c, l = 0, r = c, last = 1;\n  for (let j = 0; j \u003c n; j++) {\n    const pg = a / (a + b), pa = last > 0 ? 1 : 0;\n    const fromL = b === 0 || (a > 0 && rnd() \u003c (1 - nu) * pg + nu * pa);\n    const card = fromL ? d[l++] : d[r++];\n    fromL ? a-- : b--;\n    last = fromL ? -1 : 1;\n    plan(P, card, fromL ? -1 : 1, j);\n  }\n  P.job = 0;\n}\n\n// Plan one unriffle: a pass of a binary radix sort. Cards whose original\n// place has a 0 in this bit slide left and drop to the bottom, the 1s slide\n// right and rise to the top, each side keeping its order. An inverse riffle\n// is exactly this with the bits drawn at random.\nfunction unriffle(P) {\n  const n = P.n, d = P.deck, bit = 1 \u003c\u003c P.pass;\n  let z = 0;\n  for (let i = 0; i \u003c n; i++) if (!(d[i] & bit)) z++;\n  for (let i = 0, lo = 0, hi = z; i \u003c n; i++) {\n    const card = d[i];\n    if (card & bit) plan(P, card, 1, hi++);\n    else plan(P, card, -1, lo++);\n  }\n  P.job = 1;\n}\n\nfunction plan(P, card, side, j) {\n  P.side[card] = side;\n  P.to[card] = j;\n  P.nd[j] = card;\n}\n\nfunction begin(P) {\n  for (let i = 0; i \u003c P.n; i++) P.from[P.deck[i]] = i;\n  P.ph = SPLIT, P.t = 0;\n}\n\n// What comes after a phase ends.\nfunction next(P) {\n  if (P.ph === SPLIT) return (P.ph = DROP), (P.t = 0);\n  if (P.ph === DROP) return (P.ph = JOIN), (P.t = 0);\n  if (P.ph === JOIN) {\n    for (let j = 0; j \u003c P.n; j++) P.deck[j] = P.nd[j];\n    if (P.job === 0) {\n      P.k++;\n      if (P.k \u003c= 16) P.mk[min(15, P.k - 1)] = 1;\n    } else P.pass++;\n    return (P.ph = PAUSE), (P.t = 0);\n  }\n  // At rest or after a pause, pick what the deck does next.\n  const home = sorted(P.deck, P.n);\n  if (P.job === 1 && P.pass \u003c P.bits) return unriffle(P), begin(P);\n  if (P.job === 1 || (home && P.k > 0)) {\n    // Back in order: by the radix sort, or by itself after perfect faros.\n    if (P.job === 0) P.glow = 1;\n    P.job = 0, P.k = 0;\n    if (P.want \u003c= 0) return (P.ph = REST), (P.t = 0);\n  }\n  if (P.want > 0 || (P.ph !== WAIT && P.k \u003c (P.nu > 0.97 ? max(P.faro, 1) : P.kmax) && P.k \u003c 12)) {\n    P.want = max(0, P.want - 1);\n    return riffle(P), begin(P);\n  }\n  if (P.ph !== WAIT) return (P.ph = WAIT), (P.t = 0);\n  P.pass = 0;\n  return unriffle(P), begin(P);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 32, 0.06], d = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[2], 32, NMAX));\n  if (n !== P.n) fresh(P, n);\n  if (P.hue !== k[0]) paint(P, k[0]);\n  P.sp = cl(k[1], 0.2, 3);\n  // Below a tenth the riffle is the pure random one the strip is true for.\n  P.nu = cl((k[3] - 0.1) / 0.9, 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.want++;\n    if (P.ph === REST || P.ph === WAIT) next(P);\n  }\n  // The hands slow down with Speed, but the waits between riffles do not\n  // drag on past a second or two.\n  const still = P.ph === REST || P.ph === WAIT || P.ph === PAUSE;\n  P.t += d * (still ? max(P.sp / 2, 0.75) : P.sp / 2);\n  const T = P.job ? UNR : RIF;\n  if (P.t >= T[P.ph]) next(P);\n\n  // The strip eases to the distance after k riffles, back to full once the\n  // deck is being put in order; it fades out as the riffles grow neat, where\n  // the formula no longer holds.\n  const goal = P.job === 1 ? 1 : P.tv[min(13, P.k)];\n  P.strip += (goal - P.strip) * min(1, d * 3);\n  P.glow = max(0, P.glow - d * 0.7);\n  for (let i = 0; i \u003c 16; i++) {\n    const on = i \u003c P.k && P.job === 0 ? 1 : 0;\n    P.mk[i] += (on * 0.55 - P.mk[i]) * min(1, d * (on ? 6 : 2.5));\n  }\n}\n\n// One card edge-on: h rows from row top, its face lit from above and its\n// lower edge dim (dark for the thick cards, a faint line at two rows a\n// card), across columns a to a + BW with the ends anti-aliased.\nfunction card(P, c, top, h, a, pass) {\n  const buf = P.buf, col = P.col, b = a + BW, gap = h >= 3 ? 0 : 0.28;\n  const g = P.glow * P.glow * 0.6, r0 = col[c * 3], g0 = col[c * 3 + 1], b0 = col[c * 3 + 2];\n  const R = r0 + (255 - r0) * g, G = g0 + (255 - g0) * g, B = b0 + (255 - b0) * g;\n  for (let yy = 0; yy \u003c h; yy++) {\n    const Y = top + yy, edge = yy === h - 1 && h > 1;\n    if (Y \u003c 0 || Y >= H || edge !== (pass === 0)) continue;\n    const lv = edge ? gap : 1 - 0.13 * yy;\n    for (let x = max(0, floor(a)); x \u003c= min(W - 1, floor(b)); x++) {\n      const w = (min(x + 1, b) - max(x, a)) * lv, q = (Y * W + x) * 3;\n      if (w \u003c= 0) continue;\n      buf[q] += (R - buf[q]) * w;\n      buf[q + 1] += (G - buf[q + 1]) * w;\n      buf[q + 2] += (B - buf[q + 2]) * w;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, buf = P.buf, T = P.job ? UNR : RIF, u = P.t / T[P.ph];\n  const h = n \u003c= 32 ? 4 : n \u003c= 42 ? 3 : n \u003c= 64 ? 2 : 1, y0 = floor((H - n * h) / 2);\n  buf.fill(0);\n  const moving = P.ph === SPLIT || P.ph === DROP || P.ph === JOIN;\n  // While the packets pass through each other the right one is in front.\n  const ord = P.order;\n  if (P.ph === SPLIT || P.ph === DROP) {\n    let m = 0;\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] \u003c 0) ord[m++] = P.nd[j];\n    for (let j = 0; j \u003c n; j++) if (P.side[P.nd[j]] > 0) ord[m++] = P.nd[j];\n  } else for (let j = 0; j \u003c n; j++) ord[j] = moving ? P.nd[j] : P.deck[j];\n  // Two passes: the dim edge rows first, then the faces, so a card passing\n  // in front never greys another card's face with its edge.\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let j = 0; j \u003c n; j++) {\n      const c = ord[j];\n      let y = j, off = 0;\n      if (moving) {\n        const s = P.side[c] * DX;\n        if (P.ph === SPLIT) (y = P.from[c]), (off = s * ease(u));\n        else if (P.ph === DROP) (y = P.from[c] + (P.to[c] - P.from[c]) * ease(u)), (off = s);\n        else (y = P.to[c]), (off = s * (1 - ease(u)));\n      }\n      card(P, c, y0 + round((n - 1 - y) * h), h, XL + off, pass);\n    }\n  // The strip: full height while the deck is far from random, sinking as\n  // the riffles add up.\n  const fade = max(0, 1 - P.nu * 8), sh = P.strip * H;\n  if (fade > 0)\n    for (let y = 0; y \u003c H; y++) {\n      const w = cl(sh - (H - 1 - y), 0, 1) * fade * (H - y \u003c sh - 1.5 ? 0.38 : 0.85), q = (y * W + SX) * 3;\n      buf[q] = 230 * w, buf[q + 1] = 226 * w, buf[q + 2] = 214 * w;\n    }\n  // One mark per riffle down the right wall.\n  for (let i = 0; i \u003c 16; i++) {\n    const w = P.mk[i];\n    if (w \u003c 0.02) continue;\n    for (let y = 2 + i * 6; y \u003c 5 + i * 6 && y \u003c H; y++) {\n      const q = (y * W + MX) * 3;\n      buf[q] = 240 * w, buf[q + 1] = 236 * w, buf[q + 2] = 224 * w;\n    }\n  }\n  for (let p = 0, y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Cards=32..128, Neatness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rainbow the cards are painted in, which runs from the bottom card of the new deck to the top one."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands work: at 2 a riffle takes under two seconds and a whole round, from order through the riffles and back, about twenty; at 0.2 ten times longer."},{"name":"Cards","min":32,"max":128,"about":"How many cards are in the deck, 32 to 128: four rows a card at 32, two at 52 and 64, one from 65 up, so the bars thin to single lines."},{"name":"Neatness","min":0,"max":1,"about":"Up to 0.1 every riffle is the random Gilbert-Shannon-Reeds one and the strip on the left wall shows how far the deck is from random; turned up, the cut moves to the middle and the cards fall more strictly one from each side, until at 1 every riffle is a perfect faro out-shuffle and the deck comes back to order by itself (five out-shuffles for 32 cards, eight for 52, seven for 128)."}],"start":[0,2,32,0.06],"measures":{"motion":3.42,"detail":0.1826,"edges":0.5208,"complexity":0.0962,"coverage":0.5604,"colour":0.575,"drift":0.2123},"knobResponse":[0.3602,0.3179,0.3253,0.2206]},{"slug":"shadow-play","title":"Shadow Play","family":"stage","round":26,"note":"등잔 불빛을 받은 흰 막에 와양 쿨릿 가죽 인형의 레이스 그림자가 비쳐요. 기사가 거인과 싸워 던져 버리면 구눙안이 떨며 쓸고 들어와 다음 장을 열고, K1 을 돌리면 막 뒤로 돌아가 금빛과 빨강, 남색 칠이 보여요.","idea":"Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.","buttons":"K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.","code":"// ===== Patternflow pattern =====\n// Title:   Shadow Play\n// Family:  stage\n// Idea:    Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the Javanese wayang kulit shadow play\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1\n//\n// Knob 1: View. At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp.\n// Knob 2: Speed. The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower.\n// Knob 3: Lamp. How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs.\n// Knob 4: Flicker. How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften.\n// Buttons: K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Rows: the top beam, the cloth, the line the puppets stand on, the hem, the banana trunk, the first row the audience can reach.\nconst BEAM = 3, CLOTH = 10, GROUND = 92, HEM = 103, TRUNK = 104, AUD = 88;\n// One scene in story seconds (real seconds at Speed 2).\nconst SCENE = 14.4;\n// The paint, seen from the dalang's side.\nconst GOLD = [0.95, 0.72, 0.26], RED = [0.86, 0.2, 0.13], INDIGO = [0.22, 0.3, 0.8], TEAL = [0.1, 0.52, 0.48], HAIR = [0.13, 0.1, 0.15];\nconst HORN = [0.32, 0.2, 0.11], BAMBOO = [0.62, 0.5, 0.3], IVORY = [0.96, 0.92, 0.82];\n// Lace: the punched holes, as a lattice in puppet space: spacing along, spacing across, laid diagonally.\nconst LA = [0, 2.5, 2.0, 1.9, 2.3], LB = [0, 2.5, 3.6, 1.9, 2.3], LD = [0, 0, 1, 0, 0], LR = [0, 0.9, 0.9, 0.8, 1.15];\n\n// Knight and ogre outlines in puppet space: x forward, y up from the soles.\nconst K_TORSO = [-5.2, 40.4, -3.6, 41.6, 3.2, 41.6, 4.6, 40.4, 3.4, 35, 1.9, 28.5, -2.1, 28.5, -3.6, 35];\nconst K_KAIN = [-3.2, 28.5, 3.2, 28.5, 4.4, 20, 3.4, 13, 1.6, 5, -0.6, 13, -4.5, 16, -9.8, 9.5, -5.8, 22];\nconst K_NOSE = [3.8, 49.6, 8.6, 45.2, 4.6, 46.4];\nconst O_TORSO = [-8.2, 47, -6.5, 48.4, 6, 48.4, 7.8, 46.5, 7, 38, 5.5, 31, -5.5, 31, -7.5, 39];\nconst O_KAIN = [-6.2, 31.5, 6.2, 31.5, 8.8, 21.5, 2, 17, -4, 19.5, -10, 23];\nconst O_CROWN = [-0.5, 58.5, 6.2, 58.5, 5.4, 62, 2.8, 67, 0.2, 61.8];\n\n// Where the knight and the ogre stand through a scene: story second, column (a scene that runs left to right).\nconst KX = [1.7, -16, 3.6, 18, 5.6, 14, 6, 23, 6.4, 14, 6.8, 17, 7.2, 13, 7.6, 24, 8, 16, 8.5, 20, 9, 22, 10.8, 28, 12.3, 86];\nconst OX = [2.3, 84, 4.2, 47, 5.6, 50, 6, 47, 6.4, 49, 6.8, 40, 7.2, 50, 7.6, 47, 8, 39, 8.5, 42, 9, 40];\nfunction key(t, k) {\n  if (t \u003c= k[0]) return k[1];\n  for (let i = 2; i \u003c k.length; i += 2) if (t \u003c k[i]) return mix(k[i - 1], k[i + 1], sm(k[i - 2], k[i], t));\n  return k[k.length - 1];\n}\nconst pose = (hc, sz) => ({ on: false, x: 32, y: GROUND, z: 0.02, rot: 0, face: 1, a1: 0, a2: 0, b1: 0, b2: 0, jaw: 0, hc, sz });\n\nexport function setup(params) {\n  const R = () => Math.random() * TAU;\n  const P = (params.s = {\n    M: new Float32Array(N), A: new Float32Array(N), C: new Float32Array(N * 3), F: new Float32Array(N * 3),\n    BG: new Float32Array(N * 3), PT: new Uint8Array(N), LW: new Float32Array(81), HB: new Float32Array((H - AUD) * W),\n    t: 0, rt: 0, view: 0, lamp: 0, fl: 0.06, knock: -1, ph: [R(), R(), R(), R(), R(), R(), R()], dir: Math.random() \u003c 0.5 ? 1 : -1,\n    K: pose(28, 1.22), O: pose(32, 1.12), G: pose(0, 1.04), I: 1, bil: 0, LX: 31.5, LY: 46, flame: 7, shx: 0, shy: 0,\n  });\n  // The puppets planted in the trunk at either end of the screen, only their fronts showing: an ogre king, a knight.\n  P.SIMP = [[-6.5, 1, 1.32, 0], [65.5, -1, 1.4, 1]].map(([x, face, sz, k]) => Object.assign(pose(30, sz), { x, face, k, y: GROUND + 4, a2: 0.1, b1: -0.1, b2: 0.15 }));\n  // Half the gunungan's width at each height: a leaf with a pointed tip.\n  for (let v = 0; v \u003c= 80; v++) P.LW[v] = v > 78 ? 0 : v \u003c 22 ? 18 * sqrt(1 - ((22 - v) / 31) ** 2) : 18 * (1 - ((v - 22) / 56) ** 1.7) ** 1.15;\n  // What does not move, as colour before the light: beam, border, posts, cloth, hem, trunk, floor.\n  const B = P.BG;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.02, 0.018, 0.03], t = 1;\n    if (y >= BEAM && y \u003c BEAM + 4) {\n      const g = [0.55, 0.85, 1, 0.65][y - BEAM] * ((x + (y & 1) * 2) % 5 === 0 ? 0.55 : 0.9 + 0.1 * n);\n      c = [0.5 * g, 0.31 * g, 0.16 * g];\n    } else if (y >= BEAM + 4 && y \u003c CLOTH) c = y === CLOTH - 1 ? (x & 1 ? [0.85, 0.62, 0.24] : [0.3, 0.07, 0.06]) : [0.34, 0.07, 0.06].map((v) => v * (0.85 + 0.15 * n));\n    else if (y >= CLOTH && y \u003c HEM && (x \u003c 2 || x > 61)) {\n      const g = x === 1 || x === 62 ? 0.75 : 0.42;\n      c = [0.46 * g, 0.28 * g, 0.15 * g];\n    } else if (y >= CLOTH && y \u003c HEM) (t = 0), (c = [0.955 + 0.045 * n - (y === 57 ? 0.07 : y === 58 ? 0.025 : 0) - (x & 1 ? 0.012 : 0), 0, 0]);\n    else if (y === HEM) c = [0.3, 0.06, 0.05];\n    else if (y >= TRUNK && y \u003c TRUNK + 8) {\n      const g = [0.7, 1, 0.95, 0.85, 0.72, 0.58, 0.44, 0.3][y - TRUNK] * (0.82 + 0.18 * hash(floor(x / 4) + y * 17, y));\n      (t = 2), (c = [0.6 * g, 0.64 * g, 0.4 * g]);\n    } else if (y >= TRUNK + 8) c = [0.05, 0.035, 0.03].map((v) => v * (1 - (y - TRUNK - 8) / 20));\n    (B[o] = c[0]), (B[o + 1] = c[1]), (B[o + 2] = c[2]), (P.PT[i] = t);\n  }\n}\n\n// The knight's scene, in story seconds, for a scene that runs left to right.\nfunction knight(t, Q, rt, kb) {\n  Q.on = t > 1.7 && t \u003c 12.3;\n  Q.x = key(t, KX);\n  const v = (key(t + 0.05, KX) - key(t - 0.05, KX)) * 10, walk = cl(abs(v) / 12, 0, 1), st = sin(PI * t * 2.6);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((Q.x - 14) / 9, 0, 1);\n  const point = sm(3.7, 4.1, t) * (1 - sm(4.8, 5.2, t)), heave = sm(8.5, 9.1, t) * (1 - sm(9.7, 10.5, t));\n  Q.y = GROUND - walk * 1.8 * abs(st);\n  Q.z = 0.03;\n  Q.rot = -0.05 * walk + fight * 0.06 * sin(w + 0.5) + heave * 0.16 - 0.14 * kb;\n  Q.a1 = 0.12 + 0.3 * walk * st + 1.45 * point + fight * 0.7 + 1.5 * reach + 2.5 * heave + 1.4 * kb;\n  Q.a2 = 0.15 + 0.35 * point + fight * 0.9 - 0.7 * reach + 0.2 * heave;\n  Q.b1 = -0.12 + 0.06 * sin(rt * 1.7) - 0.25 * walk * st + fight * 0.3 * sin(w + 2);\n  Q.b2 = 0.2;\n}\n\n// The ogre: in from the other side, a looming threat, the fight, the throw.\nfunction ogre(t, Q, rt, kb) {\n  Q.on = t > 2.3 && t \u003c 10.6;\n  const u = cl((t - 9.2) / 1.4, 0, 1);\n  Q.x = key(t, OX) + 30 * u;\n  const v = (key(t + 0.05, OX) - key(t - 0.05, OX)) * 10, walk = cl(abs(v) / 12, 0, 1) * (1 - u), st = sin(PI * t * 2.1);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((50 - Q.x) / 10, 0, 1);\n  const loom = sm(4.3, 4.9, t) * (1 - sm(4.95, 5.5, t));\n  Q.y = GROUND - walk * 2.6 * abs(st) - 115 * u * u;\n  Q.z = 0.03 + 0.16 * loom + 0.28 * u;\n  Q.rot = -0.04 * walk + 0.07 * walk * st - 0.1 * loom + fight * 0.07 * sin(w + 3.6) + 5.6 * u + 0.35 * kb;\n  Q.a1 = 0.3 + 0.25 * walk * st + 2.0 * loom + fight * (0.6 + 0.3 * sin(w)) + 1.6 * reach + 1.2 * u;\n  Q.a2 = 0.35 + 0.5 * loom + fight * 0.6 - 0.5 * reach;\n  Q.b1 = -0.4 - 0.3 * walk * st + 0.5 * loom; Q.b2 = 0.5;\n  Q.jaw = 0.08 + loom * (0.25 + 0.15 * sin(rt * 14)) + fight * 0.25 * (0.5 + 0.5 * sin(w * 2)) + 0.45 * u + 0.4 * kb;\n}\n\n// The gunungan: planted in the middle, pulled away trembling, back at the end.\nfunction gunungan(t, Q, rt, kb) {\n  Q.on = t \u003c 3.3 || t > 10.5;\n  let e, mv;\n  if (t \u003c 7) (e = cl((t - 1.4) / 1.9, 0, 1) ** 2), (Q.x = 32 + 58 * e), (mv = sin(PI * cl((t - 1.4) / 1.9, 0, 1)));\n  else (e = 1 - sm(10.5, 12.6, t)), (Q.x = 32 - 58 * e), (mv = sin(PI * e));\n  Q.y = 98 - 10 * mv;\n  Q.z = 0.02 + 0.3 * e;\n  Q.rot = -0.45 * e + (0.012 + 0.06 * mv + 0.12 * kb) * sin(rt * TAU * 8.5) + 0.01 * sin(rt * 2.3);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05);\n  (P.view = cl(k[0], 0, 1)), (P.lamp = cl(k[2], 0, 1)), (P.fl = cl(k[3], 0, 1));\n  (P.rt += rd), (P.t += (rd * cl(k[1], 0.2, 3)) / 2);\n  if (input.btnPressed && input.btnPressed[0]) P.knock = 0;\n  if (P.knock >= 0 && (P.knock += rd) > 1.2) P.knock = -1;\n  const kn = P.knock \u003c 0 ? 9 : P.knock, kb = kn \u003c 0.45 ? sin((PI * kn) / 0.45) : 0, kr = sin(PI * cl((kn - 0.1) / 0.5, 0, 1)), sh = kn \u003c 0.4 ? 1 - kn / 0.4 : 0;\n  // The flame: a breathing flicker, now and then a gutter, a sway that moves the light.\n  const f = P.fl, rt = P.rt, ph = P.ph, amp = 0.035 + 0.2 * f;\n  const n = 0.5 * sin(7.3 * rt + ph[0]) + 0.3 * sin(12.9 * rt + ph[1]) + 0.2 * sin(23.1 * rt + ph[2]), gut = max(0, sin(1.7 * rt + ph[3]) + 0.6 * sin(3.1 * rt + ph[6])) ** 3 * 0.25 * f;\n  P.I = 1 - 0.12 * f + amp * n - 0.35 * gut + 0.2 * sh;\n  // A draught also bellies the cloth away from the puppets, so their shadows swell and soften.\n  P.bil = 0.07 * f * (0.6 + 0.4 * sin(0.9 * rt + ph[5]));\n  P.LX = 31.5 + (1 + 11 * f) * (0.65 * sin(2.1 * rt + ph[4]) + 0.35 * sin(0.83 * rt + ph[5])) + 2 * amp * sin(9.7 * rt + ph[6]);\n  P.LY = 46 - 3 * gut - 3 * f * sin(1.3 * rt + ph[2]);\n  P.flame = 7 * (1 + 1.5 * f) * (1 + 0.8 * amp * sin(11.3 * rt + ph[1]) + 0.6 * gut);\n  (P.shx = 1.3 * sh * sin(kn * 70)), (P.shy = 0.9 * sh * sin(kn * 53 + 1));\n  // The play.\n  const sc = floor(P.t / SCENE), t = P.t - sc * SCENE, dir = sc & 1 ? -P.dir : P.dir;\n  (P.K.face = dir), (P.O.face = -dir), (P.G.face = dir);\n  knight(t, P.K, rt, kb), ogre(t, P.O, rt, kr), gunungan(t, P.G, rt, sh);\n  (P.K.x += 7 * kb), (P.O.x += 6 * kr);\n  for (const Q of [P.K, P.O, P.G]) if (dir \u003c 0) Q.x = 63 - Q.x;\n}\n\n// The puppet being drawn: screen from puppet space and back, its magnification and blur.\nlet M, A, C, TX, TY, F11, F12, F21, F22, I11, I12, I21, I22, MAG, PEN, HV, LC;\nfunction place(P, Q, D) {\n  const f = cl((Q.z + P.bil) / D, 0, 0.62), m = 1 / (1 - f), c = cos(Q.rot), s = sin(Q.rot), fc = Q.face, k = m * Q.sz, hc = Q.hc * Q.sz;\n  (MAG = k), (PEN = 1 + (P.flame * f) / (1 - f)), (HV = cl(1.25 - 0.42 * PEN, 0, 0.85));\n  (F11 = k * fc * c), (F12 = -k * fc * s), (F21 = -k * s), (F22 = -k * c);\n  TX = P.LX * (1 - m) + m * (Q.x + fc * s * hc) + P.shx;\n  TY = P.LY * (1 - m) + m * (Q.y - hc + c * hc) + P.shy;\n  const det = F11 * F22 - F12 * F21;\n  (I11 = F22 / det), (I12 = -F12 / det), (I21 = -F21 / det), (I22 = F11 / det);\n}\n\nfunction holes(u, v, k) {\n  let a = u, b = v;\n  if (LD[k]) (a = (u + v) * 0.7071), (b = (v - u) * 0.7071);\n  if (k === 4) (a += 0.8 * sin(v * 0.6 + abs(u) * 0.35)), (b += 0.5 * sin(abs(u) * 0.7));\n  const pa = LA[k], pb = LB[k], j = round(b / pb), aa = a + (j & 1) * pa * 0.5, du = aa - round(aa / pa) * pa, dv = b - j * pb;\n  return cl((LR[k] - sqrt(du * du + dv * dv)) * 1.15 + 0.1, 0, 1);\n}\n\n// The gunungan's inside: rim, gate, tree, the two beasts, and lace everywhere else.\nlet LN, LW;\nfunction leaf(u, v, hw) {\n  const au = abs(u);\n  (LN = 0), (LC = GOLD);\n  if (hw - au \u003c 1.4 || v \u003c 1.3) return (LC = RED), 1;\n  if (v \u003c 15 && au \u003c 8) {\n    if (v \u003c 9) return (LC = RED), au > 1 && au \u003c 3.3 && v > 2.2 && v \u003c 7.6 ? 0.12 : 1;\n    return au \u003c 8 - (v - 9) * 1.15 ? 1 : ((LN = 4), (LC = TEAL), 1);\n  }\n  if (au \u003c 1.9 - v * 0.012 && v \u003c 70) return 1;\n  for (let b = 0; b \u003c 6; b++) {\n    const vb = 19 + 8 * b + 0.5 * au + 0.02 * au * au;\n    if (abs(v - vb) \u003c 1.05 && au \u003c min(hw - 2.4, 15 - b)) return 1;\n  }\n  const bx = (au - 6.5) / 3.4, by = (v - 17.5) / 1.9;\n  if (bx * bx + by * by \u003c 1) return (LC = HORN), 1;\n  return (LN = 4), (LC = TEAL), 1;\n}\n\n// One part: kind 0 a tapered rod (x0, y0, x1, y1, r0, r1), 1 an ellipse (cx, cy, rx, ry, turn), 2 a polygon, 3 the gunungan's leaf.\n// lace picks the holes; a part with no colour is a hole cut through what is already there (lace is then how deep).\nfunction part(k, a, b, c, d, e, f, lace, col) {\n  let u0, u1, v0, v1, rp = 99;\n  const ce = cos(e || 0), se = sin(e || 0);\n  if (k === 0) {\n    const r = max(e, f);\n    (u0 = min(a, c) - r), (u1 = max(a, c) + r), (v0 = min(b, d) - r), (v1 = max(b, d) + r), (rp = r * MAG);\n  } else if (k === 1) {\n    const r = max(c, d);\n    (u0 = a - r), (u1 = a + r), (v0 = b - r), (v1 = b + r), (rp = min(c, d) * MAG);\n  } else if (k === 2) {\n    (u0 = v0 = 1e9), (u1 = v1 = -1e9);\n    for (let i = 0; i \u003c a.length; i += 2) (u0 = min(u0, a[i])), (u1 = max(u1, a[i])), (v0 = min(v0, a[i + 1])), (v1 = max(v1, a[i + 1]));\n  } else (u0 = -19), (u1 = 19), (v0 = 0), (v1 = 79);\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let q = 0; q \u003c 4; q++) {\n    const u = q & 1 ? u1 : u0, v = q & 2 ? v1 : v0, X = F11 * u + F12 * v + TX, Y = F21 * u + F22 * v + TY;\n    (x0 = min(x0, X)), (x1 = max(x1, X)), (y0 = min(y0, Y)), (y1 = max(y1, Y));\n  }\n  const pad = PEN * 0.5 + 0.5, thin = min(1, (2 * rp + 1) / PEN), abx = c - a, aby = d - b, ab2 = abx * abx + aby * aby || 1e-9;\n  const xa = max(0, floor(x0 - pad)), xb = min(W - 1, ceil(x1 + pad)), ya = max(0, floor(y0 - pad)), yb = min(H - 1, ceil(y1 + pad));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - TX, dy = y - TY, u = I11 * dx + I12 * dy, v = I21 * dx + I22 * dy;\n      let dd, op = 1, ln = lace, cc = col;\n      if (k === 0) {\n        const t = cl(((u - a) * abx + (v - b) * aby) / ab2, 0, 1), qx = u - a - abx * t, qy = v - b - aby * t;\n        dd = sqrt(qx * qx + qy * qy) - mix(e, f, t);\n      } else if (k === 1) {\n        const pu = u - a, pv = v - b, lu = (pu * ce + pv * se) / c, lv = (pv * ce - pu * se) / d;\n        dd = (sqrt(lu * lu + lv * lv) - 1) * min(c, d);\n      } else if (k === 2) {\n        let md = 1e9, ins = false;\n        for (let i = 0, j = a.length - 2; i \u003c a.length; j = i, i += 2) {\n          const xi = a[i], yi = a[i + 1], ex = a[j] - xi, ey = a[j + 1] - yi;\n          if (yi > v !== a[j + 1] > v && u \u003c (ex * (v - yi)) / ey + xi) ins = !ins;\n          const s = cl(((u - xi) * ex + (v - yi) * ey) / (ex * ex + ey * ey), 0, 1), qx = u - xi - ex * s, qy = v - yi - ey * s;\n          md = min(md, qx * qx + qy * qy);\n        }\n        dd = ins ? -sqrt(md) : sqrt(md);\n      } else {\n        const vi = cl(v, 0, 79.9), v0i = floor(vi), hw = mix(LW[v0i], LW[v0i + 1], vi - v0i);\n        dd = max(abs(u) - hw, -v, v - 78);\n        if (dd \u003c 0.6) (op = leaf(u, v, hw)), (ln = LN), (cc = LC);\n      }\n      const dp = dd * MAG;\n      if (dp > pad) continue;\n      let cs = cl(0.5 - dp / PEN, 0, 1) * thin, cv = cl(0.5 - dp, 0, 1);\n      const i = y * W + x, o = i * 3;\n      if (!cc) {\n        const dep = lace \u003c 0 ? 0.9 * holes(u, v, -lace) : lace, s = 1 - cs * dep * min(1, HV * 1.3), sv = 1 - cv * dep;\n        (M[i] *= s), (A[i] *= sv), (C[o] *= sv), (C[o + 1] *= sv), (C[o + 2] *= sv);\n        continue;\n      }\n      if (ln) {\n        const h = holes(u, v, ln);\n        (cs *= 1 - h * HV), (cv *= 1 - h * 0.85);\n      }\n      cs *= op;\n      cv *= op;\n      if (cs > M[i]) M[i] = cs;\n      if (cv > 0) (C[o] += (cc[0] - C[o]) * cv), (C[o + 1] += (cc[1] - C[o + 1]) * cv), (C[o + 2] += (cc[2] - C[o + 2]) * cv), (A[i] += (1 - A[i]) * cv);\n    }\n}\nconst rod = (x0, y0, x1, y1, r0, r1, lace, col) => part(0, x0, y0, x1, y1, r0, r1, lace, col);\nconst ell = (cx, cy, rx, ry, turn, lace, col) => part(1, cx, cy, rx, ry, turn, 0, lace, col);\nconst poly = (pts, lace, col) => part(2, pts, 0, 0, 0, 0, 0, lace, col);\n\n// An arm on its two joints, the pointing hand, and the thin rod down to the dalang's fist.\nfunction arm(sx, sy, a1, a2, l1, l2, r1, r2, col) {\n  const ex = sx + l1 * sin(a1), ey = sy - l1 * cos(a1), hx = ex + l2 * sin(a1 + a2), hy = ey - l2 * cos(a1 + a2);\n  rod(sx, sy, ex, ey, r1, r1 * 0.85, 0, col), rod(ex, ey, hx, hy, r2 * 0.95, r2 * 0.75, 0, col);\n  rod(hx, hy, hx + 2.4 * sin(a1 + a2 + 0.25), hy - 2.4 * cos(a1 + a2 + 0.25), r2 * 0.75, 0.3, 0, col);\n  rod(ex - 0.2, ey, ex + 0.2, ey, r1 * 1.15, r1 * 1.15, 0, GOLD);\n  const gx = 2 - hx, gy = -14 - hy, l = sqrt(gx * gx + gy * gy) || 1, L = min(l, 30) / l;\n  rod(hx, hy, hx + gx * L, hy + gy * L, 0.42, 0.42, 0, BAMBOO);\n}\n\nfunction drawKnight(Q) {\n  rod(0.4, 34, 0.4, -16, 0.5, 0.45, 0, HORN);\n  arm(-4.6, 39.4, Q.b1, Q.b2, 12, 12.5, 1.0, 0.85, GOLD);\n  rod(-1, 17, -2.6, 1.5, 1.15, 0.95, 0, GOLD), rod(-2.6, 0.8, 1.2, 0.6, 0.8, 0.7, 0, GOLD);\n  rod(1.5, 17, 3.6, 1.5, 1.15, 0.95, 0, GOLD), rod(3.6, 0.8, 7.6, 0.6, 0.8, 0.7, 0, GOLD);\n  poly(K_KAIN, 2, INDIGO);\n  rod(3, 27, 5.4, 11, 0.8, 0.45, 0, RED);\n  poly(K_TORSO, 0, GOLD);\n  rod(-2.6, 29, 2.4, 29, 1.1, 1.1, 0, RED);\n  rod(-2.2, 33, 2, 33, 0.9, 0.9, -1, null);\n  rod(0.5, 40.5, 1.8, 44, 1.3, 1.1, 0, GOLD);\n  ell(-1.6, 46, 1.1, 2.6, -0.5, 1, GOLD);\n  ell(2.2, 47, 2.8, 3.6, 0.35, 0, GOLD);\n  poly(K_NOSE, 0, GOLD);\n  rod(1.5, 50.5, -2.5, 53.4, 1.6, 1.4, 3, HAIR), rod(-2.5, 53.4, -4.8, 50.2, 1.4, 0.6, 3, HAIR);\n  rod(-0.5, 50, 4.2, 50.6, 0.7, 0.6, 0, GOLD);\n  rod(3.6, 48, 5.1, 47.6, 0.38, 0.38, 0.9, null);\n  rod(-3.4, 38.6, 0.3, 36.6, 0.75, 0.75, -3, null), rod(0.3, 36.6, 3.4, 38.6, 0.75, 0.75, -3, null);\n  arm(3.6, 39.4, Q.a1, Q.a2, 12, 12.5, 1.0, 0.85, GOLD);\n}\n\nfunction drawOgre(Q) {\n  rod(0.4, 40, 0.4, -16, 0.55, 0.5, 0, HORN);\n  arm(-7.5, 46, Q.b1, Q.b2, 12.5, 13, 1.6, 1.3, RED);\n  rod(-3, 27, -7, 15, 2, 1.6, 0, RED), rod(-7, 15, -7.5, 2, 1.6, 1.3, 0, RED), rod(-8.1, 1, -3.6, 0.8, 1.1, 1, 0, RED);\n  rod(3, 27, 7, 15, 2, 1.6, 0, RED), rod(7, 15, 7.5, 2, 1.6, 1.3, 0, RED), rod(7.5, 1, 12, 0.8, 1.1, 1, 0, RED);\n  poly(O_KAIN, 2, TEAL);\n  rod(5, 29, 8, 10, 1, 0.6, 0, GOLD);\n  poly(O_TORSO, 0, RED), ell(3.6, 37, 4.8, 5.4, 0, 0, RED);\n  rod(-5.5, 45.6, 0.5, 42.5, 1, 1, -3, null), rod(0.5, 42.5, 6, 45.6, 1, 1, -3, null), ell(-1.5, 38, 3, 4, 0.2, -1, null);\n  rod(-6, 31.2, 6, 31.2, 1.2, 1.2, 0, GOLD);\n  ell(-3.5, 54, 5.5, 7.5, 0.35, 3, HAIR);\n  rod(-6, 59, -10.5, 63, 1.3, 0.3, 0, HAIR), rod(-8, 52, -13, 50, 1.3, 0.3, 0, HAIR), rod(-6.5, 47.5, -10.5, 43, 1.1, 0.3, 0, HAIR);\n  rod(0.5, 47, 2, 51, 2.5, 2.2, 0, RED);\n  ell(3.2, 55.3, 5, 4.4, 0, 0, RED), ell(9.3, 54.8, 2.4, 2.0, 0, 0, RED);\n  const j = Q.jaw, jx = 3.5 + 6.3 * cos(j), jy = 50.6 - 6.3 * sin(j);\n  rod(3.5, 50.6, jx, jy, 1.3, 1.0, 0, RED), rod(jx - 0.9, jy + 0.5, jx - 0.5, jy + 2.7, 0.55, 0.15, 0, IVORY);\n  rod(7.6, 51.3, 7.9, 49.3, 0.5, 0.15, 0, IVORY);\n  poly(O_CROWN, 1, GOLD);\n  ell(-0.5, 53, 1.5, 3, -0.4, 1, GOLD);\n  rod(6.3, 56.4, 6.3, 56.4, 1.5, 1.5, 0.9, null);\n  rod(6.6, 56.4, 6.6, 56.4, 0.6, 0.6, 0, HAIR);\n  arm(6, 46, Q.a1, Q.a2, 12.5, 13, 1.6, 1.3, RED);\n}\n\nfunction drawGunungan() {\n  rod(0, 6, 0, -12, 0.7, 0.6, 0, HORN);\n  part(3, 0, 0, 0, 0, 0, 0, 0, GOLD);\n}\n\n// A soft-edged ellipse painted over the frame, or added as glow.\nfunction blob(F, cx, cy, rx, ry, col, a, add) {\n  for (let y = max(0, floor(cy - ry - 1)); y \u003c= min(H - 1, ceil(cy + ry + 1)); y++)\n    for (let x = max(0, floor(cx - rx - 1)); x \u003c= min(W - 1, ceil(cx + rx + 1)); x++) {\n      const ex = (x - cx) / rx, ey = (y - cy) / ry, d = sqrt(ex * ex + ey * ey), o = (y * W + x) * 3;\n      const c = add ? max(0, 1 - d) ** 2 * a : cl((1 - d) * min(rx, ry) + 0.5, 0, 1) * a;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = add ? F[o + j] + col[j] * c : mix(F[o + j], col[j], c);\n    }\n}\n\n// The audience: heads and shoulders against the light, [x, top, rx, ry, kind]: bare, a peci cap, a headscarf.\nconst RIM = [1, 0.76, 0.48];\nconst HEADS = [[6, 98, 4.6, 5.6, 1], [19, 95, 5, 6, 0], [33, 99.5, 4.4, 5.4, 2], [46, 96, 5, 6.2, 1], [58.5, 98.5, 4.6, 5.6, 0]];\n// Their outline, as coverage in rows AUD and down: head, ears or scarf, neck, shoulders.\nfunction audience(HB, rt) {\n  HB.fill(0);\n  for (let j = 0; j \u003c 5; j++) {\n    const [hx, ht, rx, ry, kd] = HEADS[j], cx = hx + 0.6 * sin(rt * 0.45 + j * 1.7), top = ht + 0.4 * sin(rt * 0.7 + j * 2.3), cy = top + ry, sr = rx * 2.6;\n    for (let y = floor(top - 3); y \u003c H; y++)\n      for (let x = max(0, floor(cx - sr)); x \u003c= min(W - 1, ceil(cx + sr)); x++) {\n        const ax = abs(x - cx), ex = ax / (rx + (kd === 2 ? 0.8 : 0)), ey = (y - cy) / ry, sx = ax / sr, sy = (y - top - 2 * ry - 11) / 9;\n        let d = min((sqrt(ex * ex + ey * ey) - 1) * rx, (sqrt(sx * sx + sy * sy) - 1) * 9);\n        if (kd === 1) d = min(d, max(ax - rx * (0.86 + 0.04 * (y - top)), abs(y - top + 0.2) - 2.3));\n        if (kd === 2) d = min(d, max(ax - rx * (0.9 + (y - cy) * 0.09), cy - y));\n        else d = min(d, (sqrt((ax - rx) ** 2 + (y - cy - 0.6) ** 2) - 1.1) * 1.5, max(ax - rx * 0.62, cy - y));\n        const i = (y - AUD) * W + x;\n        HB[i] = max(HB[i], cl(0.5 - d, 0, 1));\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  (M = P.M), (A = P.A), (C = P.C), (LW = P.LW);\n  M.fill(0), A.fill(0), C.fill(0);\n  const D = 1 - 0.55 * P.lamp;\n  for (const S of P.SIMP) place(P, S, D), S.k ? drawKnight(S) : drawOgre(S);\n  if (P.K.on) place(P, P.K, D), drawKnight(P.K);\n  if (P.O.on) place(P, P.O, D), drawOgre(P.O);\n  if (P.G.on) place(P, P.G, D), drawGunungan();\n  const F = P.F, B = P.BG, PT = P.PT, I = P.I, LX = P.LX, LY = P.LY, R2 = (46 * D) ** 2, vw = sm(0, 1, P.view), rd = 0.12 * (1 - P.I) * P.fl, top = I * 228 * (0.95 + 0.05 / D);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = x - LX, dy = y - LY, fo = 1 / (1 + (dx * dx + dy * dy) / R2), pt = PT[i];\n      if (pt === 0) {\n        // The cloth: lamp light through cotton, the shadows on it; or from behind, the paint over the dim cloth.\n        const L = top * (0.2 + 0.8 * fo) * B[o], lr = L, lg = L * (0.7 + 0.18 * fo - rd), lb = L * (0.36 + 0.3 * fo - rd), s = 1 - 0.94 * M[i];\n        let r = lr * s, g = lg * s, b = lb * s;\n        if (vw > 0) {\n          const k = 0.3 * (1 - A[i]), lit = I * (0.45 + 0.5 * fo) * 250;\n          (r = mix(r, lr * k + C[o] * lit, vw)), (g = mix(g, lg * k + C[o + 1] * lit, vw)), (b = mix(b, lb * k + C[o + 2] * lit, vw));\n        }\n        (F[o] = r), (F[o + 1] = g), (F[o + 2] = b);\n      } else {\n        const s = I * (0.3 + 0.7 * fo) * 255 * (pt === 2 ? 1 - 0.85 * M[i] : 1);\n        (F[o] = B[o] * s), (F[o + 1] = B[o + 1] * s), (F[o + 2] = B[o + 2] * s);\n      }\n    }\n  // From the dalang's side the blencong hangs in view: a bronze garuda on a chain, the flame at its beak.\n  if (vw > 0.01) {\n    const bx = LX + 2, fl = P.flame / 7;\n    for (let y = 0; y \u003c 11; y++) blob(F, round(bx), y, 0.6, 0.6, y & 1 ? [90, 62, 30] : [150, 105, 50], vw);\n    blob(F, bx + 6, 10.5, 2.2, 3.2, [150, 96, 36], vw), blob(F, bx, 13, 5, 2.2, [170, 112, 42], vw), blob(F, bx - 4.2, 11, 1.4, 1.6, [200, 140, 60], vw);\n    blob(F, bx - 6.2, 12.8 - fl, 1.6 * fl, 6 * fl, [255, 140, 40], 0.5 * vw * I, 1), blob(F, bx - 6.2, 12.5 - fl * 0.6, 0.8, 1.9 * fl, [255, 240, 190], vw);\n  }\n  // The audience against the light, the rims of their heads lit by the screen.\n  const HB = P.HB;\n  audience(HB, P.rt);\n  for (let y = AUD + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = (y - AUD) * W + x, c = HB[k];\n      if (c \u003c= 0) continue;\n      const o = (y * W + x) * 3, q = (min(y, HEM - 1) * W + x) * 3, side = min(x > 0 ? HB[k - 1] : 1, x \u003c W - 1 ? HB[k + 1] : 1);\n      const rim = (1 - (HB[k - W] + HB[k - 2 * W]) / 2) * 0.6 + (1 - side) * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = F[o + j] * (1 - c) + c * (6 + rim * RIM[j] * max(70, F[q] * 0.9));\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","layer":{"id":"layer-shadow-play","type":"code","name":"shadow-play","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shadow Play\n// Family:  stage\n// Idea:    Wayang kulit from the audience: an oil lamp behind the white screen throws the lacy leather shadows of a knight and an ogre who meet, threaten and fight until the ogre is flung away, then the leaf-shaped gunungan sweeps in trembling to close the scene and open the next.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 26, after the Javanese wayang kulit shadow play\n// Round:   26\n// ===============================\n// @matrix 64x128\n// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1\n//\n// Knob 1: View. At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp.\n// Knob 2: Speed. The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower.\n// Knob 3: Lamp. How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs.\n// Knob 4: Flicker. How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften.\n// Buttons: K1 tap: the dalang strikes the cempala; the knight lunges, the ogre reels (or the gunungan shivers) and the screen shakes.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Rows: the top beam, the cloth, the line the puppets stand on, the hem, the banana trunk, the first row the audience can reach.\nconst BEAM = 3, CLOTH = 10, GROUND = 92, HEM = 103, TRUNK = 104, AUD = 88;\n// One scene in story seconds (real seconds at Speed 2).\nconst SCENE = 14.4;\n// The paint, seen from the dalang's side.\nconst GOLD = [0.95, 0.72, 0.26], RED = [0.86, 0.2, 0.13], INDIGO = [0.22, 0.3, 0.8], TEAL = [0.1, 0.52, 0.48], HAIR = [0.13, 0.1, 0.15];\nconst HORN = [0.32, 0.2, 0.11], BAMBOO = [0.62, 0.5, 0.3], IVORY = [0.96, 0.92, 0.82];\n// Lace: the punched holes, as a lattice in puppet space: spacing along, spacing across, laid diagonally.\nconst LA = [0, 2.5, 2.0, 1.9, 2.3], LB = [0, 2.5, 3.6, 1.9, 2.3], LD = [0, 0, 1, 0, 0], LR = [0, 0.9, 0.9, 0.8, 1.15];\n\n// Knight and ogre outlines in puppet space: x forward, y up from the soles.\nconst K_TORSO = [-5.2, 40.4, -3.6, 41.6, 3.2, 41.6, 4.6, 40.4, 3.4, 35, 1.9, 28.5, -2.1, 28.5, -3.6, 35];\nconst K_KAIN = [-3.2, 28.5, 3.2, 28.5, 4.4, 20, 3.4, 13, 1.6, 5, -0.6, 13, -4.5, 16, -9.8, 9.5, -5.8, 22];\nconst K_NOSE = [3.8, 49.6, 8.6, 45.2, 4.6, 46.4];\nconst O_TORSO = [-8.2, 47, -6.5, 48.4, 6, 48.4, 7.8, 46.5, 7, 38, 5.5, 31, -5.5, 31, -7.5, 39];\nconst O_KAIN = [-6.2, 31.5, 6.2, 31.5, 8.8, 21.5, 2, 17, -4, 19.5, -10, 23];\nconst O_CROWN = [-0.5, 58.5, 6.2, 58.5, 5.4, 62, 2.8, 67, 0.2, 61.8];\n\n// Where the knight and the ogre stand through a scene: story second, column (a scene that runs left to right).\nconst KX = [1.7, -16, 3.6, 18, 5.6, 14, 6, 23, 6.4, 14, 6.8, 17, 7.2, 13, 7.6, 24, 8, 16, 8.5, 20, 9, 22, 10.8, 28, 12.3, 86];\nconst OX = [2.3, 84, 4.2, 47, 5.6, 50, 6, 47, 6.4, 49, 6.8, 40, 7.2, 50, 7.6, 47, 8, 39, 8.5, 42, 9, 40];\nfunction key(t, k) {\n  if (t \u003c= k[0]) return k[1];\n  for (let i = 2; i \u003c k.length; i += 2) if (t \u003c k[i]) return mix(k[i - 1], k[i + 1], sm(k[i - 2], k[i], t));\n  return k[k.length - 1];\n}\nconst pose = (hc, sz) => ({ on: false, x: 32, y: GROUND, z: 0.02, rot: 0, face: 1, a1: 0, a2: 0, b1: 0, b2: 0, jaw: 0, hc, sz });\n\nexport function setup(params) {\n  const R = () => Math.random() * TAU;\n  const P = (params.s = {\n    M: new Float32Array(N), A: new Float32Array(N), C: new Float32Array(N * 3), F: new Float32Array(N * 3),\n    BG: new Float32Array(N * 3), PT: new Uint8Array(N), LW: new Float32Array(81), HB: new Float32Array((H - AUD) * W),\n    t: 0, rt: 0, view: 0, lamp: 0, fl: 0.06, knock: -1, ph: [R(), R(), R(), R(), R(), R(), R()], dir: Math.random() \u003c 0.5 ? 1 : -1,\n    K: pose(28, 1.22), O: pose(32, 1.12), G: pose(0, 1.04), I: 1, bil: 0, LX: 31.5, LY: 46, flame: 7, shx: 0, shy: 0,\n  });\n  // The puppets planted in the trunk at either end of the screen, only their fronts showing: an ogre king, a knight.\n  P.SIMP = [[-6.5, 1, 1.32, 0], [65.5, -1, 1.4, 1]].map(([x, face, sz, k]) => Object.assign(pose(30, sz), { x, face, k, y: GROUND + 4, a2: 0.1, b1: -0.1, b2: 0.15 }));\n  // Half the gunungan's width at each height: a leaf with a pointed tip.\n  for (let v = 0; v \u003c= 80; v++) P.LW[v] = v > 78 ? 0 : v \u003c 22 ? 18 * sqrt(1 - ((22 - v) / 31) ** 2) : 18 * (1 - ((v - 22) / 56) ** 1.7) ** 1.15;\n  // What does not move, as colour before the light: beam, border, posts, cloth, hem, trunk, floor.\n  const B = P.BG;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, n = hash(x, y);\n    let c = [0.02, 0.018, 0.03], t = 1;\n    if (y >= BEAM && y \u003c BEAM + 4) {\n      const g = [0.55, 0.85, 1, 0.65][y - BEAM] * ((x + (y & 1) * 2) % 5 === 0 ? 0.55 : 0.9 + 0.1 * n);\n      c = [0.5 * g, 0.31 * g, 0.16 * g];\n    } else if (y >= BEAM + 4 && y \u003c CLOTH) c = y === CLOTH - 1 ? (x & 1 ? [0.85, 0.62, 0.24] : [0.3, 0.07, 0.06]) : [0.34, 0.07, 0.06].map((v) => v * (0.85 + 0.15 * n));\n    else if (y >= CLOTH && y \u003c HEM && (x \u003c 2 || x > 61)) {\n      const g = x === 1 || x === 62 ? 0.75 : 0.42;\n      c = [0.46 * g, 0.28 * g, 0.15 * g];\n    } else if (y >= CLOTH && y \u003c HEM) (t = 0), (c = [0.955 + 0.045 * n - (y === 57 ? 0.07 : y === 58 ? 0.025 : 0) - (x & 1 ? 0.012 : 0), 0, 0]);\n    else if (y === HEM) c = [0.3, 0.06, 0.05];\n    else if (y >= TRUNK && y \u003c TRUNK + 8) {\n      const g = [0.7, 1, 0.95, 0.85, 0.72, 0.58, 0.44, 0.3][y - TRUNK] * (0.82 + 0.18 * hash(floor(x / 4) + y * 17, y));\n      (t = 2), (c = [0.6 * g, 0.64 * g, 0.4 * g]);\n    } else if (y >= TRUNK + 8) c = [0.05, 0.035, 0.03].map((v) => v * (1 - (y - TRUNK - 8) / 20));\n    (B[o] = c[0]), (B[o + 1] = c[1]), (B[o + 2] = c[2]), (P.PT[i] = t);\n  }\n}\n\n// The knight's scene, in story seconds, for a scene that runs left to right.\nfunction knight(t, Q, rt, kb) {\n  Q.on = t > 1.7 && t \u003c 12.3;\n  Q.x = key(t, KX);\n  const v = (key(t + 0.05, KX) - key(t - 0.05, KX)) * 10, walk = cl(abs(v) / 12, 0, 1), st = sin(PI * t * 2.6);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((Q.x - 14) / 9, 0, 1);\n  const point = sm(3.7, 4.1, t) * (1 - sm(4.8, 5.2, t)), heave = sm(8.5, 9.1, t) * (1 - sm(9.7, 10.5, t));\n  Q.y = GROUND - walk * 1.8 * abs(st);\n  Q.z = 0.03;\n  Q.rot = -0.05 * walk + fight * 0.06 * sin(w + 0.5) + heave * 0.16 - 0.14 * kb;\n  Q.a1 = 0.12 + 0.3 * walk * st + 1.45 * point + fight * 0.7 + 1.5 * reach + 2.5 * heave + 1.4 * kb;\n  Q.a2 = 0.15 + 0.35 * point + fight * 0.9 - 0.7 * reach + 0.2 * heave;\n  Q.b1 = -0.12 + 0.06 * sin(rt * 1.7) - 0.25 * walk * st + fight * 0.3 * sin(w + 2);\n  Q.b2 = 0.2;\n}\n\n// The ogre: in from the other side, a looming threat, the fight, the throw.\nfunction ogre(t, Q, rt, kb) {\n  Q.on = t > 2.3 && t \u003c 10.6;\n  const u = cl((t - 9.2) / 1.4, 0, 1);\n  Q.x = key(t, OX) + 30 * u;\n  const v = (key(t + 0.05, OX) - key(t - 0.05, OX)) * 10, walk = cl(abs(v) / 12, 0, 1) * (1 - u), st = sin(PI * t * 2.1);\n  const fight = sm(5.5, 5.8, t) * (1 - sm(8.6, 8.9, t)), w = TAU * 1.6 * (t - 5.6), reach = fight * cl((50 - Q.x) / 10, 0, 1);\n  const loom = sm(4.3, 4.9, t) * (1 - sm(4.95, 5.5, t));\n  Q.y = GROUND - walk * 2.6 * abs(st) - 115 * u * u;\n  Q.z = 0.03 + 0.16 * loom + 0.28 * u;\n  Q.rot = -0.04 * walk + 0.07 * walk * st - 0.1 * loom + fight * 0.07 * sin(w + 3.6) + 5.6 * u + 0.35 * kb;\n  Q.a1 = 0.3 + 0.25 * walk * st + 2.0 * loom + fight * (0.6 + 0.3 * sin(w)) + 1.6 * reach + 1.2 * u;\n  Q.a2 = 0.35 + 0.5 * loom + fight * 0.6 - 0.5 * reach;\n  Q.b1 = -0.4 - 0.3 * walk * st + 0.5 * loom; Q.b2 = 0.5;\n  Q.jaw = 0.08 + loom * (0.25 + 0.15 * sin(rt * 14)) + fight * 0.25 * (0.5 + 0.5 * sin(w * 2)) + 0.45 * u + 0.4 * kb;\n}\n\n// The gunungan: planted in the middle, pulled away trembling, back at the end.\nfunction gunungan(t, Q, rt, kb) {\n  Q.on = t \u003c 3.3 || t > 10.5;\n  let e, mv;\n  if (t \u003c 7) (e = cl((t - 1.4) / 1.9, 0, 1) ** 2), (Q.x = 32 + 58 * e), (mv = sin(PI * cl((t - 1.4) / 1.9, 0, 1)));\n  else (e = 1 - sm(10.5, 12.6, t)), (Q.x = 32 - 58 * e), (mv = sin(PI * e));\n  Q.y = 98 - 10 * mv;\n  Q.z = 0.02 + 0.3 * e;\n  Q.rot = -0.45 * e + (0.012 + 0.06 * mv + 0.12 * kb) * sin(rt * TAU * 8.5) + 0.01 * sin(rt * 2.3);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.05);\n  (P.view = cl(k[0], 0, 1)), (P.lamp = cl(k[2], 0, 1)), (P.fl = cl(k[3], 0, 1));\n  (P.rt += rd), (P.t += (rd * cl(k[1], 0.2, 3)) / 2);\n  if (input.btnPressed && input.btnPressed[0]) P.knock = 0;\n  if (P.knock >= 0 && (P.knock += rd) > 1.2) P.knock = -1;\n  const kn = P.knock \u003c 0 ? 9 : P.knock, kb = kn \u003c 0.45 ? sin((PI * kn) / 0.45) : 0, kr = sin(PI * cl((kn - 0.1) / 0.5, 0, 1)), sh = kn \u003c 0.4 ? 1 - kn / 0.4 : 0;\n  // The flame: a breathing flicker, now and then a gutter, a sway that moves the light.\n  const f = P.fl, rt = P.rt, ph = P.ph, amp = 0.035 + 0.2 * f;\n  const n = 0.5 * sin(7.3 * rt + ph[0]) + 0.3 * sin(12.9 * rt + ph[1]) + 0.2 * sin(23.1 * rt + ph[2]), gut = max(0, sin(1.7 * rt + ph[3]) + 0.6 * sin(3.1 * rt + ph[6])) ** 3 * 0.25 * f;\n  P.I = 1 - 0.12 * f + amp * n - 0.35 * gut + 0.2 * sh;\n  // A draught also bellies the cloth away from the puppets, so their shadows swell and soften.\n  P.bil = 0.07 * f * (0.6 + 0.4 * sin(0.9 * rt + ph[5]));\n  P.LX = 31.5 + (1 + 11 * f) * (0.65 * sin(2.1 * rt + ph[4]) + 0.35 * sin(0.83 * rt + ph[5])) + 2 * amp * sin(9.7 * rt + ph[6]);\n  P.LY = 46 - 3 * gut - 3 * f * sin(1.3 * rt + ph[2]);\n  P.flame = 7 * (1 + 1.5 * f) * (1 + 0.8 * amp * sin(11.3 * rt + ph[1]) + 0.6 * gut);\n  (P.shx = 1.3 * sh * sin(kn * 70)), (P.shy = 0.9 * sh * sin(kn * 53 + 1));\n  // The play.\n  const sc = floor(P.t / SCENE), t = P.t - sc * SCENE, dir = sc & 1 ? -P.dir : P.dir;\n  (P.K.face = dir), (P.O.face = -dir), (P.G.face = dir);\n  knight(t, P.K, rt, kb), ogre(t, P.O, rt, kr), gunungan(t, P.G, rt, sh);\n  (P.K.x += 7 * kb), (P.O.x += 6 * kr);\n  for (const Q of [P.K, P.O, P.G]) if (dir \u003c 0) Q.x = 63 - Q.x;\n}\n\n// The puppet being drawn: screen from puppet space and back, its magnification and blur.\nlet M, A, C, TX, TY, F11, F12, F21, F22, I11, I12, I21, I22, MAG, PEN, HV, LC;\nfunction place(P, Q, D) {\n  const f = cl((Q.z + P.bil) / D, 0, 0.62), m = 1 / (1 - f), c = cos(Q.rot), s = sin(Q.rot), fc = Q.face, k = m * Q.sz, hc = Q.hc * Q.sz;\n  (MAG = k), (PEN = 1 + (P.flame * f) / (1 - f)), (HV = cl(1.25 - 0.42 * PEN, 0, 0.85));\n  (F11 = k * fc * c), (F12 = -k * fc * s), (F21 = -k * s), (F22 = -k * c);\n  TX = P.LX * (1 - m) + m * (Q.x + fc * s * hc) + P.shx;\n  TY = P.LY * (1 - m) + m * (Q.y - hc + c * hc) + P.shy;\n  const det = F11 * F22 - F12 * F21;\n  (I11 = F22 / det), (I12 = -F12 / det), (I21 = -F21 / det), (I22 = F11 / det);\n}\n\nfunction holes(u, v, k) {\n  let a = u, b = v;\n  if (LD[k]) (a = (u + v) * 0.7071), (b = (v - u) * 0.7071);\n  if (k === 4) (a += 0.8 * sin(v * 0.6 + abs(u) * 0.35)), (b += 0.5 * sin(abs(u) * 0.7));\n  const pa = LA[k], pb = LB[k], j = round(b / pb), aa = a + (j & 1) * pa * 0.5, du = aa - round(aa / pa) * pa, dv = b - j * pb;\n  return cl((LR[k] - sqrt(du * du + dv * dv)) * 1.15 + 0.1, 0, 1);\n}\n\n// The gunungan's inside: rim, gate, tree, the two beasts, and lace everywhere else.\nlet LN, LW;\nfunction leaf(u, v, hw) {\n  const au = abs(u);\n  (LN = 0), (LC = GOLD);\n  if (hw - au \u003c 1.4 || v \u003c 1.3) return (LC = RED), 1;\n  if (v \u003c 15 && au \u003c 8) {\n    if (v \u003c 9) return (LC = RED), au > 1 && au \u003c 3.3 && v > 2.2 && v \u003c 7.6 ? 0.12 : 1;\n    return au \u003c 8 - (v - 9) * 1.15 ? 1 : ((LN = 4), (LC = TEAL), 1);\n  }\n  if (au \u003c 1.9 - v * 0.012 && v \u003c 70) return 1;\n  for (let b = 0; b \u003c 6; b++) {\n    const vb = 19 + 8 * b + 0.5 * au + 0.02 * au * au;\n    if (abs(v - vb) \u003c 1.05 && au \u003c min(hw - 2.4, 15 - b)) return 1;\n  }\n  const bx = (au - 6.5) / 3.4, by = (v - 17.5) / 1.9;\n  if (bx * bx + by * by \u003c 1) return (LC = HORN), 1;\n  return (LN = 4), (LC = TEAL), 1;\n}\n\n// One part: kind 0 a tapered rod (x0, y0, x1, y1, r0, r1), 1 an ellipse (cx, cy, rx, ry, turn), 2 a polygon, 3 the gunungan's leaf.\n// lace picks the holes; a part with no colour is a hole cut through what is already there (lace is then how deep).\nfunction part(k, a, b, c, d, e, f, lace, col) {\n  let u0, u1, v0, v1, rp = 99;\n  const ce = cos(e || 0), se = sin(e || 0);\n  if (k === 0) {\n    const r = max(e, f);\n    (u0 = min(a, c) - r), (u1 = max(a, c) + r), (v0 = min(b, d) - r), (v1 = max(b, d) + r), (rp = r * MAG);\n  } else if (k === 1) {\n    const r = max(c, d);\n    (u0 = a - r), (u1 = a + r), (v0 = b - r), (v1 = b + r), (rp = min(c, d) * MAG);\n  } else if (k === 2) {\n    (u0 = v0 = 1e9), (u1 = v1 = -1e9);\n    for (let i = 0; i \u003c a.length; i += 2) (u0 = min(u0, a[i])), (u1 = max(u1, a[i])), (v0 = min(v0, a[i + 1])), (v1 = max(v1, a[i + 1]));\n  } else (u0 = -19), (u1 = 19), (v0 = 0), (v1 = 79);\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\n  for (let q = 0; q \u003c 4; q++) {\n    const u = q & 1 ? u1 : u0, v = q & 2 ? v1 : v0, X = F11 * u + F12 * v + TX, Y = F21 * u + F22 * v + TY;\n    (x0 = min(x0, X)), (x1 = max(x1, X)), (y0 = min(y0, Y)), (y1 = max(y1, Y));\n  }\n  const pad = PEN * 0.5 + 0.5, thin = min(1, (2 * rp + 1) / PEN), abx = c - a, aby = d - b, ab2 = abx * abx + aby * aby || 1e-9;\n  const xa = max(0, floor(x0 - pad)), xb = min(W - 1, ceil(x1 + pad)), ya = max(0, floor(y0 - pad)), yb = min(H - 1, ceil(y1 + pad));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x - TX, dy = y - TY, u = I11 * dx + I12 * dy, v = I21 * dx + I22 * dy;\n      let dd, op = 1, ln = lace, cc = col;\n      if (k === 0) {\n        const t = cl(((u - a) * abx + (v - b) * aby) / ab2, 0, 1), qx = u - a - abx * t, qy = v - b - aby * t;\n        dd = sqrt(qx * qx + qy * qy) - mix(e, f, t);\n      } else if (k === 1) {\n        const pu = u - a, pv = v - b, lu = (pu * ce + pv * se) / c, lv = (pv * ce - pu * se) / d;\n        dd = (sqrt(lu * lu + lv * lv) - 1) * min(c, d);\n      } else if (k === 2) {\n        let md = 1e9, ins = false;\n        for (let i = 0, j = a.length - 2; i \u003c a.length; j = i, i += 2) {\n          const xi = a[i], yi = a[i + 1], ex = a[j] - xi, ey = a[j + 1] - yi;\n          if (yi > v !== a[j + 1] > v && u \u003c (ex * (v - yi)) / ey + xi) ins = !ins;\n          const s = cl(((u - xi) * ex + (v - yi) * ey) / (ex * ex + ey * ey), 0, 1), qx = u - xi - ex * s, qy = v - yi - ey * s;\n          md = min(md, qx * qx + qy * qy);\n        }\n        dd = ins ? -sqrt(md) : sqrt(md);\n      } else {\n        const vi = cl(v, 0, 79.9), v0i = floor(vi), hw = mix(LW[v0i], LW[v0i + 1], vi - v0i);\n        dd = max(abs(u) - hw, -v, v - 78);\n        if (dd \u003c 0.6) (op = leaf(u, v, hw)), (ln = LN), (cc = LC);\n      }\n      const dp = dd * MAG;\n      if (dp > pad) continue;\n      let cs = cl(0.5 - dp / PEN, 0, 1) * thin, cv = cl(0.5 - dp, 0, 1);\n      const i = y * W + x, o = i * 3;\n      if (!cc) {\n        const dep = lace \u003c 0 ? 0.9 * holes(u, v, -lace) : lace, s = 1 - cs * dep * min(1, HV * 1.3), sv = 1 - cv * dep;\n        (M[i] *= s), (A[i] *= sv), (C[o] *= sv), (C[o + 1] *= sv), (C[o + 2] *= sv);\n        continue;\n      }\n      if (ln) {\n        const h = holes(u, v, ln);\n        (cs *= 1 - h * HV), (cv *= 1 - h * 0.85);\n      }\n      cs *= op;\n      cv *= op;\n      if (cs > M[i]) M[i] = cs;\n      if (cv > 0) (C[o] += (cc[0] - C[o]) * cv), (C[o + 1] += (cc[1] - C[o + 1]) * cv), (C[o + 2] += (cc[2] - C[o + 2]) * cv), (A[i] += (1 - A[i]) * cv);\n    }\n}\nconst rod = (x0, y0, x1, y1, r0, r1, lace, col) => part(0, x0, y0, x1, y1, r0, r1, lace, col);\nconst ell = (cx, cy, rx, ry, turn, lace, col) => part(1, cx, cy, rx, ry, turn, 0, lace, col);\nconst poly = (pts, lace, col) => part(2, pts, 0, 0, 0, 0, 0, lace, col);\n\n// An arm on its two joints, the pointing hand, and the thin rod down to the dalang's fist.\nfunction arm(sx, sy, a1, a2, l1, l2, r1, r2, col) {\n  const ex = sx + l1 * sin(a1), ey = sy - l1 * cos(a1), hx = ex + l2 * sin(a1 + a2), hy = ey - l2 * cos(a1 + a2);\n  rod(sx, sy, ex, ey, r1, r1 * 0.85, 0, col), rod(ex, ey, hx, hy, r2 * 0.95, r2 * 0.75, 0, col);\n  rod(hx, hy, hx + 2.4 * sin(a1 + a2 + 0.25), hy - 2.4 * cos(a1 + a2 + 0.25), r2 * 0.75, 0.3, 0, col);\n  rod(ex - 0.2, ey, ex + 0.2, ey, r1 * 1.15, r1 * 1.15, 0, GOLD);\n  const gx = 2 - hx, gy = -14 - hy, l = sqrt(gx * gx + gy * gy) || 1, L = min(l, 30) / l;\n  rod(hx, hy, hx + gx * L, hy + gy * L, 0.42, 0.42, 0, BAMBOO);\n}\n\nfunction drawKnight(Q) {\n  rod(0.4, 34, 0.4, -16, 0.5, 0.45, 0, HORN);\n  arm(-4.6, 39.4, Q.b1, Q.b2, 12, 12.5, 1.0, 0.85, GOLD);\n  rod(-1, 17, -2.6, 1.5, 1.15, 0.95, 0, GOLD), rod(-2.6, 0.8, 1.2, 0.6, 0.8, 0.7, 0, GOLD);\n  rod(1.5, 17, 3.6, 1.5, 1.15, 0.95, 0, GOLD), rod(3.6, 0.8, 7.6, 0.6, 0.8, 0.7, 0, GOLD);\n  poly(K_KAIN, 2, INDIGO);\n  rod(3, 27, 5.4, 11, 0.8, 0.45, 0, RED);\n  poly(K_TORSO, 0, GOLD);\n  rod(-2.6, 29, 2.4, 29, 1.1, 1.1, 0, RED);\n  rod(-2.2, 33, 2, 33, 0.9, 0.9, -1, null);\n  rod(0.5, 40.5, 1.8, 44, 1.3, 1.1, 0, GOLD);\n  ell(-1.6, 46, 1.1, 2.6, -0.5, 1, GOLD);\n  ell(2.2, 47, 2.8, 3.6, 0.35, 0, GOLD);\n  poly(K_NOSE, 0, GOLD);\n  rod(1.5, 50.5, -2.5, 53.4, 1.6, 1.4, 3, HAIR), rod(-2.5, 53.4, -4.8, 50.2, 1.4, 0.6, 3, HAIR);\n  rod(-0.5, 50, 4.2, 50.6, 0.7, 0.6, 0, GOLD);\n  rod(3.6, 48, 5.1, 47.6, 0.38, 0.38, 0.9, null);\n  rod(-3.4, 38.6, 0.3, 36.6, 0.75, 0.75, -3, null), rod(0.3, 36.6, 3.4, 38.6, 0.75, 0.75, -3, null);\n  arm(3.6, 39.4, Q.a1, Q.a2, 12, 12.5, 1.0, 0.85, GOLD);\n}\n\nfunction drawOgre(Q) {\n  rod(0.4, 40, 0.4, -16, 0.55, 0.5, 0, HORN);\n  arm(-7.5, 46, Q.b1, Q.b2, 12.5, 13, 1.6, 1.3, RED);\n  rod(-3, 27, -7, 15, 2, 1.6, 0, RED), rod(-7, 15, -7.5, 2, 1.6, 1.3, 0, RED), rod(-8.1, 1, -3.6, 0.8, 1.1, 1, 0, RED);\n  rod(3, 27, 7, 15, 2, 1.6, 0, RED), rod(7, 15, 7.5, 2, 1.6, 1.3, 0, RED), rod(7.5, 1, 12, 0.8, 1.1, 1, 0, RED);\n  poly(O_KAIN, 2, TEAL);\n  rod(5, 29, 8, 10, 1, 0.6, 0, GOLD);\n  poly(O_TORSO, 0, RED), ell(3.6, 37, 4.8, 5.4, 0, 0, RED);\n  rod(-5.5, 45.6, 0.5, 42.5, 1, 1, -3, null), rod(0.5, 42.5, 6, 45.6, 1, 1, -3, null), ell(-1.5, 38, 3, 4, 0.2, -1, null);\n  rod(-6, 31.2, 6, 31.2, 1.2, 1.2, 0, GOLD);\n  ell(-3.5, 54, 5.5, 7.5, 0.35, 3, HAIR);\n  rod(-6, 59, -10.5, 63, 1.3, 0.3, 0, HAIR), rod(-8, 52, -13, 50, 1.3, 0.3, 0, HAIR), rod(-6.5, 47.5, -10.5, 43, 1.1, 0.3, 0, HAIR);\n  rod(0.5, 47, 2, 51, 2.5, 2.2, 0, RED);\n  ell(3.2, 55.3, 5, 4.4, 0, 0, RED), ell(9.3, 54.8, 2.4, 2.0, 0, 0, RED);\n  const j = Q.jaw, jx = 3.5 + 6.3 * cos(j), jy = 50.6 - 6.3 * sin(j);\n  rod(3.5, 50.6, jx, jy, 1.3, 1.0, 0, RED), rod(jx - 0.9, jy + 0.5, jx - 0.5, jy + 2.7, 0.55, 0.15, 0, IVORY);\n  rod(7.6, 51.3, 7.9, 49.3, 0.5, 0.15, 0, IVORY);\n  poly(O_CROWN, 1, GOLD);\n  ell(-0.5, 53, 1.5, 3, -0.4, 1, GOLD);\n  rod(6.3, 56.4, 6.3, 56.4, 1.5, 1.5, 0.9, null);\n  rod(6.6, 56.4, 6.6, 56.4, 0.6, 0.6, 0, HAIR);\n  arm(6, 46, Q.a1, Q.a2, 12.5, 13, 1.6, 1.3, RED);\n}\n\nfunction drawGunungan() {\n  rod(0, 6, 0, -12, 0.7, 0.6, 0, HORN);\n  part(3, 0, 0, 0, 0, 0, 0, 0, GOLD);\n}\n\n// A soft-edged ellipse painted over the frame, or added as glow.\nfunction blob(F, cx, cy, rx, ry, col, a, add) {\n  for (let y = max(0, floor(cy - ry - 1)); y \u003c= min(H - 1, ceil(cy + ry + 1)); y++)\n    for (let x = max(0, floor(cx - rx - 1)); x \u003c= min(W - 1, ceil(cx + rx + 1)); x++) {\n      const ex = (x - cx) / rx, ey = (y - cy) / ry, d = sqrt(ex * ex + ey * ey), o = (y * W + x) * 3;\n      const c = add ? max(0, 1 - d) ** 2 * a : cl((1 - d) * min(rx, ry) + 0.5, 0, 1) * a;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = add ? F[o + j] + col[j] * c : mix(F[o + j], col[j], c);\n    }\n}\n\n// The audience: heads and shoulders against the light, [x, top, rx, ry, kind]: bare, a peci cap, a headscarf.\nconst RIM = [1, 0.76, 0.48];\nconst HEADS = [[6, 98, 4.6, 5.6, 1], [19, 95, 5, 6, 0], [33, 99.5, 4.4, 5.4, 2], [46, 96, 5, 6.2, 1], [58.5, 98.5, 4.6, 5.6, 0]];\n// Their outline, as coverage in rows AUD and down: head, ears or scarf, neck, shoulders.\nfunction audience(HB, rt) {\n  HB.fill(0);\n  for (let j = 0; j \u003c 5; j++) {\n    const [hx, ht, rx, ry, kd] = HEADS[j], cx = hx + 0.6 * sin(rt * 0.45 + j * 1.7), top = ht + 0.4 * sin(rt * 0.7 + j * 2.3), cy = top + ry, sr = rx * 2.6;\n    for (let y = floor(top - 3); y \u003c H; y++)\n      for (let x = max(0, floor(cx - sr)); x \u003c= min(W - 1, ceil(cx + sr)); x++) {\n        const ax = abs(x - cx), ex = ax / (rx + (kd === 2 ? 0.8 : 0)), ey = (y - cy) / ry, sx = ax / sr, sy = (y - top - 2 * ry - 11) / 9;\n        let d = min((sqrt(ex * ex + ey * ey) - 1) * rx, (sqrt(sx * sx + sy * sy) - 1) * 9);\n        if (kd === 1) d = min(d, max(ax - rx * (0.86 + 0.04 * (y - top)), abs(y - top + 0.2) - 2.3));\n        if (kd === 2) d = min(d, max(ax - rx * (0.9 + (y - cy) * 0.09), cy - y));\n        else d = min(d, (sqrt((ax - rx) ** 2 + (y - cy - 0.6) ** 2) - 1.1) * 1.5, max(ax - rx * 0.62, cy - y));\n        const i = (y - AUD) * W + x;\n        HB[i] = max(HB[i], cl(0.5 - d, 0, 1));\n      }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  (M = P.M), (A = P.A), (C = P.C), (LW = P.LW);\n  M.fill(0), A.fill(0), C.fill(0);\n  const D = 1 - 0.55 * P.lamp;\n  for (const S of P.SIMP) place(P, S, D), S.k ? drawKnight(S) : drawOgre(S);\n  if (P.K.on) place(P, P.K, D), drawKnight(P.K);\n  if (P.O.on) place(P, P.O, D), drawOgre(P.O);\n  if (P.G.on) place(P, P.G, D), drawGunungan();\n  const F = P.F, B = P.BG, PT = P.PT, I = P.I, LX = P.LX, LY = P.LY, R2 = (46 * D) ** 2, vw = sm(0, 1, P.view), rd = 0.12 * (1 - P.I) * P.fl, top = I * 228 * (0.95 + 0.05 / D);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, dx = x - LX, dy = y - LY, fo = 1 / (1 + (dx * dx + dy * dy) / R2), pt = PT[i];\n      if (pt === 0) {\n        // The cloth: lamp light through cotton, the shadows on it; or from behind, the paint over the dim cloth.\n        const L = top * (0.2 + 0.8 * fo) * B[o], lr = L, lg = L * (0.7 + 0.18 * fo - rd), lb = L * (0.36 + 0.3 * fo - rd), s = 1 - 0.94 * M[i];\n        let r = lr * s, g = lg * s, b = lb * s;\n        if (vw > 0) {\n          const k = 0.3 * (1 - A[i]), lit = I * (0.45 + 0.5 * fo) * 250;\n          (r = mix(r, lr * k + C[o] * lit, vw)), (g = mix(g, lg * k + C[o + 1] * lit, vw)), (b = mix(b, lb * k + C[o + 2] * lit, vw));\n        }\n        (F[o] = r), (F[o + 1] = g), (F[o + 2] = b);\n      } else {\n        const s = I * (0.3 + 0.7 * fo) * 255 * (pt === 2 ? 1 - 0.85 * M[i] : 1);\n        (F[o] = B[o] * s), (F[o + 1] = B[o + 1] * s), (F[o + 2] = B[o + 2] * s);\n      }\n    }\n  // From the dalang's side the blencong hangs in view: a bronze garuda on a chain, the flame at its beak.\n  if (vw > 0.01) {\n    const bx = LX + 2, fl = P.flame / 7;\n    for (let y = 0; y \u003c 11; y++) blob(F, round(bx), y, 0.6, 0.6, y & 1 ? [90, 62, 30] : [150, 105, 50], vw);\n    blob(F, bx + 6, 10.5, 2.2, 3.2, [150, 96, 36], vw), blob(F, bx, 13, 5, 2.2, [170, 112, 42], vw), blob(F, bx - 4.2, 11, 1.4, 1.6, [200, 140, 60], vw);\n    blob(F, bx - 6.2, 12.8 - fl, 1.6 * fl, 6 * fl, [255, 140, 40], 0.5 * vw * I, 1), blob(F, bx - 6.2, 12.5 - fl * 0.6, 0.8, 1.9 * fl, [255, 240, 190], vw);\n  }\n  // The audience against the light, the rims of their heads lit by the screen.\n  const HB = P.HB;\n  audience(HB, P.rt);\n  for (let y = AUD + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const k = (y - AUD) * W + x, c = HB[k];\n      if (c \u003c= 0) continue;\n      const o = (y * W + x) * 3, q = (min(y, HEM - 1) * W + x) * 3, side = min(x > 0 ? HB[k - 1] : 1, x \u003c W - 1 ? HB[k + 1] : 1);\n      const rim = (1 - (HB[k - W] + HB[k - 2 * W]) / 2) * 0.6 + (1 - side) * 0.25;\n      for (let j = 0; j \u003c 3; j++) F[o + j] = F[o + j] * (1 - c) + c * (6 + rim * RIM[j] * max(70, F[q] * 0.9));\n    }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, max(0, F[o])) | 0, min(255, max(0, F[o + 1])) | 0, min(255, max(0, F[o + 2])) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs View=0..1, Speed=0.2..3, Lamp=0..1, Flicker=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"View","min":0,"max":1,"about":"At 0 you sit in front of the screen: black lace shadows on warm cloth. Turned up you go round to the dalang's side, where the same puppets show their gold, red and indigo paint under the hanging lamp."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of the play: at 2 a scene, from the gunungan leaving the middle to the gunungan planted there again, takes 14.4 s; at 0.2 ten times slower."},{"name":"Lamp","min":0,"max":1,"about":"How close the blencong hangs to the screen. At 0 it is far back and the shadows are sharp. Turned up, the hot spot tightens, the corners go dark, and every shadow grows and blurs."},{"name":"Flicker","min":0,"max":1,"about":"How much the oil flame gutters and sways. At 0.06 the light breathes; at 1 a draught makes it jump and swing, and the shadows soften."}],"start":[0,2,0,0.06],"measures":{"motion":1.0562,"detail":0.0589,"edges":0.3798,"complexity":1.779,"coverage":0.627,"colour":0.1416,"drift":0.2084},"knobResponse":[0.2162,0.1484,0.1028,0.0596]},{"slug":"sheet-mask","title":"Sheet Mask","family":"cosmetic","round":35,"note":"세럼에 젖은 시트 마스크가 위에서 내려와 진줏빛 살결에 닿는 대로 맑은 청록으로 비치고, 공기가 갇힌 자리는 흰 공기 방울 여섯 개로 볼록 솟아요. 보이지 않는 손바닥이 4.2초 동안 위에서 아래로 쓸며 방울을 양옆 끝으로 밀어내면, 매끈해진 시트 위로 떠도는 빛 한 점이 섬유 결에 부서져 반짝여요. K3 은 방울을 20개까지 늘리고 크게 부풀리며, K1 은 색상환을 다 돌고 누르면 손바닥이 0.8초 만에 한 번에 눌러 펴요.","idea":"A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.","buttons":"K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Sheet Mask\n// Family:  cosmetic\n// Idea:    A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cellulose sheet mask smoothed onto the face; the reverse of Peel-Off\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1\n//\n// Knob 1: Hue. The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive.\n// Knob 2: Speed. At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower.\n// Knob 3: Bubbles. How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear.\n// Knob 4: Weave. The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze.\n// Buttons: K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x2c1b3c6d, 0x297a2d39);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca6b);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n// A generator of its own for the fabric, so turning Weave changes only the\n// fabric and never where the next round's blisters land.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the skin's contour under the sheet and the mottle of the fabric.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 13 + o * 7919) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// The fabric, one value an LED round 0.5, wrapping both ways: a cloudy\n// mottle and short fibres laid in it. Weave makes the fibres longer and\n// thicker and turns them towards the two directions of a woven gauze.\nfunction weave(P, k) {\n  const F = P.F, R = rng(90731), s = 1 + 3 * k, align = sm((k - 0.15) / 0.75), wd = 0.6 + 0.35 * (s - 1);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[y * W + x] = 0.5 * tap((x * 2) / s + 11, (y * 2) / s + 5);\n  const splat = (fx, fy, a) => {\n    const ix = floor(fx), iy = floor(fy), tx = fx - ix, ty = fy - iy;\n    const x0 = ((ix % W) + W) % W, x1 = (x0 + 1) % W, y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    F[y0 * W + x0] += a * (1 - tx) * (1 - ty);\n    F[y0 * W + x1] += a * tx * (1 - ty);\n    F[y1 * W + x0] += a * (1 - tx) * ty;\n    F[y1 * W + x1] += a * tx * ty;\n  };\n  const n = floor(1500 / s);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = R() * W, y0 = R() * H, len = (2.8 + 2.4 * R()) * s;\n    let th = R() * PI;\n    if (R() \u003c align) th = (R() \u003c 0.5 ? 0 : PI / 2) + (R() - 0.5) * 0.22;\n    const a = 0.3 + 0.7 * R(), dx = cos(th), dy = sin(th);\n    for (let w = -wd / 2; w \u003c= wd / 2 + 1e-6; w += 0.7)\n      for (let t = -len / 2; t \u003c= len / 2; t += 0.5) splat(x0 + dx * t - dy * w, y0 + dy * t + dx * w, a * 0.5);\n  }\n  let m = 0, q = 0;\n  for (let p = 0; p \u003c N; p++) m += F[p];\n  m /= N;\n  for (let p = 0; p \u003c N; p++) q += (F[p] - m) ** 2;\n  const sd = sqrt(q / N) || 1;\n  for (let p = 0; p \u003c N; p++) F[p] = cl(0.5 + (0.22 * (F[p] - m)) / sd, 0, 1);\n  P.weaveK = k;\n}\n\n// The round: the sheet comes down, settles, the palm smooths it, it shines,\n// it lifts off, the skin shows bare. Durations in seconds at Speed 2.\nconst DESC = 0, HOLD = 1, SMOOTH = 2, GLOSS = 3, LIFT = 4, BARE = 5;\nconst DUR = [2.6, 1.0, 4.2, 3.0, 1.4, 0.7];\n// The palm's edge is a bow, its middle A rows ahead of its ends.\nconst A = 22, MAXB = 20;\n\n// Where each blister of round n would be trapped, its size and shape. All\n// twenty are placed every round, so Bubbles only says how many of them are\n// trapped and how big they swell, and the first six stay where they were.\nfunction trap(P) {\n  const n = P.round, b = P.bub;\n  for (let i = 0; i \u003c MAXB; i++) {\n    let x = 0, y = 0, r = 0;\n    for (let tr = 0; tr \u003c 10; tr++) {\n      const s = n * 7919 + i * 131 + tr * 17;\n      x = 7 + 50 * hash(s);\n      y = 10 + 108 * hash(s + 1);\n      r = 3.6 + 4.6 * hash(s + 2) ** 1.5;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) if ((b[j].x - x) ** 2 + ((b[j].y - y) / 1.1) ** 2 \u003c ((b[j].r + r) * 1.2 + 2) ** 2) ok = false;\n      if (ok) break;\n    }\n    const e = 0.8 + 0.45 * hash(n * 7919 + i * 131 + 999);\n    Object.assign(b[i], { x, y, r, rx: r * e, ry: r / e, h: 0.4 + 0.2 * r, age: -1, alive: true, side: hash(n * 31 + i) \u003c 0.5 ? -1 : 1 });\n  }\n  // Wrinkles the sheet lays down with: a few long shallow ridges of air.\n  P.wr = [];\n  for (let i = 0; i \u003c 2; i++) {\n    // Down the sheet, as it hung, one in each half.\n    const s = n * 4447 + i * 59, th = PI / 2 + (hash(s) - 0.5) * 0.9;\n    P.wr.push({ x: 8 + 20 * hash(s + 1) + 28 * i, y: 30 + 68 * hash(s + 2), tx: cos(th), ty: sin(th), len: 14 + 12 * hash(s + 3) });\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  const bub = [];\n  for (let i = 0; i \u003c MAXB; i++) bub.push({});\n  params.s = {\n    c: 0, hue: 0, speed: 2, nb: 6, grow: 0, gs: 1, k4: 0.06, weaveK: -1,\n    ph: DESC, pt: 0, round: 0, front: -40, fast: false,\n    bub, wr: [], F: new Float32Array(N), Z: new Float32Array(N), AIR: new Float32Array(N), RIM: new Float32Array(N), SHD: new Float32Array(N),\n    SQ: new Float32Array(N), SL: new Float32Array(N),\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n  // The skin's pearl, laid once: where its sheen sits on the colour wheel\n  // and how light it is.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      params.s.SQ[y * W + x] = 0.5 * tap(x * 0.4 + 7, y * 0.4) + (x * 0.6 + y) / 170;\n      params.s.SL[y * W + x] = 0.86 + 0.03 * tap(x * 1.3 + 50, y * 1.3);\n    }\n  trap(params.s);\n}\n\n// The sheet's hem and the line where it has wet through to the skin, as it\n// comes down: the hem falls fast and slows, the wet line follows.\nconst hemAt = (q) => -4 + 140 * (1 - (1 - min(1, q / 0.65)) ** 2);\nconst wetAt = (q) => -10 + 146 * sm(q);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nb = floor(cl(k[2], 6, 20) + 0.5);\n  P.grow = (P.nb - 6) / 14;\n  P.gs = 1 + 0.4 * P.grow;\n  P.k4 = cl(k[3], 0, 1);\n  if (abs(P.k4 - P.weaveK) > 0.004) weave(P, P.k4);\n  const d = (d0 * P.speed) / 2;\n  P.c += d;\n  P.pt += d;\n\n  const tap1 = input.btnPressed && input.btnPressed[0];\n  if (tap1) {\n    if (P.ph === DESC || P.ph === HOLD) {\n      // Blisters the wet line had not reached yet are never trapped.\n      for (const b of P.bub) if (b.age \u003c 0) b.alive = false;\n      (P.ph = SMOOTH), (P.pt = 0), (P.fast = true), (P.front = -A - 10);\n    } else if (P.ph === SMOOTH) P.fast = true;\n    else if (P.ph === GLOSS) (P.ph = LIFT), (P.pt = 0);\n  }\n  // Blisters beyond the count asked for are never trapped; once the palm is\n  // on the sheet the set is what it is.\n  if (P.ph === DESC || P.ph === HOLD) for (let i = 0; i \u003c MAXB; i++) P.bub[i].alive = i \u003c P.nb;\n  if (P.ph === SMOOTH) {\n    P.front = P.fast ? P.front + d * 220 : -A - 10 + (H + 2 * A + 30) * sm(P.pt / DUR[SMOOTH]) ** 0.9;\n    // The palm pushes each blister it reaches ahead of it and out towards\n    // the nearer side, faster the further out it already is; squeezed, the\n    // blister flattens along the palm's edge and loses a little air.\n    for (const b of P.bub) {\n      if (!b.alive) continue;\n      const u = (b.x - 31.5) / 32, yf = P.front - A * u * u, top = b.y - b.ry * P.gs * 0.55;\n      if (yf > top) {\n        const dy = yf - top;\n        const side = abs(u) \u003c 0.08 ? b.side : u \u003c 0 ? -1 : 1;\n        b.y += dy;\n        b.x += side * dy * (0.9 + 1.8 * abs(u));\n        b.ry = max(b.r * 0.55, b.ry * (1 - 0.012 * dy));\n        b.rx = min(b.r * 1.5, b.rx * (1 + 0.008 * dy));\n        b.h *= 1 - 0.006 * dy;\n      }\n      if (b.x - b.rx * P.gs * 0.3 > W || b.x + b.rx * P.gs * 0.3 \u003c 0 || b.y - b.ry * P.gs > H) b.alive = false;\n    }\n    if (P.front >= H + A + 19.9) (P.ph = GLOSS), (P.pt = 0), (P.fast = false);\n  }\n  if (P.ph !== SMOOTH && P.pt >= DUR[P.ph]) {\n    P.pt = 0;\n    if (P.ph === BARE) {\n      P.round++;\n      trap(P);\n      P.ph = DESC;\n    } else P.ph = P.ph === HOLD ? ((P.front = -A - 10), SMOOTH) : P.ph + 1;\n  }\n  // A blister fills as the wet line passes it, with a little overshoot.\n  if (P.ph === DESC || P.ph === HOLD) {\n    const wl = P.ph === DESC ? wetAt(P.pt / DUR[DESC]) : 999;\n    for (const b of P.bub) if (b.alive && b.age \u003c 0 && wl > b.y - b.ry * P.gs * 0.3) b.age = 0;\n  }\n  for (const b of P.bub) if (b.age >= 0) b.age += d;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { F, Z, AIR, RIM, SHD, SQ, SL, tint } = P, c = P.c, ph = P.ph, q = P.pt / DUR[ph];\n  if (P.lastHue !== P.hue) {\n    // From coral through peach and butter to lime the tint is paler and the\n    // wet sheet lighter: at the aqua's depth those hues read tan and olive.\n    let h = P.hue + 0.5;\n    h -= floor(h);\n    P.warm = sm((h + 0.02) / 0.07) * (1 - sm((h - 0.21) / 0.09));\n    hsv(h, 0.56 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm;\n\n  // Where the sheet is: below its hem there is only skin while it comes\n  // down, and behind the wet line it has soaked through.\n  const hem = ph === DESC ? hemAt(q) : ph === BARE ? -99 : 999;\n  const wl = ph === DESC ? wetAt(q) : ph >= BARE ? -99 : 999;\n  // Lifting: in the first third air runs in under the sheet from its edges\n  // and it goes white, then it rises off and fades.\n  const air = ph === LIFT ? sm(q / 0.32) : 0, fade = ph === LIFT ? sm((q - 0.3) / 0.7) : ph === BARE ? 1 : 0;\n  const rise = ph === LIFT ? 9 * sm((q - 0.25) / 0.75) : 0;\n  const pressedAll = ph === GLOSS || ph === LIFT;\n  // A small lamp drifts over the panel; the wet sheet mirrors it as a spot\n  // that the fibres break into glints and the blisters bend round.\n  const Lx = 32 + 40 * sin(0.37 * c + 0.5), Ly = 64 + 62 * sin(0.23 * c + 2), Lz = 45;\n  const Ex = 32, Ey = 70, Ez = 240;\n\n  // Heights: the skin's soft contour, the fibres standing a little, the\n  // wrinkles of a sheet not yet pressed, and the blisters.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, fy = (((y + floor(rise)) % H) + H) % H;\n      Z[p] = 1.1 * tap(x * 0.5, y * 0.5 + 40) + (0.22 + 0.3 * P.k4) * (F[fy * W + x] - 0.5);\n      AIR[p] = 0;\n      RIM[p] = 0;\n      SHD[p] = 0;\n    }\n  if (ph \u003c= SMOOTH) {\n    for (const w of P.wr) {\n      const ex = abs(w.tx) * w.len + 8, ey = abs(w.ty) * w.len + 8;\n      for (let y = max(0, floor(w.y - ey)); y \u003c min(H, w.y + ey); y++) {\n        for (let x = max(0, floor(w.x - ex)); x \u003c min(W, w.x + ex); x++) {\n          const dx = x - w.x, dy = y - w.y, a = dx * w.tx + dy * w.ty, n = -dx * w.ty + dy * w.tx;\n          if (abs(n) > 7 || abs(a) > w.len) continue;\n          // The palm presses a wrinkle flat as it passes.\n          const u = (x - 31.5) / 32, flat = ph === SMOOTH ? 1 - sm((P.front - A * u * u - y) / 2.5) : 1;\n          const v = exp(-((n / 3) ** 2)) * sm((w.len - abs(a)) / 9) * flat;\n          const p = y * W + x;\n          Z[p] += 0.45 * v;\n          AIR[p] = max(AIR[p], 0.25 * v);\n        }\n      }\n    }\n    for (const b of P.bub) {\n      if (!b.alive || b.age \u003c 0) continue;\n      // Filling: a springy swell to full size in about a third of a second.\n      const f = 1 - exp(-b.age / 0.09) * cos(b.age * 11), br = 1 + (ph === HOLD ? 0.03 * sin(c * 4 + b.r) : 0);\n      const rx = b.rx * P.gs * min(1.08, f) * br, ry = b.ry * P.gs * min(1.08, f) * br, hh = b.h * P.gs * f, rm = min(rx, ry);\n      let tlx = Lx - b.x, tly = Ly - b.y;\n      const tl = 1 / (sqrt(tlx * tlx + tly * tly) || 1);\n      (tlx *= tl), (tly *= tl);\n      const x0 = max(0, floor(b.x - rx - 4)), x1 = min(W - 1, floor(b.x + rx + 4));\n      const y0 = max(0, floor(b.y - ry - 4)), y1 = min(H - 1, floor(b.y + ry + 4));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let x = x0; x \u003c= x1; x++) {\n          const ex = (x - b.x) / rx, ey = (y - b.y) / ry, dd = ex * ex + ey * ey, p = y * W + x, dr = sqrt(dd);\n          const face = dr > 0 ? (ex * tlx + ey * tly) / dr : 0;\n          if (dd \u003c 1) {\n            // A pillow, rounder on top than a dome.\n            Z[p] += hh * sm((1 - dd) / 0.75);\n            AIR[p] = max(AIR[p], sm((1 - dr) / 0.3));\n          }\n          // A bright rim where the sheet lifts off the skin, brightest on\n          // the lamp's side, and a soft shadow on the skin past the far side.\n          RIM[p] = max(RIM[p], exp(-((((dr - 0.92) * rm) / 0.8) ** 2)) * (0.3 + 0.7 * max(0, face)));\n          if (dr > 0.9) SHD[p] = max(SHD[p], exp(-((((dr - 1) * rm) / 1.8) ** 2)) * max(0, -face));\n        }\n    }\n  }\n\n  const tr = tint[0], tg = tint[1], tb = tint[2];\n  const wetV = 0.88 + 0.09 * warm, mixT = 0.55 - 0.08 * warm;\n  const front = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const zx = (Z[y * W + min(W - 1, x + 1)] - Z[y * W + max(0, x - 1)]) / 2;\n      const zy = (Z[min(H - 1, y + 1) * W + x] - Z[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - Z[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      (vx *= vi), (vy *= vi), (vz *= vi);\n      let hx = lx + vx, hy = ly + vy, hz = lz + vz;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const nh = max(0, (nx * hx + ny * hy + nz * hz) * hi);\n      // Shading against what a level sheet would get, so only slopes show.\n      const shade = cl(1 + (nx * lx + ny * ly + nz * lz - lz), 0.55, 1.35);\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and\n      // mint across the panel.\n      const qq = SQ[p] + c * 0.03, Ls = SL[p];\n      let sr = (0.98 + 0.03 * cos(6.283 * qq)) * Ls, sg = (0.85 + 0.03 * cos(6.283 * (qq - 0.33))) * Ls, sb = (0.79 + 0.04 * cos(6.283 * (qq - 0.67))) * Ls;\n\n      // How far the sheet has soaked onto the skin here, 0 (air under it)\n      // to 1 (wet through), and how far the palm has pressed it.\n      const u = (x - 31.5) / 32, ai = AIR[p];\n      let contact = 1, pressed = pressedAll ? 1 : 0;\n      if (ph === DESC) contact = sm((wl + 3 * sin(0.21 * x + 3 * c) + 2 * tap(x * 1.7, 9) - y) / 5);\n      if (ph \u003c= SMOOTH) {\n        const yf = front - A * u * u;\n        pressed = ph === SMOOTH ? sm((yf - y) / 2.5) : 0;\n        // Not yet pressed, the sheet only half touches in places.\n        const part = 0.76 - 0.26 * P.grow + (0.24 + 0.26 * P.grow) * sm(0.5 + 1.6 * tap(x * 1.2 + 90, y * 1.2 + 30));\n        contact *= part + (1 - part) * pressed;\n        contact *= 1 - ai * (1 - pressed);\n      }\n      if (ph === LIFT) {\n        const ed = (0.6 * min(x + 0.5, W - 0.5 - x, (y + 0.5) / 2, (H - 0.5 - y) / 2)) / 32 + 0.4 * sm(0.5 + 1.4 * tap(x * 0.9 + 3, y * 0.9 + 70));\n        contact *= 1 - sm((air * 1.1 - ed) / 0.08);\n      }\n      const fib = F[((((y + floor(rise)) % H) + H) % H) * W + x] - 0.5;\n\n      // Wet through: the skin seen through the serum's tint, darker as\n      // anything wet is. Over air: a hanging sheet is near white with its\n      // fibres showing; a blister is the soaked sheet lit from inside, a\n      // pale clear tint.\n      const fk = 1 + 0.6 * P.k4, at = 0.08 + 0.42 * ai, af = (0.93 + 0.02 * ai) * (1 + 0.18 * fk * fib);\n      const ar = (1 - at + tr * at) * af, ag = (1 - at + tg * at) * af, ab = (1 - at + tb * at) * af;\n      const wk = wetV * (1 - 0.06 * pressed) * (1 + 0.1 * fk * fib);\n      const wr = (sr * (1 - mixT) + tr * mixT) * wk, wg = (sg * (1 - mixT) + tg * mixT) * wk, wb = (sb * (1 - mixT) + tb * mixT) * wk;\n      let r = ar + (wr - ar) * contact, g = ag + (wg - ag) * contact, b = ab + (wb - ab) * contact;\n      const sd = 1 - 0.2 * SHD[p] * (1 - pressed);\n      r *= shade * sd;\n      g *= shade * sd;\n      b *= shade * sd;\n      // The sheen: broad and soft on the half-dry sheet, tighter and much\n      // brighter where the palm has pressed the serum through.\n      const ks = 0.1 + 0.22 * contact + 0.22 * pressed, shin = 12 + 20 * contact + 110 * pressed;\n      // The blister's skin is wet serum too: a small sharp spot on each one.\n      let sp = ks * nh ** shin + 0.1 * pressed * nh ** 24 + 0.55 * ai * nh ** 70 + 0.3 * RIM[p] * (1 - pressed);\n      // The palm's edge pushes a bead of serum ahead of it: a bright line.\n      if (ph === SMOOTH) {\n        const e = y - (front - A * u * u);\n        sp += (0.18 + 0.1 * fib) * exp(-(((e - 1) / 1.1) ** 2)) + 0.08 * exp(-(((e - 3) / 1.8) ** 2));\n      }\n      r += sp * (0.92 + 0.08 * tr);\n      g += sp * (0.92 + 0.08 * tg);\n      b += sp * (0.92 + 0.08 * tb);\n\n      // Over the skin: the sheet is there above its hem and not yet lifted.\n      let have = 1 - fade;\n      if (ph === DESC) {\n        const hy = hem + 1.5 * sin(0.15 * x + 1.3 * c);\n        have = sm(hy - y + 0.5);\n        // The hanging sheet: drape folds running down from the wet line,\n        // and its shadow on the skin below the hem.\n        if (y > wl && y \u003c hy) {\n          const fold = 0.045 * sin(x * 0.42 + 2.2 * sin(y * 0.05 + c) + 1.5 * tap(x * 0.5, y * 0.2)) * sm((y - wl) / 12);\n          r *= 1 + fold;\n          g *= 1 + fold;\n          b *= 1 + fold;\n        }\n        const sh = 1 - 0.28 * exp(-max(0, y - hy) / 3.5) * sm(y - hy + 0.5);\n        (sr *= sh), (sg *= sh), (sb *= sh);\n        // The cut edge of the fabric catches the light.\n        const ed = 0.22 * exp(-(((y - hy + 0.8) / 0.7) ** 2));\n        (r += ed), (g += ed), (b += ed);\n      }\n      if (ph === LIFT) {\n        // The lifted sheet's shadow on the skin, softening as it rises.\n        const sh = 1 - 0.22 * (1 - fade) * air;\n        (sr *= sh), (sg *= sh), (sb *= sh);\n      }\n      // Bare skin keeps a film of serum that shines and slowly soaks in.\n      const dew = ph === LIFT ? sm((q - 0.2) / 0.5) : ph === BARE ? 1 - 0.6 * q : 0;\n      if (dew > 0) {\n        const ds = dew * 0.4 * nh ** 70;\n        (sr += ds), (sg += ds), (sb += ds * 0.96);\n      }\n      r = sr + (r - sr) * have;\n      g = sg + (g - sg) * have;\n      b = sb + (b - sb) * have;\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","layer":{"id":"layer-sheet-mask","type":"code","name":"sheet-mask","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sheet Mask\n// Family:  cosmetic\n// Idea:    A serum-soaked sheet mask with a fine fibre texture is laid over a pearly skin-toned ground from the top of the panel down, wetting through to a translucent tint as it touches and trapping air in pillowy white blisters with a bright rim, until an unseen palm sweeps down and squeezes every blister sideways out at the panel's edges, leaving the sheet flat and glossy with the serum's sheen sliding under a moving light, and then the sheet lifts away and a new one comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cellulose sheet mask smoothed onto the face; the reverse of Peel-Off\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1\n//\n// Knob 1: Hue. The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive.\n// Knob 2: Speed. At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower.\n// Knob 3: Bubbles. How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear.\n// Knob 4: Weave. The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze.\n// Buttons: K1 tap presses the whole sheet down at once: the palm runs down the panel in 0.8 seconds and squirts every blister out at the sides. On a sheet already flat it lifts it off and lays a new one.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x2c1b3c6d, 0x297a2d39);\n  h = Math.imul(h ^ (h >>> 15), 0x85ebca6b);\n  return ((h ^ (h >>> 13)) >>> 0) / 4294967296;\n};\n// A generator of its own for the fabric, so turning Weave changes only the\n// fabric and never where the next round's blisters land.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n// Smooth noise in a 128 x 128 tile that wraps, octaves of 8, 16 and 32\n// cells: the skin's contour under the sheet and the mottle of the fabric.\nconst T = 128, TM = T - 1, TEX = new Float32Array(T * T);\nfunction buildTex() {\n  let amp = 1, tot = 0;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 8 \u003c\u003c o, size = T / cells, g = new Float32Array(cells * cells);\n    for (let i = 0; i \u003c g.length; i++) g[i] = hash(i * 13 + o * 7919) * 2 - 1;\n    for (let y = 0; y \u003c T; y++) {\n      const gy = floor(y / size), fy = sm(y / size - gy), y1 = (gy + 1) % cells;\n      for (let x = 0; x \u003c T; x++) {\n        const gx = floor(x / size), fx = sm(x / size - gx), x1 = (gx + 1) % cells;\n        const a = g[gy * cells + gx], b = g[gy * cells + x1], c = g[y1 * cells + gx], d = g[y1 * cells + x1];\n        const top = a + (b - a) * fx;\n        TEX[y * T + x] += (top + (c + (d - c) * fx - top) * fy) * amp;\n      }\n    }\n    tot += amp;\n    amp *= 0.5;\n  }\n  for (let i = 0; i \u003c TEX.length; i++) TEX[i] /= tot;\n}\nfunction tap(u, v) {\n  const fu = floor(u), fv = floor(v), x0 = fu & TM, y0 = fv & TM, x1 = (x0 + 1) & TM, y1 = (y0 + 1) & TM;\n  const tx = u - fu, ty = v - fv;\n  const a = TEX[y0 * T + x0], b = TEX[y0 * T + x1], c = TEX[y1 * T + x0], d = TEX[y1 * T + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nfunction hsv(h, s, v, out) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[0] = f(5);\n  out[1] = f(3);\n  out[2] = f(1);\n}\n\n// The fabric, one value an LED round 0.5, wrapping both ways: a cloudy\n// mottle and short fibres laid in it. Weave makes the fibres longer and\n// thicker and turns them towards the two directions of a woven gauze.\nfunction weave(P, k) {\n  const F = P.F, R = rng(90731), s = 1 + 3 * k, align = sm((k - 0.15) / 0.75), wd = 0.6 + 0.35 * (s - 1);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) F[y * W + x] = 0.5 * tap((x * 2) / s + 11, (y * 2) / s + 5);\n  const splat = (fx, fy, a) => {\n    const ix = floor(fx), iy = floor(fy), tx = fx - ix, ty = fy - iy;\n    const x0 = ((ix % W) + W) % W, x1 = (x0 + 1) % W, y0 = ((iy % H) + H) % H, y1 = (y0 + 1) % H;\n    F[y0 * W + x0] += a * (1 - tx) * (1 - ty);\n    F[y0 * W + x1] += a * tx * (1 - ty);\n    F[y1 * W + x0] += a * (1 - tx) * ty;\n    F[y1 * W + x1] += a * tx * ty;\n  };\n  const n = floor(1500 / s);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = R() * W, y0 = R() * H, len = (2.8 + 2.4 * R()) * s;\n    let th = R() * PI;\n    if (R() \u003c align) th = (R() \u003c 0.5 ? 0 : PI / 2) + (R() - 0.5) * 0.22;\n    const a = 0.3 + 0.7 * R(), dx = cos(th), dy = sin(th);\n    for (let w = -wd / 2; w \u003c= wd / 2 + 1e-6; w += 0.7)\n      for (let t = -len / 2; t \u003c= len / 2; t += 0.5) splat(x0 + dx * t - dy * w, y0 + dy * t + dx * w, a * 0.5);\n  }\n  let m = 0, q = 0;\n  for (let p = 0; p \u003c N; p++) m += F[p];\n  m /= N;\n  for (let p = 0; p \u003c N; p++) q += (F[p] - m) ** 2;\n  const sd = sqrt(q / N) || 1;\n  for (let p = 0; p \u003c N; p++) F[p] = cl(0.5 + (0.22 * (F[p] - m)) / sd, 0, 1);\n  P.weaveK = k;\n}\n\n// The round: the sheet comes down, settles, the palm smooths it, it shines,\n// it lifts off, the skin shows bare. Durations in seconds at Speed 2.\nconst DESC = 0, HOLD = 1, SMOOTH = 2, GLOSS = 3, LIFT = 4, BARE = 5;\nconst DUR = [2.6, 1.0, 4.2, 3.0, 1.4, 0.7];\n// The palm's edge is a bow, its middle A rows ahead of its ends.\nconst A = 22, MAXB = 20;\n\n// Where each blister of round n would be trapped, its size and shape. All\n// twenty are placed every round, so Bubbles only says how many of them are\n// trapped and how big they swell, and the first six stay where they were.\nfunction trap(P) {\n  const n = P.round, b = P.bub;\n  for (let i = 0; i \u003c MAXB; i++) {\n    let x = 0, y = 0, r = 0;\n    for (let tr = 0; tr \u003c 10; tr++) {\n      const s = n * 7919 + i * 131 + tr * 17;\n      x = 7 + 50 * hash(s);\n      y = 10 + 108 * hash(s + 1);\n      r = 3.6 + 4.6 * hash(s + 2) ** 1.5;\n      let ok = true;\n      for (let j = 0; j \u003c i && ok; j++) if ((b[j].x - x) ** 2 + ((b[j].y - y) / 1.1) ** 2 \u003c ((b[j].r + r) * 1.2 + 2) ** 2) ok = false;\n      if (ok) break;\n    }\n    const e = 0.8 + 0.45 * hash(n * 7919 + i * 131 + 999);\n    Object.assign(b[i], { x, y, r, rx: r * e, ry: r / e, h: 0.4 + 0.2 * r, age: -1, alive: true, side: hash(n * 31 + i) \u003c 0.5 ? -1 : 1 });\n  }\n  // Wrinkles the sheet lays down with: a few long shallow ridges of air.\n  P.wr = [];\n  for (let i = 0; i \u003c 2; i++) {\n    // Down the sheet, as it hung, one in each half.\n    const s = n * 4447 + i * 59, th = PI / 2 + (hash(s) - 0.5) * 0.9;\n    P.wr.push({ x: 8 + 20 * hash(s + 1) + 28 * i, y: 30 + 68 * hash(s + 2), tx: cos(th), ty: sin(th), len: 14 + 12 * hash(s + 3) });\n  }\n}\n\nexport function setup(params) {\n  buildTex();\n  const bub = [];\n  for (let i = 0; i \u003c MAXB; i++) bub.push({});\n  params.s = {\n    c: 0, hue: 0, speed: 2, nb: 6, grow: 0, gs: 1, k4: 0.06, weaveK: -1,\n    ph: DESC, pt: 0, round: 0, front: -40, fast: false,\n    bub, wr: [], F: new Float32Array(N), Z: new Float32Array(N), AIR: new Float32Array(N), RIM: new Float32Array(N), SHD: new Float32Array(N),\n    SQ: new Float32Array(N), SL: new Float32Array(N),\n    tint: new Float32Array(3), warm: 0, lastHue: NaN,\n  };\n  // The skin's pearl, laid once: where its sheen sits on the colour wheel\n  // and how light it is.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      params.s.SQ[y * W + x] = 0.5 * tap(x * 0.4 + 7, y * 0.4) + (x * 0.6 + y) / 170;\n      params.s.SL[y * W + x] = 0.86 + 0.03 * tap(x * 1.3 + 50, y * 1.3);\n    }\n  trap(params.s);\n}\n\n// The sheet's hem and the line where it has wet through to the skin, as it\n// comes down: the hem falls fast and slows, the wet line follows.\nconst hemAt = (q) => -4 + 140 * (1 - (1 - min(1, q / 0.65)) ** 2);\nconst wetAt = (q) => -10 + 146 * sm(q);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nb = floor(cl(k[2], 6, 20) + 0.5);\n  P.grow = (P.nb - 6) / 14;\n  P.gs = 1 + 0.4 * P.grow;\n  P.k4 = cl(k[3], 0, 1);\n  if (abs(P.k4 - P.weaveK) > 0.004) weave(P, P.k4);\n  const d = (d0 * P.speed) / 2;\n  P.c += d;\n  P.pt += d;\n\n  const tap1 = input.btnPressed && input.btnPressed[0];\n  if (tap1) {\n    if (P.ph === DESC || P.ph === HOLD) {\n      // Blisters the wet line had not reached yet are never trapped.\n      for (const b of P.bub) if (b.age \u003c 0) b.alive = false;\n      (P.ph = SMOOTH), (P.pt = 0), (P.fast = true), (P.front = -A - 10);\n    } else if (P.ph === SMOOTH) P.fast = true;\n    else if (P.ph === GLOSS) (P.ph = LIFT), (P.pt = 0);\n  }\n  // Blisters beyond the count asked for are never trapped; once the palm is\n  // on the sheet the set is what it is.\n  if (P.ph === DESC || P.ph === HOLD) for (let i = 0; i \u003c MAXB; i++) P.bub[i].alive = i \u003c P.nb;\n  if (P.ph === SMOOTH) {\n    P.front = P.fast ? P.front + d * 220 : -A - 10 + (H + 2 * A + 30) * sm(P.pt / DUR[SMOOTH]) ** 0.9;\n    // The palm pushes each blister it reaches ahead of it and out towards\n    // the nearer side, faster the further out it already is; squeezed, the\n    // blister flattens along the palm's edge and loses a little air.\n    for (const b of P.bub) {\n      if (!b.alive) continue;\n      const u = (b.x - 31.5) / 32, yf = P.front - A * u * u, top = b.y - b.ry * P.gs * 0.55;\n      if (yf > top) {\n        const dy = yf - top;\n        const side = abs(u) \u003c 0.08 ? b.side : u \u003c 0 ? -1 : 1;\n        b.y += dy;\n        b.x += side * dy * (0.9 + 1.8 * abs(u));\n        b.ry = max(b.r * 0.55, b.ry * (1 - 0.012 * dy));\n        b.rx = min(b.r * 1.5, b.rx * (1 + 0.008 * dy));\n        b.h *= 1 - 0.006 * dy;\n      }\n      if (b.x - b.rx * P.gs * 0.3 > W || b.x + b.rx * P.gs * 0.3 \u003c 0 || b.y - b.ry * P.gs > H) b.alive = false;\n    }\n    if (P.front >= H + A + 19.9) (P.ph = GLOSS), (P.pt = 0), (P.fast = false);\n  }\n  if (P.ph !== SMOOTH && P.pt >= DUR[P.ph]) {\n    P.pt = 0;\n    if (P.ph === BARE) {\n      P.round++;\n      trap(P);\n      P.ph = DESC;\n    } else P.ph = P.ph === HOLD ? ((P.front = -A - 10), SMOOTH) : P.ph + 1;\n  }\n  // A blister fills as the wet line passes it, with a little overshoot.\n  if (P.ph === DESC || P.ph === HOLD) {\n    const wl = P.ph === DESC ? wetAt(P.pt / DUR[DESC]) : 999;\n    for (const b of P.bub) if (b.alive && b.age \u003c 0 && wl > b.y - b.ry * P.gs * 0.3) b.age = 0;\n  }\n  for (const b of P.bub) if (b.age >= 0) b.age += d;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { F, Z, AIR, RIM, SHD, SQ, SL, tint } = P, c = P.c, ph = P.ph, q = P.pt / DUR[ph];\n  if (P.lastHue !== P.hue) {\n    // From coral through peach and butter to lime the tint is paler and the\n    // wet sheet lighter: at the aqua's depth those hues read tan and olive.\n    let h = P.hue + 0.5;\n    h -= floor(h);\n    P.warm = sm((h + 0.02) / 0.07) * (1 - sm((h - 0.21) / 0.09));\n    hsv(h, 0.56 - 0.28 * P.warm, 1, tint);\n    P.lastHue = P.hue;\n  }\n  const warm = P.warm;\n\n  // Where the sheet is: below its hem there is only skin while it comes\n  // down, and behind the wet line it has soaked through.\n  const hem = ph === DESC ? hemAt(q) : ph === BARE ? -99 : 999;\n  const wl = ph === DESC ? wetAt(q) : ph >= BARE ? -99 : 999;\n  // Lifting: in the first third air runs in under the sheet from its edges\n  // and it goes white, then it rises off and fades.\n  const air = ph === LIFT ? sm(q / 0.32) : 0, fade = ph === LIFT ? sm((q - 0.3) / 0.7) : ph === BARE ? 1 : 0;\n  const rise = ph === LIFT ? 9 * sm((q - 0.25) / 0.75) : 0;\n  const pressedAll = ph === GLOSS || ph === LIFT;\n  // A small lamp drifts over the panel; the wet sheet mirrors it as a spot\n  // that the fibres break into glints and the blisters bend round.\n  const Lx = 32 + 40 * sin(0.37 * c + 0.5), Ly = 64 + 62 * sin(0.23 * c + 2), Lz = 45;\n  const Ex = 32, Ey = 70, Ez = 240;\n\n  // Heights: the skin's soft contour, the fibres standing a little, the\n  // wrinkles of a sheet not yet pressed, and the blisters.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, fy = (((y + floor(rise)) % H) + H) % H;\n      Z[p] = 1.1 * tap(x * 0.5, y * 0.5 + 40) + (0.22 + 0.3 * P.k4) * (F[fy * W + x] - 0.5);\n      AIR[p] = 0;\n      RIM[p] = 0;\n      SHD[p] = 0;\n    }\n  if (ph \u003c= SMOOTH) {\n    for (const w of P.wr) {\n      const ex = abs(w.tx) * w.len + 8, ey = abs(w.ty) * w.len + 8;\n      for (let y = max(0, floor(w.y - ey)); y \u003c min(H, w.y + ey); y++) {\n        for (let x = max(0, floor(w.x - ex)); x \u003c min(W, w.x + ex); x++) {\n          const dx = x - w.x, dy = y - w.y, a = dx * w.tx + dy * w.ty, n = -dx * w.ty + dy * w.tx;\n          if (abs(n) > 7 || abs(a) > w.len) continue;\n          // The palm presses a wrinkle flat as it passes.\n          const u = (x - 31.5) / 32, flat = ph === SMOOTH ? 1 - sm((P.front - A * u * u - y) / 2.5) : 1;\n          const v = exp(-((n / 3) ** 2)) * sm((w.len - abs(a)) / 9) * flat;\n          const p = y * W + x;\n          Z[p] += 0.45 * v;\n          AIR[p] = max(AIR[p], 0.25 * v);\n        }\n      }\n    }\n    for (const b of P.bub) {\n      if (!b.alive || b.age \u003c 0) continue;\n      // Filling: a springy swell to full size in about a third of a second.\n      const f = 1 - exp(-b.age / 0.09) * cos(b.age * 11), br = 1 + (ph === HOLD ? 0.03 * sin(c * 4 + b.r) : 0);\n      const rx = b.rx * P.gs * min(1.08, f) * br, ry = b.ry * P.gs * min(1.08, f) * br, hh = b.h * P.gs * f, rm = min(rx, ry);\n      let tlx = Lx - b.x, tly = Ly - b.y;\n      const tl = 1 / (sqrt(tlx * tlx + tly * tly) || 1);\n      (tlx *= tl), (tly *= tl);\n      const x0 = max(0, floor(b.x - rx - 4)), x1 = min(W - 1, floor(b.x + rx + 4));\n      const y0 = max(0, floor(b.y - ry - 4)), y1 = min(H - 1, floor(b.y + ry + 4));\n      for (let y = y0; y \u003c= y1; y++)\n        for (let x = x0; x \u003c= x1; x++) {\n          const ex = (x - b.x) / rx, ey = (y - b.y) / ry, dd = ex * ex + ey * ey, p = y * W + x, dr = sqrt(dd);\n          const face = dr > 0 ? (ex * tlx + ey * tly) / dr : 0;\n          if (dd \u003c 1) {\n            // A pillow, rounder on top than a dome.\n            Z[p] += hh * sm((1 - dd) / 0.75);\n            AIR[p] = max(AIR[p], sm((1 - dr) / 0.3));\n          }\n          // A bright rim where the sheet lifts off the skin, brightest on\n          // the lamp's side, and a soft shadow on the skin past the far side.\n          RIM[p] = max(RIM[p], exp(-((((dr - 0.92) * rm) / 0.8) ** 2)) * (0.3 + 0.7 * max(0, face)));\n          if (dr > 0.9) SHD[p] = max(SHD[p], exp(-((((dr - 1) * rm) / 1.8) ** 2)) * max(0, -face));\n        }\n    }\n  }\n\n  const tr = tint[0], tg = tint[1], tb = tint[2];\n  const wetV = 0.88 + 0.09 * warm, mixT = 0.55 - 0.08 * warm;\n  const front = P.front;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const zx = (Z[y * W + min(W - 1, x + 1)] - Z[y * W + max(0, x - 1)]) / 2;\n      const zy = (Z[min(H - 1, y + 1) * W + x] - Z[max(0, y - 1) * W + x]) / 2;\n      const nl = 1 / sqrt(zx * zx + zy * zy + 1), nx = -zx * nl, ny = -zy * nl, nz = nl;\n      let lx = Lx - x, ly = Ly - y, lz = Lz - Z[p];\n      const li = 1 / sqrt(lx * lx + ly * ly + lz * lz);\n      (lx *= li), (ly *= li), (lz *= li);\n      let vx = Ex - x, vy = Ey - y, vz = Ez;\n      const vi = 1 / sqrt(vx * vx + vy * vy + vz * vz);\n      (vx *= vi), (vy *= vi), (vz *= vi);\n      let hx = lx + vx, hy = ly + vy, hz = lz + vz;\n      const hi = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n      const nh = max(0, (nx * hx + ny * hy + nz * hz) * hi);\n      // Shading against what a level sheet would get, so only slopes show.\n      const shade = cl(1 + (nx * lx + ny * ly + nz * lz - lz), 0.55, 1.35);\n\n      // The skin: a warm pearl whose sheen turns faintly pink, lilac and\n      // mint across the panel.\n      const qq = SQ[p] + c * 0.03, Ls = SL[p];\n      let sr = (0.98 + 0.03 * cos(6.283 * qq)) * Ls, sg = (0.85 + 0.03 * cos(6.283 * (qq - 0.33))) * Ls, sb = (0.79 + 0.04 * cos(6.283 * (qq - 0.67))) * Ls;\n\n      // How far the sheet has soaked onto the skin here, 0 (air under it)\n      // to 1 (wet through), and how far the palm has pressed it.\n      const u = (x - 31.5) / 32, ai = AIR[p];\n      let contact = 1, pressed = pressedAll ? 1 : 0;\n      if (ph === DESC) contact = sm((wl + 3 * sin(0.21 * x + 3 * c) + 2 * tap(x * 1.7, 9) - y) / 5);\n      if (ph \u003c= SMOOTH) {\n        const yf = front - A * u * u;\n        pressed = ph === SMOOTH ? sm((yf - y) / 2.5) : 0;\n        // Not yet pressed, the sheet only half touches in places.\n        const part = 0.76 - 0.26 * P.grow + (0.24 + 0.26 * P.grow) * sm(0.5 + 1.6 * tap(x * 1.2 + 90, y * 1.2 + 30));\n        contact *= part + (1 - part) * pressed;\n        contact *= 1 - ai * (1 - pressed);\n      }\n      if (ph === LIFT) {\n        const ed = (0.6 * min(x + 0.5, W - 0.5 - x, (y + 0.5) / 2, (H - 0.5 - y) / 2)) / 32 + 0.4 * sm(0.5 + 1.4 * tap(x * 0.9 + 3, y * 0.9 + 70));\n        contact *= 1 - sm((air * 1.1 - ed) / 0.08);\n      }\n      const fib = F[((((y + floor(rise)) % H) + H) % H) * W + x] - 0.5;\n\n      // Wet through: the skin seen through the serum's tint, darker as\n      // anything wet is. Over air: a hanging sheet is near white with its\n      // fibres showing; a blister is the soaked sheet lit from inside, a\n      // pale clear tint.\n      const fk = 1 + 0.6 * P.k4, at = 0.08 + 0.42 * ai, af = (0.93 + 0.02 * ai) * (1 + 0.18 * fk * fib);\n      const ar = (1 - at + tr * at) * af, ag = (1 - at + tg * at) * af, ab = (1 - at + tb * at) * af;\n      const wk = wetV * (1 - 0.06 * pressed) * (1 + 0.1 * fk * fib);\n      const wr = (sr * (1 - mixT) + tr * mixT) * wk, wg = (sg * (1 - mixT) + tg * mixT) * wk, wb = (sb * (1 - mixT) + tb * mixT) * wk;\n      let r = ar + (wr - ar) * contact, g = ag + (wg - ag) * contact, b = ab + (wb - ab) * contact;\n      const sd = 1 - 0.2 * SHD[p] * (1 - pressed);\n      r *= shade * sd;\n      g *= shade * sd;\n      b *= shade * sd;\n      // The sheen: broad and soft on the half-dry sheet, tighter and much\n      // brighter where the palm has pressed the serum through.\n      const ks = 0.1 + 0.22 * contact + 0.22 * pressed, shin = 12 + 20 * contact + 110 * pressed;\n      // The blister's skin is wet serum too: a small sharp spot on each one.\n      let sp = ks * nh ** shin + 0.1 * pressed * nh ** 24 + 0.55 * ai * nh ** 70 + 0.3 * RIM[p] * (1 - pressed);\n      // The palm's edge pushes a bead of serum ahead of it: a bright line.\n      if (ph === SMOOTH) {\n        const e = y - (front - A * u * u);\n        sp += (0.18 + 0.1 * fib) * exp(-(((e - 1) / 1.1) ** 2)) + 0.08 * exp(-(((e - 3) / 1.8) ** 2));\n      }\n      r += sp * (0.92 + 0.08 * tr);\n      g += sp * (0.92 + 0.08 * tg);\n      b += sp * (0.92 + 0.08 * tb);\n\n      // Over the skin: the sheet is there above its hem and not yet lifted.\n      let have = 1 - fade;\n      if (ph === DESC) {\n        const hy = hem + 1.5 * sin(0.15 * x + 1.3 * c);\n        have = sm(hy - y + 0.5);\n        // The hanging sheet: drape folds running down from the wet line,\n        // and its shadow on the skin below the hem.\n        if (y > wl && y \u003c hy) {\n          const fold = 0.045 * sin(x * 0.42 + 2.2 * sin(y * 0.05 + c) + 1.5 * tap(x * 0.5, y * 0.2)) * sm((y - wl) / 12);\n          r *= 1 + fold;\n          g *= 1 + fold;\n          b *= 1 + fold;\n        }\n        const sh = 1 - 0.28 * exp(-max(0, y - hy) / 3.5) * sm(y - hy + 0.5);\n        (sr *= sh), (sg *= sh), (sb *= sh);\n        // The cut edge of the fabric catches the light.\n        const ed = 0.22 * exp(-(((y - hy + 0.8) / 0.7) ** 2));\n        (r += ed), (g += ed), (b += ed);\n      }\n      if (ph === LIFT) {\n        // The lifted sheet's shadow on the skin, softening as it rises.\n        const sh = 1 - 0.22 * (1 - fade) * air;\n        (sr *= sh), (sg *= sh), (sb *= sh);\n      }\n      // Bare skin keeps a film of serum that shines and slowly soaks in.\n      const dew = ph === LIFT ? sm((q - 0.2) / 0.5) : ph === BARE ? 1 - 0.6 * q : 0;\n      if (dew > 0) {\n        const ds = dew * 0.4 * nh ** 70;\n        (sr += ds), (sg += ds), (sb += ds * 0.96);\n      }\n      r = sr + (r - sr) * have;\n      g = sg + (g - sg) * have;\n      b = sb + (b - sb) * have;\n      display.setPixel(x, y, cl(r * 255, 0, 255), cl(g * 255, 0, 255), cl(b * 255, 0, 255));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Bubbles=6..20, Weave=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The serum's tint in the wet sheet, once round the wheel from aqua at 0: periwinkle at 0.1, orchid at 0.3, rose at 0.45, peach at 0.58, nude at 0.63, butter at 0.7, spring green at 0.78, mint at 0.9. From coral round to lime the tint is paler and the wet sheet lighter, because at the aqua's depth those hues read as tan and olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the sheet's hem reaches the bottom in 1.7 seconds and the sheet has soaked through by 2.6; the blisters sit for 1, the palm takes 4.2 to sweep down, the flat sheet shines for 3, lifts off in 1.4 and the skin shows bare for 0.7, 13 seconds a round. At 0.2 all of it runs ten times slower."},{"name":"Bubbles","min":6,"max":20,"about":"How much air the sheet traps as it settles: 6 blisters 7 to 16 LEDs across at the opening, up to 20 of them 10 to 23 across, and the more air, the more milky half-touching patches the sheet shows until the palm presses them clear."},{"name":"Weave","min":0,"max":1,"about":"The fabric. At 0 a fine nonwoven of cellulose fibres 3 to 5 LEDs long lying every which way; towards 1 the fibres grow to 11 to 21 LEDs, stand out more and line up across and along the panel into an open cotton gauze."}],"start":[0,2,6,0.06],"measures":{"motion":0.0942,"detail":0.0264,"edges":0.0175,"complexity":2.3054,"coverage":1,"colour":0.109,"drift":0.1087},"knobResponse":[0.2121,0.1814,0.0787,0.0461]},{"slug":"shimmer-oil","title":"Shimmer Oil","family":"cosmetic","round":36,"note":"보이지 않는 손끝이 마이카가 든 베리빛 바디 오일을 저으면, 납작한 조각들이 늘어난 자리에서는 일어서고 돌기만 하는 자리에서는 누운 채라 소용돌이 자체가 진주빛 실크 결로 보여요. K3 은 젓는 힘이라 1 에서는 소용돌이가 서로 말려 들며 결이 촘촘히 접혀요. K1 을 누르면 다른 손끝이 내려와 20 LED 쯤의 나선을 감아요.","idea":"An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.","buttons":"K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.","code":"// ===== Patternflow pattern =====\n// Title:   Shimmer Oil\n// Family:  cosmetic\n// Idea:    An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after shimmer body oils and Paul Matisse's Kalliroscope rheoscopic fluid (1960s), with the flakes turned by Jeffery's equation (G. B. Jeffery, 1922)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1\n//\n// Knob 1: Hue. Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Stir. How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls.\n// Knob 4: Mica. How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white.\n// Buttons: K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.\n\nconst W = 64, H = 128;\nconst { floor, min, sqrt, sin, cos, exp, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The flow lives on a grid of NX x NY cells, HS LEDs each, with free-slip\n// walls round the panel. It is solved as vorticity and stream function: the\n// stream function vanishes on the walls, so a sine series holds it exactly,\n// and the Poisson equation is a division in that series.\nconst NX = 24, NY = 48, HS = W / NX, MX = NX - 1, MY = NY - 1, GW = NX + 1, GN = GW * (NY + 1);\nconst SX = new Float32Array(MX * MX), SY = new Float32Array(MY * MY), LAM = new Float32Array(MX * MY);\nfor (let k = 1; k \u003c= MX; k++) for (let i = 1; i \u003c= MX; i++) SX[(k - 1) * MX + i - 1] = sin((PI * k * i) / NX);\nfor (let k = 1; k \u003c= MY; k++) for (let i = 1; i \u003c= MY; i++) SY[(k - 1) * MY + i - 1] = sin((PI * k * i) / NY);\n// Eigenvalues of the five-point Laplacian, so the stream function's\n// finite-difference Laplacian is exactly minus the vorticity.\nfor (let l = 1; l \u003c= MY; l++)\n  for (let k = 1; k \u003c= MX; k++)\n    LAM[(l - 1) * MX + k - 1] = (4 / (HS * HS)) * (sin((PI * k) / (2 * NX)) ** 2 + sin((PI * l) / (2 * NY)) ** 2);\n\n// Two-dimensional sine transform of the interior nodes (MY rows of MX).\nfunction dst2(src, dst, tmp) {\n  for (let j = 0; j \u003c MY; j++) {\n    const r = j * MX;\n    for (let k = 0; k \u003c MX; k++) {\n      const s = k * MX;\n      let a = 0;\n      for (let i = 0; i \u003c MX; i++) a += src[r + i] * SX[s + i];\n      tmp[r + k] = a;\n    }\n  }\n  for (let l = 0; l \u003c MY; l++) {\n    const s = l * MY, r = l * MX;\n    for (let k = 0; k \u003c MX; k++) dst[r + k] = 0;\n    for (let j = 0; j \u003c MY; j++) {\n      const c = SY[s + j], q = j * MX;\n      if (c === 0) continue;\n      for (let k = 0; k \u003c MX; k++) dst[r + k] += c * tmp[q + k];\n    }\n  }\n}\n\n// Flow constants at Speed 2: viscosity in LED^2 a second, skin friction a\n// second, and how fast the flakes settle back toward lying in the film, a\n// second.\nconst NU = 0.6, MU = 0.12, SETTLE = 0.24;\n// The largest traceless part of M: eigenvalues 36 and 1/36, a stretch of 6.\nconst DMAX = (36 - 1 / 36) / 2;\n// Flakes: a parcel of them to each LED, and one parcel in 25 also carries a\n// single large flake that glints. A flake's normal m turns with the flow as\n// A m, A = F^-T for the deformation F since the flakes lay down. The flakes\n// at rest lean E0 (about 14 degrees) every way, so a parcel's spread of\n// normals is set by M = A A^T alone (the turn left in A only spins an even\n// spread) and M is all a parcel carries. With M's eigenvalues s^2 and 1/s^2\n// and its axis e1 the flakes lie at E0 (s cos phi e1 + sin phi e2 / s), so\n// how they catch a light hangs on the stretch s and, for a light from one\n// side, on the angle between that side and e1.\nconst NP = W * H;\n// The tables hold the averages over phi, for s from 1 to 12 laid out on\n// 1 - 1/s.\nconst E0 = 0.25, NS = 96, NC = 33, SMAX = 12, EL = 0.95;\n// Soft front light, ring light, strip light by angle.\nconst RF = new Float32Array(NS), RR = new Float32Array(NS), RS = new Float32Array(NS * NC);\n{\n  const NPHI = 48, se = sin(EL), ce = cos(EL), cd = [], sd = [];\n  for (let j = 0; j \u003c NC; j++) {\n    const dl = 0.5 * Math.acos(-1 + (2 * j) / (NC - 1));\n    cd.push(se * cos(dl));\n    sd.push(se * sin(dl));\n  }\n  for (let i = 0; i \u003c NS; i++) {\n    const sg = 1 / (1 - (i / (NS - 1)) * (1 - 1 / SMAX));\n    let f = 0, r = 0;\n    for (let k = 0; k \u003c NPHI; k++) {\n      const ph = (PI * (k + 0.5)) / NPHI, m0 = E0 * sg * cos(ph), m1 = (E0 / sg) * sin(ph), inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const i2 = inv * inv, i4 = i2 * i2, i8 = i4 * i4;\n      f += i8 * i8 * i8;\n      // Flakes standing at about 45 degrees catch a low ring of light from\n      // every side; flat ones and edge-on ones miss most of it.\n      const rq = (inv - 0.707) * 3.5, rb = rq * rq \u003c 1 ? 1 - rq * rq : 0;\n      r += 0.05 + 0.95 * rb * rb;\n      for (let j = 0; j \u003c NC; j++) {\n        const d = (m0 * cd[j] + m1 * sd[j] + ce) * inv, d2 = d * d, d4 = d2 * d2;\n        RS[i * NC + j] += (d4 * d4) / NPHI;\n      }\n    }\n    RF[i] = f / NPHI;\n    RR[i] = r / NPHI;\n  }\n}\n\n// The fingertip's push, its radius in LEDs.\nconst SIG = 6.5;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, stir: 0, mica: 0.06, t: 0, fa: 0, par: 0, mdt: [0, 0], warm: false,\n    w: new Float32Array(GN), w2: new Float32Array(GN), psi: new Float32Array(GN),\n    u: new Float32Array(GN), v: new Float32Array(GN), ux: new Float32Array(GN), uy: new Float32Array(GN), vx: new Float32Array(GN),\n    a: new Float32Array(MX * MY), b: new Float32Array(MX * MY), c: new Float32Array(MX * MY), d: new Float32Array(MX * MY), q: new Float32Array((GW + 2) * (NY + 3)),\n    px: new Float32Array(NP), py: new Float32Array(NP),\n    M0: new Float32Array(NP), M1: new Float32Array(NP), M2: new Float32Array(NP),\n    gx: new Float32Array(NP), gy: new Float32Array(NP),\n    kp: new Float32Array(NP), cnt: new Int32Array(W * H), own: new Int32Array(W * H), gl: new Float32Array(W * H), lit: new Float32Array(W * H), wt: new Float32Array(W * H), tmp: new Float32Array(W * H),\n    swirl: null, c0: [0, 0, 0], c1: [0, 0, 0], c2: [0, 0, 0],\n  };\n  // Parcels start one to each LED, their flakes at rest.\n  for (let p = 0; p \u003c NP; p++) {\n    S.px[p] = (p % W) + random();\n    S.py[p] = floor(p / W) + random();\n    S.M0[p] = S.M2[p] = 1;\n    S.kp[p] = 0.8 + 0.4 * random();\n    if (random() \u003c 0.04) {\n      const a = random() * 2 * PI, r = E0 * (0.4 + 0.6 * random());\n      S.gx[p] = r * cos(a);\n      S.gy[p] = r * sin(a) + 1e-6;\n    }\n  }\n  // And the oil has been swirled before: a dozen soft eddies of either sign.\n  for (let n = 0; n \u003c 12; n++) {\n    const cx = 8 + random() * (W - 16), cy = 8 + random() * (H - 16), r = 6 + random() * 8, k = (random() \u003c 0.5 ? -1 : 1) * (2 + 3 * random());\n    for (let j = 1; j \u003c NY; j++)\n      for (let i = 1; i \u003c NX; i++) {\n        const dx = i * HS - cx, dy = j * HS - cy;\n        S.w[j * GW + i] += k * exp(-(dx * dx + dy * dy) / (r * r));\n      }\n  }\n  params.s = S;\n}\n\n// Where the fingertip is at time t: a slow loop that wanders over the panel.\nfunction finger(t) {\n  return [32 + 19 * sin(t * 0.7) + 4 * sin(t * 1.9), 64 + 44 * sin(t * 0.47 + 0.6) + 8 * cos(t * 1.3)];\n}\n\n// One step of the flow: carry the vorticity, push it with the fingertip,\n// let it decay, and solve for the stream function, velocity and its gradient.\nfunction flowStep(S, dt) {\n  const { w, w2, psi, u, v, ux, uy, vx, a, b, c } = S;\n  const force = 16 * (0.45 + 0.5 * S.stir + 1.3 * S.stir * S.stir);\n  const [fx, fy] = finger(S.t), [gx, gy] = finger(S.t + 0.02);\n  const vxs = (gx - fx) / 0.02, vys = (gy - fy) / 0.02;\n  const fr = exp(-MU * dt), sw = S.swirl;\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      // Back along the flow, in grid units.\n      let X = i - (u[g] * dt) / HS, Y = j - (v[g] * dt) / HS;\n      X = X \u003c 0 ? 0 : X > NX - 1e-4 ? NX - 1e-4 : X;\n      Y = Y \u003c 0 ? 0 : Y > NY - 1e-4 ? NY - 1e-4 : Y;\n      const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, q = j0 * GW + i0;\n      let val = (w[q] * (1 - tx) + w[q + 1] * tx) * (1 - ty) + (w[q + GW] * (1 - tx) + w[q + GW + 1] * tx) * ty;\n      // The fingertip drags the oil along with it: the curl of a force along\n      // its velocity, spread over a Gaussian of radius SIG.\n      const dx = i * HS - fx, dy = j * HS - fy, r2 = (dx * dx + dy * dy) / (SIG * SIG);\n      if (r2 \u003c 9) val += ((force * dt * -2) / (SIG * SIG)) * exp(-r2) * (vys * dx - vxs * dy);\n      if (sw) {\n        const ex = i * HS - sw.x, ey = j * HS - sw.y, e2 = (ex * ex + ey * ey) / (sw.r * sw.r);\n        if (e2 \u003c 9) val += sw.k * dt * exp(-e2) * (1 - 0.6 * e2);\n      }\n      w2[g] = val * fr;\n    }\n  if (sw && (sw.left -= dt) \u003c= 0) S.swirl = null;\n  // Viscosity, one explicit step of the five-point Laplacian (the vorticity\n  // is 0 on the walls).\n  const nu = (NU * dt) / (HS * HS);\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      w[g] = w2[g] + nu * (w2[g - 1] + w2[g + 1] + w2[g - GW] + w2[g + GW] - 4 * w2[g]);\n      a[(j - 1) * MX + i - 1] = w[g];\n    }\n  // The stream function: a division in the sine series.\n  dst2(a, b, c);\n  const norm = 4 / (NX * NY);\n  for (let n = 0; n \u003c MX * MY; n++) b[n] *= norm / LAM[n];\n  dst2(b, c, S.d);\n  for (let j = 1; j \u003c NY; j++) for (let i = 1; i \u003c NX; i++) psi[j * GW + i] = c[(j - 1) * MX + i - 1];\n  // Velocity u = dpsi/dy, v = -dpsi/dx and its gradient, by central\n  // differences; past a wall the stream function is mirrored with its sign\n  // turned over, as the sine series has it.\n  const Q = S.q, QW = GW + 2;\n  for (let j = 0; j \u003c= NY; j++) {\n    const r = (j + 1) * QW + 1;\n    for (let i = 0; i \u003c= NX; i++) Q[r + i] = psi[j * GW + i];\n    Q[r - 1] = -Q[r + 1];\n    Q[r + NX + 1] = -Q[r + NX - 1];\n  }\n  for (let i = 0; i \u003c QW; i++) {\n    Q[i] = -Q[2 * QW + i];\n    Q[(NY + 2) * QW + i] = -Q[NY * QW + i];\n  }\n  const h2 = 1 / (HS * HS), i2 = 1 / (2 * HS);\n  for (let j = 0; j \u003c= NY; j++)\n    for (let i = 0; i \u003c= NX; i++) {\n      const g = j * GW + i, q = (j + 1) * QW + i + 1, p0 = Q[q];\n      const pe = Q[q + 1], pw = Q[q - 1], pn = Q[q - QW], ps = Q[q + QW];\n      u[g] = (ps - pn) * i2;\n      v[g] = -(pe - pw) * i2;\n      uy[g] = (ps - 2 * p0 + pn) * h2;\n      vx[g] = -(pe - 2 * p0 + pw) * h2;\n      ux[g] = (Q[q + QW + 1] - Q[q - QW + 1] - Q[q + QW - 1] + Q[q - QW - 1]) * 0.25 * h2;\n    }\n}\n\n// The parcels ride the flow, and every flake in one turns as a flat disc of\n// no thickness does (Jeffery's equation): its normal m follows\n// dm/dt = K m with K = -(grad u)^T, so a flake turns its face across the\n// stretching and lies along the flow lines in shear. Then M follows\n// dM/dt = K M + M K^T, and the film draws M back toward the identity, the\n// flakes settling to rest.\nfunction flakeStep(S, dt) {\n  const { psi, ux, uy, vx, px, py, M0, M1, M2 } = S;\n  // Half the parcels turn their flakes each step, by the time since their\n  // last turn; all of them move.\n  const par = (S.par ^= 1), dm = S.mdt[par] + dt;\n  S.mdt[par] = 0;\n  S.mdt[par ^ 1] += dt;\n  const st = exp(-SETTLE * dm), ih = 1 / HS, XM = NX - 1e-4, YM = NY - 1e-4, hd = 0.5 * dt * ih;\n  for (let p = 0; p \u003c NP; p++) {\n    let x = px[p], y = py[p];\n    let X = x * ih, Y = y * ih;\n    X = X > XM ? XM : X;\n    Y = Y > YM ? YM : Y;\n    const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, g = j0 * GW + i0;\n    // Velocity from the bilinear stream function: divergence-free inside\n    // every cell.\n    const p00 = psi[g], p10 = psi[g + 1], p01 = psi[g + GW], p11 = psi[g + GW + 1];\n    const U = (1 - tx) * (p01 - p00) + tx * (p11 - p10), V = (1 - ty) * (p10 - p00) + ty * (p11 - p01);\n    if ((p & 1) === par) {\n      const w00 = (1 - tx) * (1 - ty), w10 = tx * (1 - ty), w01 = (1 - tx) * ty, w11 = tx * ty;\n      const a = ux[g] * w00 + ux[g + 1] * w10 + ux[g + GW] * w01 + ux[g + GW + 1] * w11;\n      const b = uy[g] * w00 + uy[g + 1] * w10 + uy[g + GW] * w01 + uy[g + GW + 1] * w11;\n      const c = vx[g] * w00 + vx[g + 1] * w10 + vx[g + GW] * w01 + vx[g + GW + 1] * w11;\n      // grad u = [[a, b], [c, -a]]. One step of m' = K m is the Cayley\n      // transform C = (I - K dt/2)^-1 (I + K dt/2); K has no trace, so\n      // C = ((1 - D) I + K dt) / (1 + D) with D = det(K dt) / 4, and det C = 1\n      // exactly, as the flow keeps area. M' = C M C^T.\n      const D = (dm * dm * (-a * a - b * c)) / 4, iD = 1 / (D > -0.8 ? 1 + D : 0.2), q = 1 - D;\n      const c00 = (q - dm * a) * iD, c01 = -dm * c * iD, c10 = -dm * b * iD, c11 = (q + dm * a) * iD;\n      const mp = M0[p], mq = M1[p], mr = M2[p];\n      const t00 = c00 * mp + c01 * mq, t01 = c00 * mq + c01 * mr, t10 = c10 * mp + c11 * mq, t11 = c10 * mq + c11 * mr;\n      // Settling: M's traceless part decays at the rate SETTLE, and past a\n      // stretch of 6 the film's drag holds it, so the flakes stop short of\n      // standing on edge. det M stays 1, as the flow keeps it: with the\n      // traceless part (d0, d1) the trace is 2 sqrt(1 + d0^2 + d1^2).\n      let d0 = 0.5 * (t00 * c00 + t01 * c01 - t10 * c10 - t11 * c11) * st, d1 = (t00 * c10 + t01 * c11) * st;\n      const dd = d0 * d0 + d1 * d1;\n      if (dd > DMAX * DMAX) {\n        const f = DMAX / sqrt(dd);\n        d0 *= f;\n        d1 *= f;\n      }\n      const h = sqrt(1 + d0 * d0 + d1 * d1);\n      M0[p] = h + d0;\n      M1[p] = d1;\n      M2[p] = h - d0;\n    }\n    // The parcel moves by the midpoint rule.\n    let Xm = X + hd * U, Ym = Y - hd * V;\n    Xm = Xm \u003c 0 ? 0 : Xm > XM ? XM : Xm;\n    Ym = Ym \u003c 0 ? 0 : Ym > YM ? YM : Ym;\n    const im = Xm | 0, jm = Ym | 0, sx = Xm - im, sy = Ym - jm, gm = jm * GW + im;\n    const q00 = psi[gm], q10 = psi[gm + 1], q01 = psi[gm + GW], q11 = psi[gm + GW + 1];\n    x += ((1 - sx) * (q01 - q00) + sx * (q11 - q10)) * ih * dt;\n    y -= ((1 - sy) * (q10 - q00) + sy * (q11 - q01)) * ih * dt;\n    px[p] = x \u003c 0.01 ? 0.01 : x > W - 0.01 ? W - 0.01 : x;\n    py[p] = y \u003c 0.01 ? 0.01 : y > H - 0.01 ? H - 0.01 : y;\n  }\n}\n\n// The flow keeps the oil's density even, and so would the parcels if they\n// moved exactly. Where they have drifted out of a LED that its neighbours\n// still reach, a parcel from a crowded LED is moved in, taking on the flakes\n// of a neighbour; up to 400 a frame.\nfunction even(S) {\n  const { px, py, M0, M1, M2, cnt, own } = S;\n  cnt.fill(0);\n  for (let p = 0; p \u003c NP; p++) {\n    const o = (py[p] | 0) * W + (px[p] | 0);\n    cnt[o]++;\n    own[o] = p;\n  }\n  let d = 0, moved = 0;\n  const start = (random() * W * H) | 0;\n  for (let n = 0; n \u003c W * H && moved \u003c 400; n++) {\n    const e = (start + n) % (W * H);\n    if (cnt[e] !== 0) continue;\n    const x = e % W, y = (e / W) | 0;\n    const nb = x > 0 && cnt[e - 1] ? e - 1 : x \u003c W - 1 && cnt[e + 1] ? e + 1 : y > 0 && cnt[e - W] ? e - W : y \u003c H - 1 && cnt[e + W] ? e + W : -1;\n    if (nb \u003c 0) continue;\n    while (d \u003c W * H && cnt[d] \u003c 3) d++;\n    if (d >= W * H) break;\n    const p = own[d], q = own[nb];\n    cnt[d]--;\n    cnt[e] = 1;\n    px[p] = x + 0.1 + 0.8 * random();\n    py[p] = y + 0.1 + 0.8 * random();\n    M0[p] = M0[q];\n    M1[p] = M1[q];\n    M2[p] = M2[q];\n    moved++;\n  }\n}\n\n// The flow is solved every 1/15 s of oil time, the flakes moved every step.\nfunction step(S, dt) {\n  S.fa += dt;\n  if (S.fa > 1 / 15 - 1e-6) {\n    flowStep(S, S.fa);\n    S.fa = 0;\n  }\n  flakeStep(S, dt);\n  S.t += dt;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.stir = cl(k[2], 0, 1);\n  S.mica = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on oil that has been stirred for 5.4 seconds, the flakes laid\n    // down for the last 4.2 of them.\n    for (let i = 0; i \u003c 4; i++) (S.t += 0.3), flowStep(S, 0.3);\n    for (let i = 0; i \u003c 6; i++) step(S, 0.4);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fingertip lands well away from the stirring one and turns a spiral.\n    const [fx, fy] = finger(S.t);\n    let x = 0, y = 0;\n    for (let n = 0; n \u003c 8; n++) {\n      x = 16 + random() * (W - 32);\n      y = 20 + random() * (H - 40);\n      if ((x - fx) ** 2 + (y - fy) ** 2 > 40 * 40) break;\n    }\n    S.swirl = { x, y, r: 10, k: random() \u003c 0.5 ? 22 : -22, left: 0.7 };\n  }\n  // Oil time runs at Speed / 2, in steps no longer than 1/15 s.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 1 / 15);\n    step(S, h);\n    left -= h;\n  }\n  even(S);\n}\n\nfunction blur(F, T) {\n  for (let y = 0; y \u003c H; y++) {\n    const r = y * W;\n    T[r] = 0.75 * F[r] + 0.25 * F[r + 1];\n    for (let x = 1; x \u003c W - 1; x++) T[r + x] = 0.5 * F[r + x] + 0.25 * (F[r + x - 1] + F[r + x + 1]);\n    T[r + W - 1] = 0.75 * F[r + W - 1] + 0.25 * F[r + W - 2];\n  }\n  for (let x = 0; x \u003c W; x++) {\n    F[x] = 0.75 * T[x] + 0.25 * T[x + W];\n    F[(H - 1) * W + x] = 0.75 * T[(H - 1) * W + x] + 0.25 * T[(H - 2) * W + x];\n  }\n  for (let o = W; o \u003c (H - 1) * W; o++) F[o] = 0.5 * T[o] + 0.25 * (T[o - W] + T[o + W]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { px, py, M0, M1, M2, gx, gy, kp, lit, wt, gl } = S;\n  const mica = S.mica, t = S.t;\n  // Three lights: a soft one over the viewer's shoulder for the flakes that\n  // lie flat, a low ring for the ones the flow has half stood up, and a strip\n  // low at one side, slowly circling, for those leaning toward it.\n  const az = 0.6 + 0.35 * t, c2a = cos(2 * az), s2a = sin(2 * az);\n  const h2x = sin(EL) * cos(az), h2y = sin(EL) * sin(az), h2z = cos(EL);\n  const wf = 0.15, wr = 0.85 + 0.3 * mica, ws = 1 + 0.6 * mica, wg = 0.5 + 1.5 * mica, gs = 0.6 * mica;\n  lit.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  // Large flakes glint once Mica brings them in, the flattest first.\n  const gcut = E0 * (1.05 - mica), sc = (NS - 1) / (1 - 1 / SMAX);\n  for (let p = 0; p \u003c NP; p++) {\n    const mp = M0[p], mq = M1[p], mr = M2[p], fro = mp + mr;\n    // The stretch s, the root of M's larger eigenvalue, and e1's angle to\n    // the strip.\n    const dd = mp - mr, an = sqrt(dd * dd + 4 * mq * mq), s1 = sqrt(0.5 * (fro + an));\n    const c2 = an > 1e-6 ? (dd * c2a + 2 * mq * s2a) / an : 0;\n    const ii = ((s1 > 1 ? 1 - 1 / s1 : 0) * sc + 0.5) | 0, i = ii \u003c NS ? ii : NS - 1, j = ((c2 + 1) * 0.5 * (NC - 1) + 0.5) | 0;\n    let val = wf * RF[i] + wr * RR[i] + ws * RS[i * NC + j];\n    val *= 1 - gs + gs * kp[p];\n    // Into the LED the parcel is over; the blur below spreads it. A large\n    // flake's glint stays in its own LED.\n    const o = (py[p] | 0) * W + (px[p] | 0), ex = gx[p], ey = gy[p];\n    if (ey !== 0 && ex * ex + ey * ey > gcut * gcut) {\n      // Its normal is sqrt(M) times its resting tilt; det M = 1, so\n      // sqrt(M) = (M + I) / sqrt(trace + 2).\n      const is = 1 / sqrt(fro + 2);\n      const m0 = ((mp + 1) * ex + mq * ey) * is, m1 = (mq * ex + (mr + 1) * ey) * is, inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const d = abs(h2x * m0 + h2y * m1 + h2z) * inv, d2 = d * d, d4 = d2 * d2, d8 = d4 * d4;\n      gl[o] += wg * d8 * d8 * d8;\n    }\n    lit[o] += val;\n    wt[o] += 1;\n  }\n  // A LED sees a little past its own square: a 1-2-1 blur each way.\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  // Colours: the oil's body and its sheen, whose brightest light leans a\n  // little round the wheel as pearl pigment does.\n  const h = S.hue + 0.88, hh = h - floor(h);\n  // Deep orange reads brown on the panel and deep yellow olive, so from\n  // orange to lime the oil glows instead: 0.82 of full, not 0.34.\n  const warm = sm(0.015, 0.05, hh) * (1 - sm(0.3, 0.38, hh));\n  const { c0, c1, c2 } = S;\n  hsv(h, 0.9 - 0.1 * warm, 0.34 + 0.48 * warm, c0);\n  hsv(h - 0.02, 0.42 - 0.12 * warm, 1, c1);\n  hsv(h - 0.12, 0.38 - 0.1 * warm, 1, c2);\n  const rest = RF[0] * wf + RR[0] * wr + RS[(NC - 1) >> 1] * ws;\n  for (let o = 0; o \u003c W * H; o++) {\n    // An LED no parcel reached shows flakes at rest.\n    const val = (lit[o] + 0.05 * rest) / (wt[o] + 0.05) + gl[o] * 0.5;\n    const s = val > 1.4 ? 1.4 : val, fl = val \u003c 0.4 ? 0 : val > 1 ? 1 : (val - 0.4) / 0.6, f = fl * fl * (3 - 2 * fl);\n    const sr = c1[0] + (c2[0] - c1[0]) * f, sg = c1[1] + (c2[1] - c1[1]) * f, sb = c1[2] + (c2[2] - c1[2]) * f;\n    const body = 1 - 0.55 * (s > 1 ? 1 : s);\n    // The brightest sheen runs on toward white.\n    const wl = val \u003c 0.75 ? 0 : val > 1.3 ? 1 : (val - 0.75) / 0.55, wh = wl * wl * (1.5 - wl), k = s * 0.85 * (1 - wh);\n    const r = 255 * (c0[0] * body + sr * k + wh), g = 255 * (c0[1] * body + sg * k + wh), b = 255 * (c0[2] * body + sb * k + wh);\n    display.setPixel(o % W, (o / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-shimmer-oil","type":"code","name":"shimmer-oil","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shimmer Oil\n// Family:  cosmetic\n// Idea:    An unseen fingertip stirs a tinted body oil full of mica, and the countless flat flakes turn with the flow the way they do in rheoscopic fluid, standing up where the oil is stretched and lying flat where it only turns, so the swirl itself shows as pearly silk along the shear layers, rolling eddies and filaments that stretch and fold, with the sheen sliding over them as they move.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after shimmer body oils and Paul Matisse's Kalliroscope rheoscopic fluid (1960s), with the flakes turned by Jeffery's equation (G. B. Jeffery, 1922)\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1\n//\n// Knob 1: Hue. Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive.\n// Knob 2: Speed. The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Stir. How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls.\n// Knob 4: Mica. How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white.\n// Buttons: K1 tap drops a second fingertip somewhere away from the first: it turns a spiral about 20 LEDs across for 0.7 seconds and the silk winds round it.\n\nconst W = 64, H = 128;\nconst { floor, min, sqrt, sin, cos, exp, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The flow lives on a grid of NX x NY cells, HS LEDs each, with free-slip\n// walls round the panel. It is solved as vorticity and stream function: the\n// stream function vanishes on the walls, so a sine series holds it exactly,\n// and the Poisson equation is a division in that series.\nconst NX = 24, NY = 48, HS = W / NX, MX = NX - 1, MY = NY - 1, GW = NX + 1, GN = GW * (NY + 1);\nconst SX = new Float32Array(MX * MX), SY = new Float32Array(MY * MY), LAM = new Float32Array(MX * MY);\nfor (let k = 1; k \u003c= MX; k++) for (let i = 1; i \u003c= MX; i++) SX[(k - 1) * MX + i - 1] = sin((PI * k * i) / NX);\nfor (let k = 1; k \u003c= MY; k++) for (let i = 1; i \u003c= MY; i++) SY[(k - 1) * MY + i - 1] = sin((PI * k * i) / NY);\n// Eigenvalues of the five-point Laplacian, so the stream function's\n// finite-difference Laplacian is exactly minus the vorticity.\nfor (let l = 1; l \u003c= MY; l++)\n  for (let k = 1; k \u003c= MX; k++)\n    LAM[(l - 1) * MX + k - 1] = (4 / (HS * HS)) * (sin((PI * k) / (2 * NX)) ** 2 + sin((PI * l) / (2 * NY)) ** 2);\n\n// Two-dimensional sine transform of the interior nodes (MY rows of MX).\nfunction dst2(src, dst, tmp) {\n  for (let j = 0; j \u003c MY; j++) {\n    const r = j * MX;\n    for (let k = 0; k \u003c MX; k++) {\n      const s = k * MX;\n      let a = 0;\n      for (let i = 0; i \u003c MX; i++) a += src[r + i] * SX[s + i];\n      tmp[r + k] = a;\n    }\n  }\n  for (let l = 0; l \u003c MY; l++) {\n    const s = l * MY, r = l * MX;\n    for (let k = 0; k \u003c MX; k++) dst[r + k] = 0;\n    for (let j = 0; j \u003c MY; j++) {\n      const c = SY[s + j], q = j * MX;\n      if (c === 0) continue;\n      for (let k = 0; k \u003c MX; k++) dst[r + k] += c * tmp[q + k];\n    }\n  }\n}\n\n// Flow constants at Speed 2: viscosity in LED^2 a second, skin friction a\n// second, and how fast the flakes settle back toward lying in the film, a\n// second.\nconst NU = 0.6, MU = 0.12, SETTLE = 0.24;\n// The largest traceless part of M: eigenvalues 36 and 1/36, a stretch of 6.\nconst DMAX = (36 - 1 / 36) / 2;\n// Flakes: a parcel of them to each LED, and one parcel in 25 also carries a\n// single large flake that glints. A flake's normal m turns with the flow as\n// A m, A = F^-T for the deformation F since the flakes lay down. The flakes\n// at rest lean E0 (about 14 degrees) every way, so a parcel's spread of\n// normals is set by M = A A^T alone (the turn left in A only spins an even\n// spread) and M is all a parcel carries. With M's eigenvalues s^2 and 1/s^2\n// and its axis e1 the flakes lie at E0 (s cos phi e1 + sin phi e2 / s), so\n// how they catch a light hangs on the stretch s and, for a light from one\n// side, on the angle between that side and e1.\nconst NP = W * H;\n// The tables hold the averages over phi, for s from 1 to 12 laid out on\n// 1 - 1/s.\nconst E0 = 0.25, NS = 96, NC = 33, SMAX = 12, EL = 0.95;\n// Soft front light, ring light, strip light by angle.\nconst RF = new Float32Array(NS), RR = new Float32Array(NS), RS = new Float32Array(NS * NC);\n{\n  const NPHI = 48, se = sin(EL), ce = cos(EL), cd = [], sd = [];\n  for (let j = 0; j \u003c NC; j++) {\n    const dl = 0.5 * Math.acos(-1 + (2 * j) / (NC - 1));\n    cd.push(se * cos(dl));\n    sd.push(se * sin(dl));\n  }\n  for (let i = 0; i \u003c NS; i++) {\n    const sg = 1 / (1 - (i / (NS - 1)) * (1 - 1 / SMAX));\n    let f = 0, r = 0;\n    for (let k = 0; k \u003c NPHI; k++) {\n      const ph = (PI * (k + 0.5)) / NPHI, m0 = E0 * sg * cos(ph), m1 = (E0 / sg) * sin(ph), inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const i2 = inv * inv, i4 = i2 * i2, i8 = i4 * i4;\n      f += i8 * i8 * i8;\n      // Flakes standing at about 45 degrees catch a low ring of light from\n      // every side; flat ones and edge-on ones miss most of it.\n      const rq = (inv - 0.707) * 3.5, rb = rq * rq \u003c 1 ? 1 - rq * rq : 0;\n      r += 0.05 + 0.95 * rb * rb;\n      for (let j = 0; j \u003c NC; j++) {\n        const d = (m0 * cd[j] + m1 * sd[j] + ce) * inv, d2 = d * d, d4 = d2 * d2;\n        RS[i * NC + j] += (d4 * d4) / NPHI;\n      }\n    }\n    RF[i] = f / NPHI;\n    RR[i] = r / NPHI;\n  }\n}\n\n// The fingertip's push, its radius in LEDs.\nconst SIG = 6.5;\n\nexport function setup(params) {\n  const S = {\n    hue: 0, speed: 2, stir: 0, mica: 0.06, t: 0, fa: 0, par: 0, mdt: [0, 0], warm: false,\n    w: new Float32Array(GN), w2: new Float32Array(GN), psi: new Float32Array(GN),\n    u: new Float32Array(GN), v: new Float32Array(GN), ux: new Float32Array(GN), uy: new Float32Array(GN), vx: new Float32Array(GN),\n    a: new Float32Array(MX * MY), b: new Float32Array(MX * MY), c: new Float32Array(MX * MY), d: new Float32Array(MX * MY), q: new Float32Array((GW + 2) * (NY + 3)),\n    px: new Float32Array(NP), py: new Float32Array(NP),\n    M0: new Float32Array(NP), M1: new Float32Array(NP), M2: new Float32Array(NP),\n    gx: new Float32Array(NP), gy: new Float32Array(NP),\n    kp: new Float32Array(NP), cnt: new Int32Array(W * H), own: new Int32Array(W * H), gl: new Float32Array(W * H), lit: new Float32Array(W * H), wt: new Float32Array(W * H), tmp: new Float32Array(W * H),\n    swirl: null, c0: [0, 0, 0], c1: [0, 0, 0], c2: [0, 0, 0],\n  };\n  // Parcels start one to each LED, their flakes at rest.\n  for (let p = 0; p \u003c NP; p++) {\n    S.px[p] = (p % W) + random();\n    S.py[p] = floor(p / W) + random();\n    S.M0[p] = S.M2[p] = 1;\n    S.kp[p] = 0.8 + 0.4 * random();\n    if (random() \u003c 0.04) {\n      const a = random() * 2 * PI, r = E0 * (0.4 + 0.6 * random());\n      S.gx[p] = r * cos(a);\n      S.gy[p] = r * sin(a) + 1e-6;\n    }\n  }\n  // And the oil has been swirled before: a dozen soft eddies of either sign.\n  for (let n = 0; n \u003c 12; n++) {\n    const cx = 8 + random() * (W - 16), cy = 8 + random() * (H - 16), r = 6 + random() * 8, k = (random() \u003c 0.5 ? -1 : 1) * (2 + 3 * random());\n    for (let j = 1; j \u003c NY; j++)\n      for (let i = 1; i \u003c NX; i++) {\n        const dx = i * HS - cx, dy = j * HS - cy;\n        S.w[j * GW + i] += k * exp(-(dx * dx + dy * dy) / (r * r));\n      }\n  }\n  params.s = S;\n}\n\n// Where the fingertip is at time t: a slow loop that wanders over the panel.\nfunction finger(t) {\n  return [32 + 19 * sin(t * 0.7) + 4 * sin(t * 1.9), 64 + 44 * sin(t * 0.47 + 0.6) + 8 * cos(t * 1.3)];\n}\n\n// One step of the flow: carry the vorticity, push it with the fingertip,\n// let it decay, and solve for the stream function, velocity and its gradient.\nfunction flowStep(S, dt) {\n  const { w, w2, psi, u, v, ux, uy, vx, a, b, c } = S;\n  const force = 16 * (0.45 + 0.5 * S.stir + 1.3 * S.stir * S.stir);\n  const [fx, fy] = finger(S.t), [gx, gy] = finger(S.t + 0.02);\n  const vxs = (gx - fx) / 0.02, vys = (gy - fy) / 0.02;\n  const fr = exp(-MU * dt), sw = S.swirl;\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      // Back along the flow, in grid units.\n      let X = i - (u[g] * dt) / HS, Y = j - (v[g] * dt) / HS;\n      X = X \u003c 0 ? 0 : X > NX - 1e-4 ? NX - 1e-4 : X;\n      Y = Y \u003c 0 ? 0 : Y > NY - 1e-4 ? NY - 1e-4 : Y;\n      const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, q = j0 * GW + i0;\n      let val = (w[q] * (1 - tx) + w[q + 1] * tx) * (1 - ty) + (w[q + GW] * (1 - tx) + w[q + GW + 1] * tx) * ty;\n      // The fingertip drags the oil along with it: the curl of a force along\n      // its velocity, spread over a Gaussian of radius SIG.\n      const dx = i * HS - fx, dy = j * HS - fy, r2 = (dx * dx + dy * dy) / (SIG * SIG);\n      if (r2 \u003c 9) val += ((force * dt * -2) / (SIG * SIG)) * exp(-r2) * (vys * dx - vxs * dy);\n      if (sw) {\n        const ex = i * HS - sw.x, ey = j * HS - sw.y, e2 = (ex * ex + ey * ey) / (sw.r * sw.r);\n        if (e2 \u003c 9) val += sw.k * dt * exp(-e2) * (1 - 0.6 * e2);\n      }\n      w2[g] = val * fr;\n    }\n  if (sw && (sw.left -= dt) \u003c= 0) S.swirl = null;\n  // Viscosity, one explicit step of the five-point Laplacian (the vorticity\n  // is 0 on the walls).\n  const nu = (NU * dt) / (HS * HS);\n  for (let j = 1; j \u003c NY; j++)\n    for (let i = 1; i \u003c NX; i++) {\n      const g = j * GW + i;\n      w[g] = w2[g] + nu * (w2[g - 1] + w2[g + 1] + w2[g - GW] + w2[g + GW] - 4 * w2[g]);\n      a[(j - 1) * MX + i - 1] = w[g];\n    }\n  // The stream function: a division in the sine series.\n  dst2(a, b, c);\n  const norm = 4 / (NX * NY);\n  for (let n = 0; n \u003c MX * MY; n++) b[n] *= norm / LAM[n];\n  dst2(b, c, S.d);\n  for (let j = 1; j \u003c NY; j++) for (let i = 1; i \u003c NX; i++) psi[j * GW + i] = c[(j - 1) * MX + i - 1];\n  // Velocity u = dpsi/dy, v = -dpsi/dx and its gradient, by central\n  // differences; past a wall the stream function is mirrored with its sign\n  // turned over, as the sine series has it.\n  const Q = S.q, QW = GW + 2;\n  for (let j = 0; j \u003c= NY; j++) {\n    const r = (j + 1) * QW + 1;\n    for (let i = 0; i \u003c= NX; i++) Q[r + i] = psi[j * GW + i];\n    Q[r - 1] = -Q[r + 1];\n    Q[r + NX + 1] = -Q[r + NX - 1];\n  }\n  for (let i = 0; i \u003c QW; i++) {\n    Q[i] = -Q[2 * QW + i];\n    Q[(NY + 2) * QW + i] = -Q[NY * QW + i];\n  }\n  const h2 = 1 / (HS * HS), i2 = 1 / (2 * HS);\n  for (let j = 0; j \u003c= NY; j++)\n    for (let i = 0; i \u003c= NX; i++) {\n      const g = j * GW + i, q = (j + 1) * QW + i + 1, p0 = Q[q];\n      const pe = Q[q + 1], pw = Q[q - 1], pn = Q[q - QW], ps = Q[q + QW];\n      u[g] = (ps - pn) * i2;\n      v[g] = -(pe - pw) * i2;\n      uy[g] = (ps - 2 * p0 + pn) * h2;\n      vx[g] = -(pe - 2 * p0 + pw) * h2;\n      ux[g] = (Q[q + QW + 1] - Q[q - QW + 1] - Q[q + QW - 1] + Q[q - QW - 1]) * 0.25 * h2;\n    }\n}\n\n// The parcels ride the flow, and every flake in one turns as a flat disc of\n// no thickness does (Jeffery's equation): its normal m follows\n// dm/dt = K m with K = -(grad u)^T, so a flake turns its face across the\n// stretching and lies along the flow lines in shear. Then M follows\n// dM/dt = K M + M K^T, and the film draws M back toward the identity, the\n// flakes settling to rest.\nfunction flakeStep(S, dt) {\n  const { psi, ux, uy, vx, px, py, M0, M1, M2 } = S;\n  // Half the parcels turn their flakes each step, by the time since their\n  // last turn; all of them move.\n  const par = (S.par ^= 1), dm = S.mdt[par] + dt;\n  S.mdt[par] = 0;\n  S.mdt[par ^ 1] += dt;\n  const st = exp(-SETTLE * dm), ih = 1 / HS, XM = NX - 1e-4, YM = NY - 1e-4, hd = 0.5 * dt * ih;\n  for (let p = 0; p \u003c NP; p++) {\n    let x = px[p], y = py[p];\n    let X = x * ih, Y = y * ih;\n    X = X > XM ? XM : X;\n    Y = Y > YM ? YM : Y;\n    const i0 = X | 0, j0 = Y | 0, tx = X - i0, ty = Y - j0, g = j0 * GW + i0;\n    // Velocity from the bilinear stream function: divergence-free inside\n    // every cell.\n    const p00 = psi[g], p10 = psi[g + 1], p01 = psi[g + GW], p11 = psi[g + GW + 1];\n    const U = (1 - tx) * (p01 - p00) + tx * (p11 - p10), V = (1 - ty) * (p10 - p00) + ty * (p11 - p01);\n    if ((p & 1) === par) {\n      const w00 = (1 - tx) * (1 - ty), w10 = tx * (1 - ty), w01 = (1 - tx) * ty, w11 = tx * ty;\n      const a = ux[g] * w00 + ux[g + 1] * w10 + ux[g + GW] * w01 + ux[g + GW + 1] * w11;\n      const b = uy[g] * w00 + uy[g + 1] * w10 + uy[g + GW] * w01 + uy[g + GW + 1] * w11;\n      const c = vx[g] * w00 + vx[g + 1] * w10 + vx[g + GW] * w01 + vx[g + GW + 1] * w11;\n      // grad u = [[a, b], [c, -a]]. One step of m' = K m is the Cayley\n      // transform C = (I - K dt/2)^-1 (I + K dt/2); K has no trace, so\n      // C = ((1 - D) I + K dt) / (1 + D) with D = det(K dt) / 4, and det C = 1\n      // exactly, as the flow keeps area. M' = C M C^T.\n      const D = (dm * dm * (-a * a - b * c)) / 4, iD = 1 / (D > -0.8 ? 1 + D : 0.2), q = 1 - D;\n      const c00 = (q - dm * a) * iD, c01 = -dm * c * iD, c10 = -dm * b * iD, c11 = (q + dm * a) * iD;\n      const mp = M0[p], mq = M1[p], mr = M2[p];\n      const t00 = c00 * mp + c01 * mq, t01 = c00 * mq + c01 * mr, t10 = c10 * mp + c11 * mq, t11 = c10 * mq + c11 * mr;\n      // Settling: M's traceless part decays at the rate SETTLE, and past a\n      // stretch of 6 the film's drag holds it, so the flakes stop short of\n      // standing on edge. det M stays 1, as the flow keeps it: with the\n      // traceless part (d0, d1) the trace is 2 sqrt(1 + d0^2 + d1^2).\n      let d0 = 0.5 * (t00 * c00 + t01 * c01 - t10 * c10 - t11 * c11) * st, d1 = (t00 * c10 + t01 * c11) * st;\n      const dd = d0 * d0 + d1 * d1;\n      if (dd > DMAX * DMAX) {\n        const f = DMAX / sqrt(dd);\n        d0 *= f;\n        d1 *= f;\n      }\n      const h = sqrt(1 + d0 * d0 + d1 * d1);\n      M0[p] = h + d0;\n      M1[p] = d1;\n      M2[p] = h - d0;\n    }\n    // The parcel moves by the midpoint rule.\n    let Xm = X + hd * U, Ym = Y - hd * V;\n    Xm = Xm \u003c 0 ? 0 : Xm > XM ? XM : Xm;\n    Ym = Ym \u003c 0 ? 0 : Ym > YM ? YM : Ym;\n    const im = Xm | 0, jm = Ym | 0, sx = Xm - im, sy = Ym - jm, gm = jm * GW + im;\n    const q00 = psi[gm], q10 = psi[gm + 1], q01 = psi[gm + GW], q11 = psi[gm + GW + 1];\n    x += ((1 - sx) * (q01 - q00) + sx * (q11 - q10)) * ih * dt;\n    y -= ((1 - sy) * (q10 - q00) + sy * (q11 - q01)) * ih * dt;\n    px[p] = x \u003c 0.01 ? 0.01 : x > W - 0.01 ? W - 0.01 : x;\n    py[p] = y \u003c 0.01 ? 0.01 : y > H - 0.01 ? H - 0.01 : y;\n  }\n}\n\n// The flow keeps the oil's density even, and so would the parcels if they\n// moved exactly. Where they have drifted out of a LED that its neighbours\n// still reach, a parcel from a crowded LED is moved in, taking on the flakes\n// of a neighbour; up to 400 a frame.\nfunction even(S) {\n  const { px, py, M0, M1, M2, cnt, own } = S;\n  cnt.fill(0);\n  for (let p = 0; p \u003c NP; p++) {\n    const o = (py[p] | 0) * W + (px[p] | 0);\n    cnt[o]++;\n    own[o] = p;\n  }\n  let d = 0, moved = 0;\n  const start = (random() * W * H) | 0;\n  for (let n = 0; n \u003c W * H && moved \u003c 400; n++) {\n    const e = (start + n) % (W * H);\n    if (cnt[e] !== 0) continue;\n    const x = e % W, y = (e / W) | 0;\n    const nb = x > 0 && cnt[e - 1] ? e - 1 : x \u003c W - 1 && cnt[e + 1] ? e + 1 : y > 0 && cnt[e - W] ? e - W : y \u003c H - 1 && cnt[e + W] ? e + W : -1;\n    if (nb \u003c 0) continue;\n    while (d \u003c W * H && cnt[d] \u003c 3) d++;\n    if (d >= W * H) break;\n    const p = own[d], q = own[nb];\n    cnt[d]--;\n    cnt[e] = 1;\n    px[p] = x + 0.1 + 0.8 * random();\n    py[p] = y + 0.1 + 0.8 * random();\n    M0[p] = M0[q];\n    M1[p] = M1[q];\n    M2[p] = M2[q];\n    moved++;\n  }\n}\n\n// The flow is solved every 1/15 s of oil time, the flakes moved every step.\nfunction step(S, dt) {\n  S.fa += dt;\n  if (S.fa > 1 / 15 - 1e-6) {\n    flowStep(S, S.fa);\n    S.fa = 0;\n  }\n  flakeStep(S, dt);\n  S.t += dt;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.stir = cl(k[2], 0, 1);\n  S.mica = cl(k[3], 0, 1);\n  if (!S.warm) {\n    // Open on oil that has been stirred for 5.4 seconds, the flakes laid\n    // down for the last 4.2 of them.\n    for (let i = 0; i \u003c 4; i++) (S.t += 0.3), flowStep(S, 0.3);\n    for (let i = 0; i \u003c 6; i++) step(S, 0.4);\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    // A fingertip lands well away from the stirring one and turns a spiral.\n    const [fx, fy] = finger(S.t);\n    let x = 0, y = 0;\n    for (let n = 0; n \u003c 8; n++) {\n      x = 16 + random() * (W - 32);\n      y = 20 + random() * (H - 40);\n      if ((x - fx) ** 2 + (y - fy) ** 2 > 40 * 40) break;\n    }\n    S.swirl = { x, y, r: 10, k: random() \u003c 0.5 ? 22 : -22, left: 0.7 };\n  }\n  // Oil time runs at Speed / 2, in steps no longer than 1/15 s.\n  let left = (d * S.speed) / 2;\n  while (left > 1e-6) {\n    const h = min(left, 1 / 15);\n    step(S, h);\n    left -= h;\n  }\n  even(S);\n}\n\nfunction blur(F, T) {\n  for (let y = 0; y \u003c H; y++) {\n    const r = y * W;\n    T[r] = 0.75 * F[r] + 0.25 * F[r + 1];\n    for (let x = 1; x \u003c W - 1; x++) T[r + x] = 0.5 * F[r + x] + 0.25 * (F[r + x - 1] + F[r + x + 1]);\n    T[r + W - 1] = 0.75 * F[r + W - 1] + 0.25 * F[r + W - 2];\n  }\n  for (let x = 0; x \u003c W; x++) {\n    F[x] = 0.75 * T[x] + 0.25 * T[x + W];\n    F[(H - 1) * W + x] = 0.75 * T[(H - 1) * W + x] + 0.25 * T[(H - 2) * W + x];\n  }\n  for (let o = W; o \u003c (H - 1) * W; o++) F[o] = 0.5 * T[o] + 0.25 * (T[o - W] + T[o + W]);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { px, py, M0, M1, M2, gx, gy, kp, lit, wt, gl } = S;\n  const mica = S.mica, t = S.t;\n  // Three lights: a soft one over the viewer's shoulder for the flakes that\n  // lie flat, a low ring for the ones the flow has half stood up, and a strip\n  // low at one side, slowly circling, for those leaning toward it.\n  const az = 0.6 + 0.35 * t, c2a = cos(2 * az), s2a = sin(2 * az);\n  const h2x = sin(EL) * cos(az), h2y = sin(EL) * sin(az), h2z = cos(EL);\n  const wf = 0.15, wr = 0.85 + 0.3 * mica, ws = 1 + 0.6 * mica, wg = 0.5 + 1.5 * mica, gs = 0.6 * mica;\n  lit.fill(0);\n  wt.fill(0);\n  gl.fill(0);\n  // Large flakes glint once Mica brings them in, the flattest first.\n  const gcut = E0 * (1.05 - mica), sc = (NS - 1) / (1 - 1 / SMAX);\n  for (let p = 0; p \u003c NP; p++) {\n    const mp = M0[p], mq = M1[p], mr = M2[p], fro = mp + mr;\n    // The stretch s, the root of M's larger eigenvalue, and e1's angle to\n    // the strip.\n    const dd = mp - mr, an = sqrt(dd * dd + 4 * mq * mq), s1 = sqrt(0.5 * (fro + an));\n    const c2 = an > 1e-6 ? (dd * c2a + 2 * mq * s2a) / an : 0;\n    const ii = ((s1 > 1 ? 1 - 1 / s1 : 0) * sc + 0.5) | 0, i = ii \u003c NS ? ii : NS - 1, j = ((c2 + 1) * 0.5 * (NC - 1) + 0.5) | 0;\n    let val = wf * RF[i] + wr * RR[i] + ws * RS[i * NC + j];\n    val *= 1 - gs + gs * kp[p];\n    // Into the LED the parcel is over; the blur below spreads it. A large\n    // flake's glint stays in its own LED.\n    const o = (py[p] | 0) * W + (px[p] | 0), ex = gx[p], ey = gy[p];\n    if (ey !== 0 && ex * ex + ey * ey > gcut * gcut) {\n      // Its normal is sqrt(M) times its resting tilt; det M = 1, so\n      // sqrt(M) = (M + I) / sqrt(trace + 2).\n      const is = 1 / sqrt(fro + 2);\n      const m0 = ((mp + 1) * ex + mq * ey) * is, m1 = (mq * ex + (mr + 1) * ey) * is, inv = 1 / sqrt(1 + m0 * m0 + m1 * m1);\n      const d = abs(h2x * m0 + h2y * m1 + h2z) * inv, d2 = d * d, d4 = d2 * d2, d8 = d4 * d4;\n      gl[o] += wg * d8 * d8 * d8;\n    }\n    lit[o] += val;\n    wt[o] += 1;\n  }\n  // A LED sees a little past its own square: a 1-2-1 blur each way.\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  blur(lit, S.tmp);\n  blur(wt, S.tmp);\n  // Colours: the oil's body and its sheen, whose brightest light leans a\n  // little round the wheel as pearl pigment does.\n  const h = S.hue + 0.88, hh = h - floor(h);\n  // Deep orange reads brown on the panel and deep yellow olive, so from\n  // orange to lime the oil glows instead: 0.82 of full, not 0.34.\n  const warm = sm(0.015, 0.05, hh) * (1 - sm(0.3, 0.38, hh));\n  const { c0, c1, c2 } = S;\n  hsv(h, 0.9 - 0.1 * warm, 0.34 + 0.48 * warm, c0);\n  hsv(h - 0.02, 0.42 - 0.12 * warm, 1, c1);\n  hsv(h - 0.12, 0.38 - 0.1 * warm, 1, c2);\n  const rest = RF[0] * wf + RR[0] * wr + RS[(NC - 1) >> 1] * ws;\n  for (let o = 0; o \u003c W * H; o++) {\n    // An LED no parcel reached shows flakes at rest.\n    const val = (lit[o] + 0.05 * rest) / (wt[o] + 0.05) + gl[o] * 0.5;\n    const s = val > 1.4 ? 1.4 : val, fl = val \u003c 0.4 ? 0 : val > 1 ? 1 : (val - 0.4) / 0.6, f = fl * fl * (3 - 2 * fl);\n    const sr = c1[0] + (c2[0] - c1[0]) * f, sg = c1[1] + (c2[1] - c1[1]) * f, sb = c1[2] + (c2[2] - c1[2]) * f;\n    const body = 1 - 0.55 * (s > 1 ? 1 : s);\n    // The brightest sheen runs on toward white.\n    const wl = val \u003c 0.75 ? 0 : val > 1.3 ? 1 : (val - 0.75) / 0.55, wh = wl * wl * (1.5 - wl), k = s * 0.85 * (1 - wh);\n    const r = 255 * (c0[0] * body + sr * k + wh), g = 255 * (c0[1] * body + sg * k + wh), b = 255 * (c0[2] * body + sb * k + wh);\n    display.setPixel(o % W, (o / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Stir=0..1, Mica=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the oil and its sheen once round the wheel; the brightest silk leans 0.12 back from the oil's hue, lilac on the berry oil. At 0 a deep berry oil with pale pink silk; at 0.1 wine, at 0.2 orange, at 0.3 yellow, at 0.45 green, at 0.6 teal, at 0.8 indigo, at 0.9 violet. From orange to lime the oil glows at 0.82 of full instead of 0.34, so it never reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"The clock. At 2 the fingertip crosses the panel and back in 9 seconds and runs down and up it in 13, so its path never quite repeats, and the oil near it moves up to 38 LEDs a second; at 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Stir","min":0,"max":1,"about":"How hard the fingertip pushes, 1.9 times harder at 0.5 and 5 times at 1. At 0 it trails a slow pair of eddies and the silk lies in long arcs; at 1 the oil near it races at 87 LEDs a second, the eddies roll into each other and the silk folds into tight curls."},{"name":"Mica","min":0,"max":1,"about":"How much mica the oil carries. At 0 and 0.06 a sheer oil whose flow shows as soft satin; at 0.5 the silk is brighter with a fine grain in it, and 250 large flakes ride in it, each glinting white for a moment as it turns to the strip light; at 1 there are 330 and the brightest silk runs to white."}],"start":[0,2,0,0.06],"measures":{"motion":0.1227,"detail":0.0154,"edges":0,"complexity":1.6312,"coverage":1,"colour":0.1493,"drift":0.0939},"knobResponse":[0.4877,0.1036,0.0703,0.0773]},{"slug":"shoot-em-up","title":"Shoot 'em Up","family":"pixel","round":24,"note":"세로로 흐르는 아케이드 슈팅 게임이 혼자 돌아요. 섬과 해안, 들판과 빨간 지붕 마을이 아래로 흘러가고, 흰 전투기가 노란 탄을 쏘며 S 자로 들어오는 편대와 포탑을 돌리는 포함을 떨어뜨려요. 화면 위 3분의 1을 덮는 보스가 내려와 고리와 나선 탄막을 뿌리다 연쇄 폭발로 부서져요. K1 이 열대 바다에서 붉은 협곡, 밤 도시, 우주 정거장까지 판을 바꾸고, K1 을 누르면 폭탄이 터져요.","idea":"An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.","buttons":"K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.","code":"// ===== Patternflow pattern =====\n// Title:   Shoot 'em Up\n// Family:  pixel\n// Idea:    An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the vertically scrolling arcade shooters of the 1980s\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1\n//\n// Knob 1: Stage. Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars.\n// Knob 2: Speed. The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in.\n// Knob 3: Waves. From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats.\n// Knob 4: Bullets. How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read.\n// Buttons: K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, abs, atan2, hypot, floor, round, sqrt, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = (a, b) => a + (b - a) * Math.random();\n// Ground scroll at Speed 2 in LEDs a second; clouds go 1.8 times as fast.\nconst V0 = 12, CLOUD = 1.8;\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), u = (x -= ix) * x * (3 - 2 * x), v = (y -= iy) * y * (3 - 2 * y);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\n\n// Ground types, one colour each in every stage's palette.\nconst [DEEP, WAVE, CAP, SHAL, SAND, GRASS, TREE, FLDA, FLDB, ROAD, ROOF, WALL, TRUNK, RIVER, LIGHT, HEDGE] = [...Array(16).keys()];\nconst PALS = [\n  \"123c9a1e5cc4d2ecff2aa8ccf0d4884aae3c1f6a2a9ccc4a6e9a3076706ad8482ef2e6c88a5a2a2c7ed8fff2c02e5226\",\n  \"5c20188a3a22d8966ab4502af0b464dc9a4c4a8a3cf2c278c8843e6e4630c8602ef6dcaa5a34182aa89affe6aa7a2c1a\",\n  \"0c1846172a628ca8e61c386a50506a163e340e2c2440446a2a2c481e1e30b43c96ffd25a2e222412265effa83c1c1c2c\",\n  \"08061c1e0e40e6e6ff34185e9a90885a62804c4440868ca8464c661c2034ff3c3cb8c2d83c343228dcff78ffc82a2e40\",\n].map((s) => s.match(/../g).map((h) => parseInt(h, 16)));\n// Clouds per stage: colour, underside shade, alpha, shadow shade.\nconst CLOUDS = [\n  [236, 242, 255, 0.74, 0.72, 0.62],\n  [236, 200, 156, 0.78, 0.6, 0.7],\n  [84, 96, 146, 0.7, 0.66, 0.72],\n  [150, 76, 214, 0.6, 0.5, 1],\n];\n\n// Sprites are rows of letters, \".\" clear; a mirrored one is its left half.\nfunction mk(src, pal, mirror) {\n  const rows = src.trim().split(/\\s+/), w = rows[0].length * (mirror ? 2 : 1), px = [], mask = new Uint8Array(w * rows.length);\n  rows.forEach((r, j) => {\n    for (let i = 0; i \u003c r.length; i++)\n      if (r[i] !== \".\") for (const x of mirror ? [i, w - 1 - i] : [i]) px.push(x, j, pal[r[i]]), (mask[j * w + x] = 1);\n  });\n  return { px, mask };\n}\nconst PLAYER = mk(\"....w.... ...wcw... ...wbw... ..gwbwg.. ..gwwwg.. .wgwwwgw. wwwwgwwww rww.g.wwr r..www..r ...r.r...\", { w: 0xdce4f0, c: 0x96f0ff, b: 0x286ee6, g: 0x828ca0, r: 0xe62832 });\nconst FIGHTER = mk(\"o.....o oo.d.oo ooodooo .odwdo. ..ddd.. ...d...\", { o: 0xff8c1e, d: 0xaa3214, w: 0xfff0c8 });\nconst DART = mk(\"mm...mm mmm.mmm .mmmmm. .mmcmm. ..mmm.. ..mdm.. ...m...\", { m: 0xd246e6, c: 0x78f0ff, d: 0x6e1e8c });\nconst BOAT = mk(\".kkkkk. kbbbbbk kbaaabk kbaaabk kbbbbbk kbbbbbk kbaaabk kbbbbbk .kbbbk. .kbbbk. ..kbk.. ...k...\", { k: 0x1e2028, b: 0x969baa, a: 0x5a5f6e });\n// The boss, 56 wide; \"e\" is its glowing core.\nconst BOSS = mk(\n  `\n.............kkgggk..kkkkkkk\nkk...........kacccc..kbbbbbb\nkykkk........kabbbc..kbbrrbb\nkybbbkkk.....kabbbc..kbbrrbb\nkbbbbbbbkk...kabbbc..kbbbbbb\nkbbbbbbbbbkkkbabbbc..kbbbbbb\nkbbrrrbbbbbbbbabbbc..kbbbkkk\nkaarrrrrrbbbbbabbbc..kbbbkee\nkccabbrrrrrrbbabbbckkbbbbkee\n.kkcaabgggrrrrabbbcbbbbbbkee\n...kcaagygbbrrrrrrbbbbbbbkee\n....kacgggbbbbbrrrrrrbbbbkee\n......kkcaabbbbbbbrrrbbbbkee\n........kacaaabgggbbbbbbbkee\n.........kkccabgygbbbbbbbkee\n...........kkaagggbbbbbbbkee\n.............kccaabbbbbbbkkk\n..............kkccabbbbbbbbb\n................kkcaabbbbbbb\n..................kccbbyybbb\n...................kkabbbbbb\n.....................kabbbbb\n.....................kcbbbbb\n......................kabbbb\n.......................kabbg\n.......................kcbbg\n........................kabg\n.........................kag\n.........................kcg\n..........................kg`,\n  { k: 0x14141e, c: 0x464a60, a: 0x787e96, b: 0xb4bacc, r: 0xdc323c, y: 0xffd646, g: 0x2c2c38, e: -1 },\n  true,\n);\nconst PALM = \"t.t.t .ttt. ttktt .ttt. t.t.t\".split(\" \");\n// 3x5 digits, a P, and a ship for the lives; one octal digit per row.\nconst GLYPH = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717, 0o75744, 0o22775];\nconst BUL = [\n  [255, 70, 170],\n  [70, 220, 255],\n  [255, 170, 40],\n];\n\n// The map repeats every 1024 rows: sea, coast, fields, town, river, coast. -1 is sea, 1 land.\nfunction profile(x, wy) {\n  const v = (wy % 1024) + 0.3 * (x - 32);\n  return v \u003c 250 || v > 830 ? -1 : v \u003c 290 ? (v - 270) / 20 : v \u003c 790 ? 1 : (810 - v) / 20;\n}\nconst ISL = {};\nfunction islands(sd, x, wy) {\n  let best = 0;\n  for (let j = floor(wy / 44) - 1, j1 = j + 2; j \u003c= j1; j++)\n    for (let i = floor(x / 32) - 1, i1 = i + 2; i \u003c= i1; i++) {\n      const ix = i * 32 + 4 + hash(i, j, sd + 2) * 24, iy = j * 44 + 6 + hash(i, j, sd + 3) * 32, r = 12 + hash(i, j, sd + 4) * 10;\n      const b = 1.9 * (1 - hypot(x - ix, wy - iy) / r);\n      if (b > best && hash(i, j, sd + 1) \u003c 0.7) ((best = b), (ISL.x = ix), (ISL.y = iy), (ISL.r = r));\n    }\n  return best;\n}\nfunction terrain(sd, x, wy) {\n  const pr = profile(x, wy);\n  let e = pr + 0.5 * (noise(x / 11, wy / 11, sd) - 0.5) + 0.24 * (noise(x / 4.5, wy / 4.5, sd + 9) - 0.5);\n  if (pr \u003c 0) e += islands(sd, x, wy) * min(1, -pr);\n  if (e \u003c -0.08) {\n    if (e > -0.12) return CAP;\n    if (e > -0.21) return SHAL;\n    const cx = x >> 3, cy = floor(wy / 5), h = hash(cx, cy, sd + 21), c0 = cx * 8 + floor(hash(cx, cy, sd + 22) * 6);\n    if (h \u003c 0.4 && wy === cy * 5 + floor(hash(cx, cy, sd + 23) * 4) && x >= c0 && x \u003c c0 + (h \u003c 0.15 ? 3 : 2)) return CAP;\n    return e > -0.36 || noise(x / 6, wy / 2, sd + 5) > 0.78 ? WAVE : DEEP;\n  }\n  if (e \u003c 0.08) return SAND;\n  if (pr \u003c -0.5) {\n    const dx = round(x - ISL.x), dy = round(wy - ISL.y), c = ISL.r > 13 && abs(dx) \u003c= 2 && abs(dy) \u003c= 2 ? PALM[dy + 2][dx + 2] : \".\";\n    return c === \".\" ? GRASS : c === \"k\" ? TRUNK : TREE;\n  }\n  const u = wy % 1024, dr = abs(x - 30 - 9 * sin(wy / 70));\n  if (u > 560 && u \u003c 770) {\n    const a = (u - 560) / 34, dv = abs(x - 32 - 23 * sin(a)) / sqrt(1 + (0.68 * cos(a)) ** 2);\n    if (dv \u003c 4.4) return dr \u003c 2.6 ? (dr > 1.6 ? WALL : ROAD) : dv \u003c 3.3 ? RIVER : SAND;\n  }\n  if (dr \u003c 1.6) return dr \u003c 0.6 && wy % 6 \u003c 3 ? LIGHT : ROAD;\n  if (u > 420 && u \u003c 510 && dr \u003c 22 + 6 * sin(wy / 9)) {\n    // The town: in each plot a house (roof, front wall, shadow) or a tree.\n    const lx = (x + 4) % 9, ly = wy % 9;\n    if (lx === 0 || ly === 0) return ROAD;\n    if (hash(floor((x + 4) / 9), floor(wy / 9), sd + 41) > 0.6) return hypot(lx - 4.5, ly - 4.5) \u003c 2.7 ? TREE : GRASS;\n    if (lx >= 2 && lx \u003c= 6 && ly >= 2) return ly === 2 ? WALL : ly > 7 ? GRASS : lx === 4 ? TRUNK : ROOF;\n    return (lx === 7 && ly >= 2 && ly \u003c= 6) || (ly === 1 && lx >= 3) ? HEDGE : GRASS;\n  }\n  const band = floor(wy / 14), gx = x + floor(hash(band, 0, sd + 51) * 16), h = hash(floor(gx / 16), band, sd + 52);\n  if (gx % 16 === 0 || wy % 14 === 0) return h \u003c 0.6 ? HEDGE : GRASS;\n  const kind = floor(h * 4);\n  if (kind \u003c 3) return (kind ? (kind > 1 ? hash(gx, wy, sd + 53) \u003c 0.12 : gx % 3 === 0) : wy % 3 === 0) ? FLDB : FLDA;\n  const tx = floor(gx / 5), ty = floor(wy / 5);\n  return hypot(gx - tx * 5 - 1 - hash(tx, ty, sd + 55) * 3, wy - ty * 5 - 1 - hash(tx, ty, sd + 56) * 3) \u003c 1.9 ? TREE : GRASS;\n}\n// A cloud: puffs on a flat base, 2 its body and 1 its underside.\nfunction newCloud(S, cw) {\n  const w = floor(rnd(22, 40)), h = floor(rnd(10, 16)), n = 3 + floor(w / 9), P = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = h * 0.5 * (0.5 + 0.5 * sin((PI * (i + 0.5)) / n)) + rnd(-0.6, 0.8);\n    P.push((w * (i + 0.5)) / n + rnd(-1.5, 1.5), h - 1.5 - r * 0.55, r);\n  }\n  const inn = (x, y) => x >= 0 && y >= 0 && x \u003c w && y \u003c= h - 1.5 && P.some((_, i) => i % 3 === 0 && hypot(x + 0.5 - P[i], y + 0.5 - P[i + 1]) \u003c P[i + 2]);\n  const m = new Uint8Array(w * h);\n  for (let y = 0; y \u003c h; y++) for (let x = 0; x \u003c w; x++) if (inn(x, y)) m[y * w + x] = inn(x, y + 2) ? 2 : 1;\n  S.clouds.push({ x: floor(rnd(-14, 56 - w / 2)), cw: cw + h, w, h, m });\n}\nfunction fill(S) {\n  for (const top = floor(S.scroll) + H + 24; S.gen \u003c top; S.gen++) for (let x = 0; x \u003c W; x++) S.ter[(S.gen & 255) * W + x] = terrain(S.sd, x, S.gen);\n  const cb = floor(S.scroll * CLOUD);\n  for (; S.cnext \u003c cb + H + 20; S.cnext += floor(rnd(24, 52))) newCloud(S, S.cnext);\n  S.clouds = S.clouds.filter((c) => cb + H - 1 - c.cw \u003c H);\n}\n\nexport function setup(params) {\n  const S = { t: 0, scroll: 85, gen: 83, cnext: 147, sd: floor(Math.random() * 9000), ter: new Uint8Array(256 * W), cb: new Uint8Array(N), buf: new Float32Array(N * 3), sh: new Float32Array(N) };\n  Object.assign(S, { clouds: [], en: [], boats: [], eb: [], ps: [], fx: [], pop: [], caps: [], bossAt: 3.2, bossN: 0, waveAt: 0.4, waveN: 0, boatAt: 0.2, kills: 0, score: 0, flash: 0 });\n  S.pl = { x: 32, y: 112, lvl: 0, lvlT: 0, ft: 0 };\n  fill(S);\n  params.s = S;\n}\n\nfunction shoot(S, x, y, a, v, c, big) {\n  if (S.eb.length \u003c 380) S.eb.push({ x, y, vx: cos(a) * v, vy: sin(a) * v, c, big });\n}\nfunction fan(S, x, y, m, gap, v) {\n  const g = atan2(S.pl.y - y, S.pl.x - x);\n  for (let i = 0; i \u003c m; i++) shoot(S, x, y, g + (i - (m - 1) / 2) * gap, v, 2, 0);\n}\nfunction boom(S, x, y, s) {\n  const sp = [];\n  for (let i = 0; i \u003c 4 + s * 3; i++) {\n    const a = rnd(0, 6.283);\n    sp.push(cos(a) * rnd(20, 50) * s, sin(a) * rnd(20, 50) * s);\n  }\n  S.fx.push({ x, y, t0: S.t, s, sp, d: 0.45 + 0.12 * s });\n}\nfunction score(S, x, y, v) {\n  S.pop.push({ x, y, v, t0: S.t });\n  S.score += v;\n}\n// A hit; a kill leaves an explosion, its score, and every ninth a capsule.\nfunction hurt(S, e, n, x, y) {\n  e.fl = 0.06;\n  if ((e.hp -= n) > 0) return;\n  boom(S, x, y, e.boat ? 1.3 : 1);\n  score(S, x, y - 4, e.boat ? 300 : e.k ? 150 : 100);\n  if (++S.kills % 9 === 0) S.caps.push({ x, y });\n}\nconst boatY = (S, b) => floor(S.scroll) + H - 1 - round(b.wy);\nconst yOf = (S, e) => (e.boat ? boatY(S, e) : e.y);\n\nfunction spawn(S) {\n  const w = S.waves;\n  if (S.t >= S.waveAt) {\n    const n = S.waveN++, m = 4 + round(w);\n    if (n % 2 === 0) {\n      const o = { k: 0, side: n % 4 ? -1 : 1, y0: rnd(8, 30) };\n      for (let i = 0; i \u003c m; i++) S.en.push({ ...o, born: S.t + i * 0.3, x: -99, y: -99, hp: 6 });\n    } else {\n      const cx = rnd(24, 40);\n      for (let i = 0; i \u003c (m | 1); i++) {\n        const r = (i + 1) >> 1;\n        S.en.push({ k: 1, born: S.t, x: cx + (i & 1 ? r : -r) * 6, y: -8 - r * 6, hy: 34 - r * 6, st: 0, hp: 7, hold: 0.5 + r * 0.25 + rnd(0, 0.2) });\n      }\n    }\n    S.waveAt = S.t + (n === 0 ? 0.45 : S.boss ? 2 : 1) * (3.3 / w ** 0.75);\n  }\n  if (S.t \u003c S.boatAt) return;\n  // A gunboat, where its hull fits on open water.\n  const wy = floor(S.scroll) + H + 8;\n  S.boatAt = S.t + 0.3;\n  for (let n = 0; n \u003c 6; n++) {\n    const x = floor(rnd(6, 58));\n    let ok = true;\n    for (let j = -7; j \u003c= 7; j += 2) for (let i = -4; i \u003c= 4; i += 2) ok &&= S.ter[((wy + j) & 255) * W + x + i] \u003c= CAP;\n    if (ok) return S.boats.push({ boat: 1, x, wy, hp: 10, ft: rnd(0.6, 1.6) }), (S.boatAt += rnd(1.1, 2.7) / w ** 0.7);\n  }\n}\n\nfunction stepEnemies(S, d) {\n  const f = S.fury;\n  for (const e of S.en) {\n    const a = S.t - e.born;\n    e.fl -= d;\n    if (a \u003c 0) continue;\n    if (e.k === 0) {\n      e.x = e.side > 0 ? -6 + 38 * a : 70 - 38 * a;\n      e.y = e.y0 + 14 * a + 13 * sin(3.2 * a);\n    } else if (e.st === 0) {\n      if ((e.y += 50 * d) >= e.hy) ((e.st = 1), (e.t1 = S.t));\n    } else if (e.st === 1) {\n      if (S.t - e.t1 > e.hold) {\n        const g = atan2(S.pl.y - e.y, S.pl.x - e.x);\n        ((e.st = 2), (e.vx = cos(g) * 30), (e.vy = sin(g) * 30));\n        if (Math.random() \u003c 0.35 + 0.65 * f) fan(S, e.x, e.y + 3, 1 + 2 * round(f * 1.5), 0.25, 42);\n      }\n    } else {\n      const k = min(130, hypot(e.vx, e.vy) + 110 * d) / hypot(e.vx, e.vy);\n      e.x += (e.vx *= k) * d;\n      e.y += (e.vy *= k) * d;\n    }\n  }\n  S.en = S.en.filter((e) => e.hp > 0 && e.y \u003c 140 && e.x > -20 && e.x \u003c 84);\n  for (const b of S.boats) {\n    const sy = boatY(S, b);\n    b.fl -= d;\n    b.a = atan2(S.pl.y - sy + 3, S.pl.x - b.x);\n    if ((b.ft -= d) \u003c= 0 && sy > 2 && sy \u003c 96) {\n      b.ft = 2.2 - 1.3 * f;\n      for (let i = f > 0.5 ? -1 : 0; i \u003c= (f > 0.5 ? 1 : 0); i++) shoot(S, b.x + cos(b.a) * 4, sy - 3 + sin(b.a) * 4, b.a + i * 0.25, 38, 2, 0);\n    }\n  }\n  S.boats = S.boats.filter((b) => b.hp > 0 && boatY(S, b) \u003c 140);\n}\n\nfunction stepBoss(S, d) {\n  const f = S.fury;\n  // The first boss is short, so its fight fits the first seconds.\n  if (!S.boss && S.t >= S.bossAt) S.boss = { x: 32, y: -34, t0: S.t, st: 0, hp: S.bossN ? 320 + 40 * S.bossN : 60, ph: S.bossN ? 2.8 : 1.6, ang: 0 };\n  const B = S.boss;\n  if (!B) return;\n  B.fl -= d;\n  if (B.st === 2) {\n    if (!(S.t \u003c B.nd)) {\n      boom(S, B.x + rnd(-22, 22), B.y + rnd(4, 24), rnd(0.7, 1.4));\n      B.nd = S.t + 0.07;\n    }\n    if (S.t - B.t2 > 1.7) {\n      boom(S, B.x, B.y + 12, 3.2);\n      for (let i = 0; i \u003c 6; i++) boom(S, B.x + rnd(-24, 24), B.y + rnd(4, 26), rnd(1, 1.8));\n      score(S, B.x - 6, B.y + 14, 5000);\n      S.caps.push({ x: B.x, y: B.y + 20 });\n      Object.assign(S, { flash: 0.75, boss: null, bossAt: S.t + rnd(18, 30), bossN: S.bossN + 1 });\n    }\n  } else if (B.st === 0) {\n    const u = min(1, (S.t - B.t0) / 1.4);\n    B.y = -34 + 40 * (1 - (1 - u) * (1 - u));\n    if (u >= 1) ((B.st = 1), (B.t1 = S.t));\n  } else {\n    // In turns: a ring, a spiral, aimed fans from the wing guns.\n    B.x = 32 + 3 * sin((S.t - B.t1) * 0.8);\n    const ph = floor((S.t - B.t1) / B.ph) % 3;\n    if (ph === 0 && !(S.t \u003c B.nr)) {\n      const n = floor(12 + 18 * f), a0 = rnd(0, 6.283);\n      B.nr = S.t + 1.5 - 0.8 * f;\n      for (let i = 0; i \u003c n; i++) shoot(S, B.x, B.y + 11, a0 + (i * 2 * PI) / n, 28, 0, 1);\n    }\n    if (ph === 1 && !(S.t \u003c B.nx)) {\n      const arms = f > 0.5 ? 3 : 2;\n      B.nx = S.t + 1 / (7 + 23 * f);\n      B.ang += 0.37;\n      for (let i = 0; i \u003c arms; i++) shoot(S, B.x, B.y + 11, B.ang + (i * 2 * PI) / arms, 32, 1, 0);\n    }\n    if (ph === 2 && !(S.t \u003c B.nf)) {\n      B.nf = S.t + 1.05 - 0.55 * f;\n      for (const s of [-1, 1]) fan(S, B.x + s * 19.5, B.y + 10, 3 + round(6 * f), 0.12 + 0.1 * f, 42);\n    }\n  }\n}\n\nfunction stepPlayer(S, d) {\n  const P = S.pl, B = S.boss;\n  if ((P.lvlT -= d) \u003c= 0 && P.lvl > 0) ((P.lvl -= 1), (P.lvlT = 14));\n  // Its aim: the boss, a capsule, or half way from its weave to the nearest enemy.\n  const wv = 32 + 18 * sin(S.t * 0.53);\n  let ax = wv, ny = -99;\n  if (B && B.st > 0) ax = B.x + 10 * sin(S.t * 1.1);\n  else if (S.caps.length) ax = S.caps[0].x;\n  else for (const e of [...S.en, ...S.boats]) if (yOf(S, e) > max(0, ny) && yOf(S, e) \u003c P.y - 14) ((ny = yOf(S, e)), (ax = 0.55 * e.x + 0.45 * wv));\n  // Then the nearby spot the bullets will miss on its way there.\n  let best = 1e9, bx = P.x, by = P.y;\n  for (const ox of [-14, -9, -5, -2, 0, 2, 5, 9, 14])\n    for (const oy of [-8, -3, 0, 4]) {\n      const cx = clamp(P.x + ox, 5, 58), cy = clamp(P.y + oy, 96, 116), dist = max(0.01, hypot(cx - P.x, cy - P.y));\n      let c = 0.05 * abs(cx - ax) + 0.04 * abs(cy - 111) + 0.015 * dist;\n      for (const b of S.eb)\n        for (const tau of abs(b.y - cy) \u003c 45 ? [0.05, 0.12, 0.2, 0.3, 0.42] : []) {\n          const k = min(1, (60 * tau) / dist), dx = b.x + b.vx * tau - P.x - (cx - P.x) * k, dy = b.y + b.vy * tau - P.y - (cy - P.y) * k;\n          c += max(0, 30 - dx * dx - 0.7 * dy * dy) / (tau \u003c 0.15 ? 6 : 15);\n        }\n      if (c \u003c best) ((best = c), (bx = cx), (by = cy));\n    }\n  P.x += clamp(bx - P.x, -60 * d, 60 * d);\n  P.y += clamp(by - P.y, -60 * d, 60 * d);\n  // Two streams, three after a capsule, five after two.\n  for (P.ft -= d; P.ft \u003c= 0; P.ft += 0.1)\n    for (const [x, vx] of [[-2, 0], [2, 0], [0, 0], [-3, -38], [3, 38]].slice(0, [2, 3, 5][P.lvl])) S.ps.push({ x: P.x + x, y: P.y - 5, vx, vy: -170 });\n}\n\nfunction stepShots(S, d) {\n  const B = S.boss, P = S.pl;\n  for (const s of S.ps) {\n    s.x += s.vx * d;\n    s.y += s.vy * d;\n    if (s.y \u003c -4) s.dead = 1;\n    for (const e of [...S.en, ...S.boats]) if (!s.dead && e.hp > 0 && abs(s.x - e.x) \u003c= 4 && abs(s.y - yOf(S, e)) \u003c= (e.boat ? 6 : 4)) ((s.dead = 1), hurt(S, e, 1, e.x, yOf(S, e)));\n    const ix = round(s.x - B?.x + 28), iy = round(s.y - B?.y);\n    if (!s.dead && B?.st === 1 && ix >= 0 && ix \u003c 56 && iy >= 0 && iy \u003c 30 && BOSS.mask[iy * 56 + ix]) ((s.dead = 1), (B.fl = 0.05), (S.score += 10), --B.hp);\n  }\n  // A bullet that reaches the fighter bursts on its shield.\n  for (const b of S.eb) {\n    b.x += b.vx * d;\n    b.y += b.vy * d;\n    if (b.x \u003c -3 || b.x > 66 || b.y \u003c -3 || b.y > 130) b.dead = 1;\n    else if (abs(b.x - P.x) \u003c 1.6 && abs(b.y - P.y) \u003c 2.5) ((b.dead = 1), boom(S, b.x, b.y, 0.4));\n  }\n  if (B?.st === 1 && B.hp \u003c= 0) ((B.st = 2), (B.t2 = S.t), (S.eb.length = 0));\n  for (const c of S.caps) {\n    c.y += 14 * d;\n    if (abs(c.x - P.x) \u003c 6 && abs(c.y - P.y) \u003c 7) ((c.dead = 1), (P.lvl = min(2, P.lvl + 1)), (P.lvlT = 16));\n  }\n  for (const k of [\"ps\", \"eb\", \"caps\"]) S[k] = S[k].filter((o) => !o.dead && o.y \u003c 134);\n  S.fx = S.fx.filter((f) => S.t - f.t0 \u003c f.d);\n  S.pop = S.pop.filter((p) => S.t - p.t0 \u003c 0.9);\n}\n\nfunction step(S, d) {\n  S.t += d;\n  S.scroll += V0 * d;\n  S.flash = max(0, S.flash - 2.6 * d);\n  fill(S);\n  spawn(S);\n  stepEnemies(S, d);\n  stepBoss(S, d);\n  stepPlayer(S, d);\n  stepShots(S, d);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.stage, S.waves, S.fury] = [clamp(k[0], 0, 1), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  // The first second plays before the first frame.\n  if (!S.started) {\n    S.started = 1;\n    for (let i = 0; i \u003c 30; i++) step(S, 1 / 30);\n  }\n  // The bomb clears the bullets and hurts everything on the screen.\n  if (input.btnPressed?.[0]) {\n    Object.assign(S, { flash: 0.9, bomb: S.t, eb: [] });\n    for (const e of [...S.en, ...S.boats]) if (e.hp > 0 && yOf(S, e) > 0) hurt(S, e, 4, e.x, yOf(S, e));\n    if (S.boss?.st === 1) S.boss.hp -= 15;\n  }\n  for (let d = (clamp(dt || 0, 0, 0.1) * clamp(k[1], 0.2, 3)) / 2; d > 0; d -= 1 / 30) step(S, min(d, 1 / 30));\n}\n\nfunction put(buf, x, y, r, g, b) {\n  const q = (round(y) * W + round(x)) * 3;\n  if (x > -0.5 && y > -0.5 && x \u003c W - 0.5 && y \u003c H - 0.5) ((buf[q] = r), (buf[q + 1] = g), (buf[q + 2] = b));\n}\nfunction mix(buf, q, r, g, b, a) {\n  buf[q] += (r - buf[q]) * a;\n  buf[q + 1] += (g - buf[q + 1]) * a;\n  buf[q + 2] += (b - buf[q + 2]) * a;\n}\n// Mode 1 draws a sprite white, 2 stamps its shadow.\nfunction spr(S, sp, x0, y0, mode, glow) {\n  const p = sp.px;\n  for (let i = 0; i \u003c p.length; i += 3) {\n    const x = x0 + p[i], y = y0 + p[i + 1], c = mode ? 0xffffff : p[i + 2];\n    if (mode === 2) {\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) S.sh[y * W + x] = min(S.sh[y * W + x], 0.55);\n    } else if (c \u003c 0) put(S.buf, x, y, ...glow);\n    else put(S.buf, x, y, c >> 16, (c >> 8) & 255, c & 255);\n  }\n}\nfunction number(buf, v, x0, y0, r, g, b) {\n  const s = String(v);\n  for (let n = 0; n \u003c s.length; n++)\n    for (let j = 0; j \u003c 15; j++) if ((GLYPH[\"0123456789PA\".indexOf(s[n])] >> (14 - j)) & 1) put(buf, x0 + n * 4 + (j % 3), y0 + floor(j / 3), r, g, b);\n}\n// A ring of width w, or a disc for w 0.\nfunction ring(buf, cx, cy, R, w, c) {\n  for (let y = floor(cy - R - w); y \u003c= cy + R + w; y++)\n    for (let x = floor(cx - R - w); x \u003c= cx + R + w; x++) if (w ? abs(hypot(x - cx, y - cy) - R) \u003c w : hypot(x - cx, y - cy) \u003c= R) put(buf, x, y, ...c);\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { buf, sh, cb, pl: P, boss: B, t } = S,\n    si = min(3, floor(S.stage * 4)), pal = PALS[si];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, wy = floor(S.scroll) + H - 1 - y; x \u003c W; x++) {\n      let k = S.ter[(wy & 255) * W + x];\n      if (k === CAP && (t * 1.6 + hash(x, wy, 3) * 4) % 2 > 1.55) k = WAVE;\n      put(buf, x, y, pal[k * 3], pal[k * 3 + 1], pal[k * 3 + 2]);\n      if (si === 2 && k === FLDA && (x + wy) % 2 === 0 && hash(x, wy, 5) \u003c 0.4) put(buf, x, y, 255, 214, 110);\n      const h = si === 3 && k === DEEP ? hash(x, wy, 6) : 1;\n      if (h \u003c 0.035) put(buf, x, y, ...Array(3).fill(90 + 4600 * h * (0.7 + 0.3 * sin(t * 4 + x * y))));\n    }\n  for (const b of S.boats) {\n    const y = boatY(S, b);\n    spr(S, BOAT, b.x - 3, y - 6, b.fl > 0 ? 1 : 0);\n    for (let i = 1; i \u003c= 3; i++) put(buf, b.x + cos(b.a) * i, y - 3 + sin(b.a) * i, 30, 30, 40);\n  }\n  // Shadows, then the clouds. Thick fire dims the ground as bullet-hell games do.\n  const C = CLOUDS[si];\n  cb.fill(0);\n  for (const c of S.clouds)\n    for (let j = 0, sy = floor(S.scroll * CLOUD) + H - 1 - c.cw; j \u003c c.h; j++)\n      for (let i = 0, x = c.x, y = sy + j; i \u003c c.w; i++, x++) if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && c.m[j * c.w + i]) cb[y * W + x] = c.m[j * c.w + i];\n  for (let i = 0; i \u003c N; i++) sh[i] = (i % W >= 6 && i >= 9 * W && cb[i - 9 * W - 6] ? C[5] : 1) * (1 - 0.36 * S.fury);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) + 2, round(e.y) + 6, 2);\n  if (B) spr(S, BOSS, round(B.x) - 22, round(B.y) + 9, 2);\n  spr(S, PLAYER, round(P.x) + 1, round(P.y) + 3, 2);\n  for (let i = 0; i \u003c N; i++) {\n    const l = cb[i], k = l === 1 ? C[3] : 1;\n    mix(buf, i * 3, 0, 0, 0, 1 - sh[i]);\n    if (l) mix(buf, i * 3, C[0] * k, C[1] * k, C[2] * k, C[4]);\n  }\n  for (const c of S.caps) ring(buf, c.x, c.y, 2.9, 0, floor(t * 7) % 2 ? [230, 40, 50] : [40, 90, 240]), number(buf, \"P\", c.x - 1, c.y - 2, 255, 255, 255);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) - 3, round(e.y) - 3, e.fl > 0 ? 1 : 0);\n  // The boss's core pulses cyan, or red as the fury rises.\n  const f = S.fury, p = 0.5 + 0.5 * sin(t * 9);\n  if (B) spr(S, BOSS, round(B.x) - 28, round(B.y), (B.st === 2 ? floor(t * 16) % 2 : B.fl > 0 && floor(t * 20) % 4 === 0) ? 1 : 0, [120 + 135 * f + 60 * p, 230 - 170 * f + 25 * p * (1 - f), 255 - 215 * f]);\n  for (const ex of [3, 5])\n    for (let j = 0, L = 2 + ((t * 24 + ex) % 3 | 0), c; j \u003c L; j++) put(buf, round(P.x) - 4 + ex, round(P.y) + 5 + j, 255 - 12 * (c = min(3, j + (L \u003c 3))) * c, 255 - 65 * c, 220 - 70 * c);\n  spr(S, PLAYER, round(P.x) - 4, round(P.y) - 5, 0);\n  for (const s of S.ps) for (let j = 0; j \u003c 3; j++) put(buf, s.x, s.y + j, 255, 255 - 28 * j, 230 - 85 * j);\n  // Explosions: a white flash, a ring cooling from yellow to red, sparks.\n  for (const f of S.fx) {\n    const a = (t - f.t0) / f.d, R = (1.5 + 4.5 * a) * f.s;\n    if (a \u003c 0.16) ring(buf, f.x, f.y, (1 + 10 * a) * f.s, 0, [255, 255, 235]);\n    else if (a \u003c 0.5) ring(buf, f.x, f.y, R * 0.5, 0, [255, a \u003c 0.3 ? 210 : 120, 40]);\n    if (a >= 0.16) ring(buf, f.x, f.y, R, 0.75, a \u003c 0.45 ? [255, 220, 80] : a \u003c 0.72 ? [255, 130, 30] : [180, 46, 24]);\n    for (let i = 0; a \u003c 0.85 && i \u003c f.sp.length; i += 2) put(buf, f.x + f.sp[i] * a * f.d, f.y + f.sp[i + 1] * a * f.d, 255, 245, 170);\n  }\n  for (const b of S.eb) {\n    const c = BUL[b.c];\n    for (let i = 0; i \u003c 9; i++) if (i % 2 || (b.big && i !== 4)) put(buf, b.x + (i % 3) - 1, b.y + floor(i / 3) - 1, ...c.map((v) => (i % 2 ? v : v * 0.6)));\n    put(buf, b.x, b.y, 255, 255, 255);\n  }\n  for (const p of S.pop) {\n    const a = (t - p.t0) / 0.9;\n    if (a \u003c 0.75 || floor(t * 20) % 2) number(buf, p.v, round(p.x - String(p.v).length * 2), round(p.y - a * 9), 255, 240, 120);\n  }\n  if (t - S.bomb \u003c 1) ring(buf, P.x, P.y, (t - S.bomb) * 150, 1.6, [200, 250, 255]);\n  for (let i = 0; S.flash > 0 && i \u003c N * 3; i++) buf[i] += (255 - buf[i]) * min(1, S.flash) * 0.85;\n  for (let i = 0; i \u003c 7 * W; i++) if (i % W \u003c 26 || i % W >= 50) mix(buf, i * 3, 0, 0, 0, 0.82);\n  number(buf, String(S.score % 1e6).padStart(6, \"0\"), 1, 1, 255, 255, 255);\n  number(buf, \"AAA\", 52, 1, 220, 228, 240);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","layer":{"id":"layer-shoot-em-up","type":"code","name":"shoot-em-up","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shoot 'em Up\n// Family:  pixel\n// Idea:    An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the vertically scrolling arcade shooters of the 1980s\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1\n//\n// Knob 1: Stage. Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars.\n// Knob 2: Speed. The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in.\n// Knob 3: Waves. From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats.\n// Knob 4: Bullets. How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read.\n// Buttons: K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, abs, atan2, hypot, floor, round, sqrt, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = (a, b) => a + (b - a) * Math.random();\n// Ground scroll at Speed 2 in LEDs a second; clouds go 1.8 times as fast.\nconst V0 = 12, CLOUD = 1.8;\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), u = (x -= ix) * x * (3 - 2 * x), v = (y -= iy) * y * (3 - 2 * y);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\n\n// Ground types, one colour each in every stage's palette.\nconst [DEEP, WAVE, CAP, SHAL, SAND, GRASS, TREE, FLDA, FLDB, ROAD, ROOF, WALL, TRUNK, RIVER, LIGHT, HEDGE] = [...Array(16).keys()];\nconst PALS = [\n  \"123c9a1e5cc4d2ecff2aa8ccf0d4884aae3c1f6a2a9ccc4a6e9a3076706ad8482ef2e6c88a5a2a2c7ed8fff2c02e5226\",\n  \"5c20188a3a22d8966ab4502af0b464dc9a4c4a8a3cf2c278c8843e6e4630c8602ef6dcaa5a34182aa89affe6aa7a2c1a\",\n  \"0c1846172a628ca8e61c386a50506a163e340e2c2440446a2a2c481e1e30b43c96ffd25a2e222412265effa83c1c1c2c\",\n  \"08061c1e0e40e6e6ff34185e9a90885a62804c4440868ca8464c661c2034ff3c3cb8c2d83c343228dcff78ffc82a2e40\",\n].map((s) => s.match(/../g).map((h) => parseInt(h, 16)));\n// Clouds per stage: colour, underside shade, alpha, shadow shade.\nconst CLOUDS = [\n  [236, 242, 255, 0.74, 0.72, 0.62],\n  [236, 200, 156, 0.78, 0.6, 0.7],\n  [84, 96, 146, 0.7, 0.66, 0.72],\n  [150, 76, 214, 0.6, 0.5, 1],\n];\n\n// Sprites are rows of letters, \".\" clear; a mirrored one is its left half.\nfunction mk(src, pal, mirror) {\n  const rows = src.trim().split(/\\s+/), w = rows[0].length * (mirror ? 2 : 1), px = [], mask = new Uint8Array(w * rows.length);\n  rows.forEach((r, j) => {\n    for (let i = 0; i \u003c r.length; i++)\n      if (r[i] !== \".\") for (const x of mirror ? [i, w - 1 - i] : [i]) px.push(x, j, pal[r[i]]), (mask[j * w + x] = 1);\n  });\n  return { px, mask };\n}\nconst PLAYER = mk(\"....w.... ...wcw... ...wbw... ..gwbwg.. ..gwwwg.. .wgwwwgw. wwwwgwwww rww.g.wwr r..www..r ...r.r...\", { w: 0xdce4f0, c: 0x96f0ff, b: 0x286ee6, g: 0x828ca0, r: 0xe62832 });\nconst FIGHTER = mk(\"o.....o oo.d.oo ooodooo .odwdo. ..ddd.. ...d...\", { o: 0xff8c1e, d: 0xaa3214, w: 0xfff0c8 });\nconst DART = mk(\"mm...mm mmm.mmm .mmmmm. .mmcmm. ..mmm.. ..mdm.. ...m...\", { m: 0xd246e6, c: 0x78f0ff, d: 0x6e1e8c });\nconst BOAT = mk(\".kkkkk. kbbbbbk kbaaabk kbaaabk kbbbbbk kbbbbbk kbaaabk kbbbbbk .kbbbk. .kbbbk. ..kbk.. ...k...\", { k: 0x1e2028, b: 0x969baa, a: 0x5a5f6e });\n// The boss, 56 wide; \"e\" is its glowing core.\nconst BOSS = mk(\n  `\n.............kkgggk..kkkkkkk\nkk...........kacccc..kbbbbbb\nkykkk........kabbbc..kbbrrbb\nkybbbkkk.....kabbbc..kbbrrbb\nkbbbbbbbkk...kabbbc..kbbbbbb\nkbbbbbbbbbkkkbabbbc..kbbbbbb\nkbbrrrbbbbbbbbabbbc..kbbbkkk\nkaarrrrrrbbbbbabbbc..kbbbkee\nkccabbrrrrrrbbabbbckkbbbbkee\n.kkcaabgggrrrrabbbcbbbbbbkee\n...kcaagygbbrrrrrrbbbbbbbkee\n....kacgggbbbbbrrrrrrbbbbkee\n......kkcaabbbbbbbrrrbbbbkee\n........kacaaabgggbbbbbbbkee\n.........kkccabgygbbbbbbbkee\n...........kkaagggbbbbbbbkee\n.............kccaabbbbbbbkkk\n..............kkccabbbbbbbbb\n................kkcaabbbbbbb\n..................kccbbyybbb\n...................kkabbbbbb\n.....................kabbbbb\n.....................kcbbbbb\n......................kabbbb\n.......................kabbg\n.......................kcbbg\n........................kabg\n.........................kag\n.........................kcg\n..........................kg`,\n  { k: 0x14141e, c: 0x464a60, a: 0x787e96, b: 0xb4bacc, r: 0xdc323c, y: 0xffd646, g: 0x2c2c38, e: -1 },\n  true,\n);\nconst PALM = \"t.t.t .ttt. ttktt .ttt. t.t.t\".split(\" \");\n// 3x5 digits, a P, and a ship for the lives; one octal digit per row.\nconst GLYPH = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717, 0o75744, 0o22775];\nconst BUL = [\n  [255, 70, 170],\n  [70, 220, 255],\n  [255, 170, 40],\n];\n\n// The map repeats every 1024 rows: sea, coast, fields, town, river, coast. -1 is sea, 1 land.\nfunction profile(x, wy) {\n  const v = (wy % 1024) + 0.3 * (x - 32);\n  return v \u003c 250 || v > 830 ? -1 : v \u003c 290 ? (v - 270) / 20 : v \u003c 790 ? 1 : (810 - v) / 20;\n}\nconst ISL = {};\nfunction islands(sd, x, wy) {\n  let best = 0;\n  for (let j = floor(wy / 44) - 1, j1 = j + 2; j \u003c= j1; j++)\n    for (let i = floor(x / 32) - 1, i1 = i + 2; i \u003c= i1; i++) {\n      const ix = i * 32 + 4 + hash(i, j, sd + 2) * 24, iy = j * 44 + 6 + hash(i, j, sd + 3) * 32, r = 12 + hash(i, j, sd + 4) * 10;\n      const b = 1.9 * (1 - hypot(x - ix, wy - iy) / r);\n      if (b > best && hash(i, j, sd + 1) \u003c 0.7) ((best = b), (ISL.x = ix), (ISL.y = iy), (ISL.r = r));\n    }\n  return best;\n}\nfunction terrain(sd, x, wy) {\n  const pr = profile(x, wy);\n  let e = pr + 0.5 * (noise(x / 11, wy / 11, sd) - 0.5) + 0.24 * (noise(x / 4.5, wy / 4.5, sd + 9) - 0.5);\n  if (pr \u003c 0) e += islands(sd, x, wy) * min(1, -pr);\n  if (e \u003c -0.08) {\n    if (e > -0.12) return CAP;\n    if (e > -0.21) return SHAL;\n    const cx = x >> 3, cy = floor(wy / 5), h = hash(cx, cy, sd + 21), c0 = cx * 8 + floor(hash(cx, cy, sd + 22) * 6);\n    if (h \u003c 0.4 && wy === cy * 5 + floor(hash(cx, cy, sd + 23) * 4) && x >= c0 && x \u003c c0 + (h \u003c 0.15 ? 3 : 2)) return CAP;\n    return e > -0.36 || noise(x / 6, wy / 2, sd + 5) > 0.78 ? WAVE : DEEP;\n  }\n  if (e \u003c 0.08) return SAND;\n  if (pr \u003c -0.5) {\n    const dx = round(x - ISL.x), dy = round(wy - ISL.y), c = ISL.r > 13 && abs(dx) \u003c= 2 && abs(dy) \u003c= 2 ? PALM[dy + 2][dx + 2] : \".\";\n    return c === \".\" ? GRASS : c === \"k\" ? TRUNK : TREE;\n  }\n  const u = wy % 1024, dr = abs(x - 30 - 9 * sin(wy / 70));\n  if (u > 560 && u \u003c 770) {\n    const a = (u - 560) / 34, dv = abs(x - 32 - 23 * sin(a)) / sqrt(1 + (0.68 * cos(a)) ** 2);\n    if (dv \u003c 4.4) return dr \u003c 2.6 ? (dr > 1.6 ? WALL : ROAD) : dv \u003c 3.3 ? RIVER : SAND;\n  }\n  if (dr \u003c 1.6) return dr \u003c 0.6 && wy % 6 \u003c 3 ? LIGHT : ROAD;\n  if (u > 420 && u \u003c 510 && dr \u003c 22 + 6 * sin(wy / 9)) {\n    // The town: in each plot a house (roof, front wall, shadow) or a tree.\n    const lx = (x + 4) % 9, ly = wy % 9;\n    if (lx === 0 || ly === 0) return ROAD;\n    if (hash(floor((x + 4) / 9), floor(wy / 9), sd + 41) > 0.6) return hypot(lx - 4.5, ly - 4.5) \u003c 2.7 ? TREE : GRASS;\n    if (lx >= 2 && lx \u003c= 6 && ly >= 2) return ly === 2 ? WALL : ly > 7 ? GRASS : lx === 4 ? TRUNK : ROOF;\n    return (lx === 7 && ly >= 2 && ly \u003c= 6) || (ly === 1 && lx >= 3) ? HEDGE : GRASS;\n  }\n  const band = floor(wy / 14), gx = x + floor(hash(band, 0, sd + 51) * 16), h = hash(floor(gx / 16), band, sd + 52);\n  if (gx % 16 === 0 || wy % 14 === 0) return h \u003c 0.6 ? HEDGE : GRASS;\n  const kind = floor(h * 4);\n  if (kind \u003c 3) return (kind ? (kind > 1 ? hash(gx, wy, sd + 53) \u003c 0.12 : gx % 3 === 0) : wy % 3 === 0) ? FLDB : FLDA;\n  const tx = floor(gx / 5), ty = floor(wy / 5);\n  return hypot(gx - tx * 5 - 1 - hash(tx, ty, sd + 55) * 3, wy - ty * 5 - 1 - hash(tx, ty, sd + 56) * 3) \u003c 1.9 ? TREE : GRASS;\n}\n// A cloud: puffs on a flat base, 2 its body and 1 its underside.\nfunction newCloud(S, cw) {\n  const w = floor(rnd(22, 40)), h = floor(rnd(10, 16)), n = 3 + floor(w / 9), P = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = h * 0.5 * (0.5 + 0.5 * sin((PI * (i + 0.5)) / n)) + rnd(-0.6, 0.8);\n    P.push((w * (i + 0.5)) / n + rnd(-1.5, 1.5), h - 1.5 - r * 0.55, r);\n  }\n  const inn = (x, y) => x >= 0 && y >= 0 && x \u003c w && y \u003c= h - 1.5 && P.some((_, i) => i % 3 === 0 && hypot(x + 0.5 - P[i], y + 0.5 - P[i + 1]) \u003c P[i + 2]);\n  const m = new Uint8Array(w * h);\n  for (let y = 0; y \u003c h; y++) for (let x = 0; x \u003c w; x++) if (inn(x, y)) m[y * w + x] = inn(x, y + 2) ? 2 : 1;\n  S.clouds.push({ x: floor(rnd(-14, 56 - w / 2)), cw: cw + h, w, h, m });\n}\nfunction fill(S) {\n  for (const top = floor(S.scroll) + H + 24; S.gen \u003c top; S.gen++) for (let x = 0; x \u003c W; x++) S.ter[(S.gen & 255) * W + x] = terrain(S.sd, x, S.gen);\n  const cb = floor(S.scroll * CLOUD);\n  for (; S.cnext \u003c cb + H + 20; S.cnext += floor(rnd(24, 52))) newCloud(S, S.cnext);\n  S.clouds = S.clouds.filter((c) => cb + H - 1 - c.cw \u003c H);\n}\n\nexport function setup(params) {\n  const S = { t: 0, scroll: 85, gen: 83, cnext: 147, sd: floor(Math.random() * 9000), ter: new Uint8Array(256 * W), cb: new Uint8Array(N), buf: new Float32Array(N * 3), sh: new Float32Array(N) };\n  Object.assign(S, { clouds: [], en: [], boats: [], eb: [], ps: [], fx: [], pop: [], caps: [], bossAt: 3.2, bossN: 0, waveAt: 0.4, waveN: 0, boatAt: 0.2, kills: 0, score: 0, flash: 0 });\n  S.pl = { x: 32, y: 112, lvl: 0, lvlT: 0, ft: 0 };\n  fill(S);\n  params.s = S;\n}\n\nfunction shoot(S, x, y, a, v, c, big) {\n  if (S.eb.length \u003c 380) S.eb.push({ x, y, vx: cos(a) * v, vy: sin(a) * v, c, big });\n}\nfunction fan(S, x, y, m, gap, v) {\n  const g = atan2(S.pl.y - y, S.pl.x - x);\n  for (let i = 0; i \u003c m; i++) shoot(S, x, y, g + (i - (m - 1) / 2) * gap, v, 2, 0);\n}\nfunction boom(S, x, y, s) {\n  const sp = [];\n  for (let i = 0; i \u003c 4 + s * 3; i++) {\n    const a = rnd(0, 6.283);\n    sp.push(cos(a) * rnd(20, 50) * s, sin(a) * rnd(20, 50) * s);\n  }\n  S.fx.push({ x, y, t0: S.t, s, sp, d: 0.45 + 0.12 * s });\n}\nfunction score(S, x, y, v) {\n  S.pop.push({ x, y, v, t0: S.t });\n  S.score += v;\n}\n// A hit; a kill leaves an explosion, its score, and every ninth a capsule.\nfunction hurt(S, e, n, x, y) {\n  e.fl = 0.06;\n  if ((e.hp -= n) > 0) return;\n  boom(S, x, y, e.boat ? 1.3 : 1);\n  score(S, x, y - 4, e.boat ? 300 : e.k ? 150 : 100);\n  if (++S.kills % 9 === 0) S.caps.push({ x, y });\n}\nconst boatY = (S, b) => floor(S.scroll) + H - 1 - round(b.wy);\nconst yOf = (S, e) => (e.boat ? boatY(S, e) : e.y);\n\nfunction spawn(S) {\n  const w = S.waves;\n  if (S.t >= S.waveAt) {\n    const n = S.waveN++, m = 4 + round(w);\n    if (n % 2 === 0) {\n      const o = { k: 0, side: n % 4 ? -1 : 1, y0: rnd(8, 30) };\n      for (let i = 0; i \u003c m; i++) S.en.push({ ...o, born: S.t + i * 0.3, x: -99, y: -99, hp: 6 });\n    } else {\n      const cx = rnd(24, 40);\n      for (let i = 0; i \u003c (m | 1); i++) {\n        const r = (i + 1) >> 1;\n        S.en.push({ k: 1, born: S.t, x: cx + (i & 1 ? r : -r) * 6, y: -8 - r * 6, hy: 34 - r * 6, st: 0, hp: 7, hold: 0.5 + r * 0.25 + rnd(0, 0.2) });\n      }\n    }\n    S.waveAt = S.t + (n === 0 ? 0.45 : S.boss ? 2 : 1) * (3.3 / w ** 0.75);\n  }\n  if (S.t \u003c S.boatAt) return;\n  // A gunboat, where its hull fits on open water.\n  const wy = floor(S.scroll) + H + 8;\n  S.boatAt = S.t + 0.3;\n  for (let n = 0; n \u003c 6; n++) {\n    const x = floor(rnd(6, 58));\n    let ok = true;\n    for (let j = -7; j \u003c= 7; j += 2) for (let i = -4; i \u003c= 4; i += 2) ok &&= S.ter[((wy + j) & 255) * W + x + i] \u003c= CAP;\n    if (ok) return S.boats.push({ boat: 1, x, wy, hp: 10, ft: rnd(0.6, 1.6) }), (S.boatAt += rnd(1.1, 2.7) / w ** 0.7);\n  }\n}\n\nfunction stepEnemies(S, d) {\n  const f = S.fury;\n  for (const e of S.en) {\n    const a = S.t - e.born;\n    e.fl -= d;\n    if (a \u003c 0) continue;\n    if (e.k === 0) {\n      e.x = e.side > 0 ? -6 + 38 * a : 70 - 38 * a;\n      e.y = e.y0 + 14 * a + 13 * sin(3.2 * a);\n    } else if (e.st === 0) {\n      if ((e.y += 50 * d) >= e.hy) ((e.st = 1), (e.t1 = S.t));\n    } else if (e.st === 1) {\n      if (S.t - e.t1 > e.hold) {\n        const g = atan2(S.pl.y - e.y, S.pl.x - e.x);\n        ((e.st = 2), (e.vx = cos(g) * 30), (e.vy = sin(g) * 30));\n        if (Math.random() \u003c 0.35 + 0.65 * f) fan(S, e.x, e.y + 3, 1 + 2 * round(f * 1.5), 0.25, 42);\n      }\n    } else {\n      const k = min(130, hypot(e.vx, e.vy) + 110 * d) / hypot(e.vx, e.vy);\n      e.x += (e.vx *= k) * d;\n      e.y += (e.vy *= k) * d;\n    }\n  }\n  S.en = S.en.filter((e) => e.hp > 0 && e.y \u003c 140 && e.x > -20 && e.x \u003c 84);\n  for (const b of S.boats) {\n    const sy = boatY(S, b);\n    b.fl -= d;\n    b.a = atan2(S.pl.y - sy + 3, S.pl.x - b.x);\n    if ((b.ft -= d) \u003c= 0 && sy > 2 && sy \u003c 96) {\n      b.ft = 2.2 - 1.3 * f;\n      for (let i = f > 0.5 ? -1 : 0; i \u003c= (f > 0.5 ? 1 : 0); i++) shoot(S, b.x + cos(b.a) * 4, sy - 3 + sin(b.a) * 4, b.a + i * 0.25, 38, 2, 0);\n    }\n  }\n  S.boats = S.boats.filter((b) => b.hp > 0 && boatY(S, b) \u003c 140);\n}\n\nfunction stepBoss(S, d) {\n  const f = S.fury;\n  // The first boss is short, so its fight fits the first seconds.\n  if (!S.boss && S.t >= S.bossAt) S.boss = { x: 32, y: -34, t0: S.t, st: 0, hp: S.bossN ? 320 + 40 * S.bossN : 60, ph: S.bossN ? 2.8 : 1.6, ang: 0 };\n  const B = S.boss;\n  if (!B) return;\n  B.fl -= d;\n  if (B.st === 2) {\n    if (!(S.t \u003c B.nd)) {\n      boom(S, B.x + rnd(-22, 22), B.y + rnd(4, 24), rnd(0.7, 1.4));\n      B.nd = S.t + 0.07;\n    }\n    if (S.t - B.t2 > 1.7) {\n      boom(S, B.x, B.y + 12, 3.2);\n      for (let i = 0; i \u003c 6; i++) boom(S, B.x + rnd(-24, 24), B.y + rnd(4, 26), rnd(1, 1.8));\n      score(S, B.x - 6, B.y + 14, 5000);\n      S.caps.push({ x: B.x, y: B.y + 20 });\n      Object.assign(S, { flash: 0.75, boss: null, bossAt: S.t + rnd(18, 30), bossN: S.bossN + 1 });\n    }\n  } else if (B.st === 0) {\n    const u = min(1, (S.t - B.t0) / 1.4);\n    B.y = -34 + 40 * (1 - (1 - u) * (1 - u));\n    if (u >= 1) ((B.st = 1), (B.t1 = S.t));\n  } else {\n    // In turns: a ring, a spiral, aimed fans from the wing guns.\n    B.x = 32 + 3 * sin((S.t - B.t1) * 0.8);\n    const ph = floor((S.t - B.t1) / B.ph) % 3;\n    if (ph === 0 && !(S.t \u003c B.nr)) {\n      const n = floor(12 + 18 * f), a0 = rnd(0, 6.283);\n      B.nr = S.t + 1.5 - 0.8 * f;\n      for (let i = 0; i \u003c n; i++) shoot(S, B.x, B.y + 11, a0 + (i * 2 * PI) / n, 28, 0, 1);\n    }\n    if (ph === 1 && !(S.t \u003c B.nx)) {\n      const arms = f > 0.5 ? 3 : 2;\n      B.nx = S.t + 1 / (7 + 23 * f);\n      B.ang += 0.37;\n      for (let i = 0; i \u003c arms; i++) shoot(S, B.x, B.y + 11, B.ang + (i * 2 * PI) / arms, 32, 1, 0);\n    }\n    if (ph === 2 && !(S.t \u003c B.nf)) {\n      B.nf = S.t + 1.05 - 0.55 * f;\n      for (const s of [-1, 1]) fan(S, B.x + s * 19.5, B.y + 10, 3 + round(6 * f), 0.12 + 0.1 * f, 42);\n    }\n  }\n}\n\nfunction stepPlayer(S, d) {\n  const P = S.pl, B = S.boss;\n  if ((P.lvlT -= d) \u003c= 0 && P.lvl > 0) ((P.lvl -= 1), (P.lvlT = 14));\n  // Its aim: the boss, a capsule, or half way from its weave to the nearest enemy.\n  const wv = 32 + 18 * sin(S.t * 0.53);\n  let ax = wv, ny = -99;\n  if (B && B.st > 0) ax = B.x + 10 * sin(S.t * 1.1);\n  else if (S.caps.length) ax = S.caps[0].x;\n  else for (const e of [...S.en, ...S.boats]) if (yOf(S, e) > max(0, ny) && yOf(S, e) \u003c P.y - 14) ((ny = yOf(S, e)), (ax = 0.55 * e.x + 0.45 * wv));\n  // Then the nearby spot the bullets will miss on its way there.\n  let best = 1e9, bx = P.x, by = P.y;\n  for (const ox of [-14, -9, -5, -2, 0, 2, 5, 9, 14])\n    for (const oy of [-8, -3, 0, 4]) {\n      const cx = clamp(P.x + ox, 5, 58), cy = clamp(P.y + oy, 96, 116), dist = max(0.01, hypot(cx - P.x, cy - P.y));\n      let c = 0.05 * abs(cx - ax) + 0.04 * abs(cy - 111) + 0.015 * dist;\n      for (const b of S.eb)\n        for (const tau of abs(b.y - cy) \u003c 45 ? [0.05, 0.12, 0.2, 0.3, 0.42] : []) {\n          const k = min(1, (60 * tau) / dist), dx = b.x + b.vx * tau - P.x - (cx - P.x) * k, dy = b.y + b.vy * tau - P.y - (cy - P.y) * k;\n          c += max(0, 30 - dx * dx - 0.7 * dy * dy) / (tau \u003c 0.15 ? 6 : 15);\n        }\n      if (c \u003c best) ((best = c), (bx = cx), (by = cy));\n    }\n  P.x += clamp(bx - P.x, -60 * d, 60 * d);\n  P.y += clamp(by - P.y, -60 * d, 60 * d);\n  // Two streams, three after a capsule, five after two.\n  for (P.ft -= d; P.ft \u003c= 0; P.ft += 0.1)\n    for (const [x, vx] of [[-2, 0], [2, 0], [0, 0], [-3, -38], [3, 38]].slice(0, [2, 3, 5][P.lvl])) S.ps.push({ x: P.x + x, y: P.y - 5, vx, vy: -170 });\n}\n\nfunction stepShots(S, d) {\n  const B = S.boss, P = S.pl;\n  for (const s of S.ps) {\n    s.x += s.vx * d;\n    s.y += s.vy * d;\n    if (s.y \u003c -4) s.dead = 1;\n    for (const e of [...S.en, ...S.boats]) if (!s.dead && e.hp > 0 && abs(s.x - e.x) \u003c= 4 && abs(s.y - yOf(S, e)) \u003c= (e.boat ? 6 : 4)) ((s.dead = 1), hurt(S, e, 1, e.x, yOf(S, e)));\n    const ix = round(s.x - B?.x + 28), iy = round(s.y - B?.y);\n    if (!s.dead && B?.st === 1 && ix >= 0 && ix \u003c 56 && iy >= 0 && iy \u003c 30 && BOSS.mask[iy * 56 + ix]) ((s.dead = 1), (B.fl = 0.05), (S.score += 10), --B.hp);\n  }\n  // A bullet that reaches the fighter bursts on its shield.\n  for (const b of S.eb) {\n    b.x += b.vx * d;\n    b.y += b.vy * d;\n    if (b.x \u003c -3 || b.x > 66 || b.y \u003c -3 || b.y > 130) b.dead = 1;\n    else if (abs(b.x - P.x) \u003c 1.6 && abs(b.y - P.y) \u003c 2.5) ((b.dead = 1), boom(S, b.x, b.y, 0.4));\n  }\n  if (B?.st === 1 && B.hp \u003c= 0) ((B.st = 2), (B.t2 = S.t), (S.eb.length = 0));\n  for (const c of S.caps) {\n    c.y += 14 * d;\n    if (abs(c.x - P.x) \u003c 6 && abs(c.y - P.y) \u003c 7) ((c.dead = 1), (P.lvl = min(2, P.lvl + 1)), (P.lvlT = 16));\n  }\n  for (const k of [\"ps\", \"eb\", \"caps\"]) S[k] = S[k].filter((o) => !o.dead && o.y \u003c 134);\n  S.fx = S.fx.filter((f) => S.t - f.t0 \u003c f.d);\n  S.pop = S.pop.filter((p) => S.t - p.t0 \u003c 0.9);\n}\n\nfunction step(S, d) {\n  S.t += d;\n  S.scroll += V0 * d;\n  S.flash = max(0, S.flash - 2.6 * d);\n  fill(S);\n  spawn(S);\n  stepEnemies(S, d);\n  stepBoss(S, d);\n  stepPlayer(S, d);\n  stepShots(S, d);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.stage, S.waves, S.fury] = [clamp(k[0], 0, 1), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  // The first second plays before the first frame.\n  if (!S.started) {\n    S.started = 1;\n    for (let i = 0; i \u003c 30; i++) step(S, 1 / 30);\n  }\n  // The bomb clears the bullets and hurts everything on the screen.\n  if (input.btnPressed?.[0]) {\n    Object.assign(S, { flash: 0.9, bomb: S.t, eb: [] });\n    for (const e of [...S.en, ...S.boats]) if (e.hp > 0 && yOf(S, e) > 0) hurt(S, e, 4, e.x, yOf(S, e));\n    if (S.boss?.st === 1) S.boss.hp -= 15;\n  }\n  for (let d = (clamp(dt || 0, 0, 0.1) * clamp(k[1], 0.2, 3)) / 2; d > 0; d -= 1 / 30) step(S, min(d, 1 / 30));\n}\n\nfunction put(buf, x, y, r, g, b) {\n  const q = (round(y) * W + round(x)) * 3;\n  if (x > -0.5 && y > -0.5 && x \u003c W - 0.5 && y \u003c H - 0.5) ((buf[q] = r), (buf[q + 1] = g), (buf[q + 2] = b));\n}\nfunction mix(buf, q, r, g, b, a) {\n  buf[q] += (r - buf[q]) * a;\n  buf[q + 1] += (g - buf[q + 1]) * a;\n  buf[q + 2] += (b - buf[q + 2]) * a;\n}\n// Mode 1 draws a sprite white, 2 stamps its shadow.\nfunction spr(S, sp, x0, y0, mode, glow) {\n  const p = sp.px;\n  for (let i = 0; i \u003c p.length; i += 3) {\n    const x = x0 + p[i], y = y0 + p[i + 1], c = mode ? 0xffffff : p[i + 2];\n    if (mode === 2) {\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) S.sh[y * W + x] = min(S.sh[y * W + x], 0.55);\n    } else if (c \u003c 0) put(S.buf, x, y, ...glow);\n    else put(S.buf, x, y, c >> 16, (c >> 8) & 255, c & 255);\n  }\n}\nfunction number(buf, v, x0, y0, r, g, b) {\n  const s = String(v);\n  for (let n = 0; n \u003c s.length; n++)\n    for (let j = 0; j \u003c 15; j++) if ((GLYPH[\"0123456789PA\".indexOf(s[n])] >> (14 - j)) & 1) put(buf, x0 + n * 4 + (j % 3), y0 + floor(j / 3), r, g, b);\n}\n// A ring of width w, or a disc for w 0.\nfunction ring(buf, cx, cy, R, w, c) {\n  for (let y = floor(cy - R - w); y \u003c= cy + R + w; y++)\n    for (let x = floor(cx - R - w); x \u003c= cx + R + w; x++) if (w ? abs(hypot(x - cx, y - cy) - R) \u003c w : hypot(x - cx, y - cy) \u003c= R) put(buf, x, y, ...c);\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { buf, sh, cb, pl: P, boss: B, t } = S,\n    si = min(3, floor(S.stage * 4)), pal = PALS[si];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, wy = floor(S.scroll) + H - 1 - y; x \u003c W; x++) {\n      let k = S.ter[(wy & 255) * W + x];\n      if (k === CAP && (t * 1.6 + hash(x, wy, 3) * 4) % 2 > 1.55) k = WAVE;\n      put(buf, x, y, pal[k * 3], pal[k * 3 + 1], pal[k * 3 + 2]);\n      if (si === 2 && k === FLDA && (x + wy) % 2 === 0 && hash(x, wy, 5) \u003c 0.4) put(buf, x, y, 255, 214, 110);\n      const h = si === 3 && k === DEEP ? hash(x, wy, 6) : 1;\n      if (h \u003c 0.035) put(buf, x, y, ...Array(3).fill(90 + 4600 * h * (0.7 + 0.3 * sin(t * 4 + x * y))));\n    }\n  for (const b of S.boats) {\n    const y = boatY(S, b);\n    spr(S, BOAT, b.x - 3, y - 6, b.fl > 0 ? 1 : 0);\n    for (let i = 1; i \u003c= 3; i++) put(buf, b.x + cos(b.a) * i, y - 3 + sin(b.a) * i, 30, 30, 40);\n  }\n  // Shadows, then the clouds. Thick fire dims the ground as bullet-hell games do.\n  const C = CLOUDS[si];\n  cb.fill(0);\n  for (const c of S.clouds)\n    for (let j = 0, sy = floor(S.scroll * CLOUD) + H - 1 - c.cw; j \u003c c.h; j++)\n      for (let i = 0, x = c.x, y = sy + j; i \u003c c.w; i++, x++) if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && c.m[j * c.w + i]) cb[y * W + x] = c.m[j * c.w + i];\n  for (let i = 0; i \u003c N; i++) sh[i] = (i % W >= 6 && i >= 9 * W && cb[i - 9 * W - 6] ? C[5] : 1) * (1 - 0.36 * S.fury);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) + 2, round(e.y) + 6, 2);\n  if (B) spr(S, BOSS, round(B.x) - 22, round(B.y) + 9, 2);\n  spr(S, PLAYER, round(P.x) + 1, round(P.y) + 3, 2);\n  for (let i = 0; i \u003c N; i++) {\n    const l = cb[i], k = l === 1 ? C[3] : 1;\n    mix(buf, i * 3, 0, 0, 0, 1 - sh[i]);\n    if (l) mix(buf, i * 3, C[0] * k, C[1] * k, C[2] * k, C[4]);\n  }\n  for (const c of S.caps) ring(buf, c.x, c.y, 2.9, 0, floor(t * 7) % 2 ? [230, 40, 50] : [40, 90, 240]), number(buf, \"P\", c.x - 1, c.y - 2, 255, 255, 255);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) - 3, round(e.y) - 3, e.fl > 0 ? 1 : 0);\n  // The boss's core pulses cyan, or red as the fury rises.\n  const f = S.fury, p = 0.5 + 0.5 * sin(t * 9);\n  if (B) spr(S, BOSS, round(B.x) - 28, round(B.y), (B.st === 2 ? floor(t * 16) % 2 : B.fl > 0 && floor(t * 20) % 4 === 0) ? 1 : 0, [120 + 135 * f + 60 * p, 230 - 170 * f + 25 * p * (1 - f), 255 - 215 * f]);\n  for (const ex of [3, 5])\n    for (let j = 0, L = 2 + ((t * 24 + ex) % 3 | 0), c; j \u003c L; j++) put(buf, round(P.x) - 4 + ex, round(P.y) + 5 + j, 255 - 12 * (c = min(3, j + (L \u003c 3))) * c, 255 - 65 * c, 220 - 70 * c);\n  spr(S, PLAYER, round(P.x) - 4, round(P.y) - 5, 0);\n  for (const s of S.ps) for (let j = 0; j \u003c 3; j++) put(buf, s.x, s.y + j, 255, 255 - 28 * j, 230 - 85 * j);\n  // Explosions: a white flash, a ring cooling from yellow to red, sparks.\n  for (const f of S.fx) {\n    const a = (t - f.t0) / f.d, R = (1.5 + 4.5 * a) * f.s;\n    if (a \u003c 0.16) ring(buf, f.x, f.y, (1 + 10 * a) * f.s, 0, [255, 255, 235]);\n    else if (a \u003c 0.5) ring(buf, f.x, f.y, R * 0.5, 0, [255, a \u003c 0.3 ? 210 : 120, 40]);\n    if (a >= 0.16) ring(buf, f.x, f.y, R, 0.75, a \u003c 0.45 ? [255, 220, 80] : a \u003c 0.72 ? [255, 130, 30] : [180, 46, 24]);\n    for (let i = 0; a \u003c 0.85 && i \u003c f.sp.length; i += 2) put(buf, f.x + f.sp[i] * a * f.d, f.y + f.sp[i + 1] * a * f.d, 255, 245, 170);\n  }\n  for (const b of S.eb) {\n    const c = BUL[b.c];\n    for (let i = 0; i \u003c 9; i++) if (i % 2 || (b.big && i !== 4)) put(buf, b.x + (i % 3) - 1, b.y + floor(i / 3) - 1, ...c.map((v) => (i % 2 ? v : v * 0.6)));\n    put(buf, b.x, b.y, 255, 255, 255);\n  }\n  for (const p of S.pop) {\n    const a = (t - p.t0) / 0.9;\n    if (a \u003c 0.75 || floor(t * 20) % 2) number(buf, p.v, round(p.x - String(p.v).length * 2), round(p.y - a * 9), 255, 240, 120);\n  }\n  if (t - S.bomb \u003c 1) ring(buf, P.x, P.y, (t - S.bomb) * 150, 1.6, [200, 250, 255]);\n  for (let i = 0; S.flash > 0 && i \u003c N * 3; i++) buf[i] += (255 - buf[i]) * min(1, S.flash) * 0.85;\n  for (let i = 0; i \u003c 7 * W; i++) if (i % W \u003c 26 || i % W >= 50) mix(buf, i * 3, 0, 0, 0, 0.82);\n  number(buf, String(S.score % 1e6).padStart(6, \"0\"), 1, 1, 255, 255, 255);\n  number(buf, \"AAA\", 52, 1, 220, 228, 240);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stage","min":0,"max":1,"about":"Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in."},{"name":"Waves","min":1,"max":5,"about":"From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats."},{"name":"Bullets","min":0,"max":1,"about":"How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read."}],"start":[0,2,1,0.06],"measures":{"motion":1.2251,"detail":0.0672,"edges":0.7429,"complexity":0.308,"coverage":0.995,"colour":0.3654,"drift":0.1128},"knobResponse":[0.2583,0.2156,0.0612,0.0985]},{"slug":"shoreline","title":"Shoreline","family":"ocean","round":17,"note":"드론으로 곧장 내려다본 해변이에요. 비스듬히 밀려온 너울이 모래톱 위에서 하얗게 부서지고 골에서 다시 일어나 기슭에서 한 번 더 부서진 뒤, 레이스 같은 거품 끝을 단 채 모래를 타고 올라갔다 물러나며 젖은 모래의 어두운 윤기를 남겨요.","idea":"A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","layer":{"id":"layer-shoreline","type":"code","name":"shoreline","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds."},{"name":"Height","min":1,"max":3,"about":"Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white."},{"name":"Tide","min":-1,"max":1,"about":"At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore."}],"start":[0,2,1,0.06],"measures":{"motion":0.1312,"detail":0.0226,"edges":0.2179,"complexity":0.5021,"coverage":1,"colour":0.3833,"drift":0.0432},"knobResponse":[0.2028,0.0707,0.0565,0.1108]},{"slug":"skein","title":"Skein","family":"bird","round":23,"note":"해 진 뒤 하늘을 올려다보면 기러기 떼가 V 자로 패널 위쪽, 북쪽으로 날아가요. 지친 선두가 한쪽 줄로 물러나면 다른 기러기가 앞에 서고, 커다란 보름달 앞을 지날 때는 새카만 실루엣이 돼요. 뒤따라온 작은 떼가 꼬리에 붙기도 해요.","idea":"Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.","buttons":"K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.","code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","layer":{"id":"layer-skein","type":"code","name":"skein","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower."},{"name":"Geese","min":7,"max":31,"about":"How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller."},{"name":"Wind","min":-1,"max":1,"about":"A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too."}],"start":[0,2,7,0.06],"measures":{"motion":0.2572,"detail":0.0301,"edges":0.4436,"complexity":1.9214,"coverage":0.9745,"colour":0.3836,"drift":0.0616},"knobResponse":[0.2529,0.0352,0.0331,0.0516]},{"slug":"skydiver","title":"Skydiver","family":"flight","round":25,"note":"강하장 위로 점프기가 지나가며 문에서 다이버들을 내보내요. 다이버들은 구름층을 뚫고 내려가 손을 잡아 고리를 만들었다가 흩어지고, 저마다 색 램에어 캐노피를 펴서 나선을 그리며 들판의 착지 원으로 내려와요. K1 을 끝까지 돌리면 해가 지평선에 걸린 노을 점프가 되고, K1 을 누르면 다음 비행기가 바로 들어와요.","idea":"A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.","buttons":"K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.","code":"// ===== Patternflow pattern =====\n// Title:   Skydiver\n// Family:  flight\n// Idea:    A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after formation skydiving loads at a drop zone\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1\n//\n// Knob 1: Hour. A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light.\n// Knob 2: Speed. At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower.\n// Knob 3: Divers. How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down.\n// Knob 4: Wind. The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you.\n// Buttons: K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the plane's fuselage, the flat base of the cloud deck, the horizon, the landing field.\nconst [PY, DB, HZ, GL] = [8, 30, 101, 118];\n// Depth goes onto the screen at this scale, nearer is lower; canopies are seen flatter.\nconst [ZS, ZC] = [0.55, 0.3];\n// Terminal velocity and the plane's speed in LEDs a second, the target, the windsock, seconds between loads.\nconst [VT, PV, TX, WX, CYCLE] = [8.5, 14, 34, 57, 15];\n// Sky top, middle, horizon; sun; lit and shaded cloud; daylight. Midday to sunset.\nconst KEYS = [\n  [8, 28, 104, 18, 62, 148, 112, 158, 204, 255, 250, 225, 252, 252, 255, 150, 162, 190, 1, 1, 1],\n  [12, 34, 112, 56, 96, 172, 196, 190, 184, 255, 226, 160, 255, 238, 210, 146, 140, 170, 1, 0.92, 0.8],\n  [20, 24, 90, 104, 84, 146, 255, 160, 84, 255, 186, 100, 255, 194, 136, 126, 96, 136, 1, 0.78, 0.58],\n  [12, 12, 50, 96, 46, 104, 255, 104, 44, 255, 136, 56, 255, 136, 96, 82, 54, 92, 0.86, 0.56, 0.42],\n];\nconst CAN = [[255, 30, 60], [255, 214, 0], [20, 110, 255], [255, 50, 190], [80, 235, 40], [255, 120, 0], [0, 220, 235], [150, 60, 255], [245, 245, 245], [255, 80, 80], [20, 190, 110], [255, 160, 200]];\nconst SUIT = [[255, 220, 40], [240, 40, 40], [40, 200, 255], [250, 250, 250], [255, 110, 0], [190, 70, 255], [60, 230, 90], [255, 80, 180]];\nconst HELM = [[250, 250, 250], [30, 30, 36], [255, 200, 0], [230, 40, 40]];\nconst STRIPE = [[200, 30, 40], [20, 70, 170], [230, 150, 0]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = { t: 0, rt: 0, loads: [], next: 0, cx: 0, w: 0, f: F32(N * 3), bg: F32(N * 3), key: -1, top: F32(128), far: F32(128) });\n  // Cumulus along a strip that wraps every 128 columns, each a cluster of round puffs: the deck and the far ones.\n  for (const [T, nc, sz] of [[P.top, 4, 1], [P.far, 6, 0.5]])\n    for (let k = 0; k \u003c nc; k++) {\n      const c = (k * 128) / nc + rnd() * 8, wd = (14 + rnd() * 14) * sz, hm = (5 + rnd() * 7) * sz;\n      for (let j = 0; j \u003c 11; j++) {\n        // Bubbles stacked higher towards the middle of the cloud.\n        const u = rnd() * 2 - 1, r = (2 + rnd() * 3.2) * (sz + 0.3) * 0.75, px = c + u * (wd / 2 - r * 0.5), e = max(0, (hm - r) * (1 - u * u) * (0.5 + 0.5 * rnd()));\n        for (let x = 0; x \u003c 128; x++) {\n          const dx = ((((x - px) % 128) + 192) % 128) - 64;\n          // A round top, and shoulders sloping down to the base.\n          const ax = abs(dx);\n          if (ax \u003c r + e) T[x] = max(T[x], ax \u003c r ? e + Math.sqrt(r * r - dx * dx) : e + r - ax);\n        }\n      }\n    }\n}\n\nconst shuffle = (n) => {\n  const a = [...Array(n).keys()];\n  for (let i = n - 1; i > 0; i--) {\n    const j = floor(rnd() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n};\n\n// A load: the plane runs in against the wind and puts the ring upwind of the target.\nfunction spawn(P, n, btn) {\n  // A big load gets out of the door faster, so every ring has the same time to build.\n  const w = P.w, dir = w >= 0 ? -1 : 1, len = 17 + n, ex = (0.5 + 0.06 * n) / (n - 1), half = ((n - 1) * ex) / 2, x0 = dir \u003c 0 ? 66 : -2;\n  const te0 = btn ? 1.3 : max(1.3, (dir * (31 - 12 * w - x0) + len - 12) / PV - half);\n  const cx = x0 + dir * PV * (te0 + half) - dir * (len - 12), ci = shuffle(CAN.length), si = shuffle(SUIT.length), rk = shuffle(n), lp = shuffle(n);\n  const d = [];\n  for (let i = 0; i \u003c n; i++) {\n    // Exit time, canopy colours (white or a second colour in the middle cells), suit, helmet,\n    // descent rate under canopy, which way the spiral turns, and the spot on the field.\n    d.push({\n      i, te: te0 + i * ex, st: 0, x: 0, y: 0, z: 0, h: 0, g: 0, o: 0, rank: rk[i], can: ci[i], cb: rnd() \u003c 0.5 ? 8 : ci[(i + 5) % 12], suit: si[i % 8], helm: floor(rnd() * 4),\n      zd: rnd() * 2 - 1, k: 2.2 + rnd() * 1.2, om: (rnd() \u003c 0.5 ? -1 : 1) * (0.8 + rnd() * 0.4), lx: TX + (lp[i] / (n - 1) - 0.5) * 26 + rnd() * 2, lz: rnd() * 12 - 4,\n    });\n  }\n  P.loads.push({ t: 0, n, dir, len, x0, te0, cx, px: x0, rot0: rnd() * TAU, rr: 4.6 / sin(PI / n), tb: te0 + 2 * half + 4.2, d, sc: STRIPE[floor(rnd() * 3)] });\n  if (P.loads.length > 4) P.loads.shift();\n}\n\nconst fall = (s) => (s \u003c= 0 ? 0 : VT * (s - (1 - exp(-1.5 * s)) / 1.5));\nconst thr = (s) => (s \u003c= 0 ? 0 : (PV * (1 - exp(-1.4 * s))) / 1.4);\n\nfunction runLoad(P, L, d) {\n  const T = (L.t += d), w = P.w, dir = L.dir, n = L.n;\n  L.px = L.x0 + dir * PV * T;\n  const s0 = T - L.te0, ccx = L.cx + w * 2 * max(0, s0), ccy = PY + 3 + fall(s0 - 0.15), rot = L.rot0 + 0.25 * s0;\n  const hf = atan2(1 - 0.9 * abs(w), -w), cf = cos(hf), sf = sin(hf);\n  for (const D of L.d) {\n    if (!D.st && T >= D.te) (D.st = 1), (D.xd = L.x0 + dir * PV * D.te - dir * (L.len - 6));\n    if (D.st === 1 && T >= L.tb) {\n      // Break-off: where the ring was, frozen, then turn away and track out.\n      const sb = L.tb - L.te0, th = L.rot0 + 0.25 * sb + (TAU * D.i) / n;\n      Object.assign(D, { st: 2, th, bx: L.cx + w * 2 * sb + L.rr * cos(th), bz: L.rr * sin(th), by: PY + 3 + fall(sb - 0.15) });\n    }\n    if (D.st === 1) {\n      const s = T - D.te, th = rot + (TAU * D.i) / n, g = sm(0.4, 2.3, s);\n      D.x = mix(D.xd + dir * thr(s) + w * 2 * s, ccx + L.rr * cos(th), g);\n      D.y = mix(PY + 3 + fall(s), ccy, g);\n      D.z = mix(D.zd, L.rr * sin(th), g);\n      D.h = th + PI;\n      D.g = g;\n    } else if (D.st === 2) {\n      const sb = T - L.tb, out = (10 + 0.6 * n) * (1 - exp(-1.1 * sb));\n      D.x = cl(D.bx + cos(D.th) * out, 2, 61);\n      D.z = D.bz + sin(D.th) * out * 0.6;\n      D.y = D.by + 9.5 * sb;\n      D.h = D.th + PI + PI * sm(0, 0.6, sb);\n      D.g = 0;\n      if (sb >= 0.7 + (1.4 * D.rank) / (n - 1)) Object.assign(D, { st: 3, td: T, yd: D.y, vy: 9.5, ax: D.x, az: D.z, h0: D.h });\n    } else if (D.st === 3) {\n      // Under canopy: open, slow down, spiral in over the field and turn to land.\n      const sc = T - D.td;\n      D.o = min(1, sc / 0.9);\n      D.vy += ((D.y > GL - 5 ? 1.3 : D.o > 0.55 ? D.k : 9.5) - D.vy) * min(1, 5 * d);\n      D.y += D.vy * d;\n      const pr = cl((D.y - D.yd) / (GL - D.yd), 0, 1), fx = D.lx - cf * 8, fz = D.lz - sf * 8;\n      if (pr \u003c 0.8) {\n        const e = sm(0, 0.8, pr), r = 13 * sin(PI * (pr / 0.8)) ** 0.6, h = D.h0 + D.om * sc, sg = D.om > 0 ? 1 : -1;\n        // The wind carries the spiral downwind on the way down, and the last turn brings it back.\n        D.x = mix(D.ax, fx, e) + sg * r * sin(h) + w * 12 * sin(PI * e);\n        D.z = mix(D.az, fz, e) - sg * r * cos(h);\n        const b = sm(0.65, 0.8, pr);\n        D.h = atan2(mix(sin(h), sf, b), mix(cos(h), cf, b));\n      } else {\n        const q = sm(0.8, 1, pr);\n        (D.x = mix(fx, D.lx, q)), (D.z = mix(fz, D.lz, q)), (D.h = hf);\n      }\n      D.x = cl(D.x, 3, 60);\n      D.fl = sm(GL - 5, GL, D.y);\n      if (D.y >= GL) Object.assign(D, { st: 4, tl: T, y: GL, x: D.lx, z: D.lz, h: hf });\n    } else if (D.st === 4 && T - D.tl > 7.5) D.st = 5;\n  }\n}\n\nfunction tick(P, d, n) {\n  P.t += d;\n  P.cx += (3.2 + 9 * P.w) * d;\n  if ((P.next -= d) \u003c= 0) spawn(P, n, 0), (P.next += CYCLE);\n  for (const L of P.loads) runLoad(P, L, d);\n  P.loads = P.loads.filter((L) => L.t \u003c 60 && L.d.some((D) => D.st \u003c 5));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), n = round(cl(k[2], 5, 12));\n  P.w = cl(k[3], -1, 1);\n  P.h = cl(k[0], 0, 1);\n  P.rt += rd;\n  // One load landing, one high under canopy, and the third plane on its run.\n  if (!P.ready) {\n    P.ready = 1;\n    P.next = 1e9;\n    for (const s of [0, 19, 30, 32.5]) {\n      while (P.t \u003c s - 1e-6) tick(P, 1 / 15, n);\n      s \u003c 32 && spawn(P, n, 0);\n    }\n    P.next = CYCLE - 2.5;\n  }\n  if (input.btnPressed && input.btnPressed[0]) spawn(P, n, 1), (P.next = CYCLE);\n  tick(P, d, n);\n}\n\nlet F, LT, K;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1) {\n  const o = at(x, y);\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction seg(x0, y0, x1, y1, c, a = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1;\n  for (let i = 0; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c, a);\n}\nconst lit = (c, k = 1) => [c[0] * LT[0] * k, c[1] * LT[1] * k, c[2] * LT[2] * k];\nconst KC = (i) => [K[i], K[i + 1], K[i + 2]];\n\n// Sky, sun, hills and the drop zone, kept until the hour moves.\nfunction backdrop(P) {\n  const B = P.bg, h = P.h, key = round(h * 300);\n  if (key === P.key) return;\n  P.key = key;\n  const zen = KC(0), mid = KC(3), hor = KC(6), sun = KC(9), sy = mix(-16, 90, sm(0.3, 1, h));\n  const FIELDS = [[74, 124, 44], [112, 140, 52], [150, 146, 72], [60, 104, 48], [126, 112, 64]];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    let c;\n    const hill = HZ - 1.5 - 2.5 * vn(x * 0.09, 50);\n    if (y \u003c hill) {\n      const f = y / HZ, u = f \u003c 0.6 ? sm(0, 1, f / 0.6) : ((f - 0.6) / 0.4) ** 1.6;\n      c = f \u003c 0.6 ? zen.map((v, j) => mix(v, mid[j], u)) : mid.map((v, j) => mix(v, hor[j], u));\n      const ds = Math.hypot(x - 47, (y - sy) * 1.1), g = 0.5 * exp(-ds / 9) + 0.25 * exp(-ds / 30);\n      c = ds \u003c 3.6 ? sun : c.map((v, j) => v + sun[j] * g * (0.4 + 0.6 * h));\n    } else if (y \u003c HZ) {\n      c = lit(hor.map((v, j) => mix(v, [44, 72, 70][j], 0.6)));\n    } else {\n      const zf = y - HZ + 2, gx = ((x - 32) * 24) / zf, gz = 260 / zf;\n      if (y >= 104 && y \u003c= 106) c = y === 105 && (floor(gx / 5) & 3) === 0 ? [220, 220, 220] : [92, 92, 98];\n      else if (y >= 109) c = [70, 150, 48].map((v) => v * (floor(gx / 7) & 1 ? 0.86 : 1));\n      else c = FIELDS[floor(hash(floor(gx / 40 + 60), floor(gz / 22)) * 5)];\n      const e = ((x - TX) / 11) ** 2 + ((y - GL) / 3.6) ** 2;\n      if (e \u003c 1) c = e \u003c 0.07 ? [245, 245, 245] : [204, 182, 132].map((v) => v * (e > 0.6 ? 0.84 : 1));\n      c = lit(c).map((v, j) => mix(v, hor[j], exp(-(zf - 2) / 4) * 0.65));\n    }\n    // The hangar by the runway, its door open.\n    if (x >= 3 && x \u003c= 16 && y \u003c= 105 && y >= 97 + ((x - 9.5) / 6.5) ** 2 * 3) c = lit(x > 6 && x \u003c 13 && y > 100 ? [34, 34, 42] : [196, 196, 204], y \u003c 99 ? 1.08 : 1);\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  }\n}\n\n// The far cumulus sitting on the horizon haze.\nfunction farClouds(P) {\n  const lt = KC(12), sh = KC(15), hor = KC(6);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x * 0.9 + P.cx * 0.6 + 40, i = floor(xx), f = xx - i, hgt = mix(P.far[i & 127], P.far[(i + 1) & 127], f);\n    for (let y = floor(98 - hgt); y \u003c= 98; y++) {\n      const u = (98 - y) / max(1, hgt), c = sh.map((v, j) => mix(mix(v, lt[j], cl(u * 1.3, 0, 1)), hor[j], 0.35));\n      put(x, y, c, cl(y - (98 - hgt) + 0.5, 0, 1) * 0.92);\n    }\n  }\n}\n\n// The deck the divers fall through: domes on top, a flat grey base.\nfunction deck(P) {\n  const lt = KC(12), sh = KC(15);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x + P.cx + 7, i = floor(xx), f = xx - i, hgt = mix(P.top[i & 127], P.top[(i + 1) & 127], f);\n    if (hgt \u003c 0.3) continue;\n    for (let y = floor(DB - hgt); y \u003c= DB; y++) {\n      const u = (DB - y) / max(1, hgt), b = cl(u * 1.15 + (vn(xx * 0.35, y * 0.4) - 0.5) * 0.6, 0, 1);\n      put(x, y, sh.map((v, j) => mix(v, lt[j], b)), cl(y - (DB - hgt) + 0.5, 0, 1) * (y === DB ? 0.7 : 0.95));\n    }\n  }\n}\n\nfunction plane(P, L) {\n  const { len, dir, px } = L, X = (u) => px - dir * (len - u), body = lit([236, 236, 242]), belly = lit([168, 170, 180]), glass = lit([50, 74, 110]), dark = [22, 22, 28];\n  for (let u = -1; u \u003c= len; u += 0.5) {\n    const x = X(u);\n    if (u \u003c 4.5) for (let y = PY - 2 - (u \u003c 2 ? 5 : 5 - (u - 2) * 2); y \u003c PY - 2; y++) put(x, y, body);\n    if (u \u003c 3.5) put(x, PY - 1, belly);\n    if (u \u003c 1) continue;\n    const bot = u \u003c 7 ? PY + 1 - (7 - u) * 0.45 : PY + 1, top = u > len - 3 ? PY - 2 + (u - len + 3) * 0.7 : PY - 2;\n    for (let y = ceil(top); y \u003c= bot; y++) put(x, y, y === PY ? lit(L.sc) : y > PY ? belly : body);\n  }\n  for (let u = 9; u \u003c len - 5; u += 2) put(X(u), PY - 1, glass);\n  put(X(len - 2), PY - 1, glass), put(X(len - 3), PY - 1, glass);\n  for (let u = len * 0.42; u \u003c= len * 0.66; u += 0.5) put(X(u), PY - 3, lit([214, 216, 224]));\n  for (let u = len * 0.6; u \u003c= len * 0.74; u += 0.5) put(X(u), PY - 2, lit([150, 150, 160]));\n  for (let y = PY - 5; y \u003c= PY; y++) put(X(len * 0.77), y, [220, 220, 230], 0.25 + 0.2 * rnd());\n  put(X(len * 0.55), PY + 2, dark), put(X(len - 2), PY + 2, dark);\n  // The door is open on the run in, with the next diver crouched in it.\n  const next = L.d.find((D) => !D.st);\n  if (next && L.t > L.te0 - 1.6) {\n    for (let u = 4.5; u \u003c= 6.5; u += 0.5) for (let y = PY - 1; y \u003c= PY + 1; y++) put(X(u), y, dark);\n    put(X(6), PY, lit(SUIT[next.suit])), put(X(6), PY - 1, lit(HELM[next.helm]));\n  }\n  if ((P.rt * 1.4) % 1 \u003c 0.25) put(X(len * 0.5), PY - 4, [255, 40, 30]);\n}\n\n// A diver in freefall seen from above and behind: spread arms and legs, the rig on the back, the helmet.\nconst bp = (D, a, b) => {\n  const c = cos(D.h) * 1.3, s = sin(D.h) * 1.3;\n  return [D.x + c * a - s * b, D.y + (D.z + s * a + c * b) * ZS];\n};\nfunction diver(D) {\n  const sc = lit(SUIT[D.suit]), ln = (a, b) => seg(...bp(D, ...a), ...bp(D, ...b), sc);\n  for (const m of [-1, 1]) {\n    ln([-0.9, 0.4 * m], [-2.8, 1.6 * m]);\n    if (D.g \u003c 0.97) ln([0.9, 0.8 * m], [2.1, 2.3 * m]);\n  }\n  ln([-0.9, 0], [0.9, 0]), ln([0.9, -0.9], [0.9, 0.9]);\n  put(...bp(D, -0.1, 0), [26, 26, 32]);\n  put(...bp(D, 1.9, 0), lit(HELM[D.helm]));\n}\n\n// A canopy: cells, lines, the jumper in the harness. On the ground it falls in behind the jumper, who gathers it up.\nfunction canopy(D, T) {\n  const sx = D.x, sy = D.y + D.z * ZS, ca = CAN[D.can], cb = CAN[D.cb], down = D.st === 4, sl = down ? T - D.tl : 0, a = 1 - sm(5.5, 7.5, sl);\n  const suit = lit(SUIT[D.suit]);\n  if (!down && D.o \u003c 0.3) {\n    // Pilot chute and bag going up.\n    seg(sx, sy - 1, sx, sy - 2 - D.o * 22, lit([200, 200, 210]), 0.5), put(sx, sy - 2 - D.o * 22, lit([245, 245, 245]));\n    put(sx, sy - 1, lit(HELM[D.helm])), put(sx, sy, suit), put(sx + 1, sy, suit);\n    return;\n  }\n  const kk = down ? 1 : sm(0.25, 0.8, D.o), pop = 1 + 0.18 * sin(PI * sm(0.55, 1, D.o)), c = sm(0, 1.2, sl);\n  const ch = cos(D.h), shh = sin(D.h), zm = 1 + D.z * 0.015, hs = (1 + 5.2 * kk) * pop * mix(1, 0.75, c) * zm, lr = (2 + 6 * kk) * (1 - c) * zm + 0.5 * c;\n  const ox = down ? -ch * 4 * c : 0, oy = down ? -shh * 4 * c * ZS : 0, cy = sy - 1.5 - lr + oy, droop = mix(1.1, 0.2, c) + D.fl * 0.6;\n  const svx = -shh * hs, svy = ch * hs * ZC, fx = ch * 2 * zm, fy = shh * 2 * ZC * (1 - c);\n  if (!down || c \u003c 1) for (const t of [-0.9, -0.35, 0.35, 0.9]) seg(sx, sy - 1.5, sx + ox + svx * t, cy + svy * t + droop * t * t + 1, lit([210, 210, 220]), 0.3 * a);\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let t = -1; t \u003c= 1; t += 0.45 / hs) {\n      const cell = min(8, floor((t + 1) * 4.5)), col = cell > 2 && cell \u003c 6 ? cb : ca, k = (cell & 1 ? 0.8 : 1) * (pass ? 1 : 0.5) * (1.12 - 0.12 * pop);\n      for (let q = -1; q \u003c= 1; q += 0.5) put(sx + ox + svx * t + fx * q, cy + svy * t + fy * q + droop * t * t + (pass ? 0 : 1), lit(col, k * (0.92 + 0.08 * q)), a);\n    }\n  put(sx, sy - 2, lit(HELM[D.helm]), a), put(sx, sy - 1, suit, a), put(sx + (D.fl > 0.3 ? 1 : 0), sy, suit.map((v) => v * 0.7), a);\n}\n\nfunction sock(P) {\n  const w = P.w, aw = abs(w), sx = w >= 0 ? 1 : -1;\n  for (let y = 104; y \u003c= 116; y++) put(WX, y, lit([200, 200, 206]));\n  for (let u = 0; u \u003c= 6; u += 0.5) {\n    const x = WX + sx * u * (0.3 + 0.7 * aw), y = 104 + u * (1 - aw) * 0.85 + sin(P.rt * 9 - u) * 0.35 * aw, col = lit(floor(u / 1.5) & 1 ? [240, 240, 240] : [255, 110, 20]);\n    put(x, y, col), u \u003c 4 && put(x, y + 1, col, 0.8);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  F = P.f;\n  const hh = P.h * 3, i0 = min(2, floor(hh));\n  K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  LT = KC(18);\n  backdrop(P);\n  F.set(P.bg);\n  // Cloud shadows crossing the fields.\n  for (let y = HZ; y \u003c H; y++) {\n    const zf = y - HZ + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const v = vn((((x - 32) * 24) / zf - P.cx * 1.1) * 0.035, (260 / zf) * 0.05), k = 1 - 0.5 * sm(0.45, 0.58, v), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n  farClouds(P);\n  sock(P);\n  const A = [];\n  for (const L of P.loads) for (const D of L.d) if (D.st === 4) canopy(D, L.t);\n  for (const L of P.loads) if (L.px > -40 && L.px \u003c 104) plane(P, L);\n  for (const L of P.loads) for (const D of L.d) if (D.st && D.st \u003c 4) A.push([D, L]);\n  A.sort((a, b) => a[0].z - b[0].z);\n  for (const [D, L] of A) {\n    if (D.st === 3) canopy(D, L.t);\n    else {\n      diver(D);\n      // Grips: the arms of two docked neighbours meet between them.\n      const E = L.d[(D.i + 1) % L.n];\n      if (D.st === 1 && E.st === 1 && D.g > 0.97 && E.g > 0.97) {\n        const d2 = (u, v) => (u[0] - v[0]) ** 2 + (u[1] - v[1]) ** 2, [a, b, c, e] = [bp(D, 0.9, -0.9), bp(D, 0.9, 0.9), bp(E, 0.9, -0.9), bp(E, 0.9, 0.9)];\n        const p = d2(a, c) + d2(a, e) \u003c d2(b, c) + d2(b, e) ? a : b, q = d2(p, c) \u003c d2(p, e) ? c : e;\n        const m = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];\n        seg(...p, ...m, lit(SUIT[D.suit])), seg(...m, ...q, lit(SUIT[E.suit]));\n      }\n    }\n  }\n  deck(P);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-skydiver","type":"code","name":"skydiver","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Skydiver\n// Family:  flight\n// Idea:    A jump plane crosses the top of the sky and lets out a load of skydivers who punch down through the cloud deck, take grips in a ring, break off and open their ram-air canopies, then spiral down to the target circle on the drop zone while the next load is already on its way up.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after formation skydiving loads at a drop zone\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1\n//\n// Knob 1: Hour. A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light.\n// Knob 2: Speed. At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower.\n// Knob 3: Divers. How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down.\n// Knob 4: Wind. The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you.\n// Buttons: K1 tap brings the next load in at once, and its divers go as soon as the door is over the field.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, exp, atan2, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Rows: the plane's fuselage, the flat base of the cloud deck, the horizon, the landing field.\nconst [PY, DB, HZ, GL] = [8, 30, 101, 118];\n// Depth goes onto the screen at this scale, nearer is lower; canopies are seen flatter.\nconst [ZS, ZC] = [0.55, 0.3];\n// Terminal velocity and the plane's speed in LEDs a second, the target, the windsock, seconds between loads.\nconst [VT, PV, TX, WX, CYCLE] = [8.5, 14, 34, 57, 15];\n// Sky top, middle, horizon; sun; lit and shaded cloud; daylight. Midday to sunset.\nconst KEYS = [\n  [8, 28, 104, 18, 62, 148, 112, 158, 204, 255, 250, 225, 252, 252, 255, 150, 162, 190, 1, 1, 1],\n  [12, 34, 112, 56, 96, 172, 196, 190, 184, 255, 226, 160, 255, 238, 210, 146, 140, 170, 1, 0.92, 0.8],\n  [20, 24, 90, 104, 84, 146, 255, 160, 84, 255, 186, 100, 255, 194, 136, 126, 96, 136, 1, 0.78, 0.58],\n  [12, 12, 50, 96, 46, 104, 255, 104, 44, 255, 136, 56, 255, 136, 96, 82, 54, 92, 0.86, 0.56, 0.42],\n];\nconst CAN = [[255, 30, 60], [255, 214, 0], [20, 110, 255], [255, 50, 190], [80, 235, 40], [255, 120, 0], [0, 220, 235], [150, 60, 255], [245, 245, 245], [255, 80, 80], [20, 190, 110], [255, 160, 200]];\nconst SUIT = [[255, 220, 40], [240, 40, 40], [40, 200, 255], [250, 250, 250], [255, 110, 0], [190, 70, 255], [60, 230, 90], [255, 80, 180]];\nconst HELM = [[250, 250, 250], [30, 30, 36], [255, 200, 0], [230, 40, 40]];\nconst STRIPE = [[200, 30, 40], [20, 70, 170], [230, 150, 0]];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = { t: 0, rt: 0, loads: [], next: 0, cx: 0, w: 0, f: F32(N * 3), bg: F32(N * 3), key: -1, top: F32(128), far: F32(128) });\n  // Cumulus along a strip that wraps every 128 columns, each a cluster of round puffs: the deck and the far ones.\n  for (const [T, nc, sz] of [[P.top, 4, 1], [P.far, 6, 0.5]])\n    for (let k = 0; k \u003c nc; k++) {\n      const c = (k * 128) / nc + rnd() * 8, wd = (14 + rnd() * 14) * sz, hm = (5 + rnd() * 7) * sz;\n      for (let j = 0; j \u003c 11; j++) {\n        // Bubbles stacked higher towards the middle of the cloud.\n        const u = rnd() * 2 - 1, r = (2 + rnd() * 3.2) * (sz + 0.3) * 0.75, px = c + u * (wd / 2 - r * 0.5), e = max(0, (hm - r) * (1 - u * u) * (0.5 + 0.5 * rnd()));\n        for (let x = 0; x \u003c 128; x++) {\n          const dx = ((((x - px) % 128) + 192) % 128) - 64;\n          // A round top, and shoulders sloping down to the base.\n          const ax = abs(dx);\n          if (ax \u003c r + e) T[x] = max(T[x], ax \u003c r ? e + Math.sqrt(r * r - dx * dx) : e + r - ax);\n        }\n      }\n    }\n}\n\nconst shuffle = (n) => {\n  const a = [...Array(n).keys()];\n  for (let i = n - 1; i > 0; i--) {\n    const j = floor(rnd() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n};\n\n// A load: the plane runs in against the wind and puts the ring upwind of the target.\nfunction spawn(P, n, btn) {\n  // A big load gets out of the door faster, so every ring has the same time to build.\n  const w = P.w, dir = w >= 0 ? -1 : 1, len = 17 + n, ex = (0.5 + 0.06 * n) / (n - 1), half = ((n - 1) * ex) / 2, x0 = dir \u003c 0 ? 66 : -2;\n  const te0 = btn ? 1.3 : max(1.3, (dir * (31 - 12 * w - x0) + len - 12) / PV - half);\n  const cx = x0 + dir * PV * (te0 + half) - dir * (len - 12), ci = shuffle(CAN.length), si = shuffle(SUIT.length), rk = shuffle(n), lp = shuffle(n);\n  const d = [];\n  for (let i = 0; i \u003c n; i++) {\n    // Exit time, canopy colours (white or a second colour in the middle cells), suit, helmet,\n    // descent rate under canopy, which way the spiral turns, and the spot on the field.\n    d.push({\n      i, te: te0 + i * ex, st: 0, x: 0, y: 0, z: 0, h: 0, g: 0, o: 0, rank: rk[i], can: ci[i], cb: rnd() \u003c 0.5 ? 8 : ci[(i + 5) % 12], suit: si[i % 8], helm: floor(rnd() * 4),\n      zd: rnd() * 2 - 1, k: 2.2 + rnd() * 1.2, om: (rnd() \u003c 0.5 ? -1 : 1) * (0.8 + rnd() * 0.4), lx: TX + (lp[i] / (n - 1) - 0.5) * 26 + rnd() * 2, lz: rnd() * 12 - 4,\n    });\n  }\n  P.loads.push({ t: 0, n, dir, len, x0, te0, cx, px: x0, rot0: rnd() * TAU, rr: 4.6 / sin(PI / n), tb: te0 + 2 * half + 4.2, d, sc: STRIPE[floor(rnd() * 3)] });\n  if (P.loads.length > 4) P.loads.shift();\n}\n\nconst fall = (s) => (s \u003c= 0 ? 0 : VT * (s - (1 - exp(-1.5 * s)) / 1.5));\nconst thr = (s) => (s \u003c= 0 ? 0 : (PV * (1 - exp(-1.4 * s))) / 1.4);\n\nfunction runLoad(P, L, d) {\n  const T = (L.t += d), w = P.w, dir = L.dir, n = L.n;\n  L.px = L.x0 + dir * PV * T;\n  const s0 = T - L.te0, ccx = L.cx + w * 2 * max(0, s0), ccy = PY + 3 + fall(s0 - 0.15), rot = L.rot0 + 0.25 * s0;\n  const hf = atan2(1 - 0.9 * abs(w), -w), cf = cos(hf), sf = sin(hf);\n  for (const D of L.d) {\n    if (!D.st && T >= D.te) (D.st = 1), (D.xd = L.x0 + dir * PV * D.te - dir * (L.len - 6));\n    if (D.st === 1 && T >= L.tb) {\n      // Break-off: where the ring was, frozen, then turn away and track out.\n      const sb = L.tb - L.te0, th = L.rot0 + 0.25 * sb + (TAU * D.i) / n;\n      Object.assign(D, { st: 2, th, bx: L.cx + w * 2 * sb + L.rr * cos(th), bz: L.rr * sin(th), by: PY + 3 + fall(sb - 0.15) });\n    }\n    if (D.st === 1) {\n      const s = T - D.te, th = rot + (TAU * D.i) / n, g = sm(0.4, 2.3, s);\n      D.x = mix(D.xd + dir * thr(s) + w * 2 * s, ccx + L.rr * cos(th), g);\n      D.y = mix(PY + 3 + fall(s), ccy, g);\n      D.z = mix(D.zd, L.rr * sin(th), g);\n      D.h = th + PI;\n      D.g = g;\n    } else if (D.st === 2) {\n      const sb = T - L.tb, out = (10 + 0.6 * n) * (1 - exp(-1.1 * sb));\n      D.x = cl(D.bx + cos(D.th) * out, 2, 61);\n      D.z = D.bz + sin(D.th) * out * 0.6;\n      D.y = D.by + 9.5 * sb;\n      D.h = D.th + PI + PI * sm(0, 0.6, sb);\n      D.g = 0;\n      if (sb >= 0.7 + (1.4 * D.rank) / (n - 1)) Object.assign(D, { st: 3, td: T, yd: D.y, vy: 9.5, ax: D.x, az: D.z, h0: D.h });\n    } else if (D.st === 3) {\n      // Under canopy: open, slow down, spiral in over the field and turn to land.\n      const sc = T - D.td;\n      D.o = min(1, sc / 0.9);\n      D.vy += ((D.y > GL - 5 ? 1.3 : D.o > 0.55 ? D.k : 9.5) - D.vy) * min(1, 5 * d);\n      D.y += D.vy * d;\n      const pr = cl((D.y - D.yd) / (GL - D.yd), 0, 1), fx = D.lx - cf * 8, fz = D.lz - sf * 8;\n      if (pr \u003c 0.8) {\n        const e = sm(0, 0.8, pr), r = 13 * sin(PI * (pr / 0.8)) ** 0.6, h = D.h0 + D.om * sc, sg = D.om > 0 ? 1 : -1;\n        // The wind carries the spiral downwind on the way down, and the last turn brings it back.\n        D.x = mix(D.ax, fx, e) + sg * r * sin(h) + w * 12 * sin(PI * e);\n        D.z = mix(D.az, fz, e) - sg * r * cos(h);\n        const b = sm(0.65, 0.8, pr);\n        D.h = atan2(mix(sin(h), sf, b), mix(cos(h), cf, b));\n      } else {\n        const q = sm(0.8, 1, pr);\n        (D.x = mix(fx, D.lx, q)), (D.z = mix(fz, D.lz, q)), (D.h = hf);\n      }\n      D.x = cl(D.x, 3, 60);\n      D.fl = sm(GL - 5, GL, D.y);\n      if (D.y >= GL) Object.assign(D, { st: 4, tl: T, y: GL, x: D.lx, z: D.lz, h: hf });\n    } else if (D.st === 4 && T - D.tl > 7.5) D.st = 5;\n  }\n}\n\nfunction tick(P, d, n) {\n  P.t += d;\n  P.cx += (3.2 + 9 * P.w) * d;\n  if ((P.next -= d) \u003c= 0) spawn(P, n, 0), (P.next += CYCLE);\n  for (const L of P.loads) runLoad(P, L, d);\n  P.loads = P.loads.filter((L) => L.t \u003c 60 && L.d.some((D) => D.st \u003c 5));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), n = round(cl(k[2], 5, 12));\n  P.w = cl(k[3], -1, 1);\n  P.h = cl(k[0], 0, 1);\n  P.rt += rd;\n  // One load landing, one high under canopy, and the third plane on its run.\n  if (!P.ready) {\n    P.ready = 1;\n    P.next = 1e9;\n    for (const s of [0, 19, 30, 32.5]) {\n      while (P.t \u003c s - 1e-6) tick(P, 1 / 15, n);\n      s \u003c 32 && spawn(P, n, 0);\n    }\n    P.next = CYCLE - 2.5;\n  }\n  if (input.btnPressed && input.btnPressed[0]) spawn(P, n, 1), (P.next = CYCLE);\n  tick(P, d, n);\n}\n\nlet F, LT, K;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1) {\n  const o = at(x, y);\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction seg(x0, y0, x1, y1, c, a = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.4 + 1;\n  for (let i = 0; i \u003c= n; i++) put(mix(x0, x1, i / n), mix(y0, y1, i / n), c, a);\n}\nconst lit = (c, k = 1) => [c[0] * LT[0] * k, c[1] * LT[1] * k, c[2] * LT[2] * k];\nconst KC = (i) => [K[i], K[i + 1], K[i + 2]];\n\n// Sky, sun, hills and the drop zone, kept until the hour moves.\nfunction backdrop(P) {\n  const B = P.bg, h = P.h, key = round(h * 300);\n  if (key === P.key) return;\n  P.key = key;\n  const zen = KC(0), mid = KC(3), hor = KC(6), sun = KC(9), sy = mix(-16, 90, sm(0.3, 1, h));\n  const FIELDS = [[74, 124, 44], [112, 140, 52], [150, 146, 72], [60, 104, 48], [126, 112, 64]];\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    let c;\n    const hill = HZ - 1.5 - 2.5 * vn(x * 0.09, 50);\n    if (y \u003c hill) {\n      const f = y / HZ, u = f \u003c 0.6 ? sm(0, 1, f / 0.6) : ((f - 0.6) / 0.4) ** 1.6;\n      c = f \u003c 0.6 ? zen.map((v, j) => mix(v, mid[j], u)) : mid.map((v, j) => mix(v, hor[j], u));\n      const ds = Math.hypot(x - 47, (y - sy) * 1.1), g = 0.5 * exp(-ds / 9) + 0.25 * exp(-ds / 30);\n      c = ds \u003c 3.6 ? sun : c.map((v, j) => v + sun[j] * g * (0.4 + 0.6 * h));\n    } else if (y \u003c HZ) {\n      c = lit(hor.map((v, j) => mix(v, [44, 72, 70][j], 0.6)));\n    } else {\n      const zf = y - HZ + 2, gx = ((x - 32) * 24) / zf, gz = 260 / zf;\n      if (y >= 104 && y \u003c= 106) c = y === 105 && (floor(gx / 5) & 3) === 0 ? [220, 220, 220] : [92, 92, 98];\n      else if (y >= 109) c = [70, 150, 48].map((v) => v * (floor(gx / 7) & 1 ? 0.86 : 1));\n      else c = FIELDS[floor(hash(floor(gx / 40 + 60), floor(gz / 22)) * 5)];\n      const e = ((x - TX) / 11) ** 2 + ((y - GL) / 3.6) ** 2;\n      if (e \u003c 1) c = e \u003c 0.07 ? [245, 245, 245] : [204, 182, 132].map((v) => v * (e > 0.6 ? 0.84 : 1));\n      c = lit(c).map((v, j) => mix(v, hor[j], exp(-(zf - 2) / 4) * 0.65));\n    }\n    // The hangar by the runway, its door open.\n    if (x >= 3 && x \u003c= 16 && y \u003c= 105 && y >= 97 + ((x - 9.5) / 6.5) ** 2 * 3) c = lit(x > 6 && x \u003c 13 && y > 100 ? [34, 34, 42] : [196, 196, 204], y \u003c 99 ? 1.08 : 1);\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  }\n}\n\n// The far cumulus sitting on the horizon haze.\nfunction farClouds(P) {\n  const lt = KC(12), sh = KC(15), hor = KC(6);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x * 0.9 + P.cx * 0.6 + 40, i = floor(xx), f = xx - i, hgt = mix(P.far[i & 127], P.far[(i + 1) & 127], f);\n    for (let y = floor(98 - hgt); y \u003c= 98; y++) {\n      const u = (98 - y) / max(1, hgt), c = sh.map((v, j) => mix(mix(v, lt[j], cl(u * 1.3, 0, 1)), hor[j], 0.35));\n      put(x, y, c, cl(y - (98 - hgt) + 0.5, 0, 1) * 0.92);\n    }\n  }\n}\n\n// The deck the divers fall through: domes on top, a flat grey base.\nfunction deck(P) {\n  const lt = KC(12), sh = KC(15);\n  for (let x = 0; x \u003c W; x++) {\n    const xx = x + P.cx + 7, i = floor(xx), f = xx - i, hgt = mix(P.top[i & 127], P.top[(i + 1) & 127], f);\n    if (hgt \u003c 0.3) continue;\n    for (let y = floor(DB - hgt); y \u003c= DB; y++) {\n      const u = (DB - y) / max(1, hgt), b = cl(u * 1.15 + (vn(xx * 0.35, y * 0.4) - 0.5) * 0.6, 0, 1);\n      put(x, y, sh.map((v, j) => mix(v, lt[j], b)), cl(y - (DB - hgt) + 0.5, 0, 1) * (y === DB ? 0.7 : 0.95));\n    }\n  }\n}\n\nfunction plane(P, L) {\n  const { len, dir, px } = L, X = (u) => px - dir * (len - u), body = lit([236, 236, 242]), belly = lit([168, 170, 180]), glass = lit([50, 74, 110]), dark = [22, 22, 28];\n  for (let u = -1; u \u003c= len; u += 0.5) {\n    const x = X(u);\n    if (u \u003c 4.5) for (let y = PY - 2 - (u \u003c 2 ? 5 : 5 - (u - 2) * 2); y \u003c PY - 2; y++) put(x, y, body);\n    if (u \u003c 3.5) put(x, PY - 1, belly);\n    if (u \u003c 1) continue;\n    const bot = u \u003c 7 ? PY + 1 - (7 - u) * 0.45 : PY + 1, top = u > len - 3 ? PY - 2 + (u - len + 3) * 0.7 : PY - 2;\n    for (let y = ceil(top); y \u003c= bot; y++) put(x, y, y === PY ? lit(L.sc) : y > PY ? belly : body);\n  }\n  for (let u = 9; u \u003c len - 5; u += 2) put(X(u), PY - 1, glass);\n  put(X(len - 2), PY - 1, glass), put(X(len - 3), PY - 1, glass);\n  for (let u = len * 0.42; u \u003c= len * 0.66; u += 0.5) put(X(u), PY - 3, lit([214, 216, 224]));\n  for (let u = len * 0.6; u \u003c= len * 0.74; u += 0.5) put(X(u), PY - 2, lit([150, 150, 160]));\n  for (let y = PY - 5; y \u003c= PY; y++) put(X(len * 0.77), y, [220, 220, 230], 0.25 + 0.2 * rnd());\n  put(X(len * 0.55), PY + 2, dark), put(X(len - 2), PY + 2, dark);\n  // The door is open on the run in, with the next diver crouched in it.\n  const next = L.d.find((D) => !D.st);\n  if (next && L.t > L.te0 - 1.6) {\n    for (let u = 4.5; u \u003c= 6.5; u += 0.5) for (let y = PY - 1; y \u003c= PY + 1; y++) put(X(u), y, dark);\n    put(X(6), PY, lit(SUIT[next.suit])), put(X(6), PY - 1, lit(HELM[next.helm]));\n  }\n  if ((P.rt * 1.4) % 1 \u003c 0.25) put(X(len * 0.5), PY - 4, [255, 40, 30]);\n}\n\n// A diver in freefall seen from above and behind: spread arms and legs, the rig on the back, the helmet.\nconst bp = (D, a, b) => {\n  const c = cos(D.h) * 1.3, s = sin(D.h) * 1.3;\n  return [D.x + c * a - s * b, D.y + (D.z + s * a + c * b) * ZS];\n};\nfunction diver(D) {\n  const sc = lit(SUIT[D.suit]), ln = (a, b) => seg(...bp(D, ...a), ...bp(D, ...b), sc);\n  for (const m of [-1, 1]) {\n    ln([-0.9, 0.4 * m], [-2.8, 1.6 * m]);\n    if (D.g \u003c 0.97) ln([0.9, 0.8 * m], [2.1, 2.3 * m]);\n  }\n  ln([-0.9, 0], [0.9, 0]), ln([0.9, -0.9], [0.9, 0.9]);\n  put(...bp(D, -0.1, 0), [26, 26, 32]);\n  put(...bp(D, 1.9, 0), lit(HELM[D.helm]));\n}\n\n// A canopy: cells, lines, the jumper in the harness. On the ground it falls in behind the jumper, who gathers it up.\nfunction canopy(D, T) {\n  const sx = D.x, sy = D.y + D.z * ZS, ca = CAN[D.can], cb = CAN[D.cb], down = D.st === 4, sl = down ? T - D.tl : 0, a = 1 - sm(5.5, 7.5, sl);\n  const suit = lit(SUIT[D.suit]);\n  if (!down && D.o \u003c 0.3) {\n    // Pilot chute and bag going up.\n    seg(sx, sy - 1, sx, sy - 2 - D.o * 22, lit([200, 200, 210]), 0.5), put(sx, sy - 2 - D.o * 22, lit([245, 245, 245]));\n    put(sx, sy - 1, lit(HELM[D.helm])), put(sx, sy, suit), put(sx + 1, sy, suit);\n    return;\n  }\n  const kk = down ? 1 : sm(0.25, 0.8, D.o), pop = 1 + 0.18 * sin(PI * sm(0.55, 1, D.o)), c = sm(0, 1.2, sl);\n  const ch = cos(D.h), shh = sin(D.h), zm = 1 + D.z * 0.015, hs = (1 + 5.2 * kk) * pop * mix(1, 0.75, c) * zm, lr = (2 + 6 * kk) * (1 - c) * zm + 0.5 * c;\n  const ox = down ? -ch * 4 * c : 0, oy = down ? -shh * 4 * c * ZS : 0, cy = sy - 1.5 - lr + oy, droop = mix(1.1, 0.2, c) + D.fl * 0.6;\n  const svx = -shh * hs, svy = ch * hs * ZC, fx = ch * 2 * zm, fy = shh * 2 * ZC * (1 - c);\n  if (!down || c \u003c 1) for (const t of [-0.9, -0.35, 0.35, 0.9]) seg(sx, sy - 1.5, sx + ox + svx * t, cy + svy * t + droop * t * t + 1, lit([210, 210, 220]), 0.3 * a);\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let t = -1; t \u003c= 1; t += 0.45 / hs) {\n      const cell = min(8, floor((t + 1) * 4.5)), col = cell > 2 && cell \u003c 6 ? cb : ca, k = (cell & 1 ? 0.8 : 1) * (pass ? 1 : 0.5) * (1.12 - 0.12 * pop);\n      for (let q = -1; q \u003c= 1; q += 0.5) put(sx + ox + svx * t + fx * q, cy + svy * t + fy * q + droop * t * t + (pass ? 0 : 1), lit(col, k * (0.92 + 0.08 * q)), a);\n    }\n  put(sx, sy - 2, lit(HELM[D.helm]), a), put(sx, sy - 1, suit, a), put(sx + (D.fl > 0.3 ? 1 : 0), sy, suit.map((v) => v * 0.7), a);\n}\n\nfunction sock(P) {\n  const w = P.w, aw = abs(w), sx = w >= 0 ? 1 : -1;\n  for (let y = 104; y \u003c= 116; y++) put(WX, y, lit([200, 200, 206]));\n  for (let u = 0; u \u003c= 6; u += 0.5) {\n    const x = WX + sx * u * (0.3 + 0.7 * aw), y = 104 + u * (1 - aw) * 0.85 + sin(P.rt * 9 - u) * 0.35 * aw, col = lit(floor(u / 1.5) & 1 ? [240, 240, 240] : [255, 110, 20]);\n    put(x, y, col), u \u003c 4 && put(x, y + 1, col, 0.8);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  F = P.f;\n  const hh = P.h * 3, i0 = min(2, floor(hh));\n  K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  LT = KC(18);\n  backdrop(P);\n  F.set(P.bg);\n  // Cloud shadows crossing the fields.\n  for (let y = HZ; y \u003c H; y++) {\n    const zf = y - HZ + 2;\n    for (let x = 0; x \u003c W; x++) {\n      const v = vn((((x - 32) * 24) / zf - P.cx * 1.1) * 0.035, (260 / zf) * 0.05), k = 1 - 0.5 * sm(0.45, 0.58, v), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n  farClouds(P);\n  sock(P);\n  const A = [];\n  for (const L of P.loads) for (const D of L.d) if (D.st === 4) canopy(D, L.t);\n  for (const L of P.loads) if (L.px > -40 && L.px \u003c 104) plane(P, L);\n  for (const L of P.loads) for (const D of L.d) if (D.st && D.st \u003c 4) A.push([D, L]);\n  A.sort((a, b) => a[0].z - b[0].z);\n  for (const [D, L] of A) {\n    if (D.st === 3) canopy(D, L.t);\n    else {\n      diver(D);\n      // Grips: the arms of two docked neighbours meet between them.\n      const E = L.d[(D.i + 1) % L.n];\n      if (D.st === 1 && E.st === 1 && D.g > 0.97 && E.g > 0.97) {\n        const d2 = (u, v) => (u[0] - v[0]) ** 2 + (u[1] - v[1]) ** 2, [a, b, c, e] = [bp(D, 0.9, -0.9), bp(D, 0.9, 0.9), bp(E, 0.9, -0.9), bp(E, 0.9, 0.9)];\n        const p = d2(a, c) + d2(a, e) \u003c d2(b, c) + d2(b, e) ? a : b, q = d2(p, c) \u003c d2(p, e) ? c : e;\n        const m = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];\n        seg(...p, ...m, lit(SUIT[D.suit])), seg(...m, ...q, lit(SUIT[E.suit]));\n      }\n    }\n  }\n  deck(P);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Divers=5..12, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"A clear midday at 0, the deep blue overhead going pale at the horizon, to the sunset load at 1, when the sun sits on the horizon, the clouds go pink and the canopies fly in warm light."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a new plane comes every fifteen seconds, its divers are in freefall for about seven and under canopy for about twenty, so one load is always landing while the next is in the air. At 0.2 it all runs ten times slower."},{"name":"Divers","min":5,"max":12,"about":"How many jump together, five to twelve. A bigger load comes in a longer plane and builds a wider ring, and as many canopies come down."},{"name":"Wind","min":-1,"max":1,"about":"The cloud deck, the far cumulus and the cloud shadows on the fields travel with it, the plane runs in against it, the windsock fills, and the canopies turn in to land facing it. Near 0 they land towards you."}],"start":[0,2,5,0.06],"measures":{"motion":0.1475,"detail":0.0297,"edges":0.3609,"complexity":0.7202,"coverage":0.9986,"colour":0.3312,"drift":0.0468},"knobResponse":[0.1943,0.0707,0.0554,0.0919]},{"slug":"sled-dogs","title":"Sled Dogs","family":"polar","round":27,"note":"드론처럼 바로 위에서 본 개썰매 팀이 둘씩 갱라인에 매여 해빙 위를 달려 올라가요. 낮은 해가 개마다 긴 파란 그림자를 비스듬히 뒤로 던지고, 바람이 깎은 사스트루기 사이로 압력 능선과 다시 언 리드가 발밑을 흘러가요. K1 은 금빛 해에서 오로라 뜬 달밤으로 가고, 누르면 머셔가 외쳐 팀이 방향을 틀어요.","idea":"Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.","buttons":"K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.","code":"// ===== Patternflow pattern =====\n// Title:   Sled Dogs\n// Family:  polar\n// Idea:    Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after dog-sled teams on Arctic sea ice, here in pairs on a gangline (the tandem hitch) rather than the fan hitch used in Greenland\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1\n//\n// Knob 1: Light. A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow.\n// Knob 2: Speed. At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower.\n// Knob 3: Dogs. Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front.\n// Knob 4: Wind. Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice.\n// Buttons: K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.\n\nconst W = 64, H = 128, N = W * H;\n// The ice: a ring of world rows, x from -128 to 127.\nconst RX = 256, XO = 128, RY = 256, RN = RX * RY;\n// The shading grid and the window of heights around it.\nconst TW = 65, TH = 129, MX = 48, MY = 30, HW = TW + 2 * MX, HH = TH + 2 * MY;\n// Dogs are drawn in sixths of a metre, grown by Z.\nconst Z = 1.4, PITCH = 11 * Z, LAT = 2.5 * Z, STRIDE = 9 * Z, SLED = 15 * Z, PL = 1024;\nconst { min, max, floor, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rw = (y) => (((y % RY) + RY) % RY) * RX;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// The prevailing wind, which the sastrugi follow.\nconst GX = -0.8, GY = 0.6;\n// K1 stops: direct rgb, sky rgb, tan of elevation, aurora.\nconst KL = [\n  [0, 208, 146, 56, 64, 94, 160, 0.3, 0],\n  [0.33, 205, 122, 44, 60, 80, 142, 0.17, 0],\n  [0.6, 0, 0, 0, 84, 112, 186, 0.2, 0],\n  [1, 52, 64, 92, 12, 22, 52, 0.32, 1],\n].map((k) => Float64Array.from(k));\n// Coats from above, dark with a light face: black, grey, red, sable, black.\nconst COAT = [\n  [28, 26, 30, 64, 60, 60, 236, 232, 228],\n  [64, 62, 66, 112, 108, 104, 226, 222, 214],\n  [110, 56, 26, 150, 92, 50, 236, 220, 198],\n  [58, 42, 28, 104, 80, 56, 232, 216, 192],\n  [24, 22, 22, 44, 40, 38, 220, 214, 206],\n].map((c) => [0, 3, 6].map((j) => Float64Array.from(c.slice(j, j + 3), (v) => v / 255)));\nconst HARN = [1, 0.5, 0.04], LINE = [0.2, 0.17, 0.22], WOOD = [0.62, 0.46, 0.3], DARK = [0.26, 0.18, 0.12], LOAD = [0.44, 0.34, 0.24], RED = [0.78, 0.15, 0.1], FUR = [0.74, 0.66, 0.54];\n// Side views as capsules (a, h, a, h, r): a dog; the sled and musher.\nconst DOG = [-2, 2.75, 1.2, 2.95, 0.82, 1.2, 3.2, 2.7, 3.95, 0.6, 2.7, 3.95, 3.9, 3.65, 0.42, 2.55, 4.4, 2.7, 5, 0.22, -2.2, 3.2, -2.6, 4.2, 0.42, -2.6, 4.2, -1.8, 4.7, 0.36];\nconst SLD = [-1.5, 0.8, 14.5, 0.8, 0.55, 5.5, 1.8, 11.5, 1.8, 1, 2.6, 0.8, 2.6, 5.8, 0.3, 0.45, 0, 0.7, 5, 0.6, 0.7, 5, 0.9, 9, 1.15, 1, 10.2, 1, 10.3, 0.85, 1, 8.4, 2.5, 6, 0.4];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), U8 = (n) => new Uint8ClampedArray(n);\n  const S = (params.s = {\n    HT: F32(RN), AL: U8(RN * 3), MT: U8(RN), MK: U8(RN), LI: F32(RN), SQ: F32(RN), GN: new Int32Array(RN), gen: 1,\n    HL: F32(HW * HH), AM: F32(TW * TH * 3), DI: F32(TW * TH * 3), SM: F32(TW * TH), F: F32(N * 3), L: new Float64Array(9), TM: U8(1200), LC: new Float64Array(3),\n    PX: F32(PL), PY: F32(PL), np: PL, acc: 0.01, DX: F32(16), DY: F32(16), DF: F32(16), DO: F32(16), DC: U8(16), BX: F32(256), BY: F32(256), BA: F32(256), bi: 0,\n    lx: 0.01, ly: 0.01, th: 0.01, v: 20, vt: 20, ph: 0.01, t: 0.01, cx: -30, cy: -18, gy: 230, nd: 8, sbx: 0.01, sby: 0.01, sfx: 0.01, sfy: 0.01, ux: 0.01, uy: 0.01, run: 0.01, pt: 15.4,\n    rest: 0, restT: 0.01, turn: 1, turnT: 0.01, k1: -1, k4: 0.06, wind: 0.01, live: 0, cpY: [400, 50], cpX: [0, 0], feat: [], nf: 0, sk: 0,\n  });\n  for (let k = 0; k \u003c PL; k++) S.PY[k] = (PL - 1 - k) * 0.5;\n  for (let i = 0; i \u003c 16; i++) (S.DO[i] = hash(i, 3)), (S.DC[i] = floor(hash(i, 8) * 5));\n  for (let c = 0; c \u003c 1200; c++) S.TM[c] = c \u003c 205 ? c : 205 + 50 * (1 - exp(-(c - 205) / 50));\n  plan(S), plan(S), plan(S);\n  for (let y = 230; y > -53; y--) genRow(S, y);\n  S.gy = -53;\n}\n\n// The trail swings between control points.\nfunction trailX(S, y) {\n  const Y = S.cpY, X = S.cpX;\n  let i = 0;\n  while (i \u003c Y.length - 2 && Y[i + 1] > y) i++;\n  return mix(X[i], X[i + 1], sm(0, 1, (Y[i] - y) / (Y[i] - Y[i + 1])));\n}\n// Each obstacle lies across the way on; the trail swings round its end.\nfunction plan(S) {\n  const Y = S.cpY, X = S.cpX, ly = Y[Y.length - 1], lx = X[X.length - 1];\n  if (S.sk++ % 3 === 2) return Y.push(ly - 60 - 30 * rnd()), X.push(cl(lx + (rnd() - 0.5) * 20, -24, 24));\n  const side = abs(lx) > 6 ? (lx > 0 ? 1 : -1) : rnd() \u003c 0.5 ? 1 : -1, x0 = cl(lx - side * (9 + 5 * rnd()), -30, 30), y0 = ly - 60 - 20 * rnd(), sd = floor(rnd() * 999), ph = rnd() * 6;\n  Y.push(y0, y0 - 60 - 20 * rnd()), X.push(x0, cl(x0 + side * (9 + 6 * rnd()), -24, 24));\n  if (S.nf++ % 2 === 0) {\n    // A pressure ridge, square to the sun.\n    const a = -side * (0.5 + 0.4 * rnd()), len = 60 + 40 * rnd(), dx = side * cos(a), dy = sin(a);\n    S.feat.push({ k: 0, px: x0 + side * 4, py: y0, dx, dy, len, hh: 6 + 4 * rnd(), sd, ph, side, ol: 0, y0: y0 + min(0, dy * len) - 22, y1: y0 + max(0, dy * len) + 22 });\n  } else {\n    // A lead: slope, swing, wave number and width in dx, dy, len, hh.\n    const sl = (rnd() - 0.5) * 0.22, am = 3 + 4 * rnd(), w = 10 + 6 * rnd(), e = abs(sl) * (128 + abs(x0)) + am + w;\n    S.feat.push({ k: 1, px: x0, py: y0, dx: sl, dy: am, len: 0.03 + 0.03 * rnd(), hh: w, sd, ph, side, ol: 40 + 40 * rnd(), y0: y0 - e, y1: y0 + e });\n  }\n}\n\nfunction genRow(S, y) {\n  const o = rw(y), { HT, AL, MT } = S, fs = S.feat.filter((f) => y > f.y0 && y \u003c f.y1);\n  for (let i = 0; i \u003c RX; i++) {\n    // Sastrugi: crests with a long back to the sun and a steep lee face, broken into pieces.\n    const x = i - XO, u = x * GX + y * GY, v = -x * GY + y * GX, c = v * 0.085 + 2.4 * vn(u * 0.012, v * 0.012) + 0.7 * vn(u * 0.045, v * 0.03 + 20), cf = c - floor(c), ci = floor(c);\n    const sa = (cf \u003c 0.25 ? cf / 0.25 : (1 - cf) / 0.75) * sm(0.42, 0.75, vn(u * 0.06 + ci * 7.3, ci * 3.1)) * (0.25 + 0.75 * sm(0.3, 0.6, vn(x * 0.022 + 70, y * 0.022)));\n    let h = 0.95 * sa * sa + 0.15 * vn(u * 0.09 + 50, v * 0.34) + vn(x * 0.017 + 9, y * 0.017) - 0.5;\n    const g = 0.955 + 0.045 * hash(x, y);\n    let ar = 0.9 * g, ag = 0.94 * g, ab = g, mt = 0;\n    for (const f of fs) {\n      if (f.k === 0) {\n        // Tilted slabs, rubble at their feet.\n        const rx = x - f.px, ry = y - f.py, t = rx * f.dx + ry * f.dy;\n        if (t \u003c -8 || t > f.len + 8) continue;\n        const s = abs(ry * f.dx - rx * f.dy - 3 * sin(t * 0.06 + f.ph)), bk = floor(t / 3.4), e = sm(-4, 8, t) * sm(f.len + 4, f.len - 16, t), wb = 2.4 + 2.6 * hash(bk, f.sd + 1), gx = floor(x / 3), gy = floor(y / 3);\n        const hb = f.hh * (0.45 + 0.55 * hash(bk, f.sd)) * e;\n        let hr = hb * (1 - s / wb) + 0.5 * hb * (hash(bk, f.sd + 2) - 0.5) * (t / 3.4 - bk - 0.5), q = hash(bk, f.sd + 3);\n        if (hash(gx, gy + f.sd) \u003c 0.2 * e * sm(wb + 6, wb, s) && 0.8 + 1.4 * hash(gy, gx) > hr) (hr = 0.8 + 1.4 * hash(gy, gx)), (q = hash(gx + 7, gy));\n        if (hr > 0.2 && hr > h - 0.2) (h = max(h, hr) + 0.15), (mt = 1), (ar = mix(0.84, 0.44, q)), (ag = mix(0.93, 0.76, q)), (ab = mix(1, 0.92, q));\n      } else {\n        // A refrozen lead: dark young ice with frost flowers, and open water along part of it.\n        const yc = f.py + f.dx * (x - f.px) + f.dy * sin(x * f.len + f.ph), e = abs(y - yc) / (f.hh * (0.35 + 0.3 * vn(x * 0.045, f.sd)));\n        if (e > 1) {\n          h += 0.7 * max(0, 1.4 - e);\n          continue;\n        }\n        const sx = f.side * (x - f.px), gq = mix(0.14, 0.4, e * e) * (0.85 + 0.3 * vn(x * 0.2, y * 0.2)), fr = hash(x + 3, y) \u003c 0.07 ? 0.35 + 0.3 * hash(y, x) : 0;\n        (h = -0.45), (mt = 2), (ar = gq * 0.9 + fr), (ag = gq * 0.97 + fr), (ab = gq * 1.06 + fr);\n        if (e \u003c 0.8 * sm(5, 10, sx) * sm(f.ol + 10, f.ol, sx)) (mt = 3), (h = -0.6), (ar = 0.03), (ag = 0.07), (ab = 0.11);\n      }\n    }\n    const k = o + i;\n    (HT[k] = h), (AL[k * 3] = ar * 255), (AL[k * 3 + 1] = ag * 255), (AL[k * 3 + 2] = ab * 255), (MT[k] = mt), (S.MK[k] = S.GN[k] = 0);\n  }\n}\n\n// A paw print or runner groove in the snow; young ice takes none.\nfunction stamp(S, x, y, depth, bit) {\n  const i = floor(x + 0.5) + XO, yy = floor(y + 0.5), k = rw(yy) + i, A = S.AL;\n  if (i \u003c 0 || i >= RX || S.MK[k] & bit || S.MT[k] > 1) return;\n  S.MK[k] |= bit;\n  (S.HT[k] -= depth), (A[k * 3] *= 0.93), (A[k * 3 + 1] *= 0.95);\n  // Light it again.\n  for (let j = -2; j \u003c 3; j++) for (let q = max(0, i - 2); q \u003c min(RX, i + 3); q++) S.GN[rw(yy + j) + q] = 0;\n}\n\n// The point s LEDs back along the lead dog's path.\nconst PP = new Float64Array(2);\nfunction pathAt(S, s) {\n  const f = S.acc, last = (S.np - 1) & (PL - 1);\n  if (s \u003c= f) return (PP[0] = mix(S.lx, S.PX[last], s / max(f, 1e-6))), (PP[1] = mix(S.ly, S.PY[last], s / max(f, 1e-6)));\n  const k = (s - f) * 2, i = floor(k), r = k - i, a = (S.np - 1 - i) & (PL - 1), b = (S.np - 2 - i) & (PL - 1);\n  (PP[0] = mix(S.PX[a], S.PX[b], r)), (PP[1] = mix(S.PY[a], S.PY[b], r));\n}\n// Dogs in pairs on the path, the sled behind.\nfunction layout(S) {\n  // Long teams close up to fit the panel.\n  const n = S.nd, odd = n & 1, pt = (S.pt = min(PITCH, 76 / (((n + 1) >> 1) - 1))), sf = (((n + 1) >> 1) - 1) * pt + 8 * Z;\n  for (let i = 0; i \u003c n; i++) {\n    const side = odd && !i ? 0 : (odd ? i - 1 : i) & 1 ? 1 : -1, s = ((i + odd) >> 1) * pt + 0.6 * (S.DO[i] - 0.5) + (side > 0 ? 3.5 * Z : 0);\n    pathAt(S, s - 1);\n    const ax = PP[0], ay = PP[1];\n    pathAt(S, s + 1);\n    const fx = ax - PP[0], fy = ay - PP[1], l = sqrt(fx * fx + fy * fy) || 1;\n    pathAt(S, s);\n    (S.DX[i] = PP[0] - (fy / l) * side * LAT), (S.DY[i] = PP[1] + (fx / l) * side * LAT), (S.DF[i] = atan2(fx / l, -fy / l));\n  }\n  pathAt(S, sf), (S.sfx = PP[0]), (S.sfy = PP[1]);\n  pathAt(S, sf + SLED), (S.sbx = PP[0]), (S.sby = PP[1]);\n  (S.ux = (S.sfx - S.sbx) / SLED), (S.uy = (S.sfy - S.sby) / SLED);\n}\n\nfunction step(S, d, k4) {\n  S.t += d;\n  if (S.rest && (S.restT += d) > 10) S.rest = 0;\n  S.v += ((S.rest ? 0 : S.vt) - S.v) * min(1, d * (S.rest ? 1.6 : 0.9));\n  const v = S.v, rate = 0.065 * v * d;\n  // The lead dog aims 22 LEDs up the trail, or swings on a call.\n  let des = S.turnT > 0 ? ((S.turnT -= d), S.turn * 1.15) : cl(atan2(trailX(S, S.ly - 22) - S.lx, 22), -0.5, 0.5);\n  if (abs(S.lx) > 44) des = S.lx > 0 ? -0.6 : 0.6;\n  S.th += cl(des - S.th, -rate, rate);\n  const dist = v * d, fx = sin(S.th), fy = -cos(S.th), oph = S.ph;\n  (S.lx += fx * dist), (S.ly += fy * dist), (S.acc += dist), (S.ph += dist / STRIDE);\n  for (; S.acc >= 0.5; S.np++) (S.acc -= 0.5), (S.PX[S.np & (PL - 1)] = S.lx - fx * S.acc), (S.PY[S.np & (PL - 1)] = S.ly - fy * S.acc);\n  layout(S);\n  // Each foot leaves a print and each stride a breath; the runners cut grooves.\n  for (let i = 0; i \u003c S.nd; i++) {\n    const a = sin(S.DF[i]), b = -cos(S.DF[i]), o = S.DO[i];\n    for (let l = 0; l \u003c 4; l++) {\n      const fa = (LJ[l] + 1.5) * Z, fb = l & 1 ? Z : -Z;\n      if (floor(S.ph + o + LO[l]) > floor(oph + o + LO[l])) stamp(S, S.DX[i] + a * fa - b * fb, S.DY[i] + b * fa + a * fb, 0.22, 1);\n    }\n    if (floor(S.ph + o * 3) > floor(oph + o * 3)) {\n      const p = S.bi++ & 255;\n      (S.BX[p] = S.DX[i] + a * 4.6 * Z), (S.BY[p] = S.DY[i] + b * 4.6 * Z), (S.BA[p] = 0.01);\n    }\n  }\n  const ux = S.ux, uy = S.uy;\n  for (let e = -1; e \u003c= dist - 0.5; e += 0.5) for (let r = -2 * Z; r \u003c 3 * Z; r += 4 * Z) stamp(S, S.sbx - uy * r + ux * e, S.sby + ux * r + uy * e, 0.3, 2);\n  // The camera keeps the musher at row 118.\n  S.cx += ((S.lx + S.sbx) / 2 - 32 + (S.k1 \u003c 0.6 ? 6 : -6) - S.cx) * min(1, d * 1.5);\n  S.cy = S.sby - 118;\n  while (S.gy > S.cy - 40) genRow(S, --S.gy);\n  while (S.cpY[S.cpY.length - 1] > S.ly - 420) plan(S);\n  while (S.cpY.length > 4 && S.cpY[2] > S.ly + 300) S.cpY.shift(), S.cpX.shift();\n  S.feat = S.feat.filter((f) => f.y0 \u003c S.gy);\n  for (let p = 0, wv = (4 + 60 * k4) * d; p \u003c 256; p++) if (S.BA[p] \u003c 1.5) (S.BA[p] += d), (S.BX[p] += GX * wv), (S.BY[p] += GY * wv);\n  S.wind += (8 + 90 * k4) * d;\n}\n\n// Each leg from the side, joint to knee to foot; the hind pair lands first.\nconst LO = [0.5, 0.58, 0, 0.08], LJ = [1.1, 1.1, -1.9, -1.9], LG = new Float64Array(24);\nfunction legs(ph, run, bob) {\n  for (let l = 0; l \u003c 4; l++) {\n    const p = (((ph + LO[l]) % 1) + 1) % 1, R = 1.8 * run, ja = LJ[l], jh = 2.2 + bob, u = (p - 0.42) / 0.58;\n    const fa = ja + (p \u003c 0.42 ? R * (1 - p / 0.21) : -R + 2 * R * u * u * (3 - 2 * u)), fh = p \u003c 0.42 ? 0 : 0.9 * run * sin(PI * u);\n    const dx = fa - ja, dy = fh - jh, dd = sqrt(dx * dx + dy * dy), k = sqrt(max(0, 1.69 - (dd * dd) / 4)) / max(dd, 0.01), o = l * 6;\n    (LG[o] = ja), (LG[o + 1] = jh), (LG[o + 2] = (ja + fa) / 2 + dy * k), (LG[o + 3] = (jh + fh) / 2 - dx * k), (LG[o + 4] = fa), (LG[o + 5] = fh);\n  }\n}\n// Distance to a capsule; OO keeps the offset for shading.\nconst OO = new Float64Array(2);\nfunction cap(a, b, a0, b0, a1, b1, r) {\n  const pa = a - a0, pb = b - b0, ba = a1 - a0, bb = b1 - b0, t = cl((pa * ba + pb * bb) / (ba * ba + bb * bb + 1e-9), 0, 1), oa = pa - ba * t, ob = pb - bb * t;\n  (OO[0] = oa), (OO[1] = ob);\n  return sqrt(oa * oa + ob * ob) - r;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], k1 = cl(k[0], 0, 1), b = input.btnPressed || [];\n  (S.vt = 10 * cl(k[1], 0.2, 3)), (S.nd = cl(Math.round(k[2]), 8, 14)), (S.k4 = cl(k[3], 0, 1));\n  if (k1 !== S.k1) {\n    // New light: all ice is lit again.\n    let i = 0;\n    while (i \u003c KL.length - 2 && k1 > KL[i + 1][0]) i++;\n    for (let j = 1; j \u003c 9; j++) S.L[j] = mix(KL[i][j], KL[i + 1][j], sm(KL[i][0], KL[i + 1][0], k1));\n    (S.k1 = k1), S.gen++;\n  }\n  for (; !S.live; S.live = S.t > 6 ? 1 : 0) step(S, 1 / 30, S.k4);\n  if (b[0]) (S.turn = S.lx > 0 ? -1 : 1), (S.turnT = 1.6);\n  if (b[1]) (S.rest = 1 - S.rest), (S.restT = 0);\n  step(S, cl(dt || 0, 0, 0.1), S.k4);\n}\n\n// Per frame: the frame, the shadow mask, the light and the LED paint works on.\nlet F, SM, LC, LL, Lx, Ly, cE, sE, PO, La, Lb;\nfunction put(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  (F[o] += (r - F[o]) * a), (F[o + 1] += (g - F[o + 1]) * a), (F[o + 2] += (b - F[o + 2]) * a);\n}\n// Lay a part (distance d, radius r, 0 if flat) of colour c on LED PO.\nfunction paint(d, r, c, f) {\n  const q = cl(0.5 - d * Z, 0, 1) * f, nz = r ? sqrt(max(0, 1 - (OO[0] * OO[0] + OO[1] * OO[1]) / (r * r))) : 1, df = r ? max(0, ((OO[0] * La + OO[1] * Lb) / r) * cE + nz * sE) : sE;\n  if (q > 0) for (let k = 0; k \u003c 3; k++) F[PO + k] += (c[k] * (LL[k + 1] * min(2, df / sE) + LL[k + 4] * (0.55 + 0.45 * nz)) - F[PO + k]) * q;\n}\n// Nearest capsule of side view P; bob lifts the body.\nfunction side(P, a, h, bob) {\n  let d = 99;\n  for (let j = 0; j \u003c P.length; j += 5) d = min(d, cap(a, h, P[j], P[j + 1] + bob, P[j + 2], P[j + 3] + bob, P[j + 4]));\n  return d;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  (F = S.F), (SM = S.SM), (LC = S.LC), (LL = S.L);\n  const { HL, HT, AL, MT, AM, DI, L, TM, LI, SQ, GN, cx, cy, t, k4, gen, nd: n } = S, run = (S.run = cl(S.v / 6, 0, 1));\n  // Sun in the upper left, moon in the upper right.\n  const night = S.k1 > 0.6, lx = (Lx = night ? 0.85 : -0.8), ly = (Ly = night ? -0.53 : -0.6), te = L[7], aur = L[8];\n  (cE = 1 / sqrt(1 + te * te)), (sE = te * cE);\n  const dON = L[1] + L[2] + L[3] > 3, Kx = -lx / te, Ky = -ly / te, ox = floor(cx), oy = floor(cy), fx = cx - ox, fy = cy - oy;\n  let hmax = -9, hmin = 9;\n  for (let j = 0, q = 0; j \u003c HH; j++)\n    for (let i = 0, ro = rw(oy - MY + j); i \u003c HW; i++, q++) {\n      const h = (HL[q] = HT[ro + cl(ox - MX + i + XO, 0, RX - 1)]);\n      (hmax = max(hmax, h)), (hmin = min(hmin, h));\n    }\n  const ms = min(46, floor((hmax - hmin) / te) + 1);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0, ro = rw(oy + ty); tx \u003c TW; tx++) {\n      const wi = ro + cl(ox + tx + XO, 0, RX - 1);\n      // Ice keeps its light until the light or the ice changes.\n      if (GN[wi] !== gen) {\n        const k = (ty + MY) * HW + tx + MX, h = HL[k], gx = (HL[k + 1] - HL[k - 1]) * 0.7, gy = (HL[k + HW] - HL[k - HW]) * 0.7;\n        const inv = 1 / sqrt(gx * gx + gy * gy + 1), dif = (-gx * lx * cE - gy * ly * cE + sE) * inv;\n        let lt = 0;\n        if (dif > 0 && dON) {\n          let px = tx + MX + 0.5, py = ty + MY + 0.5, rh = h, oc = -1;\n          for (let s = 0; s \u003c ms && rh \u003c= hmax; s++) (px += lx), (py += ly), (rh += te), (oc = max(oc, HL[(py | 0) * HW + (px | 0)] - rh));\n          lt = min(2.2, dif / sE) * (1 - sm(-0.15, 0.3, oc));\n        }\n        // Slopes facing the light's side of the sky catch more sky.\n        const cav = cl(((HL[k - 1] + HL[k + 1] + HL[k - HW] + HL[k + HW]) * 0.25 - h) * 0.6, -0.15, 0.3), nh = cl((-gx * lx - gy * ly) * inv * 2.5, -0.6, 0.6);\n        (LI[wi] = lt), (SQ[wi] = (0.6 + 0.4 * inv) * (1 - cav) * (1 + 0.5 * nh)), (GN[wi] = gen);\n      }\n      // Aurora light; young ice and water mirror the sky.\n      const sk = SQ[wi], mt = MT[wi], o = (ty * TW + tx) * 3, lit = LI[wi] * (mt === 3 ? 0.1 : 1);\n      const eg = aur > 0 ? aur * 100 * (0.5 + 0.5 * sin((ox + tx) * 0.05 + (oy + ty) * 0.013 + 1.4 * sin((oy + ty) * 0.021 - t * 0.2) + t * 0.3)) ** 8 : 0;\n      const rf = mt > 1 ? 0.3 : 0;\n      for (let c = 0; c \u003c 3; c++) (AM[o + c] = (AL[wi * 3 + c] / 255) * (L[4 + c] * sk + eg * (c === 1 ? 1 : 0.15)) + rf * L[4 + c]), (DI[o + c] = (AL[wi * 3 + c] / 255) * L[1 + c] * lit);\n    }\n\n  // Shadows: each side view thrown along the snow.\n  SM.fill(0);\n  const ux = S.ux, uy = S.uy;\n  for (let i = 0; i \u003c n && dON; i++) {\n    const a = S.DF[i], ph = S.ph + S.DO[i], bob = 0.22 * run * sin(2 * PI * ph);\n    legs(ph, run, bob);\n    shadowOf(S.DX[i] - cx + fx, S.DY[i] - cy + fy, sin(a), -cos(a), Kx, Ky, 4.6, 5.6, DOG, bob, 1);\n  }\n  if (dON) shadowOf(S.sbx - cx + fx, S.sby - cy + fy, ux, uy, Kx, Ky, 16, 11, SLD, 0, 0);\n  // Snow between grid points, shadows taken out.\n  for (let i = 0, o = 0; i \u003c TW * TH; i++) for (let c = 0, s = 1 - 0.55 * SM[i]; c \u003c 3; c++, o++) AM[o] += DI[o] * s;\n  const w00 = (1 - fx) * (1 - fy), w10 = fx * (1 - fy), w01 = (1 - fx) * fy, w11 = fx * fy;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, q = y * TW * 3; x \u003c W; x++) for (let c = 0; c \u003c 3; c++, p++, q++) F[p] = w00 * AM[q] + w10 * AM[q + 3] + w01 * AM[q + TW * 3] + w11 * AM[q + TW * 3 + 3];\n\n  // Spindrift, under the dogs.\n  for (let c = 0; c \u003c 3; c++) LC[c] = L[4 + c] * 0.8 + L[1 + c] * 0.9;\n  if (k4 > 0.01) {\n    const th = 0.68 - 0.36 * k4, hz = 0.24 * k4 * k4;\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const wx = x + cx, wy = y + cy, al = wx * GX + wy * GY - S.wind, ac = -wx * GY + wy * GX, n1 = 0.62 * vn(al * 0.055, ac * 0.325);\n        if (n1 + 0.38 \u003c th && hz \u003c 0.004) continue;\n        const q = sm(th, th + 0.25, n1 + 0.38 * vn(al * 0.125 + 17, ac * 0.65 + 5)) * (0.4 + 0.6 * k4) * 0.9 + hz, p = i * 3;\n        for (let c = 0; c \u003c 3; c++) F[p + c] += ((LC[c] + 25 + 7.5 * c) * 1.1 - F[p + c]) * q;\n      }\n  }\n  // The team, then breath.\n  gangline(S);\n  for (let i = 0; i \u003c n; i++) dog(S, i);\n  sled(S.sbx - cx, S.sby - cy, ux, uy);\n  for (let p = 0; p \u003c 256; p++) {\n    const ag = S.BA[p], bx = S.BX[p] - cx, by = S.BY[p] - cy, r = 0.7 + ag * (1.2 + k4), al = 0.32 * (1 - ag / 1.5) * (1 - 0.5 * k4);\n    for (let y = floor(by - r); y \u003c= by + r && ag \u003c 1.5; y++)\n      for (let x = floor(bx - r); x \u003c= bx + r; x++) put(x, y, LC[0] * 1.15, LC[1] * 1.15, LC[2] * 1.15, al * (1 - ((x + 0.5 - bx) ** 2 + (y + 0.5 - by) ** 2) / (r * r)));\n  }\n  const tm = (v) => TM[min(1199, v | 0)];\n  for (let i = 0, p = 0; i \u003c N; i++, p += 3) display.setPixel(i & 63, i >> 6, tm(F[p]), tm(F[p + 1]), tm(F[p + 2]));\n}\n\n// A shadow: each grid point maps back to (a, h) in side view P.\nfunction shadowOf(x, y, Fx, Fy, Kx, Ky, A, Hh, P, bob, withLegs) {\n  const det = Fx * Ky - Fy * Kx, ax = abs(Fx) * A * Z, ay = abs(Fy) * A * Z, hx = Kx * Hh * Z, hy = Ky * Hh * Z;\n  for (let py = max(0, floor(y - ay + min(0, hy))); py \u003c= min(TH - 1, y + ay + max(0, hy)) && abs(det) > 0.05; py++)\n    for (let px = max(0, floor(x - ax + min(0, hx))); px \u003c= min(TW - 1, x + ax + max(0, hx)); px++) {\n      const rx = (px + 0.5 - x) / Z, ry = (py + 0.5 - y) / Z, a = (rx * Ky - ry * Kx) / det, h = (Fx * ry - Fy * rx) / det, i = py * TW + px;\n      if (h \u003c -0.6 || h > Hh || a \u003c -A || a > A) continue;\n      let d = side(P, a, h, bob);\n      for (let o = 0; o \u003c 24 && withLegs && h \u003c 3.2; o += 6) if (abs(a - LG[o + 2]) \u003c 2.2) d = min(d, cap(a, h, LG[o], LG[o + 1], LG[o + 2], LG[o + 3], 0.36), cap(a, h, LG[o + 2], LG[o + 3], LG[o + 4], LG[o + 5], 0.28));\n      SM[i] = max(SM[i], cl(0.6 - d * 1.4 * Z, 0, 1));\n    }\n}\n// The gangline, in soft dots from the lead dog to the sled.\nfunction gangline(S) {\n  for (let s = (S.nd & 1 ? 2.6 : -1) * Z; s \u003c (((S.nd + 1) >> 1) - 1) * S.pt + 8 * Z; s += 0.6) {\n    pathAt(S, s);\n    const x = PP[0] - S.cx - 0.5, y = PP[1] - S.cy - 0.5;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = floor(x) + (j & 1), Y = floor(y) + (j >> 1);\n      put(X, Y, LINE[0] * LC[0], LINE[1] * LC[1], LINE[2] * LC[2], 0.45 * (1 - abs(x - X)) * (1 - abs(y - Y)));\n    }\n  }\n}\n\n// A dog from above: legs, saddle, harness, neck, head, curled tail.\nfunction dog(S, i) {\n  const x = S.DX[i] - S.cx, y = S.DY[i] - S.cy, an = S.DF[i], Fx = sin(an), Fy = -cos(an), ph = S.ph + S.DO[i], [BK, SD, FC] = COAT[S.DC[i]], ext = sin(2 * PI * ph) * S.run, ts = i & 1 ? 1 : -1;\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  legs(ph, S.run, 0);\n  for (let py = max(0, floor(y - 5.4 * Z)); py \u003c= min(H - 1, y + 5.4 * Z); py++)\n    for (let px = max(0, floor(x - 5.4 * Z)); px \u003c= min(W - 1, x + 5.4 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx;\n      if (a * a + b * b > 30) continue;\n      PO = (py * W + px) * 3;\n      for (let l = 0; l \u003c 24; l += 6) paint(cap(a, b, LG[l], l % 12 ? 0.85 : -0.85, LG[l + 4], l % 12 ? 0.95 : -0.95, 0.38), 0.38, SD, 1);\n      const d = cap(a, b, -2.1 - 0.25 * ext, 0, 1.1 + 0.15 * ext, 0, 1.12), q = cl(0.5 - d * Z, 0, 1);\n      paint(d, 1.12, SD, 1);\n      if (q > 0) paint(d, 1.12, BK, sm(0.85, 0.35, abs(OO[1])) * q), abs(a - 0.7) \u003c 0.45 && paint(d, 1.12, HARN, q);\n      paint(cap(a, b, 1.4, 0, 2.7, 0, 0.55), 0.55, SD, 1);\n      paint(cap(a, b, 3, 0, 3.3, 0, 0.8), 0.8, FC, 1);\n      paint(cap(a, b, 3.5, 0, 4.4, 0, 0.42), 0.42, FC, 1);\n      paint(cap(a, b, -2.2, ts * 0.35, -2.2, ts * 0.35, 0.75), 0.75, FC, 1);\n    }\n}\n\n// The sled: runners, slats, load, handlebar, the musher.\nfunction sled(x, y, Fx, Fy) {\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  for (let py = max(0, floor(y - 17 * Z)); py \u003c= min(H - 1, y + 17 * Z); py++)\n    for (let px = max(0, floor(x - 17 * Z)); px \u003c= min(W - 1, x + 17 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx, ab = abs(b);\n      if (a \u003c -3 || a > 16 || ab > 3.2) continue;\n      PO = (py * W + px) * 3;\n      paint(cap(a, ab, -2.2, 2, 14.6, 2, 0.4), 0, DARK, 1);\n      paint(max(ab - 1.7, abs(a - 8.4) - 5.6), 0, a % 1.6 \u003c 1.1 ? WOOD : DARK, 1);\n      paint(max(ab - 1.3, abs(a - 8.7) - 3.2) - 0.25, 0, LOAD, 1);\n      paint(cap(a, b, 2.7, -2.3, 2.7, 2.3, 0.35), 0, DARK, 1);\n      paint(cap(a, b, 0.7, -1.4, 0.7, 1.4, 1), 1, RED, 1);\n      paint(cap(a, b, 1, 0, 1, 0, 1.1), 1.1, FUR, 1);\n    }\n}\n","layer":{"id":"layer-sled-dogs","type":"code","name":"sled-dogs","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sled Dogs\n// Family:  polar\n// Idea:    Seen from straight above, a dog team in pairs on a gangline runs up the panel over sea ice, the musher on the sled runners, and the low sun throws a long blue shadow back from every dog with its legs galloping in it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 27, after dog-sled teams on Arctic sea ice, here in pairs on a gangline (the tandem hitch) rather than the fan hitch used in Greenland\n// Round:   27\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1\n//\n// Knob 1: Light. A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow.\n// Knob 2: Speed. At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower.\n// Knob 3: Dogs. Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front.\n// Knob 4: Wind. Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice.\n// Buttons: K1 tap: the musher calls gee or haw and the lead pair swings the team hard toward the middle of the ice, then back to the trail. K2 tap stops the team to rest; tap again, or wait ten seconds, and it runs on.\n\nconst W = 64, H = 128, N = W * H;\n// The ice: a ring of world rows, x from -128 to 127.\nconst RX = 256, XO = 128, RY = 256, RN = RX * RY;\n// The shading grid and the window of heights around it.\nconst TW = 65, TH = 129, MX = 48, MY = 30, HW = TW + 2 * MX, HH = TH + 2 * MY;\n// Dogs are drawn in sixths of a metre, grown by Z.\nconst Z = 1.4, PITCH = 11 * Z, LAT = 2.5 * Z, STRIDE = 9 * Z, SLED = 15 * Z, PL = 1024;\nconst { min, max, floor, sin, cos, sqrt, exp, abs, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst rw = (y) => (((y % RY) + RY) % RY) * RX;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n// The prevailing wind, which the sastrugi follow.\nconst GX = -0.8, GY = 0.6;\n// K1 stops: direct rgb, sky rgb, tan of elevation, aurora.\nconst KL = [\n  [0, 208, 146, 56, 64, 94, 160, 0.3, 0],\n  [0.33, 205, 122, 44, 60, 80, 142, 0.17, 0],\n  [0.6, 0, 0, 0, 84, 112, 186, 0.2, 0],\n  [1, 52, 64, 92, 12, 22, 52, 0.32, 1],\n].map((k) => Float64Array.from(k));\n// Coats from above, dark with a light face: black, grey, red, sable, black.\nconst COAT = [\n  [28, 26, 30, 64, 60, 60, 236, 232, 228],\n  [64, 62, 66, 112, 108, 104, 226, 222, 214],\n  [110, 56, 26, 150, 92, 50, 236, 220, 198],\n  [58, 42, 28, 104, 80, 56, 232, 216, 192],\n  [24, 22, 22, 44, 40, 38, 220, 214, 206],\n].map((c) => [0, 3, 6].map((j) => Float64Array.from(c.slice(j, j + 3), (v) => v / 255)));\nconst HARN = [1, 0.5, 0.04], LINE = [0.2, 0.17, 0.22], WOOD = [0.62, 0.46, 0.3], DARK = [0.26, 0.18, 0.12], LOAD = [0.44, 0.34, 0.24], RED = [0.78, 0.15, 0.1], FUR = [0.74, 0.66, 0.54];\n// Side views as capsules (a, h, a, h, r): a dog; the sled and musher.\nconst DOG = [-2, 2.75, 1.2, 2.95, 0.82, 1.2, 3.2, 2.7, 3.95, 0.6, 2.7, 3.95, 3.9, 3.65, 0.42, 2.55, 4.4, 2.7, 5, 0.22, -2.2, 3.2, -2.6, 4.2, 0.42, -2.6, 4.2, -1.8, 4.7, 0.36];\nconst SLD = [-1.5, 0.8, 14.5, 0.8, 0.55, 5.5, 1.8, 11.5, 1.8, 1, 2.6, 0.8, 2.6, 5.8, 0.3, 0.45, 0, 0.7, 5, 0.6, 0.7, 5, 0.9, 9, 1.15, 1, 10.2, 1, 10.3, 0.85, 1, 8.4, 2.5, 6, 0.4];\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n), U8 = (n) => new Uint8ClampedArray(n);\n  const S = (params.s = {\n    HT: F32(RN), AL: U8(RN * 3), MT: U8(RN), MK: U8(RN), LI: F32(RN), SQ: F32(RN), GN: new Int32Array(RN), gen: 1,\n    HL: F32(HW * HH), AM: F32(TW * TH * 3), DI: F32(TW * TH * 3), SM: F32(TW * TH), F: F32(N * 3), L: new Float64Array(9), TM: U8(1200), LC: new Float64Array(3),\n    PX: F32(PL), PY: F32(PL), np: PL, acc: 0.01, DX: F32(16), DY: F32(16), DF: F32(16), DO: F32(16), DC: U8(16), BX: F32(256), BY: F32(256), BA: F32(256), bi: 0,\n    lx: 0.01, ly: 0.01, th: 0.01, v: 20, vt: 20, ph: 0.01, t: 0.01, cx: -30, cy: -18, gy: 230, nd: 8, sbx: 0.01, sby: 0.01, sfx: 0.01, sfy: 0.01, ux: 0.01, uy: 0.01, run: 0.01, pt: 15.4,\n    rest: 0, restT: 0.01, turn: 1, turnT: 0.01, k1: -1, k4: 0.06, wind: 0.01, live: 0, cpY: [400, 50], cpX: [0, 0], feat: [], nf: 0, sk: 0,\n  });\n  for (let k = 0; k \u003c PL; k++) S.PY[k] = (PL - 1 - k) * 0.5;\n  for (let i = 0; i \u003c 16; i++) (S.DO[i] = hash(i, 3)), (S.DC[i] = floor(hash(i, 8) * 5));\n  for (let c = 0; c \u003c 1200; c++) S.TM[c] = c \u003c 205 ? c : 205 + 50 * (1 - exp(-(c - 205) / 50));\n  plan(S), plan(S), plan(S);\n  for (let y = 230; y > -53; y--) genRow(S, y);\n  S.gy = -53;\n}\n\n// The trail swings between control points.\nfunction trailX(S, y) {\n  const Y = S.cpY, X = S.cpX;\n  let i = 0;\n  while (i \u003c Y.length - 2 && Y[i + 1] > y) i++;\n  return mix(X[i], X[i + 1], sm(0, 1, (Y[i] - y) / (Y[i] - Y[i + 1])));\n}\n// Each obstacle lies across the way on; the trail swings round its end.\nfunction plan(S) {\n  const Y = S.cpY, X = S.cpX, ly = Y[Y.length - 1], lx = X[X.length - 1];\n  if (S.sk++ % 3 === 2) return Y.push(ly - 60 - 30 * rnd()), X.push(cl(lx + (rnd() - 0.5) * 20, -24, 24));\n  const side = abs(lx) > 6 ? (lx > 0 ? 1 : -1) : rnd() \u003c 0.5 ? 1 : -1, x0 = cl(lx - side * (9 + 5 * rnd()), -30, 30), y0 = ly - 60 - 20 * rnd(), sd = floor(rnd() * 999), ph = rnd() * 6;\n  Y.push(y0, y0 - 60 - 20 * rnd()), X.push(x0, cl(x0 + side * (9 + 6 * rnd()), -24, 24));\n  if (S.nf++ % 2 === 0) {\n    // A pressure ridge, square to the sun.\n    const a = -side * (0.5 + 0.4 * rnd()), len = 60 + 40 * rnd(), dx = side * cos(a), dy = sin(a);\n    S.feat.push({ k: 0, px: x0 + side * 4, py: y0, dx, dy, len, hh: 6 + 4 * rnd(), sd, ph, side, ol: 0, y0: y0 + min(0, dy * len) - 22, y1: y0 + max(0, dy * len) + 22 });\n  } else {\n    // A lead: slope, swing, wave number and width in dx, dy, len, hh.\n    const sl = (rnd() - 0.5) * 0.22, am = 3 + 4 * rnd(), w = 10 + 6 * rnd(), e = abs(sl) * (128 + abs(x0)) + am + w;\n    S.feat.push({ k: 1, px: x0, py: y0, dx: sl, dy: am, len: 0.03 + 0.03 * rnd(), hh: w, sd, ph, side, ol: 40 + 40 * rnd(), y0: y0 - e, y1: y0 + e });\n  }\n}\n\nfunction genRow(S, y) {\n  const o = rw(y), { HT, AL, MT } = S, fs = S.feat.filter((f) => y > f.y0 && y \u003c f.y1);\n  for (let i = 0; i \u003c RX; i++) {\n    // Sastrugi: crests with a long back to the sun and a steep lee face, broken into pieces.\n    const x = i - XO, u = x * GX + y * GY, v = -x * GY + y * GX, c = v * 0.085 + 2.4 * vn(u * 0.012, v * 0.012) + 0.7 * vn(u * 0.045, v * 0.03 + 20), cf = c - floor(c), ci = floor(c);\n    const sa = (cf \u003c 0.25 ? cf / 0.25 : (1 - cf) / 0.75) * sm(0.42, 0.75, vn(u * 0.06 + ci * 7.3, ci * 3.1)) * (0.25 + 0.75 * sm(0.3, 0.6, vn(x * 0.022 + 70, y * 0.022)));\n    let h = 0.95 * sa * sa + 0.15 * vn(u * 0.09 + 50, v * 0.34) + vn(x * 0.017 + 9, y * 0.017) - 0.5;\n    const g = 0.955 + 0.045 * hash(x, y);\n    let ar = 0.9 * g, ag = 0.94 * g, ab = g, mt = 0;\n    for (const f of fs) {\n      if (f.k === 0) {\n        // Tilted slabs, rubble at their feet.\n        const rx = x - f.px, ry = y - f.py, t = rx * f.dx + ry * f.dy;\n        if (t \u003c -8 || t > f.len + 8) continue;\n        const s = abs(ry * f.dx - rx * f.dy - 3 * sin(t * 0.06 + f.ph)), bk = floor(t / 3.4), e = sm(-4, 8, t) * sm(f.len + 4, f.len - 16, t), wb = 2.4 + 2.6 * hash(bk, f.sd + 1), gx = floor(x / 3), gy = floor(y / 3);\n        const hb = f.hh * (0.45 + 0.55 * hash(bk, f.sd)) * e;\n        let hr = hb * (1 - s / wb) + 0.5 * hb * (hash(bk, f.sd + 2) - 0.5) * (t / 3.4 - bk - 0.5), q = hash(bk, f.sd + 3);\n        if (hash(gx, gy + f.sd) \u003c 0.2 * e * sm(wb + 6, wb, s) && 0.8 + 1.4 * hash(gy, gx) > hr) (hr = 0.8 + 1.4 * hash(gy, gx)), (q = hash(gx + 7, gy));\n        if (hr > 0.2 && hr > h - 0.2) (h = max(h, hr) + 0.15), (mt = 1), (ar = mix(0.84, 0.44, q)), (ag = mix(0.93, 0.76, q)), (ab = mix(1, 0.92, q));\n      } else {\n        // A refrozen lead: dark young ice with frost flowers, and open water along part of it.\n        const yc = f.py + f.dx * (x - f.px) + f.dy * sin(x * f.len + f.ph), e = abs(y - yc) / (f.hh * (0.35 + 0.3 * vn(x * 0.045, f.sd)));\n        if (e > 1) {\n          h += 0.7 * max(0, 1.4 - e);\n          continue;\n        }\n        const sx = f.side * (x - f.px), gq = mix(0.14, 0.4, e * e) * (0.85 + 0.3 * vn(x * 0.2, y * 0.2)), fr = hash(x + 3, y) \u003c 0.07 ? 0.35 + 0.3 * hash(y, x) : 0;\n        (h = -0.45), (mt = 2), (ar = gq * 0.9 + fr), (ag = gq * 0.97 + fr), (ab = gq * 1.06 + fr);\n        if (e \u003c 0.8 * sm(5, 10, sx) * sm(f.ol + 10, f.ol, sx)) (mt = 3), (h = -0.6), (ar = 0.03), (ag = 0.07), (ab = 0.11);\n      }\n    }\n    const k = o + i;\n    (HT[k] = h), (AL[k * 3] = ar * 255), (AL[k * 3 + 1] = ag * 255), (AL[k * 3 + 2] = ab * 255), (MT[k] = mt), (S.MK[k] = S.GN[k] = 0);\n  }\n}\n\n// A paw print or runner groove in the snow; young ice takes none.\nfunction stamp(S, x, y, depth, bit) {\n  const i = floor(x + 0.5) + XO, yy = floor(y + 0.5), k = rw(yy) + i, A = S.AL;\n  if (i \u003c 0 || i >= RX || S.MK[k] & bit || S.MT[k] > 1) return;\n  S.MK[k] |= bit;\n  (S.HT[k] -= depth), (A[k * 3] *= 0.93), (A[k * 3 + 1] *= 0.95);\n  // Light it again.\n  for (let j = -2; j \u003c 3; j++) for (let q = max(0, i - 2); q \u003c min(RX, i + 3); q++) S.GN[rw(yy + j) + q] = 0;\n}\n\n// The point s LEDs back along the lead dog's path.\nconst PP = new Float64Array(2);\nfunction pathAt(S, s) {\n  const f = S.acc, last = (S.np - 1) & (PL - 1);\n  if (s \u003c= f) return (PP[0] = mix(S.lx, S.PX[last], s / max(f, 1e-6))), (PP[1] = mix(S.ly, S.PY[last], s / max(f, 1e-6)));\n  const k = (s - f) * 2, i = floor(k), r = k - i, a = (S.np - 1 - i) & (PL - 1), b = (S.np - 2 - i) & (PL - 1);\n  (PP[0] = mix(S.PX[a], S.PX[b], r)), (PP[1] = mix(S.PY[a], S.PY[b], r));\n}\n// Dogs in pairs on the path, the sled behind.\nfunction layout(S) {\n  // Long teams close up to fit the panel.\n  const n = S.nd, odd = n & 1, pt = (S.pt = min(PITCH, 76 / (((n + 1) >> 1) - 1))), sf = (((n + 1) >> 1) - 1) * pt + 8 * Z;\n  for (let i = 0; i \u003c n; i++) {\n    const side = odd && !i ? 0 : (odd ? i - 1 : i) & 1 ? 1 : -1, s = ((i + odd) >> 1) * pt + 0.6 * (S.DO[i] - 0.5) + (side > 0 ? 3.5 * Z : 0);\n    pathAt(S, s - 1);\n    const ax = PP[0], ay = PP[1];\n    pathAt(S, s + 1);\n    const fx = ax - PP[0], fy = ay - PP[1], l = sqrt(fx * fx + fy * fy) || 1;\n    pathAt(S, s);\n    (S.DX[i] = PP[0] - (fy / l) * side * LAT), (S.DY[i] = PP[1] + (fx / l) * side * LAT), (S.DF[i] = atan2(fx / l, -fy / l));\n  }\n  pathAt(S, sf), (S.sfx = PP[0]), (S.sfy = PP[1]);\n  pathAt(S, sf + SLED), (S.sbx = PP[0]), (S.sby = PP[1]);\n  (S.ux = (S.sfx - S.sbx) / SLED), (S.uy = (S.sfy - S.sby) / SLED);\n}\n\nfunction step(S, d, k4) {\n  S.t += d;\n  if (S.rest && (S.restT += d) > 10) S.rest = 0;\n  S.v += ((S.rest ? 0 : S.vt) - S.v) * min(1, d * (S.rest ? 1.6 : 0.9));\n  const v = S.v, rate = 0.065 * v * d;\n  // The lead dog aims 22 LEDs up the trail, or swings on a call.\n  let des = S.turnT > 0 ? ((S.turnT -= d), S.turn * 1.15) : cl(atan2(trailX(S, S.ly - 22) - S.lx, 22), -0.5, 0.5);\n  if (abs(S.lx) > 44) des = S.lx > 0 ? -0.6 : 0.6;\n  S.th += cl(des - S.th, -rate, rate);\n  const dist = v * d, fx = sin(S.th), fy = -cos(S.th), oph = S.ph;\n  (S.lx += fx * dist), (S.ly += fy * dist), (S.acc += dist), (S.ph += dist / STRIDE);\n  for (; S.acc >= 0.5; S.np++) (S.acc -= 0.5), (S.PX[S.np & (PL - 1)] = S.lx - fx * S.acc), (S.PY[S.np & (PL - 1)] = S.ly - fy * S.acc);\n  layout(S);\n  // Each foot leaves a print and each stride a breath; the runners cut grooves.\n  for (let i = 0; i \u003c S.nd; i++) {\n    const a = sin(S.DF[i]), b = -cos(S.DF[i]), o = S.DO[i];\n    for (let l = 0; l \u003c 4; l++) {\n      const fa = (LJ[l] + 1.5) * Z, fb = l & 1 ? Z : -Z;\n      if (floor(S.ph + o + LO[l]) > floor(oph + o + LO[l])) stamp(S, S.DX[i] + a * fa - b * fb, S.DY[i] + b * fa + a * fb, 0.22, 1);\n    }\n    if (floor(S.ph + o * 3) > floor(oph + o * 3)) {\n      const p = S.bi++ & 255;\n      (S.BX[p] = S.DX[i] + a * 4.6 * Z), (S.BY[p] = S.DY[i] + b * 4.6 * Z), (S.BA[p] = 0.01);\n    }\n  }\n  const ux = S.ux, uy = S.uy;\n  for (let e = -1; e \u003c= dist - 0.5; e += 0.5) for (let r = -2 * Z; r \u003c 3 * Z; r += 4 * Z) stamp(S, S.sbx - uy * r + ux * e, S.sby + ux * r + uy * e, 0.3, 2);\n  // The camera keeps the musher at row 118.\n  S.cx += ((S.lx + S.sbx) / 2 - 32 + (S.k1 \u003c 0.6 ? 6 : -6) - S.cx) * min(1, d * 1.5);\n  S.cy = S.sby - 118;\n  while (S.gy > S.cy - 40) genRow(S, --S.gy);\n  while (S.cpY[S.cpY.length - 1] > S.ly - 420) plan(S);\n  while (S.cpY.length > 4 && S.cpY[2] > S.ly + 300) S.cpY.shift(), S.cpX.shift();\n  S.feat = S.feat.filter((f) => f.y0 \u003c S.gy);\n  for (let p = 0, wv = (4 + 60 * k4) * d; p \u003c 256; p++) if (S.BA[p] \u003c 1.5) (S.BA[p] += d), (S.BX[p] += GX * wv), (S.BY[p] += GY * wv);\n  S.wind += (8 + 90 * k4) * d;\n}\n\n// Each leg from the side, joint to knee to foot; the hind pair lands first.\nconst LO = [0.5, 0.58, 0, 0.08], LJ = [1.1, 1.1, -1.9, -1.9], LG = new Float64Array(24);\nfunction legs(ph, run, bob) {\n  for (let l = 0; l \u003c 4; l++) {\n    const p = (((ph + LO[l]) % 1) + 1) % 1, R = 1.8 * run, ja = LJ[l], jh = 2.2 + bob, u = (p - 0.42) / 0.58;\n    const fa = ja + (p \u003c 0.42 ? R * (1 - p / 0.21) : -R + 2 * R * u * u * (3 - 2 * u)), fh = p \u003c 0.42 ? 0 : 0.9 * run * sin(PI * u);\n    const dx = fa - ja, dy = fh - jh, dd = sqrt(dx * dx + dy * dy), k = sqrt(max(0, 1.69 - (dd * dd) / 4)) / max(dd, 0.01), o = l * 6;\n    (LG[o] = ja), (LG[o + 1] = jh), (LG[o + 2] = (ja + fa) / 2 + dy * k), (LG[o + 3] = (jh + fh) / 2 - dx * k), (LG[o + 4] = fa), (LG[o + 5] = fh);\n  }\n}\n// Distance to a capsule; OO keeps the offset for shading.\nconst OO = new Float64Array(2);\nfunction cap(a, b, a0, b0, a1, b1, r) {\n  const pa = a - a0, pb = b - b0, ba = a1 - a0, bb = b1 - b0, t = cl((pa * ba + pb * bb) / (ba * ba + bb * bb + 1e-9), 0, 1), oa = pa - ba * t, ob = pb - bb * t;\n  (OO[0] = oa), (OO[1] = ob);\n  return sqrt(oa * oa + ob * ob) - r;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 8, 0.06], k1 = cl(k[0], 0, 1), b = input.btnPressed || [];\n  (S.vt = 10 * cl(k[1], 0.2, 3)), (S.nd = cl(Math.round(k[2]), 8, 14)), (S.k4 = cl(k[3], 0, 1));\n  if (k1 !== S.k1) {\n    // New light: all ice is lit again.\n    let i = 0;\n    while (i \u003c KL.length - 2 && k1 > KL[i + 1][0]) i++;\n    for (let j = 1; j \u003c 9; j++) S.L[j] = mix(KL[i][j], KL[i + 1][j], sm(KL[i][0], KL[i + 1][0], k1));\n    (S.k1 = k1), S.gen++;\n  }\n  for (; !S.live; S.live = S.t > 6 ? 1 : 0) step(S, 1 / 30, S.k4);\n  if (b[0]) (S.turn = S.lx > 0 ? -1 : 1), (S.turnT = 1.6);\n  if (b[1]) (S.rest = 1 - S.rest), (S.restT = 0);\n  step(S, cl(dt || 0, 0, 0.1), S.k4);\n}\n\n// Per frame: the frame, the shadow mask, the light and the LED paint works on.\nlet F, SM, LC, LL, Lx, Ly, cE, sE, PO, La, Lb;\nfunction put(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  (F[o] += (r - F[o]) * a), (F[o + 1] += (g - F[o + 1]) * a), (F[o + 2] += (b - F[o + 2]) * a);\n}\n// Lay a part (distance d, radius r, 0 if flat) of colour c on LED PO.\nfunction paint(d, r, c, f) {\n  const q = cl(0.5 - d * Z, 0, 1) * f, nz = r ? sqrt(max(0, 1 - (OO[0] * OO[0] + OO[1] * OO[1]) / (r * r))) : 1, df = r ? max(0, ((OO[0] * La + OO[1] * Lb) / r) * cE + nz * sE) : sE;\n  if (q > 0) for (let k = 0; k \u003c 3; k++) F[PO + k] += (c[k] * (LL[k + 1] * min(2, df / sE) + LL[k + 4] * (0.55 + 0.45 * nz)) - F[PO + k]) * q;\n}\n// Nearest capsule of side view P; bob lifts the body.\nfunction side(P, a, h, bob) {\n  let d = 99;\n  for (let j = 0; j \u003c P.length; j += 5) d = min(d, cap(a, h, P[j], P[j + 1] + bob, P[j + 2], P[j + 3] + bob, P[j + 4]));\n  return d;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.k1 \u003c 0) return;\n  (F = S.F), (SM = S.SM), (LC = S.LC), (LL = S.L);\n  const { HL, HT, AL, MT, AM, DI, L, TM, LI, SQ, GN, cx, cy, t, k4, gen, nd: n } = S, run = (S.run = cl(S.v / 6, 0, 1));\n  // Sun in the upper left, moon in the upper right.\n  const night = S.k1 > 0.6, lx = (Lx = night ? 0.85 : -0.8), ly = (Ly = night ? -0.53 : -0.6), te = L[7], aur = L[8];\n  (cE = 1 / sqrt(1 + te * te)), (sE = te * cE);\n  const dON = L[1] + L[2] + L[3] > 3, Kx = -lx / te, Ky = -ly / te, ox = floor(cx), oy = floor(cy), fx = cx - ox, fy = cy - oy;\n  let hmax = -9, hmin = 9;\n  for (let j = 0, q = 0; j \u003c HH; j++)\n    for (let i = 0, ro = rw(oy - MY + j); i \u003c HW; i++, q++) {\n      const h = (HL[q] = HT[ro + cl(ox - MX + i + XO, 0, RX - 1)]);\n      (hmax = max(hmax, h)), (hmin = min(hmin, h));\n    }\n  const ms = min(46, floor((hmax - hmin) / te) + 1);\n  for (let ty = 0; ty \u003c TH; ty++)\n    for (let tx = 0, ro = rw(oy + ty); tx \u003c TW; tx++) {\n      const wi = ro + cl(ox + tx + XO, 0, RX - 1);\n      // Ice keeps its light until the light or the ice changes.\n      if (GN[wi] !== gen) {\n        const k = (ty + MY) * HW + tx + MX, h = HL[k], gx = (HL[k + 1] - HL[k - 1]) * 0.7, gy = (HL[k + HW] - HL[k - HW]) * 0.7;\n        const inv = 1 / sqrt(gx * gx + gy * gy + 1), dif = (-gx * lx * cE - gy * ly * cE + sE) * inv;\n        let lt = 0;\n        if (dif > 0 && dON) {\n          let px = tx + MX + 0.5, py = ty + MY + 0.5, rh = h, oc = -1;\n          for (let s = 0; s \u003c ms && rh \u003c= hmax; s++) (px += lx), (py += ly), (rh += te), (oc = max(oc, HL[(py | 0) * HW + (px | 0)] - rh));\n          lt = min(2.2, dif / sE) * (1 - sm(-0.15, 0.3, oc));\n        }\n        // Slopes facing the light's side of the sky catch more sky.\n        const cav = cl(((HL[k - 1] + HL[k + 1] + HL[k - HW] + HL[k + HW]) * 0.25 - h) * 0.6, -0.15, 0.3), nh = cl((-gx * lx - gy * ly) * inv * 2.5, -0.6, 0.6);\n        (LI[wi] = lt), (SQ[wi] = (0.6 + 0.4 * inv) * (1 - cav) * (1 + 0.5 * nh)), (GN[wi] = gen);\n      }\n      // Aurora light; young ice and water mirror the sky.\n      const sk = SQ[wi], mt = MT[wi], o = (ty * TW + tx) * 3, lit = LI[wi] * (mt === 3 ? 0.1 : 1);\n      const eg = aur > 0 ? aur * 100 * (0.5 + 0.5 * sin((ox + tx) * 0.05 + (oy + ty) * 0.013 + 1.4 * sin((oy + ty) * 0.021 - t * 0.2) + t * 0.3)) ** 8 : 0;\n      const rf = mt > 1 ? 0.3 : 0;\n      for (let c = 0; c \u003c 3; c++) (AM[o + c] = (AL[wi * 3 + c] / 255) * (L[4 + c] * sk + eg * (c === 1 ? 1 : 0.15)) + rf * L[4 + c]), (DI[o + c] = (AL[wi * 3 + c] / 255) * L[1 + c] * lit);\n    }\n\n  // Shadows: each side view thrown along the snow.\n  SM.fill(0);\n  const ux = S.ux, uy = S.uy;\n  for (let i = 0; i \u003c n && dON; i++) {\n    const a = S.DF[i], ph = S.ph + S.DO[i], bob = 0.22 * run * sin(2 * PI * ph);\n    legs(ph, run, bob);\n    shadowOf(S.DX[i] - cx + fx, S.DY[i] - cy + fy, sin(a), -cos(a), Kx, Ky, 4.6, 5.6, DOG, bob, 1);\n  }\n  if (dON) shadowOf(S.sbx - cx + fx, S.sby - cy + fy, ux, uy, Kx, Ky, 16, 11, SLD, 0, 0);\n  // Snow between grid points, shadows taken out.\n  for (let i = 0, o = 0; i \u003c TW * TH; i++) for (let c = 0, s = 1 - 0.55 * SM[i]; c \u003c 3; c++, o++) AM[o] += DI[o] * s;\n  const w00 = (1 - fx) * (1 - fy), w10 = fx * (1 - fy), w01 = (1 - fx) * fy, w11 = fx * fy;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, q = y * TW * 3; x \u003c W; x++) for (let c = 0; c \u003c 3; c++, p++, q++) F[p] = w00 * AM[q] + w10 * AM[q + 3] + w01 * AM[q + TW * 3] + w11 * AM[q + TW * 3 + 3];\n\n  // Spindrift, under the dogs.\n  for (let c = 0; c \u003c 3; c++) LC[c] = L[4 + c] * 0.8 + L[1 + c] * 0.9;\n  if (k4 > 0.01) {\n    const th = 0.68 - 0.36 * k4, hz = 0.24 * k4 * k4;\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        const wx = x + cx, wy = y + cy, al = wx * GX + wy * GY - S.wind, ac = -wx * GY + wy * GX, n1 = 0.62 * vn(al * 0.055, ac * 0.325);\n        if (n1 + 0.38 \u003c th && hz \u003c 0.004) continue;\n        const q = sm(th, th + 0.25, n1 + 0.38 * vn(al * 0.125 + 17, ac * 0.65 + 5)) * (0.4 + 0.6 * k4) * 0.9 + hz, p = i * 3;\n        for (let c = 0; c \u003c 3; c++) F[p + c] += ((LC[c] + 25 + 7.5 * c) * 1.1 - F[p + c]) * q;\n      }\n  }\n  // The team, then breath.\n  gangline(S);\n  for (let i = 0; i \u003c n; i++) dog(S, i);\n  sled(S.sbx - cx, S.sby - cy, ux, uy);\n  for (let p = 0; p \u003c 256; p++) {\n    const ag = S.BA[p], bx = S.BX[p] - cx, by = S.BY[p] - cy, r = 0.7 + ag * (1.2 + k4), al = 0.32 * (1 - ag / 1.5) * (1 - 0.5 * k4);\n    for (let y = floor(by - r); y \u003c= by + r && ag \u003c 1.5; y++)\n      for (let x = floor(bx - r); x \u003c= bx + r; x++) put(x, y, LC[0] * 1.15, LC[1] * 1.15, LC[2] * 1.15, al * (1 - ((x + 0.5 - bx) ** 2 + (y + 0.5 - by) ** 2) / (r * r)));\n  }\n  const tm = (v) => TM[min(1199, v | 0)];\n  for (let i = 0, p = 0; i \u003c N; i++, p += 3) display.setPixel(i & 63, i >> 6, tm(F[p]), tm(F[p + 1]), tm(F[p + 2]));\n}\n\n// A shadow: each grid point maps back to (a, h) in side view P.\nfunction shadowOf(x, y, Fx, Fy, Kx, Ky, A, Hh, P, bob, withLegs) {\n  const det = Fx * Ky - Fy * Kx, ax = abs(Fx) * A * Z, ay = abs(Fy) * A * Z, hx = Kx * Hh * Z, hy = Ky * Hh * Z;\n  for (let py = max(0, floor(y - ay + min(0, hy))); py \u003c= min(TH - 1, y + ay + max(0, hy)) && abs(det) > 0.05; py++)\n    for (let px = max(0, floor(x - ax + min(0, hx))); px \u003c= min(TW - 1, x + ax + max(0, hx)); px++) {\n      const rx = (px + 0.5 - x) / Z, ry = (py + 0.5 - y) / Z, a = (rx * Ky - ry * Kx) / det, h = (Fx * ry - Fy * rx) / det, i = py * TW + px;\n      if (h \u003c -0.6 || h > Hh || a \u003c -A || a > A) continue;\n      let d = side(P, a, h, bob);\n      for (let o = 0; o \u003c 24 && withLegs && h \u003c 3.2; o += 6) if (abs(a - LG[o + 2]) \u003c 2.2) d = min(d, cap(a, h, LG[o], LG[o + 1], LG[o + 2], LG[o + 3], 0.36), cap(a, h, LG[o + 2], LG[o + 3], LG[o + 4], LG[o + 5], 0.28));\n      SM[i] = max(SM[i], cl(0.6 - d * 1.4 * Z, 0, 1));\n    }\n}\n// The gangline, in soft dots from the lead dog to the sled.\nfunction gangline(S) {\n  for (let s = (S.nd & 1 ? 2.6 : -1) * Z; s \u003c (((S.nd + 1) >> 1) - 1) * S.pt + 8 * Z; s += 0.6) {\n    pathAt(S, s);\n    const x = PP[0] - S.cx - 0.5, y = PP[1] - S.cy - 0.5;\n    for (let j = 0; j \u003c 4; j++) {\n      const X = floor(x) + (j & 1), Y = floor(y) + (j >> 1);\n      put(X, Y, LINE[0] * LC[0], LINE[1] * LC[1], LINE[2] * LC[2], 0.45 * (1 - abs(x - X)) * (1 - abs(y - Y)));\n    }\n  }\n}\n\n// A dog from above: legs, saddle, harness, neck, head, curled tail.\nfunction dog(S, i) {\n  const x = S.DX[i] - S.cx, y = S.DY[i] - S.cy, an = S.DF[i], Fx = sin(an), Fy = -cos(an), ph = S.ph + S.DO[i], [BK, SD, FC] = COAT[S.DC[i]], ext = sin(2 * PI * ph) * S.run, ts = i & 1 ? 1 : -1;\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  legs(ph, S.run, 0);\n  for (let py = max(0, floor(y - 5.4 * Z)); py \u003c= min(H - 1, y + 5.4 * Z); py++)\n    for (let px = max(0, floor(x - 5.4 * Z)); px \u003c= min(W - 1, x + 5.4 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx;\n      if (a * a + b * b > 30) continue;\n      PO = (py * W + px) * 3;\n      for (let l = 0; l \u003c 24; l += 6) paint(cap(a, b, LG[l], l % 12 ? 0.85 : -0.85, LG[l + 4], l % 12 ? 0.95 : -0.95, 0.38), 0.38, SD, 1);\n      const d = cap(a, b, -2.1 - 0.25 * ext, 0, 1.1 + 0.15 * ext, 0, 1.12), q = cl(0.5 - d * Z, 0, 1);\n      paint(d, 1.12, SD, 1);\n      if (q > 0) paint(d, 1.12, BK, sm(0.85, 0.35, abs(OO[1])) * q), abs(a - 0.7) \u003c 0.45 && paint(d, 1.12, HARN, q);\n      paint(cap(a, b, 1.4, 0, 2.7, 0, 0.55), 0.55, SD, 1);\n      paint(cap(a, b, 3, 0, 3.3, 0, 0.8), 0.8, FC, 1);\n      paint(cap(a, b, 3.5, 0, 4.4, 0, 0.42), 0.42, FC, 1);\n      paint(cap(a, b, -2.2, ts * 0.35, -2.2, ts * 0.35, 0.75), 0.75, FC, 1);\n    }\n}\n\n// The sled: runners, slats, load, handlebar, the musher.\nfunction sled(x, y, Fx, Fy) {\n  (La = (Lx * Fx + Ly * Fy) * cE), (Lb = (-Lx * Fy + Ly * Fx) * cE);\n  for (let py = max(0, floor(y - 17 * Z)); py \u003c= min(H - 1, y + 17 * Z); py++)\n    for (let px = max(0, floor(x - 17 * Z)); px \u003c= min(W - 1, x + 17 * Z); px++) {\n      const qx = (px + 0.5 - x) / Z, qy = (py + 0.5 - y) / Z, a = qx * Fx + qy * Fy, b = -qx * Fy + qy * Fx, ab = abs(b);\n      if (a \u003c -3 || a > 16 || ab > 3.2) continue;\n      PO = (py * W + px) * 3;\n      paint(cap(a, ab, -2.2, 2, 14.6, 2, 0.4), 0, DARK, 1);\n      paint(max(ab - 1.7, abs(a - 8.4) - 5.6), 0, a % 1.6 \u003c 1.1 ? WOOD : DARK, 1);\n      paint(max(ab - 1.3, abs(a - 8.7) - 3.2) - 0.25, 0, LOAD, 1);\n      paint(cap(a, b, 2.7, -2.3, 2.7, 2.3, 0.35), 0, DARK, 1);\n      paint(cap(a, b, 0.7, -1.4, 0.7, 1.4, 1), 1, RED, 1);\n      paint(cap(a, b, 1, 0, 1, 0, 1.1), 1.1, FUR, 1);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Dogs=8..14, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"A low gold sun at 0, each dog's shadow nearly three times its height; at a third the sun sits on the horizon in rose light with longer shadows; blue twilight at 0.6; at 1 moonlight from the other side and green aurora light on the snow."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the team covers 20 LEDs a second and each dog takes about one and a half strides; 0.2 is ten times slower."},{"name":"Dogs","min":8,"max":14,"about":"Eight dogs in four pairs up to fourteen in seven; an odd number runs a single lead dog in front."},{"name":"Wind","min":0,"max":1,"about":"Turned up from calm, spindrift streams along the sastrugi in thicker, faster ribbons and blows the dogs' breath away; at 1 it hazes the ice."}],"start":[0,2,8,0.06],"measures":{"motion":0.9731,"detail":0.0564,"edges":0.2725,"complexity":2.1928,"coverage":0.9989,"colour":0.1125,"drift":0.1372},"knobResponse":[0.4249,0.2371,0.2343,0.1374]},{"slug":"slinky","title":"Slinky","family":"toy","round":21,"note":"슬링키가 패널 높이만큼 지그재그로 꺾인 계단을 한 칸씩 뒤집히며 내려가요. 코일이 활처럼 휘어 아래 칸으로 쏟아지고, 내려앉은 칸마다 계단등이 켜져요.","idea":"A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","layer":{"id":"layer-slinky","type":"code","name":"slinky","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spring","min":0,"max":1,"about":"Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower."},{"name":"Rise","min":6,"max":12,"about":"How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down."},{"name":"Lamp","min":-1,"max":1,"about":"The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them."}],"start":[0,2,6,0.06],"measures":{"motion":0.1152,"detail":0.057,"edges":0.2572,"complexity":1.8838,"coverage":0.9943,"colour":0.1312,"drift":0.056},"knobResponse":[0.1557,0.043,0.0908,0.2999]},{"slug":"smalti","title":"Smalti","family":"glass","round":19,"note":"라벤나 갈라 플라키디아의 별 궁륭과 기도하는 사도를 어두운 줄눈의 유리와 금 테세라로 128줄에 짜요. 등불이 벽을 오르내리면 저마다 조금씩 기운 금 큐브가 빛의 각도를 만날 때마다 번쩍여요.","idea":"A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","layer":{"id":"layer-smalti","type":"code","name":"smalti","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven."},{"name":"Tesserae","min":2,"max":4,"about":"How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes."},{"name":"Gold","min":0,"max":1,"about":"At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1."}],"start":[0,2,2,0.06],"measures":{"motion":0.0438,"detail":0.2001,"edges":1,"complexity":2.3202,"coverage":0.4186,"colour":0.2372,"drift":0.1208},"knobResponse":[0.0652,0.0785,0.082,0.0729]},{"slug":"snow-monkeys","title":"Snow Monkeys","family":"mammal","round":25,"note":"눈 내리는 지고쿠다니의 해 질 녘, 일본원숭이들이 김 오르는 노천 온천에 어깨까지 잠겨 머리에 눈을 얹은 채 졸거나 서로 털을 골라 줘요. 바위 위의 어미가 물로 걸어 들어오고, 덩어리진 김은 눈 덮인 삼나무 비탈을 지나 패널 꼭대기까지 피어올라요. K1 을 끝까지 돌리면 밤이 되어 석등이 김을 주황으로 물들이고, K1 을 누르면 새끼가 물보라를 일으키며 뛰어들어요.","idea":"At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.","buttons":"K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.","code":"// ===== Patternflow pattern =====\n// Title:   Snow Monkeys\n// Family:  mammal\n// Idea:    At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Japanese macaques (Macaca fuscata) that bathe in the hot spring at Jigokudani, Nagano\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1\n//\n// Knob 1: Light. The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it.\n// Knob 2: Speed. At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower.\n// Knob 3: Monkeys. How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam.\n// Knob 4: Wind. Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it.\n// Buttons: K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.\n\nconst W = 64, H = 128, N = W * H, GW = 32, GH = 64;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The back edge of the pool, and how big a monkey stands at a depth row.\nconst PB = 67;\nconst scl = (y) => 0.74 + (y - PB) * 0.0135;\n// The stone lantern's fire box.\nconst [LX, LY] = [8.5, 50.5];\n// The light from evening to night: ambient, sky overhead, sky at the ridge,\n// lit steam, and the lantern's strength.\nconst LIGHT = [\n  [0, 0.5, 0.6, 0.86, 24, 44, 104, 70, 98, 160, 196, 212, 240, 0.25],\n  [0.5, 0.36, 0.4, 0.66, 16, 20, 62, 84, 66, 118, 150, 156, 196, 0.65],\n  [1, 0.2, 0.24, 0.42, 5, 8, 24, 18, 24, 54, 84, 92, 130, 1.1],\n];\nconst LC = [1, 0.62, 0.3];\nconst SNOW = [232, 238, 250], FUR = [218, 184, 150], FACE = [250, 96, 92], EAR = [214, 132, 124], HAND = [120, 84, 78], EYE = [40, 22, 20];\nconst ROCK = [70, 64, 62], NEEDLE = [24, 46, 36], TRUNK = [52, 38, 30], WATER = [34, 70, 74], STONE = [118, 114, 108];\n// Boulders as half ellipses standing on their water line: centre, radii,\n// depth row. The back rim, the boulder in the pool, the near rocks.\nconst ROCKS = [\n  [2, 68, 12, 8, 66], [17, 69, 8, 6, 66], [30, 69, 9, 5, 66], [45, 68, 11, 6, 66], [61, 68, 10, 9, 66],\n  [53, 92, 13, 12, 90],\n  [6, 132, 15, 14, 126], [28, 133, 12, 12, 127], [48, 132, 11, 13, 126], [64, 129, 10, 15, 125],\n];\n// Cedars on the slope, far to near: apex x and row, height, nearness.\nconst TREES = [];\nfor (let i = 0; i \u003c 10; i++) TREES.push([2 + i * 6.7 + 3 * hash(i, 1), 4 + 9 * hash(i, 2), 16 + 8 * hash(i, 3), 0.3]);\nfor (let i = 0; i \u003c 7; i++) TREES.push([i * 10.5 + 5 * hash(i, 4), 16 + 12 * hash(i, 5), 24 + 10 * hash(i, 6), 0.6]);\nTREES.push([3, 12, 52, 1], [61, 6, 56, 1]);\n// Places in the order the Monkeys knob fills them: x, depth row (the seat\n// row on the rim), how low it sits in the water (0 shoulders out, 1 chin in\n// it), and what it does (0 looks about, 1 dozes, 2 grooms the one before\n// it, 3 sits on the rim rocks).\nconst SLOTS = [\n  [24, 101, 0.15, 1], [34, 93, 0.1, 2], [11, 117, 0.6, 1], [30, 64.5, 0, 3], [52, 119, 0.25, 0], [8, 90, 0.2, 0],\n  [41, 63, 0, 3], [61, 110, 0.3, 0], [31, 79, 0.15, 0], [37, 118, 0.3, 1], [23, 121, 0.5, 1], [14, 77, 0.2, 1],\n  [5, 104, 0.2, 0], [46, 86, 0.1, 0],\n];\n// The boulder seats and the way down into the water, as x and bottom row.\nconst SEAT = [52, 81], EDGE = [46, 83.5], FOOT = [44, 93], SPOT = [47, 103], BSEAT = [60, 83], BLAND = [53, 102], BFOOT = [60, 94];\n\nfunction ramp(g, c) {\n  let j = 0;\n  while (j \u003c LIGHT.length - 2 && g > LIGHT[j + 1][0]) j++;\n  const a = LIGHT[j], b = LIGHT[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, f: F32(N * 3), bg: F32(N * 3), il: F32(N * 3), lm: F32(N), z: new Uint8Array(N), G: F32(GW * GH), key: -1,\n    puffs: [], drops: [], acc: 0, vent: 0.5, fx: 0, fy: 0, gust: 0, w: 0, k1: 0, n: 3, spl: null,\n    R: { st: 0, t: 0, dur: 3, lk: 0, lt: 0, lc: 1 }, B: { st: 0, t: 0, nj: 6.2, lk: 0, lt: 0, lc: 2 },\n  });\n  P.sd = 7;\n  P.mk = SLOTS.map(([x, y, sk, pose], i) => ({ x, y, sk, pose, s: pose > 2 ? 0.86 : scl(y), p: 0, sw: i * 0.3, hy: y - 8, lk: pose === 2 ? -0.8 : 0, lt: 0, lc: 1 + rnd() * 3, e: pose === 1 ? 1 : 0, bl: 2 + rnd() * 3, ph: rnd() * 7, i }));\n  P.flakes = Array.from({ length: 180 }, () => {\n    const z = rnd();\n    return { x: rnd() * W, y: rnd() * H, z, ph: rnd() * 7, land: 40 + z * 88 };\n  });\n  P.flakes.forEach((f) => (f.y = rnd() * f.land));\n  P.rg = Array.from({ length: W }, (_, x) => 8 + 5 * vn(x * 0.07, 1.3) - 0.06 * x);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) P.lm[y * W + x] = exp(-((x + 0.5 - LX) ** 2 + (y + 0.5 - LY) ** 2 * 0.8) / 1500);\n}\n\nfunction spawn(P, x, y, a, g = rnd) {\n  P.puffs.push({ x, y, a, r: 2.5 + 2.5 * g(), age: 0, life: 7 + 5 * g(), vy: -(6 + 5 * g()), ph: g() * 7 });\n}\n\n// The steam: puffs off the water, thick clumps from the spring's mouth, all\n// rising, growing and fading, swayed by the gusts and leaned by the wind.\nfunction steam(P, d) {\n  const w = P.w;\n  P.gust = 0.55 * sin(P.t * 0.31) + 0.3 * sin(P.t * 0.83 + 2);\n  for (P.acc += d * 1.8; P.acc > 1; P.acc--) spawn(P, 2 + rnd() * 60 - w * 22, 74 + rnd() * 44, 0.2 + 0.25 * rnd());\n  if ((P.vent -= d) \u003c 0) {\n    P.vent = 0.7 + rnd() * 1.1;\n    const vx = [9, 22, 36][floor(rnd() * 3)] + rnd() * 6 - 3 - w * 14, vy = 72 + rnd() * 16;\n    for (let n = 0; n \u003c 3; n++) spawn(P, vx + rnd() * 8 - 4, vy + rnd() * 6, 0.4 + 0.25 * rnd());\n  }\n  // Wet fur steams in the cold: a wisp off each monkey's head now and then,\n  // from a generator of its own so the rest of the steam keeps its course.\n  for (const m of P.mk)\n    if (m.p > 0.5 && (m.sw -= d) \u003c 0) {\n      const g = () => ((P.sd = (Math.imul(P.sd, 1103515245) + 12345) >>> 0) / 4294967296);\n      m.sw = 0.35 + g() * 0.6;\n      spawn(P, m.x + (g() - 0.5) * 6 * m.s, m.hy - 3 * m.s, 0.25 + 0.2 * g(), g);\n    }\n  const wx = w * 15 + P.gust * 7;\n  for (const q of P.puffs) {\n    q.age += d;\n    const up = sm(84, 20, q.y);\n    q.x += (wx * (0.3 + 0.7 * up) + 1.6 * sin(q.age * 1.3 + q.ph)) * d;\n    q.y += q.vy * (0.5 + 0.5 * sm(0, 2.5, q.age)) * d;\n    q.r += (0.9 + 0.8 * abs(w)) * d;\n  }\n  P.puffs = P.puffs.filter((q) => q.age \u003c q.life * (1 - 0.35 * abs(w)) && q.y + q.r > -4 && q.x > -30 && q.x \u003c 94);\n  P.fx -= wx * 0.2 * d;\n  P.fy += 1.8 * d;\n}\n\n// Where the mother is on her way between the boulder and the pool, u 0..1.\nfunction path(u) {\n  if (u \u003c 0.3) {\n    const q = sm(0, 0.3, u);\n    return [mix(SEAT[0], EDGE[0], q), mix(SEAT[1], EDGE[1], q), 999, 90];\n  }\n  if (u \u003c 0.55) {\n    const q = sm(0.3, 0.55, u);\n    return [mix(EDGE[0], FOOT[0], q), mix(EDGE[1], FOOT[1], q), 999, 90 + 3 * q];\n  }\n  const q = sm(0.55, 1, u), wl = mix(FOOT[1], SPOT[1], q);\n  return [mix(FOOT[0], SPOT[0], q), wl + 9.5 * q * scl(wl), wl, wl];\n}\n\nfunction look(m, d) {\n  if ((m.lc -= d) \u003c 0) (m.lc = 1.2 + rnd() * 3), (m.lt = floor(rnd() * 3) - 1);\n  m.lk += (m.lt - m.lk) * min(1, d * 5);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.k1 = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 3, 14));\n  P.w = cl(k[3], -1, 1);\n  if (!P.init) {\n    // Open on a pool already steaming.\n    for (let i = 0; i \u003c 120; i++) (P.t += 0.1), steam(P, 0.1);\n    P.t = 0;\n    for (const m of P.mk) m.p = m.i \u003c P.n ? 1 : 0;\n    P.init = true;\n  }\n  const T = (P.t += d);\n  steam(P, d);\n  for (const m of P.mk) {\n    m.p = cl(m.p + (m.i \u003c P.n ? d : -d) * 0.8, 0, 1);\n    if (m.pose % 3 === 0) {\n      look(m, d);\n      if ((m.bl -= d) \u003c 0) m.bl = 2 + rnd() * 4;\n      m.e = m.bl \u003c 0.15 ? 1 : 0;\n    }\n  }\n  // The mother sits on the boulder until she wades in to soak. Later she climbs out again.\n  const R = P.R;\n  if ((R.t += d) >= R.dur) {\n    R.st = (R.st + 1) % 4;\n    (R.t = 0), (R.dur = [16 + rnd() * 6, 3, 18 + rnd() * 6, 3.4][R.st]);\n  }\n  look(R, d);\n  // The baby on the boulder: a leap, a splash, a paddle back and a climb.\n  const B = P.B;\n  if (input.btnPressed && input.btnPressed[0] && B.st === 0) B.nj = 0;\n  if (B.st === 0 && (B.nj -= d) \u003c= 0) (B.st = 1), (B.t = 0);\n  if (B.st) B.t += d;\n  if (B.st === 1 && B.t >= 0.7) {\n    (B.st = 2), (B.t = 0), (P.spl = { x: BLAND[0], y: BLAND[1], t: 0 });\n    for (let n = 0; n \u003c 34; n++) {\n      const a = (rnd() - 0.5) * 2.4;\n      P.drops.push([BLAND[0] + a * 2, BLAND[1] - 1, a * 14 + (rnd() - 0.5) * 6, -12 - rnd() * 22, BLAND[1] + (rnd() - 0.3) * 6]);\n    }\n    for (let n = 0; n \u003c 4; n++) spawn(P, BLAND[0] + rnd() * 10 - 5, BLAND[1] - 4, 0.8);\n  }\n  if (B.st === 2 && B.t >= 4.2) (B.st = 3), (B.t = 0);\n  if (B.st === 3 && B.t >= 1.3) (B.st = 0), (B.t = 0), (B.nj = 24 + rnd() * 10);\n  look(B, d);\n  if (P.spl && (P.spl.t += d) > 2) P.spl = null;\n  P.drops = P.drops.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 70 * d);\n    return !(q[3] > 0 && q[1] > q[4]);\n  });\n  for (const f of P.flakes) {\n    f.y += (5 + 9 * f.z) * (1 + 0.6 * abs(P.w)) * d;\n    f.x += ((P.w * 18 + P.gust * 4) * (0.4 + 0.6 * f.z) + 0.9 * sin(T * 1.7 + f.ph)) * d;\n    if (f.y > f.land) (f.y = -2 - rnd() * 4), (f.x = rnd() * W);\n    f.x = ((f.x % W) + W) % W;\n  }\n}\n\n// The valley, the rocks, the lantern and the still water, kept until the light changes.\nfunction backdrop(P) {\n  P.key = round(P.k1 * 60);\n  const g = P.k1, A = [0, 1, 2].map((c) => ramp(g, c)), top = [3, 4, 5].map((c) => ramp(g, c)), low = [6, 7, 8].map((c) => ramp(g, c));\n  const lamp = ramp(g, 12), BG = P.bg, IL = P.il, Z = P.z;\n  P.steamC = [9, 10, 11].map((c) => ramp(g, c));\n  P.lamp = lamp;\n  P.low = low;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, lm = P.lm[i];\n      for (let c = 0; c \u003c 3; c++) IL[o + c] = A[c] + LC[c] * lamp * lm;\n      let col = null, k = 1, z = 0;\n      const rg = P.rg[x];\n      if (y >= rg) {\n        // Snow on the slope, darker where scrub and rock break through.\n        col = SNOW;\n        k = 0.3 + 0.16 * vn(x * 0.12, y * 0.07) + 0.12 * (y / 66);\n        if (vn(x * 0.45 + 3, y * 0.28) > 0.7) k *= 0.45;\n      }\n      for (const [tx, ty, th, f] of TREES) {\n        // Tiers of drooping branches, each loaded with snow along its top.\n        const dx = abs(x + 0.5 - tx), ts = 3.2 + 2.6 * f, yy = y - ty - dx * 0.5, kq = floor(yy / ts), wi = yy - kq * ts;\n        if (yy \u003c 0 || y > ty + th + 3) continue;\n        if (y > ty + th) {\n          if (dx \u003c 0.4 + f) (col = TRUNK), (k = 0.6);\n          continue;\n        }\n        if (dx >= 0.5 + (y - ty) * 0.34 * (0.68 + 0.32 * (wi / ts)) * (0.85 + 0.3 * hash(kq, tx | 0))) continue;\n        if (wi \u003c 1 + 0.6 * f && hash(x, y) > 0.12) (col = SNOW), (k = 0.4 + 0.32 * f - 0.1 * (dx / th));\n        else (col = NEEDLE), (k = wi > ts - 0.7 ? 0.5 : 0.9 + 0.2 * hash(x + 7, y));\n        if (f \u003c 1) k = mix(k, 0.34, (1 - f) * 0.45);\n      }\n      if (y >= PB) (col = WATER), (z = 1), (k = 0.5 + 0.6 * ((y - PB) / 54));\n      for (const [cx, cy, rx, ry, dz] of ROCKS) {\n        const nx = (x + 0.5 - cx) / rx, ny = (y + 0.5 - cy) / ry, dd = nx * nx + ny * ny;\n        if (dd > 1 || y + 0.5 > cy) continue;\n        z = dz;\n        const nz = sqrt(1 - dd);\n        if (ny \u003c -0.42 - 0.22 * nz + 0.25 * (vn(x * 0.6, cy) - 0.5)) (col = SNOW), (k = 0.5 + 0.28 * nz - 0.12 * ny);\n        else (col = ROCK), (k = (0.6 + 0.5 * nz - 0.3 * nx) * (0.75 + 0.4 * vn(x * 0.5, y * 0.5)));\n      }\n      Z[i] = z;\n      if (!col) {\n        const v = (y / rg) ** 1.5;\n        for (let c = 0; c \u003c 3; c++) BG[o + c] = mix(top[c], low[c], v);\n        continue;\n      }\n      for (let c = 0; c \u003c 3; c++) BG[o + c] = col[c] * k * IL[o + c] + (z === 1 ? low[c] * 0.12 : 0);\n    }\n  // The stone lantern: finial, snowed roof, fire box with its glowing window,\n  // pillar and foot, standing on the rim rock.\n  const ROWS = [[42, 0.6, 1], [44, 3.6, 0], [46, 5, 1], [48, 2.6, 2], [54, 3.6, 1], [55, 1.3, 1], [60, 2.8, 1], [62, 0, 1]];\n  for (let r = 0; r \u003c ROWS.length - 1; r++)\n    for (let y = ROWS[r][0]; y \u003c ROWS[r + 1][0]; y++)\n      for (let x = 0; x \u003c 18; x++) {\n        const dx = abs(x + 0.5 - LX), hw = ROWS[r][1] + (r === 2 ? y - 46 : 0) * 0.6, o = (y * W + x) * 3;\n        if (dx > hw) continue;\n        const kind = ROWS[r][2], win = kind === 2 && dx \u003c 1.6 && y > 48 && y \u003c 53;\n        for (let c = 0; c \u003c 3; c++)\n          BG[o + c] = win ? [255, 200, 120][c] * min(1, 0.72 + 0.3 * lamp) : (kind ? STONE[c] * (0.6 + 0.25 * (LX - x) / hw) : SNOW[c] * 0.75) * IL[o + c];\n      }\n}\n\nlet F, IL, Z, M;\n// An ellipse of fur or skin on the monkey being drawn, under its water line\n// and behind any rock nearer than it.\nfunction blob(cx, cy, rx, ry, col, sn, fur) {\n  for (let y = max(0, floor(cy - ry)), y1 = min(H - 1, cy + ry); y \u003c= y1 && y + 0.5 \u003c M.wl; y++) {\n    const ny = (y + 0.5 - cy) / ry;\n    for (let x = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx); x \u003c= x1; x++) {\n      const nx = (x + 0.5 - cx) / rx, dd = nx * nx + ny * ny, i = y * W + x;\n      if (dd > 1 || Z[i] > M.z) continue;\n      const nz = sqrt(1 - dd);\n      let k, c = col;\n      if (fur) {\n        k = (0.36 + 0.55 * nz - 0.25 * ny - 0.12 * nx) * (0.84 + 0.3 * hash(x - M.x0, y - M.y0));\n        if (sn && ny \u003c sn * 0.5 - 1.05 + 0.25 * hash(x - M.x0, 9)) (c = SNOW), (k = 0.75 + 0.25 * nz);\n        else k *= 0.6 + 0.4 * sm(0.3, 2.2, M.wl - y - 0.5);\n      } else k = 0.72 + 0.3 * nz - 0.15 * ny;\n      paint(i, c, k);\n    }\n  }\n}\nfunction paint(i, c, k) {\n  const o = i * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k * (IL[o + n] * 0.6 + 0.4);\n}\nfunction dot(x, y, c, k) {\n  (x = floor(x)), (y = floor(y));\n  if (x >= 0 && x \u003c W && y >= 0 && y + 0.5 \u003c M.wl && Z[y * W + x] \u003c= M.z) paint(y * W + x, c, k);\n}\n// A limb of fur from a to b.\nfunction rod(ax, ay, bx, by, r, col) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = max(0, floor(min(ay, by) - r)); y \u003c= min(H - 1, max(ay, by) + r) && y + 0.5 \u003c M.wl; y++)\n    for (let x = max(0, floor(min(ax, bx) - r)); x \u003c= min(W - 1, max(ax, bx) + r); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t;\n      if (ex * ex + ey * ey > r * r || Z[y * W + x] > M.z) continue;\n      paint(y * W + x, col, (0.75 - 0.2 * (ey / r)) * (0.84 + 0.3 * hash(x, y)));\n    }\n}\n\n// One macaque: x, bottom row, scale, water line, depth, the turn of its head\n// (-1..1), how far it bows, eyes shut, snow on its head, sat on a rock.\nfunction monkey(x, yb, s, wl, z, lk, bow, shut, sn, sat) {\n  M = { wl, z, x0: floor(x), y0: floor(yb) };\n  blob(x, yb - 6.6 * s, 6.8 * s, 6.6 * s, FUR, sat ? 0.3 : 0, 1);\n  if (sat) {\n    for (const sd of [-1, 1]) {\n      blob(x + sd * 3.4 * s, yb - 2.6 * s, 2.7 * s, 2.3 * s, FUR, 0, 1);\n      blob(x + sd * 4.2 * s, yb - 0.6 * s, 1.5 * s, 0.9 * s, HAND, 0, 0);\n    }\n    for (const sd of [-1, 1]) rod(x + sd * 5 * s, yb - 10 * s, x + sd * 1.4 * s, yb - 4.8 * s, 1.4 * s, FUR);\n    blob(x, yb - 4.7 * s, 2 * s, 1 * s, HAND, 0, 0);\n  }\n  const R = 4.4 * s, hx = x + lk * 0.5 * s, hy = yb - (15.2 - bow) * s;\n  for (const sd of [-1, 1]) blob(hx + sd * R * (1 - 0.2 * lk * sd), hy - 0.3 * s, 1.1 * s + 0.2, 1.3 * s + 0.2, EAR, 0, 0);\n  blob(hx, hy, R * 1.05, R * 0.97, FUR, sn, 1);\n  const fx = hx + lk * 1.4 * s, fy = hy + (0.9 + bow * 0.25) * s;\n  blob(fx, fy, 2.2 * s * (1 - 0.2 * abs(lk)), 2.6 * s, FACE, 0, 0);\n  for (const sd of [-1, 1]) dot(fx + sd * 0.95 * s, fy - 0.6 * s, shut > 0.5 ? FACE : EYE, shut > 0.5 ? 0.45 : 1);\n  dot(fx, fy + 1.2 * s, FACE, 0.5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  if (P.key !== round(P.k1 * 60)) backdrop(P);\n  (F = P.f), (IL = P.il), (Z = P.z);\n  F.set(P.bg);\n  const T = P.t, lamp = P.lamp, BG = P.bg;\n  // The water: a slow shiver over it and the lantern's broken reflection.\n  for (let y = PB; y \u003c H; y++) {\n    const sx = 0.7 * sin(y * 0.5 + T * 1.3), rx = LX + 1.4 * sin(y * 0.9 + T * 3), rk = lamp * 140 * sm(104, 70, y);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (Z[i] !== 1) continue;\n      const r = vn(x * 0.3 + sx, y * 0.9 - T * 0.8), o = i * 3, dx = x + 0.5 - rx, ref = dx * dx \u003c 30 && rk ? rk * r * exp((-dx * dx) / 5) : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = BG[o + c] * (0.75 + 0.55 * r) + ref * LC[c];\n    }\n  }\n  // Who is where, back to front.\n  const L = [];\n  for (const m of P.mk) {\n    if (m.p \u003c= 0) continue;\n    if (m.pose > 2) {\n      // On the rim it slides down behind its rock as it goes.\n      const yb = m.y + 20 * (1 - m.p) * m.s;\n      m.hy = yb - 15.2 * m.s;\n      L.push([65, () => monkey(m.x, yb, m.s, 999, 65, m.lk, 0, m.e, 0.6, 1)]);\n      continue;\n    }\n    const wl = m.y + 0.35 * sin(T * 0.7 + m.ph), sk = m.sk + (m.pose === 1 ? 0.08 * sin(T * 0.5 + m.ph) : 0);\n    const yb = wl + (9.5 + 3.4 * sk + 20 * (1 - m.p)) * m.s;\n    m.hy = yb - (15.2 - (m.pose ? 1 : 0)) * m.s;\n    L.push([m.y, () => monkey(m.x, yb, m.s, wl, m.y, m.lk, m.pose ? 1 : 0, m.e, m.pose === 1 ? 1 : 0.55, 0), m]);\n  }\n  const R = P.R, u = R.st === 0 ? 0 : R.st === 2 ? 1 : R.st === 1 ? R.t / 3 : 1 - R.t / 3.4;\n  const [rx, ryb, rwl, rz] = path(u), rs = scl(rz);\n  L.push([rz, () => monkey(rx, ryb, rs, rwl, rz, R.lk, 0, R.st === 2 ? 1 : 0, 0.7, rwl > 900), rwl \u003c 900 && { x: rx, s: rs, p: 1, pose: 0, ph: 0 }]);\n  const B = P.B, bs = 0.64;\n  let bx, byb, bwl = 999, bz = 90;\n  if (B.st === 0) [bx, byb] = BSEAT;\n  else if (B.st === 1) {\n    const q = B.t / 0.7;\n    (bx = mix(BSEAT[0], BLAND[0], q)), (byb = mix(BSEAT[1], BLAND[1], q) - 14 * sin(PI * q)), (bz = mix(90, BLAND[1], q));\n  } else if (B.st === 2) {\n    const q = sm(0.8, 4.2, B.t);\n    (bwl = mix(BLAND[1], BFOOT[1], q)), (bx = mix(BLAND[0], BFOOT[0], q)), (bz = bwl);\n    byb = bwl + (12.5 + 14 * (1 - sm(0.15, 0.6, B.t))) * bs * scl(bwl);\n  } else {\n    const q = sm(0, 1.3, B.t);\n    (bx = mix(BFOOT[0], BSEAT[0], q)), (byb = mix(BFOOT[1], BSEAT[1], q)), (bz = mix(94, 90, q));\n  }\n  L.push([bz, () => monkey(bx, byb, bs * scl(bz), bwl, bz, B.lk, 0, 0, 0.4, B.st !== 2), B.st === 2 && { x: bx, s: 0.6, p: 1, pose: 0, ph: 3 }]);\n  L.sort((a, b) => a[0] - b[0]);\n  // Rings on the water round everyone in it.\n  for (const [z, , m] of L) {\n    if (!m) continue;\n    const s = m.s * m.p;\n    for (let n = 0; n \u003c 3; n++) {\n      const r = 6.5 * s + ((T * (m.pose === 1 ? 1.6 : 3) + n * 4.4 + m.ph) % 13), a = (1 - (r - 6.5 * s) / 13) * 0.8 * m.p;\n      for (let y = floor(z - r * 0.3 - 1); y \u003c= z + r * 0.3 + 1; y++)\n        for (let x = max(0, floor(m.x - r - 1)); x \u003c= min(W - 1, m.x + r + 1); x++) {\n          const i = y * W + x;\n          if (y >= H || Z[i] !== 1) continue;\n          const e = sqrt(((x + 0.5 - m.x) / r) ** 2 + ((y + 0.5 - z) / (r * 0.3)) ** 2);\n          if (abs(e - 1) * r \u003c 0.7) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += (P.low[c] * 0.6 + 60 * IL[i * 3 + c]) * a;\n        }\n    }\n  }\n  for (const [, fn, m] of L) {\n    fn();\n    // The groomer's hands in the fur of the one in front of it.\n    if (m && m.i === 0 && P.mk[1].p > 0.5) {\n      const g = P.mk[1], gs = g.s, hx = m.x + 2 * m.s, hy = m.hy - 3 * m.s;\n      M = { wl: g.y, z: m.y + 1, x0: 0, y0: 0 };\n      rod(g.x - 4.8 * gs, g.y - 1.5 * gs, hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.3 * gs, FUR);\n      rod(g.x - 2 * gs, g.y - 1.5 * gs, hx + 4 * m.s, hy + 5 * m.s + sin(T * 2.3), 1.3 * gs, FUR);\n      M.wl = 999;\n      blob(hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.2 * gs, 1 * gs, HAND, 0, 0);\n    }\n  }\n  // The splash: a plume, foam spreading and fading, a ring running out, and\n  // the drops falling back.\n  M = { wl: 999, z: 200, x0: 0, y0: 0 };\n  if (P.spl) {\n    const q = P.spl.t, { x: sx, y: sy } = P.spl, h = 7 * (1 - sm(0, 0.45, q));\n    if (h > 0.5) blob(sx, sy - h, 1.6 + 2 * q, h + 0.5, SNOW, 0, 0);\n    for (let y = floor(sy - 3), rx = 3 + 6 * q, ry = 1.4 + 1.2 * q; y \u003c= sy + 3 && q \u003c 1.4; y++)\n      for (let x = max(0, floor(sx - rx)); x \u003c= min(W - 1, sx + rx); x++) {\n        const e = 1 - ((x + 0.5 - sx) / rx) ** 2 - ((y + 0.5 - sy) / ry) ** 2, o = (y * W + x) * 3;\n        if (e > 0) for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * IL[o + c] * 1.2 - F[o + c]) * min(1, e * 3) * (1 - q / 1.4);\n      }\n    const r = 4 + 20 * q;\n    for (let x = 0; x \u003c W; x++)\n      for (const sd of [-1, 1]) {\n        const dx = (x + 0.5 - P.spl.x) / r, y = floor(P.spl.y + sd * r * 0.3 * sqrt(max(0, 1 - dx * dx)));\n        if (abs(dx) \u003c 1 && y \u003c H && Z[y * W + x] === 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] += 120 * (1 - q / 2) * IL[(y * W + x) * 3 + c];\n      }\n  }\n  for (const [x, y] of P.drops) dot(x, y, SNOW, 1);\n  // The steam over everything, lit by the sky and the lantern.\n  const G = P.G, SC = P.steamC;\n  G.fill(0);\n  for (const q of P.puffs) {\n    const a = q.a * sm(0, 0.9, q.age) * (1 - sm(q.life * 0.5, q.life, q.age)), gx = q.x / 2, gy = q.y / 2, rr = q.r * 0.75;\n    for (let j = max(0, floor(gy - rr * 1.3)); j \u003c= min(GH - 1, gy + rr * 1.3); j++)\n      for (let i = max(0, floor(gx - rr)); i \u003c= min(GW - 1, gx + rr); i++) {\n        const e = 1 - (i + 0.5 - gx) ** 2 / (rr * rr) - (j + 0.5 - gy) ** 2 / (rr * rr * 1.6);\n        if (e > 0) G[j * GW + i] += a * e * e;\n      }\n  }\n  // A low mist on the water, and the steam torn into wisps.\n  for (let j = 0, c = 0; j \u003c GH; j++)\n    for (let i = 0, mist = 0.2 * sm(PB - 8, PB + 14, j * 2 + 1); i \u003c GW; i++, c++)\n      if ((G[c] += mist) > 0.01) G[c] *= 0.2 + 0.85 * vn(i * 0.24 + P.fx, j * 0.17 + P.fy) + 0.45 * vn(i * 0.62 - P.fx, j * 0.44 + P.fy * 2);\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 2 - 0.25, j0 = cl(floor(v), 0, GH - 1), j1 = min(GH - 1, j0 + 1), fv = cl(v - j0, 0, 1), ay = 0.4 + 0.45 * sm(108, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const u2 = x / 2 - 0.25, i0 = cl(floor(u2), 0, GW - 1), i1 = min(GW - 1, i0 + 1), fu = cl(u2 - i0, 0, 1);\n      const D = mix(mix(G[j0 * GW + i0], G[j0 * GW + i1], fu), mix(G[j1 * GW + i0], G[j1 * GW + i1], fu), fv);\n      if (D \u003c 0.05) continue;\n      const a = ay * sm(0.05, 1.3, D), i = y * W + x, o = i * 3, lm = P.lm[i] * lamp * 200;\n      for (let c = 0; c \u003c 3; c++) F[o + c] += (SC[c] + LC[c] * lm - F[o + c]) * a;\n    }\n  }\n  // Snow falling, thicker in the wind.\n  const nf = floor(110 + 70 * abs(P.w));\n  for (let n = 0; n \u003c nf; n++) {\n    const f = P.flakes[n], x = floor(f.x), y = floor(f.y);\n    if (y \u003c 0 || y >= H) continue;\n    const i = y * W + x, o = i * 3, b = 0.45 + 0.5 * f.z;\n    for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * (IL[o + c] * 0.6 + 0.4) - F[o + c]) * b;\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-snow-monkeys","type":"code","name":"snow-monkeys","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Snow Monkeys\n// Family:  mammal\n// Idea:    At dusk in the snow at Jigokudani, Japanese macaques soak to the shoulders in a steaming hot spring, dozing with snow on their heads and grooming each other, while a mother wades in off a boulder, her baby leaps in after her with a splash, and clumps of steam roll up the valley through the falling snow.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 25, after the Japanese macaques (Macaca fuscata) that bathe in the hot spring at Jigokudani, Nagano\n// Round:   25\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1\n//\n// Knob 1: Light. The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it.\n// Knob 2: Speed. At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower.\n// Knob 3: Monkeys. How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam.\n// Knob 4: Wind. Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it.\n// Buttons: K1 tap sends the baby on the boulder leaping into the water with a splash; it paddles back and climbs out again. On its own it jumps about six seconds in, then every half minute or so.\n\nconst W = 64, H = 128, N = W * H, GW = 32, GH = 64;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The back edge of the pool, and how big a monkey stands at a depth row.\nconst PB = 67;\nconst scl = (y) => 0.74 + (y - PB) * 0.0135;\n// The stone lantern's fire box.\nconst [LX, LY] = [8.5, 50.5];\n// The light from evening to night: ambient, sky overhead, sky at the ridge,\n// lit steam, and the lantern's strength.\nconst LIGHT = [\n  [0, 0.5, 0.6, 0.86, 24, 44, 104, 70, 98, 160, 196, 212, 240, 0.25],\n  [0.5, 0.36, 0.4, 0.66, 16, 20, 62, 84, 66, 118, 150, 156, 196, 0.65],\n  [1, 0.2, 0.24, 0.42, 5, 8, 24, 18, 24, 54, 84, 92, 130, 1.1],\n];\nconst LC = [1, 0.62, 0.3];\nconst SNOW = [232, 238, 250], FUR = [218, 184, 150], FACE = [250, 96, 92], EAR = [214, 132, 124], HAND = [120, 84, 78], EYE = [40, 22, 20];\nconst ROCK = [70, 64, 62], NEEDLE = [24, 46, 36], TRUNK = [52, 38, 30], WATER = [34, 70, 74], STONE = [118, 114, 108];\n// Boulders as half ellipses standing on their water line: centre, radii,\n// depth row. The back rim, the boulder in the pool, the near rocks.\nconst ROCKS = [\n  [2, 68, 12, 8, 66], [17, 69, 8, 6, 66], [30, 69, 9, 5, 66], [45, 68, 11, 6, 66], [61, 68, 10, 9, 66],\n  [53, 92, 13, 12, 90],\n  [6, 132, 15, 14, 126], [28, 133, 12, 12, 127], [48, 132, 11, 13, 126], [64, 129, 10, 15, 125],\n];\n// Cedars on the slope, far to near: apex x and row, height, nearness.\nconst TREES = [];\nfor (let i = 0; i \u003c 10; i++) TREES.push([2 + i * 6.7 + 3 * hash(i, 1), 4 + 9 * hash(i, 2), 16 + 8 * hash(i, 3), 0.3]);\nfor (let i = 0; i \u003c 7; i++) TREES.push([i * 10.5 + 5 * hash(i, 4), 16 + 12 * hash(i, 5), 24 + 10 * hash(i, 6), 0.6]);\nTREES.push([3, 12, 52, 1], [61, 6, 56, 1]);\n// Places in the order the Monkeys knob fills them: x, depth row (the seat\n// row on the rim), how low it sits in the water (0 shoulders out, 1 chin in\n// it), and what it does (0 looks about, 1 dozes, 2 grooms the one before\n// it, 3 sits on the rim rocks).\nconst SLOTS = [\n  [24, 101, 0.15, 1], [34, 93, 0.1, 2], [11, 117, 0.6, 1], [30, 64.5, 0, 3], [52, 119, 0.25, 0], [8, 90, 0.2, 0],\n  [41, 63, 0, 3], [61, 110, 0.3, 0], [31, 79, 0.15, 0], [37, 118, 0.3, 1], [23, 121, 0.5, 1], [14, 77, 0.2, 1],\n  [5, 104, 0.2, 0], [46, 86, 0.1, 0],\n];\n// The boulder seats and the way down into the water, as x and bottom row.\nconst SEAT = [52, 81], EDGE = [46, 83.5], FOOT = [44, 93], SPOT = [47, 103], BSEAT = [60, 83], BLAND = [53, 102], BFOOT = [60, 94];\n\nfunction ramp(g, c) {\n  let j = 0;\n  while (j \u003c LIGHT.length - 2 && g > LIGHT[j + 1][0]) j++;\n  const a = LIGHT[j], b = LIGHT[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, f: F32(N * 3), bg: F32(N * 3), il: F32(N * 3), lm: F32(N), z: new Uint8Array(N), G: F32(GW * GH), key: -1,\n    puffs: [], drops: [], acc: 0, vent: 0.5, fx: 0, fy: 0, gust: 0, w: 0, k1: 0, n: 3, spl: null,\n    R: { st: 0, t: 0, dur: 3, lk: 0, lt: 0, lc: 1 }, B: { st: 0, t: 0, nj: 6.2, lk: 0, lt: 0, lc: 2 },\n  });\n  P.sd = 7;\n  P.mk = SLOTS.map(([x, y, sk, pose], i) => ({ x, y, sk, pose, s: pose > 2 ? 0.86 : scl(y), p: 0, sw: i * 0.3, hy: y - 8, lk: pose === 2 ? -0.8 : 0, lt: 0, lc: 1 + rnd() * 3, e: pose === 1 ? 1 : 0, bl: 2 + rnd() * 3, ph: rnd() * 7, i }));\n  P.flakes = Array.from({ length: 180 }, () => {\n    const z = rnd();\n    return { x: rnd() * W, y: rnd() * H, z, ph: rnd() * 7, land: 40 + z * 88 };\n  });\n  P.flakes.forEach((f) => (f.y = rnd() * f.land));\n  P.rg = Array.from({ length: W }, (_, x) => 8 + 5 * vn(x * 0.07, 1.3) - 0.06 * x);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) P.lm[y * W + x] = exp(-((x + 0.5 - LX) ** 2 + (y + 0.5 - LY) ** 2 * 0.8) / 1500);\n}\n\nfunction spawn(P, x, y, a, g = rnd) {\n  P.puffs.push({ x, y, a, r: 2.5 + 2.5 * g(), age: 0, life: 7 + 5 * g(), vy: -(6 + 5 * g()), ph: g() * 7 });\n}\n\n// The steam: puffs off the water, thick clumps from the spring's mouth, all\n// rising, growing and fading, swayed by the gusts and leaned by the wind.\nfunction steam(P, d) {\n  const w = P.w;\n  P.gust = 0.55 * sin(P.t * 0.31) + 0.3 * sin(P.t * 0.83 + 2);\n  for (P.acc += d * 1.8; P.acc > 1; P.acc--) spawn(P, 2 + rnd() * 60 - w * 22, 74 + rnd() * 44, 0.2 + 0.25 * rnd());\n  if ((P.vent -= d) \u003c 0) {\n    P.vent = 0.7 + rnd() * 1.1;\n    const vx = [9, 22, 36][floor(rnd() * 3)] + rnd() * 6 - 3 - w * 14, vy = 72 + rnd() * 16;\n    for (let n = 0; n \u003c 3; n++) spawn(P, vx + rnd() * 8 - 4, vy + rnd() * 6, 0.4 + 0.25 * rnd());\n  }\n  // Wet fur steams in the cold: a wisp off each monkey's head now and then,\n  // from a generator of its own so the rest of the steam keeps its course.\n  for (const m of P.mk)\n    if (m.p > 0.5 && (m.sw -= d) \u003c 0) {\n      const g = () => ((P.sd = (Math.imul(P.sd, 1103515245) + 12345) >>> 0) / 4294967296);\n      m.sw = 0.35 + g() * 0.6;\n      spawn(P, m.x + (g() - 0.5) * 6 * m.s, m.hy - 3 * m.s, 0.25 + 0.2 * g(), g);\n    }\n  const wx = w * 15 + P.gust * 7;\n  for (const q of P.puffs) {\n    q.age += d;\n    const up = sm(84, 20, q.y);\n    q.x += (wx * (0.3 + 0.7 * up) + 1.6 * sin(q.age * 1.3 + q.ph)) * d;\n    q.y += q.vy * (0.5 + 0.5 * sm(0, 2.5, q.age)) * d;\n    q.r += (0.9 + 0.8 * abs(w)) * d;\n  }\n  P.puffs = P.puffs.filter((q) => q.age \u003c q.life * (1 - 0.35 * abs(w)) && q.y + q.r > -4 && q.x > -30 && q.x \u003c 94);\n  P.fx -= wx * 0.2 * d;\n  P.fy += 1.8 * d;\n}\n\n// Where the mother is on her way between the boulder and the pool, u 0..1.\nfunction path(u) {\n  if (u \u003c 0.3) {\n    const q = sm(0, 0.3, u);\n    return [mix(SEAT[0], EDGE[0], q), mix(SEAT[1], EDGE[1], q), 999, 90];\n  }\n  if (u \u003c 0.55) {\n    const q = sm(0.3, 0.55, u);\n    return [mix(EDGE[0], FOOT[0], q), mix(EDGE[1], FOOT[1], q), 999, 90 + 3 * q];\n  }\n  const q = sm(0.55, 1, u), wl = mix(FOOT[1], SPOT[1], q);\n  return [mix(FOOT[0], SPOT[0], q), wl + 9.5 * q * scl(wl), wl, wl];\n}\n\nfunction look(m, d) {\n  if ((m.lc -= d) \u003c 0) (m.lc = 1.2 + rnd() * 3), (m.lt = floor(rnd() * 3) - 1);\n  m.lk += (m.lt - m.lk) * min(1, d * 5);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.k1 = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 3, 14));\n  P.w = cl(k[3], -1, 1);\n  if (!P.init) {\n    // Open on a pool already steaming.\n    for (let i = 0; i \u003c 120; i++) (P.t += 0.1), steam(P, 0.1);\n    P.t = 0;\n    for (const m of P.mk) m.p = m.i \u003c P.n ? 1 : 0;\n    P.init = true;\n  }\n  const T = (P.t += d);\n  steam(P, d);\n  for (const m of P.mk) {\n    m.p = cl(m.p + (m.i \u003c P.n ? d : -d) * 0.8, 0, 1);\n    if (m.pose % 3 === 0) {\n      look(m, d);\n      if ((m.bl -= d) \u003c 0) m.bl = 2 + rnd() * 4;\n      m.e = m.bl \u003c 0.15 ? 1 : 0;\n    }\n  }\n  // The mother sits on the boulder until she wades in to soak. Later she climbs out again.\n  const R = P.R;\n  if ((R.t += d) >= R.dur) {\n    R.st = (R.st + 1) % 4;\n    (R.t = 0), (R.dur = [16 + rnd() * 6, 3, 18 + rnd() * 6, 3.4][R.st]);\n  }\n  look(R, d);\n  // The baby on the boulder: a leap, a splash, a paddle back and a climb.\n  const B = P.B;\n  if (input.btnPressed && input.btnPressed[0] && B.st === 0) B.nj = 0;\n  if (B.st === 0 && (B.nj -= d) \u003c= 0) (B.st = 1), (B.t = 0);\n  if (B.st) B.t += d;\n  if (B.st === 1 && B.t >= 0.7) {\n    (B.st = 2), (B.t = 0), (P.spl = { x: BLAND[0], y: BLAND[1], t: 0 });\n    for (let n = 0; n \u003c 34; n++) {\n      const a = (rnd() - 0.5) * 2.4;\n      P.drops.push([BLAND[0] + a * 2, BLAND[1] - 1, a * 14 + (rnd() - 0.5) * 6, -12 - rnd() * 22, BLAND[1] + (rnd() - 0.3) * 6]);\n    }\n    for (let n = 0; n \u003c 4; n++) spawn(P, BLAND[0] + rnd() * 10 - 5, BLAND[1] - 4, 0.8);\n  }\n  if (B.st === 2 && B.t >= 4.2) (B.st = 3), (B.t = 0);\n  if (B.st === 3 && B.t >= 1.3) (B.st = 0), (B.t = 0), (B.nj = 24 + rnd() * 10);\n  look(B, d);\n  if (P.spl && (P.spl.t += d) > 2) P.spl = null;\n  P.drops = P.drops.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 70 * d);\n    return !(q[3] > 0 && q[1] > q[4]);\n  });\n  for (const f of P.flakes) {\n    f.y += (5 + 9 * f.z) * (1 + 0.6 * abs(P.w)) * d;\n    f.x += ((P.w * 18 + P.gust * 4) * (0.4 + 0.6 * f.z) + 0.9 * sin(T * 1.7 + f.ph)) * d;\n    if (f.y > f.land) (f.y = -2 - rnd() * 4), (f.x = rnd() * W);\n    f.x = ((f.x % W) + W) % W;\n  }\n}\n\n// The valley, the rocks, the lantern and the still water, kept until the light changes.\nfunction backdrop(P) {\n  P.key = round(P.k1 * 60);\n  const g = P.k1, A = [0, 1, 2].map((c) => ramp(g, c)), top = [3, 4, 5].map((c) => ramp(g, c)), low = [6, 7, 8].map((c) => ramp(g, c));\n  const lamp = ramp(g, 12), BG = P.bg, IL = P.il, Z = P.z;\n  P.steamC = [9, 10, 11].map((c) => ramp(g, c));\n  P.lamp = lamp;\n  P.low = low;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, lm = P.lm[i];\n      for (let c = 0; c \u003c 3; c++) IL[o + c] = A[c] + LC[c] * lamp * lm;\n      let col = null, k = 1, z = 0;\n      const rg = P.rg[x];\n      if (y >= rg) {\n        // Snow on the slope, darker where scrub and rock break through.\n        col = SNOW;\n        k = 0.3 + 0.16 * vn(x * 0.12, y * 0.07) + 0.12 * (y / 66);\n        if (vn(x * 0.45 + 3, y * 0.28) > 0.7) k *= 0.45;\n      }\n      for (const [tx, ty, th, f] of TREES) {\n        // Tiers of drooping branches, each loaded with snow along its top.\n        const dx = abs(x + 0.5 - tx), ts = 3.2 + 2.6 * f, yy = y - ty - dx * 0.5, kq = floor(yy / ts), wi = yy - kq * ts;\n        if (yy \u003c 0 || y > ty + th + 3) continue;\n        if (y > ty + th) {\n          if (dx \u003c 0.4 + f) (col = TRUNK), (k = 0.6);\n          continue;\n        }\n        if (dx >= 0.5 + (y - ty) * 0.34 * (0.68 + 0.32 * (wi / ts)) * (0.85 + 0.3 * hash(kq, tx | 0))) continue;\n        if (wi \u003c 1 + 0.6 * f && hash(x, y) > 0.12) (col = SNOW), (k = 0.4 + 0.32 * f - 0.1 * (dx / th));\n        else (col = NEEDLE), (k = wi > ts - 0.7 ? 0.5 : 0.9 + 0.2 * hash(x + 7, y));\n        if (f \u003c 1) k = mix(k, 0.34, (1 - f) * 0.45);\n      }\n      if (y >= PB) (col = WATER), (z = 1), (k = 0.5 + 0.6 * ((y - PB) / 54));\n      for (const [cx, cy, rx, ry, dz] of ROCKS) {\n        const nx = (x + 0.5 - cx) / rx, ny = (y + 0.5 - cy) / ry, dd = nx * nx + ny * ny;\n        if (dd > 1 || y + 0.5 > cy) continue;\n        z = dz;\n        const nz = sqrt(1 - dd);\n        if (ny \u003c -0.42 - 0.22 * nz + 0.25 * (vn(x * 0.6, cy) - 0.5)) (col = SNOW), (k = 0.5 + 0.28 * nz - 0.12 * ny);\n        else (col = ROCK), (k = (0.6 + 0.5 * nz - 0.3 * nx) * (0.75 + 0.4 * vn(x * 0.5, y * 0.5)));\n      }\n      Z[i] = z;\n      if (!col) {\n        const v = (y / rg) ** 1.5;\n        for (let c = 0; c \u003c 3; c++) BG[o + c] = mix(top[c], low[c], v);\n        continue;\n      }\n      for (let c = 0; c \u003c 3; c++) BG[o + c] = col[c] * k * IL[o + c] + (z === 1 ? low[c] * 0.12 : 0);\n    }\n  // The stone lantern: finial, snowed roof, fire box with its glowing window,\n  // pillar and foot, standing on the rim rock.\n  const ROWS = [[42, 0.6, 1], [44, 3.6, 0], [46, 5, 1], [48, 2.6, 2], [54, 3.6, 1], [55, 1.3, 1], [60, 2.8, 1], [62, 0, 1]];\n  for (let r = 0; r \u003c ROWS.length - 1; r++)\n    for (let y = ROWS[r][0]; y \u003c ROWS[r + 1][0]; y++)\n      for (let x = 0; x \u003c 18; x++) {\n        const dx = abs(x + 0.5 - LX), hw = ROWS[r][1] + (r === 2 ? y - 46 : 0) * 0.6, o = (y * W + x) * 3;\n        if (dx > hw) continue;\n        const kind = ROWS[r][2], win = kind === 2 && dx \u003c 1.6 && y > 48 && y \u003c 53;\n        for (let c = 0; c \u003c 3; c++)\n          BG[o + c] = win ? [255, 200, 120][c] * min(1, 0.72 + 0.3 * lamp) : (kind ? STONE[c] * (0.6 + 0.25 * (LX - x) / hw) : SNOW[c] * 0.75) * IL[o + c];\n      }\n}\n\nlet F, IL, Z, M;\n// An ellipse of fur or skin on the monkey being drawn, under its water line\n// and behind any rock nearer than it.\nfunction blob(cx, cy, rx, ry, col, sn, fur) {\n  for (let y = max(0, floor(cy - ry)), y1 = min(H - 1, cy + ry); y \u003c= y1 && y + 0.5 \u003c M.wl; y++) {\n    const ny = (y + 0.5 - cy) / ry;\n    for (let x = max(0, floor(cx - rx)), x1 = min(W - 1, cx + rx); x \u003c= x1; x++) {\n      const nx = (x + 0.5 - cx) / rx, dd = nx * nx + ny * ny, i = y * W + x;\n      if (dd > 1 || Z[i] > M.z) continue;\n      const nz = sqrt(1 - dd);\n      let k, c = col;\n      if (fur) {\n        k = (0.36 + 0.55 * nz - 0.25 * ny - 0.12 * nx) * (0.84 + 0.3 * hash(x - M.x0, y - M.y0));\n        if (sn && ny \u003c sn * 0.5 - 1.05 + 0.25 * hash(x - M.x0, 9)) (c = SNOW), (k = 0.75 + 0.25 * nz);\n        else k *= 0.6 + 0.4 * sm(0.3, 2.2, M.wl - y - 0.5);\n      } else k = 0.72 + 0.3 * nz - 0.15 * ny;\n      paint(i, c, k);\n    }\n  }\n}\nfunction paint(i, c, k) {\n  const o = i * 3;\n  for (let n = 0; n \u003c 3; n++) F[o + n] = c[n] * k * (IL[o + n] * 0.6 + 0.4);\n}\nfunction dot(x, y, c, k) {\n  (x = floor(x)), (y = floor(y));\n  if (x >= 0 && x \u003c W && y >= 0 && y + 0.5 \u003c M.wl && Z[y * W + x] \u003c= M.z) paint(y * W + x, c, k);\n}\n// A limb of fur from a to b.\nfunction rod(ax, ay, bx, by, r, col) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = max(0, floor(min(ay, by) - r)); y \u003c= min(H - 1, max(ay, by) + r) && y + 0.5 \u003c M.wl; y++)\n    for (let x = max(0, floor(min(ax, bx) - r)); x \u003c= min(W - 1, max(ax, bx) + r); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t;\n      if (ex * ex + ey * ey > r * r || Z[y * W + x] > M.z) continue;\n      paint(y * W + x, col, (0.75 - 0.2 * (ey / r)) * (0.84 + 0.3 * hash(x, y)));\n    }\n}\n\n// One macaque: x, bottom row, scale, water line, depth, the turn of its head\n// (-1..1), how far it bows, eyes shut, snow on its head, sat on a rock.\nfunction monkey(x, yb, s, wl, z, lk, bow, shut, sn, sat) {\n  M = { wl, z, x0: floor(x), y0: floor(yb) };\n  blob(x, yb - 6.6 * s, 6.8 * s, 6.6 * s, FUR, sat ? 0.3 : 0, 1);\n  if (sat) {\n    for (const sd of [-1, 1]) {\n      blob(x + sd * 3.4 * s, yb - 2.6 * s, 2.7 * s, 2.3 * s, FUR, 0, 1);\n      blob(x + sd * 4.2 * s, yb - 0.6 * s, 1.5 * s, 0.9 * s, HAND, 0, 0);\n    }\n    for (const sd of [-1, 1]) rod(x + sd * 5 * s, yb - 10 * s, x + sd * 1.4 * s, yb - 4.8 * s, 1.4 * s, FUR);\n    blob(x, yb - 4.7 * s, 2 * s, 1 * s, HAND, 0, 0);\n  }\n  const R = 4.4 * s, hx = x + lk * 0.5 * s, hy = yb - (15.2 - bow) * s;\n  for (const sd of [-1, 1]) blob(hx + sd * R * (1 - 0.2 * lk * sd), hy - 0.3 * s, 1.1 * s + 0.2, 1.3 * s + 0.2, EAR, 0, 0);\n  blob(hx, hy, R * 1.05, R * 0.97, FUR, sn, 1);\n  const fx = hx + lk * 1.4 * s, fy = hy + (0.9 + bow * 0.25) * s;\n  blob(fx, fy, 2.2 * s * (1 - 0.2 * abs(lk)), 2.6 * s, FACE, 0, 0);\n  for (const sd of [-1, 1]) dot(fx + sd * 0.95 * s, fy - 0.6 * s, shut > 0.5 ? FACE : EYE, shut > 0.5 ? 0.45 : 1);\n  dot(fx, fy + 1.2 * s, FACE, 0.5);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  if (P.key !== round(P.k1 * 60)) backdrop(P);\n  (F = P.f), (IL = P.il), (Z = P.z);\n  F.set(P.bg);\n  const T = P.t, lamp = P.lamp, BG = P.bg;\n  // The water: a slow shiver over it and the lantern's broken reflection.\n  for (let y = PB; y \u003c H; y++) {\n    const sx = 0.7 * sin(y * 0.5 + T * 1.3), rx = LX + 1.4 * sin(y * 0.9 + T * 3), rk = lamp * 140 * sm(104, 70, y);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (Z[i] !== 1) continue;\n      const r = vn(x * 0.3 + sx, y * 0.9 - T * 0.8), o = i * 3, dx = x + 0.5 - rx, ref = dx * dx \u003c 30 && rk ? rk * r * exp((-dx * dx) / 5) : 0;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = BG[o + c] * (0.75 + 0.55 * r) + ref * LC[c];\n    }\n  }\n  // Who is where, back to front.\n  const L = [];\n  for (const m of P.mk) {\n    if (m.p \u003c= 0) continue;\n    if (m.pose > 2) {\n      // On the rim it slides down behind its rock as it goes.\n      const yb = m.y + 20 * (1 - m.p) * m.s;\n      m.hy = yb - 15.2 * m.s;\n      L.push([65, () => monkey(m.x, yb, m.s, 999, 65, m.lk, 0, m.e, 0.6, 1)]);\n      continue;\n    }\n    const wl = m.y + 0.35 * sin(T * 0.7 + m.ph), sk = m.sk + (m.pose === 1 ? 0.08 * sin(T * 0.5 + m.ph) : 0);\n    const yb = wl + (9.5 + 3.4 * sk + 20 * (1 - m.p)) * m.s;\n    m.hy = yb - (15.2 - (m.pose ? 1 : 0)) * m.s;\n    L.push([m.y, () => monkey(m.x, yb, m.s, wl, m.y, m.lk, m.pose ? 1 : 0, m.e, m.pose === 1 ? 1 : 0.55, 0), m]);\n  }\n  const R = P.R, u = R.st === 0 ? 0 : R.st === 2 ? 1 : R.st === 1 ? R.t / 3 : 1 - R.t / 3.4;\n  const [rx, ryb, rwl, rz] = path(u), rs = scl(rz);\n  L.push([rz, () => monkey(rx, ryb, rs, rwl, rz, R.lk, 0, R.st === 2 ? 1 : 0, 0.7, rwl > 900), rwl \u003c 900 && { x: rx, s: rs, p: 1, pose: 0, ph: 0 }]);\n  const B = P.B, bs = 0.64;\n  let bx, byb, bwl = 999, bz = 90;\n  if (B.st === 0) [bx, byb] = BSEAT;\n  else if (B.st === 1) {\n    const q = B.t / 0.7;\n    (bx = mix(BSEAT[0], BLAND[0], q)), (byb = mix(BSEAT[1], BLAND[1], q) - 14 * sin(PI * q)), (bz = mix(90, BLAND[1], q));\n  } else if (B.st === 2) {\n    const q = sm(0.8, 4.2, B.t);\n    (bwl = mix(BLAND[1], BFOOT[1], q)), (bx = mix(BLAND[0], BFOOT[0], q)), (bz = bwl);\n    byb = bwl + (12.5 + 14 * (1 - sm(0.15, 0.6, B.t))) * bs * scl(bwl);\n  } else {\n    const q = sm(0, 1.3, B.t);\n    (bx = mix(BFOOT[0], BSEAT[0], q)), (byb = mix(BFOOT[1], BSEAT[1], q)), (bz = mix(94, 90, q));\n  }\n  L.push([bz, () => monkey(bx, byb, bs * scl(bz), bwl, bz, B.lk, 0, 0, 0.4, B.st !== 2), B.st === 2 && { x: bx, s: 0.6, p: 1, pose: 0, ph: 3 }]);\n  L.sort((a, b) => a[0] - b[0]);\n  // Rings on the water round everyone in it.\n  for (const [z, , m] of L) {\n    if (!m) continue;\n    const s = m.s * m.p;\n    for (let n = 0; n \u003c 3; n++) {\n      const r = 6.5 * s + ((T * (m.pose === 1 ? 1.6 : 3) + n * 4.4 + m.ph) % 13), a = (1 - (r - 6.5 * s) / 13) * 0.8 * m.p;\n      for (let y = floor(z - r * 0.3 - 1); y \u003c= z + r * 0.3 + 1; y++)\n        for (let x = max(0, floor(m.x - r - 1)); x \u003c= min(W - 1, m.x + r + 1); x++) {\n          const i = y * W + x;\n          if (y >= H || Z[i] !== 1) continue;\n          const e = sqrt(((x + 0.5 - m.x) / r) ** 2 + ((y + 0.5 - z) / (r * 0.3)) ** 2);\n          if (abs(e - 1) * r \u003c 0.7) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] += (P.low[c] * 0.6 + 60 * IL[i * 3 + c]) * a;\n        }\n    }\n  }\n  for (const [, fn, m] of L) {\n    fn();\n    // The groomer's hands in the fur of the one in front of it.\n    if (m && m.i === 0 && P.mk[1].p > 0.5) {\n      const g = P.mk[1], gs = g.s, hx = m.x + 2 * m.s, hy = m.hy - 3 * m.s;\n      M = { wl: g.y, z: m.y + 1, x0: 0, y0: 0 };\n      rod(g.x - 4.8 * gs, g.y - 1.5 * gs, hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.3 * gs, FUR);\n      rod(g.x - 2 * gs, g.y - 1.5 * gs, hx + 4 * m.s, hy + 5 * m.s + sin(T * 2.3), 1.3 * gs, FUR);\n      M.wl = 999;\n      blob(hx + 1.4 * sin(T * 3.1), hy + 0.8 * cos(T * 3.1), 1.2 * gs, 1 * gs, HAND, 0, 0);\n    }\n  }\n  // The splash: a plume, foam spreading and fading, a ring running out, and\n  // the drops falling back.\n  M = { wl: 999, z: 200, x0: 0, y0: 0 };\n  if (P.spl) {\n    const q = P.spl.t, { x: sx, y: sy } = P.spl, h = 7 * (1 - sm(0, 0.45, q));\n    if (h > 0.5) blob(sx, sy - h, 1.6 + 2 * q, h + 0.5, SNOW, 0, 0);\n    for (let y = floor(sy - 3), rx = 3 + 6 * q, ry = 1.4 + 1.2 * q; y \u003c= sy + 3 && q \u003c 1.4; y++)\n      for (let x = max(0, floor(sx - rx)); x \u003c= min(W - 1, sx + rx); x++) {\n        const e = 1 - ((x + 0.5 - sx) / rx) ** 2 - ((y + 0.5 - sy) / ry) ** 2, o = (y * W + x) * 3;\n        if (e > 0) for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * IL[o + c] * 1.2 - F[o + c]) * min(1, e * 3) * (1 - q / 1.4);\n      }\n    const r = 4 + 20 * q;\n    for (let x = 0; x \u003c W; x++)\n      for (const sd of [-1, 1]) {\n        const dx = (x + 0.5 - P.spl.x) / r, y = floor(P.spl.y + sd * r * 0.3 * sqrt(max(0, 1 - dx * dx)));\n        if (abs(dx) \u003c 1 && y \u003c H && Z[y * W + x] === 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] += 120 * (1 - q / 2) * IL[(y * W + x) * 3 + c];\n      }\n  }\n  for (const [x, y] of P.drops) dot(x, y, SNOW, 1);\n  // The steam over everything, lit by the sky and the lantern.\n  const G = P.G, SC = P.steamC;\n  G.fill(0);\n  for (const q of P.puffs) {\n    const a = q.a * sm(0, 0.9, q.age) * (1 - sm(q.life * 0.5, q.life, q.age)), gx = q.x / 2, gy = q.y / 2, rr = q.r * 0.75;\n    for (let j = max(0, floor(gy - rr * 1.3)); j \u003c= min(GH - 1, gy + rr * 1.3); j++)\n      for (let i = max(0, floor(gx - rr)); i \u003c= min(GW - 1, gx + rr); i++) {\n        const e = 1 - (i + 0.5 - gx) ** 2 / (rr * rr) - (j + 0.5 - gy) ** 2 / (rr * rr * 1.6);\n        if (e > 0) G[j * GW + i] += a * e * e;\n      }\n  }\n  // A low mist on the water, and the steam torn into wisps.\n  for (let j = 0, c = 0; j \u003c GH; j++)\n    for (let i = 0, mist = 0.2 * sm(PB - 8, PB + 14, j * 2 + 1); i \u003c GW; i++, c++)\n      if ((G[c] += mist) > 0.01) G[c] *= 0.2 + 0.85 * vn(i * 0.24 + P.fx, j * 0.17 + P.fy) + 0.45 * vn(i * 0.62 - P.fx, j * 0.44 + P.fy * 2);\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 2 - 0.25, j0 = cl(floor(v), 0, GH - 1), j1 = min(GH - 1, j0 + 1), fv = cl(v - j0, 0, 1), ay = 0.4 + 0.45 * sm(108, 56, y);\n    for (let x = 0; x \u003c W; x++) {\n      const u2 = x / 2 - 0.25, i0 = cl(floor(u2), 0, GW - 1), i1 = min(GW - 1, i0 + 1), fu = cl(u2 - i0, 0, 1);\n      const D = mix(mix(G[j0 * GW + i0], G[j0 * GW + i1], fu), mix(G[j1 * GW + i0], G[j1 * GW + i1], fu), fv);\n      if (D \u003c 0.05) continue;\n      const a = ay * sm(0.05, 1.3, D), i = y * W + x, o = i * 3, lm = P.lm[i] * lamp * 200;\n      for (let c = 0; c \u003c 3; c++) F[o + c] += (SC[c] + LC[c] * lm - F[o + c]) * a;\n    }\n  }\n  // Snow falling, thicker in the wind.\n  const nf = floor(110 + 70 * abs(P.w));\n  for (let n = 0; n \u003c nf; n++) {\n    const f = P.flakes[n], x = floor(f.x), y = floor(f.y);\n    if (y \u003c 0 || y >= H) continue;\n    const i = y * W + x, o = i * 3, b = 0.45 + 0.5 * f.z;\n    for (let c = 0; c \u003c 3; c++) F[o + c] += (SNOW[c] * (IL[o + c] * 0.6 + 0.4) - F[o + c]) * b;\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Monkeys=3..14, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The blue snow light of early evening at 0, through a violet dusk, to night at 1, when the stone lantern by the pool burns orange and lights the steam, the water and the monkeys near it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the steam takes about ten seconds to climb from the water to the top of the panel, and the mother soaks for about twenty seconds, then sits on her boulder about as long; at 0.2 it all runs ten times slower."},{"name":"Monkeys","min":3,"max":14,"about":"How many soak in the pool or sit on the rim rocks besides the mother and her baby, from three (a pair grooming and one asleep up to its chin) to a crowded fourteen. Turned up, they surface one by one; turned down, they sink away and the ones on the rim slip down behind their rocks. Wet fur steams, so more monkeys put up more steam."},{"name":"Wind","min":-1,"max":1,"about":"Calm in the middle, where the steam rises in clumps and sways; turned either way it leans the steam over and tears it off downwind, slants the snow and thickens it."}],"start":[0,2,3,0.06],"measures":{"motion":0.2849,"detail":0.086,"edges":0.3721,"complexity":2.5086,"coverage":0.9682,"colour":0.1461,"drift":0.1151},"knobResponse":[0.1114,0.1216,0.0428,0.1209]},{"slug":"soap-film","title":"Soap Film","family":"cosmetic","round":39,"note":"고리에 건 세안 거품의 막이 세로로 서서 빠져요. 위로 갈수록 얇아서 뉴턴의 색 띠가 가로로 쌓여 가라앉고, 옆에서 얇은 막이 기둥으로 올라오고, 위에서 검은 막이 내려와요. 다 얇아지면 막이 터지고 새 막이 아래에서 올라와요.","idea":"A soap film fills the panel and drains, thinner toward the top, so Newton's interference colours stack in bands that sink while slow eddies wind them into spirals, thin film pulled from the sides rises in plumes and the black film spreads down from the top, until the film bursts and a new one is drawn up from the bottom.","buttons":"K1 tap bursts the film now, and a new one is drawn up after it.","code":"// ===== Patternflow pattern =====\n// Title:   Soap Film\n// Family:  cosmetic\n// Idea:    A soap film fills the panel and drains, thinner toward the top, so Newton's interference colours stack in bands that sink while slow eddies wind them into spirals, thin film pulled from the sides rises in plumes and the black film spreads down from the top, until the film bursts and a new one is drawn up from the bottom.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after the film of a foaming cleanser stretched across a ring, coloured by thin-film interference in Newton's colour series (Isaac Newton, Opticks, 1704) and thinning from the top as it drains\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Light=0..1, Swirl=0..1\n//\n// Knob 1: Hue. Turns every colour of the film round the grey axis together; the black film stays grey. At 0 Newton's own colours: a gold and cream band of the first order under the black film, then indigo, blue, yellow, orange and magenta, then pastel greens and pinks lower down. At 0.25 the first-order band is green, at 0.5 sky blue, at 0.75 magenta, the rest following. Orange, yellow and lime that come out dark are lifted most of the way to full and paled a little, so they read amber, gold or lime and never brown or olive, and no colour of the film falls below a fifth.\n// Knob 2: Speed. At 2 the film opens 2 s into its drainage; the black film appears at the top within a second and comes down 7.7 LEDs a second, past the middle by 9 s, while the bottom thins from 950 nm when drawn to 550 six seconds later. When the black film is 68% of the way down, 11.8 s in, the film bursts: a hole opens near the top and its rim runs across the panel in 0.9 s throwing spray, the panel stays dark 0.4 s and a new film is drawn up from the bottom in 1.2 s, 15 s round after the first. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Light. The wall behind the film, black at 0, so the black film reads black. Turned up, a white wall shows through wherever the film reflects little: the black film and the hole of a burst go grey and then white, and the colours pale toward pastel; at 1 a pearly white sheet with pastel bands.\n// Knob 4: Swirl. How hard the eddies spin. One starts every 1.1 to 2.1 s somewhere in the film, 9 to 17 LEDs across its core, and spins up and down over 4 to 8 s; the film keeps the twist and drainage sorts it back into layers over about 8 s. At 0 an eddy winds the bands most of a turn at its core, at the start about one turn, at 1 two and a half, curling the gold edge of the black film into spirals.\n// Buttons: K1 tap bursts the film now, and a new one is drawn up after it.\n\nconst W = 64, H = 128, N = W * H;\n// Film index, and the thickness table in nm.\nconst NF = 1.33, HMAX = 1400;\n// Thinner than this the film is black film, nm.\nconst BLACK = 30;\n// Seconds of drainage at Speed 2 before the first frame.\nconst AGE0 = 2;\n// Gain and gamma of the table.\nconst GAIN = 0.95, GAM = 0.8;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// CIE 1931 colour matching, the piecewise Gaussian fit of Wyman, Sloan and\n// Shirley (2013).\nconst g1 = (l, m, a, b) => {\n  const t = (l - m) / (l \u003c m ? a : b);\n  return exp(-0.5 * t * t);\n};\nconst cmf = (l) => [\n  1.056 * g1(l, 599.8, 37.9, 31) + 0.362 * g1(l, 442, 16, 26.7) - 0.065 * g1(l, 501.1, 20.4, 26.2),\n  0.821 * g1(l, 568.8, 46.9, 40.5) + 0.286 * g1(l, 530.9, 16.3, 31.1),\n  1.217 * g1(l, 437, 11.8, 36) + 0.681 * g1(l, 459, 26, 13.8),\n];\nconst toRGB = (X, Y, Z) => [3.2406 * X - 1.5372 * Y - 0.4986 * Z, -0.9689 * X + 1.8758 * Y + 0.0415 * Z, 0.0557 * X - 0.204 * Y + 1.057 * Z];\n\n// Reflectance of a film h nm thick, two beams: the front face reflects with\n// r = (1 - n) / (1 + n) and the back with -r, a half wave apart, so\n// R = 4 r^2 sin^2(2 pi n h / lambda), zero as h goes to zero. Summed over\n// 400 to 700 nm in 10 nm steps against an equal-energy light and divided by\n// the full white, so a film reflecting every wavelength fully is 1, 1, 1.\nfunction baseTable() {\n  const L = [], C = [];\n  for (let l = 400; l \u003c= 700; l += 10) L.push(l), C.push(cmf(l));\n  let wx = 0, wy = 0, wz = 0;\n  for (const c of C) (wx += c[0]), (wy += c[1]), (wz += c[2]);\n  const wr = toRGB(wx, wy, wz);\n  const T = new Float32Array(HMAX * 3);\n  for (let h = 0; h \u003c HMAX; h++) {\n    let X = 0, Y = 0, Z = 0;\n    for (let i = 0; i \u003c L.length; i++) {\n      const s = sin((2 * PI * NF * h) / L[i]), R = s * s;\n      X += R * C[i][0];\n      Y += R * C[i][1];\n      Z += R * C[i][2];\n    }\n    const c = toRGB(X, Y, Z);\n    for (let k = 0; k \u003c 3; k++) T[h * 3 + k] = max(0, c[k] / wr[k]);\n  }\n  return T;\n}\n\nfunction hsvOf(r, g, b) {\n  const mx = max(r, g, b), mn = min(r, g, b), d = mx - mn;\n  let h = 0;\n  if (d > 1e-6) h = mx === r ? ((g - b) / d + 6) % 6 : mx === g ? (b - r) / d + 2 : (r - g) / d + 4;\n  return [h / 6, mx > 0 ? d / mx : 0, mx];\n}\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// The table as the panel shows it: turned round the grey axis by the hue,\n// a light gamma, and paled toward a white wall behind as Light turns up.\nfunction displayTable(S) {\n  const B = S.base, D = S.lut, a = 2 * PI * S.hue, ca = cos(a), sa = sin(a), k = (1 - ca) / 3, q = sa / sqrt(3);\n  const m = [ca + k, k - q, k + q, k + q, ca + k, k - q, k - q, k + q, ca + k];\n  const lw = S.light, tmp = [0, 0, 0];\n  for (let h = 0; h \u003c HMAX; h++) {\n    const r = B[h * 3], g = B[h * 3 + 1], b = B[h * 3 + 2];\n    const Y = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n    let R, G, Bb;\n    if (h \u003c BLACK) {\n      // Black film keeps its cool grey whatever the hue.\n      const v = (GAIN * Y) ** GAM;\n      (R = 0.85 * v), (G = 0.93 * v), (Bb = 1.1 * v);\n    } else {\n      R = min(1, max(0, m[0] * r + m[1] * g + m[2] * b) * GAIN) ** GAM;\n      G = min(1, max(0, m[3] * r + m[4] * g + m[5] * b) * GAIN) ** GAM;\n      Bb = min(1, max(0, m[6] * r + m[7] * g + m[8] * b) * GAIN) ** GAM;\n      // No colour of the film itself falls below a fifth; and orange, yellow\n      // and lime that come out dark, which read brown or olive, are lifted\n      // most of the way to full and paled a little.\n      const [hh, ss, vv] = hsvOf(R, G, Bb), warm = cl(1.4 - abs(hh - 0.15) / 0.12, 0, 1) * sm(0.97, 0.6, vv);\n      const v2 = 0.2 + 0.8 * vv;\n      hsv(hh, ss * (1 - 0.3 * warm), v2 + (0.95 - v2) * warm, tmp, 0);\n      (R = tmp[0]), (G = tmp[1]), (Bb = tmp[2]);\n    }\n    // A white wall behind shows through where the film reflects little.\n    const wl = lw * (0.35 + 0.65 * (1 - min(1, Y)));\n    D[h * 3] = 250 * (R + (1 - R) * wl);\n    D[h * 3 + 1] = 250 * (G + (1 - G) * wl);\n    D[h * 3 + 2] = 250 * (Bb + (1 - Bb) * wl);\n  }\n}\n\nconst hash = (n) => {\n  const s = sin(n * 12.9898) * 43758.5453;\n  return s - floor(s);\n};\n\n// Smooth value noise on a 64 x 64 lattice that wraps.\nfunction noise(L, x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx), uy = fy * fy * (3 - 2 * fy);\n  const x0 = xi & 63, y0 = yi & 63, x1 = (x0 + 1) & 63, y1 = (y0 + 1) & 63;\n  const a = L[y0 * 64 + x0], b = L[y0 * 64 + x1], c = L[y1 * 64 + x0], d = L[y1 * 64 + x1];\n  return a + (b - a) * ux + (c - a + (d - c - b + a) * ux) * uy;\n}\n\nexport function setup(params) {\n  const L = new Float32Array(64 * 64);\n  for (let i = 0; i \u003c L.length; i++) L[i] = random() * 2 - 1;\n  params.s = {\n    hue: -1, light: -1, speed: 2, swirl: 0, begun: false, t: 0, age: 0,\n    base: baseTable(), lut: new Float32Array(HMAX * 3), L,\n    MX: new Float32Array(N), MY: new Float32Array(N), T: new Float32Array(N),\n    NX: new Float32Array(N), NY: new Float32Array(N), NT: new Float32Array(N),\n    eddies: [], nextEddy: 0, nextPlume: 0, side: false, hole: null, draw: 0,\n  };\n  reset(params.s);\n}\n\n// A fresh film: every point where it was drawn, nothing thin in it yet.\nfunction reset(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.MX[y * W + x] = x;\n      S.MY[y * W + x] = y;\n    }\n  S.T.fill(0);\n  S.age = 0;\n}\n\nfunction spawnEddy(S) {\n  S.eddies.push({\n    x: 8 + random() * 48, y: 16 + random() * 104, R: 9 + random() * 8,\n    w: (random() \u003c 0.5 ? -1 : 1) * (0.7 + 0.6 * random()), age: 0, life: 4 + 4 * random(),\n    vx: (random() - 0.5) * 3, vy: (random() - 0.3) * 3,\n  });\n}\n\n// Thin film pulled out of the border at the sides, which then rises.\nfunction spawnPlume(S, front) {\n  S.side = !S.side;\n  const x0 = S.side ? 0.5 + random() * 3 : W - 1.5 - random() * 3;\n  const y0 = H * (front + (1 - front) * (0.25 + 0.75 * random())), r = 2 + random() * 1.5, a = 0.7 + 0.3 * random();\n  for (let y = max(0, floor(y0 - 7 * r)); y \u003c= min(H - 1, y0 + 7 * r); y++)\n    for (let x = max(0, floor(x0 - 3 * r)); x \u003c= min(W - 1, x0 + 3 * r); x++) {\n      const d2 = ((x - x0) ** 2 + ((y - y0) * 0.4) ** 2) / (r * r), p = y * W + x;\n      S.T[p] = min(1, S.T[p] + a * exp(-d2));\n    }\n}\n\nfunction bilerp(A, x, y) {\n  x = cl(x, 0, W - 1.001);\n  y = cl(y, 0, H - 1.001);\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  const a = A[p], b = A[p + 1], c = A[p + W], d = A[p + W + 1];\n  return a + (b - a) * fx + (c - a + (d - c - b + a) * fx) * fy;\n}\n\n// Where the black film reaches, 0 at the top and 1 at the bottom, for a\n// film of this age.\nconst frontAt = (age) => cl((age - 2.5) * 0.06, 0, 1);\n\nfunction step(S, d) {\n  S.t += d;\n  S.age += d;\n  const front = frontAt(S.age);\n  // Eddies: each spins up and down over its life; the film keeps the twist.\n  if (S.t > S.nextEddy) {\n    spawnEddy(S);\n    S.nextEddy = S.t + 1.1 + random();\n  }\n  for (const e of S.eddies) {\n    e.age += d;\n    e.x += e.vx * d;\n    e.y += e.vy * d;\n  }\n  S.eddies = S.eddies.filter((e) => e.age \u003c e.life);\n  if (S.t > S.nextPlume && !S.draw && !S.hole) {\n    spawnPlume(S, front);\n    S.nextPlume = S.t + 0.12 + 0.12 * random();\n  }\n  const { MX, MY, T, NX, NY, NT, L } = S, sw = 1.4 + 2.6 * S.swirl, t = S.t;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Fine turbulence everywhere, two noise fields as the flow.\n      const n1 = noise(L, x * 0.21 + t * 0.4, y * 0.21 - t * 0.3), n2 = noise(L, x * 0.21 + 17.3 - t * 0.35, y * 0.21 + 9.1 + t * 0.25);\n      let vx = 2.2 * n1, vy = 2.2 * n2;\n      for (const e of S.eddies) {\n        const dx = x - e.x, dy = y - e.y, r2 = dx * dx + dy * dy, R2 = e.R * e.R;\n        if (r2 > 6 * R2) continue;\n        const env = sin((PI * e.age) / e.life), om = sw * e.w * env * exp(-r2 / R2);\n        vx -= om * dy;\n        vy += om * dx;\n      }\n      const qx = x - vx * d, qy = y - vy * d;\n      NX[p] = bilerp(MX, qx, qy);\n      NY[p] = bilerp(MY, qx, qy);\n      // Thin film from the border is lighter and rises through the rest.\n      NT[p] = bilerp(T, qx, qy + 15 * T[p] * d) * (1 - 0.1 * d);\n    }\n  // Drainage sorts the film back into layers: every point eases toward where\n  // it is, over about 8 s.\n  const rx = 1 - exp(-d / 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      MX[p] = NX[p] + (x - NX[p]) * rx;\n      MY[p] = NY[p] + (y - NY[p]) * rx;\n      T[p] = NT[p];\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[3], 0, 1);\n  const hue = k[0] - floor(k[0]), light = cl(k[2], 0, 1);\n  if (abs(hue - S.hue) > 1e-3 || abs(light - S.light) > 1e-3) {\n    S.hue = hue;\n    S.light = light;\n    displayTable(S);\n  }\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c AGE0 * 10; i++) step(S, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.hole) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  const sd = (d * S.speed) / 2;\n  if (!S.hole && frontAt(S.age) > 0.68) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  if (S.hole) {\n    const o = S.hole;\n    if (o.r \u003c 160) o.r += 180 * sd;\n    else {\n      o.gap += sd;\n      if (o.gap > 0.4) {\n        reset(S);\n        S.hole = null;\n        S.draw = 1;\n      }\n    }\n  }\n  if (S.draw > 0) S.draw = max(0, S.draw - sd / 1.2);\n  step(S, sd);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { MX, MY, T, L, lut } = S, age = S.age, t = S.t;\n  const front = frontAt(age);\n  // Thickness at the bottom and just under the black film, nm.\n  const hb = 950 / sqrt(1 + age / 3), ht = 90 + 260 * exp(-age / 1.2);\n  const o = S.hole, dy = S.draw > 0 ? H * S.draw : -1, bgv = 255 * S.light;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (o && (x - o.x) ** 2 + (y - o.y) ** 2 \u003c o.r * o.r) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      if (y \u003c dy) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      // Where this bit of film sat when the film was layered, and how much\n      // thin film from the border it carries.\n      const mx = MX[p], my = MY[p];\n      let u = my / (H - 1) - 0.2 * T[p];\n      if (dy >= 0) u = (u - S.draw) / (1 - S.draw);\n      const edge = front - 0.02 + 0.025 * noise(L, mx * 0.09 + 31, t * 0.15), e0 = max(0, edge);\n      let h;\n      if (u \u003c edge) {\n        // Black film, 1 to 21 nm, reflecting next to nothing.\n        h = 11 + 6 * noise(L, mx * 0.45 + 5, my * 0.45) + 4 * noise(L, mx * 1.2 + 23, my * 1.2 - t * 0.3);\n      } else {\n        const s = cl((u - e0) / (1 - e0), 0, 1);\n        h = ht + (hb - ht) * s ** 0.8;\n        h += 16 * noise(L, mx * 0.75 + 40, my * 0.75) + 6 * noise(L, x * 0.55 + t * 0.6, y * 0.55);\n      }\n      h = cl(h, 0, HMAX - 2);\n      const hi = floor(h), f = h - hi, a = hi * 3;\n      let r = lut[a] + (lut[a + 3] - lut[a]) * f, g = lut[a + 1] + (lut[a + 4] - lut[a + 1]) * f, b = lut[a + 2] + (lut[a + 5] - lut[a + 2]) * f;\n      if (o) {\n        // The rim the burst gathers, running out ahead of the hole, and the\n        // spray it throws.\n        const dr = Math.hypot(x - o.x, y - o.y) - o.r;\n        let rim = dr \u003c 4 ? exp(-dr * 0.7) : 0;\n        if (dr \u003c 9 && hash(x * 7 + y * 131 + floor(o.r) * 17) > 0.9) rim = max(rim, 1 - dr / 9);\n        r += (250 - r) * rim;\n        g += (250 - g) * rim;\n        b += (255 - b) * rim;\n      }\n      display.setPixel(x, y, round(cl(r, 0, 255)), round(cl(g, 0, 255)), round(cl(b, 0, 255)));\n    }\n}\n","layer":{"id":"layer-soap-film","type":"code","name":"soap-film","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Soap Film\n// Family:  cosmetic\n// Idea:    A soap film fills the panel and drains, thinner toward the top, so Newton's interference colours stack in bands that sink while slow eddies wind them into spirals, thin film pulled from the sides rises in plumes and the black film spreads down from the top, until the film bursts and a new one is drawn up from the bottom.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 39, after the film of a foaming cleanser stretched across a ring, coloured by thin-film interference in Newton's colour series (Isaac Newton, Opticks, 1704) and thinning from the top as it drains\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Light=0..1, Swirl=0..1\n//\n// Knob 1: Hue. Turns every colour of the film round the grey axis together; the black film stays grey. At 0 Newton's own colours: a gold and cream band of the first order under the black film, then indigo, blue, yellow, orange and magenta, then pastel greens and pinks lower down. At 0.25 the first-order band is green, at 0.5 sky blue, at 0.75 magenta, the rest following. Orange, yellow and lime that come out dark are lifted most of the way to full and paled a little, so they read amber, gold or lime and never brown or olive, and no colour of the film falls below a fifth.\n// Knob 2: Speed. At 2 the film opens 2 s into its drainage; the black film appears at the top within a second and comes down 7.7 LEDs a second, past the middle by 9 s, while the bottom thins from 950 nm when drawn to 550 six seconds later. When the black film is 68% of the way down, 11.8 s in, the film bursts: a hole opens near the top and its rim runs across the panel in 0.9 s throwing spray, the panel stays dark 0.4 s and a new film is drawn up from the bottom in 1.2 s, 15 s round after the first. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Light. The wall behind the film, black at 0, so the black film reads black. Turned up, a white wall shows through wherever the film reflects little: the black film and the hole of a burst go grey and then white, and the colours pale toward pastel; at 1 a pearly white sheet with pastel bands.\n// Knob 4: Swirl. How hard the eddies spin. One starts every 1.1 to 2.1 s somewhere in the film, 9 to 17 LEDs across its core, and spins up and down over 4 to 8 s; the film keeps the twist and drainage sorts it back into layers over about 8 s. At 0 an eddy winds the bands most of a turn at its core, at the start about one turn, at 1 two and a half, curling the gold edge of the black film into spirals.\n// Buttons: K1 tap bursts the film now, and a new one is drawn up after it.\n\nconst W = 64, H = 128, N = W * H;\n// Film index, and the thickness table in nm.\nconst NF = 1.33, HMAX = 1400;\n// Thinner than this the film is black film, nm.\nconst BLACK = 30;\n// Seconds of drainage at Speed 2 before the first frame.\nconst AGE0 = 2;\n// Gain and gamma of the table.\nconst GAIN = 0.95, GAM = 0.8;\nconst { floor, min, max, abs, sqrt, exp, sin, cos, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// CIE 1931 colour matching, the piecewise Gaussian fit of Wyman, Sloan and\n// Shirley (2013).\nconst g1 = (l, m, a, b) => {\n  const t = (l - m) / (l \u003c m ? a : b);\n  return exp(-0.5 * t * t);\n};\nconst cmf = (l) => [\n  1.056 * g1(l, 599.8, 37.9, 31) + 0.362 * g1(l, 442, 16, 26.7) - 0.065 * g1(l, 501.1, 20.4, 26.2),\n  0.821 * g1(l, 568.8, 46.9, 40.5) + 0.286 * g1(l, 530.9, 16.3, 31.1),\n  1.217 * g1(l, 437, 11.8, 36) + 0.681 * g1(l, 459, 26, 13.8),\n];\nconst toRGB = (X, Y, Z) => [3.2406 * X - 1.5372 * Y - 0.4986 * Z, -0.9689 * X + 1.8758 * Y + 0.0415 * Z, 0.0557 * X - 0.204 * Y + 1.057 * Z];\n\n// Reflectance of a film h nm thick, two beams: the front face reflects with\n// r = (1 - n) / (1 + n) and the back with -r, a half wave apart, so\n// R = 4 r^2 sin^2(2 pi n h / lambda), zero as h goes to zero. Summed over\n// 400 to 700 nm in 10 nm steps against an equal-energy light and divided by\n// the full white, so a film reflecting every wavelength fully is 1, 1, 1.\nfunction baseTable() {\n  const L = [], C = [];\n  for (let l = 400; l \u003c= 700; l += 10) L.push(l), C.push(cmf(l));\n  let wx = 0, wy = 0, wz = 0;\n  for (const c of C) (wx += c[0]), (wy += c[1]), (wz += c[2]);\n  const wr = toRGB(wx, wy, wz);\n  const T = new Float32Array(HMAX * 3);\n  for (let h = 0; h \u003c HMAX; h++) {\n    let X = 0, Y = 0, Z = 0;\n    for (let i = 0; i \u003c L.length; i++) {\n      const s = sin((2 * PI * NF * h) / L[i]), R = s * s;\n      X += R * C[i][0];\n      Y += R * C[i][1];\n      Z += R * C[i][2];\n    }\n    const c = toRGB(X, Y, Z);\n    for (let k = 0; k \u003c 3; k++) T[h * 3 + k] = max(0, c[k] / wr[k]);\n  }\n  return T;\n}\n\nfunction hsvOf(r, g, b) {\n  const mx = max(r, g, b), mn = min(r, g, b), d = mx - mn;\n  let h = 0;\n  if (d > 1e-6) h = mx === r ? ((g - b) / d + 6) % 6 : mx === g ? (b - r) / d + 2 : (r - g) / d + 4;\n  return [h / 6, mx > 0 ? d / mx : 0, mx];\n}\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[o] = rgb[0];\n  out[o + 1] = rgb[1];\n  out[o + 2] = rgb[2];\n}\n\n// The table as the panel shows it: turned round the grey axis by the hue,\n// a light gamma, and paled toward a white wall behind as Light turns up.\nfunction displayTable(S) {\n  const B = S.base, D = S.lut, a = 2 * PI * S.hue, ca = cos(a), sa = sin(a), k = (1 - ca) / 3, q = sa / sqrt(3);\n  const m = [ca + k, k - q, k + q, k + q, ca + k, k - q, k - q, k + q, ca + k];\n  const lw = S.light, tmp = [0, 0, 0];\n  for (let h = 0; h \u003c HMAX; h++) {\n    const r = B[h * 3], g = B[h * 3 + 1], b = B[h * 3 + 2];\n    const Y = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n    let R, G, Bb;\n    if (h \u003c BLACK) {\n      // Black film keeps its cool grey whatever the hue.\n      const v = (GAIN * Y) ** GAM;\n      (R = 0.85 * v), (G = 0.93 * v), (Bb = 1.1 * v);\n    } else {\n      R = min(1, max(0, m[0] * r + m[1] * g + m[2] * b) * GAIN) ** GAM;\n      G = min(1, max(0, m[3] * r + m[4] * g + m[5] * b) * GAIN) ** GAM;\n      Bb = min(1, max(0, m[6] * r + m[7] * g + m[8] * b) * GAIN) ** GAM;\n      // No colour of the film itself falls below a fifth; and orange, yellow\n      // and lime that come out dark, which read brown or olive, are lifted\n      // most of the way to full and paled a little.\n      const [hh, ss, vv] = hsvOf(R, G, Bb), warm = cl(1.4 - abs(hh - 0.15) / 0.12, 0, 1) * sm(0.97, 0.6, vv);\n      const v2 = 0.2 + 0.8 * vv;\n      hsv(hh, ss * (1 - 0.3 * warm), v2 + (0.95 - v2) * warm, tmp, 0);\n      (R = tmp[0]), (G = tmp[1]), (Bb = tmp[2]);\n    }\n    // A white wall behind shows through where the film reflects little.\n    const wl = lw * (0.35 + 0.65 * (1 - min(1, Y)));\n    D[h * 3] = 250 * (R + (1 - R) * wl);\n    D[h * 3 + 1] = 250 * (G + (1 - G) * wl);\n    D[h * 3 + 2] = 250 * (Bb + (1 - Bb) * wl);\n  }\n}\n\nconst hash = (n) => {\n  const s = sin(n * 12.9898) * 43758.5453;\n  return s - floor(s);\n};\n\n// Smooth value noise on a 64 x 64 lattice that wraps.\nfunction noise(L, x, y) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx), uy = fy * fy * (3 - 2 * fy);\n  const x0 = xi & 63, y0 = yi & 63, x1 = (x0 + 1) & 63, y1 = (y0 + 1) & 63;\n  const a = L[y0 * 64 + x0], b = L[y0 * 64 + x1], c = L[y1 * 64 + x0], d = L[y1 * 64 + x1];\n  return a + (b - a) * ux + (c - a + (d - c - b + a) * ux) * uy;\n}\n\nexport function setup(params) {\n  const L = new Float32Array(64 * 64);\n  for (let i = 0; i \u003c L.length; i++) L[i] = random() * 2 - 1;\n  params.s = {\n    hue: -1, light: -1, speed: 2, swirl: 0, begun: false, t: 0, age: 0,\n    base: baseTable(), lut: new Float32Array(HMAX * 3), L,\n    MX: new Float32Array(N), MY: new Float32Array(N), T: new Float32Array(N),\n    NX: new Float32Array(N), NY: new Float32Array(N), NT: new Float32Array(N),\n    eddies: [], nextEddy: 0, nextPlume: 0, side: false, hole: null, draw: 0,\n  };\n  reset(params.s);\n}\n\n// A fresh film: every point where it was drawn, nothing thin in it yet.\nfunction reset(S) {\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.MX[y * W + x] = x;\n      S.MY[y * W + x] = y;\n    }\n  S.T.fill(0);\n  S.age = 0;\n}\n\nfunction spawnEddy(S) {\n  S.eddies.push({\n    x: 8 + random() * 48, y: 16 + random() * 104, R: 9 + random() * 8,\n    w: (random() \u003c 0.5 ? -1 : 1) * (0.7 + 0.6 * random()), age: 0, life: 4 + 4 * random(),\n    vx: (random() - 0.5) * 3, vy: (random() - 0.3) * 3,\n  });\n}\n\n// Thin film pulled out of the border at the sides, which then rises.\nfunction spawnPlume(S, front) {\n  S.side = !S.side;\n  const x0 = S.side ? 0.5 + random() * 3 : W - 1.5 - random() * 3;\n  const y0 = H * (front + (1 - front) * (0.25 + 0.75 * random())), r = 2 + random() * 1.5, a = 0.7 + 0.3 * random();\n  for (let y = max(0, floor(y0 - 7 * r)); y \u003c= min(H - 1, y0 + 7 * r); y++)\n    for (let x = max(0, floor(x0 - 3 * r)); x \u003c= min(W - 1, x0 + 3 * r); x++) {\n      const d2 = ((x - x0) ** 2 + ((y - y0) * 0.4) ** 2) / (r * r), p = y * W + x;\n      S.T[p] = min(1, S.T[p] + a * exp(-d2));\n    }\n}\n\nfunction bilerp(A, x, y) {\n  x = cl(x, 0, W - 1.001);\n  y = cl(y, 0, H - 1.001);\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  const a = A[p], b = A[p + 1], c = A[p + W], d = A[p + W + 1];\n  return a + (b - a) * fx + (c - a + (d - c - b + a) * fx) * fy;\n}\n\n// Where the black film reaches, 0 at the top and 1 at the bottom, for a\n// film of this age.\nconst frontAt = (age) => cl((age - 2.5) * 0.06, 0, 1);\n\nfunction step(S, d) {\n  S.t += d;\n  S.age += d;\n  const front = frontAt(S.age);\n  // Eddies: each spins up and down over its life; the film keeps the twist.\n  if (S.t > S.nextEddy) {\n    spawnEddy(S);\n    S.nextEddy = S.t + 1.1 + random();\n  }\n  for (const e of S.eddies) {\n    e.age += d;\n    e.x += e.vx * d;\n    e.y += e.vy * d;\n  }\n  S.eddies = S.eddies.filter((e) => e.age \u003c e.life);\n  if (S.t > S.nextPlume && !S.draw && !S.hole) {\n    spawnPlume(S, front);\n    S.nextPlume = S.t + 0.12 + 0.12 * random();\n  }\n  const { MX, MY, T, NX, NY, NT, L } = S, sw = 1.4 + 2.6 * S.swirl, t = S.t;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // Fine turbulence everywhere, two noise fields as the flow.\n      const n1 = noise(L, x * 0.21 + t * 0.4, y * 0.21 - t * 0.3), n2 = noise(L, x * 0.21 + 17.3 - t * 0.35, y * 0.21 + 9.1 + t * 0.25);\n      let vx = 2.2 * n1, vy = 2.2 * n2;\n      for (const e of S.eddies) {\n        const dx = x - e.x, dy = y - e.y, r2 = dx * dx + dy * dy, R2 = e.R * e.R;\n        if (r2 > 6 * R2) continue;\n        const env = sin((PI * e.age) / e.life), om = sw * e.w * env * exp(-r2 / R2);\n        vx -= om * dy;\n        vy += om * dx;\n      }\n      const qx = x - vx * d, qy = y - vy * d;\n      NX[p] = bilerp(MX, qx, qy);\n      NY[p] = bilerp(MY, qx, qy);\n      // Thin film from the border is lighter and rises through the rest.\n      NT[p] = bilerp(T, qx, qy + 15 * T[p] * d) * (1 - 0.1 * d);\n    }\n  // Drainage sorts the film back into layers: every point eases toward where\n  // it is, over about 8 s.\n  const rx = 1 - exp(-d / 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      MX[p] = NX[p] + (x - NX[p]) * rx;\n      MY[p] = NY[p] + (y - NY[p]) * rx;\n      T[p] = NT[p];\n    }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[3], 0, 1);\n  const hue = k[0] - floor(k[0]), light = cl(k[2], 0, 1);\n  if (abs(hue - S.hue) > 1e-3 || abs(light - S.light) > 1e-3) {\n    S.hue = hue;\n    S.light = light;\n    displayTable(S);\n  }\n  if (!S.begun) {\n    S.begun = true;\n    for (let i = 0; i \u003c AGE0 * 10; i++) step(S, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0] && !S.hole) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  const sd = (d * S.speed) / 2;\n  if (!S.hole && frontAt(S.age) > 0.68) S.hole = { x: 10 + random() * 44, y: 4 + random() * 10, r: 0, gap: 0 };\n  if (S.hole) {\n    const o = S.hole;\n    if (o.r \u003c 160) o.r += 180 * sd;\n    else {\n      o.gap += sd;\n      if (o.gap > 0.4) {\n        reset(S);\n        S.hole = null;\n        S.draw = 1;\n      }\n    }\n  }\n  if (S.draw > 0) S.draw = max(0, S.draw - sd / 1.2);\n  step(S, sd);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { MX, MY, T, L, lut } = S, age = S.age, t = S.t;\n  const front = frontAt(age);\n  // Thickness at the bottom and just under the black film, nm.\n  const hb = 950 / sqrt(1 + age / 3), ht = 90 + 260 * exp(-age / 1.2);\n  const o = S.hole, dy = S.draw > 0 ? H * S.draw : -1, bgv = 255 * S.light;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (o && (x - o.x) ** 2 + (y - o.y) ** 2 \u003c o.r * o.r) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      if (y \u003c dy) {\n        display.setPixel(x, y, round(bgv * 0.95 + 4), round(bgv * 0.95 + 4), round(bgv * 0.97 + 7));\n        continue;\n      }\n      // Where this bit of film sat when the film was layered, and how much\n      // thin film from the border it carries.\n      const mx = MX[p], my = MY[p];\n      let u = my / (H - 1) - 0.2 * T[p];\n      if (dy >= 0) u = (u - S.draw) / (1 - S.draw);\n      const edge = front - 0.02 + 0.025 * noise(L, mx * 0.09 + 31, t * 0.15), e0 = max(0, edge);\n      let h;\n      if (u \u003c edge) {\n        // Black film, 1 to 21 nm, reflecting next to nothing.\n        h = 11 + 6 * noise(L, mx * 0.45 + 5, my * 0.45) + 4 * noise(L, mx * 1.2 + 23, my * 1.2 - t * 0.3);\n      } else {\n        const s = cl((u - e0) / (1 - e0), 0, 1);\n        h = ht + (hb - ht) * s ** 0.8;\n        h += 16 * noise(L, mx * 0.75 + 40, my * 0.75) + 6 * noise(L, x * 0.55 + t * 0.6, y * 0.55);\n      }\n      h = cl(h, 0, HMAX - 2);\n      const hi = floor(h), f = h - hi, a = hi * 3;\n      let r = lut[a] + (lut[a + 3] - lut[a]) * f, g = lut[a + 1] + (lut[a + 4] - lut[a + 1]) * f, b = lut[a + 2] + (lut[a + 5] - lut[a + 2]) * f;\n      if (o) {\n        // The rim the burst gathers, running out ahead of the hole, and the\n        // spray it throws.\n        const dr = Math.hypot(x - o.x, y - o.y) - o.r;\n        let rim = dr \u003c 4 ? exp(-dr * 0.7) : 0;\n        if (dr \u003c 9 && hash(x * 7 + y * 131 + floor(o.r) * 17) > 0.9) rim = max(rim, 1 - dr / 9);\n        r += (250 - r) * rim;\n        g += (250 - g) * rim;\n        b += (255 - b) * rim;\n      }\n      display.setPixel(x, y, round(cl(r, 0, 255)), round(cl(g, 0, 255)), round(cl(b, 0, 255)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Light=0..1, Swirl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour of the film round the grey axis together; the black film stays grey. At 0 Newton's own colours: a gold and cream band of the first order under the black film, then indigo, blue, yellow, orange and magenta, then pastel greens and pinks lower down. At 0.25 the first-order band is green, at 0.5 sky blue, at 0.75 magenta, the rest following. Orange, yellow and lime that come out dark are lifted most of the way to full and paled a little, so they read amber, gold or lime and never brown or olive, and no colour of the film falls below a fifth."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the film opens 2 s into its drainage; the black film appears at the top within a second and comes down 7.7 LEDs a second, past the middle by 9 s, while the bottom thins from 950 nm when drawn to 550 six seconds later. When the black film is 68% of the way down, 11.8 s in, the film bursts: a hole opens near the top and its rim runs across the panel in 0.9 s throwing spray, the panel stays dark 0.4 s and a new film is drawn up from the bottom in 1.2 s, 15 s round after the first. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Light","min":0,"max":1,"about":"The wall behind the film, black at 0, so the black film reads black. Turned up, a white wall shows through wherever the film reflects little: the black film and the hole of a burst go grey and then white, and the colours pale toward pastel; at 1 a pearly white sheet with pastel bands."},{"name":"Swirl","min":0,"max":1,"about":"How hard the eddies spin. One starts every 1.1 to 2.1 s somewhere in the film, 9 to 17 LEDs across its core, and spins up and down over 4 to 8 s; the film keeps the twist and drainage sorts it back into layers over about 8 s. At 0 an eddy winds the bands most of a turn at its core, at the start about one turn, at 1 two and a half, curling the gold edge of the black film into spirals."}],"start":[0,2,0,0.06],"measures":{"motion":0.2419,"detail":0.0368,"edges":0.0854,"complexity":2.3422,"coverage":0.754,"colour":0.6118,"drift":0.3785},"knobResponse":[0.4809,0.5345,0.3525,0.1517]},{"slug":"sorting","title":"Sorting","family":"algo","round":2,"note":"막대 64개를 알고리즘 하나가 한 번에 한 동작씩 줄 세워요. 비교하는 막대는 희게, 바꾸는 막대는 붉게 켜지고, 다 서면 위에서 아래로 훑어 확인한 뒤 다시 섞어요.","idea":"Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.","buttons":"K1 tap throws the bars back into a heap.","code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-sorting","type":"code","name":"sorting","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the bars, which run from the shortest to the longest across a third of the colour wheel."},{"name":"Speed","min":0,"max":5,"about":"Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one."},{"name":"Algorithm","min":0,"max":7,"about":"0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand."},{"name":"Rows","min":2,"max":8,"about":"How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them."}],"start":[0,2,0,2],"measures":{"motion":1.5282,"detail":0.0322,"edges":0.8211,"complexity":0.0601,"coverage":0.5078,"colour":0.3589,"drift":0.1727},"knobResponse":[0.2105,0.2338,0.2297,0.1743]},{"slug":"sorting-network","title":"Sorting Network","family":"line","round":33,"note":"실 열여섯 가닥이 이웃끼리 한 쌍씩 자리를 바꿔 128줄 만에 순서가 거꾸로 되고, 다음 네트워크가 이어받아 실마다 패널을 사인 곡선으로 가로질러요. 균일한 무작위 정렬 네트워크라 바꾼 자리를 찍은 점이 가운데로 반원 꼴로 몰려요. K3 은 실을 32가닥까지 늘리고, K1 을 누르면 실 하나만 8초 동안 밝혀 그 곡선을 보여 줘요.","idea":"Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.","buttons":"K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.","code":"// ===== Patternflow pattern =====\n// Title:   Sorting Network\n// Family:  line\n// Idea:    Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: uniform random sorting networks (Omer Angel, Alexander Holroyd, Dan Romik, Bálint Virág, 2007), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1\n//\n// Knob 1: Hue. Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right.\n// Knob 2: Speed. Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds.\n// Knob 3: Wires. How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row.\n// Knob 4: Bubble. Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns.\n// Buttons: K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.\n\nconst W = 64, H = 128, NET = 128;\nconst HMAX = 12, HALF_PI = Math.PI / 2;\nconst { min, max, floor, ceil, sin, cos } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A uniformly random standard Young tableau of the staircase (n-1, ..., 1),\n// by the hook walk of Greene, Nijenhuis and Wilf (1979): start on a uniform\n// cell, jump to a uniform other cell of its hook until the walk stands on a\n// corner, write the largest number not yet used there, take the corner off.\n// T[r * (n-1) + c], 0-indexed, rows of n-1-r cells.\nfunction hookWalk(n) {\n  const R = n - 1, len = new Int32Array(R), T = new Int32Array(R * R);\n  for (let r = 0; r \u003c R; r++) len[r] = R - r;\n  let cells = (n * (n - 1)) / 2;\n  for (let val = cells; val >= 1; val--, cells--) {\n    let k = floor(Math.random() * cells), r = 0;\n    while (k >= len[r]) (k -= len[r]), r++;\n    let c = k;\n    for (;;) {\n      const arm = len[r] - 1 - c;\n      let leg = 0;\n      while (r + leg + 1 \u003c R && len[r + leg + 1] > c) leg++;\n      if (arm + leg === 0) break;\n      const h = floor(Math.random() * (arm + leg));\n      if (h \u003c arm) c += 1 + h;\n      else r += 1 + h - arm;\n    }\n    T[r * R + c] = val;\n    len[r]--;\n  }\n  return T;\n}\n\n// The tableau read row by row, 1 to N: under Edelman-Greene it is the\n// bubble-sort network run backwards in time, 1 | 2 1 | 3 2 1 | ..., where\n// the thread in place k walks left past all k threads before it in one\n// straight diagonal. Read column by column it is the mirror image.\nfunction readTableau(n, byRow) {\n  const R = n - 1, T = new Int32Array(R * R);\n  let v = 1;\n  for (let a = 0; a \u003c R; a++) for (let b = 0; b \u003c R - a; b++) T[byRow ? a * R + b : b * R + a] = v++;\n  return T;\n}\n\n// Edelman-Greene (1987), as Angel, Holroyd, Romik and Virag lay it out:\n// N times over, the largest entry N sits in a corner (i, j) with i + j = n,\n// 1-indexed; swap places j and j + 1; empty that cell and slide the hole to\n// (1, 1), each time moving in the larger of the neighbours above and to the\n// left; add 1 to every entry and write 1 in (1, 1). Adding 1 to everything\n// is kept as one offset, so a network costs N * n steps, not N * N. Checked\n// in a scratch script over 1400 networks with n from 3 to 32: every swap\n// takes a pair still in order and each network ends reversed; at n = 4 all\n// 16 reduced words of the longest permutation came out equally often.\nfunction edelmanGreene(T0, n, out) {\n  const R = n - 1, N = (n * (n - 1)) / 2, t = Int32Array.from(T0);\n  let off = 0;\n  for (let s = 0; s \u003c N; s++) {\n    let r = 0;\n    while (r \u003c R && t[r * R + R - 1 - r] + off !== N) r++;\n    let c = R - 1 - r;\n    out[s] = c;\n    for (;;) {\n      const up = r > 0 ? t[(r - 1) * R + c] : -1e9, lf = c > 0 ? t[r * R + c - 1] : -1e9;\n      if (r === 0 && c === 0) break;\n      if (up > lf) (t[r * R + c] = up), r--;\n      else (t[r * R + c] = lf), c--;\n    }\n    off++;\n    t[0] = 1 - off;\n  }\n}\n\n// Each cell gets (1 - b) * uniform + b * bubble. Both tableaux grow along\n// rows and down columns, so their blend does too, and ranking the cells by\n// it is a standard tableau again: a sorting network for every b.\nfunction network(P, net) {\n  const n = P.n, R = n - 1, N = (n * (n - 1)) / 2, b = P.bubble;\n  const Tb = (net.m & 1) === 0 ? P.tabRow : P.tabCol;\n  let T = net.tu;\n  if (b > 0) {\n    const key = new Float64Array(R * R), ids = [];\n    for (let r = 0; r \u003c R; r++) for (let c = 0; c \u003c R - r; c++) {\n      const i = r * R + c;\n      key[i] = (1 - b) * net.tu[i] + b * Tb[i];\n      ids.push(i);\n    }\n    ids.sort((x, y) => key[x] - key[y] || x - y);\n    T = new Int32Array(R * R);\n    for (let k = 0; k \u003c N; k++) T[ids[k]] = k + 1;\n  }\n  edelmanGreene(T, n, net.sw);\n  // The cheap form of the check, once a network: every swap must take a\n  // pair still in its starting order, and the end must be the reversal.\n  // A miss falls back on bubble sort, which is always right.\n  const a = Int32Array.from({ length: n }, (_, i) => i);\n  let ok = true;\n  for (let s = 0; s \u003c N && ok; s++) {\n    const p = net.sw[s], x = a[p];\n    if (x > a[p + 1]) ok = false;\n    (a[p] = a[p + 1]), (a[p + 1] = x);\n  }\n  for (let i = 0; i \u003c n && ok; i++) if (a[i] !== n - 1 - i) ok = false;\n  if (!ok) edelmanGreene(Tb, n, net.sw);\n  net.b = b;\n}\n\nfunction rebuild(P) {\n  const n = P.n;\n  P.tabRow = readTableau(n, true);\n  P.tabCol = readTableau(n, false);\n  P.nets = new Map();\n  P.cols = new Float32Array(n * 3);\n  // Four threads are drawn bright, both edges and two between, 0, 5, 10\n  // and 15 of sixteen: the edges swing all the way across on half a cosine,\n  // the two inside on arcs whose height the network picks.\n  P.lead = new Uint8Array(n);\n  for (let k = 0; k \u003c 4; k++) P.lead[Math.round((k * (n - 1)) / 3)] = 1;\n  P.colHue = NaN;\n  const cap = 4 * ((n * (n - 1)) / 2) + 8;\n  P.mt = new Float32Array(cap);\n  P.md = new Int8Array(cap);\n  P.mw = new Int32Array(cap);\n  P.mh = new Float32Array(cap);\n  P.mr = new Float32Array(cap);\n  P.dt_ = new Float32Array(cap);\n  P.dp = new Int32Array(cap);\n  P.da = new Int32Array(cap);\n  P.db = new Int32Array(cap);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 16, bubble: 0.06, scroll: 0, hl: -1, hlT: 0, hlA: 0,\n    buf: new Float32Array(W * H * 3),\n  };\n  rebuild(params.s);\n}\n\nfunction getNet(P, m) {\n  let net = P.nets.get(m);\n  if (!net) {\n    net = { m, tu: hookWalk(P.n), sw: new Int32Array((P.n * (P.n - 1)) / 2), b: -1 };\n    P.nets.set(m, net);\n  }\n  if (net.b !== P.bubble) network(P, net);\n  return net;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  const n = cl(Math.round(k[2]), 16, 32);\n  if (n !== P.n) (P.n = n), rebuild(P), (P.hl = -1), (P.hlT = 0);\n  // Bubble moves in steps of 1/200 so a knob resting between two readings\n  // does not rebuild the networks every frame.\n  P.bubble = Math.round(cl(k[3], 0, 1) * 200) / 200;\n  if (input.btnPressed && input.btnPressed[0]) {\n    let w = floor(Math.random() * (P.hl \u003c 0 ? P.n : P.n - 1));\n    if (P.hl >= 0 && w >= P.hl) w++;\n    P.hl = w;\n    P.hlT = 8;\n  }\n  P.hlT = max(0, P.hlT - d);\n  P.hlA += ((P.hlT > 0 ? 1 : 0) - P.hlA) * min(1, d * 5);\n  P.scroll += d * P.speed * 4;\n  const first = floor(P.scroll / NET) - 1;\n  for (const m of P.nets.keys()) if (m \u003c first) P.nets.delete(m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, N = (n * (n - 1)) / 2, buf = P.buf, sp = W / n;\n  if (P.colHue !== P.hue) {\n    // Gold through green, cyan and blue to violet: the thread that starts on\n    // the left is gold at Hue 0, the one on the right violet, never red.\n    for (let v = 0; v \u003c n; v++) hsv(P.hue + 0.14 + (0.64 * v) / (n - 1), 0.82, 1, P.cols, v * 3);\n    P.colHue = P.hue;\n  }\n  buf.fill(0);\n  // Every move in sight, in time order. Row y holds network time scroll + y;\n  // network m fills times 128 m to 128 (m + 1) and starts from the identity\n  // when m is even, from the reversal when m is odd, so threads run on from\n  // one network into the next and nothing has to be carried between them.\n  const T0 = P.scroll - HMAX - 1, T1 = P.scroll + H + HMAX + 1;\n  const cnt = new Int32Array(n), mt = P.mt, md = P.md, mw = P.mw, mh = P.mh, mr = P.mr;\n  // Moves are grouped by thread: thread w owns slots w * per .. w * per + per.\n  const per = floor(mt.length / n);\n  let nd = 0;\n  for (let m = floor(T0 / NET); m \u003c= floor(T1 / NET); m++) {\n    const net = getNet(P, m), st = new Int32Array(n);\n    for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n    for (let s = 0; s \u003c N; s++) {\n      const t = m * NET + ((s + 0.5) * NET) / N, p = net.sw[s], a = st[p], b = st[p + 1];\n      st[p] = b;\n      st[p + 1] = a;\n      if (t \u003c T0 || t > T1) continue;\n      if (cnt[a] >= per || cnt[b] >= per) continue;\n      const ia = a * per + cnt[a]++, ib = b * per + cnt[b]++;\n      (mt[ia] = t), (md[ia] = 1), (mw[ia] = p);\n      (mt[ib] = t), (md[ib] = -1), (mw[ib] = p + 1);\n      P.dt_[nd] = t;\n      P.dp[nd] = p;\n      P.da[nd] = a;\n      P.db[nd] = b;\n      nd++;\n    }\n  }\n  // A thread leaves the middle of its place halfway between its swaps,\n  // meets its partner on the boundary at the swap and settles in the middle\n  // of the next place halfway to its swap after, never taking more than\n  // HMAX rows a side. Each thread keeps its own timing, so it is always\n  // under way and still crosses its partner at the dot: both are on the\n  // boundary at the swap time.\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    for (let i = 0; i \u003c cnt[w]; i++) {\n      mh[o + i] = i > 0 ? min(HMAX, (mt[o + i] - mt[o + i - 1]) / 2) : HMAX;\n      mr[o + i] = i + 1 \u003c cnt[w] ? min(HMAX, (mt[o + i + 1] - mt[o + i]) / 2) : HMAX;\n    }\n  }\n  const hlA = P.hlA, cols = P.cols;\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    // Place of thread w at the top of the window: where its first move in\n    // sight starts from, or, with no move in sight, where it sits.\n    let i = 0;\n    let base = cnt[w] > 0 ? mw[o] - md[o] : placeAt(P, w, T0);\n    const lead = P.lead[w], lit = w === P.hl ? 1 : 1 - 0.75 * hlA;\n    const gain = ((lead ? 0.85 : 0.4) + (w === P.hl ? (1 - (lead ? 0.85 : 0.4)) * hlA : 0)) * lit;\n    const cr = cols[w * 3] * gain, cg = cols[w * 3 + 1] * gain, cb = cols[w * 3 + 2] * gain;\n    // A quarter cosine into the boundary and a quarter sine out of it.\n    const xAt = (t) => {\n      while (i \u003c cnt[w] && t >= mt[o + i] + mr[o + i]) (base += md[o + i]), i++;\n      let pos = base;\n      if (i \u003c cnt[w]) {\n        const u = t - mt[o + i];\n        if (u >= 0) pos += md[o + i] * (0.5 + 0.5 * sin((u / mr[o + i]) * HALF_PI));\n        else if (u > -mh[o + i]) pos += md[o + i] * 0.5 * (1 - cos(((u + mh[o + i]) / mh[o + i]) * HALF_PI));\n      }\n      return (pos + 0.5) * sp;\n    };\n    for (let y = 0; y \u003c H; y++) {\n      const t = P.scroll + y, xa = xAt(t), xm = xAt(t + 0.5), xb = xAt(t + 1);\n      const lo = min(xa, xm, xb), hi = max(xa, xm, xb);\n      const c0 = max(0, floor(lo - 1)), c1 = min(W - 1, ceil(hi + 1));\n      for (let c = c0; c \u003c= c1; c++) {\n        const cx = c + 0.5, dist = cx \u003c lo ? lo - cx : cx > hi ? cx - hi : 0;\n        const a = cl((1 - dist) * 1.6, 0, 1);\n        if (a \u003c= 0) continue;\n        const q = (y * W + c) * 3;\n        buf[q] += cr * a;\n        buf[q + 1] += cg * a;\n        buf[q + 2] += cb * a;\n      }\n    }\n  }\n  // The swaps: a pale dot where the two threads meet, half white and half\n  // the mix of the pair. Their density across the panel is the semicircle.\n  for (let j = 0; j \u003c nd; j++) {\n    const yc = P.dt_[j] - P.scroll, xc = (P.dp[j] + 1) * sp;\n    if (yc \u003c -2 || yc > H + 2) continue;\n    const a = P.da[j], b = P.db[j];\n    const dim = hlA > 0 && a !== P.hl && b !== P.hl ? 1 - 0.6 * hlA : 1;\n    const r = (0.55 + 0.25 * (cols[a * 3] + cols[b * 3])) * dim;\n    const g = (0.55 + 0.25 * (cols[a * 3 + 1] + cols[b * 3 + 1])) * dim;\n    const bl = (0.55 + 0.25 * (cols[a * 3 + 2] + cols[b * 3 + 2])) * dim;\n    for (let y = floor(yc - 1.5); y \u003c= ceil(yc + 1.5); y++) {\n      if (y \u003c 0 || y >= H) continue;\n      for (let x = floor(xc - 1.5); x \u003c= ceil(xc + 1.5); x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const dx = x + 0.5 - xc, dy = y + 0.5 - yc, f = cl(1.15 - (dx * dx + dy * dy) * 0.55, 0, 1);\n        if (f \u003c= 0) continue;\n        const q = (y * W + x) * 3;\n        buf[q] = max(buf[q], r * f);\n        buf[q + 1] = max(buf[q + 1], g * f);\n        buf[q + 2] = max(buf[q + 2], bl * f);\n      }\n    }\n  }\n  for (let p = 0, q = 0; p \u003c W * H; p++, q += 3) {\n    const x = p % W, y = (p / W) | 0;\n    display.setPixel(x, y, min(255, buf[q] * 255), min(255, buf[q + 1] * 255), min(255, buf[q + 2] * 255));\n  }\n}\n\n// Where thread w sits at time t, by playing its network from the start.\nfunction placeAt(P, w, t) {\n  const n = P.n, N = (n * (n - 1)) / 2, m = floor(t / NET), net = getNet(P, m);\n  let pos = m & 1 ? n - 1 - w : w;\n  const st = new Int32Array(n);\n  for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n  for (let s = 0; s \u003c N; s++) {\n    if (m * NET + ((s + 0.5) * NET) / N > t) break;\n    const p = net.sw[s], a = st[p];\n    st[p] = st[p + 1];\n    st[p + 1] = a;\n    if (st[p] === w) pos = p;\n    else if (st[p + 1] === w) pos = p + 1;\n  }\n  return pos;\n}\n","layer":{"id":"layer-sorting-network","type":"code","name":"sorting-network","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sorting Network\n// Family:  line\n// Idea:    Sixteen coloured threads run down the panel and trade places one adjacent pair at a time along a uniformly random sorting network, the shortest way to reverse their order, so every thread swings across the panel on a sine curve while the swaps, marked as bright dots, crowd towards the middle in a semicircle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: uniform random sorting networks (Omer Angel, Alexander Holroyd, Dan Romik, Bálint Virág, 2007), pattern round 33\n// Round:   33\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1\n//\n// Knob 1: Hue. Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right.\n// Knob 2: Speed. Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds.\n// Knob 3: Wires. How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row.\n// Knob 4: Bubble. Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns.\n// Buttons: K1 tap lights one thread for eight seconds and dims the rest, so its sine curve stands out from end to end; each tap picks another.\n\nconst W = 64, H = 128, NET = 128;\nconst HMAX = 12, HALF_PI = Math.PI / 2;\nconst { min, max, floor, ceil, sin, cos } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[o] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[o + 1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[o + 2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// A uniformly random standard Young tableau of the staircase (n-1, ..., 1),\n// by the hook walk of Greene, Nijenhuis and Wilf (1979): start on a uniform\n// cell, jump to a uniform other cell of its hook until the walk stands on a\n// corner, write the largest number not yet used there, take the corner off.\n// T[r * (n-1) + c], 0-indexed, rows of n-1-r cells.\nfunction hookWalk(n) {\n  const R = n - 1, len = new Int32Array(R), T = new Int32Array(R * R);\n  for (let r = 0; r \u003c R; r++) len[r] = R - r;\n  let cells = (n * (n - 1)) / 2;\n  for (let val = cells; val >= 1; val--, cells--) {\n    let k = floor(Math.random() * cells), r = 0;\n    while (k >= len[r]) (k -= len[r]), r++;\n    let c = k;\n    for (;;) {\n      const arm = len[r] - 1 - c;\n      let leg = 0;\n      while (r + leg + 1 \u003c R && len[r + leg + 1] > c) leg++;\n      if (arm + leg === 0) break;\n      const h = floor(Math.random() * (arm + leg));\n      if (h \u003c arm) c += 1 + h;\n      else r += 1 + h - arm;\n    }\n    T[r * R + c] = val;\n    len[r]--;\n  }\n  return T;\n}\n\n// The tableau read row by row, 1 to N: under Edelman-Greene it is the\n// bubble-sort network run backwards in time, 1 | 2 1 | 3 2 1 | ..., where\n// the thread in place k walks left past all k threads before it in one\n// straight diagonal. Read column by column it is the mirror image.\nfunction readTableau(n, byRow) {\n  const R = n - 1, T = new Int32Array(R * R);\n  let v = 1;\n  for (let a = 0; a \u003c R; a++) for (let b = 0; b \u003c R - a; b++) T[byRow ? a * R + b : b * R + a] = v++;\n  return T;\n}\n\n// Edelman-Greene (1987), as Angel, Holroyd, Romik and Virag lay it out:\n// N times over, the largest entry N sits in a corner (i, j) with i + j = n,\n// 1-indexed; swap places j and j + 1; empty that cell and slide the hole to\n// (1, 1), each time moving in the larger of the neighbours above and to the\n// left; add 1 to every entry and write 1 in (1, 1). Adding 1 to everything\n// is kept as one offset, so a network costs N * n steps, not N * N. Checked\n// in a scratch script over 1400 networks with n from 3 to 32: every swap\n// takes a pair still in order and each network ends reversed; at n = 4 all\n// 16 reduced words of the longest permutation came out equally often.\nfunction edelmanGreene(T0, n, out) {\n  const R = n - 1, N = (n * (n - 1)) / 2, t = Int32Array.from(T0);\n  let off = 0;\n  for (let s = 0; s \u003c N; s++) {\n    let r = 0;\n    while (r \u003c R && t[r * R + R - 1 - r] + off !== N) r++;\n    let c = R - 1 - r;\n    out[s] = c;\n    for (;;) {\n      const up = r > 0 ? t[(r - 1) * R + c] : -1e9, lf = c > 0 ? t[r * R + c - 1] : -1e9;\n      if (r === 0 && c === 0) break;\n      if (up > lf) (t[r * R + c] = up), r--;\n      else (t[r * R + c] = lf), c--;\n    }\n    off++;\n    t[0] = 1 - off;\n  }\n}\n\n// Each cell gets (1 - b) * uniform + b * bubble. Both tableaux grow along\n// rows and down columns, so their blend does too, and ranking the cells by\n// it is a standard tableau again: a sorting network for every b.\nfunction network(P, net) {\n  const n = P.n, R = n - 1, N = (n * (n - 1)) / 2, b = P.bubble;\n  const Tb = (net.m & 1) === 0 ? P.tabRow : P.tabCol;\n  let T = net.tu;\n  if (b > 0) {\n    const key = new Float64Array(R * R), ids = [];\n    for (let r = 0; r \u003c R; r++) for (let c = 0; c \u003c R - r; c++) {\n      const i = r * R + c;\n      key[i] = (1 - b) * net.tu[i] + b * Tb[i];\n      ids.push(i);\n    }\n    ids.sort((x, y) => key[x] - key[y] || x - y);\n    T = new Int32Array(R * R);\n    for (let k = 0; k \u003c N; k++) T[ids[k]] = k + 1;\n  }\n  edelmanGreene(T, n, net.sw);\n  // The cheap form of the check, once a network: every swap must take a\n  // pair still in its starting order, and the end must be the reversal.\n  // A miss falls back on bubble sort, which is always right.\n  const a = Int32Array.from({ length: n }, (_, i) => i);\n  let ok = true;\n  for (let s = 0; s \u003c N && ok; s++) {\n    const p = net.sw[s], x = a[p];\n    if (x > a[p + 1]) ok = false;\n    (a[p] = a[p + 1]), (a[p + 1] = x);\n  }\n  for (let i = 0; i \u003c n && ok; i++) if (a[i] !== n - 1 - i) ok = false;\n  if (!ok) edelmanGreene(Tb, n, net.sw);\n  net.b = b;\n}\n\nfunction rebuild(P) {\n  const n = P.n;\n  P.tabRow = readTableau(n, true);\n  P.tabCol = readTableau(n, false);\n  P.nets = new Map();\n  P.cols = new Float32Array(n * 3);\n  // Four threads are drawn bright, both edges and two between, 0, 5, 10\n  // and 15 of sixteen: the edges swing all the way across on half a cosine,\n  // the two inside on arcs whose height the network picks.\n  P.lead = new Uint8Array(n);\n  for (let k = 0; k \u003c 4; k++) P.lead[Math.round((k * (n - 1)) / 3)] = 1;\n  P.colHue = NaN;\n  const cap = 4 * ((n * (n - 1)) / 2) + 8;\n  P.mt = new Float32Array(cap);\n  P.md = new Int8Array(cap);\n  P.mw = new Int32Array(cap);\n  P.mh = new Float32Array(cap);\n  P.mr = new Float32Array(cap);\n  P.dt_ = new Float32Array(cap);\n  P.dp = new Int32Array(cap);\n  P.da = new Int32Array(cap);\n  P.db = new Int32Array(cap);\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, n: 16, bubble: 0.06, scroll: 0, hl: -1, hlT: 0, hlA: 0,\n    buf: new Float32Array(W * H * 3),\n  };\n  rebuild(params.s);\n}\n\nfunction getNet(P, m) {\n  let net = P.nets.get(m);\n  if (!net) {\n    net = { m, tu: hookWalk(P.n), sw: new Int32Array((P.n * (P.n - 1)) / 2), b: -1 };\n    P.nets.set(m, net);\n  }\n  if (net.b !== P.bubble) network(P, net);\n  return net;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 16, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  const n = cl(Math.round(k[2]), 16, 32);\n  if (n !== P.n) (P.n = n), rebuild(P), (P.hl = -1), (P.hlT = 0);\n  // Bubble moves in steps of 1/200 so a knob resting between two readings\n  // does not rebuild the networks every frame.\n  P.bubble = Math.round(cl(k[3], 0, 1) * 200) / 200;\n  if (input.btnPressed && input.btnPressed[0]) {\n    let w = floor(Math.random() * (P.hl \u003c 0 ? P.n : P.n - 1));\n    if (P.hl >= 0 && w >= P.hl) w++;\n    P.hl = w;\n    P.hlT = 8;\n  }\n  P.hlT = max(0, P.hlT - d);\n  P.hlA += ((P.hlT > 0 ? 1 : 0) - P.hlA) * min(1, d * 5);\n  P.scroll += d * P.speed * 4;\n  const first = floor(P.scroll / NET) - 1;\n  for (const m of P.nets.keys()) if (m \u003c first) P.nets.delete(m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const n = P.n, N = (n * (n - 1)) / 2, buf = P.buf, sp = W / n;\n  if (P.colHue !== P.hue) {\n    // Gold through green, cyan and blue to violet: the thread that starts on\n    // the left is gold at Hue 0, the one on the right violet, never red.\n    for (let v = 0; v \u003c n; v++) hsv(P.hue + 0.14 + (0.64 * v) / (n - 1), 0.82, 1, P.cols, v * 3);\n    P.colHue = P.hue;\n  }\n  buf.fill(0);\n  // Every move in sight, in time order. Row y holds network time scroll + y;\n  // network m fills times 128 m to 128 (m + 1) and starts from the identity\n  // when m is even, from the reversal when m is odd, so threads run on from\n  // one network into the next and nothing has to be carried between them.\n  const T0 = P.scroll - HMAX - 1, T1 = P.scroll + H + HMAX + 1;\n  const cnt = new Int32Array(n), mt = P.mt, md = P.md, mw = P.mw, mh = P.mh, mr = P.mr;\n  // Moves are grouped by thread: thread w owns slots w * per .. w * per + per.\n  const per = floor(mt.length / n);\n  let nd = 0;\n  for (let m = floor(T0 / NET); m \u003c= floor(T1 / NET); m++) {\n    const net = getNet(P, m), st = new Int32Array(n);\n    for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n    for (let s = 0; s \u003c N; s++) {\n      const t = m * NET + ((s + 0.5) * NET) / N, p = net.sw[s], a = st[p], b = st[p + 1];\n      st[p] = b;\n      st[p + 1] = a;\n      if (t \u003c T0 || t > T1) continue;\n      if (cnt[a] >= per || cnt[b] >= per) continue;\n      const ia = a * per + cnt[a]++, ib = b * per + cnt[b]++;\n      (mt[ia] = t), (md[ia] = 1), (mw[ia] = p);\n      (mt[ib] = t), (md[ib] = -1), (mw[ib] = p + 1);\n      P.dt_[nd] = t;\n      P.dp[nd] = p;\n      P.da[nd] = a;\n      P.db[nd] = b;\n      nd++;\n    }\n  }\n  // A thread leaves the middle of its place halfway between its swaps,\n  // meets its partner on the boundary at the swap and settles in the middle\n  // of the next place halfway to its swap after, never taking more than\n  // HMAX rows a side. Each thread keeps its own timing, so it is always\n  // under way and still crosses its partner at the dot: both are on the\n  // boundary at the swap time.\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    for (let i = 0; i \u003c cnt[w]; i++) {\n      mh[o + i] = i > 0 ? min(HMAX, (mt[o + i] - mt[o + i - 1]) / 2) : HMAX;\n      mr[o + i] = i + 1 \u003c cnt[w] ? min(HMAX, (mt[o + i + 1] - mt[o + i]) / 2) : HMAX;\n    }\n  }\n  const hlA = P.hlA, cols = P.cols;\n  for (let w = 0; w \u003c n; w++) {\n    const o = w * per;\n    // Place of thread w at the top of the window: where its first move in\n    // sight starts from, or, with no move in sight, where it sits.\n    let i = 0;\n    let base = cnt[w] > 0 ? mw[o] - md[o] : placeAt(P, w, T0);\n    const lead = P.lead[w], lit = w === P.hl ? 1 : 1 - 0.75 * hlA;\n    const gain = ((lead ? 0.85 : 0.4) + (w === P.hl ? (1 - (lead ? 0.85 : 0.4)) * hlA : 0)) * lit;\n    const cr = cols[w * 3] * gain, cg = cols[w * 3 + 1] * gain, cb = cols[w * 3 + 2] * gain;\n    // A quarter cosine into the boundary and a quarter sine out of it.\n    const xAt = (t) => {\n      while (i \u003c cnt[w] && t >= mt[o + i] + mr[o + i]) (base += md[o + i]), i++;\n      let pos = base;\n      if (i \u003c cnt[w]) {\n        const u = t - mt[o + i];\n        if (u >= 0) pos += md[o + i] * (0.5 + 0.5 * sin((u / mr[o + i]) * HALF_PI));\n        else if (u > -mh[o + i]) pos += md[o + i] * 0.5 * (1 - cos(((u + mh[o + i]) / mh[o + i]) * HALF_PI));\n      }\n      return (pos + 0.5) * sp;\n    };\n    for (let y = 0; y \u003c H; y++) {\n      const t = P.scroll + y, xa = xAt(t), xm = xAt(t + 0.5), xb = xAt(t + 1);\n      const lo = min(xa, xm, xb), hi = max(xa, xm, xb);\n      const c0 = max(0, floor(lo - 1)), c1 = min(W - 1, ceil(hi + 1));\n      for (let c = c0; c \u003c= c1; c++) {\n        const cx = c + 0.5, dist = cx \u003c lo ? lo - cx : cx > hi ? cx - hi : 0;\n        const a = cl((1 - dist) * 1.6, 0, 1);\n        if (a \u003c= 0) continue;\n        const q = (y * W + c) * 3;\n        buf[q] += cr * a;\n        buf[q + 1] += cg * a;\n        buf[q + 2] += cb * a;\n      }\n    }\n  }\n  // The swaps: a pale dot where the two threads meet, half white and half\n  // the mix of the pair. Their density across the panel is the semicircle.\n  for (let j = 0; j \u003c nd; j++) {\n    const yc = P.dt_[j] - P.scroll, xc = (P.dp[j] + 1) * sp;\n    if (yc \u003c -2 || yc > H + 2) continue;\n    const a = P.da[j], b = P.db[j];\n    const dim = hlA > 0 && a !== P.hl && b !== P.hl ? 1 - 0.6 * hlA : 1;\n    const r = (0.55 + 0.25 * (cols[a * 3] + cols[b * 3])) * dim;\n    const g = (0.55 + 0.25 * (cols[a * 3 + 1] + cols[b * 3 + 1])) * dim;\n    const bl = (0.55 + 0.25 * (cols[a * 3 + 2] + cols[b * 3 + 2])) * dim;\n    for (let y = floor(yc - 1.5); y \u003c= ceil(yc + 1.5); y++) {\n      if (y \u003c 0 || y >= H) continue;\n      for (let x = floor(xc - 1.5); x \u003c= ceil(xc + 1.5); x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const dx = x + 0.5 - xc, dy = y + 0.5 - yc, f = cl(1.15 - (dx * dx + dy * dy) * 0.55, 0, 1);\n        if (f \u003c= 0) continue;\n        const q = (y * W + x) * 3;\n        buf[q] = max(buf[q], r * f);\n        buf[q + 1] = max(buf[q + 1], g * f);\n        buf[q + 2] = max(buf[q + 2], bl * f);\n      }\n    }\n  }\n  for (let p = 0, q = 0; p \u003c W * H; p++, q += 3) {\n    const x = p % W, y = (p / W) | 0;\n    display.setPixel(x, y, min(255, buf[q] * 255), min(255, buf[q + 1] * 255), min(255, buf[q + 2] * 255));\n  }\n}\n\n// Where thread w sits at time t, by playing its network from the start.\nfunction placeAt(P, w, t) {\n  const n = P.n, N = (n * (n - 1)) / 2, m = floor(t / NET), net = getNet(P, m);\n  let pos = m & 1 ? n - 1 - w : w;\n  const st = new Int32Array(n);\n  for (let p = 0; p \u003c n; p++) st[p] = m & 1 ? n - 1 - p : p;\n  for (let s = 0; s \u003c N; s++) {\n    if (m * NET + ((s + 0.5) * NET) / N > t) break;\n    const p = net.sw[s], a = st[p];\n    st[p] = st[p + 1];\n    st[p + 1] = a;\n    if (st[p] === w) pos = p;\n    else if (st[p + 1] === w) pos = p + 1;\n  }\n  return pos;\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wires=16..32, Bubble=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the threads' colours round the wheel together; at 0 they run gold, green, cyan, blue to violet from the thread that starts on the left to the one that starts on the right."},{"name":"Speed","min":0.2,"max":3,"about":"Rows per second the picture scrolls up, four times the knob: at 2 eight rows a second and one whole network, 128 rows, every 16 seconds; at 0.2 a network takes 160 seconds."},{"name":"Wires","min":16,"max":32,"about":"How many threads, 16 at the start up to 32. One network always fills 128 rows, so 16 threads make 120 swaps in it, about one a row, and 32 make 496, about four a row."},{"name":"Bubble","min":0,"max":1,"about":"Blends each network from uniform at 0 to the bubble-sort network at 1, where one thread at a time runs straight across all the threads before it on a row of dots and the rest step aside in parallel curves. At 0.5 bundles of parallel threads show through, and by 0.75 the sine curves are gone. The networks on the panel change as it turns."}],"start":[0,2,16,0.06],"measures":{"motion":1.187,"detail":0.1748,"edges":0.7005,"complexity":1.5147,"coverage":0.5118,"colour":0.2962,"drift":0.1325},"knobResponse":[0.1544,0.2402,0.3244,0.2291]},{"slug":"sparks","title":"Sparks","family":"particle","round":1,"note":"불꽃마다 흰빛에서 식어 가는 색이 제 나이를 보여 줘요. 꽃불 세 가지가 느슨한 박자로 터져요.","idea":"Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.","buttons":"K1 tap fires a shell straight away.","code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-sparks","type":"code","name":"sparks","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":1,"about":"At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour."},{"name":"Rate","min":0.6,"max":5,"about":"How often a rocket goes up; the beat stays loose, with doubles and the odd rest."},{"name":"Gravity","min":-1,"max":1,"about":"At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers."},{"name":"Trail","min":0.3,"max":1.8,"about":"Seconds a spark's streak takes to fade."}],"start":[0,2,0,0.3],"measures":{"motion":0.3313,"detail":0.0372,"edges":0.402,"complexity":0.7208,"coverage":0.1596,"colour":0.1435,"drift":0.1348},"knobResponse":[0.034,0.0885,0.063,0.0577]},{"slug":"spectrogram","title":"Spectrogram","family":"data","round":17,"note":"새벽 합창의 스펙트로그램이 폭포처럼 내려와요. 휘파람과 떨림, 짹 소리와 뻐꾸기의 두 음이 바람과 먼 찻길로 얼룩진 바닥 위에 밝게 그려지고, K3 을 누르면 손뼉 소리에 새들이 잠시 입을 다물어요.","idea":"A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.","buttons":"K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.","code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-spectrogram","type":"code","name":"spectrogram","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Map","min":0,"max":1,"about":"The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph."},{"name":"Scroll","min":0.5,"max":4,"about":"How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall."},{"name":"Birds","min":0,"max":1,"about":"How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all."},{"name":"Gain","min":-1,"max":1,"about":"Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel."}],"start":[0,2,0,0.06],"measures":{"motion":2.9689,"detail":0.133,"edges":0.3961,"complexity":2.4228,"coverage":0.9799,"colour":0.4061,"drift":0.0801},"knobResponse":[0.3109,0.1622,0.1596,0.4388]},{"slug":"sperner-lemma","title":"Sperner's Lemma","family":"topology","round":38,"note":"세운 삼각형을 작은 방으로 나누고, 꼭짓점마다 연속 사상이 가장 많이 줄이는 좌표의 번호를 붙여 파랑, 빨강, 초록 영토로 칠해요. 흰 걸음이 밑변의 1-2 문으로 들어와 방마다 다른 문으로 나가다가 세 번호를 다 가진 무지개 방에서 멈추고, 그 방은 사상의 고정점 위에 있어요. K3 은 사상을 고정점 둘레로 비틀어 영토 경계를 감고, K4 는 고정점을 늘려 무지개 방을 홀수 개로 늘려요.","idea":"A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Sperner's Lemma\n// Family:  topology\n// Idea:    A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Sperner's lemma (Emanuel Sperner, 1928) and the Brouwer fixed-point theorem it proves (L. E. J. Brouwer, 1911), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1\n//\n// Knob 1: Mesh. Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves.\n// Knob 2: Speed. At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Swirl. Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in.\n// Knob 4: Ripple. Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two.\n\nconst W = 64, H = 128, NMAX = 28, ST = NMAX + 1;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, hypot, PI } = Math;\nconst TAU = 2 * PI, R3 = sqrt(3);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The big triangle on the panel, pixel centres at x + 0.5: corner 1 bottom\n// left, corner 2 bottom right, corner 3 the apex. The base is the 1-2 side.\nconst P1x = 0.5, P1y = 127.2, P2x = 63.5, P2y = 127.2, P3x = 32, P3y = 0.8;\nconst E2x = P2x - P1x, E2y = P2y - P1y, E3x = P3x - P1x, E3y = P3y - P1y, DET = E2x * E3y - E3x * E2y;\n// Length of the gradient of each barycentric coordinate, in units per LED:\n// the distance from a pixel to a mesh line is its offset over this.\nconst G2 = hypot(E3y, E3x) / abs(DET), G3 = hypot(E2y, E2x) / abs(DET);\nconst G1 = hypot(E3y - E2y, E2x - E3x) / abs(DET);\n\n// The map f is defined on an equilateral triangle, corners E1 = (-1, 0),\n// E2 = (1, 0), E3 = (0, sqrt 3): f(q) = q + d(q), pulled back into the\n// triangle by the nearest point, so f is continuous and maps the triangle\n// into itself. d turns round the fixed point c by an angle that grows by\n// SWIRL radians per unit of distance at Swirl 1, and is STEP long from R0\n// out, shrinking to nothing at c.\nconst STEP = 0.12, R0 = 0.35, SWIRL = 3.4;\n// Radius of the glow round the head of the walk, in LEDs.\nconst GLOW = 7;\n// The ripple: two waves added to d, up to RIP times STEP.\nconst RIP = 3.5;\n\n// Label colours: 1 azure, 2 rose, 3 green. Each at its own brightness\n// (brightest channel 0.85, 0.62 and 0.4 of full), so a room that changes\n// label changes in brightness too and not only in hue; green at 0.4 still\n// looks about as bright to the eye as azure at 0.85.\nconst COL = [\n  [0.12 * 0.85, 0.42 * 0.85, 0.85],\n  [0.62, 0.18 * 0.62, 0.3 * 0.62],\n  [0.2 * 0.4 / 0.95, 0.4, 0.28 * 0.4 / 0.95],\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 0, speed: 2, swirl: 0, ripple: 0, t: 0, head: 0, begun: false,\n    lab: new Int8Array(ST * ST), cx: 0, cy: 0, turn: 0,\n    walks: [], main: null, rainbow: [], seen: new Uint8Array(2 * NMAX * NMAX),\n    line: new Float32Array(W * H), room: new Int32Array(W * H), R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    y: [0, 0, 0], hc: [0, 0, 0],\n  };\n}\n\n// Vertex (b, c) of an n-mesh has barycentric coordinates (n - b - c, b, c) / n.\nconst vid = (b, c) => c * ST + b;\n\n// Rooms: up room (i, j) has corners (i, j), (i + 1, j), (i, j + 1); down room\n// (i, j) has corners (i + 1, j), (i, j + 1), (i + 1, j + 1).\nconst rid = (i, j, down) => 2 * (j * NMAX + i) + down;\nfunction corners(r) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  return down ? [vid(i + 1, j), vid(i, j + 1), vid(i + 1, j + 1)] : [vid(i, j), vid(i + 1, j), vid(i, j + 1)];\n}\n// The three walls of a room, each as its two corners and the room behind it\n// (-1 for the base, -2 for the other two sides).\nfunction walls(r, n) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  if (down)\n    return [\n      [vid(i + 1, j), vid(i, j + 1), rid(i, j, 0)],\n      [vid(i, j + 1), vid(i + 1, j + 1), rid(i, j + 1, 0)],\n      [vid(i + 1, j), vid(i + 1, j + 1), rid(i + 1, j, 0)],\n    ];\n  return [\n    [vid(i, j), vid(i + 1, j), j > 0 ? rid(i, j - 1, 1) : -1],\n    [vid(i, j), vid(i, j + 1), i > 0 ? rid(i - 1, j, 1) : -2],\n    [vid(i + 1, j), vid(i, j + 1), i + j \u003c n - 1 ? rid(i, j, 1) : -2],\n  ];\n}\n\n// The map at barycentric x, written into y as barycentric coordinates.\n// Near the sides the turn and the ripple fade out (over the band where the\n// smallest coordinate is under EDGE), so there d points at c and q + d stays\n// inside: f has no fixed point on the sides, only where d is zero inside.\nconst EDGE = 0.16;\nfunction f(S, x1, x2, x3, y) {\n  const mb = min(x1, x2, x3), qx = x2 - x1, qy = R3 * x3, inner = sm(0, EDGE, mb);\n  const dx = S.cx - qx, dy = S.cy - qy, r = hypot(dx, dy);\n  let gx = 0, gy = 0;\n  if (r > 1e-12) {\n    const psi = (S.turn + S.swirl * SWIRL * r) * inner, m = (STEP * min(r, R0)) / R0 / r, cs = cos(psi), sn = sin(psi);\n    gx = (dx * cs - dy * sn) * m;\n    gy = (dx * sn + dy * cs) * m;\n  }\n  if (S.ripple > 0) {\n    const a = S.ripple ** 0.6 * RIP * STEP * sm(0, EDGE / 2, mb), ph = S.t * 0.21;\n    gx += a * sin(5.3 * qx + 3.1 * qy + ph);\n    gy += a * sin(-4.4 * qx + 4.9 * qy + 1.9 - 0.8 * ph);\n  }\n  let px = qx + gx, py = qy + gy;\n  // Back into the triangle by the nearest point.\n  let z3 = py / R3, z2 = (1 - z3 + px) / 2, z1 = (1 - z3 - px) / 2;\n  if (z1 \u003c 0 || z2 \u003c 0 || z3 \u003c 0) {\n    let best = Infinity, bx = 0, by = 0;\n    const E = [-1, 0, 1, 0, 0, R3];\n    for (let e = 0; e \u003c 3; e++) {\n      const ax = E[2 * e], ay = E[2 * e + 1], ex = E[(2 * e + 2) % 6] - ax, ey = E[(2 * e + 3) % 6] - ay;\n      const t = cl(((px - ax) * ex + (py - ay) * ey) / (ex * ex + ey * ey), 0, 1), sx = ax + t * ex, sy = ay + t * ey;\n      const d2 = (px - sx) ** 2 + (py - sy) ** 2;\n      if (d2 \u003c best) {\n        best = d2;\n        bx = sx;\n        by = sy;\n      }\n    }\n    px = bx;\n    py = by;\n    z3 = max(0, py / R3);\n    z2 = max(0, (1 - z3 + px) / 2);\n    z1 = max(0, 1 - z2 - z3);\n  }\n  y[0] = z1;\n  y[1] = z2;\n  y[2] = z3;\n}\n\n// Label every vertex: of the coordinates that are not zero, the one f takes\n// down the most. Such a one always exists because both sum to 1, and a\n// coordinate that is zero is never chosen, so each corner gets its own label\n// and each side only its two corners' labels: a Sperner labelling.\nfunction label(S) {\n  const n = S.n, y = S.y;\n  for (let c = 0; c \u003c= n; c++)\n    for (let b = 0; b + c \u003c= n; b++) {\n      const a = n - b - c, x = [a / n, b / n, c / n];\n      f(S, x[0], x[1], x[2], y);\n      let best = -Infinity, L = 0;\n      for (let i = 0; i \u003c 3; i++)\n        if (x[i] > 0 && x[i] - y[i] > best + 1e-12) {\n          best = x[i] - y[i];\n          L = i;\n        }\n      S.lab[vid(b, c)] = L;\n    }\n}\n\nconst isDoor = (S, va, vb) => S.lab[va] + S.lab[vb] === 1;\nfunction rainbow(S, r) {\n  const [a, b, c] = corners(r), L = S.lab;\n  return L[a] !== L[b] && L[b] !== L[c] && L[a] !== L[c];\n}\n\n// Walk from room r, having come in through the wall behind which lies\n// `from`: leave by the other door each time. Ends in a rainbow room (end =\n// room) or out through a door in the base (end = -1).\nfunction walk(S, r, from, pts) {\n  const n = S.n;\n  for (let guard = 0; guard \u003c 2 * n * n + 2; guard++) {\n    S.seen[r] = 1;\n    const cs = corners(r);\n    pts.push(centroid(n, cs));\n    if (rainbow(S, r)) return r;\n    const ws = walls(r, n);\n    let out = null;\n    for (const w of ws) if (isDoor(S, w[0], w[1]) && w[2] !== from) out = w;\n    if (!out) return r;\n    pts.push(mid(n, out[0], out[1]));\n    if (out[2] \u003c 0) return -1;\n    from = r;\n    r = out[2];\n  }\n  return -1;\n}\n\n// Panel position of vertex v of an n-mesh.\nfunction vpos(n, v) {\n  const b = v % ST, c = (v - b) / ST;\n  return [P1x + (E2x * b + E3x * c) / n, P1y + (E2y * b + E3y * c) / n];\n}\nfunction centroid(n, cs) {\n  const a = vpos(n, cs[0]), b = vpos(n, cs[1]), c = vpos(n, cs[2]);\n  return [(a[0] + b[0] + c[0]) / 3, (a[1] + b[1] + c[1]) / 3];\n}\nfunction mid(n, va, vb) {\n  const a = vpos(n, va), b = vpos(n, vb);\n  return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n}\n\n// All the door walks: from each door in the base, then from each rainbow\n// room no walk has reached yet. The main walk is the leftmost one from the\n// base that ends in a rainbow room; there is always one, because the base\n// holds an odd number of doors and walks from the base pair them up two by\n// two except where they end in a rainbow room.\nfunction walkAll(S) {\n  const n = S.n;\n  S.seen.fill(0);\n  S.walks = [];\n  S.main = null;\n  S.rainbow = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = rid(i, 0, 0);\n    if (S.seen[r] || !isDoor(S, vid(i, 0), vid(i + 1, 0))) continue;\n    const pts = [mid(n, vid(i, 0), vid(i + 1, 0))], end = walk(S, r, -1, pts);\n    const w = { pts, end, base: true };\n    S.walks.push(w);\n    if (end >= 0 && !S.main) S.main = w;\n  }\n  for (let j = 0; j \u003c n; j++)\n    for (let i = 0; i + j \u003c n; i++)\n      for (let down = 0; down \u003c 2; down++) {\n        if (down && i + j > n - 2) continue;\n        const r = rid(i, j, down);\n        if (!rainbow(S, r)) continue;\n        S.rainbow.push(r);\n        if (S.seen[r]) continue;\n        // Its one door, and on from the room behind it.\n        S.seen[r] = 1;\n        const pts = [centroid(n, corners(r))];\n        let end = r;\n        for (const w of walls(r, n))\n          if (isDoor(S, w[0], w[1])) {\n            pts.push(mid(n, w[0], w[1]));\n            end = w[2] >= 0 ? walk(S, w[2], r, pts) : -1;\n          }\n        S.walks.push({ pts, end, base: false });\n      }\n}\n\nfunction lengthOf(pts) {\n  let L = 0;\n  for (let k = 1; k \u003c pts.length; k++) L += hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n  return L;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [12, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.n = round(cl(k[0], 12, NMAX));\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[2], 0, 1);\n  // Up to 0.06 no ripple, so the opening has one fixed point.\n  S.ripple = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  if (!S.begun) {\n    // Open some way into the run, further in the faster it goes, so Speed\n    // shows from the first second.\n    S.t = 4 * S.speed;\n    S.begun = true;\n  }\n  S.t += (d * S.speed) / 2;\n  S.head += d * S.speed * 18;\n  // The fixed point of the map without ripple wanders inside the triangle,\n  // its barycentric coordinates never under 0.12, round its loop in 14\n  // seconds at Speed 2.\n  const t = S.t, rr = 0.13 + 0.08 * sin(0.6 * t + 0.6), ph = 0.45 * t + 1.1;\n  const c1 = 1 / 3 + rr * cos(ph), c2 = 1 / 3 + rr * cos(ph - TAU / 3), c3 = 1 - c1 - c2;\n  S.cx = c2 - c1;\n  S.cy = R3 * c3;\n  // The push leans up to 60 degrees either side of straight at c, back and\n  // forth every 12.6 seconds at Speed 2.\n  S.turn = 1.05 * sin(0.5 * t);\n  label(S);\n  walkAll(S);\n}\n\n// Light the line buffer along a polyline, with brightness fn(s) at arc\n// length s.\nfunction stroke(S, pts, fn) {\n  const L = S.line;\n  let s = 0;\n  for (let k = 1; k \u003c pts.length; k++) {\n    const ax = pts[k - 1][0], ay = pts[k - 1][1], bx = pts[k][0], by = pts[k][1];\n    const ex = bx - ax, ey = by - ay, len = hypot(ex, ey);\n    if (len \u003c 1e-6) continue;\n    const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n    const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, u = cl((px * ex + py * ey) / (len * len), 0, 1);\n        const dd = hypot(px - u * ex, py - u * ey), a = cl(1.25 - dd, 0, 1);\n        if (a \u003c= 0) continue;\n        const v = a * fn(s + u * len), p = y * W + x;\n        if (v > L[p]) L[p] = v;\n      }\n    s += len;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  const { n, lab, R, G, B, line, hc, room } = S;\n  line.fill(0);\n  const isMainEnd = (r) => S.main && S.main.end === r;\n  const rb = new Set(S.rainbow);\n  // The territories, the mesh and the rainbow rooms.\n  const lw = 0.5 + 0.3 * (NMAX - n) / 16;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, X = x + 0.5 - P1x, Y = y + 0.5 - P1y;\n      const l2 = (X * E3y - Y * E3x) / DET, l3 = (E2x * Y - E2y * X) / DET, l1 = 1 - l2 - l3;\n      if (l1 \u003c -0.004 || l2 \u003c -0.004 || l3 \u003c -0.004) {\n        R[p] = G[p] = B[p] = 0;\n        room[p] = -1;\n        continue;\n      }\n      const u = cl(l2 * n, 0, n - 1e-6), v = cl(l3 * n, 0, n - 1e-6);\n      let i = floor(u), j = floor(v);\n      if (i + j > n - 1) j = n - 1 - i;\n      const fu = u - i, fv = v - j, down = fu + fv > 1 ? 1 : 0;\n      const r = rid(i, j, down), cs = corners(r);\n      const w = down ? [fu + fv - 1, 1 - fu, 1 - fv] : [1 - fu - fv, fu, fv];\n      // Each corner's share of the room: the part nearer it than the others,\n      // so every vertex sits in a cell of its own label's colour.\n      let m = 0;\n      if (w[1] > w[m]) m = 1;\n      if (w[2] > w[m]) m = 2;\n      const c = COL[lab[cs[m]]];\n      // Mesh lines: dark walls, about one LED wide.\n      const a1 = u - i, b1 = v - j, w1 = u + v - floor(u + v);\n      const dm = min(min(a1, 1 - a1) / (n * G2), min(b1, 1 - b1) / (n * G3), min(w1, 1 - w1) / (n * G1));\n      const wl = 1 - sm(0.2, 0.75, dm);\n      room[p] = r;\n      if (rb.has(r)) {\n        // A rainbow room: a spinning wheel of every hue inside white walls.\n        const ctr = centroid(n, cs), a = atan2(y + 0.5 - ctr[1], x + 0.5 - ctr[0]) / TAU;\n        hsv(a + S.t * 0.6, 0.85, 1, hc);\n        const k = isMainEnd(r) ? 0.9 : 0.6;\n        R[p] = 255 * (hc[0] + (k - hc[0]) * wl);\n        G[p] = 255 * (hc[1] + (k - hc[1]) * wl);\n        B[p] = 255 * (hc[2] + (k - hc[2]) * wl);\n        continue;\n      }\n      const wall = 1 - lw * wl;\n      R[p] = c[0] * wall * 255;\n      G[p] = c[1] * wall * 255;\n      B[p] = c[2] * wall * 255;\n    }\n  // The other walks dim; the main one brighter, with a head running from\n  // the base door into the rainbow room and a pause there before it runs again.\n  // Each walk is drawn from door to door and stops at the wall of a rainbow\n  // room, so the room's own colours stay clear.\n  const trim = (w) => w.pts.slice(w.base ? 0 : 1, w.end >= 0 ? w.pts.length - 1 : w.pts.length);\n  for (const w of S.walks) if (w !== S.main) stroke(S, trim(w), () => 0.42);\n  if (S.main) {\n    const pts = trim(S.main), L = lengthOf(pts), cyc = L + 30, hs = S.head % cyc;\n    stroke(S, pts, (s) => {\n      const back = hs - s;\n      return back \u003c 0 ? 0.62 : 0.62 + 0.38 * Math.exp(-back / 9);\n    });\n    // A soft glow rides with the head, GLOW LEDs round, so the run up the\n    // walk shows from across the room and not only on the thin line.\n    if (hs \u003c L) {\n      let s = 0, hx = pts[0][0], hy = pts[0][1];\n      for (let k = 1; k \u003c pts.length; k++) {\n        const ex = pts[k][0] - pts[k - 1][0], ey = pts[k][1] - pts[k - 1][1], len = hypot(ex, ey);\n        if (s + len >= hs) {\n          const u = len > 0 ? (hs - s) / len : 0;\n          hx = pts[k - 1][0] + u * ex;\n          hy = pts[k - 1][1] + u * ey;\n          break;\n        }\n        s += len;\n      }\n      for (let y = max(0, floor(hy - GLOW)); y \u003c= min(H - 1, floor(hy + GLOW)); y++)\n        for (let x = max(0, floor(hx - GLOW)); x \u003c= min(W - 1, floor(hx + GLOW)); x++) {\n          const dd = hypot(x + 0.5 - hx, y + 0.5 - hy) / GLOW, p = y * W + x;\n          if (dd >= 1 || room[p] \u003c 0 || rb.has(room[p])) continue;\n          const g = 0.7 * (1 - dd) * (1 - dd);\n          R[p] += (255 - R[p]) * g;\n          G[p] += (255 - G[p]) * g;\n          B[p] += (255 - B[p]) * g;\n        }\n    }\n    // A halo round the room the walk ends in, flaring as the head arrives.\n    const ctr = centroid(n, corners(S.main.end)), fl = hs > L ? Math.exp(-(hs - L) / 12) : 0;\n    const rad = 5 + 3 * fl + 60 / n, amp = 0.3 + 0.5 * fl;\n    for (let y = max(0, floor(ctr[1] - rad)); y \u003c= min(H - 1, floor(ctr[1] + rad)); y++)\n      for (let x = max(0, floor(ctr[0] - rad)); x \u003c= min(W - 1, floor(ctr[0] + rad)); x++) {\n        const dd = hypot(x + 0.5 - ctr[0], (y + 0.5 - ctr[1]) * 0.6) / rad;\n        if (dd >= 1) continue;\n        const g = amp * (1 - dd) * (1 - dd), p = y * W + x;\n        if (room[p] \u003c 0 || rb.has(room[p])) continue;\n        R[p] += (255 - R[p]) * g;\n        G[p] += (255 - G[p]) * g;\n        B[p] += (255 - B[p]) * g;\n      }\n  }\n  for (let p = 0; p \u003c W * H; p++) {\n    const a = line[p];\n    const r = R[p] * (1 - a) + 255 * a, g = G[p] * (1 - a) + 255 * a, b = B[p] * (1 - a) + 255 * a;\n    display.setPixel(p % W, (p / W) | 0, round(min(255, r)), round(min(255, g)), round(min(255, b)));\n  }\n}\n","layer":{"id":"layer-sperner-lemma","type":"code","name":"sperner-lemma","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sperner's Lemma\n// Family:  topology\n// Idea:    A tall triangle cut into small triangular rooms whose corners are labelled 1, 2 or 3 (blue, red, green) by which coordinate a slowly moving map of the triangle takes down the most, so each corner keeps its own label and each side only its two; a white walk enters through a door in the base (an edge labelled 1-2), leaves every room by its other door and always ends in a rainbow room that carries all three labels and sits on the map's fixed point.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Sperner's lemma (Emanuel Sperner, 1928) and the Brouwer fixed-point theorem it proves (L. E. J. Brouwer, 1911), pattern round 38\n// Round:   38\n// ===============================\n// @matrix 64x128\n// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1\n//\n// Knob 1: Mesh. Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves.\n// Knob 2: Speed. At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Swirl. Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in.\n// Knob 4: Ripple. Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two.\n\nconst W = 64, H = 128, NMAX = 28, ST = NMAX + 1;\nconst { floor, min, max, abs, sqrt, sin, cos, atan2, round, hypot, PI } = Math;\nconst TAU = 2 * PI, R3 = sqrt(3);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\n// The big triangle on the panel, pixel centres at x + 0.5: corner 1 bottom\n// left, corner 2 bottom right, corner 3 the apex. The base is the 1-2 side.\nconst P1x = 0.5, P1y = 127.2, P2x = 63.5, P2y = 127.2, P3x = 32, P3y = 0.8;\nconst E2x = P2x - P1x, E2y = P2y - P1y, E3x = P3x - P1x, E3y = P3y - P1y, DET = E2x * E3y - E3x * E2y;\n// Length of the gradient of each barycentric coordinate, in units per LED:\n// the distance from a pixel to a mesh line is its offset over this.\nconst G2 = hypot(E3y, E3x) / abs(DET), G3 = hypot(E2y, E2x) / abs(DET);\nconst G1 = hypot(E3y - E2y, E2x - E3x) / abs(DET);\n\n// The map f is defined on an equilateral triangle, corners E1 = (-1, 0),\n// E2 = (1, 0), E3 = (0, sqrt 3): f(q) = q + d(q), pulled back into the\n// triangle by the nearest point, so f is continuous and maps the triangle\n// into itself. d turns round the fixed point c by an angle that grows by\n// SWIRL radians per unit of distance at Swirl 1, and is STEP long from R0\n// out, shrinking to nothing at c.\nconst STEP = 0.12, R0 = 0.35, SWIRL = 3.4;\n// Radius of the glow round the head of the walk, in LEDs.\nconst GLOW = 7;\n// The ripple: two waves added to d, up to RIP times STEP.\nconst RIP = 3.5;\n\n// Label colours: 1 azure, 2 rose, 3 green. Each at its own brightness\n// (brightest channel 0.85, 0.62 and 0.4 of full), so a room that changes\n// label changes in brightness too and not only in hue; green at 0.4 still\n// looks about as bright to the eye as azure at 0.85.\nconst COL = [\n  [0.12 * 0.85, 0.42 * 0.85, 0.85],\n  [0.62, 0.18 * 0.62, 0.3 * 0.62],\n  [0.2 * 0.4 / 0.95, 0.4, 0.28 * 0.4 / 0.95],\n];\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nexport function setup(params) {\n  params.s = {\n    n: 0, speed: 2, swirl: 0, ripple: 0, t: 0, head: 0, begun: false,\n    lab: new Int8Array(ST * ST), cx: 0, cy: 0, turn: 0,\n    walks: [], main: null, rainbow: [], seen: new Uint8Array(2 * NMAX * NMAX),\n    line: new Float32Array(W * H), room: new Int32Array(W * H), R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H),\n    y: [0, 0, 0], hc: [0, 0, 0],\n  };\n}\n\n// Vertex (b, c) of an n-mesh has barycentric coordinates (n - b - c, b, c) / n.\nconst vid = (b, c) => c * ST + b;\n\n// Rooms: up room (i, j) has corners (i, j), (i + 1, j), (i, j + 1); down room\n// (i, j) has corners (i + 1, j), (i, j + 1), (i + 1, j + 1).\nconst rid = (i, j, down) => 2 * (j * NMAX + i) + down;\nfunction corners(r) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  return down ? [vid(i + 1, j), vid(i, j + 1), vid(i + 1, j + 1)] : [vid(i, j), vid(i + 1, j), vid(i, j + 1)];\n}\n// The three walls of a room, each as its two corners and the room behind it\n// (-1 for the base, -2 for the other two sides).\nfunction walls(r, n) {\n  const down = r & 1, k = r >> 1, i = k % NMAX, j = (k - i) / NMAX;\n  if (down)\n    return [\n      [vid(i + 1, j), vid(i, j + 1), rid(i, j, 0)],\n      [vid(i, j + 1), vid(i + 1, j + 1), rid(i, j + 1, 0)],\n      [vid(i + 1, j), vid(i + 1, j + 1), rid(i + 1, j, 0)],\n    ];\n  return [\n    [vid(i, j), vid(i + 1, j), j > 0 ? rid(i, j - 1, 1) : -1],\n    [vid(i, j), vid(i, j + 1), i > 0 ? rid(i - 1, j, 1) : -2],\n    [vid(i + 1, j), vid(i, j + 1), i + j \u003c n - 1 ? rid(i, j, 1) : -2],\n  ];\n}\n\n// The map at barycentric x, written into y as barycentric coordinates.\n// Near the sides the turn and the ripple fade out (over the band where the\n// smallest coordinate is under EDGE), so there d points at c and q + d stays\n// inside: f has no fixed point on the sides, only where d is zero inside.\nconst EDGE = 0.16;\nfunction f(S, x1, x2, x3, y) {\n  const mb = min(x1, x2, x3), qx = x2 - x1, qy = R3 * x3, inner = sm(0, EDGE, mb);\n  const dx = S.cx - qx, dy = S.cy - qy, r = hypot(dx, dy);\n  let gx = 0, gy = 0;\n  if (r > 1e-12) {\n    const psi = (S.turn + S.swirl * SWIRL * r) * inner, m = (STEP * min(r, R0)) / R0 / r, cs = cos(psi), sn = sin(psi);\n    gx = (dx * cs - dy * sn) * m;\n    gy = (dx * sn + dy * cs) * m;\n  }\n  if (S.ripple > 0) {\n    const a = S.ripple ** 0.6 * RIP * STEP * sm(0, EDGE / 2, mb), ph = S.t * 0.21;\n    gx += a * sin(5.3 * qx + 3.1 * qy + ph);\n    gy += a * sin(-4.4 * qx + 4.9 * qy + 1.9 - 0.8 * ph);\n  }\n  let px = qx + gx, py = qy + gy;\n  // Back into the triangle by the nearest point.\n  let z3 = py / R3, z2 = (1 - z3 + px) / 2, z1 = (1 - z3 - px) / 2;\n  if (z1 \u003c 0 || z2 \u003c 0 || z3 \u003c 0) {\n    let best = Infinity, bx = 0, by = 0;\n    const E = [-1, 0, 1, 0, 0, R3];\n    for (let e = 0; e \u003c 3; e++) {\n      const ax = E[2 * e], ay = E[2 * e + 1], ex = E[(2 * e + 2) % 6] - ax, ey = E[(2 * e + 3) % 6] - ay;\n      const t = cl(((px - ax) * ex + (py - ay) * ey) / (ex * ex + ey * ey), 0, 1), sx = ax + t * ex, sy = ay + t * ey;\n      const d2 = (px - sx) ** 2 + (py - sy) ** 2;\n      if (d2 \u003c best) {\n        best = d2;\n        bx = sx;\n        by = sy;\n      }\n    }\n    px = bx;\n    py = by;\n    z3 = max(0, py / R3);\n    z2 = max(0, (1 - z3 + px) / 2);\n    z1 = max(0, 1 - z2 - z3);\n  }\n  y[0] = z1;\n  y[1] = z2;\n  y[2] = z3;\n}\n\n// Label every vertex: of the coordinates that are not zero, the one f takes\n// down the most. Such a one always exists because both sum to 1, and a\n// coordinate that is zero is never chosen, so each corner gets its own label\n// and each side only its two corners' labels: a Sperner labelling.\nfunction label(S) {\n  const n = S.n, y = S.y;\n  for (let c = 0; c \u003c= n; c++)\n    for (let b = 0; b + c \u003c= n; b++) {\n      const a = n - b - c, x = [a / n, b / n, c / n];\n      f(S, x[0], x[1], x[2], y);\n      let best = -Infinity, L = 0;\n      for (let i = 0; i \u003c 3; i++)\n        if (x[i] > 0 && x[i] - y[i] > best + 1e-12) {\n          best = x[i] - y[i];\n          L = i;\n        }\n      S.lab[vid(b, c)] = L;\n    }\n}\n\nconst isDoor = (S, va, vb) => S.lab[va] + S.lab[vb] === 1;\nfunction rainbow(S, r) {\n  const [a, b, c] = corners(r), L = S.lab;\n  return L[a] !== L[b] && L[b] !== L[c] && L[a] !== L[c];\n}\n\n// Walk from room r, having come in through the wall behind which lies\n// `from`: leave by the other door each time. Ends in a rainbow room (end =\n// room) or out through a door in the base (end = -1).\nfunction walk(S, r, from, pts) {\n  const n = S.n;\n  for (let guard = 0; guard \u003c 2 * n * n + 2; guard++) {\n    S.seen[r] = 1;\n    const cs = corners(r);\n    pts.push(centroid(n, cs));\n    if (rainbow(S, r)) return r;\n    const ws = walls(r, n);\n    let out = null;\n    for (const w of ws) if (isDoor(S, w[0], w[1]) && w[2] !== from) out = w;\n    if (!out) return r;\n    pts.push(mid(n, out[0], out[1]));\n    if (out[2] \u003c 0) return -1;\n    from = r;\n    r = out[2];\n  }\n  return -1;\n}\n\n// Panel position of vertex v of an n-mesh.\nfunction vpos(n, v) {\n  const b = v % ST, c = (v - b) / ST;\n  return [P1x + (E2x * b + E3x * c) / n, P1y + (E2y * b + E3y * c) / n];\n}\nfunction centroid(n, cs) {\n  const a = vpos(n, cs[0]), b = vpos(n, cs[1]), c = vpos(n, cs[2]);\n  return [(a[0] + b[0] + c[0]) / 3, (a[1] + b[1] + c[1]) / 3];\n}\nfunction mid(n, va, vb) {\n  const a = vpos(n, va), b = vpos(n, vb);\n  return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n}\n\n// All the door walks: from each door in the base, then from each rainbow\n// room no walk has reached yet. The main walk is the leftmost one from the\n// base that ends in a rainbow room; there is always one, because the base\n// holds an odd number of doors and walks from the base pair them up two by\n// two except where they end in a rainbow room.\nfunction walkAll(S) {\n  const n = S.n;\n  S.seen.fill(0);\n  S.walks = [];\n  S.main = null;\n  S.rainbow = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = rid(i, 0, 0);\n    if (S.seen[r] || !isDoor(S, vid(i, 0), vid(i + 1, 0))) continue;\n    const pts = [mid(n, vid(i, 0), vid(i + 1, 0))], end = walk(S, r, -1, pts);\n    const w = { pts, end, base: true };\n    S.walks.push(w);\n    if (end >= 0 && !S.main) S.main = w;\n  }\n  for (let j = 0; j \u003c n; j++)\n    for (let i = 0; i + j \u003c n; i++)\n      for (let down = 0; down \u003c 2; down++) {\n        if (down && i + j > n - 2) continue;\n        const r = rid(i, j, down);\n        if (!rainbow(S, r)) continue;\n        S.rainbow.push(r);\n        if (S.seen[r]) continue;\n        // Its one door, and on from the room behind it.\n        S.seen[r] = 1;\n        const pts = [centroid(n, corners(r))];\n        let end = r;\n        for (const w of walls(r, n))\n          if (isDoor(S, w[0], w[1])) {\n            pts.push(mid(n, w[0], w[1]));\n            end = w[2] >= 0 ? walk(S, w[2], r, pts) : -1;\n          }\n        S.walks.push({ pts, end, base: false });\n      }\n}\n\nfunction lengthOf(pts) {\n  let L = 0;\n  for (let k = 1; k \u003c pts.length; k++) L += hypot(pts[k][0] - pts[k - 1][0], pts[k][1] - pts[k - 1][1]);\n  return L;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [12, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.n = round(cl(k[0], 12, NMAX));\n  S.speed = cl(k[1], 0.2, 3);\n  S.swirl = cl(k[2], 0, 1);\n  // Up to 0.06 no ripple, so the opening has one fixed point.\n  S.ripple = max(0, cl(k[3], 0, 1) - 0.06) / 0.94;\n  if (!S.begun) {\n    // Open some way into the run, further in the faster it goes, so Speed\n    // shows from the first second.\n    S.t = 4 * S.speed;\n    S.begun = true;\n  }\n  S.t += (d * S.speed) / 2;\n  S.head += d * S.speed * 18;\n  // The fixed point of the map without ripple wanders inside the triangle,\n  // its barycentric coordinates never under 0.12, round its loop in 14\n  // seconds at Speed 2.\n  const t = S.t, rr = 0.13 + 0.08 * sin(0.6 * t + 0.6), ph = 0.45 * t + 1.1;\n  const c1 = 1 / 3 + rr * cos(ph), c2 = 1 / 3 + rr * cos(ph - TAU / 3), c3 = 1 - c1 - c2;\n  S.cx = c2 - c1;\n  S.cy = R3 * c3;\n  // The push leans up to 60 degrees either side of straight at c, back and\n  // forth every 12.6 seconds at Speed 2.\n  S.turn = 1.05 * sin(0.5 * t);\n  label(S);\n  walkAll(S);\n}\n\n// Light the line buffer along a polyline, with brightness fn(s) at arc\n// length s.\nfunction stroke(S, pts, fn) {\n  const L = S.line;\n  let s = 0;\n  for (let k = 1; k \u003c pts.length; k++) {\n    const ax = pts[k - 1][0], ay = pts[k - 1][1], bx = pts[k][0], by = pts[k][1];\n    const ex = bx - ax, ey = by - ay, len = hypot(ex, ey);\n    if (len \u003c 1e-6) continue;\n    const x0 = max(0, floor(min(ax, bx) - 1.5)), x1 = min(W - 1, floor(max(ax, bx) + 1.5));\n    const y0 = max(0, floor(min(ay, by) - 1.5)), y1 = min(H - 1, floor(max(ay, by) + 1.5));\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, u = cl((px * ex + py * ey) / (len * len), 0, 1);\n        const dd = hypot(px - u * ex, py - u * ey), a = cl(1.25 - dd, 0, 1);\n        if (a \u003c= 0) continue;\n        const v = a * fn(s + u * len), p = y * W + x;\n        if (v > L[p]) L[p] = v;\n      }\n    s += len;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.n) return;\n  const { n, lab, R, G, B, line, hc, room } = S;\n  line.fill(0);\n  const isMainEnd = (r) => S.main && S.main.end === r;\n  const rb = new Set(S.rainbow);\n  // The territories, the mesh and the rainbow rooms.\n  const lw = 0.5 + 0.3 * (NMAX - n) / 16;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, X = x + 0.5 - P1x, Y = y + 0.5 - P1y;\n      const l2 = (X * E3y - Y * E3x) / DET, l3 = (E2x * Y - E2y * X) / DET, l1 = 1 - l2 - l3;\n      if (l1 \u003c -0.004 || l2 \u003c -0.004 || l3 \u003c -0.004) {\n        R[p] = G[p] = B[p] = 0;\n        room[p] = -1;\n        continue;\n      }\n      const u = cl(l2 * n, 0, n - 1e-6), v = cl(l3 * n, 0, n - 1e-6);\n      let i = floor(u), j = floor(v);\n      if (i + j > n - 1) j = n - 1 - i;\n      const fu = u - i, fv = v - j, down = fu + fv > 1 ? 1 : 0;\n      const r = rid(i, j, down), cs = corners(r);\n      const w = down ? [fu + fv - 1, 1 - fu, 1 - fv] : [1 - fu - fv, fu, fv];\n      // Each corner's share of the room: the part nearer it than the others,\n      // so every vertex sits in a cell of its own label's colour.\n      let m = 0;\n      if (w[1] > w[m]) m = 1;\n      if (w[2] > w[m]) m = 2;\n      const c = COL[lab[cs[m]]];\n      // Mesh lines: dark walls, about one LED wide.\n      const a1 = u - i, b1 = v - j, w1 = u + v - floor(u + v);\n      const dm = min(min(a1, 1 - a1) / (n * G2), min(b1, 1 - b1) / (n * G3), min(w1, 1 - w1) / (n * G1));\n      const wl = 1 - sm(0.2, 0.75, dm);\n      room[p] = r;\n      if (rb.has(r)) {\n        // A rainbow room: a spinning wheel of every hue inside white walls.\n        const ctr = centroid(n, cs), a = atan2(y + 0.5 - ctr[1], x + 0.5 - ctr[0]) / TAU;\n        hsv(a + S.t * 0.6, 0.85, 1, hc);\n        const k = isMainEnd(r) ? 0.9 : 0.6;\n        R[p] = 255 * (hc[0] + (k - hc[0]) * wl);\n        G[p] = 255 * (hc[1] + (k - hc[1]) * wl);\n        B[p] = 255 * (hc[2] + (k - hc[2]) * wl);\n        continue;\n      }\n      const wall = 1 - lw * wl;\n      R[p] = c[0] * wall * 255;\n      G[p] = c[1] * wall * 255;\n      B[p] = c[2] * wall * 255;\n    }\n  // The other walks dim; the main one brighter, with a head running from\n  // the base door into the rainbow room and a pause there before it runs again.\n  // Each walk is drawn from door to door and stops at the wall of a rainbow\n  // room, so the room's own colours stay clear.\n  const trim = (w) => w.pts.slice(w.base ? 0 : 1, w.end >= 0 ? w.pts.length - 1 : w.pts.length);\n  for (const w of S.walks) if (w !== S.main) stroke(S, trim(w), () => 0.42);\n  if (S.main) {\n    const pts = trim(S.main), L = lengthOf(pts), cyc = L + 30, hs = S.head % cyc;\n    stroke(S, pts, (s) => {\n      const back = hs - s;\n      return back \u003c 0 ? 0.62 : 0.62 + 0.38 * Math.exp(-back / 9);\n    });\n    // A soft glow rides with the head, GLOW LEDs round, so the run up the\n    // walk shows from across the room and not only on the thin line.\n    if (hs \u003c L) {\n      let s = 0, hx = pts[0][0], hy = pts[0][1];\n      for (let k = 1; k \u003c pts.length; k++) {\n        const ex = pts[k][0] - pts[k - 1][0], ey = pts[k][1] - pts[k - 1][1], len = hypot(ex, ey);\n        if (s + len >= hs) {\n          const u = len > 0 ? (hs - s) / len : 0;\n          hx = pts[k - 1][0] + u * ex;\n          hy = pts[k - 1][1] + u * ey;\n          break;\n        }\n        s += len;\n      }\n      for (let y = max(0, floor(hy - GLOW)); y \u003c= min(H - 1, floor(hy + GLOW)); y++)\n        for (let x = max(0, floor(hx - GLOW)); x \u003c= min(W - 1, floor(hx + GLOW)); x++) {\n          const dd = hypot(x + 0.5 - hx, y + 0.5 - hy) / GLOW, p = y * W + x;\n          if (dd >= 1 || room[p] \u003c 0 || rb.has(room[p])) continue;\n          const g = 0.7 * (1 - dd) * (1 - dd);\n          R[p] += (255 - R[p]) * g;\n          G[p] += (255 - G[p]) * g;\n          B[p] += (255 - B[p]) * g;\n        }\n    }\n    // A halo round the room the walk ends in, flaring as the head arrives.\n    const ctr = centroid(n, corners(S.main.end)), fl = hs > L ? Math.exp(-(hs - L) / 12) : 0;\n    const rad = 5 + 3 * fl + 60 / n, amp = 0.3 + 0.5 * fl;\n    for (let y = max(0, floor(ctr[1] - rad)); y \u003c= min(H - 1, floor(ctr[1] + rad)); y++)\n      for (let x = max(0, floor(ctr[0] - rad)); x \u003c= min(W - 1, floor(ctr[0] + rad)); x++) {\n        const dd = hypot(x + 0.5 - ctr[0], (y + 0.5 - ctr[1]) * 0.6) / rad;\n        if (dd >= 1) continue;\n        const g = amp * (1 - dd) * (1 - dd), p = y * W + x;\n        if (room[p] \u003c 0 || rb.has(room[p])) continue;\n        R[p] += (255 - R[p]) * g;\n        G[p] += (255 - G[p]) * g;\n        B[p] += (255 - B[p]) * g;\n      }\n  }\n  for (let p = 0; p \u003c W * H; p++) {\n    const a = line[p];\n    const r = R[p] * (1 - a) + 255 * a, g = G[p] * (1 - a) + 255 * a, b = B[p] * (1 - a) + 255 * a;\n    display.setPixel(p % W, (p / W) | 0, round(min(255, r)), round(min(255, g)), round(min(255, b)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mesh=12..28, Speed=0.2..3, Swirl=0..1, Ripple=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mesh","min":12,"max":28,"about":"Rooms along each side: 12 at the start (144 rooms), 20 at the middle (400), 28 at the top (784). The finer the mesh, the smaller the rainbow room, the closer it sits on the fixed point and the more the walk wanders; at 28 the territories' borders are nearly smooth curves."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the push of the map leans up to 60 degrees either way and back every 12.6 seconds, so the three territories rock round the fixed point and 9 to 16 corners change label every second at Mesh 12, the fixed point goes round its loop in 14 seconds, and a bright head with a glow 7 LEDs round runs the walk at 36 LEDs a second. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Swirl","min":0,"max":1,"about":"Twists the map round its fixed point more the further out it reaches. At 0 the three territories are wedges meeting at the fixed point; at 0.5 their borders curl about half a turn round it; at 1 most of a turn, and the walk from the base runs along the bottom and round before it climbs in."},{"name":"Ripple","min":0,"max":1,"about":"Adds a wavy push to the map, which gives it more fixed points. Up to 0.06 none: one fixed point and one rainbow room. At 0.25 three to seven rainbow rooms, at 1 five to eleven, always an odd number; islands of one label float in another, the walk from the base reaches one rainbow room and dim walks join the others two by two."}],"start":[12,2,0,0.06],"measures":{"motion":0.0411,"detail":0.0869,"edges":0.6362,"complexity":0.5552,"coverage":0.4564,"colour":0.2811,"drift":0.0451},"knobResponse":[0.0654,0.0563,0.0533,0.0518]},{"slug":"sponge-blend","title":"Sponge Blend","family":"cosmetic","round":31,"note":"옅은 바탕에 산호색 줄 하나가 그어지고, 보이지 않는 촉촉한 스펀지가 줄을 따라 1초에 여섯 번쯤 두드려 고운 구멍 자국을 찍으며 색을 바깥으로 펴요. 15초쯤이면 선이 넓은 점묘 그러데이션이 되고, 닦아 내고 다시 그어요. K1 은 색상환을 다 돌고, 누르면 새 줄을 그어요.","idea":"A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.","buttons":"K1 tap lays a fresh stripe of colour for the sponge to blend out.","code":"// ===== Patternflow pattern =====\n// Title:   Sponge Blend\n// Family:  cosmetic\n// Idea:    A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after foundation blended out with a damp makeup sponge\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1\n//\n// Knob 1: Hue. The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown.\n// Knob 2: Speed. How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower.\n// Knob 3: Coverage. How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab.\n// Knob 4: Grain. How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish.\n// Buttons: K1 tap lays a fresh stripe of colour for the sponge to blend out.\n\nconst W = 64, H = 128, N = W * H;\nconst TS = 128, TN = TS * TS;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sponge's pores: three tiles of noise blurred over 3, 5 and 7 LEDs, 128\n// LEDs square and wrapping, each LED's value turned into its rank 0..255.\n// Cutting a tile at rank 128 gives cells from two to four LEDs across, half of\n// them touching; cutting it lower leaves only the cores, small and sparse.\nlet TILES = null;\nfunction tiles() {\n  const out = [];\n  const raw = Float32Array.from({ length: TN }, (_, i) => hash(i + 911) - 0.5);\n  for (let r = 1; r \u003c= 3; r++) {\n    const b = new Float32Array(TN);\n    for (let y = 0; y \u003c TS; y++)\n      for (let x = 0; x \u003c TS; x++) {\n        let s = 0;\n        for (let dy = -r; dy \u003c= r; dy++) for (let dx = -r; dx \u003c= r; dx++) s += raw[((y + dy) & (TS - 1)) * TS + ((x + dx) & (TS - 1))];\n        b[y * TS + x] = s;\n      }\n    const order = Array.from({ length: TN }, (_, i) => i).sort((p, q) => b[p] - b[q]);\n    const rank = new Uint8Array(TN);\n    order.forEach((i, k) => (rank[i] = (k * 256) / TN));\n    out.push(rank);\n  }\n  return out;\n}\n\n// The base's grain is a fine checker: every other LED sits half a step above\n// the base and the rest half a step below, so neighbouring LEDs always differ\n// by about the same 28 to 41 levels and nothing reads as an outline. AMP is\n// each LED's own share of that step. The pores of a print are soft dips\n// spread over three LEDs, a few levels a LED, so they never cut an edge.\nconst AMP = Float32Array.from({ length: N }, (_, i) => 0.78 + 0.34 * hash(i + 4242));\nconst ODD = Uint8Array.from({ length: N }, (_, i) => ((i % W) + floor(i / W)) & 1);\nconst STEP = 0.175;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    A: F(N), c: F(N), pm: new Uint8Array(N), cn: F(N), sh: F(N), dist: F(N).fill(99), su: F(N),\n    phase: 0, pt: 0, lay: 0, len: 100, pts: F(98), u: 0, dir: 1, pass: 0, side: 1, load: 0, dabT: 0, n: 0,\n    hue: 0, speed: 2, cov: 0, grain: 0.06, started: false, col: F(6), T: 0,\n  };\n}\n\n// A new stripe: a gentle curve down most of the panel, or anywhere when\n// laid by hand. Every LED's distance from it and the place along it nearest\n// are kept for laying it on and for walking the sponge along it.\nfunction stripe(S, free) {\n  const r = Math.random;\n  let x0, y0, x1, y1;\n  if (free) {\n    const a = r() * PI, l = 50 + r() * 50, cx = 16 + r() * 32, cy = 30 + r() * 68;\n    x0 = cx - (cos(a) * l) / 2;\n    y0 = cy - (sin(a) * l) / 2;\n    x1 = cx + (cos(a) * l) / 2;\n    y1 = cy + (sin(a) * l) / 2;\n  } else {\n    x0 = 14 + r() * 36;\n    y0 = 8 + r() * 10;\n    x1 = 14 + r() * 36;\n    y1 = 110 + r() * 10;\n  }\n  const nx = -(y1 - y0), ny = x1 - x0, nl = sqrt(nx * nx + ny * ny) || 1, bend = (r() - 0.5) * 24;\n  const mx = (x0 + x1) / 2 + (nx / nl) * bend, my = (y0 + y1) / 2 + (ny / nl) * bend;\n  const P = S.pts;\n  let len = 0;\n  for (let k = 0; k \u003c 49; k++) {\n    const t = k / 48, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n    P[k * 2] = a * x0 + b * mx + c * x1;\n    P[k * 2 + 1] = a * y0 + b * my + c * y1;\n    if (k) len += Math.hypot(P[k * 2] - P[k * 2 - 2], P[k * 2 + 1] - P[k * 2 - 1]);\n  }\n  S.len = len;\n  S.wid = 11 + r() * 3;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let best = 1e9, bu = 0;\n      for (let k = 0; k \u003c 48; k++) {\n        const ax = P[k * 2], ay = P[k * 2 + 1], bx = P[k * 2 + 2] - ax, by = P[k * 2 + 3] - ay;\n        const t = cl(((x + 0.5 - ax) * bx + (y + 0.5 - ay) * by) / (bx * bx + by * by + 1e-6), 0, 1);\n        const dx = x + 0.5 - ax - bx * t, dy = y + 0.5 - ay - by * t, d = dx * dx + dy * dy;\n        if (d \u003c best) (best = d), (bu = (k + t) / 48);\n      }\n      S.dist[i] = sqrt(best);\n      S.su[i] = bu;\n    }\n  S.phase = 1;\n  S.lay = 0;\n  S.u = 0;\n  S.dir = 1;\n  S.pass = 0;\n  S.load = 0.3;\n}\n\n// Where the sponge comes down next: back and forth along the stripe, a step\n// at a time, zig-zagging to either side and further out with each pass.\nconst REACH = [6, 10, 14, 18, 12];\nfunction target(S) {\n  const P = S.pts, u = cl(S.u, 0, 1), k = min(47, floor(u * 48)), t = u * 48 - k;\n  const x = P[k * 2] + (P[k * 2 + 2] - P[k * 2]) * t, y = P[k * 2 + 1] + (P[k * 2 + 3] - P[k * 2 + 1]) * t;\n  const tx = P[k * 2 + 2] - P[k * 2], ty = P[k * 2 + 3] - P[k * 2 + 1], tl = sqrt(tx * tx + ty * ty) || 1;\n  const off = S.side * REACH[S.pass % REACH.length] * (0.2 + 0.8 * Math.random());\n  return [x - (ty / tl) * off + (Math.random() - 0.5) * 3, y + (tx / tl) * off + (Math.random() - 0.5) * 3];\n}\n\n// One dab: the sponge's touching cells give and take colour until each holds\n// nearer the patch's mean, with a little of what the sponge still carries\n// from the last dab, so the colour is dragged along the way it bounces. The\n// sponge soaks up a little each time, so a stripe thins as it spreads. The\n// print shows the touching cells as pores of deeper colour: all of them on a\n// fresh patch, and only their cores, smaller and fewer, each time the same\n// spot is dabbed again, until the patch is a smooth finish with fine pores.\nfunction dab(S, cx, cy) {\n  const cov = S.cov, R = 10 + 3 * cov, ox = floor(Math.random() * TS), oy = floor(Math.random() * TS);\n  const g = S.grain, tile = TILES[min(2, floor(g * 3))], rate = 0.7 + 0.25 * cov;\n  // A coarse sponge prints more and bigger pores, and prints them in thinner colour.\n  const fr = 0.36 + 0.24 * g, lo = 0.25 - 0.13 * g;\n  const A = S.A, pm = S.pm, cn = S.cn, sh = S.sh, C = S.c;\n  const E = R * 1.25, x0 = max(0, floor(cx - E)), x1 = min(W - 1, floor(cx + E)), y0 = max(0, floor(cy - E)), y1 = min(H - 1, floor(cy + E));\n  const p1 = Math.random() * 2 * PI, p2 = Math.random() * 2 * PI;\n  let sum = 0, area = 0;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy, th = Math.atan2(dy, dx), i = y * W + x;\n      // The sponge's tip is not a perfect circle, and turns from dab to dab.\n      const d = sqrt(dx * dx + dy * dy) / (R * (1 + 0.13 * sin(2 * th + p1) + 0.08 * sin(3 * th + p2)));\n      if (d >= 1) {\n        C[i] = 0;\n        continue;\n      }\n      const w = 1 - sm((d - 0.45) / 0.55);\n      const rk = tile[((y + oy) & (TS - 1)) * TS + ((x + ox) & (TS - 1))];\n      const c = w * (rk \u003c 128 ? 1 : 0.15) * rate;\n      C[i] = c;\n      sum += c * A[i];\n      area += c;\n      cn[i] += w;\n      sh[i] = max(sh[i], w);\n      // The print, except at the very rim where the sponge barely touched.\n      // Pores only show where colour sits, fewer the more it was dabbed.\n      if (w > 0.3 || hash(i + S.n * 131) \u003c w * 3) pm[i] = A[i] > lo && rk \u003c 256 * max(0.12, fr * exp(-cn[i] / 4)) ? 1 : 0;\n    }\n  if (area \u003c= 0) return;\n  const mean = sum / area, carry = 0.75 * mean + 0.25 * S.load;\n  S.load = mean;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, i = y * W + x0; x \u003c= x1; x++, i++) {\n      const c = C[i];\n      if (c > 0) A[i] = (A[i] + (carry - A[i]) * c) * (1 - 0.05 * c);\n    }\n  S.n++;\n}\n\nfunction stepT(S, st) {\n  if (S.phase === 1) {\n    // Laying the stripe on, top to bottom, in about a second.\n    S.lay = min(1, S.lay + st * 1.1);\n    const w2 = S.wid / 2, A = S.A;\n    for (let i = 0; i \u003c N; i++) {\n      const f = (S.lay - S.su[i]) * S.len;\n      if (f \u003c= 0) continue;\n      // A soft shoulder three LEDs wide on each side and at the tip, never a cliff.\n      const v = (1 - sm((S.dist[i] - w2 + 1.5) / 3)) * sm(f / 3);\n      if (v > A[i]) A[i] = v;\n    }\n    if (S.lay >= 1) {\n      S.phase = 2;\n      S.pt = 0;\n      S.dabT = 0.15;\n    }\n    return;\n  }\n  if (S.phase === 2) {\n    S.pt += st;\n    S.dabT -= st;\n    if (S.dabT \u003c= 0) {\n      S.dabT += 0.17 * (0.85 + 0.3 * Math.random());\n      const [x, y] = target(S);\n      dab(S, x, y);\n      S.side = -S.side;\n      S.u += (S.dir * 6.5) / S.len;\n      if (S.u > 1 || S.u \u003c 0) {\n        S.dir = -S.dir;\n        S.u = cl(S.u, 0, 1);\n        S.pass++;\n      }\n    }\n    if (S.pass >= REACH.length) {\n      S.phase = 3;\n      S.pt = 0;\n    }\n    return;\n  }\n  if (S.phase === 3) {\n    // A slow wipe from the top takes the colour off; then the next stripe.\n    S.pt += st;\n    const edge = S.pt * 110 - 10, A = S.A, cn = S.cn;\n    for (let y = 0; y \u003c H; y++) {\n      const k = cl((edge - y) / 12, 0, 1) * 0.25;\n      if (k \u003c= 0) break;\n      for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n        A[i] *= 1 - k;\n        cn[i] *= 1 - k;\n        if (A[i] \u003c 0.25) S.pm[i] = 0;\n      }\n    }\n    if (S.pt > 1.6) stripe(S, false);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.cov = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    if (!TILES) TILES = tiles();\n    // Open with the stripe more than half laid on.\n    stripe(S, false);\n    for (let i = 0; i \u003c 12; i++) stepT(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    stripe(S, true);\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  stepT(S, st);\n  // The wet shine dries in real time, over a second or two, so a fast sponge\n  // leaves several at once.\n  const fade = exp(-d * 1.4);\n  for (let i = 0; i \u003c N; i++) S.sh[i] *= fade;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const A = S.A, pm = S.pm, sh = S.sh, col = S.col;\n  const h = S.hue + 0.05, cov = S.cov;\n  // The base: a pale ivory with a breath of the hue. The colour: the hue at\n  // nearly the same brightness, so the blend shows as colour on a steady grain.\n  // Orange and gold read brown when dim, so round them the colour is lifted.\n  const hf = h - floor(h), wm = sm((hf - 0.03) / 0.05) * (1 - sm((hf - 0.15) / 0.07));\n  hsv(h, 0.06, 212, col, 0);\n  hsv(h, 0.5 + 0.18 * cov + 0.1 * wm, 208 + 18 * wm, col, 3);\n  // The damp canvas catches the light: two broad soft bands of sheen, about\n  // 18 levels at most and 35 LEDs wide, glide down it at 18 LEDs a second,\n  // tilted a little. They change by under a level from LED to LED, so they\n  // add no edge.\n  const cyc = H + 104, b0 = ((S.T * 18) % cyc) - 52, b1 = ((S.T * 18 + cyc / 2) % cyc) - 52;\n  // Grain also roughens the base: the checker's step grows by half from 0 to 1.\n  const g = S.grain, op = 0.65 + 0.35 * cov, dip = 0.05 + 0.03 * g, gs = STEP * (0.9 + 0.55 * g);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const sy = y + (x - 32) * 0.35, e0 = (sy - b0) / 15, e1 = (sy - b1) / 15;\n      const glow = 0.085 * (exp(-e0 * e0 * 0.5) + exp(-e1 * e1 * 0.5));\n      // How much pore is round this LED, 0..1 over its 3x3 neighbourhood.\n      let pv = 0;\n      for (let yy = max(0, y - 1); yy \u003c= min(H - 1, y + 1); yy++) for (let xx = max(0, x - 1), j = yy * W + xx; xx \u003c= min(W - 1, x + 1); xx++, j++) pv += pm[j];\n      pv /= 9;\n      // A pore holds more colour and sits a little deeper. A fresh dab is\n      // wet for a moment: its colour reads deeper and the base a touch\n      // brighter, then it dries back.\n      const ac = sqrt(cl(A[i], 0, 1)), wet = sh[i];\n      const a = min(1, ac * op * (1 + 0.45 * wet) + 0.45 * pv);\n      const l = 1 + glow + 0.08 * wet - dip * pv + gs * AMP[i] * (ODD[i] ? -0.5 : 0.5);\n      display.setPixel(x, y, (col[0] + (col[3] - col[0]) * a) * l, (col[1] + (col[4] - col[1]) * a) * l, (col[2] + (col[5] - col[2]) * a) * l);\n    }\n}\n","layer":{"id":"layer-sponge-blend","type":"code","name":"sponge-blend","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sponge Blend\n// Family:  cosmetic\n// Idea:    A stripe of colour is laid down a pale base and an unseen damp sponge bounces along it, each dab printing a soft patch of open-cell stipple that lifts colour off the stripe and leaves it further out while soft light glides over the damp canvas, until the hard line is bounced out into a wide soft fade and the base is wiped for the next stripe.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 31, after foundation blended out with a damp makeup sponge\n// Round:   31\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1\n//\n// Knob 1: Hue. The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown.\n// Knob 2: Speed. How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower.\n// Knob 3: Coverage. How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab.\n// Knob 4: Grain. How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish.\n// Buttons: K1 tap lays a fresh stripe of colour for the sponge to blend out.\n\nconst W = 64, H = 128, N = W * H;\nconst TS = 128, TN = TS * TS;\nconst { min, max, floor, sin, cos, exp, sqrt, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sponge's pores: three tiles of noise blurred over 3, 5 and 7 LEDs, 128\n// LEDs square and wrapping, each LED's value turned into its rank 0..255.\n// Cutting a tile at rank 128 gives cells from two to four LEDs across, half of\n// them touching; cutting it lower leaves only the cores, small and sparse.\nlet TILES = null;\nfunction tiles() {\n  const out = [];\n  const raw = Float32Array.from({ length: TN }, (_, i) => hash(i + 911) - 0.5);\n  for (let r = 1; r \u003c= 3; r++) {\n    const b = new Float32Array(TN);\n    for (let y = 0; y \u003c TS; y++)\n      for (let x = 0; x \u003c TS; x++) {\n        let s = 0;\n        for (let dy = -r; dy \u003c= r; dy++) for (let dx = -r; dx \u003c= r; dx++) s += raw[((y + dy) & (TS - 1)) * TS + ((x + dx) & (TS - 1))];\n        b[y * TS + x] = s;\n      }\n    const order = Array.from({ length: TN }, (_, i) => i).sort((p, q) => b[p] - b[q]);\n    const rank = new Uint8Array(TN);\n    order.forEach((i, k) => (rank[i] = (k * 256) / TN));\n    out.push(rank);\n  }\n  return out;\n}\n\n// The base's grain is a fine checker: every other LED sits half a step above\n// the base and the rest half a step below, so neighbouring LEDs always differ\n// by about the same 28 to 41 levels and nothing reads as an outline. AMP is\n// each LED's own share of that step. The pores of a print are soft dips\n// spread over three LEDs, a few levels a LED, so they never cut an edge.\nconst AMP = Float32Array.from({ length: N }, (_, i) => 0.78 + 0.34 * hash(i + 4242));\nconst ODD = Uint8Array.from({ length: N }, (_, i) => ((i % W) + floor(i / W)) & 1);\nconst STEP = 0.175;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    A: F(N), c: F(N), pm: new Uint8Array(N), cn: F(N), sh: F(N), dist: F(N).fill(99), su: F(N),\n    phase: 0, pt: 0, lay: 0, len: 100, pts: F(98), u: 0, dir: 1, pass: 0, side: 1, load: 0, dabT: 0, n: 0,\n    hue: 0, speed: 2, cov: 0, grain: 0.06, started: false, col: F(6), T: 0,\n  };\n}\n\n// A new stripe: a gentle curve down most of the panel, or anywhere when\n// laid by hand. Every LED's distance from it and the place along it nearest\n// are kept for laying it on and for walking the sponge along it.\nfunction stripe(S, free) {\n  const r = Math.random;\n  let x0, y0, x1, y1;\n  if (free) {\n    const a = r() * PI, l = 50 + r() * 50, cx = 16 + r() * 32, cy = 30 + r() * 68;\n    x0 = cx - (cos(a) * l) / 2;\n    y0 = cy - (sin(a) * l) / 2;\n    x1 = cx + (cos(a) * l) / 2;\n    y1 = cy + (sin(a) * l) / 2;\n  } else {\n    x0 = 14 + r() * 36;\n    y0 = 8 + r() * 10;\n    x1 = 14 + r() * 36;\n    y1 = 110 + r() * 10;\n  }\n  const nx = -(y1 - y0), ny = x1 - x0, nl = sqrt(nx * nx + ny * ny) || 1, bend = (r() - 0.5) * 24;\n  const mx = (x0 + x1) / 2 + (nx / nl) * bend, my = (y0 + y1) / 2 + (ny / nl) * bend;\n  const P = S.pts;\n  let len = 0;\n  for (let k = 0; k \u003c 49; k++) {\n    const t = k / 48, a = (1 - t) * (1 - t), b = 2 * t * (1 - t), c = t * t;\n    P[k * 2] = a * x0 + b * mx + c * x1;\n    P[k * 2 + 1] = a * y0 + b * my + c * y1;\n    if (k) len += Math.hypot(P[k * 2] - P[k * 2 - 2], P[k * 2 + 1] - P[k * 2 - 1]);\n  }\n  S.len = len;\n  S.wid = 11 + r() * 3;\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let best = 1e9, bu = 0;\n      for (let k = 0; k \u003c 48; k++) {\n        const ax = P[k * 2], ay = P[k * 2 + 1], bx = P[k * 2 + 2] - ax, by = P[k * 2 + 3] - ay;\n        const t = cl(((x + 0.5 - ax) * bx + (y + 0.5 - ay) * by) / (bx * bx + by * by + 1e-6), 0, 1);\n        const dx = x + 0.5 - ax - bx * t, dy = y + 0.5 - ay - by * t, d = dx * dx + dy * dy;\n        if (d \u003c best) (best = d), (bu = (k + t) / 48);\n      }\n      S.dist[i] = sqrt(best);\n      S.su[i] = bu;\n    }\n  S.phase = 1;\n  S.lay = 0;\n  S.u = 0;\n  S.dir = 1;\n  S.pass = 0;\n  S.load = 0.3;\n}\n\n// Where the sponge comes down next: back and forth along the stripe, a step\n// at a time, zig-zagging to either side and further out with each pass.\nconst REACH = [6, 10, 14, 18, 12];\nfunction target(S) {\n  const P = S.pts, u = cl(S.u, 0, 1), k = min(47, floor(u * 48)), t = u * 48 - k;\n  const x = P[k * 2] + (P[k * 2 + 2] - P[k * 2]) * t, y = P[k * 2 + 1] + (P[k * 2 + 3] - P[k * 2 + 1]) * t;\n  const tx = P[k * 2 + 2] - P[k * 2], ty = P[k * 2 + 3] - P[k * 2 + 1], tl = sqrt(tx * tx + ty * ty) || 1;\n  const off = S.side * REACH[S.pass % REACH.length] * (0.2 + 0.8 * Math.random());\n  return [x - (ty / tl) * off + (Math.random() - 0.5) * 3, y + (tx / tl) * off + (Math.random() - 0.5) * 3];\n}\n\n// One dab: the sponge's touching cells give and take colour until each holds\n// nearer the patch's mean, with a little of what the sponge still carries\n// from the last dab, so the colour is dragged along the way it bounces. The\n// sponge soaks up a little each time, so a stripe thins as it spreads. The\n// print shows the touching cells as pores of deeper colour: all of them on a\n// fresh patch, and only their cores, smaller and fewer, each time the same\n// spot is dabbed again, until the patch is a smooth finish with fine pores.\nfunction dab(S, cx, cy) {\n  const cov = S.cov, R = 10 + 3 * cov, ox = floor(Math.random() * TS), oy = floor(Math.random() * TS);\n  const g = S.grain, tile = TILES[min(2, floor(g * 3))], rate = 0.7 + 0.25 * cov;\n  // A coarse sponge prints more and bigger pores, and prints them in thinner colour.\n  const fr = 0.36 + 0.24 * g, lo = 0.25 - 0.13 * g;\n  const A = S.A, pm = S.pm, cn = S.cn, sh = S.sh, C = S.c;\n  const E = R * 1.25, x0 = max(0, floor(cx - E)), x1 = min(W - 1, floor(cx + E)), y0 = max(0, floor(cy - E)), y1 = min(H - 1, floor(cy + E));\n  const p1 = Math.random() * 2 * PI, p2 = Math.random() * 2 * PI;\n  let sum = 0, area = 0;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const dx = x + 0.5 - cx, dy = y + 0.5 - cy, th = Math.atan2(dy, dx), i = y * W + x;\n      // The sponge's tip is not a perfect circle, and turns from dab to dab.\n      const d = sqrt(dx * dx + dy * dy) / (R * (1 + 0.13 * sin(2 * th + p1) + 0.08 * sin(3 * th + p2)));\n      if (d >= 1) {\n        C[i] = 0;\n        continue;\n      }\n      const w = 1 - sm((d - 0.45) / 0.55);\n      const rk = tile[((y + oy) & (TS - 1)) * TS + ((x + ox) & (TS - 1))];\n      const c = w * (rk \u003c 128 ? 1 : 0.15) * rate;\n      C[i] = c;\n      sum += c * A[i];\n      area += c;\n      cn[i] += w;\n      sh[i] = max(sh[i], w);\n      // The print, except at the very rim where the sponge barely touched.\n      // Pores only show where colour sits, fewer the more it was dabbed.\n      if (w > 0.3 || hash(i + S.n * 131) \u003c w * 3) pm[i] = A[i] > lo && rk \u003c 256 * max(0.12, fr * exp(-cn[i] / 4)) ? 1 : 0;\n    }\n  if (area \u003c= 0) return;\n  const mean = sum / area, carry = 0.75 * mean + 0.25 * S.load;\n  S.load = mean;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, i = y * W + x0; x \u003c= x1; x++, i++) {\n      const c = C[i];\n      if (c > 0) A[i] = (A[i] + (carry - A[i]) * c) * (1 - 0.05 * c);\n    }\n  S.n++;\n}\n\nfunction stepT(S, st) {\n  if (S.phase === 1) {\n    // Laying the stripe on, top to bottom, in about a second.\n    S.lay = min(1, S.lay + st * 1.1);\n    const w2 = S.wid / 2, A = S.A;\n    for (let i = 0; i \u003c N; i++) {\n      const f = (S.lay - S.su[i]) * S.len;\n      if (f \u003c= 0) continue;\n      // A soft shoulder three LEDs wide on each side and at the tip, never a cliff.\n      const v = (1 - sm((S.dist[i] - w2 + 1.5) / 3)) * sm(f / 3);\n      if (v > A[i]) A[i] = v;\n    }\n    if (S.lay >= 1) {\n      S.phase = 2;\n      S.pt = 0;\n      S.dabT = 0.15;\n    }\n    return;\n  }\n  if (S.phase === 2) {\n    S.pt += st;\n    S.dabT -= st;\n    if (S.dabT \u003c= 0) {\n      S.dabT += 0.17 * (0.85 + 0.3 * Math.random());\n      const [x, y] = target(S);\n      dab(S, x, y);\n      S.side = -S.side;\n      S.u += (S.dir * 6.5) / S.len;\n      if (S.u > 1 || S.u \u003c 0) {\n        S.dir = -S.dir;\n        S.u = cl(S.u, 0, 1);\n        S.pass++;\n      }\n    }\n    if (S.pass >= REACH.length) {\n      S.phase = 3;\n      S.pt = 0;\n    }\n    return;\n  }\n  if (S.phase === 3) {\n    // A slow wipe from the top takes the colour off; then the next stripe.\n    S.pt += st;\n    const edge = S.pt * 110 - 10, A = S.A, cn = S.cn;\n    for (let y = 0; y \u003c H; y++) {\n      const k = cl((edge - y) / 12, 0, 1) * 0.25;\n      if (k \u003c= 0) break;\n      for (let x = 0, i = y * W; x \u003c W; x++, i++) {\n        A[i] *= 1 - k;\n        cn[i] *= 1 - k;\n        if (A[i] \u003c 0.25) S.pm[i] = 0;\n      }\n    }\n    if (S.pt > 1.6) stripe(S, false);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0] || 0;\n  S.speed = cl(k[1], 0.2, 3);\n  S.cov = cl(k[2], 0, 1);\n  S.grain = cl(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    if (!TILES) TILES = tiles();\n    // Open with the stripe more than half laid on.\n    stripe(S, false);\n    for (let i = 0; i \u003c 12; i++) stepT(S, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    stripe(S, true);\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  stepT(S, st);\n  // The wet shine dries in real time, over a second or two, so a fast sponge\n  // leaves several at once.\n  const fade = exp(-d * 1.4);\n  for (let i = 0; i \u003c N; i++) S.sh[i] *= fade;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const A = S.A, pm = S.pm, sh = S.sh, col = S.col;\n  const h = S.hue + 0.05, cov = S.cov;\n  // The base: a pale ivory with a breath of the hue. The colour: the hue at\n  // nearly the same brightness, so the blend shows as colour on a steady grain.\n  // Orange and gold read brown when dim, so round them the colour is lifted.\n  const hf = h - floor(h), wm = sm((hf - 0.03) / 0.05) * (1 - sm((hf - 0.15) / 0.07));\n  hsv(h, 0.06, 212, col, 0);\n  hsv(h, 0.5 + 0.18 * cov + 0.1 * wm, 208 + 18 * wm, col, 3);\n  // The damp canvas catches the light: two broad soft bands of sheen, about\n  // 18 levels at most and 35 LEDs wide, glide down it at 18 LEDs a second,\n  // tilted a little. They change by under a level from LED to LED, so they\n  // add no edge.\n  const cyc = H + 104, b0 = ((S.T * 18) % cyc) - 52, b1 = ((S.T * 18 + cyc / 2) % cyc) - 52;\n  // Grain also roughens the base: the checker's step grows by half from 0 to 1.\n  const g = S.grain, op = 0.65 + 0.35 * cov, dip = 0.05 + 0.03 * g, gs = STEP * (0.9 + 0.55 * g);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      const sy = y + (x - 32) * 0.35, e0 = (sy - b0) / 15, e1 = (sy - b1) / 15;\n      const glow = 0.085 * (exp(-e0 * e0 * 0.5) + exp(-e1 * e1 * 0.5));\n      // How much pore is round this LED, 0..1 over its 3x3 neighbourhood.\n      let pv = 0;\n      for (let yy = max(0, y - 1); yy \u003c= min(H - 1, y + 1); yy++) for (let xx = max(0, x - 1), j = yy * W + xx; xx \u003c= min(W - 1, x + 1); xx++, j++) pv += pm[j];\n      pv /= 9;\n      // A pore holds more colour and sits a little deeper. A fresh dab is\n      // wet for a moment: its colour reads deeper and the base a touch\n      // brighter, then it dries back.\n      const ac = sqrt(cl(A[i], 0, 1)), wet = sh[i];\n      const a = min(1, ac * op * (1 + 0.45 * wet) + 0.45 * pv);\n      const l = 1 + glow + 0.08 * wet - dip * pv + gs * AMP[i] * (ODD[i] ? -0.5 : 0.5);\n      display.setPixel(x, y, (col[0] + (col[3] - col[0]) * a) * l, (col[1] + (col[4] - col[1]) * a) * l, (col[2] + (col[5] - col[2]) * a) * l);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Coverage=0..1, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour being blended, all the way round the wheel from coral at 0; the base stays a pale ivory with a breath of it, and round orange and gold the colour is lifted so it never goes brown."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sponge bounces: at 2 it dabs about six times a second, lays a stripe on in a second and blends it out in about fifteen; at 0.2 everything runs ten times slower."},{"name":"Coverage","min":0,"max":1,"about":"How much colour the sponge works: at 0 a sheer wash; at 1 full coverage, deeper and opaque, and the sponge presses a wider patch with every dab."},{"name":"Grain","min":0,"max":1,"about":"How coarse the sponge is: fine pores a LED or two across in a fresh print at 0, open cells about four across at 1, and the grain of the base grows rougher with it. Dab after dab the pores close up into a fine even finish."}],"start":[0,2,0,0.06],"measures":{"motion":0.0318,"detail":0.1277,"edges":0.0012,"complexity":1.8672,"coverage":1,"colour":0.1441,"drift":0.0382},"knobResponse":[0.095,0.0521,0.043,0.0383]},{"slug":"sprout","title":"Sprout","family":"growth","round":1,"note":"한 LED 씩 자라는 픽셀 들꽃밭이에요. 키 큰 접시꽃 둘이 패널 위쪽까지 올라가 꽃대 아래부터 피어요. 시든 꽃잎은 한 점씩 떨어져 발치에 쌓이고, 시드는 포기 곁에서 새 싹이 올라와요.","idea":"Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.","buttons":"K1 tap sows a seed now.","code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","layer":{"id":"layer-sprout","type":"code","name":"sprout","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The flower colour; each plant takes a shade either side of it."},{"name":"Grow","min":0.25,"max":6,"about":"How fast the tips climb, and with it how soon a plant flowers, withers and makes room."},{"name":"Branches","min":3,"max":14,"about":"How many tips a plant may have, from a stem with two side shoots to a small tree."},{"name":"Wind","min":-1,"max":1,"about":"Leans new growth and sways the tops; left of centre it blows the other way."}],"start":[0,2,3,0.06],"measures":{"motion":0.0426,"detail":0.1141,"edges":0.9949,"complexity":0.1635,"coverage":0.1685,"colour":0.2652,"drift":0.0313},"knobResponse":[0.0448,0.119,0.1279,0.0982]},{"slug":"stadium-billiard","title":"Stadium Billiard","family":"physics","round":28,"note":"공 이백 개가 방향을 1000분의 3 라디안 안에서만 달리해 한 점에서 흰 구슬 하나로 떠나요. 패널만 한 부니모비치 경기장의 둥근 끝이 구슬을 무지개 선으로 늘이고 접어서, 몇 초 만에 공들이 기체처럼 판을 채워요. K3 을 돌리면 탁자가 원이 되어 공이 흩어지지 않고, 누르면 새 무리가 떠나요.","idea":"Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.","buttons":"K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.","code":"// ===== Patternflow pattern =====\n// Title:   Stadium Billiard\n// Family:  physics\n// Idea:    Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Bunimovich stadium (Leonid Bunimovich, 1974), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1\n//\n// Knob 1: Hue. Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back.\n// Knob 2: Speed. At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots.\n// Knob 3: Round. At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up.\n// Knob 4: Trail. How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it.\n// Buttons: K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64, R = 32;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two hundred balls, launched with headings spread over FAN radians. VEL\n// LEDs a second per unit of Speed; TAU the shortest trail's time constant.\n// After CYCLE LEDs of flight the gas gathers for GATHER seconds and a new\n// bunch leaves. The cloth and its edge sit just under the 24/255 an LED\n// needs to count as lit, so the table shows on the panel as a faint shape.\nconst NB = 200;\nconst FAN = 3e-3, VEL = 62.5, TAU = 0.035;\nconst CYCLE = 1900, GATHER = 0.9;\nconst CLOTH = 0.075, RIM = 0.094;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nfunction inside(a, x, y, m) {\n  if (abs(y) \u003c= a) return abs(x) \u003c= R - m;\n  const cy = y > 0 ? a : -a;\n  return x * x + (y - cy) * (y - cy) \u003c= (R - m) * (R - m);\n}\n\n// Where along (dx, dy) a ball at (x, y) meets the wall, and the wall's\n// normal there.\nconst HIT = [0, 0, 0];\nfunction hit(a, x, y, dx, dy) {\n  let t = Infinity, nx = 0, ny = 0;\n  if (dx > 1e-12) {\n    const u = (R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = 1), (ny = 0);\n  } else if (dx \u003c -1e-12) {\n    const u = (-R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = -1), (ny = 0);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    const cy = s * a, py = y - cy, b = x * dx + py * dy, c = x * x + py * py - R * R, d = b * b - c;\n    if (d \u003c 0) continue;\n    const u = -b + sqrt(d);\n    if (u \u003c= 1e-9 || u >= t) continue;\n    const hy = y + u * dy - cy;\n    if (s * hy \u003c -1e-6) continue;\n    t = u;\n    nx = (x + u * dx) / R;\n    ny = hy / R;\n  }\n  HIT[0] = t;\n  HIT[1] = nx;\n  HIT[2] = ny;\n}\n\n// Lights the LEDs a ball passes between (x0, y0) and (x1, y1), each once,\n// w0 at the start fading up to w1 at the end.\nfunction trail(P, i, x0, y0, x1, y1, w0, w1) {\n  const n = max(1, ceil(sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)) / 0.6)), buf = P.buf, c = i * 3;\n  const cr = P.col[c], cg = P.col[c + 1], cb = P.col[c + 2];\n  for (let j = 1; j \u003c= n; j++) {\n    const t = j / n, X = floor(x0 + (x1 - x0) * t + CX), Y = floor(y0 + (y1 - y0) * t + CY);\n    const p = cl(Y, 0, H - 1) * W + cl(X, 0, W - 1);\n    if (p === P.lastp) continue;\n    P.lastp = p;\n    const w = w0 + (w1 - w0) * t, q = p * 3;\n    buf[q] += cr * w;\n    buf[q + 1] += cg * w;\n    buf[q + 2] += cb * w;\n  }\n}\n\n// Ball i flies s LEDs, bouncing off the walls exactly.\nfunction fly(P, i, s, w0, w1) {\n  const a = P.a;\n  let x = P.x[i], y = P.y[i], dx = P.dx[i], dy = P.dy[i], done = 0;\n  for (let k = 0; k \u003c 24 && done \u003c s; k++) {\n    hit(a, x, y, dx, dy);\n    // Every ray from inside meets the wall; a ball that finds none has been\n    // left outside, and goes back to the middle.\n    if (HIT[0] === Infinity && !inside(a, x, y, -0.5)) (x = 0), (y = 0);\n    const bounce = HIT[0] \u003c s - done, t = bounce ? HIT[0] : s - done;\n    const x1 = x + t * dx, y1 = y + t * dy;\n    trail(P, i, x, y, x1, y1, w0 + ((w1 - w0) * done) / s, w0 + ((w1 - w0) * (done + t)) / s);\n    x = x1;\n    y = y1;\n    done = bounce ? done + t : s;\n    if (bounce) {\n      const nx = HIT[1], ny = HIT[2], d = dx * nx + dy * ny;\n      dx -= 2 * d * nx;\n      dy -= 2 * d * ny;\n    }\n  }\n  P.x[i] = x;\n  P.y[i] = y;\n  P.dx[i] = dx;\n  P.dy[i] = dy;\n}\n\n// How far apart the two edge balls of a bunch launched from (x, y) at\n// angle th are after flying s LEDs.\nfunction split(a, x, y, th, s) {\n  const e = [];\n  for (const o of [-FAN / 2, FAN / 2]) {\n    let px = x, py = y, dx = cos(th + o), dy = sin(th + o), done = 0;\n    for (let k = 0; k \u003c 200 && done \u003c s; k++) {\n      hit(a, px, py, dx, dy);\n      if (HIT[0] >= s - done) {\n        px += (s - done) * dx;\n        py += (s - done) * dy;\n        break;\n      }\n      px += HIT[0] * dx;\n      py += HIT[0] * dy;\n      done += HIT[0];\n      const d = dx * HIT[1] + dy * HIT[2];\n      dx -= 2 * d * HIT[1];\n      dy -= 2 * d * HIT[2];\n    }\n    e.push(px, py);\n  }\n  return sqrt((e[0] - e[2]) ** 2 + (e[1] - e[3]) ** 2);\n}\n\n// A new launch: of sixteen spots and headings, the one whose bunch holds\n// together for the first 250 LEDs of flight and is furthest apart after 400\n// and 550, two and three and a half seconds at the opening speed. Headings\n// stay at least 30 degrees off the bouncing-ball orbits that run straight\n// across between the flat sides and take their time to come apart.\nfunction pick(P) {\n  const a = P.a;\n  let best = [0, 0, PI / 3], bd = -2;\n  for (let k = 0; k \u003c 16; k++) {\n    const x = (Math.random() * 2 - 1) * 20, y = (Math.random() * 2 - 1) * (a + 16);\n    if (!inside(a, x, y, 6)) continue;\n    let th = (0.17 + Math.random() * 0.3) * PI;\n    if (Math.random() \u003c 0.5) th = -th;\n    if (Math.random() \u003c 0.5) th = PI - th;\n    const d = a \u003c 4 ? 0 : split(a, x, y, th, 250) \u003c 6 ? split(a, x, y, th, 400) + split(a, x, y, th, 550) : -1;\n    if (d > bd) (bd = d), (best = [x, y, th]);\n  }\n  return best;\n}\n\nfunction launch(P, x, y, th) {\n  if (!inside(P.a, x, y, 1)) (x = 0), (y = 0);\n  for (let i = 0; i \u003c NB; i++) {\n    const t = th + FAN * (i / (NB - 1) - 0.5);\n    P.x[i] = x;\n    P.y[i] = y;\n    P.dx[i] = cos(t);\n    P.dy[i] = sin(t);\n  }\n  P.run = 0;\n  P.g = -1;\n}\n\n// The cloth: 1 on the table, 2 on its edge, 0 in the corners outside it.\nfunction table(P) {\n  const a = P.a, m = P.cloth;\n  for (let p = 0; p \u003c N; p++) m[p] = inside(a, (p % W) + 0.5 - CX, ((p / W) | 0) + 0.5 - CY, 0) ? 1 : 0;\n  const put = (x, y) => (m[cl(floor(y + CY), 0, H - 1) * W + cl(floor(x + CX), 0, W - 1)] = 2);\n  for (let y = -a; y \u003c= a; y += 0.5) put(-R + 0.01, y), put(R - 0.01, y);\n  for (let k = 0; k \u003c= 400; k++) {\n    const t = (k / 400) * PI, x = R * cos(t) * 0.9997, y = R * sin(t) * 0.9997;\n    put(x, a + y);\n    put(x, -a - y);\n  }\n}\n\nexport function setup(params) {\n  const F64 = (n) => new Float64Array(n);\n  params.s = {\n    x: F64(NB), y: F64(NB), dx: F64(NB), dy: F64(NB), gx: F64(NB), gy: F64(NB),\n    col: new Float32Array(NB * 3), buf: new Float32Array(N * 3), img: new Float32Array(N * 3),\n    a: 32, cloth: new Uint8Array(N), run: 0, g: -1, L: null, lastp: -1, hue: NaN, tint: [0, 0, 0, 0, 0, 0],\n  };\n  table(params.s);\n  launch(params.s, -19.9, 11.2, 2.389);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const v = VEL * cl(k[1], 0.2, 3), tr = cl(k[3], 0, 1), tau = TAU + 2.2 * tr * tr;\n  const f = exp(-d / tau), B = min(1, 0.07 / tau);\n  // Each ball keeps its place in the fan as a colour, six tenths of the\n  // wheel from one edge to the other, so the bead is white where they all\n  // overlap and the line it stretches into is a rainbow. The cloth turns\n  // from teal to violet and back and is never a dim orange, which reads brown.\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    for (let i = 0; i \u003c NB; i++) hsv(k[0] + 0.5 + 0.6 * (i / (NB - 1) - 0.5), 1, 1, P.col, i * 3);\n    const c = 0.52 + 0.28 * sin(PI * k[0]) ** 2;\n    hsv(c, 0.75, CLOTH, P.tint, 0);\n    hsv(c, 0.6, RIM, P.tint, 3);\n  }\n\n  // The table: two half circles of radius 32 joined by straight sides 2a long.\n  const a = 32 * (1 - cl(k[2], 0, 1));\n  if (abs(a - P.a) > 1e-6) {\n    P.a = a;\n    table(P);\n    for (let i = 0; i \u003c NB; i++) {\n      let x = P.x[i], y = P.y[i];\n      if (inside(a, x, y, 0.01)) continue;\n      const cy = abs(y) \u003c= a ? y : y > 0 ? a : -a, ox = x, oy = y - cy, r = sqrt(ox * ox + oy * oy) || 1;\n      x = (ox / r) * (R - 0.02);\n      y = cy + (oy / r) * (R - 0.02);\n      const nx = ox / r, ny = oy / r, dd = P.dx[i] * nx + P.dy[i] * ny;\n      if (dd > 0) (P.dx[i] -= 2 * dd * nx), (P.dy[i] -= 2 * dd * ny);\n      P.x[i] = x;\n      P.y[i] = y;\n    }\n  }\n\n  const buf = P.buf;\n  for (let q = 0; q \u003c N * 3; q++) buf[q] *= f;\n  if (P.g >= 0 && !inside(a, P.L[0], P.L[1], 1)) (P.L[0] = 0), (P.L[1] = 0);\n\n  if (P.g \u003c 0 && ((input.btnPressed && input.btnPressed[0]) || P.run > CYCLE)) {\n    P.L = pick(P);\n    P.g = 0;\n    P.gx.set(P.x);\n    P.gy.set(P.y);\n  }\n  if (P.g >= 0) {\n    // Gathering: every ball runs straight to the next launch spot.\n    const u0 = P.g / GATHER, u1 = min(1, (P.g + d) / GATHER);\n    const e0 = u0 * u0 * (3 - 2 * u0), e1 = u1 * u1 * (3 - 2 * u1), [lx, ly, th] = P.L;\n    for (let i = 0; i \u003c NB; i++) {\n      const x0 = P.gx[i] + (lx - P.gx[i]) * e0, y0 = P.gy[i] + (ly - P.gy[i]) * e0;\n      const x1 = P.gx[i] + (lx - P.gx[i]) * e1, y1 = P.gy[i] + (ly - P.gy[i]) * e1;\n      P.lastp = -1;\n      trail(P, i, x0, y0, x1, y1, B * f, B);\n      P.x[i] = x1;\n      P.y[i] = y1;\n    }\n    P.g += d;\n    if (u1 >= 1) launch(P, lx, ly, th);\n  } else if (d > 0) {\n    const s = v * d;\n    for (let i = 0; i \u003c NB; i++) {\n      P.lastp = -1;\n      fly(P, i, s, B * f, B);\n    }\n    P.run += s;\n  }\n  // Where the whole bunch passes at once the light piles up; capped, the\n  // bead's tail is no longer than a lone ball's.\n  for (let q = 0; q \u003c N * 3; q++) if (buf[q] > 1.5) buf[q] = 1.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const img = P.img, col = P.col, t = P.tint, m = P.cloth, buf = P.buf;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const o = m[p] === 2 ? 3 : 0, c = m[p] ? 1 : 0;\n    img[q] = max(buf[q], t[o] * c);\n    img[q + 1] = max(buf[q + 1], t[o + 1] * c);\n    img[q + 2] = max(buf[q + 2], t[o + 2] * c);\n  }\n  for (let i = 0; i \u003c NB; i++) {\n    const q = (cl(floor(P.y[i] + CY), 0, H - 1) * W + cl(floor(P.x[i] + CX), 0, W - 1)) * 3, c = i * 3;\n    img[q] += col[c];\n    img[q + 1] += col[c + 1];\n    img[q + 2] += col[c + 2];\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, img[q] * 255) | 0, min(255, img[q + 1] * 255) | 0, min(255, img[q + 2] * 255) | 0);\n  }\n}\n","layer":{"id":"layer-stadium-billiard","type":"code","name":"stadium-billiard","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Stadium Billiard\n// Family:  physics\n// Idea:    Two hundred balls leave one spot as a single white bead, their headings three thousandths of a radian apart, and the round ends of a Bunimovich stadium the size of the panel stretch the bead into a rainbow line and fold it until the balls fill the table as a gas.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Bunimovich stadium (Leonid Bunimovich, 1974), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1\n//\n// Knob 1: Hue. Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back.\n// Knob 2: Speed. At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots.\n// Knob 3: Round. At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up.\n// Knob 4: Trail. How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it.\n// Buttons: K1 tap sends every ball straight to a new spot in under a second and a fresh bunch leaves it. The gas also gathers by itself after 1900 LEDs of flight, fifteen seconds at the opening speed.\n\nconst W = 64, H = 128, N = W * H, CX = 32, CY = 64, R = 32;\nconst { min, max, floor, ceil, sqrt, exp, cos, sin, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two hundred balls, launched with headings spread over FAN radians. VEL\n// LEDs a second per unit of Speed; TAU the shortest trail's time constant.\n// After CYCLE LEDs of flight the gas gathers for GATHER seconds and a new\n// bunch leaves. The cloth and its edge sit just under the 24/255 an LED\n// needs to count as lit, so the table shows on the panel as a faint shape.\nconst NB = 200;\nconst FAN = 3e-3, VEL = 62.5, TAU = 0.035;\nconst CYCLE = 1900, GATHER = 0.9;\nconst CLOTH = 0.075, RIM = 0.094;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h), f = h - i, p = v * (1 - s), q = v * (1 - s * f), t = v * (1 - s * (1 - f));\n  const r = [v, q, p, p, t, v][i], g = [t, v, v, q, p, p][i], b = [p, p, t, v, v, q][i];\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\nfunction inside(a, x, y, m) {\n  if (abs(y) \u003c= a) return abs(x) \u003c= R - m;\n  const cy = y > 0 ? a : -a;\n  return x * x + (y - cy) * (y - cy) \u003c= (R - m) * (R - m);\n}\n\n// Where along (dx, dy) a ball at (x, y) meets the wall, and the wall's\n// normal there.\nconst HIT = [0, 0, 0];\nfunction hit(a, x, y, dx, dy) {\n  let t = Infinity, nx = 0, ny = 0;\n  if (dx > 1e-12) {\n    const u = (R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = 1), (ny = 0);\n  } else if (dx \u003c -1e-12) {\n    const u = (-R - x) / dx;\n    if (u > 1e-9 && abs(y + u * dy) \u003c= a) (t = u), (nx = -1), (ny = 0);\n  }\n  for (let s = -1; s \u003c= 1; s += 2) {\n    const cy = s * a, py = y - cy, b = x * dx + py * dy, c = x * x + py * py - R * R, d = b * b - c;\n    if (d \u003c 0) continue;\n    const u = -b + sqrt(d);\n    if (u \u003c= 1e-9 || u >= t) continue;\n    const hy = y + u * dy - cy;\n    if (s * hy \u003c -1e-6) continue;\n    t = u;\n    nx = (x + u * dx) / R;\n    ny = hy / R;\n  }\n  HIT[0] = t;\n  HIT[1] = nx;\n  HIT[2] = ny;\n}\n\n// Lights the LEDs a ball passes between (x0, y0) and (x1, y1), each once,\n// w0 at the start fading up to w1 at the end.\nfunction trail(P, i, x0, y0, x1, y1, w0, w1) {\n  const n = max(1, ceil(sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)) / 0.6)), buf = P.buf, c = i * 3;\n  const cr = P.col[c], cg = P.col[c + 1], cb = P.col[c + 2];\n  for (let j = 1; j \u003c= n; j++) {\n    const t = j / n, X = floor(x0 + (x1 - x0) * t + CX), Y = floor(y0 + (y1 - y0) * t + CY);\n    const p = cl(Y, 0, H - 1) * W + cl(X, 0, W - 1);\n    if (p === P.lastp) continue;\n    P.lastp = p;\n    const w = w0 + (w1 - w0) * t, q = p * 3;\n    buf[q] += cr * w;\n    buf[q + 1] += cg * w;\n    buf[q + 2] += cb * w;\n  }\n}\n\n// Ball i flies s LEDs, bouncing off the walls exactly.\nfunction fly(P, i, s, w0, w1) {\n  const a = P.a;\n  let x = P.x[i], y = P.y[i], dx = P.dx[i], dy = P.dy[i], done = 0;\n  for (let k = 0; k \u003c 24 && done \u003c s; k++) {\n    hit(a, x, y, dx, dy);\n    // Every ray from inside meets the wall; a ball that finds none has been\n    // left outside, and goes back to the middle.\n    if (HIT[0] === Infinity && !inside(a, x, y, -0.5)) (x = 0), (y = 0);\n    const bounce = HIT[0] \u003c s - done, t = bounce ? HIT[0] : s - done;\n    const x1 = x + t * dx, y1 = y + t * dy;\n    trail(P, i, x, y, x1, y1, w0 + ((w1 - w0) * done) / s, w0 + ((w1 - w0) * (done + t)) / s);\n    x = x1;\n    y = y1;\n    done = bounce ? done + t : s;\n    if (bounce) {\n      const nx = HIT[1], ny = HIT[2], d = dx * nx + dy * ny;\n      dx -= 2 * d * nx;\n      dy -= 2 * d * ny;\n    }\n  }\n  P.x[i] = x;\n  P.y[i] = y;\n  P.dx[i] = dx;\n  P.dy[i] = dy;\n}\n\n// How far apart the two edge balls of a bunch launched from (x, y) at\n// angle th are after flying s LEDs.\nfunction split(a, x, y, th, s) {\n  const e = [];\n  for (const o of [-FAN / 2, FAN / 2]) {\n    let px = x, py = y, dx = cos(th + o), dy = sin(th + o), done = 0;\n    for (let k = 0; k \u003c 200 && done \u003c s; k++) {\n      hit(a, px, py, dx, dy);\n      if (HIT[0] >= s - done) {\n        px += (s - done) * dx;\n        py += (s - done) * dy;\n        break;\n      }\n      px += HIT[0] * dx;\n      py += HIT[0] * dy;\n      done += HIT[0];\n      const d = dx * HIT[1] + dy * HIT[2];\n      dx -= 2 * d * HIT[1];\n      dy -= 2 * d * HIT[2];\n    }\n    e.push(px, py);\n  }\n  return sqrt((e[0] - e[2]) ** 2 + (e[1] - e[3]) ** 2);\n}\n\n// A new launch: of sixteen spots and headings, the one whose bunch holds\n// together for the first 250 LEDs of flight and is furthest apart after 400\n// and 550, two and three and a half seconds at the opening speed. Headings\n// stay at least 30 degrees off the bouncing-ball orbits that run straight\n// across between the flat sides and take their time to come apart.\nfunction pick(P) {\n  const a = P.a;\n  let best = [0, 0, PI / 3], bd = -2;\n  for (let k = 0; k \u003c 16; k++) {\n    const x = (Math.random() * 2 - 1) * 20, y = (Math.random() * 2 - 1) * (a + 16);\n    if (!inside(a, x, y, 6)) continue;\n    let th = (0.17 + Math.random() * 0.3) * PI;\n    if (Math.random() \u003c 0.5) th = -th;\n    if (Math.random() \u003c 0.5) th = PI - th;\n    const d = a \u003c 4 ? 0 : split(a, x, y, th, 250) \u003c 6 ? split(a, x, y, th, 400) + split(a, x, y, th, 550) : -1;\n    if (d > bd) (bd = d), (best = [x, y, th]);\n  }\n  return best;\n}\n\nfunction launch(P, x, y, th) {\n  if (!inside(P.a, x, y, 1)) (x = 0), (y = 0);\n  for (let i = 0; i \u003c NB; i++) {\n    const t = th + FAN * (i / (NB - 1) - 0.5);\n    P.x[i] = x;\n    P.y[i] = y;\n    P.dx[i] = cos(t);\n    P.dy[i] = sin(t);\n  }\n  P.run = 0;\n  P.g = -1;\n}\n\n// The cloth: 1 on the table, 2 on its edge, 0 in the corners outside it.\nfunction table(P) {\n  const a = P.a, m = P.cloth;\n  for (let p = 0; p \u003c N; p++) m[p] = inside(a, (p % W) + 0.5 - CX, ((p / W) | 0) + 0.5 - CY, 0) ? 1 : 0;\n  const put = (x, y) => (m[cl(floor(y + CY), 0, H - 1) * W + cl(floor(x + CX), 0, W - 1)] = 2);\n  for (let y = -a; y \u003c= a; y += 0.5) put(-R + 0.01, y), put(R - 0.01, y);\n  for (let k = 0; k \u003c= 400; k++) {\n    const t = (k / 400) * PI, x = R * cos(t) * 0.9997, y = R * sin(t) * 0.9997;\n    put(x, a + y);\n    put(x, -a - y);\n  }\n}\n\nexport function setup(params) {\n  const F64 = (n) => new Float64Array(n);\n  params.s = {\n    x: F64(NB), y: F64(NB), dx: F64(NB), dy: F64(NB), gx: F64(NB), gy: F64(NB),\n    col: new Float32Array(NB * 3), buf: new Float32Array(N * 3), img: new Float32Array(N * 3),\n    a: 32, cloth: new Uint8Array(N), run: 0, g: -1, L: null, lastp: -1, hue: NaN, tint: [0, 0, 0, 0, 0, 0],\n  };\n  table(params.s);\n  launch(params.s, -19.9, 11.2, 2.389);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const v = VEL * cl(k[1], 0.2, 3), tr = cl(k[3], 0, 1), tau = TAU + 2.2 * tr * tr;\n  const f = exp(-d / tau), B = min(1, 0.07 / tau);\n  // Each ball keeps its place in the fan as a colour, six tenths of the\n  // wheel from one edge to the other, so the bead is white where they all\n  // overlap and the line it stretches into is a rainbow. The cloth turns\n  // from teal to violet and back and is never a dim orange, which reads brown.\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    for (let i = 0; i \u003c NB; i++) hsv(k[0] + 0.5 + 0.6 * (i / (NB - 1) - 0.5), 1, 1, P.col, i * 3);\n    const c = 0.52 + 0.28 * sin(PI * k[0]) ** 2;\n    hsv(c, 0.75, CLOTH, P.tint, 0);\n    hsv(c, 0.6, RIM, P.tint, 3);\n  }\n\n  // The table: two half circles of radius 32 joined by straight sides 2a long.\n  const a = 32 * (1 - cl(k[2], 0, 1));\n  if (abs(a - P.a) > 1e-6) {\n    P.a = a;\n    table(P);\n    for (let i = 0; i \u003c NB; i++) {\n      let x = P.x[i], y = P.y[i];\n      if (inside(a, x, y, 0.01)) continue;\n      const cy = abs(y) \u003c= a ? y : y > 0 ? a : -a, ox = x, oy = y - cy, r = sqrt(ox * ox + oy * oy) || 1;\n      x = (ox / r) * (R - 0.02);\n      y = cy + (oy / r) * (R - 0.02);\n      const nx = ox / r, ny = oy / r, dd = P.dx[i] * nx + P.dy[i] * ny;\n      if (dd > 0) (P.dx[i] -= 2 * dd * nx), (P.dy[i] -= 2 * dd * ny);\n      P.x[i] = x;\n      P.y[i] = y;\n    }\n  }\n\n  const buf = P.buf;\n  for (let q = 0; q \u003c N * 3; q++) buf[q] *= f;\n  if (P.g >= 0 && !inside(a, P.L[0], P.L[1], 1)) (P.L[0] = 0), (P.L[1] = 0);\n\n  if (P.g \u003c 0 && ((input.btnPressed && input.btnPressed[0]) || P.run > CYCLE)) {\n    P.L = pick(P);\n    P.g = 0;\n    P.gx.set(P.x);\n    P.gy.set(P.y);\n  }\n  if (P.g >= 0) {\n    // Gathering: every ball runs straight to the next launch spot.\n    const u0 = P.g / GATHER, u1 = min(1, (P.g + d) / GATHER);\n    const e0 = u0 * u0 * (3 - 2 * u0), e1 = u1 * u1 * (3 - 2 * u1), [lx, ly, th] = P.L;\n    for (let i = 0; i \u003c NB; i++) {\n      const x0 = P.gx[i] + (lx - P.gx[i]) * e0, y0 = P.gy[i] + (ly - P.gy[i]) * e0;\n      const x1 = P.gx[i] + (lx - P.gx[i]) * e1, y1 = P.gy[i] + (ly - P.gy[i]) * e1;\n      P.lastp = -1;\n      trail(P, i, x0, y0, x1, y1, B * f, B);\n      P.x[i] = x1;\n      P.y[i] = y1;\n    }\n    P.g += d;\n    if (u1 >= 1) launch(P, lx, ly, th);\n  } else if (d > 0) {\n    const s = v * d;\n    for (let i = 0; i \u003c NB; i++) {\n      P.lastp = -1;\n      fly(P, i, s, B * f, B);\n    }\n    P.run += s;\n  }\n  // Where the whole bunch passes at once the light piles up; capped, the\n  // bead's tail is no longer than a lone ball's.\n  for (let q = 0; q \u003c N * 3; q++) if (buf[q] > 1.5) buf[q] = 1.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const img = P.img, col = P.col, t = P.tint, m = P.cloth, buf = P.buf;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const o = m[p] === 2 ? 3 : 0, c = m[p] ? 1 : 0;\n    img[q] = max(buf[q], t[o] * c);\n    img[q + 1] = max(buf[q + 1], t[o + 1] * c);\n    img[q + 2] = max(buf[q + 2], t[o + 2] * c);\n  }\n  for (let i = 0; i \u003c NB; i++) {\n    const q = (cl(floor(P.y[i] + CY), 0, H - 1) * W + cl(floor(P.x[i] + CX), 0, W - 1)) * 3, c = i * 3;\n    img[q] += col[c];\n    img[q + 1] += col[c + 1];\n    img[q + 2] += col[c + 2];\n  }\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, img[q] * 255) | 0, min(255, img[q + 1] * 255) | 0, min(255, img[q + 2] * 255) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Round=0..1, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Each ball's colour is its place in the fan, from yellow-green at one edge through cyan to violet at the other at 0; turning it takes that rainbow round the wheel, and the faint cloth from teal to violet and back."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a ball flies 125 LEDs a second, about the panel's height: the bead holds together for two seconds, is a rainbow line at three and a gas by seven. At 0.2 it is 12.5 LEDs a second and the gas is a drift of single dots."},{"name":"Round","min":0,"max":1,"about":"At 0 the straight sides are 64 LEDs long and the table is the whole panel, half circles of radius 32 touching the top and bottom rows; turning it shortens them, and at 1 the table is a circle in the middle 64 rows. A circle is integrable: a bunch launched there is still a bead when the next one leaves, and its chords never come inside a ring round the centre, which shows as a hole once Trail is up."},{"name":"Trail","min":0,"max":1,"about":"How long a path stays lit. At 0.06 a ball draws a streak of about 12 LEDs; at 1 a path takes two seconds to fade and the paths add up to a haze with the bright dots running through it."}],"start":[0,2,0,0.06],"measures":{"motion":2.3616,"detail":0.0707,"edges":0.5768,"complexity":0.586,"coverage":0.1863,"colour":0.2492,"drift":0.1225},"knobResponse":[0.0382,0.064,0.0378,0.0449]},{"slug":"stained-glass","title":"Stained Glass","family":"glass","round":18,"note":"고딕 첨두 창이 세운 패널을 다 채워요. 뾰족한 머리의 장미창과 몸통의 생명나무가 검은 납선에 끼운 보석빛 유리 조각으로 짜여 있고, 창 뒤로 해가 지나가면 그 쪽 조각이 희게 타오르고 구름 그림자가 지나가면 어두워져요. K3 은 유리를 자른 크기라서, 돌리면 테두리 네모와 마름모가 잘아지고 장미 꽃잎이 여덟 장에서 열두 장이 돼요.","idea":"A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","layer":{"id":"layer-stained-glass","type":"code","name":"stained-glass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glass","min":0,"max":1,"about":"Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves."},{"name":"Pieces","min":1,"max":4,"about":"How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8."},{"name":"Clouds","min":0,"max":1,"about":"At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches."}],"start":[0,2,1,0.06],"measures":{"motion":0.0274,"detail":0.1501,"edges":0.9911,"complexity":1.9492,"coverage":0.4248,"colour":0.2313,"drift":0.0531},"knobResponse":[0.1334,0.0459,0.0844,0.0693]},{"slug":"star-trails","title":"Star Trails","family":"celestial","round":12,"note":"삼각대에 세운 카메라가 셔터를 열어 둔 사이 하늘이 돌아서, 별마다 북극 둘레에 제 색의 호를 그려요. 능선 아래에는 랜턴을 켠 텐트가 있고, 가끔 떨어지는 별똥별은 궤적만큼 사진에 남아요. K1 을 누르면 별똥별이 하나 더 떨어져요.","idea":"A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.","buttons":"K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","layer":{"id":"layer-star-trails","type":"code","name":"star-trails","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Facing","min":-1,"max":1,"about":"Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes."},{"name":"Latitude","min":-1,"max":1,"about":"Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground."},{"name":"Exposure","min":0,"max":1,"about":"How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles."}],"start":[0,2,0,0.06],"measures":{"motion":0.019,"detail":0.0909,"edges":0.5036,"complexity":1.5537,"coverage":0.563,"colour":0.1007,"drift":0.036},"knobResponse":[0.2496,0.0367,0.1859,0.2144]},{"slug":"steiner-chain","title":"Steiner Chain","family":"geometry","round":39,"note":"위에서는 고리 안의 같은 원 여섯이 통째로 돌고, 아래는 그 사슬을 반전한 그림이라 원이 넓은 쪽을 지나며 부풀고 좁은 쪽에서 줄어요. 원마다 위아래가 같은 색이고, 어디서 시작해도 사슬이 닫히는 슈타이너의 포리즘이 접점의 흰 불꽃으로 보여요.","idea":"A ring of circles each touching its two neighbours and the two circles that hold it turns in the top square, rigid and equal, while the bottom square shows the same ring inverted in a point outside it, the circles swelling as they pass the wide side and shrinking through the narrow one, each in its own colour in both squares and every touch lit, so wherever the chain starts it always closes.","buttons":"K1 tap lays the chain again from where it stands, one circle at a time, and the last one closes the gap with a flash.","code":"// ===== Patternflow pattern =====\n// Title:   Steiner Chain\n// Family:  geometry\n// Idea:    A ring of circles each touching its two neighbours and the two circles that hold it turns in the top square, rigid and equal, while the bottom square shows the same ring inverted in a point outside it, the circles swelling as they pass the wide side and shrinking through the narrow one, each in its own colour in both squares and every touch lit, so wherever the chain starts it always closes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Steiner's porism (Jakob Steiner, 1826), shown through circle inversion, pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Circles=6..12, Speed=0.2..3, Turns=1..4, Offset=0..1\n//\n// Knob 1: Circles. How many circles the chain holds, 6 to 12, each in its own colour, hues spaced evenly round the wheel. At 6 the inner circle is a third of the outer one across and the chain circles are 10 LEDs in radius in the top square; at 12 the inner circle is 0.59 of the outer and the circles are beads 6.2 LEDs in radius.\n// Knob 2: Speed. At 2 the chain turns once in 30 seconds, and a fresh start lays it circle by circle in 1.5 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Turns. How many times the chain winds round before it closes, 1 to 4, at most (Circles - 1) / 2. Neighbours then stand 360 times Turns over Circles degrees apart, sin(180 Turns / Circles) = (1 - inner) / (1 + inner) fixes the inner circle, and the circles overlap in a rosette round it: 7 circles at 2 turns leave it 0.12 of the outer one across, at 3 turns 0.013. Where Turns and Circles share a factor the circles fall into that many chains, each closed: 6 circles at 2 turns are two chains of 3.\n// Knob 4: Offset. How near the chain the point of the inversion sits, and with it how far off-centre the inner circle of the bottom square stands: 12 LEDs above the centre at the start, where a circle passing the wide side at the bottom is 3.4 times as wide as one passing the narrow side; 3 times at 0, and 24 times at 1, where the inner circle stands 25 LEDs up, nearly touching the outer one, and the circles squeezing past it are beads 2 LEDs across.\n// Buttons: K1 tap lays the chain again from where it stands, one circle at a time, and the last one closes the gap with a flash.\n\nconst W = 64, H = 128;\nconst { floor, min, max, sqrt, sin, cos, exp, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Each square's centre and the outer circle's radius, in LEDs; pixel centres at x + 0.5.\nconst CX = 32, CY = [32, 96], RPX = 30.4;\n// The inversion point lies on this ray from the centre of the concentric\n// picture, above it. A point near the inversion point images far away, so\n// the wide side of the bottom square is at the bottom.\nconst PSI = -PI / 2;\n// Seconds per turn of the chain at Speed 2, and to lay it.\nconst TURN = 30, LAY = 1.5;\n// Opening hue of circle 0.\nconst H0 = 0.55;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nconst gcd = (a, b) => (b ? gcd(b, a % b) : a);\n\nexport function setup(params) {\n  params.s = {\n    n: 6, m: 1, q: 3.4, phi: 0, lay: 0, flash: [], begun: false,\n    // Per square: circles as x, y, r (the outer, the inner, then the chain in\n    // the order it is laid); each touch as its point x, y and the pair of\n    // circles that meet there.\n    C: [new Float64Array(3 * 14), new Float64Array(3 * 14)],\n    T: [new Float64Array(2 * 40), new Float64Array(2 * 40)], nt: 0, tri: [],\n    A: new Float32Array(3 * W * H), col: [0, 0, 0], fil: [0, 0, 0],\n  };\n}\n\n// The inversion point's distance a > 1 from the centre, in units of the\n// outer radius, at which a chain circle passing the near side images q times\n// as wide as one passing the far side: the gaps between the two circles on\n// the line through the point image to (1 - rho) / ((a - 1)(a - rho)) and\n// (1 - rho) / ((a + 1)(a + rho)), and their ratio is q.\nfunction dist(q, rho) {\n  const A = q - 1, B = (q + 1) * (1 + rho), C = (q - 1) * rho;\n  return (B + sqrt(B * B - 4 * A * C)) / (2 * A);\n}\n\n// The chain at start angle phi: circle i of sub-chain j, step k, centred on\n// the ring at angle phi + 2 pi (k m + j) / n. Square 0 is the concentric\n// picture; square 1 its image in the unit circle about the point a, scaled\n// so the outer circle's image is RPX across and centred.\nfunction geometry(S) {\n  const { n, m } = S, s = sin((PI * m) / n), rho = (1 - s) / (1 + s), r = (1 - rho) / 2, d = (1 + rho) / 2;\n  const g = gcd(n, m), len = n / g, a = dist(S.q, rho), ax = a * cos(PSI), ay = a * sin(PSI);\n  const inv = (x, y) => {\n    const u = x - ax, v = y - ay, k = 1 / (u * u + v * v);\n    return [ax + u * k, ay + v * k];\n  };\n  const invC = (x, y, rr) => {\n    const u = x - ax, v = y - ay, D = u * u + v * v - rr * rr;\n    return [ax + u / D, ay + v / D, rr / Math.abs(D)];\n  };\n  // Model circles: 0 the outer, 1 the inner, then the chain.\n  const M = [[0, 0, 1], [0, 0, rho]];\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const t = S.phi + (TAU * (k * m + j)) / n;\n      M.push([d * cos(t), d * sin(t), r]);\n    }\n  const O = invC(0, 0, 1), sc = RPX / O[2];\n  const C0 = S.C[0], C1 = S.C[1];\n  for (let i = 0; i \u003c M.length; i++) {\n    const [x, y, rr] = M[i], [X, Y, R] = invC(x, y, rr);\n    C0[3 * i] = CX + RPX * x;\n    C0[3 * i + 1] = CY[0] + RPX * y;\n    C0[3 * i + 2] = RPX * rr;\n    C1[3 * i] = CX + sc * (X - O[0]);\n    C1[3 * i + 1] = CY[1] + sc * (Y - O[1]);\n    C1[3 * i + 2] = sc * R;\n  }\n  // The touches: each circle with the outer and the inner, and each with\n  // the next in its sub-chain, the last with the first.\n  let nt = 0;\n  const T0 = S.T[0], T1 = S.T[1], tri = [];\n  const put = (x, y, a, b) => {\n    const [X, Y] = inv(x, y);\n    T0[2 * nt] = CX + RPX * x;\n    T0[2 * nt + 1] = CY[0] + RPX * y;\n    T1[2 * nt] = CX + sc * (X - O[0]);\n    T1[2 * nt + 1] = CY[1] + sc * (Y - O[1]);\n    tri.push([a, b]);\n    nt++;\n  };\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const i = 2 + j * len + k, nx = 2 + j * len + ((k + 1) % len);\n      const [x, y] = M[i], [x2, y2] = M[nx], ux = x / d, uy = y / d;\n      put(ux, uy, i, 0);\n      put(rho * ux, rho * uy, i, 1);\n      put((x + x2) / 2, (y + y2) / 2, i, nx);\n    }\n  S.nt = nt;\n  S.tri = tri;\n  S.model = M;\n  S.rho = rho;\n  S.a = a;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [6, 2, 1, 0.06], dd = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[0], 6, 12)), rate = cl(k[1], 0.2, 3) / 2;\n  const m = max(1, min(round(cl(k[2], 1, 4)), floor((n - 1) / 2)));\n  S.q = 3 * 8 ** cl(k[3], 0, 1);\n  if (n !== S.n || m !== S.m) {\n    S.n = n;\n    S.m = m;\n    S.flash = [];\n  }\n  if (!S.begun) {\n    S.begun = true;\n    S.lay = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lay = 0;\n    S.flash = [];\n  }\n  const wasLaid = S.lay >= LAY;\n  S.lay += dd * rate;\n  S.phi += (dd * rate * TAU) / TURN;\n  if (!wasLaid && S.lay >= LAY) S.flash.push(0);\n  for (let i = 0; i \u003c S.flash.length; i++) S.flash[i] += dd * rate;\n  S.flash = S.flash.filter((f) => f \u003c 0.8);\n  geometry(S);\n}\n\n// How far circle i is laid, 0..1: they go down one after another.\nfunction shown(S, i) {\n  if (i \u003c 2) return 1;\n  return cl(((S.lay / LAY) * S.n - (i - 2)) * 1.5, 0, 1);\n}\n\n// Orange and yellow go brown and olive dimmed, so their discs are lit\n// brighter inside and paler.\nconst warm = (h) => {\n  const u = (h - floor(h) - 0.13) / 0.14;\n  return u * u \u003c 1 ? (1 - u * u) ** 2 : 0;\n};\n\nfunction disc(A, x0, y0, r, w, c, f, lift, lo, hi) {\n  const ext = r + 2, rr = max(r, 0.35);\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, D = sqrt(dx * dx + dy * dy);\n      if (D > ext) continue;\n      const u = min(1, D / rr), fill = cl(rr - D + 0.5, 0, 1), e = (D - rr) / 0.7;\n      // A soft lit disc: dim in the middle, rising toward a bright rim, a\n      // glow on the upper left where the light comes from.\n      const hx = dx + 0.42 * rr, hy = dy + 0.42 * rr, glow = exp(-(hx * hx + hy * hy) / (0.22 * rr * rr + 0.6));\n      const vf = w * fill * (0.2 + 0.28 * u * u + 0.32 * glow) * lift;\n      let v = 0.85 * exp(-e * e);\n      if (r \u003c 1.5) v += (1.5 - r) * 0.5 * fill;\n      v *= w;\n      // Screen blend, so where wound chains overlap the lenses show without\n      // washing out to white.\n      const p = 3 * (y * W + x);\n      A[p] = 1 - (1 - A[p]) * (1 - min(1, c[0] * v + f[0] * vf));\n      A[p + 1] = 1 - (1 - A[p + 1]) * (1 - min(1, c[1] * v + f[1] * vf));\n      A[p + 2] = 1 - (1 - A[p + 2]) * (1 - min(1, c[2] * v + f[2] * vf));\n    }\n  }\n}\n\nfunction ring(A, x0, y0, r, lv, lo, hi) {\n  const ext = r + 2;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, e = (sqrt(dx * dx + dy * dy) - r) / 0.6;\n      if (e > 4 || e \u003c -4) continue;\n      const v = lv * exp(-e * e), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nfunction dot(A, x0, y0, s, lv, lo, hi) {\n  const ext = 3 * s;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, v = lv * exp(-(dx * dx + dy * dy) / (2 * s * s)), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { A, col, fil, n } = S;\n  A.fill(0);\n  for (let sq = 0; sq \u003c 2; sq++) {\n    const C = S.C[sq], T = S.T[sq], lo = sq * 64, hi = lo + 63;\n    ring(A, C[0], C[1], C[2], 0.5, lo, hi);\n    ring(A, C[3], C[4], C[5], 0.5, lo, hi);\n    for (let i = 2; i \u003c n + 2; i++) {\n      const w = shown(S, i);\n      if (w \u003c= 0) continue;\n      const h = H0 + (i - 2) / n, wm = warm(h);\n      hsv(h, 0.8, 1, col);\n      hsv(h, 0.74 - 0.3 * wm, 1, fil);\n      // A wound chain stacks its discs Turns deep, so each is filled fainter.\n      disc(A, C[3 * i], C[3 * i + 1], C[3 * i + 2], w, col, fil, (1 + 0.9 * wm) * S.m ** -0.7, lo, hi);\n    }\n    // Every touch, lit once both its circles are laid; small ones smaller.\n    for (let t = 0; t \u003c S.nt; t++) {\n      const [a, b] = S.tri[t], w = min(shown(S, a), shown(S, b));\n      if (w \u003c 1) continue;\n      const rr = min(C[3 * a + 2], b > 1 ? C[3 * b + 2] : 99);\n      dot(A, T[2 * t], T[2 * t + 1], cl(0.25 * rr, 0.45, 0.8), 0.75 / S.m, lo, hi);\n    }\n    // The closing: the touch between the last circle laid and the first.\n    for (const f of S.flash) {\n      const len = n / gcd(n, S.m), i = 2 + len - 1, t = 3 * (i - 2) + 2, e = 1 - f / 0.8;\n      dot(A, T[2 * t], T[2 * t + 1], 1.4 + 2.5 * f, 1.6 * e * e, lo, hi);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = 3 * (y * W + x);\n      display.setPixel(x, y, round(255 * min(1, A[p])), round(255 * min(1, A[p + 1])), round(255 * min(1, A[p + 2])));\n    }\n}\n","layer":{"id":"layer-steiner-chain","type":"code","name":"steiner-chain","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Steiner Chain\n// Family:  geometry\n// Idea:    A ring of circles each touching its two neighbours and the two circles that hold it turns in the top square, rigid and equal, while the bottom square shows the same ring inverted in a point outside it, the circles swelling as they pass the wide side and shrinking through the narrow one, each in its own colour in both squares and every touch lit, so wherever the chain starts it always closes.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Steiner's porism (Jakob Steiner, 1826), shown through circle inversion, pattern round 39\n// Round:   39\n// ===============================\n// @matrix 64x128\n// @knobs Circles=6..12, Speed=0.2..3, Turns=1..4, Offset=0..1\n//\n// Knob 1: Circles. How many circles the chain holds, 6 to 12, each in its own colour, hues spaced evenly round the wheel. At 6 the inner circle is a third of the outer one across and the chain circles are 10 LEDs in radius in the top square; at 12 the inner circle is 0.59 of the outer and the circles are beads 6.2 LEDs in radius.\n// Knob 2: Speed. At 2 the chain turns once in 30 seconds, and a fresh start lays it circle by circle in 1.5 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Turns. How many times the chain winds round before it closes, 1 to 4, at most (Circles - 1) / 2. Neighbours then stand 360 times Turns over Circles degrees apart, sin(180 Turns / Circles) = (1 - inner) / (1 + inner) fixes the inner circle, and the circles overlap in a rosette round it: 7 circles at 2 turns leave it 0.12 of the outer one across, at 3 turns 0.013. Where Turns and Circles share a factor the circles fall into that many chains, each closed: 6 circles at 2 turns are two chains of 3.\n// Knob 4: Offset. How near the chain the point of the inversion sits, and with it how far off-centre the inner circle of the bottom square stands: 12 LEDs above the centre at the start, where a circle passing the wide side at the bottom is 3.4 times as wide as one passing the narrow side; 3 times at 0, and 24 times at 1, where the inner circle stands 25 LEDs up, nearly touching the outer one, and the circles squeezing past it are beads 2 LEDs across.\n// Buttons: K1 tap lays the chain again from where it stands, one circle at a time, and the last one closes the gap with a flash.\n\nconst W = 64, H = 128;\nconst { floor, min, max, sqrt, sin, cos, exp, round, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Each square's centre and the outer circle's radius, in LEDs; pixel centres at x + 0.5.\nconst CX = 32, CY = [32, 96], RPX = 30.4;\n// The inversion point lies on this ray from the centre of the concentric\n// picture, above it. A point near the inversion point images far away, so\n// the wide side of the bottom square is at the bottom.\nconst PSI = -PI / 2;\n// Seconds per turn of the chain at Speed 2, and to lay it.\nconst TURN = 30, LAY = 1.5;\n// Opening hue of circle 0.\nconst H0 = 0.55;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\nconst gcd = (a, b) => (b ? gcd(b, a % b) : a);\n\nexport function setup(params) {\n  params.s = {\n    n: 6, m: 1, q: 3.4, phi: 0, lay: 0, flash: [], begun: false,\n    // Per square: circles as x, y, r (the outer, the inner, then the chain in\n    // the order it is laid); each touch as its point x, y and the pair of\n    // circles that meet there.\n    C: [new Float64Array(3 * 14), new Float64Array(3 * 14)],\n    T: [new Float64Array(2 * 40), new Float64Array(2 * 40)], nt: 0, tri: [],\n    A: new Float32Array(3 * W * H), col: [0, 0, 0], fil: [0, 0, 0],\n  };\n}\n\n// The inversion point's distance a > 1 from the centre, in units of the\n// outer radius, at which a chain circle passing the near side images q times\n// as wide as one passing the far side: the gaps between the two circles on\n// the line through the point image to (1 - rho) / ((a - 1)(a - rho)) and\n// (1 - rho) / ((a + 1)(a + rho)), and their ratio is q.\nfunction dist(q, rho) {\n  const A = q - 1, B = (q + 1) * (1 + rho), C = (q - 1) * rho;\n  return (B + sqrt(B * B - 4 * A * C)) / (2 * A);\n}\n\n// The chain at start angle phi: circle i of sub-chain j, step k, centred on\n// the ring at angle phi + 2 pi (k m + j) / n. Square 0 is the concentric\n// picture; square 1 its image in the unit circle about the point a, scaled\n// so the outer circle's image is RPX across and centred.\nfunction geometry(S) {\n  const { n, m } = S, s = sin((PI * m) / n), rho = (1 - s) / (1 + s), r = (1 - rho) / 2, d = (1 + rho) / 2;\n  const g = gcd(n, m), len = n / g, a = dist(S.q, rho), ax = a * cos(PSI), ay = a * sin(PSI);\n  const inv = (x, y) => {\n    const u = x - ax, v = y - ay, k = 1 / (u * u + v * v);\n    return [ax + u * k, ay + v * k];\n  };\n  const invC = (x, y, rr) => {\n    const u = x - ax, v = y - ay, D = u * u + v * v - rr * rr;\n    return [ax + u / D, ay + v / D, rr / Math.abs(D)];\n  };\n  // Model circles: 0 the outer, 1 the inner, then the chain.\n  const M = [[0, 0, 1], [0, 0, rho]];\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const t = S.phi + (TAU * (k * m + j)) / n;\n      M.push([d * cos(t), d * sin(t), r]);\n    }\n  const O = invC(0, 0, 1), sc = RPX / O[2];\n  const C0 = S.C[0], C1 = S.C[1];\n  for (let i = 0; i \u003c M.length; i++) {\n    const [x, y, rr] = M[i], [X, Y, R] = invC(x, y, rr);\n    C0[3 * i] = CX + RPX * x;\n    C0[3 * i + 1] = CY[0] + RPX * y;\n    C0[3 * i + 2] = RPX * rr;\n    C1[3 * i] = CX + sc * (X - O[0]);\n    C1[3 * i + 1] = CY[1] + sc * (Y - O[1]);\n    C1[3 * i + 2] = sc * R;\n  }\n  // The touches: each circle with the outer and the inner, and each with\n  // the next in its sub-chain, the last with the first.\n  let nt = 0;\n  const T0 = S.T[0], T1 = S.T[1], tri = [];\n  const put = (x, y, a, b) => {\n    const [X, Y] = inv(x, y);\n    T0[2 * nt] = CX + RPX * x;\n    T0[2 * nt + 1] = CY[0] + RPX * y;\n    T1[2 * nt] = CX + sc * (X - O[0]);\n    T1[2 * nt + 1] = CY[1] + sc * (Y - O[1]);\n    tri.push([a, b]);\n    nt++;\n  };\n  for (let j = 0; j \u003c g; j++)\n    for (let k = 0; k \u003c len; k++) {\n      const i = 2 + j * len + k, nx = 2 + j * len + ((k + 1) % len);\n      const [x, y] = M[i], [x2, y2] = M[nx], ux = x / d, uy = y / d;\n      put(ux, uy, i, 0);\n      put(rho * ux, rho * uy, i, 1);\n      put((x + x2) / 2, (y + y2) / 2, i, nx);\n    }\n  S.nt = nt;\n  S.tri = tri;\n  S.model = M;\n  S.rho = rho;\n  S.a = a;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [6, 2, 1, 0.06], dd = cl(dt || 0, 0, 0.1);\n  const n = round(cl(k[0], 6, 12)), rate = cl(k[1], 0.2, 3) / 2;\n  const m = max(1, min(round(cl(k[2], 1, 4)), floor((n - 1) / 2)));\n  S.q = 3 * 8 ** cl(k[3], 0, 1);\n  if (n !== S.n || m !== S.m) {\n    S.n = n;\n    S.m = m;\n    S.flash = [];\n  }\n  if (!S.begun) {\n    S.begun = true;\n    S.lay = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    S.lay = 0;\n    S.flash = [];\n  }\n  const wasLaid = S.lay >= LAY;\n  S.lay += dd * rate;\n  S.phi += (dd * rate * TAU) / TURN;\n  if (!wasLaid && S.lay >= LAY) S.flash.push(0);\n  for (let i = 0; i \u003c S.flash.length; i++) S.flash[i] += dd * rate;\n  S.flash = S.flash.filter((f) => f \u003c 0.8);\n  geometry(S);\n}\n\n// How far circle i is laid, 0..1: they go down one after another.\nfunction shown(S, i) {\n  if (i \u003c 2) return 1;\n  return cl(((S.lay / LAY) * S.n - (i - 2)) * 1.5, 0, 1);\n}\n\n// Orange and yellow go brown and olive dimmed, so their discs are lit\n// brighter inside and paler.\nconst warm = (h) => {\n  const u = (h - floor(h) - 0.13) / 0.14;\n  return u * u \u003c 1 ? (1 - u * u) ** 2 : 0;\n};\n\nfunction disc(A, x0, y0, r, w, c, f, lift, lo, hi) {\n  const ext = r + 2, rr = max(r, 0.35);\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, D = sqrt(dx * dx + dy * dy);\n      if (D > ext) continue;\n      const u = min(1, D / rr), fill = cl(rr - D + 0.5, 0, 1), e = (D - rr) / 0.7;\n      // A soft lit disc: dim in the middle, rising toward a bright rim, a\n      // glow on the upper left where the light comes from.\n      const hx = dx + 0.42 * rr, hy = dy + 0.42 * rr, glow = exp(-(hx * hx + hy * hy) / (0.22 * rr * rr + 0.6));\n      const vf = w * fill * (0.2 + 0.28 * u * u + 0.32 * glow) * lift;\n      let v = 0.85 * exp(-e * e);\n      if (r \u003c 1.5) v += (1.5 - r) * 0.5 * fill;\n      v *= w;\n      // Screen blend, so where wound chains overlap the lenses show without\n      // washing out to white.\n      const p = 3 * (y * W + x);\n      A[p] = 1 - (1 - A[p]) * (1 - min(1, c[0] * v + f[0] * vf));\n      A[p + 1] = 1 - (1 - A[p + 1]) * (1 - min(1, c[1] * v + f[1] * vf));\n      A[p + 2] = 1 - (1 - A[p + 2]) * (1 - min(1, c[2] * v + f[2] * vf));\n    }\n  }\n}\n\nfunction ring(A, x0, y0, r, lv, lo, hi) {\n  const ext = r + 2;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, e = (sqrt(dx * dx + dy * dy) - r) / 0.6;\n      if (e > 4 || e \u003c -4) continue;\n      const v = lv * exp(-e * e), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nfunction dot(A, x0, y0, s, lv, lo, hi) {\n  const ext = 3 * s;\n  for (let y = max(lo, floor(y0 - ext)); y \u003c= min(hi, floor(y0 + ext)); y++) {\n    const dy = y + 0.5 - y0;\n    for (let x = max(0, floor(x0 - ext)); x \u003c= min(W - 1, floor(x0 + ext)); x++) {\n      const dx = x + 0.5 - x0, v = lv * exp(-(dx * dx + dy * dy) / (2 * s * s)), p = 3 * (y * W + x);\n      A[p] += v;\n      A[p + 1] += v;\n      A[p + 2] += v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.begun) return;\n  const { A, col, fil, n } = S;\n  A.fill(0);\n  for (let sq = 0; sq \u003c 2; sq++) {\n    const C = S.C[sq], T = S.T[sq], lo = sq * 64, hi = lo + 63;\n    ring(A, C[0], C[1], C[2], 0.5, lo, hi);\n    ring(A, C[3], C[4], C[5], 0.5, lo, hi);\n    for (let i = 2; i \u003c n + 2; i++) {\n      const w = shown(S, i);\n      if (w \u003c= 0) continue;\n      const h = H0 + (i - 2) / n, wm = warm(h);\n      hsv(h, 0.8, 1, col);\n      hsv(h, 0.74 - 0.3 * wm, 1, fil);\n      // A wound chain stacks its discs Turns deep, so each is filled fainter.\n      disc(A, C[3 * i], C[3 * i + 1], C[3 * i + 2], w, col, fil, (1 + 0.9 * wm) * S.m ** -0.7, lo, hi);\n    }\n    // Every touch, lit once both its circles are laid; small ones smaller.\n    for (let t = 0; t \u003c S.nt; t++) {\n      const [a, b] = S.tri[t], w = min(shown(S, a), shown(S, b));\n      if (w \u003c 1) continue;\n      const rr = min(C[3 * a + 2], b > 1 ? C[3 * b + 2] : 99);\n      dot(A, T[2 * t], T[2 * t + 1], cl(0.25 * rr, 0.45, 0.8), 0.75 / S.m, lo, hi);\n    }\n    // The closing: the touch between the last circle laid and the first.\n    for (const f of S.flash) {\n      const len = n / gcd(n, S.m), i = 2 + len - 1, t = 3 * (i - 2) + 2, e = 1 - f / 0.8;\n      dot(A, T[2 * t], T[2 * t + 1], 1.4 + 2.5 * f, 1.6 * e * e, lo, hi);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = 3 * (y * W + x);\n      display.setPixel(x, y, round(255 * min(1, A[p])), round(255 * min(1, A[p + 1])), round(255 * min(1, A[p + 2])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Circles=6..12, Speed=0.2..3, Turns=1..4, Offset=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Circles","min":6,"max":12,"about":"How many circles the chain holds, 6 to 12, each in its own colour, hues spaced evenly round the wheel. At 6 the inner circle is a third of the outer one across and the chain circles are 10 LEDs in radius in the top square; at 12 the inner circle is 0.59 of the outer and the circles are beads 6.2 LEDs in radius."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the chain turns once in 30 seconds, and a fresh start lays it circle by circle in 1.5 seconds; at 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Turns","min":1,"max":4,"about":"How many times the chain winds round before it closes, 1 to 4, at most (Circles - 1) / 2. Neighbours then stand 360 times Turns over Circles degrees apart, sin(180 Turns / Circles) = (1 - inner) / (1 + inner) fixes the inner circle, and the circles overlap in a rosette round it: 7 circles at 2 turns leave it 0.12 of the outer one across, at 3 turns 0.013. Where Turns and Circles share a factor the circles fall into that many chains, each closed: 6 circles at 2 turns are two chains of 3."},{"name":"Offset","min":0,"max":1,"about":"How near the chain the point of the inversion sits, and with it how far off-centre the inner circle of the bottom square stands: 12 LEDs above the centre at the start, where a circle passing the wide side at the bottom is 3.4 times as wide as one passing the narrow side; 3 times at 0, and 24 times at 1, where the inner circle stands 25 LEDs up, nearly touching the outer one, and the circles squeezing past it are beads 2 LEDs across."}],"start":[6,2,1,0.06],"measures":{"motion":0.3441,"detail":0.0929,"edges":0.4245,"complexity":1.7706,"coverage":0.6096,"colour":0.2864,"drift":0.1304},"knobResponse":[0.1921,0.201,0.172,0.0934]},{"slug":"sugar-scrub","title":"Sugar Scrub","family":"cosmetic","round":32,"note":"장밋빛 오일 밤 위에 설탕 결정 칠백 알쯤이 떠 있고, 보이지 않는 손끝이 지름 26 LED 원을 그리며 지나간 자리에 분홍빛 광택 고리가 남아요. 손끝에 끌린 알갱이는 구르며 하얀 십자로 반짝이고 녹아 작아져요. 10초마다 새 한 숟갈이 더미로 얹혔다가 다음 원에 쓸려 퍼져요.","idea":"Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.","buttons":"K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.","code":"// ===== Patternflow pattern =====\n// Title:   Sugar Scrub\n// Family:  cosmetic\n// Idea:    Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the sugar body scrub\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1\n//\n// Knob 1: Hue. The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid.\n// Knob 2: Speed. At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2.\n// Knob 3: Grain. The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm.\n// Knob 4: Oil. How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1.\n// Buttons: K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.\n\nconst W = 64, H = 128, N = W * H, MAXG = 3200;\nconst { floor, sqrt, exp, sin, cos, min, max, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Smooth value noise with a lattice cell LEDs wide, for the balm's relief.\nfunction valueNoise(cell) {\n  const gw = floor(W / cell) + 2, gh = floor(H / cell) + 2, g = new Float32Array(gw * gh), out = new Float32Array(N);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      (tx = tx * tx * (3 - 2 * tx)), (ty = ty * ty * (3 - 2 * ty));\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n    }\n  return out;\n}\n\nexport function setup(params) {\n  const n1 = valueNoise(9), n2 = valueNoise(3.5), N0 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) N0[i] = 0.65 * n1[i] + 0.35 * n2[i];\n  params.s = {\n    t: 0, hue: NaN, speed: 2, grain: 0, oil: 0.53,\n    S: Float32Array.from(N0), S2: new Float32Array(N), N0, G: new Float32Array(N), G2: new Float32Array(N),\n    gx: new Float32Array(MAXG), gy: new Float32Array(MAXG), vx: new Float32Array(MAXG), vy: new Float32Array(MAXG),\n    gs: new Float32Array(MAXG), ph: new Float32Array(MAXG), tx: new Float32Array(MAXG), ty: new Float32Array(MAXG), fall: new Uint8Array(MAXG), tint: new Float32Array(MAXG),\n    n: 0, filled: false, spoon: 3, goal: 0, queue: 0, fx: 0, fy: 0, fvx: 0, fvy: 0,\n    col: new Float32Array(12), img: new Float32Array(N * 3),\n  };\n}\n\n// The fingertip: circles of radius 13 at 0.7 rad a unit of time, round a\n// centre that wanders up and down most of the panel.\nfunction finger(t) {\n  const a = 0.7 * t, cx = 32 + 6 * sin(0.11 * t), cy = 64 + 36 * sin(0.09 * t - 2.6), r = 13 + 2 * sin(0.23 * t);\n  return [cx + r * cos(a), cy + r * sin(a)];\n}\n\nconst meanR = (P) => 0.95 + 0.55 * P.grain;\nconst target = (P) => {\n  const o = P.oil, cov = 0.72 * (1 - o) ** 1.6 + 0.03, r = meanR(P);\n  return min(MAXG, floor((cov * N) / (PI * r * r)));\n};\n\nfunction addGrain(P, x, y, cx, cy) {\n  if (P.n >= MAXG) return;\n  // A grain keeps its size as a share of the mean, so Grain resizes every\n  // grain on the panel at once.\n  const i = P.n++;\n  P.gs[i] = 0.55 + 0.9 * random();\n  P.ph[i] = random() * 2 * PI;\n  P.tint[i] = random();\n  (P.vx[i] = 0), (P.vy[i] = 0);\n  if (cx !== undefined) {\n    // Part of a spoonful: it starts in the heap's tight middle and is thrown\n    // out to where it lands.\n    (P.gx[i] = cx + (x - cx) * 0.25), (P.gy[i] = cy + (y - cy) * 0.25);\n    (P.tx[i] = x), (P.ty[i] = y), (P.fall[i] = 1);\n  } else (P.gx[i] = x), (P.gy[i] = y), (P.fall[i] = 0);\n}\n\nfunction kill(P, i) {\n  const j = --P.n;\n  for (const a of [P.gx, P.gy, P.vx, P.vy, P.gs, P.ph, P.tx, P.ty, P.fall, P.tint]) a[i] = a[j];\n}\n\n// A spoonful lands on the emptiest of five spots that are well clear of the\n// fingertip: a round heap 26 LEDs across, densest in the middle.\nfunction spoonful(P) {\n  let best = -Infinity, bx = 32, by = 30;\n  for (let c = 0; c \u003c 5; c++) {\n    const x = 14 + random() * 36, y = 14 + random() * (H - 28);\n    if (Math.hypot(x - P.fx, y - P.fy) \u003c 30) continue;\n    let near = 0;\n    for (let i = 0; i \u003c P.n; i += 3) if (abs(P.gx[i] - x) \u003c 12 && abs(P.gy[i] - y) \u003c 12) near++;\n    const score = -near + random();\n    if (score > best) (best = score), (bx = x), (by = y);\n  }\n  const m = floor(target(P) * 0.22) + 60;\n  for (let k = 0; k \u003c m; k++) {\n    const a = random() * 2 * PI, rr = random() ** 0.75;\n    addGrain(P, cl(bx + cos(a) * rr * 13, 0, W - 1), cl(by + sin(a) * rr * 13, 0, H - 1), bx, by);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.grain = cl(k[2], -1, 1);\n  P.oil = (cl(k[3], -1, 1) + 1) / 2;\n  // A turn of Grain or Oil changes how many grains the balm should hold:\n  // the difference is sprinkled on or melted away, 60 grains a frame.\n  const goal = target(P);\n  if (P.filled && goal !== P.goal) (P.queue += goal - P.goal), (P.goal = goal);\n  if (P.queue > 0) {\n    const m = min(60, P.queue);\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    P.queue -= m;\n  } else if (P.queue \u003c 0) {\n    const m = min(60, -P.queue, P.n);\n    for (let i = 0; i \u003c m; i++) kill(P, floor(random() * P.n));\n    P.queue += m;\n  }\n  if (!P.filled) {\n    // The jar has been in use a while: twelve seconds of rubbing at Speed 2\n    // run before the first frame, so the panel opens on swirled tracks, a\n    // heap or two and ridges of pushed grains, with the next spoonful due\n    // in three seconds.\n    const m = (P.goal = target(P));\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    for (let i = 0; i \u003c 120; i++) step(P, 0.1, 2, false);\n    P.filled = true;\n    P.spoon = 3;\n  }\n  step(P, d, P.speed, input.btnPressed && input.btnPressed[0]);\n}\n\nfunction step(P, d, sp, press) {\n  P.t += d * sp;\n  const [fx, fy] = finger(P.t), [px, py] = finger(P.t - 0.05);\n  (P.fx = fx), (P.fy = fy), (P.fvx = ((fx - px) / 0.05) * sp), (P.fvy = ((fy - py) / 0.05) * sp);\n  if (press) spoonful(P);\n  P.spoon -= d * sp * 0.5;\n  if (P.spoon \u003c= 0 || P.n \u003c target(P) * 0.35) (P.spoon = 10), spoonful(P);\n\n  // The oil the fingertip drags: its own velocity under the pad, falling off\n  // over 5 LEDs, and a push out from under it.\n  const sig2 = 2 * 5 * 5, oil = P.oil;\n  const vel = (x, y, out) => {\n    const dx = x - fx, dy = y - fy, r2 = dx * dx + dy * dy;\n    if (r2 > 400) return (out[0] = 0), (out[1] = 0), 0;\n    const e = exp(-r2 / sig2), r = sqrt(r2) + 0.5, push = 1.5 * sp * e;\n    out[0] = P.fvx * e * 0.8 + (push * dx) / r;\n    out[1] = P.fvy * e * 0.8 + (push * dy) / r;\n    return e;\n  };\n  const v = [0, 0];\n\n  // Grains trail the oil and roll; under the pad they melt.\n  const melt = 0.05 + 0.32 * oil, mr = meanR(P);\n  for (let i = 0; i \u003c P.n; i++) {\n    if (P.fall[i]) {\n      const u = min(1, d * 9);\n      P.gx[i] += (P.tx[i] - P.gx[i]) * u;\n      P.gy[i] += (P.ty[i] - P.gy[i]) * u;\n      if (abs(P.tx[i] - P.gx[i]) + abs(P.ty[i] - P.gy[i]) \u003c 0.1) P.fall[i] = 0;\n      P.ph[i] += d * 6;\n      continue;\n    }\n    const e = vel(P.gx[i], P.gy[i], v), lag = min(1, d * 7);\n    // Grains in the flow knock into each other and scatter a little.\n    const jit = e > 0.1 ? 14 * e * sp * d : 0;\n    P.vx[i] += (v[0] - P.vx[i]) * lag + jit * (random() - 0.5) * 4;\n    P.vy[i] += (v[1] - P.vy[i]) * lag + jit * (random() - 0.5) * 4;\n    P.gx[i] = cl(P.gx[i] + P.vx[i] * d, 0, W - 0.01);\n    P.gy[i] = cl(P.gy[i] + P.vy[i] * d, 0, H - 0.01);\n    const s = abs(P.vx[i]) + abs(P.vy[i]);\n    P.ph[i] += d * (0.35 * sp + (s * 1.3) / (P.gs[i] * mr));\n    if (e > 0.05) P.gs[i] -= (d * melt * e) / mr;\n    if (P.gs[i] \u003c 0.35) kill(P, i--);\n  }\n\n  // The balm: its texture is carried by the same flow and slowly settles\n  // back; the gloss is laid down under the pad, spreads and dries.\n  const S = P.S, S2 = P.S2, G = P.G, G2 = P.G2, N0 = P.N0;\n  const back = d * 0.04, dry = d * (0.12 - 0.08 * oil), lay = d * 1.6, spread = min(0.24, 1.5 * d);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, e = vel(x, y, v);\n      let s = S[i];\n      if (e > 0.002) {\n        const sx = cl(x - v[0] * d, 0, W - 1.001), sy = cl(y - v[1] * d, 0, H - 1.001), ix = sx | 0, iy = sy | 0, tx = sx - ix, ty = sy - iy, j = iy * W + ix;\n        s = S[j] * (1 - tx) * (1 - ty) + S[j + 1] * tx * (1 - ty) + S[j + W] * (1 - tx) * ty + S[j + W + 1] * tx * ty;\n      }\n      S2[i] = s + (N0[i] - s) * back;\n      const l = x > 0 ? G[i - 1] : G[i], r = x \u003c W - 1 ? G[i + 1] : G[i], u = y > 0 ? G[i - W] : G[i], b = y \u003c H - 1 ? G[i + W] : G[i];\n      G2[i] = min(1, G[i] + (l + r + u + b - 4 * G[i]) * spread - G[i] * dry + lay * e);\n    }\n  (P.S = S2), (P.S2 = S), (P.G = G2), (P.G2 = G);\n}\n\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { S, G, img, col } = P, oil = P.oil, h = P.hue + 0.955, mr = meanR(P);\n  // Dry balm, wet oil, the crystal body and the sheen.\n  hsv(h, 0.42, 0.84, col, 0);\n  hsv(h + 0.015, 0.74, 0.64, col, 3);\n  // The light comes from the upper left and swings slowly to and fro, so\n  // the sheen slides over the balm even where the fingertip is not.\n  const la = -2.2 + 0.5 * sin(P.t * 0.21), LX = 0.75 * cos(la), LY = 0.75 * sin(la), LZ = 0.66;\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  hsv(h - 0.02, 0.09, 1, col, 6);\n  hsv(h - 0.03, 0.1, 1, col, 9);\n  // More oil: a wetter, smoother balm.\n  const base = 0.2 + 0.55 * oil, sh = 3.2 * (1 - 0.65 * oil);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const wet = min(1, base + G[i]);\n      const hx = sh * ((x \u003c W - 1 ? S[i + 1] : S[i]) - (x > 0 ? S[i - 1] : S[i])) + 2 * ((x \u003c W - 1 ? G[i + 1] : G[i]) - (x > 0 ? G[i - 1] : G[i]));\n      const hy = sh * ((y \u003c H - 1 ? S[i + W] : S[i]) - (y > 0 ? S[i - W] : S[i])) + 2 * ((y \u003c H - 1 ? G[i + W] : G[i]) - (y > 0 ? G[i - W] : G[i]));\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), nx = -hx * nl, ny = -hy * nl, nz = nl;\n      const dif = 0.8 + 0.35 * (nx * LX + ny * LY + nz * LZ - 0.7);\n      // A sharp sheen on the balm's relief, and over the oil the fingertip\n      // laid down a broad film of light.\n      const nh = max(0, nx * HX + ny * HY + nz * HZ), spec = (nh ** 60 * 1.3 + nh ** 6 * 0.18) * wet + G[i] * (0.1 + 0.5 * nh ** 10);\n      const tex = 0.88 + 0.26 * (S[i] - 0.5);\n      for (let c = 0; c \u003c 3; c++) {\n        const b = (col[c] + (col[3 + c] - col[c]) * wet) * dif * tex;\n        img[i * 3 + c] = b + (col[9 + c] - b) * min(1, spec);\n      }\n    }\n  // The grains: a shadow down and right, a body lit from the upper left,\n  // and a flash when a facet turns to the light.\n  for (let k = 0; k \u003c P.n; k++) {\n    const gx = P.gx[k], gy = P.gy[k], r = P.gs[k] * mr, ph = P.ph[k];\n    const gl = max(0, cos(ph)) ** 24, x0 = floor(gx - r - 1), x1 = floor(gx + r + 1), y0 = floor(gy - r - 1), y1 = floor(gy + r + 1);\n    const wetHere = min(1, base + G[cl(floor(gy), 0, H - 1) * W + cl(floor(gx), 0, W - 1)]);\n    const op = 0.96 - 0.4 * wetHere, tv = 0.86 + 0.14 * P.tint[k];\n    for (let y = max(0, y0); y \u003c= min(H - 1, y1); y++)\n      for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n        const dx = x + 0.5 - gx, dy = y + 0.5 - gy, dd = sqrt(dx * dx + dy * dy), cov = cl(r + 0.6 - dd, 0, 1);\n        const i = (y * W + x) * 3;\n        const sdx = dx - 0.8, sdy = dy - 0.8, sc = cl(r + 0.5 - sqrt(sdx * sdx + sdy * sdy), 0, 1) * (1 - cov) * 0.16;\n        if (sc > 0) for (let c = 0; c \u003c 3; c++) img[i + c] *= 1 - sc;\n        if (cov \u003c= 0) continue;\n        const lit = (0.8 + 0.2 * cl(-(dx * 0.6 + dy * 0.8) / max(r, 0.6), -1, 1)) * tv;\n        const a = cov * op;\n        for (let c = 0; c \u003c 3; c++) img[i + c] += (col[6 + c] * lit - img[i + c]) * a;\n        if (gl > 0.02) {\n          const f = gl * cov * (dd \u003c 0.8 ? 1 : 0.55);\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * f;\n        }\n      }\n    // A bright flash throws a short cross.\n    if (gl > 0.7 && r > 0.6) {\n      const cx = floor(gx), cy = floor(gy), f = (gl - 0.7) * 2, arm = r > 1.1 ? 2 : 1;\n      for (let a = 1; a \u003c= arm; a++)\n        for (const [ox, oy] of [[a, 0], [-a, 0], [0, a], [0, -a]]) {\n          const x = cx + ox, y = cy + oy;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const i = (y * W + x) * 3, ff = f / a;\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * ff;\n        }\n    }\n  }\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, img[i * 3]), min(255, img[i * 3 + 1]), min(255, img[i * 3 + 2]));\n}\n","layer":{"id":"layer-sugar-scrub","type":"code","name":"sugar-scrub","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sugar Scrub\n// Family:  cosmetic\n// Idea:    Sugar crystals sit in a tinted oil balm over the whole panel while an unseen fingertip rubs slow circles through it: the grains it reaches roll along with it and flash when a facet turns to the light, the ones under it melt smaller, the oil it leaves behind spreads into a glossy film, and every ten seconds a fresh spoonful lands as a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 32, after the sugar body scrub\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1\n//\n// Knob 1: Hue. The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid.\n// Knob 2: Speed. At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2.\n// Knob 3: Grain. The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm.\n// Knob 4: Oil. How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1.\n// Buttons: K1 tap drops a fresh spoonful at once on the emptiest spot away from the fingertip.\n\nconst W = 64, H = 128, N = W * H, MAXG = 3200;\nconst { floor, sqrt, exp, sin, cos, min, max, abs, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\n// Smooth value noise with a lattice cell LEDs wide, for the balm's relief.\nfunction valueNoise(cell) {\n  const gw = floor(W / cell) + 2, gh = floor(H / cell) + 2, g = new Float32Array(gw * gh), out = new Float32Array(N);\n  for (let i = 0; i \u003c g.length; i++) g[i] = random();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / cell, fy = y / cell, ix = floor(fx), iy = floor(fy);\n      let tx = fx - ix, ty = fy - iy;\n      (tx = tx * tx * (3 - 2 * tx)), (ty = ty * ty * (3 - 2 * ty));\n      const a = g[iy * gw + ix], b = g[iy * gw + ix + 1], c = g[(iy + 1) * gw + ix], d = g[(iy + 1) * gw + ix + 1];\n      out[y * W + x] = a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n    }\n  return out;\n}\n\nexport function setup(params) {\n  const n1 = valueNoise(9), n2 = valueNoise(3.5), N0 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) N0[i] = 0.65 * n1[i] + 0.35 * n2[i];\n  params.s = {\n    t: 0, hue: NaN, speed: 2, grain: 0, oil: 0.53,\n    S: Float32Array.from(N0), S2: new Float32Array(N), N0, G: new Float32Array(N), G2: new Float32Array(N),\n    gx: new Float32Array(MAXG), gy: new Float32Array(MAXG), vx: new Float32Array(MAXG), vy: new Float32Array(MAXG),\n    gs: new Float32Array(MAXG), ph: new Float32Array(MAXG), tx: new Float32Array(MAXG), ty: new Float32Array(MAXG), fall: new Uint8Array(MAXG), tint: new Float32Array(MAXG),\n    n: 0, filled: false, spoon: 3, goal: 0, queue: 0, fx: 0, fy: 0, fvx: 0, fvy: 0,\n    col: new Float32Array(12), img: new Float32Array(N * 3),\n  };\n}\n\n// The fingertip: circles of radius 13 at 0.7 rad a unit of time, round a\n// centre that wanders up and down most of the panel.\nfunction finger(t) {\n  const a = 0.7 * t, cx = 32 + 6 * sin(0.11 * t), cy = 64 + 36 * sin(0.09 * t - 2.6), r = 13 + 2 * sin(0.23 * t);\n  return [cx + r * cos(a), cy + r * sin(a)];\n}\n\nconst meanR = (P) => 0.95 + 0.55 * P.grain;\nconst target = (P) => {\n  const o = P.oil, cov = 0.72 * (1 - o) ** 1.6 + 0.03, r = meanR(P);\n  return min(MAXG, floor((cov * N) / (PI * r * r)));\n};\n\nfunction addGrain(P, x, y, cx, cy) {\n  if (P.n >= MAXG) return;\n  // A grain keeps its size as a share of the mean, so Grain resizes every\n  // grain on the panel at once.\n  const i = P.n++;\n  P.gs[i] = 0.55 + 0.9 * random();\n  P.ph[i] = random() * 2 * PI;\n  P.tint[i] = random();\n  (P.vx[i] = 0), (P.vy[i] = 0);\n  if (cx !== undefined) {\n    // Part of a spoonful: it starts in the heap's tight middle and is thrown\n    // out to where it lands.\n    (P.gx[i] = cx + (x - cx) * 0.25), (P.gy[i] = cy + (y - cy) * 0.25);\n    (P.tx[i] = x), (P.ty[i] = y), (P.fall[i] = 1);\n  } else (P.gx[i] = x), (P.gy[i] = y), (P.fall[i] = 0);\n}\n\nfunction kill(P, i) {\n  const j = --P.n;\n  for (const a of [P.gx, P.gy, P.vx, P.vy, P.gs, P.ph, P.tx, P.ty, P.fall, P.tint]) a[i] = a[j];\n}\n\n// A spoonful lands on the emptiest of five spots that are well clear of the\n// fingertip: a round heap 26 LEDs across, densest in the middle.\nfunction spoonful(P) {\n  let best = -Infinity, bx = 32, by = 30;\n  for (let c = 0; c \u003c 5; c++) {\n    const x = 14 + random() * 36, y = 14 + random() * (H - 28);\n    if (Math.hypot(x - P.fx, y - P.fy) \u003c 30) continue;\n    let near = 0;\n    for (let i = 0; i \u003c P.n; i += 3) if (abs(P.gx[i] - x) \u003c 12 && abs(P.gy[i] - y) \u003c 12) near++;\n    const score = -near + random();\n    if (score > best) (best = score), (bx = x), (by = y);\n  }\n  const m = floor(target(P) * 0.22) + 60;\n  for (let k = 0; k \u003c m; k++) {\n    const a = random() * 2 * PI, rr = random() ** 0.75;\n    addGrain(P, cl(bx + cos(a) * rr * 13, 0, W - 1), cl(by + sin(a) * rr * 13, 0, H - 1), bx, by);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.grain = cl(k[2], -1, 1);\n  P.oil = (cl(k[3], -1, 1) + 1) / 2;\n  // A turn of Grain or Oil changes how many grains the balm should hold:\n  // the difference is sprinkled on or melted away, 60 grains a frame.\n  const goal = target(P);\n  if (P.filled && goal !== P.goal) (P.queue += goal - P.goal), (P.goal = goal);\n  if (P.queue > 0) {\n    const m = min(60, P.queue);\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    P.queue -= m;\n  } else if (P.queue \u003c 0) {\n    const m = min(60, -P.queue, P.n);\n    for (let i = 0; i \u003c m; i++) kill(P, floor(random() * P.n));\n    P.queue += m;\n  }\n  if (!P.filled) {\n    // The jar has been in use a while: twelve seconds of rubbing at Speed 2\n    // run before the first frame, so the panel opens on swirled tracks, a\n    // heap or two and ridges of pushed grains, with the next spoonful due\n    // in three seconds.\n    const m = (P.goal = target(P));\n    for (let i = 0; i \u003c m; i++) addGrain(P, random() * W, random() * H);\n    for (let i = 0; i \u003c 120; i++) step(P, 0.1, 2, false);\n    P.filled = true;\n    P.spoon = 3;\n  }\n  step(P, d, P.speed, input.btnPressed && input.btnPressed[0]);\n}\n\nfunction step(P, d, sp, press) {\n  P.t += d * sp;\n  const [fx, fy] = finger(P.t), [px, py] = finger(P.t - 0.05);\n  (P.fx = fx), (P.fy = fy), (P.fvx = ((fx - px) / 0.05) * sp), (P.fvy = ((fy - py) / 0.05) * sp);\n  if (press) spoonful(P);\n  P.spoon -= d * sp * 0.5;\n  if (P.spoon \u003c= 0 || P.n \u003c target(P) * 0.35) (P.spoon = 10), spoonful(P);\n\n  // The oil the fingertip drags: its own velocity under the pad, falling off\n  // over 5 LEDs, and a push out from under it.\n  const sig2 = 2 * 5 * 5, oil = P.oil;\n  const vel = (x, y, out) => {\n    const dx = x - fx, dy = y - fy, r2 = dx * dx + dy * dy;\n    if (r2 > 400) return (out[0] = 0), (out[1] = 0), 0;\n    const e = exp(-r2 / sig2), r = sqrt(r2) + 0.5, push = 1.5 * sp * e;\n    out[0] = P.fvx * e * 0.8 + (push * dx) / r;\n    out[1] = P.fvy * e * 0.8 + (push * dy) / r;\n    return e;\n  };\n  const v = [0, 0];\n\n  // Grains trail the oil and roll; under the pad they melt.\n  const melt = 0.05 + 0.32 * oil, mr = meanR(P);\n  for (let i = 0; i \u003c P.n; i++) {\n    if (P.fall[i]) {\n      const u = min(1, d * 9);\n      P.gx[i] += (P.tx[i] - P.gx[i]) * u;\n      P.gy[i] += (P.ty[i] - P.gy[i]) * u;\n      if (abs(P.tx[i] - P.gx[i]) + abs(P.ty[i] - P.gy[i]) \u003c 0.1) P.fall[i] = 0;\n      P.ph[i] += d * 6;\n      continue;\n    }\n    const e = vel(P.gx[i], P.gy[i], v), lag = min(1, d * 7);\n    // Grains in the flow knock into each other and scatter a little.\n    const jit = e > 0.1 ? 14 * e * sp * d : 0;\n    P.vx[i] += (v[0] - P.vx[i]) * lag + jit * (random() - 0.5) * 4;\n    P.vy[i] += (v[1] - P.vy[i]) * lag + jit * (random() - 0.5) * 4;\n    P.gx[i] = cl(P.gx[i] + P.vx[i] * d, 0, W - 0.01);\n    P.gy[i] = cl(P.gy[i] + P.vy[i] * d, 0, H - 0.01);\n    const s = abs(P.vx[i]) + abs(P.vy[i]);\n    P.ph[i] += d * (0.35 * sp + (s * 1.3) / (P.gs[i] * mr));\n    if (e > 0.05) P.gs[i] -= (d * melt * e) / mr;\n    if (P.gs[i] \u003c 0.35) kill(P, i--);\n  }\n\n  // The balm: its texture is carried by the same flow and slowly settles\n  // back; the gloss is laid down under the pad, spreads and dries.\n  const S = P.S, S2 = P.S2, G = P.G, G2 = P.G2, N0 = P.N0;\n  const back = d * 0.04, dry = d * (0.12 - 0.08 * oil), lay = d * 1.6, spread = min(0.24, 1.5 * d);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, e = vel(x, y, v);\n      let s = S[i];\n      if (e > 0.002) {\n        const sx = cl(x - v[0] * d, 0, W - 1.001), sy = cl(y - v[1] * d, 0, H - 1.001), ix = sx | 0, iy = sy | 0, tx = sx - ix, ty = sy - iy, j = iy * W + ix;\n        s = S[j] * (1 - tx) * (1 - ty) + S[j + 1] * tx * (1 - ty) + S[j + W] * (1 - tx) * ty + S[j + W + 1] * tx * ty;\n      }\n      S2[i] = s + (N0[i] - s) * back;\n      const l = x > 0 ? G[i - 1] : G[i], r = x \u003c W - 1 ? G[i + 1] : G[i], u = y > 0 ? G[i - W] : G[i], b = y \u003c H - 1 ? G[i + W] : G[i];\n      G2[i] = min(1, G[i] + (l + r + u + b - 4 * G[i]) * spread - G[i] * dry + lay * e);\n    }\n  (P.S = S2), (P.S2 = S), (P.G = G2), (P.G2 = G);\n}\n\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { S, G, img, col } = P, oil = P.oil, h = P.hue + 0.955, mr = meanR(P);\n  // Dry balm, wet oil, the crystal body and the sheen.\n  hsv(h, 0.42, 0.84, col, 0);\n  hsv(h + 0.015, 0.74, 0.64, col, 3);\n  // The light comes from the upper left and swings slowly to and fro, so\n  // the sheen slides over the balm even where the fingertip is not.\n  const la = -2.2 + 0.5 * sin(P.t * 0.21), LX = 0.75 * cos(la), LY = 0.75 * sin(la), LZ = 0.66;\n  const HL = sqrt(LX * LX + LY * LY + (LZ + 1) * (LZ + 1)), HX = LX / HL, HY = LY / HL, HZ = (LZ + 1) / HL;\n  hsv(h - 0.02, 0.09, 1, col, 6);\n  hsv(h - 0.03, 0.1, 1, col, 9);\n  // More oil: a wetter, smoother balm.\n  const base = 0.2 + 0.55 * oil, sh = 3.2 * (1 - 0.65 * oil);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const wet = min(1, base + G[i]);\n      const hx = sh * ((x \u003c W - 1 ? S[i + 1] : S[i]) - (x > 0 ? S[i - 1] : S[i])) + 2 * ((x \u003c W - 1 ? G[i + 1] : G[i]) - (x > 0 ? G[i - 1] : G[i]));\n      const hy = sh * ((y \u003c H - 1 ? S[i + W] : S[i]) - (y > 0 ? S[i - W] : S[i])) + 2 * ((y \u003c H - 1 ? G[i + W] : G[i]) - (y > 0 ? G[i - W] : G[i]));\n      const nl = 1 / sqrt(hx * hx + hy * hy + 1), nx = -hx * nl, ny = -hy * nl, nz = nl;\n      const dif = 0.8 + 0.35 * (nx * LX + ny * LY + nz * LZ - 0.7);\n      // A sharp sheen on the balm's relief, and over the oil the fingertip\n      // laid down a broad film of light.\n      const nh = max(0, nx * HX + ny * HY + nz * HZ), spec = (nh ** 60 * 1.3 + nh ** 6 * 0.18) * wet + G[i] * (0.1 + 0.5 * nh ** 10);\n      const tex = 0.88 + 0.26 * (S[i] - 0.5);\n      for (let c = 0; c \u003c 3; c++) {\n        const b = (col[c] + (col[3 + c] - col[c]) * wet) * dif * tex;\n        img[i * 3 + c] = b + (col[9 + c] - b) * min(1, spec);\n      }\n    }\n  // The grains: a shadow down and right, a body lit from the upper left,\n  // and a flash when a facet turns to the light.\n  for (let k = 0; k \u003c P.n; k++) {\n    const gx = P.gx[k], gy = P.gy[k], r = P.gs[k] * mr, ph = P.ph[k];\n    const gl = max(0, cos(ph)) ** 24, x0 = floor(gx - r - 1), x1 = floor(gx + r + 1), y0 = floor(gy - r - 1), y1 = floor(gy + r + 1);\n    const wetHere = min(1, base + G[cl(floor(gy), 0, H - 1) * W + cl(floor(gx), 0, W - 1)]);\n    const op = 0.96 - 0.4 * wetHere, tv = 0.86 + 0.14 * P.tint[k];\n    for (let y = max(0, y0); y \u003c= min(H - 1, y1); y++)\n      for (let x = max(0, x0); x \u003c= min(W - 1, x1); x++) {\n        const dx = x + 0.5 - gx, dy = y + 0.5 - gy, dd = sqrt(dx * dx + dy * dy), cov = cl(r + 0.6 - dd, 0, 1);\n        const i = (y * W + x) * 3;\n        const sdx = dx - 0.8, sdy = dy - 0.8, sc = cl(r + 0.5 - sqrt(sdx * sdx + sdy * sdy), 0, 1) * (1 - cov) * 0.16;\n        if (sc > 0) for (let c = 0; c \u003c 3; c++) img[i + c] *= 1 - sc;\n        if (cov \u003c= 0) continue;\n        const lit = (0.8 + 0.2 * cl(-(dx * 0.6 + dy * 0.8) / max(r, 0.6), -1, 1)) * tv;\n        const a = cov * op;\n        for (let c = 0; c \u003c 3; c++) img[i + c] += (col[6 + c] * lit - img[i + c]) * a;\n        if (gl > 0.02) {\n          const f = gl * cov * (dd \u003c 0.8 ? 1 : 0.55);\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * f;\n        }\n      }\n    // A bright flash throws a short cross.\n    if (gl > 0.7 && r > 0.6) {\n      const cx = floor(gx), cy = floor(gy), f = (gl - 0.7) * 2, arm = r > 1.1 ? 2 : 1;\n      for (let a = 1; a \u003c= arm; a++)\n        for (const [ox, oy] of [[a, 0], [-a, 0], [0, a], [0, -a]]) {\n          const x = cx + ox, y = cy + oy;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const i = (y * W + x) * 3, ff = f / a;\n          for (let c = 0; c \u003c 3; c++) img[i + c] += (255 - img[i + c]) * ff;\n        }\n    }\n  }\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, img[i * 3]), min(255, img[i * 3 + 1]), min(255, img[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Grain=-1..1, Oil=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the balm, once round the wheel; the crystals stay nearly white with a trace of it. At 0 rose, at 0.12 honey gold, at 0.3 matcha green, at 0.45 jade, at 0.7 periwinkle and at 0.85 orchid."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the fingertip goes round a circle 26 LEDs across every 4.5 seconds while the circle drifts up and down the panel every 35, the light over the balm swings to and fro every 15, and a spoonful lands every 10; at 0.2 all of it runs ten times slower, at 3 half as fast again. Grains the fingertip drags flash several times a second; resting ones about once in 9 seconds at 2."},{"name":"Grain","min":-1,"max":1,"about":"The size of the crystals, every one on the panel at once. At -1 caster sugar, single LEDs, a few thousand of them; at 0 about 2 LEDs across; at 1 coarse crystals 3 LEDs across whose flash throws a cross with arms two LEDs long. Their number changes so they cover the same share of the balm."},{"name":"Oil","min":-1,"max":1,"about":"How much oil there is. At -1 a dry heap: grains cover three quarters of the panel, the balm between them is matte and they melt slowly. At the start they cover a quarter and the balm is half wet; at 1 a few grains are left in a smooth glossy oil and melt seven times faster under the fingertip than at -1."}],"start":[0,2,0,0.06],"measures":{"motion":0.0841,"detail":0.0638,"edges":0.1575,"complexity":2.6755,"coverage":1,"colour":0.1376,"drift":0.0416},"knobResponse":[0.1741,0.077,0.0995,0.1983]},{"slug":"sunglint","title":"Sunglint","family":"ocean","round":20,"note":"절벽에서 해를 마주 보면 수평선 아래로 윤슬 길이 내려오며 넓어져 패널을 채우고, 밀려오는 잔물결 줄마다 반짝임이 실려요. K1 을 누르면 돛단배가 빛 속을 검은 그림자로 가로질러요.","idea":"From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.","buttons":"K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.","code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","layer":{"id":"layer-sunglint","type":"code","name":"sunglint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet."},{"name":"Chop","min":0,"max":1,"about":"How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider."},{"name":"Wind","min":-1,"max":1,"about":"Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.5376,"detail":0.3357,"edges":0.4835,"complexity":2.2983,"coverage":0.8569,"colour":0.0799,"drift":0.0378},"knobResponse":[0.1189,0.329,0.2477,0.3023]},{"slug":"swatch-row","title":"Swatch Row","family":"cosmetic","round":30,"note":"보이지 않는 손가락이 아이보리 카드에 크림 안료를 한 줄씩 끌어 색조표를 채워요. 줄마다 한 단계씩 밝거나 짙고, K1 하나로 어떤 색 라인으로든 바뀌어요.","idea":"A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.","buttons":"K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.","code":"// ===== Patternflow pattern =====\n// Title:   Swatch Row\n// Family:  cosmetic\n// Idea:    A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after the makeup artist's swatch\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1\n//\n// Knob 1: Hue. Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum.\n// Knob 2: Speed. At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4.\n// Knob 3: Range. How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it.\n// Knob 4: Finish. At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles.\n// Buttons: K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.\n\nconst W = 64, H = 128, SL = 16, ROWS = H / SL, NT = W * SL;\nconst { min, floor, sqrt, sin, exp, abs, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Rose sits at 0.955 of the wheel; K1 adds to it.\nconst ROSE = 0.955;\n\n// The card: warm ivory, 198/186/164 in the middle, 10% dimmer at the side\n// edges and 7% at the ends, with a fixed paper grain of about 1%.\nconst GR = new Float32Array(W * H * 3);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - 32) / 32, dy = (y + 0.5 - 64) / 64;\n    const v = 1 - 0.1 * dx * dx - 0.07 * dy * dy + 0.024 * (hash(x, y, 7) - 0.5), i = (y * W + x) * 3;\n    (GR[i] = 198 * v), (GR[i + 1] = 186 * v), (GR[i + 2] = 164 * v);\n  }\n\n// Smooth value noise over a table of random numbers.\nconst n1 = (T, f) => {\n  const i = cl(floor(f), 0, T.length - 2), t = cl(f - i, 0, 1);\n  return T[i] + (T[i + 1] - T[i]) * t * t * (3 - 2 * t);\n};\nconst n2 = (T, n, fx, fy) => {\n  const i = cl(floor(fx), 0, T.length / n - 2), t = cl(fx - i, 0, 1), s = t * t * (3 - 2 * t);\n  return mix(n1(T.subarray(i * n, i * n + n), fy), n1(T.subarray(i * n + n, i * n + 2 * n), fy), s);\n};\nconst table = (n) => Float32Array.from({ length: n }, () => random());\n\n// One swatch, baked once into fields over its 64x16 slot: how opaque the\n// pigment is (A), how light against its own shade (V), where across the\n// stroke the LED sits (Q, -1 at the top edge, 1 at the bottom), how much the\n// highlight catches there (G), how far the finger must have come before it\n// lays this LED (R), and a fixed number for the sparkle (K).\n//\n// The stroke lands with a round cap of radius r, runs straight with a little\n// waver, and from a fraction ut of its length on the pigment runs out: the\n// stroke narrows, goes sheer, and the drag streaks, which follow the stroke,\n// drop out one by one, the weakest first, until the last one ends at xe.\nfunction swatch(n) {\n  const s = {\n    n, jit: (random() - 0.5) * 0.05, seed: floor(random() * 1e6),\n    A: new Float32Array(NT), V: new Float32Array(NT), Q: new Float32Array(NT), G: new Float32Array(NT), R: new Float32Array(NT), K: new Float32Array(NT),\n    p: 0, go: false, wait: 0, xa: 0, xb: 0, prev: null, wipe: 1, wwait: 0,\n  };\n  const r = 5.3 + random() * 0.6, x0 = 2 + random() * 3.5, xe = 58 + random() * 6, ut = 0.4 + random() * 0.16;\n  const slope = (random() - 0.5) * 0.04, amp = 0.2 + random() * 0.35, fr = 0.05 + random() * 0.06, ph = random() * 2 * PI, xm = (x0 + xe) / 2;\n  const T1 = table(24), T2 = table(24 * 10), T3 = table(24 * 24), TE = table(20);\n  for (let j = 0; j \u003c SL; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, xc = x + 0.5;\n      const yc = 7.5 + slope * (xc - xm) + amp * sin(xc * fr + ph), q = j + 0.5 - yc, u = (xc - x0) / (xe - x0);\n      let hw;\n      if (xc \u003c x0 + r) {\n        const d = (x0 + r - xc) / r;\n        hw = d >= 1 ? -1 : r * sqrt(1 - d * d);\n      } else hw = r * (1 - 0.06 * u - 0.24 * sm(ut, 1.1, u));\n      hw += 0.5 * (n1(TE, xc / 4 + 2) - 0.5);\n      const cov = cl(hw - abs(q) + 0.5, 0, 1);\n      const st = 0.62 * n1(T1, q * 1.15 + 11) + 0.38 * n2(T2, 24, xc / 8, q + 11);\n      // In the tail the streaks also break along their length, where the\n      // last of the pigment skips over the card.\n      const thin = sm(ut, 1, u), brk = n2(T3, 24, xc / 2.6, q * 1.3 + 11);\n      const keep = sm(-0.2, 0.2, st * 1.1 + 0.3 - thin * (1.05 + 0.7 * brk));\n      s.A[i] = cov * (0.93 + 0.07 * st) * keep * (1 - 0.5 * thin) * (1 - sm(0.94, 1.04, u));\n      // Where the finger landed the pigment piles up a shade deeper, and the\n      // drag pushes a little more of it to the two long edges.\n      const ce = xc - (x0 + r - sqrt(Math.max(0, r * r - q * q)));\n      let v = (1 + 0.24 * (st - 0.5)) * (1 - 0.1 * sm(0.55, 1, abs(q) / Math.max(hw, 0.5)));\n      if (ce \u003c 2.5) v *= 0.8 + 0.2 * cl(ce / 2.5, 0, 1);\n      s.V[i] = v;\n      s.Q[i] = q / Math.max(hw, 1);\n      s.G[i] = (0.45 + st) * (1 - 0.7 * thin);\n      s.R[i] = xc + 0.85 * (r - sqrt(Math.max(0, r * r - q * q)));\n      s.K[i] = hash(x, j, s.seed);\n    }\n  (s.xa = x0 - 1.5), (s.xb = xe + r + 2);\n  return s;\n}\n\n// The finger sets off quickly and slows as the pigment runs out.\nconst travel = (p) => 0.4 * p * p * (3 - 2 * p) + 0.6 * (1 - (1 - p) * (1 - p));\nconst fingerAt = (s) => s.xa + (s.xb - s.xa) * travel(s.p);\n\nexport function setup(params) {\n  const L = [];\n  for (let k = 0; k \u003c= ROWS; k++) {\n    const s = swatch(k);\n    if (k \u003c ROWS - 1) s.p = 1;\n    L.push(s);\n  }\n  // The card opens with seven swatches down and the eighth being dragged.\n  (L[ROWS - 1].go = true), (L[ROWS - 1].p = 0.12);\n  params.s = {\n    L, n: ROWS + 1, off: 0, phase: 0, pt: 0, t: 0, sweep: 30, hue: 0, speed: 2, width: 0.52, fin: 0.06,\n    col: new Float32Array((ROWS + 1) * 6), SH: new Float32Array(64), SW: new Float32Array(180),\n  };\n}\n\n// The stack glides up a row: the top swatch leaves, an empty slot comes in\n// at the bottom and the finger starts on the slot above it.\nfunction shift(P) {\n  P.L.shift();\n  P.L.push(swatch(P.n++));\n  (P.off = 0), (P.phase = 0), (P.pt = 0);\n  const B = P.L[ROWS - 1];\n  (B.go = true), (B.p = 0);\n}\n\n// K1: a pad wipes each swatch off left to right, row after row, and a\n// finger follows each wipe with a fresh stroke of the same shade.\nfunction reswatch(P) {\n  if (P.phase === 2) shift(P);\n  P.phase = 0;\n  for (let k = 0; k \u003c ROWS; k++) {\n    const old = P.L[k], s = swatch(old.n);\n    old.prev = null;\n    if (old.p > 0) (s.prev = old), (s.wipe = 0), (s.wwait = 0.07 * k);\n    (s.go = true), (s.p = 0), (s.wait = 0.07 * k + 0.3);\n    P.L[k] = s;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.width = 0.04 + 0.48 * (cl(k[2], -1, 1) + 1);\n  P.fin = cl(k[3], -1, 1);\n  const sp = P.speed, drag = 2.1 / sp, hold = 0.9 / sp, glide = 1.1 / sp;\n  P.t += d;\n  // A band of light crosses the card corner to corner every 18 s at Speed 2.\n  P.sweep += d * 7 * sp;\n  if (P.sweep > 200) P.sweep -= 250;\n  if (input.btnPressed && input.btnPressed[0]) reswatch(P);\n  for (const s of P.L) {\n    if (s.prev) {\n      if (s.wwait > 0) s.wwait -= d;\n      else if ((s.wipe += d / 0.45) >= 1) s.prev = null;\n    }\n    if (s.go && s.p \u003c 1) {\n      if (s.wait > 0) s.wait -= d;\n      else s.p = min(1, s.p + d / drag);\n    }\n  }\n  const B = P.L[ROWS - 1];\n  if (P.phase === 0) {\n    if (B.p >= 1) (P.phase = 1), (P.pt = 0);\n  } else if (P.phase === 1) {\n    if ((P.pt += d) >= hold) (P.phase = 2), (P.pt = 0);\n  } else {\n    P.pt += d;\n    const u = min(1, P.pt / glide);\n    P.off = SL * u * u * (3 - 2 * u);\n    if (u >= 1) shift(P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = 255 * rgb[c];\n}\n\n// The shade of swatch n: the range runs light to deep and back over 14\n// swatches, so the eight on the card always show a stretch of it.\nfunction tone(P, s, m, out, o) {\n  const a = s.n % 14, tri = (a \u003c= 7 ? a : 14 - a) / 7, w = P.width;\n  const d = cl(0.5 + w * (tri - 0.5) + s.jit, 0, 1);\n  const h = P.hue + ROSE + 0.05 * w * (0.5 - d);\n  hsv(h, 0.3 + 0.58 * d, (0.98 - 0.56 * d) * (1 + 0.12 * m), out, o);\n  // The highlight: a pale tint of the same hue, and towards metallic a\n  // champagne one.\n  hsv(h + 0.02 * m, (0.3 + 0.58 * d) * 0.35, 1, out, o + 3);\n  for (let c = 0; c \u003c 3; c++) out[o + 3 + c] = mix(mix(out[o + 3 + c], 255, 0.35), [255, 226, 186][c], 0.55 * m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.fin, m = sm(0.15, 1, f), col = P.col, SH = P.SH, SW = P.SW, L = P.L;\n  // Matte keeps 3% of a sheen, satin 50%, metallic 95%, narrower as it\n  // goes; metallic also throws a weaker second light off the lower edge.\n  const kS = 0.03 + 0.47 * sm(-1, 0, f) + 0.45 * sm(0, 1, f), wS = f \u003c 0 ? mix(0.4, 0.75, -f) : mix(0.4, 0.26, f);\n  for (let b = 0; b \u003c 64; b++) {\n    const q = -1.6 + (3.2 * b) / 63, e = (q + 0.3) / wS, e2 = (q - 0.72) / 0.16;\n    SH[b] = kS * exp(-e * e) + 0.35 * m * exp(-e2 * e2);\n  }\n  const base = mix(0.85, 0.5, m), amp = mix(0.45, 1.4, m);\n  for (let g = 0; g \u003c 180; g++) {\n    const e = (g - P.sweep) / 15;\n    SW[g] = exp(-e * e);\n  }\n  for (let k = 0; k \u003c= ROWS; k++) tone(P, L[k], m, col, k * 6);\n  const dens = 1 - 0.15 * m, t = P.t, off = round(P.off);\n  const XF = L.map((s) => (s.p \u003c 1 ? fingerAt(s) : 1e3)), PF = L.map((s) => (s.prev ? fingerAt(s.prev) : 0));\n  const WX = L.map((s) => -6 + 78 * s.wipe);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = y + off, k = floor(ty / SL), j = ty - k * SL, s = L[k], o = k * 6, xf = XF[k];\n    for (let x = 0; x \u003c W; x++) {\n      const gi = (y * W + x) * 3;\n      let r = GR[gi], g = GR[gi + 1], b = GR[gi + 2];\n      const i = j * W + x;\n      // The swatch being wiped off, still there right of the round edge of\n      // the pad.\n      if (s.prev) {\n        const S = s.prev, e = WX[k] - 2.5 * S.Q[i] * S.Q[i], a = S.A[i] * cl((PF[k] - S.R[i]) * 0.8 + 0.5, 0, 1) * sm(e - 2.5, e + 2.5, x);\n        if (a > 0.004) {\n          const v = S.V[i];\n          (r = mix(r, col[o] * v, a)), (g = mix(g, col[o + 1] * v, a)), (b = mix(b, col[o + 2] * v, a));\n        }\n      }\n      let a = s.A[i];\n      if (a > 0.004) {\n        let wet = 0;\n        if (xf \u003c 1e3) {\n          const dx = xf - s.R[i];\n          a *= cl(dx * 0.8 + 0.5, 0, 1);\n          if (dx > 0 && dx \u003c 4) wet = 0.5 * (1 - dx / 4);\n        }\n        if (a > 0.004) {\n          const Q = s.Q[i], v = s.V[i] * (1 - 0.42 * m * sm(-0.1, 0.6, Q));\n          let pr = col[o] * v, pg = col[o + 1] * v, pb = col[o + 2] * v;\n          const lt = SW[cl(round(y + 0.55 * x), 0, 179)];\n          const h = min(1, SH[cl(round(((Q + 1.6) * 63) / 3.2), 0, 63)] * s.G[i] * (base + amp * lt) + wet);\n          (pr = mix(pr, col[o + 3], h)), (pg = mix(pg, col[o + 4], h)), (pb = mix(pb, col[o + 5], h));\n          const K = s.K[i];\n          if (m > 0 && K > dens && a > 0.4) {\n            const tw = sin(K * 6283 + t * 2.6);\n            if (tw > 0.3) {\n              const z = (tw - 0.3) / 0.7, spk = z * z * m * (0.45 + 0.9 * lt);\n              (pr = mix(pr, 255, spk)), (pg = mix(pg, 248, spk)), (pb = mix(pb, 232, spk));\n            }\n          }\n          (r = mix(r, pr, a)), (g = mix(g, pg, a)), (b = mix(b, pb, a));\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-swatch-row","type":"code","name":"swatch-row","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Swatch Row\n// Family:  cosmetic\n// Idea:    A shade range swatched down an ivory card: an unseen finger drags one stroke of cream pigment at a time, thick and opaque where it lands and breaking into feathered streaks where the pigment runs out, and the stack of eight glides up a row for every new one.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 30, after the makeup artist's swatch\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1\n//\n// Knob 1: Hue. Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum.\n// Knob 2: Speed. At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4.\n// Knob 3: Range. How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it.\n// Knob 4: Finish. At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles.\n// Buttons: K1 tap wipes the card clean from the top down and swatches all eight shades again at once, each with a new stroke.\n\nconst W = 64, H = 128, SL = 16, ROWS = H / SL, NT = W * SL;\nconst { min, floor, sqrt, sin, exp, abs, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b, c) => {\n  let h = (a * 374761393 + b * 668265263 + c * 1013904223) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Rose sits at 0.955 of the wheel; K1 adds to it.\nconst ROSE = 0.955;\n\n// The card: warm ivory, 198/186/164 in the middle, 10% dimmer at the side\n// edges and 7% at the ends, with a fixed paper grain of about 1%.\nconst GR = new Float32Array(W * H * 3);\nfor (let y = 0; y \u003c H; y++)\n  for (let x = 0; x \u003c W; x++) {\n    const dx = (x + 0.5 - 32) / 32, dy = (y + 0.5 - 64) / 64;\n    const v = 1 - 0.1 * dx * dx - 0.07 * dy * dy + 0.024 * (hash(x, y, 7) - 0.5), i = (y * W + x) * 3;\n    (GR[i] = 198 * v), (GR[i + 1] = 186 * v), (GR[i + 2] = 164 * v);\n  }\n\n// Smooth value noise over a table of random numbers.\nconst n1 = (T, f) => {\n  const i = cl(floor(f), 0, T.length - 2), t = cl(f - i, 0, 1);\n  return T[i] + (T[i + 1] - T[i]) * t * t * (3 - 2 * t);\n};\nconst n2 = (T, n, fx, fy) => {\n  const i = cl(floor(fx), 0, T.length / n - 2), t = cl(fx - i, 0, 1), s = t * t * (3 - 2 * t);\n  return mix(n1(T.subarray(i * n, i * n + n), fy), n1(T.subarray(i * n + n, i * n + 2 * n), fy), s);\n};\nconst table = (n) => Float32Array.from({ length: n }, () => random());\n\n// One swatch, baked once into fields over its 64x16 slot: how opaque the\n// pigment is (A), how light against its own shade (V), where across the\n// stroke the LED sits (Q, -1 at the top edge, 1 at the bottom), how much the\n// highlight catches there (G), how far the finger must have come before it\n// lays this LED (R), and a fixed number for the sparkle (K).\n//\n// The stroke lands with a round cap of radius r, runs straight with a little\n// waver, and from a fraction ut of its length on the pigment runs out: the\n// stroke narrows, goes sheer, and the drag streaks, which follow the stroke,\n// drop out one by one, the weakest first, until the last one ends at xe.\nfunction swatch(n) {\n  const s = {\n    n, jit: (random() - 0.5) * 0.05, seed: floor(random() * 1e6),\n    A: new Float32Array(NT), V: new Float32Array(NT), Q: new Float32Array(NT), G: new Float32Array(NT), R: new Float32Array(NT), K: new Float32Array(NT),\n    p: 0, go: false, wait: 0, xa: 0, xb: 0, prev: null, wipe: 1, wwait: 0,\n  };\n  const r = 5.3 + random() * 0.6, x0 = 2 + random() * 3.5, xe = 58 + random() * 6, ut = 0.4 + random() * 0.16;\n  const slope = (random() - 0.5) * 0.04, amp = 0.2 + random() * 0.35, fr = 0.05 + random() * 0.06, ph = random() * 2 * PI, xm = (x0 + xe) / 2;\n  const T1 = table(24), T2 = table(24 * 10), T3 = table(24 * 24), TE = table(20);\n  for (let j = 0; j \u003c SL; j++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = j * W + x, xc = x + 0.5;\n      const yc = 7.5 + slope * (xc - xm) + amp * sin(xc * fr + ph), q = j + 0.5 - yc, u = (xc - x0) / (xe - x0);\n      let hw;\n      if (xc \u003c x0 + r) {\n        const d = (x0 + r - xc) / r;\n        hw = d >= 1 ? -1 : r * sqrt(1 - d * d);\n      } else hw = r * (1 - 0.06 * u - 0.24 * sm(ut, 1.1, u));\n      hw += 0.5 * (n1(TE, xc / 4 + 2) - 0.5);\n      const cov = cl(hw - abs(q) + 0.5, 0, 1);\n      const st = 0.62 * n1(T1, q * 1.15 + 11) + 0.38 * n2(T2, 24, xc / 8, q + 11);\n      // In the tail the streaks also break along their length, where the\n      // last of the pigment skips over the card.\n      const thin = sm(ut, 1, u), brk = n2(T3, 24, xc / 2.6, q * 1.3 + 11);\n      const keep = sm(-0.2, 0.2, st * 1.1 + 0.3 - thin * (1.05 + 0.7 * brk));\n      s.A[i] = cov * (0.93 + 0.07 * st) * keep * (1 - 0.5 * thin) * (1 - sm(0.94, 1.04, u));\n      // Where the finger landed the pigment piles up a shade deeper, and the\n      // drag pushes a little more of it to the two long edges.\n      const ce = xc - (x0 + r - sqrt(Math.max(0, r * r - q * q)));\n      let v = (1 + 0.24 * (st - 0.5)) * (1 - 0.1 * sm(0.55, 1, abs(q) / Math.max(hw, 0.5)));\n      if (ce \u003c 2.5) v *= 0.8 + 0.2 * cl(ce / 2.5, 0, 1);\n      s.V[i] = v;\n      s.Q[i] = q / Math.max(hw, 1);\n      s.G[i] = (0.45 + st) * (1 - 0.7 * thin);\n      s.R[i] = xc + 0.85 * (r - sqrt(Math.max(0, r * r - q * q)));\n      s.K[i] = hash(x, j, s.seed);\n    }\n  (s.xa = x0 - 1.5), (s.xb = xe + r + 2);\n  return s;\n}\n\n// The finger sets off quickly and slows as the pigment runs out.\nconst travel = (p) => 0.4 * p * p * (3 - 2 * p) + 0.6 * (1 - (1 - p) * (1 - p));\nconst fingerAt = (s) => s.xa + (s.xb - s.xa) * travel(s.p);\n\nexport function setup(params) {\n  const L = [];\n  for (let k = 0; k \u003c= ROWS; k++) {\n    const s = swatch(k);\n    if (k \u003c ROWS - 1) s.p = 1;\n    L.push(s);\n  }\n  // The card opens with seven swatches down and the eighth being dragged.\n  (L[ROWS - 1].go = true), (L[ROWS - 1].p = 0.12);\n  params.s = {\n    L, n: ROWS + 1, off: 0, phase: 0, pt: 0, t: 0, sweep: 30, hue: 0, speed: 2, width: 0.52, fin: 0.06,\n    col: new Float32Array((ROWS + 1) * 6), SH: new Float32Array(64), SW: new Float32Array(180),\n  };\n}\n\n// The stack glides up a row: the top swatch leaves, an empty slot comes in\n// at the bottom and the finger starts on the slot above it.\nfunction shift(P) {\n  P.L.shift();\n  P.L.push(swatch(P.n++));\n  (P.off = 0), (P.phase = 0), (P.pt = 0);\n  const B = P.L[ROWS - 1];\n  (B.go = true), (B.p = 0);\n}\n\n// K1: a pad wipes each swatch off left to right, row after row, and a\n// finger follows each wipe with a fresh stroke of the same shade.\nfunction reswatch(P) {\n  if (P.phase === 2) shift(P);\n  P.phase = 0;\n  for (let k = 0; k \u003c ROWS; k++) {\n    const old = P.L[k], s = swatch(old.n);\n    old.prev = null;\n    if (old.p > 0) (s.prev = old), (s.wipe = 0), (s.wwait = 0.07 * k);\n    (s.go = true), (s.p = 0), (s.wait = 0.07 * k + 0.3);\n    P.L[k] = s;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.width = 0.04 + 0.48 * (cl(k[2], -1, 1) + 1);\n  P.fin = cl(k[3], -1, 1);\n  const sp = P.speed, drag = 2.1 / sp, hold = 0.9 / sp, glide = 1.1 / sp;\n  P.t += d;\n  // A band of light crosses the card corner to corner every 18 s at Speed 2.\n  P.sweep += d * 7 * sp;\n  if (P.sweep > 200) P.sweep -= 250;\n  if (input.btnPressed && input.btnPressed[0]) reswatch(P);\n  for (const s of P.L) {\n    if (s.prev) {\n      if (s.wwait > 0) s.wwait -= d;\n      else if ((s.wipe += d / 0.45) >= 1) s.prev = null;\n    }\n    if (s.go && s.p \u003c 1) {\n      if (s.wait > 0) s.wait -= d;\n      else s.p = min(1, s.p + d / drag);\n    }\n  }\n  const B = P.L[ROWS - 1];\n  if (P.phase === 0) {\n    if (B.p >= 1) (P.phase = 1), (P.pt = 0);\n  } else if (P.phase === 1) {\n    if ((P.pt += d) >= hold) (P.phase = 2), (P.pt = 0);\n  } else {\n    P.pt += d;\n    const u = min(1, P.pt / glide);\n    P.off = SL * u * u * (3 - 2 * u);\n    if (u >= 1) shift(P);\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = 255 * rgb[c];\n}\n\n// The shade of swatch n: the range runs light to deep and back over 14\n// swatches, so the eight on the card always show a stretch of it.\nfunction tone(P, s, m, out, o) {\n  const a = s.n % 14, tri = (a \u003c= 7 ? a : 14 - a) / 7, w = P.width;\n  const d = cl(0.5 + w * (tri - 0.5) + s.jit, 0, 1);\n  const h = P.hue + ROSE + 0.05 * w * (0.5 - d);\n  hsv(h, 0.3 + 0.58 * d, (0.98 - 0.56 * d) * (1 + 0.12 * m), out, o);\n  // The highlight: a pale tint of the same hue, and towards metallic a\n  // champagne one.\n  hsv(h + 0.02 * m, (0.3 + 0.58 * d) * 0.35, 1, out, o + 3);\n  for (let c = 0; c \u003c 3; c++) out[o + 3 + c] = mix(mix(out[o + 3 + c], 255, 0.35), [255, 226, 186][c], 0.55 * m);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const f = P.fin, m = sm(0.15, 1, f), col = P.col, SH = P.SH, SW = P.SW, L = P.L;\n  // Matte keeps 3% of a sheen, satin 50%, metallic 95%, narrower as it\n  // goes; metallic also throws a weaker second light off the lower edge.\n  const kS = 0.03 + 0.47 * sm(-1, 0, f) + 0.45 * sm(0, 1, f), wS = f \u003c 0 ? mix(0.4, 0.75, -f) : mix(0.4, 0.26, f);\n  for (let b = 0; b \u003c 64; b++) {\n    const q = -1.6 + (3.2 * b) / 63, e = (q + 0.3) / wS, e2 = (q - 0.72) / 0.16;\n    SH[b] = kS * exp(-e * e) + 0.35 * m * exp(-e2 * e2);\n  }\n  const base = mix(0.85, 0.5, m), amp = mix(0.45, 1.4, m);\n  for (let g = 0; g \u003c 180; g++) {\n    const e = (g - P.sweep) / 15;\n    SW[g] = exp(-e * e);\n  }\n  for (let k = 0; k \u003c= ROWS; k++) tone(P, L[k], m, col, k * 6);\n  const dens = 1 - 0.15 * m, t = P.t, off = round(P.off);\n  const XF = L.map((s) => (s.p \u003c 1 ? fingerAt(s) : 1e3)), PF = L.map((s) => (s.prev ? fingerAt(s.prev) : 0));\n  const WX = L.map((s) => -6 + 78 * s.wipe);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = y + off, k = floor(ty / SL), j = ty - k * SL, s = L[k], o = k * 6, xf = XF[k];\n    for (let x = 0; x \u003c W; x++) {\n      const gi = (y * W + x) * 3;\n      let r = GR[gi], g = GR[gi + 1], b = GR[gi + 2];\n      const i = j * W + x;\n      // The swatch being wiped off, still there right of the round edge of\n      // the pad.\n      if (s.prev) {\n        const S = s.prev, e = WX[k] - 2.5 * S.Q[i] * S.Q[i], a = S.A[i] * cl((PF[k] - S.R[i]) * 0.8 + 0.5, 0, 1) * sm(e - 2.5, e + 2.5, x);\n        if (a > 0.004) {\n          const v = S.V[i];\n          (r = mix(r, col[o] * v, a)), (g = mix(g, col[o + 1] * v, a)), (b = mix(b, col[o + 2] * v, a));\n        }\n      }\n      let a = s.A[i];\n      if (a > 0.004) {\n        let wet = 0;\n        if (xf \u003c 1e3) {\n          const dx = xf - s.R[i];\n          a *= cl(dx * 0.8 + 0.5, 0, 1);\n          if (dx > 0 && dx \u003c 4) wet = 0.5 * (1 - dx / 4);\n        }\n        if (a > 0.004) {\n          const Q = s.Q[i], v = s.V[i] * (1 - 0.42 * m * sm(-0.1, 0.6, Q));\n          let pr = col[o] * v, pg = col[o + 1] * v, pb = col[o + 2] * v;\n          const lt = SW[cl(round(y + 0.55 * x), 0, 179)];\n          const h = min(1, SH[cl(round(((Q + 1.6) * 63) / 3.2), 0, 63)] * s.G[i] * (base + amp * lt) + wet);\n          (pr = mix(pr, col[o + 3], h)), (pg = mix(pg, col[o + 4], h)), (pb = mix(pb, col[o + 5], h));\n          const K = s.K[i];\n          if (m > 0 && K > dens && a > 0.4) {\n            const tw = sin(K * 6283 + t * 2.6);\n            if (tw > 0.3) {\n              const z = (tw - 0.3) / 0.7, spk = z * z * m * (0.45 + 0.9 * lt);\n              (pr = mix(pr, 255, spk)), (pg = mix(pg, 248, spk)), (pb = mix(pb, 232, spk));\n            }\n          }\n          (r = mix(r, pr, a)), (g = mix(g, pg, a)), (b = mix(b, pb, a));\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Range=-1..1, Finish=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole range round the colour wheel. At 0 it is rose, pale pink at the light end and berry at the deep end; at 0.12 it is a foundation range from nude to bronze, at 0.3 olive, at 0.5 mint to jade, at 0.75 periwinkle to indigo, at 0.85 lilac to plum."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a finger drags one swatch across in 1.05 seconds, it rests 0.45 seconds, and the stack glides up 16 LEDs in 0.55 seconds, a new swatch every 2.05 seconds; at 0.2 one every 20 seconds, at 3 one every 1.4."},{"name":"Range","min":-1,"max":1,"about":"How far apart the shades are. At -1 all eight swatches are nearly one shade, at 0 they span the middle half of the range, at 1 they go from a pale tint at 98% brightness to a deep shade at 42%, the light ones leaning warm and the deep ones cool. The range runs light to deep and back over 14 swatches, so the stack shows a stretch of it."},{"name":"Finish","min":-1,"max":1,"about":"At -1 matte, flat pigment with only its drag streaks; at 0 satin, a soft highlight along the upper third of every stroke that brightens as a band of light crosses the card every 18 seconds; at 1 metallic, a narrow champagne highlight, a darker lower half with a second thin light along its edge, and one LED in seven of the pigment a fixed sparkle that twinkles."}],"start":[0,2,0,0.06],"measures":{"motion":0.1965,"detail":0.0215,"edges":0.0463,"complexity":1.8772,"coverage":1,"colour":0.2018,"drift":0.0306},"knobResponse":[0.1202,0.0645,0.0452,0.0494]},{"slug":"taffy-cream","title":"Taffy Cream","family":"cosmetic","round":37,"note":"라일락 크림과 아이보리 크림이 높은 통을 채우고, 보이지 않는 핀 셋이 둘씩 서로를 한 바퀴씩 돌며 태피처럼 잡아당겨요. 두 크림의 경계가 윤기 있는 주름으로 늘어나 한 주기에 13배쯤 길어지며 겹이 늘고 가늘어지다 파스텔로 섞이면, 아이보리 테를 두른 새 덩이가 핀이 지날 길에 놓여요. K3 은 핀을 다섯까지 늘리고, 누르면 새 덩이를 바로 놓아요.","idea":"A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.","buttons":"K1 tap lays a fresh dollop in now, on the path of the pins that turn next.","code":"// ===== Patternflow pattern =====\n// Title:   Taffy Cream\n// Family:  cosmetic\n// Idea:    A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after two-tone cream being pulled in a cosmetics mixing vat, with the pins moving as a taffy puller, a rod-stirring protocol in the sense of Philip Boyland, Hassan Aref and Mark Stremler (2000)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1\n//\n// Knob 1: Hue. The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white.\n// Knob 2: Speed. At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower.\n// Knob 3: Pins. How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns.\n// Knob 4: Gloss. At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen.\n// Buttons: K1 tap lays a fresh dollop in now, on the path of the pins that turn next.\n\n// The pins move as the taffy puller: pins on a line, neighbours turning\n// once round each other, the turns alternately clockwise and anticlockwise.\n// The braid of three pins is s1^2 s2^-2, and its Burau matrix at t = -1 is\n// [[5, 2], [2, 1]], whose larger eigenvalue is 3 + 2 sqrt 2 = 5.83, the\n// silver ratio squared: the least a line caught round the pins must be\n// stretched by in one period, whatever the cream between them does.\n// Boyland, Aref and Stremler's half turns, s1 s2^-1, give the golden ratio\n// squared, 2.62. For four and five pins the same matrices give at least 9.9\n// and 12.4 a period of three and four turns. Followed in a scratch script\n// through this pattern's own flow, a line across the middle of the vat grew\n// 17, 13 and 14 times in three periods with three pins, 13 a period with\n// four and 19 to 23 with five: above the floor, as the cream round each\n// pin is sheared besides.\n//\n// The flow: each moving pin carries the cream round it with a stream\n// function psi = (V x (p - r)) g(|p - r|), g = exp(-d^2 / 2 s^2), so cream\n// at the pin goes with the pin and cream a few s away stays put. Each pin\n// has a mirror image behind each of the four walls, moving as its\n// reflection, which takes psi to zero along the walls, so no cream crosses\n// them and it slides along them freely. The velocity is the curl of psi,\n// so the cream keeps its volume. It is worked out on the LED corners, once\n// a step, and read between them.\n//\n// The first try tapered psi to zero over the last 5 LEDs instead. A pin\n// passing 14 LEDs from a side wall left psi near 350 there, and the cream\n// a pin carries comes back round it in a ring two to three s out, so even\n// the top wall, 28 LEDs above the highest pin, saw psi near 75. Squeezed\n// to zero in 5 LEDs, either drove a jet of 40 to 50 LEDs a second along\n// the wall that combed the cream there into stair steps. With the images\n// every corner stays 3.5 s or more from any pin, where g is 0.002, and no\n// taper is needed.\n\nconst W = 64, H = 128, N = W * H;\n// The cream is followed on a grid twice as fine as the LEDs.\nconst GW = 128, GH = 256, GN = GW * GH;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n// One turn takes this many seconds at Speed 1.\nconst TURN = 6;\n// A dollop every this many turns.\nconst EVERY = 5;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The pins stand on x = 32, sp apart and centred in the vat.\nfunction layout(n) {\n  const sp = min(36, 116 / n), ys = [];\n  for (let j = 0; j \u003c n; j++) ys.push(64 + (j - (n - 1) / 2) * sp);\n  return { n, sp, ys, sg: 0.3 * sp };\n}\n\n// The turning pair and the two pins' places and velocities at phase f of\n// turn k: pair j = k mod (n - 1), clockwise for even j. The angle eases in\n// and out, so a turn starts and ends at rest and the next pair takes over.\nfunction pins(S, out) {\n  const L = S.lay, j = S.turn % (L.n - 1), dir = j % 2 === 0 ? 1 : -1, f = S.phase;\n  const cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const th = 2 * PI * (f - sin(2 * PI * f) / (2 * PI)), om = (2 * PI * (1 - cos(2 * PI * f))) / (S.turnLen || 1);\n  for (let k = 0; k \u003c 2; k++) {\n    const al = (k === 0 ? -PI / 2 : PI / 2) + dir * th;\n    out[k * 4] = 32 + R * cos(al);\n    out[k * 4 + 1] = cy + R * sin(al);\n    out[k * 4 + 2] = -R * sin(al) * dir * om;\n    out[k * 4 + 3] = R * cos(al) * dir * om;\n  }\n  return out;\n}\n\n// Velocity at (x, y) in LED units, written to S.vx, S.vy.\nfunction vel(S, x, y, P) {\n  const is2 = 1 / (S.lay.sg * S.lay.sg);\n  let px = 0, py = 0;\n  for (let k = 0; k \u003c 8; k += 4)\n    for (let m = 0; m \u003c 5; m++) {\n      // The pin, then its images behind the left, right, top and bottom walls.\n      const rx = m === 1 ? -P[k] : m === 2 ? 2 * W - P[k] : P[k], ry = m === 3 ? -P[k + 1] : m === 4 ? 2 * H - P[k + 1] : P[k + 1];\n      const vx = m === 1 || m === 2 ? -P[k + 2] : P[k + 2], vy = m === 3 || m === 4 ? -P[k + 3] : P[k + 3];\n      const dx = x - rx, dy = y - ry, d2 = (dx * dx + dy * dy) * is2;\n      if (d2 > 30) continue;\n      const g = Math.exp(-0.5 * d2), c = vx * dy - vy * dx;\n      px += -vy * g - c * g * dx * is2;\n      py += vx * g - c * g * dy * is2;\n    }\n  S.vx = py;\n  S.vy = -px;\n}\n\n// Catmull-Rom sample of the fine grid at grid coordinates (gx, gy), held\n// between the four nearest values so a stripe edge never rings.\nfunction sample(c, gx, gy) {\n  gx = cl(gx, 0, GW - 1.001);\n  gy = cl(gy, 0, GH - 1.001);\n  const ix = floor(gx), iy = floor(gy), fx = gx - ix, fy = gy - iy;\n  const wx0 = ((-0.5 * fx + 1) * fx - 0.5) * fx, wx1 = (1.5 * fx - 2.5) * fx * fx + 1, wx2 = ((-1.5 * fx + 2) * fx + 0.5) * fx, wx3 = (0.5 * fx - 0.5) * fx * fx;\n  const wy0 = ((-0.5 * fy + 1) * fy - 0.5) * fy, wy1 = (1.5 * fy - 2.5) * fy * fy + 1, wy2 = ((-1.5 * fy + 2) * fy + 0.5) * fy, wy3 = (0.5 * fy - 0.5) * fy * fy;\n  const x0 = max(ix - 1, 0), x2 = ix + 1, x3 = min(ix + 2, GW - 1);\n  let s = 0;\n  for (let k = 0; k \u003c 4; k++) {\n    const row = min(max(iy - 1 + k, 0), GH - 1) * GW, wy = k === 0 ? wy0 : k === 1 ? wy1 : k === 2 ? wy2 : wy3;\n    s += wy * (c[row + x0] * wx0 + c[row + ix] * wx1 + c[row + x2] * wx2 + c[row + x3] * wx3);\n  }\n  const a = c[iy * GW + ix], b = c[iy * GW + x2], d = c[(iy + 1) * GW + ix], e = c[(iy + 1) * GW + x2];\n  return cl(s, min(min(a, b), min(d, e)), max(max(a, b), max(d, e)));\n}\n\n// One step of the cream: each fine cell looks back along the flow, a\n// midpoint step, and takes what was there. Cells under LEDs whose corners\n// all move less than a ten-thousandth of an LED a step are copied as they\n// are; at that rate a still cell and a moving neighbour part by 0.2 LED in\n// a minute, and the turning pair changes long before.\nconst VW = W + 1, VH = H + 1;\nfunction advect(S, dt) {\n  const P = pins(S, S.P), c = S.c, o = S.c2, U = S.U, V = S.V, still = S.still;\n  for (let y = 0; y \u003c VH; y++)\n    for (let x = 0; x \u003c VW; x++) {\n      vel(S, x, y, P);\n      U[y * VW + x] = S.vx;\n      V[y * VW + x] = S.vy;\n    }\n  const lim = (1e-4 / dt) * (1e-4 / dt);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * VW + x, r = q + VW;\n      const m = max(max(U[q] * U[q] + V[q] * V[q], U[q + 1] * U[q + 1] + V[q + 1] * V[q + 1]), max(U[r] * U[r] + V[r] * V[r], U[r + 1] * U[r + 1] + V[r + 1] * V[r + 1]));\n      still[y * W + x] = m \u003c lim ? 1 : 0;\n    }\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, ly = gy >> 1;\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const p = gy * GW + gx;\n      if (still[ly * W + (gx >> 1)]) {\n        o[p] = c[p];\n        continue;\n      }\n      const x = (gx + 0.5) / 2;\n      // Bilinear velocity at (x, y), then at the midpoint back along it.\n      let ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, q = iy * VW + ix;\n      let vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      let vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      const mx = cl(x - 0.5 * dt * vx, 0, W - 0.001), my = cl(y - 0.5 * dt * vy, 0, H - 0.001);\n      (ix = floor(mx)), (iy = floor(my)), (fx = mx - ix), (fy = my - iy), (q = iy * VW + ix);\n      vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      o[p] = sample(c, (x - dt * vx) * 2 - 0.5, (y - dt * vy) * 2 - 0.5);\n    }\n  }\n  S.c = o;\n  S.c2 = c;\n}\n\n// A dollop: a tinted core with an ivory rim, its edge wobbling on two\n// harmonics, laid where the next turn's pins will pass.\nfunction dollop(S) {\n  const L = S.lay, j = S.turn % (L.n - 1), cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const al = random() * 2 * PI, x0 = 32 + R * cos(al) * 0.8, y0 = cy + R * sin(al) * 0.8;\n  const r1 = 0.36 * L.sp + 4, r2 = r1 + 4 + 0.08 * L.sp, p1 = random() * 6.3, p2 = random() * 6.3, c = S.c;\n  for (let gy = 0; gy \u003c GH; gy++)\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const dx = (gx + 0.5) / 2 - x0, dy = (gy + 0.5) / 2 - y0, d = sqrt(dx * dx + dy * dy);\n      if (d > r2 * 1.3 + 1) continue;\n      const an = Math.atan2(dy, dx), wob = 1 + 0.12 * sin(2 * an + p1) + 0.07 * sin(3 * an + p2);\n      const e = d / wob;\n      if (e > r2 + 0.5) continue;\n      const core = sm(r1 + 0.5 - e), rim = sm(r2 + 0.5 - e), p = gy * GW + gx;\n      c[p] = c[p] * (1 - rim) + core;\n    }\n}\n\nfunction fresh(S) {\n  // The vat opens with the tinted cream on the left and the ivory on the\n  // right, the line between them wavering across the pins.\n  const c = S.c, ph = random() * 6.3;\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, edge = 32 + 6 * sin((y / H) * 2 * PI * 1.5 + ph);\n    for (let gx = 0; gx \u003c GW; gx++) c[gy * GW + gx] = sm(edge + 0.5 - (gx + 0.5) / 2);\n  }\n}\n\nfunction step(S, d, lim = 3) {\n  S.turnLen = TURN / S.speed;\n  S.clock += d * S.speed;\n  // Substeps keep the pins under 3 LEDs a step: one at Speed 2, two at 3.\n  const vmax = (S.lay.sp / 2) * 4 * PI / S.turnLen, ns = max(1, Math.ceil((vmax * d) / lim));\n  for (let i = 0; i \u003c ns; i++) {\n    advect(S, d / ns);\n    S.phase += d / ns / S.turnLen;\n    if (S.phase >= 1) {\n      S.phase -= 1;\n      S.turn++;\n      if (++S.since >= EVERY) (S.since = 0), dollop(S);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    c: new Float32Array(GN), c2: new Float32Array(GN), led: new Float32Array(N), hgt: new Float32Array(N),\n    P: new Float64Array(8), vx: 0, vy: 0, U: new Float32Array(VW * VH), V: new Float32Array(VW * VH), still: new Uint8Array(N), lay: layout(3), n: 3, hue: 0, speed: 2, gloss: 0.06,\n    turn: 0, phase: 0, since: 0, turnLen: 3, clock: 0, warm: false, tint: [0, 0, 0], ivory: [1, 0.95, 0.86],\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.gloss = cl(k[3], 0, 1);\n  const n = Math.round(cl(k[2], 3, 5));\n  if (n !== S.n) {\n    // The pins are unseen, so they simply take their new places; the turn\n    // under way goes on with the new pair.\n    S.n = n;\n    S.lay = layout(n);\n  }\n  if (!S.warm) {\n    // Open a turn and a half in, the first folds already drawn. The 4.5 s\n    // run in steps of up to 6 LEDs, 60 of them, about 0.3 s of work.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 30; i++) step(S, 0.15, 6);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) dollop(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, led = S.led, hgt = S.hgt, tint = S.tint, iv = S.ivory;\n  // The tint: lilac at 0. From coral to lime it is brought up to full\n  // brightness and its shading made shallower, as a darker peach reads brown\n  // and a darker butter khaki. Next to butter and lime the ivory turns to a\n  // cooler white, or the two creams would be one.\n  const h = S.hue + 0.76, hh = h - floor(h);\n  const warm = sm(hh / 0.05) * sm((0.3 - hh) / 0.06) + sm((hh - 0.96) / 0.04), yel = sm((hh - 0.08) / 0.05) * sm((0.32 - hh) / 0.05);\n  hsv(h, 0.46 + 0.08 * warm, 0.9 + 0.1 * warm, tint);\n  iv[0] = 1 - 0.03 * yel;\n  iv[1] = 0.95 + 0.02 * yel;\n  iv[2] = 0.86 + 0.13 * yel;\n  const deep = 1 - 0.45 * warm;\n  // Each LED averages its 2 x 2 fine cells, so stripes under an LED wide\n  // blend into the pastel between the two creams.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 2 * y * GW + 2 * x;\n      led[y * W + x] = 0.25 * (c[g] + c[g + 1] + c[g + GW] + c[g + GW + 1]);\n    }\n  // The surface: the tinted cream stands a little proud of the ivory, so\n  // every fold has two slopes, and a slow swell runs under both.\n  const t = S.clock;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0, wsum = 0;\n      for (let v = -1; v \u003c= 1; v++)\n        for (let u = -1; u \u003c= 1; u++) {\n          const xx = cl(x + u, 0, W - 1), yy = cl(y + v, 0, H - 1), w = u === 0 && v === 0 ? 4 : u === 0 || v === 0 ? 2 : 1;\n          s += led[yy * W + xx] * w;\n          wsum += w;\n        }\n      hgt[y * W + x] = (2.4 * s) / wsum + 0.5 * sin(x * 0.11 + y * 0.05 + t * 0.4) * sin(y * 0.07 - t * 0.3);\n    }\n  // The light comes from the upper left and drifts across and back every\n  // 20 s of turning; Gloss tightens the highlight and brightens it.\n  const gl = S.gloss, la = -2.3 + 0.6 * sin((2 * PI * t) / 20), le = 0.75;\n  const lx = cos(la) * cos(le), ly = sin(la) * cos(le), lz = sin(le);\n  const hx = lx, hy = ly, hz = lz + 1, hn = sqrt(hx * hx + hy * hy + hz * hz);\n  const ex = pow(2, 2.5 + 4 * gl), ks = 0.2 + 0.7 * gl, slope = 0.7 + 1.2 * gl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (hgt[y * W + min(x + 1, W - 1)] - hgt[y * W + max(x - 1, 0)]) * 0.5 * slope;\n      const gy = (hgt[min(y + 1, H - 1) * W + x] - hgt[max(y - 1, 0) * W + x]) * 0.5 * slope;\n      const nl = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * nl, ny = -gy * nl, nz = nl;\n      // A broad satin sheen lifts flat cream by about 0.12; a tight gloss\n      // does not, so the lift is put back by hand and the ivory keeps its\n      // level at any Gloss instead of going beige.\n      const diff = 1 - (0.09 - 0.1 * gl + 0.28 * (lz - (nx * lx + ny * ly + nz * lz))) * deep;\n      const spec = ks * pow(max(0, (nx * hx + ny * hy + nz * hz) / hn), ex);\n      const m = led[p];\n      const r = (iv[0] + (tint[0] - iv[0]) * m) * diff + spec;\n      const g = (iv[1] + (tint[1] - iv[1]) * m) * diff + spec;\n      const b = (iv[2] + (tint[2] - iv[2]) * m) * diff + spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","layer":{"id":"layer-taffy-cream","type":"code","name":"taffy-cream","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Taffy Cream\n// Family:  cosmetic\n// Idea:    A tinted cream and a pale ivory one fill a tall vat and three unseen pins pull them like taffy, two pins at a time turning once round each other, clockwise and then anticlockwise, so the line between the creams is drawn out into glossy folds that multiply and thin, growing about 13 times a period where the braid alone demands 5.8, until they blur into a pastel, when a fresh dollop of tinted cream in an ivory rim is laid in on the pins' path and pulled out in its turn.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 37, after two-tone cream being pulled in a cosmetics mixing vat, with the pins moving as a taffy puller, a rod-stirring protocol in the sense of Philip Boyland, Hassan Aref and Mark Stremler (2000)\n// Round:   37\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1\n//\n// Knob 1: Hue. The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white.\n// Knob 2: Speed. At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower.\n// Knob 3: Pins. How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns.\n// Knob 4: Gloss. At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen.\n// Buttons: K1 tap lays a fresh dollop in now, on the path of the pins that turn next.\n\n// The pins move as the taffy puller: pins on a line, neighbours turning\n// once round each other, the turns alternately clockwise and anticlockwise.\n// The braid of three pins is s1^2 s2^-2, and its Burau matrix at t = -1 is\n// [[5, 2], [2, 1]], whose larger eigenvalue is 3 + 2 sqrt 2 = 5.83, the\n// silver ratio squared: the least a line caught round the pins must be\n// stretched by in one period, whatever the cream between them does.\n// Boyland, Aref and Stremler's half turns, s1 s2^-1, give the golden ratio\n// squared, 2.62. For four and five pins the same matrices give at least 9.9\n// and 12.4 a period of three and four turns. Followed in a scratch script\n// through this pattern's own flow, a line across the middle of the vat grew\n// 17, 13 and 14 times in three periods with three pins, 13 a period with\n// four and 19 to 23 with five: above the floor, as the cream round each\n// pin is sheared besides.\n//\n// The flow: each moving pin carries the cream round it with a stream\n// function psi = (V x (p - r)) g(|p - r|), g = exp(-d^2 / 2 s^2), so cream\n// at the pin goes with the pin and cream a few s away stays put. Each pin\n// has a mirror image behind each of the four walls, moving as its\n// reflection, which takes psi to zero along the walls, so no cream crosses\n// them and it slides along them freely. The velocity is the curl of psi,\n// so the cream keeps its volume. It is worked out on the LED corners, once\n// a step, and read between them.\n//\n// The first try tapered psi to zero over the last 5 LEDs instead. A pin\n// passing 14 LEDs from a side wall left psi near 350 there, and the cream\n// a pin carries comes back round it in a ring two to three s out, so even\n// the top wall, 28 LEDs above the highest pin, saw psi near 75. Squeezed\n// to zero in 5 LEDs, either drove a jet of 40 to 50 LEDs a second along\n// the wall that combed the cream there into stair steps. With the images\n// every corner stays 3.5 s or more from any pin, where g is 0.002, and no\n// taper is needed.\n\nconst W = 64, H = 128, N = W * H;\n// The cream is followed on a grid twice as fine as the LEDs.\nconst GW = 128, GH = 256, GN = GW * GH;\nconst { min, max, floor, sqrt, sin, cos, abs, pow, PI, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\n// One turn takes this many seconds at Speed 1.\nconst TURN = 6;\n// A dollop every this many turns.\nconst EVERY = 5;\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\n// The pins stand on x = 32, sp apart and centred in the vat.\nfunction layout(n) {\n  const sp = min(36, 116 / n), ys = [];\n  for (let j = 0; j \u003c n; j++) ys.push(64 + (j - (n - 1) / 2) * sp);\n  return { n, sp, ys, sg: 0.3 * sp };\n}\n\n// The turning pair and the two pins' places and velocities at phase f of\n// turn k: pair j = k mod (n - 1), clockwise for even j. The angle eases in\n// and out, so a turn starts and ends at rest and the next pair takes over.\nfunction pins(S, out) {\n  const L = S.lay, j = S.turn % (L.n - 1), dir = j % 2 === 0 ? 1 : -1, f = S.phase;\n  const cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const th = 2 * PI * (f - sin(2 * PI * f) / (2 * PI)), om = (2 * PI * (1 - cos(2 * PI * f))) / (S.turnLen || 1);\n  for (let k = 0; k \u003c 2; k++) {\n    const al = (k === 0 ? -PI / 2 : PI / 2) + dir * th;\n    out[k * 4] = 32 + R * cos(al);\n    out[k * 4 + 1] = cy + R * sin(al);\n    out[k * 4 + 2] = -R * sin(al) * dir * om;\n    out[k * 4 + 3] = R * cos(al) * dir * om;\n  }\n  return out;\n}\n\n// Velocity at (x, y) in LED units, written to S.vx, S.vy.\nfunction vel(S, x, y, P) {\n  const is2 = 1 / (S.lay.sg * S.lay.sg);\n  let px = 0, py = 0;\n  for (let k = 0; k \u003c 8; k += 4)\n    for (let m = 0; m \u003c 5; m++) {\n      // The pin, then its images behind the left, right, top and bottom walls.\n      const rx = m === 1 ? -P[k] : m === 2 ? 2 * W - P[k] : P[k], ry = m === 3 ? -P[k + 1] : m === 4 ? 2 * H - P[k + 1] : P[k + 1];\n      const vx = m === 1 || m === 2 ? -P[k + 2] : P[k + 2], vy = m === 3 || m === 4 ? -P[k + 3] : P[k + 3];\n      const dx = x - rx, dy = y - ry, d2 = (dx * dx + dy * dy) * is2;\n      if (d2 > 30) continue;\n      const g = Math.exp(-0.5 * d2), c = vx * dy - vy * dx;\n      px += -vy * g - c * g * dx * is2;\n      py += vx * g - c * g * dy * is2;\n    }\n  S.vx = py;\n  S.vy = -px;\n}\n\n// Catmull-Rom sample of the fine grid at grid coordinates (gx, gy), held\n// between the four nearest values so a stripe edge never rings.\nfunction sample(c, gx, gy) {\n  gx = cl(gx, 0, GW - 1.001);\n  gy = cl(gy, 0, GH - 1.001);\n  const ix = floor(gx), iy = floor(gy), fx = gx - ix, fy = gy - iy;\n  const wx0 = ((-0.5 * fx + 1) * fx - 0.5) * fx, wx1 = (1.5 * fx - 2.5) * fx * fx + 1, wx2 = ((-1.5 * fx + 2) * fx + 0.5) * fx, wx3 = (0.5 * fx - 0.5) * fx * fx;\n  const wy0 = ((-0.5 * fy + 1) * fy - 0.5) * fy, wy1 = (1.5 * fy - 2.5) * fy * fy + 1, wy2 = ((-1.5 * fy + 2) * fy + 0.5) * fy, wy3 = (0.5 * fy - 0.5) * fy * fy;\n  const x0 = max(ix - 1, 0), x2 = ix + 1, x3 = min(ix + 2, GW - 1);\n  let s = 0;\n  for (let k = 0; k \u003c 4; k++) {\n    const row = min(max(iy - 1 + k, 0), GH - 1) * GW, wy = k === 0 ? wy0 : k === 1 ? wy1 : k === 2 ? wy2 : wy3;\n    s += wy * (c[row + x0] * wx0 + c[row + ix] * wx1 + c[row + x2] * wx2 + c[row + x3] * wx3);\n  }\n  const a = c[iy * GW + ix], b = c[iy * GW + x2], d = c[(iy + 1) * GW + ix], e = c[(iy + 1) * GW + x2];\n  return cl(s, min(min(a, b), min(d, e)), max(max(a, b), max(d, e)));\n}\n\n// One step of the cream: each fine cell looks back along the flow, a\n// midpoint step, and takes what was there. Cells under LEDs whose corners\n// all move less than a ten-thousandth of an LED a step are copied as they\n// are; at that rate a still cell and a moving neighbour part by 0.2 LED in\n// a minute, and the turning pair changes long before.\nconst VW = W + 1, VH = H + 1;\nfunction advect(S, dt) {\n  const P = pins(S, S.P), c = S.c, o = S.c2, U = S.U, V = S.V, still = S.still;\n  for (let y = 0; y \u003c VH; y++)\n    for (let x = 0; x \u003c VW; x++) {\n      vel(S, x, y, P);\n      U[y * VW + x] = S.vx;\n      V[y * VW + x] = S.vy;\n    }\n  const lim = (1e-4 / dt) * (1e-4 / dt);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * VW + x, r = q + VW;\n      const m = max(max(U[q] * U[q] + V[q] * V[q], U[q + 1] * U[q + 1] + V[q + 1] * V[q + 1]), max(U[r] * U[r] + V[r] * V[r], U[r + 1] * U[r + 1] + V[r + 1] * V[r + 1]));\n      still[y * W + x] = m \u003c lim ? 1 : 0;\n    }\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, ly = gy >> 1;\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const p = gy * GW + gx;\n      if (still[ly * W + (gx >> 1)]) {\n        o[p] = c[p];\n        continue;\n      }\n      const x = (gx + 0.5) / 2;\n      // Bilinear velocity at (x, y), then at the midpoint back along it.\n      let ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, q = iy * VW + ix;\n      let vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      let vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      const mx = cl(x - 0.5 * dt * vx, 0, W - 0.001), my = cl(y - 0.5 * dt * vy, 0, H - 0.001);\n      (ix = floor(mx)), (iy = floor(my)), (fx = mx - ix), (fy = my - iy), (q = iy * VW + ix);\n      vx = (U[q] * (1 - fx) + U[q + 1] * fx) * (1 - fy) + (U[q + VW] * (1 - fx) + U[q + VW + 1] * fx) * fy;\n      vy = (V[q] * (1 - fx) + V[q + 1] * fx) * (1 - fy) + (V[q + VW] * (1 - fx) + V[q + VW + 1] * fx) * fy;\n      o[p] = sample(c, (x - dt * vx) * 2 - 0.5, (y - dt * vy) * 2 - 0.5);\n    }\n  }\n  S.c = o;\n  S.c2 = c;\n}\n\n// A dollop: a tinted core with an ivory rim, its edge wobbling on two\n// harmonics, laid where the next turn's pins will pass.\nfunction dollop(S) {\n  const L = S.lay, j = S.turn % (L.n - 1), cy = (L.ys[j] + L.ys[j + 1]) / 2, R = L.sp / 2;\n  const al = random() * 2 * PI, x0 = 32 + R * cos(al) * 0.8, y0 = cy + R * sin(al) * 0.8;\n  const r1 = 0.36 * L.sp + 4, r2 = r1 + 4 + 0.08 * L.sp, p1 = random() * 6.3, p2 = random() * 6.3, c = S.c;\n  for (let gy = 0; gy \u003c GH; gy++)\n    for (let gx = 0; gx \u003c GW; gx++) {\n      const dx = (gx + 0.5) / 2 - x0, dy = (gy + 0.5) / 2 - y0, d = sqrt(dx * dx + dy * dy);\n      if (d > r2 * 1.3 + 1) continue;\n      const an = Math.atan2(dy, dx), wob = 1 + 0.12 * sin(2 * an + p1) + 0.07 * sin(3 * an + p2);\n      const e = d / wob;\n      if (e > r2 + 0.5) continue;\n      const core = sm(r1 + 0.5 - e), rim = sm(r2 + 0.5 - e), p = gy * GW + gx;\n      c[p] = c[p] * (1 - rim) + core;\n    }\n}\n\nfunction fresh(S) {\n  // The vat opens with the tinted cream on the left and the ivory on the\n  // right, the line between them wavering across the pins.\n  const c = S.c, ph = random() * 6.3;\n  for (let gy = 0; gy \u003c GH; gy++) {\n    const y = (gy + 0.5) / 2, edge = 32 + 6 * sin((y / H) * 2 * PI * 1.5 + ph);\n    for (let gx = 0; gx \u003c GW; gx++) c[gy * GW + gx] = sm(edge + 0.5 - (gx + 0.5) / 2);\n  }\n}\n\nfunction step(S, d, lim = 3) {\n  S.turnLen = TURN / S.speed;\n  S.clock += d * S.speed;\n  // Substeps keep the pins under 3 LEDs a step: one at Speed 2, two at 3.\n  const vmax = (S.lay.sp / 2) * 4 * PI / S.turnLen, ns = max(1, Math.ceil((vmax * d) / lim));\n  for (let i = 0; i \u003c ns; i++) {\n    advect(S, d / ns);\n    S.phase += d / ns / S.turnLen;\n    if (S.phase >= 1) {\n      S.phase -= 1;\n      S.turn++;\n      if (++S.since >= EVERY) (S.since = 0), dollop(S);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.s = {\n    c: new Float32Array(GN), c2: new Float32Array(GN), led: new Float32Array(N), hgt: new Float32Array(N),\n    P: new Float64Array(8), vx: 0, vy: 0, U: new Float32Array(VW * VH), V: new Float32Array(VW * VH), still: new Uint8Array(N), lay: layout(3), n: 3, hue: 0, speed: 2, gloss: 0.06,\n    turn: 0, phase: 0, since: 0, turnLen: 3, clock: 0, warm: false, tint: [0, 0, 0], ivory: [1, 0.95, 0.86],\n  };\n  fresh(params.s);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 3, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.gloss = cl(k[3], 0, 1);\n  const n = Math.round(cl(k[2], 3, 5));\n  if (n !== S.n) {\n    // The pins are unseen, so they simply take their new places; the turn\n    // under way goes on with the new pair.\n    S.n = n;\n    S.lay = layout(n);\n  }\n  if (!S.warm) {\n    // Open a turn and a half in, the first folds already drawn. The 4.5 s\n    // run in steps of up to 6 LEDs, 60 of them, about 0.3 s of work.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 30; i++) step(S, 0.15, 6);\n    S.speed = sp;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) dollop(S);\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, led = S.led, hgt = S.hgt, tint = S.tint, iv = S.ivory;\n  // The tint: lilac at 0. From coral to lime it is brought up to full\n  // brightness and its shading made shallower, as a darker peach reads brown\n  // and a darker butter khaki. Next to butter and lime the ivory turns to a\n  // cooler white, or the two creams would be one.\n  const h = S.hue + 0.76, hh = h - floor(h);\n  const warm = sm(hh / 0.05) * sm((0.3 - hh) / 0.06) + sm((hh - 0.96) / 0.04), yel = sm((hh - 0.08) / 0.05) * sm((0.32 - hh) / 0.05);\n  hsv(h, 0.46 + 0.08 * warm, 0.9 + 0.1 * warm, tint);\n  iv[0] = 1 - 0.03 * yel;\n  iv[1] = 0.95 + 0.02 * yel;\n  iv[2] = 0.86 + 0.13 * yel;\n  const deep = 1 - 0.45 * warm;\n  // Each LED averages its 2 x 2 fine cells, so stripes under an LED wide\n  // blend into the pastel between the two creams.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 2 * y * GW + 2 * x;\n      led[y * W + x] = 0.25 * (c[g] + c[g + 1] + c[g + GW] + c[g + GW + 1]);\n    }\n  // The surface: the tinted cream stands a little proud of the ivory, so\n  // every fold has two slopes, and a slow swell runs under both.\n  const t = S.clock;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let s = 0, wsum = 0;\n      for (let v = -1; v \u003c= 1; v++)\n        for (let u = -1; u \u003c= 1; u++) {\n          const xx = cl(x + u, 0, W - 1), yy = cl(y + v, 0, H - 1), w = u === 0 && v === 0 ? 4 : u === 0 || v === 0 ? 2 : 1;\n          s += led[yy * W + xx] * w;\n          wsum += w;\n        }\n      hgt[y * W + x] = (2.4 * s) / wsum + 0.5 * sin(x * 0.11 + y * 0.05 + t * 0.4) * sin(y * 0.07 - t * 0.3);\n    }\n  // The light comes from the upper left and drifts across and back every\n  // 20 s of turning; Gloss tightens the highlight and brightens it.\n  const gl = S.gloss, la = -2.3 + 0.6 * sin((2 * PI * t) / 20), le = 0.75;\n  const lx = cos(la) * cos(le), ly = sin(la) * cos(le), lz = sin(le);\n  const hx = lx, hy = ly, hz = lz + 1, hn = sqrt(hx * hx + hy * hy + hz * hz);\n  const ex = pow(2, 2.5 + 4 * gl), ks = 0.2 + 0.7 * gl, slope = 0.7 + 1.2 * gl;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gx = (hgt[y * W + min(x + 1, W - 1)] - hgt[y * W + max(x - 1, 0)]) * 0.5 * slope;\n      const gy = (hgt[min(y + 1, H - 1) * W + x] - hgt[max(y - 1, 0) * W + x]) * 0.5 * slope;\n      const nl = 1 / sqrt(gx * gx + gy * gy + 1), nx = -gx * nl, ny = -gy * nl, nz = nl;\n      // A broad satin sheen lifts flat cream by about 0.12; a tight gloss\n      // does not, so the lift is put back by hand and the ivory keeps its\n      // level at any Gloss instead of going beige.\n      const diff = 1 - (0.09 - 0.1 * gl + 0.28 * (lz - (nx * lx + ny * ly + nz * lz))) * deep;\n      const spec = ks * pow(max(0, (nx * hx + ny * hy + nz * hz) / hn), ex);\n      const m = led[p];\n      const r = (iv[0] + (tint[0] - iv[0]) * m) * diff + spec;\n      const g = (iv[1] + (tint[1] - iv[1]) * m) * diff + spec;\n      const b = (iv[2] + (tint[2] - iv[2]) * m) * diff + spec;\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Pins=3..5, Gloss=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tinted cream, once round the wheel against the ivory. At 0 lilac, at 0.15 orchid pink, at 0.25 coral, at 0.33 apricot, at 0.42 butter, at 0.5 lime, at 0.6 mint green, at 0.7 aqua, at 0.85 cornflower. From coral to lime the tint stays at full brightness with shallower shading, as a darker one reads brown or khaki, and beside butter and lime the ivory turns to a cooler white."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a pair of pins turns once round each other in 3 s, so a period of three pins takes 6 s, and a dollop is laid in every 5 turns, 15 s; at 0.2 all of it runs ten times slower."},{"name":"Pins","min":3,"max":5,"about":"How many pins stand on the vat's long axis, 3 to 5, the pairs taking their turns from the top down, then again. Three pins 36 LEDs apart turn in circles 36 across and a line grows 13 to 14 times a period of two turns; four pins 29 apart, 13 times a period of three; five pins 23 apart turn in circles 23 across, whose pins come 10 LEDs nearer the top and bottom and stay 20 from the sides, and a line grows about 20 times a period of four turns."},{"name":"Gloss","min":0,"max":1,"about":"At 0 a soft satin cream lit broadly; at 1 a wet gloss with a tight white highlight that runs along each fold's crest as the light drifts over it. It opens at 0.06, a satin sheen."}],"start":[0,2,3,0.06],"measures":{"motion":0.1992,"detail":0.0229,"edges":0.0398,"complexity":1.5866,"coverage":1,"colour":0.2145,"drift":0.034},"knobResponse":[0.174,0.088,0.0927,0.0503]},{"slug":"talbot-carpet","title":"Talbot Carpet","family":"wave","round":32,"note":"좁은 슬릿 격자를 지난 빛의 세기를, 격자에서 멀어지는 거리를 세로로 두고 그려요. 슬릿 상이 한 탤벗 길이마다 그대로, 반 길이마다 반 주기 옆으로 되살아나고, 그 사이 분수 거리에서는 둘과 넷으로 갈라진 상과 곧은 빛줄기가 엇갈려요. 남색 골과 청록 바닥, 흰 방울이 1 LED 망점 위에서 1초에 15줄씩 올라가요.","idea":"Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.","buttons":"K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.","code":"// ===== Patternflow pattern =====\n// Title:   Talbot Carpet\n// Family:  wave\n// Idea:    Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Talbot effect (Henry Fox Talbot, 1836) and quantum carpets (Michael Berry, 1996), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4\n//\n// Knob 1: Hue. Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow.\n// Knob 2: Speed. How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds.\n// Knob 3: Slit. The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies.\n// Knob 4: Periods. How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter.\n// Buttons: K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.\n\nconst W = 64, H = 128, M = 256, R = 512;\nconst { floor, min, sin, cos, pow, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Share of the lit LEDs in the screen that go to beads: the brightest 14.5%\n// of each frame, which fixes the measured edges near 0.14.\nconst CUT = 0.855;\n\n// In-place radix-2 FFT with the + sign, so it sums c_n e^{+2 pi i n j / M}.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// psi(x, tau) = sum c_n exp(2 pi i (n x - n^2 tau)) for a slit of width w\n// centred on x = 0, 256 terms with a Gaussian roll-off, at R steps of tau\n// over one Talbot length. Each row keeps a running sum of |psi|^2 over one\n// period, so a column of any width is two lookups.\nfunction build(P) {\n  const w = P.w, c = new Float64Array(M), re = new Float64Array(M), im = new Float64Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    const n = k \u003c M / 2 ? k : k - M;\n    c[k] = (n === 0 ? w : sin(PI * n * w) / (PI * n)) * exp(-(n / 24) * (n / 24));\n  }\n  const S = P.sum;\n  for (let r = 0; r \u003c R; r++) {\n    for (let k = 0; k \u003c M; k++) {\n      const n = k \u003c M / 2 ? k : k - M;\n      // n^2 r is an integer, so the phase wraps exactly.\n      const ph = (-2 * PI * ((n * n * r) % R)) / R;\n      re[k] = c[k] * cos(ph);\n      im[k] = c[k] * sin(ph);\n    }\n    fft(re, im);\n    const o = r * (M + 1);\n    S[o] = 0;\n    for (let j = 0; j \u003c M; j++) S[o + j + 1] = S[o + j] + re[j] * re[j] + im[j] * im[j];\n  }\n  P.builtW = w;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Box blur, rows wrapping (the carpet is periodic across), columns clamped.\nfunction blur(src, dst, tmp, rad) {\n  const n = 2 * rad + 1;\n  for (let y = 0; y \u003c H; y++) {\n    let acc = 0;\n    for (let k = -rad; k \u003c= rad; k++) acc += src[y * W + ((k + W) % W)];\n    for (let x = 0; x \u003c W; x++) {\n      tmp[y * W + x] = acc / n;\n      acc += src[y * W + ((x + rad + 1) % W)] - src[y * W + ((x - rad + W) % W)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      let acc = 0;\n      for (let k = -rad; k \u003c= rad; k++) acc += tmp[cl(y + k, 0, H - 1) * W + x];\n      dst[y * W + x] = acc / n;\n    }\n}\n\nexport function setup(params) {\n  const N = W * H;\n  params.s = {\n    t: 0, hue: 0, speed: 2, w: 0.1, builtW: -1, per: 1,\n    sum: new Float32Array(R * (M + 1)), I: new Float32Array(N), G: new Float32Array(N), T: new Float32Array(N),\n    U: new Float32Array(N), Lv: new Int16Array(N), srt: new Float32Array(N / 2), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 1], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.w = round((0.1 + 0.35 * cl(k[2], 0, 1)) * 100) / 100;\n  P.per = cl(k[3], 1, 4);\n  if (P.w !== P.builtW) build(P);\n  P.t += d * P.speed * 0.06;\n  if (input.btnPressed && input.btnPressed[0]) P.t += 0.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { sum: S, I, G, T, U, Lv, srt, c } = P;\n  // Row y holds tau from t + y/128 to t + (y+1)/128: four table rows,\n  // averaged, and each LED the mean over its width of the period.\n  for (let y = 0; y \u003c H; y++) {\n    const ra = floor((P.t + y / H) * R), rb = Math.max(ra + 1, floor((P.t + (y + 1) / H) * R));\n    for (let x = 0; x \u003c W; x++) I[y * W + x] = 0;\n    for (let rr = ra; rr \u003c rb; rr++) {\n      const o = (((rr % R) + R) % R) * (M + 1);\n      const at = (u) => {\n        const q = floor(u / M), v = u - q * M, i = floor(v);\n        return q * S[o + M] + S[o + i] + (S[o + i + 1] - S[o + i]) * (v - i);\n      };\n      let prev = at((0.5 * M) | 0);\n      for (let x = 0; x \u003c W; x++) {\n        const u1 = (((x + 1) / W) * P.per + 0.5) * M, next = at(u1);\n        I[y * W + x] += (next - prev) / ((P.per * M) / W) / (rb - ra);\n        prev = next;\n      }\n    }\n  }\n  // The screen: LEDs with x + y odd carry a soft glow of the carpet, blurred\n  // so it never steps more than a few levels from one LED to the next. The\n  // others stand 40 above the darkest glow beside them, so every pair of\n  // neighbours differs by 40 or a little less, or they hold a bead at full\n  // brightness where the carpet is brightest.\n  blur(I, T, U, 2);\n  blur(T, G, U, 2);\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) srt[n++] = I[y * W + x];\n  srt.sort();\n  const hi = srt[floor(n * CUT)], top = srt[floor(n * 0.995)], mid = srt[n >> 1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = (y + 1) & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      Lv[p] = round(8 + 70 * cl(pow(G[p] / (2.2 * mid), 0.9), 0, 1));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = y & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      if (I[p] > hi) {\n        Lv[p] = 255;\n        continue;\n      }\n      let m = 255;\n      if (x > 0) m = min(m, Lv[p - 1]);\n      if (x \u003c W - 1) m = min(m, Lv[p + 1]);\n      if (y > 0) m = min(m, Lv[p - W]);\n      if (y \u003c H - 1) m = min(m, Lv[p + W]);\n      Lv[p] = m + 40;\n    }\n  // Colour carries the fine carpet at no cost to the screen: the canals\n  // deep and saturated, the floor paler and greener as it brightens.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, L = Lv[p];\n      if (L === 255) hsv(P.hue + 0.5, 0.35 * (1 - cl((I[p] - hi) / (top - hi), 0, 1)), 1, c);\n      else {\n        const t = cl(pow(I[p] / (2.5 * mid), 0.7), 0, 1);\n        hsv(P.hue + 0.64 - 0.14 * t, 1 - 0.5 * t, 1, c);\n      }\n      display.setPixel(x, y, round(c[0] * L), round(c[1] * L), round(c[2] * L));\n    }\n}\n","layer":{"id":"layer-talbot-carpet","type":"code","name":"talbot-carpet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Talbot Carpet\n// Family:  wave\n// Idea:    Light past a grating of narrow slits, its intensity drawn with the distance from the grating running down the panel on a one-LED halftone screen: the slits come back whole after one Talbot length and half a period over after half of one, split into copies at the fractions in between, and the carpet of rays and beads climbs past as the view moves away from the grating.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Talbot effect (Henry Fox Talbot, 1836) and quantum carpets (Michael Berry, 1996), pattern round 32\n// Round:   32\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4\n//\n// Knob 1: Hue. Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow.\n// Knob 2: Speed. How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds.\n// Knob 3: Slit. The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies.\n// Knob 4: Periods. How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter.\n// Buttons: K1 tap moves the carpet on by half a Talbot length, so every slit image jumps half a period sideways: the carpet's own half-length revival.\n\nconst W = 64, H = 128, M = 256, R = 512;\nconst { floor, min, sin, cos, pow, round, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Share of the lit LEDs in the screen that go to beads: the brightest 14.5%\n// of each frame, which fixes the measured edges near 0.14.\nconst CUT = 0.855;\n\n// In-place radix-2 FFT with the + sign, so it sums c_n e^{+2 pi i n j / M}.\nfunction fft(re, im) {\n  const n = re.length;\n  for (let i = 1, j = 0; i \u003c n; i++) {\n    let bit = n >> 1;\n    for (; j & bit; bit >>= 1) j ^= bit;\n    j ^= bit;\n    if (i \u003c j) {\n      let t = re[i];\n      re[i] = re[j];\n      re[j] = t;\n      t = im[i];\n      im[i] = im[j];\n      im[j] = t;\n    }\n  }\n  for (let len = 2; len \u003c= n; len \u003c\u003c= 1) {\n    const ang = (2 * PI) / len, wr = cos(ang), wi = sin(ang), h = len >> 1;\n    for (let i = 0; i \u003c n; i += len) {\n      let cr = 1, ci = 0;\n      for (let k = 0; k \u003c h; k++) {\n        const a = i + k, b = a + h;\n        const xr = re[b] * cr - im[b] * ci, xi = re[b] * ci + im[b] * cr;\n        re[b] = re[a] - xr;\n        im[b] = im[a] - xi;\n        re[a] += xr;\n        im[a] += xi;\n        const nr = cr * wr - ci * wi;\n        ci = cr * wi + ci * wr;\n        cr = nr;\n      }\n    }\n  }\n}\n\n// psi(x, tau) = sum c_n exp(2 pi i (n x - n^2 tau)) for a slit of width w\n// centred on x = 0, 256 terms with a Gaussian roll-off, at R steps of tau\n// over one Talbot length. Each row keeps a running sum of |psi|^2 over one\n// period, so a column of any width is two lookups.\nfunction build(P) {\n  const w = P.w, c = new Float64Array(M), re = new Float64Array(M), im = new Float64Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    const n = k \u003c M / 2 ? k : k - M;\n    c[k] = (n === 0 ? w : sin(PI * n * w) / (PI * n)) * exp(-(n / 24) * (n / 24));\n  }\n  const S = P.sum;\n  for (let r = 0; r \u003c R; r++) {\n    for (let k = 0; k \u003c M; k++) {\n      const n = k \u003c M / 2 ? k : k - M;\n      // n^2 r is an integer, so the phase wraps exactly.\n      const ph = (-2 * PI * ((n * n * r) % R)) / R;\n      re[k] = c[k] * cos(ph);\n      im[k] = c[k] * sin(ph);\n    }\n    fft(re, im);\n    const o = r * (M + 1);\n    S[o] = 0;\n    for (let j = 0; j \u003c M; j++) S[o + j + 1] = S[o + j] + re[j] * re[j] + im[j] * im[j];\n  }\n  P.builtW = w;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// Box blur, rows wrapping (the carpet is periodic across), columns clamped.\nfunction blur(src, dst, tmp, rad) {\n  const n = 2 * rad + 1;\n  for (let y = 0; y \u003c H; y++) {\n    let acc = 0;\n    for (let k = -rad; k \u003c= rad; k++) acc += src[y * W + ((k + W) % W)];\n    for (let x = 0; x \u003c W; x++) {\n      tmp[y * W + x] = acc / n;\n      acc += src[y * W + ((x + rad + 1) % W)] - src[y * W + ((x - rad + W) % W)];\n    }\n  }\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c H; y++) {\n      let acc = 0;\n      for (let k = -rad; k \u003c= rad; k++) acc += tmp[cl(y + k, 0, H - 1) * W + x];\n      dst[y * W + x] = acc / n;\n    }\n}\n\nexport function setup(params) {\n  const N = W * H;\n  params.s = {\n    t: 0, hue: 0, speed: 2, w: 0.1, builtW: -1, per: 1,\n    sum: new Float32Array(R * (M + 1)), I: new Float32Array(N), G: new Float32Array(N), T: new Float32Array(N),\n    U: new Float32Array(N), Lv: new Int16Array(N), srt: new Float32Array(N / 2), c: [0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 1], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.w = round((0.1 + 0.35 * cl(k[2], 0, 1)) * 100) / 100;\n  P.per = cl(k[3], 1, 4);\n  if (P.w !== P.builtW) build(P);\n  P.t += d * P.speed * 0.06;\n  if (input.btnPressed && input.btnPressed[0]) P.t += 0.5;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { sum: S, I, G, T, U, Lv, srt, c } = P;\n  // Row y holds tau from t + y/128 to t + (y+1)/128: four table rows,\n  // averaged, and each LED the mean over its width of the period.\n  for (let y = 0; y \u003c H; y++) {\n    const ra = floor((P.t + y / H) * R), rb = Math.max(ra + 1, floor((P.t + (y + 1) / H) * R));\n    for (let x = 0; x \u003c W; x++) I[y * W + x] = 0;\n    for (let rr = ra; rr \u003c rb; rr++) {\n      const o = (((rr % R) + R) % R) * (M + 1);\n      const at = (u) => {\n        const q = floor(u / M), v = u - q * M, i = floor(v);\n        return q * S[o + M] + S[o + i] + (S[o + i + 1] - S[o + i]) * (v - i);\n      };\n      let prev = at((0.5 * M) | 0);\n      for (let x = 0; x \u003c W; x++) {\n        const u1 = (((x + 1) / W) * P.per + 0.5) * M, next = at(u1);\n        I[y * W + x] += (next - prev) / ((P.per * M) / W) / (rb - ra);\n        prev = next;\n      }\n    }\n  }\n  // The screen: LEDs with x + y odd carry a soft glow of the carpet, blurred\n  // so it never steps more than a few levels from one LED to the next. The\n  // others stand 40 above the darkest glow beside them, so every pair of\n  // neighbours differs by 40 or a little less, or they hold a bead at full\n  // brightness where the carpet is brightest.\n  blur(I, T, U, 2);\n  blur(T, G, U, 2);\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) srt[n++] = I[y * W + x];\n  srt.sort();\n  const hi = srt[floor(n * CUT)], top = srt[floor(n * 0.995)], mid = srt[n >> 1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = (y + 1) & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      Lv[p] = round(8 + 70 * cl(pow(G[p] / (2.2 * mid), 0.9), 0, 1));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = y & 1; x \u003c W; x += 2) {\n      const p = y * W + x;\n      if (I[p] > hi) {\n        Lv[p] = 255;\n        continue;\n      }\n      let m = 255;\n      if (x > 0) m = min(m, Lv[p - 1]);\n      if (x \u003c W - 1) m = min(m, Lv[p + 1]);\n      if (y > 0) m = min(m, Lv[p - W]);\n      if (y \u003c H - 1) m = min(m, Lv[p + W]);\n      Lv[p] = m + 40;\n    }\n  // Colour carries the fine carpet at no cost to the screen: the canals\n  // deep and saturated, the floor paler and greener as it brightens.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, L = Lv[p];\n      if (L === 255) hsv(P.hue + 0.5, 0.35 * (1 - cl((I[p] - hi) / (top - hi), 0, 1)), 1, c);\n      else {\n        const t = cl(pow(I[p] / (2.5 * mid), 0.7), 0, 1);\n        hsv(P.hue + 0.64 - 0.14 * t, 1 - 0.5 * t, 1, c);\n      }\n      display.setPixel(x, y, round(c[0] * L), round(c[1] * L), round(c[2] * L));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Slit=0..1, Periods=1..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the carpet round the wheel. At 0 the dark canals are deep blue, the floor between them goes from azure to pale cyan as it brightens, and the beads are near-white aqua; at 0.33 the canals are crimson and the floor magenta, at 0.66 the canals green and the floor yellow."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the carpet climbs. At 2 it moves 0.12 of a Talbot length a second, 15 LEDs, and a whole length passes in 8.3 seconds; at 0.2 it takes 83 seconds."},{"name":"Slit","min":0,"max":1,"about":"The slit width as a share of the period, 0.10 at 0 (6 LEDs at one period) to 0.45 at 1. A narrow slit gives the sharp carpet, straight rays fanning out of every revival and many small copies; a wide one gives soft blobs and only the half and quarter copies."},{"name":"Periods","min":1,"max":4,"about":"How many grating periods sit across the panel while one Talbot length still fills the 128 rows. At 1 one slit image stands in the middle; at 2 two, 32 LEDs apart; at 4 four, and the rays lie much flatter."}],"start":[0,2,0,1],"measures":{"motion":0.9679,"detail":0.2277,"edges":0.1425,"complexity":1.3191,"coverage":0.9648,"colour":0.1367,"drift":0.088},"knobResponse":[0.1564,0.1417,0.1324,0.1293]},{"slug":"test-card","title":"Test Card","family":"glitch","round":1,"note":"텔레비전 컬러 바를, 수직 동기를 잃어 가는 수상기가 보여 주는 대로 그려요.","idea":"A television's colour bars, as a set that is losing its hold would show them.","buttons":"K1 tap tears the picture now.","code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","layer":{"id":"layer-test-card","type":"code","name":"test-card","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole set of bars round the colour wheel."},{"name":"Bursts","min":0.2,"max":6,"about":"How often the picture tears."},{"name":"Damage","min":0.15,"max":1,"about":"From a clean card with the odd twitch to bars torn apart and smeared."},{"name":"Roll","min":0,"max":1,"about":"The vertical hold: the picture starts to slip and roll."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.2635,"detail":0.0837,"edges":0.7844,"complexity":0.0808,"coverage":0.8476,"colour":0.6265,"drift":0.0606},"knobResponse":[0.3578,0.0535,0.0933,0.3676]},{"slug":"tetromino-well","title":"Tetromino Well","family":"algo","round":10,"note":"세운 패널이 너비 10칸, 높이 21칸의 테트리스 우물이에요. 지치지 않는 플레이어가 꼭대기에 기다리는 다음 조각을 보며 패널의 3분의 2 높이까지 쌓고, 오른쪽 한 줄을 비워 두었다가 긴 막대가 오면 네 줄을 한꺼번에 지워요. K1 을 누르면 긴 막대가 다음 조각으로 와요.","idea":"The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.","buttons":"K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.","code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","layer":{"id":"layer-tetromino-well","type":"code","name":"tetromino-well","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L."},{"name":"Speed","min":0.2,"max":3,"about":"How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one."},{"name":"Headroom","min":6,"max":18,"about":"The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor."},{"name":"Garbage","min":0,"max":1,"about":"The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it."}],"start":[0,2,6,0.06],"measures":{"motion":0.2184,"detail":0.0909,"edges":0.7088,"complexity":0.1224,"coverage":0.6512,"colour":0.4389,"drift":0.0999},"knobResponse":[0.2488,0.0464,0.2189,0.2009]},{"slug":"thermal","title":"Thermal","family":"flight","round":24,"note":"여름 오후의 밭 위에서 흰 글라이더가 열기류를 타고 타원을 그리며 맴돌아 올라가요. 말똥가리 둘이 더 좁게 같이 돌고, 꼭대기의 적운은 자라며 바닥이 어두워져요. 구름 바닥에 닿은 글라이더는 다음 열기류로 미끄러져 가고 아래에서 새 글라이더가 들어와요. K1 을 누르면 윈치가 글라이더 하나를 끌어올려요.","idea":"A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.","buttons":"K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.","code":"// ===== Patternflow pattern =====\n// Title:   Thermal\n// Family:  flight\n// Idea:    A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after thermal soaring under fair-weather cumulus over farmland\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1\n//\n// Knob 1: Hour. Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows.\n// Knob 2: Speed. At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower.\n// Knob 3: Gliders. One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up.\n// Knob 4: Wind. The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm.\n// Buttons: K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, round, pow, sign, PI } = Math;\nconst TAU = 2 * PI;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\nconst rnd = () => Math.random();\n// Rows: horizon, first field row, cloud base, where the thermal leaves the ground.\nconst [HOR, FY, YB, YG] = [97, 100, 36, 116];\n// The ploughed field the thermal comes off: its column and its distance.\nconst [SRCX, DSRC] = [29, 9.6];\n// We look up a little, so a level circle is a thin ellipse; the craft are drawn flatter so a banked wing does not stand on end.\nconst SE = sin(0.3);\nconst [BE, BC] = [sin(0.1), cos(0.1)];\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\nconst fbm = (x, y, s) => 0.55 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.15 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Pasture, beans, stubble, wheat, hay and plough in midday sun; 1 marks rows running away from us.\nconst CROP = [[70, 150, 45, 0], [38, 106, 36, 1], [216, 184, 94, 1], [198, 160, 66, 0], [142, 178, 74, 0], [96, 62, 40, 1]];\nconst PICK = [0, 0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Tapered strokes in the craft's axes: forward, right, up, twice, then two radii.\nconst GLIDER = [[3.6, 0, -0.1, -4.8, 0, 0.15, 0.85, 0.45], [0.6, 0, 0.25, 0.25, -9, 0.85, 0.75, 0.45], [0.6, 0, 0.25, 0.25, 9, 0.85, 0.75, 0.45], [-4.2, 0, 0.1, -4.9, 0, 2.4, 0.55, 0.45], [-4.9, -2.6, 2.4, -4.9, 2.6, 2.4, 0.45, 0.45]];\nconst BUZZ = [[1.3, 0, 0, -1.3, 0, 0, 0.6, 0.45], [0.2, 0, 0.1, -0.3, -3.7, 0.75, 0.8, 0.45], [0.2, 0, 0.1, -0.3, 3.7, 0.75, 0.8, 0.45], [-1.2, 0, 0, -2.5, 0, 0.1, 0.45, 0.65]];\n\n// A cumulus as puffs over a flat base: each puff's place (u across, v up), its radius r and when in its growth it appears.\nfunction puffs() {\n  const L = [];\n  const add = (u, v, r, t0) => L.push({ u: u + (rnd() - 0.5) * 0.14, v: v + (rnd() - 0.5) * 0.08, r: r * (0.88 + 0.24 * rnd()), t0, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 5; i++) add(-0.76 + i * 0.38, 0.2, 0.34, i === 2 ? 0 : 0.03 + 0.12 * rnd());\n  for (let i = 0; i \u003c 4; i++) add(-0.5 + i * 0.33, 0.45, 0.33, 0.08 + 0.17 * rnd());\n  for (let i = 0; i \u003c 3; i++) add(-0.3 + i * 0.3, 0.68, 0.3, 0.3 + 0.2 * rnd());\n  for (let i = 0; i \u003c 2; i++) add((rnd() - 0.5) * 0.4, 0.86, 0.26, 0.55 + 0.15 * rnd());\n  return L;\n}\nconst newCloud = (x, a) => ({ x, a, g: 0, al: 1, det: false, p: puffs(), sd: floor(rnd() * 999) });\n\n// Fields lie in strips at distance D (row = HOR + 180 / D), each cut into fields across.\nfunction buildFields(S) {\n  const strips = [], trees = [], us = ((SRCX - 32) * DSRC) / 64, hw = (11 * DSRC) / 64;\n  for (let D = 5.6; D \u003c 66; ) {\n    const D2 = D * (1.22 + 0.12 * rnd());\n    const wid = () => ((12 + 18 * rnd()) * pow(6 / D, 0.35) * D) / 64;\n    let b = [];\n    for (let u = -0.62 * D2 - rnd() * wid(); u \u003c 0.62 * D2 + 0.3; u += wid()) b.push(u);\n    const src = D \u003c= DSRC && DSRC \u003c D2;\n    if (src) {\n      b = b.filter((u) => u \u003c us - hw - 0.3 || u > us + hw + 0.3);\n      b.push(us - hw, us + hw);\n      b.sort((p, q) => p - q);\n    }\n    const t = [];\n    for (let j = 0; j \u003c b.length - 1; j++) {\n      let k;\n      do k = PICK[floor(rnd() * PICK.length)];\n      while (j && k === t[j - 1]);\n      t.push(k);\n    }\n    if (src) t[b.indexOf(us - hw)] = 5;\n    strips.push({ d0: D, d1: D2, b, t, hh: 0.12 + 0.08 * rnd(), i: strips.length });\n    // Trees in the hedge along each strip's near edge, and at some corners.\n    for (let j = 0; j \u003c 2; j++) if (rnd() \u003c 0.6) trees.push({ u: (rnd() - 0.5) * 1.1 * D, D: D + 0.05, rc: 0.2 + 0.14 * rnd() });\n    for (let j = 1; j \u003c b.length - 1; j++) if (rnd() \u003c 0.2) trees.push({ u: b[j], D: D + 0.05, rc: 0.2 + 0.12 * rnd() });\n    D = D2;\n  }\n  for (const tr of trees) tr.hc = tr.rc * 1.5 + 0.15;\n  S.strips = strips;\n  S.trees = trees.sort((p, q) => q.D - p.D);\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N);\n  const S = { t: 0, bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), A: F(), fu: F(), fd: F(), fn: F(), gl: [], down: [], clouds: [], far: [], spawn: [0, 0], cable: null, bb: [1e9, 1e9, -1, -1] };\n  buildFields(S);\n  for (let y = FY; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      S.fd[p] = 180 / (y + 0.5 - HOR);\n      S.fu[p] = ((x + 0.5 - 32) * S.fd[p]) / 64;\n      S.fn[p] = fbm(x * 0.15, y * 0.3, 11);\n    }\n  for (let i = 0; i \u003c 3; i++) S.far.push({ x: 8 + i * 24 + rnd() * 10, yb: 87 - i * 5 - rnd() * 2, hw: 5 + 2.5 * i + rnd() * 2, ht: 3 + i + rnd() * 1.5, p: puffs(), sd: floor(rnd() * 999), m: 0.35, e: 44 });\n  S.shad = [{ x: 6, D: 7.4, r: 19, rd: 2.6, m: 0.9, e: 62 }, { x: 50, D: 16, r: 15, rd: 5.5, m: 0.9, e: 60 }];\n  params.s = S;\n}\n\n// The thermal's centre at a row: it leans downwind with height and wanders a little.\nconst colX = (S, y) => SRCX + S.lean * (YG - y) + 1.5 * sin(S.t * 0.21);\nconst sunLight = (h, k = mix(1, 0.9, h)) => [mix(1, 1.16, h) * k, mix(1, 0.86, h) * k, mix(1, 0.56, h) * k];\nconst SHADE = [0.42, 0.47, 0.6];\nconst hazeOf = (h) => mix3([176, 202, 222], [236, 186, 122], h);\nfunction skyAt(x, y, h) {\n  const top = mix3([14, 50, 150], [30, 52, 128], h), mid = mix3([44, 108, 206], [70, 104, 178], h), t = y / 96;\n  const c = t \u003c 0.66 ? mix3(top, mid, sstep(0, 0.66, t)) : mix3(mid, hazeOf(h), sstep(0.66, 1, t));\n  const gw = pow(h, 1.5) * exp(-x / 24) * exp(-abs(y - 78) / 36);\n  return [c[0] + 110 * gw, c[1] + 64 * gw, c[2] + 14 * gw];\n}\n\n// The ground seen at a point of the panel: hedges, fields, their shadows, and the haze.\nfunction fieldAt(S, x, y, sun, Lsh, haze) {\n  const D = 180 / (y - HOR), u = ((x - 32) * D) / 64, st = S.strips;\n  let k = 0;\n  while (k \u003c st.length - 1 && D >= st[k].d1) k++;\n  let alb = null;\n  let lit = 1;\n  // The hedge on a strip's near edge hides the ground just behind it.\n  for (let j = k; j >= 0 && st[j].d0 > D * 0.8; j--) {\n    const s = st[j];\n    if (y >= HOR + (180 - 64 * s.hh * (0.7 + 0.6 * noise(u * 2.6, s.i * 9, 3))) / s.d0) {\n      const n = 0.8 + 0.4 * noise(u * 6, y, 5);\n      alb = [34 * n, 78 * n, 30 * n];\n      lit = 0.85;\n      break;\n    }\n  }\n  if (!alb) {\n    const s = st[k], b = s.b;\n    let j = 0;\n    while (j \u003c b.length - 2 && u >= b[j + 1]) j++;\n    const hwu = ((0.8 * pow(6 / D, 0.4) + 0.25) * D) / 64;\n    if (abs(u - b[j]) \u003c hwu || abs(u - b[j + 1]) \u003c hwu) {\n      alb = [30, 70, 28];\n      lit = 0.7;\n    } else {\n      const c = CROP[s.t[j]], tx = c[3] ? 0.97 + 0.17 * sin(u * TAU * 6.5) : 0.86 + 0.28 * fbm(u * 2.5, D * 0.7, s.t[j] + j);\n      alb = [c[0] * tx, c[1] * tx, c[2] * tx];\n      // Shadows of the hedges left and in front, and of the trees.\n      if (u - b[j] \u003c s.hh * Lsh * 0.85 || D - s.d0 \u003c s.hh * Lsh * 0.4) lit = 0;\n      else\n        for (const tr of S.trees) {\n          const du = u - tr.u - tr.hc * Lsh * 0.85, dd = D - tr.D - tr.hc * Lsh * 0.45;\n          if (abs(dd) > 3 + Lsh) continue;\n          const al = (du * 0.86 + dd * 0.5) / (tr.rc * (1 + 0.55 * Lsh)), pe = (-du * 0.5 + dd * 0.86) / (tr.rc * 1.8);\n          if (al * al + pe * pe \u003c 1) {\n            lit = 0;\n            break;\n          }\n        }\n    }\n  }\n  const hz = 0.55 * sstep(5, 75, D);\n  return [0, 1, 2].map((c) => mix(alb[c] * mix(SHADE[c], sun[c], lit), haze[c], hz));\n}\n\nfunction paint(S) {\n  const h = S.hour, sun = sunLight(h), haze = hazeOf(h), Lsh = 0.35 + 4.2 * pow(h, 1.6), bg = S.bg, ridgeF = mix3(haze, [64, 96, 116], 0.38);\n  const ridgeN = mix3(haze, [52 * sun[0], 98 * sun[1], 54 * sun[2]], 0.58);\n  for (let x = 0; x \u003c W; x++) {\n    const farT = 83 + 5 * fbm(x * 0.045, 1.3, 21), nearT = 91.5 + 3 * fbm(x * 0.09, 4.1, 22) - 1.5 * sstep(0.55, 0.8, noise(x * 0.5, 0, 23));\n    for (let y = 0; y \u003c H; y++) {\n      const q = (y * W + x) * 3;\n      bg[q] = bg[q + 1] = bg[q + 2] = 0;\n      // The open sky is smooth enough for one sample.\n      for (let k = y + 1 \u003c farT ? 3 : 0; k \u003c 4; k++) {\n        const xs = x + 0.25 + 0.5 * (k & 1), ys = y + 0.25 + 0.5 * (k >> 1);\n        let c;\n        if (ys >= FY) c = fieldAt(S, xs, ys, sun, Lsh, haze);\n        else if (ys >= nearT) c = ridgeN.map((v) => v * (0.84 + 0.3 * fbm(x * 0.35, ys * 0.9, 24)));\n        else if (ys >= farT) c = ridgeF;\n        else c = skyAt(xs, ys, h);\n        for (let i = 0; i \u003c 3; i++) bg[q + i] += y + 1 \u003c farT ? c[i] : c[i] / 4;\n      }\n    }\n  }\n  // Tree crowns, far ones first, lit from the sun's side.\n  for (const tr of S.trees) {\n    const cx = 32 + (64 * tr.u) / tr.D, cy = HOR + (180 - 64 * tr.hc) / tr.D, R = (64 * tr.rc) / tr.D, hz = 0.55 * sstep(5, 75, tr.D);\n    for (let y = max(FY - 4, floor(cy - R - 1)); y \u003c= min(H - 1, cy + R + 1); y++)\n      for (let x = max(0, floor(cx - R - 1)); x \u003c= min(W - 1, cx + R + 1); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - cy) / R, a = clamp((1 - sqrt(dx * dx + dy * dy)) * R + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const l = clamp(0.45 - 0.7 * dx - 0.4 * dy, 0, 1), n = 0.85 + 0.3 * hash(x, y, 31), q = (y * W + x) * 3;\n        [40, 94, 38].forEach((al, c) => (bg[q + c] += (mix(al * n * mix(SHADE[c], sun[c] * 1.1, l), haze[c], hz) - bg[q + c]) * a));\n      }\n  }\n  S.painted = h;\n}\n\nfunction addCraft(S, kind, st, X, yc, dir) {\n  const R = kind ? 5.5 + rnd() : 11.5 + rnd();\n  const o = { kind, st, X, yc, Z: -dir * R, R, dir, th: (-dir * PI) / 2, bank: st === \"climb\" ? 0.5 + 0.12 * kind : 0, pitch: 0, off: 0, s: 0, w: kind ? 1.75 + 0.3 * rnd() : 1.05, c0: kind ? 1.9 : 2.4 };\n  S.gl.push(o);\n  return o;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hour = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2, kg = clamp(k[2], 1, 4), n = (S.n = round(kg)), wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    S.wind = wind;\n    S.ks = 1 + 0.14 * (kg - 1);\n    S.lean = wind * 0.22;\n    for (let i = 0; i \u003c n; i++) addCraft(S, 0, \"climb\", 0, n === 1 ? 72 : 82 - (i * 36) / (n - 1), 1).th = rnd() * TAU;\n    for (const y of [86, 62]) addCraft(S, 1, \"climb\", 0, y, 1).th = rnd() * TAU;\n    for (let i = 0; i \u003c 56; i++) S.down.push({ y: YB + rnd() * (YG - YB), a: rnd() * TAU, r: 0.5 + rnd() * 5.5, v: 3 + rnd() * 3, tw: rnd() * TAU });\n    // The cloud of the last thermal is drifting off as the next one starts.\n    S.clouds.push(Object.assign(newCloud(colX(S, YB) + (wind \u003c 0 ? -24 : 24), 26), { det: true, al: 0.9 }), newCloud(colX(S, YB), 1.5));\n  }\n  const d = dt * tempo;\n  S.t += d;\n  S.wind += (wind - S.wind) * min(1, dt * 2);\n  S.ks += (1 + 0.14 * (kg - 1) - S.ks) * min(1, dt * 2);\n  S.lean = S.wind * 0.22;\n  const vd = (S.wind \u003c 0 ? -2 : 2) + 6 * S.wind;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const dir = rnd() \u003c 0.5 ? 1 : -1, o = addCraft(S, 0, \"launch\", dir > 0 ? 4 + rnd() * 10 : 50 + rnd() * 10, 0, dir);\n    Object.assign(o, { yc: 121 + o.Z * SE, X0: o.X, cable: true });\n  }\n\n  // The thermal's cloud builds for 26 s, then drifts off and thins as a new one starts.\n  for (const c of S.clouds) {\n    c.a += d;\n    c.g = 1 - exp(-c.a / 6.5);\n    if (c.det) {\n      c.x += vd * d;\n      c.al -= d / 8;\n    } else {\n      c.x += (colX(S, YB) - c.x) * min(1, d * 0.6);\n      if (c.a > 26) {\n        c.det = true;\n        S.clouds.push(newCloud(colX(S, YB), 0));\n      }\n    }\n  }\n  S.clouds = S.clouds.filter((c) => c.al > 0);\n  // Far cumulus and the shadows of clouds out of sight drift with the wind and come round again.\n  for (const f of S.far.concat(S.shad)) {\n    f.x += vd * f.m * d;\n    if ((f.x - 32) * vd > 0 && abs(f.x - 32) > f.e) f.x = 32 - sign(f.x - 32) * (f.e - 1);\n  }\n\n  // Gliders and buzzards: launched, gliding in, circling up, or gliding off.\n  for (const o of S.gl) {\n    const cx = colX(S, o.yc) + (o.kind ? 2 : 0);\n    if (o.st === \"launch\") {\n      o.s += d;\n      const v = 16 * min(1, o.s / 0.5);\n      o.pitch = o.cable ? 0.95 * sstep(0.5, 1.1, o.s) : max(0, o.pitch - d * 1.2);\n      o.X += o.dir * v * cos(o.pitch) * d;\n      o.yc -= v * sin(o.pitch) * d;\n      if (o.cable && o.yc \u003c 88) {\n        o.cable = false;\n        S.cable = { x: o.X + o.dir * 3, y: o.yc - o.Z * SE - 2.5, xw: o.X0 + o.dir * 58, t: 0 };\n      }\n      if (!o.cable && o.pitch \u003c= 0) {\n        o.st = \"climb\";\n        o.off = o.X - cx;\n      }\n    } else if (o.st === \"climb\") {\n      const th0 = o.th;\n      o.th += o.w * d;\n      o.off *= exp(-d * 0.35);\n      o.yc -= o.c0 * (1 + 0.45 * cos(o.th + 0.8)) * d;\n      o.bank += ((o.kind ? 0.62 : 0.5) - o.bank) * min(1, d * 2);\n      if (o.yc \u003c YB + (o.kind ? 18 : 8)) o.leave = true;\n      // Done, it straightens up the next time it flies across the panel.\n      if (o.leave && cos(th0) * cos(o.th) \u003c= 0) {\n        o.st = \"out\";\n        o.th = sin(o.th) > 0 ? PI / 2 : -PI / 2;\n        o.dir = -sign(sin(o.th));\n      }\n      o.X = cx + o.off + o.R * cos(o.th);\n      o.Z = o.R * sin(o.th);\n    } else {\n      o.X += o.dir * o.R * o.w * d;\n      o.yc += (o.st === \"out\" ? 0.8 : 0.4) * d;\n      o.bank *= exp(-d * 3);\n      if (o.st === \"in\" && o.dir * (o.X - cx) >= 0) o.st = \"climb\";\n      if (abs(o.X - 32) > 56) o.gone = true;\n    }\n  }\n  S.gl = S.gl.filter((o) => !o.gone);\n  // Too many: the highest leaves early. Too few: a newcomer glides in low.\n  for (const kind of [0, 1]) {\n    const act = S.gl.filter((o) => o.kind === kind && o.st !== \"out\");\n    const want = kind ? 2 : n;\n    S.spawn[kind] -= d;\n    if (act.length \u003c want && S.spawn[kind] \u003c= 0) {\n      const dir = rnd() \u003c 0.5 ? 1 : -1;\n      addCraft(S, kind, \"in\", 32 - dir * 46, (kind ? 84 : 86) + rnd() * 6, dir);\n      S.spawn[kind] = kind ? 1.5 + rnd() * 2 : 2.5;\n    } else if (act.length > want) {\n      const hi = act.filter((o) => o.st === \"climb\" && !o.leave).sort((p, q) => p.yc - q.yc)[0];\n      if (hi) hi.leave = true;\n    }\n  }\n  const cb = S.cable;\n  if (cb) {\n    cb.y += 9 * d;\n    if ((cb.t += d) > 2) S.cable = null;\n  }\n  // Thistledown rides the thermal up from the ploughed field.\n  for (const p of S.down) {\n    p.y -= p.v * d;\n    p.a += (1.6 / (1 + p.r * 0.3)) * d;\n    if (p.y \u003c YB + 1) {\n      p.y = YG - 3 + rnd() * 5;\n      p.r = 0.5 + rnd() * 5.5;\n    }\n  }\n}\n\n// A tapered stroke into the coverage buffer, growing the box drawn into.\nfunction stroke(S, ax, ay, bx, by, ra, rb) {\n  const { A, bb } = S, x0 = max(0, floor(min(ax, bx) - 2)), x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2)), y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  if (x0 > x1 || y0 > y1) return;\n  bb[0] = min(bb[0], x0);\n  bb[1] = min(bb[1], y0);\n  bb[2] = max(bb[2], x1);\n  bb[3] = max(bb[3], y1);\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = clamp((px * dx + py * dy) / ll, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      const a = clamp(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1), i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\nfunction flush(S, col, alpha) {\n  const { A, buf, bb } = S;\n  for (let y = bb[1]; y \u003c= bb[3]; y++)\n    for (let x = bb[0]; x \u003c= bb[2]; x++) {\n      const i = y * W + x, a = min(1, A[i] * alpha);\n      if (a \u003c= 0) continue;\n      A[i] = 0;\n      for (let c = 0; c \u003c 3; c++) buf[i * 3 + c] += (col[c] - buf[i * 3 + c]) * a;\n    }\n  bb[0] = bb[1] = 1e9;\n  bb[2] = bb[3] = -1;\n}\n\n// A craft in its own frame (heading, pitch, bank), seen from below and to the side.\nfunction craft(S, o, h) {\n  const cl = o.st === \"climb\", hx = cl ? -sin(o.th) : o.dir, hz = cl ? cos(o.th) : 0, cp = cos(o.pitch), sp = sin(o.pitch);\n  const F = [hx * cp, sp, hz * cp], U0 = [-hx * sp, cp, -hz * sp], R0 = [-hz, 0, hx], cb = cos(o.bank * 0.7), sb = sin(o.bank * 0.7);\n  const U = [U0[0] * cb + R0[0] * sb, U0[1] * cb, U0[2] * cb + R0[2] * sb], R = [R0[0] * cb - U0[0] * sb, -U0[1] * sb, R0[2] * cb - U0[2] * sb];\n  const sy = o.yc - o.Z * SE;\n  const P = (f, r, u) => [o.X + F[0] * f + R[0] * r + U[0] * u, sy - (F[1] * f + R[1] * r + U[1] * u) * BC - (F[2] * f + R[2] * r + U[2] * u) * BE];\n  for (const m of o.kind ? BUZZ : GLIDER) {\n    const a = P(m[0], m[1], m[2]), b = P(m[3], m[4], m[5]);\n    stroke(S, a[0], a[1], b[0], b[1], m[6], m[7]);\n  }\n  // From below we see the shaded underside; banked towards us, the sunlit top.\n  const top = sstep(-0.3, 0.4, -U[1] * BE + U[2] * BC);\n  if (o.kind) return flush(S, [mix(58, 86, top), mix(42, 62, top), mix(30, 40, top)], 1);\n  const f = 0.84 + 0.16 * top;\n  flush(S, mix3([236, 240, 246], [255, 226, 176], h).map((v) => v * f), 1.35);\n  // Once a turn the wing tilts to the sun and flashes.\n  const gx = mix(-0.35, -0.8, h), gz = mix(1, 0.6, h);\n  const gl = (sstep(0.92, 1, ((R0[0] * gx + R0[2] * gz) / sqrt(gx * gx + gz * gz)) * sign(o.bank || 1)) * abs(o.bank)) / 0.5;\n  if (gl \u003c 0.02) return;\n  const w = P(0.4, 3.5 * sign(o.bank || 1), 0.6);\n  for (let y = max(0, floor(w[1] - 5)); y \u003c= min(H - 1, w[1] + 5); y++)\n    for (let x = max(0, floor(w[0] - 5)); x \u003c= min(W - 1, w[0] + 5); x++) {\n      const ex = abs(x + 0.5 - w[0]), ey = abs(y + 0.5 - w[1]);\n      const v = gl * (exp(-sqrt(ex * ex + ey * ey) / 1.3) + 0.5 * exp(-min(ex, ey) * 2.5 - max(ex, ey) / 2.5)), q = (y * W + x) * 3;\n      S.buf[q] += 255 * v;\n      S.buf[q + 1] += 246 * v;\n      S.buf[q + 2] += mix(225, 170, h) * v;\n    }\n}\n\nfunction drawCloud(S, c, hw, ht, g, yb, al, haze) {\n  const { buf, t } = S, h = S.hour, B = [], lean = S.lean * 0.6;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9;\n  for (const p of c.p) {\n    const gr = sstep(p.t0, p.t0 + 0.25, g);\n    if (gr \u003c= 0.02) continue;\n    const r = p.r * hw * gr * (1 + 0.05 * sin(t * 0.7 + p.ph)), bx = c.x + p.u * hw + lean * p.v * ht + 0.04 * hw * sin(t * 0.5 + p.ph);\n    const by = yb - p.v * ht - 0.03 * ht * sin(t * 0.4 + p.ph * 2);\n    B.push(bx, by, r);\n    x0 = min(x0, bx - r);\n    x1 = max(x1, bx + r);\n    y0 = min(y0, by - r);\n  }\n  const L = [mix(-0.45, -0.85, h), mix(-0.7, -0.28, h), 0.5], ll = sqrt(L[0] * L[0] + L[1] * L[1] + L[2] * L[2]);\n  const litC = mix3([252, 252, 250], [255, 214, 150], h);\n  const shC = mix3([150, 162, 192], [150, 124, 146], h).map((v) => v * (1 - 0.2 * g * (c.det ? 0.5 : 1)));\n  const baseC = mix3([126, 132, 152], [108, 90, 100], h).map((v) => v * mix(1, 0.78, g));\n  const hz = hazeOf(h);\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, yb + 1); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, x1 + 2); x++) {\n      const px = x + 0.5, py = y + 0.5;\n      // The normal blends the puffs nearby, weighted by how deep inside each the pixel is.\n      let best = -9, r = 1, sw = 0, nx = 0, ny = 0;\n      for (let i = 0; i \u003c B.length; i += 3) {\n        const dx = (px - B[i]) / B[i + 2], dy = (py - B[i + 1]) / B[i + 2], v = 1 - sqrt(dx * dx + dy * dy);\n        if (v \u003c -0.5) continue;\n        if (v > best) {\n          best = v;\n          r = B[i + 2];\n        }\n        const w = exp(7 * v);\n        sw += w;\n        nx += dx * w;\n        ny += dy * w;\n      }\n      if (best \u003c -0.4) continue;\n      // Cauliflower edges; a cloud that is dying frays from the edges in.\n      const n = noise(px * 0.32, py * 0.32 - t * 0.12, c.sd);\n      const a = clamp((best + 0.32 * (n - 0.5) - (1 - al) * 0.8) * r * 0.7, 0, 1) * clamp(yb + 0.7 - py + 0.6 * noise(px * 0.4, 1, c.sd), 0, 1) * sqrt(al);\n      if (a \u003c= 0) continue;\n      nx /= sw;\n      ny /= sw;\n      const nz = sqrt(max(0, 1 - nx * nx - ny * ny));\n      const lw = clamp(((nx * L[0] + ny * L[1] + nz * L[2]) / ll + 0.45) / 1.45 + 0.3 * (n - 0.5), 0, 1) * (0.55 + 0.45 * clamp((yb - py) / (0.45 * ht), 0, 1));\n      const bs = sstep(yb - 2.6, yb - 0.6, py), q = (y * W + x) * 3;\n      for (let k = 0; k \u003c 3; k++) buf[q + k] += (mix(mix(mix(shC[k], litC[k], lw), baseC[k], bs), hz[k], haze) - buf[q + k]) * a;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.painted === undefined || abs(S.painted - S.hour) > 0.003) paint(S);\n  const h = S.hour, buf = S.buf;\n  buf.set(S.bg);\n\n  // Cloud shadows: each thermal cloud's, pushed off its field by the sun, and two from clouds out of sight.\n  const sh = [];\n  for (const c of S.clouds) {\n    const ru = (((8 + 18 * c.g) * S.ks * DSRC) / 64) * 0.95 * (c.det ? sqrt(c.al) : 1);\n    sh.push(((c.x - 29 + 30 * h) * DSRC) / 64, DSRC * (1.04 + 1.1 * h), ru, ru * 1.3 + 0.5, c.al * (0.55 + 0.45 * c.g));\n  }\n  for (const s of S.shad) sh.push(((s.x - 32) * s.D) / 64, s.D, (s.r * s.D) / 64, s.rd, 1);\n  const sc = [0.46, 0.5, 0.62];\n  for (let p = FY * W; p \u003c N; p++) {\n    let m = 0;\n    for (let i = 0; i \u003c sh.length; i += 5) {\n      const du = (S.fu[p] - sh[i]) / sh[i + 2], dv = (S.fd[p] - sh[i + 1]) / sh[i + 3], q = du * du + dv * dv;\n      if (q \u003c 2.2) m = max(m, sstep(1.05, 0.6, sqrt(q) + 0.35 * (S.fn[p] - 0.5)) * sh[i + 4]);\n    }\n    if (m > 0) for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= mix(1, sc[c], m);\n  }\n\n  // Far cumulus along the horizon, then the clouds the thermal builds.\n  for (const f of S.far) drawCloud(S, f, f.hw, f.ht, 1, f.yb, 0.9, 0.5);\n  for (const c of S.clouds) drawCloud(S, c, (8 + 18 * c.g) * S.ks, (6 + 26 * c.g) * S.ks, c.g, YB, c.det ? c.al : 1, 0);\n\n  // Thistledown catching the sun as it rises.\n  const dc = mix3([240, 240, 228], [255, 222, 160], h), nd = 26 + round((10 * (S.ks - 1)) / 0.14);\n  for (let i = 0; i \u003c nd; i++) {\n    const p = S.down[i], x = round(colX(S, p.y) + p.r * cos(p.a) + 0.8 * sin(S.t * 1.7 + p.tw) - 0.5), y = round(p.y + p.r * sin(p.a) * SE - 0.5);\n    if (x \u003c 0 || x >= W) continue;\n    const a = (0.45 + 0.4 * sin(S.t * 3 + p.tw * 5)) * sstep(YB, YB + 8, p.y) * sstep(YG + 2, YG - 6, p.y);\n    for (let k = 0, q = (y * W + x) * 3; k \u003c 3; k++) buf[q + k] += (dc[k] - buf[q + k]) * a;\n  }\n\n  // The winch cable, and the one that falls on its red parachute after release.\n  const dark = [36, 34, 38];\n  for (const o of S.gl)\n    if (o.cable) {\n      stroke(S, o.X + o.dir * 3 * cos(o.pitch), o.yc - o.Z * SE - 3 * sin(o.pitch), o.X0 + o.dir * 58, 118, 0.18, 0.18);\n      flush(S, dark, 0.75);\n    }\n  const cb = S.cable;\n  if (cb) {\n    stroke(S, cb.x, cb.y, cb.xw, 118, 0.18, 0.18);\n    flush(S, dark, 0.75 * (1 - cb.t / 2));\n    stroke(S, cb.x, cb.y - 1, cb.x, cb.y - 1, 0.7, 0.7);\n    flush(S, [230, 50, 40], 1 - cb.t / 2);\n  }\n  // Gliders and buzzards, the far side of their circles first.\n  for (const o of S.gl.slice().sort((p, q) => p.Z - q.Z)) craft(S, o, h);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","layer":{"id":"layer-thermal","type":"code","name":"thermal","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Thermal\n// Family:  flight\n// Idea:    A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after thermal soaring under fair-weather cumulus over farmland\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1\n//\n// Knob 1: Hour. Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows.\n// Knob 2: Speed. At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower.\n// Knob 3: Gliders. One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up.\n// Knob 4: Wind. The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm.\n// Buttons: K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, round, pow, sign, PI } = Math;\nconst TAU = 2 * PI;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\nconst rnd = () => Math.random();\n// Rows: horizon, first field row, cloud base, where the thermal leaves the ground.\nconst [HOR, FY, YB, YG] = [97, 100, 36, 116];\n// The ploughed field the thermal comes off: its column and its distance.\nconst [SRCX, DSRC] = [29, 9.6];\n// We look up a little, so a level circle is a thin ellipse; the craft are drawn flatter so a banked wing does not stand on end.\nconst SE = sin(0.3);\nconst [BE, BC] = [sin(0.1), cos(0.1)];\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\nconst fbm = (x, y, s) => 0.55 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.15 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Pasture, beans, stubble, wheat, hay and plough in midday sun; 1 marks rows running away from us.\nconst CROP = [[70, 150, 45, 0], [38, 106, 36, 1], [216, 184, 94, 1], [198, 160, 66, 0], [142, 178, 74, 0], [96, 62, 40, 1]];\nconst PICK = [0, 0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Tapered strokes in the craft's axes: forward, right, up, twice, then two radii.\nconst GLIDER = [[3.6, 0, -0.1, -4.8, 0, 0.15, 0.85, 0.45], [0.6, 0, 0.25, 0.25, -9, 0.85, 0.75, 0.45], [0.6, 0, 0.25, 0.25, 9, 0.85, 0.75, 0.45], [-4.2, 0, 0.1, -4.9, 0, 2.4, 0.55, 0.45], [-4.9, -2.6, 2.4, -4.9, 2.6, 2.4, 0.45, 0.45]];\nconst BUZZ = [[1.3, 0, 0, -1.3, 0, 0, 0.6, 0.45], [0.2, 0, 0.1, -0.3, -3.7, 0.75, 0.8, 0.45], [0.2, 0, 0.1, -0.3, 3.7, 0.75, 0.8, 0.45], [-1.2, 0, 0, -2.5, 0, 0.1, 0.45, 0.65]];\n\n// A cumulus as puffs over a flat base: each puff's place (u across, v up), its radius r and when in its growth it appears.\nfunction puffs() {\n  const L = [];\n  const add = (u, v, r, t0) => L.push({ u: u + (rnd() - 0.5) * 0.14, v: v + (rnd() - 0.5) * 0.08, r: r * (0.88 + 0.24 * rnd()), t0, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 5; i++) add(-0.76 + i * 0.38, 0.2, 0.34, i === 2 ? 0 : 0.03 + 0.12 * rnd());\n  for (let i = 0; i \u003c 4; i++) add(-0.5 + i * 0.33, 0.45, 0.33, 0.08 + 0.17 * rnd());\n  for (let i = 0; i \u003c 3; i++) add(-0.3 + i * 0.3, 0.68, 0.3, 0.3 + 0.2 * rnd());\n  for (let i = 0; i \u003c 2; i++) add((rnd() - 0.5) * 0.4, 0.86, 0.26, 0.55 + 0.15 * rnd());\n  return L;\n}\nconst newCloud = (x, a) => ({ x, a, g: 0, al: 1, det: false, p: puffs(), sd: floor(rnd() * 999) });\n\n// Fields lie in strips at distance D (row = HOR + 180 / D), each cut into fields across.\nfunction buildFields(S) {\n  const strips = [], trees = [], us = ((SRCX - 32) * DSRC) / 64, hw = (11 * DSRC) / 64;\n  for (let D = 5.6; D \u003c 66; ) {\n    const D2 = D * (1.22 + 0.12 * rnd());\n    const wid = () => ((12 + 18 * rnd()) * pow(6 / D, 0.35) * D) / 64;\n    let b = [];\n    for (let u = -0.62 * D2 - rnd() * wid(); u \u003c 0.62 * D2 + 0.3; u += wid()) b.push(u);\n    const src = D \u003c= DSRC && DSRC \u003c D2;\n    if (src) {\n      b = b.filter((u) => u \u003c us - hw - 0.3 || u > us + hw + 0.3);\n      b.push(us - hw, us + hw);\n      b.sort((p, q) => p - q);\n    }\n    const t = [];\n    for (let j = 0; j \u003c b.length - 1; j++) {\n      let k;\n      do k = PICK[floor(rnd() * PICK.length)];\n      while (j && k === t[j - 1]);\n      t.push(k);\n    }\n    if (src) t[b.indexOf(us - hw)] = 5;\n    strips.push({ d0: D, d1: D2, b, t, hh: 0.12 + 0.08 * rnd(), i: strips.length });\n    // Trees in the hedge along each strip's near edge, and at some corners.\n    for (let j = 0; j \u003c 2; j++) if (rnd() \u003c 0.6) trees.push({ u: (rnd() - 0.5) * 1.1 * D, D: D + 0.05, rc: 0.2 + 0.14 * rnd() });\n    for (let j = 1; j \u003c b.length - 1; j++) if (rnd() \u003c 0.2) trees.push({ u: b[j], D: D + 0.05, rc: 0.2 + 0.12 * rnd() });\n    D = D2;\n  }\n  for (const tr of trees) tr.hc = tr.rc * 1.5 + 0.15;\n  S.strips = strips;\n  S.trees = trees.sort((p, q) => q.D - p.D);\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N);\n  const S = { t: 0, bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), A: F(), fu: F(), fd: F(), fn: F(), gl: [], down: [], clouds: [], far: [], spawn: [0, 0], cable: null, bb: [1e9, 1e9, -1, -1] };\n  buildFields(S);\n  for (let y = FY; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      S.fd[p] = 180 / (y + 0.5 - HOR);\n      S.fu[p] = ((x + 0.5 - 32) * S.fd[p]) / 64;\n      S.fn[p] = fbm(x * 0.15, y * 0.3, 11);\n    }\n  for (let i = 0; i \u003c 3; i++) S.far.push({ x: 8 + i * 24 + rnd() * 10, yb: 87 - i * 5 - rnd() * 2, hw: 5 + 2.5 * i + rnd() * 2, ht: 3 + i + rnd() * 1.5, p: puffs(), sd: floor(rnd() * 999), m: 0.35, e: 44 });\n  S.shad = [{ x: 6, D: 7.4, r: 19, rd: 2.6, m: 0.9, e: 62 }, { x: 50, D: 16, r: 15, rd: 5.5, m: 0.9, e: 60 }];\n  params.s = S;\n}\n\n// The thermal's centre at a row: it leans downwind with height and wanders a little.\nconst colX = (S, y) => SRCX + S.lean * (YG - y) + 1.5 * sin(S.t * 0.21);\nconst sunLight = (h, k = mix(1, 0.9, h)) => [mix(1, 1.16, h) * k, mix(1, 0.86, h) * k, mix(1, 0.56, h) * k];\nconst SHADE = [0.42, 0.47, 0.6];\nconst hazeOf = (h) => mix3([176, 202, 222], [236, 186, 122], h);\nfunction skyAt(x, y, h) {\n  const top = mix3([14, 50, 150], [30, 52, 128], h), mid = mix3([44, 108, 206], [70, 104, 178], h), t = y / 96;\n  const c = t \u003c 0.66 ? mix3(top, mid, sstep(0, 0.66, t)) : mix3(mid, hazeOf(h), sstep(0.66, 1, t));\n  const gw = pow(h, 1.5) * exp(-x / 24) * exp(-abs(y - 78) / 36);\n  return [c[0] + 110 * gw, c[1] + 64 * gw, c[2] + 14 * gw];\n}\n\n// The ground seen at a point of the panel: hedges, fields, their shadows, and the haze.\nfunction fieldAt(S, x, y, sun, Lsh, haze) {\n  const D = 180 / (y - HOR), u = ((x - 32) * D) / 64, st = S.strips;\n  let k = 0;\n  while (k \u003c st.length - 1 && D >= st[k].d1) k++;\n  let alb = null;\n  let lit = 1;\n  // The hedge on a strip's near edge hides the ground just behind it.\n  for (let j = k; j >= 0 && st[j].d0 > D * 0.8; j--) {\n    const s = st[j];\n    if (y >= HOR + (180 - 64 * s.hh * (0.7 + 0.6 * noise(u * 2.6, s.i * 9, 3))) / s.d0) {\n      const n = 0.8 + 0.4 * noise(u * 6, y, 5);\n      alb = [34 * n, 78 * n, 30 * n];\n      lit = 0.85;\n      break;\n    }\n  }\n  if (!alb) {\n    const s = st[k], b = s.b;\n    let j = 0;\n    while (j \u003c b.length - 2 && u >= b[j + 1]) j++;\n    const hwu = ((0.8 * pow(6 / D, 0.4) + 0.25) * D) / 64;\n    if (abs(u - b[j]) \u003c hwu || abs(u - b[j + 1]) \u003c hwu) {\n      alb = [30, 70, 28];\n      lit = 0.7;\n    } else {\n      const c = CROP[s.t[j]], tx = c[3] ? 0.97 + 0.17 * sin(u * TAU * 6.5) : 0.86 + 0.28 * fbm(u * 2.5, D * 0.7, s.t[j] + j);\n      alb = [c[0] * tx, c[1] * tx, c[2] * tx];\n      // Shadows of the hedges left and in front, and of the trees.\n      if (u - b[j] \u003c s.hh * Lsh * 0.85 || D - s.d0 \u003c s.hh * Lsh * 0.4) lit = 0;\n      else\n        for (const tr of S.trees) {\n          const du = u - tr.u - tr.hc * Lsh * 0.85, dd = D - tr.D - tr.hc * Lsh * 0.45;\n          if (abs(dd) > 3 + Lsh) continue;\n          const al = (du * 0.86 + dd * 0.5) / (tr.rc * (1 + 0.55 * Lsh)), pe = (-du * 0.5 + dd * 0.86) / (tr.rc * 1.8);\n          if (al * al + pe * pe \u003c 1) {\n            lit = 0;\n            break;\n          }\n        }\n    }\n  }\n  const hz = 0.55 * sstep(5, 75, D);\n  return [0, 1, 2].map((c) => mix(alb[c] * mix(SHADE[c], sun[c], lit), haze[c], hz));\n}\n\nfunction paint(S) {\n  const h = S.hour, sun = sunLight(h), haze = hazeOf(h), Lsh = 0.35 + 4.2 * pow(h, 1.6), bg = S.bg, ridgeF = mix3(haze, [64, 96, 116], 0.38);\n  const ridgeN = mix3(haze, [52 * sun[0], 98 * sun[1], 54 * sun[2]], 0.58);\n  for (let x = 0; x \u003c W; x++) {\n    const farT = 83 + 5 * fbm(x * 0.045, 1.3, 21), nearT = 91.5 + 3 * fbm(x * 0.09, 4.1, 22) - 1.5 * sstep(0.55, 0.8, noise(x * 0.5, 0, 23));\n    for (let y = 0; y \u003c H; y++) {\n      const q = (y * W + x) * 3;\n      bg[q] = bg[q + 1] = bg[q + 2] = 0;\n      // The open sky is smooth enough for one sample.\n      for (let k = y + 1 \u003c farT ? 3 : 0; k \u003c 4; k++) {\n        const xs = x + 0.25 + 0.5 * (k & 1), ys = y + 0.25 + 0.5 * (k >> 1);\n        let c;\n        if (ys >= FY) c = fieldAt(S, xs, ys, sun, Lsh, haze);\n        else if (ys >= nearT) c = ridgeN.map((v) => v * (0.84 + 0.3 * fbm(x * 0.35, ys * 0.9, 24)));\n        else if (ys >= farT) c = ridgeF;\n        else c = skyAt(xs, ys, h);\n        for (let i = 0; i \u003c 3; i++) bg[q + i] += y + 1 \u003c farT ? c[i] : c[i] / 4;\n      }\n    }\n  }\n  // Tree crowns, far ones first, lit from the sun's side.\n  for (const tr of S.trees) {\n    const cx = 32 + (64 * tr.u) / tr.D, cy = HOR + (180 - 64 * tr.hc) / tr.D, R = (64 * tr.rc) / tr.D, hz = 0.55 * sstep(5, 75, tr.D);\n    for (let y = max(FY - 4, floor(cy - R - 1)); y \u003c= min(H - 1, cy + R + 1); y++)\n      for (let x = max(0, floor(cx - R - 1)); x \u003c= min(W - 1, cx + R + 1); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - cy) / R, a = clamp((1 - sqrt(dx * dx + dy * dy)) * R + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const l = clamp(0.45 - 0.7 * dx - 0.4 * dy, 0, 1), n = 0.85 + 0.3 * hash(x, y, 31), q = (y * W + x) * 3;\n        [40, 94, 38].forEach((al, c) => (bg[q + c] += (mix(al * n * mix(SHADE[c], sun[c] * 1.1, l), haze[c], hz) - bg[q + c]) * a));\n      }\n  }\n  S.painted = h;\n}\n\nfunction addCraft(S, kind, st, X, yc, dir) {\n  const R = kind ? 5.5 + rnd() : 11.5 + rnd();\n  const o = { kind, st, X, yc, Z: -dir * R, R, dir, th: (-dir * PI) / 2, bank: st === \"climb\" ? 0.5 + 0.12 * kind : 0, pitch: 0, off: 0, s: 0, w: kind ? 1.75 + 0.3 * rnd() : 1.05, c0: kind ? 1.9 : 2.4 };\n  S.gl.push(o);\n  return o;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hour = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2, kg = clamp(k[2], 1, 4), n = (S.n = round(kg)), wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    S.wind = wind;\n    S.ks = 1 + 0.14 * (kg - 1);\n    S.lean = wind * 0.22;\n    for (let i = 0; i \u003c n; i++) addCraft(S, 0, \"climb\", 0, n === 1 ? 72 : 82 - (i * 36) / (n - 1), 1).th = rnd() * TAU;\n    for (const y of [86, 62]) addCraft(S, 1, \"climb\", 0, y, 1).th = rnd() * TAU;\n    for (let i = 0; i \u003c 56; i++) S.down.push({ y: YB + rnd() * (YG - YB), a: rnd() * TAU, r: 0.5 + rnd() * 5.5, v: 3 + rnd() * 3, tw: rnd() * TAU });\n    // The cloud of the last thermal is drifting off as the next one starts.\n    S.clouds.push(Object.assign(newCloud(colX(S, YB) + (wind \u003c 0 ? -24 : 24), 26), { det: true, al: 0.9 }), newCloud(colX(S, YB), 1.5));\n  }\n  const d = dt * tempo;\n  S.t += d;\n  S.wind += (wind - S.wind) * min(1, dt * 2);\n  S.ks += (1 + 0.14 * (kg - 1) - S.ks) * min(1, dt * 2);\n  S.lean = S.wind * 0.22;\n  const vd = (S.wind \u003c 0 ? -2 : 2) + 6 * S.wind;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const dir = rnd() \u003c 0.5 ? 1 : -1, o = addCraft(S, 0, \"launch\", dir > 0 ? 4 + rnd() * 10 : 50 + rnd() * 10, 0, dir);\n    Object.assign(o, { yc: 121 + o.Z * SE, X0: o.X, cable: true });\n  }\n\n  // The thermal's cloud builds for 26 s, then drifts off and thins as a new one starts.\n  for (const c of S.clouds) {\n    c.a += d;\n    c.g = 1 - exp(-c.a / 6.5);\n    if (c.det) {\n      c.x += vd * d;\n      c.al -= d / 8;\n    } else {\n      c.x += (colX(S, YB) - c.x) * min(1, d * 0.6);\n      if (c.a > 26) {\n        c.det = true;\n        S.clouds.push(newCloud(colX(S, YB), 0));\n      }\n    }\n  }\n  S.clouds = S.clouds.filter((c) => c.al > 0);\n  // Far cumulus and the shadows of clouds out of sight drift with the wind and come round again.\n  for (const f of S.far.concat(S.shad)) {\n    f.x += vd * f.m * d;\n    if ((f.x - 32) * vd > 0 && abs(f.x - 32) > f.e) f.x = 32 - sign(f.x - 32) * (f.e - 1);\n  }\n\n  // Gliders and buzzards: launched, gliding in, circling up, or gliding off.\n  for (const o of S.gl) {\n    const cx = colX(S, o.yc) + (o.kind ? 2 : 0);\n    if (o.st === \"launch\") {\n      o.s += d;\n      const v = 16 * min(1, o.s / 0.5);\n      o.pitch = o.cable ? 0.95 * sstep(0.5, 1.1, o.s) : max(0, o.pitch - d * 1.2);\n      o.X += o.dir * v * cos(o.pitch) * d;\n      o.yc -= v * sin(o.pitch) * d;\n      if (o.cable && o.yc \u003c 88) {\n        o.cable = false;\n        S.cable = { x: o.X + o.dir * 3, y: o.yc - o.Z * SE - 2.5, xw: o.X0 + o.dir * 58, t: 0 };\n      }\n      if (!o.cable && o.pitch \u003c= 0) {\n        o.st = \"climb\";\n        o.off = o.X - cx;\n      }\n    } else if (o.st === \"climb\") {\n      const th0 = o.th;\n      o.th += o.w * d;\n      o.off *= exp(-d * 0.35);\n      o.yc -= o.c0 * (1 + 0.45 * cos(o.th + 0.8)) * d;\n      o.bank += ((o.kind ? 0.62 : 0.5) - o.bank) * min(1, d * 2);\n      if (o.yc \u003c YB + (o.kind ? 18 : 8)) o.leave = true;\n      // Done, it straightens up the next time it flies across the panel.\n      if (o.leave && cos(th0) * cos(o.th) \u003c= 0) {\n        o.st = \"out\";\n        o.th = sin(o.th) > 0 ? PI / 2 : -PI / 2;\n        o.dir = -sign(sin(o.th));\n      }\n      o.X = cx + o.off + o.R * cos(o.th);\n      o.Z = o.R * sin(o.th);\n    } else {\n      o.X += o.dir * o.R * o.w * d;\n      o.yc += (o.st === \"out\" ? 0.8 : 0.4) * d;\n      o.bank *= exp(-d * 3);\n      if (o.st === \"in\" && o.dir * (o.X - cx) >= 0) o.st = \"climb\";\n      if (abs(o.X - 32) > 56) o.gone = true;\n    }\n  }\n  S.gl = S.gl.filter((o) => !o.gone);\n  // Too many: the highest leaves early. Too few: a newcomer glides in low.\n  for (const kind of [0, 1]) {\n    const act = S.gl.filter((o) => o.kind === kind && o.st !== \"out\");\n    const want = kind ? 2 : n;\n    S.spawn[kind] -= d;\n    if (act.length \u003c want && S.spawn[kind] \u003c= 0) {\n      const dir = rnd() \u003c 0.5 ? 1 : -1;\n      addCraft(S, kind, \"in\", 32 - dir * 46, (kind ? 84 : 86) + rnd() * 6, dir);\n      S.spawn[kind] = kind ? 1.5 + rnd() * 2 : 2.5;\n    } else if (act.length > want) {\n      const hi = act.filter((o) => o.st === \"climb\" && !o.leave).sort((p, q) => p.yc - q.yc)[0];\n      if (hi) hi.leave = true;\n    }\n  }\n  const cb = S.cable;\n  if (cb) {\n    cb.y += 9 * d;\n    if ((cb.t += d) > 2) S.cable = null;\n  }\n  // Thistledown rides the thermal up from the ploughed field.\n  for (const p of S.down) {\n    p.y -= p.v * d;\n    p.a += (1.6 / (1 + p.r * 0.3)) * d;\n    if (p.y \u003c YB + 1) {\n      p.y = YG - 3 + rnd() * 5;\n      p.r = 0.5 + rnd() * 5.5;\n    }\n  }\n}\n\n// A tapered stroke into the coverage buffer, growing the box drawn into.\nfunction stroke(S, ax, ay, bx, by, ra, rb) {\n  const { A, bb } = S, x0 = max(0, floor(min(ax, bx) - 2)), x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2)), y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  if (x0 > x1 || y0 > y1) return;\n  bb[0] = min(bb[0], x0);\n  bb[1] = min(bb[1], y0);\n  bb[2] = max(bb[2], x1);\n  bb[3] = max(bb[3], y1);\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = clamp((px * dx + py * dy) / ll, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      const a = clamp(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1), i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\nfunction flush(S, col, alpha) {\n  const { A, buf, bb } = S;\n  for (let y = bb[1]; y \u003c= bb[3]; y++)\n    for (let x = bb[0]; x \u003c= bb[2]; x++) {\n      const i = y * W + x, a = min(1, A[i] * alpha);\n      if (a \u003c= 0) continue;\n      A[i] = 0;\n      for (let c = 0; c \u003c 3; c++) buf[i * 3 + c] += (col[c] - buf[i * 3 + c]) * a;\n    }\n  bb[0] = bb[1] = 1e9;\n  bb[2] = bb[3] = -1;\n}\n\n// A craft in its own frame (heading, pitch, bank), seen from below and to the side.\nfunction craft(S, o, h) {\n  const cl = o.st === \"climb\", hx = cl ? -sin(o.th) : o.dir, hz = cl ? cos(o.th) : 0, cp = cos(o.pitch), sp = sin(o.pitch);\n  const F = [hx * cp, sp, hz * cp], U0 = [-hx * sp, cp, -hz * sp], R0 = [-hz, 0, hx], cb = cos(o.bank * 0.7), sb = sin(o.bank * 0.7);\n  const U = [U0[0] * cb + R0[0] * sb, U0[1] * cb, U0[2] * cb + R0[2] * sb], R = [R0[0] * cb - U0[0] * sb, -U0[1] * sb, R0[2] * cb - U0[2] * sb];\n  const sy = o.yc - o.Z * SE;\n  const P = (f, r, u) => [o.X + F[0] * f + R[0] * r + U[0] * u, sy - (F[1] * f + R[1] * r + U[1] * u) * BC - (F[2] * f + R[2] * r + U[2] * u) * BE];\n  for (const m of o.kind ? BUZZ : GLIDER) {\n    const a = P(m[0], m[1], m[2]), b = P(m[3], m[4], m[5]);\n    stroke(S, a[0], a[1], b[0], b[1], m[6], m[7]);\n  }\n  // From below we see the shaded underside; banked towards us, the sunlit top.\n  const top = sstep(-0.3, 0.4, -U[1] * BE + U[2] * BC);\n  if (o.kind) return flush(S, [mix(58, 86, top), mix(42, 62, top), mix(30, 40, top)], 1);\n  const f = 0.84 + 0.16 * top;\n  flush(S, mix3([236, 240, 246], [255, 226, 176], h).map((v) => v * f), 1.35);\n  // Once a turn the wing tilts to the sun and flashes.\n  const gx = mix(-0.35, -0.8, h), gz = mix(1, 0.6, h);\n  const gl = (sstep(0.92, 1, ((R0[0] * gx + R0[2] * gz) / sqrt(gx * gx + gz * gz)) * sign(o.bank || 1)) * abs(o.bank)) / 0.5;\n  if (gl \u003c 0.02) return;\n  const w = P(0.4, 3.5 * sign(o.bank || 1), 0.6);\n  for (let y = max(0, floor(w[1] - 5)); y \u003c= min(H - 1, w[1] + 5); y++)\n    for (let x = max(0, floor(w[0] - 5)); x \u003c= min(W - 1, w[0] + 5); x++) {\n      const ex = abs(x + 0.5 - w[0]), ey = abs(y + 0.5 - w[1]);\n      const v = gl * (exp(-sqrt(ex * ex + ey * ey) / 1.3) + 0.5 * exp(-min(ex, ey) * 2.5 - max(ex, ey) / 2.5)), q = (y * W + x) * 3;\n      S.buf[q] += 255 * v;\n      S.buf[q + 1] += 246 * v;\n      S.buf[q + 2] += mix(225, 170, h) * v;\n    }\n}\n\nfunction drawCloud(S, c, hw, ht, g, yb, al, haze) {\n  const { buf, t } = S, h = S.hour, B = [], lean = S.lean * 0.6;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9;\n  for (const p of c.p) {\n    const gr = sstep(p.t0, p.t0 + 0.25, g);\n    if (gr \u003c= 0.02) continue;\n    const r = p.r * hw * gr * (1 + 0.05 * sin(t * 0.7 + p.ph)), bx = c.x + p.u * hw + lean * p.v * ht + 0.04 * hw * sin(t * 0.5 + p.ph);\n    const by = yb - p.v * ht - 0.03 * ht * sin(t * 0.4 + p.ph * 2);\n    B.push(bx, by, r);\n    x0 = min(x0, bx - r);\n    x1 = max(x1, bx + r);\n    y0 = min(y0, by - r);\n  }\n  const L = [mix(-0.45, -0.85, h), mix(-0.7, -0.28, h), 0.5], ll = sqrt(L[0] * L[0] + L[1] * L[1] + L[2] * L[2]);\n  const litC = mix3([252, 252, 250], [255, 214, 150], h);\n  const shC = mix3([150, 162, 192], [150, 124, 146], h).map((v) => v * (1 - 0.2 * g * (c.det ? 0.5 : 1)));\n  const baseC = mix3([126, 132, 152], [108, 90, 100], h).map((v) => v * mix(1, 0.78, g));\n  const hz = hazeOf(h);\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, yb + 1); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, x1 + 2); x++) {\n      const px = x + 0.5, py = y + 0.5;\n      // The normal blends the puffs nearby, weighted by how deep inside each the pixel is.\n      let best = -9, r = 1, sw = 0, nx = 0, ny = 0;\n      for (let i = 0; i \u003c B.length; i += 3) {\n        const dx = (px - B[i]) / B[i + 2], dy = (py - B[i + 1]) / B[i + 2], v = 1 - sqrt(dx * dx + dy * dy);\n        if (v \u003c -0.5) continue;\n        if (v > best) {\n          best = v;\n          r = B[i + 2];\n        }\n        const w = exp(7 * v);\n        sw += w;\n        nx += dx * w;\n        ny += dy * w;\n      }\n      if (best \u003c -0.4) continue;\n      // Cauliflower edges; a cloud that is dying frays from the edges in.\n      const n = noise(px * 0.32, py * 0.32 - t * 0.12, c.sd);\n      const a = clamp((best + 0.32 * (n - 0.5) - (1 - al) * 0.8) * r * 0.7, 0, 1) * clamp(yb + 0.7 - py + 0.6 * noise(px * 0.4, 1, c.sd), 0, 1) * sqrt(al);\n      if (a \u003c= 0) continue;\n      nx /= sw;\n      ny /= sw;\n      const nz = sqrt(max(0, 1 - nx * nx - ny * ny));\n      const lw = clamp(((nx * L[0] + ny * L[1] + nz * L[2]) / ll + 0.45) / 1.45 + 0.3 * (n - 0.5), 0, 1) * (0.55 + 0.45 * clamp((yb - py) / (0.45 * ht), 0, 1));\n      const bs = sstep(yb - 2.6, yb - 0.6, py), q = (y * W + x) * 3;\n      for (let k = 0; k \u003c 3; k++) buf[q + k] += (mix(mix(mix(shC[k], litC[k], lw), baseC[k], bs), hz[k], haze) - buf[q + k]) * a;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.painted === undefined || abs(S.painted - S.hour) > 0.003) paint(S);\n  const h = S.hour, buf = S.buf;\n  buf.set(S.bg);\n\n  // Cloud shadows: each thermal cloud's, pushed off its field by the sun, and two from clouds out of sight.\n  const sh = [];\n  for (const c of S.clouds) {\n    const ru = (((8 + 18 * c.g) * S.ks * DSRC) / 64) * 0.95 * (c.det ? sqrt(c.al) : 1);\n    sh.push(((c.x - 29 + 30 * h) * DSRC) / 64, DSRC * (1.04 + 1.1 * h), ru, ru * 1.3 + 0.5, c.al * (0.55 + 0.45 * c.g));\n  }\n  for (const s of S.shad) sh.push(((s.x - 32) * s.D) / 64, s.D, (s.r * s.D) / 64, s.rd, 1);\n  const sc = [0.46, 0.5, 0.62];\n  for (let p = FY * W; p \u003c N; p++) {\n    let m = 0;\n    for (let i = 0; i \u003c sh.length; i += 5) {\n      const du = (S.fu[p] - sh[i]) / sh[i + 2], dv = (S.fd[p] - sh[i + 1]) / sh[i + 3], q = du * du + dv * dv;\n      if (q \u003c 2.2) m = max(m, sstep(1.05, 0.6, sqrt(q) + 0.35 * (S.fn[p] - 0.5)) * sh[i + 4]);\n    }\n    if (m > 0) for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= mix(1, sc[c], m);\n  }\n\n  // Far cumulus along the horizon, then the clouds the thermal builds.\n  for (const f of S.far) drawCloud(S, f, f.hw, f.ht, 1, f.yb, 0.9, 0.5);\n  for (const c of S.clouds) drawCloud(S, c, (8 + 18 * c.g) * S.ks, (6 + 26 * c.g) * S.ks, c.g, YB, c.det ? c.al : 1, 0);\n\n  // Thistledown catching the sun as it rises.\n  const dc = mix3([240, 240, 228], [255, 222, 160], h), nd = 26 + round((10 * (S.ks - 1)) / 0.14);\n  for (let i = 0; i \u003c nd; i++) {\n    const p = S.down[i], x = round(colX(S, p.y) + p.r * cos(p.a) + 0.8 * sin(S.t * 1.7 + p.tw) - 0.5), y = round(p.y + p.r * sin(p.a) * SE - 0.5);\n    if (x \u003c 0 || x >= W) continue;\n    const a = (0.45 + 0.4 * sin(S.t * 3 + p.tw * 5)) * sstep(YB, YB + 8, p.y) * sstep(YG + 2, YG - 6, p.y);\n    for (let k = 0, q = (y * W + x) * 3; k \u003c 3; k++) buf[q + k] += (dc[k] - buf[q + k]) * a;\n  }\n\n  // The winch cable, and the one that falls on its red parachute after release.\n  const dark = [36, 34, 38];\n  for (const o of S.gl)\n    if (o.cable) {\n      stroke(S, o.X + o.dir * 3 * cos(o.pitch), o.yc - o.Z * SE - 3 * sin(o.pitch), o.X0 + o.dir * 58, 118, 0.18, 0.18);\n      flush(S, dark, 0.75);\n    }\n  const cb = S.cable;\n  if (cb) {\n    stroke(S, cb.x, cb.y, cb.xw, 118, 0.18, 0.18);\n    flush(S, dark, 0.75 * (1 - cb.t / 2));\n    stroke(S, cb.x, cb.y - 1, cb.x, cb.y - 1, 0.7, 0.7);\n    flush(S, [230, 50, 40], 1 - cb.t / 2);\n  }\n  // Gliders and buzzards, the far side of their circles first.\n  for (const o of S.gl.slice().sort((p, q) => p.Z - q.Z)) craft(S, o, h);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower."},{"name":"Gliders","min":1,"max":4,"about":"One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up."},{"name":"Wind","min":-1,"max":1,"about":"The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm."}],"start":[0,2,1,0.06],"measures":{"motion":0.0272,"detail":0.0308,"edges":0.2402,"complexity":1.2348,"coverage":0.9999,"colour":0.3714,"drift":0.0371},"knobResponse":[0.1132,0.0554,0.0527,0.073]},{"slug":"thomson-problem","title":"Thomson Problem","family":"physics","round":34,"note":"천천히 도는 구 위에서 같은 전하 100개가 서로 밀어 거의 삼각형인 격자로 앉아요. 이웃이 여섯인 전하는 가운데가 옅은 하늘색으로, 오일러 공식이 늘 열둘을 남기는 다섯 이웃 전하는 금색으로 빛나고, 일곱 이웃 전하가 생기면 자홍색이에요. K3 을 480 까지 올리면 열둘이 5-7-5 흉터로 자라고, K1 을 누르면 전하가 흩어졌다가 다시 격자로 앉아요.","idea":"Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.","buttons":"K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.","code":"// ===== Patternflow pattern =====\n// Title:   Thomson Problem\n// Family:  physics\n// Idea:    Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Thomson problem (J. J. Thomson, 1904), with the scars of Bowick, Nelson and Travesset (2000), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1\n//\n// Knob 1: Hue. Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue.\n// Knob 2: Speed. How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds.\n// Knob 3: Charges. 100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them.\n// Knob 4: Heat. A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander.\n// Buttons: K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5, RS = 29;\nconst NMIN = 100, NMAX = 480;\n// Sixfold, fivefold and sevenfold charges: hue offset, saturation at the\n// rim and at the centre, and peak level.\nconst TYPES = [\n  [0, 1, 0.4, 215],\n  [0.58, 1, 0.45, 250],\n  [0.3, 1, 0.4, 240],\n];\n// The glow's sigma in LEDs, or a fifth of the lattice spacing where that is less.\nconst SIG = 2.15;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Lattice spacing on the unit sphere: each charge holds (sqrt3/2) a^2 of the\n// 4 pi of surface.\nconst spacing = (n) => sqrt((8 * PI) / (sqrt(3) * n));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * log(u)) * cos(2 * PI * v);\n}\n\nfunction scatter(X, from, to) {\n  for (let i = from; i \u003c to; i++) {\n    const z = 2 * random() - 1, f = 2 * PI * random(), r = sqrt(1 - z * z);\n    X[3 * i] = r * cos(f);\n    X[3 * i + 1] = r * sin(f);\n    X[3 * i + 2] = z;\n  }\n}\n\n// One step of projected gradient descent on E = sum 1/r_ij, with momentum\n// beta. The step is 0.15 a^3; plain descent at 0.25 a^3 rang and never\n// settled. No charge moves more than a fifth of the spacing in one step, so a\n// fresh scatter, where two charges can sit almost on top of each other, stays\n// calm. Heat adds a random kick of up to 0.075 a per step.\nfunction relax(S, kick, beta) {\n  const { X, F, M } = S, n = S.n;\n  F.fill(0, 0, 3 * n);\n  for (let i = 0; i \u003c n; i++) {\n    const xi = X[3 * i], yi = X[3 * i + 1], zi = X[3 * i + 2];\n    let fx = 0, fy = 0, fz = 0;\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = xi - X[3 * j], dy = yi - X[3 * j + 1], dz = zi - X[3 * j + 2];\n      const r2 = dx * dx + dy * dy + dz * dz + 1e-9, q = 1 / (r2 * sqrt(r2));\n      fx += dx * q;\n      fy += dy * q;\n      fz += dz * q;\n      F[3 * j] -= dx * q;\n      F[3 * j + 1] -= dy * q;\n      F[3 * j + 2] -= dz * q;\n    }\n    F[3 * i] += fx;\n    F[3 * i + 1] += fy;\n    F[3 * i + 2] += fz;\n  }\n  const a = spacing(n), eta = 0.15 * a * a * a, cap = 0.2 * a, k = kick * a;\n  for (let i = 0; i \u003c n; i++) {\n    const o = 3 * i, x = X[o], y = X[o + 1], z = X[o + 2];\n    let fx = F[o], fy = F[o + 1], fz = F[o + 2];\n    const d = fx * x + fy * y + fz * z;\n    fx = beta * M[o] + eta * (fx - d * x);\n    fy = beta * M[o + 1] + eta * (fy - d * y);\n    fz = beta * M[o + 2] + eta * (fz - d * z);\n    const e = fx * x + fy * y + fz * z;\n    fx -= e * x;\n    fy -= e * y;\n    fz -= e * z;\n    const m = sqrt(fx * fx + fy * fy + fz * fz);\n    if (m > cap) {\n      fx *= cap / m;\n      fy *= cap / m;\n      fz *= cap / m;\n    }\n    M[o] = fx;\n    M[o + 1] = fy;\n    M[o + 2] = fz;\n    if (k > 0) {\n      fx += k * gauss();\n      fy += k * gauss();\n      fz += k * gauss();\n    }\n    const nx = x + fx, ny = y + fy, nz = z + fz, l = 1 / sqrt(nx * nx + ny * ny + nz * nz);\n    X[o] = nx * l;\n    X[o + 1] = ny * l;\n    X[o + 2] = nz * l;\n  }\n}\n\nfunction energy(X, n) {\n  let e = 0;\n  for (let i = 0; i \u003c n; i++)\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = X[3 * i] - X[3 * j], dy = X[3 * i + 1] - X[3 * j + 1], dz = X[3 * i + 2] - X[3 * j + 2];\n      e += 1 / sqrt(dx * dx + dy * dy + dz * dz);\n    }\n  return e;\n}\n\n// The Delaunay triangulation of points on a sphere is their convex hull.\n// Incremental hull: each new point removes the faces it sees and joins the\n// horizon around them to itself. E maps a directed edge u->v to its face.\nfunction hull(S) {\n  const P = S.U, n = S.n, { fa, fb, fc, fx, fy, fz, fd, vis, E } = S;\n  let nf = 0;\n  const add = (a, b, c) => {\n    const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n    const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n    const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n    const x = uy * vz - uz * vy, y = uz * vx - ux * vz, z = ux * vy - uy * vx;\n    fa[nf] = a;\n    fb[nf] = b;\n    fc[nf] = c;\n    fx[nf] = x;\n    fy[nf] = y;\n    fz[nf] = z;\n    fd[nf] = x * ax + y * ay + z * az;\n    vis[nf] = 0;\n    E[a * n + b] = nf;\n    E[b * n + c] = nf;\n    E[c * n + a] = nf;\n    return nf++;\n  };\n  // The fourth point of the first tetrahedron is the one farthest from the\n  // plane of the first three.\n  let k = 3, best = -1;\n  for (let j = 3; j \u003c n; j++) {\n    const v = abs(orient(P, 0, 1, 2, j));\n    if (v > best) (best = v), (k = j);\n  }\n  let live = [];\n  if (orient(P, 0, 1, 2, k) \u003c 0) live.push(add(0, 1, 2), add(1, 0, k), add(2, 1, k), add(0, 2, k));\n  else live.push(add(0, 2, 1), add(0, 1, k), add(1, 2, k), add(2, 0, k));\n  const seen = [], rim = [];\n  for (let p = 3; p \u003c n; p++) {\n    if (p === k) continue;\n    const px = P[3 * p], py = P[3 * p + 1], pz = P[3 * p + 2];\n    seen.length = 0;\n    for (let q = 0; q \u003c live.length; q++) {\n      const f = live[q];\n      if (fx[f] * px + fy[f] * py + fz[f] * pz - fd[f] > 1e-13) {\n        vis[f] = 1;\n        seen.push(f);\n      }\n    }\n    if (!seen.length) continue;\n    rim.length = 0;\n    for (const f of seen) {\n      const a = fa[f], b = fb[f], c = fc[f];\n      if (!vis[E[b * n + a]]) rim.push(a, b);\n      if (!vis[E[c * n + b]]) rim.push(b, c);\n      if (!vis[E[a * n + c]]) rim.push(c, a);\n    }\n    const next = [];\n    for (const f of live) if (!vis[f]) next.push(f);\n    for (let r = 0; r \u003c rim.length; r += 2) next.push(add(rim[r], rim[r + 1], p));\n    live = next;\n  }\n  // Keep the faces as the triangulation the flips look after from here on.\n  S.nt = live.length;\n  for (let t = 0; t \u003c live.length; t++) {\n    const f = live[t];\n    S.ta[t] = fa[f];\n    S.tb[t] = fb[f];\n    S.tc[t] = fc[f];\n  }\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = S.ta[t], b = S.tb[t], c = S.tc[t];\n    E[a * n + b] = t;\n    E[b * n + c] = t;\n    E[c * n + a] = t;\n  }\n}\n\n// (d - a) . ((b - a) x (c - a)): positive when d lies outside the plane of the\n// triangle abc, which on the sphere means inside its circumcircle.\nfunction orient(P, a, b, c, d) {\n  const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n  const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n  const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n  const wx = P[3 * d] - ax, wy = P[3 * d + 1] - ay, wz = P[3 * d + 2] - az;\n  return wx * (uy * vz - uz * vy) + wy * (uz * vx - ux * vz) + wz * (ux * vy - uy * vx);\n}\n\n// Between hulls the triangulation follows the charges by edge flips. An edge\n// flips only once the far point is inside the circumcircle by 2% of what a\n// perfect lattice holds it outside, so a nearly square quad does not toggle\n// a 5-7 pair from frame to frame. A face turned inside out asks for a new hull.\nfunction maintain(S) {\n  const P = S.U, n = S.n, { ta, tb, tc, E } = S;\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = ta[t], b = tb[t], c = tc[t];\n    const ux = P[3 * b] - P[3 * a], uy = P[3 * b + 1] - P[3 * a + 1], uz = P[3 * b + 2] - P[3 * a + 2];\n    const vx = P[3 * c] - P[3 * a], vy = P[3 * c + 1] - P[3 * a + 1], vz = P[3 * c + 2] - P[3 * a + 2];\n    const d = (uy * vz - uz * vy) * P[3 * a] + (uz * vx - ux * vz) * P[3 * a + 1] + (ux * vy - uy * vx) * P[3 * a + 2];\n    if (d \u003c= 0) return hull(S);\n  }\n  const a = spacing(n), thr = 0.02 * 0.433 * a * a * a * a;\n  for (let pass = 0; pass \u003c 8; pass++) {\n    let flips = 0;\n    for (let t = 0; t \u003c S.nt; t++)\n      for (let e = 0; e \u003c 3; e++) {\n        const u = e === 0 ? ta[t] : e === 1 ? tb[t] : tc[t];\n        const v = e === 0 ? tb[t] : e === 1 ? tc[t] : ta[t];\n        const w = e === 0 ? tc[t] : e === 1 ? ta[t] : tb[t];\n        if (u > v) continue;\n        const s = E[v * n + u];\n        const x = ta[s] !== u && ta[s] !== v ? ta[s] : tb[s] !== u && tb[s] !== v ? tb[s] : tc[s];\n        if (orient(P, u, v, w, x) > thr) {\n          ta[t] = w;\n          tb[t] = u;\n          tc[t] = x;\n          ta[s] = x;\n          tb[s] = v;\n          tc[s] = w;\n          E[w * n + u] = t;\n          E[u * n + x] = t;\n          E[x * n + w] = t;\n          E[x * n + v] = s;\n          E[v * n + w] = s;\n          E[w * n + x] = s;\n          flips++;\n          break;\n        }\n      }\n    if (!flips) break;\n  }\n}\n\n// U is the display position: the charge's position smoothed over about seven\n// steps and put back on the sphere, so heat shows as a wobble and not a buzz,\n// and the lattice is read from where the charges sit, not where they shiver.\nfunction smooth(S, k) {\n  const { X, V, U } = S;\n  for (let i = 0; i \u003c S.n; i++) {\n    const o = 3 * i;\n    V[o] += k * (X[o] - V[o]);\n    V[o + 1] += k * (X[o + 1] - V[o + 1]);\n    V[o + 2] += k * (X[o + 2] - V[o + 2]);\n    const l = 1 / sqrt(V[o] * V[o] + V[o + 1] * V[o + 1] + V[o + 2] * V[o + 2]);\n    U[o] = V[o] * l;\n    U[o + 1] = V[o + 1] * l;\n    U[o + 2] = V[o + 2] * l;\n  }\n}\n\nfunction degrees(S) {\n  const { deg, ta, tb, tc } = S;\n  deg.fill(0, 0, S.n);\n  for (let t = 0; t \u003c S.nt; t++) {\n    deg[ta[t]]++;\n    deg[tb[t]]++;\n    deg[tc[t]]++;\n  }\n}\n\n// The opening: a few scatters, each run down 400 steps with heavy momentum\n// (0.9), and the one with the lowest energy kept. At 100 charges the best of\n// five opens 0.02 above the known minimum 4448.3506, with just the twelve.\nfunction settle(S) {\n  const n = S.n, tries = n \u003c= 160 ? 5 : n \u003c= 300 ? 3 : 1, steps = n \u003c= 300 ? 400 : 300;\n  const keep = new Float64Array(3 * n);\n  let best = Infinity;\n  for (let r = 0; r \u003c tries; r++) {\n    scatter(S.X, 0, n);\n    S.M.fill(0);\n    for (let i = 0; i \u003c steps; i++) relax(S, 0, 0.9);\n    const e = energy(S.X, n);\n    if (e \u003c best) {\n      best = e;\n      keep.set(S.X.subarray(0, 3 * n));\n    }\n  }\n  S.X.set(keep);\n  S.V.set(keep);\n  S.U.set(keep);\n  S.M.fill(0);\n  hull(S);\n  degrees(S);\n  for (let i = 0; i \u003c n; i++) {\n    S.f5[i] = S.deg[i] \u003c 6 ? 1 : 0;\n    S.f7[i] = S.deg[i] > 6 ? 1 : 0;\n  }\n}\n\nfunction resize(S, n) {\n  const old = S.n;\n  S.n = n;\n  if (n > old) {\n    scatter(S.X, old, n);\n    for (let i = 3 * old; i \u003c 3 * n; i++) {\n      S.V[i] = S.U[i] = S.X[i];\n      S.M[i] = 0;\n    }\n    for (let i = old; i \u003c n; i++) S.f5[i] = S.f7[i] = 0;\n  }\n  hull(S);\n}\n\nexport function setup(params) {\n  const F = 16 * NMAX + 64;\n  params.s = {\n    n: 0, hue: 0, speed: 2, heat: 0.06, turn: 0, acc: 0, warm: false,\n    X: new Float64Array(3 * NMAX), F: new Float64Array(3 * NMAX), M: new Float64Array(3 * NMAX), V: new Float64Array(3 * NMAX), U: new Float64Array(3 * NMAX),\n    fa: new Int32Array(F), fb: new Int32Array(F), fc: new Int32Array(F), fx: new Float64Array(F), fy: new Float64Array(F), fz: new Float64Array(F), fd: new Float64Array(F), vis: new Uint8Array(F),\n    E: new Int32Array(NMAX * NMAX), ta: new Int32Array(2 * NMAX), tb: new Int32Array(2 * NMAX), tc: new Int32Array(2 * NMAX), nt: 0,\n    deg: new Int32Array(NMAX), f5: new Float32Array(NMAX), f7: new Float32Array(NMAX),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0, 0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, NMIN, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.heat = cl(k[3], 0, 1);\n  const n = round(cl(k[2], NMIN, NMAX)), kick = 0.075 * S.heat;\n  if (!S.warm) {\n    S.n = n;\n    settle(S);\n    S.warm = true;\n  } else if (n !== S.n) resize(S, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    scatter(S.X, 0, S.n);\n    S.M.fill(0);\n    S.V.set(S.X.subarray(0, 3 * S.n));\n    S.U.set(S.X.subarray(0, 3 * S.n));\n    hull(S);\n  }\n  // 30 steps a second for each unit of Speed, at most six a frame.\n  S.acc += d * S.speed * 30;\n  let steps = min(6, floor(S.acc));\n  S.acc -= floor(S.acc);\n  for (; steps > 0; steps--) {\n    relax(S, kick, 0.5);\n    smooth(S, 0.15);\n  }\n  maintain(S);\n  degrees(S);\n  const ease = 1 - exp(-d / 0.08);\n  for (let i = 0; i \u003c S.n; i++) {\n    S.f5[i] += ease * ((S.deg[i] \u003c 6 ? 1 : 0) - S.f5[i]);\n    S.f7[i] += ease * ((S.deg[i] > 6 ? 1 : 0) - S.f7[i]);\n  }\n  S.turn += d * S.speed * 0.1;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { U, R, G, B, c, f5, f7 } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The sphere turns about an axis leaning 20 degrees toward the viewer.\n  const ct = cos(S.turn), st = sin(S.turn), cx = cos(0.35), sx = sin(0.35);\n  const h = S.hue + 0.55;\n  // Each charge is one soft gaussian glow. Its colour runs from nearly white\n  // at the centre to the full hue at the rim: hsv(hue, s, 1) is white less s\n  // times (1 - the pure hue), and s falls with the square of the glow.\n  const T = TYPES.map(([dh, sr, sc, lv]) => {\n    const q = [0, 0, 0];\n    hsv(h + dh, 1, 1, q);\n    return [1 - q[0], 1 - q[1], 1 - q[2], sr, sr - sc, lv];\n  });\n  const sp = spacing(n) * RS, sig = min(SIG, 0.2 * sp);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = U[3 * i], y0 = U[3 * i + 1], z0 = U[3 * i + 2];\n    const x1 = ct * x0 + st * z0, z1 = -st * x0 + ct * z0;\n    const y = cx * y0 - sx * z1, z = sx * y0 + cx * z1, x = x1;\n    if (z \u003c -0.02) continue;\n    const t = cl((z + 0.02) / 0.37, 0, 1), w = t * t * (3 - 2 * t);\n    const a5 = f5[i], a7 = f7[i], a6 = 1 - a5 - a7;\n    for (let j = 0; j \u003c 6; j++) c[j] = T[0][j] * a6 + T[1][j] * a5 + T[2][j] * a7;\n    const L = c[5] * w * (0.55 + 0.45 * z), s = sig * (1 + 0.25 * (a5 + a7));\n    // Foreshortened toward the rim: narrower across the radius.\n    const px = CX + RS * x, py = CY - RS * y, rr = sqrt(x * x + y * y) || 1, rx = x / rr, ry = -y / rr;\n    const sr = s * (0.45 + 0.55 * z), ir = 1 / (2 * sr * sr), it = 1 / (2 * s * s), ext = 3 * s;\n    for (let yy = max(0, floor(py - ext)); yy \u003c= min(H - 1, py + ext); yy++)\n      for (let xx = max(0, floor(px - ext)); xx \u003c= min(W - 1, px + ext); xx++) {\n        const dx = xx - px, dy = yy - py, dr = dx * rx + dy * ry, dq = -dx * ry + dy * rx;\n        const g = exp(-dr * dr * ir - dq * dq * it), v = L * g, sat = v * (c[3] - c[4] * g * g * g), p = yy * W + xx;\n        R[p] += v - sat * c[0];\n        G[p] += v - sat * c[1];\n        B[p] += v - sat * c[2];\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","layer":{"id":"layer-thomson-problem","type":"code","name":"thomson-problem","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Thomson Problem\n// Family:  physics\n// Idea:    Equal point charges on a slowly turning sphere push each other into an almost triangular lattice, and the charges with five neighbours instead of six, which Euler's formula keeps at exactly twelve more than those with seven, glow gold among the pale-centred blue ones.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Thomson problem (J. J. Thomson, 1904), with the scars of Bowick, Nelson and Travesset (2000), pattern round 34\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1\n//\n// Knob 1: Hue. Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue.\n// Knob 2: Speed. How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds.\n// Knob 3: Charges. 100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them.\n// Knob 4: Heat. A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander.\n// Buttons: K1 tap scatters every charge at random over the sphere, and they anneal back into a lattice in front of you.\n\nconst W = 64, H = 128, CX = 31.5, CY = 63.5, RS = 29;\nconst NMIN = 100, NMAX = 480;\n// Sixfold, fivefold and sevenfold charges: hue offset, saturation at the\n// rim and at the centre, and peak level.\nconst TYPES = [\n  [0, 1, 0.4, 215],\n  [0.58, 1, 0.45, 250],\n  [0.3, 1, 0.4, 240],\n];\n// The glow's sigma in LEDs, or a fifth of the lattice spacing where that is less.\nconst SIG = 2.15;\nconst { floor, min, max, abs, sqrt, sin, cos, exp, log, round, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n// Lattice spacing on the unit sphere: each charge holds (sqrt3/2) a^2 of the\n// 4 pi of surface.\nconst spacing = (n) => sqrt((8 * PI) / (sqrt(3) * n));\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\nfunction gauss() {\n  const u = 1 - random(), v = random();\n  return sqrt(-2 * log(u)) * cos(2 * PI * v);\n}\n\nfunction scatter(X, from, to) {\n  for (let i = from; i \u003c to; i++) {\n    const z = 2 * random() - 1, f = 2 * PI * random(), r = sqrt(1 - z * z);\n    X[3 * i] = r * cos(f);\n    X[3 * i + 1] = r * sin(f);\n    X[3 * i + 2] = z;\n  }\n}\n\n// One step of projected gradient descent on E = sum 1/r_ij, with momentum\n// beta. The step is 0.15 a^3; plain descent at 0.25 a^3 rang and never\n// settled. No charge moves more than a fifth of the spacing in one step, so a\n// fresh scatter, where two charges can sit almost on top of each other, stays\n// calm. Heat adds a random kick of up to 0.075 a per step.\nfunction relax(S, kick, beta) {\n  const { X, F, M } = S, n = S.n;\n  F.fill(0, 0, 3 * n);\n  for (let i = 0; i \u003c n; i++) {\n    const xi = X[3 * i], yi = X[3 * i + 1], zi = X[3 * i + 2];\n    let fx = 0, fy = 0, fz = 0;\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = xi - X[3 * j], dy = yi - X[3 * j + 1], dz = zi - X[3 * j + 2];\n      const r2 = dx * dx + dy * dy + dz * dz + 1e-9, q = 1 / (r2 * sqrt(r2));\n      fx += dx * q;\n      fy += dy * q;\n      fz += dz * q;\n      F[3 * j] -= dx * q;\n      F[3 * j + 1] -= dy * q;\n      F[3 * j + 2] -= dz * q;\n    }\n    F[3 * i] += fx;\n    F[3 * i + 1] += fy;\n    F[3 * i + 2] += fz;\n  }\n  const a = spacing(n), eta = 0.15 * a * a * a, cap = 0.2 * a, k = kick * a;\n  for (let i = 0; i \u003c n; i++) {\n    const o = 3 * i, x = X[o], y = X[o + 1], z = X[o + 2];\n    let fx = F[o], fy = F[o + 1], fz = F[o + 2];\n    const d = fx * x + fy * y + fz * z;\n    fx = beta * M[o] + eta * (fx - d * x);\n    fy = beta * M[o + 1] + eta * (fy - d * y);\n    fz = beta * M[o + 2] + eta * (fz - d * z);\n    const e = fx * x + fy * y + fz * z;\n    fx -= e * x;\n    fy -= e * y;\n    fz -= e * z;\n    const m = sqrt(fx * fx + fy * fy + fz * fz);\n    if (m > cap) {\n      fx *= cap / m;\n      fy *= cap / m;\n      fz *= cap / m;\n    }\n    M[o] = fx;\n    M[o + 1] = fy;\n    M[o + 2] = fz;\n    if (k > 0) {\n      fx += k * gauss();\n      fy += k * gauss();\n      fz += k * gauss();\n    }\n    const nx = x + fx, ny = y + fy, nz = z + fz, l = 1 / sqrt(nx * nx + ny * ny + nz * nz);\n    X[o] = nx * l;\n    X[o + 1] = ny * l;\n    X[o + 2] = nz * l;\n  }\n}\n\nfunction energy(X, n) {\n  let e = 0;\n  for (let i = 0; i \u003c n; i++)\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = X[3 * i] - X[3 * j], dy = X[3 * i + 1] - X[3 * j + 1], dz = X[3 * i + 2] - X[3 * j + 2];\n      e += 1 / sqrt(dx * dx + dy * dy + dz * dz);\n    }\n  return e;\n}\n\n// The Delaunay triangulation of points on a sphere is their convex hull.\n// Incremental hull: each new point removes the faces it sees and joins the\n// horizon around them to itself. E maps a directed edge u->v to its face.\nfunction hull(S) {\n  const P = S.U, n = S.n, { fa, fb, fc, fx, fy, fz, fd, vis, E } = S;\n  let nf = 0;\n  const add = (a, b, c) => {\n    const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n    const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n    const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n    const x = uy * vz - uz * vy, y = uz * vx - ux * vz, z = ux * vy - uy * vx;\n    fa[nf] = a;\n    fb[nf] = b;\n    fc[nf] = c;\n    fx[nf] = x;\n    fy[nf] = y;\n    fz[nf] = z;\n    fd[nf] = x * ax + y * ay + z * az;\n    vis[nf] = 0;\n    E[a * n + b] = nf;\n    E[b * n + c] = nf;\n    E[c * n + a] = nf;\n    return nf++;\n  };\n  // The fourth point of the first tetrahedron is the one farthest from the\n  // plane of the first three.\n  let k = 3, best = -1;\n  for (let j = 3; j \u003c n; j++) {\n    const v = abs(orient(P, 0, 1, 2, j));\n    if (v > best) (best = v), (k = j);\n  }\n  let live = [];\n  if (orient(P, 0, 1, 2, k) \u003c 0) live.push(add(0, 1, 2), add(1, 0, k), add(2, 1, k), add(0, 2, k));\n  else live.push(add(0, 2, 1), add(0, 1, k), add(1, 2, k), add(2, 0, k));\n  const seen = [], rim = [];\n  for (let p = 3; p \u003c n; p++) {\n    if (p === k) continue;\n    const px = P[3 * p], py = P[3 * p + 1], pz = P[3 * p + 2];\n    seen.length = 0;\n    for (let q = 0; q \u003c live.length; q++) {\n      const f = live[q];\n      if (fx[f] * px + fy[f] * py + fz[f] * pz - fd[f] > 1e-13) {\n        vis[f] = 1;\n        seen.push(f);\n      }\n    }\n    if (!seen.length) continue;\n    rim.length = 0;\n    for (const f of seen) {\n      const a = fa[f], b = fb[f], c = fc[f];\n      if (!vis[E[b * n + a]]) rim.push(a, b);\n      if (!vis[E[c * n + b]]) rim.push(b, c);\n      if (!vis[E[a * n + c]]) rim.push(c, a);\n    }\n    const next = [];\n    for (const f of live) if (!vis[f]) next.push(f);\n    for (let r = 0; r \u003c rim.length; r += 2) next.push(add(rim[r], rim[r + 1], p));\n    live = next;\n  }\n  // Keep the faces as the triangulation the flips look after from here on.\n  S.nt = live.length;\n  for (let t = 0; t \u003c live.length; t++) {\n    const f = live[t];\n    S.ta[t] = fa[f];\n    S.tb[t] = fb[f];\n    S.tc[t] = fc[f];\n  }\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = S.ta[t], b = S.tb[t], c = S.tc[t];\n    E[a * n + b] = t;\n    E[b * n + c] = t;\n    E[c * n + a] = t;\n  }\n}\n\n// (d - a) . ((b - a) x (c - a)): positive when d lies outside the plane of the\n// triangle abc, which on the sphere means inside its circumcircle.\nfunction orient(P, a, b, c, d) {\n  const ax = P[3 * a], ay = P[3 * a + 1], az = P[3 * a + 2];\n  const ux = P[3 * b] - ax, uy = P[3 * b + 1] - ay, uz = P[3 * b + 2] - az;\n  const vx = P[3 * c] - ax, vy = P[3 * c + 1] - ay, vz = P[3 * c + 2] - az;\n  const wx = P[3 * d] - ax, wy = P[3 * d + 1] - ay, wz = P[3 * d + 2] - az;\n  return wx * (uy * vz - uz * vy) + wy * (uz * vx - ux * vz) + wz * (ux * vy - uy * vx);\n}\n\n// Between hulls the triangulation follows the charges by edge flips. An edge\n// flips only once the far point is inside the circumcircle by 2% of what a\n// perfect lattice holds it outside, so a nearly square quad does not toggle\n// a 5-7 pair from frame to frame. A face turned inside out asks for a new hull.\nfunction maintain(S) {\n  const P = S.U, n = S.n, { ta, tb, tc, E } = S;\n  for (let t = 0; t \u003c S.nt; t++) {\n    const a = ta[t], b = tb[t], c = tc[t];\n    const ux = P[3 * b] - P[3 * a], uy = P[3 * b + 1] - P[3 * a + 1], uz = P[3 * b + 2] - P[3 * a + 2];\n    const vx = P[3 * c] - P[3 * a], vy = P[3 * c + 1] - P[3 * a + 1], vz = P[3 * c + 2] - P[3 * a + 2];\n    const d = (uy * vz - uz * vy) * P[3 * a] + (uz * vx - ux * vz) * P[3 * a + 1] + (ux * vy - uy * vx) * P[3 * a + 2];\n    if (d \u003c= 0) return hull(S);\n  }\n  const a = spacing(n), thr = 0.02 * 0.433 * a * a * a * a;\n  for (let pass = 0; pass \u003c 8; pass++) {\n    let flips = 0;\n    for (let t = 0; t \u003c S.nt; t++)\n      for (let e = 0; e \u003c 3; e++) {\n        const u = e === 0 ? ta[t] : e === 1 ? tb[t] : tc[t];\n        const v = e === 0 ? tb[t] : e === 1 ? tc[t] : ta[t];\n        const w = e === 0 ? tc[t] : e === 1 ? ta[t] : tb[t];\n        if (u > v) continue;\n        const s = E[v * n + u];\n        const x = ta[s] !== u && ta[s] !== v ? ta[s] : tb[s] !== u && tb[s] !== v ? tb[s] : tc[s];\n        if (orient(P, u, v, w, x) > thr) {\n          ta[t] = w;\n          tb[t] = u;\n          tc[t] = x;\n          ta[s] = x;\n          tb[s] = v;\n          tc[s] = w;\n          E[w * n + u] = t;\n          E[u * n + x] = t;\n          E[x * n + w] = t;\n          E[x * n + v] = s;\n          E[v * n + w] = s;\n          E[w * n + x] = s;\n          flips++;\n          break;\n        }\n      }\n    if (!flips) break;\n  }\n}\n\n// U is the display position: the charge's position smoothed over about seven\n// steps and put back on the sphere, so heat shows as a wobble and not a buzz,\n// and the lattice is read from where the charges sit, not where they shiver.\nfunction smooth(S, k) {\n  const { X, V, U } = S;\n  for (let i = 0; i \u003c S.n; i++) {\n    const o = 3 * i;\n    V[o] += k * (X[o] - V[o]);\n    V[o + 1] += k * (X[o + 1] - V[o + 1]);\n    V[o + 2] += k * (X[o + 2] - V[o + 2]);\n    const l = 1 / sqrt(V[o] * V[o] + V[o + 1] * V[o + 1] + V[o + 2] * V[o + 2]);\n    U[o] = V[o] * l;\n    U[o + 1] = V[o + 1] * l;\n    U[o + 2] = V[o + 2] * l;\n  }\n}\n\nfunction degrees(S) {\n  const { deg, ta, tb, tc } = S;\n  deg.fill(0, 0, S.n);\n  for (let t = 0; t \u003c S.nt; t++) {\n    deg[ta[t]]++;\n    deg[tb[t]]++;\n    deg[tc[t]]++;\n  }\n}\n\n// The opening: a few scatters, each run down 400 steps with heavy momentum\n// (0.9), and the one with the lowest energy kept. At 100 charges the best of\n// five opens 0.02 above the known minimum 4448.3506, with just the twelve.\nfunction settle(S) {\n  const n = S.n, tries = n \u003c= 160 ? 5 : n \u003c= 300 ? 3 : 1, steps = n \u003c= 300 ? 400 : 300;\n  const keep = new Float64Array(3 * n);\n  let best = Infinity;\n  for (let r = 0; r \u003c tries; r++) {\n    scatter(S.X, 0, n);\n    S.M.fill(0);\n    for (let i = 0; i \u003c steps; i++) relax(S, 0, 0.9);\n    const e = energy(S.X, n);\n    if (e \u003c best) {\n      best = e;\n      keep.set(S.X.subarray(0, 3 * n));\n    }\n  }\n  S.X.set(keep);\n  S.V.set(keep);\n  S.U.set(keep);\n  S.M.fill(0);\n  hull(S);\n  degrees(S);\n  for (let i = 0; i \u003c n; i++) {\n    S.f5[i] = S.deg[i] \u003c 6 ? 1 : 0;\n    S.f7[i] = S.deg[i] > 6 ? 1 : 0;\n  }\n}\n\nfunction resize(S, n) {\n  const old = S.n;\n  S.n = n;\n  if (n > old) {\n    scatter(S.X, old, n);\n    for (let i = 3 * old; i \u003c 3 * n; i++) {\n      S.V[i] = S.U[i] = S.X[i];\n      S.M[i] = 0;\n    }\n    for (let i = old; i \u003c n; i++) S.f5[i] = S.f7[i] = 0;\n  }\n  hull(S);\n}\n\nexport function setup(params) {\n  const F = 16 * NMAX + 64;\n  params.s = {\n    n: 0, hue: 0, speed: 2, heat: 0.06, turn: 0, acc: 0, warm: false,\n    X: new Float64Array(3 * NMAX), F: new Float64Array(3 * NMAX), M: new Float64Array(3 * NMAX), V: new Float64Array(3 * NMAX), U: new Float64Array(3 * NMAX),\n    fa: new Int32Array(F), fb: new Int32Array(F), fc: new Int32Array(F), fx: new Float64Array(F), fy: new Float64Array(F), fz: new Float64Array(F), fd: new Float64Array(F), vis: new Uint8Array(F),\n    E: new Int32Array(NMAX * NMAX), ta: new Int32Array(2 * NMAX), tb: new Int32Array(2 * NMAX), tc: new Int32Array(2 * NMAX), nt: 0,\n    deg: new Int32Array(NMAX), f5: new Float32Array(NMAX), f7: new Float32Array(NMAX),\n    R: new Float32Array(W * H), G: new Float32Array(W * H), B: new Float32Array(W * H), c: [0, 0, 0, 0, 0, 0],\n  };\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, NMIN, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.heat = cl(k[3], 0, 1);\n  const n = round(cl(k[2], NMIN, NMAX)), kick = 0.075 * S.heat;\n  if (!S.warm) {\n    S.n = n;\n    settle(S);\n    S.warm = true;\n  } else if (n !== S.n) resize(S, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    scatter(S.X, 0, S.n);\n    S.M.fill(0);\n    S.V.set(S.X.subarray(0, 3 * S.n));\n    S.U.set(S.X.subarray(0, 3 * S.n));\n    hull(S);\n  }\n  // 30 steps a second for each unit of Speed, at most six a frame.\n  S.acc += d * S.speed * 30;\n  let steps = min(6, floor(S.acc));\n  S.acc -= floor(S.acc);\n  for (; steps > 0; steps--) {\n    relax(S, kick, 0.5);\n    smooth(S, 0.15);\n  }\n  maintain(S);\n  degrees(S);\n  const ease = 1 - exp(-d / 0.08);\n  for (let i = 0; i \u003c S.n; i++) {\n    S.f5[i] += ease * ((S.deg[i] \u003c 6 ? 1 : 0) - S.f5[i]);\n    S.f7[i] += ease * ((S.deg[i] > 6 ? 1 : 0) - S.f7[i]);\n  }\n  S.turn += d * S.speed * 0.1;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { U, R, G, B, c, f5, f7 } = S, n = S.n;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The sphere turns about an axis leaning 20 degrees toward the viewer.\n  const ct = cos(S.turn), st = sin(S.turn), cx = cos(0.35), sx = sin(0.35);\n  const h = S.hue + 0.55;\n  // Each charge is one soft gaussian glow. Its colour runs from nearly white\n  // at the centre to the full hue at the rim: hsv(hue, s, 1) is white less s\n  // times (1 - the pure hue), and s falls with the square of the glow.\n  const T = TYPES.map(([dh, sr, sc, lv]) => {\n    const q = [0, 0, 0];\n    hsv(h + dh, 1, 1, q);\n    return [1 - q[0], 1 - q[1], 1 - q[2], sr, sr - sc, lv];\n  });\n  const sp = spacing(n) * RS, sig = min(SIG, 0.2 * sp);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = U[3 * i], y0 = U[3 * i + 1], z0 = U[3 * i + 2];\n    const x1 = ct * x0 + st * z0, z1 = -st * x0 + ct * z0;\n    const y = cx * y0 - sx * z1, z = sx * y0 + cx * z1, x = x1;\n    if (z \u003c -0.02) continue;\n    const t = cl((z + 0.02) / 0.37, 0, 1), w = t * t * (3 - 2 * t);\n    const a5 = f5[i], a7 = f7[i], a6 = 1 - a5 - a7;\n    for (let j = 0; j \u003c 6; j++) c[j] = T[0][j] * a6 + T[1][j] * a5 + T[2][j] * a7;\n    const L = c[5] * w * (0.55 + 0.45 * z), s = sig * (1 + 0.25 * (a5 + a7));\n    // Foreshortened toward the rim: narrower across the radius.\n    const px = CX + RS * x, py = CY - RS * y, rr = sqrt(x * x + y * y) || 1, rx = x / rr, ry = -y / rr;\n    const sr = s * (0.45 + 0.55 * z), ir = 1 / (2 * sr * sr), it = 1 / (2 * s * s), ext = 3 * s;\n    for (let yy = max(0, floor(py - ext)); yy \u003c= min(H - 1, py + ext); yy++)\n      for (let xx = max(0, floor(px - ext)); xx \u003c= min(W - 1, px + ext); xx++) {\n        const dx = xx - px, dy = yy - py, dr = dx * rx + dy * ry, dq = -dx * ry + dy * rx;\n        const g = exp(-dr * dr * ir - dq * dq * it), v = L * g, sat = v * (c[3] - c[4] * g * g * g), p = yy * W + xx;\n        R[p] += v - sat * c[0];\n        G[p] += v - sat * c[1];\n        B[p] += v - sat * c[2];\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      display.setPixel(x, y, round(min(255, R[p])), round(min(255, G[p])), round(min(255, B[p])));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Charges=100..480, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the sphere once round the wheel. At 0 the sixfold charges are sky blue with pale centres, the fivefold gold and the sevenfold magenta; at 0.25 they are violet, green and orange, at 0.5 orange, blue and green, at 0.75 green, magenta and blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sphere turns and the charges move. At 2 the sphere turns 0.2 radians a second, once in 31 seconds, and the charges take 60 descent steps a second, so a scattered sphere is a lattice again within half a second; at 0.2 a turn takes over five minutes and the lattice five seconds; at 3 a turn takes 21 seconds."},{"name":"Charges","min":100,"max":480,"about":"100 to 480 charges. At 100, 11 LEDs apart, the opening holds exactly twelve fivefold charges and no sevenfold one, 0.02 above the known minimum energy 4448.351; at 200 two 5-7 pairs are left over, at 300 four; at 480, 5 LEDs apart, the twelve have grown into short scars, gold-magenta-gold chains, 25 fivefold and 13 sevenfold charges in all. Turning it drops new charges at random places or takes the last ones away, and the lattice heals round them."},{"name":"Heat","min":0,"max":1,"about":"A random kick at each step, up to 0.075 of the lattice spacing at 1. At 0.06 the lattice holds still; at 0.5 one to three 5-7 pairs flicker in and out every few seconds; at 1 four to twelve pairs come and go at once, with a fourfold charge now and then, and the fivefold charges wander."}],"start":[0,2,100,0.06],"measures":{"motion":0.1033,"detail":0.027,"edges":0.1646,"complexity":0.9152,"coverage":0.2589,"colour":0.1371,"drift":0.0297},"knobResponse":[0.0593,0.055,0.0527,0.0511]},{"slug":"three-gaps","title":"Three Gaps","family":"number","round":30,"note":"원 위에 α 씩 돌아가며 점을 찍으면 이웃 간격은 많아야 세 가지예요. 줄마다 점을 하나씩 더해 간격을 길이 등급으로 칠하고, α 가 분수에 닿으면 아래쪽이 줄무늬로 무너져요.","idea":"Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.","buttons":"K1 tap sends a straight to the stop at the end of the leg it is on.","code":"// ===== Patternflow pattern =====\n// Title:   Three Gaps\n// Family:  number\n// Idea:    Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: three-gap theorem (conjectured by Hugo Steinhaus, proved by Vera T. Sós, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair.\n// Knob 2: Speed. How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s.\n// Knob 3: Alpha. Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns.\n// Knob 4: Points. How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples.\n// Buttons: K1 tap sends a straight to the stop at the end of the leg it is on.\n\nconst W = 64, H = 128, SS = 4, NMAX = 160, Q = 21;\nconst { min, max, floor, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\nconst GOLD = (Math.sqrt(5) - 1) / 2, BRONZE = (Math.sqrt(13) - 3) / 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The two fractions with denominator at most 21 that hold a0 between them,\n// found by walking down the Stern-Brocot tree: 8/13 and 13/21 for 1/phi.\nfunction bracket(a0) {\n  let a = 0, b = 1, c = 1, d = 1;\n  for (;;) {\n    const p = a + c, q = b + d;\n    if (q > Q) break;\n    if (a0 \u003c p / q) (c = p), (d = q);\n    else (a = p), (b = q);\n  }\n  return [a / b, c / d];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, k3: -1, a0: GOLD, ends: [GOLD, GOLD], u: 0, nmax: 36, alpha: GOLD,\n    pos: new Float64Array(NMAX + 1), idx: new Int32Array(NMAX + 1), sep: new Float32Array(W),\n    row: new Float32Array(W * 3), lut: new Float32Array(3 * 64), lutHue: NaN,\n  };\n}\n\nconst stop = (P, i) => (i & 1 ? P.ends[i >> 1] : P.a0);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nmax = floor(30 + 100 * cl(k[3], 0, 1));\n  const k3 = cl(k[2], 0, 1);\n  if (k3 !== P.k3) {\n    P.k3 = k3;\n    P.a0 = GOLD + (BRONZE - GOLD) * k3;\n    // The nearer fraction first. On a fraction exactly, points would land on\n    // each other and floating point would shuffle their order; 3e-7 off it,\n    // on a0's side, they stay in order and the picture is the same.\n    const [lo, hi] = bracket(P.a0);\n    P.ends = P.a0 - lo \u003c hi - P.a0 ? [lo + 3e-7, hi - 3e-7] : [hi - 3e-7, lo + 3e-7];\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.u = floor(P.u) + 1;\n  // a goes a0, first fraction, a0, second fraction, a0, easing in and out of\n  // each stop; a longer leg takes longer, so the bottom row never runs away.\n  const s = floor(P.u) & 3, from = stop(P, s), to = stop(P, (s + 1) & 3);\n  P.u += (d * P.speed * 0.15) / (0.4 + abs(to - from) / 0.004);\n  const s2 = floor(P.u) & 3, A = stop(P, s2), B = stop(P, (s2 + 1) & 3);\n  P.alpha = A + (B - A) * ease(P.u - floor(P.u));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pos, idx, sep, row, lut } = P, a = P.alpha, nmax = P.nmax;\n  if (P.lutHue !== P.hue) {\n    // Colour by the rank of the length: yellow the longest, cyan the middle,\n    // magenta the shortest, and mixes for ranks in between. Mixed as light,\n    // not round the wheel, which would put a dark blue between cyan and\n    // magenta, then brought back to saturation 0.7 so a mix is not grey.\n    const c3 = new Float32Array(9);\n    for (let c = 0; c \u003c 3; c++) hsv(P.hue + 0.15 + c * 0.36, 0.88, 1, c3, c * 3);\n    for (let i = 0; i \u003c 64; i++) {\n      const r = (i / 63) * 2, j = min(1, floor(r)), f = r - j, o = i * 3;\n      for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = c3[j * 3 + ch] * (1 - f) + c3[j * 3 + 3 + ch] * f;\n      const mx = max(lut[o], lut[o + 1], lut[o + 2]), sat = 1 - min(lut[o], lut[o + 1], lut[o + 2]) / mx;\n      if (sat \u003c 0.7) for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = mx - ((mx - lut[o + ch]) * 0.7) / max(sat, 1e-3);\n    }\n    P.lutHue = P.hue;\n  }\n  const dv = [0, 0, 0, 0], dl = [0, 0, 0, 0], rank = [0, 0, 0, 0];\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) {\n    // Row y holds n points, n growing down the panel. New points go into the\n    // sorted list one at a time, so a frame sorts nothing twice.\n    const want = 1 + floor((y * nmax) / H);\n    let tick = -1;\n    while (n \u003c want) {\n      const p = n * a - floor(n * a);\n      let lo = 0, hi = n;\n      while (lo \u003c hi) {\n        const m = (lo + hi) >> 1;\n        if (pos[m] \u003c p) lo = m + 1;\n        else hi = m;\n      }\n      for (let j = n; j > lo; j--) (pos[j] = pos[j - 1]), (idx[j] = idx[j - 1]);\n      pos[lo] = p;\n      idx[lo] = n;\n      tick = floor(p * W);\n      n++;\n    }\n    pos[n] = 1;\n    idx[n] = 0;\n    // The gap from point i to point j is frac((j - i) a) long, so the index\n    // difference names the length, and the theorem says there are at most\n    // three. The newest point always lands in a longest gap and cuts it into\n    // one gap of each of the two shorter lengths already on the circle, which\n    // is why the longest is the sum of the other two. When the last longest\n    // gap is cut, the middle length is the longest and the cutting goes on.\n    let nc = 0;\n    for (let i = 0; i \u003c n; i++) {\n      const dd = idx[i + 1] - idx[i];\n      let c = 0;\n      while (c \u003c nc && dv[c] !== dd) c++;\n      if (c === nc && nc \u003c 4) (dv[nc] = dd), (dl[nc] = pos[i + 1] - pos[i]), nc++;\n    }\n    // Rank: how many lengths are longer, counting a length within 15% as\n    // half. Near a fraction p/q the shortest shrinks towards nothing and the\n    // other two meet, so their gaps go one colour as the three become two.\n    for (let c = 0; c \u003c nc; c++) {\n      let r = 0;\n      for (let e = 0; e \u003c nc; e++) if (e !== c) r += cl(0.5 + (dl[e] - dl[c]) / (0.3 * max(dl[e], dl[c])), 0, 1);\n      rank[c] = min(2, r);\n    }\n    // Points closer than a third of an LED count as one. A lone one between\n    // two gaps wider than an LED draws a dark line, darker the wider they are.\n    sep.fill(0);\n    let first = 0;\n    while (first \u003c n - 1 && (pos[first + 1] - pos[first]) * W \u003c 0.34) first++;\n    for (let i = 0, prev = -1; i \u003c n; i++) {\n      const gr = (pos[i + 1] - pos[i]) * W;\n      if (gr \u003c 0.34 && i \u003c n - 1) continue;\n      const gl = prev \u003c 0 ? (pos[first] + 1 - pos[n - 1]) * W : (pos[i] - pos[prev]) * W;\n      const x = floor(pos[i] * W);\n      sep[x] = max(sep[x], cl((min(gl, gr) - 1.1) / 2.4, 0, 1));\n      prev = i;\n    }\n    // Four samples to an LED. Brightness follows the gap's length times n,\n    // which runs about 0.4 to 1.9 at 1/phi: a gap brightens down the panel\n    // until a point cuts it.\n    row.fill(0);\n    let g = 0;\n    for (let x = 0; x \u003c W; x++)\n      for (let s = 0; s \u003c SS; s++) {\n        const u = (x + (s + 0.5) / SS) / W;\n        while (pos[g + 1] \u003c= u) g++;\n        const dd = idx[g + 1] - idx[g];\n        let c = 0;\n        while (c \u003c nc - 1 && dv[c] !== dd) c++;\n        const v = 0.6 + 0.4 * cl((n * (pos[g + 1] - pos[g]) - 0.4) / 1.3, 0, 1), q = floor(rank[c] * 31.5) * 3;\n        row[x * 3] += lut[q] * v;\n        row[x * 3 + 1] += lut[q + 1] * v;\n        row[x * 3 + 2] += lut[q + 2] * v;\n      }\n    // The newest point, white on the row where it arrives: they fall on a\n    // lattice, and each heads the dark line its point draws below.\n    for (let x = 0; x \u003c W; x++) {\n      const f = (255 / SS) * (1 - 0.85 * sep[x]);\n      if (x === tick) display.setPixel(x, y, 255, 255, 255);\n      else display.setPixel(x, y, row[x * 3] * f, row[x * 3 + 1] * f, row[x * 3 + 2] * f);\n    }\n  }\n}\n","layer":{"id":"layer-three-gaps","type":"code","name":"three-gaps","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Three Gaps\n// Family:  number\n// Idea:    Each row is the circle unrolled across the panel with one more of the points 0, a, 2a, 3a, ... (mod 1) on it than the row above, every stretch coloured by which of the at most three gap lengths it lies in, while a drifts between a golden-ratio number and the fractions beside it and the gaps split, merge and collapse into repeating columns.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: three-gap theorem (conjectured by Hugo Steinhaus, proved by Vera T. Sós, 1957), pattern round 30\n// Round:   30\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1\n//\n// Knob 1: Hue. Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair.\n// Knob 2: Speed. How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s.\n// Knob 3: Alpha. Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns.\n// Knob 4: Points. How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples.\n// Buttons: K1 tap sends a straight to the stop at the end of the leg it is on.\n\nconst W = 64, H = 128, SS = 4, NMAX = 160, Q = 21;\nconst { min, max, floor, abs } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (u) => u * u * (3 - 2 * u);\nconst GOLD = (Math.sqrt(5) - 1) / 2, BRONZE = (Math.sqrt(13) - 3) / 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c];\n}\n\n// The two fractions with denominator at most 21 that hold a0 between them,\n// found by walking down the Stern-Brocot tree: 8/13 and 13/21 for 1/phi.\nfunction bracket(a0) {\n  let a = 0, b = 1, c = 1, d = 1;\n  for (;;) {\n    const p = a + c, q = b + d;\n    if (q > Q) break;\n    if (a0 \u003c p / q) (c = p), (d = q);\n    else (a = p), (b = q);\n  }\n  return [a / b, c / d];\n}\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, k3: -1, a0: GOLD, ends: [GOLD, GOLD], u: 0, nmax: 36, alpha: GOLD,\n    pos: new Float64Array(NMAX + 1), idx: new Int32Array(NMAX + 1), sep: new Float32Array(W),\n    row: new Float32Array(W * 3), lut: new Float32Array(3 * 64), lutHue: NaN,\n  };\n}\n\nconst stop = (P, i) => (i & 1 ? P.ends[i >> 1] : P.a0);\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = cl(k[1], 0.2, 3);\n  P.nmax = floor(30 + 100 * cl(k[3], 0, 1));\n  const k3 = cl(k[2], 0, 1);\n  if (k3 !== P.k3) {\n    P.k3 = k3;\n    P.a0 = GOLD + (BRONZE - GOLD) * k3;\n    // The nearer fraction first. On a fraction exactly, points would land on\n    // each other and floating point would shuffle their order; 3e-7 off it,\n    // on a0's side, they stay in order and the picture is the same.\n    const [lo, hi] = bracket(P.a0);\n    P.ends = P.a0 - lo \u003c hi - P.a0 ? [lo + 3e-7, hi - 3e-7] : [hi - 3e-7, lo + 3e-7];\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.u = floor(P.u) + 1;\n  // a goes a0, first fraction, a0, second fraction, a0, easing in and out of\n  // each stop; a longer leg takes longer, so the bottom row never runs away.\n  const s = floor(P.u) & 3, from = stop(P, s), to = stop(P, (s + 1) & 3);\n  P.u += (d * P.speed * 0.15) / (0.4 + abs(to - from) / 0.004);\n  const s2 = floor(P.u) & 3, A = stop(P, s2), B = stop(P, (s2 + 1) & 3);\n  P.alpha = A + (B - A) * ease(P.u - floor(P.u));\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { pos, idx, sep, row, lut } = P, a = P.alpha, nmax = P.nmax;\n  if (P.lutHue !== P.hue) {\n    // Colour by the rank of the length: yellow the longest, cyan the middle,\n    // magenta the shortest, and mixes for ranks in between. Mixed as light,\n    // not round the wheel, which would put a dark blue between cyan and\n    // magenta, then brought back to saturation 0.7 so a mix is not grey.\n    const c3 = new Float32Array(9);\n    for (let c = 0; c \u003c 3; c++) hsv(P.hue + 0.15 + c * 0.36, 0.88, 1, c3, c * 3);\n    for (let i = 0; i \u003c 64; i++) {\n      const r = (i / 63) * 2, j = min(1, floor(r)), f = r - j, o = i * 3;\n      for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = c3[j * 3 + ch] * (1 - f) + c3[j * 3 + 3 + ch] * f;\n      const mx = max(lut[o], lut[o + 1], lut[o + 2]), sat = 1 - min(lut[o], lut[o + 1], lut[o + 2]) / mx;\n      if (sat \u003c 0.7) for (let ch = 0; ch \u003c 3; ch++) lut[o + ch] = mx - ((mx - lut[o + ch]) * 0.7) / max(sat, 1e-3);\n    }\n    P.lutHue = P.hue;\n  }\n  const dv = [0, 0, 0, 0], dl = [0, 0, 0, 0], rank = [0, 0, 0, 0];\n  let n = 0;\n  for (let y = 0; y \u003c H; y++) {\n    // Row y holds n points, n growing down the panel. New points go into the\n    // sorted list one at a time, so a frame sorts nothing twice.\n    const want = 1 + floor((y * nmax) / H);\n    let tick = -1;\n    while (n \u003c want) {\n      const p = n * a - floor(n * a);\n      let lo = 0, hi = n;\n      while (lo \u003c hi) {\n        const m = (lo + hi) >> 1;\n        if (pos[m] \u003c p) lo = m + 1;\n        else hi = m;\n      }\n      for (let j = n; j > lo; j--) (pos[j] = pos[j - 1]), (idx[j] = idx[j - 1]);\n      pos[lo] = p;\n      idx[lo] = n;\n      tick = floor(p * W);\n      n++;\n    }\n    pos[n] = 1;\n    idx[n] = 0;\n    // The gap from point i to point j is frac((j - i) a) long, so the index\n    // difference names the length, and the theorem says there are at most\n    // three. The newest point always lands in a longest gap and cuts it into\n    // one gap of each of the two shorter lengths already on the circle, which\n    // is why the longest is the sum of the other two. When the last longest\n    // gap is cut, the middle length is the longest and the cutting goes on.\n    let nc = 0;\n    for (let i = 0; i \u003c n; i++) {\n      const dd = idx[i + 1] - idx[i];\n      let c = 0;\n      while (c \u003c nc && dv[c] !== dd) c++;\n      if (c === nc && nc \u003c 4) (dv[nc] = dd), (dl[nc] = pos[i + 1] - pos[i]), nc++;\n    }\n    // Rank: how many lengths are longer, counting a length within 15% as\n    // half. Near a fraction p/q the shortest shrinks towards nothing and the\n    // other two meet, so their gaps go one colour as the three become two.\n    for (let c = 0; c \u003c nc; c++) {\n      let r = 0;\n      for (let e = 0; e \u003c nc; e++) if (e !== c) r += cl(0.5 + (dl[e] - dl[c]) / (0.3 * max(dl[e], dl[c])), 0, 1);\n      rank[c] = min(2, r);\n    }\n    // Points closer than a third of an LED count as one. A lone one between\n    // two gaps wider than an LED draws a dark line, darker the wider they are.\n    sep.fill(0);\n    let first = 0;\n    while (first \u003c n - 1 && (pos[first + 1] - pos[first]) * W \u003c 0.34) first++;\n    for (let i = 0, prev = -1; i \u003c n; i++) {\n      const gr = (pos[i + 1] - pos[i]) * W;\n      if (gr \u003c 0.34 && i \u003c n - 1) continue;\n      const gl = prev \u003c 0 ? (pos[first] + 1 - pos[n - 1]) * W : (pos[i] - pos[prev]) * W;\n      const x = floor(pos[i] * W);\n      sep[x] = max(sep[x], cl((min(gl, gr) - 1.1) / 2.4, 0, 1));\n      prev = i;\n    }\n    // Four samples to an LED. Brightness follows the gap's length times n,\n    // which runs about 0.4 to 1.9 at 1/phi: a gap brightens down the panel\n    // until a point cuts it.\n    row.fill(0);\n    let g = 0;\n    for (let x = 0; x \u003c W; x++)\n      for (let s = 0; s \u003c SS; s++) {\n        const u = (x + (s + 0.5) / SS) / W;\n        while (pos[g + 1] \u003c= u) g++;\n        const dd = idx[g + 1] - idx[g];\n        let c = 0;\n        while (c \u003c nc - 1 && dv[c] !== dd) c++;\n        const v = 0.6 + 0.4 * cl((n * (pos[g + 1] - pos[g]) - 0.4) / 1.3, 0, 1), q = floor(rank[c] * 31.5) * 3;\n        row[x * 3] += lut[q] * v;\n        row[x * 3 + 1] += lut[q + 1] * v;\n        row[x * 3 + 2] += lut[q + 2] * v;\n      }\n    // The newest point, white on the row where it arrives: they fall on a\n    // lattice, and each heads the dark line its point draws below.\n    for (let x = 0; x \u003c W; x++) {\n      const f = (255 / SS) * (1 - 0.85 * sep[x]);\n      if (x === tick) display.setPixel(x, y, 255, 255, 255);\n      else display.setPixel(x, y, row[x * 3] * f, row[x * 3 + 1] * f, row[x * 3 + 2] * f);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Alpha=0..1, Points=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three colours round the wheel together. At 0 the longest gaps are yellow, the middle ones cyan and the shortest magenta; two lengths within 15% of each other share the colour between theirs, green at 0 for the long pair."},{"name":"Speed","min":0.2,"max":3,"about":"How fast a travels. At 2 it goes from 0.618 to 13/21 in 2.2 s, back, out to 8/13 in 3.5 s and back again, 11.4 s round; at 0.2 the round takes 114 s."},{"name":"Alpha","min":0,"max":1,"about":"Where a sets out from: 1/phi = 0.618 at 0, sliding down to the bronze ratio (sqrt 13 - 3)/2 = 0.303 at 1. From there a visits the nearest fraction with denominator up to 21 on each side, 13/21 and 8/13 at 0, 3/10 and 4/13 at 1. At 0.25 a starts at 0.539, just off 7/13, and the rows past 13 lean into a V of thirteen columns."},{"name":"Points","min":0,"max":1,"about":"How many points the bottom row holds: 30 at 0, 36 at the start, 130 at 1. The rows share them out evenly, 3 or 4 rows to each count at the start. Past about 64 points a gap is narrower than an LED and each LED blends four samples."}],"start":[0,2,0,0.06],"measures":{"motion":0.1477,"detail":0.1059,"edges":0.725,"complexity":0.2583,"coverage":0.9968,"colour":0.6429,"drift":0.149},"knobResponse":[0.4559,0.1669,0.3074,0.2544]},{"slug":"toner-pad","title":"Toner Pad","family":"cosmetic","round":35,"note":"섬유 400가닥이 아무렇게나 엇갈린 흰 솜 패드에 장밋빛 토너가 3.2초마다 한 방울씩 떨어져요. 젖는 앞은 잘 빨아올리는 섬유를 따라 손가락처럼 먼저 뻗고, 젖은 곳은 반투명해져 뒤의 빛을 토너 색으로 받으며 그 안의 섬유가 어둡게 드러나요. 패치는 가장자리부터 말라 흰 솜으로 돌아가요. K3 은 한 방울이 적시는 넓이를 1800 LED 에서 5400 LED 로 늘리고, K1 을 누르면 아직 젖은 곳을 피해 한 방울이 바로 떨어져요.","idea":"A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.","buttons":"K1 tap lets a drop fall at once, away from the patches still wet.","code":"// ===== Patternflow pattern =====\n// Title:   Toner Pad\n// Family:  cosmetic\n// Idea:    A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cotton pad soaking up toner\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1\n//\n// Knob 1: Hue. The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive.\n// Knob 2: Speed. How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower.\n// Knob 3: Toner. How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65.\n// Knob 4: Fibre. How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges.\n// Buttons: K1 tap lets a drop fall at once, away from the patches still wet.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n// Drops on the pad at once: a fifth, from quick taps, takes the place of the oldest.\nconst MAXD = 4;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    F: F(N), F2: F(N), tmp: F(N), CE: F(N), CS: F(N), CSE: F(N), CSW: F(N), J: F(N),\n    drops: [], pool: [F(N), F(N), F(N), F(N), F(N)],\n    // The heap's keys are 32-bit like the reach they are checked against, so a\n    // key is never read as stale because it was rounded on the way in.\n    hk: F(8 * N + 16), hv: new Int32Array(8 * N + 16),\n    T: 0, next: 0, hue: 0, speed: 2, toner: 0, fibre: 0.06, webKey: NaN, started: false, col: F(12), key: NaN,\n  };\n}\n\n// The web: fibres laid at random, each a slightly wavy strand, drawn soft\n// into F (how much fibre each LED sees) and marked on the links between\n// neighbouring LEDs it runs through, which is where the toner wicks fastest.\nfunction web(S) {\n  const g = S.fibre, Fd = S.F, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW;\n  Fd.fill(0);\n  CE.fill(0);\n  CS.fill(0);\n  CSE.fill(0);\n  CSW.fill(0);\n  for (let i = 0; i \u003c N; i++) S.J[i] = 0.9 + 0.2 * rnd();\n  const count = floor(420 - 300 * g), wid = 0.6 + 1.4 * g;\n  for (let f = 0; f \u003c count; f++) {\n    let x = -20 + rnd() * (W + 40), y = -20 + rnd() * (H + 40), th = rnd() * PI * 2, bend = 0;\n    const len = 40 + 50 * rnd(), b = 0.45 + 0.55 * rnd();\n    // Most strands carry the toner a little faster than the gaps; a few\n    // carry it about six times as fast, and the front runs out along them.\n    const u = rnd(), wick = 0.12 + 1.1 * u * u * u * u;\n    let px = -1, py = -1;\n    for (let t = 0; t \u003c len; t += 0.6) {\n      bend += (rnd() - 0.5) * 0.05;\n      bend *= 0.95;\n      th += bend * 0.5;\n      x += 0.6 * cos(th);\n      y += 0.6 * sin(th);\n      if (x \u003c 0 || y \u003c 0 || x >= W - 1 || y >= H - 1) {\n        px = -1;\n        continue;\n      }\n      // Soft splat of the strand.\n      const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix, w = 0.32 * b * wid;\n      Fd[o] += w * (1 - fx) * (1 - fy);\n      Fd[o + 1] += w * fx * (1 - fy);\n      Fd[o + W] += w * (1 - fx) * fy;\n      Fd[o + W + 1] += w * fx * fy;\n      // The link it crossed.\n      const cx = floor(x + 0.5), cy = floor(y + 0.5);\n      if (px >= 0 && (cx !== px || cy !== py)) {\n        const dx = cx - px, dy = cy - py, a = Math.min(cy, py) * W, k = wick;\n        if (abs(dx) \u003c= 1 && abs(dy) \u003c= 1) {\n          if (dy === 0) CE[cy * W + min(cx, px)] += k;\n          else if (dx === 0) CS[a + cx] += k;\n          else if (dx === dy) CSE[a + min(cx, px)] += k;\n          else CSW[a + max(cx, px)] += k;\n        }\n      }\n      px = cx;\n      py = cy;\n    }\n  }\n  for (let i = 0; i \u003c N; i++) Fd[i] = 1 - exp(-Fd[i] * 1.6);\n  // Deeper in the pad the fibres are out of focus: a second web, laid the\n  // same way and blurred over five LEDs, gives the white its soft depth.\n  const F2 = S.F2, tmp = S.tmp;\n  F2.fill(0);\n  for (let f = 0; f \u003c 260; f++) {\n    let x = rnd() * W, y = rnd() * H, th = rnd() * PI * 2;\n    for (let t = 0; t \u003c 50; t += 1) {\n      th += (rnd() - 0.5) * 0.08;\n      x += cos(th);\n      y += sin(th);\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) F2[floor(y) * W + floor(x)] += 0.5;\n    }\n  }\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += F2[y * W + cl(x + k, 0, W - 1)];\n        tmp[i] = a / 5;\n      }\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += tmp[cl(y + k, 0, H - 1) * W + x];\n        F2[i] = a / 5;\n      }\n  }\n  for (let i = 0; i \u003c N; i++) F2[i] = 1 - exp(-F2[i] * 3);\n}\n\n// How far the toner has to wick to reach each LED from a drop at (x0, y0):\n// the cheapest path, where crossing a link costs its length divided by how\n// well fibres carry along it. A front at a given reach has run furthest\n// along the fibres, so it is fingered and follows them.\nfunction reach(S, d, x0, y0) {\n  const hk = S.hk, hv = S.hv, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW, J = S.J, LIM = 45;\n  d.fill(1e9);\n  let n = 0;\n  const push = (k, v) => {\n    let i = n++;\n    while (i > 0) {\n      const p = (i - 1) >> 1;\n      if (hk[p] \u003c= k) break;\n      hk[i] = hk[p];\n      hv[i] = hv[p];\n      i = p;\n    }\n    hk[i] = k;\n    hv[i] = v;\n  };\n  for (let y = max(0, floor(y0 - 3)); y \u003c= min(H - 1, floor(y0 + 3)); y++)\n    for (let x = max(0, floor(x0 - 3)); x \u003c= min(W - 1, floor(x0 + 3)); x++) {\n      const r = Math.hypot(x + 0.5 - x0, y + 0.5 - y0);\n      if (r \u003c 3) {\n        d[y * W + x] = r * 0.4;\n        push(r * 0.4, y * W + x);\n      }\n    }\n  const speed = (c) => 1 / (1 + 4.5 * c);\n  while (n > 0) {\n    const k = hk[0], v = hv[0];\n    // Pop.\n    n--;\n    const lk = hk[n], lv = hv[n];\n    let i = 0;\n    while (true) {\n      let c = 2 * i + 1;\n      if (c >= n) break;\n      if (c + 1 \u003c n && hk[c + 1] \u003c hk[c]) c++;\n      if (hk[c] >= lk) break;\n      hk[i] = hk[c];\n      hv[i] = hv[c];\n      i = c;\n    }\n    hk[i] = lk;\n    hv[i] = lv;\n    if (k > d[v] || k > LIM) continue;\n    const x = v % W, y = (v - x) / W, j = J[v];\n    const rel = (u, cost) => {\n      const nk = k + cost * j;\n      if (nk \u003c d[u]) {\n        d[u] = nk;\n        push(nk, u);\n      }\n    };\n    if (x \u003c W - 1) rel(v + 1, speed(CE[v]));\n    if (x > 0) rel(v - 1, speed(CE[v - 1]));\n    if (y \u003c H - 1) {\n      rel(v + W, speed(CS[v]));\n      if (x \u003c W - 1) rel(v + W + 1, 1.414 * speed(CSE[v]));\n      if (x > 0) rel(v + W - 1, 1.414 * speed(CSW[v]));\n    }\n    if (y > 0) {\n      rel(v - W, speed(CS[v - W]));\n      if (x > 0) rel(v - W - 1, 1.414 * speed(CSE[v - W - 1]));\n      if (x \u003c W - 1) rel(v - W + 1, 1.414 * speed(CSW[v - W + 1]));\n    }\n  }\n  // Paths on a grid of LEDs come out in stair steps; two passes of a 3x3\n  // blur round the front off while keeping its fingers.\n  const tmp = S.tmp;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) tmp[i] = (xx > 0 ? d[i - 1] : d[i]) + d[i] + (xx \u003c W - 1 ? d[i + 1] : d[i]);\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) d[i] = ((yy > 0 ? tmp[i - W] : tmp[i]) + tmp[i] + (yy \u003c H - 1 ? tmp[i + W] : tmp[i])) / 9;\n  }\n}\n\nfunction drop(S, x, y, age) {\n  if (S.drops.length >= MAXD) S.pool.push(S.drops.shift().d);\n  const d = S.pool.pop();\n  reach(S, d, x, y);\n  S.drops.push({ d, x, y, t: age, R: spread(d, S.toner) });\n}\n\n// How far a drop's front runs: the reach at which the wet patch covers the\n// area its toner can fill, 1800 LEDs at Toner 0 and 5400 at 1, whatever the\n// web. Found by halving.\nfunction spread(d, toner) {\n  const A = 1800 + 3600 * toner;\n  let lo = 0, hi = 40;\n  for (let it = 0; it \u003c 18; it++) {\n    const R = (lo + hi) / 2;\n    let n = 0;\n    for (let i = 0; i \u003c N; i++) if (d[i] \u003c R) n++;\n    if (n \u003c A) lo = R;\n    else hi = R;\n  }\n  return (lo + hi) / 2;\n}\n\n// Somewhere new: of six tries, the one furthest from every patch still wet.\nfunction spot(S) {\n  let bx = 32, by = 64, best = -1;\n  for (let k = 0; k \u003c 6; k++) {\n    const x = 10 + rnd() * 44, y = 12 + rnd() * 104;\n    let dd = 1e9;\n    for (const e of S.drops) dd = min(dd, Math.hypot(x - e.x, (y - e.y) * 0.7));\n    if (dd > best) (best = dd), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// A drop's front: running out fast and slowing as the toner spreads thin,\n// holding, then drying back from the far edges towards where it fell.\nconst TS = 0.8, THOLD = 3.2, TDRY = 3.6;\nfunction front(e) {\n  const t = e.t;\n  if (t \u003c 0) return -9;\n  if (t \u003c THOLD) return e.R * sqrt(1 - exp(-t / TS));\n  const full = e.R * sqrt(1 - exp(-THOLD / TS));\n  return full * (1 - (t - THOLD) / TDRY);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.toner = cl(kv[2] || 0, 0, 1);\n  S.fibre = cl(kv[3], 0, 1);\n  const wk = Math.round(S.fibre * 25);\n  if (wk !== S.webKey) {\n    S.webKey = wk;\n    web(S);\n    for (const e of S.drops) {\n      reach(S, e.d, e.x, e.y);\n      e.R = spread(e.d, S.toner);\n    }\n  }\n  if (!S.started) {\n    S.started = true;\n    // Open on a patch drying in the lower half and a fresh drop about to land higher up.\n    drop(S, 22 + rnd() * 20, 88 + rnd() * 20, 4.2);\n    drop(S, 22 + rnd() * 20, 26 + rnd() * 24, -0.2);\n    S.next = 3.2;\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  for (const e of S.drops) e.t += st;\n  S.drops = S.drops.filter((e) => {\n    if (e.t \u003c THOLD + TDRY) return true;\n    S.pool.push(e.d);\n    return false;\n  });\n  S.next -= st;\n  if ((input.btnPressed && input.btnPressed[0]) || S.next \u003c= 0) {\n    const [x, y] = spot(S);\n    drop(S, x, y, 0);\n    S.next = 3.2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, Fd = S.F, F2 = S.F2, T = S.T;\n  const h = S.hue + 0.95, key = h;\n  if (S.key !== key) {\n    const hf = h - floor(h), wm = sm((hf + 0.03) / 0.06) * (1 - sm((hf - 0.24) / 0.06));\n    hsv(h, 0.03, 1, col, 0);\n    hsv(h, 0.55 - 0.2 * wm, 1, col, 3);\n    col[6] = wm;\n    S.key = key;\n  }\n  const wm = col[6];\n  const fr = S.drops.map(front);\n  // A drying patch also pales a little as it shrinks.\n  const mo = S.drops.map((e) => (e.t \u003c THOLD ? 1 : 1 - (0.4 * (e.t - THOLD)) / TDRY));\n  // A soft light behind the pad drifts slowly; wet cotton lets it through.\n  const gx = 32 + 20 * sin(T * 0.43), gy = 64 + 44 * sin(T * 0.29 + 1);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let wet = 0, deep = 0;\n      for (let k = 0; k \u003c S.drops.length; k++) {\n        const R = fr[k];\n        if (R \u003c= 0) continue;\n        const dd = S.drops[k].d[i], w = sm((R - dd) / 1.6 + 0.5) * mo[k];\n        if (w > wet) wet = w;\n        const dp = w * cl(1 - dd / (R + 2), 0, 1);\n        if (dp > deep) deep = dp;\n      }\n      const f = Fd[i], f2 = F2[i];\n      const gdx = x - gx, gdy = y - gy, glow = exp(-(gdx * gdx + gdy * gdy) / 900);\n      // Dry: matte white, the fibres a little brighter than the gaps.\n      const ld = 0.8 + 0.1 * f2 + 0.12 * f + 0.06 * glow;\n      // Wet: translucent and lit from behind in the toner's tint, deeper\n      // towards where the drop fell, and the fibres dark against it. A dark\n      // fibre in orange or gold would be a brown line, so the fibres go\n      // towards a cool grey, there more and only half as dark.\n      const lw = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2) * (1 - (0.58 - 0.3 * wm) * f), ti = 0.65 + 0.35 * deep;\n      let wr = (col[0] + (col[3] - col[0]) * ti) * lw, wg = (col[1] + (col[4] - col[1]) * ti) * lw, wb = (col[2] + (col[5] - col[2]) * ti) * lw;\n      const l0 = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2), ds = f * (0.25 + 0.55 * wm);\n      wr += (0.4 * l0 - wr) * ds;\n      wg += (0.43 * l0 - wg) * ds;\n      wb += (0.5 * l0 - wb) * ds;\n      let r = col[0] * ld + (wr - col[0] * ld) * wet, g = col[1] * ld + (wg - col[1] * ld) * wet, b = col[2] * ld + (wb - col[2] * ld) * wet;\n      // A drop that has just landed sits as a glossy bead for a moment before\n      // it soaks in: deeper tint under it and a highlight on its upper left.\n      for (const e of S.drops) {\n        if (e.t \u003c 0 || e.t > 0.6) continue;\n        const u = e.t / 0.6, rb = 3.2 * (1 - u * u), bx = x + 0.5 - e.x, by = y + 0.5 - e.y, q = (bx * bx + by * by) / (rb * rb + 0.01);\n        if (q >= 1.6) continue;\n        const cov = sm((1.3 - q) / 0.5), hx = bx / rb + 0.4, hy = by / rb + 0.4, hl = exp(-(hx * hx + hy * hy) * 5) * 0.6 * cov;\n        r = r * (1 - 0.25 * cov) + hl;\n        g = g * (1 - 0.25 * cov) + hl;\n        b = b * (1 - 0.25 * cov) + hl;\n      }\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","layer":{"id":"layer-toner-pad","type":"code","name":"toner-pad","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Toner Pad\n// Family:  cosmetic\n// Idea:    A close-up of a cotton pad, a white nonwoven web of fine soft fibres crossing at random, where drops of tinted toner land one after another and wick outward, the wet front running ahead along the fibres in fingers while the soaked cotton turns translucent and glows with the toner's tint from the light behind, its fibres darker against it, until each patch dries back from its edges to white.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 35, after a cotton pad soaking up toner\n// Round:   35\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1\n//\n// Knob 1: Hue. The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive.\n// Knob 2: Speed. How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower.\n// Knob 3: Toner. How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65.\n// Knob 4: Fibre. How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges.\n// Buttons: K1 tap lets a drop fall at once, away from the patches still wet.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, sqrt, sin, cos, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\n// Drops on the pad at once: a fifth, from quick taps, takes the place of the oldest.\nconst MAXD = 4;\n\nfunction hsv(h, s, v, out, o) {\n  const f = (n) => {\n    const k = (n + (h - floor(h)) * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  out[o] = f(5);\n  out[o + 1] = f(3);\n  out[o + 2] = f(1);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    F: F(N), F2: F(N), tmp: F(N), CE: F(N), CS: F(N), CSE: F(N), CSW: F(N), J: F(N),\n    drops: [], pool: [F(N), F(N), F(N), F(N), F(N)],\n    // The heap's keys are 32-bit like the reach they are checked against, so a\n    // key is never read as stale because it was rounded on the way in.\n    hk: F(8 * N + 16), hv: new Int32Array(8 * N + 16),\n    T: 0, next: 0, hue: 0, speed: 2, toner: 0, fibre: 0.06, webKey: NaN, started: false, col: F(12), key: NaN,\n  };\n}\n\n// The web: fibres laid at random, each a slightly wavy strand, drawn soft\n// into F (how much fibre each LED sees) and marked on the links between\n// neighbouring LEDs it runs through, which is where the toner wicks fastest.\nfunction web(S) {\n  const g = S.fibre, Fd = S.F, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW;\n  Fd.fill(0);\n  CE.fill(0);\n  CS.fill(0);\n  CSE.fill(0);\n  CSW.fill(0);\n  for (let i = 0; i \u003c N; i++) S.J[i] = 0.9 + 0.2 * rnd();\n  const count = floor(420 - 300 * g), wid = 0.6 + 1.4 * g;\n  for (let f = 0; f \u003c count; f++) {\n    let x = -20 + rnd() * (W + 40), y = -20 + rnd() * (H + 40), th = rnd() * PI * 2, bend = 0;\n    const len = 40 + 50 * rnd(), b = 0.45 + 0.55 * rnd();\n    // Most strands carry the toner a little faster than the gaps; a few\n    // carry it about six times as fast, and the front runs out along them.\n    const u = rnd(), wick = 0.12 + 1.1 * u * u * u * u;\n    let px = -1, py = -1;\n    for (let t = 0; t \u003c len; t += 0.6) {\n      bend += (rnd() - 0.5) * 0.05;\n      bend *= 0.95;\n      th += bend * 0.5;\n      x += 0.6 * cos(th);\n      y += 0.6 * sin(th);\n      if (x \u003c 0 || y \u003c 0 || x >= W - 1 || y >= H - 1) {\n        px = -1;\n        continue;\n      }\n      // Soft splat of the strand.\n      const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, o = iy * W + ix, w = 0.32 * b * wid;\n      Fd[o] += w * (1 - fx) * (1 - fy);\n      Fd[o + 1] += w * fx * (1 - fy);\n      Fd[o + W] += w * (1 - fx) * fy;\n      Fd[o + W + 1] += w * fx * fy;\n      // The link it crossed.\n      const cx = floor(x + 0.5), cy = floor(y + 0.5);\n      if (px >= 0 && (cx !== px || cy !== py)) {\n        const dx = cx - px, dy = cy - py, a = Math.min(cy, py) * W, k = wick;\n        if (abs(dx) \u003c= 1 && abs(dy) \u003c= 1) {\n          if (dy === 0) CE[cy * W + min(cx, px)] += k;\n          else if (dx === 0) CS[a + cx] += k;\n          else if (dx === dy) CSE[a + min(cx, px)] += k;\n          else CSW[a + max(cx, px)] += k;\n        }\n      }\n      px = cx;\n      py = cy;\n    }\n  }\n  for (let i = 0; i \u003c N; i++) Fd[i] = 1 - exp(-Fd[i] * 1.6);\n  // Deeper in the pad the fibres are out of focus: a second web, laid the\n  // same way and blurred over five LEDs, gives the white its soft depth.\n  const F2 = S.F2, tmp = S.tmp;\n  F2.fill(0);\n  for (let f = 0; f \u003c 260; f++) {\n    let x = rnd() * W, y = rnd() * H, th = rnd() * PI * 2;\n    for (let t = 0; t \u003c 50; t += 1) {\n      th += (rnd() - 0.5) * 0.08;\n      x += cos(th);\n      y += sin(th);\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) F2[floor(y) * W + floor(x)] += 0.5;\n    }\n  }\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += F2[y * W + cl(x + k, 0, W - 1)];\n        tmp[i] = a / 5;\n      }\n    for (let y = 0, i = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++, i++) {\n        let a = 0;\n        for (let k = -2; k \u003c= 2; k++) a += tmp[cl(y + k, 0, H - 1) * W + x];\n        F2[i] = a / 5;\n      }\n  }\n  for (let i = 0; i \u003c N; i++) F2[i] = 1 - exp(-F2[i] * 3);\n}\n\n// How far the toner has to wick to reach each LED from a drop at (x0, y0):\n// the cheapest path, where crossing a link costs its length divided by how\n// well fibres carry along it. A front at a given reach has run furthest\n// along the fibres, so it is fingered and follows them.\nfunction reach(S, d, x0, y0) {\n  const hk = S.hk, hv = S.hv, CE = S.CE, CS = S.CS, CSE = S.CSE, CSW = S.CSW, J = S.J, LIM = 45;\n  d.fill(1e9);\n  let n = 0;\n  const push = (k, v) => {\n    let i = n++;\n    while (i > 0) {\n      const p = (i - 1) >> 1;\n      if (hk[p] \u003c= k) break;\n      hk[i] = hk[p];\n      hv[i] = hv[p];\n      i = p;\n    }\n    hk[i] = k;\n    hv[i] = v;\n  };\n  for (let y = max(0, floor(y0 - 3)); y \u003c= min(H - 1, floor(y0 + 3)); y++)\n    for (let x = max(0, floor(x0 - 3)); x \u003c= min(W - 1, floor(x0 + 3)); x++) {\n      const r = Math.hypot(x + 0.5 - x0, y + 0.5 - y0);\n      if (r \u003c 3) {\n        d[y * W + x] = r * 0.4;\n        push(r * 0.4, y * W + x);\n      }\n    }\n  const speed = (c) => 1 / (1 + 4.5 * c);\n  while (n > 0) {\n    const k = hk[0], v = hv[0];\n    // Pop.\n    n--;\n    const lk = hk[n], lv = hv[n];\n    let i = 0;\n    while (true) {\n      let c = 2 * i + 1;\n      if (c >= n) break;\n      if (c + 1 \u003c n && hk[c + 1] \u003c hk[c]) c++;\n      if (hk[c] >= lk) break;\n      hk[i] = hk[c];\n      hv[i] = hv[c];\n      i = c;\n    }\n    hk[i] = lk;\n    hv[i] = lv;\n    if (k > d[v] || k > LIM) continue;\n    const x = v % W, y = (v - x) / W, j = J[v];\n    const rel = (u, cost) => {\n      const nk = k + cost * j;\n      if (nk \u003c d[u]) {\n        d[u] = nk;\n        push(nk, u);\n      }\n    };\n    if (x \u003c W - 1) rel(v + 1, speed(CE[v]));\n    if (x > 0) rel(v - 1, speed(CE[v - 1]));\n    if (y \u003c H - 1) {\n      rel(v + W, speed(CS[v]));\n      if (x \u003c W - 1) rel(v + W + 1, 1.414 * speed(CSE[v]));\n      if (x > 0) rel(v + W - 1, 1.414 * speed(CSW[v]));\n    }\n    if (y > 0) {\n      rel(v - W, speed(CS[v - W]));\n      if (x > 0) rel(v - W - 1, 1.414 * speed(CSE[v - W - 1]));\n      if (x \u003c W - 1) rel(v - W + 1, 1.414 * speed(CSW[v - W + 1]));\n    }\n  }\n  // Paths on a grid of LEDs come out in stair steps; two passes of a 3x3\n  // blur round the front off while keeping its fingers.\n  const tmp = S.tmp;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) tmp[i] = (xx > 0 ? d[i - 1] : d[i]) + d[i] + (xx \u003c W - 1 ? d[i + 1] : d[i]);\n    for (let yy = 0, i = 0; yy \u003c H; yy++)\n      for (let xx = 0; xx \u003c W; xx++, i++) d[i] = ((yy > 0 ? tmp[i - W] : tmp[i]) + tmp[i] + (yy \u003c H - 1 ? tmp[i + W] : tmp[i])) / 9;\n  }\n}\n\nfunction drop(S, x, y, age) {\n  if (S.drops.length >= MAXD) S.pool.push(S.drops.shift().d);\n  const d = S.pool.pop();\n  reach(S, d, x, y);\n  S.drops.push({ d, x, y, t: age, R: spread(d, S.toner) });\n}\n\n// How far a drop's front runs: the reach at which the wet patch covers the\n// area its toner can fill, 1800 LEDs at Toner 0 and 5400 at 1, whatever the\n// web. Found by halving.\nfunction spread(d, toner) {\n  const A = 1800 + 3600 * toner;\n  let lo = 0, hi = 40;\n  for (let it = 0; it \u003c 18; it++) {\n    const R = (lo + hi) / 2;\n    let n = 0;\n    for (let i = 0; i \u003c N; i++) if (d[i] \u003c R) n++;\n    if (n \u003c A) lo = R;\n    else hi = R;\n  }\n  return (lo + hi) / 2;\n}\n\n// Somewhere new: of six tries, the one furthest from every patch still wet.\nfunction spot(S) {\n  let bx = 32, by = 64, best = -1;\n  for (let k = 0; k \u003c 6; k++) {\n    const x = 10 + rnd() * 44, y = 12 + rnd() * 104;\n    let dd = 1e9;\n    for (const e of S.drops) dd = min(dd, Math.hypot(x - e.x, (y - e.y) * 0.7));\n    if (dd > best) (best = dd), (bx = x), (by = y);\n  }\n  return [bx, by];\n}\n\n// A drop's front: running out fast and slowing as the toner spreads thin,\n// holding, then drying back from the far edges towards where it fell.\nconst TS = 0.8, THOLD = 3.2, TDRY = 3.6;\nfunction front(e) {\n  const t = e.t;\n  if (t \u003c 0) return -9;\n  if (t \u003c THOLD) return e.R * sqrt(1 - exp(-t / TS));\n  const full = e.R * sqrt(1 - exp(-THOLD / TS));\n  return full * (1 - (t - THOLD) / TDRY);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  S.hue = kv[0] || 0;\n  S.speed = cl(kv[1], 0.2, 3);\n  S.toner = cl(kv[2] || 0, 0, 1);\n  S.fibre = cl(kv[3], 0, 1);\n  const wk = Math.round(S.fibre * 25);\n  if (wk !== S.webKey) {\n    S.webKey = wk;\n    web(S);\n    for (const e of S.drops) {\n      reach(S, e.d, e.x, e.y);\n      e.R = spread(e.d, S.toner);\n    }\n  }\n  if (!S.started) {\n    S.started = true;\n    // Open on a patch drying in the lower half and a fresh drop about to land higher up.\n    drop(S, 22 + rnd() * 20, 88 + rnd() * 20, 4.2);\n    drop(S, 22 + rnd() * 20, 26 + rnd() * 24, -0.2);\n    S.next = 3.2;\n  }\n  const st = (d * S.speed) / 2;\n  S.T += st;\n  for (const e of S.drops) e.t += st;\n  S.drops = S.drops.filter((e) => {\n    if (e.t \u003c THOLD + TDRY) return true;\n    S.pool.push(e.d);\n    return false;\n  });\n  S.next -= st;\n  if ((input.btnPressed && input.btnPressed[0]) || S.next \u003c= 0) {\n    const [x, y] = spot(S);\n    drop(S, x, y, 0);\n    S.next = 3.2;\n  }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const col = S.col, Fd = S.F, F2 = S.F2, T = S.T;\n  const h = S.hue + 0.95, key = h;\n  if (S.key !== key) {\n    const hf = h - floor(h), wm = sm((hf + 0.03) / 0.06) * (1 - sm((hf - 0.24) / 0.06));\n    hsv(h, 0.03, 1, col, 0);\n    hsv(h, 0.55 - 0.2 * wm, 1, col, 3);\n    col[6] = wm;\n    S.key = key;\n  }\n  const wm = col[6];\n  const fr = S.drops.map(front);\n  // A drying patch also pales a little as it shrinks.\n  const mo = S.drops.map((e) => (e.t \u003c THOLD ? 1 : 1 - (0.4 * (e.t - THOLD)) / TDRY));\n  // A soft light behind the pad drifts slowly; wet cotton lets it through.\n  const gx = 32 + 20 * sin(T * 0.43), gy = 64 + 44 * sin(T * 0.29 + 1);\n  for (let y = 0, i = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) {\n      let wet = 0, deep = 0;\n      for (let k = 0; k \u003c S.drops.length; k++) {\n        const R = fr[k];\n        if (R \u003c= 0) continue;\n        const dd = S.drops[k].d[i], w = sm((R - dd) / 1.6 + 0.5) * mo[k];\n        if (w > wet) wet = w;\n        const dp = w * cl(1 - dd / (R + 2), 0, 1);\n        if (dp > deep) deep = dp;\n      }\n      const f = Fd[i], f2 = F2[i];\n      const gdx = x - gx, gdy = y - gy, glow = exp(-(gdx * gdx + gdy * gdy) / 900);\n      // Dry: matte white, the fibres a little brighter than the gaps.\n      const ld = 0.8 + 0.1 * f2 + 0.12 * f + 0.06 * glow;\n      // Wet: translucent and lit from behind in the toner's tint, deeper\n      // towards where the drop fell, and the fibres dark against it. A dark\n      // fibre in orange or gold would be a brown line, so the fibres go\n      // towards a cool grey, there more and only half as dark.\n      const lw = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2) * (1 - (0.58 - 0.3 * wm) * f), ti = 0.65 + 0.35 * deep;\n      let wr = (col[0] + (col[3] - col[0]) * ti) * lw, wg = (col[1] + (col[4] - col[1]) * ti) * lw, wb = (col[2] + (col[5] - col[2]) * ti) * lw;\n      const l0 = (0.94 + 0.04 * wm + 0.22 * glow) * (1 - 0.1 * deep - 0.12 * f2), ds = f * (0.25 + 0.55 * wm);\n      wr += (0.4 * l0 - wr) * ds;\n      wg += (0.43 * l0 - wg) * ds;\n      wb += (0.5 * l0 - wb) * ds;\n      let r = col[0] * ld + (wr - col[0] * ld) * wet, g = col[1] * ld + (wg - col[1] * ld) * wet, b = col[2] * ld + (wb - col[2] * ld) * wet;\n      // A drop that has just landed sits as a glossy bead for a moment before\n      // it soaks in: deeper tint under it and a highlight on its upper left.\n      for (const e of S.drops) {\n        if (e.t \u003c 0 || e.t > 0.6) continue;\n        const u = e.t / 0.6, rb = 3.2 * (1 - u * u), bx = x + 0.5 - e.x, by = y + 0.5 - e.y, q = (bx * bx + by * by) / (rb * rb + 0.01);\n        if (q >= 1.6) continue;\n        const cov = sm((1.3 - q) / 0.5), hx = bx / rb + 0.4, hy = by / rb + 0.4, hl = exp(-(hx * hx + hy * hy) * 5) * 0.6 * cov;\n        r = r * (1 - 0.25 * cov) + hl;\n        g = g * (1 - 0.25 * cov) + hl;\n        b = b * (1 - 0.25 * cov) + hl;\n      }\n      display.setPixel(x, y, 255 * min(1, r), 255 * min(1, g), 255 * min(1, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Toner=0..1, Fibre=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The toner's tint, all the way round the wheel from rose at 0; the dry pad keeps only a breath of it. From coral round through orange and gold to lime the tint is laid paler and brighter, peach or butter, and the fibres in it go to a cool grey, because dark there reads brown and olive."},{"name":"Speed","min":0.2,"max":3,"about":"How fast it all runs: at 2 a drop lands every 3.2 s, its front is most of the way out in a second and a half, holds, and the patch dries back over 3.6 s; at 0.2 ten times slower."},{"name":"Toner","min":0,"max":1,"about":"How much toner each drop carries: at 0 it wets about 1800 LEDs, its fingers reaching about 33 LEDs from where it fell; at 1 three times as much, 5400 LEDs across the whole width, with fingers out to about 65."},{"name":"Fibre","min":0,"max":1,"about":"How coarse the pad is: at 0 a fine web of about 400 thin strands, at 1 an open one of 120 thick ones; the coarser the web, the fewer strands the front runs along and the straighter its edges."}],"start":[0,2,0,0.06],"measures":{"motion":0.0391,"detail":0.0359,"edges":0.0818,"complexity":1.8818,"coverage":1,"colour":0.1257,"drift":0.1404},"knobResponse":[0.0571,0.1234,0.1866,0.1574]},{"slug":"tower-crane","title":"Tower Crane","family":"construction","round":24,"note":"해 질 녘 올라가는 콘크리트 건물 옆에 노란 타워크레인이 서서, 마당의 벽판과 철근 다발, 거푸집, 콘크리트 버킷을 차례로 꼭대기 층에 올려요. 붐이 원근 속에서 돌며 짧아졌다 길어지고, 버킷이 바닥을 부으면 건물이 한 층 자라 새 층 창에 불이 들어와요. K1 을 끝까지 돌리면 밤이 되어 투광등이 켜져요.","idea":"A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.","buttons":"K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.","code":"// ===== Patternflow pattern =====\n// Title:   Tower Crane\n// Family:  construction\n// Idea:    A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower cranes that stand beside a rising concrete frame\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1\n//\n// Knob 1: Dusk. From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit.\n// Knob 2: Speed. At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower.\n// Knob 3: Floors. How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof.\n// Knob 4: Wind. Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable.\n// Buttons: K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street level, one storey, and the most floors that fit under the jib.\nconst [GY, FH, NMAX] = [114, 6, 13];\n// The frame, x 3 to 39: six columns two LEDs wide, five bays, the one by the crane the lift core.\nconst [BX0, BX1, CORE] = [3, 39, 4];\n// Mast centre, the jib's bottom chord at the root, jib and counter-jib lengths, top of the tower head.\nconst [MX, JY, JL, CJL, APEX] = [46, 15, 42, 15, 3];\n// The hook's highest row, the radius it picks at over the yard, the yard's load line.\nconst [HTOP, PICK_R, PICK_Y] = [21, 11, 120];\n// Wall panel, rebar, formwork, bucket: width, height, the column it is set down on.\nconst LW = [8, 11, 9, 5], LH = [5, 2, 4, 6], DROP = [35, 20, 12, 6];\n// Sky top, middle, horizon; sun; lit and shaded cloud; light on things. Afternoon to night.\nconst KEYS = [\n  [34, 72, 156, 128, 142, 186, 255, 190, 112, 255, 236, 170, 255, 236, 204, 150, 130, 160, 1, 0.9, 0.74],\n  [30, 50, 130, 168, 108, 140, 255, 140, 62, 255, 168, 78, 255, 170, 116, 104, 70, 108, 0.86, 0.64, 0.48],\n  [16, 20, 70, 64, 44, 96, 196, 86, 78, 226, 90, 52, 176, 92, 104, 46, 36, 66, 0.44, 0.38, 0.46],\n  [4, 6, 22, 10, 14, 40, 44, 34, 60, 0, 0, 0, 42, 36, 56, 16, 16, 30, 0.2, 0.21, 0.3],\n];\nconst FLC = [1, 0.94, 0.82];\nconst YEL = [255, 196, 22];\n// The floodlight tower in the yard and where it is aimed.\nconst [LX, LY] = [60.5, 84.5];\nconst [AX, AY] = (([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)])([-34, 31]);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F(N * 3), bg: F(N * 3), lm: F(N * 3), fl: F(N), row: F(H * 3), cloud: F(128 * 64), sky: new Int16Array(W),\n    t: 0, rt: 0, nk: -1, stage: 3, cage: 1, form: 1, item: -1, lightNew: -1, th: PI, r: 40, load: 3, ph: \"I\", sw: 0, swv: 0, vx: 0, ptx: 6,\n    on: new Uint8Array(NMAX), onT: F(NMAX).fill(9), nsw: 2.4, cx: 0, sp: [], weld: 0.4, welding: 0, wk: [], mix: 2, cars: [], ncar: 1.4,\n  });\n  // Clouds: a strip of soft noise that wraps every 128 columns.\n  for (let i = 0; i \u003c 128 * 64; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.05, y * 0.13) + 0.3 * vn(X * 0.13, y * 0.3 + 9) + 0.15 * vn(X * 0.4, y * 0.6 + 3);\n    P.cloud[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  // The city behind: blocks of four to nine columns.\n  for (let x = 0, w = 0, h = 0; x \u003c W; x++, w--) w > 0 || ((w = 4 + floor(rnd() * 6)), (h = 98 + floor(rnd() * 12))), (P.sky[x] = h);\n  for (let k = 0; k \u003c NMAX; k++) (P.on[k] = rnd() \u003c 0.35 ? 1 : 0), k \u003c 3 && P.wk.push({ x: 8 + k * 11 + rnd() * 4, tx: 8 + rnd() * 28, wait: rnd() * 2 });\n}\n\n// A move of the crane: slew angle, trolley radius and hook row, eased to where they go.\nfunction go(P, ph, dur, to) {\n  Object.assign(P, { ph, pt: 0, pd: dur, f0: [P.th, P.r, P.hy], f1: [to.th ?? P.th, to.r ?? P.r, to.hy ?? P.hy] });\n}\n\nconst deckY = (P) => GY - P.n * FH;\nconst tip = (P) => [MX + P.r * cos(P.th), JY + 1 - P.r * sin(P.th) * 0.1];\nconst bucketHy = (P) => deckY(P) - FH - 2 - LH[3] - 3;\n\nfunction finishFloor(P) {\n  if (P.n \u003c NMAX) P.n++;\n  else P.top = 1;\n  // The floor that has just been glazed lights up a moment later.\n  Object.assign(P, { stage: 0, cage: 0, form: 0, item: -1, pourX: -1, nsw: min(P.nsw, 0.7), lightNew: P.n - 3 });\n}\n\n// Down to the yard, rig, hoist, slew over, lower, set down (or pour), up again.\nfunction step(P) {\n  const T = P.ph, type = P.load;\n  if (T === \"A\") go(P, \"B\", 0.5, {});\n  else if (T === \"B\") (P.load = P.top && P.stage > 2 ? (P.stage = 0) : P.stage), go(P, \"C\", 2.8, { hy: HTOP });\n  else if (T === \"C\") go(P, \"D\", 2.4, { th: P.th + PI, r: MX - DROP[type] });\n  else if (T === \"D\") go(P, \"E\", 1.5, { hy: type === 3 ? bucketHy(P) : deckY(P) - 4 - LH[type] });\n  else if (T === \"E\") {\n    if (type === 3) (P.pourX = BX0), go(P, \"P\", 3, { r: MX - BX1 + 2 });\n    else {\n      // Set down: the panel goes into the core, rebar and formwork lie on the deck.\n      const x = round(tip(P)[0]);\n      if (type) (P.item = type), (P.ix = x), type \u003c 2 ? (P.cage = 0) : (P.form = 0);\n      for (const w of P.wk) w.tx = x + (rnd() - 0.5) * 10;\n      (P.stage = max(P.stage, type + 1)), (P.load = -1), go(P, \"F\", 0.9, {});\n    }\n  } else if (T === \"P\" || T === \"I\") finishFloor(P), go(P, \"F\", 0.4, {});\n  else if (T === \"F\") go(P, \"G\", 0.5, { hy: P.hy - 12 });\n  else (P.load = -1), go(P, \"A\", 1.5, { th: (floor(P.th / TAU + 1e-3) + 1) * TAU, r: PICK_R, hy: PICK_Y - LH[P.stage] - 3 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nf = round(cl(k[2], 9, 13));\n  if (nf !== P.nk) {\n    // A new count of floors: the hook keeps its place over the deck.\n    const sh = (nf - P.n) * FH;\n    P.nk = P.n = nf;\n    P.top = 0;\n    if (P.ph === \"I\") (P.hy = bucketHy(P)), (P.pourX = BX0), go(P, \"I\", 3, { r: MX - BX1 + 2 });\n    else if (\"EPFG\".includes(P.ph)) (P.hy -= sh), (P.f0[2] -= sh), (P.f1[2] -= sh);\n  }\n  P.w = cl(k[3], -1, 1);\n  const t = (P.t += d), k0 = cl(k[0], 0, 1);\n  P.rt += rd;\n  // The evening deepens a little and comes back once every minute and a half.\n  P.h = k0 + (1 - k0) * 0.05 * (1 - cos((TAU * t) / 90));\n  // K1 tap: everything for the floor is in place at once and the deck pours.\n  if (input.btnPressed && input.btnPressed[0] && P.pourX \u003c 0 && !P.top) Object.assign(P, { pourBtn: 1, pourX: BX0, stage: 3, cage: 1, form: 1 });\n  const lin = min(1, (P.pt += d) / P.pd), u = sm(0, 1, lin), pour = P.ph === \"P\" || P.ph === \"I\";\n  P.th = mix(P.f0[0], P.f1[0], u);\n  P.r = mix(P.f0[1], P.f1[1], pour ? lin : u);\n  P.hy = mix(P.f0[2], P.f1[2], u);\n  if (pour) P.pourX = max(P.pourX, tip(P)[0] + 2);\n  if (lin >= 1) step(P);\n  if (P.pourBtn && (P.pourX += 30 * d) > BX1) (P.pourBtn = 0), finishFloor(P);\n  // The load swings on its cable when the trolley speeds up or slows, and in the wind.\n  const [tx, ty] = tip(P), L = max(4, P.hy - ty);\n  if (d > 0) {\n    const vx = (tx - P.ptx) / d, ax = cl((vx - P.vx) / d, -30, 30), eq = P.w * (0.06 + 0.04 * sin(t * 1.7)) * (P.load >= 0 ? 1 : 1.6);\n    P.swv += (-(110 / L) * (P.sw - eq) - (0.5 * ax) / L - 1.4 * P.swv) * d;\n    P.sw = cl(P.sw + P.swv * d, -0.3, 0.3);\n    [P.ptx, P.vx] = [tx, vx];\n  }\n  // The rigger steadies the load before it goes up.\n  if (P.ph === \"B\") (P.sw *= 1 - min(1, 5 * d)), (P.swv *= 1 - min(1, 5 * d));\n  P.swx = cl(L * sin(P.sw), -2.5, 2.5);\n  // The rebar is tied up the columns and the formwork goes round them.\n  if (P.stage > 1) P.cage = min(1, P.cage + d * 0.3);\n  if (P.stage > 2) P.form = min(1, P.form + d * 0.3);\n  // A floor switches its lights on or off together.\n  for (let i = 0; i \u003c NMAX; i++) P.onT[i] += rd;\n  if ((P.nsw -= d) \u003c= 0) {\n    const f = P.lightNew >= 0 ? P.lightNew : floor(rnd() * max(1, P.n - 2));\n    P.on[f] = P.lightNew >= 0 ? 1 : 1 - P.on[f];\n    Object.assign(P, { lightNew: -1, nsw: 1.6 + rnd() * 2 }).onT[f] = 0;\n  }\n  // Welding on the deck, and its sparks falling down the face.\n  if ((P.weld -= d) \u003c= 0) (P.welding = 1 - P.welding), (P.weld = P.welding ? 1.4 + rnd() * 1.6 : 0.4 + rnd() * 0.8);\n  const wy = deckY(P) - 2;\n  if (P.welding) for (let n = 0; n \u003c 4; n++) if (rnd() \u003c d * 18) P.sp.push([18 + rnd(), wy, (rnd() - 0.5) * 14, -4 - rnd() * 7, 1 + rnd() * 0.9, 18.5, wy]);\n  P.sp = P.sp.filter((s) => ((s[5] = s[0]), (s[6] = s[1]), (s[3] += 46 * d), (s[0] += s[2] * d), (s[1] += s[3] * d), (s[4] -= d) > 0 && s[1] \u003c GY));\n  // Workers walk about the deck.\n  for (const w of P.wk)\n    if (abs(w.tx - w.x) > 0.3) w.x = cl(w.x + cl(w.tx - w.x, -4 * d, 4 * d), 5, 37);\n    else if ((w.wait -= d) \u003c= 0) (w.tx = 6 + rnd() * 30), (w.wait = 1 + rnd() * 3);\n  // The mixer comes in for the bucket and backs out after the pour.\n  P.mix += cl((P.stage >= 2 && !P.top ? 2 : -26) - P.mix, -9 * d, 9 * d);\n  // Cars along the street.\n  if ((P.ncar -= d) \u003c= 0) (P.ncar = 2 + rnd() * 4), P.cars.push(rnd() \u003c 0.5 ? [-8, 11 + rnd() * 6, floor(rnd() * 4)] : [W + 1, -11 - rnd() * 6, floor(rnd() * 4)]);\n  P.cars = P.cars.filter((c) => ((c[0] += c[1] * d), c[0] > -12 && c[0] \u003c W + 12));\n  // Clouds drift with the wind.\n  P.cx += (1.5 + 9 * P.w) * d;\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\n// A surface: its own colour under the light that falls on that LED.\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\n// A lamp's glow round it, and a worker three LEDs tall.\nconst glow = (x, y, c, k) => {\n  for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (i || j) add(x + i, y + j, c, k / (i * i + j * j));\n};\nconst man = (x, y, head = [250, 250, 240]) => (sur(x, y, 50, 56, 90), sur(x, y - 1, 255, 130, 20), surc(x, y - 2, head));\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.2 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\n\n// Sky, sun and the city beyond, kept until the evening moves on.\nfunction sky(P, K) {\n  const h = P.h, B = P.bg;\n  if (round(h * 300) === P.bgKey) return F.set(B);\n  P.bgKey = round(h * 300);\n  const row = P.row, night = sm(0.4, 0.9, h), vis = 1 - sm(0.78, 0.95, h);\n  for (let y = 0; y \u003c H; y++) {\n    const f = min(1, y / GY), a = f \u003c 0.5 ? 0 : 3, u = f \u003c 0.5 ? f / 0.5 : (f - 0.5) / 0.5;\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(K[a + c], K[a + 3 + c], a ? u * u : sm(0, 1, u));\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    if (y >= P.sky[x]) {\n      const win = night * (hash(x, y * 3) \u003c 0.16 && y & 1 ? 1 : 0);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = mix(K[3 + c], K[6 + c], 0.55) * 0.6 * (x & 1 ? 1 : 0.86) + win * [210, 160, 90][c];\n      continue;\n    }\n    const d = Math.hypot(x - 54.5, y - 61.5 - 52 * h), g = vis * (0.55 * exp(-((d - 3.6) ** 2) / 50) + 0.3 * exp(-d / 16));\n    for (let c = 0; c \u003c 3; c++) B[o + c] = d \u003c 3.6 && vis > 0 ? mix(row[y * 3 + c], K[9 + c], vis) : row[y * 3 + c] + K[9 + c] * g * 0.7;\n  }\n  F.set(B);\n}\n\nfunction clouds(P, K) {\n  const cover = 0.56 - 0.18 * abs(P.w), C = P.cloud;\n  for (let y = 0; y \u003c 100; y++) {\n    const ty = floor(y * 0.6) & 63, fade = 1 - sm(50, 100, y);\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= P.sky[x]) continue;\n      const v = C[(ty \u003c\u003c 7) | (floor(x + P.cx) & 127)], a = cl((v - cover) * 7, 0, 1) * fade, lt = cl(1.25 - (v - cover) * 4 + (y - 40) / 120, 0, 1);\n      if (a > 0.01) put(x, y, [mix(K[15], K[12], lt), mix(K[16], K[13], lt), mix(K[17], K[14], lt)], a * 0.92);\n    }\n  }\n}\n\n// The light on every surface: the day, cloud shadows, the floodlights after dusk.\nfunction light(P, K) {\n  const sunA = 1 - sm(0.45, 0.85, P.h), fon = sm(0.3, 0.55, P.h), FLb = P.fl, C = P.cloud;\n  const cover = 0.5 - 0.18 * abs(P.w), [tx, ty] = tip(P), hx = tx + P.swx * 0.5;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, v = C[((floor(y * 0.25 + 20) & 63) \u003c\u003c 7) | (floor(x * 0.8 + P.cx * 2.2 + 40) & 127)];\n    let fl = 0;\n    if (fon > 0) {\n      const dx = x + 0.5 - LX, dy = y + 0.5 - LY, dd = Math.hypot(dx, dy) + 0.01, ca = (dx * AX + dy * AY) / dd;\n      fl = (exp((ca - 1) / 0.03) * 1.2) / (1 + (dd / 60) ** 2);\n      if (y > ty + 1) {\n        const q = (x + 0.5 - hx) / (1.2 + 0.16 * (y - ty));\n        fl += (exp(-q * q) * 0.7) / (1 + ((y - ty) / 90) ** 2);\n      }\n      fl *= fon;\n    }\n    FLb[i] = fl;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[18 + c] * (1 - 0.45 * sunA * cl((v - cover) * 5, 0, 1)) + fl * FLC[c];\n  }\n}\n\n// The yard's gravel, the kerb, the street and its markings.\nfunction ground() {\n  for (let i = GY * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, n = 0.82 + 0.3 * hash(x, y + 900);\n    y === 126 && (x + 6) % 8 \u003c 2 ? sur(x, y, 190, 180, 120) : y > 123 ? sur(x, y, 62 * n, 60 * n, 66 * n) : y > 122 ? sur(x, y, 150, 146, 140) : sur(x, y, 150 * n, 126 * n, 98 * n);\n  }\n}\n\n// The concrete frame, its windows, and the floor going up on the deck.\nfunction building(P) {\n  const n = P.n, dk = deckY(P), g = n - 2, night = sm(0.4, 0.9, P.h), row = P.row;\n  for (let y = dk; y \u003c GY; y++) {\n    const k = floor((GY - 1 - y) / FH), ry = y - (GY - (k + 1) * FH);\n    for (let x = BX0; x \u003c= BX1; x++) {\n      const cx = (x - BX0) % 7, b = floor((x - BX0) / 7), bx = cx - 2;\n      if (ry === 0) sur(x, y, 228, 220, 206);\n      else if (cx \u003c 2) sur(x, y, 206, 198, 184);\n      else if (ry === 1) k \u003c g ? sur(x, y, 78, 86, 102) : sur(x, y, 178, 172, 162);\n      else if (b === CORE) sur(x, y, 196, 190, 180, (x + y) % 9 === 0 ? 0.8 : 0.95);\n      else if (k \u003c g && bx === 2) sur(x, y, 80, 80, 88);\n      else if (k \u003c g) {\n        // Glass: the sky in it, or a lit room behind.\n        const o = (y * W + x) * 3, rr = cl(round(y * 0.3 + 4), 0, GY - 1) * 3;\n        let on = P.on[k] ? hash(k, b * 7 + 1) \u003c 0.92 : hash(k, b * 7 + 3) \u003c 0.1 + 0.6 * night;\n        if (on && P.on[k] && P.onT[k] \u003c 0.5) on = hash(k * 13 + b, floor(P.onT[k] * 22)) > 0.45;\n        const lc = hash(k, b + 40) \u003c 0.75 ? [255, 184, 88] : [200, 228, 255], a = on ? 0.9 + 0.1 * night : 0;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(row[rr + c] * 0.42 + c * 5, lc[c], a) * (ry === 2 ? 1.12 : 1);\n      } else {\n        // An open floor: dark inside, the back columns, a work lamp at night.\n        if (night > 0.05 && bx === 2 && ry === 2 && hash(k, b) \u003c 0.6) put(x, y, [255, 214, 150].map((v) => v * night));\n        else sur(x, y, 60, 54, 52, bx === 2 ? 0.6 : 0.28);\n      }\n    }\n  }\n  // Ties from the mast to the frame.\n  for (let k = 2; k \u003c n; k += 3) for (let x = BX1 + 1; x \u003c MX - 2; x++) sur(x, GY - (k + 1) * FH + 1, 200, 170, 60);\n\n  // The floor on the deck: starter bars, the core panel, the rebar cages, the formwork.\n  const top = dk - FH, st = P.top ? 0 : P.stage;\n  if (st > 0) for (let y = top + 1; y \u003c dk; y++) for (let x = BX0 + 30; x \u003c= BX0 + 34; x++) sur(x, y, 176, 172, 164, x === BX0 + 32 ? 0.8 : 1);\n  for (let ci = 0; ci \u003c 6; ci++) {\n    const x = BX0 + ci * 7;\n    for (let j = 1; j \u003c= max(2, st > 1 ? round(P.cage * 5) : 0); j++) sur(x, dk - j, 176, 96, 50), j & 1 && sur(x + 1, dk - j, 130, 76, 44);\n    if (st > 2 && ci / 6 \u003c P.form) for (let j = 1; j \u003c FH; j++) sur(x, dk - j, 218, 162, 84), sur(x + 1, dk - j, 196, 140, 70);\n  }\n  if (st > 2) for (let x = BX0; x \u003c= BX0 + 36 * P.form; x++) for (let j = 0; j \u003c ((x - BX0) % 7 === 4 ? FH : 1); j++) j ? sur(x, top + j, 150, 150, 156, 0.8) : sur(x, top, 214, 156, 80);\n  if (P.pourX >= 0 && !P.top) for (let x = BX0; x \u003c= min(BX1, P.pourX); x++) sur(x, top, 140, 140, 150), (x - BX0) % 7 \u003c 2 && sur(x, top + 1, 140, 140, 150, 0.9);\n  if (P.item > 0) drawLoad(P.item, P.ix, dk - LH[P.item]);\n  // Topped out: a little fir tree on the roof.\n  if (P.top) for (let j = 0; j \u003c 5; j++) for (let i = -j; i \u003c= j; i++) sur(24 + i, dk - 6 + j, 40, 120, 60);\n  // The workers on the deck in hi-vis, and the welder by a column.\n  for (const w of P.wk) man(w.x, dk - 1);\n  man(17, dk - 1, [60, 60, 70]);\n}\n\n// One of the four loads, centred on x with its top on row y0.\nfunction drawLoad(type, cx, y0) {\n  const w = LW[type], h = LH[type], x0 = round(cx - w / 2), y = round(y0);\n  for (let j = 0; j \u003c h; j++)\n    for (let i = 0; i \u003c w; i++) {\n      const X = x0 + i, Y = y + j;\n      if (type === 0) (i \u003c 2 || i > 4 || !j || j > 3) && sur(X, Y, 150, 146, 140, i && j ? 1 : 1.25);\n      else if (type === 1) sur(X, Y, i === 2 || i === 8 ? 60 : 186, i === 2 || i === 8 ? 54 : 92, 48, j ? 0.72 : 1);\n      else if (type === 2) sur(X, Y, 226, 170, 92, j & 1 ? 0.55 : 1);\n      else if (i >= (j >= h - 2 ? 1 : 0) && i \u003c w - (j >= h - 2 ? 1 : 0)) sur(X, Y, 120, 120, 128, j === 1 ? 0.6 : j === 0 ? 1.3 : 1);\n    }\n  if (type === 3) sur(x0 + 2, y + h, 70, 70, 76);\n}\n\n// The hook block, its cable and slings, and whatever it carries.\nfunction hook(P) {\n  const [tx, ty] = tip(P), hx = tx + P.swx, hy = P.hy;\n  line(tx, ty + 1, hx, hy - 1, [120, 120, 130], 0.9);\n  for (let i = -1; i \u003c= 1; i++) surc(hx + i, hy - 1, YEL);\n  sur(hx, hy, 60, 60, 66), sur(hx, hy + 1, 90, 90, 96);\n  if (P.load >= 0) {\n    const w = LW[P.load] / 2 - 0.5;\n    line(hx, hy + 1, hx - w, hy + 3, [110, 110, 116], 0.8), line(hx, hy + 1, hx + w, hy + 3, [110, 110, 116], 0.8);\n    drawLoad(P.load, hx + 0.5, hy + 3);\n    // Concrete runs from the bucket into the forms.\n    if (P.ph === \"P\" || P.ph === \"I\") for (let j = hy + 10; j \u003c deckY(P) - FH; j++) sur(hx + 0.5, j, 140, 140, 150);\n  }\n}\n\n// The yard: stock waiting by the crane, the load being rigged, the floodlight tower.\nfunction yard(P) {\n  drawLoad(2, 53, 115), drawLoad(1, 54, 118);\n  if (P.ph === \"A\" || P.ph === \"B\") {\n    const s = P.stage, x = MX + PICK_R - LW[s] / 2 - 2, arm = P.ph === \"B\" ? (P.pt * 6) & 1 : 0;\n    drawLoad(s, MX + PICK_R + 0.5, PICK_Y - LH[s]);\n    man(x, PICK_Y - 1), sur(x + 1, PICK_Y - 2 - arm, 255, 130, 20);\n  }\n  for (let y = LY; y \u003c 122; y++) sur(62, y, 120, 120, 126);\n  const fon = sm(0.3, 0.55, P.h);\n  for (let x = 59; x \u003c= 62; x++) put(x, 83, [90, 90, 96]), put(x, 84, x \u003c 62 ? [70 + 185 * fon, 70 + 180 * fon, 76 + 154 * fon] : [90, 90, 96]);\n}\n\n// The crane: mast, ties, slewing ring, cab, tower head, jib and counter-jib.\nfunction crane(P) {\n  const c = cos(P.th), sn = sin(P.th), blink = P.rt % 1.2 \u003c 0.55, fon = sm(0.3, 0.55, P.h);\n  const jib = () => {\n    for (let s = 0; s \u003c= JL; s += 0.3) {\n      // Swung towards you the tip is nearer and bigger, swung away it shrinks.\n      const sc = 1 + (0.45 * s * sn) / JL, px = MX + s * c, py = JY - s * sn * 0.1, ht = (3 - (1.2 * s) / JL) * sc, tri = abs(((s / 2.4) % 2) - 1), wd = sn * 1.2 * sc;\n      surc(px - wd, py, YEL, 0.85), surc(px + wd, py, YEL, 0.85), surc(px, py - ht, YEL), surc(px + wd * (1 - tri), py - tri * ht, YEL, 0.75);\n    }\n  };\n  const counter = () => {\n    for (let s = 0; s \u003c= CJL; s += 0.3) {\n      const px = MX - s * c, py = JY + s * sn * 0.1;\n      surc(px, py, YEL, 0.85), surc(px, py - 1, YEL, s % 2 \u003c 0.6 ? 0.8 : 0);\n      if (s > 6 && s \u003c 8.5) for (let j = 1; j \u003c= 2; j++) sur(px, py - 1 - j, 80, 84, 92);\n      if (s > CJL - 5) for (let j = 1; j \u003c= 4; j++) sur(px, py + j, 190, 184, 172, (floor(s) & 1) === 0 ? 0.8 : 1);\n    }\n  };\n  const pend = () => {\n    line(MX, APEX + 1, MX + 28 * c, JY - 28 * sn * 0.1 - 2.2, [110, 104, 96], 0.8);\n    line(MX, APEX + 1, MX - CJL * c, JY + CJL * sn * 0.1 - 1, [110, 104, 96], 0.8);\n  };\n  const cab = () => {\n    for (let q = 0, i, j; q \u003c 12; q++)\n      (i = (q % 3) - 1), (j = (q / 3) | 0), j % 3 && i > -1 ? put(MX + 3.5 * c + i, JY + 1 + j, P.h > 0.5 ? [255 * fon, 226 * fon, 160 * fon] : [110, 150, 196]) : surc(MX + 3.5 * c + i, JY + 1 + j, [240, 232, 210]);\n  };\n  // What faces away is drawn first.\n  if (sn \u003c 0) jib(), pend(), cab();\n  else counter(), pend();\n  // The mast: two chords and a lattice of diagonals.\n  for (let y = JY + 3; y \u003c 118; y++) {\n    surc(MX - 2, y, YEL, 0.72), surc(MX + 2, y, YEL);\n    for (let xi = 1; xi \u003c= 3; xi++) if (((y + xi) & 3) === 0 || ((y - xi) & 3) === 0) surc(MX - 2 + xi, y, YEL, 0.8);\n  }\n  for (let x = MX - 4; x \u003c= MX + 4; x++) sur(x, 117, 170, 166, 160), sur(x, 118, 170, 166, 160), sur(x, 119, 170, 166, 160), abs(x - MX) \u003c 4 && (sur(x, JY + 1, 80, 80, 86), sur(x, JY + 2, 110, 110, 116));\n  // The tower head.\n  for (let y = APEX; y \u003c= JY - 3; y++) {\n    const hw = (1.6 * (y - APEX)) / (JY - 3 - APEX);\n    surc(MX - hw, y, YEL), surc(MX + hw, y, YEL);\n    if ((y & 1) === 0) for (let x = round(MX - hw); x \u003c= MX + hw; x++) surc(x, y, YEL, 0.8);\n  }\n  if (sn \u003c 0) counter(), pend();\n  else jib(), pend(), cab();\n  // The trolley, and the warning lights on the head and at the jib tip.\n  const [tx, ty] = tip(P);\n  sur(tx - 1, ty, 90, 90, 96), sur(tx, ty, 90, 90, 96), sur(tx + 1, ty, 90, 90, 96);\n  for (const [x, y] of [[MX, APEX - 1], [MX + JL * c, JY - JL * sn * 0.1 - 2]]) {\n    put(x, y, blink ? [255, 40, 28] : [110, 20, 16]);\n    if (blink) glow(x, y, [255, 30, 20], 0.12 + 0.3 * fon);\n  }\n}\n\n// The mixer, its drum turning.\nfunction mixer(P) {\n  const x0 = round(P.mix), night = sm(0.4, 0.9, P.h);\n  if (x0 \u003c -24) return;\n  for (let y = 115; y \u003c= 121; y++)\n    for (let i = 0; i \u003c 13; i++) {\n      const e = ((i - 6) / 6.8) ** 2 + ((y - 118 + (i - 6) * 0.18) / 3.4) ** 2;\n      if (e \u003c 1) sur(x0 + i, y, ...((((i * 0.7 + y * 1.4 - P.t * 9) % 4) + 4) % 4 \u003c 2 ? [240, 120, 40] : [230, 228, 220]), 1 - 0.3 * e);\n    }\n  for (let i = 0; i \u003c 20; i++) sur(x0 + i, 122, 70, 70, 76);\n  for (let y = 116; y \u003c 122; y++) for (let i = 15; i \u003c 20; i++) sur(x0 + i, y, ...(y \u003c 119 && i > 16 ? [110, 150, 190] : [230, 60, 40]));\n  for (const i of [2, 5, 16]) sur(x0 + i, 123, 30, 30, 34), sur(x0 + i + 1, 123, 30, 30, 34);\n  if (night > 0.1) add(x0 + 20, 120, [255, 240, 200], night);\n}\n\nfunction cars(P) {\n  const night = sm(0.35, 0.9, P.h), cols = [[200, 40, 36], [220, 220, 226], [40, 80, 170], [60, 64, 70]];\n  for (const [cx, v, ci] of P.cars) {\n    const x0 = round(cx), fx = v > 0 ? x0 + 6 : x0;\n    for (let i = 0; i \u003c 21; i++) i \u003c 14 ? surc(x0 + (i >> 1), 125 + (i & 1), cols[ci]) : i \u003c 17 && sur(x0 + i - 12, 124, 120, 150, 180);\n    add(fx, 125, [255, 250, 220], 0.3 + night), add(x0 + 6 - fx + x0, 125, [255, 20, 10], 0.2 + night);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  const hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  // The hook goes behind the frame when the jib swings away from you.\n  const behind = sin(P.th) \u003c -0.15, y = deckY(P) - 2, FLb = P.fl;\n  sky(P, K), clouds(P, K), light(P, K), ground(), behind && hook(P), building(P), yard(P), crane(P), mixer(P), cars(P), behind || hook(P);\n  // The welding arc, its sparks, and the floodlight beams in the dusk air.\n  if (P.welding) put(18, y, [235, 244, 255]), glow(18, y, [160, 190, 255], 0.36 + 0.24 * rnd());\n  for (const [x, y, , , l, px, py] of P.sp) put(px, py, [255, 120, 30], min(1, l * 1.4) * 0.6), put(x, y, [255, 170 + 80 * min(1, l), 70 * min(1, l)], min(1, l * 1.4));\n  if (P.h > 0.3) for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (FLb[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += FLb[i] * 22 * FLC[c];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-tower-crane","type":"code","name":"tower-crane","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tower Crane\n// Family:  construction\n// Idea:    A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower cranes that stand beside a rising concrete frame\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1\n//\n// Knob 1: Dusk. From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit.\n// Knob 2: Speed. At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower.\n// Knob 3: Floors. How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof.\n// Knob 4: Wind. Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable.\n// Buttons: K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street level, one storey, and the most floors that fit under the jib.\nconst [GY, FH, NMAX] = [114, 6, 13];\n// The frame, x 3 to 39: six columns two LEDs wide, five bays, the one by the crane the lift core.\nconst [BX0, BX1, CORE] = [3, 39, 4];\n// Mast centre, the jib's bottom chord at the root, jib and counter-jib lengths, top of the tower head.\nconst [MX, JY, JL, CJL, APEX] = [46, 15, 42, 15, 3];\n// The hook's highest row, the radius it picks at over the yard, the yard's load line.\nconst [HTOP, PICK_R, PICK_Y] = [21, 11, 120];\n// Wall panel, rebar, formwork, bucket: width, height, the column it is set down on.\nconst LW = [8, 11, 9, 5], LH = [5, 2, 4, 6], DROP = [35, 20, 12, 6];\n// Sky top, middle, horizon; sun; lit and shaded cloud; light on things. Afternoon to night.\nconst KEYS = [\n  [34, 72, 156, 128, 142, 186, 255, 190, 112, 255, 236, 170, 255, 236, 204, 150, 130, 160, 1, 0.9, 0.74],\n  [30, 50, 130, 168, 108, 140, 255, 140, 62, 255, 168, 78, 255, 170, 116, 104, 70, 108, 0.86, 0.64, 0.48],\n  [16, 20, 70, 64, 44, 96, 196, 86, 78, 226, 90, 52, 176, 92, 104, 46, 36, 66, 0.44, 0.38, 0.46],\n  [4, 6, 22, 10, 14, 40, 44, 34, 60, 0, 0, 0, 42, 36, 56, 16, 16, 30, 0.2, 0.21, 0.3],\n];\nconst FLC = [1, 0.94, 0.82];\nconst YEL = [255, 196, 22];\n// The floodlight tower in the yard and where it is aimed.\nconst [LX, LY] = [60.5, 84.5];\nconst [AX, AY] = (([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)])([-34, 31]);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F(N * 3), bg: F(N * 3), lm: F(N * 3), fl: F(N), row: F(H * 3), cloud: F(128 * 64), sky: new Int16Array(W),\n    t: 0, rt: 0, nk: -1, stage: 3, cage: 1, form: 1, item: -1, lightNew: -1, th: PI, r: 40, load: 3, ph: \"I\", sw: 0, swv: 0, vx: 0, ptx: 6,\n    on: new Uint8Array(NMAX), onT: F(NMAX).fill(9), nsw: 2.4, cx: 0, sp: [], weld: 0.4, welding: 0, wk: [], mix: 2, cars: [], ncar: 1.4,\n  });\n  // Clouds: a strip of soft noise that wraps every 128 columns.\n  for (let i = 0; i \u003c 128 * 64; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.05, y * 0.13) + 0.3 * vn(X * 0.13, y * 0.3 + 9) + 0.15 * vn(X * 0.4, y * 0.6 + 3);\n    P.cloud[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  // The city behind: blocks of four to nine columns.\n  for (let x = 0, w = 0, h = 0; x \u003c W; x++, w--) w > 0 || ((w = 4 + floor(rnd() * 6)), (h = 98 + floor(rnd() * 12))), (P.sky[x] = h);\n  for (let k = 0; k \u003c NMAX; k++) (P.on[k] = rnd() \u003c 0.35 ? 1 : 0), k \u003c 3 && P.wk.push({ x: 8 + k * 11 + rnd() * 4, tx: 8 + rnd() * 28, wait: rnd() * 2 });\n}\n\n// A move of the crane: slew angle, trolley radius and hook row, eased to where they go.\nfunction go(P, ph, dur, to) {\n  Object.assign(P, { ph, pt: 0, pd: dur, f0: [P.th, P.r, P.hy], f1: [to.th ?? P.th, to.r ?? P.r, to.hy ?? P.hy] });\n}\n\nconst deckY = (P) => GY - P.n * FH;\nconst tip = (P) => [MX + P.r * cos(P.th), JY + 1 - P.r * sin(P.th) * 0.1];\nconst bucketHy = (P) => deckY(P) - FH - 2 - LH[3] - 3;\n\nfunction finishFloor(P) {\n  if (P.n \u003c NMAX) P.n++;\n  else P.top = 1;\n  // The floor that has just been glazed lights up a moment later.\n  Object.assign(P, { stage: 0, cage: 0, form: 0, item: -1, pourX: -1, nsw: min(P.nsw, 0.7), lightNew: P.n - 3 });\n}\n\n// Down to the yard, rig, hoist, slew over, lower, set down (or pour), up again.\nfunction step(P) {\n  const T = P.ph, type = P.load;\n  if (T === \"A\") go(P, \"B\", 0.5, {});\n  else if (T === \"B\") (P.load = P.top && P.stage > 2 ? (P.stage = 0) : P.stage), go(P, \"C\", 2.8, { hy: HTOP });\n  else if (T === \"C\") go(P, \"D\", 2.4, { th: P.th + PI, r: MX - DROP[type] });\n  else if (T === \"D\") go(P, \"E\", 1.5, { hy: type === 3 ? bucketHy(P) : deckY(P) - 4 - LH[type] });\n  else if (T === \"E\") {\n    if (type === 3) (P.pourX = BX0), go(P, \"P\", 3, { r: MX - BX1 + 2 });\n    else {\n      // Set down: the panel goes into the core, rebar and formwork lie on the deck.\n      const x = round(tip(P)[0]);\n      if (type) (P.item = type), (P.ix = x), type \u003c 2 ? (P.cage = 0) : (P.form = 0);\n      for (const w of P.wk) w.tx = x + (rnd() - 0.5) * 10;\n      (P.stage = max(P.stage, type + 1)), (P.load = -1), go(P, \"F\", 0.9, {});\n    }\n  } else if (T === \"P\" || T === \"I\") finishFloor(P), go(P, \"F\", 0.4, {});\n  else if (T === \"F\") go(P, \"G\", 0.5, { hy: P.hy - 12 });\n  else (P.load = -1), go(P, \"A\", 1.5, { th: (floor(P.th / TAU + 1e-3) + 1) * TAU, r: PICK_R, hy: PICK_Y - LH[P.stage] - 3 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nf = round(cl(k[2], 9, 13));\n  if (nf !== P.nk) {\n    // A new count of floors: the hook keeps its place over the deck.\n    const sh = (nf - P.n) * FH;\n    P.nk = P.n = nf;\n    P.top = 0;\n    if (P.ph === \"I\") (P.hy = bucketHy(P)), (P.pourX = BX0), go(P, \"I\", 3, { r: MX - BX1 + 2 });\n    else if (\"EPFG\".includes(P.ph)) (P.hy -= sh), (P.f0[2] -= sh), (P.f1[2] -= sh);\n  }\n  P.w = cl(k[3], -1, 1);\n  const t = (P.t += d), k0 = cl(k[0], 0, 1);\n  P.rt += rd;\n  // The evening deepens a little and comes back once every minute and a half.\n  P.h = k0 + (1 - k0) * 0.05 * (1 - cos((TAU * t) / 90));\n  // K1 tap: everything for the floor is in place at once and the deck pours.\n  if (input.btnPressed && input.btnPressed[0] && P.pourX \u003c 0 && !P.top) Object.assign(P, { pourBtn: 1, pourX: BX0, stage: 3, cage: 1, form: 1 });\n  const lin = min(1, (P.pt += d) / P.pd), u = sm(0, 1, lin), pour = P.ph === \"P\" || P.ph === \"I\";\n  P.th = mix(P.f0[0], P.f1[0], u);\n  P.r = mix(P.f0[1], P.f1[1], pour ? lin : u);\n  P.hy = mix(P.f0[2], P.f1[2], u);\n  if (pour) P.pourX = max(P.pourX, tip(P)[0] + 2);\n  if (lin >= 1) step(P);\n  if (P.pourBtn && (P.pourX += 30 * d) > BX1) (P.pourBtn = 0), finishFloor(P);\n  // The load swings on its cable when the trolley speeds up or slows, and in the wind.\n  const [tx, ty] = tip(P), L = max(4, P.hy - ty);\n  if (d > 0) {\n    const vx = (tx - P.ptx) / d, ax = cl((vx - P.vx) / d, -30, 30), eq = P.w * (0.06 + 0.04 * sin(t * 1.7)) * (P.load >= 0 ? 1 : 1.6);\n    P.swv += (-(110 / L) * (P.sw - eq) - (0.5 * ax) / L - 1.4 * P.swv) * d;\n    P.sw = cl(P.sw + P.swv * d, -0.3, 0.3);\n    [P.ptx, P.vx] = [tx, vx];\n  }\n  // The rigger steadies the load before it goes up.\n  if (P.ph === \"B\") (P.sw *= 1 - min(1, 5 * d)), (P.swv *= 1 - min(1, 5 * d));\n  P.swx = cl(L * sin(P.sw), -2.5, 2.5);\n  // The rebar is tied up the columns and the formwork goes round them.\n  if (P.stage > 1) P.cage = min(1, P.cage + d * 0.3);\n  if (P.stage > 2) P.form = min(1, P.form + d * 0.3);\n  // A floor switches its lights on or off together.\n  for (let i = 0; i \u003c NMAX; i++) P.onT[i] += rd;\n  if ((P.nsw -= d) \u003c= 0) {\n    const f = P.lightNew >= 0 ? P.lightNew : floor(rnd() * max(1, P.n - 2));\n    P.on[f] = P.lightNew >= 0 ? 1 : 1 - P.on[f];\n    Object.assign(P, { lightNew: -1, nsw: 1.6 + rnd() * 2 }).onT[f] = 0;\n  }\n  // Welding on the deck, and its sparks falling down the face.\n  if ((P.weld -= d) \u003c= 0) (P.welding = 1 - P.welding), (P.weld = P.welding ? 1.4 + rnd() * 1.6 : 0.4 + rnd() * 0.8);\n  const wy = deckY(P) - 2;\n  if (P.welding) for (let n = 0; n \u003c 4; n++) if (rnd() \u003c d * 18) P.sp.push([18 + rnd(), wy, (rnd() - 0.5) * 14, -4 - rnd() * 7, 1 + rnd() * 0.9, 18.5, wy]);\n  P.sp = P.sp.filter((s) => ((s[5] = s[0]), (s[6] = s[1]), (s[3] += 46 * d), (s[0] += s[2] * d), (s[1] += s[3] * d), (s[4] -= d) > 0 && s[1] \u003c GY));\n  // Workers walk about the deck.\n  for (const w of P.wk)\n    if (abs(w.tx - w.x) > 0.3) w.x = cl(w.x + cl(w.tx - w.x, -4 * d, 4 * d), 5, 37);\n    else if ((w.wait -= d) \u003c= 0) (w.tx = 6 + rnd() * 30), (w.wait = 1 + rnd() * 3);\n  // The mixer comes in for the bucket and backs out after the pour.\n  P.mix += cl((P.stage >= 2 && !P.top ? 2 : -26) - P.mix, -9 * d, 9 * d);\n  // Cars along the street.\n  if ((P.ncar -= d) \u003c= 0) (P.ncar = 2 + rnd() * 4), P.cars.push(rnd() \u003c 0.5 ? [-8, 11 + rnd() * 6, floor(rnd() * 4)] : [W + 1, -11 - rnd() * 6, floor(rnd() * 4)]);\n  P.cars = P.cars.filter((c) => ((c[0] += c[1] * d), c[0] > -12 && c[0] \u003c W + 12));\n  // Clouds drift with the wind.\n  P.cx += (1.5 + 9 * P.w) * d;\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\n// A surface: its own colour under the light that falls on that LED.\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\n// A lamp's glow round it, and a worker three LEDs tall.\nconst glow = (x, y, c, k) => {\n  for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (i || j) add(x + i, y + j, c, k / (i * i + j * j));\n};\nconst man = (x, y, head = [250, 250, 240]) => (sur(x, y, 50, 56, 90), sur(x, y - 1, 255, 130, 20), surc(x, y - 2, head));\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.2 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\n\n// Sky, sun and the city beyond, kept until the evening moves on.\nfunction sky(P, K) {\n  const h = P.h, B = P.bg;\n  if (round(h * 300) === P.bgKey) return F.set(B);\n  P.bgKey = round(h * 300);\n  const row = P.row, night = sm(0.4, 0.9, h), vis = 1 - sm(0.78, 0.95, h);\n  for (let y = 0; y \u003c H; y++) {\n    const f = min(1, y / GY), a = f \u003c 0.5 ? 0 : 3, u = f \u003c 0.5 ? f / 0.5 : (f - 0.5) / 0.5;\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(K[a + c], K[a + 3 + c], a ? u * u : sm(0, 1, u));\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    if (y >= P.sky[x]) {\n      const win = night * (hash(x, y * 3) \u003c 0.16 && y & 1 ? 1 : 0);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = mix(K[3 + c], K[6 + c], 0.55) * 0.6 * (x & 1 ? 1 : 0.86) + win * [210, 160, 90][c];\n      continue;\n    }\n    const d = Math.hypot(x - 54.5, y - 61.5 - 52 * h), g = vis * (0.55 * exp(-((d - 3.6) ** 2) / 50) + 0.3 * exp(-d / 16));\n    for (let c = 0; c \u003c 3; c++) B[o + c] = d \u003c 3.6 && vis > 0 ? mix(row[y * 3 + c], K[9 + c], vis) : row[y * 3 + c] + K[9 + c] * g * 0.7;\n  }\n  F.set(B);\n}\n\nfunction clouds(P, K) {\n  const cover = 0.56 - 0.18 * abs(P.w), C = P.cloud;\n  for (let y = 0; y \u003c 100; y++) {\n    const ty = floor(y * 0.6) & 63, fade = 1 - sm(50, 100, y);\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= P.sky[x]) continue;\n      const v = C[(ty \u003c\u003c 7) | (floor(x + P.cx) & 127)], a = cl((v - cover) * 7, 0, 1) * fade, lt = cl(1.25 - (v - cover) * 4 + (y - 40) / 120, 0, 1);\n      if (a > 0.01) put(x, y, [mix(K[15], K[12], lt), mix(K[16], K[13], lt), mix(K[17], K[14], lt)], a * 0.92);\n    }\n  }\n}\n\n// The light on every surface: the day, cloud shadows, the floodlights after dusk.\nfunction light(P, K) {\n  const sunA = 1 - sm(0.45, 0.85, P.h), fon = sm(0.3, 0.55, P.h), FLb = P.fl, C = P.cloud;\n  const cover = 0.5 - 0.18 * abs(P.w), [tx, ty] = tip(P), hx = tx + P.swx * 0.5;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, v = C[((floor(y * 0.25 + 20) & 63) \u003c\u003c 7) | (floor(x * 0.8 + P.cx * 2.2 + 40) & 127)];\n    let fl = 0;\n    if (fon > 0) {\n      const dx = x + 0.5 - LX, dy = y + 0.5 - LY, dd = Math.hypot(dx, dy) + 0.01, ca = (dx * AX + dy * AY) / dd;\n      fl = (exp((ca - 1) / 0.03) * 1.2) / (1 + (dd / 60) ** 2);\n      if (y > ty + 1) {\n        const q = (x + 0.5 - hx) / (1.2 + 0.16 * (y - ty));\n        fl += (exp(-q * q) * 0.7) / (1 + ((y - ty) / 90) ** 2);\n      }\n      fl *= fon;\n    }\n    FLb[i] = fl;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[18 + c] * (1 - 0.45 * sunA * cl((v - cover) * 5, 0, 1)) + fl * FLC[c];\n  }\n}\n\n// The yard's gravel, the kerb, the street and its markings.\nfunction ground() {\n  for (let i = GY * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, n = 0.82 + 0.3 * hash(x, y + 900);\n    y === 126 && (x + 6) % 8 \u003c 2 ? sur(x, y, 190, 180, 120) : y > 123 ? sur(x, y, 62 * n, 60 * n, 66 * n) : y > 122 ? sur(x, y, 150, 146, 140) : sur(x, y, 150 * n, 126 * n, 98 * n);\n  }\n}\n\n// The concrete frame, its windows, and the floor going up on the deck.\nfunction building(P) {\n  const n = P.n, dk = deckY(P), g = n - 2, night = sm(0.4, 0.9, P.h), row = P.row;\n  for (let y = dk; y \u003c GY; y++) {\n    const k = floor((GY - 1 - y) / FH), ry = y - (GY - (k + 1) * FH);\n    for (let x = BX0; x \u003c= BX1; x++) {\n      const cx = (x - BX0) % 7, b = floor((x - BX0) / 7), bx = cx - 2;\n      if (ry === 0) sur(x, y, 228, 220, 206);\n      else if (cx \u003c 2) sur(x, y, 206, 198, 184);\n      else if (ry === 1) k \u003c g ? sur(x, y, 78, 86, 102) : sur(x, y, 178, 172, 162);\n      else if (b === CORE) sur(x, y, 196, 190, 180, (x + y) % 9 === 0 ? 0.8 : 0.95);\n      else if (k \u003c g && bx === 2) sur(x, y, 80, 80, 88);\n      else if (k \u003c g) {\n        // Glass: the sky in it, or a lit room behind.\n        const o = (y * W + x) * 3, rr = cl(round(y * 0.3 + 4), 0, GY - 1) * 3;\n        let on = P.on[k] ? hash(k, b * 7 + 1) \u003c 0.92 : hash(k, b * 7 + 3) \u003c 0.1 + 0.6 * night;\n        if (on && P.on[k] && P.onT[k] \u003c 0.5) on = hash(k * 13 + b, floor(P.onT[k] * 22)) > 0.45;\n        const lc = hash(k, b + 40) \u003c 0.75 ? [255, 184, 88] : [200, 228, 255], a = on ? 0.9 + 0.1 * night : 0;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(row[rr + c] * 0.42 + c * 5, lc[c], a) * (ry === 2 ? 1.12 : 1);\n      } else {\n        // An open floor: dark inside, the back columns, a work lamp at night.\n        if (night > 0.05 && bx === 2 && ry === 2 && hash(k, b) \u003c 0.6) put(x, y, [255, 214, 150].map((v) => v * night));\n        else sur(x, y, 60, 54, 52, bx === 2 ? 0.6 : 0.28);\n      }\n    }\n  }\n  // Ties from the mast to the frame.\n  for (let k = 2; k \u003c n; k += 3) for (let x = BX1 + 1; x \u003c MX - 2; x++) sur(x, GY - (k + 1) * FH + 1, 200, 170, 60);\n\n  // The floor on the deck: starter bars, the core panel, the rebar cages, the formwork.\n  const top = dk - FH, st = P.top ? 0 : P.stage;\n  if (st > 0) for (let y = top + 1; y \u003c dk; y++) for (let x = BX0 + 30; x \u003c= BX0 + 34; x++) sur(x, y, 176, 172, 164, x === BX0 + 32 ? 0.8 : 1);\n  for (let ci = 0; ci \u003c 6; ci++) {\n    const x = BX0 + ci * 7;\n    for (let j = 1; j \u003c= max(2, st > 1 ? round(P.cage * 5) : 0); j++) sur(x, dk - j, 176, 96, 50), j & 1 && sur(x + 1, dk - j, 130, 76, 44);\n    if (st > 2 && ci / 6 \u003c P.form) for (let j = 1; j \u003c FH; j++) sur(x, dk - j, 218, 162, 84), sur(x + 1, dk - j, 196, 140, 70);\n  }\n  if (st > 2) for (let x = BX0; x \u003c= BX0 + 36 * P.form; x++) for (let j = 0; j \u003c ((x - BX0) % 7 === 4 ? FH : 1); j++) j ? sur(x, top + j, 150, 150, 156, 0.8) : sur(x, top, 214, 156, 80);\n  if (P.pourX >= 0 && !P.top) for (let x = BX0; x \u003c= min(BX1, P.pourX); x++) sur(x, top, 140, 140, 150), (x - BX0) % 7 \u003c 2 && sur(x, top + 1, 140, 140, 150, 0.9);\n  if (P.item > 0) drawLoad(P.item, P.ix, dk - LH[P.item]);\n  // Topped out: a little fir tree on the roof.\n  if (P.top) for (let j = 0; j \u003c 5; j++) for (let i = -j; i \u003c= j; i++) sur(24 + i, dk - 6 + j, 40, 120, 60);\n  // The workers on the deck in hi-vis, and the welder by a column.\n  for (const w of P.wk) man(w.x, dk - 1);\n  man(17, dk - 1, [60, 60, 70]);\n}\n\n// One of the four loads, centred on x with its top on row y0.\nfunction drawLoad(type, cx, y0) {\n  const w = LW[type], h = LH[type], x0 = round(cx - w / 2), y = round(y0);\n  for (let j = 0; j \u003c h; j++)\n    for (let i = 0; i \u003c w; i++) {\n      const X = x0 + i, Y = y + j;\n      if (type === 0) (i \u003c 2 || i > 4 || !j || j > 3) && sur(X, Y, 150, 146, 140, i && j ? 1 : 1.25);\n      else if (type === 1) sur(X, Y, i === 2 || i === 8 ? 60 : 186, i === 2 || i === 8 ? 54 : 92, 48, j ? 0.72 : 1);\n      else if (type === 2) sur(X, Y, 226, 170, 92, j & 1 ? 0.55 : 1);\n      else if (i >= (j >= h - 2 ? 1 : 0) && i \u003c w - (j >= h - 2 ? 1 : 0)) sur(X, Y, 120, 120, 128, j === 1 ? 0.6 : j === 0 ? 1.3 : 1);\n    }\n  if (type === 3) sur(x0 + 2, y + h, 70, 70, 76);\n}\n\n// The hook block, its cable and slings, and whatever it carries.\nfunction hook(P) {\n  const [tx, ty] = tip(P), hx = tx + P.swx, hy = P.hy;\n  line(tx, ty + 1, hx, hy - 1, [120, 120, 130], 0.9);\n  for (let i = -1; i \u003c= 1; i++) surc(hx + i, hy - 1, YEL);\n  sur(hx, hy, 60, 60, 66), sur(hx, hy + 1, 90, 90, 96);\n  if (P.load >= 0) {\n    const w = LW[P.load] / 2 - 0.5;\n    line(hx, hy + 1, hx - w, hy + 3, [110, 110, 116], 0.8), line(hx, hy + 1, hx + w, hy + 3, [110, 110, 116], 0.8);\n    drawLoad(P.load, hx + 0.5, hy + 3);\n    // Concrete runs from the bucket into the forms.\n    if (P.ph === \"P\" || P.ph === \"I\") for (let j = hy + 10; j \u003c deckY(P) - FH; j++) sur(hx + 0.5, j, 140, 140, 150);\n  }\n}\n\n// The yard: stock waiting by the crane, the load being rigged, the floodlight tower.\nfunction yard(P) {\n  drawLoad(2, 53, 115), drawLoad(1, 54, 118);\n  if (P.ph === \"A\" || P.ph === \"B\") {\n    const s = P.stage, x = MX + PICK_R - LW[s] / 2 - 2, arm = P.ph === \"B\" ? (P.pt * 6) & 1 : 0;\n    drawLoad(s, MX + PICK_R + 0.5, PICK_Y - LH[s]);\n    man(x, PICK_Y - 1), sur(x + 1, PICK_Y - 2 - arm, 255, 130, 20);\n  }\n  for (let y = LY; y \u003c 122; y++) sur(62, y, 120, 120, 126);\n  const fon = sm(0.3, 0.55, P.h);\n  for (let x = 59; x \u003c= 62; x++) put(x, 83, [90, 90, 96]), put(x, 84, x \u003c 62 ? [70 + 185 * fon, 70 + 180 * fon, 76 + 154 * fon] : [90, 90, 96]);\n}\n\n// The crane: mast, ties, slewing ring, cab, tower head, jib and counter-jib.\nfunction crane(P) {\n  const c = cos(P.th), sn = sin(P.th), blink = P.rt % 1.2 \u003c 0.55, fon = sm(0.3, 0.55, P.h);\n  const jib = () => {\n    for (let s = 0; s \u003c= JL; s += 0.3) {\n      // Swung towards you the tip is nearer and bigger, swung away it shrinks.\n      const sc = 1 + (0.45 * s * sn) / JL, px = MX + s * c, py = JY - s * sn * 0.1, ht = (3 - (1.2 * s) / JL) * sc, tri = abs(((s / 2.4) % 2) - 1), wd = sn * 1.2 * sc;\n      surc(px - wd, py, YEL, 0.85), surc(px + wd, py, YEL, 0.85), surc(px, py - ht, YEL), surc(px + wd * (1 - tri), py - tri * ht, YEL, 0.75);\n    }\n  };\n  const counter = () => {\n    for (let s = 0; s \u003c= CJL; s += 0.3) {\n      const px = MX - s * c, py = JY + s * sn * 0.1;\n      surc(px, py, YEL, 0.85), surc(px, py - 1, YEL, s % 2 \u003c 0.6 ? 0.8 : 0);\n      if (s > 6 && s \u003c 8.5) for (let j = 1; j \u003c= 2; j++) sur(px, py - 1 - j, 80, 84, 92);\n      if (s > CJL - 5) for (let j = 1; j \u003c= 4; j++) sur(px, py + j, 190, 184, 172, (floor(s) & 1) === 0 ? 0.8 : 1);\n    }\n  };\n  const pend = () => {\n    line(MX, APEX + 1, MX + 28 * c, JY - 28 * sn * 0.1 - 2.2, [110, 104, 96], 0.8);\n    line(MX, APEX + 1, MX - CJL * c, JY + CJL * sn * 0.1 - 1, [110, 104, 96], 0.8);\n  };\n  const cab = () => {\n    for (let q = 0, i, j; q \u003c 12; q++)\n      (i = (q % 3) - 1), (j = (q / 3) | 0), j % 3 && i > -1 ? put(MX + 3.5 * c + i, JY + 1 + j, P.h > 0.5 ? [255 * fon, 226 * fon, 160 * fon] : [110, 150, 196]) : surc(MX + 3.5 * c + i, JY + 1 + j, [240, 232, 210]);\n  };\n  // What faces away is drawn first.\n  if (sn \u003c 0) jib(), pend(), cab();\n  else counter(), pend();\n  // The mast: two chords and a lattice of diagonals.\n  for (let y = JY + 3; y \u003c 118; y++) {\n    surc(MX - 2, y, YEL, 0.72), surc(MX + 2, y, YEL);\n    for (let xi = 1; xi \u003c= 3; xi++) if (((y + xi) & 3) === 0 || ((y - xi) & 3) === 0) surc(MX - 2 + xi, y, YEL, 0.8);\n  }\n  for (let x = MX - 4; x \u003c= MX + 4; x++) sur(x, 117, 170, 166, 160), sur(x, 118, 170, 166, 160), sur(x, 119, 170, 166, 160), abs(x - MX) \u003c 4 && (sur(x, JY + 1, 80, 80, 86), sur(x, JY + 2, 110, 110, 116));\n  // The tower head.\n  for (let y = APEX; y \u003c= JY - 3; y++) {\n    const hw = (1.6 * (y - APEX)) / (JY - 3 - APEX);\n    surc(MX - hw, y, YEL), surc(MX + hw, y, YEL);\n    if ((y & 1) === 0) for (let x = round(MX - hw); x \u003c= MX + hw; x++) surc(x, y, YEL, 0.8);\n  }\n  if (sn \u003c 0) counter(), pend();\n  else jib(), pend(), cab();\n  // The trolley, and the warning lights on the head and at the jib tip.\n  const [tx, ty] = tip(P);\n  sur(tx - 1, ty, 90, 90, 96), sur(tx, ty, 90, 90, 96), sur(tx + 1, ty, 90, 90, 96);\n  for (const [x, y] of [[MX, APEX - 1], [MX + JL * c, JY - JL * sn * 0.1 - 2]]) {\n    put(x, y, blink ? [255, 40, 28] : [110, 20, 16]);\n    if (blink) glow(x, y, [255, 30, 20], 0.12 + 0.3 * fon);\n  }\n}\n\n// The mixer, its drum turning.\nfunction mixer(P) {\n  const x0 = round(P.mix), night = sm(0.4, 0.9, P.h);\n  if (x0 \u003c -24) return;\n  for (let y = 115; y \u003c= 121; y++)\n    for (let i = 0; i \u003c 13; i++) {\n      const e = ((i - 6) / 6.8) ** 2 + ((y - 118 + (i - 6) * 0.18) / 3.4) ** 2;\n      if (e \u003c 1) sur(x0 + i, y, ...((((i * 0.7 + y * 1.4 - P.t * 9) % 4) + 4) % 4 \u003c 2 ? [240, 120, 40] : [230, 228, 220]), 1 - 0.3 * e);\n    }\n  for (let i = 0; i \u003c 20; i++) sur(x0 + i, 122, 70, 70, 76);\n  for (let y = 116; y \u003c 122; y++) for (let i = 15; i \u003c 20; i++) sur(x0 + i, y, ...(y \u003c 119 && i > 16 ? [110, 150, 190] : [230, 60, 40]));\n  for (const i of [2, 5, 16]) sur(x0 + i, 123, 30, 30, 34), sur(x0 + i + 1, 123, 30, 30, 34);\n  if (night > 0.1) add(x0 + 20, 120, [255, 240, 200], night);\n}\n\nfunction cars(P) {\n  const night = sm(0.35, 0.9, P.h), cols = [[200, 40, 36], [220, 220, 226], [40, 80, 170], [60, 64, 70]];\n  for (const [cx, v, ci] of P.cars) {\n    const x0 = round(cx), fx = v > 0 ? x0 + 6 : x0;\n    for (let i = 0; i \u003c 21; i++) i \u003c 14 ? surc(x0 + (i >> 1), 125 + (i & 1), cols[ci]) : i \u003c 17 && sur(x0 + i - 12, 124, 120, 150, 180);\n    add(fx, 125, [255, 250, 220], 0.3 + night), add(x0 + 6 - fx + x0, 125, [255, 20, 10], 0.2 + night);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  const hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  // The hook goes behind the frame when the jib swings away from you.\n  const behind = sin(P.th) \u003c -0.15, y = deckY(P) - 2, FLb = P.fl;\n  sky(P, K), clouds(P, K), light(P, K), ground(), behind && hook(P), building(P), yard(P), crane(P), mixer(P), cars(P), behind || hook(P);\n  // The welding arc, its sparks, and the floodlight beams in the dusk air.\n  if (P.welding) put(18, y, [235, 244, 255]), glow(18, y, [160, 190, 255], 0.36 + 0.24 * rnd());\n  for (const [x, y, , , l, px, py] of P.sp) put(px, py, [255, 120, 30], min(1, l * 1.4) * 0.6), put(x, y, [255, 170 + 80 * min(1, l), 70 * min(1, l)], min(1, l * 1.4));\n  if (P.h > 0.3) for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (FLb[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += FLb[i] * 22 * FLC[c];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower."},{"name":"Floors","min":9,"max":13,"about":"How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof."},{"name":"Wind","min":-1,"max":1,"about":"Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable."}],"start":[0,2,9,0.06],"measures":{"motion":0.1573,"detail":0.0705,"edges":0.403,"complexity":1.4462,"coverage":0.9851,"colour":0.2925,"drift":0.0434},"knobResponse":[0.3747,0.0499,0.0453,0.0999]},{"slug":"train-window","title":"Train Window","family":"space","round":17,"note":"달리는 기차 창밖이 층층이 흘러요. 먼 구름과 산은 느리게, 들판과 농가는 빠르게 지나가고 전차선 기둥은 휙 스쳐요. 깎은 비탈이 다가오면 터널이 창을 검게 덮고 나트륨등이 줄을 그으며 지나가요.","idea":"The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-train-window","type":"code","name":"train-window","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Time","min":0,"max":1,"about":"The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3."},{"name":"Hills","min":0,"max":1,"about":"At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds."},{"name":"Rain","min":0,"max":1,"about":"Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded."}],"start":[0,2,0,0.06],"measures":{"motion":0.6601,"detail":0.0493,"edges":0.717,"complexity":0.2041,"coverage":0.8669,"colour":0.2389,"drift":0.3599},"knobResponse":[0.2716,0.0947,0.2843,0.1097]},{"slug":"truchet","title":"Truchet","family":"geometry","round":1,"note":"타일마다 같은 사분원 둘이 있어요. 한 장을 90도 돌리면 길 둘이 하나로 이어지거나 하나가 둘로 끊겨요.","idea":"Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.","buttons":"K1 tap turns a quarter of the tiles at once.","code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-truchet","type":"code","name":"truchet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the path colours around the colour wheel."},{"name":"Flip Rate","min":0,"max":5,"about":"How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them."},{"name":"Tile","min":8,"max":20,"about":"Tile size in LEDs; small is a dense meander, large a few wide loops."},{"name":"Thickness","min":0,"max":1,"about":"Line width, from a thin wire to fat ribbons with small dark holes between them."}],"start":[0,2,8,0.06],"measures":{"motion":0.3464,"detail":0.1313,"edges":0.5615,"complexity":1.2014,"coverage":0.7147,"colour":0.3084,"drift":0.0597},"knobResponse":[0.1766,0.0939,0.1747,0.1431]},{"slug":"tunnel","title":"Tunnel","family":"space","round":1,"note":"가운데서 떨어진 거리로 나누면 평평한 체크무늬가 날아 들어가는 관이 돼요.","idea":"Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.","buttons":"K1 tap throws the far end of the tube to a new place.","code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","layer":{"id":"layer-tunnel","type":"code","name":"tunnel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the near rings; the far ones drift round the wheel from it."},{"name":"Speed","min":-3,"max":8,"about":"Flying forward, and below 0 backing out of the tube."},{"name":"Twist","min":-1,"max":1,"about":"Winds the tiles into a spiral, either way round."},{"name":"Tiles","min":8,"max":24,"about":"How many tiles go round the tube."}],"start":[0,2,0,8],"measures":{"motion":2.5151,"detail":0.0531,"edges":0.4689,"complexity":0.9004,"coverage":0.8993,"colour":0.486,"drift":0.3919},"knobResponse":[0.376,0.2448,0.256,0.2505]},{"slug":"turntables","title":"Turntables","family":"music","round":18,"note":"DJ 의 턴테이블 두 대가 믹서 띠를 사이에 두고 위아래로 서요. 판은 가만히 있는 방 불빛 아래에서 돌며 홈을 드러내고, DJ 는 기다리는 판을 손으로 잡았다가 킥에 맞춰 놓고 크로스페이더를 넘겨요. K2 Pitch 를 0 에 두면 플래터 테두리의 안쪽 스트로브 점이 멈춰 서요.","idea":"Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","layer":{"id":"layer-turntables","type":"code","name":"turntables","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light."},{"name":"Pitch","min":-8,"max":8,"about":"Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back."},{"name":"Scratch","min":0,"max":1,"about":"How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke."},{"name":"Light","min":0,"max":1,"about":"Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat."}],"start":[0,2,0,0.06],"measures":{"motion":0.2259,"detail":0.0842,"edges":0.4014,"complexity":1.294,"coverage":0.7108,"colour":0.1698,"drift":0.051},"knobResponse":[0.0432,0.0432,0.0448,0.0571]},{"slug":"typewriter","title":"Typewriter","family":"type","round":18,"note":"수동 타자기가 시 두 편을 3×5 픽셀 글자로 한 자씩 쳐요. 칠 때마다 활자대가 리본을 지나 튀어 올라 글자를 찍고 종이가 한 칸 왼쪽으로 밀리며, 줄 끝에서 벨이 번쩍이면 캐리지가 오른쪽으로 돌아오며 종이를 한 줄 올려요. K4 를 돌리면 리본이 닳아 글자가 옅어지고, 빨간 반쪽으로 치는 낱말이 늘어요.","idea":"A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","layer":{"id":"layer-typewriter","type":"code","name":"typewriter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet."},{"name":"Speed","min":0.2,"max":3,"about":"Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven."},{"name":"Spacing","min":1,"max":2,"about":"The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows)."},{"name":"Ribbon","min":0,"max":1,"about":"At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words."}],"start":[0,2,1,0.06],"measures":{"motion":0.4854,"detail":0.1156,"edges":0.8353,"complexity":0.7724,"coverage":0.9016,"colour":0.0948,"drift":0.1684},"knobResponse":[0.084,0.1398,0.167,0.0481]},{"slug":"veiled-lady","title":"Veiled Lady","family":"fungi","round":20,"note":"동트기 전 열대 숲 바닥을 손전등으로 비춘 망태버섯 타임랩스예요. 낙엽 속 흰 알이 터져 대가 패널 높이만큼 솟고, 올리브색 갓 밑에서 흰 레이스 망사가 낙엽 가까이까지 내려와요. 파리가 꼬였던 버섯이 시들어 쓰러지면 옆에서 다음 알이 부풀고, K1 을 돌리면 손전등이 UV 로 바뀌어 망사가 청록으로 빛나요.","idea":"A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.","buttons":"K1 tap starts a new egg now.","code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-veiled-lady","type":"code","name":"veiled-lady","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Torch","min":0,"max":1,"about":"A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower."},{"name":"Veil","min":0,"max":1,"about":"At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves."},{"name":"Rain","min":0,"max":1,"about":"Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net."}],"start":[0,2,0,0.06],"measures":{"motion":0.1497,"detail":0.0791,"edges":0.3662,"complexity":1.7099,"coverage":0.5698,"colour":0.1244,"drift":0.0576},"knobResponse":[0.0782,0.0485,0.0482,0.0673]},{"slug":"velvet-nap","title":"Velvet Nap","family":"cosmetic","round":34,"note":"판 전체가 에메랄드 무광 벨벳이고, 보이지 않는 손끝 둘이 천천히 글씨를 쓰듯 결을 쓸어요. 빛 쪽으로 밀린 결은 짙고 깊은 색으로, 빛을 따라 누운 결은 옅은 은빛으로 남아 서로 겹쳐 덮이고, 7초마다 손바닥이 22 LED 너비 띠를 위에서 아래로 쓸어 결을 한 방향으로 눕혀요.","idea":"The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.","buttons":"K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.","code":"// ===== Patternflow pattern =====\n// Title:   Velvet Nap\n// Family:  cosmetic\n// Idea:    The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the matte velvet of flocked compacts and velvet lip tints\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1\n//\n// Knob 1: Hue. The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive.\n// Knob 2: Speed. At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Width. The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel.\n// Knob 4: Pile. The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain.\n// Buttons: K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, round, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The pile of each LED is a vector in the plane of the cloth: its direction\n// is where the fibres lean, its length how far they lean, 0 upright and 1 as\n// far over as the pile goes. A palm lays it straight down the panel.\nconst PALM = 0.85;\n// The light comes from the left and a little below, 22 degrees above the\n// cloth, and sways 29 degrees either way every 12 seconds.\nconst ELEV = (22 * PI) / 180, LAZ = PI - 0.36, SWAY = 0.5;\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, width: 0, pile: 0.06, warm: false, clock: 0, palmT: 0, palmY: -99, palmX: 32, flat: 0,\n    qx: new Float32Array(N), qy: new Float32Array(N),\n    ga: new Float32Array(N), gl: new Float32Array(N), gb: new Float32Array(N),\n    fingers: [], c: [0, 0, 0], d: [0, 0, 0],\n  });\n  for (let p = 0; p \u003c N; p++) {\n    S.qy[p] = PALM;\n    // The fibre grain: each LED's tuft leans a little off the brushed way,\n    // a little more or less, and holds a little more or less dye.\n    S.ga[p] = (random() - 0.5) * 0.3;\n    S.gl[p] = 1 + (random() - 0.5) * 0.16;\n    S.gb[p] = 1 + (random() - 0.5) * 0.05;\n  }\n  for (let i = 0; i \u003c 2; i++) S.fingers.push(newFinger(i));\n}\n\n// The two fingers start one in each half of the panel.\nfunction newFinger(i) {\n  return {\n    x: 10 + random() * 44, y: (i + 0.15 + random() * 0.7) * 64, hd: random() * 2 * PI, turn: 0,\n    down: true, t: random() * 1.5, len: 1.2 + random() * 1.8,\n  };\n}\n\n// One finger, one step: it curves as it goes and steers away from the edges.\n// A stroke lasts 1.2 to 3 seconds, then the finger lifts for 0.2 to 0.5\n// seconds and comes down somewhere else.\nfunction moveFinger(S, f, ds) {\n  f.t += ds;\n  if (!f.down) {\n    if (f.t >= f.len) {\n      f.down = true;\n      f.t = 0;\n      f.len = 1.2 + random() * 1.8;\n      // It comes down where the velvet is least written: the best of four\n      // tries, scored by how far the pile round each is from the palm's.\n      let best = 1e9;\n      for (let k = 0; k \u003c 4; k++) {\n        const x = 6 + random() * (W - 13), y = 6 + random() * (H - 13);\n        let sc = 0;\n        for (let v = -9; v \u003c= 9; v += 3)\n          for (let u = -9; u \u003c= 9; u += 3) {\n            const p = cl(round(y + v), 0, H - 1) * W + cl(round(x + u), 0, W - 1);\n            sc += Math.abs(S.qx[p]) + Math.abs(S.qy[p] - PALM);\n          }\n        if (sc \u003c best) (best = sc), (f.x = x), (f.y = y);\n      }\n      f.hd = random() * 2 * PI;\n      f.turn = (random() - 0.5) * 3;\n    }\n    return false;\n  }\n  if (f.t >= f.len) {\n    f.down = false;\n    f.t = 0;\n    f.len = 0.2 + random() * 0.3;\n    return false;\n  }\n  f.turn += (random() - 0.5) * 14 * ds - f.turn * 0.8 * ds;\n  f.turn = cl(f.turn, -2.6, 2.6);\n  // Steer back towards the middle near an edge.\n  const mx = 10, cx = f.x \u003c mx ? 1 : f.x > W - 1 - mx ? -1 : 0, cy = f.y \u003c mx ? 1 : f.y > H - 1 - mx ? -1 : 0;\n  if (cx || cy) {\n    const want = atan2(cy || (32 - f.y) * 0.01, cx || (32 - f.x) * 0.01);\n    let dh = want - f.hd;\n    dh -= 2 * PI * Math.round(dh / (2 * PI));\n    f.turn += dh * 4 * ds;\n  }\n  f.hd += f.turn * ds;\n  return true;\n}\n\n// Brush the pile under the fingertip towards the way it moves.\nfunction brush(S, x, y, dx, dy, r) {\n  const r2 = (r + 1) * (r + 1);\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, y + r + 1); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, x + r + 1); xx++) {\n      const ex = xx - x, ey = yy - y, e2 = ex * ex + ey * ey;\n      if (e2 > r2) continue;\n      const w = 0.55 * (1 - sm(0.45 * r, r + 0.6, sqrt(e2))), p = yy * W + xx;\n      S.qx[p] += (dx - S.qx[p]) * w;\n      S.qy[p] += (dy - S.qy[p]) * w;\n    }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp, r = 2.2 + 3.6 * S.width, v = 26;\n  S.clock += ds;\n  for (const f of S.fingers) {\n    if (!moveFinger(S, f, ds)) continue;\n    const dx = cos(f.hd), dy = sin(f.hd), dist = v * ds, n = Math.max(1, Math.ceil(dist / 0.7));\n    for (let i = 0; i \u003c n; i++) {\n      f.x += (dx * dist) / n;\n      f.y += (dy * dist) / n;\n      brush(S, f.x, f.y, dx, dy, r);\n    }\n  }\n  // Every 7 seconds a palm strokes down one band 22 LEDs wide, from the\n  // top edge to the bottom in 1.6 seconds, and lays its pile straight down.\n  S.palmT += ds;\n  if (S.palmT >= 7) {\n    S.palmT -= 7;\n    S.palmY = -14;\n    S.palmX = 11 + random() * 42;\n  }\n  if (S.palmY > -50 && S.palmY \u003c H + 14) {\n    const y0 = S.palmY;\n    S.palmY += (156 / 1.6) * ds;\n    const ym = (y0 + S.palmY) / 2;\n    for (let y = max(0, floor(y0 - 12)); y \u003c= min(H - 1, S.palmY + 12); y++) {\n      const wy = 1 - sm(4, 12, Math.abs(y - ym));\n      if (wy \u003c= 0) continue;\n      for (let x = max(0, floor(S.palmX - 13)); x \u003c= min(W - 1, S.palmX + 13); x++) {\n        const w = 0.5 * wy * (1 - sm(7, 12, Math.abs(x - S.palmX))), p = y * W + x;\n        S.qx[p] += (0 - S.qx[p]) * w;\n        S.qy[p] += (PALM - S.qy[p]) * w;\n      }\n    }\n  }\n  if (S.flat > 0) {\n    S.flat -= ds;\n    for (let p = 0; p \u003c N; p++) {\n      S.qx[p] += (0 - S.qx[p]) * 0.2;\n      S.qy[p] += (PALM - S.qy[p]) * 0.2;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.width = cl(k[2], 0, 1);\n  S.pile = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on velvet that has been written on for fourteen seconds, with the\n    // next palm due 2.5 seconds in.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 420; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.palmT = 4.5;\n    S.palmY = -99;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.flat = 0.5;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, dcol = S.d;\n  // Pile length: a short nap leans 36 degrees when brushed and its sheen is\n  // broad; a long plush one leans 72 degrees with a tight bright sheen.\n  const u = (S.pile + 1) / 2, bmax = ((36 + 36 * u) * PI) / 180, pex = 3 + 4 * u;\n  const az = LAZ + SWAY * sin((2 * PI * S.clock) / 12);\n  const lx = cos(az) * cos(ELEV), ly = sin(az) * cos(ELEV), lz = sin(ELEV);\n  const h0 = S.hue + 0.42, hh = h0 - floor(h0);\n  // Orange, gold and chartreuse velvet read rust, mustard or olive at the\n  // body's level, so there the body is lifted towards 0.8 and its darker\n  // faces lean to ruby.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.24, 0.34, hh));\n  // The sheen is a pale tint of the dye.\n  hsv(h0, 0.18, 1, dcol);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const qx = S.qx[p], qy = S.qy[p];\n      let m = sqrt(qx * qx + qy * qy);\n      const ang = (m > 1e-4 ? atan2(qy, qx) : 0) + S.ga[p];\n      m = min(1, m * S.gl[p]);\n      // The fibre axis t: leaning by beta towards the pile's way.\n      const be = m * bmax, sb = sin(be), cb = cos(be);\n      const tx = sb * cos(ang), ty = sb * sin(ang), tz = cb;\n      const tl = tx * lx + ty * ly + tz * lz, sl = sqrt(max(0, 1 - tl * tl));\n      // Kajiya-Kay for a fibre: the lit side goes with the sine to the\n      // light, and a tuft seen end-on shows less of its side. The sheen is\n      // the reflection cone round the fibre crossing the eye straight ahead.\n      const diff = sl * (0.35 + 0.65 * sb);\n      const spec = pow(max(0, sl * sb - tl * cb), pex);\n      const body = (0.22 + 0.78 * diff) * S.gb[p];\n      const rich = 1 - diff;\n      hsv(h0 - (0.012 + 0.06 * warm) * rich, 0.78 + 0.2 * rich - 0.25 * spec, 1, c);\n      const vb = body * (0.8 + 0.2 * warm) + 0.5 * warm * (1 - body), vs = 0.55 * spec;\n      display.setPixel(\n        x, y,\n        round(255 * min(1, c[0] * vb + dcol[0] * vs)),\n        round(255 * min(1, c[1] * vb + dcol[1] * vs)),\n        round(255 * min(1, c[2] * vb + dcol[2] * vs)),\n      );\n    }\n}\n","layer":{"id":"layer-velvet-nap","type":"code","name":"velvet-nap","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Velvet Nap\n// Family:  cosmetic\n// Idea:    The whole panel is matte velvet under a low light from the left that sways slowly, and two unseen fingertips wander over it in slow strokes, brushing the pile their own way: trails turn dark and rich where the pile is pushed towards the light and pale and silvery where it lies away from it, and cross and overwrite each other like writing on suede, while every few seconds a palm strokes one band from top to bottom so its pile lies one way again.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 34, after the matte velvet of flocked compacts and velvet lip tints\n// Round:   34\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1\n//\n// Knob 1: Hue. The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive.\n// Knob 2: Speed. At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again.\n// Knob 3: Width. The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel.\n// Knob 4: Pile. The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain.\n// Buttons: K1 tap lays a palm on the whole panel at once: in about half a second every trail is smoothed away and the pile lies straight down again.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, min, max, sqrt, sin, cos, atan2, round, pow, random, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  out[0] = rgb[0];\n  out[1] = rgb[1];\n  out[2] = rgb[2];\n}\n\n// The pile of each LED is a vector in the plane of the cloth: its direction\n// is where the fibres lean, its length how far they lean, 0 upright and 1 as\n// far over as the pile goes. A palm lays it straight down the panel.\nconst PALM = 0.85;\n// The light comes from the left and a little below, 22 degrees above the\n// cloth, and sways 29 degrees either way every 12 seconds.\nconst ELEV = (22 * PI) / 180, LAZ = PI - 0.36, SWAY = 0.5;\n\nexport function setup(params) {\n  const S = (params.s = {\n    hue: 0, speed: 2, width: 0, pile: 0.06, warm: false, clock: 0, palmT: 0, palmY: -99, palmX: 32, flat: 0,\n    qx: new Float32Array(N), qy: new Float32Array(N),\n    ga: new Float32Array(N), gl: new Float32Array(N), gb: new Float32Array(N),\n    fingers: [], c: [0, 0, 0], d: [0, 0, 0],\n  });\n  for (let p = 0; p \u003c N; p++) {\n    S.qy[p] = PALM;\n    // The fibre grain: each LED's tuft leans a little off the brushed way,\n    // a little more or less, and holds a little more or less dye.\n    S.ga[p] = (random() - 0.5) * 0.3;\n    S.gl[p] = 1 + (random() - 0.5) * 0.16;\n    S.gb[p] = 1 + (random() - 0.5) * 0.05;\n  }\n  for (let i = 0; i \u003c 2; i++) S.fingers.push(newFinger(i));\n}\n\n// The two fingers start one in each half of the panel.\nfunction newFinger(i) {\n  return {\n    x: 10 + random() * 44, y: (i + 0.15 + random() * 0.7) * 64, hd: random() * 2 * PI, turn: 0,\n    down: true, t: random() * 1.5, len: 1.2 + random() * 1.8,\n  };\n}\n\n// One finger, one step: it curves as it goes and steers away from the edges.\n// A stroke lasts 1.2 to 3 seconds, then the finger lifts for 0.2 to 0.5\n// seconds and comes down somewhere else.\nfunction moveFinger(S, f, ds) {\n  f.t += ds;\n  if (!f.down) {\n    if (f.t >= f.len) {\n      f.down = true;\n      f.t = 0;\n      f.len = 1.2 + random() * 1.8;\n      // It comes down where the velvet is least written: the best of four\n      // tries, scored by how far the pile round each is from the palm's.\n      let best = 1e9;\n      for (let k = 0; k \u003c 4; k++) {\n        const x = 6 + random() * (W - 13), y = 6 + random() * (H - 13);\n        let sc = 0;\n        for (let v = -9; v \u003c= 9; v += 3)\n          for (let u = -9; u \u003c= 9; u += 3) {\n            const p = cl(round(y + v), 0, H - 1) * W + cl(round(x + u), 0, W - 1);\n            sc += Math.abs(S.qx[p]) + Math.abs(S.qy[p] - PALM);\n          }\n        if (sc \u003c best) (best = sc), (f.x = x), (f.y = y);\n      }\n      f.hd = random() * 2 * PI;\n      f.turn = (random() - 0.5) * 3;\n    }\n    return false;\n  }\n  if (f.t >= f.len) {\n    f.down = false;\n    f.t = 0;\n    f.len = 0.2 + random() * 0.3;\n    return false;\n  }\n  f.turn += (random() - 0.5) * 14 * ds - f.turn * 0.8 * ds;\n  f.turn = cl(f.turn, -2.6, 2.6);\n  // Steer back towards the middle near an edge.\n  const mx = 10, cx = f.x \u003c mx ? 1 : f.x > W - 1 - mx ? -1 : 0, cy = f.y \u003c mx ? 1 : f.y > H - 1 - mx ? -1 : 0;\n  if (cx || cy) {\n    const want = atan2(cy || (32 - f.y) * 0.01, cx || (32 - f.x) * 0.01);\n    let dh = want - f.hd;\n    dh -= 2 * PI * Math.round(dh / (2 * PI));\n    f.turn += dh * 4 * ds;\n  }\n  f.hd += f.turn * ds;\n  return true;\n}\n\n// Brush the pile under the fingertip towards the way it moves.\nfunction brush(S, x, y, dx, dy, r) {\n  const r2 = (r + 1) * (r + 1);\n  for (let yy = max(0, floor(y - r - 1)); yy \u003c= min(H - 1, y + r + 1); yy++)\n    for (let xx = max(0, floor(x - r - 1)); xx \u003c= min(W - 1, x + r + 1); xx++) {\n      const ex = xx - x, ey = yy - y, e2 = ex * ex + ey * ey;\n      if (e2 > r2) continue;\n      const w = 0.55 * (1 - sm(0.45 * r, r + 0.6, sqrt(e2))), p = yy * W + xx;\n      S.qx[p] += (dx - S.qx[p]) * w;\n      S.qy[p] += (dy - S.qy[p]) * w;\n    }\n}\n\nfunction step(S, d) {\n  const sp = S.speed / 2, ds = d * sp, r = 2.2 + 3.6 * S.width, v = 26;\n  S.clock += ds;\n  for (const f of S.fingers) {\n    if (!moveFinger(S, f, ds)) continue;\n    const dx = cos(f.hd), dy = sin(f.hd), dist = v * ds, n = Math.max(1, Math.ceil(dist / 0.7));\n    for (let i = 0; i \u003c n; i++) {\n      f.x += (dx * dist) / n;\n      f.y += (dy * dist) / n;\n      brush(S, f.x, f.y, dx, dy, r);\n    }\n  }\n  // Every 7 seconds a palm strokes down one band 22 LEDs wide, from the\n  // top edge to the bottom in 1.6 seconds, and lays its pile straight down.\n  S.palmT += ds;\n  if (S.palmT >= 7) {\n    S.palmT -= 7;\n    S.palmY = -14;\n    S.palmX = 11 + random() * 42;\n  }\n  if (S.palmY > -50 && S.palmY \u003c H + 14) {\n    const y0 = S.palmY;\n    S.palmY += (156 / 1.6) * ds;\n    const ym = (y0 + S.palmY) / 2;\n    for (let y = max(0, floor(y0 - 12)); y \u003c= min(H - 1, S.palmY + 12); y++) {\n      const wy = 1 - sm(4, 12, Math.abs(y - ym));\n      if (wy \u003c= 0) continue;\n      for (let x = max(0, floor(S.palmX - 13)); x \u003c= min(W - 1, S.palmX + 13); x++) {\n        const w = 0.5 * wy * (1 - sm(7, 12, Math.abs(x - S.palmX))), p = y * W + x;\n        S.qx[p] += (0 - S.qx[p]) * w;\n        S.qy[p] += (PALM - S.qy[p]) * w;\n      }\n    }\n  }\n  if (S.flat > 0) {\n    S.flat -= ds;\n    for (let p = 0; p \u003c N; p++) {\n      S.qx[p] += (0 - S.qx[p]) * 0.2;\n      S.qy[p] += (PALM - S.qy[p]) * 0.2;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.width = cl(k[2], 0, 1);\n  S.pile = cl(k[3], -1, 1);\n  if (!S.warm) {\n    // Open on velvet that has been written on for fourteen seconds, with the\n    // next palm due 2.5 seconds in.\n    const sp = S.speed;\n    S.speed = 2;\n    for (let i = 0; i \u003c 420; i++) step(S, 1 / 30);\n    S.speed = sp;\n    S.palmT = 4.5;\n    S.palmY = -99;\n    S.warm = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) S.flat = 0.5;\n  step(S, d);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const c = S.c, dcol = S.d;\n  // Pile length: a short nap leans 36 degrees when brushed and its sheen is\n  // broad; a long plush one leans 72 degrees with a tight bright sheen.\n  const u = (S.pile + 1) / 2, bmax = ((36 + 36 * u) * PI) / 180, pex = 3 + 4 * u;\n  const az = LAZ + SWAY * sin((2 * PI * S.clock) / 12);\n  const lx = cos(az) * cos(ELEV), ly = sin(az) * cos(ELEV), lz = sin(ELEV);\n  const h0 = S.hue + 0.42, hh = h0 - floor(h0);\n  // Orange, gold and chartreuse velvet read rust, mustard or olive at the\n  // body's level, so there the body is lifted towards 0.8 and its darker\n  // faces lean to ruby.\n  const warm = sm(0.0, 0.05, hh) * (1 - sm(0.24, 0.34, hh));\n  // The sheen is a pale tint of the dye.\n  hsv(h0, 0.18, 1, dcol);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const qx = S.qx[p], qy = S.qy[p];\n      let m = sqrt(qx * qx + qy * qy);\n      const ang = (m > 1e-4 ? atan2(qy, qx) : 0) + S.ga[p];\n      m = min(1, m * S.gl[p]);\n      // The fibre axis t: leaning by beta towards the pile's way.\n      const be = m * bmax, sb = sin(be), cb = cos(be);\n      const tx = sb * cos(ang), ty = sb * sin(ang), tz = cb;\n      const tl = tx * lx + ty * ly + tz * lz, sl = sqrt(max(0, 1 - tl * tl));\n      // Kajiya-Kay for a fibre: the lit side goes with the sine to the\n      // light, and a tuft seen end-on shows less of its side. The sheen is\n      // the reflection cone round the fibre crossing the eye straight ahead.\n      const diff = sl * (0.35 + 0.65 * sb);\n      const spec = pow(max(0, sl * sb - tl * cb), pex);\n      const body = (0.22 + 0.78 * diff) * S.gb[p];\n      const rich = 1 - diff;\n      hsv(h0 - (0.012 + 0.06 * warm) * rich, 0.78 + 0.2 * rich - 0.25 * spec, 1, c);\n      const vb = body * (0.8 + 0.2 * warm) + 0.5 * warm * (1 - body), vs = 0.55 * spec;\n      display.setPixel(\n        x, y,\n        round(255 * min(1, c[0] * vb + dcol[0] * vs)),\n        round(255 * min(1, c[1] * vb + dcol[1] * vs)),\n        round(255 * min(1, c[2] * vb + dcol[2] * vs)),\n      );\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Width=0..1, Pile=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the velvet, once round the wheel, the sheen a pale tint of it. At 0 emerald, at 0.2 sapphire, at 0.35 violet, at 0.5 berry, at 0.6 crimson, at 0.68 orange, at 0.76 yellow, at 0.84 lime. From orange to lime the body is lifted towards 0.8 of full brightness and its darker faces lean to ruby, so it never reads rust, mustard or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the fingertips travel 26 LEDs a second in strokes of 1.2 to 3 seconds, lifting for 0.2 to 0.5 seconds between them; a palm strokes down a band every 7 seconds and takes 1.6 seconds over it, and the light sways across and back once every 12 seconds. At 0.2 all of it runs ten times slower, at 3 half as fast again."},{"name":"Width","min":0,"max":1,"about":"The fingertip: a trail about 4 LEDs wide at 0, 7 at 0.5 and 10 at 1, so the writing goes from a fine hand to broad smears that cover most of the panel."},{"name":"Pile","min":-1,"max":1,"about":"The length of the nap. At -1 a short suede nap whose fibres lean only 36 degrees when brushed, with a broad weak sheen, so the trails are faint; at 0 they lean 54 degrees; at 1 a long plush pile leans 72 degrees, the dark trails go deepest and the silvery ones carry a tight sheen that glints with the fibre grain."}],"start":[0,2,0,0.06],"measures":{"motion":0.0497,"detail":0.0465,"edges":0.1077,"complexity":1.9034,"coverage":1,"colour":0.202,"drift":0.1599},"knobResponse":[0.6367,0.0934,0.1478,0.2049]},{"slug":"voronoi","title":"Voronoi","family":"cells","round":2,"note":"흐름을 타고 도는 씨앗마다 가장 가까운 LED 를 제 유리 색으로 칠하고, 조각 사이에 1 LED 납선이 서요. K4 로 거리를 재는 법을 바꾸면 조각 가운데 둥근 유리가 원에서 마름모를 지나 정사각형이 돼요.","idea":"Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.","buttons":"K1 tap reshuffles the glass colours.","code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-voronoi","type":"code","name":"voronoi","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of most of the glass; a few panes take the colours across the wheel from it."},{"name":"Speed","min":0.2,"max":6,"about":"How fast the current carries the seeds round."},{"name":"Cells","min":20,"max":60,"about":"How many panes, from 20 big ones to 60 small ones."},{"name":"Metric","min":0,"max":2,"about":"How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square."}],"start":[0,2,20,0.06],"measures":{"motion":2.0975,"detail":0.1621,"edges":1,"complexity":0.2058,"coverage":0.8378,"colour":0.5986,"drift":0.1196},"knobResponse":[0.4827,0.3489,0.3517,0.1477]},{"slug":"waggle-dance","title":"Waggle Dance","family":"insect","round":24,"note":"관찰 벌통의 벌집 한 장이 패널 높이로 서요. 위에 봉한 꿀, 그 아래 여덟 색 꽃가루 띠와 애벌레 방이 있고, 벌 여든 마리가 기어 다녀요. 아래쪽 빈 벌집에서는 꽃가루를 단 벌이 몸을 흔들며 8 자 춤을 추고 따르는 벌들이 둘러서요. 춤의 각도가 해에서 본 꽃밭의 방향이라 K4 를 돌리면 모든 춤이 같이 돌아요.","idea":"Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.","buttons":"K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.","code":"// ===== Patternflow pattern =====\n// Title:   Waggle Dance\n// Family:  insect\n// Idea:    Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after Karl von Frisch's reading of the honeybee's waggle dance\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1\n//\n// Knob 1: Light. Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see.\n// Knob 2: Speed. At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower.\n// Knob 3: Bees. Eighty to 240; turned up, more walk in from the sides until they hide the comb.\n// Knob 4: Sun. The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass.\n// Buttons: K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Cells six LEDs across the flats, rows five apart (a hexagon squashed by\n// four in a hundred, so every cell is drawn alike); the frame's top bar,\n// its bottom bar and the entrance slot in it.\nconst [CW, RH, TOP, BOT, NC, NR, ENX] = [6, 5, 5, 123, 13, 27, 9];\nconst Y0 = TOP + 2.5;\nconst [EMPTY, HONEY, NECTAR, POLLEN, BROOD, LARVA, EGG] = [0, 1, 2, 3, 4, 5, 6];\nconst [CRAWL, REST, DIP, FOLLOW, DANCE, HOME, EXIT] = [0, 1, 2, 3, 4, 5, 6];\n// Pollen: orange, yellow, ochre, rust, purple-grey, buff, olive, red-orange.\nconst POLLENS = [[0.95, 0.52, 0.08], [0.95, 0.8, 0.16], [0.74, 0.54, 0.17], [0.6, 0.25, 0.1],\n  [0.44, 0.37, 0.5], [0.86, 0.68, 0.36], [0.55, 0.58, 0.24], [0.9, 0.4, 0.12]];\n// Bees: a dark race, the usual, a golden one. Thorax, then the amber bands.\nconst THX = [[0.5, 0.37, 0.2], [0.78, 0.56, 0.24], [0.9, 0.68, 0.3]];\nconst AMB = [[0.62, 0.44, 0.18], [1, 0.72, 0.2], [1, 0.84, 0.32]];\nconst [DARK, HEAD, WING] = [[0.3, 0.18, 0.08], [0.14, 0.1, 0.06], [0.8, 0.84, 0.9]];\nconst [SUNC, DAYC, WARM, REDC] = [[1, 0.84, 0.56], [1, 0.94, 0.82], [1, 0.66, 0.34], [1, 0.09, 0.035]];\n// Where the flowers lie, against the main field, and how often foragers come from each.\nconst FIELDS = [0, 0, 0.95, -1.9];\n\nconst { min, max, sin, cos, abs, sqrt, floor, round, exp, atan2, PI } = Math;\nconst len = (a, b) => sqrt(a * a + b * b);\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst wrap = (a) => a - 2 * PI * round(a / (2 * PI));\nconst rnd = () => Math.random();\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Distance from a cell's centre in its own hexagon, 3 on the wall.\nconst hexd = (dx, dy) => max(abs(dx), abs(0.5 * dx + 0.9 * dy), abs(0.5 * dx - 0.9 * dy));\nconst cellX = (r, c) => CW * (c - 1) + (r & 1 ? 3.5 : 0.5);\nconst cellY = (r) => Y0 + (r - 1) * RH;\nconst cap = (t) => t === BROOD || t === HONEY;\n\n// Which cell each LED sits in, and where in it.\nfunction grid(S) {\n  for (let y = TOP; y \u003c BOT; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r0 = round((y + 0.5 - Y0) / RH) + 1;\n      let [best, next] = [99, 99];\n      const p = y * W + x;\n      for (let r = max(0, r0 - 1); r \u003c= min(NR - 1, r0 + 1); r++) {\n        const off = r & 1 ? 3.5 : 0.5;\n        const c0 = round((x + 0.5 - off) / CW) + 1;\n        for (let c = max(0, c0 - 1); c \u003c= min(NC - 1, c0 + 1); c++) {\n          const dx = x + 0.5 - cellX(r, c);\n          const dy = y + 0.5 - cellY(r);\n          const d = hexd(dx, dy);\n          if (d \u003c best) {\n            next = best;\n            S.cid2[p] = S.cid[p];\n            best = d;\n            S.cid[p] = r * NC + c;\n            [S.hd[p], S.dx[p], S.dy[p]] = [d, dx, dy];\n          } else if (d \u003c next) {\n            next = d;\n            S.cid2[p] = r * NC + c;\n          }\n        }\n      }\n    }\n}\n\n// Honey over the top and down the corners, a band of pollen, brood below.\nfunction layout(S) {\n  for (let r = 0; r \u003c NR; r++)\n    for (let c = 0; c \u003c NC; c++) {\n      const i = r * NC + c;\n      const [x, y] = [cellX(r, c), cellY(r)];\n      const e = len((x - 32) / 33, (y - 70) / 28) + 0.05 * (sin(x * 0.21 + y * 0.13) + sin(y * 0.29 - x * 0.17 + 2));\n      const u = rnd();\n      let t;\n      if (y \u003c 24 || (e > 1.28 && y \u003c 64)) t = u \u003c 0.82 ? HONEY : u \u003c 0.95 ? NECTAR : EMPTY;\n      else if (e > 1 && y \u003c 72) t = u \u003c 0.62 ? POLLEN : u \u003c 0.78 ? NECTAR : EMPTY;\n      else if (e \u003c 0.72) t = u \u003c 0.68 ? BROOD : u \u003c 0.78 ? LARVA : u \u003c 0.81 ? EGG : EMPTY;\n      else if (e \u003c 1) t = u \u003c 0.34 ? LARVA : u \u003c 0.48 ? EGG : u \u003c 0.64 ? BROOD : u \u003c 0.68 ? POLLEN : EMPTY;\n      else t = u \u003c 0.12 ? POLLEN : u \u003c 0.27 ? NECTAR : EMPTY;\n      [S.type[i], S.age[i], S.tint[i], S.gap[i], S.pol[i]] = [t, rnd(), rnd(), rnd() * 6.283, floor(rnd() * 8)];\n    }\n}\n\n// Each LED's colour as it would be in white light, and how much of the\n// sun reaches it: cell bottoms stay in shadow.\nfunction paint(S) {\n  const { base, expo } = S;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    let r, g, b;\n    let ex = 1;\n    let dim = 0.66;\n    if (y \u003c TOP || y >= BOT) {\n      // Pine, the grain running along the bar, a groove where it meets the comb.\n      const gr = 0.8 + 0.2 * sin(x * 0.23 + 2 * sin(x * 0.07 + y * 1.3));\n      const edge = y === TOP - 1 || y === BOT ? 0.55 : 1;\n      const k = gr * edge * (0.9 + 0.1 * hash(p, 5));\n      [r, g, b] = [0.6 * k, 0.42 * k, 0.24 * k];\n      if (y > BOT + 1 && y \u003c H - 1 && abs(x + 0.5 - ENX) \u003c 5) [r, g, b] = [0.02, 0.015, 0.01];\n    } else {\n      const [i, d, dx, dy] = [S.cid[p], S.hd[p], S.dx[p], S.dy[p]];\n      const [t, tn, rr, lit] = [S.type[i], S.tint[i], len(dx, dy), -(dx + dy) / 3];\n      if (t === HONEY) {\n        dim = 1;\n        const k = (1 - 0.12 * (d / 2.6) ** 2 + 0.06 * lit) * (0.95 + 0.06 * hash(p, 1));\n        [r, g, b] = [(1 - 0.04 * tn) * k, (0.88 - 0.16 * tn) * k, (0.6 - 0.26 * tn) * k];\n      } else if (t === NECTAR) {\n        // Nectar: dark amber down in the cell, a bright meniscus round it, and a glint.\n        const f = (0.08 + 0.92 * sm(1.5, 2.4, d)) * (0.75 + 0.3 * tn);\n        [r, g, b] = [0.07 + 0.62 * f, 0.03 + 0.36 * f, 0.006 + 0.06 * f];\n        if (abs(dx + 1) \u003c 0.6 && abs(dy + 1) \u003c 0.7) [r, g, b] = [0.95, 0.9, 0.74];\n        ex = 0.6;\n      } else if (t === POLLEN) {\n        const c = POLLENS[S.pol[i]];\n        dim = 0.8;\n        // Packed down in the cell, its inside wall in shadow round it.\n        const k = (0.8 + 0.25 * tn) * (1 - 0.85 * sm(1.5, 2.3, d));\n        [r, g, b] = c.map((v, n) => v * k * (0.82 + 0.3 * hash(p, 2 + n)));\n        ex = 0.8;\n      } else if (t === BROOD) {\n        const k = (1 - 0.32 * (rr / 2.7) ** 2 + 0.1 * lit) * (hash(p, 6) \u003c 0.14 ? 0.78 : 1) * (0.9 + 0.15 * tn);\n        [r, g, b] = [0.8 * k, 0.68 * k, 0.5 * k];\n      } else {\n        // An open cell: dark at the bottom, its lower inside wall catching the light.\n        const lip = sm(1.6, 2.4, d) * (dy > 0.5 ? 1 : 0.3);\n        const k = (0.04 + 0.1 * lip) * (0.75 + 0.5 * tn);\n        [r, g, b] = [k, k * 0.68, k * 0.38];\n        ex = 0.2 + 0.8 * lip;\n        if (t === LARVA) {\n          // The larva curled in a C on its bed of jelly, bigger as it grows.\n          const a = S.age[i];\n          const [R, th] = [0.4 + 1.1 * a, 0.45 + 0.55 * a];\n          const ang = wrap(atan2(dy, dx) - S.gap[i]);\n          let on = a \u003c 0.3 ? sm(1.2, 0.5, rr) : sm(th + 0.3, th - 0.3, abs(rr - R)) * sm(0.5, 1, abs(ang));\n          if (rr \u003c 1.9) [r, g, b] = [r + 0.18, g + 0.17, b + 0.14];\n          const sh = 0.82 + 0.18 * clamp(lit + 0.5, 0, 1) + 0.05 * sin(ang * 5);\n          r += (0.97 * sh - r) * on;\n          g += (0.94 * sh - g) * on;\n          b += (0.85 * sh - b) * on;\n          ex += (0.9 - ex) * on;\n        } else if (t === EGG && rr \u003c 0.7) [r, g, b] = [0.86, 0.85, 0.78];\n      }\n      // The walls: pale wax round the honey, the rims of open cells lit,\n      // and a dark seam where two brood caps meet.\n      const w = sm(2.4, 2.6, d);\n      if (w > 0) {\n        const t2 = S.type[S.cid2[p]];\n        const pale = t === HONEY || t === NECTAR ? 1 : 0;\n        const seam = (t === BROOD || t2 === BROOD) && cap(t) && cap(t2) ? 0.15 : 1;\n        // Light from above rakes the slanted walls; the upright ones stand side on to it.\n        const k = (0.85 + 0.3 * hash(p, 8)) * seam * (!pale && abs(dx) > 2.6 ? 0.45 : 1);\n        r += ((0.34 + 0.18 * pale) * k - r) * w;\n        g += ((0.24 + 0.15 * pale) * k - g) * w;\n        b += ((0.11 + 0.08 * pale) * k - b) * w;\n        ex += ((seam \u003c 1 ? 0.15 : 1) - ex) * w;\n      }\n    }\n    // The comb sits back in the hive's shade; the bees on it catch the light.\n    base[q] = r * dim;\n    base[q + 1] = g * dim;\n    base[q + 2] = b * dim;\n    expo[p] = ex;\n  }\n}\n\n// The window throws its four panes of sun on the glass; they slide and lean with the sun.\nfunction sunPatch(S, s) {\n  const [cx, cy, sh] = [32 + 22 * s, 74 - 6 * abs(s), -0.5 * s];\n  for (let p = 0; p \u003c N; p++) {\n    const v = ((p / W) | 0) + 0.5 - cy;\n    const u = (p % W) + 0.5 - cx - sh * v;\n    let m = sm(22, 16, abs(u)) * sm(40, 33, abs(v));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(u));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(v + 5));\n    S.sun[p] = m;\n  }\n  S.sunK = s;\n}\n\nfunction newBee(S, x, y, h) {\n  const u = rnd();\n  const b = { x, y, h, m: CRAWL, t: rnd() * 3, v: 2.6 + 2.6 * rnd(), s: 1.12 + 0.14 * rnd(), tone: u \u003c 0.18 ? 0 : u \u003c 0.82 ? 1 : 2, ph: rnd() * 6.28, w: 0, wag: 0, wp: 0 };\n  S.bees.push(b);\n  return b;\n}\n\n// A bee to the dance floor on the lower comb, clear of the other dances.\nfunction spot(S) {\n  let best = [32, 104];\n  let far = -1;\n  for (let k = 0; k \u003c 24; k++) {\n    const x = 12 + 40 * rnd();\n    const y = 80 + 33 * rnd();\n    // The lower the better, near the entrance, but well clear of the others.\n    const d = min(24, ...S.dances.map((D) => len(D.cx - x, D.cy - y))) + 0.1 * y;\n    if (d > far) [far, best] = [d, [x, y]];\n  }\n  return best;\n}\n\nfunction newDance(S, b, vig) {\n  const [cx, cy] = spot(S);\n  // A forager from a rich patch runs longer, keeps at it and draws more followers.\n  const D = { b, cx, cy, fl: FIELDS[floor(rnd() * 4)] + 0.12 * (rnd() - 0.5), L: vig ? 11 : 8 + 2.5 * rnd(), tw: vig ? 1.25 : 0.85 + 0.3 * rnd(),\n    tr: vig ? 0.9 : 1 + 0.3 * rnd(), tau: 0, side: rnd() \u003c 0.5 ? -1 : 1, n: vig ? 26 : 9 + floor(10 * rnd()), amp: vig ? 1 : 0.65 + 0.2 * rnd(),\n    want: vig ? 10 : 6 + floor(3 * rnd()), on: false, foll: [], rec: 0, pc: floor(rnd() * 3) };\n  D.th = D.fl - S.sunA;\n  b.D = D;\n  S.dances.push(D);\n  return D;\n}\n\n// The bees nearest the dance turn and gather round it.\nfunction recruit(S, D, snap) {\n  const free = S.bees.filter((b) => (b.m === CRAWL || b.m === REST) && len(b.x - D.cx, b.y - D.cy) \u003c 24);\n  free.sort((a, b) => len(a.x - D.cx, a.y - D.cy) - len(b.x - D.cx, b.y - D.cy));\n  for (const b of free) {\n    if (D.foll.length >= D.want) break;\n    Object.assign(b, { m: FOLLOW, D, a: atan2(b.x - D.cx, -(b.y - D.cy)), t: 5 + 10 * rnd() });\n    D.foll.push(b);\n    if (snap) {\n      const R = D.L / 2 + 3.4;\n      b.x = D.cx + R * sin(b.a);\n      b.y = D.cy - R * cos(b.a);\n      b.h = b.a + PI;\n    }\n  }\n}\n\nfunction seek(b, tx, ty, sp, dt) {\n  const [dx, dy] = [tx - b.x, ty - b.y];\n  const r = len(dx, dy);\n  if (r > 0.25) {\n    const want = atan2(dx, -dy);\n    const e = wrap(want - b.h);\n    b.h += clamp(e, -5 * dt, 5 * dt);\n    const st = min(r, sp * dt) * max(0.15, cos(e));\n    b.x += sin(b.h) * st;\n    b.y -= cos(b.h) * st;\n  }\n  return r;\n}\n\nfunction stepDance(S, D, dt) {\n  const b = D.b;\n  D.th += clamp(wrap(D.fl - S.sunA - D.th), -1.5 * dt, 1.5 * dt);\n  const [ux, uy] = [sin(D.th), -cos(D.th)];\n  if (!D.on) {\n    // The forager hurries up from the entrance to where she will dance.\n    b.m = HOME;\n    if (seek(b, D.cx - (ux * D.L) / 2, D.cy - (uy * D.L) / 2, D.n > 20 ? 13 : 9, dt) \u003c 1.2) {\n      D.on = true;\n      b.m = DANCE;\n      recruit(S, D, false);\n    }\n    return;\n  }\n  D.tau += dt;\n  if (D.tau >= D.tw + D.tr) {\n    D.tau -= D.tw + D.tr;\n    D.side = -D.side;\n    if (--D.n \u003c= 0) {\n      // Done: she goes back out, and some of her followers go after the flowers.\n      [D.gone, b.m, b.wag] = [true, EXIT, 0];\n      for (const f of D.foll) [f.m, f.t] = [rnd() \u003c 0.4 ? EXIT : CRAWL, 1 + 2 * rnd()];\n      return;\n    }\n  }\n  let want;\n  if (D.tau \u003c D.tw) {\n    const f = D.tau / D.tw - 0.5;\n    b.x = D.cx + ux * D.L * f;\n    b.y = D.cy + uy * D.L * f;\n    want = D.th;\n    b.wag = D.amp;\n    b.wp += dt * 2 * PI * 13;\n  } else {\n    const s = (D.tau - D.tw) / D.tr;\n    const ps = D.side * PI * s;\n    const [rx, ry] = [ux * cos(ps) - uy * sin(ps), ux * sin(ps) + uy * cos(ps)];\n    b.x = D.cx + (rx * D.L) / 2;\n    b.y = D.cy + (ry * D.L) / 2;\n    want = atan2(-D.side * ry, -D.side * rx);\n    b.wag = 0;\n  }\n  b.h += clamp(wrap(want - b.h), -14 * dt, 14 * dt);\n  // Followers keep their place round her, turned to face her, and drift with her.\n  D.foll = D.foll.filter((f) => f.m === FOLLOW && f.D === D);\n  D.rec -= dt;\n  if (D.rec \u003c= 0) {\n    D.rec = 1.5;\n    if (D.foll.length \u003c D.want) recruit(S, D, false);\n  }\n  const da = atan2(b.x - D.cx, -(b.y - D.cy));\n  for (const f of D.foll) {\n    f.a += dt * 0.35 * sin(wrap(da - f.a));\n    const R = D.L / 2 + 3.4 + 0.4 * sin(S.t * 2 + f.ph);\n    if (seek(f, D.cx + R * sin(f.a), D.cy - R * cos(f.a), 6, dt) \u003c 1.2) f.h += clamp(wrap(atan2(b.x - f.x, -(b.y - f.y)) - f.h), -6 * dt, 6 * dt);\n    if ((f.t -= dt) \u003c= 0) [f.m, f.t, f.h] = [CRAWL, 1 + 2 * rnd(), f.h + PI];\n  }\n}\n\nfunction crawl(S, b, dt) {\n  b.w += (rnd() - 0.5) * 10 * sqrt(dt);\n  b.w *= 1 - min(1, 1.5 * dt);\n  let want = null;\n  const ex = b.x \u003c 4 ? 1 : b.x > W - 4 ? -1 : 0;\n  const ey = b.y \u003c TOP + 4 ? 1 : b.y > BOT - 4 ? -1 : 0;\n  if (ex || ey) want = atan2(ex, -ey);\n  b.h += b.w * dt;\n  if (want !== null) b.h += clamp(wrap(want - b.h), -3 * dt, 3 * dt);\n  const st = b.v * dt;\n  b.x += sin(b.h) * st;\n  b.y -= cos(b.h) * st;\n}\n\nfunction step(S, dt) {\n  const { bees } = S;\n  for (const b of bees) {\n    const m = b.m;\n    if (m === DANCE || m === HOME || m === FOLLOW) continue;\n    if (m === EXIT) {\n      if (seek(b, ENX, BOT + 1.5, 7, dt) \u003c 1.5) b.out = true;\n      continue;\n    }\n    // Others give the dancer and her followers room.\n    for (const D of S.dances) {\n      const [dx, dy] = [b.x - D.cx, b.y - D.cy];\n      const r = len(dx, dy);\n      if (D.on && r \u003c D.L / 2 + 9) {\n        if (m !== CRAWL) b.t = 0;\n        b.x += (dx / (r + 0.01)) * 4 * dt;\n        b.y += (dy / (r + 0.01)) * 4 * dt;\n        b.h += clamp(wrap(atan2(dx, -dy) - b.h), -4 * dt, 4 * dt);\n      }\n    }\n    if (m === CRAWL) crawl(S, b, dt);\n    else if (m === REST) b.h += sin(S.t * 6 + b.ph) * 0.5 * dt;\n    if ((b.t -= dt) > 0) continue;\n    // Backing out of a cell, she turns away.\n    if (m === DIP) [b.x, b.y, b.h] = [b.x - sin(b.h) * 1.5, b.y + cos(b.h) * 1.5, b.h + PI * (0.6 + 0.8 * rnd())];\n    const u = rnd();\n    b.m = CRAWL;\n    b.t = 1 + 3 * rnd();\n    if (u \u003c 0.28) [b.m, b.t] = [REST, 0.8 + 2.5 * rnd()];\n    else if (u \u003c 0.5 && m !== DIP) {\n      // Head first into a cell: to feed a larva, take nectar or pack pollen.\n      const hx = round(b.x + sin(b.h) * 2.2 - 0.5);\n      const hy = round(b.y - cos(b.h) * 2.2 - 0.5);\n      if (hx >= 0 && hx \u003c W && hy >= TOP + 2 && hy \u003c BOT - 2) {\n        const i = S.cid[hy * W + hx];\n        const t = S.type[i];\n        if (t !== HONEY && t !== BROOD) {\n          const r = floor(i / NC);\n          [b.m, b.t] = [DIP, 2 + 4 * rnd()];\n          b.x = cellX(r, i % NC) - sin(b.h) * 1.5;\n          b.y = cellY(r) + cos(b.h) * 1.5;\n        }\n      }\n    }\n  }\n  for (const D of S.dances) stepDance(S, D, dt);\n  S.dances = S.dances.filter((D) => !D.gone);\n  for (const b of bees) if (b.D && (b.D.gone || (b.m !== FOLLOW && b.m !== DANCE && b.m !== HOME))) b.D = null;\n  // Bees shoulder each other apart; those still at a cell or dancing stand firm.\n  for (const a of bees) {\n    if (a.m === REST || a.m === DIP || a.m === DANCE) continue;\n    for (const b of bees) {\n      const dx = a.x - b.x;\n      const dy = a.y - b.y;\n      if (abs(dx) > 3.6 || abs(dy) > 3.6 || b === a) continue;\n      const r = len(dx, dy);\n      if (r \u003c 3.6 && r > 0.01) {\n        a.x += (dx / r) * (3.6 - r) * 0.25;\n        a.y += (dy / r) * (3.6 - r) * 0.25;\n      }\n    }\n  }\n  S.bees = bees.filter((b) => !b.out);\n}\n\nexport function setup(params) {\n  const S = { t: 0, started: false, sunA: 0, sunK: 9, next: 6, add: 0, c0: 4.2, c1: 8.5, cd: 0.55, bees: [], dances: [] };\n  for (const k of [\"cid\", \"cid2\"]) S[k] = new Int16Array(N);\n  for (const k of [\"hd\", \"dx\", \"dy\", \"expo\", \"X\", \"amb\", \"pool\", \"sun\"]) S[k] = new Float32Array(N);\n  for (const k of [\"base\", \"A\", \"jit\"]) S[k] = new Float32Array(N * 3);\n  for (const k of [\"age\", \"tint\", \"gap\"]) S[k] = new Float32Array(NR * NC);\n  for (const k of [\"type\", \"pol\"]) S[k] = new Uint8Array(NR * NC);\n  grid(S);\n  layout(S);\n  paint(S);\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p % W, (p / W) | 0];\n    S.amb[p] = 0.74 + 0.2 * (1 - y / H) + 0.03 * sin(x * 0.11 + y * 0.05) - 0.12 * ((x - 31.5) / 32) ** 4;\n    S.pool[p] = 0.42 + 0.6 * exp(-((x - 40) ** 2 + (y - 74) ** 2) / 3000);\n    const j = 0.94 + 0.12 * hash(p, 19);\n    for (let c = 0; c \u003c 3; c++) S.jit[p * 3 + c] = j * (0.97 + 0.06 * hash(p, 20 + c));\n  }\n  params.s = S;\n}\n\nfunction start(S, n) {\n  // Bees thickest on the brood, two dances already going.\n  for (let k = 0; k \u003c n; k++) {\n    let x, y;\n    for (let j = 0; j \u003c 4; j++) {\n      x = 2 + 60 * rnd();\n      y = TOP + 3 + (BOT - TOP - 6) * rnd();\n      if (rnd() \u003c 0.35 + 0.65 * sm(30, 70, y)) break;\n    }\n    newBee(S, x, y, rnd() * 6.28);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const b = newBee(S, 0, 0, 0);\n    const D = newDance(S, b, false);\n    Object.assign(D, { fl: k ? 0.08 : -0.1, cx: k ? 20 : 43, cy: k ? 111 : 102, on: true, tau: rnd() * (D.tw + D.tr), rec: 1.5 });\n    D.th = D.fl - S.sunA;\n    b.m = DANCE;\n    stepDance(S, D, 0);\n    b.h = D.tau \u003c D.tw ? D.th : b.h;\n    recruit(S, D, true);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.light = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  const want = round(clamp(k[2], 80, 240));\n  const sk = clamp(k[3], -1, 1);\n  S.sunA = sk * PI;\n  if (abs(sk - S.sunK) > 0.002) sunPatch(S, sk);\n  if (!S.started) {\n    S.started = true;\n    start(S, want);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  // Clouds cross the sun now and then; the first one early.\n  if (S.t > S.c1 + 1.5) {\n    S.c0 = S.t + 8 + 20 * rnd();\n    S.c1 = S.c0 + 3 + 6 * rnd();\n    S.cd = 0.4 + 0.5 * rnd();\n  }\n  S.cloud = 1 - S.cd * sm(S.c0, S.c0 + 1.5, S.t) * sm(S.c1 + 1.5, S.c1, S.t);\n  const vig = input.btnPressed && input.btnPressed[0];\n  if ((S.next -= d) \u003c= 0 || vig) {\n    if (S.dances.length \u003c (vig ? 4 : 3)) {\n      const b = newBee(S, ENX + 4 * (rnd() - 0.5), BOT + 1, 0);\n      b.m = HOME;\n      newDance(S, b, vig);\n    }\n    if (!vig) S.next = 5 + 8 * rnd();\n  }\n  // Bees walk in from the sides, or go out at the entrance, to match the knob.\n  let ord = 0;\n  for (const b of S.bees) if (b.m \u003c= FOLLOW) ord++;\n  if ((S.add -= dt) \u003c= 0) {\n    S.add = 0.1;\n    if (ord \u003c want) {\n      const l = rnd() \u003c 0.5;\n      newBee(S, l ? -3 : W + 3, TOP + 8 + (BOT - TOP - 16) * rnd(), l ? PI / 2 : -PI / 2).t = 1.5;\n    } else if (ord > want + 2) {\n      const b = S.bees.find((b) => b.m === CRAWL);\n      if (b) b.m = EXIT;\n    }\n  }\n  step(S, d);\n}\n\n// One bee into the albedo: her body worked out on a 12 x 12 patch first,\n// then her shadow a step down and right, head, thorax, banded abdomen, wings.\nconst PC = new Float32Array(144);\nconst PP = new Uint8Array(144);\nfunction bee(S, b) {\n  const { A, X } = S;\n  const [s, fx, fy, dip, wg] = [b.s, sin(b.h), -cos(b.h), b.m === DIP, b.wag > 0];\n  const wag = wg ? b.wag * sin(b.wp) : b.m === REST ? 0.15 * sin(S.t * 9 + b.ph) : 0;\n  const [bl, th, am] = [wg ? 0.4 : 0, THX[b.tone], AMB[b.tone]];\n  const shim = 0.24 + 0.14 * sin(S.t * 2.3 + b.ph + b.x * 0.3);\n  // A box round her, the whole patch for a dancer and her blur.\n  const ax = wg ? 5 : s * (3.2 * abs(fx) + 1.9 * abs(fy)) + 0.5;\n  const ay = wg ? 5 : s * (3.2 * abs(fy) + 1.9 * abs(fx)) + 0.5;\n  const [x0, y0] = [floor(b.x - ax), floor(b.y - ay)];\n  const nw = min(12, floor(b.x + ax) - x0 + 2);\n  const nh = min(12, floor(b.y + ay) - y0 + 2);\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const X0 = x0 + i + 0.5 - b.x;\n      const Y0 = y0 + j + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      PC[k] = shape(u, v, s, dip, bl);\n      PP[k] = PART;\n    }\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      const c = PC[k];\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      const q = p * 3;\n      const sh = i && j ? PC[k - nw - 1] : 0;\n      if (sh > 0) {\n        const f = 1 - 0.7 * sh * (1 - c);\n        A[q] *= f;\n        A[q + 1] *= f;\n        A[q + 2] *= f;\n      }\n      const X0 = px + 0.5 - b.x;\n      const Y0 = py + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      // A waggling dancer buzzes her wings into a pale blur round her.\n      let wa = wg ? 0.55 * clamp(1.6 - len((u + 0.7) / 1.5, v / 1.7), 0, 1) : 0;\n      if (c \u003c= 0 && wa \u003c= 0) continue;\n      const pt = PP[k];\n      const col = pt === 1 ? HEAD : pt === 2 ? th : null;\n      const st = u > -0.85 ? 1 : u > -1.35 ? 0 : u > -1.9 ? 0.8 : 0;\n      if (u > -2.2 && u \u003c 0.3 && abs(v) > 0.35 && abs(v) \u003c 1.15) wa = max(wa, shim);\n      const a = max(c, wa);\n      for (let n = 0; n \u003c 3; n++) {\n        let e = col ? col[n] : DARK[n] + (am[n] - DARK[n]) * st;\n        e += (WING[n] - e) * wa;\n        A[q + n] += (e - A[q + n]) * a;\n      }\n      X[p] += (1 - X[p]) * a;\n    }\n  // A forager home from the field carries her pollen loads on her hind legs.\n  if (b.D && (b.m === DANCE || b.m === HOME)) {\n    const c = POLLENS[b.D.pc];\n    for (const sd of [-1, 1]) {\n      const px = round(b.x + s * (-0.7 * fx - sd * 1.25 * fy) - 0.5);\n      const py = round(b.y + s * (-0.7 * fy + sd * 1.25 * fx) - 0.5);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      [A[q], A[q + 1], A[q + 2], X[py * W + px]] = [...c, 1];\n    }\n  }\n}\n\n// Coverage of a bee's body at (u along, v across) in body lengths of\n// about five LEDs; PART says which piece.\nlet PART = 0;\nfunction shape(u, v, s, dip, bl) {\n  let c = clamp((1 - len((u + 1.3) / 1.5, v / (1.12 + bl))) * 1.2 * s + 0.5, 0, 1);\n  PART = 3;\n  if (!dip || u \u003c 0.3) {\n    const k = clamp((1 - len((u - 0.5) / 0.8, v)) * 0.9 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 2];\n  }\n  if (!dip) {\n    const k = clamp((1 - len((u - 1.65) / 0.6, v / 0.75)) * 0.7 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 1];\n  }\n  return c;\n}\n\nconst knee = (c) => (c \u003c 190 ? c : 190 + 65 * (1 - exp(-(c - 190) / 65)));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { A, X, base, expo, amb, sun, pool, jit } = S;\n  A.set(base);\n  X.set(expo);\n  for (const b of S.bees) if (b.m !== DANCE) bee(S, b);\n  for (const b of S.bees) if (b.m === DANCE) bee(S, b);\n  // The curtain closes on the sun first; the room light goes from daylight\n  // to a warm lamp over the hive by 0.5, and from that to the red lamp.\n  const L = S.light;\n  const [w, rd, pw] = [sm(0, 0.5, L), sm(0.5, 1, L), sm(0.15, 0.6, L)];\n  const dc = [0, 1, 2].map((c) => (DAYC[c] + (WARM[c] - DAYC[c]) * w + (REDC[c] - WARM[c]) * rd) * (1 - 0.1 * w - 0.1 * rd) * 255);\n  const sk = 0.9 * S.cloud * (1 - sm(0, 0.4, L)) * 255;\n  const o = [0, 0, 0];\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const a = amb[p] + (pool[p] - amb[p]) * pw;\n    const s = sun[p] * X[p] * sk;\n    for (let c = 0; c \u003c 3; c++) o[c] = knee(A[q + c] * (a * dc[c] + s * SUNC[c]) * jit[q + c]) | 0;\n    display.setPixel(p % W, (p / W) | 0, o[0], o[1], o[2]);\n  }\n}\n","layer":{"id":"layer-waggle-dance","type":"code","name":"waggle-dance","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Waggle Dance\n// Family:  insect\n// Idea:    Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after Karl von Frisch's reading of the honeybee's waggle dance\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1\n//\n// Knob 1: Light. Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see.\n// Knob 2: Speed. At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower.\n// Knob 3: Bees. Eighty to 240; turned up, more walk in from the sides until they hide the comb.\n// Knob 4: Sun. The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass.\n// Buttons: K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Cells six LEDs across the flats, rows five apart (a hexagon squashed by\n// four in a hundred, so every cell is drawn alike); the frame's top bar,\n// its bottom bar and the entrance slot in it.\nconst [CW, RH, TOP, BOT, NC, NR, ENX] = [6, 5, 5, 123, 13, 27, 9];\nconst Y0 = TOP + 2.5;\nconst [EMPTY, HONEY, NECTAR, POLLEN, BROOD, LARVA, EGG] = [0, 1, 2, 3, 4, 5, 6];\nconst [CRAWL, REST, DIP, FOLLOW, DANCE, HOME, EXIT] = [0, 1, 2, 3, 4, 5, 6];\n// Pollen: orange, yellow, ochre, rust, purple-grey, buff, olive, red-orange.\nconst POLLENS = [[0.95, 0.52, 0.08], [0.95, 0.8, 0.16], [0.74, 0.54, 0.17], [0.6, 0.25, 0.1],\n  [0.44, 0.37, 0.5], [0.86, 0.68, 0.36], [0.55, 0.58, 0.24], [0.9, 0.4, 0.12]];\n// Bees: a dark race, the usual, a golden one. Thorax, then the amber bands.\nconst THX = [[0.5, 0.37, 0.2], [0.78, 0.56, 0.24], [0.9, 0.68, 0.3]];\nconst AMB = [[0.62, 0.44, 0.18], [1, 0.72, 0.2], [1, 0.84, 0.32]];\nconst [DARK, HEAD, WING] = [[0.3, 0.18, 0.08], [0.14, 0.1, 0.06], [0.8, 0.84, 0.9]];\nconst [SUNC, DAYC, WARM, REDC] = [[1, 0.84, 0.56], [1, 0.94, 0.82], [1, 0.66, 0.34], [1, 0.09, 0.035]];\n// Where the flowers lie, against the main field, and how often foragers come from each.\nconst FIELDS = [0, 0, 0.95, -1.9];\n\nconst { min, max, sin, cos, abs, sqrt, floor, round, exp, atan2, PI } = Math;\nconst len = (a, b) => sqrt(a * a + b * b);\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst wrap = (a) => a - 2 * PI * round(a / (2 * PI));\nconst rnd = () => Math.random();\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Distance from a cell's centre in its own hexagon, 3 on the wall.\nconst hexd = (dx, dy) => max(abs(dx), abs(0.5 * dx + 0.9 * dy), abs(0.5 * dx - 0.9 * dy));\nconst cellX = (r, c) => CW * (c - 1) + (r & 1 ? 3.5 : 0.5);\nconst cellY = (r) => Y0 + (r - 1) * RH;\nconst cap = (t) => t === BROOD || t === HONEY;\n\n// Which cell each LED sits in, and where in it.\nfunction grid(S) {\n  for (let y = TOP; y \u003c BOT; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r0 = round((y + 0.5 - Y0) / RH) + 1;\n      let [best, next] = [99, 99];\n      const p = y * W + x;\n      for (let r = max(0, r0 - 1); r \u003c= min(NR - 1, r0 + 1); r++) {\n        const off = r & 1 ? 3.5 : 0.5;\n        const c0 = round((x + 0.5 - off) / CW) + 1;\n        for (let c = max(0, c0 - 1); c \u003c= min(NC - 1, c0 + 1); c++) {\n          const dx = x + 0.5 - cellX(r, c);\n          const dy = y + 0.5 - cellY(r);\n          const d = hexd(dx, dy);\n          if (d \u003c best) {\n            next = best;\n            S.cid2[p] = S.cid[p];\n            best = d;\n            S.cid[p] = r * NC + c;\n            [S.hd[p], S.dx[p], S.dy[p]] = [d, dx, dy];\n          } else if (d \u003c next) {\n            next = d;\n            S.cid2[p] = r * NC + c;\n          }\n        }\n      }\n    }\n}\n\n// Honey over the top and down the corners, a band of pollen, brood below.\nfunction layout(S) {\n  for (let r = 0; r \u003c NR; r++)\n    for (let c = 0; c \u003c NC; c++) {\n      const i = r * NC + c;\n      const [x, y] = [cellX(r, c), cellY(r)];\n      const e = len((x - 32) / 33, (y - 70) / 28) + 0.05 * (sin(x * 0.21 + y * 0.13) + sin(y * 0.29 - x * 0.17 + 2));\n      const u = rnd();\n      let t;\n      if (y \u003c 24 || (e > 1.28 && y \u003c 64)) t = u \u003c 0.82 ? HONEY : u \u003c 0.95 ? NECTAR : EMPTY;\n      else if (e > 1 && y \u003c 72) t = u \u003c 0.62 ? POLLEN : u \u003c 0.78 ? NECTAR : EMPTY;\n      else if (e \u003c 0.72) t = u \u003c 0.68 ? BROOD : u \u003c 0.78 ? LARVA : u \u003c 0.81 ? EGG : EMPTY;\n      else if (e \u003c 1) t = u \u003c 0.34 ? LARVA : u \u003c 0.48 ? EGG : u \u003c 0.64 ? BROOD : u \u003c 0.68 ? POLLEN : EMPTY;\n      else t = u \u003c 0.12 ? POLLEN : u \u003c 0.27 ? NECTAR : EMPTY;\n      [S.type[i], S.age[i], S.tint[i], S.gap[i], S.pol[i]] = [t, rnd(), rnd(), rnd() * 6.283, floor(rnd() * 8)];\n    }\n}\n\n// Each LED's colour as it would be in white light, and how much of the\n// sun reaches it: cell bottoms stay in shadow.\nfunction paint(S) {\n  const { base, expo } = S;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    let r, g, b;\n    let ex = 1;\n    let dim = 0.66;\n    if (y \u003c TOP || y >= BOT) {\n      // Pine, the grain running along the bar, a groove where it meets the comb.\n      const gr = 0.8 + 0.2 * sin(x * 0.23 + 2 * sin(x * 0.07 + y * 1.3));\n      const edge = y === TOP - 1 || y === BOT ? 0.55 : 1;\n      const k = gr * edge * (0.9 + 0.1 * hash(p, 5));\n      [r, g, b] = [0.6 * k, 0.42 * k, 0.24 * k];\n      if (y > BOT + 1 && y \u003c H - 1 && abs(x + 0.5 - ENX) \u003c 5) [r, g, b] = [0.02, 0.015, 0.01];\n    } else {\n      const [i, d, dx, dy] = [S.cid[p], S.hd[p], S.dx[p], S.dy[p]];\n      const [t, tn, rr, lit] = [S.type[i], S.tint[i], len(dx, dy), -(dx + dy) / 3];\n      if (t === HONEY) {\n        dim = 1;\n        const k = (1 - 0.12 * (d / 2.6) ** 2 + 0.06 * lit) * (0.95 + 0.06 * hash(p, 1));\n        [r, g, b] = [(1 - 0.04 * tn) * k, (0.88 - 0.16 * tn) * k, (0.6 - 0.26 * tn) * k];\n      } else if (t === NECTAR) {\n        // Nectar: dark amber down in the cell, a bright meniscus round it, and a glint.\n        const f = (0.08 + 0.92 * sm(1.5, 2.4, d)) * (0.75 + 0.3 * tn);\n        [r, g, b] = [0.07 + 0.62 * f, 0.03 + 0.36 * f, 0.006 + 0.06 * f];\n        if (abs(dx + 1) \u003c 0.6 && abs(dy + 1) \u003c 0.7) [r, g, b] = [0.95, 0.9, 0.74];\n        ex = 0.6;\n      } else if (t === POLLEN) {\n        const c = POLLENS[S.pol[i]];\n        dim = 0.8;\n        // Packed down in the cell, its inside wall in shadow round it.\n        const k = (0.8 + 0.25 * tn) * (1 - 0.85 * sm(1.5, 2.3, d));\n        [r, g, b] = c.map((v, n) => v * k * (0.82 + 0.3 * hash(p, 2 + n)));\n        ex = 0.8;\n      } else if (t === BROOD) {\n        const k = (1 - 0.32 * (rr / 2.7) ** 2 + 0.1 * lit) * (hash(p, 6) \u003c 0.14 ? 0.78 : 1) * (0.9 + 0.15 * tn);\n        [r, g, b] = [0.8 * k, 0.68 * k, 0.5 * k];\n      } else {\n        // An open cell: dark at the bottom, its lower inside wall catching the light.\n        const lip = sm(1.6, 2.4, d) * (dy > 0.5 ? 1 : 0.3);\n        const k = (0.04 + 0.1 * lip) * (0.75 + 0.5 * tn);\n        [r, g, b] = [k, k * 0.68, k * 0.38];\n        ex = 0.2 + 0.8 * lip;\n        if (t === LARVA) {\n          // The larva curled in a C on its bed of jelly, bigger as it grows.\n          const a = S.age[i];\n          const [R, th] = [0.4 + 1.1 * a, 0.45 + 0.55 * a];\n          const ang = wrap(atan2(dy, dx) - S.gap[i]);\n          let on = a \u003c 0.3 ? sm(1.2, 0.5, rr) : sm(th + 0.3, th - 0.3, abs(rr - R)) * sm(0.5, 1, abs(ang));\n          if (rr \u003c 1.9) [r, g, b] = [r + 0.18, g + 0.17, b + 0.14];\n          const sh = 0.82 + 0.18 * clamp(lit + 0.5, 0, 1) + 0.05 * sin(ang * 5);\n          r += (0.97 * sh - r) * on;\n          g += (0.94 * sh - g) * on;\n          b += (0.85 * sh - b) * on;\n          ex += (0.9 - ex) * on;\n        } else if (t === EGG && rr \u003c 0.7) [r, g, b] = [0.86, 0.85, 0.78];\n      }\n      // The walls: pale wax round the honey, the rims of open cells lit,\n      // and a dark seam where two brood caps meet.\n      const w = sm(2.4, 2.6, d);\n      if (w > 0) {\n        const t2 = S.type[S.cid2[p]];\n        const pale = t === HONEY || t === NECTAR ? 1 : 0;\n        const seam = (t === BROOD || t2 === BROOD) && cap(t) && cap(t2) ? 0.15 : 1;\n        // Light from above rakes the slanted walls; the upright ones stand side on to it.\n        const k = (0.85 + 0.3 * hash(p, 8)) * seam * (!pale && abs(dx) > 2.6 ? 0.45 : 1);\n        r += ((0.34 + 0.18 * pale) * k - r) * w;\n        g += ((0.24 + 0.15 * pale) * k - g) * w;\n        b += ((0.11 + 0.08 * pale) * k - b) * w;\n        ex += ((seam \u003c 1 ? 0.15 : 1) - ex) * w;\n      }\n    }\n    // The comb sits back in the hive's shade; the bees on it catch the light.\n    base[q] = r * dim;\n    base[q + 1] = g * dim;\n    base[q + 2] = b * dim;\n    expo[p] = ex;\n  }\n}\n\n// The window throws its four panes of sun on the glass; they slide and lean with the sun.\nfunction sunPatch(S, s) {\n  const [cx, cy, sh] = [32 + 22 * s, 74 - 6 * abs(s), -0.5 * s];\n  for (let p = 0; p \u003c N; p++) {\n    const v = ((p / W) | 0) + 0.5 - cy;\n    const u = (p % W) + 0.5 - cx - sh * v;\n    let m = sm(22, 16, abs(u)) * sm(40, 33, abs(v));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(u));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(v + 5));\n    S.sun[p] = m;\n  }\n  S.sunK = s;\n}\n\nfunction newBee(S, x, y, h) {\n  const u = rnd();\n  const b = { x, y, h, m: CRAWL, t: rnd() * 3, v: 2.6 + 2.6 * rnd(), s: 1.12 + 0.14 * rnd(), tone: u \u003c 0.18 ? 0 : u \u003c 0.82 ? 1 : 2, ph: rnd() * 6.28, w: 0, wag: 0, wp: 0 };\n  S.bees.push(b);\n  return b;\n}\n\n// A bee to the dance floor on the lower comb, clear of the other dances.\nfunction spot(S) {\n  let best = [32, 104];\n  let far = -1;\n  for (let k = 0; k \u003c 24; k++) {\n    const x = 12 + 40 * rnd();\n    const y = 80 + 33 * rnd();\n    // The lower the better, near the entrance, but well clear of the others.\n    const d = min(24, ...S.dances.map((D) => len(D.cx - x, D.cy - y))) + 0.1 * y;\n    if (d > far) [far, best] = [d, [x, y]];\n  }\n  return best;\n}\n\nfunction newDance(S, b, vig) {\n  const [cx, cy] = spot(S);\n  // A forager from a rich patch runs longer, keeps at it and draws more followers.\n  const D = { b, cx, cy, fl: FIELDS[floor(rnd() * 4)] + 0.12 * (rnd() - 0.5), L: vig ? 11 : 8 + 2.5 * rnd(), tw: vig ? 1.25 : 0.85 + 0.3 * rnd(),\n    tr: vig ? 0.9 : 1 + 0.3 * rnd(), tau: 0, side: rnd() \u003c 0.5 ? -1 : 1, n: vig ? 26 : 9 + floor(10 * rnd()), amp: vig ? 1 : 0.65 + 0.2 * rnd(),\n    want: vig ? 10 : 6 + floor(3 * rnd()), on: false, foll: [], rec: 0, pc: floor(rnd() * 3) };\n  D.th = D.fl - S.sunA;\n  b.D = D;\n  S.dances.push(D);\n  return D;\n}\n\n// The bees nearest the dance turn and gather round it.\nfunction recruit(S, D, snap) {\n  const free = S.bees.filter((b) => (b.m === CRAWL || b.m === REST) && len(b.x - D.cx, b.y - D.cy) \u003c 24);\n  free.sort((a, b) => len(a.x - D.cx, a.y - D.cy) - len(b.x - D.cx, b.y - D.cy));\n  for (const b of free) {\n    if (D.foll.length >= D.want) break;\n    Object.assign(b, { m: FOLLOW, D, a: atan2(b.x - D.cx, -(b.y - D.cy)), t: 5 + 10 * rnd() });\n    D.foll.push(b);\n    if (snap) {\n      const R = D.L / 2 + 3.4;\n      b.x = D.cx + R * sin(b.a);\n      b.y = D.cy - R * cos(b.a);\n      b.h = b.a + PI;\n    }\n  }\n}\n\nfunction seek(b, tx, ty, sp, dt) {\n  const [dx, dy] = [tx - b.x, ty - b.y];\n  const r = len(dx, dy);\n  if (r > 0.25) {\n    const want = atan2(dx, -dy);\n    const e = wrap(want - b.h);\n    b.h += clamp(e, -5 * dt, 5 * dt);\n    const st = min(r, sp * dt) * max(0.15, cos(e));\n    b.x += sin(b.h) * st;\n    b.y -= cos(b.h) * st;\n  }\n  return r;\n}\n\nfunction stepDance(S, D, dt) {\n  const b = D.b;\n  D.th += clamp(wrap(D.fl - S.sunA - D.th), -1.5 * dt, 1.5 * dt);\n  const [ux, uy] = [sin(D.th), -cos(D.th)];\n  if (!D.on) {\n    // The forager hurries up from the entrance to where she will dance.\n    b.m = HOME;\n    if (seek(b, D.cx - (ux * D.L) / 2, D.cy - (uy * D.L) / 2, D.n > 20 ? 13 : 9, dt) \u003c 1.2) {\n      D.on = true;\n      b.m = DANCE;\n      recruit(S, D, false);\n    }\n    return;\n  }\n  D.tau += dt;\n  if (D.tau >= D.tw + D.tr) {\n    D.tau -= D.tw + D.tr;\n    D.side = -D.side;\n    if (--D.n \u003c= 0) {\n      // Done: she goes back out, and some of her followers go after the flowers.\n      [D.gone, b.m, b.wag] = [true, EXIT, 0];\n      for (const f of D.foll) [f.m, f.t] = [rnd() \u003c 0.4 ? EXIT : CRAWL, 1 + 2 * rnd()];\n      return;\n    }\n  }\n  let want;\n  if (D.tau \u003c D.tw) {\n    const f = D.tau / D.tw - 0.5;\n    b.x = D.cx + ux * D.L * f;\n    b.y = D.cy + uy * D.L * f;\n    want = D.th;\n    b.wag = D.amp;\n    b.wp += dt * 2 * PI * 13;\n  } else {\n    const s = (D.tau - D.tw) / D.tr;\n    const ps = D.side * PI * s;\n    const [rx, ry] = [ux * cos(ps) - uy * sin(ps), ux * sin(ps) + uy * cos(ps)];\n    b.x = D.cx + (rx * D.L) / 2;\n    b.y = D.cy + (ry * D.L) / 2;\n    want = atan2(-D.side * ry, -D.side * rx);\n    b.wag = 0;\n  }\n  b.h += clamp(wrap(want - b.h), -14 * dt, 14 * dt);\n  // Followers keep their place round her, turned to face her, and drift with her.\n  D.foll = D.foll.filter((f) => f.m === FOLLOW && f.D === D);\n  D.rec -= dt;\n  if (D.rec \u003c= 0) {\n    D.rec = 1.5;\n    if (D.foll.length \u003c D.want) recruit(S, D, false);\n  }\n  const da = atan2(b.x - D.cx, -(b.y - D.cy));\n  for (const f of D.foll) {\n    f.a += dt * 0.35 * sin(wrap(da - f.a));\n    const R = D.L / 2 + 3.4 + 0.4 * sin(S.t * 2 + f.ph);\n    if (seek(f, D.cx + R * sin(f.a), D.cy - R * cos(f.a), 6, dt) \u003c 1.2) f.h += clamp(wrap(atan2(b.x - f.x, -(b.y - f.y)) - f.h), -6 * dt, 6 * dt);\n    if ((f.t -= dt) \u003c= 0) [f.m, f.t, f.h] = [CRAWL, 1 + 2 * rnd(), f.h + PI];\n  }\n}\n\nfunction crawl(S, b, dt) {\n  b.w += (rnd() - 0.5) * 10 * sqrt(dt);\n  b.w *= 1 - min(1, 1.5 * dt);\n  let want = null;\n  const ex = b.x \u003c 4 ? 1 : b.x > W - 4 ? -1 : 0;\n  const ey = b.y \u003c TOP + 4 ? 1 : b.y > BOT - 4 ? -1 : 0;\n  if (ex || ey) want = atan2(ex, -ey);\n  b.h += b.w * dt;\n  if (want !== null) b.h += clamp(wrap(want - b.h), -3 * dt, 3 * dt);\n  const st = b.v * dt;\n  b.x += sin(b.h) * st;\n  b.y -= cos(b.h) * st;\n}\n\nfunction step(S, dt) {\n  const { bees } = S;\n  for (const b of bees) {\n    const m = b.m;\n    if (m === DANCE || m === HOME || m === FOLLOW) continue;\n    if (m === EXIT) {\n      if (seek(b, ENX, BOT + 1.5, 7, dt) \u003c 1.5) b.out = true;\n      continue;\n    }\n    // Others give the dancer and her followers room.\n    for (const D of S.dances) {\n      const [dx, dy] = [b.x - D.cx, b.y - D.cy];\n      const r = len(dx, dy);\n      if (D.on && r \u003c D.L / 2 + 9) {\n        if (m !== CRAWL) b.t = 0;\n        b.x += (dx / (r + 0.01)) * 4 * dt;\n        b.y += (dy / (r + 0.01)) * 4 * dt;\n        b.h += clamp(wrap(atan2(dx, -dy) - b.h), -4 * dt, 4 * dt);\n      }\n    }\n    if (m === CRAWL) crawl(S, b, dt);\n    else if (m === REST) b.h += sin(S.t * 6 + b.ph) * 0.5 * dt;\n    if ((b.t -= dt) > 0) continue;\n    // Backing out of a cell, she turns away.\n    if (m === DIP) [b.x, b.y, b.h] = [b.x - sin(b.h) * 1.5, b.y + cos(b.h) * 1.5, b.h + PI * (0.6 + 0.8 * rnd())];\n    const u = rnd();\n    b.m = CRAWL;\n    b.t = 1 + 3 * rnd();\n    if (u \u003c 0.28) [b.m, b.t] = [REST, 0.8 + 2.5 * rnd()];\n    else if (u \u003c 0.5 && m !== DIP) {\n      // Head first into a cell: to feed a larva, take nectar or pack pollen.\n      const hx = round(b.x + sin(b.h) * 2.2 - 0.5);\n      const hy = round(b.y - cos(b.h) * 2.2 - 0.5);\n      if (hx >= 0 && hx \u003c W && hy >= TOP + 2 && hy \u003c BOT - 2) {\n        const i = S.cid[hy * W + hx];\n        const t = S.type[i];\n        if (t !== HONEY && t !== BROOD) {\n          const r = floor(i / NC);\n          [b.m, b.t] = [DIP, 2 + 4 * rnd()];\n          b.x = cellX(r, i % NC) - sin(b.h) * 1.5;\n          b.y = cellY(r) + cos(b.h) * 1.5;\n        }\n      }\n    }\n  }\n  for (const D of S.dances) stepDance(S, D, dt);\n  S.dances = S.dances.filter((D) => !D.gone);\n  for (const b of bees) if (b.D && (b.D.gone || (b.m !== FOLLOW && b.m !== DANCE && b.m !== HOME))) b.D = null;\n  // Bees shoulder each other apart; those still at a cell or dancing stand firm.\n  for (const a of bees) {\n    if (a.m === REST || a.m === DIP || a.m === DANCE) continue;\n    for (const b of bees) {\n      const dx = a.x - b.x;\n      const dy = a.y - b.y;\n      if (abs(dx) > 3.6 || abs(dy) > 3.6 || b === a) continue;\n      const r = len(dx, dy);\n      if (r \u003c 3.6 && r > 0.01) {\n        a.x += (dx / r) * (3.6 - r) * 0.25;\n        a.y += (dy / r) * (3.6 - r) * 0.25;\n      }\n    }\n  }\n  S.bees = bees.filter((b) => !b.out);\n}\n\nexport function setup(params) {\n  const S = { t: 0, started: false, sunA: 0, sunK: 9, next: 6, add: 0, c0: 4.2, c1: 8.5, cd: 0.55, bees: [], dances: [] };\n  for (const k of [\"cid\", \"cid2\"]) S[k] = new Int16Array(N);\n  for (const k of [\"hd\", \"dx\", \"dy\", \"expo\", \"X\", \"amb\", \"pool\", \"sun\"]) S[k] = new Float32Array(N);\n  for (const k of [\"base\", \"A\", \"jit\"]) S[k] = new Float32Array(N * 3);\n  for (const k of [\"age\", \"tint\", \"gap\"]) S[k] = new Float32Array(NR * NC);\n  for (const k of [\"type\", \"pol\"]) S[k] = new Uint8Array(NR * NC);\n  grid(S);\n  layout(S);\n  paint(S);\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p % W, (p / W) | 0];\n    S.amb[p] = 0.74 + 0.2 * (1 - y / H) + 0.03 * sin(x * 0.11 + y * 0.05) - 0.12 * ((x - 31.5) / 32) ** 4;\n    S.pool[p] = 0.42 + 0.6 * exp(-((x - 40) ** 2 + (y - 74) ** 2) / 3000);\n    const j = 0.94 + 0.12 * hash(p, 19);\n    for (let c = 0; c \u003c 3; c++) S.jit[p * 3 + c] = j * (0.97 + 0.06 * hash(p, 20 + c));\n  }\n  params.s = S;\n}\n\nfunction start(S, n) {\n  // Bees thickest on the brood, two dances already going.\n  for (let k = 0; k \u003c n; k++) {\n    let x, y;\n    for (let j = 0; j \u003c 4; j++) {\n      x = 2 + 60 * rnd();\n      y = TOP + 3 + (BOT - TOP - 6) * rnd();\n      if (rnd() \u003c 0.35 + 0.65 * sm(30, 70, y)) break;\n    }\n    newBee(S, x, y, rnd() * 6.28);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const b = newBee(S, 0, 0, 0);\n    const D = newDance(S, b, false);\n    Object.assign(D, { fl: k ? 0.08 : -0.1, cx: k ? 20 : 43, cy: k ? 111 : 102, on: true, tau: rnd() * (D.tw + D.tr), rec: 1.5 });\n    D.th = D.fl - S.sunA;\n    b.m = DANCE;\n    stepDance(S, D, 0);\n    b.h = D.tau \u003c D.tw ? D.th : b.h;\n    recruit(S, D, true);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.light = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  const want = round(clamp(k[2], 80, 240));\n  const sk = clamp(k[3], -1, 1);\n  S.sunA = sk * PI;\n  if (abs(sk - S.sunK) > 0.002) sunPatch(S, sk);\n  if (!S.started) {\n    S.started = true;\n    start(S, want);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  // Clouds cross the sun now and then; the first one early.\n  if (S.t > S.c1 + 1.5) {\n    S.c0 = S.t + 8 + 20 * rnd();\n    S.c1 = S.c0 + 3 + 6 * rnd();\n    S.cd = 0.4 + 0.5 * rnd();\n  }\n  S.cloud = 1 - S.cd * sm(S.c0, S.c0 + 1.5, S.t) * sm(S.c1 + 1.5, S.c1, S.t);\n  const vig = input.btnPressed && input.btnPressed[0];\n  if ((S.next -= d) \u003c= 0 || vig) {\n    if (S.dances.length \u003c (vig ? 4 : 3)) {\n      const b = newBee(S, ENX + 4 * (rnd() - 0.5), BOT + 1, 0);\n      b.m = HOME;\n      newDance(S, b, vig);\n    }\n    if (!vig) S.next = 5 + 8 * rnd();\n  }\n  // Bees walk in from the sides, or go out at the entrance, to match the knob.\n  let ord = 0;\n  for (const b of S.bees) if (b.m \u003c= FOLLOW) ord++;\n  if ((S.add -= dt) \u003c= 0) {\n    S.add = 0.1;\n    if (ord \u003c want) {\n      const l = rnd() \u003c 0.5;\n      newBee(S, l ? -3 : W + 3, TOP + 8 + (BOT - TOP - 16) * rnd(), l ? PI / 2 : -PI / 2).t = 1.5;\n    } else if (ord > want + 2) {\n      const b = S.bees.find((b) => b.m === CRAWL);\n      if (b) b.m = EXIT;\n    }\n  }\n  step(S, d);\n}\n\n// One bee into the albedo: her body worked out on a 12 x 12 patch first,\n// then her shadow a step down and right, head, thorax, banded abdomen, wings.\nconst PC = new Float32Array(144);\nconst PP = new Uint8Array(144);\nfunction bee(S, b) {\n  const { A, X } = S;\n  const [s, fx, fy, dip, wg] = [b.s, sin(b.h), -cos(b.h), b.m === DIP, b.wag > 0];\n  const wag = wg ? b.wag * sin(b.wp) : b.m === REST ? 0.15 * sin(S.t * 9 + b.ph) : 0;\n  const [bl, th, am] = [wg ? 0.4 : 0, THX[b.tone], AMB[b.tone]];\n  const shim = 0.24 + 0.14 * sin(S.t * 2.3 + b.ph + b.x * 0.3);\n  // A box round her, the whole patch for a dancer and her blur.\n  const ax = wg ? 5 : s * (3.2 * abs(fx) + 1.9 * abs(fy)) + 0.5;\n  const ay = wg ? 5 : s * (3.2 * abs(fy) + 1.9 * abs(fx)) + 0.5;\n  const [x0, y0] = [floor(b.x - ax), floor(b.y - ay)];\n  const nw = min(12, floor(b.x + ax) - x0 + 2);\n  const nh = min(12, floor(b.y + ay) - y0 + 2);\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const X0 = x0 + i + 0.5 - b.x;\n      const Y0 = y0 + j + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      PC[k] = shape(u, v, s, dip, bl);\n      PP[k] = PART;\n    }\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      const c = PC[k];\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      const q = p * 3;\n      const sh = i && j ? PC[k - nw - 1] : 0;\n      if (sh > 0) {\n        const f = 1 - 0.7 * sh * (1 - c);\n        A[q] *= f;\n        A[q + 1] *= f;\n        A[q + 2] *= f;\n      }\n      const X0 = px + 0.5 - b.x;\n      const Y0 = py + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      // A waggling dancer buzzes her wings into a pale blur round her.\n      let wa = wg ? 0.55 * clamp(1.6 - len((u + 0.7) / 1.5, v / 1.7), 0, 1) : 0;\n      if (c \u003c= 0 && wa \u003c= 0) continue;\n      const pt = PP[k];\n      const col = pt === 1 ? HEAD : pt === 2 ? th : null;\n      const st = u > -0.85 ? 1 : u > -1.35 ? 0 : u > -1.9 ? 0.8 : 0;\n      if (u > -2.2 && u \u003c 0.3 && abs(v) > 0.35 && abs(v) \u003c 1.15) wa = max(wa, shim);\n      const a = max(c, wa);\n      for (let n = 0; n \u003c 3; n++) {\n        let e = col ? col[n] : DARK[n] + (am[n] - DARK[n]) * st;\n        e += (WING[n] - e) * wa;\n        A[q + n] += (e - A[q + n]) * a;\n      }\n      X[p] += (1 - X[p]) * a;\n    }\n  // A forager home from the field carries her pollen loads on her hind legs.\n  if (b.D && (b.m === DANCE || b.m === HOME)) {\n    const c = POLLENS[b.D.pc];\n    for (const sd of [-1, 1]) {\n      const px = round(b.x + s * (-0.7 * fx - sd * 1.25 * fy) - 0.5);\n      const py = round(b.y + s * (-0.7 * fy + sd * 1.25 * fx) - 0.5);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      [A[q], A[q + 1], A[q + 2], X[py * W + px]] = [...c, 1];\n    }\n  }\n}\n\n// Coverage of a bee's body at (u along, v across) in body lengths of\n// about five LEDs; PART says which piece.\nlet PART = 0;\nfunction shape(u, v, s, dip, bl) {\n  let c = clamp((1 - len((u + 1.3) / 1.5, v / (1.12 + bl))) * 1.2 * s + 0.5, 0, 1);\n  PART = 3;\n  if (!dip || u \u003c 0.3) {\n    const k = clamp((1 - len((u - 0.5) / 0.8, v)) * 0.9 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 2];\n  }\n  if (!dip) {\n    const k = clamp((1 - len((u - 1.65) / 0.6, v / 0.75)) * 0.7 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 1];\n  }\n  return c;\n}\n\nconst knee = (c) => (c \u003c 190 ? c : 190 + 65 * (1 - exp(-(c - 190) / 65)));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { A, X, base, expo, amb, sun, pool, jit } = S;\n  A.set(base);\n  X.set(expo);\n  for (const b of S.bees) if (b.m !== DANCE) bee(S, b);\n  for (const b of S.bees) if (b.m === DANCE) bee(S, b);\n  // The curtain closes on the sun first; the room light goes from daylight\n  // to a warm lamp over the hive by 0.5, and from that to the red lamp.\n  const L = S.light;\n  const [w, rd, pw] = [sm(0, 0.5, L), sm(0.5, 1, L), sm(0.15, 0.6, L)];\n  const dc = [0, 1, 2].map((c) => (DAYC[c] + (WARM[c] - DAYC[c]) * w + (REDC[c] - WARM[c]) * rd) * (1 - 0.1 * w - 0.1 * rd) * 255);\n  const sk = 0.9 * S.cloud * (1 - sm(0, 0.4, L)) * 255;\n  const o = [0, 0, 0];\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const a = amb[p] + (pool[p] - amb[p]) * pw;\n    const s = sun[p] * X[p] * sk;\n    for (let c = 0; c \u003c 3; c++) o[c] = knee(A[q + c] * (a * dc[c] + s * SUNC[c]) * jit[q + c]) | 0;\n    display.setPixel(p % W, (p / W) | 0, o[0], o[1], o[2]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower."},{"name":"Bees","min":80,"max":240,"about":"Eighty to 240; turned up, more walk in from the sides until they hide the comb."},{"name":"Sun","min":-1,"max":1,"about":"The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass."}],"start":[0,2,80,0.06],"measures":{"motion":0.2561,"detail":0.1412,"edges":0.4465,"complexity":2.5302,"coverage":0.7323,"colour":0.2225,"drift":0.0504},"knobResponse":[0.1684,0.0666,0.1239,0.0576]},{"slug":"warp","title":"Warp","family":"space","round":15,"note":"별 사이를 워프로 날아요. 별은 앞쪽에서 얼음빛 파랑이고, 옆으로 지나가며 자홍 줄로 늘어나요. K1 을 누르면 워프에서 빠져 멈췄다가 흰 빛과 함께 다시 들어가요.","idea":"A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.","buttons":"K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.","code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","layer":{"id":"layer-warp","type":"code","name":"warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel."},{"name":"Warp","min":0.2,"max":4,"about":"How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel."},{"name":"Stars","min":420,"max":1400,"about":"How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard."},{"name":"Steer","min":-1,"max":1,"about":"The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn."}],"start":[0,2,420,0.06],"measures":{"motion":2.077,"detail":0.0623,"edges":0.3496,"complexity":0.991,"coverage":0.2025,"colour":0.1354,"drift":0.0642},"knobResponse":[0.0455,0.0994,0.1476,0.0712]},{"slug":"waterfall","title":"Waterfall","family":"weather","round":14,"note":"강이 벼랑 끝을 넘어 패널 높이를 다 떨어져 소에 닿아요. 벼랑 끝에서 청록 유리 같던 물은 떨어지며 하얘지고, 소에서 오르는 안개에 무지개 한 토막이 서요. K3 바람을 끝까지 돌리면 돌풍이 물줄기를 찢어 물보라로 날려 올리고, K1 을 누르면 통나무 하나가 벼랑 끝을 넘어와요.","idea":"A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.","buttons":"K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.","code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","layer":{"id":"layer-waterfall","type":"code","name":"waterfall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly."},{"name":"Spate","min":0,"max":1,"about":"How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match."}],"start":[0,2,0,0.06],"measures":{"motion":0.6549,"detail":0.0595,"edges":0.3161,"complexity":1.514,"coverage":0.9639,"colour":0.146,"drift":0.0724},"knobResponse":[0.0442,0.112,0.1828,0.287]},{"slug":"weaver","title":"Weaver","family":"bird","round":22,"note":"강 위로 뻗은 아카시아 가지 끝에서 수컷 마을베짜기새가 둥지를 지어요. 갈대 잎을 찢어 문 초록 띠를 벽에 꿰어 당기면 둥지가 고리에서 둥근 방으로, 다시 아래로 열린 입구로 한 가닥씩 자라고, 묵은 띠는 짚 색으로 바래요. K1 을 누르면 암컷이 날아와 둥지를 살피고, 다 지은 둥지가 퇴짜를 맞으면 수컷이 끊어 강에 떨어뜨리고 새 고리부터 다시 지어요.","idea":"A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.","buttons":"K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.","code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","layer":{"id":"layer-weaver","type":"code","name":"weaver","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plumage","min":0,"max":2,"about":"A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in."},{"name":"Nests","min":3,"max":9,"about":"Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance."},{"name":"Sky","min":0,"max":1,"about":"Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left."}],"start":[0,2,3,0.06],"measures":{"motion":0.1278,"detail":0.0716,"edges":0.3689,"complexity":2.2916,"coverage":0.9985,"colour":0.2367,"drift":0.0436},"knobResponse":[0.0466,0.0543,0.0568,0.2018]},{"slug":"whipped-soap","title":"Whipped Soap","family":"cosmetic","round":36,"note":"보이지 않는 별 깍지가 휘핑 바디 솝을 한 송이씩 짜는데, 한 바퀴가 앞 바퀴에 반쯤 얹히며 뾰족하게 솟아요. 쟁반이 두 칸 네 줄로 차면 긁개가 거품을 말아 아래로 밀어 내요. K3 은 깍지의 별 꼭짓점 수라서 굵은 골 두세 줄이 가는 골 네다섯 줄로 바뀌고, K1 을 누르면 쟁반을 바로 밀어요.","idea":"An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.","buttons":"K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.","code":"// ===== Patternflow pattern =====\n// Title:   Whipped Soap\n// Family:  cosmetic\n// Idea:    An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after whipped body soap piped into rosettes in handmade soap shops\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1\n//\n// Knob 1: Hue. Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Ridges. The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together.\n// Knob 4: Swirl. How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high.\n// Buttons: K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, ceil, min, max, sqrt, sin, cos, tan, atan2, abs, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The tray: two rosettes across and four down, each in a square 32 LEDs on a side.\nconst COLS = 2, ROWS = 4, NR = COLS * ROWS, CWD = W / COLS, CHT = H / ROWS;\n// The nozzle's path starts R0 LEDs from the rosette's centre; the bead it\n// lays is RB LEDs in radius across and stands SQ times that tall.\nconst R0 = 10, RB = 4.6, SQ = 1.2;\n// How deep the star's notches cut into the bead, and how far the star turns\n// round the bead for each LED the nozzle travels.\nconst NOTCH = 0.45, TWIST = 0.11;\n// The nozzle runs VN LEDs a second at Speed 2.\nconst VN = 30;\n// A turn lands on the foam laid at least LAG LEDs of path earlier: the\n// bead never sits on itself.\nconst LAG = 2.6 * RB;\n// A soft light from the upper left (x right, y down the panel, z out of\n// it), ELV radians above the tray, swings SWING radians either way and back\n// every SWAY seconds at Speed 2, so shadows and sheen slide round the swirls.\nconst ELV = 0.58, TANE = tan(ELV), AZ0 = atan2(-0.65, -0.6), SWING = 0.5, SWAY = 7;\n// Each LED keeps how high the foam stands toward the light, as a slope,\n// looking SHADOW LEDs out at three bearings across the swing.\nconst SHADOW = 16, NAZ = 3;\n// Opening hue: mint, not red.\nconst H0 = 0.45;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, ridges: 5, swirl: 0, begun: false,\n    hgt: new Float32Array(N), lag: new Float32Array(N), t: 0,\n    nx: new Float32Array(N), ny: new Float32Array(N), nz: new Float32Array(N).fill(1),\n    ao: new Float32Array(N).fill(1), hz: new Float32Array(N * NAZ), foam: new Float32Array(N),\n    pend: [], k: 0, pathS: 0, th: 0, ro: null, wait: 0,\n    scraping: false, ys: 0, vol: new Float32Array(W), roll: new Float32Array(W), tmp: new Float32Array(W),\n    dirty: [0, 0, W - 1, H - 1], prof: new Float32Array(41),\n    lit: [0, 0, 0], dark: [0, 0, 0], tray: [0, 0, 0],\n  };\n}\n\n// A rosette's place on the tray, a little off true as by hand, and where the\n// nozzle starts round it.\nfunction newRosette(S, k) {\n  const c = k % COLS, r = floor(k / COLS);\n  return {\n    cx: (c + 0.5) * CWD + (random() - 0.5) * 1.6, cy: (r + 0.5) * CHT + (random() - 0.5) * 1.6,\n    a0: random() * 2 * PI, dir: random() \u003c 0.5 ? 1 : -1, tw: random() * 2 * PI,\n  };\n}\n\n// The nozzle's path: angle th round the centre, out of 2 pi turns in all,\n// the radius closing from R0 to nothing. Each turn closes in by a step: the\n// bead's full width at Swirl -1, so the turns lie side by side; 0.9 of its\n// radius at 0, so each turn rests half on the one before; 0.57 at 1, a tall\n// cone.\nconst turnsOf = (S) => R0 / (RB * (S.swirl \u003c 0 ? 0.9 - 1.1 * S.swirl : 0.9 - 0.33 * S.swirl));\nfunction pathAt(S, ro, th) {\n  const T = 2 * PI * turnsOf(S), u = cl(th / T, 0, 1), r = R0 * (1 - u) ** 0.8;\n  const a = ro.a0 + ro.dir * th;\n  return { x: ro.cx + r * cos(a), y: ro.cy + r * sin(a), r, u, a };\n}\n\n// The star bead's top across its width. The star's outline,\n// rho = RB (1 - NOTCH + NOTCH (1 - |sin(n phi / 2)|)^2), sharp at the points\n// and round in the notches, is walked at 96 angles over its upper half, and\n// each edge between two of them lifts the 41 steps across it lies over.\nconst NP = 96;\nfunction profile(S, alpha, scale) {\n  const pr = S.prof, n = S.ridges;\n  pr.fill(0);\n  let ps = 0, pw = 0;\n  for (let m = 0; m \u003c= NP; m++) {\n    const ph = (m / NP) * PI, cr = 1 - abs(sin((n * (ph + alpha)) / 2));\n    const rho = RB * scale * (1 - NOTCH + NOTCH * cr * cr);\n    const s = ((rho * cos(ph)) / RB) * 20 + 20, w = rho * sin(ph) * SQ;\n    if (m > 0) {\n      const a = min(s, ps), b = max(s, ps);\n      for (let k = max(0, ceil(a)); k \u003c= min(40, floor(b)); k++) {\n        const t = b > a ? (k - ps) / (s - ps) : 0, v = pw + (w - pw) * t;\n        if (v > pr[k]) pr[k] = v;\n      }\n    }\n    ps = s;\n    pw = w;\n  }\n}\n\nfunction grow(S, x0, y0, x1, y1) {\n  const d = S.dirty;\n  d[0] = min(d[0], max(0, floor(x0)));\n  d[1] = min(d[1], max(0, floor(y0)));\n  d[2] = max(d[2], min(W - 1, ceil(x1)));\n  d[3] = max(d[3], min(H - 1, ceil(y1)));\n}\n\n// Height of the foam laid at least LAG earlier, under a point, bilinear.\nfunction lagAt(S, x, y) {\n  const u = cl(x - 0.5, 0, W - 1.001), v = cl(y - 0.5, 0, H - 1.001), i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n  const g = S.lag, p = j * W + i;\n  return (g[p] * (1 - fu) + g[p + 1] * fu) * (1 - fv) + (g[p + W] * (1 - fu) + g[p + W + 1] * fu) * fv;\n}\n\n// Lay the bead at one point of the path.\nfunction lay(S, ro, th) {\n  // The direction of travel, from a step back along the path, which still\n  // has length at the centre where the radius closes to nothing.\n  const P = pathAt(S, ro, th), Q = pathAt(S, ro, max(0, th - 0.15));\n  let tx = P.x - Q.x, ty = P.y - Q.y;\n  const tl = hypot(tx, ty);\n  if (tl \u003c 1e-4) {\n    tx = -sin(P.a) * ro.dir;\n    ty = cos(P.a) * ro.dir;\n  } else {\n    tx /= tl;\n    ty /= tl;\n  }\n  // Over the last tenth the bead thins to a point as the nozzle lifts away.\n  const scale = 1 - 0.75 * sm(0.88, 1, P.u), lift = 2.2 * sm(0.85, 1, P.u);\n  profile(S, ro.tw + TWIST * S.pathS, scale);\n  // The bead rests on the turn before: on the foam under the nozzle or a\n  // little outward of it, whichever stands higher.\n  const ox = P.r > 0.01 ? (P.x - ro.cx) / P.r : 0, oy = P.r > 0.01 ? (P.y - ro.cy) / P.r : 0, rest = 0.45 * RB;\n  const base = max(lagAt(S, P.x, P.y), lagAt(S, P.x + ox * rest, P.y + oy * rest) - 0.6) + lift, pr = S.prof, R = RB + 1;\n  for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, ceil(P.y + R)); y++)\n    for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, ceil(P.x + R)); x++) {\n      const dx = x + 0.5 - P.x, dy = y + 0.5 - P.y, along = dx * tx + dy * ty;\n      if (abs(along) > 0.75) continue;\n      const s = -dx * ty + dy * tx, b = ((s / RB) * 0.5 + 0.5) * 40;\n      if (b \u003c 0 || b > 40) continue;\n      const b0 = floor(b), b1 = min(40, b0 + 1), f = b - b0, w0 = pr[b0], w1 = pr[b1];\n      const v = base + w0 + (w1 - w0) * f, p = y * W + x;\n      if (v > S.hgt[p]) {\n        S.hgt[p] = v;\n        S.pend.push(p, v, S.pathS);\n      }\n    }\n  grow(S, P.x - R - 2, P.y - R - 2, P.x + R + SHADOW, P.y + R + SHADOW);\n}\n\n// Foam laid LAG or more of path ago becomes ground for the next turn.\nfunction settle(S, all) {\n  const q = S.pend;\n  let k = 0;\n  while (k \u003c q.length && (all || S.pathS - q[k + 2] > LAG)) {\n    const p = q[k];\n    if (q[k + 1] > S.lag[p]) S.lag[p] = q[k + 1];\n    k += 3;\n  }\n  if (k) q.splice(0, k);\n}\n\nfunction startScrape(S) {\n  if (S.scraping) return;\n  settle(S, true);\n  S.scraping = true;\n  S.ro = null;\n  S.ys = -8;\n  S.vol.fill(0);\n  S.roll.fill(0);\n}\n\nfunction step(S, dt) {\n  S.t += dt;\n  if (S.scraping) {\n    // A blade runs down the tray at 55 LEDs a second: everything above it\n    // is taken up, rolled ahead of it, and leaves past the bottom edge.\n    const y0 = S.ys, y1 = S.ys + 55 * dt;\n    for (let y = max(0, ceil(y0)); y \u003c min(H, ceil(y1)); y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        S.vol[x] += S.hgt[p];\n        S.hgt[p] = 0;\n        S.lag[p] = 0;\n      }\n    S.ys = y1;\n    // The roll spreads along the blade: its height across the panel is the\n    // scraped foam smoothed over about a rosette's width, lumpy as foam.\n    const v = S.vol, t = S.tmp, rl = S.roll;\n    for (let pass = 0; pass \u003c 2; pass++) {\n      const a = pass ? t : v, b = pass ? rl : t;\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let k = -7; k \u003c= 7; k++) sum += a[cl(x + k, 0, W - 1)];\n        b[x] = sum / 15;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) rl[x] = 0.55 * sqrt(rl[x]) * (0.85 + 0.15 * sin(x * 0.9 + S.ys * 0.21));\n    grow(S, 0, y0 - 3, W - 1, y1 + 10 + SHADOW);\n    if (S.ys > H + 14) {\n      S.scraping = false;\n      S.k = 0;\n      S.wait = 0.5;\n    }\n    return;\n  }\n  if (S.wait > 0) {\n    S.wait -= dt;\n    return;\n  }\n  if (!S.ro) {\n    if (S.k >= NR) {\n      startScrape(S);\n      return;\n    }\n    S.ro = newRosette(S, S.k);\n    S.th = 0;\n  }\n  // The nozzle runs on along its spiral, laying the bead every 0.4 LED.\n  const T = 2 * PI * turnsOf(S);\n  let left = VN * dt;\n  while (left > 0 && S.ro) {\n    const P = pathAt(S, S.ro, S.th), ds = min(0.4, left);\n    // Arc length per radian of the spiral, kept off zero at the centre.\n    const sp = max(1.2, hypot(P.r, (0.8 * R0 * (1 - P.u) ** -0.2) / T));\n    S.th += ds / sp;\n    S.pathS += ds;\n    left -= ds;\n    if (S.th >= T) {\n      lay(S, S.ro, T);\n      settle(S, true);\n      S.ro = null;\n      S.k++;\n      S.wait = 0.3;\n      break;\n    }\n    lay(S, S.ro, S.th);\n    settle(S, false);\n  }\n}\n\n// A whole rosette at once, for the tray the pattern opens on.\nfunction pipeNow(S) {\n  S.ro = newRosette(S, S.k);\n  S.th = 0;\n  while (S.ro) step(S, 0.02);\n  S.wait = 0;\n}\n\n// The roll of scraped foam ahead of the blade, at a column and row.\nfunction rollAt(S, x, y) {\n  const d = y + 0.5 - S.ys;\n  if (!S.scraping || d \u003c 0 || d > 8) return 0;\n  return S.roll[x] * sin((PI * d) / 8) ** 0.7;\n}\n\n// Survey the foam inside the dirty box: its normal, how far it sits in a\n// valley, and its horizon toward the light at each bearing.\nfunction survey(S) {\n  const d = S.dirty;\n  if (d[0] > d[2]) return;\n  const g = S.hgt, ht = (x, y) => {\n    const xi = cl(x, 0, W - 1), yi = cl(y, 0, H - 1);\n    return max(g[yi * W + xi], rollAt(S, xi, yi));\n  };\n  for (let y = d[1]; y \u003c= d[3]; y++)\n    for (let x = d[0]; x \u003c= d[2]; x++) {\n      const p = y * W + x, h0 = ht(x, y);\n      const gx = (ht(x + 1, y) - ht(x - 1, y)) * 0.5, gy = (ht(x, y + 1) - ht(x, y - 1)) * 0.5;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1);\n      S.nx[p] = -gx * inv;\n      S.ny[p] = -gy * inv;\n      S.nz[p] = inv;\n      // Valleys: the foam lower than its ring of neighbours two LEDs out.\n      const ring = (ht(x - 2, y) + ht(x + 2, y) + ht(x, y - 2) + ht(x, y + 2)) * 0.25;\n      S.ao[p] = 1 - 0.4 * sm(0, 2.2, ring - h0);\n      S.foam[p] = sm(0.08, 0.7, h0);\n      for (let k = 0; k \u003c NAZ; k++) {\n        const az = AZ0 + SWING * (k - 1), dx = cos(az), dy = sin(az);\n        let hor = -1;\n        for (let s = 1; s \u003c= SHADOW; s++) {\n          const e = (ht(round(x + dx * s), round(y + dy * s)) - h0) / s;\n          if (e > hor) hor = e;\n        }\n        S.hz[k * N + p] = hor;\n      }\n    }\n  d[0] = W;\n  d[1] = H;\n  d[2] = -1;\n  d[3] = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.ridges = round(cl(k[2], 5, 10));\n  S.swirl = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open on a tray half piped.\n    for (let i = 0; i \u003c 4; i++) pipeNow(S);\n    S.dirty = [0, 0, W - 1, H - 1];\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startScrape(S);\n  step(S, (d * S.speed) / 2);\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Peach, butter and lime go brown or olive when deep: there the foam is\n  // paled, its shadows lifted, and the tray taken down to near black.\n  const warm = sm(0.0, 0.07, hh) * (1 - sm(0.24, 0.34, hh));\n  hsv(h, 0.3 - 0.1 * warm, 1, S.lit);\n  hsv(h + 0.03, 0.5 - 0.2 * warm, 0.5 + 0.14 * warm, S.dark);\n  hsv(h + 0.05, 0.75 - 0.4 * warm, 0.24 - 0.15 * warm, S.tray);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  survey(S);\n  palette(S);\n  const { nx, ny, nz, ao, hz, foam, lit, dark, tray } = S;\n  // Where the light is now, and the half vector to the eye straight above.\n  const az = AZ0 + SWING * sin((2 * PI * S.t) / SWAY), ce = cos(ELV);\n  const lx = cos(az) * ce, ly = sin(az) * ce, lz = sin(ELV);\n  const hl = hypot(lx, ly, lz + 1), hx = lx / hl, hy = ly / hl, hz2 = (lz + 1) / hl;\n  const u = cl((az - AZ0) / SWING + 1, 0, 1.999), k = floor(u), fk = u - k, o0 = k * N, o1 = o0 + N;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, f = foam[p];\n      // Diffuse from the normal, darkened in valleys and where the foam\n      // toward the light stands above the light's own slope.\n      const hor = hz[o0 + p] + (hz[o1 + p] - hz[o0 + p]) * fk;\n      const shade = 1 - 0.8 * sm(TANE - 0.12, TANE + 0.4, hor);\n      const nl = max(0, nx[p] * lx + ny[p] * ly + nz[p] * lz);\n      const l = (0.2 + 0.8 * nl * shade) * ao[p];\n      // A faint sheen: matte foam, not frosting.\n      const nh = max(0, nx[p] * hx + ny[p] * hy + nz[p] * hz2), n2 = nh * nh, n4 = n2 * n2;\n      const sp = 0.14 * n4 * n4 * n4 * n2 * shade * f;\n      // Bare tray: its own colour, lit the same way and shadowed the same.\n      const tl = 0.2 + 0.8 * l;\n      const r = (dark[0] + (lit[0] - dark[0]) * l) * f + tray[0] * tl * (1 - f) + sp;\n      const g = (dark[1] + (lit[1] - dark[1]) * l) * f + tray[1] * tl * (1 - f) + sp;\n      const b = (dark[2] + (lit[2] - dark[2]) * l) * f + tray[2] * tl * (1 - f) + sp;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","layer":{"id":"layer-whipped-soap","type":"code","name":"whipped-soap","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Whipped Soap\n// Family:  cosmetic\n// Idea:    An unseen star nozzle pipes whipped body soap onto a tray one rosette at a time, each a tight spiral that rises as every turn lands on the one before, its star-cut ridges standing in sharp crests over soft valleys in a soft light from the upper left that sways a little, until the tray holds two across and four down and a blade scrapes it flat for the next batch.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 36, after whipped body soap piped into rosettes in handmade soap shops\n// Round:   36\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1\n//\n// Knob 1: Hue. Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive.\n// Knob 2: Speed. At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster.\n// Knob 3: Ridges. The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together.\n// Knob 4: Swirl. How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high.\n// Buttons: K1 tap scrapes the tray flat now, the foam rolling ahead of the blade and out at the bottom, and piping starts again from the top left.\n\nconst W = 64, H = 128, N = W * H;\nconst { floor, ceil, min, max, sqrt, sin, cos, tan, atan2, abs, round, random, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = [v, q, p, p, t, v][i];\n  out[1] = [t, v, v, q, p, p][i];\n  out[2] = [p, p, t, v, v, q][i];\n}\n\n// The tray: two rosettes across and four down, each in a square 32 LEDs on a side.\nconst COLS = 2, ROWS = 4, NR = COLS * ROWS, CWD = W / COLS, CHT = H / ROWS;\n// The nozzle's path starts R0 LEDs from the rosette's centre; the bead it\n// lays is RB LEDs in radius across and stands SQ times that tall.\nconst R0 = 10, RB = 4.6, SQ = 1.2;\n// How deep the star's notches cut into the bead, and how far the star turns\n// round the bead for each LED the nozzle travels.\nconst NOTCH = 0.45, TWIST = 0.11;\n// The nozzle runs VN LEDs a second at Speed 2.\nconst VN = 30;\n// A turn lands on the foam laid at least LAG LEDs of path earlier: the\n// bead never sits on itself.\nconst LAG = 2.6 * RB;\n// A soft light from the upper left (x right, y down the panel, z out of\n// it), ELV radians above the tray, swings SWING radians either way and back\n// every SWAY seconds at Speed 2, so shadows and sheen slide round the swirls.\nconst ELV = 0.58, TANE = tan(ELV), AZ0 = atan2(-0.65, -0.6), SWING = 0.5, SWAY = 7;\n// Each LED keeps how high the foam stands toward the light, as a slope,\n// looking SHADOW LEDs out at three bearings across the swing.\nconst SHADOW = 16, NAZ = 3;\n// Opening hue: mint, not red.\nconst H0 = 0.45;\n\nexport function setup(params) {\n  params.s = {\n    hue: 0, speed: 2, ridges: 5, swirl: 0, begun: false,\n    hgt: new Float32Array(N), lag: new Float32Array(N), t: 0,\n    nx: new Float32Array(N), ny: new Float32Array(N), nz: new Float32Array(N).fill(1),\n    ao: new Float32Array(N).fill(1), hz: new Float32Array(N * NAZ), foam: new Float32Array(N),\n    pend: [], k: 0, pathS: 0, th: 0, ro: null, wait: 0,\n    scraping: false, ys: 0, vol: new Float32Array(W), roll: new Float32Array(W), tmp: new Float32Array(W),\n    dirty: [0, 0, W - 1, H - 1], prof: new Float32Array(41),\n    lit: [0, 0, 0], dark: [0, 0, 0], tray: [0, 0, 0],\n  };\n}\n\n// A rosette's place on the tray, a little off true as by hand, and where the\n// nozzle starts round it.\nfunction newRosette(S, k) {\n  const c = k % COLS, r = floor(k / COLS);\n  return {\n    cx: (c + 0.5) * CWD + (random() - 0.5) * 1.6, cy: (r + 0.5) * CHT + (random() - 0.5) * 1.6,\n    a0: random() * 2 * PI, dir: random() \u003c 0.5 ? 1 : -1, tw: random() * 2 * PI,\n  };\n}\n\n// The nozzle's path: angle th round the centre, out of 2 pi turns in all,\n// the radius closing from R0 to nothing. Each turn closes in by a step: the\n// bead's full width at Swirl -1, so the turns lie side by side; 0.9 of its\n// radius at 0, so each turn rests half on the one before; 0.57 at 1, a tall\n// cone.\nconst turnsOf = (S) => R0 / (RB * (S.swirl \u003c 0 ? 0.9 - 1.1 * S.swirl : 0.9 - 0.33 * S.swirl));\nfunction pathAt(S, ro, th) {\n  const T = 2 * PI * turnsOf(S), u = cl(th / T, 0, 1), r = R0 * (1 - u) ** 0.8;\n  const a = ro.a0 + ro.dir * th;\n  return { x: ro.cx + r * cos(a), y: ro.cy + r * sin(a), r, u, a };\n}\n\n// The star bead's top across its width. The star's outline,\n// rho = RB (1 - NOTCH + NOTCH (1 - |sin(n phi / 2)|)^2), sharp at the points\n// and round in the notches, is walked at 96 angles over its upper half, and\n// each edge between two of them lifts the 41 steps across it lies over.\nconst NP = 96;\nfunction profile(S, alpha, scale) {\n  const pr = S.prof, n = S.ridges;\n  pr.fill(0);\n  let ps = 0, pw = 0;\n  for (let m = 0; m \u003c= NP; m++) {\n    const ph = (m / NP) * PI, cr = 1 - abs(sin((n * (ph + alpha)) / 2));\n    const rho = RB * scale * (1 - NOTCH + NOTCH * cr * cr);\n    const s = ((rho * cos(ph)) / RB) * 20 + 20, w = rho * sin(ph) * SQ;\n    if (m > 0) {\n      const a = min(s, ps), b = max(s, ps);\n      for (let k = max(0, ceil(a)); k \u003c= min(40, floor(b)); k++) {\n        const t = b > a ? (k - ps) / (s - ps) : 0, v = pw + (w - pw) * t;\n        if (v > pr[k]) pr[k] = v;\n      }\n    }\n    ps = s;\n    pw = w;\n  }\n}\n\nfunction grow(S, x0, y0, x1, y1) {\n  const d = S.dirty;\n  d[0] = min(d[0], max(0, floor(x0)));\n  d[1] = min(d[1], max(0, floor(y0)));\n  d[2] = max(d[2], min(W - 1, ceil(x1)));\n  d[3] = max(d[3], min(H - 1, ceil(y1)));\n}\n\n// Height of the foam laid at least LAG earlier, under a point, bilinear.\nfunction lagAt(S, x, y) {\n  const u = cl(x - 0.5, 0, W - 1.001), v = cl(y - 0.5, 0, H - 1.001), i = floor(u), j = floor(v), fu = u - i, fv = v - j;\n  const g = S.lag, p = j * W + i;\n  return (g[p] * (1 - fu) + g[p + 1] * fu) * (1 - fv) + (g[p + W] * (1 - fu) + g[p + W + 1] * fu) * fv;\n}\n\n// Lay the bead at one point of the path.\nfunction lay(S, ro, th) {\n  // The direction of travel, from a step back along the path, which still\n  // has length at the centre where the radius closes to nothing.\n  const P = pathAt(S, ro, th), Q = pathAt(S, ro, max(0, th - 0.15));\n  let tx = P.x - Q.x, ty = P.y - Q.y;\n  const tl = hypot(tx, ty);\n  if (tl \u003c 1e-4) {\n    tx = -sin(P.a) * ro.dir;\n    ty = cos(P.a) * ro.dir;\n  } else {\n    tx /= tl;\n    ty /= tl;\n  }\n  // Over the last tenth the bead thins to a point as the nozzle lifts away.\n  const scale = 1 - 0.75 * sm(0.88, 1, P.u), lift = 2.2 * sm(0.85, 1, P.u);\n  profile(S, ro.tw + TWIST * S.pathS, scale);\n  // The bead rests on the turn before: on the foam under the nozzle or a\n  // little outward of it, whichever stands higher.\n  const ox = P.r > 0.01 ? (P.x - ro.cx) / P.r : 0, oy = P.r > 0.01 ? (P.y - ro.cy) / P.r : 0, rest = 0.45 * RB;\n  const base = max(lagAt(S, P.x, P.y), lagAt(S, P.x + ox * rest, P.y + oy * rest) - 0.6) + lift, pr = S.prof, R = RB + 1;\n  for (let y = max(0, floor(P.y - R)); y \u003c= min(H - 1, ceil(P.y + R)); y++)\n    for (let x = max(0, floor(P.x - R)); x \u003c= min(W - 1, ceil(P.x + R)); x++) {\n      const dx = x + 0.5 - P.x, dy = y + 0.5 - P.y, along = dx * tx + dy * ty;\n      if (abs(along) > 0.75) continue;\n      const s = -dx * ty + dy * tx, b = ((s / RB) * 0.5 + 0.5) * 40;\n      if (b \u003c 0 || b > 40) continue;\n      const b0 = floor(b), b1 = min(40, b0 + 1), f = b - b0, w0 = pr[b0], w1 = pr[b1];\n      const v = base + w0 + (w1 - w0) * f, p = y * W + x;\n      if (v > S.hgt[p]) {\n        S.hgt[p] = v;\n        S.pend.push(p, v, S.pathS);\n      }\n    }\n  grow(S, P.x - R - 2, P.y - R - 2, P.x + R + SHADOW, P.y + R + SHADOW);\n}\n\n// Foam laid LAG or more of path ago becomes ground for the next turn.\nfunction settle(S, all) {\n  const q = S.pend;\n  let k = 0;\n  while (k \u003c q.length && (all || S.pathS - q[k + 2] > LAG)) {\n    const p = q[k];\n    if (q[k + 1] > S.lag[p]) S.lag[p] = q[k + 1];\n    k += 3;\n  }\n  if (k) q.splice(0, k);\n}\n\nfunction startScrape(S) {\n  if (S.scraping) return;\n  settle(S, true);\n  S.scraping = true;\n  S.ro = null;\n  S.ys = -8;\n  S.vol.fill(0);\n  S.roll.fill(0);\n}\n\nfunction step(S, dt) {\n  S.t += dt;\n  if (S.scraping) {\n    // A blade runs down the tray at 55 LEDs a second: everything above it\n    // is taken up, rolled ahead of it, and leaves past the bottom edge.\n    const y0 = S.ys, y1 = S.ys + 55 * dt;\n    for (let y = max(0, ceil(y0)); y \u003c min(H, ceil(y1)); y++)\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        S.vol[x] += S.hgt[p];\n        S.hgt[p] = 0;\n        S.lag[p] = 0;\n      }\n    S.ys = y1;\n    // The roll spreads along the blade: its height across the panel is the\n    // scraped foam smoothed over about a rosette's width, lumpy as foam.\n    const v = S.vol, t = S.tmp, rl = S.roll;\n    for (let pass = 0; pass \u003c 2; pass++) {\n      const a = pass ? t : v, b = pass ? rl : t;\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let k = -7; k \u003c= 7; k++) sum += a[cl(x + k, 0, W - 1)];\n        b[x] = sum / 15;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) rl[x] = 0.55 * sqrt(rl[x]) * (0.85 + 0.15 * sin(x * 0.9 + S.ys * 0.21));\n    grow(S, 0, y0 - 3, W - 1, y1 + 10 + SHADOW);\n    if (S.ys > H + 14) {\n      S.scraping = false;\n      S.k = 0;\n      S.wait = 0.5;\n    }\n    return;\n  }\n  if (S.wait > 0) {\n    S.wait -= dt;\n    return;\n  }\n  if (!S.ro) {\n    if (S.k >= NR) {\n      startScrape(S);\n      return;\n    }\n    S.ro = newRosette(S, S.k);\n    S.th = 0;\n  }\n  // The nozzle runs on along its spiral, laying the bead every 0.4 LED.\n  const T = 2 * PI * turnsOf(S);\n  let left = VN * dt;\n  while (left > 0 && S.ro) {\n    const P = pathAt(S, S.ro, S.th), ds = min(0.4, left);\n    // Arc length per radian of the spiral, kept off zero at the centre.\n    const sp = max(1.2, hypot(P.r, (0.8 * R0 * (1 - P.u) ** -0.2) / T));\n    S.th += ds / sp;\n    S.pathS += ds;\n    left -= ds;\n    if (S.th >= T) {\n      lay(S, S.ro, T);\n      settle(S, true);\n      S.ro = null;\n      S.k++;\n      S.wait = 0.3;\n      break;\n    }\n    lay(S, S.ro, S.th);\n    settle(S, false);\n  }\n}\n\n// A whole rosette at once, for the tray the pattern opens on.\nfunction pipeNow(S) {\n  S.ro = newRosette(S, S.k);\n  S.th = 0;\n  while (S.ro) step(S, 0.02);\n  S.wait = 0;\n}\n\n// The roll of scraped foam ahead of the blade, at a column and row.\nfunction rollAt(S, x, y) {\n  const d = y + 0.5 - S.ys;\n  if (!S.scraping || d \u003c 0 || d > 8) return 0;\n  return S.roll[x] * sin((PI * d) / 8) ** 0.7;\n}\n\n// Survey the foam inside the dirty box: its normal, how far it sits in a\n// valley, and its horizon toward the light at each bearing.\nfunction survey(S) {\n  const d = S.dirty;\n  if (d[0] > d[2]) return;\n  const g = S.hgt, ht = (x, y) => {\n    const xi = cl(x, 0, W - 1), yi = cl(y, 0, H - 1);\n    return max(g[yi * W + xi], rollAt(S, xi, yi));\n  };\n  for (let y = d[1]; y \u003c= d[3]; y++)\n    for (let x = d[0]; x \u003c= d[2]; x++) {\n      const p = y * W + x, h0 = ht(x, y);\n      const gx = (ht(x + 1, y) - ht(x - 1, y)) * 0.5, gy = (ht(x, y + 1) - ht(x, y - 1)) * 0.5;\n      const inv = 1 / sqrt(gx * gx + gy * gy + 1);\n      S.nx[p] = -gx * inv;\n      S.ny[p] = -gy * inv;\n      S.nz[p] = inv;\n      // Valleys: the foam lower than its ring of neighbours two LEDs out.\n      const ring = (ht(x - 2, y) + ht(x + 2, y) + ht(x, y - 2) + ht(x, y + 2)) * 0.25;\n      S.ao[p] = 1 - 0.4 * sm(0, 2.2, ring - h0);\n      S.foam[p] = sm(0.08, 0.7, h0);\n      for (let k = 0; k \u003c NAZ; k++) {\n        const az = AZ0 + SWING * (k - 1), dx = cos(az), dy = sin(az);\n        let hor = -1;\n        for (let s = 1; s \u003c= SHADOW; s++) {\n          const e = (ht(round(x + dx * s), round(y + dy * s)) - h0) / s;\n          if (e > hor) hor = e;\n        }\n        S.hz[k * N + p] = hor;\n      }\n    }\n  d[0] = W;\n  d[1] = H;\n  d[2] = -1;\n  d[3] = -1;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 5, 0.06], d = cl(dt || 0, 0, 0.1);\n  S.hue = k[0];\n  S.speed = cl(k[1], 0.2, 3);\n  S.ridges = round(cl(k[2], 5, 10));\n  S.swirl = cl(k[3], -1, 1);\n  if (!S.begun) {\n    // Open on a tray half piped.\n    for (let i = 0; i \u003c 4; i++) pipeNow(S);\n    S.dirty = [0, 0, W - 1, H - 1];\n    S.begun = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startScrape(S);\n  step(S, (d * S.speed) / 2);\n}\n\nfunction palette(S) {\n  const h = S.hue + H0, hh = h - floor(h);\n  // Peach, butter and lime go brown or olive when deep: there the foam is\n  // paled, its shadows lifted, and the tray taken down to near black.\n  const warm = sm(0.0, 0.07, hh) * (1 - sm(0.24, 0.34, hh));\n  hsv(h, 0.3 - 0.1 * warm, 1, S.lit);\n  hsv(h + 0.03, 0.5 - 0.2 * warm, 0.5 + 0.14 * warm, S.dark);\n  hsv(h + 0.05, 0.75 - 0.4 * warm, 0.24 - 0.15 * warm, S.tray);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  survey(S);\n  palette(S);\n  const { nx, ny, nz, ao, hz, foam, lit, dark, tray } = S;\n  // Where the light is now, and the half vector to the eye straight above.\n  const az = AZ0 + SWING * sin((2 * PI * S.t) / SWAY), ce = cos(ELV);\n  const lx = cos(az) * ce, ly = sin(az) * ce, lz = sin(ELV);\n  const hl = hypot(lx, ly, lz + 1), hx = lx / hl, hy = ly / hl, hz2 = (lz + 1) / hl;\n  const u = cl((az - AZ0) / SWING + 1, 0, 1.999), k = floor(u), fk = u - k, o0 = k * N, o1 = o0 + N;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, f = foam[p];\n      // Diffuse from the normal, darkened in valleys and where the foam\n      // toward the light stands above the light's own slope.\n      const hor = hz[o0 + p] + (hz[o1 + p] - hz[o0 + p]) * fk;\n      const shade = 1 - 0.8 * sm(TANE - 0.12, TANE + 0.4, hor);\n      const nl = max(0, nx[p] * lx + ny[p] * ly + nz[p] * lz);\n      const l = (0.2 + 0.8 * nl * shade) * ao[p];\n      // A faint sheen: matte foam, not frosting.\n      const nh = max(0, nx[p] * hx + ny[p] * hy + nz[p] * hz2), n2 = nh * nh, n4 = n2 * n2;\n      const sp = 0.14 * n4 * n4 * n4 * n2 * shade * f;\n      // Bare tray: its own colour, lit the same way and shadowed the same.\n      const tl = 0.2 + 0.8 * l;\n      const r = (dark[0] + (lit[0] - dark[0]) * l) * f + tray[0] * tl * (1 - f) + sp;\n      const g = (dark[1] + (lit[1] - dark[1]) * l) * f + tray[1] * tl * (1 - f) + sp;\n      const b = (dark[2] + (lit[2] - dark[2]) * l) * f + tray[2] * tl * (1 - f) + sp;\n      display.setPixel(x, y, round(255 * min(1, r)), round(255 * min(1, g)), round(255 * min(1, b)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Ridges=5..10, Swirl=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the soap and the tray under it round the whole wheel together. At 0 mint on deep teal; at 0.1 powder blue on navy; at 0.2 periwinkle on indigo; at 0.3 lilac on plum; at 0.4 orchid on deep magenta; at 0.5 rose on wine; at 0.6 peach and at 0.7 butter yellow, both on a near-black tray; at 0.8 pistachio on deep green. From 0.55 to 0.89 the foam is paled, its shadows lifted and the tray taken down, so nothing reads brown or olive."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the nozzle runs 30 LEDs a second, a rosette takes about 3 seconds, an empty tray fills in about 26 and the scrape takes 3; the light swings round and back every 7 seconds. At 0.2 all of it ten times slower, at 3 one and a half times faster."},{"name":"Ridges","min":5,"max":10,"about":"The points of the star nozzle, 5 to 10, and the star turns slowly as it goes so the ridges wind across each turn: at 5 two or three broad ridges with deep valleys between them, at 10 four or five fine ones close together."},{"name":"Swirl","min":-1,"max":1,"about":"How far each turn closes in, so how many turns a rosette takes: at -1 one turn lying flat, a coil 5 LEDs high; at 0 two and a half turns, each resting half on the one before, rising to a soft point about 12 high; at 1 nearly four turns, a tall tight swirl 17 high."}],"start":[0,2,5,0.06],"measures":{"motion":0.0309,"detail":0.0537,"edges":0.3642,"complexity":1.1069,"coverage":0.9764,"colour":0.1274,"drift":0.0699},"knobResponse":[0.1534,0.0635,0.0442,0.1089]},{"slug":"wireworld","title":"Wireworld","family":"automata","round":16,"note":"구리선 회로를 전자가 파란 머리와 주황 꼬리로 달려요. 둘레 12, 18, 24, 30칸 클록 넷의 신호가 다이오드와 지연선을 지나 XOR 과 OR 게이트에서 만나고, 아래 램프 셋이 그 답을 깜박여요. K1 을 누르면 네 줄에 전자 여섯 개씩이 박자를 맞춰 들어가요.","idea":"A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.","buttons":"K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.","code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","layer":{"id":"layer-wireworld","type":"code","name":"wireworld","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":3,"about":"0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon."},{"name":"Speed","min":0,"max":4,"about":"Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell."},{"name":"Pulses","min":1,"max":3,"about":"One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out."},{"name":"Glow","min":0,"max":1,"about":"The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s."}],"start":[0,2,1,0.06],"measures":{"motion":0.2605,"detail":0.0895,"edges":0.7694,"complexity":0.461,"coverage":0.3111,"colour":0.2355,"drift":0.0855},"knobResponse":[0.0911,0.0637,0.0514,0.0736]},{"slug":"woodpecker","title":"Woodpecker","family":"bird","round":21,"note":"새벽 숲의 자작나무 줄기가 128줄을 다 쓰고, 오색딱따구리가 뻣뻣한 꽁지로 버티며 껑충껑충 오르다 멈춰 머리가 흐려지도록 두드려 부스러기를 튀기고 구멍을 내요. 꼭대기에 닿으면 물결치듯 날아 밑동으로 내려가 다시 오르고, K1 을 누르면 다음 걸음 뒤에 바로 두드려요.","idea":"A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.","buttons":"K1 tap makes the male stop and drum after his next hop.","code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","layer":{"id":"layer-woodpecker","type":"code","name":"woodpecker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tree","min":0,"max":2,"about":"A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower."},{"name":"Birds","min":1,"max":4,"about":"One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk."},{"name":"Light","min":0,"max":1,"about":"Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west."}],"start":[0,2,1,0.06],"measures":{"motion":0.092,"detail":0.0823,"edges":0.3471,"complexity":2.5826,"coverage":0.9376,"colour":0.1398,"drift":0.0454},"knobResponse":[0.1005,0.0437,0.0473,0.1346]},{"slug":"wythoff-nim","title":"Wythoff Nim","family":"algo","round":28,"note":"위토프 게임의 스프라그-그런디 값 표를 모서리로 세웠어요. 지는 자리(값 0)는 황금비 두 줄을 따라 금빛이고, 값 0, 1, 2 가 차례로 쓸고 지나가며 저마다의 두 줄에서 번쩍였다 표로 가라앉아요. 누르면 흰 말이 떨어져 이기는 수로 모서리까지 게임을 해요.","idea":"The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.","buttons":"K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.","code":"// ===== Patternflow pattern =====\n// Title:   Wythoff Nim\n// Family:  algo\n// Idea:    The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Wythoff's game (Willem Abraham Wythoff, 1907) and its Sprague-Grundy values (Roland Sprague 1935, Patrick Grundy 1939), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple.\n// Knob 2: Speed. How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half.\n// Knob 3: Zoom. LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays.\n// Knob 4: Glow. How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds.\n// Buttons: K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two heaps of x and y counters. A move takes any number from one heap, or\n// the same number from both; whoever takes the last counter wins. A\n// position's Grundy value is the smallest number not among the values one\n// move away: left along its row, up its column, up its diagonal. The\n// positions of value 0 are the ones to move to: (floor(n phi),\n// floor(n phi^2)) and their mirror images, on two rays of slopes phi and\n// 1/phi. Every other value gathers along the same two rays, wobbling off\n// them without ever falling into a period (Dress, Flammenkamp and Pink,\n// 1999), and down the middle the values grow like x + y.\nconst T = 82;\nconst G = new Int16Array(T * T);\nlet GALL = 0;\n{\n  const mark = new Int32Array(4 * T);\n  for (let y = 0, id = 1; y \u003c T; y++)\n    for (let x = 0; x \u003c T; x++, id++) {\n      for (let i = 0; i \u003c x; i++) mark[G[y * T + i]] = id;\n      for (let j = 0; j \u003c y; j++) mark[G[j * T + x]] = id;\n      for (let d = 1; d \u003c= min(x, y); d++) mark[G[(y - d) * T + x - d]] = id;\n      let m = 0;\n      while (mark[m] === id) m++;\n      G[y * T + x] = m;\n      GALL = max(GALL, m);\n    }\n}\n// The cells of each value, for the sweep.\nconst BY = Array.from({ length: GALL + 1 }, () => []);\nfor (let c = 0; c \u003c T * T; c++) BY[G[c]].push(c);\n\n// The table stands on its corner: position (x, y) is drawn at u = x - y\n// across and v = x + y down, s LEDs to a unit, with (0, 0) at the top.\n// Taking from one heap moves up and to the side at 45 degrees; taking from\n// both moves straight up, and the two rays run down from the corner 13\n// degrees either side of the middle. At Zoom 1 a cell is the LED at its\n// centre and the one above it.\nfunction place(P, s) {\n  P.s = s;\n  P.vis = 0;\n  const top = 0.5 + s;\n  for (let p = 0; p \u003c N; p++) {\n    const u = ((p % W) + 0.5 - 32.5) / s, v = (floor(p / W) + 0.5 - top) / s + 1e-3;\n    const xf = (u + v) / 2, yf = (v - u) / 2, x = round(xf), y = round(yf);\n    if (x \u003c 0 || y \u003c 0 || x >= T || y >= T) {\n      P.ci[p] = -1;\n      continue;\n    }\n    const c = y * T + x;\n    P.ci[p] = c;\n    P.vis = max(P.vis, G[c]);\n    // How far into the cell, in LEDs, for the lines between cells.\n    P.edge[p] = min(0.5 - abs(xf - x), 0.5 - abs(yf - y)) * 1.414 * s;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    ts: 0, K: -1, hue: -1, glow: 0.06, s: 0, vis: 0,\n    ci: new Int32Array(N), edge: new Float32Array(N),\n    L: new Float32Array(T * T), pw: new Float32Array(T * T), pl: new Float32Array(T * T),\n    pal: new Float32Array((GALL + 1) * 3), pb: new Float32Array((GALL + 1) * 3), game: null,\n  });\n  place(P, 1);\n}\n\n// The sweep's value climbs slowly through the small values, where the rays\n// are, and faster through the large ones: K = 12 (e^(2.5 t / 12) - 1), t in\n// seconds at Speed 2.\nconst C = 12, RATE = 2.5;\n\nfunction light(P, g) {\n  if (g >= 0 && g \u003c= GALL) for (const c of BY[g]) P.L[c] = 1;\n}\n\n// A move: to a position of value 0 if there is one (the winner's move),\n// otherwise a few counters from a heap or both (the loser's).\nfunction nextMove(x, y) {\n  if (G[y * T + x] !== 0) {\n    for (let i = 0; i \u003c x; i++) if (G[y * T + i] === 0) return [i, y, 1];\n    for (let j = 0; j \u003c y; j++) if (G[j * T + x] === 0) return [x, j, 1];\n    for (let q = min(x, y); q > 0; q--) if (G[(y - q) * T + x - q] === 0) return [x - q, y - q, 1];\n  }\n  for (;;) {\n    const kind = floor(random() * 3), a = kind === 0 ? x : kind === 1 ? y : min(x, y);\n    if (a \u003c 1) continue;\n    const q = 1 + floor(random() * min(a, 9));\n    return [kind === 1 ? x : x - q, kind === 0 ? y : y - q, 0];\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const s = round(cl(k[2], 1, 4));\n  if (abs(s - P.s) > 1e-3) place(P, s);\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    hsv(P.hue + 0.13, 0.8, 1, P.pal, 0);\n    hsv(P.hue + 0.13, 0.5, 1, P.pb, 0);\n    for (let g = 1; g \u003c= GALL; g++) {\n      const h = P.hue + 0.1 - 0.5 * (1 - exp(-g / 14)) - g / 900;\n      hsv(h, 0.85, 0.17 + 0.6 * exp(-g / 35), P.pal, g * 3);\n      hsv(h, 0.5, 1, P.pb, g * 3);\n    }\n  }\n  P.glow = cl(k[3], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2, ds = d * sp;\n\n  // The sweep.\n  const fade = exp(-ds / (0.45 + 1.6 * P.glow));\n  for (let c = 0; c \u003c T * T; c++) P.L[c] *= fade;\n  const k0 = P.K;\n  P.ts += ds;\n  P.K = P.ts \u003c 0 ? -1 : floor(C * (exp((P.ts * RATE) / C) - 1) + 1e-6);\n  for (let g = max(k0 + 1, 0); g \u003c= P.K; g++) light(P, g);\n  if (P.K > P.vis + 2) (P.ts = -0.8), (P.K = -1);\n\n  // The game.\n  const gd = d * (0.5 + 0.5 * sp), gone = exp(-d / (P.game ? 8 : 1.2));\n  for (let c = 0; c \u003c T * T; c++) (P.pw[c] *= gone), (P.pl[c] *= gone);\n  if (input.btnPressed && input.btnPressed[0]) {\n    const vmax = (H - 1.5 - P.s) / P.s, v = round(vmax * (0.6 + 0.35 * random()));\n    let u = round((random() - 0.5) * 1.6 * min(v, 31 / P.s));\n    if ((u + v) & 1) u += u > 0 ? -1 : 1;\n    const x = (u + v) >> 1, y = (v - u) >> 1;\n    P.game = { x, y, cx: x, cy: y, m: nextMove(x, y), f: 0, wait: 0.4 };\n  }\n  const gm = P.game;\n  if (gm) {\n    if (gm.wait > 0) gm.wait -= gd * 2;\n    else {\n      const [tx, ty, win] = gm.m, len = max(abs(tx - gm.x), abs(ty - gm.y));\n      gm.f = min(1, gm.f + (gd * 30) / (len + 8));\n      const sx = Math.sign(tx - gm.x), sy = Math.sign(ty - gm.y), at = round(gm.f * len);\n      for (let i = 0; i \u003c= at; i++) (win ? P.pw : P.pl)[(gm.y + sy * i) * T + gm.x + sx * i] = 1;\n      gm.cx = gm.x + sx * gm.f * len;\n      gm.cy = gm.y + sy * gm.f * len;\n      if (gm.f >= 1) {\n        gm.x = tx;\n        gm.y = ty;\n        gm.f = 0;\n        gm.wait = 0.5;\n        if (win) P.L[ty * T + tx] = 1;\n        if (tx === 0 && ty === 0) P.game = null;\n        else gm.m = nextMove(tx, ty);\n      }\n    }\n  }\n}\n\nconst WIN = [255, 226, 130], LOSE = [90, 180, 255];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const base = 1 - 0.85 * P.glow, grid = P.s > 2 ? 0.6 : 0, gm = P.game, S = P.s;\n  // The counter, a diamond of light where the game stands.\n  const ux = gm ? 32 + S * (gm.cx - gm.cy) : -99, vy = gm ? S + S * (gm.cx + gm.cy) - (S === 1 ? 0.5 : 0) : -99;\n  for (let p = 0; p \u003c N; p++) {\n    const c = P.ci[p], X = p % W, Y = floor(p / W);\n    if (c \u003c 0) {\n      display.setPixel(X, Y, 0, 0, 0);\n      continue;\n    }\n    const q = G[c] * 3, l = P.L[c], a = P.pw[c] * 0.8, b = P.pl[c] * 0.75, f = q ? base : 0.6 + 0.4 * base;\n    const e = 1 - grid * cl(1 - P.edge[p] * 1.6, 0, 1);\n    // A lit cell flashes white, fades to its own colour at full strength\n    // and then down into the table.\n    const m = min(1, l * 1.5), wt = l * l * l;\n    let r = P.pal[q] * f, g = P.pal[q + 1] * f, bl = P.pal[q + 2] * f;\n    r += (P.pb[q] + (255 - P.pb[q]) * wt - r) * m;\n    g += (P.pb[q + 1] + (255 - P.pb[q + 1]) * wt - g) * m;\n    bl += (P.pb[q + 2] + (255 - P.pb[q + 2]) * wt - bl) * m;\n    r += (LOSE[0] - r) * b + (WIN[0] - r) * a;\n    g += (LOSE[1] - g) * b + (WIN[1] - g) * a;\n    bl += (LOSE[2] - bl) * b + (WIN[2] - bl) * a;\n    const k = cl(S + 1.6 - abs(X - ux) - abs(Y - vy), 0, 1.6) / 1.6;\n    if (k > 0) (r += (255 - r) * k), (g += (255 - g) * k), (bl += (255 - bl) * k);\n    display.setPixel(X, Y, r * e, g * e, bl * e);\n  }\n}\n","layer":{"id":"layer-wythoff-nim","type":"code","name":"wythoff-nim","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Wythoff Nim\n// Family:  algo\n// Idea:    The table of Sprague-Grundy values of Wythoff's game stands on its corner, the losing positions in gold along two golden-ratio rays, and a sweep lights every position of value 0, then 1, then 2 and on, so each value flashes along its own pair of rays and fades back into the table.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Wythoff's game (Willem Abraham Wythoff, 1907) and its Sprague-Grundy values (Roland Sprague 1935, Patrick Grundy 1939), pattern round 28\n// Round:   28\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1\n//\n// Knob 1: Hue. Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple.\n// Knob 2: Speed. How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half.\n// Knob 3: Zoom. LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays.\n// Knob 4: Glow. How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds.\n// Buttons: K1 tap drops a counter, a white diamond, low on the table and plays the game out to the corner: the winner's moves, each onto a position of value 0, light up gold, the loser's blue.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, round, abs, exp, random } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Two heaps of x and y counters. A move takes any number from one heap, or\n// the same number from both; whoever takes the last counter wins. A\n// position's Grundy value is the smallest number not among the values one\n// move away: left along its row, up its column, up its diagonal. The\n// positions of value 0 are the ones to move to: (floor(n phi),\n// floor(n phi^2)) and their mirror images, on two rays of slopes phi and\n// 1/phi. Every other value gathers along the same two rays, wobbling off\n// them without ever falling into a period (Dress, Flammenkamp and Pink,\n// 1999), and down the middle the values grow like x + y.\nconst T = 82;\nconst G = new Int16Array(T * T);\nlet GALL = 0;\n{\n  const mark = new Int32Array(4 * T);\n  for (let y = 0, id = 1; y \u003c T; y++)\n    for (let x = 0; x \u003c T; x++, id++) {\n      for (let i = 0; i \u003c x; i++) mark[G[y * T + i]] = id;\n      for (let j = 0; j \u003c y; j++) mark[G[j * T + x]] = id;\n      for (let d = 1; d \u003c= min(x, y); d++) mark[G[(y - d) * T + x - d]] = id;\n      let m = 0;\n      while (mark[m] === id) m++;\n      G[y * T + x] = m;\n      GALL = max(GALL, m);\n    }\n}\n// The cells of each value, for the sweep.\nconst BY = Array.from({ length: GALL + 1 }, () => []);\nfor (let c = 0; c \u003c T * T; c++) BY[G[c]].push(c);\n\n// The table stands on its corner: position (x, y) is drawn at u = x - y\n// across and v = x + y down, s LEDs to a unit, with (0, 0) at the top.\n// Taking from one heap moves up and to the side at 45 degrees; taking from\n// both moves straight up, and the two rays run down from the corner 13\n// degrees either side of the middle. At Zoom 1 a cell is the LED at its\n// centre and the one above it.\nfunction place(P, s) {\n  P.s = s;\n  P.vis = 0;\n  const top = 0.5 + s;\n  for (let p = 0; p \u003c N; p++) {\n    const u = ((p % W) + 0.5 - 32.5) / s, v = (floor(p / W) + 0.5 - top) / s + 1e-3;\n    const xf = (u + v) / 2, yf = (v - u) / 2, x = round(xf), y = round(yf);\n    if (x \u003c 0 || y \u003c 0 || x >= T || y >= T) {\n      P.ci[p] = -1;\n      continue;\n    }\n    const c = y * T + x;\n    P.ci[p] = c;\n    P.vis = max(P.vis, G[c]);\n    // How far into the cell, in LEDs, for the lines between cells.\n    P.edge[p] = min(0.5 - abs(xf - x), 0.5 - abs(yf - y)) * 1.414 * s;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  const rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n  for (let c = 0; c \u003c 3; c++) out[o + c] = rgb[c] * 255;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    ts: 0, K: -1, hue: -1, glow: 0.06, s: 0, vis: 0,\n    ci: new Int32Array(N), edge: new Float32Array(N),\n    L: new Float32Array(T * T), pw: new Float32Array(T * T), pl: new Float32Array(T * T),\n    pal: new Float32Array((GALL + 1) * 3), pb: new Float32Array((GALL + 1) * 3), game: null,\n  });\n  place(P, 1);\n}\n\n// The sweep's value climbs slowly through the small values, where the rays\n// are, and faster through the large ones: K = 12 (e^(2.5 t / 12) - 1), t in\n// seconds at Speed 2.\nconst C = 12, RATE = 2.5;\n\nfunction light(P, g) {\n  if (g >= 0 && g \u003c= GALL) for (const c of BY[g]) P.L[c] = 1;\n}\n\n// A move: to a position of value 0 if there is one (the winner's move),\n// otherwise a few counters from a heap or both (the loser's).\nfunction nextMove(x, y) {\n  if (G[y * T + x] !== 0) {\n    for (let i = 0; i \u003c x; i++) if (G[y * T + i] === 0) return [i, y, 1];\n    for (let j = 0; j \u003c y; j++) if (G[j * T + x] === 0) return [x, j, 1];\n    for (let q = min(x, y); q > 0; q--) if (G[(y - q) * T + x - q] === 0) return [x - q, y - q, 1];\n  }\n  for (;;) {\n    const kind = floor(random() * 3), a = kind === 0 ? x : kind === 1 ? y : min(x, y);\n    if (a \u003c 1) continue;\n    const q = 1 + floor(random() * min(a, 9));\n    return [kind === 1 ? x : x - q, kind === 0 ? y : y - q, 0];\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  const s = round(cl(k[2], 1, 4));\n  if (abs(s - P.s) > 1e-3) place(P, s);\n  if (k[0] !== P.hue) {\n    P.hue = k[0];\n    hsv(P.hue + 0.13, 0.8, 1, P.pal, 0);\n    hsv(P.hue + 0.13, 0.5, 1, P.pb, 0);\n    for (let g = 1; g \u003c= GALL; g++) {\n      const h = P.hue + 0.1 - 0.5 * (1 - exp(-g / 14)) - g / 900;\n      hsv(h, 0.85, 0.17 + 0.6 * exp(-g / 35), P.pal, g * 3);\n      hsv(h, 0.5, 1, P.pb, g * 3);\n    }\n  }\n  P.glow = cl(k[3], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2, ds = d * sp;\n\n  // The sweep.\n  const fade = exp(-ds / (0.45 + 1.6 * P.glow));\n  for (let c = 0; c \u003c T * T; c++) P.L[c] *= fade;\n  const k0 = P.K;\n  P.ts += ds;\n  P.K = P.ts \u003c 0 ? -1 : floor(C * (exp((P.ts * RATE) / C) - 1) + 1e-6);\n  for (let g = max(k0 + 1, 0); g \u003c= P.K; g++) light(P, g);\n  if (P.K > P.vis + 2) (P.ts = -0.8), (P.K = -1);\n\n  // The game.\n  const gd = d * (0.5 + 0.5 * sp), gone = exp(-d / (P.game ? 8 : 1.2));\n  for (let c = 0; c \u003c T * T; c++) (P.pw[c] *= gone), (P.pl[c] *= gone);\n  if (input.btnPressed && input.btnPressed[0]) {\n    const vmax = (H - 1.5 - P.s) / P.s, v = round(vmax * (0.6 + 0.35 * random()));\n    let u = round((random() - 0.5) * 1.6 * min(v, 31 / P.s));\n    if ((u + v) & 1) u += u > 0 ? -1 : 1;\n    const x = (u + v) >> 1, y = (v - u) >> 1;\n    P.game = { x, y, cx: x, cy: y, m: nextMove(x, y), f: 0, wait: 0.4 };\n  }\n  const gm = P.game;\n  if (gm) {\n    if (gm.wait > 0) gm.wait -= gd * 2;\n    else {\n      const [tx, ty, win] = gm.m, len = max(abs(tx - gm.x), abs(ty - gm.y));\n      gm.f = min(1, gm.f + (gd * 30) / (len + 8));\n      const sx = Math.sign(tx - gm.x), sy = Math.sign(ty - gm.y), at = round(gm.f * len);\n      for (let i = 0; i \u003c= at; i++) (win ? P.pw : P.pl)[(gm.y + sy * i) * T + gm.x + sx * i] = 1;\n      gm.cx = gm.x + sx * gm.f * len;\n      gm.cy = gm.y + sy * gm.f * len;\n      if (gm.f >= 1) {\n        gm.x = tx;\n        gm.y = ty;\n        gm.f = 0;\n        gm.wait = 0.5;\n        if (win) P.L[ty * T + tx] = 1;\n        if (tx === 0 && ty === 0) P.game = null;\n        else gm.m = nextMove(tx, ty);\n      }\n    }\n  }\n}\n\nconst WIN = [255, 226, 130], LOSE = [90, 180, 255];\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const base = 1 - 0.85 * P.glow, grid = P.s > 2 ? 0.6 : 0, gm = P.game, S = P.s;\n  // The counter, a diamond of light where the game stands.\n  const ux = gm ? 32 + S * (gm.cx - gm.cy) : -99, vy = gm ? S + S * (gm.cx + gm.cy) - (S === 1 ? 0.5 : 0) : -99;\n  for (let p = 0; p \u003c N; p++) {\n    const c = P.ci[p], X = p % W, Y = floor(p / W);\n    if (c \u003c 0) {\n      display.setPixel(X, Y, 0, 0, 0);\n      continue;\n    }\n    const q = G[c] * 3, l = P.L[c], a = P.pw[c] * 0.8, b = P.pl[c] * 0.75, f = q ? base : 0.6 + 0.4 * base;\n    const e = 1 - grid * cl(1 - P.edge[p] * 1.6, 0, 1);\n    // A lit cell flashes white, fades to its own colour at full strength\n    // and then down into the table.\n    const m = min(1, l * 1.5), wt = l * l * l;\n    let r = P.pal[q] * f, g = P.pal[q + 1] * f, bl = P.pal[q + 2] * f;\n    r += (P.pb[q] + (255 - P.pb[q]) * wt - r) * m;\n    g += (P.pb[q + 1] + (255 - P.pb[q + 1]) * wt - g) * m;\n    bl += (P.pb[q + 2] + (255 - P.pb[q + 2]) * wt - bl) * m;\n    r += (LOSE[0] - r) * b + (WIN[0] - r) * a;\n    g += (LOSE[1] - g) * b + (WIN[1] - g) * a;\n    bl += (LOSE[2] - bl) * b + (WIN[2] - bl) * a;\n    const k = cl(S + 1.6 - abs(X - ux) - abs(Y - vy), 0, 1.6) / 1.6;\n    if (k > 0) (r += (255 - r) * k), (g += (255 - g) * k), (bl += (255 - bl) * k);\n    display.setPixel(X, Y, r * e, g * e, bl * e);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Zoom=1..4, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour round the wheel together. At 0 the positions of value 0 are gold, the small values round them crimson and the large ones navy going to teal; at 0.25 the zeros are green on red and purple."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sweep climbs through the values; it lingers on the small ones and hurries through the large. At 2 it lights value 1 after 0.4 s, value 10 after 3 s and value 50 after 8 s, and at Zoom 1 it reaches 102, the largest value on the panel, after 11 s and starts again from 0. At 0.2 it all takes ten times as long. The game slows down only by half."},{"name":"Zoom","min":1,"max":4,"about":"LEDs to a unit of the table, 1 to 4 in whole steps. At 1 the panel holds every position of up to 126 counters, a cell to each pair of LEDs; at 4 it holds the corner up to about 30 counters as diamonds eight LEDs across with a dark line between them, and the zeros can be counted along their rays."},{"name":"Glow","min":0,"max":1,"about":"How much of the light comes from the sweep. At 0 the whole table shows in its colours and the sweep runs over it as sparks; at 1 the table stands dark but for its zeros, and each position lights in its own colour when the sweep reaches its value and fades over about two seconds."}],"start":[0,2,1,0.06],"measures":{"motion":0.0944,"detail":0.0878,"edges":0.5187,"complexity":1.051,"coverage":0.875,"colour":0.3599,"drift":0.0676},"knobResponse":[0.2558,0.0431,0.2303,0.1714]},{"slug":"zen-garden","title":"Zen Garden","family":"line","round":18,"note":"곧장 내려다본 마른 돌 정원이에요. 갈퀴 자국이 이끼 두른 돌 둘레에서 고리로 휘고, 갈퀴가 15줄 띠씩 줄을 다시 그으며 떨어진 단풍잎을 거둬 가요. K1 을 돌리면 아침 해가 저녁 해로 옮겨 가며 돌 그림자와 고리의 밝은 쪽이 따라 돌아요.","idea":"A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","layer":{"id":"layer-zen-garden","type":"code","name":"zen-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds."},{"name":"Stones","min":3,"max":5,"about":"Three, four or five stone groups, each in its moss collar with two or three rings raked round it."},{"name":"Wind","min":0,"max":1,"about":"Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves."}],"start":[0,2,3,0.06],"measures":{"motion":0.0392,"detail":0.2481,"edges":0.4637,"complexity":1.6255,"coverage":0.96,"colour":0.1203,"drift":0.0759},"knobResponse":[0.1756,0.245,0.2327,0.2481]},{"slug":"zeta-loops","title":"Zeta Loops","family":"line","round":29,"note":"리만 제타 함수를 임계선 위에서 t 를 올리며 그려요. 실수축이 패널 위로 서 있고, 밝은 머리가 고리를 돌다가 영점마다 원점을 정확히 지나며 원점에서 고리가 퍼져요. K3 으로 임계선에서 벗어나면 고리가 원점을 비껴가고, K1 을 누르면 머리가 다음 영점까지 달려가요.","idea":"A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.","buttons":"K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.","code":"// ===== Patternflow pattern =====\n// Title:   Zeta Loops\n// Family:  line\n// Idea:    A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Riemann zeta function on the critical line (Bernhard Riemann, 1859), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1\n//\n// Knob 1: Hue. Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail.\n// Knob 2: Speed. How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower.\n// Knob 3: Sigma. How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn.\n// Knob 4: Trail. How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin.\n// Buttons: K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, sqrt, hypot, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The plane turned a quarter turn: the real axis runs up the panel through\n// column OX, the imaginary axis runs left, the origin sits OY rows down.\nconst OX = 32, OY = 92;\n// LEDs to one unit at t. The loops widen with t faster than the panel does,\n// so the view backs off a little as t climbs: 26 at the start, 15 by\n// t = 118, which keeps most of each loop inside the side walls and still\n// lets the later loops come out bigger.\nconst scaleAt = (t) => 26 / (1 + t / 70) ** 0.55;\n// t runs from 0 to TEND and starts again. Samples are DT apart in t.\nconst TEND = 118, DT = 0.008, CAP = 16384;\n\n// Euler-Maclaurin summation: the first N-1 terms of the Dirichlet series,\n// the integral of the tail, and six Bernoulli corrections. With N past\n// t / 2 pi the corrections shrink fast, and ten more terms make it good to\n// many digits at the t this pattern reaches.\nconst NMAX = 64;\nconst LN = new Float64Array(NMAX + 1).map((_, n) => (n ? log(n) : 0));\nconst BF = [1 / 12, -1 / 720, 1 / 30240, -1 / 1209600, 1 / 47900160, -691 / 1307674368000];\nfunction zeta(sr, si, out) {\n  const n0 = min(NMAX - 1, floor(abs(si) / (2 * PI)) + 10);\n  let zr = 0, zi = 0;\n  for (let n = 1; n \u003c n0; n++) {\n    const m = exp(-sr * LN[n]), a = -si * LN[n];\n    zr += m * cos(a);\n    zi += m * sin(a);\n  }\n  // N^-s, then N^(1-s) / (s - 1) and half of N^-s.\n  const L = LN[n0], m = exp(-sr * L), a = -si * L, pr = m * cos(a), pi = m * sin(a);\n  const dr = sr - 1, d2 = dr * dr + si * si, nr = n0 * pr, ni = n0 * pi;\n  zr += (nr * dr + ni * si) / d2 + pr / 2;\n  zi += (ni * dr - nr * si) / d2 + pi / 2;\n  // B2k / (2k)! times s(s+1)...(s+2k-2) times N^(-s-2k+1).\n  let cr = pr / n0, ci = pi / n0, fr = sr, fi = si;\n  for (let k = 0; k \u003c 6; k++) {\n    const c = BF[k];\n    zr += c * (fr * cr - fi * ci);\n    zi += c * (fr * ci + fi * cr);\n    const a1 = sr + 2 * k + 1, a2 = sr + 2 * k + 2;\n    const gr = fr * a1 - fi * si, gi = fr * si + fi * a1;\n    fr = gr * a2 - gi * si;\n    fi = gr * si + gi * a2;\n    cr /= n0 * n0;\n    ci /= n0 * n0;\n  }\n  out[0] = zr;\n  out[1] = zi;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, acc: 0, clock: 0, sc: 26, sig: 0, n: 0, head: -1, race: 0,\n    // Each sample: t, the point, sigma it was taken at, the clock, and 1 when\n    // the curve breaks before it (a restart).\n    T: new Float64Array(CAP), X: new Float32Array(CAP), Y: new Float32Array(CAP), S: new Float64Array(CAP),\n    C: new Float32Array(CAP), B: new Uint8Array(CAP),\n    fix: -1, fixN: 0, dPrev: 9, falling: 0, flashes: [], hue: 0, life: 3, z: new Float64Array(2),\n    R: new Float32Array(N), G: new Float32Array(N), Bl: new Float32Array(N), col: new Float32Array(3),\n    sR: new Float32Array(N), sG: new Float32Array(N), sB: new Float32Array(N), tmp: new Float32Array(N),\n  });\n  // The first frame already shows the curve on its way to the first zero at\n  // t = 14.13: eight seconds of drawing at half the opening speed.\n  for (let i = 0; i \u003c 240; i++) step(P, 1 / 30, 1, 0, 0.06);\n}\n\nfunction push(P, brk) {\n  zeta(0.5 + P.sig, P.t, P.z);\n  const i = (P.head = (P.head + 1) % CAP);\n  P.T[i] = P.t;\n  P.X[i] = P.z[0];\n  P.Y[i] = P.z[1];\n  P.S[i] = P.sig;\n  P.C[i] = P.clock;\n  P.B[i] = brk;\n  P.n = min(P.n + 1, CAP);\n  // A pass by the origin is the moment the distance stops falling. Its\n  // flash is as bright as the pass is close: full on the critical line, a\n  // glimmer a few LEDs off it.\n  const d = hypot(P.z[0], P.z[1]);\n  if (!brk && d > P.dPrev && P.falling && P.dPrev \u003c 0.6) {\n    const j = (i + CAP - 1) % CAP, k = (i + CAP - 2) % CAP;\n    const miss = segDist(P.X[k], P.Y[k], P.X[j], P.Y[j], P.X[i], P.Y[i]) * P.sc;\n    const s = exp(-(miss * miss) / 3);\n    if (s > 0.05) P.flashes.push([P.clock, s]);\n    if (P.race && P.t > P.race) P.race = 0;\n  }\n  P.falling = d \u003c P.dPrev ? 1 : 0;\n  P.dPrev = brk ? 9 : d;\n}\n\n// How close the two segments a-b-c come to the origin.\nfunction segDist(ax, ay, bx, by, cx, cy) {\n  const one = (px, py, qx, qy) => {\n    const dx = qx - px, dy = qy - py, l = dx * dx + dy * dy, u = l > 0 ? cl(-(px * dx + py * dy) / l, 0, 1) : 0;\n    return hypot(px + u * dx, py + u * dy);\n  };\n  return min(one(ax, ay, bx, by), one(bx, by, cx, cy));\n}\n\nfunction step(P, d, speed, sig, trail) {\n  P.clock += d;\n  P.life = 0.8 + 29.2 * trail ** 0.4;\n  P.sc += (scaleAt(P.t) - P.sc) * min(1, d * 1.5);\n  if (abs(sig - P.sig) > 0.002) (P.sig = sig), (P.fix = P.head), (P.fixN = P.n);\n  // t climbs a little slower as it rises, so the head's speed on the panel\n  // grows only slowly while the loops widen and the zeros crowd closer.\n  const rate = (speed * 1.55 * (P.race ? 10 : 1)) / (1 + P.t / 90);\n  P.acc += rate * d;\n  let brk = P.head \u003c 0 ? 1 : 0;\n  for (; P.acc >= DT; P.acc -= DT) {\n    P.t += DT;\n    if (P.t > TEND) (P.t = 0), (brk = 1), (P.race = 0);\n    push(P, brk);\n    brk = 0;\n  }\n  // The trail redraws itself at a new Sigma, newest first, a few hundred\n  // samples a frame.\n  if (P.fix >= 0) {\n    for (let c = 0; c \u003c 500 && P.fix >= 0; c++) {\n      const i = P.fix;\n      if (P.S[i] !== P.sig) {\n        zeta(0.5 + P.sig, P.T[i], P.z);\n        P.X[i] = P.z[0];\n        P.Y[i] = P.z[1];\n        P.S[i] = P.sig;\n      }\n      const j = (i + CAP - 1) % CAP;\n      P.fix = --P.fixN > 0 && P.clock - P.C[j] \u003c P.life ? j : -1;\n    }\n  }\n  P.flashes = P.flashes.filter((f) => P.clock - f[0] \u003c 1.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const b = input.btnPressed || [];\n  // The race runs past a zero the head is about to reach anyway and stops\n  // at the one after.\n  if (b[0]) P.race = P.t + 1;\n  if (b[1]) (P.t = TEND + 1), (P.race = 0);\n  step(P, d, cl(k[1], 0.2, 3), cl(k[2], -0.25, 0.25), cl(k[3], 0, 1));\n}\n\n// A soft dot of light, kept to the brightest of what is already there: full\n// on the LED under it, fading to nothing 1.3 LEDs out, so the curve draws\n// as a line a little under two LEDs wide.\nfunction dot(P, x, y, r, g, b) {\n  const cx = floor(x), cy = floor(y);\n  for (let yy = cy - 1; yy \u003c= cy + 1; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy + 0.5 - y;\n    for (let xx = cx - 1; xx \u003c= cx + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x, w = 1.3 - sqrt(dx * dx + dy * dy);\n      if (w \u003c= 0) continue;\n      const p = yy * W + xx, v = w > 1 ? 1 : w;\n      if (P.R[p] \u003c r * v) P.R[p] = r * v;\n      if (P.G[p] \u003c g * v) P.G[p] = g * v;\n      if (P.Bl[p] \u003c b * v) P.Bl[p] = b * v;\n    }\n  }\n}\n// Light added on top of the curve and its glow.\nconst add = (P, x, y, r, g, b) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  P.sR[p] += r;\n  P.sG[p] += g;\n  P.sB[p] += b;\n};\n\n// Two passes of a five-wide box along rows, then along columns, each a\n// running sum; the panel's edges count as dark.\nconst GLOW = 0.6;\nfunction box(a, o, step, n, out) {\n  let v = a[o] + a[o + step] + a[o + 2 * step];\n  for (let i = 0; i \u003c n; i++) {\n    out[o + i * step] = v / 5;\n    if (i + 3 \u003c n) v += a[o + (i + 3) * step];\n    if (i >= 2) v -= a[o + (i - 2) * step];\n  }\n}\nfunction blur(src, tmp, dst) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0; y \u003c H; y++) box(pass ? dst : src, y * W, 1, W, tmp);\n    for (let x = 0; x \u003c W; x++) box(tmp, x, W, H, dst);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const R = P.R, G = P.G, B = P.Bl, col = P.col;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The curve, oldest first, each segment walked in steps under half an LED.\n  const life = P.life;\n  let n = 0;\n  while (n \u003c P.n && P.clock - P.C[(P.head + CAP - n) % CAP] \u003c life) n++;\n  let i = (P.head + CAP - n + 1) % CAP;\n  for (let c = 0, px = 0, py = 0, ok = 0; c \u003c n; c++, i = (i + 1) % CAP) {\n    const age = P.clock - P.C[i];\n    const x = OX + 0.5 - P.Y[i] * P.sc, y = OY + 0.5 - P.X[i] * P.sc;\n    const f = 1 - age / life, v = sqrt(f);\n    // Young curve is pale, then the hue, then a deeper tail.\n    hsv(P.hue + 0.5 + 0.18 * (1 - f), 0.6 + 0.35 * min(1, (1 - f) * 4), v, col);\n    if (ok && !P.B[i]) {\n      const L = hypot(x - px, y - py), m = max(1, Math.ceil(L / 0.5));\n      for (let s = 1; s \u003c= m; s++) dot(P, px + ((x - px) * s) / m, py + ((y - py) * s) / m, col[0] * 255, col[1] * 255, col[2] * 255);\n    } else dot(P, x, y, col[0] * 255, col[1] * 255, col[2] * 255);\n    ok = 1;\n    px = x;\n    py = y;\n  }\n  // The curve glows: a soft blur of its own light, two box passes each\n  // way, laid under it. On the panel a bare 1-LED line looks thin.\n  const sR = P.sR, sG = P.sG, sB = P.sB;\n  blur(R, P.tmp, sR);\n  blur(G, P.tmp, sG);\n  blur(B, P.tmp, sB);\n  for (let p = 0; p \u003c N; p++) (sR[p] = R[p] + sR[p] * GLOW), (sG[p] = G[p] + sG[p] * GLOW), (sB[p] = B[p] + sB[p] * GLOW);\n  // The axes, dim: the real axis up the panel with a tick at each whole\n  // number, and a short stub of the imaginary axis through the origin.\n  for (let y = 0; y \u003c H; y++) {\n    const re = (OY - y) / P.sc, tick = abs(re - Math.round(re)) * P.sc \u003c 0.5;\n    add(P, OX, y, 14, 14, 18);\n    if (tick) for (let x = -2; x \u003c= 2; x++) if (x) add(P, OX + x, y, 16, 16, 20);\n  }\n  for (let x = OX - 6; x \u003c= OX + 6; x++) if (x !== OX) add(P, x, OY, 12, 12, 16);\n  // Each pass through the origin: the origin flares and a ring opens, in a\n  // pale rose that stays clear of the curve's colour and never browns.\n  hsv(P.hue + 0.92, 0.45, 1, col);\n  const fr = col[0] * 255, fg = col[1] * 255, fb = col[2] * 255;\n  for (const [c0, s] of P.flashes) {\n    const a = P.clock - c0, rad = 1.5 + a * 34, v = s * exp(-a * 2);\n    for (let y = max(0, floor(OY - rad - 2)); y \u003c= min(H - 1, OY + rad + 2); y++)\n      for (let x = max(0, floor(OX - rad - 2)); x \u003c= min(W - 1, OX + rad + 2); x++) {\n        const d = hypot(x - OX, y - OY), w = max(0, 1 - abs(d - rad) / 1.1) + max(0, 1 - d / 3.5) * exp(-a * 3) * 1.6;\n        if (w > 0) add(P, x, y, fr * v * w, fg * v * w, fb * v * w);\n      }\n  }\n  add(P, OX, OY, 40, 40, 44);\n  // The head: white with a small glow.\n  if (P.n) {\n    const h = P.head, hx = OX + 0.5 - P.Y[h] * P.sc, hy = OY + 0.5 - P.X[h] * P.sc;\n    for (let y = floor(hy) - 2; y \u003c= floor(hy) + 2; y++)\n      for (let x = floor(hx) - 2; x \u003c= floor(hx) + 2; x++) {\n        const d = hypot(x + 0.5 - hx, y + 0.5 - hy), w = exp(-d * d * 0.9);\n        add(P, x, y, 255 * w, 250 * w, 235 * w);\n      }\n  }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, sR[p]), min(255, sG[p]), min(255, sB[p]));\n}\n","layer":{"id":"layer-zeta-loops","type":"code","name":"zeta-loops","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Zeta Loops\n// Family:  line\n// Idea:    A bright head draws the Riemann zeta function along the critical line as t climbs, looping round the plane and passing exactly through the origin at every nontrivial zero, where the origin flashes and a ring opens from it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the Riemann zeta function on the critical line (Bernhard Riemann, 1859), pattern round 29\n// Round:   29\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1\n//\n// Knob 1: Hue. Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail.\n// Knob 2: Speed. How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower.\n// Knob 3: Sigma. How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn.\n// Knob 4: Trail. How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin.\n// Buttons: K1 tap sends the head racing ahead to the next zero. K2 tap starts t again from 0.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, exp, log, cos, sin, sqrt, hypot, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The plane turned a quarter turn: the real axis runs up the panel through\n// column OX, the imaginary axis runs left, the origin sits OY rows down.\nconst OX = 32, OY = 92;\n// LEDs to one unit at t. The loops widen with t faster than the panel does,\n// so the view backs off a little as t climbs: 26 at the start, 15 by\n// t = 118, which keeps most of each loop inside the side walls and still\n// lets the later loops come out bigger.\nconst scaleAt = (t) => 26 / (1 + t / 70) ** 0.55;\n// t runs from 0 to TEND and starts again. Samples are DT apart in t.\nconst TEND = 118, DT = 0.008, CAP = 16384;\n\n// Euler-Maclaurin summation: the first N-1 terms of the Dirichlet series,\n// the integral of the tail, and six Bernoulli corrections. With N past\n// t / 2 pi the corrections shrink fast, and ten more terms make it good to\n// many digits at the t this pattern reaches.\nconst NMAX = 64;\nconst LN = new Float64Array(NMAX + 1).map((_, n) => (n ? log(n) : 0));\nconst BF = [1 / 12, -1 / 720, 1 / 30240, -1 / 1209600, 1 / 47900160, -691 / 1307674368000];\nfunction zeta(sr, si, out) {\n  const n0 = min(NMAX - 1, floor(abs(si) / (2 * PI)) + 10);\n  let zr = 0, zi = 0;\n  for (let n = 1; n \u003c n0; n++) {\n    const m = exp(-sr * LN[n]), a = -si * LN[n];\n    zr += m * cos(a);\n    zi += m * sin(a);\n  }\n  // N^-s, then N^(1-s) / (s - 1) and half of N^-s.\n  const L = LN[n0], m = exp(-sr * L), a = -si * L, pr = m * cos(a), pi = m * sin(a);\n  const dr = sr - 1, d2 = dr * dr + si * si, nr = n0 * pr, ni = n0 * pi;\n  zr += (nr * dr + ni * si) / d2 + pr / 2;\n  zi += (ni * dr - nr * si) / d2 + pi / 2;\n  // B2k / (2k)! times s(s+1)...(s+2k-2) times N^(-s-2k+1).\n  let cr = pr / n0, ci = pi / n0, fr = sr, fi = si;\n  for (let k = 0; k \u003c 6; k++) {\n    const c = BF[k];\n    zr += c * (fr * cr - fi * ci);\n    zi += c * (fr * ci + fi * cr);\n    const a1 = sr + 2 * k + 1, a2 = sr + 2 * k + 2;\n    const gr = fr * a1 - fi * si, gi = fr * si + fi * a1;\n    fr = gr * a2 - gi * si;\n    fi = gr * si + gi * a2;\n    cr /= n0 * n0;\n    ci /= n0 * n0;\n  }\n  out[0] = zr;\n  out[1] = zi;\n}\n\nfunction hsv(h, s, v, out) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6, f = h - floor(h), p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);\n  out[0] = i === 0 || i === 5 ? v : i === 1 ? q : i === 4 ? t : p;\n  out[1] = i === 1 || i === 2 ? v : i === 0 ? t : i === 3 ? q : p;\n  out[2] = i === 3 || i === 4 ? v : i === 2 ? t : i === 5 ? q : p;\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, acc: 0, clock: 0, sc: 26, sig: 0, n: 0, head: -1, race: 0,\n    // Each sample: t, the point, sigma it was taken at, the clock, and 1 when\n    // the curve breaks before it (a restart).\n    T: new Float64Array(CAP), X: new Float32Array(CAP), Y: new Float32Array(CAP), S: new Float64Array(CAP),\n    C: new Float32Array(CAP), B: new Uint8Array(CAP),\n    fix: -1, fixN: 0, dPrev: 9, falling: 0, flashes: [], hue: 0, life: 3, z: new Float64Array(2),\n    R: new Float32Array(N), G: new Float32Array(N), Bl: new Float32Array(N), col: new Float32Array(3),\n    sR: new Float32Array(N), sG: new Float32Array(N), sB: new Float32Array(N), tmp: new Float32Array(N),\n  });\n  // The first frame already shows the curve on its way to the first zero at\n  // t = 14.13: eight seconds of drawing at half the opening speed.\n  for (let i = 0; i \u003c 240; i++) step(P, 1 / 30, 1, 0, 0.06);\n}\n\nfunction push(P, brk) {\n  zeta(0.5 + P.sig, P.t, P.z);\n  const i = (P.head = (P.head + 1) % CAP);\n  P.T[i] = P.t;\n  P.X[i] = P.z[0];\n  P.Y[i] = P.z[1];\n  P.S[i] = P.sig;\n  P.C[i] = P.clock;\n  P.B[i] = brk;\n  P.n = min(P.n + 1, CAP);\n  // A pass by the origin is the moment the distance stops falling. Its\n  // flash is as bright as the pass is close: full on the critical line, a\n  // glimmer a few LEDs off it.\n  const d = hypot(P.z[0], P.z[1]);\n  if (!brk && d > P.dPrev && P.falling && P.dPrev \u003c 0.6) {\n    const j = (i + CAP - 1) % CAP, k = (i + CAP - 2) % CAP;\n    const miss = segDist(P.X[k], P.Y[k], P.X[j], P.Y[j], P.X[i], P.Y[i]) * P.sc;\n    const s = exp(-(miss * miss) / 3);\n    if (s > 0.05) P.flashes.push([P.clock, s]);\n    if (P.race && P.t > P.race) P.race = 0;\n  }\n  P.falling = d \u003c P.dPrev ? 1 : 0;\n  P.dPrev = brk ? 9 : d;\n}\n\n// How close the two segments a-b-c come to the origin.\nfunction segDist(ax, ay, bx, by, cx, cy) {\n  const one = (px, py, qx, qy) => {\n    const dx = qx - px, dy = qy - py, l = dx * dx + dy * dy, u = l > 0 ? cl(-(px * dx + py * dy) / l, 0, 1) : 0;\n    return hypot(px + u * dx, py + u * dy);\n  };\n  return min(one(ax, ay, bx, by), one(bx, by, cx, cy));\n}\n\nfunction step(P, d, speed, sig, trail) {\n  P.clock += d;\n  P.life = 0.8 + 29.2 * trail ** 0.4;\n  P.sc += (scaleAt(P.t) - P.sc) * min(1, d * 1.5);\n  if (abs(sig - P.sig) > 0.002) (P.sig = sig), (P.fix = P.head), (P.fixN = P.n);\n  // t climbs a little slower as it rises, so the head's speed on the panel\n  // grows only slowly while the loops widen and the zeros crowd closer.\n  const rate = (speed * 1.55 * (P.race ? 10 : 1)) / (1 + P.t / 90);\n  P.acc += rate * d;\n  let brk = P.head \u003c 0 ? 1 : 0;\n  for (; P.acc >= DT; P.acc -= DT) {\n    P.t += DT;\n    if (P.t > TEND) (P.t = 0), (brk = 1), (P.race = 0);\n    push(P, brk);\n    brk = 0;\n  }\n  // The trail redraws itself at a new Sigma, newest first, a few hundred\n  // samples a frame.\n  if (P.fix >= 0) {\n    for (let c = 0; c \u003c 500 && P.fix >= 0; c++) {\n      const i = P.fix;\n      if (P.S[i] !== P.sig) {\n        zeta(0.5 + P.sig, P.T[i], P.z);\n        P.X[i] = P.z[0];\n        P.Y[i] = P.z[1];\n        P.S[i] = P.sig;\n      }\n      const j = (i + CAP - 1) % CAP;\n      P.fix = --P.fixN > 0 && P.clock - P.C[j] \u003c P.life ? j : -1;\n    }\n  }\n  P.flashes = P.flashes.filter((f) => P.clock - f[0] \u003c 1.6);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], d = cl(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  const b = input.btnPressed || [];\n  // The race runs past a zero the head is about to reach anyway and stops\n  // at the one after.\n  if (b[0]) P.race = P.t + 1;\n  if (b[1]) (P.t = TEND + 1), (P.race = 0);\n  step(P, d, cl(k[1], 0.2, 3), cl(k[2], -0.25, 0.25), cl(k[3], 0, 1));\n}\n\n// A soft dot of light, kept to the brightest of what is already there: full\n// on the LED under it, fading to nothing 1.3 LEDs out, so the curve draws\n// as a line a little under two LEDs wide.\nfunction dot(P, x, y, r, g, b) {\n  const cx = floor(x), cy = floor(y);\n  for (let yy = cy - 1; yy \u003c= cy + 1; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy + 0.5 - y;\n    for (let xx = cx - 1; xx \u003c= cx + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x, w = 1.3 - sqrt(dx * dx + dy * dy);\n      if (w \u003c= 0) continue;\n      const p = yy * W + xx, v = w > 1 ? 1 : w;\n      if (P.R[p] \u003c r * v) P.R[p] = r * v;\n      if (P.G[p] \u003c g * v) P.G[p] = g * v;\n      if (P.Bl[p] \u003c b * v) P.Bl[p] = b * v;\n    }\n  }\n}\n// Light added on top of the curve and its glow.\nconst add = (P, x, y, r, g, b) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = y * W + x;\n  P.sR[p] += r;\n  P.sG[p] += g;\n  P.sB[p] += b;\n};\n\n// Two passes of a five-wide box along rows, then along columns, each a\n// running sum; the panel's edges count as dark.\nconst GLOW = 0.6;\nfunction box(a, o, step, n, out) {\n  let v = a[o] + a[o + step] + a[o + 2 * step];\n  for (let i = 0; i \u003c n; i++) {\n    out[o + i * step] = v / 5;\n    if (i + 3 \u003c n) v += a[o + (i + 3) * step];\n    if (i >= 2) v -= a[o + (i - 2) * step];\n  }\n}\nfunction blur(src, tmp, dst) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = 0; y \u003c H; y++) box(pass ? dst : src, y * W, 1, W, tmp);\n    for (let x = 0; x \u003c W; x++) box(tmp, x, W, H, dst);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const R = P.R, G = P.G, B = P.Bl, col = P.col;\n  R.fill(0);\n  G.fill(0);\n  B.fill(0);\n  // The curve, oldest first, each segment walked in steps under half an LED.\n  const life = P.life;\n  let n = 0;\n  while (n \u003c P.n && P.clock - P.C[(P.head + CAP - n) % CAP] \u003c life) n++;\n  let i = (P.head + CAP - n + 1) % CAP;\n  for (let c = 0, px = 0, py = 0, ok = 0; c \u003c n; c++, i = (i + 1) % CAP) {\n    const age = P.clock - P.C[i];\n    const x = OX + 0.5 - P.Y[i] * P.sc, y = OY + 0.5 - P.X[i] * P.sc;\n    const f = 1 - age / life, v = sqrt(f);\n    // Young curve is pale, then the hue, then a deeper tail.\n    hsv(P.hue + 0.5 + 0.18 * (1 - f), 0.6 + 0.35 * min(1, (1 - f) * 4), v, col);\n    if (ok && !P.B[i]) {\n      const L = hypot(x - px, y - py), m = max(1, Math.ceil(L / 0.5));\n      for (let s = 1; s \u003c= m; s++) dot(P, px + ((x - px) * s) / m, py + ((y - py) * s) / m, col[0] * 255, col[1] * 255, col[2] * 255);\n    } else dot(P, x, y, col[0] * 255, col[1] * 255, col[2] * 255);\n    ok = 1;\n    px = x;\n    py = y;\n  }\n  // The curve glows: a soft blur of its own light, two box passes each\n  // way, laid under it. On the panel a bare 1-LED line looks thin.\n  const sR = P.sR, sG = P.sG, sB = P.sB;\n  blur(R, P.tmp, sR);\n  blur(G, P.tmp, sG);\n  blur(B, P.tmp, sB);\n  for (let p = 0; p \u003c N; p++) (sR[p] = R[p] + sR[p] * GLOW), (sG[p] = G[p] + sG[p] * GLOW), (sB[p] = B[p] + sB[p] * GLOW);\n  // The axes, dim: the real axis up the panel with a tick at each whole\n  // number, and a short stub of the imaginary axis through the origin.\n  for (let y = 0; y \u003c H; y++) {\n    const re = (OY - y) / P.sc, tick = abs(re - Math.round(re)) * P.sc \u003c 0.5;\n    add(P, OX, y, 14, 14, 18);\n    if (tick) for (let x = -2; x \u003c= 2; x++) if (x) add(P, OX + x, y, 16, 16, 20);\n  }\n  for (let x = OX - 6; x \u003c= OX + 6; x++) if (x !== OX) add(P, x, OY, 12, 12, 16);\n  // Each pass through the origin: the origin flares and a ring opens, in a\n  // pale rose that stays clear of the curve's colour and never browns.\n  hsv(P.hue + 0.92, 0.45, 1, col);\n  const fr = col[0] * 255, fg = col[1] * 255, fb = col[2] * 255;\n  for (const [c0, s] of P.flashes) {\n    const a = P.clock - c0, rad = 1.5 + a * 34, v = s * exp(-a * 2);\n    for (let y = max(0, floor(OY - rad - 2)); y \u003c= min(H - 1, OY + rad + 2); y++)\n      for (let x = max(0, floor(OX - rad - 2)); x \u003c= min(W - 1, OX + rad + 2); x++) {\n        const d = hypot(x - OX, y - OY), w = max(0, 1 - abs(d - rad) / 1.1) + max(0, 1 - d / 3.5) * exp(-a * 3) * 1.6;\n        if (w > 0) add(P, x, y, fr * v * w, fg * v * w, fb * v * w);\n      }\n  }\n  add(P, OX, OY, 40, 40, 44);\n  // The head: white with a small glow.\n  if (P.n) {\n    const h = P.head, hx = OX + 0.5 - P.Y[h] * P.sc, hy = OY + 0.5 - P.X[h] * P.sc;\n    for (let y = floor(hy) - 2; y \u003c= floor(hy) + 2; y++)\n      for (let x = floor(hx) - 2; x \u003c= floor(hx) + 2; x++) {\n        const d = hypot(x + 0.5 - hx, y + 0.5 - hy), w = exp(-d * d * 0.9);\n        add(P, x, y, 255 * w, 250 * w, 235 * w);\n      }\n  }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p++) display.setPixel(x, y, min(255, sR[p]), min(255, sG[p]), min(255, sB[p]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sigma=-0.25..0.25, Trail=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour of the curve round the colour wheel; at 0 it is cyan with a blue tail."},{"name":"Speed","min":0.2,"max":3,"about":"How fast t climbs: at 2 the head reaches a new zero every two seconds or so, at 0.2 ten times slower."},{"name":"Sigma","min":-0.25,"max":0.25,"about":"How far the line runs from the critical line Re s = 1/2: at 0 every loop hits the origin, and off it the loops miss it to one side, wider the further you turn."},{"name":"Trail","min":0,"max":1,"about":"How long the drawn curve stays lit: under a second at 0, about ten at the opening 0.06, half a minute at 1, when the loops stack into a rosette round the origin."}],"start":[0,2,0,0.06],"measures":{"motion":0.1356,"detail":0.0457,"edges":0.4182,"complexity":0.8175,"coverage":0.1691,"colour":0.1955,"drift":0.0901},"knobResponse":[0.0373,0.0539,0.0648,0.0438]}],"families":{"algo":{"label":"알고리즘","color":"#e0c060"},"automata":{"label":"셀룰러 오토마타","color":"#9be15d"},"bird":{"label":"새","color":"#778800"},"body":{"label":"몸","color":"#bb5566"},"celestial":{"label":"천체","color":"#ffffaa"},"cells":{"label":"보로노이·셀","color":"#5fd0d0"},"chemistry":{"label":"화학·실험","color":"#00bb00"},"circuit":{"label":"전자 회로","color":"#2e7d32"},"city":{"label":"도시","color":"#22ff00"},"construction":{"label":"공사·건설","color":"#ffee00"},"cosmetic":{"label":"화장품 팝업","color":"#f2c6c2"},"data":{"label":"데이터 그림","color":"#7fe08a"},"fair":{"label":"놀이공원","color":"#ffffff"},"farm":{"label":"농사·밭","color":"#449911"},"film":{"label":"필름·영화","color":"#ff0000"},"flight":{"label":"비행","color":"#9944ee"},"fractal":{"label":"프랙탈","color":"#a3a0ff"},"fungi":{"label":"버섯·균사","color":"#00ff88"},"geometry":{"label":"기하·대칭","color":"#c77dff"},"glass":{"label":"유리","color":"#b0002a"},"glitch":{"label":"글리치","color":"#b0b8c8"},"growth":{"label":"자라남","color":"#d4c094"},"insect":{"label":"곤충","color":"#b4e61e"},"kitchen":{"label":"부엌","color":"#ff5500"},"light":{"label":"빛","color":"#7ef0d0"},"line":{"label":"선·궤적","color":"#ff7a45"},"machine":{"label":"기계·톱니","color":"#4a2cff"},"mammal":{"label":"짐승","color":"#998844"},"microbe":{"label":"미생물","color":"#aa00aa"},"mineral":{"label":"광물·결정","color":"#886688"},"music":{"label":"음악·악기","color":"#a0705a"},"noise":{"label":"노이즈·흐름","color":"#5ec8ff"},"number":{"label":"수론","color":"#00aaff"},"ocean":{"label":"바다","color":"#1f7fb8"},"paper":{"label":"종이","color":"#996600"},"particle":{"label":"입자","color":"#ffb02e"},"physics":{"label":"물리·스프링","color":"#ff9db0"},"pixel":{"label":"픽셀 아트","color":"#ffd166"},"polar":{"label":"얼음·극지","color":"#00ffff"},"pottery":{"label":"도자기","color":"#b05030"},"print":{"label":"망점·인쇄","color":"#f0a0e0"},"rail":{"label":"철도","color":"#00bb66"},"rhythm":{"label":"리듬·펄스","color":"#ff4d4d"},"sim":{"label":"시뮬레이션","color":"#3fe0a8"},"space":{"label":"공간·원근","color":"#e8e05a"},"sport":{"label":"운동·경기","color":"#337777"},"stage":{"label":"무대·공연","color":"#ff0066"},"textile":{"label":"직물·짜임","color":"#e04ad8"},"time":{"label":"시계·시간","color":"#ff8f5a"},"topology":{"label":"위상·매듭","color":"#80ff40"},"toy":{"label":"장난감","color":"#dd11ff"},"type":{"label":"글자","color":"#ff5fa2"},"volcano":{"label":"화산","color":"#bb2200"},"wave":{"label":"물결·간섭","color":"#4f7dff"},"weather":{"label":"날씨·자연","color":"#8fc0ff"}}}</script>
 <script>
 "use strict";(()=>{var PANEL_GEOMETRIES={"128x64_SINGLE":{id:1,physW:128,physH:64,chain:1,resW:128,resH:64},"64x64_SINGLE":{id:2,physW:64,physH:64,chain:1,resW:64,resH:64},"64x64_CHAIN2":{id:3,physW:64,physH:64,chain:2,resW:128,resH:64}},PANEL_GEOM_DEFAULT="128x64_SINGLE",KNOB_COUNT=4,DETENTS_PER_TURN=24,TURNS_PER_FULL_RANGE=2;function knobUnitsPerTurn(range){return(range[1]-range[0])/TURNS_PER_FULL_RANGE}var KNOB_SPAN_FLOOR=1e-4;function normalizeKnob(value,range){return(value-range[0])/Math.max(KNOB_SPAN_FLOOR,range[1]-range[0])}var LOGICAL_KNOB_WRAP=[!0,!1,!1,!0];function wrapKnobDelta(delta,span=1){return delta>span/2?delta-span:delta<-span/2?delta+span:delta}var PATTERN_MATRIX_WIDTH=PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resW,PATTERN_MATRIX_HEIGHT=PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resH,PATTERN_KNOB_COUNT=KNOB_COUNT,PATTERN_DETENTS_PER_TURN=DETENTS_PER_TURN;function clampByte(value){return Number.isFinite(value)?Math.max(0,Math.min(255,Math.round(value))):0}function rgbToHsv(r,g,b){let rf=r/255,gf=g/255,bf=b/255,max=Math.max(rf,gf,bf),min=Math.min(rf,gf,bf),delta=max-min,h=0;delta>0&&(max===rf?h=(gf-bf)/delta%6:max===gf?h=(bf-rf)/delta+2:h=(rf-gf)/delta+4,h/=6,h<0&&(h+=1));let s=max===0?0:delta/max;return[h,s,max]}function hsvToRgbTuple(h,s,v){h=h-Math.floor(h);let i=Math.floor(h*6),f=h*6-i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s),r,g,b;switch(i%6){case 0:r=v,g=t,b=p;break;case 1:r=q,g=v,b=p;break;case 2:r=p,g=v,b=t;break;case 3:r=p,g=q,b=v;break;case 4:r=t,g=p,b=v;break;default:r=v,g=p,b=q;break}return[Math.round(r*255),Math.round(g*255),Math.round(b*255)]}function srgbChannelToLinear(c){return c/=255,c<=.04045?c/12.92:Math.pow((c+.055)/1.055,2.4)}function linearChannelToSrgb(c){let v=c<=.0031308?c*12.92:1.055*Math.pow(c,.4166666666666667)-.055;return Math.max(0,Math.min(1,v))*255}function srgbToOklab(r,g,b){let lr=srgbChannelToLinear(r),lg=srgbChannelToLinear(g),lb=srgbChannelToLinear(b),l=Math.cbrt(.4122214708*lr+.5363325363*lg+.0514459929*lb),m=Math.cbrt(.2119034982*lr+.6806995451*lg+.1073969566*lb),s=Math.cbrt(.0883024619*lr+.2817188376*lg+.6299787005*lb);return[.2104542553*l+.793617785*m-.0040720468*s,1.9779984951*l-2.428592205*m+.4505937099*s,.0259040371*l+.7827717662*m-.808675766*s]}function oklabToLinearRgb(L,A,B){let l_=L+.3963377774*A+.2158037573*B,m_=L-.1055613458*A-.0638541728*B,s_=L-.0894841775*A-1.291485548*B,l=l_*l_*l_,m=m_*m_*m_,s=s_*s_*s_;return[4.0767416621*l-3.3077115913*m+.2309699292*s,-1.2684380046*l+2.6097574011*m-.3413193965*s,-.0041960863*l-.7034186147*m+1.707614701*s]}var GAMUT_EPS=1e-4;function inLinearGamut(rgb){return rgb[0]>=-GAMUT_EPS&&rgb[0]<=1+GAMUT_EPS&&rgb[1]>=-GAMUT_EPS&&rgb[1]<=1+GAMUT_EPS&&rgb[2]>=-GAMUT_EPS&&rgb[2]<=1+GAMUT_EPS}function oklabToSrgb(L,A,B){let rgb=oklabToLinearRgb(L,A,B);if(!inLinearGamut(rgb)){let lo=0,hi=1;for(let i=0;i<16;i++){let mid=(lo+hi)/2;inLinearGamut(oklabToLinearRgb(L,A*mid,B*mid))?lo=mid:hi=mid}rgb=oklabToLinearRgb(L,A*lo,B*lo)}return[linearChannelToSrgb(rgb[0]),linearChannelToSrgb(rgb[1]),linearChannelToSrgb(rgb[2])]}function mixRampColors(a,b,t,mode){if(mode==="smooth"&&(t=t*t*(3-2*t)),mode==="oklab"||mode==="oklchShort"||mode==="oklchLong"){let[La,Aa,Ba]=srgbToOklab(a[0],a[1],a[2]),[Lb,Ab,Bb]=srgbToOklab(b[0],b[1],b[2]),L=La+(Lb-La)*t;if(mode==="oklab")return oklabToSrgb(L,Aa+(Ab-Aa)*t,Ba+(Bb-Ba)*t);let CHROMA_EPS=1e-4,TWO_PI=Math.PI*2,Ca=Math.sqrt(Aa*Aa+Ba*Ba),Cb=Math.sqrt(Ab*Ab+Bb*Bb),hueA=Math.atan2(Ba,Aa)/TWO_PI;hueA<0&&(hueA+=1);let hueB=Math.atan2(Bb,Ab)/TWO_PI;hueB<0&&(hueB+=1);let h1=Ca<CHROMA_EPS?Cb<CHROMA_EPS?0:hueB:hueA,dh=(Cb<CHROMA_EPS?h1:hueB)-h1;mode==="oklchShort"?(dh>.5&&(dh-=1),dh<-.5&&(dh+=1)):dh>0&&dh<.5?dh-=1:dh<=0&&dh>-.5&&(dh+=1);let C=Ca+(Cb-Ca)*t,H=(h1+dh*t)*TWO_PI;return oklabToSrgb(L,Math.cos(H)*C,Math.sin(H)*C)}if(mode==="hsvShort"||mode==="hsvLong"){let ha=rgbToHsv(a[0],a[1],a[2]),hb=rgbToHsv(b[0],b[1],b[2]),h1=ha[1]===0?hb[0]:ha[0],dh=(hb[1]===0?h1:hb[0])-h1;return mode==="hsvShort"?(dh>.5&&(dh-=1),dh<-.5&&(dh+=1)):dh>0&&dh<.5?dh-=1:dh<=0&&dh>-.5&&(dh+=1),hsvToRgbTuple(h1+dh*t,ha[1]+(hb[1]-ha[1])*t,ha[2]+(hb[2]-ha[2])*t)}return[a[0]+(b[0]-a[0])*t,a[1]+(b[1]-a[1])*t,a[2]+(b[2]-a[2])*t]}function stopAlpha(stop){let a=stop.alpha;return a===void 0||!Number.isFinite(a)?1:Math.max(0,Math.min(1,a))}function mixStopAlpha(a,b,t,mode){mode==="smooth"&&(t=t*t*(3-2*t));let aa=stopAlpha(a);return aa+(stopAlpha(b)-aa)*t}function sampleSortedRampRGBA(stops,mode,wrap,t){if(stops.length===0)return[255,255,255,1];if(stops.length===1)return[...stops[0].color,stopAlpha(stops[0])];t=Math.max(0,Math.min(1,t));let first=stops[0],last2=stops[stops.length-1];if(t<=first.position||t>=last2.position){if(!wrap){let edge=t<=first.position?first:last2;return[...edge.color,stopAlpha(edge)]}let span=1-last2.position+first.position,local=span<=0?0:(t>=last2.position?t-last2.position:t+1-last2.position)/span;return mode==="step"?[...last2.color,stopAlpha(last2)]:[...mixRampColors(last2.color,first.color,local,mode),mixStopAlpha(last2,first,local,mode)]}for(let i=0;i<stops.length-1;i++){let a=stops[i],b=stops[i+1];if(t>b.position)continue;if(mode==="step")return[...a.color,stopAlpha(a)];let span=b.position-a.position,local=span<=0?0:(t-a.position)/span;return[...mixRampColors(a.color,b.color,local,mode),mixStopAlpha(a,b,local,mode)]}return[...last2.color,stopAlpha(last2)]}function buildRampLUTRGBA(ramp){let sorted=[...ramp.stops].sort((a,b)=>a.position-b.position),lut=new Uint8Array(256*4);for(let i=0;i<256;i++){let[r,g,b,a]=sampleSortedRampRGBA(sorted,ramp.mode,ramp.wrap,i/255);lut[i*4]=clampByte(r),lut[i*4+1]=clampByte(g),lut[i*4+2]=clampByte(b),lut[i*4+3]=clampByte(a*255)}return lut}function normalizePatternCode(code){return code.replace(/^\s*import\s+.*?;?\s*$/gm,"").replace(/\bexport\s+function\b/g,"function")}var WRAPPER_LINES_BEFORE_CODE=2,functionPreambleLines=null;function stackLocation(error){let stack=error instanceof Error?error.stack:null;if(!stack)return null;let match=stack.match(/(?:<anonymous>|Function|eval):(\d+):(\d+)/);return match?{line:Number(match[1]),column:Number(match[2])}:null}function getFunctionPreambleLines(){if(functionPreambleLines!==null)return functionPreambleLines;functionPreambleLines=2;try{new Function("throw new Error('probe');")()}catch(error){let location2=stackLocation(error);location2&&(functionPreambleLines=location2.line-1)}return functionPreambleLines}var OPENER_OF={")":"(","]":"[","}":"{"},REGEX_AFTER_WORDS=new Set(["return","typeof","instanceof","in","of","new","delete","void","throw","case","do","else","yield","await"]);function regexCanStart(prev,word){return word?REGEX_AFTER_WORDS.has(word):prev===""||"(,=:[!&|?{};+-*%<>~^".includes(prev)}function openAtEnd(code){let stack=[],innermostFirst=inside=>inside?[inside,...stack.slice().reverse()]:stack.slice().reverse(),prev="",word="",i=0;for(;i<code.length;){let c=code[i];if(stack[stack.length-1]==="`"){c==="\\"?i+=2:c==="`"?(stack.pop(),prev=c,word="",i++):c==="$"&&code[i+1]==="{"?(stack.push("${"),prev="{",word="",i+=2):i++;continue}if(/\s/.test(c)){i++;continue}if(/[\w$]/.test(c)){let j=i+1;for(;j<code.length&&/[\w$]/.test(code[j]);)j++;word=code.slice(i,j),prev=code[j-1],i=j;continue}let next=code[i+1];if(c==="/"&&next==="/"){let end=code.indexOf(`
 `,i);if(end<0)break;i=end;continue}if(c==="/"&&next==="*"){let end=code.indexOf("*/",i+2);if(end<0)return innermostFirst("/*");i=end+2;continue}if(c==='"'||c==="'"){let j=i+1;for(;j<code.length&&code[j]!==c;){if(code[j]===`